:root{
  --ink:#0B0B0D; --panel:#131317; --line:#26262d;
  --bone:#ECE7DC; --dim:#9A968C; --mute:#6E6B64;
  --blood:#C8102E; --blood-soft:#E0435A; --gold:#C9A227;
  --sq-l:#3a3a42; --sq-d:#1c1c22;
  --sel:#C8102E; --tgt:rgba(236,231,220,.28); --tgt-cap:rgba(200,16,46,.5);
  --last:rgba(201,162,39,.22);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{background:var(--ink);color:var(--bone);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;overflow:hidden;
  -webkit-tap-highlight-color:transparent;user-select:none}

.app{height:100%;max-width:560px;margin:0 auto;display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) 12px env(safe-area-inset-bottom)}

.bar{display:flex;align-items:center;justify-content:space-between;height:52px;flex:0 0 auto}
.brand{font-weight:800;letter-spacing:.04em;font-size:15px}
.icon{background:none;border:none;color:var(--bone);font-size:20px;width:40px;height:40px;
  cursor:pointer;border-radius:8px;display:inline-flex;align-items:center;justify-content:center}
.icon:hover{background:var(--panel)}
.icon.hide{display:none}
.bar-right{display:flex;gap:2px}
#btn-voice[data-state="connecting"]{color:var(--dim);animation:pulse 1.2s infinite}
#btn-voice[data-state="live"]{color:var(--blood-soft)}
#btn-voice[data-state="muted"]{color:var(--mute)}
#btn-voice[data-state="error"]{color:var(--mute)}
@keyframes pulse{50%{opacity:.35}}
.voice-tag{background:none;border:none;cursor:pointer;min-height:15px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.voice-tag[data-state="live"]{color:var(--blood-soft)}
.voice-tag[data-state="connecting"]{animation:pulse 1.2s infinite}
.voice-tag[data-state="off"]{display:none}

.tray{flex:0 0 auto;height:22px;display:flex;gap:1px;align-items:center;padding:0 2px;
  font-size:17px;line-height:1;color:var(--mute);overflow:hidden}
#tray-b{justify-content:flex-start}
#tray-w{justify-content:flex-start}

.board-wrap{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:0;
  perspective:1200px}
.board{width:min(94vw,52vh,540px);aspect-ratio:1;display:grid;
  grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);
  border-radius:6px;overflow:hidden;box-shadow:0 12px 50px rgba(0,0,0,.6);
  transition:transform .34s cubic-bezier(.7,0,.3,1)}
.board.zoom{transform:scale(2.5)}

.cell{position:relative;border:none;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:min(9vw,5vh);line-height:1;
  font-family:"Segoe UI Symbol","Noto Sans Symbols2",serif;
  font-variant-emoji:text;text-rendering:optimizeLegibility}
.cell.light{background:var(--sq-l)} .cell.dark{background:var(--sq-d)}
/* both are the same solid glyph; colour + rim tell them apart on every platform */
.cell.white-pc{color:#F4F0E6;text-shadow:0 0 1px rgba(0,0,0,.7),0 2px 3px rgba(0,0,0,.5)}
.cell.black-pc{color:#141419;text-shadow:0 0 2px rgba(236,231,220,.55),0 1px 2px rgba(0,0,0,.4)}
.cell.last::after{content:"";position:absolute;inset:0;background:var(--last);pointer-events:none}
.cell.sel::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 3px var(--sel);pointer-events:none}
.cell.check::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(200,16,46,.55),transparent 70%)}
.cell.target::before{content:"";position:absolute;width:30%;height:30%;border-radius:50%;
  background:var(--tgt);pointer-events:none}
.cell.target-cap::before{content:"";position:absolute;inset:8%;border-radius:50%;
  box-shadow:inset 0 0 0 3px var(--tgt-cap);pointer-events:none}

.foot{flex:0 0 auto;height:56px;display:flex;flex-direction:column;justify-content:center;
  align-items:center;gap:2px;text-align:center}
.turn{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.turn.mine{color:var(--blood-soft)}
.status{font-size:13px;color:var(--dim);min-height:16px}
.status.over{color:var(--bone);font-weight:700}

/* menu sheet */
.menu{position:fixed;inset:0;z-index:8000;background:rgba(6,6,8,.72);
  display:flex;align-items:flex-end;justify-content:center;backdrop-filter:blur(3px)}
.menu.hide{display:none}
.sheet{width:100%;max-width:440px;background:var(--panel);border:1px solid var(--line);
  border-radius:16px 16px 0 0;padding:24px 22px calc(28px + env(safe-area-inset-bottom));
  position:relative;animation:up .22s cubic-bezier(.2,.7,.3,1)}
@keyframes up{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
.x{position:absolute;top:14px;right:14px;background:none;border:none;color:var(--dim);font-size:16px;cursor:pointer}
.sheet h2{font-size:26px;font-weight:800;letter-spacing:.03em}
.tagline{color:var(--dim);font-size:14px;margin:2px 0 20px}
.tagline.hide{display:none}
.result{margin:6px 0 20px;font-weight:800;font-size:20px;letter-spacing:.01em}
.result.hide{display:none}
.result .sub{display:block;font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-top:6px}
.result.win{color:var(--blood-soft)}
.result.win.legendary{color:var(--gold)}
.result.lose{color:var(--bone)}
.result.draw{color:var(--dim)}
.big-btn{display:block;width:100%;padding:15px;border-radius:9px;border:none;cursor:pointer;
  font-family:var(--mono);font-size:14px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  background:var(--blood);color:#fff;margin-bottom:10px}
.big-btn:hover{background:#e01331}
.big-btn.ghost{background:transparent;color:var(--bone);border:1px solid var(--line)}
.big-btn.ghost:hover{background:var(--ink)}
.invite{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.invite.hide{display:none}
.code-row{font-family:var(--mono);font-size:13px;color:var(--dim);letter-spacing:.1em;text-transform:uppercase}
.code-row b{color:var(--blood-soft);font-size:22px;letter-spacing:.24em;display:block;margin-top:4px}
.link-row{display:flex;gap:8px;margin-top:12px}
.link-row input{flex:1;min-width:0;background:var(--ink);border:1px solid var(--line);border-radius:7px;
  color:var(--dim);padding:11px 12px;font-size:13px;font-family:var(--mono)}
.link-row button{background:var(--bone);color:var(--ink);border:none;border-radius:7px;padding:0 16px;
  font-family:var(--mono);font-size:12px;font-weight:700;text-transform:uppercase;cursor:pointer}
.hint{color:var(--mute);font-size:12px;margin-top:10px}

/* hitmarker X (pawn-grade captures) */
.cell.hitmark::after{content:"✕";position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-size:1.5em;font-weight:900;color:#fff;
  text-shadow:0 0 10px rgba(200,16,46,.95),0 0 2px #000;
  animation:hitm .38s ease-out forwards;pointer-events:none;background:none}
@keyframes hitm{
  0%{opacity:1;transform:scale(1.7) rotate(10deg)}
  55%{opacity:1;transform:scale(1) rotate(0deg)}
  100%{opacity:0;transform:scale(.85)}
}

/* promotion picker */
.promo{position:fixed;inset:0;z-index:8500;background:rgba(6,6,8,.72);
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
.promo.hide{display:none}
.promo-box{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:18px 20px 20px;animation:up .18s cubic-bezier(.2,.7,.3,1)}
.promo-title{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);text-align:center;margin-bottom:12px}
.promo-row{display:flex;gap:10px}
.promo-row button{width:64px;height:64px;border-radius:10px;border:1px solid var(--line);
  background:var(--ink);color:#F6F2E9;font-size:40px;line-height:1;cursor:pointer;
  font-family:"Segoe UI Symbol","Noto Sans Symbols2",serif}
.promo-row button:hover{border-color:var(--blood-soft);background:#16161b}

@media (prefers-reduced-motion: reduce){ .board{transition:none} .board.zoom{transform:scale(1.6)} }