/* ============================================================
   Clean, minimal UI. One accent, 1px borders, an 8px spacing
   scale, no gradients. Light by default, dark when the OS asks.
   ============================================================ */
:root{
  --bg:#f7f8fa; --surface:#ffffff; --line:#e4e7ec; --line-2:#eef0f4;
  --ink:#15181d; --ink-2:#5b6472; --ink-3:#98a1ae;
  --accent:#2f6df6; --accent-ink:#ffffff; --accent-soft:#eef3ff;
  --good:#1f9d57; --bad:#d64545;

  --lt:#eef0f3; --dk:#7e97b8;            /* board: soft slate, not loud */
  --sel:#2f6df6; --last:rgba(47,109,246,.16); --chk:rgba(214,69,69,.55);

  --r:10px; --r-lg:14px;
  --sh:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --sh-lg:0 8px 24px rgba(16,24,40,.10);
  --ui:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0f1115; --surface:#16191f; --line:#262b34; --line-2:#1e222a;
    --ink:#e9ecf1; --ink-2:#a0a9b8; --ink-3:#6c7584;
    --accent:#5b8dff; --accent-ink:#0b1020; --accent-soft:#19233a;
    --good:#3ec27f; --bad:#f06a6a;
    --lt:#cfd6e0; --dk:#5a7593;
    --last:rgba(91,141,255,.22); --sel:#5b8dff;
    --sh:0 1px 2px rgba(0,0,0,.3); --sh-lg:0 10px 30px rgba(0,0,0,.45);
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.55 var(--ui); -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}
button,input{font:inherit;color:inherit}
h1,h2,h3{font-weight:650;letter-spacing:-.01em}

/* ---------- buttons ---------- */
.btn{
  background:var(--surface); border:1px solid var(--line); color:var(--ink);
  padding:10px 16px; border-radius:var(--r); cursor:pointer;
  font-weight:550; font-size:.94rem; box-shadow:var(--sh);
  transition:background .14s,border-color .14s,color .14s;
}
.btn:hover{background:var(--line-2)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.btn-primary:hover{background:var(--accent);filter:brightness(1.07)}
.btn-quiet{background:transparent;border-color:transparent;color:var(--ink-2);box-shadow:none}
.btn-quiet:hover{background:var(--line-2);color:var(--ink)}
.btn-danger{color:var(--bad)}
.btn-danger:hover{background:var(--bad);color:#fff;border-color:transparent}
.btn-sm{padding:7px 12px;font-size:.86rem;border-radius:8px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- lobby ---------- */
.screen{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}
.lobby-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:40px 32px; max-width:400px; width:100%; box-shadow:var(--sh); text-align:center;
}
.lobby-card h1{margin:0;font-size:1.75rem;display:flex;align-items:center;justify-content:center;gap:10px}
.lobby-card h1 .k{width:30px;height:30px;display:block}
.tagline{margin:8px 0 32px;color:var(--ink-2);font-size:.94rem}
.stack{display:flex;flex-direction:column;gap:16px}
.stack .btn-primary{padding:12px 16px;font-size:1rem}
.or{display:flex;align-items:center;gap:12px;color:var(--ink-3);font-size:.8rem}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.join-row{display:flex;gap:8px}
.code-input{
  flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  padding:10px 14px;text-transform:uppercase;letter-spacing:.18em;font-weight:650;text-align:center;
}
.code-input::placeholder{letter-spacing:.08em;font-weight:500;color:var(--ink-3)}
.code-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.side{color:var(--ink-2);font-size:.88rem;text-align:left;border-top:1px solid var(--line-2);padding-top:14px}
.side summary{cursor:pointer;color:var(--ink-2);list-style:none;display:flex;align-items:center;gap:6px}
.side summary::-webkit-details-marker{display:none}
.side summary::before{content:"›";transition:transform .15s;display:inline-block}
.side[open] summary::before{transform:rotate(90deg)}
.radio-row{display:flex;gap:16px;padding:12px 0 0;flex-wrap:wrap}
.radio-row label{display:flex;align-items:center;gap:6px;cursor:pointer}
.radio-row input{accent-color:var(--accent)}

.wait-label{margin:0;color:var(--ink-3);font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.code-display{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:2.25rem;font-weight:700;letter-spacing:.2em;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 10px;user-select:all;word-break:break-all;
}
.hint{color:var(--ink-3);font-size:.82rem;margin:0;line-height:1.5}
.spinner-row{display:flex;align-items:center;justify-content:center;gap:9px;color:var(--ink-2);font-size:.88rem;margin:0}
.spinner{width:13px;height:13px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .75s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.err{margin-top:18px;background:var(--surface);border:1px solid var(--bad);
     color:var(--bad);border-radius:var(--r);padding:10px 13px;font-size:.87rem;text-align:left}
.credit{margin-top:20px;color:var(--ink-3);font-size:.76rem;text-align:center}

/* ---------- game layout ---------- */
#game{justify-content:flex-start;padding:20px}
.layout{display:flex;gap:24px;align-items:flex-start;width:100%;max-width:1000px;margin:0 auto}
.board-col{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:10px}
.board-wrap{position:relative;width:100%}

.player-strip{display:flex;align-items:center;gap:9px;font-size:.88rem;min-height:24px;color:var(--ink-2)}
.player-strip .who{font-weight:600;color:var(--ink)}
.player-strip .dot{width:7px;height:7px;border-radius:50%;background:var(--line);flex:none;transition:background .2s}
.player-strip .dot.on{background:var(--good)}
.captured{display:flex;align-items:center;gap:1px;margin-left:auto;min-height:18px}
.cap-pc{width:17px;height:17px;opacity:.8;flex:none}
.captured .edge{margin-left:6px;font-size:.8rem;font-weight:650;color:var(--ink-2)}

/* ---------- board ---------- */
.board{
  display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);
  aspect-ratio:1/1;width:100%;border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh);touch-action:manipulation;
}
.sq{position:relative;display:flex;align-items:center;justify-content:center;user-select:none}
.sq.lt{background:var(--lt)} .sq.dk{background:var(--dk)}
/* pieces are SVG from the inline sprite, so they stay crisp at any size */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sq .pc{width:86%;height:86%;display:block;position:relative;z-index:2;
  pointer-events:none;transition:transform .13s ease;
  filter:drop-shadow(0 1px 1px rgba(16,24,40,.22))}
.sq.movable{cursor:pointer}
.sq.movable:hover .pc{transform:translateY(-2px) scale(1.03)}
.sq.sel .pc{transform:scale(1.05)}
/* a captured piece lingers for a moment under the piece that took it */
.ghost{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  z-index:1;pointer-events:none}
.ghost .pc{width:86%;height:86%}
.sq.last::before{content:"";position:absolute;inset:0;background:var(--last);
  animation:fadeIn .18s ease-out}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.sq.sel::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 3px var(--sel);z-index:3}
.sq.check::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle,var(--chk) 18%,transparent 70%);
  animation:checkPulse 1.8s ease-in-out infinite}
@keyframes checkPulse{0%,100%{opacity:1}50%{opacity:.5}}
.sq.tgt{cursor:pointer}
.sq .target{position:absolute;width:26%;height:26%;border-radius:50%;
  background:rgba(20,28,45,.26);pointer-events:none;z-index:1;
  animation:dotIn .15s cubic-bezier(.3,1.3,.5,1)}
@keyframes dotIn{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
.sq.tgt:hover .target{background:rgba(20,28,45,.4)}
.sq.occupied-target .target{width:100%;height:100%;border-radius:0;background:none;
  box-shadow:inset 0 0 0 4px rgba(20,28,45,.26)}
.coord{position:absolute;font-size:.58rem;font-weight:700;pointer-events:none;opacity:.65}
.coord.f{right:4px;bottom:2px} .coord.r{left:4px;top:2px}
.sq.lt .coord{color:#6f7a8a} .sq.dk .coord{color:#eef1f6}

/* ---------- promotion + overlay ---------- */
.promo,.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(247,248,250,.86);backdrop-filter:blur(4px);border-radius:var(--r);z-index:5;padding:16px}
@media (prefers-color-scheme:dark){.promo,.overlay{background:rgba(15,17,21,.84)}}
.promo{flex-direction:column;gap:14px}
.promo p{margin:0;color:var(--ink-2);text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;font-weight:600}
.promo-row{display:flex;gap:8px}
.promo-row button{width:62px;height:62px;display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  cursor:pointer;box-shadow:var(--sh);transition:border-color .14s,transform .12s}
.promo-row button:hover{border-color:var(--accent);transform:translateY(-2px)}
.promo-pc{width:44px;height:44px;display:block}
.promo{animation:fadeIn .15s ease-out}
.overlay{animation:fadeIn .2s ease-out}
.overlay-box{animation:popIn .22s cubic-bezier(.2,.9,.3,1);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 24px;text-align:center;max-width:290px;box-shadow:var(--sh-lg)}
.overlay-box h2{margin:0 0 6px;font-size:1.3rem}
.overlay-box p{margin:0 0 18px;color:var(--ink-2);font-size:.9rem}
.overlay-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.rematch-note{margin:14px 0 0 !important;color:var(--accent) !important;font-size:.84rem !important}

/* ---------- side panel ---------- */
.panel{flex:0 0 260px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh);overflow:hidden}
.panel h3{margin:0 0 8px;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);font-weight:650}
.status-box,.moves-box,.chat-box,.actions{padding:16px}
.status-box{border-bottom:1px solid var(--line-2)}
.moves-box,.chat-box{border-bottom:1px solid var(--line-2)}
.conn{display:flex;align-items:center;gap:7px;font-size:.76rem;color:var(--ink-3);margin-bottom:5px}
.conn .dot{width:6px;height:6px;border-radius:50%;background:var(--ink-3);flex:none}
.conn.ok .dot{background:var(--good)} .conn.off .dot{background:var(--bad)}
.turn{font-weight:650;font-size:1.02rem;letter-spacing:-.01em}
.moves{margin:0;padding-left:1.7em;max-height:190px;overflow-y:auto;font-size:.88rem;color:var(--ink-3)}
.moves li{padding:1px 0}
.moves li span{display:inline-block;min-width:4.6em;color:var(--ink);font-variant-numeric:tabular-nums}
.chat-log{height:110px;overflow-y:auto;font-size:.85rem;display:flex;flex-direction:column;gap:3px;margin-bottom:10px;color:var(--ink)}
.chat-log .me{color:var(--accent)} .chat-log .them{color:var(--ink)}
.chat-log .sys{color:var(--ink-3)}
.chat-form{display:flex;gap:6px}
.chat-form input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);
  border-radius:8px;padding:7px 10px;font-size:.86rem}
.chat-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.actions{display:flex;gap:8px;flex-wrap:wrap}

@keyframes popIn{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:var(--ink);color:var(--bg);border-radius:var(--r);padding:11px 18px;
  box-shadow:var(--sh-lg);font-size:.88rem;z-index:50;max-width:min(90vw,440px);text-align:center}

/* ---------- responsive ---------- */
@media (max-width:880px){
  /* stacked: stretch, or a column flex container shrinks the board to its
     content width instead of letting it fill the screen */
  .layout{flex-direction:column;align-items:stretch;max-width:540px}
  .panel{flex:1 1 auto;width:100%}
  .moves{max-height:140px}
}
@media (max-width:420px){
  .lobby-card{padding:30px 22px}
  .code-display{font-size:1.85rem;letter-spacing:.14em}
  #game{padding:12px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition:none !important}}