/* bam.li buttons — ARENA look (Gray, Oct 2026: Apex / CoD menus; buy = dark).
   ONE file for every button on the site, loaded on every page by
   partials/fonts. The slant lives on ::before so labels and icons stay
   upright. A variant only sets the four custom properties.
   Legacy class names (.acct .btn, the sign-in card's .btn, .btn-primary,
   .btn-secondary) are folded in here rather than restyled in four places. */
.game-btn, .acct .btn, .wrap > .card .btn, .btn-primary, .btn-secondary {
    --btn-bg: linear-gradient(180deg, #2c2c36, #1b1b22);
    --btn-edge: #ffd23d; --btn-shadow: #000; --btn-ink: #ffd84a;
    position: relative; isolation: isolate;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    text-align: center; text-decoration: none; cursor: pointer;
    font-family: var(--font-display); font-size: 19px; letter-spacing: 1.5px; text-transform: uppercase; line-height: 1;
    color: var(--btn-ink); background: none; border: 0; border-radius: 0; box-shadow: none;
    padding: 13px 22px; transition: transform .08s, filter .15s;
}
.game-btn { display: flex; width: 100%; }
.game-btn::before, .acct .btn::before, .wrap > .card .btn::before, .btn-primary::before, .btn-secondary::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: var(--btn-bg); transform: skewX(-10deg);
    box-shadow: inset 0 0 0 2px var(--btn-edge), 4px 4px 0 var(--btn-shadow);
    transition: box-shadow .08s;
}
:is(.game-btn, .acct .btn, .wrap > .card .btn, .btn-primary, .btn-secondary):hover:not(:disabled) { filter: brightness(1.12); }
:is(.game-btn, .acct .btn, .wrap > .card .btn, .btn-primary, .btn-secondary):active:not(:disabled) { transform: translate(2px, 3px); }
:is(.game-btn, .acct .btn, .wrap > .card .btn, .btn-primary, .btn-secondary):active:not(:disabled)::before { box-shadow: inset 0 0 0 2px var(--btn-edge), 1px 1px 0 var(--btn-shadow); }
:is(.game-btn, .acct .btn, .wrap > .card .btn):disabled { cursor: not-allowed; --btn-ink: var(--bam-text-muted); --btn-edge: #2e2e3a; --btn-bg: #18181f; }

/* red = attack / destructive, purple = ascend, yellow = rare loud call */
.game-btn.red, .btn-primary { --btn-bg: linear-gradient(180deg, #ff5a52, #cf2a2a); --btn-edge: transparent; --btn-shadow: #5e1010; --btn-ink: #fff; }
.game-btn.purple { --btn-bg: linear-gradient(180deg, #958dff, #6b62d6); --btn-edge: transparent; --btn-shadow: #2e2870; --btn-ink: #fff; }
.game-btn.yellow { --btn-bg: linear-gradient(180deg, #ffe066, #f5b800); --btn-edge: transparent; --btn-shadow: #6b5000; --btn-ink: #0a0a10; }
/* outline-only: secondary choices next to a primary */
.acct .btn-ghost, .game-btn.ghost-btn { --btn-bg: transparent; --btn-edge: #3a3a48; --btn-shadow: transparent; --btn-ink: var(--bam-text-muted); }
.acct .btn-ghost:hover, .game-btn.ghost-btn:hover { --btn-ink: var(--bam-text); }
.acct .btn-danger { --btn-bg: transparent; --btn-edge: var(--bam-red); --btn-shadow: transparent; --btn-ink: #ff6b6b; }