#welcome-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1a1a1a;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 200;
    text-align: center;
}
#welcome-screen h1 {
    font-size: 48px;
    color: #FFD700;
    margin-bottom: 0;
    text-shadow: 2px 2px 5px #000;
}
#welcome-screen p {
    font-size: 24px;
    color: #ccc;
    margin-top: 5px;
    cursor: pointer; /* Para indicar que é clicável (Ultimate Edition) */
    transition: color 0.3s;
} 
#welcome-screen p:hover { color: #fff; }

.mode-selection { margin-top: 40px; display: flex; gap: 20px; }
.mode-selection button { padding: 20px 40px; font-size: 24px; font-weight: bold; color: #111; border: 2px solid #555; border-radius: 10px; cursor: pointer; transition: all 0.2s ease; }
.mode-selection button:first-child { background-color: #4CAF50; color: white; }
.mode-selection button:last-child { background-color: #03A9F4; }
.mode-selection button.secondary { background-color: #607D8B; color: white; } /* Cor para o novo botão */
.mode-selection button:hover { transform: scale(1.05); box-shadow: 0 0 15px rgba(255, 255, 255, 0.3); }

body {
    margin: 0; padding: 0; background-color: #000;
    font-family: 'Segoe UI', sans-serif; color: white;
    display: flex; justify-content: center; align-items: center;
    height: 100vh; width: 100vw; overflow: hidden;
}

/* Correção para permitir clicar e digitar nos inputs e botões */
input { user-select: text !important; -webkit-user-select: text !important; pointer-events: auto !important; }
button { pointer-events: auto !important; }

#app-wrapper {
    display: none; /* Começa oculto */
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
    border: 2px solid #555;
}

#game-container {
    width: 700px; height: 600px; position: relative;
    background-color: #333; border-right: 5px solid #000;
    overflow: hidden; display: flex; justify-content: center; align-items: center; user-select: none;
}

canvas { 
    display: block;
    image-rendering: auto; /* Garante suavização ao redimensionar */
}

#ui-sidebar {
    width: 360px; height: 600px; background-color: #444;
    display: flex; flex-direction: column; padding: 10px;
    box-sizing: border-box;
}

h2 { text-align: center; margin: 0; font-size: 16px; }

.slots-container {
    display: flex; gap: 5px; margin-bottom: 10px; justify-content: center;
    flex-wrap: wrap;
}

.slots-container.scrollable {
    max-height: 120px; overflow-y: auto;
}

.slot {
    width: 60px; height: 40px; background-color: white; color: black;
    border: 2px dashed #666; border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; position: relative; font-size: 9px;
    text-transform: uppercase; font-weight: bold; text-align: center;
}

.slot.filled { 
    border-style: solid; 
    color: white; 
    text-shadow: 1px 1px 2px black, 0 0 5px black; 
}
.slot .remove-btn {
    position: absolute; top: -5px; right: -5px; background: red;
    color: white; border-radius: 50%; width: 15px; height: 15px;
    display: none; font-size: 10px; line-height: 15px;
}
.slot.filled .remove-btn { display: block; }

/* Estilo para os títulos das categorias */
.category-title {
    grid-column: 1 / -1; /* Ocupa todas as 4 colunas */
    text-align: left; margin: 8px 0 2px 0; font-size: 11px;
    color: #FFD700; border-bottom: 1px solid #666;
    padding-bottom: 2px;
    font-weight: bold;
}

.team-btn {
    position: absolute; bottom: -6px; right: -6px;
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid white; cursor: pointer; z-index: 10;
    box-shadow: 1px 1px 2px black;
}
.team-btn:hover { transform: scale(1.2); }

.weapon-selector {
    display: grid; grid-template-columns: repeat(4, 1fr); /* 4 Colunas agora */
    gap: 2px; margin-bottom: auto; overflow-y: auto; padding-right: 5px;
}

.weapon-btn {
    padding: 2px; background-color: #555; border: 1px solid #222;
    color: white; cursor: pointer; font-size: 8px;
    text-align: center; height: 35px; display: flex;
    align-items: center; justify-content: center;
}
.weapon-btn:hover { filter: brightness(1.2); }

/* Novas Cores de Categoria */
.w-melee { border-left: 3px solid #FF5252; }      /* Vermelho */
.w-ranged { border-left: 3px solid #448AFF; }     /* Azul */
.w-hybrid { border-left: 3px solid #E040FB; }     /* Roxo */
.w-summoner { border-left: 3px solid #76FF03; }   /* Verde */
.w-utility { border-left: 3px solid #FFD740; }    /* Amarelo */
.w-defensive { border-left: 3px solid #00BCD4; }  /* Ciano */
.w-special { border-left: 3px solid #9E9E9E; }    /* Cinza */

.controls-container { display: flex; gap: 5px; margin-top: 5px; }
#map-btn { flex-grow: 1; padding: 10px; background-color: #607D8B; color: white; border: none; font-size: 16px; font-weight: bold; cursor: pointer; }
#ready-btn { flex-grow: 2; width: auto; padding: 10px; background-color: #4CAF50; color: white; border: none; font-size: 16px; font-weight: bold; cursor: pointer; }
#reset-btn { width: 100%; padding: 10px; background-color: #f44336; color: white; border: none; margin-top: 5px; cursor: pointer; display: none; font-weight: bold; }

.log-area { height: 100px; background: #000; font-size: 9px; overflow-y: scroll; margin-top: 5px; padding: 5px; font-family: monospace; border: 1px solid #555; }

#map-selector { position: absolute; bottom: 55px; left: 10px; right: 10px; background-color: #2a2a2a; border: 2px solid #777; border-radius: 5px; padding: 10px; z-index: 100; display: flex; flex-direction: column; gap: 5px; }
#map-selector.hidden { display: none; }
#map-selector h3 { margin: 0 0 5px 0; text-align: center; font-size: 14px; }
.map-option-btn { width: 100%; padding: 8px; background-color: #555; border: 1px solid #888; color: white; cursor: pointer; text-align: left; }
.map-option-btn.active { background-color: #4CAF50; border-color: #FFF; font-weight: bold; }

#ui-sidebar { position: relative; } /* Para o seletor de mapa funcionar */

/* Estilos do Sandbox */
#sandbox-panel { display: none; margin-top: 5px; border-top: 2px solid #03A9F4; padding-top: 5px; }
#sandbox-panel h3 { text-align: center; margin: 0 0 10px 0; font-size: 14px; }
#sandbox-panel h4 { margin: 5px 0; font-size: 12px; color: #FFD700; }
#sandbox-panel p { font-size: 11px; margin: 0 0 5px 0; text-align: center; height: 12px; }
.sandbox-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.sandbox-controls div { display: flex; gap: 3px; }
.sandbox-controls input[type="range"] { flex-grow: 1; }
.sandbox-controls label { font-size: 12px; }
.sandbox-controls button { font-size: 10px; padding: 2px 8px; }

/* --- NOVO: ESTILOS DE TELA CHEIA DA ARENA --- */
#app-wrapper.arena-fullscreen #ui-sidebar {
    display: none !important;
}
#app-wrapper.arena-fullscreen #game-container {
    margin: 0 auto;
    border-right: 2px solid #555; /* Restaura a borda direita */
}
#btn-exit-fullscreen {
    display: none;
    position: absolute;
    top: 10px; right: 10px;
    background: rgba(0,0,0,0.6); color: white;
    border: 1px solid white; padding: 5px 10px;
    cursor: pointer; z-index: 150; font-size: 12px;
}

/* --- NOVO: ESTILOS DE CONQUISTAS E VARIAÇÕES --- */
#achievements-modal {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.95); z-index: 300; flex-direction: column;
    align-items: center; justify-content: flex-start; color: white; padding-top: 50px; overflow-y: auto;
}
.achievement-item {
    background: #222; border: 1px solid #444; padding: 15px; margin: 5px;
    width: 60%; display: flex; justify-content: space-between; align-items: center;
    border-radius: 5px; transition: all 0.3s;
}
.achievement-item.unlocked { border-color: #4CAF50; box-shadow: 0 0 10px rgba(76, 175, 80, 0.3); background: #1b331c; }

/* Animação para conquista secreta recém-desbloqueada */
@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}
@keyframes sparkle {
    0% { box-shadow: 0 0 5px gold; }
    50% { box-shadow: 0 0 20px gold, 0 0 10px white; }
    100% { box-shadow: 0 0 5px gold; }
}
.achievement-item.new-unlock {
    animation: shake 1.2s ease-in-out, sparkle 1.2s ease-in-out;
    border-color: gold !important;
    background-color: #332b00 !important;
}

.achievement-info { text-align: left; }
.achievement-title { font-weight: bold; font-size: 18px; color: #FFD700; margin-bottom: 5px; }
.achievement-desc { font-size: 14px; color: #ccc; }
.achievement-reward { font-size: 12px; color: #4CAF50; font-weight: bold; margin-top: 5px; }

.var-toggle {
    position: absolute; top: 2px; right: 2px; width: 10px; height: 10px;
    background: #333; border: 1px solid #777; cursor: pointer;
    display: block;
    z-index: 20;
}
.var-toggle.active { background: #00E676; border-color: #fff; box-shadow: 0 0 5px #00E676; }

.var-lock {
    position: absolute; top: 1px; right: 2px;
    font-size: 9px; color: #999; cursor: help;
    z-index: 20;
    text-shadow: 1px 1px 1px black;
}

#achievement-notification {
    position: fixed; bottom: 20px; right: 20px; background: #222;
    border-left: 5px solid #FFD700; padding: 20px; color: white;
    display: none; z-index: 400; box-shadow: 0 0 15px rgba(0,0,0,0.8);
    font-family: 'Segoe UI', sans-serif;
}

#character-description-box {
    margin-top: 5px;
    min-height: 50px;
    font-size: 18px;
    color: #E0E0E0;
    text-align: center;
    max-width: 80%;
    text-shadow: 1px 1px 2px black;
}

#reset-progress-btn {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background-color: transparent;
    color: #666;
    border: 1px solid #444;
    padding: 5px 10px;
    font-size: 11px;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.3s;
}
#reset-progress-btn:hover {
    background-color: #330000;
    color: #ff5252;
    border-color: #ff5252;
}

/* --- ESTILOS DA TIER LIST --- */
#tierlist-screen {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #111; z-index: 250; flex-direction: column;
    overflow-y: auto; padding: 20px; box-sizing: border-box;
}
.tier-row {
    display: flex; width: 90%; margin: 5px auto; min-height: 80px;
    border: 2px solid #333; background: #222;
}
.tier-label {
    width: 80px; display: flex; align-items: center; justify-content: center;
    font-size: 32px; font-weight: bold; color: black; text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
    flex-shrink: 0;
}
.tier-content {
    flex-grow: 1; display: flex; flex-wrap: wrap; align-items: center; padding: 5px; gap: 5px;
    min-height: 80px;
}
.tier-s { background-color: #FF7F7F; }
.tier-a { background-color: #FFBF7F; }
.tier-b { background-color: #FFDF7F; }
.tier-d { background-color: #7FFFFF; }
.tier-f { background-color: #BFBFBF; }

#tier-pool {
    width: 90%; margin: 20px auto; display: flex; flex-wrap: wrap; gap: 5px;
    padding: 10px; border: 2px dashed #555; min-height: 100px;
    justify-content: center; background: #1a1a1a;
}
.tier-item {
    width: 60px; height: 40px; display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: bold; color: #111; text-align: center;
    cursor: grab; border: 1px solid #000; user-select: none;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
    text-transform: uppercase;
}
.tier-item:active { cursor: grabbing; transform: scale(1.1); }

#tier-controls {
    position: fixed; top: 20px; right: 20px; display: flex; gap: 10px;
}
#tier-controls button {
    padding: 10px 20px; font-size: 16px; cursor: pointer; border: none; border-radius: 5px;
}

/* --- ESTILOS DO CARTAZ DE PROCURADO (BOUNTY) --- */
.wanted-poster {
    width: 220px;
    height: 310px;
    background-image: url('sprite/procurado.png');
    background-size: cover;
    background-position: center;
    position: relative;
    color: #000;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
    filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.7));
    transition: transform 0.3s;
    cursor: pointer;
}
.wanted-poster:hover { transform: scale(1.05) rotate(2deg); }
.wanted-poster.accepted { filter: sepia(0.5) brightness(0.8); cursor: default; }

.bounty-content {
    margin-top: 125px; /* Empurra o conteúdo para a parte vazia do meio */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 140px;
}
.bounty-ball-display {
    width: 60px; height: 60px; border-radius: 50%; border: 3px solid #3E2723;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5); margin-bottom: 5px;
}
.bounty-info {
    font-size: 16px; text-align: center; margin-top: 2px;
}

.inventory-detail-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #333;
    padding: 10px;
    border-radius: 5px;
    border-left: 4px solid #FFD700;
}

.upgrade-card { background: #333; border: 2px solid #555; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; align-items: center; width: 160px; transition: transform 0.2s; }
.upgrade-card:hover { transform: scale(1.05); border-color: #00E676; }
.upgrade-icon { font-size: 32px; margin-bottom: 5px; }
.upgrade-btn { margin-top: auto; padding: 5px 10px; background: #4CAF50; border: none; color: white; cursor: pointer; border-radius: 4px; width: 100%; }
.upgrade-btn:disabled { background: #555; cursor: not-allowed; opacity: 0.7; }

.inventory-item {
    width: 40px; height: 40px; background: #444; border: 1px solid #777; border-radius: 5px;
    font-size: 24px; display: flex; align-items: center; justify-content: center;
    cursor: help; position: relative;
}
.inventory-item.usable { cursor: pointer; border-color: #00E676; box-shadow: 0 0 5px #00E676; }
.inventory-item .uses-count { position: absolute; bottom: 0; right: 2px; font-size: 10px; font-weight: bold; color: white; text-shadow: 1px 1px 1px black; }

.path-card {
    width: 220px;
    height: 300px;
    background-color: #333;
    border: 2px solid #555;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
}
.path-card:hover { transform: scale(1.05); border-color: #FFD700; }
.path-icon { font-size: 50px; margin-bottom: 10px; }
.path-title { font-size: 24px; font-weight: bold; margin-bottom: 10px; color: #fff; }
.path-desc { font-size: 14px; color: #ccc; line-height: 1.4; }

/* --- ESTILOS PARA MOBILE --- */
@media (max-width: 1200px) {
    body {
        overflow-y: auto; /* Permite rolar a tela no celular para ver botões escondidos */
        height: auto;     /* Altura dinâmica baseada no conteúdo */
        display: block;   /* Remove centralização forçada que corta o topo */
        -webkit-text-size-adjust: 100%; /* Prevenir zoom de fonte no iOS */
    }

    #app-wrapper {
        flex-direction: column !important;
        width: 100%;
        height: auto;
        border: none;
        box-shadow: none;
    }

    #game-container {
        border-right: none;
        border-bottom: 5px solid #000;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        background-color: #333;
    }

    /* Faz o canvas se ajustar ao container mantendo proporção */

    #ui-sidebar {
        width: 100%;
        height: auto; /* Altura automática para o conteúdo */
        padding: 5px;
        box-sizing: border-box;
    }

    .weapon-selector {
        grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)); /* Grid mais adaptável */
        max-height: 400px; /* Aumenta a área visível da lista de armas */
    }

    .weapon-btn {
        height: 45px; /* Botões mais altos para facilitar o toque */
        font-size: 10px; /* Texto um pouco maior */
    }
    
    .log-area { height: 70px; }

    /* Tela de Boas-vindas */
    #welcome-screen {
        overflow-y: auto; /* Permite rolar a tela de menu se os botões não couberem */
        justify-content: flex-start; /* Alinha ao topo para evitar cortes */
        padding: 40px 0; /* Espaço extra para scroll */
    }
    #welcome-screen h1 { font-size: 36px; }
    #welcome-screen p { font-size: 18px; }
    #welcome-screen .mode-selection, #different-modes-screen .mode-selection {
        flex-direction: column;
        gap: 15px; /* Mais espaço entre botões */
        align-items: center;
        width: 90%;
    }
    #welcome-screen .mode-selection button, #different-modes-screen .mode-selection button {
        padding: 12px 15px;
        font-size: 18px;
        width: 100%;
        max-width: 350px;
    }
    
    /* Telas de Campanha */
    #campaign-screen, #campaign-shop-screen, #campaign-event-screen, #campaign-path-screen, #campaign-upgrade-screen {
        padding: 10px; box-sizing: border-box;
        justify-content: flex-start; /* Alinhar no topo */
        overflow-y: auto; /* Permitir rolagem */
    }
    #campaign-header { position: relative; top: 0; left: 0; right: 0; font-size: 14px; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
    #campaign-screen h1, #campaign-shop-screen h1, #campaign-event-screen h1, #campaign-path-screen h1, #campaign-upgrade-screen h1 { font-size: 24px; margin-bottom: 10px; }
    #campaign-screen p, #campaign-shop-screen p, #campaign-event-screen p, #campaign-path-screen p, #campaign-upgrade-screen p { font-size: 14px; }
    #campaign-challengers { gap: 8px; justify-content: center; }
    #campaign-challengers .weapon-btn { width: 80px; height: 40px; font-size: 11px; }
    #upgrades-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
    #path-options-container, #event-options { flex-direction: column; align-items: center; width: 100%; }
    .path-card { width: 90%; max-width: 300px; height: auto; min-height: 200px; }
    #bounty-section { margin-top: 20px; }
    #campaign-shop-screen > div[style*="gap: 30px"] { flex-direction: column; align-items: center; }
}

/* NOVO: Ajuste específico para tela deitada (landscape) em dispositivos móveis */
@media (max-width: 1200px) and (orientation: landscape) {
    #game-container {
        /* Força o container a usar a altura da tela como limite, centralizando o conteúdo */
        height: 100vh !important;
    }

    canvas {
        /* O canvas deve se ajustar dentro do container, mantendo a proporção.
           Isso adiciona barras laterais (pillarbox) para preencher o espaço. */
        height: 100% !important; /* Sobrescreve o 'height: auto' da regra geral de mobile */
    }
}

/* --- ESTILOS DO MULTIPLAYER DRAFT --- */
#multiplayer-draft {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #111;
    z-index: 200;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
}

#draft-pool {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 8px;
    width: 95%;
    max-width: 800px;
    max-height: 60vh; /* Limita altura para caber em telas menores */
    overflow-y: auto; /* Permite rolagem */
    padding: 10px;
    background: #222;
    border: 1px solid #444;
    border-radius: 8px;
    margin-top: 50px; /* Espaço para o placar */
}

.draft-btn {
    height: 60px;
    background: #333;
    border: 1px solid #555;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 10px;
    font-weight: bold;
    border-radius: 4px;
    user-select: none;
    text-transform: uppercase;
}
.draft-btn:hover { background: #444; border-color: #FFD700; }