:root {
    --bg: #020604;
    --panel: rgba(0, 12, 4, 0.88);
    --green: #33ff4a;
    --green-dim: #148a30;
    --green-faint: rgba(51, 255, 74, 0.12);
    --red: #ff3b3b;
    --amber: #ffb000;
    --paper: #ece6d6;
    --ink: #1a1a1a;
    --white: #d8ffd8;
    --mono: 'Courier Prime', 'Courier New', monospace;   /* the FB videos' terminal type */
    --crt: 'VT323', 'Courier Prime', monospace;          /* old display digits, VHS on-screen text */
    --type: 'Special Elite', 'Courier New', monospace;
    --stencil: 'Black Ops One', Impact, sans-serif;
    color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--bg);
    color: var(--green);
    font-family: var(--mono);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

/* the CRT glass: scanlines that flicker a little, a slow refresh band rolling down, dark rounded tube corners */
.scanlines {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, 0.34) 2px 3px);
    z-index: 20;
    overflow: hidden;
    animation: flicker 0.16s steps(3) infinite;
}
.scanlines::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -20vh;
    height: 16vh;
    background: linear-gradient(to bottom, transparent, rgba(51, 255, 74, 0.04), transparent);
    animation: roll 7s linear infinite;
}
@keyframes flicker { 0% { opacity: 0.9; } 50% { opacity: 1; } 100% { opacity: 0.95; } }
@keyframes roll { to { transform: translateY(140vh); } }
.vignette {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.8) 100%);
    box-shadow: inset 0 0 80px 24px rgba(0, 0, 0, 0.85);
    border-radius: 26px / 20px;
    z-index: 19;
}

#stage {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    z-index: 10;
    text-align: center;
    text-shadow: 0 0 1px rgba(51, 255, 74, 0.55), 0 0 7px rgba(51, 255, 74, 0.3);   /* phosphor bloom */
}
/* paper does not glow */
.dossier, .order, .sheet, .strip, .usb .label { text-shadow: none; }

#mute {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 30;
    width: 40px;
    height: 40px;
    border: 2px solid var(--green-dim);
    background: var(--panel);
    color: var(--green);
    font: 24px var(--crt);
    cursor: pointer;
}
#mute.off { color: var(--green-dim); text-decoration: line-through; }

.glow { text-shadow: 0 0 2px rgba(51, 255, 74, 0.9), 0 0 10px rgba(51, 255, 74, 0.6); }
.dim { color: var(--green-dim); }
.red { color: var(--red); text-shadow: 0 0 10px rgba(255, 59, 59, 0.6); }
.caret::after {
    content: '▌';
    animation: blink 1s steps(1) infinite;
    margin-left: 2px;
}
@keyframes blink { 50% { opacity: 0; } }

.fade-in { animation: fadeIn 0.8s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- glitch & shake ---------- */
body.glitch #stage { animation: glitch 0.35s steps(2) infinite; }
@keyframes glitch {
    0%   { transform: translate(0); filter: none; }
    20%  { transform: translate(-4px, 2px); filter: hue-rotate(90deg); }
    40%  { transform: translate(3px, -2px); clip-path: inset(10% 0 30% 0); }
    60%  { transform: translate(-2px, 0); clip-path: inset(50% 0 5% 0); }
    80%  { transform: translate(4px, 1px); filter: saturate(3); }
    100% { transform: translate(0); clip-path: none; }
}
.shake { animation: shake 0.45s; }
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-10px); }
    40% { transform: translateX(9px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(4px); }
}
body.quake #stage { animation: shake 0.3s infinite; }

/* ---------- buttons: [ TERMINAL ] style, inverted when chosen ---------- */
.btn {
    margin-top: 28px;
    padding: 12px 22px;
    min-height: 48px;
    border: 2px solid var(--green);
    background: transparent;
    color: var(--green);
    font: 700 clamp(15px, 4.2vw, 18px) var(--mono);
    letter-spacing: 0.08em;
    white-space: nowrap;
    cursor: pointer;
    animation: pulse 1.1s steps(1) infinite;
}
.btn::before { content: '[ '; }
.btn::after { content: ' ]'; }
.btn:hover, .btn:focus-visible { background: var(--green); color: var(--bg); text-shadow: none; outline: none; animation: none; }
.btn:disabled { animation: none; }
.btn.red { border-color: var(--red); color: var(--red); background: rgba(255, 59, 59, 0.1); }
@keyframes pulse { 50% { border-color: var(--green-dim); } }

/* ---------- countdown ---------- */
.radar {
    position: fixed;
    left: 50%;
    top: 50%;
    width: min(140vmin, 1100px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        repeating-radial-gradient(circle, rgba(51, 255, 74, 0.1) 0 1px, transparent 1px 12%),
        conic-gradient(from 0deg, rgba(51, 255, 74, 0.28), rgba(51, 255, 74, 0) 60deg, transparent 360deg);
    animation: sweep 6s linear infinite;
    z-index: -1;
    opacity: 0.5;
}
@keyframes sweep { to { transform: translate(-50%, -50%) rotate(360deg); } }

.countdown h1 {
    font: 400 clamp(18px, 5.2vw, 52px) var(--stencil);
    letter-spacing: 0.1em;
    white-space: nowrap;
    margin: 0 0 8px;
}
.countdown .state { margin-bottom: 26px; font-size: clamp(14px, 3.6vw, 20px); letter-spacing: 0.28em; color: var(--green-dim); }
.op-title { margin-bottom: 18px; font: 400 clamp(18px, 5vw, 26px) var(--stencil); letter-spacing: 0.12em; color: var(--white); text-shadow: 0 0 14px rgba(51, 255, 74, 0.5); }
/* inside a panel the title is an inverted DOS-style title bar across the top */
.panel > .op-title {
    margin: calc(-1 * clamp(20px, 5vw, 36px)) calc(-1 * clamp(20px, 5vw, 36px)) 22px;
    padding: 5px 10px;
    background: var(--green);
    color: var(--bg);
    font: 700 clamp(14px, 3.8vw, 18px) var(--mono);
    letter-spacing: 0.3em;
    text-shadow: none;
}
.digits { display: flex; gap: clamp(8px, 3vw, 28px); justify-content: center; }
.digit b {
    display: block;
    font: 400 clamp(58px, 18vw, 160px) var(--crt);
    line-height: 0.9;
    text-shadow: 0 0 3px rgba(51, 255, 74, 0.9), 0 0 20px rgba(51, 255, 74, 0.6);
}
.digit span { font-size: clamp(11px, 2.6vw, 15px); color: var(--green-dim); letter-spacing: 0.2em; }
.countdown .meta { margin-top: 32px; font-size: clamp(12px, 3vw, 16px); color: var(--green-dim); letter-spacing: 0.1em; }

/* ---------- login ---------- */
/* screens: a double-line frame like an old terminal window, switched on like a CRT */
.panel {
    width: min(560px, 100%);
    padding: clamp(20px, 5vw, 36px);
    border: 4px double var(--green);
    background: var(--panel);
    box-shadow: 0 0 34px rgba(51, 255, 74, 0.12), inset 0 0 26px rgba(51, 255, 74, 0.06);
    position: relative;
    animation: crtOn 0.4s ease-out both;
}
.panel.denied { border-color: var(--red); }
.panel.denied > .op-title { background: var(--red); }
@keyframes crtOn {
    0%   { transform: scale(1, 0.01); filter: brightness(3); opacity: 0.6; }
    50%  { transform: scale(1, 0.01); filter: brightness(3); opacity: 1; }
    100% { transform: none; filter: none; opacity: 1; }
}

.login .head { font-size: clamp(16px, 4vw, 22px); letter-spacing: 0.16em; min-height: 1.4em; }
.login .sub { margin-top: 8px; color: var(--green-dim); letter-spacing: 0.1em; min-height: 1.3em; }
.login form[hidden] { display: none; }
.login form { margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.login label { font-size: 14px; letter-spacing: 0.2em; color: var(--green-dim); }
.login input {
    width: 100%;
    max-width: 360px;
    padding: 12px 14px;
    background: #000;
    border: 1px solid var(--green-dim);
    color: var(--green);
    font: 700 26px var(--mono);
    letter-spacing: 0.3em;
    text-align: center;
    text-transform: uppercase;
    outline: none;
    caret-color: var(--green);
    caret-shape: block;
}
.login input:focus { border-color: var(--green); box-shadow: 0 0 16px rgba(51, 255, 74, 0.35); }
.login .btn { margin-top: 4px; }
.login .status { min-height: 1.5em; font-size: 18px; letter-spacing: 0.14em; }
.login .hint { min-height: 1.2em; color: var(--amber); font-size: 14px; letter-spacing: 0.06em; }

/* ---------- dossier ---------- */
.dossier {
    width: min(620px, 100%);
    padding: clamp(18px, 5vw, 34px);
    background: var(--paper);
    color: var(--ink);
    font-family: var(--type);
    text-align: left;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    transform: rotate(-1deg);
    animation: slideIn 0.9s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes slideIn { from { transform: translateY(60vh) rotate(8deg); opacity: 0; } to { transform: rotate(-1deg); opacity: 1; } }
.dossier .top { display: flex; justify-content: space-between; font-size: 13px; letter-spacing: 0.1em; border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin-bottom: 14px; }
.dossier .line { font-size: clamp(15px, 3.8vw, 19px); margin: 10px 0; }
.dossier .status b { font-family: var(--mono); padding: 0 6px; }
.dossier .status b.active { background: var(--ink); color: var(--green); }
.dossier .msg { margin-top: 18px; font-size: clamp(15px, 3.6vw, 18px); min-height: 2.6em; padding-bottom: clamp(56px, 14vw, 80px); }

.stamp {
    position: absolute;
    right: 5%;
    bottom: 10%;
    padding: 6px 14px;
    border: 4px solid #c21d1d;
    color: #c21d1d;
    font: 400 clamp(18px, 5vw, 30px) var(--stencil);
    letter-spacing: 0.06em;
    transform: rotate(-14deg) scale(3);
    opacity: 0;
    mix-blend-mode: multiply;
}
.stamp.show { animation: stamp 0.35s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes stamp { to { transform: rotate(-14deg) scale(1); opacity: 0.9; } }

/* ---------- clue replay ---------- */
.rec {
    width: min(560px, 100%);
    aspect-ratio: 4 / 3;
    max-height: 62vh;
    border: 1px solid var(--green-dim);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 40%, rgba(51, 255, 74, 0.08), rgba(0, 0, 0, 0.8));
    overflow: hidden;
}
/* the clue replay looks like an old VHS tape: on-screen text with a colour fringe, a tracking band rolling through */
.rec::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -16%;
    height: 12%;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.07) 40%, rgba(255, 255, 255, 0.14) 50%, rgba(255, 255, 255, 0.07) 60%, transparent);
    pointer-events: none;
    animation: track 4.2s linear infinite;
}
@keyframes track { to { top: 116%; } }
.rec .prop { filter: saturate(0.85) contrast(1.05); }
.rec .bar, .rec .osd {
    position: absolute;
    left: 12px;
    right: 12px;
    display: flex;
    justify-content: space-between;
    font: 22px var(--crt);
    letter-spacing: 0.1em;
    color: #effff0;
    text-shadow: 1.5px 0 rgba(255, 0, 70, 0.55), -1.5px 0 rgba(0, 170, 255, 0.55);
    z-index: 2;
}
.rec .bar { top: 8px; }
.rec .osd { bottom: 6px; left: 44px; right: 44px; }
.rec .bar .dot::before { content: '●'; color: var(--red); margin-right: 6px; animation: blink 1s steps(1) infinite; }
.rec .corner { position: absolute; width: 22px; height: 22px; border: 2px solid var(--green); }
.rec .c1 { top: 36px; left: 12px; border-right: 0; border-bottom: 0; }
.rec .c2 { top: 36px; right: 12px; border-left: 0; border-bottom: 0; }
.rec .c3 { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.rec .c4 { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.rec .c1, .rec .c2 { top: 40px; }
.clue-caption { margin-top: 18px; min-height: 1.4em; font-size: clamp(14px, 3.6vw, 18px); letter-spacing: 0.08em; }

.prop { animation: zoomIn 0.6s ease both; }
@keyframes zoomIn { from { transform: scale(1.4); opacity: 0; filter: blur(6px); } to { transform: none; opacity: 1; filter: none; } }

.sheet {
    width: 62%;
    padding: 16px;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--type);
    font-size: 13px;
    transform: rotate(2deg);
    position: relative;
}
.sheet .r { color: #c21d1d; font: 400 18px var(--stencil); border: 3px solid #c21d1d; display: inline-block; padding: 2px 8px; transform: rotate(-6deg); margin: 8px 0 12px; }
.sheet .bars span { display: block; height: 9px; background: var(--ink); margin: 6px 0; }
.sheet .code { margin-top: 12px; font-family: var(--mono); font-size: 16px; }

.phone {
    width: 46%;
    min-width: 170px;
    aspect-ratio: 9 / 16;
    max-height: 88%;
    border: 3px solid #2a3a30;
    border-radius: 22px;
    background: #050a07;
    padding: 18% 10px 10px;
    position: relative;
}
.phone .bubble {
    background: #1c2a22;
    color: var(--white);
    border-radius: 14px 14px 14px 4px;
    padding: 10px 12px;
    text-align: left;
    font-size: 14px;
    line-height: 1.5;
}
.phone .bubble .k { font-size: 20px; color: var(--green); letter-spacing: 0.12em; }

.usb { display: flex; align-items: center; transform: rotate(-12deg); }
.usb .plug { width: 46px; height: 38px; background: linear-gradient(#cfd6d2, #8b948f); border: 2px solid #5b635f; }
.usb .plug::before { content: ''; display: block; margin: 10px 8px; height: 8px; border: 2px solid #5b635f; }
.usb .body {
    width: 190px;
    height: 70px;
    background: #111;
    border: 2px solid #333;
    border-radius: 0 12px 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.usb .label { background: #f4efe0; color: var(--ink); font: 14px var(--mono); padding: 4px 8px; letter-spacing: 0.08em; }

/* the torn coordinate strip, drawn like the printed one: a strip off an old dot-matrix printout (green bar,
   dot-matrix type, sprocket holes behind a perforation at each outer end). Her half first, then the agency's half
   slides in and the ragged edges mesh – the right half's edge is the left half's edge mirrored, overlapping by 8px */
.strip { display: flex; transform: rotate(-3deg); filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6)); }
.strip .half {
    position: relative;
    width: 8.2em;
    padding: 0.55em 0;
    background: linear-gradient(to bottom, #f6f5ee 0 22%, #dcefd9 22% 78%, #f6f5ee 78% 100%);
    color: #1d221d;
    font: 700 clamp(19px, 5.2vw, 28px) 'Doto', 'VT323', monospace;
    letter-spacing: 0.06em;
    text-align: center;
}
.strip .half::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1.3em;
    background: radial-gradient(circle at 50% 28%, #050a07 0 0.2em, transparent 0.22em),
                radial-gradient(circle at 50% 72%, #050a07 0 0.2em, transparent 0.22em), #f6f5ee;
}
.strip .left { padding-left: 1.3em; }
.strip .left::before { left: 0; border-right: 1px dashed rgba(0, 0, 0, 0.25); }
.strip .right { padding-right: 1.3em; }
.strip .right::before { right: 0; border-left: 1px dashed rgba(0, 0, 0, 0.25); }
.strip .left { clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 14%, calc(100% - 7px) 30%, calc(100% - 2px) 46%, calc(100% - 8px) 62%, calc(100% - 3px) 79%, calc(100% - 6px) 100%, 0 100%); }
.strip .right {
    margin-left: -8px;
    clip-path: polygon(4px 0, 100% 0, 100% 100%, 2px 100%, 5px 79%, 0 62%, 6px 46%, 1px 30%, 8px 14%);
    opacity: 0;
    transform: translate(80px, 18px) rotate(7deg);
    transition: transform 0.9s cubic-bezier(.2, .8, .2, 1), opacity 0.4s;
}
.strip.join .right { opacity: 1; transform: none; }

.roll { display: inline-block; min-width: 0.62em; }
.roll.done { color: var(--green); text-shadow: 0 0 8px rgba(51, 255, 74, 0.8); }
.sheet .roll.done { color: #0b6b35; text-shadow: none; }

/* ---------- target / map ---------- */
.target { position: fixed; inset: 0; }
#map { position: absolute; inset: 0; background: #010302; }
#map .tinted img { filter: grayscale(1) sepia(1) hue-rotate(80deg) saturate(2.2) brightness(0.75) contrast(1.25); }
.leaflet-container { background: #010302; font-family: var(--mono); }
.leaflet-control-attribution { background: rgba(0, 0, 0, 0.6) !important; color: var(--green-dim) !important; font-size: 10px; }
.leaflet-control-attribution a { color: var(--green-dim) !important; }
.map-label {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--green);
    font: 13px var(--mono);
    letter-spacing: 0.1em;
    text-shadow: 0 0 6px #000, 0 0 6px #000;
}
.map-label::before { display: none; }
.map-grid {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(51, 255, 74, 0.07) 1px, transparent 1px) 0 0 / 60px 60px,
        linear-gradient(90deg, rgba(51, 255, 74, 0.07) 1px, transparent 1px) 0 0 / 60px 60px;
    pointer-events: none;
    z-index: 401;
}
.map-grid.fallback { animation: gridZoom 9s ease-in forwards; }
@keyframes gridZoom { to { background-size: 6px 6px, 6px 6px; } }
.hud { position: absolute; inset: 0; z-index: 402; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hud .coords {
    position: absolute;
    top: max(20px, env(safe-area-inset-top));
    left: 16px;
    right: 16px;
    font-family: var(--crt);
    font-size: clamp(24px, 6.4vw, 38px);
    letter-spacing: 0.12em;
    text-shadow: 0 0 8px #000;
}
.hud .step {
    position: absolute;
    top: calc(max(20px, env(safe-area-inset-top)) + 2.6em);
    left: 0;
    right: 0;
    font: 20px var(--crt);
    color: var(--green-dim);
    letter-spacing: 0.2em;
    text-shadow: 0 0 6px #000;
}
.crosshair {
    width: 120px;
    height: 120px;
    border: 1px solid rgba(51, 255, 74, 0.7);
    border-radius: 50%;
    position: relative;
    transition: transform 0.6s, border-color 0.4s;
}
.crosshair::before, .crosshair::after { content: ''; position: absolute; background: rgba(51, 255, 74, 0.8); }
.crosshair::before { left: 50%; top: -30px; bottom: -30px; width: 1px; }
.crosshair::after { top: 50%; left: -30px; right: -30px; height: 1px; }
.crosshair.lock { transform: scale(0.55); border-color: var(--red); border-width: 2px; }
.hud .lock-label { position: absolute; top: calc(50% + 50px); font-size: 15px; letter-spacing: 0.2em; min-height: 1.2em; text-shadow: 0 0 6px #000; }
.hud .title-card {
    position: absolute;
    bottom: max(40px, env(safe-area-inset-bottom));
    left: 16px;
    right: 16px;
    padding: 18px;
    background: rgba(0, 0, 0, 0.72);
    border-top: 1px solid var(--green-dim);
    border-bottom: 1px solid var(--green-dim);
    opacity: 0;
    transition: opacity 1.2s;
}
.hud .title-card.show { opacity: 1; }
.hud .title-card h2 { margin: 0; font: 400 clamp(22px, 6.4vw, 54px) var(--stencil); color: var(--white); letter-spacing: 0.06em; text-shadow: 0 0 20px rgba(51, 255, 74, 0.6); }
.hud .title-card p { margin: 10px 0 0; color: var(--green); font-size: clamp(12px, 3.2vw, 16px); letter-spacing: 0.08em; }

/* ---------- mission order ---------- */
.order {
    width: min(680px, 100%);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: clamp(16px, 4.5vw, 32px);
    background: var(--paper);
    color: var(--ink);
    font-family: var(--type);
    text-align: left;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    animation: slideIn 0.9s cubic-bezier(.2, .8, .2, 1) both;
    transform: rotate(-0.6deg);
}
.order h2 { margin: 0 0 4px; font: 400 clamp(20px, 5.6vw, 34px) var(--stencil); letter-spacing: 0.06em; }
.order .cls { font: 12px var(--mono); letter-spacing: 0.2em; color: #c21d1d; border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin-bottom: 10px; }
.order .row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 10px; padding: 6px 0; font-size: clamp(13px, 3.4vw, 17px); border-bottom: 1px dotted rgba(0, 0, 0, 0.25); }
.order .row .k { font-family: var(--mono); letter-spacing: 0.04em; }
.order .gap { height: 10px; }
.redact { position: relative; }
.redact::after {
    content: '';
    position: absolute;
    inset: -1px -3px;
    background: var(--ink);
    transform-origin: right;
    transition: transform 0.55s cubic-bezier(.7, 0, .3, 1);
}
.redact.off::after { transform: scaleX(0); }
.order .closing { margin-top: 18px; font-size: clamp(15px, 3.8vw, 19px); min-height: 2.8em; }
.order .actions { text-align: center; }
.order .btn { border-color: var(--ink); color: var(--ink); background: transparent; box-shadow: none; animation: none; font-weight: bold; }
.order .btn:hover, .order .btn:focus-visible { background: var(--ink); color: var(--paper); }

/* ---------- equipment ---------- */
.crate {
    width: min(520px, 100%);
    border: 4px double var(--green-dim);
    background: repeating-linear-gradient(45deg, rgba(51, 255, 74, 0.05) 0 12px, transparent 12px 24px), var(--panel);
    padding: clamp(18px, 5vw, 30px);
    text-align: left;
    animation: crtOn 0.45s ease-out both;
}
.crate h2 { margin: 0 0 16px; text-align: center; font: 400 clamp(20px, 5.4vw, 32px) var(--stencil); letter-spacing: 0.12em; }

.crate ul { list-style: none; margin: 0; padding: 0; }
.crate li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 8px 0; border-bottom: 1px dashed rgba(51, 255, 74, 0.2); font-size: clamp(14px, 3.8vw, 18px); color: var(--white); }
.crate li .box { color: var(--green-dim); width: 1em; }
.crate li .box.on { color: var(--green); text-shadow: 0 0 8px rgba(51, 255, 74, 0.8); }
.crate li .item { flex: 1 1 auto; }
.crate li .note { flex: 0 0 auto; margin-left: auto; font-size: 0.85em; color: var(--green-dim); }
.crate li .note.red { color: var(--red); }
.crate .lines { margin-top: 18px; font-size: clamp(14px, 3.6vw, 17px); line-height: 1.6; min-height: 5em; color: var(--white); }

/* ---------- self-destruct ---------- */
.destruct .warn { font-size: clamp(16px, 4.4vw, 24px); letter-spacing: 0.06em; min-height: 1.4em; }
.destruct .count { font: 400 clamp(90px, 30vw, 220px) var(--stencil); line-height: 1; margin-top: 20px; }
/* the end of the self-destruct: the picture squeezes into a bright line, then a dot, then dark – a CRT switching off */
#stage.crtoff > * { animation: squash 0.3s ease-in forwards; }
@keyframes squash { to { transform: scaleY(0.01); filter: brightness(3); } }
#stage.crtoff::after {
    content: '';
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #eaffea;
    box-shadow: 0 0 24px #eaffea;
    animation: crtoff 0.9s ease-in forwards;
}
@keyframes crtoff {
    0%   { width: 100vw; height: 100vh; opacity: 0; }
    30%  { width: 100vw; height: 3px; opacity: 0.95; }
    65%  { width: 6px; height: 3px; opacity: 1; border-radius: 0; }
    100% { width: 6px; height: 6px; opacity: 0; border-radius: 50%; }
}

.final h1 { margin: 0; font: 400 clamp(26px, 7.4vw, 60px) var(--stencil); color: var(--white); letter-spacing: 0.04em; text-shadow: 0 0 24px rgba(51, 255, 74, 0.45); }
.final p { margin-top: 18px; font-size: clamp(15px, 4vw, 21px); color: var(--green); }
.final p::after { content: '▌'; margin-left: 4px; animation: blink 1s steps(1) infinite; }
.final .replay { margin-top: 48px; background: none; border: 0; color: var(--green-dim); font: 15px var(--mono); letter-spacing: 0.12em; cursor: pointer; }
.final .replay:hover { color: var(--green); }

/* larger screens: scale the cards up (the map and the scrolling order sheet size themselves) */
@media (min-width: 900px) and (min-height: 640px) {
    #stage > .countdown, #stage > .panel, #stage > .boot, #stage > .dossier, #stage > section > .rec,
    #stage > section > .clue-caption, #stage > .crate, #stage > .destruct, #stage > .final { zoom: 1.45; }
    .order { width: min(820px, 100%); }
    .order .row { font-size: 19px; }
    .order .closing { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
    .radar, .btn, body.glitch #stage, body.quake #stage, .scanlines, .scanlines::after, .rec::after { animation: none !important; }
}

/* ---------- additions: green dot, book cover, locked row ---------- */
.gdot {
    display: inline-block;
    width: 0.62em;
    height: 0.62em;
    margin: 0 0.45em;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 10px var(--green);
    vertical-align: 0.05em;
    animation: gdot 1.6s ease-in-out infinite;
}
@keyframes gdot { 50% { opacity: 0.35; box-shadow: 0 0 2px var(--green); } }
.final .gdot { width: 16px; height: 16px; margin-bottom: 22px; }

.rec.tall { aspect-ratio: auto; height: min(62vh, 520px); }
.prop.with-book { display: flex; align-items: center; justify-content: center; gap: 6%; width: 100%; }
.prop.with-book .phone { width: 36%; }
.book {
    width: 34%;
    max-height: 80%;
    object-fit: contain;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(51, 255, 74, 0.3);
    transform: rotate(3deg);
    animation: zoomIn 0.8s ease both;
}


.redact.locked { color: #c21d1d; font-family: var(--stencil); letter-spacing: 0.08em; }

/* ---------- login: name + password; reveal scene ---------- */
.login input[type="password"] { letter-spacing: 0.4em; }
.login label + input + label { margin-top: 4px; }
.reveal { display: flex; flex-direction: column; align-items: center; width: 100%; }
.reveal-key { font: 400 clamp(28px, 8vw, 56px) var(--stencil); letter-spacing: 0.16em; margin-bottom: 18px; }
.reveal .book { width: auto; max-width: min(320px, 70vw); max-height: 52vh; }

/* ---------- agent profile (why this agent) ---------- */
.profile {
    width: min(680px, 100%);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: clamp(16px, 4.5vw, 30px);
    border: 4px double var(--green);
    background: var(--panel);
    box-shadow: 0 0 34px rgba(51, 255, 74, 0.12), inset 0 0 26px rgba(51, 255, 74, 0.06);
    text-align: left;
    animation: crtOn 0.45s ease-out both;
}
/* inverted title bar, like the login window */
.profile .top {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px;
    margin: calc(-1 * clamp(16px, 4.5vw, 30px)) calc(-1 * clamp(16px, 4.5vw, 30px)) 0;
    padding: 5px 12px;
    background: var(--green); color: var(--bg);
    font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-shadow: none;
}
.profile .top span:first-child { color: var(--bg); }
.profile .intro { margin: 12px 0 0; min-height: 1.4em; font-size: clamp(14px, 3.7vw, 17px); color: var(--white); }
.profile ol { list-style: none; margin: 12px 0 0; padding: 0; counter-reset: trait; display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.profile li {
    counter-increment: trait;
    padding: 8px 12px 9px;
    background: rgba(51, 255, 74, 0.045);
    border-left: 3px solid var(--green-dim);
    transition: border-color 0.3s, background 0.3s;
    animation: fadeIn 0.5s ease both;
}
.profile li.on { border-left-color: var(--green); background: rgba(51, 255, 74, 0.09); }
.profile li .k { display: block; font-size: 11px; letter-spacing: 0.18em; color: var(--green); }
.profile li .k::before { content: '[' counter(trait, decimal-leading-zero) ']'; margin-right: 10px; letter-spacing: 0.04em; color: var(--green-dim); }
.profile li .v { display: block; margin-top: 4px; min-height: 1.45em; font-size: clamp(13px, 3.4vw, 15px); line-height: 1.45; color: var(--white); }
.profile li.classified { border-left-color: var(--red); background: rgba(255, 59, 59, 0.06); }
.profile li.classified .k { color: var(--red); }
.profile li .v.blocked { color: var(--red); font-family: var(--stencil); letter-spacing: 0.08em; }
.profile .verdict { margin-top: 14px; padding: 6px 10px; text-align: center; font: 400 clamp(14px, 3.8vw, 19px) var(--stencil); letter-spacing: 0.08em; color: var(--green); border: 2px solid var(--green); text-shadow: 0 0 12px rgba(51, 255, 74, 0.6); opacity: 0; }
.profile .verdict.show { animation: thump 0.35s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes thump { from { opacity: 0; transform: scale(1.8); } to { opacity: 1; transform: none; } }
.profile .verdict-line { margin-top: 8px; min-height: 1.4em; font-size: 14px; text-align: center; color: var(--white); }
.profile .actions { text-align: center; padding-bottom: 48px; }
.profile .actions .btn { margin-top: 16px; }
@media (min-width: 900px) and (min-height: 640px) {
    .profile { width: min(820px, 100%); }
    .profile .actions { padding-bottom: 0; }
    .profile .verdict-line { font-size: 16px; }
    .profile .top { font-size: 13px; }
    .profile .intro { font-size: 19px; }
    .profile ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .profile li { padding: 9px 14px 10px; }
    .profile li .k { font-size: 12px; }
    .profile li .v { font-size: 15.5px; }
}

/* ---------- boot screen (replaces the old matrix rain before the identification) ---------- */
.boot { width: min(620px, 100%); text-align: left; font-size: clamp(15px, 4.1vw, 19px); line-height: 1.7; color: var(--green); }
.boot .l { min-height: 1.7em; white-space: pre-wrap; }
.boot .l.dim { color: var(--green-dim); }