:root {
    --primary-gradient: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    --ui-bg-dark: rgba(20, 10, 10, 0.9);
    --gold-text: #FFD700;
}

* { box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: transparent; }

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Ubuntu', sans-serif;
    background-color: #000;
}

.main-container {
    position: relative;
    width: 100%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Empurra o jogo para o fundo da tela (Mobile layout) */
    justify-content: flex-end; 
}

/* Fundo */
.bg-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center bottom;
    z-index: 0;
}

/* Neve */
#snow-container { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.snowflake { position: absolute; color: white; animation: fall linear infinite; }
@keyframes fall { to { transform: translateY(110vh); } }

/* Botão Mute */
.mute-btn {
    position: absolute;
    top: 40px; right: 20px; z-index: 100;
    width: 40px; height: 40px;
    background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}

/* --- Área do Jogo --- */
.game-stage {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 20px;
    z-index: 10;
}

/* Wrapper da Máquina */
.machine-wrapper {
    position: relative;
    width: 92%;
    aspect-ratio: 1 / 1; /* Quadrado Perfeito */
    margin-bottom: 20px;
    z-index: 10;
    margin-top: auto;
    padding-top: 40px;
}

/* Papai Noel */
.santa-container {
    position: absolute;
    top: -35%;
    left: 50%;
    transform: translateX(-50%);
    width: 75%;
    z-index: -1;
    pointer-events: none;
}
.santa-img { width: 100%; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.6)); }

/* Moldura */
.slot-frame-container {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 20;
}
.frame-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 30;
    pointer-events: none;
    filter: drop-shadow(0 0 15px rgba(0,0,0,0.9));
}

/* --- ROLOS (REELS) --- */
.reels-container {
    position: absolute;
    top: 6.5%; left: 6.5%; right: 6.5%; bottom: 6.5%;
    background: #100505;
    display: flex;
    gap: 4px;
    border-radius: 6px;
    overflow: hidden;
    z-index: 25;
}

/* Janela Individual do Rolo */
.reel-window {
    flex: 1;
    position: relative;
    overflow: hidden; /* Esconde os ícones que estão fora da área */
    border-right: 2px solid #b45309;
    border-left: 2px solid #b45309;
}
.reel-window:first-child { border-left: none; }
.reel-window:last-child { border-right: none; }

/* A Tira que se move (Container dos Símbolos) */
.reel-strip {
    width: 100%;
    display: flex;
    flex-direction: column; /* Empilha as imagens verticalmente */
    will-change: transform;
    /* Posição inicial (ajustada pelo JS depois) */
    transform: translateY(0); 
}

/* O Quadrado de cada Símbolo */
.symbol {
    width: 100%;
    /* Altura = Largura (Quadrado) para caber na grade 3x3 */
    aspect-ratio: 1 / 1; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}

/* A Imagem do Prêmio */
.symbol img {
    width: 90%;
    height: 90%;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.6));
}

/* Efeito de Movimento (Blur) */
.moving {
    animation: moveBlur 0.1s linear infinite;
}
@keyframes moveBlur {
    0% { filter: blur(0px); }
    50% { filter: blur(4px); transform: translateY(10px); }
    100% { filter: blur(0px); }
}

/* Linha Vermelha */
.payline-indicator {
    position: absolute;
    top: 50%; left: -8px; right: -8px;
    height: 3px; background: rgba(220, 38, 38, 0.9);
    box-shadow: 0 0 10px red; z-index: 50;
    display: flex; justify-content: space-between; align-items: center;
    pointer-events: none;
}
.arrow-point {
    width: 14px; height: 14px; background: #FFD700;
    border-radius: 50%; border: 2px solid #DC2626;
    box-shadow: 0 0 5px orange;
}

/* --- Interface UI --- */
.ui-container {
    width: 95%;
    position: relative;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stats-bar {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr;
    gap: 8px;
    width: 100%;
    background: var(--ui-bg-dark);
    padding: 10px 8px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
}

.stat-box { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.label { font-size: 9px; color: var(--gold-text); font-weight: 800; text-transform: uppercase; margin-bottom: 2px; }
.value { font-size: 14px; font-weight: 900; color: white; font-family: 'Montserrat', sans-serif; }

.bet-controls {
    display: flex; align-items: center; gap: 8px;
    background: rgba(0,0,0,0.4); padding: 3px 8px; border-radius: 20px;
}
.ctrl-btn {
    width: 22px; height: 22px; border-radius: 50%; border: none;
    color: white; font-weight: 900; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.minus { background: #DC2626; }
.plus { background: #16A34A; }

.controls-area {
    position: relative; width: 100%; height: 90px;
    display: flex; justify-content: center; align-items: center;
}

.btn-spin {
    width: 90px; height: 90px;
    background-image: url('assets/controls/btn_spin.avif');
    background-size: contain; background-position: center; background-repeat: no-repeat;
    background-color: transparent; border: none; cursor: pointer;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5)); transition: transform 0.1s;
    z-index: 70;
}
.btn-spin:active { transform: scale(0.92); }

.btn-turbo {
    position: absolute; right: 15%; bottom: 25px;
    width: 38px; height: 38px;
    border-radius: 50%; border: 2px solid #FFD700;
    background: #DC2626 url('assets/controls/turbo-auto.svg') no-repeat center;
    background-size: 60%; cursor: pointer;
}

.decor {
    position: absolute; bottom: 10px; width: 80px; height: 80px;
    background-size: contain; background-repeat: no-repeat;
    background-position: bottom; opacity: 0.6; pointer-events: none;
}
.decor.left { left: 0; background-image: url('assets/backgrounds/decor-swirl.png'); transform: scaleX(-1); }
.decor.right { right: 0; background-image: url('assets/backgrounds/decor-swirl.png'); }

/* Modal Vitória */
.hidden { display: none !important; }
#win-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 999;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
#win-img { width: 60%; max-width: 250px; animation: pop 0.4s; }
.win-text { font-size: 32px; color: #FFD700; font-weight: 900; margin-top: 15px; }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }