/* ==========================================================================
   SUPER GOULART WORLD — ARCADE RACING UI STYLES
   ========================================================================== */

:root {
    --primary-red: #E52521;
    --primary-blue: #1A54C9;
    --arcade-gold: #FFD700;
    --arcade-orange: #FF8C00;
    --neon-cyan: #00E5FF;
    --neon-green: #28A745;
    --princess-pink: #FF4081;
    --cosmic-purple: #7C4DFF;
    --dark-bg: #0A0E1A;
    --card-bg: rgba(16, 24, 48, 0.88);
    --hud-bg: rgba(8, 14, 30, 0.85);
    --border-glow: rgba(0, 229, 255, 0.6);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-drag: none;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--dark-bg);
    font-family: 'Montserrat', 'Arial Black', Impact, sans-serif;
    color: #FFFFFF;
}

/* Container do Canvas 3D Three.js */
#canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Camada Geral de Interface */
.ui-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: opacity 0.4s ease;
}

.interactive {
    pointer-events: auto;
}

/* ==========================================================================
   TELA DE SELEÇÃO DE PERSONAGEM
   ========================================================================== */

#selection-screen {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px 32px;
    z-index: 20;
    background: radial-gradient(circle at center 20%, transparent 40%, rgba(6, 9, 20, 0.75) 100%);
    pointer-events: none;
}

/* Cabeçalho do Jogo */
.selection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: auto;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 16px;
}

.game-logo {
    height: 72px;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6));
    transition: transform 0.25s ease;
}

.game-logo:hover {
    transform: scale(1.04);
}

.header-title-box {
    display: flex;
    flex-direction: column;
}

.header-tagline {
    font-size: 13px;
    letter-spacing: 3px;
    color: var(--arcade-gold);
    text-transform: uppercase;
    font-weight: 800;
}

.main-title {
    font-size: 32px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #FFFFFF;
    text-shadow: 0 0 16px var(--neon-cyan), 0 4px 6px rgba(0, 0, 0, 0.8);
}

/* Controles de Câmera / Áudio no Cabeçalho */
.header-actions {
    display: flex;
    gap: 12px;
}

.arcade-icon-btn {
    background: rgba(20, 32, 60, 0.85);
    border: 2px solid var(--neon-cyan);
    color: #FFFFFF;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.3);
    transition: all 0.2s ease;
}

.arcade-icon-btn:hover {
    background: var(--neon-cyan);
    color: #0A0E1A;
    transform: scale(1.1);
    box-shadow: 0 0 20px var(--neon-cyan);
}

.arcade-pill-btn {
    background: rgba(229, 37, 33, 0.85);
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
    padding: 10px 18px;
    border-radius: 24px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 14px rgba(229, 37, 33, 0.5);
    transition: all 0.2s ease;
}

.arcade-pill-btn:hover {
    background: #FF1744;
    transform: scale(1.06);
    box-shadow: 0 6px 20px rgba(255, 23, 68, 0.7);
}

/* Área Central: Painel Lateral com Ficha Técnica & Atributos */
.selection-middle {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    pointer-events: none;
    flex: 1;
}

/* ESCONDIDO NA TELA INICIAL — Aparece apenas ao selecionar o piloto! */
.character-card-panel {
    display: none;
    position: relative;
    background: linear-gradient(135deg, rgba(14, 22, 46, 0.95), rgba(8, 12, 28, 0.92));
    border: 3px solid var(--arcade-gold);
    border-radius: 20px;
    padding: 24px;
    width: 380px;
    pointer-events: auto;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7), inset 0 0 15px rgba(255, 215, 0, 0.25);
    backdrop-filter: blur(10px);
}

.character-card-panel.active {
    display: block;
    animation: slideInRight 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-close-panel {
    position: absolute;
    top: 14px;
    right: 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-close-panel:hover {
    background: rgba(229, 37, 33, 0.8);
    border-color: #FF1744;
    transform: scale(1.15);
}

@keyframes slideInRight {
    from { transform: translateX(70px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.char-badge {
    display: inline-block;
    padding: 4px 12px;
    background: linear-gradient(90deg, var(--primary-red), var(--arcade-orange));
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(229, 37, 33, 0.4);
}

.char-name {
    font-size: 38px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #FFFFFF;
    text-shadow: 0 3px 0 #1A1A1A, 0 0 20px rgba(255, 215, 0, 0.8);
    margin-bottom: 4px;
    line-height: 1.1;
}

.char-archetype {
    font-size: 14px;
    color: var(--neon-cyan);
    font-weight: 700;
    margin-bottom: 12px;
}

/* Pílulas de Transmissão (ENERGIA, CORAGEM, etc) */
.char-traits-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.trait-pill {
    font-size: 10px;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

/* Barras de Atributos com Segmentos */
.stats-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
    background: rgba(0, 0, 0, 0.25);
    padding: 14px;
    border-radius: 12px;
}

.stat-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-header {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #E0E0E0;
}

.stat-val {
    color: var(--arcade-gold);
}

.stat-bar-track {
    height: 12px;
    background: #101626;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
}

.stat-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #FFB300, #FF5722);
    border-radius: 6px;
    transition: width 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2);
    box-shadow: 0 0 10px rgba(255, 140, 0, 0.6);
}

/* Barra de Seleção Inferior (Os 4 Personagens) */
.selection-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    pointer-events: auto;
}

.characters-carousel {
    display: flex;
    gap: 16px;
    background: rgba(10, 16, 36, 0.85);
    padding: 10px 18px;
    border-radius: 30px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.char-tab-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 20px;
    border: 2px solid transparent;
    background: rgba(255, 255, 255, 0.06);
    color: #CCCCCC;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.25s ease;
}

.char-tab-btn .tab-icon {
    font-size: 20px;
}

.char-tab-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    transform: translateY(-2px);
}

.char-tab-btn.active {
    color: #0A0E1A;
    background: linear-gradient(90deg, var(--arcade-gold), #FFB703);
    border-color: #FFFFFF;
    box-shadow: 0 0 18px rgba(255, 215, 0, 0.8);
    transform: translateY(-4px) scale(1.05);
}

/* Botão Principal de Ação */
.btn-select-confirm {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 42px;
    font-family: inherit;
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #FFFFFF;
    background: linear-gradient(90deg, #FF3D00, #E52521);
    border: 3px solid #FFF;
    border-radius: 40px;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(229, 37, 33, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.4);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-select-confirm:hover {
    transform: scale(1.08);
    box-shadow: 0 12px 35px rgba(229, 37, 33, 0.9), inset 0 2px 6px rgba(255, 255, 255, 0.7);
}

.btn-select-confirm:active {
    transform: scale(0.98);
}

/* Botões de Navegação Lateral no Showroom (◀ e ▶) */
.showroom-side-nav {
    position: absolute;
    top: 48%;
    transform: translateY(-50%);
    z-index: 45;
    background: rgba(10, 18, 42, 0.88);
    border: 3px solid var(--neon-cyan);
    border-radius: 24px;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #FFFFFF;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 229, 255, 0.45);
    backdrop-filter: blur(8px);
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
    touch-action: manipulation;
}

.showroom-side-nav:hover {
    transform: translateY(-50%) scale(1.1);
    background: rgba(0, 229, 255, 0.3);
    box-shadow: 0 0 30px var(--neon-cyan);
}

.showroom-side-nav:active {
    transform: translateY(-50%) scale(0.95);
}

.prev-side-nav {
    left: 24px;
}

.next-side-nav {
    right: 24px;
}

.side-nav-icon {
    font-size: 28px;
    line-height: 1;
    color: var(--neon-cyan);
}

.side-nav-text {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
}

/* Botão de Início Rápido na Seleção (CORRER AGORA 🏁) */
.showroom-play-zone {
    margin-top: 14px;
    display: flex;
    justify-content: center;
}

.btn-mega-play {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 14px 40px;
    border-radius: 40px;
    background: linear-gradient(135deg, #00E676, #00C853 50%, #009624);
    border: 3.5px solid #FFFFFF;
    color: #FFFFFF;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 8px 30px rgba(0, 230, 118, 0.75), inset 0 2px 6px rgba(255, 255, 255, 0.8);
    transition: transform 0.18s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.18s ease;
    user-select: none;
    touch-action: manipulation;
}

.btn-mega-play:hover {
    transform: scale(1.06);
    box-shadow: 0 12px 38px rgba(0, 230, 118, 0.95), inset 0 2px 8px #FFFFFF;
}

.btn-mega-play:active {
    transform: scale(0.96);
}

.mega-flag {
    font-size: 32px;
}

.mega-text-group {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.mega-title {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.mega-sub {
    font-size: 12px;
    font-weight: 800;
    color: #E8F5E9;
    letter-spacing: 0.5px;
}

.mega-sub strong {
    color: #FFFF00;
}

.mega-arrow {
    font-size: 24px;
    transition: transform 0.2s ease;
}

.btn-mega-play:hover .mega-arrow {
    transform: translateX(6px);
}

/* Instrução de Rotação 3D */
.hint-turntable {
    position: absolute;
    bottom: 24px;
    left: 32px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(0, 0, 0, 0.4);
    padding: 6px 14px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ==========================================================================
   MODAL DE PERSONALIZAÇÃO DO JOGADOR
   ========================================================================== */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(4, 8, 20, 0.85);
    backdrop-filter: blur(12px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal-backdrop.active {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.customization-modal {
    background: linear-gradient(135deg, #121A38, #0B1024);
    border: 4px solid var(--arcade-gold);
    border-radius: 28px;
    width: 480px;
    max-width: 90vw;
    padding: 36px 32px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(255, 215, 0, 0.4);
    transform: scale(0.85);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.modal-backdrop.active .customization-modal {
    transform: scale(1);
}

.modal-glow-bg {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    height: 150px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.4) 0%, transparent 70%);
    pointer-events: none;
}

.modal-sub-label {
    font-size: 13px;
    font-weight: 800;
    color: var(--arcade-gold);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.modal-chosen-character {
    font-size: 34px;
    font-weight: 900;
    color: #FFFFFF;
    text-shadow: 0 0 15px var(--neon-cyan);
    margin-bottom: 24px;
}

.modal-question {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #FFE066;
    margin-bottom: 16px;
    text-transform: uppercase;
}

/* Campo de Input Estilizado */
.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.name-input-wrapper {
    position: relative;
    width: 100%;
}

.arcade-input {
    width: 100%;
    padding: 16px 20px;
    font-family: inherit;
    font-size: 24px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-align: center;
    color: #FFFFFF;
    background: rgba(0, 0, 0, 0.5);
    border: 3px solid var(--neon-cyan);
    border-radius: 16px;
    outline: none;
    box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.6), 0 0 15px rgba(0, 229, 255, 0.3);
    transition: all 0.25s ease;
}

.arcade-input:focus {
    border-color: var(--arcade-gold);
    box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.6), 0 0 25px rgba(255, 215, 0, 0.6);
}

.input-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #8899B3;
    padding: 0 4px;
}

.char-counter {
    font-weight: 800;
    color: var(--neon-cyan);
}

.modal-info-text {
    font-size: 12px;
    color: #A0B2CE;
    line-height: 1.5;
    margin-bottom: 28px;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
    border-radius: 10px;
}

.modal-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.btn-modal-cancel {
    padding: 14px 24px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    color: #B0BEC5;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-modal-cancel:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #FFFFFF;
}

.btn-modal-confirm {
    flex: 1;
    padding: 14px 28px;
    font-family: inherit;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #0A0E1A;
    background: linear-gradient(90deg, var(--arcade-gold), #FFA000);
    border: 3px solid #FFFFFF;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(255, 160, 0, 0.6);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-modal-confirm:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 28px rgba(255, 160, 0, 0.9);
}

/* ==========================================================================
   HUD DURANTE A CORRIDA (IN-GAME)
   ========================================================================== */

#racing-hud {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    padding: 20px 28px;
    display: none;
    flex-direction: column;
    justify-content: space-between;
}

#racing-hud.active {
    display: flex;
}

/* Topo do HUD */
.hud-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* Cartão do Piloto com Nome Customizado */
.hud-driver-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--hud-bg);
    border: 2px solid var(--arcade-gold);
    border-radius: 20px;
    padding: 10px 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 0 10px rgba(255, 215, 0, 0.2);
    backdrop-filter: blur(8px);
}

.hud-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    border: 2px solid #FFFFFF;
}

.hud-driver-info {
    display: flex;
    flex-direction: column;
}

.hud-custom-name {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #FFFFFF;
    text-shadow: 0 0 10px var(--arcade-gold);
}

.hud-char-title {
    font-size: 12px;
    color: var(--neon-cyan);
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* Badge de Posição Central (1º / 4) */
.hud-position-badge {
    background: linear-gradient(135deg, rgba(20, 30, 60, 0.9), rgba(10, 15, 35, 0.95));
    border: 3px solid var(--neon-cyan);
    border-radius: 24px;
    padding: 10px 28px;
    text-align: center;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hud-pos-number {
    font-size: 46px;
    font-weight: 900;
    line-height: 1;
    color: var(--arcade-gold);
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
}

.hud-pos-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #B0C4DE;
    text-transform: uppercase;
}

/* Indicador de Voltas e Tempo */
.hud-lap-timer {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.hud-lap-box {
    background: var(--hud-bg);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    padding: 8px 16px;
    font-size: 16px;
    font-weight: 900;
    color: #FFFFFF;
}

.hud-lap-box span {
    color: var(--arcade-gold);
}

.hud-lap-time {
    font-size: 20px;
    font-weight: 900;
    font-family: monospace;
    color: var(--neon-cyan);
    text-shadow: 0 0 8px var(--neon-cyan);
}

/* Meio: Leaderboard Lateral em Tempo Real */
.hud-middle-bar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: auto;
    margin-bottom: auto;
}

.hud-live-ranking {
    background: rgba(10, 16, 36, 0.85);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 12px 16px;
    width: 240px;
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ranking-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--arcade-gold);
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 4px;
}

.ranking-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 8px;
}

.ranking-item.is-player {
    background: rgba(255, 215, 0, 0.25);
    border: 1px solid var(--arcade-gold);
    color: #FFFFFF;
}

.ranking-item .rank-pos {
    color: var(--arcade-gold);
    font-weight: 900;
    width: 24px;
}

/* Fundo: Velocímetro e Controles */
.hud-bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.hud-controls-hint {
    background: rgba(0, 0, 0, 0.5);
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 12px;
    color: #B0BEC5;
    display: flex;
    gap: 16px;
}

.hud-controls-hint kbd {
    background: #263238;
    color: #ECEFF1;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 800;
    border-bottom: 2px solid #10161A;
}

.hud-speedometer {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--hud-bg);
    border: 3px solid var(--primary-red);
    border-radius: 20px;
    padding: 12px 24px;
    box-shadow: 0 0 20px rgba(229, 37, 33, 0.4);
}

.speed-number {
    font-size: 42px;
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1;
}

.speed-unit {
    font-size: 12px;
    font-weight: 800;
    color: var(--primary-red);
    letter-spacing: 1px;
}

.hud-top-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    pointer-events: auto;
}

.hud-action-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.hud-mini-btn {
    pointer-events: auto;
    background: rgba(14, 26, 56, 0.85);
    border: 2px solid var(--neon-cyan);
    color: #FFFFFF;
    padding: 7px 14px;
    border-radius: 16px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.hud-mini-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.6);
}

.hud-mini-btn.btn-exit-race {
    background: rgba(229, 37, 33, 0.85);
    border-color: #FFFFFF;
}

.hud-mini-btn.btn-exit-race:hover {
    background: #FF1744;
    box-shadow: 0 0 14px rgba(255, 23, 68, 0.6);
}

/* ==========================================================================
   TELA DE RESULTADOS / PÓDIO & CAMPEONATO
   ========================================================================== */

#results-modal {
    position: fixed;
    inset: 0;
    background: rgba(4, 8, 20, 0.92);
    backdrop-filter: blur(16px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 120;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

#results-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.results-card {
    background: linear-gradient(135deg, #101833, #070B1A);
    border: 4px solid var(--arcade-gold);
    border-radius: 28px;
    width: 640px;
    max-width: 92vw;
    padding: 36px 32px;
    text-align: center;
    box-shadow: 0 0 50px rgba(255, 215, 0, 0.5);
}

.results-banner {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--neon-cyan);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.results-title {
    font-size: 40px;
    font-weight: 900;
    color: var(--arcade-gold);
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
    margin-bottom: 24px;
}

.podium-table {
    width: 100%;
    margin-bottom: 28px;
    border-collapse: separate;
    border-spacing: 0 8px;
}

.podium-row {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: transform 0.2s ease;
}

.podium-row.is-player {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.25), rgba(255, 140, 0, 0.25));
    border: 2px solid var(--arcade-gold);
}

.podium-row td {
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 800;
}

.podium-row td:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.podium-row td:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.results-buttons {
    display: flex;
    gap: 14px;
    justify-content: center;
}

/* Notificação Flash de Salvamento */
.save-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: linear-gradient(90deg, #00C853, #64DD17);
    color: #0A0E1A;
    font-weight: 900;
    font-size: 14px;
    padding: 12px 28px;
    border-radius: 30px;
    box-shadow: 0 8px 24px rgba(0, 200, 83, 0.6);
    z-index: 200;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

.save-toast.active {
    transform: translateX(-50%) translateY(0);
}

/* Responsividade para telas menores */
@media (max-width: 900px) {
    .selection-middle {
        justify-content: center;
    }
    .character-card-panel {
        width: 100%;
        max-width: 360px;
    }
    .char-tab-btn span.tab-name {
        display: none;
    }
    .char-tab-btn {
        padding: 10px 14px;
    }
    .game-logo {
        height: 52px;
    }
}

/* Card de Visualização da Pista Oficial (Cenário) */
.track-preview-card {
    position: absolute;
    bottom: 24px;
    right: 32px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(10, 16, 36, 0.88);
    border: 2px solid var(--neon-cyan);
    border-radius: 18px;
    padding: 8px 16px 8px 10px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6), 0 0 15px rgba(0, 229, 255, 0.3);
    backdrop-filter: blur(10px);
    pointer-events: auto;
    transition: transform 0.2s ease;
}

.track-preview-card:hover {
    transform: scale(1.04);
    border-color: var(--arcade-gold);
}

.track-thumb {
    width: 64px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.track-info {
    display: flex;
    flex-direction: column;
}

.track-badge {
    font-size: 10px;
    font-weight: 800;
    color: var(--arcade-gold);
    letter-spacing: 1px;
}

.track-name {
    font-size: 14px;
    font-weight: 900;
    color: #FFFFFF;
    letter-spacing: 0.5px;
}

/* Fundo Cênico no Pódio e Campeonato com a Imagem do Cenário */
.results-card {
    position: relative;
    overflow: hidden;
}

.results-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../cenario.jpg') center/cover no-repeat;
    opacity: 0.14;
    filter: blur(3px);
    pointer-events: none;
    z-index: 0;
}

.results-card > * {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   CONTROLES TOUCH PARA DISPOSITIVOS MOBILE E TABLETS (ARCADE DEDICADO)
   ========================================================================== */

.mobile-controls-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    pointer-events: none;
    z-index: 999;
    display: block !important; /* Sempre visível na tela */
}

/* Ocultar apenas se explicitamente desligado pelo jogador */
.mobile-controls-overlay.hidden {
    display: none !important;
}

/* Barra Superior de Auxílio do Mobile (Auto-Gás e Reset) */
.touch-top-bar {
    position: fixed;
    top: max(80px, env(safe-area-inset-top, 80px));
    left: max(20px, env(safe-area-inset-left, 20px));
    display: flex;
    gap: 12px;
    pointer-events: none;
    z-index: 1000;
}

.touch-pill-btn {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 24px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 900;
    color: #FFFFFF;
    background: linear-gradient(135deg, rgba(20, 35, 75, 0.92), rgba(10, 18, 42, 0.95));
    border: 2.5px solid rgba(0, 229, 255, 0.5);
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 16px rgba(0, 229, 255, 0.3);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.touch-pill-btn:active {
    transform: scale(0.93);
}

.touch-pill-btn.active {
    border-color: var(--neon-cyan);
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.28), rgba(14, 26, 56, 0.95));
    box-shadow: 0 0 22px rgba(0, 229, 255, 0.65), inset 0 0 10px rgba(0, 229, 255, 0.4);
}

.pill-dot {
    color: #00E676;
    font-size: 16px;
    animation: pulseDot 1.2s infinite;
}

@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1.1); }
    50% { opacity: 0.35; transform: scale(0.85); }
}

.touch-pill-btn.reset-pill {
    background: linear-gradient(135deg, rgba(45, 55, 90, 0.9), rgba(20, 25, 50, 0.95));
    border-color: var(--arcade-gold);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 16px rgba(255, 215, 0, 0.3);
}

.touch-pill-btn.reset-pill:active {
    background: var(--arcade-gold);
    color: #0A0E1A;
}

/* Clusters de Controle Virtual */
.touch-cluster {
    position: fixed;
    pointer-events: auto;
    z-index: 1000;
    display: flex;
}

/* Cluster Esquerdo: Direção (Volante Digital / D-Pad) */
.touch-left-cluster {
    bottom: max(20px, env(safe-area-inset-bottom, 20px));
    left: max(20px, env(safe-area-inset-left, 20px));
    align-items: center;
}

.steer-dpad {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(145deg, rgba(16, 28, 62, 0.88), rgba(6, 12, 30, 0.95));
    border: 3px solid rgba(0, 229, 255, 0.55);
    border-radius: 54px;
    padding: 10px 16px;
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.75), 0 0 26px rgba(0, 229, 255, 0.35), inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

.steer-center-indicator {
    font-size: 26px;
    opacity: 0.9;
    user-select: none;
    pointer-events: none;
    filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.6));
    animation: gentleBob 2s infinite ease-in-out;
}

@keyframes gentleBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* Cluster Direito: Acelerador, Freio e Drift */
.touch-right-cluster {
    bottom: max(20px, env(safe-area-inset-bottom, 20px));
    right: max(20px, env(safe-area-inset-right, 20px));
    align-items: flex-end;
    gap: 16px;
    background: linear-gradient(145deg, rgba(16, 28, 62, 0.75), rgba(6, 12, 30, 0.9));
    border: 2px solid rgba(0, 229, 255, 0.35);
    border-radius: 54px;
    padding: 10px 16px;
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.75), 0 0 20px rgba(0, 229, 255, 0.25);
}

/* Botões Virtuais Tácteis (Touch-Action None é Essencial) */
.touch-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #FFFFFF;
    font-family: inherit;
    font-weight: 900;
    cursor: pointer;
    touch-action: none !important;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.08s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.08s ease, box-shadow 0.08s ease;
    position: relative;
    overflow: hidden;
}

.touch-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 45%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    pointer-events: none;
}

.touch-btn:active, .touch-btn.active {
    transform: scale(0.88) !important;
    filter: brightness(1.5) !important;
}

.touch-btn .touch-icon {
    font-size: 28px;
    line-height: 1;
    pointer-events: none;
}

.touch-btn .touch-text {
    font-size: 10px;
    letter-spacing: 0.8px;
    font-weight: 900;
    margin-top: 3px;
    pointer-events: none;
}

/* Botões de Direção (Esquerda e Direita) */
.steer-btn {
    width: 82px;
    height: 82px;
    background: radial-gradient(circle at 35% 30%, #254a94, #122b5e 55%, #081634);
    border: 3.5px solid var(--neon-cyan);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.65), 0 0 22px rgba(0, 229, 255, 0.55), inset 0 2px 8px rgba(255, 255, 255, 0.6);
}

.steer-btn:active, .steer-btn.active {
    background: radial-gradient(circle at 35% 30%, #00e5ff, #0091ea 55%, #01579b);
    box-shadow: 0 0 38px var(--neon-cyan), inset 0 0 20px #FFFFFF;
}

/* Botão Acelerar (Destaque Principal Gigante) */
.gas-btn {
    width: 96px;
    height: 96px;
    background: radial-gradient(circle at 35% 30%, #69F0AE, #00E676 40%, #00A344 75%, #004D20);
    border: 4px solid #FFFFFF;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.7), 0 0 35px rgba(0, 230, 118, 0.9), inset 0 3px 10px rgba(255, 255, 255, 0.9);
}

.gas-btn .touch-icon {
    font-size: 38px;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9));
}

.gas-btn .touch-text {
    font-size: 11px;
    letter-spacing: 1px;
}

.gas-btn:active, .gas-btn.active {
    box-shadow: 0 0 50px #00FF88, inset 0 0 26px #FFFFFF;
}

/* Botão Ré / Freio */
.brake-btn {
    width: 76px;
    height: 76px;
    background: radial-gradient(circle at 35% 30%, #FF5252, #FF1744 40%, #C50024 75%, #5D0010);
    border: 3.5px solid #FFFFFF;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.65), 0 0 26px rgba(255, 23, 68, 0.8), inset 0 2px 8px rgba(255, 255, 255, 0.8);
}

.brake-btn:active, .brake-btn.active {
    box-shadow: 0 0 38px #FF1744, inset 0 0 20px #FFFFFF;
}

/* Botão Drift / Derrapagem */
.drift-btn {
    width: 76px;
    height: 76px;
    background: radial-gradient(circle at 35% 30%, #D1C4E9, #7C4DFF 40%, #651FFF 75%, #311B92);
    border: 3.5px solid #FFFFFF;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.65), 0 0 26px rgba(124, 77, 255, 0.8), inset 0 2px 8px rgba(255, 255, 255, 0.8);
}

.drift-btn:active, .drift-btn.active {
    box-shadow: 0 0 38px #B388FF, inset 0 0 20px #FFFFFF;
}

/* ==========================================================================
   ADAPTAÇÃO RESPONSIVA DO HUD PARA SMARTPHONES E TABLETS (<= 900px)
   ========================================================================== */

@media (max-width: 900px) {
    #racing-hud {
        padding: 12px 14px;
    }

    .hud-driver-card {
        padding: 6px 12px;
        gap: 8px;
    }

    .hud-avatar {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }

    .hud-custom-name {
        font-size: 16px;
    }

    .hud-char-title {
        font-size: 10px;
    }

    .hud-position-badge {
        padding: 6px 16px;
    }

    .hud-pos-number {
        font-size: 32px;
    }

    .hud-pos-label {
        font-size: 9px;
    }

    .hud-lap-box {
        font-size: 13px;
        padding: 5px 10px;
    }

    .hud-lap-time {
        font-size: 15px;
    }

    .hud-mini-btn {
        padding: 5px 10px;
        font-size: 11px;
    }

    .hud-controls-hint {
        display: none !important;
    }

    /* Reposiciona velocímetro no mobile para o topo direito para NÃO cobrir pedais */
    .hud-bottom-bar {
        justify-content: center;
        pointer-events: none;
    }

    .hud-speedometer {
        position: absolute;
        top: 84px;
        right: 14px;
        padding: 6px 14px;
        border-width: 2px;
        background: rgba(14, 20, 42, 0.85);
        backdrop-filter: blur(6px);
        pointer-events: none;
    }

    .speed-number {
        font-size: 26px;
    }

    .speed-unit {
        font-size: 9px;
    }

    /* Ranking ao vivo compacto */
    .hud-middle-bar {
        margin-top: 10px;
        margin-bottom: 0;
    }

    .hud-live-ranking {
        width: 175px;
        padding: 8px 10px;
        font-size: 11px;
        background: rgba(10, 16, 36, 0.78);
        border-radius: 12px;
    }

    .ranking-item {
        font-size: 11px;
        padding: 2px 4px;
    }

    /* Ajustes dos botões táteis no mobile */
    .touch-left-cluster {
        bottom: max(14px, env(safe-area-inset-bottom, 14px));
        left: max(14px, env(safe-area-inset-left, 14px));
    }

    .touch-right-cluster {
        bottom: max(14px, env(safe-area-inset-bottom, 14px));
        right: max(14px, env(safe-area-inset-right, 14px));
        gap: 10px;
    }

    .steer-dpad {
        gap: 8px;
        padding: 6px 10px;
    }

    .steer-btn {
        width: 66px;
        height: 66px;
    }

    .steer-btn .touch-icon {
        font-size: 22px;
    }

    .gas-btn {
        width: 76px;
        height: 76px;
    }

    .gas-btn .touch-icon {
        font-size: 28px;
    }

    .brake-btn, .drift-btn {
        width: 58px;
        height: 58px;
    }

    .brake-btn .touch-icon, .drift-btn .touch-icon {
        font-size: 20px;
    }

    .touch-top-bar {
        top: max(78px, env(safe-area-inset-top, 78px));
        left: max(14px, env(safe-area-inset-left, 14px));
        gap: 8px;
    }

    .touch-pill-btn {
        padding: 6px 12px;
        font-size: 11px;
    }

    /* Ocultar elementos secundários para evitar sobreposição no mobile */
    .hint-turntable {
        display: none !important;
    }

    .track-preview-card {
        display: none !important;
    }

    .selection-bottom {
        margin-bottom: 74px;
    }
}

/* Telas de Smartphones Pequenos e Orientação Retrato (<= 600px) */
@media (max-width: 600px) {
    .touch-left-cluster {
        bottom: max(10px, env(safe-area-inset-bottom, 10px));
        left: max(8px, env(safe-area-inset-left, 8px));
    }

    .touch-right-cluster {
        bottom: max(10px, env(safe-area-inset-bottom, 10px));
        right: max(8px, env(safe-area-inset-right, 8px));
        gap: 6px;
        padding: 6px 8px;
    }

    .steer-dpad {
        gap: 6px;
        padding: 5px 8px;
    }

    .steer-center-indicator {
        display: none;
    }

    .steer-btn {
        width: 58px;
        height: 58px;
    }

    .steer-btn .touch-icon {
        font-size: 20px;
    }

    .steer-btn .touch-text {
        font-size: 9px;
    }

    .gas-btn {
        width: 66px;
        height: 66px;
    }

    .gas-btn .touch-icon {
        font-size: 26px;
    }

    .gas-btn .touch-text {
        font-size: 9px;
    }

    .brake-btn, .drift-btn {
        width: 52px;
        height: 52px;
    }

    .brake-btn .touch-icon, .drift-btn .touch-icon {
        font-size: 18px;
    }

    .brake-btn .touch-text, .drift-btn .touch-text {
        font-size: 8px;
    }

    .touch-top-bar {
        top: max(70px, env(safe-area-inset-top, 70px));
        left: max(8px, env(safe-area-inset-left, 8px));
        gap: 6px;
    }

    .touch-pill-btn {
        padding: 5px 10px;
        font-size: 10px;
    }

    .showroom-side-nav {
        display: none !important;
    }

    .selection-bottom {
        margin-bottom: 84px;
        gap: 8px;
    }

    .characters-carousel {
        padding: 5px 10px;
        gap: 6px;
    }

    .char-tab-btn {
        padding: 6px 10px;
        font-size: 12px;
    }

    .btn-mega-play {
        padding: 8px 20px;
    }

    .mega-flag {
        font-size: 24px;
    }

    .mega-title {
        font-size: 13px;
    }

    .mega-sub {
        font-size: 9px;
    }
}

/* ==========================================================================
   TELA DE DESPEDIDA (ENCERRAMENTO DE SESSÃO)
   ========================================================================== */

.farewell-screen {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center, #10162E, #050814);
    z-index: 300;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    animation: fadeIn 0.4s ease;
}

.farewell-screen.active {
    display: flex;
}

.farewell-screen h2 {
    font-size: 36px;
    color: var(--arcade-gold);
    font-weight: 900;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
    margin-bottom: 12px;
}

.farewell-screen p {
    font-size: 18px;
    color: #FFFFFF;
    margin-bottom: 8px;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}