/* --- Reset & Base --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body, html { width: 100vw; height: 100vh; overflow: hidden; font-family: 'Outfit', sans-serif; background: #ffe4e1; }

/* --- Engine do Jogo (Tela Cheia) --- */
#game-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10; overflow: hidden;
}

#parallax-world {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
}

.parallax-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    opacity: 0; transition: opacity 0.5s;
}
.parallax-layer.active { opacity: 1; }

/* Velocidades de Parallax Vertical */
.sky-bg { animation: pScroll 20s linear infinite; background-image: url('assets/cenario.png'); }
.far-bg { animation: pScroll 10s linear infinite; background-image: url('assets/cenario.png'); background-size: 150%; }
.mid-bg { animation: pScroll 5s linear infinite; background-image: url('assets/cenario.png'); background-size: 200%; }

@keyframes pScroll {
    from { background-position: 0 0; }
    to { background-position: 0 100%; }
}

/* --- Pistas --- */
#game-lanes {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; z-index: 5;
}
.lane { flex: 1; height: 100%; cursor: pointer; }

/* --- Personagem & Física --- */
.character-container {
    position: fixed; bottom: 8vh; left: 50%;
    transform: translateX(-50%);
    z-index: 100; pointer-events: none;
    transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.base-body { height: 45vh; width: auto; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.2)); }

/* Respiração Organica */
.breathing-anim {
    animation: breath 3s ease-in-out infinite;
    transform-origin: bottom center;
}
@keyframes breath {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(1.03) scaleX(0.98); }
}

/* Squash & Stretch */
.squash-stretch { animation: sStretch 0.4s ease-out; }
@keyframes sStretch {
    0% { transform: scale(1); }
    30% { transform: scaleX(1.3) scaleY(0.7); }
    60% { transform: scaleX(0.7) scaleY(1.3); }
    100% { transform: scale(1); }
}

/* Expressões Faciais */
.facial-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; }
.blink-anim { animation: blink 4s infinite; transform-origin: center; }
@keyframes blink {
    0%, 90%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(0.1); }
}

/* --- Itens Caindo --- */
.falling-item {
    position: absolute; width: 18vh; height: 18vh;
    object-fit: contain; z-index: 50; pointer-events: none;
    filter: url(#remove-white);
    animation: fallDown 3s linear forwards;
}
@keyframes fallDown {
    0% { top: -20vh; opacity: 0; transform: translateX(-50%) scale(0.5); }
    20% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 110vh; opacity: 0; transform: translateX(-50%) scale(1.2); }
}

/* --- UI Professional --- */
.pro-btn {
    padding: 14px 28px; border-radius: 50px; border: none;
    color: white; font-weight: 900; cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    text-transform: uppercase; transition: 0.2s;
}
.pro-btn:active { transform: scale(0.9); }

.ui-panel {
    position: fixed; top: 90px; right: 20px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(25px);
    border-radius: 30px; padding: 25px;
    width: 300px; color: white; z-index: 1500;
}

/* Sombras com Volume */
.dynamic-shadow {
    position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 20px; background: rgba(0,0,0,0.4);
    border-radius: 50%; filter: blur(10px); z-index: -1;
}