:root {
    --bg: #0f0e17;
    --fg: #fffffe;
    --muted: #a7a9be;
    --accent: #ff8906;
    --accent2: #f25f4c;
    --good: #2cb67d;
    --bad: #e53170;
    --card: #1a1925;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: "Comic Sans MS", "Comic Sans", system-ui, sans-serif;
    line-height: 1.5;
}

.wrap {
    max-width: 780px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}

.hero, .result-hero {
    text-align: center;
    padding: 2rem 0 1rem;
}

.hero h1, .result-hero h1 {
    font-size: 2.25rem;
    margin: 0 0 .5rem;
    color: var(--accent);
    text-shadow: 3px 3px 0 var(--accent2);
}

.tag { color: var(--muted); margin-top: 0; }

.badges {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    margin: 1rem 0 .25rem;
}
.badges li {
    background: var(--card);
    padding: .4rem .75rem;
    border-radius: 999px;
    font-size: .9rem;
    border: 1px solid #2a2a3a;
}
.fineprint { color: var(--muted); font-size: .75rem; }

.quiz { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 2rem; }

.card {
    background: var(--card);
    border: 1px solid #2a2a3a;
    border-radius: 14px;
    padding: 1.25rem 1.25rem 1rem;
}
.card legend {
    color: var(--accent);
    padding: 0 .5rem;
    font-weight: bold;
}
.q {
    font-size: 1.15rem;
    margin: .25rem 0 1rem;
}

.choices { display: flex; flex-direction: column; gap: .5rem; }

.choice {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    background: #12111c;
    border: 1px solid #2a2a3a;
    border-radius: 10px;
    padding: .75rem .9rem;
    cursor: pointer;
    transition: border-color .15s, transform .05s;
}
.choice:hover { border-color: var(--accent); }
.choice:active { transform: scale(.995); }
.choice input { margin-top: .3rem; accent-color: var(--accent); }

.big-button {
    appearance: none;
    background: var(--accent);
    color: #111;
    border: none;
    border-radius: 12px;
    padding: 1rem 1.5rem;
    font-size: 1.1rem;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    box-shadow: 0 4px 0 var(--accent2);
    transition: transform .08s, box-shadow .08s;
}
.big-button:hover { transform: translateY(-1px); }
.big-button:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--accent2); }

.result-hero .score {
    font-size: 3rem;
    margin: .25rem 0;
    color: var(--accent);
}
.result-hero .tier {
    font-size: 1.4rem;
    margin: 0 0 1.5rem;
    color: var(--fg);
}
.iq-box {
    background: var(--card);
    border: 2px dashed var(--accent);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    margin: 1rem auto 1.5rem;
    max-width: 360px;
}
.iq-label { color: var(--muted); margin: 0; font-size: .9rem; }
.iq-num { font-size: 3.5rem; margin: .25rem 0; color: var(--accent2); }
.iq-badge { font-style: italic; color: var(--muted); margin: 0; }

.roast {
    background: #12111c;
    border-left: 4px solid var(--accent2);
    padding: 1rem;
    border-radius: 8px;
    text-align: left;
    margin: 1rem 0 1.5rem;
}

.breakdown { margin-top: 3rem; }
.breakdown h2 { color: var(--accent); }
.breakdown ol { padding-left: 1.25rem; }
.breakdown li {
    background: var(--card);
    padding: 1rem;
    border-radius: 10px;
    margin-bottom: .75rem;
    border-left: 4px solid var(--muted);
}
.breakdown li.right { border-left-color: var(--good); }
.breakdown li.wrong { border-left-color: var(--bad); }
.breakdown .q { font-weight: bold; margin-top: 0; }

footer {
    text-align: center;
    color: var(--muted);
    margin-top: 3rem;
    font-size: .8rem;
}