:root{
  --bg1:#1b0830;--bg2:#050208;--accent:#ffcc4a;--accent2:#ff7a1a;--panel:rgba(18,8,28,.82);--line:rgba(255,204,74,.35);
  --ink:#fff6e0;--muted:#cdb88f;
  --sat:env(safe-area-inset-top);--sab:env(safe-area-inset-bottom);--sal:env(safe-area-inset-left);--sar:env(safe-area-inset-right);
  --font:"Avenir Next","Avenir","Helvetica Neue",system-ui,sans-serif;
}
body[data-game=xlink]{--bg1:#5b1790;--bg2:#12041f;--accent:#ffc83d;--accent2:#ff8a1a}
body[data-game=avalanche]{--bg1:#0f4fa3;--bg2:#020a1e;--accent:#bdeeff;--accent2:#4fc3ff;--line:rgba(160,225,255,.4);--muted:#a9cbe6}
body[data-game=firewheel]{--bg1:#8d1b06;--bg2:#140202;--accent:#ffcf4a;--accent2:#ff5a1a}
body[data-game=legion]{--bg1:#6e1418;--bg2:#120304;--accent:#ffd77a;--accent2:#d99a2b}
body[data-game=bull]{--bg1:#7a4a12;--bg2:#160a02;--accent:#ffd36a;--accent2:#e08a1a}
body[data-game=dragon]{--bg1:#6a0f3a;--bg2:#12020c;--accent:#ffc27a;--accent2:#ff4a3a}
body[data-game=codex]{--bg1:#7a3a12;--bg2:#0c1a06;--accent:#ffcf6a;--accent2:#ff8a2a}
body[data-game=reddream]{--bg1:#9a0c12;--bg2:#1e0204;--accent:#ffd06a;--accent2:#ff3a2a}
body[data-game=snowking]{--bg1:#1f5ea8;--bg2:#030c24;--accent:#e6f6ff;--accent2:#7fc8ff;--line:rgba(170,225,255,.4);--muted:#b8d8ee}
body[data-game=western]{--bg1:#5a2a3a;--bg2:#12060a;--accent:#ffcf7a;--accent2:#e07a2a}
body[data-game=galaxy]{--bg1:#2a1a6a;--bg2:#03020f;--accent:#d8c8ff;--accent2:#8a5aff;--line:rgba(190,170,255,.4);--muted:#b8b0e0}
body[data-game=reef]{--bg1:#0a5a86;--bg2:#021a2e;--accent:#9ff0ff;--accent2:#3ec9d6;--line:rgba(160,235,255,.4);--muted:#a9d8e6}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:#050208}
body{color:var(--ink);font-family:var(--font);-webkit-user-select:none;user-select:none;-webkit-text-size-adjust:100%;touch-action:manipulation;
  background:radial-gradient(120% 70% at 50% 18%,var(--bg1),var(--bg2) 75%) fixed;transition:background .6s}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer;touch-action:manipulation}
button:disabled{opacity:.35}
svg{width:22px;height:22px;fill:currentColor}

#app{position:fixed;inset:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto auto;
  padding:calc(var(--sat) + 4px) calc(var(--sar) + 8px) calc(var(--sab) + 6px) calc(var(--sal) + 8px);max-width:760px;margin:0 auto}

/* Cabecera */
.top{grid-row:1}.pots{grid-row:2}.board{grid-row:3}.msg{grid-row:4}.hud{grid-row:5}
.top{display:flex;align-items:center;gap:6px;height:44px}
.icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:var(--accent)}
.icon:active{transform:scale(.92)}
.icon.off{color:#6b5a70}
#btnSound .mute{display:none}#btnSound.off .mute{display:inline}#btnSound.off .wave{display:none}
.logo{flex:1;text-align:center;line-height:1.05;min-width:0}
.logo span{display:block;font-weight:900;font-size:clamp(15px,4.6vw,24px);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(#fffbe8,var(--accent) 50%,var(--accent2) 52%,#fff2b8);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.6))}
.logo small{font-size:10px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;white-space:nowrap}

/* Jackpots */
.pots{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);gap:5px;margin:4px 0 6px}
.pots[hidden]{display:none}
.pot{position:relative;border-radius:10px;padding:4px 2px 5px;text-align:center;overflow:hidden;border:2px solid rgba(255,255,255,.35);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -8px 14px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.5)}
.pot b{display:block;font-size:10px;font-weight:900;letter-spacing:.14em;color:rgba(255,255,255,.9)}
.pot strong{display:block;font-size:clamp(13px,3.8vw,21px);font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.5)}
.pot.grand{background:linear-gradient(#ff5b3d,#a40d0d 55%,#5a0303);border-color:#ffd07a}
.pot.grand strong{color:#ffe98a}
.pot.major{background:linear-gradient(#d06cff,#6b10a3 55%,#34054f);border-color:#f3c8ff}
.pot.minor{background:linear-gradient(#48c9ff,#0b5fb3 55%,#062a5c);border-color:#bff0ff}
.pot.mini{background:linear-gradient(#57e67a,#12802e 55%,#063a14);border-color:#caffcf}
.pot::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.45) 50%,transparent 60%);transform:translateX(-120%);animation:sheen 4.5s infinite}
.pot:nth-child(2)::after{animation-delay:.6s}.pot:nth-child(3)::after{animation-delay:1.2s}.pot:nth-child(4)::after{animation-delay:1.8s}
@keyframes sheen{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.pot.hit{animation:pothit .25s 8 alternate}
@keyframes pothit{to{filter:brightness(1.9);transform:scale(1.06)}}

/* Tablero */
.board{position:relative;min-height:0;border-radius:18px}
.board canvas{position:absolute;inset:0;display:block}
.board.shake{animation:shake .45s}
.board.shake2{animation:shake2 .7s}
@keyframes shake{20%{transform:translate(-4px,2px)}40%{transform:translate(4px,-2px)}60%{transform:translate(-3px,1px)}80%{transform:translate(2px,-1px)}}
@keyframes shake2{10%{transform:translate(-8px,4px) rotate(-.6deg)}30%{transform:translate(8px,-4px) rotate(.6deg)}50%{transform:translate(-6px,3px)}70%{transform:translate(5px,-2px)}90%{transform:translate(-2px,1px)}}

.msg{min-height:22px;text-align:center;font-size:12.5px;line-height:1.3;color:var(--muted);padding:3px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg b{color:var(--accent)}

/* HUD */
.hud{min-width:0;background:linear-gradient(rgba(255,255,255,.07),rgba(0,0,0,.35));border:1px solid var(--line);border-radius:18px;padding:6px;box-shadow:0 -4px 20px rgba(0,0,0,.4)}
.meters{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);gap:5px}
.meter{background:#07030c;border:1px solid rgba(255,255,255,.1);border-radius:11px;padding:4px 3px;text-align:center;min-width:0;box-shadow:inset 0 2px 8px rgba(0,0,0,.8)}
.meter span{display:block;font-size:9px;letter-spacing:.14em;color:var(--muted);font-weight:700}
.meter b{display:block;font-size:clamp(14px,4.2vw,20px);font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;color:#fff}
#win{color:var(--accent)}
.meter.bet{display:flex;align-items:center;gap:2px;padding:3px}
.meter.bet>div{flex:1;min-width:0}
.meter.bet button{width:32px;height:36px;border-radius:9px;font-size:22px;font-weight:900;color:#1a0d00;background:linear-gradient(#fff3c0,var(--accent) 55%,#b8741a);box-shadow:0 2px 0 #5a3000}
.meter.bet button:active{transform:translateY(2px);box-shadow:none}
.pulse{animation:mpulse .6s}
@keyframes mpulse{40%{transform:scale(1.12);color:var(--accent)}}

.controls{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-top:10px}
.ctl{flex:1;height:52px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;
  background:linear-gradient(#3a2a44,#140a1b);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 3px 0 rgba(0,0,0,.6)}
.ctl b{font-size:15px;font-weight:900;line-height:1;color:#fff}
.ctl small{font-size:8.5px;letter-spacing:.08em;color:var(--muted);margin-top:3px;white-space:nowrap}
.ctl:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.ctl.on{background:linear-gradient(#ffe38a,#d88a14);border-color:#fff0b0}.ctl.on b,.ctl.on small{color:#2a1400}
.ctl.extra{background:linear-gradient(#ff6ad5,#7a0a88);border-color:#ffc6f2}.ctl.extra small{color:#ffe0f6}
.spin{position:relative;flex:0 0 auto;width:84px;height:84px;margin:-10px 2px 0;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 30%,#fffbe0,var(--accent) 38%,var(--accent2) 72%,#6a2a00);
  box-shadow:0 0 0 4px #2a1400,0 0 0 6px var(--accent),0 6px 0 3px #3a1a00,0 0 28px rgba(255,190,60,.55);color:#2a1100}
.spin span#spinLabel{font-weight:900;font-size:16px;letter-spacing:.04em;position:relative}
.spin small{font-size:8.5px;font-weight:800;position:relative;min-height:10px}
.spin .ring{position:absolute;inset:6px;border-radius:50%;border:2px dashed rgba(60,25,0,.45)}
.spin:active{transform:translateY(3px) scale(.97);box-shadow:0 0 0 4px #2a1400,0 0 0 6px var(--accent),0 2px 0 3px #3a1a00}
body.busy .spin .ring{animation:rot 1s linear infinite}
body:not(.busy) .spin{animation:breathe 2.2s ease-in-out infinite}
@keyframes rot{to{transform:rotate(360deg)}}
@keyframes breathe{50%{box-shadow:0 0 0 4px #2a1400,0 0 0 6px var(--accent),0 6px 0 3px #3a1a00,0 0 44px rgba(255,200,80,.9)}}
#btnExtra[hidden]{display:none}
body.busy #btnExtra,body.busy #btnInfo{opacity:.4}
.install{display:block;margin:16px auto 0;padding:12px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#ffe9a8;font-weight:800;font-size:14px}
@media (display-mode:standalone){.install{display:none}}

/* FX */
#fx{position:fixed;inset:0;pointer-events:none;z-index:20}

/* Lobby */
.lobby{position:fixed;inset:0;z-index:30;background:radial-gradient(120% 80% at 50% 0%,#3a1250,#07020d 70%);display:none;overflow:auto;-webkit-overflow-scrolling:touch;
  padding:calc(var(--sat) + 10px) calc(var(--sar) + 14px) calc(var(--sab) + 14px) calc(var(--sal) + 14px)}
.lobby.open{display:block;animation:fadein .35s}
@keyframes fadein{from{opacity:0}}
.lobby-inner{max-width:820px;margin:0 auto}
.lobby-head{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:900;font-size:26px;letter-spacing:.2em;color:#fff}.brand span{color:#ffc83d}
.lobby-sub{color:#cdb88f;font-size:13px;margin:4px 0 14px}
.lobby-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.card{position:relative;text-align:left;border-radius:20px;padding:12px;min-height:220px;overflow:hidden;display:flex;flex-direction:column;
  background:radial-gradient(120% 90% at 50% 0%,var(--c1),var(--c2) 70%);border:2px solid rgba(255,255,255,.3);box-shadow:0 8px 24px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.35)}
.card:active{transform:scale(.97)}
.card .icons{display:flex;justify-content:center;margin:2px 0 8px;height:80px}
.card .icons i{width:72px;height:72px;margin:0 -12px;background:url(../assets/symbols.webp) no-repeat;background-size:600% 500%;filter:drop-shadow(0 6px 8px rgba(0,0,0,.6))}
.card .icons i.art{border-radius:12px;box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.card .icons i:nth-child(2){width:84px;height:84px;margin-top:-6px;z-index:1}
.card b{font-size:18px;font-weight:900;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.6)}
.card em{font-style:normal;font-size:11px;font-weight:800;color:#ffe9a8;letter-spacing:.04em;margin:3px 0 5px;text-transform:uppercase}
.card small{font-size:12px;line-height:1.35;color:rgba(255,255,255,.85)}
.fine{font-size:11px;color:#8b7a8f;text-align:center;margin-top:14px}

/* Hoja */
.sheet{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.6);display:none;align-items:flex-end;justify-content:center}
.sheet.open{display:flex;animation:fadein .2s}
.sheet-card{width:100%;max-width:640px;max-height:86vh;display:flex;flex-direction:column;background:linear-gradient(#24122e,#0d0612);border:1px solid var(--line);border-bottom:0;border-radius:22px 22px 0 0;
  padding:14px 16px calc(var(--sab) + 16px);animation:up .28s cubic-bezier(.2,.9,.3,1.1)}
@keyframes up{from{transform:translateY(40%)}}
.sheet-head{display:flex;align-items:center;justify-content:space-between}
.sheet-head h2{margin:0;font-size:21px;color:var(--accent)}
.sheet-body{overflow:auto;-webkit-overflow-scrolling:touch;font-size:14px;line-height:1.5;color:#e9dcc6;-webkit-user-select:text;user-select:text}
.sheet-body h3{font-size:14px;color:var(--accent);margin:14px 0 4px;letter-spacing:.04em}
.sheet-body ul,.sheet-body ol{padding-left:18px;margin:4px 0}
.sheet-body li{margin:4px 0}
.sheet-body table{width:100%;border-collapse:collapse;font-size:13px}
.sheet-body td{padding:4px 3px;border-bottom:1px solid rgba(255,255,255,.08);vertical-align:middle}
.sheet-body td:last-child{text-align:right;font-variant-numeric:tabular-nums;color:#fff}
.ico{display:inline-block;width:34px;height:34px;background:url(../assets/symbols.webp) no-repeat;background-size:600% 500%;vertical-align:middle}
img.ico{background:none;object-fit:contain}
.ico.bar{background:#3a1690;color:#fff;font-style:normal;font-weight:900;font-size:10px;line-height:34px;text-align:center;border-radius:6px}
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:8px;margin-top:10px}
.choices button{height:50px;border-radius:12px;font-weight:900;font-size:17px;color:#2a1400;background:linear-gradient(#fff3c0,var(--accent) 55%,#b8741a)}
.kbd{display:inline-block;border:1px solid #777;border-radius:5px;padding:0 5px}

/* Carga */
#loader{position:fixed;inset:0;z-index:50;background:#07020d;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;transition:opacity .4s}
#loader.gone{opacity:0;pointer-events:none}
#loader .bar{width:160px;height:4px;border-radius:2px;background:#2a1a30;overflow:hidden}
#loader .bar i{display:block;height:100%;width:40%;background:#ffc83d;animation:load 1s infinite}
@keyframes load{from{transform:translateX(-100%)}to{transform:translateX(250%)}}

@media (max-width:360px){.meter.bet button{width:24px;height:32px;font-size:18px}.meter span{letter-spacing:.06em}.meter b{font-size:14px}}
/* Pantallas bajas (iPhone SE) */
@media (max-height:700px){
  .top{height:38px}.icon{width:36px;height:36px}
  .pot b{font-size:8.5px}.pot{padding:2px}
  .ctl{height:46px}.spin{width:74px;height:74px;margin-top:-6px}
}
/* iPad vertical */
@media (min-width:700px) and (min-height:900px){
  #app{max-width:900px}
  .pot strong{font-size:28px}.pot b{font-size:13px}
  .meter b{font-size:26px}.meter span{font-size:11px}
  .ctl{height:66px}.ctl b{font-size:19px}.ctl small{font-size:10px}
  .spin{width:108px;height:108px;margin-top:-14px}.spin span#spinLabel{font-size:21px}
  .msg{font-size:15px;min-height:28px}
}
/* Horizontal: tablero a la izquierda, controles a la derecha */
/* Diseño horizontal */
body.layout-h #app{max-width:none;grid-template-columns:minmax(0,1fr) minmax(250px,31%);grid-template-rows:auto auto minmax(0,1fr) auto;column-gap:12px}
body.layout-h .top{grid-column:1}
body.layout-h .pots{grid-column:1}
body.layout-h .board{grid-column:1;grid-row:3/5}
body.layout-h .msg{grid-column:2;grid-row:1;align-self:center;white-space:normal;max-height:44px}
body.layout-h .hud{grid-column:2;grid-row:2/5;align-self:end;max-height:100%;overflow:hidden}
body.layout-h .meters{grid-template-columns:1fr;gap:6px}
body.layout-h .controls{flex-wrap:wrap;justify-content:center}
body.layout-h .controls .ctl{flex:1 1 28%}
body.layout-h .spin{order:-1;margin:4px calc(50% - 45px) 6px}
/* Diseño horizontal */
@media (max-height:500px){
body.layout-h .top{height:34px}
body.layout-h .icon{width:32px;height:32px}
body.layout-h .logo small{display:none}
body.layout-h .pots{margin:2px 0}
body.layout-h .pot b{font-size:8px}
body.layout-h .pot strong{font-size:13px}
body.layout-h .meter{padding:2px}
body.layout-h .meter b{font-size:15px}
body.layout-h .ctl{height:40px}
body.layout-h .spin{width:70px;height:70px}
}
@media (prefers-reduced-motion:reduce){.pot::after,body:not(.busy) .spin{animation:none}}

/* Botones de cabecera */
.top .icon{flex:0 0 auto}
#btnTheme .moon{display:none}
body.light #btnTheme .moon{display:inline}body.light #btnTheme .sun{display:none}
#btnTheme.on{background:rgba(255,236,170,.25)}
#speedVal{font-size:13px}

/* Ajustes */
.set{display:block;margin:14px 0}
.set label,.set>span{display:flex;justify-content:space-between;font-weight:700;color:#fff;margin-bottom:6px}
.set output{color:var(--accent);font-weight:900}
.set input[type=range]{width:100%;height:34px;-webkit-appearance:none;appearance:none;background:transparent}
.set input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--accent2),var(--accent))}
.set input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--accent) 60%,#8a5a10);box-shadow:0 2px 6px rgba(0,0,0,.6)}
.set-scale{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.set.switch{display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.set.switch input{display:none}
.set.switch i{position:relative;width:52px;height:30px;border-radius:15px;background:#3a2a44;transition:background .2s}
.set.switch i::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .2s}
.set.switch input:checked+i{background:var(--accent2)}
.set.switch input:checked+i::after{transform:translateX(22px)}

/* Modo claro */
body.light{background:radial-gradient(120% 70% at 50% 18%,#fff6e6,color-mix(in srgb,var(--bg1) 35%,#f3e6d6) 80%) fixed;--muted:#6a5540}
body.light .logo span{filter:drop-shadow(0 1px 0 rgba(90,50,0,.6))}
body.light .logo small,body.light .msg{color:#5a4632}
body.light .msg b{color:color-mix(in srgb,var(--accent2) 70%,#000)}
body.light .icon{background:rgba(255,255,255,.7);border-color:rgba(120,80,30,.25);color:color-mix(in srgb,var(--accent2) 75%,#000)}
body.light .hud{background:linear-gradient(#fffaf0,#ecdcc3);border-color:rgba(140,100,40,.4);box-shadow:0 -4px 16px rgba(80,50,10,.18)}
body.light .meter{background:#fffdf7;border-color:rgba(140,100,40,.3);box-shadow:inset 0 2px 6px rgba(80,50,10,.15)}
body.light .meter b{color:#2a1a08}
body.light #win{color:color-mix(in srgb,var(--accent2) 80%,#000)}
body.light .ctl{background:linear-gradient(#fff,#e9dcc8);border-color:rgba(120,80,30,.25);box-shadow:inset 0 1px 0 #fff,0 3px 0 rgba(90,60,20,.3)}
body.light .ctl b{color:#2a1a08}
body.light .ctl.extra b,body.light .ctl.on b{color:#fff}
body.light .ctl.extra{background:linear-gradient(#ff6ad5,#a3129c)}
body.light .ctl.on{background:linear-gradient(#ffcf4a,#d07a10)}
.top{gap:4px}
.top .icon{width:36px;height:36px;border-radius:11px}
.top .icon svg{width:19px;height:19px}
.logo small{display:block;overflow:hidden;text-overflow:ellipsis;font-size:9px;letter-spacing:.08em}
@media (min-width:600px){.top .icon{width:42px;height:42px}.top .icon svg{width:22px;height:22px}.logo small{font-size:11px}}
.surprise{background:rgba(120,210,255,.12);border:1px solid rgba(120,210,255,.4);border-radius:12px;padding:8px 10px;margin:8px 0}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:6px 0 10px}.gallery figure{margin:0;text-align:center}.gallery img{width:100%;max-width:72px;display:block;margin:0 auto}.gallery figcaption{font-size:10px;color:var(--muted);line-height:1.2}
.ver{margin:18px auto 4px;padding:10px 14px;max-width:220px;text-align:center;border-radius:14px;border:1.5px solid #e9b949;background:linear-gradient(180deg,rgba(255,215,106,.18),rgba(185,120,20,.12));box-shadow:0 0 14px rgba(255,200,80,.25)}
.ver small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.ver b{display:block;font-size:22px;font-weight:900;color:#ffd76a;text-shadow:0 1px 0 #6b4200}

/* Horizontal (iPad/Mac/iPhone girado): todo centrado y compacto, sin franja vacía al medio */
/* Diseño horizontal */
body.layout-h #app{grid-template-columns:minmax(0,1fr) minmax(250px,310px);grid-template-rows:auto auto minmax(0,1fr);
    max-width:calc(100vh * 0.82 + 340px);margin:0 auto;column-gap:14px}
body.layout-h[data-game=avalanche] #app,body.layout-h[data-game=legion] #app,body.layout-h[data-game=firewheel] #app,body.layout-h[data-game=bull] #app,body.layout-h[data-game=dragon] #app,body.layout-h[data-game=codex] #app,body.layout-h[data-game=reef] #app,body.layout-h[data-game=western] #app,body.layout-h[data-game=galaxy] #app{max-width:calc(100vh * 1.2 + 340px)}
body.layout-h .top,body.layout-h .pots{grid-column:1/-1}
body.layout-h .board{grid-column:1;grid-row:3}
body.layout-h .msg{grid-column:2;grid-row:3;align-self:start;margin-top:8px;max-height:none;white-space:normal}
body.layout-h .hud{grid-column:2;grid-row:3;align-self:end}

/* Botón de diseño: muestra el diseño al que se cambiará */
#btnLayout .lh{display:none}
body.layout-v #btnLayout .lv{display:none}body.layout-v #btnLayout .lh{display:inline}
#btnLayout.on{background:rgba(255,236,170,.2)}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:#140a1b;border-radius:12px;padding:4px}
.seg button{height:40px;border-radius:9px;font-weight:800;font-size:14px;color:var(--muted)}
.seg button.on{background:linear-gradient(#fff3c0,var(--accent) 55%,#b8741a);color:#2a1400}
/* Vertical forzado en pantalla apaisada: columna centrada */
@media (orientation:landscape){body.layout-v #app{max-width:min(760px,calc(100vh * 0.62))}}
@media (max-width:380px){.top .icon{width:32px;height:32px}.top{gap:3px}}

/* Destello del medidor de premio al recibir un rayo */
@keyframes zap{0%{text-shadow:0 0 10px #fff,0 0 22px #8fe0ff;color:#eaffff}100%{text-shadow:none}}
#win.zap{animation:zap .35s ease-out}
.meter:has(#win.zap){animation:zapbox .35s ease-out}
@keyframes zapbox{0%{box-shadow:0 0 18px #8fe0ff,inset 0 0 12px #bff0ff}100%{box-shadow:inset 0 2px 8px rgba(0,0,0,.8)}}
/* Pozo progresivo que sube */
@keyframes potgrow{0%{filter:brightness(1.5);box-shadow:0 0 14px rgba(255,240,180,.8)}100%{filter:none}}
.pot.grow{animation:potgrow .9s ease-out}
body.light .ver b{color:#9a6200;text-shadow:none}

/* Medidor de PREMIO encendido mientras la máquina festeja */
.meter.hot{animation:hotm .32s ease-in-out infinite alternate;border-color:var(--hot,#ffd76a)!important}
.meter.hot #win{text-shadow:0 0 10px var(--hot,#ffd76a),0 0 22px var(--hot,#ffd76a)}
@keyframes hotm{from{box-shadow:0 0 4px var(--hot,#ffd76a),inset 0 0 4px var(--hot,#ffd76a)}to{box-shadow:0 0 22px var(--hot,#ffd76a),inset 0 0 12px var(--hot,#ffd76a);transform:scale(1.04)}}
.vtest{margin-top:8px;width:100%;padding:11px;border-radius:12px;border:1.5px solid #e9b949;background:linear-gradient(180deg,#ffd76a,#c98a1c);color:#3a2400;font-weight:800;font-size:15px}
.set.voice output{font-size:12px;opacity:.8}
.vsel{width:100%;margin:6px 0 10px;padding:10px;border-radius:12px;border:1.5px solid #e9b949;background:#1d1230;color:#ffe9b0;font-size:15px}
body.light .vsel{background:#fff8e6;color:#3a2400}