/* ============================================
   TOTALLY PLANNED LANDING - Visual Novel Theme
   Matte black with colorful icon contrast
   ============================================ */

:root {
    --bg-primary: #0a0a0a;
    --bg-secondary: #111111;
    --bg-tertiary: #161616;
    --bg-card: #141414;
    --bg-card-hover: #1a1a1a;
    --bg-overlay: rgba(0, 0, 0, 0.85);
    --accent-neutral: #333333;
    --accent-light: #444444;
    --accent-highlight: #555555;
    --text-primary: #d4d4d4;
    --text-secondary: #888888;
    --text-muted: #555555;
    --text-highlight: #e8e8e8;
    --credits-color: #d4a535;
    --danger-color: #c0392b;
    --border-color: #1e1e1e;
    --border-hover: #333333;
    --font-main: 'Segoe UI', 'Inter', 'Roboto', sans-serif;
    --font-mono: 'Fira Code', 'Consolas', monospace;
    --radius: 6px;
    --radius-sm: 4px;
    --transition: 0.2s ease;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }

/* Mobile / touch polish: kill tap delay, suppress callout, keep highlight subtle */
button, .btn-option, .story-choice-btn, input[type="range"], .custom-select-display,
[role="button"], a {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.05);
    -webkit-touch-callout: none;
}

/* Loading screen */
#loading-screen {
    position: fixed; inset: 0; background: #000;
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
}
.loading-spinner {
    width: 40px; height: 40px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: rgba(255,255,255,0.7);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Volume toast */
.vol-toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    background: rgba(20,20,20,0.92); color: rgba(255,255,255,0.75);
    font-size: 0.72rem; letter-spacing: 1px; padding: 6px 16px;
    border: 1px solid rgba(255,255,255,0.1); pointer-events: none;
    animation: fadeInOut 1.2s ease forwards; z-index: 8000;
}
@keyframes fadeInOut { 0%{opacity:0} 15%{opacity:1} 75%{opacity:1} 100%{opacity:0} }
body {
    font-family: var(--font-main);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ─── Screen System ─── */
.screen { display: none; position: fixed; inset: 0; }
.screen.active { display: flex; }

/* ═══════════════════════════════════════
   DISCLAIMER
   ═══════════════════════════════════════ */
#screen-disclaimer { align-items: center; justify-content: center; background: var(--bg-primary); }
.disclaimer-container { text-align: center; max-width: 480px; padding: 40px; }
.disclaimer-icon { font-size: 3rem; margin-bottom: 16px; filter: grayscale(1) brightness(1.2); }
.disclaimer-container h1 { font-size: 1.3rem; letter-spacing: 4px; color: var(--text-highlight); margin-bottom: 24px; font-weight: 500; }
.disclaimer-text { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 12px; line-height: 1.7; }
.disclaimer-text strong { color: var(--text-highlight); }
.disclaimer-actions { margin-top: 32px; display: flex; flex-direction: column; gap: 10px; }

/* ═══════════════════════════════════════
   MAIN MENU
   ═══════════════════════════════════════ */
#screen-menu { align-items: center; justify-content: center; background: var(--bg-primary); overflow-y: auto; }
.menu-container { text-align: center; max-height: 100vh; padding: 16px; }
.menu-banner { max-width: 860px; width: 100%; margin-bottom: 12px; }
.menu-banner img { width: 100%; max-height: 35vh; object-fit: contain; filter: drop-shadow(0 4px 20px rgba(0,0,0,0.5)); }
.menu-subtitle { color: var(--text-muted); font-size: 0.9rem; letter-spacing: 2px; margin-bottom: 48px; }
.menu-credit { color: var(--text-muted); font-size: 0.65rem; letter-spacing: 1.5px; margin-top: 32px; opacity: 0.6; }
.menu-socials { display: flex; justify-content: center; gap: 14px; margin-top: 8px; }
.menu-socials a { color: rgba(255,255,255,0.4); font-size: 0.6rem; text-decoration: none; letter-spacing: 0.5px; transition: color 0.2s; }
.menu-socials a:hover { color: rgba(255,255,255,0.8); }
.menu-buttons { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.menu-version { margin-top: 48px; color: var(--text-muted); font-size: 0.75rem; }

/* ═══════════════════════════════════════
   OPTIONS
   ═══════════════════════════════════════ */
#screen-options { align-items: center; justify-content: center; background: var(--bg-primary); }
.options-container { max-width: 400px; width: 90%; }
.options-container h2 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: 3px; color: var(--text-secondary); margin-bottom: 24px; text-align: center; font-weight: 400; }
.option-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border-color); }
.option-label { color: var(--text-secondary); font-size: 0.85rem; }
.option-control { display: flex; gap: 4px; }
.btn-option { padding: 5px 12px; font-size: 0.75rem; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; font-family: var(--font-main); transition: all var(--transition); }
.btn-option:hover { color: var(--text-secondary); border-color: var(--border-hover); }
.btn-option.active { background: var(--bg-card-hover); border-color: var(--accent-light); color: var(--text-primary); }
.divider { border: none; border-top: 1px solid var(--border-color); margin: 20px 0; }

/* Volume sliders */
.volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 160px;
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}
.volume-slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
}
.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-highlight, #fff);
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 0 4px rgba(255,255,255,0.15);
}
.volume-slider::-webkit-slider-thumb:hover {
    background: var(--text-highlight);
    transform: scale(1.2);
    box-shadow: 0 0 8px rgba(255,255,255,0.3);
}
.volume-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-highlight, #fff);
    border: none;
    cursor: pointer;
}
.volume-slider::-moz-range-track {
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
}
.volume-slider::-moz-range-progress {
    height: 6px;
    background: var(--accent-light, #888);
    border-radius: 3px;
}

/* ═══════════════════════════════════════
   CHARACTER CREATION
   ═══════════════════════════════════════ */
#screen-creation { align-items: flex-start; justify-content: center; background: var(--bg-primary); overflow-y: auto; padding: 40px 0; }
.creation-container { max-width: 560px; width: 92%; margin: 0 auto; position: relative; }

/* Self-dismissing system note (e.g. NPC name collision FYI).
   Sits below the step's Continue/Back buttons, centered. */
#cc-system-note {
    margin: 14px auto 0;
    max-width: 480px;
    width: fit-content;
    padding: 9px 16px;
    background: rgba(17, 21, 28, 0.95);
    border: 1px solid var(--border-hover);
    border-left: 3px solid #6cc8e8;
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    letter-spacing: 0.4px;
    text-align: center;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
}
#cc-system-note.visible {
    opacity: 1;
    transform: translateY(0);
}
.cc-options-btn {
    position: absolute; top: 0; right: 0;
    background: transparent; border: 1px solid var(--border-color);
    color: var(--text-muted); font-size: 1.1rem; padding: 4px 10px;
    border-radius: var(--radius-sm); cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}
.cc-options-btn:hover { color: var(--text-highlight); border-color: var(--accent-light); }

.briefing-header { text-align: center; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); }
.briefing-badge { display: inline-block; padding: 3px 14px; font-size: 0.6rem; letter-spacing: 4px; text-transform: uppercase; border: 1px solid var(--danger-color); color: var(--danger-color); border-radius: 2px; margin-bottom: 14px; }
.briefing-usm-logo { width: 64px; height: 64px; object-fit: contain; display: block; margin: 0 auto 12px; opacity: 0.85; }
.briefing-title { font-size: 1.3rem; text-transform: uppercase; letter-spacing: 4px; color: var(--text-highlight); margin-bottom: 6px; font-weight: 600; }
.briefing-subtitle { font-size: 0.75rem; color: var(--text-muted); letter-spacing: 2px; }

.briefing-dialogue { margin-bottom: 10px; }
.dialogue-line { padding: 8px 12px; border-radius: var(--radius); font-size: 0.85rem; line-height: 1.5; }
.dialogue-line.general { background: rgba(60,60,60,0.15); border-left: 3px solid var(--accent-light); color: var(--text-primary); font-style: italic; }

.cc-step { display: none; }
.cc-step.active { display: block; }
.cc-step-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 3px; color: var(--text-secondary); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border-color); }
.cc-step-actions { margin-top: 10px; display: flex; gap: 10px; }
.cc-step-actions .btn { flex: 1; }

.form-row { display: flex; gap: 12px; }
.form-group { margin-bottom: 16px; }
.form-group.half { flex: 1; }
.form-group label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-secondary); margin-bottom: 6px; }
.form-group input[type="text"] { width: 100%; padding: 10px 12px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-main); font-size: 0.9rem; outline: none; transition: border-color var(--transition); }
.form-group input[type="text"]:focus { border-color: var(--accent-light); }

.cc-summary { margin-bottom: 16px; }
.summary-section { margin-bottom: 16px; }
.summary-title { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 3px; color: var(--text-secondary); margin-bottom: 8px; }
.summary-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border-color); font-size: 0.85rem; }
.summary-row span:first-child { color: var(--text-secondary); }
.summary-row span:last-child { color: var(--text-highlight); font-weight: 500; }
.error-text { color: var(--danger-color); font-size: 0.85rem; display: none; margin-bottom: 8px; }
.error-text.visible { display: block; }

/* ─── Character Creation: Intro ─── */
.cc-intro-text {
    text-align: center;
    padding: 32px 16px;
}

.cc-intro-line {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 2;
    margin-bottom: 8px;
    opacity: 0;
    animation: fadeIn 0.6s ease forwards;
}

.cc-intro-line:nth-child(1) { animation-delay: 0.3s; }
.cc-intro-line:nth-child(2) { animation-delay: 1.2s; }
.cc-intro-line:nth-child(3) { animation-delay: 2.5s; }
.cc-intro-line:nth-child(4) { animation-delay: 3.4s; }
.cc-intro-line:nth-child(5) { animation-delay: 4.6s; color: var(--text-highlight); }

/* ─── Character Creation: Portrait + Arrow Selectors ─── */
.cc-portrait-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 8px;
    padding: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}

#cc-portrait-canvas {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: transparent;
    display: block;
}

.cc-selectors {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 360px;
    margin: 0 auto;
}

.cc-arrow-select label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin-bottom: 2px;
    text-align: center;
}

.cc-arrow-row {
    display: flex;
    align-items: center;
    gap: 0;
}

.cc-arrow {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 1.2rem;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

.cc-arrow:hover {
    color: var(--text-highlight);
    border-color: var(--accent-light);
}

.cc-arrow-left {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    border-right: none;
}

.cc-arrow-right {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    border-left: none;
}

.cc-arrow-value {
    flex: 1;
    text-align: center;
    padding: 5px 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: var(--font-main);
    user-select: none;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-cup-select {
    max-width: 260px;
    margin: 0 auto;
    width: 100%;
}

.cc-cup-select label {
    text-align: center;
}

.cc-selectors .form-group {
    margin-bottom: 0;
}

/* ─── Custom Select ─── */
.custom-select { position: relative; width: 100%; cursor: pointer; }
.custom-select-display { padding: 10px 12px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 0.95rem; font-family: var(--font-main); transition: border-color var(--transition); user-select: none; }
.custom-select.open .custom-select-display, .custom-select-display:hover { border-color: var(--accent-light); }
.custom-select-options { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 100; background: var(--bg-secondary); border: 1px solid var(--accent-light); border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); max-height: 220px; overflow-y: auto; }
.custom-select.open .custom-select-options { display: block; }
.custom-select-option { padding: 8px 12px; color: var(--text-primary); font-size: 0.9rem; transition: background 0.15s; cursor: pointer; }
.custom-select-option:hover { background: var(--bg-tertiary); }
.custom-select-option.selected { background: var(--bg-tertiary); border-left: 2px solid var(--accent-light); }
.custom-select-option .opt-value, .custom-select-display .opt-value { font-weight: 400; }
.custom-select-option .opt-desc, .custom-select-display .opt-desc { color: var(--text-secondary); font-weight: 400; font-style: italic; margin-left: 6px; }

/* ─── Cup Size Slider ─── */
.cc-slider-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cc-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.cc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-light);
    cursor: pointer;
    border: 2px solid var(--bg-primary);
}

.cc-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-light);
    cursor: pointer;
    border: 2px solid var(--bg-primary);
}

.cc-slider-ticks {
    display: flex;
    justify-content: space-between;
    padding: 2px 7px 0;
}

.cc-slider-ticks .tick {
    width: 1px;
    height: 6px;
    background: var(--border-color);
}

/* ─── Option Cards ─── */
.option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.option-grid.grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.option-grid.grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

.option-card {
    padding: 20px 14px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: visible;
    min-height: 180px;
    justify-content: flex-start;
}

/* Subtle colored glow behind the card on hover — uses --card-glow set via JS */
.option-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: radial-gradient(ellipse at center 30%, var(--card-glow, rgba(255,255,255,0.04)) 0%, transparent 70%);
    pointer-events: none;
    border-radius: var(--radius);
}
.option-card:hover::before { opacity: 1; }
.option-card.selected::before { opacity: 1; }

.option-card:hover {
    border-color: var(--card-color, var(--border-hover));
    background: var(--bg-card-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 12px var(--card-glow, transparent);
    z-index: 10;
}

.option-card.selected {
    border-color: var(--card-color, var(--accent-highlight));
    background: rgba(255,255,255,0.05);
    box-shadow: 0 0 16px var(--card-glow, transparent);
}

.option-card .option-icon {
    width: 72px;
    height: 72px;
    object-fit: contain;
    opacity: 0.75;
    transition: all 0.25s ease;
    filter: grayscale(0.15);
}
.option-card:hover .option-icon { opacity: 1; transform: scale(1.08); filter: grayscale(0); }
.option-card.selected .option-icon { opacity: 1; transform: scale(1.12); filter: grayscale(0) drop-shadow(0 0 10px rgba(255,255,255,0.2)); }

.option-card .option-title {
    font-weight: 600;
    margin-bottom: 2px;
    font-size: 0.9rem;
    color: var(--text-primary);
    letter-spacing: 0.5px;
}
.option-card:hover .option-title { color: var(--text-highlight); }

.option-card .option-desc {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.5;
    max-width: 200px;
}
.option-card:hover .option-desc { color: var(--text-secondary); }

/* ─── Card Stat Badges ─── */
.card-stat-row {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.card-stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 5px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    letter-spacing: 0.3px;
    cursor: help;
    position: relative;
    z-index: 1;
}
.card-stat-badge.stat-badge-up { color: #7defa0; }
.card-stat-badge.stat-badge-down { color: #ef7d7d; }
.card-stat-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    opacity: 0.9;
}
/* Tooltip */
.card-stat-badge .stat-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(16, 16, 20, 0.97);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text-secondary);
    white-space: nowrap;
    pointer-events: none;
    z-index: 99999;
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
    max-width: 320px;
}
.card-stat-badge:hover .stat-tooltip {
    display: block;
}

/* ─── Stat Change Notification (in-story) ─── */
.stat-change-notification {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    margin: 6px 0 2px;
    border-radius: 4px;
    background: rgba(255,255,255,0.05);
    border-left: 3px solid rgba(255,255,255,0.2);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    animation: statNotifIn 0.4s ease-out;
}
.stat-change-notification.stat-up {
    color: #ffffff;
    border-left-color: #7defa0;
}
.stat-change-notification.stat-down {
    color: #ffffff;
    border-left-color: #ef7d7d;
}
/* Romance gain: same pink as the romance bar in the dossier,
   so the in-text notification and the bar read as the same thing. */
.stat-change-notification.romance-change {
    color: #ffd6ea;
    border-left-color: #e87db4;
}
.stat-notif-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}
.stat-notif-text {
    line-height: 1;
}
@keyframes statNotifIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════
   GAME SCREEN - VISUAL NOVEL LAYOUT
   ═══════════════════════════════════════ */

.vn-layout {
    display: grid;
    grid-template-columns: 280px 1fr 280px;
    grid-template-rows: 1fr auto;
    height: 100vh;
    width: 100%;
    background: var(--bg-primary);
    position: relative;
}

/* ─── Portrait Areas ─── */
.portrait-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    position: relative;
    overflow: hidden;
}

/* ─── Location Banners ─── */
.location-banner {
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: var(--bg-secondary);
    position: relative;
    /* Establish a stacking context so the bottom fade can sit above the
       rolldown overlay layer cleanly. */
    isolation: isolate;
}

.location-banner::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(to bottom, transparent, var(--bg-primary));
    pointer-events: none;
    /* Must paint above the rolldown layer (z-index: 2) so the incoming
       image is faded at the bottom while it slides down — otherwise the
       new image briefly covers the gradient before it fades itself. */
    z-index: 3;
}

.location-banner img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center bottom;
}

.portrait-layers {
    position: relative;
    width: 100%;
    flex-shrink: 0;
    height: 420px;
    margin-top: 8px;
    /* Force single GPU layer for all children — prevents sub-pixel gaps between stacked images */
    will-change: transform;
    isolation: isolate;
    overflow: hidden;
}

.portrait-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    opacity: 0.4;
    transition: opacity 0.4s ease;
    filter: grayscale(0.3);
}

.portrait-layers .portrait-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
}

.portrait-area.has-character .portrait-img,
.portrait-area.has-character .portrait-layer {
    opacity: 1;
    filter: none;
}

.portrait-label {
    flex-shrink: 0;
    width: 100%;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--text-secondary);
    text-align: center;
    padding: 7px 6px 8px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-hover);
    /* Reserve a stable height so the banner (flex:1) doesn't grow/shrink
       when the label text appears or clears (e.g. no speaker on the right). */
    box-sizing: border-box;
    min-height: 28px;
}

/* Keep the label's box (and reserved height) even with no text, so the
   banner above stays the same size whether or not a speaker is shown.
   visibility:hidden keeps layout but hides the empty bar's background. */
.portrait-label:empty {
    visibility: hidden;
}

.portrait-area.has-character .portrait-label {
    color: var(--text-highlight);
}

.portrait-left {
    border-right: 1px solid var(--border-color);
    background: linear-gradient(to right, var(--bg-primary), rgba(14,14,14,0.6));
}

.portrait-right {
    border-left: 1px solid var(--border-color);
    background: linear-gradient(to left, var(--bg-primary), rgba(14,14,14,0.6));
}

/* Hide right portrait area when no character is present */
.portrait-right:not(.has-character) .portrait-layers {
    visibility: hidden;
}

/* ─── Group Portraits (stacked) ─── */
.portrait-group-member {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    transition: opacity 0.4s ease;
}

/* Stagger group members: back members are smaller, shifted, and dimmer */
.portrait-group-member:nth-child(1) {
    transform: scale(0.75) translateX(-30%);
    opacity: 0.5;
    z-index: 1;
}
.portrait-group-member:nth-child(2) {
    transform: scale(0.75) translateX(30%);
    opacity: 0.5;
    z-index: 2;
}
/* Last / frontmost member is full size */
.portrait-group-member:last-child {
    transform: scale(1) translateX(0);
    opacity: 1;
    z-index: 3;
}
/* When only 2 members, first is background, second is front */
.portrait-layers > .portrait-group-member:first-child:nth-last-child(2) {
    transform: scale(0.8) translateX(-20%);
    opacity: 0.6;
    z-index: 1;
}
.portrait-layers > .portrait-group-member:last-child:nth-child(2) {
    transform: scale(1) translateX(0);
    opacity: 1;
    z-index: 2;
}

/* ─── Center Area ─── */
.vn-center {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Top bar */
.vn-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    border-bottom: 1px solid var(--border-color);
    min-height: 44px;
    flex-shrink: 0;
}

.vn-chapter {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--text-muted);
}

.vn-credits {
    font-size: 0.8rem;
    color: var(--credits-color);
    font-family: var(--font-mono);
}

/* Text area */
.vn-text-area {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.vn-text-output {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Text lines */
.text-line {
    opacity: 0;
    animation: fadeIn 0.3s ease forwards;
}

/* Text speed variants */
[data-text-speed="slow"] .text-line { animation-duration: 0.6s; }
[data-text-speed="fast"] .text-line { animation-duration: 0.1s; }

/* Font size variants — applied to #vn-center so text AND choices scale.
   Higher specificity (.text-line.<modifier>) is used so these rules beat
   the per-modifier font-size declarations further down. */
[data-font-size="small"]  .text-line.narrator,
[data-font-size="small"]  .text-line.narrator.player-action { font-size: 0.85rem; }
[data-font-size="medium"] .text-line.narrator,
[data-font-size="medium"] .text-line.narrator.player-action { font-size: 1rem; }
[data-font-size="large"]  .text-line.narrator,
[data-font-size="large"]  .text-line.narrator.player-action { font-size: 1.2rem; }

[data-font-size="small"]  .text-line.dialogue { font-size: 0.9rem; }
[data-font-size="medium"] .text-line.dialogue { font-size: 1.05rem; }
[data-font-size="large"]  .text-line.dialogue { font-size: 1.25rem; }

[data-font-size="small"]  .text-line.system { font-size: 0.82rem; }
[data-font-size="medium"] .text-line.system { font-size: 0.95rem; }
[data-font-size="large"]  .text-line.system { font-size: 1.12rem; }

[data-font-size="small"]  .text-line.important { font-size: 0.9rem; }
[data-font-size="medium"] .text-line.important { font-size: 1.05rem; }
[data-font-size="large"]  .text-line.important { font-size: 1.25rem; }

[data-font-size="small"]  .speaker-tag { font-size: 0.65rem; }
[data-font-size="medium"] .speaker-tag { font-size: 0.7rem; }
[data-font-size="large"]  .speaker-tag { font-size: 0.85rem; }

/* Choice buttons scale with font size too */
[data-font-size="small"]  .story-choice-btn { font-size: 0.82rem; }
[data-font-size="medium"] .story-choice-btn { font-size: 0.9rem; }
[data-font-size="large"]  .story-choice-btn { font-size: 1.05rem; }

[data-font-size="small"]  .story-choice-btn .choice-number { font-size: 0.72rem; }
[data-font-size="medium"] .story-choice-btn .choice-number { font-size: 0.8rem; }
[data-font-size="large"]  .story-choice-btn .choice-number { font-size: 0.95rem; }

/* Continue / action button also scales */
[data-font-size="small"]  .action-btn { font-size: 0.85rem; }
[data-font-size="medium"] .action-btn { font-size: 0.95rem; }
[data-font-size="large"]  .action-btn { font-size: 1.1rem; }

.text-line.narrator {
    color: #999;
    line-height: 1.8;
    font-size: 1.0rem;
    font-style: italic;
}

/* Player action — same italic narrator style but slightly brighter */
.text-line.narrator.player-action {
    color: #aaa;
}

.text-line.dialogue {
    color: var(--text-primary);
    padding-left: 14px;
    border-left: 2px solid var(--accent-light);
    line-height: 1.8;
    font-size: 1.05rem;
}

.text-line.system {
    color: var(--text-muted);
    font-size: 0.95rem;
    font-style: italic;
}

.text-line.important {
    color: var(--text-highlight);
    font-weight: 500;
    font-size: 1.05rem;
}

.text-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 6px 0;
}

/* Act/Chapter header */
.story-act-header {
    text-align: center;
    padding: 20px 0;
    margin-bottom: 16px;
}

.story-act-header h2 {
    font-size: 1.1rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--text-highlight);
    font-weight: 500;
    margin-bottom: 4px;
}

.story-act-header p {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
}

/* End-of-chapter screen */
.end-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    animation: fadeIn 1.5s ease forwards;
}
.end-screen-inner { text-align: center; max-width: 420px; }
.end-title {
    font-size: 1.3rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--text-highlight);
    font-weight: 500;
    margin-bottom: 4px;
}
.end-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 20px;
}
.end-divider {
    width: 60px;
    height: 1px;
    background: var(--border-color);
    margin: 0 auto 20px;
}
.end-thanks {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
    line-height: 1.6;
}
.end-wip {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 20px;
}
.end-follow {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}
.end-socials {
    display: flex;
    justify-content: center;
    gap: 16px;
}
.end-socials a {
    color: rgba(255,255,255,0.45);
    font-size: 0.7rem;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: color 0.2s;
}
.end-socials a:hover { color: rgba(255,255,255,0.85); }

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

/* Speaker name tag in text */
.speaker-tag {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-secondary);
    margin-bottom: 2px;
    margin-top: 8px;
    font-weight: 600;
    opacity: 0;
    animation: fadeIn 0.3s ease forwards;
}

.speaker-tag-player {
    color: var(--text-highlight);
}

/* Choices area — two columns: answers (left) and the forward zone (right).
   This block is bottom-anchored: .vn-text-area above it is flex:1, so the
   row grows UPWARD and its bottom edge is the one fixed reference in the
   layout. Both columns therefore hang off that bottom edge, which keeps the
   forward button's lower half in the same spot no matter how many answers
   are on screen (1 to 8 — most nodes have 4 to 6). */
.vn-choices {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 16px 32px 20px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    /* Sized so the forward button keeps its full 64px during plain dialogue:
       36px padding + 64 button + 6 gap + 26 Skip + 6 gap + 6 Back margin +
       26 Back. Change any of those and this has to follow, or the button
       gets squeezed. Raising it steals height from the reading area on every
       node, not just the ones with answers. */
    min-height: 170px;
    /* Safety net for short screens. The row is flex-shrink: 0 and the answer
       buttons are too, so without a cap the stack simply grows past the
       bottom edge of the fixed-position screen — nothing scrolls, and the
       answers below the fold cannot be tapped at all. On a 360px-tall
       landscape phone (the most common Android size) that hit at four
       answers, and a question hub whose only exit is the last answer became
       a hard softlock. Capping the row hands the overflow to #actions, which
       scrolls. The max-height media query further down keeps most nodes from
       ever reaching that point. */
    max-height: 78%;
}

#actions {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* "safe" is what makes the scrolling below actually work. With a plain
       flex-end, an overflowing stack spills past the START edge, and a
       scroll container cannot reach overflow on that side — scrollHeight
       stays equal to clientHeight and the first answers are simply gone.
       "safe" falls back to flex-start the moment the content overflows, so
       the spill moves to the bottom where it can be scrolled to. While
       everything fits, this behaves exactly like flex-end, which is what
       keeps the stack growing upward off the fixed bottom edge.
       Declared twice on purpose: an engine too old for "safe" ignores the
       second line and keeps the first. */
    justify-content: safe flex-end;
    /* min-height: 0 is what actually lets this shrink below its content —
       a flex item defaults to min-height: auto and would otherwise push the
       row past the cap above and take the overflow with it. */
    min-height: 0;
    overflow-y: auto;
}

/* The answer buttons sit inside a role="group" wrapper, so the spacing has
   to live here — a gap on #actions only ever saw that single wrapper as its
   child and did nothing. */
.choice-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Navigation column: the forward pair (▶ and Skip) plus Back underneath.
   Clicking around in the forward pair is always harmless — both mean "keep
   going" and both go dead the moment a decision is required. Fixed width
   rather than a percentage: answers run to ~120 characters and need the
   remaining width to stay on one line. */
.forward-zone {
    flex: 0 0 180px;
    display: flex;
    flex-direction: column;
    /* Pinned to the bottom of the row. The row grows upward as answers pile
       up, so anchoring here is what keeps the button in one place. */
    justify-content: flex-end;
    gap: 6px;
}

/* Fixed height on purpose: this is the one control the player hits over and
   over, so it must never change size or position. It does NOT stretch with
   the answer stack. .vn-choices' min-height is this height plus the gap,
   the Skip button and the padding — change one, change the other. */
.forward-btn {
    flex: 0 0 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 1.3rem;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all var(--transition);
}

.forward-btn:hover:not(:disabled) {
    border-color: var(--accent-light);
    background: var(--bg-card-hover);
    color: var(--text-highlight);
}


/* Disabled = answers are up. This is the state that actually prevents the
   misclick: a player clicking through dialogue keeps their cursor in this
   zone, and the zone stops responding the instant a decision is required. */
.forward-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.forward-skip,
.forward-back {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
}

/* Back is the odd one out in this column — it moves the other way, and it is
   live precisely when the forward pair is not. Same button style so the
   column reads as one group, but pushed down a little so it does not look
   like a third way forward. The arrow carries the rest of the distinction. */
.forward-back {
    margin-top: 6px;
}

/* Disabled system buttons: Skip while answers are up (see
   ui.setSkipEnabled — it is NOT simply mirroring the forward button, since
   Skip stays live during the line-reveal animation) and Back while there is
   no decision to take back. */
.sys-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.sys-btn:disabled:hover {
    color: var(--text-muted);
    border-color: var(--border-color);
    background: transparent;
}

/* Story choice buttons */
.story-choice-btn {
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    transition: all var(--transition);
    line-height: 1.5;
    width: 100%;
    /* #actions is a flex column: without this the buttons would shrink to
       fit instead of making the row taller, and a node with six answers
       would squash them all. */
    flex-shrink: 0;
}

.story-choice-btn:hover {
    border-color: var(--border-hover);
    border-left-color: var(--choice-trait-color, var(--border-hover));
    background: var(--bg-card-hover);
    color: var(--text-highlight);
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
}

.story-choice-btn .choice-number {
    color: var(--text-muted);
    margin-right: 8px;
    font-size: 0.8rem;
}

/* Choice icons (personality/background symbols) — displayed at end of text */
.story-choice-btn .choice-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    vertical-align: middle;
    margin-left: 8px;
    opacity: 0.5;
    filter: grayscale(0.3);
    transition: all var(--transition);
}

.story-choice-btn:hover .choice-icon {
    opacity: 1;
    filter: grayscale(0) drop-shadow(0 0 6px rgba(255,255,255,0.2));
    transform: scale(1.15);
}

/* Stat-locked choice (greyed out, not clickable) */
.story-choice-btn.choice-stat-locked {
    opacity: 0.4;
    cursor: not-allowed;
    border-left-color: var(--border-color);
}

.story-choice-btn.choice-stat-locked:hover {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
    box-shadow: none;
}

.choice-locked {
    display: inline-block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-left: 8px;
    vertical-align: middle;
}

/* Continue / action button */
.action-btn {
    padding: 10px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    width: 100%;
    text-align: center;
}

.action-btn:hover {
    border-color: var(--border-hover);
    background: var(--bg-card-hover);
    color: var(--text-highlight);
}

.action-btn.primary {
    background: linear-gradient(135deg, #333, #222);
    border-color: var(--accent-neutral);
    color: var(--text-highlight);
}

.action-btn.primary:hover {
    background: linear-gradient(135deg, #444, #333);
    border-color: var(--accent-light);
}

/* ─── System Bar (Bottom) ─── */
.vn-system-bar {
    grid-column: 1 / -1;
    /* Grid mirrors .vn-layout (280px 1fr 280px) so Profile+Menu sit under
       the player portrait column while Skip stays centered in the middle. */
    display: grid;
    grid-template-columns: 280px 1fr 280px;
    align-items: center;
    padding: 8px 16px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.sys-bar-left {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.sys-bar-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sys-bar-right {
    /* Empty spacer under the NPC portrait column. */
}

.sys-btn {
    padding: 5px 14px;
    min-width: 110px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-family: var(--font-main);
    font-size: 0.75rem;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
}

.sys-btn:hover {
    color: var(--text-secondary);
    border-color: var(--border-hover);
    background: var(--bg-tertiary);
}

/* ═══════════════════════════════════════
   OVERLAY PANELS (Character / Relationships)
   ═══════════════════════════════════════ */

.overlay-panel {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--bg-overlay);
    align-items: center;
    justify-content: center;
}

.overlay-panel.active {
    display: flex;
}

.overlay-content {
    width: 94%;
    max-width: 800px;
    height: 85vh;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    padding: 0;
}

.overlay-content > .overlay-header {
    padding: 24px 24px 12px;
    flex-shrink: 0;
}

#overlay-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 24px 24px;
    display: flex;
    flex-direction: column;
}

.overlay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.overlay-header h2 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-secondary);
    font-weight: 400;
}

.btn-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 0 4px;
    transition: color var(--transition);
}

.btn-close:hover {
    color: var(--text-primary);
}

/* Back arrow in overlay-header — shown only when showOverlay is called
   with an onBack callback (e.g. from submenus opened via the Menu overlay). */
.btn-back {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0 10px 0 0;
    margin-right: 8px;
    transition: color var(--transition);
    line-height: 1;
}

.btn-back:hover {
    color: var(--text-primary);
}

/* Compact overlay: used for simple menus like the in-game Menu overlay
   where the default 85vh container is way too big for four buttons. */
.overlay-content.compact {
    height: auto;
    max-height: 85vh;
    max-width: 420px;
}

.overlay-content.compact #overlay-body {
    padding-bottom: 20px;
}

/* ─── Profile overlay tabs (Profile + Relationships) ─── */
.profile-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.profile-tab {
    padding: 8px 22px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    color: var(--text-muted);
    font-family: var(--font-main);
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--transition), background-color var(--transition);
    margin-bottom: -1px;
}

.profile-tab:focus {
    outline: none;
}

.profile-tab:hover {
    color: var(--text-secondary);
    background: var(--bg-tertiary);
}

.profile-tab.active {
    color: var(--text-highlight);
    background: var(--bg-secondary);
    border-color: var(--border-hover);
    border-bottom: 1px solid var(--bg-secondary);
}

.profile-tab-pane {
    display: flex;
    flex: 0 0 0;
    flex-direction: column;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

.profile-tab-pane.active {
    flex: 1;
    height: auto;
    overflow: visible;
    pointer-events: auto;
}

/* ─── Menu overlay (Save / Load / Settings / Main Menu) ─── */
.menu-overlay-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 260px;
    margin: 8px auto 4px;
}

.menu-overlay-btn {
    padding: 12px 24px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-family: var(--font-main);
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
}

.menu-overlay-btn:hover {
    color: var(--text-highlight);
    border-color: var(--border-hover);
    background: var(--bg-tertiary);
}

/* ─── Dossier / Profile ─── */
/* ── Dossier: USM Personnel File ── */
.dossier {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    background: rgba(255,255,255,0.015);
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Header bar */
.dossier-usm-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
}
.dossier-usm-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    opacity: 0.7;
}
.dossier-usm-header-text { display: flex; flex-direction: column; }
.dossier-usm-title {
    font-size: 0.62rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    font-weight: 600;
}
.dossier-usm-subtitle {
    font-size: 0.5rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(231,76,60,0.45);
    font-weight: 500;
}

/* Main: portrait left, fields right */
.dossier-main {
    display: flex;
    gap: 18px;
    padding: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.dossier-photo {
    width: 170px;
    height: 230px;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 3px;
    overflow: hidden;
    background: var(--bg-primary);
    position: relative;
}
.dossier-photo img,
.dossier-photo .dossier-layer {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.dossier-photo .dossier-layer {
    position: absolute;
    top: 0;
    left: 0;
}

/* Data fields */
.dossier-fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
}
.dossier-field {
    display: flex;
    align-items: baseline;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.dossier-field-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
    width: 110px;
    flex-shrink: 0;
}
.dossier-field-value {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.75);
}

/* Section bar (EVALUATION, STANDING, etc.) */
.dossier-section-bar {
    font-size: 0.55rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.2);
    padding: 6px 14px;
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    border-top: 1px solid rgba(255,255,255,0.06);
    font-weight: 600;
}

/* Stats row */
.dossier-stats {
    display: flex;
    justify-content: space-evenly;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dossier-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.dossier-stat-icon {
    width: 44px;
    height: 44px;
    object-fit: contain;
    opacity: 0.85;
}
.dossier-stat-label {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.dossier-stat-val {
    font-size: 1.15rem;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
}

/* Reputation / Standing (flag-driven) */
.dossier-standing {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.dossier-standing:last-child {
    border-bottom: none;
}
.dossier-standing-faction {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 130px;
}
.dossier-standing-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}
.dossier-standing-icon .faction-icon-img {
    width: 24px;
    height: 24px;
}
.dossier-standing-name {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.78);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.dossier-standing-sentence {
    font-size: 0.74rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.4;
    flex: 1;
}
/* Reserved empty block under the standings, so the future-faction rows
   have room to land without the credits jumping around when they do.
   Also flex-grows so the ASSETS / credits block gets pinned to the
   bottom of the dossier container no matter how tall it gets. */
.dossier-standing-spacer {
    flex: 1 1 auto;
    min-height: 260px;
}

/* Footer */
.dossier-footer {
    font-size: 0.45rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.12);
    text-align: center;
    padding: 8px 14px;
    border-top: 1px solid rgba(255,255,255,0.04);
    margin-top: auto;
}

/* Legacy — keep for compatibility */
.dossier-identity { display: none; }
.dossier-name { font-size: 1.15rem; font-weight: 700; color: var(--text-highlight); letter-spacing: 0.5px; }
.dossier-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.dossier-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.dossier-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 12px 0;
}

.dossier-section-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.char-field {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
}

.char-field .label {
    color: var(--text-secondary);
}

.char-field .value {
    color: var(--text-highlight);
    font-weight: 500;
}

/* ─── Relationships (in overlay) ─── */

/* ─── Relationship File Viewer ─── */
.rel-faction-dropdown {
    margin-bottom: 12px;
}
.rel-faction-dropdown select {
    width: 100%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 8px 12px;
    border-radius: var(--radius);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
}
.rel-faction-dropdown select:hover {
    border-color: var(--border-hover);
}
.faction-icon-img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    vertical-align: middle;
}

.rel-file-group {
    display: flex;
    flex-direction: column;
}
.rel-file-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rel-file-arrow {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    width: 32px;
    height: 60px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 1rem;
    flex-shrink: 0;
    transition: all 0.15s;
}
.rel-file-arrow:hover {
    border-color: var(--border-hover);
    color: var(--text-secondary);
}
.rel-npc-file {
    flex: 1;
    min-width: 0;
}
.rel-npc-file .dossier {
    flex: none;
}

.rel-pips {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 3px;
}

/* 15 vertical ticks per side, filled outward from the center (1 point = 1 tick) */
.rel-bar {
    width: 3px;
    height: 16px;
    border-radius: 1px;
    background: rgba(255,255,255,0.10);
    transition: background 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
}

.rel-bar.neg.filled {
    background: #c0392b;
    box-shadow: 0 0 3px rgba(231,76,60,0.45);
}

.rel-bar.pos.filled {
    background: #27ae60;
    box-shadow: 0 0 3px rgba(46,204,113,0.45);
}

.rel-bar.rom.filled {
    background: #e87db4;
    box-shadow: 0 0 3px rgba(232,125,180,0.5);
}

.rel-pip-center {
    width: 4px;
    height: 18px;
    background: rgba(255,255,255,0.25);
    border-radius: 2px;
    margin: 0 3px;
    flex-shrink: 0;
}


.rel-row-quote em {
    color: var(--text-secondary);
}

.relation-section-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    margin: 16px 0 8px;
}

.relation-card {
    padding: 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    margin-bottom: 8px;
}

.relation-card-top {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.relation-portrait {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    position: relative;
}

.relation-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.relation-portrait .rel-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}


.relation-card-info {
    flex: 1;
    min-width: 0;
}

.relation-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.relation-name { font-weight: 600; font-size: 0.9rem; }

.relation-status {
    font-size: 0.7rem;
    padding: 2px 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-secondary);
}

.relation-detail {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.relation-bar-container {
    height: 6px;
    background: linear-gradient(to right, #0a0a0a, rgba(255,255,255,0.15));
    border-radius: 3px;
    overflow: hidden;
    margin-top: 8px;
    position: relative;
}

.relation-bar-indicator {
    position: absolute;
    top: -1px;
    width: 3px;
    height: 8px;
    background: var(--text-secondary);
    border-radius: 1px;
    transition: left var(--transition);
    box-shadow: 0 0 4px rgba(255,255,255,0.3);
}

.relation-bar {
    display: none;
}

.relation-bar.faction { background: #8e44ad; }

/* ─── Collapsible sections in dossier ─── */
.dossier-collapsible { margin-bottom: 4px; }

.dossier-collapse-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 4px 0;
    user-select: none;
}

.dossier-collapse-header:hover .dossier-section-label { color: var(--text-secondary); }

.dossier-collapse-toggle {
    font-size: 0.6rem;
    color: var(--text-muted);
    transition: transform 0.2s;
}

.dossier-collapse-body { display: none; padding-top: 8px; }
.dossier-collapse-body.open { display: block; }

.reputation-entry { margin-bottom: 8px; }

.reputation-sentence {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
    padding: 4px 0 4px 8px;
    border-left: 2px solid var(--border-color);
    line-height: 1.5;
}

.faction-card {
    padding: 10px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    margin-bottom: 6px;
}

.faction-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.faction-name { font-weight: 500; font-size: 0.85rem; }
.faction-value { font-size: 0.7rem; color: var(--text-muted); font-family: var(--font-mono); }

/* ═══════════════════════════════════════
   CONFIRMATION MODAL
   ═══════════════════════════════════════ */

.confirm-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 300;
    background: var(--bg-overlay);
    align-items: center;
    justify-content: center;
}

.confirm-modal.active {
    display: flex;
}

.confirm-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 28px 32px;
    text-align: center;
    max-width: 360px;
    width: 90%;
}

.confirm-box p {
    color: var(--text-primary);
    margin-bottom: 24px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.confirm-actions .btn {
    min-width: 100px;
}

/* ═══════════════════════════════════════
   SHARED COMPONENTS
   ═══════════════════════════════════════ */

.btn {
    padding: 10px 24px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    text-align: center;
}

.btn:hover { border-color: var(--border-hover); background: var(--bg-card-hover); color: var(--text-highlight); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn.primary { background: linear-gradient(135deg, #333, #222); border-color: var(--accent-neutral); color: var(--text-highlight); }
.btn.primary:hover { background: linear-gradient(135deg, #444, #333); border-color: var(--accent-light); }
.btn.danger { border-color: var(--danger-color); color: var(--danger-color); background: transparent; }
.btn.danger:hover { background: rgba(192,57,43,0.1); }
.btn.muted { background: transparent; border-color: var(--text-muted); color: var(--text-muted); }
.btn.muted:hover { color: var(--text-secondary); border-color: var(--text-secondary); }
.btn.wide { min-width: 220px; }

/* ─── Utilities ─── */
.hidden { display: none !important; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ─── Responsive ─── */
@media (max-width: 1000px) {
    .vn-layout { grid-template-columns: 180px 1fr 180px; }
    .vn-system-bar { grid-template-columns: 180px 1fr 180px; }
    .sys-bar-left { gap: 6px; }
    .vn-text-area { padding: 16px 20px; }
    .vn-choices { padding: 12px 20px 14px; }
    /* Ramp the forward zone down with the viewport so answers keep enough
       width to stay on one line (they run to ~120 characters). */
    .forward-zone { flex-basis: 140px; }
}

/* ─── Save Upload Row ─── */
.save-upload-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 4px;
}

.save-upload-label {
    flex: 1;
    font-size: 0.85em;
    color: var(--text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ─── Save Slots ─── */
.save-slots {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.save-slot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: border-color 0.2s;
}

.save-slot:hover {
    border-color: var(--accent);
}

.save-slot-header {
    font-weight: 600;
    min-width: 50px;
    color: var(--accent);
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.save-slot-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.save-slot.empty .save-slot-info {
    color: var(--text-muted, #555);
    font-style: italic;
}

.save-slot-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.save-slot-time {
    font-size: 0.8em;
    color: var(--text-muted, #888);
}

/* Personality / background / origin badges — identify a save at a glance. */
.save-slot-traits {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-items: center;
}

.save-slot-trait {
    width: 24px;
    height: 24px;
    object-fit: contain;
    opacity: 0.65;
    filter: grayscale(0.3);
    transition: all var(--transition);
}

.save-slot:hover .save-slot-trait {
    opacity: 1;
    filter: grayscale(0);
}

.save-slot-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.save-slot-btn {
    padding: 5px 12px;
    font-size: 0.8em;
    min-width: 0;
}

.save-slot-btn.download {
    background: transparent;
    border-color: var(--border-color);
    color: var(--text-secondary);
    font-size: 1rem;
    padding: 3px 8px;
    line-height: 1;
}

.save-slot-btn.download:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent-light);
    color: var(--text-highlight);
}

.save-slot-btn.delete {
    background: transparent;
    border-color: #633;
    color: #c66;
}

.save-slot-btn.delete:hover {
    background: #422;
    border-color: #944;
}

/* ─── Breathing ───
   Handled on the canvas (portraitCompositor.enableBreathing), not here.
   A CSS scaleY on the whole element resampled the entire downscaled portrait
   every frame, so the whole figure shimmered and the hips at the bottom edge
   looked like they were bobbing. The canvas version moves only the slice
   above the waist and leaves the lower body pixel-identical. */

/* ─── Tablet (700px) ─── */
@media (max-width: 700px) {
    .vn-layout { grid-template-columns: 100px 1fr 100px; }
    /* Below 700px the portrait columns are too narrow for two full buttons,
       so let Profile+Menu wrap into the space using a slightly wider slot. */
    .vn-system-bar { grid-template-columns: auto 1fr auto; padding: 6px 10px; }
    .sys-bar-left { gap: 4px; }
    .forward-zone { flex-basis: 100px; }
    .menu-banner { max-width: 400px; }
    .btn.wide { min-width: 180px; }
    .option-grid, .option-grid.grid-3, .option-grid.grid-4 { grid-template-columns: 1fr 1fr; }
    .option-card { min-height: 100px; padding: 14px 12px; }
    .option-card .option-icon { width: 48px; height: 48px; }
    .card-stat-badge .stat-tooltip { white-space: normal; min-width: 160px; }

    /* Overlay */
    .overlay-content { width: 98%; height: 90vh; }

    /* Dossier */
    .dossier-main { flex-direction: column; align-items: center; }
    .dossier-photo { width: 140px; height: 190px; margin-bottom: 10px; }
    .dossier-fields { width: 100%; }
    .dossier-stats { flex-wrap: wrap; justify-content: center; }
}

/* ─── Mobile (550px) ─── */
@media (max-width: 550px) {
    /* Game layout: fullscreen text, hide side portraits.
       Rows stay 1fr/auto as in the base rule: the portraits are display:none
       and so occupy no grid cell, leaving just #vn-center and the system bar.
       A four-row template handed #vn-center the auto row and the system bar
       the 1fr one, which stretched the bar over most of the screen and left
       the text area at its content height (~86px on a 820px-tall phone). */
    .vn-layout {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
    }
    .portrait-area { display: none; }

    /* System bar: compact two-column layout — left group + centered Skip. */
    .vn-system-bar {
        grid-template-columns: auto 1fr auto;
        gap: 4px;
        padding: 6px 8px;
    }
    .sys-bar-right { display: none; }
    .sys-btn {
        padding: 8px 6px;
        font-size: 0.65rem;
        min-height: 36px;
        min-width: 82px;
    }

    /* Topbar compact */
    .vn-topbar { padding: 8px 12px; min-height: 36px; }
    .vn-chapter { font-size: 0.6rem; }
    .vn-credits { font-size: 0.7rem; }

    /* Text area: more padding, larger text for readability */
    .vn-text-area { padding: 14px 16px; }
    /* NOTE: this used to target .choice-btn, a class no other rule defines
       and the engine never assigns — story answers use .story-choice-btn, so
       the touch-target sizing below never actually applied on phones.
       Font size is deliberately left out: [data-font-size] .story-choice-btn
       is more specific and would win anyway, and the player's font-size
       setting should stay in charge. */
    /* Leaves the forward button its 48px after padding, Skip, Back and the
       gaps — a proper thumb target for all three. */
    .vn-choices { padding: 10px 16px 14px; gap: 8px; min-height: 166px; }
    .story-choice-btn { padding: 12px 14px; min-height: 44px; }
    /* Narrow glyph strip — portraits are hidden here, so the answers need
       nearly the whole width to stay readable. */
    .forward-zone { flex-basis: 72px; }
    .forward-btn { flex-basis: 48px; font-size: 1.1rem; }

    /* Menu */
    .menu-banner { max-width: 280px; }
    .menu-container { padding: 24px 16px; }
    .btn.wide { min-width: 200px; font-size: 0.85rem; padding: 14px 20px; }
    .menu-version { margin-top: 28px; }
    .menu-credit { margin-top: 20px; }
    .menu-socials { gap: 10px; }

    /* Disclaimer */
    .disclaimer-container { padding: 20px 16px; }
    .disclaimer-text { font-size: 0.82rem; }

    /* Character creation */
    #screen-creation { padding: 20px 0; }
    .creation-container { width: 96%; }
    .cc-portrait-preview canvas { width: 200px; height: 300px; }
    .cc-selectors { max-width: 100%; }
    .cc-selector-row { flex-wrap: nowrap; }
    .form-row { flex-direction: column; gap: 0; }
    .option-grid, .option-grid.grid-3, .option-grid.grid-4 { grid-template-columns: 1fr; }
    .option-card { min-height: 80px; padding: 12px 10px; }
    .option-card .option-icon { width: 40px; height: 40px; }
    .option-card .option-title { font-size: 0.8rem; }

    /* Overlay fullscreen on mobile */
    .overlay-content {
        width: 100%;
        height: 100vh;
        max-width: 100%;
        border-radius: 0;
        border: none;
    }
    .overlay-header { padding: 10px 14px; }
    .overlay-body { padding: 10px 14px; }

    /* Save slots */
    .save-slot { flex-wrap: wrap; padding: 10px; gap: 8px; }
    .save-slot-actions { width: 100%; justify-content: flex-end; }
    .save-slot-btn { padding: 8px 14px; min-height: 36px; }

    /* Dossier cards */
    .dossier { font-size: 0.85rem; }
    .dossier-main { flex-direction: column; align-items: center; padding: 12px; }
    .dossier-photo { width: 120px; height: 165px; margin-bottom: 8px; }
    .dossier-fields { width: 100%; }
    .dossier-field-label { width: 90px; font-size: 0.65rem; }
    .dossier-field-value { font-size: 0.78rem; }
    .dossier-stats { flex-wrap: wrap; gap: 16px; padding: 10px; }
    .dossier-stat-icon { width: 32px; height: 32px; }

    /* Relationship file nav */
    .rel-file-arrow { font-size: 1.2rem; padding: 8px 12px; min-height: 44px; }
    .rel-faction-dropdown select { font-size: 0.8rem; padding: 8px 10px; }

    /* Confirm modal */
    .confirm-box { width: 92%; padding: 20px 16px; }
    .confirm-actions .btn { min-height: 44px; padding: 12px 20px; }

    /* Options */
    .options-container { width: 96%; padding: 20px 16px; }
    .volume-slider { height: 32px; }
    .option-row { flex-direction: column; gap: 6px; }
}

/* ─── Small phones (400px) ─── */
@media (max-width: 400px) {
    .vn-text-area { padding: 10px 12px; }
    .vn-choices { padding: 8px 12px 10px; min-height: 160px; }
    .story-choice-btn { padding: 10px 12px; min-height: 40px; }
    .forward-zone { flex-basis: 64px; }
    .sys-btn { padding: 6px 4px; font-size: 0.58rem; min-width: 66px; }
    .menu-banner { max-width: 220px; }
    .btn.wide { min-width: 160px; }
    .dossier-photo { width: 100px; height: 140px; }
    .cc-portrait-preview canvas { width: 160px; height: 240px; }
}

/* ─── Short screens (phone landscape, 500px and less) ───
   Every responsive rule above keys off WIDTH, but the answer bar's problem is
   HEIGHT: a phone held sideways is 800x360, wide enough that none of the
   compact rules fire, and short enough that the bar runs out of room. The odd
   consequence was that a 1067x480 screen fit FEWER answers than an 869x412
   one — it had cleared the 1000px width threshold and got the roomy desktop
   paddings back.

   This block trims the fixed furniture (topbar, forward column, paddings) so
   the answers themselves keep their readable size. It comes last so it wins
   over the width queries where both apply.

   min-height follows the same rule as the desktop one: it must equal this
   block's vertical padding plus the full height of .forward-zone, or the
   forward button gets squeezed during plain dialogue. Measured here: 18
   padding + 111 column = 129, so 130. The block below lands at 12 + 108 =
   120. Change a padding, a gap or a button size and re-measure — the
   sub-pixel button heights make the sum easy to get wrong on paper. */
@media (max-height: 500px) {
    .vn-topbar { padding: 6px 16px; min-height: 30px; }
    .vn-text-area { padding: 10px 20px; }
    .vn-choices { padding: 8px 20px 10px; gap: 10px; min-height: 130px; }
    .story-choice-btn { padding: 7px 14px; }
    .forward-zone { flex-basis: 120px; gap: 4px; }
    .forward-btn { flex-basis: 48px; font-size: 1.1rem; }
    .forward-back { margin-top: 4px; }
    .sys-btn { padding: 4px 10px; min-width: 90px; }

    /* Main menu: banner and spacing shrink so the version line, the credit
       and the social links stay above the fold instead of needing a scroll
       on a screen that cannot scroll comfortably. */
    .menu-banner img { max-height: 26vh; }
    .menu-container { padding: 8px; }
    .menu-version { margin-top: 12px; }
    .menu-credit { margin-top: 8px; }
    .btn.wide { padding: 10px 20px; }

    /* Character creation: the intro step put "Begin Recruitment" below the
       fold on a 360px screen, so a new game opened on a wall of text with no
       visible button. */
    #screen-creation { padding: 10px 0; }
    .briefing-header { margin-bottom: 10px; padding-bottom: 8px; }
    .briefing-usm-logo { width: 32px; height: 32px; margin-bottom: 4px; }
    .briefing-badge { margin-bottom: 6px; }
    .briefing-title { font-size: 1rem; margin-bottom: 4px; }
    .cc-intro-text { padding: 6px 16px; }
    .cc-intro-line { line-height: 1.5; margin-bottom: 2px; }
}

/* ─── Very short screens (16:9 phone landscape, 400px and less) ───
   At 360px the trimmed briefing header still pushed "Begin Recruitment" off
   the bottom, so the first screen of a new game was a wall of text with no
   visible button. The USM crest is decoration here and the badge repeats what
   the title says, so both go; the step itself stays intact. */
@media (max-height: 400px) {
    .briefing-usm-logo { display: none; }
    .briefing-badge { display: none; }

    /* Squeeze the fixed furniture once more so a five-answer node still
       lands inside the bar instead of behind the scroll. The answer font
       stays untouched on purpose — [data-font-size] .story-choice-btn is
       more specific anyway, and the player's text-size setting stays in
       charge. Only the space around the text gives way. */
    .vn-topbar { padding: 4px 16px; min-height: 26px; }
    .vn-system-bar { padding: 4px 12px; }
    .vn-text-area { padding: 6px 20px; }
    .vn-choices { padding: 6px 20px 6px; min-height: 120px; }
    .choice-group { gap: 4px; }
    .story-choice-btn { padding: 4px 12px; }
}

/* ─── Landscape orientation hint (phones in portrait) ─── */
@media (max-width: 550px) and (orientation: portrait) and (max-height: 700px) {
    #landscape-hint { display: flex !important; }
}
@media (min-width: 551px), (orientation: landscape) {
    #landscape-hint { display: none !important; }
}