:root {
  color-scheme: light;
  --desk: #487f86;
  --shell: #edeee8;
  --face: #dedfd8;
  --light: #f5f5ef;
  --shadow: #767b77;
  --line: #929791;
  --ink: #252a29;
  --muted: #555f5b;
  --screen: #173e43;
  --screen-text: #a7e7cc;
  --accent: #758c72;
  --warm: #9d653e;
  --mono: "Lucida Console", Monaco, Consolas, "Liberation Mono", monospace;
  --ui: Tahoma, Verdana, Geneva, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--desk); font-family: var(--ui); font-size: 13px; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
button:focus-visible, input:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid #273d39; outline-offset: 3px; }
.hidden { display: none !important; }

.desktop { width: min(1320px, calc(100% - 36px)); min-height: calc(100vh - 36px); margin: 18px auto; display: flex; flex-direction: column; background: var(--shell); border: 2px solid; border-color: var(--light) var(--shadow) var(--shadow) var(--light); box-shadow: 4px 4px 0 #666c6780; }
main { flex: 1; min-width: 0; }
.app-bar { min-height: 46px; padding: 7px 16px; display: flex; justify-content: space-between; align-items: center; gap: 14px; background: #b8bbb4; border-bottom: 1px solid #868b84; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 800 15px var(--mono); letter-spacing: -.055em; white-space: nowrap; }
.brand-mark { width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; gap: 2px; border: 1px solid #616b63; background: #3a4840; box-shadow: inset 1px 1px #8f9f8f; }
.brand-mark i { width: 3px; display: block; background: #b0c3a4; }
.brand-mark i:nth-child(1) { height: 7px; }.brand-mark i:nth-child(2) { height: 14px; }.brand-mark i:nth-child(3) { height: 10px; }
.bar-actions { display: flex; align-items: center; gap: 16px; }
.edition, .connection-pill, .bar-button, .window-line, .overline, .home-note, .screen-head, .screen-foot, .room-status, .count-pill, .start-hint, .board-state-pill, .board-footer, .stat-card > span, .stat-card > small, .ping-heading, .statusbar, .dialog-top, .dialog-note { font-family: var(--mono); font-size: 10px; letter-spacing: .035em; }
.edition { color: #5e6963; }
.connection-pill { display: inline-flex; align-items: center; gap: 7px; color: #344b39; white-space: nowrap; }
.connection-pill.is-offline { color: #8a4d37; }
.connection-dot { width: 7px; height: 7px; border: 1px solid currentColor; background: #87a881; }
.connection-pill.is-offline .connection-dot { background: #b77e62; }
.bar-button { min-height: 28px; padding: 4px 8px; border: 1px solid; border-color: var(--light) var(--shadow) var(--shadow) var(--light); background: #d4d6cf; color: var(--ink); font-weight: 700; }
.bar-button span { margin-left: 9px; color: #58665f; }
@media (hover: hover) { .bar-button:hover, .secondary-button:hover { background: #e2e4dc; } }

.home-screen { padding: 18px 24px 24px; }
.window-line { display: flex; justify-content: space-between; gap: 20px; padding: 0 0 12px; border-bottom: 1px solid #a5aaa2; color: #57615b; }
.window-line b { color: #758e6e; font-size: 8px; vertical-align: 1px; }
.home-layout { min-height: 580px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding: 30px 14px 28px; }
.home-copy { min-width: 0; }
.overline { color: #57635b; font-weight: 700; margin: 0; }
.home-copy h1 { margin: 21px 0 18px; font: 900 clamp(56px, 6vw, 88px)/.91 var(--mono); letter-spacing: -.105em; }
.cursor { color: #7c8f75; }
.home-lede { max-width: 560px; margin: 0 0 34px; color: #434b48; font-size: 15px; line-height: 1.6; }
.entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 580px; }
.entry-panel { min-width: 0; min-height: 182px; padding: 16px; display: flex; flex-direction: column; background: #c2c4bd; border: 1px solid; border-color: var(--light) var(--shadow) var(--shadow) var(--light); }
.entry-panel h2 { margin: 0 0 7px; font-size: 17px; letter-spacing: -.03em; }
.entry-panel p { margin: 0 0 16px; color: #57605a; font-size: 12px; line-height: 1.45; }
.entry-panel label { color: #505b54; font: 700 10px var(--mono); margin: auto 0 8px; text-transform: uppercase; }
.action-button, .secondary-button, .join-button, .small-button, .ping-grid button { border: 2px solid; border-color: var(--light) var(--shadow) var(--shadow) var(--light); background: #c4c6be; color: var(--ink); font: 700 11px var(--mono); }
.action-button { min-height: 42px; padding: 8px 13px; display: inline-flex; align-items: center; justify-content: space-between; gap: 17px; background: #b1beaa; }
@media (hover: hover) { .action-button:hover { background: #c4d0ba; } }
.action-button:active, .secondary-button:active, .join-button:active, .small-button:active, .ping-grid button:active { border-color: var(--shadow) var(--light) var(--light) var(--shadow); }
.entry-panel .action-button { width: 100%; margin-top: auto; }
.join-row { display: flex; gap: 5px; }
.join-row input { min-width: 0; flex: 1; height: 40px; padding: 0 10px; border: 2px solid; border-color: var(--shadow) var(--light) var(--light) var(--shadow); border-radius: 0; background: #e9ebe4; color: var(--ink); font: 800 17px var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.join-row input::placeholder { color: #8c938b; }
.join-button { flex: 0 0 40px; height: 40px; font-size: 20px; }
.hero-art { width: 100%; max-width: 500px; margin: auto; padding: 12px; background: #b5b8b0; border: 2px solid; border-color: var(--light) var(--shadow) var(--shadow) var(--light); }
.screen-head, .screen-foot { display: flex; justify-content: space-between; gap: 15px; padding: 5px 3px 9px; color: #4f5d55; font-weight: 700; }
.screen-foot { padding: 9px 3px 3px; }
.screen-grid { position: relative; aspect-ratio: 1.35; overflow: hidden; background: var(--screen); border: 3px solid; border-color: #6b726b #e1e5da #e1e5da #6b726b; }
.screen-grid svg { width: 100%; height: 100%; display: block; }
.screen-gridlines { fill: none; stroke: #68796a; stroke-width: 1; opacity: .42; }
.screen-trace { fill: none; stroke: var(--screen-text); stroke-width: 3; stroke-linejoin: round; }
.screen-grid circle { fill: #d6bc86; }
.screen-cross { position: absolute; top: 12px; left: 15px; color: #9db39b; font: 20px var(--mono); }
.home-note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid #a5aaa2; color: #5c6860; }

.room-screen { padding: 22px 24px 36px; }
.room-header { display: flex; justify-content: space-between; align-items: end; gap: 20px; padding: 0 0 19px; margin-bottom: 16px; border-bottom: 1px solid #a1a69e; }
.room-header h1 { font: 700 clamp(28px, 3vw, 38px) var(--mono); letter-spacing: -.07em; margin: 6px 0 6px; }
.room-header #roomCode { letter-spacing: .025em; }
.room-status { margin: 0; color: #5b655e; line-height: 1.5; }
.secondary-button { min-height: 37px; padding: 7px 11px; white-space: nowrap; }
.secondary-button span { margin-left: 12px; }
.lobby-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 14px; align-items: start; }
.lobby-main { display: grid; gap: 14px; }
.panel { min-width: 0; padding: 17px; background: var(--face); border: 1px solid; border-color: var(--light) var(--shadow) var(--shadow) var(--light); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 15px; }
.section-head h2 { margin: 0; font-size: 18px; letter-spacing: -.035em; }
.section-head p { margin: 0; color: #5d665e; font-size: 11px; line-height: 1.35; text-align: right; }
.preset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.preset-card, .role-card, .mode-button { border: 2px solid; border-color: var(--light) var(--shadow) var(--shadow) var(--light); border-radius: 0; background: #c7c9c2; color: var(--ink); text-align: left; }
.preset-card { min-width: 0; min-height: 107px; padding: 10px 11px; display: flex; flex-direction: column; gap: 5px; }
.preset-card strong { font-size: 13px; }.preset-card > span { font: 800 21px var(--mono); letter-spacing: -.09em; margin-top: auto; }.preset-card small { color: #526058; font: 700 10px var(--mono); line-height: 1.3; }
@media (hover: hover) { .preset-card:not(:disabled, .is-selected):hover, .role-card:not(:disabled, .is-selected):hover, .mode-button:not(:disabled, .is-active, .is-coach-target):hover { background: #d9dbd3; } }
.preset-card.is-selected, .role-card.is-selected { background: #adb5a9; border-color: var(--shadow) var(--light) var(--light) var(--shadow); box-shadow: inset 1px 1px #858d82; }
.preset-card.is-selected strong::before, .role-card.is-selected strong::before { content: "■"; color: #304a3c; font: 9px var(--mono); margin-right: 6px; vertical-align: 1px; }
.role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.role-card { min-height: 67px; padding: 9px 11px; display: flex; align-items: center; gap: 11px; }
.role-card.is-taken { opacity: .5; }.role-icon { flex: 0 0 26px; color: #3c5046; font: 23px var(--mono); text-align: center; }
.role-card > span:last-child { display: grid; gap: 3px; }.role-card strong { font-size: 12px; }.role-card small { color: #535e55; font-size: 10px; line-height: 1.3; }
.crew-panel .section-head { align-items: center; }.crew-panel .section-head p { display: none; }
.count-pill { color: #4f5f55; font-weight: 400; margin-left: 5px; }
.lobby-players, .game-players { display: grid; gap: 6px; }
.player-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lobby-players .player-row { min-height: 44px; padding: 5px; border: 1px solid #a4aaa1; background: #babdb5; }
.player-symbol { flex: 0 0 25px; width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid #56665b; background: #899b87; color: #182d22; font: 800 12px var(--mono); }
.player-symbol[data-slot="1"] { background: #a8b3ab; }.player-symbol[data-slot="2"] { background: #b7a38d; }.player-symbol[data-slot="3"] { background: #a9a4af; }
.player-details { min-width: 0; flex: 1; display: grid; gap: 2px; }.player-details strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }.player-details small { color: #536057; font: 700 9px var(--mono); text-transform: uppercase; }
.player-presence { font: 700 9px var(--mono); color: #3f644a; }.player-presence.is-away { color: #83583c; }
.empty-slot { padding: 8px 3px 2px; color: #637067; font: 10px var(--mono); }
.crew-tip { padding-top: 13px; margin: 15px 0 14px; border-top: 1px solid #9ea59c; color: #536057; font-size: 11px; line-height: 1.5; }
.full-button { width: 100%; }.start-hint { color: #57625a; text-align: center; margin: 9px 0 0; line-height: 1.4; }

.game-screen { display: grid; gap: 12px; }
.result-banner { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 16px; background: #acbba5; border: 2px solid; border-color: var(--light) var(--shadow) var(--shadow) var(--light); }
.result-banner span { color: #445348; font: 700 10px var(--mono); }.result-banner h2 { margin: 3px 0; font-size: 19px; }.result-banner p { margin: 0; font-size: 11px; color: #434d45; }
.result-banner.is-loss { padding: 16px 18px; background: #1f1513 repeating-linear-gradient(0deg, #ffffff0a 0 1px, transparent 1px 3px); border-color: #4a2a24 #0d0807 #0d0807 #4a2a24; box-shadow: inset 0 0 40px #d8392033; }
.result-banner.is-loss #resultKicker { color: #ff8466; letter-spacing: .14em; }.result-banner.is-loss #resultKicker::before { content: "● "; animation: signal-blink .8s steps(1, end) 6; }
.result-banner.is-loss h2 { margin: 6px 0 8px; color: #ff5a3d; font: 900 clamp(30px, 6vw, 46px)/1 var(--mono); letter-spacing: -.03em; text-transform: uppercase; text-shadow: 2px 0 #3fc8ff66, -2px 0 #ff1e0066, 0 0 14px #ff3b1f99; }
.result-banner.is-loss p { color: #efc9bd; font-size: 13px; line-height: 1.45; }
.flatline { display: none; flex: 1 1 120px; width: 100%; min-width: 0; height: 48px; filter: drop-shadow(0 0 3px #ff3b1f); }.result-banner.is-loss .flatline { display: block; }.flatline path { fill: none; stroke: #ff5a3d; stroke-width: 2; stroke-linejoin: round; }
@keyframes signal-blink { 50% { opacity: 0; } }
.game-screen.is-lost #integrityValue, .game-screen.is-lost .board-state-pill { color: #c0391f; }.game-screen.is-lost .board-scroller { background: #704239; }
.game-screen.is-lost .tile:not(.is-contained):not(.is-anomaly):not(.is-wrong-flag) { filter: grayscale(.85) brightness(.88); transition: filter .6s steps(3, end); }
.game-screen.is-lost .tile.is-contained { background-color: #c7361d; color: #fff3ea; border-color: #e7735c #761a0c #761a0c #e7735c; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #b9bcb4; border: 2px solid; border-color: var(--shadow) var(--light) var(--light) var(--shadow); }
.stat-card { min-width: 0; min-height: 62px; padding: 8px 12px; display: flex; flex-wrap: wrap; align-items: baseline; align-content: center; column-gap: 8px; border-right: 1px solid #939a90; }
.stat-card:last-child { border-right: 0; }.stat-card > span { color: #566158; font-weight: 700; }.stat-card > strong { font: 800 24px var(--mono); letter-spacing: -.075em; }.stat-card > small { width: 100%; color: #59655b; font-size: 9px; }
.play-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 12px; align-items: start; }
.board-panel { min-width: 0; padding: 13px; background: #bdc0b8; border: 2px solid; border-color: var(--light) var(--shadow) var(--shadow) var(--light); }
.board-topline { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.board-topline h2 { margin: 0; font-size: 17px; }.board-topline h2 span { color: #5b665c; font: 700 12px var(--mono); margin-left: 5px; }
.board-state-pill { color: #45584a; font-weight: 700; white-space: nowrap; }
.mode-toolbar { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 11px; }
.mode-button { min-height: 32px; padding: 5px 10px; font: 700 11px var(--mono); text-align: center; }
.mode-button kbd { color: #5f6c60; font: 9px var(--mono); margin-left: 6px; }
.mode-button.is-active { background: #a5b4a1; border-color: var(--shadow) var(--light) var(--light) var(--shadow); box-shadow: inset 1px 1px #81917c; }
.role-mode { margin-left: auto; }.role-mode span:first-child { font-size: 14px; margin-right: 3px; }
.board-scroller { width: 100%; overflow: auto; padding: 10px; background: #a4a8a1; border: 3px solid; border-color: #737a73 #e6e9e1 #e6e9e1 #737a73; scrollbar-color: #787f75 #c5c7bf; }
.board { --columns: 12; --tile-size: 38px; width: max-content; display: grid; grid-template-columns: repeat(var(--columns), var(--tile-size)); grid-auto-rows: var(--tile-size); gap: 1px; margin: 0 auto; background: #8e958d; }
.board[data-preset="training"] { --columns: 8; --tile-size: 42px; }.board[data-preset="expert"] { --columns: 16; --tile-size: 32px; }
.tile { position: relative; padding: 0; border: 2px solid; border-color: #f0f1eb #707770 #707770 #f0f1eb; border-radius: 0; background: #c6c9c2; color: #27342d; font: 800 calc(var(--tile-size) * .44) var(--mono); touch-action: manipulation; }
@media (hover: hover) { .tile:hover { background: #d9dbd4; } }
.tile:focus-visible { z-index: 2; outline: 2px solid #2d4c41; outline-offset: -4px; }
.tile.is-selected { z-index: 1; box-shadow: inset 0 0 0 2px #354d40; }
.tile.is-pinged::after { content: ""; position: absolute; inset: -3px; border: 2px dashed #8a5337; pointer-events: none; }
.tile.is-revealed { background: #afb4ac; border: 1px solid #858c84; }
@media (hover: hover) { .tile.is-revealed:hover { background: #bcc1b8; } }
.tile.is-concealed-clue { background: #a8b0a7; }.tile.is-contained { background: #7d827b; color: #f2efe5; border-color: #656b64; background-image: repeating-linear-gradient(135deg, #ffffff12 0 3px, transparent 3px 8px); }
.tile.is-flagged { background: #b8b9af; color: #79533c; }.tile.is-scouted-safe { box-shadow: inset 0 0 0 2px #4e7467; }.tile.is-scouted-anomaly { box-shadow: inset 0 0 0 2px #9a674a; }
.tile.is-pinned { box-shadow: inset 0 0 0 2px #536b53; }.tile.is-scan-center::before { content: "▦"; position: absolute; left: 2px; top: 1px; color: #405a46; font: 800 8px var(--mono); }
.tile-main { display: grid; place-items: center; width: 100%; height: 100%; line-height: 1; }.tile-zero .tile-main { color: #77847a; font-size: calc(var(--tile-size) * .35); }
.tile-owner { position: absolute; right: 2px; top: 1px; min-width: 11px; color: #41584a; font: 800 9px var(--mono); text-align: center; }
.tile.is-flagged .tile-owner { color: #6b4d3a; }.tile.is-concealed-clue .tile-owner { color: #253e33; }
.tile[data-value="1"] .tile-main { color: #314d46; }.tile[data-value="2"] .tile-main { color: #4b555f; }.tile[data-value="3"] .tile-main, .tile[data-value="4"] .tile-main, .tile[data-value="5"] .tile-main, .tile[data-value="6"] .tile-main, .tile[data-value="7"] .tile-main, .tile[data-value="8"] .tile-main { color: #654a3c; }
.board-footer { display: flex; justify-content: space-between; gap: 15px; padding-top: 9px; color: #536056; line-height: 1.4; }.board-footer span:last-child { text-align: right; }
.intel-column { display: grid; gap: 10px; min-width: 0; }.intel-column .panel { padding: 13px; }
.section-head.compact { margin-bottom: 10px; }.section-head.compact h2 { font-size: 15px; }
#selectedCoord { color: #506252; font: 700 11px var(--mono); }
.selected-description { min-height: 42px; margin: 0 0 10px; color: #4d584f; font-size: 11px; line-height: 1.5; }
.clue-controls { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }.small-button { padding: 6px; font-size: 10px; }
@media (hover: hover) { .small-button:hover, .ping-grid button:hover { background: #dadcd4; } }
.ping-heading { display: flex; justify-content: space-between; color: #566259; padding-top: 9px; margin: 8px 0 7px; border-top: 1px solid #9aa299; font-weight: 700; }
.ping-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }.ping-grid button { min-height: 32px; padding: 6px 3px; font-size: 10px; }
.feed-list, .scans-list, .activity-list { display: grid; gap: 6px; }.feed-item, .scan-item, .activity-item { border-bottom: 1px solid #a5aba2; padding-bottom: 6px; color: #445248; font-size: 11px; line-height: 1.4; }.feed-item:last-child, .scan-item:last-child, .activity-item:last-child { border-bottom: 0; padding-bottom: 0; }.feed-item small { margin-left: 4px; color: #677268; }
.empty-feed { color: #647067; font-size: 11px; line-height: 1.5; }.scans-list:not(:empty) { margin-top: 8px; padding-top: 8px; border-top: 1px solid #a5aba2; }
.game-players .player-row { padding-bottom: 6px; border-bottom: 1px solid #a5aba2; }.game-players .player-row:last-child { padding-bottom: 0; border-bottom: 0; }
.log-panel { padding: 0 !important; }.log-panel summary { list-style: none; padding: 12px 13px; cursor: pointer; font-weight: 700; font-size: 12px; }.log-panel summary::-webkit-details-marker { display: none; }.log-panel summary span { float: right; font: 15px var(--mono); }.log-panel[open] summary span { transform: rotate(45deg); }.log-panel .activity-list { padding: 0 13px 12px; }.activity-item { color: #566257; font: 10px var(--mono); }.activity-item time { color: #727c71; margin-right: 5px; }
.statusbar { display: flex; justify-content: space-between; gap: 12px; padding: 8px 14px; border-top: 1px solid #8e948b; background: #b8bab3; color: #57625a; }

.help-dialog { width: min(520px, calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 19px; background: #d2d4cd; border: 2px solid; border-color: var(--light) var(--shadow) var(--shadow) var(--light); color: var(--ink); box-shadow: 5px 5px 0 #5259528c; }.help-dialog::backdrop { background: #252c28b8; }.dialog-top { display: flex; justify-content: space-between; align-items: center; color: #576259; }.dialog-top button { width: 27px; height: 27px; border: 1px solid; border-color: var(--light) var(--shadow) var(--shadow) var(--light); background: #c0c3bb; font-size: 18px; line-height: 1; }.help-dialog h2 { margin: 17px 0 9px; font-size: 25px; letter-spacing: -.04em; }.help-dialog p, .help-dialog li { font-size: 12px; line-height: 1.55; }.help-dialog ol { padding-left: 20px; display: grid; gap: 8px; }.dialog-note { padding-top: 11px; border-top: 1px solid #9ea69b; line-height: 1.55 !important; }
.toast { position: fixed; z-index: 10; right: 20px; bottom: 20px; max-width: min(360px, calc(100vw - 40px)); padding: 10px 13px; border: 2px solid; border-color: var(--light) var(--shadow) var(--shadow) var(--light); background: #d2d4cc; box-shadow: 3px 3px 0 #6269608c; font: 700 11px var(--mono); }

@media (max-width: 990px) {
  .home-layout { grid-template-columns: 1fr; gap: 26px; min-height: 0; }.hero-art { max-width: 560px; margin: 0; }.lobby-layout, .play-layout { grid-template-columns: 1fr; }.intel-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }.board-scroller { display: flex; }
}
@media (max-width: 650px) {
  .desktop { width: 100%; min-height: 100vh; margin: 0; border: 0; box-shadow: none; }.app-bar { padding: 7px 12px; }.edition { display: none; }.brand { font-size: 13px; }.bar-actions { gap: 9px; }
  .home-screen { padding: 15px 14px 20px; }.home-layout { padding: 26px 3px 24px; }.home-copy h1 { font-size: clamp(51px, 13vw, 73px); }.home-lede { font-size: 13px; margin-bottom: 23px; }.entry-grid { grid-template-columns: 1fr; }.entry-panel { min-height: 128px; }.entry-panel h2 { font-size: 15px; }.hero-art { max-width: 430px; }.home-note { font-size: 9px; }
  .room-screen { padding: 17px 12px 28px; }.room-header { align-items: stretch; flex-direction: column; gap: 11px; }.room-header h1 { font-size: 30px; }.secondary-button { width: 100%; display: flex; justify-content: space-between; }.section-head { display: block; }.section-head p { text-align: left; margin-top: 4px; }.panel { padding: 13px; }.preset-grid { gap: 5px; }.preset-card { min-height: 100px; padding: 7px; }.preset-card strong { font-size: 11px; }.preset-card > span { font-size: 17px; }.preset-card small { font-size: 9px; }.role-grid { grid-template-columns: 1fr; gap: 5px; }.role-card { min-height: 54px; }.crew-panel .section-head p { display: block; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.stat-card { min-height: 55px; padding: 7px 10px; border-bottom: 1px solid #939a90; }.stat-card:nth-child(2) { border-right: 0; }.stat-card:nth-last-child(-n+2) { border-bottom: 0; }.stat-card > strong { font-size: 20px; }
  .board-panel { padding: 9px; }.board-topline { align-items: start; }.board-topline h2 { font-size: 15px; }.board-state-pill { font-size: 8px; white-space: normal; text-align: right; }.mode-button { padding: 5px 8px; }.mode-button kbd { display: none; }.role-mode { margin-left: 0; }.board-scroller { padding: 6px; }.board { --tile-size: 32px; }.board[data-preset="training"] { --tile-size: 36px; }.board[data-preset="expert"] { --tile-size: 30px; }.board-footer { font-size: 9px; }.intel-column { grid-template-columns: 1fr; }.result-banner { align-items: stretch; flex-direction: column; }.flatline { flex: none; height: 36px; }.statusbar { font-size: 8px; }.statusbar span:nth-child(2) { display: none; }
}
@media (max-width: 390px) {
  .brand { font-size: 11px; }.brand-mark { width: 22px; height: 22px; }.connection-pill { font-size: 9px; }.bar-button { font-size: 0; width: 27px; }.bar-button span { font-size: 12px; margin: 0; }
  .preset-grid { grid-template-columns: 1fr; }.preset-card { min-height: 46px; padding: 7px 9px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }.preset-card > span { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; }.preset-card small { grid-column: 1; }
  .board[data-preset="training"] { --tile-size: 34px; }
}
/* Bright desktop chrome, with color reserved for actions and signals. */
.app-bar { background: #225b65; border-bottom-color: #163e47; }
.brand, .connection-pill, .edition { color: #f4f5e9; }
.brand-mark { background: #173e43; border-color: #a6d1cd; }
.brand-mark i { background: #f2c66c; }
.connection-dot { background: #b7e1ad; }
.connection-pill.is-offline { color: #ffe1a0; }
.cursor { color: #bd602a; }
.entry-panel, .hero-art, .board-panel { background: #dcded7; }
.hero-art { box-shadow: 5px 5px 0 #647770; }
.screen-gridlines { stroke: #739f99; }
.screen-grid circle { fill: #ffcb69; }
.action-button { background: #f1c56e; color: #332816; font-size: 13px; }
@media (hover: hover) { .action-button:hover { background: #ffdb8b; } }
.secondary-button, .join-button, .small-button, .ping-grid button, .bar-button { background: #e7e8e1; }
.join-button { background: #b6d8cf; }
.preset-card, .role-card, .mode-button { background: #e3e5de; }
.preset-card.is-selected, .role-card.is-selected, .mode-button.is-active { background: #bddbd2; box-shadow: inset 1px 1px #769b91; }
.stats-grid { background: #d2e0db; }
.stat-card > strong { color: #204e57; }
.lobby-players .player-row { background: #e7e8e1; }
.player-symbol { background: #a4cfbf; }
.player-symbol[data-slot="1"] { background: #a7cbdc; }
.player-symbol[data-slot="2"] { background: #efc77e; }
.player-symbol[data-slot="3"] { background: #c5b8dc; }
.board-scroller { background: #9baea8; }
.tile { background: #e2e4dc; }
@media (hover: hover) { .tile:hover { background: #f6f3df; } }
.tile.is-revealed { background: #c8d4cb; }
.tile.is-concealed-clue { background: #b7cac4; }
.tile.is-flagged { background: #efd49b; }
.tile[data-value="1"] .tile-main { color: #175c78; }
.tile[data-value="2"] .tile-main { color: #355c35; }
.tile[data-value="3"] .tile-main { color: #923f28; }
.statusbar { background: #d4d9d1; }
.help-dialog, .toast { background: #f0f0e7; }
.help-dialog[open] { overflow-y: auto; }
.entry-panel.tutorial-panel { grid-column: 1 / -1; min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.entry-panel.tutorial-panel h2 { margin-bottom: 4px; }.entry-panel.tutorial-panel p { margin: 0; }
.coach { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 11px 14px; background: var(--screen); color: var(--screen-text); border: 3px solid; border-color: #6b726b #e1e5da #e1e5da #6b726b; }
.coach-copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; line-height: 1.4; }
.coach-step { color: #f2c66c; font: 700 11px var(--mono); letter-spacing: .06em; }.coach-copy strong { color: #f4f5e9; font-size: 15px; }
.coach-actions { display: flex; flex-wrap: wrap; gap: 6px; }.coach .action-button { min-height: 32px; padding: 5px 11px; font-size: 12px; }.coach .small-button { min-height: 32px; padding: 5px 11px; }
.tile.is-coach-target { background-color: #f3dc9c; }
.mode-button.is-coach-target, .small-button.is-coach-target, .ping-grid button.is-coach-target { background: #f1c56e; }
.coach-pointer { position: absolute; left: 0; top: 0; z-index: 30; pointer-events: none; transform-origin: 0 0; will-change: transform; }
.coach-pointer path { fill: #fff; stroke: #111; stroke-width: 1.3; stroke-linejoin: round; }.coach-pointer .coach-pointer-shadow { fill: #00000059; stroke: none; }
.coach-badge { position: absolute; left: 0; top: 0; z-index: 29; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; background: #f1c56e; color: #332816; border: 1px solid #332816; box-shadow: 2px 2px 0 #00000040; font: 800 11px var(--mono); pointer-events: none; }
.coach-ripple { position: absolute; left: 0; top: 0; z-index: 28; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 2px solid #f1c56e; pointer-events: none; }
.result-actions { display: flex; flex-wrap: wrap; gap: 8px; }.result-actions > * { flex: 1 1 140px; }.result-actions .secondary-button { min-height: 42px; }
.tile.is-anomaly { background: #2f3b3a; color: #f1c56e; border-color: #56615e #1d2524 #1d2524 #56615e; }.tile.is-anomaly .tile-owner { color: #f1c56e; }
.game-screen.is-lost .tile.is-anomaly { background: #3b2521; color: #ff8466; border-color: #5c3a33 #1f1311 #1f1311 #5c3a33; }
.tile.is-wrong-flag { color: #c0391f; background-image: linear-gradient(to top right, transparent calc(50% - 1px), #c0391f calc(50% - 1px), #c0391f calc(50% + 1px), transparent calc(50% + 1px)); }
.home-lede { font-size: 17px; line-height: 1.5; }
.entry-panel p, .section-head p, .role-card small, .crew-tip, .selected-description,
.feed-item, .scan-item, .empty-feed, .player-details strong { font-size: 13px; }
.role-card strong, .preset-card strong { font-size: 14px; }
.role-card small { line-height: 1.45; }
.preset-card small, .room-status, .start-hint, .count-pill, .player-details small,
.player-presence, .empty-slot, .board-footer, .board-state-pill { font-size: 11px; }
.mode-button, .secondary-button, .small-button, .ping-grid button { font-size: 12px; }
.help-dialog p, .help-dialog li { font-size: 15px; }

@media (max-width: 650px) {
  body { font-size: 15px; }
  .app-bar { min-height: 54px; }
  .brand { font-size: 13px; gap: 7px; }
  .bar-actions { gap: 7px; }
  .bar-button { width: 40px; height: 40px; padding: 0; font-size: 0; }
  .bar-button span { font-size: 17px; margin: 0; }
  .connection-pill { font-size: 11px; }
  .home-layout { gap: 22px; padding-top: 24px; }
  .home-copy h1 { font-size: clamp(55px, 16vw, 78px); }
  .home-lede { font-size: 16px; }
  .entry-panel { min-height: 126px; padding: 14px; }
  .entry-panel h2 { font-size: 18px; }
  .entry-panel p { font-size: 14px; margin-bottom: 12px; }
  .entry-panel label, .overline, .home-note, .screen-head, .screen-foot { font-size: 11px; }
  .action-button, .secondary-button, .mode-button, .small-button, .ping-grid button { min-height: 44px; font-size: 14px; }
  .join-row input, .join-button { height: 44px; }
  .join-button { flex-basis: 44px; }
  .hero-art { padding: 9px; box-shadow: 3px 3px 0 #647770; }
  .screen-grid { aspect-ratio: 2.4; }
  .window-line, .statusbar { display: none; }
  .room-status, .start-hint, .count-pill { font-size: 12px; }
  .room-header { gap: 9px; }
  .preset-grid { grid-template-columns: 1fr; }
  .preset-card { min-height: 60px; padding: 9px 11px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 9px; }
  .preset-card > span { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; font-size: 21px; }
  .preset-card strong, .role-card strong { font-size: 15px; }
  .preset-card small { grid-column: 1; font-size: 12px; }
  .role-card { min-height: 63px; }
  .role-card small, .section-head p, .crew-tip, .selected-description,
  .feed-item, .scan-item, .empty-feed { font-size: 14px; line-height: 1.5; }
  .player-details strong { font-size: 14px; }
  .player-details small, .player-presence, .empty-slot { font-size: 11px; }
  .player-details small { text-transform: none; }
  .player-presence { flex-shrink: 0; }
  .board-topline h2 { font-size: 17px; }
  .board-state-pill { font-size: 11px; }
  .mode-toolbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .role-mode { grid-column: 1 / -1; }
  .board-footer { font-size: 12px; }
  .board-footer span:last-child { display: none; }
  .stat-card > span, .stat-card > small { font-size: 11px; }
  .stat-card > strong { font-size: 23px; }
  .section-head.compact h2, .log-panel summary { font-size: 16px; }
  #selectedCoord, .ping-heading, .activity-item, .dialog-note { font-size: 12px; }
  .dialog-top button { width: 44px; height: 44px; }
  .help-dialog h2 { font-size: 23px; }
  .toast { font-size: 14px; line-height: 1.4; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }