@import url("https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&display=swap");

/* ═══════════════════════════════════════════════════════════
   DESIGN SYSTEM — FREQUENCY
   Terminal. Police command center. 4am. Not a website.
═══════════════════════════════════════════════════════════ */

:root {
    /* backgrounds */
    --bg: #07070f;
    --bg2: #0d0d1a;
    --bg3: #121224;

    /* signal colors */
    --green: #00e676;
    --amber: #ffb300;
    --red: #ff3d5a;
    --cyan: #00e5ff;

    /* structure */
    --dim: #1a1a30;
    --border: #181830;

    /* text */
    --txt: #c0c0d8;
    --txt2: #44445a;

    /* font stacks */
    --hud: "Orbitron", monospace;
    --mono: "Share Tech Mono", monospace;
}

/* ═══════════════════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bg);
    color: var(--txt);
    font-family: var(--mono);
}

/* ═══════════════════════════════════════════════════════════
   SHARED OVERLAYS
═══════════════════════════════════════════════════════════ */

/* Scanlines — applied to title screen and scene zone */
.scanlines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.12) 2px,
        rgba(0, 0, 0, 0.12) 4px
    );
}

/* ═══════════════════════════════════════════════════════════
   TITLE SCREEN
═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   TITLE SCREEN — pure CSS, atmospheric layered backdrop
═══════════════════════════════════════════════════════════ */

#title-screen {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #07070f;
    background-image:
        radial-gradient(ellipse 50% 40% at 50% 50%, rgba(0, 229, 255, 0.06) 0%, transparent 70%),
        linear-gradient(rgba(0, 229, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 229, 255, 0.04) 1px, transparent 1px);
    background-size: 100% 100%, 48px 48px, 48px 48px;
    background-position: 0 0, 0 0, 0 0;
    background-repeat: no-repeat, repeat, repeat;
}

.title-scanlines {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.15) 2px,
        rgba(0, 0, 0, 0.15) 4px
    );
}

.title-card {
    position: relative;
    z-index: 2;
    width: 600px;
    padding: 56px 64px;
    box-sizing: border-box;
    background: rgba(10, 10, 20, 0.95);
    border-top: 1px solid rgba(0, 229, 255, 0.4);
    border-bottom: 1px solid rgba(0, 229, 255, 0.4);
    border-left: 1px solid rgba(0, 229, 255, 0.15);
    border-right: 1px solid rgba(0, 229, 255, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    animation: fadeup 1s ease both;
}

/* Glowing horizontal lines above and below the card */
.title-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #00e5ff, transparent);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.8);
    pointer-events: none;
}
.title-card::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #00e5ff, transparent);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.8);
    pointer-events: none;
}

.t-eyebrow {
    margin: 0 0 32px 0;
    font-family: "Share Tech Mono", monospace;
    font-size: 8px;
    color: #7a7a9a;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.t-logo {
    display: block;
    width: 100%;
    margin: 0 0 4px 0;
    padding: 0;
    font-family: "Orbitron", sans-serif;
    font-weight: 900;
    font-size: clamp(28px, 7.5vw, 52px);
    color: #00e5ff;
    letter-spacing: 0.1em;
    text-align: center;
    text-indent: 0.1em; /* offset trailing letter-spacing so glyphs center optically */
    line-height: 1;
    text-shadow: 0 0 60px rgba(0, 229, 255, 0.4);
    white-space: nowrap;
}

.t-sub {
    margin: 0 0 4px 0;
    font-family: "Share Tech Mono", monospace;
    font-size: 9px;
    color: #ffb300;
    letter-spacing: 0.4em;
    text-transform: uppercase;
}

.t-status {
    margin: 0 0 28px 0;
    font-family: "Share Tech Mono", monospace;
    font-size: 8px;
    color: #7a7a9a;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.t-rule {
    width: 100%;
    height: 1px;
    margin: 0 0 28px 0;
    background: linear-gradient(90deg, transparent, #1a1a30, #1a1a30, transparent);
}

.t-body {
    margin: 0 0 32px 0;
    font-family: "Share Tech Mono", monospace;
    font-size: 13px;
    color: #8a8aaa;
    line-height: 2.6;
    text-align: center;
}

.t-incoming {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 24px 0;
}

.t-incoming .dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #ffb300;
    animation: pulse-dot 1s step-start infinite;
}

.t-incoming .text {
    font-family: "Share Tech Mono", monospace;
    font-size: 8px;
    color: #ffb300;
    letter-spacing: 0.2em;
}

@keyframes pulse-dot {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0.2; }
}

.t-btn {
    margin: 0 0 20px 0;
    font-family: "Orbitron", sans-serif;
    font-weight: 700;
    font-size: 12px;
    color: #07070f;
    background: #00e5ff;
    border: none;
    padding: 16px 52px;
    cursor: pointer;
    letter-spacing: 0.2em;
    clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
    transition: transform 0.1s, background 0.1s;
}
.t-btn:hover {
    background: #ffffff;
    transform: scale(1.02);
}

.t-note {
    margin: 0;
    font-family: "Share Tech Mono", monospace;
    font-size: 7px;
    color: #6a6a8a;
    letter-spacing: 0.15em;
}

@keyframes fadeup {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════
   ENDING SCREEN reuses .title-wrap / .title-corners / .title-eyebrow
   / .title-rule / .btn-initiate — kept below for that purpose only
═══════════════════════════════════════════════════════════ */

.title-wrap {
    position: relative;
    border: 1px solid var(--dim);
    background: var(--bg2);
    padding: 52px 72px;
    text-align: center;
    animation: fadeup 0.8s ease forwards;
}
.title-wrap::before,
.title-wrap::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    pointer-events: none;
}
.title-wrap::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--cyan);
    border-left: 1px solid var(--cyan);
}
.title-wrap::after {
    top: -1px;
    right: -1px;
    border-top: 1px solid var(--cyan);
    border-right: 1px solid var(--cyan);
}
.title-corners {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.title-corners::before,
.title-corners::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
}
.title-corners::before {
    bottom: -1px;
    left: -1px;
    border-bottom: 1px solid var(--cyan);
    border-left: 1px solid var(--cyan);
}
.title-corners::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--cyan);
    border-right: 1px solid var(--cyan);
}
.title-eyebrow {
    font-family: var(--mono);
    font-size: 7px;
    letter-spacing: 0.3em;
    color: var(--txt2);
    text-transform: uppercase;
    margin-bottom: 22px;
}
.title-rule {
    width: 100%;
    height: 1px;
    background: var(--dim);
    margin-bottom: 26px;
}
.btn-initiate {
    display: block;
    margin: 0 auto 22px;
    font-family: var(--hud);
    font-size: 8px;
    font-weight: 700;
    color: var(--bg);
    background: var(--cyan);
    border: none;
    padding: 10px 30px;
    cursor: pointer;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
    transition: background 0.1s;
}
.btn-initiate:hover {
    background: #33eeff;
}

/* ═══════════════════════════════════════════════════════════
   GAME SCREEN  (structure — detailed styling in M2/M3)
═══════════════════════════════════════════════════════════ */

#game-screen {
    display: none;
    width: 100vw;
    height: 100vh;
    flex-direction: column;
    overflow: hidden;
}
#game-screen.active {
    display: flex;
}

/* ── Topbar ──────────────────────────────────────────── */
#topbar {
    height: 42px;
    min-height: 42px;
    background: var(--bg3);
    border-bottom: 1px solid var(--cyan);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    z-index: 50;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Status dot — 7px square (not circle), blinks */
.status-dot {
    width: 7px;
    height: 7px;
    background: var(--green);
    animation: status-blink 1.3s step-start infinite;
}

.topbar-logo {
    font-family: var(--hud);
    font-weight: 700;
    font-size: 13px;
    color: var(--cyan);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.topbar-timer {
    font-family: var(--hud);
    font-weight: 700;
    font-size: 15px;
    color: var(--amber);
    letter-spacing: 0.1em;
}

.act-tag {
    font-family: var(--hud);
    font-size: 9px;
    font-weight: 400;
    color: var(--cyan);
    border: 1px solid var(--cyan);
    padding: 3px 8px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.act-tag.alert {
    color: var(--red);
    border-color: var(--red);
    animation: alertpulse 0.8s step-start infinite;
}

/* ── Scene zone ──────────────────────────────────────── */
#scene-zone {
    position: relative;
    height: 45vh;
    min-height: 45vh;
    max-height: 45vh;
    overflow: hidden;
    background: var(--bg);
}

.scene-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    opacity: 1;
    filter: brightness(1.0) contrast(1.1);
    transition: opacity 0.5s ease;
}

/* Vignette — scene zone only (reduced for pixel art visibility) */
.vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    opacity: 0.5;
    background: radial-gradient(
        ellipse at 50% 50%,
        transparent 30%,
        rgba(0, 0, 0, 0.75) 100%
    );
}

/* Scene tint — driven by emotion state */
.scene-tint {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 11;
}

/* ── Bottom UI ───────────────────────────────────────── */
#bottom-ui {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    border-top: 1px solid var(--border);
}

/* ── Left panel ──────────────────────────────────────── */
#left-panel {
    width: 210px;
    min-width: 210px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    border-right: 1px solid var(--border);
    overflow: hidden;
}

/* ── Right panel ─────────────────────────────────────── */
#right-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Panels ──────────────────────────────────────────── */
.panel {
    border: 1px solid var(--border);
    background: var(--bg2);
    padding: 8px 10px;
}

.plabel {
    font-family: var(--mono);
    font-size: 6px;
    letter-spacing: 0.25em;
    color: var(--txt2);
    text-transform: uppercase;
    margin-bottom: 7px;
}

/* ── Voice analysis ──────────────────────────────────── */
#panel-voice {
    flex: 1;
}

#waveform {
    display: block;
    width: 100%;
    height: 48px;
    margin-bottom: 8px;
}

.stab-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}

.stab-label {
    font-family: var(--mono);
    font-size: 6px;
    letter-spacing: 0.2em;
    color: var(--txt2);
    text-transform: uppercase;
    min-width: 28px;
}

.stab-track {
    flex: 1;
    height: 4px;
    background: var(--dim);
}

.stab-fill {
    height: 100%;
    background: var(--green);
    transition:
        width 0.8s ease,
        background 0.3s;
}

.stab-val {
    font-family: var(--mono);
    font-size: 7px;
    color: var(--txt);
    min-width: 26px;
    text-align: right;
}

.state-pill {
    font-family: var(--mono);
    font-size: 6px;
    letter-spacing: 0.2em;
    color: var(--green);
    border: 1px solid var(--green);
    padding: 1px 5px;
    text-transform: uppercase;
}

/* ── Trust blocks ────────────────────────────────────── */
#panel-trust {
    flex-shrink: 0;
}

.trust-blocks {
    display: flex;
    gap: 4px;
    margin-bottom: 5px;
}

.trust-block {
    width: 18px;
    height: 12px;
    border: 1px solid var(--dim);
    background: var(--bg);
}
.trust-block.on {
    background: var(--green);
    border-color: var(--green);
}
.trust-block.bad {
    background: var(--red);
    border-color: var(--red);
}

.trust-label {
    font-family: var(--mono);
    font-size: 6px;
    letter-spacing: 0.2em;
    color: var(--txt2);
    text-transform: uppercase;
}

/* ── Operator ID ─────────────────────────────────────── */
#panel-id {
    flex-shrink: 0;
}

.op-name {
    font-family: var(--hud);
    font-size: 9px;
    font-weight: 700;
    color: var(--txt);
    letter-spacing: 0.15em;
    margin-bottom: 3px;
}

.op-role {
    font-family: var(--mono);
    font-size: 7px;
    color: var(--txt2);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ── Transcript ──────────────────────────────────────── */
#panel-transcript {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.transcript-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--dim) transparent;
}
.transcript-scroll::-webkit-scrollbar {
    width: 3px;
}
.transcript-scroll::-webkit-scrollbar-thumb {
    background: var(--dim);
}

.t-line {
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.9;
    margin-bottom: 3px;
    animation: linein 0.3s ease forwards;
}
.t-line .ts {
    color: var(--txt2);
    margin-right: 4px;
}
.t-line .who {
    margin-right: 4px;
    letter-spacing: 0.05em;
}
.t-line.him {
    color: #ffb300;
    font-weight: 700;
}
.t-line.you {
    color: var(--txt2);
}
.t-line.sys {
    color: var(--txt2);
    opacity: 0.5;
    font-style: italic;
}

/* ── Choices ─────────────────────────────────────────── */
#panel-choices {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

#choices-area {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 6px;
}

.choice-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
    padding: 8px 10px;
    cursor: pointer;
    transition:
        border-color 0.1s,
        background 0.1s;
    font-family: var(--mono);
    font-size: 9px;
    color: var(--txt);
    letter-spacing: 0.03em;
    line-height: 1.5;
}
.choice-item:hover {
    border-color: var(--cyan);
    background: var(--bg3);
}
.choice-item.selected {
    border-color: var(--green);
    background: rgba(0, 230, 118, 0.05);
}
.choice-item.selected .choice-text {
    color: var(--green);
}
.choice-item.danger.selected {
    border-color: var(--red);
    background: rgba(255, 61, 90, 0.05);
}
.choice-item.danger.selected .choice-text {
    color: var(--red);
}

.choice-key {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--txt2);
    min-width: 20px;
}
.choice-arrow {
    color: var(--green);
    visibility: hidden;
}
.choice-item.selected .choice-arrow {
    visibility: visible;
}

/* Confirm button */
.confirm-row {
    display: flex;
    justify-content: flex-end;
}

.btn-confirm {
    font-family: var(--hud);
    font-size: 8px;
    font-weight: 700;
    color: var(--bg);
    background: var(--green);
    border: none;
    padding: 7px 16px;
    cursor: pointer;
    letter-spacing: 0.15em;
    clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
    transition: background 0.1s;
}
.btn-confirm:hover {
    background: #fff;
}
.btn-confirm:disabled {
    background: var(--dim);
    color: var(--txt2);
    cursor: not-allowed;
}
.btn-confirm.danger {
    background: var(--red);
}

/* ── Processing state ────────────────────────────────── */
#processing-area {
    display: none;
    padding: 8px 10px;
}
#processing-area.active {
    display: block;
}
.processing-text {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--cyan);
    letter-spacing: 0.2em;
    animation: proc-blink 0.9s step-start infinite;
}

/* ═══════════════════════════════════════════════════════════
   ANIMATIONS  (only those approved in UI.md)
═══════════════════════════════════════════════════════════ */

@keyframes status-blink {
    0%,
    74% {
        opacity: 1;
    }
    75%,
    100% {
        opacity: 0.2;
    }
}

@keyframes alertpulse {
    0%,
    49% {
        opacity: 1;
    }
    50%,
    100% {
        opacity: 0.5;
    }
}

@keyframes strobe {
    0%,
    49% {
        opacity: 1;
    }
    50%,
    100% {
        opacity: 0.4;
    }
}

@keyframes proc-blink {
    0%,
    74% {
        opacity: 1;
    }
    75%,
    100% {
        opacity: 0.3;
    }
}

@keyframes linein {
    from {
        opacity: 0;
        transform: translateX(-4px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ═══════════════════════════════════════════════════════════
   MIC BUTTON  — 48×48, no border-radius, terminal key aesthetic
═══════════════════════════════════════════════════════════ */

/* mic-row sits between processing area and confirm-row */
.mic-row {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

/* Default hidden — initMic() sets display:flex if mediaDevices available */
.btn-mic {
    display: none;
    width: 48px;
    height: 48px;
    border: 1px solid var(--cyan);
    background: var(--bg);
    color: var(--cyan);
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0;
    transition:
        border-color 0.1s,
        color 0.1s;
}

.btn-mic .mic-icon {
    font-size: 14px;
    line-height: 1;
}

.btn-mic .mic-label {
    font-family: var(--hud);
    font-size: 5px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* Recording — red border + pulse animation + LISTENING label */
.btn-mic.recording {
    border-color: var(--red);
    color: var(--red);
    animation: mic-pulse 0.8s step-start infinite;
}

/* Processing — amber, ANALYZING label, no animation */
.btn-mic.processing {
    border-color: var(--amber);
    color: var(--amber);
}

@keyframes mic-pulse {
    0%,
    49% {
        opacity: 1;
    }
    50%,
    100% {
        opacity: 0.4;
    }
}

/* ═══════════════════════════════════════════════════════════
   ENDING SCREEN
═══════════════════════════════════════════════════════════ */

#ending-screen {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 300;
    overflow: hidden;
}

/* Scene image fills entire ending screen */
.ending-scene {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

/* Dark overlay — opacity set by JS (0.75 for A, 0.80 for B) */
.ending-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.ending-outer {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* .title-wrap reused for the box — corner brackets come for free */
/* Override padding slightly for ending content */
#ending-screen .title-wrap {
    padding: 48px 64px;
    min-width: 420px;
    max-width: 560px;
}

/* Big title — color set by JS (green for A, red for B) */
.ending-title-text {
    font-family: var(--hud);
    font-weight: 900;
    font-size: clamp(28px, 4vw, 48px);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 20px;
    /* color injected via JS */
}

/* Three-paragraph quiet body copy */
.ending-body {
    font-family: var(--mono);
    font-size: 10px;
    line-height: 2.1;
    color: var(--txt);
    letter-spacing: 0.05em;
    margin-bottom: 32px;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════════════════ */

@keyframes scene-fade {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* ═══════════════════════════════════════════════════════════
   POLISH PASS — bottom UI, mic, transcript
═══════════════════════════════════════════════════════════ */

/* ── Bottom UI overhaul — terminal dashboard feel ── */

/* Left panel — set fixed width 220 and breathing gaps */
#left-panel {
    width: 220px;
    min-width: 220px;
    gap: 8px;
    padding: 8px;
    border-right: 1px solid var(--border);
}

.panel { padding: 10px 12px; }

.plabel       { font-size: 8px; letter-spacing: 0.28em; color: var(--cyan); margin-bottom: 8px; }
.stab-label   { font-size: 8px; }
.stab-val     { font-size: 11px; }
.state-pill   { font-size: 11px; padding: 4px 12px; }
.trust-label  { font-size: 9px; margin-top: 4px; }
.op-name      { font-size: 13px; }
.op-role      { font-size: 8px; }
.choice-key   { font-size: 11px; min-width: 22px; }

/* Voice analysis */
#waveform { height: 56px; margin-bottom: 10px; }
.stab-row { gap: 8px; margin-bottom: 7px; }
.stab-track { height: 6px; }

/* Trust blocks bigger */
.trust-block { width: 22px; height: 14px; }
.trust-blocks { gap: 5px; margin-bottom: 6px; }

/* Right panel padding */
#right-panel { gap: 8px; padding: 8px; }
#panel-transcript { padding: 10px 14px; }

/* Transcript */
.transcript-scroll { padding-right: 4px; }
.t-line          { font-size: 11px; line-height: 2.0; margin-bottom: 4px; }
.t-line.him      { color: #ffb300; font-weight: 700; }
.t-line.you      { color: #888aa0; }
.t-line.sys      { color: var(--txt2); opacity: 0.55; font-style: italic; }

/* Choices */
.choice-item {
    font-size: 11px;
    padding: 12px 16px;
    border: 1px solid #181830;
    background: var(--bg);
    width: 100%;
    line-height: 1.5;
    transition: border-color 0.1s, background 0.1s;
}
.choice-item.selected {
    border: 1px solid #181830;
    border-left: 3px solid var(--cyan);
    background: rgba(0, 229, 255, 0.04);
    padding-left: 14px;
}
.choice-item.selected .choice-text { color: var(--cyan); }
.choice-item.danger.selected {
    border-left: 3px solid var(--red);
    background: rgba(255, 61, 90, 0.04);
}
.choice-item.danger.selected .choice-text { color: var(--red); }

/* Confirm row → bottom right */
.confirm-row { justify-content: flex-end; margin-top: 6px; }
.btn-confirm {
    font-family: var(--hud);
    font-size: 10px;
    padding: 10px 28px;
    letter-spacing: 0.2em;
}
.processing-text { font-size: 10px; }

/* Topbar: CALL ACTIVE blinking indicator */
.call-active-badge {
    font-family: var(--hud);
    font-size: 9px;
    font-weight: 700;
    color: var(--green);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 2px 8px;
    border: 1px solid var(--green);
    animation: call-active-blink 1.2s step-start infinite;
}

@keyframes call-active-blink {
    0%, 64%   { opacity: 1; }
    65%, 100% { opacity: 0.35; }
}

/* ═══════════════════════════════════════════════════════════
   MIC BUTTON — full-width rectangular [ ● SPEAK ] in left panel
═══════════════════════════════════════════════════════════ */
.btn-mic {
    display: none;
    width: 100%;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--cyan);
    background: transparent;
    color: var(--cyan);
    cursor: pointer;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: auto;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.btn-mic:hover { background: rgba(0, 229, 255, 0.06); }

.btn-mic .mic-label {
    font-family: var(--hud);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.btn-mic.recording {
    border-color: var(--red);
    color: var(--red);
    animation: mic-border-pulse 0.9s ease-in-out infinite;
}
.btn-mic.processing {
    border-color: var(--amber);
    color: var(--amber);
}

@keyframes mic-border-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 61, 90, 0.6); }
    50%      { box-shadow: 0 0 0 4px rgba(255, 61, 90, 0); }
}

/* ═══════════════════════════════════════════════════════════
   CRT MONITOR FLICKER — 3 small overlays on scene
═══════════════════════════════════════════════════════════ */
.crt-flicker {
    position: absolute;
    width: 60px;
    height: 45px;
    pointer-events: none;
    z-index: 12;
    background: rgba(0, 229, 255, 0.04);
    mix-blend-mode: screen;
    animation: crt-flicker 3s step-start infinite;
}
.crt-1 { left: 14%; top: 38%; animation-delay: 0s;   }
.crt-2 { left: 22%; top: 46%; animation-delay: 0.7s; }
.crt-3 { left: 30%; top: 42%; animation-delay: 1.4s; }

@keyframes crt-flicker {
    0%   { opacity: 0.04; }
    12%  { opacity: 0.06; }
    27%  { opacity: 0.02; }
    41%  { opacity: 0.05; }
    55%  { opacity: 0.03; }
    68%  { opacity: 0.06; }
    79%  { opacity: 0.02; }
    91%  { opacity: 0.05; }
    100% { opacity: 0.03; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — tablet & mobile
═══════════════════════════════════════════════════════════ */

/* Tablet ≤ 900px */
@media (max-width: 900px) {
    .title-card { width: calc(100% - 32px); max-width: 560px; padding: 44px 36px; }
    .t-logo    { font-size: clamp(40px, 11vw, 56px); }
    .t-body    { font-size: 12px; line-height: 2.2; }

    #scene-zone { height: 38vh; min-height: 38vh; max-height: 38vh; }
    #left-panel, #left-panel.left-panel { width: 180px; min-width: 180px; }
}

/* Mobile ≤ 640px — single-page layout, no page scroll */
@media (max-width: 640px) {
    html, body { height: 100%; overflow: hidden; }

    .title-card {
        width: calc(100% - 24px);
        padding: 36px 24px;
        border-left-width: 1px;
        border-right-width: 1px;
    }
    .title-card::before, .title-card::after { left: 6%; right: 6%; }
    .t-eyebrow { font-size: 7px; letter-spacing: 0.25em; margin-bottom: 24px; }
    .t-sub     { font-size: 8px; letter-spacing: 0.3em; }
    .t-status  { font-size: 7px; letter-spacing: 0.18em; margin-bottom: 22px; }
    .t-body    { font-size: 11px; line-height: 2.0; margin-bottom: 24px; }
    .t-incoming .text { font-size: 7px; }
    .t-btn     { font-size: 10px; padding: 14px 36px; letter-spacing: 0.18em; }
    .t-note    { font-size: 6px; }

    /* Game screen — locked to viewport, no scroll */
    #game-screen.active {
        height: 100vh;
        height: 100dvh; /* dynamic viewport on mobile browsers */
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    #topbar { height: 36px; min-height: 36px; padding: 0 10px; flex: 0 0 36px; }
    .topbar-logo  { font-size: 11px; }
    .topbar-timer { font-size: 12px; }
    .act-tag      { font-size: 8px; padding: 2px 6px; }

    /* Scene compact */
    #scene-zone {
        flex: 0 0 26vh;
        height: 26vh;
        min-height: 0;
        max-height: 26vh;
        aspect-ratio: auto;
    }

    /* Bottom-ui fills remainder */
    #bottom-ui {
        flex: 1 1 auto;
        flex-direction: column;
        overflow: hidden;
        min-height: 0;
    }

    /* Left panel: thin horizontal status strip */
    #left-panel, #left-panel.left-panel {
        width: 100%; min-width: 0;
        flex: 0 0 auto;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 6px;
        padding: 6px;
        border-right: none;
        border-bottom: 1px solid var(--border);
        overflow: hidden;
    }
    #left-panel #panel-voice { flex: 1 1 auto; min-width: 0; }
    #left-panel #panel-trust { flex: 0 0 auto; }
    #left-panel #panel-id    { display: none; }
    #left-panel #waveform    { display: none; }
    #left-panel .stab-row    { margin-bottom: 4px; }
    #left-panel .btn-mic {
        flex: 0 0 110px;
        align-self: stretch;
        padding: 4px 8px;
        font-size: 11px;
    }
    #left-panel .trust-blocks { margin-bottom: 2px; }
    #left-panel .trust-block  { width: 14px; height: 10px; }
    #left-panel .plabel { font-size: 7px; margin-bottom: 4px; }

    /* Right panel: transcript scrolls, choices scroll, transmit pinned */
    #right-panel {
        flex: 1 1 auto;
        flex-direction: column;
        padding: 6px;
        gap: 6px;
        overflow: hidden;
        min-height: 0;
    }
    #panel-transcript {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .transcript-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
    #panel-choices {
        flex: 0 0 auto;
        max-height: 42vh;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    #choices-area {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
    .choice-item { font-size: 10px; padding: 8px 12px; }
    .confirm-row {
        flex: 0 0 auto;
        margin-top: 6px;
    }

    /* Ending screen card */
    #ending-screen .title-wrap {
        width: calc(100% - 24px);
        max-width: 520px;
        padding: 36px 24px;
        box-sizing: border-box;
    }
    .ending-title-text { font-size: clamp(28px, 9vw, 44px); }
}

/* Very small ≤ 380px */
@media (max-width: 380px) {
    #left-panel .panel { flex: 1 1 100%; }
}