/* Zmaelor: violet strategy, teal action, amber sacrifice. */
:root {
  color-scheme: light;
  --background: #f1f3fc;
  --foreground: #202944;
  --card: #ffffff;
  --muted: #edf0fa;
  --secondary: #697493;
  --border: #dce2f0;
  --primary: #6b54d9;
  --purple: #9a82ff;
  --orange: #f29c62;
  --yellow: #f4bf62;
  --green: #27a992;
  --red: #e8627b;
  --teal-soft: #e0f6f1;
  --purple-soft: #eee9ff;
  --coral-soft: #fff0ec;
  --board-frame: #202b48;
  --board-coordinate: #c1cbe1;
  --board-light: #b6c5de;
  --board-dark: #7186a8;
  --board-mark: #203656;
  --piece-white: #f5f5fd;
  --piece-white-stroke: #303d5a;
  --piece-black: #293753;
  --piece-black-stroke: #d3e1f5;
  --shadow: 0 9px 35px #293c6b07;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; color: var(--foreground); background: radial-gradient(ellipse at 0 0, #997bf538, transparent 43%), radial-gradient(ellipse at 100% 27%, #35c9b525, transparent 38%), radial-gradient(ellipse at 80% 100%, #ff9b7914, transparent 45%), var(--background); font-size: 14px; line-height: 1.6; }
button, input, select { font: inherit; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
button, select, summary { cursor: pointer; }
button, .button-link { border: 1px solid var(--border); border-radius: 9px; padding: 10px 13px; background: var(--card); color: var(--foreground); font-size: 12px; font-weight: 650; transition: background .18s, border-color .18s, transform .18s; }
button:hover, .button-link:hover { border-color: var(--purple); background: var(--purple-soft); }
button:disabled { opacity: .42; cursor: default; }
button.primary { border-color: var(--primary); color: white; background: var(--primary); box-shadow: 0 4px 12px #7354e71c; }
button.primary:hover { background: color-mix(in srgb, var(--primary) 88%, #fff); }
button.quiet { border-color: transparent; background: transparent; color: var(--secondary); padding: 7px 8px; }
button.quiet:hover { color: var(--foreground); background: var(--muted); }
a { color: inherit; text-underline-offset: 4px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
[hidden] { display: none !important; }
.site { width: 100%; max-width: 1240px; margin: auto; padding: 0 clamp(12px, 1.25vw, 24px); }
.site-header { min-height: 76px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; font-size: 21px; font-weight: 820; letter-spacing: 2.6px; line-height: 1.12; }
.brand small { display: block; margin-top: 7px; font-size: 7px; letter-spacing: 3.1px; color: var(--secondary); font-weight: 650; }
.brand-mark { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #9f8dfc88; border-radius: 14px 5px 14px 5px; background: linear-gradient(135deg, #8a6eee, #6045c7); box-shadow: 0 5px 20px #7960e42b; }
.brand-mark svg { width: 33px; height: 33px; fill: #fff; }
.site-header nav { display: flex; align-items: center; gap: 23px; font-size: 12px; }
.site-header nav a { text-decoration: none; font-weight: 600; }
.theme-button { font-size: 11px; }
.intro { padding: 34px 0 30px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.eyebrow { display: flex; align-items: center; gap: 7px; font-size: 9px; font-weight: 750; letter-spacing: 1.7px; color: var(--secondary); margin: 0 0 10px; }
.live-dot { display: inline-block; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 12%, transparent); }
h1, h2, h3, p { overflow-wrap: break-word; }
h1, h2, h3 { line-height: 1.18; }
h1 { font-size: clamp(32px, 3.7vw, 45px); line-height: 1.14; letter-spacing: -1.8px; font-weight: 760; margin: 0 0 12px; }
h1 span { color: var(--primary); }
.intro > div > p:last-child { font-size: 12px; color: var(--secondary); margin: 0; }
.intro-guide { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border: 1px solid var(--border); border-radius: 12px; text-decoration: none; color: var(--secondary); font-size: 10px; background: color-mix(in srgb, var(--card) 55%, transparent); }
.intro-guide strong { display: block; margin-top: 3px; font-size: 11px; color: var(--foreground); }
.intro-guide-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--teal-soft); color: var(--green); font-size: 24px; }
.game-layout { width:100%; max-width:820px; margin:23px auto 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.board-card, .panel { background: var(--card); border: 1px solid var(--border); border-radius: 17px; box-shadow: var(--shadow); min-width: 0; }
.board-card { padding: 20px; border-top: 3px solid var(--purple); }
.board-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 17px; }
.mode-tabs { display: flex; width: fit-content; padding: 4px; border-radius: 11px; background: var(--muted); gap: 3px; }
.mode-tabs button { background: transparent; border-color: transparent; color: var(--secondary); padding: 8px 14px; font-size: 11px; }
.mode-tabs button span { font-size: 16px; vertical-align: -1px; margin-right: 3px; }
.mode-tabs button[aria-pressed=true] { background: var(--primary); color: white; box-shadow: 0 3px 8px #4b379c24; }
.board-format { color: var(--secondary); font-size: 12px; font-weight: 700; letter-spacing: 1px; }
.board-format span { color: var(--purple); margin: 0 3px; }
.c10-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 12px; }
#c10-status { flex: 1 1 190px; font-size: 13px; font-weight: 650; }
.actions { display: flex; flex-wrap: wrap; gap: 3px; }
.actions button { font-size: 10px; }
.player-row { display: flex; align-items: center; gap: 8px; padding: 10px 3px; font-size: 11px; color: var(--secondary); min-height: 42px; }
.player-row > span:not(.player-avatar) { overflow-wrap: anywhere; }
.player-avatar { width: 23px; height: 23px; border: 1px solid var(--border); background: var(--purple-soft); color: var(--primary); border-radius: 7px; display: grid; place-items: center; font-size: 9px; font-weight: 750; flex: 0 0 23px; }
.opponent-avatar { background: var(--teal-soft); color: var(--green); }
#c10-thinking { margin-left: auto; color: var(--primary); font-size: 10px; }
.c10-board { width: 100%; min-width: 0; margin: auto; line-height: 0; }
.c10-board svg { max-width: 100%; display: block; }
.c10-legend { display: flex; flex-wrap: wrap; gap: 7px 18px; margin: 13px 0 9px; color: var(--secondary); font-size: 9px; }
.c10-legend span { display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--secondary); }
.legend-ring { width: 8px; height: 8px; border: 1.5px solid var(--green); border-radius: 50%; }
.legend-diamond { width: 7px; height: 7px; transform: rotate(45deg); background: var(--yellow); }
#c10-detail { min-height: 21px; margin: 11px 0 13px; font-size: 12px; }
.error { padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--red) 35%, transparent); background: color-mix(in srgb, var(--red) 8%, var(--card)); color: var(--red); border-radius: 9px; font-size: 12px; }
summary { font-size: 11px; color: var(--secondary); padding: 6px 0; }
details[open] > summary { margin-bottom: 12px; }
.manual-controls { display: flex; gap: 9px; align-items: end; flex-wrap: wrap; margin: 10px 0; }
.manual-controls label { flex: 1; min-width: 110px; }
label { display: flex; flex-direction: column; gap: 7px; font-size: 10px; font-weight: 600; color: var(--secondary); }
select, input { width: 100%; min-width: 0; padding: 11px; color: var(--foreground); background: var(--background); border: 1px solid var(--border); border-radius: 9px; font-size: 12px; }
select { padding-right: 22px; }
input::placeholder { color: var(--secondary); opacity: .7; }
#c10-last { margin: 8px 0 0; font-size: 10px; }
.sidebar { display: grid; gap: 16px; }
.panel { padding: 20px; }
.panel h2 { font-size: 23px; font-weight: 720; letter-spacing: -.8px; margin: 0 0 12px; }
.panel-description { color: var(--secondary); font-size: 11px; margin: 0 0 22px; }
.settings-panel { border-top: 3px solid var(--purple); background: linear-gradient(155deg, var(--purple-soft), var(--card) 75%); }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.subtle { font-size: 11px; color: var(--secondary); }
.save-status { display: flex; align-items: center; gap: 7px; color: var(--secondary); margin: 18px 0 0; font-size: 9px; }
.save-status .live-dot { width: 4px; height: 4px; flex-basis: 4px; }
.quick-guide { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--teal-soft), var(--card)); }
.quick-guide .eyebrow { color: var(--green); }
.quick-guide h2 { font-size: 24px; letter-spacing: -.8px; line-height: 1.22; position: relative; }
.quick-guide p:not(.eyebrow) { font-size: 11px; color: var(--secondary); margin: 16px 0; max-width: 220px; }
.quick-guide a { text-decoration: none; font-size: 10px; font-weight: 700; color: var(--green); }
.quick-guide a span { margin-left: 4px; }
.quick-guide-icon { position: absolute; right: 17px; top: 16px; color: color-mix(in srgb, var(--green) 16%, transparent); font-size: 120px; line-height: 1; transform: rotate(-12deg); }
.panel-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.panel-heading h2 { font-size: 17px; letter-spacing: -.5px; margin-bottom: 14px; }
.panel-heading .subtle { font-size: 8px; white-space: nowrap; }
.history-panel ol { margin: 0; padding-left: 21px; font-size: 10px; color: var(--secondary); }
.history-panel li { padding: 7px 0 7px 3px; border-bottom: 1px solid var(--border); }
.history-panel li:last-child { border: 0; }
.promotion { padding: 14px; border: 1px solid var(--purple); border-radius: 11px; background: var(--purple-soft); margin: 14px 0; }
.promotion strong { display: block; font-size: 12px; margin-bottom: 10px; }
#guest-form, #room-join-form, #account-form { display: grid; gap: 10px; margin: 17px 0; }
#guest-form .primary { display: flex; justify-content: space-between; }
#auth-section { margin: 16px 0; }
#auth-toggle { font-size: 10px; }
#actor-info { overflow-wrap: anywhere; }
#guest-session-note { padding: 9px 11px; background: var(--muted); border-radius: 8px; font-size: 10px; }
.online-panel { border-top: 3px solid var(--green); background: linear-gradient(155deg, var(--teal-soft), var(--card) 70%); }
.room-create-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; align-items: end; padding-top: 17px; margin-top: 17px; border-top: 1px solid var(--border); }
.room-create-row button { padding: 11px 7px; }
#my-rooms { margin: 15px 0; }
.room-entry { display: block; width: 100%; margin: 6px 0; text-align: left; font-size: 10px; overflow-wrap: anywhere; }
#room-invite { padding-top: 15px; border-top: 1px solid var(--border); }
#room-invite button { margin-top: 9px; width: 100%; }
#room-link { font-size: 10px; }
.online-message { margin: 17px 0 0; color: var(--green); font-size: 10px; overflow-wrap: anywhere; }
.analysis-launch { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border-color: color-mix(in srgb, var(--purple) 45%, var(--border)); background: var(--purple-soft); margin-top: 18px; padding: 16px; color: var(--primary); }
.analysis-launch > span:first-child { font-size: 24px; }
.analysis-launch small { display: block; margin-top: 4px; color: var(--secondary); font-size: 9px; font-weight: 450; }
.analysis-launch b { margin-left: auto; font-size: 22px; }
.analysis-panel { background: var(--background); border: 1px solid var(--border); padding: 20px; margin-top: 20px; border-radius: 13px; min-width: 0; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.section-heading h2 { margin: 0; font-size: 30px; font-weight: 720; letter-spacing: -1px; }
.analysis-panel .section-heading { flex-wrap: wrap; gap: 8px; }
.analysis-panel .section-heading h2 { font-size: 24px; }
.analysis-panel .eyebrow { font-size: 8px; }
.analysis-panel #analysis-exit { font-size: 10px; padding-left: 0; }
.analysis-disclaimer { color: var(--secondary); font-size: 10px; margin: 13px 0; }
.analysis-heading-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
#analysis-progress { color: var(--primary); font-size: 11px; }
#analysis-cancel { font-size: 10px; }
.analysis-summary { font-size: 11px; color: var(--secondary); padding: 12px 0; border-top: 1px solid var(--border); }
.analysis-summary:empty { display: none; }
.analysis-content { display: grid; gap: 15px; }
#analysis-status { font-size: 12px; font-weight: 650; margin: 7px 0; }
.analysis-evaluation { font-size: 11px; color: var(--secondary); margin: 8px 0; }
.analysis-navigation { display: flex; gap: 8px; margin: 13px 0 0; }
.analysis-navigation button { flex: 1; font-size: 11px; }
.analysis-moves { max-height: 330px; overflow-y: auto; display: grid; gap: 6px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.analysis-move { display: flex; align-items: center; gap: 9px; justify-content: space-between; width: 100%; text-align: left; padding: 10px 12px; border-radius: 8px; font-size: 11px; }
.analysis-move[aria-current=true], .analysis-move.active, .analysis-move[aria-selected=true] { background: var(--purple-soft); border-color: var(--purple); }
.analysis-grade { display: inline-flex; align-items: center; gap: 4px; border-radius: 5px; font-size: 9px; padding: 3px 6px; white-space: nowrap; background: var(--muted); color: var(--secondary); }
.analysis-grade.best, .analysis-grade.excellent { background: var(--teal-soft); color: var(--green); }
.analysis-grade.brilliant { background: var(--purple-soft); color: var(--primary); }
.analysis-grade.good { color: var(--green); }
.analysis-grade.inaccuracy { background: color-mix(in srgb, var(--yellow) 14%, var(--card)); color: #b67c20; }
.analysis-grade.mistake { background: var(--coral-soft); color: #c57c44; }
.analysis-grade.blunder { background: color-mix(in srgb, var(--red) 12%, var(--card)); color: var(--red); }
.rules-section { margin-top: 20px; padding: 0; scroll-margin-top: 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); }
.section-number { font-size: 11px; font-weight: 650; letter-spacing: 2px; color: var(--purple); white-space: nowrap; }
.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; margin-top: 24px; }
.guide-card { padding: 23px; border-radius: 15px; border: 1px solid var(--border); background: var(--card); min-width: 0; }
.guide-number { display: inline-grid; place-items: center; width: 28px; height: 28px; background: var(--purple-soft); color: var(--primary); border-radius: 8px; font-size: 10px; font-weight: 750; }
.guide-card h3 { font-size: 17px; letter-spacing: -.5px; margin: 17px 0 12px; }
.guide-card p { font-size: 11px; color: var(--secondary); margin: 0; }
.guide-card p strong { color: var(--foreground); font-weight: 650; }
.guide-card .guide-caption { font-size: 9px; margin-top: 13px; }
.mini-board { display: grid; grid-template-columns: repeat(5, 26px); gap: 3px; width: fit-content; margin: 22px auto; }
.mini-board span { background: var(--muted); width: 26px; height: 22px; border-radius: 3px; display: grid; place-items: center; font-size: 12px; }
.mini-board span:nth-child(even) { background: var(--border); }
.mini-board span.mini-selected { background: var(--primary); color: white; }
.mini-board span.mini-move { color: var(--green); font-size: 9px; }
.mini-board svg { width: 23px; height: 23px; }
.sacrifice-guide { border-color: color-mix(in srgb, var(--yellow) 38%, var(--border)); }
.sacrifice-guide .guide-number { color: #b67c20; background: color-mix(in srgb, var(--yellow) 15%, var(--card)); }
.sacrifice-demo { display: flex; align-items: center; justify-content: center; gap: 15px; margin: 22px 0; font-size: 9px; line-height: 1.6; color: var(--secondary); }
.sacrifice-demo b { color: var(--foreground); font-size: 10px; }
.sacrifice-demo i { color: var(--yellow); font-size: 24px; font-style: normal; }
.sacrifice-demo .double-tap { display: flex; flex-direction: column; align-items: center; padding: 9px; border: 1px solid color-mix(in srgb, var(--yellow) 60%, var(--border)); border-radius: 9px; font-size: 23px; line-height: 1.1; color: var(--yellow); }
.double-tap small { font-size: 6px; letter-spacing: .7px; margin-top: 7px; color: var(--secondary); }
.dragon-guide { border-color: color-mix(in srgb, var(--green) 25%, var(--border)); }
.dragon-guide .guide-number { color: var(--green); background: var(--teal-soft); }
.dragon-movement { display: block; width: 100%; max-width: 260px; height: 128px; margin: 13px auto; color: var(--green); }
.dragon-movement text { fill: var(--secondary); font-family: inherit; font-size: 10px; }
.full-rules { border: 1px solid var(--border); border-radius: 13px; background: var(--card); margin-top: 18px; padding: 14px 22px; }
.full-rules > summary { color: var(--foreground); font-size: 12px; font-weight: 650; }
.piece-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 28px; padding-top: 7px; }
.piece-guide-grid article { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.piece-guide-grid svg { width: 43px; height: 48px; flex: 0 0 43px; background: var(--board-dark); padding: 3px; border-radius: 8px; }
.piece-guide-grid h3 { font-size: 12px; margin: 4px 0 6px; }
.piece-guide-grid p, .rules-notes p { margin: 0; font-size: 11px; color: var(--secondary); }
.piece-white { fill: var(--piece-white); stroke: var(--piece-white-stroke); }
.piece-black { fill: var(--piece-black); stroke: var(--piece-black-stroke); }
.piece-white .piece-eye { fill: var(--piece-white-stroke); }
.piece-black .piece-eye { fill: var(--piece-black-stroke); }
.rules-notes { display: grid; gap: 12px; border-top: 1px solid var(--border); padding: 20px 0 8px; margin-top: 25px; }
.rules-notes strong { color: var(--foreground); font-weight: 650; }
footer { display: flex; justify-content: space-between; gap: 18px; align-items: center; flex-wrap: wrap; padding: 28px 0 32px; margin-top: 32px; border-top: 1px solid var(--border); color: var(--secondary); font-size: 10px; }
footer > div { display: flex; flex-wrap: wrap; gap: 20px; }
footer a { text-decoration: none; }
.footer-brand { font-size: 11px; letter-spacing: 2px; font-weight: 750; color: var(--foreground); }
.footer-brand span { margin-left: 14px; font-size: 9px; letter-spacing: 0; font-weight: 450; color: var(--secondary); }
html[data-theme=dark] { color-scheme: dark; --background:#10172a; --foreground:#e6edfc; --card:#192237; --muted:#232e47; --secondary:#96a5c3; --border:#2d3a55; --primary:#a28aff; --purple:#a891ff; --green:#4fd4b6; --red:#ff8398; --yellow:#efc16d; --teal-soft:#1b3b3d; --purple-soft:#302b51; --coral-soft:#423036; --board-frame:#111a2e; --board-coordinate:#adbfdb; --board-light:#92a4bf; --board-dark:#536987; --board-mark:#1e3452; --piece-white:#f0f3ff; --piece-white-stroke:#2b3852; --piece-black:#26334f; --piece-black-stroke:#cbdcf2; --shadow:0 10px 30px #050b1c22; }
html[data-theme=dark] button.primary, html[data-theme=dark] .mode-tabs button[aria-pressed=true] { color: #191b38; }
@media(prefers-color-scheme:dark) { html:not([data-theme=light]):not([data-theme=dark]) { color-scheme:dark; --background:#10172a; --foreground:#e6edfc; --card:#192237; --muted:#232e47; --secondary:#96a5c3; --border:#2d3a55; --primary:#a28aff; --purple:#a891ff; --green:#4fd4b6; --red:#ff8398; --yellow:#efc16d; --teal-soft:#1b3b3d; --purple-soft:#302b51; --coral-soft:#423036; --board-frame:#111a2e; --board-coordinate:#adbfdb; --board-light:#92a4bf; --board-dark:#536987; --board-mark:#1e3452; --piece-white:#f0f3ff; --piece-white-stroke:#2b3852; --piece-black:#26334f; --piece-black-stroke:#cbdcf2; --shadow:0 10px 30px #050b1c22; } html:not([data-theme=light]):not([data-theme=dark]) button.primary, html:not([data-theme=light]):not([data-theme=dark]) .mode-tabs button[aria-pressed=true] { color:#191b38; } }
@media(max-width:950px) { .game-layout { grid-template-columns: minmax(0,1fr); } .board-card { width: 100%; } .sidebar { grid-template-columns: repeat(2,minmax(0,1fr)); } .history-panel { grid-column: 1/-1; } .history-panel ol { columns: 2; column-gap: 32px; } .history-panel li { break-inside: avoid; } .guide-grid { grid-template-columns: 1fr; } .guide-card { display: grid; grid-template-columns: 35px minmax(0,1fr); gap: 0 15px; } .guide-card .guide-number { grid-row: 1/3; margin-top: 3px; } .guide-card h3 { margin-top: 4px; } .guide-card p, .guide-card .mini-board, .guide-card .sacrifice-demo, .guide-card .dragon-movement { grid-column: 2; } .guide-card .mini-board { margin: 19px 0 6px; } .guide-card .sacrifice-demo { justify-content: flex-start; margin-bottom: 6px; } .guide-card .dragon-movement { margin: 10px 0 0; } .intro-guide { padding: 12px; } }
@media(max-width:600px) { .site { padding: 0 14px; } .site-header { min-height: 78px; gap: 10px; } .brand { gap: 8px; font-size: 16px; letter-spacing: 1.5px; } .brand-mark { width: 35px; height: 35px; border-radius: 11px 4px 11px 4px; } .brand-mark svg { width: 27px; height: 27px; } .brand small { font-size: 6px; letter-spacing: 1.7px; margin-top: 5px; } .site-header nav { gap: 10px; font-size: 10px; } .site-header nav button { font-size: 9px; padding: 6px 0; } .intro { padding: 26px 2px 24px; } .intro-guide { display:none; } h1 { font-size: 34px; letter-spacing: -1.3px; } .intro > div > p:last-child { font-size: 11px; } .eyebrow { font-size: 8px; letter-spacing: 1.2px; } .board-card { padding: 12px; border-radius: 13px; } .board-heading { margin-bottom: 13px; } .mode-tabs button { padding: 7px 10px; font-size: 10px; } .mode-tabs button span { font-size: 14px; } .board-format { font-size: 10px; } .c10-toolbar { gap: 4px; margin-bottom: 4px; } #c10-status { flex-basis: 100%; font-size: 12px; margin: 5px 0; } .actions button { font-size: 9px; padding: 6px 7px; } .player-row { font-size: 10px; padding: 8px 1px; min-height: 36px; } .player-avatar { width: 20px; height: 20px; flex-basis: 20px; } .c10-legend { gap: 7px 12px; font-size: 8px; margin-top: 12px; } #c10-detail { font-size: 11px; } .sidebar { grid-template-columns: minmax(0,1fr); gap: 13px; } .panel { padding: 21px; } .history-panel ol { columns:1; } .history-panel li { font-size: 11px; } .quick-guide h2 br { display: none; } .quick-guide p:not(.eyebrow) { max-width: 100%; } .game-layout { gap: 14px; } .rules-section { padding-top: 33px; } .section-heading h2 { font-size: 26px; } .section-number { display:none; } .guide-grid { margin-top: 20px; gap: 12px; } .guide-card { padding: 18px; grid-template-columns: 29px minmax(0,1fr); gap: 0 11px; } .guide-number { width: 25px; height: 25px; } .guide-card h3 { font-size: 16px; } .guide-card p { font-size: 11px; } .full-rules { padding: 13px 17px; } .piece-guide-grid { grid-template-columns: minmax(0,1fr); } .analysis-panel { padding: 14px; } .analysis-panel .section-heading h2 { font-size: 23px; } .analysis-heading-row { flex-wrap:wrap; gap:0; } .analysis-move { padding: 9px; font-size: 10px; flex-wrap:wrap; } .analysis-navigation button { padding: 9px 7px; font-size: 10px; } .analysis-launch { padding: 12px; gap: 10px; } .analysis-launch small { font-size: 8px; } footer { margin-top: 24px; padding: 24px 0; gap: 15px; } footer > div { gap: 16px; font-size: 9px; } .footer-brand span { margin-left: 9px; font-size: 8px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } button, .button-link { transition:none; } }

/* Compact game workspace */
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.site-header nav > a { color:var(--green); background:var(--teal-soft); padding:8px 13px; border-radius:8px; }
.theme-button.quiet { color:var(--primary); background:var(--purple-soft); padding:8px 11px; border-radius:8px; }
.mode-tabs button[aria-pressed=true] { background:linear-gradient(135deg, #9171f3, #6c4dd1); color:#fff; }
.mode-tabs #c10-mode-online[aria-pressed=true] { background:linear-gradient(135deg, #2bc9ac, #37bbae); color:#092e32; }
#c10-status { color:light-dark(#1c7d70, #72e2c9); }
#c10-new.quiet { background:var(--coral-soft); color:light-dark(#a75032, #ffb99b); }
#c10-undo.quiet { background:var(--purple-soft); color:var(--primary); }
#c10-draw.quiet { background:var(--teal-soft); color:var(--green); }
#c10-resign.quiet { color:var(--red); }
.panel h2 { font-size:19px; margin-bottom:18px; letter-spacing:-.5px; }
.history-panel { border-top:3px solid var(--orange); }
.history-panel .panel-heading h2 { font-size:17px; margin-bottom:12px; }
.save-status { margin-top:15px; }
.rules-toggle { display:flex; align-items:center; gap:10px; padding:15px 18px; color:var(--foreground); font-size:12px; font-weight:650; list-style:none; }
.rules-toggle::-webkit-details-marker { display:none; }
.rules-toggle-icon { display:grid; place-items:center; width:25px; height:25px; border-radius:7px; color:var(--primary); background:var(--purple-soft); font-size:13px; }
.rules-toggle-hint { margin-left:auto; color:var(--secondary); font-size:10px; font-weight:450; }
.rules-toggle-hint b { margin-left:8px; color:var(--purple); font-size:19px; font-weight:450; vertical-align:-1px; }
.rules-section[open] > .rules-toggle { border-bottom:1px solid var(--border); margin-bottom:0; }
.rules-section[open] .rules-toggle-hint b { display:inline-block; transform:rotate(45deg); }
.rules-content { padding:0 18px 18px; }
.rules-content .guide-grid { margin-top:18px; gap:13px; }
.rules-content .guide-card { background:var(--background); padding:19px; }
.rules-content .full-rules { background:var(--background); }
.analysis-panel .section-heading h2 { font-size:21px; }
footer { margin-top:20px; padding:22px 0; }
@media(max-width:600px) {
 .site-header { min-height:68px; }
 .brand { font-size:15px; }
 .site-header nav { gap:7px; }
 .site-header nav > a { padding:6px 10px; font-size:10px; }
 .site-header nav .theme-button { padding:6px 8px; font-size:9px; }
 .game-layout { margin-top:16px; }
 .board-card { padding:12px; }
 .rules-section { padding:0; margin-top:16px; }
 .rules-toggle { padding:13px; gap:8px; }
 .rules-toggle-hint { font-size:9px; }
 .rules-toggle-hint b { margin-left:4px; }
 .rules-content { padding:0 12px 12px; }
 .rules-content .guide-card { padding:16px; }
 .rules-content .guide-grid { margin-top:12px; }
 .panel { padding:19px; }
 .panel h2 { font-size:18px; }
}

/* A focused board with a permanent, useful studio on its right. */
.site { max-width:1280px; }
.site-header { position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--background) 94%,transparent); backdrop-filter:blur(16px); }
.site-header nav { gap:12px; }
.brand small { font-size:6px; letter-spacing:2px; margin-top:6px; }
.workspace-intro { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:24px 2px 20px; max-width:1200px; margin:auto; }
.workspace-intro .eyebrow { color:var(--green); margin-bottom:7px; font-size:8px; letter-spacing:1.5px; }
.workspace-intro h1 { font-size:30px; letter-spacing:-1.1px; margin-bottom:7px; }
.workspace-intro p:last-child { margin:0; color:var(--secondary); font-size:11px; }
.workspace-intro .intro-guide { padding:11px 15px; background:var(--card); box-shadow:var(--shadow); }
.game-layout { max-width:1200px; grid-template-columns:minmax(0,1fr) 320px; gap:18px 20px; margin:0 auto; }
.game-layout > .board-card { width:100%; grid-column:1; grid-row:1; padding:18px; }
.game-layout > .history-panel { width:100%; grid-column:1; grid-row:2; }
.workspace-sidebar { grid-column:2; grid-row:1 / span 2; display:grid; gap:15px; min-width:0; }
.game-settings { min-width:0; scroll-margin-top:94px; }
.settings-toggle { display:flex; align-items:center; gap:7px; color:var(--primary); background:var(--purple-soft); border-color:transparent; padding:8px 11px; }
.settings-toggle svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; }
.settings-window { display:grid; position:static; gap:13px; width:100%; max-height:none; padding:0; border:0; border-radius:0; background:none; box-shadow:none; }
.settings-window-heading { display:flex; align-items:center; justify-content:space-between; color:var(--secondary); font-size:8px; font-weight:750; letter-spacing:1.5px; padding:1px 4px; }
#settings-close { display:none; }
.settings-window .panel { padding:18px; box-shadow:var(--shadow); border-radius:14px; }
.settings-window .panel h2 { font-size:18px; margin-bottom:16px; }
.settings-window .panel + .panel { margin-top:0; }
.settings-window .panel button { font-size:11px; }
.settings-grid { gap:10px; }
.settings-window select, .settings-window input { font-size:11px; padding:10px; }
.settings-window label { font-size:10px; gap:6px; }
.settings-window .save-status { margin-top:13px; font-size:9px; }
.appearance-panel { border-top:3px solid var(--orange); background:linear-gradient(145deg,var(--coral-soft),var(--card) 30%); }
.appearance-title-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.appearance-title-row .eyebrow { font-size:7px; letter-spacing:1px; color:var(--secondary); margin-bottom:5px; }
.appearance-title-row h2 { margin-bottom:0 !important; }
.piece-style-preview { display:flex; align-items:flex-end; width:100px; height:57px; padding:4px 5px; border-radius:9px; background:linear-gradient(135deg,var(--board-dark),var(--board-light)); }
.piece-style-preview svg { width:31px; height:46px; }
.appearance-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:15px; }
.appearance-palette-label { margin-top:13px; }
.color-customization { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.color-customization label { flex-direction:row; align-items:center; justify-content:space-between; font-size:9px; }
.settings-window .color-customization input { padding:3px; width:35px; height:29px; flex:0 0 35px; background:var(--card); border-radius:7px; cursor:pointer; }
.language-setting { display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:18px; border-top:1px solid var(--border); padding-top:14px; margin-top:16px; }
.language-setting select { width:142px; }
.settings-footnote { color:var(--secondary); font-size:9px; line-height:1.65; margin:12px 0 0; }
.board-stage { display:flex; align-items:stretch; gap:11px; min-width:0; }
.board-stage .c10-board { flex:1 1 0; min-width:0; margin:0; }
.live-evaluation { flex:0 0 24px; width:24px; min-height:0; display:flex; flex-direction:column; gap:6px; text-align:center; user-select:none; }
.live-eval-score { display:block; flex:0 0 auto; font-size:9px; font-weight:800; color:var(--foreground); line-height:1.25; min-height:12px; overflow-wrap:anywhere; }
.live-eval-score { white-space:nowrap; overflow:visible; overflow-wrap:normal; align-self:center; font-variant-numeric:tabular-nums; letter-spacing:-.3px; }
.live-eval-rail { position:relative; flex:1 1 auto; min-height:120px; overflow:hidden; border-radius:7px; background:#25304a; border:1px solid #43516d; box-shadow:inset 0 2px 4px #0003; }
.live-eval-white { position:absolute; bottom:0; left:0; width:100%; background:linear-gradient(90deg,#faf9f2,#dce6f2); transition:height .4s ease; }
.live-eval-center { position:absolute; top:50%; left:0; right:0; height:1px; background:#a5b7cd80; }
.live-eval-label { font-size:8px; font-weight:800; color:var(--secondary); line-height:1.1; }
.live-evaluation[data-view-side=b] .live-eval-white { bottom:auto; top:0; }
.live-evaluation[data-view-side=b] .live-eval-label { order:-1; }
.live-eval-panel { padding:18px; border-top:3px solid var(--green); background:linear-gradient(155deg,var(--teal-soft),var(--card) 45%); }
.live-eval-panel .panel-heading { align-items:center; margin-bottom:10px; }
.live-eval-panel .panel-heading h2 { margin:0; font-size:17px; }
.insight-badge { font-size:6px; font-weight:800; letter-spacing:.7px; color:var(--green); background:var(--teal-soft); border:1px solid color-mix(in srgb,var(--green) 22%,transparent); padding:4px 6px; border-radius:5px; white-space:nowrap; }
.live-eval-status { font-size:11px; line-height:1.6; color:var(--foreground); margin:0 0 11px; }
.live-eval-history { display:grid; gap:0; list-style:none; margin:0; padding:0; max-height:248px; overflow:auto; scrollbar-width:thin; }
.live-eval-history li { display:flex; align-items:center; justify-content:space-between; gap:7px; padding:8px 0; border-bottom:1px solid var(--border); font-size:10px; color:var(--secondary); }
.live-eval-history li:last-child { border-bottom:0; }
.live-eval-history strong { color:var(--foreground); font-variant-numeric:tabular-nums; white-space:nowrap; }
.live-eval-history .best,.live-eval-history .excellent,.live-eval-history .good { color:var(--green); }
.live-eval-history .brilliant { color:var(--primary); }
.live-eval-history .inaccuracy { color:#ab7a24; }
.live-eval-history .mistake { color:#be7542; }
.live-eval-history .blunder { color:var(--red); }
.dragon-tip { padding:18px; background:linear-gradient(135deg,var(--purple-soft),var(--card) 82%); }
.dragon-tip-heading { display:flex; align-items:center; gap:11px; }
.dragon-tip-heading > svg { width:38px; height:45px; background:var(--board-dark); padding:3px; border-radius:8px; flex:0 0 38px; }
.dragon-tip .eyebrow { margin-bottom:5px; font-size:6px; letter-spacing:1px; }
.dragon-tip h2 { font-size:17px; margin:0; letter-spacing:-.4px; }
.dragon-tip > p { color:var(--secondary); font-size:10px; margin:14px 0; }
.dragon-tip-coordinates { display:flex; align-items:center; gap:10px; font-size:10px; background:var(--card); border:1px solid var(--border); border-radius:8px; padding:9px 10px; font-weight:650; }
.dragon-tip-coordinates span:first-child { color:var(--primary); }
.dragon-tip-coordinates b { color:var(--purple); }
.dragon-tip > a { display:inline-block; color:var(--primary); font-size:10px; text-decoration:none; font-weight:700; margin-top:13px; }
.dragon-tip > a span { margin-left:4px; }
.history-panel { padding:18px 20px; }
.history-panel ol { columns:2; column-gap:30px; }
.history-panel li { break-inside:avoid; }
.account-toggle { display:flex; align-items:center; gap:7px; white-space:nowrap; }
.account-toggle svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; }
.theme-button { display:flex; align-items:center; gap:6px; white-space:nowrap; }
.theme-icon { font-size:17px; line-height:1; }
.rules-section { max-width:1200px; margin-left:auto; margin-right:auto; }
#c10-board[data-frame=midnight] { border:2px solid #3b4967; border-radius:12px; box-shadow:0 5px 16px #11192a26; }
#c10-board[data-frame=walnut] { border:3px double #936b44; border-radius:7px; box-shadow:0 4px 0 #493221,0 7px 15px #36240f26; }
#c10-board[data-frame=ivory] { border:3px solid #e2d2ad; border-radius:12px; box-shadow:0 3px 0 #b6a57f,0 5px 16px #56452115; }
#c10-board[data-frame=neon] { border:2px solid #57dfc5; border-radius:8px; box-shadow:0 0 0 2px #57dfc51c,0 0 19px #57dfc530; }
@media(min-width:1001px) {
 #game-settings .settings-window { display:grid !important; }
 .game-layout > .board-card { border-radius:16px; }
}
@media(max-width:1000px) {
 .site { max-width:860px; }
 .game-layout { grid-template-columns:minmax(0,1fr); max-width:820px; }
 .game-layout > .board-card { grid-column:1; grid-row:1; }
 .game-layout > .history-panel { grid-column:1; grid-row:2; }
 .workspace-sidebar { grid-column:1; grid-row:3; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; align-items:start; }
 #game-settings { grid-column:1 / -1; }
 #game-settings .settings-window { display:none; }
 #game-settings[data-open=true] .settings-window { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:15px; border:1px solid var(--border); border-radius:15px; background:var(--card); box-shadow:var(--shadow); }
 .settings-window-heading { grid-column:1 / -1; }
 #settings-close { display:block; font-size:22px; line-height:1.2; padding:0 6px; }
 .appearance-panel { grid-column:2; grid-row:2 / span 2; }
 .settings-window #bot-settings, .settings-window #online-settings { grid-column:1; }
 .workspace-intro h1 { font-size:27px; }
 .workspace-intro .intro-guide { display:none; }
 .rules-section { max-width:820px; }
}
@media(max-width:600px) {
 .site { padding:0 12px; }
 .site-header { min-height:68px; gap:10px; }
 .brand { gap:8px; font-size:15px; letter-spacing:1.5px; }
 .brand small { font-size:5px; letter-spacing:1px; }
 .brand-mark { width:35px; height:35px; }
 .site-header nav { gap:5px; }
 .site-header nav > a { display:none; }
 .site-header nav .theme-button { padding:7px; }
 .site-header nav .settings-toggle { padding:7px 9px; }
 .site-header nav .account-toggle { padding:8px 9px; font-size:11px; }
 .account-toggle svg,.theme-label,.settings-label { display:none; }
 .workspace-intro { padding:20px 2px 17px; gap:10px; }
 .workspace-intro h1 { font-size:25px; line-height:1.2; letter-spacing:-.8px; margin-bottom:6px; }
 .workspace-intro .eyebrow { font-size:6px; letter-spacing:1px; }
 .workspace-intro p:last-child { font-size:10px; max-width:285px; }
 .game-layout { gap:14px; }
 .game-layout > .board-card { padding:10px; border-radius:13px; }
 .board-heading { gap:8px; }
 .mode-tabs button { padding:7px 8px; }
 .board-stage { gap:7px; }
 .live-evaluation { width:19px; flex-basis:19px; gap:4px; }
 .live-eval-score { font-size:8px; }
 .live-eval-rail { border-radius:5px; }
 .live-eval-label { font-size:6px; }
 .history-panel { padding:17px; }
 .history-panel ol { columns:1; }
 .workspace-sidebar { grid-template-columns:minmax(0,1fr); gap:14px; }
 #game-settings[data-open=true] .settings-window { grid-template-columns:minmax(0,1fr); padding:10px; }
 .settings-window #bot-settings,.settings-window #online-settings,.appearance-panel { grid-column:1; grid-row:auto; }
 .settings-window .panel { padding:16px; }
 .live-eval-panel,.dragon-tip { padding:18px; }
 .live-eval-history { max-height:200px; }
 .rules-section { margin-top:16px; }
}
@media(max-width:420px) {
 .brand small { display:none; }
 .board-format { font-size:9px; letter-spacing:0; white-space:nowrap; }
 .mode-tabs button { padding:7px 6px; font-size:9px; }
 .mode-tabs button span { margin-right:1px; }
 .manual-controls label { min-width:100px; }
 .settings-window .settings-grid { gap:8px; }
 .workspace-intro h1 { font-size:23px; }
}
@media(prefers-reduced-motion:reduce) { .live-eval-white { transition:none; } }

/* Review keeps the controls and recommendations beside the position. */
.workspace-sidebar > .analysis-panel { margin-top:0; padding:18px; background:var(--card); border-top:3px solid var(--purple); }
.analysis-best { margin:13px 0; padding:13px; border-radius:10px; background:var(--teal-soft); border:1px solid color-mix(in srgb,var(--green) 25%,var(--border)); }
.analysis-best .eyebrow { color:var(--green); font-size:8px; margin-bottom:7px; }
.analysis-best strong { display:block; font-size:14px; }
.analysis-best button { margin-top:8px; width:100%; }
.analysis-best .subtle { margin:7px 0 0; }
.analysis-panel .analysis-navigation { gap:4px; }
.analysis-panel .analysis-navigation button { padding:9px 5px; font-size:10px; }
.analysis-navigation #analysis-start,.analysis-navigation #analysis-end { flex:0 0 31px; }
.analysis-move[aria-pressed=true] { border-color:var(--purple); background:var(--purple-soft); }
body[data-analyzing=true] .workspace-sidebar > #game-settings,body[data-analyzing=true] .workspace-sidebar > #live-eval-panel,body[data-analyzing=true] .workspace-sidebar > .dragon-tip { display:none !important; }
body[data-analyzing=true] #c10-manual,body[data-analyzing=true] .c10-legend,body[data-analyzing=true] #c10-analysis-launch { display:none !important; }
@media(min-width:1001px) {
 body[data-analyzing=true] .workspace-sidebar { position:sticky; top:94px; grid-row:1; align-self:start; }
 .workspace-sidebar > .analysis-panel { max-height:calc(100dvh - 112px); overflow:auto; scrollbar-width:thin; }
 .workspace-sidebar .analysis-moves { max-height:260px; }
 .workspace-sidebar .analysis-panel .section-heading h2 { font-size:20px; }
}
@media(max-width:1000px) { .workspace-sidebar > .analysis-panel { grid-column:1 / -1; } }