/* Sistema: At The Point Tragamonedas */
/* Version: 3.9.7 */
/* Fecha/Hora: 2026-03-02 02:58:00 */
/* 
MODIFICACIONES REALIZADAS:
1) Adjusted .casino-name font-size to match .jackpot-text in mobile.
2) Centered .balance-display.
3) In mobile, .audio-controls bottom: 50px.
4) In mobile, .hud margin-top: 10% below line 3.
5) Hide .logo-top-right in mobile.
*/

:root { --ui-scale: 0.60; }
html, body { height: 100%; margin: 0; background: #000; overflow: hidden; font-family: sans-serif; }

.stage {
  height: 100dvh;
  min-height: -webkit-fill-available;
  padding-bottom: env(safe-area-inset-bottom);
  position: relative; width: min(100vw, calc(100vh * (1152/864))); height: min(100vh, calc(100vw * (864/1152))); margin: auto; top: 50%; transform: translateY(-50%); aspect-ratio: 1152 / 864; background: #000; 
}

.casino-name { position: absolute; top: -2%; left: 50%; transform: translateX(-50%); font-family: 'Press Start 2P', cursive; font-size: clamp(14px, 2.5vw, 32px); color: #0ff; text-shadow: 0 0 5px #0ff; z-index: 40; text-align: center; white-space: nowrap; pointer-events: none; }
.jackpot-text { position: absolute; top: 6%; left: 50%; transform: translateX(-50%); font-family: 'Dancing Script', cursive; font-size: clamp(16px, 2.8vw, 38px); color: #FFD700; text-shadow: 0 0 10px #FFD700, 2px 2px 4px #000; z-index: 40; margin: 0; pointer-events: none; white-space: nowrap; }
.balance-display { position: absolute; top: 12%; left: 50%; transform: translateX(-50%); font-family: 'Dancing Script', cursive; font-size: clamp(10px, 1.6vw, 22px); text-shadow: 2px 2px 4px #000; z-index: 40; margin: 0; white-space: nowrap; text-align: center; }

.logo-top-left { position: absolute; top: 3%; left: 3%; width: 15%; z-index: 30; object-fit: contain; pointer-events: none; }
.logo-top-right { position: absolute; top: 3%; right: 3%; width: 15%; z-index: 30; object-fit: contain; pointer-events: none; }

.loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.95); z-index: 9999; }
.loading video { width: 80%; max-width: 800px; border: 4px solid #FFD700; box-shadow: 0 0 30px #FFD700, inset 0 0 20px #FFD700; border-radius: 10px; object-fit: contain; pointer-events: auto; }
.loading.hidden { display: none; }

/* --- Board & Slots --- */
.board { position: absolute; left: 18%; top: 20%; width: 58%; height: 60%; z-index: 10; pointer-events: none; }
.row { position: absolute; left: 0; width: 100%; height: 30%; display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 5%; align-items: center; }
.row.top { top: 0%; } .row.mid { top: 35%; } .row.bottom { top: 70%; }

.slot { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border: 6px solid #FFD700; box-shadow: 0 0 15px #FFD700, inset 0 0 10px #FFD700; box-sizing: border-box; background: rgba(0, 0, 0, 0.8); border-radius: 8px; transition: border-color 0.3s, box-shadow 0.3s; z-index: 1; pointer-events: auto; }

/* Efectos Neon Dinámicos */
.slot.win-neon { border-color: #0f0; box-shadow: 0 0 25px #0f0, inset 0 0 20px #0f0; z-index: 10; }
.slot.lose-neon { border-color: #f00; box-shadow: 0 0 25px #f00, inset 0 0 20px #f00; }
.slot.low-credit { border-color: #0f0; box-shadow: 0 0 20px #0f0, inset 0 0 15px #0f0; }
.slot.ultimo-recurso { border-color: #f00; box-shadow: 0 0 20px #f00, inset 0 0 15px #f00; z-index: 10;}

/* Zoom Effect & Fill - 6 Fases (steps) */
.card { width: 100%; height: 100%; object-fit: fill !important; user-select: none; z-index: 5; transition: transform 0.3s steps(6, end); cursor: pointer; }
.manual-zoom, .epic-zoom { transform: scale(3) !important; z-index: 9999 !important; position: relative; filter: drop-shadow(0 0 20px rgba(255,255,255,0.9)); }

.check-mark { position: absolute; top: -15%; right: -15%; width: 65%; height: auto; object-fit: contain; z-index: 150 !important; display: none; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.8)); }
.winbar { position: absolute; left: -5%; top: 50%; transform: translateY(-50%); width: 110%; height: 80%; object-fit: contain; z-index: 12; display: none; }
.lineNum { position: absolute; right: -13%; top: 50%; transform: translateY(-50%); width: 10%; height: 80%; object-fit: contain; z-index: 13; display: none; }

/* --- Teleprompter Noticias --- */
#newsContainer { position: absolute; top: 81%; left: 0; width: 100%; height: 35px; background: rgba(0,0,0,0.9); border-top: 2px solid #0ff; border-bottom: 2px solid #0ff; z-index: 50; overflow: hidden; display: flex; align-items: center; box-shadow: 0 0 10px #0ff; pointer-events: none;}
#newsContainer.hidden { display: none; }
#newsTicker { white-space: nowrap; font-family: 'Press Start 2P', cursive; color: #0ff; text-shadow: 0 0 10px #0ff; font-size: 14px; position: absolute; left: 100%; }

/* --- Controls (Desktop) --- */
.controls { position: absolute; right: 2%; top: 48%; width: 22%; height: auto; z-index: 20; display: flex; flex-direction: column; gap: 15px; transform: translateY(-50%); }
.btnRow { display: flex; flex-direction: row; gap: 5%; width: 100%; justify-content: space-between; }
.btnBase { width: 47.5%; aspect-ratio: 136/124; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; pointer-events: auto; transition: transform 0.1s; }
.btnBase:active { transform: scale(0.95); }
.btnBase.disabled { opacity: 0.3; pointer-events: none; filter: grayscale(100%); }
.btnImg { width: 100%; height: 100%; object-fit: contain; }

/* Audio Controls */
.audio-controls { position: absolute; left: 2%; top: 22%; width: 12%; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(0, 0, 0, 0.7); padding: 15px 5px; border: 2px solid #FFD700; border-radius: 12px; box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); pointer-events: auto;}
.audio-row { display: flex; gap: 5px; align-items: center; justify-content: center; width: 100%; }
.bgm-btn, .mute-btn, .nav-btn { background: #000; color: #0ff; border: 2px solid #0ff; border-radius: 5px; font-family: 'Press Start 2P', cursive; font-size: 14px; cursor: pointer; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; text-shadow: 0 0 5px #0ff; outline: none; transition: transform 0.1s; }
.nav-btn { width: 30px; font-size: 12px; }
.bgm-btn:active, .mute-btn:active, .nav-btn:active { transform: scale(0.95); }

/* Horizontal Sliders para Desktop */
.slider-container { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 5px; }
.slider-container label { font-size: 9px; color: #0ff; text-align: center; width: 25px;}
.slider-container input[type=range] { width: 65%; cursor: pointer; accent-color: #0ff; height: 10px;}

/* HUD */
.hud { position: absolute; left: 10%; right: 10%; bottom: 2%; height: 12%; z-index: 25; display: flex; align-items: flex-end; justify-content: space-between; gap: 2%; pointer-events: none; }
.hudBox { width: 22%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.hudLabel { color: #d77a39; font-weight: 700; font-family: sans-serif; font-size: clamp(10px, 1.8vw, 24px); }
.hudValue { color: #ff0000; font-family: 'Press Start 2P', cursive; font-size: clamp(10px, 1.5vw, 20px); border: 3px solid #ffffff; background: #000; padding: 8px 12px; width: 100%; text-align: center; box-sizing: border-box; }

/* --- Modals & Overlays --- */
.modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.9); z-index: 200; display: none; align-items: center; justify-content: center; }
.modal-box { background: #111; border: 2px solid #FFD700; box-shadow: 0 0 20px #FFD700; padding: 20px; border-radius: 10px; color: #fff; font-family: sans-serif; text-align: center; width: 90%; max-width: 500px; max-height: 80%; overflow-y: auto; }
.modal-box h2 { font-family: 'Press Start 2P', cursive; color: #0ff; font-size: 16px; margin-bottom: 20px; }
.modal-box button { background: #222; color: #fff; border: 1px solid #555; padding: 10px 20px; font-weight: bold; cursor: pointer; margin-top: 10px; font-family: 'Press Start 2P', cursive; font-size: 12px;}
.modal-box button.btn-tab.active { background: #FFD700 !important; color: #000 !important; border-color:#FFD700 !important; box-shadow: 0 0 10px #FFD700; }
.modal-box input { width: 90%; padding: 10px; margin: 10px 0; background: #000; color: #0ff; border: 1px solid #0ff; }

.neon-red-box { border: 4px solid #f00; box-shadow: 0 0 30px #f00, inset 0 0 20px #f00; background: rgba(50, 0, 0, 0.8); display: flex; flex-direction: column; align-items: center;}
.neon-yellow-box { border: 4px solid #FFD700; box-shadow: 0 0 30px #FFD700, inset 0 0 20px #FFD700; background: rgba(50, 50, 0, 0.8); display: flex; flex-direction: column; align-items: center;}
.game-over-btns { display: flex; gap: 20px; justify-content: center; margin-top: 20px; flex-wrap: wrap;}
.btn-neon-yellow { background: #000; color: #FFD700; border: 2px solid #FFD700; box-shadow: 0 0 10px #FFD700; transition: all 0.2s;}
.btn-neon-yellow:hover { background: #FFD700; color: #000; }

/* --- DEBUG BOX --- */
.debug-box {
    position: absolute;
    top: 50px;
    right: 20px;
    width: auto;
    min-width: 150px;
    z-index: 999999 !important;
    background: rgba(0,0,0,0.9);
    border: 2px solid #0ff;
    box-shadow: 0 0 15px #0ff, inset 0 0 10px #0ff;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
}
.debug-box p { 
    margin: 0; 
    display: flex; 
    justify-content: space-between; 
    font-family: 'Press Start 2P', monospace;
    font-size: 10px !important;
    color: #0ff !important; 
    text-shadow: 0 0 5px #0ff !important;
}
.debug-box span { 
    color: #0ff !important; 
    text-shadow: 0 0 5px #0ff !important; 
}

/* --- MÓVILES --- */
@media screen and (max-width: 800px), screen and (max-aspect-ratio: 1/1) {
    .stage { width: 100vw; height: 100vh