/* =================================== */
/* ANIMAÇÕES (KEYFRAMES)               */
/* =================================== */
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 8px rgba(0, 255, 255, 0.3); }
    50% { transform: scale(1.02); box-shadow: 0 0 16px rgba(0, 255, 255, 0.6); }
    100% { transform: scale(1); box-shadow: 0 0 8px rgba(0, 255, 255, 0.3); }
}

@keyframes achievement-animation {
    0% { transform: scale(0.5) rotate(-10deg); opacity: 0; }
    20% { transform: scale(1.1) rotate(5deg); opacity: 1; }
    30% { transform: scale(1) rotate(-2deg); }
    80% { transform: scale(1) rotate(0deg); opacity: 1; }
    100% { transform: scale(1.2) rotate(10deg); opacity: 0; }
}


/* =================================== */
/* ESTILOS GERAIS E FUNDO              */
/* =================================== */
:root {
    --font-size-base: 14px;
    --font-size-small: 12px;
    --font-size-large: 16px;
}

body {
    background-color: #0a0a0a;
    background-image: linear-gradient(rgba(10, 10, 10, 0.85), rgba(10, 10, 10, 0.85));
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    color: #e0e0e0;
    font-family: 'Roboto Mono', monospace;
    font-size: var(--font-size-base);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 2em 1em;
    padding-bottom: 80px;
    box-sizing: border-box;
}

h1, h2 {
    color: #00ffff;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
}

h1 { margin-top: 0; margin-bottom: 20px; font-size: 2.2rem; text-transform: uppercase; }
h2 { border-bottom: 1px solid #444; padding-bottom: 8px; margin-top: 20px; margin-bottom: 15px; font-size: 1.1rem; }

/* =================================== */
/* CONTROLES DE MÚSICA                 */
/* =================================== */
#music-controls { position: fixed; top: 15px; right: 15px; display: flex; gap: 8px; background-color: rgba(30, 30, 30, 0.7); padding: 10px; border-radius: 25px; z-index: 101; backdrop-filter: blur(8px); border: 1px solid #444; }
#music-controls button { background: transparent; color: #00ffff; border: none; border-radius: 50%; width: 35px; height: 35px; font-size: 1.3rem; cursor: pointer; transition: all 0.2s ease-in-out; display: flex; align-items: center; justify-content: center; }
#music-controls button:hover { background-color: rgba(0, 255, 255, 0.1); transform: scale(1.1); }


/* =================================== */
/* LAYOUT PRINCIPAL (GRID)             */
/* =================================== */
#game-container { display: grid; grid-template-columns: 2fr 1fr; gap: 25px; width: 100%; max-width: 1400px; margin: auto; }
#main-panel, #world-panel { background-color: rgba(30, 30, 30, 0.75); padding: 20px; border-radius: 12px; border: 1px solid #444; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); backdrop-filter: blur(6px); transition: all 0.3s ease; }
#main-panel:hover, #world-panel:hover { border-color: #5f5f5f; }

/* =================================== */
/* PAINEL DO JOGADOR (DASHBOARD)       */
/* =================================== */
#player-dashboard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 20px 0; }
.stat-box { background-color: #2a2a2a; padding: 12px; border-radius: 8px; text-align: center; border-left: 4px solid #008080; transition: all 0.3s ease; }
.stat-box:hover { transform: translateY(-4px); background-color: #353535; }
.stat-box-large { grid-column: span 2; }
.stat-box .label { font-size: 0.7rem; color: #aaa; text-transform: uppercase; }
.stat-box .value { font-size: 1.3rem; font-weight: bold; margin-top: 6px; color: #f0f0f0; overflow-wrap: break-word; word-wrap: break-word; }
/* Estilo específico para o contador de títulos */
.stat-box.champion-box { border-left-color: #FFD700; background-color: #41381b; }


/* =================================== */
/* PAINEL DE AÇÃO E HISTÓRICOS         */
/* =================================== */
#action-panel { text-align: center; padding: 15px 0; margin-top: 15px; }
#race-info { margin-bottom: 15px; font-size: 1rem; color: #ccc; }
.main-buttons-container { display: flex; gap: 15px; }
#advance-button, #open-shop-button { flex: 1; padding: 15px; font-size: 1.1rem; font-weight: bold; cursor: pointer; border-radius: 8px; transition: all 0.3s ease-in-out; text-transform: uppercase; letter-spacing: 1px; }
#advance-button { background: linear-gradient(45deg, #008080, #00a0a0); color: white; border: none; animation: pulse 2.5s infinite; }
#open-shop-button { background-color: #333; color: #00ffff; border: 1px solid #00ffff; }
#advance-button:hover, #open-shop-button:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); }
#advance-button:disabled { background: #555; cursor: not-allowed; animation: none; transform: none; box-shadow: none; }

#history-panel #history-log p, #milestones-log p { background-color: #252525; padding: 8px 10px; border-radius: 4px; font-size: 0.85rem; color: #bbb; margin: 0 0 5px 0; border-left: 2px solid #555; display: flex; align-items: center; }
#milestones-log .milestone-icon { margin-right: 8px; font-size: 1rem; }

/* =================================== */
/* TABELA DO CAMPEONATO                */
/* =================================== */
#championship-standings { max-height: 350px; overflow-y: auto; border: 1px solid #333; border-radius: 5px; }
table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
th, td { padding: 8px; text-align: left; border-bottom: 1px solid #2c2c2c; }
th { background-color: #2a2a2a; text-transform: uppercase; font-size: 0.75rem; position: sticky; top: 0; }
tr:nth-child(even) { background-color: #222; }
tr:hover { background-color: #383838; }
.player-row { background-color: #005f5f !important; font-weight: bold; color: #fff; }

/* =================================== */
/* MODAL E FOOTER                      */
/* =================================== */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center; z-index: 100; backdrop-filter: blur(5px); opacity: 1; transition: opacity 0.3s; }
.modal.hidden { opacity: 0; pointer-events: none; }
.modal-content { background: #1e1e1e; padding: 30px; border-radius: 8px; width: 90%; max-width: 600px; border: 1px solid #00ffff; text-align: center; box-shadow: 0 0 25px rgba(0, 255, 255, 0.2); animation: fadeIn 0.4s ease-out; }
#event-title { color: #00ffff; margin-top: 0; }
#event-text { color: #ddd; line-height: 1.6; margin-bottom: 25px; }
#event-choices { display: flex; flex-direction: column; gap: 10px; }
#event-choices .choice-button { background-color: #005f5f; color: #e0e0e0; border: 1px solid #00ffff; padding: 12px; font-size: 0.9rem; font-family: 'Roboto Mono', monospace; cursor: pointer; border-radius: 5px; text-align: center; transition: background-color 0.3s; }
#event-choices .choice-button:hover { background-color: #008080; }

footer { position: fixed; left: 0; bottom: 0; width: 100%; text-align: center; padding: 10px; color: #888; font-size: 0.85rem; background-color: rgba(10, 10, 10, 0.8); backdrop-filter: blur(4px); z-index: 102; border-top: 1px solid #333; }
.footer-links a { color: #00ffff; text-decoration: none; margin: 0 10px; transition: color 0.3s; }
.footer-links a:hover { color: #fff; }
.footer-links span { color: #555; }
.footer-credits { margin-top: 5px; font-size: 0.8rem; }
.footer-credits .divider { color: #555; margin: 0 5px; }
.footer-credits .signature { font-family: 'Sacramento', cursive; font-size: 1.5em; color: #fff; position: relative; top: 5px; }

/* NOVO: Estilos da Loja */
.shop-content { max-width: 800px; max-height: 80vh; display: flex; flex-direction: column; }
.shop-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #444; padding-bottom: 15px; }
#shop-title { margin: 0; font-size: 1.5rem; }
#close-shop-button { background: none; border: 1px solid #888; color: #888; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; transition: all 0.2s; }
#close-shop-button:hover { background-color: #f44336; color: white; border-color: #f44336; }

#shop-items-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 15px; padding-top: 20px; overflow-y: auto; }
.shop-item { background: #2a2a2a; border-radius: 8px; padding: 15px; text-align: left; border: 1px solid #333; display: flex; flex-direction: column; }
.shop-item h3 { margin: 0 0 5px 0; color: #00ffff; font-size: 1rem; }
.shop-item .description { font-size: 0.8rem; color: #ccc; flex-grow: 1; margin-bottom: 10px; }
.shop-item .price { font-size: 1rem; font-weight: bold; color: #4CAF50; margin-bottom: 10px; }
.shop-item .buy-button { background-color: #4CAF50; color: white; border: none; padding: 10px; border-radius: 5px; cursor: pointer; transition: background-color 0.2s; }
.shop-item .buy-button:hover { background-color: #45a049; }
.shop-item .buy-button:disabled { background-color: #555; cursor: not-allowed; }

/* OVERLAY DE DESTAQUES */
#achievement-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; z-index: 200; backdrop-filter: blur(8px); opacity: 1; transition: opacity 0.5s ease-out; }
#achievement-overlay.hidden { opacity: 0; pointer-events: none; }
#achievement-card { background: linear-gradient(145deg, #2a2a2a, #1a1a1a); border-radius: 20px; padding: 40px 60px; text-align: center; border: 2px solid; }
.animate-achievement { animation: achievement-animation 3s ease-in-out forwards; }
#achievement-title { font-size: 4rem; margin: 0; text-transform: uppercase; font-weight: bold; letter-spacing: 2px; }
#achievement-subtitle { font-size: 1.5rem; margin: 10px 0 0 0; color: #ccc; }

#achievement-card.win { border-color: #FFD700; color: #FFD700; text-shadow: 0 0 15px #FFD700; }
#achievement-card.champion { border-color: #FFD700; color: #FFD700; text-shadow: 0 0 20px #FFF, 0 0 30px #FFD700; background: radial-gradient(ellipse at center, #41381b 0%, #1a1608 100%); }
#achievement-card.champion #achievement-title { font-size: 5rem; }