@charset "UTF-8";
:root {
  color-scheme: dark;
  --bg: #111b22;
  --panel: #19262f;
  --line: #d4deea17;
  --ink: #f0eee7;
  --muted: #a2afb7;
  --dim: #71828e;
  --gold: #d4b77f;
  --mint: #a9cebf;
  --serif: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --stage: min(630px, max(360px, calc(100dvh - 330px)));
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); font: 13px/1.7 var(--sans);
  background: radial-gradient(ellipse at 31% 20%, #2a3b452e, transparent 55%), radial-gradient(ellipse at 90% 90%, #1d34383d, transparent 50%), var(--bg);
}
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button, select { font: inherit; }
button { cursor: pointer; color: inherit; }
button:disabled { cursor: default; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
button { touch-action: manipulation; }
.shell { max-width: 1200px; margin: auto; padding: 0 44px; }
.masthead { height: 82px; display: flex; align-items: center; gap: 28px; border-bottom: 1px solid var(--line); }
.brand { display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--ink); font: 23px/1.15 var(--serif); letter-spacing: .17em; }
.brand-mark { display: grid; place-items: center; width: 37px; height: 43px; border: 1px solid #c8ab7955; border-radius: 13px 13px 3px 3px; color: var(--gold); font-size: 25px; background: linear-gradient(145deg, #c8ab7915, transparent); box-shadow: inset 0 0 0 3px #111b22; }
.brand small { display: block; margin-top: 7px; font: 8px/1 var(--sans); letter-spacing: .3em; color: #b8a582; }
.brand-caption { font: 11px var(--serif); color: var(--muted); letter-spacing: .08em; border-left: 1px solid var(--line); padding-left: 25px; }
nav { display: flex; align-items: center; gap: 25px; margin-left: auto; }
.text-button { padding: 7px 0; border: 0; background: none; color: var(--muted); font-size: 11px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.text-button:hover { color: var(--ink); }
.help-icon { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid #87959e; border-radius: 50%; font: 11px/1 var(--serif); }
.outline-button { border: 1px solid #c6ab7866; border-radius: 5px; background: #d4b77f0c; color: #e4cda4; padding: 9px 16px; font-size: 11px; transition: background .15s, border-color .15s; }
.outline-button:hover { background: #d4b77f18; border-color: #d4b77f; }
.intro { max-width: calc(var(--stage) + 338px); margin: auto; display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 80px; }
.room-title { display: flex; align-items: center; gap: 13px; }
.room-line { width: 3px; height: 20px; background: var(--gold); border-radius: 2px; }
h1 { font: 24px/1.4 var(--serif); font-weight: 500; letter-spacing: .15em; margin: 0; }
.mode-chip { color: #bdc8ce; background: #ffffff05; border: 1px solid #d4deea1a; font-size: 9px; padding: 3px 9px; border-radius: 20px; letter-spacing: .03em; }
.room-detail { display: flex; align-items: center; gap: 12px; font-size: 10px; color: var(--muted); }
.detail-divider { color: #51616c; }
.game-layout { display: grid; grid-template-columns: minmax(0, var(--stage)) 294px; gap: 40px; justify-content: center; align-items: start; }
.play-area { min-width: 0; }
.board-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 47px; padding: 0 3px 12px; }
.player-label { display: flex; align-items: center; gap: 10px; }
.player-avatar { display: inline-grid; place-items: center; flex-shrink: 0; width: 32px; height: 34px; font: 19px var(--serif); border-radius: 5px; border: 1px solid #62758355; background: linear-gradient(135deg, #344751, #1e2c35); color: #bfcbd0; }
.player-label strong { display: block; font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: .04em; }
.player-label small { display: block; color: var(--muted); font-size: 9px; line-height: 1.5; margin-top: 3px; }
.turn-pill { color: #bed6c9; background: #9bbfaa0b; border: 1px solid #9bbfaa25; border-radius: 20px; padding: 5px 10px; font-size: 9px; letter-spacing: .03em; white-space: nowrap; }
body[data-phase="thinking"] .turn-pill { color: #a9bbc6; border-color: #a9bbc625; }
body[data-phase="won"] .turn-pill { color: #e3c58c; background: #d4b77f10; border-color: #d4b77f40; }
.board-frame { position: relative; padding: 12px 13px 0 16px; border: 1px solid #6b6251; border-radius: 6px; background: linear-gradient(125deg, #665c4724, transparent 40%), #2e302c; box-shadow: 0 22px 45px #030a1033, 0 3px 6px #0004, inset 0 0 0 3px #c8b58b0a; }
.file-labels { display: grid; grid-template-columns: repeat(9, 1fr); height: 22px; margin-right: 21px; text-align: center; color: #c1b69b; font: 10px var(--serif); }
.board-row { display: flex; }
.board { position: relative; isolation: isolate; container-type: inline-size; display: grid; grid-template-columns: repeat(9, 1fr); width: calc(100% - 21px); aspect-ratio: 1; border: 1px solid #a08c6555; border-right: 0; border-bottom: 0; background: #1a2a34; box-shadow: 0 0 0 1px #131d1b, 0 2px 8px #0005; }
.board::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 15% 4%, #b9d5d31c, transparent 48%), radial-gradient(ellipse at 90% 50%, #7e9dba1a, transparent 55%), linear-gradient(155deg, transparent 20%, #99c6c70b 42%, transparent 54%, #a1c5d009 75%, transparent 90%); }
.cell { position: relative; isolation: isolate; display: grid; place-items: center; width: 100%; min-width: 0; aspect-ratio: 1; padding: 0; border: 0; border-right: 1px solid #846b4545; border-bottom: 1px solid #846b4545; background: linear-gradient(100deg, #fff3d307, #956e2c06 60%, #fff3d309), #c9b17d; transition: background-color .2s; }
.cell.lit:nth-child(3n) { background-color: #ccb681; }
.cell.lit:nth-child(5n) { background-color: #c7ae79; }
.cell.fog { background: transparent; border-color: #a9c1ce16; }
.cell.fog::before { content: ""; position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #91acbb22; }
.cell:hover { filter: brightness(1.08); }
.cell.selected { z-index: 2; background: #c7d0a0 !important; box-shadow: inset 0 0 0 2px #e6efc2, inset 0 0 17px #f7ffd333; }
.cell.reachable::after { content: ""; position: absolute; z-index: 4; width: 12px; height: 12px; border-radius: 50%; background: #314e3c9e; pointer-events: none; box-shadow: 0 0 0 3px #f1e5bf35; }
.cell.fog.reachable::after { width: 17px; height: 17px; background: #aad9cd0e; border: 1px solid #b2d4c38f; box-shadow: none; }
.cell.reachable:has(.piece:not(.ghost))::after { width: 88%; height: 91%; border: 2px solid #f2e8bb; background: none; box-shadow: none; border-radius: 2px; }
.cell.last-move { box-shadow: inset 0 0 0 2px #e5cc8e88; background-color: #d6bd84; }
.cell.last-move.fog { background-color: #57665444; }
.cell.fatal { background: #b9c29a !important; box-shadow: inset 0 0 0 2px #f2dfaf; }
.cell:focus-visible { outline: 2px solid #f4edca; outline-offset: -3px; z-index: 5; }
.piece { position: relative; isolation: isolate; z-index: 2; display: grid; place-items: center; width: 75%; height: 83%; padding-top: 9%; background: linear-gradient(110deg, #a17d42, #f4dfaa 55%, #9e773c); clip-path: polygon(50% 0, 89% 18%, 100% 100%, 0 100%, 11% 18%); font: 700 clamp(21px, 2.3vw, 31px)/1 var(--serif); color: #302b23; text-shadow: 0 1px 0 #fff3d950; user-select: none; transform: translateY(-1px); }
.piece::before { content: ""; position: absolute; z-index: -1; inset: 1px 1px 3px; clip-path: inherit; background: linear-gradient(115deg, #f9e5b2, #e7cc94 60%, #e2c38b); }
.piece::after { content: ""; position: absolute; z-index: -1; inset: 2px 2px 4px; clip-path: inherit; background: repeating-linear-gradient(96deg, transparent, transparent 4px, #9c733805 4px, #9c733805 5px); }
.piece-glyph { display: block; transform: translateY(1px); }
.piece.enemy { transform: rotate(180deg) translateY(-1px); color: #61392b; }
.piece.promoted { color: #a03d2d; }
.piece.ghost { opacity: .25; background: #c2d4d2; color: #c2d4d2; text-shadow: none; }
.piece.ghost::before { background: #29414b; }
.ghost-mark { position: absolute; z-index: 3; bottom: 1px; right: 4px; color: #b0c7ce; font: 10px ui-monospace, monospace; }
.board-footer { display: flex; align-items: center; gap: 14px; height: 34px; color: #c4c1b2; font-size: 8px; }
.board-footer > span { display: inline-flex; align-items: center; gap: 5px; }
.board-footer > span:last-child { margin-left: auto; color: #a5afa8; }
.board-footer i { width: 7px; height: 7px; display: inline-block; border: 1px solid #bbaa87; border-radius: 1px; font-style: normal; }
.legend-light { background: #c9b17d; }
.legend-fog { background: #213542; border-color: #6f8790 !important; }
.board-footer .legend-memory { width: auto; border: 0; font: 9px ui-monospace, monospace; }
.hand-panel { margin-top: 16px; padding: 0 3px; }
.hand-title { display: flex; align-items: center; gap: 10px; }
.own-avatar { width: 30px; height: 32px; font-size: 18px; color: #e4c891; border-color: #c9ac6e40; background: linear-gradient(145deg, #5b4c32, #36352c); }
.hand-title h2 { margin: 0; font-size: 11px; font-weight: 500; line-height: 1.5; }
.hand-title p { margin: 1px 0 0; font-size: 9px; color: var(--muted); }
.hand-title button { margin-left: auto; font-size: 10px; white-space: nowrap; }
.hand { min-height: 51px; margin-top: 8px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.hand-piece { position: relative; isolation: isolate; display: grid; place-items: center; width: 49px; height: 51px; border: 1px solid #c2ac7926; border-radius: 5px; background: #bda27008; padding: 0 0 5px; color: #e6d2a7; font: 24px var(--serif); transition: background .15s, border-color .15s; }
.hand-piece::before { content: ""; position: absolute; z-index: -1; width: 29px; height: 34px; top: 4px; clip-path: polygon(50% 0, 89% 18%, 100% 100%, 0 100%, 11% 18%); background: #ddbe8113; }
.hand-piece:hover, .hand-piece.active { border-color: #d4b77fa8; background: #cdb7841a; }
.hand-piece.active { box-shadow: 0 0 0 2px #d4b77f12; }
.hand-piece small { position: absolute; right: 4px; bottom: 2px; color: #cab991; font: 9px var(--sans); }
.hand-piece:disabled { opacity: .45; }
.hand.is-empty { gap: 8px; }
.hand-silhouette { width: 31px; height: 36px; display: grid; place-items: center; border: 1px solid #98adba16; border-radius: 4px; color: #8c9ba32e; font: 20px var(--serif); }
.hand-empty { color: var(--dim); font-size: 10px; margin-left: 6px; }
.sidebar { padding-top: 47px; min-width: 0; }
.turn-card { position: relative; isolation: isolate; overflow: hidden; padding: 22px; border: 1px solid #95b6ac33; border-radius: 9px; background: radial-gradient(ellipse at 100% 0, #72958818, transparent 70%), linear-gradient(130deg, #223631, #1b2c2c); box-shadow: 0 8px 25px #030b1015; }
.turn-symbol { position: absolute; z-index: -1; right: 16px; top: 9px; font: 76px var(--serif); color: #b2d1b90b; transform: rotate(8deg); }
.card-eyebrow { display: flex; gap: 7px; align-items: center; color: #b7d1bf; font-size: 8px; letter-spacing: .18em; }
.status-dot { width: 5px; height: 5px; border-radius: 50%; background: #afcfb6; box-shadow: 0 0 8px #afcfb633; }
.turn-card h2 { font: 500 25px/1.4 var(--serif); letter-spacing: .07em; margin: 12px 0 6px; }
.turn-card > p { color: #b9cac4; font-size: 10px; margin: 0; }
.notice { border-top: 1px solid #c0d9c51a; margin-top: 17px; padding-top: 13px; color: #b7c7c2; font-size: 10px; line-height: 1.9; }
.notice.error { color: #e6b6a2; }
body[data-phase="thinking"] .turn-card { border-color: #93aeb333; background: linear-gradient(140deg, #26363e, #1c2a32); }
body[data-phase="thinking"] .status-dot { animation: breathe 1.5s ease-in-out infinite; }
body[data-phase="won"] .turn-card { border-color: #d4b77f66; background: radial-gradient(ellipse at 100% 0, #a78b4c25, transparent 80%), linear-gradient(130deg, #3a382b, #292e28); }
body[data-phase="won"] .card-eyebrow { color: #dfc595; }
body[data-phase="won"] .status-dot { background: #dfc595; }
body[data-phase="won"] .turn-symbol { color: #d4b77f14; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.section-heading h2 { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .03em; }
.intel-card { padding: 24px 3px 21px; border-bottom: 1px solid var(--line); }
.mono { font: 11px ui-monospace, SFMono-Regular, monospace; color: #c0cbd1; }
.vision-numbers { display: inline-flex; gap: 6px; align-items: center; }
.vision-numbers small { color: var(--dim); font-size: 8px; }
.vision-bar { background: #99b2c51a; height: 3px; border-radius: 2px; overflow: hidden; margin: 13px 0 19px; }
.vision-bar span { display: block; height: 100%; background: linear-gradient(90deg, #688f91, #b4ccc2); transition: width .3s; }
.intel-stats { display: grid; grid-template-columns: 1fr 1fr; }
.intel-stats > div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 5px; }
.intel-stats > div + div { border-left: 1px solid var(--line); padding-left: 20px; }
.intel-stats span { flex-basis: 100%; color: var(--muted); font-size: 9px; margin-bottom: 4px; }
.intel-stats strong { color: #d5ddd9; font: 26px/1.3 var(--serif); font-weight: 400; }
.intel-stats small { color: var(--dim); font-size: 9px; }
.selection-card { padding: 20px 3px; border-bottom: 1px solid var(--line); }
.eyebrow { font-size: 9px; letter-spacing: .13em; color: #c2ac83; }
.selection-card h2 { font: 500 17px/1.5 var(--serif); letter-spacing: .04em; margin: 5px 0 12px; }
.guide-content { display: flex; gap: 17px; align-items: center; }
.selection-card p { color: var(--muted); font-size: 10px; margin: 0; flex: 1; line-height: 1.9; }
.vision-diagram { display: grid; grid-template-columns: repeat(3, 13px); grid-template-rows: repeat(4, 13px); gap: 2px; padding: 0 12px; flex-shrink: 0; }
.vision-diagram span { display: grid; place-items: center; background: #a5c1b73d; border: 1px solid #aac4b72d; }
.vision-diagram .diagram-origin { background: #ccba8f; font: 9px var(--serif); color: #252f29; }
.vision-diagram[data-vision="near"] .long-vision { background: #19313b; border-color: #94b2bc18; }
.move-diagram { display: grid; grid-template-columns: repeat(5, 12px); grid-template-rows: repeat(5, 12px); gap: 2px; flex-shrink: 0; }
.move-diagram span { display: grid; place-items: center; font: 9px var(--serif); background: #23323b; color: #d5e0d4; }
.move-diagram .move-dot { background: #6b8a795e; }
.log-card { padding: 20px 3px 0; }
.small-label { color: var(--dim); font-size: 8px; }
.log-card ol { list-style: none; padding: 0; margin: 10px 0 0; }
.log-card li { position: relative; display: flex; gap: 12px; color: var(--muted); font-size: 10px; line-height: 1.8; padding: 9px 0; border-bottom: 1px solid #cad8e00b; }
.log-card li:first-child { color: #d7dedc; }
.log-card li span { color: #8a9da7; font: 9px ui-monospace, monospace; padding-top: 4px; min-width: 16px; }
.utility { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 3px 0; }
.utility > span { font-size: 9px; color: var(--dim); }
.utility .text-button { font-size: 10px; }
.utility .text-button:disabled { opacity: .35; }
.site-footer { max-width: calc(var(--stage) + 338px); display: flex; justify-content: space-between; gap: 15px; margin: 30px auto 0; padding: 18px 0 22px; border-top: 1px solid var(--line); font-size: 8px; color: var(--dim); letter-spacing: .12em; }
.footer-dot { margin: 0 12px; color: #bba67a88; }
.modal { position: fixed; width: min(510px, calc(100vw - 32px)); padding: 34px; max-height: calc(100dvh - 40px); overflow: auto; border: 1px solid #9aabb033; border-radius: 13px; background: radial-gradient(ellipse at 100% 0, #526d6b15, transparent 70%), #192831; color: var(--ink); box-shadow: 0 25px 100px #02090fcc; }
.modal::backdrop { background: #080f15b8; backdrop-filter: blur(9px); }
.modal-dismiss { position: absolute; right: 16px; top: 14px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid #bbd0d31c; border-radius: 50%; background: #ffffff04; color: #b8c4c9; font: 20px/1 var(--sans); }
.modal-dismiss:hover { background: #ffffff0d; color: var(--ink); }
.modal h2 { margin: 9px 0 9px; font: 500 26px/1.6 var(--serif); letter-spacing: .05em; }
.modal > p, .modal form > p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.9; }
.modal fieldset { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border: 0; padding: 0; margin: 24px 0 0; }
.modal legend, .select-label { margin-bottom: 9px; color: #c6d0d4; font-size: 10px; }
.option { position: relative; display: flex; align-items: flex-start; gap: 8px; padding: 14px 11px; min-height: 86px; border: 1px solid #a5bec42b; border-radius: 6px; background: #bbd6e003; cursor: pointer; transition: border-color .15s, background .15s; }
.option:has(input:checked) { background: #d4b77f0b; border-color: #d4b77fa3; }
.option:hover { border-color: #c7bc9c; }
.option input { width: 12px; height: 12px; margin: 4px 0 0; accent-color: #d0b785; flex-shrink: 0; }
.option strong { display: block; color: #e1e7e4; font-size: 11px; font-weight: 500; }
.option small { display: block; color: var(--muted); font-size: 9px; line-height: 1.8; margin-top: 5px; }
.select-label { display: block; margin: 22px 0 0; }
select { display: block; width: 100%; padding: 12px; margin: 8px 0 0; border: 1px solid #adc5cc36; border-radius: 5px; background: #13222c; color: #dce4e3; font-size: 11px; }
.fine-print { color: var(--muted); font-size: 10px; line-height: 1.9; }
.modal form > .fine-print { font-size: 9px; margin-top: 14px; color: #8b9ea9; }
.primary-button { display: block; width: 100%; padding: 12px 17px; border: 1px solid #e6cc97a6; border-radius: 5px; background: linear-gradient(120deg, #e3c999, #c7a96f); color: #28302b; font-size: 12px; font-weight: 500; text-align: center; box-shadow: 0 3px 10px #0002, inset 0 1px 0 #fff3; }
.primary-button:hover { filter: brightness(1.08); }
.primary-button span { float: right; }
.modal .primary-button { margin-top: 24px; }
.turn-card .primary-button { margin-top: 18px; padding: 10px 13px; font-size: 11px; }
.modal-cancel { display: flex; margin: 10px auto -5px; font-size: 10px; }
.compact-modal { width: min(360px, calc(100vw - 32px)); }
.button-row { display: flex; gap: 12px; margin-top: 24px; }
.button-row button { flex: 1; margin-top: 0 !important; }
.rules-modal { width: min(570px, calc(100vw - 32px)); }
.rules-list { padding: 0 0 0 23px; counter-reset: item; margin: 20px 0; }
.rules-list li { color: var(--gold); padding: 9px 0 5px 7px; font-family: var(--serif); }
.rules-list strong { color: #e4e8e3; font: 500 13px var(--sans); }
.rules-list p { margin: 7px 0; color: var(--muted); font: 11px/1.95 var(--sans); }
.handoff { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; text-align: center; background: radial-gradient(ellipse at 50% 30%, #293b43, #111d25 65%); }
.handoff > div { width: min(350px, 100%); padding: 30px; }
.handoff-symbol { margin: 28px auto; padding: 5px 0 12px; width: 102px; border: 1px solid #d4b77f33; border-radius: 35px 35px 5px 5px; font: 72px var(--serif); color: #d2bb8c; }
.handoff h2 { font: 500 29px var(--serif); letter-spacing: .1em; }
.handoff p { color: var(--muted); font-size: 11px; line-height: 2; }
.handoff .primary-button { margin: 25px auto 0; }
body.covered .shell { visibility: hidden; }
@keyframes breathe { 50% { opacity: .3; } }
@media (max-width: 1050px) {
  .shell { padding: 0 28px; }
  .game-layout { grid-template-columns: minmax(0, var(--stage)) 260px; gap: 27px; }
  .intro, .site-footer { max-width: none; }
  .turn-card { padding: 20px; }
  .turn-card h2 { font-size: 23px; }
  .piece { font-size: clamp(19px, 2.7vw, 29px); }
  .brand-caption { display: none; }
  .hand-piece { width: 44px; }
}
@media (max-width: 780px) {
  .shell { max-width: 630px; padding: 0 22px; }
  .masthead { height: 72px; }
  .brand { font-size: 22px; }
  .brand-mark { height: 39px; width: 34px; font-size: 23px; }
  .brand small { font-size: 7px; }
  nav { gap: 19px; }
  .intro { min-height: 74px; }
  h1 { font-size: 23px; }
  .room-detail { font-size: 9px; gap: 8px; }
  .game-layout { display: flex; flex-direction: column; gap: 22px; }
  .play-area { width: 100%; }
  .board-heading { min-height: 46px; }
  .piece { font-size: clamp(20px, 5.1vw, 32px); }
  .hand { min-height: 47px; }
  .sidebar { width: 100%; padding-top: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .turn-card { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; padding: 19px 20px; gap: 0 12px; }
  .card-eyebrow { grid-column: 1; }
  .turn-card h2 { grid-column: 1; font-size: 24px; margin: 9px 0 6px; }
  .turn-card > p { grid-column: 1; }
  .notice { grid-column: 2; grid-row: 1 / 4; border-top: 0; border-left: 1px solid #c0d9c51a; margin: 0; padding: 0 0 0 15px; align-content: center; }
  .turn-symbol { right: 10px; top: 15px; }
  .turn-card .primary-button { grid-column: 1 / -1; margin-top: 15px; }
  .intel-card { grid-column: 1; grid-row: 2; padding-top: 23px; }
  .selection-card { grid-column: 2; grid-row: 2; padding-top: 23px; }
  .intel-stats > div + div { padding-left: 12px; }
  .selection-card h2 { font-size: 16px; margin-top: 6px; }
  .guide-content { gap: 10px; }
  .vision-diagram { grid-template-columns: repeat(3, 10px); grid-template-rows: repeat(4, 10px); gap: 2px; padding: 0; }
  .log-card, .utility { grid-column: 1 / -1; }
  .site-footer { margin-top: 24px; }
}
@media (max-width: 480px) {
  .shell { padding: 0 16px; }
  .masthead { height: 66px; gap: 10px; }
  .brand { font-size: 20px; gap: 9px; }
  .brand-mark { width: 30px; height: 35px; font-size: 22px; }
  .brand small { font-size: 6px; letter-spacing: .28em; }
  nav { gap: 15px; }
  nav .text-button { font-size: 10px; }
  .help-icon { display: none; }
  nav .outline-button { padding: 8px 11px; font-size: 10px; }
  .intro { min-height: 72px; align-items: center; gap: 9px; }
  h1 { font-size: 21px; }
  .room-title { gap: 9px; }
  .room-line { height: 17px; width: 2px; }
  .mode-chip { font-size: 8px; padding: 2px 7px; }
  .room-detail { display: block; text-align: right; font-size: 8px; line-height: 1.8; }
  .room-detail > span { display: block; }
  .room-detail .detail-divider { display: none; }
  .player-avatar { width: 29px; height: 31px; font-size: 17px; }
  .player-label strong { font-size: 11px; }
  .player-label small { font-size: 8px; }
  .turn-pill { font-size: 8px; padding: 4px 8px; }
  .board-frame { padding: 9px 9px 0 11px; border-radius: 5px; }
  .file-labels { font-size: 9px; height: 19px; margin-right: 18px; }
  .board { width: calc(100% - 18px); }
  .rank-labels { width: 18px; }
  .rank-labels { font-size: 9px; }
  .board-footer { height: 29px; font-size: 7px; gap: 11px; }
  .board-footer i { width: 6px; height: 6px; }
  .piece { font-size: clamp(17px, 5.1vw, 24px); width: 79%; height: 84%; }
  .piece::before { inset: 1px 1px 2px; }
  .cell.reachable::after { width: 9px; height: 9px; }
  .cell.fog.reachable::after { width: 13px; height: 13px; }
  .hand-panel { margin-top: 13px; }
  .hand-title p { font-size: 8px; }
  .hand-title h2 { font-size: 10px; }
  .hand { gap: 6px; margin-top: 6px; }
  .hand-piece { width: 39px; height: 45px; font-size: 22px; }
  .hand-piece::before { width: 26px; height: 30px; }
  .hand-piece small { font-size: 8px; }
  .hand-silhouette { width: 27px; height: 31px; font-size: 18px; }
  .hand.is-empty { gap: 5px; }
  .hand-empty { font-size: 8px; }
  .sidebar { gap: 0 17px; }
  .turn-card { padding: 16px 17px; }
  .turn-card h2 { font-size: 22px; }
  .turn-card > p, .notice { font-size: 9px; }
  .card-eyebrow { font-size: 7px; }
  .section-heading h2 { font-size: 10px; }
  .vision-numbers { gap: 3px; }
  .vision-numbers .mono { font-size: 9px; }
  .intel-stats span { font-size: 8px; }
  .intel-stats strong { font-size: 24px; }
  .intel-stats small { font-size: 8px; }
  .intel-stats > div + div { padding-left: 10px; }
  .selection-card h2 { font-size: 15px; }
  .selection-card p { font-size: 9px; }
  .guide-content { flex-wrap: wrap; }
  .guide-content p { flex-basis: 100%; }
  .vision-diagram { grid-template-columns: repeat(3, 9px); grid-template-rows: repeat(4, 9px); gap: 2px; }
  .vision-diagram .diagram-origin { font-size: 7px; }
  .move-diagram { grid-template-columns: repeat(5, 10px); grid-template-rows: repeat(5, 10px); }
  .site-footer { font-size: 7px; letter-spacing: .05em; }
  .modal { padding: 26px 22px; border-radius: 10px; }
  .modal h2 { font-size: 23px; }
  .option { padding: 12px 9px; gap: 6px; }
  .option strong { font-size: 10px; }
  .option small { font-size: 8px; }
}
.rank-labels { width: 21px; display: grid; grid-template-rows: repeat(9, 1fr); text-align: right; color: #c1b69b; font: 10px var(--serif); }
.rank-labels span { display: grid; align-items: center; }
@media (max-width: 480px) { .rank-labels { width: 18px; font-size: 9px; } }
@supports (font-size: 1cqw) { .piece { font-size: clamp(16px, 5.3cqw, 31px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Paper and ink. The board carries the visual weight; the controls stay quiet. */
:root {
  color-scheme: light;
  --bg: #f2efe7; --panel: #faf8f2; --line: #d5d0c5;
  --ink: #2a2925; --muted: #69675e; --dim: #888579;
  --gold: #a54332; --mint: #4c5d50;
}
body { background: var(--bg); }
.masthead { height: 74px; border-color: #b7b1a5; }
.brand { font-size: 29px; letter-spacing: .1em; }
nav { gap: 24px; }
.text-button { color: #625f56; font-size: 12px; }
.text-button:hover { color: #24231f; text-decoration: underline; text-underline-offset: 4px; }
.help-icon { display: none; }
.outline-button { color: #f7f4eb; background: #2b302b; border-color: #2b302b; border-radius: 1px; font-size: 12px; box-shadow: none; }
.outline-button:hover { background: #42483f; border-color: #42483f; }
.intro { min-height: 69px; }
h1 { font: 500 15px var(--sans); letter-spacing: .04em; }
.room-title { gap: 18px; }
.mode-chip { font-size: 11px; padding: 0; background: none; border: 0; border-radius: 0; color: #79756b; }
.room-detail { font-size: 11px; color: #79756b; }
.player-label strong { font-size: 13px; color: #282822; }
.player-label small { color: #787468; font-size: 10px; }
.turn-pill, body[data-phase="thinking"] .turn-pill, body[data-phase="won"] .turn-pill { padding: 3px 0 3px 12px; background: none; color: #373c34; border: 0; border-left: 3px solid #a54332; border-radius: 0; font-size: 11px; }
.board-frame { background: #d7c196; border: 1px solid #9d8b66; border-radius: 0; box-shadow: 0 2px 0 #c5baa5; }
.file-labels, .rank-labels { color: #5b503a; }
.board { background: #424946; border-color: #655d4c; box-shadow: none; }
.board::before { display: none; }
.cell, .cell.lit:nth-child(3n), .cell.lit:nth-child(5n) { background: #e2cd9e; border-color: #9d885d70; }
.cell.fog { background: #424946; border-color: #e2e5d91e; }
.cell.fog::before { display: none; }
.cell:hover { filter: brightness(1.035); }
.cell.selected { background: #ead7ab !important; box-shadow: inset 0 0 0 2px #a54332; }
.cell.last-move { background: #e7d2a2; box-shadow: inset 0 0 0 1px #8a744a; }
.cell.last-move.fog { background: #525c50; }
.cell.fatal { background: #e6caa1 !important; box-shadow: inset 0 0 0 2px #a54332; }
.cell.reachable::after { background: #9e4234ad; box-shadow: none; }
.cell.fog.reachable::after { border-color: #e5dfccaa; background: none; }
.cell.reachable:has(.piece:not(.ghost))::after { border-color: #a54332; border-radius: 0; }
.cell:focus-visible { outline-color: #8b2e22; }
.piece { background: #9e895e; color: #282821; text-shadow: none; transform: none; }
.piece::before { inset: 1px; background: #f1deb2; }
.piece::after { display: none; }
.piece.enemy { color: #493e2e; transform: rotate(180deg); }
.piece.promoted { color: #a13f2e; }
.piece.ghost { opacity: .27; background: #d8ddcd; color: #d8ddcd; }
.piece.ghost::before { background: #424946; }
.ghost-mark { color: #e5dfce; }
.board-footer, .board-footer > span:last-child { color: #5c5545; }
.board-footer i { border-color: #75684e; border-radius: 0; }
.legend-light { background: #e2cd9e; }
.legend-fog { background: #424946; border-color: #424946 !important; }
.hand-title h2 { font-size: 12px; }
.hand-title p { color: #777367; font-size: 10px; }
.hand-piece { border-color: transparent; border-radius: 0; background: none; color: #302e25; }
.hand-piece::before { background: #e3d0a6; }
.hand-piece small { color: #655e4e; }
.hand-piece:hover, .hand-piece.active { border-color: #a54332; background: none; box-shadow: none; }
.hand-piece:disabled { opacity: .72; }
.hand-silhouette { color: #b6b0a1; border: 0; border-bottom: 1px solid #cfc9bc; border-radius: 0; }
.sidebar { padding-top: 47px; }
.turn-card, body[data-phase="thinking"] .turn-card, body[data-phase="won"] .turn-card { padding: 0 0 23px; border: 0; border-top: 2px solid #3d4139; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.turn-symbol, .card-eyebrow { display: none; }
.turn-card h2 { font: 500 23px/1.5 var(--serif); margin: 18px 0 8px; letter-spacing: .03em; }
.turn-card > p { color: #68665c; font-size: 11px; }
.notice { color: #797569; border: 0; margin-top: 15px; padding-top: 0; font-size: 11px; }
.notice.error { color: #a13f2e; }
.section-heading h2 { font-size: 12px; }
.mono { color: #625f55; }
.vision-numbers small { color: #858073; }
.vision-bar { background: #dcd7cb; height: 2px; }
.vision-bar span { background: #686e60; }
.intel-stats > div + div { border-left-color: #d7d1c4; }
.intel-stats span { color: #797568; font-size: 10px; }
.intel-stats strong { color: #454b40; font: 20px var(--sans); }
.intel-stats small { color: #8a8375; }
.eyebrow { color: #898173; letter-spacing: .02em; }
.selection-card h2 { font: 500 15px var(--sans); margin-top: 7px; }
.selection-card p { color: #6b685b; font-size: 11px; }
.vision-diagram span { background: #c4c9b8; border-color: #a8ad9a; }
.vision-diagram .diagram-origin { background: #ddd0ad; color: #34382f; }
.vision-diagram[data-vision="near"] .long-vision { background: #e7e3d7; border-color: #d4cec0; }
.move-diagram span { color: #384035; background: #e2e1d3; }
.move-diagram .move-dot { background: #b8c0a8; }
.log-card li { color: #767165; border-bottom-color: #ded8cc; font-size: 11px; }
.log-card li:first-child { color: #34382f; }
.log-card li span { color: #989182; }
.utility > span, .small-label { color: #8c8477; }
.site-footer { color: #8d8575; letter-spacing: .02em; }
.modal { background: #f7f4eb; color: var(--ink); border: 1px solid #b6af9f; border-radius: 1px; box-shadow: 0 15px 70px #24282125; }
.modal::backdrop { background: #333d354d; backdrop-filter: none; }
.modal h2 { font-size: 24px; letter-spacing: .02em; }
.modal-dismiss { color: #645e51; border: 0; border-radius: 0; background: none; }
.modal-dismiss:hover { background: #e9e4d8; color: #292d26; }
.modal legend, .select-label { color: #645d50; font-size: 11px; }
.option { border-color: #cfc7b8; border-radius: 0; background: none; }
.option:has(input:checked) { border-color: #a54332; background: #e9dfcd55; }
.option input { accent-color: #a54332; }
.option strong { color: #35362e; font-size: 12px; }
.option small { color: #7a7264; font-size: 10px; }
select { background: #f7f4eb; color: #33382e; border-color: #bfb6a5; border-radius: 0; }
.primary-button { background: #343c31; border-color: #343c31; color: #faf7ef; border-radius: 1px; box-shadow: none; font-size: 12px; }
.primary-button:hover { filter: none; background: #4a5344; }
.rules-list strong { color: #3b3d32; }
.rules-list p { color: #6d675a; font-size: 12px; }
.handoff { background: #f2efe7; }
.handoff-symbol { color: #605b4a; border: 0; border-radius: 0; }
.handoff p { color: #756e5f; }
@media (max-width: 780px) {
  .sidebar { padding-top: 0; }
  .turn-card, body[data-phase="thinking"] .turn-card, body[data-phase="won"] .turn-card { padding: 3px 0 20px; }
  .turn-card h2 { margin: 14px 0 6px; grid-row: 1; }
  .turn-card > p { grid-row: 2; }
  .notice { margin: 12px 0 0; padding-left: 17px; border-left: 1px solid var(--line); grid-row: 1 / 3; }
  .turn-card .primary-button { grid-row: 3; }
  .masthead { height: 66px; }
}
@media (max-width: 480px) {
  .masthead { height: 62px; }
  .brand { font-size: 25px; }
  .intro { min-height: 61px; }
  .turn-pill { font-size: 9px; }
  .mode-chip, .room-detail { font-size: 10px; }
  .hand-title p { font-size: 9px; }
  .selection-card p { font-size: 10px; }
  .modal h2 { font-size: 22px; }
  .option strong { font-size: 11px; }
  .option small { font-size: 9px; }
  .notice, .turn-card > p { font-size: 10px; }
}
.hand-piece { width: calc((100% - 42px) / 7); max-width: 49px; }
.selection-card > .eyebrow, .modal .eyebrow, .handoff-symbol, .handoff .eyebrow { display: none; }
.modal form > .fine-print { color: #827a6a; }

.music-controls { display: flex; align-items: center; gap: 12px; margin-left: 18px; }
.music-controls button { min-width: 53px; font-size: 11px; white-space: nowrap; }
.music-controls button[aria-pressed="true"] { color: #a54332; }
.music-controls label { display: flex; align-items: center; gap: 7px; font-size: 10px; color: #79756b; }
.music-controls input { width: 64px; height: 16px; margin: 0; accent-color: #686e60; }
.net-panel { padding: 12px 0 16px; margin-bottom: 16px; border-top: 1px solid #b7b1a5; border-bottom: 1px solid #d5d0c5; }
.net-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.net-heading strong { font-size: 12px; font-weight: 500; }
.net-panel p { margin: 8px 0 0; color: #777367; font-size: 10px; line-height: 1.8; }
.invite-controls { display: flex; gap: 9px; margin-top: 8px; }
.invite-controls input { min-width: 0; flex: 1; width: 100%; font: 10px var(--sans); padding: 8px; background: #faf8f2; border: 1px solid #cfc7b8; color: #69675e; border-radius: 0; }
.invite-controls button { font-size: 10px; padding: 8px 10px; flex-shrink: 0; }
.online-option { grid-column: 1 / -1; min-height: 62px; }
.setup-error { color: #a13f2e !important; margin-top: 15px !important; }
.primary-button:disabled { opacity: .6; }
@media(max-width:780px) { .room-detail { display: flex; align-items: center; gap: 7px; } .music-controls { margin-left: 5px; gap: 7px; } }
@media(max-width:480px) { .room-detail > #round-setting { display: none; } .music-controls label > span { display: none; } .music-controls { gap: 7px; } .music-controls input { width: 55px; } .music-controls button { font-size: 10px; min-width: 45px; } }

/* Charcoal surroundings keep the wooden board and ink marks in focus. */
:root {
  color-scheme: dark;
  --bg: #20231f; --panel: #292d27; --line: #454a40;
  --ink: #eee9de; --muted: #b9b4a7; --dim: #a09e90;
  --gold: #cf8269; --mint: #b7c3a6;
}
body { background: var(--bg); }
.masthead, .net-panel { border-color: var(--line); }
.text-button, .mode-chip, .room-detail, .music-controls label { color: var(--muted); }
.text-button:hover { color: var(--ink); }
.outline-button { background: #353b32; border-color: #626b59; color: var(--ink); }
.outline-button:hover { background: #434b3d; border-color: #929c84; }
.player-label strong, .option strong, .rules-list strong { color: var(--ink); }
.player-label small, .hand-title p, .net-panel p { color: var(--muted); }
.turn-pill, body[data-phase="thinking"] .turn-pill, body[data-phase="won"] .turn-pill { color: var(--ink); border-left-color: #cb8068; }
.turn-card, body[data-phase="thinking"] .turn-card, body[data-phase="won"] .turn-card { border-top-color: #a7ad99; }
.turn-card > p, .notice, .selection-card p, .log-card li, .rules-list p { color: var(--muted); }
.notice.error, .setup-error { color: #eda08a !important; }
.log-card li:first-child { color: var(--ink); }
.log-card li { border-bottom-color: var(--line); }
.log-card li span, .utility > span, .small-label, .site-footer, .eyebrow { color: var(--dim); }
.mono, .vision-numbers small, .intel-stats span, .intel-stats small { color: var(--muted); }
.intel-stats strong { color: var(--ink); }
.intel-stats > div + div { border-left-color: var(--line); }
.vision-bar { background: #42483b; }
.vision-bar span { background: #b2bba2; }
.vision-diagram span { background: #68725a; border-color: #8a9579; }
.vision-diagram .diagram-origin { background: #d7c196; color: #34382f; }
.vision-diagram[data-vision="near"] .long-vision { background: #30362c; border-color: #4c5543; }
.move-diagram span { color: var(--ink); background: #343b2e; }
.move-diagram .move-dot { background: #6a785a; }
.hand-piece { color: #282821; }
.hand-piece small { color: var(--ink); }
.hand-piece:hover, .hand-piece.active { border-color: #cf8269; }
.hand-silhouette { color: #999b8b; border-bottom-color: #565e4d; }
.modal, .handoff { background: var(--panel); color: var(--ink); }
.modal { border-color: #666e5e; box-shadow: 0 15px 70px #0007; }
.modal::backdrop { background: #11150fbd; }
.modal-dismiss, .modal legend, .select-label { color: var(--muted); }
.modal-dismiss:hover { background: #3c4434; color: var(--ink); }
.option { border-color: #656d5a; }
.option:has(input:checked) { border-color: #d7977e; background: #3d3e31; }
.option:hover { border-color: #b0b59d; }
.option input { accent-color: #d7977e; }
.option small, .modal form > .fine-print, .handoff p { color: var(--muted); }
select, .invite-controls input { background: #22271f; color: var(--ink); border-color: #6a725d; }
.primary-button { background: #d4d9c3; border-color: #d4d9c3; color: #252b20; }
.primary-button:hover { background: #e5e9db; }
.music-controls button[aria-pressed="true"] { color: #efab92; }
.music-controls input { accent-color: #bac3a5; }