:root{
  --bg:#0a0d14; --bg2:#10141e; --panel:#151a26; --panel2:#1b2130;
  --line:#252c3d; --line2:#313a4f;
  --txt:#e8ecf4; --txt2:#98a2b8; --txt3:#68738c;
  --h:#4d9fff; --h2:#7ab6ff;      /* human blue */
  --r:#ffab2e; --r2:#ffc46b;      /* robot amber */
  --red:#ff5d6b; --blue:#3fc4ff;
  --green:#2fd07a;
  --purple:#a78bfa;
  --tile:44px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* CRITICAL: any element carrying the `hidden` attribute must stay hidden even
   when a later rule sets display:grid/flex. Without this, overlays never close. */
[hidden]{display:none!important}
html,body{height:100%}
body{font-family:'Inter',-apple-system,system-ui,sans-serif;background:var(--bg);color:var(--txt);
  -webkit-font-smoothing:antialiased;font-size:14px;line-height:1.5;overflow:hidden}
.app{display:grid;grid-template-columns:1fr 380px;height:100vh}
.pane{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.pane::-webkit-scrollbar{width:8px}
.pane::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px}
.pane--game{padding:22px 30px 34px;background:
  radial-gradient(900px 500px at 20% -10%,rgba(77,159,255,.08),transparent 60%),
  radial-gradient(700px 400px at 90% 110%,rgba(255,171,46,.06),transparent 60%),var(--bg)}
.pane--side{background:var(--bg2);border-left:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}

/* ---------- intro ---------- */
.intro{position:fixed;inset:0;z-index:400;background:rgba(6,8,13,.93);backdrop-filter:blur(12px);
  display:grid;place-items:center;padding:20px;overflow:auto}
.intro__card{width:min(500px,100%);background:var(--panel);border:1px solid var(--line2);
  border-radius:20px;padding:34px 32px;text-align:center;animation:pop .3s cubic-bezier(.2,.9,.3,1)}
.intro__logo,.brandmark{font-weight:800;letter-spacing:-1px;color:var(--h)}
.intro__logo{font-size:38px;margin-bottom:4px}
.intro__logo span,.brandmark span{color:var(--r)}
.intro__tag{font-size:14px;color:var(--txt2);margin-bottom:20px}
.intro__row{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:20px}
.ichar{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-size:28px}
.ichar--h{background:rgba(77,159,255,.14);border:1px solid rgba(77,159,255,.4)}
.ichar--r{background:rgba(255,171,46,.14);border:1px solid rgba(255,171,46,.4)}
.ivs{font-size:20px;color:var(--txt3);font-weight:700}
.intro__body{font-size:13.5px;color:var(--txt2);line-height:1.7;margin-bottom:12px;text-align:left}
.intro__body b{color:var(--txt)} .ch{color:var(--h2)!important} .cr{color:var(--r2)!important}
.intro__body--dim{font-size:12.5px;color:var(--txt3)}
.intro__body code{font-family:'JetBrains Mono',monospace;font-size:11px;background:var(--panel2);
  border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--purple)}
.intro__keys{font-size:11.5px;color:var(--txt3);margin-bottom:22px}
kbd{font-family:'JetBrains Mono',monospace;background:var(--panel2);border:1px solid var(--line2);
  border-bottom-width:2px;border-radius:5px;padding:2px 6px;font-size:10.5px;color:var(--txt2);margin:0 1px}
.intro__btns{display:flex;gap:10px}
.btn--lg{padding:12px 16px;font-size:13.5px;flex:1}
@keyframes pop{from{transform:scale(.94) translateY(8px);opacity:0}}

/* ---------- top ---------- */
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:12px;flex-wrap:wrap}
.top__brand{display:flex;align-items:center;gap:12px}
.brandmark{font-size:19px}
.mcp-badge{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;
  padding:6px 12px;border-radius:999px;border:1px solid var(--line2);background:var(--panel)}
.mcp-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--txt3)}
.mcp-badge--on{border-color:rgba(47,208,122,.4);background:rgba(47,208,122,.1);color:#7ee2ac}
.mcp-badge--on .dot{background:var(--green);box-shadow:0 0 0 3px rgba(47,208,122,.18);animation:pulse 2s infinite}
.mcp-badge--off{color:var(--txt2)}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(47,208,122,0)}}

.levelbar{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:8px}
.lvl-eyebrow{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--txt3);letter-spacing:.6px}
.lvl-eyebrow b{color:var(--txt2)}
.levelbar h2{font-size:23px;font-weight:700;letter-spacing:-.4px}
.levelbar__right{display:flex;gap:8px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:7px 13px;text-align:center;min-width:62px}
.stat b{display:block;font-size:17px;font-weight:700;line-height:1.15}
.stat span{font-size:9.5px;color:var(--txt3);text-transform:uppercase;letter-spacing:.6px}
.brief{font-size:12.5px;color:var(--txt2);max-width:640px;margin-bottom:16px;line-height:1.6}

/* ---------- board ---------- */
.stage{position:relative;display:inline-block;margin-bottom:14px}
.board{position:relative;display:grid;gap:3px;background:var(--panel);padding:12px;border-radius:14px;border:1px solid var(--line)}
.cell{width:var(--tile);height:var(--tile);border-radius:7px;position:relative;
  display:grid;place-items:center;transition:background .18s,box-shadow .18s}
.c-wall{background:#0d1119;box-shadow:inset 0 0 0 1px #1a2130}
.c-floor{background:#1c2230}
.c-goalh{background:rgba(77,159,255,.13);box-shadow:inset 0 0 0 2px rgba(77,159,255,.45)}
.c-goalr{background:rgba(255,171,46,.13);box-shadow:inset 0 0 0 2px rgba(255,171,46,.45)}
.c-goalh::after,.c-goalr::after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;opacity:.55}
.c-goalh::after{background:var(--h)} .c-goalr::after{background:var(--r)}
.c-plate1{background:rgba(255,93,107,.14);box-shadow:inset 0 0 0 2px rgba(255,93,107,.4)}
.c-plate2{background:rgba(63,196,255,.14);box-shadow:inset 0 0 0 2px rgba(63,196,255,.4)}
.c-plate1::after,.c-plate2::after{content:"";position:absolute;width:16px;height:16px;border-radius:4px;
  border:2px solid;opacity:.75;transition:.18s}
.c-plate1::after{border-color:var(--red)} .c-plate2::after{border-color:var(--blue)}
.c-plate1.pressed,.c-plate2.pressed{box-shadow:inset 0 0 0 2px currentColor}
.c-plate1.pressed::after{background:var(--red);transform:scale(.8)}
.c-plate2.pressed::after{background:var(--blue);transform:scale(.8)}
.c-door1{background:var(--red);box-shadow:inset 0 0 0 2px rgba(255,255,255,.15)}
.c-door2{background:var(--blue);box-shadow:inset 0 0 0 2px rgba(255,255,255,.15)}
.c-door1.open,.c-door2.open{background:rgba(255,255,255,.04)}
.c-door1.open{box-shadow:inset 0 0 0 2px rgba(255,93,107,.45)}
.c-door2.open{box-shadow:inset 0 0 0 2px rgba(63,196,255,.45)}
.c-door1::before,.c-door2::before{content:"";position:absolute;inset:9px;border-radius:3px;
  background:rgba(0,0,0,.28);transition:.2s}
.c-door1.open::before,.c-door2.open::before{opacity:0;transform:scaleY(.2)}

.pawn{position:absolute;width:var(--tile);height:var(--tile);border-radius:9px;display:grid;place-items:center;
  font-size:23px;z-index:5;transition:transform .13s cubic-bezier(.3,1.4,.5,1);will-change:transform}
.pawn--h{background:linear-gradient(150deg,rgba(77,159,255,.35),rgba(77,159,255,.15));
  border:1px solid rgba(122,182,255,.65);box-shadow:0 0 18px rgba(77,159,255,.3)}
.pawn--r{background:linear-gradient(150deg,rgba(255,171,46,.35),rgba(255,171,46,.15));
  border:1px solid rgba(255,196,107,.65);box-shadow:0 0 18px rgba(255,171,46,.28)}
.pawn.bump{animation:bump .22s}
@keyframes bump{50%{filter:brightness(1.7)}}
.pawn--h.turn{box-shadow:0 0 0 3px rgba(77,159,255,.35),0 0 22px rgba(77,159,255,.45);animation:turnp 1.3s infinite}
@keyframes turnp{50%{box-shadow:0 0 0 6px rgba(77,159,255,.12),0 0 22px rgba(77,159,255,.3)}}

.hintdot{position:absolute;width:var(--tile);height:var(--tile);display:grid;place-items:center;z-index:4;pointer-events:none}
.hintdot i{width:16px;height:16px;border-radius:50%;background:rgba(167,139,250,.85);animation:hp .9s infinite}
@keyframes hp{50%{transform:scale(.55);opacity:.5}}

.bubble{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--panel2);
  border:1px solid var(--r);color:var(--r2);font-size:12px;font-weight:600;padding:8px 14px;
  border-radius:999px;white-space:nowrap;z-index:20;box-shadow:0 8px 24px rgba(0,0,0,.5);
  animation:up .25s;max-width:92%;overflow:hidden;text-overflow:ellipsis}
@keyframes up{from{opacity:0;transform:translate(-50%,8px)}}

.won{position:absolute;inset:0;display:grid;place-items:center;background:rgba(8,11,17,.86);
  backdrop-filter:blur(4px);border-radius:14px;z-index:30;animation:fade .25s}
@keyframes fade{from{opacity:0}}
.won__card{text-align:center;padding:26px;animation:pop .3s cubic-bezier(.2,.9,.3,1)}
.won__seal{width:48px;height:48px;border-radius:14px;background:rgba(47,208,122,.14);
  border:1px solid rgba(47,208,122,.45);color:var(--green);display:grid;place-items:center;
  font-size:24px;font-weight:700;margin:0 auto 14px}
.won__card h3{font-size:21px;font-weight:700;margin-bottom:4px}
.won__card p{font-size:12.5px;color:var(--txt2);margin-bottom:18px}
.won__stats{display:flex;gap:9px;justify-content:center;margin-bottom:20px}
.won__stats div{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 15px}
.won__stats b{display:block;font-size:18px;font-weight:700}
.won__stats span{font-size:9.5px;color:var(--txt3);text-transform:uppercase;letter-spacing:.5px}
.won__btns{display:flex;gap:9px;justify-content:center}

.legend{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:18px;font-size:11px;color:var(--txt2)}
.lg{display:inline-flex;align-items:center;gap:6px}
.sw{width:11px;height:11px;border-radius:3px;display:block}
.sw--h{background:var(--h)} .sw--r{background:var(--r)}
.sw--p1{background:transparent;border:2px solid var(--red)}
.sw--p2{background:transparent;border:2px solid var(--blue)}
.sw--g{background:transparent;box-shadow:inset 0 0 0 2px var(--green);border-radius:50%}

/* ---------- controls ---------- */
.controls{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.dpad{display:grid;grid-template-columns:repeat(3,38px);grid-template-rows:repeat(2,38px);gap:5px}
.dbtn{background:var(--panel);border:1px solid var(--line2);color:var(--txt2);border-radius:9px;
  cursor:pointer;font-size:12px;transition:.14s;font-family:inherit}
.dbtn:hover{background:var(--panel2);color:var(--h2);border-color:var(--h)}
.dbtn:active{transform:scale(.93)}
.dbtn--u{grid-column:2;grid-row:1} .dbtn--l{grid-column:1;grid-row:2}
.dbtn--d{grid-column:2;grid-row:2} .dbtn--r{grid-column:3;grid-row:2}
.controls__btns{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- buttons ---------- */
.btn{font-family:inherit;font-weight:600;border-radius:9px;border:1px solid var(--line2);
  background:var(--panel);color:var(--txt);cursor:pointer;transition:.15s;font-size:12.5px;padding:8px 14px}
.btn:hover:not(:disabled){border-color:var(--txt3);transform:translateY(-1px)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn--xs{font-size:10.5px;padding:4px 9px}
.btn--sm{font-size:11.5px;padding:7px 11px;flex:1}
.btn--ghost{background:transparent;color:var(--txt2)}
.btn--primary{background:linear-gradient(140deg,var(--h),#6b5cff);border:0;color:#fff}
.btn--hint{background:rgba(167,139,250,.13);border-color:rgba(167,139,250,.4);color:#c4b5fd}
.btn--stop{background:rgba(255,93,107,.13);border-color:rgba(255,93,107,.4);color:#ff9296}

/* ---------- side ---------- */
.side__head{display:flex;justify-content:space-between;align-items:center;padding:20px 20px 14px;border-bottom:1px solid var(--line)}
.side__head h3{font-size:13.5px;font-weight:700}
.side__mode{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--txt3);
  border:1px solid var(--line2);border-radius:999px;padding:3px 9px;text-transform:uppercase;letter-spacing:.5px}
.side__mode.live{color:var(--r2);border-color:rgba(255,171,46,.45);background:rgba(255,171,46,.1)}
.agentcard{margin:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}
.agentcard__top{display:flex;gap:11px;align-items:flex-start;margin-bottom:12px}
.avatar{width:38px;height:38px;flex-shrink:0;border-radius:11px;background:rgba(255,171,46,.14);
  border:1px solid rgba(255,171,46,.4);display:grid;place-items:center;font-size:19px}
.agentcard__top b{display:block;font-size:12.5px;margin-bottom:2px}
.agentcard__top span{font-size:11.5px;color:var(--txt2);line-height:1.45;display:block}
.agentcard__btns{display:flex;gap:7px;margin-bottom:9px}
.agentcard__note{font-size:10.5px;color:var(--txt3);line-height:1.5}
.side__subhead{display:flex;justify-content:space-between;align-items:center;padding:6px 20px 10px;
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--txt3)}
.log{flex:1;overflow-y:auto;padding:0 16px 14px;display:flex;flex-direction:column;gap:7px}
.log::-webkit-scrollbar{width:6px}
.log::-webkit-scrollbar-thumb{background:var(--line2);border-radius:6px}
.log__empty{text-align:center;padding:30px 14px;color:var(--txt3)}
.log__empty p{font-size:12px;font-weight:600;color:var(--txt2);margin-bottom:5px}
.log__empty span{font-size:11px;line-height:1.55;display:block}
.entry{border:1px solid var(--line);background:var(--panel);border-radius:9px;padding:8px 10px;animation:slideIn .28s}
@keyframes slideIn{from{opacity:0;transform:translateY(-5px)}}
.entry__top{display:flex;align-items:center;gap:7px;margin-bottom:3px}
.entry__tool{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:500;color:var(--purple)}
.entry__time{margin-left:auto;font-size:9px;color:var(--txt3);font-family:'JetBrains Mono',monospace}
.entry__body{font-size:11px;color:var(--txt2);line-height:1.45}
.entry__body code{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--txt);
  background:var(--panel2);padding:1px 4px;border-radius:3px}
.tag{font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 5px;border-radius:4px}
.tag--move{background:rgba(255,171,46,.12);color:var(--r2);border:1px solid rgba(255,171,46,.35)}
.tag--read{background:rgba(77,159,255,.12);color:var(--h2);border:1px solid rgba(77,159,255,.35)}
.tag--block{background:rgba(255,93,107,.12);color:#ff9296;border:1px solid rgba(255,93,107,.35)}
.tag--win{background:rgba(47,208,122,.12);color:#7ee2ac;border:1px solid rgba(47,208,122,.35)}
.side__foot{padding:12px 18px 16px;border-top:1px solid var(--line);background:var(--panel)}
.tools{font-size:11px}
.tools summary{cursor:pointer;color:var(--txt2);font-weight:600;font-size:11px;list-style:none;padding:5px 0;user-select:none}
.tools summary::-webkit-details-marker{display:none}
.tools summary::before{content:'▸ ';color:var(--txt3)}
.tools[open] summary::before{content:'▾ '}
.tools ul{list-style:none}
.tools li{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--txt3);padding:3px 0;display:flex;gap:6px;align-items:baseline}
.tools li b{color:var(--purple);font-weight:500;flex-shrink:0}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:200;background:var(--panel);
  border:1px solid var(--line2);border-radius:11px;padding:12px 20px;font-size:13px;font-weight:600;
  box-shadow:0 12px 40px rgba(0,0,0,.55);animation:up2 .3s;max-width:90vw;text-align:center}
@keyframes up2{from{transform:translate(-50%,12px);opacity:0}}
.toast--ok{border-color:rgba(47,208,122,.5);color:#7ee2ac}
.toast--warn{border-color:rgba(255,171,46,.5);color:var(--r2)}

@media(max-width:1000px){
  body{overflow:auto}
  .app{grid-template-columns:1fr;height:auto}
  .pane--side{border-left:0;border-top:1px solid var(--line)}
  .pane--game{padding:18px}
  :root{--tile:34px}
  .log{max-height:280px}
}