/* Semantic surfaces keep every screen, modal and game state in the selected palette. */
html[data-appearance]{color-scheme:light;--shadow:0 14px 42px #00000012}
html[data-appearance][data-theme=dark]{color-scheme:dark;--shadow:0 14px 42px #00000028}
body{background:var(--cream);color:var(--ink)}
[data-appearance] .sidebar{background:var(--sidebar-bg);color:#c5d2e4}
[data-appearance] .brand,[data-appearance] .sidebar .nav-item{color:#d9e4f3}
[data-appearance] .brand-dot,[data-appearance] .intro em{color:var(--accent)}
[data-appearance] .sidebar .nav-item.active{background:color-mix(in srgb,var(--accent) 20%,transparent);color:#fff;border-color:var(--accent)}
[data-appearance] .club-card{background:color-mix(in srgb,var(--accent) 10%,var(--sidebar-bg));border:1px solid color-mix(in srgb,var(--accent) 25%,transparent)}
[data-appearance] .club-card h3{color:#f0f5fc}
[data-appearance] .club-card p,[data-appearance] .club-card .eyebrow,[data-appearance] .sidebar-label,[data-appearance] .sidebar-footer{color:#abbcd1}
[data-appearance] .club-card button{color:var(--accent);background:transparent}
[data-appearance] .brand-mark,[data-appearance] .profile-button>span:first-child,[data-appearance] .self-avatar{background:var(--surface);color:var(--accent)}
[data-appearance] .panel,[data-appearance] .modal-content,[data-appearance] .finish-card{background:var(--paper);color:var(--ink);border-color:var(--line)}
[data-appearance] :is(.breadcrumb strong,.profile-button,.panel-heading h2,.feature-name,.player-name,.finish-card h2,.modal-title,.learn-card h3,.history-result,.coach-content h3){color:var(--ink)}
[data-appearance] :is(.intro p,.player-subtitle,.field-hint,.field-label,.field-label label,.thought-card p,.thought-card .eyebrow,.page-footer,.page-footer button,.overline,.board-status,.board-bottom-note,.setup-footnote,.panel-signoff,.panel-signoff span,.feature-kicker,.opponent-feature p,.replay-label,.moves-header,.empty-moves,.text-button,.game-actions button,.export-button,.agent-disclosure,.friend-step,.friend-description p,.invite-box p,.invite-box small,.analysis-eval small,#coach-content p,#eval-line){color:var(--muted)}
[data-appearance] :is(.mode-tabs,.side-options,.opponent-feature,.opponent-feature.agent,.opponent-feature.online,.thought-card,.analysis-eval,.invite-box,.draw-alert,.move-row:nth-child(odd)){background:var(--surface);border-color:var(--line)}
[data-appearance] :is(.mode-tab,.difficulty-options button,.side-options button,.move-row button){color:var(--muted)}
[data-appearance] :is(.mode-tab.active,.difficulty-options button.active,.side-options button.active,.move-row button.active){background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
[data-appearance] .level-bars i{background:currentColor}
[data-appearance] :is(.primary-button,.new-game-button){background:var(--accent);color:var(--accent-ink);border-color:var(--accent);box-shadow:0 5px 20px color-mix(in srgb,var(--accent) 15%,transparent)}
[data-appearance] :is(.primary-button:hover,.primary-button:active,.new-game-button:hover){background:color-mix(in srgb,var(--accent) 85%,var(--ink))!important;color:var(--accent-ink)!important}
[data-appearance] :is(.secondary-button,.promotion-options button,.thought-icon,.opponent-avatar,.live-tabs button>span){background:var(--surface);color:var(--accent);border-color:var(--line)}
[data-appearance] :is(.icon-button,.icon-button:hover,.live-tabs .active,.analysis-eval strong,.about-content a,.heading-spark){color:var(--accent)}
[data-appearance] :is(.form-control,.form-select){background-color:var(--paper);color:var(--ink);border-color:var(--line)}
[data-appearance] .form-control::placeholder{color:var(--muted)}
[data-appearance] .clock{background:var(--surface);color:var(--ink);border-color:var(--line)}
[data-appearance] .clock.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
[data-appearance] .clock.low{background:#9f343e;color:#fff;border-color:#ef818a}
[data-appearance] .board-frame{background:var(--surface);box-shadow:0 5px 0 var(--line),0 14px 35px #0003}
[data-appearance] .square{background:var(--light-square)}
[data-appearance] .square.dark{background:var(--dark-square)}
[data-appearance] .square.last{background:color-mix(in srgb,var(--light-square) 67%,var(--accent))}
[data-appearance] .square.dark.last{background:color-mix(in srgb,var(--dark-square) 65%,var(--accent))}
[data-appearance] .square.selected{box-shadow:inset 0 0 0 4px var(--accent);background:color-mix(in srgb,var(--light-square) 55%,var(--accent))}
[data-appearance] .square.checked{background:#ce6370}
[data-appearance] .coord{color:#263a4c}
[data-appearance] .square.dark .coord{color:#fff}
[data-appearance] .notice{background:var(--paper);color:var(--ink);border-color:var(--accent)}
[data-appearance] .notice.error{background:#592833;color:#fff;border-color:#ed879a}
[data-appearance] .local-badge{background:var(--surface);color:var(--ink)}
[data-appearance] .live-tabs .active::after{background:var(--accent)}
[data-appearance] .export-button{border-color:var(--line)}
[data-appearance] :focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.appearance-button{display:inline-flex;align-items:center;gap:7px;min-width:105px;max-width:150px;border:1px solid var(--line);background:var(--paper);border-radius:9px;padding:8px 11px;font-size:10px;font-weight:700;color:var(--ink);height:36px}
.appearance-button .icon{width:16px;height:16px;color:var(--accent)}
.appearance-dialog{width:min(740px,calc(100vw - 30px));max-height:calc(100dvh - 40px);padding:28px;border:1px solid var(--line);border-radius:20px;background:var(--paper);color:var(--ink);box-shadow:0 30px 100px #0006;overflow:auto}
.appearance-dialog::backdrop{background:#050b1699;backdrop-filter:blur(7px)}
.appearance-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}
.appearance-dialog h2{font-size:27px;font-weight:800;letter-spacing:-1px;margin:7px 0 9px}
.appearance-dialog p{color:var(--muted);font-size:12px;line-height:1.7}
.appearance-eyebrow{font-size:9px;letter-spacing:2px;font-weight:800;color:var(--accent)}
.appearance-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px}
.palette-card{text-align:left;padding:9px 9px 13px;background:var(--cream);color:var(--ink);border:2px solid var(--line);border-radius:12px;transition:transform .15s,border-color .15s}
.palette-card:hover{transform:translateY(-2px);border-color:var(--accent)}
.palette-card[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 15%,transparent)}
.palette-preview{height:76px;display:grid;grid-template-columns:12px 70px 1fr;gap:10px;background:var(--preview-bg);padding:9px;border-radius:6px;overflow:hidden}
.preview-rail{background:var(--preview-accent);border-radius:3px;opacity:.75}
.preview-board{background:conic-gradient(var(--preview-light) 25%,var(--preview-dark) 0 50%,var(--preview-light) 0 75%,var(--preview-dark) 0);background-size:25% 25%;border-radius:3px}
.preview-panel{background:linear-gradient(var(--preview-accent) 0 12%,transparent 12% 22%,var(--preview-panel) 22% 70%,transparent 70% 80%,var(--preview-accent) 80%);border-radius:3px;opacity:.9}
.palette-name{display:flex;justify-content:space-between;padding:11px 3px 3px;font-size:12px;font-weight:800}
.palette-check{opacity:0;color:var(--accent)}
[aria-pressed=true]>.palette-name>.palette-check{opacity:1}
.palette-description{display:block;font-size:10px;color:var(--muted);padding:0 3px}
.appearance-feedback{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.brand{gap:10px;align-items:center;margin-bottom:38px}
.brand-mark,.brand-mark img{width:42px;height:42px;flex-shrink:0}
.brand-mark img{border-radius:10px;filter:none;object-fit:contain}
.brand-wordmark{font-size:21px;font-weight:800;letter-spacing:-.6px;line-height:1.1}
.brand-subtitle{display:block;font-size:9px;letter-spacing:3px;font-weight:650;color:#a8bad1;line-height:1;margin-top:7px}
.intro h1{font-family:Manrope,system-ui,sans-serif;font-size:38px;letter-spacing:-1.5px;line-height:1.16;font-weight:800;margin:12px 0 9px}
.intro h1>span{color:var(--accent);font-weight:500}
.intro .overline{font-size:8px;letter-spacing:2px;line-height:1.5}
.intro p{font-size:11px;line-height:1.7;margin:0}
#settings-button{font-size:21px}
.increment-row{display:flex;align-items:center;gap:9px;margin:-8px 0 19px;font-size:10px;color:var(--muted)}
.increment-row input{width:58px;padding:6px;font-size:11px}
.increment-row button{margin-left:auto;border:0;background:transparent;color:var(--accent);font-size:9px;white-space:nowrap}
.settings-section-title{font-size:9px;font-weight:800;letter-spacing:1.5px;color:var(--accent);border-top:1px solid var(--line);padding-top:20px;margin:22px 0 14px}
.settings-fields,.settings-toggles{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.settings-fields>label{font-size:11px;font-weight:600;color:var(--ink)}
.settings-fields :is(input,select){margin-top:8px;font-size:12px;padding:10px}
.settings-fields small{display:block;font-weight:400;font-size:9px;color:var(--muted);margin-top:7px;line-height:1.6}
.clock-presets{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:17px}
.clock-presets button{background:var(--surface);color:var(--ink);border:1px solid var(--line);padding:8px 11px;border-radius:7px;font-size:11px}
.clock-presets button:hover{border-color:var(--accent)}
.settings-toggles label{display:flex;align-items:center;gap:10px;font-size:11px;line-height:1.6;color:var(--ink)}
.settings-toggles input{accent-color:var(--accent);width:16px;height:16px}
.settings-note{font-size:10px!important;margin-top:20px}
.settings-actions{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:20px;margin-top:20px}
.settings-actions .primary-button{width:auto}
.hide-coordinates .coord,.hide-captured .captured-pieces{display:none}
.no-piece-animation .square img{animation:none!important;transition:none!important}
.social-dock{position:fixed;right:18px;top:88px;bottom:20px;width:355px;z-index:100;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:17px;box-shadow:0 20px 80px #0005;display:flex;flex-direction:column;overflow:hidden}
.social-header{padding:20px 17px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);background:var(--surface)}
.social-header .appearance-eyebrow{font-size:7px;letter-spacing:1.3px}
.social-header h2{font-size:17px;font-weight:800;letter-spacing:-.5px;margin:7px 0 0}
.social-tabs{display:flex;padding:9px;gap:5px;border-bottom:1px solid var(--line)}
.social-tabs button{flex:1;border:0;background:transparent;color:var(--muted);font-size:11px;padding:10px 6px;border-radius:7px}
.social-tabs button.active{background:var(--accent);color:var(--accent-ink);font-weight:800}
.social-room{display:flex;flex:1;flex-direction:column;min-height:0;padding:0 13px}
.social-disclosure{font-size:9px;line-height:1.7;color:var(--muted);margin:12px 2px}
.coach-shortcuts{display:flex;gap:4px;margin-bottom:9px}
.coach-shortcuts button{flex:1;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:7px 4px;font-size:9px}
.chat-log{flex:1;min-height:80px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding:5px 2px}
.chat-empty{padding:35px 13px;text-align:center;color:var(--muted);font-size:12px;line-height:1.9}
.chat-bubble{font-size:11px;line-height:1.8;border:1px solid var(--line);border-radius:11px;padding:12px;margin-bottom:13px;background:var(--cream)}
.chat-bubble p{margin:0 0 10px}.chat-bubble.user{background:var(--surface);margin-left:28px;white-space:pre-wrap}
.candidate-card{background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:12px;margin-top:12px}
.candidate-card>div:first-child{display:flex;justify-content:space-between;align-items:center}
.candidate-card button{border:0;border-radius:6px;background:var(--accent);color:var(--accent-ink);font-size:13px;font-weight:800;padding:5px 11px}
.candidate-card>div:first-child>strong{color:var(--accent);font-size:15px;font-variant-numeric:tabular-nums}
.candidate-card>small{color:var(--muted);font-size:8px;display:block;margin:5px 0 10px}
.candidate-card p{font-size:10px;line-height:1.7;color:var(--muted)}
.candidate-line{font-family:ui-monospace,Consolas,monospace;font-size:10px;line-height:1.7;color:var(--ink);direction:ltr}
.historical-score{border-top:1px solid var(--line);padding-top:10px;margin-top:10px;font-size:10px}
.historical-score>strong{font-size:17px;color:var(--accent);margin-right:5px}.historical-score small{display:block;color:var(--muted);font-size:9px}
.candidate-card details{margin-top:10px;font-size:10px;color:var(--muted)}.candidate-card summary{cursor:pointer;color:var(--accent)}
.master-reference{display:block;border-top:1px solid var(--line);margin-top:9px;padding-top:8px}.master-reference strong,.master-reference span,.master-reference small{display:block;font-size:9px;line-height:1.6}.master-reference strong{color:var(--ink);font-size:10px}
.reference-note{font-size:8px;line-height:1.8;color:var(--muted);margin:13px 0 0!important}.reference-note a{color:var(--accent);text-decoration:underline}
.all-reference-moves{margin-top:15px}.all-reference-moves summary{font-size:11px;color:var(--accent);cursor:pointer}.all-reference-moves table{width:100%;font-size:10px;margin-top:10px}.all-reference-moves th{font-size:8px;color:var(--muted);padding:7px 3px}.all-reference-moves td{padding:7px 3px;border-top:1px solid var(--line)}.all-reference-moves small{display:block;font-size:8px;color:var(--muted)}.all-reference-moves button{border:0;border-radius:5px;background:var(--surface);color:var(--ink);font-weight:750;padding:4px 7px}
.chat-compose{display:flex;gap:6px;border-top:1px solid var(--line);padding:11px 0;margin-top:8px}.chat-compose input{font-size:11px;padding:10px}.chat-compose button{background:var(--accent);color:var(--accent-ink);border:0;border-radius:7px;width:38px;font-size:21px;flex-shrink:0}
.social-status{padding:10px 15px;color:var(--muted);font-size:8px;line-height:1.7;border-top:1px solid var(--line);background:var(--surface)}
.spectator-tools{display:flex;align-items:center;gap:5px;padding-top:12px}.spectator-tools .secondary-button{font-size:10px}.spectator-tools .text-button{font-size:9px;white-space:nowrap}
.fan-message{padding:11px 5px;border-bottom:1px solid var(--line);font-size:11px}.fan-message>div{display:flex;justify-content:space-between;gap:8px}.fan-message small{color:var(--accent);font-size:8px}.fan-message p{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--muted);line-height:1.7;margin:7px 0 0}
.spectating :is(.game-actions,#export-pgn,#rematch-button,#share-watch,#revoke-watch){display:none}
@media(min-width:1650px){body.chat-open .workspace{margin-right:380px}.social-dock{box-shadow:var(--shadow)}}
@media(max-width:690px){.social-dock{inset:72px 8px 10px;width:auto;max-width:410px;margin-left:auto}.chat-toggle{font-size:9px!important;max-width:45px;overflow:hidden}.chat-toggle span{display:inline!important;white-space:nowrap}.topbar-actions{gap:5px}.local-badge{display:none}}
.language-select{max-width:106px;min-width:86px;border:1px solid var(--line);border-radius:8px;padding:8px 7px;background:var(--paper);color:var(--ink);font:600 10px Manrope,system-ui,sans-serif;height:36px;cursor:pointer}
.appearance-current{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.difficulty-options button{overflow-wrap:anywhere;hyphens:auto}
.chessboard,.board-overlay,.clock,.candidate-line{direction:ltr}
[lang=ar] body{font-family:"Segoe UI",Tahoma,Arial,sans-serif}
[lang=ja] body{font-family:"Yu Gothic UI",Meiryo,Manrope,sans-serif}
[lang=ko] body{font-family:"Malgun Gothic",Manrope,sans-serif}
.brand-wordmark,.intro h1{direction:ltr;unicode-bidi:isolate}
[dir=rtl] .sidebar{left:auto;right:0}
[dir=rtl] .workspace{margin-left:0;margin-right:var(--sidebar)}
[dir=rtl] .intro h1{text-align:right}
[dir=rtl] .social-dock{right:auto;left:18px}
[dir=rtl] .palette-card{text-align:right}
[dir=rtl] .candidate-card>div:first-child{direction:ltr}
[dir=rtl] .social-header,[dir=rtl] .appearance-heading{direction:rtl}
@media(min-width:1650px){[dir=rtl] body.chat-open .workspace{margin-left:380px;margin-right:var(--sidebar)}}
@media(max-width:690px){.language-select{min-width:77px;max-width:90px;font-size:9px}[dir=rtl] .social-dock{left:8px;right:8px;margin-left:0;margin-right:auto}}
@media(max-width:1040px) and (min-width:821px){.brand{gap:0}}
@media(max-width:690px){.intro h1{font-size:29px;letter-spacing:-1px}.intro .overline{font-size:7px}.intro p{font-size:10px;max-width:240px}.settings-fields{gap:12px}.settings-toggles{grid-template-columns:1fr}.settings-actions{gap:8px}.settings-actions .primary-button{font-size:11px}.increment-row{font-size:10px}.brand-wordmark{font-size:21px}}
@media(max-width:690px){.appearance-button{min-width:0;padding:8px}.appearance-button span{display:none}.appearance-dialog{padding:20px}.appearance-grid{gap:8px}.palette-preview{grid-template-columns:8px 52px 1fr;gap:7px;height:64px;padding:7px}.palette-description{font-size:8px}.palette-name{font-size:11px}}

@media(max-width:690px){.chat-toggle .chat-label{display:none!important}.chat-toggle{justify-content:center;min-width:35px;max-width:35px}}