@charset "utf-8";
/* ------------------------------------------------------------
   FPG buttons — colour, type and sizes. Structure and rows are core's (base.css).
   Plain class selectors, so a variant always wins on load order.
   ⚠ .btn.btn-hover carries the same colours as :hover — core's main.js adds it to form buttons.
   2.1.01 (12 November 2026): the design's buttons — Rubik 700, dark text on yellow, a 2px border
   on every button (so a solid one and an outline one side by side are the same height), the
   .btn-lg and .btn-xl sizes, and .btn-game / .btn-game-outline in a game's colour (--game-dark,
   printed on the card by SiteGames::styleVars()). The 2.0.02 sheet is "buttons - v1 (pre-2.1.01).css".
------------------------------------------------------------ */
.btn {
    background:var(--fpg-amber);
    border-color:var(--fpg-amber);
    border-radius:999px;
    border-width:2px;
    color:var(--fpg-ink);
    font-family:'Rubik', Helvetica, Arial, sans-serif;
    font-weight:700;
}
.btn:hover,
.btn.btn-hover {
    background:var(--fpg-amber-light);
    border-color:var(--fpg-amber-light);
    color:var(--fpg-ink);
}

.btn-alt {
    background:transparent;
    border-color:var(--fpg-purple);
    color:var(--fpg-purple);
}
.btn-alt:hover,
.btn-alt.btn-hover {
    background:var(--fpg-purple);
    border-color:var(--fpg-purple);
    color:#FFF;
}

.btn-outline-light {
    background:transparent;
    border-color:#FFF;
    color:#FFF;
}
.btn-outline-light:hover,
.btn-outline-light.btn-hover {
    background:#FFF;
    border-color:#FFF;
    color:var(--fpg-purple);
}

/* 2.1.01 — in a game's colour. Outside a game's wrapper they fall back to the brand purples. */
.btn-game {
    background:var(--game-dark, var(--fpg-purple-mid));
    border-color:var(--game-dark, var(--fpg-purple-mid));
    color:#FFF;
}
.btn-game:hover,
.btn-game.btn-hover {
    background:var(--game-dark, var(--fpg-purple-mid));
    border-color:var(--game-dark, var(--fpg-purple-mid));
    box-shadow:inset 0 0 0 999px rgba(0, 0, 0, 0.15);
    color:#FFF;
}

.btn-game-outline {
    background:transparent;
    border-color:var(--game-dark, var(--fpg-purple));
    color:var(--game-dark, var(--fpg-purple));
}
.btn-game-outline:hover,
.btn-game-outline.btn-hover {
    background:var(--game-dark, var(--fpg-purple));
    border-color:var(--game-dark, var(--fpg-purple));
    color:#FFF;
}

/* Sizes. Core's .btn is 1em text with 1em of padding top and bottom at line-height 100%, so with
   the 2px border a plain .btn is about 52px tall. */
.btn-sm { font-size:0.9375em; padding:0.85em 1.6em; }                   /* about 44px */
.btn-lg { font-size:1.0625em; padding:0.9em 1.9em; }                    /* about 52px */
.btn-xl { font-size:1.1875em; font-weight:800; padding:0.95em 2.1em; }  /* about 60px */