/* =====================================================================
   /stylechess — "Studio" look (clean light UI, navy + saffron, tricolour rule)
   Loaded AFTER style.css, only on /stylechess. Every rule is scoped to
   html.sc so the classic /play page is never affected.
   ===================================================================== */

html.sc{
  --sc-bg:#f3f5f9;--sc-panel:#ffffff;--sc-panel2:#f6f8fb;--sc-line:#e2e7ef;--sc-line2:#eef1f6;
  --sc-text:#1b2333;--sc-muted:#667085;--sc-dim:#a0a8b8;
  --sc-brand:#0b3d91;--sc-brand-ink:#ffffff;--sc-brand-soft:#e8eefb;
  --sc-saffron:#f5891f;--sc-saffron-ink:#a3520a;--sc-saffron-soft:#fff3e3;
  --sc-up:#118a3c;--sc-up-soft:#e7f6ec;--sc-dn:#d7372f;--sc-dn-soft:#fdecea;
  --sc-shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --sc-pop:0 8px 24px rgba(16,24,40,.12);
  --sc-overlay:rgba(15,23,42,.45);
  color-scheme:light;
}
html.sc[data-ui="dark"]{
  --sc-bg:#0b1120;--sc-panel:#111a2e;--sc-panel2:#16213a;--sc-line:#223052;--sc-line2:#1a2644;
  --sc-text:#e6eaf2;--sc-muted:#94a0b8;--sc-dim:#5b6782;
  --sc-brand:#4f8cff;--sc-brand-ink:#ffffff;--sc-brand-soft:#1a2a4d;
  --sc-saffron:#ff9d3b;--sc-saffron-ink:#ffb366;--sc-saffron-soft:#3a2a14;
  --sc-up:#2fbf71;--sc-up-soft:#123222;--sc-dn:#ff6b61;--sc-dn-soft:#3a1717;
  --sc-shadow:none;--sc-pop:0 8px 24px rgba(0,0,0,.5);
  --sc-overlay:rgba(0,0,0,.6);
  color-scheme:dark;
}

/* Remap the classic theme's tokens (board colours --light/--dark are left alone) */
html.sc body{
  --bg:var(--sc-bg);--bg2:var(--sc-panel);--bg3:var(--sc-panel2);--panel:var(--sc-panel);
  --text:var(--sc-text);--text2:var(--sc-muted);--text3:var(--sc-dim);
  --gold:var(--sc-brand);--gold2:var(--sc-brand);--gold-glow:var(--sc-brand-soft);--accent:var(--sc-brand);
  --glass:var(--sc-panel2);--glass-border:var(--sc-line);
  --danger:var(--sc-dn);--success:var(--sc-up);
  font-family:'Inter','Noto Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--sc-bg);color:var(--sc-text);-webkit-font-smoothing:antialiased;
}
html.sc .blob,html.sc body::after{display:none!important}

/* ---------- Top bar with thin tricolour rule ---------- */
.sc-topbar{display:none}
html.sc .sc-topbar{height:52px;background:var(--sc-panel);display:flex;align-items:center;gap:14px;padding:0 18px;position:relative;z-index:50;box-shadow:var(--sc-shadow)}
html.sc .sc-topbar::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:3px;background:linear-gradient(90deg,#ff9933,#ffd9b0 30%,#e9eef6 50%,#bfe3c4 70%,#138808)}
html.sc .sc-logo{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--sc-brand);white-space:nowrap;letter-spacing:-.01em;text-decoration:none;font-size:1rem}
html.sc .sc-logo-mark{width:26px;height:26px;border-radius:7px;background:var(--sc-brand);color:var(--sc-brand-ink);display:grid;place-items:center;font-size:.95rem}
html.sc .sc-logo b{color:var(--sc-saffron);font-weight:800}
html.sc .sc-nav{display:flex;gap:2px}
html.sc .sc-nav a{padding:6px 10px;border-radius:6px;color:var(--sc-muted);font-weight:600;font-size:.82rem;text-decoration:none}
html.sc .sc-nav a:hover{background:var(--sc-panel2);color:var(--sc-text)}
html.sc .sc-nav a.on{color:var(--sc-brand);background:var(--sc-brand-soft)}
html.sc .sc-spacer{flex:1}
html.sc .sc-chip{font-size:.78rem;color:var(--sc-muted);white-space:nowrap;padding-left:12px;border-left:1px solid var(--sc-line)}
html.sc .sc-chip b{color:var(--sc-up)}
html.sc .sc-toggle{width:34px;height:34px;border-radius:8px;border:1px solid var(--sc-line);background:var(--sc-panel);color:var(--sc-text);cursor:pointer;display:grid;place-items:center;font-size:1rem}
html.sc .sc-toggle:hover{background:var(--sc-panel2)}

/* ---------- Layout ---------- */
html.sc #app{height:calc(100vh - 55px);height:calc(100dvh - 55px);padding-top:18px}

/* Left icon rail */
html.sc .icon-btn,html.sc .nav-btn,html.sc .nav-btn.icon-btn{
  background:var(--sc-panel)!important;border:1px solid var(--sc-line)!important;color:var(--sc-text)!important;
  box-shadow:var(--sc-shadow)!important;backdrop-filter:none!important
}
html.sc .icon-btn svg{fill:var(--sc-muted)}
html.sc .icon-btn:hover,html.sc .nav-btn:hover{border-color:var(--sc-brand)!important;background:var(--sc-panel2)!important;box-shadow:var(--sc-shadow)!important}
html.sc .icon-btn:hover svg{fill:var(--sc-brand)}
html.sc .nav-btn.active,html.sc .nav-btn.icon-btn.active{background:var(--sc-brand-soft)!important;border-color:var(--sc-brand)!important}
html.sc .nav-btn.active svg{fill:var(--sc-brand)}
html.sc .gold-btn.icon-btn{background:var(--sc-brand)!important;border-color:var(--sc-brand)!important}
html.sc .gold-btn.icon-btn svg{fill:var(--sc-brand-ink)}
html.sc #play-online.icon-btn{background:var(--sc-saffron)!important;border-color:var(--sc-saffron)!important}
html.sc #play-online.icon-btn::before{display:none}
html.sc #play-online-label{color:var(--sc-saffron-ink)!important;text-shadow:none!important}
/* hover labels */
html.sc .icon-btn>span,html.sc .gold-btn.icon-btn>span{background:var(--sc-text);color:var(--sc-panel);border:none;box-shadow:var(--sc-pop)}
html.sc .icon-btn>span::before,html.sc .gold-btn.icon-btn>span::before{border-right-color:var(--sc-text)}
html.sc #logo-img{border-color:var(--sc-brand);background:var(--sc-panel);filter:none;animation:none}
html.sc #user-profile{background:var(--sc-panel)!important;border:1px solid var(--sc-line)!important;box-shadow:var(--sc-shadow)}
html.sc #user-avatar-wrap{background:var(--sc-brand-soft)!important;border-color:var(--sc-brand)!important;box-shadow:none!important}
html.sc #user-avatar-text{color:var(--sc-brand)!important}

/* Generic buttons */
html.sc .gold-btn:not(.icon-btn){background:var(--sc-brand);color:var(--sc-brand-ink);border:1px solid transparent;border-radius:8px;box-shadow:none;font-weight:700}
html.sc .gold-btn:not(.icon-btn):hover{filter:brightness(1.08);transform:none;box-shadow:none}
html.sc .glass-btn:not(.icon-btn),html.sc .modal-close{background:var(--sc-panel);border:1px solid var(--sc-line);color:var(--sc-text);border-radius:8px;backdrop-filter:none}
html.sc .glass-btn:not(.icon-btn):hover,html.sc .modal-close:hover{border-color:var(--sc-brand);color:var(--sc-brand);transform:none}
html.sc .mode-btn,html.sc .theme-btn{background:var(--sc-panel)!important;border:1px solid var(--sc-line)!important;color:var(--sc-text)!important;border-radius:8px!important;box-shadow:none!important}
html.sc .mode-btn:hover,html.sc .theme-btn:hover{border-color:var(--sc-brand)!important;transform:none}
html.sc .mode-btn.active,html.sc .theme-btn.active{background:var(--sc-brand-soft)!important;border-color:var(--sc-brand)!important;color:var(--sc-brand)!important;font-weight:700}
html.sc .time-btn{background:var(--sc-panel)!important;border:1px solid var(--sc-line)!important;color:var(--sc-muted)!important;box-shadow:none!important}
html.sc .time-btn.active{background:var(--sc-saffron-soft)!important;border-color:var(--sc-saffron)!important;color:var(--sc-saffron-ink)!important}

/* ---------- Board area ---------- */
html.sc .player-bar{background:var(--sc-panel);border:1px solid var(--sc-line);border-radius:10px;box-shadow:var(--sc-shadow);backdrop-filter:none}
html.sc .player-name{color:var(--sc-text);font-weight:700}
html.sc .player-rating{color:var(--sc-saffron-ink)!important;font-family:'Inter',sans-serif!important;font-weight:600}
html.sc .player-icon{color:var(--sc-muted)}
html.sc .timer{font-family:'Inter',sans-serif;font-variant-numeric:tabular-nums;font-weight:800;background:var(--sc-panel2);border:1px solid var(--sc-line);color:var(--sc-text)}
html.sc .timer.active,html.sc .timer.running{background:var(--sc-brand);border-color:var(--sc-brand);color:var(--sc-brand-ink)}
html.sc .timer.low{color:var(--sc-dn);border-color:var(--sc-dn);background:var(--sc-dn-soft)}
html.sc .score-card{background:var(--sc-panel2);border-color:var(--sc-line);font-family:'Inter',sans-serif;color:var(--sc-muted)}
html.sc #board-frame{background:var(--sc-panel);border:1px solid var(--sc-line);border-radius:12px;box-shadow:var(--sc-pop);backdrop-filter:none}
html.sc #board{border-color:var(--sc-panel)!important;box-shadow:none!important}
html.sc #eval-bar-h{background:var(--sc-line2);border-color:var(--sc-line)}
html.sc #eval-fill-h{background:linear-gradient(90deg,var(--sc-dim),var(--sc-panel))}
html.sc #eval-label{font-family:'Inter',sans-serif;font-weight:700;color:var(--sc-brand);text-shadow:none}
html.sc #eval-bar-wrap{background:var(--sc-line);border-radius:6px}
html.sc #status,html.sc #status-desktop{color:var(--sc-muted);font-weight:600}
html.sc #thinking{background:var(--sc-brand)}

/* Draw / Resign bar */
html.sc .ga-btn{background:var(--sc-panel);border:1px solid var(--sc-line);color:var(--sc-text);border-radius:8px;box-shadow:var(--sc-shadow)}
html.sc .ga-btn:hover{border-color:var(--sc-brand);color:var(--sc-brand);background:var(--sc-panel)}
html.sc .ga-btn.danger{color:var(--sc-dn);border-color:var(--sc-dn-soft);background:var(--sc-dn-soft)}
html.sc .ga-btn.danger:hover{border-color:var(--sc-dn)}
html.sc .ga-btn.accept{background:var(--sc-up);border-color:var(--sc-up);color:#fff}
html.sc #draw-offer-banner{background:var(--sc-saffron-soft);border-color:var(--sc-saffron);color:var(--sc-saffron-ink)}

/* Speech bubbles / commentary */
html.sc .opp-chat,html.sc .opp-chat.taunt,html.sc .opp-chat.trash,html.sc .opp-chat.praise{background:var(--sc-panel);color:var(--sc-text);border:1px solid var(--sc-line);box-shadow:var(--sc-pop)}
html.sc .opp-chat.trash{color:var(--sc-dn)}
html.sc .opp-chat.praise{color:var(--sc-up)}
html.sc .opp-chat::after{border-top-color:var(--sc-line)!important}
html.sc #ai-comment{background:var(--sc-panel);color:var(--sc-brand);border-color:var(--sc-line);box-shadow:var(--sc-pop)}
html.sc #ai-comment::after{border-top-color:var(--sc-line)}

/* ---------- Right panel ---------- */
html.sc #right-panel{background:var(--sc-panel)!important;border:1px solid var(--sc-line)!important;border-radius:14px!important;box-shadow:var(--sc-shadow);backdrop-filter:none!important;max-height:calc(100dvh - 55px - 36px)!important;scrollbar-color:var(--sc-line) transparent!important}
html.sc #eval-section{border-bottom-color:var(--sc-line)}
html.sc #ai-comment-panel:empty{display:none}
html.sc #ai-comment-panel{background:var(--sc-brand-soft);border-color:transparent;color:var(--sc-brand);opacity:1;font-weight:500}
html.sc #right-panel::before{display:none}
html.sc #right-panel h4,html.sc .side-panel h4{color:var(--sc-muted);font-weight:700;letter-spacing:.04em}
html.sc #right-panel *{text-shadow:none}
html.sc .move-row{background:var(--sc-panel2);border:1px solid transparent}
html.sc .move-row:hover{background:var(--sc-brand-soft)}
html.sc .move-row:last-child{background:var(--sc-saffron-soft);border-color:transparent}
html.sc .move-num{color:var(--sc-dim)}
html.sc .move-last{background:var(--sc-brand)!important;color:var(--sc-brand-ink)!important}
html.sc #chat-section{border-top-color:var(--sc-line)}
html.sc #chat-input,html.sc #right-panel input[type=text]{background:var(--sc-panel)!important;border:1px solid var(--sc-line)!important;color:var(--sc-text)!important;border-radius:8px!important}
html.sc #chat-input:focus{border-color:var(--sc-brand)!important;box-shadow:0 0 0 3px var(--sc-brand-soft)!important;outline:none}
html.sc .chat-msg.user{background:var(--sc-brand-soft);color:var(--sc-brand)}
html.sc .chat-msg.opp,html.sc .chat-msg.bot,html.sc .chat-msg.ai{background:var(--sc-panel2);color:var(--sc-text)}
html.sc #eval-text{font-family:'Inter',sans-serif;font-weight:800;background:var(--sc-panel2);border-color:var(--sc-line)}
html.sc .history-item{background:var(--sc-panel);border-color:var(--sc-line)}
html.sc .history-item:hover{border-color:var(--sc-brand)}

/* ---------- Modals & overlays ---------- */
html.sc .modal{background:var(--sc-overlay);backdrop-filter:blur(2px)}
html.sc .modal-box,html.sc .modal-content{background:var(--sc-panel);border:1px solid var(--sc-line);border-radius:14px;box-shadow:var(--sc-pop);color:var(--sc-text)}
html.sc .modal-box h2{color:var(--sc-text);letter-spacing:-.01em}
html.sc #game-over-text{color:var(--sc-text)}
html.sc #onboard-overlay{background:var(--sc-overlay);backdrop-filter:blur(6px)}
html.sc #onboard-steps{background:var(--sc-panel);border:1px solid var(--sc-line);border-radius:14px;box-shadow:var(--sc-pop)}
html.sc .onboard-step h2{color:var(--sc-text);letter-spacing:-.02em}
html.sc .onboard-step p{color:var(--sc-muted)}
html.sc .ob-hint{background:var(--sc-brand-soft);border-color:transparent;color:var(--sc-brand)}
html.sc .ob-highlight::before{border-color:var(--sc-saffron)}
html.sc #match-status{background:var(--sc-brand-soft);border-color:var(--sc-brand);color:var(--sc-brand)}

/* ---------- Mobile ---------- */
html.sc .mob-circle{background:var(--sc-panel);border:1px solid var(--sc-line);color:var(--sc-text);box-shadow:var(--sc-shadow);backdrop-filter:none}
html.sc .mob-circle svg{fill:var(--sc-muted)}
html.sc .mob-circle.gold{background:var(--sc-brand);border-color:var(--sc-brand)}
html.sc .mob-circle.gold svg{fill:var(--sc-brand-ink)}
html.sc .mob-circle:hover,html.sc .mob-circle:active{border-color:var(--sc-brand);box-shadow:var(--sc-shadow)}
html.sc #mob-top-bar #status{background:var(--sc-panel)!important;border:1px solid var(--sc-line)!important;color:var(--sc-muted)!important}
html.sc #mob-sidebar{background:var(--sc-panel);border-right:1px solid var(--sc-line)}
html.sc #mob-sidebar-overlay{background:var(--sc-overlay)}

/* ---------- Full-width layout + bigger board ---------- */
html.sc{--sc-board:min(calc(100dvh - 262px),calc(100vw - 560px),900px)}
/* the right panel already shows the evaluation; drop the duplicate bar above the board on desktop */
@media(min-width:901px){html.sc #arena>#eval-bar-h{display:none}}
html.sc #app{max-width:none;grid-template-columns:68px 1fr 340px;gap:20px;padding-left:18px;padding-right:18px}
html.sc #board-wrapper{max-width:calc(var(--sc-board) + 14px)}
html.sc #board-area{max-width:calc(var(--sc-board) + 80px)}
html.sc .player-bar,html.sc #game-actions,html.sc #status-bar,html.sc #thinking,html.sc #online-search-area,
html.sc #replay-bar,html.sc #guest-banner,html.sc #puzzle-card,html.sc #tactics-card,html.sc #analysis-panel{max-width:calc(var(--sc-board) + 14px)}
html.sc #analysis-panel{width:100%;background:var(--sc-panel);border:1px solid var(--sc-line);box-shadow:var(--sc-shadow);color:var(--sc-text)}
html.sc .analysis-title{color:var(--sc-brand)}
html.sc #replay-bar{background:var(--sc-panel);border:1px solid var(--sc-line);box-shadow:var(--sc-shadow);backdrop-filter:none;color:var(--sc-text)}
html.sc .rbar-btn{background:var(--sc-panel2);border-color:var(--sc-line);color:var(--sc-text)}

/* ---------- 3D view: pieces stand upright on the tilted board ---------- */
html.sc .view-3d #board-scene,html.sc .view-3d #board-frame,html.sc .view-3d #board,html.sc .view-3d .square{transform-style:preserve-3d}
html.sc .view-3d #board{overflow:visible}
/* Squares and board share one plane; lift the squares (and sink the table) so clicks
   always land on a square instead of flickering between the square and the board */
html.sc .view-3d .square{transform:translateZ(1px)}
html.sc .view-3d #table-surface{transform:translateZ(-6px);pointer-events:none}
/* z-index is ignored inside a 3D scene, so the arrow layer must sit physically above the lifted squares */
html.sc .view-3d .sc-threat-layer{transform:translateZ(2px)}
html.sc .view-3d .piece-wrapper{transform:rotateX(-28deg);transform-origin:50% 88%}
html.sc .view-3d .square:hover .piece-wrapper{transform:rotateX(-28deg) translateY(-6px) scale(1.06)}
html.sc .view-3d .piece-img,html.sc .view-3d .square.selected .piece-img{transform:none!important}
html.sc .view-3d #table-surface{background:radial-gradient(ellipse at 50% 40%,var(--sc-line) 0%,transparent 75%);box-shadow:none}

/* ---------- Threat warnings (stylechess.js) ---------- */
html.sc #board{position:relative}
html.sc .sc-threat-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6;overflow:visible}
html.sc .sc-threat-line{fill:none;stroke:#1f6fe5;stroke-width:.075;stroke-dasharray:.015 .13;stroke-linecap:round;stroke-linejoin:round;opacity:.9;filter:drop-shadow(0 0 .04px rgba(31,111,229,.6))}
html.sc .sc-threat-head{fill:#1f6fe5;opacity:.9}
html.sc[data-ui="dark"] .sc-threat-line{stroke:#5b9bff}
html.sc[data-ui="dark"] .sc-threat-head{fill:#5b9bff}
html.sc .square.sc-threat{box-shadow:inset 0 0 0 3px rgba(31,111,229,.55)}
html.sc .square.sc-threat-hot{box-shadow:inset 0 0 0 3px rgba(215,55,47,.9),inset 0 0 22px rgba(215,55,47,.45);animation:sc-hot 1.4s ease-in-out infinite}
@keyframes sc-hot{50%{box-shadow:inset 0 0 0 3px rgba(215,55,47,.55),inset 0 0 10px rgba(215,55,47,.2)}}
html.sc .sc-pill{padding:6px 11px;border-radius:20px;border:1px solid var(--sc-line);background:var(--sc-panel);color:var(--sc-muted);font:600 .8rem 'Inter',sans-serif;cursor:pointer;white-space:nowrap}
html.sc #sc-threat-toggle:not(.on){text-decoration:line-through;text-decoration-color:var(--sc-dim);color:var(--sc-dim)}
html.sc .sc-pill.on{background:var(--sc-buy-soft,#e8f0fe);border-color:#1f6fe5;color:#1f6fe5}
html.sc[data-ui="dark"] .sc-pill.on{background:#172a4d;border-color:#4f8cff;color:#8db8ff}

@media(max-width:900px){
  html.sc .sc-topbar{height:46px;padding:0 12px;gap:10px}
  html.sc .sc-nav,html.sc .sc-chip{display:none}
  html.sc{--sc-board:calc(100vw - 30px)}
  html.sc .sc-pill{padding:5px 8px;font-size:.72rem}
  html.sc .sc-topbar{gap:6px}
  html.sc .sc-logo{font-size:.9rem;gap:6px}
  html.sc .sc-toggle{width:30px;height:30px;flex-shrink:0}
  html.sc #app{height:calc(100dvh - 49px);padding-top:8px!important}
  html.sc #action-bar{gap:4px!important;padding-left:0;padding-right:0}
  html.sc .mob-circle{width:36px;height:36px}
}

/* ---------- Meet the bots ---------- */
html.sc .sc-pill-bots{color:var(--sc-brand);border-color:var(--sc-line)}
html.sc .sc-pill-bots:hover{border-color:var(--sc-brand);background:var(--sc-brand-soft)}
html.sc .sc-bot-box{max-width:760px;width:94%}
html.sc .sc-bot-intro{color:var(--sc-muted);font-size:.88rem;margin:-6px 0 14px;line-height:1.45}
html.sc .sc-bot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
html.sc .sc-bot-card{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:12px;border-radius:12px;border:1px solid var(--sc-line);background:var(--sc-panel);color:var(--sc-text);cursor:pointer;font-family:inherit;transition:border-color .15s,box-shadow .15s,transform .15s}
html.sc .sc-bot-card:hover{border-color:var(--sc-brand);box-shadow:var(--sc-pop);transform:translateY(-2px)}
html.sc .sc-bot-flag{font-size:1.7rem;line-height:1}
html.sc .sc-bot-name{font-weight:800;font-size:.98rem}
html.sc .sc-bot-name em{font-style:normal;font-size:.68rem;font-weight:700;color:var(--sc-brand);background:var(--sc-brand-soft);padding:1px 6px;border-radius:10px;vertical-align:2px}
html.sc .sc-bot-style{font-size:.74rem;font-weight:700;color:var(--sc-saffron-ink);background:var(--sc-saffron-soft);padding:1px 7px;border-radius:10px}
html.sc .sc-bot-bio{font-size:.78rem;color:var(--sc-muted);line-height:1.35;margin-top:2px}
@media(max-width:900px){html.sc .sc-bot-grid{grid-template-columns:1fr 1fr}html.sc .sc-bot-card{padding:10px}}
/* very narrow phones: keep the logo mark, drop the wordmark so the top-bar buttons fit */
@media(max-width:380px){html.sc .sc-logo span:not(.sc-logo-mark){display:none}}

/* ---------- Board toolbar (stylechess.js) ---------- */
html.sc .sc-moved{display:none!important}
html.sc #sc-toolbar{position:relative;z-index:7;width:100%;max-width:calc(var(--sc-board) + 14px);display:flex;align-items:stretch;gap:6px;padding:6px;margin:2px 0;background:var(--sc-panel);border:1px solid var(--sc-line);border-radius:12px;box-shadow:var(--sc-shadow)}
html.sc .sc-tb{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 6px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--sc-text);font:600 .8rem 'Inter',sans-serif;cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s,color .12s}
html.sc .sc-tb svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html.sc .sc-tb:hover:not(:disabled){background:var(--sc-panel2);border-color:var(--sc-line)}
html.sc .sc-tb:disabled{color:var(--sc-dim);cursor:not-allowed}
html.sc .sc-tb.primary{background:var(--sc-brand);color:var(--sc-brand-ink);flex:1.4}
html.sc .sc-tb.primary:hover{background:var(--sc-brand);filter:brightness(1.1)}
html.sc #sc-tb-threats.on{color:#1f6fe5;background:#e8f0fe}
html.sc[data-ui="dark"] #sc-tb-threats.on{color:#8db8ff;background:#172a4d}
html.sc #sc-tb-threats:not(.on) .sc-tb-l{text-decoration:line-through;text-decoration-color:var(--sc-dim)}
html.sc .sc-tb-sep{width:1px;background:var(--sc-line);margin:4px 2px;flex-shrink:0}
/* the toolbar takes a row of height in 2D, so give the board that much less; in 3D it sits in the tilt gap */
html.sc body{--sc-board:min(calc(100dvh - 318px),calc(100vw - 560px),900px)}
html.sc body.view-3d{--sc-board:min(calc(100dvh - 262px),calc(100vw - 560px),900px)}
@media(max-width:1100px){html.sc .sc-tb{padding:7px 4px;font-size:.74rem}}
@media(max-width:900px){
  html.sc body,html.sc body.view-3d{--sc-board:calc(100vw - 30px)}
  html.sc #sc-toolbar{gap:2px;padding:4px}
  html.sc .sc-tb{flex-direction:column;gap:2px;padding:5px 2px;font-size:.6rem}
  html.sc .sc-tb svg{width:19px;height:19px}
  html.sc .sc-tb.primary{flex:1.25}
  html.sc .sc-tb-sep{display:none}
  /* bottom bar keeps only what's not in the toolbar or the Draw/Resign bar */
  html.sc #mob-undo,html.sc #mob-new,html.sc #mob-online,html.sc #mob-draw,html.sc #mob-resign{display:none!important}
}
/* When the toolbar itself is narrow (smaller board), stack icon over label so nothing collides */
html.sc #sc-toolbar{container-type:inline-size}
@container (max-width:680px){
  html.sc .sc-tb{flex-direction:column;gap:2px;padding:5px 2px;font-size:.66rem}
  html.sc .sc-tb.primary{flex:1.25}
  html.sc .sc-tb-sep{display:none}
}
html.sc .sc-tb-s{display:none}
html.sc #sc-tb-threats:not(.on) .sc-tb-s{text-decoration:line-through;text-decoration-color:var(--sc-dim)}
@container (max-width:480px){
  html.sc .sc-tb-l{display:none}
  html.sc .sc-tb-s{display:inline}
}
@container (max-width:330px){html.sc .sc-tb{font-size:.58rem;padding:5px 1px}}
html.sc .score-card{font-weight:800;color:var(--sc-text)}
html.sc .score-card .sc-lead{color:var(--sc-up);font-family:'Inter',sans-serif}

/* ---------- Friend invite ---------- */
html.sc .sc-share-box{max-width:440px}
html.sc .sc-share-intro,html.sc .sc-share-wait{color:var(--sc-muted);font-size:.86rem;line-height:1.45;margin:0 0 12px}
html.sc .sc-share-wait{margin:12px 0 0;font-size:.78rem}
html.sc .sc-share-link{width:100%;padding:10px 12px;border:1px solid var(--sc-line);border-radius:8px;background:var(--sc-panel2);color:var(--sc-text);font:500 .85rem 'Inter',sans-serif;user-select:all}
html.sc .sc-share-actions{display:flex;gap:8px;margin-top:10px}
html.sc .sc-share-btn{flex:1;display:flex;align-items:center;justify-content:center;padding:11px 8px;border-radius:8px;border:1px solid var(--sc-line);background:var(--sc-panel);color:var(--sc-text);font:700 .85rem 'Inter',sans-serif;cursor:pointer;text-decoration:none}
html.sc .sc-share-btn:hover{border-color:var(--sc-brand);color:var(--sc-brand)}
html.sc .sc-share-btn.wa{background:#128c4a;border-color:#128c4a;color:#fff}
html.sc .sc-share-btn.wa:hover{filter:brightness(1.1);color:#fff}
html.sc .sc-share-cancel{display:block;width:100%;margin-top:8px;padding:8px;border:none;background:none;color:var(--sc-dn);font:600 .82rem 'Inter',sans-serif;cursor:pointer}
html.sc #sc-tb-friend{flex:1.35}
/* Notices float above the page so they are never cut off below the board */
html.sc #online-search-area{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);width:min(560px,calc(100vw - 24px));z-index:60;pointer-events:none}
html.sc #match-status{box-shadow:var(--sc-pop);animation:none;pointer-events:auto;background:var(--sc-panel);font-weight:600}