:root { font: 16px/1.45 system-ui, sans-serif; color: #172235; background: #edf2ee; }
* { box-sizing: border-box; }
body { margin: 0; }
header { background: #172e3b; color: white; padding: .75rem max(1rem, calc((100vw - 1320px) / 2)); }
header h1 { margin: 0; }
header p { margin: .2rem 0; }
main { max-width: 1320px; margin: auto; padding: 1rem; }
.panel { background: white; border: 1px solid #cbd5d5; border-radius: .65rem; padding: 1rem; margin-bottom: 1rem; box-shadow: 0 2px 8px #132e3b0a; }
h2, h3 { margin: .1rem 0 .65rem; }
.row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
button, input { font: inherit; }
button { background: #164f60; color: white; border: 0; border-radius: .35rem; padding: .55rem .8rem; cursor: pointer; min-height: 44px; }
button:hover { background: #0b3948; }
button:disabled { background: #aebbc1; cursor: not-allowed; }
input { border: 1px solid #899ca5; border-radius: .3rem; padding: .5rem; width: 8rem; text-transform: uppercase; }
#notice { color: #8b241c; min-height: 1.4rem; }
#connection { font-weight: 600; }
.layout { display: grid; grid-template-columns: minmax(220px, 270px) minmax(0, 1fr) minmax(260px, 305px); gap: .75rem; align-items: start; }
.layout > *, .side { min-width: 0; }
.summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-left: .45rem solid #13748b; }
.phase-summary { flex: 1; min-width: 0; }
.time-summary { text-align: center; min-width: 10rem; }
.time-summary h2 { margin: 0; font-size: 1rem; }
.ready-row { display: flex; justify-content: flex-end; margin: -.45rem 0 .75rem; }
.ready-row #plan-ready { min-width: 9rem; }
.mobile-menu-wrap, .overlay-close, .mobile-overlay-title, #mobile-unit-shortcut { display: none; }
.summary[data-phase="resolving"] { border-left-color: #aa6d19; background: #fff8ea; }
.summary[data-phase="finished"] { border-left-color: #484b68; }
.summary.low-time { border-left-color: #b7362b; background: #fff2ee; }
.summary-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .2rem .7rem; min-width: 9rem; flex: 1; text-align: right; }
.summary-actions p { width: 100%; text-align: right; }
#save-summary { font-size: .8rem; font-weight: 700; color: #245468; }
.eyebrow { margin: 0; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: #345969; }
.summary[data-phase="resolving"] .eyebrow { color: #7d4b0a; }
.match-result { border: 2px solid #575772; text-align: center; padding: 1.4rem; }
.match-result[data-result="victory"] { background: #e1f4e5; border-color: #2c7448; }
.match-result[data-result="defeat"] { background: #fae9e8; border-color: #a34b45; }
.match-result[data-result="draw"] { background: #efedf9; border-color: #6a5e9b; }
.match-result h2 { font-size: clamp(1.8rem, 5vw, 3rem); margin: .1rem 0; }
.match-result p:last-child { margin: .2rem 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.summary p { margin: .2rem 0; }
#timer { font-size: 1.35rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
#plan-ready { min-width: 6.5rem; font-weight: 800; }
.board-panel { min-width: 0; }
.board-heading { display: flex; justify-content: space-between; align-items: start; gap: .7rem; }
.board-heading .hint { margin: -.45rem 0 .45rem; }
.orientation-control { display: flex; align-items: center; gap: .3rem; white-space: nowrap; font-weight: 700; min-height: 44px; }
.orientation-control input { width: 1.2rem; height: 1.2rem; accent-color: #146879; }
.board-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .8rem; font-size: .85rem; margin-bottom: .35rem; }
#compass { color: #0b5368; white-space: nowrap; }
.board-frame { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); grid-template-rows: 1.4rem minmax(0, 1fr); width: 100%; }
.axis { display: grid; color: #465b64; font-size: .7rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.axis.columns { grid-column: 2; grid-row: 1; grid-template-columns: repeat(11, 1fr); align-items: end; }
.axis.rows { grid-column: 1; grid-row: 2; grid-template-rows: repeat(11, 1fr); align-items: center; }
.board { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 2px; width: 100%; aspect-ratio: 1; position: relative; touch-action: none; }
.castle-border { position: absolute; inset: 0; border: 2px solid #a6a18f; border-radius: 5px; pointer-events: none; z-index: 1; }
.castle-border-falling { animation: castle-fall-blink var(--blink-duration) steps(1, end) var(--blink-delay) both; }
@keyframes castle-fall-blink { 0%, 25%, 50%, 75% { opacity: 1; } 13%, 38%, 63%, 100% { opacity: 0; } }
.cell.start-sweep { animation: board-start-row 650ms ease-out var(--sweep-delay) both; }
@keyframes board-start-row { 0% { filter: brightness(1); } 35% { filter: brightness(1.55); } 100% { filter: brightness(1); } }
.cell.fall-sweep { animation: board-fall-wave 350ms ease-out var(--fall-delay) both; }
@keyframes board-fall-wave { 0% { filter: brightness(1); } 45% { filter: brightness(1.65); } 100% { filter: brightness(1); } }
@media (prefers-reduced-motion: reduce) { .cell.start-sweep, .cell.fall-sweep, .castle-border-falling { animation: none; } }
.cell { min-width: 0; min-height: 0; aspect-ratio: 1; padding: 0; background: #ecf1ee; color: #1c2932; border: 1px solid #c4d1cf; border-radius: 3px; font-size: clamp(.8rem, 2.1vw, 1.55rem); position: relative; line-height: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.cell:focus-visible { outline: 3px solid #061fca; outline-offset: -2px; z-index: 6; }
.cell:hover { background: #d6e5e4; }
.cell.own { background: #b5dce3; font-weight: 800; }
.cell.king { background: #e5d1ab; font-weight: 800; }
.cell.fallen-king-cell { border-style: dashed; border-color: #aebabb; }
.class-icon { display: inline-block; flex: none; width: 1.15em; height: 1.15em; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; vertical-align: -.18em; }
.icon-king { --icon: url('/icons/king.svg'); }
.icon-fighter { --icon: url('/icons/fighter.svg'); }
.icon-ranger { --icon: url('/icons/ranger.svg'); }
.icon-assassin { --icon: url('/icons/assassin.svg'); }
.icon-defense { --icon: url('/icons/defense.svg'); }
.seat-badge { display: inline-grid; place-items: center; flex: none; width: 1.35em; height: 1.35em; border: 1px solid #fffc; border-radius: .3em; background: var(--seat-color, #64747c); color: #fff; font: 900 .72em/1 system-ui, sans-serif; box-shadow: 0 1px 2px #0008; }
.badge-north { --seat-color: #4d5fa8; }
.badge-east { --seat-color: #ad542f; }
.badge-south { --seat-color: #2b8050; }
.badge-west { --seat-color: #79519a; }
.unit-identity { display: inline-flex; align-items: center; gap: .25em; min-width: 0; }
.unit-identity .class-icon { width: 1em; height: 1em; }
.unit-identity .seat-badge { font-size: 1em; }
.unit-identity > span:last-child { min-width: 0; }
.cell > .class-icon { width: 70%; height: 70%; max-width: 1.55em; max-height: 1.55em; }
.cell .token-label { position: absolute; left: 1px; top: 1px; margin: 0; z-index: 2; }
.cell .token-label .seat-badge { box-sizing: border-box; width: 10px; height: 10px; font-size: 8px; background: #14242b; }
.cell .token-history { position: absolute; right: 0; top: 1.25em; font-size: 1.15em; text-shadow: 0 1px #18252b; }
.drag-token .token-label { position: static; }
.cell.spectated { outline: 2px solid currentColor; outline-offset: -3px; }
.cell .token-label { font-size: clamp(.48rem, 1.1vw, .68rem); line-height: 1; font-weight: 900; margin-top: 1px; }
.cell.selected { outline: 3px solid #166b7d; z-index: 2; }
.cell.path { box-shadow: inset 0 0 0 3px #167b7f; }
.cell.path-pending { box-shadow: inset 0 0 0 3px #167b7f; }
.cell.path-blocked { box-shadow: inset 0 0 0 3px #717982; background-image: repeating-linear-gradient(135deg, #71798233 0 4px, transparent 4px 8px); }
.cell .route-tag { position: absolute; right: 1px; bottom: 1px; max-width: 95%; overflow: hidden; white-space: nowrap; padding: 1px 2px; border-radius: 2px; background: #f2faf8; color: #095762; font-size: .55rem; font-weight: 800; }
.cell.path-blocked .route-tag { background: #48515b; color: white; }
.cell.invalid-step, .board.invalid-step { outline: 4px solid #cf2828; outline-offset: -3px; z-index: 5; }
.drag-token { position: fixed; width: clamp(38px, 5vw, 54px); height: clamp(38px, 5vw, 54px); display: grid; place-content: center; pointer-events: none; user-select: none; opacity: .72; z-index: 20; transform: translate(-50%, -50%); box-shadow: 0 5px 14px #17223566; font-size: 1.1rem; line-height: 1; text-align: center; }
.drag-token small { font-size: .55rem; margin-top: .15rem; }
.cell.sighting { border: 2px dashed #9c4c42; color: #832c26; }
.cell.observed-enemy { border: 2px dashed #a15d20; background: #fff0ce; color: #633808; font-weight: 800; animation: appear .35s ease-out both; }
.cell.encounter-flash { outline: 3px solid #e5a72a; z-index: 3; animation: encounter .65s ease-out; }
.cell.strike-source { box-shadow: inset 0 0 0 3px #237893; z-index: 2; }
.cell.strike-target { outline: 4px solid #c73328; z-index: 4; animation: impact .55s ease-in-out; }
.cell.death-marker { border: 2px solid #7f2626; background: #f3d8d5; color: #6f1e1e; font-weight: 800; }
.cell.own-death { border: 3px double #8d2020; background: #ffe5e2; color: #701313; }
@keyframes appear { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: scale(1); } }
@keyframes encounter { from { outline-color: transparent; } 45% { outline-color: #e5a72a; } to { outline-color: #e5a72a; } }
@keyframes impact { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-3px); } 60% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .cell.observed-enemy, .cell.encounter-flash, .cell.strike-target { animation: none; } }
.cell small { display: block; line-height: 1; }
.hint { font-size: .85rem; color: #4c6068; }
.unit { display: block; width: 100%; margin: .35rem 0; text-align: left; }
.unit.active { background: #0d7182; }
.unit.dead { background: #777; }
.unit .hp-track { background: #d9e1e3; }
.unit .hp-label { color: white; }
.hp-graphic { display: grid; gap: .2rem; min-width: 0; margin: .3rem 0; }
.hp-label { font-size: .78rem; font-variant-numeric: tabular-nums; }
.hp-track { display: block; position: relative; height: .75rem; width: 100%; border: 1px solid #83969d; border-radius: .2rem; background: #cbd2d3; overflow: hidden; }
.hp-fill, .hp-recent-loss { display: block; position: absolute; top: 0; bottom: 0; }
.hp-fill { left: 0; background: #2d9a6d; }
.hp-recent-loss { background: repeating-linear-gradient(135deg, #a72d2d 0 4px, #f5b7a8 4px 7px); }
.intel-row { padding: .4rem 0; border-top: 1px solid #dbe3e3; font-size: .85rem; }
.intel-row:first-child { border-top: 0; }
.results-panel { max-height: min(80vh, 760px); overflow: auto; }
.event-card { display: grid; gap: .1rem; border-left: 4px solid #8c969b; background: #f3f5f5; padding: .4rem .5rem; border-radius: .2rem; font-size: .85rem; }
.event-card small { color: #53656b; }
.event-move { border-color: #13818b; }
.event-blocked { border-color: #747b82; }
.event-sighting { border-color: #bd8e14; }
.event-combat { border-color: #bb3d37; }
.event-revival { border-color: #347cbd; }
.event-public { border-color: #7965a5; }
#events { list-style: none; padding: 0; margin: 0; }
#events li { margin: .4rem 0; }
#seats { padding-left: 1.4rem; }
.entry-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: 1rem; min-height: min(58vh, 560px); padding: 1rem; }
.entry-preview { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; padding: clamp(.5rem, 2vw, 2rem); }
.entry-preview-heading { width: 100%; }
.entry-preview-heading .eyebrow { margin: 0; }
.entry-preview-heading button { display: none; }
#entry-preview-content { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.entry-preview h2 { max-width: 14ch; margin: .35rem 0 1rem; color: #f5e4b9; font-size: clamp(1.75rem, 3.2vw, 3.2rem); line-height: 1.1; letter-spacing: -.025em; text-transform: none; }
.entry-preview figure { width: min(100%, 360px); margin: 0 0 .6rem; }
.entry-preview .guide-grid { margin-left: 0; }
.entry-preview figcaption { color: #bed0ce; font-size: .85rem; }
#entry-preview-content > p { max-width: 46ch; color: #c8d7d4; }
.entry-actions { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; padding: clamp(1.25rem, 3vw, 3rem); border: 1px solid #8caba8; border-radius: .65rem; background: #213943; }
.entry-actions h2 { margin: .25rem 0 1.7rem; color: #f3e7c8; font-size: clamp(1.6rem, 2.5vw, 2.6rem); letter-spacing: -.025em; text-transform: none; }
.entry-actions #create { min-width: 12rem; background: #d7b96f; border-color: #d7b96f; color: #172b33; font-weight: 800; }
.entry-actions .entry-or { margin: 1.35rem 0 .55rem; color: #b9cdca; }
.entry-code-row { display: flex; gap: .5rem; width: 100%; }
.entry-code-row input { width: min(100%, 13rem); min-width: 0; font-variant-numeric: tabular-nums; }
.entry-code-row input::placeholder { color: #aabfbd; opacity: 1; text-transform: none; }
.entry-code-row button { white-space: nowrap; }
.open-lobbies { min-height: 18rem; }
.solo-entry { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem .8rem; width: 100%; margin-top: 1.4rem; padding: 1.1rem 0 0; border-top: 1px solid #547179; color: #a9bfbb; font-size: .82rem; }
.solo-entry button { min-height: 44px; padding: .45rem .8rem; border-color: #75928e; background: #17313a; color: #d1e0d8; }
.open-lobbies-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.open-lobbies-heading h2 { margin-bottom: .25rem; color: #f1e2b7; font-size: 1.35rem; letter-spacing: 0; text-transform: none; }
.open-lobbies-refresh-note { margin: 0; color: #bdd0cd; font-size: .82rem; }
.open-lobbies-heading button { min-height: 38px; }
#open-lobbies-status { color: #bdd0cd; }
#open-lobbies-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .65rem; padding: 0; margin: .65rem 0 0; list-style: none; }
#open-lobbies-list li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem; border: 1px solid #55727a; border-radius: .5rem; background: #203843; }
#open-lobbies-list li span { display: grid; }
#open-lobbies-list li small { color: #bbcfcb; }
#open-lobbies-list li button { min-width: 4.6rem; }
@media (max-width: 790px) {
  .entry-hero { grid-template-columns: 1fr; min-height: 0; }
  .entry-preview { padding: .5rem; }
  .entry-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
  .entry-preview-heading button { display: block; min-height: 44px; padding: .4rem .65rem; }
  .entry-preview.is-collapsed #entry-preview-content { display: none; }
  .entry-preview h2 { max-width: none; }
  .entry-actions { padding: 1.2rem; }
}
@media (max-width: 1050px) {
  .layout { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); }
  .results-panel { grid-column: 1 / -1; max-height: 15rem; }
}
@media (max-width: 790px) {
  .layout { display: block; }
  main { padding: .45rem .45rem calc(5.2rem + env(safe-area-inset-bottom)); }
  .panel { padding: .65rem; margin-bottom: .65rem; }
  .summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .phase-summary { grid-column: 1 / -1; }
  .time-summary { min-width: 0; text-align: left; }
  .summary-actions { min-width: 0; }
  .summary-actions p { font-size: .78rem; }
  #desktop-guide { display: none; }
  .mobile-menu-wrap { display: block; position: relative; margin: -.25rem 0 .65rem; z-index: 8; }
  #mobile-menu-button { min-width: 8rem; }
  #mobile-menu:not([hidden]) { display: grid; position: absolute; top: calc(100% + .25rem); left: 0; width: min(18rem, calc(100vw - 1rem)); gap: .25rem; padding: .45rem; background: white; border: 1px solid #899ca5; border-radius: .55rem; box-shadow: 0 8px 22px #17223544; }
  #mobile-menu button { text-align: left; }
  .ready-row { position: fixed; z-index: 9; right: max(.65rem, env(safe-area-inset-right)); bottom: max(.65rem, env(safe-area-inset-bottom)); margin: 0; }
  .ready-row #plan-ready { min-width: 8rem; min-height: 48px; box-shadow: 0 4px 14px #17223566; }
  .results-panel, .side { display: none; }
  #mobile-unit-shortcut:not([hidden]) { display: block; width: 100%; margin-top: .65rem; text-align: left; }
  #mobile-backdrop:not([hidden]) { position: fixed; inset: 0; z-index: 29; background: #102630aa; }
  .mobile-overlay.is-open { display: block !important; position: fixed; z-index: 30; top: max(.65rem, env(safe-area-inset-top)); right: max(.45rem, env(safe-area-inset-right)); bottom: max(.65rem, env(safe-area-inset-bottom)); left: max(.45rem, env(safe-area-inset-left)); width: auto; max-height: none; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 1rem; box-shadow: 0 12px 32px #091a22aa; }
  .mobile-overlay-title { display: block; }
  .overlay-close { display: block; float: right; min-width: 44px; font-size: 1.4rem; line-height: 1; }
  body.mobile-overlay-open { overflow: hidden; }
  .cell { font-size: clamp(.72rem, 3.5vw, 1.4rem); }
  .cell .token-label { font-size: clamp(.43rem, 1.8vw, .65rem); }
  .board-frame { width: calc(100% + 1.3rem); max-width: 600px; margin-left: -.65rem; grid-template-columns: 1.1rem minmax(0, 1fr); grid-template-rows: 1.1rem minmax(0, 1fr); }
  .axis { font-size: .55rem; }
  .board-legend { font-size: .76rem; }
}
@media (max-width: 380px) {
  header { padding: .45rem .65rem; }
  header p { display: none; }
  .summary { gap: .35rem; }
  .summary-actions { min-width: 0; }
  #timer { font-size: 1rem; }
  #plan-ready { min-width: 5.6rem; }
  .board { gap: 1px; }
  .cell { font-size: .82rem; }
  .cell .token-label { font-size: .46rem; }
  .board-meta { font-size: .74rem; }
}

/* Live board-first visual treatment, aligned with the reviewed UI study. */
:root { color: #e7efec; background: #111e27; }
header { background: #111e27; border-bottom: 1px solid #354d56; padding-top: .5rem; padding-bottom: .5rem; }
header h1 { font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; }
header p { color: #b8c8ca; font-size: .78rem; }
main { max-width: 1600px; padding-bottom: 6rem; }
.panel { background: #1b2c36; border-color: #45606a; border-radius: .75rem; box-shadow: none; }
.panel h2, .panel h3 { color: #a9d3ce; font-size: .9rem; text-transform: uppercase; letter-spacing: .07em; }
.hint, .board-legend { color: #b8c9c9; }
button { background: #2d626b; color: #fff; border: 1px solid #9dc9c5; border-radius: .5rem; }
button:hover { background: #386f78; }
button:disabled { background: #40515a; color: #aebabb; border-color: #66777c; }
button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid #f4d66c; outline-offset: 2px; }
input { background: #122832; color: #e7efec; border-color: #719096; }
#connection { color: #c4d6d5; }
#notice { color: #ffb8aa; }
.layout { grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) minmax(220px, 280px); gap: .65rem; }
.summary { position: sticky; top: .4rem; z-index: 10; width: min(100%, 850px); margin: 0 auto .65rem; padding: .5rem .75rem; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .85rem; background: #213a43; border: 1px solid #719096; box-shadow: 0 6px 24px #050d17a8; }
.summary[data-phase="resolving"] { background: #3c352c; border-color: #bb995b; }
.summary[data-phase="finished"] { background: #313447; border-color: #9a93bf; }
.summary.low-time { background: #543039; border-color: #e0817b; }
.phase-summary { overflow: hidden; }
.phase-summary #phase { font-size: .75rem; color: #bdcfce; max-height: 2.5em; overflow: hidden; }
.eyebrow, .summary[data-phase="resolving"] .eyebrow { color: #a9d3ce; }
.time-summary { min-width: 0; }
.time-summary h2 { color: #c7dad7; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; }
#timer { display: inline-block; font-size: 1.5rem; font-weight: 900; line-height: 1.2; padding: .18rem .45rem; background: #0d222b; border-radius: .4rem; }
.low-time #timer { background: #8b302b; color: white; }
.summary-actions { display: flex; align-items: flex-end; flex-direction: column; flex-wrap: nowrap; gap: .12rem; min-width: 0; line-height: 1.2; }
.summary-actions p { width: auto; font-size: .83rem; font-weight: 800; }
#save-summary { color: #bfd3d0; font-size: .72rem; }
#desktop-guide, #skip-playback { padding: .22rem .5rem; min-height: 30px; font-size: .74rem; }
#skip-status:not([hidden]) { display: inline-flex; align-items: center; min-height: 30px; padding: .22rem .5rem; font-size: .74rem; color: #bfd3d0; }
.ready-row { position: fixed; z-index: 20; right: max(.9rem, calc((100vw - 1600px) / 2 + .9rem)); bottom: .9rem; margin: 0; padding: .28rem; background: #172b35e8; border: 1px solid #8faaa9; border-radius: .85rem; box-shadow: 0 7px 22px #0008; }
.ready-row #plan-ready { min-width: 8rem; min-height: 52px; padding: .5rem 1rem; font-size: 1.1rem; background: #e3c16d; color: #1a2830; border: 0; }
.ready-row:has(#plan-ready[hidden]) { display: none; }
.ready-row #plan-ready:disabled { background: #786f5a; color: #c5beb0; }
.match-result { background: #2d3f4d; border-color: #d9ba74; }
.match-result[data-result="victory"] { background: #253f39; border-color: #9dd9a8; }
.match-result[data-result="defeat"] { background: #4a3039; border-color: #ef9e97; }
.match-result[data-result="draw"] { background: #3d3450; border-color: #c49be5; }
.match-result { position: fixed; inset: 0; width: min(760px, calc(100vw - 2rem)); max-width: none; max-height: min(680px, calc(100dvh - 2rem)); margin: auto; padding: clamp(1.5rem, 5vw, 3.5rem); border-radius: 1rem; color: #f2f2e9; box-shadow: 0 28px 90px #000c; overflow: auto; }
.match-result::backdrop { background: #06131be0; }
.match-result h2 { font-size: clamp(3rem, 10vw, 6rem); line-height: 1; margin: 1rem 0; }
.match-result #result-reason { font-size: clamp(1.1rem, 2.5vw, 1.55rem); line-height: 1.45; }
.result-actions { display: grid; gap: .75rem; margin-top: clamp(1.5rem, 4vw, 3rem); }
.result-actions button { min-height: 3.25rem; font-size: 1.05rem; font-weight: 700; }
#show-match-result { display: block; margin: .5rem auto 1rem; min-height: 2.75rem; }
#show-match-result[hidden] { display: none; }
.board-panel { padding: .65rem; background: linear-gradient(155deg, #252b48, #171d32); border-color: #a6a18f; box-shadow: inset 0 0 0 3px #a6a18f25; }
.board-heading { align-items: center; margin-bottom: .35rem; }
.board-heading h3 { margin: 0; color: #f4e9da; font: 700 1.15rem/1.1 Georgia, 'Times New Roman', serif; letter-spacing: .04em; text-transform: none; }
.orientation-control { display: inline-flex; min-height: 44px; width: auto; padding: .4rem .6rem; background: #2a3d48; color: #e7efec; border: 1px solid #627883; font-size: .8rem; }
.orientation-control[aria-pressed="true"] { background: #d2b668; color: #16242b; border-color: #efdb9e; }
.board-meta { color: #c7bdc9; font-size: .75rem; }
.board-readout { height: 2.7rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #e3bf80; font-size: .82rem; line-height: 2.7rem; border-bottom: 1px solid #887b92; }
#compass { color: #e3bf80; }
.axis { color: #c7bdc9; }
.board { gap: 2px; border: 1px solid #a6a18f; background: #171d32; box-shadow: 0 0 0 2px #a6a18f55, inset 0 0 0 3px #0006; }
.cell { background: #313852; color: #f4e9da; border-color: #60627d; border-radius: 2px; padding: 1px 1px 3px; }
.cell:hover { background: #3e4765; }
.cell.terrain-underground { background-image: repeating-linear-gradient(135deg, #0002 0 5px, transparent 5px 10px); }
.cell.terrain-stair { background-image: repeating-linear-gradient(90deg, #e3bf802b 0 2px, transparent 2px 7px); }
.cell.terrain-stair.stair-horizontal { background-image: repeating-linear-gradient(0deg, #e3bf802b 0 2px, transparent 2px 7px); }
.cell.terrain-underground:not(.own, .king, .spectated, .sighting, .observed-enemy, .death-marker) { background-color: #222a43; border-color: #60627d; }
.cell.terrain-stair:not(.own, .king, .spectated, .sighting, .observed-enemy, .death-marker) { background-color: #48404d; border-color: #887b92; }
.cell.terrain-underground:hover, .cell.terrain-stair:hover { filter: brightness(1.18); }
.cell.own { background: #226b73; }
.cell.king { border: 3px double #e6d7ab; }
.cell.own-king { background: #226b73; }
.cell.hostile-king { background: #752f36; }
.cell.king:not(.own-king) { border-color: #e6d7ab; }
.cell.own-king, .cell.own:is(.seat-north, .seat-east, .seat-south, .seat-west) { border-color: #75b9bd; }
.cell .token-label { color: #e7efec; }
.cell.selected { outline: 3px solid #b2f0dd; outline-offset: -3px; }
.cell.intel-selected { outline: 3px solid #f4d66c; outline-offset: -3px; z-index: 3; }
.cell.intel-highlight { outline: 4px solid #fff0a5; outline-offset: -2px; box-shadow: 0 0 0 3px #f4d66c88; z-index: 4; }
.cell.selected-intel-history { background: #5d493b; }
.cell.path, .cell.path-pending { box-shadow: inset 0 0 0 3px #73d7c9; }
.cell.path-blocked { background-image: repeating-linear-gradient(135deg, #46545c 0 5px, #304149 5px 10px); }
.cell.strike-source { box-shadow: inset 0 0 0 3px #80e1d5; }
.cell .route-tag { background: #18393d; color: #a9eee8; }
.cell .attack-marker { --reach-color: #f7c85b; --reach-fill: #f7c85b; --reach-shadow: #503812; display: none; position: absolute; left: 50%; top: 50%; width: 23%; aspect-ratio: 1; border-radius: 50%; background: var(--reach-fill); box-shadow: 0 0 0 1px var(--reach-shadow); transform: translate(-50%, -50%); z-index: 2; pointer-events: none; opacity: .9; }
.cell.attack-range .attack-marker { display: block; animation: attack-breathe 1.6s ease-in-out infinite alternate; }
.cell.attack-origin { outline: 2px dashed #f7c85b; outline-offset: -5px; }
.cell.attack-range > :not(.attack-marker) { position: relative; z-index: 2; }
.cell.king-attack-range::before { content: ''; position: absolute; inset: max(5%, 4px); z-index: 1; border: 2px solid #f58b80; border-radius: 3px; background: #c3323240; pointer-events: none; animation: attack-breathe 1.6s ease-in-out infinite alternate; }
.cell.king-defending { box-shadow: inset 0 0 0 4px #88cdec; }
.cell .king-shield { position: absolute; top: 1px; right: 2px; font-size: .65em; line-height: 1; z-index: 3; pointer-events: none; }
.cell .king-shield .class-icon { width: 1em; height: 1em; }
@keyframes attack-breathe { from { opacity: .45; } to { opacity: .95; } }
@media (prefers-reduced-motion: reduce) { .cell .attack-marker, .cell.king-attack-range::before { animation: none; opacity: .9; } }
.cell.sighting { background: #654b46; border-color: #d09b69; color: #fff; }
.cell.observed-enemy { background: #654832; border-color: #efc484; color: #fff; }
.cell.death-marker, .cell.own-death { background: #51313a; border-color: #f19d94; color: #fff; }
.cell[data-unit-owner="North"] { background-color: #5269b7; color: #fff; }
.cell[data-unit-owner="East"] { background-color: #b65c38; color: #fff; }
.cell[data-unit-owner="South"] { background-color: #37875c; color: #fff; }
.cell[data-unit-owner="West"] { background-color: #875cab; color: #fff; }
.cell .mini-hp { position: absolute; left: 2px; right: 2px; bottom: 1px; height: 3px; background: #838c90; pointer-events: none; }
.cell .mini-hp i { display: block; height: 100%; background: #b8e396; }
.cell.sighting .mini-hp { background: #725e51; }
.cell.sighting .mini-hp i { background: #e9bd7b; }
.unit { margin: 0; padding: .45rem .5rem; color: #e7efec; background: transparent; border: 0; border-bottom: 1px solid #405761; border-radius: 0; }
.unit:hover { background: #304b54; }
.unit.active { background: #31535b; outline: 2px solid #8fdcd2; outline-offset: -2px; }
.unit.dead { background: #303b42; color: #c0cbca; }
.unit.king-roster { background: #554937; border: 1px solid #b5a16d; border-radius: .4rem; margin: 0 0 .3rem; }
.unit.king-roster.active { background: #60533c; outline: 3px solid #f5df9b; }
.unit.king-roster { width: 100%; text-align: left; }
.unit.own-king-row { background: #365b5c; border-color: #94d8cb; }
.unit.king-roster:not(:first-child) { margin-top: .25rem; }
#events .result-group { margin: 0; border-top: 1px solid #52676c; padding: .45rem 0; }
#events .result-group:first-child { border-top: 0; }
.result-group h4 { margin: 0 0 .2rem; font-size: .82rem; color: #e8d489; }
.result-group ul { list-style: none; margin: 0; padding: 0; }
#events .result-group li { margin: 0; padding: .1rem 0; font-size: .82rem; line-height: 1.3; }
.result-item { display: block; width: 100%; min-height: 34px; padding: .2rem .3rem; background: transparent; border: 0; text-align: left; color: #eef4ee; font-size: .82rem; }
.result-item:hover, .result-item:focus-visible { background: #5a503a; }
.result-item.hit-event { border-left: 2px solid #d9ba74; padding-left: .55rem; }
.hit-row { display: flex; align-items: center; justify-content: space-between; gap: .35rem; white-space: nowrap; }
.hit-row .unit-identity { flex: none; }
.hit-symbol { display: block; width: 1.2rem; height: 1rem; margin: .05rem 0; overflow: visible; color: #e8d489; }
.hit-symbol path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hit-loss-own { color: #ffb4a6; font-weight: 800; }
.hit-loss-enemy { color: #9ce8d7; font-weight: 800; }
#selected-panel { height: 11.5rem; overflow: auto; }
#selected-vitals:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .2rem .4rem; }
#selected-name { min-width: 0; font-size: .9rem; }
#selected-vitals #selected-hp, #selected-vitals .hp-graphic { display: contents; }
#selected-vitals .hp-label { grid-column: 2; grid-row: 1; white-space: nowrap; }
#selected-vitals .hp-track { grid-column: 1 / -1; grid-row: 2; }
#selected-panel #selected { margin: .65rem 0 0; font-size: .85rem; line-height: 1.35; }
#selected .tile-detail-line { display: block; }
#selected .tile-detail-line + .tile-detail-line { margin-top: .35rem; }
#selected .tile-detail-title { color: #f0e1ae; font-weight: 700; }
#selected .unit-rule-row { display: grid; grid-template-columns: 4.3rem minmax(0, 1fr); gap: .4rem; }
#selected .unit-rule-row + .unit-rule-row { margin-top: .35rem; }
#selected .unit-rule-label { color: #f0e1ae; font-weight: 700; }
#selected-panel.is-empty { display: flex; flex-direction: column; }
#selected-panel.is-empty #selected { flex: 1; display: grid; place-items: center; margin: 0; color: #b7c9c9; text-align: center; }
.board.previewing .cell.attack-range:not(.preview-range) .attack-marker, .board.previewing .cell.king-attack-range:not(.preview-king-range)::before { display: none; }
.cell.preview-own { outline: 3px solid #8ce1d4; outline-offset: -3px; z-index: 4; }
.cell.preview-enemy { outline: 3px solid #ffc47f; outline-offset: -3px; z-index: 4; }
.cell.preview-hit-target { outline: 3px solid #f7c85b; outline-offset: -3px; z-index: 4; }
.cell.preview-public { outline: 3px solid #f4d66c; outline-offset: -3px; z-index: 4; }
.cell.preview-enemy-range.attack-range .attack-marker { --reach-color: #ffab77; --reach-fill: #ffab77; --reach-shadow: #6a3425; }
.cell.preview-own-range.preview-enemy-range.attack-range .attack-marker { --reach-fill: linear-gradient(90deg, #f7c85b 50%, #ffab77 50%); }
.cell:is(.own, .spectated, .king, .sighting, .observed-enemy, .death-marker).attack-range .attack-marker { inset: 2px; width: auto; aspect-ratio: auto; border: 2px solid var(--reach-color); border-radius: 3px; background: transparent; box-shadow: none; transform: none; }
.cell.death-marker.attack-range .attack-marker { animation: none; opacity: .9; }
.cell.preview-own-range.preview-enemy-range:is(.own, .spectated, .king, .sighting, .observed-enemy, .death-marker).attack-range .attack-marker { border-color: #f7c85b #ffab77 #ffab77 #f7c85b; }
.cell.preview-result-range:is(.own, .spectated, .king, .sighting, .observed-enemy, .death-marker):not(.preview-own, .preview-enemy).attack-range .attack-marker { inset: 4px 4px auto auto; width: 16%; aspect-ratio: 1; border: 0; border-radius: 50%; background: #f7c85b; box-shadow: 0 0 0 1px #503812; transform: none; }
.cell:is(.preview-own, .preview-enemy).attack-range .attack-marker { display: none; }
.cell.preview-king-defense::before { content: ''; position: absolute; top: 1px; right: 2px; z-index: 3; width: .65em; height: .65em; background: currentColor; -webkit-mask: var(--defense-icon) center / contain no-repeat; mask: var(--defense-icon) center / contain no-repeat; pointer-events: none; }
.cell.preview-king-defense { --defense-icon: url('/icons/defense.svg'); }
.cell[data-preview-label]::after { content: attr(data-preview-label); position: absolute; inset: auto 0 0; z-index: 5; background: #182a30d9; color: #fff; font-size: .5rem; line-height: 1.1; text-transform: uppercase; pointer-events: none; }
.hp-label, .unit .hp-label { color: #dce7e4; }
.hp-track, .unit .hp-track { background: #69767a; border-color: #9eaeb0; }
.hp-fill { background: #a5d885; }
.hp-recent-loss { background: repeating-linear-gradient(135deg, #eead70 0 4px, #713a30 4px 7px); }
.intel-row { border-color: #405761; }
.event-card { display: grid; grid-template-columns: 1.3rem minmax(0, 1fr); gap: .45rem; padding: .5rem; background: var(--event-bg, #304149); border: 1px solid var(--event-border, #95aaa9); border-left: 5px solid var(--event-border, #95aaa9); border-radius: .5rem; font-size: .82rem; }
.event-icon { font-size: 1.05rem; text-align: center; line-height: 1.4; }
.event-head { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .4rem; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.event-head small { margin-left: auto; color: #bbcdcc; font-size: .65rem; }
.event-actor { border: 1px solid currentColor; border-radius: .25rem; padding: 0 .2rem; }
.event-actor.you { color: #9ee3db; }
.event-actor.enemy { color: #f6d48c; }
.event-actor.public { color: #d1d6d6; }
.event-message { display: block; margin-top: .12rem; font-size: .84rem; line-height: 1.3; }
.event-move { --event-border: #59a8ad; --event-bg: #223e47; }
.event-blocked { --event-border: #aeb9bd; --event-bg: #39444b; }
.event-sighting { --event-border: #edc562; --event-bg: #4d412b; }
.event-combat { --event-border: #e0817b; --event-bg: #502f38; }
.event-revival { --event-border: #82bcea; --event-bg: #293f55; }
.event-public { --event-border: #c49be5; --event-bg: #3d3150; }
@media (max-width: 1050px) {
  .layout { grid-template-columns: minmax(0, 1fr) minmax(240px, 280px); }
}
@media (max-width: 790px) {
  main { padding: .45rem .45rem calc(6.5rem + env(safe-area-inset-bottom)); }
  .summary { top: .25rem; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .3rem; padding: .4rem .5rem; margin-bottom: .45rem; }
  .phase-summary { grid-column: auto; }
  .phase-summary #phase { display: none; }
  .eyebrow { font-size: .65rem; }
  .time-summary { text-align: center; }
  .time-summary h2 { font-size: .7rem; }
  #timer { font-size: 1.1rem; padding: .12rem .3rem; }
  .summary-actions { align-items: flex-end; }
  .summary-actions p { font-size: .7rem; }
  #save-summary { font-size: .64rem; }
  .mobile-menu-wrap { margin: 0 0 .45rem; }
  #mobile-menu:not([hidden]) { background: #1b3039; border-color: #8da9ad; }
  .ready-row { right: max(.55rem, env(safe-area-inset-right)); bottom: max(.5rem, env(safe-area-inset-bottom)); }
  .ready-row #plan-ready { min-width: 7.2rem; min-height: 54px; }
  .board-panel { padding: .35rem; }
  .board-frame { width: calc(100% + .7rem); margin-left: -.35rem; }
  .board-meta { font-size: .68rem; }
  .cell { font-size: clamp(.68rem, 3vw, 1rem); }
  .cell .token-label { font-size: .43rem; }
  .cell .mini-hp { height: 2px; }
  .mobile-overlay.is-open { background: #1b2c36; border: 2px solid #8faeb0; }
  #mobile-backdrop:not([hidden]) { background: #061117bd; }
}
@media (max-width: 380px) {
  .orientation-control { font-size: .7rem; padding: .35rem; }
  #timer { font-size: .95rem; }
  .summary-actions p { font-size: .65rem; }
  .board { gap: 1px; }
}

/* Keep the live match as compact as the reviewed board-first composition. */
body.in-match header, body.in-match.is-connected #connection, body.in-match #notice:empty { display: none; }
body.in-match #notice { min-height: 0; margin: 0 auto .25rem; max-width: 850px; font-size: .8rem; }
.phase-summary #phase { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.summary { align-items: center; }
.summary .eyebrow { color: #e7efec; font-size: 1rem; text-transform: none; letter-spacing: 0; }
.time-summary { display: flex; align-items: baseline; justify-content: center; gap: .35rem; }
.time-summary h2 { color: #d7e3e1; font-size: .85rem; white-space: nowrap; text-transform: none; }
#timer { background: transparent; padding: 0; border-radius: .35rem; }
#timer[hidden] { display: none; }
.low-time #timer { padding: .1rem .35rem; }
.summary[data-phase="finished"] { grid-template-columns: 1fr; justify-items: center; }
.summary[data-phase="finished"] .phase-summary, .summary[data-phase="finished"] .summary-actions { display: none; }
.summary[data-phase="finished"] .time-summary h2 { font-size: 1.2rem; font-weight: 800; }
.board-panel { display: flex; flex-direction: column; }
#spectator-notice:not([hidden]) { width: min(100%, 720px); margin: .35rem auto 0; padding: .65rem .8rem; border: 1px solid #e3c16d; border-radius: .55rem; background: #3b3934; color: #fff1ce; font-weight: 800; text-align: center; line-height: 1.35; }
#own-forces.spectator-inactive { filter: grayscale(1); opacity: .58; }
#own-forces.spectator-inactive .unit { cursor: default; }
.board-frame { width: min(100%, 720px, calc(100dvh - 285px)); margin: .35rem auto 0; grid-template-rows: 1.4rem minmax(0, 1fr) auto; container-type: inline-size; }
.round-progress { grid-column: 2; grid-row: 3; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); position: relative; min-width: 0; margin: .35rem 0 0; padding: 0; list-style: none; }
.round-progress::before { content: ''; position: absolute; left: 25%; right: 25%; inset-block: 0; border: 2px solid #c77570; border-radius: .55rem; pointer-events: none; }
.round-marker { display: flex; align-items: center; justify-content: center; gap: .15rem; position: relative; z-index: 1; min-width: 0; min-height: 2.35rem; margin: 3px 2px; border-radius: .4rem; color: #c4d6d5; font-size: .83rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.round-word { display: none; font-size: .62rem; }
.round-marker.past { opacity: .56; }
.round-marker.current { background: #e3c16d; color: #172b33; box-shadow: 0 1px 4px #0008; opacity: 1; }
.round-marker.current .round-word { display: inline; }
.board-meta { width: min(100%, 720px); margin: .45rem auto 0; justify-content: flex-start; align-items: center; color: #c7bdc9; font-size: .72rem; }
#compass { margin-left: auto; font-size: .68rem; }
.board-legend { margin: 0; }
#event-empty:not([hidden]) { display: block; margin: .4rem 0 0; padding: .45rem .55rem; background: #304149; border: 1px solid #95aaa9; border-left: 5px solid #95aaa9; border-radius: .5rem; font-size: .84rem; font-weight: 700; }
#event-empty:not([hidden])::before { content: "NOW STATUS · PUBLIC"; display: block; margin-bottom: .12rem; color: #c4d6d5; font-size: .65rem; font-weight: 800; letter-spacing: .06em; }
.overlay-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; }
.overlay-heading h2, .overlay-heading h3 { min-width: 0; margin: 0; }
.side .overlay-heading .mobile-overlay-title { margin: 0; }
.overlay-heading .overlay-close { flex: none; float: none; }
.plan-help summary { min-height: 44px; padding: .6rem 0; cursor: pointer; color: #d7e5e2; font-weight: 800; }
.plan-help details p { margin: .1rem 0 .4rem; }
@media (min-width: 791px) {
  body.in-match { height: 100dvh; overflow: hidden; }
  body.in-match main { height: 100dvh; max-width: 1700px; padding: .45rem .75rem; overflow: hidden; }
  #game:not([hidden]) { height: 100%; display: flex; flex-direction: column; min-height: 0; }
  .summary { flex: none; margin-bottom: .5rem; }
  .summary-actions { position: relative; padding-right: 3.5rem; }
  #desktop-guide { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
  .layout { flex: 1; min-height: 0; height: 100%; grid-template-columns: minmax(195px, 240px) minmax(0, 1fr) minmax(220px, 280px); align-items: start; }
  .layout > .panel, .layout > .side { min-height: 0; max-height: 100%; overflow: auto; }
  .results-panel { grid-column: auto; grid-row: auto; max-height: 100%; }
  .board-panel { align-items: stretch; }
  #spectator-notice:not([hidden]) + .board-frame { width: min(100%, 720px, calc(100dvh - 350px)); }
  .side { display: block; padding: .6rem; background: #1b2c36; border: 1px solid #45606a; border-radius: .75rem; }
  .side .mobile-overlay-title { display: block; margin: .1rem .35rem .45rem; }
  .side > .panel { padding: .45rem .35rem .55rem; margin: 0; background: transparent; border: 0; border-top: 1px solid #405761; border-radius: 0; box-shadow: none; }
  .side > .panel h3 { margin: 0 0 .35rem; font-size: .78rem; }
  .side .unit { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .15rem .35rem; min-height: 0; padding: .35rem .3rem; }
  .side .unit strong { font-size: .76rem; line-height: 1.2; }
  .side #king-hp { display: contents; }
  .side .unit .hp-graphic, .side .intel-row .hp-graphic { display: contents; }
  .side .unit .hp-label, .side .intel-row .hp-label { grid-column: 2; grid-row: 1; margin: 0; font-size: .67rem; text-align: right; }
  .side .unit .hp-track, .side .intel-row .hp-track { grid-column: 1 / -1; height: 5px; }
  .side .intel-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .3rem; padding: .3rem 0; font-size: .73rem; }
  .side .plan-help p { margin: .25rem 0; font-size: .73rem; line-height: 1.3; }
}
@media (min-width: 791px) and (max-width: 1200px) {
  .layout { grid-template-columns: minmax(160px, 200px) minmax(0, 1fr) minmax(210px, 240px); }
}
@media (max-width: 790px) {
  body.in-match main { padding: .3rem .3rem calc(6.5rem + env(safe-area-inset-bottom)); }
  .summary { margin-bottom: .3rem; }
  .summary .eyebrow { font-size: .82rem; }
  .time-summary { flex-wrap: wrap; gap: 0 .2rem; }
  .time-summary h2 { font-size: .74rem; }
  #timer { font-size: 1.05rem; }
  #skip-playback { white-space: nowrap; padding: .3rem .35rem; font-size: .68rem; }
  #skip-status:not([hidden]) { white-space: nowrap; padding: .3rem .35rem; font-size: .68rem; }
  .mobile-menu-wrap { display: flex; justify-content: flex-end; position: sticky; top: 4.2rem; z-index: 11; margin: .3rem 0 .35rem; }
  #mobile-menu-button { min-width: 48px; width: 48px; min-height: 44px; padding: .2rem; background: #254754; border-color: #a2c5c8; font-size: 1.45rem; line-height: 1; }
  #mobile-menu:not([hidden]) { left: auto; right: 0; background: #1b3039; }
  .board-frame { width: calc(100% + .7rem); max-width: 600px; margin: .4rem 0 0 -.35rem; grid-template-columns: 1.1rem minmax(0, 1fr); grid-template-rows: 1.1rem minmax(0, 1fr) auto; }
  .round-marker { font-size: clamp(.62rem, 2.8vw, .8rem); }
  .board-meta { width: 100%; margin-top: .45rem; font-size: .66rem; }
  #compass { margin-left: 0; }
}
@container (max-width: 560px) {
  .round-progress { margin-top: 1.35rem; }
  .round-progress::after { content: 'Round'; position: absolute; top: -1.1rem; left: 2px; color: #c4d6d5; font-size: .65rem; font-weight: 800; line-height: 1; }
  .round-marker.current .round-word { display: none; }
}

/* The Guide uses example boards; it never reads a live match view. */
#game-guide { width: min(620px, calc(100vw - 1rem)); height: min(620px, calc(100dvh - 1rem)); overflow: hidden; padding: 0; border: 2px solid #a3c6c4; border-radius: .9rem; background: #172b35; color: #e7efec; box-shadow: 0 20px 60px #0009; }
#game-guide::backdrop { background: #061117cc; }
.guide-shell { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; height: 100%; min-height: 0; }
.guide-header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding: .8rem 1rem .4rem; }
.guide-header .eyebrow { color: #a9d3ce; }
.guide-header h2 { margin: .1rem 0; color: #fff1ce; font-size: 1.35rem; }
#guide-close { flex: none; min-width: 44px; min-height: 44px; padding: .1rem; font-size: 1.5rem; line-height: 1; }
.guide-sections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; padding: 0 1rem .55rem; }
.guide-sections button { min-width: 0; min-height: 38px; padding: .3rem .4rem; border: 1px solid #887b92; border-radius: .45rem; background: #252b48; color: #f4e9da; font-size: .77rem; font-weight: 700; }
.guide-sections button[aria-current="true"] { border-color: #e3bf80; background: #48404d; color: #fff1ce; }
.guide-progress { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 1rem .55rem; color: #c4d6d5; font-size: .78rem; font-weight: 800; }
#guide-dots { display: flex; gap: .3rem; }
#guide-dots span { width: .45rem; height: .45rem; border-radius: 50%; background: #5f777b; }
#guide-dots .current { background: #e3c16d; }
.guide-pages { min-height: 0; overflow-y: auto; padding: .2rem 1rem .7rem; }
.guide-card[hidden] { display: none; }
.guide-card { max-width: 520px; margin: 0 auto; }
.guide-card h3 { margin: .05rem 0 .55rem; color: #fff; font-size: clamp(1.25rem, 4vw, 1.7rem); letter-spacing: 0; text-transform: none; }
.guide-card p { margin: .65rem 0; line-height: 1.45; }
.guide-card .guide-step { margin: 0; color: #e3c16d; font-size: .75rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.guide-card figure { margin: 0; }
.guide-card figcaption { margin-top: .4rem; color: #c9dad7; font-size: .83rem; text-align: center; }
.guide-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; width: min(100%, 330px); margin: .3rem auto; padding: 8px; border: 1px solid #6d8a8f; border-radius: .7rem; background: #223b43; }
.guide-tile { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid #577179; border-radius: .3rem; background: #304b52; color: #fff; font-size: clamp(1rem, 4vw, 1.55rem); font-weight: 900; }
.guide-tile { position: relative; }
.guide-tile .class-icon { width: 58%; height: 58%; }
.guide-tile .seat-badge { position: absolute; left: 2px; top: 2px; font-size: .75em; }
.guide-tile-king { background: #2b6b71; }
.guide-tile-enemy-king { background: #753d41; }
.guide-tile-sighting { border-style: dashed; background: #634b3d; color: #ffe0a4; }
.guide-tile-mark { color: #c4f1e7; }
.guide-tile-highlight { border: 3px solid #e3c16d; box-shadow: inset 0 0 0 1px #102630; }
.guide-tile-sighting.guide-tile-highlight { border-style: dashed; }
.guide-demo { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .4rem; min-height: 10rem; padding: .7rem; border: 1px solid #6d8a8f; border-radius: .7rem; background: #223b43; }
.guide-pill { display: inline-flex; align-items: center; min-height: 2.6rem; padding: .45rem .65rem; border: 1px solid #92b7b5; border-radius: .45rem; background: #31545b; font-size: .87rem; font-weight: 800; }
.guide-pill-gold { background: #e3c16d; color: #1a2830; }
.guide-chevron { color: #e3c16d; font-size: 1.3rem; }
.guide-unit-list { display: grid; gap: .35rem; padding: .65rem; border: 1px solid #6d8a8f; border-radius: .7rem; background: #223b43; }
.guide-unit-list > span { display: grid; grid-template-columns: 1.6rem 1fr; column-gap: .45rem; align-items: baseline; }
.guide-unit-list .class-icon { grid-column: 1; grid-row: 1 / 3; align-self: center; width: 1.35rem; height: 1.35rem; }
.guide-unit-list small { grid-column: 2; color: #c9dad7; }
.guide-round-example { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin: .7rem 0; padding: .35rem; border: 1px solid #887b92; border-radius: .55rem; background: #171d32; }
.guide-round-example::before { content: ''; position: absolute; left: 25%; right: 25%; top: .35rem; bottom: .35rem; border: 2px solid #c77570; border-radius: .45rem; }
.guide-round-example span { display: grid; place-items: center; z-index: 1; min-width: 0; min-height: 2.1rem; font-size: .72rem; font-weight: 800; }
.guide-round-example .current { background: #e3bf80; color: #171d32; border-radius: .35rem; }
.guide-results-example { overflow: hidden; border: 1px solid #887b92; border-radius: .65rem; background: #171d32; }
.guide-results-example div { display: grid; gap: .1rem; padding: .4rem .65rem; border-bottom: 1px solid #60627d; font-size: .82rem; }
.guide-results-example div:last-child { border-bottom: 0; }
.guide-results-example strong { color: #e3bf80; }
.guide-results-example span { color: #c7bdc9; }
.guide-terrain-example { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; margin: .6rem 0; }
.guide-terrain-example > span { display: grid; justify-items: center; gap: .2rem; padding: .5rem .2rem; border: 1px solid #887b92; border-radius: .55rem; background: #171d32; text-align: center; }
.guide-terrain-example strong { font-size: .8rem; }
.guide-terrain-example small { color: #c7bdc9; font-size: .7rem; }
.guide-terrain-swatch { display: block; width: 2.8rem; height: 2.8rem; border: 1px solid #60627d; border-radius: .25rem; background: #313852; }
.guide-terrain-swatch.underground { background: repeating-linear-gradient(135deg, #0002 0 5px, transparent 5px 10px), #222a43; }
.guide-terrain-swatch.stair { border-color: #887b92; background: repeating-linear-gradient(90deg, #e3bf802b 0 2px, transparent 2px 7px), #48404d; }
.guide-footer { display: flex; align-items: center; justify-content: space-between; gap: .45rem; padding: .65rem 1rem; border-top: 1px solid #45606a; }
.guide-footer button { min-width: 4.7rem; }
#entry-guide, #lobby-guide { background: #31545b; }
@media (max-width: 440px) {
  .guide-header { padding: .6rem .7rem .3rem; }
  .guide-sections { padding: 0 .7rem .4rem; gap: .2rem; }
  .guide-sections button { font-size: .68rem; padding: .25rem .15rem; }
  .guide-progress { padding: 0 .7rem .4rem; }
  .guide-pages { padding: .1rem .7rem .5rem; }
  .guide-footer { padding: .5rem .7rem; }
  .guide-footer button { min-width: 0; padding: .4rem .5rem; font-size: .84rem; }
  .guide-demo { min-height: 8rem; }
}
#entry .entry-preview h2 { max-width: 14ch; color: #f5e4b9; font-size: clamp(1.75rem, 3.2vw, 3.2rem); line-height: 1.1; letter-spacing: -.025em; text-transform: none; }
#entry .entry-actions h2 { color: #f3e7c8; font-size: clamp(1.6rem, 2.5vw, 2.6rem); letter-spacing: -.025em; text-transform: none; }
#entry .open-lobbies h2 { color: #f1e2b7; font-size: 1.35rem; letter-spacing: 0; text-transform: none; }
@media (max-width: 790px) { #entry .entry-preview h2 { max-width: none; } }
@media (min-width: 791px) {
  #entry { max-width: 1180px; margin: 0 auto; }
  .entry-hero { grid-template-columns: minmax(0, 1.3fr) minmax(380px, .7fr); min-height: 0; }
  .entry-actions { align-self: center; }
  .open-lobbies { min-height: 0; }
  #open-lobbies-list { grid-template-columns: 1fr; }
}

/* Selected Knight/Royal entry scene. Its stacking context keeps the art behind live controls. */
header, main { position: relative; z-index: 1; }
#entry { position: relative; }
.entry-scene { display: none; position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse 58% 48% at 51% 43%, #27434a 0%, #122b36 53%, #07151e 100%); perspective: 1050px; }
body.scene-visible .entry-scene { display: block; }
.entry-scene::before { content: ""; position: absolute; inset: -8%; opacity: .42; background: repeating-linear-gradient(0deg, transparent 0 65px, #9fbaaf14 66px 67px), repeating-linear-gradient(90deg, transparent 0 65px, #9fbaaf14 66px 67px); transform: rotate(-12deg) scale(1.15); mask-image: radial-gradient(ellipse, #000 0, transparent 72%); }
.entry-scene::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 17%, #07151e90 78%, #07151e 100%); }
.entry-scene-glow { position: absolute; width: 70vw; height: 70vw; min-width: 700px; min-height: 700px; left: 50%; top: 48%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #c7b26824, #5b928326 29%, transparent 68%); filter: blur(30px); }
.entry-orbit { position: absolute; width: min(77vw, 1000px); aspect-ratio: 1; left: 50%; top: 49%; border: 1px solid #d7c48e24; border-radius: 50%; transform: translate(-50%, -50%) rotateX(66deg) rotate(-15deg); box-shadow: 0 0 45px #bfac7240, inset 0 0 45px #bfac721b; }
.entry-orbit::before, .entry-orbit::after { content: ""; position: absolute; border: 1px solid #d7c48e1c; border-radius: 50%; inset: 10%; }
.entry-orbit::after { inset: 23%; }
.entry-artifact { position: absolute; width: clamp(280px, 36vw, 570px); transform-style: preserve-3d; filter: drop-shadow(18px 36px 26px #020b11ba); }
.entry-artifact, .entry-artifact .artifact-float, .entry-artifact .artifact-bob { will-change: transform; }
.entry-artifact .artifact-float, .entry-artifact .artifact-bob { transform-style: preserve-3d; }
.entry-artifact svg { display: block; width: 100%; height: auto; overflow: visible; }
.entry-artifact.sword { left: max(-8vw, calc(50% - 735px)); top: 5%; transform: translate3d(var(--s-x, 0px), var(--s-y, 0px), 70px) rotateX(var(--s-rx, 0deg)) rotateY(var(--s-ry, 0deg)); }
.entry-artifact.crown { right: max(4vw, calc(50% - 660px)); top: 14%; transform: translate3d(var(--c-x, 0px), var(--c-y, 0px), 125px) rotateX(var(--c-rx, 0deg)) rotateY(var(--c-ry, 0deg)); }
.entry-artifact.sword .artifact-float { transform: rotateZ(-23deg); animation: entry-sword-tilt 24s ease-in-out infinite; }
.entry-artifact.crown .artifact-float { transform: rotateZ(14deg); animation: entry-crown-tilt 16s ease-in-out infinite; }
.entry-artifact.sword .artifact-bob { animation: entry-sword-bob 9s ease-in-out infinite; }
.entry-artifact.crown .artifact-bob { animation: entry-crown-bob 10s ease-in-out infinite; }
body.scene-lobby .entry-artifact { display: none; }
@keyframes entry-sword-tilt { 0%, 100% { transform: rotateZ(-23deg); } 50% { transform: rotateZ(23deg); } }
@keyframes entry-crown-tilt { 0%, 100% { transform: rotateZ(14deg); } 50% { transform: rotateZ(-14deg); } }
@keyframes entry-sword-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-34px); } }
@keyframes entry-crown-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-30px); } }
.entry-scene.is-paused .artifact-float, .entry-scene.is-paused .artifact-bob { animation-play-state: paused; }
.entry-spark { position: absolute; border-radius: 50%; width: 4px; height: 4px; background: #f8dea1; box-shadow: 0 0 18px 4px #e1bd74; opacity: .58; }
.entry-spark.one { left: 20%; top: 28%; } .entry-spark.two { right: 18%; top: 42%; width: 3px; height: 3px; } .entry-spark.three { left: 65%; bottom: 17%; width: 2px; height: 2px; }
#entry .entry-hero, #entry .open-lobbies { background: #142f3b; border-color: #a7b9ae65; box-shadow: 0 22px 75px #020c16a1, inset 0 1px #ffffff19; -webkit-backdrop-filter: blur(18px) saturate(115%); backdrop-filter: blur(18px) saturate(115%); }
#entry .entry-actions { background: #102932; -webkit-backdrop-filter: blur(13px); backdrop-filter: blur(13px); }
#entry #open-lobbies-list li { background: #102934; border-color: #7a9a9b9c; }
#lobby:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr); gap: 1rem; align-items: center; width: min(100%, 1180px); margin-left: auto; margin-right: auto; background: rgb(20 47 59 / 70%); border-color: #a7b9ae65; box-shadow: 0 22px 75px #020c16a1, inset 0 1px #ffffff19; -webkit-backdrop-filter: none; backdrop-filter: none; }
.lobby-info { min-width: 0; padding: clamp(.5rem, 2vw, 2rem); }
#lobby .lobby-info h2 { margin: .35rem 0 1rem; color: #f5e4b9; font-size: clamp(1.75rem, 3.2vw, 3.2rem); line-height: 1.1; letter-spacing: -.025em; text-transform: none; }
.lobby-info > p:not(.eyebrow) { color: #c8d7d4; }
#seats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; width: min(100%, 32rem); padding: 0; margin: 1.5rem 0 0; list-style: none; }
#seats li { padding: .65rem .8rem; border: 1px solid #55727a; border-radius: .5rem; background: #203843; }
.lobby-actions { display: flex; flex-direction: column; gap: .65rem; min-width: 0; padding: clamp(1.25rem, 3vw, 3rem); border: 1px solid #8caba8; border-radius: .65rem; background: #102932; }
.lobby-actions > button { width: 100%; }
.lobby-actions .row { margin-top: .8rem; }
.lobby-actions .row button { flex: 1; }
body.scene-lobby #connection { position: absolute; z-index: 2; top: 1.4rem; right: max(2rem, calc((100% - 1180px) / 2 + 1rem)); margin: 0; width: auto; font-size: .78rem; }
body.scene-lobby #notice:empty { display: none; }
body.scene-lobby #notice:not(:empty) { width: min(100%, 1180px); margin-left: auto; margin-right: auto; }
@media (min-width: 791px) {
  html:has(body:not(.in-match)) { scrollbar-gutter: stable; }
  #lobby:not([hidden]) { min-height: clamp(560px, 68vh, 620px); }
}
@media (max-width: 790px) {
  #lobby:not([hidden]) { grid-template-columns: 1fr; }
  .lobby-info { padding: .5rem; }
  .lobby-actions { padding: 1.2rem; }
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #entry .entry-hero, #entry .open-lobbies { background: #142f3bba; }
  #entry .entry-actions { background: #102932c9; }
  #entry #open-lobbies-list li { background: #102934c9; }
}
@media (max-width: 790px) {
  .entry-artifact.sword { left: -24vw; top: 3%; }
  .entry-artifact.crown { right: -30vw; top: 25%; }
}
@media (max-width: 430px) {
  .entry-artifact { width: 350px; opacity: .8; }
  .entry-artifact.sword { left: -215px; }
  .entry-artifact.crown { right: -210px; top: 34%; }
}
@media (prefers-reduced-motion: reduce) {
  .entry-artifact, .entry-artifact .artifact-float, .entry-artifact .artifact-bob { will-change: auto; }
  .entry-artifact.sword .artifact-float, .entry-artifact.crown .artifact-float,
  .entry-artifact.sword .artifact-bob, .entry-artifact.crown .artifact-bob { animation: none; }
}

/* Blind Kings title, controls, and lobby finish. */
.kick-notice:not([hidden]) { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1.25rem; width: 100%; margin: .2rem 0 1rem; padding: .8rem 1rem; border: 2px solid #e5a078; border-radius: .65rem; background: #432b2c; box-shadow: 0 8px 24px #020c1699; color: #fff2df; }
.kick-notice > div { display: grid; gap: .15rem; }
.kick-notice strong { font-size: 1.03rem; }
.kick-notice span { color: #f4d8c9; font-size: .9rem; }
.kick-notice button { flex: none; background: #594044; border-color: #f0b49b; }
@media (max-width: 430px) { .kick-notice:not([hidden]) { align-items: flex-start; flex-direction: column; } .kick-notice button { align-self: flex-end; } }
:root { scrollbar-color: #728f91 #162a33; scrollbar-width: thin; }
* { scrollbar-color: #728f91 #162a33; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: #162a33; border-radius: 10px; }
*::-webkit-scrollbar-thumb { background: #728f91; border: 2px solid #162a33; border-radius: 10px; }
*::-webkit-scrollbar-thumb:hover { background: #a9c2bb; }
header h1 { color: #f3dfac; font: 700 clamp(1.3rem, 2.3vw, 1.65rem)/1.05 Georgia, 'Times New Roman', serif; letter-spacing: .09em; text-transform: uppercase; text-shadow: 0 1px 12px #d6ae6940; }
header p { letter-spacing: .025em; }
#entry .entry-preview h2, #entry .entry-actions h2, #entry .open-lobbies h2,
#lobby .lobby-info h2, #guide-title, .match-result h2 { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; letter-spacing: .005em; text-transform: none; }
button { font-weight: 750; letter-spacing: .01em; transition: background-color .15s, border-color .15s, box-shadow .15s; }
button:not(:disabled):not(.cell):hover { box-shadow: inset 0 1px #ffffff28, 0 2px 10px #06141d7a; }
button:disabled { opacity: .64; box-shadow: none; cursor: not-allowed; }
button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid #f7da80; outline-offset: 3px; }
#entry .entry-actions #create:not(:disabled), #start:not(:disabled), #start-solo:not(:disabled), #plan-ready:not(:disabled),
#result-rematch:not(:disabled) { background: #dfc177; border-color: #f0d58f; color: #192b31; }
#entry .entry-actions #create:not(:disabled):hover, #start:not(:disabled):hover, #start-solo:not(:disabled):hover,
#plan-ready:not(:disabled):hover, #result-rematch:not(:disabled):hover { background: #f1d994; }
#ready:not(.is-unready):not(:disabled), #join:not(:disabled), #open-lobbies-list button:not(:disabled) { background: #2f797a; border-color: #a8d5cc; color: #fff; }
#ready:not(.is-unready):not(:disabled):hover, #join:not(:disabled):hover, #open-lobbies-list button:not(:disabled):hover { background: #398e8e; }
#start-pcs:not(:disabled), #ready.is-unready:not(:disabled), #leave:not(:disabled),
#refresh-lobbies:not(:disabled), #lobby-guide:not(:disabled), #entry-guide:not(:disabled),
#solo-create:not(:disabled) { background: #152e37; border-color: #789c9b; color: #d8e8e2; }
#start-pcs:not(:disabled):hover, #ready.is-unready:not(:disabled):hover, #leave:not(:disabled):hover,
#refresh-lobbies:not(:disabled):hover, #lobby-guide:not(:disabled):hover, #entry-guide:not(:disabled):hover,
#solo-create:not(:disabled):hover { background: #23434a; }
#entry .entry-actions #create:disabled { background: #40515a; border-color: #66777c; color: #aebabb; }

#room-code { display: inline-block; max-width: 100%; margin: 0 0 .3rem; padding: .25rem .6rem .3rem; border: 1px solid #d1b878; border-radius: .4rem; background: #112832; color: #ffe6a5; font: 800 clamp(1.6rem, 4.5vw, 2.8rem)/1.12 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#room-code[hidden] { display: none; }
#lobby .lobby-info h2 { margin: .35rem 0 .55rem; font-size: clamp(1.45rem, 2.7vw, 2.25rem); }
.lobby-info > p:not(.eyebrow) { margin: .4rem 0; }
#seats { width: 100%; margin-top: 1.1rem; }
#seats li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .1rem .6rem; align-items: center; min-height: 4.4rem; padding: .55rem .7rem; border-color: #648489; border-left: 3px solid var(--seat-accent, #718b8e); background: #19323d; }
#seats li .seat-badge { grid-row: 1 / 3; width: 2.55rem; height: 2.55rem; font-size: 1.3rem; border-radius: .45rem; }
#seats li strong { align-self: end; font-size: .91rem; }
.seat-state { align-self: start; color: #d4e1dd; font-size: .76rem; font-weight: 800; }
#seats li .remove-seat { grid-column: 3; grid-row: 1 / 3; min-height: 44px; padding: .35rem .55rem; background: #152e37; border-color: #8da9a8; color: #e1e8e4; font-size: .78rem; }
#seats li .remove-seat:hover { background: #334e52; }
#seats li.seat-ready { border-color: #9ac9a5; background: #203f3b; }
#seats li.seat-ready .seat-state { color: #b9efbe; }
#seats li.seat-disconnected { border-color: #bb897b; }
#seats li.seat-disconnected .seat-state { color: #ffc2ac; }
#seats li.seat-open { border-style: dashed; }
#seats li.seat-open .seat-state { color: #bbcfcb; }
#seats li.seat-pc .seat-state { color: #e9d18b; }
#seats li.seat-north { --seat-accent: #7183d0; }
#seats li.seat-east { --seat-accent: #d37f58; }
#seats li.seat-south { --seat-accent: #63ad7d; }
#seats li.seat-west { --seat-accent: #ab81cf; }
.lobby-actions > button { min-height: 48px; }
.lobby-actions .eyebrow { margin-bottom: .25rem; }
#open-lobbies-list li.open-room-card { border-left: 3px solid #c9b476; background: #19323d; }
#entry #open-lobbies-list li.open-room-card { background: #19323d; }
.open-room-identity { display: flex !important; align-items: center; gap: .65rem; min-width: 0; }
.open-room-mark { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border: 1px solid #bba56b; border-radius: .45rem; background: #4a4738; color: #f8dd96; }
.open-room-details { min-width: 0; }
.open-room-details strong { color: #f3dfac; font: 800 1.04rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; }
.open-room-state { margin-left: auto; color: #b9dcca; font-size: .75rem; font-weight: 800; }
@media (max-width: 430px) {
  #seats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
  #seats li { padding: .45rem; gap: .08rem .4rem; }
  #seats li .seat-badge { width: 2rem; height: 2rem; font-size: 1rem; }
  #seats li .remove-seat { grid-column: 1 / -1; grid-row: 3; width: 100%; }
  .open-room-state { display: none; }
  #room-code { letter-spacing: .07em; }
}
@media (prefers-reduced-motion: reduce) { button { transition: none; } }

/* Midnight Court surfaces across the entry, waiting room, overlays, and Guide.
   The entry scene and the live board retain their own backgrounds and cues. */
:root { color: #f4e9da; background: #171d32; scrollbar-color: #887b92 #171d32; }
* { scrollbar-color: #887b92 #171d32; }
*::-webkit-scrollbar-track { background: #171d32; }
*::-webkit-scrollbar-thumb { background: #887b92; border-color: #171d32; }
*::-webkit-scrollbar-thumb:hover { background: #b3a1ba; }
header { background: #171d32; border-bottom-color: #887b92; }
header p, .hint, .board-legend, #connection { color: #c7bdc9; }
.panel:not(.board-panel):not(.match-result), .side { background: #1d233c; border-color: #887b92; color: #f4e9da; }
.panel:not(.board-panel):not(.match-result) h2, .panel:not(.board-panel):not(.match-result) h3,
.eyebrow, .summary[data-phase="resolving"] .eyebrow { color: #e3bf80; }
button { background: #313852; border-color: #887b92; color: #f4e9da; }
button:hover { background: #424b69; }
button:disabled, #entry .entry-actions #create:disabled { background: #34394e; border-color: #68677b; color: #c7bdc9; }
input { background: #171d32; border-color: #887b92; color: #f4e9da; }
input::placeholder, .entry-code-row input::placeholder { color: #c7bdc9; }
.summary { background: #252b48; border-color: #887b92; }
.summary[data-phase="resolving"] { background: #48404d; border-color: #e3bf80; }
.summary[data-phase="finished"] { background: #313852; border-color: #887b92; }
.summary.low-time { background: #543039; }
.time-summary h2, .summary .eyebrow, #save-summary, #skip-status:not([hidden]) { color: #f4e9da; }
.ready-row { background: #1d233ce8; border-color: #887b92; }
.orientation-control, #mobile-menu:not([hidden]), #mobile-menu-button, .mobile-overlay.is-open { background: #1d233c; border-color: #887b92; color: #f4e9da; }
.orientation-control[aria-pressed="true"] { background: #e3bf80; border-color: #f4dda8; color: #171d32; }
.unit { color: #f4e9da; border-bottom-color: #60627d; }
.unit:hover, .unit.active { background: #313852; }
.unit.dead { background: #252b3b; color: #c7bdc9; }
.unit.own-king-row { background: #303959; border-color: #9ca9d7; }
.result-item { color: #f4e9da; }
.result-item:hover, .result-item:focus-visible { background: #48404d; }
.intel-row, #events .result-group { border-color: #60627d; }
#event-empty:not([hidden]) { background: #252b48; border-color: #887b92; border-left-color: #887b92; }
#event-empty:not([hidden])::before, .event-head small { color: #c7bdc9; }

/* Keep the selected sword and crown scene visible behind these court panels. */
#entry .entry-hero, #entry .open-lobbies { background: #1d233cba; border-color: #a6a18f99; }
#entry .entry-actions, .lobby-actions { background: #171d32c9; border-color: #887b92; }
#lobby:not([hidden]) { background: #1d233cb3; border-color: #a6a18f99; }
.entry-preview figcaption, #entry-preview-content > p, .lobby-info > p:not(.eyebrow),
.open-lobbies-refresh-note, #open-lobbies-status, .entry-actions .entry-or { color: #c7bdc9; }
.solo-entry { border-top-color: #887b92; color: #c7bdc9; }
.solo-entry button, #start-pcs:not(:disabled), #ready.is-unready:not(:disabled), #leave:not(:disabled),
#refresh-lobbies:not(:disabled), #lobby-guide:not(:disabled), #entry-guide:not(:disabled),
#solo-create:not(:disabled), #seats li .remove-seat { background: #252b48; border-color: #a6a18f; color: #f4e9da; }
#start-pcs:not(:disabled):hover, #ready.is-unready:not(:disabled):hover, #leave:not(:disabled):hover,
#refresh-lobbies:not(:disabled):hover, #lobby-guide:not(:disabled):hover, #entry-guide:not(:disabled):hover,
#solo-create:not(:disabled):hover, #seats li .remove-seat:hover { background: #393f60; }
#ready:not(.is-unready):not(:disabled), #join:not(:disabled), #open-lobbies-list button:not(:disabled) { background: #326c72; border-color: #8ac4bb; }
#ready:not(.is-unready):not(:disabled):hover, #join:not(:disabled):hover, #open-lobbies-list button:not(:disabled):hover { background: #408087; }
#room-code { background: #171d32; color: #ffe6a5; }
#seats li, #open-lobbies-list li, #open-lobbies-list li.open-room-card,
#entry #open-lobbies-list li, #entry #open-lobbies-list li.open-room-card { background: #252b48; border-color: #887b92; }
#seats li { border-left-color: var(--seat-accent, #887b92); }
#seats li.seat-ready { background: #273b3e; border-color: #9ac9a5; }
#seats li.seat-disconnected { border-color: #bb897b; }
#seats li.seat-open { border-color: #887b92; }
#open-lobbies-list li.open-room-card, #entry #open-lobbies-list li.open-room-card { border-left-color: #e3bf80; }
#open-lobbies-list li small, .seat-state { color: #d9d2df; }
.open-room-mark { background: #48404d; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #entry .entry-hero, #entry .open-lobbies { background: #1d233cba; }
  #entry .entry-actions { background: #171d32c9; }
  #entry #open-lobbies-list li { background: #252b48; }
}

#game-guide { background: #1d233c; border-color: #a6a18f; color: #f4e9da; }
.guide-header .eyebrow, .guide-card .guide-step { color: #e3bf80; }
.guide-header h2, .guide-card h3 { color: #f4e9da; }
.guide-progress, .guide-card figcaption, .guide-unit-list small { color: #c7bdc9; }
#guide-dots span { background: #60627d; }
#guide-dots .current { background: #e3bf80; }
.guide-grid, .guide-demo, .guide-unit-list { background: #171d32; border-color: #887b92; }
.guide-tile { background: #313852; border-color: #60627d; color: #f4e9da; }
.guide-tile-king { background: #37875c; }
.guide-tile-enemy-king { background: #5269b7; }
.guide-tile-mark:has(.seat-badge) { background: #37875c; color: #fff; }
.guide-tile-sighting { background: #654b46; border-color: #d09b69; color: #ffe0a4; }
.guide-tile-mark { color: #8fe2d5; }
.guide-tile-highlight { border-color: #e3bf80; box-shadow: inset 0 0 0 1px #171d32; }
.guide-pill { background: #313852; border-color: #887b92; }
.guide-pill-gold { background: #e3bf80; border-color: #e3bf80; color: #171d32; }
.guide-chevron { color: #e3bf80; }
.guide-footer { border-top-color: #887b92; }