:root{
  --gold:#FFC531; --gold2:#FF8A00; --red:#ff2740; --cyan:#22e0ee;
  --row:104px; --visible:5;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:#000; color:#fff; overflow:hidden;
  font-family:"Oswald",system-ui,Arial,sans-serif;
  display:flex; flex-direction:column; min-height:100dvh;
  user-select:none; -webkit-tap-highlight-color:transparent;
}
header{
  display:flex; align-items:center; justify-content:center; gap:clamp(18px,4vw,54px);
  padding:clamp(14px,2.4vh,26px) 20px 6px; flex-wrap:wrap;
}
header img{height:clamp(58px,9vh,104px); width:auto; display:block}
header .x{font-family:"Anton";font-size:clamp(26px,4vh,44px);color:var(--gold);opacity:.85;
  text-shadow:0 0 18px rgba(255,197,49,.5)}
.title{text-align:center; padding:2px 12px 0}
.title h1{
  font-family:"Anton"; margin:0; letter-spacing:.04em; text-wrap:balance; text-transform:uppercase;
  font-size:clamp(24px,4.8vh,52px); line-height:.98;
  background:linear-gradient(180deg,#fff 0%,var(--gold) 55%,var(--gold2) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 40px rgba(255,160,0,.25);
}
.title .amount{ display:block; font-family:"Anton"; margin-top:2px; letter-spacing:.01em;
  font-size:clamp(36px,7.6vh,92px); line-height:1;
  background:linear-gradient(180deg,#fff,var(--gold) 45%,var(--gold2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 46px rgba(255,170,0,.55); }
.title p{margin:4px 0 0;color:#9aa0a6;font-weight:600;letter-spacing:.32em;
  text-transform:uppercase;font-size:clamp(10px,1.5vh,14px)}

main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2.5vh,28px);padding:6px 16px 4px;min-height:0}
.machine{
  position:relative; width:min(920px,94vw);
  border-radius:26px; padding:18px;
  background:
    radial-gradient(120% 140% at 50% -20%,rgba(255,197,49,.16),transparent 60%),
    linear-gradient(180deg,#171307,#0b0b0d 60%,#050506);
  border:2px solid rgba(255,197,49,.35);
  box-shadow:0 0 0 2px #000 inset,0 24px 80px rgba(0,0,0,.8),0 0 60px rgba(255,138,0,.10);
}
.bulbs{position:absolute;inset:0;border-radius:26px;pointer-events:none}
.bulbs i{position:absolute;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#fff,var(--gold) 55%,#a05c00 100%);
  box-shadow:0 0 10px 2px rgba(255,180,40,.7);animation:blink 1.1s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.window{
  position:relative; height:calc(var(--row) * var(--visible));
  overflow:hidden; border-radius:16px;
  background:linear-gradient(180deg,#0a0a0c,#101014);
  box-shadow:0 0 0 2px rgba(255,255,255,.05) inset;
}
.reel{position:absolute;left:0;right:0;top:0;will-change:transform}
.cell{
  height:var(--row); display:flex;align-items:center;justify-content:center;
  padding:0 22px; text-align:center; white-space:nowrap;
  font-weight:700; font-size:clamp(20px,4.4vh,40px); letter-spacing:.01em;
  color:#e9ebee; text-transform:uppercase; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.cell.center{color:#fff}
.window::before,.window::after{content:"";position:absolute;left:0;right:0;height:38%;z-index:3;pointer-events:none}
.window::before{top:0;background:linear-gradient(180deg,#0b0b0d 4%,rgba(11,11,13,0))}
.window::after{bottom:0;background:linear-gradient(0deg,#0b0b0d 4%,rgba(11,11,13,0))}
.band{
  position:absolute;left:8px;right:8px;top:calc(var(--row) * 2);height:var(--row);z-index:2;
  border-radius:14px;pointer-events:none;
  border:2px solid var(--gold);
  box-shadow:0 0 26px rgba(255,197,49,.55),0 0 0 9999px rgba(0,0,0,.28);
  background:linear-gradient(180deg,rgba(255,197,49,.08),rgba(255,138,0,.05));
}
.band .arrow{position:absolute;top:50%;transform:translateY(-50%);color:var(--gold);
  font-size:26px;filter:drop-shadow(0 0 8px rgba(255,197,49,.8))}
.band .l{left:-6px} .band .r{right:-6px;transform:translateY(-50%) scaleX(-1)}
body.win .band{border-color:#fff;box-shadow:0 0 40px rgba(255,255,255,.8),0 0 0 9999px rgba(0,0,0,.28);animation:pulse .5s ease 6}
@keyframes pulse{50%{box-shadow:0 0 60px rgba(255,197,49,1),0 0 0 9999px rgba(0,0,0,.28)}}

.controls{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;align-items:center}
button.act{
  font-family:"Oswald";font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  font-size:clamp(16px,2.4vh,22px);padding:14px clamp(26px,4vw,46px);
  border:none;border-radius:14px;cursor:pointer;color:#0a0a0a;
  transition:transform .08s ease,filter .2s ease,opacity .2s ease;
  box-shadow:0 8px 26px rgba(0,0,0,.5);
}
button.act:active{transform:translateY(2px) scale(.99)}
button.act:disabled{opacity:.32;cursor:not-allowed;filter:grayscale(.4)}
#btnStart{background:linear-gradient(180deg,#48f08a,#12b45a);box-shadow:0 8px 30px rgba(18,180,90,.4)}
#btnStop{background:linear-gradient(180deg,#ff6a7d,#e00d28);color:#fff;box-shadow:0 8px 30px rgba(224,13,40,.4)}
.mini{background:transparent;color:#8a9096;border:1px solid #23262b;border-radius:11px;
  padding:10px 14px;font-family:"Oswald";font-weight:600;cursor:pointer;font-size:14px;letter-spacing:.05em}
.mini:hover{color:#fff;border-color:#3a3f46}
.opts{display:flex;gap:18px;align-items:center;color:#7b8188;font-size:13px;font-weight:600;flex-wrap:wrap;justify-content:center}
.opts label{display:flex;gap:7px;align-items:center;cursor:pointer}
footer{padding:8px 16px 14px;text-align:center;color:#5c6167;font-size:12px;letter-spacing:.06em}
footer b{color:var(--gold)}
.badge{position:fixed;top:12px;right:14px;z-index:30;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;padding:6px 12px;border-radius:20px;border:1px solid #262b31;color:#8a9096;background:rgba(0,0,0,.4)}
.badge.on{color:#48f08a;border-color:#1c5} .badge.off{color:var(--red);border-color:#5c1f28}

#overlay{position:fixed;inset:0;z-index:40;display:none;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 40%,rgba(20,14,0,.72),rgba(0,0,0,.94));backdrop-filter:blur(3px)}
#overlay.show{display:flex}
.card{text-align:center;padding:6vh 4vw;max-width:min(1000px,94vw);animation:pop .5s cubic-bezier(.2,1.3,.4,1)}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.card .k{font-family:"Oswald";font-weight:700;letter-spacing:.4em;color:var(--gold);
  text-transform:uppercase;font-size:clamp(14px,2.4vh,20px);margin-bottom:10px}
.card .name{font-family:"Anton";line-height:1;text-transform:uppercase;
  font-size:clamp(38px,10vh,120px);
  background:linear-gradient(180deg,#fff,var(--gold) 60%,var(--gold2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 60px rgba(255,160,0,.4);word-break:break-word}
.card .dni{margin-top:14px;color:#c9ccd0;font-weight:600;font-size:clamp(16px,2.6vh,24px);letter-spacing:.15em}
.card .cta{margin-top:5vh;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
#cvs{position:fixed;inset:0;z-index:50;pointer-events:none}

/* splash (public, one-time gesture for audio+fullscreen) */
#splash{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;background:#000;cursor:pointer;text-align:center;padding:24px}
#splash .logos{display:flex;gap:40px;align-items:center}
#splash img{height:clamp(64px,12vh,120px)}
#splash .go{font-family:"Anton";font-size:clamp(26px,5vh,54px);
  background:linear-gradient(180deg,#fff,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
#splash .sub{color:#9aa0a6;font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:clamp(12px,1.8vh,16px)}
#splash .pulse{margin-top:6px;color:var(--gold);font-size:clamp(13px,2vh,18px);animation:fade 1.4s infinite}
@keyframes fade{50%{opacity:.35}}

@media (max-width:560px){:root{--row:82px}}