body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #0a0f18;
    font-family: 'Inter', sans-serif;
    user-select: none;
}
#game-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    cursor: none;
}
.hud-font {
    font-family: 'Share Tech Mono', monospace;
}
.military-title {
    font-family: 'Black Ops One', cursive;
}
/* Glassmorphism Military Panel */
.tac-panel {
    background: rgba(12, 19, 28, 0.78);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(120, 160, 190, 0.28);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
@keyframes pulse-fast {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.animate-blink {
    animation: pulse-fast 1s infinite;
}
#virtual-cursor {
    pointer-events: none;
}
#boresight-crosshair {
    pointer-events: none;
}

/* ===================== TELA DE ABERTURA (TOP PILOT) ===================== */
#splash { transition: opacity .7s ease; }
#splash.splash-leave { opacity: 0; pointer-events: none; }
#splash-bg { background-size: cover; background-position: center; animation: kenburns 22s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.14) translate(-1.5%, -1%); } }

/* Color grading estilo cinema: sombras azuladas, luzes alaranjadas */
.splash-grade {
    pointer-events: none;
    background: linear-gradient(180deg, rgba(10, 50, 110, .35) 0%, rgba(255, 140, 50, .22) 100%);
    mix-blend-mode: overlay;
}
.splash-vignette {
    pointer-events: none;
    background:
        radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,.6) 100%),
        linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,0) 48%);
}
.splash-grain {
    pointer-events: none;
    position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    opacity: .13;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    animation: grain .7s steps(6) infinite;
}
@keyframes grain {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(-4%, 3%); }
    40%  { transform: translate(3%, -5%); }
    60%  { transform: translate(-5%, -2%); }
    80%  { transform: translate(4%, 4%); }
    100% { transform: translate(0, 0); }
}

/* Faixas pretas de cinema */
.letterbox { position: absolute; left: 0; right: 0; height: 9vh; background: #000; z-index: 5; }
.letterbox-top { top: 0; animation: lbTop 1.3s cubic-bezier(.2,.8,.2,1) both; }
.letterbox-bottom { bottom: 0; animation: lbBottom 1.3s cubic-bezier(.2,.8,.2,1) both; }
@keyframes lbTop { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes lbBottom { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* Reflexo de sol (posicionado por JS na projeção do sol) */
#sun-flare { position: absolute; width: 0; height: 0; mix-blend-mode: screen; opacity: 0; pointer-events: none; }
.flare-core {
    position: absolute; left: -380px; top: -380px; width: 760px; height: 760px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,244,214,.95) 0%, rgba(255,200,120,.55) 8%, rgba(255,150,60,.22) 22%, rgba(255,120,40,0) 60%);
}
.flare-streak {
    position: absolute; left: -900px; top: -3px; width: 1800px; height: 6px; filter: blur(1.5px);
    background: linear-gradient(90deg, rgba(255,210,150,0), rgba(255,225,180,.85) 50%, rgba(255,210,150,0));
}
.flare-ghost {
    position: absolute; border-radius: 50%; mix-blend-mode: screen; opacity: 0; pointer-events: none;
    border: 2px solid rgba(255,200,130,.35);
    background: radial-gradient(circle, rgba(255,170,90,.18), rgba(255,170,90,0) 70%);
}

/* Título */
.splash-content { padding-bottom: 17vh; z-index: 4; }
.splash-title-wrap { filter: drop-shadow(0 4px 0 rgba(0,0,0,.55)) drop-shadow(0 0 34px rgba(251,191,36,.38)); }
.splash-title {
    font-size: clamp(3.4rem, 12vw, 9.5rem); line-height: 1; letter-spacing: .06em;
    background: linear-gradient(180deg, #ffffff 0%, #e5e7eb 34%, #94a3b8 50%, #f8fafc 56%, #fbbf24 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: titleIn 1.7s cubic-bezier(.2,.8,.2,1) .6s both;
}
@keyframes titleIn {
    0%   { opacity: 0; transform: scale(1.2); letter-spacing: .28em; }
    100% { opacity: 1; transform: scale(1);   letter-spacing: .06em; }
}
.splash-kicker { color: #fbbf24; letter-spacing: .45em; font-size: clamp(.65rem, 1.4vw, .9rem); animation: fadeUp 1.2s ease 1.4s both; }
.splash-rule { height: 2px; margin: 14px auto 12px; background: linear-gradient(90deg, rgba(251,191,36,0), #fbbf24, rgba(251,191,36,0)); animation: ruleIn 1.4s ease 1.8s both; }
@keyframes ruleIn { from { width: 0; opacity: 0; } to { width: min(420px, 70vw); opacity: 1; } }
.splash-sub { color: #e2e8f0; letter-spacing: .35em; font-size: clamp(.6rem, 1.3vw, .85rem); animation: fadeUp 1.2s ease 2.1s both; }
.splash-emblem { animation: fadeUp 1.2s ease .9s both; margin-bottom: 10px; filter: drop-shadow(0 0 10px rgba(251,191,36,.45)); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.splash-prompt {
    position: absolute; left: 0; right: 0; bottom: 2.6vh; z-index: 6; text-align: center;
    color: #fde68a; letter-spacing: .3em; font-size: clamp(.6rem, 1.3vw, .85rem);
    animation: fadeUp 1s ease 3s both, promptBlink 1.8s ease-in-out 4s infinite;
}
@keyframes promptBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* abertura: espera os modelos 3D carregarem (capa preta) e só então anima o título */
#splash.splash-loading .splash-content, #splash.splash-loading .splash-prompt { display: none; }
#splash-cover.gone { opacity: 0; pointer-events: none; }

/* capa de carregamento da abertura: logo + spinner (estilos aqui, sem depender do Tailwind CDN) */
#splash-cover { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(ellipse at 50% 45%, #0f1b2d 0%, #05080f 70%); transition: opacity .9s ease; }
.cover-box { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 16px; }
.cover-title { font-size: clamp(2.6rem, 9vw, 7rem); line-height: 1; letter-spacing: .06em; margin: 0;
    background: linear-gradient(180deg, #ffffff 0%, #e5e7eb 34%, #94a3b8 50%, #f8fafc 56%, #fbbf24 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 4px 0 rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(251,191,36,.3)); }
.cover-rule { width: min(360px, 60vw); height: 2px; margin: 16px 0 26px;
    background: linear-gradient(90deg, rgba(251,191,36,0), #fbbf24, rgba(251,191,36,0)); }
.cover-spinner { width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(251,191,36,.2); border-top-color: #fbbf24;
    animation: coverSpin .9s linear infinite; }
.cover-wait { margin-top: 14px; color: #fde68a; letter-spacing: .35em; font-size: .75rem; animation: promptBlink 1.8s ease-in-out infinite; }
@keyframes coverSpin { to { transform: rotate(360deg); } }

/* botão de som da abertura (começa desligado) */
#btn-sound { position: absolute; top: 18px; right: 18px; z-index: 40; width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fde68a;
    background: rgba(8, 13, 24, .55); border: 1.5px solid rgba(251, 191, 36, .55); backdrop-filter: blur(4px);
    transition: transform .15s ease, background .2s ease, box-shadow .2s ease; }
#btn-sound:hover { transform: scale(1.08); background: rgba(20, 28, 45, .75); }
#btn-sound .ico-on { display: none; }
#btn-sound.on .ico-on { display: block; }
#btn-sound.on .ico-off { display: none; }
#btn-sound.on { box-shadow: 0 0 18px rgba(251, 191, 36, .45); border-color: #fbbf24; }