:root{--cream:#f6f3eb;--ink:#263c32;--muted:#778079;--green:#315d47;--paper:#fffef9;--line:#e0e3d7;font-family:Segoe UI,system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--cream);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{cursor:default;opacity:.48}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #bb7952;outline-offset:4px}.hidden{display:none!important}.topbar{max-width:1240px;margin:auto;padding:26px 38px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;gap:11px;align-items:center;font-size:19px;font-weight:650;letter-spacing:-.5px}.brand-mark{background:var(--ink);color:var(--cream);height:39px;width:39px;display:grid;place-items:center;border-radius:11px;font:30px Georgia,serif}.top-right{display:flex;align-items:center;gap:24px}.small-note{font-size:12px;color:var(--muted)}.languages{padding:3px;border:1px solid var(--line);border-radius:30px;display:flex;gap:2px}.languages button{background:none;border:none;border-radius:20px;padding:7px 10px;font-size:11px;color:var(--muted);font-weight:700}.languages button.active{background:var(--ink);color:white}main{max-width:1164px;margin:auto;padding:0 22px}.lobby{display:grid;grid-template-columns:1fr 1.04fr;gap:64px;align-items:center;padding:75px 16px 28px}.eyebrow{font-size:10px;letter-spacing:2.1px;font-weight:750;color:var(--green);line-height:1.6}.intro h1{font:400 clamp(62px,6.2vw,88px)/1.02 Georgia,serif;letter-spacing:-3px;margin:25px 0}.intro-copy{font-size:16px;color:#67746a;line-height:1.9;max-width:350px}.intro-foot{display:flex;align-items:center;gap:9px;color:var(--green);font-size:11px;letter-spacing:.2px;margin-top:32px}.tiny-disc{width:8px;height:8px;background:#7f9b71;border-radius:50%}.setup-card{padding:30px;background:var(--paper);border:1px solid var(--line);border-radius:24px;box-shadow:0 14px 55px #213e3110}.step{display:flex;align-items:center;gap:10px}.step>span{border:1px solid var(--line);color:var(--muted);font-size:9px;padding:4px 5px;border-radius:50%}.step h2{font-size:15px;font-weight:650;margin:0}.game-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:21px}.game-option{background:#f8f8f1;border:1px solid var(--line);border-radius:15px;text-align:left;padding:13px 15px 18px;position:relative;color:var(--ink);transition:background .2s,transform .2s}.game-option:hover{transform:translateY(-2px)}.game-option.selected{background:#edf0df;border-color:#869e75}.game-art{height:90px;display:block;position:relative}.chess-art{font:70px/1 Georgia,serif;transform:rotate(-9deg)}.chess-art>span{color:#9fae8c;font-size:45px;position:absolute;left:53px;top:24px;transform:rotate(19deg)}.checkers-art i{position:absolute;top:25px;left:12px;width:52px;height:52px;border-radius:50%;background:#ac6556;box-shadow:inset 0 0 0 5px #b77362,inset 0 0 0 7px #cf9485,0 5px 0 #7c463d;transform:rotateX(25deg)}.checkers-art i+i{top:10px;left:51px;background:#344c3e;box-shadow:inset 0 0 0 5px #46634f,inset 0 0 0 7px #76917b,0 5px 0 #22372a}.game-option strong{display:block;font-size:15px;margin-bottom:5px}.game-option small{display:block;font-size:11px;line-height:1.6;color:#76816f}.choice-check{position:absolute;right:10px;top:10px;font-size:10px;border:1px solid var(--line);color:transparent;border-radius:50%;width:18px;height:18px;text-align:center}.selected>.choice-check{background:var(--green);color:white;border-color:var(--green)}.step.second{margin-top:26px}.mode-options{display:flex;background:#f3f4ed;border-radius:11px;padding:4px;margin-top:16px;gap:4px}.mode-options button{border:none;background:none;color:var(--muted);padding:12px 6px;border-radius:8px;flex:1;font-size:12px;display:flex;justify-content:center;gap:7px}.mode-options button.selected{background:var(--paper);color:var(--ink);box-shadow:0 1px 5px #263c3212}.mode-hint{min-height:30px;color:var(--muted);font-size:11px;line-height:1.6;margin:13px 0}.primary,.secondary,.quiet{border-radius:10px;padding:12px 17px;font-size:12px;font-weight:650;border:1px solid transparent}.primary{background:var(--green);color:white}.primary:hover{background:#264c3a}.secondary{background:#f0f2e7;color:var(--ink);border-color:var(--line)}.quiet{background:none;color:var(--muted)}.start{width:100%;display:flex;justify-content:space-between;align-items:center;font-size:14px;padding:15px 19px}.start>span+span{font-size:23px;font-weight:400}.lobby-note{grid-column:1/-1;text-align:center;color:var(--muted);font-size:12px;display:flex;justify-content:center;align-items:center;gap:10px;padding:10px}.lobby-note>span:first-child{font-size:24px;color:#8e9c83}footer{max-width:1164px;padding:25px 38px;margin:25px auto 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:10px;letter-spacing:.3px}.play{padding:30px 0}.game-heading{display:flex;justify-content:space-between;align-items:center;margin:0 0 22px}.game-heading h1{font:400 32px Georgia,serif;margin:9px 0 0;letter-spacing:-1px}.text-button{border:none;background:none;color:var(--muted);font-size:11px;padding:4px 0}.text-button:hover{color:var(--green)}.connection{font-size:11px;display:flex;gap:7px;align-items:center;color:var(--muted)}.live-dot{width:7px;height:7px;border-radius:50%;background:#7fa17d}.live-dot.offline{background:#c08057}.table-layout{display:grid;grid-template-columns:minmax(0,650px) minmax(235px,1fr);gap:35px;align-items:start}.player-bar{display:flex;gap:10px;align-items:center;padding:12px 3px;font-size:13px}.player-bar.active .player-avatar{box-shadow:0 0 0 2px var(--cream),0 0 0 4px #91a777}.player-avatar{width:33px;height:33px;border-radius:50%;display:grid;place-items:center;font-size:23px;background:#dfe4d2}.player-avatar.dark-player{background:#31493b;color:var(--cream)}.player-name{font-weight:650}.player-subtitle{font-size:10px;color:var(--muted);margin-top:2px}.turn-pill{margin-left:auto;border-radius:20px;background:#e6ebd7;color:#5f7553;font-size:9px;padding:5px 9px;white-space:nowrap}.board-frame{background:#3a5141;border-radius:13px;padding:13px;box-shadow:0 10px 27px #293e321c}.board{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;overflow:hidden;border-radius:3px}.square{width:100%;aspect-ratio:1;padding:0;border:none;border-radius:0;position:relative;display:grid;place-items:center;background:#e8e7cf;color:var(--ink)}.square.dark{background:#76927c}.square.last{box-shadow:inset 0 0 0 100px #f6d77438}.square.selected{box-shadow:inset 0 0 0 100px #ebdd6e9c}.square.legal::after{content:"";background:#24493465;width:23%;height:23%;border-radius:50%;position:absolute;pointer-events:none}.square.legal.occupied::after{width:82%;height:82%;background:none;border:4px solid #375c48aa}.square.check{background:#c57f62}.square:focus-visible{z-index:2;outline-offset:-3px}.piece{font-family:Georgia,"Segoe UI Symbol",serif;font-size:clamp(25px,5vw,62px);line-height:1;pointer-events:none;filter:drop-shadow(0 2px 1px #273b3330);user-select:none}.piece.white{color:#fffcf0;-webkit-text-stroke:1px #485842}.piece.black{color:#263d30;-webkit-text-stroke:.6px #182d21}.coordinate{font-size:9px;position:absolute;left:4px;top:3px;color:#456149;pointer-events:none}.coordinate.file{top:auto;left:auto;right:4px;bottom:2px}.dark .coordinate{color:#f0f0df}.checker{height:72%;width:72%;border-radius:50%;display:grid;place-items:center;background:#b66f60;box-shadow:inset 0 0 0 4px #bd7b6c,inset 0 0 0 6px #d1a08e,0 3px 0 #7f493e;pointer-events:none;color:#fbead4;font:clamp(20px,4vw,38px) Georgia,serif}.checker.black{background:#34483b;box-shadow:inset 0 0 0 4px #46604c,inset 0 0 0 6px #83957d,0 3px 0 #23352a;color:#e8e9d3}.board-tools{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--muted);gap:10px;padding:10px 3px}.sidebar{display:flex;flex-direction:column;gap:15px;padding-top:8px}.status-card,.moves-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:23px}.status-card .eyebrow{margin-top:0}.status-card h2{font:400 26px Georgia,serif;letter-spacing:-.5px;margin:12px 0}.status-card>p:not(.eyebrow){font-size:12px;line-height:1.8;color:var(--muted);min-height:43px}.game-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:17px}.result-banner{background:#ecf0d9;padding:12px;border-radius:8px;font-size:12px;line-height:1.7}.invite-card{padding:22px;background:#e9edda;border:1px solid #dbe1c6;border-radius:16px}.invite-icon{float:right;font-size:24px;color:#7d926a}.invite-card h3,.moves-card h3{font-size:13px;margin:0 0 11px}.invite-card p{font-size:11px;line-height:1.7;color:#748064}.invite-card input{width:100%;padding:9px 10px;border:1px solid #d5ddc3;border-radius:7px;background:#ffffff70;font-size:10px;color:#53644e}.invite-card button{width:100%;margin-top:8px;background:#fafcf1}.invite-card .link-note{font-size:10px;margin-bottom:0}.card-heading{display:flex;justify-content:space-between;align-items:center}.card-heading>span{font-size:10px;color:var(--muted)}.moves-list{max-height:230px;overflow:auto;min-height:40px;font-size:12px}.empty-moves{font-size:11px;line-height:1.8;color:var(--muted);padding-top:7px}.move-row{display:grid;grid-template-columns:25px 1fr 1fr;gap:6px;padding:9px 5px;border-radius:4px}.move-row:nth-child(even){background:#f4f5ed}.move-number{font-size:10px;color:#9ba58f}.rules{padding:5px 10px;font-size:11px;line-height:1.9;color:var(--muted)}.rules summary{cursor:pointer;color:#59705a}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);padding:14px 21px;background:#273f32;color:#fffdf0;border-radius:12px;box-shadow:0 6px 30px #0002;font-size:12px;max-width:calc(100vw - 30px);z-index:10}.toast.error{background:#874c43}dialog{border:1px solid var(--line);border-radius:20px;padding:30px;background:var(--paper);color:var(--ink);max-width:90vw}dialog::backdrop{background:#14271c70;backdrop-filter:blur(3px)}dialog h2{font-family:Georgia,serif;font-weight:400}#promotion-options{display:flex;gap:8px;margin:20px 0}#promotion-options button{background:#eef0df;border:1px solid var(--line);border-radius:10px;font-size:43px;padding:8px 14px;color:var(--ink)}.sr-only{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}
.name-fields{display:grid;gap:12px;margin:16px 0 20px}.name-fields label,.names-card label,#join-dialog label{display:block;font-size:11px;line-height:1.6;color:var(--muted)}.name-fields input,.names-card input,#join-dialog input{display:block;width:100%;padding:10px 11px;margin-top:5px;border:1px solid var(--line);border-radius:8px;background:#fafbf4;color:var(--ink);font-size:13px}.names-card{padding:22px;background:var(--paper);border:1px solid var(--line);border-radius:16px}.names-card h3{font-size:13px;margin:0 0 14px}.names-card label{margin-bottom:11px}.names-card input[readonly]{background:#eef0e6;color:#7b8473}.names-card .secondary{width:100%}.names-card .link-note{font-size:10px;line-height:1.7;color:var(--muted);margin-bottom:0}.player-name{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#join-dialog{width:390px}#join-dialog .primary{margin-right:15px}
@media(max-width:900px){.lobby{gap:30px;padding-top:50px}.intro h1{font-size:62px}.setup-card{padding:23px}.table-layout{gap:22px;grid-template-columns:minmax(0,1fr) 260px}.board-frame{padding:9px}.piece{font-size:5.4vw}}@media(max-width:700px){.topbar{padding:18px 20px}.brand{font-size:16px}.small-note{display:none}.top-right{gap:10px}main{padding:0 16px}.lobby{grid-template-columns:1fr;padding:35px 0 10px;gap:26px}.intro{text-align:center}.eyebrow{font-size:9px;letter-spacing:1.7px}.intro h1{font-size:60px;margin:16px 0;letter-spacing:-2px}.intro-copy{max-width:360px;font-size:14px;line-height:1.8;margin:0 auto}.intro-foot{margin-top:18px;justify-content:center;font-size:10px}.setup-card{padding:23px}.game-art{height:78px}.lobby-note{padding:5px 10px;font-size:11px;line-height:1.7}.lobby-note>span:first-child{display:none}.table-layout{grid-template-columns:1fr;gap:15px}.game-heading{margin-bottom:10px}.game-heading h1{font-size:27px}.play{padding-top:23px}.board-column{max-width:620px;width:100%;margin:auto}.board-frame{padding:8px;border-radius:9px}.piece{font-size:clamp(27px,9vw,58px)}.coordinate{font-size:8px;left:3px;top:2px}.checker{font-size:30px}.sidebar{display:grid;grid-template-columns:1fr 1fr;gap:12px}.status-card,.moves-card,.names-card{padding:18px}.names-card{grid-column:1/-1}.names-card form{display:grid;grid-template-columns:1fr 1fr;gap:10px}.names-card form button{grid-column:1/-1}.status-card h2{font-size:23px}.invite-card{grid-column:1/-1;grid-row:1;padding:18px}.invite-card input{font-size:12px}.rules{grid-column:1/-1}.game-actions{gap:3px}.game-actions button{font-size:11px;padding:9px}.status-card>p:not(.eyebrow){font-size:11px}.moves-list{max-height:190px}footer{padding:22px 20px;font-size:9px;margin-top:20px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Board dimensions follow their container rather than the whole viewport. */
select { font: inherit; max-width: 100%; min-height: 44px; }
.difficulty-fields { margin-top: 18px; }
.difficulty-fields label { display: block; color: var(--muted); font-size: 12px; margin: 10px 0 6px; }
.difficulty-fields select { width: 100%; padding: 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--paper); color: var(--ink); font-size: 16px; }
.difficulty-tag { font-size: 11px; color: var(--green); }
.clocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.clock-box { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 14px; background: #e6e9dd; border: 2px solid transparent; border-radius: 12px; }
.clock-box span { font-size: 12px; overflow-wrap: anywhere; min-width: 0; }
.clock-box strong { font-size: clamp(22px, 4vw, 30px); font-variant-numeric: tabular-nums; }
.clock-box.ticking { border-color: var(--green); background: #fffef9; }
.voice-card { min-width: 0; padding: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; }
.voice-card h3 { font-size: 14px; margin: 0 0 12px; }
.voice-card p { font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.voice-card .link-note { color: var(--muted); font-size: 10px; margin-bottom: 0; }
.voice-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.voice-actions button { max-width: 100%; }
html { -webkit-text-size-adjust: 100%; }
main, .lobby > *, .table-layout > *, .sidebar > *, .game-heading > *,
.player-bar > div, .name-fields label, .names-card label { min-width: 0; }
.board-frame { container-type: inline-size; }
.board { width: 100%; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.square { min-width: 0; min-height: 0; touch-action: manipulation; }
.piece { font-size: clamp(20px, 10cqi, 66px); }
.checker { font-size: clamp(16px, 6cqi, 38px); }
.player-avatar, .live-dot { flex-shrink: 0; }
.player-bar > div { flex: 1; }
.player-name { max-width: 100%; }
.turn-pill { flex-shrink: 0; }
.connection { max-width: 45%; overflow-wrap: anywhere; }
.board-tools { flex-wrap: wrap; }
.board-tools > span { min-width: 0; overflow-wrap: anywhere; }
.text-button, .languages button, .primary, .secondary, .quiet,
.mode-options button, .rules summary { min-height: 44px; }
.languages button { min-width: 44px; }
input { min-width: 0; min-height: 44px; }
.name-fields input, .names-card input, #join-dialog input,
.invite-card input { font-size: 16px; }
.intro-copy, .mode-hint, .status-card, .invite-card, .names-card,
.moves-card, .rules, .lobby-note { overflow-wrap: anywhere; }
.move-row { grid-template-columns: 25px minmax(0, 1fr) minmax(0, 1fr); }
dialog { width: min(420px, calc(100% - 24px)); max-width: calc(100% - 24px);
  max-height: calc(100dvh - 24px); overflow: auto; padding: 24px; }
#join-dialog { width: min(390px, calc(100% - 24px)); }
#promotion-options { width: 100%; gap: 6px; }
#promotion-options button { flex: 1; min-width: 0; min-height: 52px;
  padding: 8px 4px; font-size: clamp(28px, 9vw, 43px); }
.toast { overflow-wrap: anywhere; }
@media (max-width: 1000px) {
  .table-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .board-column { width: 100%; max-width: 650px; margin-inline: auto; }
  .sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px; width: 100%; max-width: 760px; margin-inline: auto; }
  .names-card, .rules, .invite-card { grid-column: 1 / -1; }
  .names-card form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .names-card form button { grid-column: 1 / -1; }
  .lobby { gap: 26px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .intro h1 { font-size: clamp(48px, 7vw, 62px); }
  .setup-card { padding: 22px; }
}
@media (max-width: 700px) {
  main { padding-inline: 12px; }
  .topbar { padding: 12px; gap: 8px; }
  .brand { gap: 7px; font-size: 15px; }
  .brand-mark { flex-shrink: 0; width: 34px; height: 34px; }
  .top-right { gap: 0; }
  .lobby { grid-template-columns: minmax(0, 1fr); }
  .intro h1 { font-size: clamp(46px, 14vw, 60px); }
  .setup-card { padding: 20px; }
  .game-option { min-width: 0; padding-inline: 12px; }
  .mode-options button { flex-wrap: wrap; }
  .board-frame { padding: 6px; }
  .sidebar { grid-template-columns: minmax(0, 1fr); }
  .names-card form { grid-template-columns: minmax(0, 1fr); }
  .status-card, .moves-card, .names-card, .invite-card { padding: 18px; }
  .invite-card { grid-row: auto; }
  .game-heading { gap: 10px; }
  .game-actions { gap: 8px; }
  .game-actions button { padding: 10px 14px; }
  footer { padding: 20px 12px; gap: 14px; flex-wrap: wrap; line-height: 1.7; }
}
@media (max-width: 360px) {
  .brand { font-size: 13px; }
  .brand-mark { width: 28px; height: 32px; }
  .languages button { padding-inline: 7px; }
  .setup-card { padding: 16px; }
  .game-options { gap: 8px; }
  .game-art { transform: scale(.85); transform-origin: left center; }
  .turn-pill { font-size: 8px; padding-inline: 6px; }
}