/* ================================================================
   sql-escape-room.css — Sqlism Theme
   ================================================================ */

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

/* ── CSS VARIABLES ─────────────────────────────────────────── */
:root {
    --primary:        #8b5cf6;
    --primary-dark:   #7c3aed;
    --secondary:      #10b981;
    --bg-primary:     #ffffff;
    --bg-secondary:   #f8fafc;
    --bg-card:        #ffffff;
    --text-primary:   #1f2937;
    --text-secondary: #6b7280;
    --border:         #e5e7eb;
    --shadow:         rgba(0,0,0,0.10);
    --shadow-lg:      rgba(0,0,0,0.15);
    --navbar-bg:      #ffffff;
    --gradient:       linear-gradient(135deg,#8b5cf6 0%,#10b981 100%);
    --code-bg:        #1e1e2e;
    --code-text:      #cdd6f4;
    --mono:           'IBM Plex Mono', monospace;
    --warning-color:  #f59e0b;
    --danger-color:   #ef4444;
    /* Mission accent colours */
    --detective:      #c084fc;
    --hacker:         #34d399;
    --space:          #60a5fa;
}

[data-theme="dark"] {
    --bg-primary:    #111827;
    --bg-secondary:  #1f2937;
    --bg-card:       #1f2937;
    --text-primary:  #f9fafb;
    --text-secondary:#d1d5db;
    --border:        #374151;
    --shadow:        rgba(0,0,0,0.30);
    --shadow-lg:     rgba(0,0,0,0.50);
    --navbar-bg:     #111827;
    --code-bg:       #0d1117;
    --code-text:     #c9d1d9;
}

html  { scroll-behavior:smooth; }
body  {
    font-family:'Inter',sans-serif;
    background:var(--bg-secondary);
    color:var(--text-primary);
    line-height:1.6;
    transition:background-color .3s ease,color .3s ease;
    min-height:100vh;
}
button,textarea,input { font:inherit; }
code,kbd { font-family:var(--mono); }
a { color:var(--primary); text-decoration:none; }

/* ── HERO ──────────────────────────────────────────────────── */
.hero {
    background:var(--gradient);
    padding:3.8rem 2rem 4.2rem;
    text-align:center; color:#fff;
    position:relative; overflow:hidden;
    border-bottom:2px solid var(--border);
}
.hero::before {
    content:''; position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);
    background-size:26px 26px; opacity:.4; pointer-events:none;
}
.hero::after {
    content:''; position:absolute; inset:0;
    background:
        radial-gradient(ellipse 55% 70% at 8% 60%,rgba(255,255,255,.07) 0%,transparent 60%),
        radial-gradient(ellipse 40% 50% at 92% 20%,rgba(255,255,255,.06) 0%,transparent 60%);
    pointer-events:none;
}
.hero-content { position:relative; z-index:1; max-width:820px; margin:0 auto; }
.hero-eyebrow {
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(255,255,255,.18); backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.3);
    padding:6px 18px; border-radius:50px;
    font-size:.82rem; font-weight:700; letter-spacing:.05em;
    text-transform:uppercase; margin-bottom:18px;
}
.hero-h1 {
    font-size:clamp(2rem,5vw,3.4rem); font-weight:800; margin-bottom:14px;
    display:block; letter-spacing:-.02em;
}
.hero-para {
    font-size:clamp(.95rem,2vw,1.15rem); opacity:.92;
    margin-bottom:24px; max-width:660px; margin-left:auto; margin-right:auto;
}
.hero-stats { display:flex; justify-content:center; gap:1.2rem; flex-wrap:wrap; }
.hero-stats span {
    background:rgba(255,255,255,.18); padding:7px 18px; border-radius:50px;
    display:flex; align-items:center; gap:7px;
    backdrop-filter:blur(10px); font-size:.88rem;
}
[data-theme="dark"] .hero { background:linear-gradient(to right,#111827,#1f2937); }
[data-theme="dark"] .hero-h1,[data-theme="dark"] .hero-para,[data-theme="dark"] .hero-eyebrow {
    background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
[data-theme="dark"] .hero-stats span {
    background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    border:1px solid #7c3aed;
}

/* ── CONTAINER ─────────────────────────────────────────────── */
.container { max-width:1380px; margin:0 auto; padding:2rem 2rem 3rem; }

/* ── SCREEN SYSTEM ─────────────────────────────────────────── */
.screen { display:none; }
.screen.active { display:block; }

/* ── PANEL (base card) ─────────────────────────────────────── */
.panel {
    background:var(--bg-card);
    border-radius:16px;
    border:2px solid var(--border);
    box-shadow:0 4px 20px var(--shadow);
    overflow:hidden;
}

/* ── PANEL HEADER ──────────────────────────────────────────── */
.panel-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 20px;
    background:rgba(139,92,246,.1);
    border-bottom:2px solid var(--border);
    font-weight:700; font-size:.95rem; color:var(--text-primary);
    flex-wrap:wrap; gap:10px;
}
.panel-header > span:first-child { display:flex; align-items:center; gap:8px; }
.panel-header > span:first-child i { color:var(--primary); }

/* ── BADGE COUNT ───────────────────────────────────────────── */
.badge-count {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:22px; height:22px; padding:0 7px;
    border-radius:999px; font-size:.76rem; font-weight:700;
    background:rgba(139,92,246,.14); color:var(--primary);
    border:1px solid rgba(139,92,246,.22);
}

/* ── BUTTON GROUP ──────────────────────────────────────────── */
.panel-btn-group { display:flex; gap:8px; align-items:center; flex-shrink:0; }

/* ── SHARED BUTTON BASE ────────────────────────────────────── */
.btn-format,.btn-clear,.btn-copy,.btn-download,.btn-save,.btn-share {
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 14px; border-radius:8px;
    border:1.5px solid var(--border);
    background:var(--bg-secondary); color:var(--text-secondary);
    font-size:.82rem; font-weight:600;
    cursor:pointer; font-family:'Inter',sans-serif;
    transition:all .2s ease; white-space:nowrap;
}
.btn-format:hover,.btn-clear:hover,.btn-copy:hover,
.btn-download:hover,.btn-save:hover,.btn-share:hover {
    border-color:var(--primary); color:var(--primary);
    transform:translateY(-1px); box-shadow:0 4px 12px rgba(139,92,246,.15);
}

/* Run / primary CTA */
.btn-run {
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 26px; border-radius:999px; border:none;
    background:var(--gradient); color:#fff;
    font-size:.95rem; font-weight:700;
    cursor:pointer; font-family:'Inter',sans-serif;
    transition:transform .2s ease,box-shadow .2s ease;
    box-shadow:0 6px 20px rgba(139,92,246,.35);
    white-space:nowrap;
}
.btn-run:hover  { transform:translateY(-2px); box-shadow:0 10px 28px rgba(139,92,246,.45); }
.btn-run:active { transform:translateY(0); }

/* Hint / Skip buttons */
.btn-hint,.btn-skip {
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 14px; border-radius:8px;
    border:1.5px solid var(--border);
    background:var(--bg-secondary); color:var(--text-secondary);
    font-size:.82rem; font-weight:600; cursor:pointer;
    font-family:'Inter',sans-serif; transition:all .2s ease;
}
.btn-hint:hover { border-color:var(--warning-color); color:var(--warning-color); }
.btn-skip:hover { border-color:var(--text-secondary); color:var(--text-primary); }
.hint-cost { font-size:.72rem; opacity:.7; font-family:var(--mono); }

/* ── SECTION HEADER ────────────────────────────────────────── */
.mission-select-header { text-align:center; margin-bottom:24px; }
.section-title {
    font-size:1.5rem; font-weight:800; color:var(--text-primary);
    display:flex; align-items:center; justify-content:center; gap:10px;
    margin-bottom:6px;
}
.section-title i { color:var(--primary); }
.section-sub { color:var(--text-secondary); font-size:.93rem; }

/* ══════════════════════════════════════════
   MISSION SELECT SCREEN
══════════════════════════════════════════ */
.mission-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-bottom:24px;
}

.mission-card {
    border-radius:16px;
    border:2px solid var(--border);
    box-shadow:0 4px 20px var(--shadow);
    overflow:hidden;
    cursor:pointer;
    transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
    background:var(--bg-card);
    position:relative;
}
.mission-card:hover {
    transform:translateY(-4px);
    box-shadow:0 12px 36px rgba(139,92,246,.2);
    border-color:var(--primary);
}
.mission-card.completed { border-color:var(--secondary); }
.mission-card.completed::after {
    content:''; position:absolute; top:12px; right:12px;
    width:24px; height:24px; border-radius:50%;
    background:var(--secondary);
    display:flex; align-items:center; justify-content:center;
}

/* Mission banner */
.mission-banner {
    padding:32px 24px 22px;
    text-align:center;
    position:relative; overflow:hidden;
}
.mission-banner::before {
    content:''; position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,.15) 1px,transparent 1px);
    background-size:20px 20px; opacity:.5; pointer-events:none;
}
.mission-banner i.mission-icon {
    font-size:2.6rem; position:relative; z-index:1;
    display:block; margin-bottom:12px;
    filter:drop-shadow(0 2px 8px rgba(0,0,0,.25));
}
.mission-banner h3 {
    font-size:1.25rem; font-weight:800; color:#fff;
    position:relative; z-index:1; letter-spacing:-.01em;
}
.mission-banner p {
    font-size:.82rem; color:rgba(255,255,255,.82);
    position:relative; z-index:1; margin-top:4px;
}
/* mission colour variants */
.mission-detective .mission-banner { background:linear-gradient(135deg,#4c1d95,#7c3aed); }
.mission-hacker    .mission-banner { background:linear-gradient(135deg,#064e3b,#065f46); }
.mission-space     .mission-banner { background:linear-gradient(135deg,#1e3a5f,#1d4ed8); }

.mission-meta { padding:16px 20px 20px; }
.mission-progress-row {
    display:flex; align-items:center; gap:10px; margin-bottom:12px;
}
.mission-progress-bar {
    flex:1; height:6px; border-radius:999px;
    background:var(--border); overflow:hidden;
}
.mission-progress-fill {
    height:100%; border-radius:999px;
    background:var(--gradient);
    transition:width .5s ease;
}
.mission-progress-pct {
    font-family:var(--mono); font-size:.76rem; font-weight:700;
    color:var(--primary); min-width:32px; text-align:right;
}
.mission-rooms {
    display:flex; gap:6px; flex-wrap:wrap;
}
.mission-room-dot {
    width:28px; height:28px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    font-size:.72rem; font-weight:700;
    border:1.5px solid var(--border);
    background:var(--bg-secondary);
    color:var(--text-secondary);
}
.mission-room-dot.done { background:var(--secondary); border-color:var(--secondary); color:#fff; }
.mission-room-dot.current { background:var(--primary); border-color:var(--primary); color:#fff; }

.btn-start-mission {
    width:100%; margin-top:14px;
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:11px; border-radius:999px; border:none;
    background:var(--gradient); color:#fff;
    font-size:.92rem; font-weight:700; cursor:pointer;
    font-family:'Inter',sans-serif;
    transition:transform .2s ease,box-shadow .2s ease;
    box-shadow:0 4px 14px rgba(139,92,246,.28);
}
.btn-start-mission:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(139,92,246,.38); }

/* Score bar */
.score-bar { margin-top:0; }
.score-bar-body {
    display:flex; align-items:center; gap:32px; padding:18px 24px;
    flex-wrap:wrap;
}
.global-stat { display:flex; flex-direction:column; align-items:center; gap:3px; }
.gs-value {
    font-family:var(--mono); font-size:1.8rem; font-weight:800;
    background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.gs-label { font-size:.76rem; font-weight:600; color:var(--text-secondary); }

/* ══════════════════════════════════════════
   GAME SCREEN
══════════════════════════════════════════ */
.game-topbar { margin-bottom:18px; }
.room-progress {
    display:flex; gap:8px; align-items:center;
    padding:12px 20px 14px; flex-wrap:wrap;
}
.room-pill {
    display:flex; align-items:center; gap:5px;
    padding:5px 12px; border-radius:999px;
    border:1.5px solid var(--border);
    background:var(--bg-secondary);
    font-size:.78rem; font-weight:600; color:var(--text-secondary);
    transition:all .2s ease;
}
.room-pill.done    { background:rgba(16,185,129,.1);  border-color:var(--secondary); color:var(--secondary); }
.room-pill.active  { background:var(--gradient); border-color:transparent; color:#fff; box-shadow:0 3px 10px rgba(139,92,246,.3); }
.room-pill i { font-size:.7rem; }

.room-score-wrap { display:flex; align-items:center; gap:8px; }
.room-score-label { font-size:.78rem; font-weight:600; color:var(--text-secondary); }
.room-score-val {
    font-family:var(--mono); font-size:1rem; font-weight:800;
    background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

/* Game workspace layout */
.game-workspace { display:grid; grid-template-columns:1.1fr 0.9fr; gap:18px; align-items:start; }
.game-left  { display:flex; flex-direction:column; gap:16px; }
.game-right { display:flex; flex-direction:column; gap:16px; }

/* ── STORY PANEL ────────────────────────────────────────────── */
.story-panel { }
.story-body { padding:20px 22px; }
.story-scene {
    display:flex; gap:14px; align-items:flex-start; margin-bottom:16px;
}
.story-avatar {
    width:42px; height:42px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:1.1rem; color:#fff;
    background:var(--gradient);
}
.story-text { flex:1; }
.story-speaker {
    font-size:.76rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.06em; color:var(--primary); margin-bottom:4px;
}
.story-narrative {
    font-size:.9rem; color:var(--text-secondary); line-height:1.7;
}
.story-narrative strong { color:var(--text-primary); }

.story-clue-box {
    display:flex; align-items:flex-start; gap:10px;
    padding:12px 14px; border-radius:10px; margin-top:12px;
    background:rgba(139,92,246,.06); border:1.5px solid rgba(139,92,246,.2);
}
.story-clue-box i { color:var(--primary); flex-shrink:0; margin-top:2px; }
.story-clue-box p { font-size:.84rem; color:var(--text-secondary); line-height:1.6; }
.story-clue-box strong { color:var(--primary); }

/* ── SCHEMA PANEL ───────────────────────────────────────────── */
.schema-body { padding:16px 20px 18px; display:flex; flex-direction:column; gap:14px; }
.schema-hint-tag {
    font-size:.72rem; color:var(--primary); font-weight:600;
    background:rgba(139,92,246,.1); padding:3px 10px; border-radius:50px;
    border:1px solid rgba(139,92,246,.2);
}
.schema-table { }
.schema-table-name {
    display:inline-flex; align-items:center; gap:6px;
    font-family:var(--mono); font-size:.82rem; font-weight:700;
    color:var(--primary); background:rgba(139,92,246,.1);
    padding:4px 12px; border-radius:7px;
    border:1px solid rgba(139,92,246,.2); margin-bottom:8px;
}
.schema-table-name i { font-size:.75rem; }
.schema-cols {
    display:flex; flex-wrap:wrap; gap:6px;
}
.schema-col {
    display:inline-flex; align-items:center; gap:4px;
    font-family:var(--mono); font-size:.76rem;
    padding:3px 9px; border-radius:6px;
    border:1.5px solid var(--border);
    background:var(--bg-secondary); color:var(--text-secondary);
}
.schema-col.pk { border-color:rgba(245,158,11,.4); color:#d97706; background:rgba(245,158,11,.07); }
.schema-col.fk { border-color:rgba(59,130,246,.35); color:#3b82f6; background:rgba(59,130,246,.07); }
.schema-col i  { font-size:.65rem; }
.schema-sample {
    margin-top:8px; border-radius:10px; overflow:hidden;
    border:1px solid var(--border);
}
.schema-sample-header {
    padding:6px 12px; background:var(--bg-secondary);
    border-bottom:1px solid var(--border);
    font-size:.72rem; font-weight:700; color:var(--text-secondary);
    text-transform:uppercase; letter-spacing:.06em;
    display:flex; align-items:center; gap:6px;
}
.schema-sample-header i { color:var(--primary); }
.schema-sample-scroll { overflow-x:auto; }
.schema-sample table {
    width:100%; border-collapse:collapse; font-family:var(--mono); font-size:.76rem;
}
.schema-sample th {
    padding:6px 12px; background:rgba(139,92,246,.07);
    color:var(--text-secondary); font-weight:700; text-align:left;
    border-bottom:1px solid var(--border); white-space:nowrap;
}
.schema-sample td {
    padding:6px 12px; border-bottom:1px solid var(--border);
    color:var(--text-primary); white-space:nowrap;
}
.schema-sample tr:last-child td { border-bottom:none; }
.schema-sample tr:hover td { background:var(--bg-secondary); }
/* Easter egg row highlight */
.schema-sample tr.easter-egg td { color:var(--secondary); font-weight:600; }

/* ── CHALLENGE PANEL ────────────────────────────────────────── */
.challenge-task {
    padding:16px 20px 0;
    font-size:.92rem; color:var(--text-secondary); line-height:1.7;
}
.challenge-task strong { color:var(--text-primary); }
.challenge-task code {
    background:rgba(139,92,246,.1); color:var(--primary);
    padding:1px 6px; border-radius:4px;
    font-family:var(--mono); font-size:.86em;
    border:1px solid rgba(139,92,246,.18);
}
.editor-wrap { padding:14px 20px 0; }
.editor-label {
    display:block; margin-bottom:8px;
    font-size:.78rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.07em;
    color:var(--text-secondary);
}
textarea {
    display:block; width:100%;
    min-height:180px;
    padding:16px 18px;
    border:2px solid var(--border); border-radius:12px;
    resize:vertical;
    background:var(--code-bg); color:var(--code-text);
    line-height:1.7; font-size:.88rem;
    font-family:var(--mono); tab-size:4;
    transition:border-color .25s ease;
}
textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(139,92,246,.12); }
textarea::placeholder { color:rgba(205,214,244,.28); }
.action-row {
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    padding:14px 20px 20px;
}
.microcopy {
    display:flex; align-items:center; gap:6px;
    font-size:.82rem; color:var(--text-secondary); line-height:1.5;
}
.microcopy i { color:var(--primary); flex-shrink:0; }

/* ── RESULT PANEL ───────────────────────────────────────────── */
.result-panel { }
.result-body { padding:16px 18px; min-height:120px; }
.result-empty {
    display:flex; flex-direction:column; align-items:center;
    gap:8px; padding:28px 0; text-align:center;
    color:var(--text-secondary);
}
.result-empty i { font-size:1.8rem; opacity:.3; }
.result-empty p { font-size:.86rem; }
.result-status {
    font-size:.78rem; font-weight:700;
    padding:3px 10px; border-radius:999px;
}
.result-status.correct  { background:rgba(16,185,129,.12); color:var(--secondary); }
.result-status.wrong    { background:rgba(239,68,68,.1);   color:var(--danger-color); }
.result-status.easter   { background:rgba(245,158,11,.12); color:#d97706; }

.result-table-wrap { overflow-x:auto; border-radius:10px; border:1px solid var(--border); }
.result-table {
    width:100%; border-collapse:collapse;
    font-family:var(--mono); font-size:.8rem;
}
.result-table th {
    padding:8px 12px; background:rgba(139,92,246,.08);
    color:var(--text-secondary); font-weight:700;
    text-align:left; border-bottom:1px solid var(--border);
    white-space:nowrap;
}
.result-table td {
    padding:7px 12px; border-bottom:1px solid var(--border);
    color:var(--text-primary); white-space:nowrap;
}
.result-table tr:last-child td { border-bottom:none; }
.result-table tr:hover td { background:var(--bg-secondary); }

.result-feedback {
    margin-top:12px; padding:10px 14px;
    border-radius:10px; font-size:.86rem; line-height:1.6;
    display:flex; align-items:flex-start; gap:9px;
}
.result-feedback.correct { background:rgba(16,185,129,.08); border:1.5px solid rgba(16,185,129,.2); color:var(--text-secondary); }
.result-feedback.wrong   { background:rgba(239,68,68,.06);  border:1.5px solid rgba(239,68,68,.18); color:var(--text-secondary); }
.result-feedback.easter  { background:rgba(245,158,11,.08); border:1.5px solid rgba(245,158,11,.25); color:var(--text-secondary); }
.result-feedback i { flex-shrink:0; margin-top:2px; }
.result-feedback.correct i { color:var(--secondary); }
.result-feedback.wrong   i { color:var(--danger-color); }
.result-feedback.easter  i { color:#d97706; }

/* ── HINT PANEL ─────────────────────────────────────────────── */
.hint-log { padding:14px 18px; display:flex; flex-direction:column; gap:9px; min-height:60px; }
.hint-empty { font-size:.84rem; color:var(--text-secondary); font-style:italic; }
.hint-entry {
    position:relative;
    padding:10px 12px 10px 16px;
    border-radius:10px; border:1.5px solid var(--border);
    background:var(--bg-secondary);
    font-size:.84rem; color:var(--text-secondary); line-height:1.55;
    animation:fadeInUp .3s ease both;
}
.hint-entry::before {
    content:''; position:absolute;
    left:0; top:10px; bottom:10px;
    width:4px; border-radius:999px;
    background:rgba(245,158,11,.6);
}
.hint-entry strong { display:block; font-size:.74rem; font-weight:700; color:#d97706; margin-bottom:3px; text-transform:uppercase; letter-spacing:.05em; }
@keyframes fadeInUp { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

/* ── KEY PANEL ──────────────────────────────────────────────── */
.key-body { padding:20px 22px; text-align:center; }
.key-locked { display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--text-secondary); padding:16px 0; }
.key-locked i { opacity:.3; }
.key-locked p { font-size:.86rem; }

.key-unlocked { display:flex; flex-direction:column; align-items:center; gap:12px; }
.key-glow {
    width:72px; height:72px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--gradient);
    box-shadow:0 0 0 8px rgba(16,185,129,.15), 0 0 0 16px rgba(16,185,129,.07);
    animation:keyPulse 2s ease-in-out infinite;
}
.key-glow i { font-size:2rem; color:#fff; }
@keyframes keyPulse { 0%,100%{box-shadow:0 0 0 8px rgba(16,185,129,.15),0 0 0 16px rgba(16,185,129,.07)} 50%{box-shadow:0 0 0 12px rgba(16,185,129,.2),0 0 0 22px rgba(16,185,129,.05)} }

.key-code {
    font-family:var(--mono); font-size:1.1rem; font-weight:800;
    color:var(--secondary); letter-spacing:.15em;
    background:rgba(16,185,129,.08); border:2px solid rgba(16,185,129,.25);
    padding:8px 20px; border-radius:10px;
}
.key-label { font-size:.82rem; color:var(--text-secondary); }
.btn-next-room {
    display:inline-flex; align-items:center; gap:7px;
    padding:11px 24px; border-radius:999px; border:none;
    background:var(--gradient); color:#fff;
    font-size:.9rem; font-weight:700; cursor:pointer;
    font-family:'Inter',sans-serif;
    transition:transform .2s ease,box-shadow .2s ease;
    box-shadow:0 5px 18px rgba(16,185,129,.3);
}
.btn-next-room:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(16,185,129,.4); }
.key-score-note { font-size:.78rem; color:var(--text-secondary); }

/* Easter egg unlock special */
.easter-egg-unlock {
    display:flex; flex-direction:column; align-items:center; gap:8px;
    padding:12px 16px; border-radius:12px;
    background:rgba(245,158,11,.08); border:2px solid rgba(245,158,11,.3);
    animation:fadeInUp .4s ease;
}
.easter-egg-unlock i { font-size:1.4rem; color:#d97706; }
.easter-egg-unlock strong { font-size:.88rem; color:#d97706; font-weight:700; }
.easter-egg-unlock span { font-size:.8rem; color:var(--text-secondary); text-align:center; }

/* ── WIN SCREEN ─────────────────────────────────────────────── */
#screenWin { display:flex; justify-content:center; align-items:center; min-height:60vh; }
.win-card { max-width:560px; width:100%; }
.win-body { padding:40px 36px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px; }
.win-icon { width:80px; height:80px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 24px rgba(139,92,246,.3); }
.win-icon i { font-size:2.2rem; color:#fff; }
.win-title { font-size:1.8rem; font-weight:800; color:var(--text-primary); }
.win-sub { font-size:.95rem; color:var(--text-secondary); max-width:380px; }
.win-stats { display:flex; gap:24px; flex-wrap:wrap; justify-content:center; }
.win-stat { display:flex; flex-direction:column; align-items:center; gap:3px; }
.win-stat-val { font-family:var(--mono); font-size:1.6rem; font-weight:800; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.win-stat-label { font-size:.76rem; font-weight:600; color:var(--text-secondary); }
.win-actions { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

/* ── SYNTAX HIGHLIGHT ───────────────────────────────────────── */
.keyword  { color:#c084fc; font-weight:600; }
.function { color:#6ee7b7; }
.string   { color:#fca5a5; }
.number   { color:#fcd34d; }
.comment  { color:#64748b; font-style:italic; }
.operator { color:#94a3b8; }

/* ── NOTIFICATION TOAST ─────────────────────────────────────── */
.notification {
    position:fixed; top:80px; right:20px;
    padding:14px 22px; background:var(--gradient); color:#fff;
    border-radius:10px; box-shadow:0 4px 20px rgba(139,92,246,.4);
    transform:translateX(calc(100% + 40px)); opacity:0;
    transition:transform .4s ease,opacity .4s ease;
    z-index:1000; font-weight:500;
    display:flex; align-items:center; gap:9px; font-size:.92rem;
    pointer-events:none; cursor:pointer;
}
.notification.show    { transform:translateX(0); opacity:1; pointer-events:auto; }
.notification.success { background:linear-gradient(135deg,#10b981,#059669); }
.notification.error   { background:linear-gradient(135deg,#ef4444,#dc2626); }
.notification.warning { background:linear-gradient(135deg,#f59e0b,#d97706); }
.notification.easter  { background:linear-gradient(135deg,#f59e0b,#b45309); }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media(max-width:1100px) {
    .mission-grid { grid-template-columns:1fr 1fr; }
    .game-workspace { grid-template-columns:1fr; }
}
@media(max-width:768px) {
    .container { padding:1.5rem 1.2rem 2.5rem; }
    .hero { padding:2.8rem 1.5rem 3.2rem; }
    .hero-h1 { font-size:1.9rem; }
    .hero-para { font-size:.95rem; }
    .hero-stats { gap:.8rem; }
    .mission-grid { grid-template-columns:1fr; }
    .score-bar-body { gap:20px; }
    .panel-header { flex-direction:column; align-items:flex-start; }
    textarea { min-height:140px; }
}
@media(max-width:576px) {
    .container { padding:1rem 1rem 2rem; }
    .hero { padding:2.2rem 1rem 2.8rem; }
    .hero-h1 { font-size:1.65rem; }
    .win-body { padding:28px 20px; }
    .notification {
        left:10px; right:10px; width:calc(100% - 20px);
        top:70px; transform:translateY(-100px); opacity:0;
    }
    .notification.show { transform:translateY(0); opacity:1; }
}