:root {
  color-scheme: light;
  --paper: #f7f5ee;
  --ink: #202c25;
  --muted: #5d685f;
  --forest: #223e34;
  --ochre: #9b4827;
  --line: #d5d7c9;
  --light: #ede4ca;
  --dark: #77927a;
  --serif: Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); font: 16px/1.5 system-ui, sans-serif; }
main { flex: 1; }
.wrap { width: min(1180px, calc(100% - clamp(36px, 8vw, 128px))); margin-inline: auto; }
button, input { font: inherit; }
a, button { touch-action: manipulation; }
a { color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid #ad5024; outline-offset: 4px; }
.mast { border-bottom: 1px solid var(--line); }
.mast-inner, .brand, nav, .eyebrow, .study-top, .study figcaption, .room-title, .folio, .archive-heading, footer .wrap { display: flex; align-items: center; }
.mast-inner { min-height: 78px; justify-content: space-between; gap: 18px; }
.brand { text-decoration: none; gap: 10px; font: 23px var(--serif); letter-spacing: -.055em; white-space: nowrap; }
.brand b { font-weight: 600; }
nav { align-self: stretch; gap: clamp(16px, 3vw, 38px); }
nav a { display: grid; align-items: center; position: relative; font-size: .88rem; font-weight: 600; color: var(--muted); text-decoration: none; }
nav a[aria-current="page"] { color: var(--ink); }
nav a[aria-current="page"]::after { content: ""; position: absolute; height: 3px; background: var(--ochre); bottom: -1px; inset-inline: 0; }
.hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(38px, 7vw, 100px); padding: clamp(40px, 5.3vw, 78px) 0; }
.hero-copy { max-width: 510px; }
.eyebrow, .study-top, .folio, .notation-head small, .study figcaption small, footer .wrap > :last-child { font-size: .67rem; font-weight: 700; letter-spacing: .15em; }
.eyebrow { color: var(--muted); gap: 11px; }
.rule { display: inline-block; width: 25px; height: 2px; background: var(--ochre); }
h1, h2, p, figure { margin: 0; }
h1, h2 { font-family: var(--serif); font-weight: 500; }
h1 { margin: 20px 0; font-size: clamp(3.8rem, 6.65vw, 6.6rem); line-height: .99; letter-spacing: -.069em; }
h1 em { color: var(--ochre); font-weight: 400; }
.intro { font-size: 1.02rem; line-height: 1.65; color: var(--muted); max-width: 44ch; }
#create-form, #join-form { margin-top: 28px; max-width: 355px; }
form > label, legend { display: block; font-size: .82rem; font-weight: 650; margin-bottom: 7px; }
input:not([type="radio"]) { display: block; width: 100%; color: var(--ink); background: #fffcf6; border: 1px solid #a7b09e; border-radius: 5px; padding: 11px 13px; font-size: 1rem; }
input::placeholder { color: #777e72; }
.tempos { border: 0; padding: 0; margin: 16px 0 18px; }
legend { padding: 0; }
.options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.options label { position: relative; }
.options input { opacity: 0; position: absolute; inset: 0; margin: 0; cursor: pointer; }
.options span { display: block; text-align: center; font-size: .89rem; font-weight: 650; border: 1px solid var(--line); border-radius: 5px; padding: 8px 4px; }
.options input:checked + span { background: #e3eadd; border-color: #617d64; color: #203e2c; }
.options input:focus-visible + span { outline: 3px solid var(--ochre); outline-offset: 2px; }
.primary { width: 100%; background: var(--forest); color: white; border: 1px solid var(--forest); border-radius: 5px; min-height: 48px; padding: 10px 17px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 650; }
.primary:hover { background: #304f40; }
.primary:disabled { opacity: .55; }
.primary span { font-size: 1.2rem; }
.study { position: relative; isolation: isolate; overflow: hidden; padding: clamp(18px, 3vw, 45px); border-radius: 12px; background: var(--forest); color: #f7edd6; box-shadow: 0 12px 30px #25352b10; }
.study::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(135deg, transparent 0 12px, #c0caa508 12px 13px); }
.study-top, .study figcaption, .folio, .archive-heading, footer .wrap { justify-content: space-between; }
.study-top { font-size: .61rem; line-height: 1.4; color: #d4dbc8; padding-bottom: 13px; border-bottom: 1px solid #a1b69755; }
.board { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); aspect-ratio: 1; width: 100%; }
.study-board { width: 88%; margin: clamp(16px, 2.5vw, 36px) auto; border: 3px solid #dbcfa8; box-shadow: 0 5px 0 #132a22, 0 9px 22px #0d241d55; }
.study figcaption { border-top: 1px solid #a1b69755; padding-top: 13px; }
.study figcaption small { display: block; font-size: .59rem; color: #c6d2bd; }
.study figcaption b { font: italic clamp(1.5rem, 2vw, 2.15rem) var(--serif); }
.study-mark { font-size: 2rem; line-height: 1; color: #c7b785; }
.square { position: relative; background: var(--light); padding: 0; border: 0; border-radius: 0; display: grid; place-items: center; min-width: 0; line-height: 1; }
.square.dark { background: var(--dark); }
.square.last::before, .square.selected::before { content: ""; position: absolute; inset: 0; background: #d1b54966; }
.square.selected::before { background: #dcc35b99; box-shadow: inset 0 0 0 3px #976a21; }
.square.target::after { content: ""; width: 22%; aspect-ratio: 1; border-radius: 100%; background: #1d382b60; position: absolute; }
.square.capture::after { width: 88%; background: transparent; border: clamp(3px, .4vw, 6px) solid #213d2a70; }
.playable .square:focus-visible { z-index: 1; outline: 3px solid #963d21; outline-offset: -3px; }
.piece { width: 87%; height: 87%; position: relative; fill: var(--piece); stroke: var(--edge); stroke-width: 1.55; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.piece.white { --piece: #fff8e9; --edge: #354038; --engraving: #53594d; }
.piece.black { --piece: #26372d; --edge: #13271c; --engraving: #c4c8a8; }
/* Referenced symbols inherit these variables through their owning SVG. */
symbol .cut { fill: none; stroke: var(--engraving); stroke-width: 1.15; }
symbol .cross { fill: none; stroke: var(--edge); stroke-width: 3; }
symbol .eye { fill: var(--edge); stroke: none; }
.coord { position: absolute; font-size: clamp(.52rem, .85vw, .72rem); line-height: 1; color: #395c44; font-weight: 700; pointer-events: none; }
.dark .coord { color: #f4f1d7; }
.rank { top: 4%; left: 4%; }
.file { bottom: 3%; right: 4%; }
.archive { padding: 35px 0 55px; border-top: 1px solid var(--line); scroll-margin: 20px; }
.archive-heading { margin: 10px 0 20px; }
.archive h2, .scorecard h2, dialog h2 { font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.08; letter-spacing: -.05em; }
.accent { color: var(--ochre); }
.archive-count { color: var(--muted); font: italic 1.35rem var(--serif); }
.empty-card, .saved-game { border: 1px solid var(--line); border-radius: 7px; background: #faf9f2; padding: 17px 20px; }
.empty-card { color: var(--muted); }
.empty-card strong { display: block; color: var(--ink); margin-bottom: 3px; }
.empty-card p { font-size: .89rem; }
.saved-game { display: flex; align-items: center; gap: 16px; text-decoration: none; margin-top: 7px; }
.saved-game:hover { border-color: #7c8a73; }
.saved-game span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.saved-game strong, .saved-game small { display: block; }
.saved-game small, .muted, .board-help, .link-hint { color: var(--muted); }
.saved-game small { font-size: .8rem; }
.saved-game .game-arrow { color: var(--ochre); }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 650; color: #3b513e; background: #e5ebde; border: 1px solid #cdd8c4; padding: 5px 11px; border-radius: 99px; white-space: nowrap; }
.back, .link-button, .resign { color: var(--muted); font-size: .84rem; }
.back { display: inline-block; margin: 22px 0; text-decoration: none; font-weight: 600; }
.back:hover, .link-button:hover, .resign:hover { text-decoration: underline; }
.join-panel { padding-bottom: 70px; }
.join-panel .eyebrow { margin-top: 30px; }
.join-panel form button { margin-top: 15px; }
.room-title { justify-content: space-between; gap: 15px; margin: 4px 0 20px; }
.room-title h1 { font-size: clamp(3rem, 5vw, 4.4rem); margin: 9px 0 0; }
.game-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .95fr); align-items: start; gap: clamp(22px, 4vw, 62px); margin-bottom: 48px; }
.play-area { min-width: 0; }
.playable { border: 2px solid var(--forest); background: var(--forest); box-shadow: 0 4px 14px #25352b12; }
.player { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.player .pawn { font-size: 1.4rem; }
.player .identity { font-weight: 650; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.identity small { display: block; font-size: .71rem; color: var(--muted); font-weight: 500; }
.clock { min-width: 90px; text-align: center; font: 650 1.4rem/1.5 ui-monospace, monospace; font-variant-numeric: tabular-nums; letter-spacing: -.05em; padding: 2px 9px; color: #485448; background: #e3e6da; border-radius: 5px; }
.clock.running { background: var(--forest); color: white; }
.board-help, .link-hint { font-size: .8rem; }
.board-help { margin-top: 5px; }
.scorecard { background: #faf9f2; border: 1px solid var(--line); border-radius: 8px; padding: clamp(17px, 2.4vw, 32px); }
.folio { color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 13px; }
.folio span:last-child { color: var(--ochre); font-size: .95rem; }
.scorecard h2 { margin: 18px 0 7px; font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.scorecard .muted { font-size: .88rem; line-height: 1.5; }
.compact { min-height: 42px; font-size: .89rem; margin-top: 14px; }
.notation-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 22px 0 8px; }
.notation-head span { font-weight: 650; }
.notation-head small { font-size: .52rem; color: var(--muted); }
.move-list { border-block: 1px solid var(--line); max-height: 232px; overflow-y: auto; overscroll-behavior: contain; }
.move-list > p { padding: 15px 0; font-size: .83rem; color: var(--muted); }
.move-row { display: grid; grid-template-columns: 2.2rem 1fr 1fr; align-items: center; font: .9rem ui-monospace, monospace; }
.move-row:nth-child(even) { background: #eef0e6; }
.move-row > span { padding-left: 7px; color: var(--muted); }
.move-row button, .review button { background: transparent; color: var(--ink); border: 0; border-radius: 3px; }
.move-row button { text-align: left; padding: 7px; }
.move-row button[aria-current="step"] { background: #d8e3cf; font-weight: 700; }
.review { display: flex; justify-content: space-between; align-items: center; gap: 4px; margin-top: 9px; }
.review button { font: 1.55rem/1 var(--serif); width: 38px; height: 38px; }
.review button:hover:enabled { background: #e4e8da; }
.review button:disabled { color: #a4aca0; }
.review output { font: .77rem ui-monospace, monospace; white-space: nowrap; color: var(--muted); }
.link-button, .resign { border: 0; background: transparent; padding: 0; }
.link-button { margin-top: 19px; color: var(--forest); text-decoration: underline; text-underline-offset: .2em; font-weight: 650; }
.link-hint { display: block; margin-top: 2px; }
.resign { display: block; color: var(--ochre); margin-top: 16px; }
.notice { margin-top: 14px; padding: 9px 15px; border-left: 3px solid var(--ochre); background: #f0e6d7; color: #513421; font-size: .9rem; }
footer { margin-top: auto; border-top: 1px solid var(--line); color: var(--muted); }
footer .wrap { min-height: 66px; gap: 18px; }
footer .wrap > :first-child { font: italic 1.1rem var(--serif); }
footer .wrap > :last-child { font-size: .58rem; }
dialog { position: fixed; background: var(--paper); color: var(--ink); width: min(425px, calc(100vw - 32px)); padding: 30px; border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 12px 50px #11271c33; }
dialog::backdrop { background: #102d2270; }
.modal-close { position: absolute; top: 5px; right: 7px; width: 33px; height: 33px; border: 0; background: transparent; font-size: 1.5rem; color: var(--ink); }
dialog h2 { margin: 8px 0; font-size: 2rem; }
dialog p { color: var(--muted); margin-bottom: 16px; }
.dialog-options { display: flex; flex-wrap: wrap; gap: 7px; }
.dialog-options button { min-height: 42px; padding: 8px 13px; color: var(--ink); font-weight: 600; background: #e8ecdf; border: 1px solid var(--line); border-radius: 4px; }
@media (min-width: 1100px) { .game-layout { grid-template-columns: minmax(0, 620px) minmax(300px, 1fr); } }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; gap: 30px; }
  .hero-copy { max-width: none; }
  h1 { font-size: clamp(3.6rem, 10vw, 5.6rem); }
  .study { width: min(100%, 510px); justify-self: center; }
  .game-layout { grid-template-columns: 1fr; gap: 18px; }
  .scorecard { padding: 20px; }
}
@media (max-width: 480px) {
  .mast-inner { min-height: 64px; gap: 8px; }
  .brand { gap: 6px; font-size: 1.11rem; }
  .brand img { width: 30px; height: 30px; }
  nav { gap: 12px; }
  nav a { font-size: .75rem; }
  .room-title { align-items: end; gap: 8px; }
  .room-title .badge { font-size: .66rem; padding: 4px 8px; }
  .saved-game { padding: 11px; gap: 7px; }
  .saved-game .badge { font-size: .66rem; padding: 3px 6px; }
  .clock { min-width: 74px; font-size: 1.15rem; }
}