body {
    margin: 0;
    padding: 0;
    background-color: #050505;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: 'Courier New', Courier, monospace;
    overflow: hidden;
    color: white;
    user-select: none;
}

/* START SCREEN */
#start-screen {
    position: absolute;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: radial-gradient(circle at center, #2c3e50 0%, #000000 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    text-align: center;
}
#start-screen h1 {
    font-size: 50px;
    color: #f1c40f;
    text-shadow: 4px 4px 0px #e74c3c, 8px 8px 15px rgba(0,0,0,0.9);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 5px;
}
#start-screen p {
    font-size: 16px;
    color: #ecf0f1;
    margin-bottom: 20px;
    text-shadow: 2px 2px 0px #000;
}

/* TANK SELECTION GRID */


.tank-card:hover { 
    border-color: #f1c40f; 
    transform: translateY(-2px);
    box-shadow: 4px 6px 0px rgba(0,0,0,0.5), 0 0 15px rgba(241,196,15,0.4); 
}
.tank-card.selected { 
    border-color: #39ff14; 
    box-shadow: 0 0 20px rgba(57,255,20,0.6), inset 0 0 10px rgba(57,255,20,0.2); 
    background: linear-gradient(180deg, rgba(39, 174, 96, 0.3), rgba(0, 0, 0, 0.8));
    transform: scale(1.05);
}
.tank-card canvas { width: 90px; height: 50px; margin-bottom: 5px; }
.tank-name { color: #fff; font-size: 12px; font-weight: bold; text-transform: uppercase; text-shadow: 1px 1px 0 #000; }
.tank-shot { color: #bdc3c7; font-size: 10px; margin-top: 3px; }

#btn-start {
    background: linear-gradient(180deg, #2ecc71, #27ae60);
    border: 4px solid #fff;
    padding: 12px 40px;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0,255,0,0.3), inset 0 -5px 15px rgba(0,0,0,0.3);
    text-transform: uppercase;
    font-family: 'Courier New', Courier, monospace;
    transition: transform 0.1s, box-shadow 0.1s;
    opacity: 0.4;
    pointer-events: none;
}
#btn-start.ready {
    opacity: 1;
    pointer-events: auto;
}
#btn-start.ready:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 30px rgba(0,255,0,0.5), inset 0 -5px 15px rgba(0,0,0,0.3);
}
#btn-start.ready:active {
    transform: scale(0.95);
}

#game-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: none; /* Escondido até iniciar */
}
#game-container {
    position: relative;
    width: 900px;
    height: 600px;
    box-shadow: 0 0 50px rgba(231, 76, 60, 0.4);
    border: 4px solid #111;
    border-radius: 10px;
    overflow: hidden;
    transform-origin: center center;
    background-color: #000;
}

canvas {
    display: block;
    width: 100%;
    height: 100%;
}

#ui-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}

.hud-box {
    position: absolute;
    background: rgba(10, 10, 10, 0.85);
    border: 2px solid #555;
    border-radius: 4px;
    padding: 10px;
    color: #ecf0f1;
    font-weight: bold;
    box-shadow: inset 0 0 10px rgba(255,255,255,0.1), 4px 4px 0px rgba(0,0,0,0.8);
    width: 180px;
    text-transform: uppercase;
}
#p1-hud { top: 15px; left: 15px; border-color: #e74c3c; box-shadow: 0 0 15px rgba(231,76,60,0.5), 4px 4px 0px #000; }
#p2-hud { top: 15px; right: 15px; border-color: #3498db; box-shadow: 0 0 15px rgba(52,152,219,0.5), 4px 4px 0px #000; }

#top-center-hud {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
#wind-hud {
    background: linear-gradient(180deg, #34495e, #2c3e50);
    border: 2px solid #95a5a6;
    border-radius: 4px;
    padding: 5px 15px;
    color: #ecf0f1;
    font-weight: bold;
    box-shadow: 4px 4px 0px #000;
    text-align: center;
    min-width: 120px;
    text-shadow: 1px 1px 0 #000;
}
#score-hud {
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid #f1c40f;
    border-radius: 4px;
    padding: 5px 20px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 0 15px rgba(241,196,15,0.4), 4px 4px 0px #000;
    font-size: 16px;
}

.bar-bg {
    width: 100%; height: 14px;
    background: #222;
    border: 2px solid #000;
    border-radius: 2px;
    margin-top: 4px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.8);
}
.hp-bar-fill { height: 100%; background: linear-gradient(90deg, #27ae60, #2ecc71); transition: width 0.3s; box-shadow: 0 0 10px #2ecc71;}
.fuel-bar-fill { height: 100%; background: linear-gradient(90deg, #d35400, #f39c12); transition: width 0.1s; box-shadow: 0 0 10px #f39c12;}

#special-panel-container {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: auto;
}

#special-panel {
    display: flex;
    gap: 15px;
}

.sp-btn, .sys-btn {
    background: linear-gradient(180deg, #7f8c8d, #34495e);
    border: 2px solid #111;
    border-radius: 4px;
    padding: 10px 15px;
    color: #fff;
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    cursor: pointer;
    box-shadow: inset 0px 2px 0px rgba(255,255,255,0.2), 3px 3px 0px #000;
    opacity: 0.6;
    transition: all 0.1s;
    pointer-events: none;
    text-shadow: 1px 1px 0 #000;
}
.sys-btn {
    background: linear-gradient(180deg, #8e44ad, #2c3e50);
    opacity: 1;
    pointer-events: auto;
    border-color: #9b59b6;
    font-size: 12px;
    padding: 8px 20px;
}
.sys-btn:hover {
    transform: translateY(-2px);
    box-shadow: inset 0px 2px 0px rgba(255,255,255,0.4), 0 0 15px rgba(155,89,182,0.6), 3px 5px 0px #000;
}

.sp-btn.ready {
    background: linear-gradient(180deg, #ecf0f1, #bdc3c7);
    color: #000;
    text-shadow: none;
    opacity: 1;
    pointer-events: auto;
}
.sp-btn.ready:hover {
    transform: translateY(-2px);
    box-shadow: inset 0px 2px 0px #fff, 3px 5px 0px #000;
}
.sp-btn.active {
    background: linear-gradient(180deg, #f1c40f, #f39c12);
    color: #000;
    transform: scale(1.1);
    border-color: #e74c3c;
    box-shadow: 0px 0px 20px rgba(241,196,15,0.8), 3px 3px 0px #000;
}
.sp-btn.locked {
    background: linear-gradient(180deg, #c0392b, #78281f);
    color: #aaa;
    opacity: 0.4;
}
.sp-status { color: #f1c40f; font-weight: bold; font-size: 12px; margin-top: 8px; text-shadow: 1px 1px 0 #000;}

#power-hud {
    position: absolute;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: 450px;
    height: 35px;
    background: rgba(0, 0, 0, 0.8);
    border: 3px solid #fff;
    border-radius: 18px;
    overflow: hidden;
    display: none;
    box-shadow: 0 0 30px rgba(231,76,60,0.8), 5px 5px 0px #000;
}
#power-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #f1c40f, #e74c3c, #8e44ad);
    position: absolute;
    top: 0; left: 0; z-index: 1;
    box-shadow: 0 0 15px #e74c3c;
}
#power-marker {
    position: absolute;
    top: 0; bottom: 0;
    width: 4px;
    background-color: #ffffff;
    z-index: 2;
    display: none;
    transform: translateX(-50%);
    box-shadow: 0 0 10px #fff;
}



#your-turn-overlay {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 45px;
    font-weight: bold;
    color: #39ff14;
    text-shadow: 4px 4px 0 #000, 0 0 20px #2ecc71;
    text-align: center;
    pointer-events: none;
    display: none;
    animation: blink 0.8s infinite;
    z-index: 10;
}
@keyframes blink {
    0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.3; transform: translate(-50%, -50%) scale(0.95); }
}

.small-text { font-size: 12px; font-weight: bold; margin-top: 6px; color: #bdc3c7;}
.player-name-display { 
    font-size: 18px; color: #e74c3c; 
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 
    margin-bottom: 5px; text-transform: uppercase;
    text-shadow: 0 0 10px rgba(231,76,60,0.8);
}
#p2-name-display { color: #3498db; text-shadow: 0 0 10px rgba(52,152,219,0.8); }

/* Background Layers */
#background-layer {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background-image: url('/img/wasteland-background.gif');
    background-size: cover;
    background-position: center;
    z-index: -2;
}
#vignette-layer {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    box-shadow: inset 0 0 250px rgba(0,0,0,0.95), inset 0 0 100px rgba(0,0,0,0.8);
    background: radial-gradient(circle, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.85) 100%);
    z-index: -1;
    pointer-events: none;
}
body {
    animation: fadeIn 2s ease-in;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* NEW: LOBBY AND MODE SCREEN STYLES */
.fullscreen-banner {
    position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;
    background: transparent;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    z-index: 9999; text-align: center;
}

.fullscreen-banner h2 {
    font-size: 40px; color: #f1c40f; text-shadow: 4px 4px 0px #e74c3c, 8px 8px 15px rgba(0,0,0,0.9);
    margin-bottom: 5px; text-transform: uppercase; letter-spacing: 5px;
}
.mode-buttons { display: flex; gap: 30px; margin-top: 30px; }
.mode-btn {
    background: linear-gradient(90deg, #d35400, #c0392b);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 15px 30px;
    font-family: 'Press Start 2P', monospace;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 15px rgba(192, 57, 43, 0.4);
    text-transform: uppercase;
    margin: 0 10px;
}
.mode-btn:hover {
    background: linear-gradient(90deg, #e67e22, #d35400);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(230, 126, 34, 0.7);
    border-color: rgba(255,255,255,0.3);
}
.mode-btn:hover { transform: scale(1.05); box-shadow: 0 15px 30px rgba(52,152,219,0.6), inset 0 -5px 15px rgba(0,0,0,0.3); }
#btn-mode-multi { background: linear-gradient(180deg, #e67e22, #d35400); box-shadow: 0 10px 20px rgba(230,126,34,0.3), inset 0 -5px 15px rgba(0,0,0,0.3); }
#btn-mode-multi:hover { box-shadow: 0 15px 30px rgba(230,126,34,0.6), inset 0 -5px 15px rgba(0,0,0,0.3); }
#tank-subtitle { font-size: 22px; color: #39ff14; text-shadow: 2px 2px 0 #000; margin-bottom: 25px; font-weight: bold; height: 30px; }
.lobby-player-card {
    background: rgba(0,0,0,0.8); border: 2px solid #3498db; padding: 15px 40px; margin: 15px; border-radius: 5px;
    font-size: 24px; font-weight: bold; color: #ecf0f1; box-shadow: 4px 4px 0 #000; text-transform: uppercase;
}

/* Discreet HUD and Formatting Fixes */
.hud-box {
    background: rgba(10, 10, 10, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 10px 15px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important;
    backdrop-filter: blur(4px);
    width: auto !important;
    min-width: 220px;
    max-width: 300px;
}
.player-name-display {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow: visible !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
    text-transform: uppercase;
}

#start-screen 
/* Custom Scrollbar for detached box */







.banner-content-box h1, .banner-content-box h2 {
    font-family: 'Press Start 2P', monospace;
    color: #f1c40f;
    text-shadow: 0px 4px 20px rgba(241, 196, 15, 0.5);
    margin-top: 0;
    margin-bottom: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 22px;
}
.banner-content-box p {
    font-family: 'Courier New', Courier, monospace;
    color: #bdc3c7;
    font-size: 16px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.9);
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: bold;
}
#tank-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Exatamente 4 colunas */
    gap: 8px;
    width: 100%;
    margin-bottom: 15px;
}
.tank-card {
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 5px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.tank-card canvas {
    transform: scale(0.85); /* Encolhe levemente o canvas pra economizar altura */
    margin-bottom: -5px;
}
.tank-card .tank-name {
    font-size: 10px;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
}
.tank-card .tank-shot {
    font-size: 9px;
    color: #f1c40f;
    margin-top: 2px;
}
.tank-card:hover, .tank-card.selected {
    background: rgba(40, 40, 50, 0.8);
    border-color: #f1c40f;
    transform: scale(1.05);
}


/* ================================================================
   1. FONTE CARTOON: ESTRITAMENTE RESTRITA À TELA DE MODO DE JOGO 
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');

#mode-screen h1 {
    
    font-size: 3.5rem !important;
    color: #f1c40f !important;
    
    
    text-shadow: 5px 5px 0px #000 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    margin-bottom: 15px !important;
}
#mode-screen p {
    
    font-size: 1.5rem !important;
    color: #fff !important;
    
    
    text-shadow: 4px 4px 0px #000 !important;
    margin-bottom: 30px !important;
}
#mode-screen .mode-btn {
    
    font-size: 1.3rem !important;
    
    
    text-shadow: 3px 3px 0px #000 !important;
    border-radius: 12px !important;
    border: 3px solid #000 !important;
}

/* ================================================================
   2. BOX PREMIUM "UAU" COM ANIMAÇÃO E REDUÇÃO MOBILE 
   ================================================================ */
@keyframes boxNeonPulse {
    0% { box-shadow: 0 0 20px rgba(241, 196, 15, 0.2), inset 0 0 15px rgba(241, 196, 15, 0.1), 0 30px 60px rgba(0,0,0,0.9); }
    100% { box-shadow: 0 0 50px rgba(241, 196, 15, 0.6), inset 0 0 30px rgba(241, 196, 15, 0.3), 0 30px 60px rgba(0,0,0,0.9); }
}
.banner-content-box {
    background: linear-gradient(145deg, rgba(20, 20, 28, 0.95), rgba(5, 5, 10, 0.98)) !important;
    border: 2px solid rgba(241, 196, 15, 0.4) !important;
    border-top: 4px solid #f1c40f !important;
    border-bottom: 4px solid #f1c40f !important;
    border-radius: 24px !important;
    animation: boxNeonPulse 2.5s infinite alternate ease-in-out !important;
    background-image: radial-gradient(rgba(241, 196, 15, 0.05) 2px, transparent 2px), radial-gradient(rgba(241, 196, 15, 0.02) 1px, transparent 1px) !important;
    background-size: 30px 30px, 10px 10px !important;
    background-position: 0 0, 15px 15px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 95% !important;
    max-width: 900px !important;
    padding: 40px 50px !important;
    margin: auto !important;
    position: relative !important;
    z-index: 10 !important;
    backdrop-filter: blur(15px) saturate(150%) !important;
}



/* ================================================================
   3. MODAL DE FINAL DE ROUND (TOOLTIP ESCURECIDA) 
   ================================================================ */
#message-overlay { position: fixed !important; top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: linear-gradient(135deg, rgba(20,20,30,0.98), rgba(10,10,15,1)) !important;
    border: 4px solid #f1c40f !important;
    border-radius: 20px !important;
    padding: 50px 80px !important;
    box-shadow: 0 0 0 200vw rgba(0,0,0,0.85), 0 20px 50px rgba(0,0,0,0.9) !important;
    z-index: 999999 !important;
    text-align: center !important;
    
    color: #fff !important;
    
    
    display: none;
    width: max-content !important;
    max-width: 90vw !important;
}
#message-overlay span { display: block !important; margin-top: 20px !important; font-size: 1.5rem !important; color: #4ecdc4 !important; }

/* ================================================================
   4. UI DE ÁUDIO DISCRETA E ALERTA DE ROTAÇÃO 
   ================================================================ */
#orientation-warning {
    display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #000; z-index: 999999; color: #fff; align-items: center; justify-content: center;
    font-family: 'Press Start 2P', monospace; text-align: center; line-height: 1.5;
}
@media screen and (orientation: portrait) and (max-width: 900px) {
    #orientation-warning { display: flex !important; }
}

.audio-ui {
    position: fixed !important; top: 15px !important; left: 15px !important; z-index: 100000 !important;
    display: flex !important; align-items: center !important; gap: 5px !important;
    background: rgba(10, 10, 15, 0.4) !important; padding: 3px 10px !important; border-radius: 20px !important;
    border: 1px solid rgba(255,255,255,0.05) !important; backdrop-filter: blur(2px) !important;
    transform: scale(0.7) !important; transform-origin: top left !important; transition: all 0.3s ease !important; opacity: 0.6 !important;
}
.audio-ui:hover { background: rgba(20, 20, 25, 0.95) !important; border-color: rgba(241,196,15,0.8) !important; transform: scale(0.9) !important; opacity: 1 !important; }
.audio-ui button { font-size: 16px !important; background: none !important; border: none !important; color: #fff !important; cursor: pointer !important; text-shadow: 1px 1px 2px #000 !important; }
.audio-ui input[type=range] { width: 50px !important; height: 3px !important; accent-color: #f1c40f !important; cursor: pointer !important; }

/* ================================================================
   5. CONTROLES SNES (MOBILE) - FIXOS NAS LATERAIS
   ================================================================ */
.snes-ui {
    display: none; position: fixed !important; bottom: 2vh !important; left: 0 !important; width: 100vw !important;
    padding: 0 2vw !important; justify-content: space-between !important; align-items: flex-end !important;
    z-index: 50000 !important; pointer-events: none !important; box-sizing: border-box !important;
}
@media screen and (max-width: 1024px) and (orientation: landscape) { .snes-ui { display: flex !important; } }
.snes-ui > * { pointer-events: auto !important; }

.d-pad { transform: scale(0.75) !important; transform-origin: bottom left !important; position: relative; width: 120px; height: 120px; margin-bottom: 10px; }
.d-up, .d-down, .d-left, .d-right { position: absolute; background: #b5b5b5; border: 3px solid #111; box-shadow: inset -2px -2px 5px rgba(0,0,0,0.3), inset 2px 2px 5px rgba(255,255,255,0.4); cursor: pointer; }
.d-up { top: 0; left: 40px; width: 40px; height: 40px; border-radius: 8px 8px 0 0; border-bottom: none; }
.d-down { bottom: 0; left: 40px; width: 40px; height: 40px; border-radius: 0 0 8px 8px; border-top: none; }
.d-left { top: 40px; left: 0; width: 40px; height: 40px; border-radius: 8px 0 0 8px; border-right: none; }
.d-right { top: 40px; right: 0; width: 40px; height: 40px; border-radius: 0 8px 8px 0; border-left: none; }
.d-center { position: absolute; top: 40px; left: 40px; width: 40px; height: 40px; background: #b5b5b5; border: none; box-shadow: none; z-index: 2; }
.d-center::after { content: ''; position: absolute; top: 10px; left: 10px; width: 20px; height: 20px; border-radius: 50%; background: #999; box-shadow: inset 2px 2px 4px rgba(0,0,0,0.2); }
.d-up:active, .d-down:active, .d-left:active, .d-right:active { background: #999; }

.action-buttons { transform: scale(0.8) !important; transform-origin: bottom right !important; margin-bottom: 10px !important; margin-right: 10px !important; display: flex; align-items: flex-end; }
.snes-button { width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #a29bfe, #5e2a84); border: 3px solid #111; box-shadow: 0 5px 0 #111, inset 0 0 10px rgba(255,255,255,0.3); cursor: pointer; position: relative; }
.snes-button:active { transform: translateY(5px); box-shadow: 0 0 0 #111, inset 0 0 10px rgba(255,255,255,0.3); }
.snes-button::after { content: 'FIRE'; position: absolute; top: -25px; left: 50%; transform: translateX(-50%); font-family: 'Press Start 2P', monospace; font-size: 10px; color: #fff; text-shadow: 2px 2px 0 #000; }


/* =========================================================
   UI MOBILE ABSOLUTA: CENTRALIZAÇÃO E POSICIONAMENTO
   ========================================================= */

@media screen and (max-height: 650px) and (orientation: landscape), screen and (max-width: 900px) {
    /* 1. Faz as caixas flutuarem perfeitamente no centro sem esticar nas bordas */
    #start-screen .banner-content-box, 
    #mode-screen .banner-content-box {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) scale(0.8) !important;
        margin: 0 !important;
        max-height: 95vh !important;
        width: 90vw !important;
        max-width: 800px !important;
    }

    /* 2. Joga a tela de gameplay para cima, liberando o rodapé para o SNES */
    }


/* =========================================================
   CONTORNO PRETO FINO SÓLIDO PARA TODAS AS FONTES DO JOGO
   Garante paridade visual entre PC e Celular
   ========================================================= */
#mode-screen h1, #mode-screen p, 
#start-screen h2, #start-screen p, #tank-subtitle,
#lobby-screen h1, #lobby-screen p, .lobby-player-card,
.mode-btn, .sys-btn, .sp-btn,
.tank-name, .tank-shot,
.player-name-display, .small-text, .sp-status,
#score-hud, #theme-indicator, #wind-indicator,
#orientation-warning, .audio-ui button,
#message-overlay, #match-over-screen h1, #match-over-subtitle,
.snes-button::after {
    -webkit-text-stroke: 1px #000 !important;
    paint-order: stroke fill !important;
    text-shadow: 1px 1px 0px #000, -1px -1px 0px #000, 1px -1px 0px #000, -1px 1px 0px #000 !important; /* Preenchimento absoluto de 360 graus */
    font-smooth: never !important;
    -webkit-font-smoothing: none !important;
}

/* =========================================================
   NOTIFICAÇÕES FINAIS (MATCH OVER / ROUND OVER) MOBILE
   Aumento de tamanho e centralização estrita no celular
   ========================================================= */
@media screen and (max-width: 900px), screen and (max-height: 650px) {
    #message-overlay {
        width: 95vw !important;
        max-width: 600px !important;
        padding: 40px 15px !important;
        font-size: 1.8rem !important;
        line-height: 1.4 !important;
        border-width: 3px !important;
    }
    #message-overlay span {
        font-size: 2.2rem !important;
        margin-top: 15px !important;
    }
    
    #match-over-screen .banner-content-box {
        width: 95vw !important;
        max-width: 600px !important;
        padding: 40px 20px !important;
    }
    #match-over-screen h1 {
        font-size: 2.8rem !important;
    }
    #match-over-subtitle {
        font-size: 1.6rem !important;
    }
}


/* =========================================================
   1. NITIDEZ CARTOON DEFINITIVA (STROKE ATRÁS DO PREENCHIMENTO)
   ========================================================= */
* {
    /* Força o contorno a ser renderizado ATRÁS da cor da fonte em todos os navegadores */
    paint-order: stroke fill !important; 
}

/* Fontes Maiores (Títulos, Botões, HUD Principal) */
#mode-screen h1, #mode-screen p, 
#start-screen h2, #start-screen p, #tank-subtitle,
#lobby-screen h1, #lobby-screen p, .lobby-player-card,
.mode-btn, .sys-btn, .sp-btn,
#score-hud, #theme-indicator, #wind-indicator,
#orientation-warning, .audio-ui button,
#message-overlay, #match-over-screen h1, #match-over-subtitle,
.snes-button::after {
    
    text-shadow: 2px 2px 0px #000 !important;
    font-smooth: never !important;
    -webkit-font-smoothing: none !important;
    letter-spacing: 1px !important;
}

/* Fontes Minúsculas (Nomes de Tanques, Barras de HP/Fuel) */
.tank-name, .tank-shot, .player-name-display, .small-text, .sp-status {
    -webkit-text-stroke: 1px #000 !important;
    text-shadow: 1px 1px 0px #000 !important;
    font-smooth: never !important;
    -webkit-font-smoothing: none !important;
    letter-spacing: 0px !important;
}

/* =========================================================
   2. CENTRALIZAÇÃO ABSOLUTA E ANTI-CORTE (FORA DO FULLSCREEN)
   ========================================================= */
html, body {
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important; /* Trava qualquer rolagem indesejada */
    margin: 0 !important;
    padding: 0 !important;
}

#game-wrapper, #mode-screen, #start-screen, #lobby-screen, #match-over-screen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

#game-container {
    transform-origin: center center !important;
    margin: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* =========================================================
   TIPOGRAFIA PREMIUM: ORBITRON & RAJDHANI
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Rajdhani:wght@600;700&family=Bangers&display=swap');

/* Títulos Principais (Luxo, 3D e Brilho) */
#mode-screen h1, #start-screen h2, #lobby-screen h1, #match-over-screen h1 {
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 900 !important;
    font-size: 3.6rem !important;
    color: #f1c40f !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
    margin-bottom: 20px !important;
     /* Remoção absoluta do contorno feio */
    /* Efeito de Profundidade 3D + Glow Neon */
    text-shadow: 
        0px 4px 0px #b8860b, 
        0px 8px 15px rgba(0, 0, 0, 0.9), 
        0px 0px 25px rgba(241, 196, 15, 0.6) !important;
    line-height: 1.2 !important;
}

/* Subtítulos e Textos Auxiliares (Limpos e Tecnológicos) */
#mode-screen p, #start-screen p, #tank-subtitle, #match-over-subtitle, #lobby-screen p {
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.5rem !important;
    color: #ecf0f1 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    margin-bottom: 30px !important;
    
    text-shadow: 2px 2px 5px rgba(0,0,0,0.9), 0px 0px 10px rgba(52, 152, 219, 0.5) !important;
}

/* Botões de Modo (Interface Moderna, sem bordas pesadas) */
.mode-btn {
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    padding: 10px 20px !important;
    color: #fff !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding: 15px 35px !important;
    border-radius: 8px !important;
    
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8) !important;
    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.6), inset 0 0 10px rgba(255,255,255,0.1) !important;
    transition: all 0.3s ease !important;
}
.mode-btn:hover {
    background: linear-gradient(135deg, #f1c40f 0%, #e67e22 100%) !important;
    color: #fff !important;
    text-shadow: 2px 2px 0px #000 !important;
    border-color: #f1c40f !important;
    box-shadow: 0 8px 25px rgba(241,196,15,0.5), inset 0 0 15px rgba(255,255,255,0.3) !important;
    transform: translateY(-3px) scale(1.05) !important;
}

@keyframes hang-and-drop {
    0% { transform-origin: top center; transform: rotate(0deg); opacity: 1; }
    20% { transform-origin: top center; transform: rotate(15deg); }
    40% { transform-origin: top center; transform: rotate(-10deg); }
    60% { transform-origin: top center; transform: rotate(5deg); }
    80% { transform-origin: top center; transform: rotate(12deg); opacity: 1; }
    100% { transform-origin: top center; transform: rotate(12deg) translateY(1500px); opacity: 0; }
}

.hang-and-drop {
    animation: hang-and-drop 1.5s ease-in forwards !important;
}

.shaking {
    animation: shake 0.5s infinite;
}
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/* Restauração do contorno FINO apenas para a HUD do jogo (Pixel Art) */
#score-hud, #theme-indicator, #wind-indicator, .sys-btn, .sp-btn, .audio-ui button, .snes-button::after {
    -webkit-text-stroke: 1px #000 !important;
    text-shadow: 2px 2px 0px #000 !important;
    font-family: 'Press Start 2P', monospace !important;
}

/* =========================================================
   AJUSTES MATEMÁTICOS PARA MOBILE (RESPONSIVIDADE PREMIUM)
   ========================================================= */
@media screen and (max-width: 900px), screen and (max-height: 700px) {
    #mode-screen h1, #start-screen h2, #lobby-screen h1, #match-over-screen h1 {
        font-size: 2.2rem !important;
        text-shadow: 0px 3px 0px #b8860b, 0px 6px 10px rgba(0, 0, 0, 0.9) !important;
    }
    #mode-screen p, #start-screen p, #tank-subtitle, #match-over-subtitle {
        font-size: 1.1rem !important;
        margin-bottom: 20px !important;
    }
    .mode-btn {
        font-size: 1rem !important;
        padding: 12px 25px !important;
    }
    
    /* Garante que o Modal de Fim de Partida no celular fique proporcional e limpo */
    #message-overlay {
        font-family: 'Orbitron', sans-serif !important;
        font-weight: 900 !important;
        
        text-shadow: 0px 3px 0px #000, 0px 0px 15px rgba(78, 205, 196, 0.5) !important;
    }
}


/* =========================================================
   CONTORNOS SÓLIDOS E NÍTIDOS (STROKE ATRÁS DO FILL)
   ========================================================= */
* {
    /* MÁGICA DA NITIDEZ: Força a borda a renderizar ATRÁS do texto */
    paint-order: stroke fill !important;
}

/* Títulos Gigantes e Modais (Contorno Grosso de 2.5px) */
#mode-screen h1, #start-screen h2, #lobby-screen h1, #match-over-screen h1 {
    -webkit-text-stroke: 2.5px #000 !important;
    text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 0px 5px 15px rgba(0,0,0,0.9) !important;
}

/* Subtítulos e Botões Grandes (Contorno Médio de 1.5px) */
#mode-screen p, #start-screen p, #tank-subtitle, #match-over-subtitle, #lobby-screen p, .mode-btn, #message-overlay {
    -webkit-text-stroke: 1.5px #000 !important;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0px 3px 10px rgba(0,0,0,0.8) !important;
}

/* Elementos Pequenos e HUD (Contorno Fino de 1px) */
.tank-name, .tank-shot, .player-name-display, .small-text, .sp-status, #score-hud, #theme-indicator, #wind-indicator, .sys-btn, .sp-btn, .audio-ui button, .snes-button::after {
    -webkit-text-stroke: 1px #000 !important;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000 !important;
}


/* =========================================================
   CORES CLARAS E VIBRANTES (CONTRASTE AAA COM O CONTORNO)
   Garante que nenhum texto fique preto e perca a forma
   ========================================================= */
.tank-name { color: #f1c40f !important; } /* Dourado Neon */
.tank-shot { color: #4ecdc4 !important; } /* Ciano Tecnológico */
.player-name-display { color: #ffffff !important; } /* Branco Puro */
.small-text, .sp-status { color: #ecf0f1 !important; } /* Prata Brilhante */
#score-hud { color: #ffffff !important; }
#theme-indicator { color: #f1c40f !important; }
#wind-indicator { color: #4ecdc4 !important; }
.sys-btn, .sp-btn, .audio-ui button { color: #ffffff !important; }

/* Destaques Especiais no HUD */
.sp-btn#btn-nuke { color: #f1c40f !important; } /* Nuke Dourado */
.sp-btn#btn-spread { color: #ff6b6b !important; } /* Spread Vermelho */
.sp-btn#btn-heavy { color: #3498db !important; } /* Heavy Azul */

/* Repasse de garantia no text-stroke */
.tank-name, .tank-shot, .player-name-display, .small-text, .sp-status, #score-hud, #theme-indicator, #wind-indicator, .sys-btn, .sp-btn, .audio-ui button, .snes-button::after {
    paint-order: stroke fill !important;
    -webkit-text-stroke: 1.5px #000 !important;
    text-shadow: 2px 2px 0 #000, -1px -1px 0 #000 !important;
}


/* =========================================================
   MENSAGEM DE VITÓRIA CARTOON (ESTILO DESENHO ANIMADO)
   ========================================================= */
.cartoon-victory {
    font-family: 'Fredoka One', cursive !important;
    font-size: 4rem !important;
    color: #f1c40f !important;
    -webkit-text-stroke: 3px #000 !important;
    text-shadow: 6px 6px 0px #000, 0px 0px 25px rgba(241, 196, 15, 0.6) !important;
    paint-order: stroke fill !important;
    display: block !important;
    line-height: 1.1 !important;
    margin-bottom: 20px !important;
    letter-spacing: 2px !important;
}

/* =========================================================
   SISTEMA DE TOKENS (HUD PREMIUM)
   ========================================================= */



/* =========================================================
   ANIMATIONS
   ========================================================= */
@keyframes dropIn {
    0% { transform: translateY(-200%) rotate(-5deg) scale(0.8); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
}

@keyframes explodeBox {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2) rotate(3deg); opacity: 0.8; filter: brightness(2); }
    100% { transform: scale(0); opacity: 0; filter: brightness(0); }
}

.falling-banner {
    animation: dropIn 0.8s cubic-bezier(0.25, 1.5, 0.5, 1) forwards;
}

.explosion-particle {
    position: fixed;
    width: 8px;
    height: 8px;
    background: #f1c40f;
    border-radius: 50%;
    pointer-events: none;
    z-index: 999999;
    animation: explodeParticle 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes explodeParticle {
    0% { transform: scale(1) translate(0, 0); opacity: 1; }
    100% { transform: scale(0) var(--translate-end); opacity: 0; }
}
/* =========================================================
   SISTEMA DE TOKENS (HUD PREMIUM MINIMALISTA)
   ========================================================= */

#token-count { 
    color: #f1c40f !important; 
    font-size: 1.1rem !important; /* Tamanho proporcionalmente menor */
}





#token-display {
    position: absolute !important;
    top: 195px !important; /* Deslocado mais para baixo, limpando completamente a HUD do P1 */
    left: 15px !important; /* Mantém o alinhamento estrito à esquerda */
    width: 180px !important; /* Mesma largura da HUD do jogador */
    transform: none !important;
    background: linear-gradient(180deg, rgba(15,15,25,0.96), rgba(5,5,10,0.99)) !important;
    border: 2px solid #f1c40f !important;
    border-radius: 4px !important;
    padding: 3px 8px !important; /* Padding reduzido para tornar a box bem menor */
    box-sizing: border-box !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.8), inset 0 0 4px rgba(241,196,15,0.15) !important;
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 900 !important;
    font-size: 0.75rem !important; /* Fonte miniaturizada para ficar discreta */
    color: #fff !important;
    -webkit-text-stroke: 0px !important;
    text-shadow: 0 1px 2px #000, 0 0 5px #f1c40f !important;
    z-index: 10000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    pointer-events: none !important;
}
#token-count {
    color: #f1c40f !important;
    font-size: 0.95rem !important; /* Proporcional ao novo tamanho reduzido */
}


/* =========================================================
   SISTEMA DE INVENTÁRIO MMO (HUD & MODAL)
   ========================================================= */

#btn-inventory:hover {
    background: linear-gradient(180deg, rgba(40,55,80,0.95), rgba(25,35,50,0.98)) !important;
    transform: scale(1.02) !important;
}

#inventory-overlay {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important;
    background: rgba(0,0,0,0.85) !important;
    backdrop-filter: blur(8px) !important;
    z-index: 100000 !important;
    display: none; /* Flex via JS */
    align-items: center !important;
    justify-content: center !important;
}

#inventory-modal {
    background: linear-gradient(180deg, #1e1e24, #121215) !important;
    border: 3px solid #4ecdc4 !important;
    border-radius: 12px !important;
    padding: 30px !important;
    width: 90vw !important;
    max-width: 650px !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    text-align: center !important;
    box-shadow: 0 0 40px rgba(78, 205, 196, 0.4), inset 0 0 20px rgba(0,0,0,0.8) !important;
}

.inv-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)) !important; /* Grid flexível */
    gap: 6px !important;
    justify-content: center !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

.inv-slot {
    width: 50px !important;
    height: 50px !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid #444 !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
.inv-slot:hover {
    border-color: #f1c40f !important;
    background: rgba(241,196,15,0.2) !important;
    box-shadow: 0 0 10px rgba(241,196,15,0.4) !important;
}


#btn-inventory {
    position: absolute !important;
    top: 230px !important; /* Exatamente abaixo da box de tokens (195px + altura) */
    left: 15px !important; /* Alinhamento militar com a HUD do P1 */
    width: 120px !important; /* Botão drasticamente menor que a HUD (180px) */
    background: linear-gradient(180deg, rgba(30,40,60,0.95), rgba(15,20,30,0.98)) !important;
    border: 2px solid #4ecdc4 !important;
    border-radius: 4px !important;
    padding: 4px 6px !important; /* Estreito e minimalista */
    box-sizing: border-box !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.8), inset 0 0 5px rgba(78,205,196,0.2) !important;
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 900 !important;
    font-size: 0.65rem !important; /* Fonte bem discreta */
    color: #fff !important;
    text-align: center !important;
    cursor: pointer !important;
    z-index: 50 !important; /* Reduzido para não vazar nas telas principais */
    transition: all 0.2s ease !important;
    display: none; /* Controlado via motor Javascript */
}


#btn-shopping {
    position: absolute !important;
    top: 265px !important; 
    left: 15px !important;
    width: 120px !important;
    background: linear-gradient(180deg, rgba(230,20,100,0.95), rgba(150,10,60,0.98)) !important; /* Rosa Neon Wasteland */
    border: 2px solid #ff006e !important;
    border-radius: 4px !important;
    padding: 6px 6px !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.8), inset 0 0 8px rgba(255,0,110,0.4) !important;
    font-family: 'Bangers', cursive !important;
    font-size: 1.1rem !important;
    letter-spacing: 1px !important;
    color: #fff !important;
    -webkit-text-stroke: 1px #000 !important;
    text-shadow: 2px 2px 0px #000 !important;
    text-align: center !important;
    cursor: pointer !important;
    z-index: 50 !important;
    display: none;
    transition: all 0.2s ease !important;
}
#btn-shopping:hover { transform: scale(1.05) !important; background: linear-gradient(180deg, rgba(255,30,120,0.95), rgba(180,20,80,0.98)) !important; border-color: #fff !important; }

#shop-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.85); backdrop-filter: blur(10px);
    z-index: 100000; display: none; align-items: center; justify-content: center;
}
.cartoon-shop {
    background: #ffbe0b; border: 6px solid #000; border-radius: 20px; padding: 30px;
    width: 90vw; max-width: 700px; text-align: center; box-shadow: 10px 10px 0 #000;
}
.cartoon-shop h2.shop-title {
    font-family: 'Bangers', cursive !important; font-size: 4rem !important; letter-spacing: 2px !important; color: #ff006e !important;
    -webkit-text-stroke: 2px #000; text-shadow: 4px 4px 0 #000; margin: 0 0 10px 0;
}
.cartoon-shop p.shop-desc { font-family: 'Orbitron', sans-serif; font-weight:bold; color: #000; }
.shop-grid { display: flex; gap: 15px; justify-content: center; margin: 30px 0; flex-wrap: wrap; }
.shop-item { background: #fff; border: 4px solid #000; border-radius: 15px; padding: 15px; width: 160px; box-shadow: 5px 5px 0 #000; }
.shop-ico { font-size: 4rem; margin-bottom: 10px; }
.shop-item h3 { font-family: 'Orbitron', sans-serif; font-size: 0.9rem; color: #000; font-weight: 900; margin-bottom: 15px;}
.buy-btn { background: #3a86ff; border: 3px solid #000; color: #fff; font-family: 'Fredoka One', cursive; padding: 10px; border-radius: 8px; cursor: pointer; width: 100%; font-size: 0.9rem; box-shadow: 3px 3px 0 #000; transition: transform 0.1s; }
.buy-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 #000; }
.close-btn { background: #ff006e; border: 4px solid #000; color: #fff; font-family: 'Fredoka One', cursive; padding: 12px 30px; font-size: 1.5rem; border-radius: 12px; cursor: pointer; box-shadow: 5px 5px 0 #000; }

/* =========================================================
   PROMO BANNER RESPONSIVO (MOBILE E DESKTOP IDÊNTICOS)
   ========================================================= */
.wa-promo-img {
    max-width: 100%;
    max-height: 45vh;
    object-fit: contain;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8), 0 0 20px rgba(241,196,15,0.3);
    border: 3px solid rgba(241,196,15,0.7);
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}
.wa-promo-img:hover {
    transform: scale(1.02);
}
@media screen and (max-width: 900px) {
    .wa-promo-img {
        max-height: 35vh;
        width: 90%;
        margin-top: 10px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.8), 0 0 15px rgba(241,196,15,0.5);
    }
}