/* =========================================================
   FIGHTDLE — MODE BUTTONS
   Homepage mode links and the "Next Mode" card at the end of a game.

   Built to match the FIGHTDLE-* emblems rather than sit beside them:
   a thick white outline echoing their heavy line work, a pill radius
   echoing their circular reticle, and a height set by the emblem
   itself so the icon fills the button edge to edge.

   Monochrome throughout — the emblem is what tells the modes apart.
   ========================================================= */

.mode-btn {
    --emblem: clamp(58px, 16vw, 68px);

    /* Three columns: emblem, label, then an empty column the same width as
       the emblem. That balance is what centres the label on the button
       itself rather than in the space the emblem leaves over. */
    display: grid;
    grid-template-columns: var(--emblem) 1fr var(--emblem);
    align-items: center;
    /* Narrower than the column it sits in, so the pills read as a stack of
       cards rather than a full-bleed block. The percentage matters as much
       as the cap — on a phone the cap never binds, so `100%` here would
       leave them edge-to-edge no matter what the cap said. */
    width: min(440px, 92%);
    /* no vertical padding — the emblem runs the full height of the card */
    padding: 0 4px;
    text-decoration: none;
    background: rgba(18, 18, 18, .82);
    border: 3px solid rgba(255, 255, 255, .92);
    /* fully rounded, matching the circular emblems */
    border-radius: 999px;
    transition: transform var(--speed) var(--ease),
                border-color var(--speed) var(--ease),
                background-color var(--speed) var(--ease);
}

@media (hover: hover) {
    .mode-btn:hover {
        transform: translateY(-2px);
        border-color: var(--gold);
        background: rgba(28, 28, 28, .9);
    }
    .mode-btn:hover .mode-btn__title { color: var(--gold); }
}

.mode-btn:active { transform: translateY(0) scale(.99); }

/* --- emblem: square, and it is what sets the card height --- */
.mode-btn__emblem {
    display: block;
    width: var(--emblem);
    height: var(--emblem);
}

/* the balancing column */
.mode-btn::after { content: ''; }

.mode-btn__emblem img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* --- label: centred in the space the emblem leaves --- */
.mode-btn__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
}

.mode-btn__title {
    font-family: var(--font-display);
    font-size: clamp(17px, 4.6vw, 25px);
    letter-spacing: .05em;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--ink);
    transition: color var(--speed) var(--ease);
}

.mode-btn__sub {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(10px, 2.7vw, 12px);
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.15;
    color: rgba(255, 255, 255, .55);
}

/* --- stacked list (homepage) --- */
.mode-btn-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
}

/* --- single button inside a victory card --- */
.victory-next-button .mode-btn {
    --emblem: 52px;
    max-width: 300px;
    border-width: 2px;
    /* Every mode's stylesheet centres this wrapper with `text-align: center`,
       which centred the <img> banner that used to live here. .mode-btn is a
       grid — a block-level box — so text-align cannot move it and it sat
       flush left. Auto side margins are what actually centre it. */
    margin-inline: auto;
}

/* The heading that introduces the pill. Lives here rather than in victory.css
   so a page can adopt the button without inheriting the whole victory panel —
   Connections styles its own endgame card and must not be overwritten by it. */
.victory-card .next-mode-label,
.next-mode-label {
    font-family: var(--font-display);
    font-size: clamp(18px, 5vw, 24px);
    letter-spacing: .04em;
    color: var(--ink);
    margin: 14px 0 8px;
    text-shadow: none;
}