/* Abastible Hero — versión TÓTEM (pad de baile, pantalla grande vertical).
   Todo está dimensionado para leerse a 2-3 metros de distancia. */
:root{
  --naranjo:#ff6a13;
  --naranjo-osc:#d4520a;
  --noche:#0a1030;
  --noche-2:#141a45;
  --blanco:#f7f7f5;
  --tenue:rgba(247,247,245,.62);
  --dorado:#ffd166;
  --disp:"Bebas Neue","Arial Narrow",sans-serif;
  --texto:"Barlow",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html,body{height:100%;overflow:hidden;background:var(--noche);color:var(--blanco);
  font-family:var(--texto);-webkit-font-smoothing:antialiased;
  touch-action:manipulation;overscroll-behavior:none}
/* el tótem no tiene mouse: nada de cursor (con ?cursor=1 vuelve, para pruebas) */
body{cursor:none}
body.con-cursor{cursor:auto}
body.con-cursor *{cursor:auto}

#fondo{position:fixed;inset:0;width:100%;height:100%;z-index:0}

.pantalla{position:fixed;inset:0;z-index:2;display:none;align-items:center;justify-content:center;
  padding:max(20px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));
  overflow:hidden}
.pantalla.activa{display:flex}

/* ---------- atractor ---------- */
.atr{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2.4vmin;text-align:center;width:100%;max-width:900px}
.atr-logo{width:min(78%,700px);height:auto;
  filter:drop-shadow(0 8px 40px rgba(255,106,19,.5));
  animation:latido-suave 2.8s ease-in-out infinite}
.atr-sub{font-size:clamp(14px,2.4vmin,26px);color:var(--tenue);letter-spacing:.22em;
  text-transform:uppercase;font-weight:600}
.atr-abastin{width:min(34%,300px);height:auto;margin-top:1vmin;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.55));
  animation:bailoteo 1.9s ease-in-out infinite}
.atr-cta{display:flex;flex-direction:column;align-items:center;gap:.6vmin;margin-top:2vmin}
.atr-cta-txt{font-family:var(--disp);font-size:clamp(38px,8.6vmin,92px);line-height:.92;
  background:linear-gradient(180deg,#fff 30%,#ffb37e 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 22px rgba(255,106,19,.5))}
.atr-regla{font-size:clamp(13px,2.2vmin,24px);color:var(--tenue);line-height:1.45;margin-top:1.6vmin}
.atr-regla b{color:var(--dorado)}

/* flecha del CTA: pulsa como pidiendo el pisotón */
.flecha-cta{display:inline-flex;align-items:center;justify-content:center;
  width:clamp(64px,11vmin,120px);height:clamp(64px,11vmin,120px);
  border-radius:22%;font-size:clamp(34px,6vmin,64px);line-height:1;color:#fff;
  background:linear-gradient(180deg,#ff7f33,var(--naranjo) 55%,var(--naranjo-osc));
  box-shadow:0 10px 34px rgba(255,106,19,.5), inset 0 2px 0 rgba(255,255,255,.35);
  animation:pisa 1.1s ease-in-out infinite}
.flecha-cta.chica{width:clamp(44px,7vmin,72px);height:clamp(44px,7vmin,72px);
  font-size:clamp(24px,4vmin,42px)}
@keyframes pisa{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
@keyframes latido-suave{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@keyframes bailoteo{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}

/* anillo de progreso del pisotón largo (abre configuración) */
#cfg-aro{position:fixed;right:3vmin;bottom:3vmin;width:11vmin;height:11vmin;z-index:8;
  border-radius:50%;
  background:conic-gradient(var(--naranjo) calc(var(--p,0)*360deg),rgba(255,255,255,.14) 0);
  -webkit-mask:radial-gradient(circle at center,transparent 56%,#000 58%);
  mask:radial-gradient(circle at center,transparent 56%,#000 58%)}

/* ---------- juego ---------- */
#p-juego{padding:0}
#lienzo{position:fixed;inset:0;width:100%;height:100%;touch-action:none}
#hud{position:fixed;top:max(14px,env(safe-area-inset-top));left:2.4vmin;right:2.4vmin;z-index:3;
  display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}
#hud-puntaje{display:flex;flex-direction:column;line-height:1}
.hud-r{font-size:clamp(10px,1.6vmin,18px);letter-spacing:.24em;text-transform:uppercase;
  color:var(--tenue);font-weight:600}
#hud-pts{font-family:var(--disp);font-size:clamp(38px,7vmin,86px);color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.6)}
#hud-mult{font-family:var(--disp);font-size:clamp(26px,4.6vmin,56px);color:var(--naranjo);
  text-shadow:0 0 14px rgba(255,106,19,.8)}
#cuenta{position:fixed;inset:0;z-index:4;display:flex;flex-direction:column;gap:14px;
  align-items:center;justify-content:center;text-align:center;padding:0 7vw;
  font-family:var(--disp);font-size:clamp(120px,26vmin,320px);color:#fff;
  text-shadow:0 0 40px rgba(255,106,19,.9);pointer-events:none}
#cuenta .aro{font-size:clamp(46px,11vmin,150px);line-height:1}
#cuenta .aro-sub{font-family:var(--texto);font-weight:800;font-size:clamp(15px,3.2vmin,40px);
  color:var(--naranjo);letter-spacing:.05em;text-transform:uppercase;
  text-shadow:0 2px 14px rgba(0,0,0,.7)}

/* ---------- resultado ---------- */
.tarjeta{width:100%;max-width:min(86vw,760px);background:rgba(8,10,28,.82);
  backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.10);border-radius:26px;
  padding:4.4vmin 4vmin;box-shadow:0 18px 60px rgba(0,0,0,.5);text-align:center}
.bajada{font-size:clamp(14px,2.4vmin,28px);color:var(--tenue);letter-spacing:.08em;
  text-transform:uppercase;font-weight:600}
.bajada.chica{font-size:clamp(11px,1.8vmin,20px);margin-top:2px}
.ciudad-final{font-family:var(--disp);font-size:clamp(52px,10vmin,120px);line-height:.94;
  margin:1vmin 0;
  background:linear-gradient(180deg,#fff 30%,#ffb37e 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 22px rgba(255,106,19,.5))}
.puntaje-final{font-family:var(--disp);font-size:clamp(52px,9vmin,110px);line-height:.9;
  color:#fff;margin:1.4vmin 0 .4vmin;filter:drop-shadow(0 4px 22px rgba(255,106,19,.55))}
.ganador-nota{font-size:clamp(16px,2.8vmin,32px);font-weight:800;color:var(--dorado);
  margin:1vmin 0;animation:latido-suave 1.4s ease-in-out infinite}
#p-final .tarjeta.fin{transition:box-shadow .4s}
#p-final.ganador .tarjeta.fin{border-color:rgba(255,209,102,.65);
  box-shadow:0 0 80px rgba(255,190,80,.35),0 18px 60px rgba(0,0,0,.5)}
.stats{display:flex;gap:1.2vmin;margin:2.6vmin 0 1vmin}
.stat{flex:1;background:rgba(255,255,255,.06);border-radius:14px;padding:1.6vmin .6vmin;
  display:flex;flex-direction:column;gap:2px}
.stat-n{font-family:var(--disp);font-size:clamp(24px,4.4vmin,52px);line-height:1}
.stat-t{font-size:clamp(9px,1.5vmin,16px);letter-spacing:.1em;text-transform:uppercase;
  color:var(--tenue);font-weight:600}
.fin-cta{display:flex;align-items:center;justify-content:center;gap:2vmin;margin-top:3vmin;
  font-family:var(--disp);font-size:clamp(24px,4.6vmin,54px);color:#fff}

/* ---------- panel de configuración (oculto) ---------- */
#panel-config{position:fixed;inset:0;z-index:50;display:flex;align-items:center;
  justify-content:center;padding:20px;background:rgba(5,7,22,.9);backdrop-filter:blur(10px)}
#panel-config[hidden]{display:none}
.tarjeta.cfg{max-width:min(88vw,680px)}
.cfg-titulo{font-family:var(--disp);font-size:clamp(30px,5vmin,54px);margin-bottom:1vmin}
.cfg-difs{display:flex;gap:1.4vmin;margin:2.4vmin 0 1.2vmin}
.cfg-dif{flex:1;background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.16);
  border-radius:16px;color:var(--tenue);font-family:var(--disp);
  font-size:clamp(22px,4vmin,46px);letter-spacing:.04em;padding:2.2vmin 1vmin;cursor:pointer}
.cfg-dif.sel{border-color:var(--naranjo);color:#fff;background:rgba(255,106,19,.2)}
.cfg-dif.activa{background:var(--naranjo);border-color:var(--naranjo);color:#fff}
.cfg-ayuda{font-size:clamp(11px,1.8vmin,18px);color:var(--tenue);font-weight:600}
.cfg-stats{margin:2.4vmin 0 1.2vmin;padding:1.8vmin;background:rgba(255,255,255,.05);
  border-radius:14px;font-size:clamp(14px,2.4vmin,24px);font-weight:700}
.cfg-diag{display:flex;flex-direction:column;gap:.6vmin;padding:1.6vmin;
  background:rgba(0,0,0,.3);border-radius:14px;font-size:clamp(11px,1.7vmin,17px);
  color:var(--tenue);text-align:left;font-family:ui-monospace,Consolas,monospace}
.cfg-diag-t{font-family:var(--texto);font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;font-size:clamp(10px,1.5vmin,14px)}
#cfg-eventos{min-height:2.4em;white-space:pre-line}
.btn-texto{background:none;border:0;color:var(--tenue);font-family:var(--texto);
  font-size:clamp(12px,2vmin,18px);font-weight:600;cursor:pointer;padding:2vmin 8px;
  text-decoration:underline;text-underline-offset:3px}

[hidden]{display:none !important}

/* respaldo: si el navegador no recorta el degradado al texto */
@supports not ((-webkit-background-clip: text) or (background-clip: text)){
  .atr-cta-txt,.ciudad-final{background:none;color:var(--blanco);-webkit-text-fill-color:var(--blanco)}
}