:root {
    --bg: #030509;
    --panel: rgba(13, 16, 27, 0.76);
    --panel-2: rgba(17, 22, 37, 0.88);
    --text: #eef3ff;
    --muted: #a7b0c5;
    --line: rgba(255,255,255,.09);
    --accent: #78a8ff;
    --accent-2: #bd6cff;
    --good: #56e39f;
    --bad: #ff6f91;
    --gold: #ffd166;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 50% 20%, rgba(65,78,165,.17), transparent 28%),
        radial-gradient(circle at 20% 80%, rgba(131,61,185,.12), transparent 25%),
        var(--bg);
    color: var(--text);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to bottom, black, transparent 85%);
}

/* ---------- Space background ---------- */

.space-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: -1;
}

.black-hole {
    position: absolute;
    width: min(48vw, 680px);
    height: min(48vw, 680px);
    left: 50%;
    top: 33%;
    transform: translate(-50%, -50%);
    filter: blur(.1px);
    opacity: .75;
}

.event-horizon {
    position: absolute;
    inset: 30%;
    border-radius: 50%;
    background: #000;
    box-shadow:
        0 0 50px rgba(0,0,0,1),
        0 0 110px rgba(0,0,0,.95);
}

.accretion-ring {
    position: absolute;
    left: 5%;
    top: 17%;
    width: 90%;
    height: 66%;
    border-radius: 50%;
    border: 26px solid transparent;
    filter: blur(6px);
    transform: rotate(-12deg);
}

.ring1 {
    border-top-color: rgba(255,165,83,.72);
    border-bottom-color: rgba(168,89,255,.58);
    animation: spin 10s linear infinite;
}

.ring2 {
    left: 11%;
    top: 25%;
    width: 78%;
    height: 50%;
    border-width: 10px;
    border-top-color: rgba(115,180,255,.75);
    border-bottom-color: rgba(255,98,187,.45);
    animation: spinReverse 7s linear infinite;
}

@keyframes spin { to { transform: rotate(348deg); } }
@keyframes spinReverse { to { transform: rotate(-372deg); } }

.star {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 8px rgba(255,255,255,.8);
    animation: twinkle 3s ease-in-out infinite;
}

.s1 { left: 8%; top: 12%; animation-delay: .2s; }
.s2 { left: 19%; top: 30%; animation-delay: 1.2s; }
.s3 { left: 72%; top: 9%; animation-delay: 2s; }
.s4 { left: 86%; top: 24%; animation-delay: .7s; }
.s5 { left: 9%; top: 68%; animation-delay: 1.6s; }
.s6 { left: 80%; top: 72%; animation-delay: 2.3s; }
.s7 { left: 58%; top: 82%; animation-delay: .4s; }
.s8 { left: 39%; top: 13%; animation-delay: 1.9s; }

@keyframes twinkle {
    0%,100% { opacity: .25; transform: scale(.75); }
    50% { opacity: 1; transform: scale(1.25); }
}

/* ---------- Layout ---------- */

.topbar {
    width: min(1180px, calc(100% - 28px));
    margin: 28px auto 18px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-end;
}

.eyebrow {
    margin: 0 0 4px;
    font-size: 12px;
    letter-spacing: .22em;
    color: #8ea9ff;
    font-weight: 800;
}

h1, h2, h3, p { margin-top: 0; }

h1 {
    margin-bottom: 10px;
    font-size: clamp(30px, 5vw, 54px);
    line-height: 1;
    letter-spacing: -.04em;
}

.subtitle {
    margin: 0;
    max-width: 760px;
    color: var(--muted);
    line-height: 1.6;
}

.score-box {
    min-width: 130px;
    padding: 16px 18px;
    text-align: center;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(50,60,95,.88), rgba(19,23,39,.88));
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 12px 40px rgba(0,0,0,.24);
}

.score-box span,
.score-box small {
    display: block;
    color: var(--muted);
}

.score-box strong {
    display: block;
    font-size: 32px;
    margin: 4px 0;
}

.app {
    width: min(1180px, calc(100% - 28px));
    margin: 0 auto 60px;
}

.glass {
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: 0 18px 50px rgba(0,0,0,.24);
    backdrop-filter: blur(14px);
    border-radius: 22px;
}

.control-panel {
    padding: 20px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 18px;
}

.control-panel h2 { margin-bottom: 6px; }
.control-panel p { margin-bottom: 0; color: var(--muted); }

.controls { display: flex; gap: 10px; flex-wrap: wrap; }

button {
    font: inherit;
    cursor: pointer;
}

.ghost-btn {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: var(--text);
    padding: 10px 14px;
    border-radius: 12px;
}

.ghost-btn:hover {
    background: rgba(120,168,255,.12);
}

.quiz-grid {
    display: grid;
    gap: 18px;
}

.card {
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 14px 40px rgba(0,0,0,.2);
}

.card.correct { border-color: rgba(86,227,159,.45); }
.card.wrong { border-color: rgba(255,111,145,.45); }

.meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 13px;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(120,168,255,.1);
    color: #b8cbff;
}

.question {
    font-size: 20px;
    line-height: 1.45;
    margin-bottom: 16px;
}

.code {
    background: #06080e;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 14px;
    overflow-x: auto;
    margin: 0 0 16px;
    color: #d5e2ff;
    font-family: "Cascadia Code", Consolas, monospace;
    font-size: 14px;
    line-height: 1.5;
}

.options {
    display: grid;
    gap: 10px;
}

.option {
    width: 100%;
    text-align: left;
    color: var(--text);
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
    padding: 13px 14px;
}

.option:hover:not(:disabled) {
    background: rgba(120,168,255,.09);
    border-color: rgba(120,168,255,.26);
}

.option.selected {
    background: rgba(120,168,255,.14);
    border-color: rgba(120,168,255,.5);
}

.option:disabled { cursor: default; }

.actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
    align-items: center;
}

.confirm {
    border: 0;
    background: linear-gradient(135deg, #6ea3ff, #b56bff);
    color: #fff;
    padding: 11px 15px;
    border-radius: 12px;
    font-weight: 800;
}

.confirm:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.feedback {
    min-height: 24px;
    color: var(--muted);
    line-height: 1.5;
}

.feedback.good { color: var(--good); }
.feedback.bad { color: var(--bad); }

.easter {
    margin-top: 18px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.easter.hidden { display: none; }

.easter-icon { font-size: 36px; }

.footer {
    width: min(1180px, calc(100% - 28px));
    margin: 0 auto 30px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: var(--muted);
    font-size: 12px;
}

code {
    color: #c5d5ff;
}

@media (max-width: 760px) {
    .topbar,
    .control-panel,
    .footer {
        flex-direction: column;
        align-items: stretch;
    }

    .score-box { width: 100%; }
}