/* Screens render inside .phone__screen. Each owns a single .screen root.
   Dark brown ink on warm amber LCD — high contrast, very legible.
   No glow on text (LCD pixels don't bloom); chunky letterforms instead. */

.screen {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: var(--s-2);
    position: relative;
    z-index: 2;
    font-size: 14px;
    letter-spacing: 0.02em;
    font-family: var(--font-mono);
    color: var(--lcd-pixel);
}

.screen__title {
    font-family: var(--font-lcd);
    font-size: 16px;
    color: var(--lcd-pixel);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
}

.screen__hint {
    color: var(--lcd-pixel-dim);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.screen__row {
    display: flex;
    gap: var(--s-2);
    align-items: center;
    /* Action rows must never collapse — even when the surrounding
       column has a tall scrolling region, the buttons stay accessible. */
    flex-shrink: 0;
}
.screen__spacer { flex: 1; }

.label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--lcd-pixel-dim);
    text-transform: uppercase;
    margin-bottom: -2px;
}

/* Inputs — flat with a single dark border. The cursor inverts on focus. */
.input {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 15px;
    background: rgba(26, 13, 4, 0.05);
    border: 1px solid var(--lcd-pixel);
    border-radius: 1px;
    padding: 5px 6px;
    color: var(--lcd-pixel);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    caret-color: var(--lcd-pixel);
}
.input:focus {
    background: rgba(26, 13, 4, 0.12);
    outline: none;
}
.input::placeholder { color: var(--lcd-pixel-dim); }

/* Buttons — Nokia menu style: dark border, primary inverts to dark fill. */
.btn {
    font-family: var(--font-lcd);
    font-size: 13px;
    background: transparent;
    color: var(--lcd-pixel);
    border: 1px solid var(--lcd-pixel);
    border-radius: 1px;
    padding: 5px 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    transition: background var(--t-fast), color var(--t-fast);
    line-height: 1;
}
.btn:hover {
    background: var(--lcd-pixel);
    color: var(--lcd-bg);
}
.btn:active { transform: translateY(1px); }
.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: transparent;
    color: var(--lcd-pixel-dim);
    border-color: var(--lcd-pixel-dim);
}
.btn--primary {
    background: var(--lcd-pixel);
    color: var(--lcd-bg);
}
.btn--primary:hover {
    background: var(--lcd-pixel-dim);
    color: var(--lcd-bg);
}
.btn--primary:disabled {
    background: var(--lcd-pixel-dim);
    color: var(--lcd-bg);
    border-color: var(--lcd-pixel-dim);
}
.btn--danger {
    border-color: var(--danger);
    color: var(--danger);
}
.btn--danger:hover {
    background: var(--danger);
    color: var(--lcd-bg);
}

/* Boot screen */
.screen--boot {
    align-items: center;
    justify-content: center;
}
.boot__line {
    font-family: var(--font-lcd);
    font-size: 18px;
    color: var(--lcd-pixel);
    letter-spacing: 0.10em;
    text-transform: uppercase;
}
.boot__cursor {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--lcd-pixel);
    animation: blink 1s steps(1) infinite;
    line-height: 0.6;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .boot__cursor { animation-duration: 1.6s; }
}

/* Lobby */
.screen--lobby { gap: var(--s-2); }
.lobby__code-label {
    text-align: center;
    font-size: 9px;
    letter-spacing: 0.2em;
    color: var(--lcd-pixel-dim);
    text-transform: uppercase;
}
.lobby__code {
    font-family: var(--font-lcd);
    font-size: 44px;
    letter-spacing: 0.16em;
    color: var(--lcd-pixel);
    text-align: center;
    line-height: 1;
    margin: 2px 0 0;
    /* So a viewer screen-recording can't text-select-and-OCR the code. */
    user-select: none;
    -webkit-user-select: none;
}
.lobby__code-actions {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 4px;
    flex: 0 0 auto;
}
.lobby__code-btn {
    flex: 0 1 auto;
    padding: 3px 12px;
    font-size: 10px;
    letter-spacing: 0.14em;
}
.lobby__share {
    text-align: center;
    color: var(--lcd-pixel-dim);
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.lobby__players {
    flex: 1;
    overflow: auto;
    border: 1px solid var(--lcd-pixel-dim);
    padding: 6px 8px;
    font-size: 14px;
    font-family: var(--font-mono);
    min-height: 60px;
    background: rgba(26, 13, 4, 0.04);
}
.lobby__player {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 0;
    border-bottom: 1px dotted rgba(26, 13, 4, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.lobby__player:last-child { border-bottom: 0; }
.lobby__player--off { color: var(--lcd-pixel-dim); }
.lobby__player--off::before { content: "✕ "; }
.lobby__player--on::before { content: "● "; }
.lobby__tag {
    font-size: 8px;
    letter-spacing: 0.18em;
    color: var(--lcd-pixel);
    border: 1px solid var(--lcd-pixel-dim);
    padding: 1px 3px;
}

.lobby__games {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 1px dotted var(--lcd-pixel-dim);
    padding-top: 6px;
    /* Capped + scrollable so a long catalog can never push the start/
       leave row off-screen. With ~5 games in 2 columns this never
       scrolls; future-proof for when the catalog grows past ~10. */
    flex: 0 1 auto;
    min-height: 0;
    max-height: 150px;
    overflow-y: auto;
}
.lobby__games-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.20em;
    color: var(--lcd-pixel-dim);
    text-transform: uppercase;
}
.lobby__games-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px 8px;
}
.lobby__game {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lcd-pixel-dim);
    user-select: none;
}
.lobby__game--on { color: var(--lcd-pixel); }
.lobby__game--host { cursor: pointer; }
.lobby__game--locked {
    opacity: 0.45;
    cursor: not-allowed;
}
.lobby__game-min {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: 0.18em;
    color: var(--lcd-pixel-dim);
    border: 1px dotted var(--lcd-pixel-dim);
    padding: 0 4px;
}
.lobby__game--host:hover .lobby__game-mark,
.lobby__game--host:hover .lobby__game-name {
    text-decoration: underline;
}
.lobby__game-mark {
    flex: 0 0 12px;
    text-align: center;
    font-family: var(--font-lcd);
    font-size: 12px;
    color: inherit;
}
.lobby__game-name { flex: 1; }
.lobby__games-hint {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--lcd-pixel-dim);
    text-transform: uppercase;
    margin-top: 2px;
}

.lobby__volume {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    border-top: 1px dotted var(--lcd-pixel-dim);
    padding-top: 6px;
    flex: 0 0 auto;
}
.lobby__volume-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--lcd-pixel-dim);
    text-transform: uppercase;
    flex: 0 0 auto;
}
.lobby__volume-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: var(--lcd-pixel-dim);
    border-radius: 0;
    outline: none;
    cursor: pointer;
}
.lobby__volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 14px;
    background: var(--lcd-pixel);
    border: 0;
    border-radius: 0;
    cursor: pointer;
}
.lobby__volume-slider::-moz-range-thumb {
    width: 10px;
    height: 14px;
    background: var(--lcd-pixel);
    border: 0;
    border-radius: 0;
    cursor: pointer;
}

/* Join form */
.screen--join { gap: var(--s-2); }
.join__divider {
    text-align: center;
    color: var(--lcd-pixel-dim);
    font-size: 9px;
    letter-spacing: 0.28em;
    margin: 2px 0;
    position: relative;
}
.join__divider::before,
.join__divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 32%;
    border-top: 1px dotted var(--lcd-pixel-dim);
}
.join__divider::before { left: 0; }
.join__divider::after { right: 0; }

/* Banner — toast pinned outside the phone. Dark with amber border so it
   reads as part of the same visual world. */
.banner {
    position: fixed;
    bottom: var(--s-3); left: 50%;
    transform: translateX(-50%);
    background: var(--chassis);
    color: var(--lcd-bg-light);
    border: 1px solid var(--lcd-bg-dark);
    padding: 4px 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    z-index: 100;
    pointer-events: none;
    border-radius: 2px;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.6),
        0 0 24px rgba(232, 149, 64, 0.08);
}

/* ─── DIAL VIEW ─────────────────────────────────────────────────────────
   Centered identity line + big room-number display + status flash. */
.screen--dial {
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding-top: var(--s-1);
}
.dial__id {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--lcd-pixel);
    text-transform: uppercase;
    text-align: center;
    padding-bottom: 4px;
    border-bottom: 1px dotted rgba(26, 13, 4, 0.3);
    width: 100%;
}
.dial__prompt {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--lcd-pixel-dim);
    text-transform: uppercase;
    margin-top: var(--s-2);
}
.dial__display {
    font-family: var(--font-lcd);
    font-size: 84px;
    line-height: 1;
    color: var(--lcd-pixel);
    margin: var(--s-1) 0 var(--s-2);
    min-height: 84px;
    letter-spacing: 0.04em;
}
.dial__hint {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--lcd-pixel-dim);
    text-transform: uppercase;
}
.dial__status {
    font-family: var(--font-lcd);
    font-size: 16px;
    letter-spacing: 0.10em;
    color: var(--lcd-pixel);
    text-transform: uppercase;
    margin-top: var(--s-2);
    min-height: 18px;
    text-align: center;
}

/* ─── CALL VIEW ─────────────────────────────────────────────────────────
   Header / transcript / send-form / hint stacked tightly. The transcript
   takes whatever vertical space is left. */
.screen--call {
    height: 100%;
    gap: 4px;
}
.call__header {
    font-family: var(--font-lcd);
    font-size: 14px;
    letter-spacing: 0.08em;
    color: var(--lcd-pixel);
    text-transform: uppercase;
    border-bottom: 1px solid var(--lcd-pixel);
    padding: 0 0 4px;
    flex: 0 0 auto;
}
.call__header-label { color: var(--lcd-pixel-dim); }
.call__header-room  { color: var(--lcd-pixel); }
.call__header-with  { color: var(--lcd-pixel); }
.call__self {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--lcd-pixel-dim);
    text-transform: uppercase;
    flex: 0 0 auto;
    padding: 2px 0;
}

.call__transcript {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--lcd-pixel);
    line-height: 1.3;
    padding: 4px 2px;
    word-break: break-word;
}
.call__msg {
    margin: 1px 0;
    display: flex;
    align-items: flex-start;
    gap: 4px;
}
.call__msg-marker {
    flex: 0 0 auto;
    color: var(--lcd-pixel-dim);
    font-weight: 700;
}
.call__msg--me .call__msg-marker { color: var(--lcd-pixel); }
.call__msg-body { flex: 1; }
.call__empty {
    text-align: center;
    color: var(--lcd-pixel-dim);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: var(--s-2) 0;
}

.call__send {
    display: flex;
    gap: 4px;
    flex: 0 0 auto;
}
.call__input { flex: 1; min-width: 0; }
.call__send-btn {
    flex: 0 0 auto;
    padding: 5px 10px;
}

.call__hint {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--lcd-pixel-dim);
    text-transform: uppercase;
    text-align: center;
    flex: 0 0 auto;
}

/* Caller-id-bluff annotations on the shared call view */
.call__claim {
    text-align: center;
    font-family: var(--font-lcd);
    font-size: 13px;
    letter-spacing: 0.10em;
    color: var(--lcd-pixel);
    text-transform: uppercase;
    border: 1px dotted var(--lcd-pixel);
    padding: 2px 4px;
    flex: 0 0 auto;
    background: rgba(26, 13, 4, 0.06);
}
.call__judge {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}
/* The class above has the same specificity as the UA's [hidden] rule;
   without this explicit override `display: flex` would always win and
   the REAL/FAKE buttons would render in every game (the bluff-only
   behaviour leaks through). */
.call__judge[hidden],
.call__claim[hidden],
.call__ringing[hidden],
.call__connected[hidden] {
    display: none;
}
.call__judge-btn {
    flex: 1;
    padding: 8px 0;
    font-size: 14px;
    letter-spacing: 0.14em;
}
.call__judge-btn--real { /* inherits .btn */ }
.call__judge-btn--fake { /* inherits .btn */ }

/* ─── Ringing-mode body — fills the call screen while waiting for the
       recipient to ANSWER or DECLINE. Two roles share the same shell:
       caller sees "RINGING…" + CANCEL; recipient sees "INCOMING CALL" +
       ANSWER/DECLINE. */
.call__ringing {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 8px;
    text-align: center;
}
.call__ringing-headline {
    font-family: var(--font-lcd);
    font-size: 18px;
    letter-spacing: 0.10em;
    color: var(--lcd-pixel);
    text-transform: uppercase;
    /* Slow blink to sell the ring — 1.4s pulse, mild contrast change. */
    animation: callRingingPulse 1.4s ease-in-out infinite;
}
.call__ringing-sub {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--lcd-pixel-dim);
    text-transform: uppercase;
}
.call__ringing-actions {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 240px;
    margin-top: 4px;
}
.call__ringing-btn {
    flex: 1;
    padding: 10px 4px;
    font-family: var(--font-lcd);
    font-size: 14px;
    letter-spacing: 0.14em;
}
.call__ringing-btn--decline { /* secondary tone via .btn defaults */ }
.call__connected {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
@keyframes callRingingPulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .call__ringing-headline { animation: none; }
}

/* Legacy class kept so views can still tag "primary" text. No visual
   effect on LCD — pixels don't bloom. */
/* Phosphor accent — applied to display headers and the room code so they
   feel "lit from within" against the amber LCD background. */
.phosphor {
    color: var(--lcd-pixel);
    text-shadow: 0 0 6px var(--phosphor-bright), 0 0 1px var(--lcd-pixel);
}

/* ─── IN-LCD KEYPAD (touch devices only) ────────────────────────────────
   The chassis keypad's tap targets are too small on phones. On touch-
   primary devices the chassis keypad is hidden (see phone.css media
   block) and views render this in-LCD numpad inside their bodies. Each
   button has [data-key]; main.js's document-level handler dispatches
   `phonekey` + DTMF for both keypads, so view event listeners work
   unchanged.

   Default: hidden. Revealed by the @media block at the bottom of this
   file. */
.lcd-keypad {
    display: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    flex: 0 0 auto;
}
.lcd-keypad__key {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: rgba(26, 13, 4, 0.06);
    border: 1px solid var(--lcd-pixel);
    border-radius: 2px;
    padding: 6px 0 4px;
    color: var(--lcd-pixel);
    font-family: var(--font-lcd);
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.lcd-keypad__key.is-pressed {
    background: var(--lcd-pixel);
    color: var(--lcd-bg);
    transform: translateY(1px);
}
.lcd-keypad__digit {
    font-family: var(--font-lcd);
    font-size: 18px;
    letter-spacing: 0.04em;
}
.lcd-keypad__sub {
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: 0.16em;
    color: var(--lcd-pixel-dim);
    text-transform: uppercase;
    min-height: 9px;
}
.lcd-keypad__key.is-pressed .lcd-keypad__sub { color: var(--lcd-bg-dark); }

/* Touch-primary devices: hide the chassis keypad in phone.css, show
   this one inline. Two-finger override for the rare hover-capable touch
   device (Surface, etc.) — they still see the chassis keypad. */
@media (hover: none) and (pointer: coarse) {
    .lcd-keypad { display: grid; }
}

/* ─── INTRO VIEW (briefing modal between rounds) ────────────────────────
   30-second briefing screen rendered into the LCD. Round number + game
   name + tagline + bullet lines + a prominent countdown at the bottom.
   Server-controlled timer; client interpolates for smoothness. */
.screen--intro {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    text-align: center;
}
.intro__round {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.24em;
    color: var(--lcd-pixel-dim);
    text-transform: uppercase;
    flex: 0 0 auto;
}
.intro__title {
    font-family: var(--font-lcd);
    font-size: 22px;
    letter-spacing: 0.14em;
    color: var(--lcd-pixel);
    text-transform: uppercase;
    border-bottom: 1px solid var(--lcd-pixel);
    padding-bottom: 4px;
    flex: 0 0 auto;
}
.intro__tagline {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--lcd-pixel-dim);
    text-transform: uppercase;
    font-style: italic;
    flex: 0 0 auto;
}
.intro__lines {
    list-style: none;
    margin: 0;
    padding: 4px 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    text-align: left;
}
.intro__line {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    line-height: 1.35;
    color: var(--lcd-pixel);
    text-transform: uppercase;
    padding-left: 12px;
    position: relative;
}
.intro__line::before {
    content: "▶";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 9px;
    color: var(--lcd-pixel-dim);
}
.intro__countdown {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    border-top: 1px dotted var(--lcd-pixel-dim);
    padding-top: 6px;
    flex: 0 0 auto;
}
.intro__countdown-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.20em;
    color: var(--lcd-pixel-dim);
    text-transform: uppercase;
}
.intro__countdown-time {
    font-family: var(--font-lcd);
    font-size: 24px;
    letter-spacing: 0.10em;
    color: var(--lcd-pixel);
}

/* ─── ROUND VIEW (generic frame) ────────────────────────────────────────
   Top HUD strip with the game name + countdown; body fills the rest. The
   per-game body is rendered by the dynamically-imported game module. */
.screen--round {
    gap: 6px;
}
.round__hud {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0 0 4px;
    border-bottom: 1px solid var(--lcd-pixel);
    flex: 0 0 auto;
}
.round__hud-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-family: var(--font-lcd);
    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--lcd-pixel);
}
.round__name { color: var(--lcd-pixel); }
.round__time {
    font-family: var(--font-lcd);
    color: var(--lcd-pixel);
    letter-spacing: 0.06em;
}
.round__identity {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.16em;
    color: var(--lcd-pixel-dim);
    text-transform: uppercase;
    min-height: 11px;
}
.round__body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.round__missing {
    margin: auto;
    color: var(--lcd-pixel-dim);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-align: center;
}

/* ─── WRONG NUMBER (game body) ──────────────────────────────────────────
   Target plaque on top, big dial digit in the middle, status flash, and
   a soft-key hint row at the bottom. */
.wn {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
}
.wn__target {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--s-2);
    border: 1px solid var(--lcd-pixel);
    background: rgba(26, 13, 4, 0.06);
    padding: 4px 8px;
}
.wn__target-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.20em;
    color: var(--lcd-pixel-dim);
    text-transform: uppercase;
}
.wn__target-name {
    font-family: var(--font-lcd);
    font-size: 22px;
    letter-spacing: 0.10em;
    color: var(--lcd-pixel);
    text-transform: uppercase;
}
.wn__dial {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.wn__prompt {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.20em;
    color: var(--lcd-pixel-dim);
    text-transform: uppercase;
}
.wn__display {
    font-family: var(--font-lcd);
    font-size: 64px;
    line-height: 1;
    color: var(--lcd-pixel);
    letter-spacing: 0.04em;
}
.wn__status {
    font-family: var(--font-lcd);
    font-size: 13px;
    letter-spacing: 0.10em;
    color: var(--lcd-pixel);
    text-transform: uppercase;
    text-align: center;
    min-height: 14px;
}
.wn__guess {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--lcd-pixel-dim);
    text-transform: uppercase;
    text-align: center;
    min-height: 12px;
}
.wn__guess--locked {
    color: var(--lcd-pixel);
    border: 1px dotted var(--lcd-pixel);
    padding: 2px 6px;
}
.wn__actions {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
    border-top: 1px dotted rgba(26, 13, 4, 0.3);
    padding-top: 6px;
}
.wn__action {
    flex: 1;
    padding: 8px 4px;
    font-size: 14px;
    letter-spacing: 0.10em;
}

/* ─── CROSSED LINES (game body) ─────────────────────────────────────────
   Role-specific layout under a shared role bar + progress strip. The
   four word options sit in a 2×2 grid; vote panel is two big buttons. */
.cl {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    color: var(--lcd-pixel);
}
.cl__role-bar {
    text-align: center;
    font-family: var(--font-lcd);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--lcd-pixel);
    text-transform: uppercase;
    border: 1px solid var(--lcd-pixel);
    padding: 2px 0;
    background: rgba(26, 13, 4, 0.06);
    flex: 0 0 auto;
}
.cl__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cl__status {
    text-align: center;
    font-family: var(--font-lcd);
    font-size: 12px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    min-height: 14px;
    color: var(--lcd-pixel);
    flex: 0 0 auto;
}
.cl__progress {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lcd-pixel-dim);
    flex: 0 0 auto;
    border-top: 1px dotted rgba(26, 13, 4, 0.3);
    padding-top: 4px;
}
.cl__line {
    text-align: center;
    font-family: var(--font-mono);
    text-transform: uppercase;
    color: var(--lcd-pixel);
}
.cl__line--label {
    font-size: 9px;
    letter-spacing: 0.20em;
    color: var(--lcd-pixel-dim);
}
.cl__line--note {
    font-size: 11px;
    letter-spacing: 0.10em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.cl__line--ask {
    font-family: var(--font-lcd);
    font-size: 14px;
    letter-spacing: 0.10em;
    margin-top: 4px;
}
.cl__note-label {
    color: var(--lcd-pixel-dim);
    font-size: 9px;
    letter-spacing: 0.18em;
}
.cl__codename {
    font-family: var(--font-lcd);
    font-size: 13px;
    letter-spacing: 0.10em;
    color: var(--lcd-pixel);
    border: 1px solid var(--lcd-pixel);
    padding: 1px 6px;
    text-transform: uppercase;
}
.cl__word {
    text-align: center;
    font-family: var(--font-lcd);
    font-size: 28px;
    letter-spacing: 0.12em;
    color: var(--lcd-pixel);
    text-transform: uppercase;
    border: 1px solid var(--lcd-pixel);
    padding: 6px 0;
    background: rgba(26, 13, 4, 0.10);
    margin: 4px 0;
}
.cl__hint {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.20em;
    color: var(--lcd-pixel-dim);
    text-transform: uppercase;
}
/* Chain plaque — visible to every player, status per link. */
.cl__chain {
    border: 1px dotted var(--lcd-pixel-dim);
    padding: 4px 6px;
    flex: 0 0 auto;
    overflow-x: auto;
}
.cl__chain-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.cl__chain-link {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    padding: 1px 4px;
    border: 1px solid transparent;
    color: var(--lcd-pixel-dim);
}
.cl__chain-link--done {
    color: var(--lcd-pixel);
    border-color: var(--lcd-pixel-dim);
}
.cl__chain-link--active {
    color: var(--lcd-bg);
    background: var(--lcd-pixel);
    border-color: var(--lcd-pixel);
}
.cl__chain-link--pending { color: var(--lcd-pixel-dim); }
.cl__chain-link--me { font-weight: 700; }
.cl__chain-mark {
    font-family: var(--font-lcd);
    font-size: 10px;
}
.cl__chain-name { font-family: var(--font-mono); }
.cl__chain-role {
    font-family: var(--font-mono);
    font-size: 7px;
    letter-spacing: 0.18em;
    opacity: 0.7;
}
.cl__chain-arrow {
    color: var(--lcd-pixel-dim);
    font-family: var(--font-lcd);
    font-size: 12px;
}
/* Smaller inline arrow used inside body lines (e.g. "PREV → YOU → NEXT") */
.cl__chain-arrow-small {
    color: var(--lcd-pixel-dim);
    font-family: var(--font-lcd);
    font-size: 11px;
    margin: 0 2px;
}
.cl__codename--me {
    font-family: var(--font-lcd);
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--lcd-bg);
    background: var(--lcd-pixel);
    padding: 1px 6px;
    text-transform: uppercase;
}
.cl__options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}
.cl__opt {
    font-family: var(--font-lcd);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: transparent;
    color: var(--lcd-pixel);
    border: 1px solid var(--lcd-pixel);
    border-radius: 1px;
    padding: 6px 4px;
    transition: background var(--t-fast), color var(--t-fast);
    line-height: 1;
}
.cl__opt:hover { background: var(--lcd-pixel); color: var(--lcd-bg); }
.cl__opt:active { transform: translateY(1px); }
.cl__opt--locked {
    background: var(--lcd-pixel);
    color: var(--lcd-bg);
}
/* Highlights the option that matches `incoming` (the word the previous
   link committed). For middles it labels the "faithful" choice; for
   receivers it's the "trust" choice. Outline-style so it doesn't
   compete with the locked treatment. */
.cl__opt--incoming {
    border-width: 2px;
    border-style: dashed;
}
.cl__opt--incoming.cl__opt--locked {
    border-style: solid;   /* fall back to plain bold border once picked */
}
.cl__opt:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

/* "Incoming" plaque — what the previous link in the chain passed. */
.cl__incoming {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    border: 1px dashed var(--lcd-pixel);
    background: rgba(26, 13, 4, 0.10);
    padding: 4px 8px;
    flex: 0 0 auto;
}
.cl__incoming-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.20em;
    color: var(--lcd-pixel-dim);
    text-transform: uppercase;
}
.cl__incoming-word {
    font-family: var(--font-lcd);
    font-size: 18px;
    letter-spacing: 0.10em;
    color: var(--lcd-pixel);
    text-transform: uppercase;
}
.cl__sender, .cl__middle, .cl__receiver, .cl__spectator, .cl__vote-panel {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cl__pick {
    text-align: center;
    font-family: var(--font-lcd);
    font-size: 24px;
    letter-spacing: 0.12em;
    color: var(--lcd-pixel);
    text-transform: uppercase;
    border: 1px solid var(--lcd-pixel);
    padding: 4px 0;
    background: rgba(26, 13, 4, 0.10);
}
.cl__vote-row {
    display: flex;
    gap: 6px;
}
.cl__vote {
    flex: 1;
    font-family: var(--font-lcd);
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: transparent;
    color: var(--lcd-pixel);
    border: 1px solid var(--lcd-pixel);
    border-radius: 1px;
    padding: 8px 4px;
    line-height: 1;
}
.cl__vote:hover { background: var(--lcd-pixel); color: var(--lcd-bg); }
.cl__vote--locked {
    background: var(--lcd-pixel);
    color: var(--lcd-bg);
}
.cl__vote:disabled { cursor: not-allowed; opacity: 0.7; }

/* Crossed Lines: between-phase result */
.cl-result {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--lcd-pixel);
    font-family: var(--font-mono);
}
.cl-result__reveal {
    border: 1px solid var(--lcd-pixel-dim);
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cl-result__reveal-label {
    font-size: 9px;
    letter-spacing: 0.20em;
    color: var(--lcd-pixel-dim);
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 2px;
}
.cl-result__link {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 1px 2px;
    border-bottom: 1px dotted rgba(26, 13, 4, 0.18);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cl-result__link:last-child { border-bottom: 0; }
.cl-result__link--lied {
    background: rgba(26, 13, 4, 0.08);
    color: var(--lcd-pixel);
}
.cl-result__link-name { flex: 0 0 auto; font-weight: 600; min-width: 50px; }
.cl-result__link-role { flex: 0 0 auto; color: var(--lcd-pixel-dim); font-size: 8px; letter-spacing: 0.18em; }
.cl-result__link-commit { flex: 1; text-align: right; font-family: var(--font-lcd); font-size: 11px; letter-spacing: 0.06em; }
.cl-result__link-flag {
    flex: 0 0 auto;
    font-family: var(--font-lcd);
    font-size: 9px;
    letter-spacing: 0.14em;
    color: var(--lcd-pixel);
    border: 1px solid var(--lcd-pixel);
    padding: 0 4px;
}
.cl-result__verdict {
    text-align: center;
    border: 1px solid var(--lcd-pixel);
    padding: 4px 6px;
    background: rgba(26, 13, 4, 0.06);
}
.cl-result__verdict-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
}
.cl-result__verdict-label { font-size: 9px; letter-spacing: 0.20em; color: var(--lcd-pixel-dim); text-transform: uppercase; }
.cl-result__verdict-truth { font-family: var(--font-lcd); font-size: 18px; letter-spacing: 0.12em; }
.cl-result__verdict-truth--good { color: var(--lcd-pixel); }
.cl-result__verdict-truth--bad  { color: var(--lcd-pixel); }
.cl-result__tally {
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--lcd-pixel-dim);
    text-transform: uppercase;
}
.cl-result__mine {
    display: flex;
    flex-direction: column;
    gap: 1px;
    border: 1px dotted var(--lcd-pixel-dim);
    padding: 4px 6px;
}
.cl-result__mine-line {
    text-align: center;
    font-family: var(--font-lcd);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--lcd-pixel);
    text-transform: uppercase;
}
.cl-result__board-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.20em;
    color: var(--lcd-pixel-dim);
    text-transform: uppercase;
    margin-top: 2px;
}
.cl-result__board {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.cl-result__board-row {
    display: flex;
    justify-content: space-between;
    padding: 1px 2px;
    border-bottom: 1px dotted rgba(26, 13, 4, 0.2);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cl-result__board-row:last-child { border-bottom: 0; }

/* ─── LAST CALL (game body) ─────────────────────────────────────────────
   Three sub-phases share the shell. Open: dial + lock-guess form. Vote:
   room buttons. Final: codename → room mapping form, or a viewer-only
   screen for the disconnected player. */
.lc {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    color: var(--lcd-pixel);
}
.lc__sub-bar {
    text-align: center;
    font-family: var(--font-lcd);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--lcd-pixel);
    text-transform: uppercase;
    border: 1px solid var(--lcd-pixel);
    padding: 2px 0;
    background: rgba(26, 13, 4, 0.06);
    flex: 0 0 auto;
}
.lc__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lc__status {
    text-align: center;
    font-family: var(--font-lcd);
    font-size: 12px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    min-height: 14px;
    color: var(--lcd-pixel);
    flex: 0 0 auto;
}
.lc__line {
    text-align: center;
    font-family: var(--font-mono);
    text-transform: uppercase;
    color: var(--lcd-pixel);
}
.lc__line--label {
    font-size: 9px;
    letter-spacing: 0.20em;
    color: var(--lcd-pixel-dim);
}
.lc__line--ask {
    font-family: var(--font-lcd);
    font-size: 14px;
    letter-spacing: 0.10em;
}
.lc__line--note {
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--lcd-pixel-dim);
}
.lc__line--big {
    font-family: var(--font-lcd);
    font-size: 18px;
    letter-spacing: 0.12em;
    color: var(--lcd-pixel);
}

/* Open phase: dial */
.lc__dial {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-bottom: 1px dotted var(--lcd-pixel-dim);
    padding-bottom: 6px;
}
.lc__dial-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.lc__dial-display {
    flex: 1;
    text-align: center;
    font-family: var(--font-lcd);
    font-size: 32px;
    letter-spacing: 0.10em;
    color: var(--lcd-pixel);
    border: 1px solid var(--lcd-pixel);
    padding: 2px 6px;
    line-height: 1;
}
.lc__dial-btn {
    flex: 0 0 auto;
    padding: 6px 14px;
    font-size: 13px;
}

/* Open & final: shared mapping form */
.lc__form {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lc__form-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.lc__form-cn {
    flex: 0 0 56px;
    font-family: var(--font-lcd);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--lcd-pixel);
    text-transform: uppercase;
}
.lc__form-rooms {
    display: flex;
    gap: 3px;
    flex: 1;
}
.lc__form-room {
    flex: 1;
    font-family: var(--font-lcd);
    font-size: 12px;
    background: transparent;
    color: var(--lcd-pixel);
    border: 1px solid var(--lcd-pixel);
    border-radius: 1px;
    padding: 3px 0;
    line-height: 1;
    transition: background var(--t-fast), color var(--t-fast);
}
.lc__form-room:hover { background: var(--lcd-pixel); color: var(--lcd-bg); }
.lc__form-room--picked {
    background: var(--lcd-pixel);
    color: var(--lcd-bg);
}
.lc__form-room:disabled { cursor: not-allowed; opacity: 0.7; }
.lc__form-submit {
    margin-top: 4px;
    padding: 6px 0;
    font-size: 13px;
}

/* Vote phase: room ballot */
.lc__vote {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: auto 0;
}
.lc__rooms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    gap: 6px;
}
.lc__room {
    font-family: var(--font-lcd);
    font-size: 14px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    background: transparent;
    color: var(--lcd-pixel);
    border: 1px solid var(--lcd-pixel);
    border-radius: 1px;
    padding: 10px 4px;
    line-height: 1;
}
.lc__room:hover { background: var(--lcd-pixel); color: var(--lcd-bg); }
.lc__room--locked { background: var(--lcd-pixel); color: var(--lcd-bg); }
.lc__room:disabled { cursor: not-allowed; opacity: 0.7; }

/* Final phase: disconnect reveal */
.lc__reveal {
    border: 1px solid var(--lcd-pixel);
    background: rgba(26, 13, 4, 0.10);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Final phase: viewer screen for the disconnected player */
.lc__disconnected {
    margin: auto 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px dotted var(--lcd-pixel-dim);
    padding: 10px;
}

/* Last Call: between-phase result */
.lc-result {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--lcd-pixel);
    font-family: var(--font-mono);
}
.lc-result__disconnect {
    border: 1px solid var(--lcd-pixel);
    padding: 4px 6px;
    background: rgba(26, 13, 4, 0.08);
}
.lc-result__disc-line {
    text-align: center;
    font-family: var(--font-lcd);
    font-size: 14px;
    letter-spacing: 0.10em;
    color: var(--lcd-pixel);
    text-transform: uppercase;
}
.lc-result__truth-label,
.lc-result__board-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.20em;
    color: var(--lcd-pixel-dim);
    text-transform: uppercase;
}
.lc-result__truth {
    border: 1px dotted var(--lcd-pixel-dim);
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.lc-result__truth-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.lc-result__truth-cn   { color: var(--lcd-pixel); }
.lc-result__truth-room { color: var(--lcd-pixel-dim); }
.lc-result__mine {
    display: flex;
    flex-direction: column;
    gap: 1px;
    border: 1px dotted var(--lcd-pixel-dim);
    padding: 4px 6px;
}
.lc-result__mine-line {
    text-align: center;
    font-family: var(--font-lcd);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--lcd-pixel);
    text-transform: uppercase;
}
.lc-result__board {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.lc-result__board-row {
    display: flex;
    justify-content: space-between;
    padding: 1px 2px;
    border-bottom: 1px dotted rgba(26, 13, 4, 0.2);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.lc-result__board-row:last-child { border-bottom: 0; }

/* ─── CALLER ID BLUFF (game body) ────────────────────────────────────────
   Codename selector across the top, then dial display + CALL button,
   then a tally line. The shared LCD keypad floats below on touch
   devices. */
.cib {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    color: var(--lcd-pixel);
}
.cib__line {
    text-align: center;
    font-family: var(--font-mono);
    text-transform: uppercase;
}
.cib__line--label {
    font-size: 9px;
    letter-spacing: 0.20em;
    color: var(--lcd-pixel-dim);
}
.cib__claims {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    gap: 4px;
    flex: 0 0 auto;
}
.cib__claim {
    font-family: var(--font-lcd);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: transparent;
    color: var(--lcd-pixel);
    border: 1px solid var(--lcd-pixel);
    border-radius: 1px;
    padding: 4px 2px;
    line-height: 1;
    transition: background var(--t-fast), color var(--t-fast);
}
.cib__claim--mine { font-style: italic; }
.cib__claim:hover { background: var(--lcd-pixel); color: var(--lcd-bg); }
.cib__claim--picked {
    background: var(--lcd-pixel);
    color: var(--lcd-bg);
}
.cib__dial {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.cib__display {
    font-family: var(--font-lcd);
    font-size: 48px;
    line-height: 1;
    color: var(--lcd-pixel);
    letter-spacing: 0.04em;
    margin: 2px 0;
    min-height: 48px;
}
.cib__status {
    text-align: center;
    font-family: var(--font-lcd);
    font-size: 12px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    min-height: 14px;
    color: var(--lcd-pixel);
    flex: 0 0 auto;
}
.cib__actions {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}
.cib__action {
    flex: 1;
    padding: 8px 4px;
    font-size: 14px;
    letter-spacing: 0.10em;
}
.cib__tally {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lcd-pixel-dim);
    border-top: 1px dotted rgba(26, 13, 4, 0.25);
    padding-top: 4px;
    flex: 0 0 auto;
}

/* Caller ID Bluff: between-phase result */
.cib-result {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--lcd-pixel);
    font-family: var(--font-mono);
}
.cib-result__mine {
    border: 1px dotted var(--lcd-pixel-dim);
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.cib-result__mine-line {
    text-align: center;
    font-family: var(--font-lcd);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--lcd-pixel);
    text-transform: uppercase;
}
.cib-result__log-label,
.cib-result__board-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.20em;
    color: var(--lcd-pixel-dim);
    text-transform: uppercase;
    margin-top: 2px;
}
.cib-result__log {
    border: 1px dotted var(--lcd-pixel-dim);
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 110px;
    overflow-y: auto;
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.cib-result__log-row {
    padding: 1px 0;
    border-bottom: 1px dotted rgba(26, 13, 4, 0.15);
}
.cib-result__log-row:last-child { border-bottom: 0; }
.cib-result__log-row--correct { color: var(--lcd-pixel); }
.cib-result__log-row--wrong   { color: var(--lcd-pixel-dim); }
.cib-result__empty {
    text-align: center;
    color: var(--lcd-pixel-dim);
    font-size: 10px;
    letter-spacing: 0.16em;
}
.cib-result__board {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.cib-result__board-row {
    display: flex;
    justify-content: space-between;
    padding: 1px 2px;
    border-bottom: 1px dotted rgba(26, 13, 4, 0.2);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cib-result__board-row:last-child { border-bottom: 0; }

/* ─── WIRETAP (game body) ────────────────────────────────────────────────
   Open phase: dial UI + (operator only) live wiretap log of every
   message. Vote phase: room ballot grid. */
.wt {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    color: var(--lcd-pixel);
}
.wt__role-bar {
    text-align: center;
    font-family: var(--font-lcd);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--lcd-pixel);
    text-transform: uppercase;
    border: 1px solid var(--lcd-pixel);
    padding: 2px 0;
    background: rgba(26, 13, 4, 0.06);
    flex: 0 0 auto;
}
.wt__role-bar--operator {
    background: var(--lcd-pixel);
    color: var(--lcd-bg);
}
.wt__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.wt__status {
    text-align: center;
    font-family: var(--font-lcd);
    font-size: 12px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    min-height: 14px;
    color: var(--lcd-pixel);
    flex: 0 0 auto;
}
.wt__line {
    text-align: center;
    font-family: var(--font-mono);
    text-transform: uppercase;
    color: var(--lcd-pixel);
}
.wt__line--label {
    font-size: 9px;
    letter-spacing: 0.20em;
    color: var(--lcd-pixel-dim);
}
.wt__line--ask {
    font-family: var(--font-lcd);
    font-size: 14px;
    letter-spacing: 0.10em;
}
.wt__line--note {
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--lcd-pixel-dim);
}
.wt__dial {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-bottom: 1px dotted var(--lcd-pixel-dim);
    padding-bottom: 6px;
}
.wt__dial-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.wt__dial-display {
    flex: 1;
    text-align: center;
    font-family: var(--font-lcd);
    font-size: 32px;
    letter-spacing: 0.10em;
    color: var(--lcd-pixel);
    border: 1px solid var(--lcd-pixel);
    padding: 2px 6px;
    line-height: 1;
}
.wt__dial-btn {
    flex: 0 0 auto;
    padding: 6px 14px;
    font-size: 13px;
}

/* Operator-only live feed */
.wt__log {
    border: 1px solid var(--lcd-pixel);
    background: rgba(26, 13, 4, 0.08);
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-height: 0;
}
.wt__log-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--lcd-pixel);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.wt__log-row {
    display: flex;
    gap: 4px;
    align-items: baseline;
    padding: 1px 2px;
    border-bottom: 1px dotted rgba(26, 13, 4, 0.15);
}
.wt__log-row:last-child { border-bottom: 0; }
.wt__log-from { font-weight: 600; }
.wt__log-arrow { color: var(--lcd-pixel-dim); }
.wt__log-to   { font-weight: 600; }
.wt__log-body {
    flex: 1;
    color: var(--lcd-pixel-dim);
    text-transform: none;
    word-break: break-word;
}
.wt__log-empty {
    text-align: center;
    color: var(--lcd-pixel-dim);
    font-size: 10px;
    letter-spacing: 0.16em;
    padding: var(--s-2) 0;
}

/* Vote phase */
.wt__vote {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: auto 0;
}
.wt__rooms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    gap: 6px;
}
.wt__room {
    font-family: var(--font-lcd);
    font-size: 14px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    background: transparent;
    color: var(--lcd-pixel);
    border: 1px solid var(--lcd-pixel);
    border-radius: 1px;
    padding: 10px 4px;
    line-height: 1;
}
.wt__room:hover { background: var(--lcd-pixel); color: var(--lcd-bg); }
.wt__room--locked { background: var(--lcd-pixel); color: var(--lcd-bg); }
.wt__room:disabled { cursor: not-allowed; opacity: 0.7; }

/* Activity panel — per-room message counts during the open phase. Voter
   evidence: silent rooms suspect. Bars scale to the loudest room. */
.wt__activity {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px dotted var(--lcd-pixel-dim);
    padding: 4px 6px;
}
.wt__activity-rows {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.wt__activity-row {
    display: grid;
    grid-template-columns: 70px 1fr 60px;
    gap: 6px;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.wt__activity-row--silent { color: var(--lcd-pixel); font-weight: 600; }
.wt__activity-bar {
    height: 6px;
    background: var(--lcd-pixel);
    min-width: 0;
}
.wt__activity-row--silent .wt__activity-bar {
    background: repeating-linear-gradient(
        90deg, var(--lcd-pixel-dim) 0 2px, transparent 2px 5px);
    height: 6px;
}
.wt__activity-count {
    text-align: right;
    color: var(--lcd-pixel-dim);
}
.wt__activity-row--silent .wt__activity-count { color: var(--lcd-pixel); }

/* Intercept panel — operator-only at vote time. The big italicised body
   and the « » markers signal "spy daily" rather than "chat message". */
.wt__intercept {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid var(--lcd-pixel);
    padding: 6px 8px;
    background: rgba(26, 13, 4, 0.06);
    margin-bottom: 8px;
}
.wt__intercept-body {
    font-family: var(--font-lcd);
    font-size: 14px;
    letter-spacing: 0.04em;
    color: var(--lcd-pixel);
    line-height: 1.3;
    padding: 4px 0;
    text-align: center;
}
.wt__intercept-marker {
    font-family: var(--font-mono);
    color: var(--lcd-pixel-dim);
    margin: 0 4px;
}
.wt__intercept-text {
    font-style: italic;
}
.wt__intercept-empty {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--lcd-pixel-dim);
    text-align: center;
    padding: 6px 0;
}

/* Result-side intercept reveal — shown to everyone after the round. */
.wt-result__intercept {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px dotted var(--lcd-pixel-dim);
    padding: 6px 8px;
    margin-top: 4px;
}
.wt-result__intercept-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.20em;
    color: var(--lcd-pixel-dim);
    text-transform: uppercase;
}
.wt-result__intercept-body {
    font-family: var(--font-lcd);
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--lcd-pixel);
    line-height: 1.3;
    font-style: italic;
}
.wt-result__intercept-verdict {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}
.wt-result__intercept-verdict--right { color: var(--lcd-pixel); font-weight: 600; }
.wt-result__intercept-verdict--wrong { color: var(--lcd-pixel-dim); }

/* Wiretap: between-phase result */
.wt-result {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--lcd-pixel);
    font-family: var(--font-mono);
}
.wt-result__verdict {
    border: 1px solid var(--lcd-pixel);
    background: rgba(26, 13, 4, 0.08);
    padding: 4px 6px;
    text-align: center;
}
.wt-result__verdict-line {
    font-family: var(--font-lcd);
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.wt-result__verdict-line--survived { color: var(--lcd-pixel); }
.wt-result__verdict-line--caught   { color: var(--lcd-pixel-dim); }
.wt-result__verdict-id {
    margin-top: 2px;
    font-family: var(--font-lcd);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--lcd-pixel);
    text-transform: uppercase;
}
.wt-result__tally {
    border: 1px dotted var(--lcd-pixel-dim);
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.wt-result__tally-label {
    font-size: 9px;
    letter-spacing: 0.20em;
    color: var(--lcd-pixel-dim);
    text-transform: uppercase;
    text-align: center;
}
.wt-result__tally-empty {
    text-align: center;
    color: var(--lcd-pixel-dim);
    font-size: 10px;
    letter-spacing: 0.16em;
    padding: 2px 0;
}
.wt-result__tally-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.wt-result__mine {
    display: flex;
    flex-direction: column;
    gap: 1px;
    border: 1px dotted var(--lcd-pixel-dim);
    padding: 4px 6px;
}
.wt-result__mine-line {
    text-align: center;
    font-family: var(--font-lcd);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--lcd-pixel);
    text-transform: uppercase;
}
.wt-result__board-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.20em;
    color: var(--lcd-pixel-dim);
    text-transform: uppercase;
    margin-top: 2px;
}
.wt-result__board {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.wt-result__board-row {
    display: flex;
    justify-content: space-between;
    padding: 1px 2px;
    border-bottom: 1px dotted rgba(26, 13, 4, 0.2);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.wt-result__board-row:last-child { border-bottom: 0; }

/* ─── NUMBER STATION (game body) ────────────────────────────────────────
   One-letter-each scattered round. Big letter display + wordlist pills.
   Single-shot submission. */
.ns {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    color: var(--lcd-pixel);
}
.ns__line {
    font-family: var(--font-mono);
    text-transform: uppercase;
}
.ns__line--label {
    font-size: 9px;
    letter-spacing: 0.20em;
    color: var(--lcd-pixel-dim);
}
.ns__letter-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid var(--lcd-pixel-dim);
    padding: 6px 10px;
    flex: 0 0 auto;
}
.ns__letter {
    font-family: var(--font-lcd);
    font-size: 32px;
    letter-spacing: 0.10em;
    color: var(--lcd-pixel);
    font-weight: 600;
}
.ns__pick-label {
    margin-top: 2px;
    text-align: center;
}
.ns__wordlist {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    flex: 0 0 auto;
}
.ns__word {
    font-family: var(--font-lcd);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: transparent;
    color: var(--lcd-pixel);
    border: 1px solid var(--lcd-pixel);
    border-radius: 1px;
    padding: 5px 0;
    line-height: 1;
    transition: background var(--t-fast), color var(--t-fast);
}
.ns__word:hover {
    background: var(--lcd-pixel);
    color: var(--lcd-bg);
}
.ns__word--pending {
    background: var(--lcd-pixel-dim);
    color: var(--lcd-bg);
}
.ns__word--locked {
    background: var(--lcd-pixel);
    color: var(--lcd-bg);
}
.ns__word:disabled { cursor: not-allowed; opacity: 0.7; }
.ns__actions {
    display: flex;
    flex: 0 0 auto;
}
.ns__submit {
    flex: 1;
    padding: 8px 0;
    font-size: 14px;
    letter-spacing: 0.12em;
}
.ns__status {
    text-align: center;
    font-family: var(--font-lcd);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    min-height: 14px;
    color: var(--lcd-pixel);
    flex: 0 0 auto;
}

/* Number Station: between-phase result */
.ns-result {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--lcd-pixel);
    font-family: var(--font-mono);
}
.ns-result__verdict {
    border: 1px solid var(--lcd-pixel);
    padding: 4px 6px;
    background: rgba(26, 13, 4, 0.08);
}
.ns-result__title {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}
.ns-result__secret-label {
    font-size: 9px;
    letter-spacing: 0.20em;
    color: var(--lcd-pixel-dim);
    text-transform: uppercase;
}
.ns-result__secret-word {
    font-family: var(--font-lcd);
    font-size: 22px;
    letter-spacing: 0.16em;
    color: var(--lcd-pixel);
}
.ns-result__solver {
    text-align: center;
    margin-top: 2px;
    font-family: var(--font-lcd);
    font-size: 12px;
    letter-spacing: 0.10em;
    color: var(--lcd-pixel-dim);
    text-transform: uppercase;
}
.ns-result__solver--won { color: var(--lcd-pixel); }
.ns-result__line {
    text-align: center;
    font-family: var(--font-mono);
    text-transform: uppercase;
}
.ns-result__line--label {
    font-size: 9px;
    letter-spacing: 0.20em;
    color: var(--lcd-pixel-dim);
    margin-top: 2px;
}
.ns-result__reveal {
    display: flex;
    flex-direction: column;
    gap: 1px;
    border: 1px dotted var(--lcd-pixel-dim);
    padding: 4px 6px;
    max-height: 130px;
    overflow-y: auto;
}
.ns-result__row {
    display: flex;
    gap: 6px;
    align-items: baseline;
    padding: 1px 2px;
    border-bottom: 1px dotted rgba(26, 13, 4, 0.18);
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.ns-result__row:last-child { border-bottom: 0; }
.ns-result__row--solver {
    background: var(--lcd-pixel);
    color: var(--lcd-bg);
}
.ns-result__name { flex: 1; }
.ns-result__letter {
    flex: 0 0 26px;
    text-align: right;
    font-family: var(--font-lcd);
    font-size: 16px;
    letter-spacing: 0.06em;
}
.ns-result__subs {
    display: flex;
    flex-direction: column;
    gap: 1px;
    border: 1px dotted var(--lcd-pixel-dim);
    padding: 4px 6px;
    max-height: 110px;
    overflow-y: auto;
}
.ns-result__sub-empty {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--lcd-pixel-dim);
    text-transform: uppercase;
}
.ns-result__sub-row {
    display: flex;
    gap: 6px;
    align-items: baseline;
    padding: 1px 2px;
    border-bottom: 1px dotted rgba(26, 13, 4, 0.18);
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.ns-result__sub-row:last-child { border-bottom: 0; }
.ns-result__sub-row--correct .ns-result__sub-flag { color: var(--lcd-pixel); font-weight: 600; }
.ns-result__sub-row--wrong   .ns-result__sub-flag { color: var(--lcd-pixel-dim); }
.ns-result__sub-row--solver {
    background: var(--lcd-pixel);
    color: var(--lcd-bg);
}
.ns-result__sub-row--solver .ns-result__sub-flag { color: inherit; }
.ns-result__sub-name { flex: 1; }
.ns-result__sub-word {
    flex: 0 0 auto;
    font-family: var(--font-lcd);
    letter-spacing: 0.10em;
}
.ns-result__sub-flag { flex: 0 0 28px; text-align: right; }
.ns-result__board {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.ns-result__board-row {
    display: flex;
    justify-content: space-between;
    padding: 1px 2px;
    border-bottom: 1px dotted rgba(26, 13, 4, 0.2);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ns-result__board-row:last-child { border-bottom: 0; }

/* ─── BETWEEN VIEW ──────────────────────────────────────────────────────
   Title at top, module-specific result body in the middle, "next in Ns"
   countdown at the bottom. */
.screen--between {
    gap: 6px;
}
.between__title {
    text-align: center;
    font-family: var(--font-lcd);
    font-size: 16px;
    letter-spacing: 0.16em;
    color: var(--lcd-pixel);
    text-transform: uppercase;
    border-bottom: 1px solid var(--lcd-pixel);
    padding-bottom: 4px;
    flex: 0 0 auto;
}
.between__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.between__next {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.20em;
    color: var(--lcd-pixel-dim);
    text-transform: uppercase;
    flex: 0 0 auto;
}
.between__missing {
    color: var(--lcd-pixel-dim);
    text-align: center;
    font-size: 10px;
    letter-spacing: 0.14em;
}

/* Wrong Number: between-phase result */
.wn-result {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: var(--font-mono);
    color: var(--lcd-pixel);
}
.wn-result__mine { padding: 4px 0; }
.wn-result__line {
    font-family: var(--font-lcd);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    padding: 4px 6px;
    border: 1px solid var(--lcd-pixel-dim);
}
.wn-result__line--good { border-color: var(--lcd-pixel); }
.wn-result__line--bad  {
    border-color: var(--lcd-pixel-dim);
    color: var(--lcd-pixel-dim);
}
.wn-result__board-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.20em;
    color: var(--lcd-pixel-dim);
    text-transform: uppercase;
    margin-top: 2px;
}
.wn-result__board {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.wn-result__board-row {
    display: flex;
    justify-content: space-between;
    padding: 1px 2px;
    border-bottom: 1px dotted rgba(26, 13, 4, 0.2);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.wn-result__board-row:last-child { border-bottom: 0; }

/* ─── END (final scoreboard) ────────────────────────────────────────────
   Big GAME OVER, ordered scoreboard, leave action. */
.screen--end {
    gap: var(--s-2);
    align-items: stretch;
}
.end__title {
    text-align: center;
    font-family: var(--font-lcd);
    font-size: 28px;
    letter-spacing: 0.20em;
    color: var(--lcd-pixel);
    text-transform: uppercase;
    margin-top: var(--s-1);
}
.end__board {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--lcd-pixel);
    flex: 1;
    overflow-y: auto;
    background: rgba(26, 13, 4, 0.06);
}
.end__row {
    display: flex;
    justify-content: space-between;
    padding: 4px 8px;
    border-bottom: 1px dotted rgba(26, 13, 4, 0.25);
    font-family: var(--font-mono);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.end__row:last-child { border-bottom: 0; }
.end__row:first-child {
    background: var(--lcd-pixel);
    color: var(--lcd-bg);
}
.end__name { font-weight: 500; }
.end__score {
    font-family: var(--font-lcd);
    letter-spacing: 0.06em;
}
.end__hint {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.20em;
    color: var(--lcd-pixel-dim);
    text-transform: uppercase;
}
.end__actions {
    gap: var(--s-2);
}
.end__actions .btn { flex: 1; }