/* QUIZZ — Think You Know It All — retro-arcade teema
   Ei ulkoisia fontti-/CDN-riippuvuuksia (paitsi flagcdn.com maantieto-kategoriassa). */

:root {
    --bg:        #0a0a16;
    --bg-alt:    #120c22;
    --card:      #17102b;
    --card-2:    #1d1533;
    --border:    #3a2a5c;
    --text:      #e8e2ff;
    --muted:     #9a8fc2;

    --violet:    #8b5cf6;
    --magenta:   #ec4899;
    --orange:    #f97316;
    --gold:      #fbbf24;
    --cyan:      #22d3ee;
    --green:     #34d399;
    --red:       #ef4444;

    --grad-main: linear-gradient(90deg, var(--violet), var(--magenta), var(--orange));
    --font-head: "Segoe UI Black", "Arial Black", ui-sans-serif, sans-serif;
    --font-mono: "Consolas", "Courier New", monospace;
    --radius: 10px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: ui-sans-serif, "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

body {
    background-image:
        radial-gradient(circle at 15% 0%, rgba(139, 92, 246, .18), transparent 45%),
        radial-gradient(circle at 85% 10%, rgba(236, 72, 153, .14), transparent 40%);
    min-height: 100vh;
    /* Footer pysyy aina näkymän alareunassa riippumatta sisällön korkeudesta,
       ettei se "hyppele" ylös/alas sivukohtaisesti (esim. lyhyt visaruutu). */
    display: flex; flex-direction: column;
}
/* align-items:stretch (oletus) ei venytä flex-itemiä luotettavasti täyteen
   leveyteen kun se sisältää CSS Gridin (esim. .cat-grid) — ruudukko romahtaa
   yhteen sarakkeeseen/riviin. Eksplisiittinen width:100% korjaa tämän. */
body > * { min-width: 0; width: 100%; }

a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }

/* ── CRT scanline -overlay ─────────────────────────────────────────────── */
.crt-overlay {
    position: fixed; inset: 0; pointer-events: none; z-index: 999;
    background: repeating-linear-gradient(
        to bottom, rgba(255,255,255,.02) 0px, rgba(255,255,255,.02) 1px,
        transparent 2px, transparent 3px
    );
    mix-blend-mode: overlay;
}

/* ── Otsikkotyyli (pikselipeli-fiilis ilman ulkoista fonttia) ────────────── */
h1, h2, h3, .pixel-heading {
    font-family: var(--font-head);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 900;
    margin: 0 0 .5em;
}

.gradient-text {
    background: var(--grad-main);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}

.glow { text-shadow: 0 0 8px currentColor, 0 0 22px currentColor; }

/* ── Ylänavigaatio ────────────────────────────────────────────────────── */
.nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: .9rem 0; border-bottom: 2px solid var(--border);
    /* Ei backdrop-filteriä täällä: se loisi position:fixed-lapsille (nav-links
       puhelimen alavalikkona) väärän containing blockin eikä alapalkki
       kiinnittyisi enää oikeasti ruudun alareunaan. */
    background: rgba(10, 10, 22, .96);
    position: sticky; top: 0; z-index: 50;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 1rem; }
.nav-logo { display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; flex-shrink: 0; }
.nav-logo .q { color: var(--gold); }

/* Ikoni aina tekstin yllä. .label varaa aina 2 rivin verran korkeutta, jotta
   kaikki nav-itemit pysyvät samalla korkeudella riippumatta siitä onko
   jonkun labeli yhdellä vai kahdella rivillä. */
.nav-links { display: flex; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; }
.nav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    gap: .2rem; width: 62px; text-align: center; color: var(--text); font-size: .68rem;
    line-height: 1.15;
}
.nav-item:hover { color: var(--magenta); text-decoration: none; }
.nav-item .icon { font-size: 1.3rem; line-height: 1; }
.nav-item .label { min-height: 2.3em; display: flex; align-items: flex-start; justify-content: center; }

.nav-user-wrap { position: relative; flex-shrink: 0; }
.nav-user-btn {
    display: flex; align-items: center; gap: .45rem; background: none; border: none;
    color: var(--text); font: inherit; font-size: .85rem; cursor: pointer;
    padding: .35rem .5rem; border-radius: 8px;
}
.nav-user-btn:hover { background: var(--card-2); }
.nav-user-btn .caret { font-size: .6rem; color: var(--muted); }
.nav-user-hamburger { display: none; font-size: 1.3rem; line-height: 1; }
.nav-user-menu {
    position: absolute; right: 0; top: calc(100% + .6rem); min-width: 170px;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: .4rem; display: none; flex-direction: column; gap: .1rem;
    box-shadow: 0 10px 28px rgba(0,0,0,.45); z-index: 60;
}
.nav-user-menu.open { display: flex; }
.nav-user-menu a { padding: .55rem .6rem; border-radius: 8px; color: var(--text); font-size: .85rem; }
.nav-user-menu a:hover { background: var(--card-2); text-decoration: none; }
.nav-install-item {
    padding: .55rem .6rem; border-radius: 8px; color: var(--text); font-size: .85rem;
    background: none; border: none; font: inherit; text-align: left; cursor: pointer;
}
.nav-install-item:hover { background: var(--card-2); }

img.avatar { width: 28px; height: 28px; border-radius: 5px; vertical-align: middle; object-fit: cover; }
.nav-user-btn img.avatar { width: 28px; height: 28px; border-radius: 6px; border: 2px solid var(--violet); }

/* Puhelimella nav-links siirtyy kiinteäksi PWA-tyyliseksi alavalikoksi —
   samat elementit, ei duplikointia, vain uudelleenaseteltu CSS:llä. */
@media (max-width: 640px) {
    body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
    .nav-links {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
        background: rgba(10, 10, 22, .97); backdrop-filter: blur(6px);
        border-top: 2px solid var(--border);
        justify-content: space-around; align-items: flex-start; gap: 0;
        padding: .5rem .3rem calc(.5rem + env(safe-area-inset-bottom));
        width: 100%;
    }
    .nav-item { width: auto; flex: 1; min-width: 0; font-size: .62rem; }
    .nav-item .icon { font-size: 1.4rem; }
    .nav-item .label { min-height: 1.5em; }

    /* Oikean yläkulman käyttäjätiedot -> pelkkä hampurilaiskuvake, avaa saman valikon */
    .nav-user-btn .avatar, .nav-user-btn .nav-user-name, .nav-user-btn .caret { display: none; }
    .nav-user-hamburger { display: block; }
    .nav-user-menu { top: calc(100% + .4rem); }

    /* Footer ei näy puhelimella/PWA:ssa — ei tarpeellinen peliruuduilla eikä
       muutenkaan, ja alavalikko vie jo tilan ruudun alareunasta. */
    .footer { display: none; }

    /* "Jatka"-nappi kiinni ruudun alareunaan (PWA-alavalikon yläpuolelle) —
       aina peukalon ulottuvilla, ei tarvitse vierittää sitä esiin joka kierros. */
    #qz-next {
        position: fixed; left: 0; right: 0;
        bottom: calc(60px + env(safe-area-inset-bottom)); z-index: 54;
        margin: 0; width: 100%; border-radius: 0;
        clip-path: none; filter: none;
        font-size: 1.4rem; padding: 1.2rem;
    }
    .play-wrap { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
}

/* PWA-asennusbanneri — aina ylänavin alla, ei koskaan puhelimen alavalikon
   (kiinteä nav-links) kohdalla, jottei mikään mene päällekkäin. */
.pwa-banner {
    display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
    background: var(--card-2); border-bottom: 1px solid var(--border);
    padding: .6rem 1rem; font-size: .82rem; color: var(--text);
}
.pwa-banner span:first-child { flex: 1; min-width: 200px; }
.pwa-banner #pwa-banner-close {
    background: none; border: none; color: var(--muted); font-size: 1rem;
    cursor: pointer; padding: .2rem .4rem; line-height: 1;
}
.pwa-banner #pwa-banner-close:hover { color: var(--text); }

/* ── Napit ────────────────────────────────────────────────────────────────
   Muoto ja hover-efekti mallinnettu suoraan referenssistä (Imran Pardes,
   "CSS Button Hover", codepen.io/folaad/pen/YvmRpz — vino suunnikasnappi,
   kova irrallinen varjo joka kasvaa ja vaihtuu korostusväriin hoverissa).
   clip-path (ei transform:skewX) pitää tekstin suorassa ilman merkkauksen
   muutoksia; filter:drop-shadow seuraa clipattua muotoa (box-shadow ei seuraisi). */
.btn {
    position: relative; isolation: isolate;
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    font-family: var(--font-head); text-transform: uppercase; letter-spacing: .03em;
    font-size: .85rem; font-weight: 700;
    padding: .75rem 1.5rem; border: none; border-radius: 0;
    clip-path: polygon(6% 0, 100% 0, 94% 100%, 0% 100%);
    cursor: pointer;
    background: var(--violet); color: #fff;
    filter: drop-shadow(4px 4px 0 rgba(0,0,0,.6));
    transition: filter .25s ease, transform .15s ease, background .25s ease;
}
/* "Shine sweep" -hover: kiiltävä diagonaalikaista liukuu napin yli (clip-path rajaa sen automaattisesti) */
.btn::before {
    content: ''; position: absolute; inset: 0 auto 0 -60%; width: 45%; z-index: -1;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,.45), transparent);
    transform: skewX(-20deg); transition: left .55s cubic-bezier(.2,.8,.2,1);
}
.btn:hover::before { left: 130%; }
.btn:hover {
    text-decoration: none; transform: translate(-2px, -2px);
    filter: drop-shadow(7px 7px 0 var(--gold));
}
.btn:active { transform: translate(1px, 1px); filter: drop-shadow(2px 2px 0 rgba(0,0,0,.6)); }
.btn-primary { background: var(--magenta); }
.btn-primary:hover { filter: drop-shadow(7px 7px 0 var(--gold)) brightness(1.08); }
.btn-danger { background: #7a1f1f; color: #ffd9d9; }
.btn-danger:hover { filter: drop-shadow(7px 7px 0 var(--red)); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn-block { width: 100%; }
.btn-sm { padding: .5rem .95rem; font-size: .72rem; }

/* ── Kortit ───────────────────────────────────────────────────────────── */
.card {
    background: var(--card); border: 2px solid var(--border); border-radius: var(--radius);
    padding: 1.25rem;
}

/* Biisivirta-ristiinmarkkinointi musiikkivisoissa — tarkoituksella eri
   näköinen kuin pelin omat pikseligrafiikka-kortit: neutraali tumma pohja,
   tavallinen sans-serif, Biisivirran omat sinipunaiset brändivärit vain
   pienenä yksityiskohtana. Lukija tunnistaa heti että tämä on eri palvelu. */
.biisivirta-promo {
    margin-top: 1.6rem; padding: 1px; border-radius: 16px;
    background: linear-gradient(120deg, rgba(37,99,235,.55), rgba(124,58,237,.55));
}
.biisivirta-eyebrow {
    display: block; font-family: ui-sans-serif, "Segoe UI", Arial, sans-serif;
    font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
    color: #93a3c9; background: #0a0e1a; padding: .55rem 1.1rem .1rem;
    border-radius: 15px 15px 0 0;
}
.biisivirta-row {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    background: #0a0e1a; padding: .9rem 1.1rem 1.1rem; border-radius: 0 0 15px 15px;
    font-family: ui-sans-serif, "Segoe UI", Arial, sans-serif;
}
.biisivirta-row img { width: 52px; height: 52px; border-radius: 12px; flex-shrink: 0; }
.biisivirta-copy { flex: 1; min-width: 180px; }
.biisivirta-slogan { font-weight: 600; font-size: .95rem; color: #eef1fb; margin: 0 0 .15rem; }
.biisivirta-desc { font-size: .8rem; color: #8b93ab; margin: 0; }
.biisivirta-btn {
    flex-shrink: 0; font-family: inherit; font-size: .82rem; font-weight: 600;
    color: #fff; text-decoration: none; padding: .55rem 1.2rem; border-radius: 999px;
    background: linear-gradient(120deg, #2563eb, #7c3aed);
    transition: filter .15s ease, transform .15s ease;
}
.biisivirta-btn:hover { filter: brightness(1.12); transform: translateY(-1px); text-decoration: none; }

/* ── Hero (synthwave-ruudukko-horisontti) ────────────────────────────────── */
.hero {
    position: relative; overflow: hidden; text-align: center;
    padding: 2.2rem 1rem 2rem; border-bottom: 2px solid var(--border);
    background: radial-gradient(ellipse at 50% -10%, rgba(139,92,246,.35), transparent 60%), var(--bg-alt);
}
.hero-grid {
    position: absolute; left: 0; right: 0; bottom: -20%; height: 60%;
    background-image:
        linear-gradient(rgba(236,72,153,.5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(236,72,153,.5) 1px, transparent 1px);
    background-size: 40px 40px;
    transform: perspective(280px) rotateX(60deg);
    -webkit-mask-image: linear-gradient(to top, black, transparent 90%);
    mask-image: linear-gradient(to top, black, transparent 90%);
    opacity: .55;
}
.hero-content { position: relative; z-index: 2; }
.hero h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); margin-bottom: .3em; }
.hero p { color: var(--muted); font-size: .98rem; max-width: 38em; margin: 0 auto 1rem; }

/* ── Animoitu slogan-SVG ──────────────────────────────────────────────── */
.slogan-wrap { max-width: 460px; margin: 0 auto .7rem; }
.slogan-svg { display: block; width: 100%; height: auto; overflow: visible; }
.slogan-text {
    font-family: var(--font-head);
    font-size: 33px;
    font-weight: 900;
    letter-spacing: .05em;
}
.slogan-wrap { animation: slogan-flicker 2.6s ease-in-out 1; }
.slogan-spark { animation: slogan-twinkle 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.slogan-spark:nth-child(2) { animation-delay: .5s; }
.slogan-spark:nth-child(3) { animation-delay: 1.1s; }
.slogan-spark:nth-child(4) { animation-delay: 1.6s; }

@keyframes slogan-flicker {
    0%, 100% { opacity: 1; }
    4% { opacity: .2; }
    8% { opacity: 1; }
    12% { opacity: .3; }
    14% { opacity: 1; }
    18% { opacity: .15; }
    22% { opacity: 1; }
}
@keyframes slogan-twinkle {
    0%, 100% { opacity: .25; transform: scale(.7); }
    50% { opacity: 1; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
    .slogan-wrap, .slogan-spark { animation: none !important; }
}

/* ── Kategoriaruudukko ────────────────────────────────────────────────── */
.section { padding: 2.6rem 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.1rem; }
.section-head h2 { margin: 0; font-size: 1.3rem; }
.section-head .see-all { font-size: .85rem; color: var(--muted); }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.cat-card {
    background: var(--card); border: 2px solid var(--border); border-radius: var(--radius);
    padding: 1.1rem; text-align: center; color: var(--text);
    display: flex; flex-direction: column; align-items: center;
    transition: transform .12s ease, border-color .12s ease;
}
.cat-card:hover { text-decoration: none; transform: translateY(-3px); border-color: var(--magenta); }
.cat-card .emoji { font-size: 2.1rem; display: block; margin-bottom: .5rem; }
/* .name varaa aina 2 rivin verran tilaa, jotta lyhyet ja pitkät nimet (esim.
   "Kategoriat" vs. "Isännöi live-visa") pysyvät samalla korkeudella rivissä. */
.cat-card .name { font-weight: 700; font-size: .95rem; line-height: 1.25; min-height: 2.5em; display: flex; align-items: flex-start; justify-content: center; }
.cat-card .meta { color: var(--muted); font-size: .75rem; margin-top: .3rem; }
.stars { color: var(--gold); letter-spacing: 1px; }
.rating-count { color: var(--muted); font-size: .8rem; }
.rating-form { display: flex; flex-direction: column; gap: .6rem; align-items: center; }
.star-pick { display: flex; gap: .3rem; font-size: 1.6rem; }
.star-pick button { background: none; border: none; cursor: pointer; color: var(--border); padding: 0; line-height: 1; }
.star-pick button.active, .star-pick button:hover { color: var(--gold); }
.review-item { border-top: 1px solid var(--border); padding: .7rem 0; }
.review-item .stars { font-size: .85rem; }
.review-item .who { color: var(--muted); font-size: .78rem; }
.creator-badge { display: inline-block; font-size: .72rem; color: var(--cyan); margin-bottom: .5rem; }

.badge {
    display: inline-block; font-size: .65rem; text-transform: uppercase; letter-spacing: .05em;
    padding: .15rem .5rem; border-radius: 20px; background: var(--card-2); color: var(--gold);
    border: 1px solid var(--border);
}

/* ── Tulostaulu ───────────────────────────────────────────────────────── */
.leaderboard { width: 100%; border-collapse: collapse; }
.leaderboard th { text-align: left; color: var(--muted); font-size: .75rem; text-transform: uppercase; padding: .4rem .6rem; }
.leaderboard td { padding: .55rem .6rem; border-top: 1px solid var(--border); }
.leaderboard tr:first-child td { color: var(--gold); font-weight: 700; }
.leaderboard .rank { width: 2.2em; color: var(--muted); font-family: var(--font-mono); }
.leaderboard img.avatar { width: 26px; height: 26px; border-radius: 5px; vertical-align: middle; margin-right: .5rem; }

/* ── Pelinäkymä ───────────────────────────────────────────────────────── */
.play-wrap { max-width: 720px; margin: 0 auto; padding: 2rem 1.25rem; }
.play-progress { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); margin-bottom: .5rem; }
.timer-bar { height: 8px; border-radius: 6px; background: var(--card-2); overflow: hidden; margin-bottom: 1.4rem; border: 1px solid var(--border); }
.timer-bar-fill { height: 100%; background: var(--grad-main); width: 100%; transition: width .2s linear; }

.voice-panel { display: flex; flex-direction: column; gap: .5rem; align-items: center; }
.voice-row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 420px; }
.voice-row label { font-size: .75rem; color: var(--muted); white-space: nowrap; }
.voice-row select { flex: 1; min-width: 140px; padding: .4rem .6rem; border-radius: 8px; border: 1px solid var(--border); background: var(--card-2); color: var(--text); font-size: .85rem; }
.vu-bar { flex: 1; min-width: 100px; height: 10px; border-radius: 6px; background: var(--card-2); border: 1px solid var(--border); overflow: hidden; }
.vu-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #22c55e, var(--gold), #ef4444); transition: width .07s linear; }

.question-prompt { font-size: 1.25rem; font-weight: 700; text-align: center; margin: 1.2rem 0 1.6rem; }

.options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 520px) { .options-grid { grid-template-columns: 1fr; } }
.option-btn {
    padding: 1rem; border-radius: var(--radius); border: 2px solid var(--border);
    background: var(--card); color: var(--text); font-size: 1rem; cursor: pointer; text-align: left;
}
/* Vain oikealle hiirelle — kosketusnäytöillä (iPhone Safari mm.) :hover jää
   usein "jumiin" viimeisen kosketuskohdan ruutuun DOM:in vaihtuessa, mikä sai
   satunnaisen vastausnapin näyttämään virheellisesti korostetulta. */
@media (hover: hover) and (pointer: fine) {
    .option-btn:hover { border-color: var(--violet); }
}
.option-btn.correct { border-color: var(--green); background: rgba(52,211,153,.15); }
.option-btn.wrong { border-color: var(--red); background: rgba(239,68,68,.15); }
.option-btn:disabled { cursor: default; opacity: .8; }

.reveal-media { display: flex; align-items: center; justify-content: center; min-height: 200px; margin-bottom: 1.4rem; }
.reveal-media img { max-width: 100%; max-height: 260px; border-radius: var(--radius); filter: blur(18px); transition: filter 1s linear; }
.reveal-text-fallback {
    font-family: var(--font-head); font-size: 2.1rem; text-transform: uppercase;
    filter: blur(10px); transition: filter 1s linear; text-align: center; padding: 1rem;
}

/* ── Audio-mekaniikan peite (piilottaa YouTuben videokuvan/otsikon) ─────── */
.audio-cover {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem;
    background: radial-gradient(circle at 50% 40%, var(--card-2), var(--bg-alt));
    pointer-events: none;
}
.eq-bars { display: flex; align-items: flex-end; gap: 5px; height: 46px; }
.eq-bars span {
    display: block; width: 7px; border-radius: 3px;
    background: var(--grad-main);
    animation: eqBounce 1s ease-in-out infinite;
}
.eq-bars span:nth-child(1) { height: 30%; animation-delay: 0s; }
.eq-bars span:nth-child(2) { height: 70%; animation-delay: .15s; }
.eq-bars span:nth-child(3) { height: 100%; animation-delay: .3s; }
.eq-bars span:nth-child(4) { height: 55%; animation-delay: .45s; }
.eq-bars span:nth-child(5) { height: 80%; animation-delay: .6s; }
@keyframes eqBounce { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.audio-cover-label { font-family: var(--font-head); font-size: .8rem; letter-spacing: .05em; color: var(--muted); text-transform: uppercase; }

.hint-list { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.hint-list li { background: var(--card-2); border: 1px solid var(--border); border-radius: 8px; padding: .7rem .9rem; }
.hint-list li .n { color: var(--gold); font-weight: 700; margin-right: .5rem; }

.board-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; margin-top: 1rem; }
@media (max-width: 620px) { .board-grid { grid-template-columns: repeat(5, 1fr); gap: .3rem; } }
.board-cell {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
    padding: .8rem .3rem; min-height: 70px; border-radius: var(--radius); border: 2px solid var(--border);
    background: var(--card); color: var(--text); cursor: pointer; text-align: center;
}
.board-cell:disabled { cursor: default; opacity: .55; }
.board-cell.correct { border-color: #22c55e; background: rgba(34,197,94,.12); }
.board-cell.wrong { border-color: #ef4444; background: rgba(239,68,68,.12); }
.board-cat { font-size: .65rem; color: var(--muted); line-height: 1.2; }
.board-pts { font-weight: 700; color: var(--gold); font-size: 1.1rem; }

.vihjevisa-badge {
    display: block; text-align: center; color: var(--violet); font-weight: 700;
    letter-spacing: .03em; text-transform: uppercase; font-size: .8rem; margin-bottom: .3rem;
}

/* Isompi, helpommin luettava/kosketettava teksti visan kysymyksiin ja vastauksiin.
   Täytyy tulla lähdejärjestyksessä .question-prompt/.option-btn/.play-progress/
   .vihjevisa-badge -perussääntöjen JÄLKEEN (ei siis samassa mediakyselyssä
   nav-tyylien kanssa ylempänä) — sama selektorispesifisyys tarkoittaa, että
   muuten myöhempi perussääntö voittaisi kaskadissa ja ylikirjoittaisi
   isomman fontin puhelimella. */
@media (max-width: 640px) {
    .question-prompt { font-size: 2.1rem; line-height: 1.25; margin: 1rem 0 1.7rem; }
    .option-btn { font-size: 1.3rem; padding: 1.35rem; }
    .play-progress { font-size: 1rem; }
    .vihjevisa-badge { font-size: 1rem; }
}

.answer-form { display: flex; gap: .6rem; }
.answer-input {
    flex: 1; padding: .8rem 1rem; border-radius: var(--radius); border: 2px solid var(--border);
    background: var(--card-2); color: var(--text); font-size: 1rem;
}

.order-list { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.order-item {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--card-2); border: 2px solid var(--border); border-radius: 8px; padding: .7rem 1rem; cursor: grab;
}
.order-item .move-btns button { background: none; border: none; color: var(--muted); font-size: 1rem; cursor: pointer; }

.result-banner { text-align: center; padding: 1rem; border-radius: var(--radius); margin-bottom: 1.2rem; font-weight: 700; }
.result-banner.correct { background: rgba(52,211,153,.15); border: 2px solid var(--green); color: var(--green); }
.result-banner.wrong { background: rgba(239,68,68,.15); border: 2px solid var(--red); color: var(--red); }

/* Isompi "oikein/väärin"-teksti puhelimella. Täytyy tulla .result-banner-
   perussäännön JÄLKEEN lähdejärjestyksessä (sama spesifisyys — ks. selitys
   ylempänä .question-prompt-mediakyselyn kohdalla). */
@media (max-width: 640px) {
    .result-banner { font-size: 1.3rem; padding: 1.3rem; }
}

/* ── Virheilmoitus-lippu (kysymyksen/vastauksen riitautus valvontapaneeliin) ── */
.report-flag-wrap { text-align: center; margin: -.4rem 0 1rem; }
.report-flag {
    background: none; border: none; color: var(--red); font-size: .75rem;
    cursor: pointer; opacity: .75; padding: .3rem .5rem;
}
.report-flag:hover { opacity: 1; text-decoration: underline; }
.report-flag:disabled { opacity: .4; cursor: default; text-decoration: none; }
.report-form {
    display: none; max-width: 420px; margin: .5rem auto 0; text-align: center;
    background: var(--card-2); border: 1px solid var(--red); border-radius: var(--radius); padding: .8rem;
}
.report-form.open { display: block; }
.report-form textarea {
    width: 100%; min-height: 60px; margin-bottom: .5rem; padding: .5rem .7rem;
    border-radius: 8px; border: 2px solid var(--border); background: var(--bg-alt); color: var(--text);
    font-family: inherit; font-size: .85rem; resize: vertical;
}
#qz-report-status { display: block; margin-top: .5rem; font-size: .8rem; }
#qz-report-status.ok { color: var(--green); }
#qz-report-status.err { color: var(--red); }

.score-summary { text-align: center; }
.score-summary .big { font-size: 3rem; font-family: var(--font-head); color: var(--gold); }

/* ── Lomakkeet ────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: .82rem; color: var(--muted); margin-bottom: .35rem; }
.form-group input, .form-group textarea, .form-group select {
    width: 100%; padding: .7rem .9rem; border-radius: var(--radius); border: 2px solid var(--border);
    background: var(--card-2); color: var(--text); font-size: .95rem; font-family: inherit;
}

.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: .5rem; }
.icon-pick { border: 2px solid var(--border); border-radius: 8px; padding: .4rem; cursor: pointer; background: var(--card-2); }
.icon-pick.selected { border-color: var(--gold); box-shadow: 0 0 10px rgba(251,191,36,.5); }
.icon-pick img { width: 100%; height: auto; display: block; }

.alert { padding: .8rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: .9rem; }
.alert-error { background: rgba(239,68,68,.15); border: 1px solid var(--red); color: #ffb4b4; }
.alert-success { background: rgba(52,211,153,.15); border: 1px solid var(--green); color: #b8f5dd; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.footer { border-top: 2px solid var(--border); padding: 2rem 0; text-align: center; color: var(--muted); font-size: .85rem; margin-top: auto; }
.footer-count { margin-top: .5rem; color: var(--gold); font-weight: 700; }

/* ── Admin ────────────────────────────────────────────────────────────── */
.admin-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.admin-table th { text-align: left; padding: .5rem .7rem; color: var(--muted); border-bottom: 2px solid var(--border); }
.admin-table td { padding: .5rem .7rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.admin-nav { display: flex; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.stat-tile { background: var(--card); border: 2px solid var(--border); border-radius: var(--radius); padding: 1rem; text-align: center; }
.stat-tile .num { font-size: 1.8rem; font-family: var(--font-head); color: var(--gold); }
.stat-tile .label { color: var(--muted); font-size: .8rem; }