/*
   responsivo.css
   SRP: APENAS breakpoints responsivos — sem estilos base
   ✅ FASE 1: seletores fantasmas removidos
   ✅ Adicionados seletores reais da arena atual
   ✅ ATUALIZADO: Painéis esquerdo e direito aumentados
*/

/* ══════════════════════════════════════════════
   1200px — arena lateral comprime levemente
══════════════════════════════════════════════ */
@media (max-width: 1200px) {

    /* Arena — painéis laterais comprimem */
    .arena-tela-wrapper {
        gap: 0.75rem;
        padding: 0.75rem;
    }

    .arena-lateral-panel { 
        width: 300px;
        min-width: 300px; 
        max-width: 310px; 
    }
}

/* ══════════════════════════════════════════════
   1100px — ajustes intermediários
══════════════════════════════════════════════ */
@media (max-width: 1100px) {

    .arena-lateral-panel { 
        width: 290px;
        min-width: 290px; 
        max-width: 300px; 
    }

    .arena-lateral-topo { gap: 0.5rem; }
}

/* ══════════════════════════════════════════════
   900px — painel lateral começa a empilhar
══════════════════════════════════════════════ */
@media (max-width: 900px) {

    .arena-lateral-panel { 
        width: 270px;
        min-width: 270px; 
        max-width: 280px; 
    }

    .arena-lateral-foto-col { display: none; }

    .arena-layout-principal {
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }

    .arena-coluna-esquerda,
    .arena-coluna-central,
    .arena-coluna-direita {
        overflow: visible;
    }

    .arena-linha-info {
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
    }

    .arena-secao-condicoes {
        grid-column: 1 / -1;
    }

    .arena-secao-condicoes .arena-condicoes-lista {
        max-height: 78px;
    }
}

/* ══════════════════════════════════════════════
   768px — empilhamento geral
══════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Configuração — painéis empilham */
    .container {
        grid-template-columns: 1fr;
        overflow: auto;
        padding: 1rem;
        gap: 1rem;
    }

    /* ── Tabela responsiva: scroll horizontal em vez de cortar ── */
    .tabela-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 0.4rem;
    }

    .tabela-combatentes {
        min-width: 560px; /* garante que os botões de ação nunca somem */
    }

    .tabela-combatentes td {
        padding: 0.55rem 0.7rem;
        font-size: 0.82rem;
    }

    .tabela-combatentes th {
        padding: 0.55rem 0.7rem;
        font-size: 0.75rem;
    }

    /* Arena — wrapper vira coluna */
    .arena-tela-wrapper {
        flex-direction: column;
        height: auto;
        overflow: auto;
        padding: 0.5rem;
        gap: 0.5rem;
    }

    .arena-lateral-panel {
        min-width: unset;
        max-width: unset;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .arena-lateral-topo {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .arena-lateral-iniciativa { flex: 1; min-width: 140px; }

    .arena-lateral-foto-col   { display: none; }

    .arena-conteudo-principal { width: 100%; overflow-y: visible; }

    .arena-card {
        padding: 0.6rem;
    }

    .arena-coluna-central {
        gap: 0.32rem;
    }

    .arena-coluna-central .arena-secao {
        padding-top: 0.08rem;
    }

    .arena-coluna-central .arena-secao + .arena-secao {
        margin-top: 0.06rem;
        padding-top: 0.35rem;
        border-top: 1px solid rgba(201, 168, 76, 0.18);
    }

    .arena-magias-preparadas-lista {
        gap: 0.42rem;
        max-height: 240px;
    }

    .arena-linha-info {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .arena-secao-condicoes .arena-condicoes-lista {
        min-height: 48px;
        max-height: 76px;
    }

    .arena-secao-condicoes .arena-condicao {
        font-size: 0.64rem;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 0.02em;
    }

    .arena-ataque-header,
    .arena-ataque-item {
        grid-template-columns: 1.5fr 0.9fr 1fr;
        gap: 0.15rem;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    .arena-ataque-header span {
        font-size: 0.6rem;
        line-height: 1.25;
        letter-spacing: 0.06em;
    }

    .arena-ataque-item span {
        font-size: 0.72rem;
        line-height: 1.3;
    }

    .arena-ataque-item span:first-child {
        font-weight: 600;
    }

    /* Condicao modal */
    .condicao-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .condicao-combatentes-selecao {
        border-right: none;
        border-bottom: 3px solid var(--borda-painel, #2d4a7a);
        padding-right: 0;
        padding-bottom: 1.5rem;
    }
}

/* ══════════════════════════════════════════════
   600px — header e stats
══════════════════════════════════════════════ */
@media (max-width: 600px) {

    header     { padding: 0.6rem 1rem; }
    header h1  { font-size: 1.4rem; }

    .header-arena { padding: 0.4rem 0.75rem; }
    .header-arena h1 { font-size: 0.95rem; }

    .arena-stats-linha { flex-wrap: wrap; }

    /* Condicao modal compacto */
    .condicao-layout { gap: 1rem; }

    .condicao-combatentes-selecao {
        border-right: none;
        border-bottom: 1px solid var(--borda-painel, #2d4a7a);
        padding-right: 0;
        padding-bottom: 1rem;
    }
}

/* ══════════════════════════════════════════════
   480px — mobile
══════════════════════════════════════════════ */
@media (max-width: 480px) {

    /* ── Filtros ── */
    .filters    { flex-direction: column; }
    .filter-btn { width: 100%; }

    /* ── Atributos D&D ── */
    .atributos-coluna           { gap: 0.6rem; }
    .atributos-duas-colunas     { grid-template-columns: 1fr; gap: 1.5rem; }

    .atributo-circles-container {
        width: 45px;
        height: 45px;
    }

    .atributo-circles-container input[type="number"] {
        width: 42px;
        height: 42px;
        font-size: 15px;
        border-width: 2px;
    }

    .atributo-modificador {
        width: 22px;
        height: 22px;
        font-size: 9px;
        top: -4px;
        right: -5px;
    }

    /* ── Nível e Pontos ── */
    .nivel-pontos-container { flex-direction: column; gap: 15px; }
    .nivel-input            { width: 70px; height: 70px; font-size: 28px; }
    .pontos-field           { width: 100%; }
    .pontos-input           { font-size: 24px; padding: 15px; }

    /* ── Modais ── */
    .modal-actions  { flex-direction: column; }
    .form-row       { grid-template-columns: 1fr; }

    /* ── Upload de foto ── */
    .foto-atributos-container { flex-direction: column; align-items: center; }
    .foto-vertical            { width: 100%; max-width: 250px; }
    .upload-area-vertical     { height: 320px; }

    /* ── Arena mobile: empilha completamente ── */
    .arena-tela-wrapper       { padding: 0.25rem; gap: 0.25rem; }
    .arena-lateral-panel      { padding: 0.5rem; }
    .arena-lateral-topo       { flex-direction: column; }
    .arena-conteudo-principal { padding: 0.5rem; }

    .arena-card {
        padding: 0.45rem;
        border-radius: 10px;
    }

    .arena-coluna-central {
        gap: 0.24rem;
    }

    .arena-coluna-central .arena-secao + .arena-secao {
        margin-top: 0.04rem;
        padding-top: 0.28rem;
    }

    .arena-magias-preparadas-lista {
        gap: 0.3rem;
        max-height: 210px;
    }

    .arena-secao-titulo {
        font-size: 0.56rem;
        letter-spacing: 0.08em;
    }

    .arena-secao-condicoes .arena-condicoes-lista {
        max-height: 70px;
        padding: 0.16rem;
    }

    .arena-secao-condicoes .arena-condicao {
        font-size: 0.62rem;
        padding: 0.16rem 0.38rem;
        line-height: 1.18;
        letter-spacing: 0.015em;
    }

    .arena-condicao-vazia {
        font-size: 0.56rem;
        line-height: 1.25;
    }

    .arena-ataque-header,
    .arena-ataque-item {
        grid-template-columns: 1.3fr 0.8fr 0.9fr;
        gap: 0.1rem;
    }

    .arena-ataque-header span { font-size: 0.58rem; }
    .arena-ataque-item span   { font-size: 0.68rem; line-height: 1.26; }
    .arena-ataque-item span:first-child { font-weight: 600; }

    /* ── Modal condição ── */
    .modal-condicao-container { width: 95vw; }
    .modal-condicao-footer    { flex-direction: column; }

    .btn-aplicar-condicao,
    .btn-cancelar-condicao {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* ── Modal dano/cura ── */
    .modal-dano-container { width: 95vw; }
    .modal-dano-footer    { flex-direction: column; }

    .btn-aplicar-dano,
    .btn-cancelar-dano {
        width: 100%;
        text-align: center;
    }

    /* ── Dashboard header usuario ── */
    .header-usuario-arena {
        flex-wrap: wrap;
        gap: 0.4rem;
        font-size: 0.75rem;
    }

    /* ── Rodada badge ── */
    .rodada-badge { font-size: 0.75rem; padding: 0.15rem 0.5rem; }
}