/* Manel Quest — Minecraft cinematic HD (mc4)
   Soft depth · rich color · continuous motion · NOT chunky gray inventory */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

:root{
  --mc-grass:#4cae3a;
  --mc-grass-light:#7dcf5a;
  --mc-grass-dark:#2f6b24;
  --mc-dirt:#6b4226;
  --mc-dirt-mid:#8a5a32;
  --mc-stone:#6e7a6e;
  --mc-coal:#0d1a12;
  --mc-diamond:#5ef0e0;
  --mc-diamond-soft:rgba(94,240,224,.45);
  --mc-emerald:#3dd68c;
  --mc-emerald-glow:rgba(61,214,140,.55);
  --mc-gold:#f5d76e;
  --mc-gold-soft:rgba(245,215,110,.55);
  --mc-wood:#2a1c12;
  --mc-glass:rgba(26,46,26,.72);
  --mc-glass-edge:rgba(61,214,140,.45);
  --mc-sky-dawn:#f0b27a;
  --mc-sky-day:#6ec8ef;
  --mc-sky-deep:#2a6fa0;
  --mc-text:#f4fff4;
  --mc-text-muted:#c8e6c8;
  --mc-ink:#0e1a10;
  --font-pixel:'Press Start 2P', system-ui, monospace;
  --font-ui:'VT323', 'Segoe UI', system-ui, sans-serif;
  --radius:14px;
  --radius-sm:12px;
}

/* ========== HIDE old stadium leftovers ========== */
.bg-stars,.bg-stadium-lights,.bg-city,.bg-pitch,.bg-water,.bg-fog,
.bg-sky,.blaugrana-stripe,.holo-grid,.scanline,.prat-aura,
.speedlines,.fx-rays,.screen-flash,#sparkles-canvas{
  display:none !important;
  opacity:0 !important;
  pointer-events:none !important;
  visibility:hidden !important;
}
.bg-noise{
  opacity:.04 !important;
  mix-blend-mode:soft-light;
  pointer-events:none !important;
  z-index:0 !important;
}
.bg-vignette{
  opacity:.35 !important;
  pointer-events:none !important;
  background:radial-gradient(ellipse at center, transparent 40%, rgba(6,14,8,.55) 100%) !important;
  z-index:0 !important;
}

/* ========== BASE ========== */
html,body{
  background:var(--mc-sky-deep) !important;
  background-image:none !important;
  color:var(--mc-text) !important;
  font-family:var(--font-ui) !important;
  font-size:22px !important;
  line-height:1.4 !important;
  min-height:100%;
  overflow-x:hidden;
}
body::before,body::after{ display:none !important; content:none !important; }

#app, main, .vista{ position:relative; z-index:2; }

/* ========== HD ANIMATED SCENE ========== */
.bg-scene.mc-hd,
.bg-scene{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  position:fixed !important;
  inset:0 !important;
  z-index:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
}

.mc-sky{
  position:absolute; inset:0;
  background:linear-gradient(
    180deg,
    #1a3a5c 0%,
    #3d7eb8 18%,
    #6ec8ef 42%,
    #a8dff5 58%,
    #f0c78a 78%,
    #e8a86a 100%
  );
  background-size:100% 200%;
  animation:mcSkyShift 90s ease-in-out infinite alternate;
}
@keyframes mcSkyShift{
  0%{ background-position:0% 0%; filter:saturate(1) brightness(1); }
  35%{ background-position:0% 35%; filter:saturate(1.08) brightness(1.05); }
  70%{ background-position:0% 55%; filter:saturate(.95) brightness(.98); }
  100%{ background-position:0% 20%; filter:saturate(1.05) brightness(1.02); }
}

.mc-sun{
  position:absolute;
  top:12%; right:14%;
  width:90px; height:90px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,
    #fff8e0 0%, #ffe08a 28%, #ffb347 55%, transparent 72%);
  box-shadow:
    0 0 40px 18px rgba(255,200,100,.45),
    0 0 90px 40px rgba(255,170,60,.25);
  animation:mcSunPulse 8s ease-in-out infinite;
}
@keyframes mcSunPulse{
  0%,100%{ transform:scale(1); opacity:.92; }
  50%{ transform:scale(1.08); opacity:1; }
}

.mc-clouds{
  position:absolute;
  height:120px;
  width:220%;
  left:-40%;
  opacity:.55;
  filter:blur(1px);
  background-repeat:repeat-x;
  background-size:480px 120px;
  animation:mcCloudDrift 60s linear infinite;
}
.mc-clouds.c1{
  top:8%;
  opacity:.5;
  animation-duration:70s;
  background-image:
    radial-gradient(ellipse 90px 40px at 20% 60%, rgba(255,255,255,.85) 0%, transparent 70%),
    radial-gradient(ellipse 120px 50px at 45% 50%, rgba(255,255,255,.75) 0%, transparent 70%),
    radial-gradient(ellipse 80px 35px at 70% 65%, rgba(255,255,255,.8) 0%, transparent 70%),
    radial-gradient(ellipse 100px 45px at 90% 45%, rgba(255,255,255,.7) 0%, transparent 70%);
}
.mc-clouds.c2{
  top:18%;
  opacity:.4;
  animation-duration:95s;
  animation-direction:reverse;
  background-image:
    radial-gradient(ellipse 140px 55px at 15% 55%, rgba(255,255,255,.7) 0%, transparent 70%),
    radial-gradient(ellipse 100px 40px at 50% 60%, rgba(255,255,255,.65) 0%, transparent 70%),
    radial-gradient(ellipse 130px 50px at 80% 50%, rgba(255,255,255,.75) 0%, transparent 70%);
}
.mc-clouds.c3{
  top:28%;
  height:80px;
  opacity:.32;
  animation-duration:50s;
  background-size:360px 80px;
  background-image:
    radial-gradient(ellipse 70px 30px at 25% 50%, rgba(255,255,255,.8) 0%, transparent 70%),
    radial-gradient(ellipse 90px 35px at 60% 55%, rgba(255,255,255,.7) 0%, transparent 70%),
    radial-gradient(ellipse 60px 28px at 88% 45%, rgba(255,255,255,.75) 0%, transparent 70%);
}
@keyframes mcCloudDrift{
  from{ transform:translateX(0); }
  to{ transform:translateX(-40%); }
}

.mc-mountains{
  position:absolute;
  left:0; right:0; bottom:18%;
  height:28%;
  background:
    linear-gradient(160deg, transparent 40%, #1e3a2a 40.5%, #1e3a2a 100%),
    linear-gradient(-155deg, transparent 45%, #254832 45.5%, #254832 100%),
    linear-gradient(145deg, transparent 50%, #163024 50.5%, #163024 100%);
  background-size:38% 100%, 42% 100%, 45% 100%;
  background-position:8% 0, 48% 0, 88% 0;
  background-repeat:no-repeat;
  opacity:.85;
  clip-path:polygon(
    0% 100%, 0% 55%, 8% 40%, 16% 58%, 24% 35%, 34% 52%,
    42% 28%, 52% 48%, 60% 32%, 70% 50%, 78% 25%, 88% 45%,
    100% 38%, 100% 100%
  );
  filter:drop-shadow(0 -8px 20px rgba(10,30,20,.4));
}

.mc-biome{
  position:absolute;
  left:0; right:0; bottom:0;
  height:22%;
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(61,140,50,.25) 18%,
      #3a6b28 35%,
      #2d5220 55%,
      #5a3a22 72%,
      #3d2818 100%);
}

.mc-grass{
  position:absolute;
  left:0; right:0; bottom:14%;
  height:42px;
  background:
    repeating-linear-gradient(90deg,
      #5ecf4a 0 10px,
      #4cae3a 10px 20px,
      #3d9a32 20px 30px,
      #6ad854 30px 40px),
    linear-gradient(180deg, #7dcf5a 0%, #3a6b28 100%);
  background-blend-mode:soft-light;
  box-shadow:
    0 4px 0 #5a3a22,
    0 10px 24px rgba(0,0,0,.35);
  transform-origin:center bottom;
  animation:mcGrassSway 6s ease-in-out infinite;
  border-radius:2px 2px 0 0;
}
.mc-grass::before{
  content:"";
  position:absolute; left:0; right:0; top:-10px; height:14px;
  background:
    radial-gradient(ellipse 8px 12px at 8% 100%, #5ecf4a 0%, transparent 70%),
    radial-gradient(ellipse 6px 10px at 18% 100%, #4cae3a 0%, transparent 70%),
    radial-gradient(ellipse 9px 14px at 32% 100%, #6ad854 0%, transparent 70%),
    radial-gradient(ellipse 7px 11px at 48% 100%, #5ecf4a 0%, transparent 70%),
    radial-gradient(ellipse 8px 13px at 62% 100%, #3d9a32 0%, transparent 70%),
    radial-gradient(ellipse 6px 10px at 78% 100%, #5ecf4a 0%, transparent 70%),
    radial-gradient(ellipse 9px 12px at 92% 100%, #6ad854 0%, transparent 70%);
  opacity:.9;
  animation:mcGrassSway 5.2s ease-in-out infinite reverse;
}
@keyframes mcGrassSway{
  0%,100%{ transform:translateX(0) skewX(0deg); }
  50%{ transform:translateX(3px) skewX(.4deg); }
}

.mc-embers{
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle 2px at 12% 70%, rgba(255,220,120,.85), transparent 70%),
    radial-gradient(circle 1.5px at 28% 55%, rgba(180,255,200,.7), transparent 70%),
    radial-gradient(circle 2px at 45% 78%, rgba(255,200,90,.8), transparent 70%),
    radial-gradient(circle 1.5px at 62% 62%, rgba(150,255,220,.75), transparent 70%),
    radial-gradient(circle 2px at 78% 72%, rgba(255,230,140,.7), transparent 70%),
    radial-gradient(circle 1.5px at 88% 48%, rgba(200,255,180,.65), transparent 70%),
    radial-gradient(circle 2px at 35% 40%, rgba(255,210,100,.55), transparent 70%),
    radial-gradient(circle 1.5px at 55% 35%, rgba(160,255,230,.5), transparent 70%);
  animation:mcEmberPulse 4.5s ease-in-out infinite;
}
@keyframes mcEmberPulse{
  0%,100%{ opacity:.35; transform:translateY(0); }
  50%{ opacity:.85; transform:translateY(-6px); }
}

/* ========== TYPOGRAPHY ========== */
h1,h2,h3,.h1-glow,.h1-sub,.titol,.crest,.badge-arc,.badge-prat,.badge-barca,
.login-chip,.tag-nou,.kpi b{
  font-family:var(--font-pixel) !important;
  letter-spacing:.5px;
}
h1,.h1-glow,.h1-sub{
  color:var(--mc-gold) !important;
  -webkit-text-fill-color:var(--mc-gold) !important;
  background:none !important;
  filter:none !important;
  text-shadow:
    0 0 12px var(--mc-gold-soft),
    0 0 28px rgba(245,215,110,.3),
    2px 2px 0 rgba(0,0,0,.65) !important;
  font-size:clamp(14px, 3.2vw, 22px) !important;
  line-height:1.45 !important;
}
h2,h3,.titol{
  color:var(--mc-gold) !important;
  font-size:clamp(11px, 2.2vw, 14px) !important;
  text-shadow:0 0 10px var(--mc-gold-soft), 1px 1px 0 #000 !important;
}
p,li,label,.subtit,.explicacio,.enunciat,.ajuda,.bloc p,.panell p,
input,textarea,select,button .label{
  font-family:var(--font-ui) !important;
  font-size:22px !important;
}
button,.btn{
  font-family:var(--font-pixel) !important;
  font-size:10px !important;
}

/* ========== FROSTED / WOOD-STONE HD PANELS ========== */
.hero-box,.panell,.bloc,.illa,.kpi,.dia-head,.setmana-fila,
.login .hero-box,#login .hero-box,.pares-card,.card,.modal-box,.dia-card{
  background:
    linear-gradient(145deg, rgba(40,70,40,.55) 0%, var(--mc-glass) 48%, rgba(18,32,18,.82) 100%) !important;
  backdrop-filter:blur(14px) saturate(1.15) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.15) !important;
  border:1.5px solid var(--mc-glass-edge) !important;
  border-radius:var(--radius) !important;
  box-shadow:
    0 0 0 1px rgba(245,215,110,.12),
    0 8px 28px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.25) !important;
  outline:none !important;
  color:var(--mc-text) !important;
  padding:1.1rem 1.25rem !important;
}

#login .hero-box,.login .hero-box{
  max-width:560px;
  margin:2rem auto;
  background:
    linear-gradient(160deg, rgba(55,90,45,.75) 0%, rgba(30,50,28,.88) 50%, rgba(22,36,20,.92) 100%) !important;
  border:1.5px solid rgba(61,214,140,.55) !important;
  box-shadow:
    0 0 0 1px rgba(245,215,110,.2),
    0 0 40px rgba(61,214,140,.2),
    0 16px 40px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.15) !important;
  border-radius:16px !important;
  padding:1.6rem 1.4rem !important;
}
#login .hero-box::before{
  content:"⛏️ ERASMUS CRAFT · FINLAND";
  display:block;
  font-family:var(--font-pixel) !important;
  font-size:8px !important;
  color:var(--mc-gold) !important;
  text-align:center;
  margin-bottom:14px;
  text-shadow:0 0 10px var(--mc-gold-soft);
  letter-spacing:1px;
}

.badge-prat,.badge-barca,.badge-arc,.login-chip,.tag-nou{
  background:rgba(20,40,22,.75) !important;
  color:var(--mc-gold) !important;
  border:1px solid rgba(245,215,110,.4) !important;
  border-radius:999px !important;
  font-family:var(--font-pixel) !important;
  font-size:8px !important;
  padding:8px 12px !important;
  box-shadow:0 0 12px rgba(245,215,110,.15) !important;
  display:inline-block;
  margin:.2rem;
}
.badge-barca{ border-color:rgba(61,214,140,.5) !important; color:var(--mc-emerald) !important; }
.badge-arc{ border-color:rgba(94,240,224,.45) !important; color:var(--mc-diamond) !important; }

.subtit,.build-stamp,.login-sub{
  font-family:var(--font-ui) !important;
  color:var(--mc-text-muted) !important;
  font-size:20px !important;
}
#login .subtit,#login .build-stamp{ color:#e8ffe8 !important; text-shadow:0 1px 2px #0008; }

/* ========== BUTTONS ========== */
.btn, button.btn, .btn.foc, button[type=submit], .go, .topbar button,
button:not(.icon-only){
  background:linear-gradient(180deg, #5ee89a 0%, #2fa86a 55%, #1f7a4c 100%) !important;
  color:#fff !important;
  border:1px solid rgba(180,255,200,.45) !important;
  border-radius:12px !important;
  box-shadow:
    0 4px 0 #145c38,
    0 8px 18px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.35) !important;
  font-family:var(--font-pixel) !important;
  font-size:10px !important;
  text-transform:uppercase;
  padding:12px 16px !important;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover, button.btn:hover, .btn.foc:hover, button[type=submit]:hover{
  filter:brightness(1.08);
  transform:translateY(-2px);
  box-shadow:
    0 6px 0 #145c38,
    0 12px 22px rgba(61,214,140,.35),
    inset 0 1px 0 rgba(255,255,255,.4) !important;
}
.btn:active, button.btn:active, .btn.foc:active, button[type=submit]:active{
  transform:translateY(3px) !important;
  box-shadow:
    0 1px 0 #145c38,
    inset 0 2px 6px rgba(0,0,0,.35) !important;
}
.btn.sec,.btn.secondary,.btn.gris,.btn.stone,button.sec{
  background:linear-gradient(180deg, #8a9a8a, #4a5a4a) !important;
  box-shadow:0 4px 0 #2a322a, 0 8px 16px rgba(0,0,0,.3) !important;
}
.btn.danger,.btn.redstone{
  background:linear-gradient(180deg, #ff7a5a, #c42810) !important;
  box-shadow:0 4px 0 #6a1208, 0 8px 16px rgba(0,0,0,.3) !important;
}

input, textarea, select{
  background:rgba(8,18,10,.75) !important;
  color:var(--mc-gold) !important;
  border:1.5px solid rgba(61,214,140,.4) !important;
  border-radius:10px !important;
  font-family:var(--font-ui) !important;
  font-size:22px !important;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.4) !important;
  padding:10px 12px !important;
}
input:focus, textarea:focus, select:focus{
  outline:none !important;
  border-color:var(--mc-diamond) !important;
  box-shadow:0 0 0 3px rgba(94,240,224,.25), inset 0 2px 8px rgba(0,0,0,.4) !important;
}

/* ========== MAP / DAY CARDS ========== */
.illa,.dia-card,[data-dia]{
  background:
    linear-gradient(150deg, rgba(45,75,45,.7), rgba(22,40,24,.85)) !important;
  border:1.5px solid rgba(61,214,140,.35) !important;
  border-radius:var(--radius-sm) !important;
  min-height:72px;
  box-shadow:0 6px 20px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1) !important;
  transition:transform .15s ease, box-shadow .15s ease;
  backdrop-filter:blur(10px);
}
.illa:hover,.dia-card:hover{
  transform:translateY(-3px);
  box-shadow:
    0 10px 28px rgba(0,0,0,.4),
    0 0 20px rgba(61,214,140,.25),
    inset 0 1px 0 rgba(255,255,255,.15) !important;
  border-color:var(--mc-gold) !important;
}
.illa.fet,.dia-card.fet{
  background:linear-gradient(150deg, rgba(61,214,140,.45), rgba(30,90,55,.8)) !important;
  box-shadow:0 0 22px var(--mc-diamond-soft), 0 6px 18px rgba(0,0,0,.3) !important;
  border-color:var(--mc-diamond) !important;
}
.illa.avui{
  box-shadow:0 0 0 2px var(--mc-diamond), 0 0 28px var(--mc-emerald-glow) !important;
}

/* ========== EXERCICI CARDS ========== */
.exercici,.ex,.item-exercici,li.exercici,.llista-exercicis > *{
  background:
    linear-gradient(135deg, rgba(32,55,36,.88) 0%, rgba(18,32,20,.92) 100%) !important;
  border:1px solid rgba(61,214,140,.28) !important;
  border-left:4px solid var(--mc-emerald) !important;
  border-radius:var(--radius-sm) !important;
  box-shadow:0 4px 16px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06) !important;
  padding:14px 16px !important;
  margin:12px 0 !important;
  position:relative;
  transition:transform .15s ease, box-shadow .15s ease;
  min-height:64px;
  color:var(--mc-text) !important;
}
.exercici:hover,.ex:hover,.item-exercici:hover{
  transform:translateY(-3px);
  box-shadow:
    0 10px 24px rgba(0,0,0,.35),
    0 0 16px rgba(61,214,140,.2) !important;
  border-color:rgba(245,215,110,.45) !important;
  z-index:2;
}
.exercici.fet,.exercici.done,.exercici.checked,.ex.fet,.ex.done,
.exercici[data-fet="1"],.exercici.completat{
  background:linear-gradient(135deg, rgba(40,90,70,.9), rgba(20,55,45,.95)) !important;
  box-shadow:
    0 0 20px var(--mc-diamond-soft),
    0 0 36px rgba(94,240,224,.2),
    0 4px 14px rgba(0,0,0,.3) !important;
  border-color:var(--mc-diamond) !important;
  border-left-color:var(--mc-diamond) !important;
}

.bloc-angles,.mat-angles,.exercici.angles{ border-left-color:var(--mc-diamond) !important; }
.mat-hacker,.bloc-hacker,.exercici.hacker{ border-left-color:#ff6a4a !important; }
.mat-mates,.bloc-mates,.exercici.mates{ border-left-color:var(--mc-gold) !important; }
.mat-historia,.bloc-historia,.exercici.historia{ border-left-color:var(--mc-grass-light) !important; }

/* Exercise clarity helpers */
.ex-missio,.ex-pasos,.ex-ex,.ex-check{
  display:block;
  margin:.35rem 0;
  line-height:1.35;
  font-family:var(--font-ui) !important;
}
.ex-missio{ color:#fff; }
.ex-pasos{ opacity:.95; color:var(--mc-text-muted); }
.ex-ex{ color:#a8d4c0; font-style:normal; }
.ex-ex i{ color:#b8e0cc; }
.ex-check{ font-weight:600; color:var(--mc-diamond); }

/* ========== XP / PROGRESS ========== */
.barra,.progress,.xp-bar,.barra-xp,progress{
  background:rgba(10,20,12,.8) !important;
  border:1px solid rgba(61,214,140,.3) !important;
  border-radius:999px !important;
  height:14px !important;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.45) !important;
  overflow:hidden;
}
.barra i,.barra .fill,.progress > *,.xp-bar > *,.barra-xp > *,progress::-webkit-progress-value{
  background:linear-gradient(90deg, #2fa86a, #5ee89a, var(--mc-diamond)) !important;
  border-radius:999px !important;
  box-shadow:0 0 10px var(--mc-emerald-glow) !important;
}
progress::-webkit-progress-bar{ background:rgba(10,20,12,.8) !important; }

/* ========== TOPBAR / WEEK ========== */
.topbar,.titol-bar{
  background:rgba(10,22,14,.88) !important;
  color:var(--mc-gold) !important;
  border-bottom:2px solid rgba(61,214,140,.4) !important;
  box-shadow:0 4px 20px rgba(0,0,0,.35) !important;
  border-radius:0 !important;
  backdrop-filter:blur(12px);
}
.setmana-fila h3{
  background:rgba(30,50,30,.8) !important;
  color:var(--mc-gold) !important;
  padding:12px !important;
  border:1px solid rgba(245,215,110,.25) !important;
  font-size:10px !important;
  border-radius:var(--radius-sm) !important;
  box-shadow:0 4px 14px rgba(0,0,0,.25) !important;
}

.kpi b{
  color:var(--mc-emerald) !important;
  font-size:13px !important;
  text-shadow:0 0 10px var(--mc-emerald-glow);
}

.err{
  background:rgba(60,10,10,.85) !important;
  color:#ffc8b8 !important;
  border:1px solid #ff6a4a !important;
  border-radius:10px !important;
  font-family:var(--font-ui) !important;
}

.illes{ display:grid; gap:12px; }

.exercici input[type=checkbox]{
  width:22px; height:22px;
  accent-color:var(--mc-emerald);
  border-radius:4px !important;
}

.meme-login{ opacity:.9; }

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce){
  .mc-sky,.mc-sun,.mc-clouds,.mc-grass,.mc-grass::before,.mc-embers{
    animation:none !important;
  }
  .mc-sky{
    background-position:0% 25% !important;
    filter:saturate(1.05) brightness(1) !important;
  }
  .mc-sun{ opacity:.95; transform:none; }
  .mc-clouds{ transform:none; }
  .mc-embers{ opacity:.55; }
  .btn,.exercici,.illa,.dia-card{ transition:none !important; }
}

/* ========== MOBILE ========== */
@media (max-width:700px){
  body{ font-size:20px !important; }
  p,li,label,.subtit,.explicacio,.enunciat{ font-size:20px !important; }
  h1,.h1-sub{ font-size:14px !important; }
  h2{ font-size:11px !important; }
  .btn,button.btn{ font-size:9px !important; padding:10px 12px !important; }
  #login .hero-box,.hero-box,.panell,.bloc{ padding:14px !important; border-radius:12px !important; }
  .exercici{ padding:12px !important; min-height:56px; }
  .mc-sun{ width:60px; height:60px; top:10%; right:8%; }
  .mc-mountains{ height:22%; bottom:16%; }
  .mc-grass{ bottom:12%; height:32px; }
  .mc-biome{ height:18%; }
  .ex-missio,.ex-pasos,.ex-ex,.ex-check{ font-size:19px !important; }
}

/* ========== MATRIX ZONE — hacker / Windows PC biome ==========
   Green-on-black digital rain vibe; rest of app stays Minecraft HD */
.mat-hacker,
.bloc-hacker,
.bloc[data-materia="hacker"],
.bloc.tipus-hacker,
.exercici.hacker,
.llista-exercicis.hacker .exercici,
.panell.hacker,
.illa.hacker{
  --mx-bg:#020a02;
  --mx-green:#00ff66;
  --mx-green-dim:#00cc44;
  --mx-green-glow:rgba(0,255,102,.45);
  --mx-black:#000;
  font-family:'VT323', 'Consolas', 'Courier New', monospace !important;
  color:var(--mx-green) !important;
  background:
    linear-gradient(180deg, rgba(0,255,102,.04) 0%, transparent 4px),
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0) 0px,
      rgba(0,0,0,0) 2px,
      rgba(0,255,80,.035) 3px,
      rgba(0,0,0,0) 4px
    ),
    radial-gradient(ellipse at 50% 0%, rgba(0,80,30,.45), transparent 60%),
    linear-gradient(160deg, #031403 0%, #020a02 50%, #000800 100%) !important;
  border:1px solid var(--mx-green-dim) !important;
  border-left:4px solid var(--mx-green) !important;
  border-radius:12px !important;
  box-shadow:
    0 0 18px rgba(0,255,102,.18),
    0 0 40px rgba(0,255,80,.08),
    inset 0 0 30px rgba(0,255,100,.05) !important;
  text-shadow:0 0 6px rgba(0,255,100,.35);
  position:relative;
  overflow:hidden;
}
.mat-hacker::before,
.bloc-hacker::before{
  content:"WAKE UP, MANEL…";
  position:absolute;
  top:8px; right:12px;
  font-family:'Press Start 2P', monospace !important;
  font-size:7px !important;
  color:rgba(0,255,102,.45);
  letter-spacing:1px;
  pointer-events:none;
  animation:mxWake 4s ease-in-out infinite;
  z-index:1;
}
@keyframes mxWake{
  0%,100%{ opacity:.35; }
  50%{ opacity:.85; text-shadow:0 0 10px var(--mx-green-glow); }
}
.mat-hacker::after,
.bloc-hacker::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(180deg, transparent 0%, rgba(0,255,80,.03) 50%, transparent 100%);
  background-size:100% 8px;
  animation:mxRain 12s linear infinite;
  opacity:.6;
  z-index:0;
}
@keyframes mxRain{
  from{ background-position:0 0; }
  to{ background-position:0 80px; }
}
.mat-hacker > *,
.bloc-hacker > *,
.exercici.hacker > *{ position:relative; z-index:1; }

.mat-hacker h2,.mat-hacker h3,.bloc-hacker h2,.bloc-hacker h3,
.mat-hacker .titol,.bloc-hacker .titol{
  color:var(--mx-green) !important;
  text-shadow:0 0 12px var(--mx-green-glow), 0 0 24px rgba(0,255,80,.3) !important;
  font-family:'Press Start 2P', monospace !important;
  font-size:10px !important;
}
.mat-hacker .explicacio,.bloc-hacker .explicacio,
.mat-hacker p,.bloc-hacker p,
.exercici.hacker .enunciat,
.exercici.hacker .ex-missio,
.exercici.hacker .ex-pasos,
.exercici.hacker .ex-ex,
.exercici.hacker .ex-check,
.exercici.hacker .ex-raw{
  color:#9affb0 !important;
  font-family:'VT323', Consolas, monospace !important;
}
.exercici.hacker .ex-missio b,
.exercici.hacker .ex-check{ color:var(--mx-green) !important; }
.exercici.hacker .ex-ex,
.exercici.hacker .ex-ex i{ color:#6fef9a !important; }
.exercici.hacker:hover{
  box-shadow:
    0 0 24px rgba(0,255,102,.35),
    0 8px 20px rgba(0,0,0,.5) !important;
  border-color:var(--mx-green) !important;
  transform:translateY(-2px);
}
.exercici.hacker.fet,
.exercici.hacker.done,
.exercici.hacker.completat{
  background:linear-gradient(135deg, #003318, #001a0c) !important;
  box-shadow:0 0 28px rgba(0,255,102,.4), inset 0 0 20px rgba(0,255,80,.1) !important;
  border-color:#00ff88 !important;
}
.mat-hacker .btn,
.bloc-hacker .btn{
  background:linear-gradient(180deg, #00cc55, #006622) !important;
  color:#000 !important;
  border:1px solid #00ff66 !important;
  box-shadow:0 0 12px rgba(0,255,100,.35), 0 3px 0 #003311 !important;
  text-shadow:none !important;
}
.mat-hacker input,.bloc-hacker input,
.mat-hacker textarea,.bloc-hacker textarea{
  background:#000 !important;
  color:#00ff66 !important;
  border:1px solid #00aa44 !important;
  font-family:Consolas, 'VT323', monospace !important;
  caret-color:#00ff66;
}

@media (prefers-reduced-motion: reduce){
  .mat-hacker::before,.bloc-hacker::before,
  .mat-hacker::after,.bloc-hacker::after{ animation:none !important; opacity:.5 !important; }
}

/* Windows Matrix lab panels (ex-mac) */
.win-panel,.mac-panel{background:rgba(0,20,0,.82);border:1px solid #00ff66;box-shadow:0 0 18px rgba(0,255,102,.25);color:#b6ffb6;border-radius:12px;padding:12px}
.win-panel-title,.mac-panel-title{font-family:'Press Start 2P',monospace;font-size:10px;color:#00ff66;letter-spacing:.04em}
.win-user,.mac-user{display:flex;gap:10px;align-items:center;color:#d0ffd0}
.win-avatar,.mac-avatar{filter:drop-shadow(0 0 6px #00ff66)}
.mx-tag{color:#00ff66;font-family:ui-monospace,monospace;text-shadow:0 0 8px #00ff66}
/* —— MATRIX ZONE (hacker visual) —— */
.matrix-zone,.digital-visual.matrix-zone{
  position:relative;overflow:hidden;background:#020b06;border:1px solid #00ff66;
  box-shadow:0 0 24px rgba(0,255,102,.35), inset 0 0 40px rgba(0,255,80,.08);
  color:#b7ffb7;border-radius:14px;padding:14px 16px;
}
.matrix-zone .mx-rain{
  pointer-events:none;position:absolute;inset:0;opacity:.22;
  background:repeating-linear-gradient(90deg,transparent 0 12px,rgba(0,255,100,.15) 12px 13px);
  animation:mxRain 12s linear infinite;
}
@keyframes mxRain{from{background-position:0 0}to{background-position:0 120px}}
.matrix-zone .mx-terminal{position:relative;z-index:1;font-family:ui-monospace,Consolas,monospace}
.matrix-zone .mx-titlebar{color:#00ff66;font-weight:700;letter-spacing:.04em;margin-bottom:8px;text-shadow:0 0 8px #00ff66}
.matrix-zone .mx-code{margin:0;white-space:pre-wrap;line-height:1.45;color:#7CFF9A;font-size:.92rem}
.matrix-zone .mx-tag{margin:.6rem 0 0;color:#00ff66;font-weight:700;text-shadow:0 0 10px #00ff66}
.mat-hacker .visual-hero,.bloc-hacker .visual-hero{margin-bottom:.6rem}

/* Exercise structure: mission in EN; translation only inside ajuda details */
.ex-missio,.ex-pasos,.ex-ex,.ex-check{display:block;margin:.35rem 0;line-height:1.4}
.ex-ex{opacity:.9;font-style:italic}
.ex-check{font-weight:600}
.ajuda-d,.ajuda{background:rgba(255,250,200,.35);border-left:3px solid #c9a227;padding:.25rem .5rem;border-radius:6px}
/* ===== Quest pager: one question per screen ===== */
.quest-pager{margin:1rem 0 1.4rem;position:relative}
.q-stage{position:relative;min-height:220px;overflow:hidden}
.q-slide{animation:none}
.q-slide.on{display:block}
.q-slide.out-left{animation:qOutLeft .18s ease forwards}
.q-slide.out-right{animation:qOutRight .18s ease forwards}
.q-slide.in-right{animation:qInRight .22s ease}
.q-slide.in-left{animation:qInLeft .22s ease}
@keyframes qOutLeft{to{opacity:0;transform:translateX(-28px) scale(.98)}}
@keyframes qOutRight{to{opacity:0;transform:translateX(28px) scale(.98)}}
@keyframes qInRight{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:none}}
@keyframes qInLeft{from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:none}}
.q-card{background:rgba(20,28,40,.88);border:2px solid #5D9C3F;border-radius:16px;padding:1rem 1.1rem;box-shadow:0 10px 28px rgba(0,0,0,.35)}
.q-enun{display:block;margin-bottom:.75rem;font-size:1.05rem;line-height:1.45}
.q-progress{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}
.q-pill{font-family:var(--font-pixel,'Press Start 2P',monospace);font-size:.65rem;color:#FCEE4B;white-space:nowrap}
.q-bar{flex:1;height:10px;background:#1b1b2f;border-radius:99px;overflow:hidden;border:1px solid #3B6D27}
.q-bar i{display:block;height:100%;background:linear-gradient(90deg,#5D9C3F,#FCEE4B);border-radius:99px}
.q-nav{display:flex;justify-content:space-between;gap:.75rem;margin-top:.9rem}
.q-nav .btn{min-width:120px}
.q-next.done,.quest-done .q-next{background:#5D9C3F;color:#fff}
.learn-media{margin:.8rem 0 1rem;display:grid;gap:.85rem}
.learn-read,.learn-video{background:rgba(15,40,60,.85);border:1px solid #4AEDD9;border-radius:14px;padding:.85rem 1rem}
.learn-read h4,.learn-video h4{margin:0 0 .5rem;color:#4AEDD9;font-family:var(--font-pixel,'Press Start 2P',monospace);font-size:.7rem}
.learn-read-body{line-height:1.55;color:#e8fff6;font-size:1.02rem}
.learn-read-body p{margin:.4rem 0}
.learn-video-wrap{position:relative;padding-top:56.25%;border-radius:12px;overflow:hidden;background:#000}
.learn-video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.learn-video-note{margin:.5rem 0 0;opacity:.85;font-size:.92rem}

/* ===== Power cinematic learn + quest (mc10) ===== */
.learn-media.cinematic{display:grid;gap:1rem;margin:1rem 0 1.25rem}
.power-panel{position:relative;background:linear-gradient(165deg,rgba(12,28,48,.92),rgba(8,40,36,.88));border:2px solid #4AEDD9;border-radius:18px;padding:1rem 1.1rem 1.15rem;box-shadow:0 12px 36px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08);overflow:hidden}
.power-panel::before{content:"";position:absolute;inset:-40% -20% auto auto;width:180px;height:180px;background:radial-gradient(circle,rgba(74,237,217,.22),transparent 70%);pointer-events:none}
.power-badge{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-pixel,"Press Start 2P",monospace);font-size:.58rem;letter-spacing:.04em;color:#0b1c14;background:linear-gradient(90deg,#FFE566,#4AEDD9);padding:.35rem .65rem;border-radius:999px;margin-bottom:.55rem;box-shadow:0 0 16px rgba(74,237,217,.35)}
.learn-read h4,.learn-video h4,.quest-banner .quest-sub{margin:0 0 .55rem;color:#E8FFF8;font-weight:700}
.learn-read-body{color:#d7efe8;line-height:1.55;font-size:1.02rem}
.vid-chip-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:.35rem 0 .75rem}
.vid-chip{appearance:none;border:2px solid rgba(74,237,217,.35);background:rgba(0,0,0,.35);color:#E8FFF8;border-radius:999px;padding:.45rem .75rem;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;font:inherit}
.vid-chip:hover{transform:translateY(-1px);border-color:#FFE566}
.vid-chip.on{border-color:#FFE566;background:linear-gradient(120deg,rgba(255,229,102,.2),rgba(74,237,217,.18));box-shadow:0 0 18px rgba(255,229,102,.25)}
.vid-chip-n{font-family:var(--font-pixel,"Press Start 2P",monospace);font-size:.55rem;color:#FFE566}
.vid-chip-t{font-size:.92rem}
.vid-stage.swap{animation:vidSwap .35s ease}
@keyframes vidSwap{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.power-frame{position:relative;border-radius:14px;overflow:hidden}
.power-frame-glow{position:absolute;inset:-2px;border-radius:16px;background:linear-gradient(120deg,#4AEDD9,#FFE566,#5D9C3F,#4AEDD9);background-size:300% 300%;animation:glowShift 6s linear infinite;opacity:.85;z-index:0}
@keyframes glowShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.learn-video-wrap.power-frame{padding-top:56.25%;background:#000;border:2px solid rgba(0,0,0,.5);z-index:1}
.learn-video-wrap.power-frame iframe{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);border:0;border-radius:12px;z-index:2}
.learn-video-note{margin:.55rem 0 0;color:#9fe9d8;font-size:.92rem}
.quest-pager.cinematic{margin:1rem 0 1.5rem}
.quest-banner{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:.75rem}
.quest-sub{opacity:.85;font-size:.92rem;color:#c9efe4}
.q-progress{display:flex;align-items:center;gap:.65rem;margin-bottom:.7rem;flex-wrap:wrap}
.q-pill{font-family:var(--font-pixel,"Press Start 2P",monospace);font-size:.55rem;color:#0b1c14;background:#FFE566;padding:.35rem .55rem;border-radius:8px}
.q-bar.xp{flex:1;min-width:120px;height:10px;background:rgba(0,0,0,.45);border:1px solid #4AEDD9;border-radius:999px;overflow:hidden}
.q-bar.xp i{display:block;height:100%;background:linear-gradient(90deg,#5D9C3F,#4AEDD9,#FFE566);box-shadow:0 0 12px rgba(74,237,217,.55)}
.q-xp{font-family:var(--font-pixel,"Press Start 2P",monospace);font-size:.5rem;color:#FFE566}
.q-card.power-panel{margin:0}
.q-enun{font-size:1.08rem;line-height:1.5;margin-bottom:.7rem;color:#fff}
.q-nav{display:flex;gap:.65rem;justify-content:space-between;margin-top:.85rem}
.power-btn,.btn.q-next.power-btn{box-shadow:0 0 0 2px rgba(255,229,102,.25),0 8px 22px rgba(93,156,63,.35)}
.power-burst{animation:powerBurst .55s ease}
@keyframes powerBurst{0%{box-shadow:0 0 0 0 rgba(255,229,102,.0)}40%{box-shadow:0 0 0 10px rgba(255,229,102,.28),0 0 30px rgba(74,237,217,.35)}100%{box-shadow:0 12px 36px rgba(0,0,0,.4)}}
.quest-pager.quest-done .quest-banner .power-badge{background:linear-gradient(90deg,#5D9C3F,#FFE566)}
@media (max-width:640px){
  .vid-chip{flex:1 1 calc(50% - .5rem);justify-content:center}
  .power-badge{font-size:.5rem}
}
@media (prefers-reduced-motion:reduce){
  .power-frame-glow,.vid-stage.swap,.power-burst{animation:none}
}

/* aliases so chip/panel class names always resolve */
.vid-chip-row,.vid-chip-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:.35rem 0 .75rem}
.vid-chip{/* inherits .vid-chip if present */}
.power-panel{/* already defined */}
.q-enun{font-size:1.08rem;line-height:1.5;margin-bottom:.7rem;color:#fff}
.q-bar.xp i,.q-bar.xp > i{display:block;height:100%;background:linear-gradient(90deg,#5D9C3F,#4AEDD9,#FFE566)}
.vid-stage.swap{animation:vidSwap .35s ease}
.power-frame-glow{position:absolute;inset:-2px;border-radius:16px;background:linear-gradient(120deg,#4AEDD9,#FFE566,#5D9C3F,#4AEDD9);background-size:300% 300%;animation:glowShift 6s linear infinite;opacity:.85;z-index:0;pointer-events:none}
.learn-video-wrap.power-frame{position:relative}

/* ===== Westia inventory learn+quest (mc12) ===== */
:root{
  --mc-deep:#1a1f14;--mc-panel:#2b341f;--mc-slot:#3d4a2a;
  --mc-emerald:#2ecc71;--mc-gold:#f1c40f;--mc-diamond:#5dade2;--mc-paper:#f4efe2;
}
.learn-zone{display:grid;gap:1rem;margin:1rem 0 1.25rem}
.learn-read{
  background:var(--mc-panel);color:var(--mc-paper);padding:1.25rem 1.4rem;border-radius:4px;
  box-shadow:inset -3px -3px #12160e, inset 3px 3px #4a5a32;
  animation:paperReveal .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes paperReveal{from{clip-path:inset(8% 0 0 0);opacity:.85}to{clip-path:inset(0);opacity:1}}
.learn-read-top{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin-bottom:.55rem}
.learn-read .badge,.quest-banner .badge{
  font:700 .65rem/1 ui-monospace,monospace;letter-spacing:.12em;color:#062;
  background:var(--mc-emerald);padding:.35rem .55rem;border-radius:999px;
}
.learn-kicker,.quest-sub,.learn-chip-meta{font:600 .75rem/1.2 ui-monospace,monospace;color:var(--mc-emerald)}
.learn-read h4{margin:.2rem 0 .45rem;color:var(--mc-gold);border-bottom:2px solid var(--mc-gold);display:inline-block;padding-bottom:.15rem}
.learn-mission{margin:0 0 .75rem;opacity:.9;font-size:.95rem}
.learn-read-body{line-height:1.55;font-size:1.02rem;color:var(--mc-paper)}
.learn-watch{background:var(--mc-deep);padding:1rem;border-radius:4px;box-shadow:inset -2px -2px #0a0d08, inset 2px 2px #3a4530}
.learn-mode{display:flex;align-items:center;gap:.65rem;margin-bottom:.75rem}
.learn-chip{font:700 .7rem/1 ui-monospace,monospace;letter-spacing:.08em;color:var(--mc-emerald);border:2px solid var(--mc-emerald);padding:.35rem .6rem;border-radius:4px}
.learn-chip.is-active{background:var(--mc-gold);color:#1a1f14;border-color:var(--mc-gold)}
.learn-media{display:grid;gap:12px}
@media(min-width:900px){.learn-media{grid-template-columns:1fr 140px;align-items:start}}
.learn-video{position:relative;border-radius:4px;overflow:hidden;background:var(--mc-slot);
  box-shadow:inset -2px -2px #111, inset 2px 2px #6a7a4a}
.learn-video-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.learn-video-frame iframe{display:block;width:100%;height:100%;border:0}
.learn-video-label{display:flex;flex-direction:column;gap:.2rem;padding:.55rem .65rem .35rem;background:var(--mc-panel)}
.learn-video-title{font:700 .95rem/1.2 system-ui,sans-serif;color:var(--mc-gold)}
.learn-video-meta{font:600 .72rem/1.2 ui-monospace,monospace;color:var(--mc-emerald)}
.learn-video.is-active{outline:2px solid var(--mc-gold);box-shadow:0 0 0 1px #000,0 8px 24px rgba(0,0,0,.45)}
.learn-progress{height:4px;background:#111;margin-top:6px}
.learn-progress>i{display:block;height:100%;background:linear-gradient(90deg,var(--mc-emerald),var(--mc-gold));width:0;transition:width .35s ease}
.learn-thumbs{display:flex;flex-direction:row;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
@media(min-width:900px){.learn-thumbs{flex-direction:column;overflow:visible}}
.learn-thumb{appearance:none;border:0;text-align:left;cursor:pointer;padding:.55rem .5rem;min-height:56px;
  background:var(--mc-slot);color:var(--mc-paper);opacity:.72;scroll-snap-align:start;
  box-shadow:inset -2px -2px #111, inset 2px 2px #6a7a4a;transition:transform .15s ease,opacity .15s ease,outline .15s ease}
.learn-thumb:hover{transform:scale(1.03);outline:2px solid var(--mc-gold);opacity:1}
.learn-thumb:focus-visible{outline:2px solid var(--mc-diamond)}
.learn-thumb.is-active{opacity:1;outline:2px solid var(--mc-gold)}
.learn-thumb:active{transform:scale(.97)}
.learn-thumb-n{display:block;font:700 .65rem/1 ui-monospace,monospace;color:var(--mc-gold);margin-bottom:.25rem}
.learn-thumb-t{display:block;font-size:.82rem;line-height:1.25}
.learn-dots{display:flex;gap:6px;justify-content:center;margin-top:8px}
.learn-dots i{width:8px;height:8px;background:#555;display:block}
.learn-dots i.on{background:var(--mc-gold)}

.quest-pager.cinematic{margin:1rem 0 1.5rem}
.quest-banner{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:.75rem}
.q-stage{position:relative;min-height:280px;overflow:hidden}
.q-card{
  min-height:280px;background:var(--mc-panel);color:var(--mc-paper);padding:1.5rem;border-radius:4px;
  box-shadow:inset -3px -3px #12160e, inset 3px 3px #4a5a32;
  transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .28s;
}
.q-card.is-exit-next{transform:translateX(-28px);opacity:0}
.q-card.is-exit-prev{transform:translateX(28px);opacity:0}
.q-card.is-enter{transform:translateX(28px);opacity:0}
.q-card.is-active{transform:none;opacity:1}
.q-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin:.35rem 0 .85rem}
.q-pill{font:700 .65rem/1 ui-monospace,monospace;color:#1a1f14;background:var(--mc-gold);padding:.35rem .55rem}
.q-xp{font:700 .65rem/1 ui-monospace,monospace;color:var(--mc-emerald)}
.q-enun{font-size:1.08rem;line-height:1.5;margin-bottom:.75rem;color:#fff}
.q-answer,.q-card textarea.resposta{
  width:100%;min-height:120px;background:var(--mc-slot);color:var(--mc-paper);border:0;border-radius:4px;
  padding:.75rem;box-shadow:inset -2px -2px #111, inset 2px 2px #6a7a4a;font:inherit
}
.quest-xp{height:10px;background:#0d120a;border:2px solid #000;margin:0 0 12px}
.quest-xp>i{display:block;height:100%;background:linear-gradient(90deg,var(--mc-emerald),var(--mc-gold));transition:width .45s cubic-bezier(.16,1,.3,1)}
.q-nav{display:flex;gap:.65rem;justify-content:space-between;margin-top:.85rem}
.q-nav button{
  min-height:44px;min-width:120px;font-weight:800;background:var(--mc-slot);color:var(--mc-gold);border:0;cursor:pointer;
  box-shadow:inset -2px -2px #0a0, inset 2px 2px #6a7;padding:.55rem 1rem
}
.q-nav button:disabled{opacity:.45;cursor:not-allowed}
.q-nav button.is-ready{animation:q-power .35s ease}
@keyframes q-power{0%{transform:scale(1);filter:brightness(1)}40%{transform:scale(1.06);filter:brightness(1.25)}100%{transform:scale(1)}}
.q-nav button:active{transform:scale(.97)}
.q-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.q-confetti i{position:absolute;top:20%;width:8px;height:8px;animation:q-pop .4s ease forwards}
.q-confetti i.gold{background:var(--mc-gold)}
.q-confetti i.emerald{background:var(--mc-emerald)}
@keyframes q-pop{from{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(-40px) scale(.6);opacity:0}}
@media(prefers-reduced-motion:reduce){
  .learn-read,.q-card,.q-nav button.is-ready,.q-confetti i,.learn-progress>i,.quest-xp>i{animation:none!important;transition:none!important}
}

/* Westia alias: player uses .learn-video */
.learn-player-col .learn-video,.learn-player{position:relative;border-radius:4px;overflow:hidden;background:var(--mc-slot);box-shadow:inset -2px -2px #111,inset 2px 2px #6a7a4a}
.learn-player-col .learn-video.is-active,.learn-video.is-active{outline:2px solid var(--mc-gold);box-shadow:0 0 0 1px #000,0 8px 24px rgba(0,0,0,.45)}
.learn-zone .learn-media{margin-top:.25rem}

/* Xbox Gamerscore mc13 */
#xbox-toast-host{position:fixed;right:16px;bottom:18px;z-index:99999;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.xbox-toast{display:grid;grid-template-columns:6px 48px 1fr auto;align-items:center;gap:10px;min-width:280px;max-width:360px;padding:12px 14px;background:#0e0e0e;color:#fff;border:1px solid #2a2a2a;box-shadow:0 12px 40px rgba(0,0,0,.55);transform:translateX(120%);opacity:0;transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .35s;font-family:Segoe UI,system-ui,sans-serif}
.xbox-toast.in{transform:none;opacity:1}
.xbox-toast.out{transform:translateX(110%);opacity:0}
.xbox-toast-y{align-self:stretch;background:linear-gradient(#107c10,#0f7a0f);width:6px;border-radius:2px}
.xbox-toast-icon{font-size:1.6rem;text-align:center}
.xbox-toast-label{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:#107c10;font-weight:700}
.xbox-toast-name{font-weight:800;font-size:1rem;line-height:1.2;margin:.1rem 0}
.xbox-toast-desc{font-size:.78rem;opacity:.75;line-height:1.3}
.xbox-toast-g{font-weight:900;color:#9bf00b;font-size:1.05rem;white-space:nowrap}
.xbox-g-badge{display:inline-flex;align-items:center;gap:.45rem;background:#111;color:#9bf00b;border:2px solid #107c10;padding:.35rem .7rem;border-radius:4px;font-weight:800}
.xbox-g-logo{display:inline-grid;place-items:center;width:1.25rem;height:1.25rem;border-radius:2px;background:#107c10;color:#fff;font:800 .75rem/1 Segoe UI,sans-serif}
.xbox-g-score{font-variant-numeric:tabular-nums}
.xbox-g-count{color:#aaa;font-size:.75rem;font-weight:600}
.xbox-ach-panel{margin-top:1rem;background:#121212;border:2px solid #107c10;border-radius:6px;overflow:hidden}
.xbox-ach-panel>header{display:flex;align-items:center;gap:.5rem;padding:.65rem .85rem;background:#0a0a0a;color:#9bf00b;font-weight:800}
.xbox-ach-list{list-style:none;margin:0;padding:0;max-height:280px;overflow:auto}
.xbox-ach{display:grid;grid-template-columns:36px 1fr auto;gap:.55rem;align-items:center;padding:.55rem .75rem;border-top:1px solid #222;opacity:.42;filter:grayscale(.8)}
.xbox-ach.on{opacity:1;filter:none;background:linear-gradient(90deg,rgba(16,124,16,.12),transparent)}
.xbox-ach-icon{font-size:1.25rem;text-align:center}
.xbox-ach-text{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.xbox-ach-text b{color:#fff;font-size:.9rem}
.xbox-ach-text i{font-style:normal;color:#9a9a9a;font-size:.75rem}
.xbox-ach-g{color:#9bf00b;font-weight:800;font-size:.8rem;white-space:nowrap}

/* ===== Wow FX: game cursors + parallax + intro (mc15) ===== */
body.wow-on, body.wow-on *{ cursor: var(--wow-cursor) !important; }
body.wow-on a, body.wow-on button, body.wow-on .pill, body.wow-on .btn,
body.wow-on summary, body.wow-on .vid-chip, body.wow-on .learn-thumb,
body.wow-on input, body.wow-on textarea, body.wow-on label, body.wow-on .xbox-ach{
  cursor: var(--wow-pointer) !important;
}
#wow-trail{
  position:fixed; left:0; top:0; width:28px; height:28px; border-radius:50%;
  pointer-events:none; z-index:99990; mix-blend-mode:screen;
  background:radial-gradient(circle, var(--wow-accent, #2ecc71), transparent 70%);
  opacity:.55; transition:opacity .2s;
}
.mc-sky{ transform: translate3d(calc(var(--parx,0) * -12px), calc(var(--pary,0) * -8px), 0); will-change:transform; }
.mc-sun{ transform: translate3d(calc(var(--parx,0) * 18px), calc(var(--pary,0) * 10px), 0); }
.mc-clouds{ transform: translate3d(calc(var(--parx,0) * -22px), calc(var(--pary,0) * -6px), 0); }
.mc-grass{ transform: translate3d(calc(var(--parx,0) * 8px), calc(var(--pary,0) * 4px), 0); }
.dia-head, .panell, .bloc, .quest-pager, .learn-zone{
  transform: translate3d(calc(var(--parx,0) * 6px), calc(var(--pary,0) * 4px), 0);
  transition: transform .05s linear;
}
.wow-intro{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;opacity:0;transition:opacity .35s}
.wow-intro.on{opacity:1}
.wow-intro.out{opacity:0;transform:scale(1.03);transition:opacity .45s,transform .45s}
.wow-intro-bg{position:absolute;inset:0;background:
  radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--wow-accent,#2ecc71) 35%, transparent), transparent 50%),
  radial-gradient(circle at 70% 80%, color-mix(in srgb, var(--wow-glow,#27ae60) 30%, transparent), transparent 45%),
  rgba(5,10,8,.92)}
.wow-intro-scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,255,120,.04) 4px);pointer-events:none;animation:wowScan 1.2s linear infinite}
@keyframes wowScan{to{transform:translateY(8px)}}
.wow-intro-card{position:relative;z-index:2;text-align:center;padding:1.6rem 1.8rem;min-width:min(92vw,420px);
  background:rgba(12,18,14,.88);border:2px solid var(--wow-accent,#2ecc71);border-radius:8px;
  box-shadow:0 0 0 1px #000,0 20px 60px rgba(0,0,0,.55),0 0 40px color-mix(in srgb, var(--wow-accent,#2ecc71) 35%, transparent);
  animation:wowCardIn .55s cubic-bezier(.16,1,.3,1) both}
@keyframes wowCardIn{from{transform:translateY(24px) scale(.94);opacity:0}to{transform:none;opacity:1}}
.wow-intro-tag{display:inline-block;font:800 .7rem/1 ui-monospace,monospace;letter-spacing:.14em;color:#041;background:var(--wow-accent,#2ecc71);padding:.4rem .7rem;border-radius:999px;margin-bottom:.8rem}
.wow-intro-kicker{font:800 .75rem/1 ui-monospace,monospace;letter-spacing:.2em;color:var(--wow-accent,#2ecc71);margin:.2rem 0}
.wow-intro-title{margin:.35rem 0 .4rem;font-size:clamp(1.4rem,4vw,2rem);color:#fff;text-shadow:0 0 18px color-mix(in srgb, var(--wow-accent,#2ecc71) 50%, transparent)}
.wow-intro-sub{color:#c8e6d0;font-size:.95rem;margin:0 0 .9rem}
.wow-intro-sub b{color:var(--wow-accent,#2ecc71)}
.wow-intro-bar{height:8px;background:#111;border:2px solid #000;border-radius:99px;overflow:hidden;margin:0 auto 800ms;max-width:260px}
.wow-intro-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--wow-glow,#27ae60),var(--wow-accent,#2ecc71),#f1c40f);animation:wowLoad 2s cubic-bezier(.16,1,.3,1) forwards}
@keyframes wowLoad{to{width:100%}}
.wow-intro-press{font:700 .72rem/1.3 ui-monospace,monospace;letter-spacing:.08em;color:#9fe6b4;opacity:.85;margin:.8rem 0 0}
.wow-spark{position:absolute;width:8px;height:8px;border-radius:1px;pointer-events:none;animation:wowSpark 1.6s ease-out forwards;opacity:0}
@keyframes wowSpark{0%{transform:translateY(40vh) scale(.4);opacity:0}20%{opacity:1}100%{transform:translateY(-20vh) scale(1);opacity:0}}
.wow-intro-cursor-preview{width:48px;height:48px;margin:0 auto .6rem;border-radius:50%;border:2px solid var(--c,#2ecc71);
  box-shadow:0 0 20px color-mix(in srgb, var(--c,#2ecc71) 55%, transparent);animation:wowPulse 1s ease-in-out infinite}
@keyframes wowPulse{50%{transform:scale(1.08);filter:brightness(1.25)}}
body.vista-dia .dia-head{border-left:4px solid var(--wow-accent,#2ecc71);padding-left:.75rem;
  box-shadow: -8px 0 24px color-mix(in srgb, var(--wow-accent,#2ecc71) 25%, transparent)}
@media (prefers-reduced-motion:reduce){
  .mc-sky,.mc-sun,.mc-clouds,.mc-grass,.dia-head,.panell,.bloc,.quest-pager,.learn-zone{transform:none!important}
  .wow-intro,.wow-intro-bar i,.wow-spark,#wow-trail{animation:none!important}
  #wow-trail{display:none}
}


/* ===== Mission Quest full-page (mc17) ===== */
body.mq-focus .heroi-lab,
body.mq-focus .lab-notes,
body.mq-focus .lab-calc,
body.mq-focus .lab-dock,
body.mq-focus .lab-fab,
.heroi-lab,.lab-notes,.lab-calc,.lab-dock,.lab-fab{display:none!important}

.mission-quest{margin:0 auto;max-width:920px}
.mq-stage{min-height:70vh;display:flex;flex-direction:column;gap:1rem;padding:.5rem 0 2rem}
.mq-hero{text-align:center;padding:1rem 1rem .5rem}
.mq-hero h2{margin:.35rem 0;font-size:clamp(1.4rem,3.5vw,2rem);color:var(--wow-accent,#f1c40f)}
.mq-hero-slim{padding:.4rem}
.mq-sub{opacity:.85;margin:0}
.mq-badge{display:inline-block;font:800 .72rem/1 ui-monospace,monospace;letter-spacing:.08em;
  background:linear-gradient(90deg,#2ecc71,#f1c40f);color:#111;padding:.4rem .7rem;border-radius:999px}
.mq-btn{appearance:none;border:0;cursor:pointer;font-weight:800;font-size:1.05rem;
  padding:.85rem 1.4rem;border-radius:12px;background:linear-gradient(180deg,#2ecc71,#1e8449);
  color:#fff;box-shadow:0 6px 0 #145a32,0 12px 24px rgba(0,0,0,.35);margin:1rem auto 0;display:inline-block}
.mq-btn:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.4)}
.mq-btn.ready{animation:mqPulse .8s ease infinite alternate}
.mq-btn.ghost{background:#2c3e50;box-shadow:0 6px 0 #1a252f}
.mq-btn.done{background:linear-gradient(180deg,#f1c40f,#d68910);color:#111}
@keyframes mqPulse{to{transform:scale(1.04);filter:brightness(1.15)}}

.mq-read-body{background:rgba(15,30,20,.9);border:2px solid #2ecc71;border-radius:16px;padding:1.2rem 1.4rem;
  font-size:1.08rem;line-height:1.55;color:#e8fff0;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.mq-vid-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;
  border:3px solid #f1c40f;box-shadow:0 0 0 2px #000,0 20px 50px rgba(0,0,0,.5)}
.mq-vid-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mq-vid-top{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:.6rem}
.mq-vid-title{font-weight:800;font-size:1.15rem;color:#ffe566}
.mq-vid-nota{opacity:.85}
.mq-gate{margin-top:1rem;text-align:center}
.mq-gate-bar{height:10px;background:#111;border:2px solid #2ecc71;border-radius:99px;overflow:hidden;max-width:320px;margin:0 auto .5rem}
.mq-gate-bar>i{display:block;height:100%;background:linear-gradient(90deg,#2ecc71,#f1c40f);width:0;transition:width .2s}
.mq-gate-txt{font:700 .9rem/1.3 ui-monospace,monospace;color:#9fe6b4}

.mq-q-card{background:rgba(12,22,18,.94);border:3px solid #f1c40f;border-radius:18px;padding:1.4rem 1.5rem;
  min-height:55vh;display:flex;flex-direction:column;gap:.9rem;
  box-shadow:0 0 0 2px #000,0 24px 60px rgba(0,0,0,.45)}
.mq-enun{font-size:clamp(1.15rem,2.6vw,1.45rem);line-height:1.45;color:#fff;font-weight:700}
.mq-answer{width:100%;flex:1;min-height:180px;font-size:1.1rem;padding:1rem;border-radius:12px;
  background:#0a120e;color:#e8fff0;border:2px solid #2ecc71;resize:vertical}
.mq-q-progress{display:flex;align-items:center;gap:.75rem}
.mq-pill{font:800 .7rem/1 ui-monospace,monospace;background:#f1c40f;color:#111;padding:.4rem .65rem;border-radius:8px}
.mq-bar{flex:1;height:10px;background:#111;border:1px solid #2ecc71;border-radius:99px;overflow:hidden}
.mq-bar>i{display:block;height:100%;background:linear-gradient(90deg,#2ecc71,#f1c40f)}
.mq-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:.5rem;position:sticky;bottom:12px}
.mq-help{background:rgba(255,255,255,.04);border-radius:10px;padding:.35rem .6rem}
.mq-wincalc{background:rgba(52,152,219,.15);border:2px dashed #3498db;border-radius:12px;padding:.75rem 1rem}
.mq-wincalc kbd,.mq-wincalc code{background:#111;padding:.15rem .4rem;border-radius:4px;border:1px solid #3498db}
.mq-wincalc.flash{animation:mqPulse .4s ease 3}

/* Hide clutter while mission focus: other blocs below still exist but English fills vision */
body.mq-focus .mission-quest .mq-stage.on{animation:mqIn .35s ease}
@keyframes mqIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(max-width:700px){
  .mq-q-card{min-height:60vh;padding:1rem}
  .mq-nav .mq-btn{flex:1;text-align:center}
}


/* —— MC18 HD option cards (cinematic glass, not 8-bit) —— */
.mq-opts{ display:flex; flex-direction:column; gap:14px; margin-top:12px; }
.mq-opt{
  display:flex; align-items:flex-start; gap:14px; width:100%;
  text-align:left; cursor:pointer; appearance:none; border:1px solid rgba(255,255,255,.14);
  border-radius:18px; padding:16px 18px; min-height:64px;
  background: linear-gradient(180deg, rgba(20,36,32,.78), rgba(10,18,16,.88));
  color:#e8fff4; font-size:1.05rem; line-height:1.35;
  box-shadow: 0 10px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.mq-opt:hover{ transform: translateY(-1px); border-color: rgba(120,220,180,.45); box-shadow: 0 14px 34px rgba(0,0,0,.34); }
.mq-opt.is-selected{
  border-color: rgba(80,220,160,.7);
  background: linear-gradient(180deg, rgba(28,70,55,.85), rgba(12,28,22,.92));
  box-shadow: 0 0 0 1px rgba(80,220,160,.25), 0 14px 36px rgba(0,0,0,.35);
}
.mq-radio, .mq-box{
  flex:0 0 auto; width:22px; height:22px; margin-top:2px; border-radius:50%;
  border:2px solid rgba(180,255,220,.45); background: rgba(0,0,0,.25);
}
.mq-box{ border-radius:6px; }
.mq-opt.is-selected .mq-radio,
.mq-opt.is-selected .mq-box{
  background: radial-gradient(circle at 40% 35%, #7dffb5, #1faa6a 70%);
  border-color:#9dffc9; box-shadow:0 0 12px rgba(80,255,160,.45);
}
.mq-opt-txt{ flex:1; }
.mq-feedback{ margin-top:12px; font-weight:600; font-size:1rem; }
.mq-feedback.is-ok{ color:#5dff9a; }
.mq-feedback.is-bad{ color:#ff8f7a; }
.mq-q.is-correct .mq-opt.is-selected{ border-color:#2ecc71; }
.mq-q.is-wrong .mq-opt.is-selected{ border-color:#e74c3c; }
.mq-check-input{ position:absolute; opacity:0; pointer-events:none; }
.mission-quest .mq-opt{ font-size:1.12rem; padding:18px 20px; min-height:72px; }
.mq-focus .mq-opts, .mq-focus.mq-opts{ max-width:920px; margin-left:auto; margin-right:auto; }
.quest-calc-tip{
  display:inline-flex; align-items:center; gap:8px; margin-top:8px;
  padding:8px 12px; border-radius:999px; font-size:.92rem;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#d7ffe9;
}
/* Soften Press Start dominance if present */
:root{ --mc-pixel-opacity:.35; }
body.tema-minecraft .press-start, .pixel-brand{ letter-spacing:.02em; opacity:.85; }

/* ===== MC20 Card Deck + Progress Rail + Emotion Parallax ===== */
body.mq-focus .bloc > h3,
body.mq-focus .bloc > .expl,
body.mq-focus .bloc > .visual-bloc,
body.mq-focus .passos-panel,
body.mq-focus .recursos,
body.mq-focus .meme-slot{ opacity:.55; }
body.mq-focus .mission-quest{ opacity:1; }

.dia-mission{
  position:relative;
  isolation:isolate;
  padding-bottom:2rem;
}
.dia-px{
  pointer-events:none; position:absolute; inset:-40px -10% auto -10%;
  height:280px; z-index:0; overflow:hidden; opacity:.85;
}
.dia-px i{
  position:absolute; border-radius:50%; filter:blur(40px); opacity:.55;
  will-change:transform;
}
.dia-px-a{ width:280px; height:280px; left:8%; top:10%;
  background:radial-gradient(circle, color-mix(in srgb, var(--wow-accent,#2ecc71) 55%, transparent), transparent 70%); }
.dia-px-b{ width:220px; height:220px; right:12%; top:0;
  background:radial-gradient(circle, color-mix(in srgb, var(--wow-glow,#27ae60) 45%, transparent), transparent 70%); }
.dia-px-c{ width:180px; height:180px; left:42%; top:40%;
  background:radial-gradient(circle, rgba(241,196,15,.35), transparent 70%); }

.dia-blocs{ position:relative; z-index:1; display:flex; flex-direction:column; gap:1.25rem; }

.mission-quest.mq-shell{
  position:relative;
  display:grid;
  grid-template-columns: minmax(148px, 200px) minmax(0, 1fr);
  gap:1rem 1.25rem;
  max-width:1100px;
  margin:0 auto;
  min-height:72vh;
  align-items:stretch;
}
.mq-parallax-layers{
  pointer-events:none; position:absolute; inset:-20px; z-index:0; overflow:hidden;
}
.mq-px{
  position:absolute; border-radius:40% 60% 55% 45%; filter:blur(28px); opacity:.4; will-change:transform;
}
.mq-px-a{ width:240px; height:240px; left:5%; top:8%;
  background:radial-gradient(circle, rgba(46,204,113,.5), transparent 70%); }
.mq-px-b{ width:200px; height:200px; right:8%; bottom:12%;
  background:radial-gradient(circle, rgba(52,152,219,.4), transparent 70%); }
.mq-px-c{ width:160px; height:160px; left:45%; top:55%;
  background:radial-gradient(circle, rgba(241,196,15,.35), transparent 70%); }

.mq-rail{
  position:sticky; top:72px; align-self:start;
  z-index:2;
  display:flex; flex-direction:column; gap:.75rem;
  padding:.85rem .7rem;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(14,22,28,.92), rgba(8,12,16,.94));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  max-height:calc(100vh - 96px); overflow:auto;
}
.mq-rail-head{ display:flex; flex-direction:column; gap:.2rem; padding:0 .2rem .35rem; }
.mq-rail-kicker{ font:800 .65rem/1 ui-sans-serif,system-ui,sans-serif; letter-spacing:.14em; color:var(--wow-accent,#2ecc71); }
.mq-rail-title{ font-size:.92rem; color:#f4fff8; line-height:1.25; }
.mq-rail-count{ font:700 .8rem/1.2 ui-monospace,monospace; color:#9fe6b4; }
.mq-rail-track{ display:flex; flex-direction:column; gap:.35rem; position:relative; }
.mq-rail-track::before{
  content:""; position:absolute; left:17px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(180deg, rgba(46,204,113,.55), rgba(241,196,15,.25), rgba(255,255,255,.08));
}
.mq-rail-item{
  appearance:none; border:0; background:transparent; color:#cde9d8; cursor:pointer;
  display:grid; grid-template-columns:22px 1fr auto; gap:.45rem; align-items:center;
  text-align:left; padding:.45rem .35rem; border-radius:12px; position:relative; z-index:1;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.mq-rail-item:hover{ background:rgba(255,255,255,.05); }
.mq-rail-item.is-current{
  background:linear-gradient(90deg, rgba(46,204,113,.18), rgba(255,255,255,.03));
  color:#fff; box-shadow:inset 0 0 0 1px rgba(80,220,160,.28);
}
.mq-rail-item.is-done{ color:#8fdbb0; }
.mq-rail-item.is-done .mq-rail-dot{
  background:#2ecc71; box-shadow:0 0 0 3px rgba(46,204,113,.25);
}
.mq-rail-item.is-current .mq-rail-dot{
  background:linear-gradient(180deg,#f1c40f,#2ecc71);
  box-shadow:0 0 0 4px rgba(241,196,15,.22), 0 0 16px rgba(46,204,113,.45);
  transform:scale(1.15);
}
.mq-rail-dot{
  width:12px; height:12px; margin-left:5px; border-radius:50%;
  background:rgba(255,255,255,.22); border:2px solid rgba(255,255,255,.25);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.mq-rail-label{ font-weight:700; font-size:.82rem; }
.mq-rail-meta{ font:600 .68rem/1 ui-monospace,monospace; opacity:.65; }
.mq-rail-foot{
  display:flex; justify-content:space-between; gap:.5rem; padding-top:.35rem;
  border-top:1px solid rgba(255,255,255,.08); font-size:.75rem; color:#9fb8aa;
}
.mq-rail-subject{ text-transform:uppercase; letter-spacing:.06em; font-weight:800; color:var(--wow-accent,#2ecc71); }

.mq-main{ position:relative; z-index:2; display:flex; flex-direction:column; gap:.85rem; min-width:0; }
.mq-deck{
  position:relative;
  min-height:min(70vh, 760px);
  perspective:1200px;
}
.mq-card{
  position:relative;
  display:none;
  min-height:min(68vh, 720px);
  border-radius:22px;
  padding:0;
  transform-style:preserve-3d;
  transform: perspective(1200px) rotateX(var(--card-tilt-x, 0deg)) rotateY(var(--card-tilt-y, 0deg));
  transition: transform .12s linear, opacity .28s ease, box-shadow .2s ease;
  background:
    linear-gradient(160deg, rgba(22,34,40,.92), rgba(10,16,20,.96) 55%, rgba(8,14,12,.98)),
    radial-gradient(circle at 20% 0%, rgba(46,204,113,.18), transparent 45%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 28px 60px rgba(0,0,0,.45),
    0 0 0 1px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 40px color-mix(in srgb, var(--wow-accent,#2ecc71) 18%, transparent);
  overflow:hidden;
}
.mq-card.is-active{ display:flex; flex-direction:column; animation:mqCardIn .42s cubic-bezier(.16,1,.3,1) both; }
.mq-card.is-enter[data-enter-dir="next"]{ animation-name:mqCardInNext; }
.mq-card.is-enter[data-enter-dir="prev"]{ animation-name:mqCardInPrev; }
@keyframes mqCardIn{
  from{ opacity:0; transform:perspective(1200px) translateY(22px) scale(.965) rotateX(var(--card-tilt-x,0deg)) rotateY(var(--card-tilt-y,0deg)); }
  to{ opacity:1; transform:perspective(1200px) rotateX(var(--card-tilt-x,0deg)) rotateY(var(--card-tilt-y,0deg)); }
}
@keyframes mqCardInNext{
  from{ opacity:0; transform:perspective(1200px) translateX(36px) scale(.97); }
  to{ opacity:1; transform:perspective(1200px) rotateX(var(--card-tilt-x,0deg)) rotateY(var(--card-tilt-y,0deg)); }
}
@keyframes mqCardInPrev{
  from{ opacity:0; transform:perspective(1200px) translateX(-36px) scale(.97); }
  to{ opacity:1; transform:perspective(1200px) rotateX(var(--card-tilt-x,0deg)) rotateY(var(--card-tilt-y,0deg)); }
}
.mq-card-glow{
  pointer-events:none; position:absolute; inset:-20% -10% auto -10%; height:55%;
  background:radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--wow-accent,#2ecc71) 35%, transparent), transparent 60%);
  opacity:.85;
}
.mq-card-inner{
  position:relative; z-index:1; display:flex; flex-direction:column; gap:.9rem;
  padding:1.25rem 1.35rem 1.4rem; flex:1; min-height:0;
}
.mq-card-top{ display:flex; flex-wrap:wrap; gap:.55rem; align-items:center; justify-content:space-between; }
.mq-card-title{ margin:0; font-size:clamp(1.25rem, 2.8vw, 1.7rem); color:#fff; }
.mq-badge{
  display:inline-block; font:800 .72rem/1 system-ui,sans-serif; letter-spacing:.08em;
  background:linear-gradient(90deg,#2ecc71,#f1c40f); color:#111; padding:.45rem .75rem; border-radius:999px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.mq-nav{
  display:flex; justify-content:space-between; gap:1rem; position:sticky; bottom:10px; z-index:3;
}
.mq-nav .mq-prev, .mq-nav .mq-next, .mq-nav .q-prev, .mq-nav .q-next{
  appearance:none; border:0; cursor:pointer; font-weight:800; font-size:1.05rem;
  padding:.95rem 1.45rem; border-radius:14px; min-width:140px;
  color:#fff; background:linear-gradient(180deg,#2ecc71,#1e8449);
  box-shadow:0 8px 0 #145a32, 0 14px 28px rgba(0,0,0,.35);
  transition: transform .12s ease, filter .12s ease;
}
.mq-nav .mq-prev, .mq-nav .q-prev{
  background:linear-gradient(180deg,#3d566e,#2c3e50); box-shadow:0 8px 0 #1a252f, 0 14px 28px rgba(0,0,0,.3);
}
.mq-nav button:disabled{ opacity:.4; cursor:not-allowed; filter:grayscale(.35); transform:none; }
.mq-nav button:not(:disabled):hover{ transform:translateY(-1px); filter:brightness(1.06); }

/* Hide legacy multi-stage / stacked exercise chrome inside mission */
.mission-quest .mq-stage{ display:none !important; }
.mission-quest .q-stage > .q-card:not(.mq-card){ display:none; }
.mission-quest .learn-thumbs{ display:none !important; }

/* Soften leftover 8-bit primary chrome on day */
body.vista-dia, body.vista-dia .bloc, body.vista-dia .panell, body.vista-dia .dia-head{
  font-family: Inter, "Segoe UI", system-ui, sans-serif !important;
  image-rendering: auto !important;
}
body.vista-dia .badge-arc, body.vista-dia .mq-badge, body.vista-dia .q-pill{
  font-family: Inter, "Segoe UI", system-ui, sans-serif !important;
  letter-spacing:.06em;
}

@media (max-width:900px){
  .mission-quest.mq-shell{ grid-template-columns:1fr; }
  .mq-rail{
    position:relative; top:auto; max-height:none;
    flex-direction:row; flex-wrap:wrap; align-items:center;
  }
  .mq-rail-head{ flex:1 1 140px; }
  .mq-rail-track{
    flex:1 1 100%; flex-direction:row; overflow-x:auto; gap:.25rem; padding-bottom:.2rem;
  }
  .mq-rail-track::before{ display:none; }
  .mq-rail-item{ grid-template-columns:14px auto; min-width:max-content; }
  .mq-rail-meta{ display:none; }
  .mq-card{ min-height:62vh; }
}
@media (prefers-reduced-motion:reduce){
  .mq-card, .mq-px, .dia-px i{ transform:none !important; transition:none !important; animation:none !important; }
}

/* ===== Random GAME WORLDS bg (Tetris / Minecraft / Pac / Platformer / Neon) ===== */
.gw-stage{
  pointer-events:none;
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:#04060a;
}
body.gw-on .dia-mission,
body.gw-on #dia{ position:relative; z-index:1; }
body.gw-on .dia-mission > *:not(.gw-stage):not(.gs-screens),
body.gw-on #dia > *:not(.gw-stage):not(.gs-screens){ position:relative; z-index:2; }

.gw-world{
  position:absolute; inset:0;
  opacity:0; transform:scale(1.04);
  transition: opacity .7s ease, transform .7s ease;
  filter:saturate(1.15) contrast(1.05);
}
.gw-world.is-in{ opacity:.72; transform:scale(1); }
.gw-vignette{
  position:absolute; inset:0; z-index:3;
  background:
    radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.82) 100%),
    linear-gradient(180deg, rgba(0,0,0,.2), transparent 30%, rgba(0,0,0,.45));
}
.gw-label{
  position:absolute; right:18px; bottom:16px; z-index:4;
  font:800 .72rem/1 ui-monospace, Consolas, monospace;
  letter-spacing:.18em; color:rgba(255,255,255,.55);
  padding:6px 10px; border-radius:999px;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px);
}
.gw-label.pop{ animation: gwPop .45s ease; }
@keyframes gwPop{ from{ transform:scale(.8); opacity:0 } to{ transform:scale(1); opacity:1 } }

/* TETRIS */
.gw-tetris-well{ position:absolute; inset:0; overflow:hidden;
  background:linear-gradient(180deg,#0a1020 0%, #070b14 100%); }
.gw-tetromino{ position:absolute; top:-12%; animation: gwFall linear infinite; opacity:.9; }
.gw-tet-row{ display:flex; }
.gw-tet-row i{
  width:18px; height:18px; margin:1px; border-radius:3px;
  background:linear-gradient(145deg, color-mix(in srgb, var(--c) 90%, #fff), var(--c));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 0 10px color-mix(in srgb, var(--c) 50%, transparent);
}
.gw-tet-row i.x{ visibility:hidden; }
@keyframes gwFall{ to{ transform:translateY(120vh) rotate(180deg); } }

/* MINECRAFT */
.gw-mc-sky{ position:absolute; inset:0;
  background:linear-gradient(180deg, #6ec7ff 0%, #b8e4ff 40%, #87c5ff 70%, #5aa0d8 100%); }
.gw-mc-sun{ position:absolute; right:14%; top:12%; width:64px; height:64px; border-radius:8px;
  background:#ffe566; box-shadow:0 0 40px rgba(255,220,80,.7); animation: gwPulse 3s ease-in-out infinite; }
.gw-mc-terrain{ position:absolute; left:0; right:0; bottom:0; height:42%; display:flex; align-items:flex-end; }
.gw-mc-terrain i{
  flex:1; height:var(--h,30%);
  background:linear-gradient(180deg, hsl(var(--g,130),45%,42%) 0 18%, #6b4423 18% 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}
.gw-mc-voxels b{
  position:absolute; width:var(--s,28px); height:var(--s,28px);
  background:var(--tone,#5d9c41);
  box-shadow: inset -4px -4px 0 rgba(0,0,0,.25), inset 3px 3px 0 rgba(255,255,255,.2);
  animation: gwBob var(--spin,12s) ease-in-out infinite;
  border-radius:2px;
}
@keyframes gwBob{ 0%,100%{ transform:translateY(0) rotateX(8deg) } 50%{ transform:translateY(-14px) rotateX(0) } }
@keyframes gwPulse{ 0%,100%{ filter:brightness(1)} 50%{ filter:brightness(1.25)} }

/* PAC-MAZE */
.gw-pac-maze{
  position:absolute; inset:8% 10%;
  display:grid; grid-template-columns:repeat(16,1fr); grid-template-rows:repeat(10,1fr); gap:3px;
  background:#000814; border:4px solid #1a3cff; border-radius:12px;
  box-shadow:0 0 30px rgba(40,80,255,.35), inset 0 0 40px rgba(0,40,120,.35);
}
.gw-pac-maze i.w{ background:#1b3cff; border-radius:3px; box-shadow:inset 0 0 0 1px #6ea0ff; }
.gw-pac-maze i.d{
  background:transparent; position:relative;
}
.gw-pac-maze i.d::after{
  content:""; position:absolute; left:50%; top:50%; width:5px; height:5px; margin:-2.5px;
  border-radius:50%; background:#ffd7a0; box-shadow:0 0 6px #ffb347;
}
.gw-pac-actor{
  position:absolute; width:22px; height:22px; border-radius:50%;
  background:#ffe14a; box-shadow:0 0 12px #ffd000;
  clip-path: polygon(0 0, 100% 50%, 0 100%, 0 75%, 55% 50%, 0 25%);
  animation: gwPacRun 7s linear infinite;
}
.gw-pac-ghost{
  position:absolute; width:18px; height:20px; border-radius:9px 9px 3px 3px;
  animation: gwGhost 5.5s ease-in-out infinite;
}
.gw-pac-ghost.g1{ background:#ff4d6d; top:28%; animation-duration:6.2s; }
.gw-pac-ghost.g2{ background:#4de1ff; top:48%; animation-duration:4.8s; animation-direction:reverse; }
@keyframes gwPacRun{
  0%{ left:12%; top:22%; }
  25%{ left:78%; top:22%; }
  50%{ left:78%; top:68%; }
  75%{ left:12%; top:68%; }
  100%{ left:12%; top:22%; }
}
@keyframes gwGhost{
  0%{ left:20%; } 50%{ left:70%; } 100%{ left:20%; }
}

/* PLATFORMER (Mario-like vibe, original shapes) */
.gw-pf-sky{ position:absolute; inset:0; background:linear-gradient(180deg,#5ec8ff,#9ad9ff 55%, #7ec56a 55% 58%, #5a9e45 58%); }
.gw-pf-clouds i{
  position:absolute; width:70px; height:28px; border-radius:20px; background:#fff;
  transform:scale(var(--s,1)); opacity:.9;
  animation: gwCloud linear infinite;
  box-shadow:22px 6px 0 #fff, -18px 8px 0 #fff;
}
@keyframes gwCloud{ from{ transform:translateX(-30vw) scale(var(--s,1)); } to{ transform:translateX(110vw) scale(var(--s,1)); } }
.gw-pf-pipes i{
  position:absolute; bottom:16%; width:44px; height:var(--h,22%);
  background:linear-gradient(90deg,#1f8f2e 0 18%, #3dcf4f 18% 78%, #176b22 78%);
  border-radius:6px 6px 0 0;
  box-shadow: inset 0 10px 0 #2db33f;
}
.gw-pf-pipes i::before{
  content:""; position:absolute; left:-6px; top:-10px; right:-6px; height:16px;
  background:linear-gradient(90deg,#1f8f2e,#4be05d 50%,#176b22); border-radius:6px;
}
.gw-pf-blocks b{
  position:absolute; width:28px; height:28px;
  background:linear-gradient(180deg,#f0c93c,#c88712);
  color:#6a3c00; font:900 1rem/28px ui-sans-serif,system-ui; text-align:center;
  border:2px solid #8a5a00; border-radius:4px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
  animation: gwBounce 1.2s ease-in-out infinite;
}
@keyframes gwBounce{ 0%,100%{ transform:translateY(0)} 50%{ transform:translateY(-8px)} }
.gw-pf-ground{
  position:absolute; left:0; right:0; bottom:0; height:16%;
  background:
    repeating-linear-gradient(90deg, #c47a3a 0 28px, #b56b2e 28px 56px),
    #8d4f1f;
  box-shadow: inset 0 8px 0 #5d9c41;
}
.gw-pf-runner{
  position:absolute; bottom:18%; width:22px; height:28px; left:8%;
  background:#e74c3c; border-radius:4px 4px 0 0;
  box-shadow:0 -8px 0 #f1c40f;
  animation: gwRun 4.5s linear infinite;
}
@keyframes gwRun{ from{ left:6%; } to{ left:88%; } }

/* NEON RAID */
.gw-neon-grid{ position:absolute; inset:0;
  background:
    linear-gradient(180deg, #050815, #12082a 50%, #2a0840),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(0,255,200,.08) 38px 39px),
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(255,0,180,.07) 38px 39px);
  background-blend-mode:normal, overlay, overlay;
  animation: gwGridDrift 8s linear infinite;
}
@keyframes gwGridDrift{ to{ background-position:0 0, 39px 0, 0 39px; } }
.gw-neon-ships i{
  position:absolute; width:16px; height:12px;
  background:#39ffb6; clip-path:polygon(50% 0, 100% 100%, 0 100%);
  filter:drop-shadow(0 0 6px #39ffb6);
  animation: gwHover ease-in-out infinite;
}
@keyframes gwHover{ 0%,100%{ transform:translateY(0)} 50%{ transform:translateY(10px)} }
.gw-neon-shots b{
  position:absolute; bottom:-5%; width:3px; height:18px; border-radius:2px;
  background:#ff4fd8; box-shadow:0 0 8px #ff4fd8;
  animation: gwShot linear infinite;
}
@keyframes gwShot{ from{ transform:translateY(0); opacity:1 } to{ transform:translateY(-110vh); opacity:.2 } }

@media (prefers-reduced-motion: reduce){
  .gw-stage{ display:none !important; }
}

/* Keep mission UI readable */
body.gw-on .mq-shell,
body.gw-on .mq-card,
body.gw-on .mq-rail,
body.gw-on .dia-head{
  backdrop-filter: blur(10px);
}

/* ===== GW GENERIC WORLDS (40+ themes) ===== */
.gw-gen-bg{ position:absolute; inset:0; }
.gw-gen-fx{ position:absolute; inset:0; overflow:hidden; }
.gw-snake-bit{ position:absolute; width:14px; height:14px; border-radius:3px; background:var(--gw-a,#6cff6c); box-shadow:0 0 8px var(--gw-a,#6cff6c); animation:gwSnake 2.8s ease-in-out infinite; animation-delay:calc(var(--i)*.05s); }
@keyframes gwSnake{ 50%{ transform:translateY(-18px) } }
.gw-invader{ position:absolute; width:22px; height:16px; background:var(--gw-a,#ff4fd8); clip-path:polygon(20% 0,80% 0,100% 30%,80% 100%,20% 100%,0 30%); animation:gwHover 1.2s ease-in-out infinite; }
.gw-brick{ position:absolute; width:6.8%; height:5.5%; border-radius:3px; background:hsl(var(--h,0) 80% 55%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); }
.gw-ball,.gw-pong-ball,.gw-sport-ball,.gw-pinball,.gw-golfball{ position:absolute; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 0 10px #fff; animation:gwBall 2.4s linear infinite; }
.gw-paddle{ position:absolute; left:35%; bottom:8%; width:18%; height:10px; border-radius:6px; background:var(--gw-a,#ffd24a); animation:gwPad 2.8s ease-in-out infinite; }
@keyframes gwBall{ 0%{ left:20%; top:60% } 25%{ left:70%; top:30% } 50%{ left:40%; top:15% } 75%{ left:15%; top:40% } 100%{ left:20%; top:60% } }
@keyframes gwPad{ 50%{ left:50% } }
.gw-pong-l,.gw-pong-r{ position:absolute; width:10px; height:18%; background:#fff; top:40%; border-radius:4px; animation:gwHover 1.6s ease-in-out infinite; }
.gw-pong-l{ left:6% } .gw-pong-r{ right:6%; animation-delay:.3s }
.gw-pong-net{ position:absolute; left:50%; top:5%; bottom:5%; width:2px; background:repeating-linear-gradient(#fff 0 10px, transparent 10px 20px); opacity:.5; }
.gw-roid{ position:absolute; width:var(--s,24px); height:var(--s,24px); background:#8aa; clip-path:polygon(30% 0,80% 10%,100% 50%,70% 100%,10% 80%,0 30%); animation:gwSpinMove linear infinite; opacity:.85; }
.gw-ship{ position:absolute; left:48%; top:48%; width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:18px solid #9ad0ff; filter:drop-shadow(0 0 6px #9ad0ff); animation:gwHover 2s ease-in-out infinite; }
@keyframes gwSpinMove{ from{ transform:translateX(0) rotate(0) } to{ transform:translateX(-40vw) rotate(360deg) } }
.gw-lane{ position:absolute; left:0; right:0; height:8%; background:rgba(255,255,255,.06); }
.gw-lane i{ position:absolute; width:28px; height:14px; background:#ff5a5a; border-radius:3px; animation:gwLane linear infinite; top:20%; }
@keyframes gwLane{ from{ left:-10% } to{ left:110% } }
.gw-frog{ position:absolute; left:48%; bottom:6%; width:18px; height:18px; background:#7CFF4A; border-radius:4px; animation:gwFrog 3s ease-in-out infinite; }
@keyframes gwFrog{ 0%,100%{ bottom:6% } 50%{ bottom:55% } }
.gw-pipe-pair{ position:absolute; top:0; bottom:0; width:36px; animation:gwCloud linear infinite; }
.gw-pipe-pair::before,.gw-pipe-pair::after{ content:""; position:absolute; left:0; right:0; background:#3dcf4f; border:3px solid #1f8f2e; }
.gw-pipe-pair::before{ top:0; height:calc(var(--gap,40%) - 8%); }
.gw-pipe-pair::after{ bottom:0; height:calc(100% - var(--gap,40%) - 8%); }
.gw-bird{ position:absolute; left:22%; top:42%; width:18px; height:14px; background:#ffe14a; border-radius:6px; animation:gwHover 0.7s ease-in-out infinite; }
.gw-road{ position:absolute; left:28%; right:28%; top:0; bottom:0; background:#333; box-shadow:inset 0 0 0 4px #fff2, 0 0 0 1px #000; }
.gw-road::after{ content:""; position:absolute; left:50%; top:0; bottom:0; width:4px; margin-left:-2px; background:repeating-linear-gradient(#ff0 0 24px, transparent 24px 48px); animation:gwGridDrift 0.6s linear infinite; }
.gw-racecar{ position:absolute; width:18px; height:28px; background:var(--c,#f33); border-radius:4px; animation:gwShot linear infinite; bottom:0; }
.gw-field{ position:absolute; inset:10% 8%; border:3px solid rgba(255,255,255,.5); border-radius:8px; }
.gw-player{ position:absolute; width:12px; height:12px; border-radius:50%; background:#fff; box-shadow:0 0 0 2px #222; animation:gwHover 2s ease-in-out infinite; }
.gw-bumper{ position:absolute; width:22px; height:22px; border-radius:50%; background:var(--gw-a,#ff4fd8); box-shadow:0 0 12px var(--gw-a,#ff4fd8); }
.gw-card{ position:absolute; width:36px; height:50px; background:#fff; color:#c00; border-radius:4px; display:flex; align-items:center; justify-content:center; font:900 1rem/1 Georgia,serif; transform:rotate(var(--rot,0deg)); box-shadow:0 6px 14px rgba(0,0,0,.35); }
.gw-board{ position:absolute; left:50%; top:50%; width:min(50vw,320px); height:min(50vw,320px); transform:translate(-50%,-50%); display:grid; grid-template-columns:repeat(var(--n,8),1fr); grid-template-rows:repeat(var(--n,8),1fr); box-shadow:0 20px 50px rgba(0,0,0,.45); }
.gw-board i.light{ background:#f0d9b5 } .gw-board i.dark{ background:#b58863 }
.gw-tile{ position:absolute; width:18px; height:18px; background:#4a7; border-radius:2px; opacity:.7; }
.gw-tile.dark{ background:#3a2a1a }
.gw-hero{ position:absolute; left:48%; top:48%; width:16px; height:16px; background:#ffd24a; border-radius:3px; animation:gwHover 1.5s ease-in-out infinite; box-shadow:0 0 10px #ffd24a; }
.gw-star{ position:absolute; width:3px; height:3px; background:#fff; border-radius:50%; animation:gwPulse 2s ease-in-out infinite; }
.gw-bubble{ position:absolute; bottom:-10%; width:var(--s,12px); height:var(--s,12px); border-radius:50%; border:2px solid rgba(255,255,255,.5); animation:gwShot linear infinite; }
.gw-dune{ position:absolute; bottom:0; left:0; right:0; height:30%; border-radius:50% 50% 0 0; background:#e0b860; opacity:.85; }
.gw-dune.d2{ height:24%; left:20%; background:#d4a84a; animation:gwHover 6s ease-in-out infinite; }
.gw-dune.d3{ height:18%; left:40%; background:#c9953a; }
.gw-sun{ position:absolute; right:12%; top:12%; width:50px; height:50px; border-radius:50%; background:#ffe566; box-shadow:0 0 40px #ff0; }
.gw-flake{ position:absolute; top:-5%; width:6px; height:6px; background:#fff; border-radius:50%; opacity:.85; animation:gwFall linear infinite; }
.gw-building{ position:absolute; bottom:0; width:5%; height:var(--h,40%); background:linear-gradient(180deg,#2a1a50,#0a0618); box-shadow:inset 0 0 0 1px rgba(57,255,182,.25); }
.gw-building::after{ content:""; position:absolute; inset:10% 15%; background:repeating-linear-gradient(#39ffb633 0 4px, transparent 4px 10px); }
.gw-leaf{ position:absolute; width:22px; height:14px; background:#3dcf4f; border-radius:50% 0; transform:rotate(30deg); opacity:.75; animation:gwHover 3s ease-in-out infinite; }
.gw-lava{ position:absolute; left:0; right:0; bottom:0; height:28%; background:linear-gradient(180deg,#ff5a1f,#4a1008); animation:gwPulse 1.4s ease-in-out infinite; }
.gw-ember{ position:absolute; bottom:25%; width:8px; height:8px; background:#ffaa33; border-radius:50%; animation:gwShot linear infinite; }
.gw-candy,.gw-gem{ position:absolute; width:18px; height:18px; border-radius:4px; background:hsl(var(--h,300) 90% 60%); box-shadow:0 0 10px hsl(var(--h,300) 90% 60%); animation:gwPulse 1.8s ease-in-out infinite; }
.gw-gem{ clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.gw-run-track{ position:absolute; left:0; right:0; bottom:20%; height:8px; background:#00f0ff55; }
.gw-run-hero{ position:absolute; left:15%; bottom:22%; width:16px; height:22px; background:#00f0ff; animation:gwHover .5s ease-in-out infinite; }
.gw-run-obs{ position:absolute; bottom:22%; width:14px; height:18px; background:#ff4d6d; animation:gwLane linear infinite; }
.gw-tower{ position:absolute; bottom:10%; width:8%; height:var(--h,40%); background:#2a4; border:2px solid #ffd24a55; }
.gw-farm-field{ position:absolute; left:0; right:0; bottom:0; height:45%; background:repeating-linear-gradient(90deg,#6cb84a 0 40px,#5aa83c 40px 80px); }
.gw-crop{ position:absolute; width:10px; height:16px; background:#ffe566; border-radius:2px; }
.gw-fighter{ position:absolute; bottom:18%; width:28px; height:48px; background:#ff4d6d; border-radius:6px 6px 0 0; animation:gwHover .45s ease-in-out infinite; }
.gw-fighter.f1{ left:22%; background:#4db2ff } .gw-fighter.f2{ right:22%; }
.gw-hp{ position:absolute; top:12%; height:10px; width:28%; background:#333; border-radius:4px; overflow:hidden; }
.gw-hp::after{ content:""; display:block; height:100%; width:70%; background:#3f3; }
.gw-hp.h1{ left:8% } .gw-hp.h2{ right:8% } .gw-hp.h2::after{ width:55%; background:#f33; float:right; }
.gw-rhythm-lane{ position:absolute; top:0; bottom:15%; width:10%; background:rgba(255,255,255,.04); border-left:1px solid #c84bff44; }
.gw-rhythm-lane i{ position:absolute; left:15%; width:70%; height:14px; border-radius:4px; background:var(--gw-a,#c84bff); animation:gwShot 2s linear infinite; bottom:0; }
.gw-stealth-cone{ position:absolute; left:40%; top:20%; width:0; height:0; border-left:60px solid transparent; border-right:60px solid transparent; border-top:120px solid rgba(57,255,20,.15); animation:gwHover 3s ease-in-out infinite; }
.gw-sneak{ position:absolute; left:20%; bottom:20%; width:14px; height:20px; background:#39ff14; animation:gwFrog 5s ease-in-out infinite; }
.gw-eye{ position:absolute; width:24px; height:12px; background:#200; border-radius:50%; box-shadow:inset 0 0 0 3px #f33, 0 0 12px #f33; animation:gwPulse 2s ease-in-out infinite; }
.gw-cactus{ position:absolute; bottom:18%; width:14px; height:50px; background:#2f7; border-radius:6px; }
.gw-cactus::before,.gw-cactus::after{ content:""; position:absolute; background:#2f7; border-radius:6px; width:12px; height:24px; top:14px; }
.gw-cactus::before{ left:-12px } .gw-cactus::after{ right:-12px }
.gw-cactus.c1{ left:25% } .gw-cactus.c2{ left:65%; height:40px }
.gw-tumble{ position:absolute; bottom:16%; width:22px; height:22px; border:3px solid #8a6a3a; border-radius:50%; animation:gwLane 6s linear infinite; }
.gw-waves{ position:absolute; left:0; right:0; bottom:0; height:35%; background:repeating-linear-gradient(180deg,#145a8a 0 12px,#0a2a44 12px 24px); animation:gwPulse 2s ease-in-out infinite; }
.gw-ship-sail{ position:absolute; left:40%; bottom:30%; width:50px; height:40px; background:#f0c93c; clip-path:polygon(0 100%,50% 0,100% 100%); animation:gwHover 2.5s ease-in-out infinite; }
.gw-robot{ position:absolute; width:20px; height:28px; background:#5ad0ff; border-radius:3px; box-shadow:0 -8px 0 #8cf; animation:gwHover 1.4s ease-in-out infinite; }
.gw-spark{ position:absolute; width:5px; height:5px; background:#d4a0ff; border-radius:50%; box-shadow:0 0 8px #d4a0ff; animation:gwPulse 1.2s ease-in-out infinite; }
.gw-halfpipe{ position:absolute; left:10%; right:10%; bottom:10%; height:40%; border:6px solid #888; border-top:none; border-radius:0 0 50% 50%; }
.gw-skater{ position:absolute; left:20%; bottom:18%; width:14px; height:18px; background:#ff7a18; animation:gwPacRun 5s linear infinite; }
.gw-slope{ position:absolute; inset:0; background:linear-gradient(160deg, transparent 40%, #fff 40% 42%, transparent 42%); }
.gw-tree{ position:absolute; width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:22px solid #1f7a2e; }
.gw-skier{ position:absolute; width:12px; height:18px; background:#ff3b3b; animation:gwPacRun 4s linear infinite; top:30%; }
.gw-green{ position:absolute; left:20%; right:20%; bottom:15%; height:40%; background:#4bb85a; border-radius:40%; }
.gw-hole{ position:absolute; left:55%; bottom:28%; width:14px; height:14px; background:#111; border-radius:50%; }
.gw-particle{ position:absolute; width:6px; height:6px; background:var(--gw-a,#0ff); border-radius:50%; opacity:.7; animation:gwPulse 2s ease-in-out infinite; }