[hidden]{display:none!important}
:root{
  --bg:#16171b;--surface:#1f2127;--surface2:#2a2d35;--line:#33363f;--text:#e8e9ec;--muted:#9a9eaa;
  --accent:#5b8cff;--light:#ecdcb9;--dark:#b48a63;
  --safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
  --bs:min(calc(100vw - 16px),560px);
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
button,input{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
h3{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:18px 0 8px}

/* top bar */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:calc(8px + var(--safe-t)) 12px 8px;background:rgba(22,23,27,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{font-weight:700;white-space:nowrap}.logo{color:var(--accent)}
.game-title{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* layout */
.app{display:flex;flex-direction:column;align-items:center;padding:8px 8px calc(84px + var(--safe-b))}
.board-col{width:var(--bs);display:flex;flex-direction:column;gap:6px}
.panel{width:var(--bs);margin-top:12px}

/* players */
.player{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;padding:2px 4px;min-height:24px}
.player .rating{color:var(--muted);font-weight:400}
.dot{width:12px;height:12px;border-radius:50%;border:1px solid #666}.dot.w{background:#f5f5f5}.dot.b{background:#111}

/* board */
.board-wrap{display:flex;flex-direction:column;gap:6px}
#board{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));width:100%;aspect-ratio:1;border-radius:6px;overflow:hidden;box-shadow:0 6px 24px #0008;touch-action:none;user-select:none;-webkit-user-select:none}
.sq{position:relative;min-width:0;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.sq.light{background:var(--light)}.sq.dark{background:var(--dark)}
#board.plain .sq{background:#d9d9d9;box-shadow:inset 0 0 0 .5px #0002}#board.plain .sq .coord{color:#777}
.sq .heat{position:absolute;inset:0;pointer-events:none}
.sq .piece{position:relative;z-index:1;line-height:1;font-size:calc(var(--bs) / 8 * .78);font-family:"Segoe UI Symbol","DejaVu Sans","Noto Sans Symbols 2",serif}
.sq .piece.w{color:#fff;text-shadow:0 0 1px #000,0 0 2px #000,0 1px 2px #000}
.sq .piece.b{color:#141414;text-shadow:0 0 1px #fff8}
.sq .cnt{position:absolute;z-index:2;bottom:2px;right:2px;font:700 clamp(8px,calc(var(--bs) / 48),12px)/1.1 ui-monospace,monospace;color:#111;background:#fffd;border-radius:3px;padding:0 2px}
.sq .coord{position:absolute;z-index:2;font-size:clamp(8px,calc(var(--bs) / 50),11px);font-weight:700;opacity:.75}
.sq .coord.r{top:2px;left:3px}.sq .coord.f{bottom:1px;left:3px}
.sq.light .coord{color:var(--dark)}.sq.dark .coord{color:var(--light)}
.sq.last::after{content:"";position:absolute;inset:0;background:rgba(255,230,0,.28);z-index:0}
.sq.sel{box-shadow:inset 0 0 0 3px #fff}
.sq.attacker{box-shadow:inset 0 0 0 3px #ffd84d}

/* eval bar: horizontal on mobile */
.evalbar{position:relative;height:10px;border-radius:5px;background:#3a3a3a;overflow:hidden}
.evalfill{position:absolute;left:0;top:0;bottom:0;width:var(--eval,50%);background:#f0f0f0;transition:width .35s ease,height .35s ease}
.evaltxt{display:none}

/* inspector */
.inspector{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:13px;color:var(--muted);min-height:38px}
.inspector b{color:var(--text)}.inspector .w{color:#8fb4ff}.inspector .bk{color:#ff8a8a}

/* move strip */
.movestrip{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:2px 0;scroll-behavior:smooth}
.movestrip::-webkit-scrollbar{display:none}
.mv{flex:none;padding:6px 9px;border-radius:8px;background:var(--surface);border:1px solid var(--line);font-size:14px;white-space:nowrap}
.mv .n{color:var(--muted);margin-right:3px;font-size:12px}
.mv.cur{background:var(--accent);border-color:var(--accent);color:#fff}.mv.cur .n{color:#dfe7ff}

/* dock */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:8px 8px calc(8px + var(--safe-b));background:rgba(22,23,27,.95);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.dock button{height:52px;border:0;border-radius:12px;background:var(--surface2);font-size:20px}
.dock button:active{transform:scale(.95);background:#3a3e48}
.dock button.primary{background:var(--accent);color:#fff}
.dock button.on{background:#4a2a1a}

/* panel */
.tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--surface);border-radius:12px;padding:4px;gap:4px}
.tab{border:0;background:transparent;padding:10px;border-radius:9px;font-weight:600;color:var(--muted)}
.tab.active{background:var(--surface2);color:var(--text)}
.tabpane{padding-top:4px}
.field{display:flex;gap:6px;margin-top:10px}
.field input{flex:1;min-width:0;height:46px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-size:16px}
.field input:focus{outline:2px solid var(--accent);border-color:transparent}
.field button{height:46px;padding:0 16px;border:0;border-radius:10px;background:var(--accent);color:#fff;font-weight:600}
.sec-head{display:flex;align-items:center;justify-content:space-between}
.glist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.glist li{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer}
.glist li:active{background:var(--surface2)}
.glist li.active{border-color:var(--accent)}
.glist .t{font-weight:600;font-size:14px}.glist small{color:var(--muted);display:block;font-size:12px;margin-top:2px}
.glist .badge{float:right;font-size:11px;padding:2px 6px;border-radius:6px;background:var(--surface2);color:var(--muted)}
.glist .badge.live{background:#2f8f4e;color:#fff}
.empty{color:var(--muted);font-size:13px;padding:8px 2px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;margin-top:12px}
.engine-top{display:flex;align-items:baseline;justify-content:space-between}
.eval-big{font-size:28px;font-weight:800;font-variant-numeric:tabular-nums}
.depth{color:var(--muted);font-size:12px}
.pv{margin-top:6px;font-size:14px;color:var(--muted);word-spacing:2px}
.segmented{display:flex;gap:4px;background:var(--surface);border-radius:10px;padding:4px;flex-wrap:wrap}
.segmented button{flex:1;border:0;background:transparent;padding:9px 6px;border-radius:7px;color:var(--muted);font-size:13px;font-weight:600}
.segmented button.active{background:var(--surface2);color:var(--text)}
.switch{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);cursor:pointer}
.switch.row{display:flex;margin:12px 0}
.switch input{display:none}
.switch span{width:38px;height:22px;border-radius:11px;background:var(--surface2);position:relative;transition:.2s;flex:none}
.switch span::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#bbb;top:2px;left:2px;transition:.2s}
.switch input:checked+span{background:var(--accent)}.switch input:checked+span::after{left:18px;background:#fff}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.legend div{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.legend i{width:20px;height:20px;border-radius:4px;flex:none;border:1px solid var(--line)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + var(--safe-b));z-index:40;background:#c0392b;color:#fff;padding:10px 16px;border-radius:10px;font-size:14px;max-width:90vw;box-shadow:0 6px 20px #0008}
.spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--muted);border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}

.sq.target::before{content:"";position:absolute;z-index:3;width:30%;height:30%;border-radius:50%;background:rgba(20,20,20,.35)}
.sq.target.cap::before{width:86%;height:86%;background:transparent;border:5px solid rgba(20,20,20,.35)}
.branchbar{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#2a2340;border:1px solid #4b3f78;border-radius:10px;padding:6px 6px 6px 12px;font-size:13px}
.branchbar button{border:0;border-radius:8px;background:var(--accent);color:#fff;padding:8px 12px;font-weight:600}

/* phones in landscape: board on the left sized to the height, everything else scrolls on the right */
@media (orientation:landscape) and (max-height:500px){
  :root{--bs:calc(100dvh - 24px)}
  .topbar{display:none}
  .app{display:grid;grid-template-columns:var(--bs) minmax(0,1fr);grid-auto-rows:min-content;column-gap:12px;row-gap:6px;align-items:start;
       padding:12px calc(12px + env(safe-area-inset-right,0px)) 12px calc(12px + env(safe-area-inset-left,0px))}
  .board-col{display:contents}
  .board-wrap{grid-column:1;grid-row:1 / span 30;position:sticky;top:12px}
  .evalbar{display:none}
  .board-col>:not(.board-wrap),.panel{grid-column:2;width:auto;margin:0}
  .dock{position:static;padding:0;background:none;border:0}
  .dock button{height:44px}
  .toast{bottom:16px}
}

/* desktop */
@media (min-width:900px){
  :root{--bs:min(calc(100vh - 230px),640px)}
  .app{flex-direction:row;align-items:flex-start;justify-content:center;gap:24px;padding:20px}
  .board-wrap{flex-direction:row;gap:8px}
  .evalbar{width:14px;height:auto;flex:none}
  .evalfill{width:auto;right:0;top:auto;height:var(--eval,50%)}
  .board-col{width:calc(var(--bs) + 22px)}
  .board-col .player,.board-col .inspector,.board-col .movestrip{margin-left:22px}
  .dock{position:static;margin-left:22px;padding:0;background:none;border:0;backdrop-filter:none}
  .dock button{height:44px}
  .panel{width:360px;margin-top:0;max-height:calc(100vh - 100px);overflow:auto}
  .toast{bottom:24px}
}
@media (hover:hover){.glist li:hover{background:var(--surface2)}.dock button:hover{filter:brightness(1.15)}}
.collapse summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px}
.collapse summary::-webkit-details-marker{display:none}
.collapse summary h3::before{content:"▸";display:inline-block;margin-right:6px;transition:transform .15s}
.collapse[open] summary h3::before{transform:rotate(90deg)}
.collapse summary.sec-head{justify-content:space-between}
.ghost{position:fixed;left:0;top:0;z-index:50;pointer-events:none;line-height:1;font-size:calc(var(--bs) / 8 * .95);font-family:"Segoe UI Symbol","DejaVu Sans","Noto Sans Symbols 2",serif;filter:drop-shadow(0 6px 8px #000a)}
.ghost.w{color:#fff;text-shadow:0 0 1px #000,0 0 2px #000}.ghost.b{color:#141414;text-shadow:0 0 1px #fff8}
.enginepill{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden}
.enginepill b{color:var(--text);font-size:15px;font-variant-numeric:tabular-nums;min-width:48px}
.enginepill #pillInfo{overflow:hidden;text-overflow:ellipsis}
.pulse{width:9px;height:9px;border-radius:50%;background:#666;flex:none}
.pulse.on{background:#3ddc84;animation:pulse 1s ease-in-out infinite}
.pulse.done{background:var(--accent)}
@keyframes pulse{50%{opacity:.25;transform:scale(.7)}}
.arrow{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}