:root {
    /* NOVA PALETA DE CORES - Tema Marítimo Suave */
    --primary-navy: #2C3E50;
    /* Azul marinho escuro - principal */
    --primary-teal: #1ABC9C;
    /* Verde marítimo - destaques */
    --primary-sand: #ECF0F1;
    /* Areia clara - textos */
    --primary-slate: #34495E;
    /* Ardósia - fundos escuros */
    --primary-cloud: #BDC3C7;
    /* Cinza nuvem - bordas suaves */
    --primary-sea: #3498DB;
    /* Azul mar - elementos ativos */
    --primary-dark: #1C2833;
    /* Azul noite - fundos muito escuros */

    /* Cores de estado */
    --correct: #27AE60;
    /* Verde - correto */
    --incorrect: #E74C3C;
    /* Vermelho - incorreto */
    --partial: #F39C12;
    /* Laranja suave - parcial */

    /* Cores de fundo */
    --dark-bg: #1C2833;
    --card-bg: rgba(44, 62, 80, 0.9);
    --header-bg: rgba(52, 73, 94, 0.9);
}

.font-pirata {
    font-family: 'Pirata One', cursive;
    letter-spacing: 1px;
}

body {
    font-family: 'Inter', sans-serif;

    background-image:
        radial-gradient(circle at center,
            var(--dark-bg) 0%,
            rgba(28, 40, 51, 0.85) 50%,
            rgba(28, 40, 51, 0.4) 100%),
        url('./imagens/fundo-one-piece.jpeg');

    /* MUDANÇA AQUI: */
    background-size: 100% auto;
    /* Força a largura a encaixar na tela, reduzindo o zoom */
    background-position: center top;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-color: var(--dark-bg);

    color: var(--primary-sand);
    min-height: 100vh;
    background-blend-mode: normal;
    margin: 0;
    padding: 0;
    padding-bottom: 0 !important;
}

/* Ajuste para telas muito grandes (Monitores Ultra-wide) */
@media (min-width: 1920px) {
    body {
        background-size: contain;
        /* Em telas gigantes, evita que a imagem estique demais */
    }
}

/* --- INPUT STYLING --- */
.input-wrapper {
    border: 2px solid var(--primary-slate) !important;
    box-shadow: 0 4px 15px rgba(44, 62, 80, 0.3) !important;
    background: rgba(44, 62, 80, 0.7) !important;
    border-radius: 0.5rem !important;
    transition: all 0.3s ease;
}

.input-wrapper:focus-within {
    border-color: var(--primary-teal) !important;
    box-shadow: 0 4px 20px rgba(26, 188, 156, 0.3) !important;
}

#characterInput {
    border: none !important;
    background: transparent !important;
    color: var(--primary-sand) !important;
    box-shadow: none !important;
}

#characterInput:focus {
    outline: none;
    box-shadow: none !important;
}

#characterInput::placeholder {
    color: rgba(236, 240, 241, 0.6);
    font-style: italic;
}

#guessButton {
    background: linear-gradient(135deg, var(--primary-sea), #2980B9) !important;
    border: none !important;
    transition: all 0.3s ease;
}

#guessButton:hover:not(:disabled) {
    background: linear-gradient(135deg, #3D9FD9, #3498DB) !important;
    transform: scale(1.02);
}

#guessButton:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --- MODE BUTTONS --- */
.mode-button {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    /* Fundo mais escuro e transparente para destacar o ícone, sem borda visível */
    background-color: rgba(20, 30, 48, 0.6) !important;
    border: 2px solid transparent !important;
    /* O segredo: borda transparente nos inativos */
    backdrop-filter: blur(4px);
}

/* Efeito ao passar o mouse */
.mode-button:hover {
    background-color: rgba(26, 188, 156, 0.2) !important;
    transform: translateY(-3px) scale(1.1);
    /* Um brilho suave indicando que é clicável */
    box-shadow: 0 0 15px rgba(26, 188, 156, 0.3) !important;
    border-color: rgba(26, 188, 156, 0.3) !important;
}

/* Estado Ativo (Igual à lógica do Naruto) */
.active-mode {
    /* Cor vibrante sólida */
    background-color: var(--primary-teal) !important;
    /* Borda branca nítida */
    border: 2px solid #ffffff !important;
    /* O "Glow" externo forte */
    box-shadow: 0 0 25px rgba(26, 188, 156, 0.8), 0 0 10px rgba(255, 255, 255, 0.4) !important;
    /* Fica maior que os outros */
    transform: translateY(-4px) scale(1.15) !important;
    z-index: 10;
}

/* Melhoria extra: Sombra no ícone dentro do botão para contraste */
.mode-button img {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
    transition: transform 0.3s ease;
}

.active-mode img {
    transform: scale(1.05);
    /* O ícone cresce um pouquinho dentro do botão ativo */
    filter: brightness(1.1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* --- NAV MODES CONTAINER --- */
#gameModes {
    background: rgba(44, 62, 80, 0.85) !important;
    border: 2px solid var(--primary-slate) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

/* --- MISSION BOX --- */
/* --- MISSION BOX --- */
#missionBox {
    background: var(--card-bg) !important;
    border: 2px solid var(--primary-slate) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);

    /* ADICIONE ISTO PARA CORRIGIR O MODAL ATRÁS DO INPUT */
    position: relative;
    z-index: 60;
    /* Precisa ser maior que o z-index 50 das sugestões */
}

#missionBox .font-pirata {
    color: var(--primary-teal) !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    font-size: 1.8rem;
}

#missionBox .text-gray-400 {
    color: var(--primary-cloud) !important;
    font-size: 0.9rem;
}

/* --- CLUE TABLE --- */
.clue-container {
    overflow-x: auto;
    width: 100%;
    margin-top: 1rem;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
}

/* Definição do grid para o cabeçalho e linhas (8 colunas) */
#clue-header,
.clue-row {
    display: grid;
    grid-template-columns: 1.5fr 1.2fr 1.5fr 1.2fr 1.5fr 1.2fr 1.2fr 1.2fr;
    gap: 0.5rem;
    min-width: 850px;
}

/* Em desktop, o container não deve fazer scroll se a tabela couber */
@media (min-width: 1024px) {
    .clue-container {
        overflow-x: hidden;
    }
}

.clue-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: 700;
    height: 85px;
    border-radius: 0.375rem;
    font-size: 0.85rem;
    color: var(--primary-sand);
    transition: all 0.5s ease-in-out;
    word-break: break-word;
    padding: 6px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Célula da imagem */
.clue-image-cell {
    padding: 0 !important;
    min-width: 80px;
    background: rgba(52, 73, 94, 0.4) !important;
    border: 2px solid var(--primary-slate) !important;
}

.clue-cell>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.25rem;
}

/* Cabeçalho da tabela */
.header-cell {
    background: linear-gradient(to bottom, var(--header-bg), #2C3E50);
    border-bottom: 3px solid var(--primary-teal);
    height: 50px;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    backdrop-filter: blur(5px);
    white-space: nowrap;
    color: var(--primary-sand);
    font-weight: 800;
    font-family: 'Inter', sans-serif;
}

/* Ajuste para células com muito texto */
.clue-cell:not(.clue-image-cell) {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Para células que precisam de múltiplas linhas */
.clue-cell.multiline {
    white-space: normal;
    word-break: break-word;
    line-height: 1.2;
    padding: 4px 2px;
}

/* Célula base (cinza) */
.clue-cell.bg-gray-700 {
    background: rgba(52, 73, 94, 0.4) !important;
}

/* --- COLORS AND STATES --- */
.hidden-clue {
    opacity: 0 !important;
    transform: scale(0.8);
    transition: all 0.5s ease-in-out;
}

.correct {
    background: linear-gradient(135deg, var(--correct), #229954) !important;
}

.incorrect {
    background: linear-gradient(135deg, var(--incorrect), #CB4335) !important;
}

.partial {
    background: linear-gradient(135deg, var(--partial), #D68910) !important;
}

/* --- SUGGESTIONS --- */
#suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    background-color: rgba(44, 62, 80, 0.98);
    border: 2px solid var(--primary-slate);
    border-radius: 0 0 0.5rem 0.5rem;
    max-height: 280px;
    overflow-y: auto;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
}

.suggestion-item {
    padding: 0.75rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid rgba(189, 195, 199, 0.1);
    transition: all 0.2s ease;
    color: var(--primary-sand);
}

.suggestion-item:hover {
    background-color: rgba(26, 188, 156, 0.15);
    padding-left: 1rem;
}

.suggestion-img {
    width: 50px;
    height: 50px;
    border-radius: 0.375rem;
    margin-right: 12px;
    border: 2px solid var(--primary-slate);
    object-fit: cover;
    transition: all 0.2s ease;
}

.suggestion-item:hover .suggestion-img {
    border-color: var(--primary-teal);
    transform: scale(1.05);
}

.suggestion-name {
    color: var(--primary-sand) !important;
    font-weight: 700;
    font-size: 1rem;
}

/* --- STATS PANEL --- */
#gameStats {
    z-index: 100;
    animation: fadeInUp 0.6s ease-out;
    backdrop-filter: blur(10px);
    border: 2px solid var(--primary-teal) !important;
    background: var(--card-bg) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- DIRECT MODE ROWS --- */
.fruit-result-container,
.quote-result-container,
.chronicle-result-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-radius: 0.75rem;
    color: var(--primary-sand);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
    background: rgba(44, 62, 80, 0.8);
    border: 2px solid var(--primary-slate);
}

.fruit-result-container:hover,
.quote-result-container:hover,
.chronicle-result-container:hover {
    transform: translateX(5px);
    border-color: var(--primary-cloud);
}

.correct-mode {
    background: linear-gradient(135deg, rgba(39, 174, 96, 0.9), rgba(34, 153, 84, 0.9)) !important;
    border: 2px solid #27AE60 !important;
}

.incorrect-mode {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.9), rgba(203, 67, 53, 0.9)) !important;
    border: 2px solid #E74C3C !important;
}

/* --- ARROW INDICATORS --- */
.arrow {
    font-size: 1.2rem;
    margin-left: 0.25rem;
    font-weight: 900;
    color: var(--primary-sand);
}

/* --- MODAL --- */
#colorIndicatorModal {
    z-index: 99999 !important;
    background-color: rgba(44, 62, 80, 0.98) !important;
    backdrop-filter: blur(10px);
    border: 2px solid var(--primary-teal) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.9);
    animation: fadeIn 0.3s ease-out;
}

#colorIndicatorModal h3 {
    color: var(--primary-teal) !important;
    border-bottom: 1px solid var(--primary-slate);
    padding-bottom: 0.5rem;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* --- SCROLL HINT --- */
#classicModeScrollHint {
    transition: all 0.3s ease;
}

#classicModeScrollHint p {
    background: rgba(52, 73, 94, 0.9) !important;
    border: 2px solid var(--primary-teal) !important;
    color: var(--primary-teal) !important;
    font-weight: 600;
    letter-spacing: 1px;
}

/* --- OTHER QUIZZES --- */
#otherQuizzes>div {
    background: rgba(44, 62, 80, 0.85) !important;
    border: 2px solid var(--primary-slate) !important;
    backdrop-filter: blur(5px);
}

#otherQuizzes h3 {
    color: var(--primary-teal) !important;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

#otherQuizzes a:hover img {
    transform: scale(1.1);
    filter: brightness(1.2);
}

#otherQuizzes span {
    color: var(--primary-cloud) !important;
    transition: color 0.3s ease;
}

#otherQuizzes a:hover span {
    color: var(--primary-teal) !important;
}

/* --- RESET BUTTON --- */
button.bg-red-600 {
    background: linear-gradient(135deg, var(--primary-sea), #2980B9) !important;
    border: 2px solid var(--primary-slate) !important;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

button.bg-red-600:hover {
    background: linear-gradient(135deg, #3D9FD9, #3498DB) !important;
    border-color: var(--primary-teal) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
}

/* --- MODE SPECIFIC COLORS --- */
#fruitModeContent .font-pirata {
    color: #1ABC9C !important;
    /* Verde marítimo para Akuma no Mi */
}

#quoteModeContent .font-pirata {
    color: #9B59B6 !important;
    /* Roxo suave para falas */
}

#chronicleModeContent .font-pirata {
    color: #3498DB !important;
    /* Azul mar para crônicas */
}

/* --- GAME MESSAGE --- */
#gameMessage {
    color: var(--primary-cloud) !important;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 767px) {
    #classicModeScrollHint:not(.hidden) {
        display: block !important;
        padding: 0.5rem 1rem;
        position: sticky;
        bottom: 10px;
        z-index: 5;
        background: rgba(44, 62, 80, 0.9);
        border-radius: 0.5rem;
        margin: 0.5rem auto;
    }

    #gameMessageWrapper {
        margin-top: 1rem;
        width: 100%;
        max-width: 100%;
        padding: 0 1rem;
    }

    #missionBox .font-pirata {
        font-size: 1.4rem;
    }
}

@media (max-width: 639px) {
    body {
        padding-bottom: 0 !important;
    }

    .clue-cell {
        height: 70px;
        font-size: 0.75rem;
        padding: 4px;
    }

    .header-cell {
        height: 40px;
        font-size: 0.7rem;
    }

    #clue-header,
    .clue-row {
        min-width: 820px;
        gap: 0.3rem;
    }
}

/* Correção para esconder a caixa de sugestões quando não houver palpites */
#suggestions:empty {
    display: none !important;
    border: none !important;
    padding: 0 !important;
}

/* Scrollbar personalizada */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(44, 62, 80, 0.5);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-slate);
    border-radius: 10px;
    border: 1px solid rgba(44, 62, 80, 0.5);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-sea);
}

/* Animações suaves para transições */
* {
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

/* Melhoria para foco acessível */
:focus-visible {
    outline: 2px solid var(--primary-teal);
    outline-offset: 2px;
}




@media (max-width: 768px) {
    body {
        background-size: cover;
        /* No celular o zoom costuma ficar melhor para preencher a tela vertical */
    }
}



@media (max-width: 768px) {
    .clue-cell {
        font-size: 0.65rem;
        /* Diminui a fonte automaticamente em telas apertadas */
        height: 70px;
        /* Reduz um pouco a altura para não ficar esticado */
    }

    #clue-header,
    .clue-row {
        min-width: 800px;
        /* No mobile, 800px é o "doce lar" para Bleach */
    }
}



.deven-gradient {
    background: linear-gradient(to right, #A855F7, #F59E0B);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 800;
}