/* P2.5 — camada 1/5 do antigo rebirth.css (partição sequencial;
   a ordem de carga preserva a cascata por construção).
   Conteúdo: fundação pré-v55: tokens, layout, board, mão, HUD e produto base. */

/* v137 P1: Cinzel + Crimson Pro SELF-HOSTED (fontes variáveis woff2, subset
   latin — cobre pt-BR). Substitui o @import do Google Fonts, que era
   render-blocking e dependência externa (F22-B). OFL license. */
@font-face {
    font-family: "Cinzel";
    font-style: normal;
    font-weight: 500 900;
    font-display: swap;
    src: url("../fonts/cinzel-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Crimson Pro";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("../fonts/crimson-pro-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

: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: #d76a6a;
    --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);
}

/* Narração da última troca: frase legível (não caixa-alta, fonte maior),
   para o jogador entender O QUE aconteceu no combate. */
.rb-ability-events .rb-ability-story {
    max-width: 480px;
    padding: 9px 13px;
    border: 1px solid rgba(255, 220, 150, 0.38);
    border-left: 3px solid #f4ae35;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(42, 31, 16, 0.94), rgba(20, 14, 8, 0.96));
    color: #f6ecd2;
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0.01em;
    clip-path: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.42);
    animation: rb-story-pop 220ms ease-out;
}

@keyframes rb-story-pop {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.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;
}

/* v98 IDENTIDADE: moldura de carta sombria cinematográfica (Master Duel/Diablo).
   Base escura com filete dourado + bisel, arte emoldurada com vinheta, nome em
   serifa épica gravada, habilidade em fita com filete e statline em ouro. */
.rb-product-card {
    position: relative;
    overflow: hidden;
    min-width: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, #17130c 0%, #0c0a07 58%, #070503 100%);
    border: 1px solid rgba(196, 160, 80, 0.30);
    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 226, 160, 0.10),
        inset 0 0 0 1px rgba(0, 0, 0, 0.55);
    transition: transform 160ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.rb-product-card:hover {
    transform: translateY(-3px);
    border-color: rgba(222, 186, 108, 0.58);
    box-shadow:
        0 16px 36px rgba(0, 0, 0, 0.62),
        0 0 24px rgba(196, 160, 80, 0.20),
        inset 0 1px 0 rgba(255, 226, 160, 0.16);
}

.rb-product-card img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    background:
        radial-gradient(circle at 50% 42%, rgba(64, 46, 22, 0.55), rgba(0, 0, 0, 0) 64%),
        #07090c;
    border-bottom: 1px solid rgba(196, 160, 80, 0.28);
    box-shadow: inset 0 -42px 52px rgba(0, 0, 0, 0.62);
}

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

.rb-product-card span {
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 9px;
    border: 1px solid rgba(196, 160, 80, 0.38);
    border-radius: 999px;
    background: rgba(20, 14, 8, 0.82);
    color: #e8d4a4;
    font-size: var(--fs-3xs);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.rb-product-card h2 {
    margin: 2px 0 0;
    font-family: var(--rb-font-epic);
    font-size: var(--fs-md);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff3d2;
    text-transform: uppercase;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.82);
}

.rb-product-card p {
    margin: 5px 0 0;
    color: rgba(222, 212, 190, 0.60);
    font-size: var(--fs-3xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.rb-product-card small {
    display: block;
    margin-top: 9px;
    padding: 8px 10px;
    border-left: 2px solid rgba(196, 160, 80, 0.52);
    background: rgba(0, 0, 0, 0.34);
    color: rgba(232, 224, 204, 0.82);
    font-size: var(--fs-2xs);
    line-height: 1.4;
}

.rb-product-card strong {
    display: block;
    margin-top: 10px;
    color: var(--rb-gold);
    font-family: var(--rb-font-epic);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

/* v98 raridade: gema facetada no canto da arte + pílula de posse tingida pela
   raridade. Cores sombrias: comum bronze, incomum teal-prata, raro azul,
   lendária ouro/brasa (estas últimas prontas para conteúdo futuro). */
.rb-product-card.is-rarity-common { --rb-rarity: #a78f66; --rb-rarity-soft: rgba(167, 143, 102, 0.55); }
.rb-product-card.is-rarity-uncommon { --rb-rarity: #5cc0ab; --rb-rarity-soft: rgba(92, 192, 171, 0.60); }
.rb-product-card.is-rarity-rare { --rb-rarity: #5b91da; --rb-rarity-soft: rgba(91, 145, 218, 0.60); }
.rb-product-card.is-rarity-legendary { --rb-rarity: #f4ad26; --rb-rarity-soft: rgba(244, 173, 38, 0.66); }

.rb-product-card[class*="is-rarity-"]::after {
    content: "";
    position: absolute;
    top: 9px;
    right: 9px;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    border-radius: 2px;
    background: var(--rb-rarity, #c4a050);
    box-shadow:
        0 0 9px var(--rb-rarity-soft, rgba(196, 160, 80, 0.5)),
        inset 0 0 0 1px rgba(0, 0, 0, 0.5),
        inset 1px 1px 2px rgba(255, 255, 255, 0.55);
    z-index: 3;
}

.rb-product-card[class*="is-rarity-"] span {
    border-color: var(--rb-rarity-soft, rgba(196, 160, 80, 0.38));
    color: var(--rb-rarity, #e8d4a4);
}

.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: 1179px) {
    .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);
}

/* v98 raridade na arena: comum ganha anel bronze sutil (antes era neutro),
   para a raridade ler no board, não só no incomum dourado. */
.rb-tcg-card.is-rarity-common {
    --rarity-ring: linear-gradient(135deg, rgba(178, 152, 106, 0.5) 0%, rgba(120, 100, 70, 0.14) 46%, rgba(0, 0, 0, 0.3) 100%);
}

.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 {
    /* audit 30/06: nome da carta cortado com "..." (ex.: "BLAZEWING A...")
       em qualquer densidade — segue o mesmo padrão já usado em
       .rb-card-textbox strong (F4): quebra em 2 linhas em vez de truncar. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    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.1;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.88);
    text-transform: uppercase;
    word-break: break-word;
}

.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;
    }
}