/* ==========================================================
   MODO GUERRA — tabuleiro 8x8, 4 jogadores
   (reaproveita .gcard/.gcard-stack/.chip/.ghand/.panel do game.css
   e components.css — aqui só o que é específico do layout novo)
========================================================== */

.gamewar-page{

    background:var(--bg);

}

.gamewar-page #gamewar-root{

    flex:1;

    min-height:0;

    display:flex;

    flex-direction:column;

}

/* layout geral: 3 colunas, igual ao Duelo (.game-board) — sidebar
   esquerda (cemitério/exílio + log), tabuleiro+mão no centro, sidebar
   direita (controles + vida/deck). Não reaproveitei a classe
   .game-board em si pra não colidir com as regras de .gwar-root já
   existentes; o conteúdo de cada coluna reaproveita .gside/.gpanel/
   .glog/.gzone/.glife/.gdeck-box do Duelo direto (já carregado global) */
.gwar-root{

    display:grid;

    grid-template-columns:170px minmax(0,1fr) 185px;

    gap:12px;

    height:100%;

    padding:10px;

    box-sizing:border-box;

}

.gcenter{

    display:flex;

    flex-direction:column;

    gap:8px;

    height:100%;

    min-width:0;

}

.gwar-topbar{

    display:flex;

    align-items:center;

    gap:12px;

    flex-shrink:0;

}

.gwar-turn-info{

    font-family:"Cinzel",serif;

    color:var(--gold);

    flex:1;

}

/* ===== tabuleiro: célula fluida, acompanha viewport igual ao --slot-w
   do Duelo, só que pensada pra caber 8 colunas (metade da largura) ===== */

.gwar-field{

    position:relative;

    flex:1;

    min-height:0;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:auto;

}

.gwar-board{

    --gwar-cell:clamp(30px, min(4vw, calc((100vh - 260px) / 9)), 82px);

    display:grid;

    grid-template-columns:repeat(8, var(--gwar-cell));

    grid-template-rows:repeat(var(--rows, 8), var(--gwar-cell));

    gap:2px;

    background:var(--border);

    border:2px solid var(--border);

    border-radius:8px;

    padding:2px;

}

.gwar-cell{

    grid-row:var(--gr);

    grid-column:var(--gc);

    background:var(--panel);

    border-radius:3px;

    position:relative;

    cursor:pointer;

}

.gwar-cell:hover{

    background:var(--panel-light);

}

/* alvo de "arrastar e soltar" (drag and drop) — mesmo destaque dourado
   usado nas cartas/zonas do Duelo (.gcard.drop-over/.gzone.drop-over) */
.gwar-cell.drop-over{

    box-shadow:inset 0 0 0 2px var(--gold);
    z-index:3;

}

/* célula reservada pra Região (de qualquer jogador) — borda tracejada
   discreta, só pra indicar "aqui vai uma região", igual pra todo mundo */
.gwar-cell-region-slot{

    outline:1px dashed rgba(217,179,78,.4);
    outline-offset:-1px;

}

/* a MINHA célula de região reforça com o contorno sólido cheio */
.gwar-cell-mine{

    box-shadow:inset 0 0 0 1px var(--gold);

}

.gwar-cell-reg-hint{

    position:absolute;
    inset:0;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    color:rgba(217,179,78,.45);
    font-size:1.1rem;
    pointer-events:none;

}

/* território de cada jogador: tingimento bem sutil pra dar pra ver de
   longe quem é dono daquela zona 4x4 — usa background, então o
   sombreado de "zona de trás" abaixo é um overlay (::after) por cima,
   pra não brigar com essa cor */
.gwar-zone-0{ background:rgba(90,145,225,.13); }
.gwar-zone-1{ background:rgba(224,120,90,.13); }
.gwar-zone-2{ background:rgba(110,195,120,.13); }
.gwar-zone-3{ background:rgba(180,125,225,.13); }

/* zona de trás de uma região: sombreado discreto (mas perceptível), não
   deve chamar mais atenção que a carta em cima dela — overlay separado
   do território (acima) pra não precisar calcular a cor combinada */
.gwar-cell-back::after{

    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    border-radius:inherit;
    background:rgba(0,0,0,.22);
    pointer-events:none;

}

/* ===== camadas de região (translúcida, "chão") x unidade (por cima) ===== */

.gwar-region-layer{

    position:absolute;

    inset:0;

    z-index:1;

}

/* só a ARTE da região fica translúcida/desfocada — os marcadores (fora
   desse wrapper) continuam nítidos e fáceis de clicar */
.gwar-region-art{

    position:absolute;

    inset:0;

    opacity:.4;

    filter:blur(.5px);

}

.gwar-unit-layer{

    position:relative;

    z-index:2;

}

/* marcadores de região no Guerra: célula é minúscula perto do campo do
   Duelo, então encolhe bastante e sobra pouco pra "flutuar" pra fora */
.gwar-region-layer .gcard-chips-top{

    top:-3px;

    transform:scale(.6);

    transform-origin:top center;

}

/* chips de poder/vida das unidades também encolhem um pouco no Guerra */
.gwar-unit-layer .gcard-chips{

    transform:scale(.75);

    transform-origin:bottom center;

}

/* ===== quadrado do Jogador: nome + vida + contadores, sempre travado ===== */

.gwar-cell-jog{

    cursor:default;

    background:var(--panel-light);

    padding:2px;

}

.gwar-jog{

    height:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:1px;

    font-size:.6rem;

    line-height:1.15;

    text-align:center;

    border-radius:3px;

}

.gwar-jog-turn{

    box-shadow:inset 0 0 0 1px var(--gold);

}

.gwar-jog-mine{

    background:rgba(217,179,78,.08);

}

.gwar-jog-name{

    font-weight:700;

    max-width:100%;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}

.gwar-jog-life{

    display:flex;

    align-items:center;

    gap:2px;

    font-weight:700;

    color:var(--gold);

}

.gwar-jog-life .icon-button{

    padding:0 4px;

    font-size:.65rem;

    line-height:1.3;

    border-radius:4px;

}

.gwar-jog-counts{

    display:flex;

    gap:4px;

    color:var(--text-secondary);

    white-space:nowrap;

}

.gwar-jog-zone{

    all:unset;
    cursor:pointer;
    color:inherit;
    font-size:inherit;

}

.gwar-jog-zone:hover{

    color:var(--gold);

}

/* ===== mão (reaproveita .ghand, só define tamanho dos filhos) ===== */

.ghand > .gcard-stack{

    width:64px;

    height:90px;

    flex-shrink:0;

}

.gwar-selected{

    outline:2px solid var(--gold);

    outline-offset:-2px;

}

/* ===== lobby / mulligan / fim de partida ===== */

.gwar-lobby{

    max-width:480px;

    margin:40px auto;

}

.gwar-lobby-seats{

    list-style:none;

    padding:0;

    margin:10px 0;

    display:flex;

    flex-direction:column;

    gap:6px;

}

.gwar-lobby-seats li{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    background:var(--panel-light);

    border:1px solid var(--border);

    border-radius:8px;

    padding:8px 12px;

}

.gwar-mulligan-hand{

    flex-wrap:wrap;

    overflow:visible;

    margin:14px 0;

}

/* colunas laterais mais estreitas em telas menores — mesmo ponto de
   corte do Duelo (.game-board) */
@media (max-width:1100px){

    .gwar-root{

        grid-template-columns:130px minmax(0,1fr) 120px;

    }

}

@media (max-width:720px){

    .gwar-jog{

        font-size:.52rem;

    }

    .gwar-jog-counts{

        display:none; /* some primeiro num tabuleiro apertado — a vida é o essencial */

    }

}