/* ==========================================================
   CAMPO DE BATALHA
========================================================== */

.game-page{

    /* tamanho dos espaços do campo — limitado pela LARGURA (7.3vw) e
       pela ALTURA da janela, para o tabuleiro inteiro caber sem scroll */
    --slot-w:clamp(64px, min(7.3vw, calc((100vh - 150px) / 8.5)), 128px);
    --slot-h:calc(var(--slot-w) * 1.26);

    padding:10px 14px;

    height:100%;

    overflow:hidden;

    display:flex;

    flex-direction:column;

}

.game-page #game-root{

    flex:1;

    min-height:0;

    display:flex;

    flex-direction:column;

}

/* nada de texto selecionado sem querer (duplo clique no deck etc.) */

.game-page,
.gmenu,
.game-aux-overlay,
.game-overlay{

    user-select:none;

}

.game-page input,
.game-aux-overlay input{

    user-select:text;

}

.game-missing{

    max-width:420px;

    margin:60px auto;

    text-align:center;

}

.game-missing .button{

    margin-top:16px;

    width:auto;

}

/* ===== cabeçalho ===== */

.game-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:14px;

    flex-wrap:wrap;

    margin-bottom:12px;

}

.game-header-info{

    display:flex;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

}

.game-header-info strong{

    font-family:"Cinzel",serif;

    color:var(--gold);

    font-size:1.05rem;

}

.game-header-actions{

    display:flex;

    gap:8px;

}

.game-header-actions .button{

    margin-top:0;

}

/* ===== estrutura ===== */

.game-board{

    display:grid;

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

    gap:12px;

    align-items:stretch;

    flex:1;

    min-height:0;

}

.gside{

    overflow-y:auto;

    min-height:0;

}

/* painel de informações da sala (canto direito) */

.ginfo{

    background:var(--panel);

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

    border-radius:10px;

    padding:10px;

    display:flex;

    flex-direction:column;

    gap:6px;

    align-items:flex-start;

}

.ginfo strong{

    font-family:"Cinzel",serif;

    color:var(--gold);

    font-size:.95rem;

    overflow-wrap:anywhere;

}

.ginfo .badge{

    font-size:.68rem;

}

.gwide{

    width:100%;

    margin-top:0;

}

@media (max-width:1100px){

    .game-board{
        grid-template-columns:130px minmax(0,1fr) 120px;
    }

}

.gside{

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    gap:10px;

    min-width:0;

}

.gside-group{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.gpanel{

    background:var(--panel);

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

    border-radius:12px;

    padding:10px;

    display:flex;

    flex-direction:column;

    gap:8px;

    flex:1;

    min-height:0;

}

.gcenter{

    display:flex;

    flex-direction:column;

    gap:8px;

    min-width:0;

    min-height:0;

    height:100%;

}

/* ===== mãos ===== */

.ghand{

    background:var(--panel);

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

    border-radius:12px;

    padding:6px 8px;

    display:flex;

    gap:6px;

    overflow-x:auto;

    overflow-y:hidden;

    flex-shrink:0;

    align-items:center;

}

.ghand.drop-over{

    border-color:var(--gold);

}

.ghand-empty{

    color:var(--text-secondary);

    font-size:.8rem;

    margin:0 auto;

}

.ghand{

    perspective:700px;

}

.ghand-card{

    position:relative;

    width:calc(var(--slot-w) * 0.78);

    height:calc(var(--slot-h) * 0.78);

    border-radius:6px;

    overflow:hidden;

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

    flex-shrink:0;

    cursor:grab;

    transition:transform .15s ease;

    background:var(--panel-light);

}

.ghand-flag{

    position:absolute;

    top:2px;

    right:2px;

    z-index:2;

    font-size:.6rem;

    background:rgba(0,0,0,.7);

    border-radius:6px;

    padding:1px 4px;

    pointer-events:none;

}

.ghand-flag-ask{

    background:rgba(201,168,79,.85);

}

.ghand-revealed{

    border-color:rgba(201,168,79,.6);

}

/* ===== animações: comprar e virar de face ===== */

.gdraw{

    animation:cardDraw .5s cubic-bezier(.22,1,.36,1);

}

@keyframes cardDraw{

    from{ transform:translateX(70px) rotateY(88deg); opacity:0; }

    to{ transform:none; opacity:1; }

}

.gflip{

    animation:cardFlip .5s ease;

}

@keyframes cardFlip{

    0%{ transform:rotateY(88deg); }

    100%{ transform:rotateY(0); }

}

/* virar de face mantendo a rotação de "virada" (45°) */

.gcard.tapped.gflip{

    animation:cardFlipTapped .5s ease;

}

@keyframes cardFlipTapped{

    0%{ transform:rotate(45deg) rotateY(88deg) scale(.94); }

    100%{ transform:rotate(45deg) rotateY(0) scale(.94); }

}

.ghand-card:hover{

    transform:translateY(-6px) scale(1.06);

    border-color:var(--gold);

}

.ghand-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.ghand-card img:not([src]){ display:none; }

/* ===== costas de carta (deck, mão do oponente, escondidas) ===== */

.card-back{

    position:relative;

    background:
        radial-gradient(circle at 50% 32%, rgba(122,77,255,.28), transparent 65%),
        linear-gradient(150deg,#2b1f58,#151024);

    border:2px solid rgba(201,168,79,.6);

    border-radius:9px;

    overflow:hidden;

}

/* medalhão central: losango dourado com "JJ" */

.card-back{

    container-type:size;

    box-shadow:
        inset 0 0 0 2px rgba(0,0,0,.45),
        inset 0 0 0 3px rgba(201,168,79,.25),
        inset 0 0 22px rgba(0,0,0,.55);

}

.card-back-icon{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    pointer-events:none;

}

.card-back-icon::before{

    content:"";

    position:absolute;

    width:52cqw;

    height:52cqw;

    border:2px solid rgba(201,168,79,.75);

    border-radius:14%;

    transform:rotate(45deg);

    background:
        radial-gradient(circle at 30% 30%, rgba(201,168,79,.22), transparent 70%),
        rgba(21,16,36,.4);

    box-shadow:
        0 0 14px rgba(201,168,79,.28),
        inset 0 0 10px rgba(201,168,79,.18);

}

.card-back-icon::after{

    content:"JJ";

    position:relative;

    font-family:"Cinzel",serif;

    font-weight:700;

    font-size:26cqw;

    letter-spacing:.04em;

    color:#dcc06e;

    text-shadow:
        0 0 10px rgba(201,168,79,.6),
        0 2px 4px rgba(0,0,0,.8);

}

/* pontinhos dourados nos cantos (efeito de retícula de quadrinho) */

.card-back::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background-image:radial-gradient(circle, rgba(201,168,79,.55) 1.2px, transparent 1.5px);

    background-size:8px 8px;

    -webkit-mask-image:
        radial-gradient(circle at 0% 0%, #000 0 26%, transparent 27%),
        radial-gradient(circle at 100% 100%, #000 0 26%, transparent 27%);

    mask-image:
        radial-gradient(circle at 0% 0%, #000 0 26%, transparent 27%),
        radial-gradient(circle at 100% 100%, #000 0 26%, transparent 27%);

}

/* variante "?": cartas escondidas mantêm a interrogação */

.card-back.qmark span{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    font-family:"Cinzel",serif;

    font-size:38cqw;

    color:rgba(201,168,79,.85);

    text-shadow:0 0 10px rgba(201,168,79,.5);

    z-index:2;

}

.ghand-back{

    width:calc(var(--slot-w) * 0.55);

    height:calc(var(--slot-h) * 0.55);

    flex-shrink:0;

    cursor:pointer;

    transition:transform .15s ease;

}

.ghand-back:hover{

    transform:translateY(-4px);

    border-color:var(--gold);

}

/* ===== deck como carta ===== */

.gdeck-card{

    width:calc(var(--slot-w) * 0.95);

    height:calc(var(--slot-h) * 0.95);

    margin:0 auto;

    flex-shrink:0;

    transition:var(--transition);

}

.gdeck-card.mine-deck{

    cursor:pointer;

}

.gdeck-card.mine-deck:hover,
.gdeck-card.drop-over{

    border-color:var(--gold);

    box-shadow:0 0 14px rgba(201,168,79,.35);

}

.gdeck-card.opp-deck{

    width:calc(var(--slot-w) * 0.62);

    height:calc(var(--slot-h) * 0.62);

}

.gdeck-count{

    position:absolute;

    bottom:5px;

    left:50%;

    transform:translateX(-50%);

    z-index:3;

    background:var(--gold);

    color:#111;

    font-family:"Cinzel",serif;

    font-weight:700;

    font-size:.78rem;

    padding:1px 10px;

    border-radius:999px;

    box-shadow:0 2px 6px rgba(0,0,0,.5);

}

/* ===== campo central ===== */

.gfield{

    position:relative;   /* âncora das cartas soltas (quadro branco) */

    flex:1;

    min-height:0;

    display:flex;

    gap:clamp(14px, 2vw, 30px);

    justify-content:center;

    align-items:center;

    background:
        radial-gradient(circle at center, rgba(122,77,255,.06), transparent 70%),
        var(--panel);

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

    border-radius:14px;

    padding:12px;

    overflow-x:auto;

}

.gcolumn{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:8px;

}

.ggrid{

    display:grid;

    grid-template-columns:repeat(2,var(--slot-w));

    gap:7px;

}

.gslot{

    width:var(--slot-w);

    height:var(--slot-h);

    perspective:700px;

    border:1.5px dashed var(--border);

    border-radius:8px;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    transition:var(--transition);

}

.gslot.drop-over{

    border-color:var(--gold);

    background:rgba(201,168,79,.12);

    border-style:solid;

}

/* ===== snap carregado: a borda enche enquanto você segura a carta ===== */

@property --charge{

    syntax:"<percentage>";

    inherits:false;

    initial-value:0%;

}

.gslot.charging::after{

    content:"";

    position:absolute;

    inset:-4px;

    border-radius:11px;

    padding:2.5px;

    background:conic-gradient(var(--gold) var(--charge), transparent 0);

    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);

    -webkit-mask-composite:xor;

    mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);

    mask-composite:exclude;

    animation:slotCharge .42s linear forwards;

    pointer-events:none;

}

@keyframes slotCharge{

    from{ --charge:0%; }

    to{ --charge:100%; }

}

.gslot.charged::after{

    animation:none;

    --charge:100%;

    filter:drop-shadow(0 0 8px rgba(201,168,79,.85));

}

.gslot-number{

    font-family:"Cinzel",serif;

    color:var(--text-secondary);

    opacity:.5;

    font-size:.85rem;

}

.gregion{

    width:calc(var(--slot-w) * 1.06);

    height:calc(var(--slot-h) * 1.06);

    border-color:rgba(201,168,79,.45);

}

.gregion .gslot-number{

    color:var(--gold);

}

/* ===== cartas em campo ===== */

.gcard-stack{

    position:relative;

    width:100%;

    height:100%;

}

.gcard{

    position:relative;

    z-index:5;

    width:100%;

    height:100%;

    border-radius:7px;

    overflow:hidden;

    position:relative;

    border:1px solid rgba(255,255,255,.16);

    background:var(--panel-light);

    /* curva elástica: a carta "gira" com peso ao virar/desvirar */
    transition:transform .3s cubic-bezier(.34,1.45,.64,1), box-shadow .2s ease;

}

.gcard.mine{

    cursor:pointer;

}

/* virada em 45° — mais estiloso que 90° */

.gcard.tapped{

    transform:rotate(45deg) scale(.94);

}

/* regiões ficam de frente para o dono: o oponente vê de cabeça para baixo */

.gcard.opp-owner{

    transform:rotate(180deg);

}

.gcard.opp-owner.tapped{

    transform:rotate(225deg) scale(.94);

}

.gcard.dragging{

    opacity:.4;

}

.gcard.drop-over{

    box-shadow:0 0 0 2px var(--gold);

}

.gcard img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.gcard img:not([src]){ display:none; }

.gcard-placeholder{

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:4px;

    font-size:.58rem;

    font-weight:600;

    line-height:1.25;

    background:
        radial-gradient(circle at 30% 25%,
            color-mix(in srgb, var(--part-color,var(--gold)) 45%, transparent),
            transparent 75%),
        var(--panel-light);

    border-top:3px solid var(--part-color,var(--gold));

    overflow:hidden;

}

.gcard-placeholder.part-0{ --part-color:var(--part-0); }
.gcard-placeholder.part-1{ --part-color:var(--part-1); }
.gcard-placeholder.part-2{ --part-color:var(--part-2); }
.gcard-placeholder.part-3{ --part-color:var(--part-3); }
.gcard-placeholder.part-4{ --part-color:var(--part-4); }
.gcard-placeholder.part-5{ --part-color:var(--part-5); }
.gcard-placeholder.part-6{ --part-color:var(--part-6); }
.gcard-placeholder.part-7{ --part-color:var(--part-7); }

/* chips de poder/vida/marcadores nos cantinhos */

.gcard-chips{

    position:absolute;

    inset:auto 0 0 0;

    display:flex;

    justify-content:space-between;

    padding:2px;

    pointer-events:none;

}

.chip{

    pointer-events:auto;

    min-width:20px;

    height:20px;

    border-radius:50%;

    font-size:.68rem;

    font-weight:700;

    border:1px solid rgba(255,255,255,.4);

    cursor:pointer;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0 4px;

    transition:transform .1s ease;

}

.chip:hover{

    transform:scale(1.2);

}

.chip-power{ background:#8a2f3b; }
.chip-life{ background:#2f7a4a; margin-left:auto; }
.chip-markers{ background:#7A4DFF; margin:0 auto; }
.chip-extra{ background:#6b6b72; margin:0 auto; }

/* ===== chip de fichas da Região: [símbolo da parte] ×N ===== */

.gcard-chips-top{

    position:absolute;

    top:-11px;

    left:0;

    right:0;

    display:flex;

    justify-content:center;

    z-index:7;

    pointer-events:none;

}

.gcard-chips-top .chip{

    pointer-events:auto;

}

.chip-token{

    border-radius:999px;

    min-width:0;

    height:22px;

    padding:0 8px 0 3px;

    gap:3px;

    font-size:.72rem;

    box-shadow:0 2px 6px rgba(0,0,0,.5);

}

.token-glyph{

    width:16px;

    height:16px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:.62rem;

    background:rgba(255,255,255,.25);

}

/* cores das fichas por parte (da print de referência) */

.chip-token.token-part-0{ background:#8d8d92; color:#111; }
.chip-token.token-part-0 .token-glyph{ background:#d6d6d6; color:#333; }

.chip-token.token-part-1{ background:#5c161c; }
.chip-token.token-part-1 .token-glyph{ background:#7a1f24; color:#fff; }

.chip-token.token-part-2{ background:#c99a2e; color:#3d2b06; }
.chip-token.token-part-2 .token-glyph{ background:#f2d35c; color:#6b4a12; }

.chip-token.token-part-3{ background:#8b4fc0; }
.chip-token.token-part-3 .token-glyph{ background:#c77dff; color:#fff; }

.chip-token.token-part-4{ background:#d14a83; }
.chip-token.token-part-4 .token-glyph{ background:#f56fa1; color:#4a132b; }

.chip-token.token-part-5{ background:#6f9e58; }
.chip-token.token-part-5 .token-glyph{ background:#b8e6a3; color:#3f5c2a; }

.chip-token.token-part-6{ background:#3f8f33; }
.chip-token.token-part-6 .token-glyph{ background:#6fce5e; color:#123d0c; }

.chip-token.token-part-7{ background:#1d39c4; }
.chip-token.token-part-7 .token-glyph{ background:#fff; color:#1d39c4; }

/* chip do MÁXIMO de marcadores ("/4") */

.chip-token-max{

    background:#2a2a30 !important;

    color:var(--text-secondary);

    padding:0 7px;

    margin-left:-4px;

}

/* anexos: mini-cartas espiando por baixo da carta base */

.gattach{

    position:absolute;

    inset:0;

    z-index:calc(4 - var(--i, 1));

    transform:translateY(calc(var(--i, 1) * 17px)) scale(calc(1 - var(--i, 1) * 0.04));

    border-radius:7px;

    overflow:hidden;

    border:1px solid rgba(201,168,79,.55);

    background:var(--panel-light);

    cursor:grab;

    box-shadow:0 4px 10px rgba(0,0,0,.5);

    transition:transform .15s ease, z-index 0s;

}

.gattach:hover{

    z-index:8;

    transform:translateY(calc(var(--i, 1) * 17px + 10px)) scale(1);

}

.gattach img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.gattach img:not([src]){ display:none; }

.gattach .gcard-placeholder{

    font-size:.5rem;

}

/* ===== carta escondida (usa o visual de costas + "?") ===== */

.gcard-backface{

    width:100%;

    height:100%;

    border-radius:6px;

    border-width:1.5px;

}

/* ===== modo mirar ===== */

.aiming, .aiming .gcard{

    cursor:crosshair !important;

}

.gpings{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    pointer-events:none;

    z-index:60;

    overflow:visible;

}

.gping-arrow{

    animation:pingFade 3s linear forwards;

}

.gping-arrow line{

    stroke:var(--gold);

    stroke-width:4.5;

    stroke-linecap:round;

    filter:drop-shadow(0 0 6px rgba(201,168,79,.8));

}

.gping-arrow polygon{

    fill:var(--gold);

    filter:drop-shadow(0 0 6px rgba(201,168,79,.8));

}

@keyframes pingFade{

    0%{ opacity:0; }

    6%{ opacity:1; }

    75%{ opacity:1; }

    100%{ opacity:0; }

}

/* ===== pedra-papel-tesoura ===== */

.rps-buttons{

    display:flex;

    gap:14px;

    justify-content:center;

    margin-top:18px;

}

.rps-pick{

    background:var(--panel-light);

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

    border-radius:14px;

    color:var(--text);

    width:96px;

    padding:16px 8px 12px;

    cursor:pointer;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:8px;

    font-size:.8rem;

    transition:var(--transition);

}

.rps-pick .gicon{

    width:34px;

    height:34px;

    color:var(--gold);

}

.rps-pick:hover{

    border-color:var(--gold);

    transform:translateY(-4px);

}

.rps-result{

    position:fixed;

    inset:0;

    z-index:9450;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:18px;

    pointer-events:none;

    background:rgba(5,5,8,.6);

    backdrop-filter:blur(3px);

    animation:rpsFade 4.2s ease forwards;

}

@keyframes rpsFade{

    0%{ opacity:0; }

    8%{ opacity:1; }

    82%{ opacity:1; }

    100%{ opacity:0; }

}

.rps-hands{

    display:flex;

    align-items:center;

    gap:26px;

}

.rps-hand{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:6px;

    background:var(--panel);

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

    border-radius:16px;

    padding:18px 26px 14px;

}

.rps-hand.winner{

    border-color:var(--gold);

    box-shadow:0 0 22px rgba(201,168,79,.4);

}

.rps-hand .gicon{

    width:44px;

    height:44px;

    color:var(--gold);

}

.rps-hand span{

    font-weight:600;

    font-size:.9rem;

}

.rps-hand small{

    color:var(--text-secondary);

    font-size:.72rem;

}

.rps-vs{

    font-family:"Cinzel",serif;

    font-size:1.6rem;

    color:var(--text-secondary);

}

.rps-verdict{

    font-family:"Cinzel",serif;

    font-size:2rem;

    color:var(--gold);

    text-shadow:0 0 18px rgba(201,168,79,.6), 0 4px 14px rgba(0,0,0,.9);

}

.rps-result.lose .rps-verdict{

    color:var(--danger);

    text-shadow:0 0 18px rgba(185,74,72,.5), 0 4px 14px rgba(0,0,0,.9);

}

/* ===== flash "Sua vez!" ===== */

.turn-flash{

    position:fixed;

    inset:0;

    z-index:9400;

    display:flex;

    align-items:center;

    justify-content:center;

    pointer-events:none;

    animation:turnFlashBg 1.8s ease forwards;

}

.turn-flash span{

    font-family:"Cinzel",serif;

    font-size:clamp(2.4rem, 5.5vw, 4.5rem);

    font-weight:700;

    color:var(--gold);

    text-shadow:
        0 0 24px rgba(201,168,79,.85),
        0 4px 18px rgba(0,0,0,.9);

    animation:turnFlashText 1.8s cubic-bezier(.2,1.4,.4,1) forwards;

}

@keyframes turnFlashBg{

    0%{ background:rgba(0,0,0,0); }

    18%{ background:rgba(0,0,0,.45); }

    70%{ background:rgba(0,0,0,.45); }

    100%{ background:rgba(0,0,0,0); }

}

@keyframes turnFlashText{

    0%{ opacity:0; transform:scale(.4); }

    22%{ opacity:1; transform:scale(1.08); }

    32%{ transform:scale(1); }

    75%{ opacity:1; }

    100%{ opacity:0; transform:scale(1.05); }

}

/* ===== menu da carta (botão direito) ===== */

.gmenu{

    position:fixed;

    z-index:9250;

    display:flex;

    gap:14px;

    background:var(--panel);

    border:1px solid rgba(201,168,79,.45);

    border-radius:14px;

    padding:12px;

    box-shadow:0 18px 48px rgba(0,0,0,.65);

    animation:gmenuIn .16s ease;

}

@keyframes gmenuIn{

    from{ opacity:0; transform:translateY(6px) scale(.97); }

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

}

.gmenu-actions{

    display:flex;

    flex-direction:column;

    gap:6px;

    min-width:170px;

}

.gmenu-btn{

    background:var(--panel-light);

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

    color:var(--text);

    border-radius:8px;

    padding:8px 12px;

    font-size:.8rem;

    text-align:left;

    cursor:pointer;

    transition:var(--transition);

    display:flex;

    align-items:center;

    gap:8px;

}

.gmenu-btn .gicon{

    width:15px;

    height:15px;

}

.gmenu-btn:hover:not(:disabled){

    border-color:var(--gold);

    transform:translateX(2px);

}

.gmenu-btn:disabled{

    opacity:.4;

    cursor:not-allowed;

}

.gmenu-danger:hover{

    border-color:var(--danger) !important;

    color:var(--danger);

}

.gmenu-active{

    border-color:rgba(201,168,79,.6);

    color:var(--gold);

}

/* ===== selo de Amanhecer/Anoitecer nas Regiões ===== */

.gdaytime{

    position:absolute;

    top:-9px;

    right:-9px;

    z-index:8;

    width:24px;

    height:24px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    pointer-events:none;

}

.gdaytime .gicon{

    width:15px;

    height:15px;

}

.gdaytime.dawn{

    background:radial-gradient(circle at 35% 30%, #ffd97a, #e8a33c);

    color:#5c3a00;

    box-shadow:0 0 12px rgba(255,190,80,.85);

}

.gdaytime.dusk{

    background:radial-gradient(circle at 35% 30%, #7d6fd6, #3d3480);

    color:#e8e2ff;

    box-shadow:0 0 12px rgba(122,77,255,.8);

}

.gmenu-related{

    display:flex;

    flex-direction:column;

    gap:6px;

    justify-content:center;

    max-width:330px;

}

.gcarousel{

    display:flex;

    gap:8px;

    overflow-x:auto;

    overflow-y:hidden;   /* o zoom do hover não pode criar scroll vertical */

    padding:48px 10px 12px;

}

.gcarousel-card{

    width:86px;

    height:108px;

    flex-shrink:0;

    border-radius:8px;

    overflow:hidden;

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

    background:var(--panel-light);

    cursor:pointer;

    padding:0;

    transition:transform .18s cubic-bezier(.34,1.4,.64,1), border-color .18s ease;

}

.gcarousel-card:hover{

    transform:translateY(-16px) scale(1.32);

    border-color:var(--gold);

    z-index:5;

    position:relative;

    box-shadow:0 12px 28px rgba(0,0,0,.6);

}

.gcarousel-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.gcarousel-card img:not([src]){ display:none; }

.gcarousel-card .gcard-placeholder{

    font-size:.55rem;

}

.gcarousel-hint{

    font-size:.68rem;

    color:var(--text-secondary);

    text-align:center;

}

/* ===== cartas soltas na mesa (quadro branco) ===== */

.gloose{

    position:absolute;

    width:var(--slot-w);

    height:var(--slot-h);

    z-index:6;

    /* âncora no CENTRO: a carta cai exatamente onde o mouse soltou,
       e a posição espelha certinho na visão do oponente */
    transform:translate(-50%, -50%);

    filter:drop-shadow(0 8px 14px rgba(0,0,0,.5));

}

/* ===== pilhas laterais (deck, cemitério, exílio) ===== */

.gzone{

    background:var(--panel);

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

    border-radius:10px;

    padding:8px;

    text-align:center;

    cursor:pointer;

    transition:var(--transition);

}

.gzone:hover,
.gzone.drop-over{

    border-color:var(--gold);

}

.gzone-label{

    display:block;

    font-size:.68rem;

    text-transform:uppercase;

    letter-spacing:.5px;

    color:var(--text-secondary);

}

.gzone-count{

    font-family:"Cinzel",serif;

    color:var(--gold);

    font-size:1.15rem;

    font-weight:700;

}

.gdeck{

    background:
        linear-gradient(140deg, rgba(122,77,255,.15), transparent),
        var(--panel);

}

.glife{

    background:var(--panel);

    border:1px solid rgba(76,175,125,.4);

    border-radius:10px;

    padding:8px;

    text-align:center;

    font-size:1rem;

    user-select:none;

}

.glife[data-life-user]{

    cursor:pointer;

}

.glife strong{

    font-family:"Cinzel",serif;

    color:var(--success);

    font-size:1.2rem;

}

.gtokens{

    background:var(--panel);

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

    border-radius:10px;

    padding:8px;

    text-align:center;

    font-size:.85rem;

    color:var(--text-secondary);

    user-select:none;

}

.gtokens.clickable{

    cursor:pointer;

}

.gtokens strong{

    color:var(--gold);

}

.gtool-btn{

    background:var(--panel-light);

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

    color:var(--text);

    border-radius:8px;

    padding:7px 10px;

    font-size:.78rem;

    cursor:pointer;

    transition:var(--transition);

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

}

.gicon{

    width:16px;

    height:16px;

    flex-shrink:0;

}

.token-glyph .token-svg{

    width:11px;

    height:11px;

    display:block;

}

.gtool-btn:hover{

    border-color:var(--gold);

}

.gtools-row{

    display:flex;

    gap:5px;

}

.gtools-row .gtool-btn{

    flex:1;

    min-width:0;

    padding:7px 0;

    font-size:.95rem;

    text-align:center;

}

.gturn .button{

    margin-top:0;

    width:100%;

}

/* ===== log ===== */

.glog{

    flex:1;

    overflow-y:auto;

    display:flex;

    flex-direction:column;

    gap:6px;

    font-size:.7rem;

    color:var(--text-secondary);

    line-height:1.4;

    min-height:120px;

}

.glog p:first-child{

    color:var(--text);

}

/* ===== overlays ===== */

.game-overlay{

    position:fixed;

    inset:0;

    z-index:8500;

    background:rgba(5,5,8,.78);

    backdrop-filter:blur(6px);

    display:flex;

    align-items:center;

    justify-content:center;

    padding:24px;

}

.game-dialog{

    max-width:440px;

    text-align:center;

}

.game-dialog h2{

    font-family:"Cinzel",serif;

    color:var(--gold);

    margin-bottom:10px;

}

.game-dialog .input{

    margin:16px 0 0;

}

.game-dialog-wide{

    max-width:820px;

}

.game-dialog-actions{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:18px;

    flex-wrap:wrap;

}

.game-dialog-actions .button{

    margin-top:0;

}

.reveal-banner{

    bottom:140px !important;

    z-index:9350;

}

.game-banner{

    position:fixed;

    bottom:20px;

    left:50%;

    transform:translateX(-50%);

    z-index:8400;

    background:var(--panel);

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

    border-radius:12px;

    padding:12px 18px;

    display:flex;

    align-items:center;

    gap:14px;

    box-shadow:var(--shadow);

}

.game-banner .button{

    margin-top:0;

}

/* mulligan */

.mull-hand{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

    justify-content:center;

    margin-top:16px;

    max-height:46vh;

    overflow-y:auto;

}

.mull-card{

    width:92px;

    cursor:pointer;

    border-radius:8px;

    border:2px solid transparent;

    overflow:hidden;

    transition:var(--transition);

    background:var(--panel-light);

}

.mull-card img{

    width:100%;

    aspect-ratio:4/5;

    object-fit:cover;

    display:block;

}

.mull-card img:not([src]){ display:none; }

.mull-card .gcard-placeholder{

    aspect-ratio:4/5;

    font-size:.65rem;

}

.mull-card-name{

    display:block;

    font-size:.62rem;

    padding:4px;

    text-align:center;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.mull-card.selected{

    border-color:var(--danger);

    transform:translateY(-4px);

    opacity:.85;

}

.mull-card.selected .mull-card-name{

    color:var(--danger);

}

/* modais auxiliares (tokens, cemitério) */

.game-aux-modal{

    max-width:640px;

    max-height:80vh;

    overflow-y:auto;

}

.game-aux-modal .input{

    margin:6px 0 12px;

}

.game-aux-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(110px,1fr));

    gap:10px;

    margin:8px 0 14px;

    max-height:46vh;

    overflow-y:auto;

}

.game-aux-card{

    background:var(--panel-light);

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

    border-radius:8px;

    padding:6px;

    text-align:center;

    font-size:.68rem;

    color:var(--text);

    cursor:pointer;

    transition:var(--transition);

    display:flex;

    flex-direction:column;

    gap:6px;

}

.game-aux-card:hover{

    border-color:var(--gold);

}

.game-aux-card img{

    width:100%;

    aspect-ratio:4/5;

    object-fit:cover;

    border-radius:5px;

    display:block;

}

.game-aux-card img:not([src]){ display:none; }

.game-aux-card .gcard-placeholder{

    aspect-ratio:4/5;

}

.game-aux-card .icon-button{

    padding:4px 8px;

    font-size:.68rem;

}

.game-aux-back{

    width:100%;

    aspect-ratio:4/5;

}

/* o bloco de info dentro do painel de controle não precisa de moldura própria */

.gcontrol .ginfo{

    background:none;

    border:none;

    padding:2px 2px 4px;

}

/* ===== menu do deck ===== */

.deck-menu{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin:8px 0 4px;

}

.deck-menu-row{

    display:flex;

    gap:8px;

    align-items:center;

}

.deck-menu-row .input{

    width:64px;

    margin-bottom:0;

    padding:9px 8px;

    text-align:center;

    flex-shrink:0;

}

.deck-menu-row .button{

    margin-top:0;

    flex:1;

    font-size:.78rem;

    padding:10px 8px;

}

.deck-order-n{

    position:absolute;

    top:4px;

    left:4px;

    z-index:2;

    background:var(--gold);

    color:#111;

    font-size:.62rem;

    font-weight:700;

    padding:1px 6px;

    border-radius:999px;

}

.game-aux-card{

    position:relative;

}

/* preview grande no hover */

.game-preview{

    position:fixed;

    left:18px;

    bottom:110px;

    z-index:9300;

    width:min(360px, 24vw, calc((100vh - 140px) * 0.8));

    pointer-events:none;

    border-radius:12px;

    overflow:hidden;

    box-shadow:0 16px 44px rgba(0,0,0,.65);

    border:1px solid rgba(201,168,79,.45);

}

.game-preview img,
.game-preview .gcard-placeholder{

    width:100%;

    aspect-ratio:4/5;

    object-fit:cover;

    display:block;

    font-size:.9rem;

}

.game-preview .gcard-placeholder{

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:14px;

}

/* no admin o preview fica no canto direito */

.admin-preview{

    left:auto;

    right:22px;

    bottom:22px;

}