/* ════════════════════════════════════════════════════════════════════
   Dinosaurs: Road Trip to Altınoluk — "Meyhane lamplight" theme
   Palette is drawn from the game's own pixel art: the dusk plum of the
   Istanbul sky, the terracotta rooftops, the amber of meyhane lanterns.
   The UI's job is to frame the art like a storybook, not to dim it.
   ════════════════════════════════════════════════════════════════════ */

:root {
    /* mood-driven accent — set at runtime by updateMood() */
    --accent: #e2b25f;

    /* warm neutrals ("paper") */
    --paper-0: #171013;      /* page base — deep plum-black */
    --paper-1: #221a1e;      /* panels */
    --paper-2: #2d2228;      /* cards, bubbles */
    --paper-3: #3a2c31;      /* hover, tracks */
    --ink:      #efe4d1;     /* primary text */
    --ink-dim:  #c8b4a0;     /* secondary text */
    --ink-faint:#94806e;     /* tertiary / labels */
    --line: rgba(233, 196, 106, 0.16);       /* hairline borders */
    --line-soft: rgba(233, 196, 106, 0.09);

    /* fixed semantic colors (not mood-driven) */
    --gold:  #e9c46a;
    --amber: #dda15e;
    --ember: #c1614d;
    --sage:  #a6c186;
    --dusk:  #8fa8c8;
    --bubble-out: #3c5244;   /* your outgoing chat messages */

    /* per-character colors (chat senders, stat dots) */
    --c-egemen:  #e9c46a;
    --c-berat:   #d98555;
    --c-ogulcan: #e2725f;
    --c-omer:    #86b8a4;
    --c-ege:     #a6c186;
    --c-ilker:   #b79bd6;
    --c-alper:   #85aede;
}

/* ── Base ─────────────────────────────────────────────────── */
body {
    font-family: 'Lora', Georgia, serif;
    background:
        radial-gradient(ellipse 120% 90% at 50% 0%, #201519 0%, var(--paper-0) 70%);
    color: var(--ink);
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    box-sizing: border-box;
}

#game-container {
    width: 100%;
    height: 100vh;
    background: transparent;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ── Title screen ─────────────────────────────────────────── */
@keyframes titleFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

#title-screen {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 24px;
    overflow-y: auto;
    /* Night-road cover art under a warm vignette scrim: darker at the edges
       (dims the moon/reflection) and behind the text, so the gold UI reads. */
    background:
        radial-gradient(ellipse 115% 85% at 50% 40%,
            rgba(23, 13, 16, 0.60) 0%, rgba(23, 13, 16, 0.74) 55%, rgba(18, 10, 13, 0.92) 100%),
        url("../img/backgrounds/bg_highway_moonlit.png") center 38% / cover no-repeat;
}

#title-portrait {
    width: 100%;
    max-height: 160px;
    object-fit: contain;
    object-position: center center;
    /* The montage is a real alpha cutout now (make_group.py) — plain compositing,
       no blend hack. A soft shadow seats the faces on the night road. */
    filter: saturate(0.6) brightness(0.85) drop-shadow(0 4px 14px rgba(0, 0, 0, 0.65));
    margin-bottom: 28px;
    animation: titleFadeIn 1.2s ease both;
}

h1 {
    font-family: 'Press Start 2P', monospace;
    color: var(--gold);
    font-size: 1.8em;
    margin-bottom: 8px;
    letter-spacing: 0.04em;
    line-height: 1.4;
    animation: titleFadeIn 1s ease both;
    animation-delay: 0.3s;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.95), 0 0 24px rgba(233, 196, 106, 0.25);
}

#subtitle {
    font-size: 0.9em;
    color: var(--ink-dim);
    margin-bottom: 12px;
    letter-spacing: 0.04em;
    animation: titleFadeIn 1s ease both;
    animation-delay: 0.6s;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.95);
}

#title-tagline {
    font-family: 'Lora', serif;
    font-style: italic;
    color: var(--ink-faint);
    font-size: 0.88em;
    margin-bottom: 32px;
    letter-spacing: 0.04em;
    animation: titleFadeIn 1s ease both;
    animation-delay: 0.9s;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.95);
}

.highlight-text {
    color: var(--accent);
    font-style: italic;
    font-weight: bold;
    text-align: center;
    font-size: 1em;
    margin: 22px 0 !important;
    transition: color 0.5s ease;
}

#start-btn {
    background: linear-gradient(180deg, #f0cd7e 0%, #dfa94f 100%);
    color: #2b1c14;
    border: none;
    padding: 14px 30px;
    font-size: 0.7em;
    font-family: 'Press Start 2P', monospace;
    border-radius: 8px;
    cursor: pointer;
    transition: filter 0.2s, transform 0.2s, box-shadow 0.2s;
    margin-top: 20px;
    letter-spacing: 0.06em;
    box-shadow: 0 4px 18px rgba(224, 169, 79, 0.28);
    animation: titleFadeIn 1s ease both;
    animation-delay: 1.2s;
}

#start-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(224, 169, 79, 0.4);
}

#records-btn,
#episodes-btn,
#map-btn {
    background: rgba(23, 16, 19, 0.55);
    color: var(--gold);
    border: 1px solid rgba(233, 196, 106, 0.4);
    padding: 10px 28px;
    font-size: 0.6em;
    font-family: 'Press Start 2P', monospace;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 12px;
    letter-spacing: 0.06em;
    opacity: 0.85;
    transition: opacity 0.2s, border-color 0.2s, background 0.2s;
    animation: titleFadeIn 1s ease both;
    animation-delay: 1.4s;
}

#episodes-btn {
    animation-delay: 1.3s;
}

#records-btn {
    animation-delay: 1.5s;
}

#records-btn:hover,
#episodes-btn:hover,
#map-btn:hover {
    opacity: 1;
    border-color: var(--gold);
    background: rgba(233, 196, 106, 0.1);
}

/* ── Records + Episodes panels ────────────────────────────── */
#records-panel,
#episodes-panel,
#map-panel {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 120% 90% at 50% 0%, #241a1f 0%, var(--paper-0) 75%);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 32px 24px 24px;
    overflow-y: auto;
    z-index: 10;
}

.records-header {
    font-family: 'Press Start 2P', monospace;
    color: var(--gold);
    font-size: 1em;
    letter-spacing: 0.1em;
    margin-bottom: 28px;
}

#records-list {
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.records-card {
    padding: 12px 16px 12px 12px;
    background: var(--paper-1);
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
}

.records-card.unlocked {
    border-color: rgba(233, 196, 106, 0.45);
    border-left-width: 3px;
    background: linear-gradient(90deg, rgba(233, 196, 106, 0.07), transparent 40%), var(--paper-1);
}

.records-card.locked {
    opacity: 0.4;
}

.records-card-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.52em;
    color: var(--gold);
    letter-spacing: 0.06em;
    line-height: 1.6;
}

.records-card.locked .records-card-title {
    color: var(--ink-faint);
}

.records-card-desc {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 0.82em;
    color: var(--ink-dim);
    line-height: 1.5;
}

#records-close,
#map-close,
#episodes-close {
    background: transparent;
    color: var(--ink-faint);
    border: 1px solid var(--line);
    padding: 10px 24px;
    font-size: 0.6em;
    font-family: 'Press Start 2P', monospace;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 24px;
    letter-spacing: 0.06em;
    transition: color 0.2s, border-color 0.2s;
}

#records-close:hover,
#map-close:hover,
#episodes-close:hover {
    color: var(--gold);
    border-color: var(--gold);
}

/* ── Episode cards (Telltale-style episode select) ────────── */
#episodes-list {
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ep-card {
    background: var(--paper-1);
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    overflow: hidden;
}

.ep-card.unlocked {
    border-color: rgba(233, 196, 106, 0.35);
}

.ep-card.locked {
    opacity: 0.45;
}

.ep-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 12px 14px;
    background: transparent;
    border: none;
    text-align: left;
    color: inherit;
    font: inherit;
}

.ep-card.unlocked .ep-card-head {
    cursor: pointer;
    transition: background 0.2s;
}

.ep-card.unlocked .ep-card-head:hover {
    background: rgba(233, 196, 106, 0.07);
}

.ep-thumb {
    flex: 0 0 96px;
    height: 54px;
    border-radius: 6px;
    border: 1px solid var(--line-soft);
    background-color: #0d0709;
    background-size: cover;
    background-position: center;
}

.ep-thumb.mystery {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.8em;
    color: rgba(233, 196, 106, 0.45);
}

.ep-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ep-card-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.52em;
    color: var(--gold);
    letter-spacing: 0.06em;
    line-height: 1.6;
}

.ep-card.locked .ep-card-title {
    color: var(--ink-faint);
}

.ep-card-desc {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 0.78em;
    color: var(--ink-dim);
    line-height: 1.45;
}

.ep-play {
    flex: 0 0 auto;
    color: var(--gold);
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7em;
    opacity: 0.55;
    transition: opacity 0.2s, transform 0.2s;
}

.ep-card.unlocked .ep-card-head:hover .ep-play {
    opacity: 1;
    transform: translateX(2px);
}

/* Route discovery rows under each unlocked episode */
.ep-routes {
    border-top: 1px dashed var(--line-soft);
    padding: 10px 14px 13px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.ep-route-row {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ep-route-q {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.45em;
    color: var(--ink-faint);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ep-route-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.route-tile {
    width: 86px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.route-tile-img {
    height: 48px;
    border-radius: 5px;
    border: 1px solid var(--line-soft);
    background-color: #0d0709;
    background-size: cover;
    background-position: center 25%;
}

.route-tile.discovered .route-tile-img {
    border-color: rgba(233, 196, 106, 0.4);
}

.route-tile.mystery .route-tile-img {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7em;
    color: rgba(233, 196, 106, 0.4);
}

.route-tile-name {
    font-family: 'Lora', serif;
    font-size: 0.66em;
    color: var(--ink-dim);
    line-height: 1.25;
    text-align: center;
}

.route-tile.mystery .route-tile-name {
    color: var(--ink-faint);
}

/* ── "Kimsin sen?" overlay (telemetry.js): first-open identity prompt ───── */
#who-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(23, 16, 19, 0.82);
    backdrop-filter: blur(2px);
}
#who-card {
    background: var(--paper-1);
    border: 1px solid rgba(233, 196, 106, 0.4);
    border-radius: 12px;
    padding: 28px 32px;
    max-width: 420px;
    width: calc(100% - 48px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
}
#who-title {
    font-family: 'Press Start 2P', monospace;
    color: var(--gold);
    font-size: 0.9em;
    letter-spacing: 0.06em;
}
#who-input {
    background: var(--paper-0);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    font-family: 'Lora', serif;
    font-size: 1em;
    padding: 10px 12px;
    outline: none;
}
#who-input:focus {
    border-color: rgba(233, 196, 106, 0.5);
}
#who-btn {
    background: linear-gradient(180deg, #f0cd7e 0%, #dfa94f 100%);
    color: #2b1c14;
    border: none;
    padding: 12px 20px;
    font-size: 0.62em;
    font-family: 'Press Start 2P', monospace;
    border-radius: 8px;
    cursor: pointer;
    letter-spacing: 0.06em;
}
#who-btn:hover {
    filter: brightness(1.08);
}

/* ── Route map (map-panel): the whole trip as one flow graph ──────────────
   Columns = decision rows in play order; nodes reuse the route-tile anatomy;
   endings dock at the column where they most often occur. SVG underlay draws
   the flow edges, width ∝ simulated share. */
#map-scroll {
    width: 100%;
    overflow-x: auto;
}
#map-canvas {
    position: relative;
    margin: 0 auto;
}
#map-canvas svg {
    position: absolute;
    left: 0;
    top: 0;
}
.map-col-q {
    position: absolute;
    top: 4px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.48em;
    color: var(--ink-faint);
    letter-spacing: 0.06em;
    text-align: center;
    line-height: 1.7;
    text-transform: uppercase;
}
.map-node {
    position: absolute;
}
.map-node .route-tile {
    width: 86px;
}
.map-node.map-ending .route-tile-img {
    border-color: rgba(233, 196, 106, 0.3);
}
.map-node.map-ending .route-tile.discovered .route-tile-img {
    border-color: rgba(233, 196, 106, 0.65);
    box-shadow: 0 0 10px rgba(233, 196, 106, 0.14);
}

/* Simulated path percentages (odds.js) — Detroit-style, population of 200k
   simulated runs. Muted on mystery tiles, lamplight-gold once discovered. */
.route-tile-odds {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5em;
    text-align: center;
    letter-spacing: 0.05em;
    color: var(--ink-faint);
}
.route-tile.discovered .route-tile-odds {
    color: rgba(233, 196, 106, 0.55);
}

.records-card {
    position: relative;
}
.records-card-odds {
    position: absolute;
    top: 9px;
    right: 12px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55em;
    letter-spacing: 0.05em;
    color: var(--ink-faint);
}
.records-card.unlocked .records-card-odds {
    color: rgba(233, 196, 106, 0.55);
}

/* ── Game content wrapper ─────────────────────────────────── */
#game-content {
    display: none;       /* JS sets to 'flex' */
    flex-direction: column;
    flex: 1;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ── Portrait panel (arena) — three-column flex row ─────────── */
#portrait-panel {
    position: relative;
    width: 100%;
    /* --portrait-h is lowered by fitScene() on long/group-chat scenes to hand
       the reclaimed height to the dialogue panel so the whole scene is visible.
       NO height transition here: fitStoryToContainer() measures synchronously
       after each step, so an animated height would make every step read as
       still-overflowing and collapse the panel to its minimum. */
    height: var(--portrait-h, 58vh);
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    background: var(--paper-0);
}

/* Sidebars — flex items (NOT absolute overlays: their width is what keeps the
   portrait column at the proportions the cutouts were framed for) */
#arena-left,
#arena-right {
    flex-shrink: 0;
    width: clamp(160px, 14vw, 220px);
    padding: 48px 12px 12px 12px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    scrollbar-width: none;
    transition: width 0.3s ease, padding 0.3s ease, opacity 0.25s ease;
}
#arena-left::-webkit-scrollbar,
#arena-right::-webkit-scrollbar { display: none; }
#arena-left {
    background: linear-gradient(to right, #1c1418 0%, #241a1f 100%);
    border-right: 1px solid var(--line-soft);
}
#arena-right {
    background: linear-gradient(to left, #1c1418 0%, #241a1f 100%);
    border-left: 1px solid var(--line-soft);
}
#arena-left.hidden,
#arena-right.hidden {
    width: 0;
    padding: 0;
    opacity: 0;
    overflow: hidden;
    border-width: 0;
}

/* Stats toggle tab buttons — attached to inner edge of each sidebar */
.stats-tab {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 46px;
    background: rgba(23, 16, 19, 0.75);
    border: 1px solid rgba(233, 196, 106, 0.22);
    color: rgba(233, 196, 106, 0.45);
    cursor: pointer;
    z-index: 5;
    font-size: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    padding: 0;
}
.stats-tab:hover {
    color: var(--gold);
    border-color: var(--gold);
    background: rgba(23, 16, 19, 0.95);
}
/* Tabs live inside #portrait-panel, at the outer edges */
#stats-tab-left  { left: 0;  border-left: none;  border-radius: 0 6px 6px 0; }
#stats-tab-right { right: 0; border-right: none; border-radius: 6px 0 0 6px; }

.sidebar-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5em;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(233, 196, 106, 0.6);
}

/* Header band — ONLY the top-level sidebar label pulls up into the top padding
   and spans full width. Nested labels (e.g. "Risk" inside #risk-section) must
   NOT get the -48px pull, or they overlap the section above them. */
#arena-left > .sidebar-label,
#arena-right > .sidebar-label {
    background: rgba(233, 196, 106, 0.05);
    margin: -48px -12px 0 -12px;
    padding: 16px 12px 10px 12px;
    border-bottom: 1px solid var(--line-soft);
}

/* Nested subsection label (Risk / Fuel) — small heading above its bar */
#risk-section .sidebar-label {
    margin: 0 0 6px 0;
}

/* Center column */
#arena-center {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: var(--paper-0);
    transition: background 0.4s ease;
}

#bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    /* let the art glow — the vignette overlays handle text separation */
    filter: brightness(0.85) saturate(0.95);
    transition: opacity 0.3s ease;
    display: block;
}

#portrait-img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: calc(100% - 36px);
    margin-top: 36px;
    object-fit: contain;
    /* Portraits are alpha cutouts (tools/cutout_portraits.py) — the character
       composites straight onto the scene. Anchor to the bottom so they stand
       in it. Kept a touch brighter than the bg (speaker is "lit") with a tight
       dark halo so dark hair/clothing separates from busy scenes. */
    object-position: center bottom;
    filter: saturate(0.88) brightness(1)
            drop-shadow(0 0 16px rgba(15, 8, 11, 0.9)) drop-shadow(0 0 5px rgba(15, 8, 11, 0.85));
    transition: opacity 0.25s ease;
    display: block;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Soft warm vignette over the whole stage — keeps the frame cozy, not clinical */
#arena-center::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 105% 100% at 50% 42%,
        transparent 55%, rgba(18, 10, 13, 0.38) 100%);
    pointer-events: none;
    z-index: 2;
}

/* Bottom fade — blends the stage down into the dialogue card */
#arena-center::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        transparent 62%, rgba(23, 16, 19, 0.28) 84%, rgba(23, 16, 19, 0.66) 100%);
    pointer-events: none;
    z-index: 2;
}

/* Mood color tint overlay */
#portrait-mood-tint {
    position: absolute;
    inset: 0;
    background: var(--accent);
    opacity: 0.07;
    pointer-events: none;
    transition: background 0.5s ease;
    z-index: 2;
    mix-blend-mode: soft-light;
}

/* Narrator / no portrait — only dims the center column */
#portrait-panel.narrator-mode #arena-center {
    background: var(--paper-0);
}

#portrait-panel.narrator-mode #portrait-img {
    opacity: 0;
}

/* Mini-game mounts inside arena-center */
#arena-center.minigame-mode {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    /* top padding clears the HUD chips when content is tall */
    padding: 48px 16px 20px;
    background: linear-gradient(180deg, #241a1f 0%, #1c1418 100%);
}

#arena-center.minigame-mode #bg-img,
#arena-center.minigame-mode #portrait-img,
#arena-center.minigame-mode #portrait-mood-tint,
#arena-center.minigame-mode::before,
#arena-center.minigame-mode::after {
    display: none;
}

/* ── HUD — floating chips instead of a black strip ───────────── */
#hud {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px 0;
    background: transparent;
    z-index: 11;
    pointer-events: none;           /* chips re-enable their own events */
    box-sizing: border-box;
}

#hud > * { pointer-events: auto; }

#hud #time,
#hud #mood,
#hud #audio-controls {
    background: rgba(20, 12, 16, 0.66);
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    padding: 4px 12px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

#hud #time {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5em;
    letter-spacing: 0.08em;
    color: var(--ink-dim);
    text-transform: uppercase;
    line-height: 1.8;
}

#hud #mood {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5em;
    letter-spacing: 0.08em;
    color: var(--accent);
    transition: color 0.5s ease;
    text-transform: uppercase;
    line-height: 1.8;
}

/* ── Sidebar stat grids — single column ──────────────────────── */
#arena-left .stat-grid,
#arena-right .stat-grid {
    grid-template-columns: 1fr;
    gap: 7px;
}

#arena-left .char-name,
#arena-right .char-name {
    width: 54px;
}

.stat-section {
    margin-bottom: 4px;
}

.stat-section h3 {
    font-family: 'Press Start 2P', monospace;
    color: rgba(233, 196, 106, 0.6);
    font-size: 0.5em;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 6px 0;
    padding-bottom: 0;
    border-bottom: none;
    font-weight: normal;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: none;
    padding-bottom: 2px;
}

.char-name {
    color: var(--ink-dim);
    font-size: 0.74em;
    width: 52px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* tiny character-color dot before each name — same hues as the chat */
.char-name::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ink-faint);
    flex-shrink: 0;
}
#rel-berat  .char-name::before, #drunk-berat  .char-name::before { background: var(--c-berat); }
#rel-ogulcan .char-name::before, #drunk-ogulcan .char-name::before { background: var(--c-ogulcan); }
#rel-omer   .char-name::before, #drunk-omer   .char-name::before { background: var(--c-omer); }
#rel-ege    .char-name::before, #drunk-ege    .char-name::before { background: var(--c-ege); }
#rel-ilker  .char-name::before, #drunk-ilker  .char-name::before { background: var(--c-ilker); }
#rel-alper  .char-name::before, #drunk-alper  .char-name::before { background: var(--c-alper); }
#drunk-egemen .char-name::before { background: var(--c-egemen); }

/* Segmented "pip" bars — ten little cells, like an old handheld's meter.
   The mask carves both track and fill, so the engine's width% keeps working. */
.stat-bar {
    height: 7px;
    background-color: #40313a;
    border-radius: 2px;
    flex-grow: 1;
    overflow: hidden;
    -webkit-mask-image: repeating-linear-gradient(90deg,
        #000 0, #000 calc(10% - 2px), transparent calc(10% - 2px), transparent 10%);
    mask-image: repeating-linear-gradient(90deg,
        #000 0, #000 calc(10% - 2px), transparent calc(10% - 2px), transparent 10%);
}

.stat-bar-container {
    flex-grow: 1;
}

.risk-bar {
    height: 9px;
}

.stat-item .value {
    display: none;
}

.fill {
    height: 100%;
    transition: width 0.35s ease, background-color 0.35s ease;
}

#relationship-section .fill {
    background-color: var(--gold);
}

#drunkenness-section .fill {
    background-color: var(--amber);
}

#risk-level {
    background-color: #a8453a;
}

#gas-section .fill {
    background-color: var(--sage);
}

#gas-level {
    transition: width 0.5s ease, background-color 0.5s ease;
}

#gas-level.critical { background-color: var(--ember) !important; animation: pulse-critical 1.5s infinite; }
#gas-level.low      { background-color: var(--amber) !important; }
#gas-level.good     { background-color: var(--sage) !important; }

@keyframes pulse-critical {
    0%   { opacity: 1; }
    50%  { opacity: 0.55; }
    100% { opacity: 1; }
}

/* ── Dialogue panel — the storybook card ─────────────────────── */
#dialogue-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index: 3;
    background: linear-gradient(180deg, #241a1f 0%, #1d1519 100%);
    border: none;
    border-top: 1px solid var(--line);
    margin: -14px 0 0 0;             /* overlaps the stage like a VN text card */
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 30px rgba(10, 5, 8, 0.55);
}

#story-container {
    flex: 1;
    overflow-y: auto;
    padding: 20px 26px 8px 26px;
    opacity: 1;
    transition: opacity 0.2s ease;
    scrollbar-width: none;
}

#story-container::-webkit-scrollbar { display: none; }

#story-container.fading {
    opacity: 0;
}

/* readable column — no more 1900px-long lines on wide screens */
#speaker,
#story-text {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

/* Speaker name-plate — a small warm tab, not a full-width bar.
   Shrink-wrapped, and pinned to the LEFT edge of the centered text column. */
#speaker {
    font-family: 'Press Start 2P', monospace;
    color: var(--accent);
    font-size: clamp(0.5em, 1.5vw, 0.6em);
    letter-spacing: 0.1em;
    margin-bottom: 14px;
    margin-left: max(0px, calc((100% - 860px) / 2));
    margin-right: auto;
    text-transform: uppercase;
    transition: color 0.5s ease, border-color 0.5s ease;
    line-height: 1.6;
    display: table;                 /* shrink-wraps the plate around the name */
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    border-left-width: 3px;
    border-radius: 6px;
    padding: 6px 14px;
    background: rgba(20, 12, 16, 0.7);
}

/* the Narrator needs no name tag — the * convention already marks narration */
#speaker.plate-hidden {
    display: none;
}

#story-text {
    line-height: 1.8;
    margin-bottom: 18px;
    /* --fit-scale is set by fitStoryToContainer() to shrink long scenes so
       they fit without scrolling. Chat bubble sizes are em-relative to this,
       so they scale along with it automatically. */
    font-size: calc(0.98em * var(--fit-scale, 1));
    cursor: pointer;
    color: var(--ink);
}

#story-text.typing::after {
    content: '▌';
    color: var(--accent);
    animation: blink 0.7s step-end infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

.dialogue {
    padding-left: 14px;
    border-left: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
    transition: border-color 0.5s ease;
}

.narrator {
    font-style: italic;
    color: var(--ink-dim);
}

.narrator::before {
    content: '* ';
    color: var(--accent);
    font-style: normal;
    transition: color 0.5s ease;
}

/* ── Choices ──────────────────────────────────────────────── */
#choices {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 26px 16px 26px;
    background: transparent;
    width: 100%;
    max-width: 912px;               /* 860 + panel padding — lines up with the text column */
    margin: 0 auto;
    box-sizing: border-box;
}

.choice-btn {
    background-color: rgba(45, 34, 40, 0.75);
    color: var(--ink);
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    padding: 11px 16px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.15s;
    text-align: left;
    font-family: inherit;
    font-size: 0.93em;
    line-height: 1.45;
}

.choice-btn::before {
    content: '›  ';
    color: var(--accent);
    font-size: 1.1em;
    transition: color 0.12s;
}

.choice-btn:hover {
    background-color: #372a31;
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    color: #fff;
    transform: translateX(3px);
}

.choice-btn:hover::before {
    content: '►  ';
}

/* ── Restart button ───────────────────────────────────────── */
#restart-btn {
    display: block;
    background-color: transparent;
    color: var(--ink-faint);
    border: 1px solid var(--line-soft);
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    margin: 4px 18px 10px auto;
    font-family: inherit;
    font-size: 0.75em;
    opacity: 0.75;
    transition: color 0.15s, border-color 0.15s, opacity 0.15s;
}

#restart-btn:hover {
    opacity: 1;
    color: var(--ember);
    border-color: var(--ember);
}

/* ── Audio controls (slider + mute, grouped) ────────────── */
#audio-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Language toggle ─────────────────────────────────────── */
#lang-toggle {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.lang-btn {
    background: rgba(23, 16, 19, 0.55);
    color: var(--ink-faint);
    border: 1px solid var(--line);
    padding: 6px 14px;
    font-size: 0.55em;
    font-family: 'Press Start 2P', monospace;
    border-radius: 6px;
    cursor: pointer;
    letter-spacing: 0.06em;
    transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.lang-btn:hover {
    color: var(--gold);
    border-color: var(--gold);
}

.lang-btn.active {
    background-color: var(--gold);
    color: #2b1c14;
    border-color: var(--gold);
}

#lang-btn-hud {
    background: transparent;
    border: none;
    color: var(--ink-faint);
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 10px;
    font-family: 'Press Start 2P', monospace;
    letter-spacing: 0.04em;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.2s, color 0.15s;
}

#lang-btn-hud:hover {
    opacity: 1;
    color: var(--gold);
}

/* ── Volume slider ───────────────────────────────────────── */
#volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 64px;
    height: 3px;
    background: #4a3841;
    border-radius: 2px;
    outline: none;
    opacity: 0.7;
    transition: opacity 0.2s;
    cursor: pointer;
    vertical-align: middle;
}
#volume-slider:hover { opacity: 1; }
#volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gold);
    cursor: pointer;
}
#volume-slider::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gold);
    border: none;
    cursor: pointer;
}

/* ── Mute button (lives inside #hud chip) ─────────────────── */
#mute-btn {
    background: transparent;
    border: none;
    color: var(--ink-faint);
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 13px;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.2s, color 0.15s;
}

#mute-btn:hover  { opacity: 1; color: var(--gold); }
#mute-btn.muted  { opacity: 0.35; text-decoration: line-through; }

/* Group portrait — the seven-bust strip is a real cutout (make_group.py builds
   it with alpha), so the cast stands in the scene like the individual portraits:
   bottom-anchored, gentle grade, same dark halo for separation from busy art */
#portrait-img.group-portrait {
    object-fit: contain;
    object-position: center bottom;
    transform: none;
    filter: saturate(0.85) brightness(0.95)
            drop-shadow(0 0 16px rgba(15, 8, 11, 0.9)) drop-shadow(0 0 5px rgba(15, 8, 11, 0.85));
}

/* ── Stat toasts ──────────────────────────────────────────── */
.stat-toast {
    position: fixed;
    right: 20px;
    bottom: 44px;
    background-color: rgba(38, 27, 33, 0.95);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: bold;
    pointer-events: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-width: 190px;
    box-shadow: 0 6px 18px rgba(10, 5, 8, 0.5);
}

.stat-toast.visible {
    opacity: 1;
    transform: translateY(0);
}

.toast-line     { display: block; }
.toast-positive { color: var(--sage); }
.toast-negative { color: #d97b6c; }
.toast-risk     { color: var(--amber); }
.toast-drunk    { color: #d9a05e; }

/* ── Mini-game components ─────────────────────────────────── */
#minigame-container {
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    /* auto vertical margins center it when there's room, but collapse to 0
       on overflow so the top stays reachable (unlike justify-content:center) */
    margin: auto 0;
}

.mg-title {
    font-size: 0.72em;
    color: var(--ink-dim);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-align: center;
}

.mg-track {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: 28px;
    background: #1c1418;
    border: 1px solid #4a3841;
    border-radius: 8px;
    overflow: hidden;
}

.mg-zone {
    position: absolute;
    top: 0;
    height: 100%;
    background: rgba(166, 193, 134, 0.26);
    border-left: 2px solid var(--sage);
    border-right: 2px solid var(--sage);
    pointer-events: none;
}

/* Bright "bullseye" core inside the target zone — a hit here scores PERFECT */
.mg-bull {
    position: absolute;
    top: 0;
    height: 100%;
    background: rgba(233, 196, 106, 0.34);
    box-shadow: inset 0 0 0 1px rgba(233, 196, 106, 0.85);
    pointer-events: none;
}

.mg-indicator {
    position: absolute;
    top: 4px;
    width: 4px;
    height: calc(100% - 8px);
    background: #fff6e4;
    border-radius: 2px;
    box-shadow: 0 0 5px rgba(255, 240, 200, 0.7);
    pointer-events: none;
    z-index: 2;
}

/* PERFECT feedback pulse on the track */
.mg-track.mg-flash {
    animation: mgFlash 0.45s ease;
}

@keyframes mgFlash {
    0%   { box-shadow: 0 0 0 0 rgba(233, 196, 106, 0.9); }
    100% { box-shadow: 0 0 0 9px rgba(233, 196, 106, 0); }
}

/* Row that holds the "Now!" tap, or the "Another round" / "Call it" choice */
.mg-btn-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.mg-big-btn {
    padding: 10px 32px;
    font-size: 0.95em;
    font-family: inherit;
    background: rgba(233, 196, 106, 0.06);
    border: 2px solid var(--accent);
    color: var(--accent);
    border-radius: 10px;
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: background 0.15s, color 0.15s;
}

.mg-big-btn:hover {
    background: var(--accent);
    color: #2b1c14;
}

/* "Call it" — the safe cash-out, styled quieter than "Another round" */
.mg-big-btn.mg-btn-secondary {
    border-color: var(--ink-faint);
    color: var(--ink-dim);
    background: transparent;
}

.mg-big-btn.mg-btn-secondary:hover {
    background: var(--ink-faint);
    color: #1c1418;
}

.mg-result {
    min-height: 1.3em;
    font-size: 0.87em;
    font-style: italic;
    color: var(--ink-dim);
    text-align: center;
}

/* Escalating table banter shown under the result during the duel */
.mg-flavor {
    min-height: 1.2em;
    font-size: 0.82em;
    font-style: italic;
    color: var(--ink-faint);
    text-align: center;
    max-width: 420px;
    line-height: 1.4;
}

.mg-score {
    font-size: 0.82em;
    color: var(--ink-dim);
}

.mg-officer-text {
    font-style: italic;
    color: var(--ink);
    text-align: center;
    max-width: 420px;
    line-height: 1.5;
    font-size: 0.9em;
}

/* Officer demeanor pill — colour set inline per state (Calm→Hostile) */
.mg-demeanor {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6em;
    letter-spacing: 0.12em;
    padding: 4px 10px;
    border: 1px solid #4a3841;
    border-radius: 6px;
    background: rgba(23, 16, 19, 0.6);
}

.mg-tension-bar-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 420px;
}

.mg-tension-bar-wrap label {
    font-size: 0.72em;
    letter-spacing: 0.08em;
    color: var(--ink-dim);
    white-space: nowrap;
}

.mg-tension-bar {
    flex: 1;
    height: 12px;
    background: #1c1418;
    border: 1px solid #4a3841;
    border-radius: 6px;
    overflow: hidden;
}

.mg-tension-fill {
    height: 100%;
    background: var(--sage);
    transition: width 0.5s ease, background 0.5s ease;
}

.mg-tension-value {
    font-size: 0.78em;
    color: var(--ink-dim);
    min-width: 26px;
    text-align: right;
}

.mg-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    max-width: 420px;
}

.mg-action-btn {
    padding: 7px 14px;
    font-size: 0.83em;
    font-family: inherit;
    background: rgba(45, 34, 40, 0.6);
    border: 1px solid #4a3841;
    color: var(--ink);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.mg-action-btn:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
}

.mg-action-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

/* High-risk plays (Push back / Bribe / Floor it) read as dangerous */
.mg-action-btn.mg-danger {
    border-color: #7a3b30;
    color: #e0938a;
}

.mg-action-btn.mg-danger:hover:not(:disabled) {
    border-color: var(--ember);
    color: #ffa08a;
}

.mg-turns {
    font-size: 0.76em;
    color: var(--ink-faint);
}

/* ── Police chase mini-game ──────────────────────────────── */
/* These mount as centered flex children of #minigame-container, which would
   shrink-wrap them and collapse the flex:1 bars — force full panel width. */
#chase-status,
#chase-narrative,
#chase-timer-wrap,
#chase-choices {
    width: 100%;
    box-sizing: border-box;
}

#chase-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--line-soft);
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55em;
    letter-spacing: 0.08em;
}

.chase-label {
    color: rgba(233, 196, 106, 0.6);
    text-transform: uppercase;
    flex-shrink: 0;
}

#chase-heat-bar {
    flex: 1;
    height: 6px;
    background: #1c1418;
    border-radius: 3px;
    overflow: hidden;
}

#chase-heat-fill {
    height: 100%;
    border-radius: 3px;
    width: 0%;
    transition: width 0.4s ease;
}

#chase-heat-fill.heat-ok     { background: var(--sage); }
#chase-heat-fill.heat-warn   { background: var(--amber); }
#chase-heat-fill.heat-danger { background: #a8453a; animation: pulse-critical 1.5s infinite; }

#chase-counter {
    color: var(--ink-faint);
    white-space: nowrap;
}

#chase-narrative {
    padding: 20px 22px 14px;
    font-style: italic;
    color: var(--ink);
    line-height: 1.75;
    font-size: 0.96em;
    min-height: 100px;
}

#chase-timer-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px 10px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55em;
}

#chase-timer-bar {
    flex: 1;
    height: 9px;
    background: #1c1418;
    border: 1px solid #3a1f18;
    border-radius: 5px;
    overflow: hidden;
}

/* Depleting countdown — urgent red-amber, glowing, to sell the time pressure */
#chase-timer-fill {
    height: 100%;
    background: linear-gradient(90deg, #b02a1a 0%, #e0913a 100%);
    box-shadow: 0 0 8px rgba(224, 90, 50, 0.7);
    border-radius: 5px;
    width: 100%;
}

#chase-timer-wrap .chase-label {
    color: #e0784a;
}

#chase-choices {
    padding: 4px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#chase-outcome {
    padding: 14px 2px;
    font-style: italic;
    font-size: 0.96em;
    line-height: 1.6;
}

.chase-outcome-good    { color: var(--accent); }
.chase-outcome-bad     { color: #d16a55; }
.chase-outcome-neutral { color: var(--ink-faint); }

/* ── Misc (legacy hooks kept for safety) ──────────────────── */
.dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: -220px;
    left: 0;
    background-color: var(--paper-2);
    width: 100%;
    border: 1px solid var(--accent);
    border-radius: 8px;
    padding: 10px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.relationship-bar {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    color: var(--ink);
    font-size: 12px;
}

.relationship-bar .value {
    margin: 0 5px;
    min-width: 15px;
    text-align: center;
}

.relationship-bar .bar {
    flex-grow: 1;
    height: 8px;
}

/* ══════════════════════════════════════════════════════════════
   GROUP CHAT — messenger look for the "Dinosaurs" WhatsApp scenes
   ══════════════════════════════════════════════════════════════ */
.chat-view { cursor: default; }

/* the chat thread column, narrower than prose for that phone feel */
.chat-container {
    display: flex;
    flex-direction: column;
    gap: calc(8px * var(--fit-scale, 1));
    padding: 6px 0 4px;
    max-width: 700px;
    margin: 0 auto;
}

/* incoming message bubble */
.chat-bubble {
    background: var(--paper-2);
    border: 1px solid rgba(233, 196, 106, 0.07);
    border-radius: 14px 14px 14px 4px;
    padding: calc(7px * var(--fit-scale, 1)) 13px calc(8px * var(--fit-scale, 1));
    display: flex;
    flex-direction: column;
    gap: calc(3px * var(--fit-scale, 1));
    max-width: 78%;
    align-self: flex-start;
    box-shadow: 0 2px 6px rgba(10, 5, 8, 0.35);
    opacity: 0;
    animation: chatBubbleIn 0.3s ease forwards;
}

/* your own messages — right-aligned, tea-green, like every messenger ever */
.chat-bubble.chat-out {
    background: var(--bubble-out);
    border-color: rgba(180, 220, 190, 0.1);
    border-radius: 14px 14px 4px 14px;
    align-self: flex-end;
}

.chat-sender {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.48em;
    color: var(--sender-color, var(--accent));
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.7;
}

.chat-bubble.chat-out .chat-sender { display: none; }   /* it's you — no label needed */

.chat-message {
    font-size: 0.95em;
    color: var(--ink);
    line-height: 1.6;
}

.chat-bubble.chat-out .chat-message { color: #e9f0e2; }

/* narration inside a chat scene — centered "system chip", like a date divider */
.chat-narrator {
    font-style: italic;
    color: var(--ink-faint);
    font-size: 0.85em;
    line-height: 1.55;
    align-self: center;
    text-align: center;
    background: rgba(23, 16, 19, 0.55);
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    padding: calc(5px * var(--fit-scale, 1)) 14px;
    max-width: 88%;
    opacity: 0;
    animation: chatBubbleIn 0.3s ease forwards;
}

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

/* per-character sender colors */
.chat-c-egemen  { --sender-color: var(--c-egemen); }
.chat-c-berat   { --sender-color: var(--c-berat); }
.chat-c-ogulcan { --sender-color: var(--c-ogulcan); }
.chat-c-omer    { --sender-color: var(--c-omer); }
.chat-c-ege     { --sender-color: var(--c-ege); }
.chat-c-ilker   { --sender-color: var(--c-ilker); }
.chat-c-alper   { --sender-color: var(--c-alper); }

/* ── Chat header — replaces the speaker plate on chat scenes ── */
#speaker.chat-header {
    display: flex;
    align-items: center;
    gap: 11px;
    max-width: 700px;
    box-sizing: border-box;         /* aligns exactly with the bubble column */
    margin-left: auto;
    margin-right: auto;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: rgba(20, 12, 16, 0.72);
    padding: 8px 14px;
    text-transform: none;
    letter-spacing: normal;
}

.chat-hdr-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(233, 196, 106, 0.35);
    background: #4a3841;
    overflow: hidden;
}

/* the group photo is square, same as the box — shows whole, like a real group icon */
.chat-hdr-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.chat-hdr-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.chat-hdr-name {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.62em;
    color: var(--gold);
    letter-spacing: 0.08em;
    line-height: 1.4;
}

.chat-hdr-members {
    font-family: 'Lora', serif;
    font-size: 0.78em;
    font-style: italic;
    color: var(--ink-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

/* ── Chat-mode choices — your replies look like outgoing messages ── */
#choices.chat-choices {
    max-width: 752px;               /* 700 + padding — lines up with the thread */
    align-items: flex-end;
}

#choices.chat-choices .choice-btn.chat-reply {
    background: var(--bubble-out);
    border: 1px solid rgba(180, 220, 190, 0.14);
    border-radius: 14px 14px 4px 14px;
    color: #e9f0e2;
    max-width: 78%;
    padding: 9px 15px;
    box-shadow: 0 2px 6px rgba(10, 5, 8, 0.35);
}

#choices.chat-choices .choice-btn.chat-reply::before {
    content: '';
}

#choices.chat-choices .choice-btn.chat-reply::after {
    content: ' ➤';
    font-size: 0.72em;
    opacity: 0.45;
    margin-left: 7px;
    transition: opacity 0.15s;
}

#choices.chat-choices .choice-btn.chat-reply:hover {
    background: #48604f;
    border-color: rgba(190, 230, 200, 0.35);
    transform: translateX(-3px);
}

#choices.chat-choices .choice-btn.chat-reply:hover::after {
    opacity: 1;
}

/* non-message actions inside a chat ("Ignore the comment") — quiet dashed pill */
#choices.chat-choices .choice-btn.chat-action {
    align-self: center;
    background: transparent;
    border: 1px dashed rgba(233, 196, 106, 0.3);
    border-radius: 999px;
    color: var(--ink-dim);
    font-style: italic;
    padding: 8px 20px;
    text-align: center;
}

#choices.chat-choices .choice-btn.chat-action::before {
    content: '';
}

#choices.chat-choices .choice-btn.chat-action:hover {
    border-color: var(--accent);
    border-style: solid;
    color: var(--ink);
    transform: none;
}

/* ── Mobile / short screens ───────────────────────────────── */
@media (max-height: 600px) {
    #portrait-panel { height: var(--portrait-h, 52vh); }
    .choice-btn { padding: 8px 12px; font-size: 0.85em; }
    #story-text { font-size: calc(0.9em * var(--fit-scale, 1)); }
}

@media (max-width: 768px) {
    #arena-left, #arena-right { display: none; }
    #dialogue-panel { border-radius: 12px 12px 0 0; }
}