/* The arena theme leaves the player's board palette and piece set independent. */
:root {
  --background:#eef2f5;
  --foreground:#203048;
  --secondary:#52647c;
  --border:#dbe3eb;
  --primary:#4268c7;
  --purple:#6f87d6;
  --purple-soft:#e9eefb;
  --green:#168471;
  --teal-soft:#e1f3ed;
  --orange:#e89671;
  --coral-soft:#fff0e8;
  --shadow:0 8px 24px #20344808;
}
body {
  background:radial-gradient(ellipse at 100% 5%,#cae7dd80,transparent 46%),var(--background);
}
.site { max-width:1280px; padding:0 24px; }
.site-header {
  top:12px; min-height:74px; margin:12px auto 0; padding:0 22px;
  background:#15263e; color:#f0f5ff; border:1px solid #2b3d56;
  border-radius:17px; box-shadow:0 6px 22px #0d213514;
}
.brand { font-size:20px; letter-spacing:2.7px; }
.brand small { color:#a3b8d2; font-size:7px; letter-spacing:2px; }
.brand-mark { width:40px; height:40px; border:0; border-radius:11px; background:#bce992; box-shadow:none; }
.brand-mark svg { fill:#172d3d; width:30px; height:30px; }
.site-header nav { gap:8px; }
.site-header nav > a { color:#d4e2f2; background:transparent; font-size:12px; }
.site-header .theme-button.quiet,.site-header .settings-toggle {
  color:#d4e2f2; background:#223650; border:1px solid #344760;
  padding:9px 11px; font-size:12px; border-radius:9px;
}
.site-header .account-toggle { color:#172d3d; background:#bce992; border-color:#bce992; font-size:12px; }
.site-header nav > a:hover,.site-header .theme-button.quiet:hover,.site-header .settings-toggle:hover { background:#30455f; color:#fff; }
.site-header .account-toggle:hover { background:#d0f3b1; border-color:#d0f3b1; }
.workspace-intro { padding:27px 0 23px; }
.workspace-intro .eyebrow { font-size:9px; letter-spacing:1.8px; color:var(--green); }
.workspace-intro h1 { font-size:32px; letter-spacing:-1.2px; margin-bottom:8px; }
.workspace-intro h1 span { color:var(--primary); }
.workspace-intro p:last-child { font-size:12px; }
.workspace-intro .intro-guide { border:0; background:none; box-shadow:none; padding:9px 0 9px 20px; border-left:1px solid var(--border); border-radius:0; font-size:11px; }
.intro-guide strong { font-size:12px; }
.intro-guide-icon { background:#d9ece0; color:#20745f; border-radius:50%; width:40px; height:40px; }
.game-layout { grid-template-columns:minmax(0,1fr) 328px; gap:18px 22px; }
.game-layout > .board-card {
  --foreground:#eef4ff; --secondary:#b7c6db; --card:#243750;
  --muted:#293d57; --border:#3e526e; --primary:#bce992;
  --purple:#bce992; --purple-soft:#304842; --green:#8be0c8;
  --teal-soft:#244742; --coral-soft:#493b3a; --red:#ffa2aa;
  color:var(--foreground); background:#192c46;
  border:1px solid #30435c; border-radius:18px; padding:18px;
  box-shadow:0 10px 28px #172f4618;
}
.board-heading { margin-bottom:13px; }
.mode-tabs { background:#112239; border:1px solid #30445f; padding:4px; border-radius:11px; }
.mode-tabs button { font-size:12px; padding:9px 14px; border-radius:7px; }
.mode-tabs button[aria-pressed=true],.mode-tabs #c10-mode-online[aria-pressed=true] { color:#17322b; background:#bce992; box-shadow:0 2px 7px #0002; }
.mode-tabs button:not([aria-pressed=true]):hover { color:#f4f8ff; background:#293c55; }
.board-format { font-size:12px; color:#abc0dc; letter-spacing:1.2px; }
.board-format span { color:#bce992; }
.c10-toolbar { padding:10px 0; margin-bottom:2px; border-top:1px solid #30445e; }
#c10-status { color:#bce992; font-size:14px; }
.actions { gap:4px; }
.actions button { font-size:11px; }
#c10-new.quiet { color:#f4c0a2; background:#443d40; }
#c10-new.quiet:hover { background:#594648; }
#c10-undo.quiet { color:#d6e4fb; background:#2b415f; }
#c10-undo.quiet:hover { background:#385271; }
.player-row { font-size:12px; min-height:41px; }
.player-avatar { width:26px; height:26px; flex-basis:26px; border-radius:50%; font-size:10px; }
.player-row .opponent-avatar { background:#2c425a; color:#d1e1f5; }
.board-stage { gap:12px; }
.live-eval-score { color:#f4f8ff; font-size:10px; }
.live-eval-label { color:#c5d7ed; font-size:9px; }
.live-eval-rail { border-color:#5c728e; background:#101e32; border-radius:5px; }
.c10-legend { margin-top:15px; font-size:10px; gap:8px 16px; color:#b9c9de; }
#c10-detail { margin:12px 0 8px; font-size:12px; }
#c10-manual { padding-top:5px; border-top:1px solid #30445e; }
#c10-manual > summary { font-size:11px; color:#b9c9de; }
#c10-last { color:#b7c6db; }
.workspace-sidebar { gap:16px; }
.settings-window { gap:16px; }
.settings-window-heading { font-size:9px; letter-spacing:1.7px; padding:3px 2px 0; }
.settings-window .panel { padding:20px; border-radius:15px; box-shadow:var(--shadow); }
.settings-window .panel h2 { font-size:19px; margin-bottom:18px; }
.settings-window .panel label { font-size:11px; gap:8px; }
.settings-window select,.settings-window input { font-size:12px; padding:11px 10px; background:var(--card); }
.settings-window select:hover,.settings-window input:hover { border-color:var(--purple); }
.settings-window button { font-size:12px; }
.settings-panel { border-top:0; background:var(--card); }
.settings-panel h2::before { content:""; display:inline-block; width:8px; height:8px; margin:0 9px 2px 0; border-radius:3px; background:#7796d4; }
.settings-window .save-status { font-size:10px; margin-top:15px; }
.appearance-panel { border-top:0; background:linear-gradient(130deg,var(--coral-soft),var(--card) 40%); }
.appearance-title-row .eyebrow { color:var(--secondary); font-size:8px; letter-spacing:1.2px; }
.piece-style-preview { height:52px; width:95px; border-radius:11px; }
.appearance-grid { margin-top:19px; gap:12px; }
.appearance-palette-label { margin-top:15px; }
.settings-window .color-customization label { font-size:10px; }
.color-customization { gap:12px; margin-top:14px; }
.language-setting { padding-top:16px; margin-top:18px; }
.settings-footnote { font-size:10px; line-height:1.65; }
.language-setting select { width:137px; }
.live-eval-panel { border-top:0; padding:20px; background:linear-gradient(140deg,var(--teal-soft),var(--card) 65%); }
.live-eval-panel .panel-heading h2 { font-size:18px; }
.insight-badge { font-size:7px; padding:4px 6px; }
.live-eval-status { font-size:12px; }
.live-eval-history li { font-size:11px; padding:10px 0; }
.dragon-tip { border:1px solid #37526c; background:#203b53; color:#f0f6ff; padding:20px; }
.dragon-tip .eyebrow { color:#bce992; font-size:8px; letter-spacing:1.1px; }
.dragon-tip h2 { font-size:19px; }
.dragon-tip > p { color:#c6d9e8; font-size:11px; line-height:1.8; }
.dragon-tip > a { color:#bce992; font-size:11px; }
.dragon-tip-heading > svg { width:44px; flex-basis:44px; height:48px; background:#587b8e; }
.dragon-tip-coordinates { font-size:11px; color:#e1efff; background:#2b4b63; border-color:#4d6a82; padding:10px 12px; }
.dragon-tip-coordinates span:first-child,.dragon-tip-coordinates b { color:#bce992; }
.history-panel { border-top:0; padding:20px; border-radius:15px; }
.history-panel .panel-heading h2 { font-size:18px; }
.history-panel .panel-heading .subtle { font-size:9px; letter-spacing:1px; }
.history-panel ol { font-size:11px; }
.history-panel li { padding-top:9px; padding-bottom:9px; }
.rules-section { border-radius:15px; }
.rules-toggle { padding:17px 20px; font-size:13px; }
.rules-toggle-hint { font-size:11px; }
.rules-toggle-icon { background:var(--teal-soft); color:var(--green); border-radius:50%; }
footer { padding:25px 0; font-size:11px; }
.workspace-sidebar > .analysis-panel { border-top:0; border-radius:15px; padding:20px; box-shadow:var(--shadow); }
.analysis-best { padding:15px; }
.analysis-best strong { font-size:15px; }
.analysis-best .eyebrow { font-size:9px; }
.analysis-disclaimer,.analysis-evaluation { font-size:11px; }
.analysis-panel #analysis-exit { font-size:11px; }
.analysis-navigation button { min-height:38px; }
.analysis-move { font-size:12px; padding:11px; }
.analysis-grade { font-size:10px; }
html[data-theme=dark] { --background:#0d1b2b; --foreground:#edf3fc; --secondary:#b3c3d6; --border:#34455a; --card:#1c2e43; --primary:#a7c5ff; --purple:#9bb8ee; --purple-soft:#2a3e5d; --teal-soft:#20453f; --coral-soft:#3c3538; --green:#8fe1c7; --shadow:0 8px 24px #0002; }
html[data-theme=dark] body { background:radial-gradient(ellipse at 100% 0,#1c3b4180,transparent 45%),var(--background); }
html[data-theme=dark] .intro-guide-icon { background:#28483e; color:#bce992; }
@media(prefers-color-scheme:dark) {
  html:not([data-theme=light]):not([data-theme=dark]) { --background:#0d1b2b; --foreground:#edf3fc; --secondary:#b3c3d6; --border:#34455a; --card:#1c2e43; --primary:#a7c5ff; --purple:#9bb8ee; --purple-soft:#2a3e5d; --teal-soft:#20453f; --coral-soft:#3c3538; --green:#8fe1c7; --shadow:0 8px 24px #0002; }
}
@media(min-width:1001px) { body[data-analyzing=true] .workspace-sidebar { top:102px; } .workspace-sidebar > .analysis-panel { max-height:calc(100dvh - 122px); } }
@media(max-width:1000px) {
  .site { max-width:860px; padding:0 20px; }
  .game-layout { grid-template-columns:minmax(0,1fr); }
  .site-header { padding:0 15px; }
  .workspace-intro h1 { font-size:29px; }
}
@media(max-width:600px) {
  .site { padding:0 10px; }
  .site-header { top:6px; min-height:62px; margin-top:6px; border-radius:12px; padding:0 10px; gap:7px; }
  .brand { font-size:15px; letter-spacing:1.4px; gap:7px; }
  .brand-mark { width:32px; height:32px; border-radius:8px; }
  .brand-mark svg { width:25px; height:25px; }
  .brand small { font-size:5px; letter-spacing:1px; }
  .site-header nav { gap:4px; }
  .site-header .theme-button.quiet,.site-header .settings-toggle { padding:7px; font-size:10px; }
  .site-header .account-toggle { font-size:11px; padding:8px; }
  .workspace-intro { padding:22px 3px 18px; }
  .workspace-intro h1 { font-size:26px; }
  .workspace-intro .eyebrow { font-size:8px; }
  .workspace-intro p:last-child { font-size:11px; }
  .game-layout > .board-card { padding:10px; border-radius:14px; }
  .board-heading { gap:7px; margin-bottom:10px; }
  .mode-tabs button { padding:7px 8px; font-size:10px; }
  .mode-tabs button span { margin-right:2px; }
  .board-format { font-size:10px; letter-spacing:0; white-space:nowrap; }
  .board-format span { margin:0 1px; }
  .c10-toolbar { padding:6px 0; }
  #c10-status { font-size:12px; }
  .actions button { font-size:10px; }
  .player-row { min-height:36px; font-size:11px; }
  .player-avatar { width:22px; height:22px; flex-basis:22px; }
  .board-stage { gap:7px; }
  .live-eval-score { font-size:8px; }
  .live-eval-label { font-size:7px; }
  .c10-legend { font-size:9px; gap:7px 11px; }
  #c10-detail { font-size:11px; }
  .history-panel,.live-eval-panel,.dragon-tip,.workspace-sidebar > .analysis-panel { padding:17px; }
  .settings-window .panel { padding:17px; }
  .rules-toggle { padding:14px; gap:8px; font-size:12px; }
  .rules-toggle-hint { font-size:9px; }
  footer { padding:22px 2px; font-size:10px; }
}
@media(max-width:360px) {
  .brand { font-size:13px; letter-spacing:1px; }
  .brand-mark { width:28px; height:28px; }
  .site-header { padding:0 8px; }
  .site-header .account-toggle { font-size:10px; padding:7px; }
  .mode-tabs button { padding:7px 5px; font-size:9px; }
  .workspace-intro h1 { font-size:24px; }
}