/* ---------- Abuela La Furia theme: arena neon, magenta and turquoise, marigold gold ---------- */
@font-face { font-family: 'Bungee'; src: url('fonts/bungee.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'Baloo 2'; src: url('fonts/baloo.woff2') format('woff2'); font-weight: 400 800; font-display: block; }
:root {
  --c-bg: #12031a;
  --c-text: #ffffff;
  --c-accent: #ffd23d;
  --c-accent2: #e0127a;
  --c-glow: rgba(255, 60, 190, .6);
  --c-panel: linear-gradient(#3a0b4e, #1a0526);
  --c-panel-edge: #3ef2ff;
  --c-spin-text: #ffffff;
  --font-display: 'Bungee', Impact, sans-serif;
  --font-ui: 'Baloo 2', system-ui, sans-serif;
  --spin-grad: radial-gradient(circle at 35% 30%, #ff9be0, #ff3cbe 45%, #a0087a 85%);
  --buy-grad: linear-gradient(#18c7cf, #0a6a85);
  --bar-bg: linear-gradient(#2a0838 0%, #12031a 100%);
  --fs-bg: linear-gradient(#e0127a, #7a0a52);
  --sheet-bg: linear-gradient(#2a0838, #12031a);
  --loader-bg: radial-gradient(circle at 50% 40%, #5a0f6e, #12031a 70%);
  --intro-bg: radial-gradient(circle at 50% 30%, rgba(90, 15, 110, .9), rgba(14, 2, 20, .96) 75%);
}
.theme-mex .hud-value { font-weight: 800; }
.theme-mex .hud-label { font-weight: 800; }
.theme-mex .intro-card span { font-weight: 600; }
.theme-mex .hud-buy span { font-size: 15px; }
/* ---------- shared slot shell. Theme variables are set per game at the bottom of style.css ---------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--c-bg); color: var(--c-text); font-family: var(--font-ui); user-select: none; }
#app { position: fixed; inset: 0; }
#app canvas { display: block; position: absolute; inset: 0; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { opacity: .45; cursor: default; }

/* loader */
#loader { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4vh; background: var(--loader-bg); z-index: 30; transition: opacity .5s; }
#loader img { width: min(70vw, 520px); filter: drop-shadow(0 8px 24px rgba(0,0,0,.6)); }
#loader.done { opacity: 0; pointer-events: none; }
.loader-bar { width: min(60vw, 380px); height: 14px; border-radius: 10px; background: rgba(0,0,0,.5); border: 2px solid var(--c-panel-edge); overflow: hidden; }
.loader-bar i { display: block; height: 100%; width: 0; background: var(--spin-grad); transition: width .2s; }

/* intro */
#intro { position: fixed; inset: 0; z-index: 25; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 3vh; padding: 4vh 4vw; background: var(--intro-bg); }
#intro.show { display: flex; }
.intro-body { display: flex; flex-direction: column; align-items: center; gap: 3vh; max-width: 1100px; width: 100%; }
.intro-logo { width: min(80vw, 560px); filter: drop-shadow(0 10px 30px rgba(0,0,0,.7)); }
.intro-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2vw; width: 100%; }
.intro-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 18px 14px; border-radius: 18px; background: var(--c-panel); border: 3px solid var(--c-panel-edge); box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.15); }
.intro-card img { height: 110px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.intro-card > div { display: flex; flex-direction: column; gap: 6px; align-items: inherit; }
.intro-card b { font-family: var(--font-display); font-size: 22px; color: var(--c-accent); letter-spacing: .5px; }
.intro-card span { font-size: 14px; line-height: 1.35; opacity: .9; }
.intro-play { font-family: var(--font-display); font-size: 34px; padding: 14px 70px; border-radius: 60px; background: var(--spin-grad); color: var(--c-spin-text); border: 4px solid var(--c-panel-edge); box-shadow: 0 8px 0 rgba(0,0,0,.35), 0 0 40px var(--c-glow); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.06); } }
body.portrait .intro-cards { grid-template-columns: 1fr; gap: 12px; }
body.portrait .intro-card { flex-direction: row; text-align: left; padding: 10px 14px; }
body.portrait .intro-card img { height: 64px; width: 64px; }
body.portrait .intro-card > div { display: flex; flex-direction: column; gap: 6px; align-items: inherit; }
.intro-card b { font-size: 17px; }
body.portrait .intro-card span { font-size: 12.5px; }
body.portrait .intro-card > div { display: flex; flex-direction: column; }

/* hud */
.hud { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-bar { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.6vw, 26px); padding: 10px clamp(10px, 2vw, 30px) calc(10px + env(safe-area-inset-bottom)); background: var(--bar-bg); border-top: 3px solid var(--c-panel-edge); box-shadow: 0 -10px 30px rgba(0,0,0,.45); }
.hud-group { display: flex; align-items: center; gap: 10px; }
.hud-field { display: flex; flex-direction: column; align-items: center; min-width: 120px; }
.hud-label { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--c-accent); opacity: .85; }
.hud-value { font-family: var(--font-ui); font-size: 22px; color: var(--c-text); text-shadow: 0 2px 0 rgba(0,0,0,.5); white-space: nowrap; }
.hud-win { color: var(--c-accent); }
.hud-betrow { display: flex; align-items: center; gap: 8px; }
.hud-step { width: 32px; height: 32px; border-radius: 50%; font-size: 22px; line-height: 1; background: var(--c-panel); border: 2px solid var(--c-panel-edge); color: var(--c-accent); }
.hud-icon { position: relative; width: 48px; height: 48px; border-radius: 50%; background: var(--c-panel); border: 2px solid var(--c-panel-edge); color: var(--c-text); display: grid; place-items: center; }
.hud-icon svg { width: 24px; height: 24px; }
.hud-icon.on { color: var(--c-bg); background: var(--c-accent); }
.hud-auto[data-count]:not([data-count=""])::after { content: attr(data-count); position: absolute; top: -6px; right: -6px; font-size: 11px; background: var(--c-accent2); color: #fff; border-radius: 10px; padding: 1px 5px; }
.hud-spin { width: 88px; height: 88px; border-radius: 50%; background: var(--spin-grad); color: var(--c-spin-text); border: 4px solid var(--c-panel-edge); box-shadow: 0 6px 0 rgba(0,0,0,.4), 0 0 26px var(--c-glow); display: grid; place-items: center; transition: transform .1s; margin-top: -26px; }
.hud-spin svg { width: 48px; height: 48px; }
.hud-spin:active { transform: scale(.93); }
.hud[data-state="spinning"] .hud-spin svg { animation: none; }
.hud[data-state="idle"] .hud-spin svg { animation: spin-idle 6s linear infinite; }
@keyframes spin-idle { to { transform: rotate(360deg); } }
.hud-buy { position: fixed; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-display); color: var(--c-spin-text); background: var(--buy-grad); border: 3px solid var(--c-panel-edge); border-radius: 18px; padding: 8px 18px; box-shadow: 0 6px 0 rgba(0,0,0,.4); line-height: 1.05; }
.hud-buy span { font-size: 18px; }
.hud-buy small { font-family: var(--font-ui); font-size: 14px; opacity: .9; }
.hud.in-fs .hud-buy { display: none; }
.hud-fs { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px; margin: 0 auto 8px; width: max-content; max-width: 96vw; border-radius: 30px; background: var(--fs-bg); border: 2px solid var(--c-panel-edge); font-family: var(--font-display); font-size: 16px; color: var(--c-text); }
.hud-fs b { color: var(--c-accent); font-size: 22px; font-family: var(--font-ui); }
.hud-fs i { width: 2px; height: 22px; background: var(--c-panel-edge); opacity: .5; }
.hud-toast { position: fixed; left: 50%; top: 14vh; transform: translateX(-50%); font-family: var(--font-display); font-size: 26px; color: var(--c-accent); text-shadow: 0 3px 0 rgba(0,0,0,.6), 0 0 18px var(--c-glow); opacity: 0; pointer-events: none; white-space: nowrap; }
.hud-modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 40; }
.hud-sheet { position: relative; width: min(760px, 94vw); max-height: 86vh; overflow: auto; padding: 22px 26px; border-radius: 20px; background: var(--sheet-bg); border: 3px solid var(--c-panel-edge); user-select: text; }
.hud-sheet h2 { font-family: var(--font-display); color: var(--c-accent); margin: 18px 0 6px; font-weight: normal; }
.hud-sheet h2:first-of-type { margin-top: 0; }
.hud-sheet p { line-height: 1.45; margin: 6px 0; }
.hud-sheet .muted { opacity: .7; font-size: 14px; }
.hud-close { position: absolute; top: 10px; right: 14px; font-size: 32px; color: var(--c-accent); }
table.pays { width: 100%; border-collapse: collapse; }
table.pays td, table.pays th { padding: 4px 8px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.08); }
table.pays td:nth-child(2) { text-align: left; }
table.pays img { width: 54px; height: 54px; object-fit: contain; }
table.pays i.rank { font-style: normal; font-family: var(--font-display); font-size: 26px; color: var(--c-accent); }

/* landscape: buy button sits left of the bar */
body:not(.portrait) .hud-buy { left: 22px; bottom: 120px; }
/* portrait: compact two-row bar */
body.portrait .hud-bar { flex-wrap: wrap; gap: 8px 14px; padding-top: 10px; }
body.portrait .hud-field { min-width: 0; flex: 1 1 28%; }
body.portrait .hud-left { order: 4; }
body.portrait .hud-right { order: 5; gap: 18px; }
body.portrait .hud-icon { width: 44px; height: 44px; }
body.portrait .hud-value { font-size: 17px; }
body.portrait .hud-label { font-size: 10px; }
body.portrait .hud-spin { width: 84px; height: 84px; margin-top: 0; }
body.portrait .hud-buy { left: 12px; top: 12px; padding: 6px 12px; }
body.portrait .hud-buy span { font-size: 15px; }
/* portrait: the free-spins strip drops its title and tightens so it fits a phone */
body.portrait .hud-fs { font-size: 13px; gap: 7px; padding: 6px 14px; margin-bottom: 6px; }
body.portrait .hud-fs b { font-size: 18px; }
body.portrait .hud-fs .fs-title { display: none; }

.debug { position: fixed; top: 8px; right: 8px; z-index: 50; display: flex; gap: 4px; flex-wrap: wrap; max-width: 300px; }
.debug button { background: rgba(0,0,0,.7); color: #fff; padding: 4px 8px; border-radius: 6px; font: 12px monospace; }