/* Freebuff Chess — responsive product UI */
:root {
  color-scheme: dark;
  --bg: #101820;
  --surface: #17232b;
  --surface-raised: #1d2a32;
  --surface-hover: #26353e;
  --border: #2c3c45;
  --border-strong: #3a4d56;
  --text: #edf3ef;
  --muted: #9aada5;
  --accent: #8bc59e;
  --accent-strong: #a8d8b4;
  --accent-ink: #12251a;
  --green: #68b681;
  --red: #e2827f;
  --sq-light: #ead9bd;
  --sq-dark: #98704e;
  --pf: #f5f5f5;
  --pc: #232323;
  --radius: 14px;
  --piece-base: clamp(22px, 5.4vmin, 52px);
  --piece-scale: 1;
  --shadow: 0 24px 64px rgba(0, 0, 0, .28);
}
html[data-theme="ocean"] { --sq-light:#dce5e8; --sq-dark:#718c98; --pc:#22293a; }
html[data-theme="forest"] { --sq-light:#e8edcf; --sq-dark:#779455; --pc:#1f2b17; }
html[data-theme="midnight"] { --sq-light:#454b5e; --sq-dark:#292e3d; --pf:#c9cede; --pc:#12141c; }
html[data-theme="rosewood"] { --sq-light:#f0ded4; --sq-dark:#a56c68; --pc:#34212a; }
html[data-theme="slate"] { --sq-light:#dbe3e8; --sq-dark:#5e7487; --pc:#19222c; }
html[data-theme="lavender"] { --sq-light:#eee8f4; --sq-dark:#9183a5; --pc:#2c2338; }
html[data-theme="parchment"] { --sq-light:#f0e5ca; --sq-dark:#a98452; --pc:#342719; }
html[data-theme="cherry"] { --sq-light:#f0d6ce; --sq-dark:#a65358; --pc:#321d28; }
html[data-theme="arctic"] { --sq-light:#e3eff0; --sq-dark:#63899a; --pc:#1c303a; }
html[data-theme="carbon"] { --sq-light:#c5cbd0; --sq-dark:#48525a; --pc:#171c21; }
html[data-theme="amethyst"] { --sq-light:#ede4f3; --sq-dark:#89709e; --pc:#2c2037; }
html[data-theme="parchment"] .piece { --piece-accent:#bd9257; }
html[data-theme="cherry"] .piece { --piece-accent:#c77672; }
html[data-theme="arctic"] .piece { --piece-accent:#82b2c2; }
html[data-theme="carbon"] .piece { --piece-accent:#909ba4; }
html[data-theme="amethyst"] .piece { --piece-accent:#ae8cc8; }
* { box-sizing:border-box; }
body { margin:0; min-width:0; min-height:100vh; background:radial-gradient(ellipse at 42% -30%, #263a3d 0%, transparent 58%),var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
button,select,textarea,input { font:inherit; }
button { color:inherit; }
button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[role="gridcell"]:focus-visible { outline:3px solid var(--accent-strong); outline-offset:3px; }
.app-shell { max-width:1336px; padding:0 32px 36px; margin:0 auto; }
.topbar { height:76px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(164,190,177,.12); margin-bottom:28px; }
.brand { display:flex; align-items:center; gap:11px; color:var(--text); font-size:16px; font-weight:650; letter-spacing:-.3px; text-decoration:none; }
.brand b { color:var(--accent); font-weight:650; }
.brand-mark { display:grid; place-items:center; width:35px; height:35px; border-radius:11px; background:#263b36; color:var(--accent-strong); font-size:24px; }
.topbar-actions { display:flex; gap:8px; }
.icon-button,.action-button,.subtle-button,.text-button,.secondary-button,.dialog-x,.advanced-tools button { border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; transition:background .16s,border-color .16s,transform .12s; }
.icon-button { display:flex; align-items:center; gap:7px; min-height:38px; padding:0 12px; border-radius:10px; color:var(--muted); font-size:13px; }
.icon-button:hover,.action-button:hover:not(:disabled),.subtle-button:hover:not(:disabled),.secondary-button:hover,.advanced-tools button:hover { background:var(--surface-hover); border-color:var(--border-strong); color:var(--text); }
.game-layout { display:grid; grid-template-columns:minmax(0,680px) minmax(330px,380px); align-items:start; justify-content:center; gap:clamp(26px,5vw,68px); }
.site-footer { display:flex; align-items:center; justify-content:center; gap:5px; margin:18px auto 0; padding:8px 0; color:#71847b; font-size:10px; }
.site-footer strong { color:#9aada5; font:600 10px ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums; }
.play-area { min-width:0; width:100%; }
.player-card { display:flex; align-items:center; gap:12px; min-height:62px; padding:8px 12px; border:1px solid transparent; border-radius:12px; transition:border-color .16s,background .16s; }
.player-card.active { background:rgba(139,197,158,.08); border-color:rgba(139,197,158,.23); }
.opponent-card { margin-bottom:12px; }
.user-card { margin-top:12px; }
.avatar { display:grid; place-items:center; flex:0 0 40px; width:40px; height:40px; border-radius:12px; font-size:26px; }
.engine-avatar { color:#d5e2db; background:linear-gradient(145deg,#374b46,#202e2d); }
.user-avatar { color:#344438; background:linear-gradient(145deg,#d9e5d8,#aabda9); }
.player-copy { display:flex; flex:1; min-width:0; flex-direction:column; gap:3px; }
.player-copy strong { font-size:14px; font-weight:650; }
.player-copy span { color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.turn-pill { flex:none; border-radius:99px; padding:5px 9px; background:var(--surface-raised); color:var(--muted); font-size:10px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; }
.turn-pill.active { background:rgba(104,182,129,.16); color:#9bd2a9; }
#board { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:repeat(8,minmax(0,1fr)); width:100%; aspect-ratio:1; overflow:hidden; border:6px solid #27332f; border-radius:8px; box-shadow:var(--shadow),0 0 0 1px rgba(228,205,174,.08); touch-action:none; isolation:isolate; }
.board-row { display:grid; min-height:0; grid-template-columns:repeat(8,minmax(0,1fr)); grid-template-rows:minmax(0,1fr); }
.sq:focus-visible { z-index:4; outline:3px solid #123d2a; outline-offset:-4px; }
.sq { position:relative; display:flex; align-items:center; justify-content:center; min-width:0; min-height:0; cursor:default; }
.sq.light { background:var(--sq-light); }
.sq.dark { background:var(--sq-dark); }
.sq.clickable { cursor:pointer; }
.piece { position:relative; z-index:1; font-size:calc(var(--piece-base)*var(--piece-scale)); line-height:1; user-select:none; -webkit-user-select:none; pointer-events:none; }
.piece.w { color:#fbfbfb; text-shadow:0 1px 1px rgba(0,0,0,.8),0 0 2px rgba(0,0,0,.5); }
.piece.b { color:#23211f; text-shadow:0 1px 1px rgba(255,255,255,.28); }
.piece.set-tournament,.piece.set-solid,.piece.set-neo,.piece.set-outline,.piece.set-geometric,.piece.set-pixel,.piece.set-regal,.piece.set-merida,.piece.set-chessnut,.piece.set-fantasy { display:flex; align-items:center; justify-content:center; width:.95em; height:.95em; }
.piece img { display:block; width:100%; height:100%; }
.piece svg { display:block; width:100%; height:100%; filter:drop-shadow(0 1.5px 1px rgba(0,0,0,.35)); }
.piece.w.set-tournament svg,.piece.w.set-solid svg,.piece.w.set-neo svg,.piece.w.set-outline svg,.piece.w.set-geometric svg,.piece.w.set-pixel svg,.piece.w.set-regal svg { --pf:#f8f8f6; --pc:#2a2723; }
.piece.b.set-tournament svg,.piece.b.set-solid svg,.piece.b.set-neo svg,.piece.b.set-outline svg,.piece.b.set-geometric svg,.piece.b.set-pixel svg,.piece.b.set-regal svg { --pf:#35322f; --pc:#d8d5cf; }
.piece.set-outline svg { filter:drop-shadow(0 1px 1px rgba(0,0,0,.32)); }
html[data-theme="midnight"] .piece.w svg { --pf:#eceef4; --pc:#171a22; }
.piece.dragging { position:fixed; z-index:1000; pointer-events:none; transform:translate(-50%,-55%) scale(1.18); filter:drop-shadow(0 8px 14px rgba(0,0,0,.55)); }
.sq.last::before,.sq.selected::before,.sq.check::before,.sq.hint::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; }
.sq.last::before { background:rgba(255,213,64,.32); }
.sq.selected::before { background:rgba(119,178,255,.43); }
.sq.check::before { background:radial-gradient(circle,rgba(229,72,77,.88) 10%,rgba(229,72,77,.32) 48%,transparent 74%); }
.sq.hint::before { box-shadow:inset 0 0 0 4px var(--green); }
.sq.legal::after { content:""; position:absolute; z-index:2; width:25%; aspect-ratio:1; border-radius:50%; background:rgba(15,22,19,.35); pointer-events:none; }
.sq.legal.capture::after { width:86%; height:86%; border:4px solid rgba(15,22,19,.36); background:transparent; }
.coord { position:absolute; z-index:3; font-size:clamp(8px,1.3vmin,11px); font-weight:700; pointer-events:none; opacity:.78; }
.coord.file { right:4px; bottom:2px; }.coord.rank { left:4px; top:2px; }
.sq.light .coord { color:var(--sq-dark); }.sq.dark .coord { color:var(--sq-light); }
.game-panel { display:flex; min-width:0; flex-direction:column; gap:14px; padding:20px; border:1px solid rgba(164,190,177,.13); border-radius:18px; background:linear-gradient(160deg,rgba(29,42,50,.98),rgba(21,32,39,.98)); box-shadow:0 20px 50px rgba(0,0,0,.14); }
.game-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.eyebrow { margin:0 0 5px; color:#84a193; font-size:9px; font-weight:800; letter-spacing:.15em; }
h1,h2,h3,p { margin-top:0; }
.game-heading h1 { margin:0; font-size:19px; letter-spacing:-.5px; }
button { min-height:38px; border-radius:9px; padding:0 12px; font-size:12px; font-weight:600; }
button:disabled { opacity:.42; cursor:not-allowed; }
button:active:not(:disabled) { transform:translateY(1px); }
button.primary { border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); font-weight:750; }
button.primary:hover:not(:disabled) { background:var(--accent-strong); border-color:var(--accent-strong); }
.new-game-button { min-height:36px; padding:0 13px; white-space:nowrap; }
.status-card { display:flex; align-items:center; gap:10px; min-height:43px; padding:9px 11px; border:1px solid var(--border); border-radius:10px; background:rgba(10,18,22,.28); color:#d5e2db; font-size:12px; }
#thinking-dot { flex:none; width:8px; height:8px; border-radius:50%; background:var(--accent); opacity:0; }
#thinking-dot.on { opacity:1; animation:pulse 1s infinite ease-in-out; }
@keyframes pulse { 50% { transform:scale(1.5); opacity:.5; } }
.engine-line { padding:12px; border:1px solid rgba(139,197,158,.2); border-radius:11px; background:linear-gradient(145deg,rgba(139,197,158,.075),rgba(10,18,22,.22)); }
.engine-line[hidden] { display:none; }
.engine-title-row { display:flex; align-items:center; gap:7px; color:#dce9df; font-size:11px; }
.analysis-mark { color:var(--accent); font-size:15px; }
.live-indicator { display:inline-flex; align-items:center; gap:5px; margin-left:auto; color:#8dbb9a; font-size:8px; font-weight:800; letter-spacing:.1em; }
.live-indicator i { width:6px; height:6px; border-radius:50%; background:#78c18b; box-shadow:0 0 8px #78c18b; }
.engine-metrics { display:flex; align-items:center; gap:8px; margin:9px 0 5px 22px; color:var(--muted); font-size:10px; font-variant-numeric:tabular-nums; }
#el-eval { color:var(--accent-strong); font-weight:750; }
.eval-note { opacity:.65; }
.el-pv { display:flex; flex-direction:column; gap:3px; margin-left:22px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; line-height:1.55; color:var(--muted); }
.el-pv .pvline { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.el-pv .pvline.best { color:var(--text); }
.el-pv .pvtag { margin-right:5px; color:var(--accent); font-weight:800; }
.el-pv .mvnum { color:#86a093; }
.moves-section { min-width:0; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:8px; margin:2px 0 9px; }
.section-heading > div { display:flex; align-items:baseline; gap:8px; }
.section-heading h2 { margin:0; font-size:13px; font-weight:700; }
.section-heading span { color:var(--muted); font-size:10px; }
.move-shortcut { text-align:right; }
#movelist { max-height:220px; min-height:56px; overflow:auto; padding:5px; border:1px solid var(--border); border-radius:10px; background:rgba(9,16,20,.23); scrollbar-color:#465b53 transparent; }
#movelist table { width:100%; border-collapse:separate; border-spacing:0 2px; font-size:12px; }
#movelist tr { border-radius:6px; }
#movelist td { padding:5px 8px; }
#movelist td.num { width:38px; color:#789087; font-variant-numeric:tabular-nums; }
#movelist td.mv { width:40%; border-radius:5px; color:#dce6df; }
#movelist .move-cell { display:block; width:100%; min-height:29px; padding:2px 7px; border:0; border-radius:5px; background:transparent; color:inherit; text-align:left; font-size:12px; font-weight:550; cursor:pointer; }
#movelist .move-cell:hover { background:rgba(139,197,158,.1); }
#movelist .move-cell.current { background:rgba(139,197,158,.18); color:#c5ebce; }
#movelist .move-cell.review-current { outline:1px solid rgba(139,197,158,.65); outline-offset:-1px; }
#movelist .empty { padding:14px 8px; color:var(--muted); text-align:center; font-size:11px; }
.review-banner { display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; padding:7px 9px; border-radius:8px; background:rgba(220,174,98,.11); color:#e8c88e; font-size:10px; }
.review-banner[hidden] { display:none; }
.text-button { min-height:25px; padding:0 7px; border:0; background:transparent; color:#c6ddcb; font-size:10px; }
.review-controls { display:flex; justify-content:center; gap:8px; margin-top:7px; }
.subtle-button { min-height:27px; width:40px; padding:0; border-radius:7px; color:#b8c8c0; }
#captured { display:flex; flex-direction:column; gap:3px; min-height:0; color:var(--muted); font-size:12px; }
#captured:empty,#captured[hidden] { display:none; }
#captured .row { display:flex; align-items:center; min-height:16px; }
#captured .row b { width:48px; color:#869a90; font-size:10px; font-weight:650; }
#captured .cap-list { display:inline-flex; align-items:center; gap:1px; }
#captured .cap-pc { width:15px; height:15px; font-size:15px; }
#captured .cap-pc.set-classic { width:auto; height:auto; }
.quick-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.play-area>.quick-actions { margin-top:9px; }
.action-button { display:flex; align-items:center; justify-content:center; gap:6px; min-width:0; min-height:38px; padding:0 6px; border-radius:9px; color:#c5d2cb; font-size:12px; }
.action-button>span[aria-hidden="true"] { color:var(--accent); font-size:15px; }
.action-button.danger { color:#cf9c99; }.action-button.danger>span { color:#d78f8c; }
.advanced-tools { border-top:1px solid rgba(164,190,177,.12); padding-top:11px; }
.advanced-tools summary { display:flex; justify-content:space-between; color:#a6b8af; cursor:pointer; list-style:none; font-size:10px; font-weight:700; }
.panel-disclosure,.secondary-tools { border-top:1px solid rgba(164,190,177,.12); padding-top:10px; }
.panel-disclosure[hidden] { display:none; }
.panel-disclosure summary,.secondary-tools summary { display:flex; align-items:center; justify-content:space-between; gap:10px; color:#c7d6ce; cursor:pointer; list-style:none; font-size:12px; font-weight:650; }
.panel-disclosure summary::-webkit-details-marker,.secondary-tools summary::-webkit-details-marker { display:none; }
.disclosure-summary { overflow:hidden; color:var(--muted); font-size:11px; font-weight:450; text-overflow:ellipsis; white-space:nowrap; }
.secondary-tools { margin-top:2px; }
.secondary-tool-content { display:flex; flex-direction:column; gap:10px; padding-top:11px; }
.secondary-tool-content .advanced-tools { border-top:0; padding-top:0; }
.secondary-tool-content .aids-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
.advanced-tools summary::-webkit-details-marker { display:none; }
.advanced-tools[open] summary { margin-bottom:9px; }
.tool-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.advanced-tools button { min-height:33px; border-radius:8px; color:#b6c5bd; font-size:10px; }
dialog { width:min(440px,calc(100vw - 28px)); max-height:min(88vh,760px); overflow-y:auto; padding:23px; border:1px solid var(--border-strong); border-radius:18px; background:#1b292f; color:var(--text); box-shadow:0 30px 90px rgba(0,0,0,.58); }
dialog::backdrop { background:rgba(5,11,13,.72); backdrop-filter:blur(5px); }
.dialog-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.dialog-heading h2 { margin:0; font-size:21px; letter-spacing:-.5px; }
.dialog-heading .eyebrow { margin-bottom:5px; }
.dialog-x { width:32px; min-height:32px; padding:0; border-radius:9px; color:var(--muted); font-size:20px; }
dialog h3 { margin:18px 0 9px; color:#dce7df; font-size:12px; }
.setup-row { margin:0 0 17px; }.setup-row>label,.setup-label { display:block; margin-bottom:8px; color:var(--muted); font-size:12px; }
.setup-advanced { margin:0 0 8px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.setup-advanced summary { display:flex; justify-content:space-between; padding:10px 2px; color:#c6ddcb; cursor:pointer; font-size:12px; font-weight:650; list-style:none; }
.setup-advanced summary::-webkit-details-marker { display:none; }
.setup-advanced[open] summary { margin-bottom:12px; }
.setup-advanced-body { padding-bottom:2px; }
.color-choices { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.color-choices label { display:flex; min-height:77px; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:1px solid var(--border); border-radius:11px; background:var(--surface); cursor:pointer; font-size:27px; }
.color-choices label:hover { background:var(--surface-hover); }.color-choices input { position:absolute; opacity:0; pointer-events:none; }
.color-choices label:has(input:checked) { border-color:var(--accent); background:rgba(139,197,158,.12); }
.color-choices label:focus-within { outline:3px solid var(--accent-strong); outline-offset:3px; }
.color-choices .pick-name { color:var(--muted); font-size:10px; }
select,textarea { width:100%; border:1px solid var(--border); border-radius:9px; padding:10px 12px; background:#111c21; color:var(--text); font-size:12px; }
textarea { min-height:150px; resize:vertical; font-family:ui-monospace,monospace; }
.dialog-note { margin:8px 0 0; color:#b2c1b9; font-size:12px; line-height:1.5; }
.dialog-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:20px; }
.dialog-actions button { min-width:102px; }
.secondary-button { background:var(--surface-raised); }
.promotion-choices { display:flex; justify-content:center; gap:10px; }.promotion-choices button { display:grid; place-items:center; width:64px; height:68px; padding:8px; font-size:40px; }.promotion-choices button .piece { display:block; font-size:1em; }
.settings-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.settings-grid.themes { grid-template-columns:repeat(4,minmax(0,1fr)); }
.choice-card { display:flex; min-width:0; min-height:82px; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:8px 3px; border:1px solid var(--border); border-radius:10px; background:var(--surface); cursor:pointer; transition:background .15s,border-color .15s; }
.choice-card:hover { background:var(--surface-hover); }.choice-card:has(input:checked) { border-color:var(--accent); background:rgba(139,197,158,.1); }.choice-card input { position:absolute; opacity:0; pointer-events:none; }.choice-card:focus-within { outline:3px solid var(--accent-strong); outline-offset:2px; }
.choice-card .cc-label { color:#a9b9b0; font-size:12px; }.choice-card:has(input:checked) .cc-label { color:var(--text); }
.cc-pieces { display:flex; height:34px; align-items:flex-end; gap:2px; }.cc-pieces .piece { font-size:29px; }.cc-pieces .piece img,.cc-pieces .piece svg { width:29px; height:29px; }
.cc-board { display:grid; width:38px; height:38px; grid-template-columns:repeat(2,1fr); overflow:hidden; border-radius:6px; }.cc-board span:nth-child(1),.cc-board span:nth-child(4) { background:var(--t-light); }.cc-board span:nth-child(2),.cc-board span:nth-child(3) { background:var(--t-dark); }
.cc-board[data-design="grain"] span:nth-child(odd) { background-image:repeating-linear-gradient(0deg,transparent 0 5px,rgba(76,48,20,.12) 6px,transparent 7px); }
.cc-board[data-design="wood"] span:nth-child(even) { background-image:repeating-linear-gradient(90deg,transparent 0 6px,rgba(65,20,28,.12) 7px,transparent 8px); }
.cc-board[data-design="hatch"] span:nth-child(odd) { background-image:repeating-linear-gradient(135deg,transparent 0 5px,rgba(255,255,255,.2) 6px,transparent 7px); }
.cc-board[data-design="grid"] span:nth-child(odd) { background-image:linear-gradient(rgba(20,30,38,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(20,30,38,.12) 1px,transparent 1px); background-size:7px 7px; }
.cc-board[data-design="speckle"] span:nth-child(even) { background-image:radial-gradient(rgba(255,255,255,.25) 1px,transparent 1.5px); background-size:7px 7px; }
#board.theme-grain .sq { background-image:repeating-linear-gradient(0deg,transparent 0 12px,rgba(76,48,20,.055) 13px,transparent 14px); }
#board.theme-wood .sq { background-image:repeating-linear-gradient(90deg,transparent 0 17px,rgba(65,20,28,.045) 18px,transparent 19px); }
#board.theme-hatch .sq { background-image:repeating-linear-gradient(135deg,transparent 0 9px,rgba(255,255,255,.065) 10px,transparent 11px); }
#board.theme-grid .sq { background-image:linear-gradient(rgba(20,30,38,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(20,30,38,.055) 1px,transparent 1px); background-size:12px 12px; }
#board.theme-speckle .sq { background-image:radial-gradient(rgba(255,255,255,.1) .8px,transparent 1.2px); background-size:9px 9px; }
.size-setting { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:20px; padding-top:16px; border-top:1px solid var(--border); }.size-setting>div:first-child { display:flex; flex-direction:column; gap:4px; }.size-setting label { font-size:12px; font-weight:650; }.size-setting>div:first-child span { color:var(--muted); font-size:9px; }
.size-row { display:flex; align-items:center; gap:7px; }.size-row input[type="range"] { width:100px; accent-color:var(--accent); }.size-hint { color:var(--muted); font-size:11px; opacity:.7; }.size-hint.large { font-size:18px; opacity:1; }.size-row output { min-width:38px; color:#c4d3ca; text-align:right; font-size:10px; font-variant-numeric:tabular-nums; }
#toast { position:fixed; z-index:2000; bottom:24px; left:50%; max-width:calc(100vw - 32px); padding:10px 16px; transform:translate(-50%,16px); border:1px solid var(--border-strong); border-radius:10px; background:#26363b; color:var(--text); box-shadow:0 12px 40px rgba(0,0,0,.3); font-size:12px; opacity:0; pointer-events:none; transition:opacity .18s,transform .18s; }
#toast.show { transform:translate(-50%,0); opacity:1; }#toast.error { border-color:var(--red); }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; }
@media (min-width:1100px) { .game-panel { position:sticky; top:24px; } }
@media (max-width:900px) { .app-shell { max-width:720px; padding:0 22px 28px; }.topbar { margin-bottom:16px; }.game-layout { grid-template-columns:minmax(0,1fr); gap:13px; }.play-area { max-width:620px; margin:0 auto; }.game-panel { width:100%; max-width:620px; margin:0 auto; padding:16px; }.player-card { min-height:52px; }.opponent-card { margin-bottom:6px; }.user-card { margin-top:6px; }#movelist { max-height:200px; } }
@media (max-width:520px) { .app-shell { width:100%; min-width:0; padding:0 12px calc(20px + env(safe-area-inset-bottom)); }.topbar { height:58px; margin-bottom:8px; }.brand { gap:8px; font-size:14px; }.brand-mark { width:31px; height:31px; font-size:22px; }.topbar-actions { gap:5px; }.icon-button { min-width:34px; min-height:34px; padding:0 8px; justify-content:center; }.icon-button span { display:none; }.game-layout { min-width:0; gap:7px; }.play-area { max-width:480px; }.player-card { min-width:0; min-height:44px; padding:4px 6px; gap:9px; }.avatar { width:33px; height:33px; flex-basis:33px; border-radius:10px; font-size:22px; }.player-copy strong { font-size:12px; }.player-copy span { font-size:10px; }.turn-pill { padding:4px 7px; font-size:8px; }.opponent-card { margin-bottom:4px; }.user-card { margin-top:4px; }#board { border-width:4px; }.quick-actions { gap:6px; margin-top:7px; }.action-button { min-height:44px; gap:4px; padding:0 3px; font-size:10px; }.action-button>span[aria-hidden="true"] { font-size:14px; }.game-panel { gap:10px; padding:13px; border-radius:14px; }.game-heading h1 { font-size:16px; }.eyebrow { font-size:8px; }.status-card { min-height:37px; font-size:11px; }.engine-line { padding:9px; }.el-pv { font-size:10px; }.engine-metrics { font-size:9px; }.section-heading { margin:0 0 6px; }.move-shortcut { max-width:105px; font-size:9px!important; }.advanced-tools { padding-top:9px; }.review-controls { margin-top:5px; }.settings-grid { gap:6px; }.choice-card { min-height:72px; }.settings-grid.themes { grid-template-columns:repeat(4,minmax(0,1fr)); }.cc-pieces .piece { font-size:25px; }.cc-pieces .piece img,.cc-pieces .piece svg { width:25px; height:25px; }.size-setting { align-items:flex-start; flex-direction:column; gap:10px; }.size-row { width:100%; }.size-row input[type="range"] { flex:1; }.dialog-actions { padding-bottom:env(safe-area-inset-bottom); }.dialog-actions button { flex:1; } }
@media (max-width:380px) { .app-shell { padding-right:8px; padding-left:8px; }.topbar { gap:6px; }.brand { gap:6px; font-size:13px; }.brand-mark { width:29px; height:29px; flex-basis:29px; font-size:20px; }.topbar-actions { gap:4px; }.icon-button { min-width:31px; min-height:32px; padding:0 6px; }.play-area,.game-panel { width:100%; }.game-panel { padding:10px; }.player-card { gap:6px; }.turn-pill { padding:4px 6px; letter-spacing:.02em; }.action-button { font-size:9px; }.player-copy span { max-width:165px; }dialog { width:calc(100vw - 20px); max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding:17px; }.dialog-heading { margin-bottom:13px; }.mode-choices { gap:5px; }.mode-choices label { min-height:42px; font-size:10px; }.setup-row { margin-bottom:12px; }.color-choices label { min-height:64px; }.strength-note { display:none; } }
@media (max-width:340px) { .app-shell { padding-right:6px; padding-left:6px; }.topbar-actions { gap:3px; }.icon-button { min-width:29px; padding:0 5px; }.brand { font-size:12px; }.brand-mark { width:27px; height:27px; flex-basis:27px; }.turn-pill { font-size:7px; }.status-card { padding:8px; }.mode-choices label { font-size:9px; } }
#setup-dialog .dialog-actions { position:sticky; bottom:-17px; margin-top:12px; padding:12px 0 0; background:linear-gradient(180deg,transparent 0,#1b292f 14px); }

/* Functional text stays readable; only notation and decorative micro-labels stay compact. */
.text-button { min-height:32px; font-size:12px; }
.report-button { min-height:32px; font-size:12px; }
.review-controls .subtle-button { min-height:36px; }
.section-heading span { font-size:11px; }
#movelist .empty { font-size:12px; }
.advanced-tools button { min-height:38px; font-size:12px; }
.color-choices .pick-name { font-size:12px; }
.size-setting>div:first-child span { color:#b2c1b9; font-size:12px; }
.size-row output { font-size:12px; }
.engine-metrics { font-size:11px; }
.eval-note { opacity:.82; }
.duel-prompt .duel-ask,.duel-score,.story-list li,.report-status { font-size:12px; }
@media (max-width:520px) {
  .player-copy span { font-size:12px; }
  .turn-pill { font-size:10px; }
  .action-button { font-size:12px; }
  .game-panel .aid-button { font-size:12px; }
  .status-card { font-size:12px; }
  .move-shortcut { font-size:11px!important; }
  .engine-metrics,.el-pv { font-size:11px; }
  .book-move { font-size:12px; }
  .review-banner { font-size:12px; }
  .hint-stage { font-size:12px; }
  .hint-stage b,.hint-stage button { font-size:11px; }
  .games-list .game-meta,.game-item .game-actions button { font-size:11px; }
}
@media (max-width:380px) {
  .action-button,.game-panel .aid-button { font-size:11px; }
}
@media (max-width:360px) { .app-shell { padding-right:8px; padding-left:8px; }.game-panel { padding:10px; }.action-button { font-size:9px; }.player-copy span { max-width:165px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }

/* ── Opening name, move grades, explore banner ─────────────────── */
.install-button { color:#bfe4c8; border-color:rgba(139,197,158,.4); background:rgba(139,197,158,.12); }
.moves-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:-3px 0 8px; }
.opening-name { overflow:hidden; color:#a8bfb2; font-size:10px; font-weight:600; letter-spacing:.02em; text-overflow:ellipsis; white-space:nowrap; }
.opening-name[hidden] { display:none; }
.report-button { flex:none; min-height:25px; border:1px solid var(--border); background:var(--surface); color:#c6ddcb; font-size:10px; }
.report-button:hover:not(:disabled) { background:var(--surface-hover); border-color:var(--border-strong); }
.banner-actions { display:flex; flex:none; gap:4px; }
.explore-banner { display:flex; align-items:center; justify-content:space-between; gap:9px; margin-bottom:7px; padding:7px 9px; border:1px solid rgba(139,197,158,.3); border-radius:8px; background:rgba(139,197,158,.09); }
.explore-banner[hidden] { display:none; }
.explore-copy { display:flex; min-width:0; flex-direction:column; gap:3px; }
#explore-label { color:#c9e7d1; font-size:10px; font-weight:700; }
.explore-moves { overflow:hidden; color:#9fc3aa; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
#movelist .move-cell.graded { display:flex; align-items:center; justify-content:space-between; gap:5px; }
#movelist .move-cell.grade-inaccuracy { color:#ddc88b; }
#movelist .move-cell.grade-mistake { color:#e5ab6b; }
#movelist .move-cell.grade-blunder { color:#efa39f; background:rgba(226,130,127,.09); }
#movelist .move-cell.grade-best { color:#c5ebce; }
#movelist .grade-mark { flex:none; font-size:11px; font-weight:800; opacity:.92; }

/* ── Opening card ─────────────────────────────────────────────── */
.moves-meta { justify-content:flex-end; }
.opening-card { display:flex; flex-direction:column; gap:8px; padding:11px 12px; border:1px solid rgba(164,190,177,.15); border-radius:11px; background:rgba(9,16,20,.24); }
.opening-card[hidden] { display:none; }
.opening-head { display:flex; align-items:center; gap:9px; }
.opening-mark { flex:none; display:grid; place-items:center; width:26px; height:26px; border-radius:8px; background:rgba(139,197,158,.13); color:var(--accent-strong); font-size:16px; }
.opening-copy { display:flex; min-width:0; flex-direction:column; gap:2px; }
.opening-copy strong { overflow:hidden; color:#dce9df; font-size:12px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.opening-line { overflow:hidden; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.opening-next { display:flex; flex-wrap:wrap; gap:5px; }
.book-move { display:inline-flex; align-items:center; gap:6px; min-height:27px; padding:0 8px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--muted); font-size:10px; cursor:pointer; }
.book-move:hover:not(:disabled) { background:var(--surface-hover); border-color:var(--border-strong); color:var(--text); }
.book-move:disabled { opacity:.62; cursor:default; }
.book-move b { color:var(--accent-strong); font-size:11px; font-weight:750; }
.opening-note { margin:0; color:#a5b8ad; font-size:12px; line-height:1.5; }
.pvflag { margin-right:7px; border-radius:5px; padding:1px 5px; font-size:8px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.pvflag.book { background:rgba(104,182,129,.18); color:#9bd2a9; }
.pvflag.novel { background:rgba(220,174,98,.16); color:#e0bd83; }
.pvflag.out { background:rgba(255,255,255,.08); color:#9aada5; }

/* ── Playing aids ─────────────────────────────────────────────── */
.aids-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.aid-button { display:flex; align-items:center; justify-content:center; gap:5px; min-width:0; min-height:38px; padding:0 7px; border:1px solid var(--border); border-radius:9px; background:var(--surface); color:#c3d1c9; font-size:12px; font-weight:600; cursor:pointer; }
.aid-button>span { color:var(--accent); font-size:12px; }
.aid-button:hover { background:var(--surface-hover); border-color:var(--border-strong); color:var(--text); }
.aid-button[aria-pressed="true"] { border-color:var(--accent); background:rgba(139,197,158,.14); color:var(--text); }
.aid-button[aria-pressed="true"]>span { color:var(--accent-strong); }
#board.theme-grain .sq.last::before,#board.theme-wood .sq.last::before,#board.theme-hatch .sq.last::before,#board.theme-grid .sq.last::before,#board.theme-speckle .sq.last::before { background-blend-mode:multiply; }
#board.blindfold .sq .coord { opacity:1; font-size:clamp(10px,1.9vmin,15px); font-weight:800; }
#board.blindfold .sq.light .coord { color:#3c2c1c; }
#board.blindfold .sq.dark .coord { color:#f2e4cf; }
#board.blindfold .sq.legal::after { background:rgba(15,22,19,.5); }

/* ── Saved games archive ───────────────────────────────────────── */
.games-stats { margin:0 0 12px; color:#c9d8d0; font-size:11px; }
.games-list { display:flex; max-height:330px; flex-direction:column; gap:6px; margin:0 0 4px; padding:2px; overflow:auto; list-style:none; scrollbar-color:#465b53 transparent; }
.games-list .game-item { display:flex; align-items:center; gap:10px; padding:8px 9px; border:1px solid var(--border); border-radius:10px; background:rgba(9,16,20,.28); }
.game-item .game-result { flex:none; width:44px; border-radius:7px; padding:4px 0; background:var(--surface-raised); color:var(--muted); font-size:10px; font-weight:750; text-align:center; text-transform:uppercase; letter-spacing:.04em; }
.game-item .game-result.win { background:rgba(104,182,129,.2); color:#9bd2a9; }
.game-item .game-result.loss { background:rgba(226,130,127,.16); color:#efa39f; }
.game-item .game-copy { display:flex; min-width:0; flex:1; flex-direction:column; gap:2px; }
.game-item .game-title { overflow:hidden; font-size:12px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.game-item .game-meta { overflow:hidden; color:var(--muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.game-item .game-actions { display:flex; flex:none; gap:4px; }
.game-item .game-actions button { min-height:27px; padding:0 8px; font-size:10px; }
.games-list .empty { padding:18px 8px; color:var(--muted); font-size:11px; text-align:center; }
.games-openings[hidden] { display:none; }
.games-openings h3 { margin:16px 0 8px; }
.opening-stats { display:flex; flex-direction:column; gap:4px; margin:0; padding:0; list-style:none; }
.opening-stats li { display:flex; align-items:center; gap:8px; padding:5px 9px; border:1px solid var(--border); border-radius:8px; background:rgba(9,16,20,.24); font-size:11px; }
.opening-name-cell { flex:1; min-width:0; overflow:hidden; color:#d3e0d8; text-overflow:ellipsis; white-space:nowrap; }
.opening-record { flex:none; color:var(--muted); font-size:10px; font-variant-numeric:tabular-nums; }
.opening-accuracy { flex:none; width:38px; color:var(--accent-strong); font-size:10px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }

/* ── Game report card ──────────────────────────────────────────── */
.report-status { margin:0; color:var(--muted); font-size:12px; }
.report-status.error { color:var(--red); }

/* ── Clocks, mode chip, coach, duel, share ───────────────────── */
.clock { flex:none; border:1px solid var(--border); border-radius:9px; padding:5px 9px; background:rgba(8,15,18,.5); color:#d5e2db; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
.clock.running { border-color:var(--accent); color:var(--accent-strong); }
.clock.low { border-color:var(--red); color:#f2a9a4; }
.clock[hidden] { display:none; }
.mode-chip { flex:none; border-radius:99px; padding:4px 9px; background:rgba(139,197,158,.14); color:#9bd2a9; font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; margin-left:auto; }
.mode-chip[hidden] { display:none; }
.coach-line { display:flex; gap:8px; align-items:baseline; margin:10px 0 0; padding:8px 11px; border:1px solid rgba(220,174,98,.3); border-radius:9px; background:rgba(220,174,98,.07); color:#e0bd83; font-size:12px; }
.coach-line b { flex:none; color:#e5ab6b; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.coach-line[hidden] { display:none; }
.hint-stage { display:flex; align-items:center; gap:8px; margin-top:9px; padding:8px 11px; border:1px solid rgba(139,197,158,.3); border-radius:9px; background:rgba(139,197,158,.08); color:#c9e7d1; font-size:11px; }
.hint-stage b { color:var(--accent-strong); font-size:9px; letter-spacing:.06em; text-transform:uppercase; }
.hint-stage button { margin-left:auto; min-height:24px; padding:0 8px; font-size:9px; }
.hint-stage[hidden] { display:none; }
.mode-choices { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.mode-choices label { display:flex; min-height:46px; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:10px; background:var(--surface); cursor:pointer; font-size:11px; font-weight:600; }
.mode-choices label:hover { background:var(--surface-hover); }
.mode-choices input { position:absolute; opacity:0; pointer-events:none; }
.mode-choices label:has(input:checked) { border-color:var(--accent); background:rgba(139,197,158,.12); }
.mode-choices label:focus-within { outline:3px solid var(--accent-strong); outline-offset:2px; }
.duel-prompt { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; padding:9px 11px; border:1px solid rgba(220,174,98,.35); border-radius:9px; background:rgba(220,174,98,.08); }
.duel-prompt[hidden] { display:none; }
.duel-prompt .duel-ask { color:#e0bd83; font-size:11px; font-weight:700; }
.duel-score { display:flex; align-items:center; gap:8px; margin-bottom:8px; padding:7px 11px; border:1px solid var(--border); border-radius:9px; background:rgba(9,16,20,.28); font-size:11px; }
.duel-score[hidden] { display:none; }
.duel-score b { font-variant-numeric:tabular-nums; }
.duel-score .duel-vs { color:var(--muted); font-size:10px; }
.duel-pick { display:flex; min-height:30px; flex:1; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; font-weight:700; cursor:pointer; }
.duel-pick:hover { background:var(--surface-hover); border-color:var(--border-strong); }
.duel-predict-row { margin-top:2px; }
.predict-toggle { display:flex; align-items:center; gap:9px; padding:9px 11px; border:1px solid var(--border); border-radius:9px; background:rgba(9,16,20,.28); color:var(--text); font-size:12px; font-weight:600; cursor:pointer; }
.predict-toggle input { width:15px; height:15px; accent-color:var(--accent); }
.predict-toggle span { color:#d3e0d8; }
.story-list { display:flex; flex-direction:column; gap:6px; margin:0; padding:0; list-style:none; }
.story-list li { padding:8px 11px; border:1px solid var(--border); border-radius:8px; background:rgba(9,16,20,.28); color:#d3e0d8; font-size:11px; line-height:1.5; }
.drill-chip { display:inline-flex; align-items:center; gap:5px; border-radius:99px; padding:3px 9px; background:rgba(220,174,98,.14); color:#e0bd83; font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.drill-chip.warn { background:rgba(226,130,127,.16); color:#efa39f; }
.share-button { border-color:rgba(139,197,158,.4); color:#bfe4c8; }

/* ── Saved games archive ───────────────────────────────────────── */
.report-bar { height:6px; margin:12px 0; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.08); }
.report-bar>i { display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-strong)); transition:width .2s; }
.report-score { display:flex; align-items:baseline; gap:10px; margin:2px 0 14px; }
.report-score strong { color:var(--accent-strong); font-size:38px; font-weight:750; letter-spacing:-1.5px; font-variant-numeric:tabular-nums; }
.report-score span { color:var(--muted); font-size:11px; }
.report-chips { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; margin-bottom:16px; }
.report-chip { display:flex; flex-direction:column; align-items:center; gap:2px; padding:7px 3px; border:1px solid var(--border); border-radius:9px; background:rgba(9,16,20,.28); color:var(--muted); font-size:9px; text-align:center; }
.report-chip b { font-size:15px; font-weight:750; font-variant-numeric:tabular-nums; }
.report-chip.chip-best b { color:var(--accent-strong); }
.report-chip.chip-inaccuracy b { color:#ddc88b; }
.report-chip.chip-mistake b { color:#e5ab6b; }
.report-chip.chip-blunder b { color:#efa39f; }
.eval-curve { display:block; width:100%; height:auto; border:1px solid var(--border); border-radius:10px; background:linear-gradient(180deg,rgba(139,197,158,.07),rgba(10,18,22,.35)); }
.curve-line { fill:none; stroke:var(--accent-strong); stroke-width:1.6; }
.curve-area { fill:rgba(139,197,158,.14); stroke:none; }
.curve-mid { stroke:rgba(255,255,255,.22); stroke-dasharray:3 4; stroke-width:1; }
.curve-mark { fill:#e2827f; }
.curve-label { fill:#82998e; font-size:8px; }
.report-caption { margin:7px 0 0; color:var(--muted); font-size:9px; }
#report-dialog h3 { margin:16px 0 8px; }
.report-notable { display:flex; flex-direction:column; gap:5px; margin:0; padding:0; list-style:none; }
.notable-move { display:flex; align-items:center; gap:9px; width:100%; min-height:31px; padding:5px 9px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); text-align:left; cursor:pointer; }
.notable-move:hover { background:var(--surface-hover); border-color:var(--border-strong); }
.notable-mark { flex:none; width:20px; font-size:12px; font-weight:800; text-align:center; }
.notable-mark.grade-blunder { color:#efa39f; }
.notable-mark.grade-mistake { color:#e5ab6b; }
.notable-mark.grade-inaccuracy { color:#ddc88b; }
.notable-text { font-size:11px; }
@media (max-width:520px) { .report-chips { grid-template-columns:repeat(3,minmax(0,1fr)); }.report-score strong { font-size:31px; }.moves-meta { margin:-4px 0 6px; }.opening-card { padding:9px; gap:7px; }.book-move { font-size:11px; }.explore-moves { max-width:170px; }.banner-actions { gap:2px; }.aids-row { grid-template-columns:repeat(2,minmax(0,1fr)); }.games-list { max-height:260px; }.games-list .game-item { flex-wrap:wrap; } }
@media (max-width:380px) { .action-button { font-size:11px; }.game-panel .aid-button { font-size:11px; } }