/* Cyber Escape Room: a security operations console. Terminal green on near-black, amber for
   decrypted code characters, red for alerts. Class names are shared with app.js. */

:root {
    --bg: #03080a;
    --bg-2: #061012;
    --panel: #07130f;
    --panel-2: #0b1d17;
    --line: #17372c;
    --line-hi: #23553f;
    --text: #d6f5e5;
    --muted: #71978a;
    --accent: #39ff88;
    --accent-dim: #1d7a4b;
    --info: #22d3ee;
    --digit: #ffc53d;
    --ok: #39ff88;
    --bad: #ff4d5e;
    --radius: 6px;
    --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(1100px 600px at 85% -15%, rgba(57, 255, 136, .09), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(34, 211, 238, .06), transparent 60%),
        var(--bg);
    color: var(--text);
    font: 16px/1.55 var(--sans);
}

/* ---------- ambient effects ---------- */

/* a slow stream of hex bytes behind everything */
.fx-hex {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='700' height='528'><g font-family='monospace' font-size='12' fill='%2339ff88' fill-opacity='0.05' xml:space='preserve'><text x='0' y='22'>A4 C1 23 B1 61 2D D2 72 D1 37 1C 17 14 9D 43 95 36 B3 21 6F DA EE B9 75 72 9F AE 92</text><text x='0' y='44'>3D 5A 4F D1 2A AB FE 22 8F 21 9E 9C B0 EB 53 F1 69 47 CC F2 5E C8 4D 8D BC 74 25 47</text><text x='0' y='66'>70 F5 89 04 DB A4 1E CC CC 3F C1 62 6E 53 A1 30 43 B0 26 C4 8B BF 33 FE FF 92 43 A8</text><text x='0' y='88'>F5 06 B4 09 28 B5 B7 A7 67 C7 6F B0 08 F8 6B EB B2 73 7F 6A 6F 0F B2 3C 6F 5D A2 CE</text><text x='0' y='110'>C2 55 40 4E 4F B4 40 03 4D 66 08 69 7A 8D 41 BE D4 40 E5 04 54 F3 1A F3 17 68 13 E0</text><text x='0' y='132'>2E A6 8E F7 86 E4 D3 CE A2 7D 26 93 4B 48 4E 73 CF 57 5D CA D6 BA 2B 0A EE 0C A9 23</text><text x='0' y='154'>73 28 81 58 4D 8C 4F A2 81 5D 28 02 82 72 83 E0 AD 84 17 35 81 56 99 69 E5 8B 08 10</text><text x='0' y='176'>06 F7 E3 DF C9 67 A6 4C B1 40 28 D5 12 C9 79 1E 55 8E 08 BA A7 19 6B 50 AC 2F 86 70</text><text x='0' y='198'>28 24 C1 C0 99 72 4C AF 49 41 D4 07 20 14 B3 CE 10 7F 80 E2 22 F8 28 76 7E FC 2F 91</text><text x='0' y='220'>62 4A 89 40 F1 F8 36 F9 9E EE 36 92 F0 9E 2E 8C 66 22 48 B4 83 B7 FF C0 50 FE C9 4D</text><text x='0' y='242'>BC A3 A0 AA C3 60 98 B2 CC 2B D8 18 31 94 78 DA 6B D0 C6 21 DE 49 F1 45 FD A9 98 8C</text><text x='0' y='264'>79 FC 35 52 6F 7E AE D4 67 25 A2 A7 B8 60 DC D6 C8 A1 F8 B4 62 87 CC ED 90 41 DF F0</text><text x='0' y='286'>2C EE 73 74 43 E2 10 47 19 48 D3 32 96 C8 70 09 E8 A7 F7 70 D9 10 6F D2 87 DB 7F 1A</text><text x='0' y='308'>DB C6 09 26 F6 96 7E 78 93 F5 7F D1 4C 16 04 D1 15 CE A3 25 A6 5E 19 CB AE 53 02 82</text><text x='0' y='330'>BD 36 CB 9D 21 F6 BE 6A BF 0D 7C 1C 1E 21 86 2A B8 A1 8A 89 02 07 3F EC 8D F4 F5 09</text><text x='0' y='352'>47 AA EB 26 C5 7D 21 FA 5D 32 82 63 DF E5 74 DE 73 99 88 B8 86 E7 57 74 96 A2 C8 77</text><text x='0' y='374'>3E 13 0F 7E B1 97 31 66 2B 5E 80 3B 61 BA 41 68 16 0A DB 59 26 1F F2 D3 C4 25 C8 D9</text><text x='0' y='396'>9D 19 BD D0 B6 CC 60 D5 D3 2C BE 54 01 4C 2B 54 B9 55 23 CF 69 41 FA 1C 25 7C 6F 56</text><text x='0' y='418'>1C 5C B3 47 61 1A 3C E9 D9 7D CB EE 50 0F E7 EE 5F C3 24 BD B2 E1 14 2A 21 C4 02 36</text><text x='0' y='440'>4F 95 72 B8 5A 8E 48 F6 87 AB 16 5C 58 AC 58 31 BE 38 CB 8C B4 BA 2E 75 19 89 A0 17</text><text x='0' y='462'>49 DD B1 4F 71 01 0B 93 B7 D9 46 BF 54 07 4E 32 48 C8 01 BE F7 50 11 0C 57 51 30 64</text><text x='0' y='484'>D6 D5 92 91 F0 CD E2 E5 73 87 13 A8 18 D8 96 20 58 76 5A 6C A7 CF F0 0D 79 6C 25 41</text><text x='0' y='506'>03 35 B4 00 14 12 12 B6 2C 37 66 31 12 9F 34 36 9A AD 80 B8 91 BA F9 0D 0D 3B F1 62</text><text x='0' y='528'>95 D0 69 10 BF 3F 5F B8 59 67 F5 32 F3 AB 3C C2 D0 B6 98 D5 C7 E4 1B A4 EA 5E E8 74</text></g></svg>");
    background-size: 700px 528px;
    animation: hexflow 60s linear infinite;
    mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 85%);
}
@keyframes hexflow { to { background-position: 0 528px; } }

/* CRT scanlines and vignette */
.fx-scan {
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px),
        radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, .45) 100%);
}

a { color: var(--accent); }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent); color: #02140a; }

/* ---------- top bar ---------- */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--line);
    background: rgba(3, 8, 10, .88);
    backdrop-filter: blur(6px);
    position: sticky;
    top: 0;
    z-index: 5;
    font-family: var(--mono);
}
.brand { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.brand-mark { color: var(--accent); filter: drop-shadow(0 0 6px rgba(57, 255, 136, .6)); flex: none; }
.brand-mark .keyhole { fill: var(--digit); }
.brand-name { font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .9rem; }
.link-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid var(--line-hi);
    padding: 3px 8px;
    border-radius: 3px;
}
.led { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.brand-sub { color: var(--muted); font-size: .75rem; text-decoration: none; letter-spacing: .04em; }
a.brand-sub:hover { color: var(--accent); text-decoration: underline; }
.topbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.who { font-family: var(--mono); font-size: .78rem; color: var(--muted); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who::before { content: "user: "; color: var(--accent-dim); }

.timer {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    background: #020605;
    border: 1px solid var(--line-hi);
    padding: 4px 10px;
    border-radius: 3px;
    color: var(--digit);
    text-shadow: 0 0 10px rgba(255, 197, 61, .5);
}
.timer::before { content: "T- "; color: var(--muted); text-shadow: none; }
.timer.low { color: var(--bad); border-color: rgba(255, 77, 94, .5); text-shadow: 0 0 10px rgba(255, 77, 94, .6); animation: pulse 1s ease-in-out infinite; }

/* ---------- layout ---------- */

main { flex: 1; width: 100%; max-width: 900px; margin: 0 auto; padding: 28px 16px 48px; }

.footer {
    text-align: center;
    color: var(--muted);
    font: .75rem/1.5 var(--mono);
    padding: 16px;
    border-top: 1px solid var(--line);
    background: rgba(3, 8, 10, .8);
}
.footer-tag { color: var(--accent); }

/* Panels are terminal windows: a title bar with status lights, and HUD corner brackets. */
.panel {
    position: relative;
    background: linear-gradient(180deg, rgba(7, 19, 15, .94), rgba(6, 16, 18, .94));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 44px 24px 24px;
    margin-bottom: 20px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 18px 40px rgba(0, 0, 0, .45);
}
.panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 26px;
    border-bottom: 1px solid var(--line);
    border-radius: var(--radius) var(--radius) 0 0;
    background:
        radial-gradient(circle at 16px 13px, #ff5f57 0 4px, transparent 4.5px),
        radial-gradient(circle at 32px 13px, #febc2e 0 4px, transparent 4.5px),
        radial-gradient(circle at 48px 13px, #28c840 0 4px, transparent 4.5px),
        linear-gradient(180deg, #0c1f19, #081511);
    pointer-events: none;
}
.panel::after {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    border-radius: var(--radius);
    background:
        linear-gradient(var(--accent), var(--accent)) top left / 14px 2px,
        linear-gradient(var(--accent), var(--accent)) top left / 2px 14px,
        linear-gradient(var(--accent), var(--accent)) top right / 14px 2px,
        linear-gradient(var(--accent), var(--accent)) top right / 2px 14px,
        linear-gradient(var(--accent), var(--accent)) bottom left / 14px 2px,
        linear-gradient(var(--accent), var(--accent)) bottom left / 2px 14px,
        linear-gradient(var(--accent), var(--accent)) bottom right / 14px 2px,
        linear-gradient(var(--accent), var(--accent)) bottom right / 2px 14px;
    background-repeat: no-repeat;
    opacity: .7;
}
details.panel { padding-top: 40px; }

.grid-2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }

h1, h2, h3 { line-height: 1.15; margin: 0 0 12px; font-family: var(--mono); }
h1 { font-size: clamp(1.9rem, 5.4vw, 2.8rem); letter-spacing: -.02em; }
h2 { font-size: 1.3rem; letter-spacing: -.01em; }
h3 { font-size: 1rem; }
p { margin: 0 0 12px; }
.muted { color: var(--muted); }
.accent { color: var(--accent); text-shadow: 0 0 18px rgba(57, 255, 136, .45); }

/* shell-prompt section labels */
.eyebrow {
    font: .78rem/1.4 var(--mono);
    color: var(--accent);
    letter-spacing: .06em;
    margin-bottom: 10px;
}
.eyebrow::before { content: "root@escape:~$ "; color: var(--accent-dim); }
.eyebrow::after { content: "▌"; margin-left: 3px; animation: blink 1.1s steps(1) infinite; }

/* glitchy headline on the front door */
.door h1 { animation: glitch 6s infinite; }
@keyframes glitch {
    0%, 92%, 100% { text-shadow: none; transform: none; }
    93% { text-shadow: -2px 0 var(--bad), 2px 0 var(--info); transform: translateX(1px); }
    94% { text-shadow: 2px 0 var(--bad), -2px 0 var(--info); transform: translateX(-2px) skewX(-3deg); }
    95% { text-shadow: -1px 0 var(--bad), 1px 0 var(--info); transform: none; }
}

.preview-note, .retry-note {
    color: var(--digit);
    border: 1px solid rgba(255, 197, 61, .35);
    border-left-width: 4px;
    padding: 8px 12px;
    background: rgba(255, 197, 61, .06);
    font-size: .9rem;
    border-radius: 3px;
}
.preview-note::before, .retry-note::before { content: "⚠ "; }

/* ---------- controls ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #02140a;
    font: 700 .92rem/1 var(--mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 13px 20px;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: 0 0 18px rgba(57, 255, 136, .28);
    transition: transform .08s ease, background .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:hover { background: #7dffb2; box-shadow: 0 0 26px rgba(57, 255, 136, .45); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line-hi); box-shadow: none; }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); background: rgba(57, 255, 136, .06); }
.btn.small { padding: 6px 11px; font-size: .72rem; }
.btn.danger { background: transparent; color: var(--bad); border-color: rgba(255, 77, 94, .45); box-shadow: none; }
.btn.danger:hover { background: rgba(255, 77, 94, .1); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.btn-row.center { justify-content: center; }

.field { display: flex; flex-direction: column; gap: 6px; margin: 16px 0; }
.field label { font: .8rem/1.4 var(--mono); color: var(--muted); letter-spacing: .04em; }
.field label::before { content: "> "; color: var(--accent); }
.field input {
    background: #020605;
    border: 1px solid var(--line-hi);
    border-radius: 3px;
    padding: 12px 14px;
    font: 1rem var(--mono);
    color: var(--accent);
    caret-color: var(--accent);
}
.field input::placeholder { color: #3d5e52; }
.field input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(57, 255, 136, .18); }

.error { color: var(--bad); font: .85rem/1.4 var(--mono); min-height: 1.4em; margin: 8px 0 0; }
.error:not(:empty)::before { content: "[!] "; }

/* ---------- front door ---------- */

.door { overflow: hidden; }
.rules { margin: 0; padding-left: 0; list-style: none; counter-reset: rule; }
.rules li { counter-increment: rule; position: relative; padding-left: 38px; margin-bottom: 10px; }
.rules li::before {
    content: counter(rule, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 1px;
    font: 700 .75rem/1.6 var(--mono);
    color: var(--accent);
    border: 1px solid var(--line-hi);
    padding: 0 5px;
    border-radius: 2px;
}

/* ---------- code strip: the decrypted bytes so far ---------- */

.code-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 0 0 20px; }
.code-room {
    background: rgba(2, 6, 5, .9);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 8px 6px 6px;
    text-align: center;
    min-width: 0;
}
.code-pair { display: flex; justify-content: center; gap: 6px; }
.code-char {
    font: 700 1.6rem/1.1 var(--mono);
    color: #2f4a40;
    min-width: 1ch;
}
.code-char.found { color: var(--digit); text-shadow: 0 0 14px rgba(255, 197, 61, .55); }
.code-room .label { font: .62rem/1.3 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.code-room.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, 0 0 16px rgba(57, 255, 136, .2); }
.code-room.current .label { color: var(--accent); }

/* ---------- questions ---------- */

.q-count {
    display: flex;
    align-items: center;
    gap: 10px;
    font: .8rem/1 var(--mono);
    color: var(--accent);
    letter-spacing: .08em;
    text-transform: uppercase;
    border-top: 1px solid var(--line);
    padding-top: 16px;
    margin-top: 8px;
}
.q-count::before { content: ""; width: 8px; height: 8px; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.question { border: 0; margin: 12px 0 0; padding: 0; min-width: 0; }
.question legend { font-weight: 600; font-size: 1.12rem; line-height: 1.45; margin-bottom: 16px; padding: 0; }

.option {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--line-hi);
    border-radius: 3px;
    margin-bottom: 8px;
    cursor: pointer;
    background: rgba(2, 6, 5, .7);
    transition: border-color .12s ease, background .12s ease;
}
.option:hover { border-color: var(--accent-dim); border-left-color: var(--accent); }
.option input { accent-color: var(--accent); margin-top: 4px; flex: none; }
.option:has(input:checked) { border-color: var(--accent); background: rgba(57, 255, 136, .07); box-shadow: 0 0 14px rgba(57, 255, 136, .12); }

/* ---------- reveal ---------- */

.reveal { text-align: center; padding: 48px 24px 32px; }
.reveal .big-digit {
    display: inline-block;
    font: 800 5.5rem/1 var(--mono);
    color: var(--digit);
    margin: 16px 0;
    padding: 6px 26px;
    border: 1px solid rgba(255, 197, 61, .4);
    background: rgba(255, 197, 61, .05);
    text-shadow: 0 0 40px rgba(255, 197, 61, .6);
    animation: decrypt .7s steps(7);
}
@keyframes decrypt {
    0% { opacity: .25; filter: blur(6px); transform: scale(1.3); }
    40% { opacity: 1; filter: blur(2px); letter-spacing: .3em; }
    100% { filter: none; transform: none; letter-spacing: 0; }
}
.failed-list { display: inline-block; text-align: left; margin: 0 0 12px; padding-left: 0; list-style: none; font-family: var(--mono); color: var(--bad); }
.failed-list li { margin-bottom: 4px; }
.failed-list li::before { content: "✗ "; }

/* ---------- keypad: a hardware security token ---------- */

.keypad-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 14px 18px;
    margin: 8px auto 12px;
    max-width: 520px;
    background: linear-gradient(180deg, #0d1512, #060b09);
    border: 1px solid var(--line-hi);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 20px 40px rgba(0, 0, 0, .5);
}
.display {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    justify-content: center;
    align-self: stretch;
    margin: 4px 0 20px;
    padding: 12px;
    background: #010403;
    border: 1px solid #0f2a20;
    border-radius: 6px;
    box-shadow: inset 0 0 20px rgba(57, 255, 136, .08);
}
.display .cell {
    flex: 1 1 0;
    min-width: 0;
    max-width: 38px;
    height: 52px;
    display: grid;
    place-items: center;
    padding: 0;
    font: 700 1.7rem/1 var(--mono);
    background: #020806;
    border: 1px solid #12301f;
    border-radius: 3px;
    color: var(--accent);
    text-shadow: 0 0 12px rgba(57, 255, 136, .7);
    cursor: pointer;
}
.display .cell:hover { border-color: var(--accent-dim); }
.display .cell.cursor { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 12px rgba(57, 255, 136, .35); }
.display .cell.cursor:empty::after { content: "_"; color: var(--accent); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.display .cell.pair-end { margin-right: 8px; }
.display .cell.pair-end:last-child { margin-right: 0; }
.display.denied { box-shadow: inset 0 0 24px rgba(255, 77, 94, .2); border-color: rgba(255, 77, 94, .5); }
.display.denied .cell { color: var(--bad); border-color: rgba(255, 77, 94, .5); text-shadow: 0 0 12px rgba(255, 77, 94, .7); }
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

.keypad { display: grid; grid-template-columns: repeat(5, 58px); gap: 8px; }
.key {
    height: 50px;
    border-radius: 6px;
    border: 1px solid #1d3a2e;
    background: linear-gradient(180deg, #13241d, #0a1511);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 3px 0 #020504;
    font: 700 1.3rem/1 var(--mono);
    color: var(--text);
    cursor: pointer;
}
.key:hover { border-color: var(--accent); color: var(--accent); text-shadow: 0 0 8px rgba(57, 255, 136, .6); }
.key:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 1px 0 #020504; }
.key.fn { font-size: 1rem; color: var(--muted); }
.key.go { background: linear-gradient(180deg, #4dff96, #22c865); color: #02140a; border-color: var(--accent); font: 800 .85rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-shadow: none; }
.key.go:hover { color: #02140a; }
.key.wide { grid-column: span 2; }
.tries { font: .82rem/1.4 var(--mono); color: var(--muted); margin-top: 16px; letter-spacing: .04em; }

/* ---------- results ---------- */

.result-hero { text-align: center; padding: 48px 24px 30px; }
.result-hero.escaped { border-color: rgba(57, 255, 136, .6); box-shadow: 0 0 70px rgba(57, 255, 136, .15); }
.result-hero.escaped h1 { color: var(--accent); text-shadow: 0 0 24px rgba(57, 255, 136, .5); }
.result-hero.escaped h1::before { content: "ACCESS GRANTED"; display: block; font-size: .9rem; letter-spacing: .4em; margin-bottom: 10px; }
.result-hero.locked { border-color: rgba(255, 77, 94, .5); box-shadow: 0 0 60px rgba(255, 77, 94, .1); }
.result-hero.locked h1 { color: var(--bad); }
.result-hero .stat { font: 700 2.6rem/1.1 var(--mono); color: var(--digit); margin: 8px 0 12px; text-shadow: 0 0 20px rgba(255, 197, 61, .45); }
.result-hero .stat-label { font: 400 .95rem/1.1 var(--mono); color: var(--muted); text-shadow: none; }
.code-compare { display: inline-grid; grid-template-columns: auto auto; gap: 6px 16px; font-family: var(--mono); text-align: left; margin-top: 8px; }
.code-compare .bad { color: var(--bad); }
.code-compare .good { color: var(--ok); }

.debrief-title { margin-top: 28px; }
.debrief-room { margin-bottom: 16px; }
.debrief-room summary { cursor: pointer; display: flex; justify-content: space-between; gap: 12px; align-items: center; font: 700 .95rem/1.4 var(--mono); list-style: none; }
.debrief-room summary::-webkit-details-marker { display: none; }
.debrief-room summary::after { content: "▸"; color: var(--accent); transition: transform .15s; }
.debrief-room[open] summary::after { transform: rotate(90deg); }
.badge { font: .72rem/1 var(--mono); padding: 4px 8px; border-radius: 2px; white-space: nowrap; border: 1px solid; }
.badge.ok { background: rgba(57, 255, 136, .08); color: var(--ok); border-color: rgba(57, 255, 136, .35); }
.badge.bad { background: rgba(255, 77, 94, .08); color: var(--bad); border-color: rgba(255, 77, 94, .35); }
.summary-left { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.half-title { font: .75rem/1.4 var(--mono); color: var(--accent); text-transform: uppercase; letter-spacing: .1em; margin: 22px 0 0; }
.d-q { border-top: 1px dashed var(--line); padding-top: 14px; margin-top: 14px; }
.d-q p.q { font-weight: 600; }
.d-opt { padding: 6px 10px; border-radius: 2px; margin: 4px 0; font-size: .95rem; color: var(--muted); }
.d-opt.correct { color: var(--ok); background: rgba(57, 255, 136, .07); }
.d-opt.chosen-wrong { color: var(--bad); background: rgba(255, 77, 94, .07); text-decoration: line-through; }
.d-opt::before { font-family: var(--mono); margin-right: 8px; }
.d-opt.correct::before { content: "✓"; }
.d-opt.chosen-wrong::before { content: "✗"; }
.why { font-size: .9rem; border-left: 3px solid var(--info); padding: 6px 12px; margin-top: 8px; color: var(--text); background: rgba(34, 211, 238, .05); }
.why::before { content: "INFO "; font: 700 .7rem var(--mono); color: var(--info); letter-spacing: .1em; }

/* ---------- leaderboard ---------- */

table.board { width: 100%; border-collapse: collapse; font: .85rem/1.4 var(--mono); }
.board th, .board td { padding: 9px 8px; text-align: left; border-bottom: 1px solid var(--line); }
.board th { color: var(--accent-dim); font-weight: 600; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; }
.board td.num, .board th.num { text-align: right; font-variant-numeric: tabular-nums; }
.board td.player { overflow-wrap: anywhere; }
.board tr.you td { color: var(--accent); background: rgba(57, 255, 136, .05); }
.board .rank { color: var(--muted); width: 2.5em; }
.containment { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 18px; padding: 14px 12px; text-align: center; font: .8rem/1.4 var(--mono); border: 1px dashed rgba(255, 77, 94, .5); border-radius: 4px; background: rgba(255, 77, 94, .05); }
.containment-count { font: 700 2rem/1.1 var(--mono); color: var(--bad); text-shadow: 0 0 14px rgba(255, 77, 94, .5); }
.containment-label { color: var(--bad); text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; }
.board tr:nth-child(1) .rank { color: var(--digit); text-shadow: 0 0 10px rgba(255, 197, 61, .6); }

.center { text-align: center; }

@media (max-width: 520px) {
    .panel { padding: 40px 12px 18px; }
    .code-strip { gap: 5px; }
    .code-pair { gap: 2px; }
    .code-char { font-size: 1.2rem; }
    .code-room .label { display: none; }
    .keypad-wrap { padding: 12px 6px; }
    .display { padding: 8px 5px; gap: 3px; }
    .display .cell { height: 38px; font-size: 1.05rem; }
    .display .cell.pair-end { margin-right: 3px; }
    .keypad { grid-template-columns: repeat(5, minmax(0, 54px)); gap: 6px; }
    .brand-sub, .who, .link-status { display: none; }
    .eyebrow::before { content: "$ "; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}