/* Tipografía BP STUDIO: Lexend en todo; botones y títulos en Bold 700 como mínimo */
:where(button,input,select,textarea){font-family:inherit}
:where(button,[role=button],h1,h2,h3,h4,h5,h6,th,label){font-weight:700}
/* VALHALA X · BP STUDIO — interfaz (mobile primero, versión app) */
@font-face{font-family:"Lexend";src:url("fonts/lexend-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  --navy-950:#040a1e; --navy-900:#061231; --navy-800:#0b1a45; --navy-700:#12255c; --navy-600:#1b357c;
  --gold-200:#fff3c8; --gold-300:#ffe39a; --gold-400:#f7cb5e; --gold-500:#dea232; --gold-700:#8f5d12; --gold-900:#3d2604;
  --ice:#86ccff; --rose:#ff74d4; --marble:#f8f2e4; --muted:#a8b6db; --ok:#58e08f; --bad:#ff7a7a;
  --cell:56px; --gap:3px; --pitch:calc(var(--cell) + var(--gap));
  --tab-h:66px; --safe-b:env(safe-area-inset-bottom,0px);
  --gold-grad:linear-gradient(180deg,#fff4c9 0%,#f8d36b 38%,#d9992a 62%,#ffe190 100%);
  --frame-grad:linear-gradient(160deg,#fff0b8,#d29a2f 30%,#7c4f0d 52%,#f5cf63 74%,#a46c15);
  --spd:1;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:var(--navy-950);touch-action:manipulation}
body{font-family:"Lexend",system-ui,sans-serif;color:var(--marble);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;font-weight:700}
button:focus-visible,input:focus-visible{outline:3px solid var(--ice);outline-offset:2px}
img{display:block;-webkit-user-drag:none}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.app{position:fixed;inset:0;overflow:hidden}

/* ---------- Cielo por capas ---------- */
.sky,.sky>div{position:absolute;inset:0}
.sky-day{background:#0b1a45 url(assets/bg-day-m.webp) center/cover no-repeat}
.sky-night{background:#061231 url(assets/bg-night-m.webp) center/cover no-repeat;opacity:0;transition:opacity calc(1.4s*var(--spd)) ease}
.aurora{opacity:0;background:radial-gradient(60% 40% at 30% 8%,rgba(80,255,200,.28),transparent 70%),radial-gradient(50% 35% at 75% 4%,rgba(170,90,255,.30),transparent 70%);mix-blend-mode:screen;transition:opacity 1.6s ease}
.sky-shade{background:linear-gradient(180deg,rgba(4,10,30,.15) 0%,rgba(4,10,30,0) 30%,rgba(4,10,30,.55) 70%,rgba(4,10,30,.92) 100%)}
.app.night .sky-night{opacity:1}
.app.night .aurora{opacity:1;animation:aur 9s ease-in-out infinite alternate}
@keyframes aur{to{transform:translateX(4%) scaleY(1.1);filter:hue-rotate(30deg)}}
@media (min-aspect-ratio:1/1){.sky-day{background-image:url(assets/bg-day.webp)}.sky-night{background-image:url(assets/bg-night.webp)}}

.screen{position:absolute;inset:0}

/* ---------- Tipos y piezas comunes ---------- */
.gold-text,.load-title,.ov-title,.dlg h2,.meter-val,.free-box strong,.wel-points b{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.frame{position:relative;background:linear-gradient(180deg,rgba(17,36,92,.97),rgba(6,16,48,.98));border:3px solid transparent;border-radius:18px;
  background-clip:padding-box;box-shadow:0 0 0 1px #3d2604,0 0 0 3px #e9b84a,0 0 0 5px #6e470b,0 18px 50px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,227,154,.25),inset 0 0 40px rgba(60,120,255,.12)}
.frame::before,.frame::after{content:"";position:absolute;width:14px;height:14px;top:-10px;left:50%;transform:translateX(-50%) rotate(45deg);background:linear-gradient(135deg,#bfe3ff,#2a6bff 55%,#0b2a7a);border:2px solid #f2c75a;box-shadow:0 0 10px rgba(110,170,255,.8)}
.frame::after{top:auto;bottom:-10px}
.btn-gold{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:48px;padding:0 28px;border-radius:14px;
  background:linear-gradient(180deg,#fff0b0 0%,#f7cd5d 45%,#d99a26 55%,#f3c14d 100%);color:#2a1702;font-weight:800;font-size:17px;letter-spacing:.02em;
  box-shadow:0 0 0 2px #6b4409,0 0 0 4px #f6d27a,0 6px 16px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.7);text-transform:uppercase;transition:transform .12s}
.btn-gold:active{transform:scale(.97)}
.btn-gold:disabled{filter:grayscale(.7) brightness(.7);cursor:not-allowed}
.btn-navy{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:14px;background:linear-gradient(180deg,#1d3b8a,#0d1d4d);
  font-weight:700;font-size:16px;text-transform:uppercase;box-shadow:0 0 0 2px #e2b44a,inset 0 1px 0 rgba(255,255,255,.2)}
.btn-sm{min-height:38px;padding:0 14px;font-size:13px}
.btn-xl{min-height:58px;font-size:21px;padding:0 54px}

/* ---------- Carga ---------- */
.screen-loading,.screen-welcome{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:16px 16px calc(28px + var(--safe-b))}
.load-heroes,.wel-heroes{position:absolute;inset:0 0 auto 0;height:66%;display:flex;justify-content:center;align-items:flex-end;pointer-events:none}
.lh,.wh{position:absolute;bottom:0;height:78%;width:auto;max-width:none;filter:drop-shadow(0 12px 24px rgba(0,0,0,.5))}
.lh-bully,.wh-bully{height:92%;z-index:2;left:50%;transform:translateX(-50%)}
.lh-golden,.wh-golden{left:50%;transform:translateX(-104%)}
.lh-poodle,.wh-poodle{left:50%;transform:translateX(6%)}
.load-panel,.wel-panel{position:relative;z-index:3;width:min(100%,440px);text-align:center;display:flex;flex-direction:column;align-items:center}
.load-logo{width:min(80vw,360px);margin-bottom:10px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.6))}
.load-title{font-weight:900;font-size:26px;text-transform:uppercase;letter-spacing:.06em}
.load-bar{width:100%;height:16px;margin:10px 0 6px;border-radius:10px;background:#0a1438;box-shadow:0 0 0 2px #e2b44a,0 0 0 4px #5a3a08,inset 0 2px 6px rgba(0,0,0,.6);overflow:hidden}
.load-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#b9781a,#ffe08a,#f2b93e);box-shadow:0 0 12px #ffd76a;transition:width .25s}
.load-pct{font-weight:800;font-size:20px;color:var(--gold-300)}
.load-sub{font-size:14px;color:var(--muted)}
@media (min-aspect-ratio:1/1){.load-heroes,.wel-heroes{height:84%}.lh-golden,.wh-golden{transform:translateX(-140%)}.lh-poodle,.wh-poodle{transform:translateX(40%)}}

/* ---------- Bienvenida ---------- */
.screen-welcome{justify-content:center}
.wel-logo{display:block;width:min(80vw,400px,48vh);height:auto;aspect-ratio:1/1;margin:0 auto 14px;border-radius:22px;object-fit:cover;box-shadow:0 0 0 1px #3d2604,0 0 0 3px #e9b84a,0 0 0 5px #6e470b,0 0 34px rgba(255,196,90,.35),0 22px 50px rgba(0,0,0,.65)}
.wel-points{list-style:none;margin:0 0 16px;padding:12px 16px;border-radius:14px;background:rgba(5,12,36,.78);box-shadow:0 0 0 1px rgba(233,184,74,.55);font-size:14px;line-height:1.45;color:#dfe6fb}
.wel-points li{padding:2px 0}
.wel-points b{font-weight:800}
.wel-legal{margin:12px 0 0;font-size:12px;color:var(--muted)}
.screen-welcome .wh{animation:breathe 4.5s ease-in-out infinite}
.screen-welcome .wh-golden{animation-delay:-1.4s}.screen-welcome .wh-poodle{animation-delay:-2.6s}

/* ---------- Juego ---------- */
.screen-game{display:flex;flex-direction:column;padding-bottom:calc(var(--tab-h) + var(--safe-b) + 18px)}
.topbar{flex:0 0 auto;height:50px;display:grid;grid-template-columns:48px 1fr 48px;align-items:center;justify-items:center;padding:0 8px;position:relative;z-index:6}
.topbar-logo{height:44px;width:auto;filter:drop-shadow(0 3px 8px rgba(0,0,0,.6))}
.icon-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(6,18,49,.8);box-shadow:0 0 0 2px #d9a63c}
.icon-btn svg{width:22px;height:22px;fill:none;stroke:var(--gold-300);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-btn svg path:first-child{fill:var(--gold-300)}
.icon-btn[aria-pressed="true"] .mute{display:none}
.icon-btn[aria-pressed="false"] .wave{display:none}
.demo-chip{font-size:11px;font-weight:800;letter-spacing:.08em;padding:5px 8px;border-radius:8px;background:rgba(6,18,49,.8);color:var(--gold-300);box-shadow:0 0 0 1px #d9a63c}

.stage{flex:1 1 auto;min-height:0;position:relative;display:grid;grid-template-rows:minmax(64px,1fr) auto;grid-template-areas:"top" "board";justify-items:center}
.feature-col{grid-area:top;z-index:4;width:100%;display:flex;justify-content:space-between;align-items:flex-start;padding:4px 10px 0;pointer-events:none}
.feature-col>*{pointer-events:auto}
.fgroup{display:flex;flex-direction:column;align-items:center;gap:8px}
.quick-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:52px;height:52px;border-radius:50%;font-size:9px;font-weight:800;text-transform:uppercase;color:#dfe6fb;
  background:rgba(6,16,48,.86);box-shadow:0 0 0 2px #d9a63c,0 4px 10px rgba(0,0,0,.45)}
.quick-btn svg{width:20px;height:20px;fill:none;stroke:var(--gold-300);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.quick-btn[aria-pressed="true"]{background:linear-gradient(180deg,#f7cb5e,#b97b16);color:#2a1702}
.quick-btn[aria-pressed="true"] svg{stroke:#2a1702}
.quick-btn:disabled{opacity:.5}
.hero-slot{grid-area:top;position:relative;width:100%;height:100%;z-index:1;overflow:visible}
.hero{position:absolute;left:50%;bottom:calc(var(--cell) * -1.6);height:calc(100% + var(--cell)*2.2);max-height:none;width:auto;transform:translateX(-50%);transform-origin:50% 100%;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.55));transition:opacity calc(.6s*var(--spd)),transform .6s}
.hero-golden,.hero-poodle{opacity:0}
.app.night .hero-bully{opacity:0}
.app.night .hero-golden{opacity:1}
.hero.idle{animation:breathe 4.2s ease-in-out infinite}
@keyframes breathe{0%,100%{scale:1 1}50%{scale:1.008 1.016}}
.hero.cheer{animation:cheer calc(.7s*var(--spd)) ease-out}
@keyframes cheer{30%{translate:0 -3%;scale:1.03}100%{translate:0 0;scale:1}}
.hero.triumph{animation:triumph 1.6s ease-in-out 2;filter:drop-shadow(0 0 24px rgba(255,214,100,.9)) drop-shadow(0 10px 22px rgba(0,0,0,.5))}
@keyframes triumph{25%{translate:0 -5%;scale:1.06}50%{translate:0 -3%;scale:1.05}100%{translate:0 0;scale:1}}
.hero-golden.charge{animation:charge calc(.55s*var(--spd)) ease-in forwards}
@keyframes charge{to{translate:0 -2%;rotate:-4deg;filter:drop-shadow(0 0 22px rgba(130,200,255,.95)) brightness(1.15)}}
.hero-golden.strike{animation:strike calc(.45s*var(--spd)) cubic-bezier(.2,1.6,.4,1)}
@keyframes strike{0%{rotate:-4deg;translate:0 -2%}40%{rotate:5deg;translate:0 1.5%;filter:brightness(1.4) drop-shadow(0 0 30px #9fd8ff)}100%{rotate:0;translate:0 0}}
.app.calm .hero.idle{animation:none}
.bolt{position:absolute;inset:-40% -20% 0;pointer-events:none;opacity:0;background:
  linear-gradient(115deg,transparent 46%,rgba(210,240,255,.95) 48%,transparent 50%),radial-gradient(40% 30% at 50% 40%,rgba(140,200,255,.6),transparent 70%);mix-blend-mode:screen}
.bolt.flash{animation:flash calc(.5s*var(--spd)) ease-out}
@keyframes flash{0%{opacity:0}15%{opacity:1}30%{opacity:.2}45%{opacity:.9}100%{opacity:0}}
.portal{position:absolute;left:50%;bottom:10%;width:min(70vw,320px);aspect-ratio:1;transform:translate(-50%,0) scale(.2);border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle,rgba(255,170,235,.0) 38%,rgba(255,110,210,.75) 48%,rgba(255,200,245,.95) 52%,rgba(190,60,255,.4) 60%,transparent 70%);filter:blur(1px)}
.portal.open{animation:portal calc(1.8s*var(--spd)) ease-out forwards}
@keyframes portal{0%{opacity:0;transform:translate(-50%,0) scale(.2) rotate(0)}40%{opacity:1}100%{opacity:.85;transform:translate(-50%,0) scale(1) rotate(300deg)}}

/* botones de función */
.buy-btn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:84px;padding:7px 4px 6px;border-radius:14px;
  background:linear-gradient(180deg,#1d3d92,#0b1a49);box-shadow:0 0 0 2px #f0c35a,0 0 0 4px #5e3c08,0 6px 14px rgba(0,0,0,.5);line-height:1.05;text-transform:uppercase}
.buy-t1,.buy-t2{font-weight:900;font-size:14px;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.buy-cost{font-size:10px;color:#dfe6fb;margin-top:3px;font-weight:700}
.buy-btn:disabled{filter:grayscale(.8) brightness(.65);cursor:not-allowed}
.meter,.free-box{min-width:92px;padding:6px 10px 7px;border-radius:14px;text-align:center;background:rgba(6,16,48,.86);box-shadow:0 0 0 2px #f0c35a,0 0 0 4px #5e3c08,0 6px 14px rgba(0,0,0,.5)}
.meter-label{display:block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#dfe6fb}
.meter-val,.free-box strong{display:block;font-weight:900;font-size:26px;line-height:1.05}
.meter.bump{animation:bump calc(.5s*var(--spd)) cubic-bezier(.2,1.8,.4,1)}
@keyframes bump{40%{transform:scale(1.25)}}
.meter[data-mode="free"]{box-shadow:0 0 0 2px #9fd8ff,0 0 0 4px #24407a,0 0 22px rgba(120,190,255,.5)}
.free-box{min-width:84px}
.app.night .buy-btn{display:none}

/* tablero */
.board-slot{grid-area:board;z-index:3;display:flex;justify-content:center;align-items:flex-end;width:100%;padding:0 8px}
.board-frame{position:relative;padding:calc(var(--cell)*.16);padding-bottom:calc(var(--cell)*.42);border-radius:16px;
  background:linear-gradient(180deg,rgba(9,22,64,.94),rgba(4,11,34,.96));box-shadow:0 0 0 2px #3a2405,0 0 0 4px #efc35a,0 0 0 6px #7a4f0e,0 0 0 7px #f8dc8a,0 16px 40px rgba(0,0,0,.6),inset 0 0 30px rgba(50,110,255,.18)}
.board-frame::before,.board-frame::after{content:"";position:absolute;top:50%;width:12px;height:12px;margin-top:-6px;transform:rotate(45deg);background:linear-gradient(135deg,#d7eeff,#2b6dff 55%,#0b2a7a);border:2px solid #f2c75a;box-shadow:0 0 10px rgba(110,170,255,.8)}
.board-frame::before{left:-9px}.board-frame::after{right:-9px}
.board{position:relative;width:calc(var(--pitch)*6 - var(--gap));height:calc(var(--pitch)*5 - var(--gap))}
.tile{position:absolute;width:var(--cell);height:var(--cell);left:calc(var(--c)*var(--pitch));top:calc(var(--r)*var(--pitch));border-radius:9px;
  background:radial-gradient(circle at 50% 40%,rgba(40,70,150,.35),rgba(6,16,46,.6));box-shadow:inset 0 0 0 1px rgba(150,180,255,.08)}
.board-clip{position:absolute;inset:0;overflow:hidden;border-radius:8px}
.sym{position:absolute;width:var(--cell);height:var(--cell);left:calc(var(--c)*var(--pitch));top:calc(var(--r)*var(--pitch));display:grid;place-items:center;will-change:transform}
.sym img{width:92%;height:92%;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(0,0,0,.55))}
/* rodillos del giro inmediato (adorno mientras el servidor decide la ronda) */
.reel-loop{position:absolute;inset:0;pointer-events:none;z-index:1}
.reel-col{position:absolute;top:0;left:calc(var(--c)*var(--pitch));width:var(--cell);display:flex;flex-direction:column;gap:var(--gap);
  animation:reelspin calc(.34s*var(--spd,1)) linear infinite,reelin .18s ease-out both;filter:blur(1.6px) saturate(1.1);will-change:transform}
.reel-sym{flex:0 0 var(--cell);height:var(--cell);display:grid;place-items:center}
.reel-sym img{width:86%;height:86%;object-fit:contain}
@keyframes reelspin{from{transform:translateY(calc(var(--pitch)*-5))}to{transform:translateY(0)}}
@keyframes reelin{from{opacity:0}to{opacity:.92}}
.sym.s9 img,.sym.s10 img{width:100%;height:100%}
.rv{position:absolute;inset:0;display:grid;place-items:center;font-weight:900;font-size:calc(var(--cell)*.3);letter-spacing:-.02em;color:#fff7d6;
  text-shadow:0 0 1px #2a1702,0 2px 0 #3d2604,0 0 10px rgba(255,210,110,.9),0 0 3px #000;-webkit-text-stroke:.5px #6b4409}
.rv.big{font-size:calc(var(--cell)*.24)}
.sc-label{position:absolute;left:12%;right:12%;bottom:10%;text-align:center;font-weight:800;font-size:calc(var(--cell)*.13);letter-spacing:.02em;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 #000)}
.sym.win{z-index:3}
.sym.win img{animation:winpulse calc(.6s*var(--spd)) ease-in-out infinite alternate;filter:drop-shadow(0 0 7px #ffe08a) drop-shadow(0 0 14px rgba(255,190,60,.8)) brightness(1.18)}
@keyframes winpulse{to{transform:scale(1.1)}}
.app.calm .sym.win img{animation:none}
.sym.rune-live img{animation:runespin 6s linear infinite}
@keyframes runespin{to{rotate:360deg}}
.sym.rune-new{animation:runepop calc(.6s*var(--spd)) cubic-bezier(.2,1.8,.4,1)}
@keyframes runepop{40%{transform:scale(1.25)}}
.sym.sc-glow img{filter:drop-shadow(0 0 10px rgba(255,120,220,.95)) drop-shadow(0 0 3px #fff)}
.pop{position:absolute;z-index:6;transform:translate(-50%,-50%);padding:3px 9px;border-radius:10px;background:rgba(5,12,36,.9);box-shadow:0 0 0 2px #f0c35a;
  font-weight:800;font-size:clamp(12px,calc(var(--cell)*.24),18px);color:var(--gold-300);white-space:nowrap;pointer-events:none;animation:popin calc(.35s*var(--spd)) cubic-bezier(.2,1.6,.4,1)}
@keyframes popin{from{transform:translate(-50%,-50%) scale(.4);opacity:0}}
.fly{position:fixed;z-index:50;pointer-events:none;display:grid;place-items:center}
.fly img{width:100%;height:100%}
.fly .rv{font-size:inherit}
.fx{position:absolute;inset:-20px;width:calc(100% + 40px);height:calc(100% + 40px);pointer-events:none;z-index:7}
.board-banner{position:absolute;left:50%;bottom:calc(var(--cell)*-.02);transform:translate(-50%,50%);min-width:62%;max-width:96%;padding:5px 16px;border-radius:12px;text-align:center;z-index:8;
  background:linear-gradient(180deg,#132a6a,#08133b);box-shadow:0 0 0 2px #f0c35a,0 0 0 4px #5e3c08,0 6px 14px rgba(0,0,0,.5);font-weight:800;font-size:13px;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--gold-300)}
.board-banner.hot{color:#fff;background:linear-gradient(180deg,#7a4c0a,#3d2604)}
.board-banner.cap{color:#fff;background:linear-gradient(180deg,#8a1d4f,#3b0820)}
.board-frame.skippable{cursor:pointer}

.status{flex:0 0 auto;height:30px;margin-top:14px;display:flex;align-items:center;justify-content:center;padding:0 12px;font-size:14px;font-weight:700;color:#e6ecff;text-align:center;text-shadow:0 1px 3px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;z-index:4}

.hud{flex:0 0 auto;display:grid;grid-template-columns:1.12fr 1fr 1fr;align-items:stretch;gap:6px;margin:0 8px 8px;padding:6px;border-radius:16px;position:relative;z-index:4;
  background:linear-gradient(180deg,rgba(14,31,82,.95),rgba(5,13,40,.97));box-shadow:0 0 0 2px #d9a63c,0 0 0 3px #4a2f06}
.hud-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;text-align:center;padding:2px}
.hud-l{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hud-cell strong{font-size:clamp(12px,3.75vw,17px);letter-spacing:-.01em;font-weight:800;color:var(--gold-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hud-bet{border-radius:12px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(240,195,90,.5)}
.hud-bet:disabled{opacity:.55}
.hud-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:12px;font-size:10px;font-weight:700;text-transform:uppercase;color:#dfe6fb;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(240,195,90,.35)}
.hud-toggle svg{width:20px;height:20px;fill:none;stroke:var(--gold-300);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hud-toggle[aria-pressed="true"]{background:linear-gradient(180deg,#f7cb5e,#b97b16);color:#2a1702}
.hud-toggle[aria-pressed="true"] svg{stroke:#2a1702}
.win-flash{animation:wf calc(.8s*var(--spd))}
@keyframes wf{30%{transform:scale(1.18);color:#fff}}

/* barra fija tipo app */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;height:calc(var(--tab-h) + var(--safe-b));padding:0 6px var(--safe-b);display:grid;grid-template-columns:1fr 1fr 96px 1fr 1fr;align-items:center;justify-items:center;
  background:linear-gradient(180deg,#0e1f55,#050c26);box-shadow:0 -1px 0 #f0c35a,0 -2px 0 #4a2f06,0 -10px 30px rgba(0,0,0,.5)}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:700;color:#c9d4f3;min-width:56px;padding:6px 4px;border-radius:10px}
.tab svg{width:24px;height:24px;fill:none;stroke:var(--gold-300);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tab:disabled{opacity:.45}
/* ---------- Botón GIRAR premium: respira en reposo, gira con energía, cambia a SALTAR / PARAR ---------- */
.spin{position:relative;width:82px;height:82px;margin-top:-30px;border-radius:50%;display:grid;place-items:center;isolation:isolate;
  background:radial-gradient(circle at 50% 30%,#fff6c9,#f9cf58 38%,#cf8c1d 70%,#7e4e0a);
  box-shadow:0 0 0 3px #3d2604,0 0 0 6px #f6d27a,0 0 0 8px #6e470b,0 10px 24px rgba(0,0,0,.6),0 0 22px rgba(255,200,80,.45);
  transition:transform .18s cubic-bezier(.3,1.6,.5,1),filter .2s;animation:spinIdle 2.8s ease-in-out infinite}
@keyframes spinIdle{50%{box-shadow:0 0 0 3px #3d2604,0 0 0 6px #ffe39a,0 0 0 8px #6e470b,0 10px 24px rgba(0,0,0,.6),0 0 38px rgba(255,210,90,.85)}}
.spin-ring{position:absolute;inset:-12px;border-radius:50%;z-index:-1;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 20%,rgba(255,236,170,.95) 30%,transparent 42% 70%,rgba(255,200,90,.8) 80%,transparent 92%);
  -webkit-mask:radial-gradient(circle,transparent 58%,#000 60%,#000 68%,transparent 70%);mask:radial-gradient(circle,transparent 58%,#000 60%,#000 68%,transparent 70%);animation:ringturn 5s linear infinite}
@keyframes ringturn{to{transform:rotate(360deg)}}
.spin-face{position:absolute;inset:0;border-radius:50%;overflow:hidden;pointer-events:none}
.spin-shine{position:absolute;top:-20%;left:-60%;width:40%;height:140%;transform:rotate(25deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:shine 4.2s ease-in-out infinite}
@keyframes shine{0%,62%{left:-60%}82%,100%{left:130%}}
.spin svg{position:relative;width:46px;height:46px;fill:none;stroke:#3a2304;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.spin .i-skip{display:none;fill:#3a2304;stroke:none;width:40px;height:40px}
.i-stop{display:none;width:24px;height:24px;border-radius:5px;background:#3a2304;position:relative}
.spin:hover{transform:scale(1.05)}
.spin:active,.spin.press{transform:scale(.9)}
.spin.turning{animation:spinBusy .5s ease-in-out infinite alternate}
@keyframes spinBusy{to{box-shadow:0 0 0 3px #3d2604,0 0 0 6px #fff1b8,0 0 0 8px #6e470b,0 10px 24px rgba(0,0,0,.6),0 0 50px rgba(255,220,110,1)}}
.spin.turning .spin-ring{animation-duration:.7s}
.spin.turning .i-spin{animation:spinning .55s cubic-bezier(.5,0,.5,1) infinite}
@keyframes spinning{to{transform:rotate(360deg)}}
.spin.skip .i-spin,.spin.stop .i-spin{display:none}
.spin.skip .i-skip{display:block;animation:skipnudge .9s ease-in-out infinite}
@keyframes skipnudge{50%{transform:translateX(3px)}}
.spin.stop .i-skip{display:none}
.spin.stop .i-stop{display:block}
.spin.stop .spin-ring{background:conic-gradient(#ffe39a calc(var(--p,1)*360deg),rgba(255,255,255,.12) 0);animation:none}
.app.turbo-on .spin .spin-ring{background:conic-gradient(from 0deg,transparent 0 20%,rgba(160,220,255,.95) 30%,transparent 42% 70%,rgba(120,200,255,.85) 80%,transparent 92%);animation-duration:2s}
.spin:disabled{filter:saturate(.5) brightness(.75);animation:none}
.spin:disabled .spin-shine,.spin:disabled .spin-ring{animation:none;opacity:.3}
.ripple{position:absolute;inset:0;border-radius:50%;pointer-events:none;box-shadow:0 0 0 3px rgba(255,236,170,.95);animation:ripple .6s ease-out forwards}
@keyframes ripple{to{transform:scale(1.9);opacity:0}}
.app.calm .spin,.app.calm .spin-shine,.app.calm .spin-ring{animation:none}
/* comprar bono: brillo que recorre y leve flotación */
.buy-btn{overflow:hidden;transition:transform .18s cubic-bezier(.3,1.6,.5,1)}
.buy-btn::after{content:"";position:absolute;top:-30%;left:-70%;width:45%;height:160%;transform:rotate(22deg);background:linear-gradient(90deg,transparent,rgba(255,240,190,.55),transparent);animation:shine 5s ease-in-out 1.2s infinite;pointer-events:none}
.buy-btn:not(:disabled){animation:float 3.6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-3px)}}
.buy-btn:hover:not(:disabled){transform:translateY(-3px) scale(1.04)}
.buy-btn:active:not(:disabled){transform:scale(.94)}
.quick-btn,.tab,.hud-bet,.btn-gold,.btn-navy{transition:transform .16s cubic-bezier(.3,1.6,.5,1),box-shadow .2s}
.quick-btn:hover,.hud-bet:hover:not(:disabled){transform:translateY(-2px)}
.quick-btn:active,.tab:active svg,.hud-bet:active{transform:scale(.88)}
.tab svg{transition:transform .16s cubic-bezier(.3,1.6,.5,1)}
.tab:hover:not(:disabled) svg{transform:translateY(-2px)}
.btn-gold:hover:not(:disabled){box-shadow:0 0 0 2px #6b4409,0 0 0 4px #ffe7a3,0 6px 20px rgba(255,200,80,.55),inset 0 2px 0 rgba(255,255,255,.7)}
#turbo[aria-pressed="true"] svg{animation:zap 1.4s steps(1) infinite}
@keyframes zap{0%,100%{opacity:1}46%{opacity:.35}50%{opacity:1}54%{opacity:.5}}
.app.calm .buy-btn,.app.calm .buy-btn::after,.app.calm #turbo svg{animation:none}
.spin-count{position:absolute;top:-6px;right:-6px;min-width:26px;height:26px;padding:0 6px;border-radius:13px;background:#0b1a45;box-shadow:0 0 0 2px #f0c35a;font-size:12px;font-weight:800;display:grid;place-items:center;color:var(--gold-300)}
.spin-count:empty{display:none}

/* ---------- Escritorio y celular horizontal ---------- */
@media (min-aspect-ratio:5/4){
  .topbar{height:58px}
  .topbar-logo{height:54px}
  .stage{grid-template-rows:1fr;grid-template-columns:minmax(110px,1fr) auto minmax(110px,1fr);grid-template-areas:"feat board hero";align-items:center;padding:0 12px}
  .feature-col{grid-area:feat;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:0;height:100%}
  .hero-slot{grid-area:hero;height:100%}
  .hero{bottom:-6%;height:112%;left:40%}
  .board-slot{align-items:center;height:100%}
  .buy-btn{width:110px;padding:12px 6px}
  .buy-t1,.buy-t2{font-size:17px}
  .meter,.free-box{min-width:120px}
  .meter-val,.free-box strong{font-size:34px}
  .status{margin-top:10px;height:26px}
  .hud{width:min(760px,calc(100% - 16px));margin:0 auto 8px}
}
@media (min-aspect-ratio:5/4) and (max-height:500px){
  .topbar{height:40px}.topbar-logo{height:36px}
  .status{margin-top:8px;height:22px;font-size:13px}
  .hud{padding:4px;margin-bottom:6px}
  :root{--tab-h:56px}
  .spin{width:66px;height:66px;margin-top:-18px}.spin svg{width:38px;height:38px}.spin-ring{inset:-9px}
  .tab{font-size:10px;padding:3px}.tab svg{width:20px;height:20px}
  .meter-val,.free-box strong{font-size:24px}
  .buy-btn{width:92px;padding:8px 4px}
}

/* ---------- Capas de evento ---------- */
.overlay{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:16px;background:radial-gradient(circle at 50% 45%,rgba(10,24,70,.55),rgba(2,6,20,.88));animation:fadein calc(.35s*var(--spd))}
@keyframes fadein{from{opacity:0}}
.ov-art{position:absolute;inset:0;pointer-events:none;display:flex;justify-content:center;align-items:flex-end}
.ov-art{align-items:flex-start;padding-top:max(8px,3vh)}
.ov-art img{height:min(56vh,620px);width:auto;filter:drop-shadow(0 0 30px rgba(255,140,220,.45));animation:rise calc(.8s*var(--spd)) cubic-bezier(.2,1,.3,1)}
.overlay{align-items:flex-end;padding-bottom:calc(var(--tab-h) + var(--safe-b) + 20px)}
@media (min-aspect-ratio:5/4){
  .overlay{align-items:center;padding-bottom:16px}
  .ov-art{align-items:flex-end;padding:0}
  .ov-art img{position:absolute;bottom:0;left:calc(50% + 200px);height:min(92vh,760px)}
  .overlay.big .ov-art img{left:50%;transform:translateX(-50%);height:min(96vh,780px)}
}
@keyframes rise{from{translate:0 12%;opacity:0}}
.ov-card{position:relative;z-index:2;width:min(100%,430px);padding:22px 18px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;animation:cardin calc(.5s*var(--spd)) cubic-bezier(.2,1.5,.4,1)}
@keyframes cardin{from{scale:.6;opacity:0}}
.ov-logo{width:170px;margin:-52px 0 6px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}
.ov-kicker{margin:0;font-size:14px;font-weight:700;color:#dfe6fb;text-transform:uppercase;letter-spacing:.06em}
.ov-kicker:empty{display:none}
.ov-title{margin:2px 0 0;font-weight:900;font-size:clamp(28px,8vw,42px);line-height:1.05;text-transform:uppercase;filter:drop-shadow(0 3px 0 #2a1702)}
.ov-big{font-weight:900;font-size:clamp(46px,15vw,92px);line-height:1;margin:6px 0 2px;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #2a1702) drop-shadow(0 0 18px rgba(255,200,80,.45))}
.ov-big.money{font-size:clamp(30px,10vw,58px)}
.ov-big:empty{display:none}
.ov-sub{font-weight:800;font-size:clamp(20px,6vw,30px);text-transform:uppercase;line-height:1.1;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ov-sub:empty{display:none}
.ov-rows{width:100%;margin:12px 0 4px;display:grid;gap:6px}
.ov-rows:empty{display:none}
.ov-row{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(240,195,90,.35);font-size:14px}
.ov-row b{color:var(--gold-300);font-weight:800}
.ov-card .btn-gold{margin-top:14px;min-width:220px}
.ov-hint{margin:8px 0 0;font-size:12px;color:var(--muted)}
.ov-hint:empty{display:none}
.ov-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.overlay.tier-cap .ov-card{box-shadow:0 0 0 1px #3d2604,0 0 0 3px #ff8ad8,0 0 0 5px #6e1a4a,0 18px 50px rgba(0,0,0,.6)}
.overlay.bonus .ov-card{box-shadow:0 0 0 1px #3d2604,0 0 0 3px #e9b84a,0 0 0 5px #6e470b,0 0 40px rgba(255,110,210,.55)}

/* ---------- Diálogos ---------- */
.dlg{width:min(calc(100% - 24px),440px);max-height:calc(100dvh - 40px);margin:auto;padding:22px 18px 18px;color:var(--marble);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.dlg-wide{width:min(calc(100% - 24px),640px)}
.dlg::backdrop{background:rgba(2,6,20,.72);backdrop-filter:blur(3px)}
.dlg[open]{animation:cardin .3s cubic-bezier(.2,1.4,.4,1)}
.dlg h2{margin:0 0 4px;padding:0 38px;text-align:center;font-weight:900;font-size:clamp(21px,6.2vw,28px);text-transform:uppercase;filter:drop-shadow(0 2px 0 #2a1702)}
.dlg h3{margin:18px 0 8px;font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--gold-400)}
.dlg h3 small{font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0}
.dlg-sub{margin:0 0 12px;text-align:center;font-size:14px;color:#dfe6fb}
.dlg-foot{margin:6px 0;font-size:12px;color:var(--muted);text-align:center}
.dlg-x{position:absolute;z-index:3;top:10px;right:10px;width:36px;height:36px;border-radius:50%;background:#0a1640;box-shadow:0 0 0 2px #e2b44a;font-size:22px;line-height:1;color:var(--gold-300)}
.dlg-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.dlg-actions.one{grid-template-columns:1fr;justify-items:center}
.dlg-actions.one .btn-gold{min-width:220px}
.dlg-actions .btn-gold,.dlg-actions .btn-navy{padding:0 10px;font-size:15px}
.bet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bet-grid button{min-height:46px;border-radius:12px;font-weight:700;font-size:clamp(12px,3.6vw,15px);white-space:nowrap;background:linear-gradient(180deg,#14306e,#0a1846);box-shadow:inset 0 0 0 2px #2c4f9e}
.bet-grid button[aria-pressed="true"]{background:linear-gradient(180deg,#fff0b0,#f2bf48);color:#2a1702;box-shadow:0 0 0 2px #6b4409,0 0 14px rgba(255,200,80,.5)}
.bet-grid button:disabled{opacity:.4}
.bet-sel{margin-top:14px;text-align:center}
.bet-sel span{display:block;font-size:12px;text-transform:uppercase;font-weight:700;color:var(--muted);letter-spacing:.06em}
.bet-sel strong{font-size:28px;font-weight:900;color:var(--gold-300)}
.buy-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:center}
.buy-grid div,.buy-total,.buy-bal{padding:10px;border-radius:12px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(240,195,90,.4)}
.buy-grid span,.buy-total span{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.buy-grid strong{font-size:16px;color:var(--gold-300)}
.buy-total{margin-top:8px;text-align:center}
.buy-total strong{font-size:34px;font-weight:900;color:var(--gold-300)}
.buy-bal{display:grid;grid-template-columns:1fr auto;gap:2px 12px;font-size:13px;margin-top:4px}
.buy-bal strong{color:var(--gold-300);text-align:right}
.set-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:8px 0;font-size:14px}
.set-row input[type=range]{width:min(34vw,150px);accent-color:#f2bf48}
.sw{position:relative;width:48px;height:28px;display:inline-block}
.sw input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;z-index:1}
.sw i{position:absolute;inset:0;border-radius:14px;background:#26345e;box-shadow:inset 0 0 0 1px #4a5d93;transition:.2s}
.sw i::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#dfe6fb;transition:.2s}
.sw input:checked+i{background:linear-gradient(180deg,#f7cb5e,#c98a1c)}
.sw input:checked+i::after{left:23px;background:#fff8e0}
.sw input:focus-visible+i{outline:3px solid var(--ice);outline-offset:2px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.seg button{min-height:42px;border-radius:10px;font-weight:700;text-transform:uppercase;font-size:13px;background:#0a1846;box-shadow:inset 0 0 0 2px #2c4f9e}
.seg button[aria-checked="true"]{background:linear-gradient(180deg,#fff0b0,#f2bf48);color:#2a1702;box-shadow:0 0 0 2px #6b4409}
.how{display:grid;grid-template-columns:1fr;gap:8px}
@media (min-width:560px){.how{grid-template-columns:1fr 1fr}}
.how-c{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:center;padding:10px;border-radius:12px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(240,195,90,.4)}
.how-c img{width:64px;height:64px}
.how-c h4{margin:0 0 2px;font-size:15px;font-weight:800;color:var(--gold-300);text-transform:uppercase}
.how-c p{margin:0;font-size:13px;line-height:1.4;color:#dfe6fb}
.rune-demo,.sc-demo{position:relative;width:64px;height:64px}
.rune-demo b{position:absolute;inset:0;display:grid;place-items:center;font-weight:900;font-size:18px;color:#fff7d6;text-shadow:0 2px 0 #3d2604,0 0 8px #ffd36b}
.sc-demo b{position:absolute;left:0;right:0;bottom:7px;text-align:center;font-size:8px;font-weight:800;color:var(--gold-300)}
.paytable{display:grid;gap:4px}
.pt{display:grid;grid-template-columns:44px repeat(3,1fr);gap:6px;align-items:center;padding:4px 8px;border-radius:10px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(240,195,90,.25)}
.pt img{width:44px;height:44px}
.pt b{text-align:right;font-weight:700;font-size:clamp(11px,3.3vw,14px);color:var(--gold-300);white-space:nowrap}
.pt-h{background:none;box-shadow:none;padding:0 8px;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase}
.pt-h span{text-align:right}.pt-h span:first-child{text-align:left}
.rules-text{font-size:13px;line-height:1.55;color:#dfe6fb}
.rules-text p{margin:0 0 8px}
.rules-text b{color:var(--gold-300)}
.hist{display:grid;gap:6px}
.hist button{display:grid;grid-template-columns:1fr auto;gap:2px 10px;text-align:left;padding:9px 12px;border-radius:10px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(240,195,90,.3);font-size:13px}
.hist small{color:var(--muted)}
.hist .w{font-weight:800;color:var(--gold-300);text-align:right}
.hist .l{color:var(--muted);text-align:right}
.hist-empty{text-align:center;color:var(--muted);font-size:14px;padding:18px}
.rd{font-size:13px;line-height:1.5;color:#dfe6fb}
.rd h4{margin:12px 0 4px;color:var(--gold-300);font-size:14px;text-transform:uppercase}
.rd table{width:100%;border-collapse:collapse;font-size:12px}
.rd td,.rd th{padding:4px 6px;border-bottom:1px solid rgba(240,195,90,.18);text-align:left}
.rd th{color:var(--muted);font-weight:700}
.rd td.n{text-align:right;font-weight:700;color:var(--gold-300)}
.rd code{display:block;font-family:inherit;font-size:11px;word-break:break-all;color:#c9d4f3;background:rgba(0,0,0,.25);padding:6px 8px;border-radius:8px;margin:2px 0 6px}
.ok{color:var(--ok);font-weight:800}
.bad{color:var(--bad);font-weight:800}

.dev{position:fixed;bottom:170px;right:4px;opacity:.85;z-index:30;display:flex;flex-direction:column;gap:4px;background:rgba(0,0,0,.75);padding:6px;border-radius:8px;font-size:11px}
.dev button{background:#333;color:#fff;padding:4px 6px;border-radius:4px;font-size:11px}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.app.portal-on .hero-bully{opacity:0}

/* celular vertical bajo: funciones en fila */
@media (max-aspect-ratio:5/4) and (max-height:720px){
  .fgroup{flex-direction:row;gap:6px}
  .fgroup:last-child{flex-direction:row-reverse}
  .quick-btn{width:46px;height:46px}
  .buy-btn{width:76px;padding:5px 3px}
  .buy-t1,.buy-t2{font-size:12px}
  .meter,.free-box{min-width:76px;padding:5px 6px}
  .meter-val,.free-box strong{font-size:20px}
  .status{margin-top:12px;height:24px;font-size:13px}
}
/* bienvenida en pantallas bajas */
@media (max-height:520px){
  .wel-logo{width:min(80vw,46vh);max-height:46vh;margin-bottom:10px}
  .wel-points{font-size:12px;padding:7px 12px;margin-bottom:10px}
  .btn-xl{min-height:46px;font-size:18px}
  .wel-legal{margin-top:6px}
  .load-heroes{height:70%}
  .load-logo{width:auto;max-height:18vh}
}
/* celular horizontal: columnas laterales con logo, funciones y saldo */
@media (min-aspect-ratio:5/4) and (max-height:500px){
  .screen-game{display:block}
  .topbar{position:absolute;left:0;top:0;width:var(--side,200px);height:44px;grid-template-columns:40px 1fr 44px;padding:0 6px}
  .topbar-logo{height:34px}
  .icon-btn{width:34px;height:34px}
  .stage{position:absolute;left:0;right:0;top:0;bottom:calc(var(--tab-h) + var(--safe-b));grid-template-columns:var(--side,200px) auto 1fr;padding:0}
  .feature-col{justify-content:flex-start;padding-top:52px;gap:10px}
  .fgroup{flex-direction:row;gap:8px}
  .board-slot{align-items:flex-start;padding-top:6px}
  .hero{height:104%;bottom:-4%;left:50%}
  .status{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--tab-h) + var(--safe-b) + 4px);width:var(--boardw,400px);margin:0;height:20px;font-size:12px}
  .hud{position:absolute;right:6px;bottom:calc(var(--tab-h) + var(--safe-b) + 18px);width:calc(var(--side,200px) - 12px);margin:0;grid-template-columns:1fr;gap:2px;padding:4px 8px}
  .hud-cell{flex-direction:row;justify-content:space-between;gap:6px;padding:1px 2px}
  .hud-bet{padding:2px 6px}
}

/* celebración: rayos dorados detrás del personaje */
.overlay.big{background:radial-gradient(circle at 50% 42%,rgba(60,40,6,.55),rgba(2,6,20,.94) 70%)}
.overlay.big .ov-art::before{content:"";position:absolute;left:50%;top:40%;width:160vmax;height:160vmax;transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg,rgba(255,214,110,.16) 0deg 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 55%);mask:radial-gradient(circle,#000 0,transparent 55%);animation:rays 24s linear infinite}
@keyframes rays{to{rotate:360deg}}
.app.calm .overlay.big .ov-art::before{animation:none}
.overlay.big .ov-art img{filter:drop-shadow(0 0 40px rgba(255,200,90,.6))}

/* ---------- CELEBRACIÓN: 4 niveles por monto ganado ---------- */
.cel{position:fixed;inset:0;z-index:45;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;--tc:255,200,80}
.cel[data-tier="2"]{--tc:255,170,40}.cel[data-tier="4"]{--tc:140,200,255}.cel[data-tier="5"]{--tc:255,140,220}
.cel-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,rgba(var(--tc),.38),rgba(40,26,4,.82) 38%,rgba(2,6,20,.95) 75%);animation:fadein .4s}
.cel[data-tier="2"] .cel-bg{background:radial-gradient(circle at 50% 46%,rgba(255,200,70,.6),rgba(90,52,4,.86) 40%,rgba(10,6,2,.96) 80%)}
.cel[data-tier="4"] .cel-bg{background:radial-gradient(circle at 50% 46%,rgba(255,215,120,.6),rgba(40,40,110,.85) 42%,rgba(2,6,24,.97) 80%)}
.cel[data-tier="5"] .cel-bg{background:radial-gradient(circle at 50% 44%,rgba(255,236,170,.75),rgba(150,70,20,.75) 30%,rgba(40,10,60,.9) 58%,rgba(2,4,18,.98) 85%)}
.cel-aurora{position:absolute;inset:0;opacity:0;transition:opacity 1s;background:radial-gradient(60% 40% at 25% 6%,rgba(80,255,200,.45),transparent 70%),radial-gradient(50% 35% at 78% 4%,rgba(190,90,255,.5),transparent 70%),radial-gradient(40% 30% at 50% 0,rgba(255,120,210,.35),transparent 70%);mix-blend-mode:screen}
.cel[data-tier="5"] .cel-aurora{opacity:1;animation:aur 6s ease-in-out infinite alternate}
.cel-rays{position:absolute;left:50%;top:44%;width:180vmax;height:180vmax;transform:translate(-50%,-50%);pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(var(--tc),.22) 0deg 5deg,transparent 5deg 15deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 50%);mask:radial-gradient(circle,#000 0,transparent 50%);animation:rays 20s linear infinite}
.cel[data-tier="2"] .cel-rays{animation-duration:12s;background:repeating-conic-gradient(from 0deg,rgba(255,220,110,.32) 0deg 6deg,transparent 6deg 14deg)}
.cel[data-tier="4"] .cel-rays,.cel[data-tier="5"] .cel-rays{animation-duration:8s;background:repeating-conic-gradient(from 0deg,rgba(255,236,160,.4) 0deg 4deg,transparent 4deg 9deg,rgba(var(--tc),.25) 9deg 12deg,transparent 12deg 18deg)}
.cel-heroes{position:absolute;inset:0;pointer-events:none}
.ch{position:absolute;bottom:-4%;left:50%;width:auto;filter:drop-shadow(0 0 30px rgba(255,200,90,.65));opacity:0;transition:opacity .6s,transform .8s cubic-bezier(.2,1.4,.4,1)}
.ch-bully{height:min(74vh,720px);transform:translate(-50%,18%)}
.ch-golden{height:min(64vh,620px);transform:translate(-120%,22%)}
.ch-poodle{height:min(64vh,620px);transform:translate(20%,22%)}
.cel .ch-bully{opacity:1;transform:translate(-50%,0)}
.cel[data-tier] .ch-golden{opacity:1;transform:translate(-112%,4%)}
.cel[data-tier="4"] .ch-poodle,.cel[data-tier="5"] .ch-poodle{opacity:1;transform:translate(12%,4%)}
.cel[data-tier="5"] .ch{filter:drop-shadow(0 0 40px rgba(255,220,120,.95)) drop-shadow(0 0 80px rgba(255,120,210,.5))}
@media (min-aspect-ratio:5/4){.ch-golden{transform:translate(-170%,22%)}.ch-poodle{transform:translate(70%,22%)}
  .cel[data-tier] .ch-golden{transform:translate(-160%,4%)}.cel[data-tier="4"] .ch-poodle,.cel[data-tier="5"] .ch-poodle{transform:translate(60%,4%)}}
.cel-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cel-ring{position:absolute;left:50%;top:46%;width:40vmin;height:40vmin;margin:-20vmin 0 0 -20vmin;border-radius:50%;opacity:0;pointer-events:none;box-shadow:0 0 0 6px rgba(255,236,170,.9),0 0 40px 10px rgba(var(--tc),.8)}
.cel-ring.go{animation:shock .9s ease-out}
@keyframes shock{0%{opacity:1;transform:scale(.2)}100%{opacity:0;transform:scale(3.2)}}
.cel-flash{position:absolute;inset:0;background:#fff4cc;opacity:0;pointer-events:none;mix-blend-mode:screen}
.cel-flash.go{animation:cflash .55s ease-out}
@keyframes cflash{0%{opacity:.85}100%{opacity:0}}
.cel-center{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 12px;margin-top:-6vh}
.cel-logo{width:min(56vw,260px);margin-bottom:4px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}
.cel-title{margin:0;font-weight:900;text-transform:uppercase;line-height:.95;font-size:clamp(38px,11vw,96px);letter-spacing:-.01em;
  background:linear-gradient(100deg,#fff6cf 0%,#ffd66b 22%,#c98612 40%,#fff3c0 50%,#e6a630 60%,#ffe08a 80%,#fff6cf 100%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #3a2304) drop-shadow(0 0 22px rgba(var(--tc),.75));animation:metal 2.4s linear infinite}
@keyframes metal{to{background-position:-220% 0}}
.cel-title.up{animation:metal 2.4s linear infinite,titleUp .6s cubic-bezier(.2,1.8,.4,1)}
@keyframes titleUp{0%{transform:scale(.4) rotate(-4deg);opacity:0}60%{transform:scale(1.18)}100%{transform:scale(1)}}
.cel[data-tier="5"] .cel-title{font-size:clamp(34px,10vw,92px)}
.cel-plate{max-width:calc(100vw - 24px);margin-top:10px;padding:8px 20px;border-radius:20px;background:linear-gradient(180deg,rgba(18,36,92,.92),rgba(4,10,32,.95));
  box-shadow:0 0 0 2px #3a2405,0 0 0 4px #f2c75a,0 0 0 6px #6e470b,0 0 40px rgba(var(--tc),.6),inset 0 0 24px rgba(80,140,255,.25)}
.cel-amount{white-space:nowrap;font-weight:900;font-size:clamp(28px,9.4vw,84px);line-height:1.05;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #2a1702)}
.cel-amount.tick{animation:tick .12s}
@keyframes tick{50%{transform:scale(1.04)}}
.cel-amount.done{animation:slam .5s cubic-bezier(.2,1.8,.4,1)}
@keyframes slam{0%{transform:scale(1.35)}100%{transform:scale(1)}}
.cel-steps{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin:14px 0 0;padding:0}
.cel-steps li{white-space:nowrap;font-size:9.5px;padding:4px 7px!important;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:5px 9px;border-radius:999px;color:rgba(255,255,255,.45);background:rgba(4,10,32,.7);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);transition:.3s}
.cel-steps li.on{color:#2a1702;background:linear-gradient(180deg,#fff0b0,#f2bf48);box-shadow:0 0 14px rgba(255,200,80,.7)}
.cel-btn{margin-top:16px;min-width:220px;opacity:0;pointer-events:none;transition:opacity .3s}
.cel.done .cel-btn{opacity:1;pointer-events:auto}
.cel-hint{margin:8px 0 0;font-size:12px;color:#e8dcc0;text-shadow:0 1px 3px #000}
.screen-game.shake,.cel.shake .cel-center{animation:shake .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(4px,-2px)}30%,50%,70%{transform:translate(-6px,2px)}40%,60%{transform:translate(6px,-1px)}}
.app.calm .cel-rays,.app.calm .cel-title,.app.calm .cel-aurora{animation:none}
.app.calm .shake,.app.calm .cel.shake .cel-center{animation:none}
@media (max-height:500px){.cel-logo{width:160px}.cel-title{font-size:clamp(28px,8vh,56px)}.cel-amount{font-size:clamp(28px,9vh,52px)}.cel-steps{margin-top:8px}.cel-btn{margin-top:8px}}

/* más resplandor en los niveles 1 y 2, contraluz dorado detrás de los héroes */
.cel-heroes::before{content:"";position:absolute;left:50%;bottom:-10%;width:120vmin;height:120vmin;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,214,110,.55),rgba(255,170,40,.18) 40%,transparent 66%);animation:breathe 3s ease-in-out infinite}
.cel[data-tier="1"] .cel-rays{background:repeating-conic-gradient(from 0deg,rgba(255,224,130,.34) 0deg 6deg,transparent 6deg 16deg);animation-duration:14s}
.cel[data-tier="1"] .cel-bg{background:radial-gradient(circle at 50% 44%,rgba(255,214,110,.55),rgba(80,50,6,.84) 40%,rgba(4,8,24,.95) 78%)}
.cel[data-tier="2"] .cel-bg{background:radial-gradient(circle at 50% 44%,rgba(255,215,90,.8),rgba(140,82,6,.86) 38%,rgba(20,10,2,.96) 80%)}
@media (max-aspect-ratio:5/4){
  .ch-bully{height:62vh}
  .ch-golden,.ch-poodle{height:48vh}
  .cel[data-tier] .ch-golden{transform:translate(-128%,6%)}
  .cel[data-tier="4"] .ch-poodle,.cel[data-tier="5"] .ch-poodle{transform:translate(30%,6%)}
}

/* ===== Versión casino (servidor): entrada, modo demo, lobby, conexión ===== */
.topbar{grid-template-columns:1fr auto 1fr}
.topbar>.tb-side{justify-self:start;display:flex;gap:8px}
.topbar>.demo-chip{justify-self:end;max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lobby-btn svg rect{fill:none;stroke:var(--gold-300);stroke-width:1.8}
.icon-btn.lobby-btn svg path:first-child{fill:none}
.wel-demo{margin-top:10px;min-height:44px;font-size:15px}
.wel-entry{width:min(100%,340px);display:flex;flex-direction:column;gap:6px;text-align:left;padding:14px 16px;border-radius:14px;background:rgba(5,12,36,.82);box-shadow:0 0 0 1px rgba(233,184,74,.55)}
.wel-entry label{font-size:12px;font-weight:700;color:var(--gold-300);letter-spacing:.04em}
.wel-entry input{min-height:44px;border-radius:10px;border:0;padding:0 12px;font:inherit;font-size:16px;color:#fff;background:#0a1846;box-shadow:inset 0 0 0 2px #2c4f9e;font-weight:700}
.wel-entry input:focus{outline:none;box-shadow:inset 0 0 0 2px #f2bf48}
.wel-entry .btn-gold{margin-top:8px}
.wel-msg{margin:8px 0 0;min-height:1em;font-size:13px;color:#ffd6a0;max-width:340px}
.wel-msg:empty{display:none}
.seg-modo{grid-template-columns:repeat(2,1fr)}
.app.offline .status{color:#ffd6a0}
@media (min-aspect-ratio:5/4) and (max-height:500px){
  .topbar{grid-template-columns:auto 1fr auto}
  .topbar>.tb-side{gap:4px}
  .topbar>.tb-side .icon-btn{width:34px;height:34px}
}

/* ===================== v13 · Héroes vivos ===================== */
/* el Golden (o el Bully en el bono) que se suma desde Gs. 10.000 */
.ally{grid-area:top;position:relative;width:100%;height:100%;z-index:2;pointer-events:none;opacity:0;visibility:hidden;transform:translateX(-26%);
  transition:opacity .4s,transform .75s cubic-bezier(.2,1.25,.4,1),visibility 0s .75s}
.app.duo .ally{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .75s cubic-bezier(.2,1.25,.4,1),visibility 0s}
.ally.instant{transition:none}
.ally-img{position:absolute;left:29%;bottom:calc(var(--cell) * -1.4);height:calc(80% + var(--cell)*1.7);width:auto;max-height:none;transform:translateX(-50%) scaleX(-1);transform-origin:50% 100%;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(255,200,90,.4))}
.ally::before{content:"";position:absolute;left:29%;bottom:-6%;width:min(120%,560px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;pointer-events:none;opacity:0;transition:opacity .6s;
  background:radial-gradient(circle,rgba(255,232,150,.8),rgba(255,176,40,.35) 38%,transparent 66%)}
.app.duo[data-mood="2"] .ally::before{opacity:.55}
.app.duo[data-mood="3"] .ally::before{opacity:.75}
.app.duo[data-mood="4"] .ally::before,.app.duo[data-mood="5"] .ally::before,.app.duo[data-mood="6"] .ally::before{opacity:1}
.ally-bully{display:none}
.app.night .ally-golden{display:none}
.app.night .ally-bully{display:block}
.ally-bolt{position:absolute;left:29%;top:-25%;bottom:4%;width:46%;transform:translateX(-50%);pointer-events:none;opacity:0;filter:drop-shadow(0 0 10px #bfe6ff) drop-shadow(0 0 26px #6fb8ff)}
.ally-bolt::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#fff,#cdeaff 60%,#8fc8ff);
  clip-path:polygon(56% 0,63% 0,52% 34%,62% 35%,45% 70%,55% 71%,38% 100%,44% 64%,35% 63%,47% 31%,38% 30%)}
.ally-bolt.go{animation:allybolt .75s ease-out}
@keyframes allybolt{0%{opacity:0}8%{opacity:1}22%{opacity:.25}34%{opacity:1}100%{opacity:0}}
.hero{transition:opacity calc(.6s*var(--spd)),transform .6s,left .7s cubic-bezier(.2,1.2,.4,1)}
.app.duo .hero{left:67%}

/* aura y brasas que crecen con el monto */
.hero-aura{position:absolute;left:50%;bottom:-8%;width:min(135%,640px);aspect-ratio:1;transform:translateX(-50%) scale(.5);border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle,rgba(255,232,150,.85),rgba(255,176,40,.42) 36%,rgba(255,150,30,.12) 54%,transparent 66%);transition:opacity .6s,transform .9s cubic-bezier(.2,1.3,.4,1)}
.hero-aura::before{content:"";position:absolute;inset:-12%;border-radius:50%;opacity:0;transition:opacity .6s;
  background:repeating-conic-gradient(from 0deg,rgba(255,240,170,.75) 0deg 4deg,transparent 4deg 13deg);
  -webkit-mask:radial-gradient(circle,#000 8%,transparent 62%);mask:radial-gradient(circle,#000 8%,transparent 62%);animation:rays 16s linear infinite}
.hero-embers{position:absolute;inset:-10% 0 0;pointer-events:none;opacity:0;transition:opacity .6s;
  background-image:radial-gradient(4px 4px at 18% 30%,#fff3c0,rgba(255,200,80,.6) 60%,transparent),radial-gradient(5px 5px at 62% 72%,#ffd166,rgba(255,150,40,.5) 60%,transparent),radial-gradient(5px 5px at 82% 18%,#fff6d0,rgba(255,210,90,.5) 60%,transparent),
    radial-gradient(4px 4px at 36% 86%,#ffcf5a,transparent),radial-gradient(4px 4px at 74% 48%,#ffe08a,transparent),radial-gradient(3px 3px at 48% 10%,#fff,transparent);
  background-size:170px 230px;animation:embers 3.4s linear infinite;-webkit-mask:linear-gradient(to top,#000 35%,transparent 95%);mask:linear-gradient(to top,#000 35%,transparent 95%)}
@keyframes embers{to{background-position:0 -230px}}
.app[data-mood="1"] .hero-aura{opacity:.38;transform:translateX(-50%) scale(.68)}
.app[data-mood="2"] .hero-aura{opacity:.6;transform:translateX(-50%) scale(.84)}
.app[data-mood="3"] .hero-aura{opacity:.78;transform:translateX(-50%) scale(.95)}
.app[data-mood="3"] .hero-aura::before{opacity:.55}
.app[data-mood="4"] .hero-aura{opacity:.9;transform:translateX(-50%) scale(1.05);background:radial-gradient(circle,rgba(255,214,120,.7),rgba(255,110,40,.3) 40%,transparent 66%)}
.app[data-mood="4"] .hero-aura::before{opacity:.8;animation-duration:9s}
.app[data-mood="5"] .hero-aura{opacity:1;transform:translateX(-50%) scale(1.14);background:radial-gradient(circle,rgba(255,240,180,.8),rgba(255,150,210,.3) 42%,transparent 66%)}
.app[data-mood="5"] .hero-aura::before{opacity:1;animation-duration:6s}
.app[data-mood="6"] .hero-aura{opacity:1;transform:translateX(-50%) scale(1.26);background:radial-gradient(circle,rgba(255,250,210,.9),rgba(255,200,90,.4) 34%,rgba(200,120,255,.25) 50%,transparent 68%);animation:auraHue 3s linear infinite}
.app[data-mood="6"] .hero-aura::before{opacity:1;animation-duration:4s}
@keyframes auraHue{to{filter:hue-rotate(360deg)}}
.app[data-mood="3"] .hero-embers{opacity:.55}
.app[data-mood="4"] .hero-embers{opacity:.85;animation-duration:2.3s}
.app[data-mood="5"] .hero-embers,.app[data-mood="6"] .hero-embers{opacity:1;animation-duration:1.6s}
.app[data-mood="2"] .hero,.app[data-mood="2"] .ally-img{filter:drop-shadow(0 10px 22px rgba(0,0,0,.5)) drop-shadow(0 0 14px rgba(255,210,100,.7))}
.app[data-mood="3"] .hero,.app[data-mood="3"] .ally-img{filter:drop-shadow(0 10px 22px rgba(0,0,0,.5)) drop-shadow(0 0 18px rgba(255,205,90,.95)) drop-shadow(0 0 36px rgba(255,180,60,.45))}
.app[data-mood="4"] .hero,.app[data-mood="4"] .ally-img{filter:drop-shadow(0 10px 22px rgba(0,0,0,.5)) drop-shadow(0 0 20px rgba(255,170,60,1)) drop-shadow(0 0 44px rgba(255,120,30,.6))}
.app[data-mood="5"] .hero,.app[data-mood="5"] .ally-img,.app[data-mood="6"] .hero,.app[data-mood="6"] .ally-img{filter:drop-shadow(0 10px 22px rgba(0,0,0,.45)) drop-shadow(0 0 28px rgba(255,225,130,.95)) drop-shadow(0 0 56px rgba(255,130,210,.45))}

/* reposo: respira y se balancea; con premios grandes, jadea de emoción */
.hero.idle{animation:breathe 4.2s ease-in-out infinite,sway 7s ease-in-out infinite}
.ally-img{animation:breathe 3.7s ease-in-out infinite,sway 6.2s ease-in-out infinite reverse}
:where(.app[data-mood="4"],.app[data-mood="5"],.app[data-mood="6"]) .hero.idle,:where(.app[data-mood="4"],.app[data-mood="5"],.app[data-mood="6"]) .ally-img{animation:pant .85s ease-in-out infinite,sway 2.4s ease-in-out infinite}
@keyframes sway{0%,100%{rotate:-.7deg}50%{rotate:.7deg}}
@keyframes pant{0%,100%{scale:1 1;translate:0 0}50%{scale:1.012 1.032;translate:0 -1.2%}}

/* reacciones (van después del reposo para ganarle) */
.hero.ready,.ally-img.ready{animation:ready calc(.55s*var(--spd)) ease-out}
@keyframes ready{0%{scale:1 1}35%{scale:1.035 .955;translate:0 1.6%;rotate:-1deg}100%{scale:1 1;translate:0 0;rotate:0deg}}
.hero.cheer,.ally-img.cheer{animation:cheer calc(.7s*var(--spd)) ease-out}
.hero.hop,.ally-img.hop{animation:hop calc(.8s*var(--spd)) cubic-bezier(.3,.7,.4,1)}
@keyframes hop{0%{translate:0 0;scale:1 1}18%{translate:0 1.5%;scale:1.05 .93}45%{translate:0 -6%;scale:.96 1.06;rotate:-1.5deg}70%{translate:0 0;scale:1.06 .94;rotate:.5deg}85%{scale:.99 1.02}100%{translate:0 0;scale:1 1;rotate:0deg}}
.hero.roar,.ally-img.roar{animation:roar calc(1.1s*var(--spd)) ease-out}
@keyframes roar{0%{translate:0 0;scale:1 1}15%{translate:0 2%;scale:1.06 .92}35%{translate:0 -8%;scale:.95 1.08;rotate:-3deg}
  50%{translate:0 -6.5%;rotate:3deg;filter:brightness(1.18) drop-shadow(0 0 26px rgba(255,210,100,.95))}68%{translate:0 0;scale:1.08 .92;rotate:0deg}80%{scale:.98 1.03;translate:0 -2%}100%{translate:0 0;scale:1 1}}
.hero.rage,.ally-img.rage{animation:rage calc(1.7s*var(--spd)) ease-in-out}
@keyframes rage{0%{translate:0 0;scale:1 1}10%{translate:0 2%;scale:1.06 .92}24%{translate:0 -8%;scale:.94 1.09;rotate:-4deg}36%{translate:0 0;scale:1.08 .92;rotate:2deg}
  46%{translate:0 2%;scale:1.05 .94}60%{translate:0 -10%;scale:.94 1.1;rotate:4deg;filter:brightness(1.25) drop-shadow(0 0 34px rgba(255,220,120,1))}74%{translate:0 0;scale:1.09 .91;rotate:-1deg}86%{translate:0 -3%;scale:.98 1.03}100%{translate:0 0;scale:1 1;rotate:0deg}}
.hero.triumph,.ally-img.triumph{animation:triumph 1.6s ease-in-out 2}
.hero-golden.charge{animation:charge calc(.55s*var(--spd)) ease-in forwards}
.hero-golden.strike{animation:strike calc(.45s*var(--spd)) cubic-bezier(.2,1.6,.4,1)}
.hero.act-flex,.ally-img.act-flex{animation:aflex 1.6s ease-in-out}
@keyframes aflex{0%,100%{scale:1 1}30%,55%{scale:1.05 .985;filter:brightness(1.12) drop-shadow(0 10px 22px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(255,214,120,.75))}78%{scale:1.012 1}}
.hero.act-nod,.ally-img.act-nod{animation:anod 1.3s ease-in-out}
@keyframes anod{30%{rotate:-2.2deg;translate:0 .6%}60%{rotate:1.2deg}100%{rotate:0deg;translate:0 0}}
.hero.act-look,.ally-img.act-look{animation:alook 2.3s ease-in-out}
@keyframes alook{25%,70%{translate:-2.4% 0;rotate:-1.4deg}100%{translate:0 0;rotate:0deg}}
.hero.act-stomp,.ally-img.act-stomp{animation:astomp .8s cubic-bezier(.3,.7,.4,1)}
@keyframes astomp{20%{translate:0 1%;scale:1.03 .96}45%{translate:0 -3%;scale:.98 1.03}70%{translate:0 0;scale:1.04 .96}100%{translate:0 0;scale:1 1}}
.app.calm .ally-img{animation:none}

/* pantalla de premio: el Golden desde el primer nivel, los héroes bailan más fuerte en cada nivel */
.cel[data-tier="1"]{--amp:2.2%;--rot:1deg;--chd:1.35s}
.cel[data-tier="2"]{--amp:3.2%;--rot:1.6deg;--chd:1.15s}
.cel[data-tier="3"]{--tc:255,120,50;--amp:4.4%;--rot:2.4deg;--chd:.98s}
.cel[data-tier="4"]{--amp:5.4%;--rot:3deg;--chd:.85s}
.cel[data-tier="5"]{--amp:6.8%;--rot:4deg;--chd:.72s}
.cel .ch{animation:chdance var(--chd,1.3s) ease-in-out infinite}
.cel .ch-golden{animation-delay:.16s}
.cel .ch-poodle{animation-delay:.32s}
@keyframes chdance{0%,100%{translate:0 0;rotate:0deg;scale:1}22%{translate:0 calc(var(--amp,2%) * -1);rotate:calc(var(--rot,1deg) * -1);scale:.98 1.03}
  48%{translate:0 0;scale:1.03 .97;rotate:0deg}72%{translate:0 calc(var(--amp,2%) * -.6);rotate:var(--rot,1deg);scale:.99 1.02}}
.app.calm .cel .ch{animation:none}
.cel[data-tier="3"] .cel-bg{background:radial-gradient(circle at 50% 44%,rgba(255,196,96,.78),rgba(150,40,8,.86) 38%,rgba(24,4,2,.96) 80%)}
.cel[data-tier="3"] .cel-rays{animation-duration:9s;background:repeating-conic-gradient(from 0deg,rgba(255,206,120,.4) 0deg 5deg,transparent 5deg 11deg,rgba(255,90,40,.24) 11deg 14deg,transparent 14deg 19deg)}
.cel[data-tier="3"] .ch{filter:drop-shadow(0 0 30px rgba(255,150,60,.85))}

/* escritorio: el compañero ocupa la columna izquierda, detrás de los botones */
@media (min-aspect-ratio:5/4){
  .ally{grid-area:feat;transform:translateX(-30%);z-index:0}
  .ally-img{left:52%;bottom:-5%;height:106%}
  .ally-bolt{left:52%;top:-6%;bottom:2%;width:40%}
  .ally::before{left:52%;width:min(150%,720px)}
  .app.duo .hero{left:40%}
  .hero-aura{left:40%;bottom:-6%;width:min(150%,760px)}
}
@media (min-aspect-ratio:5/4) and (max-height:500px){
  .ally-img{height:96%;bottom:-4%;left:50%}
  .ally::before,.ally-bolt{left:50%}
  .app.duo .hero{left:50%}
  .hero-aura{left:50%}
}
/* celular vertical: el Golden entra a la pantalla de premio sin salirse del borde */
@media (max-aspect-ratio:5/4){
  .cel[data-tier="1"] .ch-bully,.cel[data-tier="2"] .ch-bully,.cel[data-tier="3"] .ch-bully{transform:translate(-36%,0)}
  .cel[data-tier="1"] .ch-golden,.cel[data-tier="2"] .ch-golden,.cel[data-tier="3"] .ch-golden{transform:translate(-98%,6%)}
  .cel[data-tier="4"] .ch-golden,.cel[data-tier="5"] .ch-golden{transform:translate(-112%,6%)}
}