:root {
  color-scheme: only light;
  --app: #f6f4ed;
  --paper: #fffef9;
  --ink: #20332a;
  --muted: #55675b;
  --green: #2b5542;
  --green-hover: #234737;
  --wash: #e7f0e6;
  --border: #d5dbcf;
  --sand: #f2e8d4;
  --brass: #f4bf62;
  --danger: #9c3a30;
  --serif: Georgia, "Times New Roman", serif;
  font-family: system-ui, sans-serif;
  font-size: 16px;
  color: var(--ink);
  background: var(--app);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: var(--green); }
:focus-visible { outline: 3px solid #326e52; outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }

.site-header { background: var(--paper); border-bottom: 1px solid var(--border); }
.header-content, .site-content { width: min(calc(100% - 2rem), 66rem); margin-inline: auto; }
.header-content {
  min-height: 4.125rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand {
  display: flex;
  gap: .7rem;
  align-items: center;
  font: 1.625rem/1.1 var(--serif);
  white-space: nowrap;
}
.button, .icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  border: 1px solid transparent;
  border-radius: .5rem;
  color: inherit;
  font-size: .875rem;
  font-weight: 680;
  text-decoration: none;
}
.button { padding: .55rem 1.05rem; }
.primary { background: var(--green); color: white; }
.primary:hover { background: var(--green-hover); }
.secondary, .icon-button { background: var(--paper); border-color: var(--border); color: var(--green); }
.secondary:hover, .icon-button:hover { background: var(--wash); }
.icon-button { width: 2.75rem; flex: none; font-size: 1.125rem; }
button:disabled { cursor: default; opacity: .5; }
.full { width: 100%; }
.eyebrow { color: var(--muted); font-size: .7rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.panel {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: .9rem;
  box-shadow: 0 3px 0 #e4e6dc;
}

.game-layout {
  --board-size: clamp(20rem, min(56vw, calc(100dvh - 13rem)), 35rem);
  display: grid;
  grid-template-columns: minmax(0, var(--board-size)) minmax(0, 24rem);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  justify-content: center;
  align-items: start;
  padding-block: clamp(1.25rem, 4vh, 2.5rem) 1.125rem;
}
.board-column { min-width: 0; display: grid; gap: .65rem; }
.player-strip {
  min-height: 3.25rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .35rem .85rem;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: .55rem;
}
.player-strip.active { background: var(--wash); border-color: #bcd0ba; }
.player-piece { display: grid; place-items: center; flex: 0 0 2rem; height: 2rem; }
.player-piece .piece { width: 100%; height: 100%; }
.player-info { min-width: 0; display: grid; line-height: 1.3; }
.player-name { font-size: .92rem; }
.player-side { color: var(--muted); font-size: .72rem; }
.active .player-side { color: var(--green); font-weight: 650; }
.clock {
  margin-inline-start: auto;
  color: var(--ink);
  font: clamp(1.05rem, 4.3vw, 1.55rem)/1 ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.active .clock { color: var(--green); }
.active .clock.urgent { color: var(--danger); }

.artwork-definitions { position: absolute; overflow: hidden; }
/* Keep authored chess colors even when the browser automatically darkens pages.
   This also covers previews, promotion choices and pieces lifted while dragging. */
.board, .piece, .artwork-definitions, .mini-board, .color-swatch, .brand-avatar {
  color-scheme: only light;
}
.board {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  border: clamp(3px, .5vw, 5px) solid var(--frame, #1d3228);
  border-radius: .5rem;
  overflow: hidden;
  background: var(--frame, #1d3228);
  box-shadow: 0 3px 0 #bcc9bc, 0 8px 20px #1b2c251c;
}
.play-board { touch-action: none; user-select: none; -webkit-user-select: none; }
.square {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: var(--square);
  background-image: var(--square-shading, linear-gradient(142deg, #ffffff09, #10191513));
  color: var(--coordinate);
  -webkit-tap-highlight-color: transparent;
}
.square.light { --square: var(--light-square); --coordinate: var(--light-ink); }
.square.dark { --square: var(--dark-square); --coordinate: var(--dark-ink); }
.square.light.last { --square: var(--light-last); --coordinate: var(--light-last-ink); }
.square.dark.last { --square: var(--dark-last); --coordinate: var(--dark-last-ink); }
.square:focus-visible { outline: 2px solid #fff; outline-offset: -3px; box-shadow: inset 0 0 0 5px #264638; z-index: 2; }
.square .piece { width: 88%; height: 88%; }
.square > .piece { position: relative; filter: drop-shadow(0 1px 1px #0b181746); }
.square.sliding { z-index: 3; }
.square > .capture-ghost { position: absolute; inset: 6%; }
.square.grabbable { cursor: grab; }
.square.drag-source > .piece { opacity: .3; }
.coord {
  position: absolute;
  z-index: 2;
  font: 750 clamp(.48rem, 1vw, .63rem)/1 system-ui, sans-serif;
  pointer-events: none;
}
.rank { left: 7%; top: 7%; }
.file { right: 7%; bottom: 7%; }
.square.last::before {
  --corner-top: #ffe8a7;
  content: "";
  position: absolute;
  inset: 6%;
  pointer-events: none;
  background:
    linear-gradient(var(--corner-top), var(--corner-top)) top left / 20% 2px no-repeat,
    linear-gradient(var(--corner-top), var(--corner-top)) top left / 2px 20% no-repeat,
    linear-gradient(#ffe8a7, #ffe8a7) top right / 20% 2px no-repeat,
    linear-gradient(#ffe8a7, #ffe8a7) top right / 2px 20% no-repeat,
    linear-gradient(#ffe8a7, #ffe8a7) bottom right / 20% 2px no-repeat,
    linear-gradient(#ffe8a7, #ffe8a7) bottom right / 2px 20% no-repeat,
    linear-gradient(#ffe8a7, #ffe8a7) bottom left / 20% 2px no-repeat,
    linear-gradient(#ffe8a7, #ffe8a7) bottom left / 2px 20% no-repeat;
}
.square.last.has-rank::before { --corner-top: transparent; }
.square.selected::after, .square.check::after, .square.legal::after { position: absolute; content: ""; pointer-events: none; }
.square.selected::after, .square.check::after { inset: 4%; border-radius: .15rem; border: 2px solid var(--brass); box-shadow: 0 0 0 1px #58462e; }
.square.check::after { border-color: var(--danger); box-shadow: 0 0 0 1px #f3d2bc; }
.square.legal::after { width: 19%; aspect-ratio: 1; border-radius: 50%; background: #365746; border: 1px solid #efeacd; }
.square.capture::after { width: 88%; background: transparent; border: 2px solid #ffd78c; box-shadow: 0 0 0 1px #3e5142; }
.piece { display: block; position: relative; overflow: hidden; aspect-ratio: 1; pointer-events: none; }
.piece-image { position: absolute; display: block; width: 600%; height: 200%; max-width: none; max-height: none; object-fit: fill; pointer-events: none; color-scheme: only light; }
.piece-w {
  --gem-body: var(--white-body); --gem-edge: var(--white-edge); --gem-seam: var(--white-seam);
  --gem-0: var(--white-tone-0); --gem-1: var(--white-tone-1); --gem-2: var(--white-tone-2);
  --gem-3: var(--white-tone-3); --gem-4: var(--white-tone-4); --gem-5: var(--white-tone-5); --gem-6: var(--white-tone-6);
}
.piece-b {
  --gem-body: var(--black-body); --gem-edge: var(--black-edge); --gem-seam: var(--black-seam);
  --gem-0: var(--black-tone-0); --gem-1: var(--black-tone-1); --gem-2: var(--black-tone-2);
  --gem-3: var(--black-tone-3); --gem-4: var(--black-tone-4); --gem-5: var(--black-tone-5); --gem-6: var(--black-tone-6);
}
.art-fill { fill: var(--gem-body); }
.art-edge { fill: none; stroke: var(--gem-edge); }
.art-facets { stroke: var(--gem-seam); stroke-width: .48; }
.art-tone-0 { fill: var(--gem-0); }
.art-tone-1 { fill: var(--gem-1); }
.art-tone-2 { fill: var(--gem-2); }
.art-tone-3 { fill: var(--gem-3); }
.art-tone-4 { fill: var(--gem-4); }
.art-tone-5 { fill: var(--gem-5); }
.art-tone-6 { fill: var(--gem-6); }
.drag-ghost { position: fixed; inset: 0 auto auto 0; z-index: 8; pointer-events: none; will-change: transform; }
.drag-ghost .piece { width: 100%; height: 100%; filter: drop-shadow(0 3px 2px #20332a55); }

.game-sidebar { display: grid; min-width: 0; gap: 1rem; }
.game-panel { padding: clamp(1rem, 2.4vw, 1.5rem); }
.game-panel h1 { margin-top: .55rem; font: 2rem/1.12 var(--serif); }
.chips { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .75rem; }
.chip { background: var(--wash); color: var(--green); border-radius: 2rem; padding: .36rem .7rem; font-size: .73rem; font-weight: 700; }
.chip.sand { background: var(--sand); color: #5d4b32; }
.game-status { min-height: 1.35rem; margin-top: .95rem; color: var(--green); font-size: .875rem; font-weight: 680; }
#retry-engine { margin-top: .55rem; }
.move-history { margin-block: .9rem; border-top: 1px solid var(--border); }
.move-history summary { padding-block: .85rem; font-size: .8rem; font-weight: 750; cursor: pointer; color: var(--muted); }
.moves-scroll { max-height: 13.75rem; overflow: auto; border: 1px solid var(--border); border-radius: .48rem; background: var(--app); }
.moves-scroll table { width: 100%; border-collapse: collapse; text-align: left; font-size: .82rem; table-layout: fixed; }
.moves-scroll th:first-child { width: 2.5rem; }
.moves-scroll th, .moves-scroll td { padding: .55rem .6rem; }
.moves-scroll th { position: sticky; top: 0; background: var(--app); box-shadow: inset 0 -1px var(--border); }
.moves-scroll td { border-top: 1px solid var(--border); font-family: ui-monospace, Consolas, monospace; }
.last-san { background: #eeddb7; padding: .2rem .38rem; border-radius: .27rem; }
.empty-moves { color: var(--muted); font-size: .82rem; padding: .7rem .6rem; }
.controls-panel { padding: .95rem 1.15rem; border: 1px solid var(--border); background: #eceee5; border-radius: .75rem; }
.controls-panel p { margin-top: .45rem; color: var(--muted); font-size: .84rem; line-height: 1.55; }
.site-footer { padding-block: .25rem 1.25rem; color: var(--muted); font-size: .75rem; text-align: center; }

dialog {
  width: min(calc(100% - 1.5rem), 31rem);
  max-width: none;
  max-height: calc(100dvh - 1.5rem);
  margin: auto;
  padding: clamp(1rem, 3vw, 1.6rem);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: 0 18px 56px #14291f30;
  overflow: auto;
  overscroll-behavior: contain;
}
dialog::backdrop { background: #1c2c24a8; }
.setup-dialog.appearance-open { width: min(calc(100% - 1.5rem), 60rem); }
.dialog-header { display: flex; justify-content: space-between; align-items: start; gap: 1rem; margin-bottom: 1.05rem; }
.dialog-header h2 { font: 2.25rem/1.08 var(--serif); }
.dialog-header p { margin-top: .4rem; color: var(--muted); font-size: .875rem; }
.choice-set { margin: 0 0 .8rem; padding: .85rem 0 0; border: 0; border-top: 1px solid var(--border); min-width: 0; }
.choice-set legend { padding: 0 .4rem 0 0; color: var(--muted); font-size: .69rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.two-up { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.option { position: relative; display: block; cursor: pointer; }
.option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.option > span {
  min-height: 2.75rem;
  padding: .55rem .72rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: .5rem;
  background: var(--app);
  font-size: .85rem;
  line-height: 1.35;
}
.option input:checked + span { border-color: var(--green); background: var(--wash); box-shadow: inset 0 0 0 1px var(--green); }
.option input:focus-visible + span { outline: 3px solid #326e52; outline-offset: 2px; }
.option:hover > span { border-color: var(--green); }
.option small { color: var(--muted); }
.mode-option > span { align-items: center; font-weight: 700; background: var(--paper); }
.mode-option input:checked + span { background: var(--green); color: white; }
.clock-options .option small { margin-top: .2rem; font-family: ui-monospace, Consolas, monospace; }
.level-controls { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .1rem 0 .85rem; font-size: .88rem; }
.level-controls small { display: block; color: var(--muted); margin-top: .2rem; }
.stepper { display: flex; align-items: center; gap: .55rem; }
.stepper output { min-width: 3.1rem; text-align: center; font: .85rem ui-monospace, Consolas, monospace; }
.time-fields label, .color-field { display: grid; gap: .35rem; min-width: 0; font-size: .81rem; font-weight: 680; }
.time-fields input, .hex-field {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  border: 1px solid var(--border);
  border-radius: .45rem;
  padding: .45rem .65rem;
  background: white;
  color: var(--ink);
  font: 1rem ui-monospace, Consolas, monospace;
}
.form-hint { margin-block: .55rem .65rem; color: var(--muted); font-size: .76rem; }
.appearance-link { justify-content: space-between; border-color: var(--border); background: var(--app); }
.appearance-link:hover { background: var(--wash); }
#setup-appearance { color: var(--green); }
.start-button { margin-top: .65rem; }
.appearance-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.appearance-layout h3 { margin-block: 1rem .65rem; font: 1.4rem var(--serif); }
.theme-option > span { flex-direction: row; justify-content: start; align-items: center; gap: .6rem; background: var(--paper); }
.theme-option small { display: block; font-size: .68rem; }
.mini-board { flex: 0 0 1.6rem; height: 1.6rem; background: conic-gradient(var(--mini-dark) 25%, var(--mini-light) 25% 50%, var(--mini-dark) 50% 75%, var(--mini-light) 75%); }
.color-fields { row-gap: .7rem; }
.color-inputs { display: flex; position: relative; }
.color-swatch {
  position: absolute;
  inset: .25rem auto .25rem .25rem;
  width: 2.4rem;
  height: calc(100% - .5rem);
  padding: .22rem;
  border: 0;
  background: none;
  cursor: pointer;
}
.hex-field { padding-left: 2.85rem; }
.hex-field[aria-invalid="true"] { border-color: var(--danger); }
.appearance-actions { display: flex; justify-content: space-between; gap: .5rem; margin-top: 1.2rem; }
.appearance-actions .button { padding-inline: .75rem; }
.appearance-preview { min-width: 0; padding: .9rem; border: 1px solid var(--border); background: var(--app); border-radius: .75rem; }
.appearance-preview .eyebrow { margin-bottom: .65rem; }
.preview-board { pointer-events: none; }
.promotion-dialog { width: min(calc(100% - 1.5rem), 23rem); }
.promotion-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
.promotion-choices .button { aspect-ratio: 1; padding: .2rem; }
.promotion-choices .piece { width: 100%; }
.legal-page { max-width: 44rem; padding-block: 2rem; }
.legal-page h1 { font: 2.35rem var(--serif); }
.legal-page .panel { margin-top: 1.25rem; padding: 1.2rem; }
.legal-page .panel p { margin-top: .55rem; line-height: 1.5; }

@media (max-width: 849px) {
  .site-content { max-width: 37rem; }
  .game-layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding-top: 1rem; }
}
@media (max-width: 650px) {
  .appearance-layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .appearance-preview { width: min(100%, 24rem); margin-inline: auto; }
}
@media (max-width: 440px) {
  .header-content, .site-content { width: calc(100% - 1.25rem); }
  .header-content { min-height: 3.6rem; }
  .brand { font-size: 1.4rem; }
  .player-strip { min-height: 3rem; padding-inline: .55rem; }
  .board-column { gap: .5rem; }
  .dialog-header h2 { font-size: 1.95rem; }
}

/* Select artwork through inherited theme values, including drag and promotion. */
.faceted-piece { display: var(--faceted-display, inline); }
.classic-piece { display: var(--classic-display, none); }
.classic-body { fill: var(--gem-body); stroke: var(--gem-edge); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.classic-detail { fill: none; stroke: var(--gem-edge); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.unlock-row { display:flex; align-items:center; gap:.6rem; margin-top:.15rem; min-height:44px; }
.unlock-button { background:transparent; border:0; color:var(--muted); padding:.5rem .25rem; min-height:44px; font:inherit; font-size:.75rem; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.unlock-button:hover { color:var(--green); }
.unlock-button:disabled { cursor:default; text-decoration:none; }
#unlock-status { color:var(--muted); font-size:.75rem; }