:root {
  color-scheme: light;
  --page: #e5e7e1;
  --surface: #f6f7f3;
  --surface-raised: #ffffff;
  --surface-soft: #eef0eb;
  --ink: #202923;
  --muted: #536057;
  --soft-text: #6b766d;
  --line: #c8d0c7;
  --line-strong: #aeb9ae;
  --pine: #3e5f4b;
  --pine-dark: #2e4938;
  --pine-soft: #e0e9e1;
  --danger: #9a3f34;
  --danger-soft: #f2e4e1;
  --board-light: #e5e1d1;
  --board-dark: #839886;
  --font-ui: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--page);
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background: var(--page);
}
button, input, select, textarea { font: inherit; color: inherit; }
button, a, label { -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font-size: 16px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, .file-button:focus-within {
  outline: 3px solid #627f69;
  outline-offset: 3px;
}
[hidden] { display: none !important; }
.skip-link {
  position: fixed; z-index: 10; top: -100px; left: 8px;
  padding: 11px 14px; color: #fff; background: var(--pine-dark); font-weight: 700;
}
.skip-link:focus { top: 8px; }
.page-shell { width: min(100% - 48px, 1360px); margin: 0 auto; }
.topbar { height: 68px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 850; letter-spacing: .08em; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--pine); color: var(--pine-dark); font-size: 15px; font-weight: 800; letter-spacing: -.08em; }
.top-note { color: var(--muted); font-size: 14px; font-weight: 600; text-transform: capitalize; }
.main-nav { display: flex; gap: 8px; height: 56px; border-bottom: 1px solid var(--line); }
.nav-tab {
  position: relative; display: inline-flex; align-items: center; min-height: 100%; padding: 0 17px;
  border: 0; color: var(--muted); background: transparent; font-size: 15px; font-weight: 650;
  cursor: pointer; transition: background-color .16s ease, color .16s ease;
}
.nav-tab:hover { color: var(--ink); background: #dce1d9; }
.nav-tab.active { color: var(--pine-dark); }
.nav-tab.active::after { position: absolute; right: 16px; bottom: -1px; left: 16px; height: 3px; background: var(--pine); content: ""; }
#play-view { padding-bottom: 28px; }
.lobby {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .8fr);
  gap: clamp(28px, 5vw, 64px); align-items: center; max-width: 1210px;
  min-height: min(720px, calc(100dvh - 150px)); margin: 0 auto; padding: 28px 0 36px;
}
.lobby-board-column { width: min(100%, 68dvh, 700px); justify-self: center; }
.lobby-board { display: grid; aspect-ratio: 1; padding: 7px; border: 1px solid var(--line-strong); background: #d9ded7; box-shadow: 0 10px 28px #25332915; }
.preview-rank { display: grid; grid-template-columns: repeat(8, 1fr); }
.preview-rank i { display: block; }
.preview-rank:nth-child(odd) i:nth-child(odd), .preview-rank:nth-child(even) i:nth-child(even) { background: var(--board-light); }
.preview-rank:nth-child(odd) i:nth-child(even), .preview-rank:nth-child(even) i:nth-child(odd) { background: var(--board-dark); }
.preview-coordinates { display: grid; grid-template-columns: repeat(8, 1fr); padding: 7px 8px 0; color: var(--muted); font: 12px var(--font-mono); text-align: center; }
.preview-caption { max-width: 42rem; margin: 11px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.preview-caption strong { color: var(--ink); font-weight: 750; }
.lobby-copy {
  max-width: 440px; width: 100%; justify-self: center; padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line); background: var(--surface);
}
h1, h2, h3, p { overflow-wrap: break-word; }
h1 { margin: 0; font-size: clamp(28px, 3vw, 36px); line-height: 1.12; letter-spacing: -.045em; font-weight: 760; text-wrap: balance; }
.lobby-lede { margin: 9px 0 22px; color: var(--muted); font-size: 16px; line-height: 1.5; }
.setup-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 13px; }
.setup-fields > label, .setup-control label, .join-panel label, .invite-panel label, .room-theme-control label {
  display: block; align-self: end; margin: 5px 0 0; color: var(--ink); font-size: 14px; font-weight: 650;
}
.setup-fields > label + select { width: 100%; }
.setup-control { min-width: 0; }
.setup-control select { width: 100%; margin-top: 5px; }
select, input:not([type="file"]), textarea {
  min-width: 0; border: 1px solid var(--line-strong); border-radius: 4px;
  color: var(--ink); background: var(--surface-raised);
}
select { min-height: 46px; padding: 0 35px 0 12px; }
select:hover, input:hover, textarea:hover { border-color: var(--pine); }
.start-button { width: 100%; margin-top: 16px; }
.button {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 16px; border: 1px solid transparent; border-radius: 4px; font-size: 14px; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease, color .16s ease;
}
.button:active:not(:disabled) { transform: translateY(1px); }
.button:disabled { opacity: .52; cursor: not-allowed; }
.primary { color: #fff; background: var(--pine); }
.primary:hover:not(:disabled) { background: var(--pine-dark); }
.secondary { color: var(--ink); border-color: var(--line-strong); background: var(--surface-raised); }
.secondary:hover:not(:disabled) { border-color: var(--pine); color: var(--pine-dark); background: var(--pine-soft); }
.text-button { padding: 8px 3px; border: 0; color: var(--pine-dark); background: transparent; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.text-button:hover { color: var(--pine); }
.message { margin: 12px 0 0; font-size: 14px; line-height: 1.5; }
.error { color: var(--danger); }
.warning { padding: 11px 13px; border-left: 3px solid #8d7051; color: #3f3a32; background: #eeeae0; }
.theme-help { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.join-panel { margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--line); }
.join-panel > select, .invite-panel input, .room-theme-control select { width: 100%; min-height: 46px; margin: 7px 0 10px; padding: 0 11px; }
.join-panel .button, .invite-panel .button { width: 100%; }
#join-status, #invite-status { min-height: 20px; margin: 9px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.game-topline { display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 1240px; margin: 15px auto 8px; }
.game-topline h2 { margin: 0; font-size: clamp(20px, 2vw, 24px); letter-spacing: -.035em; font-weight: 720; }
.play-layout {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .68fr);
  gap: clamp(24px, 4vw, 56px); align-items: center; max-width: 1240px; margin: 0 auto;
}
.board-column { width: min(100%, 68dvh, 740px); justify-self: center; }
.player-strip { min-height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 6px; color: var(--ink); font-size: 14px; font-weight: 650; }
.player-token { width: 11px; height: 11px; border: 1px solid var(--pine); background: var(--pine); }
.player-side { margin-left: auto; color: var(--muted); font-size: 12px; }
.play-board-wrap { min-width: 0; padding: 5px; border: 1px solid var(--line-strong); background: #d9ded7; }
.play-board { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); aspect-ratio: 1; overflow: hidden; }
.play-square { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; padding: 0; border: 0; aspect-ratio: 1; cursor: pointer; }
.play-square.light { background: var(--board-light); }
.play-square.dark { background: var(--board-dark); }
.play-square img { width: 90%; height: 90%; object-fit: contain; pointer-events: none; }
.play-square.selected { box-shadow: inset 0 0 0 4px #234f36; }
.play-square.last-move { background-color: #b3c79c; }
.play-square.in-check { background-color: #c58577; }
.play-square.legal::after { position: absolute; width: 23%; height: 23%; border-radius: 50%; background: #243b2f99; content: ""; }
.play-square.legal:has(img)::after { width: 88%; height: 88%; border: 3px solid #243b2f99; background: transparent; }
.play-square.pending-move { box-shadow: inset 0 0 0 3px #647e5b; }
.play-square:focus-visible { z-index: 2; outline: 3px solid #263d30; outline-offset: -4px; }
.square-label { position: absolute; right: 3px; bottom: 2px; color: #26342a; font: 700 clamp(9px, .85vw, 12px) var(--font-mono); pointer-events: none; }
.play-square.dark .square-label { color: #f3f4ee; }
.live-reaction { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.live-reaction:empty { display: none; }
.live-reaction > * { width: 100%; height: 100%; object-fit: contain; }
.play-rail { display: grid; gap: 13px; min-width: 0; align-content: center; }
.job-status {
  min-height: 54px; display: flex; align-items: center; padding: 11px 14px;
  border: 1px solid var(--line); border-left: 4px solid var(--pine);
  color: var(--ink); background: var(--surface); font-size: 17px; font-weight: 700; line-height: 1.35;
}
.job-status.ready { border-left-color: var(--pine); background: var(--pine-soft); }
.job-status.failed { border-left-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
.play-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.play-actions .button { min-height: 44px; padding: 0 8px; font-size: 13px; }
.play-hint { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.move-panel { min-height: 165px; padding: 15px; border: 1px solid var(--line); background: var(--surface); }
.move-panel h3 { margin: 0; font-size: 16px; font-weight: 700; }
.move-panel ol { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; max-height: 300px; overflow: auto; margin: 12px 0 0; padding: 0; list-style: none; font: 14px/1.5 var(--font-mono); font-variant-numeric: tabular-nums; }
.move-panel li { padding: 5px 7px; color: var(--muted); }
.move-panel li.current { color: var(--pine-dark); background: var(--pine-soft); font-weight: 700; }
#move-list:empty::after { grid-column: 1 / -1; content: "No moves yet. Your opening move will appear here."; color: var(--muted); font: 14px/1.5 var(--font-ui); }
.game-exports { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.game-exports .button { min-height: 44px; padding: 0 8px; font-size: 13px; }
.rematch-button { width: 100%; }
.resign-confirm { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; padding: 12px; border: 1px solid var(--line-strong); color: var(--ink); background: var(--surface-raised); font-size: 14px; }
.invite-panel { padding-top: 15px; border-top: 1px solid var(--line); }
.invite-panel h3 { margin: 0 0 10px; font-size: 16px; }
.invite-panel label { display: block; color: var(--ink); font-size: 14px; }
.replay-view, .shared-view { max-width: 1050px; margin: 0 auto; padding: 30px 0 48px; }
.replay-heading { margin: 0 0 17px; }
.replay-heading h1 { font-size: clamp(27px, 3vw, 34px); }
.replay-heading p { max-width: 630px; margin: 8px 0 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.intake-card, .replay-section { margin-top: 16px; padding: clamp(15px, 2vw, 24px); border: 1px solid var(--line); background: var(--surface); }
textarea { display: block; width: 100%; min-height: 180px; padding: 14px; resize: vertical; font: 14px/1.6 var(--font-mono); }
textarea::placeholder { color: var(--soft-text); opacity: 1; }
.file-row { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; padding-top: 12px; }
.file-button { min-height: 42px; display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--pine-dark); font-size: 14px; font-weight: 650; cursor: pointer; }
#pgn-file { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; }
#file-name { max-width: 260px; overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.file-row .text-button { margin-left: auto; }
.action-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.quiet { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.replay-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 13px; }
.replay-section-heading h2 { margin: 0; font-size: 19px; }
.replay-section-heading p { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.games-list { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.game-choice { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 64px; padding: 10px 12px; border: 1px solid var(--line); background: var(--surface-raised); cursor: pointer; }
.game-choice:has(input:checked) { border-color: var(--pine); background: var(--pine-soft); }
.game-choice:has(input:disabled) { opacity: .58; cursor: not-allowed; }
.game-choice input { width: 18px; height: 18px; accent-color: var(--pine); }
.game-name { overflow: hidden; color: var(--ink); font-size: 15px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.game-details { margin-top: 4px; color: var(--muted); font-size: 13px; }
.game-count { color: var(--pine-dark); font-size: 12px; font-weight: 650; white-space: nowrap; }
.game-invalid { grid-column: 2 / -1; color: var(--danger); font-size: 13px; }
.job-card { margin-top: 17px; }
.job-card .job-status { margin: 10px 0; }
.job-light { width: 11px; height: 11px; margin-left: auto; border-radius: 50%; background: #9c7b4e; animation: pulse 1.5s ease-in-out infinite; }
.job-light.ready { background: var(--pine); animation: none; }
.job-light.failed { background: var(--danger); animation: none; }
.retry-status { margin-top: 8px; }
#replay-mount, #shared-player-mount { margin-top: 15px; }
.share-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.share-row input { min-width: 220px; flex: 1; min-height: 44px; padding: 0 11px; font-size: 13px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
footer { display: flex; justify-content: space-between; gap: 10px; padding: 17px 1px 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.replay { width: min(100%, 620px); margin: 0 auto; }
.replay canvas { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: #1b201c; }
.player-controls { display: grid; grid-template-columns: auto minmax(70px, 1fr) auto auto; align-items: center; gap: 9px; margin-top: 11px; }
.player-controls button { min-width: 44px; min-height: 44px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--ink); background: var(--surface-raised); font-size: 13px; font-weight: 700; cursor: pointer; }
.player-controls button:hover:not(:disabled) { border-color: var(--pine); color: var(--pine-dark); }
.player-controls button:disabled { opacity: .45; }
.player-controls input[type="range"] { width: 100%; accent-color: var(--pine); }
.player-time { min-width: 85px; color: var(--muted); font: 12px var(--font-mono); text-align: right; }
.player-message { min-height: 20px; margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.player-caption { min-height: 22px; margin: 9px 0 0; color: var(--ink); font-size: 15px; font-weight: 650; text-align: center; }
.native-replay { width: min(100%, 650px); }
.native-board { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line-strong); }
.native-square { position: relative; min-width: 0; min-height: 0; overflow: hidden; aspect-ratio: 1; }
.native-square.light { background: var(--board-light); }
.native-square.dark { background: var(--board-dark); }
.native-piece { position: absolute; z-index: 1; inset: 9%; width: 82%; height: 82%; object-fit: contain; pointer-events: none; }
.native-prop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.native-keyed-video { position: absolute; inset: 0; width: 100%; height: 100%; }
.native-reaction { position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; }
.native-reaction > img, .native-reaction > video, .native-reaction > canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; transform-origin: center; }
.native-reaction > .native-prop { object-fit: contain; }
.native-reaction.live-reaction-layer { pointer-events: none; }
.native-coordinate { position: absolute; z-index: 3; bottom: 2px; left: 3px; color: #25352b; font: 700 clamp(9px, 1vw, 12px) var(--font-mono); pointer-events: none; }
.native-square.dark .native-coordinate { color: #f6f7f1; }
.native-reaction > canvas { border: 0; background: transparent; }
.native-board:focus-visible { outline: 3px solid var(--pine); }
.promotion-dialog { width: min(320px, calc(100% - 24px)); padding: 18px; border: 1px solid var(--line-strong); border-radius: 5px; color: var(--ink); background: var(--surface); box-shadow: 0 18px 60px #15261c30; }
.promotion-dialog::backdrop { background: #20292366; }
.promotion-dialog h3 { margin: 0 0 13px; font-size: 16px; }
.promotion-choices { display: flex; justify-content: center; gap: 9px; }
.promotion-choices button { width: 58px; height: 58px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-raised); cursor: pointer; }
.promotion-choices img { width: 100%; height: 100%; object-fit: contain; }
@keyframes pulse { 50% { opacity: .62; } }
@media (max-width: 920px) {
  .page-shell { width: min(100% - 36px, 740px); }
  .lobby { grid-template-columns: minmax(0, 1fr); gap: 22px; min-height: 0; padding: 24px 0 34px; }
  .lobby-copy { order: 1; }
  .lobby-board-column { order: 2; }
  .lobby-board-column { width: min(100%, 57dvh, 490px); }
  .lobby-copy { max-width: 590px; justify-self: stretch; }
  .play-layout { grid-template-columns: minmax(0, 1fr); gap: 17px; }
  .board-column, .play-rail { display: contents; }
  .play-layout .play-rail > * { grid-column: 1 / -1; }
  .player-strip { grid-column: 1 / -1; }
  .opponent-strip { grid-row: 2; }
  .play-board-wrap { grid-row: 3; }
  .you-strip { grid-row: 4; }
  #play-status { grid-row: 1; }
  .board-column { width: min(100%, 68dvh, 620px); }
  .play-rail { grid-template-columns: 1fr 1fr; }
  .play-layout .button { width: 100%; }
  .play-actions .button { width: auto; }
}
@media (max-width: 640px) {
  .page-shell { width: min(100% - 28px, 560px); }
  .topbar { height: 60px; }
  .main-nav { height: 52px; gap: 2px; }
  .nav-tab { justify-content: center; flex: 1; padding: 0 7px; font-size: 14px; }
  .nav-tab.active::after { right: 9px; left: 9px; }
  .lobby { gap: 18px; padding: 19px 0 26px; }
  .lobby-board-column { width: min(100%, 43dvh, 340px); }
  .lobby-copy { padding: 19px; }
  h1 { font-size: 29px; }
  .lobby-lede { margin: 7px 0 16px; font-size: 15px; }
  .setup-fields { gap: 8px 10px; }
  .game-topline { margin-top: 10px; }
  .play-layout { gap: 13px; }
  .board-column { width: min(100%, 62dvh, 620px); }
  .player-strip { min-height: 37px; font-size: 13px; }
  .player-side { font-size: 11px; }
  .play-rail { gap: 10px; }
  .play-actions .button { min-height: 44px; padding: 0 7px; font-size: 13px; }
  .game-exports .button { min-height: 44px; font-size: 13px; }
  .move-panel { min-height: 135px; padding: 12px; }
  .move-panel ol { max-height: 190px; }
  .replay-view, .shared-view { padding-top: 23px; }
  .replay-heading p { font-size: 15px; }
  .action-row { align-items: stretch; flex-direction: column; }
  .action-row > .button { width: 100%; }
  .file-row .text-button { margin-left: 0; }
  .share-row .button { width: 100%; }
  .share-row input { min-width: 100%; }
}
@media (max-width: 380px) {
  .page-shell { width: calc(100% - 22px); }
  .brand { font-size: 12px; letter-spacing: .06em; }
  .top-note { font-size: 12px; }
  .nav-tab { font-size: 13px; }
  .setup-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px 8px; }
  .play-actions { gap: 5px; }
  .play-actions .button { padding: 0 5px; font-size: 12px; }
  .player-controls { grid-template-columns: auto minmax(50px, 1fr) auto; gap: 6px; }
  .player-controls .player-time { grid-column: 2 / -1; }
  footer { font-size: 11px; }
}
.guide-content { max-width: 48rem; margin: 3rem auto 4rem; line-height: 1.7; }
.guide-heading { padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.guide-lede { color: var(--muted); font-size: 1.15rem; }
.guide-section { margin-top: 2rem; }
.guide-section h2 { margin-bottom: .65rem; font-size: 1.4rem; }
.guide-section p { margin: .7rem 0; }
.guide-page .nav-tab { text-decoration: none; }
footer a { color: var(--pine-dark); text-underline-offset: .2em; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}