/* ===========================================================================
   AdventureNET — temă comună pentru paginile speciale (401/403/404/429/500/503)
   ---------------------------------------------------------------------------
   Aceeași lume ca poarta de acces (login): cer înstelat, foaie de pergament cu
   chenar auriu, peceți de ceară, tipografie serif aurie, butoane noapte + aur.
   Fiecare pagină pune o clasă `sp-<cod>` pe <body> ca să-și dea culoarea peceții.
   =========================================================================== */
:root{
  --noapte-adanca:#060b18; --noapte:#0a1024; --noapte-medie:#101a36; --albastru-regal:#17264e;
  --aur:#dcb45f; --aur-clar:#fbeec2; --aur-cald:#eed597; --aur-stins:#b09150; --aur-adanc:#93691f;
  --pergament:#f4ead2; --pergament-cald:#ecdfc2; --pergament-umbra:#dccdad;
  --cerneala:#2b2016; --cerneala-medie:#43371f; --cerneala-stinsa:#6a583a;
  --sp-serif:"Cormorant Garamond",Palatino,"Palatino Linotype",Georgia,serif;
  --sp-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sp-usor:cubic-bezier(.22,1,.36,1);
  --accent:#93691f;
}
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body.sp-body{
  min-height:100vh;
  font-family:var(--sp-sans);
  color:var(--pergament);
  background:
    radial-gradient(120% 70% at 50% -12%, rgba(220,180,95,.16), transparent 55%),
    radial-gradient(90% 60% at 50% 0%, rgba(23,38,78,.7), transparent 60%),
    linear-gradient(180deg, var(--noapte) 0%, var(--noapte-adanca) 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  display:flex;flex-direction:column;
}

/* cer înstelat + straturi de parallax (mișcate ușor din JS, opțional) */
.sp-stele{position:fixed;inset:-10% -10% -10% -10%;pointer-events:none;z-index:0;opacity:.55;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(251,238,194,.9), transparent),
    radial-gradient(1.2px 1.2px at 78% 12%, rgba(251,238,194,.7), transparent),
    radial-gradient(1.7px 1.7px at 33% 42%, rgba(238,213,151,.8), transparent),
    radial-gradient(1.1px 1.1px at 63% 66%, rgba(251,238,194,.6), transparent),
    radial-gradient(1.3px 1.3px at 88% 74%, rgba(238,213,151,.7), transparent),
    radial-gradient(1.2px 1.2px at 8% 82%, rgba(251,238,194,.6), transparent),
    radial-gradient(1.4px 1.4px at 45% 88%, rgba(251,238,194,.5), transparent);
  transition:transform .3s ease-out;}
.sp-ceata{position:fixed;left:0;right:0;bottom:0;height:34vh;pointer-events:none;z-index:0;
  background:linear-gradient(180deg, transparent, rgba(6,11,24,.55));}

/* ── Structura paginii ───────────────────────────────────────────────── */
.sp-wrap{position:relative;z-index:1;width:100%;max-width:1080px;margin:0 auto;
  padding:clamp(16px,3vw,32px) clamp(16px,4vw,32px) 48px;flex:1;display:flex;flex-direction:column;}

.sp-bara{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:clamp(20px,4vw,40px);}
.sp-marca{display:inline-flex;align-items:center;gap:11px;text-decoration:none;}
.sp-marca img{width:40px;height:40px;display:block;filter:drop-shadow(0 4px 8px rgba(0,0,0,.55));}
.sp-marca .nume{font-family:var(--sp-serif);font-weight:700;font-size:23px;letter-spacing:.4px;
  background:linear-gradient(180deg,var(--aur-clar),var(--aur) 55%,var(--aur-adanc));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.sp-inapoi{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
  text-decoration:none;font-weight:600;font-size:13.5px;color:var(--aur-clar);
  border:1px solid rgba(220,180,95,.42);background:rgba(16,26,54,.6);
  box-shadow:inset 0 1px 0 rgba(251,238,194,.14);
  transition:transform .2s var(--sp-usor),border-color .2s,background .2s;}
.sp-inapoi:hover,.sp-inapoi:focus-visible{transform:translateY(-2px);border-color:rgba(220,180,95,.85);background:rgba(23,38,78,.72);}
.sp-inapoi svg{width:16px;height:16px;}

/* zona centrală */
.sp-scena{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(18px,3vw,26px);}

/* foaia de pergament cu chenar auriu (ca paginile cărții) */
.sp-carte{position:relative;width:100%;max-width:640px;
  padding:clamp(28px,5vw,44px) clamp(22px,4vw,40px);border-radius:16px;
  background:linear-gradient(158deg, var(--pergament) 0%, var(--pergament-cald) 60%, var(--pergament-umbra) 100%);
  color:var(--cerneala);
  box-shadow:0 0 0 1px rgba(146,105,31,.55), 0 0 0 6px rgba(244,234,210,.06),
    0 26px 56px rgba(6,11,24,.55), inset 0 1px 0 rgba(255,255,255,.55);}
.sp-carte::before{content:"";position:absolute;inset:10px;border-radius:10px;pointer-events:none;
  border:1px solid rgba(146,105,31,.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);}
.sp-carte--lat{max-width:960px;}

/* pecetea mare cu codul */
.sp-pecete{position:relative;width:clamp(96px,18vw,128px);height:clamp(96px,18vw,128px);margin:0 auto clamp(14px,2vw,20px);
  border-radius:50%;display:grid;place-items:center;
  font-family:var(--sp-serif);font-weight:700;font-size:clamp(34px,7vw,46px);color:#fff4e8;letter-spacing:1px;
  background:var(--accent);
  background:radial-gradient(120% 120% at 32% 26%, color-mix(in srgb,var(--accent) 72%, #fff 28%), var(--accent) 74%);
  box-shadow:0 8px 20px rgba(0,0,0,.34), 0 0 0 4px rgba(255,246,230,.26) inset, 0 0 0 7px rgba(0,0,0,.28);
  box-shadow:0 8px 20px rgba(0,0,0,.34), 0 0 0 4px rgba(255,246,230,.26) inset, 0 0 0 7px color-mix(in srgb,var(--accent) 55%, #000 45%);
  text-shadow:0 2px 4px rgba(0,0,0,.4);}

.sp-eticheta{display:inline-block;margin-bottom:10px;font-size:11.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--accent);}
.sp-titlu{margin:0;font-family:var(--sp-serif);font-weight:700;line-height:1.06;letter-spacing:.4px;
  font-size:clamp(28px,5.4vw,44px);color:var(--cerneala);}
.sp-text{margin:14px auto 0;max-width:52ch;font-size:clamp(14.5px,2.1vw,16px);line-height:1.62;color:var(--cerneala-medie);}
.sp-nota{margin:16px auto 0;max-width:48ch;font-size:12.8px;line-height:1.5;color:var(--cerneala-stinsa);
  padding:10px 14px;border-radius:10px;background:rgba(146,105,31,.09);border:1px solid rgba(146,105,31,.2);}
.sp-nota b{color:var(--cerneala);}

/* ── Butoane ─────────────────────────────────────────────────────────── */
.sp-actiuni{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:clamp(20px,3vw,28px);}
.sp-btn{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:12px;cursor:pointer;
  text-decoration:none;font-family:var(--sp-sans);font-weight:600;font-size:14px;letter-spacing:.2px;color:var(--aur-clar);
  background:linear-gradient(180deg, var(--albastru-regal), var(--noapte) 92%);
  border:1px solid rgba(220,180,95,.5);
  box-shadow:0 6px 16px rgba(6,11,24,.4), inset 0 1px 0 rgba(251,238,194,.16);
  transition:transform .18s var(--sp-usor), box-shadow .18s var(--sp-usor), border-color .18s, opacity .18s;}
.sp-btn:hover,.sp-btn:focus-visible{transform:translateY(-2px);border-color:rgba(220,180,95,.92);
  box-shadow:0 12px 24px rgba(6,11,24,.5), inset 0 1px 0 rgba(251,238,194,.24), 0 0 22px rgba(220,180,95,.14);}
.sp-btn svg{width:16px;height:16px;}
.sp-btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:0 6px 16px rgba(6,11,24,.4);}
/* buton auriu plin, pentru acțiunea principală */
.sp-btn--aur{color:var(--noapte-adanca);border-color:rgba(146,105,31,.6);
  background:linear-gradient(180deg, var(--aur-clar), var(--aur) 52%, var(--aur-stins));
  box-shadow:0 8px 18px rgba(220,180,95,.28), inset 0 1px 0 rgba(255,255,255,.5);}
.sp-btn--aur:hover,.sp-btn--aur:focus-visible{box-shadow:0 12px 26px rgba(220,180,95,.4), inset 0 1px 0 rgba(255,255,255,.6);}
/* buton discret pe pergament */
.sp-btn--ghost{color:var(--cerneala-medie);background:rgba(146,105,31,.06);border-color:rgba(146,105,31,.32);box-shadow:none;}
.sp-btn--ghost:hover,.sp-btn--ghost:focus-visible{background:rgba(146,105,31,.12);border-color:rgba(146,105,31,.5);box-shadow:none;}

/* ── Peceți per cod ──────────────────────────────────────────────────── */
body.sp-401{--accent:#c19a3c;}
body.sp-403{--accent:#a2402f;}
body.sp-404{--accent:#2f6f7c;}
body.sp-429{--accent:#c07a2e;}
body.sp-500{--accent:#8f2f39;}
body.sp-503{--accent:#3f7a52;}

/* subsol mic */
.sp-subsol{position:relative;z-index:1;text-align:center;padding:0 16px 26px;color:rgba(244,234,210,.55);font-size:12.5px;}
.sp-subsol a{color:var(--aur-cald);text-decoration:none;border-bottom:1px solid rgba(238,213,151,.3);}
.sp-subsol a:hover{border-bottom-color:var(--aur-cald);}

:where(a,button):focus-visible{outline:3px solid var(--aur-cald);outline-offset:3px;border-radius:10px;}

/* ── Cronometru (429 / 503) ──────────────────────────────────────────── */
.sp-timer{margin:clamp(16px,2.5vw,22px) auto 0;display:flex;align-items:center;justify-content:center;gap:14px;}
.sp-timer-cerc{position:relative;width:118px;height:118px;}
.sp-timer-cerc svg{transform:rotate(-90deg);width:100%;height:100%;}
.sp-timer-cerc .fundal{fill:none;stroke:rgba(146,105,31,.2);stroke-width:8;}
.sp-timer-cerc .progres{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round;
  transition:stroke-dashoffset 1s linear;}
.sp-timer-num{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--sp-serif);font-weight:700;font-size:34px;color:var(--cerneala);}

/* animație lină pt pecete */
@keyframes sp-pluteste{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
.sp-anim{animation:sp-pluteste 5.5s ease-in-out infinite;}

@media (prefers-reduced-motion:reduce){
  .sp-stele{transition:none;} .sp-anim{animation:none;}
  .sp-btn,.sp-inapoi{transition:none;}
}
@media (max-width:560px){ .sp-actiuni{flex-direction:column;} .sp-btn{justify-content:center;} }

/* ── Decor animat ambiant (specific fiecărei pagini, ca la versiunile vechi) ──
   Elemente aurii care plutesc / se rotesc discret în fundal. Subtile, ca să
   dea viață fără să distragă. Ascunse la „reduce motion". */
.sp-decor{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.sp-decor .piesa{position:absolute;color:rgba(220,180,95,.16);will-change:transform;}
.sp-decor .piesa svg{width:100%;height:100%;display:block;}
.sp-decor .roteste{animation:sp-roteste 22s linear infinite;}
.sp-decor .roteste-invers{animation:sp-roteste-invers 18s linear infinite;}
.sp-decor .pluteste{animation:sp-pluteste-lent 9s ease-in-out infinite;}
@keyframes sp-roteste{to{transform:rotate(360deg);}}
@keyframes sp-roteste-invers{to{transform:rotate(-360deg);}}
@keyframes sp-pluteste-lent{0%,100%{transform:translateY(0) rotate(var(--rot,0deg));}50%{transform:translateY(-24px) rotate(calc(var(--rot,0deg) + 10deg));}}
@media (prefers-reduced-motion:reduce){ .sp-decor .roteste,.sp-decor .roteste-invers,.sp-decor .pluteste{animation:none;} }

/* ═══════════════════════════════════════════════════════════════════════
   STRUCTURĂ PE DOUĂ COLOANE — stânga: informația erorii; dreapta: panoul
   interactiv tematic (joc, cronometru, diagnostic, angrenaje…).
   Fiecare coloană este o filă de pergament. Se strâng una sub alta pe mobil.
   ═══════════════════════════════════════════════════════════════════════ */
.sp-duo{display:grid;grid-template-columns:1.02fr 1.12fr;gap:clamp(16px,2.6vw,26px);
  align-items:stretch;width:100%;max-width:1060px;margin:0 auto;}
.sp-duo > .sp-carte{max-width:none;margin:0;text-align:left;display:flex;flex-direction:column;justify-content:center;}
@media (max-width:900px){ .sp-duo{grid-template-columns:1fr;} .sp-duo > .sp-carte{text-align:center;align-items:center;} }

/* ── Coloana de informație ── */
.sp-badge{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  padding:6px 13px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--accent);background:rgba(146,105,31,.1);border:1px solid rgba(146,105,31,.32);}
.sp-badge svg{width:14px;height:14px;}
@media (max-width:900px){ .sp-badge{align-self:center;} }
.sp-cod-mare{margin:14px 0 2px;font-family:var(--sp-serif);font-weight:700;line-height:.92;letter-spacing:1px;
  font-size:clamp(74px,13vw,132px);
  background:linear-gradient(160deg, color-mix(in srgb,var(--accent) 60%, #fff 40%), var(--accent) 60%, color-mix(in srgb,var(--accent) 60%, #000 40%));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 6px 22px rgba(0,0,0,.12);}
.sp-subtitlu{margin:0;font-family:var(--sp-serif);font-weight:700;font-size:clamp(24px,4vw,34px);line-height:1.08;color:var(--cerneala);}
.sp-tagline{margin:12px 0 0;font-size:clamp(14.5px,2.1vw,16px);line-height:1.55;color:var(--cerneala-medie);}
.sp-tagline b{color:var(--accent);}

/* mini-carduri de navigare (2×2) */
.sp-carduri{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:clamp(18px,3vw,24px);}
.sp-card-nav{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:12px;text-decoration:none;
  background:rgba(255,255,255,.34);border:1px solid rgba(146,105,31,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .18s var(--sp-usor),border-color .18s,background .18s,box-shadow .18s;}
.sp-card-nav:hover,.sp-card-nav:focus-visible{transform:translateY(-3px);border-color:rgba(146,105,31,.55);
  background:rgba(255,255,255,.5);box-shadow:0 10px 20px rgba(6,11,24,.16), inset 0 1px 0 rgba(255,255,255,.6);}
.sp-card-nav-ic{flex:0 0 auto;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  color:var(--accent);background:rgba(146,105,31,.12);}
.sp-card-nav-ic svg{width:19px;height:19px;}
.sp-card-nav-txt{display:flex;flex-direction:column;min-width:0;text-align:left;}
.sp-card-nav-txt b{font-size:13.6px;color:var(--cerneala);font-weight:700;line-height:1.15;}
.sp-card-nav-txt span{font-size:11.5px;color:var(--cerneala-stinsa);}
@media (max-width:420px){ .sp-carduri{grid-template-columns:1fr;} }

/* ── Coloana panoului interactiv ── */
.sp-panou{position:relative;display:flex;flex-direction:column;}
.sp-panou-cap{text-align:center;margin-bottom:14px;}
.sp-panou-cap h2{margin:0;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--sp-serif);font-weight:700;font-size:clamp(20px,3.2vw,26px);color:var(--cerneala);}
.sp-panou-cap h2 svg{width:22px;height:22px;color:var(--accent);}
.sp-panou-cap p{margin:6px auto 0;max-width:36ch;font-size:13px;line-height:1.5;color:var(--cerneala-medie);}

/* ═══════════════════════════════════════════════════════════════════════
   FUNDAL IMERSIV, TEMATIC — elemente aurii care plutesc / se rotesc / clipesc
   discret în spatele conținutului. Fiecare pagină pune propriile simboluri
   (chei, scuturi, ceasuri, servere, angrenaje…). Oprit la „reduce motion".
   ═══════════════════════════════════════════════════════════════════════ */
.sp-fundal{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.sp-fundal .el{position:absolute;color:rgba(220,180,95,.13);will-change:transform;}
.sp-fundal .el svg{width:100%;height:100%;display:block;}
.sp-fundal .el.tare{color:rgba(220,180,95,.2);}
.sp-fundal .plut{animation:spf-plut var(--d,10s) ease-in-out infinite;}
.sp-fundal .rot{animation:spf-rot var(--d,24s) linear infinite;}
.sp-fundal .rotinv{animation:spf-rot var(--d,20s) linear infinite reverse;}
.sp-fundal .deriva{animation:spf-deriva var(--d,26s) ease-in-out infinite;}
@keyframes spf-plut{0%,100%{transform:translateY(0) rotate(var(--r,0deg));}50%{transform:translateY(-26px) rotate(calc(var(--r,0deg) + 8deg));}}
@keyframes spf-rot{to{transform:rotate(360deg);}}
@keyframes spf-deriva{0%{transform:translate(0,0);}50%{transform:translate(26px,-16px);}100%{transform:translate(0,0);}}
/* Lumini de server care clipesc (pagina 500) */
.sp-fundal .led{animation:spf-led 2.4s steps(1,end) infinite;}
.sp-fundal .led-b{animation:spf-led 1.7s steps(1,end) .5s infinite;}
.sp-fundal .led-c{animation:spf-led 3.1s steps(1,end) 1s infinite;}
@keyframes spf-led{0%,45%{opacity:1;}46%,100%{opacity:.22;}}
@media (prefers-reduced-motion:reduce){
  .sp-fundal .plut,.sp-fundal .rot,.sp-fundal .rotinv,.sp-fundal .deriva,
  .sp-fundal .led,.sp-fundal .led-b,.sp-fundal .led-c{animation:none;}
}