:root{
  --night:#060907;
  --pitch:#0d1712;
  --card:#101c15;
  --line:#1e3226;
  --flood:#e8ffe0;
  --neon:#3dff7f;
  --neon-dim:#1f9e52;
  --red:#ff3b3b;
  --yellow:#ffcc2e;
  --white:#f4fff2;
  --muted:#7fa08c;
  --gold:#ffd23b;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}

html,body{
  margin:0; padding:0;
  background:var(--night);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--white);
  user-select:none;
  /* SIN height:100% ni overflow:hidden: la página scrollea nativamente
     cuando la pantalla activa es más alta que el viewport — ver el
     comentario largo en #app para el porqué de este cambio de arquitectura
     completo (antes cada pantalla scrolleaba por dentro con overflow-y en
     un div, y ese patrón es el que más bugs de touch-scroll tiene en
     WebKit/iOS). */
}

#app{
  position:relative;
  width:100%;
  /* min-height, no height fija: antes #app tenía una altura fija
     (100vh/100dvh) con overflow:hidden, y cada pantalla (#screen-X) tenía
     SU PROPIO overflow-y:auto para scrollear por dentro de ese box fijo.
     Ese patrón — scroll interno en un div, dentro de position:absolute, a
     veces con un transform activo encima — es exactamente el combo que
     más bugs de touch-scroll (dedo que no responde, no solo "se ve
     apretado") tiene en Safari/WebKit histórico, y varias rondas de
     parches puntuales (dvh, sacar el transform, sacar
     -webkit-overflow-scrolling:touch) no lo terminaron de resolver del
     todo. Ahora #app simplemente CRECE con su contenido (con un piso de
     100dvh para que las pantallas cortas sigan ocupando toda la pantalla
     visualmente) y quien scrollea es la PÁGINA entera — el mecanismo de
     scroll más simple, nativo y mejor probado que existe, sin necesitar
     ningún truco de CSS para que ande bien en touch. */
  min-height:100vh;
  min-height:100dvh;
  max-width:480px;
  margin:0 auto;
  display:flex; flex-direction:column;
  background:
    radial-gradient(ellipse 140% 60% at 50% -10%, rgba(61,255,127,0.16), transparent 60%),
    radial-gradient(ellipse 90% 50% at 20% 110%, rgba(61,255,127,0.08), transparent 60%),
    linear-gradient(180deg, var(--night) 0%, var(--pitch) 100%);
}

.floodlights{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  opacity:0.5;
  /* Sus ::before/::after miden height:140% a propósito (el brillo tiene
     que sobresalir del box) — sin overflow:hidden acá, ese 40% de más
     se sumaba al scrollHeight real de la página entera ahora que #app
     ya no tiene overflow:hidden propio (ver comentario largo en #app).
     Bug real encontrado con getBoundingClientRect: bodyScrollHeight
     1020 vs viewport 844 en la pantalla del juego, sin que NINGÚN
     elemento del DOM (querySelectorAll no ve pseudo-elementos) diera
     bottom > 844. */
  overflow:hidden;
}
.floodlights::before, .floodlights::after{
  content:""; position:absolute; top:-20%; width:60%; height:140%;
  background:linear-gradient(180deg, rgba(232,255,224,0.10), transparent 70%);
  filter:blur(2px);
  animation:floodFlicker 4.5s ease-in-out infinite;
}
.floodlights::before{ left:-15%; transform:rotate(18deg); animation-delay:0s;}
.floodlights::after{ right:-15%; transform:rotate(-18deg); animation-delay:1.4s;}
@keyframes floodFlicker{
  0%,100%{ opacity:0.55; }
  45%{ opacity:1; }
  55%{ opacity:0.7; }
}
.floodlights.surge::before, .floodlights.surge::after{
  animation:floodSurge .6s ease;
}
@keyframes floodSurge{
  0%{ opacity:0.5; }
  30%{ opacity:1.4; filter:blur(0px); }
  100%{ opacity:0.55; filter:blur(2px); }
}

.stitch-line{
  position:absolute; left:0; right:0; height:2px;
  background:repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 20px);
  opacity:0.6; z-index:0;
}

/* Antes: TODAS las pantallas vivían superpuestas (position:absolute;
   inset:0) dentro de #app, y solo opacity/visibility decidían cuál se
   veía — cada una con su propio overflow-y:auto para scrollear por
   dentro. Ahora: solo la pantalla ACTIVA participa del layout
   (display:none en el resto, ver .active más abajo) — #app crece con su
   contenido y la PÁGINA scrollea, no un div de adentro. */
.screen{
  position:relative; /* contexto de posicionamiento para hijos absolutos (.goat-link, .confetti-layer, etc.) */
  display:none;
  flex-direction:column;
  flex:1; /* al estar activa, estira para llenar el alto mínimo de #app */
  width:100%;
  box-sizing:border-box;
  padding:28px 24px;
  opacity:0;
}
.screen.active{
  display:flex;
  opacity:1;
  animation:screenEnter .38s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes screenEnter{
  from{ opacity:0; transform:scale(0.98); }
  to{ opacity:1; transform:none; }
}

.sound-toggle{
  position:absolute; top:20px; right:20px; z-index:20;
  height:34px; border-radius:100px;
  background:var(--card); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  gap:6px; padding:0 14px;
  font-size:12px; font-weight:700; letter-spacing:0.5px; color:var(--muted);
  text-transform:uppercase; cursor:pointer;
}
.sound-toggle .icon{ font-size:15px; }

/* ---------- TOAST (error/info banner) ---------- */
/* position:fixed (no absolute): ahora que la página scrollea de verdad
   (ver #app), un toast position:absolute quedaría anclado a #app y podía
   terminar fuera de vista si el toast aparece mientras estás scrolleado.
   Fixed lo ancla a la ventana real, siempre visible. left:50%+translateX
   en vez de left/right:16px porque fixed ya no hereda el centrado de
   #app (max-width:480px, margin:auto) — hay que centrarlo a mano. */
.toast{
  position:fixed; top:64px; left:50%; z-index:50;
  width:calc(100% - 32px); max-width:448px;
  background:var(--card); border:1px solid var(--red);
  color:var(--white); font-size:13px; font-weight:700;
  border-radius:12px; padding:12px 16px;
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
  opacity:0; pointer-events:none; transform:translate(-50%,-8px);
  transition:opacity .2s ease, transform .2s ease;
  text-align:center;
}
.toast.show{ opacity:1; transform:translate(-50%,0); pointer-events:all; }
.toast.info{ border-color:var(--neon-dim); }

/* ---------- OPENING SCREEN ---------- */
/* flex-start (no center): esta pantalla acumuló mucho contenido a lo largo
   de varias tandas (modos, streak, menú, login, telegram) — si no entra
   entero en el viewport, ahora scrollea la PÁGINA (ver #app). */
#screen-opening{
  justify-content:flex-start; align-items:center; text-align:center; gap:8px;
  padding-top:18px; padding-bottom:18px;
}

.eyebrow{
  letter-spacing:4px; font-size:11px; font-weight:700; color:var(--neon);
  text-transform:uppercase; opacity:0.85; margin-bottom:6px;
}

.ball-icon{
  width:58px; height:58px; border-radius:50%;
  margin:0 auto 18px;
  background:radial-gradient(circle at 32% 28%, #ff6b6b, var(--red) 55%, #7a0f0f 100%);
  box-shadow:0 0 30px rgba(255,59,59,0.55), inset -4px -6px 10px rgba(0,0,0,0.4);
  position:relative;
  animation:ballSpin 3.5s linear infinite;
}
.ball-icon::before, .ball-icon::after{
  content:""; position:absolute; top:6%; bottom:6%; width:2px; left:50%;
  background:repeating-linear-gradient(0deg, var(--white) 0 3px, transparent 3px 6px);
  opacity:0.85;
}
.ball-icon::before{ transform:translateX(-6px) rotate(8deg); }
.ball-icon::after{ transform:translateX(6px) rotate(-8deg); }
@keyframes ballSpin{ from{transform:rotate(0)} to{transform:rotate(360deg)} }

h1.title{
  font-size:44px; font-weight:900; letter-spacing:1px; line-height:1.02;
  margin:0; text-transform:uppercase;
  color:var(--white);
  text-shadow:0 0 18px rgba(61,255,127,0.45), 0 0 46px rgba(61,255,127,0.2);
}
h1.title span{ color:var(--neon); }

.tagline{
  font-size:14px; color:var(--muted); margin:2px 0 6px; font-weight:500;
  max-width:280px;
}

.updates-teaser{
  font-size:12px; font-weight:700; color:var(--gold);
  background:rgba(255,210,59,0.1); border:1px solid rgba(255,210,59,0.3);
  border-radius:100px; padding:7px 16px; margin:0 0 6px;
  max-width:320px; text-align:center;
}
.updates-teaser-sm{ font-size:11.5px; padding:6px 14px; margin:8px auto; }

.btn{
  appearance:none; border:none; cursor:pointer;
  font-family:inherit; font-weight:800; letter-spacing:1.5px;
  text-transform:uppercase; border-radius:100px;
  padding:17px 40px; font-size:16px;
  color:#04180a;
  background:linear-gradient(180deg, #6dffa6, var(--neon));
  box-shadow:0 0 0 1px rgba(61,255,127,0.4), 0 8px 24px rgba(61,255,127,0.35), inset 0 -3px 6px rgba(0,0,0,0.15);
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  width:100%;
}
.btn:active{ transform:scale(0.96); box-shadow:0 0 0 1px rgba(61,255,127,0.4), 0 4px 12px rgba(61,255,127,0.3); }
.btn:disabled{ opacity:0.55; cursor:not-allowed; }

.btn-ghost{
  background:transparent;
  color:var(--neon);
  box-shadow:inset 0 0 0 1.5px var(--neon-dim);
  padding:14px 34px; font-size:14px;
}

/* Usado en pantallas con un solo link "Nah, just let me play normally"
   (challenge / league-join) — ahí sí tiene sentido pinearlo abajo, porque
   nunca hay más de uno por pantalla (a diferencia del viejo uso en la
   pantalla inicial, que apilaba 4 y se pisaban entre sí). */
.goat-link{
  position:absolute; bottom:26px; left:0; right:0; text-align:center;
  font-size:12px; letter-spacing:1px; color:var(--muted); font-weight:700;
  text-transform:uppercase; cursor:pointer;
}
.goat-link span{ color:var(--neon); border-bottom:1px dashed var(--neon-dim); }

/* Grilla 2x2 (2 por fila, no 4 apretados en una sola fila) — cabe un ícono
   grande y bien dibujado + label completa por celda, en mobile entran
   cómodos de a 2 por fila. */
.opening-nav-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  width:100%; margin-top:2px;
}
.opening-nav-item{
  display:flex; align-items:center; gap:11px;
  padding:11px 13px; border-radius:16px;
  background:var(--card); box-shadow:inset 0 0 0 1.5px var(--line);
  cursor:pointer; text-align:left; transition:transform .1s ease;
}
.opening-nav-item:active{ transform:scale(0.96); }
.opening-nav-icon-badge{
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.opening-nav-icon-badge svg{ width:23px; height:23px; }
.opening-nav-label{
  font-size:12px; font-weight:800; letter-spacing:0.2px; color:var(--white);
  text-transform:uppercase; line-height:1.2;
}
.opening-nav-item.accent-gold .opening-nav-icon-badge{
  background:radial-gradient(circle at 35% 30%, rgba(255,210,59,0.4), rgba(255,210,59,0.12));
  color:var(--gold); box-shadow:0 0 0 1px rgba(255,210,59,0.35);
}
.opening-nav-item.accent-neon .opening-nav-icon-badge{
  background:radial-gradient(circle at 35% 30%, rgba(61,255,127,0.4), rgba(61,255,127,0.12));
  color:var(--neon); box-shadow:0 0 0 1px rgba(61,255,127,0.35);
}
.opening-nav-item.accent-saffron .opening-nav-icon-badge{
  background:radial-gradient(circle at 35% 30%, rgba(255,153,51,0.4), rgba(255,153,51,0.12));
  color:#ff9933; box-shadow:0 0 0 1px rgba(255,153,51,0.35);
}
.opening-nav-item.accent-red .opening-nav-icon-badge{
  background:radial-gradient(circle at 35% 30%, rgba(255,59,59,0.4), rgba(255,59,59,0.12));
  color:var(--red); box-shadow:0 0 0 1px rgba(255,59,59,0.35);
}
@media (max-width:340px){
  .opening-nav-grid{ grid-template-columns:1fr; }
}

/* ---------- NICKNAME SCREEN ---------- */
#screen-nickname{ justify-content:center; align-items:stretch; text-align:center; gap:0; }
#screen-nickname .rules-title{ margin-top:4px; }

.nickname-form{
  display:flex; flex-direction:column; gap:12px; margin-top:22px;
}
.nickname-input{
  width:100%; padding:16px 18px; font-size:17px; font-weight:700;
  background:var(--card); border:1.5px solid var(--line); border-radius:14px;
  color:var(--white); text-align:center; letter-spacing:0.5px;
  font-family:inherit;
}
.nickname-input:focus{ outline:none; border-color:var(--neon-dim); }
.nickname-hint{
  font-size:12px; color:var(--muted); font-weight:600; letter-spacing:0.3px;
}
.field-error{
  font-size:13px; color:var(--red); font-weight:700; min-height:18px;
}

.email-optin{
  display:flex; flex-direction:column; gap:8px; margin-top:4px;
  padding:12px 14px; border-radius:14px;
  background:rgba(255,210,59,0.06); border:1px dashed rgba(255,210,59,0.3);
}
.email-optin-label{
  font-size:11.5px; color:var(--gold); font-weight:700; line-height:1.4; text-align:left;
}
.email-optin .nickname-input{
  padding:12px 14px; font-size:14px; text-align:left;
}

/* ---------- RULES SCREEN ---------- */
#screen-rules{ justify-content:center; align-items:stretch; text-align:center; gap:0; }

.rules-title{
  font-size:28px; font-weight:900; letter-spacing:1px; text-transform:uppercase;
  color:var(--white); margin-bottom:8px;
  text-shadow:0 0 18px rgba(61,255,127,0.4);
}
.rules-lead{
  font-size:14px; color:var(--muted); font-weight:600; margin:0 0 18px;
  line-height:1.4;
}

.rule-row{
  display:flex; align-items:center; gap:14px;
  background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:12px 16px; margin-bottom:10px;
  text-align:left;
}
.rule-swatch{
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  box-shadow:0 0 0 1px rgba(255,255,255,0.08);
}
.rule-swatch.red{ background:linear-gradient(180deg,#ff5b5b,#c21f1f); }
.rule-swatch.yellow{ background:linear-gradient(180deg,#ffdc5e,#e0a800); }
.rule-swatch.green{ background:linear-gradient(180deg,#7dffaa,#17c95a); box-shadow:0 0 14px rgba(61,255,127,0.5);}
.rule-text{
  font-size:14px; font-weight:700; color:var(--white); letter-spacing:0.3px;
}
.rule-text b{ color:inherit; }
.rule-runs{
  display:block; font-size:12px; color:var(--muted); font-weight:700; margin-top:2px;
  letter-spacing:0.5px;
}

.rules-foot{
  font-size:13px; color:var(--muted); font-weight:700; margin:14px 0 22px;
  letter-spacing:0.3px;
}

/* ---------- GAME SCREEN ---------- */
/* padding-top:68px (no los 28px de .screen por default): el
   #sound-toggle flota fijo en top:20/right:20 con 34px de alto (hasta
   y=54 relativo a #app) — con el padding default, el pill "Over X" del
   HUD (alineado a la derecha, mismo rincón) le quedaba tapado atrás.
   Mismo patrón que #screen-stats/#screen-customize/#screen-leaderboard/
   #screen-leagues (padding-top:40px), pero acá hace falta más margen
   porque el HUD es lo primero que se ve (sin título propio arriba) y su
   pill derecho sí llega hasta el mismo rincón que el toggle. .stage
   tiene flex:1 así que absorbe esos 40px extra sin agrandar la pantalla
   (queda 0 scroll fantasma, verificado con Playwright). */
#screen-game{ justify-content:flex-start; align-items:stretch; gap:0; padding-top:68px; }

.hud{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:8px;
}
.hud-pill{
  background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:9px 14px;
  font-size:12px; font-weight:700; letter-spacing:1px; color:var(--muted);
  text-transform:uppercase;
}
.hud-pill b{ color:var(--white); font-size:14px; letter-spacing:0.5px; }
.hud-pill.level-pill{ color:var(--neon); border-color:var(--neon-dim); }
.hud-pill.level-pill b{ color:var(--neon); }

.score-board{
  margin:16px 0 2px; text-align:center;
}
.score-label{
  font-size:11px; letter-spacing:3px; color:var(--muted); font-weight:700; text-transform:uppercase;
}
.score-value{
  font-size:58px; font-weight:900; line-height:1;
  color:var(--white);
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 24px rgba(61,255,127,0.35);
  letter-spacing:2px;
  transition:transform .15s ease;
}
.score-value.bump{ transform:scale(1.12); }
.score-value .runs-suffix{ font-size:20px; color:var(--neon); font-weight:800; margin-left:6px; }

.stage{
  position:relative;
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:28px;
}

.float-msg{
  position:absolute; top:36%; left:50%;
  transform:translate(-50%,-50%) scale(0.6);
  font-size:42px; font-weight:900; text-transform:uppercase;
  letter-spacing:1px; opacity:0; pointer-events:none;
  text-align:center; white-space:nowrap;
  z-index:5;
}
.float-msg.show-six{
  color:var(--neon);
  text-shadow:0 0 20px rgba(61,255,127,0.9), 0 0 50px rgba(61,255,127,0.6);
  animation:popSix 1.1s ease forwards;
}
.float-msg.show-four{
  color:var(--yellow);
  text-shadow:0 0 16px rgba(255,204,46,0.8);
  animation:popFour 1.1s ease forwards;
}
.float-msg.show-dot{
  color:var(--red);
  font-size:30px;
  text-shadow:0 0 14px rgba(255,59,59,0.7);
  animation:popDot 1.1s ease forwards;
}
@keyframes popSix{
  0%{opacity:0; transform:translate(-50%,-40%) scale(0.4) rotate(-4deg);}
  15%{opacity:1; transform:translate(-50%,-55%) scale(1.15) rotate(2deg);}
  30%{transform:translate(-50%,-52%) scale(1) rotate(0deg);}
  80%{opacity:1;}
  100%{opacity:0; transform:translate(-50%,-70%) scale(1.05);}
}
@keyframes popFour{
  0%{opacity:0; transform:translate(-50%,-45%) scale(0.5);}
  18%{opacity:1; transform:translate(-50%,-55%) scale(1.08);}
  80%{opacity:1;}
  100%{opacity:0; transform:translate(-50%,-65%) scale(1);}
}
@keyframes popDot{
  0%{opacity:0; transform:translate(-52%,-50%) scale(0.7);}
  15%{opacity:1; transform:translate(-50%,-50%) scale(1);}
  25%{transform:translate(-53%,-50%) scale(1);}
  35%{transform:translate(-47%,-50%) scale(1);}
  45%{transform:translate(-50%,-50%) scale(1);}
  80%{opacity:1;}
  100%{opacity:0; transform:translate(-50%,-56%) scale(0.95);}
}

.runs-badge{
  position:absolute; top:30%; left:50%; transform:translate(-50%,-50%);
  font-size:26px; font-weight:900; opacity:0; pointer-events:none; z-index:5;
}

.flash-overlay{
  position:absolute; inset:0; background:var(--neon);
  opacity:0; pointer-events:none; z-index:4; mix-blend-mode:screen;
}
.flash-overlay.flash{ animation:flashSix .5s ease; }
@keyframes flashSix{ 0%{opacity:0.55;} 100%{opacity:0;} }

.shake{ animation:shakeDot .4s ease; }
@keyframes shakeDot{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-8px); }
  40%{ transform:translateX(7px); }
  60%{ transform:translateX(-5px); }
  80%{ transform:translateX(4px); }
}

/* ---------- SYNC OVERLAY (waiting for server confirmation) ---------- */
.sync-overlay{
  position:absolute; inset:0; z-index:16;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px;
  background:rgba(6,9,7,0.82);
  opacity:0; pointer-events:none;
  transition:opacity .15s ease;
}
.sync-overlay.show{ opacity:1; pointer-events:all; }
.sync-spinner{
  width:34px; height:34px; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--neon);
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.sync-text{ font-size:12px; letter-spacing:2px; color:var(--muted); font-weight:700; text-transform:uppercase; }
.sync-overlay .btn{ margin-top:6px; width:auto; padding:12px 28px; font-size:13px; }

/* Timing bar - the "pitch strip" */
.bar-wrap{
  width:100%;
  position:relative;
}
.bar-caption{
  text-align:center; font-size:12px; letter-spacing:2px; font-weight:700;
  color:var(--muted); text-transform:uppercase; margin-bottom:12px;
}
.bar-caption b{ color:var(--neon); }

.bar-track{
  position:relative;
  height:78px;
  border-radius:16px;
  overflow:hidden;
  display:flex;
  box-shadow:0 0 0 1px var(--line), 0 10px 30px rgba(0,0,0,0.5);
}
.zone{ height:100%; position:relative; transition:flex-grow .3s ease; }
.zone.red{ background:linear-gradient(180deg,#ff5b5b,#c21f1f); }
.zone.yellow{ background:linear-gradient(180deg,#ffdc5e,#e0a800); }
.zone.green{ background:linear-gradient(180deg,#7dffaa,#17c95a); box-shadow:inset 0 0 24px rgba(255,255,255,0.25);}

.zone::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, rgba(0,0,0,0.08) 0 3px, transparent 3px 9px);
}

.marker{
  position:absolute; top:-6px; width:26px; height:90px;
  transform:translateX(-13px);
  z-index:3;
  pointer-events:none;
  will-change:left;
}
.marker-ball{
  width:26px; height:26px; border-radius:50%;
  margin:0 auto;
  background:radial-gradient(circle at 35% 30%, #ffffff, #dcdcdc 55%, #8b8b8b 100%);
  box-shadow:0 0 10px rgba(255,255,255,0.8), 0 0 22px rgba(255,255,255,0.4);
}
.marker-stem{
  width:2px; height:70px; margin:0 auto;
  background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0));
}

.tap-hint{
  text-align:center; font-size:13px; font-weight:700; letter-spacing:1px;
  color:var(--muted); text-transform:uppercase; margin-top:22px;
}
.tap-hint b{ color:var(--white); }

.tap-zone{
  position:absolute; inset:0; z-index:6;
}

.balls-row{
  display:flex; gap:6px; justify-content:center; margin-top:2px; margin-bottom:6px;
}
.ball-dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--line);
  transition:background .2s;
}
.ball-dot.done-six{ background:var(--neon); box-shadow:0 0 6px rgba(61,255,127,0.7); }
.ball-dot.done-four{ background:var(--yellow); box-shadow:0 0 6px rgba(255,204,46,0.6); }
.ball-dot.done-dot{ background:var(--red); box-shadow:0 0 6px rgba(255,59,59,0.5); }
.ball-dot.current{ background:var(--white); box-shadow:0 0 8px rgba(255,255,255,0.8); }

/* ---------- STANCE PICKER ---------- */
.stance-picker{
  position:absolute; inset:0; z-index:18;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px;
  background:rgba(6,9,7,0.9);
  opacity:0; pointer-events:none;
  transition:opacity .15s ease;
}
.stance-picker.show{ opacity:1; pointer-events:all; }
.stance-picker-title{
  font-size:13px; letter-spacing:2px; color:var(--muted); font-weight:700; text-transform:uppercase;
}
.stance-options{ display:flex; gap:10px; }
.stance-btn{
  appearance:none; border:none; cursor:pointer; font-family:inherit;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:16px 14px; border-radius:14px;
  background:var(--card); box-shadow:inset 0 0 0 1.5px var(--line);
  color:var(--white); min-width:84px;
}
.stance-name{ font-size:14px; font-weight:900; text-transform:uppercase; letter-spacing:0.5px; }
.stance-hint{ font-size:10px; color:var(--muted); font-weight:700; text-align:center; }
.stance-defend{ box-shadow:inset 0 0 0 1.5px #7dffaa; }
.stance-defend .stance-name{ color:#7dffaa; }
.stance-loft{ box-shadow:inset 0 0 0 1.5px var(--neon-dim); }
.stance-loft .stance-name{ color:var(--neon); }
.stance-slog{ box-shadow:inset 0 0 0 1.5px var(--red); }
.stance-slog .stance-name{ color:var(--red); }
.stance-btn:active{ transform:scale(0.95); }

/* Recordatorio del shot elegido, visible durante TODA la bola (no solo
   el instante de elegir en el picker) — antes, una vez elegido el
   stance, no quedaba ninguna señal de que la velocidad/zonas ya
   cambiaron; el jugador podía sentir "esta bola es rara" sin conectarlo
   con su propia elección. */
.stance-tag{
  display:none;
  align-items:center; justify-content:center; gap:6px;
  margin:0 auto 10px; width:fit-content;
  padding:5px 14px; border-radius:100px;
  font-size:11px; font-weight:800; letter-spacing:0.5px; text-transform:uppercase;
  background:var(--card); border:1px solid var(--line);
}
.stance-tag.show{ display:flex; }
.stance-tag.tag-defend{ color:#7dffaa; border-color:#7dffaa; }
.stance-tag.tag-loft{ color:var(--neon); border-color:var(--neon-dim); }
.stance-tag.tag-slog{ color:var(--red); border-color:var(--red); }

/* ---------- COUNTDOWN OVERLAY ---------- */
.countdown-overlay{
  position:absolute; inset:0; z-index:17;
  display:flex; align-items:center; justify-content:center;
  background:rgba(6,9,7,0.75);
  opacity:0; pointer-events:none;
  transition:opacity .15s ease;
}
.countdown-overlay.show{ opacity:1; pointer-events:all; }
.countdown-num{
  --rot:0deg;
  font-size:92px; font-weight:900; color:var(--white);
  text-shadow:0 0 30px rgba(61,255,127,0.55);
  line-height:1;
}
.countdown-num.pop{
  animation:countdownPop .5s cubic-bezier(.2,1.6,.35,1);
}
@keyframes countdownPop{
  0%{ transform:scale(0.25) rotate(var(--rot)); opacity:0; }
  55%{ transform:scale(1.2) rotate(calc(var(--rot) * -0.4)); opacity:1; }
  100%{ transform:scale(1) rotate(0deg); opacity:1; }
}
.countdown-num.go{
  font-size:78px; color:var(--neon);
  text-shadow:0 0 34px rgba(61,255,127,0.9), 0 0 60px rgba(61,255,127,0.5);
  letter-spacing:2px;
}

/* ---------- LEVEL BANNER ---------- */
.level-banner{
  position:absolute; inset:0; z-index:15;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(6,9,7,0.88);
  opacity:0; pointer-events:none;
  text-align:center;
}
.level-banner.show{ opacity:1; pointer-events:all; animation:bannerFade 1.15s ease forwards; }
@keyframes bannerFade{
  0%{ opacity:0; }
  10%{ opacity:1; }
  82%{ opacity:1; }
  100%{ opacity:0; }
}
.level-banner .lvl-eyebrow{
  font-size:12px; letter-spacing:3px; color:var(--muted); font-weight:700; text-transform:uppercase; margin-bottom:10px;
}
.level-banner .lvl-title{
  font-size:38px; font-weight:900; letter-spacing:1px; text-transform:uppercase;
  color:var(--neon);
  text-shadow:0 0 24px rgba(61,255,127,0.6);
  animation:lvlPunch .55s cubic-bezier(.2,1.4,.4,1);
}
@keyframes lvlPunch{
  0%{ transform:scale(0.4) rotate(-3deg); opacity:0; }
  60%{ transform:scale(1.12) rotate(1deg); opacity:1; }
  100%{ transform:scale(1) rotate(0); opacity:1; }
}
.level-banner.danger .lvl-title{ color:var(--red); text-shadow:0 0 26px rgba(255,59,59,0.7); }
.level-banner .lvl-sub{
  font-size:13px; color:var(--muted); margin-top:10px; font-weight:600; max-width:220px;
}

.final-ball-banner .lvl-title{
  font-size:44px; color:var(--gold); text-shadow:0 0 30px rgba(255,210,59,0.8);
  animation:finalBallShake 1.1s ease;
}
@keyframes finalBallShake{
  0%{ transform:scale(0.3); opacity:0; }
  20%{ transform:scale(1.25) rotate(-2deg); opacity:1; }
  30%{ transform:scale(1) rotate(2deg); }
  40%{ transform:translateX(-6px) rotate(-1deg); }
  50%{ transform:translateX(6px) rotate(1deg); }
  60%{ transform:translateX(-4px); }
  70%{ transform:translateX(4px); }
  100%{ transform:translateX(0) scale(1); opacity:1; }
}

/* ---------- RESULT SCREEN ---------- */
/* Esta pantalla acumula mucho contenido (Six Card, Telegram, share, 3
   botones) — igual que #screen-opening, si no entra entero scrollea la
   PÁGINA (ver #app), no un div interno. position:relative ya viene de la
   regla base .screen (contexto para .confetti-layer). */
#screen-result{
  justify-content:flex-start; align-items:center; text-align:center; gap:6px;
  padding-top:24px; padding-bottom:24px;
}

.trophy-glow{
  width:84px; height:84px; border-radius:50%; margin-bottom:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:40px;
  background:radial-gradient(circle, rgba(61,255,127,0.25), transparent 70%);
  box-shadow:0 0 40px rgba(61,255,127,0.35);
}

.result-tag{
  font-size:13px; letter-spacing:3px; color:var(--muted); font-weight:700; text-transform:uppercase;
}
.result-title{
  font-size:34px; font-weight:900; text-transform:uppercase; margin:6px 0 2px;
  color:var(--neon);
  text-shadow:0 0 20px rgba(61,255,127,0.45);
}
.result-score{
  font-size:17px; font-weight:700; color:var(--white); margin-bottom:6px; letter-spacing:0.5px;
}
.result-score b{ color:var(--neon); font-size:22px; }

.result-meta{
  display:flex; gap:18px; font-size:12px; color:var(--muted); font-weight:700;
  letter-spacing:0.5px; text-transform:uppercase; margin-bottom:14px;
}
.result-meta b{ color:var(--white); font-size:13px; }

.result-message{
  font-size:14px; color:var(--muted); font-weight:600; margin-bottom:26px;
  max-width:260px; font-style:italic;
}

.trophy-glow.react-fail{ animation:reactFail 1s ease; }
@keyframes reactFail{
  0%{ transform:scale(0.5) rotate(0deg); opacity:0; }
  40%{ transform:scale(1.1) rotate(-8deg); opacity:1; }
  55%{ transform:scale(1) rotate(8deg); }
  70%{ transform:scale(1.05) rotate(-4deg); }
  100%{ transform:scale(1) rotate(0deg); }
}
.trophy-glow.react-win{ animation:reactWin 1.1s ease; }
@keyframes reactWin{
  0%{ transform:scale(0.4); opacity:0; }
  50%{ transform:scale(1.3); opacity:1; }
  70%{ transform:scale(0.92); }
  100%{ transform:scale(1); }
}

.result-actions{ display:flex; flex-direction:column; gap:12px; align-items:center; width:100%; max-width:260px; z-index:5; }

/* "Try another mode" — antes, terminar el Daily Challenge (que solo deja
   jugar una vez por día) era un callejón sin salida: "Play Again" fallaba
   y desaparecía sin ofrecer nada más. Ahora, después de CUALQUIER partida,
   siempre se ofrecen los otros 2 modos como próximo paso obvio — el botón
   del modo recién jugado se oculta vía JS (renderResult). */
.result-more-modes{ width:100%; margin-top:-4px; }
.result-more-modes-label{
  font-size:10.5px; color:var(--muted); font-weight:700; letter-spacing:0.5px;
  text-transform:uppercase; margin:0 0 8px;
}
.result-more-modes-row{ display:flex; gap:8px; }
.result-mode-btn{
  flex:1; min-width:0;
  appearance:none; border:none; cursor:pointer; font-family:inherit;
  background:var(--card); color:var(--neon); box-shadow:inset 0 0 0 1.5px var(--line);
  border-radius:100px; padding:10px 6px; font-size:11px; font-weight:800;
  letter-spacing:0.2px; text-transform:uppercase; white-space:nowrap;
  transition:transform .1s ease;
}
.result-mode-btn:active{ transform:scale(0.95); }
.result-mode-btn.hidden{ display:none; }

/* Versión en flujo normal de .goat-link (que es position:absolute, pensado
   para un solo link pineado abajo de la pantalla) — acá conviven varios
   elementos en la misma columna, así que no puede ir absoluto. */
.goat-link-static{
  font-size:12px; color:var(--muted); font-weight:700; letter-spacing:0.3px;
  cursor:pointer; text-align:center; margin-top:2px;
}
.goat-link-static span{ color:var(--neon); border-bottom:1px dashed var(--neon-dim); }

.confetti-layer{
  position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:3;
}
.confetto{
  position:absolute; top:-20px; border-radius:2px;
  animation-name:confettiFall; animation-timing-function:ease-in; animation-fill-mode:forwards;
}
@keyframes confettiFall{
  0%{ transform:translateY(0) rotate(0deg); opacity:1; }
  100%{ transform:translateY(120vh) rotate(540deg); opacity:0.9; }
}

/* ---------- LEADERBOARD ---------- */
#screen-leaderboard{ justify-content:flex-start; align-items:stretch; gap:0; padding-top:40px; }
.lb-header{ text-align:center; margin-bottom:20px; }
.lb-title{
  font-size:22px; font-weight:900; text-transform:uppercase; color:var(--white);
  letter-spacing:0.5px;
}
.lb-sub{ font-size:12px; color:var(--muted); letter-spacing:1.5px; text-transform:uppercase; margin-top:4px; }
.lb-beat{
  font-size:13px; color:var(--neon); font-weight:700; margin-top:14px; letter-spacing:0.5px;
  min-height:18px;
}
.lb-tabs{ display:flex; gap:8px; justify-content:center; margin-top:16px; }
.lb-tab{
  appearance:none; border:none; cursor:pointer; font-family:inherit;
  padding:8px 16px; border-radius:100px; font-size:12px; font-weight:800;
  letter-spacing:0.5px; text-transform:uppercase;
  background:var(--card); color:var(--muted); box-shadow:inset 0 0 0 1px var(--line);
}
.lb-tab.active{ background:var(--neon); color:#04180a; box-shadow:none; }

/* ---------- MY STATS ---------- */
#screen-stats{ justify-content:flex-start; align-items:stretch; gap:0; padding-top:40px; }
.stats-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px;
}
.stat-tile{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:14px; text-align:center;
}
.stat-value{ font-size:24px; font-weight:900; color:var(--neon); font-variant-numeric:tabular-nums; }
.stat-label{ font-size:10px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:0.5px; margin-top:4px; }
.stats-badges{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:20px;
}
.stats-badge-chip{
  background:var(--card); border:1px solid var(--neon-dim); border-radius:100px;
  padding:6px 14px; font-size:12px; font-weight:700; color:var(--neon);
}

/* ---------- FRIEND LEAGUES ---------- */
/* Le faltaba el mismo padding-top:40px que #screen-stats/#screen-customize
   ya tenían — sin eso, "Friend Leagues" (título largo y centrado) queda a
   la misma altura que el botón de Sound On (arriba a la derecha) y choca
   con él. */
#screen-leagues{ justify-content:flex-start; align-items:stretch; gap:0; padding-top:40px; }
.league-form{ display:flex; gap:8px; }
.league-form .nickname-input{ padding:12px 14px; font-size:14px; flex:1; }
.league-form .btn{ width:auto; padding:12px 20px; font-size:13px; white-space:nowrap; }
.league-row{
  display:flex; align-items:center; gap:12px; cursor:pointer;
}
.league-row .lb-name{ font-size:14px; }
.league-row .lb-runs{ font-size:13px; color:var(--muted); }

/* ---------- CUSTOMIZE ---------- */
#screen-customize{ justify-content:flex-start; align-items:stretch; gap:0; padding-top:40px; }
.customize-section{ margin-top:22px; }
.customize-label{ font-size:12px; letter-spacing:1.5px; color:var(--muted); font-weight:700; text-transform:uppercase; margin-bottom:10px; }

/* Invitar amigos a una Friend League — antes de esto, crear/ver una
   liga no dejaba ningún link para mandarle a nadie (el único feature
   que es literalmente "jugar con amigos" no tenía forma de invitar
   amigos). Reusa los mismos íconos/estilos que el share-row del
   resultado, con un link ?league=<code> en vez de ?challenge=<token>. */
.league-invite{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:14px; margin-bottom:14px; text-align:center;
}
.league-invite-label{
  font-size:12px; font-weight:700; color:var(--muted); margin-bottom:10px;
  text-transform:uppercase; letter-spacing:0.5px;
}
.customize-swatches{ display:flex; flex-wrap:wrap; gap:10px; }
.swatch{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:12px; width:84px; cursor:pointer; position:relative;
}
.swatch.locked{ opacity:0.4; cursor:not-allowed; }
.swatch.equipped{ box-shadow:inset 0 0 0 2px var(--neon); }
.swatch-preview{ width:32px; height:32px; border-radius:50%; }
.bat_default-preview{ background:radial-gradient(circle at 35% 30%, #ffffff, #dcdcdc 55%, #8b8b8b 100%); }
.bat_gold-preview{ background:radial-gradient(circle at 35% 30%, #fff9c4, #ffd23b 55%, #b8860b 100%); }
.bat_slog-preview{ background:radial-gradient(circle at 35% 30%, #ffdede, var(--red) 55%, #7a0f0f 100%); }
.bat_team-preview{ background:radial-gradient(circle at 35% 30%, #d0f5ff, #34aef3 55%, #0d4a7a 100%); }
.bat_founder-preview{ background:radial-gradient(circle at 35% 30%, #ffffff, #f4fff2 40%, var(--neon) 100%); }
.theme_default-preview{ background:linear-gradient(180deg, var(--night), var(--pitch)); }
.theme_neon-preview{ background:linear-gradient(180deg, #0a0014, #1a0030); box-shadow:inset 0 0 0 2px rgba(255,20,147,0.5); }
.swatch-label{ font-size:10px; font-weight:700; text-align:center; color:var(--white); }
.swatch-lock{ position:absolute; top:6px; right:8px; font-size:11px; }

/* Bate: color de la bola del marcador según equipped_bat */
#marker.bat-gold .marker-ball{ background:radial-gradient(circle at 35% 30%, #fff9c4, #ffd23b 55%, #b8860b 100%); box-shadow:0 0 14px rgba(255,210,59,0.9); }
#marker.bat-slog .marker-ball{ background:radial-gradient(circle at 35% 30%, #ffdede, var(--red) 55%, #7a0f0f 100%); box-shadow:0 0 14px rgba(255,59,59,0.8); }
#marker.bat-team .marker-ball{ background:radial-gradient(circle at 35% 30%, #d0f5ff, #34aef3 55%, #0d4a7a 100%); box-shadow:0 0 14px rgba(52,174,243,0.8); }
#marker.bat-founder .marker-ball{ background:radial-gradient(circle at 35% 30%, #ffffff, #f4fff2 40%, var(--neon) 100%); box-shadow:0 0 18px rgba(61,255,127,1); }

/* Stadium theme: fondo alternativo de #app */
#app.theme-neon{
  background:
    radial-gradient(ellipse 140% 60% at 50% -10%, rgba(255,20,147,0.22), transparent 60%),
    radial-gradient(ellipse 90% 50% at 20% 110%, rgba(0,229,255,0.16), transparent 60%),
    linear-gradient(180deg, #0a0014 0%, #1a0030 100%);
}

.lb-list{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.lb-row{
  display:flex; align-items:center; gap:14px;
  background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:12px 16px;
}
.lb-row.me{ border-color:var(--neon-dim); box-shadow:0 0 0 1px var(--neon-dim), 0 0 18px rgba(61,255,127,0.15); }
.lb-rank{
  width:26px; text-align:center; font-weight:900; font-size:15px; color:var(--muted);
}
.lb-row:nth-child(1) .lb-rank{ color:#ffd23b; }
.lb-row:nth-child(2) .lb-rank{ color:#cfd8d4; }
.lb-row:nth-child(3) .lb-rank{ color:#d9924f; }
.lb-name{ flex:1; font-weight:700; font-size:15px; }
.lb-badge{ font-size:15px; margin-right:2px; }
.lb-runs{ font-weight:900; font-size:15px; color:var(--neon); }
.lb-runs span{ font-size:11px; color:var(--muted); font-weight:700; margin-left:3px; }
.lb-empty{ text-align:center; color:var(--muted); font-size:13px; font-weight:600; margin-top:30px; }

.lb-back{ margin-top:18px; }

/* ---------- CRICKET STADIUM FLAIR ---------- */
.crowd-silhouette{
  position:absolute; left:0; right:0; bottom:0; height:16px; z-index:1;
  pointer-events:none; opacity:0.5;
  background:
    radial-gradient(circle at 6% 60%, #000 0 5px, transparent 6px),
    radial-gradient(circle at 18% 40%, #000 0 5px, transparent 6px),
    radial-gradient(circle at 30% 65%, #000 0 5px, transparent 6px),
    radial-gradient(circle at 42% 45%, #000 0 5px, transparent 6px),
    radial-gradient(circle at 54% 62%, #000 0 5px, transparent 6px),
    radial-gradient(circle at 66% 42%, #000 0 5px, transparent 6px),
    radial-gradient(circle at 78% 60%, #000 0 5px, transparent 6px),
    radial-gradient(circle at 90% 44%, #000 0 5px, transparent 6px);
}

/* Brand badge — logo de The Next Play, protagonista arriba de todo. El PNG
   ya es transparente (RGBA); una placa oscura lisa detrás se veía peor que
   el fondo real del juego (gradiente de estadio + floodlights), así que el
   logo se apoya directo sobre ese fondo — un drop-shadow bien marcado (en
   vez de una caja) alcanza para separarlo sin taparlo. */
.brand-badge{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  margin-bottom:8px;
}
.brand-logo{ height:66px; width:auto; filter:drop-shadow(0 3px 10px rgba(0,0,0,0.65)); }
.brand-badge span{
  font-size:10px; letter-spacing:3px; color:var(--muted); font-weight:800; text-transform:uppercase;
  text-shadow:0 2px 6px rgba(0,0,0,0.6);
}

/* Telegram CTA — objetivo de negocio, por eso vive justo debajo de los
   botones de juego (no al final de todo, después del menú y el login,
   como estaba antes) */
.tg-cta{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:4px; padding:12px 20px; width:100%; box-sizing:border-box;
  background:linear-gradient(180deg, #34aef3, #1e96e0);
  color:#fff; font-weight:800; font-size:13px; letter-spacing:0.3px;
  text-transform:none; text-decoration:none; border-radius:100px;
  box-shadow:0 6px 18px rgba(30,150,224,0.35);
}
.tg-cta .tg-icon{ display:flex; align-items:center; }
.tg-cta-sm{ margin-top:14px; padding:10px 18px; font-size:12px; width:100%; max-width:260px; box-sizing:border-box; }

/* ---------- DAILY CHALLENGE ---------- */
.daily-btn{ margin-top:4px; }
.daily-tag{
  text-align:center; font-size:11px; font-weight:800; letter-spacing:0.5px;
  color:var(--gold); text-transform:uppercase; margin-bottom:14px;
  display:none;
}
.daily-tag.show{ display:block; }
.streak-line{
  font-size:12px; font-weight:700; color:var(--gold); text-transform:uppercase;
  letter-spacing:0.5px; margin-top:2px; min-height:16px;
}

/* ---------- LOGIN (magic link) ---------- */
/* Antes era texto suelto flotando (sin fondo, sin forma) — se ve como un
   link perdido, no como parte del diseño. Ahora es una píldora chica con el
   mismo lenguaje visual que el resto (card + borde), coherente con el resto
   de la pantalla sin competir con los CTAs principales. */
.login-link{
  display:flex; align-items:center; justify-content:center; gap:7px;
  font-size:12px; color:var(--muted); font-weight:700; letter-spacing:0.2px;
  margin-top:4px; padding:10px 18px; border-radius:100px;
  background:var(--card); box-shadow:inset 0 0 0 1.5px var(--line);
  cursor:pointer; text-align:center; width:100%; max-width:280px;
  transition:transform .1s ease;
}
.login-link:active{ transform:scale(0.97); }
.login-link span{ color:var(--neon); }
.login-form{
  display:none; gap:8px; margin-top:8px; width:100%; max-width:280px;
}
.login-form.show{ display:flex; flex-wrap:wrap; }
.login-form .nickname-input{ flex:1; min-width:0; padding:11px 14px; font-size:13px; text-align:left; }
.login-form .btn{ flex-shrink:0; width:auto; padding:11px 18px; font-size:12px; white-space:nowrap; }
.login-form .field-error{ flex-basis:100%; }

/* ---------- STREAK BADGE ---------- */
.streak-badge{
  text-align:center; font-size:13px; font-weight:900; letter-spacing:1px;
  color:var(--gold); text-transform:uppercase; min-height:18px; margin-top:2px;
  text-shadow:0 0 12px rgba(255,210,59,0.6);
  opacity:0; transform:scale(0.7); transition:opacity .2s ease, transform .2s ease;
}
.streak-badge.show{ opacity:1; transform:scale(1); }

/* ---------- CHALLENGE SCREEN ---------- */
#screen-challenge{ justify-content:center; align-items:center; text-align:center; gap:8px; }
.challenge-vs{ font-size:44px; margin-bottom:6px; }
#screen-challenge .rules-lead{ max-width:280px; }
#screen-challenge .btn{ margin-top:16px; }

/* ---------- HEAD TO HEAD BANNER (result screen, when came from a challenge link) ---------- */
.h2h-banner{
  display:none; width:100%; max-width:280px; border-radius:14px; padding:12px 16px;
  font-size:13px; font-weight:800; text-align:center; letter-spacing:0.3px;
  margin-bottom:16px; text-transform:uppercase;
}
.h2h-banner.show{ display:block; }
.h2h-banner.win{ background:rgba(61,255,127,0.15); color:var(--neon); box-shadow:inset 0 0 0 1.5px var(--neon-dim); }
.h2h-banner.lose{ background:rgba(255,59,59,0.15); color:var(--red); box-shadow:inset 0 0 0 1.5px var(--red); }
.h2h-banner.tie{ background:rgba(255,204,46,0.15); color:var(--yellow); box-shadow:inset 0 0 0 1.5px var(--yellow); }

/* ---------- SHARE / CHALLENGE-A-FRIEND ---------- */
.share-btn{ background:linear-gradient(180deg, #ffe27a, var(--gold)); }
.share-row{
  display:none; gap:10px; justify-content:center; width:100%;
}
.share-row.show{ display:flex; }
.share-icon{
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--card); border:1px solid var(--line); color:var(--white); cursor:pointer;
  text-decoration:none; appearance:none;
}
.share-wa{ color:#25d366; }
.share-tg{ color:#34aef3; }
.share-sms{ color:var(--muted); }
.share-copy.copied{ color:var(--neon); border-color:var(--neon-dim); }
.share-download{ color:var(--gold); }

.sixcard-preview-wrap{
  width:100%; max-width:280px; margin:14px auto; border-radius:16px; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.5), 0 0 0 1px var(--line);
  display:none; aspect-ratio:1/1; background:var(--card);
}
.sixcard-preview-wrap.show{ display:block; }
.sixcard-preview{ width:100%; height:100%; object-fit:cover; display:block; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}