/* ============================================================
   GRAVORA — Cadoul Zilei: pagina publică (structură + roată SVG)
   (fișierul păstrează numele istoric `roata.css` — vezi HANDOFF.md)
   Traficul vine dintr-un story de Instagram — peste 90% dintre
   vizitatori sunt pe telefon, mulți în WebView-ul din Instagram.
   Proiectat mobil-întâi, nu desktop cu variantă de telefon.
   Folosește DOAR tokenii de temă din styles.css (--bg, --surface-1,
   --text-1, --text-2, --border-1, --crystal*, --radius, --serif,
   --sans, --shadow-card, --ease) — fără culori scrise direct pentru
   conținut, ca pagina să funcționeze identic în light și dark.
   ============================================================ */

/* ---------------------------------------------------------------- hero */

.wheel-hero {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 0;
  padding: 40px 0 56px;
  /* Ecranul de start al vizitatorului venit din story — umple viewportul.
     100vh e greșit în WebView-ul Instagram (bara de adresă schimbă
     înălțimea reală); 100dvh o corectează unde e suportat. */
  min-height: 100vh;
  min-height: 100dvh;
}

/* Mobil: roata trebuie să se vadă din prima secundă, fără scroll — e cârligul emoțional al
   paginii (traficul vine direct dintr-un story de Instagram; un formular gol în prim-plan
   pierde vizitatori). .wheel-col-text/.wheel-col-wheel devin transparente pentru layout
   (display:contents), ca titlul, subtitlul, roata, panoul și link-ul regulamentului să fie
   reordonate independent ca grid items direct pe .wheel-hero — DOM-ul (și deci crawlerele/
   cititoarele de ecran) rămân neschimbate: titlu → subtitlu → panou → regulament → roată.
   Ordinea VIZUALĂ pe un telefon: titlu → subtitlu → ROATA → panou (verificare cod) → regulament. */
.wheel-col-text, .wheel-col-wheel { display: contents; }

.wheel-hero h1 { order: 1; }
.wheel-sub { order: 2; }
.wheel-stage { order: 3; margin: 22px auto 0; }
.wheel-panel { order: 4; }
.wheel-rules { order: 5; }

@media (min-width: 860px) {
  .wheel-hero {
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
    padding: 64px 0;
    /* Ecranul plin e un beneficiu mobil (deschis direct din story); pe desktop,
       cu conținut modest, ar lăsa doar spațiu gol în jurul roții — revenim la
       o înălțime naturală, dată de padding. */
    min-height: 0;
  }
  /* Coloane reale, în ordinea din HTML (text | roată) — reordonarea de mai sus e strict
     pentru fluxul cu o singură coloană de pe mobil și nu se aplică aici. */
  .wheel-col-text, .wheel-col-wheel { display: flex; }
  .wheel-col-text { flex-direction: column; justify-content: center; }
  .wheel-col-wheel { justify-content: center; }
}

.wheel-hero h1 {
  font-family: var(--serif);
  font-size: clamp(34px, 5.4vw, 52px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.5px;
  margin: 0;
  color: var(--text-1);
}

.wheel-sub {
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.6;
  max-width: 440px;
  margin: 14px 0 0;
}

/* Rând tapabil, nu buton. Deliberat: regulamentul e terțiar, iar un al doilea buton sub
   „Verifică” ar concura cu acțiunea principală. Chevronul dă afordanța fără greutate vizuală.
   min-height 52px — linkul dinainte avea ~20px, sub minimul de 44px pentru o țintă de atins,
   pe o pagină al cărei trafic vine aproape integral de pe telefon. */
.wheel-rules { margin: 18px 0 0; font-size: 14px; }
.wheel-rules a {
  display: flex; align-items: center; gap: 11px;
  min-height: 52px;
  border-top: 1px solid var(--border-1);
  color: var(--text-1);
  text-decoration: none;
  transition: color .18s var(--ease);
}
.wheel-rules a span { flex: 1; }
.wheel-rules .wr-ico { width: 18px; height: 18px; flex-shrink: 0; color: var(--link); }
.wheel-rules .wr-arrow { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-2); transition: transform .18s var(--ease), color .18s var(--ease); }
.wheel-rules a:hover { color: var(--link); }
.wheel-rules a:hover .wr-arrow { color: var(--link); transform: translateX(3px); }
.wheel-rules a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 4px; }

/* ---------------------------------------------------------------- panel */
/* #wheel-panel e randat dinamic de roata.js, în funcție de stare (Task 10).
   Cardul de mai jos rezervă spațiul și dă un aspect finit cât timp pagina
   se încarcă sau dacă JS nu pornește — vezi .wp-noscript mai jos. */

.wheel-panel {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 22px;
  margin: 26px 0 0;
  min-height: 96px;
  color: var(--text-1);
}

.wheel-panel .wp-noscript {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

/* Câmpurile de formular la 16px pe mobil: sub 16px, iOS Safari mărește
   pagina la focus și rămâne mărită. Task 10 adaugă efectiv câmpurile
   .input în #wheel-panel — regula e pregătită dinainte, ca la restul
   site-ului (vezi shop.css). */
@media (max-width: 860px) { .wheel-panel .input { font-size: 16px; } }

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

.wheel-stage { position: relative; width: min(84vw, 420px); margin-inline: auto; }
/* margin-top:22px vine din regula de reordonare de mai sus (spațiu față de subtitlu pe mobil);
   pe desktop roata e a doua coloană, centrată vertical de .wheel-hero — fără margine proprie. */
@media (min-width: 860px) { .wheel-stage { width: min(38vw, 460px); margin: 0 auto; } }

#wheel-svg { width: 100%; height: auto; display: block; transform: rotate(0deg); transform-origin: 50% 50%; }

/* Paleta „Prismatic" (8 culori distincte, una per segment) — vezi roata.js:TONURI.
   Fond aproape-negru (#0A0A0A, desenat de roata.js ca prim element în SVG) + un contur neon
   pe fiecare felie ÎN LOC de separatorul uniform var(--bg) de dinainte: la 8 culori distincte
   pe fond întunecat, fiecare felie își aduce propriul contur, nu mai există un ton neutru
   comun care să separe toate feliile deodată. Roata arată identic în light și dark — e un
   obiect întunecat pe pagină în ambele teme, intenționat (fill-urile de mai jos NU sunt tokenii
   de temă din header-ul fișierului). */
.wseg { stroke-width: 2; }
.wseg-c1 { fill: #C90245; stroke: #FF0055; }
.wseg-c2 { fill: #C96102; stroke: #FF7A00; }
.wseg-c3 { fill: #C9A802; stroke: #FFD500; }
.wseg-c4 { fill: #63C902; stroke: #7CFF00; }
.wseg-c5 { fill: #02C99A; stroke: #00FFC2; }
.wseg-c6 { fill: #028EC9; stroke: #00B3FF; }
.wseg-c7 { fill: #5502C9; stroke: #6A00FF; }
.wseg-c8 { fill: #C9029E; stroke: #FF00C8; }

/* Cerneala etichetei diferă per segment (contrast minim 4,73:1 pe fiecare culoare — niciun ton
   unic nu citește pe toate cele 8) — pusă direct pe element de roata.js, nu aici. */
.wlabel { font-family: var(--sans); font-size: 13px; font-weight: 600; text-anchor: middle; dominant-baseline: middle; }
@media (max-width: 420px) { .wlabel { font-size: 11px; } }

.wheel-hub {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: 30%; aspect-ratio: 1; border-radius: 50%;
  background: var(--surface-1);
  /* Contur fix (nu un token de temă): pe dark, var(--surface-1) e aproape la fel de întunecat
     ca fondul roții (#0A0A0A) — fără muchie proprie, hub-ul s-ar contopi vizual cu roata. */
  border: 2px solid rgba(255,255,255,.4);
  display: grid; place-items: center;
  box-shadow: 0 12px 28px -14px rgba(0,0,0,.65);
}
/* Cristalul citește la fel pe fond deschis și pe fond închis — spre deosebire de siglă,
   nu are nevoie de o variantă separată pe temă (fără regulă [data-theme="light"] aici).
   width/height (nu doar width) + object-fit: contain, fiindcă imaginea (594×624) e mai
   înaltă decât lată — spre deosebire de sigla lată de dinainte, un singur ax ar lăsa-o
   fie să depășească hub-ul circular, fie să pară minusculă. */
.wheel-hub img { width: 60%; height: 60%; object-fit: contain; }

.wheel-pointer {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%); z-index: 2;
  width: 0; height: 0; border-left: 13px solid transparent; border-right: 13px solid transparent;
  /* Corpul rămâne ALB, fix — nu var(--crystal-deep) și nici o culoare din paletă. Albul e
     singura valoare care nu apare printre cele 8 culori ale roții, deci săgeata nu se poate
     confunda cu segmentul de sub ea. Testat pe toate 8: aurul dispare pe galben, cyanul pe
     turcoaz, lime-ul pe verde, magenta pe roz — albul, pe niciunul. */
  border-top: 22px solid #fff;
  /* Halou cyan pe corp alb: accentul e doar în aură, deci nu costă nimic din siguranța
     corpului. Două straturi — unul strâns pentru muchie, unul larg pentru strălucire — plus
     o umbră întunecată slabă, fiindcă vârful de sus iese peste pagină, care pe tema deschisă
     e aproape albă. Filtrul nu se recalculează în timpul rotirii: săgeata stă pe loc, roata
     e cea care se învârte sub ea. */
  filter: drop-shadow(0 0 5px rgba(0,229,255,.95))
          drop-shadow(0 0 14px rgba(0,229,255,.55))
          drop-shadow(0 1px 2px rgba(0,0,0,.45));
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 560px) {
  .wheel-hero { padding: 28px 0 44px; }
  .wheel-panel { padding: 18px; }
}

@media (max-width: 360px) {
  .wheel-stage { width: 90vw; }
}

/* ============================================================
   Conținutul din #wheel-panel, randat de roata.js după stare (Task 10).
   Fiecare stare e un ecran propriu — regulile de mai jos sunt comune
   tuturor (etichete, erori, câmpuri), plus câte un bloc per stare.
   ============================================================ */

.w-label {
  display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-2); font-weight: 600; margin: 0 0 8px;
}
.w-check .w-label, .w-spin .w-label, .w-spin-active .w-label { margin-top: 16px; }
.w-check .w-label:first-child, .w-spin .w-label:first-child, .w-spin-active .w-label:first-child { margin-top: 0; }

/* Codul se scrie mereu cu majuscule (normalizat și de server) — reflectăm asta vizual. */
#w-code { text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }

.w-err { color: var(--danger-fg); font-size: 13px; line-height: 1.45; margin: 8px 0 0; }

.w-check .btn, .w-spin .btn, .w-spin-active .btn, .w-used .btn, .w-cta-row .btn, .w-paused .btn {
  margin-top: 16px; min-height: 48px;
}
.w-check .btn[disabled], .w-spin .btn[disabled], .w-spin-active .btn[disabled] { opacity: .6; cursor: not-allowed; }
.input[disabled] { opacity: .65; }

.w-how { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border-1); }
.w-how h3 { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--text-1); margin: 0 0 8px; }
.w-how p { color: var(--text-2); font-size: 14px; line-height: 1.55; margin: 0 0 4px; }

/* ---- ready ---- */
.w-ready-hint { color: var(--text-2); font-size: 13.5px; margin: 0 0 4px; }

/* ---- used — destinație, nu eroare: zero roșu, zero iconiță de eroare ---- */
.w-used h3 { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--text-1); margin: 0 0 10px; }
.w-used p { color: var(--text-2); font-size: 14.5px; line-height: 1.55; margin: 0 0 10px; }
.w-used-at { color: var(--text-1); font-weight: 600; }
.w-used-prize { color: var(--text-1); }
.w-used-prize b { color: var(--crystal-deep); }

.w-countdown {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px;
  padding: 12px 14px; background: var(--surface-1); border: 1px solid var(--border-1); border-radius: 10px;
}
.w-cd-label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.w-cd-time { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 17px; font-weight: 700; color: var(--text-1); }

.w-consolation { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--text-2); margin: 0 0 16px; }
.w-consolation code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; letter-spacing: .06em;
  background: var(--surface-1); border: 1px solid var(--border-1); border-radius: 6px; padding: 3px 8px; color: var(--text-1);
}

.w-note { color: var(--text-2); font-size: 13px; margin: 6px 0 14px; }
.w-recheck p { color: var(--text-2); font-size: 14.5px; line-height: 1.55; margin: 0; }

/* ---- bifele obligatorii — regulament + newsletter, mereu randate (vezi readyScreen din roata.js) ---- */
.w-check-label {
  display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; padding: 10px 2px;
  font-size: 13.5px; color: var(--text-2); cursor: pointer; min-height: 44px;
}
.w-check-label input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--crystal-deep); }
/* Linkul din bifa regulamentului (roata.js → rulesCheckLabel) — fără asta ar moșteni `a { color:
   inherit; text-decoration:none }` din styles.css și s-ar confunda cu restul textului bifei,
   nedistins vizual ca link. Același tipar ca .w-other-code a, mai jos — inclusiv padding-ul: fără
   el, zona apăsabilă e cât înălțimea textului (~18px), sub minimul de 24px recomandat pe touch. */
.w-check-label a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; display: inline-block; padding: 6px 2px; }
.w-check-label a:hover { color: var(--link-hover); }

/* ---- won / restored ---- */
.w-restored-note {
  display: inline-block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--crystal-deep); font-weight: 700; margin: 0 0 8px;
}
.w-won h3 { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--text-1); margin: 0 0 6px; }
.w-prize-label { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--text-1); margin: 0 0 16px; }

.w-voucher { display: flex; align-items: stretch; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.w-voucher code {
  flex: 1 1 auto; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 17px; font-weight: 700;
  letter-spacing: .08em; color: var(--text-1); background: var(--surface-1); border: 1px dashed var(--crystal-deep);
  border-radius: 8px; padding: 12px 14px; text-align: center;
}
.w-voucher .btn { margin-top: 0; min-height: 44px; min-width: 44px; }

.w-cond { color: var(--text-2); font-size: 13.5px; line-height: 1.5; margin: 0 0 4px; }
.w-cta-row { margin-top: 4px; }
.w-email-note { color: var(--text-2); font-size: 13px; margin: 12px 0 0; }

/* Cale discretă de întoarcere la câmpul de cod — vezi comentariul din roata.js:wonScreen. */
.w-other-code { margin: 14px 0 0; font-size: 13px; text-align: center; }
.w-other-code a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; display: inline-block; padding: 6px 2px; }
.w-other-code a:hover { color: var(--link-hover); }

/* ---- paused ---- */
.w-paused h3 { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--text-1); margin: 0 0 10px; }
.w-paused p { color: var(--text-2); font-size: 14.5px; line-height: 1.55; margin: 0 0 4px; }

/* ---- glimmer pe felia câștigătoare + pulsație pe card (spec §8.5) ---- */
@keyframes wp-pulse { 0% { transform: scale(1); } 45% { transform: scale(1.015); } 100% { transform: scale(1); } }
.wheel-panel.wp-pulse { animation: wp-pulse .6s var(--ease); }

@keyframes wseg-flash { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.wseg.wseg-win { animation: wseg-flash .5s ease-in-out 2; }

@media (prefers-reduced-motion: reduce) {
  .wheel-panel.wp-pulse { animation: none; }
  .wseg.wseg-win { animation: none; }
  .wheel-rules a:hover .wr-arrow { transform: none; }
}