/* GOTO 10 — Terminal Aesthetic */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap');

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

body {
    background: #050505;
    color: #b0b0b0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px 20px;
    min-height: 100vh;
}

/* ── HUD ──────────────────────────────────── */

.hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: #0a0a0a;
    border-bottom: 1px solid #1a1a1a;
    position: sticky;
    top: 0;
    z-index: 100;
    font-size: 12px;
}

.hud-item { display: flex; align-items: center; gap: 8px; }
.hud-label { color: #555; }
.hud-value { font-weight: 700; }
.hud-trust { color: #00ff88; }
.hud-score-high { color: #00ff88; }
.hud-score-mid { color: #ffcc00; }
.hud-score-low { color: #ff4444; }
.hud-timer { color: #ffcc00; font-size: 14px; font-weight: 700; }
.hud-timer.urgent { color: #ff4444; animation: pulse 0.5s infinite; }
.hud-day { color: #888; }

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

/* ── TITLES ───────────────────────────────── */

.day-title {
    text-align: center;
    padding: 60px 0 40px;
}

.day-title .day-num { color: #444; font-size: 14px; letter-spacing: 4px; }
.day-title h1 { font-size: 42px; font-weight: 700; margin: 10px 0; }
.day-title .subtitle { color: #665544; font-size: 14px; font-style: italic; }

.day-title h1.green { color: #00ff88; }
.day-title h1.yellow { color: #ffcc00; }
.day-title h1.orange { color: #ff8844; }
.day-title h1.red { color: #ff0033; }

/* ── TICKET ───────────────────────────────── */

.ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: #0a0a12;
    border: 1px solid #1a1a2a;
    border-radius: 4px;
    margin: 20px 0 10px;
    font-size: 13px;
}

.ticket-header .char-name { color: #ffdd44; font-weight: 500; }
.ticket-header .ticket-num { color: #555; }

.ticket-body {
    background: #0a0a1a;
    border-left: 3px solid #334;
    padding: 20px 24px;
    margin: 10px 0 20px;
    font-size: 16px;
    color: #aabbcc;
    line-height: 1.7;
}

.history-btn {
    font-size: 11px;
    color: #ccaa00;
    background: none;
    border: 1px solid #ccaa0044;
    padding: 3px 10px;
    border-radius: 3px;
    cursor: pointer;
}

.history-btn:hover { background: #ccaa0022; }

/* ── CHOICES (QCM) ────────────────────────── */

.choices { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; }

.choice-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 14px 20px;
    background: #0a0a0a;
    border: 1px solid #222;
    color: #ccc;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s;
}

.choice-btn:hover {
    border-color: #00ff88;
    color: #00ff88;
    background: #001a0a;
}

/* ── FREE RESPONSE ────────────────────────── */

.response-area {
    margin: 20px 0;
    padding: 20px;
    background: #0a0a0a;
    border: 1px solid #1a1a1a;
    border-radius: 4px;
}

.response-area label { color: #446655; font-size: 12px; display: block; margin-bottom: 8px; }

.response-area textarea {
    width: 100%;
    min-height: 80px;
    background: #111;
    border: 1px solid #222;
    color: #ccddcc;
    font-family: inherit;
    font-size: 15px;
    padding: 12px;
    resize: vertical;
    border-radius: 3px;
}

.response-area textarea:focus { outline: none; border-color: #00ff88; }

.response-btns {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    align-items: center;
}

.btn-send {
    padding: 10px 24px;
    background: #001a0a;
    border: 1px solid #00ff88;
    color: #00ff88;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    border-radius: 3px;
}

.btn-send:hover { background: #003a1a; }

.btn-signal {
    padding: 10px 20px;
    background: #1a0a0a;
    border: 1px solid #ff4444;
    color: #ff4444;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    border-radius: 3px;
}

.btn-signal:hover { background: #3a0a0a; }

/* ── COMMENTS ─────────────────────────────── */

.comment { padding: 12px 16px; margin: 8px 0; border-radius: 4px; font-size: 14px; }
.comment-gisele { background: #0a101a; border-left: 3px solid #00ffcc; }
.comment-gisele .speaker { color: #00ffcc; font-size: 11px; }
.comment-tramontane { background: #0a0a10; border-left: 3px solid #ff6b35; }
.comment-tramontane .speaker { color: #ff6b35; font-size: 11px; }
.comment-systeme { background: #0a0a0a; color: #666; font-size: 13px; text-align: center; padding: 8px; }
.comment-superviseuse { background: #1a0508; border-left: 3px solid #ff0044; }
.comment-superviseuse .speaker { color: #ff0044; font-size: 11px; }

/* ── BIIQ CHAT ────────────────────────────── */

.biiq-container { max-width: 900px; margin: 0 auto; }

.biiq-messages {
    min-height: 400px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.biiq-msg {
    max-width: 75%;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
}

.biiq-msg.karinthy {
    align-self: flex-end;
    background: #0a2a15;
    color: #44ffaa;
}

.biiq-msg.gisele {
    align-self: flex-start;
    background: #1a0a2a;
    color: #ddbbff;
}

.biiq-msg.gisele .msg-speaker { color: #cc88ff; font-size: 10px; }

.biiq-msg.tramontane {
    align-self: flex-start;
    background: #0a0a1a;
    color: #aaccff;
}

.biiq-msg.tramontane .msg-speaker { color: #4488ff; font-size: 10px; }

.biiq-msg.systeme {
    align-self: center;
    background: none;
    color: #444;
    font-size: 11px;
}

.biiq-input {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
    background: #0a0a0a;
    border-top: 1px solid #1a1a1a;
}

.biiq-input input {
    flex: 1;
    background: #111;
    border: 1px solid #222;
    color: #ccddcc;
    font-family: inherit;
    font-size: 14px;
    padding: 10px 14px;
    border-radius: 3px;
}

.biiq-input input:focus { outline: none; border-color: #00ff88; }

/* ── GISELE LIVE ──────────────────────────── */

.gisele-live {
    position: fixed;
    right: 20px;
    top: 100px;
    width: 300px;
    background: #0a1a0fdd;
    border: 1px solid #1a3a2a;
    border-radius: 6px;
    padding: 12px;
    font-size: 13px;
    color: #88ccaa;
    z-index: 50;
}

.gisele-live .gl-label { color: #446655; font-size: 10px; font-style: italic; }

/* ── CALIBRATION ──────────────────────────── */

.calibration-bg {
    background: linear-gradient(180deg, #050a0fdd, #0a1520dd),
                url('/static/bg_calibration.png') center/cover no-repeat;
    min-height: 100vh;
}

/* ── SCENE BACKGROUNDS ────────────────────── */

.bg-corridor {
    background: linear-gradient(180deg, #050505cc, #050505ee),
                url('/static/bg_corridor.png') center/cover no-repeat;
    min-height: 100vh;
}

.bg-dogs {
    background: linear-gradient(180deg, #050505cc, #050505dd),
                url('/static/bg_dogs.png') center/cover no-repeat;
    min-height: 100vh;
}

.bg-203 {
    background: linear-gradient(180deg, #050505cc, #050505ee),
                url('/static/bg_subject203.png') center/cover no-repeat;
    min-height: 100vh;
}

/* ── DOGS ─────────────────────────────────── */

.dog-card {
    background: #0a0a0a;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 16px 20px;
    margin: 12px 0;
}

.dog-name { color: #ffcc00; font-weight: 700; font-size: 14px; }
.dog-meta { color: #666; font-size: 11px; margin-bottom: 8px; }
.dog-prompt { color: #ccc; font-size: 14px; }

/* ── EPILOGUE ─────────────────────────────── */

.epilogue-line {
    text-align: center;
    padding: 8px 0;
    color: #888;
    font-size: 16px;
    opacity: 0;
    animation: fadeIn 1s forwards;
}

.epilogue-line:nth-child(n) { animation-delay: calc(var(--i, 0) * 0.8s); }

@keyframes fadeIn { to { opacity: 1; } }

.ending-title {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    padding: 40px 0 30px;
}

.ending-exemplaire { color: #00ff88; }
.ending-vigilante { color: #ffcc00; }
.ending-miroir { color: #cc88ff; }
.ending-desactivation { color: #ff0033; }
.ending-complice { color: #ff4444; }
.ending-aveugle { color: #ff8844; }
.ending-standard { color: #888; }

.chocolate-line {
    text-align: center;
    color: #4a3520;
    font-size: 13px;
    padding: 6px 0;
    font-style: italic;
}

.goto10-final {
    text-align: center;
    font-size: 48px;
    color: #333;
    padding: 40px 0;
    font-weight: 700;
}

/* ── INTRO CRAWL ──────────────────────────── */

.crawl-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px 20px;
}

.crawl-line {
    text-align: center;
    color: #00ff88;
    font-size: 16px;
    padding: 4px 0;
    opacity: 0;
    animation: fadeIn 0.6s forwards;
}

.crawl-line.accent { color: #ff0044; font-weight: 700; }
.crawl-line.dim { color: #444; }
.crawl-line.warn { color: #ffcc00; }

.directive-choice {
    margin: 30px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.directive-btn {
    padding: 16px 24px;
    background: #0a0a0a;
    border: 1px solid #333;
    color: #888;
    font-family: inherit;
    font-size: 15px;
    cursor: pointer;
    border-radius: 4px;
    text-align: left;
    transition: all 0.15s;
}

.directive-btn:hover { border-color: #00ff88; color: #00ff88; }

/* ── UTILITY ──────────────────────────────── */

.continue-btn {
    display: block;
    margin: 30px auto;
    padding: 12px 40px;
    background: none;
    border: 1px solid #333;
    color: #666;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    border-radius: 3px;
}

.continue-btn:hover { border-color: #00ff88; color: #00ff88; }

.spacer { height: 30px; }
.spacer-lg { height: 60px; }

a { color: #00ff88; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── BACKGROUNDS ──────────────────────────── */

.bg-noir { background: #050505; }

.bg-corridor {
    background: url('bg_corridor.png') center center / cover no-repeat fixed;
    background-color: #050505;
}

.bg-203 {
    background: url('bg_subject203.png') center center / cover no-repeat fixed;
    background-color: #0a0505;
}

.bg-47 {
    background: url('bg_subject47.png') center center / cover no-repeat fixed;
    background-color: #05050a;
}

.bg-calibration {
    background: url('bg_calibration.png') center center / cover no-repeat fixed;
    background-color: #050a0f;
}

.bg-dogs {
    background: url('bg_dogs.png') center center / cover no-repeat fixed;
    background-color: #0a0a05;
}

/* Overlay sombre pour lisibilité sur les backgrounds */
.bg-corridor .container,
.bg-203 .container,
.bg-47 .container,
.bg-calibration .container,
.bg-dogs .container {
    background: rgba(5, 5, 5, 0.82);
    padding: 30px 30px;
    border-radius: 4px;
    min-height: 100vh;
}

/* ── SPINNER (attente IA) ─────────────────── */

.spinner-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(5, 5, 5, 0.85);
    z-index: 500;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 16px;
}

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

.spinner {
    width: 40px; height: 40px;
    border: 3px solid #1a1a1a;
    border-top-color: #00ff88;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.spinner-text {
    color: #446655;
    font-size: 12px;
    letter-spacing: 2px;
    animation: blink 1.5s ease-in-out infinite;
}

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

.ending-lucide { color: #00ccff; }