:root {
  color-scheme: light;
  font-family: 'Instrument Sans', 'Segoe UI', sans-serif;
  color: #252b21;
  background: #eee7d7;
  --ink: #252b21;
  --secondary: #57594c;
  --paper: #f8f3e9;
  --olive: #404b35;
  --line: #d9d0be;
  --light-square: #e6d6b9;
  --dark-square: #697655;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0 auto; max-width: 1200px; padding: 0 clamp(14px, 4vw, 54px) 34px; }
.masthead { height: 76px; border-bottom: 1px solid var(--line); display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.brand { color: inherit; text-decoration: none; font: 700 clamp(23px, 5vw, 32px)/1 'Instrument Serif', Georgia, serif; display: flex; align-items: center; gap: 10px; }
.mark { width: 25px; height: 25px; border-radius: 50%; background: #404b35; box-shadow: inset 0 0 0 4px #404b35, inset 0 0 0 5px #d8d3b9; }
.edition { font-size: 13px; color: var(--secondary); }
.layout { display: grid; grid-template-columns: minmax(0, 600px) minmax(280px, 350px); gap: clamp(24px, 5vw, 66px); align-items: center; justify-content: center; margin: clamp(24px, 5vw, 56px) auto 0; }
.table { min-width: 0; }
.frame { --gutter: clamp(18px, 3vw, 26px); display: grid; grid-template-columns: var(--gutter) minmax(0, 1fr); grid-template-rows: auto var(--gutter); background: #30392b; color: #e3dfc7; border-radius: 9px; padding: 7px 7px 1px 1px; box-shadow: 0 8px 22px #342f2429; }
.board { display: grid; grid-template: repeat(8, minmax(0, 1fr)) / repeat(8, minmax(0, 1fr)); aspect-ratio: 1; border-radius: 4px; overflow: hidden; }
.files, .ranks { display: grid; font: 600 clamp(9px, 1.9vw, 12px)/1 'Segoe UI', sans-serif; text-align: center; }
.files { grid-column: 2; grid-template-columns: repeat(8, 1fr); align-items: center; }
.ranks { grid-template-rows: repeat(8, 1fr); align-items: center; }
.square { position: relative; display: grid; place-items: center; border: 0; padding: 0; margin: 0; border-radius: 0; background: var(--light-square); }
.square.dark { background: var(--dark-square); }
.square.recent { background: #858d58; }
.square.selected { background: #abb671; box-shadow: inset 0 0 0 2px #f9e1a2; }
.square.can-select, .square.destination { cursor: pointer; }
.square.can-select:hover, .square.destination:hover { background: #819060; }
.square:focus-visible { outline: 3px solid #fff1a1; outline-offset: -3px; z-index: 1; }
.square.destination::after { content: ''; width: 27%; aspect-ratio: 1; background: #f6e2a1; border-radius: 50%; }
.piece { width: 75%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; pointer-events: none; position: relative; }
.piece::before { content: ''; position: absolute; inset: 15%; border-radius: 50%; border: 1px solid currentColor; opacity: .6; }
.piece.white { color: #9e7448; background: radial-gradient(circle at 38% 24%, #fff6db, #ebd1a2 80%); box-shadow: 0 3px 0 #9d7549, 0 5px 6px #27281c5c, inset 0 0 0 1px #fff2d4; }
.piece.black { color: #d0a56b; background: radial-gradient(circle at 40% 25%, #574740, #2d2625 84%); box-shadow: 0 3px 0 #241b16, 0 5px 6px #1a1a135c, inset 0 0 0 1px #957754; }
.piece.taken { opacity: .42; }
.piece.king::after { content: '♛'; font: 700 clamp(13px, 4vw, 30px)/1 Georgia, serif; }
.player { display: flex; gap: 10px; align-items: center; min-height: 38px; margin-bottom: 8px; font-size: 14px; font-weight: 650; }
.player.near { margin: 8px 0 0; }
.player .piece { width: 25px; flex: 0 0 25px; }
.count { font-size: 12px; color: var(--secondary); margin-left: auto; white-space: nowrap; }
.player.active::after { content: ''; width: 7px; height: 7px; background: #576e3c; border-radius: 50%; }
.panel { min-width: 0; padding: clamp(20px, 3.6vw, 34px); background: var(--paper); border: 1px solid var(--line); border-radius: 9px; }
h1 { font: 500 clamp(31px, 4vw, 49px)/1.02 'Instrument Serif', Georgia, serif; letter-spacing: -.038em; margin: 0 0 13px; overflow-wrap: anywhere; }
p { font-size: 14px; line-height: 1.5; }
.intro { color: var(--secondary); margin: 0 0 23px; }
.bot-link { display: block; margin-bottom: 18px; padding: 12px 10px; border-radius: 5px; background: var(--olive); color: #fff8e9; font-size: 14px; font-weight: 650; text-align: center; text-decoration: none; }
.bot-link:hover { background: #313b29; }
label { font-size: 13px; font-weight: 650; display: block; margin-bottom: 7px; }
input, button { font: inherit; color: inherit; min-width: 0; }
input { width: 100%; padding: 10px; min-height: 43px; background: #fffdf8; border-radius: 5px; border: 1px solid #bbb29f; }
button:not(.square) { background: transparent; border: 1px solid #bbb29f; border-radius: 5px; padding: 9px 10px; font-size: 13px; font-weight: 650; min-height: 42px; cursor: pointer; }
button:not(.square):disabled { opacity: .55; cursor: default; }
button.primary { width: 100%; margin-top: 10px; background: var(--olive); border-color: var(--olive); color: #fff8e9; font-size: 14px; }
button.primary:not(:disabled):hover { background: #313b29; }
button.text { padding-inline: 0; border: 0; text-decoration: underline; text-underline-offset: 3px; }
#actions { display: flex; flex-wrap: wrap; gap: 0 17px; margin-top: 11px; }
#resign-confirm { flex: 1 0 100%; }
#resign-confirm p { margin: 0 0 4px; }
#new-game { display: inline-block; margin-top: 18px; font-size: 14px; color: var(--ink); text-underline-offset: 3px; }
.input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.input-row input { font-family: ui-monospace, monospace; font-size: 12px; }
summary { cursor: pointer; font-size: 14px; font-weight: 650; }
details p { margin: 8px 0; color: var(--secondary); }
.invite + .recovery:not(:first-child) { margin-top: 18px; }
.rules { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 15px; }
.feedback { margin: 12px 0 0; color: #6f3a2d; }
@media (max-width: 760px) {
  .layout { grid-template-columns: minmax(0, 520px); align-items: start; gap: 18px; }
  .layout.lobby .panel { grid-row: 1; }
  .masthead { height: 58px; }
}
@media (max-width: 350px) { .edition { display: none; } }