:root { 
    --bg: #0a0a0a; 
    --card-bg: #141414; 
    --text: #d4d4d4; 
    --primary: #5a0000; 
    --primary-hover: #8a0000; 
    --accent: #ff3333;
}

body { 
    font-family: 'Georgia', serif; 
    background-color: var(--bg); 
    color: var(--text); 
    max-width: 1000px; 
    margin: 0 auto; 
    padding: 20px; 
}

.hidden { display: none !important; }

/* ANIMAÇÃO FLUIDA DO RITUAL */
#ritual-scene {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 99999;
    background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(4px); pointer-events: none; 
    display: none; opacity: 0; transition: opacity 0.3s ease;
}
#liliana-character {
    position: absolute; bottom: -2%; right: -2%; height: 60vh; max-height: 1200px;
    transform: translateX(110%); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); 
    filter: drop-shadow(-15px 0 30px rgba(0,0,0,1)); color: transparent; 
}
#liliana-character.slide-in { transform: translateX(0); }

#blood-puddle-container {
    position: absolute; top: 65%; left: 50%; transform: translate(-50%, -50%) scale(0.8);
    opacity: 0; transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); 
    display: flex; align-items: center; justify-content: center; width: 700px; height: 350px;
}
#blood-puddle-container.fade-in { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.blood-puddle-bg {
    position: absolute; width: 100%; height: 100%; 
    background: radial-gradient(ellipse at center, rgba(100, 0, 0, 0.95) 10%, rgba(20, 0, 0, 0.85) 50%, transparent 75%); 
    filter: blur(15px); border-radius: 50%; z-index: 1;
}

#puddle-text {
    position: relative; z-index: 2; font-family: 'UnifrakturMaguntia', cursive; font-size: 52px; 
    color: #ffb3b3; text-shadow: 4px 4px 10px #000, -2px -2px 0 #000, 0 0 25px #ff0000; 
    text-align: center; width: 80%; line-height: 1.2;
}

/* CAIXA DE BUSCA E TEMA */
.search-box { 
    background: var(--card-bg); padding: 30px; border-radius: 8px; text-align: center; 
    border: 1px solid #330000; position: relative; 
}
a.title-link { text-decoration: none; display: inline-block; cursor: pointer; }

/* COR DO TÍTULO CORRIGIDA PARA COMBINAR COM O SANGUE (#8a0000) E LIMPA DE GRADIENTES */
.blood-title {
    font-family: 'UnifrakturMaguntia', cursive; font-size: 52px; margin-top: 0; margin-bottom: 10px; 
    font-weight: normal; letter-spacing: 2px; color: #8a0000; position: relative; 
    text-shadow: 2px 2px 5px rgba(0,0,0,0.8);
}

.blood-drop { 
    position: absolute; background: #8a0000; width: 4px; height: 10px; 
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; opacity: 0; animation: dropFall 2.5s infinite ease-in; 
}
.d1 { left: 22%; bottom: -5px; animation-delay: 0.2s; } 
.d2 { left: 52%; bottom: -5px; animation-delay: 1.5s; } 
.d3 { right: 28%; bottom: -5px; animation-delay: 0.8s; }

@keyframes dropFall { 
    0% { transform: translateY(0); opacity: 1; height: 10px; } 
    40% { transform: translateY(15px); opacity: 1; height: 14px; } 
    70% { transform: translateY(35px); opacity: 0; height: 6px; } 
    100% { opacity: 0; } 
}

/* SUBTÍTULO COM FONTE CINZEL E TAMANHO REDUZIDO (MENOS CORPORATIVO) */
.ritual-status { 
    font-family: 'Cinzel', serif; font-style: italic; color: #aaa; font-size: 12px; 
    text-transform: uppercase; letter-spacing: 1px; min-height: 20px; margin-bottom: 25px; transition: color 0.3s; 
}

/* INPUTS E DROPDOWNS */
.input-group { display: flex; justify-content: center; gap: 15px; margin-bottom: 20px; width: 100%; }
.input-wrapper { position: relative; display: inline-block; width: 60%; text-align: left; }
input[type="text"], select { 
    width: 100%; box-sizing: border-box; padding: 14px; border-radius: 4px; border: 1px solid #660000; 
    background: #0a0a0a; color: #ccc; font-size: 16px; font-family: 'Georgia', serif; 
}
select { width: 35%; cursor: pointer; text-transform: uppercase; font-size: 13px; letter-spacing: 1px; }
input[type="text"]:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 10px rgba(255, 51, 51, 0.2); }

.autocomplete-items { 
    position: absolute; border: 1px solid #4a0000; border-top: none; z-index: 999; top: 100%; left: 0; right: 0; 
    background-color: #1a0505; border-radius: 0 0 4px 4px; max-height: 250px; overflow-y: auto; box-shadow: 0 4px 10px rgba(0,0,0,0.8); 
}
.autocomplete-items div { padding: 10px; cursor: pointer; border-bottom: 1px solid #330000; font-size: 14px; color: #d4d4d4; }
.autocomplete-items div:hover { background-color: #330000; color: #fff; }

/* BOTÕES E FORMULÁRIO */
.acoes-form { display: flex; gap: 20px; align-items: center; justify-content: center; margin-top: 10px; }
button.btn-busca { 
    padding: 12px 30px; background-color: var(--primary); color: white; border: 1px solid #330000; 
    border-radius: 4px; font-size: 14px; font-weight: bold; font-family: 'Georgia', serif; 
    text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: all 0.3s; 
}
button.btn-busca:hover { background-color: var(--primary-hover); box-shadow: 0 0 15px rgba(153, 0, 0, 0.4); }

.btn-limpar { 
    padding: 12px 24px; background-color: #111; color: #888; border: 1px solid #333; border-radius: 4px; 
    font-size: 12px; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; text-decoration: none; 
    transition: all 0.2s; display: inline-flex; 
}
.btn-limpar:hover { background-color: #222; color: #fff; }

.toggle-container { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #aaa; text-transform: uppercase; letter-spacing: 1px; }
.switch { position: relative; display: inline-block; width: 44px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #222; transition: .4s; border-radius: 22px; border: 1px solid #555; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 2px; background-color: #888; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--primary); border-color: var(--accent); }
input:checked + .slider:before { transform: translateX(20px); background-color: #fff; }

.ritual-active { pointer-events: none; opacity: 0.6; filter: blur(1px); }
.btn-ritual-active { animation: pulseBlood 1s infinite alternate; background-color: #990000 !important; color: #fff !important; }
@keyframes pulseBlood { 0% { box-shadow: 0 0 5px rgba(255, 0, 0, 0.4); } 100% { box-shadow: 0 0 25px rgba(255, 0, 0, 0.9); } }

/* CARROSSEL HOME */
.home-formats { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; margin-top: 10px; }
.btn-home-format { background: #111; border: 1px solid #333; color: #888; padding: 6px 18px; border-radius: 20px; cursor: pointer; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; transition: all 0.2s; }
.btn-home-format:hover { background: #220000; border-color: #5a0000; color: #ccc; }
.btn-home-format.ativo { background: var(--primary); border-color: var(--accent); color: white; }

.carousel-container { margin-top: 40px; text-align: center; overflow: hidden; padding: 20px 0; border-top: 1px solid #222; border-bottom: 1px solid #222; background: #0d0d0d; }
.carousel-container h2 { font-size: 16px; color: #ccc; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 3px; font-weight: normal; }
.marquee { width: 100%; overflow: hidden; white-space: nowrap; position: relative; }
.marquee-content { display: inline-flex; animation: scroll 40s linear infinite; gap: 20px; }
.marquee-content img { height: 260px; border-radius: 12px; box-shadow: 0 6px 12px rgba(0,0,0,0.8); cursor: pointer; transition: transform 0.2s; }
.marquee-content img:hover { transform: scale(1.05); border: 2px solid var(--primary); }
.marquee:hover .marquee-content { animation-play-state: paused; }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* BARRA DE FERRAMENTAS */
.barra-ferramentas { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; padding: 20px; background: var(--card-bg); border: 1px solid #222; border-radius: 8px; }
.row-ferramentas { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 20px; width: 100%; }

.secao-ferramenta h3 { margin-top: 0; font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 12px; border-bottom: 1px solid #333; padding-bottom: 5px; }
.grupo-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; align-items: center;}
.label-grupo { font-size: 10px; font-weight: bold; color: #666; text-transform: uppercase; margin-right: 5px; width: 60px; font-family: system-ui, sans-serif; }

.btn-acao { background: #111; border: 1px solid #333; color: #aaa; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; transition: all 0.2s; font-family: system-ui, sans-serif; }
.btn-acao:hover { background: #222; color: #fff; border-color: #555; }
.btn-acao.ativo { background: var(--primary); border-color: var(--accent); color: white; }

.btn-pdf { background: #00401a; border-color: #00662a; color: #fff; } .btn-pdf:hover { background: #00662a; }
.btn-minhaselecao { background: #b8860b; border-color: #daa520; color: #000; font-weight: bold; } .btn-minhaselecao:hover { background: #daa520; }

/* RESULTADOS E CARTAS */
#lista-resultados { margin-top: 20px; font-family: system-ui, sans-serif; }
.item-resultado { background: var(--card-bg); border-radius: 8px; border: 1px solid #222; margin-bottom: 20px; overflow: hidden; position: relative; }
.erro { color: #ff5252; background: #2a0a0a; padding: 15px; border: 1px solid #4a0000; font-family: 'Georgia', serif; }

.caixa-selecao { position: absolute; top: 15px; right: 15px; background: rgba(0,0,0,0.8); padding: 8px; border-radius: 6px; border: 1px solid #444; z-index: 10; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: 0.2s; }
.caixa-selecao:hover { background: #222; }
.caixa-selecao input { cursor: pointer; width: 16px; height: 16px; accent-color: #b8860b; }
.caixa-selecao span { color: #aaa; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; }
.hide-unselected .item-resultado:not(.selecionado) { display: none !important; }

.legalities-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 15px; background: #0a0a0a; padding: 15px; border-radius: 4px; border: 1px solid #222; }
.legal { color: #4caf50; font-weight: bold; } .not-legal { color: #ff5252; font-weight: bold; } .restricted { color: #ff9800; font-weight: bold; }
ul.leg-list { list-style: none; padding: 0; margin: 0; } ul.leg-list li { padding: 4px 0; border-bottom: 1px solid #222; display: flex; justify-content: space-between; font-size: 13px; } ul.leg-list li:last-child { border-bottom: none; }

/* MODOS DE VISUALIZAÇÃO */
#lista-resultados.mode-detail .view-grid, #lista-resultados.mode-detail .view-table { display: none; }
#lista-resultados.mode-detail .view-detail { display: flex; gap: 20px; padding: 20px; }
.relatorio-img { max-width: 250px; text-align: center; }
.relatorio-img img { width: 100%; border-radius: 10px; cursor: zoom-in; }

.btn-flip { margin-top: 10px; width: 100%; padding: 8px; background-color: #333; color: #fff; border: 1px solid #555; border-radius: 4px; cursor: pointer; text-transform: uppercase; font-size: 11px; font-weight: bold; transition: 0.2s; }
.btn-flip:hover { background-color: #555; }

.relatorio-info { flex: 1; padding-right: 150px; }
.relatorio-info h2 { font-family: 'UnifrakturMaguntia', cursive; margin-top: 0; color: #fff; font-size: 32px; letter-spacing: 1px; }

#lista-resultados.mode-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 15px; }
#lista-resultados.mode-grid .item-resultado { margin-bottom: 0; background: transparent; border: none; }
#lista-resultados.mode-grid .view-detail, #lista-resultados.mode-grid .view-table { display: none; }
#lista-resultados.mode-grid .view-grid { display: block; position: relative;}
#lista-resultados.mode-grid .view-grid img { width: 100%; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.8); cursor: crosshair; }

#lista-resultados.mode-table { display: flex; flex-direction: column; gap: 8px; }
#lista-resultados.mode-table .item-resultado { margin-bottom: 0; padding: 12px 15px; }
#lista-resultados.mode-table .view-detail, #lista-resultados.mode-table .view-grid { display: none; }
#lista-resultados.mode-table .view-table { display: block; width: 100%; }
.table-row { display: grid; grid-template-columns: 2fr 1fr 2fr 4fr; gap: 15px; align-items: center; cursor: crosshair; }
.t-nome { font-weight: bold; font-size: 15px; color: white; font-family: 'Georgia', serif;}
.t-custo { font-family: monospace; font-size: 13px; background: #000; padding: 4px 8px; border-radius: 2px; text-align: center; color: #aaa; }
.t-tipo { font-size: 12px; color: #888; }
.t-texto { font-size: 12px; font-style: italic; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 100px;}

/* TOOLTIP E ANIMAÇÕES DE ARRASTAR */
#card-tooltip { position: fixed; display: none; background: #0a0a0a; border: 1px solid #4a0000; border-radius: 8px; padding: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.9); z-index: 1000; pointer-events: none; width: 280px; font-family: system-ui, sans-serif; }
#card-tooltip img { width: 100%; border-radius: 8px; margin-bottom: 10px; }
#card-tooltip .legalities-grid { margin-top: 0; padding: 10px; gap: 10px; background: #141414; }
#card-tooltip h3 { font-size: 11px; margin-bottom: 5px; color: #888; }
#card-tooltip ul.leg-list li { font-size: 11px; padding: 2px 0; }

#sentinela-loading { text-align: center; padding: 30px; color: #888; font-style: italic; }

.fantasma-drag { opacity: 0.5; background-color: #2a0000 !important; border: 2px dashed #ff3333 !important; border-radius: 8px; }
.carta-voando { box-shadow: 0 10px 30px rgba(255, 0, 0, 0.5) !important; cursor: grabbing !important; }

/* ========================================================= */
/* 6. RESPONSIVIDADE (MOBILE E TELAS MENORES)                */
/* ========================================================= */

/* Configuração Base do botão mobile (Invisível no PC) */
.btn-mobile-filtros { display: none; }
.conteudo-filtros { display: block; }

@media (max-width: 768px) {
    /* Cabeçalho e Título */
    .blood-title { font-size: 38px; }
    .ritual-status { font-size: 11px; margin-bottom: 15px; }
    .search-box { padding: 20px 15px; }

    /* Formulário de Busca empilhado para facilitar o toque */
    .input-group { flex-direction: column; gap: 10px; }
    .input-wrapper, select { width: 100%; }
    select { padding: 14px; }
    
    /* Botões de Ação ocupando a tela toda (Acessibilidade) */
    .acoes-form { flex-direction: column; width: 100%; gap: 15px; }
    button.btn-busca { width: 100%; padding: 16px; font-size: 16px; }
    .toggle-container { justify-content: center; margin: 5px 0; width: 100%; }
    .btn-limpar { width: 100%; justify-content: center; padding: 14px; }

    /* Animação da Liliana Adaptada para Mobile */
    #liliana-character { height: 45vh; right: -10%; bottom: 0; }
    #blood-puddle-container { width: 95vw; height: 200px; top: 65%; left: 35%; }
    
    /* FONTE REDUZIDA DA POÇA NO MOBILE */
    #puddle-text { font-size: 15px; width: 100%; }

    /* ESTILIZAÇÃO DO BOTÃO E COLAPSO DOS FILTROS NO MOBILE */
    .btn-mobile-filtros { 
        display: block; width: 100%; padding: 12px; 
        background: #1a0505; color: #d4d4d4; 
        border: 1px solid #4a0000; border-radius: 4px; 
        font-family: 'Georgia', serif; font-size: 14px; 
        cursor: pointer; text-transform: uppercase; letter-spacing: 1px; 
        transition: 0.2s;
    }
    .btn-mobile-filtros:hover { background: #330000; color: #fff; }
    
    .conteudo-filtros { display: none; } /* Oculto por padrão no mobile */
    .conteudo-filtros.aberto { display: flex; flex-direction: column; gap: 15px; margin-top: 15px; }

    /* Barra de Ferramentas e Filtros Empilhados */
    .barra-ferramentas { padding: 15px 10px; }
    .row-ferramentas { flex-direction: column; align-items: stretch; gap: 15px; }
    .secao-ferramenta { text-align: left !important; }
    .grupo-botoes { justify-content: flex-start !important; flex-wrap: wrap; }
    
    /* Aumenta a área de toque dos botões menores */
    .btn-acao { padding: 10px 12px; font-size: 11px; flex-grow: 1; text-align: center; }
    
    /* REMOVE A VISUALIZAÇÃO EM TABELA NO MOBILE */
    button[data-view="mode-table"] { display: none !important; }
    
    /* Ajuste do layout de Detalhes da Carta (Imagem em cima, texto em baixo) */
    #lista-resultados.mode-detail .view-detail { flex-direction: column; align-items: center; padding: 25px 15px 15px 15px; }
    .relatorio-img { max-width: 100%; width: 80%; }
    .relatorio-info { padding-right: 0; margin-top: 20px; text-align: center; width: 100%; }
    
    /* Ajuste da Caixa de Seleção para não sobrepor o conteúdo reorganizado */
    .caixa-selecao { top: 10px; right: 10px; transform: scale(0.9); }
    
    /* Centraliza e empilha as Listas de Legalidade no mobile */
    .legalities-grid { grid-template-columns: 1fr; gap: 20px; }
    ul.leg-list li { font-size: 12px; padding: 6px 0; }

    /* Diminui as cartas do Carrossel */
    .marquee-content img { height: 180px; }
    .btn-home-format { flex-grow: 1; text-align: center; }
}