/* Visual system v2 — calm game-table UI. References: chess.com v4 (one dominant Play action, modes as rows),
   lichess mobile (UI tinted from the board, minimal chrome), Hearthstone/LoR (mode select → one CTA, ranked/casual later).
   Rules: flat solid surfaces, one accent (amber) for the primary action only, faction colours only for faction identity,
   Korean labels, 12px minimum text, 44px touch targets, line icons instead of decorative glyphs. */
:root{
 --bg:#121417;--surface:#1a1d22;--surface-2:#22262c;--surface-3:#2b3038;
 --border:#ffffff14;--border-strong:#ffffff26;
 --text:#ece8e1;--text-2:#c4c7cc;--text-3:#959aa2;
 --accent:#f2b543;--accent-hover:#f6c463;--accent-ink:#1c1505;--accent-soft:#f2b5431f;
 --chess:#ece8e1;--chess-soft:#ece8e11a;--janggi:#7ea6d8;--janggi-soft:#7ea6d81f;
 --danger:#ef5f57;--ok:#5fbf7c;
 --radius:4px;--radius-sm:3px;--cut:10px;
 --paper:var(--text);--gold:var(--accent);--muted:var(--text-2);--line:var(--border);--jade:var(--janggi);
 --font:'Pretendard Variable',Pretendard,system-ui,-apple-system,'Segoe UI','Noto Sans KR','Malgun Gothic',sans-serif;
 font-family:var(--font);
 font-feature-settings:'tnum' 0;
}
html,body{background:var(--bg);color:var(--text)}
/* Shape system v3: hairlines and 2-4px corners (lichess, Riot); only the primary action is cut. */
.turn-pill,.lobby,.preview-note>div,.board-controls,.selected-card,.op-card,.gallery-controls,dialog,.glass{border-radius:var(--radius)}
/* Pretendard everywhere: the legacy stylesheet pinned these to Georgia, serif or monospace. */
button,input,select,textarea,.cell,.faction>span,.faction.jade>span,.result-card>span,h1 em,.board-flavor span,.coords,#op-number,#ply-count,.world-nameplates,.nameplate-button,.tactical-legend,.selection-readout{font-family:var(--font)}
body{-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
.vignette,.board-flavor{display:none!important}
.icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
#i-play path{fill:currentColor}
button:hover:not(:disabled){background-color:#ffffff0d}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button:active:not(:disabled){transform:none;filter:brightness(.94)}
button:disabled{opacity:.4}
a{color:var(--accent)}
.glass{background:var(--surface);border:1px solid var(--border);box-shadow:none;backdrop-filter:none}

/* Top bar */
.topbar{height:60px;padding:0 20px;background:var(--bg);border-bottom:1px solid var(--border);gap:12px}
.brand{font-family:inherit;letter-spacing:-.02em;font-size:17px;font-weight:800;gap:10px;color:var(--text)}
.brand i{font-style:normal;font-weight:600;font-size:13px;color:var(--text-3);margin:0 2px}
.crest{width:32px;height:32px;border-radius:var(--radius);background:var(--accent);color:var(--accent-ink);font-size:22px;line-height:32px;display:inline-grid;place-items:center}
.top-actions{gap:8px;align-items:center}
.top-actions button{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text-2);font-size:13px;font-weight:600}
.top-actions span{color:inherit;font-size:13px}
.top-actions [aria-pressed=true]{color:var(--text)}
.top-actions [aria-pressed=false]{color:var(--text-3)}
.points-chip{color:var(--text)!important;font-variant-numeric:tabular-nums}
.points-chip b{font-size:14px}
.coin{width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:900;display:inline-grid;place-items:center}
body:not([data-screen=menu]) .points-chip{display:none}

/* Match bar (replaces the floating turn pill) */
.match-bar{position:fixed;z-index:14;top:72px;left:50%;transform:translateX(-50%);width:min(620px,calc(100% - 32px));display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:6px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
body[data-screen=menu] .match-bar,body[data-screen=gallery] .match-bar{display:none}
.seat{display:flex;align-items:center;gap:10px;min-width:0;padding:6px 10px;border-radius:var(--radius-sm);border:1px solid transparent;transition:background .2s,border-color .2s}
.seat-right{justify-content:flex-end;text-align:right}
.seat-mark{width:32px;height:32px;flex:none;border-radius:var(--radius);display:grid;place-items:center;font-size:19px;line-height:1}
#seat-chess .seat-mark{background:var(--chess-soft);color:var(--chess)}
#seat-janggi .seat-mark{background:var(--janggi-soft);color:var(--janggi);font-size:17px;font-weight:700}
.seat-text{display:flex;flex-direction:column;min-width:0}
.seat-text b{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat-text small{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-game-status=active][data-turn=chess] #seat-chess{background:var(--chess-soft);border-color:#eadfc840}
body[data-game-status=active][data-turn=janggi] #seat-janggi{background:var(--janggi-soft);border-color:#7ea6d850}
.match-center{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;max-width:200px;text-align:center}
#turn-title{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#ply-count{font:600 12px/1.3 inherit;font-family:inherit;color:var(--text-3);letter-spacing:0;margin:0;font-variant-numeric:tabular-nums}

/* Stage */
#stage{inset:136px 0 150px 0}
body[data-screen=menu] #stage{left:400px;top:60px;bottom:0}
body[data-screen=gallery] #stage{inset:60px 0 96px}
#loading{background:var(--bg)}
.loading-crown{color:var(--accent)!important;text-shadow:none!important}

/* Lobby */
.lobby{position:fixed;z-index:8;left:20px;top:80px;bottom:20px;width:360px;transform:none;padding:16px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);display:flex;flex-direction:column;gap:14px;overflow:auto;overscroll-behavior:contain}
.resume-banner{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:var(--radius);border:1px solid #f2b54355;background:var(--accent-soft);text-align:left;color:var(--text)}
.resume-text{flex:1;display:flex;flex-direction:column;gap:2px}
.resume-text b{font-size:14px}
.resume-text small{font-size:12px;color:var(--text-2)}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px #f2b54326}
.mode-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:0;border-radius:0;background:transparent;border:0;border-bottom:1px solid var(--border)}
.mode-tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:58px;border-radius:var(--radius-sm);font-size:13px;font-weight:700;color:var(--text-3)}
.mode-tabs button .icon{width:21px;height:21px}
.mode-tabs button{border-radius:0;background:transparent;box-shadow:inset 0 -2px 0 transparent}
.mode-tabs button[aria-selected=true]{background:transparent;color:var(--text);box-shadow:inset 0 -2px 0 var(--accent)}
.mode-panel{display:flex;flex-direction:column;gap:14px}
.mode-lead{margin:0;font-size:13px;line-height:1.5;color:var(--text-2)}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field-label{font-size:12px;font-weight:700;color:var(--text-3)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.factions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.faction{display:flex;align-items:center;gap:10px;min-height:60px;padding:8px 10px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-2);text-align:left}
.faction-mark{width:38px;height:38px;flex:none;border-radius:var(--radius);display:grid;place-items:center;font-size:23px;line-height:1;background:var(--chess-soft);color:var(--chess)}
.faction.jade .faction-mark{background:var(--janggi-soft);color:var(--janggi);font-size:20px;font-weight:700}
.faction-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.faction-text b{font-size:14px;font-weight:700;margin:0;color:var(--text)}
.faction-text small{font-size:12px;color:var(--text-3);white-space:nowrap}
.faction.chosen{border-color:var(--border-strong);background:#ece8e10d;box-shadow:inset 0 2px 0 var(--chess)}
.faction.jade.chosen{border-color:var(--border-strong);background:#7ea6d80f;box-shadow:inset 0 2px 0 var(--janggi)}
select{appearance:none;-webkit-appearance:none;width:100%;min-height:44px;padding:0 34px 0 12px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23b4b7bc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;color:var(--text);font-size:14px;font-weight:600}
select:disabled{opacity:.45}
.primary{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:52px;padding:0 18px;border:0;border-radius:var(--radius);background:var(--accent);color:var(--accent-ink);font-size:16px;font-weight:800;letter-spacing:-.01em;box-shadow:0 1px 0 #ffffff40 inset,0 6px 18px #f2b5432b}
.primary:hover:not(:disabled){background:var(--accent-hover)}
.primary:not(.small){border-radius:0;clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.primary span{font-size:inherit}
.primary .icon{width:18px;height:18px}
.primary.small{width:auto;min-height:40px;padding:0 14px;font-size:14px;box-shadow:none}
.secondary{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:46px;margin-top:10px;padding:0 14px;border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--surface-2);color:var(--text);font-size:14px;font-weight:600}
.multi-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-2)}
.multi-card.soon{opacity:.72}
.multi-icon{width:40px;height:40px;flex:none;border-radius:var(--radius);display:grid;place-items:center;background:var(--surface-3);color:var(--text-2)}
.multi-text{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.multi-text b{font-size:15px}
.multi-text small{font-size:12px;line-height:1.45;color:var(--text-3)}
.multi-slot{display:flex;align-items:center}
.multi-slot .online-open{margin:0}
.multi-slot:has(#online-open:not([hidden])) .badge{display:none}
.badge{flex:none;padding:5px 9px;border-radius:var(--radius);background:var(--surface-3);color:var(--text-2);font-size:12px;font-weight:700;white-space:nowrap}
.badge:empty{display:none}
.lobby-links{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lobby-links button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:62px;padding:6px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-2);color:var(--text-2);font-size:12px;font-weight:600}
.lobby-links button .icon{color:var(--text)}
.preview-note{top:76px;left:400px;right:20px}
.preview-note>div{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:none;backdrop-filter:none;padding:8px 14px;gap:10px}
.preview-note b{color:var(--accent);font-size:13px;letter-spacing:0;font-family:inherit}
.preview-note small{color:var(--text-2);font-size:13px}

/* In-game HUD */
.game-hud{bottom:84px;left:50%;right:auto;transform:translateX(-50%);width:min(720px,calc(100% - 32px));align-items:stretch;gap:8px}
.selected-card,.op-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:none;backdrop-filter:none}
.selected-card{flex:1;max-width:none;padding:10px 14px;gap:12px}
.selected-card>span{font-size:28px;color:var(--text);font-family:inherit;min-width:32px;text-align:center}
.small-label{font-size:12px;letter-spacing:0;color:var(--text-3);font-weight:600}
.selected-card b{font-size:15px;font-weight:700}
.selected-card p{font-size:13px;line-height:1.5;color:var(--text-2);margin:3px 0 0}
.op-card{display:flex;flex-direction:column;justify-content:center;padding:8px 14px;min-width:110px}
.op-card .small-label{font-size:12px}
.queen{color:var(--chess);font-size:20px}
#op-number{font-family:inherit;font-size:22px;font-weight:800;color:var(--text)}
#op-tokens{color:var(--accent);font-size:12px}
.op-card small{font-size:12px;color:var(--text-3)}
.bottom-bar{left:50%;right:auto;transform:translateX(-50%);width:min(720px,calc(100% - 32px));bottom:max(16px,env(safe-area-inset-bottom));flex-direction:row}
#notice{font-size:13px;color:var(--text-2);text-shadow:none;letter-spacing:0;line-height:1.5}
.board-controls{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:4px;gap:2px;backdrop-filter:none}
.board-controls button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:0 10px;border-radius:var(--radius-sm);color:var(--text);font-size:14px}
.board-controls span:not(.toolbar-divider){font-size:13px;color:var(--text-2);margin:0}
.board-controls #flat{font-size:13px;font-weight:800;letter-spacing:.02em}
.toolbar-divider{background:var(--border);height:24px}
body[data-screen=menu] .bottom-bar{left:calc(400px + (100% - 400px)/2);bottom:20px;width:auto}
body[data-screen=menu] #notice{display:none}
.threat{top:142px;border:1px solid #ef5f5780;background:#3a1716;color:#ffd2cc;font-size:14px;font-weight:600;border-radius:var(--radius);box-shadow:none}
.battle-banner small{font:700 13px/1 inherit;font-family:inherit;letter-spacing:0;color:var(--accent)}
.battle-banner h2{font-size:30px;font-weight:800;color:#fff;text-shadow:0 2px 12px #000c}
.battle-banner span{font-size:13px;letter-spacing:0;color:var(--text-2)}
#impact-flash{background:radial-gradient(ellipse,transparent 30%,#ffffff26)}

/* Gallery */
.gallery-title{top:80px;text-shadow:0 2px 10px #000a}
.gallery-title .small-label{font-size:13px;color:var(--accent);font-weight:700}
.gallery-title h2{font-size:30px;font-weight:800}
.gallery-title p{font-size:14px;color:var(--text-2)}
.gallery-controls{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:6px;gap:4px}
.gallery-controls button{min-height:44px;padding:0 12px;font-size:14px;font-weight:600;color:var(--text);border-radius:var(--radius-sm)}
.gallery-controls #gallery-prev,.gallery-controls #gallery-next{font:500 26px/1 inherit;font-family:inherit;min-width:44px;padding:0}
.gallery-controls select{min-width:150px}

/* Result */
.result-overlay{background:#0b0c0ecc;backdrop-filter:blur(2px)}
.result-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 24px 80px #000a;backdrop-filter:none}
.result-card>span{color:var(--accent)}
.result-card .eyebrow{font-size:13px;letter-spacing:0;color:var(--text-3);font-weight:700}
.result-card .eyebrow>span{display:none}
.result-card h2{font-size:26px;font-weight:800}
.result-card p{font-size:14px;color:var(--text-2);line-height:1.6}

/* Dialogs */
dialog{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 30px 90px #000b;padding:26px 24px}
dialog::backdrop{background:#0b0c0ecc}
dialog h2{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:0 0 14px}
dialog h3{font-size:15px;color:var(--text);font-weight:700}
dialog p{color:var(--text-2);font-size:14px;line-height:1.65}
.dialog-close{color:var(--text-2);font-size:26px;min-width:44px;min-height:44px;right:10px;top:10px;border-radius:var(--radius)}
.setting{font-size:15px;border-top:1px solid var(--border);min-height:56px;padding:8px 0}
.setting input[type=checkbox]{width:22px;height:22px;accent-color:var(--accent)}
.setting select{width:auto;min-width:140px}
.setting-help{font-size:13px;color:var(--text-3);line-height:1.6}
.classic{display:block;margin-top:16px;text-align:center;font-size:13px;color:var(--text-3)}
.build-label{display:block;text-align:center;margin-top:8px;font-size:12px;letter-spacing:0;color:var(--text-3);font-family:inherit}
.rule-sides h3{margin-top:0}
.rule-note{font-size:13px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--border);color:var(--text-2)}
.history-entry{font-size:14px;border-color:var(--border)}
.history-entry .n{color:var(--text-3)}
.history-entry.janggi .name{color:var(--janggi)}
.coords{font-family:inherit;color:var(--text-2);font-variant-numeric:tabular-nums}
.empty-history{color:var(--text-3)}

/* 2D board */
.flat-board{border-color:var(--surface-3);border-radius:var(--radius);box-shadow:0 10px 40px #0008}
.cell{font-family:'Pretendard Variable',serif}
.cell small{font-family:inherit;color:#26302ecc}

/* Neutralise legacy rules that targeted the old markup. */
.faction>span,.faction.jade>span{height:auto;line-height:1.25;font-size:inherit}
.faction>.faction-mark{font-size:23px;line-height:1}
.faction.jade>.faction-mark{font-size:20px}
.top-actions .coin{display:inline-grid!important}
.primary>span{font-size:inherit!important;font-weight:inherit}
.lobby h1,.lobby .eyebrow,.tagline,.divider,.win-summary,.setup-row,.starter-label{display:none}
.faction>.faction-mark{height:38px}
#start,#play-again{font-size:16px;margin:0;padding:0 18px}
#play-again{margin-top:4px}
body[data-lobby-mode=local] .field-row{grid-template-columns:1fr}
/* 2D board: keep both factions readable on light and dark squares. */
.cell.chess{color:#fffaf0;text-shadow:0 0 1px #2b1b0e,0 0 2px #2b1b0e,0 1px 2px #2b1b0ecc}
.cell.janggi{color:#1d2a40;text-shadow:0 0 1px #fffaf0,0 0 2px #fffaf0cc}
.cell small{color:#2a2015b3}
/* Gallery title sits on a surface so it reads over bright tiles. */
.gallery-title{background:#1a1d22e6;border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px;text-shadow:none}
.gallery-title h2{margin:2px 0 0}