/* ===========================================================
   UPN · ATRAPA EL LOGO — tótem vertical 1080 x 1920
   Paleta oficial Brandbook UPN:
     Lúcuma  #FDBA30   Negro #000000   Morado #9500FF
     Magenta #FF00DA   Cyan  #00B9FF   (secundarios 8331A7 / DF1683)
   Proporción de marca: 40% negro · 40% lúcuma · 5% morado/magenta/cyan
   =========================================================== */

:root{
  --lucuma:#FDBA30;
  --lucuma-d:#C98B12;
  --negro:#000000;
  --morado:#9500FF;
  --morado-d:#8331A7;
  --magenta:#FF00DA;
  --magenta-d:#DF1683;
  --cyan:#00B9FF;
  --panel:#121212;
  --panel-2:#1c1c1c;
  --linea:rgba(253,186,48,.16);
  --ok:#38e08a;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{
  height:100%;background:#000;overflow:hidden;
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:#fff;-webkit-font-smoothing:antialiased;
  touch-action:manipulation;user-select:none;-webkit-user-select:none;
}

/* ---------- escalado del tótem ---------- */
#fit{position:fixed;inset:0;overflow:hidden;background:#000}
#stage{
  position:absolute;left:50%;top:50%;width:1080px;height:1920px;
  transform-origin:50% 50%;transform:translate(-50%,-50%);overflow:hidden;
  background:
    radial-gradient(1200px 900px at 50% -10%, #1b1206 0%, #000 62%),
    #000;
}

/* ---------- fondo ---------- */
/* Proporción del manual: ~40% negro + ~40% lúcuma. Los resplandores son
   lúcuma casi siempre; morado/magenta/cyan quedan como acentos puntuales.
   El envoltorio recorta los resplandores: si sobresalen del #stage generan
   scroll invisible y el tablero se desplaza al enfocar un botón */
.bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bg-glow{position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none;opacity:.5}
.g1{width:980px;height:980px;left:-250px;top:-160px;background:var(--lucuma);opacity:.15}
.g2{width:760px;height:760px;right:-280px;top:900px;background:var(--lucuma);opacity:.09}
.g3{width:640px;height:640px;left:140px;bottom:-260px;background:var(--morado);opacity:.10}
.bg-grain{
  position:absolute;inset:0;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
#fx{position:absolute;inset:0;width:1080px;height:1920px;pointer-events:none;z-index:60}

/* ---------- pantallas ---------- */
.screen{
  position:absolute;inset:0;z-index:10;
  display:flex;flex-direction:column;align-items:center;
  padding:90px 60px;
}
.screen.hidden{display:none}
.screen.enter{animation:scIn .45s cubic-bezier(.2,.9,.25,1) both}
@keyframes scIn{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}}

/* ---------- logotipo UPN (se reemplaza por imagen si LOGO_IMG está definido) ---------- */
.brandmark{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Archivo Black',system-ui,sans-serif;
  letter-spacing:-.04em;line-height:1;white-space:nowrap;
  font-size:74px;color:var(--negro);
  background:var(--lucuma);border-radius:22px;padding:16px 26px 20px;
}
.brandmark.sm{font-size:52px;border-radius:16px;padding:11px 18px 14px}
/* con el logo oficial no se toca nada del archivo: solo se escala */
.brandmark.img{background:none;padding:0;border-radius:0}
.brandmark.img img{display:block;width:100%;height:auto}
.intro-top .brandmark.img,.end-top .brandmark.img{width:340px}
.play-foot .brandmark.img{width:180px}

/* =========================================================
   INTRO
   ========================================================= */
#scIntro{justify-content:space-between}
.intro-top{padding-top:10px}
.intro-mid{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}

.eyebrow{
  font-weight:800;font-size:26px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--lucuma);opacity:.9;margin-bottom:8px;
}
.title{
  font-family:'Archivo Black',sans-serif;font-size:132px;line-height:.9;
  letter-spacing:-.035em;text-transform:uppercase;
  text-shadow:0 10px 40px rgba(0,0,0,.6);
}
.title-hi{
  color:var(--lucuma);
  text-shadow:0 0 60px rgba(253,186,48,.35);
}
.lede{
  margin-top:26px;font-size:36px;line-height:1.34;font-weight:600;
  color:rgba(255,255,255,.76);
}

.demo-ring{margin:54px 0 42px;display:grid;place-items:center}
.demo-ring .hole{width:300px;height:300px}
.hole.demo .pop{animation:demoPop 2.6s ease-in-out infinite}
@keyframes demoPop{
  0%,12%{transform:scale(0) rotate(-14deg);opacity:0}
  22%,58%{transform:scale(1) rotate(0);opacity:1}
  70%,100%{transform:scale(0) rotate(10deg);opacity:0}
}

.rules{list-style:none;display:flex;flex-direction:column;gap:18px;margin-top:6px}
.rules li{
  font-size:31px;font-weight:600;color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.045);border:2px solid var(--linea);
  border-radius:999px;padding:18px 40px;
}
.rules b{color:#fff;font-weight:900}
.rules b.mor{color:#c98bff}

.intro-bot{width:100%;display:flex;flex-direction:column;align-items:center;gap:30px}
.best-line{font-size:27px;font-weight:600;color:rgba(255,255,255,.42)}
.best-line b{color:var(--lucuma)}

/* ---------- botón ---------- */
.cta{
  position:relative;overflow:hidden;cursor:pointer;border:0;
  width:820px;padding:44px 0;border-radius:999px;
  background:linear-gradient(180deg,#FFD05C 0%,var(--lucuma) 48%,#E9A317 100%);
  color:#000;font-family:'Archivo Black',sans-serif;font-size:46px;letter-spacing:.02em;
  box-shadow:0 24px 0 -6px rgba(201,139,18,.65), 0 40px 90px rgba(253,186,48,.30);
  animation:ctaPulse 2.4s ease-in-out infinite;
}
.cta:active{transform:translateY(8px);box-shadow:0 12px 0 -6px rgba(201,139,18,.65),0 20px 50px rgba(253,186,48,.25)}
@keyframes ctaPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.cta-label{position:relative;z-index:2}
.cta-shine{
  position:absolute;top:0;left:-60%;width:40%;height:100%;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);
  animation:shine 3.2s ease-in-out infinite;
}
@keyframes shine{0%{left:-60%}55%,100%{left:130%}}

/* =========================================================
   CUENTA REGRESIVA
   ========================================================= */
#scCount{justify-content:center;align-items:center}
.count-wrap{display:grid;place-items:center;gap:24px}
.count-num{
  font-family:'Archivo Black',sans-serif;font-size:520px;line-height:1;color:var(--lucuma);
  text-shadow:0 0 120px rgba(253,186,48,.5);
}
.count-num.go{font-size:300px;color:#fff}
/* `forwards` evita el parpadeo: el número se queda apagado hasta el siguiente */
.count-num.beat{animation:beat .72s cubic-bezier(.2,.9,.25,1) forwards}
@keyframes beat{
  0%{transform:scale(2.4);opacity:0;filter:blur(14px)}
  35%{transform:scale(1);opacity:1;filter:blur(0)}
  100%{transform:scale(.86);opacity:.15}
}
/* el "¡YA!" sí se queda encendido hasta que arranca la partida */
.count-num.go.beat{animation:beatGo .5s cubic-bezier(.2,.9,.25,1) forwards}
@keyframes beatGo{
  0%{transform:scale(2.4);opacity:0;filter:blur(14px)}
  45%{transform:scale(1.06);opacity:1;filter:blur(0)}
  100%{transform:scale(1);opacity:1}
}
.count-sub{
  font-size:40px;font-weight:800;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
}

/* =========================================================
   JUEGO
   ========================================================= */
#scPlay{padding:70px 60px 80px;justify-content:space-between}

.hud{width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.hud-side{display:flex;flex-direction:column;gap:6px}
.hud-side.right{align-items:flex-end;text-align:right}
.hud-cap{
  font-size:23px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.42);
}
.hud-val{font-family:'Archivo Black',sans-serif;font-size:76px;line-height:1;color:#fff}
.hud-val.bump{animation:bump .32s cubic-bezier(.2,1.4,.4,1)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.3);color:var(--lucuma)}100%{transform:scale(1)}}

.timer{position:relative;width:240px;height:240px;display:grid;place-items:center}
.timer-svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.t-track{fill:none;stroke:rgba(255,255,255,.09);stroke-width:16}
.t-fill{
  fill:none;stroke:var(--lucuma);stroke-width:16;stroke-linecap:round;
  stroke-dasharray:552.9;stroke-dashoffset:0;
  filter:drop-shadow(0 0 18px rgba(253,186,48,.55));
  transition:stroke-dashoffset .2s linear, stroke .3s;
}
.timer.warn .t-fill{stroke:var(--magenta);filter:drop-shadow(0 0 20px rgba(255,0,218,.6))}
.timer-txt{
  position:relative;font-family:'Archivo Black',sans-serif;font-size:62px;
  letter-spacing:-.02em;color:#fff;
}
.timer.warn .timer-txt{color:var(--magenta)}
.timer.warn{animation:tick 1s steps(1) infinite}
@keyframes tick{0%,49%{transform:scale(1)}50%,100%{transform:scale(1.05)}}

.combo-wrap{height:120px;display:grid;place-items:center;width:100%}
.combo{
  display:flex;align-items:center;gap:16px;opacity:0;transform:translateY(10px) scale(.9);
  transition:.25s cubic-bezier(.2,.9,.25,1);
  background:linear-gradient(90deg,rgba(253,186,48,.20),rgba(253,186,48,.08));
  border:2px solid rgba(253,186,48,.28);border-radius:999px;padding:14px 34px;
}
.combo.on{opacity:1;transform:none}
.combo.hot{border-color:var(--lucuma);background:linear-gradient(90deg,rgba(253,186,48,.34),rgba(149,0,255,.22))}
.combo span{font-family:'Archivo Black',sans-serif;font-size:52px;color:var(--lucuma)}
.combo i{font-style:normal;font-size:24px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.combo.pulse{animation:comboPulse .3s cubic-bezier(.2,1.4,.4,1)}
@keyframes comboPulse{0%{transform:scale(1)}45%{transform:scale(1.16)}100%{transform:scale(1)}}

/* ---------- tablero ---------- */
.board{
  width:960px;height:960px;margin-top:8px;border-radius:66px;position:relative;
  background:linear-gradient(165deg,var(--panel-2),var(--panel) 58%,#0b0b0b);
  border:3px solid var(--linea);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.06), 0 40px 90px rgba(0,0,0,.7);
}
.board::after{
  content:'';position:absolute;inset:0;border-radius:66px;pointer-events:none;
  background:radial-gradient(70% 55% at 50% 0%, rgba(253,186,48,.09), transparent 70%);
}
.board.shake{animation:shake .3s}
@keyframes shake{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-9px,5px)}45%{transform:translate(8px,-6px)}
  70%{transform:translate(-5px,-3px)}
}
.board-inner{
  position:absolute;inset:60px;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:30px;
}

/* ---------- agujeros ---------- */
.hole{position:relative;display:grid;place-items:center;cursor:pointer}
.ring{
  position:absolute;inset:0;border-radius:50%;
  border:16px solid var(--lucuma);
  background:radial-gradient(circle at 50% 40%, #0d0d0d, #040404);
  box-shadow:inset 0 14px 34px rgba(0,0,0,.9), 0 0 0 0 rgba(253,186,48,0);
  transition:box-shadow .25s, border-color .25s, transform .12s;
}
.hole.armed .ring{
  border-color:#FFD05C;
  box-shadow:inset 0 14px 30px rgba(0,0,0,.85), 0 0 46px 6px rgba(253,186,48,.5);
}
.hole.special.armed .ring{
  border-color:var(--morado);
  box-shadow:inset 0 14px 30px rgba(0,0,0,.85),
             0 0 0 9px rgba(149,0,255,.45),
             0 0 58px 10px rgba(149,0,255,.55);
}
.hole.miss .ring{animation:missRing .38s;border-color:var(--magenta-d)}
@keyframes missRing{
  0%{transform:scale(1)}30%{transform:scale(.93)}100%{transform:scale(1)}
}
.hole:active .ring{transform:scale(.96)}

/* el pop ocupa todo el interior del aro (inset = grosor del borde),
   así el disco lúcuma encaja justo dentro del círculo */
.pop{
  position:absolute;inset:16px;z-index:3;
  display:grid;place-items:center;
  transform:scale(0);opacity:0;
  transition:transform .16s cubic-bezier(.2,1.5,.4,1), opacity .14s;
  will-change:transform;
}

/* ---------- disco encendido: círculo lúcuma + logo en negro ---------- */
.disco{
  width:100%;height:100%;border-radius:50%;
  display:grid;place-items:center;overflow:hidden;
  background:var(--lucuma);            /* lúcuma plano, igual que el recuadro del logo */
  box-shadow:0 16px 38px rgba(0,0,0,.55);
}
.disco img{display:block;width:var(--logo-w,74%);height:auto}
.disco-txt{
  font-family:'Archivo Black',sans-serif;font-size:74px;color:var(--negro);
  letter-spacing:-.04em;line-height:1;
}
.pop.show{transform:scale(1);opacity:1}

/* el logo NUNCA se recolorea (regla del brandbook): el disco sigue lúcuma
   con el logo en negro. El triple se marca en el aro y con la chapa ×3. */
.x3{
  position:absolute;bottom:-18px;left:50%;z-index:4;pointer-events:none;
  transform:translate(-50%,10px) scale(.6);opacity:0;
  transition:.2s cubic-bezier(.2,1.5,.4,1);
  font-family:'Archivo Black',sans-serif;font-size:30px;color:#fff;
  background:var(--morado);border-radius:999px;padding:6px 20px 8px;
  box-shadow:0 8px 22px rgba(149,0,255,.65);
}
.hole.special.armed .x3{opacity:1;transform:translate(-50%,0) scale(1)}
.pop.hit{animation:popHit .28s ease-out forwards}
@keyframes popHit{
  0%{transform:scale(1)}40%{transform:scale(1.35) rotate(6deg)}
  100%{transform:scale(0) rotate(-20deg);opacity:0}
}
.halo{
  position:absolute;inset:-6px;border-radius:50%;border:6px solid var(--lucuma);
  opacity:0;pointer-events:none;
}
.halo.go{animation:halo .55s ease-out}
@keyframes halo{0%{opacity:.9;transform:scale(.8)}100%{opacity:0;transform:scale(1.5)}}

/* ---------- avisos flotantes ---------- */
.toast-slot{position:relative;width:100%;height:150px}
.float{
  position:absolute;left:50%;top:20px;transform:translateX(-50%);
  font-family:'Archivo Black',sans-serif;font-size:54px;white-space:nowrap;
  animation:floatUp .95s ease-out forwards;
}
@keyframes floatUp{
  0%{opacity:0;transform:translate(-50%,26px) scale(.7)}
  25%{opacity:1;transform:translate(-50%,0) scale(1.06)}
  100%{opacity:0;transform:translate(-50%,-70px) scale(1)}
}
.float.good{color:var(--lucuma)}
.float.great{color:var(--cyan)}
.float.bad{color:var(--magenta)}

.play-foot{display:flex;flex-direction:column;align-items:center;gap:18px;opacity:.85}
.play-foot-txt{
  font-size:25px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.38);
}

.colorbar{position:absolute;left:0;right:0;bottom:0;height:14px;display:flex}
.colorbar i{flex:1;background:var(--c)}

/* =========================================================
   RESULTADO
   ========================================================= */
#scEnd{justify-content:space-between;padding:80px 60px 70px}
.end-top{display:flex;flex-direction:column;align-items:center;gap:26px}
.end-kicker{
  font-family:'Archivo Black',sans-serif;font-size:62px;color:#fff;text-align:center;
}

.score-card{
  width:100%;text-align:center;border-radius:56px;padding:52px 40px 46px;
  background:linear-gradient(170deg,rgba(253,186,48,.14),rgba(255,255,255,.03));
  border:3px solid var(--linea);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.score-cap{
  font-size:26px;font-weight:800;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.score-big{
  font-family:'Archivo Black',sans-serif;font-size:216px;line-height:1;color:var(--lucuma);
  letter-spacing:-.04em;text-shadow:0 0 70px rgba(253,186,48,.35);margin:8px 0 14px;
}
.score-medal{
  display:inline-block;font-size:30px;font-weight:900;letter-spacing:.06em;
  background:linear-gradient(90deg,var(--morado),var(--magenta));
  border-radius:999px;padding:14px 34px;
}

.stats{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.stat{
  background:rgba(255,255,255,.05);border:2px solid var(--linea);border-radius:34px;
  padding:28px 10px;text-align:center;
}
.stat b{display:block;font-family:'Archivo Black',sans-serif;font-size:64px;color:#fff}
.stat i{
  display:block;margin-top:6px;font-style:normal;font-size:23px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);
}

.rank{width:100%;background:rgba(255,255,255,.035);border:2px solid var(--linea);border-radius:40px;padding:34px 40px}
.rank-head{
  font-size:26px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;
  color:var(--lucuma);margin-bottom:16px;text-align:center;
}
.rank ol{list-style:none;counter-reset:r}
.rank li{
  counter-increment:r;display:flex;align-items:center;gap:20px;
  font-size:34px;font-weight:700;color:rgba(255,255,255,.7);
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.07);
}
.rank li:last-child{border-bottom:0}
.rank li::before{
  content:counter(r);width:52px;height:52px;flex:none;display:grid;place-items:center;
  border-radius:50%;background:rgba(253,186,48,.16);color:var(--lucuma);
  font-family:'Archivo Black',sans-serif;font-size:28px;
}
.rank li.me{color:#fff}
.rank li.me::before{background:var(--lucuma);color:#000}
.rank li span{margin-left:auto;font-family:'Archivo Black',sans-serif;color:#fff}

.end-bot{width:100%;display:flex;flex-direction:column;align-items:center;gap:24px}
.end-note{font-size:25px;font-weight:600;color:rgba(255,255,255,.36)}
.end-note b{color:var(--lucuma)}