/* ============================================================
   01. CORE & LAYOUT GLOBAL
   ============================================================ */
:root {
    --brand: #CC0000;
    --gold: #D4AF37;
    --bg-site: #f4f5f7;           /* Fundo cinza suave */
    --bg-white: #ffffff;          /* Branco para cards e sidebars */
    --border: #E5E5E5;
    --topo-h: 265px;              /* Altura do Banner + Toolbar */
    --radius: 12px;
}

/* Reset Profissional */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: var(--bg-site);
    color: #1A1A1A;
    font-family: 'Inter', sans-serif;
    overflow-y: scroll; /* Barra de scroll nativa sempre à direita */
}

/* Content Wrapper (3 Colunas) - CORRIGIDO */
.app-main-layout {
    display: grid !important;
    grid-template-columns: 260px 1fr 280px !important; /* Fixa as 3 colunas conforme o seu index.php */
    width: 100%;
    margin-top: 0 !important;
    padding-top: 20px; /* Espaço interno para o conteúdo não colar no banner */
    gap: 0;
    align-items: start;
}

/* Colunas Laterais Sticky */
.side-column {
    position: sticky;
    top: 20px; /* Alinha com o padding-top do layout */
    height: calc(100vh - 40px);
    background: var(--bg-white);
    overflow-y: auto;
    z-index: 100;
}

/* Sidebar Direita - Garante visibilidade */
.side-column.right { 
    display: block !important;
    border-left: 1px solid var(--border); 
}
/* ============================================================
   ESTILO: BANNER IMPERIAL (HIGH CONTRAST EDITION)
   ============================================================ */

.master-hero-banner {
    position: relative;
    height:250px; /* Mantém o padrão de 180px */
    background: #000; /* Fundo base preto para dar profundidade à imagem */
    border-bottom: 3px solid var(--gold);
    display: flex;
    align-items: center;
    padding-left: 50px;
    overflow: hidden;
    isolation: isolate;
}

.banner-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    z-index: -2;
}

/* Aumentamos a opacidade para 0.7 para que a imagem não pareça "lavada" */
.banner-slide.active {
    opacity: 0.75;
}

/* Overlay de Vinheta: Escurece as laterais para leitura do texto */
.banner-contrast-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.8) 100%);
    z-index: -1;
}

.banner-content {
    position: relative;
    z-index: 10;
}

.banner-content h1 {
    font-size: 42px;
    font-weight: 900;
    color: #ffffff; /* Texto branco para máximo contraste sobre o banner */
    margin: 0;
    letter-spacing: -1px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.banner-content h1 span {
    color: var(--gold);
}

.imperial-badge {
    background: var(--gold);
    color: #fff;
    display: inline-block;
    padding: 2px 10px;
    font-size: 9px;
    font-weight: 900;
    border-radius: 3px;
    margin-bottom: 8px;
}

.banner-content p {
    color: rgba(255,255,255,0.8);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}
 /* ============================================================
   ESTILO: BANNER IMPERIAL (HIGH CONTRAST EDITION)
   ============================================================ */

.sidebar-banner-imperial {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #000000;
    color: #FFFFFF;
    border: 4px solid #FFD700;
    padding: 20px 10px;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    font-family: 'serif', 'Georgia', Times, serif;
}

.sidebar-banner-imperial h2 {
    color: #FFD700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 5px 0 10px 0;
    border-bottom: 1px solid #FFD700;
    padding-bottom: 8px;
    width: 80%;
}

.sidebar-banner-imperial p {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #EEEEEE;
    text-transform: uppercase;
    line-height: 1.4;
}

.sidebar-banner-imperial .banner-cta {
    display: block;
    width: 90%;
    background-color: #FFFF00;
    color: #000000;
    padding: 8px 0;
    text-decoration: none;
    font-weight: 900;
    font-size: 0.75rem;
    text-transform: uppercase;
    border: 2px solid transparent;
    transition: all 0.2s ease-in-out;
}

.sidebar-banner-imperial .banner-cta:hover {
    background-color: #000000;
    color: #FFFF00;
    border-color: #FFFF00;
    cursor: pointer;
}

/* Elementos Decorativos */
.sidebar-banner-imperial::before, 
.sidebar-banner-imperial::after {
    content: "◈ ◈ ◈";
    color: #FFD700;
    font-size: 0.8rem;
    letter-spacing: 5px;
    display: block;
}

.sidebar-banner-imperial::before {
    margin-bottom: 5px;
}

.sidebar-banner-imperial::after {
    margin-top: 5px;
}

/* ============================================================
   ESTILO: SIDEBAR ESQUERDA (OTAKU SHŪSEI UI)
   ============================================================ */

/* Container Principal */
.sidebar {
    width: 260px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    border-right: 1px solid #eeeeee;
    box-sizing: border-box;
}

/* Itens de Navegação - Corrige o erro de ficarem na mesma linha */
.nav-item {
    display: flex; 
    align-items: center;
    padding: 12px 15px;
    margin-bottom: 4px;
    text-decoration: none;
    color: #444444;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s ease;
}

/* Hover: Feedback visual ao passar o mouse */
.nav-item:hover {
    background-color: #f5f5f5;
    color: var(--brand, #e63946); /* Usa sua cor principal */
    transform: translateX(5px);
}

/* Estado Ativo: Quando a página está selecionada */
.nav-item.active {
    background-color: #000000;
    color: #FFD700; /* Dourado Imperial */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Rótulos dos Menus (Protocolos, Radar) */
.menu-label {
    font-size: 10px;
    font-weight: 900;
    color: #bbbbbb;
    text-transform: uppercase;
    margin: 25px 0 10px 15px;
    letter-spacing: 1.5px;
    border-left: 2px solid #eeeeee;
    padding-left: 8px;
}

/* Ajuste de ícones dentro dos links */
.nav-item span, .nav-item emoji {
    margin-right: 10px;
    font-size: 16px;
}

/* Personalização da Scrollbar interna da sidebar */
div[style*="overflow-y: auto"]::-webkit-scrollbar {
    width: 4px;
}

div[style*="overflow-y: auto"]::-webkit-scrollbar-thumb {
    background: #dddddd;
    border-radius: 10px;
}




/* ============================================================
   04. GRIDS & CARDS (CATÁLOGO)
   ============================================================ */
.anime-grid-vertical {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 25px;
    padding: 20px 0;
}

.glass-card-v {
    background: #ffffff !important;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    height: 100%;
    transition: transform 0.3s ease;
}

.glass-card-v:hover { transform: translateY(-8px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }

/* Título Fixo no Topo */
.card-header-fixed {
    position: absolute;
    top: 0; left: 0; width: 100%;
    padding: 12px 10px 30px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, transparent 100%);
    color: #fff !important;
    font-size: 13px; font-weight: 800;
    z-index: 10;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.card-media-wrapper { position: relative; width: 100%; aspect-ratio: 2/3; background: #eee; }
.card-media-wrapper img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   05. MOBILE RESPONSIVE (SISTEMA DE NAVEGAÇÃO & SIDEBAR)
   ============================================================ */

@media (max-width: 1024px) {
    /* Ajuste do Layout Principal */
    .app-main-layout { 
        display: block; 
        padding-top: 0; 
    }

    /* Esconde colunas secundárias para focar no conteúdo */
    .side-column.right { 
        display: none; 
    }

    /* Sidebar Esquerda: Transformada em Drawer Menu */
    .side-column.left {
        position: fixed !important;
        top: 60px; 
        left: -100%; /* Escondido à esquerda */
        width: 280px;
        height: calc(100vh - 60px);
        background: #ffffff !important; /* Fundo sólido para legibilidade */
        z-index: 9000;
        transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 10px 0 30px rgba(0,0,0,0.15);
        border-right: 1px solid #eee;
        display: block !important; /* Garante que não herde display:none */
    }
    
    /* Estado Ativo: Desliza para dentro da tela */
    .side-column.left.active { 
        left: 0 !important; 
    }

    /* Barra de Navegação Mobile (Sticky) */
    .mobile-nav-bar {
        display: flex; 
        align-items: center;
        height: 60px; 
        background: #fff;
        border-bottom: 2px solid var(--brand); /* Identidade visual fixa */
        position: sticky; 
        top: 0; 
        z-index: 6000; 
        padding: 0 20px;
    }

    /* Ajuste dos itens de menu na sidebar mobile */
    .side-column.left .nav-item {
        padding: 15px 25px;
        border-bottom: 1px solid #f9f9f9;
        font-size: 14px;
    }
}


/* ============================================================
   ESTRUTURA GLOBAL E RESPONSIVIDADE (PADRÃO OTAKU SHŪSEI)
   ============================================================ */

/* 1. Reset e Containers Base */
.fansub-container, 
.news-container, 
.news-read-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box; /* Impede que o padding quebre a largura */
}

/* 2. Grids Inteligentes (Cards que se ajustam sozinhos) */
.grid-container, 
.fansub-grid, 
.projects-grid {
    display: grid;
    /* auto-fill + minmax: o segredo para não precisar de media queries em cada card */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
    gap: 25px;
    width: 100%;
}

/* 3. Header e Navegação Fixa */
.master-header-fixed {
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    z-index: 1000;
}

/* 4. Comportamento Desktop (Min-width: 1024px) */
@media (min-width: 1024px) {
    .mobile-nav-bar {
        display: none !important;
    }

    .app-main-layout {
        margin-top: 0;
        display: flex;
        align-items: stretch;
    }

    .side-column {
        display: block !important;
    }
    
    .side-column.left .nav-item {
        display: flex;
        align-items: center;
        width: 100%;
        text-decoration: none;
        padding: 10px 15px;
    }
}

/* 5. Comportamento Mobile e Tablet (Max-width: 1023px) */
@media (max-width: 1023px) {
    .mobile-nav-bar {
        display: flex;
        align-items: center;
        padding: 10px 20px;
        background: #fff;
        border-bottom: 1px solid #eee;
        gap: 15px;
    }

    .side-column.left {
        display: none; 
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        height: 100vh;
        width: 280px;
        background: #fff;
        box-shadow: 5px 0 15px rgba(0,0,0,0.1);
    }

    /* Classe ativada via JavaScript para o Menu Mobile */
    .side-column.left.active {
        display: block !important;
    }
}

/* 6. Ajustes de Conteúdo para Telas Pequenas (Max-width: 768px) */
@media (max-width: 768px) {
    .fansub-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 15px;
        padding: 20px !important;
    }

    /* Força os cards a ocuparem 100% da largura em celulares muito pequenos */
    .grid-container, 
    .fansub-grid, 
    .projects-grid {
        grid-template-columns: 1fr;
    }
    
    .news-read-wrapper {
        padding: 15px;
    }
    
    .news-read-wrapper h1 {
        font-size: 28px !important;
    }
}

/* ============================================================
   ESTRUTURA CORE: 3 COLUNAS (SIDEBAR | FEED | SIDEBAR)
   ============================================================ */

/* 1. Reset para eliminar o espaço em branco no topo */
body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 2. Controle de Visibilidade do Toggle (Mobile Nav) */
@media (min-width: 1024px) {
    /* Esconde a barra de menu mobile no Desktop */
    .mobile-nav-bar {
        display: none !important;
    }

    /* Define a grade de 3 colunas para o layout principal */
    .app-main-layout {
        display: grid;
        grid-template-columns: 260px 1fr 300px;
        width: 100%;
        margin-top: 0; /* Cola no header */
        align-items: start;
    }

    /* Garante que as colunas laterais fiquem fixas/visíveis */
    .side-column {
        display: block !important;
        background: #fff;
        border-right: 1px solid #eee;
        min-height: 100vh;
    }

    .side-column.right {
        border-right: none;
        border-left: 1px solid #eee;
    }
}

/* 3. Correção dos Links da Sidebar (Resolve o amontoado da imagem) */
.side-column.left .nav-item {
    display: flex !important; /* Força cada link a ser uma linha nova */
    align-items: center;
    padding: 12px 15px;
    text-decoration: none;
    color: #444;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s;
}

.side-column.left .nav-item:hover {
    background: #f8f8f8;
    color: var(--brand);
}

/* 4. Ajuste do Feed Central para não quebrar */
.center-feed-area {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

/* 5. Comportamento para Telas Mobile */
@media (max-width: 1023px) {
    .app-main-layout {
        display: block; /* Empilha tudo no mobile */
    }

    .side-column {
        display: none; /* Esconde colunas laterais no mobile por padrão */
    }

    .mobile-nav-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        background: #fff;
        border-bottom: 1px solid #eee;
    }

    /* Classe disparada pelo seu JS no index.php */
    .side-column.left.active {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        width: 260px;
        box-shadow: 5px 0 15px rgba(0,0,0,0.1);
    }
}

/* ============================================================
   ESTILO DA HOME (FEED CENTRAL)
   ============================================================ */

.home-welcome-container {
    padding: 0 30px; /* Afasta o conteúdo das sidebars */
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
    margin-top: 15px;
}

.glass-card {
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.glass-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.glass-card img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    background: #eee;
}

.glass-card .card-title {
    padding: 12px;
    font-size: 12px;
    font-weight: 800;
    color: #333;
    text-align: center;
}

/* ============================================================
   04. GRIDS & CARDS (CATÁLOGO HD & STREAMING) - REVISADO
   ============================================================ */

/* Barra de Status (Topo do Feed) */
.otaku-status-bar {
    display: flex;
    align-items: center;
    padding: 15px;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid var(--border);
}

/* Container de Grid Vertical: Ajustado para o layout de 3 colunas */
.anime-grid-vertical {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; 
    gap: 20px;
    padding-bottom: 40px;
}

/* Card Estilo "Glass" Suave */
.glass-card-v {
    background: #ffffff !important;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden; /* Garante que badges e imagens respeitem o raio da borda */
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none !important;
}

.glass-card-v:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* Título Fixo: Gradiente reforçado para legibilidade e cor Imperial */
.card-header-fixed {
    position: absolute;
    top: 0; left: 0; width: 100%;
    padding: 12px 10px 35px; /* Padding inferior estendido para o gradiente */
    background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, transparent 100%);
    color: #FFD700 !important; /* Dourado Imperial */
    font-size: 11px;
    font-weight: 800;
    z-index: 5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

/* Media Wrapper: Trava as badges dentro da imagem */
.card-media-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 2/3;
    background: #eee;
    overflow: hidden; /* Força enquadramento da badge de faixa etária */
}

.card-media-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Badges Internas: Enquadramento corrigido para dentro da imagem */
.badge-age {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 900;
    z-index: 10;
}

.badge-corner {
    position: absolute;
    bottom: 10px;
    right: 10px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 900;
    color: #fff;
    z-index: 10;
    text-transform: uppercase;
}

/* Estilos de Categoria */
.badge-hd { background: var(--brand); }
.badge-web { 
    background: #0088ff !important; 
    border: 1px solid rgba(255,255,255,0.3);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Informações do Card */
.card-info-container {
    padding: 12px;
    background: #fff;
}

.card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.meta-label-hd { font-size: 9px; font-weight: 900; color: #888; text-transform: uppercase; }

.meta-label-web { 
    font-size: 9px; 
    font-weight: 900; 
    color: #0088ff; 
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid #0088ff;
    padding-bottom: 2px;
}

.card-episodes {
    font-size: 10px;
    font-weight: 800;
    color: var(--brand);
}

.card-description {
    font-size: 11px;
    color: #666;
    line-height: 1.4;
    height: 3em;
    overflow: hidden;
}

/* Rodapé da Página */
.otaku-footer-bar {
    text-align: center;
    padding: 20px;
    font-size: 10px;
    font-weight: 800;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ============================================================
   06. FANSUB UI: PADRÃO ARREDONDADO (OTAKU SHŪSEI)
   ============================================================ */

/* Botão Estilo Otaku (Arredondado, sem colchetes) */
.btn-otaku {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 30px; /* Bordas totalmente arredondadas */
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    text-transform: none; /* Sai do uppercase agressivo */
}

.btn-otaku.primary {
    background-color: var(--brand);
    color: #FFF;
}

.btn-otaku.secondary {
    background-color: var(--gold);
    color: #000;
}

.btn-otaku.small {
    padding: 6px 15px;
    font-size: 11px;
}

.btn-otaku:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    filter: brightness(1.1);
}

/* Cards Arredondados */
.entity-card, .otaku-mini-card {
    background: #FFF;
    border: 1px solid var(--border);
    border-radius: 16px; /* Arredondamento suave */
    padding: 20px;
    transition: 0.3s ease;
}

.entity-card:hover {
    border-color: var(--brand);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

/* Pílulas de Status/Stats */
.stat-pill {
    display: inline-block;
    background: #f0f0f0;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    color: #555;
}

.stat-pill strong {
    color: var(--brand);
}

/* Ajustes de Grid e Layout */
.fansub-grid, .projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 25px;
}

.card-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

/* ============================================================
   07. NEWS READ & CONTENT (PADRÃO LEITURA OTALU)
   ============================================================ */

/* Container de Leitura */
.news-read-wrapper {
    background: #ffffff;
    border-radius: 20px;
    padding: 40px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}

/* Tipografia da Notícia */
.news-content {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: 1.8;
    color: #333;
}

/* Estilização interna do conteúdo (vêem do banco de dados) */
.news-content p {
    margin-bottom: 25px;
}

.news-content h2, .news-content h3 {
    margin: 40px 0 20px;
    color: #111;
    font-weight: 900;
    text-transform: none; /* Sem colchetes ou caps total */
}

.news-content img {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
    margin: 30px 0;
    display: block;
}

/* Ajuste de Badge para o Header da Notícia */
.news-read-wrapper .badge-age {
    border-radius: 30px; /* Pílula perfeita */
    font-size: 11px;
    letter-spacing: 1px;
    font-weight: 900;
}

/* Responsividade de Leitura */
@media (max-width: 768px) {
    .news-read-wrapper {
        padding: 20px;
        border-radius: 0; /* No mobile ocupa a tela toda */
        border: none;
    }
    
    .news-read-wrapper h1 {
        font-size: 28px !important;
    }
}

/* FORÇAR RESPONSIVIDADE TOTAL */

/* Impede qualquer elemento de ser maior que a tela do celular */
* { max-width: 100vw; box-sizing: border-box; }

/* Garante que imagens e banners não estiquem o layout */
img, video, iframe, canvas {
    max-width: 100% !important;
    height: auto !important;
}

/* EXCEÇÃO PARA VÍDEOS EM MODAL E CONTAINERS PROPORCIONAIS */
#video-container iframe, 
.video-proportional-box iframe,
#shusei-video-container iframe {
    height: 100% !important; /* Força o vídeo a preencher o espaço do padding */
    position: absolute;
    top: 0;
    left: 0;
}

/* Ajuste da Sidebar no Mobile (forçando sumiço lateral) */
@media (max-width: 1024px) {
    .side-column.left {
        position: fixed !important;
        left: -100% !important; /* Move para fora da tela */
        width: 280px !important;
        z-index: 9999 !important;
    }

    .side-column.left.active {
        left: 0 !important; /* Desliza para dentro */
    }

    /* O conteúdo ocupa a tela toda no mobile */
    .app-main-layout {
        display: block !important; /* Empilha em vez de ficar lado a lado */
    }
}


/* EXCEÇÃO PARA VÍDEOS EM MODAL E CONTAINERS PROPORCIONAIS */
#video-container iframe, 
.video-proportional-box iframe,
#shusei-video-container iframe {
    height: 100% !important; /* Força o vídeo a preencher o espaço do padding */
    position: absolute;
    top: 0;
    left: 0;
}




/* ============================================================
   IDENTIDADE IMPERIAL GOLD CARDS
   ============================================================ */

:root {
    --gold-wanted: #ffbd2e; /* Tom Gold oficial */
    --imperial-bg: #F8F9FA;
    --imperial-border: #E5E5E5;
}

/* Container Central: Proteção Vital da Sidebar */
.center-feed-area {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* Card de Detalhes Imperial */
.detail-wrapper {
    background: #FFF !important;
    border: 1px solid var(--imperial-border) !important;
    border-radius: 12px !important;
    padding: 40px !important;
    margin-bottom: 30px !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05) !important;
}

/* Título no Topo (Destaque Imperial) */
.detail-header-top {
    width: 100% !important;
    margin-bottom: 30px !important;
    border-bottom: 1px solid var(--imperial-border) !important;
    padding-bottom: 15px !important;
}

.detail-header-top h1 {
    font-size: 34px !important;
    font-weight: 900 !important;
    color: #000 !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}

/* Estrutura de Conteúdo ao lado da Foto */
.detail-main-content {
    display: flex !important;
    gap: 40px !important;
    align-items: start !important;
    flex-wrap: wrap !important;
}

.detail-column-left { flex: 0 0 280px !important; }
.detail-column-right { flex: 1 !important; min-width: 300px !important; }

/* Grid de Informações Táticas */
.info-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 15px !important;
    margin-bottom: 30px !important;
}

.info-box {
    background: var(--imperial-bg) !important;
    border: 1px solid var(--imperial-border) !important;
    border-radius: 8px !important;
    padding: 15px !important;
}

/* Rótulos Gold Wanted */
.info-label {
    font-size: 9px !important;
    color: var(--gold-wanted) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    margin-bottom: 5px !important;
}

/* Sinopse com Borda Gold */
.review-text {
    border-left: 4px solid var(--gold-wanted) !important;
    background: var(--imperial-bg) !important;
    padding: 25px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/* Botão Gold Wanted */
.btn-gold {
    background: var(--gold-wanted) !important;
    color: #000 !important;
    font-weight: 900 !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 12px !important;
    width: 100% !important;
    cursor: pointer !important;
}

/* Modal do Trailer Gold (Blindagem) */
#trailer-modal-container {
    border: 3px solid var(--gold-wanted) !important;
    background: #000 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.btn-close-gold {
    background: var(--gold-wanted) !important;
    color: #000 !important;
    font-weight: 900 !important;
    border: none !important;
    padding: 10px 25px !important;
    border-radius: 5px !important;
    cursor: pointer !important;
}

/* Garante que as colunas fiquem lado a lado sem "vazar" */
.detail-main-content {
    display: flex !important;
    gap: 40px !important;
    align-items: start !important;
    flex-wrap: nowrap !important; /* Força o "lado a lado" */
}

/* O Segredo: min-width: 0 impede que o texto vire uma tripa */
.detail-column-right {
    flex: 1 !important;
    min-width: 0 !important; 
    width: 100% !important;
}

/* Garante que o texto quebre por palavras, não por letras */
.review-text {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}
/* ============================================================
   AJUSTE DE ESTRUTURA CORE (PROTEÇÃO DE SIDEBAR)
   ============================================================ */

/* Garante que o Grid se comporte como 3 colunas reais */
.app-main-layout {
    display: grid !important;
    grid-template-columns: 260px 1fr 300px !important;
    width: 100% !important;
    max-width: 100vw !important;
    gap: 0 !important;
    align-items: start !important;
}

/* O segredo para a sidebar não sumir: overflow e largura mínima */
.center-feed-area {
    width: 100% !important;
    min-width: 0 !important; /* Permite que o 1fr funcione corretamente */
    padding: 20px !important;
    box-sizing: border-box !important;
    overflow: hidden !important; 
}