/* Layout: full-screen 3D canvas; HUD floats on top — mission card top-left, timer top-right, joystick bottom-left, action + camera buttons bottom-right. */
:root{
  --sky:#a8dcef;
  --ink:#1d2b4f;
  --mint:#22b38a;
  --mint-d:#16795e;
  --sun:#ffc23d;
  --alarm:#ef5a3c;
  --panel:rgba(255,255,255,.93);
  --muted:#5a6886;
  --f-d:"Mitr","Noto Sans Thai",system-ui,sans-serif;
  --f-b:"Noto Sans Thai",system-ui,sans-serif;
  --home-bg:#eef6f3;
  color-scheme:light;
}
html,body{height:100%;overflow:hidden}
html.site,html.site body{height:auto;min-height:100%;overflow:visible;overflow-x:hidden}
html.site body{background:var(--home-bg)}
html.site #c,html.site .panel,html.site .right,html.site .controls,html.site .joyzone,html.site .menuB,html.site .toast,html.site .talk,html.site .loading{display:none!important}
[hidden]{display:none!important}
body{background:var(--sky);color:var(--ink);font-family:var(--f-b);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.joyzone,.controls,.overlay{touch-action:none}
.menuB{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 14px);z-index:3;border:0;border-radius:999px;background:var(--panel);font-family:var(--f-d);color:var(--ink);padding:6px 14px;font-size:.85rem;box-shadow:0 3px 10px rgba(29,43,79,.2)}
/* home menu */
.home{position:relative;z-index:30;min-height:100vh;background:var(--home-bg)}
.home[hidden]{display:none!important}
.hwrap{max-width:720px;margin:0 auto;padding-block:calc(env(safe-area-inset-top,0px) + 18px) calc(env(safe-area-inset-bottom,0px) + 28px);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:22px}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:44px;height:44px;border-radius:14px;background:var(--ink);display:grid;place-items:center;flex:none}
.brand b{font-family:var(--f-d);font-weight:600;font-size:1.3rem;line-height:1.1;display:block}
.brand span{font-size:.8rem;color:var(--muted);letter-spacing:.04em}
.hero{background:var(--ink);color:#fff;border-radius:24px;padding:26px 22px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;border:26px solid rgba(34,179,138,.35);box-shadow:0 0 0 30px rgba(255,194,61,.12)}
.hero h1{font-family:var(--f-d);font-weight:600;font-size:clamp(1.7rem,6vw,2.4rem);line-height:1.2;margin:0;text-wrap:balance;position:relative;z-index:1}
.hero h1 em{font-style:normal;color:var(--sun)}
.hero p{margin:0;line-height:1.65;color:#cdd6ea;max-width:46ch;position:relative;z-index:1}
.sec{font-family:var(--f-d);font-weight:400;font-size:.8rem;letter-spacing:.12em;color:var(--muted);margin:0 0 -10px}
.svc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.s{background:#fff;border-radius:18px;padding:16px 14px;display:flex;flex-direction:column;gap:6px;box-shadow:0 2px 8px rgba(29,43,79,.08);min-width:0}
.s .i{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:1.4rem}
.s h3{font-family:var(--f-d);font-weight:600;font-size:1.02rem;margin:0}
.s p{margin:0;font-size:.85rem;line-height:1.55;color:var(--muted)}
.game{background:linear-gradient(135deg,var(--mint),#1a9a8c);color:#fff;border-radius:22px;padding:20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.game div{flex:1;min-width:180px;display:flex;flex-direction:column;gap:4px}
.game h3{font-family:var(--f-d);font-weight:600;font-size:1.2rem;margin:0}
.game p{margin:0;font-size:.88rem;line-height:1.55;color:#e4fbf4}
.play{font-family:var(--f-d);font-size:1.1rem;border:0;border-radius:14px;padding:12px 22px;background:var(--sun);color:var(--ink);box-shadow:0 4px 0 #c99312;cursor:pointer}
.play:active{transform:translateY(3px);box-shadow:0 1px 0 #c99312}
.foot{font-size:.8rem;color:var(--muted);text-align:center}
@media (max-width:360px){.svc{grid-template-columns:1fr}}
.view{display:flex;flex-direction:column;gap:22px}
.view[hidden]{display:none!important}
.hwrap{padding-block:18px calc(env(safe-area-inset-bottom,0px) + 28px)}
.nav{position:sticky;top:0;z-index:5;background:var(--home-bg);padding-top:calc(env(safe-area-inset-top,0px) + 10px);box-shadow:0 1px 0 rgba(29,43,79,.08)}
.navtop,.tabs{max-width:720px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.navtop{display:flex;justify-content:space-between;align-items:center;gap:10px}
.logo.sm{width:36px;height:36px;border-radius:11px}
.hello{border:0;background:#fff;border-radius:999px;padding:6px 12px;font-family:var(--f-d);font-size:.85rem;color:var(--ink);max-width:48%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 1px 3px rgba(29,43,79,.1);cursor:pointer}
.tabs{display:flex;gap:6px;overflow-x:auto;padding-block:10px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;border:0;background:transparent;font-family:var(--f-d);font-size:.95rem;color:var(--muted);padding:7px 14px;border-radius:999px;cursor:pointer}
.tabs button.on{background:var(--ink);color:#fff}
.tabs #t-game{color:var(--mint-d)}
.signup{min-height:100%;display:grid;place-items:center;padding-block:calc(env(safe-area-inset-top,0px) + 24px) calc(env(safe-area-inset-bottom,0px) + 24px);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));box-sizing:border-box;background:radial-gradient(circle at 85% 10%,rgba(34,179,138,.25),transparent 45%),radial-gradient(circle at 10% 90%,rgba(255,194,61,.25),transparent 45%),var(--home-bg)}
.sucard,.edcard{background:#fff;border-radius:22px;padding:24px 20px;width:100%;max-width:380px;display:flex;flex-direction:column;gap:8px;box-shadow:0 10px 30px rgba(29,43,79,.14)}
.sucard h1{font-family:var(--f-d);font-weight:600;font-size:1.7rem;margin:10px 0 0}
.sucard p{margin:0 0 8px;color:var(--muted);line-height:1.6;font-size:.92rem}
label{font-family:var(--f-d);font-size:.9rem;margin-top:4px}
input,textarea,select{font:inherit;font-size:1rem;border:2px solid #dbe4ec;border-radius:12px;padding:10px 12px;background:#f8fbfa;color:var(--ink);width:100%;box-sizing:border-box;-webkit-user-select:text;user-select:text}
textarea{min-height:90px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--mint);background:#fff}
.err{color:#c2412a;font-size:.88rem}
.play.wide{width:100%;margin-top:10px}
.h{font-family:var(--f-d);font-weight:600;font-size:1.3rem;margin:0}
.sub{margin:-14px 0 0;color:var(--muted)}
.about{background:#fff;border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:10px;box-shadow:0 2px 8px rgba(29,43,79,.08)}
.about p{margin:0;line-height:1.75;white-space:pre-line}
.sechead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.list{display:flex;flex-direction:column;gap:12px}
.work{background:#fff;border-radius:18px;padding:16px;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;box-shadow:0 2px 8px rgba(29,43,79,.08)}
.work .wi{grid-row:span 3;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:1.4rem}
.work h3{font-family:var(--f-d);font-weight:600;font-size:1.05rem;margin:0;min-width:0;overflow-wrap:anywhere}
.work .meta{font-size:.82rem;color:var(--muted)}
.work p{margin:0;font-size:.9rem;line-height:1.6;white-space:pre-line;overflow-wrap:anywhere}
.work .own,.person .own{grid-column:1/-1}
.empty{background:transparent;border:2px dashed #c9d6df;border-radius:18px;padding:26px 18px;text-align:center;color:var(--muted);line-height:1.6}
.staff{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.person{background:#fff;border-radius:18px;padding:18px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;box-shadow:0 2px 8px rgba(29,43,79,.08);min-width:0}
.av{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-d);font-weight:600;font-size:1.6rem;color:#fff}
.person h3{font-family:var(--f-d);font-weight:600;font-size:1.05rem;margin:4px 0 0;overflow-wrap:anywhere}
.person .role{font-size:.82rem;color:var(--mint-d);font-family:var(--f-d)}
.person p{margin:0;font-size:.88rem;line-height:1.55;color:var(--muted);overflow-wrap:anywhere}
.rate{display:flex;gap:2px;margin-top:4px}
.rate button{border:0;background:none;font-size:1.7rem;line-height:1;color:#dde2ea;cursor:pointer;padding:2px}
.rate button.on{color:var(--sun)}
.rate button:active{transform:scale(1.2)}
.rnote{font-size:.78rem;color:var(--muted);min-height:1.2em}
.ownbtn{display:none;border:0;background:#e7f6f1;color:var(--mint-d);font-family:var(--f-d);font-size:.88rem;padding:6px 12px;border-radius:10px;cursor:pointer;align-self:flex-start}
.ownbtn.danger{background:#fdeae5;color:#c2412a}
.owner .ownbtn{display:inline-block}
.own{display:none;gap:8px;margin-top:8px;justify-content:flex-end}
.owner .own{display:flex}
.editor{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:rgba(29,43,79,.5);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));overflow-y:auto}
.edcard{max-width:440px;max-height:90vh;overflow-y:auto}
.edcard h2{font-family:var(--f-d);font-weight:600;margin:0 0 4px}
.fields{display:flex;flex-direction:column;gap:6px}
.edbtns{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
.ghost{font-family:var(--f-d);font-size:1rem;border:0;background:#eef2f6;color:var(--ink);border-radius:14px;padding:12px 18px;cursor:pointer}
.cta{align-self:flex-start;position:relative;z-index:1;margin-top:4px}
.sub2{margin:4px 0 0;color:var(--muted);line-height:1.6}
.contact{background:#fff7e0;border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;font-size:.92rem;line-height:1.6}
.bkcard{background:#fff;border-radius:20px;padding:18px 16px;display:flex;flex-direction:column;gap:8px;box-shadow:0 2px 8px rgba(29,43,79,.08)}
.step{font-family:var(--f-d);font-size:1rem;display:flex;align-items:center;gap:8px;margin-top:10px}
.step:first-child{margin-top:0}
.step b{width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:.8rem;font-weight:400}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:2px solid #dbe4ec;background:#f8fbfa;color:var(--ink);border-radius:12px;padding:8px 12px;font-family:var(--f-d);font-size:.92rem;cursor:pointer;font-variant-numeric:tabular-nums}
.chip.on{border-color:var(--mint);background:#e7f6f1;color:var(--mint-d)}
.days{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.day{flex:none;width:64px;border:2px solid #dbe4ec;background:#f8fbfa;border-radius:14px;padding:8px 0;display:flex;flex-direction:column;align-items:center;gap:0;cursor:pointer;color:var(--ink);font-family:var(--f-d)}
.day small{font-size:.72rem;color:var(--muted)}
.day strong{font-size:1.35rem;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums}
.day.on{border-color:var(--mint);background:var(--mint);color:#fff}
.day.on small{color:#e4fbf4}
.who{font-size:.85rem;color:var(--muted);margin-top:4px}
.bk{background:#fff;border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;box-shadow:0 2px 8px rgba(29,43,79,.08)}
.bk .top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.bk h3{font-family:var(--f-d);font-weight:600;font-size:1rem;margin:0}
.bk .ref{font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.bk .when{font-family:var(--f-d);color:var(--mint-d)}
.bk p{margin:0;font-size:.86rem;color:var(--muted);overflow-wrap:anywhere}
.bk .ownbtn{display:inline-block;align-self:flex-end;margin-top:4px}
.done{text-align:center;align-items:stretch}
.okmark{width:56px;height:56px;border-radius:50%;background:var(--mint);color:#fff;font-size:1.8rem;display:grid;place-items:center;margin:0 auto}
.slip{text-align:left;background:#f4f8f7;border-radius:12px;padding:12px;font-family:var(--f-b);font-size:.85rem;line-height:1.6;white-space:pre-wrap;margin:6px 0 0;-webkit-user-select:text;user-select:text;overflow-wrap:anywhere}
.fbbtn{align-self:flex-start;background:#1877f2;color:#fff;text-decoration:none;font-family:var(--f-d);border-radius:12px;padding:8px 14px}
.fbbtn.big{align-self:stretch;text-align:center;padding:12px;font-size:1.05rem;margin-top:8px}
.sbtns{display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:6px}
.sb{margin-top:auto;border:0;border-radius:10px;font-family:var(--f-d);font-size:.84rem;padding:8px 6px;cursor:pointer;text-align:center;line-height:1.3}
.sb.est{background:var(--ink);color:#fff}
.sb.bkb{background:#e7f6f1;color:var(--mint-d)}
.back{align-self:flex-start;border:0;background:none;font-family:var(--f-d);color:var(--mint-d);font-size:.95rem;padding:0;cursor:pointer}
.opt{font-family:var(--f-b);font-size:.75rem;color:var(--muted);font-weight:400}
.pbtns{display:flex;gap:8px;flex-wrap:wrap}
.pbtn{flex:1;min-width:130px;text-align:center;border:2px dashed #b9c9d6;border-radius:12px;padding:12px 8px;background:#f8fbfa;cursor:pointer;margin:0}
.thumbs{display:flex;flex-wrap:wrap;gap:8px}
.thumbs.center{justify-content:center}
.th{position:relative;width:72px;height:72px;border-radius:10px;overflow:hidden;background:#e3e8ef}
.th img{width:100%;height:100%;object-fit:cover;display:block}
.th button{position:absolute;top:2px;right:2px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(29,43,79,.8);color:#fff;font-size:.8rem;line-height:22px;padding:0;cursor:pointer}
.stoast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);transform:translateX(-50%);background:var(--ink);color:#fff;font-family:var(--f-d);padding:10px 18px;border-radius:14px;z-index:50;max-width:calc(100vw - 32px);text-align:center}
.panel{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);left:max(16px,env(safe-area-inset-left,0px));background:var(--panel);border-radius:16px;padding:10px 14px;min-width:190px;max-width:calc(100vw - 150px);box-shadow:0 4px 14px rgba(29,43,79,.18);display:flex;flex-direction:column;gap:4px;z-index:3}
.mt{font-family:var(--f-d);font-weight:600;font-size:1rem;line-height:1.3}
.mt small{display:block;font-family:var(--f-b);font-weight:400;font-size:.75rem;color:var(--muted);letter-spacing:.02em}
.row{display:flex;justify-content:space-between;gap:12px;font-size:.88rem}
.row b{font-family:var(--f-d);font-weight:400;font-variant-numeric:tabular-nums}
.row.done{color:var(--mint-d)}
.row.done b::after{content:" ✓"}
.right{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;align-items:flex-end;gap:6px;z-index:3}
.timer{font-family:var(--f-d);font-size:1.5rem;font-variant-numeric:tabular-nums;background:var(--ink);color:#fff;border-radius:12px;padding:2px 12px;box-shadow:0 4px 12px rgba(29,43,79,.25)}
.timer.low{background:var(--alarm);animation:pulse .6s infinite alternate}
@keyframes pulse{to{transform:scale(1.08)}}
.roomtag{font-family:var(--f-d);font-size:.85rem;background:var(--panel);border-radius:999px;padding:2px 12px}
.toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 228px);transform:translateX(-50%);background:var(--ink);color:#fff;font-family:var(--f-d);padding:8px 16px;border-radius:14px;z-index:4;text-align:center;max-width:calc(100vw - 32px);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.joyzone{position:fixed;left:0;bottom:0;width:55%;height:55%;z-index:2}
.joy{position:absolute;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.28);border:3px solid rgba(255,255,255,.85);box-shadow:0 4px 14px rgba(29,43,79,.2);transform:translate(-50%,-50%)}
.knob{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(29,43,79,.3)}
.controls{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 18px);display:flex;flex-direction:column;align-items:center;gap:12px;z-index:3}
.small{display:flex;gap:8px}
.small button{width:50px;height:50px;border-radius:50%;border:0;background:var(--panel);color:var(--ink);font-size:1.4rem;box-shadow:0 3px 10px rgba(29,43,79,.2);position:relative;font-family:var(--f-d);touch-action:none}
.small button span{position:absolute;right:-2px;top:-2px;background:var(--sun);border-radius:999px;font-size:.7rem;min-width:18px;height:18px;line-height:18px}
.act{width:112px;height:112px;border-radius:50%;border:0;background:#c7cfdb;color:#fff;font-family:var(--f-d);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:0 6px 0 #9aa5b6;transition:background .15s;touch-action:none}
.act .ic{font-size:2.1rem;line-height:1}
.act .lb{font-size:.9rem}
.act.on{background:var(--mint);box-shadow:0 6px 0 var(--mint-d)}
.act.on:active{transform:translateY(4px);box-shadow:0 2px 0 var(--mint-d)}
button:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.overlay{position:fixed;inset:0;z-index:10;display:grid;place-items:center;background:rgba(29,43,79,.5);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.card{background:#fff;border-radius:22px;padding:22px 20px;max-width:360px;width:100%;display:flex;flex-direction:column;gap:12px;text-align:center;box-shadow:0 14px 34px rgba(0,0,0,.3);max-height:90vh;overflow:auto}
.card h1{font-family:var(--f-d);font-weight:600;font-size:1.6rem;margin:0;text-wrap:balance}
.card h2{font-family:var(--f-d);font-weight:400;font-size:1.05rem;margin:0;color:var(--mint-d)}
.card p{margin:0;line-height:1.6;color:var(--muted)}
.steps{display:grid;grid-template-columns:auto 1fr;gap:8px 10px;text-align:left;font-size:.9rem;line-height:1.5}
.steps b{font-family:var(--f-d);font-weight:400;background:#e7f6f1;color:var(--mint-d);border-radius:8px;padding:0 8px;text-align:center;align-self:start}
.stars{font-size:2.3rem;letter-spacing:.1em;color:var(--sun)}
.stars .off{color:#dde2ea}
.go{font-family:var(--f-d);font-size:1.15rem;border:0;border-radius:14px;padding:12px 18px;background:var(--mint);color:#fff;box-shadow:0 4px 0 var(--mint-d);cursor:pointer}
.go:active{transform:translateY(3px);box-shadow:0 1px 0 var(--mint-d)}
.sbar{height:8px;border-radius:4px;background:#e3e8ef;overflow:hidden}
.sbar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#22b38a,#62d6b9);transition:width .3s}
.sbar i.low{background:var(--alarm)}
#bagRow.full{color:var(--alarm)}
.cdb{font-family:var(--f-d);font-size:.85rem;background:var(--sun);color:var(--ink);border-radius:999px;padding:2px 12px;font-variant-numeric:tabular-nums}
.talk{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 150px);transform:translateX(-50%);width:min(420px,calc(100vw - 32px));box-sizing:border-box;background:#fff;border-radius:16px;padding:10px 14px;z-index:5;box-shadow:0 6px 18px rgba(29,43,79,.25)}
.talk b{font-family:var(--f-d);color:var(--mint-d)}
.talk p{margin:2px 0 0;line-height:1.55}
.repair{background:var(--panel);border-radius:18px;padding:10px;width:228px;display:flex;flex-direction:column;gap:6px;box-shadow:0 4px 14px rgba(29,43,79,.2)}
.rp-top{display:flex;justify-content:space-between;font-family:var(--f-d);font-size:.9rem;gap:6px}
.rp-top span{font-variant-numeric:tabular-nums;color:var(--muted)}
.bars{display:flex;gap:3px}
.bars i{flex:1;height:14px;border-radius:3px;background:#dfe5ec}
.bars i.on{background:var(--sun)}
.hams{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.hams button{border:0;border-radius:12px;background:var(--ink);color:#fff;font-family:var(--f-d);padding:6px 2px;display:flex;flex-direction:column;align-items:center;line-height:1.15;touch-action:none}
.hams button b{font-size:1.4rem}
.hams .hn{font-size:.7rem;opacity:.85}
.hams .cdv{font-size:.65rem;opacity:.8}
.hams button.fit{background:var(--mint)}
.hams button:disabled{background:#b8c1cd}
.rp-hint{font-size:.72rem;color:var(--muted);line-height:1.4}
.eq{max-width:420px}
.eqgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.eqt b{overflow-wrap:anywhere;text-align:center}
.eqt{border:2px solid #dbe4ec;background:#f8fbfa;border-radius:14px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;font-family:var(--f-b);color:var(--ink);cursor:pointer}
.eqt .ei{font-size:1.6rem}
.eqt b{font-family:var(--f-d);font-weight:400;font-size:.8rem}
.eqt small{font-size:.68rem;color:var(--muted)}
.eqt.on{border-color:var(--mint);background:#e7f6f1}
.eqfoot{display:flex;justify-content:space-between;gap:8px;font-size:.85rem;color:var(--muted);min-height:1.3em}
.loading{position:fixed;inset:0;display:grid;place-items:center;font-family:var(--f-d);font-size:1.2rem;z-index:20;background:var(--sky)}
@media (prefers-reduced-motion:reduce){.timer.low{animation:none}}
.warn{background:#fdeae5;color:#8a2c17;border-radius:14px;padding:12px 14px;line-height:1.6;font-size:.92rem}
.install{background:#fff;border-radius:16px;padding:12px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;box-shadow:0 2px 8px rgba(29,43,79,.08);font-size:.92rem;line-height:1.5}
.install>span:first-child{flex:1;min-width:180px}
.install .sb{margin:0;padding:8px 16px}
.itip{flex-basis:100%;color:var(--muted);font-size:.85rem}
.cbtns{display:flex;flex-wrap:wrap;gap:8px}
.fbbtn.line{background:#06c755}
.fbbtn.tel{background:var(--ink)}
.avg{font-family:var(--f-d);font-size:.9rem;color:var(--ink)}
.avg b{color:#d99a00}
.bk .st{font-size:.75rem;font-family:var(--f-d);border-radius:999px;padding:1px 10px;background:#eef2f6;color:var(--muted);align-self:flex-start}
.bk .st.new{background:#fff3cf;color:#8a5a00}.bk .st.confirmed{background:#e7f6f1;color:var(--mint-d)}.bk .st.done{background:#e3eaf8;color:#2f4b8a}.bk .st.cancelled{background:#fdeae5;color:#a33a22}
.play:disabled{opacity:.6}
.chip.off,.day.off{opacity:.45;cursor:not-allowed}
.day.off strong{text-decoration:line-through}

/* online & money */
.mflash{color:var(--mint-d);font-family:var(--f-d);animation:mf 1.2s ease-out forwards}
@keyframes mf{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}
.go.alt{background:#eef2f6;color:var(--ink);box-shadow:0 4px 0 #c9d1dc}
.go.sm{font-size:.85rem;padding:8px;width:100%;box-shadow:0 3px 0 var(--mint-d)}
.teams{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;text-align:left}
.tm{border-radius:14px;padding:8px 10px;background:#fdecec;min-width:0}
.tm.B{background:#e6f0fd}
.tm h3{font-family:var(--f-d);font-weight:600;font-size:.95rem;margin:0 0 4px}
.tm ul{margin:0 0 8px;padding-left:18px;font-size:.86rem;min-height:3.2em;overflow-wrap:anywhere}
.tm li.none{list-style:none;margin-left:-18px;color:var(--muted)}
.card .small{font-size:.8rem}
.rank{width:100%;border-collapse:collapse;font-size:.9rem;text-align:left}
.rank td,.rank th{padding:6px;border-bottom:1px solid #e3e8ef}
.rank th{font-family:var(--f-d);font-weight:400;color:var(--muted)}
.rank td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.rank tr.me{background:#fff7e0}
.score{background:var(--panel);border-radius:12px;padding:5px 8px;width:112px;box-sizing:border-box;display:flex;flex-direction:column;gap:4px;box-shadow:0 4px 12px rgba(29,43,79,.18)}
.sc{display:grid;grid-template-columns:1fr auto;gap:2px 6px;font-size:.72rem;font-family:var(--f-d)}
.sc .bar{grid-column:1/-1;height:6px;border-radius:3px;background:#e3e8ef;overflow:hidden}
.sc .bar i{display:block;height:100%;background:#e53e3e}
.sc.B .bar i{background:#2b7de9}
.sc.me span{text-decoration:underline}

/* versus, minimap, landscape */
#mini{border-radius:12px;background:rgba(255,255,255,.85);box-shadow:0 4px 12px rgba(29,43,79,.18);width:150px;height:104px}
.vsbar{position:fixed;top:calc(env(safe-area-inset-top,0px) + 8px);left:50%;transform:translateX(-50%);z-index:4;background:var(--ink);color:#fff;border-radius:14px;padding:4px 14px;display:flex;gap:14px;align-items:center;font-family:var(--f-d);font-variant-numeric:tabular-nums;box-shadow:0 4px 12px rgba(29,43,79,.25)}
.vsbar b{font-size:1.2rem;background:#fff;color:var(--ink);border-radius:8px;padding:0 8px}
.vsbar .tA{color:#ff9c9c}.vsbar .tB{color:#9cc8ff}
.vs #mainRow,.vs #trashRow,.vs #toolRow{display:none}
.roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.rb{border:2px solid #dbe4ec;background:#f8fbfa;border-radius:12px;padding:6px;display:flex;flex-direction:column;align-items:center;gap:1px;font-family:var(--f-b);color:var(--ink);cursor:pointer;min-width:0}
.rb span{font-size:1.4rem}.rb b{font-family:var(--f-d);font-weight:400;font-size:.85rem}.rb small{font-size:.66rem;color:var(--muted);text-align:center}
.rb.on{border-color:var(--mint);background:#e7f6f1}.rb:disabled{opacity:.45}
.card .big{font-family:var(--f-d);font-size:1.6rem;color:var(--ink)}
.rotate{display:none}
@media (orientation:portrait) and (pointer:coarse){html:not(.site) .rotate{display:grid;position:fixed;inset:0;z-index:60;place-items:center;align-content:center;gap:8px;background:var(--ink);color:#fff;font-family:var(--f-d);text-align:center;padding:24px}
 .rotate div{font-size:3rem;animation:tilt 1.6s ease-in-out infinite}.rotate p{margin:0;font-size:1.1rem}}
@keyframes tilt{50%{transform:rotate(-90deg)}}
@media (orientation:landscape) and (max-height:520px){
 .panel{padding:6px 10px;min-width:150px;gap:2px}.panel .row{font-size:.74rem}.mt{font-size:.82rem}.mt small{font-size:.65rem}
 .timer{font-size:1rem;padding:1px 8px}.roomtag{font-size:.72rem}
 #mini{width:132px;height:92px}
 .act{width:86px;height:86px}.act .ic{font-size:1.6rem}.act .lb{font-size:.75rem}
 .small button{width:42px;height:42px;font-size:1.15rem}
 .controls{gap:8px;bottom:calc(env(safe-area-inset-bottom,0px) + 10px)}
 .joy{width:100px;height:100px}
 .card{max-height:86vh;padding:14px 16px;gap:8px;max-width:560px}
 .toast{top:calc(env(safe-area-inset-top,0px) + 54px)}
 .talk{bottom:calc(env(safe-area-inset-bottom,0px) + 16px)}
}
@media (orientation:landscape) and (max-height:520px){
 .card>#go{position:sticky;bottom:0;z-index:2}
 .card h1{font-size:1.3rem}.card .steps{font-size:.82rem}
 .roles{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* characters */
.chars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:6px 0}
.cc{border:2px solid #dbe4ec;background:#f8fbfa;border-radius:12px;padding:5px 5px 6px;display:flex;flex-direction:column;align-items:center;gap:2px;font-family:var(--f-b);color:var(--ink);cursor:pointer;min-width:0;position:relative}
.cc b{font-family:var(--f-d);font-weight:400;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cc .av{width:30px;height:34px;position:relative;display:block}
.cc .av:before{content:"";position:absolute;left:5px;right:5px;bottom:0;height:16px;border-radius:9px 9px 4px 4px;background:var(--sh)}
.cc .av i{position:absolute;left:7px;top:2px;width:16px;height:16px;border-radius:50%;background:#ffcf9e;box-shadow:inset 0 7px 0 var(--ht)}
.cc .st{display:grid;grid-template-columns:auto 1fr auto;gap:1px 4px;align-items:center;width:100%;font-size:.58rem;color:var(--muted)}
.cc .st em{font-style:normal;font-weight:700;color:var(--ink);font-size:.6rem;min-width:1.3em;text-align:right}
.sbar{height:6px;border-radius:4px;background:#e3e9ef;overflow:hidden;display:block}
.sbar i{display:block;height:100%;border-radius:4px}
.sbar.w i{background:#38bdf8}.sbar.r i{background:#f59e0b}.sbar.l i{background:#22c55e}
.cc.on{border-color:var(--mint);background:#e7f6f1;box-shadow:0 0 0 2px var(--mint) inset}
.cc:disabled{opacity:.4;cursor:not-allowed}
.cc .tk{position:absolute;top:30%;left:0;right:0;font-size:.6rem;background:rgba(30,41,59,.85);color:#fff;padding:1px 0}
.ccRow{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.go.ghost{background:#fff;color:var(--ink);border:2px solid #dbe4ec}
h2 .go.sm,.card h2 .go.sm{display:inline-block;width:auto;min-width:0;font-size:.75rem;padding:3px 10px;margin:0 0 0 6px;vertical-align:middle}
@media (min-width:560px){.chars{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (orientation:landscape) and (max-height:520px){.chars{grid-template-columns:repeat(5,minmax(0,1fr))}.cc .av{display:none}}
.ccRow .go,.card .ccRow .go{width:auto;flex:1;margin:0;padding:6px 10px;font-size:.85rem}
/* work bars */
#workBar{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:30;display:grid;grid-template-columns:auto auto;gap:3px 10px;align-items:center;background:rgba(15,23,42,.82);color:#fff;border-radius:14px;padding:7px 12px 8px;width:min(300px,60vw);font-family:var(--f-b);pointer-events:none}
#workBar #wbLb{font-size:.8rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#workBar #wbVal{font-style:normal;font-size:.72rem;text-align:right;opacity:.85;font-variant-numeric:tabular-nums}
#workBar i{grid-column:1/-1;display:block;height:10px;border-radius:6px;background:rgba(255,255,255,.18);overflow:hidden}
#workBar i b{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,#38bdf8,#22d3ee);transition:width .08s linear}
#workBar.carry i b{background:linear-gradient(90deg,#22c55e,#86efac)}
#workBar.carry.heavy i b{background:linear-gradient(90deg,#ef4444,#f97316)}
#workBar.ham i b{background:linear-gradient(90deg,#f59e0b,#fde047)}
html.site #workBar{display:none}
#workBar.job i b{background:linear-gradient(90deg,#22b38a,#5eead4)}
#workBar.job.cd i b{background:linear-gradient(90deg,#64748b,#94a3b8)}
#workBar{grid-template-columns:minmax(0,1fr) auto}#workBar #wbVal{grid-row:1;grid-column:2}
/* skill button */
#skillB{position:relative;width:70px;height:70px;border-radius:50%;border:3px solid #fde68a;background:radial-gradient(circle at 35% 30%,#6366f1,#312e81);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 5px 0 #1e1b4b;margin-right:8px;align-self:flex-end;overflow:hidden;touch-action:none;cursor:pointer;flex:none}
#skillB .si{font-size:1.6rem;line-height:1}#skillB .sn{font-size:.56rem;font-family:var(--f-b);font-weight:700;max-width:62px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#skillB:before{content:"";position:absolute;inset:0;background:conic-gradient(rgba(15,23,42,.72) var(--p,0%),transparent 0);pointer-events:none}
#skillB .sc{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--f-d);font-size:1.5rem;text-shadow:0 2px 4px #000}
#skillB.cd{border-color:#64748b}#skillB.live{animation:skPulse .6s infinite alternate;border-color:#facc15}
@keyframes skPulse{to{box-shadow:0 5px 0 #1e1b4b,0 0 18px 6px #facc15}}
html.site #skillB{display:none}
@media (orientation:landscape) and (max-height:520px){#skillB{width:60px;height:60px}#skillB .si{font-size:1.3rem}}
.startHero{display:flex;gap:10px;align-items:center;text-align:left;margin:6px 0}.startHero p{margin:2px 0}
/* draft (hero select) */
#draft{position:fixed;inset:0;z-index:60;background:radial-gradient(ellipse at 50% 35%,#1e3a8a 0%,#0b1230 60%,#050816 100%);color:#e2e8f0;display:flex;flex-direction:column;font-family:var(--f-b);padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));gap:6px;overflow:hidden}
#draft[hidden]{display:none}
.dtop{display:flex;align-items:center;gap:10px}.dtop h2{margin:0;font-family:var(--f-d);font-weight:400;font-size:1.05rem;color:#fde68a;flex:1;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dtime{font-family:var(--f-d);font-size:1.3rem;color:#fff;min-width:3em;text-align:center}.dtime.warn{color:#f87171}
.dtools{display:flex;gap:6px}.dtools button{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:999px;padding:5px 11px;font-family:var(--f-b);font-size:.8rem;cursor:pointer}
.dmain{flex:1;display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr) minmax(0,150px);gap:8px;min-height:0}
#draft .dmain:has(> .dcen:only-child){grid-template-columns:1fr}
.dcol{display:flex;flex-direction:column;gap:4px;min-height:0}.dcol h3{margin:0 0 2px;font-size:.78rem;font-family:var(--f-d);font-weight:400}
.dcol.A .ds{border-left:3px solid #ef4444}.dcol.B .ds{border-right:3px solid #3b82f6;flex-direction:row-reverse;text-align:right}.dcol.B h3{text-align:right}
.ds{display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.06);border-radius:8px;padding:2px 5px;min-height:38px}
.ds.empty{opacity:.35}.ds.me{background:rgba(253,230,138,.16)}.ds.lk{background:rgba(34,197,94,.16)}
.dsi{width:34px;height:40px;flex:none;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}.dsi svg{width:34px;height:40px}
.dsn{min-width:0;display:flex;flex-direction:column;line-height:1.15}.dsn b{font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dsn small{font-size:.62rem;color:#cbd5e1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcen{display:flex;align-items:center;justify-content:center;gap:14px;min-height:0;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0));border:1px solid rgba(255,255,255,.08);padding:6px 10px}
.dpt{position:relative;flex:none;filter:drop-shadow(0 0 18px var(--cc))}.dpt svg{width:118px;height:auto;max-height:100%}
.dinfo{min-width:0;flex:1;max-width:340px}
.dcls{display:inline-block;font-size:.7rem;font-weight:700;background:var(--cc);color:#0f172a;border-radius:999px;padding:1px 9px}
.dinfo h1{margin:2px 0 0;font-family:var(--f-d);font-weight:400;font-size:1.5rem;color:#fff;line-height:1.1}.dtt{margin:0 0 4px;font-size:.75rem;color:#cbd5e1}.dtt b{color:#fca5a5}
.dsr{display:grid;grid-template-columns:68px 1fr 22px;gap:6px;align-items:center;font-size:.72rem;margin:2px 0;color:#cbd5e1}
.dsr i{height:8px;background:rgba(255,255,255,.14);border-radius:5px;overflow:hidden;display:block}.dsr i b{display:block;height:100%;border-radius:5px}
.dsr em{font-style:normal;font-weight:700;text-align:right;color:#fff}.dsr.main span{color:#fde68a;font-weight:700}
.dsk{display:flex;gap:8px;align-items:center;background:rgba(99,102,241,.22);border:1px solid rgba(165,180,252,.35);border-radius:10px;padding:4px 8px;margin:5px 0;font-size:.74rem}
.dski{font-size:1.4rem}.dsk small{display:block;color:#c7d2fe;font-size:.66rem}
.dgo{width:100%;border:0;border-radius:10px;padding:8px;font-family:var(--f-d);font-size:.95rem;color:#1f1300;background:linear-gradient(180deg,#fde68a,#f59e0b);box-shadow:0 3px 0 #92400e;cursor:pointer}
.dgo:disabled{opacity:.5}.dgo.done{background:linear-gradient(180deg,#86efac,#22c55e);opacity:1;color:#052e16;box-shadow:0 3px 0 #166534}
.dbot{display:flex;flex-direction:column;gap:4px}
.dtabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}.dtab{flex:none;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#e2e8f0;border-radius:999px;padding:2px 10px;font-size:.7rem;font-family:var(--f-b);cursor:pointer}
.dtab.on{background:#fde68a;color:#1f1300;border-color:#fde68a}
.dstrip{display:flex;gap:5px;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:thin}
.hc{position:relative;flex:none;width:62px;border-radius:10px;border:2px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#fff;padding:2px 2px 3px;display:flex;flex-direction:column;align-items:center;cursor:pointer}
.hc svg{width:40px;height:46px}.hc b{font-size:.6rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hc .cl{position:absolute;top:1px;left:3px;font-style:normal;font-size:.62rem}
.hc.view{border-color:#a5b4fc}.hc.pick{border-color:#fde68a;background:rgba(253,230,138,.2);box-shadow:0 0 10px rgba(253,230,138,.5)}
.hc.tk{opacity:.4}.hc.tk small{position:absolute;top:18px;left:0;right:0;font-size:.55rem;background:rgba(0,0,0,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (orientation:portrait){.dmain{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr}.dcol.A{grid-column:1;grid-row:1}.dcol.B{grid-column:2;grid-row:1}.dcen{grid-column:1/-1;grid-row:2;flex-direction:column;gap:4px}.ds{min-height:30px}}
@media (max-height:430px){.dcol .ds{min-height:32px}.dsi svg{width:28px;height:34px}.dpt svg{width:96px}.dinfo h1{font-size:1.25rem}.hc{width:56px}.hc svg{width:34px;height:40px}}
.dmain{overflow:hidden}.dcol{overflow:hidden}.dcol .ds{flex:1 1 0;min-height:0}.dcen{overflow:hidden}
@media (max-height:430px){#draft{gap:4px}.dcen{padding:4px 8px}.dinfo h1{font-size:1.1rem}.dtt{margin:0 0 2px;font-size:.66rem}.dcls{font-size:.6rem}.dsr{margin:0;font-size:.64rem;grid-template-columns:60px 1fr 20px}.dsr i{height:6px}.dsk{padding:2px 6px;margin:3px 0;font-size:.66rem}.dski{font-size:1.1rem}.dsk small{font-size:.58rem}.dgo{padding:5px;font-size:.85rem}.dtop h2{font-size:.9rem}.dtime{font-size:1.1rem}.dtools button{padding:3px 9px}.hc svg{width:30px;height:35px}.dtab{padding:1px 8px}}
/* shop */
.shc{margin:2px 0 6px}.shc b{color:var(--mint-d);font-size:1.05rem}
.shstats{display:grid;gap:3px;margin:0 0 8px}
.shs{display:grid;grid-template-columns:78px 1fr 64px;gap:6px;align-items:center;font-size:.78rem}
.shs i{display:flex;height:9px;background:#e3e9ef;border-radius:5px;overflow:hidden}.shs i b{display:block;height:100%;background:#94a3b8}.shs i b.g{background:linear-gradient(90deg,#22c55e,#86efac)}
.shs em{font-style:normal;font-weight:700;text-align:right}.shs em small{color:#16a34a;font-weight:600}
.shg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-bottom:5px}.shg.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.shi{border:2px solid #dbe4ec;background:#f8fbfa;border-radius:12px;padding:5px 4px;display:flex;flex-direction:column;align-items:center;gap:1px;font-family:var(--f-b);color:var(--ink);cursor:pointer;min-width:0}
.shi .ic{font-size:1.5rem;line-height:1.1}.shi b{font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.shi small{font-size:.64rem;color:var(--muted)}
.shi em{font-style:normal;font-weight:700;font-size:.78rem;color:#b45309}
.shi:not(:disabled):hover{border-color:var(--mint)}.shi:disabled{opacity:.45;cursor:default}.shi.own{opacity:1;border-color:#22c55e;background:#ecfdf5}.shi.own em{color:#16a34a}
#invBar{font-size:1rem;letter-spacing:2px;margin-top:2px}
.dst{font-size:.62rem;color:#94a3b8;margin:2px 0 1px}
@media (orientation:landscape) and (max-height:520px){.shg{grid-template-columns:repeat(3,minmax(0,1fr))}.shi .ic{font-size:1.2rem}.shstats{grid-template-columns:repeat(3,1fr);gap:8px}.shs{grid-template-columns:auto 1fr auto;font-size:.68rem}}
@media (orientation:landscape) and (max-height:520px){.shi{padding:2px 3px;gap:0}.shi .ic{font-size:1rem}.shi b{font-size:.64rem}.shi small{font-size:.56rem}.shi em{font-size:.66rem}.shg{gap:4px;margin-bottom:4px}}
/* shop tree */
.shtop{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 0 6px}
.slots{display:flex;gap:4px;align-items:center}.sl{width:36px;height:36px;border-radius:9px;border:2px dashed #cbd5e1;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:1.1rem;background:#f8fafc}
.sl.full{border:2px solid #22c55e;background:#ecfdf5;cursor:pointer;font-size:1.3rem;padding:0}.sl.sel{box-shadow:0 0 0 3px #fde68a}.slsep{width:6px}
.stabs{display:flex;gap:4px;margin:6px 0 4px;flex-wrap:wrap}.stab{border:1px solid #dbe4ec;background:#fff;border-radius:999px;padding:3px 11px;font-family:var(--f-b);font-size:.78rem;cursor:pointer;color:var(--ink)}
.stab.on{background:var(--mint);border-color:var(--mint);color:#fff}
.tree{display:flex;flex-direction:column;gap:5px;background:#f1f5f9;border-radius:12px;padding:6px}
.tr{display:flex;align-items:center;gap:4px;flex-wrap:nowrap;overflow-x:auto}
.grp{display:flex;align-items:center;gap:2px;background:#e2e8f0;border-radius:10px;padding:2px}
.ar{color:#64748b;font-size:.9rem}.pl{color:#64748b;font-size:.8rem;font-weight:700}
.ch{border:2px solid #dbe4ec;background:#fff;border-radius:10px;padding:2px 4px;display:flex;flex-direction:column;align-items:center;min-width:54px;cursor:pointer;font-family:var(--f-b);color:var(--ink)}
.ch span{font-size:1.25rem;line-height:1.1}.ch small{font-size:.56rem;white-space:nowrap;max-width:74px;overflow:hidden;text-overflow:ellipsis}
.ch.t2{border-color:#93c5fd}.ch.t3{border-color:#f59e0b;background:#fffbeb}.ch.sel{box-shadow:0 0 0 3px #fde68a}.ch.have{background:#ecfdf5;border-color:#22c55e}
.det{display:flex;align-items:center;gap:8px;margin-top:6px;background:#fff;border:2px solid #e2e8f0;border-radius:12px;padding:5px 8px;text-align:left}
.det .dic{font-size:1.8rem}.det div{flex:1;min-width:0;display:flex;flex-direction:column}.det b{font-size:.88rem}.det small{font-size:.7rem;color:var(--muted)}.det .tier{display:inline}.det .rec{color:#0f766e}
.det .go.sm{width:auto;margin:0;padding:6px 12px;font-size:.8rem;flex:none;max-width:46%}
@media (orientation:landscape) and (max-height:520px){.ch span{font-size:1.05rem}.ch{min-width:48px}.tree{padding:4px;gap:3px}.sl{width:30px;height:30px}.det{margin-top:4px;padding:3px 8px}}
.det .go:disabled{background:#e2e8f0;color:#64748b;box-shadow:none;font-size:.7rem}
#lookzone{position:fixed;inset:0;z-index:1;touch-action:none}html.site #lookzone{display:none}
.introBtns{display:flex;gap:6px;position:sticky;bottom:0;background:inherit;padding-top:4px}.introBtns .go{flex:1;margin:0;font-size:.95rem;padding-left:6px;padding-right:6px}@media (max-width:520px){.introBtns{flex-direction:column}}
#vsBar .gg{flex:1;min-width:120px;position:relative;height:22px;border-radius:11px;overflow:hidden;background:rgba(255,255,255,.12);margin:0 8px;display:block}#vsBar .gg i{position:absolute;inset:0}#vsBar .gg em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:.72rem;font-weight:700;color:#fff;text-shadow:0 1px 2px #000;white-space:nowrap}#vsBar{display:flex;align-items:center;min-width:min(520px,62vw)}
.ds.turn{box-shadow:0 0 0 2px #fde68a,0 0 14px rgba(253,230,138,.55);background:rgba(253,230,138,.18)}.hc.wait{cursor:default}
.sabReq{width:auto!important;margin:4px 0 8px!important;padding:6px 14px!important}
.seats{list-style:none;padding:0;margin:4px 0;display:flex;flex-direction:column;gap:3px}.seats .seat{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.04);border-radius:8px;padding:3px 8px;font-size:.82rem;text-align:left}.seats .seat.me{background:#fef3c7}.seats .seat b{display:inline-block;min-width:1.2em;color:#64748b}.seats .seat.empty{padding:0;background:none}.seats .seat.empty button{width:100%;text-align:left;border:1px dashed #cbd5e1;background:#fff;border-radius:8px;padding:3px 8px;font-family:var(--f-b);font-size:.8rem;cursor:pointer;color:#475569}.seats .seat.empty button:hover{border-color:var(--mint)}
/* RoV button cluster */
.actWrap{position:relative;display:flex;align-items:center;justify-content:center}
.skb{position:absolute;left:calc(50% + var(--x));top:calc(50% + var(--y));transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;border:3px solid #cbd5e1;background:radial-gradient(circle at 35% 30%,#64748b,#1e293b);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 4px 0 #0f172a;overflow:hidden;touch-action:none;cursor:pointer;z-index:2}
.skb .si{font-size:1.35rem;line-height:1}.skb .sn{font-size:.5rem;font-family:var(--f-b);font-weight:700;white-space:nowrap}
.skb:before{content:"";position:absolute;inset:0;background:conic-gradient(rgba(15,23,42,.75) var(--p,0%),transparent 0);pointer-events:none}
.skb .sc{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--f-d);font-size:1.4rem;text-shadow:0 2px 4px #000}
.skb.ready{border-color:#fde68a;background:radial-gradient(circle at 35% 30%,#22b38a,#065f46)}
.skw{--x:-112px;--y:18px}.skr{--x:-94px;--y:-52px}.skl{--x:-42px;--y:-98px}
.actWrap #skillB{position:absolute;left:calc(50% - 178px);top:calc(50% + 22px);transform:translate(-50%,-50%);margin:0}
body.vs .controls .small{margin-bottom:56px}
@media (orientation:landscape) and (max-height:520px){.skb{width:48px;height:48px}.skb .si{font-size:1.1rem}.skb .sn{font-size:.45rem}.skw{--x:-88px;--y:14px}.skr{--x:-74px;--y:-42px}.skl{--x:-32px;--y:-78px}.actWrap #skillB{left:calc(50% - 142px);top:calc(50% + 16px)}body.vs .controls .small{margin-bottom:40px}}
body.vs #workBar{top:calc(env(safe-area-inset-top,0px) + 46px);bottom:auto;width:min(340px,48vw)}
.ds .dcl{margin-left:auto;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:38px;height:34px;border-radius:9px;background:var(--cc);color:#0f172a;font-size:1rem;line-height:1;box-shadow:0 0 8px var(--cc)}.ds .dcl em{font-style:normal;font-size:.48rem;font-weight:700}.dcol.B .ds .dcl{margin-left:0;margin-right:auto}
/* portrait play */
.rotate,html:not(.site) .rotate{display:none!important}
@media (orientation:portrait){
 body.vs #vsBar{min-width:0;width:calc(100vw - 24px);box-sizing:border-box;gap:6px;padding:4px 8px}
 body.vs #workBar{top:calc(env(safe-area-inset-top,0px) + 50px);width:calc(100vw - 32px)}
 body.vs .panel{top:calc(env(safe-area-inset-top,0px) + 100px)}
 body.vs .right{top:calc(env(safe-area-inset-top,0px) + 100px)}
 body.vs .panel{max-width:calc(100vw - 196px);min-width:0;box-sizing:border-box}
 .actWrap #skillB{left:calc(50% - 122px);top:calc(50% - 116px)}
}
#statChip{display:flex;gap:6px;background:var(--ink,#1d2b4f);color:#fff;border-radius:999px;padding:3px 10px;font-size:.85rem;font-weight:700;font-family:var(--f-b)}#statChip span{white-space:nowrap}#statChip small{color:#86efac;font-size:.65rem;margin-left:1px}html.site #statChip{display:none}
/* either way up: landscape keeps the toast below the work bar */
@media (orientation:landscape) and (max-height:520px){body.vs .toast{top:calc(env(safe-area-inset-top,0px) + 100px);max-width:52vw;font-size:.9rem}}
.fsB{left:calc(max(16px,env(safe-area-inset-left,0px)) + 92px)}
/* very short landscape screens (small windows): shrink the info panels */
@media (orientation:landscape) and (max-height:340px){
 #panel,#mini,#vsBar,#workBar,.toast,#statChip,.menuB,#rotL,#hintB,#rotR{zoom:.78}
 .dtop,.dmain,.dtabs,.dstrip{zoom:.8}
}
.skx{--x:-150px;--y:-80px}
@media (orientation:landscape) and (max-height:520px){.skx{--x:-122px;--y:-64px}}
@media (orientation:portrait){.skx{--x:-170px;--y:-40px}}
.sky{--x:-100px;--y:-125px}
@media (orientation:landscape) and (max-height:520px){.sky{--x:-80px;--y:-100px}}
@media (orientation:portrait){.sky{--x:-178px;--y:35px}}
#toolStack{position:fixed;right:calc(max(10px,env(safe-area-inset-right,0px)));bottom:calc(290px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px;z-index:4}
#toolStack[hidden]{display:none}
.tsb{position:relative;width:54px;height:54px;border-radius:50%;border:2px solid rgba(255,255,255,.55);background:radial-gradient(circle at 35% 30%,#475569,#1e293b);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;box-shadow:0 3px 8px rgba(0,0,0,.35);touch-action:none}
.tsb .ti{font-size:22px;line-height:1}.tsb .tn{font-size:9px;font-weight:700;line-height:1.1}
.tsb .tc{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;border-radius:50%;pointer-events:none}
.tsb.cd::after{content:'';position:absolute;inset:-2px;border-radius:50%;background:conic-gradient(rgba(15,23,42,.72) var(--p),transparent 0);pointer-events:none}
.tsb.cd .tc{z-index:1;text-shadow:0 1px 3px #000}
.tsb[hidden]{display:none}
.tsb.near{border-color:#facc15;box-shadow:0 0 0 3px rgba(250,204,21,.45),0 3px 8px rgba(0,0,0,.35)}
@media (orientation:landscape) and (max-height:520px){#toolStack{flex-direction:row;right:auto;left:50%;transform:translateX(-50%);bottom:calc(10px + env(safe-area-inset-bottom,0px))}.tsb{width:48px;height:48px}}
.ch .chp{display:block;font-style:normal;font-size:.68rem;font-weight:800;color:#b45309;line-height:1.1;margin-top:1px}
.ch.have .chp{color:#15803d}
.ar.gap{width:10px}
body:has(#overlay:not([hidden])) #workBar,body:has(#overlay:not([hidden])) #toolStack{display:none}
/* ===== draft screen: bright cartoon-sky skin ===== */
#draft{background:
  radial-gradient(60px 40px at 8% 96%,#fff 60%,transparent 62%),radial-gradient(90px 55px at 15% 100%,#eef2ff 60%,transparent 62%),
  radial-gradient(80px 50px at 88% 97%,#fff 60%,transparent 62%),radial-gradient(110px 60px at 96% 100%,#e0e7ff 60%,transparent 62%),
  radial-gradient(70px 42px at 55% 102%,#f1f5ff 60%,transparent 62%),
  radial-gradient(ellipse at 50% 30%,#4f7cff 0%,#2f4fd8 45%,#2a2fa8 80%,#3b2a9e 100%)}
#draft::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.8;background:
  radial-gradient(2px 2px at 12% 18%,#fff 98%,transparent),radial-gradient(2px 2px at 28% 8%,#fff 98%,transparent),radial-gradient(3px 3px at 44% 14%,#fde68a 98%,transparent),
  radial-gradient(2px 2px at 63% 6%,#fff 98%,transparent),radial-gradient(3px 3px at 78% 16%,#fff 98%,transparent),radial-gradient(2px 2px at 90% 9%,#fde68a 98%,transparent),
  radial-gradient(2px 2px at 35% 60%,#fff 98%,transparent),radial-gradient(2px 2px at 70% 55%,#fff 98%,transparent),radial-gradient(3px 3px at 5% 45%,#fff 98%,transparent),
  radial-gradient(2px 2px at 96% 40%,#fff 98%,transparent)}
#draft>*{position:relative}
.dtop h2{font-size:1.25rem;color:#fde047;text-shadow:0 2px 0 #b45309,0 0 2px #7c2d12,0 3px 8px rgba(0,0,0,.35);-webkit-text-stroke:.4px #92400e}
.dtime{background:rgba(15,23,80,.35);border:2px solid rgba(255,255,255,.35);border-radius:999px;padding:0 10px;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.dtools button{background:linear-gradient(180deg,#5b7cff,#3346c8);border:2px solid rgba(255,255,255,.55);box-shadow:0 3px 0 #1e2a8a,inset 0 1px 0 rgba(255,255,255,.5);font-weight:700;padding:5px 14px}
.dcol h3{font-size:.9rem;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.ds{border-radius:14px;min-height:42px;border:2px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 8px rgba(10,20,80,.35)}
.dcol.A .ds{background:linear-gradient(180deg,#8b2a5a,#5a1f63);border-left:5px solid #ff4d6d}
.dcol.B .ds{background:linear-gradient(180deg,#2c55c9,#22359a);border-right:5px solid #4fc3ff}
.ds.empty{opacity:.55}
.ds.turn,.ds.me{border-color:#fde047!important;box-shadow:0 0 0 2px rgba(253,224,71,.55),0 0 16px rgba(253,224,71,.6),inset 0 1px 0 rgba(255,255,255,.5)}
.ds.lk{filter:saturate(1.15)}
.dsn b{font-size:.8rem;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.dsn small{color:#e0e7ff}
.dcen{border-radius:22px;border:3px solid rgba(165,190,255,.75);background:
  radial-gradient(ellipse at 30% 30%,rgba(120,200,255,.35),transparent 55%),linear-gradient(180deg,#2f49c9,#22309a);
  box-shadow:0 0 0 3px rgba(40,60,170,.6),0 0 24px rgba(120,170,255,.55),inset 0 2px 0 rgba(255,255,255,.35)}
.dpt{filter:drop-shadow(0 0 22px var(--cc)) drop-shadow(0 6px 0 rgba(0,0,0,.18))}
.dcls{font-size:.78rem;padding:3px 12px;color:#fff;background:linear-gradient(180deg,#4ade80,#16a34a);border:2px solid rgba(255,255,255,.7);box-shadow:0 2px 0 #14532d;text-shadow:0 1px 0 rgba(0,0,0,.3)}
.dinfo h1{font-size:1.7rem;text-shadow:0 3px 0 rgba(10,20,80,.55)}
.dtt{color:#dbeafe}
.dsr{font-size:.78rem;color:#fff}
.dsr i{height:12px;background:#14207a;border:1px solid rgba(255,255,255,.18);border-radius:8px;box-shadow:inset 0 2px 3px rgba(0,0,0,.4)}
.dsr i b{border-radius:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 8px currentColor}
.dsr em{font-size:.95rem}
.dsk{border-radius:14px;border:2px solid rgba(190,205,255,.6);background:linear-gradient(180deg,rgba(60,80,210,.75),rgba(40,50,160,.75));box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.dgo{border-radius:16px;padding:10px;font-size:1.1rem;color:#5a2d00;background:linear-gradient(180deg,#fff3a8 0%,#fcd34d 45%,#f59e0b 100%);border:2px solid #fff7c2;
  box-shadow:0 5px 0 #b45309,0 8px 14px rgba(0,0,0,.3),inset 0 2px 0 rgba(255,255,255,.8);text-shadow:0 1px 0 rgba(255,255,255,.6)}
.dgo:active{transform:translateY(3px);box-shadow:0 2px 0 #b45309,inset 0 2px 0 rgba(255,255,255,.8)}
.dgo.done{border-color:#dcfce7;box-shadow:0 5px 0 #166534,inset 0 2px 0 rgba(255,255,255,.7)}
.dtab{padding:4px 14px;font-size:.78rem;font-weight:700;border:2px solid rgba(190,205,255,.6);background:linear-gradient(180deg,#3d5be0,#2a3aa8);box-shadow:0 2px 0 #1a237e,inset 0 1px 0 rgba(255,255,255,.35)}
.dtab.on{background:linear-gradient(180deg,#fff3a8,#facc15);color:#5a2d00;border-color:#fff7c2;box-shadow:0 2px 0 #a16207,inset 0 1px 0 rgba(255,255,255,.8)}
.hc{width:68px;border-radius:14px;border:3px solid rgba(140,165,255,.7);background:linear-gradient(180deg,#3346c8,#1f2a86);box-shadow:0 3px 0 #141c5c,inset 0 1px 0 rgba(255,255,255,.35)}
.hc b{font-size:.64rem;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.hc.view{border-color:#c7d2fe}
.hc.pick{border-color:#fde047;background:linear-gradient(180deg,#5a5ad8,#3a2fa0);box-shadow:0 0 0 2px rgba(253,224,71,.6),0 0 14px rgba(253,224,71,.7),0 3px 0 #141c5c}
.hc.tk{opacity:.5}
.dinfo h1{font-size:1.4rem}
.dgo{padding:7px;font-size:1rem}
.dsr i{height:10px}
.dsk{margin:4px 0;padding:3px 8px}
.dcen{padding:6px 10px;overflow:hidden}
.dtt{margin:0 0 2px}
@media (max-height:440px){.dst{display:none}.dtt{display:none}.dsr{margin:1px 0}.dinfo h1{font-size:1.25rem}.dcls{font-size:.7rem;padding:1px 10px}.dsk{margin:3px 0}}
@media (orientation:portrait){#draft .ds{min-height:30px;border-width:1px;border-radius:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}#draft .dcol.A .ds{border-left-width:4px}#draft .dcol.B .ds{border-right-width:4px}#draft .dcol{gap:3px}.dtop h2{font-size:1.05rem}}
.sizeRow{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:12px 0 6px}.sizeB{border:0;border-radius:14px;padding:16px 4px;font:800 1rem inherit;font-family:inherit;background:#e0f2fe;color:#0c4a6e;cursor:pointer;box-shadow:0 3px 0 #7dd3fc}.sizeB:active{transform:translateY(2px);box-shadow:none}.sizeB.on{background:#22c55e;color:#fff;box-shadow:0 3px 0 #15803d}@media (max-width:420px){.sizeRow{grid-template-columns:repeat(3,1fr)}}

/* player level chip */
.lvb{display:inline-block;font-style:normal;font-size:.72em;font-weight:700;padding:1px 6px;margin-left:4px;border-radius:999px;background:#fde68a;color:#7c2d12;vertical-align:middle}
.lvIntro{margin:-4px 0 8px;font-size:14px}

/* hero level */
.lvc{color:#fbbf24;font-weight:700}.lvc sup{color:#22c55e;font-size:.65em;margin-left:1px}
.shlv{display:flex;align-items:center;gap:8px;margin:6px 0 2px;font-size:.8rem}
.shlv i{flex:1;height:8px;border-radius:99px;background:#e2e8f0;overflow:hidden;display:block}.shlv i b{display:block;height:100%;background:linear-gradient(90deg,#fbbf24,#f59e0b)}
.shlv small{font-size:.66rem;color:#64748b;white-space:nowrap}
.lvpt{font-size:.7rem;padding:2px 8px;border-radius:99px;background:#e2e8f0;color:#64748b;white-space:nowrap}.lvpt.on{background:#22c55e;color:#fff}
.shs{position:relative}.upb{margin-left:6px;border:0;border-radius:8px;background:#22c55e;color:#fff;font:700 .7rem var(--f-b);padding:3px 7px;cursor:pointer}.upb:disabled{background:#cbd5e1}
/* shop on one page: smaller chips, every tree listed */
.tree.one{max-height:none;overflow:visible}
.tgrp{margin:4px 0 2px}.tgrp h4{margin:2px 0;font-size:.7rem;color:#64748b;font-weight:600}
.tree.one .tr{flex-wrap:wrap;row-gap:3px;overflow:visible}
.tree.one .ch{min-width:40px;padding:1px 3px;border-width:1.5px;border-radius:8px}
.tree.one .ch span{font-size:.9rem}
.tree.one .ch small{font-size:.48rem;max-width:56px}
.tree.one .ch .chp{font-size:.5rem}
.tree.one .ar{font-size:.6rem}.tree.one .pl{font-size:.6rem}
/* shop compact pass: + button sits in the stat row, item trees in columns, smaller buy panel */
.shs:has(.upb){grid-template-columns:auto 1fr auto auto}
.upb{margin-left:0;padding:2px 6px}
.tree.one{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:4px 10px;padding:5px}
.tgrp h4{text-align:left}
#card .det{padding:3px 8px;margin-top:4px}
#card .det .dic{font-size:1.4rem}
#card .det small{font-size:.66rem}
.shlv{margin:4px 0 0}

/* 🚩 report / block */
#cwFlag{position:fixed;left:8px;top:calc(env(safe-area-inset-top,0px) + 130px);z-index:60;width:38px;height:38px;border-radius:50%;border:0;background:#fff;box-shadow:0 2px 8px #0003;font-size:18px;cursor:pointer}
#cwFlagP{position:fixed;left:60px;right:8px;top:calc(env(safe-area-inset-top,0px) + 130px);max-width:380px;max-height:60vh;overflow:auto;z-index:61;background:#fff;color:#1e293b;border-radius:14px;box-shadow:0 8px 24px #0004;padding:10px;font:14px var(--f-b,sans-serif)}
#cwFlagP .fpb{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
#cwFlagP .fpx{border:0;background:#e2e8f0;border-radius:8px;padding:3px 9px;cursor:pointer}
#cwFlagP .fpr{display:flex;gap:6px;align-items:center;padding:5px 0;border-top:1px solid #e2e8f0}
#cwFlagP .fpr span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#cwFlagP button{font:inherit;font-size:12px;border:1px solid #cbd5e1;background:#f8fafc;border-radius:8px;padding:4px 8px;cursor:pointer}
#cwFlagP .fpq{display:flex;flex-wrap:wrap;gap:5px;padding:4px 0 8px}
#cwFlagP .fpq button{background:#fee2e2;border-color:#fecaca}
#cwFlagP small{display:block;color:#64748b;margin-top:6px;font-size:11px}

/* 🎙️ voice room */
#vcTalk,#vcBtn{position:fixed;left:8px;z-index:60;width:44px;height:44px;border-radius:50%;border:0;box-shadow:0 2px 8px #0003;font-size:20px;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}
#vcTalk{top:calc(env(safe-area-inset-top,0px) + 176px);background:#22c55e}
#vcTalk.live{background:#e63946;transform:scale(1.15);box-shadow:0 0 0 6px #e6394655}
#vcTalk.busy{opacity:.55}
#vcBtn{top:calc(env(safe-area-inset-top,0px) + 228px);width:38px;height:38px;font-size:17px;left:11px;background:#fff}
#vcBtn.on{background:#dcfce7}
#vcBan{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 64px);z-index:62;background:#000b;color:#fff;padding:6px 14px;border-radius:99px;font:600 13px var(--f-b,sans-serif);pointer-events:none}
#vcBan.me{background:#d62828}
#vcPanel{position:fixed;left:60px;right:8px;top:calc(env(safe-area-inset-top,0px) + 176px);max-width:360px;max-height:60vh;overflow:auto;z-index:61;background:#fff;color:#1e293b;border-radius:14px;box-shadow:0 8px 24px #0004;padding:10px;font:14px var(--f-b,sans-serif)}
#vcPanel .vch{display:flex;justify-content:space-between;align-items:center}
#vcPanel p{font-size:12px;color:#475569;margin:6px 0}
#vcPanel .vcr{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
#vcPanel button{font:inherit;font-size:12px;border:1px solid #cbd5e1;background:#f8fafc;border-radius:8px;padding:5px 9px;cursor:pointer}
#vcPanel button.go{background:#22c55e;color:#fff;border-color:#16a34a}
#vcPanel .vcu{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:4px 0;border-top:1px solid #e2e8f0}
#vcPanel .vce{color:#b91c1c}
/* ===== layout v2: top row (back · fullscreen | camera · hint) and a ring of buttons around the big button ===== */
html.site #topBtns{display:none!important}
#topBtns{position:fixed;top:calc(env(safe-area-inset-top,0px) + 6px);left:max(10px,env(safe-area-inset-left,0px));right:max(10px,env(safe-area-inset-right,0px));display:flex;justify-content:space-between;align-items:center;z-index:6;pointer-events:none}
#topBtns>div{display:flex;gap:6px;align-items:center;pointer-events:auto}
#topBtns .menuB{position:static;left:auto;bottom:auto;padding:6px 12px;font-size:.8rem;margin:0}
#topBtns #rotL,#topBtns #hintB,#topBtns #rotR{width:38px;height:38px;font-size:1rem;zoom:1;position:relative}
#topBtns #hintN{font-size:.6rem}
.controls .small{display:none}
body.vs .controls .small{margin-bottom:0}
/* everything that used to start at the very top moves down by the top row */
.vsbar{top:calc(env(safe-area-inset-top,0px) + 52px)}
.panel,.right{top:calc(env(safe-area-inset-top,0px) + 54px)}
body.vs .panel,body.vs .right{top:calc(env(safe-area-inset-top,0px) + 96px)}
body.vs #workBar{top:calc(env(safe-area-inset-top,0px) + 92px)}
@media (orientation:portrait){
 body.vs #workBar{top:calc(env(safe-area-inset-top,0px) + 94px)}
 body.vs .panel,body.vs .right{top:calc(env(safe-area-inset-top,0px) + 144px)}
}
/* ring: inner = 🧽 🔨 💪 + hero skill, outer = 💫 📯 💊 */
body.vs .actWrap .skw{--x:-96px;--y:0px}
body.vs .actWrap .skr{--x:-81px;--y:-51px}
body.vs .actWrap .skl{--x:-42px;--y:-86px}
body.vs .actWrap #skillB{left:calc(50% + 12px);top:calc(50% - 100px)}
body.vs .actWrap .skx{--x:-160px;--y:-28px}
body.vs .actWrap .sky{--x:-124px;--y:-104px}
.actWrap .skp{position:absolute;left:calc(50% + var(--x,-55px));top:calc(50% + var(--y,-152px));transform:translate(-50%,-50%);width:50px;height:50px;margin:0}
body.vs .actWrap .skp{--x:-55px;--y:-152px}
@media (orientation:landscape) and (max-height:520px){
 body.vs .actWrap .skw{--x:-78px;--y:0px}
 body.vs .actWrap .skr{--x:-66px;--y:-41px}
 body.vs .actWrap .skl{--x:-34px;--y:-70px}
 body.vs .actWrap #skillB{left:calc(50% + 10px);top:calc(50% - 82px)}
 body.vs .actWrap .skx{--x:-130px;--y:-23px}
 body.vs .actWrap .sky{--x:-101px;--y:-85px}
 body.vs .actWrap .skp{--x:-45px;--y:-124px;width:44px;height:44px}
 #topBtns #rotL,#topBtns #hintB,#topBtns #rotR{width:34px;height:34px}
}
#topBtns .tbR button{border-radius:50%;border:0;background:var(--panel);color:var(--ink);box-shadow:0 3px 10px rgba(29,43,79,.2);font-family:var(--f-d);touch-action:none;padding:0;cursor:pointer}
#topBtns .tbR button span{position:absolute;right:-4px;top:-4px;background:var(--sun);border-radius:999px;font-size:.6rem;min-width:16px;height:16px;line-height:16px;text-align:center}
/* 3 / 4 teams */
.tm.C{background:#e3f7e8}.tm.D{background:#fdf6d8}
.teams.t3{grid-template-columns:repeat(3,minmax(0,1fr))}.teams.t4{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:720px){.teams.t4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sizeRow.tRow{grid-template-columns:repeat(3,1fr)}.ntB{border:0;border-radius:14px;padding:12px 4px;font:800 1rem inherit;font-family:inherit;background:#ede9fe;color:#3b0764;cursor:pointer}.ntB.on{background:#7c3aed;color:#fff}
.dside{display:flex;flex-direction:column;gap:6px;min-height:0;overflow:hidden}.dside .dcol{flex:1 1 0;min-height:0}
.dcol.C .ds{background:linear-gradient(180deg,#1f7a46,#14532d);border-left:5px solid #4ade80}
.dcol.D .ds{background:linear-gradient(180deg,#a16207,#713f12);border-right:5px solid #facc15;flex-direction:row-reverse;text-align:right}.dcol.D h3{text-align:right}
.dmain.multi .ds{min-height:0;padding:1px 4px}.dmain.multi .dsi,.dmain.multi .dsi svg{width:24px;height:28px}.dmain.multi .ds .dcl{width:28px;height:24px;font-size:.8rem}.dmain.multi .ds .dcl em{display:none}.dmain.multi .dsn small{display:none}.dmain.multi .dcol h3{font-size:.72rem}
.trank{text-align:left;margin:6px auto;max-width:300px;padding-left:24px;font-size:1.05rem}.trank li{padding:2px 0}.trank li.me{font-weight:800}.trank b{float:right}
.vsbar .tA,.vsbar .tB{white-space:nowrap}
@media (orientation:portrait){.dmain.multi>:first-child{grid-column:1;grid-row:1}.dmain.multi>:last-child{grid-column:2;grid-row:1}}
#draft .dmain.multi .ds{min-height:0;border-width:1px}#draft .dmain.multi .dsi,#draft .dmain.multi .dsi svg{width:20px;height:22px}#draft .dmain.multi .dsn b{font-size:.78rem}#draft .dmain.multi .dside .dcol{gap:2px}
@media (orientation:portrait){#draft .dmain.multi .dside .dcol{flex:none}#draft .dmain.multi .dcol .ds{flex:none;height:24px}}
.trank b{float:none;margin-left:10px}
#blackout{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.95);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#fde047;font-family:var(--f-d,sans-serif);pointer-events:none;text-align:center}
#blackout[hidden]{display:none}#blackout b{font-size:1.8rem}#blackout span{color:#e5e7eb;font-size:1rem}
/* open rooms (online) */
.roomList{margin:10px 0 2px;text-align:left}.roomList h3{font-family:var(--f-d);font-weight:600;font-size:1rem;margin:4px 0 6px}
.roomRow{display:grid;grid-template-columns:1fr auto;gap:2px 8px;width:100%;text-align:left;border:0;border-radius:14px;padding:10px 12px;margin:0 0 6px;background:#eef6ff;color:#0f172a;font:inherit;cursor:pointer;box-shadow:0 2px 0 #bfdbfe}
.roomRow b{font-size:.95rem}.roomRow span{grid-column:1;font-size:.8rem;color:#475569}.roomRow em{grid-row:1/3;grid-column:2;align-self:center;font-style:normal;font-weight:800;color:#2563eb}
.roomPeek .seat button b{color:#16a34a}

/* ===== Skin v2: glossy cartoon HUD (matches the AI reference screen) ===== */
:root{--sk-navy:#13235a;--sk-navy2:#2c4bb0;--sk-ring:#e6eeff;--sk-gold:#fcd34d;--sk-blue:#bfe0ff}
/* top white buttons: thick light-blue rim */
#topBtns .menuB,#topBtns .tbR button{background:linear-gradient(#fff,#eef5ff)!important;border:3px solid var(--sk-blue)!important;color:#1d4ed8!important;box-shadow:0 3px 0 #8fb8e8,0 6px 12px rgba(19,35,90,.25)!important;font-weight:700}
#topBtns .tbR button{width:42px!important;height:42px!important}
/* score / gauge bar */
.vsbar{background:linear-gradient(180deg,#2a3f86 0%,#13235a 55%,#0d1a47 100%);border:2px solid rgba(255,255,255,.35);border-radius:999px;box-shadow:inset 0 2px 0 rgba(255,255,255,.25),0 4px 0 #0a1336,0 8px 16px rgba(10,19,54,.35)}
.vsbar .tA,.vsbar .tB{font-size:1.05rem;font-weight:700;text-shadow:0 2px 0 rgba(0,0,0,.35)}
#vsBar .gg{height:24px;border:2px solid rgba(255,255,255,.5);box-shadow:inset 0 2px 4px rgba(0,0,0,.35)}
#vsBar .gg:after{content:"";position:absolute;left:4px;right:4px;top:2px;height:35%;border-radius:999px;background:linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,0));pointer-events:none}
#vsBar .gg em{font-size:.78rem;text-shadow:0 1px 0 #000,0 0 4px rgba(0,0,0,.6)}
/* mission card */
.panel{background:#fff;border:3px solid #d3e8ff;border-radius:20px;box-shadow:0 4px 0 #a9c9ee,0 10px 20px rgba(19,35,90,.2)}
.panel .mt{color:var(--sk-navy);font-weight:700}
.panel .mt small{color:#475569}
.panel .row b{color:var(--sk-navy)}
.panel .sbar{height:10px;border-radius:999px;background:#e2ecf8;box-shadow:inset 0 1px 2px rgba(0,0,0,.15)}
.panel .sbar i{border-radius:999px;background:linear-gradient(90deg,#22c55e,#38bdf8)}
.panel .sbar i.low{background:linear-gradient(90deg,#ef4444,#f97316)}
/* hero name + stats */
.timer{background:linear-gradient(180deg,#2a3f86,#13235a);border:2px solid rgba(255,255,255,.35);border-radius:16px;box-shadow:inset 0 2px 0 rgba(255,255,255,.2),0 4px 0 #0a1336,0 8px 14px rgba(10,19,54,.3);text-shadow:0 2px 0 rgba(0,0,0,.35)}
#statChip{background:linear-gradient(180deg,#22357a,#13235a);border:2px solid rgba(255,255,255,.3);padding:4px 12px;box-shadow:0 3px 0 #0a1336}
.roomtag{background:#fff;color:var(--sk-navy);border:2px solid #d3e8ff;font-weight:700;padding:3px 14px;box-shadow:0 3px 0 #a9c9ee}
#mini{background:#fff;border:3px solid #d3e8ff;border-radius:16px;box-shadow:0 4px 0 #a9c9ee,0 8px 16px rgba(19,35,90,.2)}
/* skill buttons: navy orb, white rim, big icon */
.skb,#skillB{border:3px solid var(--sk-ring);background:radial-gradient(circle at 50% 28%,#4f6fd6 0%,#24409a 45%,#13235a 100%);box-shadow:0 0 0 2px #0d1a47,0 5px 0 #0a1336,0 8px 14px rgba(10,19,54,.4)}
.skb:after,#skillB:after{content:"";position:absolute;left:14%;right:14%;top:6%;height:34%;border-radius:50%;background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0));pointer-events:none}
.skb .si,#skillB .si{filter:drop-shadow(0 2px 1px rgba(0,0,0,.45))}
.skb .sn,#skillB .sn{text-shadow:0 1px 0 #000,0 0 3px rgba(0,0,0,.7)}
.skb.ready{border-color:var(--sk-gold);background:radial-gradient(circle at 50% 28%,#5d7df0 0%,#2a48b0 45%,#14246a 100%);box-shadow:0 0 0 2px #7c5a06,0 0 12px rgba(252,211,77,.6),0 5px 0 #0a1336}
#skillB{border-color:var(--sk-gold);background:radial-gradient(circle at 50% 28%,#8b7bff 0%,#4b3fd1 45%,#241a7a 100%);box-shadow:0 0 0 2px #7c5a06,0 0 14px rgba(252,211,77,.55),0 5px 0 #160f4f}
#skillB.cd{border-color:#94a3b8;box-shadow:0 0 0 2px #334155,0 5px 0 #0a1336}
/* big action button: silver orb, mint when usable */
.act{background:radial-gradient(circle at 50% 30%,#ffffff 0%,#e3ebf7 55%,#c3d0e4 100%);color:#64748b;border:4px solid #fff;box-shadow:0 0 0 3px #b6c8e4,0 7px 0 #8fa3c3,0 12px 20px rgba(19,35,90,.3)}
.act.on{background:radial-gradient(circle at 50% 30%,#6ff0c4 0%,#22b38a 55%,#0f7d60 100%);color:#fff;border-color:#e9fff8;box-shadow:0 0 0 3px #0f7d60,0 7px 0 #0b5e48,0 12px 20px rgba(19,35,90,.3);text-shadow:0 2px 0 rgba(0,0,0,.3)}
.act.on:active{box-shadow:0 0 0 3px #0f7d60,0 2px 0 #0b5e48}
/* joystick */
.joy{background:radial-gradient(circle,rgba(255,255,255,.18) 55%,rgba(255,255,255,.35) 100%);border:4px solid rgba(255,255,255,.9)}
.knob{background:radial-gradient(circle at 50% 30%,#fff,#e6edf7)!important;box-shadow:0 4px 0 #b6c3d6,0 6px 12px rgba(19,35,90,.3)!important}
/* side buttons (flag / mic): placed in a row under the mission card, see game.js layout */
#cwFlag,#vcBtn,#vcTalk{border:3px solid var(--sk-blue)!important;box-shadow:0 3px 0 #8fb8e8,0 6px 10px rgba(19,35,90,.22)!important}
.kface{display:inline-block;vertical-align:middle;background:url(faces.png) no-repeat;image-rendering:auto;flex:none}