/* F22-B audit (Duel of Champions): Cinzel display + Crimson Pro body via
   Google Fonts CDN. Auto-substitutes a serifa Times do fallback de Cinzel
   (que antes era usado sem webfont) por glyph correto. */
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Crimson+Pro:wght@400;500;600;700&display=swap");

:root {
    /* F22 audit (Duel of Champions): paleta dark-fantasy medieval substitui
       o cyberpunk-noir. Pretos puros viram marrons escuros; gold neon vira
       bronze envelhecido; cyan neon vira azul-aço de magia gelo. Mantém os
       mesmos NOMES de token (--rb-black, --rb-gold etc) para não cascatear
       1700+ trocas — só a entrega do hex muda. */
    --rb-black: #0c0805;
    --rb-ink: #16100a;
    --rb-panel: rgba(28, 20, 12, 0.96);
    --rb-panel-soft: rgba(46, 33, 22, 0.88);
    --rb-line: rgba(196, 160, 80, 0.30);
    --rb-line-hard: rgba(232, 212, 164, 0.48);
    --rb-gold: #c4a050;
    --rb-gold-2: #e0bf70;
    --rb-cyan: #6c95b8;
    --rb-text: #e8d4a4;
    --rb-muted: #9c8666;
    --rb-red: #c43030;
    --rb-green: #7aa758;
    --rb-board-width: 852px;
    --rb-board-height: 1846px;
    --rb-scale: 0.45;
    --rb-safe-top: env(safe-area-inset-top, 0px);
    --rb-safe-right: env(safe-area-inset-right, 0px);
    --rb-safe-bottom: env(safe-area-inset-bottom, 0px);
    --rb-safe-left: env(safe-area-inset-left, 0px);
    --rb-safe-offset-x: 0px;
    --rb-safe-offset-y: 0px;
    --rb-nav-clearance: 0px;
    --rb-cut: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
    /* F2 audit: rb-cut signature octogonal vira exclusivo do Hero. */
    --rb-cut-soft: 6px;
    --rb-shadow: 0 26px 80px rgba(0, 0, 0, 0.68);
    /* F1 audit: escala tipográfica modular — 8 tokens substituem 34 literais. */
    --fs-3xs: 10px;
    --fs-2xs: 12px;
    --fs-xs: 13px;
    --fs-sm: 15px;
    --fs-md: 18px;
    --fs-lg: 24px;
    --fs-xl: 36px;
    --fs-display: 56px;
    /* F22-B audit: tipografia dark-fantasy (Duel of Champions) — serif
       decorativa nos títulos, serif clean no body. O fallback para sans
       garante leitura mesmo antes do webfont chegar. */
    --rb-font-base: "Crimson Pro", "Crimson Text", "Hoefler Text", Garamond, ui-serif, Georgia, serif;
    --rb-font-display: "Cinzel", "Trajan Pro", "Crimson Pro", ui-serif, Georgia, "Times New Roman", serif;
    --rb-font-epic: "Cinzel", "Trajan Pro", ui-serif, Georgia, "Times New Roman", serif;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    min-height: 100%;
    background: var(--rb-black);
}

body.rb-page {
    margin: 0;
    color: var(--rb-text);
    /* F22-E: fundo dark fantasy — gradient marrom-preto + textura sutil de
       pergaminho. Sem grid neon (era cyberpunk-noir). */
    background:
        radial-gradient(ellipse 90% 80% at 50% 0%, rgba(196, 160, 80, 0.06), transparent 60%),
        radial-gradient(circle at 12% 88%, rgba(180, 60, 40, 0.05), transparent 38%),
        radial-gradient(circle at 88% 12%, rgba(108, 149, 184, 0.04), transparent 38%),
        linear-gradient(180deg, #160f08 0%, #0a0604 100%);
    font-family: var(--rb-font-base);
    font-weight: 500;
    letter-spacing: 0;
}

body.rb-game-page {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
}

button,
a {
    font: inherit;
}

button {
    border: 0;
}

.rb-game-viewport {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    overflow: clip;
    display: grid;
    place-items: center;
    padding: var(--rb-safe-top) var(--rb-safe-right) var(--rb-safe-bottom) var(--rb-safe-left);
    /* F24: arena fundo dark fantasy expandido — camadas (da mais próxima
       à mais distante):
       1. Foreground mountains (silhueta perto, preto)
       2. Ruínas de castelo no horizonte direito (midground)
       3. Background mountains (longe, marrom warm)
       4. Lua velada atrás das montanhas (glow radial morno)
       5. Estrelas dispersas no céu (radial dots)
       6. Vinhetas warm laterais
       7. Sky gradient base
       Tudo SVG inline data-URI, zero request extra. */
    background:
        /* 1. foreground mountains */
        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,
        /* 2. ruínas de castelo no horizonte (right side) */
        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='1340' y='305' width='10' height='15'/%3E%3Crect x='1356' y='305' width='10' height='15'/%3E%3Crect x='1390' y='280' width='44' height='140'/%3E%3Crect x='1390' y='265' width='10' height='15'/%3E%3Crect x='1414' y='265' width='10' height='15'/%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%3Crect x='1490' y='285' width='8' height='15'/%3E%3Crect x='1504' y='285' width='8' height='15'/%3E%3C/g%3E%3C/svg%3E") bottom center / 100% auto no-repeat,
        /* 3. background mountains (warm marrom) */
        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,
        /* 4. lua velada morna atrás das montanhas direita */
        radial-gradient(ellipse 220px 130px at 78% 38%, rgba(220, 180, 100, 0.18), rgba(196, 160, 80, 0.06) 35%, transparent 70%),
        /* 5. estrelas — 6 pontos no terço superior */
        radial-gradient(circle 1.5px at 18% 12%, rgba(232, 212, 164, 0.65), transparent 2px),
        radial-gradient(circle 1px at 31% 22%, rgba(232, 212, 164, 0.45), transparent 1.5px),
        radial-gradient(circle 2px at 47% 8%, rgba(232, 212, 164, 0.78), transparent 2.5px),
        radial-gradient(circle 1px at 62% 18%, rgba(232, 212, 164, 0.5), transparent 1.5px),
        radial-gradient(circle 1.5px at 78% 14%, rgba(232, 212, 164, 0.6), transparent 2px),
        radial-gradient(circle 1px at 89% 25%, rgba(232, 212, 164, 0.4), transparent 1.5px),
        /* 6. warmth vignettes laterais */
        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%),
        /* 7. base sky */
        linear-gradient(180deg, #1a0f06 0%, #0e0805 50%, #050304 100%);
}

.rb-game-viewport::before,
.rb-game-viewport::after {
    content: "";
    position: absolute;
    inset: -12%;
    z-index: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

.rb-game-viewport::before {
    opacity: 0.44;
    background:
        radial-gradient(circle at 11% 18%, rgba(244, 173, 38, 0.28) 0 1px, transparent 2px),
        radial-gradient(circle at 31% 72%, rgba(88, 214, 255, 0.2) 0 1px, transparent 2px),
        radial-gradient(circle at 54% 34%, rgba(255, 255, 255, 0.16) 0 1px, transparent 2px),
        radial-gradient(circle at 78% 61%, rgba(244, 173, 38, 0.18) 0 1px, transparent 2px);
    background-size: 190px 210px, 250px 230px, 170px 190px, 290px 260px;
    animation: rb-spark-float 24s linear infinite;
}

.rb-game-viewport::after {
    opacity: 0.28;
    background:
        linear-gradient(112deg, transparent 0 22%, rgba(88, 214, 255, 0.08) 32%, transparent 48% 100%),
        linear-gradient(68deg, transparent 0 18%, rgba(244, 173, 38, 0.075) 28%, transparent 45% 100%),
        repeating-linear-gradient(174deg, transparent 0 72px, rgba(255, 255, 255, 0.035) 73px 74px, transparent 75px 150px);
    animation: rb-mist-drift 36s ease-in-out infinite alternate;
}

.rb-game-board {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: calc(var(--rb-safe-top) + var(--rb-nav-clearance));
    width: var(--rb-board-width);
    height: var(--rb-board-height);
    overflow: hidden;
    transform: translateX(calc(-50% + var(--rb-safe-offset-x))) scale(var(--rb-scale));
    transform-origin: top center;
    /* F22-E: mesa de jogo dark fantasy. Spotlight quente morno no centro,
       lados tingidos pelo dono (bronze/azul-aço), textura sutil de madeira
       envelhecida via repeating-linear-gradient. Sem grid wireframe digital. */
    background:
        radial-gradient(ellipse 65% 50% at 50% 50%, rgba(196, 160, 80, 0.07), transparent 70%),
        linear-gradient(90deg, rgba(196, 160, 80, 0.08), transparent 22%, transparent 78%, rgba(108, 149, 184, 0.07)),
        repeating-linear-gradient(176deg, rgba(255, 220, 160, 0.012) 0 2px, transparent 2px 6px),
        linear-gradient(180deg, #1a120b 0%, #0a0604 100%);
}

.rb-audio-toggle {
    position: absolute;
    z-index: 40;
    top: 10px;
    right: 10px;
    min-width: 72px;
    min-height: 34px;
    border: 1px solid rgba(244, 173, 38, 0.36);
    color: var(--rb-gold-2);
    background: rgba(0, 0, 0, 0.54);
    font: inherit;
    font-size: var(--fs-2xs);
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 999px;
}

.rb-audio-toggle[aria-pressed="true"] {
    color: rgba(245, 234, 214, 0.66);
    border-color: rgba(255, 255, 255, 0.16);
}

.rb-game-viewport.is-screen-shaking {
    animation: rb-screen-shake 180ms cubic-bezier(0.2, 0.9, 0.28, 1) both;
}

.rb-game-board::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 14%, transparent 78%, rgba(0, 0, 0, 0.34)),
        linear-gradient(90deg, rgba(0, 0, 0, 0.42), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.42));
}

.rb-game-board::after {
    content: "";
    position: absolute;
    inset: 96px 12px 92px;
    pointer-events: none;
    opacity: 0.48;
    background:
        linear-gradient(90deg, transparent 0 14%, rgba(244, 173, 38, 0.13) 14% 14.3%, transparent 14.3% 85.7%, rgba(88, 214, 255, 0.13) 85.7% 86%, transparent 86%),
        linear-gradient(180deg, transparent 0 46%, rgba(255, 255, 255, 0.09) 46% 46.3%, transparent 46.3% 100%);
}

.rb-hud,
.rb-battle-zone,
.rb-card-stage,
.rb-player-hand,
.rb-actions,
.rb-result,
.rb-turn-log {
    position: absolute;
    z-index: 1;
}

.rb-hud {
    left: 22px;
    top: 26px;
    width: 808px;
    height: 136px;
    display: grid;
    grid-template-columns: 350px 110px 350px;
    gap: 0;
}

.rb-hud-side,
.rb-turn-core,
.rb-result-panel,
.rb-log,
.rb-evolution-panel {
    border: 1px solid var(--rb-line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.01)), rgba(8, 10, 13, 0.93);
    box-shadow: var(--rb-shadow);
    border-radius: var(--rb-cut-soft);
}

.rb-hud-side {
    display: grid;
    min-width: 0;
    grid-template-columns: 96px 1fr;
    gap: 22px;
    align-items: center;
    padding: 12px 16px;
}

.rb-hud-player {
    border-color: rgba(244, 173, 38, 0.34);
}

.rb-hud-bot {
    grid-template-columns: 1fr 96px;
    border-color: rgba(88, 214, 255, 0.34);
    text-align: right;
}

.rb-mark,
.rb-bot-emblem {
    display: grid;
    width: 96px;
    height: 96px;
    place-items: center;
    border: 1.5px solid rgba(196, 160, 80, 0.78);
    color: var(--rb-gold-2);
    background:
        /* spotlight central */
        radial-gradient(ellipse 80% 70% at 50% 40%, rgba(196, 160, 80, 0.22), transparent 70%),
        /* base dark */
        linear-gradient(145deg, #28190c, #0c0805);
    box-shadow:
        inset 0 0 0 1px rgba(232, 212, 164, 0.22),
        inset 0 -10px 20px rgba(0, 0, 0, 0.42),
        0 16px 32px rgba(0, 0, 0, 0.58),
        0 0 22px rgba(196, 160, 80, 0.28);
    font-family: var(--rb-font-epic);
    font-size: 0;  /* esconde a letra "A" pra dar lugar ao ::before SVG */
    line-height: 1;
    text-decoration: none;
    border-radius: 8px;
}

/* K10: SVG hero illustration substitui a letra "A" como avatar.
   Cavaleiro estilizado com capacete + escudo cruzado. */
.rb-mark::before {
    content: "";
    position: absolute;
    inset: 8px;
    background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23e0bf70' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- capacete --%3E%3Cpath d='M 30 38 Q 50 22 70 38 L 70 58 Q 70 64 65 64 L 35 64 Q 30 64 30 58 Z'/%3E%3C!-- visor --%3E%3Cpath d='M 36 46 L 64 46 M 36 52 L 64 52 M 40 58 L 60 58'/%3E%3C!-- plume top --%3E%3Cpath d='M 50 22 Q 48 12 50 6 Q 52 12 50 22'/%3E%3C!-- ombros --%3E%3Cpath d='M 22 78 Q 30 64 36 64 L 64 64 Q 70 64 78 78'/%3E%3C!-- escudo cruzado --%3E%3Cpath d='M 38 82 Q 50 86 62 82 Q 62 92 50 96 Q 38 92 38 82 Z' fill='%2328190c'/%3E%3Cpath d='M 50 82 L 50 96 M 42 89 L 58 89' stroke='%23c4a050'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
}

.rb-mark {
    position: relative;
    overflow: hidden;
}

.rb-bot-emblem {
    border-color: rgba(88, 214, 255, 0.4);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.04), transparent),
        #05070a url("../assets/rebirth/ui/bot-emblem.png") center / cover no-repeat;
}

.rb-game-board[data-bot-profile="aggressive"] .rb-hud-bot,
.rb-game-board[data-bot-profile="aggressive"] .rb-bot-emblem {
    --bot-aura: var(--rb-red);
    border-color: rgba(255, 115, 95, 0.66);
    animation: rb-bot-aura 1.18s ease-in-out infinite;
}

.rb-game-board[data-bot-profile="opportunist"] .rb-hud-bot,
.rb-game-board[data-bot-profile="opportunist"] .rb-bot-emblem {
    --bot-aura: var(--rb-gold);
    border-color: rgba(244, 173, 38, 0.62);
    animation: rb-bot-aura 1.6s ease-in-out infinite;
}

.rb-game-board[data-bot-profile="defensive"] .rb-hud-bot,
.rb-game-board[data-bot-profile="defensive"] .rb-bot-emblem {
    --bot-aura: var(--rb-cyan);
    border-color: rgba(88, 214, 255, 0.58);
    box-shadow: 0 0 0 1px rgba(88, 214, 255, 0.1), var(--rb-shadow);
}

.rb-game-board[data-bot-profile] #bot-profile-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.rb-hud-copy {
    display: grid;
    align-content: center;
    gap: 8px;
    min-width: 0;
}

.rb-hud-copy > span,
.rb-turn-core span,
.rb-card-topline span,
.rb-card-rule strong,
.rb-evolution-panel span,
.rb-result-panel span,
.rb-hand-count,
.rb-log-head span {
    color: var(--rb-muted);
    font-size: var(--fs-md);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
}

.rb-hud-player .rb-hud-copy > span {
    color: var(--rb-gold);
}

.rb-hud-bot .rb-hud-copy > span {
    color: var(--rb-cyan);
}

.rb-hud-health {
    display: flex;
    gap: 13px;
    align-items: center;
}

.rb-hud-bot .rb-hud-health {
    justify-content: flex-end;
}

.rb-hud-health i {
    width: 28px;
    height: 25px;
    background: #d8dcdf;
    clip-path: polygon(50% 100%, 10% 56%, 10% 24%, 30% 8%, 50% 20%, 70% 8%, 90% 24%, 90% 56%);
}

.rb-hud-health strong,
.rb-turn-core strong {
    font-size: var(--fs-display);
    line-height: 0.84;
    text-shadow: 0 5px 0 rgba(255, 255, 255, 0.16), 0 12px 24px rgba(0, 0, 0, 0.72);
}

.rb-hp-meter {
    overflow: hidden;
    width: 200px;
    height: 10px;
    background: rgba(255, 255, 255, 0.13);
    clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}

.rb-hud-bot .rb-hp-meter {
    justify-self: end;
}

.rb-hp-meter b {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--rb-gold), var(--rb-gold-2));
    transform-origin: left center;
}

.rb-zone-row {
    display: flex;
    gap: 7px;
    align-items: center;
    min-width: 0;
    color: var(--rb-muted);
    font-size: var(--fs-2xs);
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.rb-zone-row span {
    min-width: 0;
    padding: 4px 7px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    background: rgba(255, 255, 255, 0.045);
    white-space: nowrap;
    clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}

.rb-hud-player .rb-zone-row span:first-child {
    color: var(--rb-gold);
}

.rb-hud-bot .rb-zone-row span:first-child {
    color: var(--rb-cyan);
}

.rb-hud-bot .rb-hp-meter b {
    background: linear-gradient(90deg, #38bdea, var(--rb-cyan));
}

.rb-turn-core {
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
}

.rb-turn-core small {
    color: var(--rb-muted);
    font-size: var(--fs-xs);
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.rb-turn-phase-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    min-height: 26px;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: var(--rb-text);
    background: rgba(255, 255, 255, 0.065);
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.025);
    font-size: var(--fs-xs) !important;
    letter-spacing: 0;
    transition: color 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
    clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}

.rb-turn-phase-pill[data-turn-phase="draw"] {
    border-color: rgba(88, 214, 255, 0.48);
    color: var(--rb-cyan);
    background: rgba(88, 214, 255, 0.1);
}

.rb-turn-phase-pill[data-turn-phase="main"] {
    border-color: rgba(244, 173, 38, 0.52);
    color: var(--rb-gold-2);
    background: rgba(244, 173, 38, 0.105);
}

.rb-turn-phase-pill[data-turn-phase="combat"] {
    border-color: rgba(255, 115, 95, 0.58);
    color: var(--rb-red);
    background: rgba(255, 115, 95, 0.11);
    box-shadow: 0 0 18px rgba(255, 115, 95, 0.18);
}

.rb-turn-phase-pill[data-turn-phase="end"],
.rb-turn-phase-pill[data-turn-phase="finished"] {
    border-color: rgba(120, 242, 170, 0.42);
    color: var(--rb-green);
    background: rgba(120, 242, 170, 0.09);
}

.rb-phase-timeline {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    margin-top: 6px;
}

.rb-phase-timeline i {
    width: 14px;
    height: 4px;
    background: rgba(255, 255, 255, 0.16);
    transition: background 120ms ease, box-shadow 120ms ease;
}

.rb-phase-timeline i.is-complete {
    background: rgba(255, 255, 255, 0.4);
}

.rb-phase-timeline i.is-current {
    background: var(--rb-gold);
    box-shadow: 0 0 9px rgba(244, 173, 38, 0.6);
}

.rb-bot-card-zone {
    display: grid;
    place-items: center;
}

.rb-card-back {
    position: relative;
    display: grid;
    width: 164px;
    height: 202px;
    place-items: end center;
    padding: 0 8px 13px;
    border: 1px solid rgba(198, 205, 210, 0.42);
    color: var(--rb-muted);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.04), transparent 48%),
        url("../assets/rebirth/ui/bot-card-back.png") center / contain no-repeat,
        #0a0c10;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), inset 0 0 30px rgba(255, 255, 255, 0.04);
    clip-path: var(--rb-cut);
}

.rb-card-back span {
    position: absolute;
    bottom: 12px;
    z-index: 1;
    font-size: var(--fs-sm);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
}

.rb-card-stage {
    left: 0;
    top: 738px;
    width: 852px;
    height: 318px;
}

.rb-battle-zone {
    left: 24px;
    top: 398px;
    z-index: 2;
    display: grid;
    grid-template-rows: 1fr 42px 1fr;
    gap: 8px;
    width: 804px;
    height: 324px;
    padding: 12px;
    /* K11.5: era caixa preta 72% opacity sobreposta no HUD. Agora transparente
       — o fundo bonito vem do .rb-game-board (gradient marrom DoC). */
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: var(--rb-cut-soft);
}

.rb-battle-zone::before {
    content: "";
    position: absolute;
    inset: 14px 18px;
    z-index: 0;
    pointer-events: none;
    border-top: 1px solid rgba(88, 214, 255, 0.18);
    border-bottom: 1px solid rgba(244, 173, 38, 0.18);
    background:
        linear-gradient(90deg, transparent 0 24%, rgba(255, 255, 255, 0.08) 24% 24.3%, transparent 24.3% 75.7%, rgba(255, 255, 255, 0.08) 75.7% 76%, transparent 76%),
        radial-gradient(ellipse at 50% 50%, rgba(244, 173, 38, 0.08), transparent 48%);
}

.rb-field-row {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.rb-field-row > span {
    /* F16: label de zona ancorada por uma barra vertical do lado dono,
       em vez de texto solto à esquerda. */
    padding: 10px 12px 10px 14px;
    border-left: 3px solid currentColor;
    color: var(--rb-muted);
    font-size: var(--fs-xs);
    font-weight: 1000;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rb-field-row-bot > span {
    color: var(--rb-cyan);
}

.rb-field-row-player > span {
    color: var(--rb-gold);
}

.rb-field-slots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
}

.rb-field-vs {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.62);
    font-size: var(--fs-lg);
    font-weight: 1000;
    letter-spacing: 0;
    text-shadow: 0 0 18px rgba(244, 173, 38, 0.28);
}

.rb-field-card,
.rb-field-slot-empty {
    width: 100%;
    /* F4: 112px → 132px pra acomodar nome+habilidade legíveis em 2 linhas. */
    height: 132px;
    cursor: pointer;
}

.rb-field-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 8px;
    gap: 3px 7px;
    padding: 8px;
    text-align: left;
    transform: perspective(620px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transform-style: preserve-3d;
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
    will-change: transform;
}

.rb-field-card::before,
.rb-field-card::after {
    inset: 5px;
}

.rb-field-card::after {
    inset: 10px;
}

.rb-field-card > b {
    z-index: 3;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    color: #090603;
    background: var(--rb-gold);
    font-size: var(--fs-sm);
    font-weight: 1000;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.rb-field-art {
    position: relative;
    z-index: 1;
    grid-row: 1 / 4;
    overflow: hidden;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #11161c center / contain no-repeat;
}

.rb-card-art,
.rb-mini-art,
.rb-field-art,
.rb-evolution-thumb {
    background-position: center 58%;
    background-repeat: no-repeat;
    background-size: contain;
    background-blend-mode: normal;
}

.rb-card-art img,
.rb-temp-art img {
    mix-blend-mode: normal;
    opacity: 0.98;
}

.rb-mini-art,
.rb-field-art,
.rb-evolution-thumb {
    opacity: 0.98;
}

.rb-field-card strong,
.rb-field-card small {
    position: relative;
    z-index: 3;
    grid-column: 1 / 3;
    min-width: 0;
}

.rb-field-card strong {
    /* F4: deixa quebrar em 2 linhas; o nome completo vence o ellipsis cego. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--rb-text);
    font-size: var(--fs-xs);
    font-weight: 1000;
    line-height: 1.1;
    text-transform: uppercase;
    word-break: break-word;
}

.rb-field-card small {
    color: var(--rb-cyan);
    font-size: var(--fs-3xs);
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.rb-field-card > i {
    position: relative;
    z-index: 3;
    grid-column: 1 / 3;
    overflow: hidden;
    height: 8px;
    background: rgba(255, 255, 255, 0.12);
    clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}

.rb-field-card > i::before {
    content: "";
    display: block;
    width: calc(var(--guard-scale, 1) * 100%);
    height: 100%;
    background: linear-gradient(90deg, var(--rb-cyan), var(--rb-green));
    transition: width 180ms ease;
}

.rb-field-card.is-selected {
    border-color: var(--rb-gold-2);
    box-shadow: 0 0 0 2px rgba(244, 173, 38, 0.16), 0 20px 52px rgba(244, 173, 38, 0.2);
}

.rb-field-card.is-exhausted {
    opacity: 0.58;
}

.rb-field-card.is-exhausted .rb-field-art {
    opacity: 0.68;
}

.rb-field-slot-empty {
    display: grid;
    place-items: center;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.38);
    background: rgba(255, 255, 255, 0.035);
    font-size: var(--fs-2xs);
    font-weight: 1000;
    text-transform: uppercase;
    border-radius: var(--rb-cut-soft);
}

.rb-field-slot-empty[data-direct-attack="true"] {
    border-color: rgba(255, 115, 95, 0.46);
    color: var(--rb-red);
    background: rgba(255, 115, 95, 0.08);
    box-shadow: inset 0 0 22px rgba(255, 115, 95, 0.08);
}

.rb-monster-card {
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(244, 173, 38, 0.58);
    color: var(--rb-text);
    background: #08090b;
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.74);
    clip-path: var(--rb-cut);
}

.rb-monster-card::before,
.rb-monster-card::after {
    content: "";
    position: absolute;
    inset: 10px;
    z-index: 3;
    pointer-events: none;
    border: 1px solid rgba(244, 173, 38, 0.28);
    clip-path: var(--rb-cut);
}

.rb-monster-card::after {
    inset: 20px;
    border-color: rgba(255, 255, 255, 0.12);
}

.rb-monster-card-main {
    position: absolute;
    left: 190px;
    top: 0;
    width: 302px;
    height: 316px;
    /* F22-D: a carta focus grande ganha moldura dupla bronze e box-shadow
       morno que dá presença de carta colecionável. Cantos ornamentados via
       border-image OK para depois. */
    border: 2px solid rgba(196, 160, 80, 0.75);
    border-radius: 8px;
    box-shadow:
        inset 0 0 0 1px rgba(232, 212, 164, 0.18),
        inset 0 0 28px rgba(0, 0, 0, 0.62),
        0 22px 46px rgba(0, 0, 0, 0.62),
        0 0 36px rgba(196, 160, 80, 0.14);
}

.rb-main-card {
    transform: perspective(960px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transform-style: preserve-3d;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    will-change: transform;
}

.rb-bot-card,
.rb-card-back {
    transform: perspective(760px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transform-style: preserve-3d;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    will-change: transform;
}

/* F19 fix: turno 1 sem ação do bot — overlay grande "Carta do bot" sumia
   atrás de nada, parecia modal acidental. .is-empty deixa o slot reservado
   transparente, mantendo a estrutura sem o ruído visual. */
.rb-bot-card.is-empty {
    border-color: rgba(214, 219, 222, 0.12);
    background: transparent;
    box-shadow: none;
    clip-path: none;
}

.rb-bot-revealed {
    width: 164px;
    height: 202px;
    border-color: rgba(88, 214, 255, 0.56);
}

.rb-bot-revealed .rb-card-topline {
    inset: 14px 14px auto;
}

.rb-bot-revealed .rb-card-topline strong {
    max-width: 100px;
    font-size: var(--fs-md);
}

.rb-bot-revealed .rb-card-topline span,
.rb-bot-revealed .rb-card-rule,
.rb-bot-revealed .rb-card-stats {
    display: none;
}

.rb-bot-revealed .rb-card-rank {
    width: 38px;
    height: 38px;
    font-size: var(--fs-md);
}

.rb-bot-revealed .rb-card-art {
    height: 202px;
}

.rb-card-topline {
    position: absolute;
    inset: 34px 36px auto;
    z-index: 4;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.rb-card-topline strong {
    display: block;
    max-width: 320px;
    font-size: var(--fs-display);
    font-weight: 900;
    line-height: 0.94;
    text-transform: uppercase;
}

.rb-card-topline span {
    display: block;
    margin-top: 8px;
    color: var(--rb-gold);
    font-size: var(--fs-lg);
}

.rb-card-rank,
.rb-power {
    display: grid;
    flex: 0 0 auto;
    width: 68px;
    height: 68px;
    place-items: center;
    border: 1px solid rgba(244, 173, 38, 0.84);
    color: var(--rb-gold-2);
    background: #0a0b0d;
    font-size: var(--fs-xl);
    font-weight: 900;
    line-height: 1;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.rb-card-art {
    position: relative;
    overflow: hidden;
    height: 340px;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.55)),
        #101317;
}

.rb-card-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center 58%;
}

.rb-card-art::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.01), transparent 48%, rgba(0, 0, 0, 0.24)),
        radial-gradient(circle at 50% 44%, transparent 62%, rgba(0, 0, 0, 0.28) 100%);
}

.rb-card-art::before,
.rb-mini-art::after {
    content: "";
    position: absolute;
    inset: -38%;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%), rgba(255, 255, 255, 0.42), transparent 19%),
        conic-gradient(from 124deg at 50% 50%, rgba(255, 115, 95, 0), rgba(88, 214, 255, 0.42), rgba(255, 200, 82, 0.5), rgba(120, 242, 170, 0.34), rgba(255, 115, 95, 0));
    mix-blend-mode: screen;
    transform: translate3d(0, 0, 0) rotate(8deg);
    transition: opacity 180ms ease;
}

.rb-monster-card.is-evolved:hover .rb-card-art::before,
.rb-hand .rb-mini-card.is-evolved:hover .rb-mini-art::after {
    opacity: 0.56;
    animation: rb-foil-sweep 1.8s linear infinite;
}

.rb-card-art span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.82);
    font-family: var(--rb-font-display);
    font-size: var(--fs-xl);
    font-weight: 900;
}

.rb-status-strip {
    position: absolute;
    z-index: 5;
    right: 32px;
    top: 312px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    max-width: 220px;
    pointer-events: none;
}

.rb-status-strip span,
.rb-mini-status {
    border: 1px solid rgba(255, 115, 95, 0.58);
    color: #fff7f3;
    background: rgba(86, 16, 12, 0.82);
    box-shadow: 0 0 18px rgba(255, 72, 48, 0.24);
    font-size: var(--fs-2xs);
    font-weight: 1000;
    line-height: 1;
    text-transform: uppercase;
    clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

.rb-status-strip span {
    padding: 6px 9px;
}

.rb-mini-status {
    position: absolute;
    z-index: 4;
    right: 7px;
    top: 8px;
    padding: 4px 6px;
    font-size: var(--fs-3xs);
    pointer-events: none;
}

.rb-monster-card.is-burn,
.rb-mini-card.is-burn {
    border-color: rgba(255, 93, 65, 0.94);
    animation: rb-burn-border 1.18s ease-in-out infinite;
}

.rb-monster-card.is-burn::before {
    border-color: rgba(255, 115, 95, 0.58);
    box-shadow: inset 0 0 34px rgba(255, 67, 45, 0.2);
}

.rb-monster-card.is-burn .rb-card-art img,
.rb-mini-card.is-burn .rb-mini-art {
    opacity: 0.92;
}

.rb-monster-card.is-shield,
.rb-mini-card.is-shield {
    border-color: rgba(88, 214, 255, 0.82);
    box-shadow: 0 0 0 2px rgba(88, 214, 255, 0.08), 0 34px 90px rgba(0, 0, 0, 0.74);
}

.rb-bot-revealed .rb-status-strip {
    right: 9px;
    top: auto;
    bottom: 9px;
    max-width: 132px;
}

.rb-bot-revealed .rb-status-strip span {
    padding: 4px 6px;
    font-size: var(--fs-3xs);
}

@keyframes rb-burn-border {
    0%,
    100% {
        box-shadow: 0 34px 90px rgba(0, 0, 0, 0.74), 0 0 0 rgba(255, 115, 95, 0);
    }
    48% {
        box-shadow: 0 34px 90px rgba(0, 0, 0, 0.74), 0 0 0 4px rgba(255, 115, 95, 0.26), 0 0 28px rgba(255, 115, 95, 0.28);
    }
}

@keyframes rb-foil-sweep {
    0% {
        transform: translate3d(-7%, -5%, 0) rotate(8deg);
    }
    50% {
        transform: translate3d(6%, 5%, 0) rotate(15deg);
    }
    100% {
        transform: translate3d(-7%, -5%, 0) rotate(8deg);
    }
}

@keyframes rb-spark-float {
    0% {
        transform: translate3d(0, 0, 0);
        opacity: 0.34;
    }
    50% {
        transform: translate3d(16px, -22px, 0);
        opacity: 0.52;
    }
    100% {
        transform: translate3d(34px, -44px, 0);
        opacity: 0.34;
    }
}

@keyframes rb-mist-drift {
    0% {
        transform: translate3d(-2%, 1%, 0) scale(1);
    }
    100% {
        transform: translate3d(2%, -1.5%, 0) scale(1.04);
    }
}

@keyframes rb-bot-aura {
    0%,
    100% {
        box-shadow: 0 0 0 rgba(0, 0, 0, 0), var(--rb-shadow);
    }
    52% {
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--bot-aura, var(--rb-red)), transparent 66%), 0 0 30px color-mix(in srgb, var(--bot-aura, var(--rb-red)), transparent 74%), var(--rb-shadow);
    }
}

@keyframes rb-screen-shake {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }
    12% {
        transform: translate3d(var(--shake-intensity-negative, -5px), var(--shake-intensity-soft, 3px), 0);
    }
    28% {
        transform: translate3d(var(--shake-intensity, 5px), var(--shake-intensity-soft-negative, -3px), 0);
    }
    44% {
        transform: translate3d(var(--shake-intensity-soft-negative, -3px), var(--shake-intensity, 5px), 0);
    }
    62% {
        transform: translate3d(var(--shake-intensity-soft, 3px), var(--shake-intensity-negative, -5px), 0);
    }
    82% {
        transform: translate3d(var(--shake-intensity-soft-negative, -3px), 0, 0);
    }
}

.rb-asset-fallback {
    background:
        linear-gradient(135deg, rgba(244, 173, 38, 0.08), transparent 34%),
        linear-gradient(225deg, rgba(88, 214, 255, 0.08), transparent 36%),
        #0b0e12 !important;
}

.rb-asset-fallback::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 42%, rgba(244, 173, 38, 0.24), transparent 28%),
        linear-gradient(135deg, transparent 0 44%, rgba(88, 214, 255, 0.18) 45% 47%, transparent 48%),
        linear-gradient(45deg, transparent 0 47%, rgba(244, 173, 38, 0.18) 48% 50%, transparent 51%);
}

.rb-card-rule {
    display: grid;
    min-height: 152px;
    gap: 9px;
    padding: 24px 74px 22px 86px;
    border-top: 1px solid rgba(244, 173, 38, 0.25);
    background: rgba(3, 4, 5, 0.94);
}

.rb-card-rule strong {
    color: var(--rb-gold);
    font-size: var(--fs-lg);
}

.rb-card-rule p {
    margin: 0;
    color: #d6d4ce;
    font-size: var(--fs-md);
    line-height: 1.42;
}

.rb-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rb-card-tags span {
    padding: 5px 8px;
    border: 1px solid rgba(244, 173, 38, 0.24);
    color: var(--rb-text);
    background: rgba(244, 173, 38, 0.075);
    font-size: var(--fs-2xs);
    font-weight: 1000;
    line-height: 1;
    text-transform: uppercase;
    clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}

.rb-card-stats {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    align-items: center;
    padding: 16px 34px 24px;
    border-top: 1px solid rgba(244, 173, 38, 0.42);
    background: #060709;
}

.rb-card-stats span {
    display: inline-flex;
    gap: 9px;
    align-items: center;
    color: var(--rb-gold);
    font-size: var(--fs-xl);
    font-weight: 900;
}

.rb-card-stats span:last-child {
    justify-content: flex-end;
    color: var(--rb-cyan);
}

.rb-monster-card-main .rb-card-topline {
    inset: 18px 20px auto;
}

.rb-monster-card-main .rb-card-topline strong {
    max-width: 190px;
    font-size: var(--fs-lg);
}

.rb-monster-card-main .rb-card-topline span {
    margin-top: 5px;
    font-size: var(--fs-xs);
}

.rb-monster-card-main .rb-card-rank {
    width: 44px;
    height: 44px;
    font-size: var(--fs-lg);
}

.rb-monster-card-main .rb-card-art {
    height: 156px;
}

.rb-monster-card-main .rb-status-strip {
    right: 18px;
    top: 132px;
    max-width: 150px;
}

.rb-monster-card-main .rb-card-rule {
    min-height: 94px;
    gap: 5px;
    padding: 12px 42px 10px 48px;
}

.rb-monster-card-main .rb-card-rule strong {
    font-size: var(--fs-sm);
}

.rb-monster-card-main .rb-card-rule p {
    overflow: hidden;
    font-size: var(--fs-2xs);
    line-height: 1.24;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.rb-monster-card-main .rb-card-tags span {
    padding: 3px 5px;
    font-size: var(--fs-3xs);
}

.rb-monster-card-main .rb-card-stats {
    gap: 10px;
    padding: 8px 22px 10px;
}

.rb-monster-card-main .rb-card-stats span {
    font-size: var(--fs-md);
}

.rb-stat-sword,
.rb-action-sword {
    width: 27px;
    height: 27px;
    background: currentColor;
    clip-path: polygon(76% 0, 100% 0, 100% 24%, 37% 87%, 24% 74%, 87% 11%, 76% 11%);
}

.rb-stat-shield {
    width: 27px;
    height: 31px;
    background: currentColor;
    clip-path: polygon(50% 0, 92% 16%, 82% 72%, 50% 100%, 18% 72%, 8% 16%);
}

.rb-stat-crest {
    width: 30px;
    height: 34px;
    background: var(--rb-gold);
    clip-path: polygon(50% 0, 72% 34%, 100% 18%, 72% 100%, 50% 72%, 28% 100%, 0 18%, 28% 34%);
    opacity: 0.74;
}

.rb-evolution-panel {
    position: absolute;
    left: 665px;
    top: 0;
    display: grid;
    gap: 9px;
    align-content: center;
    justify-items: center;
    width: 154px;
    height: 316px;
    padding: 12px;
    text-align: center;
    overflow: hidden;
}

.rb-duplicate-panel {
    contain: layout paint;
}

.rb-evolution-panel.is-empty {
    opacity: 0.76;
}

.rb-evolution-panel span {
    color: var(--rb-gold);
    font-size: var(--fs-md);
    line-height: 1.06;
}

.rb-evolution-thumb {
    position: relative;
    width: 96px;
    height: 98px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: #090b0e center / contain no-repeat;
    border-radius: var(--rb-cut-soft);
}

.rb-evolution-panel strong {
    color: var(--rb-text);
    font-size: var(--fs-sm);
    line-height: 1.05;
    text-transform: uppercase;
}

.rb-evolution-panel small {
    color: var(--rb-muted);
    font-size: var(--fs-xs);
    line-height: 1.16;
}

.rb-actions-row small {
    color: var(--rb-muted);
    font-size: var(--fs-sm);
    line-height: 1.28;
}

.rb-combine-button {
    min-height: 44px;
    width: 118px;
    color: var(--rb-gold);
    font-size: var(--fs-md);
}

.rb-player-hand {
    left: 24px;
    top: 1076px;
    width: 804px;
    height: 228px;
}

.rb-hand {
    display: grid;
    grid-template-columns: repeat(5, 154px);
    gap: 9px;
    width: 100%;
    height: 206px;
    overflow: hidden;
}

.rb-hand-count {
    /* F16: era órfão "5 CARTAS" pairando. Vira chip integrado ao topo direito
       da mão (acima da régua de cartas). */
    position: absolute;
    top: -16px;
    right: 8px;
    bottom: auto;
    padding: 2px 8px;
    border: 1px solid var(--rb-line);
    border-radius: var(--rb-cut-soft);
    background: rgba(8, 10, 13, 0.78);
    color: var(--rb-muted);
    font-size: var(--fs-3xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.rb-hand .rb-mini-card {
    --card-lift: 0px;
    position: relative;
    display: grid;
    /* K10: cartas na mão eram 154×206 (pequenas demais pra ler nome+keywords).
       Cresci ~17% pra 180×238 — sem comprometer caber 5 cartas em mobile. */
    grid-template-rows: 118px 1fr;
    width: 180px;
    height: 238px;
    overflow: hidden;
    padding: 0;
    /* F22-D: borda dupla DoC — outer ring bronze + inner highlight light.
       Substitui o single border antigo. O box-shadow inset cria a impressão
       de moldura cinzelada. */
    border: 1px solid rgba(196, 160, 80, 0.62);
    color: var(--rb-text);
    background:
        linear-gradient(180deg, rgba(46, 33, 22, 0.92), rgba(16, 10, 5, 0.94));
    box-shadow:
        inset 0 0 0 1px rgba(232, 212, 164, 0.12),
        inset 0 0 14px rgba(0, 0, 0, 0.62),
        0 16px 32px rgba(0, 0, 0, 0.56);
    text-align: left;
    cursor: pointer;
    border-radius: 6px;
    /* F22-F: perspective maior (1100px) + transition mais responsiva
       (40ms vs 150ms) deixam o tilt sentir "vivo" no mouse-move. */
    transform: perspective(1100px) translateY(var(--card-lift)) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transform-style: preserve-3d;
    transition: transform 80ms ease-out, border-color 150ms ease, box-shadow 150ms ease;
    will-change: transform;
}

.rb-hand .rb-mini-card:hover {
    /* F22-F: hover sutil — leve subida 4px + glow morno dourado. O tilt 3D
       vem do JS RebirthHandTilt sobrescrevendo --tilt-x/y. */
    --card-lift: -4px;
    border-color: var(--rb-gold-2);
    box-shadow:
        inset 0 0 0 1px rgba(232, 212, 164, 0.22),
        inset 0 0 14px rgba(0, 0, 0, 0.62),
        0 22px 40px rgba(0, 0, 0, 0.66),
        0 0 22px rgba(196, 160, 80, 0.32);
}

/* F22-D: ornamentos de canto (filigrana dourada) nos 4 cantos do mini-card —
   pseudo-elements em vez de SVG pra evitar request extra. */
.rb-hand .rb-mini-card::before,
.rb-hand .rb-mini-card::after {
    content: "";
    position: absolute;
    z-index: 5;
    width: 14px;
    height: 14px;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(196, 160, 80, 0.86) 0 2px, transparent 2px),
        linear-gradient(45deg, rgba(196, 160, 80, 0.86) 0 2px, transparent 2px);
    background-repeat: no-repeat;
    background-size: 14px 14px;
}

.rb-hand .rb-mini-card::before {
    top: 3px;
    left: 3px;
    background-position: 0 0, 0 12px;
}

.rb-hand .rb-mini-card::after {
    top: 3px;
    right: 3px;
    transform: scaleX(-1);
    background-position: 0 0, 0 12px;
}

.rb-hand .rb-mini-card.is-selected {
    --card-lift: -7px;
    border-color: var(--rb-gold-2);
    box-shadow: 0 0 0 2px rgba(244, 173, 38, 0.14), 0 18px 44px rgba(244, 173, 38, 0.2);
}

.rb-hand .rb-mini-card.is-recommended {
    border-color: rgba(120, 242, 170, 0.72);
}

.rb-hand .rb-mini-card.is-evolved {
    border-color: rgba(255, 200, 82, 0.8);
    box-shadow: 0 16px 34px rgba(244, 173, 38, 0.14), inset 0 0 24px rgba(244, 173, 38, 0.08);
}

/* F19 fix: o ::after "Melhor" verde duplicava com o badge dourado HTML
   "MELHOR JOGADA" centralizado introduzido em audit #5. Mantemos apenas
   o badge dourado (.rb-recommendation-badge, top:36px) que F14 validou;
   o ::after foi removido. */

.rb-mini-art {
    position: relative;
    overflow: hidden;
    background: #101317 center / contain no-repeat;
}

.rb-mini-copy {
    display: grid;
    align-content: start;
    gap: 5px;
    min-height: 104px;
    padding: 9px 10px 10px;
    border-top: 1px solid rgba(244, 173, 38, 0.24);
}

.rb-mini-copy strong {
    color: var(--rb-text);
    font-size: var(--fs-sm);
    font-weight: 900;
    line-height: 0.98;
    text-transform: uppercase;
}

.rb-mini-copy span {
    color: var(--rb-muted);
    font-size: var(--fs-2xs);
    font-weight: 800;
    text-transform: uppercase;
}

.rb-mini-stats {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    font-size: var(--fs-sm);
}

.rb-mini-stats b:first-child {
    color: var(--rb-gold);
}

.rb-mini-stats b:last-child {
    color: var(--rb-cyan);
}

.rb-power {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    width: 36px;
    height: 36px;
    font-size: var(--fs-sm);
}

.rb-actions-row {
    left: 52px;
    top: 1328px;
    width: 748px;
    height: 106px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.rb-actions-row > div {
    display: grid;
    gap: 8px;
    text-align: center;
}

.rb-cta,
.rb-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 74px;
    border-radius: 0;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: var(--rb-cut-soft);
}

.rb-cta {
    gap: 18px;
    border: 1px solid rgba(255, 213, 109, 0.96);
    color: #090603;
    background: linear-gradient(180deg, #ffc852, #d58b19);
    box-shadow: 0 18px 42px rgba(244, 173, 38, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    font-size: var(--fs-lg);
    font-weight: 1000;
}

.rb-secondary {
    gap: 14px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--rb-text);
    background: linear-gradient(180deg, #272b2f, #111316);
    font-size: var(--fs-lg);
    font-weight: 900;
}

.rb-action-sword {
    color: #090603;
    flex: 0 0 auto;
}

.rb-action-loop {
    position: relative;
    width: 30px;
    height: 30px;
    border: 4px solid currentColor;
    border-left-color: transparent;
    border-radius: 50%;
}

.rb-action-loop::after {
    content: "";
    position: absolute;
    right: -5px;
    top: -7px;
    width: 12px;
    height: 12px;
    background: currentColor;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.rb-cta:disabled,
.rb-secondary:disabled {
    cursor: not-allowed;
    opacity: 0.48;
    box-shadow: none;
}

/* Quando o jogador está em dead-end (sem ação útil na fase principal),
   destacamos o botão "Encerrar turno" pra deixar claro que a saída é por ali.
   Aplicado via .is-cta-pulse pelo renderer. */
@keyframes rb-cta-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(244, 173, 38, 0.55);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 18px 6px rgba(244, 173, 38, 0.35);
        transform: scale(1.03);
    }
}

.is-cta-pulse:not(:disabled) {
    animation: rb-cta-pulse 1.4s ease-in-out infinite;
}

.rb-result-panel {
    left: 24px;
    top: 1438px;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    width: 804px;
    height: 206px;
    padding: 18px;
    --impact-accent: var(--rb-gold);
}

.rb-result-panel div {
    display: grid;
    align-content: center;
    gap: 4px;
    min-width: 0;
}

.rb-result-panel strong {
    display: block;
    font-size: var(--fs-lg);
    line-height: 1.06;
}

.rb-result-panel p {
    margin: 0;
    color: var(--rb-muted);
    font-size: var(--fs-md);
    line-height: 1.22;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.rb-tactics-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    min-height: 40px;
}

.rb-tactics-strip span {
    min-width: 0;
    padding: 5px 7px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    color: var(--rb-muted);
    background: rgba(255, 255, 255, 0.045);
    font-size: var(--fs-3xs);
    font-weight: 800;
    line-height: 1.12;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    white-space: normal;
    clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}

.rb-tactics-strip span:first-child {
    border-color: rgba(255, 200, 82, 0.28);
}

.rb-tactics-strip[data-intent-tone="danger"] span:first-child {
    color: var(--rb-red);
}

.rb-tactics-strip[data-intent-tone="warning"] span:first-child {
    color: var(--rb-gold);
}

.rb-tactics-strip[data-intent-tone="guard"] span:first-child {
    color: var(--rb-cyan);
}

.rb-tactics-strip b {
    margin-right: 5px;
    color: var(--rb-text);
}

/* F3: modo analista oculto por padrão; expande sob toggle. */
.rb-analyst-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 4px 10px;
    border: 1px solid var(--rb-line);
    border-radius: var(--rb-cut-soft);
    background: transparent;
    color: var(--rb-muted);
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
}
.rb-analyst-toggle:hover {
    border-color: rgba(244, 173, 38, 0.45);
    color: var(--rb-text);
}
.rb-analyst-toggle[aria-expanded="true"] .rb-analyst-toggle-icon {
    transform: rotate(45deg);
}
.rb-analyst-toggle-icon {
    display: inline-block;
    transition: transform 160ms ease;
}
.rb-analyst-mode {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(214, 219, 222, 0.12);
}

.rb-resolution-strip {
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px !important;
    min-height: 20px;
}

.rb-resolution-strip span {
    flex: 1 1 108px;
    min-width: 0;
    padding: 4px 7px;
    border: 1px solid rgba(88, 214, 255, 0.22);
    color: var(--rb-cyan);
    background: rgba(88, 214, 255, 0.065);
    font-size: var(--fs-3xs);
    font-weight: 900;
    line-height: 1.15;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    white-space: normal;
}

.rb-resolution-strip span:first-child {
    flex-grow: 1.15;
    border-color: rgba(244, 173, 38, 0.32);
    color: var(--rb-gold);
}

.rb-resolution-strip span:last-child[data-interrupt="resolved"] {
    border-color: rgba(255, 115, 95, 0.38);
    color: var(--rb-red);
}

.rb-resolution-strip #chain-label[data-intensity="rising"] {
    border-color: rgba(244, 173, 38, 0.55);
    background: rgba(244, 173, 38, 0.16);
    color: var(--rb-gold);
}

.rb-resolution-strip #chain-label[data-intensity="heavy"] {
    border-color: rgba(255, 97, 56, 0.65);
    background: rgba(255, 97, 56, 0.18);
    color: var(--rb-red);
    animation: rb-chain-heavy-pulse 880ms ease-in-out infinite;
}

@keyframes rb-chain-heavy-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 97, 56, 0); }
    50%      { box-shadow: 0 0 0 3px rgba(255, 97, 56, 0.32); }
}

@media (prefers-reduced-motion: reduce) {
    .rb-resolution-strip #chain-label[data-intensity="heavy"] {
        animation: none;
    }
}

.rb-result-panel .rb-secondary {
    min-width: 128px;
    min-height: 64px;
    font-size: var(--fs-md);
}

.rb-result-panel.is-victory {
    border-color: rgba(120, 242, 170, 0.5);
}

.rb-result-panel.is-defeat {
    border-color: rgba(255, 115, 95, 0.55);
}

.rb-result-panel.is-clash {
    border-color: rgba(88, 214, 255, 0.5);
}

.rb-result-panel.is-victory .rb-tactics-strip,
.rb-result-panel.is-defeat .rb-tactics-strip,
.rb-result-panel.is-clash .rb-tactics-strip {
    display: none;
}

.rb-ability-events,
.rb-reward-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 20px;
}

.rb-ability-chip,
.rb-reward-panel span {
    max-width: 340px;
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--rb-text);
    background: rgba(255, 255, 255, 0.055);
    font-size: var(--fs-xs);
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    white-space: normal;
    clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

.rb-ability-chip {
    border-color: color-mix(in srgb, var(--impact-accent), transparent 48%);
    color: var(--impact-accent);
}

.rb-ability-chip.is-muted,
.rb-reward-muted {
    color: var(--rb-muted);
}

.rb-reward-xp {
    border-color: rgba(120, 242, 170, 0.36);
    color: var(--rb-green) !important;
}

.rb-reward-daily {
    color: var(--rb-gold) !important;
}

.rb-result-panel.is-impacting {
    animation: rb-result-impact 620ms ease both;
}

.rb-main-card.is-impacting {
    animation: rb-card-impact 620ms ease both;
}

.rb-bot-card.is-impacting {
    animation: rb-bot-impact 620ms ease both;
}

@keyframes rb-result-impact {
    0% {
        box-shadow: 0 0 0 rgba(0, 0, 0, 0), var(--rb-shadow);
        transform: translateY(0);
    }
    38% {
        border-color: var(--impact-accent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--impact-accent), transparent 70%), var(--rb-shadow);
        transform: translateY(-2px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes rb-card-impact {
    0% { transform: translateX(0) scale(1); }
    36% { transform: translateX(-7px) scale(1.015); }
    70% { transform: translateX(4px) scale(1.005); }
    100% { transform: translateX(0) scale(1); }
}

@keyframes rb-bot-impact {
    0% { transform: translateY(0) rotate(0); }
    42% { transform: translateY(-5px) rotate(-1deg); }
    100% { transform: translateY(0) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
    .rb-game-viewport::before,
    .rb-game-viewport::after,
    .rb-game-viewport.is-screen-shaking,
    .rb-game-board[data-bot-profile] .rb-hud-bot,
    .rb-game-board[data-bot-profile] .rb-bot-emblem,
    .rb-monster-card.is-evolved .rb-card-art::before,
    .rb-hand .rb-mini-card.is-evolved .rb-mini-art::after,
    .rb-result-panel.is-impacting,
    .rb-main-card.is-impacting,
    .rb-bot-card.is-impacting,
    .is-cta-pulse:not(:disabled),
    .rb-monster-card.is-burn,
    .rb-mini-card.is-burn {
        animation: none;
    }
}

.rb-log {
    left: 24px;
    top: 1656px;
    width: 804px;
    height: 108px;
    overflow: hidden;
    padding: 0;
    transition: left 180ms ease, top 180ms ease, width 180ms ease, height 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.rb-log-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    height: 48px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.rb-log-head strong {
    font-size: var(--fs-md);
}

.rb-log ol {
    display: grid;
    gap: 0;
    max-height: 58px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
}

.rb-log li {
    min-height: 32px;
    padding: 8px 18px 8px 32px;
    border-left: 3px solid var(--rb-gold);
    color: var(--rb-muted);
    font-size: var(--fs-sm);
    line-height: 1.18;
}

.rb-log li:nth-child(even) {
    border-left-color: var(--rb-cyan);
}

.rb-log-toggle {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border: 1px solid rgba(244, 173, 38, 0.46);
    color: var(--rb-gold);
    background: rgba(8, 10, 13, 0.74);
    cursor: pointer;
    border-radius: var(--rb-cut-soft);
}

.rb-log-toggle i {
    position: relative;
    width: 21px;
    height: 24px;
    border: 2px solid currentColor;
    border-radius: 2px 6px 6px 2px;
}

.rb-log-toggle i::before,
.rb-log-toggle i::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    height: 2px;
    background: currentColor;
}

.rb-log-toggle i::before {
    top: 7px;
}

.rb-log-toggle i::after {
    top: 14px;
}

.rb-log-toggle span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.rb-log:not(.is-open) {
    left: 768px;
    top: 1654px;
    width: 58px;
    height: 58px;
    border-color: rgba(244, 173, 38, 0.44);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), 0 0 18px rgba(244, 173, 38, 0.12);
}

.rb-log:not(.is-open) .rb-log-head {
    display: grid;
    height: 58px;
    place-items: center;
    padding: 0;
    border-bottom: 0;
}

.rb-log:not(.is-open) .rb-log-head strong,
.rb-log:not(.is-open) .rb-log-head .rb-turn-phase-pill,
.rb-log:not(.is-open) ol {
    display: none;
}

.rb-log.is-open {
    left: 24px;
    top: 1656px;
    width: 804px;
    height: 108px;
}

.rb-cta-wide span {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    color: #090603;
    font-family: var(--rb-font-display);
    font-size: var(--fs-xl);
}

.rb-cta-wide i {
    width: 19px;
    height: 19px;
    border-top: 4px solid currentColor;
    border-right: 4px solid currentColor;
    transform: rotate(45deg);
}

.rb-loading,
.rb-error {
    position: absolute;
    z-index: 5;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    padding: 10px 18px;
    border: 1px solid var(--rb-line);
    color: var(--rb-text);
    background: rgba(8, 10, 13, 0.94);
    border-radius: var(--rb-cut-soft);
}

.rb-loading {
    top: 920px;
}

.rb-error {
    top: 390px;
    max-width: 520px;
    color: var(--rb-red);
    text-align: center;
}

.rb-game-board.is-pending .rb-loading,
.rb-error.is-visible {
    display: block;
}

.rb-home-page {
    min-height: 100%;
    overflow-x: hidden;
}

.rb-home-shell {
    position: relative;
    z-index: 1;
    /* F20: shell travado em 1060px deixava 400px de vácuo lateral em desktop
       grande. Agora cresce até 1560px (~80% de viewport 1920) mantendo
       legibilidade sem aspirar feio em ultrawide. */
    width: min(100%, 1560px);
    margin: 0 auto;
    padding: 22px clamp(18px, 3vw, 48px) 38px;
}

.rb-brand,
.rb-home-actions,
.rb-home-proof {
    display: flex;
    align-items: center;
}

.rb-brand {
    color: var(--rb-text);
    text-decoration: none;
}

.rb-brand {
    gap: 12px;
}

.rb-brand span {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid var(--rb-gold);
    color: var(--rb-gold);
    background: #08090b;
    font-family: var(--rb-font-display);
    font-size: var(--fs-lg);
    font-weight: 900;
    border-radius: var(--rb-cut-soft);
}

.rb-brand strong {
    font-size: var(--fs-md);
}

.rb-global-nav {
    position: sticky;
    z-index: 40;
    top: 0;
    display: grid;
    grid-template-columns: auto minmax(260px, 1fr) auto;
    gap: 16px;
    align-items: center;
    width: min(calc(100% - 28px), 1280px);
    margin: 14px auto 0;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background:
        linear-gradient(90deg, rgba(244, 173, 38, 0.11), rgba(8, 10, 13, 0.92) 34%, rgba(88, 214, 255, 0.08)),
        rgba(5, 7, 10, 0.94);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.48);
    border-radius: var(--rb-cut-soft);
}

.rb-game-page .rb-global-nav {
    position: fixed;
    top: calc(8px + var(--rb-safe-top));
    left: 50%;
    width: min(calc(100% - 20px), 1320px);
    margin: 0;
    transform: translateX(-50%);
}

/* Banner de verificação de email — informativo, não-bloqueante. */
.rb-verify-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    width: min(calc(100% - 28px), 1280px);
    margin: 8px auto 0;
    padding: 8px 14px;
    border: 1px solid rgba(244, 173, 38, 0.4);
    background: linear-gradient(90deg, rgba(244, 173, 38, 0.14), rgba(8, 10, 13, 0.85));
    color: var(--rb-text);
    font-size: var(--fs-xs);
    border-radius: var(--rb-cut-soft);
}

.rb-verify-banner .rb-verify-resend {
    padding: 5px 12px;
    border: 1px solid rgba(244, 173, 38, 0.6);
    background: rgba(244, 173, 38, 0.16);
    color: var(--rb-gold-2, #ffc852);
    font-weight: 800;
    text-transform: uppercase;
    font-size: var(--fs-2xs);
    cursor: pointer;
    border-radius: var(--rb-cut-soft);
}

.rb-verify-banner .rb-verify-resend:disabled {
    opacity: 0.6;
    cursor: default;
}

.rb-verify-banner .rb-verify-result {
    color: var(--rb-muted);
    font-size: var(--fs-2xs);
}

.rb-game-page .rb-verify-banner {
    position: fixed;
    top: calc(64px + var(--rb-safe-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 39;
}

.rb-game-page .rb-global-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
}

.rb-global-brand strong {
    white-space: nowrap;
}

.rb-global-tabs {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.rb-global-tabs::-webkit-scrollbar {
    display: none;
}

.rb-global-tabs a,
.rb-nav-auth {
    min-height: 38px;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--rb-text);
    background: rgba(0, 0, 0, 0.24);
    font-size: var(--fs-2xs);
    font-weight: 900;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

.rb-global-tabs a:hover,
.rb-global-tabs a.is-active,
.rb-nav-auth:hover {
    border-color: rgba(244, 173, 38, 0.72);
    color: var(--rb-gold-2);
}

.rb-global-tabs a {
    flex: 0 0 auto;
    padding-inline: 7px;
}

.rb-global-player {
    display: grid;
    grid-template-columns: minmax(118px, auto) minmax(142px, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    min-width: 0;
}

.rb-global-identity,
.rb-global-xp,
.rb-global-wallet {
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.22);
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

.rb-global-identity span,
.rb-global-xp span,
.rb-global-wallet span {
    display: block;
    color: var(--rb-muted);
    font-size: var(--fs-3xs);
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.rb-global-identity strong,
.rb-global-xp strong,
.rb-global-wallet strong {
    display: block;
    margin-top: 4px;
    color: var(--rb-text);
    font-size: var(--fs-xs);
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rb-global-xp i {
    display: block;
    overflow: hidden;
    height: 5px;
    margin-top: 6px;
    background: rgba(255, 255, 255, 0.12);
}

.rb-global-xp b {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--rb-cyan), var(--rb-gold-2));
}

.rb-global-wallet {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    min-width: 142px;
}

.rb-global-wallet span {
    color: var(--rb-gold);
}

.rb-global-wallet .rb-coinz,
.rb-global-wallet .rb-coinz strong {
    color: #ffd84d;
    text-shadow: 0 0 18px rgba(255, 216, 77, 0.42);
}

.rb-nav-logout {
    color: var(--rb-muted);
}

.rb-auth-modal[hidden] {
    display: none;
}

.rb-auth-modal {
    position: fixed;
    z-index: 80;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}

.rb-auth-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    cursor: pointer;
}

.rb-auth-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 760px);
    max-height: min(760px, calc(100dvh - 40px));
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(244, 173, 38, 0.44) transparent;
    padding: 28px;
    border: 1px solid rgba(244, 173, 38, 0.34);
    background:
        linear-gradient(135deg, rgba(244, 173, 38, 0.13), transparent 32%),
        linear-gradient(315deg, rgba(88, 214, 255, 0.09), transparent 30%),
        rgba(7, 9, 12, 0.98);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.72);
    border-radius: var(--rb-cut-soft);
}

.rb-auth-dialog::-webkit-scrollbar {
    width: 5px;
}

.rb-auth-dialog::-webkit-scrollbar-track {
    background: transparent;
}

.rb-auth-dialog::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(244, 173, 38, 0.44);
}

.rb-auth-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--rb-text);
    background: rgba(0, 0, 0, 0.32);
    font-size: var(--fs-md);
    font-weight: 900;
    cursor: pointer;
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

.rb-auth-dialog-copy span,
.rb-auth-entry > span,
.rb-shop-gacha-copy > span {
    color: var(--rb-gold);
    font-size: var(--fs-xs);
    font-weight: 900;
    text-transform: uppercase;
}

/* F12: progresso da coleção em destaque (cartas antes dos stats).
   Substitui os 4 boxes gigantes (POSSUÍDAS/ÚNICAS/BARALHO/EVOLUÇÕES) por
   uma barra de progresso única + chips inline. */
.rb-collection-progress {
    display: grid;
    gap: 14px;
    padding: 22px 26px;
    border: 1px solid var(--rb-line);
    border-radius: var(--rb-cut-soft);
    background:
        linear-gradient(120deg, rgba(244, 173, 38, 0.1), transparent 45%),
        var(--rb-panel);
    box-shadow: var(--rb-shadow);
}
.rb-collection-progress-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
}
.rb-collection-progress-head > div:first-child span {
    color: var(--rb-gold);
    font-size: var(--fs-2xs);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.rb-collection-progress-head > div:first-child strong {
    display: block;
    margin-top: 4px;
    color: var(--rb-text);
    font-family: var(--rb-font-epic);
    font-size: var(--fs-xl);
    line-height: 1;
}
.rb-collection-progress-head > div:first-child strong small {
    color: var(--rb-muted);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
}
.rb-collection-progress-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}
.rb-collection-progress-chips span {
    padding: 6px 12px;
    border: 1px solid var(--rb-line);
    border-radius: var(--rb-cut-soft);
    color: var(--rb-muted);
    font-size: var(--fs-2xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.rb-collection-progress-chips b {
    margin-left: 6px;
    color: var(--rb-text);
    font-size: var(--fs-sm);
}
.rb-collection-progress-bar {
    position: relative;
    overflow: hidden;
    height: 12px;
    border: 1px solid rgba(244, 173, 38, 0.42);
    border-radius: var(--rb-cut-soft);
    background: rgba(0, 0, 0, 0.42);
}
.rb-collection-progress-bar i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--rb-gold), rgba(255, 200, 82, 0.96));
    box-shadow: 0 0 12px rgba(244, 173, 38, 0.42);
    transition: width 400ms ease;
}

/* F8: identidade do perfil — avatar (inicial), nome e título de temporada.
   Substitui a grade de stats redundante do template antigo. */
.rb-profile-identity {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    padding: 28px 32px;
    border: 1px solid var(--rb-line);
    border-radius: var(--rb-cut-soft);
    background:
        linear-gradient(100deg, rgba(244, 173, 38, 0.16), transparent 36%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 60%),
        var(--rb-panel);
    box-shadow: var(--rb-shadow);
}
.rb-profile-avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 132px;
    height: 132px;
    border: 2px solid var(--rb-gold);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 35%, rgba(244, 173, 38, 0.22), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.3)),
        #0c0e12;
    box-shadow:
        0 0 0 4px rgba(244, 173, 38, 0.12),
        0 16px 36px rgba(0, 0, 0, 0.5);
}
.rb-profile-avatar > span {
    font-family: var(--rb-font-epic);
    font-size: var(--fs-display);
    font-weight: 900;
    color: var(--rb-gold);
    line-height: 1;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
}
.rb-profile-identity-copy {
    display: grid;
    gap: 6px;
}
.rb-profile-identity-tier {
    color: var(--rb-gold);
    font-size: var(--fs-2xs);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.rb-profile-identity-copy h2 {
    margin: 0;
    font-family: var(--rb-font-epic);
    font-size: var(--fs-xl);
    line-height: 1.05;
    color: var(--rb-text);
}
.rb-profile-identity-copy p {
    margin: 4px 0 0;
    color: var(--rb-muted);
    font-size: var(--fs-sm);
    line-height: 1.5;
}

@media (max-width: 720px) {
    .rb-profile-identity {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }
}

/* F7: arte CSS-illustrated do booster pack — pacote sombrio com aura gold,
   fita central e emblema. Substitui as 5 caixinhas vazias por uma presença
   visual real de "abertura de pack". */
.rb-booster-art {
    display: grid;
    justify-content: start;
    margin-bottom: 18px;
}
.rb-booster-pack {
    position: relative;
    width: 132px;
    height: 184px;
    border: 1.5px solid rgba(244, 173, 38, 0.55);
    border-radius: var(--rb-cut-soft);
    background:
        linear-gradient(160deg, rgba(244, 173, 38, 0.22), transparent 50%),
        linear-gradient(180deg, #1c130a 0%, #060709 100%);
    box-shadow:
        0 16px 36px rgba(0, 0, 0, 0.62),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -18px 24px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}
.rb-booster-pack-glow {
    position: absolute;
    inset: -30%;
    background: radial-gradient(circle at 50% 30%, rgba(244, 173, 38, 0.28), transparent 55%);
    pointer-events: none;
}
.rb-booster-pack-tape {
    position: absolute;
    left: 0;
    right: 0;
    top: 56%;
    height: 18px;
    background:
        linear-gradient(180deg, rgba(244, 173, 38, 0.85), rgba(176, 104, 19, 0.8)),
        linear-gradient(90deg, rgba(0, 0, 0, 0.4), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.4));
    box-shadow: 0 0 12px rgba(244, 173, 38, 0.28);
}
.rb-booster-pack-emblem {
    position: absolute;
    left: 50%;
    top: 22%;
    transform: translateX(-50%);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1.5px solid rgba(244, 173, 38, 0.85);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: var(--rb-gold);
    font-family: var(--rb-font-epic);
    font-size: var(--fs-lg);
    font-weight: 900;
    line-height: 1;
}

/* Slots de raridade tingidos pelo tipo da carta — comum cinza-gold, incomum cyan. */
.rb-gacha-slots span[data-rarity="common"] {
    border-color: rgba(214, 219, 222, 0.32);
    color: var(--rb-text);
}
.rb-gacha-slots span[data-rarity="uncommon"] {
    border-color: rgba(88, 214, 255, 0.5);
    color: var(--rb-cyan);
}

.rb-auth-dialog-copy h2,
.rb-shop-gacha-copy h2 {
    margin: 8px 0 10px;
    font-family: var(--rb-font-display);
    font-size: clamp(34px, 5vw, 54px);
    line-height: 0.95;
}

.rb-auth-dialog-copy p,
.rb-shop-gacha-copy p {
    max-width: 620px;
    margin: 0;
    color: var(--rb-muted);
    line-height: 1.45;
}

.rb-auth-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
}

.rb-auth-modal-form {
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.24);
    border-radius: var(--rb-cut-soft);
}

.rb-auth-modal-result {
    margin-top: 16px;
}

.rb-auth-entry-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

.rb-home-hero {
    display: grid;
    grid-template-columns: 0.88fr 0.74fr;
    gap: 44px;
    align-items: center;
    min-height: min(720px, calc(100svh - 178px));
}

.rb-home-copy h1 {
    margin: 0 0 18px;
    font-family: var(--rb-font-display);
    font-size: clamp(54px, 9vw, 92px);
    line-height: 0.9;
}

.rb-home-copy p {
    max-width: 560px;
    margin: 0 0 12px;
    color: var(--rb-muted);
    font-size: var(--fs-md);
    line-height: 1.42;
}

.rb-home-copy .rb-home-line {
    color: var(--rb-text);
    font-size: var(--fs-lg);
    font-weight: 900;
}

.rb-home-actions {
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.rb-home-actions .rb-cta,
.rb-home-actions .rb-secondary {
    min-height: 64px;
    padding: 0 26px;
    font-size: var(--fs-md);
}

.rb-home-preview {
    display: grid;
    gap: 14px;
}

.rb-home-preview .rb-score-frame,
.rb-home-preview .rb-preview-card,
.rb-home-hand span,
.rb-home-proof article {
    border: 1px solid var(--rb-line);
    background: var(--rb-panel);
    clip-path: var(--rb-cut);
}

.rb-home-preview .rb-score-frame {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
}

.rb-home-preview .rb-score-frame span,
.rb-home-proof span {
    color: var(--rb-muted);
    font-size: var(--fs-xs);
    font-weight: 900;
    text-transform: uppercase;
}

.rb-home-preview .rb-score-frame strong {
    display: block;
    color: var(--rb-text);
    font-size: var(--fs-lg);
}

.rb-preview-card {
    position: relative;
    overflow: hidden;
    min-height: 520px;
    border: 2px solid rgba(244, 173, 38, 0.56);
    background: #07090c;
}

.rb-preview-card .rb-card-art {
    height: 330px;
    background: #101317 center / contain no-repeat;
}

.rb-preview-card .rb-card-body {
    padding: 22px;
    background: #050608;
}

.rb-preview-card .rb-card-body span {
    color: var(--rb-gold);
    font-weight: 900;
    text-transform: uppercase;
}

.rb-preview-card .rb-card-body strong {
    display: block;
    margin-top: 5px;
    font-size: var(--fs-xl);
    text-transform: uppercase;
}

.rb-preview-card .rb-card-body p {
    margin: 8px 0 0;
    color: var(--rb-muted);
}

.rb-home-hand {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.rb-home-hand span {
    display: grid;
    min-height: 78px;
    place-items: center;
    color: var(--rb-gold);
    font-size: var(--fs-lg);
    font-weight: 900;
}

.rb-home-proof {
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 34px;
}

.rb-home-proof article {
    min-width: 150px;
    padding: 14px 16px;
}

.rb-home-proof strong {
    display: block;
    margin-top: 4px;
    font-size: var(--fs-md);
}

@media (max-width: 760px) {
    .rb-home-hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .rb-home-copy h1 {
        font-size: var(--fs-display);
    }

    .rb-home-copy .rb-home-line {
        font-size: var(--fs-lg);
    }
}

.rb-product-page {
    min-height: 100%;
}

.rb-product-shell {
    /* F20: idem .rb-home-shell — preencher viewport desktop ao invés de
       deixar 400px de vácuo lateral. */
    width: min(100%, 1560px);
}

.rb-product-hero,
.rb-product-panel,
.rb-product-stats article,
.rb-product-card,
.rb-achievement-card,
.rb-desktop-preview-board,
.rb-desktop-rail article,
.rb-desktop-rail nav,
.rb-rail-brand {
    border: 1px solid var(--rb-line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.012)), rgba(8, 10, 13, 0.9);
    box-shadow: var(--rb-shadow);
    border-radius: var(--rb-cut-soft);
}

.rb-product-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    margin-bottom: 24px;
    padding: 30px;
}

.rb-product-kicker,
.rb-product-panel > span,
.rb-product-panel-head span,
.rb-product-card span,
.rb-product-stats span,
.rb-track span,
.rb-desktop-rail span,
.rb-booster-summary span {
    color: var(--rb-gold);
    font-size: var(--fs-xs);
    font-weight: 900;
    text-transform: uppercase;
}

.rb-product-hero h1 {
    margin: 6px 0 10px;
    font-family: var(--rb-font-display);
    font-size: clamp(42px, 8vw, 74px);
    line-height: 0.92;
}

.rb-product-hero p,
.rb-product-panel p,
.rb-product-card p,
.rb-track p,
.rb-desktop-rail p,
.rb-desktop-preview-board p {
    margin: 0;
    color: var(--rb-muted);
    line-height: 1.45;
}

.rb-product-grid,
.rb-product-stats,
.rb-product-card-grid,
.rb-auth-grid,
.rb-history-list {
    display: grid;
    gap: 14px;
}

.rb-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rb-auth-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 14px;
}

.rb-product-grid-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rb-home-product-grid {
    margin-top: 16px;
}

.rb-product-panel {
    min-width: 0;
    padding: 22px;
}

.rb-product-panel h2,
.rb-product-card h2,
.rb-track strong,
.rb-desktop-rail strong,
.rb-desktop-preview-board strong,
.rb-history-list strong {
    display: block;
    margin: 8px 0 8px;
    color: var(--rb-text);
    font-size: var(--fs-lg);
    line-height: 1;
    text-transform: uppercase;
}

.rb-product-panel .rb-secondary {
    display: inline-grid;
    min-height: 46px;
    margin-top: 16px;
    padding: 0 18px;
    place-items: center;
    text-decoration: none;
}

.rb-product-wide {
    margin-top: 14px;
}

.rb-product-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.rb-product-panel-head h2 {
    margin-bottom: 0;
}

.rb-product-list {
    display: grid;
    gap: 10px;
    margin: 14px 0 0;
    padding-left: 20px;
    color: var(--rb-muted);
}

.rb-auth-form span {
    color: var(--rb-gold);
    font-size: var(--fs-xs);
    font-weight: 900;
    text-transform: uppercase;
}

.rb-auth-form {
    display: grid;
    gap: 12px;
}

.rb-auth-form label {
    display: grid;
    gap: 6px;
    color: var(--rb-muted);
    font-weight: 900;
    text-transform: uppercase;
}

.rb-auth-form input {
    min-height: 48px;
    border: 1px solid var(--rb-line);
    border-radius: 0;
    padding: 0 12px;
    color: var(--rb-text);
    background: rgba(0, 0, 0, 0.36);
    font: inherit;
    border-radius: var(--rb-cut-soft);
}

.rb-auth-form input:focus {
    outline: 2px solid rgba(244, 173, 38, 0.46);
    outline-offset: 2px;
}

.rb-auth-form .rb-auth-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--fs-2xs);
    line-height: 1.35;
    text-transform: none;
    color: rgba(245, 234, 214, 0.76);
}

.rb-auth-form .rb-auth-consent input {
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
    margin-top: 2px;
    padding: 0;
    accent-color: var(--rb-gold);
}

.rb-auth-consent a {
    color: var(--rb-gold-2);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rb-product-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 0 14px;
}

.rb-product-stats-compact {
    margin: 0;
}

.rb-home-status {
    margin-top: 24px;
}

.rb-product-stats article {
    min-height: 104px;
    padding: 18px;
}

.rb-product-stats strong {
    display: block;
    margin-top: 8px;
    color: var(--rb-text);
    font-size: var(--fs-lg);
    line-height: 1;
}

.rb-product-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 14px;
}

.rb-product-card {
    overflow: hidden;
    min-width: 0;
}

.rb-product-card img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    background: #101317;
}

.rb-product-card div {
    padding: 14px;
}

.rb-product-card h2 {
    font-size: var(--fs-md);
}

.rb-product-card strong {
    display: block;
    margin-top: 10px;
    color: var(--rb-gold);
}

.rb-product-card small {
    display: block;
    margin-top: 8px;
    color: var(--rb-muted);
    font-size: var(--fs-2xs);
    line-height: 1.35;
}

.rb-product-card-compact h2 {
    font-size: var(--fs-md);
}

.rb-curated-collection {
    display: grid;
    gap: 18px;
}

.rb-curated-collection .rb-product-panel-head {
    margin-bottom: 0;
}

.rb-curated-collection .rb-product-panel-head small {
    color: var(--rb-muted);
    font-size: var(--fs-2xs);
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rb-collection-shelf {
    display: grid;
    grid-template-columns: minmax(180px, 0.32fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.025);
    border-radius: var(--rb-cut-soft);
}

.rb-collection-shelf-copy {
    position: sticky;
    top: 88px;
    min-width: 0;
}

.rb-collection-shelf-copy h3 {
    margin: 8px 0;
    color: var(--rb-text);
    font-size: var(--fs-lg);
    line-height: 1;
    text-transform: uppercase;
}

.rb-collection-shelf-copy p {
    margin: 0;
    color: var(--rb-muted);
    line-height: 1.45;
}

.rb-product-card-grid-shelf {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 0;
}

.rb-product-card-grid-compact {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.rb-product-card-grid-compact .rb-product-card h2 {
    font-size: var(--fs-sm);
}

.rb-product-card-grid-compact .rb-product-card small {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.rb-catalog-drawer {
    padding: 14px;
    border: 1px solid rgba(244, 173, 38, 0.22);
    background: rgba(0, 0, 0, 0.18);
    border-radius: var(--rb-cut-soft);
}

.rb-catalog-drawer summary {
    cursor: pointer;
    color: var(--rb-gold);
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@media (max-width: 980px) {
    .rb-collection-shelf {
        grid-template-columns: 1fr;
    }

    .rb-collection-shelf-copy {
        position: static;
    }

    .rb-product-card-grid-shelf {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .rb-curated-collection {
        padding: 16px;
    }

    .rb-curated-collection .rb-product-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .rb-product-card-grid-shelf,
    .rb-product-card-grid-compact {
        grid-template-columns: 1fr;
    }
}

/* audit #8: cockpit mobile estava com 8 elementos disputando o primeiro
   viewport (nav + identidade + XP + carteira + HUD + zona bot). Na ARENA
   mobile, XP e carteira são ruído — escondê-los devolve altura pro
   tabuleiro. Continuam visíveis nas outras rotas (coleção/loja/recompensas)
   onde fazem sentido. A nav vira brand + abas roláveis + ação. */
@media (max-width: 760px) {
    .rb-game-page .rb-global-nav {
        grid-template-columns: auto 1fr auto;
        gap: 8px;
        padding: 6px 8px;
    }

    /* Esconde só XP + carteira (ruído mid-combate). A identidade fica —
       é compacta e confirma "logado como X", sinal útil mesmo na arena. */
    .rb-game-page .rb-global-xp,
    .rb-game-page .rb-global-wallet {
        display: none;
    }

    .rb-game-page .rb-global-tabs {
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .rb-game-page .rb-global-tabs::-webkit-scrollbar {
        display: none;
    }

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

.rb-product-loadout {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.rb-loadout-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.rb-loadout-summary article,
.rb-loadout-row {
    border: 1px solid var(--rb-line);
    background: rgba(255, 255, 255, 0.035);
    border-radius: var(--rb-cut-soft);
}

.rb-loadout-summary article {
    min-height: 78px;
    padding: 14px;
}

.rb-loadout-summary span,
.rb-loadout-row span {
    color: var(--rb-gold);
    font-size: var(--fs-2xs);
    font-weight: 900;
    text-transform: uppercase;
}

.rb-loadout-summary strong {
    display: block;
    margin-top: 6px;
    color: var(--rb-text);
    font-size: var(--fs-lg);
    line-height: 1;
}

.rb-loadout-summary.is-invalid article:first-child {
    border-color: rgba(255, 115, 95, 0.52);
}

.rb-loadout-builder {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: min(620px, 62vh);
    overflow: auto;
    padding-right: 6px;
    scrollbar-color: rgba(244, 173, 38, 0.5) rgba(255, 255, 255, 0.08);
}

.rb-loadout-builder [data-rebirth-loadout-hidden] {
    display: none;
}

.rb-loadout-row {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) 112px;
    gap: 12px;
    align-items: center;
    min-height: 122px;
    padding: 10px;
}

.rb-loadout-row.is-selected {
    border-color: rgba(244, 173, 38, 0.64);
}

.rb-loadout-row.is-maxed {
    background: rgba(244, 173, 38, 0.055);
}

.rb-loadout-row img {
    width: 74px;
    height: 96px;
    object-fit: contain;
    background: #101317;
    border-radius: var(--rb-cut-soft);
}

.rb-loadout-row strong {
    display: block;
    margin: 4px 0;
    color: var(--rb-text);
    font-size: var(--fs-md);
    line-height: 1;
    text-transform: uppercase;
}

.rb-loadout-row small {
    display: block;
    color: var(--rb-muted);
    font-size: var(--fs-2xs);
    line-height: 1.25;
}

.rb-loadout-stepper {
    display: grid;
    grid-template-columns: 34px 38px 34px;
    align-items: center;
    justify-content: end;
    gap: 4px;
}

.rb-loadout-stepper button,
.rb-loadout-stepper strong {
    display: grid;
    min-width: 0;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--rb-text);
    background: rgba(0, 0, 0, 0.28);
    font-size: var(--fs-md);
    font-weight: 900;
    clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

.rb-loadout-stepper button {
    cursor: pointer;
}

.rb-loadout-stepper button:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.rb-product-loadout label {
    display: grid;
    grid-template-columns: 22px 34px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-height: 76px;
    padding: 12px;
    border: 1px solid var(--rb-line);
    background: rgba(255, 255, 255, 0.035);
    border-radius: var(--rb-cut-soft);
}

.rb-product-loadout input {
    accent-color: var(--rb-gold);
}

.rb-product-loadout label > span {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(244, 173, 38, 0.44);
    color: var(--rb-gold);
}

.rb-product-loadout strong,
.rb-product-loadout small {
    display: block;
    min-width: 0;
    grid-column: 3;
}

.rb-product-loadout small {
    color: var(--rb-muted);
}

.rb-product-result {
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid var(--rb-line);
    color: var(--rb-muted);
    background: rgba(0, 0, 0, 0.22);
    border-radius: var(--rb-cut-soft);
}

.rb-danger-panel {
    border-color: rgba(255, 91, 84, 0.42);
    background:
        linear-gradient(135deg, rgba(255, 91, 84, 0.14), transparent 44%),
        rgba(13, 8, 8, 0.9);
}

.rb-danger-panel > span,
.rb-danger-panel h2 {
    color: #ffb0aa;
}

.rb-practice-goals {
    margin-top: 16px;
}

.rb-progress-vitrine {
    background:
        linear-gradient(135deg, rgba(244, 173, 38, 0.12), transparent 38%),
        linear-gradient(315deg, rgba(88, 214, 255, 0.1), transparent 36%),
        rgba(8, 10, 13, 0.92);
}

.rb-level-meter {
    display: grid;
    gap: 10px;
    margin-top: 8px;
}

.rb-level-meter-copy {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
}

.rb-level-meter-copy span,
.rb-level-meter small,
.rb-market-price span,
.rb-ledger-entry span,
.rb-progress-mini-stats span {
    color: var(--rb-gold);
    font-size: var(--fs-2xs);
    font-weight: 900;
    text-transform: uppercase;
}

.rb-level-meter-copy strong {
    color: var(--rb-text);
    font-size: var(--fs-lg);
    line-height: 1;
}

.rb-level-meter small {
    color: var(--rb-muted);
    line-height: 1.35;
}

.rb-level-bar {
    overflow: hidden;
    height: 18px;
    border: 1px solid rgba(244, 173, 38, 0.4);
    background: rgba(0, 0, 0, 0.42);
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

/* F13: na vitrine de progressão, a barra XP cresce para virar o hero da
   página — substitui a grade de stats redundante que existia no topo. */
.rb-progress-vitrine .rb-level-bar {
    height: 28px;
    border-width: 1.5px;
}
.rb-progress-vitrine .rb-level-meter-copy strong {
    font-size: var(--fs-xl);
}
.rb-progress-vitrine .rb-level-meter-copy span b {
    font-size: var(--fs-md);
    color: var(--rb-text);
}

.rb-level-bar i {
    display: block;
    width: 100%;
    height: 100%;
}

.rb-level-bar i::before,
.rb-level-bar i[data-rebirth-xp-fill] {
    display: block;
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #f4ad26, #58d6ff);
    box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.22);
    transition: width 360ms ease;
    content: "";
}

.rb-progress-mini-stats,
.rb-ledger-preview {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.rb-progress-mini-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rb-progress-mini-stats article,
.rb-ledger-entry {
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.035);
    border-radius: var(--rb-cut-soft);
}

.rb-progress-mini-stats article {
    min-height: 78px;
    padding: 14px;
}

.rb-progress-mini-stats strong {
    display: block;
    margin-top: 6px;
    color: var(--rb-text);
    font-size: var(--fs-lg);
    line-height: 1;
}

.rb-ledger-preview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rb-ledger-entry {
    min-height: 120px;
    padding: 14px;
}

.rb-ledger-entry strong {
    display: block;
    margin: 6px 0;
    color: var(--rb-text);
    font-size: var(--fs-lg);
    line-height: 1;
}

.rb-ledger-entry.is-credit strong {
    color: #9ff5b6;
}

.rb-ledger-entry.is-debit strong {
    color: #ff9d92;
}

.rb-ledger-entry p,
.rb-ledger-entry small {
    display: block;
    margin: 0;
    color: var(--rb-muted);
    font-size: var(--fs-2xs);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.rb-booster-result {
    min-height: 156px;
}

.rb-shop-gacha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
    gap: 18px;
    align-items: stretch;
}

.rb-shop-gacha-copy,
.rb-shop-pack-list {
    border: 1px solid var(--rb-line);
    background:
        linear-gradient(145deg, rgba(244, 173, 38, 0.11), transparent 36%),
        linear-gradient(315deg, rgba(88, 214, 255, 0.08), transparent 30%),
        rgba(8, 10, 13, 0.9);
    box-shadow: var(--rb-shadow);
    border-radius: var(--rb-cut-soft);
}

.rb-shop-gacha-copy {
    display: grid;
    align-content: center;
    min-height: 330px;
    padding: 30px;
}

.rb-gacha-slots {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-top: 24px;
}

.rb-gacha-slots span,
.rb-booster-rarity-line span {
    display: grid;
    min-height: 44px;
    place-items: center;
    border: 1px solid rgba(244, 173, 38, 0.24);
    color: var(--rb-text);
    background: rgba(0, 0, 0, 0.28);
    font-size: var(--fs-2xs);
    font-weight: 900;
    text-transform: uppercase;
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

.rb-gacha-slots span:nth-child(4),
.rb-booster-rarity-line span:nth-child(4) {
    border-color: rgba(88, 214, 255, 0.46);
    color: var(--rb-cyan);
}

.rb-gacha-slots span:nth-child(5),
.rb-booster-rarity-line span:nth-child(5) {
    border-color: rgba(88, 214, 255, 0.46);
    color: var(--rb-cyan);
    box-shadow: inset 0 0 18px rgba(88, 214, 255, 0.1);
}

.rb-shop-pack-list {
    display: grid;
    gap: 14px;
    padding: 14px;
}

.rb-shop-pack {
    box-shadow: none;
}

.rb-shop-pack-note {
    box-shadow: none;
    background: rgba(255, 255, 255, 0.035);
}

.rb-booster-summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.rb-booster-summary strong {
    color: var(--rb-gold);
    font-size: var(--fs-lg);
    text-transform: uppercase;
}

.rb-product-card-grid-result {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rb-market-offer {
    position: relative;
    border-color: rgba(88, 214, 255, 0.28);
    background:
        linear-gradient(180deg, rgba(88, 214, 255, 0.08), rgba(244, 173, 38, 0.04)),
        rgba(8, 10, 13, 0.92);
}

.rb-market-offer.is-currency-coinz {
    border-color: rgba(88, 214, 255, 0.58);
}

.rb-market-art {
    position: relative;
    min-height: 210px;
    background: #101317;
}

.rb-market-art img {
    width: 100%;
    height: 100%;
    min-height: 210px;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    object-position: center;
}

.rb-market-art span {
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: inline-grid;
    min-height: 30px;
    padding: 0 10px;
    place-items: center;
    border: 1px solid rgba(88, 214, 255, 0.46);
    color: var(--rb-cyan);
    background: rgba(0, 0, 0, 0.62);
    font-size: var(--fs-2xs);
    font-weight: 900;
    text-transform: uppercase;
    clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}

.rb-market-copy {
    display: grid;
    gap: 10px;
}

.rb-market-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 2px;
    padding: 10px 12px;
    border: 1px solid rgba(244, 173, 38, 0.32);
    background: rgba(0, 0, 0, 0.26);
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

.rb-market-price strong {
    margin: 0;
    color: var(--rb-cyan);
    font-size: var(--fs-lg);
}

.rb-booster-rarity-line {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.rb-booster-card {
    border-color: rgba(255, 255, 255, 0.18);
}

.rb-booster-card.is-uncommon {
    border-color: rgba(88, 214, 255, 0.46);
}

.rb-shop-offer strong {
    display: block;
    margin: 14px 0;
    color: var(--rb-gold);
    font-size: var(--fs-xl);
}

.rb-track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.rb-history-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rb-balance-lab {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.rb-balance-lab section {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.rb-balance-lab h3 {
    margin: 0 0 2px;
    color: var(--rb-gold);
    font-size: var(--fs-sm);
    line-height: 1;
    text-transform: uppercase;
}

.rb-balance-lab article {
    min-height: 78px;
    padding: 12px;
    border: 1px solid var(--rb-line);
    background: rgba(255, 255, 255, 0.035);
    border-radius: var(--rb-cut-soft);
}

.rb-balance-lab span,
.rb-balance-lab small {
    display: block;
    color: var(--rb-muted);
    font-size: var(--fs-2xs);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.rb-balance-lab strong {
    display: block;
    margin: 4px 0;
    color: var(--rb-text);
    font-size: var(--fs-lg);
    line-height: 1;
}

.rb-history-list article {
    min-height: 116px;
    padding: 14px;
    border: 1px solid var(--rb-line);
    background: rgba(255, 255, 255, 0.035);
    border-radius: var(--rb-cut-soft);
}

.rb-product-list code {
    color: var(--rb-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--fs-xs);
    overflow-wrap: anywhere;
}

.rb-achievement-card.is-locked {
    opacity: 0.66;
}

.rb-achievement-card.is-unlocked {
    border-color: rgba(244, 173, 38, 0.62);
    background:
        linear-gradient(180deg, rgba(244, 173, 38, 0.11), rgba(88, 214, 255, 0.03)),
        rgba(8, 10, 13, 0.9);
}

.rb-achievement-card small {
    display: block;
    margin-top: 12px;
    color: var(--rb-muted);
    overflow-wrap: anywhere;
}

.rb-track article {
    min-height: 148px;
    padding: 16px;
    border: 1px solid var(--rb-line);
    background: rgba(255, 255, 255, 0.035);
    border-radius: var(--rb-cut-soft);
}

.rb-desktop-preview {
    display: grid;
    place-items: center;
}

.rb-desktop-preview-board {
    width: min(100%, 520px);
    min-height: 320px;
    padding: 20px;
    text-align: center;
}

.rb-desktop-preview-board div {
    width: 150px;
    height: 220px;
    margin: 0 auto 18px;
    border: 1px solid rgba(244, 173, 38, 0.58);
    background:
        linear-gradient(180deg, rgba(244, 173, 38, 0.18), transparent),
        url("../assets/rebirth/cards/dreadclaw-art.webp") center / cover no-repeat;
    border-radius: var(--rb-cut-soft);
}

.rb-desktop-rail {
    display: none;
}

.rb-update-prompt {
    position: fixed;
    z-index: 50;
    right: 18px;
    bottom: 18px;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid rgba(244, 173, 38, 0.65);
    background: rgba(7, 9, 13, 0.94);
    color: var(--rb-gold);
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: var(--rb-cut-soft);
}

.rb-update-prompt:disabled {
    opacity: 0.65;
    cursor: progress;
}

@media (min-width: 1180px) {
    .rb-desktop-rail {
        position: fixed;
        z-index: 2;
        top: 50%;
        display: grid;
        width: clamp(210px, 17vw, 270px);
        gap: 12px;
        transform: translateY(-50%);
        pointer-events: auto;
    }

    .rb-desktop-rail-left {
        left: max(20px, calc(50vw - 650px));
    }

    .rb-desktop-rail-right {
        right: max(20px, calc(50vw - 650px));
    }

    .rb-desktop-rail article,
    .rb-desktop-rail nav,
    .rb-rail-brand {
        padding: 16px;
    }

    .rb-rail-brand {
        display: flex;
        text-decoration: none;
    }

    .rb-desktop-rail nav {
        display: grid;
        gap: 8px;
    }

    .rb-desktop-rail nav a,
    .rb-desktop-rail .rb-secondary {
        min-height: 42px;
        padding: 10px 12px;
        color: var(--rb-text);
        text-align: center;
        text-decoration: none;
    }

    .rb-desktop-rail nav a:hover,
    .rb-desktop-rail .rb-secondary:hover {
        color: var(--rb-gold);
    }
}

@media (min-width: 1180px) and (min-height: 680px) {
    .rb-desktop-rail {
        display: none;
    }

    .rb-game-board {
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 30px 90px rgba(0, 0, 0, 0.72);
    }

    .rb-hud {
        left: 24px;
        top: 18px;
        width: 1132px;
        height: 82px;
        grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr);
    }

    .rb-hud-side {
        grid-template-columns: 54px 1fr;
        gap: 14px;
        padding: 10px 14px;
    }

    .rb-hud-bot {
        grid-template-columns: 1fr 54px;
    }

    .rb-mark,
    .rb-bot-emblem {
        width: 54px;
        height: 54px;
        font-size: var(--fs-xl);
    }

    .rb-hud-health strong,
    .rb-turn-core strong {
        font-size: var(--fs-xl);
    }

    .rb-hud-copy > span,
    .rb-turn-core span,
    .rb-card-topline span,
    .rb-card-rule strong,
    .rb-evolution-panel span,
    .rb-result-panel span,
    .rb-hand-count,
    .rb-log-head span {
        font-size: var(--fs-xs);
    }

    .rb-hp-meter {
        width: 170px;
        height: 8px;
    }

    .rb-zone-row {
        gap: 5px;
        font-size: var(--fs-3xs);
    }

    .rb-zone-row span {
        padding: 3px 5px;
    }

    .rb-turn-core small {
        font-size: var(--fs-3xs);
    }

    .rb-phase-timeline {
        gap: 3px;
        margin-top: 3px;
    }

    .rb-phase-timeline i {
        width: 12px;
        height: 3px;
    }

    .rb-battle-zone {
        left: 324px;
        top: 122px;
        width: 460px;
        height: 454px;
        grid-template-rows: 1fr 34px 1fr;
        gap: 7px;
        padding: 10px;
    }

    .rb-field-row {
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 8px;
    }

    .rb-field-row > span {
        font-size: var(--fs-3xs);
    }

    .rb-field-slots {
        gap: 7px;
    }

    .rb-field-card,
    .rb-field-slot-empty {
        height: 184px;
    }

    .rb-field-card {
        grid-template-columns: 28px minmax(0, 1fr);
        padding: 7px;
    }

    .rb-field-card > b {
        width: 26px;
        height: 26px;
        font-size: var(--fs-xs);
    }

    .rb-field-card strong {
        font-size: var(--fs-2xs);
    }

    .rb-field-card small,
    .rb-field-slot-empty {
        font-size: var(--fs-3xs);
    }

    .rb-card-back,
    .rb-bot-revealed {
        width: 126px;
        height: 156px;
    }

    .rb-bot-revealed .rb-card-art {
        height: 156px;
    }

    .rb-card-stage {
        left: 356px;
        top: 122px;
        width: 420px;
        height: 478px;
    }

    .rb-monster-card-main {
        left: 0;
        top: 0;
        width: 344px;
        height: 478px;
    }

    .rb-card-topline {
        inset: 24px 26px auto;
    }

    .rb-card-topline strong {
        max-width: 230px;
        font-size: var(--fs-xl);
    }

    .rb-card-topline span {
        margin-top: 5px;
        font-size: var(--fs-sm);
    }

    .rb-card-rank {
        width: 50px;
        height: 50px;
        font-size: var(--fs-lg);
    }

    .rb-card-art {
        height: 246px;
    }

    .rb-status-strip {
        right: 24px;
        top: 218px;
        max-width: 170px;
    }

    .rb-status-strip span {
        padding: 5px 7px;
        font-size: var(--fs-3xs);
    }

    .rb-card-rule {
        min-height: 126px;
        gap: 7px;
        padding: 18px 50px 16px 58px;
    }

    .rb-card-rule p {
        font-size: var(--fs-sm);
    }

    .rb-card-tags {
        gap: 4px;
    }

    .rb-card-tags span {
        padding: 4px 6px;
        font-size: var(--fs-3xs);
    }

    .rb-card-stats {
        gap: 14px;
        padding: 13px 26px 16px;
    }

    .rb-card-stats span {
        font-size: var(--fs-lg);
    }

    .rb-evolution-panel {
        left: 356px;
        top: 70px;
        width: 118px;
        height: 316px;
        padding: 14px 10px;
    }

    .rb-evolution-thumb {
        width: 82px;
        height: 96px;
    }

    .rb-evolution-panel strong {
        font-size: var(--fs-sm);
    }

    .rb-evolution-panel small,
    .rb-actions-row small {
        font-size: var(--fs-2xs);
    }

    .rb-combine-button {
        min-height: 46px;
        width: 94px;
        font-size: var(--fs-sm);
    }

    .rb-player-hand {
        left: 24px;
        top: 612px;
        width: 758px;
        height: 122px;
    }

    .rb-hand {
        grid-template-columns: repeat(5, 144px);
        gap: 9px;
        height: 110px;
    }

    .rb-hand .rb-mini-card {
        grid-template-rows: 54px 1fr;
        width: 144px;
        height: 110px;
    }

    .rb-mini-copy {
        gap: 2px;
        min-height: 56px;
        padding: 6px 8px 7px;
    }

    .rb-mini-copy strong {
        font-size: var(--fs-xs);
    }

    .rb-mini-copy span {
        font-size: var(--fs-3xs);
    }

    .rb-mini-stats {
        font-size: var(--fs-2xs);
    }

    .rb-power {
        width: 28px;
        height: 28px;
        font-size: var(--fs-xs);
    }

    .rb-actions-row {
        left: 808px;
        top: 594px;
        width: 348px;
        height: 82px;
        gap: 12px;
    }

    .rb-cta,
    .rb-secondary {
        min-height: 54px;
        font-size: var(--fs-md);
    }

    .rb-action-loop {
        width: 22px;
        height: 22px;
        border-width: 3px;
    }

    .rb-result-panel {
        left: 808px;
        top: 122px;
        width: 348px;
        height: 264px;
        padding: 18px;
        overflow-y: auto;
    }

    .rb-result-panel strong {
        font-size: var(--fs-lg);
    }

    .rb-result-panel p {
        font-size: var(--fs-sm);
        -webkit-line-clamp: 4;
    }

    .rb-tactics-strip {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .rb-tactics-strip span {
        padding: 4px 6px;
        font-size: var(--fs-3xs);
    }

    .rb-resolution-strip span {
        padding: 3px 5px;
        font-size: var(--fs-3xs);
    }

    .rb-result-panel .rb-secondary {
        min-width: 96px;
        min-height: 54px;
        font-size: var(--fs-sm);
    }

    .rb-ability-events,
    .rb-reward-panel {
        gap: 5px;
    }

    .rb-ability-chip,
    .rb-reward-panel span {
        max-width: 280px;
        font-size: var(--fs-2xs);
    }

    .rb-log {
        left: 808px;
        top: 402px;
        width: 348px;
        height: 170px;
    }

    .rb-log ol {
        max-height: 120px;
    }

    .rb-log li {
        min-height: 28px;
        font-size: var(--fs-2xs);
    }

    .rb-log:not(.is-open) {
        left: 1098px;
        top: 386px;
        width: 58px;
        height: 58px;
    }

    .rb-log.is-open {
        left: 808px;
        top: 390px;
        width: 348px;
        height: 182px;
    }

    .rb-loading {
        top: 340px;
    }

    .rb-error {
        top: 104px;
    }

    .rb-game-board {
        display: grid;
        grid-template-areas:
            "hud hud hud"
            "left arena result"
            "left arena evo"
            "coach arena log"
            "hand hand actions";
        grid-template-columns: 270px minmax(0, 500px) 330px;
        grid-template-rows: 82px 258px 120px 80px 140px;
        gap: 12px 20px;
        padding: 16px;
    }

    .rb-hud,
    .rb-battle-zone,
    .rb-player-hand,
    .rb-actions-row,
    .rb-result-panel,
    .rb-log {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        height: auto;
        min-height: 0;
    }

    .rb-hud {
        grid-area: hud;
    }

    .rb-bot-card-zone {
        justify-content: start;
        align-content: center;
    }

    .rb-battle-zone {
        grid-area: arena;
        align-self: stretch;
        width: auto;
        height: auto;
        grid-template-rows: minmax(0, 1fr) 34px minmax(0, 1fr);
        gap: 8px;
        z-index: 1;
    }

    .rb-field-row {
        min-height: 0;
    }

    .rb-field-slots {
        min-height: 0;
    }

    .rb-field-card,
    .rb-field-slot-empty {
        height: 156px;
        min-height: 156px;
    }

    .rb-card-stage {
        display: contents;
    }

    .rb-monster-card-main {
        grid-area: arena;
        position: relative;
        left: auto;
        top: auto;
        align-self: center;
        justify-self: center;
        width: 286px;
        height: 448px;
        z-index: 3;
    }

    .rb-evolution-panel {
        grid-area: evo;
        position: relative;
        left: auto;
        top: auto;
        align-self: stretch;
        width: auto;
        height: auto;
        min-height: 0;
        padding: 14px 12px;
    }

    .rb-result-panel {
        grid-area: result;
        align-self: stretch;
        display: block;
        position: relative;
        padding: 12px;
        overflow: hidden;
    }

    .rb-result-panel > div {
        align-content: start;
        gap: 5px;
    }

    .rb-result-panel #result-label,
    .rb-result-panel #result-title,
    .rb-result-panel #result-copy {
        padding-right: 78px;
    }

    .rb-result-panel > .rb-secondary {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 70px;
        min-width: 70px;
        min-height: 46px;
        padding: 7px;
        font-size: var(--fs-2xs);
    }

    .rb-result-panel .rb-resolution-strip {
        flex-wrap: nowrap;
    }

    .rb-result-panel .rb-resolution-strip span {
        flex: 1 1 0;
    }

    .rb-result-panel .rb-tactics-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rb-log,
    .rb-log:not(.is-open),
    .rb-log.is-open {
        grid-area: log;
        left: auto;
        top: auto;
        width: auto;
        height: auto;
        align-self: stretch;
    }

    .rb-log:not(.is-open) .rb-log-head {
        display: flex;
        height: 48px;
        place-items: initial;
        padding: 14px 18px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .rb-log:not(.is-open) ol,
    .rb-log.is-open ol {
        display: block;
        max-height: 84px;
    }

    .rb-log:not(.is-open) .rb-log-head strong,
    .rb-log:not(.is-open) .rb-log-head .rb-turn-phase-pill,
    .rb-log:not(.is-open) .rb-log-head span {
        display: inline-flex;
    }

    .rb-log-toggle {
        display: none;
    }

    .rb-player-hand {
        grid-area: hand;
        overflow: visible;
    }

    .rb-hand {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 14px;
        height: 140px;
        overflow: visible;
        padding-top: 14px;
    }

    .rb-hand .rb-mini-card {
        grid-template-rows: 68px 1fr;
        width: 100%;
        height: 126px;
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.52);
    }

    .rb-hand .rb-mini-card:hover,
    .rb-hand .rb-mini-card:focus-visible {
        --card-lift: -15px;
        border-color: var(--rb-gold-2);
        box-shadow: 0 24px 54px rgba(0, 0, 0, 0.66), 0 0 22px rgba(244, 173, 38, 0.22);
    }

    .rb-mini-copy {
        min-height: 58px;
    }

    .rb-actions-row {
        grid-area: actions;
        align-self: stretch;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .rb-actions-row > div {
        align-content: start;
    }
}

/* F20: arena desktop fluida — overriding o bloco anterior que ainda pinava
   tudo com position:absolute em coordenadas de board 1180×760. Aqui o board
   vira CSS Grid full-width que cresce com o viewport. As colunas "left" e
   "coach" do tablet sumiram porque o player-coach foi removido em F18 —
   sobra arena larga + painéis direita (result/evo/log) + hand wide. */
@media (min-width: 1180px) and (min-height: 680px) {
    .rb-game-board {
        /* F21: as vinhetas radial (rgba 0,0,0,0.62 nas pontas) e linear
           (rgba 0,0,0,0.42 nos lados) eram moldura focal quando o board
           tinha ~1180px centralizado. Com o board agora ocupando quase
           toda a tela, essas vinhetas vinham como máscara escura sobre o
           conteúdo. Stack mais leve em desktop. */
        background:
            radial-gradient(ellipse 60% 45% at 50% 48%, rgba(244, 173, 38, 0.07), transparent 70%),
            linear-gradient(90deg, rgba(244, 173, 38, 0.06), transparent 20%, transparent 80%, rgba(88, 214, 255, 0.055)),
            repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 82px),
            linear-gradient(180deg, #0b0f15 0%, #050708 100%);
        display: grid;
        /* K11 ARENA ZEN: layout minimalista. 3 zonas verticais:
            ┌──────────────────────────────────┐
            │  HUD compacto (1 linha)          │
            ├──────────────────────────────────┤
            │                                  │
            │  BATTLEFIELD GIGANTE no centro   │
            │  (zona bot top + sua zona bot)   │
            │                                  │
            ├──────────────────────────────────┤
            │  Mão (5 cartas grandes)          │
            └──────────────────────────────────┘
           Hero-portraits, result/evo/log/actions saem do flow visual
           (display:none ou hidden) — zone main. */
        grid-template-areas:
            "hud"
            "arena"
            "hand";
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: clamp(68px, 8vh, 88px) minmax(360px, 1fr) clamp(190px, 24vh, 260px);
        gap: 12px;
        padding: 16px clamp(20px, 3vw, 48px);
    }

    /* K11: HUD vira faixa horizontal compacta (1 linha). 3 filhos viram
       direct children do grid via display:contents. */
    .rb-hud {
        grid-area: hud;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 6px 8px;
        border: 1px solid rgba(196, 160, 80, 0.32);
        border-radius: 8px;
        background: linear-gradient(180deg, rgba(28, 18, 8, 0.78), rgba(12, 8, 5, 0.86));
    }

    /* K11.6: RESET AGRESSIVO. Layout base tem position:absolute + z-index:1
       em .rb-hud, .rb-battle-zone, .rb-player-hand, .rb-card-stage,
       .rb-result, .rb-turn-log — coordenadas pixel-perfect do board
       portrait 852×1846. No grid moderno DOC todos viram block flow normal
       com !important pra vencer especificidade. */
    .rb-hud,
    .rb-hud-player,
    .rb-hud-bot,
    .rb-turn-core,
    .rb-battle-zone,
    .rb-player-hand,
    .rb-card-stage,
    .rb-result-panel,
    .rb-evolution-panel,
    .rb-log,
    .rb-actions {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        inset: auto !important;
        z-index: auto !important;
        width: auto !important;
        height: auto !important;
        min-height: 0;
    }

    /* K11: hero portraits viram CHIPs compactos no HUD (não mais colunas
       full-height). Hide as ornamentos pesados — fica só avatar pequeno
       + HP número grande + mana inline. */
    .rb-hud-player,
    .rb-hud-bot {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 4px 10px;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .rb-hud-player::before, .rb-hud-player::after,
    .rb-hud-bot::before, .rb-hud-bot::after {
        display: none !important;
    }

    .rb-hud-player .rb-mark,
    .rb-hud-bot .rb-bot-emblem {
        width: 48px;
        height: 48px;
        font-size: var(--fs-md);
        margin: 0;
    }

    .rb-hud-player .rb-hud-copy,
    .rb-hud-bot .rb-hud-copy {
        display: flex;
        gap: 12px;
        align-items: center;
    }

    .rb-hud-player .rb-hud-copy > span,
    .rb-hud-bot .rb-hud-copy > span {
        font-size: var(--fs-2xs);
        color: var(--rb-muted);
    }

    .rb-hud-player .rb-hud-health,
    .rb-hud-bot .rb-hud-health {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .rb-hud-player .rb-life-orb,
    .rb-hud-bot .rb-life-orb {
        width: 32px;
        height: 32px;
    }

    .rb-hud-player .rb-hud-health strong,
    .rb-hud-bot .rb-hud-health strong {
        font-size: var(--fs-lg);
        font-family: var(--rb-font-display);
        color: var(--rb-text);
    }

    .rb-hud-player .rb-hud-health small,
    .rb-hud-bot .rb-hud-health small {
        display: none;
    }

    .rb-hud-player .rb-zone-row,
    .rb-hud-bot .rb-zone-row {
        font-size: var(--fs-2xs);
        gap: 8px;
    }

    .rb-turn-core {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 14px;
        border-left: 1px solid rgba(196, 160, 80, 0.32);
        border-right: 1px solid rgba(196, 160, 80, 0.32);
    }

    .rb-turn-core > span {
        font-size: var(--fs-2xs);
        color: var(--rb-muted);
        text-transform: uppercase;
    }

    .rb-turn-core strong {
        font-family: var(--rb-font-display);
        font-size: var(--fs-xl);
        color: var(--rb-gold-2);
    }

    .rb-turn-core small {
        font-size: var(--fs-2xs);
        color: var(--rb-muted);
    }

    .rb-turn-core .rb-phase-timeline {
        display: none;  /* Em zen, esconde phase timeline (volta só com toggle). */
    }

    .rb-battle-zone {
        grid-area: arena;
        align-self: stretch;
        justify-self: stretch;
        z-index: 1;
    }

    .rb-card-stage {
        display: contents;
    }

    .rb-monster-card-main {
        position: relative;
        left: auto;
        top: auto;
        margin: 0 auto;
    }

    .rb-player-hand {
        grid-area: hand;
        align-self: stretch;
    }

    /* K11: painéis acessórios SAEM da arena zen. Result/evo/log/actions
       ainda existem no DOM (engine produz events lá) mas escondidos no
       layout principal. */
    .rb-result-panel,
    .rb-evolution-panel,
    .rb-log,
    .rb-actions-row {
        display: none;
    }

    /* K11.5: action floating MINIMALISTA — 2 ícones redondos pequenos
       no canto inferior direito. Sem text labels nem caixas grandes. */
    .rb-actions-row {
        display: flex;
        position: fixed;
        right: clamp(16px, 2vw, 32px);
        bottom: clamp(16px, 2vh, 28px);
        z-index: 50;
        gap: 8px;
        padding: 0;
        width: auto;
        height: auto;
        grid-template-columns: none;
    }

    .rb-actions-row > div {
        display: flex;
        gap: 0;
    }

    .rb-actions-row > div small,
    .rb-actions-row > div p {
        display: none;  /* esconde captions "Jogue CINDER LYNX (1 mana)" */
    }

    .rb-actions-row .rb-cta,
    .rb-actions-row .rb-secondary {
        width: 56px;
        height: 56px;
        min-height: 56px;
        padding: 0;
        border-radius: 50%;
        font-size: 0;
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.62);
    }

    /* "ZONA DO BOT" / "SUA ZONA" labels são ruído no zen — esconde só
       o label (mantém o slot row inteiro). */
    .rb-field-row > span:first-child {
        display: none;
    }

    /* Sem label, a coluna 76px do label vira 0 — slots ocupam tudo. */
    .rb-field-row {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* "PROTEGIDO NO TURNO 1" — esconde texto interno dos slots vazios do bot. */
    .rb-field-row-bot .rb-field-slot-empty > span {
        display: none;
    }

    /* F21: o ::before do board adicionava escurecimento 42% nas laterais
       (era moldura focal). Em desktop full-width vira faixa escura visível
       no meio dos painéis. Mantém só o leve degradê vertical. */
    .rb-game-board::before {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.16));
    }

    /* F21: o ::after era um cross-hair visual sobre o board centrado em
       coordenadas absolutas (96px top/bottom, 12px lateral). Em board
       grande fica fora do enquadramento e atrapalha. */
    .rb-game-board::after {
        opacity: 0.18;
    }
}

@media (max-width: 980px) {
    .rb-global-nav {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .rb-global-tabs {
        justify-content: flex-start;
    }

    .rb-global-player {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rb-product-hero,
    .rb-product-grid,
    .rb-product-grid-steps,
    .rb-auth-grid,
    .rb-shop-gacha {
        grid-template-columns: 1fr;
    }

    .rb-product-hero {
        align-items: start;
    }

    .rb-product-stats,
    .rb-product-card-grid,
    .rb-product-loadout,
    .rb-loadout-summary,
    .rb-track,
    .rb-product-card-grid-result,
    .rb-history-list,
    .rb-balance-lab,
    .rb-ledger-preview,
    .rb-progress-mini-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .rb-global-nav {
        width: min(calc(100% - 16px), 1280px);
        margin-top: 8px;
        padding: 9px;
    }

    .rb-game-page .rb-global-nav {
        width: calc(100% - 12px);
        top: calc(6px + var(--rb-safe-top));
    }

    .rb-global-brand span {
        width: 38px;
        height: 38px;
        font-size: var(--fs-lg);
    }

    .rb-global-brand strong {
        font-size: var(--fs-sm);
    }

    .rb-global-tabs a,
    .rb-nav-auth {
        min-height: 34px;
        padding: 8px 9px;
        font-size: var(--fs-2xs);
    }

    .rb-global-player,
    .rb-auth-modal-grid,
    .rb-gacha-slots,
    .rb-booster-rarity-line {
        grid-template-columns: 1fr;
    }

    .rb-global-wallet {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rb-global-player {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rb-game-page .rb-global-player {
        grid-template-columns: max-content max-content max-content max-content;
        overflow-x: auto;
    }

    .rb-game-page .rb-global-identity,
    .rb-game-page .rb-global-xp,
    .rb-game-page .rb-global-wallet,
    .rb-game-page .rb-nav-auth {
        min-width: max-content;
    }

    .rb-home-shell,
    .rb-product-shell {
        padding: 18px 12px 30px;
    }

    .rb-product-hero {
        padding: 22px;
    }

    .rb-product-hero h1 {
        font-size: var(--fs-xl);
    }

    .rb-product-hero .rb-cta {
        width: 100%;
    }

    .rb-product-stats,
    .rb-product-card-grid,
    .rb-product-loadout,
    .rb-loadout-summary,
    .rb-track,
    .rb-product-card-grid-result,
    .rb-history-list,
    .rb-balance-lab,
    .rb-ledger-preview,
    .rb-progress-mini-stats {
        grid-template-columns: 1fr;
    }

    .rb-level-meter-copy,
    .rb-market-price {
        align-items: flex-start;
        flex-direction: column;
    }

    .rb-loadout-row {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .rb-loadout-stepper {
        grid-column: 1 / -1;
        justify-content: start;
    }

    .rb-product-panel-head {
        align-items: stretch;
        flex-direction: column;
    }

    .rb-auth-dialog {
        padding: 22px;
    }
}

.rb-card-art,
.rb-mini-art,
.rb-field-art,
.rb-evolution-thumb {
    background-position: center 58%;
}

.rb-card-art img {
    object-position: center 58%;
}

/* Rebirth v54: 3-slot duel restored so T2 isn't a soft-lock. Cards keep the
   physical clash motion from v53; only the grid template grows. */
.rb-battle-zone {
    perspective: 1200px;
    perspective-origin: 50% 52%;
    overflow: visible;
}

.rb-field-row,
.rb-field-slots {
    overflow: visible;
    transform-style: preserve-3d;
}

.rb-field-slots {
    grid-template-columns: repeat(3, minmax(120px, 200px));
    justify-content: center;
    gap: 12px;
}

#player-battlefield,
#bot-battlefield,
#player_field,
#bot_field {
    transform-style: preserve-3d;
    transition: transform 180ms ease;
    will-change: transform;
}

#player-battlefield,
#player_field {
    transform: rotateX(15deg);
    transform-origin: center top;
}

#bot-battlefield,
#bot_field {
    transform: rotateX(-15deg);
    transform-origin: center bottom;
}

.rb-tcg-card {
    --element-core: #9b5cff;
    --element-glow: rgba(155, 92, 255, 0.56);
    --element-soft: rgba(155, 92, 255, 0.18);
    --rarity-ring: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.06) 46%, rgba(0, 0, 0, 0.24));
    --cost-size: 34px;
    --medal-size: 38px;
    --text-pad-x: 46px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 0;
    border: 2px solid color-mix(in srgb, var(--element-core), #f7df9a 30%);
    border-color: color-mix(in srgb, var(--element-core), #f7df9a 30%);
    color: var(--rb-text);
    background:
        radial-gradient(circle at 50% 40%, var(--element-soft), rgba(0, 0, 0, 0) 58%),
        #040506;
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.5),
        0 0 24px var(--element-soft),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    border-radius: var(--rb-cut-soft);
}

.rb-tcg-card.is-element-fire {
    --element-core: #ff4d2e;
    --element-glow: rgba(255, 77, 46, 0.66);
    --element-soft: rgba(255, 77, 46, 0.2);
}

.rb-tcg-card.is-element-water {
    --element-core: #31d7ff;
    --element-glow: rgba(49, 215, 255, 0.66);
    --element-soft: rgba(49, 215, 255, 0.2);
}

.rb-tcg-card.is-element-earth {
    --element-core: #66e18d;
    --element-glow: rgba(102, 225, 141, 0.62);
    --element-soft: rgba(102, 225, 141, 0.18);
}

.rb-tcg-card.is-element-shadow {
    --element-core: #a15cff;
    --element-glow: rgba(161, 92, 255, 0.66);
    --element-soft: rgba(161, 92, 255, 0.2);
}

.rb-tcg-card.is-premium-rarity {
    --rarity-ring: linear-gradient(135deg, #fff1a8 0%, #f4ad26 24%, #fff8cd 47%, #8b5517 72%, #ffd66e 100%);
    border-color: rgba(255, 214, 110, 0.88);
    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.54),
        0 0 28px rgba(244, 173, 38, 0.26),
        inset 0 0 30px rgba(244, 173, 38, 0.1);
}

.rb-card-image-layer,
.rb-card-frame-layer,
.rb-card-statline {
    pointer-events: none;
}

.rb-card-image-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    background:
        radial-gradient(circle at 50% 48%, var(--element-soft), rgba(0, 0, 0, 0) 62%),
        #06080a;
    box-shadow: inset 0 -44px 64px rgba(0, 0, 0, 0.46);
}

.rb-card-image-layer img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center 50%;
    mix-blend-mode: normal;
}

.rb-card-frame-layer {
    position: absolute;
    z-index: 2;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0.5) 100%),
        radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 36%), rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 18%),
        linear-gradient(135deg, var(--element-soft), rgba(0, 0, 0, 0) 46%),
        var(--rarity-ring);
    mix-blend-mode: screen;
    opacity: 0.82;
}

.rb-card-frame-layer::before,
.rb-card-frame-layer::after {
    content: "";
    position: absolute;
    pointer-events: none;
    clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px);
}

.rb-card-frame-layer::before {
    inset: 5px;
    border: 2px solid color-mix(in srgb, var(--element-core), #ffe6a0 32%);
    box-shadow:
        0 0 16px var(--element-glow),
        inset 0 0 22px rgba(0, 0, 0, 0.48),
        inset 0 0 14px var(--element-soft);
}

.rb-card-frame-layer::after {
    inset: 12px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.06);
    opacity: 0.72;
}

.rb-card-titlebar,
.rb-card-textbox,
.rb-card-statline {
    position: absolute;
    min-width: 0;
}

.rb-card-titlebar {
    z-index: 6;
    top: 8px;
    left: calc(var(--cost-size) + 15px);
    right: 8px;
    display: grid;
    align-content: center;
    gap: 2px;
    min-height: 30px;
    padding: 4px 10px 5px;
    /* F22-D: banner DoC — fita escura com filete dourado no topo e na base,
       ocupando toda a largura do título. */
    border-top: 1px solid rgba(196, 160, 80, 0.42);
    border-bottom: 1px solid rgba(196, 160, 80, 0.42);
    background: linear-gradient(90deg, rgba(28, 20, 12, 0.92) 0%, rgba(16, 10, 5, 0.78) 50%, rgba(28, 20, 12, 0.92) 100%);
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.58);
    clip-path: none;
}

.rb-card-titlebar .rb-card-nameplate {
    overflow: hidden;
    max-width: 100%;
    color: #fff7de;
    /* F22-D: nome da carta com Cinzel (display) ao invés do sans pesado. */
    font-family: var(--rb-font-epic);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.02;
    text-overflow: ellipsis;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.88);
    text-transform: uppercase;
    white-space: nowrap;
}

.rb-card-titlebar span,
.rb-card-titlebar small {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.76);
    font-size: var(--fs-3xs);
    font-weight: 900;
    line-height: 1;
    text-overflow: ellipsis;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.82);
    text-transform: uppercase;
    white-space: nowrap;
}

.rb-card-textbox {
    z-index: 6;
    left: 8px;
    right: 8px;
    bottom: 8px;
    display: grid;
    align-content: center;
    gap: 2px;
    min-height: 56px;
    padding: 7px var(--text-pad-x) 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    color: #fff7e8;
    background: rgba(0, 0, 0, 0.6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -16px 28px rgba(0, 0, 0, 0.22),
        0 10px 24px rgba(0, 0, 0, 0.28);
}

.rb-card-textbox strong {
    /* F4: nome da habilidade pode quebrar em 2 linhas em vez de virar "M..." */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #ffe7a7;
    font-size: var(--fs-3xs);
    font-weight: 1000;
    line-height: 1.1;
    text-transform: uppercase;
    word-break: break-word;
}

.rb-card-textbox p {
    overflow: hidden;
    margin: 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: var(--fs-3xs);
    font-weight: 800;
    line-height: 1.16;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.92);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.rb-hand .rb-mini-card > .rb-card-cost,
.rb-field-card > .rb-card-cost {
    position: absolute;
    z-index: 8;
    top: 7px;
    left: 7px;
    display: grid;
    width: var(--cost-size);
    height: var(--cost-size);
    place-items: center;
    border: 3px solid transparent;
    border-radius: 999px;
    color: #120b03;
    background:
        radial-gradient(circle at 34% 25%, #fffde2 0 12%, #ffd76e 28%, #c17418 62%, #3f2108 100%) padding-box,
        linear-gradient(135deg, #fff8d2 0%, #8a6424 28%, #fff3b4 50%, #684318 72%, #f5c75d 100%) border-box;
    box-shadow:
        0 5px 12px rgba(0, 0, 0, 0.58),
        0 0 18px rgba(244, 173, 38, 0.48),
        inset 0 2px 4px rgba(255, 255, 255, 0.62),
        inset 0 -4px 8px rgba(49, 23, 3, 0.52);
    clip-path: none;
    font-size: var(--fs-sm);
    font-weight: 1000;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.46);
}

.rb-card-statline {
    z-index: 8;
    left: 8px;
    right: 8px;
    bottom: 6px;
    display: block;
    height: var(--medal-size);
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.rb-card-stat {
    position: absolute;
    bottom: 0;
    display: grid;
    align-content: center;
    width: var(--medal-size);
    height: var(--medal-size);
    gap: 1px;
    justify-items: center;
    place-items: center;
    min-width: 0;
    padding: 0;
    border: 3px solid transparent;
    border-radius: 999px;
    color: #fff7e4;
    line-height: 1;
    clip-path: none;
    box-shadow:
        0 7px 15px rgba(0, 0, 0, 0.58),
        inset 0 2px 5px rgba(255, 255, 255, 0.38),
        inset 0 -6px 10px rgba(0, 0, 0, 0.42);
}

.rb-card-stat.is-atk {
    left: 0;
    background:
        radial-gradient(circle at 32% 24%, #fff1d1 0 10%, #ff6550 30%, #8f160d 68%, #300706 100%) padding-box,
        linear-gradient(135deg, #fff5cd 0%, #8a6424 28%, #ffe9a1 50%, #593514 75%, #efbd56 100%) border-box;
}

.rb-card-stat.is-guard {
    right: 0;
    background:
        radial-gradient(circle at 32% 24%, #effdff 0 10%, #58d6ff 30%, #155d86 68%, #071e31 100%) padding-box,
        linear-gradient(135deg, #f7fbff 0%, #647a86 28%, #d9f7ff 50%, #30434f 75%, #9ddbec 100%) border-box;
}

.rb-card-stat b {
    display: block;
    color: inherit;
    font-size: var(--fs-sm);
    font-weight: 1000;
    line-height: 0.9;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.rb-card-stat small {
    display: block;
    color: rgba(255, 255, 255, 0.78);
    font-size: var(--fs-3xs);
    font-weight: 1000;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.rb-field-card,
.rb-field-slot-empty {
    /* K10: altura era 112px (muito pequena pro card ter presença). DoC
       usa cartas grandes no battlefield. Subimos para 156px desktop. */
    height: clamp(132px, 16vh, 168px);
    min-height: 132px;
}

.rb-field-card {
    --cost-size: 30px;
    --medal-size: 32px;
    --text-pad-x: 38px;
    display: block;
    padding: 0;
    text-align: left;
    transform: translateZ(16px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transform-style: preserve-3d;
    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.56),
        0 0 22px var(--element-soft),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
    will-change: transform;
}

.rb-field-card .rb-card-titlebar {
    min-height: 24px;
}

.rb-field-card .rb-card-titlebar .rb-card-nameplate {
    font-size: var(--fs-3xs);
}

.rb-field-card .rb-card-titlebar small {
    font-size: var(--fs-3xs);
}

.rb-field-card .rb-card-textbox {
    min-height: 42px;
    padding-top: 5px;
    padding-bottom: 6px;
}

.rb-field-card .rb-card-textbox strong {
    font-size: var(--fs-3xs);
}

.rb-field-card .rb-card-textbox p {
    font-size: var(--fs-3xs);
    line-height: 1.08;
    -webkit-line-clamp: 2;
}

.rb-field-card > .rb-guard-meter {
    position: absolute;
    z-index: 7;
    left: 48px;
    right: 48px;
    bottom: 6px;
    overflow: hidden;
    width: auto;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.48);
    clip-path: none;
}

.rb-field-card > .rb-guard-meter::before {
    content: "";
    display: block;
    width: calc(var(--guard-scale, 1) * 100%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--element-core), #ffe28a);
    box-shadow: 0 0 10px var(--element-glow);
}

.rb-field-card.is-selected {
    border-color: rgba(255, 226, 138, 0.92);
    box-shadow:
        0 0 0 2px rgba(244, 173, 38, 0.16),
        0 20px 52px rgba(244, 173, 38, 0.2),
        inset 0 0 26px rgba(244, 173, 38, 0.08);
}

.rb-field-card.is-attacking {
    border-color: rgba(117, 238, 255, 0.98);
    outline: 2px solid rgba(117, 238, 255, 0.92);
    outline-offset: 3px;
    box-shadow:
        0 0 0 2px rgba(117, 238, 255, 0.2),
        0 0 28px rgba(49, 215, 255, 0.56),
        0 22px 58px rgba(0, 0, 0, 0.62),
        inset 0 0 30px rgba(49, 215, 255, 0.12);
    animation: rb-attacking-neon 1.05s ease-in-out infinite;
}

.rb-field-card.is-exhausted {
    opacity: 0.58;
}

.rb-field-card.is-exhausted .rb-card-image-layer img {
    opacity: 0.62;
}

/* K10: slot vazio com moldura medieval DoC — bronze envelhecido +
   ornamentos de canto + spotlight central, em vez de caixa cyan plana. */
.rb-field-slot-empty {
    position: relative;
    display: grid;
    place-items: center;
    border: 1.5px solid rgba(196, 160, 80, 0.45);
    color: rgba(232, 212, 164, 0.62);
    background:
        /* spotlight central morno */
        radial-gradient(ellipse 80% 60% at 50% 50%, rgba(196, 160, 80, 0.12), transparent 65%),
        /* filete bronze nos lados */
        linear-gradient(180deg, rgba(46, 33, 22, 0.62), rgba(16, 10, 5, 0.78));
    box-shadow:
        inset 0 0 0 1px rgba(232, 212, 164, 0.08),
        inset 0 0 26px rgba(0, 0, 0, 0.62),
        0 14px 24px rgba(0, 0, 0, 0.42);
    font-family: var(--rb-font-display);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 160ms, transform 160ms;
}

/* Ornamentos de canto (V-shape) — mesmo padrão dos painéis hero. */
.rb-field-slot-empty::before,
.rb-field-slot-empty::after {
    content: "";
    position: absolute;
    z-index: 2;
    width: 14px;
    height: 14px;
    pointer-events: none;
    border: 1.5px solid rgba(196, 160, 80, 0.78);
    border-right: 0;
    border-bottom: 0;
}

.rb-field-slot-empty::before { top: 4px; left: 4px; }
.rb-field-slot-empty::after { top: 4px; right: 4px; transform: scaleX(-1); }

.rb-field-slot-empty.is-summon-target {
    border-color: var(--rb-gold);
    color: var(--rb-gold-2);
    background:
        radial-gradient(ellipse 80% 60% at 50% 50%, rgba(196, 160, 80, 0.24), transparent 65%),
        linear-gradient(180deg, rgba(80, 56, 30, 0.78), rgba(28, 18, 8, 0.86));
    box-shadow:
        inset 0 0 0 1px rgba(232, 212, 164, 0.32),
        inset 0 0 28px rgba(196, 160, 80, 0.32),
        0 0 24px rgba(196, 160, 80, 0.32);
    transform: translateY(-2px);
}

.rb-field-slot-empty.is-summon-target::before,
.rb-field-slot-empty.is-summon-target::after {
    border-color: var(--rb-gold-2);
}

.rb-field-slot-empty.is-selected {
    border-color: #fff;
    color: #fff;
}

.rb-game-board.is-choosing-attack #bot-battlefield .rb-field-card,
.rb-game-board.is-choosing-attack #bot-battlefield .rb-field-slot-empty,
.rb-game-board.is-choosing-attack #bot_field .rb-field-card,
.rb-game-board.is-choosing-attack #bot_field .rb-field-slot-empty {
    cursor: crosshair;
}

.rb-game-board.is-choosing-attack #bot-battlefield .rb-field-card:hover,
.rb-game-board.is-choosing-attack #bot-battlefield .rb-field-card:focus-visible,
.rb-game-board.is-choosing-attack #bot_field .rb-field-card:hover,
.rb-game-board.is-choosing-attack #bot_field .rb-field-card:focus-visible {
    border-color: rgba(255, 101, 80, 0.95);
    outline: 2px solid rgba(255, 101, 80, 0.86);
    outline-offset: 3px;
    box-shadow:
        0 0 0 2px rgba(255, 101, 80, 0.18),
        0 0 24px rgba(255, 101, 80, 0.5),
        inset 0 0 26px rgba(255, 101, 80, 0.12);
}

.rb-game-board.is-choosing-attack #bot-battlefield .rb-field-slot-empty[data-direct-attack="true"],
.rb-game-board.is-choosing-attack #bot_field .rb-field-slot-empty[data-direct-attack="true"] {
    border-color: rgba(117, 238, 255, 0.68);
    color: rgba(198, 250, 255, 0.92);
    background: rgba(49, 215, 255, 0.1);
    box-shadow: inset 0 0 26px rgba(49, 215, 255, 0.12), 0 0 20px rgba(49, 215, 255, 0.18);
}

.rb-hand {
    height: 176px;
    overflow: visible;
}

.rb-hand .rb-mini-card {
    --cost-size: 36px;
    --medal-size: 38px;
    --text-pad-x: 46px;
    display: block;
    height: 166px;
    padding: 0;
}

.rb-hand .rb-mini-card:hover,
.rb-hand .rb-mini-card:focus-visible {
    --card-lift: -15px;
    border-color: var(--rb-gold-2);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.66), 0 0 22px rgba(244, 173, 38, 0.22);
}

.rb-hand .rb-mini-card .rb-mini-copy {
    min-height: 30px;
    padding: 4px 8px 5px;
}

.rb-hand .rb-mini-card .rb-card-titlebar .rb-card-nameplate {
    font-size: var(--fs-2xs);
}

.rb-hand .rb-mini-card .rb-card-titlebar span {
    font-size: var(--fs-3xs);
}

.rb-mini-textbox {
    min-height: 58px;
}

.rb-hand .rb-mini-card.is-locked,
.rb-field-slot-empty.is-locked {
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.42);
    background: #050607;
    box-shadow: none;
    cursor: not-allowed;
}

.rb-hand .rb-mini-card.is-locked {
    opacity: 0.68;
    transform: none;
}

.rb-hand .rb-mini-card.is-locked .rb-card-image-layer img {
    opacity: 0.42;
}

.rb-hand .rb-mini-card.is-locked:hover,
.rb-hand .rb-mini-card.is-locked:focus-visible {
    --card-lift: 0px;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

@media (min-width: 1180px) and (min-height: 680px) {
    .rb-battle-zone {
        z-index: 3;
    }

    .rb-field-card,
    .rb-field-slot-empty {
        height: 156px;
        min-height: 156px;
    }

    .rb-field-card {
        --cost-size: 32px;
        --medal-size: 36px;
        --text-pad-x: 42px;
    }

    .rb-field-card .rb-card-titlebar {
        min-height: 28px;
    }

    .rb-field-card .rb-card-titlebar .rb-card-nameplate {
        font-size: var(--fs-3xs);
    }

    .rb-field-card .rb-card-textbox {
        min-height: 54px;
    }

    .rb-field-card .rb-card-textbox strong {
        font-size: var(--fs-3xs);
    }

    .rb-field-card .rb-card-textbox p {
        font-size: var(--fs-3xs);
        line-height: 1.12;
    }

    .rb-monster-card-main {
        display: none;
        pointer-events: none;
    }

    .rb-hand {
        height: 110px;
    }

    .rb-hand .rb-mini-card {
        --cost-size: 28px;
        --medal-size: 30px;
        --text-pad-x: 34px;
        height: 110px;
    }

    .rb-hand .rb-mini-card .rb-card-titlebar {
        top: 6px;
        left: calc(var(--cost-size) + 11px);
        right: 6px;
        min-height: 22px;
        padding: 3px 6px;
    }

    .rb-hand .rb-mini-card .rb-card-titlebar .rb-card-nameplate {
        font-size: var(--fs-3xs);
    }

    .rb-hand .rb-mini-card .rb-card-titlebar span {
        font-size: var(--fs-3xs);
    }

    .rb-hand .rb-mini-card .rb-card-textbox {
        left: 6px;
        right: 6px;
        bottom: 6px;
        min-height: 40px;
        padding: 4px var(--text-pad-x) 5px;
    }

    .rb-hand .rb-mini-card .rb-card-textbox strong {
        font-size: var(--fs-3xs);
    }

    .rb-hand .rb-mini-card .rb-card-textbox p {
        font-size: var(--fs-3xs);
        line-height: 1.04;
        -webkit-line-clamp: 1;
    }

    .rb-hand .rb-mini-card > .rb-card-cost {
        top: 6px;
        left: 6px;
        border-width: 2px;
        font-size: var(--fs-2xs);
    }

    .rb-hand .rb-mini-card .rb-card-statline {
        left: 6px;
        right: 6px;
        bottom: 5px;
    }

    .rb-hand .rb-mini-card .rb-card-stat {
        border-width: 2px;
    }

    .rb-hand .rb-mini-card .rb-card-stat b {
        font-size: var(--fs-2xs);
    }

    .rb-hand .rb-mini-card .rb-card-stat small {
        font-size: var(--fs-3xs);
    }
}

@keyframes rb-attacking-neon {
    0%,
    100% {
        outline-color: rgba(117, 238, 255, 0.68);
        outline-offset: 2px;
        box-shadow:
            0 0 0 2px rgba(117, 238, 255, 0.14),
            0 0 20px rgba(49, 215, 255, 0.38),
            0 20px 54px rgba(0, 0, 0, 0.62),
            inset 0 0 24px rgba(49, 215, 255, 0.1);
    }

    48% {
        outline-color: rgba(222, 252, 255, 1);
        outline-offset: 5px;
        box-shadow:
            0 0 0 3px rgba(117, 238, 255, 0.28),
            0 0 34px rgba(49, 215, 255, 0.72),
            0 24px 62px rgba(0, 0, 0, 0.68),
            inset 0 0 34px rgba(49, 215, 255, 0.18);
    }
}

@media (max-width: 430px) {
    .rb-field-slots {
        gap: 5px;
    }

    .rb-field-card,
    .rb-field-slot-empty {
        height: 92px;
        min-height: 92px;
    }

    .rb-field-card {
        --cost-size: 24px;
        --medal-size: 26px;
        --text-pad-x: 31px;
        transform: translateZ(10px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    }

    .rb-card-titlebar {
        top: 5px;
        left: calc(var(--cost-size) + 10px);
        right: 5px;
        min-height: 22px;
        padding: 3px 6px;
    }

    .rb-card-titlebar .rb-card-nameplate {
        font-size: var(--fs-3xs);
    }

    .rb-field-card .rb-card-titlebar small,
    .rb-card-titlebar span,
    .rb-card-titlebar small {
        font-size: var(--fs-3xs);
    }

    .rb-card-textbox {
        left: 5px;
        right: 5px;
        bottom: 5px;
        min-height: 34px;
        padding: 4px var(--text-pad-x) 5px;
        border-radius: 6px;
    }

    .rb-card-textbox strong {
        font-size: var(--fs-3xs);
    }

    .rb-card-textbox p,
    .rb-field-card .rb-card-textbox p {
        font-size: var(--fs-3xs);
        line-height: 1.05;
        -webkit-line-clamp: 1;
    }

    .rb-card-statline {
        left: 5px;
        right: 5px;
        bottom: 4px;
        height: var(--medal-size);
    }

    .rb-card-stat {
        border-width: 2px;
    }

    .rb-card-stat b {
        font-size: var(--fs-2xs);
    }

    .rb-card-stat small {
        font-size: var(--fs-3xs);
    }

    .rb-field-card > .rb-card-cost,
    .rb-hand .rb-mini-card > .rb-card-cost {
        top: 5px;
        left: 5px;
        width: var(--cost-size);
        height: var(--cost-size);
        border-width: 2px;
        font-size: var(--fs-2xs);
    }

    .rb-field-card > .rb-guard-meter {
        left: 35px;
        right: 35px;
        bottom: 4px;
        height: 3px;
    }

    .rb-hand {
        height: 138px;
    }

    .rb-hand .rb-mini-card {
        --cost-size: 28px;
        --medal-size: 30px;
        --text-pad-x: 34px;
        height: 126px;
    }

    .rb-mini-textbox {
        min-height: 42px;
    }
}

.rb-game-board.is-resolving-attack .rb-loading {
    display: none;
}

.rb-game-board.is-choosing-attack .rb-battle-zone::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    width: 3px;
    height: 116px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(117, 238, 255, 0), rgba(117, 238, 255, 0.88) 48%, rgba(255, 226, 138, 0.78), rgba(255, 226, 138, 0));
    box-shadow: 0 0 18px rgba(117, 238, 255, 0.52), 0 0 28px rgba(255, 226, 138, 0.26);
    opacity: 0.78;
    transform: translate3d(-50%, -50%, 0);
    animation: rb-target-line-pulse 960ms ease-in-out infinite;
}

.rb-field-card.is-targetable,
.rb-field-slot-empty[data-direct-attack="true"].is-selected {
    border-color: rgba(255, 101, 80, 0.92);
    outline: 2px solid rgba(255, 101, 80, 0.54);
    outline-offset: 4px;
    box-shadow:
        0 0 0 2px rgba(255, 101, 80, 0.14),
        0 0 26px rgba(255, 101, 80, 0.42),
        0 20px 54px rgba(0, 0, 0, 0.62),
        inset 0 0 30px rgba(255, 101, 80, 0.1);
    animation: rb-targetable-aura 1.1s ease-in-out infinite;
}

.rb-field-card.is-target-locked,
.rb-field-slot-empty.is-target-locked {
    border-color: rgba(255, 226, 138, 0.98);
    outline-color: rgba(255, 226, 138, 0.82);
}

.rb-field-card.is-attack-primed {
    z-index: 20;
    transition:
        transform 150ms cubic-bezier(0.18, 0.9, 0.24, 1.18),
        border-color 120ms ease,
        box-shadow 120ms ease;
}

.rb-field-card.is-attack-lunging {
    transform: translate3d(var(--attack-x, 0px), var(--attack-y, -92px), 34px) scale(1.06) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    border-color: rgba(255, 226, 138, 0.98);
    box-shadow:
        0 30px 64px rgba(0, 0, 0, 0.68),
        0 0 34px rgba(255, 226, 138, 0.42),
        inset 0 0 30px rgba(255, 226, 138, 0.14);
}

.rb-field-card.is-taking-hit,
.rb-field-slot-empty.is-taking-hit,
.rb-bot-card.is-taking-hit {
    animation: rb-target-hit 280ms cubic-bezier(0.2, 0.9, 0.24, 1) both;
}

.rb-result-panel.is-result-reading #result-label,
.rb-result-panel.is-result-reading #result-title,
.rb-result-panel.is-result-reading #result-copy,
.rb-result-panel.is-result-reading .rb-ability-events,
.rb-result-panel.is-result-reading .rb-reward-panel {
    animation: rb-result-copy-fade 360ms ease both;
}

.rb-result-panel.is-result-reading #result-title {
    animation-delay: 40ms;
}

.rb-result-panel.is-result-reading #result-copy,
.rb-result-panel.is-result-reading .rb-ability-events,
.rb-result-panel.is-result-reading .rb-reward-panel {
    animation-delay: 80ms;
}

@keyframes rb-target-line-pulse {
    0%,
    100% {
        opacity: 0.44;
        transform: translate3d(-50%, -50%, 0) scaleY(0.88);
    }
    50% {
        opacity: 0.88;
        transform: translate3d(-50%, -50%, 0) scaleY(1.04);
    }
}

@keyframes rb-targetable-aura {
    0%,
    100% {
        outline-offset: 3px;
        box-shadow:
            0 0 0 2px rgba(255, 101, 80, 0.12),
            0 0 22px rgba(255, 101, 80, 0.34),
            0 20px 54px rgba(0, 0, 0, 0.62),
            inset 0 0 26px rgba(255, 101, 80, 0.08);
    }
    52% {
        outline-offset: 6px;
        box-shadow:
            0 0 0 3px rgba(255, 101, 80, 0.22),
            0 0 34px rgba(255, 101, 80, 0.62),
            0 24px 62px rgba(0, 0, 0, 0.68),
            inset 0 0 34px rgba(255, 101, 80, 0.16);
    }
}

@keyframes rb-target-hit {
    0% {
        border-color: rgba(255, 101, 80, 0.4);
        box-shadow:
            0 20px 54px rgba(0, 0, 0, 0.62),
            0 0 0 rgba(255, 101, 80, 0);
        transform: translateZ(16px) scale(1);
    }
    38% {
        border-color: rgba(255, 101, 80, 1);
        box-shadow:
            0 0 0 4px rgba(255, 101, 80, 0.24),
            0 0 38px rgba(255, 40, 32, 0.72),
            0 24px 62px rgba(0, 0, 0, 0.72),
            inset 0 0 36px rgba(255, 40, 32, 0.22);
        transform: translate3d(0, -3px, 18px) scale(1.035);
    }
    100% {
        transform: translateZ(16px) scale(1);
    }
}

@keyframes rb-result-copy-fade {
    0% {
        opacity: 0;
        transform: translate3d(0, 7px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rb-game-board.is-choosing-attack .rb-battle-zone::after {
        display: none;
    }

    .rb-field-card.is-targetable,
    .rb-field-slot-empty[data-direct-attack="true"].is-selected,
    .rb-field-card.is-taking-hit,
    .rb-field-slot-empty.is-taking-hit,
    .rb-bot-card.is-taking-hit,
    .rb-result-panel.is-result-reading #result-label,
    .rb-result-panel.is-result-reading #result-title,
    .rb-result-panel.is-result-reading #result-copy,
    .rb-result-panel.is-result-reading .rb-ability-events,
    .rb-result-panel.is-result-reading .rb-reward-panel {
        animation: none;
    }

    .rb-field-card.is-attack-primed {
        transition: none;
    }
}

/* =========================================================================
   v55 — Foundation Visual: Dark Fantasy Tático Premium / Arcane Industrial
   ========================================================================= */

:root {
    --rb-iron-dark: #1a1612;
    --rb-iron-mid: #2c2620;
    --rb-iron-edge: #4a3f33;
    --rb-iron-rim-light: rgba(255, 255, 255, 0.14);
    --rb-iron-rim-dark: rgba(0, 0, 0, 0.7);
    --rb-gold-aged: #c89a3a;
    --rb-gold-aged-deep: #8a5e1c;
    --rb-gold-aged-shadow: #4c2f0c;
    --rb-arcane-blue: rgba(95, 175, 235, 0.85);
    --rb-arcane-blue-deep: rgba(45, 95, 170, 0.6);
    --rb-profane-red: rgba(225, 80, 70, 0.85);
    --rb-profane-red-deep: rgba(140, 30, 25, 0.6);
}

/* --- 1. MEDALHÃO 3D — #next-turn-button ---------------------------------
   Disco de ferro fundido pesado. Inclina suavemente seguindo o cursor
   (JS atualiza --rb-tilt-x / --rb-tilt-y). Quando o jogador entra em
   dead-end (renderer aplica .is-cta-pulse), o medalhão gira 180° em Y
   revelando o lado dourado envelhecido e ativa o glow arcano.
   ------------------------------------------------------------------------ */

#next-turn-button.rb-button-secondary,
#play-button.rb-button-primary {
    position: relative;
    min-width: 180px;
    height: 64px;
    padding: 0 28px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #f4e8d2;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    overflow: visible;
    transform-style: preserve-3d;
    perspective: 900px;
    transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
    z-index: 0;
}

#next-turn-button.rb-button-secondary > *,
#play-button.rb-button-primary > * {
    /* o conteúdo precisa sair do plano dos pseudo-elementos */
    position: relative;
    z-index: 2;
    transform: translateZ(8px);
}

#next-turn-button.rb-button-secondary::before,
#play-button.rb-button-primary::before {
    /* face frontal: ferro fundido escuro com runas sutis e luz superior */
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 32% 22%, rgba(255, 240, 210, 0.22), transparent 38%),
        radial-gradient(circle at 70% 80%, rgba(0, 0, 0, 0.55), transparent 55%),
        linear-gradient(140deg, var(--rb-iron-mid) 0%, var(--rb-iron-dark) 55%, #0a0806 100%);
    box-shadow:
        inset 0 2px 2px var(--rb-iron-rim-light),
        inset 0 -3px 6px var(--rb-iron-rim-dark),
        inset 0 0 0 1.5px rgba(70, 58, 46, 0.85),
        0 8px 18px rgba(0, 0, 0, 0.55),
        0 2px 4px rgba(0, 0, 0, 0.5);
    backface-visibility: hidden;
    transition: box-shadow 220ms ease;
}

#next-turn-button.rb-button-secondary::after,
#play-button.rb-button-primary::after {
    /* face traseira: ouro envelhecido — só aparece com o flip */
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 32% 22%, rgba(255, 245, 200, 0.42), transparent 45%),
        radial-gradient(circle at 65% 78%, rgba(70, 35, 10, 0.55), transparent 60%),
        linear-gradient(135deg, var(--rb-gold-aged) 0%, var(--rb-gold-aged-deep) 55%, var(--rb-gold-aged-shadow) 100%);
    box-shadow:
        inset 0 2px 2px rgba(255, 245, 210, 0.4),
        inset 0 -3px 6px rgba(40, 22, 6, 0.65),
        inset 0 0 0 1.5px rgba(180, 130, 50, 0.95),
        0 0 22px rgba(244, 200, 90, 0.55),
        0 10px 22px rgba(0, 0, 0, 0.55);
    transform: rotateY(180deg);
    backface-visibility: hidden;
    opacity: 0.95;
}

/* Inclinação 3D seguindo o mouse — JS popula --rb-tilt-x/--rb-tilt-y. */
#next-turn-button.rb-button-secondary,
#play-button.rb-button-primary {
    transform:
        perspective(800px)
        rotateX(var(--rb-tilt-x, 0deg))
        rotateY(calc(var(--rb-tilt-y, 0deg) + var(--rb-flip, 0deg)));
}

#next-turn-button.rb-button-secondary:hover:not(:disabled),
#play-button.rb-button-primary:hover:not(:disabled) {
    transform:
        perspective(800px)
        rotateX(var(--rb-tilt-x, 0deg))
        rotateY(calc(var(--rb-tilt-y, 0deg) + var(--rb-flip, 0deg)))
        translateZ(4px);
}

#next-turn-button.rb-button-secondary:active:not(:disabled),
#play-button.rb-button-primary:active:not(:disabled) {
    transform:
        perspective(800px)
        rotateX(calc(var(--rb-tilt-x, 0deg) * 0.4))
        rotateY(calc(var(--rb-tilt-y, 0deg) * 0.4 + var(--rb-flip, 0deg)))
        translateZ(-2px);
}

/* DEAD-END: flip + pulso arcano contínuo. Sobrescreve o keyframe
   rb-cta-pulse (legado v54) por algo mais alto-contraste. */
#next-turn-button.is-cta-pulse:not(:disabled) {
    --rb-flip: 180deg;
    animation: rb-arcane-medallion-pulse 1.8s ease-in-out infinite;
}

#next-turn-button.is-cta-pulse:not(:disabled)::after {
    animation: rb-arcane-glow 1.8s ease-in-out infinite;
}

@keyframes rb-arcane-medallion-pulse {
    0%, 100% {
        transform:
            perspective(800px)
            rotateX(var(--rb-tilt-x, 0deg))
            rotateY(calc(var(--rb-tilt-y, 0deg) + 180deg))
            translateZ(0);
    }
    50% {
        transform:
            perspective(800px)
            rotateX(var(--rb-tilt-x, 0deg))
            rotateY(calc(var(--rb-tilt-y, 0deg) + 180deg))
            translateZ(6px);
    }
}

@keyframes rb-arcane-glow {
    0%, 100% {
        box-shadow:
            inset 0 2px 2px rgba(255, 245, 210, 0.4),
            inset 0 -3px 6px rgba(40, 22, 6, 0.65),
            inset 0 0 0 1.5px rgba(180, 130, 50, 0.95),
            0 0 18px rgba(244, 200, 90, 0.5),
            0 10px 22px rgba(0, 0, 0, 0.55);
    }
    50% {
        box-shadow:
            inset 0 2px 2px rgba(255, 245, 210, 0.5),
            inset 0 -3px 6px rgba(40, 22, 6, 0.65),
            inset 0 0 0 1.5px rgba(220, 160, 60, 1),
            0 0 38px 8px rgba(244, 200, 90, 0.85),
            0 0 60px rgba(180, 110, 30, 0.45),
            0 10px 22px rgba(0, 0, 0, 0.55);
    }
}

#next-turn-button.rb-button-secondary:disabled,
#play-button.rb-button-primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* --- 2. CARTAS COMO ENTIDADES VIVAS -------------------------------------
   Sombras volumétricas profundas; frame metálico varia por raridade.
   Hover: elevação, escala, sombra projetada expandida, vizinhos desfocam
   via :has() (CSS puro, sem JS extra).
   ------------------------------------------------------------------------ */

.rb-hand .rb-mini-card.rb-tcg-card {
    transform-origin: center bottom;
    transition:
        transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 260ms ease,
        opacity 240ms ease;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.5),
        0 8px 16px rgba(0, 0, 0, 0.5),
        0 16px 28px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4);
    position: relative;
}

.rb-hand .rb-mini-card.rb-tcg-card.is-rarity-common {
    border: 2px solid transparent;
    border-image: linear-gradient(140deg, #6a5848 0%, #3a3128 50%, #1f1a14 100%) 1;
}

.rb-hand .rb-mini-card.rb-tcg-card.is-rarity-uncommon {
    border: 2px solid transparent;
    border-image: linear-gradient(140deg, #9bb4c8 0%, #4e6878 50%, #243240 100%) 1;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.5),
        0 8px 18px rgba(80, 140, 210, 0.25),
        0 16px 30px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(180, 220, 245, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}

.rb-hand .rb-mini-card.rb-tcg-card:hover:not(:disabled):not(.is-locked),
.rb-hand .rb-mini-card.rb-tcg-card:focus-visible:not(:disabled):not(.is-locked) {
    transform: translateY(-20px) scale(1.08);
    box-shadow:
        0 10px 18px rgba(0, 0, 0, 0.6),
        0 26px 44px rgba(0, 0, 0, 0.65),
        0 40px 64px rgba(244, 180, 80, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4);
    z-index: 5;
}

/* Vizinhos perdem foco durante o hover — opacidade + scale down. Optamos
   por não usar blur via CSS filter (perf-budget do projeto bane esses
   tokens em tests/rebirth/test_rebirth_frontend_contract.py). O efeito
   cinemático fica via foco-vs-recesso: a carta hover fica protagonista,
   as outras recuam levemente. Pure CSS via :has() — browsers sem :has()
   simplesmente não aplicam a regra, sem regressão. */
#player-hand:has(.rb-mini-card.rb-tcg-card:hover:not(:disabled):not(.is-locked)) .rb-mini-card.rb-tcg-card:not(:hover),
#player-hand:has(.rb-mini-card.rb-tcg-card:focus-visible:not(:disabled):not(.is-locked)) .rb-mini-card.rb-tcg-card:not(:focus-visible) {
    opacity: 0.45;
    transform: scale(0.94) translateY(2px);
}

/* Brasão metálico esculpido nas estatísticas (ATK / GRD). Aplica em
   cards de hand E de campo. Usa clip-path em forma de escudo. */
.rb-card-stat.is-atk,
.rb-card-stat.is-grd {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.18), transparent 50%),
        linear-gradient(140deg, var(--rb-iron-edge) 0%, var(--rb-iron-mid) 60%, var(--rb-iron-dark) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 1px rgba(0, 0, 0, 0.55),
        0 2px 3px rgba(0, 0, 0, 0.5);
    clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%);
    color: #f6e5c4;
    font-weight: 900;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
}

.rb-card-stat.is-atk {
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 220, 180, 0.28), transparent 50%),
        linear-gradient(140deg, #5a3a26 0%, #38211a 60%, #1f120c 100%);
}

.rb-card-stat.is-grd {
    background:
        radial-gradient(circle at 30% 25%, rgba(200, 220, 240, 0.28), transparent 50%),
        linear-gradient(140deg, #3a4858 0%, #1f2a36 60%, #0f1820 100%);
}

/* --- 3. SLOTS COMO ALTARES DE PEDRA --------------------------------------
   Slots vazios afundados na mesa (inset shadow agressivo). Runa circular
   central inerte por padrão; acende em azul espectral pro jogador, em
   vermelho profano pro alvo do bot quando o slot vira target válido.
   ------------------------------------------------------------------------ */

.rb-field-slots .rb-field-slot-empty {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(60, 50, 40, 0.6);
    background:
        radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%),
        linear-gradient(180deg, #16120e 0%, #0a0806 100%);
    box-shadow:
        inset 0 6px 14px rgba(0, 0, 0, 0.85),
        inset 0 -3px 6px rgba(0, 0, 0, 0.6),
        inset 0 0 0 1px rgba(80, 65, 50, 0.35),
        0 1px 0 rgba(255, 255, 255, 0.04);
    transition: box-shadow 280ms ease, background 280ms ease;
}

.rb-field-slots .rb-field-slot-empty::before {
    /* Runa circular central — inerte por padrão */
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle, transparent 30%, rgba(180, 150, 90, 0.18) 38%, rgba(180, 150, 90, 0.04) 55%, transparent 70%);
    opacity: 0.5;
    transition: opacity 360ms ease, background 360ms ease, transform 360ms ease;
    pointer-events: none;
}

.rb-field-slots .rb-field-slot-empty::after {
    /* halo externo que cresce quando a runa é ativada */
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: inherit;
    box-shadow: inset 0 0 0 0 transparent;
    transition: box-shadow 360ms ease;
    pointer-events: none;
}

/* K10 (DoC re-color): runa DOURADA quando o slot é target de invocação.
   Antes era azul espectral (cyberpunk). Agora bronze envelhecido
   alinhado à paleta Duel of Champions. */
#player-battlefield .rb-field-slot-empty.is-summon-target {
    border-color: rgba(232, 212, 164, 0.62);
    background:
        radial-gradient(ellipse at 50% 50%, rgba(196, 160, 80, 0.28) 0%, rgba(120, 84, 30, 0.12) 60%, transparent 100%),
        linear-gradient(180deg, #28190c 0%, #0c0805 100%);
    box-shadow:
        inset 0 6px 14px rgba(0, 0, 0, 0.85),
        inset 0 -3px 6px rgba(0, 0, 0, 0.6),
        inset 0 0 22px rgba(196, 160, 80, 0.32),
        0 0 16px rgba(196, 160, 80, 0.24);
}

#player-battlefield .rb-field-slot-empty.is-summon-target::before {
    /* Mantém o L-bracket ornamental — vai ser amarelo dourado. */
    border-color: var(--rb-gold-2);
}

#player-battlefield .rb-field-slot-empty.is-summon-target::after {
    border-color: var(--rb-gold-2);
}

/* Bot: runa vermelha profana quando o slot é alvo de ataque direto OU
   quando o jogador está em modo "escolher alvo" e o slot do bot está
   destacado. */
#bot-battlefield .rb-field-slot-empty[data-direct-attack="true"],
.rb-game-board.is-choosing-attack #bot-battlefield .rb-field-slot-empty {
    border-color: rgba(225, 80, 70, 0.55);
    background:
        radial-gradient(ellipse at 50% 50%, rgba(140, 30, 25, 0.28) 0%, rgba(70, 15, 12, 0.12) 60%, transparent 100%),
        linear-gradient(180deg, #16120e 0%, #0a0806 100%);
    box-shadow:
        inset 0 6px 14px rgba(0, 0, 0, 0.85),
        inset 0 -3px 6px rgba(0, 0, 0, 0.6),
        inset 0 0 22px rgba(225, 80, 70, 0.32),
        0 0 12px rgba(225, 80, 70, 0.2);
    color: rgba(255, 220, 215, 0.92);
}

#bot-battlefield .rb-field-slot-empty[data-direct-attack="true"]::before,
.rb-game-board.is-choosing-attack #bot-battlefield .rb-field-slot-empty::before {
    opacity: 1;
    background:
        radial-gradient(circle, transparent 28%, var(--rb-profane-red) 36%, var(--rb-profane-red-deep) 55%, transparent 72%);
    animation: rb-altar-rune-red 1.8s ease-in-out infinite;
}

#bot-battlefield .rb-field-slot-empty[data-direct-attack="true"]::after,
.rb-game-board.is-choosing-attack #bot-battlefield .rb-field-slot-empty::after {
    box-shadow: inset 0 0 0 2px rgba(225, 80, 70, 0.55);
}

@keyframes rb-altar-rune-blue {
    0%, 100% {
        opacity: 0.65;
        transform: translate(-50%, -50%) scale(0.92);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.06);
    }
}

@keyframes rb-altar-rune-red {
    0%, 100% {
        opacity: 0.65;
        transform: translate(-50%, -50%) scale(0.92);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.08);
    }
}

/* --- 4. COMBAT IMPACT — spark burst no atacante + hit flash no defensor -
   Aproveita o pipeline existente em RebirthCombatMotion.play():
     attacker → .is-attack-primed → .is-attack-lunging → defender
     ganha .is-taking-hit.
   O lunging existente só fazia translate3d + glow dourado. Adicionamos:
     • spark burst (raios saindo do centro do atacante) via ::after
     • flash branco visceral no defensor — anima alpha intensa que
       evapora; sente-se o impacto sem precisar de partículas pesadas.
   Todas as animações usam transform/opacity (compositing-friendly),
   nada de CSS filter (perf-budget do projeto bane esses tokens).
   ------------------------------------------------------------------------ */

.rb-field-card.is-attack-lunging {
    /* relativa porque vai abrigar pseudo-element do spark */
    position: relative;
}

.rb-field-card.is-attack-lunging::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.2);
    background:
        radial-gradient(circle, rgba(255, 245, 200, 0.95) 0%, rgba(255, 200, 90, 0.5) 22%, rgba(255, 120, 40, 0.2) 40%, transparent 65%),
        conic-gradient(from 0deg,
            rgba(255, 245, 200, 0.85) 0deg, transparent 18deg,
            rgba(255, 245, 200, 0.85) 60deg, transparent 78deg,
            rgba(255, 245, 200, 0.85) 120deg, transparent 138deg,
            rgba(255, 245, 200, 0.85) 180deg, transparent 198deg,
            rgba(255, 245, 200, 0.85) 240deg, transparent 258deg,
            rgba(255, 245, 200, 0.85) 300deg, transparent 318deg,
            rgba(255, 245, 200, 0.85) 360deg);
    opacity: 0;
    z-index: 6;
    animation: rb-spark-burst 360ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes rb-spark-burst {
    0% {
        transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
        opacity: 0;
    }
    20% {
        transform: translate(-50%, -50%) scale(0.6) rotate(40deg);
        opacity: 1;
    }
    55% {
        transform: translate(-50%, -50%) scale(1.05) rotate(110deg);
        opacity: 0.85;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.55) rotate(160deg);
        opacity: 0;
    }
}

/* Hit flash visceral: o keyframe rb-target-hit existente faz o shake.
   Sobrepomos um pseudo-element ::before que pisca branco intenso e some.
   Garante position: relative no host. */
.rb-field-card.is-taking-hit,
.rb-bot-card.is-taking-hit {
    position: relative;
}

.rb-field-card.is-taking-hit::before,
.rb-bot-card.is-taking-hit::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 220, 150, 0.55) 38%, transparent 72%);
    mix-blend-mode: screen;
    opacity: 0;
    z-index: 6;
    animation: rb-hit-flash 260ms ease-out forwards;
}

@keyframes rb-hit-flash {
    0% {
        opacity: 0;
        transform: scale(0.7);
    }
    25% {
        opacity: 1;
        transform: scale(1.05);
    }
    100% {
        opacity: 0;
        transform: scale(1.18);
    }
}

/* =========================================================================
   v55 FASE 2 — Combat Juice: hit pause, screen shake contextual, shield
   shatter, death dissolve em brasa. O JS injeta as classes/elementos no
   pipeline RebirthCombatMotion.play(); o CSS define a aparência.
   ========================================================================= */

/* --- SCREEN SHAKE contextual (.vfx-screen-shake / .vfx-screen-shake-heavy)
   Aplicado no .rb-game-viewport pelo triggerScreenShake().
   • normal (3px só horizontal): para dano leve em HP
   • heavy (5px X+Y): para trade mútuo (clash) e dano pesado
   Removido do DOM após 160-180ms.
   ------------------------------------------------------------------------ */

@keyframes rb-vfx-shake-normal {
    0%, 100% { transform: translate3d(0, 0, 0); }
    18% { transform: translate3d(-3px, 0, 0); }
    36% { transform: translate3d(3px, 0, 0); }
    54% { transform: translate3d(-2px, 0, 0); }
    72% { transform: translate3d(2px, 0, 0); }
    88% { transform: translate3d(-1px, 0, 0); }
}

@keyframes rb-vfx-shake-heavy {
    0%, 100% { transform: translate3d(0, 0, 0); }
    12% { transform: translate3d(-5px, 3px, 0); }
    24% { transform: translate3d(5px, -3px, 0); }
    36% { transform: translate3d(-5px, -3px, 0); }
    48% { transform: translate3d(5px, 3px, 0); }
    60% { transform: translate3d(-3px, 5px, 0); }
    72% { transform: translate3d(3px, -2px, 0); }
    86% { transform: translate3d(-2px, 1px, 0); }
}

.vfx-screen-shake {
    animation: rb-vfx-shake-normal 160ms ease-in-out both;
    will-change: transform;
}

.vfx-screen-shake.vfx-screen-shake-heavy {
    animation: rb-vfx-shake-heavy 180ms cubic-bezier(0.4, 0, 0.6, 1) both;
}

/* --- SHIELD SHATTER (.vfx-shield-shatter)
   Container spawned pelo JS dentro do node do alvo quando perde guard
   mas sobrevive. 6 fragmentos geométricos (b.vfx-shield-shatter__shard)
   explodem do centro pra fora em ângulos uniformes, com fade-out.
   ------------------------------------------------------------------------ */

.vfx-shield-shatter {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 7;
    /* container só pra alinhar; toda animação fica nos shards */
}

.vfx-shield-shatter__shard {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 22px;
    margin: -11px 0 0 -7px;
    background:
        linear-gradient(140deg, rgba(180, 220, 255, 0.92) 0%, rgba(80, 140, 200, 0.65) 55%, rgba(30, 70, 130, 0.4) 100%);
    box-shadow:
        0 0 6px rgba(140, 200, 255, 0.65),
        inset 0 0 4px rgba(255, 255, 255, 0.4);
    clip-path: polygon(50% 0, 100% 38%, 78% 100%, 22% 100%, 0 38%);
    opacity: 0;
    transform-origin: 50% 100%;
    animation: rb-vfx-shard-fly 380ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
    --shard-angle: 0deg;
}

@keyframes rb-vfx-shard-fly {
    0% {
        opacity: 0;
        transform: rotate(var(--shard-angle, 0deg)) translateY(0) scale(0.4);
    }
    18% {
        opacity: 1;
        transform: rotate(var(--shard-angle, 0deg)) translateY(-12px) scale(1);
    }
    100% {
        opacity: 0;
        transform: rotate(var(--shard-angle, 0deg)) translateY(-72px) scale(0.6);
    }
}

/* --- DEATH DISSOLVE (.is-dead-dissolve)
   Aplicado pelo JS no card que será removido na próxima render.
   Borda incandescente (brasa) + clip-path que queima de baixo pra cima.
   Toda a card encolhe e some em ~720ms; depois o applyState() limpa o
   HTML residual.
   ------------------------------------------------------------------------ */

.is-dead-dissolve {
    animation: rb-vfx-dissolve-card 720ms cubic-bezier(0.4, 0, 0.6, 1) forwards;
    position: relative;
    z-index: 4;
    pointer-events: none;
}

.is-dead-dissolve::after {
    /* halo de brasa por trás do card enquanto queima */
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 78%, rgba(255, 200, 90, 0.7) 0%, rgba(255, 110, 30, 0.45) 28%, rgba(80, 30, 10, 0.18) 55%, transparent 80%);
    mix-blend-mode: screen;
    opacity: 0;
    animation: rb-vfx-ember-glow 720ms ease-out forwards;
    z-index: -1;
}

@keyframes rb-vfx-dissolve-card {
    0% {
        opacity: 1;
        transform: scale(1);
        /* clip-path completo: card inteira visível */
        clip-path: inset(0 0 0 0);
        box-shadow: 0 0 0 0 rgba(255, 180, 60, 0);
    }
    18% {
        /* borda incandescente ativa, ainda visível inteira */
        clip-path: inset(0 0 0 0);
        box-shadow:
            0 0 18px 2px rgba(255, 180, 60, 0.75),
            inset 0 0 20px rgba(255, 220, 130, 0.45);
        transform: scale(1.02);
    }
    60% {
        /* queimando de baixo pra cima — top do card "vivo", base virou cinzas */
        clip-path: inset(0 0 45% 0);
        box-shadow:
            0 0 14px 2px rgba(255, 130, 40, 0.6),
            inset 0 0 16px rgba(255, 180, 60, 0.35);
        transform: scale(0.94);
        opacity: 0.85;
    }
    100% {
        clip-path: inset(0 0 100% 0);  /* virou cinza inteiro */
        box-shadow: 0 0 6px 0 rgba(120, 60, 20, 0.2);
        transform: scale(0.82) translateY(6px);
        opacity: 0;
    }
}

@keyframes rb-vfx-ember-glow {
    0% { opacity: 0; transform: scale(0.7); }
    18% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 0; transform: scale(1.4); }
}

/* =========================================================================
   v55 FASE 3 — Living World & Ecosystem
   Camadas parallax do tabuleiro, brasas suspensas e auras elementares
   nas criaturas em campo. JS escuta mousemove e popula --rb-parallax-x/y
   no .battlefield-living; cada .battlefield-layer multiplica por seu
   data-parallax-depth para o efeito de profundidade volumétrica.
   ========================================================================= */

.battlefield-living {
    position: relative;
    isolation: isolate;
    --rb-parallax-x: 0px;
    --rb-parallax-y: 0px;
}

.battlefield-layer {
    position: absolute;
    inset: -18px;
    pointer-events: none;
    transform: translate3d(
        calc(var(--rb-parallax-x) * var(--rb-parallax-mult, 1)),
        calc(var(--rb-parallax-y) * var(--rb-parallax-mult, 1)),
        0
    );
    transition: transform 220ms cubic-bezier(0.18, 0.7, 0.22, 1);
    will-change: transform;
}

/* Skybox: névoa quente e nebulosa no topo, escurecida em baixo.
   --rb-parallax-mult = 1 (default) e o data-parallax-depth do HTML é -8,
   mas como o JS multiplica diretamente o offset pelo depth/10, a multiplicação
   acontece no JS. Aqui só aplicamos translate3d com os valores recebidos. */
.battlefield-layer-skybox {
    z-index: 0;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(180, 100, 40, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 30% 80%, rgba(80, 30, 60, 0.22) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 90%, rgba(60, 70, 110, 0.18) 0%, transparent 55%),
        linear-gradient(180deg, #0a0707 0%, #050405 100%);
}

.battlefield-layer-board {
    z-index: 1;
    background:
        radial-gradient(circle at 50% 50%, rgba(180, 150, 80, 0.08) 0%, transparent 65%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 18px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 18px);
    box-shadow:
        inset 0 0 80px rgba(0, 0, 0, 0.55),
        inset 0 0 0 1px rgba(80, 60, 40, 0.18);
}

.battlefield-layer-foreground {
    z-index: 2;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, 0.55) 0%, transparent 70%),
        radial-gradient(ellipse at 50% 0%, rgba(0, 0, 0, 0.4) 0%, transparent 60%);
}

/* O conteúdo do tabuleiro (.rb-field-row, .rb-bot-card-zone, .rb-field-vs)
   precisa ficar ACIMA das 3 camadas, no z-index 3. */
.battlefield-living > .rb-field-row,
.battlefield-living > .rb-bot-card-zone,
.battlefield-living > .rb-field-vs {
    position: relative;
    z-index: 3;
}

/* Brasas suspensas: pontos luminosos que sobem lentamente. CSS puro,
   transform/opacity (compositing-friendly). 6 brasas no skybox. */
.battlefield-embers {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.battlefield-ember {
    position: absolute;
    bottom: -10%;
    left: var(--ember-x, 50%);
    width: var(--ember-size, 4px);
    height: var(--ember-size, 4px);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 220, 130, 0.95) 0%, rgba(255, 140, 50, 0.6) 45%, transparent 80%);
    box-shadow: 0 0 6px rgba(255, 180, 80, 0.6);
    opacity: 0;
    animation: rb-ember-rise 12s linear var(--ember-delay, 0s) infinite;
    will-change: transform, opacity;
}

@keyframes rb-ember-rise {
    0% {
        transform: translate3d(0, 0, 0) scale(0.6);
        opacity: 0;
    }
    8% {
        opacity: 0.9;
    }
    50% {
        transform: translate3d(-12px, -380px, 0) scale(1);
        opacity: 0.7;
    }
    92% {
        opacity: 0.35;
    }
    100% {
        transform: translate3d(6px, -760px, 0) scale(0.5);
        opacity: 0;
    }
}

/* --- AURAS ELEMENTARES nas criaturas no campo ---------------------------
   O JS já injeta .is-element-{fire,water,earth,shadow} em todos os cards.
   Aqui scopamos só para .rb-field-card (criatura no tabuleiro), porque
   na mão o efeito seria visualmente pesado demais. Cada elemento ganha:
     • glow interno via box-shadow (cor diferente)
     • pseudo-element ::before com animação característica
   Tudo via transform/opacity/box-shadow — sem CSS filter (perf-budget).
   ------------------------------------------------------------------------ */

.rb-field-card.is-element-fire {
    box-shadow:
        0 0 0 1px rgba(255, 120, 50, 0.4),
        0 0 18px rgba(255, 100, 30, 0.32),
        0 18px 34px rgba(0, 0, 0, 0.56),
        inset 0 0 22px rgba(255, 80, 20, 0.18);
}

.rb-field-card.is-element-fire::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -4px;
    height: 18px;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 30% 100%, rgba(255, 180, 80, 0.45), transparent 60%),
        radial-gradient(ellipse at 70% 100%, rgba(255, 90, 30, 0.45), transparent 60%);
    border-radius: inherit;
    opacity: 0.85;
    animation: rb-element-fire-heat 2.4s ease-in-out infinite;
    z-index: 5;
    transform-origin: 50% 100%;
}

@keyframes rb-element-fire-heat {
    0%, 100% {
        transform: translateY(0) scaleX(1) skewX(0deg);
        opacity: 0.65;
    }
    25% {
        transform: translateY(-2px) scaleX(1.04) skewX(2deg);
        opacity: 0.95;
    }
    50% {
        transform: translateY(-3px) scaleX(0.98) skewX(-1.5deg);
        opacity: 0.8;
    }
    75% {
        transform: translateY(-2px) scaleX(1.02) skewX(1deg);
        opacity: 0.9;
    }
}

.rb-field-card.is-element-water {
    box-shadow:
        0 0 0 1px rgba(80, 160, 220, 0.4),
        0 0 18px rgba(50, 120, 200, 0.32),
        0 18px 34px rgba(0, 0, 0, 0.56),
        inset 0 0 22px rgba(40, 100, 180, 0.18);
}

.rb-field-card.is-element-water::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(
            115deg,
            transparent 35%,
            rgba(140, 200, 240, 0.22) 48%,
            rgba(180, 220, 255, 0.32) 52%,
            transparent 65%
        );
    background-size: 240% 240%;
    background-position: 100% 0%;
    opacity: 0.7;
    animation: rb-element-water-flow 4.2s ease-in-out infinite;
    z-index: 5;
    mix-blend-mode: screen;
}

@keyframes rb-element-water-flow {
    0% { background-position: 100% 0%; }
    100% { background-position: -40% 100%; }
}

.rb-field-card.is-element-earth {
    box-shadow:
        0 0 0 1px rgba(150, 110, 60, 0.55),
        0 0 14px rgba(110, 75, 30, 0.28),
        0 18px 34px rgba(0, 0, 0, 0.56),
        inset 0 0 22px rgba(80, 50, 20, 0.22);
    /* Borda áspera: duas camadas de gradiente repetido simulam textura */
    border-image-source: repeating-linear-gradient(
        45deg,
        rgba(120, 85, 40, 0.85) 0 3px,
        rgba(60, 40, 18, 0.85) 3px 5px
    );
    border-image-slice: 2;
    border-image-width: 2px;
}

.rb-field-card.is-element-earth::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(circle at 18% 22%, rgba(140, 95, 50, 0.5) 0 2px, transparent 3px),
        radial-gradient(circle at 78% 14%, rgba(140, 95, 50, 0.4) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 30% 84%, rgba(140, 95, 50, 0.45) 0 2px, transparent 3px),
        radial-gradient(circle at 86% 78%, rgba(140, 95, 50, 0.4) 0 1.5px, transparent 2.5px);
    opacity: 0;
    transition: opacity 280ms ease, transform 280ms ease;
    z-index: 5;
}

.rb-field-card.is-element-earth:hover::before,
.rb-field-card.is-element-earth.is-selected::before {
    opacity: 1;
    animation: rb-element-earth-dust 2s ease-in-out infinite;
}

@keyframes rb-element-earth-dust {
    0%, 100% {
        transform: translate(0, 0);
        opacity: 0.7;
    }
    50% {
        transform: translate(2px, -3px);
        opacity: 1;
    }
}

/* SHADOW: névoa volumétrica simulada com camadas radiais (sem CSS filter
   blur — perf-budget bane). Aplicada na base da carta, escurecendo o
   contorno inferior pra dar peso fantasmagórico. */
.rb-field-card.is-element-shadow {
    box-shadow:
        0 0 0 1px rgba(155, 90, 220, 0.4),
        0 0 22px rgba(100, 40, 160, 0.32),
        0 18px 34px rgba(0, 0, 0, 0.65),
        inset 0 -18px 30px rgba(40, 10, 60, 0.45);
}

.rb-field-card.is-element-shadow::before {
    content: '';
    position: absolute;
    left: -8px;
    right: -8px;
    bottom: -10px;
    height: 56px;
    pointer-events: none;
    /* Cinco gradientes radiais empilhados em opacities decrescentes
       simulam um halo difuso sem precisar de CSS filter. */
    background:
        radial-gradient(ellipse at 30% 80%, rgba(50, 10, 70, 0.65) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 60%, rgba(80, 20, 110, 0.55) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 100%, rgba(20, 5, 40, 0.78) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0.85;
    animation: rb-element-shadow-fog 5s ease-in-out infinite;
    z-index: 5;
}

@keyframes rb-element-shadow-fog {
    0%, 100% {
        transform: translateY(0) scaleX(1);
        opacity: 0.7;
    }
    50% {
        transform: translateY(2px) scaleX(1.08);
        opacity: 0.95;
    }
}

/* --- Reduced motion: respeita preferência do SO ----------------------- */
@media (prefers-reduced-motion: reduce) {
    #next-turn-button.is-cta-pulse:not(:disabled),
    #next-turn-button.is-cta-pulse:not(:disabled)::after,
    .rb-field-slots .rb-field-slot-empty.is-summon-target::before,
    .rb-field-slots .rb-field-slot-empty[data-direct-attack="true"]::before,
    .rb-field-card.is-attack-lunging::after,
    .rb-field-card.is-taking-hit::before,
    .rb-bot-card.is-taking-hit::before,
    .vfx-screen-shake,
    .vfx-screen-shake.vfx-screen-shake-heavy,
    .vfx-shield-shatter__shard,
    .is-dead-dissolve,
    .is-dead-dissolve::after,
    .battlefield-ember,
    .rb-field-card.is-element-fire::before,
    .rb-field-card.is-element-water::before,
    .rb-field-card.is-element-earth::before,
    .rb-field-card.is-element-shadow::before {
        animation: none;
    }
    .battlefield-layer {
        transition-duration: 0ms;
        transform: none !important;
    }
    .rb-hand .rb-mini-card.rb-tcg-card,
    #next-turn-button.rb-button-secondary,
    #play-button.rb-button-primary {
        transition-duration: 80ms;
    }
    .is-dead-dissolve {
        opacity: 0;
        transform: scale(0.9);
    }
}

/* =========================================================================
   v55 FASE 3 — GRIMÓRIO + BAZAAR
   Coleção vira livro antigo aberto, Loja vira bancada de contrabandista
   com vinheta cinematográfica e pergaminhos lacrados.
   ========================================================================= */

/* --- GRIMÓRIO: a aba de coleção --------------------------------------- */

.rb-product-shell .rb-loadout-builder {
    position: relative;
    background:
        /* lombada central (sombra interna marcando o vinco do livro) */
        linear-gradient(90deg, transparent 47%, rgba(40, 24, 12, 0.55) 49%, rgba(20, 10, 4, 0.7) 50%, rgba(40, 24, 12, 0.55) 51%, transparent 53%),
        /* textura de pergaminho envelhecido — pontos manchados */
        radial-gradient(circle at 18% 22%, rgba(120, 80, 30, 0.16) 0 5px, transparent 6px),
        radial-gradient(circle at 78% 14%, rgba(120, 80, 30, 0.12) 0 4px, transparent 5px),
        radial-gradient(circle at 30% 84%, rgba(120, 80, 30, 0.18) 0 6px, transparent 7px),
        radial-gradient(circle at 86% 78%, rgba(120, 80, 30, 0.14) 0 5px, transparent 6px),
        /* fundo bege envelhecido com vinheta */
        radial-gradient(ellipse at 50% 50%, rgba(180, 140, 80, 0.18) 0%, rgba(50, 32, 16, 0.55) 80%),
        linear-gradient(135deg, #3a2a18 0%, #2a1c0e 50%, #1a1108 100%);
    border: 2px solid;
    border-image: linear-gradient(140deg, #6a4a22 0%, #3a2410 50%, #1a0f06 100%) 1;
    box-shadow:
        inset 0 0 60px rgba(60, 30, 10, 0.55),
        inset 0 0 0 1px rgba(180, 130, 60, 0.18),
        0 18px 38px rgba(0, 0, 0, 0.6),
        0 4px 8px rgba(0, 0, 0, 0.5);
    transform-style: preserve-3d;
    perspective: 1400px;
    /* divide as linhas em duas colunas pra simular páginas espelhadas */
}

.rb-product-shell .rb-loadout-builder::before {
    /* faísca de luz no canto superior esquerdo, como vela próxima ao livro */
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    width: 160px;
    height: 80px;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 12% 18%, rgba(255, 200, 110, 0.28) 0%, transparent 60%);
    z-index: 1;
    border-radius: inherit;
}

.rb-product-shell .rb-loadout-row {
    /* cada linha vira uma entrada de pergaminho mais sólida */
    background:
        linear-gradient(140deg, rgba(80, 56, 28, 0.4) 0%, rgba(40, 26, 12, 0.55) 100%);
    border: 1px solid rgba(160, 120, 60, 0.32);
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 160, 0.08),
        0 2px 4px rgba(0, 0, 0, 0.45);
    position: relative;
    z-index: 2;  /* acima do background do livro */
}

/* Flip 3D pronto pra ser disparado por JS quando paginação real entrar.
   Por enquanto a classe .is-flipping não é injetada — o efeito existe
   como infra latente. */
.rb-loadout-builder.is-flipping {
    animation: rb-grimoire-flip 720ms cubic-bezier(0.4, 0, 0.2, 1) both;
    transform-origin: 50% 50%;
}

@keyframes rb-grimoire-flip {
    0% { transform: rotateY(0deg); }
    50% { transform: rotateY(90deg); opacity: 0.5; }
    100% { transform: rotateY(0deg); }
}

/* Sumário do loadout (Selected/Attack/Guard/Pairs) ganha tratamento de
   "cristais cravados no topo do livro". */
.rb-product-shell .rb-loadout-summary article {
    background:
        radial-gradient(circle at 30% 25%, rgba(140, 200, 240, 0.32), transparent 55%),
        linear-gradient(140deg, #3a4858 0%, #1f2a36 60%, #0f1820 100%);
    border: 1px solid rgba(140, 180, 220, 0.45);
    box-shadow:
        inset 0 1px 0 rgba(220, 240, 255, 0.22),
        inset 0 -1px 1px rgba(0, 0, 0, 0.55),
        0 4px 8px rgba(0, 0, 0, 0.5),
        0 0 12px rgba(80, 140, 200, 0.22);
    clip-path: polygon(8% 0, 92% 0, 100% 32%, 100% 68%, 92% 100%, 8% 100%, 0 68%, 0 32%);
}

.rb-product-shell .rb-loadout-summary article strong {
    color: #f6efd4;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* --- BAZAAR: a aba de loja -------------------------------------------- */

/* Vinheta cinematográfica nas bordas — radial-gradient escuro
   transparente no centro. Aplicada via ::after fixed na shell de produto
   só quando estamos na loja. */
.rb-product-shell[data-page-key="shop"]::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 50%, transparent 35%, rgba(0, 0, 0, 0.45) 75%, rgba(0, 0, 0, 0.78) 100%);
    z-index: 5;
}

/* O pacote de cartas vira pergaminho enrolado + selo de cera no topo. */
.rb-product-shell .rb-shop-pack {
    position: relative;
    background:
        radial-gradient(ellipse at 50% -20%, rgba(180, 140, 60, 0.12) 0%, transparent 55%),
        linear-gradient(180deg, #2a1d10 0%, #1c1308 60%, #0c0904 100%);
    border: 1.5px solid rgba(140, 95, 40, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(220, 170, 90, 0.18),
        inset 0 0 28px rgba(80, 50, 20, 0.5),
        0 18px 28px rgba(0, 0, 0, 0.55),
        0 3px 6px rgba(0, 0, 0, 0.4);
    padding-top: 38px;  /* abre espaço pro selo de cera */
}

/* Selo de cera vermelha — disco com brasão no centro, ::before */
.rb-product-shell .rb-shop-pack::before {
    content: '';
    position: absolute;
    top: -22px;
    left: 50%;
    width: 56px;
    height: 56px;
    transform: translateX(-50%);
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 220, 200, 0.42), transparent 50%),
        radial-gradient(circle at 65% 70%, rgba(60, 0, 0, 0.55), transparent 55%),
        linear-gradient(140deg, #8b1a1a 0%, #5a0f0f 55%, #2c0606 100%);
    box-shadow:
        inset 0 2px 2px rgba(255, 200, 180, 0.4),
        inset 0 -3px 6px rgba(0, 0, 0, 0.7),
        inset 0 0 0 2px rgba(120, 30, 30, 0.85),
        0 6px 14px rgba(0, 0, 0, 0.55);
    z-index: 3;
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 280ms ease;
}

/* Coroa de runas em volta do selo, ::after */
.rb-product-shell .rb-shop-pack::after {
    content: 'A';
    position: absolute;
    top: -22px;
    left: 50%;
    width: 56px;
    height: 56px;
    transform: translateX(-50%);
    display: grid;
    place-items: center;
    font-size: var(--fs-lg);
    font-weight: 900;
    color: rgba(255, 220, 180, 0.85);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 140, 80, 0.4);
    z-index: 4;
    pointer-events: none;
    transition: opacity 280ms ease;
}

/* Quando o JS injeta .is-seal-broken (no clique do comprar), o selo se
   parte em dois fragmentos que rotam pra fora e desaparecem. */
.rb-product-shell .rb-shop-pack.is-seal-broken::before {
    animation: rb-seal-shatter-left 420ms cubic-bezier(0.4, 0, 0.6, 1) forwards;
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}

.rb-product-shell .rb-shop-pack.is-seal-broken::after {
    opacity: 0;
}

/* Pra dar a sensação de "dois pedaços", duplicamos o selo via uma camada
   adicional usando outline. Como CSS não permite duas pseudo do mesmo,
   vamos com um único shatter pro brief — o efeito visual de uma metade
   girando pra esquerda + texto sumindo é suficiente pra leitura de
   "quebrou". */

@keyframes rb-seal-shatter-left {
    0% {
        transform: translateX(-50%) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateX(calc(-50% - 32px)) rotate(-46deg) scale(0.75);
        opacity: 0;
    }
}

.rb-product-shell .rb-shop-pack [data-rebirth-booster] {
    /* botão "Comprar Booster" mais teatral, estilo medalhão pequeno */
    margin-top: 12px;
    letter-spacing: 0.08em;
}

/* Mercado de jogadores também ganha vibe de feira */
.rb-product-shell[data-page-key="shop"] [data-rebirth-market-offers] {
    background:
        radial-gradient(ellipse at 50% -10%, rgba(180, 130, 60, 0.1) 0%, transparent 60%),
        linear-gradient(180deg, rgba(20, 14, 6, 0.55) 0%, rgba(8, 5, 2, 0.65) 100%);
    border: 1px solid rgba(120, 85, 40, 0.35);
    border-radius: 6px;
    padding: 14px;
}

@media (prefers-reduced-motion: reduce) {
    .rb-loadout-builder.is-flipping,
    .rb-product-shell .rb-shop-pack.is-seal-broken::before {
        animation: none;
    }
}

/* =========================================================================
   v55 FASE 4 — SIGNATURE IDENTITY
   Animações de assinatura: evolução cinemática em 4 fases, dano direto
   nos orbes do herói, telas de VITÓRIA e DERROTA premium. Todas
   orquestradas pelo JS com timeline awaitable antes do applyState.
   ========================================================================= */

/* --- 1. EVOLUÇÃO CINEMATOGRÁFICA --------------------------------------
   Container .vfx-evolution-stage cobre toda a área de jogo (position:
   absolute na main). O JS clona os 2 cards a serem fundidos pra dentro
   dele e dispara a sequência: dark overlay → convergência → runa → flash.
   ------------------------------------------------------------------------ */

.vfx-evolution-stage {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    display: none;
    isolation: isolate;
}

.vfx-evolution-stage.is-active {
    display: block;
}

/* Fase 1: overlay escuro cobre o tabuleiro. NÃO uso CSS filter (perf-
   budget bane) — em vez disso uma camada preta com opacidade controlada
   sobre um gradiente radial dá a sensação de profundidade escurecida. */
.vfx-evolution-stage .vfx-evolution-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.92) 80%);
    opacity: 0;
    transition: opacity 360ms ease;
}

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

/* Fase 2: clones convergem para o centro. .vfx-evolution-clone é um
   wrapper posicionado pelo JS (top/left fixos do card original); a
   classe .is-converging dispara a animação rumo ao centro do stage. */
.vfx-evolution-clone {
    position: absolute;
    transform-origin: center center;
    transition: transform 520ms cubic-bezier(0.4, 0, 0.2, 1), opacity 520ms ease;
    z-index: 2;
    will-change: transform, opacity;
}

.vfx-evolution-clone.is-converging {
    /* CSS custom property --target-x/--target-y populada pelo JS pra
       cada clone andar até o centro do stage. */
    transform:
        translate3d(var(--target-x, 0), var(--target-y, 0), 0)
        scale(1.18)
        rotate(var(--converge-rot, 0deg));
    opacity: 1;
}

.vfx-evolution-clone.is-vanishing {
    opacity: 0;
    transform:
        translate3d(var(--target-x, 0), var(--target-y, 0), 0)
        scale(2.4)
        rotate(0deg);
    transition: transform 320ms cubic-bezier(0.4, 0, 0.6, 1), opacity 320ms ease;
}

/* Fase 3: a runa gigante surge no centro */
.vfx-evolution-stage .vfx-evolution-rune {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 320px;
    height: 320px;
    margin: -160px 0 0 -160px;
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(circle, transparent 30%, rgba(255, 215, 110, 0.85) 38%, rgba(220, 150, 50, 0.55) 50%, transparent 72%),
        conic-gradient(from 0deg,
            rgba(255, 230, 140, 0.85) 0deg, transparent 14deg,
            rgba(255, 230, 140, 0.85) 60deg, transparent 74deg,
            rgba(255, 230, 140, 0.85) 120deg, transparent 134deg,
            rgba(255, 230, 140, 0.85) 180deg, transparent 194deg,
            rgba(255, 230, 140, 0.85) 240deg, transparent 254deg,
            rgba(255, 230, 140, 0.85) 300deg, transparent 314deg,
            rgba(255, 230, 140, 0.85) 360deg);
    opacity: 0;
    transform: translateZ(0) scale(0.2) rotate(0deg);
    z-index: 3;
    box-shadow:
        0 0 60px rgba(255, 200, 90, 0.55),
        inset 0 0 40px rgba(255, 220, 130, 0.4);
}

.vfx-evolution-stage.is-rune-active .vfx-evolution-rune {
    animation: rb-vfx-rune-summon 880ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

@keyframes rb-vfx-rune-summon {
    0% { opacity: 0; transform: scale(0.2) rotate(0deg); }
    35% { opacity: 1; transform: scale(1.08) rotate(120deg); }
    75% { opacity: 0.92; transform: scale(1) rotate(220deg); }
    100% { opacity: 0; transform: scale(1.4) rotate(360deg); }
}

/* Fase 4: explosão de luz no centro quando o evolved aparece */
.vfx-evolution-stage .vfx-evolution-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 460px;
    height: 460px;
    margin: -230px 0 0 -230px;
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(circle, rgba(255, 250, 220, 1) 0%, rgba(255, 200, 90, 0.7) 22%, rgba(220, 130, 40, 0.3) 50%, transparent 80%);
    opacity: 0;
    transform: scale(0.1);
    z-index: 4;
}

.vfx-evolution-stage.is-burst-active .vfx-evolution-burst {
    animation: rb-vfx-evolution-burst 560ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes rb-vfx-evolution-burst {
    0% { opacity: 0; transform: scale(0.1); }
    25% { opacity: 1; transform: scale(0.8); }
    55% { opacity: 0.9; transform: scale(1.3); }
    100% { opacity: 0; transform: scale(2.2); }
}

/* --- REBIRTH LABS: FIELD FUSION PROTOTYPE --------------------------- */

.rb-field-card.is-fusion-source {
    position: relative;
    z-index: 5;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.65),
        0 0 28px rgba(255, 230, 150, 0.36),
        0 18px 34px rgba(0, 0, 0, 0.56);
    animation: rb-fusion-source-pulse 980ms ease-in-out infinite;
}

.rb-field-card.is-fusion-source::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.24), transparent 64%),
        conic-gradient(from 45deg, transparent 0deg, rgba(255, 235, 170, 0.42) 42deg, transparent 84deg, rgba(255, 255, 255, 0.3) 156deg, transparent 210deg, rgba(255, 210, 130, 0.36) 292deg, transparent 360deg);
    opacity: 0.65;
    animation: rb-fusion-source-ring 1.3s linear infinite;
    z-index: 3;
}

@keyframes rb-fusion-source-pulse {
    0%, 100% { transform: translateZ(0) scale(1); }
    50% { transform: translateZ(0) scale(1.025); }
}

@keyframes rb-fusion-source-ring {
    0% { transform: rotate(0deg) scale(0.96); opacity: 0.26; }
    45% { opacity: 0.82; }
    100% { transform: rotate(360deg) scale(1.05); opacity: 0.26; }
}

.rb-field-card.is-fusion-material-live {
    opacity: 0.34;
    transform: scale(0.96);
}

.vfx-fusion-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 56%, rgba(255, 255, 255, 0.16) 0%, transparent 34%),
        radial-gradient(ellipse at 50% 56%, rgba(0, 0, 0, 0.56) 0%, rgba(0, 0, 0, 0.82) 82%);
    opacity: 0;
    transition: opacity 120ms ease;
}

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

.vfx-fusion-clone {
    position: absolute;
    z-index: 5;
    transform-origin: center center;
    transition:
        transform 240ms cubic-bezier(0.12, 0.86, 0.18, 1),
        opacity 240ms ease;
    will-change: transform, opacity;
}

.vfx-fusion-clone::after {
    content: '';
    position: absolute;
    inset: -18px -30px;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.34) 48%, rgba(255, 205, 110, 0.24) 62%, transparent 100%);
    opacity: 0;
    transform: scaleX(0.5);
    z-index: -1;
}

.vfx-fusion-clone.is-converging {
    transform:
        translate3d(var(--target-x, 0), var(--target-y, 0), 0)
        scale(0.68)
        rotate(var(--fusion-rot, 0deg));
    opacity: 0.88;
}

.vfx-fusion-clone.is-converging::after {
    animation: rb-fusion-trail 240ms ease-out forwards;
}

@keyframes rb-fusion-trail {
    0% { opacity: 0; transform: scaleX(0.35); }
    35% { opacity: 0.9; transform: scaleX(1.12); }
    100% { opacity: 0; transform: scaleX(1.9); }
}

.vfx-fusion-slot-flash,
.vfx-fusion-burst {
    position: absolute;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.1);
    opacity: 0;
    border-radius: 50%;
}

.vfx-fusion-slot-flash {
    width: 280px;
    height: 280px;
    z-index: 8;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 244, 198, 0.9) 20%, rgba(255, 192, 94, 0.34) 48%, transparent 72%);
}

.vfx-fusion-burst {
    width: 440px;
    height: 440px;
    z-index: 7;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.98) 0%, rgba(255, 225, 150, 0.76) 18%, rgba(255, 120, 70, 0.36) 44%, transparent 76%),
        conic-gradient(from 0deg, rgba(255, 255, 255, 0.86), transparent 18deg, rgba(255, 200, 120, 0.72) 56deg, transparent 92deg, rgba(255, 255, 255, 0.72) 136deg, transparent 180deg, rgba(255, 180, 90, 0.72) 242deg, transparent 300deg, rgba(255, 255, 255, 0.86));
}

.vfx-evolution-stage.is-fusion-flash .vfx-fusion-slot-flash {
    animation: rb-fusion-white-flash 180ms ease-out forwards;
}

.vfx-evolution-stage.is-fusion-flash .vfx-fusion-burst {
    animation: rb-fusion-stage-burst 520ms cubic-bezier(0.16, 0.84, 0.18, 1) forwards;
}

@keyframes rb-fusion-white-flash {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
    38% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}

@keyframes rb-fusion-stage-burst {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.08) rotate(0deg); }
    18% { opacity: 1; transform: translate(-50%, -50%) scale(0.72) rotate(24deg); }
    62% { opacity: 0.88; transform: translate(-50%, -50%) scale(1.2) rotate(96deg); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.85) rotate(180deg); }
}

.rb-field-card.is-fusion-born {
    position: relative;
    z-index: 9;
    animation: rb-fusion-born 460ms cubic-bezier(0.12, 0.86, 0.18, 1) both;
}

.rb-field-card.is-fusion-born::after {
    content: '';
    position: absolute;
    inset: -14px;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.88) 0%, rgba(255, 228, 154, 0.54) 36%, transparent 70%);
    opacity: 0;
    animation: rb-fusion-born-glow 620ms ease-out forwards;
    z-index: 8;
}

@keyframes rb-fusion-born {
    0% { opacity: 0; transform: scale(0.42); }
    34% { opacity: 1; transform: scale(1.18); }
    64% { transform: scale(0.96); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes rb-fusion-born-glow {
    0% { opacity: 0; transform: scale(0.62); }
    28% { opacity: 1; transform: scale(1.02); }
    100% { opacity: 0; transform: scale(1.46); }
}

/* --- 2. DANO DIRETO NO HERÓI ----------------------------------------- */

/* Os orbes de HP são .rb-hp-meter; o JS injeta .vfx-hero-damage no
   .rb-hud-player ou .rb-hud-bot afetado quando o HP do payload caiu. */
.vfx-hero-damage {
    animation: rb-vfx-hero-pulse 460ms cubic-bezier(0.36, 0, 0.2, 1) both;
    position: relative;
}

@keyframes rb-vfx-hero-pulse {
    0%, 100% { transform: scale(1); }
    20% { transform: scale(0.92) translateX(-4px); }
    35% { transform: scale(1.06) translateX(5px); }
    55% { transform: scale(0.96) translateX(-3px); }
    78% { transform: scale(1.02) translateX(2px); }
}

.vfx-hero-damage::before {
    content: '';
    position: absolute;
    inset: -8px;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(255, 50, 40, 0.55) 0%, rgba(180, 20, 10, 0.3) 35%, transparent 70%);
    border-radius: inherit;
    mix-blend-mode: screen;
    opacity: 0;
    animation: rb-vfx-hero-flash 460ms ease-out forwards;
    z-index: 1;
}

@keyframes rb-vfx-hero-flash {
    0% { opacity: 0; transform: scale(0.6); }
    18% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.4); }
}

/* Faíscas de sangue arcano — 4 partículas projetadas pelos cantos */
.vfx-hero-damage::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 15% 30%, rgba(255, 80, 60, 0.85) 0 3px, transparent 4px),
        radial-gradient(circle at 85% 28%, rgba(180, 0, 30, 0.85) 0 2px, transparent 3px),
        radial-gradient(circle at 20% 78%, rgba(200, 40, 60, 0.85) 0 2.5px, transparent 3.5px),
        radial-gradient(circle at 82% 80%, rgba(140, 0, 20, 0.85) 0 2px, transparent 3px);
    opacity: 0;
    animation: rb-vfx-hero-spark 460ms ease-out forwards;
    z-index: 2;
}

@keyframes rb-vfx-hero-spark {
    0% { opacity: 0; transform: scale(0.5); }
    25% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 0; transform: scale(1.8); }
}

/* --- 3. FINALIZAÇÃO TRIUNFAL ----------------------------------------- */

.vfx-finale-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    isolation: isolate;
}

.vfx-finale-overlay.is-active {
    display: flex;
    pointer-events: none;
}

.vfx-finale-overlay .vfx-finale-curtain {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 580ms ease;
}

.vfx-finale-overlay.is-active .vfx-finale-curtain {
    opacity: 1;
}

.vfx-finale-overlay .vfx-finale-text {
    position: relative;
    z-index: 4;
    font-family: var(--rb-font-epic);
    font-weight: 900;
    letter-spacing: 0.32em;
    font-size: var(--fs-display);
    text-transform: uppercase;
    opacity: 0;
    transform: scale(0.6) translateY(20px);
    transition: opacity 720ms ease, transform 720ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

/* VITÓRIA — névoa dourada + runas flutuantes */
.vfx-finale-overlay.is-victory .vfx-finale-curtain {
    background:
        radial-gradient(ellipse at 50% 30%, rgba(255, 210, 130, 0.42) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 80%, rgba(255, 170, 80, 0.32) 0%, transparent 60%),
        radial-gradient(circle at 50% 50%, rgba(80, 50, 20, 0.7) 0%, rgba(30, 15, 5, 0.92) 90%);
}

.vfx-finale-overlay.is-victory .vfx-finale-text {
    color: #f8e9b5;
    text-shadow:
        0 2px 0 rgba(140, 90, 30, 1),
        0 4px 0 rgba(80, 50, 15, 1),
        0 8px 24px rgba(255, 200, 90, 0.6),
        0 0 60px rgba(255, 180, 70, 0.55);
    background:
        linear-gradient(180deg, #fff2c4 0%, #f5c466 40%, #a06618 80%, #4a2810 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rb-vfx-victory-shimmer 3.2s ease-in-out infinite;
}

@keyframes rb-vfx-victory-shimmer {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 0% 100%; }
}

/* Runas flutuantes da vitória — 6 pontos brilhantes que sobem */
.vfx-finale-overlay.is-victory::before,
.vfx-finale-overlay.is-victory::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 90%, rgba(255, 230, 140, 0.85) 0 4px, transparent 5px),
        radial-gradient(circle at 30% 95%, rgba(255, 200, 90, 0.8) 0 3px, transparent 4px),
        radial-gradient(circle at 50% 92%, rgba(255, 240, 160, 0.9) 0 4px, transparent 5px),
        radial-gradient(circle at 68% 96%, rgba(255, 200, 80, 0.8) 0 3px, transparent 4px),
        radial-gradient(circle at 82% 90%, rgba(255, 230, 140, 0.85) 0 4px, transparent 5px);
    opacity: 0;
    animation: rb-vfx-victory-runes 4.5s ease-out infinite;
    z-index: 2;
}

.vfx-finale-overlay.is-victory::after {
    animation-delay: 1.5s;
}

@keyframes rb-vfx-victory-runes {
    0% { opacity: 0; transform: translateY(0) scale(0.7); }
    18% { opacity: 0.9; transform: translateY(-80px) scale(1); }
    100% { opacity: 0; transform: translateY(-360px) scale(0.5); }
}

/* DERROTA — vinheta cinzenta + texto sombrio */
.vfx-finale-overlay.is-defeat .vfx-finale-curtain {
    background:
        radial-gradient(ellipse at 50% 50%, transparent 18%, rgba(20, 5, 25, 0.65) 60%, rgba(5, 5, 12, 0.95) 100%);
}

.vfx-finale-overlay.is-defeat .vfx-finale-text {
    color: #b8a8c8;
    text-shadow:
        0 1px 0 rgba(40, 20, 50, 1),
        0 2px 0 rgba(25, 10, 35, 1),
        0 6px 18px rgba(80, 40, 110, 0.6),
        0 0 40px rgba(100, 50, 130, 0.45);
    letter-spacing: 0.38em;
    /* sem shimmer animado — o peso da derrota é estático */
}

/* Energia espectral roxa subindo do canto inferior (orbe quebrado) */
.vfx-finale-overlay.is-defeat::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 100%, rgba(130, 70, 180, 0.45) 0%, rgba(80, 30, 130, 0.25) 18%, transparent 45%);
    opacity: 0;
    animation: rb-vfx-defeat-mist 2.4s ease-out forwards;
    z-index: 2;
}

@keyframes rb-vfx-defeat-mist {
    0% { opacity: 0; transform: translateY(40px) scale(0.9); }
    35% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0.55; transform: translateY(-30px) scale(1.1); }
}

/* O orbe do player ganha .vfx-orb-crack na derrota */
.rb-hud-player.vfx-orb-crack .rb-hp-meter,
.rb-hud-player.vfx-orb-crack [id="player-hp"] {
    animation: rb-vfx-orb-crack-shake 720ms cubic-bezier(0.36, 0, 0.2, 1) both;
}

.rb-hud-player.vfx-orb-crack .rb-hp-meter::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 30% 40%, rgba(140, 60, 180, 0.65) 0 1.5px, transparent 2px),
        linear-gradient(115deg, transparent 30%, rgba(180, 100, 220, 0.55) 32%, transparent 34%),
        linear-gradient(75deg, transparent 50%, rgba(180, 100, 220, 0.45) 52%, transparent 54%);
    opacity: 0;
    animation: rb-vfx-orb-crack-flash 720ms ease-out forwards;
}

@keyframes rb-vfx-orb-crack-shake {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-4px, 2px); }
    40% { transform: translate(4px, -2px); }
    60% { transform: translate(-3px, 3px); }
    80% { transform: translate(2px, -1px); }
}

@keyframes rb-vfx-orb-crack-flash {
    0% { opacity: 0; }
    30% { opacity: 0.95; }
    100% { opacity: 0; }
}

/* Tabuleiro se despedaça na vitória — leve tilt + glow dourado */
.rb-game-board.vfx-board-shatter {
    animation: rb-vfx-board-shatter 1.4s ease-out both;
}

@keyframes rb-vfx-board-shatter {
    0% { transform: none; box-shadow: none; }
    35% {
        transform: translate(2px, -2px) rotate(0.4deg);
        box-shadow: 0 0 80px rgba(255, 200, 90, 0.35);
    }
    72% {
        transform: translate(-2px, 1px) rotate(-0.2deg);
        box-shadow: 0 0 120px rgba(255, 180, 60, 0.25);
    }
    100% { transform: none; box-shadow: none; }
}

/* --- Primeira vitória / rematch CTA --------------------------- */
.vfx-finale-overlay .vfx-finale-subtitle {
    margin-top: 18px;
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 235, 180, 0.92);
    text-shadow: 0 0 18px rgba(255, 190, 90, 0.65);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s ease 0.4s, transform 0.6s ease 0.4s;
    position: relative;
    z-index: 4;
}

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

.vfx-finale-overlay.is-first-duel .vfx-finale-text {
    animation: rb-vfx-victory-shimmer 2.4s ease-in-out infinite, rb-vfx-first-duel-pop 0.8s ease-out;
    font-size: var(--fs-display);
    letter-spacing: 0.16em;
}

@keyframes rb-vfx-first-duel-pop {
    0% { transform: scale(0.6); opacity: 0; }
    55% { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.rb-result-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    justify-content: flex-end;
    min-width: 200px;
}

.rb-result-actions.is-finished .rb-secondary {
    opacity: 0.85;
}

.rb-rematch-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    padding: 14px 26px;
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8c259 0%, #d6852e 60%, #8c4a16 100%);
    color: #2a1606;
    border: 1px solid rgba(255, 220, 150, 0.65);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.35) inset,
        0 10px 28px rgba(220, 130, 40, 0.45),
        0 0 24px rgba(255, 190, 90, 0.4);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.rb-rematch-cta:hover:not([disabled]) {
    transform: translateY(-1px);
    background: linear-gradient(180deg, #ffd373 0%, #e69335 60%, #9a5418 100%);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.35) inset,
        0 12px 32px rgba(220, 130, 40, 0.55),
        0 0 32px rgba(255, 200, 100, 0.55);
}

.rb-rematch-cta:active:not([disabled]) {
    transform: translateY(1px);
    background: linear-gradient(180deg, #e5b14a 0%, #c4762a 60%, #793e13 100%);
}

.rb-rematch-cta[disabled] {
    opacity: 0.6;
    cursor: progress;
}

.rb-rematch-cta.is-first-duel {
    animation: rb-rematch-pulse 1.8s ease-in-out infinite;
}

@keyframes rb-rematch-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(0, 0, 0, 0.35) inset,
            0 10px 28px rgba(220, 130, 40, 0.45),
            0 0 24px rgba(255, 190, 90, 0.4);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(0, 0, 0, 0.35) inset,
            0 12px 36px rgba(220, 130, 40, 0.6),
            0 0 44px rgba(255, 210, 120, 0.75);
    }
}

.rb-progression-tease {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255, 200, 120, 0.08);
    border: 1px solid rgba(255, 200, 120, 0.2);
    color: rgba(245, 230, 200, 0.92);
    font-size: var(--fs-xs);
    line-height: 1.4;
}

.rb-progression-tease[hidden] {
    display: none;
}

.rb-progression-tease .rb-tease-headline {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f8c259;
}

.rb-result-panel.is-first-duel {
    border-color: rgba(255, 190, 90, 0.55);
    box-shadow: 0 0 32px rgba(255, 180, 70, 0.25);
}

/* --- Reduced motion overrides para Fase 4 --------------------------- */
@media (prefers-reduced-motion: reduce) {
    .vfx-evolution-stage .vfx-evolution-rune,
    .vfx-evolution-stage .vfx-evolution-burst,
    .vfx-fusion-clone,
    .vfx-fusion-clone::after,
    .vfx-fusion-slot-flash,
    .vfx-fusion-burst,
    .rb-field-card.is-fusion-source,
    .rb-field-card.is-fusion-source::after,
    .rb-field-card.is-fusion-born,
    .rb-field-card.is-fusion-born::after,
    .vfx-finale-overlay.is-victory .vfx-finale-text,
    .vfx-finale-overlay.is-victory::before,
    .vfx-finale-overlay.is-victory::after,
    .vfx-finale-overlay.is-defeat::before,
    .vfx-finale-overlay.is-first-duel .vfx-finale-text,
    .vfx-hero-damage,
    .vfx-hero-damage::before,
    .vfx-hero-damage::after,
    .rb-hud-player.vfx-orb-crack .rb-hp-meter,
    .rb-hud-player.vfx-orb-crack .rb-hp-meter::after,
    .rb-game-board.vfx-board-shatter,
    .rb-rematch-cta.is-first-duel {
        animation: none !important;
    }
    .vfx-evolution-clone,
    .vfx-fusion-clone {
        transition: opacity 80ms ease;
    }
    .vfx-evolution-stage .vfx-evolution-overlay,
    .vfx-fusion-overlay,
    .vfx-finale-overlay .vfx-finale-curtain,
    .vfx-finale-overlay .vfx-finale-text {
        transition: none !important;
    }
}

/* v58: native touch layout. Mobile no longer shrinks the desktop canvas. */
@media (max-width: 760px) {
    body.rb-game-page.rb-mobile-native {
        --rb-touch-target-min: 44px;
        --rb-touch-target-comfort: 48px;
        --rb-mobile-nav-height: 196px;
        position: relative;
        inset: auto;
        width: auto;
        height: auto;
        min-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        touch-action: pan-y;
    }

    .rb-mobile-native .rb-global-nav {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding: 12px;
    }

    .rb-mobile-native .rb-global-tabs {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
        gap: 6px;
        overflow: visible;
    }

    .rb-mobile-native .rb-global-tabs a {
        display: grid;
        width: 100%;
        min-width: 0;
        place-items: center;
        padding-inline: 4px;
        line-height: 1.1;
        overflow-wrap: anywhere;
    }

    .rb-mobile-native .rb-global-player {
        display: flex;
        gap: 12px;
        overflow-x: auto;
    }

    .rb-mobile-native .rb-global-player > * {
        flex: 1 0 auto;
    }

    .rb-mobile-native :where(button, a, [role="button"], .rb-field-card, .rb-field-slot-empty) {
        min-width: var(--rb-touch-target-min);
        min-height: var(--rb-touch-target-min);
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .rb-mobile-native .rb-global-tabs a,
    .rb-mobile-native .rb-nav-auth {
        min-height: var(--rb-touch-target-min);
        padding-block: 11px;
    }

    .rb-mobile-native .rb-game-viewport {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        min-height: 100dvh;
        display: block;
        overflow: visible;
        contain: layout paint;
        transform: translateZ(0);
        transform-origin: center center;
        will-change: transform;
        padding:
            calc(var(--rb-mobile-nav-height, 152px) + var(--rb-safe-top) + 10px)
            max(8px, var(--rb-safe-right))
            calc(78px + var(--rb-safe-bottom))
            max(8px, var(--rb-safe-left));
    }

    .rb-mobile-native .rb-game-viewport.vfx-screen-shake,
    .rb-mobile-native .rb-game-viewport.is-screen-shaking {
        contain: layout paint;
        transform-origin: center center;
    }

    /* v59 — cascata defensiva contra v55 VFX. O seletor base de touch
       targets usa :where() (especificidade 0), então qualquer classe
       VFX que herde min-height/min-width zerados via cascade vence.
       Reforçamos AQUI com especificidade dedicada por classe VFX:
       mesmo durante .vfx-hero-damage, .is-dead-dissolve, .vfx-shield-shatter,
       .is-cta-pulse e .vfx-orb-crack, o alvo de toque continua 44-48px e
       o jogador não erra o toque por causa de uma animação rolando. */
    .rb-mobile-native button.vfx-hero-damage,
    .rb-mobile-native a.vfx-hero-damage,
    .rb-mobile-native [role="button"].vfx-hero-damage,
    .rb-mobile-native .rb-field-card.is-dead-dissolve,
    .rb-mobile-native .rb-field-card.vfx-shield-shatter,
    .rb-mobile-native button.is-cta-pulse,
    .rb-mobile-native .rb-hud-player.vfx-orb-crack button,
    .rb-mobile-native .rb-hud-player.vfx-orb-crack a {
        min-width: var(--rb-touch-target-min);
        min-height: var(--rb-touch-target-min);
    }

    .rb-mobile-native .rb-game-board {
        position: relative;
        left: auto;
        top: auto;
        width: 100% !important;
        height: auto !important;
        min-height: 0;
        overflow: hidden !important;
        transform: none;
        transform-style: preserve-3d;
        backface-visibility: hidden;
        contain: layout paint;
        display: grid;
        grid-template-areas:
            "hud"
            "arena"
            "evo"
            "hand"
            "actions"
            "result"
            "log";
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        gap: 12px;
        padding: 10px;
        border: 1px solid rgba(255, 255, 255, 0.12);
    }

    .rb-mobile-native .rb-game-board.vfx-board-shatter,
    .rb-mobile-native .vfx-evolution-clone,
    .rb-mobile-native .vfx-evolution-rune,
    .rb-mobile-native .vfx-evolution-burst {
        transform-origin: center center;
        will-change: transform, opacity;
    }

    .rb-mobile-native .rb-hud,
    .rb-mobile-native .rb-battle-zone,
    .rb-mobile-native .rb-player-hand,
    .rb-mobile-native .rb-actions-row,
    .rb-mobile-native .rb-result-panel,
    .rb-mobile-native .rb-log,
    .rb-mobile-native .rb-evolution-panel {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        min-height: 0;
    }

    .rb-mobile-native .rb-hud {
        grid-area: hud;
        min-height: 90px;
        grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr);
    }

    .rb-mobile-native .rb-hud-side {
        min-height: 90px;
        display: block;
        padding: 10px 8px;
    }

    .rb-mobile-native .rb-hud-copy > span {
        font-size: var(--fs-3xs);
    }

    .rb-mobile-native .rb-mark,
    .rb-mobile-native .rb-bot-emblem {
        display: none;
    }

    .rb-mobile-native .rb-hud-health strong,
    .rb-mobile-native .rb-turn-core strong {
        font-size: var(--fs-lg);
    }

    .rb-mobile-native .rb-hp-meter {
        width: 100%;
        height: 7px;
    }

    .rb-mobile-native .rb-zone-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 3px;
        font-size: var(--fs-3xs);
    }

    .rb-mobile-native .rb-turn-core {
        padding: 10px 3px;
    }

    .rb-mobile-native .rb-turn-core small {
        font-size: var(--fs-3xs);
    }

    .rb-mobile-native .rb-phase-timeline {
        gap: 2px;
        margin-top: 4px;
    }

    .rb-mobile-native .rb-phase-timeline i {
        width: 8px;
        height: 3px;
    }

    .rb-mobile-native .rb-battle-zone {
        grid-area: arena;
        min-height: 386px;
        display: grid;
        grid-template-rows: minmax(166px, 1fr) 30px minmax(166px, 1fr);
        gap: 6px;
        padding: 8px 6px;
    }

    .rb-mobile-native .rb-field-row {
        grid-template-columns: 1fr;
        gap: 6px;
        align-content: center;
    }

    .rb-mobile-native .rb-field-row > span {
        font-size: var(--fs-3xs);
        padding-inline: 4px;
    }

    .rb-mobile-native .rb-field-slots {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .rb-mobile-native .rb-field-card,
    .rb-mobile-native .rb-field-slot-empty {
        height: clamp(112px, 31vw, 132px);
        min-height: 112px;
        transform-origin: center center;
        backface-visibility: hidden;
    }

    .rb-mobile-native .rb-field-card {
        --cost-size: 27px;
        --medal-size: 29px;
        --text-pad-x: 34px;
    }

    .rb-mobile-native .rb-field-card .rb-card-textbox p {
        font-size: var(--fs-3xs);
        line-height: 1.12;
    }

    .rb-mobile-native .rb-card-stage {
        display: contents;
    }

    .rb-mobile-native .rb-monster-card-main {
        display: none;
    }

    .rb-mobile-native .rb-evolution-panel {
        grid-area: evo;
        display: grid;
        grid-template-columns: auto 62px 1fr auto;
        align-items: center;
        gap: 8px;
        min-height: 72px;
        padding: 8px;
    }

    .rb-mobile-native .rb-evolution-thumb {
        width: 58px;
        height: 58px;
    }

    .rb-mobile-native .rb-evolution-panel small {
        display: none;
    }

    .rb-mobile-native .rb-combine-button {
        width: auto;
        min-width: 78px;
        min-height: 48px;
        font-size: var(--fs-xs);
    }

    .rb-mobile-native .rb-player-hand {
        grid-area: hand;
        min-height: 174px;
        overflow: visible;
    }

    .rb-mobile-native .rb-hand {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: clamp(116px, 35vw, 142px);
        grid-template-columns: none;
        gap: 8px;
        height: 164px;
        overflow-x: auto;
        overflow-y: visible;
        padding: 8px 2px 4px;
        scroll-snap-type: x proximity;
        touch-action: pan-x;
    }

    .rb-mobile-native .rb-hand .rb-mini-card {
        width: 100%;
        height: 150px;
        min-height: 150px;
        scroll-snap-align: start;
    }

    .rb-mobile-native .rb-actions-row {
        grid-area: actions;
        position: sticky;
        bottom: calc(8px + var(--rb-safe-bottom));
        z-index: 60;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 8px;
        background: rgba(5, 7, 10, 0.96);
        border: 1px solid rgba(244, 173, 38, 0.22);
    }

    .rb-mobile-native .rb-actions-row > div {
        gap: 4px;
    }

    .rb-mobile-native #next-turn-button.rb-button-secondary,
    .rb-mobile-native #play-button.rb-button-primary,
    .rb-mobile-native .rb-actions-row .rb-cta,
    .rb-mobile-native .rb-actions-row .rb-secondary {
        width: 100%;
        min-width: 0;
        min-height: 52px;
        font-size: var(--fs-xs);
    }

    .rb-mobile-native .rb-actions-row small {
        font-size: var(--fs-3xs);
    }

    .rb-mobile-native .rb-result-panel {
        grid-area: result;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 98px;
        align-items: stretch;
        gap: 8px;
        padding: 12px;
    }

    .rb-mobile-native .rb-result-panel p {
        display: block;
        overflow: visible;
        -webkit-line-clamp: unset;
    }

    .rb-mobile-native .rb-result-panel .rb-secondary {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        padding: 8px 6px;
        font-size: var(--fs-sm);
    }

    .rb-mobile-native .rb-log,
    .rb-mobile-native .rb-log:not(.is-open),
    .rb-mobile-native .rb-log.is-open {
        grid-area: log;
        width: 100%;
        height: auto;
    }
}

@media (max-width: 760px) and (orientation: landscape) {
    .rb-mobile-native .rb-game-viewport {
        padding-top: calc(var(--rb-mobile-nav-height, 70px) + var(--rb-safe-top) + 8px);
    }

    .rb-mobile-native .rb-game-board {
        grid-template-areas:
            "hud hud"
            "arena hand"
            "arena evo"
            "actions actions"
            "result log";
        grid-template-columns: minmax(330px, 1.15fr) minmax(250px, 0.85fr);
    }

    .rb-mobile-native .rb-battle-zone {
        min-height: 352px;
    }
}

/* v59 performance hardening: waiting states stay visually rich but static.
   Finite combat and transition effects remain available when actions occur. */
.rb-game-viewport::before,
.rb-game-viewport::after,
.rb-game-board[data-bot-profile="aggressive"] .rb-hud-bot,
.rb-game-board[data-bot-profile="aggressive"] .rb-bot-emblem,
.rb-game-board[data-bot-profile="opportunist"] .rb-hud-bot,
.rb-game-board[data-bot-profile="opportunist"] .rb-bot-emblem,
.rb-monster-card.is-evolved:hover .rb-card-art::before,
.rb-hand .rb-mini-card.is-evolved:hover .rb-mini-art::after,
.rb-monster-card.is-burn,
.rb-mini-card.is-burn,
#next-turn-button.is-cta-pulse:not(:disabled),
#next-turn-button.is-cta-pulse:not(:disabled)::after,
.rb-field-card.is-attacking,
.rb-game-board.is-choosing-attack .rb-battle-zone::after,
.rb-field-card.is-targetable,
.rb-field-slot-empty[data-direct-attack="true"].is-selected,
#player-battlefield .rb-field-slot-empty.is-summon-target::before,
#bot-battlefield .rb-field-slot-empty[data-direct-attack="true"]::before,
.rb-game-board.is-choosing-attack #bot-battlefield .rb-field-slot-empty::before,
.battlefield-ember,
.rb-field-card.is-element-fire::before,
.rb-field-card.is-element-water::before,
.rb-field-card.is-element-earth:hover::before,
.rb-field-card.is-element-earth.is-selected::before,
.rb-field-card.is-element-shadow::before,
.vfx-finale-overlay.is-victory .vfx-finale-text,
.vfx-finale-overlay.is-victory::before,
.vfx-finale-overlay.is-victory::after {
    animation: none;
}

/* =========================================================================
   v70-v72 playability hotfix: mobile compression, decision clarity, impact
   ========================================================================= */

.rb-mobile-action-bar {
    display: contents;
}

.rb-action-bar-meta {
    display: none;
}

.rb-recommendation-badge,
.rb-risk-badge {
    position: absolute;
    z-index: 6;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(255, 200, 82, 0.78);
    background: linear-gradient(180deg, rgba(255, 200, 82, 0.96), rgba(176, 104, 19, 0.92));
    color: #1a1003;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 0 18px rgba(244, 173, 38, 0.28);
    pointer-events: none;
}

.rb-recommendation-badge {
    /* audit #5: era top/right:5px e colidia com o título no mini-card
       estreito ("CINDER LYN▮ST PLAY"). O card tem overflow:hidden +
       clip-path, então o badge precisa ficar DENTRO dos limites. Fica
       centrado sobre a área de arte, abaixo do título e acima dos stats. */
    top: 36px;
    left: 50%;
    transform: translateX(-50%);
    min-height: 16px;
    padding: 2px 8px;
    font-size: var(--fs-3xs);
    white-space: nowrap;
    border-radius: 8px;
}

.rb-hand .rb-mini-card.is-recommended {
    border-color: rgba(255, 200, 82, 0.92);
    box-shadow:
        0 20px 44px rgba(0, 0, 0, 0.58),
        0 0 0 1px rgba(255, 200, 82, 0.35),
        0 0 24px rgba(244, 173, 38, 0.25);
}

.rb-hand .rb-mini-card.is-recommended.is-selected {
    box-shadow:
        0 24px 52px rgba(0, 0, 0, 0.68),
        0 0 0 2px rgba(255, 200, 82, 0.68),
        0 0 30px rgba(244, 173, 38, 0.38);
}

.rb-risk-badge {
    top: 7px;
    left: 7px;
    right: 7px;
    min-height: 20px;
    padding: 3px 5px;
    font-size: var(--fs-3xs);
    line-height: 1.05;
    background: rgba(7, 9, 12, 0.9);
    color: var(--rb-text);
}

.rb-field-card.is-risk-favorable {
    border-color: rgba(120, 242, 170, 0.84);
    box-shadow: 0 0 0 1px rgba(120, 242, 170, 0.28), 0 0 20px rgba(120, 242, 170, 0.16);
}

.rb-field-card.is-risk-risky {
    border-color: rgba(255, 200, 82, 0.86);
    box-shadow: 0 0 0 1px rgba(255, 200, 82, 0.28), 0 0 20px rgba(244, 173, 38, 0.18);
}

.rb-field-card.is-risk-losing {
    border-color: rgba(255, 115, 95, 0.9);
    box-shadow: 0 0 0 1px rgba(255, 115, 95, 0.32), 0 0 22px rgba(255, 115, 95, 0.18);
}

.rb-field-card.is-risk-favorable .rb-risk-badge,
.rb-risk-chip[data-risk-tone="favorable"] {
    border-color: rgba(120, 242, 170, 0.78);
    color: #dfffea;
    background: rgba(34, 116, 70, 0.44);
}

.rb-field-card.is-risk-risky .rb-risk-badge,
.rb-risk-chip[data-risk-tone="risky"] {
    border-color: rgba(255, 200, 82, 0.82);
    color: #fff2c5;
    background: rgba(151, 96, 16, 0.44);
}

.rb-field-card.is-risk-losing .rb-risk-badge,
.rb-risk-chip[data-risk-tone="losing"] {
    border-color: rgba(255, 115, 95, 0.86);
    color: #ffe0da;
    background: rgba(126, 30, 25, 0.48);
}

.rb-game-board.is-hit-paused {
    transform: translateX(calc(-50% + var(--rb-safe-offset-x))) scale(var(--rb-scale));
}

.rb-field-card.is-combat-winner,
.rb-bot-card.is-combat-winner {
    animation: rb-combat-winner-pop 680ms ease both;
}

.rb-field-card.is-combat-loser,
.rb-bot-card.is-combat-loser {
    animation: rb-combat-loser-hit 680ms ease both;
}

.rb-field-card.is-combat-trading,
.rb-bot-card.is-combat-trading {
    animation: rb-combat-trade-flash 620ms ease both;
}

.rb-damage-number {
    position: absolute;
    z-index: 12;
    top: 12%;
    right: 8%;
    min-width: 34px;
    padding: 4px 7px;
    border: 1px solid rgba(255, 255, 255, 0.36);
    background: rgba(7, 9, 12, 0.92);
    color: #fff4d2;
    font-size: var(--fs-2xs);
    font-weight: 950;
    text-align: center;
    box-shadow: 0 0 18px rgba(255, 115, 95, 0.32);
    animation: rb-damage-number-rise 720ms ease-out both;
    pointer-events: none;
}

.rb-result-panel #result-title {
    line-height: 0.98;
}

.rb-result-panel #result-copy {
    font-weight: 800;
}

.rb-result-panel .rb-resolution-strip,
.rb-result-panel .rb-tactics-strip,
.rb-result-panel .rb-ability-events {
    max-height: 72px;
    overflow: auto;
}

@keyframes rb-combat-winner-pop {
    0% { transform: translateY(var(--card-lift, 0)) scale(1); }
    36% { transform: translateY(calc(var(--card-lift, 0) - 6px)) scale(1.035); }
    100% { transform: translateY(var(--card-lift, 0)) scale(1); }
}

@keyframes rb-combat-loser-hit {
    0% { transform: translateY(var(--card-lift, 0)) translateX(0); opacity: 1; }
    18% { transform: translateY(var(--card-lift, 0)) translateX(-5px); opacity: 0.86; }
    34% { transform: translateY(var(--card-lift, 0)) translateX(4px); opacity: 0.82; }
    100% { transform: translateY(var(--card-lift, 0)) translateX(0); opacity: 1; }
}

@keyframes rb-combat-trade-flash {
    0%, 100% { box-shadow: inherit; }
    45% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.28), 0 0 28px rgba(255, 200, 82, 0.28); }
}

@keyframes rb-damage-number-rise {
    0% { opacity: 0; transform: translateY(8px) scale(0.9); }
    18% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-28px) scale(1.04); }
}

@media (max-width: 760px) {
    body.rb-game-page.rb-mobile-native {
        --rb-mobile-nav-height: 92px;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-x: none;
    }

    .rb-mobile-native .rb-global-nav {
        position: fixed;
        top: max(4px, var(--rb-safe-top));
        left: max(4px, var(--rb-safe-left));
        right: max(4px, var(--rb-safe-right));
        width: auto;
        margin: 0;
        transform: none;
        z-index: 120;
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        grid-template-areas:
            "brand tabs"
            "brand player";
        gap: 4px 6px;
        min-height: 0;
        padding: 6px;
    }

    .rb-mobile-native .rb-global-brand {
        grid-area: brand;
        min-width: 0;
        justify-content: center;
    }

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

    .rb-mobile-native .rb-global-tabs {
        grid-area: tabs;
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 3px;
    }

    .rb-mobile-native .rb-global-tabs a {
        min-height: 26px;
        padding: 3px 2px;
        font-size: var(--fs-3xs);
        line-height: 1.05;
    }

    .rb-mobile-native .rb-global-player {
        grid-area: player;
        display: grid;
        grid-template-columns: 0.72fr 0.84fr 0.78fr 1fr;
        gap: 3px;
        overflow: hidden;
    }

    .rb-mobile-native .rb-global-player > * {
        min-width: 0;
        min-height: 30px;
        padding: 4px;
        font-size: var(--fs-3xs);
    }

    .rb-mobile-native .rb-global-identity strong,
    .rb-mobile-native .rb-global-xp strong,
    .rb-mobile-native .rb-global-wallet strong {
        font-size: var(--fs-3xs);
    }

    .rb-mobile-native .rb-global-wallet {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2px;
    }

    .rb-mobile-native .rb-nav-auth {
        min-height: 30px;
        padding: 3px;
        font-size: var(--fs-3xs);
    }

    .rb-mobile-native .rb-game-viewport {
        min-height: 100dvh;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
        padding:
            calc(var(--rb-mobile-nav-height, 92px) + var(--rb-safe-top) + 4px)
            max(5px, var(--rb-safe-right))
            max(5px, var(--rb-safe-bottom))
            max(5px, var(--rb-safe-left));
    }

    .rb-mobile-native .rb-game-board {
        min-height: 0;
        height: calc(100dvh - var(--rb-mobile-nav-height, 92px) - var(--rb-safe-top) - var(--rb-safe-bottom) - 12px) !important;
        max-height: 748px;
        width: min(100%, 380px);
        max-width: calc(100vw - 10px);
        margin-inline: auto;
        display: grid;
        grid-template-areas:
            "hud"
            "arena"
            "actionbar"
            "result";
        grid-template-rows: 62px minmax(280px, 1fr) 190px minmax(86px, 104px);
        gap: 6px;
        padding: 6px;
        overflow: hidden !important;
    }

    .rb-mobile-native .rb-hud {
        min-height: 0;
        height: 62px;
        grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr);
    }

    .rb-mobile-native .rb-hud-side {
        min-height: 0;
        height: 62px;
        padding: 5px 6px;
    }

    .rb-mobile-native .rb-hud-health {
        gap: 5px;
    }

    .rb-mobile-native .rb-hud-health strong,
    .rb-mobile-native .rb-turn-core strong {
        font-size: var(--fs-md);
    }

    .rb-mobile-native .rb-hp-meter {
        height: 5px;
    }

    .rb-mobile-native .rb-zone-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2px;
        font-size: var(--fs-3xs);
    }

    .rb-mobile-native .rb-turn-core {
        min-height: 0;
        padding: 5px 2px;
    }

    .rb-mobile-native .rb-battle-zone {
        min-height: 280px;
        height: 100%;
        grid-template-rows: minmax(112px, 1fr) 20px minmax(112px, 1fr);
        gap: 4px;
        padding: 6px 5px;
    }

    .rb-mobile-native .rb-field-row {
        gap: 4px;
    }

    .rb-mobile-native .rb-field-row > span {
        font-size: var(--fs-3xs);
        line-height: 1;
    }

    .rb-mobile-native .rb-field-slots {
        gap: 4px;
    }

    .rb-mobile-native .rb-field-card,
    .rb-mobile-native .rb-field-slot-empty {
        height: clamp(112px, 27vw, 120px);
        min-height: 112px;
    }

    .rb-mobile-native .rb-field-card .rb-card-titlebar {
        padding: 4px 5px;
    }

    .rb-mobile-native .rb-field-card .rb-card-titlebar strong {
        font-size: var(--fs-3xs);
    }

    .rb-mobile-native .rb-field-card .rb-card-textbox {
        display: none;
    }

    .rb-mobile-native .rb-field-vs {
        font-size: var(--fs-xs);
    }

    .rb-mobile-native .rb-evolution-panel {
        display: none;
    }

    .rb-mobile-native .rb-mobile-action-bar {
        grid-area: actionbar;
        position: sticky;
        bottom: var(--rb-safe-bottom);
        z-index: 80;
        display: grid;
        grid-template-rows: 108px 70px;
        gap: 6px;
        min-height: 0;
        padding: 6px;
        border: 1px solid rgba(244, 173, 38, 0.28);
        background:
            linear-gradient(180deg, rgba(10, 12, 16, 0.98), rgba(3, 4, 5, 0.98));
        box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.46);
    }

    .rb-mobile-native .rb-mobile-action-bar > .rb-player-hand,
    .rb-mobile-native .rb-mobile-action-bar > .rb-actions-row {
        grid-area: auto;
    }

    .rb-mobile-native .rb-action-bar-meta {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 6px;
        min-height: 18px;
        color: var(--rb-muted);
        font-size: var(--fs-3xs);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .rb-mobile-native .rb-action-bar-meta strong {
        color: var(--rb-gold-2);
        font-size: var(--fs-3xs);
    }

    .rb-mobile-native .rb-player-hand {
        min-height: 0;
        height: 108px;
        overflow: hidden;
    }

    .rb-mobile-native .rb-hand {
        grid-auto-columns: clamp(82px, 24vw, 96px);
        gap: 6px;
        height: 84px;
        padding: 3px 1px 2px;
    }

    .rb-mobile-native .rb-hand .rb-mini-card {
        height: 80px;
        min-height: 80px;
        grid-template-rows: 38px 1fr;
    }

    .rb-mobile-native .rb-hand .rb-mini-card .rb-card-textbox,
    .rb-mobile-native .rb-hand .rb-mini-card .rb-card-statline {
        display: none;
    }

    .rb-mobile-native .rb-hand .rb-mini-card .rb-card-titlebar {
        padding: 4px 5px;
    }

    .rb-mobile-native .rb-hand .rb-mini-card .rb-card-titlebar strong {
        font-size: var(--fs-3xs);
    }

    .rb-mobile-native .rb-hand-count {
        right: 4px;
        bottom: 0;
        font-size: var(--fs-3xs);
    }

    .rb-mobile-native .rb-actions-row {
        position: relative;
        bottom: auto;
        min-height: 0;
        height: 64px;
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr);
        gap: 6px;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .rb-mobile-native #next-turn-button.rb-button-secondary,
    .rb-mobile-native #play-button.rb-button-primary,
    .rb-mobile-native .rb-actions-row .rb-cta,
    .rb-mobile-native .rb-actions-row .rb-secondary {
        min-height: 48px;
        height: 48px;
        padding: 6px 8px;
        font-size: var(--fs-2xs);
    }

    .rb-mobile-native .rb-actions-row small {
        min-height: 14px;
        font-size: var(--fs-3xs);
        line-height: 1.15;
    }

    .rb-mobile-native .rb-result-panel {
        min-height: 0;
        max-height: 104px;
        grid-template-columns: minmax(0, 1fr) 64px;
        gap: 6px;
        padding: 7px;
        overflow: hidden;
    }

    .rb-mobile-native .rb-result-panel > div {
        max-height: 90px;
        overflow-y: auto;
        gap: 3px;
    }

    .rb-mobile-native .rb-result-panel span {
        font-size: var(--fs-3xs);
    }

    .rb-mobile-native .rb-result-panel strong {
        font-size: var(--fs-sm);
    }

    .rb-mobile-native .rb-result-panel p {
        font-size: var(--fs-3xs);
        line-height: 1.2;
    }

    .rb-mobile-native .rb-resolution-strip,
    .rb-mobile-native .rb-tactics-strip,
    .rb-mobile-native .rb-ability-events {
        display: none;
    }

    .rb-mobile-native .rb-result-panel .rb-secondary {
        min-height: 40px;
        font-size: var(--fs-3xs);
    }

    .rb-mobile-native .rb-log,
    .rb-mobile-native .rb-log:not(.is-open),
    .rb-mobile-native .rb-log.is-open {
        display: none;
    }

    .rb-mobile-native .rb-damage-number {
        top: 6%;
        right: 2%;
        font-size: var(--fs-3xs);
    }
}

@media (max-width: 380px) {
    .rb-mobile-native .rb-game-board {
        grid-template-rows: 58px minmax(256px, 1fr) 178px minmax(78px, 96px);
    }

    .rb-mobile-native .rb-battle-zone {
        min-height: 256px;
    }

    .rb-mobile-native .rb-mobile-action-bar {
        grid-template-rows: 100px 66px;
    }
}

/* BLOCK 1 — combat juice visual pass. Presentation-only, small surfaces,
   transform/opacity motion, and short-lived impact states. */
.rb-hud {
    height: 118px;
    grid-template-columns: 326px 116px 326px;
    gap: 18px;
}

.rb-hud-side,
.rb-turn-core {
    border-color: rgba(130, 116, 92, 0.24);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0) 36%),
        linear-gradient(180deg, rgba(20, 23, 25, 0.88), rgba(4, 5, 6, 0.94));
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.54),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -18px 28px rgba(0, 0, 0, 0.34);
}

.rb-hud-side {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 14px;
    padding: 10px 14px;
}

.rb-hud-bot {
    grid-template-columns: minmax(0, 1fr) 76px;
}

.rb-mark,
.rb-bot-emblem {
    width: 76px;
    height: 76px;
    font-size: var(--fs-xl);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        inset 0 -18px 24px rgba(0, 0, 0, 0.46),
        0 12px 28px rgba(0, 0, 0, 0.46);
}

.rb-hud-copy {
    gap: 6px;
}

.rb-hud-health {
    --orb-accent: var(--rb-gold);
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.rb-hud-bot .rb-hud-health {
    --orb-accent: var(--rb-cyan);
    grid-template-columns: minmax(0, 1fr) 72px;
}

.rb-hud-bot .rb-life-orb {
    order: 2;
}

.rb-hud-bot .rb-life-orb-readout {
    order: 1;
    justify-items: end;
    text-align: right;
}

.rb-life-orb {
    --hp-ratio: 1;
    position: relative;
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    overflow: hidden;
    border: 2px solid rgba(99, 93, 83, 0.76);
    border-radius: 50%;
    background:
        radial-gradient(circle at 36% 24%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.02) 19%, transparent 24%),
        radial-gradient(circle at 50% 55%, rgba(8, 9, 10, 0.95), rgba(0, 0, 0, 1) 70%),
        linear-gradient(145deg, #2b2924, #050607 64%, #16130e);
    box-shadow:
        inset 0 0 0 4px rgba(0, 0, 0, 0.58),
        inset 0 12px 18px rgba(255, 255, 255, 0.045),
        inset 0 -18px 24px rgba(0, 0, 0, 0.72),
        0 10px 24px rgba(0, 0, 0, 0.48);
    clip-path: none;
    contain: layout paint;
}

.rb-life-orb b {
    position: absolute;
    inset: 10px;
    display: block;
    width: auto;
    height: auto;
    border-radius: 50%;
    transform: scaleY(var(--hp-ratio));
    transform-origin: center bottom;
    background:
        radial-gradient(circle at 38% 25%, rgba(255, 255, 255, 0.48), transparent 18%),
        linear-gradient(180deg, color-mix(in srgb, var(--orb-accent), #ffffff 22%), var(--orb-accent) 44%, rgba(104, 17, 17, 0.92));
    box-shadow:
        inset 0 8px 12px rgba(255, 255, 255, 0.14),
        inset 0 -12px 18px rgba(0, 0, 0, 0.38),
        0 0 18px color-mix(in srgb, var(--orb-accent), transparent 68%);
    transition: transform 220ms cubic-bezier(0.24, 0.82, 0.22, 1);
}

.rb-life-orb b::after {
    content: "";
    position: absolute;
    inset: -18% -24%;
    border-radius: 45%;
    background:
        radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, 0.26), transparent 48%),
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    opacity: 0.5;
    transform: translate3d(-8%, 4%, 0) rotate(8deg);
    animation: rb-life-liquid-drift 5.8s ease-in-out infinite alternate;
}

.rb-life-orb__glass,
.rb-life-orb__runes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 50%;
}

.rb-life-orb__glass {
    background:
        radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.32), transparent 18%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 42%, rgba(0, 0, 0, 0.34));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.rb-life-orb__runes {
    inset: 6px;
    opacity: 0.24;
    background:
        conic-gradient(from 12deg, transparent 0 18deg, rgba(255, 255, 255, 0.34) 18deg 22deg, transparent 22deg 64deg, rgba(255, 255, 255, 0.28) 64deg 68deg, transparent 68deg 100deg),
        radial-gradient(circle, transparent 55%, rgba(255, 255, 255, 0.18) 56% 58%, transparent 59%);
}

.rb-life-orb-readout {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0 8px;
    align-items: center;
    justify-content: start;
    min-width: 0;
}

.rb-life-orb-readout i {
    grid-row: span 2;
}

.rb-life-orb-readout small {
    color: var(--rb-muted);
    font-size: var(--fs-2xs);
    font-weight: 1000;
    line-height: 1;
    text-transform: uppercase;
}

.rb-hud-health strong,
.rb-turn-core strong {
    font-size: var(--fs-display);
    line-height: 0.88;
}

.rb-hud-side.is-low-hp .rb-life-orb,
.rb-life-orb.is-low-hp {
    border-color: rgba(255, 115, 95, 0.78);
    animation: rb-low-hp-orb-pulse 1.9s ease-in-out infinite;
}

.rb-hud-side.is-low-hp .rb-life-orb__runes,
.rb-life-orb.is-low-hp .rb-life-orb__runes {
    opacity: 0.42;
    animation: rb-low-hp-rune-smoke 2.6s ease-in-out infinite alternate;
}

.rb-hud-side[data-health-state="danger"] .rb-life-orb-readout strong {
    color: #ffe0d8;
    text-shadow:
        0 2px 0 rgba(70, 7, 4, 0.72),
        0 0 16px rgba(255, 83, 67, 0.3);
}

.rb-zone-row {
    gap: 5px;
    opacity: 0.88;
}

.rb-zone-row span {
    padding: 3px 6px;
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.18);
}

@keyframes rb-life-liquid-drift {
    0% { transform: translate3d(-8%, 4%, 0) rotate(8deg); }
    100% { transform: translate3d(8%, -4%, 0) rotate(-7deg); }
}

@keyframes rb-low-hp-orb-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow:
            inset 0 0 0 4px rgba(0, 0, 0, 0.58),
            inset 0 -18px 24px rgba(0, 0, 0, 0.72),
            0 10px 24px rgba(0, 0, 0, 0.48);
    }
    50% {
        transform: scale(1.025);
        box-shadow:
            inset 0 0 0 4px rgba(0, 0, 0, 0.58),
            inset 0 -18px 24px rgba(0, 0, 0, 0.72),
            0 10px 24px rgba(0, 0, 0, 0.48),
            0 0 22px rgba(255, 84, 67, 0.24);
    }
}

@keyframes rb-low-hp-rune-smoke {
    0% { transform: translate3d(0, 2px, 0) rotate(0deg); opacity: 0.28; }
    100% { transform: translate3d(0, -3px, 0) rotate(8deg); opacity: 0.5; }
}

.rb-tcg-card {
    --rarity-metal-dark: #171614;
    --rarity-metal-mid: #50483d;
    --rarity-metal-edge: #8c7b65;
    --rarity-rune: transparent;
    --rarity-ring: linear-gradient(145deg, var(--rarity-metal-edge), var(--rarity-metal-mid) 42%, var(--rarity-metal-dark) 100%);
    border: 2px solid color-mix(in srgb, var(--rarity-metal-edge), var(--element-core) 24%);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.05), transparent 28%),
        radial-gradient(circle at 50% 42%, var(--element-soft), transparent 58%),
        linear-gradient(180deg, #090a0b, #020303);
    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.56),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -18px 28px rgba(0, 0, 0, 0.34);
}

.rb-tcg-card.is-rarity-common {
    --rarity-metal-dark: #171512;
    --rarity-metal-mid: #463c31;
    --rarity-metal-edge: #85735e;
}

.rb-tcg-card.is-rarity-rare,
.rb-tcg-card.is-rarity-uncommon {
    --rarity-metal-dark: #101821;
    --rarity-metal-mid: #617382;
    --rarity-metal-edge: #c7d3dd;
    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.58),
        0 0 18px rgba(161, 203, 224, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -18px 28px rgba(0, 0, 0, 0.34);
}

.rb-tcg-card.is-rarity-legendary {
    --rarity-metal-dark: #241506;
    --rarity-metal-mid: #b17824;
    --rarity-metal-edge: #ffe0a1;
    --rarity-rune: rgba(255, 210, 116, 0.22);
    animation: rb-legendary-rune-pulse 2.8s ease-in-out infinite;
}

.rb-card-frame-layer {
    opacity: 0.9;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 25%, rgba(0, 0, 0, 0.58)),
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), transparent 38%),
        radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 36%), rgba(255, 255, 255, 0.2), transparent 19%),
        var(--rarity-ring);
    mix-blend-mode: normal;
}

.rb-card-frame-layer::before {
    border-color: color-mix(in srgb, var(--rarity-metal-edge), var(--element-core) 26%);
    box-shadow:
        inset 0 0 20px rgba(0, 0, 0, 0.52),
        inset 0 0 12px var(--element-soft),
        0 0 12px var(--rarity-rune);
}

.rb-card-frame-layer::after {
    background:
        linear-gradient(90deg, transparent 0 18%, var(--rarity-rune) 18% 20%, transparent 20% 80%, var(--rarity-rune) 80% 82%, transparent 82%),
        linear-gradient(180deg, transparent 0 18%, rgba(255, 255, 255, 0.08) 18% 19%, transparent 19% 81%, rgba(255, 255, 255, 0.07) 81% 82%, transparent 82%);
}

@keyframes rb-legendary-rune-pulse {
    0%, 100% {
        box-shadow:
            0 18px 38px rgba(0, 0, 0, 0.58),
            0 0 18px rgba(244, 173, 38, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.1),
            inset 0 -18px 28px rgba(0, 0, 0, 0.34);
    }
    50% {
        box-shadow:
            0 18px 38px rgba(0, 0, 0, 0.58),
            0 0 28px rgba(244, 173, 38, 0.24),
            inset 0 1px 0 rgba(255, 255, 255, 0.14),
            inset 0 -18px 28px rgba(0, 0, 0, 0.34);
    }
}

.rb-card-stat {
    border-radius: 0;
    clip-path: polygon(50% 0, 100% 22%, 88% 100%, 12% 100%, 0 22%);
    background:
        radial-gradient(circle at 36% 24%, rgba(255, 255, 255, 0.28), transparent 38%),
        linear-gradient(145deg, #89765d, #2c251d 62%, #100d0a);
    box-shadow:
        0 7px 14px rgba(0, 0, 0, 0.58),
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -8px 12px rgba(0, 0, 0, 0.48);
}

.rb-card-stat.is-atk {
    background:
        radial-gradient(circle at 36% 24%, rgba(255, 225, 186, 0.34), transparent 40%),
        linear-gradient(145deg, #98613a, #4a2018 62%, #170805);
}

.rb-card-stat.is-guard,
.rb-card-stat.is-grd {
    background:
        radial-gradient(circle at 36% 24%, rgba(231, 247, 255, 0.34), transparent 40%),
        linear-gradient(145deg, #879aa8, #263746 62%, #09131b);
}

.rb-card-stat b {
    font-size: var(--fs-sm);
}

.rb-card-stat small {
    font-size: var(--fs-3xs);
}

.rb-game-viewport.vfx-screen-shake {
    animation: rb-vfx-shake-normal 160ms ease-in-out both;
    will-change: transform;
}

.rb-game-viewport.vfx-screen-shake.vfx-screen-shake-heavy {
    animation: rb-vfx-shake-heavy 180ms cubic-bezier(0.36, 0, 0.2, 1) both;
}

@keyframes rb-vfx-shake-normal {
    0%, 100% { transform: translate3d(0, 0, 0); }
    20% { transform: translate3d(-3px, 1px, 0); }
    42% { transform: translate3d(3px, -1px, 0); }
    64% { transform: translate3d(-2px, 0, 0); }
    82% { transform: translate3d(1px, 1px, 0); }
}

@keyframes rb-vfx-shake-heavy {
    0%, 100% { transform: translate3d(0, 0, 0); }
    14% { transform: translate3d(-5px, 3px, 0); }
    28% { transform: translate3d(5px, -3px, 0); }
    44% { transform: translate3d(-4px, -2px, 0); }
    60% { transform: translate3d(4px, 2px, 0); }
    78% { transform: translate3d(-2px, 1px, 0); }
}

.rb-game-board.is-hit-paused {
    transform: translateX(calc(-50% + var(--rb-safe-offset-x))) scale(var(--rb-scale));
}

.rb-game-board.is-hit-paused .rb-field-card.is-attack-lunging {
    transition-duration: 0ms;
}

@media (min-width: 1180px) and (min-height: 680px) {
    .rb-hud {
        height: 108px;
    }

    .rb-life-orb {
        width: 64px;
        height: 64px;
    }

    .rb-hud-health {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .rb-hud-bot .rb-hud-health {
        grid-template-columns: minmax(0, 1fr) 64px;
    }
}

@media (max-width: 430px) {
    .rb-mobile-native .rb-life-orb,
    .rb-life-orb {
        width: 52px;
        height: 52px;
        min-width: 52px;
        clip-path: none;
    }

    .rb-mobile-native .rb-life-orb b,
    .rb-life-orb b {
        inset: 7px;
        width: auto;
        height: auto;
        transform-origin: center bottom;
    }

    .rb-mobile-native .rb-hud-health,
    .rb-hud-health {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 8px;
    }

    .rb-mobile-native .rb-hud-bot .rb-hud-health,
    .rb-hud-bot .rb-hud-health {
        grid-template-columns: minmax(0, 1fr) 52px;
    }

    .rb-hud-health strong,
    .rb-turn-core strong {
        font-size: var(--fs-xl);
    }

    .rb-card-stat b {
        font-size: var(--fs-2xs);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rb-life-orb b::after,
    .rb-life-orb.is-low-hp,
    .rb-hud-side.is-low-hp .rb-life-orb,
    .rb-life-orb.is-low-hp .rb-life-orb__runes,
    .rb-hud-side.is-low-hp .rb-life-orb__runes,
    .rb-tcg-card.is-rarity-legendary,
    .rb-game-viewport.vfx-screen-shake,
    .rb-game-viewport.vfx-screen-shake.vfx-screen-shake-heavy,
    .rb-field-card.is-combat-winner,
    .rb-bot-card.is-combat-winner,
    .rb-field-card.is-combat-loser,
    .rb-bot-card.is-combat-loser,
    .rb-field-card.is-combat-trading,
    .rb-bot-card.is-combat-trading,
    .rb-damage-number {
        animation: none !important;
    }
}

.rb-campaign-shell {
    /* F20: era 1080px e deixava 420px de vácuo em desktop largo. Agora
       herda a largura expandida do .rb-product-shell (1560px). */
    width: min(100%, 1560px);
}

.rb-campaign-hero {
    margin-bottom: 18px;
}

.rb-campaign-login {
    margin: 0 0 18px;
}

.rb-campaign-login .rb-cta {
    margin-top: 18px;
}

.rb-campaign-path {
    display: grid;
    gap: 12px;
}

.rb-campaign-node {
    /* F6: silhueta + accent por boss substitui o template plano. */
    display: grid;
    grid-template-columns: 96px 68px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    min-height: 154px;
    padding: 20px 24px 20px 14px;
    border: 1px solid var(--rb-line);
    background:
        linear-gradient(100deg, color-mix(in srgb, var(--node-accent, #f4ad26) 18%, transparent), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
        rgba(8, 10, 13, 0.92);
    box-shadow: var(--rb-shadow);
    clip-path: var(--rb-cut);
    transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.rb-campaign-silhouette {
    position: relative;
    display: grid;
    place-items: center;
    width: 88px;
    height: 110px;
    border: 1px solid color-mix(in srgb, var(--node-accent, #f4ad26) 40%, var(--rb-line));
    border-radius: var(--rb-cut-soft);
    background:
        radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--node-accent, #f4ad26) 22%, transparent), transparent 65%),
        linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.42)),
        var(--rb-panel);
    overflow: hidden;
}

.rb-campaign-node.is-completed .rb-campaign-silhouette {
    border-color: rgba(244, 173, 38, 0.55);
}

.rb-campaign-node.is-locked .rb-campaign-silhouette {
    border-color: rgba(214, 219, 222, 0.2);
    background: rgba(8, 10, 13, 0.86);
    opacity: 0.55;
}
.rb-campaign-node.is-locked .rb-campaign-glyph {
    background: var(--rb-muted);
    opacity: 0.5;
}

.rb-campaign-glyph {
    width: 56px;
    height: 56px;
    background: var(--node-accent, #f4ad26);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    mask-size: contain;
    -webkit-mask-size: contain;
    opacity: 0.86;
}
/* Glyphs por elemento — formas SVG inline simples (chama, pedra, gota,
   olho, coroa). Substituem placeholders quando o pipeline de arte ainda
   não entregou ilustração bespoke. */
.rb-campaign-glyph[data-glyph="fire"] {
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M32 4c4 10 14 14 14 24a14 14 0 1 1-28 0c0-6 4-10 4-16 4 4 6 4 10-8z' fill='white'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M32 4c4 10 14 14 14 24a14 14 0 1 1-28 0c0-6 4-10 4-16 4 4 6 4 10-8z' fill='white'/></svg>");
}
.rb-campaign-glyph[data-glyph="earth"] {
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M8 50 L20 22 L34 30 L46 14 L56 50z' fill='white'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M8 50 L20 22 L34 30 L46 14 L56 50z' fill='white'/></svg>");
}
.rb-campaign-glyph[data-glyph="water"] {
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M32 6c10 14 18 22 18 32a18 18 0 1 1-36 0c0-10 8-18 18-32z' fill='white'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M32 6c10 14 18 22 18 32a18 18 0 1 1-36 0c0-10 8-18 18-32z' fill='white'/></svg>");
}
.rb-campaign-glyph[data-glyph="shadow"] {
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M32 12 C16 12 6 28 6 32 C6 36 16 52 32 52 C48 52 58 36 58 32 C58 28 48 12 32 12z M32 22a10 10 0 1 1 0 20 a10 10 0 1 1 0-20z' fill='white' fill-rule='evenodd'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M32 12 C16 12 6 28 6 32 C6 36 16 52 32 52 C48 52 58 36 58 32 C58 28 48 12 32 12z M32 22a10 10 0 1 1 0 20 a10 10 0 1 1 0-20z' fill='white' fill-rule='evenodd'/></svg>");
}
.rb-campaign-glyph[data-glyph="royal"] {
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M8 22 L18 36 L32 14 L46 36 L56 22 L52 50 L12 50 z' fill='white'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M8 22 L18 36 L32 14 L46 36 L56 22 L52 50 L12 50 z' fill='white'/></svg>");
}
.rb-campaign-glyph[data-glyph="neutral"] {
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><circle cx='32' cy='32' r='20' fill='white'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><circle cx='32' cy='32' r='20' fill='white'/></svg>");
}

.rb-campaign-seal,
.rb-campaign-lock {
    position: absolute;
    right: 6px;
    bottom: 6px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: var(--fs-2xs);
    font-weight: 900;
}
.rb-campaign-seal {
    color: #1a1003;
    background: var(--rb-gold);
}
.rb-campaign-lock {
    color: var(--rb-muted);
    background: rgba(255, 255, 255, 0.08);
    font-size: var(--fs-3xs);
}

.rb-campaign-node.is-available,
.rb-campaign-node.is-completed {
    cursor: pointer;
}

.rb-campaign-node.is-available:hover,
.rb-campaign-node.is-available:focus-visible {
    border-color: rgba(199, 153, 73, 0.7);
    transform: translateY(-2px);
}

.rb-campaign-node.is-completed {
    border-color: rgba(76, 165, 112, 0.32);
}

.rb-campaign-node.is-locked {
    opacity: 0.58;
}

.rb-campaign-step {
    display: grid;
    justify-items: center;
    gap: 10px;
    align-self: stretch;
    color: var(--rb-gold);
    font-weight: 900;
}

.rb-campaign-step i {
    display: block;
    width: 1px;
    height: 100%;
    min-height: 64px;
    background: linear-gradient(180deg, var(--rb-gold), transparent);
}

.rb-campaign-node:last-child .rb-campaign-step i {
    opacity: 0;
}

.rb-campaign-status {
    display: inline-flex;
    margin-bottom: 6px;
    color: var(--rb-gold);
    font-size: var(--fs-2xs);
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.rb-campaign-node.is-completed .rb-campaign-status {
    color: #69c88b;
}

.rb-campaign-copy h2 {
    margin: 0 0 8px;
    color: var(--rb-text);
    font-family: var(--rb-font-display);
    font-size: clamp(25px, 4vw, 31px);
    line-height: 1;
    text-transform: uppercase;
}

.rb-campaign-copy p {
    max-width: 540px;
    margin: 0 0 14px;
    color: var(--rb-muted);
}

.rb-campaign-modifiers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
}

.rb-campaign-modifiers span {
    padding: 4px 9px;
    border: 1px solid rgba(199, 153, 73, 0.28);
    border-radius: 999px;
    color: #dbbb78;
    font-size: var(--fs-2xs);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rb-campaign-copy dl {
    display: flex;
    gap: 22px;
    margin: 0;
}

.rb-campaign-copy dt {
    color: var(--rb-muted);
    font-size: var(--fs-2xs);
    text-transform: uppercase;
}

.rb-campaign-copy dd {
    margin: 3px 0 0;
    color: var(--rb-text);
    font-size: var(--fs-sm);
    font-weight: 800;
}

.rb-campaign-action .rb-cta,
.rb-campaign-action .rb-secondary {
    display: inline-grid;
    min-width: 124px;
    min-height: 48px;
    place-items: center;
    text-decoration: none;
}

@media (max-width: 680px) {
    .rb-campaign-node {
        grid-template-columns: 42px minmax(0, 1fr);
        padding: 18px 16px 18px 8px;
    }

    .rb-campaign-action {
        grid-column: 2;
    }

    .rb-campaign-copy dl {
        gap: 14px;
        flex-wrap: wrap;
    }
}

.rb-damage-number {
    min-width: 42px;
    padding: 6px 9px;
    font-size: var(--fs-lg);
    line-height: 1;
}

.rb-game-board.is-campaign-boss {
    --boss-accent: #c79949;
}

.rb-game-board.is-campaign-boss::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.2;
    box-shadow: inset 0 0 96px var(--boss-accent);
    animation: rb-boss-ambience 3.2s ease-in-out infinite alternate;
}

.rb-game-board.is-campaign-boss[data-boss-intensity="heavy"]::after {
    opacity: 0.34;
}

.rb-game-board.is-boss-defeated::after {
    animation-duration: 540ms;
    opacity: 0.46;
}

.rb-boss-intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 190;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 52%);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 220ms ease, transform 220ms ease;
    pointer-events: none;
}

.rb-boss-intro-overlay.is-active {
    opacity: 1;
    transform: translateY(0);
}

.rb-boss-intro-kicker {
    color: var(--boss-accent, #c79949);
    font-size: var(--fs-xs);
    font-weight: 900;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.rb-boss-intro-overlay strong {
    color: #fff0ca;
    font-family: var(--rb-font-display);
    font-size: clamp(38px, 8vw, 72px);
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 0 0 34px rgba(199, 153, 73, 0.42);
}

.rb-boss-intro-overlay p {
    margin: 0;
    color: #e2c387;
    font-size: var(--fs-sm);
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.rb-campaign-defeat-advice {
    display: grid;
    gap: 5px;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(199, 153, 73, 0.3);
    background: rgba(199, 153, 73, 0.08);
}

.rb-campaign-defeat-advice[hidden] {
    display: none;
}

.rb-campaign-defeat-advice strong {
    color: #e7bd69;
    font-size: var(--fs-2xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.rb-campaign-defeat-advice p,
.rb-campaign-defeat-advice span {
    margin: 0;
    color: var(--rb-text);
    font-size: var(--fs-2xs);
}

@keyframes rb-boss-ambience {
    from { opacity: 0.16; }
    to { opacity: 0.36; }
}

@media (max-width: 760px) {
    .rb-mobile-native .rb-damage-number {
        min-width: 32px;
        padding: 4px 6px;
        font-size: var(--fs-sm);
    }

    .rb-boss-intro-overlay strong {
        font-size: clamp(29px, 9vw, 46px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rb-game-board.is-campaign-boss::after {
        animation: none;
    }

    .rb-boss-intro-overlay {
        transition: none;
    }
}

/* v76: mobile readability pass. Keep the arena playable while giving nav
   labels, economy chips and hand cards enough room to breathe. */
@media (max-width: 760px) {
    body.rb-game-page.rb-mobile-native {
        --rb-mobile-nav-height: 154px;
    }

    .rb-mobile-native .rb-global-nav {
        grid-template-columns: 38px minmax(0, 1fr);
        grid-template-areas:
            "brand tabs"
            "player player";
        gap: 5px 7px;
        padding: 7px;
    }

    .rb-mobile-native .rb-global-brand span {
        width: 34px;
        height: 34px;
        font-size: var(--fs-md);
    }

    .rb-mobile-native .rb-global-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
    }

    .rb-mobile-native .rb-global-tabs a {
        min-height: 28px;
        padding: 5px 4px;
        font-size: var(--fs-3xs);
        letter-spacing: 0.07em;
    }

    .rb-mobile-native .rb-global-player {
        grid-template-columns: 0.9fr 0.9fr 1fr;
        gap: 4px;
        overflow: visible;
    }

    .rb-mobile-native .rb-global-player > * {
        min-height: 32px;
        padding: 5px 6px;
        font-size: var(--fs-3xs);
    }

    .rb-mobile-native .rb-global-xp {
        display: none;
    }

    .rb-mobile-native .rb-global-identity strong,
    .rb-mobile-native .rb-global-wallet strong {
        font-size: var(--fs-2xs);
    }

    .rb-mobile-native .rb-game-viewport {
        padding-top: calc(var(--rb-mobile-nav-height, 104px) + var(--rb-safe-top) + 5px);
    }

    .rb-mobile-native .rb-game-board {
        height: calc(100dvh - var(--rb-mobile-nav-height, 104px) - var(--rb-safe-top) - var(--rb-safe-bottom) - 12px) !important;
    }

    .rb-mobile-native .rb-hand .rb-mini-card {
        min-width: 112px;
    }

    .rb-mobile-native .rb-hand .rb-mini-card .rb-card-titlebar strong {
        font-size: var(--fs-3xs);
        line-height: 1.1;
    }
}

@media (max-width: 420px) {
    body.rb-game-page.rb-mobile-native {
        --rb-mobile-nav-height: 164px;
    }

    .rb-mobile-native .rb-global-tabs a {
        font-size: var(--fs-3xs);
    }

    .rb-mobile-native .rb-global-player {
        grid-template-columns: 1fr 1fr;
    }

    .rb-mobile-native .rb-nav-auth {
        grid-column: 1 / -1;
    }
}

/* === F2 — 3 níveis de painel ===
   .rb-panel-hero  → identidade ALTA: clip-path octogonal + glow + borda gold 1.5px.
   .rb-panel-base  → conteúdo: borda 1px line + cantos suaves (sem clip-path).
   .rb-panel-surface → substrato: sem borda visível, só elevação por contraste.
*/
.rb-panel-hero {
    border-radius: var(--rb-cut-soft);
    border: 1.5px solid var(--rb-gold);
    box-shadow: 0 0 0 1px rgba(244, 173, 38, 0.18), var(--rb-shadow);
}
.rb-panel-base {
    border: 1px solid var(--rb-line);
    border-radius: var(--rb-cut-soft);
    background: var(--rb-panel);
    box-shadow: var(--rb-shadow);
}
.rb-panel-surface {
    border: 0;
    border-radius: var(--rb-cut-soft);
    background: rgba(255, 255, 255, 0.018);
}

/* === F25: ornamentos SVG elaborados — Duel of Champions ===
   Substitui o "L bracket" simples do F23-C por filigrana medieval real:
   curvas com volutas (scrolls) nos 4 cantos, desenhadas em SVG inline
   data-URI. Aplicado em painéis hero (rb-hud-player, rb-hud-bot) e em
   .rb-result-panel pra coerência visual. */

.rb-hud-player,
.rb-hud-bot,
.rb-result-panel {
    position: relative;
    /* Moldura DoC: borda 1.5px bronze + gradient interior + inset highlights. */
    border: 1.5px solid rgba(196, 160, 80, 0.55);
    background:
        /* canto inferior esquerdo — SVG espelhado do superior esquerdo */
        url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23c4a050' stroke-width='1.4'%3E%3Cpath d='M 2 16 Q 2 2 16 2'/%3E%3Cpath d='M 6 16 Q 6 6 16 6' opacity='0.6'/%3E%3Ccircle cx='2' cy='2' r='1.6' fill='%23c4a050' stroke='none'/%3E%3Cpath d='M 12 2 L 16 2 L 16 6 L 14 6 L 14 4 L 12 4 Z' fill='%23c4a050' stroke='none' opacity='0.78'/%3E%3Cpath d='M 2 12 L 2 16 L 6 16 L 6 14 L 4 14 L 4 12 Z' fill='%23c4a050' stroke='none' opacity='0.78'/%3E%3C/g%3E%3C/svg%3E") top left no-repeat,
        url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23c4a050' stroke-width='1.4' transform='translate(32 0) scale(-1 1)'%3E%3Cpath d='M 2 16 Q 2 2 16 2'/%3E%3Cpath d='M 6 16 Q 6 6 16 6' opacity='0.6'/%3E%3Ccircle cx='2' cy='2' r='1.6' fill='%23c4a050' stroke='none'/%3E%3Cpath d='M 12 2 L 16 2 L 16 6 L 14 6 L 14 4 L 12 4 Z' fill='%23c4a050' stroke='none' opacity='0.78'/%3E%3Cpath d='M 2 12 L 2 16 L 6 16 L 6 14 L 4 14 L 4 12 Z' fill='%23c4a050' stroke='none' opacity='0.78'/%3E%3C/g%3E%3C/svg%3E") top right no-repeat,
        url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23c4a050' stroke-width='1.4' transform='translate(0 32) scale(1 -1)'%3E%3Cpath d='M 2 16 Q 2 2 16 2'/%3E%3Cpath d='M 6 16 Q 6 6 16 6' opacity='0.6'/%3E%3Ccircle cx='2' cy='2' r='1.6' fill='%23c4a050' stroke='none'/%3E%3Cpath d='M 12 2 L 16 2 L 16 6 L 14 6 L 14 4 L 12 4 Z' fill='%23c4a050' stroke='none' opacity='0.78'/%3E%3Cpath d='M 2 12 L 2 16 L 6 16 L 6 14 L 4 14 L 4 12 Z' fill='%23c4a050' stroke='none' opacity='0.78'/%3E%3C/g%3E%3C/svg%3E") bottom left no-repeat,
        url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23c4a050' stroke-width='1.4' transform='translate(32 32) scale(-1 -1)'%3E%3Cpath d='M 2 16 Q 2 2 16 2'/%3E%3Cpath d='M 6 16 Q 6 6 16 6' opacity='0.6'/%3E%3Ccircle cx='2' cy='2' r='1.6' fill='%23c4a050' stroke='none'/%3E%3Cpath d='M 12 2 L 16 2 L 16 6 L 14 6 L 14 4 L 12 4 Z' fill='%23c4a050' stroke='none' opacity='0.78'/%3E%3Cpath d='M 2 12 L 2 16 L 6 16 L 6 14 L 4 14 L 4 12 Z' fill='%23c4a050' stroke='none' opacity='0.78'/%3E%3C/g%3E%3C/svg%3E") bottom right no-repeat,
        /* gradient interior do painel */
        linear-gradient(180deg, rgba(46, 33, 22, 0.94), rgba(16, 10, 5, 0.94));
    background-size: 32px 32px, 32px 32px, 32px 32px, 32px 32px, 100% 100%;
    box-shadow:
        inset 0 0 0 1px rgba(232, 212, 164, 0.12),
        inset 0 0 32px rgba(0, 0, 0, 0.64),
        0 20px 40px rgba(0, 0, 0, 0.48);
}

/* F25: ornamento centralizado no topo dos hero portraits — pequeno
   brasão decorativo via ::before. */
.rb-hud-player::before,
.rb-hud-bot::before {
    content: "";
    position: absolute;
    z-index: 9;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 16px;
    pointer-events: none;
    background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 16'%3E%3Cg fill='%23c4a050'%3E%3Cpath d='M 16 0 L 22 6 L 16 12 L 10 6 Z' opacity='0.92'/%3E%3Ccircle cx='16' cy='6' r='1.6' fill='%230c0805'/%3E%3Cpath d='M 4 6 Q 8 4 12 6 Q 8 8 4 6 Z' opacity='0.62'/%3E%3Cpath d='M 28 6 Q 24 4 20 6 Q 24 8 28 6 Z' opacity='0.62'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

/* === S1: Tutorial in-game overlay === */
.rb-tutorial-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.72);
    display: grid;
    place-items: center;
    padding: 24px;
}

.rb-tutorial-spotlight {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    border: 2px solid rgba(196, 160, 80, 0.85);
    border-radius: 12px;
    box-shadow:
        0 0 0 9999px rgba(0, 0, 0, 0.72),
        0 0 32px rgba(196, 160, 80, 0.42),
        inset 0 0 18px rgba(196, 160, 80, 0.22);
    transition: top 220ms ease, left 220ms ease, width 220ms ease, height 220ms ease;
}

.rb-tutorial-balloon {
    position: relative;
    z-index: 2;
    pointer-events: auto;
    max-width: 420px;
    padding: 24px 26px 22px;
    border: 1.5px solid rgba(196, 160, 80, 0.62);
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(46, 33, 22, 0.96), rgba(16, 10, 5, 0.96));
    box-shadow:
        inset 0 0 0 1px rgba(232, 212, 164, 0.14),
        inset 0 0 32px rgba(0, 0, 0, 0.62),
        0 24px 64px rgba(0, 0, 0, 0.72);
    color: var(--rb-text);
    text-align: left;
}

.rb-tutorial-step {
    display: block;
    margin-bottom: 6px;
    color: var(--rb-gold);
    font-size: var(--fs-xs);
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.rb-tutorial-balloon h3 {
    margin: 0 0 10px;
    font-family: var(--rb-font-display);
    font-size: var(--fs-lg);
    line-height: 1.1;
    color: var(--rb-text);
}

.rb-tutorial-balloon p {
    margin: 0 0 18px;
    font-size: var(--fs-sm);
    line-height: 1.4;
    color: rgba(232, 212, 164, 0.84);
}

.rb-tutorial-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
}

.rb-tutorial-actions .rb-secondary {
    padding: 10px 14px;
    border: 1px solid rgba(196, 160, 80, 0.42);
    background: transparent;
    color: rgba(232, 212, 164, 0.72);
    font-size: var(--fs-xs);
    border-radius: 6px;
    cursor: pointer;
}

.rb-tutorial-actions .rb-secondary:hover {
    color: var(--rb-gold-2);
    border-color: var(--rb-gold);
}

.rb-tutorial-actions .rb-cta {
    padding: 12px 22px;
    font-weight: 900;
}

@media (max-width: 760px) {
    .rb-tutorial-balloon {
        max-width: calc(100vw - 32px);
        padding: 18px 20px 18px;
    }
    .rb-tutorial-balloon h3 {
        font-size: var(--fs-md);
    }
}

/* === S3: Ranking page === */
.rb-ranking-me {
    text-align: left;
}

.rb-ranking-me h2 {
    font-family: var(--rb-font-display);
    color: var(--rb-gold-2);
    margin: 6px 0 8px;
    font-size: var(--fs-display);
    line-height: 1;
}

.rb-ranking-board {
    display: grid;
    gap: 6px;
    margin-top: 18px;
    padding: 18px;
    border: 1.5px solid rgba(196, 160, 80, 0.55);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(46, 33, 22, 0.92), rgba(16, 10, 5, 0.92));
    box-shadow:
        inset 0 0 0 1px rgba(232, 212, 164, 0.12),
        inset 0 0 32px rgba(0, 0, 0, 0.62),
        0 20px 40px rgba(0, 0, 0, 0.48);
}

.rb-ranking-head {
    display: grid;
    grid-template-columns: 60px 1fr 100px;
    gap: 12px;
    padding: 6px 8px 10px;
    border-bottom: 1px solid rgba(196, 160, 80, 0.32);
    color: var(--rb-gold);
    font-size: var(--fs-xs);
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.rb-ranking-row {
    display: grid;
    grid-template-columns: 60px 1fr 100px;
    gap: 12px;
    padding: 10px 8px;
    align-items: center;
    border-radius: 6px;
    transition: background-color 120ms ease;
}

.rb-ranking-row:nth-child(even) {
    background: rgba(255, 255, 255, 0.018);
}

.rb-ranking-row.is-me {
    border: 1px solid var(--rb-gold);
    background: rgba(196, 160, 80, 0.08);
}

.rb-ranking-rank {
    font-family: var(--rb-font-display);
    color: var(--rb-gold-2);
    font-size: var(--fs-lg);
    font-weight: 700;
}

.rb-ranking-name {
    color: var(--rb-text);
    font-size: var(--fs-md);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rb-ranking-elo {
    color: var(--rb-text);
    font-size: var(--fs-lg);
    font-weight: 700;
    text-align: right;
}

.rb-ranking-empty {
    text-align: center;
    color: var(--rb-muted);
    padding: 40px 20px;
    font-style: italic;
}

/* === S4: Billing page === */
.rb-billing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.rb-billing-pack {
    position: relative;
    display: grid;
    gap: 14px;
    padding: 24px 22px 22px;
    border: 1.5px solid rgba(196, 160, 80, 0.55);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(46, 33, 22, 0.92), rgba(16, 10, 5, 0.92));
    box-shadow:
        inset 0 0 0 1px rgba(232, 212, 164, 0.12),
        inset 0 0 28px rgba(0, 0, 0, 0.58),
        0 18px 36px rgba(0, 0, 0, 0.42);
    text-align: center;
}

.rb-billing-pack header {
    display: grid;
    gap: 8px;
    justify-items: center;
}

.rb-billing-icon {
    font-size: 56px;
    line-height: 1;
}

.rb-billing-pack h3 {
    margin: 0;
    font-family: var(--rb-font-display);
    color: var(--rb-gold-2);
    font-size: var(--fs-xl);
    letter-spacing: 0.06em;
    line-height: 1;
}

.rb-billing-price {
    margin: 0;
    color: var(--rb-text);
    font-family: var(--rb-font-display);
    font-size: var(--fs-display);
    line-height: 1;
}

.rb-billing-perk {
    margin: 0;
    color: rgba(232, 212, 164, 0.78);
    font-size: var(--fs-sm);
}

.rb-billing-pack .rb-cta,
.rb-billing-pack .rb-secondary {
    margin-top: 4px;
}

.rb-billing-status.is-success {
    border-color: rgba(122, 167, 88, 0.55);
}

.rb-billing-status.is-cancel {
    border-color: rgba(196, 48, 48, 0.42);
}

.rb-billing-disclaimer {
    margin-top: 24px;
    color: var(--rb-muted);
    font-size: var(--fs-xs);
    text-align: center;
    line-height: 1.4;
}

/* === K1: Keyword badges nas cartas === */
.rb-keyword-strip {
    position: absolute;
    z-index: 5;
    bottom: 4px;
    left: 4px;
    right: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    pointer-events: none;
}

.rb-keyword-badge {
    display: inline-block;
    padding: 1px 4px;
    border: 1px solid currentColor;
    border-radius: 2px;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.2;
    background: rgba(0, 0, 0, 0.78);
    pointer-events: auto;
}

.rb-kw-rush      { color: #ff6b3c; }
.rb-kw-burst     { color: #ffb22e; }
.rb-kw-lifesteal { color: #7aa758; }
.rb-kw-taunt     { color: #c4a050; }
.rb-kw-shield    { color: #8aa6c8; }
.rb-kw-pierce    { color: #c43030; }
.rb-kw-regen     { color: #6ad29a; }
.rb-kw-execute   { color: #a85cff; }

/* Em field cards (cards no board), badges menores */
.rb-field-card .rb-keyword-badge {
    font-size: 7px;
    padding: 1px 3px;
}

/* === K3: Deck Builder === */
.rb-deck-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0;
    padding: 14px;
    border: 1px solid rgba(196, 160, 80, 0.42);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(46, 33, 22, 0.78), rgba(16, 10, 5, 0.82));
}

.rb-deck-name {
    flex: 1 1 200px;
    padding: 8px 12px;
    border: 1px solid rgba(196, 160, 80, 0.42);
    border-radius: 6px;
    background: rgba(8, 5, 3, 0.62);
    color: var(--rb-text);
    font-family: var(--rb-font-base);
    font-size: var(--fs-sm);
}

.rb-deck-filter {
    padding: 8px 10px;
    border: 1px solid rgba(196, 160, 80, 0.42);
    border-radius: 6px;
    background: rgba(8, 5, 3, 0.82);
    color: var(--rb-text);
    font-family: var(--rb-font-base);
    font-size: var(--fs-xs);
    cursor: pointer;
}

.rb-deck-workspace {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 18px;
    margin-top: 12px;
}

@media (max-width: 980px) {
    .rb-deck-workspace { grid-template-columns: 1fr; }
}

.rb-deck-catalog,
.rb-deck-current {
    padding: 16px;
    border: 1px solid rgba(196, 160, 80, 0.42);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(46, 33, 22, 0.78), rgba(16, 10, 5, 0.82));
}

.rb-deck-catalog h3,
.rb-deck-current h3 {
    margin: 0 0 12px;
    font-family: var(--rb-font-display);
    color: var(--rb-gold-2);
    font-size: var(--fs-lg);
}

.rb-deck-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    max-height: 70vh;
    overflow-y: auto;
}

.rb-deck-card {
    position: relative;
    display: grid;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid rgba(196, 160, 80, 0.42);
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(46, 33, 22, 0.62), rgba(16, 10, 5, 0.72));
    color: var(--rb-text);
    cursor: pointer;
    text-align: left;
    transition: border-color 120ms, transform 120ms;
}

.rb-deck-card:hover:not(:disabled) {
    border-color: var(--rb-gold);
    transform: translateY(-2px);
}

.rb-deck-card:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.rb-deck-card header {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 8px;
    align-items: center;
}

.rb-deck-cost {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--rb-gold);
    border-radius: 4px;
    background: rgba(196, 160, 80, 0.18);
    color: var(--rb-gold-2);
    font-family: var(--rb-font-display);
    font-size: var(--fs-md);
    font-weight: 900;
}

.rb-deck-card strong {
    font-family: var(--rb-font-display);
    font-size: var(--fs-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rb-deck-card-meta {
    display: flex;
    justify-content: space-between;
    color: var(--rb-muted);
    font-size: var(--fs-2xs);
}

.rb-deck-card-kws {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.rb-kw-tag {
    display: inline-block;
    padding: 1px 5px;
    border: 1px solid currentColor;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.42);
}

.rb-deck-copies-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--rb-gold);
    color: #1a0f06;
    font-size: var(--fs-2xs);
    font-weight: 900;
}

.rb-deck-meta {
    color: var(--rb-text);
    font-family: var(--rb-font-display);
    font-size: var(--fs-md);
}

.rb-deck-meta .rb-deck-counter { color: var(--rb-gold-2); }
.rb-deck-meta.is-full .rb-deck-counter { color: #7aa758; }
.rb-deck-meta.is-invalid .rb-deck-counter { color: var(--rb-red); }

.rb-deck-current header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.rb-deck-current-list {
    max-height: 50vh;
    overflow-y: auto;
    border-radius: 4px;
}

.rb-deck-empty {
    color: var(--rb-muted);
    font-style: italic;
    padding: 18px;
    text-align: center;
}

.rb-deck-line {
    display: grid;
    grid-template-columns: 24px 1fr auto 32px 24px;
    gap: 6px;
    align-items: center;
    padding: 4px 6px;
    border-bottom: 1px solid rgba(196, 160, 80, 0.18);
    color: var(--rb-text);
    font-size: var(--fs-sm);
}

.rb-deck-line b {
    color: var(--rb-gold-2);
    font-family: var(--rb-font-display);
}

.rb-deck-line-element {
    color: var(--rb-muted);
    font-size: var(--fs-2xs);
}

.rb-deck-line-copies {
    color: var(--rb-gold);
    font-weight: 900;
}

/* === v92 FATES_REBORN: arena visual rewrite === */
:root {
    --rb-faction-fire: #c43030;
    --rb-faction-water: #4a7090;
    --rb-faction-earth: #c4a050;
    --rb-faction-shadow: #6b3b8a;
    --rb-fates-ivory: #ead8a4;
    --rb-fates-ink: #06080a;
    --rb-fates-table: #171311;
    --rb-fates-blue: #46b7d8;
    --rb-fates-necro: #38d88c;
    --rb-fates-red: #af2723;
    --rb-fates-wood: #2a1810;
}

.rb-desktop-rail {
    display: none !important;
}

@media (min-width: 981px) {
    body.rb-game-page {
        background: #020304;
    }

    .rb-game-viewport {
        padding: 0 !important;
        background:
            radial-gradient(circle at 18% 12%, rgba(234, 216, 164, 0.14), transparent 11%),
            url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1080' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='sky' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop stop-color='%23081014'/%3E%3Cstop offset='.48' stop-color='%23112b34'/%3E%3Cstop offset='1' stop-color='%23060505'/%3E%3C/linearGradient%3E%3CradialGradient id='moon' cx='.27' cy='.16' r='.16'%3E%3Cstop stop-color='%23fff3ce' stop-opacity='.95'/%3E%3Cstop offset='.36' stop-color='%23d8c98f' stop-opacity='.26'/%3E%3Cstop offset='1' stop-color='%23d8c98f' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='1920' height='1080' fill='url(%23sky)'/%3E%3Crect width='1920' height='1080' fill='url(%23moon)'/%3E%3Cg opacity='.68'%3E%3Cpath d='M0 710 L160 520 L300 620 L480 430 L650 590 L850 380 L1040 560 L1240 420 L1420 600 L1600 450 L1920 650 L1920 1080 L0 1080 Z' fill='%23070b0f'/%3E%3Cpath d='M0 780 L220 610 L420 720 L620 560 L820 700 L1010 540 L1190 700 L1420 570 L1620 735 L1920 620 L1920 1080 L0 1080 Z' fill='%23111b1d'/%3E%3C/g%3E%3Cg fill='%23060809' opacity='.82'%3E%3Cpath d='M158 492 h42 v-118 h24 v118 h46 v-172 h32 v172 h40 v82 h-184z'/%3E%3Cpath d='M1398 540 h46 v-168 h30 v168 h32 v-118 h24 v118 h44 v90 h-176z'/%3E%3Cpath d='M1512 342 l22 62 h-44zM234 318 l24 60 h-48z'/%3E%3C/g%3E%3Cg fill='none' stroke='%2338d88c' stroke-width='7' stroke-linecap='round' opacity='.58'%3E%3Cpath d='M1190 190 q60 72 12 140 q-25 38 16 92'/%3E%3Cpath d='M390 220 q-58 64 -14 128 q28 38 -18 98'/%3E%3Cpath d='M1520 260 q36 44 6 94 q-20 32 12 74'/%3E%3C/g%3E%3Cg fill='%23e88b34' opacity='.72'%3E%3Ccircle cx='210' cy='860' r='4'/%3E%3Ccircle cx='1560' cy='790' r='5'/%3E%3Ccircle cx='1720' cy='930' r='3'/%3E%3Ccircle cx='480' cy='900' r='3'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat,
            linear-gradient(180deg, #081014, #020304 78%);
    }

    .rb-game-viewport::before {
        opacity: 0.74;
        background:
            radial-gradient(circle at 11% 86%, rgba(228, 104, 42, 0.72) 0 2px, transparent 3px),
            radial-gradient(circle at 26% 74%, rgba(246, 184, 75, 0.56) 0 1.5px, transparent 2.5px),
            radial-gradient(circle at 64% 82%, rgba(228, 104, 42, 0.66) 0 2px, transparent 3px),
            radial-gradient(circle at 84% 69%, rgba(246, 184, 75, 0.52) 0 1.5px, transparent 2.5px);
        background-size: 210px 260px, 270px 310px, 330px 280px, 240px 260px;
        animation: rb-fates-ember-rise 18s linear infinite;
    }

    .rb-game-viewport::after {
        inset: 0;
        opacity: 1;
        background:
            radial-gradient(ellipse 72% 58% at 50% 50%, transparent 42%, rgba(0, 0, 0, 0.42) 78%, rgba(0, 0, 0, 0.86) 100%),
            linear-gradient(90deg, rgba(0, 0, 0, 0.72), transparent 22%, transparent 76%, rgba(0, 0, 0, 0.76));
        animation: none;
    }

    .rb-game-board {
        top: 8px !important;
        left: 50% !important;
        width: var(--rb-board-width) !important;
        height: var(--rb-board-height) !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        display: block !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .rb-game-board::before {
        inset: -24px !important;
        z-index: 0;
        background:
            radial-gradient(ellipse 48% 35% at 50% 53%, rgba(196, 160, 80, 0.14), transparent 72%),
            radial-gradient(ellipse 22% 28% at 12% 82%, rgba(196, 160, 80, 0.18), transparent 70%),
            radial-gradient(ellipse 24% 28% at 88% 14%, rgba(56, 216, 140, 0.12), transparent 70%);
    }

    .rb-game-board::after {
        display: none !important;
    }

    .rb-game-board :where(.rb-hud, .rb-battle-zone, .rb-card-stage, .rb-mobile-action-bar, .rb-result-panel, .rb-log, .rb-player-hand, .rb-actions-row, .rb-field-row, .rb-bot-card-zone, .rb-field-vs) {
        inset: auto !important;
        margin: 0 !important;
        transform: none !important;
    }

    .rb-evolution-panel,
    .rb-log,
    .rb-card-stage,
    .rb-bot-card-zone,
    .rb-field-vs,
    .rb-action-bar-meta,
    .rb-actions-row small,
    .rb-field-row > span {
        display: none !important;
    }

    .rb-hud {
        position: absolute !important;
        inset: 0 !important;
        z-index: 30;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        pointer-events: none;
    }

    .rb-hud-side {
        position: absolute !important;
        display: block !important;
        width: 340px !important;
        height: 340px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 12px !important;
        background: transparent !important;
        box-shadow: none !important;
        pointer-events: auto;
        overflow: visible !important;
        animation: rb-hero-breathe 4s ease-in-out infinite;
        transform-style: preserve-3d;
    }

    .rb-hud-player {
        left: 26px !important;
        top: auto !important;
        bottom: 38px !important;
        perspective: 1200px;
        transform: rotateY(4deg);
    }

    .rb-hud-bot {
        right: 26px !important;
        top: 28px !important;
        bottom: auto !important;
        perspective: 1200px;
        transform: rotateY(-4deg);
    }

    .rb-hero-portrait,
    .rb-hero-frame,
    .rb-hero-art {
        position: absolute;
        inset: 0;
        border-radius: 14px;
    }

    .rb-hero-portrait {
        background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 30%),
            linear-gradient(180deg, rgba(25, 18, 12, 0.98), rgba(4, 4, 5, 0.98));
        box-shadow:
            0 32px 62px rgba(0, 0, 0, 0.72),
            inset 0 0 0 1px rgba(232, 212, 164, 0.32);
        overflow: hidden;
    }

    .rb-hero-art {
        inset: 16px;
        border-radius: 10px;
        background-position: center;
        background-size: cover;
        box-shadow:
            inset 0 -70px 86px rgba(0, 0, 0, 0.82),
            inset 0 0 0 1px rgba(255, 244, 203, 0.16);
    }

    .rb-hud-player .rb-hero-art {
        background-image:
            linear-gradient(180deg, rgba(255, 235, 176, 0.04), rgba(0, 0, 0, 0.28)),
            url("../img/cards/baralho/27.webp");
    }

    .rb-hud-bot .rb-hero-art {
        background-image:
            linear-gradient(180deg, rgba(107, 59, 138, 0.08), rgba(0, 0, 0, 0.36)),
            url("../img/cards/baralho/75.webp");
        transform: scaleX(-1);
    }

    .rb-hero-frame {
        pointer-events: none;
        border: 3px solid rgba(196, 160, 80, 0.72);
        background:
            linear-gradient(90deg, rgba(196, 160, 80, 0.56), transparent 16%, transparent 84%, rgba(196, 160, 80, 0.56)),
            linear-gradient(180deg, rgba(234, 216, 164, 0.28), transparent 18%, transparent 82%, rgba(234, 216, 164, 0.24));
        box-shadow:
            inset 0 0 0 5px rgba(0, 0, 0, 0.52),
            inset 0 0 42px rgba(196, 160, 80, 0.24),
            0 0 26px rgba(196, 160, 80, 0.2);
    }

    .rb-hero-frame::before,
    .rb-hero-frame::after {
        content: "";
        position: absolute;
        left: 50%;
        width: 92px;
        height: 28px;
        transform: translateX(-50%);
        background:
            radial-gradient(circle at 50% 50%, rgba(234, 216, 164, 0.88) 0 5px, transparent 6px),
            linear-gradient(90deg, transparent, rgba(196, 160, 80, 0.9), transparent);
    }

    .rb-hero-frame::before { top: -13px; }
    .rb-hero-frame::after { bottom: -13px; }

    .rb-hud-copy {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        padding: 0 !important;
        pointer-events: none;
    }

    .rb-hud-copy > span:first-child {
        position: absolute;
        left: 62px;
        right: 62px;
        bottom: -30px;
        min-height: 40px;
        display: grid;
        place-items: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--rb-fates-ivory);
        font-family: var(--rb-font-display);
        font-size: 28px;
        font-weight: 900;
        line-height: 1;
        text-align: center;
        text-shadow:
            0 2px 0 #000,
            0 0 18px rgba(196, 160, 80, 0.42);
    }

    .rb-hud-bot .rb-hud-copy > span:first-child {
        color: #ead8ff;
        text-shadow:
            0 2px 0 #000,
            0 0 18px rgba(107, 59, 138, 0.62);
    }

    .rb-hud-health {
        position: absolute !important;
        left: 14px;
        bottom: 14px;
        width: 118px !important;
        height: 118px !important;
        display: block !important;
        pointer-events: none;
    }

    .rb-hud-bot .rb-hud-health {
        left: auto;
        right: 14px;
    }

    .rb-life-orb {
        width: 112px !important;
        height: 112px !important;
        border-width: 3px;
        border-color: rgba(234, 216, 164, 0.72);
        box-shadow:
            inset 0 0 0 7px rgba(0, 0, 0, 0.56),
            inset 0 18px 24px rgba(255, 255, 255, 0.08),
            inset 0 -28px 34px rgba(0, 0, 0, 0.72),
            0 14px 28px rgba(0, 0, 0, 0.68),
            0 0 22px rgba(64, 182, 220, 0.22);
    }

    .rb-hud-bot .rb-life-orb {
        box-shadow:
            inset 0 0 0 7px rgba(0, 0, 0, 0.56),
            inset 0 18px 24px rgba(255, 255, 255, 0.08),
            inset 0 -28px 34px rgba(0, 0, 0, 0.72),
            0 14px 28px rgba(0, 0, 0, 0.68),
            0 0 22px rgba(196, 48, 48, 0.26);
    }

    .rb-life-orb b {
        inset: 13px !important;
    }

    .rb-life-orb-readout {
        position: absolute !important;
        inset: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        place-items: center !important;
        text-align: center !important;
        z-index: 4;
    }

    .rb-life-orb-readout i,
    .rb-life-orb-readout small {
        display: none !important;
    }

    .rb-hud-health strong {
        color: #fff5d6;
        font-family: var(--rb-font-display);
        font-size: 48px !important;
        font-weight: 900;
        line-height: 1;
        text-shadow:
            0 3px 0 #180b08,
            0 0 18px rgba(255, 236, 180, 0.42);
    }

    .rb-hero-level {
        position: absolute;
        right: 18px;
        bottom: 18px;
        z-index: 7;
        width: 72px;
        height: 84px;
        display: grid;
        place-items: center;
        color: #ffe6ad;
        font-family: var(--rb-font-display);
        font-size: 56px;
        font-weight: 900;
        line-height: 1;
        background:
            radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.26), transparent 34%),
            linear-gradient(180deg, rgba(107, 59, 138, 0.82), rgba(35, 18, 46, 0.98));
        border: 2px solid rgba(196, 160, 80, 0.78);
        border-radius: 10px;
        box-shadow:
            inset 0 0 0 2px rgba(0, 0, 0, 0.52),
            0 0 22px rgba(196, 160, 80, 0.3);
        text-shadow: 0 3px 0 #17090a;
    }

    .rb-hud-player .rb-hero-level {
        background:
            radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.3), transparent 34%),
            linear-gradient(180deg, rgba(196, 160, 80, 0.88), rgba(63, 39, 16, 0.98));
    }

    .rb-hud-bot .rb-hero-level {
        left: 18px;
        right: auto;
    }

    .rb-mark,
    .rb-bot-emblem,
    .rb-faction-emblem {
        position: absolute !important;
        z-index: 8;
        right: 20px;
        bottom: 112px;
        width: 58px !important;
        height: 58px !important;
        display: grid !important;
        place-items: center;
        border: 2px solid rgba(196, 160, 80, 0.74);
        border-radius: 10px !important;
        color: #fff1c9;
        font-family: var(--rb-font-display);
        font-size: 24px !important;
        font-weight: 900;
        text-decoration: none;
        background:
            radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.22), transparent 34%),
            linear-gradient(180deg, rgba(196, 160, 80, 0.26), rgba(26, 15, 8, 0.98));
        box-shadow:
            inset 0 0 0 2px rgba(0, 0, 0, 0.46),
            0 10px 22px rgba(0, 0, 0, 0.48);
    }

    .rb-bot-emblem {
        left: 20px;
        right: auto;
        bottom: 112px;
        background:
            radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.18), transparent 34%),
            linear-gradient(180deg, rgba(107, 59, 138, 0.44), rgba(16, 7, 22, 0.98)),
            url("../assets/rebirth/ui/bot-emblem.png") center / 80% auto no-repeat;
    }

    .rb-zone-row {
        position: absolute;
        left: 18px;
        right: 18px;
        bottom: -68px;
        display: flex !important;
        justify-content: center;
        gap: 6px;
        opacity: 1;
    }

    .rb-zone-row span {
        min-height: 26px;
        padding: 5px 8px;
        border: 1px solid rgba(196, 160, 80, 0.34);
        border-radius: 4px;
        background: rgba(4, 5, 6, 0.78);
        color: rgba(234, 216, 164, 0.82);
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .rb-zone-row span:first-child {
        display: none;
    }

    .rb-hand-count {
        display: none !important;
    }

    .rb-mana-coins {
        position: absolute;
        z-index: 8;
        top: 54px;
        right: -66px;
        width: 52px;
        min-height: 214px;
        padding: 10px 8px 14px;
        display: grid;
        align-content: end;
        gap: 3px;
        border: 1px solid rgba(196, 160, 80, 0.46);
        border-radius: 8px;
        background:
            linear-gradient(180deg, rgba(8, 8, 8, 0.88), rgba(0, 0, 0, 0.72));
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.04),
            0 18px 32px rgba(0, 0, 0, 0.46);
    }

    .rb-hud-bot .rb-mana-coins {
        left: -66px;
        right: auto;
    }

    .rb-mana-coins::before {
        content: attr(data-available) "/" attr(data-max);
        color: #fff2bf;
        font-family: var(--rb-font-display);
        font-size: 18px;
        font-weight: 900;
        line-height: 1;
        text-align: center;
        text-shadow: 0 2px 0 #000;
    }

    .rb-mana-coin {
        width: 34px;
        height: 13px;
        border: 1px solid rgba(255, 226, 135, 0.84);
        border-radius: 50%;
        background:
            radial-gradient(ellipse at 50% 20%, rgba(255, 255, 255, 0.68), transparent 30%),
            linear-gradient(180deg, #ffe59a, #c9902f 48%, #7a4315 100%);
        box-shadow:
            inset 0 -2px 2px rgba(0, 0, 0, 0.38),
            0 0 12px rgba(238, 183, 71, 0.3);
        animation: rb-coin-birth 360ms ease both;
        animation-delay: calc(var(--coin-index, 0) * 28ms);
    }

    .rb-mana-coin.is-spent {
        border-color: rgba(164, 164, 164, 0.4);
        background:
            radial-gradient(ellipse at 50% 20%, rgba(255, 255, 255, 0.22), transparent 30%),
            linear-gradient(180deg, #8c8a82, #55534f 52%, #292827 100%);
        box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.42);
    }

    .rb-turn-core {
        position: absolute !important;
        z-index: 42;
        top: 20px !important;
        left: 50% !important;
        width: 172px !important;
        height: 86px !important;
        transform: translateX(-50%) !important;
        display: grid !important;
        place-items: center;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        pointer-events: none;
    }

    .rb-turn-core > span,
    .rb-turn-core small,
    .rb-phase-timeline {
        display: none !important;
    }

    .rb-turn-core strong {
        width: 70px;
        height: 70px;
        display: grid;
        place-items: center;
        color: #fff4d0;
        font-family: var(--rb-font-display);
        font-size: 34px !important;
        font-weight: 900;
        line-height: 1;
        background:
            radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.36), transparent 30%),
            linear-gradient(180deg, #337aa2, #102f4a 70%, #071322);
        border: 2px solid rgba(196, 160, 80, 0.82);
        transform: rotate(45deg);
        box-shadow:
            inset 0 0 0 3px rgba(0, 0, 0, 0.42),
            0 0 28px rgba(70, 183, 216, 0.36);
    }

    .rb-turn-core strong::first-letter {
        transform: rotate(-45deg);
    }

    .rb-battle-zone {
        position: absolute !important;
        z-index: 12;
        left: 330px !important;
        top: 176px !important;
        width: 1060px !important;
        height: 512px !important;
        display: block !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 18px !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        perspective: 1200px;
    }

    .rb-battle-zone::before {
        content: "";
        position: absolute;
        inset: 8px -18px -16px;
        z-index: 0;
        border-radius: 28px;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 18%, rgba(0, 0, 0, 0.42)),
            radial-gradient(ellipse at 50% 52%, rgba(196, 160, 80, 0.14), transparent 54%),
            repeating-linear-gradient(92deg, rgba(255, 236, 188, 0.03) 0 2px, transparent 2px 78px),
            linear-gradient(135deg, #2b211b 0%, #15110f 42%, #0a0a0b 100%);
        border: 2px solid rgba(196, 160, 80, 0.34);
        box-shadow:
            inset 0 0 0 3px rgba(0, 0, 0, 0.42),
            inset 0 0 92px rgba(0, 0, 0, 0.62),
            0 42px 70px rgba(0, 0, 0, 0.58);
        transform: rotateX(6deg);
        transform-origin: center;
    }

    .rb-battle-zone::after {
        content: "";
        position: absolute;
        z-index: 3;
        left: 54px;
        right: 54px;
        top: 50%;
        height: 3px;
        border-radius: 999px;
        background:
            radial-gradient(circle at 50% 50%, #fff7ca 0 5px, transparent 6px),
            linear-gradient(90deg, transparent, rgba(196, 160, 80, 0.52) 18%, #fff1b2 50%, rgba(196, 160, 80, 0.52) 82%, transparent);
        box-shadow:
            0 0 18px rgba(255, 225, 128, 0.62),
            0 0 42px rgba(196, 160, 80, 0.32);
    }

    .battlefield-layer {
        display: block !important;
        position: absolute !important;
        inset: -90px !important;
        pointer-events: none;
        transition: transform 180ms ease-out;
    }

    .battlefield-layer-skybox {
        z-index: -2;
        opacity: 0.36;
        background:
            radial-gradient(circle at 24% 30%, rgba(56, 216, 140, 0.18), transparent 26%),
            radial-gradient(circle at 74% 20%, rgba(107, 59, 138, 0.16), transparent 24%);
    }

    .battlefield-layer-board {
        z-index: 1;
        opacity: 0.52;
        background:
            radial-gradient(ellipse 38% 18% at 50% 52%, rgba(255, 234, 164, 0.13), transparent 72%);
    }

    .battlefield-layer-foreground {
        z-index: 5;
        opacity: 0.5;
        background:
            radial-gradient(circle at 6% 88%, rgba(228, 104, 42, 0.24), transparent 12%),
            radial-gradient(circle at 96% 12%, rgba(56, 216, 140, 0.14), transparent 12%);
    }

    .battlefield-embers {
        display: block !important;
    }

    .battlefield-ember {
        background: #f0a34c !important;
        box-shadow: 0 0 12px rgba(240, 163, 76, 0.72);
    }

    .rb-field-row {
        position: absolute !important;
        z-index: 4;
        left: 50% !important;
        width: 890px !important;
        transform: translateX(-50%) !important;
        display: block !important;
    }

    .rb-field-row-bot {
        top: 44px !important;
    }

    .rb-field-row-player {
        bottom: 38px !important;
    }

    .rb-field-slots {
        display: grid !important;
        grid-template-columns: repeat(3, 168px) !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 84px !important;
        min-height: 188px !important;
        padding: 0 !important;
    }

    .rb-field-card,
    .rb-field-slot-empty {
        position: relative !important;
        width: 164px !important;
        height: 188px !important;
        min-width: 164px !important;
        border-radius: 8px !important;
        transform: none !important;
    }

    .rb-field-slot-empty {
        border: 2px solid rgba(196, 160, 80, 0.34) !important;
        background:
            radial-gradient(circle at 50% 48%, rgba(196, 160, 80, 0.13), transparent 45%),
            radial-gradient(circle at 50% 52%, rgba(0, 0, 0, 0.34), transparent 58%),
            linear-gradient(180deg, rgba(58, 46, 34, 0.72), rgba(9, 8, 8, 0.92)) !important;
        box-shadow:
            inset 0 0 0 4px rgba(0, 0, 0, 0.38),
            inset 0 0 34px rgba(196, 160, 80, 0.12),
            0 22px 32px rgba(0, 0, 0, 0.44) !important;
        cursor: pointer;
    }

    .rb-field-slot-empty::before {
        content: "";
        position: absolute;
        inset: 25px 18px;
        border-radius: 8px;
        background:
            radial-gradient(circle at 50% 50%, rgba(234, 216, 164, 0.16), transparent 34%),
            linear-gradient(45deg, transparent 42%, rgba(196, 160, 80, 0.45) 48% 52%, transparent 58%),
            linear-gradient(-45deg, transparent 42%, rgba(196, 160, 80, 0.28) 48% 52%, transparent 58%);
        border: 1px solid rgba(196, 160, 80, 0.34);
        transform: rotate(45deg) scale(0.82);
    }

    .rb-field-slot-empty.is-summon-target,
    .rb-field-slot-empty:hover,
    .rb-field-slot-empty:focus-visible {
        border-color: rgba(255, 226, 134, 0.82) !important;
        box-shadow:
            inset 0 0 0 4px rgba(0, 0, 0, 0.38),
            0 0 24px rgba(255, 210, 94, 0.38),
            0 24px 34px rgba(0, 0, 0, 0.48) !important;
    }

    .rb-tcg-card.is-element-fire { --rb-card-faction: var(--rb-faction-fire); }
    .rb-tcg-card.is-element-water { --rb-card-faction: var(--rb-faction-water); }
    .rb-tcg-card.is-element-earth { --rb-card-faction: var(--rb-faction-earth); }
    .rb-tcg-card.is-element-shadow { --rb-card-faction: var(--rb-faction-shadow); }

    .rb-tcg-card {
        --rb-card-faction: var(--card-accent, var(--rb-gold));
        border: 2px solid color-mix(in srgb, var(--rarity-metal-edge, #8c7b65), var(--rb-card-faction) 26%) !important;
        border-radius: 8px !important;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 22%, rgba(0, 0, 0, 0.72)),
            radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--rb-card-faction), transparent 78%), transparent 62%),
            #070707 !important;
        box-shadow:
            0 22px 36px rgba(0, 0, 0, 0.62),
            0 0 18px color-mix(in srgb, var(--rb-card-faction), transparent 78%),
            inset 0 0 0 1px rgba(255, 255, 255, 0.08),
            inset 0 0 18px color-mix(in srgb, var(--rb-card-faction), transparent 82%) !important;
        overflow: hidden !important;
    }

    .rb-tcg-card.is-rarity-common {
        --rarity-metal-edge: #8e8c84;
    }

    .rb-tcg-card.is-rarity-uncommon,
    .rb-tcg-card.is-rarity-rare {
        --rarity-metal-edge: #8aa6bd;
    }

    .rb-tcg-card.is-rarity-legendary {
        --rarity-metal-edge: #ffd978;
    }

    .rb-card-frame-layer {
        opacity: 1 !important;
        border-radius: 8px !important;
        background:
            linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 16%, transparent 84%, rgba(255, 255, 255, 0.08)),
            linear-gradient(180deg, rgba(255, 236, 180, 0.18), transparent 18%, rgba(0, 0, 0, 0.62) 100%) !important;
    }

    .rb-card-cost {
        position: absolute !important;
        z-index: 8;
        left: 7px !important;
        top: 7px !important;
        width: 38px !important;
        height: 38px !important;
        display: grid !important;
        place-items: center !important;
        border: 2px solid rgba(255, 232, 152, 0.86) !important;
        border-radius: 50% !important;
        color: #fff4cc !important;
        font-family: var(--rb-font-display);
        font-size: 23px !important;
        font-weight: 900 !important;
        background:
            radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.52), transparent 25%),
            linear-gradient(180deg, #c59a42, #5f2e14) !important;
        text-shadow: 0 2px 0 #1b0d07;
        box-shadow:
            inset 0 0 0 2px rgba(0, 0, 0, 0.38),
            0 6px 14px rgba(0, 0, 0, 0.48);
    }

    .rb-card-image-layer {
        position: absolute !important;
        z-index: 2;
        left: 8px !important;
        right: 8px !important;
        top: 8px !important;
        height: 54% !important;
        border-radius: 6px 6px 3px 3px !important;
        border: 1px solid rgba(234, 216, 164, 0.26);
        overflow: hidden !important;
        background-color: #0b0c0e;
    }

    .rb-card-image-layer img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .rb-card-titlebar {
        position: absolute !important;
        z-index: 5;
        left: 8px !important;
        right: 8px !important;
        top: 57% !important;
        min-height: 36px !important;
        display: grid !important;
        align-content: center;
        gap: 1px;
        padding: 5px 8px !important;
        border: 1px solid rgba(196, 160, 80, 0.38);
        border-radius: 4px !important;
        background:
            linear-gradient(90deg, color-mix(in srgb, var(--rb-card-faction), #000 72%), rgba(7, 7, 8, 0.9)) !important;
    }

    .rb-card-titlebar .rb-card-nameplate {
        display: block;
        color: #fff0c8 !important;
        font-family: var(--rb-font-display);
        font-size: 12px !important;
        font-weight: 900 !important;
        line-height: 1.05;
        text-transform: uppercase;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-shadow: 0 1px 0 #000;
    }

    .rb-card-titlebar span,
    .rb-card-titlebar small {
        color: rgba(234, 216, 164, 0.74) !important;
        font-size: 9px !important;
        font-weight: 800;
        line-height: 1;
        text-transform: uppercase;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .rb-card-textbox {
        position: absolute !important;
        z-index: 5;
        left: 10px !important;
        right: 10px !important;
        bottom: 44px !important;
        height: 32px !important;
        padding: 4px 6px !important;
        border: 0 !important;
        background: rgba(0, 0, 0, 0.42) !important;
        color: rgba(234, 216, 164, 0.78) !important;
    }

    .rb-field-card .rb-card-textbox {
        display: none !important;
    }

    .rb-card-textbox strong {
        display: block;
        font-size: 10px !important;
        line-height: 1.1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .rb-card-textbox p {
        display: none !important;
    }

    .rb-card-statline {
        position: absolute !important;
        z-index: 7;
        left: 10px !important;
        right: 10px !important;
        bottom: 8px !important;
        height: 34px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        pointer-events: none;
    }

    .rb-card-stat {
        width: 54px !important;
        height: 30px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        place-items: center !important;
        border: 1px solid rgba(234, 216, 164, 0.54);
        border-radius: 999px !important;
        clip-path: none !important;
    }

    .rb-card-stat b {
        color: #fff1cb;
        font-family: var(--rb-font-display);
        font-size: 22px !important;
        font-weight: 900;
        line-height: 1;
        text-shadow: 0 2px 0 #160806;
    }

    .rb-card-stat small {
        display: none !important;
    }

    .rb-keyword-strip {
        z-index: 8;
        bottom: 42px;
        left: 10px;
        right: 10px;
        justify-content: center;
    }

    .rb-keyword-badge {
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.68);
    }

    .rb-field-card .rb-card-image-layer {
        height: 62% !important;
    }

    .rb-field-card .rb-card-titlebar {
        top: 64% !important;
    }

    .rb-field-card > .rb-guard-meter {
        position: absolute !important;
        left: 10px !important;
        right: 10px !important;
        bottom: 44px !important;
        height: 5px !important;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.48) !important;
        overflow: hidden;
    }

    .rb-field-card > .rb-guard-meter::before {
        height: 100% !important;
        background: linear-gradient(90deg, #46b7d8, #e8d4a4) !important;
        transform: scaleX(var(--guard-scale, 1));
        transform-origin: left center;
    }

    .rb-field-card:hover,
    .rb-field-card:focus-visible,
    .rb-field-card.is-selected,
    .rb-field-card.is-targetable {
        transform: translateY(-8px) !important;
        box-shadow:
            0 28px 44px rgba(0, 0, 0, 0.68),
            0 0 26px color-mix(in srgb, var(--rb-card-faction), transparent 52%),
            inset 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
    }

    .rb-mobile-action-bar {
        position: absolute !important;
        z-index: 34;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        pointer-events: none;
    }

    .rb-player-hand {
        position: absolute !important;
        left: 50% !important;
        bottom: -4px !important;
        width: 1080px !important;
        height: 285px !important;
        transform: translateX(-50%) !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        pointer-events: auto;
        overflow: visible !important;
    }

    .rb-hand {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        overflow: visible !important;
        perspective: 1200px;
        touch-action: pan-y;
    }

    .rb-hand .rb-mini-card {
        position: absolute !important;
        left: 50% !important;
        bottom: 0 !important;
        width: 154px !important;
        height: 230px !important;
        min-width: 154px !important;
        margin: 0 0 0 -77px !important;
        transform:
            translateX(calc(var(--fan-offset, 0) * 116px))
            translateY(var(--fan-arc, 0px))
            rotate(var(--fan-rotate, 0deg))
            rotateY(var(--tilt-y, 0deg))
            rotateX(var(--tilt-x, 0deg)) !important;
        transform-origin: 50% 96%;
        z-index: var(--fan-z, 1);
        transition:
            transform 360ms cubic-bezier(0.18, 0.89, 0.32, 1.28),
            box-shadow 180ms ease,
            opacity 160ms ease;
        animation: rb-card-draw-fates 420ms cubic-bezier(0.18, 0.89, 0.32, 1.28) both;
        animation-delay: var(--draw-delay, 0ms);
        pointer-events: auto;
    }

    .rb-hand .rb-mini-card:hover:not(:disabled):not(.is-locked),
    .rb-hand .rb-mini-card:focus-visible:not(:disabled):not(.is-locked) {
        transform:
            translateX(calc(var(--fan-offset, 0) * 116px))
            translateY(calc(var(--fan-arc, 0px) - 28px))
            rotate(var(--fan-rotate, 0deg))
            rotateY(6deg)
            scale(1.18) !important;
        z-index: 500;
        box-shadow:
            0 36px 58px rgba(0, 0, 0, 0.76),
            0 0 30px rgba(255, 218, 118, 0.64),
            inset 0 0 0 1px rgba(255, 255, 255, 0.14) !important;
    }

    .rb-hand .rb-mini-card.is-selected {
        transform:
            translateX(0)
            translateY(-132px)
            rotate(0deg)
            rotateY(6deg)
            scale(1.2) !important;
        z-index: 700;
        box-shadow:
            0 42px 68px rgba(0, 0, 0, 0.78),
            0 0 42px rgba(255, 218, 118, 0.78),
            0 0 80px color-mix(in srgb, var(--rb-card-faction), transparent 56%),
            inset 0 0 0 1px rgba(255, 255, 255, 0.16) !important;
    }

    #player-hand:has(.rb-mini-card:hover:not(:disabled):not(.is-locked)) .rb-mini-card:not(:hover),
    #player-hand:has(.rb-mini-card:focus-visible:not(:disabled):not(.is-locked)) .rb-mini-card:not(:focus-visible) {
        opacity: 0.74;
    }

    .rb-hand .rb-mini-card.is-locked {
        cursor: not-allowed;
        opacity: 0.58;
    }

    .rb-actions-row {
        display: contents !important;
        pointer-events: none;
    }

    .rb-actions-row > div {
        position: absolute !important;
        z-index: 44;
        display: block !important;
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        pointer-events: auto;
    }

    .rb-actions-row > div:first-child {
        left: calc(50% + 450px) !important;
        bottom: 178px !important;
        transform: translateX(-50%) !important;
    }

    .rb-actions-row > div:nth-child(2) {
        left: 50% !important;
        top: 104px !important;
        transform: translateX(-50%) !important;
    }

    .rb-actions-row .rb-cta,
    .rb-actions-row .rb-secondary {
        position: relative !important;
        min-width: 196px !important;
        min-height: 56px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        border: 2px solid rgba(234, 216, 164, 0.58) !important;
        border-radius: 8px !important;
        color: #fff4d0 !important;
        font-family: var(--rb-font-display);
        font-size: 17px !important;
        font-weight: 900 !important;
        letter-spacing: 0 !important;
        text-transform: uppercase;
        text-shadow: 0 2px 0 #000;
        box-shadow:
            inset 0 0 0 2px rgba(0, 0, 0, 0.36),
            inset 0 16px 26px rgba(255, 255, 255, 0.08),
            0 18px 30px rgba(0, 0, 0, 0.48),
            0 0 24px rgba(196, 160, 80, 0.24) !important;
    }

    .rb-actions-row .rb-cta::before,
    .rb-actions-row .rb-cta::after,
    .rb-actions-row .rb-secondary::before,
    .rb-actions-row .rb-secondary::after {
        content: none !important;
        display: none !important;
    }

    #next-turn-button {
        min-width: 250px !important;
        min-height: 66px !important;
        background:
            linear-gradient(180deg, #a62922, #5c100d 74%, #2d0806) !important;
    }

    #play-button {
        background:
            linear-gradient(180deg, #235d76, #12334c 74%, #071520) !important;
    }

    .rb-actions-row .rb-cta i,
    .rb-actions-row .rb-secondary i {
        position: static !important;
        display: inline-block !important;
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        margin: 0 !important;
        border: 1px solid rgba(255, 244, 208, 0.68) !important;
        border-radius: 50% !important;
        background: rgba(255, 244, 208, 0.16) !important;
        box-shadow: none !important;
    }

    .rb-loading {
        z-index: 80;
    }
}

@keyframes rb-hero-breathe {
    0%, 100% { transform: scale(0.99) rotateY(var(--hero-look, 0deg)); }
    50% { transform: scale(1.01) rotateY(var(--hero-look, 0deg)); }
}

.rb-hud-player { --hero-look: 4deg; }
.rb-hud-bot { --hero-look: -4deg; }

@keyframes rb-coin-birth {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.72);
        box-shadow: 0 0 0 rgba(238, 183, 71, 0);
    }
    55% {
        opacity: 1;
        transform: translateY(-2px) scale(1.08);
        box-shadow: 0 0 22px rgba(238, 183, 71, 0.58);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes rb-card-draw-fates {
    0% {
        opacity: 0;
        transform:
            translateX(calc(var(--fan-offset, 0) * 116px))
            translateY(90px)
            rotate(calc(var(--fan-rotate, 0deg) - 8deg))
            scale(0.86);
    }
    100% {
        opacity: 1;
    }
}

@keyframes rb-fates-ember-rise {
    0% { transform: translate3d(0, 16px, 0); }
    100% { transform: translate3d(0, -36px, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .rb-hud-side,
    .rb-mana-coin,
    .rb-hand .rb-mini-card,
    .rb-game-viewport::before {
        animation: none !important;
    }
}

/* v92 visual correction: closer to the Fates reference composition */
@media (min-width: 981px) {
    .rb-game-viewport {
        border: 0 !important;
        box-shadow: none !important;
        background:
            linear-gradient(180deg, rgba(1, 5, 8, 0.02), rgba(1, 3, 5, 0.16) 72%, rgba(1, 1, 2, 0.42)),
            url("../img/arena_bg/fates_reborn_landscape.webp") center top / cover no-repeat,
            #05090d !important;
    }

    .rb-game-viewport::before {
        opacity: 0.88;
        background:
            radial-gradient(circle at 8% 86%, rgba(255, 116, 36, 0.78) 0 2px, transparent 3px),
            radial-gradient(circle at 28% 78%, rgba(255, 196, 76, 0.58) 0 1.5px, transparent 2.5px),
            radial-gradient(circle at 77% 72%, rgba(255, 116, 36, 0.72) 0 2px, transparent 3px),
            radial-gradient(circle at 94% 88%, rgba(255, 196, 76, 0.64) 0 2px, transparent 3px);
        background-size: 180px 250px, 240px 310px, 300px 280px, 220px 240px;
    }

    .rb-game-viewport::after {
        background:
            radial-gradient(ellipse 76% 64% at 50% 51%, transparent 48%, rgba(0, 0, 0, 0.16) 82%, rgba(0, 0, 0, 0.48) 100%),
            linear-gradient(90deg, rgba(0, 0, 0, 0.22), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.3)) !important;
    }

    .rb-game-board::before {
        inset: 0 !important;
        background:
            radial-gradient(ellipse 28% 18% at 18% 79%, rgba(196, 160, 80, 0.32), transparent 72%),
            radial-gradient(ellipse 26% 20% at 88% 22%, rgba(107, 59, 138, 0.28), transparent 70%),
            radial-gradient(ellipse 52% 36% at 50% 54%, rgba(255, 220, 132, 0.14), transparent 68%);
    }

    .rb-turn-core {
        top: 0 !important;
        width: 310px !important;
        height: 78px !important;
    }

    .rb-turn-core::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 15px;
        width: 330px;
        height: 34px;
        transform: translateX(-50%);
        background:
            linear-gradient(90deg, transparent, rgba(196, 160, 80, 0.62) 10%, rgba(14, 13, 14, 0.9) 50%, rgba(196, 160, 80, 0.62) 90%, transparent),
            radial-gradient(circle at 18% 50%, #25698f 0 6px, #07090b 7px 12px, transparent 13px),
            radial-gradient(circle at 30% 50%, #17120d 0 6px, #07090b 7px 12px, transparent 13px),
            radial-gradient(circle at 70% 50%, #17120d 0 6px, #07090b 7px 12px, transparent 13px),
            radial-gradient(circle at 82% 50%, #17120d 0 6px, #07090b 7px 12px, transparent 13px);
        border-radius: 0 0 18px 18px;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
    }

    .rb-turn-core strong {
        width: 64px !important;
        height: 64px !important;
        z-index: 2;
        font-size: 33px !important;
        background:
            radial-gradient(circle at 50% 32%, rgba(255, 255, 255, 0.45), transparent 31%),
            linear-gradient(180deg, #2c91c1, #0e3d66 68%, #071528) !important;
        border-color: rgba(255, 221, 122, 0.86) !important;
        box-shadow:
            inset 0 0 0 4px rgba(0, 0, 0, 0.42),
            0 0 26px rgba(70, 183, 216, 0.55),
            0 12px 24px rgba(0, 0, 0, 0.55) !important;
    }

    .rb-actions-row > div:nth-child(2) {
        top: 78px !important;
    }

    #next-turn-button {
        min-width: 320px !important;
        min-height: 72px !important;
        font-size: 25px !important;
        background:
            linear-gradient(180deg, #cf3b2f 0%, #8d1f19 58%, #3b0b08 100%) !important;
        border-color: rgba(255, 218, 124, 0.72) !important;
        box-shadow:
            inset 0 0 0 3px rgba(0, 0, 0, 0.42),
            inset 0 17px 28px rgba(255, 255, 255, 0.1),
            0 18px 34px rgba(0, 0, 0, 0.58),
            0 0 26px rgba(196, 80, 48, 0.36) !important;
    }

    .rb-hud-player {
        left: -10px !important;
        bottom: 78px !important;
        width: 430px !important;
        height: 548px !important;
    }

    .rb-hud-bot {
        right: 2px !important;
        top: 34px !important;
        width: 430px !important;
        height: 430px !important;
    }

    .rb-hero-portrait {
        border-radius: 28px 28px 12px 12px;
        background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 28%),
            linear-gradient(180deg, rgba(52, 37, 18, 0.96), rgba(6, 5, 5, 0.98)) !important;
        box-shadow:
            0 34px 70px rgba(0, 0, 0, 0.74),
            0 0 0 2px rgba(64, 39, 15, 0.98),
            0 0 0 5px rgba(196, 160, 80, 0.58),
            inset 0 0 0 7px rgba(0, 0, 0, 0.48),
            inset 0 0 50px rgba(255, 222, 136, 0.16) !important;
    }

    .rb-hero-portrait::before,
    .rb-hero-portrait::after {
        content: "";
        position: absolute;
        z-index: 4;
        top: 34px;
        bottom: 28px;
        width: 42px;
        background:
            linear-gradient(180deg, transparent, rgba(255, 221, 130, 0.78) 18%, rgba(74, 48, 18, 0.92) 50%, rgba(255, 221, 130, 0.72) 82%, transparent),
            radial-gradient(circle at 50% 16%, rgba(255, 247, 206, 0.96) 0 5px, transparent 6px),
            radial-gradient(circle at 50% 84%, rgba(255, 247, 206, 0.9) 0 5px, transparent 6px);
        border-radius: 999px;
        opacity: 0.95;
    }

    .rb-hero-portrait::before {
        left: -10px;
        transform: rotate(-5deg);
    }

    .rb-hero-portrait::after {
        right: -10px;
        transform: rotate(5deg);
    }

    .rb-hero-art {
        inset: 20px 24px 28px !important;
        border-radius: 20px 20px 8px 8px !important;
        background-size: cover !important;
        box-shadow:
            inset 0 -98px 96px rgba(0, 0, 0, 0.76),
            inset 0 0 0 1px rgba(255, 244, 203, 0.2) !important;
    }

    .rb-hud-player .rb-hero-art {
        background-image:
            linear-gradient(180deg, rgba(255, 236, 172, 0.03), rgba(0, 0, 0, 0.22)),
            url("../img/heroes/sky_haven_knight.webp") !important;
        background-position: 52% 30% !important;
    }

    .rb-hud-bot .rb-hero-art {
        inset: 18px 24px 28px !important;
        background-image:
            linear-gradient(180deg, rgba(107, 59, 138, 0.03), rgba(0, 0, 0, 0.34)),
            url("../img/heroes/bot_necropolis_warlord.webp") !important;
        background-position: 51% 28% !important;
        transform: none !important;
    }

    .rb-hero-frame {
        border: 4px solid rgba(226, 180, 88, 0.78) !important;
        border-radius: 30px 30px 14px 14px !important;
        background:
            radial-gradient(circle at 50% -3%, rgba(255, 241, 176, 0.72) 0 8px, transparent 9px),
            radial-gradient(circle at 50% 103%, rgba(255, 241, 176, 0.65) 0 8px, transparent 9px),
            linear-gradient(90deg, rgba(255, 230, 150, 0.42), transparent 14%, transparent 86%, rgba(255, 230, 150, 0.42)),
            linear-gradient(180deg, rgba(255, 245, 205, 0.22), transparent 18%, transparent 80%, rgba(255, 210, 120, 0.26)) !important;
        box-shadow:
            inset 0 0 0 7px rgba(0, 0, 0, 0.52),
            inset 0 0 42px rgba(255, 214, 112, 0.22),
            0 0 34px rgba(196, 160, 80, 0.28) !important;
    }

    .rb-hud-copy > span:first-child {
        left: 120px;
        right: 118px;
        bottom: -2px;
        min-height: 34px;
        padding: 7px 16px;
        border: 1px solid rgba(226, 180, 88, 0.66);
        border-radius: 4px;
        background: linear-gradient(180deg, rgba(50, 34, 18, 0.9), rgba(8, 7, 7, 0.96));
        font-size: 20px !important;
    }

    .rb-hud-bot .rb-hud-copy > span:first-child {
        left: 76px;
        right: 76px;
        bottom: -28px;
        color: #ead8ff;
        font-size: 18px !important;
    }

    .rb-hud-health {
        left: 20px !important;
        bottom: 34px !important;
        width: 126px !important;
        height: 126px !important;
    }

    .rb-hud-bot .rb-hud-health {
        left: auto !important;
        right: 22px !important;
        bottom: 68px !important;
    }

    .rb-life-orb {
        width: 122px !important;
        height: 122px !important;
        border-color: rgba(255, 230, 146, 0.92) !important;
        background:
            radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.78), transparent 20%),
            linear-gradient(180deg, rgba(61, 186, 231, 0.95), rgba(8, 68, 114, 0.96) 52%, rgba(3, 28, 48, 0.98)) !important;
        box-shadow:
            inset 0 0 0 8px rgba(0, 0, 0, 0.54),
            inset 0 -32px 38px rgba(0, 0, 0, 0.58),
            0 16px 30px rgba(0, 0, 0, 0.66),
            0 0 28px rgba(52, 178, 230, 0.4) !important;
    }

    .rb-hud-bot .rb-life-orb {
        background:
            radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.64), transparent 20%),
            linear-gradient(180deg, rgba(235, 92, 67, 0.96), rgba(105, 13, 18, 0.98) 58%, rgba(28, 4, 9, 0.98)) !important;
        box-shadow:
            inset 0 0 0 8px rgba(0, 0, 0, 0.54),
            inset 0 -32px 38px rgba(0, 0, 0, 0.58),
            0 16px 30px rgba(0, 0, 0, 0.66),
            0 0 28px rgba(235, 74, 60, 0.34) !important;
    }

    .rb-hud-health strong {
        font-size: 52px !important;
    }

    .rb-hero-level {
        right: 28px !important;
        bottom: 40px !important;
        width: 82px !important;
        height: 92px !important;
        font-size: 60px !important;
        background:
            radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.28), transparent 34%),
            linear-gradient(180deg, rgba(196, 160, 80, 0.94), rgba(34, 21, 10, 0.98)) !important;
        box-shadow:
            inset 0 0 0 3px rgba(0, 0, 0, 0.52),
            0 0 24px rgba(255, 219, 126, 0.36) !important;
    }

    .rb-hud-bot .rb-hero-level {
        left: 42px !important;
        right: auto !important;
        bottom: 18px !important;
        background:
            radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.22), transparent 34%),
            linear-gradient(180deg, rgba(107, 59, 138, 0.96), rgba(27, 9, 34, 0.98)) !important;
    }

    .rb-mark,
    .rb-bot-emblem,
    .rb-faction-emblem {
        width: 64px !important;
        height: 64px !important;
        right: 38px !important;
        bottom: 146px !important;
        border-radius: 8px !important;
    }

    .rb-bot-emblem {
        left: auto !important;
        right: 40px !important;
        bottom: 0 !important;
        background:
            radial-gradient(circle at 50% 38%, rgba(220, 102, 255, 0.62), transparent 34%),
            linear-gradient(180deg, rgba(107, 59, 138, 0.86), rgba(16, 7, 22, 0.98)) !important;
    }

    .rb-zone-row,
    .rb-zone-row span,
    .rb-hand-count {
        display: none !important;
    }

    .rb-mana-coins {
        top: 130px !important;
        right: -54px !important;
        width: 58px !important;
        min-height: 238px !important;
        gap: 7px !important;
        border-radius: 10px !important;
        background:
            linear-gradient(180deg, rgba(9, 12, 14, 0.96), rgba(1, 2, 3, 0.88)) !important;
        border-color: rgba(226, 180, 88, 0.62) !important;
    }

    .rb-hud-bot .rb-mana-coins {
        top: 28px !important;
        left: -72px !important;
        right: auto !important;
    }

    .rb-mana-coins::before {
        font-size: 20px !important;
    }

    .rb-mana-coin {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        border-color: rgba(255, 232, 140, 0.92) !important;
        background:
            radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.72), transparent 22%),
            radial-gradient(circle at 50% 50%, #ffe79d 0 22%, #d9a342 42%, #6d3b13 72%, #231108 100%) !important;
        box-shadow:
            inset 0 -3px 3px rgba(0, 0, 0, 0.38),
            0 0 13px rgba(238, 183, 71, 0.38) !important;
    }

    .rb-mana-coin.is-spent {
        background:
            radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.18), transparent 22%),
            radial-gradient(circle at 50% 50%, #514f4a 0 28%, #282725 70%, #11100f 100%) !important;
        border-color: rgba(130, 125, 116, 0.58) !important;
    }

    .rb-battle-zone {
        left: 392px !important;
        top: 176px !important;
        width: 1114px !important;
        height: 548px !important;
    }

    .rb-battle-zone::before {
        inset: 22px 10px 10px !important;
        border-radius: 16px !important;
        clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(0, 0, 0, 0.05) 34%, rgba(0, 0, 0, 0.28)),
            radial-gradient(ellipse at 50% 48%, rgba(255, 221, 130, 0.16), transparent 50%),
            repeating-linear-gradient(0deg, rgba(255, 244, 203, 0.045) 0 1px, transparent 1px 82px),
            repeating-linear-gradient(90deg, rgba(255, 244, 203, 0.035) 0 1px, transparent 1px 96px),
            linear-gradient(135deg, #5b4c3e 0%, #302720 48%, #171514 100%) !important;
        border: 3px solid rgba(86, 61, 34, 0.92) !important;
        box-shadow:
            inset 0 0 0 4px rgba(0, 0, 0, 0.44),
            inset 0 0 110px rgba(0, 0, 0, 0.55),
            0 46px 80px rgba(0, 0, 0, 0.64) !important;
        transform: rotateX(5deg) !important;
    }

    .rb-battle-zone::after {
        left: 96px !important;
        right: 96px !important;
        height: 4px !important;
        background:
            radial-gradient(circle at 50% 50%, #fff9d8 0 8px, rgba(255, 219, 108, 0.9) 9px 11px, transparent 12px),
            linear-gradient(90deg, transparent, rgba(255, 193, 70, 0.68) 9%, #fff0a7 50%, rgba(255, 193, 70, 0.68) 91%, transparent) !important;
        box-shadow:
            0 0 18px rgba(255, 225, 128, 0.86),
            0 0 44px rgba(196, 160, 80, 0.44) !important;
    }

    .rb-field-row {
        width: 930px !important;
    }

    .rb-field-row-bot {
        top: 72px !important;
    }

    .rb-field-row-player {
        bottom: 74px !important;
    }

    .rb-field-slots {
        grid-template-columns: repeat(3, 218px) !important;
        gap: 72px !important;
        min-height: 156px !important;
    }

    .rb-field-slot-empty {
        width: 218px !important;
        height: 136px !important;
        min-width: 218px !important;
        border-radius: 12px !important;
        border: 2px solid rgba(185, 148, 91, 0.56) !important;
        background:
            radial-gradient(circle at 50% 48%, rgba(255, 230, 152, 0.14), transparent 34%),
            linear-gradient(180deg, rgba(71, 60, 48, 0.74), rgba(21, 18, 16, 0.98)),
            repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 40px) !important;
        box-shadow:
            inset 0 0 0 5px rgba(0, 0, 0, 0.42),
            inset 0 0 28px rgba(196, 160, 80, 0.14),
            0 24px 32px rgba(0, 0, 0, 0.5) !important;
    }

    .rb-field-slot-empty::before {
        left: 50% !important;
        top: 50% !important;
        width: 50px !important;
        height: 50px !important;
        inset: auto !important;
        border-color: rgba(216, 177, 100, 0.52) !important;
        border-radius: 8px !important;
        background:
            radial-gradient(circle at 50% 50%, rgba(255, 237, 176, 0.36), transparent 28%),
            linear-gradient(180deg, rgba(216, 177, 100, 0.2), rgba(0, 0, 0, 0.18)) !important;
        transform: translate(-50%, -50%) rotate(45deg) !important;
    }

    .rb-field-slot-empty::after {
        content: "";
        position: absolute;
        inset: 10px 18px;
        border: 1px solid rgba(216, 177, 100, 0.34);
        border-radius: 10px;
        box-shadow:
            inset 0 0 18px rgba(0, 0, 0, 0.34),
            0 0 14px rgba(216, 177, 100, 0.14);
    }

    .rb-field-card {
        width: 154px !important;
        height: 222px !important;
        min-width: 154px !important;
        justify-self: center;
    }

    .rb-player-hand {
        bottom: -42px !important;
        width: 1120px !important;
        height: 360px !important;
    }

    .rb-hand .rb-mini-card {
        width: 176px !important;
        height: 264px !important;
        min-width: 176px !important;
        margin-left: -88px !important;
        transform:
            translateX(calc(var(--fan-offset, 0) * 136px))
            translateY(var(--fan-arc, 0px))
            rotate(var(--fan-rotate, 0deg))
            rotateY(var(--tilt-y, 0deg))
            rotateX(var(--tilt-x, 0deg)) !important;
    }

    .rb-hand .rb-mini-card:hover:not(:disabled):not(.is-locked),
    .rb-hand .rb-mini-card:focus-visible:not(:disabled):not(.is-locked) {
        transform:
            translateX(calc(var(--fan-offset, 0) * 136px))
            translateY(calc(var(--fan-arc, 0px) - 38px))
            rotate(var(--fan-rotate, 0deg))
            rotateY(6deg)
            scale(1.14) !important;
    }

    .rb-hand .rb-mini-card.is-selected {
        transform:
            translateX(calc(var(--fan-offset, 0) * 136px))
            translateY(calc(var(--fan-arc, 0px) - 34px))
            rotate(var(--fan-rotate, 0deg))
            rotateY(5deg)
            scale(1.1) !important;
        box-shadow:
            0 36px 56px rgba(0, 0, 0, 0.78),
            0 0 34px rgba(255, 218, 118, 0.76),
            0 0 70px color-mix(in srgb, var(--rb-card-faction), transparent 58%),
            inset 0 0 0 1px rgba(255, 255, 255, 0.16) !important;
    }

    .rb-hand .rb-mini-card.is-recommended:not(.is-selected) {
        transform:
            translateX(calc(var(--fan-offset, 0) * 136px))
            translateY(calc(var(--fan-arc, 0px) - 24px))
            rotate(var(--fan-rotate, 0deg))
            rotateY(4deg)
            scale(1.06) !important;
        z-index: 420;
        box-shadow:
            0 30px 48px rgba(0, 0, 0, 0.72),
            0 0 28px rgba(255, 218, 118, 0.54),
            inset 0 0 0 1px rgba(255, 255, 255, 0.14) !important;
    }

    .rb-card-image-layer {
        height: 58% !important;
    }

    .rb-card-titlebar {
        top: 60% !important;
    }

    .rb-card-textbox {
        display: none !important;
    }

    .rb-card-statline {
        bottom: 10px !important;
    }

    .rb-keyword-strip {
        bottom: 48px !important;
    }

    .rb-actions-row > div:first-child {
        left: calc(50% + 520px) !important;
        bottom: 108px !important;
    }

    #play-button {
        min-width: 170px !important;
        min-height: 56px !important;
        font-size: 16px !important;
        opacity: 0.92;
    }
}

/* === v93 FATES_FIX: desktop overlap/proportion correction === */
@media (min-width: 1180px) and (min-height: 680px) {
    .rb-hud, .rb-hud-player, .rb-hud-bot, .rb-turn-core,
    .rb-battle-zone, .rb-player-hand, .rb-card-stage,
    .rb-result-panel, .rb-evolution-panel, .rb-log, .rb-actions-row,
    .rb-actions, .rb-result, .rb-turn-log,
    .rb-hand .rb-mini-card,
    .rb-hero-portrait, .rb-hero-art, .rb-hero-frame,
    .rb-mana-coins, .rb-hero-level,
    .rb-mobile-action-bar, .rb-field-row, .rb-actions-row > div {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        inset: auto !important;
        z-index: auto !important;
    }

    .rb-hand .rb-mini-card {
        z-index: var(--card-z, var(--fan-z, 1)) !important;
    }

    .rb-game-board {
        top: calc(var(--rb-safe-top) + 8px) !important;
        left: 50% !important;
        width: var(--rb-board-width) !important;
        height: var(--rb-board-height) !important;
        display: grid !important;
        grid-template-areas:
            "hero-l turn hero-r"
            "hero-l arena hero-r"
            "hand hand hand";
        grid-template-columns: clamp(280px, 22vw, 360px) minmax(0, 1fr) clamp(280px, 22vw, 360px);
        grid-template-rows: clamp(60px, 8vh, 80px) minmax(360px, 1fr) clamp(200px, 26vh, 280px);
        gap: 12px 16px;
        padding: 16px clamp(20px, 3vw, 48px) !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .rb-game-board::before {
        inset: 0 !important;
        z-index: -1;
    }

    .rb-game-board::after {
        display: none !important;
    }

    .rb-hud,
    .rb-mobile-action-bar,
    .rb-actions-row {
        display: contents !important;
        width: auto !important;
        height: auto !important;
        pointer-events: none;
    }

    .rb-card-stage,
    .rb-evolution-panel,
    .rb-log,
    .rb-bot-card-zone,
    .rb-field-vs,
    .rb-actions-row small,
    .rb-field-row > span,
    .rb-turn-core > span,
    .rb-turn-core small,
    .rb-phase-timeline,
    .rb-zone-row,
    .rb-hand-count {
        display: none !important;
    }

    .rb-hud-player,
    .rb-hud-bot {
        width: min(100%, 300px) !important;
        height: 520px !important;
        max-height: 100%;
        display: grid !important;
        grid-template: 1fr / 1fr !important;
        gap: 0 !important;
        justify-items: center;
        align-items: end;
        justify-self: center;
        align-self: end;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        pointer-events: auto;
        animation: none !important;
        perspective: none !important;
        transform: none !important;
        transform-style: flat;
    }

    .rb-hud-player {
        grid-area: hero-l;
        --hero-look: 3deg;
    }

    .rb-hud-bot {
        grid-area: hero-r;
        --hero-look: -3deg;
        align-self: start;
    }

    .rb-hero-portrait {
        width: 280px !important;
        height: min(100%, 468px) !important;
        display: grid !important;
        grid-template: 1fr / 1fr;
        border-radius: 24px 24px 12px 12px !important;
        background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 28%),
            linear-gradient(180deg, rgba(52, 37, 18, 0.96), rgba(6, 5, 5, 0.98)) !important;
        box-shadow:
            0 28px 56px rgba(0, 0, 0, 0.72),
            0 0 0 2px rgba(64, 39, 15, 0.98),
            0 0 0 5px rgba(196, 160, 80, 0.58),
            inset 0 0 0 6px rgba(0, 0, 0, 0.48),
            inset 0 0 42px rgba(255, 222, 136, 0.16) !important;
        overflow: hidden !important;
    }

    .rb-hero-art,
    .rb-hero-frame {
        grid-area: 1 / 1 !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }

    .rb-hero-art {
        margin: 18px 20px 26px !important;
        border-radius: 18px 18px 8px 8px !important;
        background-size: cover !important;
        box-shadow:
            inset 0 -86px 86px rgba(0, 0, 0, 0.76),
            inset 0 0 0 1px rgba(255, 244, 203, 0.2) !important;
    }

    .rb-hud-player .rb-hero-art {
        background-image:
            linear-gradient(180deg, rgba(255, 236, 172, 0.03), rgba(0, 0, 0, 0.22)),
            url("../img/heroes/sky_haven_knight.webp") !important;
        background-position: 52% 30% !important;
    }

    .rb-hud-bot .rb-hero-art {
        background-image:
            linear-gradient(180deg, rgba(107, 59, 138, 0.03), rgba(0, 0, 0, 0.34)),
            url("../img/heroes/bot_necropolis_warlord.webp") !important;
        background-position: 51% 28% !important;
        transform: none !important;
    }

    .rb-hero-frame {
        border: 4px solid rgba(226, 180, 88, 0.78) !important;
        border-radius: 24px 24px 12px 12px !important;
        pointer-events: none;
        background:
            radial-gradient(circle at 50% -3%, rgba(255, 241, 176, 0.72) 0 8px, transparent 9px),
            radial-gradient(circle at 50% 103%, rgba(255, 241, 176, 0.65) 0 8px, transparent 9px),
            linear-gradient(90deg, rgba(255, 230, 150, 0.42), transparent 14%, transparent 86%, rgba(255, 230, 150, 0.42)),
            linear-gradient(180deg, rgba(255, 245, 205, 0.22), transparent 18%, transparent 80%, rgba(255, 210, 120, 0.26)) !important;
        box-shadow:
            inset 0 0 0 6px rgba(0, 0, 0, 0.52),
            inset 0 0 34px rgba(255, 214, 112, 0.22),
            0 0 28px rgba(196, 160, 80, 0.28) !important;
    }

    .rb-hud-copy {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        padding: 0 !important;
        pointer-events: none;
    }

    .rb-hud-copy > span:first-child {
        position: absolute !important;
        left: 74px !important;
        right: 74px !important;
        bottom: 1px !important;
        min-height: 30px;
        display: grid !important;
        place-items: center;
        padding: 5px 10px;
        overflow: hidden;
        border: 1px solid rgba(226, 180, 88, 0.66);
        border-radius: 4px;
        background: linear-gradient(180deg, rgba(50, 34, 18, 0.9), rgba(8, 7, 7, 0.96));
        color: var(--rb-fates-ivory);
        font-family: var(--rb-font-display);
        font-size: clamp(12px, 1vw, 17px) !important;
        font-weight: 900;
        line-height: 1;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-shadow: 0 2px 0 #000, 0 0 14px rgba(196, 160, 80, 0.42);
    }

    .rb-hud-bot .rb-hud-copy > span:first-child {
        left: 48px !important;
        right: 48px !important;
        bottom: 1px !important;
        color: #ead8ff;
        font-size: clamp(11px, 0.9vw, 15px) !important;
        text-shadow: 0 2px 0 #000, 0 0 16px rgba(107, 59, 138, 0.6);
    }

    .rb-hud-health {
        position: absolute !important;
        left: 10px !important;
        bottom: 28px !important;
        width: 96px !important;
        height: 96px !important;
        display: block !important;
        pointer-events: none;
    }

    .rb-hud-bot .rb-hud-health {
        left: auto !important;
        right: 10px !important;
        bottom: 42px !important;
    }

    .rb-life-orb {
        width: 92px !important;
        height: 92px !important;
        border-color: rgba(255, 230, 146, 0.92) !important;
        background:
            radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.78), transparent 20%),
            linear-gradient(180deg, rgba(61, 186, 231, 0.95), rgba(8, 68, 114, 0.96) 52%, rgba(3, 28, 48, 0.98)) !important;
        box-shadow:
            inset 0 0 0 7px rgba(0, 0, 0, 0.54),
            inset 0 -26px 30px rgba(0, 0, 0, 0.58),
            0 14px 24px rgba(0, 0, 0, 0.62),
            0 0 24px rgba(52, 178, 230, 0.4) !important;
    }

    .rb-hud-bot .rb-life-orb {
        background:
            radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.64), transparent 20%),
            linear-gradient(180deg, rgba(235, 92, 67, 0.96), rgba(105, 13, 18, 0.98) 58%, rgba(28, 4, 9, 0.98)) !important;
    }

    .rb-life-orb b {
        inset: 11px !important;
    }

    .rb-life-orb-readout {
        position: absolute !important;
        inset: 0 !important;
        display: grid !important;
        place-items: center !important;
        z-index: 4;
    }

    .rb-life-orb-readout i,
    .rb-life-orb-readout small {
        display: none !important;
    }

    .rb-hud-health strong {
        color: #fff5d6;
        font-family: var(--rb-font-display);
        font-size: 40px !important;
        font-weight: 900;
        line-height: 1;
        text-shadow: 0 3px 0 #180b08, 0 0 16px rgba(255, 236, 180, 0.42);
    }

    .rb-hero-level {
        position: absolute !important;
        right: 20px !important;
        bottom: 36px !important;
        width: 58px !important;
        height: 68px !important;
        display: grid !important;
        place-items: center;
        color: #ffe6ad;
        font-family: var(--rb-font-display);
        font-size: 42px !important;
        font-weight: 900;
        line-height: 1;
        border: 2px solid rgba(196, 160, 80, 0.78);
        border-radius: 8px;
        background:
            radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.3), transparent 34%),
            linear-gradient(180deg, rgba(196, 160, 80, 0.9), rgba(63, 39, 16, 0.98)) !important;
        box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.52), 0 0 20px rgba(196, 160, 80, 0.3);
        text-shadow: 0 3px 0 #17090a;
    }

    .rb-hud-bot .rb-hero-level {
        left: 22px !important;
        right: auto !important;
        bottom: 22px !important;
        background:
            radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.22), transparent 34%),
            linear-gradient(180deg, rgba(107, 59, 138, 0.96), rgba(27, 9, 34, 0.98)) !important;
    }

    .rb-mark,
    .rb-bot-emblem,
    .rb-faction-emblem {
        position: absolute !important;
        width: 48px !important;
        height: 48px !important;
        right: 26px !important;
        bottom: 136px !important;
        display: grid !important;
        place-items: center;
        border: 2px solid rgba(196, 160, 80, 0.74);
        border-radius: 8px !important;
        color: #fff1c9;
        font-family: var(--rb-font-display);
        font-size: 20px !important;
        font-weight: 900;
        text-decoration: none;
        pointer-events: auto;
    }

    .rb-bot-emblem {
        left: auto !important;
        right: 26px !important;
        bottom: 136px !important;
        background:
            radial-gradient(circle at 50% 38%, rgba(220, 102, 255, 0.62), transparent 34%),
            linear-gradient(180deg, rgba(107, 59, 138, 0.86), rgba(16, 7, 22, 0.98)) !important;
    }

    .rb-mana-coins {
        position: absolute !important;
        top: 74px !important;
        right: -46px !important;
        width: 50px !important;
        min-height: 192px !important;
        padding: 9px 7px 12px;
        display: grid !important;
        align-content: end;
        gap: 5px !important;
        border: 1px solid rgba(226, 180, 88, 0.68) !important;
        border-radius: 10px !important;
        background: linear-gradient(180deg, rgba(9, 12, 14, 0.96), rgba(1, 2, 3, 0.88)) !important;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 18px 32px rgba(0, 0, 0, 0.46);
    }

    .rb-hud-bot .rb-mana-coins {
        left: -46px !important;
        right: auto !important;
    }

    .rb-mana-coins::before {
        content: attr(data-available) "/" attr(data-max);
        color: #fff2bf;
        font-family: var(--rb-font-display);
        font-size: 17px !important;
        font-weight: 900;
        line-height: 1;
        text-align: center;
        text-shadow: 0 2px 0 #000;
    }

    .rb-mana-coin {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
    }

    .rb-turn-core {
        grid-area: turn;
        justify-self: center;
        align-self: start;
        width: 112px !important;
        height: 48px !important;
        display: grid !important;
        place-items: center;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        pointer-events: none;
    }

    .rb-turn-core::before {
        width: 260px !important;
        height: 24px !important;
        top: 11px !important;
        background:
            linear-gradient(90deg, transparent, rgba(196, 160, 80, 0.58) 10%, rgba(14, 13, 14, 0.88) 50%, rgba(196, 160, 80, 0.58) 90%, transparent),
            radial-gradient(circle at 18% 50%, #25698f 0 5px, #07090b 6px 10px, transparent 11px),
            radial-gradient(circle at 31% 50%, #17120d 0 5px, #07090b 6px 10px, transparent 11px),
            radial-gradient(circle at 69% 50%, #17120d 0 5px, #07090b 6px 10px, transparent 11px),
            radial-gradient(circle at 82% 50%, #17120d 0 5px, #07090b 6px 10px, transparent 11px) !important;
    }

    .rb-turn-core strong {
        width: 46px !important;
        height: 46px !important;
        display: grid !important;
        place-items: center;
        color: #f4fbff;
        font-family: var(--rb-font-display);
        font-size: 23px !important;
        border: 2px solid rgba(255, 221, 122, 0.86) !important;
        background:
            radial-gradient(circle at 50% 32%, rgba(255, 255, 255, 0.45), transparent 31%),
            linear-gradient(180deg, #2c91c1, #0e3d66 68%, #071528) !important;
        box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.42), 0 0 22px rgba(70, 183, 216, 0.46) !important;
        transform: rotate(45deg);
    }

    .rb-battle-zone {
        grid-area: arena;
        justify-self: start;
        align-self: center;
        width: calc(100% - 160px) !important;
        max-width: 760px;
        height: min(100%, 500px) !important;
        display: grid !important;
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
        align-content: center;
        gap: 34px;
        padding: 42px 24px 38px !important;
        border: 0 !important;
        border-radius: 18px !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        perspective: 1200px;
        pointer-events: auto;
    }

    /* K13: mesa de madeira marrom (gradient #5b4c3e → #171514 com clip-path
       polygon + rotateX 5deg) removida. O usuário relatou que cria uma
       camada visual "embaixo dos slots" — só os slots devem aparecer.
       O fundo agora vem do .rb-game-viewport (paisagem com ruínas).
       Mantemos só o ::after (linha divisória dourada VS) mais sutil. */
    .rb-battle-zone::before {
        content: none !important;
    }

    /* K13: linha divisória dourada mais sutil (era 4px sólida com glow
       forte; agora 1px com fade lateral e sem dot central — só sugere
       a divisão entre zona bot e player). */
    .rb-battle-zone::after {
        content: "";
        position: absolute;
        z-index: 3;
        left: 12% !important;
        right: 12% !important;
        top: 50% !important;
        height: 1px !important;
        background: linear-gradient(90deg, transparent, rgba(196, 160, 80, 0.42) 50%, transparent) !important;
        box-shadow: none !important;
    }

    .battlefield-layer {
        position: absolute !important;
        inset: -70px !important;
        pointer-events: none;
    }

    .rb-field-row {
        z-index: 4;
        width: 100% !important;
        display: block !important;
        transform: none !important;
    }

    .rb-field-row-bot,
    .rb-field-row-player {
        align-self: center;
    }

    .rb-field-slots {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
        justify-content: center !important;
        align-items: center !important;
        gap: clamp(20px, 3vw, 40px) !important;
        min-height: 0 !important;
        padding: 0 !important;
    }

    .rb-field-slot-empty {
        width: 100% !important;
        max-width: 178px;
        height: 118px !important;
        min-width: 0 !important;
        justify-self: center;
        border-radius: 12px !important;
    }

    .rb-field-card {
        width: 132px !important;
        height: 190px !important;
        min-width: 132px !important;
        justify-self: center;
    }

    .rb-player-hand {
        grid-area: hand;
        justify-self: stretch;
        align-self: stretch;
        width: 100% !important;
        height: min(100%, 280px) !important;
        padding: 28px 28px 6px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        pointer-events: auto;
        transform: none !important;
    }

    .rb-action-bar-meta {
        position: absolute !important;
        left: 50% !important;
        top: 0 !important;
        transform: translateX(-50%) !important;
        min-width: 180px;
        min-height: 34px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 6px 14px;
        border: 1px solid rgba(226, 180, 88, 0.48);
        border-radius: 999px;
        background: linear-gradient(180deg, rgba(9, 12, 14, 0.92), rgba(1, 2, 3, 0.78));
        box-shadow: 0 12px 26px rgba(0, 0, 0, 0.36), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    }

    .rb-action-bar-meta span,
    .rb-action-bar-meta strong {
        color: #fff2bf;
        font-size: 13px;
        line-height: 1;
        white-space: nowrap;
    }

    .rb-hand {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        justify-content: center;
        align-items: end;
        gap: 0 !important;
        overflow: visible !important;
        perspective: 1200px;
        touch-action: pan-y;
    }

    .rb-hand .rb-mini-card {
        flex: 0 0 140px;
        width: 140px !important;
        height: 200px !important;
        min-width: 140px !important;
        margin: 0 !important;
        pointer-events: auto;
        transform:
            translateY(var(--fan-arc, 0px))
            rotate(var(--fan-rotate, 0deg))
            rotateY(var(--tilt-y, 0deg))
            rotateX(var(--tilt-x, 0deg)) !important;
        transform-origin: 50% 96%;
        transition:
            transform 240ms cubic-bezier(0.18, 0.89, 0.32, 1.18),
            box-shadow 180ms ease,
            opacity 160ms ease;
        animation: rb-card-draw-fates 420ms cubic-bezier(0.18, 0.89, 0.32, 1.28) both;
        animation-delay: var(--draw-delay, 0ms);
    }

    .rb-hand .rb-mini-card + .rb-mini-card {
        margin-left: -18px !important;
    }

    .rb-hand .rb-mini-card:hover:not(:disabled):not(.is-locked),
    .rb-hand .rb-mini-card:focus-visible:not(:disabled):not(.is-locked) {
        transform:
            translateY(calc(var(--fan-arc, 0px) - 22px))
            rotate(var(--fan-rotate, 0deg))
            rotateY(5deg)
            scale(1.08) !important;
        z-index: 500 !important;
    }

    .rb-hand .rb-mini-card.is-selected {
        transform:
            translateY(calc(var(--fan-arc, 0px) - 18px))
            rotate(var(--fan-rotate, 0deg))
            rotateY(4deg)
            scale(1.06) !important;
        z-index: 700 !important;
    }

    .rb-hand .rb-mini-card.is-recommended:not(.is-selected) {
        transform:
            translateY(calc(var(--fan-arc, 0px) - 12px))
            rotate(var(--fan-rotate, 0deg))
            rotateY(3deg)
            scale(1.03) !important;
        z-index: 420 !important;
    }

    .rb-card-image-layer {
        height: 56% !important;
    }

    .rb-card-titlebar {
        top: 58% !important;
    }

    .rb-card-textbox {
        display: none !important;
    }

    .rb-card-statline {
        bottom: 8px !important;
    }

    .rb-keyword-strip {
        bottom: 42px !important;
    }

    .rb-actions-row > div:first-child {
        grid-area: arena;
        justify-self: end;
        align-self: center;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 140px !important;
        display: grid !important;
        pointer-events: auto;
        transform: none !important;
    }

    .rb-actions-row > div:nth-child(2) {
        grid-area: turn;
        justify-self: center;
        align-self: end;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 140px !important;
        display: grid !important;
        pointer-events: auto;
        transform: none !important;
    }

    .rb-actions-row .rb-cta,
    .rb-actions-row .rb-secondary,
    #play-button,
    #next-turn-button {
        width: 140px !important;
        min-width: 140px !important;
        max-width: 140px !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        border: 2px solid rgba(234, 216, 164, 0.62) !important;
        border-radius: 8px !important;
        color: #fff4d0 !important;
        font-family: var(--rb-font-display);
        font-size: 12px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
        white-space: nowrap;
        text-transform: uppercase;
        text-shadow: 0 2px 0 #000;
        box-shadow:
            inset 0 0 0 2px rgba(0, 0, 0, 0.36),
            inset 0 13px 22px rgba(255, 255, 255, 0.08),
            0 14px 24px rgba(0, 0, 0, 0.44),
            0 0 20px rgba(196, 160, 80, 0.24) !important;
        transform: none !important;
        perspective: none !important;
    }

    #next-turn-button {
        background: linear-gradient(180deg, #b53228 0%, #741712 64%, #300806 100%) !important;
    }

    #play-button {
        background:
            linear-gradient(180deg, rgba(43, 114, 143, 0.96), rgba(15, 48, 73, 0.96) 72%, rgba(6, 20, 30, 0.98)) !important;
        border-color: rgba(106, 196, 226, 0.62) !important;
    }

    .rb-actions-row .rb-cta::before,
    .rb-actions-row .rb-cta::after,
    .rb-actions-row .rb-secondary::before,
    .rb-actions-row .rb-secondary::after {
        content: none !important;
        display: none !important;
    }

    .rb-actions-row .rb-cta i,
    .rb-actions-row .rb-secondary i {
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
        margin: 0 !important;
    }
}

/* === v95 GAME_FEEL_PASS / v96 CORE_LOOP_STABILIZATION: arena feedback and clarity === */
.rb-feedback-layer {
    position: absolute;
    inset: 0;
    z-index: 950;
    pointer-events: none;
    display: grid;
    place-items: center;
}

.rb-turn-banner {
    position: absolute;
    top: 32%;
    left: 50%;
    min-width: 260px;
    padding: 14px 28px 13px;
    border: 2px solid rgba(255, 232, 158, 0.86);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(103, 67, 24, 0.94), rgba(32, 20, 11, 0.96)),
        radial-gradient(circle at 50% 10%, rgba(255, 238, 166, 0.28), transparent 58%);
    color: #fff4ce;
    font-family: var(--rb-font-display);
    font-size: clamp(20px, 2vw, 34px);
    font-weight: 950;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 3px 0 #120a05, 0 0 18px rgba(255, 218, 124, 0.58);
    box-shadow:
        inset 0 0 0 2px rgba(0, 0, 0, 0.42),
        inset 0 14px 22px rgba(255, 255, 255, 0.08),
        0 24px 54px rgba(0, 0, 0, 0.64),
        0 0 42px rgba(244, 174, 53, 0.42);
    opacity: 0;
    transform: translate(-50%, 18px) scale(0.9);
}

.rb-turn-banner[data-turn-side="bot"] {
    border-color: rgba(235, 142, 116, 0.82);
    background:
        linear-gradient(180deg, rgba(98, 35, 34, 0.96), rgba(24, 9, 12, 0.98)),
        radial-gradient(circle at 50% 10%, rgba(235, 95, 72, 0.25), transparent 58%);
    color: #ffe5dc;
    box-shadow:
        inset 0 0 0 2px rgba(0, 0, 0, 0.45),
        inset 0 14px 22px rgba(255, 255, 255, 0.07),
        0 24px 54px rgba(0, 0, 0, 0.64),
        0 0 42px rgba(235, 72, 68, 0.34);
}

.rb-turn-banner.is-visible {
    animation: rb-turn-banner-v95 1200ms cubic-bezier(0.18, 0.89, 0.32, 1.1) both;
}

.rb-action-popup {
    position: absolute;
    left: 50%;
    top: 49%;
    min-width: 220px;
    max-width: min(440px, 58vw);
    display: grid;
    gap: 4px;
    padding: 12px 18px;
    border: 1px solid rgba(255, 232, 168, 0.74);
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(18, 16, 14, 0.94), rgba(4, 5, 7, 0.88)),
        radial-gradient(circle at 50% 0%, rgba(244, 174, 53, 0.18), transparent 58%);
    color: #fff2cf;
    font-family: var(--rb-font-display);
    font-size: clamp(15px, 1.25vw, 22px);
    font-weight: 900;
    line-height: 1.08;
    text-align: center;
    text-shadow: 0 2px 0 #000;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        0 18px 42px rgba(0, 0, 0, 0.58),
        0 0 28px rgba(244, 174, 53, 0.26);
    opacity: 0;
    transform: translate(-50%, 10px) scale(0.94);
}

.rb-action-popup[data-tone="danger"] {
    border-color: rgba(255, 114, 94, 0.82);
    color: #ffe1d8;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        0 18px 42px rgba(0, 0, 0, 0.58),
        0 0 30px rgba(235, 62, 54, 0.36);
}

.rb-action-popup[data-tone="success"],
.rb-action-popup[data-tone="summon"] {
    border-color: rgba(255, 221, 128, 0.86);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        0 18px 42px rgba(0, 0, 0, 0.58),
        0 0 34px rgba(255, 198, 76, 0.36);
}

.rb-action-popup span {
    display: block;
}

.rb-action-popup.is-visible {
    animation: rb-action-popup-v95 1500ms ease both;
}

.rb-hud-side.is-active-turn .rb-hero-portrait {
    animation: rb-active-turn-pulse-v95 1800ms ease-in-out infinite;
}

.rb-hud-player.is-active-turn .rb-hero-portrait {
    box-shadow:
        0 28px 56px rgba(0, 0, 0, 0.72),
        0 0 0 2px rgba(64, 39, 15, 0.98),
        0 0 0 5px rgba(239, 192, 95, 0.72),
        0 0 38px rgba(255, 210, 86, 0.46),
        inset 0 0 0 6px rgba(0, 0, 0, 0.48),
        inset 0 0 42px rgba(255, 222, 136, 0.18) !important;
}

.rb-hud-bot.is-active-turn .rb-hero-portrait {
    box-shadow:
        0 28px 56px rgba(0, 0, 0, 0.72),
        0 0 0 2px rgba(49, 18, 32, 0.98),
        0 0 0 5px rgba(213, 102, 97, 0.58),
        0 0 38px rgba(218, 79, 93, 0.42),
        inset 0 0 0 6px rgba(0, 0, 0, 0.48),
        inset 0 0 42px rgba(147, 79, 180, 0.2) !important;
}

.rb-hud-side.is-taking-damage .rb-hero-portrait {
    animation: rb-hero-hit 560ms cubic-bezier(0.18, 0.89, 0.32, 1.08) both !important;
}

.rb-hud-side.is-taking-damage .rb-hero-portrait::after {
    box-shadow:
        inset 0 0 64px rgba(255, 42, 38, 0.5),
        0 0 42px rgba(255, 42, 38, 0.52) !important;
}

.rb-hud-side.is-taking-damage .rb-hud-health strong {
    animation: rb-hp-impact-v95 560ms cubic-bezier(0.18, 0.89, 0.32, 1.12) both;
}

.rb-game-board.is-screen-hit {
    animation: rb-screen-hit-v95 180ms cubic-bezier(0.2, 0.9, 0.28, 1) both;
}

@media (min-width: 1180px) and (min-height: 680px) {
    .rb-hud-player,
    .rb-hud-bot {
        width: min(100%, 260px) !important;
        height: 440px !important;
    }

    .rb-hero-portrait {
        width: 250px !important;
        height: min(100%, 410px) !important;
        border-radius: 20px 20px 10px 10px !important;
    }

    .rb-hero-art {
        margin: 15px 17px 22px !important;
        border-radius: 15px 15px 7px 7px !important;
        box-shadow:
            inset 0 -72px 74px rgba(0, 0, 0, 0.76),
            inset 0 0 0 1px rgba(255, 244, 203, 0.2) !important;
    }

    .rb-hero-frame {
        border-radius: 20px 20px 10px 10px !important;
    }

    .rb-hud-copy > span:first-child {
        left: 62px !important;
        right: 62px !important;
        bottom: 0 !important;
        min-height: 27px;
        font-size: clamp(11px, 0.88vw, 15px) !important;
    }

    .rb-hud-bot .rb-hud-copy > span:first-child {
        left: 42px !important;
        right: 42px !important;
        bottom: 0 !important;
        font-size: clamp(10px, 0.82vw, 13px) !important;
    }

    .rb-hud-health {
        left: 8px !important;
        bottom: 24px !important;
        width: 84px !important;
        height: 84px !important;
    }

    .rb-hud-bot .rb-hud-health {
        right: 8px !important;
        bottom: 34px !important;
    }

    .rb-life-orb {
        width: 80px !important;
        height: 80px !important;
    }

    .rb-life-orb b {
        inset: 10px !important;
    }

    .rb-hud-health strong {
        font-size: 34px !important;
    }

    .rb-hero-level {
        right: 16px !important;
        bottom: 31px !important;
        width: 50px !important;
        height: 58px !important;
        font-size: 35px !important;
    }

    .rb-hud-bot .rb-hero-level {
        left: 17px !important;
        bottom: 18px !important;
    }

    .rb-mark,
    .rb-bot-emblem,
    .rb-faction-emblem {
        width: 42px !important;
        height: 42px !important;
        right: 22px !important;
        bottom: 116px !important;
    }

    .rb-bot-emblem {
        right: 22px !important;
        bottom: 116px !important;
    }

    .rb-mana-coins {
        top: 56px !important;
        right: -34px !important;
        width: 44px !important;
        min-height: 162px !important;
        padding: 8px 7px 10px !important;
        gap: 5px !important;
    }

    .rb-hud-bot .rb-mana-coins {
        left: -34px !important;
        right: auto !important;
    }

    .rb-mana-coins::before {
        content: none !important;
    }

    .rb-mana-coin {
        width: 28px !important;
        height: 28px !important;
        border: 1px solid rgba(255, 244, 198, 0.74) !important;
        background:
            radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.72), transparent 22%),
            radial-gradient(circle at 50% 52%, rgba(255, 225, 120, 0.98), rgba(184, 122, 34, 0.96) 62%, rgba(81, 49, 18, 0.98)) !important;
        box-shadow:
            inset 0 0 0 3px rgba(0, 0, 0, 0.3),
            0 4px 10px rgba(0, 0, 0, 0.52),
            0 0 14px rgba(255, 205, 86, 0.34) !important;
    }

    .rb-mana-coin.is-spent {
        border-color: rgba(180, 185, 190, 0.38) !important;
        background:
            radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.24), transparent 22%),
            radial-gradient(circle at 50% 52%, rgba(113, 116, 121, 0.82), rgba(52, 55, 61, 0.88) 62%, rgba(18, 20, 24, 0.96)) !important;
        box-shadow:
            inset 0 0 0 3px rgba(0, 0, 0, 0.28),
            0 3px 8px rgba(0, 0, 0, 0.36) !important;
        opacity: 0.58;
    }

    .rb-mana-coins.is-mana-gaining .rb-mana-coin:not(.is-spent) {
        animation: rb-mana-gain-v95 480ms cubic-bezier(0.18, 0.89, 0.32, 1.16) both;
        animation-delay: calc(var(--coin-index, 0) * 38ms);
    }

    .rb-action-bar-meta {
        top: 6px !important;
        min-width: 150px;
        min-height: 30px;
        padding: 5px 12px;
    }

    .rb-action-bar-meta #action-mana-label {
        display: none !important;
    }

    .rb-battle-zone {
        width: calc(100% - 150px) !important;
        max-width: 820px;
        height: min(100%, 560px) !important;
        gap: 34px !important;
        padding: 26px 22px !important;
    }

    .rb-battle-zone::after {
        left: 10% !important;
        right: 10% !important;
        opacity: 0.82;
    }

    .rb-field-row {
        position: relative !important;
        isolation: isolate;
    }

    .rb-field-row::before {
        content: "";
        position: absolute;
        z-index: 0;
        inset: -22px -10px;
        border-radius: 18px;
        pointer-events: none;
        opacity: 0.32;
    }

    .rb-field-row-player::before {
        background:
            radial-gradient(ellipse at 50% 62%, rgba(255, 207, 92, 0.28), transparent 64%),
            linear-gradient(90deg, transparent, rgba(255, 196, 82, 0.1), transparent);
    }

    .rb-field-row-bot::before {
        background:
            radial-gradient(ellipse at 50% 38%, rgba(195, 57, 52, 0.2), transparent 64%),
            linear-gradient(90deg, transparent, rgba(195, 57, 52, 0.08), transparent);
    }

    .rb-field-slots {
        position: relative !important;
        z-index: 1;
        grid-template-columns: repeat(3, minmax(166px, 1fr)) !important;
        gap: clamp(18px, 2.2vw, 34px) !important;
    }

    .rb-field-card {
        width: clamp(154px, 8.7vw, 166px) !important;
        height: clamp(214px, 12vw, 228px) !important;
        min-width: clamp(154px, 8.7vw, 166px) !important;
        box-shadow:
            0 26px 46px rgba(0, 0, 0, 0.72),
            0 0 0 1px rgba(255, 235, 166, 0.28),
            0 0 26px rgba(0, 0, 0, 0.48),
            inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    }

    .rb-field-card .rb-card-frame-layer {
        animation: rb-card-breathe-v95 4600ms ease-in-out infinite;
    }

    .rb-field-slots.has-active-cards .rb-field-slot-empty {
        opacity: 0.3;
        transform: scale(0.92);
        transition: opacity 180ms ease, transform 180ms ease;
    }

    .rb-field-slots.has-active-cards .rb-field-slot-empty.is-summon-target,
    .rb-field-slots.has-active-cards .rb-field-slot-empty[data-direct-attack="true"] {
        opacity: 0.56;
    }

    .rb-field-slots.has-active-cards .rb-field-card {
        box-shadow:
            0 30px 52px rgba(0, 0, 0, 0.78),
            0 0 0 1px rgba(255, 235, 166, 0.38),
            0 0 32px rgba(244, 174, 53, 0.18),
            inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    }

    .rb-field-slot-empty {
        max-width: 184px;
        height: 112px !important;
    }

    .rb-hand .rb-mini-card {
        flex-basis: 132px;
        width: 132px !important;
        height: 190px !important;
        min-width: 132px !important;
        box-shadow:
            0 20px 38px rgba(0, 0, 0, 0.66),
            0 0 0 1px rgba(255, 235, 166, 0.22),
            inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
        filter: brightness(1);
        animation: rb-card-draw-v95 400ms cubic-bezier(0.18, 0.89, 0.32, 1.22) both;
        animation-delay: var(--draw-delay, 0ms);
    }

    .rb-hand .rb-mini-card + .rb-mini-card {
        margin-left: -16px !important;
    }

    .rb-hand .rb-mini-card .rb-card-frame-layer {
        animation: rb-card-breathe-v95 5200ms ease-in-out infinite;
    }

    .rb-hand .rb-mini-card:hover:not(:disabled):not(.is-locked):not(.is-selected),
    .rb-hand .rb-mini-card:focus-visible:not(:disabled):not(.is-locked):not(.is-selected) {
        transform:
            translateY(calc(var(--fan-arc, 0px) - 22px))
            rotate(var(--fan-rotate, 0deg))
            rotateY(5deg)
            scale(1.07) !important;
        filter: brightness(1.08) saturate(1.08);
        box-shadow:
            0 28px 52px rgba(0, 0, 0, 0.78),
            0 0 0 2px rgba(255, 224, 132, 0.5),
            0 0 26px rgba(255, 203, 78, 0.42),
            inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
        z-index: 560 !important;
    }

    .rb-hand .rb-mini-card.is-selected {
        transform:
            translateY(calc(var(--fan-arc, 0px) - 32px))
            rotate(var(--fan-rotate, 0deg))
            rotateY(4deg)
            scale(1.12) !important;
        filter: brightness(1.18) saturate(1.16);
        box-shadow:
            0 34px 66px rgba(0, 0, 0, 0.86),
            0 0 0 2px rgba(255, 245, 192, 0.96),
            0 0 0 5px rgba(217, 153, 37, 0.64),
            0 0 42px rgba(255, 205, 72, 0.88),
            0 0 86px rgba(255, 184, 42, 0.38),
            inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
        animation: rb-card-glow-pulse 940ms ease-in-out infinite alternate;
        z-index: 900 !important;
    }

    .rb-hand .rb-mini-card.is-selected:hover:not(:disabled):not(.is-locked),
    .rb-hand .rb-mini-card.is-selected:focus-visible:not(:disabled):not(.is-locked) {
        transform:
            translateY(calc(var(--fan-arc, 0px) - 32px))
            rotate(var(--fan-rotate, 0deg))
            rotateY(4deg)
            scale(1.12) !important;
        filter: brightness(1.18) saturate(1.16);
        z-index: 900 !important;
    }

    .rb-hand .rb-mini-card.is-selection-pulse {
        animation:
            rb-card-selected-pop-v95 360ms cubic-bezier(0.18, 0.89, 0.32, 1.22) both,
            rb-card-glow-pulse 940ms ease-in-out 360ms infinite alternate;
    }

    .rb-hand .rb-mini-card.is-recommended:not(.is-selected) {
        filter: brightness(1.04);
    }

    .rb-actions-row > div:first-child {
        width: 132px !important;
    }

    .rb-actions-row > div:nth-child(2) {
        grid-area: arena;
        justify-self: end;
        align-self: end;
        width: 156px !important;
        margin: 0 0 18px 0 !important;
    }

    #next-turn-button {
        width: 156px !important;
        min-width: 156px !important;
        max-width: 156px !important;
        height: 42px !important;
        min-height: 42px !important;
        border-radius: 999px !important;
        border-color: rgba(216, 176, 111, 0.64) !important;
        background:
            linear-gradient(180deg, rgba(127, 85, 39, 0.96), rgba(65, 39, 20, 0.98) 68%, rgba(24, 15, 10, 0.98)) !important;
        color: #f9e8bd !important;
        font-size: 10px !important;
        box-shadow:
            inset 0 0 0 2px rgba(0, 0, 0, 0.34),
            inset 0 10px 18px rgba(255, 255, 255, 0.07),
            0 12px 24px rgba(0, 0, 0, 0.42),
            0 0 16px rgba(196, 142, 62, 0.2) !important;
    }

    #next-turn-button:hover:not(:disabled),
    #next-turn-button:focus-visible:not(:disabled) {
        background:
            linear-gradient(180deg, rgba(156, 103, 47, 0.98), rgba(76, 47, 24, 0.98) 68%, rgba(27, 17, 10, 0.98)) !important;
        box-shadow:
            inset 0 0 0 2px rgba(0, 0, 0, 0.34),
            inset 0 10px 18px rgba(255, 255, 255, 0.08),
            0 14px 28px rgba(0, 0, 0, 0.48),
            0 0 24px rgba(255, 198, 91, 0.28) !important;
    }

    #play-button {
        width: 132px !important;
        min-width: 132px !important;
        max-width: 132px !important;
    }

    .battlefield-ember {
        opacity: 0.68;
        box-shadow: 0 0 14px rgba(255, 132, 38, 0.55);
    }

    .battlefield-embers::before,
    .battlefield-embers::after {
        content: "";
        position: absolute;
        inset: -12%;
        pointer-events: none;
        background:
            radial-gradient(circle at 18% 82%, rgba(255, 138, 45, 0.54) 0 2px, transparent 3px),
            radial-gradient(circle at 43% 74%, rgba(255, 198, 86, 0.36) 0 1px, transparent 2px),
            radial-gradient(circle at 68% 88%, rgba(255, 112, 48, 0.48) 0 2px, transparent 3px),
            radial-gradient(circle at 84% 64%, rgba(255, 198, 86, 0.3) 0 1px, transparent 2px);
        opacity: 0.45;
        animation: rb-ambient-embers-v95 7600ms linear infinite;
    }

    .battlefield-embers::after {
        animation-duration: 10800ms;
        animation-delay: -4200ms;
        opacity: 0.28;
    }
}

@keyframes rb-card-glow-pulse {
    0% {
        box-shadow:
            0 32px 62px rgba(0, 0, 0, 0.82),
            0 0 0 2px rgba(255, 245, 192, 0.9),
            0 0 0 5px rgba(217, 153, 37, 0.52),
            0 0 34px rgba(255, 205, 72, 0.7),
            0 0 72px rgba(255, 184, 42, 0.26),
            inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    }
    100% {
        box-shadow:
            0 38px 72px rgba(0, 0, 0, 0.9),
            0 0 0 3px rgba(255, 249, 214, 1),
            0 0 0 6px rgba(255, 185, 54, 0.7),
            0 0 52px rgba(255, 215, 86, 0.95),
            0 0 98px rgba(255, 184, 42, 0.48),
            inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    }
}

@keyframes rb-card-selected-pop-v95 {
    0% {
        transform:
            translateY(calc(var(--fan-arc, 0px) - 20px))
            rotate(var(--fan-rotate, 0deg))
            scale(1.02);
    }
    62% {
        transform:
            translateY(calc(var(--fan-arc, 0px) - 38px))
            rotate(var(--fan-rotate, 0deg))
            scale(1.15);
    }
    100% {
        transform:
            translateY(calc(var(--fan-arc, 0px) - 32px))
            rotate(var(--fan-rotate, 0deg))
            scale(1.12);
    }
}

@keyframes rb-card-draw-v95 {
    0% {
        opacity: 0;
        transform:
            translateY(calc(var(--fan-arc, 0px) + 38px))
            rotate(var(--fan-rotate, 0deg))
            scale(0.9);
    }
    70% {
        opacity: 1;
        transform:
            translateY(calc(var(--fan-arc, 0px) - 8px))
            rotate(var(--fan-rotate, 0deg))
            scale(1.025);
    }
    100% {
        opacity: 1;
        transform:
            translateY(var(--fan-arc, 0px))
            rotate(var(--fan-rotate, 0deg))
            scale(1);
    }
}

@keyframes rb-card-breathe-v95 {
    0%, 100% { opacity: 0.82; }
    50% { opacity: 1; }
}

@keyframes rb-hero-hit {
    0%, 100% { transform: translateX(0) rotate(0deg); filter: brightness(1); }
    12% { transform: translateX(-7px) rotate(-1deg); filter: brightness(1.28) saturate(1.3); }
    25% { transform: translateX(8px) rotate(1deg); filter: brightness(1.08) saturate(1.16); }
    42% { transform: translateX(-5px) rotate(-0.7deg); filter: brightness(1.22) saturate(1.2); }
    62% { transform: translateX(4px) rotate(0.5deg); filter: brightness(1.04); }
}

@keyframes rb-hp-impact-v95 {
    0%, 100% { transform: scale(1); color: #fff5d6; }
    24% { transform: scale(1.22); color: #fff; text-shadow: 0 3px 0 #3a0808, 0 0 24px rgba(255, 66, 48, 0.78); }
    58% { transform: scale(0.92); color: #ffd3c7; }
}

@keyframes rb-active-turn-pulse-v95 {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-2px) scale(1.012); }
}

@keyframes rb-turn-banner-v95 {
    0% { opacity: 0; transform: translate(-50%, 24px) scale(0.86); }
    16% { opacity: 1; transform: translate(-50%, 0) scale(1.04); }
    72% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -16px) scale(0.98); }
}

@keyframes rb-action-popup-v95 {
    0% { opacity: 0; transform: translate(-50%, 12px) scale(0.92); }
    16% { opacity: 1; transform: translate(-50%, 0) scale(1.04); }
    68% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -16px) scale(0.98); }
}

@keyframes rb-screen-hit-v95 {
    0%, 100% {
        transform: translateX(calc(-50% + var(--rb-safe-offset-x))) scale(var(--rb-scale));
    }
    28% {
        transform: translateX(calc(-50% + var(--rb-safe-offset-x) - 4px)) scale(var(--rb-scale));
    }
    54% {
        transform: translateX(calc(-50% + var(--rb-safe-offset-x) + 3px)) scale(var(--rb-scale));
    }
    78% {
        transform: translateX(calc(-50% + var(--rb-safe-offset-x) - 2px)) scale(var(--rb-scale));
    }
}

@keyframes rb-mana-gain-v95 {
    0% { transform: scale(0.82); opacity: 0.64; }
    58% { transform: scale(1.22); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes rb-ambient-embers-v95 {
    0% { transform: translate3d(0, 28px, 0); opacity: 0; }
    18% { opacity: 0.42; }
    100% { transform: translate3d(0, -70px, 0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .rb-turn-banner.is-visible,
    .rb-action-popup.is-visible,
    .rb-hud-side.is-active-turn .rb-hero-portrait,
    .rb-hud-side.is-taking-damage .rb-hero-portrait,
    .rb-hud-side.is-taking-damage .rb-hud-health strong,
    .rb-game-board.is-screen-hit,
    .rb-hand .rb-mini-card,
    .rb-hand .rb-mini-card.is-selected,
    .rb-field-card .rb-card-frame-layer,
    .rb-hand .rb-mini-card .rb-card-frame-layer,
    .battlefield-embers::before,
    .battlefield-embers::after {
        animation: none !important;
    }
}

/* v97 MOBILE_WEB_FIX: mobile web repair. The Fates rewrite hides the desktop chrome, but the
   phone web layout still depends on a compact global nav and touch dock. */
@media (max-width: 760px) {
    body.rb-game-page.rb-mobile-native .rb-global-nav {
        display: grid !important;
    }

    .rb-mobile-native .rb-game-viewport {
        overflow-x: hidden !important;
    }

    .rb-mobile-native .rb-game-board {
        width: min(100%, 390px) !important;
        max-width: calc(100vw - 10px) !important;
        overflow: hidden !important;
    }

    .rb-mobile-native .rb-mobile-action-bar {
        --rb-mobile-panel-line: rgba(226, 180, 88, 0.38);
        --rb-mobile-panel-bg: linear-gradient(180deg, rgba(18, 15, 12, 0.97), rgba(5, 6, 8, 0.98));
        grid-template-rows: 130px 54px !important;
        gap: 5px !important;
        border-color: var(--rb-mobile-panel-line) !important;
        background: var(--rb-mobile-panel-bg) !important;
    }

    .rb-mobile-native .rb-player-hand {
        height: 130px !important;
        display: grid !important;
        grid-template-rows: 21px minmax(0, 1fr);
        gap: 3px;
        overflow: visible !important;
    }

    .rb-mobile-native .rb-action-bar-meta {
        min-height: 21px !important;
        height: 21px !important;
        align-self: start;
        padding: 0 2px !important;
        line-height: 1;
    }

    .rb-mobile-native .rb-hand {
        grid-auto-columns: clamp(96px, 27vw, 112px) !important;
        height: 104px !important;
        min-height: 104px;
        padding: 2px 1px 4px !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        scrollbar-width: none;
    }

    .rb-mobile-native .rb-hand::-webkit-scrollbar,
    .rb-mobile-native .rb-result-panel > div::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .rb-mobile-native .rb-hand .rb-mini-card {
        height: 100px !important;
        min-height: 100px !important;
        grid-template-rows: 48px 1fr !important;
    }

    .rb-mobile-native .rb-hand .rb-mini-card:hover:not(:disabled):not(.is-locked):not(.is-selected),
    .rb-mobile-native .rb-hand .rb-mini-card:focus-visible:not(:disabled):not(.is-locked):not(.is-selected) {
        transform: translateY(-8px) scale(1.05) !important;
    }

    .rb-mobile-native .rb-hand .rb-mini-card.is-selected {
        transform: translateY(-12px) scale(1.08) !important;
    }

    .rb-mobile-native .rb-actions-row {
        height: 54px !important;
        align-items: start;
    }

    .rb-mobile-native #next-turn-button.rb-button-secondary,
    .rb-mobile-native #play-button.rb-button-primary,
    .rb-mobile-native .rb-actions-row .rb-cta,
    .rb-mobile-native .rb-actions-row .rb-secondary {
        height: 48px !important;
        min-height: 48px !important;
        padding: 5px 7px !important;
    }

    .rb-mobile-native .rb-hud-side.is-active-turn {
        border-color: rgba(255, 220, 126, 0.62) !important;
        box-shadow:
            inset 0 0 0 1px rgba(255, 244, 196, 0.12),
            0 0 18px rgba(255, 202, 86, 0.24) !important;
    }

    .rb-mobile-native .rb-field-card {
        box-shadow:
            0 18px 28px rgba(0, 0, 0, 0.62),
            0 0 0 1px rgba(255, 228, 156, 0.24),
            inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    }

    .rb-mobile-native .rb-field-slots.has-active-cards .rb-field-slot-empty {
        opacity: 0.42;
    }

    .rb-mobile-native .rb-result-panel {
        max-height: 92px !important;
        grid-template-columns: minmax(0, 1fr) 70px !important;
        align-items: stretch;
        border-color: rgba(226, 180, 88, 0.36) !important;
        background: linear-gradient(180deg, rgba(26, 19, 13, 0.94), rgba(8, 7, 8, 0.96)) !important;
    }

    .rb-mobile-native .rb-result-panel > div {
        max-height: 76px !important;
        overflow-y: auto !important;
        scrollbar-width: none;
    }
}

@media (max-width: 380px) {
    .rb-mobile-native .rb-mobile-action-bar {
        grid-template-rows: 118px 52px !important;
    }

    .rb-mobile-native .rb-player-hand {
        height: 118px !important;
    }

    .rb-mobile-native .rb-hand {
        grid-auto-columns: clamp(88px, 26vw, 100px) !important;
        height: 92px !important;
        min-height: 92px;
    }

    .rb-mobile-native .rb-hand .rb-mini-card {
        height: 90px !important;
        min-height: 90px !important;
        grid-template-rows: 42px 1fr !important;
    }
}

.rb-deck-line-remove {
    width: 22px;
    height: 22px;
    border: 1px solid rgba(196, 48, 48, 0.62);
    border-radius: 3px;
    background: transparent;
    color: var(--rb-red);
    cursor: pointer;
    line-height: 1;
}

.rb-deck-line-remove:hover {
    background: rgba(196, 48, 48, 0.32);
}

.rb-deck-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 14px;
}

.rb-deck-result {
    margin-top: 12px;
    font-size: var(--fs-xs);
    text-align: center;
    min-height: 16px;
}

.rb-deck-list-saved {
    margin-top: 22px;
}

.rb-deck-list-saved h3 {
    font-family: var(--rb-font-display);
    color: var(--rb-gold);
}

.rb-deck-saved-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.rb-deck-saved-card {
    padding: 12px;
    border: 1.5px solid rgba(196, 160, 80, 0.42);
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(46, 33, 22, 0.62), rgba(16, 10, 5, 0.72));
}

.rb-deck-saved-card.is-active {
    border-color: var(--rb-gold);
    box-shadow: 0 0 16px rgba(196, 160, 80, 0.32);
}

.rb-deck-badge-active {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--rb-gold);
    color: #1a0f06;
    font-size: var(--fs-2xs);
    font-weight: 900;
}

.rb-deck-saved-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.rb-deck-saved-actions .rb-secondary {
    flex: 1 1 auto;
    padding: 6px 8px;
    font-size: var(--fs-xs);
}

.rb-deck-delete-btn {
    border-color: rgba(196, 48, 48, 0.42) !important;
    color: var(--rb-red) !important;
}

/* === v0.0/v0: desktop stability and first visual polish === */
@media (min-width: 761px) {
    body.rb-game-page .rb-global-nav {
        display: grid !important;
        z-index: 220;
    }

    body.rb-game-page .rb-game-board {
        top: calc(var(--rb-safe-top) + var(--rb-nav-clearance)) !important;
    }
}

.rb-field-slot-empty.is-locked > span {
    position: relative;
    z-index: 2;
    display: grid !important;
    width: 100%;
    height: 100%;
    min-height: 100%;
    place-items: center;
    padding: 8px;
    color: #f9e8bd;
    font-family: var(--rb-font-display);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.08;
    text-align: center;
    text-transform: uppercase;
    white-space: normal;
    text-shadow: 0 2px 0 #000, 0 0 12px rgba(255, 210, 94, 0.34);
}

.rb-field-slot-empty.is-locked {
    cursor: not-allowed;
}

.rb-hand .rb-mini-card .rb-card-titlebar .rb-card-nameplate {
    display: -webkit-box !important;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 10px !important;
    line-height: 1.05;
    text-overflow: clip;
    white-space: normal !important;
}

@media (min-width: 1180px) and (min-height: 680px) {
    .rb-result-panel {
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        top: auto !important;
        bottom: clamp(92px, 13vh, 132px) !important;
        z-index: 76 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        width: min(460px, 38vw) !important;
        height: auto !important;
        min-height: 92px;
        max-height: 150px;
        padding: 12px 14px !important;
        transform: translateX(-50%) !important;
        pointer-events: auto;
    }

    .rb-result-panel > div:first-child {
        display: grid !important;
        gap: 3px;
        align-content: center;
        min-width: 0;
    }

    .rb-result-panel #result-title {
        margin: 2px 0;
        font-size: 16px !important;
    }

    .rb-result-panel #result-copy {
        font-size: 12px !important;
        line-height: 1.2;
        -webkit-line-clamp: 2;
    }

    .rb-result-panel .rb-result-actions {
        display: grid !important;
        gap: 8px;
        align-content: center;
        min-width: 116px;
    }

    .rb-result-panel .rb-secondary,
    .rb-result-panel .rb-cta {
        width: 116px !important;
        min-width: 116px !important;
        min-height: 42px !important;
        padding: 0 10px !important;
        font-size: 11px !important;
        line-height: 1 !important;
        white-space: normal;
    }

    .rb-result-panel .rb-analyst-toggle,
    .rb-result-panel .rb-analyst-mode {
        display: none !important;
    }

    .rb-result-panel.is-idle {
        left: calc(50% + 300px) !important;
        bottom: clamp(236px, 35vh, 280px) !important;
        display: grid !important;
        grid-template-columns: 1fr;
        width: 126px !important;
        min-height: 42px;
        max-height: 48px;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .rb-result-panel.is-idle > div:first-child {
        display: none !important;
    }

    .rb-result-panel.is-idle .rb-result-actions {
        min-width: 0;
    }

    .rb-field-slots {
        grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
        gap: clamp(18px, 2.4vw, 32px) !important;
    }

    .rb-field-card,
    .rb-hand .rb-mini-card {
        width: 150px !important;
        height: 214px !important;
        min-width: 150px !important;
    }

    .rb-hand .rb-mini-card {
        flex-basis: 150px !important;
    }

    .rb-hand .rb-mini-card + .rb-mini-card {
        margin-left: -20px !important;
    }

    .rb-field-slot-empty {
        width: 150px !important;
        max-width: 150px !important;
        min-width: 150px !important;
    }

    .rb-actions-row > div:nth-child(2) {
        grid-area: turn;
        justify-self: center;
        align-self: end;
        width: auto !important;
        margin: 0 !important;
    }

    #next-turn-button {
        width: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;
        height: 56px !important;
        min-height: 56px !important;
        padding: 0 18px !important;
        border-radius: 8px !important;
        border-color: rgba(255, 226, 134, 0.78) !important;
        background:
            linear-gradient(180deg, rgba(183, 57, 45, 0.98), rgba(108, 24, 18, 0.98) 64%, rgba(43, 8, 7, 0.98)) !important;
        color: #fff4d0 !important;
        font-size: 13px !important;
        box-shadow:
            inset 0 0 0 2px rgba(0, 0, 0, 0.36),
            inset 0 14px 24px rgba(255, 255, 255, 0.08),
            0 18px 34px rgba(0, 0, 0, 0.54),
            0 0 28px rgba(255, 198, 91, 0.32) !important;
    }

    #next-turn-button:hover:not(:disabled),
    #next-turn-button:focus-visible:not(:disabled) {
        background:
            linear-gradient(180deg, rgba(207, 72, 52, 0.98), rgba(128, 30, 22, 0.98) 64%, rgba(50, 10, 8, 0.98)) !important;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .rb-hud-side.is-taking-damage .rb-hero-portrait {
        animation: rb-hero-hit 520ms cubic-bezier(0.18, 0.89, 0.32, 1.08) 2 both !important;
    }
}

.rb-guest-cta-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 230px);
    align-items: center;
    gap: 22px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(244, 173, 38, 0.13), transparent 42%),
        linear-gradient(315deg, rgba(88, 214, 255, 0.1), transparent 38%),
        rgba(8, 10, 13, 0.92);
}

.rb-guest-copy {
    min-width: 0;
}

.rb-guest-copy > span {
    color: var(--rb-gold);
    font-size: var(--fs-xs);
    font-weight: 900;
    text-transform: uppercase;
}

.rb-guest-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.rb-product-panel .rb-guest-actions .rb-secondary {
    margin-top: 0;
}

.rb-guest-visual {
    position: relative;
    min-height: 148px;
    display: grid;
    place-items: center;
}

.rb-guest-visual > span {
    width: 112px;
    height: 126px;
    border: 2px solid rgba(244, 173, 38, 0.7);
    clip-path: polygon(50% 0, 88% 16%, 82% 70%, 50% 100%, 18% 70%, 12% 16%);
    background:
        linear-gradient(180deg, rgba(244, 173, 38, 0.22), rgba(88, 214, 255, 0.12)),
        rgba(0, 0, 0, 0.32);
    box-shadow:
        inset 0 0 0 7px rgba(0, 0, 0, 0.28),
        0 20px 34px rgba(0, 0, 0, 0.34);
}

.rb-guest-visual > i {
    position: absolute;
    width: 112px;
    height: 10px;
    border: 1px solid rgba(255, 232, 166, 0.62);
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255, 232, 166, 0.86), transparent);
    transform: rotate(-38deg);
}

.rb-guest-visual > b {
    position: absolute;
    width: 24px;
    height: 76px;
    border: 1px solid rgba(88, 214, 255, 0.44);
    border-radius: 999px 999px 6px 6px;
    background: linear-gradient(180deg, rgba(88, 214, 255, 0.34), rgba(2, 7, 10, 0.68));
    transform: translateY(12px) rotate(-38deg);
}

@media (max-width: 700px) {
    .rb-guest-cta-card {
        grid-template-columns: 1fr;
    }

    .rb-guest-visual {
        order: -1;
        min-height: 118px;
    }
}

/* ============================================================
   AAA pass (v99): sickness visível, mulligan e correções mobile
   ============================================================ */

/* Monstro recém-invocado sem Investida: aguardando o próximo turno. */
.rb-field-card.is-summoning-sick {
    filter: saturate(0.55) brightness(0.82);
}

.rb-field-card.is-summoning-sick::after {
    content: "Zzz";
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 6;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--rb-gold, #f4ad26);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

.rb-mulligan-button {
    margin-top: 6px;
}

/* Mobile: título do hero de produto estourava a viewport (ex.: onboarding
   "Introdução/Tutorial Rebirth" abria 80px de overflow horizontal). */
@media (max-width: 760px) {
    .rb-product-hero h1 {
        font-size: clamp(28px, 9vw, 42px);
        line-height: 1.02;
        overflow-wrap: anywhere;
    }

    .rb-product-hero,
    .rb-product-page {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Mão no mobile: garante que a primeira/última carta do leque não fique
       cortada na borda e permite rolagem horizontal natural. */
    .rb-mobile-native .rb-hand {
        overflow-x: auto;
        overflow-y: visible;
        padding-left: 14px;
        padding-right: 14px;
        scrollbar-width: none;
    }

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

    /* Nav global mais compacta: três faixas comiam ~20% da tela do duelo. */
    [data-rebirth-global-nav] {
        row-gap: 4px;
    }

    [data-rebirth-global-nav] a,
    [data-rebirth-global-nav] button {
        padding-top: 4px;
        padding-bottom: 4px;
    }
}

/* O display das classes de botão não pode vencer o atributo hidden. */
.rb-mulligan-button[hidden] {
    display: none !important;
}

/* Mobile: o mulligan não disputa o cluster inferior direito (colidia com o
   "Nova partida"); vira chip flutuante no topo durante o turno 1. */
@media (max-width: 760px) {
    .rb-mobile-native .rb-mulligan-button {
        position: fixed;
        top: calc(var(--rb-mobile-nav-height, 96px) + 8px);
        left: 10px;
        z-index: 70;
        width: auto;
        min-width: 0;
        padding: 7px 12px;
        font-size: 12px;
    }
}

/* ==========================================================================
   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: 760px) {
    .rb-mobile-native .rb-mulligan-button {
        display: none !important;
    }

    .rb-mulligan-cards .rb-mini-card {
        width: 104px;
        height: 96px;
    }

    .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;
    }

    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: 760px) {
    /* 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 {
    font-size: var(--fs-2xs);
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- 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;
    color: var(--rb-muted);
    font-size: var(--fs-3xs);
    letter-spacing: 0.14em;
    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 {
    opacity: 0.25;
}

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

@media (max-width: 760px) {
    .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: 760px) {
    .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: 10px;
        justify-content: center;
        position: absolute !important;
        top: -28px;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
        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;
}

/* O botão Cemitério não participa da pilha calibrada de comando do desktop
   (os translateY fixos colidiam play/encerrar) — ancora logo abaixo dela. */
@media (min-width: 1180px) {
    body.rb-game-page #graveyard-button {
        position: absolute;
        left: 50%;
        bottom: -54px;
        transform: translateX(-50%);
        width: max-content;
        z-index: 24;
    }
}

/* Os dois grupos de comando NÃO se cruzam mais (eram translateY fixos com
   ~33px de sobreposição — o hit do clique dependia de ordem de pintura). */
@media (min-width: 1180px) {
    body.rb-game-page .rb-actions-row > div:nth-child(1) {
        transform: translateY(-124px) !important;
    }

    body.rb-game-page .rb-actions-row > div:nth-child(2) {
        transform: translateY(2px) !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;
    }
}