@font-face{font-family:Pixel;src:url('./assets/pixel.ttf') format('truetype');font-display:swap}
:root{font-family:Arial,Helvetica,sans-serif;color:#f5f0fc;background:#100e1b;font-synthesis:none;--purple:#b59bdf;--muted:#a8a0b7;--line:#c9b2f026;--panel:#151320df;--pink:#d994ac}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #d6c0ff;outline-offset:5px}button:disabled{opacity:.5;cursor:wait}[hidden]{display:none!important}#app{position:relative;width:100%;height:100dvh;min-height:420px;overflow:hidden;background:#16151e}#game{display:block;width:100%;height:100%;outline:none;touch-action:none;image-rendering:pixelated}.vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 160px 25px #0705116b}.topbar{position:absolute;top:0;left:0;width:100%;height:88px;padding:0 42px;display:flex;align-items:center;justify-content:space-between;z-index:10;background:linear-gradient(#100d19e8,transparent);pointer-events:none}.topbar>*{pointer-events:auto}.brand{display:flex;gap:11px;align-items:center;text-decoration:none;color:#f6f0ff;font-size:13px;font-weight:700;letter-spacing:3px;line-height:1.6}.brand small{display:block;font-size:8px;letter-spacing:2.6px;color:#aa9abf}.brand-sigil{font-size:37px;font-weight:400;color:#c0a5df}.top-actions{display:flex;gap:18px;align-items:center}.local-save{font-size:9px;letter-spacing:1.4px;color:#aaa1b6;display:flex;align-items:center;gap:7px}.local-save i{height:5px;width:5px;border-radius:50%;background:#a6c6ab;box-shadow:0 0 10px #a6c6ab55}.icon-button{border:1px solid var(--line);background:#17121f66;border-radius:5px;padding:9px 12px;color:#d5cade;font-size:17px}.icon-button span{font-size:10px;margin-left:5px}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column}.eyebrow{font-size:10px;letter-spacing:3px;color:#beaed2;font-weight:600;line-height:1.8}#loading{background:#100e1b;z-index:15}#loading h1{font:32px Pixel,monospace;letter-spacing:1px}#load-status{color:var(--muted);font-size:12px}.loading-orb{width:35px;height:35px;border-radius:50%;border:1px solid #55436b;border-top-color:#cdb0ff;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.title-screen{align-items:flex-start;background:linear-gradient(90deg,#100d1be8 0%,#100d1bbb 35%,#100d1b1a 72%);z-index:2}.title-content{margin-left:10%;margin-top:-10px;width:480px;max-width:80%}.title-content .eyebrow{display:flex;align-items:center;gap:12px;font-size:9px;letter-spacing:2.5px}.title-content .eyebrow>span{height:1px;width:24px;background:#ae8cce}.title-content h1{font-family:Georgia,'Times New Roman',serif;font-size:82px;font-weight:500;letter-spacing:10px;margin:35px 0 19px;line-height:.99;text-shadow:0 5px 40px #ae84d740;color:#ece1fb}.title-content h1>span{display:block;font-family:Arial,sans-serif;font-size:24px;font-weight:700;letter-spacing:11px;margin-bottom:18px;color:#e3d7ee}.title-content h1>small{display:block;font:12px Arial,sans-serif;letter-spacing:14px;margin:0 0 16px 2px;color:#c7b2df}.title-rule{height:1px;background:linear-gradient(90deg,#a58cbc88,transparent);width:350px;margin:30px 0;position:relative}.title-rule span{position:absolute;left:0;top:-7px;color:#bb9ddb;background:#17121e;padding-right:14px;font-size:12px}.intro-copy{font-size:13px;color:#bfb4cd;line-height:1.9;letter-spacing:.15px;margin:0 0 27px}.title-buttons{display:flex;flex-direction:column;gap:10px;max-width:310px}.primary,.secondary{display:flex;align-items:center;justify-content:space-between;border-radius:4px;padding:16px 20px;font-size:12px;font-weight:600;letter-spacing:.2px;min-height:48px;transition:background .2s,transform .2s}.primary{background:#c2a4e7;color:#24172e;border:1px solid #d4baf2;box-shadow:0 4px 35px #b191d821}.primary:hover{background:#d5bbf3;transform:translateY(-1px)}.primary span{font-size:18px}.secondary{background:#272032bb;border:1px solid #9984b04a;color:#d8c9e7}.secondary:hover{background:#392d48}.text-button{background:none;border:0;color:#bbadca;font-size:11px;padding:14px 0;letter-spacing:.3px}.text-button:hover{color:white}.title-content>.text-button{margin-top:12px}.text-button>span{border:1px solid #6f5c82;padding:0 5px;border-radius:50%;margin-left:8px;font-size:9px}.title-caption{position:absolute;right:9%;bottom:20%;display:flex;gap:10px;flex-direction:column;color:#c3b5d0;font-size:11px}.title-caption .tiny-label{font-size:9px;letter-spacing:3px;color:#e0c6f6}.title-footer{position:absolute;bottom:32px;left:42px;right:42px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:2px;color:#8f819e}.headphone{font-size:16px;vertical-align:middle;padding-left:10px}.glass{background:var(--panel);border:1px solid var(--line);border-radius:7px;backdrop-filter:blur(12px)}
.menu-overlay{z-index:12;background:#090713b3;backdrop-filter:blur(5px)}.menu-card{padding:40px;width:400px;max-width:90%;text-align:center}.menu-card h1{font:38px Pixel,monospace;font-weight:400;margin:18px 0}.menu-card>p:not(.eyebrow){font-size:12px;line-height:1.8;color:#b5a3c7;margin-bottom:27px}.menu-card>button{width:100%;margin-top:10px}.menu-card>.secondary{justify-content:center}.intro-overlay{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center;background:linear-gradient(#09041255,transparent,#09041255);border-top:70px solid #0b0710;border-bottom:70px solid #0b0710}.intro-overlay>p{font:42px Pixel,monospace;color:#debada;letter-spacing:4px;text-shadow:0 0 30px #ad4fa1}.intro-overlay>button{position:absolute;bottom:-50px;right:40px;pointer-events:auto}dialog{border:1px solid #7b589780;border-radius:10px;background:#1c1528;color:#efe3fa;padding:32px;width:510px;max-width:92vw;max-height:90dvh;box-shadow:0 20px 100px #0008}dialog::backdrop{background:#06040bdd;backdrop-filter:blur(5px)}dialog h2{font:34px Pixel,monospace;margin:15px 0}dialog p{font-size:12px;line-height:1.7;color:#baa8ca}dialog dl>div{display:flex;justify-content:space-between;border-bottom:1px solid #b598d31b;padding:10px 0;font-size:11px}dialog dt{color:#bcaacc}dialog dd{margin:0;color:#e8d3fa;font-size:10px}dialog .guide-note{font-size:10px;margin-bottom:0}.dialog-close{position:absolute;right:17px;top:12px;background:none;border:0;font-size:28px;color:#bea7d4}
@media(min-width:1600px){.title-content{margin-left:13%;}.title-content h1{font-size:105px}.title-content .intro-copy{font-size:15px}.title-caption{right:12%}}

/* A compact play HUD. Detailed information lives in the bag and map dialogs. */
.in-world .brand { display:none; }
.in-world .topbar { height:64px; padding:0 22px; justify-content:flex-end; background:none; }
.in-world .top-actions { gap:7px; }
.in-world .icon-button { font-size:11px; height:34px; min-width:38px; background:#151320d9; }
#hud { position:absolute; inset:0; pointer-events:none; }
#hud button { pointer-events:auto; }
.health-pill { position:absolute; top:20px; left:22px; display:flex; align-items:center; gap:10px; height:32px; padding:0 11px; background:#151320c9; border:1px solid #b598d328; border-radius:5px; }
.health-pill>span:first-child { color:#d6a1b2; font-size:12px; }
#hp-value { font-size:10px; font-variant-numeric:tabular-nums; min-width:20px; text-align:right; color:#dfd7e8; }
.health-track { width:84px; height:4px; background:#453542; border-radius:2px; overflow:hidden; }
#hp-bar { height:100%; width:100%; background:#b0c5a5; transition:width .2s; }
.bottom-hud { position:absolute; bottom:20px; left:22px; right:22px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.partner-dock,.ball-dock { background:#151320e0; border:1px solid #c9b2f036; border-radius:6px; }
.partner-dock { display:flex; position:relative; overflow:hidden; }
.dock-button { border:0; background:transparent; padding:10px 12px; display:flex; align-items:center; gap:10px; text-align:left; }
.dock-button:hover,.dock-toggle:hover { background:#b998d31c; }
.dock-button img { width:35px; height:34px; object-fit:contain; image-rendering:pixelated; }
.dock-button strong { display:block; font-size:11px; font-weight:500; margin-bottom:5px; }
.dock-button small { display:block; color:#b7a9c6; font-size:9px; font-variant-numeric:tabular-nums; }
.dock-toggle { background:transparent; border:0; border-left:1px solid #c9b2f020; padding:0 12px; color:#bfa6d6; font-size:18px; }
.ball-dock { border:1px solid #c9b2f036; padding-right:14px; background:#151320e0; }
.ball-dock img { width:27px; height:27px; }
.dock-chevron { color:#a995bc; font-size:12px; margin-left:5px; }
.cooldown-line { position:absolute; bottom:0; left:0; height:2px; background:#c9a5f1; pointer-events:none; }
kbd { font:9px Arial,sans-serif; color:#c7b6d9; display:inline-block; border:1px solid #ae8dcc45; background:#1b142acc; padding:4px 5px; border-radius:3px; }
.toast { position:absolute; left:50%; bottom:95px; transform:translateX(-50%); padding:9px 15px; border:1px solid #b18ecd35; background:#21162fed; border-radius:5px; font-size:11px; line-height:1.6; max-width:min(460px,85vw); width:max-content; text-align:center; color:#e4d4f0; }
.interaction { position:absolute; left:50%; top:61%; transform:translateX(-50%); padding:7px 11px; border-radius:5px; background:#160f25e0; display:flex; align-items:center; gap:8px; font-size:10px; border:1px solid #bea0de55; }
.boss-bar { position:absolute; top:24px; left:50%; transform:translateX(-50%); width:300px; max-width:35vw; text-align:center; }
.boss-bar p { margin:0 0 7px; text-shadow:0 2px 8px black; }
.boss-bar p span { display:none; }
.boss-bar strong { font:24px Pixel,monospace; letter-spacing:3px; }
.boss-track { height:6px; background:#291622; border:1px solid #c97c9366; border-radius:2px; padding:1px; }
.boss-track>div { background:#d78498; height:100%; width:100%; transition:width .3s; }
.party-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:23px 0 12px; }
.party-slot { display:flex; align-items:center; gap:10px; padding:12px; border:1px solid #a687c13d; border-radius:5px; background:#211a2a; text-align:left; position:relative; }
.party-slot.selected { border-color:#be9be3; background:#382848; }
.party-slot img { width:44px; height:43px; object-fit:contain; image-rendering:pixelated; }
.party-slot strong { display:block; font-weight:500; font-size:12px; margin-bottom:7px; }
.party-slot small { display:block; color:#bca9ce; font-size:9px; }
.active-dot { position:absolute; top:9px; right:9px; width:5px; height:5px; border-radius:50%; background:#b8e2b5; }
#bag h3,#map-panel h3 { font-size:13px; font-weight:500; margin:24px 0 12px; }
#bag-summon { justify-content:center; width:100%; padding:11px; min-height:38px; }
#items { display:flex; gap:8px; }
.item-slot { flex:1; min-width:0; position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; padding:17px 6px 13px; border:1px solid #a687c13d; background:#211a2a; border-radius:5px; }
.item-slot.selected { border-color:#be9be3; background:#382848; }
.item-slot img { width:28px; height:28px; image-rendering:pixelated; }
.item-slot kbd { position:absolute; top:5px; left:6px; font-size:8px; border:0; padding:0; background:none; }
.item-slot strong { display:block; font-size:10px; font-weight:500; margin-bottom:5px; }
.item-slot small { display:block; font-size:10px; color:#bca9ce; }
.panel-done { width:100%; margin-top:25px; }
.map-frame { position:relative; width:260px; max-width:100%; margin:20px auto; padding:10px; background:#171222; border:1px solid #b598d333; border-radius:5px; }
.map-frame canvas { display:block; width:100%; height:auto; image-rendering:pixelated; }
.map-frame>span { position:absolute; top:10px; right:10px; font-size:9px; color:#c7b1da; }
.objective-counts { display:flex; gap:20px; color:#c3accf; font-size:10px; }
.map-legend { display:flex; flex-wrap:wrap; gap:12px; padding-top:16px; border-top:1px solid #b598d322; }
.map-legend>span { display:flex; align-items:center; gap:6px; font-size:10px; }
.map-legend i { width:6px; height:6px; border-radius:50%; }
.neutral-dot { background:#e6c85e; }.peaceful-dot { background:#87d6a0; }.hostile-dot { background:#e67f90; }
#touch-controls { display:none; }
@media(max-width:1000px) {
  .topbar { padding:0 23px; height:72px; }
  .title-content { margin-left:8%; }.title-content h1 { font-size:68px; }
  .title-caption { right:6%; bottom:19%; }
}
@media(max-width:680px) {
  .topbar { padding:0 16px; height:65px; }
  .brand { font-size:10px; letter-spacing:2px; }.brand small { font-size:6px; }.brand-sigil { font-size:30px; }
  .title-content { margin-left:8%; margin-top:-5px; max-width:87%; }
  .title-content .eyebrow { font-size:7px; letter-spacing:1.5px; }
  .title-content h1 { font-size:57px; letter-spacing:6px; margin-top:28px; }
  .title-content h1>span { font-size:19px; letter-spacing:9px; }.title-content h1>small { font-size:10px; letter-spacing:10px; }
  .title-rule { max-width:290px; }.intro-copy { font-size:11px; }.title-caption { display:none; }
  .title-footer { left:20px; right:20px; font-size:6px; letter-spacing:1px; bottom:20px; }
  .title-screen { background:linear-gradient(90deg,#100d1bf0,#100d1b95); }
  .intro-overlay>p { font-size:29px; letter-spacing:2px; }.intro-overlay { border-width:60px; }
  .menu-card { padding:25px; }.menu-card h1 { font-size:34px; }
  .in-world .topbar { height:61px; padding:0 12px; }
  .health-pill { top:15px; left:12px; height:31px; gap:7px; padding:0 8px; }
  .health-track { width:55px; }
  .bottom-hud { bottom:max(12px,env(safe-area-inset-bottom)); left:12px; right:12px; gap:8px; }
  .dock-button { gap:7px; padding:9px; }.dock-button strong { font-size:10px; }.dock-button small { font-size:8px; }
  .dock-button img { width:30px; height:31px; }.ball-dock img { width:25px; height:25px; }
  .dock-toggle { padding:0 9px; font-size:16px; }.dock-chevron { margin-left:0; }
  .boss-bar { top:65px; max-width:65vw; width:240px; }
  .toast { bottom:87px; font-size:10px; padding:8px 12px; }
  dialog { padding:25px 20px; }.party-slot { gap:7px; padding:10px 8px; }.party-slot strong { font-size:10px; }.party-slot small { font-size:8px; }
  .party-slot img { width:34px; height:38px; }
}
@media(pointer:coarse) {
  #touch-controls { display:flex; position:absolute; bottom:90px; left:16px; right:16px; justify-content:space-between; align-items:flex-end; }
  .dpad { width:126px; height:107px; display:grid; grid-template-columns:repeat(3,40px); grid-template-rows:repeat(2,50px); gap:3px; }
  .dpad button:first-child { grid-column:2; }.dpad button:nth-child(2) { grid-column:1; grid-row:2; }.dpad button:nth-child(3) { grid-column:2; grid-row:2; }.dpad button:nth-child(4) { grid-column:3; grid-row:2; }
  #touch-controls button { touch-action:none; user-select:none; background:#241a35ad; border:1px solid #bc9cdc55; border-radius:7px; color:#e0cef3; }
  .touch-actions { display:grid; grid-template-columns:repeat(2,59px); gap:7px; }
  .touch-actions button { min-height:45px; padding:9px 5px; font-size:10px; }
  #touch-dodge { grid-column:2; grid-row:1; }#touch-interact { grid-column:1; grid-row:1; }
  #touch-attack { grid-column:1; grid-row:2; background:#765294c0!important; }#touch-throw { grid-column:2; grid-row:2; }
  .toast { bottom:218px; }.interaction { display:none; }
}
@media(max-height:600px) {
  .topbar { height:58px; }.title-content { margin-top:35px; }.title-content .eyebrow { margin-bottom:10px; }
  .title-content h1 { font-size:52px; margin:18px 0 10px; }.title-content h1>span { font-size:17px; margin-bottom:10px; }.title-content h1>small { font-size:9px; margin-bottom:10px; }
  .title-rule { margin:18px 0; }.intro-copy { margin-bottom:15px; font-size:10px; }.primary,.secondary { min-height:39px; padding:11px 16px; }
  .title-content>.text-button { margin-top:0; }.title-footer { bottom:14px; }.title-caption { bottom:23%; }
  .intro-overlay { border-width:45px; }.intro-overlay>button { bottom:-42px; }
  .boss-bar { top:15px; max-width:30vw; width:210px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition:none!important; } }