/* P2.5 — camada 4/5 do antigo rebirth.css (partição sequencial;
   a ordem de carga preserva a cascata por construção).
   Conteúdo: v100-v137: arena feel, visual unity, player first, YGO polish, rework v120 consolidado, arena legível. */

/* ==========================================================================
   ARENA FEEL (v100) — Onda A (input) + Onda B (board de verdade)
   Bloco appendado: vence as regras antigas por ordem no cascade.
   ========================================================================== */

/* ---------- Onda A: o painel de resultado NUNCA come cliques ---------- */
#result-panel {
    pointer-events: none;
}

#result-panel button,
#result-panel a,
#result-panel [data-rebirth-analyst-toggle] {
    pointer-events: auto;
}

/* ---------- Números de dano flutuantes ---------- */
.rb-float-layer {
    position: absolute;
    inset: 0;
    z-index: 95;
    pointer-events: none;
    overflow: hidden;
}

.rb-float {
    position: absolute;
    transform: translate(-50%, -50%);
    font-family: var(--rb-font-display, inherit);
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.85), 0 0 18px rgba(0, 0, 0, 0.6);
    animation: rb-float-rise 1.05s cubic-bezier(0.16, 0.84, 0.3, 1) both;
    will-change: transform, opacity;
}

.rb-float-dmg { color: #ffd34d; }
.rb-float-hurt { color: #ff6257; }
.rb-float-heal { color: #7ce58a; font-size: 24px; }
.rb-float-info { color: #9ad7ff; font-size: 18px; font-weight: 700; }

@keyframes rb-float-rise {
    0% { opacity: 0; transform: translate(-50%, -20%) scale(0.6); }
    18% { opacity: 1; transform: translate(-50%, -55%) scale(1.12); }
    32% { transform: translate(-50%, -62%) scale(1); }
    78% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -150%) scale(0.94); }
}

/* ---------- Seta de ataque ---------- */
.rb-target-arrow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 90;
    pointer-events: none;
    opacity: 0;
    transition: opacity 140ms ease;
}

.rb-target-arrow.is-active {
    opacity: 1;
}

.rb-target-arrow path {
    fill: none;
    stroke-linecap: round;
}

.rb-target-arrow__shadow {
    stroke: rgba(0, 0, 0, 0.55);
    stroke-width: 9;
}

.rb-target-arrow__line {
    stroke: #ffc24d;
    stroke-width: 4.5;
    stroke-dasharray: 14 10;
    animation: rb-arrow-flow 700ms linear infinite;
}

#rb-arrow-head path {
    fill: #ffc24d;
    stroke: none;
}

@keyframes rb-arrow-flow {
    to { stroke-dashoffset: -24; }
}

/* ---------- Alvos válidos + preview de dano ---------- */
#bot-battlefield .is-valid-target {
    cursor: pointer;
    animation: rb-target-pulse 1.1s ease-in-out infinite;
}

@keyframes rb-target-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(255, 92, 74, 0.55), 0 0 22px rgba(255, 92, 74, 0.3); }
    50% { box-shadow: 0 0 0 4px rgba(255, 132, 92, 0.9), 0 0 34px rgba(255, 112, 76, 0.55); }
}

.rb-strike-preview {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 8;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 900;
    background: rgba(8, 6, 4, 0.92);
    border: 1px solid rgba(255, 194, 77, 0.5);
    color: #ffd34d;
    pointer-events: none;
    white-space: nowrap;
}

.rb-strike-preview[data-tone="kill"] { color: #ff6257; border-color: rgba(255, 98, 87, 0.6); }
.rb-strike-preview[data-tone="shield"] { color: #9ad7ff; border-color: rgba(154, 215, 255, 0.5); }

/* ---------- Cena do turno do bot ---------- */
.is-bot-staging #rebirth-action-bar,
.is-bot-staging #result-panel {
    filter: grayscale(0.35) brightness(0.82);
    pointer-events: none;
}

.rb-field-card.is-stage-enter {
    animation: rb-stage-enter 420ms cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}

@keyframes rb-stage-enter {
    0% { opacity: 0; transform: scale(0.55) translateY(-18px); filter: brightness(2); }
    100% { opacity: 1; transform: scale(1) translateY(0); filter: brightness(1); }
}

/* ---------- Tela de mulligan ---------- */
.rb-mulligan-overlay {
    position: absolute;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Sem filtro de desfoque no fundo (contrato de perf p/ aparelhos
       fracos): opacidade maior entrega o mesmo isolamento visual. */
    background: rgba(4, 3, 5, 0.93);
}

.rb-mulligan-overlay[hidden] {
    display: none !important;
}

.rb-mulligan-sheet {
    max-width: min(92%, 980px);
    padding: 26px 30px 30px;
    text-align: center;
    border: 1px solid rgba(244, 173, 38, 0.35);
    border-radius: 18px;
    background:
        radial-gradient(ellipse 90% 120% at 50% -20%, rgba(244, 173, 38, 0.12), transparent 60%),
        linear-gradient(180deg, rgba(26, 18, 11, 0.96), rgba(10, 6, 4, 0.98));
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
}

.rb-mulligan-kicker {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(244, 173, 38, 0.75);
}

.rb-mulligan-sheet h2 {
    margin: 6px 0 4px;
    font-family: var(--rb-font-display, inherit);
    font-size: clamp(26px, 4vw, 40px);
    color: #f5ead6;
}

.rb-mulligan-sheet > p {
    margin: 0 0 18px;
    color: rgba(245, 234, 214, 0.62);
}

.rb-mulligan-cards {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.rb-mulligan-cards .rb-mini-card {
    pointer-events: none;
    position: relative;
}

.rb-mulligan-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
}

.rb-mulligan-actions button {
    min-width: 180px;
    min-height: 52px;
}

/* No mobile o botão pequeno some — a tela de decisão assume o mulligan. */
@media (max-width: 1179px) {
    .rb-mobile-native .rb-mulligan-button {
        display: none !important;
    }

    /* v148: 104x96 quebrava a proporção do full-art (148:208) — titlebar,
       textbox e statline (relativos desde a v144) estouravam o card e o
       nome clipava ("EALING RAIN"). Altura proporcional e, como no
       desktop, sem textbox: a decisão de mulligan é custo/nome/stats. */
    .rb-mulligan-cards .rb-mini-card {
        width: 104px;
        height: 146px;
        flex: 0 0 104px;
    }

    body.rb-game-page .rb-mulligan-cards .rb-tcg-card.is-fullart .rb-card-textbox {
        display: none !important;
    }

    .rb-mulligan-sheet {
        padding: 18px 14px 20px;
    }

    /* FAB de som: cantinho superior direito do board, longe da mão. */
    .rb-mobile-native .rb-audio-toggle {
        top: 4px;
        right: 6px;
        min-width: 56px;
        min-height: 30px;
        opacity: 0.85;
    }

    /* O vazio central do board mobile encolhe: slots vazios baixos
       (>=112px: contrato de alvo de toque do E2E mobile). */
    .rb-mobile-native .rb-field-slot-empty {
        min-height: 112px;
        height: 112px;
    }
}

/* ---------- Mesa de arena (todas as larguras) ---------- */
.rb-arena-table {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 78% 46% at 50% 52%, rgba(214, 168, 86, 0.10), transparent 70%),
        radial-gradient(ellipse 60% 30% at 50% 86%, rgba(108, 149, 184, 0.07), transparent 75%),
        linear-gradient(180deg, transparent 44%, rgba(255, 214, 140, 0.05) 49%, rgba(255, 214, 140, 0.08) 50%, rgba(255, 214, 140, 0.05) 51%, transparent 56%);
}

.rb-arena-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 168px;
    height: 168px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(244, 173, 38, 0.22);
    box-shadow: inset 0 0 34px rgba(244, 173, 38, 0.08), 0 0 50px rgba(244, 173, 38, 0.05);
    background:
        conic-gradient(from 0deg,
            rgba(244, 173, 38, 0.16) 0deg 8deg, transparent 8deg 52deg,
            rgba(244, 173, 38, 0.16) 52deg 60deg, transparent 60deg 112deg,
            rgba(244, 173, 38, 0.16) 112deg 120deg, transparent 120deg 172deg,
            rgba(244, 173, 38, 0.16) 172deg 180deg, transparent 180deg 232deg,
            rgba(244, 173, 38, 0.16) 232deg 240deg, transparent 240deg 292deg,
            rgba(244, 173, 38, 0.16) 292deg 300deg, transparent 300deg 352deg,
            rgba(244, 173, 38, 0.16) 352deg 360deg);
    mask: radial-gradient(circle, transparent 58%, black 60%);
    -webkit-mask: radial-gradient(circle, transparent 58%, black 60%);
}

.rb-arena-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 280px;
    height: 120px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(244, 173, 38, 0.10), transparent 70%);
    animation: rb-arena-breathe 5.5s ease-in-out infinite;
}

@keyframes rb-arena-breathe {
    0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}

.rb-field-vs {
    color: rgba(244, 173, 38, 0.32);
    letter-spacing: 0.4em;
    text-shadow: 0 0 22px rgba(244, 173, 38, 0.2);
}

/* Slots vazios viram altares: presença discreta, sem caixa de texto. */
.rb-field-slot-empty {
    border: 1px solid rgba(244, 173, 38, 0.12);
    background:
        radial-gradient(circle at 50% 50%, rgba(244, 173, 38, 0.05), transparent 64%),
        rgba(8, 6, 5, 0.42);
    border-radius: 14px;
    box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.5);
}

.rb-field-slot-empty span {
    opacity: 0.42;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rb-field-slot-empty.is-summon-target {
    border-color: rgba(124, 229, 138, 0.55);
    box-shadow: inset 0 0 30px rgba(124, 229, 138, 0.12), 0 0 22px rgba(124, 229, 138, 0.2);
    animation: rb-summon-pulse 1.2s ease-in-out infinite;
}

.rb-field-slot-empty.is-summon-target span {
    opacity: 0.9;
    color: #9af0a6;
}

/* Pulso por LUZ, não por geometria: scale infinito deixava o alvo
   "instável" para qualquer automação/assistive tech e tremia o layout. */
@keyframes rb-summon-pulse {
    0%, 100% { box-shadow: inset 0 0 30px rgba(124, 229, 138, 0.12), 0 0 18px rgba(124, 229, 138, 0.16); }
    50% { box-shadow: inset 0 0 34px rgba(124, 229, 138, 0.2), 0 0 30px rgba(124, 229, 138, 0.34); }
}

/* ==========================================================================
   Onda B (v100): cirurgia sobre o layout FATES — arena central larga,
   comandos empilhados à direita, painel de resultado vira ticker no canto.
   ========================================================================== */
@media (min-width: 1180px) and (min-height: 680px) {
    /* Arena central de verdade: centrada e larga (antes: encostada à
       esquerda com max-width 760 e vácuo até o herói direito). */
    body.rb-game-page .rb-battle-zone {
        justify-self: center !important;
        width: 100% !important;
        max-width: 880px !important;
        height: min(100%, 560px) !important;
        gap: 26px !important;
        padding: 34px 20px 30px !important;
    }

    /* Cartas de campo maiores e legíveis. */
    body.rb-game-page .rb-field-card {
        width: 150px !important;
        height: 212px !important;
        min-width: 150px !important;
    }

    body.rb-game-page .rb-field-slot-empty {
        max-width: 168px !important;
        height: 128px !important;
    }

    body.rb-game-page .rb-field-card .rb-card-nameplate {
        font-size: 12.5px !important;
    }

    body.rb-game-page .rb-field-card .rb-card-statline b {
        font-size: 16px !important;
    }

    /* Coluna de comando à direita da arena: Invocar em cima, fim de turno
       como medalhão embaixo (padrão de TCG: ação de turno perto do polegar). */
    /* Canto de comando: sob o retrato inimigo, fora dos slots da arena. */
    body.rb-game-page .rb-actions-row > div:first-child {
        grid-area: hero-r !important;
        justify-self: center !important;
        align-self: end !important;
        transform: translateY(-86px) !important;
        z-index: 24;
    }

    body.rb-game-page .rb-actions-row > div:nth-child(2) {
        grid-area: hero-r !important;
        justify-self: center !important;
        align-self: end !important;
        transform: translateY(-8px) !important;
        z-index: 24;
    }

    /* No desktop a tela de decisão assume o mulligan por inteiro. */
    body.rb-game-page #mulligan-button {
        display: none !important;
    }

    body.rb-game-page #next-turn-button {
        height: 62px !important;
        min-height: 62px !important;
        font-size: 13px !important;
        border-radius: 12px !important;
        border-width: 2px !important;
        background:
            radial-gradient(ellipse 130% 170% at 50% -40%, rgba(255, 205, 96, 0.34), transparent 56%),
            linear-gradient(180deg, #8a5a18 0%, #59370e 58%, #241405 100%) !important;
        border-color: rgba(255, 213, 122, 0.78) !important;
    }

    body.rb-game-page #next-turn-button.is-cta-pulse {
        animation: rb-endturn-ready 1.4s ease-in-out infinite !important;
    }

    /* O resultado vira um ticker compacto no canto superior esquerdo da
       arena — informa sem NUNCA disputar espaço com a mão (pointer-events
       já é none no bloco global). */
    body.rb-game-page .rb-result-panel {
        position: absolute !important;
        left: calc(clamp(280px, 22vw, 360px) + clamp(20px, 3vw, 48px) + 18px) !important;
        top: 102px !important;
        right: auto !important;
        bottom: auto !important;
        width: 290px !important;
        max-height: 46vh !important;
        overflow-y: auto !important;
        z-index: 36 !important;
        padding: 14px 16px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(226, 180, 88, 0.30) !important;
        background: linear-gradient(180deg, rgba(12, 10, 9, 0.88), rgba(4, 4, 5, 0.82)) !important;
        box-shadow: 0 16px 38px rgba(0, 0, 0, 0.5) !important;
    }

    body.rb-game-page .rb-result-panel.is-idle {
        opacity: 0.65;
    }

    /* Tela de mulligan: cartas com o mesmo corpo da mão FATES. */
    body.rb-game-page .rb-mulligan-cards .rb-mini-card {
        width: 148px;
        height: 208px;
        flex: 0 0 148px;
        margin: 0;
        transform: none;
        animation: none;
    }

    body.rb-game-page .rb-mulligan-cards .rb-card-image-layer {
        height: 56% !important;
    }

    body.rb-game-page .rb-mulligan-cards .rb-card-titlebar {
        top: 58% !important;
    }

    body.rb-game-page .rb-mulligan-cards .rb-card-textbox {
        display: none !important;
    }

    body.rb-game-page .rb-mulligan-cards .rb-card-statline {
        bottom: 8px !important;
    }

    @keyframes rb-endturn-ready {
        0%, 100% { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.36), 0 14px 24px rgba(0, 0, 0, 0.44), 0 0 0 0 rgba(255, 194, 77, 0); }
        50% { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.36), 0 14px 24px rgba(0, 0, 0, 0.44), 0 0 28px 5px rgba(255, 194, 77, 0.4); }
    }
}

/* ==========================================================================
   VISUAL UNITY (v101) — disciplina de balões + identidade única
   ========================================================================== */

/* Popup de ação vive no terço inferior; o banner de turno é dono do topo.
   Mesmo nos raros casos simultâneos, não há sobreposição. */
.rb-action-popup {
    top: auto !important;
    bottom: 30% !important;
    transform: translate(-50%, 10px) scale(0.94);
}

/* Durante a mira, o chip de preview é a única voz sobre o alvo. */
.is-choosing-attack #bot-battlefield .rb-risk-badge {
    display: none !important;
}

/* ---------- Identidade única: todas as páginas vivem no mesmo mundo ---------- */
/* O mesmo céu/ruínas/lua da arena (F24) atrás de home, campanha, coleção,
   loja, deck builder, progressão, ranking e billing. */
body.rb-home-page {
    background: transparent;
}

body.rb-home-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 600' preserveAspectRatio='xMidYMax slice'%3E%3Cpolygon points='0,600 0,420 180,300 320,360 440,260 600,330 740,220 880,290 1020,200 1180,280 1320,210 1480,290 1620,230 1760,310 1920,260 1920,600' fill='%23000' opacity='0.62'/%3E%3C/svg%3E") bottom center / 100% auto no-repeat,
        url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 600' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='%231a0f06' opacity='0.78'%3E%3Crect x='1340' y='320' width='34' height='100'/%3E%3Crect x='1390' y='280' width='44' height='140'/%3E%3Cpolygon points='1412,210 1396,260 1428,260'/%3E%3Crect x='1450' y='340' width='28' height='80'/%3E%3Crect x='1490' y='300' width='30' height='120'/%3E%3C/g%3E%3C/svg%3E") bottom center / 100% auto no-repeat,
        url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 500' preserveAspectRatio='xMidYMax slice'%3E%3Cpolygon points='0,500 0,340 240,200 420,280 600,160 780,240 940,140 1140,220 1320,150 1500,240 1700,180 1900,250 1920,230 1920,500' fill='%23291a0e' opacity='0.68'/%3E%3C/svg%3E") bottom center / 100% auto no-repeat,
        radial-gradient(ellipse 220px 130px at 78% 38%, rgba(220, 180, 100, 0.18), rgba(196, 160, 80, 0.06) 35%, transparent 70%),
        radial-gradient(circle 1.5px at 18% 12%, rgba(232, 212, 164, 0.65), transparent 2px),
        radial-gradient(circle 2px at 47% 8%, rgba(232, 212, 164, 0.78), transparent 2.5px),
        radial-gradient(circle 1.5px at 78% 14%, rgba(232, 212, 164, 0.6), transparent 2px),
        radial-gradient(ellipse 100% 70% at 50% 100%, rgba(120, 60, 20, 0.22), transparent 65%),
        radial-gradient(ellipse 90% 60% at 50% 0%, rgba(80, 50, 25, 0.16), transparent 60%),
        linear-gradient(180deg, #1a0f06 0%, #0e0805 50%, #050304 100%);
}

/* Título de página: a MESMA voz tipográfica da arena. */
body.rb-home-page .rb-product-hero h1 {
    font-family: var(--rb-font-display);
    background: linear-gradient(180deg, #ffe9b8 0%, #e9b651 55%, #9a6a23 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: none;
}

body.rb-home-page .rb-product-kicker {
    color: rgba(244, 173, 38, 0.78);
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

/* Painel padrão do mundo: moldura dourada sobre madeira escura — a mesma
   receita da mesa, do sheet de mulligan e dos retratos. */
body.rb-home-page .rb-product-panel,
body.rb-home-page .rb-product-card,
body.rb-home-page .rb-collection-shelf,
body.rb-home-page .rb-catalog-drawer,
body.rb-home-page .rb-balance-lab,
body.rb-home-page .rb-feedback-form,
body.rb-home-page .rb-track {
    border: 1px solid rgba(226, 180, 88, 0.34);
    border-radius: 14px;
    background:
        radial-gradient(ellipse 120% 90% at 50% -30%, rgba(244, 173, 38, 0.07), transparent 55%),
        linear-gradient(180deg, rgba(24, 17, 11, 0.94), rgba(8, 6, 5, 0.96));
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 244, 203, 0.07),
        0 18px 44px rgba(0, 0, 0, 0.5);
}

body.rb-home-page .rb-cta,
body.rb-home-page .rb-button-primary {
    border: 2px solid rgba(255, 213, 122, 0.72);
    border-radius: 10px;
    background:
        radial-gradient(ellipse 130% 170% at 50% -40%, rgba(255, 205, 96, 0.32), transparent 56%),
        linear-gradient(180deg, #8a5a18 0%, #59370e 58%, #241405 100%);
    color: #ffe9b8;
    font-family: var(--rb-font-display);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.7);
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), 0 12px 26px rgba(0, 0, 0, 0.5);
}

body.rb-home-page .rb-secondary,
body.rb-home-page .rb-button-secondary {
    border: 1px solid rgba(226, 180, 88, 0.46);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(26, 19, 12, 0.92), rgba(8, 6, 5, 0.94));
    color: #ecd9ab;
}

/* ---------- Campanha: lista de texto vira trilha de encontros ---------- */
body.rb-campaign-page .rb-campaign-path {
    display: grid;
    gap: 14px;
}

body.rb-campaign-page .rb-campaign-node {
    position: relative;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    border: 1px solid rgba(226, 180, 88, 0.32);
    border-left: 4px solid var(--node-accent, #f4ad26);
    border-radius: 14px;
    background:
        radial-gradient(ellipse 60% 130% at 0% 50%, color-mix(in srgb, var(--node-accent, #f4ad26) 14%, transparent), transparent 60%),
        linear-gradient(180deg, rgba(24, 17, 11, 0.94), rgba(8, 6, 5, 0.96));
    box-shadow: inset 0 1px 0 rgba(255, 244, 203, 0.06), 0 14px 34px rgba(0, 0, 0, 0.46);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

body.rb-campaign-page .rb-campaign-node:hover:not(.is-locked) {
    transform: translateY(-3px);
    box-shadow: inset 0 1px 0 rgba(255, 244, 203, 0.08), 0 22px 44px rgba(0, 0, 0, 0.55), 0 0 22px color-mix(in srgb, var(--node-accent, #f4ad26) 30%, transparent);
}

body.rb-campaign-page .rb-campaign-silhouette {
    position: relative;
    width: 88px;
    height: 88px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--node-accent, #f4ad26) 65%, transparent);
    background:
        radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--node-accent, #f4ad26) 28%, transparent), transparent 62%),
        linear-gradient(180deg, rgba(30, 21, 12, 0.96), rgba(6, 5, 4, 0.98));
    box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.7), 0 8px 20px rgba(0, 0, 0, 0.5);
}

body.rb-campaign-page .rb-campaign-glyph {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    transform: rotate(45deg);
    border: 2px solid color-mix(in srgb, var(--node-accent, #f4ad26) 75%, white 6%);
    background: linear-gradient(135deg, color-mix(in srgb, var(--node-accent, #f4ad26) 60%, black 25%), rgba(10, 7, 5, 0.95));
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.6);
}

body.rb-campaign-page .rb-campaign-seal,
body.rb-campaign-page .rb-campaign-lock {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 900;
    border: 2px solid rgba(226, 180, 88, 0.7);
    background: linear-gradient(180deg, #2a1d10, #0a0705);
    color: #ffe9b8;
}

body.rb-campaign-page .rb-campaign-step {
    position: absolute;
    left: 14px;
    top: 10px;
    color: color-mix(in srgb, var(--node-accent, #f4ad26) 80%, white 10%);
    font-family: var(--rb-font-display);
    font-size: 15px;
    font-weight: 900;
    opacity: 0.85;
}

body.rb-campaign-page .rb-campaign-copy h2 {
    margin: 2px 0 4px;
    font-family: var(--rb-font-display);
    font-size: clamp(20px, 2.2vw, 28px);
    color: #f5ead6;
}

body.rb-campaign-page .rb-campaign-status {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--node-accent, #f4ad26) 78%, white 8%);
}

body.rb-campaign-page .rb-campaign-node.is-locked {
    filter: saturate(0.35) brightness(0.72);
}

body.rb-campaign-page .rb-campaign-node.is-next {
    animation: rb-next-node 1.8s ease-in-out infinite;
}

@keyframes rb-next-node {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 244, 203, 0.06), 0 14px 34px rgba(0, 0, 0, 0.46); }
    50% { box-shadow: inset 0 1px 0 rgba(255, 244, 203, 0.06), 0 14px 34px rgba(0, 0, 0, 0.46), 0 0 26px color-mix(in srgb, var(--node-accent, #f4ad26) 38%, transparent); }
}

@media (max-width: 760px) {
    body.rb-campaign-page .rb-campaign-node {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 12px;
        padding: 14px;
    }

    body.rb-campaign-page .rb-campaign-silhouette {
        width: 60px;
        height: 60px;
    }

    body.rb-campaign-page .rb-campaign-action {
        grid-column: 1 / -1;
    }
}

/* ---------- Clareza: quem pode agir AGORA brilha ---------- */
#player-battlefield .rb-field-card.can-act {
    box-shadow: 0 0 0 2px rgba(124, 229, 138, 0.55), 0 0 20px rgba(124, 229, 138, 0.28);
    animation: rb-can-act 1.6s ease-in-out infinite;
}

@keyframes rb-can-act {
    0%, 100% { box-shadow: 0 0 0 2px rgba(124, 229, 138, 0.45), 0 0 16px rgba(124, 229, 138, 0.2); }
    50% { box-shadow: 0 0 0 3px rgba(124, 229, 138, 0.75), 0 0 26px rgba(124, 229, 138, 0.4); }
}

/* Cartas jogáveis na mão: borda viva de mana; o que não dá pra pagar fica
   visivelmente apagado (is-locked já reduz). */
.rb-hand .rb-mini-card:not(.is-locked) {
    box-shadow: 0 0 0 1px rgba(126, 200, 255, 0.35), 0 10px 24px rgba(0, 0, 0, 0.5);
}

.rb-hand .rb-mini-card.is-locked {
    filter: saturate(0.4) brightness(0.66);
}

/* ==========================================================================
   PLAYER FIRST (v102) — faixas exclusivas, células honestas, FX contido
   Origem: auditoria olhos-de-jogador 2026-06-11 (docs/REBIRTH_PLAYER_EYES_AUDIT.md)
   ========================================================================== */

/* ---------- Desktop: a célula tem o tamanho da carta ---------- */
/* As cartas de campo (208px) transbordavam células de 153px e a fileira do
   bot encostava na do jogador. Célula = carta + respiro + divisor central. */
@media (min-width: 1180px) {
    body.rb-game-page .rb-battle-zone {
        grid-template-rows: minmax(216px, auto) 34px minmax(216px, auto) !important;
        row-gap: 10px !important;
    }

    /* O VS é ocultado por outra regra (display:none). Sem ele, o auto-placement
       do grid jogava a fileira do jogador para a faixa do meio (34px) em vez da
       3ª linha — as cartas se sobrepunham ~74px. Fixar as linhas mantém o bot
       no topo e o jogador embaixo, com o meio como respiro/fronteira. */
    body.rb-game-page .rb-field-row-bot {
        grid-row: 1 !important;
    }

    body.rb-game-page .rb-field-row-player {
        grid-row: 3 !important;
    }

    body.rb-game-page .rb-field-card,
    body.rb-game-page .rb-field-slot-empty {
        height: 208px !important;
        min-height: 208px !important;
    }

    /* O meio da mesa é uma fronteira de verdade: traço rúnico dourado. */
    body.rb-game-page .rb-field-vs {
        position: relative;
        display: grid;
        place-items: center;
        font-family: var(--rb-font-display);
        color: rgba(244, 173, 38, 0.75);
        letter-spacing: 0.3em;
    }

    body.rb-game-page .rb-field-vs::before,
    body.rb-game-page .rb-field-vs::after {
        content: "";
        position: absolute;
        top: 50%;
        height: 2px;
        width: calc(50% - 42px);
        background: linear-gradient(90deg, transparent, rgba(226, 180, 88, 0.55), rgba(226, 180, 88, 0.18));
    }

    body.rb-game-page .rb-field-vs::before { left: 0; }
    body.rb-game-page .rb-field-vs::after {
        right: 0;
        transform: scaleX(-1);
    }
}

/* ---------- Cinemática de evolução/fusão: poder com modos ---------- */
/* A runa explodia a 448px+ e, com qualquer falha, congelava cobrindo o
   board. Tamanho contido; o cleanup garantido vive no JS (try/finally). */
.vfx-evolution-stage .vfx-evolution-rune {
    width: 220px;
    height: 220px;
    margin: -110px 0 0 -110px;
}

.vfx-evolution-stage .vfx-evolution-burst,
.vfx-fusion-burst {
    width: 320px;
    height: 320px;
}

.vfx-evolution-stage.is-active .vfx-evolution-overlay {
    opacity: 0.62;
}

/* ---------- Mobile: cada coisa na sua faixa ---------- */
@media (max-width: 1179px) {
    /* Nav de jogo em UMA linha: selo + abas roláveis + entrar. O duelo é o
       protagonista — identidade/XP/carteira ficam para as telas de produto. */
    body.rb-game-page.rb-mobile-native {
        --rb-mobile-nav-height: 78px;
    }

    body.rb-game-page.rb-mobile-native .rb-global-nav {
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 6px;
        padding: 5px 8px;
        min-height: 0;
    }

    body.rb-game-page.rb-mobile-native .rb-global-brand strong {
        display: none;
    }

    body.rb-game-page.rb-mobile-native .rb-global-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        gap: 4px;
        min-height: 0;
    }

    body.rb-game-page.rb-mobile-native .rb-global-tabs a {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 7px 9px;
        font-size: var(--fs-3xs);
    }

    /* Identidade + carteira seguem visíveis (contrato de produto); só a
       barra de XP sai do duelo. Linha 2 fininha. */
    body.rb-game-page.rb-mobile-native .rb-global-xp {
        display: none;
    }

    body.rb-game-page.rb-mobile-native .rb-global-player {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 0;
        padding: 2px 2px 0;
    }

    body.rb-game-page.rb-mobile-native .rb-global-identity,
    body.rb-game-page.rb-mobile-native .rb-global-wallet {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: var(--fs-3xs);
        min-height: 0;
    }

    /* A barra de ação NÃO flutua mais sobre o campo: sticky fazia a mão
       cobrir os 3 slots de invocação (toque morto — bug nº2 da auditoria). */
    .rb-mobile-native .rb-mobile-action-bar {
        position: static;
        z-index: auto;
    }

    /* O conselheiro fala ACIMA da carta, nunca em cima dela. */
    .rb-mobile-native .rb-recommendation-badge {
        top: -16px;
        bottom: auto;
    }

    /* Mão com transbordo visível: a borda direita esmaece convidando o
       scroll (sem novos elementos, sem JS). */
    .rb-mobile-native .rb-player-hand {
        position: relative;
    }

    .rb-mobile-native .rb-player-hand::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 26px;
        pointer-events: none;
        background: linear-gradient(90deg, transparent, rgba(3, 4, 5, 0.85));
    }
}

/* ---------- Nomes legíveis nas cartas de campo ---------- */
.rb-field-card .rb-card-nameplate {
    /* audit 30/06: era nowrap+ellipsis — nome de carta no campo cortado. */
    font-size: var(--fs-2xs);
    letter-spacing: 0.01em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
}

/* ---------- Cerimônia de fim de partida (v102) ---------- */
/* O overlay segue pointer-events: none (contrato); o painel de decisão é a
   exceção clicável, como os botões do result panel. */
.vfx-finale-overlay .vfx-finale-panel {
    pointer-events: auto;
    position: relative;
    z-index: 3;
    margin-top: 18px;
    min-width: min(420px, 86vw);
    padding: 18px 22px 20px;
    border: 1px solid rgba(226, 180, 88, 0.4);
    border-radius: 14px;
    background:
        radial-gradient(ellipse 120% 90% at 50% -30%, rgba(244, 173, 38, 0.08), transparent 55%),
        linear-gradient(180deg, rgba(24, 17, 11, 0.96), rgba(8, 6, 5, 0.97));
    box-shadow: inset 0 1px 0 rgba(255, 244, 203, 0.07), 0 24px 60px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 420ms ease 260ms, transform 420ms ease 260ms;
}

.vfx-finale-overlay.is-active .vfx-finale-panel {
    opacity: 1;
    transform: translateY(0);
}

.vfx-finale-overlay .vfx-finale-summary {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin-bottom: 16px;
}

.vfx-finale-overlay .vfx-finale-summary span {
    display: grid;
    gap: 4px;
    justify-items: center;
    /* v117: rótulos do resumo de vitória mais legíveis (eram --rb-muted+--fs-3xs,
       quase ilegíveis no momento de maior celebração). */
    color: rgba(236, 222, 190, 0.82);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.vfx-finale-overlay .vfx-finale-summary strong {
    color: #f5ead6;
    font-family: var(--rb-font-display);
    font-size: var(--fs-lg);
    letter-spacing: 0.02em;
}

.vfx-finale-overlay .vfx-finale-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.vfx-finale-overlay .vfx-finale-actions button {
    min-height: 46px;
    padding: 10px 20px;
    cursor: pointer;
}

/* O texto-impacto assenta; o painel fica como dono da cena. */
.vfx-finale-overlay.is-settled .vfx-finale-text,
.vfx-finale-overlay.is-settled .vfx-finale-subtitle {
    /* v117: mantém o título "Vitória/Derrota" mais presente ao assentar
       (antes 0.25 — quase sumia; o painel continua dono da cena). */
    opacity: 0.4;
}

.vfx-finale-overlay.is-settled .vfx-finale-curtain {
    opacity: 0.55;
}

@media (max-width: 1179px) {
    .vfx-finale-overlay .vfx-finale-summary {
        gap: 14px;
    }

    .vfx-finale-overlay .vfx-finale-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ---------- Booster: cartas viram uma a uma (v102) ---------- */
.rb-booster-card.rb-booster-reveal {
    animation: rb-booster-flip 560ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
    animation-delay: var(--reveal-delay, 0ms);
}

@keyframes rb-booster-flip {
    0% { opacity: 0; transform: perspective(900px) rotateY(88deg) scale(0.92); }
    62% { opacity: 1; transform: perspective(900px) rotateY(-8deg) scale(1.02); }
    100% { opacity: 1; transform: perspective(900px) rotateY(0deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .rb-booster-card.rb-booster-reveal {
        animation: none;
    }
}

/* Durante a cena do bot, a cena É o feedback — o chip "Carregando" em cima
   dela lia-se como travamento (auditoria v2). */
.rb-game-board.is-pending.is-bot-staging .rb-loading {
    display: none;
}

/* "Nova partida" no ticker só depois do fim: durante o duelo ele ficava
   sobre a zona de alvos interceptando o clique de ataque (flagrante do
   juiz v2) e era um misclick fatal a um dedo de distância. */
#rebirth-board[data-winner=""] #result-panel [data-new-match] {
    display: none;
}

/* ==========================================================================
   YGO POLISH (v104) — cemitério público, zona de trap SET, LP counter
   ========================================================================== */

/* Contadores de descarte são portas do cemitério. */
#player-discard-count,
#bot-discard-count {
    cursor: pointer;
    text-decoration: underline dotted rgba(226, 180, 88, 0.55);
    text-underline-offset: 3px;
}

#player-discard-count:hover,
#bot-discard-count:hover {
    color: var(--rb-gold-2);
}

.rb-graveyard-overlay {
    position: fixed;
    inset: 0;
    z-index: 96;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(4, 3, 5, 0.88);
}

.rb-graveyard-overlay[hidden] {
    display: none;
}

.rb-graveyard-sheet {
    width: min(640px, 94vw);
    max-height: 84vh;
    overflow-y: auto;
    padding: 22px 24px;
    border: 1px solid rgba(226, 180, 88, 0.4);
    border-radius: 14px;
    background:
        radial-gradient(ellipse 120% 90% at 50% -30%, rgba(244, 173, 38, 0.07), transparent 55%),
        linear-gradient(180deg, rgba(24, 17, 11, 0.97), rgba(8, 6, 5, 0.98));
    box-shadow: inset 0 1px 0 rgba(255, 244, 203, 0.07), 0 24px 60px rgba(0, 0, 0, 0.6);
}

.rb-graveyard-sheet h2 {
    margin: 4px 0 14px;
    font-family: var(--rb-font-display);
    color: #f5ead6;
}

.rb-graveyard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.rb-grave-card {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid rgba(226, 180, 88, 0.28);
    border-left: 3px solid rgba(226, 180, 88, 0.55);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(26, 19, 12, 0.9), rgba(8, 6, 5, 0.94));
}

.rb-grave-card strong {
    color: #f0e3c4;
    font-size: var(--fs-xs);
    line-height: 1.2;
}

.rb-grave-card small {
    color: var(--rb-muted);
    font-size: var(--fs-3xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.rb-grave-stats {
    color: rgba(232, 212, 164, 0.85);
    font-size: var(--fs-3xs);
}

.rb-grave-empty {
    grid-column: 1 / -1;
    color: var(--rb-muted);
    text-align: center;
    padding: 22px 8px;
}

/* Zona de Magia & Trap: SET seus com nome; do oponente, carta virada. */
.rb-trap-zone {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
    min-height: 0;
}

.rb-trap-zone[hidden] {
    display: none;
}

.rb-trap-chip {
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    max-width: 132px;
    padding: 3px 8px;
    border-radius: 5px;
    font-style: normal;
    font-size: var(--fs-3xs);
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rb-trap-chip.is-mine {
    border: 1px solid rgba(168, 130, 220, 0.6);
    color: #d9c2f5;
    background: linear-gradient(180deg, rgba(58, 38, 86, 0.85), rgba(22, 14, 34, 0.92));
}

.rb-trap-chip.is-set {
    width: 30px;
    height: 40px;
    border: 1px solid rgba(168, 130, 220, 0.75);
    color: rgba(217, 194, 245, 0.9);
    font-size: var(--fs-sm);
    background:
        repeating-linear-gradient(135deg, rgba(120, 86, 180, 0.35) 0 4px, rgba(40, 26, 62, 0.6) 4px 8px),
        linear-gradient(180deg, rgba(52, 34, 78, 0.95), rgba(18, 11, 28, 0.98));
    animation: rb-set-card-pulse 2.2s ease-in-out infinite;
}

@keyframes rb-set-card-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(168, 130, 220, 0); }
    50% { box-shadow: 0 0 12px 1px rgba(168, 130, 220, 0.4); }
}

@media (max-width: 1179px) {
    .rb-graveyard-cards {
        grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
    }
}

.rb-graveyard-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.rb-graveyard-tabs button {
    padding: 8px 14px;
    cursor: pointer;
}

.rb-graveyard-tabs .is-active-tab {
    border-color: var(--rb-gold);
    color: var(--rb-gold-2);
}

/* YGO v104: baralho/descarte/mana são informação de TCG — o layout FATES os
   escondia no desktop. De volta, compactos, sob cada retrato (o descarte é a
   porta do cemitério). */
@media (min-width: 1180px) {
    /* Contadores informativos de volta (o FATES os escondia); o clique do
       cemitério vive no botão dedicado do painel de ações — sem guerra de
       z-index com o grid 1fr/1fr do HUD. */
    body.rb-game-page .rb-zone-row {
        display: flex !important;
        gap: 6px;
        justify-content: center;
        position: absolute !important;
        top: -28px;
        left: 50%;
        transform: translateX(-50%);
        /* v105: dimensiona pelo conteúdo e fica acima da moldura (overflow do
           retrato) — antes os rótulos clipavam em ~113px e viravam "MAN BAR DES". */
        width: max-content;
        max-width: min(94vw, 360px);
        white-space: nowrap;
        overflow: visible;
        z-index: 9;
        pointer-events: none;
    }

    body.rb-game-page .rb-zone-row span {
        display: inline-flex !important;
        gap: 4px;
        align-items: center;
        color: rgba(232, 212, 164, 0.78);
        font-size: var(--fs-3xs);
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    body.rb-game-page .rb-trap-zone {
        justify-content: center;
    }

}

/* O selo "A" sobre o retrato é decorativo durante o duelo — como link ele
   roubava cliques dos contadores e mandava o jogador pra home no meio da
   partida. A nav inteira continua aí para navegar. */
body.rb-game-page .rb-game-board .rb-mark,
body.rb-game-page .rb-game-board .rb-hero-portrait {
    pointer-events: none;
}

/* v106: a célula "actions" é a única dona dos comandos no desktop. Regras
   históricas ainda tentavam reposicionar os grupos sobre hero-r e deixavam
   o Cemitério absoluto abaixo da viewport em telas altas. */
@media (min-width: 1180px) and (min-height: 680px) {
    body.rb-game-page .rb-hud-player,
    body.rb-game-page .rb-hud-bot {
        height: clamp(340px, 56vh, 520px) !important;
    }

    body.rb-game-page .rb-actions-row {
        grid-area: actions !important;
        display: flex !important;
        flex-direction: column;
        align-self: end;
        justify-self: stretch;
        justify-content: flex-end;
        gap: 8px !important;
        width: auto !important;
        min-width: 0;
        pointer-events: auto;
    }

    body.rb-game-page .rb-actions-row > div,
    body.rb-game-page .rb-actions-row > div:nth-child(1),
    body.rb-game-page .rb-actions-row > div:nth-child(2) {
        grid-area: auto !important;
        position: relative !important;
        inset: auto !important;
        display: flex !important;
        flex-direction: column;
        align-self: auto !important;
        justify-self: auto !important;
        gap: 8px;
        width: 100% !important;
        min-width: 0;
        margin: 0 !important;
        transform: none !important;
    }

    body.rb-game-page #play-button.rb-button-primary,
    body.rb-game-page #next-turn-button.rb-button-secondary,
    body.rb-game-page #graveyard-button.rb-button-secondary {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body.rb-game-page #graveyard-button {
        position: static !important;
        inset: auto !important;
        transform: none !important;
    }
}

/* v116 — Avatares de PERFIL (círculo) + arena dominante + comandos organizados.
   Bloco consolidado que vence as camadas históricas (12476 / 13373 / 15741)
   por especificidade (body.rb-game-page) + !important, sem reescrever cada uma.
   1) Os retratos-carta viram AVATAR circular pequeno (estilo foto de perfil),
      com nameplate compacto (nome · HP · mana · baralho/descarte). O círculo é
      clicável — base pra trocar a foto (padrões/importação) no futuro.
   2) Colunas-herói minúsculas → o tabuleiro central (1fr) domina a tela.
   3) Botões menores e agrupados: Invocar e Encerrar em largura cheia;
      Cemitério | Mecânicas como par utilitário lado a lado. */
@media (min-width: 1180px) and (min-height: 680px) {
    body.rb-game-page .rb-game-board {
        grid-template-columns: clamp(132px, 11vw, 168px) minmax(0, 1fr) clamp(132px, 11vw, 168px) !important;
        gap: 12px 18px !important;
    }

    /* ---- AVATAR estilo perfil + nameplate compacto ---- */
    body.rb-game-page .rb-hud-player,
    body.rb-game-page .rb-hud-bot {
        position: relative !important;
        width: min(100%, 150px) !important;
        height: auto !important;
        max-height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 5px !important;
        justify-self: center !important;
        padding: 8px 0 !important;
    }
    /* v118: heróis centralizados na vertical -> espelho esquerda/direita.
       Antes player=end / bot=start deixava o bot colado no topo (308px acima do
       centro) e o player quase no meio (37px abaixo) — assimétrico. */
    body.rb-game-page .rb-hud-player { align-self: center !important; }
    body.rb-game-page .rb-hud-bot { align-self: center !important; }

    body.rb-game-page .rb-hero-portrait {
        position: relative !important;
        width: 74px !important;
        height: 74px !important;
        min-width: 0 !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        cursor: pointer;
        background: #0b0a09 !important;
        box-shadow:
            0 0 0 3px rgba(196, 160, 80, 0.92),
            0 0 0 5px rgba(0, 0, 0, 0.7),
            0 8px 18px rgba(0, 0, 0, 0.6) !important;
        transition: transform 140ms ease, box-shadow 140ms ease;
    }
    body.rb-game-page .rb-hud-player .rb-hero-portrait:hover {
        transform: scale(1.06);
        box-shadow:
            0 0 0 3px rgba(255, 216, 130, 1),
            0 0 0 5px rgba(0, 0, 0, 0.7),
            0 10px 22px rgba(0, 0, 0, 0.66) !important;
    }
    body.rb-game-page .rb-hero-art {
        position: absolute !important;
        inset: 0 !important;
        margin: 0 !important;
        border-radius: 50% !important;
        background-size: cover !important;
        box-shadow: none !important;
    }
    body.rb-game-page .rb-hero-frame {
        position: absolute !important;
        inset: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: none !important;
        box-shadow: inset 0 0 0 1px rgba(255, 244, 203, 0.25) !important;
    }

    /* nível: medalhão pequeno no canto do círculo */
    body.rb-game-page .rb-hero-level,
    body.rb-game-page .rb-hud-bot .rb-hero-level {
        position: absolute !important;
        top: 50px !important;
        left: calc(50% + 16px) !important;
        right: auto !important;
        bottom: auto !important;
        width: 22px !important;
        height: 22px !important;
        border-radius: 50% !important;
        border-width: 1px !important;
        font-size: 12px !important;
        z-index: 3;
    }

    /* HUD copy = fluxo vertical compacto */
    body.rb-game-page .rb-hud-copy {
        position: static !important;
        inset: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 3px !important;
        width: 100% !important;
        padding: 0 !important;
    }
    body.rb-game-page .rb-hud-copy > span:first-child {
        position: static !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: auto !important;
        max-width: 100% !important;
        min-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
        font-size: 12px !important;
        letter-spacing: 0.3px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.rb-game-page .rb-hud-health {
        position: static !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 40px !important;
        height: 40px !important;
    }
    body.rb-game-page .rb-life-orb {
        width: 40px !important;
        height: 40px !important;
    }
    body.rb-game-page .rb-life-orb b { inset: 5px !important; }
    body.rb-game-page .rb-hud-health strong { font-size: 17px !important; }

    body.rb-game-page .rb-zone-row {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 1px 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        font-size: 10px !important;
        line-height: 1.2;
        opacity: 0.9;
        pointer-events: none;
    }
    body.rb-game-page .rb-zone-row span { white-space: nowrap; }
    body.rb-game-page #hand-count,
    body.rb-game-page .rb-hand-count { display: none !important; }
    body.rb-game-page .rb-mana-coins { display: none !important; }
    body.rb-game-page .rb-trap-zone {
        position: static !important;
        justify-content: center;
        min-height: 0 !important;
    }

    /* selos de facção: ocultos no avatar de perfil */
    body.rb-game-page .rb-game-board .rb-mark,
    body.rb-game-page .rb-game-board .rb-faction-emblem,
    body.rb-game-page .rb-game-board .rb-bot-emblem {
        display: none !important;
    }

    /* ARENA dominante: a zona de batalha preenche a coluna central liberada
       (antes travada em max-width 880, deixando vão até os heróis). As cartas
       de campo crescem até o limite vertical da fileira e os slots se espalham. */
    body.rb-game-page .rb-battle-zone {
        justify-self: center !important;
        width: 100% !important;
        max-width: clamp(900px, 64vw, 1200px) !important;
        height: min(100%, 580px) !important;
        gap: 24px !important;
        padding: 30px 26px 26px !important;
    }

    body.rb-game-page .rb-battle-zone {
        grid-template-rows: minmax(220px, 1fr) 28px minmax(220px, 1fr) !important;
        row-gap: 12px !important;
    }

    body.rb-game-page .rb-field-slots {
        grid-template-columns: repeat(3, minmax(168px, 1fr)) !important;
        gap: clamp(20px, 2.6vw, 46px) !important;
    }

    body.rb-game-page .rb-field-card,
    body.rb-game-page .rb-field-slots.has-active-cards .rb-field-card {
        width: clamp(158px, 9.2vw, 182px) !important;
        height: clamp(214px, 13vw, 244px) !important;
        min-width: clamp(158px, 9.2vw, 182px) !important;
        min-height: 0 !important;
    }

    body.rb-game-page .rb-field-slot-empty {
        max-width: clamp(168px, 9.6vw, 196px) !important;
        height: clamp(150px, 13vw, 244px) !important;
        min-height: 0 !important;
    }

    /* COMANDOS organizados no canto inferior-direito: menores e agrupados.
       Invocar (primário) e Encerrar turno em largura cheia; Cemitério e
       Mecânicas como par utilitário lado a lado. */
    body.rb-game-page .rb-actions-row { gap: 6px !important; }
    body.rb-game-page .rb-actions-row small,
    body.rb-game-page #primary-action-copy,
    body.rb-game-page #secondary-action-copy { display: none !important; }

    body.rb-game-page #play-button.rb-button-primary,
    body.rb-game-page #next-turn-button.rb-button-secondary,
    body.rb-game-page #graveyard-button.rb-button-secondary,
    body.rb-game-page #glossary-button.rb-button-secondary,
    body.rb-game-page .rb-actions-row .rb-secondary {
        height: clamp(28px, 3.4vh, 36px) !important;
        min-height: 0 !important;
        padding: 0 8px !important;
        font-size: 11px !important;
        border-radius: 8px !important;
    }

    body.rb-game-page .rb-actions-row > div:nth-child(2) {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    body.rb-game-page .rb-actions-row > div:nth-child(2) #next-turn-button {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
    body.rb-game-page .rb-actions-row > div:nth-child(2) #graveyard-button,
    body.rb-game-page .rb-actions-row > div:nth-child(2) #glossary-button {
        flex: 1 1 calc(50% - 3px) !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

/* v105: telas de POUCA ALTURA (laptops/MacBook com a barra do navegador).
   Este bloco precisa vir DEPOIS das âncoras desktop acima: além de compactar
   os botões, neutraliza os translateY e o cemitério absoluto que empurravam
   controles para fora da viewport mesmo com a nova célula "actions". */
@media (min-width: 1180px) and (min-height: 680px) and (max-height: 920px) {
    body.rb-game-page .rb-actions-row {
        flex-direction: row !important;
        flex-wrap: nowrap;
        align-items: flex-end;
        justify-content: stretch;
        gap: 8px !important;
    }

    body.rb-game-page .rb-actions-row > div,
    body.rb-game-page .rb-actions-row > div:nth-child(1),
    body.rb-game-page .rb-actions-row > div:nth-child(2) {
        flex: 1 1 0;
        min-width: 0;
        transform: none !important;
    }

    body.rb-game-page #play-button.rb-button-primary,
    body.rb-game-page #next-turn-button.rb-button-secondary,
    body.rb-game-page #graveyard-button.rb-button-secondary {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: clamp(36px, 4.6vh, 60px) !important;
    }

    body.rb-game-page #graveyard-button {
        position: static;
        left: auto;
        bottom: auto;
        transform: none;
    }
}

/* v116 — telas baixas: como os botões ficaram baixos, mantemos a COLUNA
   organizada (o modo-linha acima espremia Cemitério/Mecânicas a ~32px). */
@media (min-width: 1180px) and (min-height: 680px) and (max-height: 920px) {
    body.rb-game-page .rb-actions-row {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 6px !important;
    }
    body.rb-game-page .rb-actions-row > div,
    body.rb-game-page .rb-actions-row > div:nth-child(1),
    body.rb-game-page .rb-actions-row > div:nth-child(2) {
        flex: 0 0 auto !important;
        width: 100% !important;
        align-self: auto !important;
        justify-self: auto !important;
        transform: none !important;
    }
    body.rb-game-page .rb-actions-row > div:nth-child(2) {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    body.rb-game-page #play-button.rb-button-primary,
    body.rb-game-page #next-turn-button.rb-button-secondary,
    body.rb-game-page #graveyard-button.rb-button-secondary,
    body.rb-game-page #glossary-button.rb-button-secondary {
        height: clamp(28px, 3.6vh, 36px) !important;
    }
    body.rb-game-page .rb-actions-row > div:nth-child(2) #next-turn-button {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: none !important;
    }
    body.rb-game-page .rb-actions-row > div:nth-child(2) #graveyard-button,
    body.rb-game-page .rb-actions-row > div:nth-child(2) #glossary-button {
        flex: 1 1 calc(50% - 3px) !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

/* Fallback para janelas desktop extremamente baixas, abaixo do contrato do
   grid FATES (680px). Mantém os comandos longe dos retratos e da mão. */
@media (min-width: 1180px) and (max-height: 679px) {
    body.rb-game-page .rb-actions-row > div:nth-child(1) {
        left: calc(50% + 900px) !important;
        top: auto !important;
        right: auto !important;
        bottom: 108px !important;
    }

    body.rb-game-page .rb-actions-row > div:nth-child(2) {
        left: calc(50% + 1100px) !important;
        top: auto !important;
        right: auto !important;
        bottom: 108px !important;
        display: flex !important;
        flex-direction: column;
        gap: 8px;
        transform: none !important;
    }

    body.rb-game-page #graveyard-button {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
    }
}

/* No mobile o cemitério abre pelos contadores de descarte (visíveis lá);
   o botão dedicado é do desktop — na action bar compacta ele transbordava
   a célula e cobria controles. */
@media (max-width: 1179px) {
    #graveyard-button {
        display: none;
    }
}

/* #3 perf: a coleção lista ~100 cartas num scroll muito longo (~30.000px no
   mobile). content-visibility faz o navegador pular render/paint dos tiles fora
   da viewport — sem mexer no DOM/markup. contain-intrinsic-size reserva a altura
   estimada para o scroll ficar estável. */
.rb-collection-shelf .rb-product-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 280px;
}

/* #4: o banner "Confirme seu email" é útil nas telas de produto (há espaço),
   mas polui o cockpit apertado da arena. Esconde só na página de jogo. */
body.rb-game-page .rb-verify-banner {
    display: none;
}

/* Arena mobile: a navegação fixa é medida por RebirthBoardScaler e gravada
   no body. Estes limites mantêm HUD, primeira decisão e comandos fora do
   recorte do sistema, inclusive em aparelhos compactos e em landscape. */
@media (max-width: 1179px) {
    body.rb-game-page.rb-mobile-native {
        --rb-mobile-nav-height: 112px;
    }

    .rb-mobile-native .rb-game-viewport {
        min-height: 100dvh;
        padding-top: calc(var(--rb-mobile-nav-height) + var(--rb-safe-top));
        padding-bottom: max(8px, var(--rb-safe-bottom));
    }

    body.rb-mobile-native.rb-mulligan-open .rb-game-viewport,
    body.rb-mobile-native.rb-mulligan-open .rb-game-board {
        contain: none;
        transform: none;
        will-change: auto;
    }

    body.rb-mobile-native.rb-mulligan-open .rb-game-board {
        backface-visibility: visible;
        transform-style: flat;
    }

    .rb-mobile-native .rb-game-board {
        height: calc(100dvh - var(--rb-mobile-nav-height) - var(--rb-safe-top) - var(--rb-safe-bottom) - 8px) !important;
        min-height: 650px;
        max-height: none;
    }

    .rb-mobile-native .rb-mulligan-overlay {
        position: fixed;
        inset:
            calc(var(--rb-mobile-nav-height) + var(--rb-safe-top))
            max(6px, var(--rb-safe-right))
            max(8px, var(--rb-safe-bottom))
            max(6px, var(--rb-safe-left));
        width: auto;
        height: auto;
        padding: 8px;
        overflow-y: auto;
    }

    .rb-mobile-native .rb-mulligan-sheet {
        width: min(100%, 980px);
        max-width: 100%;
        max-height: 100%;
        overflow-y: auto;
    }

    .rb-mobile-native .rb-mulligan-actions {
        width: 100%;
        gap: 10px;
    }

    .rb-mobile-native .rb-mulligan-actions button {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        min-height: 52px;
        padding-inline: 8px;
        font-size: clamp(16px, 5vw, 21px);
    }
}

@media (max-width: 1179px) and (orientation: landscape) and (max-height: 520px) {
    .rb-mobile-native .rb-player-hand {
        z-index: 4;
    }

    .rb-mobile-native .rb-mulligan-sheet {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(144px, 180px);
        grid-template-areas:
            "kicker actions"
            "title actions"
            "copy actions"
            "cards actions";
        align-content: center;
        column-gap: 12px;
        row-gap: 3px;
        padding: 8px 10px;
        overflow: hidden;
    }

    .rb-mobile-native .rb-mulligan-kicker {
        grid-area: kicker;
    }

    .rb-mobile-native .rb-mulligan-sheet h2 {
        grid-area: title;
        margin: 0;
        font-size: clamp(22px, 4.5vw, 30px);
    }

    .rb-mobile-native .rb-mulligan-sheet > p {
        grid-area: copy;
        margin: 0;
        font-size: 13px;
        line-height: 1.2;
    }

    .rb-mobile-native .rb-mulligan-cards {
        grid-area: cards;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 8px;
        min-width: 0;
        margin: 4px 0 0;
        padding: 2px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .rb-mobile-native .rb-mulligan-cards::-webkit-scrollbar {
        display: none;
    }

    .rb-mobile-native .rb-mulligan-cards .rb-mini-card {
        flex: 0 0 92px;
        width: 92px;
        height: 92px;
        min-height: 92px;
    }

    .rb-mobile-native .rb-mulligan-actions {
        grid-area: actions;
        align-self: center;
        flex-direction: column;
        gap: 8px;
    }

    .rb-mobile-native .rb-mulligan-actions button {
        flex: 0 0 auto;
        width: 100%;
        min-height: 52px;
        font-size: 16px;
    }
}

/* ── Painel de resultado + log de combate (só desktop) ────────────────────
   O balão flutuante saía no meio do tabuleiro, sobre o retrato. Aqui ele some
   durante a partida e reaparece no fim (vitória/derrota) com os botões; a
   narração migra para um log discreto no canto inferior-esquerdo. Restrito a
   telas largas — o mobile tem o seu próprio layout. */
@media (min-width: 1024px) and (min-height: 640px) {
.rb-result-panel:not(.is-final) {
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Log de combate discreto (substitui o balão de feedback): ancorado no canto
   inferior-esquerdo, FORA do tabuleiro (position: fixed, robusto ao layout
   com scale), narrando as últimas trocas sem cobrir cartas nem o retrato. */
.rb-turn-log {
    position: fixed !important;
    left: 14px !important;
    bottom: 16px !important;
    top: auto !important;
    right: auto !important;
    width: 234px !important;
    height: auto !important;
    max-height: 172px !important;
    z-index: 45 !important;
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    padding: 8px 11px !important;
    border: 1px solid rgba(255, 220, 150, 0.20);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(18, 13, 8, 0.80), rgba(9, 6, 4, 0.88));
    opacity: 0.92;
    overflow: hidden;
    pointer-events: none;
}

.rb-turn-log .rb-log-head {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-xs);
    opacity: 0.62;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rb-turn-log #turn-log {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}

.rb-turn-log #turn-log li {
    font-size: var(--fs-xs);
    line-height: 1.32;
    color: #e7dcc4;
    text-transform: none;
}

.rb-turn-log #turn-log li:first-child {
    color: #f6ecd2;
    font-weight: 700;
}

/* "O que fazer agora": a dica de passo (sob Invocar) e o lembrete de encerrar
   turno voltam a aparecer no desktop. O layout minimalista as escondia, mas
   aqui há espaço e elas orientam o jogador. A dica principal fica dourada. */
.rb-actions-row > div small {
    display: block !important;
    max-width: 230px;
    margin-top: 5px;
    text-align: center;
    font-size: var(--fs-sm);
    line-height: 1.3;
    color: #d8cdb4;
}

#primary-action-copy {
    color: #f4d98c !important;
    font-weight: 600;
}
}  /* @media desktop */

/* Guia de mecânicas: lista de keywords no overlay (reusa .rb-graveyard-sheet).
   Acessível em desktop e mobile — o tooltip de hover não chega ao toque. */
.rb-glossary-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 58vh;
    overflow-y: auto;
    padding: 2px 2px 4px;
}

.rb-glossary-row {
    display: grid;
    grid-template-columns: 118px 1fr;
    align-items: center;
    gap: 12px;
    padding: 9px 11px;
    border-radius: 10px;
    background: rgba(18, 22, 32, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.rb-glossary-row .rb-keyword-badge {
    justify-self: start;
}

.rb-glossary-row p {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.34;
    color: #d8cdb4;
}

@media (max-width: 720px) {
    .rb-glossary-row {
        grid-template-columns: 1fr;
        gap: 5px;
    }
}

/* P1.3 — Seletor de foto de perfil (avatares-preset). Reaproveita
   .rb-graveyard-overlay/.rb-graveyard-sheet; só estiliza a grade de opções. */
.rb-avatar-hint {
    margin: 2px 0 14px;
    color: rgba(232, 212, 164, 0.72);
    font-size: 13px;
    text-align: center;
}
.rb-avatar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    gap: 14px;
    max-width: 460px;
    margin: 0 auto;
}
.rb-avatar-option {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    border-radius: 50%;
    line-height: 0;
}
.rb-avatar-option .rb-avatar-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-size: cover;
    background-position: center 26%;
    background-color: #0b0a09;
    box-shadow: 0 0 0 2px rgba(196, 160, 80, 0.5), 0 4px 12px rgba(0, 0, 0, 0.55);
    transition: transform 130ms ease, box-shadow 130ms ease;
}
.rb-avatar-option:hover .rb-avatar-thumb,
.rb-avatar-option:focus-visible .rb-avatar-thumb {
    transform: scale(1.07);
    box-shadow: 0 0 0 2px rgba(255, 216, 130, 0.9), 0 6px 16px rgba(0, 0, 0, 0.6);
}
.rb-avatar-option.is-active .rb-avatar-thumb {
    box-shadow: 0 0 0 3px rgba(255, 216, 130, 1), 0 0 18px rgba(196, 160, 80, 0.55), 0 6px 16px rgba(0, 0, 0, 0.6);
}

/* Reabilita o clique no retrato do JOGADOR para abrir o seletor de foto.
   O retrato tinha pointer-events:none (fix antigo do emblema-link que roubava
   cliques); o emblema agora é display:none, então liberar é seguro. */
body.rb-game-page .rb-game-board .rb-hero-portrait.rb-hero-player {
    pointer-events: auto !important;
    cursor: pointer;
}

/* P2.2 — Linha conectora da CAMPANHA: liga as silhuetas dos nós numa "jornada".
   A coluna da silhueta é fixa (centro ~68px), então a linha vai atrás das
   silhuetas (z entre o fundo do card e a silhueta) e some sob cada card. */
@media (min-width: 760px) {
    body.rb-campaign-page .rb-campaign-path {
        position: relative;
    }
    body.rb-campaign-page .rb-campaign-path::before {
        content: "";
        position: absolute;
        left: 68px;
        margin-left: -1px;
        top: 78px;
        bottom: 80px;
        width: 2px;
        background: linear-gradient(180deg, rgba(244, 173, 38, 0.5), rgba(244, 173, 38, 0.16));
        z-index: 5;
        pointer-events: none;
    }
    body.rb-campaign-page .rb-campaign-silhouette {
        z-index: 6;
    }
}

/* P2.3 — Leque de pacotes na LOJA: o herói do booster era um único verso com
   muito espaço morto ao redor. Dois pseudo-pacotes atrás (no pai, pois o pack
   tem overflow:hidden) formam um leque mais atrativo. */
.rb-shop-gacha .rb-booster-art {
    position: relative;
    justify-content: center;
    padding: 8px 34px 0;
}
.rb-shop-gacha .rb-booster-pack {
    z-index: 3;
}
.rb-shop-gacha .rb-booster-art::before,
.rb-shop-gacha .rb-booster-art::after {
    content: "";
    position: absolute;
    top: 18px;
    left: 50%;
    width: 118px;
    height: 168px;
    border: 1.5px solid rgba(244, 173, 38, 0.3);
    border-radius: var(--rb-cut-soft);
    background: linear-gradient(180deg, #19110a 0%, #06070a 100%);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}
.rb-shop-gacha .rb-booster-art::before {
    transform: translateX(-50%) rotate(-10deg);
    transform-origin: bottom center;
    z-index: 2;
    opacity: 0.72;
}
.rb-shop-gacha .rb-booster-art::after {
    transform: translateX(-50%) rotate(10deg);
    transform-origin: bottom center;
    z-index: 1;
    opacity: 0.55;
}

/* Fim de partida não pode PRENDER o jogador: com vencedor definido, a action bar
   (fixa no mobile) deixa de interceptar cliques, liberando o CTA de "Nova
   partida" e os botões do finale. (e2e: finale não pode bloquear new-match.) */
body.rb-game-page .rb-game-board[data-winner]:not([data-winner=""]) .rb-mobile-action-bar {
    pointer-events: none;
}

/* ===========================================================================
   v120 — REWORK VISUAL DA ARENA (bloco consolidado; último vence as camadas)
   Objetivos do dono: mão menor (estava ~= carta de campo), campo/slots maiores
   e simétricos, stats sempre visíveis no campo ("a força sumia"), usar o espaço
   vertical livre. Tudo escopado em body.rb-game-page + desktop.
   =========================================================================== */
@media (min-width: 1180px) and (min-height: 680px) {
    /* 1) Rebalanceia as linhas do board: turno + mão mais baixos → arena ganha
          altura pra cartas de campo maiores. */
    body.rb-game-page .rb-game-board {
        grid-template-rows: clamp(54px, 7vh, 72px) minmax(400px, 1fr) clamp(150px, 18vh, 196px) !important;
    }

    /* 2) MÃO menor (clavailable menor que a carta de campo). */
    body.rb-game-page .rb-hand .rb-mini-card {
        width: 130px !important;
        min-width: 130px !important;
        flex-basis: 130px !important;
        height: 182px !important;
    }

    /* 3) ARENA dominante + simétrica: zona ampla, duas fileiras idênticas. */
    body.rb-game-page .rb-battle-zone {
        max-width: clamp(900px, 60vw, 1160px) !important;
        height: min(100%, 620px) !important;
        /* min baixo p/ caber em laptops curtos (1fr cresce nas telas altas). */
        grid-template-rows: minmax(180px, 1fr) clamp(18px, 2.6vh, 30px) minmax(180px, 1fr) !important;
        row-gap: 12px !important;
    }
    body.rb-game-page .rb-field-slots {
        grid-template-columns: repeat(3, minmax(176px, 1fr)) !important;
        gap: clamp(18px, 2vw, 38px) !important;
    }

    /* 4) Cartas de campo MAIORES e slots = carta (simetria). Altura é HEIGHT-AWARE
          (min(vw, vh)) p/ não estourar na mão em telas curtas (ex.: 1366×768). */
    body.rb-game-page .rb-field-card,
    body.rb-game-page .rb-field-slots.has-active-cards .rb-field-card {
        width: clamp(170px, 10.2vw, 206px) !important;
        height: clamp(196px, min(14.4vw, 26vh), 288px) !important;
        min-width: clamp(170px, 10.2vw, 206px) !important;
        min-height: 0 !important;
    }
    body.rb-game-page .rb-field-slot-empty {
        max-width: clamp(182px, 10.8vw, 218px) !important;
        height: clamp(150px, min(14.4vw, 26vh), 288px) !important;
        min-height: 0 !important;
    }

    /* 5) STATS sempre visíveis e legíveis na carta de campo (a "força" sumia). */
    body.rb-game-page .rb-field-card .rb-card-statline {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    body.rb-game-page .rb-field-card .rb-card-stat {
        display: grid !important;
        visibility: visible !important;
    }
    body.rb-game-page .rb-field-card .rb-card-stat b {
        font-size: 16px !important;
    }
}

/* 2.2 — Guia de arquétipos no deck builder (estilos de deck em linguagem de jogador). */
.rb-deck-archetypes-btn { white-space: nowrap; }
.rb-archetype-hint {
    margin: 2px 0 14px;
    color: rgba(232, 212, 164, 0.75);
    font-size: 13px;
    text-align: center;
}
.rb-archetype-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    max-width: 780px;
    margin: 0 auto;
}
.rb-archetype-card {
    display: grid;
    gap: 4px;
    align-content: start;
    text-align: left;
    padding: 14px 16px;
    border: 1px solid var(--rb-line);
    border-radius: var(--rb-cut-soft);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.18));
    color: var(--rb-fates-ivory, #e8d4a4);
    cursor: pointer;
    transition: border-color 140ms ease, transform 140ms ease, background 140ms ease;
}
.rb-archetype-card:hover,
.rb-archetype-card:focus-visible {
    border-color: rgba(244, 173, 38, 0.7);
    transform: translateY(-2px);
    background: linear-gradient(180deg, rgba(244, 173, 38, 0.1), rgba(0, 0, 0, 0.2));
}
.rb-archetype-card strong { font-family: var(--rb-font-display); font-size: 16px; }
.rb-archetype-el {
    justify-self: start;
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: rgba(244, 173, 38, 0.95);
}
.rb-archetype-kws { color: rgba(232, 212, 164, 0.7); font-size: 12px; }
.rb-archetype-card p { margin: 4px 0 0; font-size: 13px; line-height: 1.4; opacity: 0.92; }
.rb-archetype-cta { margin-top: 6px; font-size: 12px; font-weight: 700; color: rgba(244, 173, 38, 0.95); }

/* P1 — Painel de replays/ghosts no ranking (surfacing da competição assíncrona). */
.rb-async-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    margin-top: 8px;
}
.rb-async-row {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid var(--rb-line);
    border-left: 3px solid var(--rb-muted);
    border-radius: var(--rb-cut-soft);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.18));
}
.rb-async-row.is-player { border-left-color: rgba(116, 198, 122, 0.9); }
.rb-async-row.is-bot { border-left-color: rgba(214, 90, 80, 0.9); }
.rb-async-meta { display: flex; align-items: center; gap: 8px; }
.rb-async-meta strong { font-family: var(--rb-font-display); }
.rb-async-verified { font-size: 11px; color: rgba(116, 198, 122, 0.95); font-weight: 700; }
.rb-async-unverified { font-size: 11px; color: rgba(232, 212, 164, 0.55); }
.rb-async-copy { justify-self: start; font-size: 12px; cursor: pointer; }

/* #3 — Controles de crafting (forja) no catálogo da coleção. */
.rb-craft-controls { display: flex; gap: 6px; margin-top: 6px; }
.rb-craft-btn { font-size: 11px; padding: 4px 8px; cursor: pointer; }
.rb-craft-btn[disabled] { opacity: 0.5; cursor: default; }

/* #2 — Faixa de temporada no ranking. */
.rb-season-tier { color: rgba(232, 212, 164, 0.85); font-size: 13px; margin-top: 6px; }
.rb-season-tier b { color: rgba(244, 173, 38, 0.95); }

/* #4 — Novidades / Patch Notes. */
.rb-patchnotes { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.rb-patch-entry {
    padding: 16px 18px;
    border: 1px solid rgba(232, 212, 164, 0.16);
    border-left: 3px solid rgba(244, 173, 38, 0.7);
    border-radius: var(--rb-cut-soft);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.18));
}
.rb-patch-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.rb-patch-head h2 { font-family: var(--rb-font-display); font-size: 18px; margin: 0; }
.rb-patch-version {
    font-family: var(--rb-font-display);
    font-size: 12px; font-weight: 700;
    color: rgba(12, 8, 5, 0.92);
    background: rgba(244, 173, 38, 0.95);
    padding: 2px 8px; border-radius: 999px;
}
.rb-patch-tag {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
    color: rgba(232, 212, 164, 0.85);
    border: 1px solid rgba(232, 212, 164, 0.28);
    padding: 2px 8px; border-radius: 999px;
}
.rb-patch-date { font-size: 12px; color: rgba(232, 212, 164, 0.55); margin-left: auto; }
.rb-patch-items { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.rb-patch-items li { color: rgba(232, 212, 164, 0.82); font-size: 14px; line-height: 1.4; }
@media (max-width: 640px) {
    .rb-patch-date { margin-left: 0; flex-basis: 100%; }
}

/* Polish AV — anel/clarão de invocação no altar (jogador e bot). Vive na camada
   de floats (#rebirth-float-layer); left/top são setados inline por
   spawnSummonRing() em coordenadas do tabuleiro. Some sozinho em ~660ms. */
.rb-summon-ring {
    position: absolute;
    width: 88px;
    height: 88px;
    margin: 0;
    transform: translate(-50%, -50%) scale(0.35);
    border-radius: 50%;
    border: 3px solid rgba(244, 173, 38, 0.95);
    box-shadow: 0 0 22px 6px rgba(244, 173, 38, 0.5), inset 0 0 14px rgba(244, 173, 38, 0.4);
    pointer-events: none;
    opacity: 0;
    z-index: 30;
    animation: rb-summon-ring 600ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes rb-summon-ring {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
    22% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); }
}
@media (prefers-reduced-motion: reduce) {
    .rb-summon-ring { display: none; }
}

/* Atalho drag-and-drop: durante o arraste de uma carta da mão, destaca os
   altares válidos pra deixar claro onde soltar. */
body.rb-card-dragging .rb-field-slot-empty.is-summon-target {
    outline: 2px dashed rgba(244, 173, 38, 0.85);
    outline-offset: -4px;
    background: rgba(244, 173, 38, 0.1);
}

/* Feedback ao GASTAR mana (par do is-mana-gaining): os pips gastos dão um
   flash curto pra o consumo de mana não passar despercebido. */
.rb-mana-coins.is-mana-spending .rb-mana-coin.is-spent {
    animation: rb-mana-spend 420ms ease both;
}
@keyframes rb-mana-spend {
    0% { transform: scale(1); filter: brightness(2) saturate(1.4); opacity: 1; }
    45% { transform: scale(0.8); filter: brightness(1.3); }
    100% { transform: scale(1); filter: none; }
}
@media (prefers-reduced-motion: reduce) {
    .rb-mana-coins.is-mana-spending .rb-mana-coin.is-spent { animation: none; }
}

/* PvP assíncrono: botão "Desafiar" nas linhas do ranking. */
.rb-pvp-challenge {
    justify-self: end;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    color: rgba(12, 8, 5, 0.92);
    background: rgba(244, 173, 38, 0.92);
    border: 1px solid rgba(244, 173, 38, 0.5);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.rb-pvp-challenge:hover { background: rgba(244, 173, 38, 1); }

/* P5 — lobby de espectador (página de PvP): lista de partidas ao vivo. */
.rb-live-watch-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rb-live-watch-list a {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    text-decoration: none;
}
.rb-live-watch-list a small { opacity: 0.75; font-weight: 400; }

/* Passo 3 — cliente de PvP ao vivo: overlay de fila, banner de turno, lock. */
.rb-live-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 6, 4, 0.86);
}
.rb-live-overlay[hidden] { display: none; }
.rb-live-card {
    text-align: center;
    max-width: 420px;
    padding: 28px 30px;
    border: 1px solid rgba(244, 173, 38, 0.4);
    border-radius: var(--rb-cut-soft);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.3));
}
.rb-live-card h2 { font-family: var(--rb-font-display); margin: 12px 0 6px; }
.rb-live-card p { color: rgba(232, 212, 164, 0.8); font-size: 14px; line-height: 1.5; }
.rb-live-spin {
    width: 36px;
    height: 36px;
    margin: 0 auto;
    border-radius: 50%;
    border: 3px solid rgba(244, 173, 38, 0.22);
    border-top-color: rgba(244, 173, 38, 0.95);
    animation: rb-live-spin 0.9s linear infinite;
}
@keyframes rb-live-spin { to { transform: rotate(360deg); } }
.rb-live-banner {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9998;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid rgba(244, 173, 38, 0.5);
    color: #fff4d2;
    pointer-events: none;
}
.rb-live-banner[data-turn="you"] { background: rgba(116, 198, 122, 0.24); border-color: rgba(116, 198, 122, 0.7); }
.rb-live-banner[data-turn="opp"] { background: rgba(214, 90, 80, 0.24); border-color: rgba(214, 90, 80, 0.7); }
.rb-live-banner[data-turn="done"] { background: rgba(244, 173, 38, 0.24); }
.rb-live-banner[data-turn="spec"] { background: rgba(110, 156, 214, 0.24); border-color: rgba(110, 156, 214, 0.7); }
.rb-live-banner[data-turn="response"] { background: rgba(128, 84, 196, 0.9); border-color: rgba(205, 172, 255, 0.9); }
.rb-live-banner[data-turn="waiting-response"] { background: rgba(74, 62, 98, 0.9); border-color: rgba(174, 144, 224, 0.75); }
.rb-game-board[data-live-lock="1"] .rb-player-hand,
.rb-game-board[data-live-lock="1"] .rb-battle-zone { opacity: 0.62; filter: saturate(0.85); }
.rb-priority-panel {
    position: fixed;
    left: 50%;
    bottom: max(20px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 9998;
    width: min(560px, calc(100vw - 24px));
    padding: 16px;
    border: 1px solid rgba(205, 172, 255, 0.72);
    border-radius: var(--rb-cut-soft);
    color: #fff4d2;
    background: linear-gradient(145deg, rgba(44, 30, 68, 0.98), rgba(14, 10, 22, 0.98));
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.52);
    text-align: center;
}
.rb-priority-panel strong { font-family: var(--rb-font-display); font-size: 18px; }
.rb-priority-panel p { margin: 6px 0 12px; color: rgba(239, 224, 255, 0.82); font-size: 14px; }
.rb-priority-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.rb-priority-actions button {
    min-height: 42px;
    padding: 9px 15px;
    border: 1px solid rgba(205, 172, 255, 0.58);
    border-radius: 8px;
    color: #fff4d2;
    background: rgba(128, 84, 196, 0.45);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.rb-priority-actions button:hover:not(:disabled) { background: rgba(151, 103, 221, 0.68); }
.rb-priority-actions button:disabled { cursor: wait; opacity: 0.55; }
.rb-priority-actions .rb-priority-pass { background: rgba(255, 255, 255, 0.08); }
@media (prefers-reduced-motion: reduce) { .rb-live-spin { animation: none; } }

/* ============================================================================
   v137 P0 — ARENA LEGÍVEL (auditoria visual & estrutural de 03/07/2026)
   Correções verificadas geometricamente por tools/qa/qa_arena_legibility_judge.py.
   Bloco único no FIM do arquivo de propósito: vence a cascata legada (ver
   docs/ROADMAP_VISUAL_ESTRUTURAL_20260703.md §5).
   ========================================================================== */

/* V1 — nav global: quando as abas não cabem, o corte vira affordance (fade
   nas bordas) e a aba ativa é trazida à vista (rebirth_global.js). */
.rb-global-nav { gap: 10px; }
.rb-global-tabs { gap: 4px; }
.rb-global-tabs a { padding-inline: 6px; }
.rb-global-tabs.has-overflow {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 26px), transparent 100%);
}

/* V2/V3 — nome da carta: nunca quebra no meio da palavra (hyphens pt-BR;
   overflow-wrap só como último recurso). */
body.rb-game-page .rb-field-card .rb-card-nameplate,
.rb-hand .rb-mini-card .rb-card-nameplate,
.rb-mulligan-cards .rb-mini-card .rb-card-nameplate {
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}

@media (min-width: 1180px) {
    /* V2 — o banner do título ancora ACIMA da statline e cresce sobre a arte:
       a 2ª linha do nome nunca mais é cortada ao meio. */
    body.rb-game-page .rb-field-card .rb-card-titlebar {
        top: auto !important;
        bottom: 46px;
        max-height: none;
        min-height: 22px;
    }

    body.rb-game-page .rb-field-card .rb-card-nameplate {
        font-size: 12px !important;
        line-height: 1.05;
    }

    /* V6 — HUD: pills de Mana/Baralho/Descarte voltam ao FLUXO, abaixo do orb
       de HP — nada mais desenha por cima do número de vida. O clique do
       descarte (cemitério) volta a funcionar no próprio pill. */
    body.rb-game-page .rb-zone-row {
        position: static !important;
        transform: none !important;
        flex-wrap: wrap;
        justify-content: center;
        width: auto;
        max-width: 100%;
        margin-top: 8px;
        pointer-events: auto;
    }
}

/* V6 — nomes de herói truncam com ellipsis (nunca clipe seco) + tooltip. */
#bot-hero-name,
#player-hero-name {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* V7 — com a mão cheia (7+ cartas) o histórico esmaece: a carta na sua mão
   vale mais que o painel decorativo embaixo dela. */
body.rb-game-page.rb-hand-crowded .rb-turn-log {
    opacity: 0.28 !important;
    transition: opacity 240ms ease;
}

@media (max-width: 1179px) {
    /* V3 — nome legível no mobile: banner de largura total (sai da sombra do
       círculo de custo) + fonte que deixa "STONEHIDE" caber inteiro. */
    body.rb-game-page .rb-field-card .rb-card-titlebar {
        top: 30px;
        bottom: auto;
        left: 5px;
        right: 5px;
        padding: 3px 5px 4px;
    }

    body.rb-game-page .rb-field-card .rb-card-nameplate {
        font-size: 10px !important;
        line-height: 1.12;
        letter-spacing: 0.02em;
    }

    /* V4 — no medalhão de 26px do mobile o rótulo ATK/GUARD não cabe (ficava
       "4AT|GUARI"): fica só o NÚMERO, como todo TCG mobile — a cor do medalhão
       (vermelho/azul) já diz o que é, e o aria-label da carta segue completo. */
    body.rb-game-page .rb-field-card .rb-card-stat small {
        display: none;
    }

    /* V5 — o dock da mão é uma camada sólida ACIMA do board. */
    .rb-mobile-native .rb-mobile-action-bar {
        position: relative;
        z-index: 30;
    }

    /* V5 — um guia por vez no mobile: fica o hint acionável da action bar;
       o texto do coach (duplicado) sai. A Análise Tática continua no painel. */
    .rb-mobile-native #coach-title,
    .rb-mobile-native #coach-copy {
        display: none !important;
    }
}

/* V8 — aguardando no PvP ao vivo dá pra ESPIAR a mesa sem perder o mulligan. */
.rb-mulligan-overlay.is-peeking {
    opacity: 0.06;
    pointer-events: none;
    transition: opacity 200ms ease;
}
.rb-mulligan-peek {
    margin-left: 8px;
}

/* ===================== v137 P3 — superfícies de produto ===================== */

/* Deck builder com arte (era 100% texto): faixa de arte no topo do card. */
.rb-deck-card .rb-deck-card-art {
    display: block;
    overflow: hidden;
    height: 64px;
    margin: -8px -10px 0;
    border-radius: 6px 6px 0 0;
    border-bottom: 1px solid rgba(196, 160, 80, 0.32);
}

.rb-deck-card .rb-deck-card-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    filter: saturate(0.94);
}

/* Ranking no mobile: as linhas estouravam a viewport (405px em 390) porque o
   grid fixo 60/1fr/100/88 não comprimia (min-width auto no nome). Colunas
   fluidas + células que encolhem = ellipsis funciona e nada sai da tela. */
.rb-ranking-head > *,
.rb-ranking-row > * {
    min-width: 0;
}

@media (max-width: 640px) {
    .rb-ranking-head,
    .rb-ranking-row {
        grid-template-columns: 30px minmax(0, 1fr) 52px 76px;
        gap: 8px;
        padding-inline: 6px;
    }

    .rb-ranking-rank { font-size: var(--fs-md); }
    .rb-ranking-elo { font-size: var(--fs-md); }

    .rb-pvp-challenge {
        justify-self: end;
        padding: 4px 8px;
        font-size: 10px;
    }
}

/* Página de PvP: as notas dos CTAs quebravam ao LADO do botão — agora são
   rodapé do próprio painel. Itens do lobby de espectador alinhados. */
.rb-pvp-mode .rb-pvp-note {
    display: block;
    margin-top: 8px;
}

.rb-live-watch-list a {
    align-items: baseline;
    justify-content: flex-start;
}

.rb-live-watch-list a small {
    white-space: nowrap;
}

/* Campanha: retrato do boss (arte da carta-assinatura) no círculo do mapa —
   os nós deixam de ser círculos vazios. Bloqueado fica em silhueta escura. */
.rb-campaign-silhouette.has-portrait {
    background-size: cover;
    background-position: center 24%;
}

.rb-campaign-silhouette.has-portrait .rb-campaign-glyph {
    opacity: 0.25;
}

.rb-campaign-node.is-locked .rb-campaign-silhouette.has-portrait {
    filter: grayscale(0.9) brightness(0.42);
}

/* ================= v137 P5 — cerimônia de abertura de booster ================= */
/* As 5 cartas viram uma a uma (flip em cascata); a incomum ganha um pulso de
   brilho no fim. Sem cerimônia para quem prefere menos movimento. */
@keyframes rb-booster-flip {
    0% { opacity: 0; transform: perspective(900px) rotateY(84deg) scale(0.86); filter: brightness(0.4); }
    58% { opacity: 1; transform: perspective(900px) rotateY(-8deg) scale(1.04); filter: brightness(1.18); }
    100% { opacity: 1; transform: perspective(900px) rotateY(0) scale(1); filter: none; }
}

@keyframes rb-booster-rare-pop {
    0%, 100% { box-shadow: 0 0 0 rgba(88, 214, 255, 0); }
    50% { box-shadow: 0 0 26px rgba(88, 214, 255, 0.55); }
}

.rb-booster-card {
    animation: rb-booster-flip 640ms cubic-bezier(0.22, 0.9, 0.3, 1.05) both;
    animation-delay: calc(var(--reveal-index, 0) * 320ms);
    backface-visibility: hidden;
}

.rb-booster-card.is-uncommon {
    animation:
        rb-booster-flip 640ms cubic-bezier(0.22, 0.9, 0.3, 1.05) both,
        rb-booster-rare-pop 900ms ease calc(var(--reveal-index, 0) * 320ms + 660ms) 1;
}

@media (prefers-reduced-motion: reduce) {
    .rb-booster-card { animation: none; }
    .rb-booster-card.is-uncommon { animation: none; }
}

/* ===================== v137 P4 — foco visível (a11y) ===================== */
/* Teclado no duelo e na nav: anel de foco dourado consistente, sem depender
   das 22 regras esparsas do legado. */
.rb-field-card:focus-visible,
.rb-mini-card:focus-visible,
.rb-field-slot-empty:focus-visible,
.rb-global-tabs a:focus-visible,
.rb-nav-auth:focus-visible,
#play-button:focus-visible,
#next-turn-button:focus-visible,
#graveyard-button:focus-visible,
#evolve-button:focus-visible {
    outline: 2px solid var(--rb-gold-2, #ffc852);
    outline-offset: 2px;
    z-index: 5;
}