@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;700&family=Orbitron:wght@700&display=swap');

:root {
    --azul-ceu: #1e3799; 
    --laranja: #ff9800;
    --btn-vermelho: #ff4757;
    --btn-verde: #2ed573;
    --btn-roxo: #5f27cd;
    --btn-ouro: #f1c40f;
    --neon-azul: #00d2ff;
}

html, body { height: 100%; }

body {
    font-family: 'Fredoka', sans-serif;
    margin: 0;
    height: calc(var(--vh, 1vh) * 100);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    touch-action: manipulation;
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 2s ease-in-out; 
}

/* JORNADA VISUAL (CENÁRIOS) */
.bg-ceu { background: linear-gradient(to bottom, #4facfe 0%, #00f2fe 100%); }
.bg-estratosfera { background: linear-gradient(to bottom, #2b1055 0%, #7597de 100%); }
.bg-espaco { background: radial-gradient(circle, #1e272e 0%, #000000 100%); }

/* --- BACKGROUND ANIMADO --- */
.nuvens-container { position: absolute; width: 100%; height: 100%; overflow: hidden; z-index: 1; pointer-events: none; }
.estrela { position: absolute; background: white; border-radius: 50%; opacity: 0; animation: brilhar 2s infinite alternate; }
.bg-espaco .estrela, .bg-estratosfera .estrela { opacity: 0.8; }
@keyframes brilhar { from { opacity: 0.2; transform: scale(0.8); } to { opacity: 1; transform: scale(1.2); } }

.elemento-fundo { position: absolute; font-size: 3rem; opacity: 0; transition: opacity 1s; pointer-events: none; z-index: 2;}
.nuvem-animada { animation: voarLento 30s linear infinite; top: 15%; left: -10%; opacity: 0.7; }
.disco-animado { animation: voarRapido 18s linear infinite; top: 40%; right: -10%; transform: scaleX(-1); display: none;}

@keyframes voarLento { from { transform: translateX(-10vw); } to { transform: translateX(110vw); } }
@keyframes voarRapido { from { transform: translateX(10vw) scaleX(-1) translateY(0); } to { transform: translateX(-110vw) scaleX(-1) translateY(50px); } }

/* --- HEADER --- */
header { 
    background: rgba(255, 255, 255, 0.95); width: 100%; padding: 12px 20px; 
    display: flex; justify-content: space-between; align-items: center; 
    z-index: 50; box-shadow: 0 4px 15px rgba(0,0,0,0.5); box-sizing: border-box; position: relative; 
}
.grupo-botoes {
    display: flex;
    gap: 8px;
    z-index: 60;
}
.btn-header { color: white; text-decoration: none; padding: 10px 18px; border-radius: 50px; font-weight: bold; box-shadow: 0 4px 0 rgba(0,0,0,0.2); border: none; cursor: pointer; font-family: 'Fredoka'; font-size: 0.85rem; }
.btn-vermelho { background: var(--btn-vermelho); }
.btn-laranja { background: var(--laranja); }
.btn-azul { background: var(--azul-ceu); }

.status-topo { font-family: 'Orbitron', sans-serif; text-align: right; color: #111; line-height: 1; z-index: 60;}
.status-topo span.titulo-rec { font-size: 0.8rem; font-weight: bold; color: #666; }
.status-topo span#rec { font-weight: 800; font-size: 1.8rem; color: var(--laranja); text-shadow: 0 2px 4px rgba(0,0,0,0.2); }

/* BARRA DE PROGRESSO NO HEADER */
.progresso-header {
    position: absolute; left: 50%; transform: translateX(-50%);
    width: 180px; background: #1e272e; border-radius: 20px; height: 22px; border: 3px solid #57606f; overflow: hidden;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
    z-index: 55;
}
.progresso-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #00d2ff, #3a7bd5); transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.progresso-textos { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 8px; font-size: 0.85rem; pointer-events: none; z-index: 2; font-weight: bold; color: white; text-shadow: 1px 1px 2px black;}

/* --- HUD DO JOGO --- */
#jogo-container { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 25px; z-index: 10; position: relative; }

.cabine-comando { 
    background: #2f3542; border: 8px solid #57606f; padding: 15px 20px; border-radius: 50px; 
    box-shadow: 0 0 30px var(--neon-azul), inset 0 0 20px rgba(0,0,0,0.5);
    display: flex; flex-direction: column; align-items: center; width: min(92vw, 380px); 
    position: relative; border-bottom: 15px solid #3d4451; transition: box-shadow 0.3s, border-color 0.3s;
}

.cabine-combo { box-shadow: 0 0 45px var(--btn-ouro), inset 0 0 30px rgba(241,196,15,0.4) !important; border-color: var(--btn-ouro) !important; }

/* BARRA DE TEMPO */
.barra-tempo { width: 90%; height: 8px; background: #111; border-radius: 10px; margin-bottom: 15px; overflow: hidden; display: none; }
.tempo-fill { width: 100%; height: 100%; background: var(--btn-verde); transition: width 1s linear, background-color 0.3s; }
.tempo-critico { background: var(--btn-vermelho) !important; }

.area-nave { position: relative; height: 100px; display: flex; align-items: center; justify-content: center; }
.nave-emoji { font-size: 70px; z-index: 2; transition: 0.5s cubic-bezier(0.5, -0.5, 0.27, 1.55); }
.fogo { position: absolute; bottom: 10px; font-size: 40px; opacity: 0; transition: 0.3s; filter: blur(2px); animation: tremerFogo 0.1s infinite alternate; }
@keyframes tremerFogo { from { transform: translateY(0); } to { transform: translateY(5px); } }

.monitor { background: #000; border: 4px solid #1e90ff; border-radius: 15px; width: 90%; padding: 10px; margin: 10px 0; box-shadow: inset 0 0 15px #1e90ff; text-align: center; }
#problema { font-family: 'Orbitron', sans-serif; font-size: 2.2rem; color: #00d2ff; text-shadow: 0 0 10px #00d2ff; }

input { width: 160px; font-size: 2.2rem; text-align: center; border-radius: 15px; border: 4px solid var(--laranja); background: #1e272e; color: #ffa502; font-family: 'Fredoka', sans-serif; outline: none; margin-bottom: 15px; }

.btn-enviar { background: linear-gradient(to bottom, #2ed573, #26af5a); color: white; width: 100%; padding: 15px; font-size: 1.4rem; border: none; border-radius: 25px; cursor: pointer; box-shadow: 0 8px 0 #1b7a3f; font-family: 'Fredoka', sans-serif; font-weight: bold; }

.status-inferior { display: flex; justify-content: space-around; width: 100%; margin-top: 15px; padding-top: 10px; border-top: 3px dashed #57606f; font-family: 'Orbitron', sans-serif; text-align: center; }
.status-inferior .bloco-status { display: flex; flex-direction: column; color: #a4b0be; font-size: 0.75rem; font-weight: bold; }
.status-inferior .bloco-status span { font-size: 1.8rem; font-weight: 800; margin-top: 5px; text-shadow: 0 0 10px rgba(0,0,0,0.5); }
#pts { color: var(--laranja); }
#acertos { color: var(--btn-ouro); }
#combo-ui { color: #ff4757; font-size: 0.9rem; font-weight: bold; opacity: 0; transition: opacity 0.3s; font-family: 'Orbitron'; text-align: center; margin-bottom: -5px;}

/* OVERLAYS E TELAS */
.overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(12px); display: flex; justify-content: center; align-items: center; z-index: 100; padding: 20px; }
.menu-caixa { background: white; padding: 25px; border-radius: 40px; border: 8px solid var(--laranja); width: 100%; max-width: 420px; text-align: center; max-height: 90vh; overflow-y: auto; box-sizing: border-box; }
.btn-modo { padding: 12px; width: 100%; margin-top: 10px; border: none; border-radius: 20px; color: white; font-family: 'Fredoka'; font-weight: bold; cursor: pointer; font-size: 1rem; box-shadow: 0 5px 0 rgba(0,0,0,0.2); }

.controles-fixos { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 110; }
.btn-circular { width: 50px; height: 50px; border-radius: 50%; border: 3px solid white; background: white; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.btn-circular.ativo { background-color: var(--btn-verde) !important; color: white !important; }

#mensagem { margin-top: 10px; font-weight: bold; text-align: center; font-size: 1.1rem; min-height: 25px;}

.pop { animation: pop 0.28s ease-out; }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes sacudir { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }

/* TECLADO VIRTUAL */
.kb-wrap { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.45)); }
.kb { margin: 0 auto; width: min(520px, 96vw); background: rgba(255,255,255,0.95); border: 2px solid rgba(30,55,153,0.25); border-radius: 22px; padding: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.35); backdrop-filter: blur(8px); }
.kb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.kb-key { border: none; border-radius: 12px; padding: 12px 0; font-family: 'Fredoka', sans-serif; font-weight: 900; font-size: 1.25rem; background: #f1f2f6; box-shadow: 0 4px 0 rgba(0,0,0,0.15); cursor: pointer; }
.kb-key:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,0.15); }
.kb-key.ok { background: var(--btn-verde); color: #fff; }
.kb-key.del { background: var(--btn-vermelho); color: #fff; }
.kb-key.alt { background: #dfe4ea; }
.kb-row2 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 6px; }

body.kb-on #jogo-container { padding-bottom: 230px; }

@media (max-width: 560px) {
    header { padding: 10px 12px; }
    .btn-header { padding: 9px 10px; font-size: 0.70rem; }
    .status-topo span#rec { font-size: 1.3rem; }
    .progresso-header { width: 110px; height: 18px; }
    .progresso-textos { font-size: 0.7rem; }
    .controles-fixos { flex-direction: row; gap: 10px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); }
    input { width: min(70vw, 170px); font-size: 1.8rem; }
    .monitor { padding: 5px; }
    #problema { font-size: 2rem; }
}