/* Arabian Nights — interfața concursului
   Paletă: albastru de noapte, auriu, nisip. Proiectat întâi pentru telefon. */

/* --- fonturi ----------------------------------------------------------
   Amiri, găzduit local. Rețelele corporate blochează frecvent Google Fonts,
   iar pagina trebuie să arate la fel pe orice laptop din firmă.

   font-display: swap — titlul apare imediat cu fontul de sistem și trece pe
   Amiri când acesta ajunge. Fișierul are 400 KB, iar pe o conexiune lentă
   alternativa ar fi o pagină cu text invizibil câteva secunde.

   Sunt declarate doar Regular și Bold. Italicele există în folder, dar nimic
   din interfață nu le folosește, iar o declarație nefolosită nu se descarcă.
   ---------------------------------------------------------------------- */

@font-face {
    font-family: "Amiri";
    src: url("../fonts/amiri/Amiri-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Amiri";
    src: url("../fonts/amiri/Amiri-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --noapte:      #0A0E24;
    --noapte-2:    #141C40;
    --noapte-3:    #1E2755;
    --auriu:       #D4A845;
    --auriu-clar:  #F2D289;
    --auriu-stins: #8A6D2F;
    --nisip:       #F3E3C3;
    --text:        #E9DCC0;
    --text-slab:   #A2947A;
    --corect:      #4BA46B;
    --gresit:      #D2705F;

    /* Rezerva de după Amiri contează: până se descarcă fontul, titlurile se
       văd cu un serif de sistem, nu cu fontul curent al paginii. */
    --serif:       "Amiri", Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;

    /* Controalele din bara de sus, la dimensiunea de telefon.
       Logourile au 24px acolo, iar butoanele de 44px le striveau. Rămân totuși
       ținte de atins comode: sunt comenzi secundare, limba și ecranul complet,
       nu butoanele jocului, care rămân late cât panoul.
       Pe ecran mare valorile cresc înapoi, în blocul de la 900px. */
    --inaltime-control: 34px;
    --latime-limba:     36px;
    --font-control:     13px;

    --raza:        14px;
    --tranzitie:   240ms cubic-bezier(0.22, 0.61, 0.36, 1);
    /* Roata și simbolurile ei trebuie să se miște identic, altfel simbolurile
       rămân în urmă și se înclină în timpul rotirii. */
    --rotire:      4.6s cubic-bezier(0.15, 0.9, 0.2, 1);
}

* { box-sizing: border-box; }

/* Regulile pe clasă (.buton, .variante) au specificitate mai mare decât
   display:none-ul implicit al atributului hidden și l-ar anula. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--noapte);
    color: var(--text);
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
}

/* --- cerul înstelat -------------------------------------------------- */

.cer {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(2px 2px at 12% 18%,  rgba(255,255,255,0.75), transparent),
        radial-gradient(1px 1px at 27% 42%,  rgba(255,255,255,0.55), transparent),
        radial-gradient(2px 2px at 43% 12%,  rgba(255,255,255,0.65), transparent),
        radial-gradient(1px 1px at 61% 33%,  rgba(255,255,255,0.50), transparent),
        radial-gradient(2px 2px at 78% 21%,  rgba(255,255,255,0.70), transparent),
        radial-gradient(1px 1px at 88% 48%,  rgba(255,255,255,0.45), transparent),
        radial-gradient(1px 1px at 33% 68%,  rgba(255,255,255,0.40), transparent),
        radial-gradient(2px 2px at 69% 74%,  rgba(255,255,255,0.55), transparent),
        radial-gradient(1px 1px at 8%  61%,  rgba(255,255,255,0.40), transparent),
        radial-gradient(1px 1px at 52% 88%,  rgba(255,255,255,0.35), transparent),
        radial-gradient(circle at 50% 0%, var(--noapte-2) 0%, var(--noapte) 62%);
}

/* --- antet ------------------------------------------------------------ */

/* --- bara de sus ------------------------------------------------------
   Logourile în margini, butoanele centrate absolut, ca la events-arrise.
   Centrarea absolută ține butoanele fix la mijlocul ecranului, indiferent
   cât de late sunt cele două logouri.
   ---------------------------------------------------------------------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(6, 9, 26, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(212, 168, 69, 0.22);
}

.topbar__interior {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.topbar__logo {
    display: flex;
    align-items: center;
    /* Rezervă spațiul chiar dacă logoul lipsește, ca butoanele centrate să nu
       pară descentrate față de o bară goală pe o parte. */
    min-height: 1px;
    flex: 0 1 auto;
}

.topbar__logo--dreapta { justify-content: flex-end; }

.topbar__imagine {
    display: block;
    height: clamp(24px, 3.2vw, 68px);
    width: auto;
    max-width: 28vw;
    object-fit: contain;
}

/* Pe ecran îngust butoanele stau în flux, între logouri: centrate absolut
   s-ar suprapune peste ele. */
.topbar__butoane {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* De la lățimea la care e loc, butoanele se centrează pe ecran, indiferent
   cât de late sunt cele două logouri. */
@media (min-width: 760px) {
    .topbar__butoane {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

/* Butonul de ecran complet — util mai ales pe totem, ca să scoată bara
   browserului fără tastatură. */
.buton-ecran {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--inaltime-control, 44px);
    height: var(--inaltime-control, 44px);
    padding: 0;
    border: 1px solid var(--auriu-stins);
    border-radius: 999px;
    background: rgba(6, 9, 26, 0.6);
    color: var(--auriu);
    cursor: pointer;
    transition: var(--tranzitie);
}

/* Zona de atins rămâne mai mare decât cercul desenat: butonul e mic pe telefon,
   dar degetul îl prinde tot de la 44px, cât cere ghidul. Marginea invizibilă nu
   se suprapune peste logouri, între ele fiind 12px. */
.buton-ecran::after {
    content: "";
    position: absolute;
    inset: -5px;
}

.buton-ecran:hover,
.buton-ecran:focus-visible {
    background: rgba(212, 168, 69, 0.16);
    border-color: var(--auriu);
}

.buton-ecran__icoana {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

.buton-ecran__icoana svg {
    width: 55%;
    height: 55%;
}

.buton-ecran__iese  { display: none; }
.buton-ecran__intra { display: flex; }

.este-ecran-complet .buton-ecran__intra { display: none; }
.este-ecran-complet .buton-ecran__iese  { display: flex; }

.antet {
    position: relative;
    text-align: center;
    padding: clamp(20px, 2.6vw, 48px) 20px 8px;
}

/* Comutatorul de limbă: ambele limbi mereu vizibile, cea activă evidențiată.
   Sunt linkuri, nu butoane: limba se decide pe server, deci merge și fără
   JavaScript, iar pagina reia jocul de unde era. */
.limbi {
    display: inline-flex;
    height: var(--inaltime-control, 44px);
    border: 1px solid var(--auriu-stins);
    border-radius: 999px;
    background: rgba(6, 9, 26, 0.6);
    overflow: hidden;
}

.limbi__optiune {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--latime-limba, 46px);
    padding: 0 10px;
    color: var(--text-slab);
    text-decoration: none;
    text-align: center;
    font-size: var(--font-control, 15px);
    font-weight: 700;
    letter-spacing: 0.06em;
    transition: var(--tranzitie);
}

.limbi__optiune + .limbi__optiune {
    border-left: 1px solid var(--auriu-stins);
}

.limbi__optiune:hover,
.limbi__optiune:focus-visible {
    background: rgba(212, 168, 69, 0.14);
    color: var(--auriu-clar);
}

.limbi__optiune.este-activa {
    background: linear-gradient(180deg, var(--auriu-clar), var(--auriu));
    color: #2B1E05;
}

.antet__ornament {
    margin: 0;
    color: var(--auriu-stins);
    letter-spacing: 0.7em;
    font-size: 12px;
}

.antet__titlu {
    margin: 6px 0 2px;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(30px, 8vw, 46px);
    letter-spacing: 0.06em;
    color: var(--auriu-clar);
    text-shadow: 0 0 26px rgba(212, 168, 69, 0.35);
}

.antet__subtitlu {
    margin: 0;
    color: var(--text-slab);
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* --- scena și panourile ----------------------------------------------- */

/* Conținutul se centrează pe verticală: pe un ecran înalt de totem, altfel ar
   rămâne agățat de marginea de sus, cu metri de gol dedesubt. */
.scena {
    flex: 1;
    width: 100%;
    max-width: var(--latime-scena, 620px);
    margin: 0 auto;
    padding: 16px 18px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.panou {
    position: relative;
    background: linear-gradient(180deg, rgba(30, 39, 85, 0.72), rgba(15, 20, 48, 0.72));
    border: 1px solid var(--auriu-stins);
    border-radius: var(--raza);
    padding: 26px 22px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
    animation: apare 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* colțuri ornamentale */
.panou::before,
.panou::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border-color: var(--auriu);
    opacity: 0.7;
}

.panou::before {
    top: 8px; left: 8px;
    border-top: 2px solid; border-left: 2px solid;
    border-top-left-radius: 6px;
}

.panou::after {
    bottom: 8px; right: 8px;
    border-bottom: 2px solid; border-right: 2px solid;
    border-bottom-right-radius: 6px;
}

.panou--eroare { border-color: var(--gresit); text-align: center; }

@keyframes apare {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.intro {
    margin: 0 0 22px;
    text-align: center;
    color: var(--text-slab);
    font-size: 15px;
}

/* --- formular --------------------------------------------------------- */

.camp { margin-bottom: 16px; }

.camp-dublu {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 14px;
}

@media (min-width: 460px) {
    .camp-dublu { grid-template-columns: 1fr 1fr; }
}

label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--auriu);
}

.optional {
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-slab);
    font-size: 12px;
}

input {
    width: 100%;
    padding: 12px 14px;
    background: rgba(10, 14, 36, 0.75);
    border: 1px solid rgba(212, 168, 69, 0.3);
    border-radius: 10px;
    color: var(--nisip);
    font-family: inherit;
    /* Peste 16px, nu fix pe prag: sub 16px iOS mărește pagina la focus, iar
       exact la 16px orice rotunjire poate trece dincolo. */
    font-size: 17px;
    transition: var(--tranzitie);
}

input:focus {
    outline: none;
    border-color: var(--auriu);
    box-shadow: 0 0 0 3px rgba(212, 168, 69, 0.18);
}

input[aria-invalid="true"] { border-color: var(--gresit); }

.eroare-camp {
    margin: 5px 0 0;
    min-height: 0;
    color: var(--gresit);
    font-size: 13px;
}

.eroare-camp:empty { display: none; }

.eroare-generala {
    margin: 14px 0 0;
    color: var(--gresit);
    font-size: 14px;
    text-align: center;
}

.eroare-generala:empty { display: none; }

/* --- butoane ---------------------------------------------------------- */

.buton {
    display: block;
    width: 100%;
    margin-top: 22px;
    padding: 14px 20px;
    border: none;
    border-radius: 999px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--tranzitie);
}

.buton--primar {
    background: linear-gradient(180deg, var(--auriu-clar), var(--auriu));
    color: #2B1E05;
    box-shadow: 0 8px 22px rgba(212, 168, 69, 0.28);
}

.buton--primar:hover:not(:disabled),
.buton--primar:focus-visible:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(212, 168, 69, 0.38);
}

.buton--primar:active:not(:disabled) { transform: translateY(0); }

.buton:disabled { opacity: 0.55; cursor: default; }

/* --- roata ------------------------------------------------------------ */

.roata-zona {
    position: relative;
    width: min(88vw, var(--roata-max, 360px));
    margin: 6px auto 4px;
    aspect-ratio: 1;
}

.roata {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 6px solid var(--auriu);
    box-shadow:
        0 0 0 3px var(--noapte-3),
        0 0 34px rgba(212, 168, 69, 0.35),
        inset 0 0 30px rgba(0, 0, 0, 0.45);
    /* fundalul conic e compus în JS din culorile categoriilor */
    transform: rotate(0deg);
    transition: transform var(--rotire);
}

/* butucul central */
.roata::after {
    content: "✦";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 40% 35%, var(--auriu-clar), var(--auriu-stins));
    color: var(--noapte);
    border-radius: 50%;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.55);
    font-size: 20px;
}

.roata-etichete {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.roata-eticheta {
    position: absolute;
    top: 0; left: 50%;
    width: 0; height: 50%;
    transform-origin: bottom center;
}

/* Simbolul unei felii: iconiță SVG, imagine, sau numele categoriei dacă
   nu există iconiță în baza de date.

   Ambele variante se rotesc odată cu felia, cu capul spre marginea exterioară.
   Nu au nevoie de tranziție proprie: le mișcă roata. */
.roata-simbol {
    position: absolute;
    left: 50%;
    color: #FFF6E2;
}

/* Iconița: pătrată, așezată spre marginea exterioară a feliei. */
.roata-simbol--icoana {
    top: 13%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    /* dimensiunea vine din JS, în funcție de numărul de categorii */
    width: var(--marime-simbol, 40px);
    height: var(--marime-simbol, 40px);
}

/* Textul curge pe rază, dinspre centru spre marginea exterioară.
   Rotit cu -90°, direcția de citire (stânga→dreapta) devine centru→margine.
   Felia e îngustă lateral dar lungă pe rază, deci aici încape textul chiar și
   când sunt multe categorii. --lungime-text vine din JS, calculat din raza
   randată a roții. */
/* Textul curge pe rază, dinspre centru spre marginea exterioară, la fel pe
   toate feliile. Ca pe o roată fizică: pe partea dreaptă se citește normal,
   pe partea stângă apare răsturnat, pentru că acolo „spre exterior" înseamnă
   spre stânga. Nu se corectează — așa arată o ruletă. */
.roata-simbol--text {
    top: 42%;
    width: var(--lungime-text, 110px);
    transform: translate(-50%, -50%) rotate(-90deg);
}

/* Selector descendent, nu pe clasă: iconițele vin din baza de date și nu putem
   cere ca fiecare SVG lipit de administrator să aibă o clasă anume. */
.roata-simbol svg {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}

.roata-imagine {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}

/* Revenirea la text, când categoria nu are iconiță. */
.roata-text {
    display: block;
    /* Se termină spre marginea exterioară: după rotația de -90°, „dreapta"
       înseamnă „spre margine". */
    text-align: right;
    padding-right: 6%;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
    color: #FFF6E2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
    /* Un singur rând: pe rază avem lungime, nu lățime. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


@media (max-width: 400px) {
    .roata-simbol--icoana {
        width: calc(var(--marime-simbol, 40px) * 0.85);
        height: calc(var(--marime-simbol, 40px) * 0.85);
    }

    .roata-text { font-size: 10px; }
}

.roata-ac {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-top: 26px solid var(--auriu-clar);
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6));
    z-index: 2;
}

/* --- întrebarea ------------------------------------------------------- */

.categorie-eticheta {
    margin: 0 0 14px;
    text-align: center;
}

.categorie-nume {
    display: inline-block;
    padding: 5px 16px;
    border: 1px solid var(--auriu-stins);
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--auriu);
}

.intrebare {
    margin: 0 0 22px;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(19px, 4.6vw, 23px);
    line-height: 1.45;
    text-align: center;
    color: var(--nisip);
}

.variante { display: flex; flex-direction: column; gap: 10px; }

.varianta {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: rgba(10, 14, 36, 0.6);
    border: 1px solid rgba(212, 168, 69, 0.28);
    border-radius: 12px;
    color: var(--text);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transition: var(--tranzitie);
}

.varianta:hover:not(:disabled),
.varianta:focus-visible:not(:disabled) {
    border-color: var(--auriu);
    background: rgba(212, 168, 69, 0.1);
    transform: translateX(3px);
}

.varianta:disabled { cursor: default; opacity: 0.75; }

.varianta__litera {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 168, 69, 0.16);
    border-radius: 50%;
    color: var(--auriu-clar);
    font-size: 13px;
    font-weight: 700;
}

/* --- rezultatul ------------------------------------------------------- */

#pas-rezultat { text-align: center; }

.rezultat-simbol { font-size: 46px; line-height: 1; margin-bottom: 10px; }

.rezultat-titlu {
    margin: 0 0 10px;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(22px, 5.4vw, 28px);
}

.rezultat-titlu.este-corect { color: var(--corect); }
.rezultat-titlu.este-gresit { color: var(--gresit); }

.rezultat-mesaj { margin: 0; color: var(--text-slab); font-size: 15px; }

.raspuns-corect {
    margin-top: 20px;
    padding: 16px;
    background: rgba(75, 164, 107, 0.1);
    border: 1px solid rgba(75, 164, 107, 0.4);
    border-radius: 12px;
}

.raspuns-corect__eticheta {
    margin: 0 0 4px;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-slab);
}

.raspuns-corect__text {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--corect);
}

/* Numărătoarea de sub buton: informație, nu îndemn — deci discretă. */
.revenire {
    margin: 12px 0 0;
    color: var(--text-slab);
    font-size: 13px;
    letter-spacing: 0.04em;
}

/* --- subsol: zăbreaua orientală ----------------------------------------
   Umple golul de sub panou. Pe telefon e o dungă subțire, pe totem crește
   până la o cincime din ecran — acolo unde altfel ar rămâne un metru gol.
   ----------------------------------------------------------------------- */

.subsol {
    position: relative;
    flex: 0 0 auto;
    height: clamp(90px, 20vh, 420px);
    color: var(--auriu-stins);
    overflow: hidden;
    /* Decor curat: nu prinde atingerile destinate paginii. */
    pointer-events: none;
}

/* Așezare absolută, nu în flux: pe totem subsolul are înălțime automată, iar
   un height: 100% în flux nu are față de ce se calcula și cădea pe cei 150px
   impliciți ai unui SVG. */
.arabesc {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.55;
    /* Se stinge spre conținut: sus abia se ghicește, jos e limpede. Fără
       stingere, marginea de sus a modelului ar tăia pagina în două. */
    -webkit-mask-image: linear-gradient(to top, #000 20%, transparent 100%);
    mask-image: linear-gradient(to top, #000 20%, transparent 100%);
}

/* --- ecran mare (desktop și totem) -------------------------------------
   Scară de site desktop obișnuit, aliniată la proiectul events, care arată
   corect pe totem: text de bază ~17px, titlu ~55px, controale de 44px.
   Un totem e un ecran mare privit de aproape, nu un motiv de a mări tot —
   mărirea peste scara desktop face pagina să pară că are zoom.
   Ținta de atins rămâne de minimum 44px, cât cere degetul.
   ----------------------------------------------------------------------- */

@media (min-width: 900px) {
    :root {
        --latime-scena:     760px;
        --roata-max:        620px;
        --raza:             16px;
        --inaltime-control: 44px;
        --latime-limba:     50px;
        --font-control:     15px;
    }

    body { font-size: 17px; }

    .topbar__interior { max-width: 1200px; padding: 16px 24px; }
    .topbar__imagine  { height: 48px; }

    .antet__titlu    { font-size: clamp(40px, 3.6vw, 55px); }
    .antet__subtitlu { font-size: 16px; letter-spacing: 0.18em; }
    .antet__ornament,
    .subsol__ornament { font-size: 13px; }

    .panou { padding: 36px 34px; }
    .panou::before, .panou::after { width: 20px; height: 20px; }

    .intro { font-size: 17px; margin-bottom: 28px; }

    label  { font-size: 14px; margin-bottom: 8px; }
    .optional { font-size: 13px; }
    input  { padding: 15px 16px; font-size: 17px; border-radius: 12px; }
    .camp  { margin-bottom: 20px; }
    .eroare-camp { font-size: 14px; }
    .eroare-generala { font-size: 15px; }

    .buton { margin-top: 28px; padding: 18px 28px; font-size: 16px; }

    .categorie-nume { font-size: 13px; padding: 6px 20px; }
    .intrebare      { font-size: clamp(26px, 2.3vw, 34px); margin-bottom: 30px; }

    .variante { gap: 12px; }
    .varianta { padding: 18px 20px; font-size: 18px; border-radius: 14px; gap: 14px; }
    .varianta__litera { flex: 0 0 34px; width: 34px; height: 34px; font-size: 15px; }

    .rezultat-simbol { font-size: 56px; margin-bottom: 14px; }
    .rezultat-titlu  { font-size: clamp(26px, 2.4vw, 34px); }
    .rezultat-mesaj  { font-size: 17px; }
    .raspuns-corect  { margin-top: 24px; padding: 20px; border-radius: 14px; }
    .raspuns-corect__eticheta { font-size: 13px; }
    .raspuns-corect__text     { font-size: 22px; }

    .roata-ac {
        top: -10px;
        border-left-width: 17px;
        border-right-width: 17px;
        border-top-width: 34px;
    }

    .roata { border-width: 8px; }

    .roata::after {
        width: 74px;
        height: 74px;
        font-size: 28px;
    }
}

/* --- totem în picioare --------------------------------------------------
   Ecran lat și foarte înalt, privit de aproape, de către cineva care stă în
   picioare. Aici conținutul nu se mai centrează pe verticală: jocul urcă în
   treimea de sus, unde ajunge privirea și mâna, iar golul rămas jos îl ia
   zăbreaua. Centrat, panoul plutea la mijlocul unui ecran de doi metri.
   ----------------------------------------------------------------------- */

@media (min-width: 900px) and (min-height: 1100px) {
    :root {
        /* Scena se lărgește ca să încapă roata mare: altfel ar fi strânsă de
           marginile panoului, oricât de mult i-am crește diametrul. */
        --latime-scena: 1000px;
        --roata-max:    860px;
    }

    .scena {
        justify-content: flex-start;
        /* Scena ia doar cât îi trebuie; restul înălțimii trece la subsol. */
        flex: 0 0 auto;
        padding-top: clamp(16px, 3vh, 56px);
    }

    /* Zăbreaua crește cât e golul, oricât ar fi: pe un pas cu panou scurt
       urcă mult, pe unul cu întrebare lungă rămâne o dungă. */
    .subsol {
        flex: 1 1 auto;
        height: auto;
        min-height: clamp(120px, 18vh, 420px);
    }

    .antet { padding-top: clamp(16px, 2vh, 40px); }

    /* Roata are loc: butucul și acul cresc odată cu ea, altfel ar arăta ca
       niște piese de pe alt desen. */
    .roata::after { width: 96px; height: 96px; font-size: 36px; }

    .roata-ac {
        top: -14px;
        border-left-width: 22px;
        border-right-width: 22px;
        border-top-width: 44px;
    }
}

/* --- accesibilitate --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    :root { --rotire: 260ms linear; }
    .panou { animation: none; }
    .buton--primar:hover, .varianta:hover { transform: none; }
    * { scroll-behavior: auto !important; }
}