:root{--ink:#23264a;--cream:#fff8e8;--gold:#ffc83a;--gold2:#ff9f1c;--mio:#35d6c8;--bo:#ff9838;--night:#1b2250;--line:#e9d9b4;--red:#ff5d6c;--font:'Baloo 2',ui-rounded,'SF Pro Rounded','Segoe UI',system-ui,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;background:var(--night);color:var(--ink);font-family:var(--font);font-weight:500;user-select:none;-webkit-user-select:none;touch-action:none;overscroll-behavior:none}
#gl{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block;outline:none}
#ui{position:fixed;inset:0;pointer-events:none}
#ui>*{pointer-events:auto}
.scr{position:absolute;inset:0;display:none;flex-direction:column;padding:max(18px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));overflow:auto;animation:fade .25s ease}
.scr.on{display:flex}.scr.center{align-items:center;justify-content:center;text-align:center}.scr.left{justify-content:center;align-items:flex-start}
.scr.dim{background:rgba(18,22,58,.62);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.scr.clickable{cursor:pointer}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
h1,h2,h3,p{margin:0}h1{font-size:clamp(24px,4.2vw,40px);color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.25);font-weight:800}h1.top{text-align:center;margin-bottom:8px}
.muted{opacity:.7}.small{font-size:13px}.center-txt{text-align:center;color:#fff}
.err{color:var(--red);min-height:20px;font-size:14px;margin:4px 0}
.logo{font-weight:800;line-height:.86;letter-spacing:.02em;display:inline-flex;flex-direction:column;align-items:center;filter:drop-shadow(0 6px 0 rgba(0,0,0,.25))}
.logo .l1{font-size:clamp(34px,6vw,64px);color:var(--mio);-webkit-text-stroke:2px #0d5a63;paint-order:stroke fill}
.logo .l2{font-size:clamp(46px,8.5vw,92px);color:var(--bo);-webkit-text-stroke:2px #8a3e00;paint-order:stroke fill}
.logo.big .l1{font-size:clamp(48px,9vw,110px)}.logo.big .l2{font-size:clamp(64px,13vw,160px)}
.sub{color:#fff;font-size:clamp(18px,3vw,30px);margin-top:10px;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.blink{color:#fff;margin-top:26vh;font-size:18px;animation:blink 1.4s infinite}@keyframes blink{50%{opacity:.25}}
.bar{width:min(420px,70vw);height:14px;border-radius:9px;background:rgba(255,255,255,.2);overflow:hidden;margin:22px auto 10px;border:2px solid rgba(255,255,255,.35)}.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--mio),var(--gold),var(--bo));border-radius:9px;transition:width .2s}
#boot-txt{color:#fff}
.card{background:var(--cream);border:3px solid var(--line);border-radius:26px;padding:24px 26px;box-shadow:0 8px 0 rgba(0,0,0,.22);width:min(560px,94vw);display:flex;flex-direction:column;gap:10px;max-height:94dvh;overflow:auto}
.card.narrow{width:min(400px,94vw)}.card.wide-card{width:min(860px,96vw)}
.card h2{font-size:26px;font-weight:800}
label{display:flex;flex-direction:column;gap:3px;text-align:left;font-size:14px;font-weight:700;color:#6b5a3a}
input:not([type=range]){font:inherit;font-size:17px;padding:10px 14px;border-radius:14px;border:2px solid var(--line);background:#fff;color:var(--ink);outline:none;user-select:text;-webkit-user-select:text}
input:focus{border-color:var(--gold2)}
.btn{font:inherit;font-weight:700;font-size:17px;padding:11px 20px;border-radius:16px;border:2px solid #d9c79a;background:#fff;color:var(--ink);cursor:pointer;box-shadow:0 4px 0 #d9c79a;transition:transform .06s,box-shadow .06s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #d9c79a}.btn:disabled{opacity:.5;pointer-events:none}
.btn.primary{background:linear-gradient(#ffd75e,#ffb62e);border-color:#d88a0a;box-shadow:0 4px 0 #d88a0a;color:#4a2c00}
.btn.ghost{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5);box-shadow:none;color:#fff}.card .btn.ghost{color:var(--ink);border-color:var(--line);background:transparent}
.btn.big{font-size:22px;padding:14px 34px}.btn.small{font-size:14px;padding:6px 14px}.btn.wide{width:100%}
.btn.back{position:absolute;left:22px;bottom:20px}
.tabs{display:flex;gap:6px;background:#f1e4c3;border-radius:16px;padding:4px}.tab{flex:1;font:inherit;font-weight:700;font-size:16px;padding:8px;border:0;border-radius:12px;background:transparent;color:#7a6845;cursor:pointer}.tab.on{background:#fff;color:var(--ink);box-shadow:0 2px 0 #d9c79a}
form{display:flex;flex-direction:column;gap:10px}.or{opacity:.4}
.menu{display:flex;flex-direction:column;gap:12px;width:min(340px,80vw);margin-left:min(7vw,90px)}.menu .logo{align-items:flex-start;margin-bottom:4px}.hello{color:#fff;font-size:18px;text-shadow:0 2px 0 rgba(0,0,0,.3);margin-bottom:6px}
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:min(960px,96vw);margin-top:18px}
.mode{font:inherit;text-align:center;background:var(--cream);border:3px solid var(--line);border-radius:24px;padding:20px 16px;cursor:pointer;box-shadow:0 7px 0 rgba(0,0,0,.2);transition:transform .1s;color:var(--ink)}.mode:hover{transform:translateY(-4px)}.mode .ic{font-size:46px;display:block}.mode h3{font-size:20px;font-weight:800;margin:6px 0}.mode p{font-size:14px;opacity:.75;line-height:1.35}
.room{position:absolute;top:16px;right:20px;background:rgba(0,0,0,.4);color:#fff;border-radius:14px;padding:6px 14px;font-weight:700;letter-spacing:.12em}
.room small{letter-spacing:0;opacity:.7;display:block;font-weight:500;font-size:11px}
.heroes{flex:1;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;min-height:0;padding-bottom:6px}
.hero{width:min(330px,34vw);background:rgba(255,248,232,.94);border:3px solid var(--line);border-radius:22px;padding:14px 16px;box-shadow:0 6px 0 rgba(0,0,0,.2);font-size:14px}
.hero[data-role=mio]{border-color:var(--mio)}.hero[data-role=bo]{border-color:var(--bo)}
.hero-art{display:block;width:auto;height:clamp(96px,15vh,172px);margin:-4px auto 2px;filter:drop-shadow(0 6px 5px rgba(20,24,60,.28))}
.hero h2{font-size:26px;font-weight:800;line-height:1}.hero[data-role=mio] h2{color:#0e9d92}.hero[data-role=bo] h2{color:#e07410}
.hero .ttl{font-weight:700;opacity:.7}.hero .bio{margin:6px 0;line-height:1.3}.skills{margin:0;padding-left:18px;line-height:1.35}
.who{display:inline-block;font-size:12px;font-weight:800;color:#fff;background:var(--ink);border-radius:9px;padding:2px 10px;margin-bottom:4px;min-height:18px}
.skin{display:flex;align-items:center;justify-content:space-between;margin-top:8px;background:#f1e4c3;border-radius:14px;padding:3px}.arrow{font:inherit;font-size:22px;font-weight:800;width:40px;height:34px;border:0;border-radius:11px;background:#fff;cursor:pointer;box-shadow:0 2px 0 #d9c79a}.skin-name{font-weight:700}
.swap{align-self:center;margin-bottom:40px}
.row-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px}.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.map-wrap{flex:1;display:flex;gap:16px;min-height:0}
.grid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;overflow:auto;padding:4px 4px 10px;align-content:start}
.chap{font:inherit;position:relative;text-align:left;background:var(--cream);border:3px solid var(--line);border-radius:20px;padding:10px 12px;cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.2);color:var(--ink);min-height:112px;display:flex;flex-direction:column;gap:2px;overflow:hidden;isolation:isolate}
.chap .shot{position:absolute;inset:0;z-index:-1}
.chap .shot img{width:100%;height:100%;object-fit:cover;display:block}
.chap .shot::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,30,74,.15) 0%,rgba(24,30,74,.55) 45%,rgba(24,30,74,.85) 100%)}
.chap .n,.chap .t,.chap .s{color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.65)}
.chap .n{opacity:.85}.chap .t{margin-top:auto}
.chap.sel{border-color:var(--gold2);transform:translateY(-3px)}.chap.locked{filter:grayscale(1) brightness(.55);opacity:.8}.chap.locked .i{position:absolute;right:10px;top:8px;font-size:22px;z-index:1}.chap .n{font-size:12px;font-weight:800;opacity:.55}.chap .i{font-size:30px;line-height:1}.chap .t{font-weight:800;font-size:15px;line-height:1.1}.chap .s{font-size:12px;opacity:.9}.chap .ok{position:absolute;right:8px;top:6px;font-size:18px}
.detail{width:min(330px,36vw);background:var(--cream);border:3px solid var(--line);border-radius:24px;padding:16px 18px;box-shadow:0 6px 0 rgba(0,0,0,.2);display:flex;flex-direction:column;gap:6px;overflow:auto}.d-ic{font-size:54px;line-height:1}.d-ic img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:14px;border:3px solid var(--line);display:block}.detail h2{font-weight:800;font-size:24px;line-height:1.05}.d-shard{font-weight:700;color:#b97a00}.d-blurb{line-height:1.35;font-size:15px;flex:1}.detail .btn{margin-top:6px}
.total{color:#fff;font-weight:700;font-size:18px;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.story{background:linear-gradient(rgba(14,18,50,.35),rgba(14,18,50,.88));justify-content:flex-end;align-items:center}
.story-art{flex:1;display:flex;align-items:center;justify-content:center;font-size:min(30vh,180px);filter:drop-shadow(0 10px 0 rgba(0,0,0,.25));animation:float 3s ease-in-out infinite}@keyframes float{50%{transform:translateY(-12px)}}
.story-box{width:min(820px,96vw);background:var(--cream);border:3px solid var(--line);border-radius:24px;padding:16px 22px;box-shadow:0 8px 0 rgba(0,0,0,.25);min-height:150px;display:flex;flex-direction:column;gap:6px}
.speaker{font-weight:800;font-size:18px;align-self:flex-start;color:#fff;border-radius:11px;padding:1px 14px;margin-top:-30px;box-shadow:0 3px 0 rgba(0,0,0,.2)}
#st-text{font-size:clamp(17px,2.3vw,22px);line-height:1.4;flex:1;text-align:left}.story-btns{display:flex;justify-content:space-between;align-items:center}
.loadline{width:min(820px,96vw);height:5px;border-radius:4px;background:rgba(255,255,255,.2);margin-top:10px;overflow:hidden}.loadline i{display:block;height:100%;width:0;background:var(--gold);transition:width .2s}
.chapter-no{color:var(--gold);font-weight:800;letter-spacing:.2em;font-size:18px}.tip{color:#fff;max-width:620px;line-height:1.4;opacity:.9}
/* HUD */
#hud{position:absolute;inset:0;pointer-events:none}#hud button{pointer-events:auto}
#hud-top{position:absolute;top:max(10px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:30}
.pill{background:rgba(20,24,60,.55);color:#fff;border-radius:14px;padding:3px 12px;font-weight:700;font-size:16px;backdrop-filter:blur(4px);border:2px solid rgba(255,255,255,.18)}.pill.pulse{animation:pulse .4s}@keyframes pulse{50%{transform:scale(1.25);background:var(--gold2)}}
#divider{position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;background:#12163a;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.seat{position:absolute;top:max(10px,env(safe-area-inset-top));display:flex;flex-direction:column;gap:4px;z-index:25}#seat0{left:max(12px,env(safe-area-inset-left))}#seat1{right:max(12px,env(safe-area-inset-right));align-items:flex-end}
.seat.solo-right{display:none}
.badge{display:flex;align-items:center;gap:8px;background:rgba(20,24,60,.55);border-radius:16px;padding:4px 12px 4px 5px;color:#fff;font-weight:800;border:2px solid rgba(255,255,255,.18);backdrop-filter:blur(4px)}
.badge .dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:16px;color:#10204a}.hearts{letter-spacing:1px;font-size:15px}
.keys{display:flex;gap:5px;flex-wrap:wrap;max-width:300px}.key{background:rgba(20,24,60,.5);color:#fff;border-radius:10px;padding:1px 8px;font-size:12px;font-weight:700;border:1px solid rgba(255,255,255,.18)}.key b{color:var(--gold)}.key.cd{opacity:.4}
.prompt{background:var(--gold);color:#4a2c00;border-radius:12px;padding:2px 12px;font-weight:800;font-size:15px;box-shadow:0 3px 0 rgba(0,0,0,.25);align-self:flex-start;animation:pop .2s}#seat1 .prompt{align-self:flex-end}@keyframes pop{from{transform:scale(.6)}}
.subtitle{position:absolute;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(760px,92vw);display:flex;gap:12px;align-items:center;background:rgba(20,24,60,.78);color:#fff;border-radius:20px;padding:10px 16px;border:2px solid rgba(255,255,255,.18);backdrop-filter:blur(5px);z-index:26}
.subtitle .ava{flex:0 0 46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:24px;font-weight:800;color:#10204a}.subtitle .nm{font-size:14px}.subtitle .tx{font-size:clamp(15px,2vw,19px);line-height:1.3}
.hint{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 44px);left:50%;transform:translateX(-50%);background:var(--cream);border:2px solid var(--line);border-radius:16px;padding:6px 16px;font-weight:700;max-width:min(680px,90vw);text-align:center;box-shadow:0 4px 0 rgba(0,0,0,.2);z-index:27}
.toast{position:absolute;left:50%;top:26%;transform:translateX(-50%);background:rgba(20,24,60,.8);color:#fff;border-radius:16px;padding:8px 20px;font-weight:800;font-size:18px;z-index:40}
#hud-boss{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 40px);left:50%;transform:translateX(-50%);width:min(520px,80vw);color:#fff;font-weight:800;text-align:center;z-index:28;text-shadow:0 2px 0 rgba(0,0,0,.4)}.bossbar{height:16px;border-radius:9px;background:rgba(0,0,0,.45);border:2px solid #fff;overflow:hidden}.bossbar i{display:block;height:100%;background:linear-gradient(90deg,#ff5d6c,#ff9838);transition:width .3s}
#hud-btns{position:absolute;right:50%;transform:translateX(50%);top:calc(max(10px,env(safe-area-inset-top)) + 0px);display:flex;gap:6px;margin-right:-190px;z-index:31}
.hb{width:38px;height:34px;border-radius:12px;border:2px solid rgba(255,255,255,.3);background:rgba(20,24,60,.55);color:#fff;font-size:16px;cursor:pointer}
.tc-btn{position:absolute;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:26px;border:2px solid rgba(255,255,255,.5);touch-action:none}.tc-btn.on{filter:brightness(1.5);transform:scale(.94)}
.res-star{font-size:70px;line-height:1;animation:float 2.4s ease-in-out infinite}.card h1{color:var(--ink);text-shadow:none}.shardname{color:#b97a00;font-weight:800}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0}.stats div{background:#f6ead0;border-radius:16px;padding:8px 4px}.stats b{display:block;font-size:24px;font-weight:800}.stats span{font-size:12px;opacity:.7}
.slider{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;font-size:16px}.slider input{flex:1;max-width:210px;accent-color:var(--gold2)}
.seg{display:flex;align-items:center;gap:6px;font-weight:700;color:#6b5a3a}.seg span{flex:1;text-align:left}.seg button{font:inherit;font-weight:700;border:2px solid var(--line);background:#fff;border-radius:12px;padding:5px 12px;cursor:pointer}.seg button.on{background:var(--gold);border-color:#d88a0a}
#help-body{text-align:left;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;font-size:14px}#help-body h4{margin:0 0 4px;font-size:16px}#help-body table{width:100%;border-collapse:collapse}#help-body td{padding:2px 4px;border-bottom:1px dashed var(--line)}#help-body td:last-child{text-align:right;font-weight:800}
.hbox{background:#f6ead0;border-radius:16px;padding:10px 12px}
@media (max-width:760px),(max-height:520px){.cards3{grid-template-columns:1fr;gap:8px}.mode{padding:10px;display:grid;grid-template-columns:50px 1fr;text-align:left;column-gap:10px}.mode .ic{grid-row:span 2;font-size:34px}.mode h3{margin:0}.hero .bio,.hero .skills{display:none}.hero{padding:8px 10px}.detail{width:42vw;padding:10px 12px}.d-ic{font-size:34px}.d-ic img{border-width:2px;border-radius:10px}.detail h2{font-size:18px}.d-blurb{font-size:13px}.keys{display:none}.menu{gap:7px}.btn{padding:8px 16px;font-size:15px}.btn.big{font-size:18px;padding:10px 24px}.stats b{font-size:18px}.story-art{font-size:20vh}.card{padding:14px 16px;gap:7px}h1{font-size:22px}}
/* Narrow phones: the HUD's fixed -190px offset parked the pause and swap buttons off the right
   edge, so a phone player could not pause or quit. Tuck them into the corner and shrink the
   stat pills so the top row fits a 360px screen. */
@media (max-width:560px){
  #hud-btns{right:max(8px,env(safe-area-inset-right));transform:none;margin-right:0;top:calc(max(10px,env(safe-area-inset-top)) + 40px);flex-direction:column;gap:8px}
  .hb{width:44px;height:44px;border-radius:14px;font-size:19px;background:rgba(20,24,60,.68)}
  #hud-top{gap:5px;font-size:13px;max-width:calc(100vw - 24px);flex-wrap:wrap;justify-content:center}
  #hud-top .pill{padding:3px 8px}
  .seat{font-size:12px}
}
@media (orientation:portrait) and (max-width:700px){.map-wrap{flex-direction:column}.detail{width:auto}.heroes{flex-direction:column;align-items:stretch;justify-content:flex-end}.hero{width:auto}.swap{margin:0}}

#scr-map,#scr-chars,#scr-mode,#scr-online{background:linear-gradient(rgba(14,18,50,.45),rgba(14,18,50,.15) 30%,rgba(14,18,50,.5))}

/* logo artwork replaces the text wordmark */
.logo img{width:min(420px,72vw);height:auto;display:block;filter:drop-shadow(0 8px 14px rgba(0,0,0,.45))}
.logo.big img{width:min(760px,86vw)}
.menu .logo img{width:min(320px,58vw)}
@media (max-width:760px),(max-height:520px){.logo.big img{width:min(520px,80vw)}.menu .logo img{width:min(240px,50vw)}}