/* ── Scale /play game page ──────────────────────────────────── */

/* ── GAME ANIMATIONS ──────────────────────────────────────── */

/* Turn overlay — cinematic full-screen takeover. The title slams in from
   deep scale with a blur snap, a shockwave ring bursts behind it, gold rules
   stretch outward, and the supporting lines settle in staggered. */
.game-turn-overlay {
    position: fixed;
    inset: 0;
    z-index: 1800;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.game-turn-overlay.fade-out {
    animation: turnOverlayFadeOut 0.5s ease forwards;
}

.game-turn-overlay.fade-out .game-turn-inner {
    animation: turnInnerOut 0.5s ease-in forwards;
}

.game-turn-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.88) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: turnBackdropIn 0.45s ease-out both;
}

/* Ring bursting outward at the moment the title lands */
.game-turn-shockwave {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    border: 2px solid rgba(255, 191, 0, 0.7);
    box-shadow: 0 0 30px rgba(255, 191, 0, 0.5), inset 0 0 18px rgba(255, 191, 0, 0.4);
    animation: turnShockwave 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.34s both;
}

.game-turn-inner {
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.game-turn-eyebrow {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.72rem;
    letter-spacing: 5px;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    animation: turnLineDrop 0.55s ease-out 0.32s both;
}

.game-turn-rule {
    height: 1px;
    width: min(420px, 70vw);
    background: linear-gradient(90deg, transparent, rgba(255, 191, 0, 0.75), transparent);
    animation: turnRuleGrow 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.36s both;
}

.game-turn-title {
    font-family: 'DragonSlayer', serif;
    font-size: clamp(2.8rem, 9vw, 5.5rem);
    letter-spacing: 6px;
    line-height: 1;
    text-transform: uppercase;
    animation: turnTitleSlam 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.game-turn-title.is-mine {
    color: #ffbf00;
    text-shadow:
        0 0 30px rgba(255, 191, 0, 0.9),
        0 0 70px rgba(255, 191, 0, 0.5),
        0 0 120px rgba(255, 191, 0, 0.2);
}

.game-turn-title.is-theirs {
    color: rgba(240, 236, 230, 0.8);
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.2);
}

.game-turn-phase {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.78rem;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.32);
    text-transform: uppercase;
    animation: turnLineRise 0.55s ease-out 0.44s both;
}

/* ── Game-start "who goes first" takeover ────────────────────
   Reuses the phase-change takeover visual (scanline field, racing streak,
   bracket clamps, letters slamming in) but stretched across the whole board
   instead of just the loop zone. JS pins it to .board-outer's rect. */
.phase-takeover.phase-takeover-board {
    border-radius: 16px;
}

.phase-takeover.phase-takeover-board .pt-text {
    font-size: clamp(1.6rem, 6vh, 3.6rem);
    letter-spacing: 8px;
}

.phase-takeover.phase-takeover-board .pt-bracket {
    top: 16px;
    bottom: 16px;
    width: 22px;
}

.phase-takeover.phase-takeover-board .pt-icon {
    margin-right: 18px;
}

/* Centered fallback when the board rect wasn't available */
.phase-takeover.phase-takeover-board.phase-takeover-fallback {
    left: 50%;
    top: 50%;
    width: min(90vw, 900px);
    height: min(70vh, 540px);
    margin: 0;
    transform: translate(-50%, -50%);
}

/* Mobile turn callout — pinned to the loop zone like the phase banner
   (long names ran off the page in the board-wide variant). Slightly
   tighter type than the phase text so "SOMELONGNAME'S TURN" still fits. */
.phase-takeover.phase-takeover-turn-loop .pt-text {
    font-size: clamp(0.8rem, 2vh, 1.2rem);
    letter-spacing: 2px;
}

/* Phase takeover — the change-of-phase callout commandeers the loop zone.
   JS pins it to the loop's on-screen rect; --pt-color carries the theme
   (gold normally, ember red for DAMAGE). */
.phase-takeover {
    position: fixed;
    z-index: 1700;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 10px;
    --pt-color: 255, 191, 0;
    animation: pt-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.phase-takeover.pt-out {
    animation: pt-out 0.45s ease-in forwards;
}

.phase-takeover-damage { --pt-color: 255, 70, 15; }

/* Centered fallback when the loop zone isn't visible */
.phase-takeover-fallback {
    left: 50%;
    top: 50%;
    width: min(480px, 80vw);
    height: 86px;
    margin: -43px 0 0 max(-240px, -40vw);
}

/* Near-opaque dark field with drifting scanlines — must blot out whatever
   the loop zone shows behind it (skin art especially) so the text always
   reads. Theme color only tints, never lets the backdrop through. */
.pt-bg {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, rgba(var(--pt-color), 0.05) 0 2px, transparent 2px 6px),
        radial-gradient(ellipse at 50% 50%, rgba(16, 12, 4, 0.96), rgba(2, 2, 2, 0.98) 78%);
    border-top: 1px solid rgba(var(--pt-color), 0.55);
    border-bottom: 1px solid rgba(var(--pt-color), 0.55);
    box-shadow: inset 0 0 40px rgba(var(--pt-color), 0.2);
    animation: pt-scan 0.8s linear infinite;
}

@keyframes pt-scan {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 0 6px, 0 0; }
}

/* Light streak racing across the field */
.pt-streak {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 18%;
    background: linear-gradient(90deg, transparent, rgba(var(--pt-color), 0.45), rgba(255, 255, 255, 0.7), transparent);
    transform: skewX(-20deg);
    mix-blend-mode: screen;
    animation: pt-streak-race 0.6s cubic-bezier(0.3, 0, 0.2, 1) 0.08s both;
}

@keyframes pt-streak-race {
    from { left: -25%; }
    to   { left: 115%; }
}

/* Bracket clamps sealing the flanks */
.pt-bracket {
    position: absolute;
    top: 6px;
    bottom: 6px;
    width: 14px;
    border: 2px solid rgba(var(--pt-color), 0.9);
    filter: drop-shadow(0 0 6px rgba(var(--pt-color), 0.7));
}

.pt-bracket-l {
    left: 6px;
    border-right: none;
    animation: pt-bracket-in-l 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.pt-bracket-r {
    right: 6px;
    border-left: none;
    animation: pt-bracket-in-r 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

@keyframes pt-bracket-in-l {
    from { transform: translateX(-40px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

@keyframes pt-bracket-in-r {
    from { transform: translateX(40px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

.pt-text {
    position: relative;
    display: flex;
    align-items: baseline;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: clamp(0.95rem, 2.4vh, 1.4rem);
    letter-spacing: 4px;
    color: rgb(var(--pt-color));
    /* dark halo first so the glyphs stay crisp over any art, glow second */
    -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.9);
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.95),
        0 0 4px rgba(0, 0, 0, 0.9),
        0 0 14px rgba(var(--pt-color), 0.8),
        0 0 34px rgba(var(--pt-color), 0.4);
    text-transform: uppercase;
    white-space: nowrap;
}

.pt-icon {
    margin-right: 12px;
    display: inline-block;
    animation: pt-icon-spin 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}

@keyframes pt-icon-spin {
    from { transform: scale(0) rotate(-260deg); opacity: 0; }
    to   { transform: scale(1) rotate(0deg); opacity: 1; }
}

.pt-letter {
    display: inline-block;
    animation: pt-letter-slam 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
    /* per-letter stagger set inline by JS */
}

.pt-gap {
    display: inline-block;
    width: 0.6em;
}

@keyframes pt-letter-slam {
    0%   { opacity: 0; transform: translateY(-14px) scale(1.7); filter: blur(6px); }
    60%  { opacity: 1; filter: blur(0); }
    80%  { transform: translateY(1px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pt-in {
    from { clip-path: inset(50% 0 50% 0); opacity: 0.6; }
    to   { clip-path: inset(0 0 0 0); opacity: 1; }
}

@keyframes pt-out {
    from { clip-path: inset(0 0 0 0); opacity: 1; }
    to   { clip-path: inset(50% 0 50% 0); opacity: 0; }
}

/* Keyframes */
@keyframes turnBackdropIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes turnOverlayFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes turnInnerOut {
    to { transform: scale(1.06); opacity: 0; }
}

@keyframes turnShockwave {
    0%   { opacity: 0.9; transform: scale(1); }
    100% { opacity: 0;   transform: scale(60); }
}

@keyframes turnTitleSlam {
    0%   { opacity: 0; transform: scale(2.6); filter: blur(16px); }
    40%  { opacity: 1; }
    58%  { transform: scale(0.965); filter: blur(0); }
    78%  { transform: scale(1.02); }
    100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

@keyframes turnLineDrop {
    from { opacity: 0; transform: translateY(-18px); letter-spacing: 14px; }
    to   { opacity: 1; transform: translateY(0);     letter-spacing: 5px; }
}

@keyframes turnLineRise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes turnRuleGrow {
    from { transform: scaleX(0); opacity: 0; }
    to   { transform: scaleX(1); opacity: 1; }
}


/* ── BUTTONS ──────────────────────────────────────────────── */

.btn-gold {
    display: inline-block;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.78rem;
    letter-spacing: 2px;
    color: #0e0e0e;
    background: #ffbf00;
    border: none;
    border-radius: 6px;
    padding: 10px 24px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, box-shadow 0.2s;
}

.btn-gold:hover {
    background: #e6ac00;
    box-shadow: 0 0 16px rgba(255, 191, 0, 0.3);
}

.btn-gold:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-outline {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.72rem;
    letter-spacing: 2px;
    color: #ffbf00;
    background: transparent;
    border: 1px solid rgba(255, 191, 0, 0.3);
    border-radius: 6px;
    padding: 8px 20px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.btn-outline:hover {
    border-color: #ffbf00;
    background: rgba(255, 191, 0, 0.06);
}

.btn-compact {
    font-size: 0.6rem;
    padding: 6px 12px;
    letter-spacing: 1px;
    white-space: nowrap;
}

.btn-compact-active {
    border-color: #ffbf00;
    background: rgba(255, 191, 0, 0.1);
}

.bloom-give-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 6px;
}

/* A long card name gives way (wraps) so the ✕ always stays inside the panel */
.bloom-give-row .bloom-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.bloom-give-row .bloom-clear-x { flex-shrink: 0; }

.bloom-clear-x {
    font-size: 0.55rem;
    color: #ff5555;
    cursor: pointer;
    line-height: 1;
    border: 1px solid rgba(255, 60, 60, 0.3);
    border-radius: 4px;
    background: rgba(20, 8, 8, 0.85);
    padding: 2px 5px;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.bloom-clear-x:hover {
    color: #ff8888;
    border-color: rgba(255, 100, 100, 0.5);
    background: rgba(255, 60, 60, 0.08);
}

.btn-small {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.72rem;
    color: #ffbf00;
    background: rgba(255, 191, 0, 0.08);
    border: 1px solid rgba(255, 191, 0, 0.2);
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-small:hover {
    background: rgba(255, 191, 0, 0.16);
}

.btn-danger {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.72rem;
    letter-spacing: 2px;
    color: #ff4444;
    background: rgba(20, 8, 8, 0.7);
    border: 1px solid rgba(255, 68, 68, 0.3);
    border-radius: 6px;
    padding: 8px 20px;
    cursor: pointer;
    width: 100%;
    transition: background 0.2s, border-color 0.2s;
}

.btn-danger:hover {
    background: rgba(255, 68, 68, 0.15);
    border-color: #ff4444;
}

/* ── SCREEN CONTAINERS ────────────────────────────────────── */

.screen {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 8px 20px;
    box-sizing: border-box;
    height: calc(100vh - 210px);
    overflow: hidden;
}

/* ── MENU LAYOUT ──────────────────────────────────────────── */

.menu-layout {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
}

/* Breach art fixed behind the whole menu (z-index -1 so the header and footer
   still paint over it), darkened at the edges; the embers reuse .gate-embers */
.menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: #070404;
}

.menu-backdrop-art {
    position: absolute;
    inset: -4%;
    width: 108%;
    height: 108%;
    object-fit: cover;
    object-position: center 35%;
    animation: gateArtDrift 32s ease-in-out infinite alternate;
}

.menu-backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 70% at 50% 45%, rgba(4, 2, 2, 0.2) 0%, rgba(4, 2, 2, 0.6) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.05) 30%, rgba(0, 0, 0, 0.1) 70%, rgba(0, 0, 0, 0.85) 100%);
}

/* Smoked-glass panel: the breach art glows through, ember light pools at the
   top edge and a gold hairline catches it */
.menu-panel {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    background:
        radial-gradient(ellipse 90% 34% at 50% 0%, rgba(255, 120, 30, 0.12) 0%, rgba(255, 120, 30, 0) 100%),
        linear-gradient(180deg, rgba(16, 11, 9, 0.84) 0%, rgba(8, 6, 6, 0.9) 100%);
    border: 1px solid rgba(255, 191, 0, 0.16);
    border-radius: 18px;
    padding: 20px 22px;
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 220, 150, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-sizing: border-box;
    animation: menuPanelIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.menu-panel::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 14%;
    right: 14%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 191, 0, 0), rgba(255, 191, 0, 0.75), rgba(255, 74, 28, 0.75), rgba(255, 191, 0, 0));
    pointer-events: none;
}

.play-panel {
    flex-grow: 1.3;
}

.friends-panel {
    animation-delay: 0.1s;
}

@keyframes menuPanelIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

.menu-panel h2 {
    font-family: 'DragonSlayer', serif;
    color: #ffbf00;
    font-size: 1.1rem;
    letter-spacing: 3px;
    margin: 0 0 20px;
    text-align: center;
}

/* ── MENU LAYOUT — DESKTOP FIT ────────────────────────────────
   Two-column desktop only (tablet stacks, mobile scrolls): both panels
   stretch to the same height so the menu reads as one symmetric unit,
   and anything that outgrows a panel scrolls inside it instead of
   running off the page. */
@media only screen and (min-width: 1101px) and (hover: hover) {
    #menu-screen {
        min-height: 480px;
    }

    .menu-layout {
        height: 100%;
        align-items: stretch;
    }

    .menu-panel {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .player-info-header,
    .ban-banner {
        flex-shrink: 0;
    }

    /* Play home: buttons on top, missions pinned to the bottom edge so the
       panel is filled top-to-bottom; the mission list scrolls if space runs out. */
    #play-home {
        flex: 1 1 auto;
        min-height: 0;
    }

    /* Buttons fill the space between the banner and the missions row as one
       3-row grid (Ranked hero, mode cards, tile row); each row grows with the
       panel height, weighted so the mode art gets the most room. */
    #play-home .play-buttons {
        flex: 1 1 auto;
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(54px, 0.8fr) minmax(84px, 1.6fr) minmax(64px, 0.85fr);
    }

    #play-home .play-modes,
    #play-home .play-buttons-grid {
        min-height: 0;
    }

    /* On tall screens the rows grow; size containment lets the label and icons
       scale with their own box (cqh) instead of floating in an empty slab. Desktop
       only: size containment would collapse the natural-height mobile buttons. */
    #play-home .play-btn-hero,
    #play-home .play-buttons-grid .play-btn-tile {
        container-type: size;
    }

    /* cqh is a share of the content box (height minus padding) */
    #play-home .play-btn-hero span {
        font-size: clamp(1.05rem, 26cqh, 1.6rem);
    }

    #play-home .play-btn-hero i {
        font-size: clamp(1.3rem, 34cqh, 2.2rem);
    }

    #play-home .play-buttons-grid .play-btn-tile {
        height: 100%;
    }

    #play-home .play-buttons-grid .play-btn-tile span {
        font-size: clamp(0.74rem, 16cqh, 0.92rem);
    }

    #play-home .play-buttons-grid .play-btn-tile > i:first-child {
        width: clamp(30px, 42cqh, 50px);
        height: clamp(30px, 42cqh, 50px);
        border-radius: clamp(9px, 11cqh, 14px);
        font-size: clamp(0.8rem, 17cqh, 1.25rem);
    }

    #play-home .play-mode-art {
        max-height: 250px;
    }

    #play-home .play-btn-campaign .play-mode-art {
        max-height: 160px;
    }

    /* Missions keep their natural height — the button rows above shrink to
       make room, so the mission list never needs its own scrollbar. */
    #play-home .missions-panel {
        margin-top: auto;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
    }

    #play-home .missions-header {
        flex-shrink: 0;
    }

    /* Friends panel: the friends list and the conversation list size to content and
       shrink (lists scroll) so they never cover the equipped decks below; global chat and
       an open conversation fill the whole panel instead (the decks are hidden for them). */
    #menu-pane-friends,
    #menu-pane-messages {
        display: flex;
        flex-direction: column;
        flex: 0 1 auto;
        min-height: 0;
    }

    #menu-pane-global {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    #menu-pane-friends .soc-add {
        flex-shrink: 0;
    }

    .friends-panel.global-chat-open #menu-pane-messages {
        flex: 1 1 auto;
    }

    #menu-pane-friends .friends-list {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
    }

    /* Equipped decks: a real flex child (not an overlay) at the panel's bottom, so pane
       content never sits on top of it: the lists above shrink and scroll instead. One tile
       per equipped deck (a small fan of its most-used cards), or Build a Deck. */
    .friends-panel .panel-decks {
        display: flex;
        flex-direction: column;
        flex: 0 0 auto;
        gap: 8px;
        margin-top: auto; /* sits at the panel's bottom, where the logo was */
        padding-top: 12px;
        border-top: 1px solid rgba(255, 191, 0, 0.12);
    }

    .panel-decks-heading {
        font-family: 'HwyGothic', Arial, sans-serif;
        font-size: 0.62rem;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: rgba(240, 236, 230, 0.55);
    }

    .panel-decks-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .panel-deck {
        display: flex;
        align-items: center;
        gap: 14px;
        min-height: 72px;
        padding: 8px 12px 8px 8px;
        border-radius: 12px;
        border: 1px solid rgba(255, 191, 0, 0.18);
        background: linear-gradient(120deg, rgba(255, 191, 0, 0.08), rgba(255, 191, 0, 0.02));
        color: #f0ece6;
        text-align: left;
        text-decoration: none;
        transition: border-color 0.2s, background 0.2s, transform 0.2s;
    }

    .panel-deck:hover {
        border-color: rgba(255, 191, 0, 0.6);
        background: linear-gradient(120deg, rgba(255, 191, 0, 0.16), rgba(255, 191, 0, 0.04));
        transform: translateY(-1px);
        color: #f0ece6;
    }

    /* Up to three cards fanned from a shared bottom pivot; they spread on hover */
    .panel-deck-fan {
        position: relative;
        flex: 0 0 76px;
        height: 56px;
    }

    .panel-deck-fan img {
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 38px;
        height: 53px;
        margin-left: -19px;
        object-fit: cover;
        border-radius: 4px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
        transform-origin: 50% 100%;
        transform: translateX(calc((var(--i) - (var(--n) - 1) / 2) * 9px))
            rotate(calc((var(--i) - (var(--n) - 1) / 2) * 12deg));
        transition: transform 0.25s ease;
    }

    .panel-deck:hover .panel-deck-fan img {
        transform: translateX(calc((var(--i) - (var(--n) - 1) / 2) * 13px))
            rotate(calc((var(--i) - (var(--n) - 1) / 2) * 18deg)) translateY(-2px);
    }

    .panel-deck-text {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .panel-deck-name {
        font-family: 'DragonSlayer', serif;
        font-size: 1rem;
        letter-spacing: 1px;
        color: #ffbf00;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .panel-deck-type {
        font-family: 'HwyGothic', Arial, sans-serif;
        font-size: 0.6rem;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: rgba(240, 236, 230, 0.6);
    }

    .panel-deck-build {
        justify-content: center;
        min-height: 56px;
        border-style: dashed;
        font-family: 'HwyGothic', Arial, sans-serif;
        font-size: 0.7rem;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #ffbf00;
    }

    .panel-deck-build:hover { color: #ffbf00; }

    /* Global chat / an open conversation fills the panel bottom: no decks */
    .friends-panel.global-chat-open .panel-decks {
        display: none;
    }

    #dm-list-view,
    #dm-conversation-view {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    #dm-list-view .dm-list {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
    }

    /* .friends-panel prefix beats the base-selector height caps in the SOCIAL block */
    .friends-panel .soc-thread-wrap {
        flex: 1 1 auto;
        min-height: 0;
    }

    .friends-panel .soc-thread-wrap .soc-thread {
        position: absolute;
        inset: 0;
        max-height: none;
    }
}

/* ── PLAY VIEWS ──────────────────────────────────────────── */

.play-view {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.play-view-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 191, 0, 0.1);
}

.play-view-header h2 {
    margin: 0;
    flex: 1;
    text-align: left;
    font-size: 1rem;
}

.btn-back {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.85rem;
    color: rgba(255, 191, 0, 0.8);
    background: rgba(255, 191, 0, 0.06);
    border: 1px solid rgba(255, 191, 0, 0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.btn-back:hover {
    background: rgba(255, 191, 0, 0.14);
    border-color: rgba(255, 191, 0, 0.45);
    color: #ffbf00;
}

.btn-back-danger {
    color: rgba(255, 80, 80, 0.8);
    background: rgba(255, 80, 80, 0.06);
    border-color: rgba(255, 80, 80, 0.2);
}

.btn-back-danger:hover {
    background: rgba(255, 80, 80, 0.14);
    border-color: rgba(255, 80, 80, 0.45);
    color: #ff5050;
}

/* ── PLAY BUTTONS ─────────────────────────────────────────── */

/* Player banner: forged crest with the initial, name + level/treasure pills,
   then the four ratings as chips */
.player-info-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 191, 0, 0.1);
}

.player-hero-crest {
    position: relative;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    padding: 2px;
    background: conic-gradient(from 210deg, #ffd45e, #ff7a1c, #7a2a08, #ffbf00, #ffd45e);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 140, 30, 0.28);
    box-sizing: border-box;
}

.player-hero-crest-face {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 14px;
    font-family: 'DragonSlayer', serif;
    font-size: 1.7rem;
    line-height: 1;
    color: #ffbf00;
    background: radial-gradient(circle at 50% 30%, #2a1708 0%, #0d0806 75%);
    text-shadow: 0 0 14px rgba(255, 150, 30, 0.6);
}

/* Active avatar skin: covers the initial inside the gold ring */
.player-hero-avatar {
    position: absolute;
    inset: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border-radius: 14px;
    object-fit: cover;
}

/* Level coin: the gold-rimmed black disc tucked into the crest's right edge */
.player-hero-level-coin {
    position: absolute;
    z-index: 1;
    right: -9px;
    bottom: -7px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding-top: 1px;
    box-sizing: border-box;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.78rem;
    font-weight: bold;
    line-height: 1;
    color: #ffd45e;
    text-shadow: 0 0 6px rgba(255, 150, 30, 0.55);
    background: url('/img/blank_circle_icon.png') center / contain no-repeat;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.7));
    cursor: default;
}

.player-hero-level-coin.is-wide {
    font-size: 0.62rem;
}

.player-hero-level-coin:empty {
    display: none;
}

.player-hero-body {
    flex: 1 1 auto;
    min-width: 0;
}

.player-hero-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-bottom: 8px;
}

.player-hero-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.player-hero-treasure:empty {
    display: none;
}

/* Crest + treasure are links into /skins (Avatars tab / store) */
a.player-hero-crest {
    display: block;
    transition: box-shadow 0.18s, transform 0.18s;
}

a.player-hero-crest:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6), 0 0 26px rgba(255, 170, 40, 0.6);
}

/* Avatar equipped: the crest is the whole framed plate at its real 1.81:1 shape (the art has
   its own gold frame, so no ring behind it). The plate's right side is an empty info panel by
   design; the level coin sits centred in it, where text would be hard to read. */
a.player-hero-crest.has-avatar {
    width: auto;
    aspect-ratio: 500 / 276;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 12px rgba(255, 150, 30, 0.25));
}
a.player-hero-crest.has-avatar:hover {
    box-shadow: none;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 18px rgba(255, 170, 40, 0.55));
}
.player-hero-crest.has-avatar .player-hero-crest-face { display: none; }
.player-hero-crest.has-avatar .player-hero-avatar {
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
    object-fit: contain;
}
.player-hero-crest.has-avatar .player-hero-level-coin {
    right: calc(22% - 15px);
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
}

/* Two classes: Font Awesome loads last and would win display on a single class */
a.player-hero-crest .player-hero-crest-edit {
    display: block;
    position: absolute;
    z-index: 2;
    top: -6px;
    left: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #141414;
    border: 1px solid rgba(255, 191, 0, 0.6);
    color: #ffbf00;
    font-size: 9px;
    line-height: 18px;
    text-align: center;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.18s;
    pointer-events: none;
}

a.player-hero-crest:hover .player-hero-crest-edit,
a.player-hero-crest:focus-visible .player-hero-crest-edit {
    opacity: 1;
}

a.player-hero-treasure {
    color: #ffd966; /* the .gem-pill gold; a link would otherwise inherit the banner's dark text */
    transition: filter 0.18s;
}

a.player-hero-treasure:hover {
    filter: brightness(1.2);
}

.ban-banner {
    background: rgba(255, 60, 60, 0.15);
    border: 1px solid rgba(255, 60, 60, 0.4);
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 14px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.8rem;
    color: #ff4444;
    letter-spacing: 1.5px;
}

.ban-banner i {
    margin-right: 6px;
}

.play-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.player-info-name {
    min-width: 0;
    font-family: 'DragonSlayer', serif;
    font-size: 1.45rem;
    line-height: 1.1;
    letter-spacing: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #ffbf00;
    background: linear-gradient(180deg, #fff2c2 0%, #ffbf00 50%, #ff7a1c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8));
}

.player-info-ratings {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.player-info-rating {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 6px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.64rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(240, 236, 230, 0.55);
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 191, 0, 0.1);
}

.player-info-rating .rating-value {
    font-size: 0.74rem;
    color: #ffd45e;
    font-weight: bold;
}


.play-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.play-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 18px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.82rem;
    letter-spacing: 1.5px;
    color: #0e0e0e;
    background: #ffbf00;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
    text-align: left;
}

.play-btn i {
    font-size: 1rem;
    flex: 0 0 auto;
}

.play-btn span {
    flex: 1;
}

.play-btn:hover {
    background: #e6ac00;
    box-shadow: 0 4px 20px rgba(255, 191, 0, 0.3);
    transform: translateY(-1px);
}

.play-btn:active {
    transform: translateY(0);
}

.play-btn-tall {
    padding: 20px 18px;
    font-size: 0.88rem;
}

/* ── Play home: Ranked hero, mode cards, glass tiles ──────── */
/* Three tiers so the eye lands in order: the molten Ranked hero, the two art
   cards for the big modes, then the quieter glass tiles. */

/* Ranked: molten gold with a slowly turning ember rim and a glint sweeping
   across every few seconds (the sign-in gate's primary-button language) */
.play-btn.play-btn-hero {
    justify-content: center;
    gap: 14px;
    padding: 20px 18px;
    font-size: 1.05rem;
    letter-spacing: 3px;
    text-align: center;
    text-transform: uppercase;
    color: #1a0d04;
    background: linear-gradient(180deg, #ffd45e 0%, #ffbf00 45%, #ff9a1c 100%);
    box-shadow: 0 8px 26px rgba(255, 140, 20, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 0 rgba(120, 40, 0, 0.35);
    isolation: isolate;
}

.play-btn-hero span {
    flex: 0 0 auto;
}

.play-btn-hero i {
    font-size: 1.3rem;
}

.play-btn-ranked i {
    animation: rankedReticle 6s linear infinite;
}

@keyframes rankedReticle {
    to { transform: rotate(360deg); }
}

/* Mode cards: dark ember cards with their art bleeding in from the right */
.play-modes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.play-btn.play-btn-mode {
    position: relative;
    align-items: stretch;
    min-height: 92px;
    padding: 0;
    color: #f0ece6;
    text-align: left;
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px rgba(255, 191, 0, 0.22), 0 10px 26px rgba(0, 0, 0, 0.45);
    isolation: isolate;
}

.play-btn.play-btn-arena {
    background:
        radial-gradient(ellipse 70% 120% at 100% 50%, rgba(255, 110, 20, 0.38) 0%, rgba(255, 110, 20, 0) 70%),
        linear-gradient(120deg, #1a0e07 0%, #2a1206 60%, #3b1606 100%);
}

.play-btn.play-btn-campaign {
    background:
        radial-gradient(ellipse 70% 120% at 100% 50%, rgba(255, 191, 0, 0.26) 0%, rgba(255, 191, 0, 0) 70%),
        linear-gradient(120deg, #120c08 0%, #1f160a 60%, #2c1f0b 100%);
}

.play-mode-art {
    position: absolute;
    z-index: -2;
    top: 50%;
    right: -4%;
    height: 128%;
    max-height: 170px;
    width: auto;
    transform: translateY(-50%) rotate(-8deg);
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 18px rgba(255, 120, 30, 0.35));
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1.2), filter 0.45s ease;
    pointer-events: none;
}

.play-btn-campaign .play-mode-art {
    right: -7%;
    height: 96%;
    max-height: 132px;
    border-radius: 50%;
    transform: translateY(-50%);
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 16px rgba(255, 191, 0, 0.35));
}

/* Readability scrim between the copy and the art */
.play-btn-mode::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 6, 4, 0.92) 0%, rgba(10, 6, 4, 0.7) 45%, rgba(10, 6, 4, 0) 75%);
    pointer-events: none;
}

.play-mode-text {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    padding: 14px 16px;
}

.play-btn .play-mode-text {
    flex: 0 1 64%;
}

.play-btn .play-mode-title {
    flex: 0 0 auto;
    font-family: 'DragonSlayer', serif;
    font-weight: normal;
    font-size: 1.35rem;
    line-height: 1.05;
    letter-spacing: 1px;
    text-wrap: balance;
    text-transform: uppercase;
    color: #ffbf00;
    background: linear-gradient(180deg, #fff2c2 0%, #ffbf00 55%, #ff8a1c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.85));
}

/* Secondary actions: one row of four smoked-glass tiles with a gold icon badge */
.play-buttons-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.play-btn.play-btn-tile {
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    padding: 14px 8px;
    font-size: 0.74rem;
    letter-spacing: 1px;
    text-align: center;
    color: rgba(240, 236, 230, 0.86);
    background: linear-gradient(160deg, rgba(36, 24, 14, 0.85) 0%, rgba(14, 10, 8, 0.85) 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 191, 0, 0.14);
}

.play-btn-tile span {
    flex: 0 0 auto;
}

.play-btn-tile > i:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 0.9rem;
    color: #1a0d04;
    background: linear-gradient(135deg, #ffd45e, #ff8a1c);
    box-shadow: 0 0 14px rgba(255, 138, 28, 0.3);
}

/* On tiles the sub-state badges sit in the corner instead of inline */
.play-btn-tile .spectate-lock-badge,
.play-btn-tile .spectate-crown-badge {
    position: absolute;
    top: 8px;
    right: 10px;
}

/* Subscription badges on gated buttons (e.g. Spectate). Both hidden until JS
   resolves the player's subscription state, so neither flashes on load. The
   .play-btn prefix outranks Font Awesome's own .fas { display: inline-block },
   which loads after this file. */
.play-btn .spectate-lock-badge,
.play-btn .spectate-crown-badge {
    display: none;
    font-size: 0.75rem !important;
}

.spectate-lock-badge {
    color: rgba(240, 236, 230, 0.5);
}

/* Crown for subscribers: glowing gold so it reads as an earned, premium feature. */
.spectate-crown-badge {
    color: #ffbf00;
    filter: drop-shadow(0 0 6px rgba(255, 191, 0, 0.6));
}

/* Locked Spectate tile: the icon badge goes ash-grey so it reads as gated but still inviting. */
.play-btn.spectate-locked {
    color: rgba(240, 236, 230, 0.55);
}

.play-btn.spectate-locked > i:first-child {
    color: rgba(240, 236, 230, 0.75);
    background: linear-gradient(135deg, #5a4a36, #3a2c1e);
    box-shadow: none;
}

/* Missions on the home view: a compact row of glass cards under the tiles
   (border colours are left to the daily/weekly accent rules) */
#play-home .missions-panel {
    margin-top: 14px;
    padding: 10px 12px 12px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 191, 0, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
}

#play-home .missions-list {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

#play-home .dm-card {
    padding: 8px 10px;
    border-radius: 10px;
    background: linear-gradient(160deg, rgba(40, 26, 14, 0.75) 0%, rgba(12, 9, 7, 0.75) 100%);
}

#play-home .dm-card.dm-completed {
    background: linear-gradient(160deg, rgba(50, 90, 50, 0.3) 0%, rgba(14, 24, 14, 0.6) 100%);
}

#play-home .dm-description {
    font-size: 0.74rem;
}

/* Phones: tiles fold to 2x2; the name and pills stack */
@media only screen and (max-width: 767px), only screen and (hover: none) {
    .menu-panel {
        padding: 16px 14px;
    }

    .player-hero-crest {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    .player-hero-crest-face,
    .player-hero-avatar {
        border-radius: 12px;
        font-size: 1.4rem;
    }

    .player-hero-level-coin {
        width: 25px;
        height: 25px;
        font-size: 0.72rem;
    }

    .player-hero-pills {
        margin-left: 0;
    }

    .play-buttons-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .play-btn.play-btn-hero {
        padding: 18px 14px;
        font-size: 0.95rem;
        letter-spacing: 2px;
    }

    .play-btn.play-btn-mode {
        min-height: 100px;
    }

    .play-btn .play-mode-title {
        font-size: 1.2rem;
    }
}

@media only screen and (max-width: 480px) {
    .play-modes {
        grid-template-columns: minmax(0, 1fr);
    }
}

.play-btn.spectate-locked .spectate-lock-badge {
    display: inline-block;
}

.play-btn.spectate-subscribed .spectate-crown-badge {
    display: inline-block;
}

/* When the crown is shown (subscriber) the lock must never show alongside it. */
.play-btn.spectate-subscribed .spectate-lock-badge {
    display: none;
}

.play-btn-confirm {
    background: rgba(255, 191, 0, 0.12);
    color: #ffbf00;
    border: 1px solid rgba(255, 191, 0, 0.35);
    margin-top: 6px;
}

.play-btn-confirm:hover {
    background: rgba(255, 191, 0, 0.22);
    box-shadow: 0 4px 20px rgba(255, 191, 0, 0.2);
    color: #ffd966;
}

/* ── PLAY FORM ────────────────────────────────────────────── */

.play-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.play-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.play-field label {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.68rem;
    letter-spacing: 2px;
    color: rgba(255, 191, 0, 0.6);
    text-transform: uppercase;
}

.play-field input,
.play-field select {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.88rem;
    color: #f0ece6;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 191, 0, 0.22);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.play-field input:focus,
.play-field select:focus {
    border-color: rgba(255, 191, 0, 0.5);
    background: rgba(255, 191, 0, 0.06);
    box-shadow: 0 0 10px rgba(255, 191, 0, 0.15);
}

.play-field select option {
    background: #1a1a1a;
    color: #f0ece6;
}

/* ── MATCHMAKING BODY ─────────────────────────────────────── */

.matchmaking-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    padding: 28px 0 18px;
}

.matchmaking-text {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.92rem;
    color: rgba(255, 191, 0, 0.7);
    letter-spacing: 1.5px;
    margin: 0;
    text-transform: uppercase;
}

/* ── Matchmaking radar ────────────────────────────────────── */
/* Wrapper exists so effects that reach past the radar's clipped edge (the sonar
   echo rings) can share the exact same center as the scanner core. */
.mm-radar-wrap {
    position: relative;
}

/* sonar echo rings rippling out from the core, past the radar's edge */
.mm-echo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 70px;
    height: 70px;
    margin: -35px 0 0 -35px;
    border-radius: 50%;
    border: 1px solid rgba(255, 191, 0, 0.35);
    animation: mmEcho 2.4s ease-out infinite;
    pointer-events: none;
}
.mm-echo:nth-child(2) { animation-delay: 1.2s; }

@keyframes mmEcho {
    0%   { transform: scale(0.3); opacity: 0.8; }
    100% { transform: scale(4.6); opacity: 0; }
}

.mm-radar {
    position: relative;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    border: 1px solid rgba(255, 191, 0, 0.28);
    background:
        repeating-radial-gradient(circle,
            transparent 0 29px,
            rgba(255, 191, 0, 0.07) 29px 30px),
        radial-gradient(circle, rgba(255, 191, 0, 0.06), transparent 70%);
    overflow: hidden;
    box-shadow: inset 0 0 50px rgba(255, 191, 0, 0.08), 0 0 36px rgba(255, 191, 0, 0.08);
}

/* faint crosshair grid lines */
.mm-radar::before,
.mm-radar::after {
    content: '';
    position: absolute;
    background: rgba(255, 191, 0, 0.1);
    z-index: 1;
}
.mm-radar::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.mm-radar::after { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-50%); }

/* rotating radar sweep with a bright comet leading edge */
.mm-sweep {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        rgba(255, 191, 0, 0) 0deg,
        rgba(255, 191, 0, 0) 250deg,
        rgba(255, 191, 0, 0.05) 300deg,
        rgba(255, 191, 0, 0.16) 344deg,
        rgba(255, 191, 0, 0.5) 360deg);
    animation: mmSweep 2.6s linear infinite;
    z-index: 2;
}

/* the leading-edge beam of the sweep */
.mm-sweep::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    height: 50%;
    margin-left: -1px;
    background: linear-gradient(to bottom,
        rgba(255, 191, 0, 0.9),
        rgba(255, 191, 0, 0.25) 75%,
        transparent);
    box-shadow: 0 0 8px 1px rgba(255, 191, 0, 0.45);
}

@keyframes mmSweep {
    to { transform: rotate(360deg); }
}

/* slow counter-rotating dashed range ring just inside the rim */
.mm-tick-ring {
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 191, 0, 0.22);
    animation: mmTickSpin 26s linear infinite reverse;
    z-index: 1;
}

@keyframes mmTickSpin {
    to { transform: rotate(360deg); }
}

/* expanding sonar pulse rings */
.mm-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255, 191, 0, 0.45);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.12);
    opacity: 0;
    animation: mmRing 3s cubic-bezier(0.2, 0.6, 0.2, 1) infinite;
    z-index: 2;
}
.mm-ring:nth-child(2) { animation-delay: 1s; }
.mm-ring:nth-child(3) { animation-delay: 2s; }

@keyframes mmRing {
    0%   { transform: translate(-50%, -50%) scale(0.12); opacity: 0.75; }
    80%  { opacity: 0.12; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* contact blips that flare as the sweep passes, staggered around the dish */
.mm-blip {
    position: absolute;
    top: 32%;
    left: 64%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffbf00;
    box-shadow: 0 0 10px 2px rgba(255, 191, 0, 0.7);
    opacity: 0;
    animation: mmBlip 2.6s ease-in-out infinite;
    z-index: 2;
}

.mm-blip-2 {
    top: 66%;
    left: 31%;
    width: 6px;
    height: 6px;
    animation-delay: 1.1s;
}

.mm-blip-3 {
    top: 47%;
    left: 76%;
    width: 5px;
    height: 5px;
    animation-delay: 1.9s;
}

@keyframes mmBlip {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    35%      { opacity: 0; transform: scale(0.5); }
    45%      { opacity: 1; transform: scale(1.35); }
    55%      { transform: scale(1); }
    75%      { opacity: 0; transform: scale(0.7); }
}

/* glowing core with the crosshair icon */
.mm-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(14, 14, 14, 0.85);
    border: 1px solid rgba(255, 191, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffbf00;
    font-size: 1.5rem;
    z-index: 3;
    animation: mmCorePulse 2s ease-in-out infinite;
}

/* spinning dashed targeting reticle around the core */
.mm-core::before {
    content: '';
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 191, 0, 0.5);
    animation: mmTickSpin 9s linear infinite;
}

@keyframes mmCorePulse {
    0%, 100% { box-shadow: 0 0 16px rgba(255, 191, 0, 0.25); transform: translate(-50%, -50%) scale(1); }
    50%      { box-shadow: 0 0 30px rgba(255, 191, 0, 0.55); transform: translate(-50%, -50%) scale(1.06); }
}

/* animated ellipsis after the searching text */
.mm-ellipsis span {
    animation: mmEllipsis 1.4s infinite;
}
.mm-ellipsis span:nth-child(2) { animation-delay: 0.2s; }
.mm-ellipsis span:nth-child(3) { animation-delay: 0.4s; }

@keyframes mmEllipsis {
    0%, 100% { opacity: 0.2; }
    50%      { opacity: 1; }
}

/* "Risking N" pill shown while searching when a stake was placed */
.mm-risk {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    color: rgba(240, 236, 230, 0.7);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(255, 191, 0, 0.08);
    border: 1px solid rgba(255, 191, 0, 0.28);
}
.mm-risk .gem-ico { font-size: 0.9rem; }
.mm-risk b { color: #ffbf00; font-weight: bold; }

/* ── MATCHMAKING ERROR ────────────────────────────────────── */

.mm-error {
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(220, 50, 50, 0.06);
    border: 1px solid rgba(220, 50, 50, 0.25);
    border-radius: 8px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.72rem;
    color: #cc4444;
    letter-spacing: 0.04em;
    line-height: 1.5;
    text-align: center;
}

.mm-error-link {
    color: #ffbf00;
    text-decoration: none;
    font-weight: bold;
    white-space: nowrap;
}

.mm-error-link:hover {
    text-decoration: underline;
}

/* ── MATCHMAKING SETUP ────────────────────────────────────── */

.mm-setup-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 6px 0 4px;
}

/* One settings row: label on the left, control on the right */
.mm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 191, 0, 0.16);
    border-radius: 10px;
}

.mm-row-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.82rem;
    letter-spacing: 0.5px;
    color: rgba(240, 236, 230, 0.82);
}

.mm-select {
    box-sizing: border-box;
    min-width: 150px;
    padding: 7px 12px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.82rem;
    color: #ffbf00;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 191, 0, 0.3);
    border-radius: 8px;
    outline: none;
    cursor: pointer;
}
.mm-select:focus { border-color: #ffbf00; box-shadow: 0 0 10px rgba(255, 191, 0, 0.2); }
.mm-select option { background: #1a1a1a; color: #f0ece6; }
.mm-select option:disabled { color: rgba(240, 236, 230, 0.35); }

.mm-risk-input {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 191, 0, 0.3);
    border-radius: 8px;
}
.mm-risk-input .gem-ico { font-size: 1rem; }
.mm-risk-input:focus-within { border-color: #ffbf00; box-shadow: 0 0 10px rgba(255, 191, 0, 0.2); }

.wager-input {
    width: 96px;
    background: transparent;
    border: none;
    color: #fff;
    font-family: 'DragonSlayer', serif;
    font-size: 1.15rem;
    text-align: right;
    letter-spacing: 1px;
    -moz-appearance: textfield;
}
.wager-input:focus { outline: none; }
.wager-input:disabled { opacity: 0.4; }
.wager-input::-webkit-outer-spin-button,
.wager-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* "?" info icon + hover/focus popup carrying the rules + caps */
.mm-info {
    position: relative;
    display: inline-flex;
    color: rgba(255, 191, 0, 0.6);
    cursor: help;
    font-size: 0.8rem;
}
.mm-info:hover { color: #ffbf00; }

.mm-info-pop {
    position: absolute;
    top: calc(100% + 10px);
    left: -8px;
    width: 232px;
    padding: 10px 12px;
    background: rgba(10, 10, 10, 0.97);
    border: 1px solid rgba(255, 191, 0, 0.35);
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.7rem;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: rgba(240, 236, 230, 0.8);
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 30;
}
.mm-info-pop b { color: #ffbf00; }
.mm-info-pop .wager-sub { color: #ffbf00; }
.mm-info-pop .wager-sub .fa-crown { font-size: 0.62rem; }

.mm-info:hover .mm-info-pop,
.mm-info:focus .mm-info-pop,
.mm-info:focus-within .mm-info-pop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mm-info-pop::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 12px;
    border: 6px solid transparent;
    border-bottom-color: rgba(255, 191, 0, 0.35);
}

/* ── MATCHMAKING REVEAL ───────────────────────────────────── */

.mm-reveal {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 30px 0;
    opacity: 0;
    transform: scale(0.85);
}

.mm-reveal.mm-reveal-animate {
    animation: mmReveal 3.5s ease forwards;
}

@keyframes mmReveal {
    0%   { opacity: 0; transform: scale(0.8); }
    20%  { opacity: 1; transform: scale(1.05); }
    35%  { transform: scale(1); }
    80%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.08); }
}

.mm-reveal-found {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    color: rgba(255, 191, 0, 0.6);
    margin: 0;
    text-transform: uppercase;
}

.mm-reveal-type {
    font-family: 'DragonSlayer', sans-serif;
    font-size: 2.4rem;
    color: #ffbf00;
    letter-spacing: 0.1em;
    text-shadow: 0 0 32px rgba(255, 191, 0, 0.5), 0 0 8px rgba(255, 191, 0, 0.3);
}

.mm-reveal-desc {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.72rem;
    color: rgba(240, 236, 230, 0.5);
    letter-spacing: 0.12em;
    margin: 0;
}

/* ── LOBBY SEARCH ─────────────────────────────────────────── */

.lobby-search {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.lobby-search-row {
    position: relative;
    display: flex;
    align-items: center;
}

.lobby-search-icon {
    position: absolute;
    left: 12px;
    font-size: 0.8rem;
    color: rgba(255, 191, 0, 0.5);
    pointer-events: none;
}

.lobby-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 36px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.88rem;
    color: #f0ece6;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 191, 0, 0.22);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.lobby-search-input:focus {
    border-color: rgba(255, 191, 0, 0.5);
    background: rgba(255, 191, 0, 0.06);
    box-shadow: 0 0 10px rgba(255, 191, 0, 0.15);
}

.lobby-search-clear {
    position: absolute;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    color: rgba(240, 236, 230, 0.5);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}

.lobby-search-clear:hover {
    color: #f0ece6;
    background: rgba(255, 191, 0, 0.12);
}

.lobby-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* Compact dropdown triggers (fixed header labels) */
.lobby-dd {
    position: relative;
}

.lobby-dd-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 11px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #f0ece6;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 191, 0, 0.22);
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.2s, background 0.2s;
}

.lobby-dd-btn i {
    font-size: 0.58rem;
    color: rgba(255, 191, 0, 0.6);
    transition: transform 0.2s;
}

.lobby-dd-btn:hover {
    border-color: rgba(255, 191, 0, 0.45);
    background: rgba(255, 191, 0, 0.07);
}

.lobby-dd.open .lobby-dd-btn {
    border-color: rgba(255, 191, 0, 0.5);
    background: rgba(255, 191, 0, 0.09);
}

.lobby-dd.open .lobby-dd-btn i {
    transform: rotate(180deg);
}

.lobby-dd-panel {
    position: absolute;
    z-index: 40;
    top: calc(100% + 5px);
    left: 0;
    min-width: 160px;
    display: none;
    flex-direction: column;
    gap: 3px;
    padding: 8px;
    background: #161616;
    border: 1px solid rgba(255, 191, 0, 0.25);
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
}

.lobby-dd.open .lobby-dd-panel {
    display: flex;
}

/* Rightmost dropdown opens toward the left so it never spills past the edge. */
#dd-sort .lobby-dd-panel {
    left: auto;
    right: 0;
}

.lobby-dd-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 7px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.78rem;
    color: #f0ece6;
    border-radius: 6px;
    cursor: pointer;
}

.lobby-dd-check:hover {
    background: rgba(255, 191, 0, 0.08);
}

.lobby-dd-check input {
    accent-color: #ffbf00;
    cursor: pointer;
}

/* Game-type row: checkbox label + "Only" shortcut */
.lobby-dd-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.lobby-dd-row .lobby-dd-check {
    flex: 1;
    min-width: 0;
}

.lobby-dd-only {
    flex: 0 0 auto;
    padding: 3px 8px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.6rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 191, 0, 0.7);
    background: transparent;
    border: 1px solid rgba(255, 191, 0, 0.2);
    border-radius: 5px;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s, color 0.15s, background 0.15s, border-color 0.15s;
}

.lobby-dd-row:hover .lobby-dd-only,
.lobby-dd-only:focus {
    opacity: 1;
}

.lobby-dd-only:hover {
    color: #ffbf00;
    background: rgba(255, 191, 0, 0.12);
    border-color: rgba(255, 191, 0, 0.45);
}

/* "Select All" action row */
.lobby-dd-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.66rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 191, 0, 0.85);
    background: rgba(255, 191, 0, 0.06);
    border: 1px solid rgba(255, 191, 0, 0.22);
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.lobby-dd-action i {
    font-size: 0.62rem;
}

.lobby-dd-action:hover {
    color: #ffbf00;
    background: rgba(255, 191, 0, 0.12);
    border-color: rgba(255, 191, 0, 0.45);
}

.lobby-dd-divider {
    height: 1px;
    background: rgba(255, 191, 0, 0.15);
    margin: 2px 2px;
}

.lobby-dd-field {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 7px;
}

.lobby-dd-field label {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.6rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 191, 0, 0.6);
    white-space: nowrap;
}

#dd-ratings .lobby-dd-panel {
    min-width: 200px;
}

.lobby-dd-field .lobby-dd-select {
    flex: 0 0 auto;
}

.lobby-dd-select {
    box-sizing: border-box;
    padding: 7px 10px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.8rem;
    color: #f0ece6;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 191, 0, 0.22);
    border-radius: 6px;
    outline: none;
    cursor: pointer;
}

.lobby-dd-select:focus {
    border-color: rgba(255, 191, 0, 0.5);
}

.lobby-dd-select option {
    background: #1a1a1a;
    color: #f0ece6;
}

.lobby-dd-select option:disabled {
    color: rgba(240, 236, 230, 0.25);
}

.lobby-refresh-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: rgba(255, 191, 0, 0.7);
    background: rgba(255, 191, 0, 0.05);
    border: 1px solid rgba(255, 191, 0, 0.22);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.lobby-refresh-btn:hover {
    color: #ffbf00;
    border-color: rgba(255, 191, 0, 0.5);
    background: rgba(255, 191, 0, 0.1);
}

/* Active filter summary chips */
.lobby-filter-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.lobby-filter-summary:empty {
    display: none;
}

.lobby-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.66rem;
    letter-spacing: 0.5px;
    color: rgba(240, 236, 230, 0.85);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 191, 0, 0.16);
    border-radius: 20px;
}

.lobby-chip i {
    font-size: 0.58rem;
    color: rgba(255, 191, 0, 0.55);
}

.lobby-chip-type {
    color: #ffbf00;
    background: rgba(255, 191, 0, 0.1);
    border-color: rgba(255, 191, 0, 0.3);
}

/* Combined badge shown when every game type is selected */
.lobby-chip-all {
    color: #0e0e0e;
    background: rgba(255, 191, 0, 0.85);
    border-color: #ffbf00;
    font-weight: 600;
}

.lobby-chip-all i {
    color: #0e0e0e;
}

/* ── LOBBY LIST ───────────────────────────────────────────── */

.lobby-list {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lobby-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: rgba(255, 191, 0, 0.03);
    border: 1px solid rgba(255, 191, 0, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.lobby-item:hover {
    border-color: rgba(255, 191, 0, 0.4);
    background: rgba(255, 191, 0, 0.06);
}

.lobby-item-name {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.82rem;
    color: #f0ece6;
    letter-spacing: 0.5px;
}

.lobby-item-meta {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.65rem;
    color: rgba(255, 191, 0, 0.5);
    letter-spacing: 1px;
}

.lobby-empty {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.78rem;
    color: rgba(240, 236, 230, 0.4);
    text-align: center;
    padding: 20px;
}

/* ── LOBBY DETAILS ────────────────────────────────────────── */

.lobby-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lobby-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.78rem;
    color: rgba(240, 236, 230, 0.7);
}

.lobby-info-label {
    color: rgba(255, 191, 0, 0.5);
    letter-spacing: 1px;
    font-size: 0.65rem;
}

.lobby-type-select {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.78rem;
    color: #f0ece6;
    background: rgba(255, 191, 0, 0.06);
    border: 1px solid rgba(255, 191, 0, 0.25);
    border-radius: 6px;
    padding: 3px 8px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}

.lobby-type-select:hover,
.lobby-type-select:focus {
    border-color: rgba(255, 191, 0, 0.5);
    background: rgba(255, 191, 0, 0.1);
}

.lobby-type-select option {
    background: #1a1a1a;
    color: #f0ece6;
}

.lobby-player {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    height: 40px;
    background: rgba(255, 191, 0, 0.04);
    border: 1px solid rgba(255, 191, 0, 0.1);
    border-radius: 8px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.82rem;
    color: #f0ece6;
    box-sizing: border-box;
}

.lobby-player.empty {
    color: rgba(240, 236, 230, 0.3);
    border-style: dashed;
}

.lobby-player-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lobby-player-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lobby-host-badge,
.lobby-kick-btn {
    flex: 0 0 auto;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.58rem;
    letter-spacing: 1.5px;
    line-height: 1;
    border-radius: 4px;
    padding: 2px 6px;
    text-transform: uppercase;
}

.lobby-host-badge {
    color: #ffbf00;
    background: rgba(255, 191, 0, 0.12);
    border: 1px solid rgba(255, 191, 0, 0.3);
}

.lobby-kick-btn {
    color: #ff5050;
    background: rgba(255, 60, 60, 0.12);
    border: 1px solid rgba(255, 60, 60, 0.3);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.lobby-kick-btn:hover {
    background: rgba(255, 60, 60, 0.25);
    border-color: rgba(255, 60, 60, 0.55);
    color: #ff6b6b;
}

.lobby-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
    flex-wrap: wrap;
    align-items: center;
}

.lobby-bot-add {
    display: inline-flex;
    align-items: stretch;
    gap: 6px;
}

.lobby-bot-select {
    background: rgba(20, 18, 14, 0.9);
    color: #f0ece6;
    border: 1px solid rgba(255, 191, 0, 0.3);
    border-radius: 6px;
    padding: 0 10px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.78rem;
    letter-spacing: 1px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s ease;
}

.lobby-bot-select:hover,
.lobby-bot-select:focus {
    border-color: rgba(255, 191, 0, 0.6);
}

.lobby-chat {
    margin-top: 14px;
    border-top: 1px solid rgba(255, 191, 0, 0.1);
    padding-top: 12px;
}

.lobby-chat-messages {
    max-height: 160px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.lobby-chat-msg {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.72rem;
    color: rgba(240, 236, 230, 0.6);
    text-align: left;
}

.lobby-chat-msg .chat-username {
    color: #ffbf00;
}

.lobby-chat-input {
    display: flex;
    gap: 6px;
}

.lobby-chat-input input {
    flex: 1;
    padding: 6px 10px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.78rem;
    color: #f0ece6;
    background: rgba(20, 18, 14, 0.9);
    border: 1px solid rgba(255, 191, 0, 0.2);
    border-radius: 6px;
    outline: none;
}

/* ── SCROLLBARS ───────────────────────────────────────────── */

.friends-list,
#game-friends-list,
.log-entries,
.chat-messages,
.lobby-list,
.lobby-chat-messages,
.friends-list *,
.deck-viewer-cards,
.action-panel,
.effects-list {
    scrollbar-color: rgba(255, 191, 0, 0.35) rgba(0, 0, 0, 0.45);
}

.friends-list::-webkit-scrollbar,
#game-friends-list::-webkit-scrollbar,
.log-entries::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar,
.lobby-list::-webkit-scrollbar,
.lobby-chat-messages::-webkit-scrollbar,
.deck-viewer-cards::-webkit-scrollbar,
.action-panel::-webkit-scrollbar,
.effects-list::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.friends-list::-webkit-scrollbar-track,
#game-friends-list::-webkit-scrollbar-track,
.log-entries::-webkit-scrollbar-track,
.chat-messages::-webkit-scrollbar-track,
.lobby-list::-webkit-scrollbar-track,
.lobby-chat-messages::-webkit-scrollbar-track,
.deck-viewer-cards::-webkit-scrollbar-track,
.action-panel::-webkit-scrollbar-track,
.effects-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.45);
    border-radius: 10px;
}

.friends-list::-webkit-scrollbar-thumb,
#game-friends-list::-webkit-scrollbar-thumb,
.log-entries::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb,
.lobby-list::-webkit-scrollbar-thumb,
.lobby-chat-messages::-webkit-scrollbar-thumb,
.deck-viewer-cards::-webkit-scrollbar-thumb,
.action-panel::-webkit-scrollbar-thumb,
.effects-list::-webkit-scrollbar-thumb {
    background: rgba(255, 191, 0, 0.4);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.friends-list::-webkit-scrollbar-thumb:hover,
#game-friends-list::-webkit-scrollbar-thumb:hover,
.log-entries::-webkit-scrollbar-thumb:hover,
.chat-messages::-webkit-scrollbar-thumb:hover,
.lobby-list::-webkit-scrollbar-thumb:hover,
.lobby-chat-messages::-webkit-scrollbar-thumb:hover,
.deck-viewer-cards::-webkit-scrollbar-thumb:hover,
.action-panel::-webkit-scrollbar-thumb:hover,
.effects-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 191, 0, 0.7);
    background-clip: content-box;
}

/* ── GAME LAYOUT ──────────────────────────────────────────── */

.game-layout {
    /* --bu ("board unit") is the scale factor for every fixed board dimension:
       1px on tall screens = the original design sizes. The desktop media query
       below shrinks it on short viewports (laptops, OS display scaling) so the
       whole board scales down as one unit instead of rows overflowing each
       other. Mobile keeps 1px — it has its own layout and overrides. */
    --bu: 1px;
    display: flex;
    gap: 12px;
    align-items: stretch;
    height: 100%;
}

/* Desktop only (the complement of the mobile/touch query used elsewhere):
   570 ≈ the vertical px the board's rows need at full size, 230 ≈ header +
   action bar + screen padding above/below the board. Floor at 0.55 so text
   and counts stay legible on extremely short windows. */
@media (min-width: 768px) and (hover: hover) {
    .game-layout {
        --bu: clamp(0.55px, calc((100vh - 230px) / 570), 1px);
    }

    /* The board scales as one design (applyGameZoom), so it may use the whole
       window width; the 1400px menu cap left big monitors mostly empty. */
    #game-screen.screen {
        max-width: none;
    }

    /* Spare board height goes to the two battlefields (play.js grows the spaces
       into it), not to empty bands around a fixed-height loop. */
    .game-layout #board-content .opp-section,
    .game-layout #board-content .plr-section {
        flex: 1 1 0;
        min-height: 0;
    }

    .game-layout #board-content .mid-section {
        flex: 0 0 auto;
    }
}

.game-layout .board-outer {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: rgba(4, 4, 4, 0.82);
    border: 1px solid rgba(255, 191, 0, 0.14);
    border-radius: 18px;
    padding: 8px;
    backdrop-filter: blur(12px);
    overflow: hidden;
    position: relative;
}

/* ── SIDE PANELS ─────────────────────────────────────────── */

.side-panel {
    flex: 0 0 220px;
    max-width: 220px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    overflow: hidden;
}

.left-panel {
    order: -1;
}

.right-panel {
    justify-content: flex-start;
}

/* ── CARD INSPECT ────────────────────────────────────────── */

.card-inspect-box {
    display: flex;
    justify-content: center;
    padding: 0;
    width: 100%;
}

.card-inspect-img {
    width: auto;
    max-width: 100%;
    height: auto;
    /* Cap by viewport so the phase box above and the action panel below always
       keep their room on short screens; 309px is the natural height at the full
       220px panel width, so tall screens are unaffected. When the auto-fit zoom
       owns the scaling (applyGameZoom in play.js) it pins --inspect-max instead,
       since vh inside a zoomed subtree is unreliable across engines. */
    max-height: var(--inspect-max, clamp(110px, calc(100vh - 540px), 280px));
    border-radius: 8px;
    border: 1px solid rgba(255, 191, 0, 0.14);
    display: block;
}

/* ── MOBILE CARD PREVIEW OVERLAY ────────────────────────── */

.card-preview-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    cursor: pointer;
}

.card-preview-img {
    max-width: min(80vw, 340px);
    max-height: 80vh;
    width: auto;
    height: auto;
    border-radius: 12px;
    border: 2px solid rgba(255, 191, 0, 0.4);
    box-shadow: 0 0 40px rgba(255, 191, 0, 0.15), 0 8px 32px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

@media (orientation: landscape) and (hover: none) and (max-height: 900px) {
    .card-preview-img {
        max-width: 45vw;
        max-height: 85vh;
    }
}

.phase-box {
    flex-shrink: 0;
    background: rgba(8, 8, 8, 0.88);
    border: 1px solid rgba(255, 191, 0, 0.16);
    border-radius: 12px;
    padding: 12px 16px;
    text-align: center;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.phase-box.my-turn {
    border-color: #ffbf00;
    box-shadow: 0 0 16px rgba(255, 191, 0, 0.25);
}

.phase-box.waiting-turn {
    border-color: rgba(255, 191, 0, 0.08);
}



/* One line, always (play.js fitPhaseLabel steps the size down for long names) */
.phase-label {
    font-family: 'DragonSlayer', serif;
    font-size: 1.1rem;
    color: #ffbf00;
    letter-spacing: 3px;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
}

.turn-count {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.72rem;
    color: rgba(240, 236, 230, 0.6);
    letter-spacing: 2px;
    margin-bottom: 2px;
}

.turn-text {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.8rem;
    color: rgba(240, 236, 230, 0.75);
    letter-spacing: 1px;
}

/* ── PROMPT COUNTDOWN TIMER ──────────────────────────────── */

.prompt-timer {
    margin-top: 6px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    color: rgba(240, 236, 230, 0.75);
}

/* Opponent is the one on the clock — keep it subtle */
.prompt-timer.timer-theirs,
.mobile-hud-timer.timer-theirs {
    color: rgba(240, 236, 230, 0.35);
}

.prompt-timer.timer-mine.timer-warning,
.mobile-hud-timer.timer-mine.timer-warning {
    color: #ffbf00;
}

.prompt-timer.timer-mine.timer-critical,
.mobile-hud-timer.timer-mine.timer-critical {
    color: #ff5252;
    animation: timer-pulse 1s ease-in-out infinite;
}

@keyframes timer-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* 3-strike indicator next to the countdown — filled ✕ = strikes taken */
.timer-strikes {
    margin-left: 4px;
    font-size: 0.78rem;
    letter-spacing: 2px;
    color: #ff5252;
    vertical-align: baseline;
}
.prompt-timer.timer-theirs .timer-strikes,
.mobile-hud-timer.timer-theirs .timer-strikes {
    color: rgba(255, 82, 82, 0.55);
}

/* ── AUDIO CONTROLS ──────────────────────────────────────── */

.audio-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    justify-content: center;
}

.audio-toggle {
    background: none;
    border: 1px solid rgba(255, 191, 0, 0.18);
    border-radius: 6px;
    color: rgba(255, 191, 0, 0.6);
    width: 30px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.audio-toggle:hover {
    color: #ffbf00;
    border-color: rgba(255, 191, 0, 0.5);
    background: rgba(255, 191, 0, 0.06);
}

/* Resign flag in the phase-box icon row (desktop + landscape sidebar) —
   mirrors the mobile HUD's flag button */
.audio-toggle.hud-resign {
    color: rgba(255, 90, 90, 0.6);
    border-color: rgba(255, 90, 90, 0.25);
}

.audio-toggle.hud-resign:hover {
    color: #ff6b6b;
    border-color: rgba(255, 100, 100, 0.55);
    background: rgba(255, 60, 60, 0.08);
}

.audio-toggle.muted {
    color: rgba(240, 236, 230, 0.25);
    border-color: rgba(255, 191, 0, 0.08);
}

/* ── In-game settings modal (skin display) ──────────────────── */
.game-settings-overlay {
    position: fixed;
    inset: 0;
    z-index: 6000;
    background: rgba(0, 0, 0, 0.75);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
}

.game-settings-box {
    position: relative;
    /* border-box so the padding/border are included in the width below — without
       it the box renders ~22px wider than the viewport and touches the edges. */
    box-sizing: border-box;
    background: #0e0e0e;
    border: 1px solid rgba(255, 191, 0, 0.25);
    border-radius: 16px;
    padding: 26px 22px 20px;
    width: calc(100% - 32px);
    max-width: 520px;
    /* Stay clear of the screen edges and scroll internally when the content is
       taller than the viewport, so the modal never butts against the edges. */
    max-height: calc(100% - 32px);
    overflow-y: auto;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.9);
}

.game-settings-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    color: rgba(240, 236, 230, 0.5);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s;
}

.game-settings-close:hover {
    color: #ffbf00;
}

.game-settings-box h2 {
    font-family: 'DragonSlayer', sans-serif;
    font-size: 1.15rem;
    color: #ffbf00;
    letter-spacing: 0.06em;
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.game-settings-status {
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    /* Always reserve a line so the "Saved." flash doesn't change the modal's
       height and make it bounce/re-center when toggling a setting. */
    min-height: 1.1rem;
    line-height: 1.1rem;
}

.game-settings-status.success { color: #6fcf6f; }
.game-settings-status.error { color: #cc4444; }

/* Two-column layout so every play-page setting fits without the popup scrolling:
   left column = Audio / Gameplay / Chat, right column = Skin display (the tallest group). */
.game-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}

/* Trim the leading top margin on each column's first group label so the two
   columns start flush with each other. */
.game-settings-grid .gs-col > .game-settings-group-label:first-child {
    margin-top: 6px;
}

/* Narrow phones: collapse to a single column (internal scroll remains as a last resort). */
@media (max-width: 440px) {
    .game-settings-grid { grid-template-columns: 1fr; }
}

.game-settings-group-label {
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.56rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 191, 0, 0.7);
    margin: 14px 0 6px;
}

.game-settings-audio {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 2px 2px 4px;
}

.game-settings-audio .audio-slider {
    flex: 1;
    width: auto;
}

.game-settings-list {
    display: flex;
    flex-direction: column;
}

.game-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 2px;
    border-bottom: 1px solid rgba(255, 191, 0, 0.08);
}

.game-settings-row:last-child {
    border-bottom: none;
}

.game-settings-label {
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(240, 236, 230, 0.85);
    display: flex;
    align-items: center;
    gap: 10px;
}

.game-settings-label i {
    color: rgba(255, 191, 0, 0.55);
    width: 16px;
    text-align: center;
}

.game-settings-foot {
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.05em;
    color: rgba(240, 236, 230, 0.4);
    margin: 14px 0 0;
    white-space: nowrap;
}

.game-settings-foot a {
    color: rgba(255, 191, 0, 0.75);
    text-decoration: none;
}

.game-settings-foot a:hover {
    color: #ffbf00;
    text-decoration: underline;
}

/* Toggle switch (mirrors the settings page; settings.css isn't loaded here). */
.settings-toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.settings-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.settings-toggle-slider {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.settings-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 2px;
    top: 2px;
    background: rgba(240, 236, 230, 0.35);
    border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
}

.settings-toggle-switch input:checked + .settings-toggle-slider {
    background: rgba(255, 191, 0, 0.18);
    border-color: rgba(255, 191, 0, 0.5);
}

.settings-toggle-switch input:checked + .settings-toggle-slider::before {
    transform: translateX(20px);
    background: #ffbf00;
}

.audio-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 80px;
    height: 4px;
    background: rgba(255, 191, 0, 0.15);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.audio-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffbf00;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 6px rgba(255, 191, 0, 0.4);
}

.audio-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffbf00;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 6px rgba(255, 191, 0, 0.4);
}

/* ── DEFEND LINES SVG OVERLAY ───────────────────────────── */

.defend-lines-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    overflow: visible;
}

.defend-line {
    stroke: rgba(79, 195, 247, 0.7);
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 8 4;
    animation: defend-line-march 0.8s linear infinite;
    filter: drop-shadow(0 0 4px rgba(79, 195, 247, 0.5));
}

.defend-line-glow {
    stroke: rgba(79, 195, 247, 0.2);
    stroke-width: 6;
    fill: none;
    stroke-dasharray: 8 4;
    animation: defend-line-march 0.8s linear infinite;
    filter: blur(3px);
}

.defend-line-pending {
    stroke: rgba(79, 195, 247, 0.4);
    stroke-width: 1.5;
    fill: none;
    stroke-dasharray: 4 6;
    animation: defend-line-march 0.6s linear infinite;
}

.defend-endpoint {
    fill: rgba(79, 195, 247, 0.8);
    animation: defend-endpoint-pulse 1.2s ease-in-out infinite;
}

@keyframes defend-line-march {
    to { stroke-dashoffset: -12; }
}

@keyframes defend-endpoint-pulse {
    0%, 100% { r: 4; opacity: 0.8; }
    50%      { r: 6; opacity: 1; }
}

/* ── TERRAFORM lines (violet variant of the defend pending look) ─────── */

.terraform-line-pending {
    stroke: rgba(186, 104, 255, 0.55);
    stroke-width: 1.8;
    fill: none;
    stroke-dasharray: 5 5;
    animation: terraform-line-march 0.7s linear infinite;
    filter: drop-shadow(0 0 4px rgba(186, 104, 255, 0.45));
}

.terraform-endpoint {
    fill: rgba(186, 104, 255, 0.85);
    animation: terraform-endpoint-pulse 1.2s ease-in-out infinite;
}

@keyframes terraform-line-march {
    to { stroke-dashoffset: -10; }
}

@keyframes terraform-endpoint-pulse {
    0%, 100% { r: 4; opacity: 0.85; }
    50%      { r: 6; opacity: 1; }
}

/* ── Damage phase attack lines ─────────────────────────────── */

.damage-motion-path {
    fill: none;
    stroke: none;
}

.damage-line-trail {
    stroke: rgba(255, 68, 0, 0.15);
    stroke-width: 10;
    fill: none;
    filter: blur(4px);
    animation: damage-trail-pulse 0.6s ease-in-out infinite alternate;
}

.damage-line {
    stroke: rgba(255, 140, 0, 0.8);
    stroke-width: 2.5;
    fill: none;
    stroke-dasharray: 6 3;
    animation: damage-line-flow 0.4s linear infinite;
    filter: drop-shadow(0 0 6px rgba(255, 100, 0, 0.8));
}

.damage-projectile {
    fill: #ff6600;
    opacity: 0.9;
    animation: damage-proj-pulse 0.3s ease-in-out infinite alternate;
}

.damage-projectile-core {
    fill: #ffdd00;
    opacity: 1;
    animation: damage-core-pulse 0.2s ease-in-out infinite alternate;
}

.damage-impact {
    fill: rgba(255, 100, 0, 0.5);
    animation: damage-impact-burst 0.8s ease-in-out infinite;
}

.damage-impact-origin {
    fill: rgba(255, 150, 0, 0.4);
    animation: damage-origin-pulse 1s ease-in-out infinite;
}

@keyframes damage-line-flow {
    to { stroke-dashoffset: -9; }
}

@keyframes damage-trail-pulse {
    0%   { stroke-width: 8;  opacity: 0.1; }
    100% { stroke-width: 14; opacity: 0.25; }
}

@keyframes damage-proj-pulse {
    0%   { r: 5;  opacity: 0.7; fill: #ff4400; }
    100% { r: 8;  opacity: 1;   fill: #ffaa00; }
}

@keyframes damage-core-pulse {
    0%   { r: 2;  opacity: 0.9; fill: #ffffff; }
    100% { r: 4;  opacity: 1;   fill: #ffee00; }
}

@keyframes damage-impact-burst {
    0%   { r: 4;  opacity: 0.8; fill: rgba(255, 100, 0, 0.7); }
    50%  { r: 14; opacity: 0.3; fill: rgba(255, 200, 0, 0.4); }
    100% { r: 4;  opacity: 0.8; fill: rgba(255, 100, 0, 0.7); }
}

@keyframes damage-origin-pulse {
    0%, 100% { r: 5; opacity: 0.3; }
    50%      { r: 10; opacity: 0.6; }
}

/* ── Damage phase screen effects ──────────────────────────── */

.damage-screen-shake {
    animation: damageShake 0.6s ease-out;
}

@keyframes damageShake {
    0%   { transform: translate(0, 0); }
    10%  { transform: translate(-6px, 3px); }
    20%  { transform: translate(5px, -4px); }
    30%  { transform: translate(-4px, 5px); }
    40%  { transform: translate(6px, -2px); }
    50%  { transform: translate(-3px, 4px); }
    60%  { transform: translate(4px, -3px); }
    70%  { transform: translate(-2px, 2px); }
    80%  { transform: translate(2px, -1px); }
    90%  { transform: translate(-1px, 1px); }
    100% { transform: translate(0, 0); }
}

.damage-vignette-flash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1600;
    pointer-events: none;
    animation: damageVignetteAnim 1.2s ease-out forwards;
}

@keyframes damageVignetteAnim {
    0% {
        background: radial-gradient(ellipse at center, transparent 20%, rgba(255, 40, 0, 0.5) 100%);
        opacity: 1;
    }
    30% {
        background: radial-gradient(ellipse at center, transparent 40%, rgba(200, 30, 0, 0.35) 100%);
        opacity: 0.8;
    }
    100% {
        background: radial-gradient(ellipse at center, transparent 60%, rgba(150, 20, 0, 0) 100%);
        opacity: 0;
    }
}

.action-panel {
    flex: 1;
    min-height: 0;
    background: rgba(8, 8, 8, 0.88);
    border: 1px solid rgba(255, 191, 0, 0.12);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

/* Your prompt — the action panel breathes with an unmissable golden glow */
.action-panel.prompted {
    border-color: #ffbf00;
    animation: action-panel-glow 1.6s ease-in-out infinite;
}

@keyframes action-panel-glow {
    0%, 100% {
        border-color: rgba(255, 191, 0, 0.65);
        box-shadow: 0 0 14px rgba(255, 191, 0, 0.25),
                    0 0 34px rgba(255, 191, 0, 0.10),
                    inset 0 0 10px rgba(255, 191, 0, 0.06);
    }
    50% {
        border-color: #ffbf00;
        box-shadow: 0 0 24px rgba(255, 191, 0, 0.5),
                    0 0 60px rgba(255, 191, 0, 0.22),
                    inset 0 0 16px rgba(255, 191, 0, 0.12);
    }
}

/* The actionable buttons inside pulse along with the panel */
.action-panel.prompted .action-buttons button:not([disabled]):not(.btn-danger):not(.btn-outline):not(.shade-switch-opt):not(.shade-flip) {
    animation: prompt-btn-glow 1.6s ease-in-out infinite;
}

@keyframes prompt-btn-glow {
    0%, 100% { box-shadow: 0 0 6px rgba(255, 191, 0, 0.25); }
    50%      { box-shadow: 0 0 18px rgba(255, 191, 0, 0.6), 0 0 36px rgba(255, 191, 0, 0.2); }
}

/* Only the headline shimmers — the how-to line under it stays readable */
.action-panel.prompted .coach-title {
    animation: prompt-shimmer 2s ease-in-out infinite;
}

@keyframes prompt-shimmer {
    0%, 100% { color: rgba(255, 191, 0, 0.9); text-shadow: 0 0 8px rgba(255, 191, 0, 0.4); }
    50%      { color: rgba(240, 220, 160, 0.5); text-shadow: 0 0 2px rgba(255, 191, 0, 0.1); }
}

.prompt-text {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.78rem;
    color: rgba(240, 236, 230, 0.7);
    line-height: 1.5;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.prompt-text:empty {
    display: none;
}

/* ── Coach line: the decision (headline) and how to make it ── */

.coach-title {
    display: block;
    font-size: 0.92rem;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 1.3;
    color: #ffbf00;
}

/* Headline + (?) on one line; the how-to opens in .coach-tip on hover/tap
   (play.js showCoachTip), so it never takes room from the buttons. */
#prompt-text .coach-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    letter-spacing: 1px;
}

#prompt-text .coach-title-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#prompt-text .coach-how {
    display: none;
}

#prompt-text:has(.coach-help) {
    cursor: help;
}

.coach-help {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 191, 0, 0.75);
    background: rgba(255, 191, 0, 0.12);
    color: #ffcf4a;
    font-family: Arial, sans-serif;
    font-size: 0.66rem;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 1;
    text-shadow: none;
    transition: background-color 0.12s ease-out, transform 0.12s ease-out;
}

@media (hover: hover) {
    #prompt-text:hover .coach-help {
        background: rgba(255, 191, 0, 0.3);
        transform: scale(1.12);
    }
}

/* Touch: a bigger tap target around the little badge */
@media (hover: none) {
    .coach-help {
        width: 20px;
        height: 20px;
        font-size: 0.75rem;
    }
}

.coach-tip {
    position: fixed;
    z-index: 6100;
    max-width: min(260px, calc(100vw - 16px));
    padding: 10px 12px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(34, 26, 12, 0.98), rgba(14, 11, 6, 0.98));
    border: 1px solid rgba(255, 191, 0, 0.55);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6), 0 0 18px rgba(255, 191, 0, 0.15);
    font-family: 'HwyGothic', Arial, sans-serif;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.12s ease-out, transform 0.12s ease-out;
    visibility: hidden;
}

.coach-tip.show {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.coach-tip-title {
    font-size: 0.74rem;
    letter-spacing: 1.5px;
    color: #ffbf00;
    margin-bottom: 4px;
}

.coach-tip-how {
    font-size: 0.74rem;
    line-height: 1.45;
    color: rgba(240, 236, 230, 0.9);
}

/* Capped so a long translation can never push the buttons out of the panel */
.coach-how {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 4px;
    font-size: 0.74rem;
    line-height: 1.45;
    color: rgba(240, 236, 230, 0.78);
}

/* Two actions side by side (DEFEND + RESET): the row takes the button slot, the primary
   action gets the width. The global `button { height: 30px }` must be undone here. */
.action-btn-row {
    flex: 1 1 0;
    min-height: 40px;
    display: flex;
    gap: 8px;
}

.action-btn-row > button {
    height: auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* RESET keeps exactly its label's width; DEFEND takes whatever is left */
.action-btn-row > .btn-confirm {
    flex: 1 1 0;
}

.action-btn-row > .btn-outline {
    flex: 0 0 auto;
    padding: 0 10px;
}

/* A new decision lands with a small pop so a mid-phase handoff is noticed */
.prompt-text.coach-pop {
    animation: coach-pop 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.25);
}

@keyframes coach-pop {
    0%   { opacity: 0; transform: translateY(6px) scale(0.96); }
    100% { opacity: 1; transform: none; }
}

/* ── Waiting on someone else: who, and what they're deciding ── */

.wait-status {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border: 1px dashed rgba(240, 236, 230, 0.16);
    border-radius: 10px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.76rem;
    letter-spacing: 1px;
    line-height: 1.4;
    color: rgba(240, 236, 230, 0.6);
    text-align: center;
}

.wait-dots {
    display: inline-flex;
    gap: 5px;
}

.wait-dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(240, 236, 230, 0.55);
    animation: wait-dot 1.2s ease-in-out infinite;
}

.wait-dots i:nth-child(2) { animation-delay: 0.15s; }
.wait-dots i:nth-child(3) { animation-delay: 0.3s; }

@keyframes wait-dot {
    0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
    40%           { opacity: 1;    transform: translateY(-3px); }
}

/* ── Phase track: the turn's seven phases, done / now / to come ── */

.phase-track {
    display: flex;
    gap: 3px;
    margin: 2px auto 8px;
    max-width: 210px;
}

.ptrack-seg {
    flex: 1 1 0;
    height: 4px;
    border-radius: 2px;
    background: rgba(240, 236, 230, 0.12);
    transition: background 0.3s, flex-grow 0.3s, box-shadow 0.3s;
}

.ptrack-seg.done {
    background: rgba(255, 191, 0, 0.38);
}

.ptrack-seg.now {
    flex-grow: 2.4;
    background: #ffbf00;
    box-shadow: 0 0 8px rgba(255, 191, 0, 0.55);
}

.phase-track.theirs .ptrack-seg.done {
    background: rgba(240, 236, 230, 0.3);
}

.phase-track.theirs .ptrack-seg.now {
    background: rgba(240, 236, 230, 0.8);
    box-shadow: 0 0 6px rgba(240, 236, 230, 0.35);
}

.phase-track.idle {
    visibility: hidden;
}

/* The HUD copy is a slim bar under the phase name; it only exists on phones */
.phase-track-hud {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .prompt-text.coach-pop,
    .wait-dots i {
        animation: none;
    }
}

/* Buttons share the spare height, but never shrink below a comfortable click
   target: min-height auto keeps the column at least as tall as its buttons'
   floors, and on a very short sidebar the action panel scrolls instead of
   squashing them into slivers. */
.action-buttons {
    flex: 1 1 0;
    min-height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.action-panel {
    overflow-y: auto;
    overflow-x: hidden;
}

.action-buttons > .btn-gold,
.action-buttons > .btn-attack,
.action-buttons > .btn-confirm,
.action-buttons > .btn-back-to-lobby {
    flex: 1 1 0;
    min-height: 40px;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-buttons .btn-gold {
    width: 100%;
    text-align: center;
}

/* Secondary prompt actions (RESET, CLEAR, BACK): a solid dark plate with a gold rim. The
   page-wide transparent outline vanished against the board art behind the panel. */
.action-buttons .btn-outline {
    background: linear-gradient(180deg, #2c2116 0%, #17110b 100%);
    border: 1px solid rgba(255, 191, 0, 0.55);
    color: #ffcf4a;
    box-shadow: inset 0 1px 0 rgba(255, 220, 140, 0.08), 0 2px 8px rgba(0, 0, 0, 0.45);
}

.action-buttons .btn-outline:hover {
    border-color: #ffbf00;
    background: linear-gradient(180deg, #3b2c1a 0%, #1f170e 100%);
}

/* Primary prompt actions (DECIDE, CONFIRM, SWITCH…) get a matching rim and a hover lift, so a
   green button beside a rimmed RESET doesn't read as a flat, inert block. */
.action-buttons .btn-confirm {
    border: 1px solid #5fcf6c;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 8px rgba(0, 0, 0, 0.45);
}

.action-buttons .btn-confirm:hover:not(:disabled) {
    background: #36a344;
    border-color: #8ef09a;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 16px rgba(78, 200, 92, 0.5);
}

.action-buttons > .btn-outline {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-height: 34px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-back-to-lobby {
    flex: 1;
    font-size: 0.9rem !important;
    letter-spacing: 2px;
    padding: 20px 24px !important;
}

.btn-attack {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.78rem;
    letter-spacing: 2px;
    color: #fff;
    background: #7a3210;
    border: 1px solid #c8621a;
    border-radius: 6px;
    padding: 10px 24px;
    cursor: pointer;
    width: 100%;
    text-align: center;
    transition: background 0.2s, box-shadow 0.2s;
}

.btn-attack:hover {
    background: #9a4218;
    box-shadow: 0 0 16px rgba(200, 98, 26, 0.45);
}

.btn-attack:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

/* SHADE's SHADED / FACE UP switch: a slim segmented control above PLAY. It
   never flexes, so PLAY and PASS keep their full size beside it. */
.shade-switch {
    flex: 0 0 auto;
    display: flex;
    width: 100%;
    padding: 3px;
    gap: 3px;
    border-radius: 999px;
    background: rgba(20, 12, 32, 0.85);
    border: 1px solid rgba(138, 120, 168, 0.55);
    box-sizing: border-box;
}

.shade-switch-opt {
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    min-height: 36px;
    padding: 8px 4px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: rgba(220, 205, 245, 0.6);
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.shade-switch-opt i {
    margin-right: 4px;
}

.shade-switch-opt:hover:not(.active):not(:disabled) {
    color: #e6dcff;
    background: rgba(138, 120, 168, 0.15);
}

.shade-switch-opt.active {
    color: #fff;
    background: linear-gradient(180deg, #6a4aa0 0%, #45306e 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 10px rgba(140, 100, 220, 0.45);
}

.shade-switch-opt:disabled {
    cursor: not-allowed;
}

/* PLAY under SHADE: the confirm button in SHADE's violet. */
.action-buttons .btn-confirm.btn-confirm-shaded {
    background: #4a2f78;
    border-color: #9a7ad0;
}

.action-buttons .btn-confirm.btn-confirm-shaded:hover:not(:disabled) {
    background: #5b3a92;
    border-color: #c3a8f0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 16px rgba(150, 100, 230, 0.5);
}

.action-buttons .btn-confirm.btn-confirm-shaded:disabled {
    background: #4a2f78;
}

/* SHADE, card picked: PLAY <CARD> with its landing mode as a caption, and a
   square flip button beside it — one row instead of a switch row stacked on a
   PLAY row, so PLAY keeps a full-size target in the short sidebar. */
.shade-play-row {
    flex: 1 1 0;
    min-height: 52px;
    display: flex;
    gap: 6px;
}

.shade-play-row > .btn-confirm {
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    padding: 6px 8px;
}

.btn-confirm-captioned {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    line-height: 1.15;
}

/* Long card names wrap to a second line rather than being cut off */
.btn-confirm-captioned .btn-main {
    max-width: 100%;
    letter-spacing: 1px;
    text-align: center;
    overflow-wrap: anywhere;
}

.btn-confirm-captioned .btn-caption {
    font-size: 0.62rem;
    letter-spacing: 1.5px;
    opacity: 0.8;
    white-space: nowrap;
}

.shade-flip {
    position: relative;
    flex: 0 0 46px;
    height: auto;
    padding: 0;
    border-radius: 6px;
    border: 1px solid rgba(138, 120, 168, 0.6);
    background: rgba(20, 12, 32, 0.85);
    color: #e6dcff;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background-color 0.12s ease-out, border-color 0.12s ease-out, transform 0.12s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.shade-flip.is-shaded {
    background: linear-gradient(180deg, #6a4aa0 0%, #45306e 100%);
    border-color: #9a7ad0;
    color: #fff;
}

/* The little swap arrows say "click to flip" */
.shade-flip-swap {
    position: absolute;
    right: 4px;
    bottom: 4px;
    font-size: 0.55rem;
    opacity: 0.7;
}

@media (hover: hover) {
    .shade-flip:hover {
        border-color: #c3a8f0;
        transform: translateY(-1px);
    }
}

.shade-flip:active {
    transform: scale(0.95);
}

.btn-confirm {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.78rem;
    letter-spacing: 2px;
    color: #fff;
    background: #2e8b3a;
    border: none;
    border-radius: 6px;
    padding: 10px 24px;
    cursor: pointer;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.2s, box-shadow 0.2s;
}

.btn-confirm:hover {
    background: #257a30;
    box-shadow: 0 0 16px rgba(46, 139, 58, 0.35);
}

.btn-confirm:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #2e8b3a;
    box-shadow: none;
}

/* ── FEAST UI ─────────────────────────────────────────────── */

/* EAT n · +treasure: the gem total in its own pill so the payoff reads at a glance. */
.feast-eat-btn {
    gap: 10px;
}

.feast-steal {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
    color: #ffd76a;
    letter-spacing: 1px;
}

.feast-eat-btn:not(:disabled) {
    animation: feast-ready 1.6s ease-in-out infinite;
}

@keyframes feast-ready {
    0%, 100% { box-shadow: 0 0 0 rgba(46, 139, 58, 0); }
    50%      { box-shadow: 0 0 18px rgba(46, 139, 58, 0.55); }
}

/* ── BLOOM UI ─────────────────────────────────────────────── */

.bloom-label {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.62rem;
    letter-spacing: 2px;
    color: rgba(255, 191, 0, 0.55);
    margin-top: 8px;
    margin-bottom: 4px;
}

.bloom-field-space {
    cursor: pointer;
    border: 2px dashed rgba(46, 139, 58, 0.6) !important;
    background: rgba(46, 139, 58, 0.07) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    animation: bloom-space-pulse 1.5s ease-in-out infinite;
    transition: border-color 0.15s, background 0.15s;
}

.bloom-field-space:hover {
    border-color: #2e8b3a !important;
    background: rgba(46, 139, 58, 0.16) !important;
}

.bloom-space-plus {
    font-size: 1.3rem;
    line-height: 1;
    color: rgba(46, 139, 58, 0.85);
}

.bloom-space-hint {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.48rem;
    letter-spacing: 1px;
    color: rgba(46, 139, 58, 0.65);
    text-align: center;
}

@keyframes bloom-space-pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(46, 139, 58, 0.2); }
    50%       { box-shadow: 0 0 16px rgba(46, 139, 58, 0.5); }
}

.bloom-pick-btn {
    width: 100%;
    padding: 9px 12px;
    background: rgba(16, 12, 9, 0.88);
    border: 1px dashed rgba(255, 191, 0, 0.4);
    border-radius: 6px;
    color: rgba(240, 236, 230, 0.75);
    cursor: pointer;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.68rem;
    letter-spacing: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: border-color 0.15s, color 0.15s;
}

.bloom-pick-btn:hover {
    border-color: #ffbf00;
    color: #ffbf00;
}

.bloom-revive-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 7px 10px;
}

.bloom-revive-name {
    flex: 1;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.72rem;
    letter-spacing: 1px;
    color: #ffbf00;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bloom-clear-btn {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 2px;
    flex-shrink: 0;
    transition: color 0.15s;
}

.bloom-clear-btn:hover {
    color: #ff5555;
}

.bloom-target-row {
    display: flex;
    gap: 6px;
}

.bloom-target-btn {
    flex: 1;
    padding: 8px 4px;
    border-radius: 6px;
    border: 2px solid #444;
    background: transparent;
    cursor: pointer;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.6rem;
    letter-spacing: 1px;
    color: #777;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.15s;
}

.bloom-target-btn.active {
    border-color: #ffbf00;
    color: #ffbf00;
    background: rgba(255, 191, 0, 0.08);
}

.bloom-target-btn:hover:not(.active):not(:disabled) {
    border-color: #666;
    color: #aaa;
}

/* ── LOG BOX ──────────────────────────────────────────────── */

.game-friends-box {
    flex: 1 1 0;
    min-height: 0;
    background: rgba(8, 8, 8, 0.88);
    border: 1px solid rgba(255, 191, 0, 0.12);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── PANEL TABS ──────────────────────────────────────────── */

.panel-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255, 191, 0, 0.1);
    margin-bottom: 10px;
    flex-shrink: 0;
}

/* Settings cog pinned to the top-right of the friends/messages/global tab row. */
.panel-tabs-cog {
    margin-left: auto;
    align-self: center;
    background: transparent;
    border: none;
    color: rgba(255, 191, 0, 0.45);
    font-size: 0.8rem;
    padding: 4px 8px;
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
}

.panel-tabs-cog:hover {
    color: #ffbf00;
    transform: rotate(45deg);
}

.panel-tab {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.58rem;
    letter-spacing: 2px;
    color: rgba(255, 191, 0, 0.4);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 5px 12px;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    text-transform: uppercase;
    margin-bottom: -1px;
}

.panel-tab:hover {
    color: rgba(255, 191, 0, 0.7);
}

.panel-tab.active {
    color: #ffbf00;
    border-bottom-color: #ffbf00;
}

/* ── CHAT UI ─────────────────────────────────────────────── */

.chat-messages {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.chat-msg {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.72rem;
    color: rgba(240, 236, 230, 0.6);
    word-break: break-word;
    text-align: left;
}

.chat-msg .chat-username {
    color: #ffbf00;
}

/* Transient notice for rejected chat sends (rate limit, duplicate message, chat ban).
   Fixed toast injected by play.js showChatToast(); sits above the in-game modals (6000). */
#chat-toast {
    position: fixed;
    left: 50%;
    bottom: 90px;
    transform: translateX(-50%) translateY(8px);
    background: rgba(14, 14, 14, 0.95);
    border: 1px solid #ffbf00;
    border-radius: 6px;
    color: #ffbf00;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.85rem;
    padding: 8px 14px;
    max-width: 90vw;
    text-align: center;
    z-index: 7000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
}

#chat-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.chat-input-row {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.chat-input-row input {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.78rem;
    color: #f0ece6;
    background: rgba(20, 18, 14, 0.9);
    border: 1px solid rgba(255, 191, 0, 0.2);
    border-radius: 6px;
    outline: none;
    box-sizing: border-box;
}

.chat-input-row input:focus {
    border-color: rgba(255, 191, 0, 0.45);
}

#menu-pane-messages {
    display: flex;
    flex-direction: column;
}

#dm-conversation-view {
    display: flex;
    flex-direction: column;
}

#menu-pane-global {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
}

/* Equipped decks only render on the stretched desktop panel (see the
   desktop media block, which sets display: flex) */
.panel-decks {
    display: none;
}

/* ── GAME SCREEN FRIENDS BOX ─────────────────────────────── */

.game-friends-box .panel-tabs {
    margin-bottom: 8px;
}

.panel-tabs-stacked {
    display: flex;
    flex-direction: column;
    border-bottom: none;
    gap: 0;
}

.panel-tabs-row {
    display: flex;
    border-bottom: 1px solid rgba(255, 191, 0, 0.1);
}

.panel-tabs-stacked .panel-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 5px 6px;
    font-size: 0.6rem;
    letter-spacing: 1.5px;
    text-align: center;
    white-space: nowrap;
}

.game-tab-pane {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
}

#game-friends-list {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}

#game-pane-chat .chat-messages {
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
}

.log-entries {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.log-entry {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.7rem;
    color: rgba(240, 236, 230, 0.55);
    line-height: 1.4;
    padding: 2px 0;
    border-bottom: 1px solid rgba(255, 191, 0, 0.04);
}


/* ── BOARD ZONES (game version) ───────────────────────────── */

.game-layout .zone {
    border-radius: 10px;
    border: 1px solid rgba(255, 191, 0, 0.12);
    position: relative;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.game-layout .zone-label {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.48rem;
    letter-spacing: 3px;
    color: rgba(255, 191, 0, 0.3);
    text-transform: uppercase;
    pointer-events: none;
    user-select: none;
}

/* ── PLAYER LABELS ────────────────────────────────────────── */

/* Player plaque beside each battlefield: avatar medallion, then name over
   treasure + spaces, on a smoked-glass pill with a gold hairline. */
.field-player-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(10 * var(--bu, 1px));
    padding: calc(5 * var(--bu, 1px)) calc(16 * var(--bu, 1px)) calc(5 * var(--bu, 1px)) calc(5 * var(--bu, 1px));
    margin-left: calc(8 * var(--bu, 1px));
    flex-shrink: 0;
    max-width: 46%;
    user-select: none;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(20, 15, 8, 0.85), rgba(10, 8, 6, 0.55));
    border: 1px solid rgba(255, 191, 0, 0.16);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 220, 150, 0.05);
}

.fp-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(3 * var(--bu, 1px));
    min-width: 0;
}

.fp-name-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
}

/* Avatar medallion. --ring is the side's colour; the gradient border is drawn
   by the padding box, the picture (or initial) sits inside it. */
.fp-avatar {
    --ring: 255, 191, 0;
    position: relative;
    flex-shrink: 0;
    width: calc(50 * var(--bu, 1px));
    height: calc(50 * var(--bu, 1px));
    border-radius: 50%;
    padding: calc(2.5 * var(--bu, 1px));
    background: linear-gradient(145deg, rgba(var(--ring), 0.95), rgba(var(--ring), 0.35));
    box-shadow: 0 0 12px rgba(var(--ring), 0.35), 0 4px 10px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}

.fp-avatar.fp-role-me   { --ring: 90, 170, 255; }
.fp-avatar.fp-role-opp  { --ring: 230, 80, 70; }
.fp-avatar.fp-role-mate { --ring: 80, 200, 120; }

.fp-avatar img,
.fp-avatar .fp-initial {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 50%;
    object-fit: cover;
    background: radial-gradient(circle at 50% 30%, #2a2116, #0c0a07 75%);
    font-family: 'DragonSlayer', serif;
    font-size: calc(22 * var(--bu, 1px));
    color: rgb(var(--ring));
    text-shadow: 0 0 8px rgba(var(--ring), 0.6);
    box-sizing: border-box;
}

.fp-avatar.has-img .fp-initial { display: none; }

/* Avatar art is a wide framed plate (1.81:1) with the subject on the left and an empty info
   panel on the right. A centred circle crop showed mostly that empty panel; anchor the crop on
   the subject instead. No level number here: on the board it could be misread as treasure. */
.fp-avatar img { object-position: 18% 50%; }

/* Their turn: a gold arc sweeps around the medallion and it breathes */
.fp-avatar.fp-turn::before {
    content: '';
    position: absolute;
    inset: calc(-4 * var(--bu, 1px));
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(255, 191, 0, 0) 0deg, rgba(255, 220, 120, 0.95) 70deg, rgba(255, 191, 0, 0) 140deg,
        rgba(255, 191, 0, 0) 180deg, rgba(255, 220, 120, 0.95) 250deg, rgba(255, 191, 0, 0) 320deg);
    -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%);
    mask: radial-gradient(circle, transparent 60%, #000 62%);
    animation: fp-turn-spin 2.4s linear infinite;
}

.fp-avatar.fp-turn {
    animation: fp-turn-glow 2s ease-in-out infinite;
}

@keyframes fp-turn-spin {
    to { transform: rotate(360deg); }
}

@keyframes fp-turn-glow {
    0%, 100% { box-shadow: 0 0 12px rgba(255, 191, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.5); }
    50%      { box-shadow: 0 0 22px rgba(255, 191, 0, 0.75), 0 4px 10px rgba(0, 0, 0, 0.5); }
}

/* Mobile: the info chip moves outside its field row (placeFieldPlayerInfo
   in play.js) and becomes a slim centred bar so the spaces get the width */
.field-player-info.field-info-bar {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 8px;
    margin: 0;
    max-width: none;
    min-height: 14px;
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.field-info-bar .fp-body {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.field-info-bar .fp-avatar {
    width: 22px;
    height: 22px;
    padding: 1.5px;
}

.field-info-bar .fp-avatar .fp-initial {
    font-size: 11px;
}

.field-info-bar .fp-avatar.fp-turn::before {
    inset: -3px;
}

.field-player-name {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.66rem;
    letter-spacing: 3px;
    color: rgba(255, 191, 0, 0.75);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
    .fp-avatar.fp-turn, .fp-avatar.fp-turn::before { animation: none; }
}

.player-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.55rem;
    color: rgba(240, 236, 230, 0.35);
    letter-spacing: 1px;
}

.treasure-display {
    font-size: 0.75rem;
    color: #ffbf00;
    font-family: 'DragonSlayer', serif;
    letter-spacing: 2px;
    text-shadow: 0 0 6px rgba(255, 191, 0, 0.3);
}

.treasure-display .fa-gem {
    font-size: 0.65rem;
    margin-right: 3px;
}

.treasure-gained {
    animation: treasure-gain-anim 1.2s ease-out;
}

.treasure-lost {
    animation: treasure-loss-anim 1.2s ease-out;
}

@keyframes treasure-gain-anim {
    0% {
        transform: scale(1);
        color: #ffbf00;
        text-shadow: 0 0 6px rgba(255, 191, 0, 0.3);
    }
    15% {
        transform: scale(1.5);
        color: #fff;
        text-shadow: 0 0 20px rgba(255, 215, 0, 1), 0 0 40px rgba(255, 191, 0, 0.8), 0 0 60px rgba(255, 160, 0, 0.5);
    }
    30% {
        transform: scale(1.25);
        color: #ffe066;
        text-shadow: 0 0 16px rgba(255, 215, 0, 0.9), 0 0 30px rgba(255, 191, 0, 0.6);
    }
    50% {
        transform: scale(1.35);
        color: #ffd700;
        text-shadow: 0 0 12px rgba(255, 215, 0, 0.7), 0 0 25px rgba(255, 191, 0, 0.5);
    }
    100% {
        transform: scale(1);
        color: #ffbf00;
        text-shadow: 0 0 6px rgba(255, 191, 0, 0.3);
    }
}

@keyframes treasure-loss-anim {
    0% {
        transform: scale(1) translateX(0);
        color: #ffbf00;
        text-shadow: 0 0 6px rgba(255, 191, 0, 0.3);
    }
    10% {
        transform: scale(0.8) translateX(-4px);
        color: #ff4444;
        text-shadow: 0 0 15px rgba(255, 50, 50, 0.8), 0 0 30px rgba(200, 0, 0, 0.5);
    }
    20% {
        transform: scale(0.85) translateX(4px);
        color: #ff3333;
        text-shadow: 0 0 12px rgba(255, 50, 50, 0.7);
    }
    30% {
        transform: scale(0.8) translateX(-3px);
        color: #ff4444;
    }
    45% {
        transform: scale(0.9) translateX(0);
        color: #cc3300;
        text-shadow: 0 0 8px rgba(200, 50, 0, 0.5);
    }
    100% {
        transform: scale(1) translateX(0);
        color: #ffbf00;
        text-shadow: 0 0 6px rgba(255, 191, 0, 0.3);
    }
}

.space-display {
    font-size: 0.55rem;
    color: rgba(240, 236, 230, 0.35);
}

.label-clickable {
    cursor: pointer;
    color: #ffbf00;
    text-shadow: 0 0 10px rgba(255, 191, 0, 0.7), 0 0 20px rgba(255, 191, 0, 0.4);
    animation: label-pulse 1.2s ease-in-out infinite;
    transition: color 0.2s, text-shadow 0.2s;
    border-radius: 4px;
    padding: 1px 4px;
    background: rgba(255, 191, 0, 0.08);
    outline: 1px solid rgba(255, 191, 0, 0.3);
}

.label-clickable:hover {
    color: #fff;
    background: rgba(255, 191, 0, 0.18);
    text-shadow: 0 0 18px rgba(255, 191, 0, 1), 0 0 30px rgba(255, 191, 0, 0.6);
    outline-color: rgba(255, 191, 0, 0.7);
}

.label-click-arrow {
    display: inline-block;
    color: #ffbf00;
    font-size: 1.1em;
    font-weight: bold;
    animation: arrow-bounce 0.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes arrow-bounce {
    0%, 100% { transform: translateX(0);   opacity: 1; }
    50%       { transform: translateX(4px); opacity: 0.6; }
}

@keyframes label-pulse {
    0%, 100% { text-shadow: 0 0 8px rgba(255, 191, 0, 0.5),  0 0 16px rgba(255, 191, 0, 0.2); }
    50%       { text-shadow: 0 0 14px rgba(255, 191, 0, 0.9), 0 0 28px rgba(255, 191, 0, 0.5); }
}

/* ── HAND ZONE ────────────────────────────────────────────── */

.game-layout .hand-zone {
    flex: 1;
    min-height: calc(104 * var(--bu, 1px));
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    gap: 4px;
    padding: 6px 12px;
}

.game-layout .hand-zone .zone-label {
    margin-left: auto;
}

/* ── DECK ZONE ────────────────────────────────────────────── */

/* Card-shaped slots: DECK, EXILE, GRAVEYARD. Same aspect ratio as the field
   spaces, showing a stacked card back + count when occupied. */
.game-layout .deck-zone,
.game-layout .pile-zone {
    width: calc(82 * var(--bu, 1px));
    height: calc(116 * var(--bu, 1px));
    min-width: 0;
    flex-shrink: 0;
    padding: 0;
    gap: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
}

/* Card back + count are both centred within the "card area" (the slot minus
   the bottom label band) so the count sits in the middle of the card image
   rather than the middle of the whole zone — and stays concentric at any size. */
.deck-back-img {
    position: absolute;
    top: 0;
    bottom: calc(14 * var(--bu, 1px));
    left: 0;
    right: 0;
    margin: auto;
    width: calc(70 * var(--bu, 1px));
    height: calc(98 * var(--bu, 1px));
    object-fit: cover;
    border-radius: 5px;
    border: none;
    display: block;
}

.deck-count,
.pile-count {
    font-family: 'DragonSlayer', serif;
    font-size: 1.4rem;
    color: #ffbf00;
    position: absolute;
    top: 0;
    bottom: calc(14 * var(--bu, 1px));
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.95), 0 0 12px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

/* Zone name pinned as a small caption at the bottom of the slot. */
.game-layout .deck-zone .zone-label,
.game-layout .pile-zone .zone-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3px;
    z-index: 4;
    text-align: center;
    font-size: 0.42rem;
    letter-spacing: 1px;
    white-space: nowrap;
    text-shadow: 0 0 4px #000, 0 1px 2px #000;
}

/* ── DECK VIEWER MODAL ────────────────────────────────────── */


.deck-viewer-inline {
    flex: 1;
    min-height: 0;
    padding: 12px;
    overflow-y: auto;
}

.deck-viewer-panel {
    background: rgba(14, 14, 14, 0.97);
    border: 1px solid rgba(255, 191, 0, 0.25);
    border-radius: 14px;
    padding: 20px 24px;
    max-width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
}

.deck-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.deck-viewer-header h3 {
    font-family: 'DragonSlayer', serif;
    color: #ffbf00;
    font-size: 1.1rem;
    letter-spacing: 3px;
    margin: 0;
}

.deck-viewer-close {
    font-size: 1.4rem;
    background: none;
    border: none;
    color: rgba(240, 236, 230, 0.5);
    cursor: pointer;
    padding: 0 6px;
    line-height: 1;
}

.deck-viewer-close:hover {
    color: #ffbf00;
}

.deck-viewer-hint {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.72rem;
    color: rgba(240, 236, 230, 0.4);
    margin-bottom: 14px;
}

.deck-viewer-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.deck-viewer-card-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.deck-viewer-pos {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.6rem;
    color: rgba(255, 191, 0, 0.45);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.deck-viewer-card.game-card {
    width: 62px;
    height: 87px;
}

.deck-viewer-card.game-card img {
    width: 100%;
    height: 100%;
}

/* ── OPP/PLR SECTIONS ─────────────────────────────────────── */

#board-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.game-layout .opp-section {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.game-layout .opp-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.game-layout .plr-section {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.game-layout .plr-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.game-layout .plr-section {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.game-layout .plr-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

/* ── FIELD ROW ────────────────────────────────────────────── */

.game-layout .field-row {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.field-clickable {
    cursor: pointer;
    border-color: rgba(255, 191, 0, 0.55) !important;
    box-shadow: 0 0 18px rgba(255, 191, 0, 0.2);
    background: rgba(255, 191, 0, 0.04);
    animation: field-pulse 1.6s ease-in-out infinite;
}

.field-clickable:hover {
    border-color: #ffbf00 !important;
    box-shadow: 0 0 28px rgba(255, 191, 0, 0.35);
    background: rgba(255, 191, 0, 0.08);
}

@keyframes field-pulse {
    0%, 100% { box-shadow: 0 0 18px rgba(255, 191, 0, 0.2); }
    50% { box-shadow: 0 0 28px rgba(255, 191, 0, 0.35); }
}

.game-layout .field-space {
    width: calc(68 * var(--bu, 1px));
    height: calc(95 * var(--bu, 1px));
    max-height: 100%;
    border-radius: 7px;
    border: 1px dashed rgba(255, 191, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

/* Active SPACE skin painted behind the card slot (set inline by play.js). The
   dashed placeholder border becomes a solid gold frame once a skin is shown. */
.game-layout .field-space.has-skin {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-style: solid;
    border-color: rgba(255, 191, 0, 0.30);
}

/* Active LOOP skin painted behind the loop strip's cards (set inline by play.js). */
.game-layout .loop-zone.has-skin {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-color: rgba(255, 191, 0, 0.35);
}

.space-clickable {
    cursor: pointer;
    border-color: rgba(255, 68, 68, 0.6) !important;
    border-style: solid !important;
    box-shadow: 0 0 12px rgba(255, 68, 68, 0.25);
    background: rgba(255, 68, 68, 0.06);
    animation: space-pulse 1.6s ease-in-out infinite;
}

.space-clickable:hover {
    border-color: #ff4444 !important;
    box-shadow: 0 0 20px rgba(255, 68, 68, 0.4);
    background: rgba(255, 68, 68, 0.12);
}

/* A card sitting on a clickable space (e.g. the VOID space pick) must show
   the pointer cursor too — the card is the element under the pointer and its
   own `cursor: default` otherwise keeps the arrow even though the space
   beneath it is clickable. */
.space-clickable .game-card {
    cursor: pointer;
}

@keyframes space-pulse {
    0%, 100% { box-shadow: 0 0 12px rgba(255, 68, 68, 0.2); }
    50% { box-shadow: 0 0 20px rgba(255, 68, 68, 0.4); }
}

/* ── MIDDLE SECTION ───────────────────────────────────────── */

.game-layout .mid-section {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: visible;
}

/* Exile + graveyard sit side by side (exile, then graveyard), each the same
   fixed height as the loop, to the left of it. */
.game-layout .shared-column {
    display: flex;
    flex-direction: row;
    gap: 4px;
    flex-shrink: 0;
    align-items: center;
    height: calc(118 * var(--bu, 1px));
}

.game-layout .shared-column .pile-zone {
    height: calc(116 * var(--bu, 1px));
}

/* ── EFFECTS LIST (right panel) ───────────────────────────── */

.effects-panel {
    flex-shrink: 0;
    background: rgba(8, 8, 8, 0.88);
    border: 1px solid rgba(255, 191, 0, 0.12);
    border-radius: 12px;
    padding: 10px 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 160px;
}

.effects-panel:has(.effects-list:empty) {
    display: none;
}

.effects-list {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    min-height: 0;
}

.effect-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 6px 3px 4px;
    border-radius: 5px;
    background: rgba(14, 14, 14, 0.9);
    border: 1px solid rgba(255, 191, 0, 0.12);
    border-left-width: 3px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.62rem;
    letter-spacing: 1px;
    white-space: nowrap;
}

.effect-chip.effect-mine {
    border-left-color: #4a9eff;
}

.effect-chip.effect-opp {
    border-left-color: #e05050;
}

.effect-chip.effect-both {
    border-left-color: #ffbf00;
}

/* 2v2 teammate: the same green as the teammate's seat pill */
.effect-chip.effect-ally {
    border-left-color: #3fbf6a;
}

.effect-chip.effect-disabled {
    opacity: 0.35;
}

.effect-type {
    color: rgba(240, 236, 230, 0.85);
    font-weight: bold;
    font-size: 0.62rem;
}

.effect-owner {
    font-size: 0.55rem;
    letter-spacing: 1.5px;
    padding: 1px 4px;
    border-radius: 3px;
}

.effect-owner.owner-mine {
    color: #4a9eff;
    background: rgba(74, 158, 255, 0.12);
}

.effect-owner.owner-opp {
    color: #e05050;
    background: rgba(224, 80, 80, 0.12);
}

.effect-owner.owner-both {
    color: #ffbf00;
    background: rgba(255, 191, 0, 0.1);
}

.effect-owner.owner-ally {
    color: #6fe08a;
    background: rgba(40, 165, 80, 0.14);
}

.effect-duration {
    font-size: 0.6rem;
    color: rgba(240, 236, 230, 0.35);
    margin-left: auto;
}

/* .pile-zone layout is defined with .deck-zone above (unified card slot). */

.game-layout .loop-zone {
    flex: 1;
    height: calc(104 * var(--bu, 1px));
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    padding: 6px 14px;
    background: rgba(255, 191, 0, 0.02);
    border-color: rgba(255, 191, 0, 0.18);
}

.game-layout .loop-zone::-webkit-scrollbar {
    display: none;
}

.game-layout .loop-zone .zone-label {
    margin-left: auto;
    font-size: 0.55rem;
    letter-spacing: 5px;
    position: relative;
    z-index: 20;
    flex-shrink: 0;
}

/* ── CARD (game version) ──────────────────────────────────── */

.game-card {
    width: calc(62 * var(--bu, 1px));
    height: calc(87 * var(--bu, 1px));
    border-radius: 5px;
    /* Transparent resting border (keeps the 1px so state colors below still
       show) — removes the faint decorative outline around cards. */
    border: 1px solid transparent;
    background: rgba(20, 18, 14, 0.9);
    flex-shrink: 0;
    position: relative;
    cursor: default;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.game-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
    /* Clip image corners to border-radius without overflow:hidden on parent */
    clip-path: inset(0 round 4px);
}

.game-card.face-down {
    background: linear-gradient(135deg, rgba(30, 25, 10, 0.95), rgba(15, 12, 5, 0.95));
    border-color: transparent;
    background-image: repeating-linear-gradient(45deg,
        rgba(255, 191, 0, 0.04) 0px, rgba(255, 191, 0, 0.04) 1px,
        transparent 1px, transparent 8px);
}

.game-card.selectable {
    cursor: pointer;
    border-color: rgba(255, 191, 0, 0.6);
    box-shadow: 0 0 10px rgba(255, 191, 0, 0.15);
}

.game-card.selectable:hover {
    transform: translateY(-6px) scale(1.04);
    box-shadow: 0 4px 20px rgba(255, 191, 0, 0.35), 0 0 8px rgba(255, 191, 0, 0.2);
    border-color: #ffbf00;
}

.game-card.selected {
    border: 2px solid #ffbf00;
    box-shadow: 0 0 14px rgba(255, 191, 0, 0.6), 0 0 28px rgba(255, 191, 0, 0.25), inset 0 0 6px rgba(255, 191, 0, 0.15);
    transform: translateY(-6px) scale(1.06);
    outline: 2px solid rgba(255, 191, 0, 0.4);
    outline-offset: 1px;
}

/* Keep selected appearance when hovering a selected card */
.game-card.selected.selectable:hover {
    box-shadow: 0 0 14px rgba(255, 191, 0, 0.6), 0 0 28px rgba(255, 191, 0, 0.25), inset 0 0 6px rgba(255, 191, 0, 0.15);
    border-color: #ffbf00;
}

/* Attacking = molten ember menace: crisp hot rim, deep blood-red bloom,
   slow ominous breathing with a faint inner burn. No jitter — dread, not
   campfire. */
.game-card.attacking {
    border-color: #ff4400;
    border-width: 2px;
    animation: attacking-ember 1.8s ease-in-out infinite;
    position: relative;
    z-index: 2;
}

/* Smouldering heat aura behind the card */
.game-card.attacking::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(ellipse at 50% 55%,
        rgba(255, 50, 0, 0.45) 0%,
        rgba(170, 10, 0, 0.28) 45%,
        transparent 75%);
    filter: blur(6px);
    animation: ember-breathe 1.8s ease-in-out infinite;
}

@keyframes attacking-ember {
    0%, 100% {
        border-color: #e03a00;
        box-shadow:
            0 0 5px rgba(255, 80, 0, 0.9),
            0 0 16px rgba(255, 40, 0, 0.55),
            0 0 34px rgba(190, 0, 0, 0.35),
            inset 0 0 10px rgba(255, 60, 0, 0.25);
    }
    50% {
        border-color: #ff5a00;
        box-shadow:
            0 0 9px rgba(255, 110, 20, 1),
            0 0 26px rgba(255, 60, 0, 0.75),
            0 0 50px rgba(210, 0, 0, 0.5),
            inset 0 0 16px rgba(255, 80, 0, 0.4);
    }
}

@keyframes ember-breathe {
    0%, 100% { opacity: 0.7;  transform: scale(0.98); }
    50%      { opacity: 1;    transform: scale(1.04); }
}

/* ── Exhausted cards ─────────────────────────────────────────
   Cards that have already acted this turn. The old opacity fade let the
   field-space skin show through the card art; instead the card stays fully
   opaque and reads "spent": desaturated darkened art, a smoky veil with a
   crescent-moon watermark, and a slight resting tilt. Every rule is gated
   on :not(.attacking) so attackers always render at full strength. */
.game-card.exhausted:not(.attacking) {
    transform: rotate(-4deg) scale(0.97);
}

.game-card.exhausted:not(.attacking) img {
    filter: grayscale(0.85) brightness(0.62) contrast(0.95);
}

/* Face-down exhausted cards have no face art — dim the card-back itself */
.game-card.exhausted.face-down:not(.attacking) {
    filter: brightness(0.7);
}

/* Ancient sealed by its own Enduring "cannot attack" (BEGIN / EXODUS / GENESIS while
   NULL isn't active), shown while picking attackers: dimmed, a cold violet rune ring
   turning slowly around it, and a lock pulsing in the middle. Unclickable on purpose
   (play.js isCardSelectable mirrors AttackAction.validate). */
@property --seal-a {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.game-card.attack-sealed {
    cursor: not-allowed;
    box-shadow: 0 0 12px rgba(150, 130, 255, 0.45),
                inset 0 0 16px rgba(120, 100, 255, 0.35);
}

.game-card.attack-sealed img {
    filter: saturate(0.45) brightness(0.7);
}

.game-card.attack-sealed::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 7px;
    padding: 2px;
    background: conic-gradient(from var(--seal-a),
        rgba(170, 150, 255, 0) 0deg, rgba(200, 185, 255, 0.95) 50deg, rgba(170, 150, 255, 0) 110deg,
        rgba(170, 150, 255, 0) 180deg, rgba(200, 185, 255, 0.95) 230deg, rgba(170, 150, 255, 0) 290deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: attack-seal-spin 3.2s linear infinite;
    pointer-events: none;
    z-index: 3;
}

.game-card.attack-sealed::after {
    content: '\f023'; /* Font Awesome lock */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    inset: 0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: rgba(215, 205, 255, 0.9);
    text-shadow: 0 0 10px rgba(140, 115, 255, 0.95), 0 0 2px rgba(0, 0, 0, 0.9);
    animation: attack-seal-lock 2.4s ease-in-out infinite;
    pointer-events: none;
    z-index: 3;
}

/* Any card the current prompt won't let you pick (PRUNE-blocked hand card, sealed
   Ancient): not-allowed cursor plus a hover tip explaining why (play.js
   blockedPickReason / showBlockedTip). */
.game-card.pick-blocked {
    cursor: not-allowed;
}

.blocked-pick-tip {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10050;
    max-width: 240px;
    padding: 7px 11px;
    border-radius: 6px;
    border: 1px solid rgba(255, 110, 90, 0.55);
    background: rgba(22, 14, 12, 0.96);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
    color: #f6e6dc;
    font-size: 0.78rem;
    line-height: 1.3;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s;
}

.blocked-pick-tip.show {
    opacity: 1;
}

@keyframes attack-seal-spin {
    to { --seal-a: 360deg; }
}

@keyframes attack-seal-lock {
    0%, 100% { opacity: 0.65; transform: scale(0.94); }
    50%      { opacity: 1;    transform: scale(1.04); }
}

.game-card.exhausted:not(.attacking)::after {
    content: '\263E'; /* crescent moon */
    position: absolute;
    inset: 0;
    border-radius: 4px;
    background: linear-gradient(160deg, rgba(8, 8, 12, 0.4), rgba(8, 8, 12, 0.66));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: rgba(255, 191, 0, 0.45);
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.9);
    pointer-events: none;
    z-index: 2;
}

/* Keep the power readout legible above the veil */
.game-card.exhausted:not(.attacking) .card-power {
    z-index: 3;
    color: rgba(255, 191, 0, 0.75);
}

/* ── Ability-state indicators (WILD / ZOMBIE / SHADED) ──────────────────
   WILD = mystical purple glow (the chameleon copy of a battlefield card).
   ZOMBIE = sickly green glow (raised from the graveyard).
   SHADED = soft indigo aura — opponent sees this loop card face-down even
   though we (the owner / revealedTo viewers) can see it. The badges stack
   on the same corner as defend-badge but use distinct hues + glyphs. */
/* No !important here — the running keyframe animation overrides loop-owner-plr's
   static box-shadow on its own (animations beat normal author rules), and
   !important would actually block the keyframe from animating box-shadow at all. */
.game-card.card-wild {
    box-shadow: 0 0 14px rgba(170, 90, 255, 0.6),
                0 0 28px rgba(170, 90, 255, 0.35);
    animation: wild-pulse 1.8s ease-in-out infinite;
}

.game-card.card-zombie {
    box-shadow: 0 0 14px rgba(60, 200, 110, 0.6),
                0 0 28px rgba(60, 200, 110, 0.32);
    animation: zombie-pulse 2.1s ease-in-out infinite;
}

.game-card.card-shaded {
    box-shadow: 0 0 12px rgba(110, 90, 200, 0.55),
                0 0 24px rgba(80, 60, 160, 0.4);
    animation: shaded-pulse 2.4s ease-in-out infinite;
}

/* Wild + Zombie can't be active together but keep the rule defensive: stack
   the glows so neither is silently overridden if both ever land at once. */
.game-card.card-wild.card-zombie {
    box-shadow: 0 0 14px rgba(170, 90, 255, 0.5),
                0 0 14px rgba(60, 200, 110, 0.5),
                0 0 28px rgba(120, 140, 180, 0.4);
}

@keyframes wild-pulse {
    0%, 100% { box-shadow: 0 0 12px rgba(170, 90, 255, 0.5),
                            0 0 22px rgba(170, 90, 255, 0.28); }
    50%      { box-shadow: 0 0 18px rgba(170, 90, 255, 0.75),
                            0 0 36px rgba(170, 90, 255, 0.5); }
}

@keyframes zombie-pulse {
    0%, 100% { box-shadow: 0 0 12px rgba(60, 200, 110, 0.5),
                            0 0 22px rgba(60, 200, 110, 0.25); }
    50%      { box-shadow: 0 0 18px rgba(60, 200, 110, 0.75),
                            0 0 36px rgba(60, 200, 110, 0.45); }
}

@keyframes shaded-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(110, 90, 200, 0.45),
                            0 0 20px rgba(80, 60, 160, 0.3); }
    50%      { box-shadow: 0 0 16px rgba(110, 90, 200, 0.7),
                            0 0 30px rgba(80, 60, 160, 0.5); }
}

/* Small badge glyphs in the top-left corner. Defend badge already lives in
   the top-right (per defend-badge rule below), so these don't collide. */
.ability-badge {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    pointer-events: none;
    z-index: 6;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.4);
}

.ability-badge-wild {
    background: radial-gradient(circle at 35% 35%, #c89bff 0%, #8a3fdb 70%);
    box-shadow: 0 0 6px rgba(170, 90, 255, 0.8);
}

.ability-badge-zombie {
    background: radial-gradient(circle at 35% 35%, #9be8b3 0%, #2e8c4f 70%);
    box-shadow: 0 0 6px rgba(60, 200, 110, 0.8);
}

.ability-badge-shaded {
    background: radial-gradient(circle at 35% 35%, #8e7ec8 0%, #463b7a 70%);
    box-shadow: 0 0 6px rgba(110, 90, 200, 0.8);
    /* Eye glyph is a hair too tall for the badge — nudge it up. */
    font-size: 10px;
    line-height: 18px;
}

/* "Opponent can see this card" — gold eye on the player's own hand cards. */
.ability-badge-seen {
    background: radial-gradient(circle at 35% 35%, #ffe08a 0%, #d99a00 70%);
    box-shadow: 0 0 6px rgba(255, 191, 0, 0.85);
    /* Eye glyph runs a touch tall for the badge — nudge it to center. */
    font-size: 11px;
    line-height: 18px;
    animation: seen-badge-pulse 1.8s ease-in-out infinite;
}

@keyframes seen-badge-pulse {
    0%, 100% { box-shadow: 0 0 5px rgba(255, 191, 0, 0.6); }
    50% { box-shadow: 0 0 10px rgba(255, 191, 0, 1); }
}

/* Stack additional badges horizontally so multiple ability states stay legible. */
.ability-badge ~ .ability-badge { left: 25px; }
.ability-badge ~ .ability-badge ~ .ability-badge { left: 47px; }

.game-card.defend-target {
    cursor: pointer;
    border-color: #ff4444 !important;
    animation: defend-target-pulse 1.2s ease-in-out infinite;
}

.game-card.defend-target:hover {
    transform: translateY(-6px) scale(1.04);
    box-shadow: 0 4px 20px rgba(255, 68, 68, 0.6) !important;
}

@keyframes defend-target-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 68, 68, 0.3); }
    50%       { box-shadow: 0 0 22px rgba(255, 68, 68, 0.7); }
}

/* TERRAFORM uses violet/magenta to differentiate from defend (blue) and
   attack/damage (orange-red). Step 1's selected own space gets the same
   violet so the entire swap flow reads as one cohesive interaction. */
.field-space.terraform-selected {
    border-color: rgba(186, 104, 255, 0.8) !important;
    background: rgba(186, 104, 255, 0.12) !important;
    box-shadow: 0 0 18px rgba(186, 104, 255, 0.45);
}

.field-space.terraform-target {
    cursor: pointer;
    border-color: rgba(186, 104, 255, 0.7) !important;
    background: rgba(186, 104, 255, 0.06) !important;
    animation: terraform-target-pulse 1.2s ease-in-out infinite;
}

.field-space.terraform-target:hover {
    background: rgba(186, 104, 255, 0.18) !important;
    box-shadow: 0 0 26px rgba(186, 104, 255, 0.6) !important;
}

@keyframes terraform-target-pulse {
    0%, 100% { box-shadow: 0 0 12px rgba(186, 104, 255, 0.3); }
    50%      { box-shadow: 0 0 24px rgba(186, 104, 255, 0.7); }
}

.field-space.bloom2-selected {
    border-color: rgba(220, 60, 60, 0.8) !important;
    background: rgba(180, 30, 30, 0.12) !important;
    box-shadow: 0 0 14px rgba(220, 60, 60, 0.35);
    position: relative;
}

.field-space.bloom2-selected::after {
    content: '\00D7';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    font-weight: bold;
    color: rgba(220, 60, 60, 0.85);
    pointer-events: none;
    z-index: 4;
}

.game-card.defend-pending {
    border-color: #4fc3f7;
    border-width: 2px;
    transform: translateY(-4px);
    animation: shield-pulse 1.4s ease-in-out infinite;
    outline: 2px solid rgba(79, 195, 247, 0.3);
    outline-offset: 2px;
}

@keyframes shield-pulse {
    0%, 100% {
        box-shadow:
            0 0 8px rgba(79, 195, 247, 0.4),
            0 0 20px rgba(79, 195, 247, 0.15),
            inset 0 0 10px rgba(79, 195, 247, 0.12);
        outline-color: rgba(79, 195, 247, 0.2);
    }
    50% {
        box-shadow:
            0 0 14px rgba(79, 195, 247, 0.6),
            0 0 32px rgba(79, 195, 247, 0.25),
            inset 0 0 16px rgba(79, 195, 247, 0.2);
        outline-color: rgba(79, 195, 247, 0.5);
    }
}

/* Defending = icy frost: pale crystalline rim, cold blue-white bloom.
   Mirrors the attacker's ember treatment so the two read as a matched
   fire-vs-ice pair on the board. */
.game-card.defend-assigned {
    border-color: #7fdcff;
    border-width: 2px;
    animation: defending-frost 2.2s ease-in-out infinite;
    position: relative;
    z-index: 2;
}

/* Cold aura behind the card */
.game-card.defend-assigned::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(ellipse at 50% 45%,
        rgba(130, 220, 255, 0.4) 0%,
        rgba(30, 110, 200, 0.22) 45%,
        transparent 75%);
    filter: blur(6px);
    animation: frost-breathe 2.2s ease-in-out infinite;
}

@keyframes defending-frost {
    0%, 100% {
        border-color: #5cc8f0;
        box-shadow:
            0 0 5px rgba(160, 230, 255, 0.85),
            0 0 16px rgba(80, 180, 255, 0.5),
            0 0 32px rgba(10, 90, 190, 0.3),
            inset 0 0 10px rgba(150, 230, 255, 0.22);
    }
    50% {
        border-color: #9ae8ff;
        box-shadow:
            0 0 9px rgba(210, 245, 255, 0.95),
            0 0 26px rgba(110, 200, 255, 0.65),
            0 0 46px rgba(20, 110, 210, 0.45),
            inset 0 0 16px rgba(170, 235, 255, 0.35);
    }
}

@keyframes frost-breathe {
    0%, 100% { opacity: 0.7; transform: scale(0.98); }
    50%      { opacity: 1;   transform: scale(1.04); }
}

.game-card.defend-targeted {
    border-color: #ff9800;
    box-shadow: 0 0 10px rgba(255, 152, 0, 0.3);
}

.game-card.damage-attacker-selected {
    border-color: #c8621a;
    box-shadow: 0 0 18px rgba(200, 98, 26, 0.6);
    transform: translateY(-4px);
}

.game-card.damage-ordered {
    border-color: #a0522d;
    box-shadow: 0 0 12px rgba(160, 82, 45, 0.45);
    opacity: 0.75;
}

.damage-defender-badge {
    font-size: 0.65rem;
    bottom: 18px;
}

.damage-order-badge {
    top: 2px;
    left: 2px;
    bottom: auto;
    right: auto;
    font-size: 0.65rem;
    background: rgba(200, 98, 26, 0.9);
    min-width: 16px;
    text-align: center;
}

.defend-summary {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.7rem;
    color: rgba(240, 236, 230, 0.6);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.defend-row {
    padding: 4px 8px;
    background: rgba(76, 175, 80, 0.08);
    border: 1px solid rgba(76, 175, 80, 0.2);
    border-radius: 4px;
}

.defend-hint {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.72rem;
    color: #4fc3f7;
    text-align: center;
    animation: pulse 2s infinite;
}

.defend-badge {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.45rem;
    letter-spacing: 0.5px;
    padding: 1px 4px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 3;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.defend-badge-def {
    bottom: -12px;
    color: #e8f9ff;
    background: rgba(25, 120, 195, 0.9);
}

.defend-badge-atk {
    top: -12px;
    color: #fff;
    background: rgba(200, 45, 0, 0.9);
}

.game-card .card-power {
    position: absolute;
    bottom: 2px;
    right: 3px;
    font-family: 'DragonSlayer', serif;
    font-size: 0.6rem;
    color: #ffbf00;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
    background: rgba(0, 0, 0, 0.6);
    padding: 1px 4px;
    border-radius: 3px;
    line-height: 1;
}

/* Loop ownership indicators */
.loop-arrow {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}

.loop-arrow-up {
    top: -9px;
    border-bottom: 7px solid rgba(255, 80, 80, 0.9);
}

.loop-arrow-down {
    bottom: -9px;
    border-top: 7px solid rgba(80, 180, 255, 0.9);
}

.game-card.loop-owner-plr {
    border-color: rgba(80, 180, 255, 0.6);
    box-shadow: 0 0 8px rgba(80, 180, 255, 0.25);
}

.game-card.loop-owner-opp {
    border-color: rgba(255, 80, 80, 0.6);
    box-shadow: 0 0 8px rgba(255, 80, 80, 0.25);
}

/* 2v2: a teammate's loop card is green (mine stay blue, opponents' red) */
.game-card.loop-owner-mate {
    border-color: rgba(90, 220, 120, 0.65);
    box-shadow: 0 0 8px rgba(90, 220, 120, 0.28);
}

.loop-arrow-up.loop-arrow-mate {
    border-bottom-color: rgba(90, 220, 120, 0.9);
}

/* 2v2: the owner's seat (P1-P4) on each loop card */
.loop-seat-badge {
    position: absolute;
    left: 3px;
    bottom: 3px;
    z-index: 3;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.6rem;
    line-height: 1;
    letter-spacing: 0.5px;
    padding: 2px 4px;
    border-radius: 3px;
    color: #fff;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* field space card */
.game-layout .field-space .game-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* follows the space, which play.js grows into the row's height (66/68, 92/95) */
    width: 97%;
    height: 97%;
}

.game-layout .field-space .game-card.selectable:hover {
    transform: translate(-50%, calc(-50% - 6px)) scale(1.04);
}

.game-layout .field-space .game-card.selected {
    transform: translate(-50%, calc(-50% - 6px)) scale(1.06);
}

.game-layout .field-space .game-card.selected.selectable:hover {
    transform: translate(-50%, calc(-50% - 6px)) scale(1.06);
}

/* Field cards are centered via translate, so the exhausted resting tilt
   must compose with it rather than replace it (see .game-card.exhausted). */
.game-layout .field-space .game-card.exhausted:not(.attacking) {
    transform: translate(-50%, -50%) rotate(-4deg) scale(0.97);
}

/* Loop cards: match field-card size. Horizontal spacing (even gaps when there
   is room, fan-style overlap only when there are too many) is set inline by
   layoutLoopOverlap() in play.js. */
.game-layout .loop-zone .game-card {
    width: calc(66 * var(--bu, 1px));
    height: calc(92 * var(--bu, 1px));
}

.game-layout .loop-zone .game-card:hover {
    z-index: 10;
}

/* ── CLICKABLE ZONE (target-player actions) ───────────────── */

.zone.zone-clickable {
    cursor: pointer;
    border-color: rgba(255, 191, 0, 0.55);
    box-shadow: 0 0 18px rgba(255, 191, 0, 0.2);
    background: rgba(255, 191, 0, 0.05);
    animation: zone-pulse 1.8s ease-in-out infinite;
}

.zone.zone-clickable:hover {
    border-color: #ffbf00;
    box-shadow: 0 0 28px rgba(255, 191, 0, 0.35);
    background: rgba(255, 191, 0, 0.1);
}

@keyframes zone-pulse {
    0%, 100% { box-shadow: 0 0 18px rgba(255, 191, 0, 0.2); }
    50% { box-shadow: 0 0 28px rgba(255, 191, 0, 0.35); }
}

/* ── CONFIRM MODAL ─────────────────────────────────────────── */

.confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.confirm-box {
    text-align: center;
    padding: 36px 48px;
    background: rgba(10, 8, 6, 0.97);
    border: 1px solid rgba(255, 191, 0, 0.25);
    border-radius: 16px;
    box-shadow: 0 0 40px rgba(255, 191, 0, 0.1);
    min-width: 280px;
    max-width: 380px;
}

.confirm-box.confirm-danger {
    border-color: rgba(255, 68, 68, 0.35);
    box-shadow: 0 0 40px rgba(255, 68, 68, 0.15);
}

.confirm-icon {
    font-size: 2rem;
    margin-bottom: 12px;
}

.confirm-box h2 {
    font-family: 'DragonSlayer', serif;
    color: #ffbf00;
    font-size: 1.3rem;
    letter-spacing: 4px;
    margin: 0 0 12px;
}

.confirm-box.confirm-danger h2 {
    color: #ff4444;
}

.confirm-box p {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.82rem;
    color: rgba(240, 236, 230, 0.6);
    margin: 0 0 24px;
    line-height: 1.5;
}

.confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.btn-confirm-ok {
    padding: 10px 28px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.78rem;
    letter-spacing: 1.5px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
    background: #ffbf00;
    color: #0e0e0e;
    font-weight: 700;
}

.btn-confirm-ok:hover {
    background: #e6ac00;
    box-shadow: 0 4px 16px rgba(255, 191, 0, 0.3);
}

.confirm-danger .btn-confirm-ok {
    background: #c0392b;
    color: #fff;
}

.confirm-danger .btn-confirm-ok:hover {
    background: #e74c3c;
    box-shadow: 0 4px 16px rgba(255, 68, 68, 0.3);
}

/* ── RESIGN MODAL ─────────────────────────────────────────── */

.resign-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.resign-box {
    text-align: center;
    padding: 36px 48px;
    background: rgba(10, 6, 6, 0.97);
    border: 1px solid rgba(255, 68, 68, 0.35);
    border-radius: 16px;
    box-shadow: 0 0 40px rgba(255, 68, 68, 0.15);
}

.resign-box h2 {
    font-family: 'DragonSlayer', serif;
    color: #ff4444;
    font-size: 1.4rem;
    letter-spacing: 6px;
    margin: 0 0 12px;
}

.resign-box p {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.82rem;
    color: rgba(240, 236, 230, 0.6);
    margin: 0 0 24px;
}

.resign-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.resign-actions .btn-danger {
    width: auto;
    padding: 10px 28px;
}

/* ── SUBSCRIPTION GATE MODAL ──────────────────────────────── */

.sub-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0, 0, 0, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: subFadeIn 0.18s ease-out;
}

.sub-box {
    position: relative;
    text-align: center;
    width: 100%;
    max-width: 420px;
    padding: 40px 40px 32px;
    background:
        radial-gradient(120% 90% at 50% -10%, rgba(255, 191, 0, 0.14), transparent 60%),
        rgba(12, 10, 7, 0.98);
    border: 1px solid rgba(255, 191, 0, 0.35);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 50px rgba(255, 191, 0, 0.08);
    animation: subPopIn 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.sub-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    color: rgba(240, 236, 230, 0.45);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s;
}

.sub-close:hover {
    color: #ffbf00;
}

.sub-crown {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, rgba(255, 191, 0, 0.28), rgba(255, 191, 0, 0.06));
    border: 1px solid rgba(255, 191, 0, 0.4);
}

.sub-crown i {
    font-size: 1.7rem;
    color: #ffbf00;
}

.sub-eyebrow {
    display: block;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.65rem;
    letter-spacing: 3px;
    color: rgba(255, 191, 0, 0.7);
    margin-bottom: 8px;
}

.sub-box h2 {
    font-family: 'DragonSlayer', serif;
    color: #ffbf00;
    font-size: 1.5rem;
    letter-spacing: 3px;
    margin: 0 0 14px;
}

.sub-box p {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.86rem;
    color: rgba(240, 236, 230, 0.65);
    line-height: 1.6;
    margin: 0 0 28px;
}

.sub-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}

.sub-subscribe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 28px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.85rem;
    letter-spacing: 2px;
    color: #0e0e0e;
    background: #ffbf00;
    border: none;
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}

.sub-subscribe-btn:hover {
    background: #e6ac00;
    box-shadow: 0 6px 22px rgba(255, 191, 0, 0.35);
    transform: translateY(-1px);
}

.sub-actions .btn-outline {
    width: 100%;
    padding: 11px 28px;
    letter-spacing: 1.5px;
}

@keyframes subFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes subPopIn {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── EMAIL VERIFIED POPUP ─────────────────────────────────────
   The /verify link redirects to /play?verified=1|0 (verify-welcome.js).
   Medal slams in, shockwave rings and sparks burst off it, light rays
   turn slowly behind, embers rise through the card. --vw-color carries
   the theme: gold on success, ember red when the link had expired. */
.vw-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    background: radial-gradient(ellipse at 50% 45%, rgba(40, 28, 4, 0.55), rgba(0, 0, 0, 0.85) 70%);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    --vw-color: 255, 191, 0;
    animation: vwFade 0.3s ease-out both;
}

.vw-overlay.vw-fail {
    --vw-color: 255, 110, 40;
    background: radial-gradient(ellipse at 50% 45%, rgba(40, 12, 4, 0.55), rgba(0, 0, 0, 0.85) 70%);
}

.vw-overlay.vw-out {
    animation: vwFadeOut 0.36s ease-in forwards;
}

.vw-overlay.vw-out .vw-box {
    animation: vwBoxOut 0.36s ease-in forwards;
}

.vw-box {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 440px;
    padding: 40px 40px 34px;
    text-align: center;
    background:
        radial-gradient(120% 80% at 50% -5%, rgba(var(--vw-color), 0.2), transparent 60%),
        linear-gradient(180deg, rgba(20, 16, 9, 0.98), rgba(8, 7, 5, 0.99));
    border: 1px solid rgba(var(--vw-color), 0.45);
    border-radius: 20px;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(0, 0, 0, 0.6) inset,
        0 0 60px rgba(var(--vw-color), 0.16);
    outline: none;
    animation: vwBoxIn 0.6s cubic-bezier(0.16, 1.2, 0.3, 1) 0.05s both,
               vwBoxGlow 3.2s ease-in-out 1s infinite;
}

/* Slow-turning light rays behind the medal */
.vw-rays {
    position: absolute;
    left: 50%;
    top: 92px;
    width: 640px;
    height: 640px;
    margin: -320px 0 0 -320px;
    background: repeating-conic-gradient(rgba(var(--vw-color), 0.13) 0deg 7deg, transparent 7deg 22deg);
    -webkit-mask-image: radial-gradient(circle, #000 0, rgba(0, 0, 0, 0.6) 22%, transparent 55%);
    mask-image: radial-gradient(circle, #000 0, rgba(0, 0, 0, 0.6) 22%, transparent 55%);
    pointer-events: none;
    animation: vwRaysIn 1s ease-out 0.35s both, vwSpin 40s linear infinite;
}

.vw-fail .vw-rays { opacity: 0.5; }

.vw-embers { z-index: 0; pointer-events: none; }
.vw-embers span { background: rgb(var(--vw-color)); }

.vw-close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 2;
    height: auto;
    padding: 4px 8px;
    background: none;
    border: none;
    color: rgba(240, 236, 230, 0.45);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
}

.vw-close:hover {
    color: rgb(var(--vw-color));
    transform: rotate(90deg);
}

/* Medal: shield with a check stamped on it */
.vw-emblem {
    position: relative;
    z-index: 1;
    width: 104px;
    height: 104px;
    margin: 0 auto 22px;
}

.vw-medal {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 32%, rgba(var(--vw-color), 0.38), rgba(var(--vw-color), 0.06) 70%);
    border: 2px solid rgba(var(--vw-color), 0.7);
    box-shadow: 0 0 30px rgba(var(--vw-color), 0.45), inset 0 0 22px rgba(var(--vw-color), 0.3);
    animation: vwMedalSlam 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both,
               vwMedalFloat 4s ease-in-out 1.2s infinite;
}

.vw-medal i {
    color: rgb(var(--vw-color));
    filter: drop-shadow(0 0 10px rgba(var(--vw-color), 0.8));
}

.vw-medal-shield { font-size: 2.9rem; }

.vw-medal .vw-medal-check {
    position: absolute;
    font-size: 1.25rem;
    color: #120d03;
    filter: none;
    margin-top: -2px;
    animation: vwCheckPop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) 0.75s both;
}

.vw-fail .vw-medal i { font-size: 2.4rem; }

/* Shockwave rings off the slam */
.vw-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(var(--vw-color), 0.8);
    opacity: 0;
    animation: vwRing 1s ease-out 0.5s both;
}

.vw-ring-2 { animation-delay: 0.68s; }

/* Sparks (spans added by verify-welcome.js with --a angle, --r reach) */
.vw-sparks {
    position: absolute;
    left: 50%;
    top: 50%;
}

.vw-sparks span {
    position: absolute;
    left: -2px;
    top: -2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff4c2;
    box-shadow: 0 0 8px rgb(var(--vw-color)), 0 0 14px rgba(var(--vw-color), 0.7);
    opacity: 0;
    animation: vwSpark 0.85s cubic-bezier(0.1, 0.8, 0.3, 1) both;
}

.vw-eyebrow {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin-bottom: 10px;
    padding: 4px 12px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.66rem;
    letter-spacing: 3px;
    color: rgb(var(--vw-color));
    background: rgba(var(--vw-color), 0.1);
    border: 1px solid rgba(var(--vw-color), 0.3);
    border-radius: 999px;
    animation: vwRise 0.5s ease-out 0.7s both;
}

.vw-title {
    position: relative;
    z-index: 1;
    margin: 0 0 14px;
    font-family: 'DragonSlayer', serif;
    font-size: 2rem;
    font-weight: normal;
    letter-spacing: 2px;
    line-height: 1.15;
    color: rgb(var(--vw-color));
    background: linear-gradient(100deg, rgb(var(--vw-color)) 35%, #fff6d6 50%, rgb(var(--vw-color)) 65%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 10px rgba(var(--vw-color), 0.35));
    animation: vwTitleIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.82s both,
               vwShimmer 3.6s ease-in-out 1.6s infinite;
}

.vw-text {
    position: relative;
    z-index: 1;
    margin: 0 auto 28px;
    max-width: 330px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(240, 236, 230, 0.72);
    animation: vwRise 0.5s ease-out 0.95s both;
}

.vw-cta {
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: auto;
    padding: 15px 28px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.95rem;
    letter-spacing: 3px;
    color: #120d03;
    background: linear-gradient(180deg, #ffd34d, rgb(var(--vw-color)) 55%, #d99a00);
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 26px rgba(var(--vw-color), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s, filter 0.2s;
    animation: vwRise 0.5s ease-out 1.08s both;
}

.vw-fail .vw-cta {
    background: linear-gradient(180deg, #ff9a5c, rgb(var(--vw-color)) 55%, #c4461a);
}

/* Glint sweeping across the button */
.vw-cta::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-20deg);
    animation: vwGlint 3s ease-in-out 1.8s infinite;
}

.vw-cta:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 12px 34px rgba(var(--vw-color), 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.vw-cta:focus-visible {
    outline: 2px solid #fff4c2;
    outline-offset: 3px;
}

@keyframes vwFade     { from { opacity: 0; } to { opacity: 1; } }
@keyframes vwFadeOut  { to { opacity: 0; } }
@keyframes vwBoxOut   { to { opacity: 0; transform: scale(0.94) translateY(10px); } }
@keyframes vwSpin     { to { transform: rotate(360deg); } }
@keyframes vwRaysIn   { from { opacity: 0; } to { opacity: 1; } }

@keyframes vwBoxIn {
    0%   { opacity: 0; transform: translateY(30px) scale(0.86); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes vwBoxGlow {
    0%, 100% { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.6) inset, 0 0 50px rgba(var(--vw-color), 0.12); }
    50%      { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.6) inset, 0 0 80px rgba(var(--vw-color), 0.28); }
}

@keyframes vwMedalSlam {
    0%   { opacity: 0; transform: scale(2.6) rotate(-25deg); filter: blur(10px); }
    55%  { opacity: 1; transform: scale(0.92) rotate(3deg); filter: blur(0); }
    75%  { transform: scale(1.05) rotate(-1deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); filter: blur(0); }
}

@keyframes vwMedalFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

@keyframes vwCheckPop {
    from { opacity: 0; transform: scale(0); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes vwRing {
    0%   { opacity: 0.9; transform: scale(1); }
    100% { opacity: 0; transform: scale(2.4); }
}

@keyframes vwSpark {
    0%   { opacity: 1; transform: rotate(var(--a)) translateX(0) scale(1.3); }
    100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--r)) scale(0.3); }
}

@keyframes vwRise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes vwTitleIn {
    from { opacity: 0; transform: scale(1.4); letter-spacing: 10px; }
    to   { opacity: 1; transform: scale(1); letter-spacing: 2px; }
}

@keyframes vwShimmer {
    0%, 100% { background-position: 100% 0; }
    50%      { background-position: 0 0; }
}

@keyframes vwGlint {
    0%, 70% { left: -60%; }
    100%    { left: 130%; }
}

@media (max-width: 767px) {
    .vw-box { padding: 34px 22px 26px; }
    .vw-title { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    .vw-overlay *, .vw-overlay *::after { animation: none !important; }
    .vw-sparks, .vw-ring, .vw-embers { display: none; }
}

/* ── LEVEL-UP TOAST ───────────────────────────────────────── */
.levelup-toast {
    position: fixed;
    top: 84px; /* clears the fixed 70px header */
    left: 50%;
    transform: translate(-50%, -24px);
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px 14px 16px;
    background: linear-gradient(135deg, rgba(20, 18, 8, 0.97), rgba(40, 32, 4, 0.97));
    border: 1px solid #ffbf00;
    border-radius: 12px;
    box-shadow: 0 0 24px rgba(255, 191, 0, 0.45), 0 6px 20px rgba(0, 0, 0, 0.6);
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.18, 0.9, 0.3, 1.2);
    max-width: 90vw;
}

.levelup-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

.levelup-burst {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 191, 0, 0.35), rgba(255, 191, 0, 0.05));
    color: #ffbf00;
    font-size: 1.4rem;
    text-shadow: 0 0 10px rgba(255, 191, 0, 0.8);
    animation: levelup-pulse 1.4s ease-in-out infinite;
}

@keyframes levelup-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

.levelup-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.levelup-title {
    font-family: 'DragonSlayer', 'HwyGothic', Arial, sans-serif;
    font-size: 1.05rem;
    letter-spacing: 2px;
    color: #ffbf00;
    text-shadow: 0 0 8px rgba(255, 191, 0, 0.6);
    line-height: 1;
}

.levelup-level {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.82rem;
    letter-spacing: 1px;
    color: #f0ece6;
}

.levelup-rewards {
    display: flex;
    gap: 12px;
    margin-top: 3px;
}

.levelup-reward {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.8rem;
    color: #ffd966;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

@media only screen and (max-width: 767px), only screen and (hover: none) {
    .levelup-toast { top: 76px; padding: 12px 16px; gap: 10px; }
    .levelup-burst { width: 38px; height: 38px; font-size: 1.15rem; }
    .levelup-title { font-size: 0.95rem; }
}

/* ── WINNER OVERLAY ───────────────────────────────────────── */

.winner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.winner-box {
    text-align: center;
    padding: 48px 60px;
    background: rgba(8, 8, 8, 0.95);
    border: 2px solid #ffbf00;
    border-radius: 20px;
    box-shadow: 0 0 60px rgba(255, 191, 0, 0.3);
    position: relative;
    min-width: 340px;
}

.winner-box.winner-defeat {
    border-color: #ff4444;
    box-shadow: 0 0 60px rgba(255, 68, 68, 0.2);
}

.winner-close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: none;
    border: none;
    color: rgba(240, 236, 230, 0.5);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.2s;
}

.winner-close:hover {
    color: #fff;
}

.winner-box h2 {
    font-family: 'DragonSlayer', serif;
    font-size: 2rem;
    letter-spacing: 6px;
    margin: 0 0 16px;
}

.winner-box h2.victory { color: #ffbf00; }
.winner-box h2.defeat { color: #ff4444; }

.winner-box p {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.85rem;
    color: rgba(240, 236, 230, 0.7);
    margin: 0 0 24px;
}

/* ── RealRate Results ──────────────────────────────────────── */
.rr-results {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.rr-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 24px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    min-width: 220px;
}

.rr-player.rr-me {
    border-color: rgba(255, 191, 0, 0.2);
    background: rgba(255, 191, 0, 0.04);
}

.rr-name {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    color: rgba(240, 236, 230, 0.6);
    text-transform: uppercase;
}

.rr-rating-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rr-before {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 1rem;
    color: rgba(240, 236, 230, 0.5);
}

.rr-arrow {
    color: rgba(240, 236, 230, 0.3);
    font-size: 0.85rem;
}

.rr-after {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 1.1rem;
    color: #fff;
    font-weight: bold;
}

.rr-change {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.85rem;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 4px;
}

.rr-change.rr-up {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.1);
}

.rr-change.rr-down {
    color: #ff4444;
    background: rgba(255, 68, 68, 0.1);
}

.rr-change.rr-even {
    color: rgba(240, 236, 230, 0.5);
}

.rr-game-type {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.65rem;
    letter-spacing: 2px;
    color: rgba(240, 236, 230, 0.3);
    margin-top: 4px;
}

/* ── Wager Result (post-game treasure swing) ──────────────── */
.wager-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 0 auto 24px;
    padding: 14px 30px;
    border-radius: 12px;
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.wager-result.wager-result-show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.wager-result-win {
    background: rgba(74, 222, 128, 0.08);
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.wager-result-loss {
    background: rgba(255, 68, 68, 0.07);
    border: 1px solid rgba(255, 68, 68, 0.28);
}

.wager-result-coin {
    font-size: 1.4rem;
    margin-bottom: 4px;
}

.wager-result-win .wager-result-coin {
    filter: drop-shadow(0 0 8px rgba(255, 191, 0, 0.5));
}

.wager-result-loss .wager-result-coin {
    filter: grayscale(0.6) sepia(0.6) hue-rotate(-40deg) drop-shadow(0 0 6px rgba(255, 90, 90, 0.4));
}

.wager-result-amt {
    font-family: 'DragonSlayer', serif;
    font-size: 2.2rem;
    letter-spacing: 2px;
    line-height: 1;
    display: inline-block;
}

.wager-result-win .wager-result-amt {
    color: #4ade80;
    text-shadow: 0 0 14px rgba(74, 222, 128, 0.4);
}

.wager-result-loss .wager-result-amt {
    color: #ff5555;
}

.wager-result-label {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.62rem;
    letter-spacing: 2px;
    color: rgba(240, 236, 230, 0.5);
    margin-top: 4px;
}

/* Campaign first-win reward: the wager box in gold, with the pack under the treasure */
.campaign-reward-box {
    background: rgba(255, 191, 0, 0.07);
    border-color: rgba(255, 191, 0, 0.35);
    gap: 6px;
}

.campaign-reward-box .wager-result-amt {
    color: #ffbf00;
    text-shadow: 0 0 14px rgba(255, 191, 0, 0.45);
}

.campaign-reward-pack {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    color: #cfe0ff;
    background: rgba(143, 184, 255, 0.08);
    border: 1px solid rgba(143, 184, 255, 0.35);
    border-radius: 999px;
}

.campaign-reward-claimed {
    margin: 0 auto 18px;
    max-width: 320px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.78rem;
    line-height: 1.5;
    color: rgba(240, 236, 230, 0.5);
}

.wager-result-amt.wager-result-pop {
    animation: wagerPop 0.5s ease;
}

@keyframes wagerPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

/* ── Winner Reopen Bar ────────────────────────────────────── */
.winner-reopen {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    display: flex;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(8, 8, 8, 0.9);
    border: 1px solid rgba(255, 191, 0, 0.3);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.winner-reopen .btn-gold {
    font-size: 0.7rem;
    padding: 6px 14px;
    letter-spacing: 1px;
}

/* ── MOBILE-ONLY ELEMENTS (hidden on desktop) ─────────────── */

.mobile-game-hud,
.mobile-game-bar,
.mobile-panel-overlay {
    display: none;
}

/* ── RESPONSIVE — TABLET BREAKPOINT ──────────────────────── */

@media only screen and (max-width: 1100px) {
    /* Stacked panels no longer fit a fixed-height screen — let the page scroll */
    #menu-screen {
        height: auto;
        min-height: calc(100vh - 210px);
        overflow: visible;
    }

    .menu-layout {
        flex-direction: column;
    }

    .play-panel, .lobby-panel, .friends-panel {
        flex: none;
        width: 100%;
        box-sizing: border-box;
    }
}

/* Touch tablets only. A mouse-driven window under 1100px (a laptop zoomed in)
   keeps the three-column board and applyGameZoom scales it to fit; stacking
   the panels there squeezed the board until field and loop overlapped. */
@media only screen and (max-width: 1100px) and (hover: none) {
    .game-layout {
        flex-direction: column;
    }

    .side-panel {
        flex: none;
        width: 100%;
        height: auto;
    }

    .left-panel {
        order: 1;
    }

    .board-outer {
        order: 0;
    }

    .right-panel {
        order: -1;
    }

    .card-inspect-box {
        display: none;
    }
}

/* ── MOBILE — PORTRAIT ────────────────────────────────────── */

@media only screen and (max-width: 767px), only screen and (hover: none) {

    /* ── Menu / general screens ── */

    .screen {
        padding: 12px 12px 80px;
        height: auto;
        overflow: visible;
    }

    .menu-layout {
        overflow-x: hidden;
    }

    .menu-panel {
        box-sizing: border-box;
        max-width: 100%;
    }

    .game-card {
        width: 38px;
        height: 53px;
    }

    /* Hand cards: larger, overlapping, scrollable */
    .game-layout .hand-zone .game-card {
        width: 58px;
        height: 81px;
        flex-shrink: 0;
        margin-left: -16px;
    }

    .game-layout .hand-zone .game-card:first-of-type {
        margin-left: 0;
    }

    /* Loop cards: larger, overlapping, scrollable */
    .game-layout .loop-zone .game-card {
        width: 58px;
        height: 81px;
        flex-shrink: 0;
        margin-left: -14px;
    }

    .game-layout .loop-zone .game-card:first-of-type {
        margin-left: 0;
    }

    /* Fallback size only — layoutFieldSpaces() in play.js sizes spaces
       inline to fill the row at a fixed aspect ratio (height- or
       width-limited, whichever bites first); past the floor size the row
       scrolls sideways like the hand/loop. */
    .game-layout .field-space {
        width: 54px;
        height: 76px;
    }

    /* Card fills the whole space on mobile. */
    .game-layout .field-space .game-card {
        width: 100%;
        height: 100%;
    }

    .game-layout .hand-zone {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0;
        padding: 4px 8px;
        /* Keep the hand box its full card height even when empty (it shrank
           into a thin line before). Landscape overrides this back to 0. */
        min-height: 88px;
    }

    /* Hand and deck share the same height and align in their row. */
    .game-layout .opp-top,
    .game-layout .plr-bottom {
        align-items: stretch;
    }

    /* Card slots keep the web overlay layout (card image + centred count +
       bottom label caption) on mobile, just at mobile sizes. min-height keeps
       them from collapsing when empty. */
    .game-layout .deck-zone,
    .game-layout .pile-zone {
        width: auto;
        height: auto;
        min-height: 84px;
    }

    .game-layout .deck-zone {
        min-width: 56px;
    }

    .deck-back-img {
        width: 42px;
        height: 59px;
    }

    /* Deck card backs sized to fill the deck slot (min-height 84px) so the skin
       art reads clearly, matching the exile/graveyard piles below. */
    .game-layout .deck-zone .deck-back-img {
        width: 60px;
        height: 84px;
    }

    /* Exile/graveyard show the card back on mobile whenever they hold cards
       (renderPileZone only inserts the image when the pile is occupied or has
       an active skin), matching the deck zones. Sized larger than the deck backs
       to fill the pile slot (min-height 84px) so the skin art reads clearly. */
    .game-layout .pile-zone .deck-back-img {
        display: block;
        width: 60px;
        height: 84px;
    }

    .game-layout .field-row {
        gap: 4px;
        padding: 3px 6px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* "safe" keeps the row centred while it fits but left-aligns the
           scroll when it overflows (plain center makes the left end
           unreachable) */
        justify-content: safe center;
    }

    .game-layout .field-row::-webkit-scrollbar {
        display: none;
    }

    .game-layout .loop-zone {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0;
        padding: 4px 10px;
        /* Fixed height so the loop keeps its size when empty (was collapsing). */
        height: 90px;
        min-height: 90px;
    }

    .game-layout .hand-zone::-webkit-scrollbar,
    .game-layout .loop-zone::-webkit-scrollbar {
        display: none;
    }

    /* Overlapping cards: pop active card above siblings */
    .game-layout .hand-zone .game-card.selectable,
    .game-layout .loop-zone .game-card.selectable {
        z-index: 1;
    }

    .game-layout .hand-zone .game-card.selected,
    .game-layout .loop-zone .game-card.selected,
    .game-layout .hand-zone .game-card.attacking,
    .game-layout .loop-zone .game-card.attacking {
        z-index: 3;
    }

    .game-layout .pile-zone {
        min-width: 48px;
        padding: 4px 6px;
        overflow: visible;
    }

    .game-layout .pile-zone .zone-label {
        font-size: 0.38rem;
        letter-spacing: 1px;
        white-space: nowrap;
    }

    .game-layout .pile-zone .pile-count {
        font-size: 1rem;
    }

    /* Exile + graveyard side by side. On portrait mobile these are relocated by
       JS into the bottom action strip (see the .right-panel rules below), so the
       loop spans the mid-section's full width on its own. */
    .game-layout .shared-column {
        gap: 4px;
        flex-direction: row;
        height: auto;
        align-items: stretch;
    }

    .game-layout .shared-column .pile-zone {
        height: auto;
        flex: 0 0 auto;
        min-height: 0;
    }

    .game-layout .mid-section {
        gap: 4px;
        overflow: visible;
        align-items: stretch;
    }

    .deck-viewer-card.game-card {
        width: 48px;
        height: 67px;
    }

    .deck-viewer-panel {
        padding: 14px 16px;
    }

    /* ── GAME ACTIVE: full-screen immersive mode ── */

    body.game-active header,
    body.game-active footer,
    body.game-active .action-bar,
    body.game-active .backdrop {
        display: none !important;
    }

    body.game-active main {
        margin-top: 0;
        padding: 0;
    }

    body.game-active #game-screen.screen {
        position: fixed;
        /* Pin to the top only; height (not bottom) drives the box so 100dvh
           unambiguously wins. Leaving bottom:0 here over-constrains the box and
           some browsers keep bottom:0 (large viewport) and ignore the height,
           pushing the bottom bar/action button below the visible fold. */
        top: 0;
        left: 0;
        right: 0;
        bottom: auto;
        height: 100vh;       /* fallback */
        height: 100dvh;      /* exclude the mobile browser chrome so the bottom bar/buttons stay on screen */
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: #0e0e0e;
        z-index: 500;
    }

    /* ── Mobile top HUD ── */

    .mobile-game-hud {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        height: 46px;
        padding: 0 16px;
        background: rgba(8, 8, 8, 0.97);
        border-bottom: 1px solid rgba(255, 191, 0, 0.12);
        gap: 12px;
    }

    .mobile-hud-info {
        display: flex;
        flex-direction: column;
        gap: 5px;
        min-width: 0;
        flex: 1;
    }

    .mobile-hud-phase {
        font-family: 'DragonSlayer', serif;
        font-size: 0.88rem;
        letter-spacing: 3px;
        color: #ffbf00;
        line-height: 1;
        transition: text-shadow 0.3s;
    }

    .mobile-hud-phase.my-turn-hud {
        text-shadow: 0 0 12px rgba(255, 191, 0, 0.6);
    }

    .mobile-hud-info .phase-track-hud {
        display: flex;
        gap: 2px;
        margin: 0;
        max-width: 150px;
    }

    .mobile-hud-info .phase-track-hud .ptrack-seg {
        height: 3px;
    }

    .mobile-hud-turn {
        font-family: 'HwyGothic', Arial, sans-serif;
        font-size: 0.58rem;
        letter-spacing: 1px;
        color: rgba(240, 236, 230, 0.4);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-hud-timer {
        font-family: 'HwyGothic', Arial, sans-serif;
        font-size: 0.62rem;
        letter-spacing: 1px;
        color: rgba(240, 236, 230, 0.6);
        white-space: nowrap;
    }

    .mobile-hud-btn {
        background: none;
        border: 1px solid rgba(255, 191, 0, 0.18);
        border-radius: 8px;
        color: rgba(255, 191, 0, 0.55);
        width: 38px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.88rem;
        cursor: pointer;
        flex-shrink: 0;
        transition: color 0.2s, border-color 0.2s, background 0.2s;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-hud-btn:active {
        color: #ffbf00;
        border-color: rgba(255, 191, 0, 0.5);
        background: rgba(255, 191, 0, 0.07);
    }

    /* Resign reuses the HUD button theme with a red accent. */
    .mobile-hud-resign {
        color: rgba(220, 90, 70, 0.7);
        border-color: rgba(220, 90, 70, 0.35);
    }

    .mobile-hud-resign:active {
        color: #e35a46;
        border-color: rgba(220, 90, 70, 0.65);
        background: rgba(220, 90, 70, 0.1);
    }

    /* ── Game layout: board fills middle ── */

    body.game-active .game-layout {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        height: auto;
        flex-direction: column;
        gap: 0;
        position: relative;
    }

    body.game-active .board-outer {
        flex: 1 1 0 !important;
        min-height: 0;
        order: 1 !important;
        overflow: hidden;
    }

    /* Allow card glow/outline effects to paint outside */
    body.game-active #board-content {
        overflow: visible;
    }

    /* Mid-section: flex proportionally, allow content to fit */
    body.game-active .game-layout .mid-section {
        flex: 0 0 auto;
        min-height: 0;
        max-height: none;
        overflow: visible;
    }

    /* Opp and plr sections grow to fill remaining board space, but cluster their
       contents toward the loop so the hand/field/loop sit close together and the
       slack falls at the top and bottom (leaving room near the action bar). */
    body.game-active .game-layout .opp-section {
        flex: 1;
        min-height: 0;
        justify-content: flex-end;
    }

    body.game-active .game-layout .plr-section {
        flex: 1;
        min-height: 0;
        justify-content: flex-start;
    }

    /* ── Side panels become slide-up drawers ── */

    body.game-active .side-panel {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;         /* relative to game-layout (starts just below HUD) */
        bottom: 0;      /* relative to game-layout (ends just above nav bar) */
        width: 100%;
        max-width: 100%;
        height: auto;
        flex-direction: column;
        background: rgba(10, 8, 6, 0.98);
        border: none;
        border-top: 1px solid rgba(255, 191, 0, 0.18);
        border-radius: 0;
        z-index: 600;
        padding: 0;
        transform: translateY(110%);
        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
        gap: 0;
    }

    body.game-active .side-panel.panel-open {
        transform: translateY(0);
    }

    /* Drag handle at top of each drawer */
    body.game-active .side-panel::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: rgba(255, 191, 0, 0.22);
        border-radius: 2px;
        margin: 10px auto 6px;
        flex-shrink: 0;
    }

    /* Left panel: base drawer styles */
    body.game-active .left-panel {
        order: 0;
    }

    body.game-active .left-panel .game-friends-box {
        flex: 1 1 0;
        min-height: 0;
        max-height: none;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top: none;
        border-bottom: none;
        background: transparent;
        border-color: rgba(255, 191, 0, 0.08);
        padding: 8px 14px 14px;
    }

    body.game-active .left-panel .effects-panel {
        margin: 0 14px;
        flex-shrink: 0;
    }

    /* Right panel: in-flow at bottom, pushes board up */
    body.game-active .right-panel {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        height: auto;
        max-height: 45vh;
        transform: none !important;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 6px 14px 10px;
        gap: 6px;
        z-index: 200;
        background: rgba(8, 8, 6, 0.97);
        border-top: 1px solid rgba(255, 191, 0, 0.15);
        order: 2;
    }

    /* No drag handle on the action drawer */
    body.game-active .right-panel::before {
        display: none;
    }

    /* Phase info is shown in the HUD already; hide it from the strip */
    body.game-active .right-panel .phase-box {
        display: none;
    }

    body.game-active .right-panel .card-inspect-box {
        display: none;
    }

    body.game-active .right-panel .action-panel {
        flex: none;
        overflow: visible;
        min-height: 0;
        background: transparent;
        border: none;
        padding: 4px 0;
    }

    body.game-active #board-content {
        padding-bottom: 0;
    }

    /* Action buttons: vertical column sized to its content. The desktop base
       makes this flex:1 1 0 / min-height:0 to fill the sidebar; on mobile the
       action panel is content-sized, so leaving that made this collapse to ~0
       and the buttons spilled out below the bar. Size it to its buttons so the
       panel grows and the buttons stay above the bar. */
    body.game-active .right-panel .action-buttons {
        flex: none;
        min-height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        overflow: visible;
        gap: 8px;
        padding-bottom: 2px;
    }

    /* A lone action button sits centred at a comfortable width instead of
       stretching across (or hugging) the strip. */
    body.game-active .right-panel .action-buttons > button:only-of-type:not(.btn-back-to-lobby) {
        flex: 0 1 64%;
        max-width: 70%;
    }

    /* Buttons sit left/right (two per row) and stretch to fill the fixed-height
       button box — minimal vertical padding so the flex line height drives their
       size (big when few, smaller as more wrap in). */
    body.game-active .right-panel .action-buttons .btn-gold,
    body.game-active .right-panel .action-buttons .btn-attack,
    body.game-active .right-panel .action-buttons .btn-confirm,
    body.game-active .right-panel .action-buttons .btn-danger {
        flex: 1 1 40%;
        width: auto;
        min-width: 0;
        min-height: 0;
        padding: 2px 8px;
        font-size: 0.82rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Resign lives in the top-right HUD on mobile (and the phase-box flag
       elsewhere) — the action strip never renders it anymore. */

    /* Full-width rows in the button grid: the back-to-lobby/exit button, plus the
       instructional hints and labels some action types append here. */
    body.game-active .right-panel .action-buttons .btn-back-to-lobby,
    body.game-active .right-panel .action-buttons .defend-hint,
    body.game-active .right-panel .action-buttons .bloom-label,
    body.game-active .right-panel .action-buttons .bloom-give-row,
    body.game-active .right-panel .action-buttons .bloom-space-hint {
        grid-column: 1 / -1;
        width: 100%;
    }

    /* SHADE's PLAY + flip row and its mode switch take a whole row of the strip */
    body.game-active .right-panel .action-buttons .shade-play-row,
    body.game-active .right-panel .action-buttons .shade-switch {
        flex: 1 1 100%;
    }

    body.game-active .right-panel .action-buttons .shade-play-row {
        min-height: 46px;
    }

    /* ── Mobile action strip (portrait) ─────────────────────────
       Piles (exile/graveyard) on the left, action area on the right. Both are
       bottom-aligned so the button box lines up with the 76px-tall piles; the
       prompt sits above the buttons. Height is content-driven (prompt may be 1–2
       lines) with a floor matching the piles. */
    body.game-active .right-panel {
        flex-direction: row;
        align-items: flex-end;
        height: auto;
        min-height: 92px;          /* 76px piles + 16px vertical padding */
        max-height: none;
        overflow: hidden;
    }

    body.game-active .right-panel .action-panel {
        flex: 1 1 auto;
        min-width: 0;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        gap: 4px;
    }

    /* Prompt above the buttons: a one-line headline, then the how-to capped to
       two lines. */
    body.game-active .right-panel .prompt-text {
        flex: 0 0 auto;
        font-size: 0.56rem;
        line-height: 1.2;
        overflow: hidden;
    }

    body.game-active .right-panel .coach-title {
        font-size: 0.7rem;
        letter-spacing: 1.5px;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.game-active .right-panel .coach-how {
        margin-top: 2px;
        font-size: 0.58rem;
        line-height: 1.25;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* A paired-actions row spans the whole button grid, its buttons filling the row height */
    body.game-active .right-panel .action-buttons .action-btn-row {
        grid-column: 1 / -1;
        gap: 6px;
    }

    body.game-active .right-panel .action-buttons .action-btn-row > .btn-outline {
        padding: 2px 12px;
        font-size: 0.78rem;
    }

    /* The waiting card spans the whole button box */
    body.game-active .right-panel .action-buttons .wait-status {
        grid-column: 1 / -1;
        flex-direction: row;
        gap: 8px;
        padding: 6px 10px;
        font-size: 0.64rem;
    }

    /* THE FIX — the button box is exactly the pile height (76px), set as an
       explicit pixel height. That definite height is what lets grid-auto-rows:1fr
       genuinely fill it, so the buttons stretch DOWNWARD. auto-fit keeps the width
       behaviour (one button fills the row, two sit side by side); more buttons
       just split the 76px into shorter rows instead of growing the box. */
    body.game-active .right-panel .action-buttons {
        flex: 0 0 auto;
        height: 76px;
        min-height: 0;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
        grid-auto-rows: 1fr;
        gap: 6px;
    }

    /* Buttons own no height of their own — they fill their grid cell. */
    body.game-active .right-panel .action-buttons > button {
        height: auto;
        min-height: 0;
        align-self: stretch;
    }

    /* PASS (btn-gold) stays on the left; PLAY/CONFIRM (btn-confirm) moves to the
       right of it, regardless of DOM order. */
    body.game-active .right-panel .action-buttons .btn-confirm {
        order: 1;
    }

    body.game-active .right-panel .shared-column {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        gap: 4px;
        height: auto;
    }

    /* Full card size, matching the field-space aspect ratio (54×76), so the
       exile/graveyard art is at its full, clearly-visible size. */
    body.game-active .right-panel .shared-column .pile-zone {
        flex: 0 0 auto;
        width: 54px;
        height: 76px;
        min-height: 76px;
        min-width: 0;
        padding: 0;
    }

    /* Slightly smaller than the 54×76 slot so the base centering (which reserves
       a 14px label band at the bottom) leaves a gap above the art and clear of
       the EXILE/GRAVEYARD label. */
    body.game-active .right-panel .shared-column .pile-zone .deck-back-img {
        width: 42px;
        height: 58px;
    }

    /* ── Mobile bottom bar ── */

    .mobile-game-bar {
        display: flex;
        align-items: stretch;
        flex-shrink: 0;
        height: 56px;
        /* Keep the bar clear of the device home indicator. */
        padding-bottom: env(safe-area-inset-bottom);
        background: rgba(8, 8, 8, 0.98);
        border-top: 1px solid rgba(255, 191, 0, 0.12);
        z-index: 700;
    }

    /* End-of-game banner: keep it inside the screen so the close (X) doesn't
       sit at/beyond the edge on narrow phones. */
    .winner-box {
        min-width: 0;
        width: auto;
        max-width: calc(100vw - 24px);
        max-height: calc(100dvh - 48px);
        overflow-y: auto;
        box-sizing: border-box;
        padding: 36px 22px;
    }

    .winner-close {
        top: 8px;
        right: 10px;
        font-size: 1.4rem;
        padding: 6px 10px;
    }

    .mobile-bar-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        background: none;
        border: none;
        border-right: 1px solid rgba(255, 191, 0, 0.06);
        color: rgba(240, 236, 230, 0.4);
        cursor: pointer;
        padding: 8px 0 0;
        transition: color 0.15s, background 0.15s;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }

    .mobile-bar-btn:last-child {
        border-right: none;
    }

    .mobile-bar-btn i {
        font-size: 1.05rem;
    }

    .mobile-bar-btn span {
        font-family: 'HwyGothic', Arial, sans-serif;
        font-size: 0.46rem;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }

    .mobile-bar-btn:active {
        color: #ffbf00;
        background: rgba(255, 191, 0, 0.07);
    }

    .mobile-bar-btn.bar-active {
        color: #ffbf00;
        background: rgba(255, 191, 0, 0.05);
        border-top: 2px solid #ffbf00;
    }

    .mobile-bar-btn.bar-prompted {
        color: #ffbf00;
    }

    @keyframes bar-prompt-glow {
        0%, 100% { color: rgba(255, 191, 0, 0.65); }
        50% { color: #ffbf00; }
    }

    .mobile-bar-btn.bar-prompted i {
        animation: bar-prompt-glow 1.4s ease-in-out infinite;
    }

    /* ── Drawer overlay ── */

    .mobile-panel-overlay {
        display: none;
        position: absolute;
        top: 46px;
        bottom: 56px;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 595;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    .mobile-panel-overlay.overlay-visible {
        display: block;
    }
}

/* ── MOBILE — LANDSCAPE ───────────────────────────────────── */

@media (orientation: landscape) and (hover: none) and (max-height: 900px) {

    /* Hide top HUD in landscape — phase info is in the right sidebar */
    body.game-active .mobile-game-hud {
        display: none;
    }

    body.game-active .mobile-game-bar {
        height: 40px;
    }

    /* Side panels: no top HUD, shorter bottom bar */
    body.game-active .side-panel {
        top: 0;
        bottom: 40px;
    }

    body.game-active .mobile-panel-overlay {
        top: 0;
        bottom: 40px;
    }

    /* Show right panel inline on the right in landscape */
    body.game-active #game-screen.screen {
        flex-direction: column;
    }

    body.game-active .game-layout {
        flex-direction: row;
        gap: 0;
        padding-bottom: 0;      /* no strip reservation needed — sidebar is in-flow */
        position: static;
    }

    /* Board occupies remaining space, always to the left of the action sidebar */
    body.game-active .board-outer {
        order: 1;
    }

    /* Right panel: inline sidebar on the RIGHT side of the gameboard */
    body.game-active .right-panel {
        order: 2;
        position: relative !important;
        transform: none !important;
        transition: none !important;
        width: 180px;
        flex: 0 0 180px;
        top: auto;
        bottom: auto;
        max-height: none;
        height: 100%;
        overflow-y: auto;
        background: rgba(8, 8, 8, 0.92);
        border-top: none;
        border-left: 1px solid rgba(255, 191, 0, 0.12);
        border-radius: 0;
        padding: 8px 10px;
        gap: 8px;
        display: flex;
        /* Override the portrait strip's row direction — the landscape sidebar is
           a vertical column (the piles live back in the mid-section here). */
        flex-direction: column;
        align-items: stretch;
        -webkit-overflow-scrolling: touch;
        z-index: auto;
    }

    /* Show phase-box again in landscape sidebar */
    body.game-active .right-panel .phase-box {
        display: block;
        padding: 8px 10px;
    }

    /* Compact audio controls in landscape sidebar */
    body.game-active .right-panel .audio-slider {
        width: 60px;
    }

    body.game-active .right-panel::before {
        display: none;
    }

    /* Left panel drawer still works normally */
    body.game-active .left-panel {
        position: absolute;
        right: 180px;
    }

    body.game-active .mobile-panel-overlay {
        right: 180px;
    }

    /* Board takes remaining space */
    body.game-active .board-outer {
        flex: 1;
        min-width: 0;
    }

    /* ── Equal-height board rows in landscape ── */

    /* 2:1:2 flex ratio → 5 equal rows (opp-top, opp-field, loop, plr-field, plr-bottom) */
    body.game-active .game-layout .opp-section {
        flex: 2 1 0;
        min-height: 0;
    }

    body.game-active .game-layout .mid-section {
        flex: 1 1 0;
        min-height: 0;
        max-height: none;
        align-items: stretch;
    }

    body.game-active .game-layout .shared-column {
        flex-direction: column;
        height: auto;
    }

    body.game-active .game-layout .shared-column .pile-zone {
        height: auto;
        flex: 1;
        min-height: 0;
    }

    body.game-active .game-layout .plr-section {
        flex: 2 1 0;
        min-height: 0;
    }

    /* Equal split within opp-section and plr-section */
    body.game-active .game-layout .opp-top {
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    body.game-active .game-layout .opp-section .field-row {
        flex: 1;
        min-height: 0;
    }

    body.game-active .game-layout .plr-section .field-row {
        flex: 1;
        min-height: 0;
    }

    body.game-active .game-layout .plr-bottom {
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    /* Cards sized to fit the equal-height rows (~60px per row) */
    body.game-active .game-card {
        width: 34px;
        height: 48px;
    }

    /* Hand cards: larger, overlapping, scrollable in landscape */
    body.game-active .game-layout .hand-zone .game-card {
        width: 48px;
        height: 67px;
        flex-shrink: 0;
        margin-left: -12px;
    }

    body.game-active .game-layout .hand-zone .game-card:first-of-type {
        margin-left: 0;
    }

    /* Loop cards: larger, overlapping, scrollable in landscape */
    body.game-active .game-layout .loop-zone .game-card {
        width: 48px;
        height: 67px;
        flex-shrink: 0;
        margin-left: -10px;
    }

    body.game-active .game-layout .loop-zone .game-card:first-of-type {
        margin-left: 0;
    }

    body.game-active .game-layout .field-space {
        width: 38px;
        height: 54px;
    }

    /* Card tracks its space so the JS aspect-ratio sizing carries through */
    body.game-active .game-layout .field-space .game-card {
        width: 100%;
        height: 100%;
    }

    body.game-active .deck-back-img {
        width: 34px;
        height: 48px;
    }

    /* Card slots: same overlay layout (card + centred count + bottom label),
       kept from collapsing in the compact landscape rows. */
    body.game-active .game-layout .deck-zone,
    body.game-active .game-layout .pile-zone {
        width: auto;
        height: auto;
        min-height: 58px;
    }

    body.game-active .game-layout .deck-zone {
        min-width: 48px;
        padding: 2px 4px;
    }

    body.game-active .game-layout .hand-zone {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 2px 6px;
        gap: 0;
        min-height: 0;
    }

    body.game-active .game-layout .hand-zone::-webkit-scrollbar,
    body.game-active .game-layout .loop-zone::-webkit-scrollbar {
        display: none;
    }

    body.game-active .game-layout .field-row {
        padding: 2px 4px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        justify-content: safe center;
    }

    body.game-active .game-layout .field-row::-webkit-scrollbar {
        display: none;
    }

    body.game-active .game-layout .loop-zone {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 4px 8px;
        gap: 0;
        height: auto;
    }

    body.game-active .game-layout .pile-zone {
        padding: 4px;
        min-width: 44px;
        overflow: visible;
    }

    body.game-active .game-layout .pile-zone .zone-label {
        font-size: 0.34rem;
        letter-spacing: 1px;
        white-space: nowrap;
    }

    body.game-active .game-layout .pile-zone .pile-count {
        font-size: 0.9rem;
    }

    body.game-active .mobile-hud-phase {
        font-size: 0.78rem;
    }

    /* Landscape: the action panel/buttons stay flex columns in the inline sidebar
       (the portrait strip turns them into a grid / fixed-height box — override all
       of that back here). */
    body.game-active .right-panel .action-panel {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        height: auto;
    }

    body.game-active .right-panel .action-buttons {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        height: auto;
        gap: 8px;
    }

    body.game-active .right-panel .action-buttons > button {
        align-self: auto;
    }

    body.game-active .right-panel .action-buttons .btn-gold,
    body.game-active .right-panel .action-buttons .btn-attack,
    body.game-active .right-panel .action-buttons .btn-confirm,
    body.game-active .right-panel .action-buttons .btn-danger {
        flex: none;
        width: 100%;
        padding: 10px 12px;
        font-size: 0.8rem;
        white-space: normal;
    }

    /* No top HUD in landscape — resign is the flag in the phase-box, which
       is visible in this sidebar. */

    /* Restore the full-size prompt (the portrait strip caps/clips it). */
    body.game-active .right-panel .prompt-text {
        font-size: 0.72rem;
        max-height: none;
        overflow: visible;
    }

    body.game-active .right-panel .coach-title {
        font-size: 0.8rem;
        white-space: normal;
    }

    body.game-active .right-panel .coach-how {
        font-size: 0.68rem;
        display: block;
        -webkit-line-clamp: unset;
    }

    body.game-active .right-panel .action-buttons .action-btn-row {
        flex: none;
        min-height: 40px;
    }

    /* A lone button is full-width too: the portrait strip's centred 64% cap otherwise leaks in
       (its selector outranks the ones above) and leaves it stranded on the left. */
    body.game-active .right-panel .action-buttons > button:only-of-type:not(.btn-back-to-lobby) {
        flex: none;
        width: 100%;
        max-width: none;
    }

    /* The sidebar makes every primary button full-width; inside the row it shares */
    body.game-active .right-panel .action-buttons .action-btn-row > .btn-confirm {
        flex: 1 1 auto;
        width: auto;
    }

    body.game-active .right-panel .action-buttons .wait-status {
        flex: none;
        min-height: 64px;
        flex-direction: column;
        padding: 10px;
        font-size: 0.7rem;
    }
}

/* ── Missions panel (daily / weekly tabs) ────────────────────── */

/* Registered so the accent blends gold <-> purple when Daily/Weekly switches, instead of snapping */
@property --mission-accent { syntax: '<color>'; inherits: true; initial-value: #ffbf00; }
@property --mission-accent-soft { syntax: '<color>'; inherits: true; initial-value: rgba(255, 191, 0, 0.3); }
@property --mission-accent-faint { syntax: '<color>'; inherits: true; initial-value: rgba(255, 191, 0, 0.1); }

.missions-panel {
    margin-top: 24px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 191, 0, 0.25);
    border-radius: 8px;
    /* Default accent = gold (daily). Weekly recolours these per-instance below. */
    --mission-accent: #ffbf00;
    --mission-accent-soft: rgba(255, 191, 0, 0.3);
    --mission-accent-faint: rgba(255, 191, 0, 0.1);
    transition: --mission-accent 0.45s ease, --mission-accent-soft 0.45s ease, --mission-accent-faint 0.45s ease, border-color 0.45s ease;
}

/* "CHALLENGES" beside the toggle */
.missions-head-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.missions-title {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'DragonSlayer', serif; font-size: 0.95rem; letter-spacing: 0.1em;
    color: var(--mission-accent); text-shadow: 0 0 10px var(--mission-accent-soft);
    white-space: nowrap;
}
.missions-title i { font-size: 0.8rem; }
/* Desktop: never wrap the header to a second row (the play menu must not scroll); a long
   translated label shrinks with an ellipsis instead */
@media only screen and (min-width: 768px) {
    #play-home .missions-header { flex-wrap: nowrap; }
    .missions-head-left { flex: 1 1 auto; }
    .missions-title { min-width: 0; flex: 0 1 auto; overflow: hidden; }
    .missions-title span { overflow: hidden; text-overflow: ellipsis; }
    .missions-tabs { flex-shrink: 0; }
}

/* ── Challenge switch: the Daily / Weekly toggle (home panel + in-game pane) ──────────
   A recessed glass track; a glossy, glowing pill that springs under the active tab and
   flashes a sheen each time it moves (placed by daily-missions.js placePill); per-tab hover
   light that follows the pointer (--mx), warming text and a tilting, glowing icon. The
   switch carries its own accent (gold / purple) so it works outside .missions-panel too. */
@property --sw-accent { syntax: '<color>'; inherits: true; initial-value: #ffbf00; }
@property --sw-accent-hi { syntax: '<color>'; inherits: true; initial-value: #ffe27a; }

div.challenge-switch {
    --sw-accent: #ffbf00;
    --sw-accent-hi: #ffe27a;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    overflow: visible;
    border: 1px solid color-mix(in srgb, var(--sw-accent) 38%, transparent);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0.04));
    box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.65), 0 0 18px color-mix(in srgb, var(--sw-accent) 12%, transparent);
    transition: --sw-accent 0.45s ease, --sw-accent-hi 0.45s ease;
}
div.challenge-switch.is-weekly { --sw-accent: #c890ff; --sw-accent-hi: #ecdaff; }

.challenge-switch .missions-tab-pill {
    position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; z-index: 0;
    overflow: hidden; pointer-events: none; opacity: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--sw-accent-hi) 0%, var(--sw-accent) 58%, color-mix(in srgb, var(--sw-accent) 80%, #000) 100%);
    box-shadow: 0 0 16px color-mix(in srgb, var(--sw-accent) 65%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -2px 5px rgba(0, 0, 0, 0.22);
}
.challenge-switch .missions-tab-pill.is-placed {
    opacity: 1;
    transition: transform 0.42s cubic-bezier(.3, 1.45, .5, 1), width 0.42s cubic-bezier(.3, 1.45, .5, 1);
}
.challenge-switch .missions-tab-pill::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.75), transparent);
    transform: skewX(-20deg); opacity: 0;
}
.challenge-switch .missions-tab-pill.sweep::after { animation: sw-sheen 0.7s ease-out 0.12s; }
@keyframes sw-sheen { 0% { left: -70%; opacity: 1; } 100% { left: 130%; opacity: 0.2; } }

.challenge-switch .missions-tab {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; gap: 6px;
    height: auto; margin: 0; padding: 5px 14px;
    border: none; border-radius: 999px; background: transparent;
    font-family: 'DragonSlayer', serif; font-size: 0.85rem; font-weight: normal; letter-spacing: 0.08em;
    color: rgba(240, 236, 230, 0.55); cursor: pointer;
    transition: color 0.3s ease, transform 0.15s ease, text-shadow 0.3s ease;
}
.challenge-switch .missions-tab + .missions-tab { border-left: none; }
/* Each tab's own colour, so hovering the other tab previews where you're switching to */
.challenge-switch .missions-tab[data-tab="daily"]  { --tab-accent: #ffbf00; --tab-accent-hi: #ffe27a; }
.challenge-switch .missions-tab[data-tab="weekly"] { --tab-accent: #c890ff; --tab-accent-hi: #ecdaff; }
.challenge-switch .missions-tab i { font-size: 0.72rem; transition: transform 0.45s cubic-bezier(.3, 1.7, .5, 1), filter 0.3s ease; }
/* Hover light: a radial glow centred where the pointer is */
.challenge-switch .missions-tab::before {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: radial-gradient(circle at var(--mx, 50%) 50%, color-mix(in srgb, var(--tab-accent, var(--sw-accent)) 34%, transparent), transparent 72%);
    opacity: 0; transition: opacity 0.25s ease;
}
.challenge-switch .missions-tab:not(.active):hover {
    color: var(--tab-accent-hi, var(--sw-accent-hi));
    transform: translateY(-1px);
    text-shadow: 0 0 10px color-mix(in srgb, var(--tab-accent, var(--sw-accent)) 70%, transparent);
}
.challenge-switch .missions-tab:not(.active):hover::before { opacity: 1; }
.challenge-switch .missions-tab:not(.active):hover i {
    transform: rotate(-14deg) scale(1.25);
    filter: drop-shadow(0 0 6px var(--tab-accent, var(--sw-accent)));
}
.challenge-switch .missions-tab.active { color: #160d02; background: transparent; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }
.challenge-switch .missions-tab.active i { transform: scale(1.1); }
.challenge-switch .missions-tab:active { transform: scale(0.94); }
.challenge-switch .missions-tab:focus-visible { outline: 2px solid var(--sw-accent-hi); outline-offset: 2px; }

/* In-game pane header: CHALLENGES + the switch */
.game-missions-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 8px 8px 0; }
.game-missions-head .challenge-switch .missions-tab { padding: 4px 11px; font-size: 0.78rem; }
.game-missions-head .missions-title { color: #ffbf00; text-shadow: 0 0 10px rgba(255, 191, 0, 0.3); font-size: 0.85rem; transition: color 0.45s ease, text-shadow 0.45s ease; }
.game-missions-head:has(.challenge-switch.is-weekly) .missions-title { color: #c890ff; text-shadow: 0 0 10px rgba(200, 144, 255, 0.35); }

/* Card swap: out toward the new tab's side, in from the other, staggered; the home list's
   height also eases between the two sets (set inline by daily-missions.js showTab) */
#missions-list { transition: height 0.32s ease; }
:is(#missions-list, #game-missions-list):is(.dm-leaving, .dm-entering) { overflow: hidden; }
:is(#missions-list, #game-missions-list).dm-leaving :is(.dm-card, .missions-empty, .game-missions-loading) {
    transition: opacity 0.16s ease, transform 0.16s ease; opacity: 0;
}
:is(#missions-list, #game-missions-list).dm-leaving.dm-to-left .dm-card { transform: translateX(-18px) scale(0.98); }
:is(#missions-list, #game-missions-list).dm-leaving.dm-to-right .dm-card { transform: translateX(18px) scale(0.98); }
:is(#missions-list, #game-missions-list).dm-entering :is(.dm-card, .missions-empty, .game-missions-loading) {
    animation: dm-card-in 0.36s cubic-bezier(.2, .8, .3, 1) both;
    animation-delay: calc(var(--dm-i, 0) * 45ms);
}
:is(#missions-list, #game-missions-list).dm-entering.dm-from-right .dm-card { --dm-from: 22px; }
:is(#missions-list, #game-missions-list).dm-entering.dm-from-left .dm-card { --dm-from: -22px; }
@keyframes dm-card-in { from { opacity: 0; transform: translateX(var(--dm-from, 0)) scale(0.97); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .challenge-switch .missions-tab-pill.is-placed { transition: none; }
    .challenge-switch .missions-tab-pill.sweep::after { animation: none; }
}

/* Weekly tint when the list is showing the weekly cadence. */
.missions-panel:has(.missions-list.is-weekly) {
    --mission-accent: #c890ff;
    --mission-accent-soft: rgba(200, 144, 255, 0.35);
    --mission-accent-faint: rgba(200, 144, 255, 0.12);
    border-color: rgba(200, 144, 255, 0.28);
}

.missions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

/* Segmented Daily / Weekly toggle. */
.missions-tabs {
    display: inline-flex;
    border: 1px solid var(--mission-accent-soft);
    border-radius: 999px;
    overflow: hidden;
}

.missions-tab {
    background: transparent;
    color: rgba(240, 236, 230, 0.7);
    border: none;
    padding: 4px 16px;
    font-family: 'DragonSlayer', serif;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    cursor: pointer;
}

.missions-tab + .missions-tab {
    border-left: 1px solid var(--mission-accent-soft);
}

.missions-tab.active {
    background: var(--mission-accent);
    color: #0e0e0e;
}

.missions-timer {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: #d8c896;
    background: var(--mission-accent-faint);
    border: 1px solid var(--mission-accent-soft);
    border-radius: 999px;
    padding: 2px 10px;
    white-space: nowrap;
}

.missions-timer i {
    font-size: 0.72rem;
    color: var(--mission-accent);
}

#missions-timer-value {
    font-variant-numeric: tabular-nums;
}

.missions-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}

.missions-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: rgba(240, 236, 230, 0.55);
    font-size: 0.82rem;
    padding: 10px 4px;
}

/* Weekly card accent — recolour the gold borders / progress to the weekly hue. */
.missions-list.is-weekly .dm-card:not(.dm-completed) {
    border-color: rgba(200, 144, 255, 0.3);
}

.missions-list.is-weekly .dm-card:not(.dm-completed) .dm-name {
    color: #d4a8ff;
}

.missions-list.is-weekly .dm-card:not(.dm-completed) .dm-progress-fill {
    background: linear-gradient(90deg, #c890ff, #e3ccff);
}

.missions-list.is-weekly .dm-reward {
    color: rgba(212, 168, 255, 0.92);
}

.dm-card {
    background: #1c1c1c;
    border: 1px solid rgba(255, 191, 0, 0.25);
    border-radius: 5px;
    padding: 7px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.85rem;
}

.dm-card.dm-completed {
    border-color: rgba(120, 200, 120, 0.6);
    background: rgba(50, 90, 50, 0.18);
}

.dm-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dm-name {
    color: #ffbf00;
    font-weight: 600;
    letter-spacing: 0.03em;
    font-size: 0.9rem;
}

.dm-completed .dm-name {
    color: #b6e8b6;
}

.dm-badge {
    background: rgba(120, 200, 120, 0.25);
    color: #d6f5d6;
    border: 1px solid rgba(120, 200, 120, 0.5);
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
}

.dm-description {
    color: rgba(240, 236, 230, 0.85);
    font-size: 0.8rem;
    line-height: 1.25;
}

/* Progress bar + count share a row to save a full line of vertical space. */
.dm-progress-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dm-progress-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.dm-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffbf00, #ffd860);
    transition: width 0.3s ease;
}

.dm-completed .dm-progress-fill {
    background: linear-gradient(90deg, #6bbd6b, #a4e0a4);
}

.dm-progress-text {
    color: rgba(240, 236, 230, 0.7);
    font-size: 0.75rem;
    white-space: nowrap;
    min-width: 38px;
    text-align: right;
}

.dm-rewards {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.dm-reward {
    color: rgba(255, 191, 0, 0.9);
    font-size: 0.78rem;
}

.dm-reward-currency {
    font-size: 0.7rem;
    padding: 2px 9px;
}

.dm-reward i {
    margin-right: 3px;
}

/* In-game missions panel: narrower side panel → stack cards vertically. */
/* In-game daily/weekly toggle, centred above the scrolling card list. */


.game-missions-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px;
    overflow-y: auto;
}

.game-missions-list .dm-card {
    padding: 10px 12px;
    font-size: 0.9rem;
}

/* Weekly tint for the in-game list, mirroring the home panel. */
.game-missions-list.is-weekly .dm-card:not(.dm-completed) {
    border-color: rgba(200, 144, 255, 0.3);
}
.game-missions-list.is-weekly .dm-card:not(.dm-completed) .dm-name {
    color: #d4a8ff;
}
.game-missions-list.is-weekly .dm-card:not(.dm-completed) .dm-progress-fill {
    background: linear-gradient(90deg, #c890ff, #e3ccff);
}
.game-missions-list.is-weekly .dm-reward {
    color: rgba(212, 168, 255, 0.92);
}

.game-missions-loading {
    color: rgba(240, 236, 230, 0.55);
    text-align: center;
    padding: 16px;
}


/* ── Drag-to-zone (card-moving prompts) ───────────────────── */

.game-card.loop-draggable {
    cursor: grab;
}

body.card-dragging,
body.card-dragging * {
    cursor: grabbing !important;
}

/* The card left behind in its zone while its ghost is being dragged */
.game-card.drag-source {
    opacity: 0.3;
    filter: grayscale(0.6) brightness(0.8);
    transform: none !important;
    box-shadow: none !important;
}

/* The floating card that follows the pointer */
.game-card.drag-ghost {
    position: fixed;
    left: 0;
    top: 0;
    margin: 0;
    z-index: 6000;
    pointer-events: none;
    transition: none;
    will-change: transform;
    border: 1px solid #ffbf00;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6),
                0 0 26px rgba(255, 191, 0, 0.5),
                0 0 70px rgba(255, 191, 0, 0.2);
}

/* Brief transition while the picked-up card pops to carried size */
.game-card.drag-ghost.drag-ghost-pickup {
    transition: transform 0.16s ease-out;
}

.game-card.drag-ghost.drag-ghost-return {
    transition: transform 0.22s ease;
}

/* Charge-up: approaching a drop target the held card trembles and glows… */
.game-card.drag-ghost.drag-ghost-near {
    animation: ghost-charge-glow 0.4s ease-in-out infinite alternate;
}

.game-card.drag-ghost.drag-ghost-near img {
    animation: ghost-vibrate 0.1s linear infinite;
}

/* …locked over the target it burns white-hot. Most zones get a calm
   tremble; only playing onto the loop earns the full shake. */
.game-card.drag-ghost.drag-ghost-locked {
    animation: ghost-charge-glow 0.16s ease-in-out infinite alternate;
}

.game-card.drag-ghost.drag-ghost-locked img {
    animation: ghost-vibrate 0.09s linear infinite;
}

.game-card.drag-ghost.drag-theme-play.drag-ghost-locked img {
    animation: ghost-vibrate-hard 0.07s linear infinite;
}

@keyframes ghost-vibrate {
    0%   { transform: translate(0.3px, -0.2px) rotate(0.2deg); }
    25%  { transform: translate(-0.35px, 0.25px) rotate(-0.25deg); }
    50%  { transform: translate(0.25px, 0.35px) rotate(0.15deg); }
    75%  { transform: translate(-0.2px, -0.3px) rotate(-0.15deg); }
    100% { transform: translate(0.3px, -0.2px) rotate(0.2deg); }
}

@keyframes ghost-vibrate-hard {
    0%   { transform: translate(0.8px, -0.6px) rotate(0.5deg); }
    25%  { transform: translate(-0.9px, 0.7px) rotate(-0.6deg); }
    50%  { transform: translate(0.7px, 0.9px) rotate(0.4deg); }
    75%  { transform: translate(-0.6px, -0.8px) rotate(-0.4deg); }
    100% { transform: translate(0.8px, -0.6px) rotate(0.5deg); }
}

@keyframes ghost-charge-glow {
    from {
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6),
                    0 0 26px rgba(255, 191, 0, 0.5),
                    0 0 70px rgba(255, 191, 0, 0.2);
        filter: brightness(1);
    }
    to {
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6),
                    0 0 34px rgba(255, 215, 80, 0.85),
                    0 0 95px rgba(255, 191, 0, 0.45);
        filter: brightness(1.3);
    }
}

/* The slam: rise over the zone, smash down, bounce, fade. The keyframes own
   the transform — start/landing spots come from CSS vars set in JS. The 1.6
   start scale matches GHOST_SCALE in play.js. */
.game-card.drag-ghost.drag-ghost-slam {
    transition: none;
    animation: ghost-slam 0.42s cubic-bezier(0.3, 0, 0.4, 1) forwards;
}

@keyframes ghost-slam {
    0% {
        transform: translate(var(--from-x), var(--from-y)) rotate(var(--from-tilt, 0deg)) scale(1.6);
        opacity: 1;
    }
    45% {
        transform: translate(var(--slam-x), var(--slam-y)) rotate(0deg) scale(1.9);
        opacity: 1;
    }
    68% {
        transform: translate(var(--slam-x), var(--slam-y)) rotate(0deg) scale(0.88);
        opacity: 1;
    }
    80% {
        transform: translate(var(--slam-x), var(--slam-y)) rotate(0deg) scale(1.05);
        opacity: 0.9;
    }
    100% {
        transform: translate(var(--slam-x), var(--slam-y)) rotate(0deg) scale(0.96);
        opacity: 0;
    }
}

/* Whole-board jolt when a card slams onto the loop: hit from above, so the board
   dips and squashes a hair, recoils up, then settles in shrinking wobbles */
.drop-slam-shake {
    animation: drop-slam-shake 0.42s cubic-bezier(0.2, 0.7, 0.3, 1);
}

@keyframes drop-slam-shake {
    0%   { transform: translate(0, 0) scale(1, 1); }
    10%  { transform: translate(0, 5px) scale(1.003, 0.994); }
    26%  { transform: translate(-2px, -3px) scale(0.999, 1.002); }
    42%  { transform: translate(2px, 1.5px) scale(1, 1); }
    58%  { transform: translate(-1px, -1px); }
    76%  { transform: translate(0.5px, 0.5px); }
    100% { transform: translate(0, 0) scale(1, 1); }
}

/* Destination zones light up while a card is held */
.game-layout .zone.drop-ready {
    border: 1px dashed rgba(255, 191, 0, 0.7);
    background: rgba(255, 191, 0, 0.05);
    animation: loop-drop-pulse 1.1s ease-in-out infinite;
}

@keyframes loop-drop-pulse {
    0%, 100% {
        box-shadow: inset 0 0 20px rgba(255, 191, 0, 0.10),
                    0 0 12px rgba(255, 191, 0, 0.15);
    }
    50% {
        box-shadow: inset 0 0 32px rgba(255, 191, 0, 0.22),
                    0 0 24px rgba(255, 191, 0, 0.30);
    }
}

.game-layout .zone.drop-ready::after {
    content: attr(data-drop-hint);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.55rem;
    letter-spacing: 3px;
    color: rgba(255, 191, 0, 0.6);
    background: rgba(10, 9, 5, 0.7);
    border: 1px solid rgba(255, 191, 0, 0.3);
    border-radius: 6px;
    padding: 4px 9px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 25;
}

/* The held card is over a target — commit styling */
.game-layout .zone.drop-hover {
    border-color: #ffbf00;
    border-style: solid;
    background: rgba(255, 191, 0, 0.10);
    box-shadow: inset 0 0 40px rgba(255, 191, 0, 0.25),
                0 0 28px rgba(255, 191, 0, 0.40);
    animation: none;
}

.game-layout .zone.drop-hover::after {
    color: #0e0e0e;
    background: #ffbf00;
    border-color: #ffbf00;
}

/* Quick flash on the zone when a card lands in it */
.game-layout .zone.drop-impact {
    animation: zone-impact 0.45s ease-out;
}

@keyframes zone-impact {
    0% {
        box-shadow: inset 0 0 50px rgba(255, 232, 160, 0.35),
                    0 0 36px rgba(255, 191, 0, 0.55);
        transform: scale(1.03);
    }
    100% {
        transform: scale(1);
    }
}

/* ── Loop landing (play.js landOnLoop) ──────────────────────── */

/* Invisible stand-in holding the new card's slot until the real card renders */
.game-layout .loop-zone .game-card.loop-slot-reserve {
    visibility: hidden;
    pointer-events: none;
}

/* The played card stays dimmed in the hand until it leaves it */
.game-card.drag-source-committed {
    opacity: 0.3;
    filter: grayscale(0.6) brightness(0.8);
    transform: none !important;
    box-shadow: none !important;
}

/* The real card arrived while the ghost is still landing: hidden until the hand-off */
.game-layout .loop-zone .game-card.loop-card-incoming {
    opacity: 0 !important;
}

/* Afterglow on the real card as it takes over from the ghost */
.game-layout .loop-zone .game-card.loop-card-landed {
    animation: loop-card-landed 0.9s ease-out;
}

@keyframes loop-card-landed {
    0% {
        box-shadow: 0 0 22px rgba(255, 215, 110, 0.9), 0 0 50px rgba(255, 191, 0, 0.45);
        filter: brightness(1.25);
    }
    100% {
        box-shadow: 0 0 0 rgba(255, 215, 110, 0), 0 0 0 rgba(255, 191, 0, 0);
        filter: brightness(1);
    }
}

/* Shockwave: a flat gold flare racing out along the loop from the hit */
.loop-impact-wave {
    position: fixed;
    width: 0;
    height: 0;
    z-index: 5995;
    pointer-events: none;
}

.loop-impact-wave::before {
    content: '';
    position: absolute;
    left: -90px;
    top: -10px;
    width: 180px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(255, 240, 190, 0.95) 0%,
        rgba(255, 191, 0, 0.55) 40%,
        rgba(255, 191, 0, 0) 72%);
    animation: loop-impact-wave 0.55s cubic-bezier(0.15, 0.8, 0.3, 1) forwards;
}

@keyframes loop-impact-wave {
    0%   { transform: scaleX(0.15) scaleY(1.4); opacity: 1; }
    100% { transform: scaleX(3.4) scaleY(0.5); opacity: 0; }
}

/* Embers kicked out low and sideways (motion is a Web Animation in play.js) */
.loop-impact-ember {
    position: fixed;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ffe08a;
    box-shadow: 0 0 6px #ffbf00, 0 0 12px rgba(255, 191, 0, 0.6);
    z-index: 5996;
    pointer-events: none;
}

/* The loop lights up from inside on the hit (no transform: the slot must not move) */
.game-layout .loop-zone.loop-impact-glow {
    animation: loop-impact-glow 0.55s ease-out;
}

@keyframes loop-impact-glow {
    0% {
        box-shadow: inset 0 0 55px rgba(255, 225, 150, 0.4),
                    0 0 30px rgba(255, 191, 0, 0.5);
    }
    100% {
        box-shadow: inset 0 0 0 rgba(255, 225, 150, 0),
                    0 0 0 rgba(255, 191, 0, 0);
    }
}

/* Expanding ring + sparks where the card lands, tinted per action theme */
.drop-burst {
    position: fixed;
    width: 0;
    height: 0;
    z-index: 5990;
    pointer-events: none;
}

.drop-burst::before {
    content: '';
    position: absolute;
    left: -40px;
    top: -40px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid var(--burst-color, #ffbf00);
    box-shadow: 0 0 18px var(--burst-color, #ffbf00),
                inset 0 0 12px var(--burst-color, #ffbf00);
    animation: burst-ring 0.5s ease-out forwards;
}

@keyframes burst-ring {
    0% {
        transform: scale(0.15);
        opacity: 0.9;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

.drop-burst-spark {
    position: absolute;
    left: -2px;
    top: -2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--burst-color, #ffbf00);
    box-shadow: 0 0 8px var(--burst-color, #ffbf00);
    animation: burst-spark 0.55s ease-out forwards;
}

@keyframes burst-spark {
    0% {
        transform: rotate(var(--ang)) translateX(6px) scale(1);
        opacity: 1;
    }
    100% {
        transform: rotate(var(--ang)) translateX(54px) scale(0.3);
        opacity: 0;
    }
}

/* Hand card already committed as DECIDE's top-of-deck pick */
.game-card.decide-top-card {
    opacity: 0.35;
    filter: grayscale(0.5);
}

/* Pulse the action panel when a drop needs a follow-up button choice
   (PLAY vs PLAY SHADED, top vs bottom of deck) */
#action-buttons.attention {
    animation: action-attention 0.5s ease 2;
}

@keyframes action-attention {
    50% {
        transform: scale(1.03);
        filter: drop-shadow(0 0 10px rgba(255, 191, 0, 0.5));
    }
}


/* ── Active loop card ─────────────────────────────────────── */

/* The loop card that will activate next: spinning golden halo, shimmer
   sweep across the art, a gentle levitating bob, and an ACTIVE banner. */

@property --loop-halo-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.game-card.loop-active-card {
    border-color: #ffbf00;
    animation: loop-active-bob 2.6s ease-in-out infinite;
}

/* Picked as a target (FEAST eating itself, ALPHA/OMEGA on their own card): the bob animation
   owns transform + box-shadow, so the plain .selected look never showed — stop it and lift
   the card with a hot ember rim that can't be mistaken for the "next up" glow. */
.game-card.loop-active-card.selected {
    animation: none;
    transform: translateY(-6px) scale(1.06);
    border: 2px solid #ff6a2a;
    outline: 2px solid rgba(255, 106, 42, 0.55);
    outline-offset: 1px;
    box-shadow: 0 0 16px rgba(255, 106, 42, 0.7), 0 0 32px rgba(255, 106, 42, 0.3);
}

/* Pop above overlapping loop neighbours (mobile fans the cards) */
.game-layout .loop-zone .game-card.loop-active-card {
    z-index: 4;
}

/* Spinning halo ring just outside the card edge */
.game-card.loop-active-card::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 9px;
    padding: 2px;
    background: conic-gradient(from var(--loop-halo-angle),
        transparent 0deg,
        rgba(255, 191, 0, 0.15) 40deg,
        #ffbf00 90deg,
        #fff3c4 110deg,
        #ffbf00 130deg,
        rgba(255, 191, 0, 0.15) 180deg,
        transparent 220deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
    animation: loop-halo-spin 2.6s linear infinite;
    pointer-events: none;
}

@keyframes loop-halo-spin {
    to { --loop-halo-angle: 360deg; }
}

/* Light shimmer sweeping across the card face */
.game-card.loop-active-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 5px;
    background: linear-gradient(115deg,
        transparent 30%,
        rgba(255, 235, 170, 0.22) 46%,
        rgba(255, 255, 255, 0.32) 50%,
        rgba(255, 235, 170, 0.22) 54%,
        transparent 70%);
    background-size: 250% 100%;
    animation: loop-active-shine 2.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes loop-active-shine {
    0%, 30%   { background-position: 200% 0; }
    70%, 100% { background-position: -100% 0; }
}

/* Levitating bob with a breathing glow */
@keyframes loop-active-bob {
    0%, 100% {
        transform: translateY(0);
        box-shadow: 0 0 12px rgba(255, 191, 0, 0.45),
                    0 0 30px rgba(255, 191, 0, 0.18);
    }
    50% {
        transform: translateY(-4px);
        box-shadow: 0 7px 16px rgba(255, 191, 0, 0.55),
                    0 0 44px rgba(255, 191, 0, 0.3);
    }
}

.loop-active-badge {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.4rem;
    letter-spacing: 2px;
    color: #0e0e0e;
    background: linear-gradient(180deg, #ffd75e, #ffbf00);
    border-radius: 3px;
    padding: 2px 6px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 5;
    box-shadow: 0 0 10px rgba(255, 191, 0, 0.6);
}

/* Opponent's active card: same banner, ember-tinted so ownership reads at
   a glance (the ▲/▼ arrow also points at the owner's side) */
.loop-active-badge.loop-active-opp {
    background: linear-gradient(180deg, #f0915e, #d65a2e);
    box-shadow: 0 0 10px rgba(230, 110, 55, 0.6);
}


/* ── Card movement flights ────────────────────────────────── */

/* A card flying between zones after a state change (either player's move) */
.game-card.move-ghost {
    position: fixed;
    left: 0;
    top: 0;
    margin: 0;
    z-index: 5900;
    pointer-events: none;
    transition: none;
    will-change: transform;
    border: 1px solid rgba(255, 191, 0, 0.5);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5),
                0 0 18px rgba(255, 191, 0, 0.25);
}

.game-card.move-ghost.move-ghost-fly {
    transition: transform 0.45s cubic-bezier(0.25, 0.1, 0.3, 1);
}

/* BOUNCE return — a bright return-green glow trailing the looping card */
.game-card.move-ghost.bounce-ghost {
    z-index: 5960;
    border-color: rgba(126, 217, 87, 0.85);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55),
                0 0 26px rgba(126, 217, 87, 0.75),
                0 0 50px rgba(126, 217, 87, 0.35);
    filter: brightness(1.08);
}

/* TERRAFORM — roots reach between two spaces, absorb them, regrow them swapped */
.terraform-roots {
    position: fixed;
    pointer-events: none;
    z-index: 5345;
    overflow: visible;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

.terraform-roots-fade { opacity: 0; }

.terraform-root {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 3px rgba(120, 200, 90, 0.7))
            drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: terraform-root-draw 0.4s ease-out forwards;
}

@keyframes terraform-root-draw {
    to { stroke-dashoffset: 0; }
}

/* a space + its card, absorbed or regrown */
.terraform-pod {
    position: fixed;
    pointer-events: none;
    z-index: 5348;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid rgba(126, 217, 87, 0.85);
    box-shadow: 0 0 18px rgba(110, 200, 80, 0.75),
                inset 0 0 12px rgba(90, 170, 60, 0.5);
    transform-origin: center center;
}

.terraform-pod img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.terraform-pod-absorb {
    animation: terraform-absorb 0.42s cubic-bezier(0.5, 0, 0.8, 0.3) forwards;
}

@keyframes terraform-absorb {
    0%   { transform: scale(1) rotate(0deg); opacity: 1; }
    100% { transform: scale(0) rotate(-95deg); opacity: 0; }
}

.terraform-pod-regrow {
    animation: terraform-regrow 0.52s cubic-bezier(0.3, 1.35, 0.5, 1) forwards;
}

@keyframes terraform-regrow {
    0%   { transform: scale(0) rotate(65deg); opacity: 0; }
    55%  { opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* leaves bursting open as the swapped content regrows */
.terraform-leaf {
    position: fixed;
    width: 11px;
    height: 7px;
    margin: -3.5px 0 0 -5.5px;
    border-radius: 80% 12% 80% 12%;
    background: radial-gradient(ellipse at 30% 50%, #b6e88a, #4f9a36 75%);
    box-shadow: 0 0 6px rgba(110, 200, 80, 0.6);
    pointer-events: none;
    z-index: 5349;
    opacity: 1;
    transition: transform 0.7s cubic-bezier(0.3, 0.6, 0.4, 1), opacity 0.7s ease-out;
}

/* The real card at the destination stays hidden until its flight lands */
.game-card.move-arriving {
    visibility: hidden;
}


/* ── Ability strikes & pass feedback ──────────────────────── */

/* Beam fired from an activating loop card at its victim(s). The rotated
   container holds the line; the ::before grows and flickers along it. */
.laser-beam {
    position: fixed;
    height: 4px;
    margin-top: -2px;
    transform-origin: 0 50%;
    pointer-events: none;
    z-index: 5950;
}

.laser-beam::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 2px;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.95),
        var(--beam-color, #ff4040));
    box-shadow: 0 0 10px var(--beam-color, #ff4040),
                0 0 26px var(--beam-color, #ff4040);
    transform-origin: 0 50%;
    animation: laser-fire 0.45s ease-out forwards;
}

@keyframes laser-fire {
    0%   { transform: scaleX(0);   opacity: 0.9; }
    18%  { transform: scaleX(1);   opacity: 1; }
    30%  { transform: scaleX(1);   opacity: 0.6; }
    45%  { transform: scaleX(1);   opacity: 1; }
    100% { transform: scaleX(1);   opacity: 0; }
}

/* ── BATTLE CINEMATIC (post-reaction beam duel) ───────────────
   Attacker fires ember, defender fires frost; the beams clash at a wrestling
   midpoint, then the real winner's beam pushes through and detonates the
   loser (both, on a power tie). Elements are positioned per-frame by JS. */

.battle-beam {
    position: fixed;
    height: 13px;
    margin-top: -6.5px;
    transform-origin: 0 50%;
    pointer-events: none;
    z-index: 5960;
    border-radius: 7px;
}

.battle-beam::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    /* hot white core down the centre, bleeding to the beam color at the edges */
    background: linear-gradient(0deg,
            var(--beam-color) 0%, rgba(255, 255, 255, 1) 50%, var(--beam-color) 100%),
        linear-gradient(90deg, rgba(255, 255, 255, 1), var(--beam-color));
    background-blend-mode: screen;
    box-shadow: 0 0 18px var(--beam-color), 0 0 46px var(--beam-color), 0 0 92px var(--beam-glow);
}

/* crackling energy flowing along the beam */
.battle-beam::after {
    content: '';
    position: absolute;
    inset: -3px 0;
    border-radius: inherit;
    background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(255, 255, 255, 0.6) 12px 20px);
    mix-blend-mode: screen;
    opacity: 0.7;
    animation: battle-beam-flow 0.32s linear infinite;
}

@keyframes battle-beam-flow {
    from { background-position: 0 0; }
    to   { background-position: 40px 0; }
}

.battle-beam-fire { --beam-color: #ff5a00; --beam-glow: rgba(255, 60, 0, 0.6); }
.battle-beam-ice  { --beam-color: #7fdcff; --beam-glow: rgba(80, 180, 255, 0.6); }

/* winning beam surges thicker and brighter while it overpowers the other */
.battle-beam.battle-beam-flare::before {
    box-shadow: 0 0 30px var(--beam-color), 0 0 72px var(--beam-color), 0 0 140px var(--beam-glow);
    transform: scaleY(1.45);
}

.battle-beam.battle-beam-die {
    animation: battle-beam-die 0.3s ease-out forwards;
}

@keyframes battle-beam-die {
    to { opacity: 0; }
}

/* ── Infinite power (play.js frameObliterate / frameCataclysm) ──
   A colossal beam, three times as thick, white-gold at the core, its sheath
   thrashing; the burning card shudders white-hot; two infinite beams meet
   around a swelling white core that detonates in a whiteout. */
.battle-beam.battle-beam-infinite {
    height: 40px;
    margin-top: -20px;
    border-radius: 20px;
    z-index: 5962;
}

.battle-beam.battle-beam-infinite::before {
    background: linear-gradient(0deg,
            var(--beam-color) 0%, #fff6d8 30%, #ffffff 50%, #fff6d8 70%, var(--beam-color) 100%),
        linear-gradient(90deg, #ffffff, var(--beam-color));
    box-shadow: 0 0 30px var(--beam-color), 0 0 80px var(--beam-color), 0 0 160px var(--beam-glow),
        0 0 60px rgba(255, 245, 210, 0.8);
    animation: battle-beam-thrash 0.09s linear infinite alternate;
}

.battle-beam.battle-beam-infinite::after {
    inset: 6px 0;
    opacity: 0.9;
    animation-duration: 0.14s;
}

@keyframes battle-beam-thrash {
    from { transform: scaleY(0.88); filter: brightness(1); }
    to   { transform: scaleY(1.18); filter: brightness(1.35); }
}

.battle-beam.battle-beam-die-slow {
    animation: battle-beam-die 0.7s ease-in forwards;
}

.battle-charge-orb.battle-orb-infinite {
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    background: radial-gradient(circle, #ffffff 0%, #fff2c0 35%, rgba(255, 210, 120, 0.55) 60%, transparent 75%);
    box-shadow: 0 0 40px rgba(255, 235, 170, 0.9), 0 0 90px rgba(255, 200, 90, 0.5);
}

.game-card.battle-charging-infinite {
    box-shadow: 0 0 22px rgba(255, 245, 210, 0.95), 0 0 60px rgba(255, 210, 120, 0.7), 0 0 110px rgba(255, 180, 60, 0.4);
}

/* Filter-only, like battle-strain — the field-space transform stays untouched */
.game-card.battle-obliterating {
    animation: battle-obliterating 0.07s linear infinite;
    z-index: 5;
}

@keyframes battle-obliterating {
    0%   { filter: brightness(2.6) saturate(0.3) drop-shadow(3px 0 0 rgba(255, 255, 255, 0.8)); }
    50%  { filter: brightness(3.6) saturate(0.1) drop-shadow(-3px 1px 0 rgba(255, 240, 200, 0.8)); }
    100% { filter: brightness(2.2) saturate(0.4) drop-shadow(1px -2px 0 rgba(255, 255, 255, 0.8)); }
}

.battle-singularity {
    position: fixed;
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 5971;
    background: radial-gradient(circle, #ffffff 0%, #ffffff 22%, rgba(255, 236, 190, 0.9) 38%,
        rgba(255, 140, 60, 0.45) 55%, rgba(120, 200, 255, 0.35) 68%, transparent 76%);
    box-shadow: 0 0 60px rgba(255, 255, 255, 0.8), 0 0 140px rgba(255, 200, 120, 0.5);
    animation: battle-singularity-swell 1.45s cubic-bezier(0.5, 0, 0.9, 0.5) both,
        battle-orb-critical 0.08s ease-in-out infinite alternate;
}

@keyframes battle-singularity-swell {
    from { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
    to   { width: 190px; height: 190px; margin: -95px 0 0 -95px; }
}

.battle-explosion-flash.battle-explosion-mega {
    width: 320px;
    height: 320px;
    margin: -160px 0 0 -160px;
    animation-duration: 0.8s;
}

.battle-explosion-ring.battle-explosion-mega {
    border-width: 6px;
    box-shadow: 0 0 40px rgba(255, 230, 170, 0.95), inset 0 0 24px rgba(255, 200, 100, 0.8);
    animation: battle-ring-mega 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes battle-ring-mega {
    0%   { transform: scale(0.3); opacity: 1; }
    100% { transform: scale(11); opacity: 0; }
}

.battle-whiteout {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 5990;
    background: radial-gradient(ellipse at center, #ffffff 0%, rgba(255, 245, 220, 0.85) 45%, rgba(255, 220, 160, 0.4) 100%);
    animation: battle-whiteout 0.75s ease-out both;
}

@keyframes battle-whiteout {
    0%   { opacity: 0; }
    12%  { opacity: 0.95; }
    100% { opacity: 0; }
}

body.battle-shake-big {
    animation: battle-screen-shake-big 0.7s linear;
}

@keyframes battle-screen-shake-big {
    0%, 100% { transform: translate(0, 0); }
    10%      { transform: translate(-10px, 7px); }
    25%      { transform: translate(9px, -8px); }
    40%      { transform: translate(-7px, -5px); }
    55%      { transform: translate(6px, 6px); }
    70%      { transform: translate(-4px, 3px); }
    85%      { transform: translate(2px, -2px); }
}

/* where the beams meet */
.battle-clash-orb {
    position: fixed;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 5970;
    background: radial-gradient(circle,
        #fff 0%, #ffe9b0 30%,
        rgba(255, 140, 40, 0.7) 55%,
        rgba(120, 200, 255, 0.4) 75%,
        transparent 100%);
    filter: blur(1px);
    animation: battle-orb-throb 0.22s ease-in-out infinite alternate;
}

@keyframes battle-orb-throb {
    from { transform: scale(0.85); opacity: 0.85; }
    to   { transform: scale(1.25); opacity: 1; }
}

/* destabilizing — a power tie about to annihilate both */
.battle-clash-orb.battle-orb-critical {
    animation: battle-orb-critical 0.12s ease-in-out infinite alternate;
}

@keyframes battle-orb-critical {
    from { transform: scale(1.3); filter: blur(0.5px) brightness(1.2); }
    to   { transform: scale(2.1); filter: blur(1.5px) brightness(1.6); }
}

/* The survivor's barrier — thrown up at the midpoint of a decisive duel to
   turn the doomed combatant's beam. JS sets --rot (facing the loser) and
   --shield-color, and pins it at the clash midpoint. */
.battle-shield {
    position: fixed;
    width: 92px;
    height: 92px;
    pointer-events: none;
    z-index: 5972;
    --shield-color: #ffd27a;
    --rot: 0deg;
    border-radius: 50%;
    /* a convex energy face, brightest on the side meeting the beam (+x local) */
    background: radial-gradient(circle at 72% 50%,
        rgba(255, 255, 255, 0.95) 0%,
        var(--shield-color) 26%,
        rgba(255, 255, 255, 0.12) 52%,
        transparent 68%);
    box-shadow: 0 0 24px var(--shield-color), 0 0 56px var(--shield-color);
    opacity: 0;
    animation: battle-shield 0.7s ease-out forwards;
}

/* the hard leading rim that actually deflects the beam */
.battle-shield::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border-right: 3px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 16px var(--shield-color);
    -webkit-mask: linear-gradient(90deg, transparent 42%, #000 78%);
            mask: linear-gradient(90deg, transparent 42%, #000 78%);
}

/* hexagonal energy lattice shimmering across the dome */
.battle-shield::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        repeating-linear-gradient(60deg, transparent 0 9px, rgba(255, 255, 255, 0.18) 9px 10px),
        repeating-linear-gradient(-60deg, transparent 0 9px, rgba(255, 255, 255, 0.18) 9px 10px);
    -webkit-mask: radial-gradient(circle at 72% 50%, #000 50%, transparent 70%);
            mask: radial-gradient(circle at 72% 50%, #000 50%, transparent 70%);
    opacity: 0.7;
}

@keyframes battle-shield {
    0%   { opacity: 0;    transform: translate(-50%, -50%) rotate(var(--rot)) scale(0.2); }
    16%  { opacity: 1;    transform: translate(-50%, -50%) rotate(var(--rot)) scale(1.14); }
    30%  { opacity: 1;    transform: translate(-50%, -50%) rotate(var(--rot)) scale(0.98); }
    44%  { opacity: 0.95; transform: translate(-50%, -50%) rotate(var(--rot)) scale(1.04); }
    70%  { opacity: 0.8;  transform: translate(-50%, -50%) rotate(var(--rot)) scale(1); }
    100% { opacity: 0;    transform: translate(-50%, -50%) rotate(var(--rot)) scale(0.9); }
}

/* energy gathering at each muzzle during charge-up */
.battle-charge-orb {
    position: fixed;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 5955;
    animation: battle-charge-grow 1s ease-in both;
}

.battle-orb-fire {
    background: radial-gradient(circle, #fff, #ffb060 40%, rgba(255, 80, 0, 0.6) 70%, transparent);
    box-shadow: 0 0 26px rgba(255, 90, 0, 0.8);
}

.battle-orb-ice {
    background: radial-gradient(circle, #fff, #aee8ff 40%, rgba(70, 170, 255, 0.6) 70%, transparent);
    box-shadow: 0 0 26px rgba(110, 200, 255, 0.8);
}

@keyframes battle-charge-grow {
    0%   { transform: scale(0.1); opacity: 0; }
    60%  { opacity: 0.9; }
    100% { transform: scale(1.5); opacity: 1; }
}

.battle-spark {
    position: fixed;
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(255, 200, 80, 0.9);
    pointer-events: none;
    z-index: 5975;
    transition: transform 0.45s ease-out, opacity 0.45s ease-out;
}

/* Treasure gem torn loose by an undefended attacker — flies up the beam */
.battle-gem {
    position: fixed;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 2px;
    background: linear-gradient(135deg, #ffe9a0, #ffbf00 60%, #b8860b);
    box-shadow: 0 0 10px rgba(255, 191, 0, 0.9), 0 0 22px rgba(255, 191, 0, 0.4);
    transform: rotate(45deg);
    pointer-events: none;
    z-index: 5982;
    transition: transform 0.65s cubic-bezier(0.3, 0, 0.4, 1), opacity 0.65s ease-in;
}

/* Treasure count popping as each plundered gem lands mid-cinematic */
.treasure-display.treasure-tick {
    display: inline-block;
    animation: treasure-tick-pop 0.25s ease-out;
}

@keyframes treasure-tick-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.3); color: #ffe9a0; text-shadow: 0 0 12px rgba(255, 220, 120, 0.9); }
    100% { transform: scale(1); }
}

/* The player chip rattling under direct fire */
.battle-target-hit {
    animation: battle-target-hit 0.3s linear infinite;
}

@keyframes battle-target-hit {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.7) saturate(1.4) drop-shadow(0 0 8px rgba(255, 150, 40, 0.8)); }
}

/* combatants strain while charging and firing — filter-only pulse so we
   never fight the field-space centering transform */
.game-card.battle-charging-fire,
.game-card.battle-charging-ice {
    animation: battle-strain 0.18s linear infinite;
    z-index: 5;
}

.game-card.battle-charging-fire {
    box-shadow: 0 0 18px rgba(255, 90, 0, 0.9), 0 0 44px rgba(255, 60, 0, 0.5);
}

.game-card.battle-charging-ice {
    box-shadow: 0 0 18px rgba(120, 210, 255, 0.9), 0 0 44px rgba(80, 180, 255, 0.5);
}

@keyframes battle-strain {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.5) saturate(1.3); }
}

/* survivor flares, the fallen flash white-hot then char out */
.game-card.battle-victor {
    animation: battle-victor-flare 0.8s ease-out both;
}

@keyframes battle-victor-flare {
    0%   { filter: brightness(2.2); }
    100% { filter: brightness(1); }
}

.game-card.battle-vanquished {
    animation: battle-vanquish 0.7s ease-out both;
}

@keyframes battle-vanquish {
    0%   { filter: brightness(3) saturate(0.2); opacity: 1; }
    30%  { filter: brightness(1.6) saturate(0.4); }
    100% { filter: brightness(0.35) saturate(0.1) blur(1px); opacity: 0.25; }
}

.battle-explosion-flash {
    position: fixed;
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 200, 90, 0.6) 40%,
        transparent 70%);
    pointer-events: none;
    z-index: 5980;
    animation: battle-flash 0.5s ease-out both;
}

@keyframes battle-flash {
    0%   { transform: scale(0.3); opacity: 1; }
    100% { transform: scale(2.2); opacity: 0; }
}

.battle-explosion-ring {
    position: fixed;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border-radius: 50%;
    border: 3px solid rgba(255, 210, 120, 0.9);
    box-shadow: 0 0 24px rgba(255, 150, 40, 0.8), inset 0 0 14px rgba(255, 150, 40, 0.6);
    pointer-events: none;
    z-index: 5979;
    animation: battle-ring 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes battle-ring {
    0%   { transform: scale(0.2); opacity: 1; }
    100% { transform: scale(4.5); opacity: 0; }
}

.battle-explosion-particle {
    position: fixed;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    box-shadow: 0 0 10px currentColor;
    pointer-events: none;
    z-index: 5981;
    opacity: 1;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s ease-out;
}

body.battle-shake {
    animation: battle-screen-shake 0.45s linear;
}

@keyframes battle-screen-shake {
    0%, 100% { transform: translate(0, 0); }
    20%      { transform: translate(-4px, 3px); }
    40%      { transform: translate(4px, -3px); }
    60%      { transform: translate(-3px, -2px); }
    80%      { transform: translate(2px, 3px); }
}

/* Beam-struck card flashes white-hot before it flies off (filter-only —
   the ghost's inline transform must stay untouched) */
.game-card.move-ghost.move-ghost-hit {
    animation: ghost-hit-flash 0.32s linear;
}

@keyframes ghost-hit-flash {
    0%, 100% { filter: brightness(1); }
    20%      { filter: brightness(2.4) saturate(0.5); }
    40%      { filter: brightness(1.2); }
    60%      { filter: brightness(1.9) saturate(0.7); }
}

/* The activating card drifts to its battlefield space unhurried */
.game-card.move-ghost.move-ghost-calm {
    transition: transform 0.78s cubic-bezier(0.3, 0, 0.2, 1);
}

/* Soft ripple washing over the board when either player passes */
.pass-wave {
    position: fixed;
    width: 0;
    height: 0;
    z-index: 5880;
    pointer-events: none;
}

.pass-wave::before {
    content: '';
    position: absolute;
    left: -300px;
    top: -300px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    border: 2px solid rgba(255, 191, 0, 0.22);
    background: radial-gradient(circle,
        rgba(255, 191, 0, 0.06) 0%,
        rgba(255, 191, 0, 0.03) 40%,
        transparent 65%);
    animation: pass-wave-grow 1.2s ease-out forwards;
}

@keyframes pass-wave-grow {
    0%   { transform: scale(0.15); opacity: 0.85; }
    100% { transform: scale(1.15); opacity: 0; }
}


/* ── Active effect visuals ────────────────────────────────── */

#board-content {
    position: relative;
}

#effect-veils {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 60;
}

.effect-veil {
    position: absolute;
    inset: 0;
    overflow: hidden; /* drifting motes stay on the board */
    border-radius: 12px;
    animation: veil-breathe 3s ease-in-out infinite;
}

@keyframes veil-breathe {
    0%, 100% { opacity: 0.75; }
    50%      { opacity: 1; }
}

/* NULL — abilities are switched off: the board drains of color */
.effect-veil.veil-null {
    backdrop-filter: saturate(0.45) brightness(0.92);
    -webkit-backdrop-filter: saturate(0.45) brightness(0.92);
    background: radial-gradient(ellipse at center,
        transparent 55%, rgba(120, 120, 120, 0.12) 100%);
    animation: none;
}

/* CUTE — everything is power 1: soft pink wash */
.effect-veil.veil-cute {
    background: radial-gradient(ellipse at center,
        transparent 50%, rgba(255, 140, 190, 0.13) 100%);
}

/* DOUBLE — powers doubled: energizing ember edges */
.effect-veil.veil-double {
    background: radial-gradient(ellipse at center,
        transparent 48%, rgba(255, 90, 30, 0.16) 100%);
    animation-duration: 1.4s;
}

/* FIERCE — combat curtailed: harsh crimson vignette */
.effect-veil.veil-fierce {
    background: radial-gradient(ellipse at center,
        transparent 45%, rgba(200, 30, 30, 0.18) 100%);
    animation-duration: 2s;
}

/* SAVE — cards are protected: serene blue shield sheen */
.effect-veil.veil-save {
    background: radial-gradient(ellipse at center,
        transparent 50%, rgba(90, 170, 255, 0.14) 100%);
    box-shadow: inset 0 0 40px rgba(120, 190, 255, 0.12);
}

/* PRUNE — small cards locked out: thorny green edges */
.effect-veil.veil-prune {
    background: radial-gradient(ellipse at center,
        transparent 52%, rgba(80, 160, 60, 0.15) 100%);
}

/* Card-bound enduring effects: the source card glows its theme color.
   --fx holds an rgb triplet so one keyframe serves every type. */
.game-card.fx-glow {
    --fx: 255, 191, 0;
    border-color: rgba(var(--fx), 0.85);
    animation: fx-card-pulse 1.8s ease-in-out infinite;
}

@keyframes fx-card-pulse {
    0%, 100% {
        box-shadow: 0 0 6px rgba(var(--fx), 0.45),
                    0 0 16px rgba(var(--fx), 0.18);
    }
    50% {
        box-shadow: 0 0 12px rgba(var(--fx), 0.8),
                    0 0 30px rgba(var(--fx), 0.35);
    }
}

.game-card.fx-alpha   { --fx: 232, 81, 42; }   /* demands defenders — destroyer red */
.game-card.fx-delta   { --fx: 90, 169, 230; }  /* demands defenders — deck blue */
.game-card.fx-omega   { --fx: 176, 108, 255; } /* demands defenders — exile violet */
.game-card.fx-storm   { --fx: 80, 200, 255; animation-duration: 0.9s; } /* crackling storm */
.game-card.fx-tax     { --fx: 255, 191, 0; }   /* tithing gold */
.game-card.fx-begin   { --fx: 255, 150, 40; }  /* loop reversal amber */
.game-card.fx-exodus,
.game-card.fx-genesis { --fx: 255, 240, 180; animation-duration: 2.6s; } /* radiant win-con */
.game-card.fx-expand  { --fx: 126, 217, 87; }  /* growth green */
.game-card.fx-void    { --fx: 120, 60, 160; }  /* hungering void */
.game-card.fx-sleep   { --fx: 140, 110, 200; animation-duration: 3.4s; } /* slumber */
.game-card.fx-bloom   { --fx: 126, 217, 87; }

/* Attacking beats any effect glow. fx-card-pulse is declared after the
   attacking rules, so without this the theme pulse would swallow the ember
   on cards that carry both — restate the ember at higher specificity. The
   effect's identity survives as a thin theme-colored ring floating just
   outside the burning border. */
.game-card.fx-glow.attacking {
    border-color: #ff4400;
    animation: attacking-ember 1.8s ease-in-out infinite;
    outline: 2px solid rgba(var(--fx), 0.65);
    outline-offset: 3px;
}

/* SHADE — the owner's hand sits in shadow (cards may be played face down) */
.game-layout .zone.shade-veiled {
    border-color: rgba(140, 100, 200, 0.4);
    box-shadow: inset 0 0 30px rgba(70, 50, 110, 0.5);
}

/* BEGIN — the loop resolves in reverse */
.game-layout .zone.begin-reversed {
    border-color: rgba(255, 150, 40, 0.65);
    box-shadow: inset 0 0 28px rgba(255, 140, 0, 0.16), 0 0 18px rgba(255, 140, 0, 0.18);
}

/* ── Lasting effect animations ───────────────────────────────
   Everything here is pointer-events: none and sits under the cards. The
   board gets .fx-calm when the player turned animations off: the overlays
   stay as a still tint so the effect is still readable, they just don't move. */

/* BEGIN: chevron energy streams left → right through the loop (reversed LIFO),
   a bright surge rides along it, and a tag names the effect. */
.fx-loop-flow {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
}

.game-layout .loop-zone.begin-reversed > .game-card {
    position: relative;
    z-index: 1;
}

.fx-loop-stream {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 46%;
    transform: translateY(-50%);
    -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent),
        linear-gradient(180deg, transparent, #000 35%, #000 65%, transparent);
    -webkit-mask-composite: source-in;
    mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent),
        linear-gradient(180deg, transparent, #000 35%, #000 65%, transparent);
    mask-composite: intersect;
}

/* chevrons: two stripe bands skewed opposite ways meet in arrowheads pointing right */
.fx-loop-stream::before,
.fx-loop-stream::after {
    content: '';
    position: absolute;
    left: -40px;
    right: -40px;
    height: 50%;
    background: repeating-linear-gradient(90deg,
        transparent 0 22px,
        rgba(255, 170, 60, 0.42) 26px,
        rgba(255, 120, 20, 0) 34px,
        transparent 34px 46px);
    animation: fx-loop-stream 1.1s linear infinite;
}

.fx-loop-stream::before { top: 0; transform: skewX(35deg); }
.fx-loop-stream::after  { bottom: 0; transform: skewX(-35deg); }

@keyframes fx-loop-stream {
    from { background-position: 0 0; }
    to   { background-position: 46px 0; }
}

.fx-loop-pulse {
    position: absolute;
    top: 8%;
    bottom: 8%;
    width: 22%;
    left: -22%;
    background: radial-gradient(ellipse at center, rgba(255, 200, 110, 0.45), rgba(255, 140, 0, 0.12) 45%, transparent 70%);
    filter: blur(2px);
    animation: fx-loop-pulse 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes fx-loop-pulse {
    from { left: -22%; opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    to   { left: 100%; opacity: 0; }
}

.fx-loop-tag {
    position: absolute;
    top: 4px;
    right: 10px; /* top-left is where the ACTIVE badge on the first loop card sits */
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 8px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.5rem;
    letter-spacing: 2px;
    color: #ffb04a;
    background: rgba(40, 18, 0, 0.75);
    border: 1px solid rgba(255, 150, 40, 0.5);
    border-radius: 999px;
    text-shadow: 0 0 6px rgba(255, 140, 0, 0.6);
    animation: fx-tag-breathe 2.2s ease-in-out infinite;
}

.fx-loop-tag .fa-angles-right { font-size: 0.55rem; }

@keyframes fx-tag-breathe {
    0%, 100% { box-shadow: 0 0 4px rgba(255, 140, 0, 0.25); }
    50%      { box-shadow: 0 0 12px rgba(255, 140, 0, 0.6); }
}

/* Battlefield rows that a player-targeted universal lands on */
.game-layout .field-row.fx-row-saved,
.game-layout .field-row.fx-row-blocked,
.game-layout .field-row.fx-row-doubled {
    position: relative;
}

.game-layout .field-row.fx-row-saved::before,
.game-layout .field-row.fx-row-blocked::before,
.game-layout .field-row.fx-row-doubled::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    pointer-events: none;
    z-index: 0;
}

.game-layout .field-row.fx-row-saved > *,
.game-layout .field-row.fx-row-blocked > *,
.game-layout .field-row.fx-row-doubled > * {
    position: relative;
    z-index: 1;
}

/* SAVE: a shimmering blue ward — hex lattice, and a sheen sweeping across it */
.game-layout .field-row.fx-row-saved {
    border-color: rgba(120, 190, 255, 0.55);
    box-shadow: 0 0 22px rgba(90, 170, 255, 0.25), inset 0 0 26px rgba(90, 170, 255, 0.14);
}

.game-layout .field-row.fx-row-saved::before {
    background:
        linear-gradient(105deg, transparent 35%, rgba(190, 225, 255, 0.28) 48%, transparent 60%) no-repeat,
        radial-gradient(circle at 50% 50%, rgba(120, 190, 255, 0.10) 0 30%, transparent 31%) 0 0 / 22px 19px,
        radial-gradient(circle at 50% 50%, rgba(120, 190, 255, 0.10) 0 30%, transparent 31%) 11px 9.5px / 22px 19px;
    background-size: 220% 100%, 22px 19px, 22px 19px;
    animation: fx-ward-sheen 3.2s ease-in-out infinite;
}

@keyframes fx-ward-sheen {
    0%   { background-position: 130% 0, 0 0, 11px 9.5px; opacity: 0.75; }
    50%  { opacity: 1; }
    100% { background-position: -30% 0, 0 0, 11px 9.5px; opacity: 0.75; }
}

/* FIERCE: the blocked side is chained — crimson hazard stripes creep along */
.game-layout .field-row.fx-row-blocked {
    border-color: rgba(220, 50, 40, 0.55);
    box-shadow: inset 0 0 26px rgba(200, 30, 30, 0.2);
}

.game-layout .field-row.fx-row-blocked::before {
    background: repeating-linear-gradient(135deg,
        rgba(200, 30, 30, 0.16) 0 10px, transparent 10px 22px);
    background-size: 31px 31px;
    animation: fx-hazard 1.6s linear infinite, fx-blocked-pulse 2s ease-in-out infinite;
}

@keyframes fx-hazard {
    to { background-position: 31px 0; }
}

@keyframes fx-blocked-pulse {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
}

/* DOUBLE: the empowered side smoulders — embers glow up from below */
.game-layout .field-row.fx-row-doubled {
    border-color: rgba(255, 120, 30, 0.75);
    box-shadow: 0 0 26px rgba(255, 90, 20, 0.35), inset 0 -18px 30px rgba(255, 80, 10, 0.18);
}

.game-layout .field-row.fx-row-doubled::before {
    background:
        radial-gradient(ellipse 75% 85% at 50% 125%, rgba(255, 110, 20, 0.55), transparent 70%),
        radial-gradient(circle at 15% 78%, rgba(255, 180, 70, 0.7) 0 2px, transparent 3.5px),
        radial-gradient(circle at 34% 64%, rgba(255, 200, 90, 0.6) 0 1.5px, transparent 3px),
        radial-gradient(circle at 58% 82%, rgba(255, 180, 70, 0.7) 0 2px, transparent 3.5px),
        radial-gradient(circle at 81% 68%, rgba(255, 200, 90, 0.6) 0 1.5px, transparent 3px);
    animation: fx-smoulder 1.8s ease-in-out infinite alternate;
}

@keyframes fx-smoulder {
    from { opacity: 0.55; filter: brightness(0.9); }
    to   { opacity: 1; filter: brightness(1.25); }
}

/* SHADE: smoke drifts across the shaded hand */
.game-layout .zone.shade-veiled::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    background:
        radial-gradient(ellipse 40% 60% at 20% 50%, rgba(90, 60, 140, 0.28), transparent 70%),
        radial-gradient(ellipse 35% 55% at 70% 40%, rgba(70, 50, 120, 0.26), transparent 70%);
    background-size: 200% 100%;
    animation: fx-smoke 9s ease-in-out infinite alternate;
}

@keyframes fx-smoke {
    from { background-position: 0% 0, 100% 0; }
    to   { background-position: 100% 0, 0% 0; }
}

/* Drifting motes inside the board-wide veils (spans added by play.js) */
.fx-mote {
    position: absolute;
    bottom: -12px;
    width: calc(10px * var(--s, 1));
    height: calc(10px * var(--s, 1));
    pointer-events: none;
    animation: fx-mote-rise 7s linear infinite;
}

@keyframes fx-mote-rise {
    0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    12%  { opacity: 0.9; }
    50%  { transform: translate(14px, -45vh) rotate(90deg); }
    85%  { opacity: 0.7; }
    100% { transform: translate(-10px, -90vh) rotate(180deg); opacity: 0; }
}

/* CUTE: little hearts */
.veil-cute .fx-mote::before {
    content: '\2665';
    display: block;
    font-size: calc(14px * var(--s, 1));
    line-height: 1;
    color: #ff9cc8;
    text-shadow: 0 0 6px rgba(255, 140, 190, 0.9);
}

/* DOUBLE: embers */
.veil-double .fx-mote {
    border-radius: 50%;
    background: radial-gradient(circle, #ffe2a0 0 25%, #ff7a20 45%, transparent 70%);
    filter: drop-shadow(0 0 5px rgba(255, 110, 20, 0.9));
    animation-name: fx-mote-ember;
}

@keyframes fx-mote-ember {
    0%   { transform: translate(0, 0) scale(1); opacity: 0; }
    10%  { opacity: 1; }
    100% { transform: translate(18px, -80vh) scale(0.3); opacity: 0; }
}

/* PRUNE: falling leaves (they drift down, not up) */
.veil-prune .fx-mote {
    top: -12px;
    bottom: auto;
    border-radius: 0 70% 0 70%;
    background: linear-gradient(135deg, #8fd16a, #3d8a2a);
    filter: drop-shadow(0 0 3px rgba(80, 160, 60, 0.6));
    animation-name: fx-mote-fall;
}

@keyframes fx-mote-fall {
    0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    12%  { opacity: 0.85; }
    50%  { transform: translate(-16px, 45vh) rotate(160deg); }
    100% { transform: translate(12px, 90vh) rotate(320deg); opacity: 0; }
}

/* SAVE: rising motes of light */
.veil-save .fx-mote {
    border-radius: 50%;
    background: radial-gradient(circle, #e6f3ff 0 25%, rgba(120, 190, 255, 0.6) 50%, transparent 70%);
    filter: drop-shadow(0 0 5px rgba(120, 190, 255, 0.9));
}

/* NULL: faint static rolls down the drained board */
.effect-veil.veil-null::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px);
    background-size: 100% 4px;
    animation: fx-static 0.6s steps(4) infinite;
}

@keyframes fx-static {
    to { background-position: 0 4px; }
}

/* Card-bound effects get their own motion on top of the theme glow */
.game-card.fx-glow.fx-storm { animation: fx-card-pulse 1.8s ease-in-out infinite, fx-storm-flicker 3.1s steps(1) infinite; }
.game-card.fx-glow.fx-void  { animation: fx-void-draw 2.4s ease-in-out infinite; }
.game-card.fx-glow.fx-tax   { animation: fx-card-pulse 1.8s ease-in-out infinite, fx-tax-glint 2.6s ease-in-out infinite; }
.game-card.fx-glow.fx-sleep { animation: fx-card-pulse 3.4s ease-in-out infinite, fx-sleep-breathe 3.4s ease-in-out infinite; }

@keyframes fx-storm-flicker {
    0%, 41%, 45%, 47%, 100% { filter: none; }
    42%, 46% { filter: brightness(1.7) drop-shadow(0 0 8px rgba(160, 230, 255, 0.95)); }
}

@keyframes fx-void-draw {
    0%, 100% { box-shadow: 0 0 8px rgba(120, 60, 160, 0.6), inset 0 0 0 rgba(0, 0, 0, 0); }
    50%      { box-shadow: 0 0 22px rgba(150, 80, 200, 0.85), inset 0 0 18px rgba(20, 0, 40, 0.8); }
}

@keyframes fx-tax-glint {
    0%, 80%, 100% { filter: none; }
    88% { filter: brightness(1.35) saturate(1.3); }
}

@keyframes fx-sleep-breathe {
    0%, 100% { filter: saturate(0.7) brightness(0.92); }
    50%      { filter: saturate(0.9) brightness(1); }
}

/* Animations off (player setting) or reduced motion: keep the tints, stop the motion */
#board-content.fx-calm .fx-loop-stream::before,
#board-content.fx-calm .fx-loop-stream::after,
#board-content.fx-calm .fx-loop-pulse,
#board-content.fx-calm .fx-loop-tag,
#board-content.fx-calm .field-row::before,
#board-content.fx-calm .zone.shade-veiled::before,
#board-content.fx-calm .effect-veil::after,
#board-content.fx-calm .game-card.fx-glow {
    animation: none !important;
}

#board-content.fx-calm .fx-loop-pulse { display: none; }

@media (prefers-reduced-motion: reduce) {
    .fx-loop-stream::before, .fx-loop-stream::after, .fx-loop-pulse, .fx-loop-tag, .fx-mote,
    .game-layout .field-row::before, .game-layout .zone.shade-veiled::before,
    .effect-veil.veil-null::after { animation: none !important; }
    .fx-loop-pulse, .fx-mote { display: none; }
}


/* ── BLOOM recipient flow ─────────────────────────────────── */

/* The side currently chosen to receive the revived card */
.game-layout .field-row.bloom-target-side {
    border-radius: 10px;
    box-shadow: inset 0 0 26px rgba(126, 217, 87, 0.16),
                0 0 14px rgba(126, 217, 87, 0.3);
}

/* The revived card previews inside the first new space on that side */
.field-space.bloom-revive-preview {
    border-style: solid !important;
    border-color: rgba(126, 217, 87, 0.85) !important;
    background: rgba(46, 139, 58, 0.12) !important;
    padding: 0;
    overflow: hidden;
    animation: bloom-preview-pulse 1.6s ease-in-out infinite;
}

.field-space.bloom-revive-preview .bloom-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    opacity: 0.9;
    display: block;
    pointer-events: none;
}

@keyframes bloom-preview-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(126, 217, 87, 0.35); }
    50%      { box-shadow: 0 0 20px rgba(126, 217, 87, 0.7); }
}

.bloom-target-label {
    color: #7ed957;
}


/* ── Zone label hover glow ────────────────────────────────── */

/* Zone titles ease into a golden glow shortly after their area is hovered,
   and the glow lingers a beat after the pointer leaves. */
.game-layout .zone .zone-label {
    transition: color 0.5s ease 0.15s, text-shadow 0.5s ease 0.15s;
}

.game-layout .zone:hover .zone-label {
    color: rgba(255, 220, 120, 0.95);
    text-shadow: 0 0 8px rgba(255, 191, 0, 0.75),
                 0 0 20px rgba(255, 191, 0, 0.4);
}


/* ── BLOOM controls in the portrait action strip ──────────── */

@media only screen and (orientation: portrait) and (max-width: 767px), only screen and (orientation: portrait) and (hover: none) {

    /* The strip button box is a fixed 76px grid — BLOOM needs more rows
       (hint + chips + confirm), so let it grow to fit while BLOOM is being
       configured instead of crushing every row. */
    body.game-active .right-panel .action-buttons:has(.bloom-pick-btn),
    body.game-active .right-panel .action-buttons:has(.bloom-give-row) {
        height: auto;
        min-height: 76px;
        grid-auto-rows: minmax(26px, auto);
        align-content: end;
    }

    /* Pick-from-graveyard: a compact full-width row */
    body.game-active .right-panel .action-buttons .bloom-pick-btn {
        grid-column: 1 / -1;
        width: 100%;
        padding: 6px 10px;
        font-size: 0.7rem;
    }

    /* Card chip and recipient chip share one row, styled as pills */
    body.game-active .right-panel .action-buttons .bloom-give-row {
        grid-column: auto;
        width: auto;
        min-width: 0;
        margin: 0;
        padding: 3px 6px;
        border: 1px solid rgba(255, 191, 0, 0.18);
        border-radius: 6px;
        background: rgba(255, 191, 0, 0.04);
        gap: 6px;
    }

    body.game-active .right-panel .action-buttons .bloom-give-row .bloom-label {
        font-size: 0.55rem;
        letter-spacing: 1px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    /* Bigger touch targets for the re-pick / swap controls */
    body.game-active .right-panel .action-buttons .bloom-give-row .bloom-clear-x {
        font-size: 0.7rem;
        padding: 3px 6px;
        flex-shrink: 0;
    }

    /* BLOOM confirm spans the full row beneath the chips */
    body.game-active .right-panel .action-buttons:has(.bloom-give-row) .btn-confirm,
    body.game-active .right-panel .action-buttons:has(.bloom-pick-btn) .btn-confirm {
        grid-column: 1 / -1;
        padding: 6px 8px;
    }

    /* Three loose actions (confirm, CLEAR, PASS): the two decisions share the top row and the
       secondary action gets a full-width row under them, not a stranded half cell. */
    body.game-active .right-panel .action-buttons:has(> button:nth-of-type(3)) > .btn-outline {
        grid-column: 1 / -1;
        order: 2;
    }

    /* ...and like BLOOM, the box grows to fit those rows rather than crushing each one */
    body.game-active .right-panel .action-buttons:has(> .btn-outline):has(> button:nth-of-type(3)) {
        height: auto;
        min-height: 76px;
        grid-auto-rows: minmax(30px, auto);
        align-content: end;
    }

    /* Lone action button: centred at a comfortable width (the grid layout
       ignores the flex-based centering used elsewhere) */
    body.game-active .right-panel .action-buttons > button:only-of-type:not(.btn-back-to-lobby) {
        grid-column: 1 / -1;
        width: 68%;
        justify-self: center;
    }
}


/* ── Play menu interaction effects ────────────────────────── */

/* Views slide-and-fade in as you navigate between them */
.play-view {
    position: relative;
}

.play-view.play-view-enter {
    animation: play-view-in 0.35s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes play-view-in {
    0% {
        opacity: 0;
        transform: translateY(14px) scale(0.985);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Home buttons: each tier keeps its own look on hover — Ranked burns brighter,
   the mode cards lift their art out of the frame, the glass tiles take a gold
   rim — and a light sheen sweeps across all of them. */
.play-buttons .play-btn {
    position: relative;
    overflow: hidden;
    /* main.css sets a global button { height: 30px } — it clips the tile
       content and blocks grid/flex stretch, so the menu buttons could never
       grow to fill the panel */
    height: auto;
    transition: transform 0.18s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

/* Diagonal sheen, parked off-screen until hover */
.play-buttons .play-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 55%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 210, 120, 0.2), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
}

.play-buttons .play-btn:hover::after {
    animation: play-btn-sheen 0.7s ease;
}

@keyframes play-btn-sheen {
    from { left: -120%; }
    to   { left: 150%; }
}

.play-buttons .play-btn:hover {
    transform: translateY(-3px);
}

.play-buttons .play-btn:active {
    transform: translateY(-1px) scale(0.98);
}

/* Ranked: an ember rim turning around the edge (masked conic ring driven by a
   registered angle; browsers without @property get a still rim) plus a white
   glint that crosses on its own every few seconds */
@property --ranked-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.play-buttons .play-btn-hero::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    background: conic-gradient(from var(--ranked-angle), rgba(255, 74, 28, 0) 0deg, rgba(255, 74, 28, 0.95) 60deg, rgba(255, 245, 210, 0.95) 95deg, rgba(255, 74, 28, 0) 150deg, rgba(255, 74, 28, 0) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: rankedRim 4.5s linear infinite;
    pointer-events: none;
}

@keyframes rankedRim {
    to { --ranked-angle: 360deg; }
}

.play-buttons .play-btn-hero::after {
    width: 30%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
    animation: rankedGlint 5s ease-in-out 1.5s infinite;
}

@keyframes rankedGlint {
    0%, 72% { left: -60%; }
    100%    { left: 140%; }
}

.play-buttons .play-btn-hero:hover {
    filter: brightness(1.07) saturate(1.1);
    box-shadow: 0 14px 36px rgba(255, 120, 20, 0.5), 0 0 40px rgba(255, 150, 30, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 0 rgba(120, 40, 0, 0.35);
}

.play-buttons .play-btn-hero:hover::after {
    animation: rankedGlint 0.8s ease-out;
}

.play-buttons .play-btn-hero:hover i {
    animation-duration: 1.4s;
}

/* Mode cards: the art rises out of the frame and the rim catches fire */
.play-buttons .play-btn-mode:hover {
    box-shadow: inset 0 0 0 1.5px rgba(255, 191, 0, 0.75), 0 16px 34px rgba(0, 0, 0, 0.55), 0 0 30px rgba(255, 120, 30, 0.3);
}

.play-buttons .play-btn-mode:hover .play-mode-art {
    transform: translateY(-54%) rotate(-3deg) scale(1.1);
    filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 26px rgba(255, 140, 30, 0.6));
}

.play-buttons .play-btn-campaign:hover .play-mode-art {
    transform: translateY(-50%) scale(1.08) rotate(8deg);
}

/* Glass tiles: gold rim + glow, label warms to gold, icon badge pops */
.play-buttons .play-btn-tile:hover {
    color: #ffd45e;
    background: linear-gradient(160deg, rgba(56, 34, 14, 0.92) 0%, rgba(20, 12, 8, 0.92) 100%);
    box-shadow: inset 0 0 0 1.5px rgba(255, 191, 0, 0.7), 0 12px 26px rgba(0, 0, 0, 0.5), 0 0 22px rgba(255, 150, 30, 0.22);
}

.play-buttons .play-btn-tile:hover > i:first-child {
    animation: play-icon-pop 0.35s ease forwards;
    box-shadow: 0 0 20px rgba(255, 150, 30, 0.6);
}

@keyframes play-icon-pop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.22) rotate(-6deg); }
    100% { transform: scale(1.1) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    .play-buttons .play-btn-hero::before,
    .play-buttons .play-btn-hero::after,
    .play-btn-ranked i,
    .menu-backdrop-art,
    .menu-backdrop .gate-embers {
        animation: none;
    }

    .menu-backdrop .gate-embers {
        display: none;
    }

    .panel-deck,
    .panel-deck-fan img {
        transition: none;
    }
}

.matchmaking-text {
    animation: mm-text-breathe 2.4s ease-in-out infinite;
}

@keyframes mm-text-breathe {
    0%, 100% {
        color: rgba(240, 236, 230, 0.5);
        text-shadow: none;
    }
    50% {
        color: rgba(255, 191, 0, 0.85);
        text-shadow: 0 0 12px rgba(255, 191, 0, 0.4);
    }
}

/* Golden forge-sweep across the lobby view on create/join */
.lobby-forge-flash {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    pointer-events: none;
    z-index: 5;
    background: linear-gradient(115deg,
        transparent 20%,
        rgba(255, 220, 130, 0.18) 45%,
        rgba(255, 245, 200, 0.35) 50%,
        rgba(255, 220, 130, 0.18) 55%,
        transparent 80%);
    background-size: 250% 100%;
    background-position: 180% 0;
    animation: lobby-forge-sweep 0.8s ease-out forwards;
}

@keyframes lobby-forge-sweep {
    0%   { background-position: 180% 0; opacity: 1; }
    70%  { background-position: -80% 0; opacity: 1; }
    100% { background-position: -80% 0; opacity: 0; }
}


/* ── GENESIS + EXODUS FINALE ─────────────────────────────────
   The two ancients leave the board, slowly swirl around one another,
   then crash together into the center of the screen — huge, side by
   side, wrapped in a golden aura — before the results overlay shows. */

.ge-finale-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    overflow: hidden;
    background: radial-gradient(ellipse at center,
        rgba(20, 14, 0, 0.55) 0%, rgba(0, 0, 0, 0.88) 100%);
    animation: ge-overlay-in 0.9s ease-out;
}

.ge-finale-overlay.ge-fading {
    opacity: 0;
    transition: opacity 0.55s ease;
}

@keyframes ge-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* The cloned ancients — driven by translate/scale from JS */
.ge-finale-card {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    will-change: transform;
    border-color: rgba(255, 220, 120, 0.9);
    box-shadow: 0 0 8px rgba(255, 225, 120, 0.55),
                0 0 20px rgba(255, 191, 0, 0.3);
}

/* Bouncy last stretch: the cards overshoot, like striking the glass */
.ge-finale-card.ge-crash {
    transition: transform 0.45s cubic-bezier(0.18, 1.5, 0.4, 1);
}

/* Beautiful golden aura — shadow px are multiplied by the card's scale,
   so these stay modest */
.ge-finale-card.ge-aura {
    animation: ge-aura-pulse 1.6s ease-in-out infinite;
}

@keyframes ge-aura-pulse {
    0%, 100% {
        box-shadow: 0 0 4px rgba(255, 235, 170, 0.9),
                    0 0 12px rgba(255, 205, 70, 0.6),
                    0 0 26px rgba(255, 185, 0, 0.4);
    }
    50% {
        box-shadow: 0 0 7px rgba(255, 245, 200, 1),
                    0 0 20px rgba(255, 215, 90, 0.85),
                    0 0 44px rgba(255, 195, 0, 0.6);
    }
}

/* Vast radiance behind the pair, unleashed at the collision */
.ge-halo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 130vmin;
    height: 130vmin;
    transform: translate(-50%, -50%) scale(0.25);
    background: radial-gradient(circle,
        rgba(255, 215, 90, 0.4) 0%,
        rgba(255, 191, 0, 0.18) 30%,
        rgba(255, 170, 0, 0.07) 55%,
        transparent 72%);
    opacity: 0;
    pointer-events: none;
}

.ge-halo.ge-halo-bloom {
    animation: ge-halo-bloom 2.4s ease-out forwards;
}

@keyframes ge-halo-bloom {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.25); }
    25%  { opacity: 1; }
    100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
}

/* Golden motes shed along the orbit */
.ge-trail {
    position: absolute;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 235, 160, 0.95) 0%,
        rgba(255, 191, 0, 0.5) 45%,
        transparent 70%);
    pointer-events: none;
    animation: ge-trail-fade 0.8s ease-out forwards;
}

@keyframes ge-trail-fade {
    from { opacity: 0.9; transform: scale(1); }
    to   { opacity: 0; transform: scale(2.6); }
}

/* Ring of light thrown off by the collision */
.ge-shockwave {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    border-radius: 50%;
    border: 3px solid rgba(255, 220, 110, 0.9);
    box-shadow: 0 0 30px rgba(255, 191, 0, 0.6),
                inset 0 0 20px rgba(255, 191, 0, 0.4);
    pointer-events: none;
    animation: ge-shockwave 0.8s ease-out forwards;
}

@keyframes ge-shockwave {
    from { opacity: 1; transform: scale(0.3); }
    to   { opacity: 0; transform: scale(14); }
}


/* ── END-OF-TURN WEAR-OFFS ───────────────────────────────────
   Expiring TURN effects float off the board as themed chips above the
   loop while the END phase banner plays. */

.eot-chip {
    position: fixed;
    transform: translate(-50%, 0);
    z-index: 950;
    padding: 5px 14px;
    border-radius: 14px;
    border: 1px solid var(--eot-color, #ffbf00);
    background: rgba(10, 9, 7, 0.92);
    color: rgba(240, 236, 230, 0.85);
    font-family: HwyGothic, Arial, sans-serif;
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.55);
    animation: eot-chip-float 1.7s ease-out forwards;
}

.eot-chip .eot-type {
    color: var(--eot-color, #ffbf00);
    font-weight: bold;
}

@keyframes eot-chip-float {
    0%   { opacity: 0; transform: translate(-50%, 10px) scale(0.85); }
    12%  { opacity: 1; transform: translate(-50%, 0) scale(1.05); }
    22%  { transform: translate(-50%, 0) scale(1); }
    72%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -36px) scale(0.95); }
}

/* The card that carried the effect flares once as it lets go */
.game-card.eot-dissolve {
    animation: eot-card-dissolve 0.9s ease-out;
}

@keyframes eot-card-dissolve {
    0%   { filter: brightness(1.8) saturate(1.5); }
    100% { filter: none; }
}


/* ── ABILITY ACTIVATION FX ───────────────────────────────────
   A newly appearing effect fires a themed burst: board overlays, a pulse
   ring off the source card, drifting glyphs. --fx-rgb is an rgb triplet
   set from JS so each shape can build its own shades. */

.abilityfx {
    position: fixed;
    pointer-events: none;
    z-index: 940;
}

/* The source card flares as its ability takes hold */
.game-card.ability-flare {
    animation: ability-card-flare 0.9s ease-out;
}

@keyframes ability-card-flare {
    0%   { filter: brightness(1); }
    20%  { filter: brightness(2) saturate(1.6); }
    100% { filter: brightness(1); }
}

/* Expanding ring off the activating card */
.ability-pulse-ring {
    position: fixed;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
    border-radius: 50%;
    border: 2px solid rgba(var(--fx-rgb), 0.85);
    box-shadow: 0 0 22px rgba(var(--fx-rgb), 0.55),
                inset 0 0 14px rgba(var(--fx-rgb), 0.35);
    pointer-events: none;
    z-index: 945;
    animation: ability-pulse-ring 0.85s ease-out forwards;
}

@keyframes ability-pulse-ring {
    from { opacity: 1; transform: scale(0.3); }
    to   { opacity: 0; transform: scale(8); }
}

/* Drifting themed glyphs (hearts, petals, coins, Zs…) */
.ability-glyph {
    position: fixed;
    z-index: 945;
    pointer-events: none;
    color: rgb(var(--fx-rgb));
    text-shadow: 0 0 8px rgba(var(--fx-rgb), 0.8);
    font-family: HwyGothic, Arial, sans-serif;
    opacity: 0;
    animation: ability-glyph-float 1.6s ease-out forwards;
}

@keyframes ability-glyph-float {
    0%   { opacity: 0; transform: translateY(8px) scale(0.7); }
    18%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(-46px) scale(1.15); }
}

/* Soft theme-colored wash over the whole screen */
.abilityfx-flash {
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at center,
        rgba(var(--fx-rgb), 0.22) 0%,
        rgba(var(--fx-rgb), 0.08) 45%,
        transparent 75%);
    animation: abilityfx-flash 0.9s ease-out forwards;
}

@keyframes abilityfx-flash {
    0%   { opacity: 0; }
    18%  { opacity: 1; }
    100% { opacity: 0; }
}

/* GENESIS / EXODUS — the same wash, but vast and slow */
.abilityfx-radiant {
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at center,
        rgba(var(--fx-rgb), 0.32) 0%,
        rgba(var(--fx-rgb), 0.12) 50%,
        transparent 78%);
    animation: abilityfx-flash 1.5s ease-out forwards;
}

/* FIERCE — a war-red streak slashes across the screen */
.abilityfx-slash {
    top: 50%;
    left: 10%;
    width: 80%;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--fx-rgb), 0.95) 35%,
        rgba(255, 240, 220, 1) 50%,
        rgba(var(--fx-rgb), 0.95) 65%,
        transparent);
    box-shadow: 0 0 24px rgba(var(--fx-rgb), 0.8);
    animation: abilityfx-slash 0.55s ease-in forwards;
}

@keyframes abilityfx-slash {
    0%   { opacity: 0; transform: translateX(-70vw) rotate(-14deg); }
    15%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(70vw) rotate(-14deg); }
}

/* SAVE — a protective dome swells out from the card */
.abilityfx-dome {
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
    border-radius: 50%;
    border: 2px solid rgba(var(--fx-rgb), 0.8);
    background: radial-gradient(circle,
        rgba(var(--fx-rgb), 0.2) 0%,
        rgba(var(--fx-rgb), 0.05) 70%,
        transparent 100%);
    animation: abilityfx-dome 1.1s ease-out forwards;
}

@keyframes abilityfx-dome {
    from { opacity: 0.95; transform: scale(0.2); }
    to   { opacity: 0; transform: scale(14); }
}

/* SHADE — darkness washes across the table */
.abilityfx-shadow {
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(110deg,
        rgba(8, 6, 12, 0.85),
        rgba(8, 6, 12, 0.45) 50%,
        transparent);
    transform: translateX(-100%);
    animation: abilityfx-shadow 1.3s ease-in-out forwards;
}

@keyframes abilityfx-shadow {
    0%   { opacity: 1; transform: translateX(-100%); }
    55%  { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(0); }
}

/* ── Player reporting ─────────────────────────────────────── */

.chat-report-btn {
    background: none;
    border: none;
    padding: 0 2px;
    margin-left: 6px;
    cursor: pointer;
    color: rgba(240, 236, 230, 0.35);
    font-size: 0.58rem;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
    vertical-align: middle;
}

.chat-msg:hover .chat-report-btn,
.lobby-chat-msg:hover .chat-report-btn {
    opacity: 1;
}

.chat-report-btn:hover {
    color: #ff4444;
}

@media (hover: none) {
    .chat-report-btn { opacity: 0.45; }
}

.opp-report-btn {
    background: none;
    border: none;
    padding: 0 4px;
    cursor: pointer;
    color: rgba(240, 236, 230, 0.25);
    font-size: 0.6rem;
    transition: color 0.15s ease;
}

.opp-report-btn:hover {
    color: #ff4444;
}

.report-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.report-box {
    text-align: center;
    padding: 28px 32px;
    background: rgba(10, 6, 6, 0.97);
    border: 1px solid rgba(255, 68, 68, 0.35);
    border-radius: 16px;
    box-shadow: 0 0 40px rgba(255, 68, 68, 0.15);
    width: min(360px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}

.report-box h2 {
    font-family: 'DragonSlayer', serif;
    color: #ff4444;
    font-size: 1.3rem;
    letter-spacing: 6px;
    margin: 0 0 6px;
}

.report-target {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.78rem;
    color: rgba(240, 236, 230, 0.6);
    margin: 0 0 16px;
}

.report-target span {
    color: #ffbf00;
}

.report-categories {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.report-cat {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.72rem;
    letter-spacing: 1px;
    text-align: left;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: rgba(240, 236, 230, 0.7);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.report-cat:hover {
    background: rgba(255, 68, 68, 0.08);
    border-color: rgba(255, 68, 68, 0.3);
}

.report-cat.selected {
    background: rgba(255, 68, 68, 0.15);
    border-color: #ff4444;
    color: #f0ece6;
}

.report-box textarea {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.72rem;
    color: #f0ece6;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 10px;
}

.report-error {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.68rem;
    color: #ff4444;
    min-height: 14px;
    margin-bottom: 8px;
}

.report-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.report-actions .btn-danger[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Chat off for this account (parental controls / region rule): hide every chat surface.
   play.js sets body.chat-off from GET /features; the server refuses sends regardless. */
body.chat-off #menu-tab-messages,
body.chat-off #menu-tab-global,
body.chat-off #menu-pane-messages,
body.chat-off #menu-pane-global,
body.chat-off #game-tab-chat,
body.chat-off #game-pane-chat,
body.chat-off #mob-btn-chat,
body.chat-off .lobby-chat {
    display: none !important;
}
/* ── Arena entry on the play home + post-game Arena line (specs/arena-mode.md §7) ── */
.play-btn-link { text-decoration: none; box-sizing: border-box; font-weight: bold; /* main.css bolds <button>; the Arena entry is an <a> */ }
/* Entry fee chip after the label — same icon + label row as the Ranked hero, the fee filled by play.js from /arena/status */
.play-btn .play-btn-fee { flex: 0 0 auto; margin-top: 2px; font-family: 'HwyGothic', Arial, sans-serif; font-size: 0.68rem; letter-spacing: 1.5px; padding: 2px 9px; border-radius: 999px; background: rgba(255, 191, 0, 0.12); border: 1px solid rgba(255, 191, 0, 0.35); color: #ffd966; }
.play-btn-fee:empty { display: none; }
.play-btn-fee::before { content: '\1F48E\00a0'; font-size: 0.65rem; }
.play-buttons .play-btn:hover .play-btn-fee { background: rgba(255, 191, 0, 0.22); border-color: rgba(255, 191, 0, 0.6); }
.arena-result { margin: 12px 0 14px; padding: 10px 12px; border: 1px solid rgba(255,140,26,0.5); border-radius: 10px; background: rgba(255,140,26,0.08); }
.arena-result-text { font-family: 'HwyGothic', Arial, sans-serif; letter-spacing: 1px; font-size: 0.85rem; color: #ffbf00; margin-bottom: 8px; }
.arena-result-link { display: inline-block; text-decoration: none; font-size: 0.75rem; padding: 6px 12px; }
/* The run just ended: the box glows and the prize link pulses so the player goes to collect */
.arena-result.arena-result-over { border-color: #ffbf00; background: rgba(255,160,0,0.14); box-shadow: 0 0 18px rgba(255,140,0,0.35); animation: arena-result-glow 2.2s ease-in-out infinite; }
.arena-result-over .arena-result-link { font-weight: bold; letter-spacing: 1px; }
@keyframes arena-result-glow { 0%, 100% { box-shadow: 0 0 14px rgba(255,140,0,0.3); } 50% { box-shadow: 0 0 28px rgba(255,170,0,0.7); } }

/* ── 2v2 (team games) ─────────────────────────────────────────────────────── */
/* Lobby: the four seats, grouped by team */
.lobby-team { display: flex; flex-direction: column; gap: 4px; padding: 6px 0; border-top: 1px solid rgba(255,191,0,0.15); }
.lobby-team-label { font-family: 'HwyGothic', Arial, sans-serif; font-size: 0.62rem; letter-spacing: 2px; color: #ffbf00; }

/* Board: the three other seats; the highlighted one is what the board's top half shows */
.seat-strip { display: flex; gap: 6px; padding: 4px 6px; flex-wrap: wrap; }
.seat-chip { flex: 1 1 0; min-width: 0; height: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 5px 8px; border-radius: 6px; cursor: pointer; text-align: left; color: #e8e0cc; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.12); font-family: 'HwyGothic', Arial, sans-serif; }
.seat-chip .seat-name { font-size: 0.78rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat-chip .seat-tag { font-size: 0.58rem; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.8; }
.seat-chip .seat-stats { font-size: 0.66rem; opacity: 0.85; }
.seat-chip .seat-showing { font-size: 0.55rem; letter-spacing: 2px; color: #ffbf00; }
.seat-chip.seat-teammate { border-color: rgba(90,220,120,0.5); }
.seat-chip.seat-teammate .seat-tag { color: #6fe08a; }
.seat-chip.seat-opponent { border-color: rgba(255,80,80,0.4); }
.seat-chip.seat-opponent .seat-tag { color: #ff8a80; }

/* 2v2: an attacker's target ("→ P2"), top-right on the card */
.attack-target-tag { position: absolute; top: 3px; right: 3px; z-index: 3; font-family: 'HwyGothic', Arial, sans-serif; font-size: 0.6rem; line-height: 1; padding: 2px 4px; border-radius: 3px; color: #fff; pointer-events: none; box-shadow: 0 1px 3px rgba(0,0,0,0.6); white-space: nowrap; }

/* 2v2: the seats not on the board, in miniature inside their seat chip */
.seat-mini-field { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; max-width: 100%; }
.mini-card { position: relative; width: 26px; height: 36px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); flex: 0 0 auto; }
.mini-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-card.mini-exhausted { opacity: 0.55; transform: rotate(12deg); }
.mini-card.mini-attacking { border-color: #ff5050; box-shadow: 0 0 5px rgba(255,80,80,0.7); }
.mini-card .mini-power { position: absolute; right: 1px; bottom: 1px; font-family: 'DragonSlayer', serif; font-size: 0.5rem; line-height: 1; color: #ffbf00; background: rgba(0,0,0,0.7); padding: 1px 2px; border-radius: 2px; }
.mini-card .mini-target { position: absolute; left: 0; right: 0; top: 0; font-family: 'HwyGothic', Arial, sans-serif; font-size: 0.45rem; line-height: 1.2; text-align: center; color: #fff; }
.mini-target.seat-role-me, .attack-target-tag.seat-role-me { background: rgba(50, 140, 230, 0.95); }
.mini-target.seat-role-mate, .attack-target-tag.seat-role-mate { background: rgba(40, 165, 80, 0.95); }
.mini-target.seat-role-opp, .attack-target-tag.seat-role-opp { background: rgba(215, 55, 55, 0.95); }

/* 2v2 seat colours: blue = me, green = teammate, red = opponent. The pill carries P1-P4. */
.seat-pnum { display: inline-block; font-family: 'HwyGothic', Arial, sans-serif; font-size: 0.6rem; line-height: 1; letter-spacing: 0.5px; padding: 2px 4px; margin-right: 5px; border-radius: 3px; color: #fff; vertical-align: 1px; }
.seat-pnum.seat-role-me, .loop-seat-badge.seat-role-me { background: rgba(50, 140, 230, 0.95); }
.seat-pnum.seat-role-mate, .loop-seat-badge.seat-role-mate { background: rgba(40, 165, 80, 0.95); }
.seat-pnum.seat-role-opp, .loop-seat-badge.seat-role-opp { background: rgba(215, 55, 55, 0.95); }
.field-player-name.seat-role-me { color: #7cc4ff; }
.field-player-name.seat-role-mate { color: #6fe08a; }
.field-player-name.seat-role-opp { color: #ff8a80; }
.seat-chip.seat-focused { background: rgba(255,191,0,0.12); border-color: #ffbf00; box-shadow: 0 0 10px rgba(255,191,0,0.25); }
.seat-chip.seat-turn .seat-name::before { content: '\25B6\00a0'; color: #ffbf00; }

/* Game chat: team-only messages and the "Team only" toggle */
.game-chat-team { display: inline-flex; align-items: center; gap: 4px; font-family: 'HwyGothic', Arial, sans-serif; font-size: 0.6rem; letter-spacing: 1px; color: #6fe08a; white-space: nowrap; cursor: pointer; }
.chat-msg-team { color: #b9f0c6; }
.chat-team-tag { font-family: 'HwyGothic', Arial, sans-serif; font-size: 0.55rem; letter-spacing: 1.5px; color: #6fe08a; border: 1px solid rgba(90,220,120,0.45); border-radius: 3px; padding: 0 4px; }

@media (max-width: 767px) {
    .seat-chip { padding: 4px 6px; }
    .seat-chip .seat-stats { font-size: 0.6rem; }
    .mini-card { width: 20px; height: 28px; }
}

/* Story campaign: the game-over popup's link back to /campaign for the result and the story after. */
.winner-box .campaign-continue { display: block; width: fit-content; margin: 0 auto 12px; text-decoration: none; }
/* ── Random Match searching screen: radar, game types, live stake ─────────────
   Fits the panel without scrolling (radar scaled down, tight gaps). */
#play-matchmaking .matchmaking-body { gap: 12px; padding: 4px 0 10px; }
#play-matchmaking .mm-radar-wrap { transform: scale(0.62); margin: -44px 0; }

/* Desktop: two columns so the whole screen fits the panel at 1280x720 —
   radar + status left, stake right, the game types across the bottom. */
@media only screen and (min-width: 768px) {
    #play-matchmaking .matchmaking-body {
        display: grid;
        grid-template-columns: 172px minmax(0, 1fr);
        grid-template-areas: "radar stake" "text stake" "types types" "note note";
        align-items: center;
        justify-items: center;
        column-gap: 18px;
        row-gap: 8px;
        max-width: 560px;
        margin: 0 auto;
        padding: 2px 0 6px;
    }
    #play-matchmaking .mm-radar-wrap { grid-area: radar; transform: scale(0.6); margin: -48px -34px; }
    #play-matchmaking .matchmaking-text { grid-area: text; font-size: 0.72rem; text-align: center; }
    #play-matchmaking .mm-stake { grid-area: stake; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
    #play-matchmaking .mm-types { grid-area: types; max-width: none; }
    #play-matchmaking .mm-types-note { grid-area: note; }
    #play-matchmaking .mm-type { min-height: 52px; padding: 6px; }
}

.mm-types { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 6px; width: 100%; max-width: 520px; }
.mm-type {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 62px; padding: 8px 6px; box-sizing: border-box; border-radius: 10px; text-align: center;
    font-family: 'HwyGothic', Arial, sans-serif; letter-spacing: 1px;
    border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.02); color: rgba(240, 236, 230, 0.35);
}
.mm-type i { font-size: 0.95rem; }
.mm-type-name { font-size: 0.66rem; font-weight: bold; text-transform: uppercase; }
.mm-type-desc { font-size: 0.56rem; letter-spacing: 0.5px; color: rgba(240, 236, 230, 0.6); }
.mm-type-soon {
    font-size: 0.5rem; letter-spacing: 1.5px; padding: 2px 6px; border-radius: 999px;
    color: rgba(240, 236, 230, 0.55); background: rgba(255, 255, 255, 0.06);
}
.mm-type.is-disabled { filter: grayscale(1); cursor: not-allowed; }
.mm-type.is-active {
    color: #ffd45e; border-color: rgba(255, 191, 0, 0.65);
    background: radial-gradient(ellipse 90% 120% at 50% 0%, rgba(255, 180, 40, 0.22), rgba(255, 191, 0, 0.04) 70%);
    box-shadow: 0 0 18px rgba(255, 150, 30, 0.22), inset 0 0 0 1px rgba(255, 191, 0, 0.15);
}
.mm-type.is-active::after {
    content: ''; position: absolute; inset: -1px; border-radius: 10px; pointer-events: none;
    border: 1px solid rgba(255, 210, 90, 0.7); animation: mm-type-pulse 2.4s ease-in-out infinite;
}
@keyframes mm-type-pulse { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }

.mm-types-note {
    height: auto; margin: -2px 0 0; padding: 4px 10px; border: none; border-radius: 999px; background: transparent;
    font-family: 'HwyGothic', Arial, sans-serif; font-size: 0.66rem; font-weight: normal; letter-spacing: 0.5px;
    color: rgba(255, 191, 0, 0.75); cursor: pointer; transition: color 0.18s, background 0.18s;
}
.mm-types-note:hover { color: #ffd45e; background: rgba(255, 191, 0, 0.08); }

.mm-stake {
    width: 100%; max-width: 520px; box-sizing: border-box; padding: 12px 14px 10px; border-radius: 14px; text-align: center;
    border: 1px solid rgba(255, 191, 0, 0.22);
    background: linear-gradient(160deg, rgba(36, 24, 8, 0.9), rgba(12, 9, 6, 0.9));
    transition: border-color 0.3s, box-shadow 0.3s;
}
.mm-stake.has-stake { border-color: rgba(255, 191, 0, 0.6); box-shadow: 0 0 22px rgba(255, 150, 30, 0.2); }
.mm-stake-top { display: flex; align-items: center; justify-content: center; gap: 8px; }
.mm-stake-title { font-family: 'HwyGothic', Arial, sans-serif; font-size: 0.62rem; letter-spacing: 3px; color: rgba(255, 191, 0, 0.75); }
.mm-stake .mm-info-pop { left: 50%; margin-left: -116px; }
.mm-stake .mm-info-pop::after { left: 110px; }
.mm-stake-amount {
    display: inline-flex; align-items: center; justify-content: center; align-self: center; gap: 8px; margin: 4px 0 8px;
    font-family: 'DragonSlayer', serif; font-size: 1.9rem; line-height: 1; color: #ffd45e;
    text-shadow: 0 0 16px rgba(255, 150, 30, 0.45);
}
.mm-stake:not(.has-stake) .mm-stake-amount { color: rgba(240, 236, 230, 0.45); text-shadow: none; }
.mm-stake-amount .gem-ico { font-size: 1.2rem; }
.mm-stake-amount.bump { animation: mm-stake-bump 0.42s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes mm-stake-bump { 0% { transform: scale(1); } 35% { transform: scale(1.22); } 100% { transform: scale(1); } }
.mm-stake-window {
    margin: -4px 0 8px; font-family: 'HwyGothic', Arial, sans-serif; font-size: 0.64rem; letter-spacing: 1px;
    color: #ffd45e; animation: mm-type-pulse 1s ease-in-out infinite;
}
.mm-stake-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.mm-stake-chip {
    height: auto; margin: 0; padding: 8px 13px; border-radius: 999px; cursor: pointer;
    font-family: 'HwyGothic', Arial, sans-serif; font-size: 0.74rem; font-weight: bold; letter-spacing: 1px;
    color: #ffd45e; background: rgba(255, 191, 0, 0.08); border: 1px solid rgba(255, 191, 0, 0.4);
    transition: transform 0.12s, background 0.18s, box-shadow 0.18s, color 0.18s;
}
.mm-stake-chip:hover:not(:disabled) {
    transform: translateY(-2px); background: rgba(255, 191, 0, 0.18);
    box-shadow: 0 4px 14px rgba(255, 150, 30, 0.35);
}
.mm-stake-chip:active:not(:disabled) { transform: translateY(0) scale(0.95); }
.mm-stake-chip-max { color: #1a0d00; border-color: transparent; background: linear-gradient(135deg, #ffe27a, #ffb300 60%, #ff8a00); }
.mm-stake-chip-max:hover:not(:disabled) { background: linear-gradient(135deg, #fff0a8, #ffc21a 60%, #ff9a1a); color: #1a0d00; }
.mm-stake-chip-clear { color: rgba(240, 236, 230, 0.75); background: transparent; border-color: rgba(240, 236, 230, 0.3); }
.mm-stake-chip-clear:hover:not(:disabled) { color: #fff; background: rgba(255, 255, 255, 0.08); box-shadow: none; }
.mm-stake-chip:disabled { opacity: 0.3; cursor: not-allowed; }
.mm-stake-foot { margin-top: 8px; font-family: 'HwyGothic', Arial, sans-serif; font-size: 0.62rem; letter-spacing: 0.5px; color: rgba(240, 236, 230, 0.45); }
.mm-stake .mm-error { margin-top: 8px; }

@media only screen and (max-width: 767px) {
    .mm-types { grid-template-columns: repeat(3, 1fr); }
    .mm-types .mm-type.is-active { grid-column: 1 / -1; }
}

/* ── Post-game "FIND ANOTHER MATCH" ── */
.winner-requeue {
    position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 12px;
    width: 100%; max-width: 340px; height: auto; margin: 4px auto 12px; padding: 14px 22px; box-sizing: border-box;
    border-radius: 14px; border: none; cursor: pointer; text-align: left;
    color: #1a0d00; background: linear-gradient(135deg, #ffe27a 0%, #ffb300 55%, #ff8a00 100%);
    box-shadow: 0 8px 26px rgba(255, 140, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    animation: winner-requeue-glow 2.4s ease-in-out infinite;
    transition: transform 0.15s;
}
.winner-requeue:hover { transform: translateY(-2px) scale(1.02); }
.winner-requeue:active { transform: scale(0.97); }
@keyframes winner-requeue-glow {
    0%, 100% { box-shadow: 0 8px 26px rgba(255, 140, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
    50% { box-shadow: 0 8px 36px rgba(255, 160, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
}
.winner-requeue-shine {
    position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-18deg); animation: winner-requeue-shine 3s ease-in-out infinite;
}
@keyframes winner-requeue-shine { 0%, 55% { left: -40%; } 100% { left: 130%; } }
.winner-requeue-icon { font-size: 1.5rem; transition: transform 0.5s; }
.winner-requeue:hover .winner-requeue-icon { transform: rotate(90deg); }
.winner-requeue-text { display: flex; flex-direction: column; gap: 2px; }
.winner-requeue-label { font-family: 'HwyGothic', Arial, sans-serif; font-size: 0.95rem; font-weight: bold; letter-spacing: 2px; }
.winner-requeue-sub { font-family: 'HwyGothic', Arial, sans-serif; font-size: 0.64rem; letter-spacing: 1px; opacity: 0.75; }
.winner-requeue.winner-requeue-compact { width: auto; margin: 0; padding: 8px 16px; border-radius: 10px; gap: 8px; }
.winner-requeue-compact .winner-requeue-icon { font-size: 1rem; }
.winner-requeue-compact .winner-requeue-label { font-size: 0.75rem; }

/* Slow ember pulse (the tutorial-complete campaign card) */
@keyframes play-campaign-pulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(255, 191, 0, 0.35), 0 0 14px rgba(255, 140, 0, 0.25); }
    50% { box-shadow: 0 0 0 1px rgba(255, 191, 0, 0.8), 0 0 30px rgba(255, 150, 0, 0.6); }
}

/* Tutorial complete: the campaign is the hero, other tutorials are chips below */
.tut-done-overlay {
    position: fixed; inset: 0; z-index: 2500;
    display: flex; align-items: center; justify-content: center; padding: 16px;
    background: radial-gradient(ellipse at 50% 40%, rgba(40, 22, 4, 0.85), rgba(0, 0, 0, 0.92));
    opacity: 0; transition: opacity 0.35s;
}
.tut-done-overlay.show { opacity: 1; }
.tut-done-box {
    width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow-y: auto; box-sizing: border-box;
    padding: 26px 24px 18px; border-radius: 18px; text-align: center;
    background: linear-gradient(160deg, #1a1209 0%, #0d0906 100%);
    border: 1px solid rgba(255, 191, 0, 0.35);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(255, 140, 0, 0.18);
    transform: translateY(14px) scale(0.97); transition: transform 0.4s cubic-bezier(.2, .9, .3, 1.2);
}
.tut-done-overlay.show .tut-done-box { transform: none; }
.tut-done-kicker { font-family: 'HwyGothic', Arial, sans-serif; font-size: 0.66rem; letter-spacing: 3px; color: rgba(255, 191, 0, 0.8); }
.tut-done-title { margin: 6px 0 18px; font-family: 'DragonSlayer', serif; font-size: 2rem; letter-spacing: 2px; color: #ffd45e; text-shadow: 0 0 20px rgba(255, 150, 30, 0.5); }
.tut-done-campaign {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px;
    padding: 18px; border-radius: 14px; text-align: left; color: #f0ece6;
    background: radial-gradient(ellipse 80% 140% at 0% 50%, rgba(255, 191, 0, 0.28), rgba(255, 191, 0, 0) 70%), linear-gradient(120deg, #1f160a, #2c1f0b);
    border: 1px solid rgba(255, 191, 0, 0.6);
    animation: play-campaign-pulse 2.8s ease-in-out infinite;
    transition: transform 0.2s;
}
.tut-done-campaign:hover { transform: translateY(-2px); color: #f0ece6; }
.tut-done-campaign-glow {
    position: absolute; inset: -40%; pointer-events: none;
    background: conic-gradient(from 0deg, transparent 0 70%, rgba(255, 200, 80, 0.18) 80%, transparent 90%);
    animation: tut-done-sweep 5s linear infinite;
}
@keyframes tut-done-sweep { to { transform: rotate(360deg); } }
.tut-done-campaign-art { position: relative; flex: 0 0 auto; width: 104px; height: 104px; border-radius: 50%; filter: drop-shadow(0 0 16px rgba(255, 191, 0, 0.5)); }
.tut-done-campaign-text { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tut-done-campaign-text small { font-family: 'HwyGothic', Arial, sans-serif; font-size: 0.6rem; letter-spacing: 3px; color: #ffbf00; }
.tut-done-campaign-title { font-family: 'DragonSlayer', serif; font-size: 1.9rem; line-height: 1; color: #ffd45e; }
.tut-done-campaign-body { font-family: 'HwyGothic', Arial, sans-serif; font-size: 0.78rem; line-height: 1.45; color: rgba(240, 236, 230, 0.8); }
.tut-done-campaign-progress { font-family: 'HwyGothic', Arial, sans-serif; font-size: 0.7rem; color: #ffd966; }
.tut-done-campaign-btn { align-self: flex-start; margin-top: 4px; padding: 10px 18px; font-size: 0.82rem; }
.tut-done-more-label { margin: 20px 0 8px; font-family: 'HwyGothic', Arial, sans-serif; font-size: 0.62rem; letter-spacing: 3px; color: rgba(240, 236, 230, 0.5); }
.tut-done-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tut-done-chip {
    display: inline-flex; align-items: center; gap: 8px; height: auto; margin: 0;
    padding: 5px 12px 5px 5px; border-radius: 999px; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.04);
    color: rgba(240, 236, 230, 0.85); font-family: 'HwyGothic', Arial, sans-serif; font-size: 0.7rem; letter-spacing: 1px;
    transition: border-color 0.18s, background 0.18s;
}
.tut-done-chip:hover { border-color: rgba(255, 191, 0, 0.6); background: rgba(255, 191, 0, 0.08); color: #ffd45e; }
.tut-done-chip img { width: 26px; height: 26px; border-radius: 50%; }
.tut-done-later {
    margin-top: 16px; height: auto; padding: 6px 12px; border: none; background: transparent; cursor: pointer;
    font-family: 'HwyGothic', Arial, sans-serif; font-size: 0.66rem; letter-spacing: 2px; color: rgba(240, 236, 230, 0.4);
}
.tut-done-later:hover { color: rgba(240, 236, 230, 0.8); }
@media only screen and (max-width: 767px) {
    .tut-done-campaign { flex-direction: column; text-align: center; }
    .tut-done-campaign-text { align-items: center; }
    .tut-done-campaign-btn { align-self: center; }
    .tut-done-campaign-art { width: 84px; height: 84px; }
}

/* Under a reward: SPEND YOUR TREASURE → /skins, OPEN YOUR PACKS → /skins?tab=PACKS */
.winner-reward-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -4px 0 14px; }
.winner-reward-link { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; font-size: 0.68rem; padding: 7px 14px; }
/* ── Play sub-views: forms, pickers, lists (10/22/2026) ──────────
   Create Lobby, Browse, Spectate, Lobby, Ranked setup and Tutorials share the
   play home's language: gradient headings, smoked-glass fields with an ember
   focus glow, picker cards instead of dropdowns, molten confirm buttons. */

/* View header: big gradient title, round glass back button */
.play-view-header {
    border-bottom: 0;
    position: relative;
}

.play-view-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 74, 28, 0.7), rgba(255, 191, 0, 0.5) 30%, rgba(255, 191, 0, 0) 100%);
}

.play-view-header h2 {
    font-family: 'DragonSlayer', serif;
    font-weight: normal;
    font-size: 1.55rem;
    letter-spacing: 1.5px;
    color: #ffbf00;
    background: linear-gradient(180deg, #fff2c2 0%, #ffbf00 50%, #ff7a1c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8));
}

.btn-back {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 191, 0, 0.06);
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}

.btn-back:hover {
    transform: translateX(-2px);
    box-shadow: 0 0 14px rgba(255, 191, 0, 0.25);
}

.btn-back-danger:hover {
    transform: none;
    box-shadow: 0 0 14px rgba(255, 80, 80, 0.3);
}

/* Field labels: small ember kicker */
.play-field label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.64rem;
    letter-spacing: 2.5px;
    color: #ff8a4c;
}

.play-field label::before {
    content: '';
    width: 14px;
    height: 2px;
    background: linear-gradient(90deg, #ff4a1c, rgba(255, 191, 0, 0.8));
}

.play-form {
    gap: 18px;
}

/* Text inputs: smoked glass, ember glow on focus */
.play-field input,
.play-field select,
.lobby-search-input,
.lobby-chat-input input {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 191, 0, 0.2);
    border-radius: 12px;
    color: #f0ece6;
    transition: border-color 0.2s, box-shadow 0.25s, background 0.2s;
}

.play-field input:focus,
.play-field select:focus,
.lobby-search-input:focus,
.lobby-chat-input input:focus {
    border-color: rgba(255, 191, 0, 0.7);
    background: rgba(30, 16, 8, 0.6);
    box-shadow: 0 0 0 3px rgba(255, 140, 30, 0.15), 0 0 18px rgba(255, 120, 30, 0.2);
}

.play-input-wrap {
    position: relative;
}

.play-input-wrap .play-input-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    font-size: 0.8rem;
    color: rgba(255, 191, 0, 0.6);
    pointer-events: none;
}

.play-field .play-input-wrap input {
    padding-left: 38px;
}

/* The select behind each picker stays in the DOM as the source of truth */
.choice-source {
    display: none !important;
}

/* Picker cards (game type) and chips (timer) */
.choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.choice-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.choice {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    height: auto;
    min-width: 0;
    padding: 12px 14px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-weight: normal;
    text-align: left;
    color: rgba(240, 236, 230, 0.86);
    background: linear-gradient(160deg, rgba(36, 24, 14, 0.8) 0%, rgba(12, 9, 7, 0.85) 100%);
    border: 0;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(255, 191, 0, 0.14);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.2s;
}

.choice:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px rgba(255, 191, 0, 0.45), 0 8px 18px rgba(0, 0, 0, 0.4);
}

.choice:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 1.5px #ffbf00, 0 0 0 3px rgba(255, 140, 30, 0.25);
}

.choice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-bottom: 4px;
    border-radius: 9px;
    font-size: 0.82rem;
    color: #ffbf00;
    background: rgba(255, 191, 0, 0.1);
    transition: background 0.25s, color 0.25s, box-shadow 0.25s;
}

.choice-name {
    font-size: 0.86rem;
    letter-spacing: 1px;
    color: #f0ece6;
}

.choice-desc {
    font-size: 0.68rem;
    line-height: 1.35;
    color: rgba(240, 236, 230, 0.55);
}

.choice.is-selected {
    background:
        radial-gradient(ellipse 90% 80% at 0% 0%, rgba(255, 140, 30, 0.22) 0%, rgba(255, 140, 30, 0) 70%),
        linear-gradient(160deg, rgba(56, 34, 14, 0.92) 0%, rgba(20, 12, 8, 0.92) 100%);
    box-shadow: inset 0 0 0 1.5px rgba(255, 191, 0, 0.85), 0 0 22px rgba(255, 140, 30, 0.25);
}

.choice.is-selected .choice-icon {
    color: #1a0d04;
    background: linear-gradient(135deg, #ffd45e, #ff8a1c);
    box-shadow: 0 0 14px rgba(255, 138, 28, 0.45);
}

.choice.is-selected .choice-name {
    color: #ffd45e;
}

/* Check mark in the corner of the chosen card */
.choice-grid .choice.is-selected::after {
    content: '\2713';
    position: absolute;
    top: 10px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 0.65rem;
    color: #1a0d04;
    background: #ffbf00;
    animation: choicePop 0.3s cubic-bezier(0.2, 0.8, 0.3, 1.4);
}

@keyframes choicePop {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}

.choice-row .choice {
    align-items: center;
    justify-content: center;
    padding: 10px 6px;
    text-align: center;
}

.choice-row .choice-name {
    font-size: 0.74rem;
    letter-spacing: 0.5px;
}

.choice-row .choice.is-selected {
    background: linear-gradient(180deg, #ffd45e 0%, #ffbf00 50%, #ff9a1c 100%);
    box-shadow: 0 4px 16px rgba(255, 140, 20, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.choice-row .choice.is-selected .choice-name {
    color: #1a0d04;
}

/* Molten confirm buttons (Create, Find Match, Start Game, Add Bot) */
.play-btn.play-btn-confirm,
#play-mm-setup .play-btn-tall,
#lobby-details .btn-gold {
    position: relative;
    overflow: hidden;
    justify-content: center;
    height: auto;
    color: #1a0d04;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffd45e 0%, #ffbf00 45%, #ff9a1c 100%);
    box-shadow: 0 8px 24px rgba(255, 140, 20, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    transition: transform 0.18s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.play-btn.play-btn-confirm,
#play-mm-setup .play-btn-tall {
    padding: 16px 18px;
    font-size: 0.95rem;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.play-btn.play-btn-confirm span,
#play-mm-setup .play-btn-tall span {
    flex: 0 0 auto;
}

.play-btn.play-btn-confirm::after,
#play-mm-setup .play-btn-tall::after,
#lobby-details .btn-gold::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 30%;
    height: 100%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    animation: rankedGlint 5s ease-in-out 1s infinite;
    pointer-events: none;
}

.play-btn.play-btn-confirm:hover,
#play-mm-setup .play-btn-tall:hover,
#lobby-details .btn-gold:hover {
    color: #1a0d04;
    background: linear-gradient(180deg, #ffd45e 0%, #ffbf00 45%, #ff9a1c 100%);
    transform: translateY(-2px);
    filter: brightness(1.06) saturate(1.1);
    box-shadow: 0 12px 32px rgba(255, 120, 20, 0.5), 0 0 30px rgba(255, 150, 30, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

#lobby-details .btn-gold {
    padding: 10px 22px;
    font-size: 0.74rem;
    letter-spacing: 2px;
}

/* ── Ranked setup ── */
.mm-row {
    padding: 12px 16px;
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(36, 24, 14, 0.7) 0%, rgba(12, 9, 7, 0.75) 100%);
    border-color: rgba(255, 191, 0, 0.16);
}

.mm-select,
.lobby-type-select,
.lobby-bot-select,
.lobby-dd-select {
    border-radius: 999px;
    padding-left: 14px;
    padding-right: 14px;
    background-color: rgba(0, 0, 0, 0.4);
}

.mm-risk-input {
    border-radius: 999px;
    padding: 6px 16px;
}

.mm-risk-input:focus-within,
.mm-select:focus {
    box-shadow: 0 0 0 3px rgba(255, 140, 30, 0.15), 0 0 18px rgba(255, 120, 30, 0.2);
}

/* ── Browse: search + filters ── */
.lobby-search-input {
    border-radius: 999px;
    padding-left: 40px;
}

.lobby-search-icon {
    left: 16px;
}

.lobby-dd-btn,
.lobby-refresh-btn {
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.3);
}

.lobby-refresh-btn:hover i {
    animation: lobbySpin 0.6s ease;
}

@keyframes lobbySpin {
    to { transform: rotate(360deg); }
}

.lobby-dd-panel {
    padding: 10px;
    border-radius: 14px;
    background: rgba(18, 12, 9, 0.97);
    border-color: rgba(255, 191, 0, 0.3);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 24px rgba(255, 120, 30, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ── Lobby + spectate rows: icon badge, name, tag chips, chevron ── */
.lobby-list {
    gap: 8px;
    padding: 2px;
}

.lobby-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 14px;
    border: 0;
    background: linear-gradient(160deg, rgba(36, 24, 14, 0.75) 0%, rgba(12, 9, 7, 0.8) 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 191, 0, 0.12);
    transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.lobby-item:hover {
    transform: translateY(-2px);
    background: linear-gradient(160deg, rgba(56, 34, 14, 0.9) 0%, rgba(20, 12, 8, 0.9) 100%);
    box-shadow: inset 0 0 0 1.5px rgba(255, 191, 0, 0.6), 0 10px 22px rgba(0, 0, 0, 0.45), 0 0 18px rgba(255, 140, 30, 0.18);
}

.lobby-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 0.9rem;
    color: #1a0d04;
    background: linear-gradient(135deg, #ffd45e, #ff8a1c);
    box-shadow: 0 0 12px rgba(255, 138, 28, 0.3);
}

/* Spectate: a live game, so the badge breathes red */
.lobby-item-icon-live {
    color: #fff;
    background: linear-gradient(135deg, #ff6a3c, #c81e1e);
    animation: lobbyLive 2s ease-in-out infinite;
}

@keyframes lobbyLive {
    0%, 100% { box-shadow: 0 0 8px rgba(255, 60, 30, 0.35); }
    50%      { box-shadow: 0 0 18px rgba(255, 60, 30, 0.75); }
}

.lobby-item-main {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.lobby-item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.88rem;
}

.lobby-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    color: rgba(240, 236, 230, 0.55);
}

.lobby-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.62rem;
    letter-spacing: 0.5px;
    color: rgba(240, 236, 230, 0.75);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 191, 0, 0.12);
}

.lobby-tag i {
    font-size: 0.55rem;
    color: rgba(255, 191, 0, 0.7);
}

.lobby-tag-type {
    color: #ffd45e;
    background: rgba(255, 191, 0, 0.1);
    border-color: rgba(255, 191, 0, 0.3);
}

.lobby-item-go {
    font-size: 0.75rem;
    color: rgba(255, 191, 0, 0.45);
    transition: transform 0.2s, color 0.2s;
}

.lobby-item:hover .lobby-item-go {
    color: #ffbf00;
    transform: translateX(3px);
}

.lobby-empty {
    padding: 28px 16px;
    border-radius: 14px;
    border: 1px dashed rgba(255, 191, 0, 0.18);
    background: rgba(0, 0, 0, 0.2);
}

/* ── Active lobby ── */
.lobby-info {
    gap: 10px;
}

.lobby-info-row {
    padding: 8px 14px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 191, 0, 0.1);
}

.lobby-info-label {
    color: #ff8a4c;
    letter-spacing: 2px;
}

.lobby-player {
    height: 50px;
    padding: 0 14px;
    gap: 12px;
    border-radius: 14px;
    border: 0;
    background: linear-gradient(160deg, rgba(36, 24, 14, 0.75) 0%, rgba(12, 9, 7, 0.8) 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 191, 0, 0.16);
}

.lobby-player > i:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 0.8rem;
    color: #1a0d04;
    background: linear-gradient(135deg, #ffd45e, #ff8a1c);
    box-shadow: 0 0 12px rgba(255, 138, 28, 0.35);
}

/* Empty seat: dashed and breathing, so the lobby reads as "waiting" */
.lobby-player.empty {
    background: rgba(0, 0, 0, 0.2);
    box-shadow: none;
    border: 1px dashed rgba(255, 191, 0, 0.3);
    animation: lobbySeatWait 2.4s ease-in-out infinite;
}

.lobby-player.empty > i:first-child {
    color: rgba(255, 191, 0, 0.7);
    background: rgba(255, 191, 0, 0.08);
    box-shadow: none;
}

@keyframes lobbySeatWait {
    0%, 100% { border-color: rgba(255, 191, 0, 0.2); }
    50%      { border-color: rgba(255, 191, 0, 0.55); }
}

.lobby-host-badge {
    padding: 4px 9px;
    border-radius: 999px;
    color: #1a0d04;
    background: linear-gradient(180deg, #ffd45e, #ff9a1c);
    border: 0;
}

.lobby-kick-btn {
    padding: 4px 9px;
    border-radius: 999px;
}

.lobby-actions {
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.lobby-bot-select {
    height: auto;
    min-height: 38px;
}

.lobby-chat {
    border-top-color: rgba(255, 191, 0, 0.12);
}

.lobby-chat-input input {
    border-radius: 999px;
    padding: 8px 14px;
}

@media (prefers-reduced-motion: reduce) {
    .play-btn.play-btn-confirm::after,
    #play-mm-setup .play-btn-tall::after,
    #lobby-details .btn-gold::after,
    .lobby-item-icon-live,
    .lobby-player.empty {
        animation: none;
    }
}

@media only screen and (max-width: 767px), only screen and (hover: none) {
    .choice-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Font Awesome (loaded after this file) resets display on .fas, so the badge
   centering needs the extra class to win */
.choice .choice-icon {
    display: inline-flex;
}

.lobby-player-name {
    text-align: left;
}

/* Wager field sits bare inside its pill (global input styles would box it) */
.mm-risk-input .wager-input {
    height: auto;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #ffd45e;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-weight: bold;
    font-size: 1.05rem;
}

/* ── Sub-views fit the panel (desktop) ───────────────────────────
   The desktop menu is a fixed-height, no-scroll page: every play view gets the
   space between the player banner and the panel bottom and must fit inside it.
   Create Lobby and Tutorials fit by layout alone (rows share the height and
   card descriptions drop out when a card gets too short — container queries);
   lists and lobby chat take the leftover space and scroll inside themselves. */

/* Game-type cards: icon beside the name, description under the name */
.choice-grid .choice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
}

.choice-grid .choice-icon {
    grid-row: 1 / span 2;
    margin-bottom: 0;
}

.choice-grid .choice-name {
    align-self: end;
}

.choice-grid .choice-desc {
    align-self: start;
}

@media only screen and (min-width: 1101px) and (hover: hover) {
    .play-panel > .play-view:not(#play-home) {
        flex: 1 1 auto;
        min-height: 0;
    }

    .play-view-header,
    .lobby-search {
        flex-shrink: 0;
    }

    /* Create Lobby: the game-type grid takes whatever height is left */
    #play-create .play-form {
        flex: 1 1 auto;
        min-height: 0;
        gap: clamp(8px, 1.8vh, 18px);
    }

    #play-create .play-field {
        flex-shrink: 0;
    }

    #play-create .play-field-types {
        flex: 1 1 auto;
        min-height: 0;
    }

    #lobby-game-type-picker {
        flex: 1 1 auto;
        min-height: 0;
        grid-auto-rows: minmax(0, 1fr);
    }

    #lobby-game-type-picker .choice {
        container-type: size;
        min-height: 0;
        overflow: hidden;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    /* all six timer chips on one row */
    #lobby-prompt-timer-picker {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    #lobby-prompt-timer-picker .choice {
        padding: 8px 4px;
    }

    #play-create .play-btn-confirm {
        flex-shrink: 0;
        margin-top: 0;
        padding-top: 13px;
        padding-bottom: 13px;
    }

    /* Browse / Spectate: the list takes the rest and scrolls inside */
    #play-browse .lobby-list,
    #play-spectate .lobby-list {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
    }

    /* Open lobby: info + seats stay put, the chat log takes the rest */
    #lobby-details {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    /* Name / Type / Timer side by side (seats, teams and actions span the row),
       so the chat log keeps real height even on short screens */
    #lobby-details .lobby-info {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        flex-shrink: 0;
        gap: 8px;
    }

    #lobby-details .lobby-info > :not(.lobby-info-row) {
        grid-column: 1 / -1;
    }

    #lobby-details .lobby-info-row {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 4px;
        min-width: 0;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    #lobby-details .lobby-info-row > :last-child {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #lobby-details .lobby-info-row .lobby-type-select {
        width: 100%;
    }

    #lobby-details .lobby-player {
        height: 44px;
    }

    #lobby-details .lobby-chat {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        margin-top: 10px;
        padding-top: 10px;
    }

    #lobby-details .lobby-chat-messages {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
    }

    #lobby-details .lobby-chat-input {
        flex-shrink: 0;
    }

    /* Tutorials: tutorial.css stacks five bars as flex items that won't shrink
       below their content; a grid with minmax(0, 1fr) rows makes them share the
       height exactly (the .tutorials-grid wrapper is display: contents there) */
    #play-tutorials.play-view {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto repeat(5, minmax(0, 1fr));
    }

    #play-tutorials.play-view .tutorials-featured,
    #play-tutorials.play-view .tutorials-card {
        container-type: size;
        min-height: 0;
        overflow: hidden;
        padding-top: 4px;
        padding-bottom: 4px;
    }
}

/* Short cards drop the one-line description (cqh-free: the card is the container) */
@container (max-height: 62px) {
    .choice-desc {
        display: none;
    }

    /* name alone: centre it beside the icon */
    .choice-grid .choice-name {
        grid-row: 1 / span 2;
        align-self: center;
    }
}

@container (max-height: 84px) {
    #play-tutorials .tutorials-item-desc {
        display: none;
    }

    #play-tutorials .tutorials-avatar {
        width: 40px;
        height: 40px;
    }
}

@container (max-height: 52px) {
    #play-tutorials .tutorials-item-tag {
        display: none;
    }

    #play-tutorials .tutorials-avatar {
        width: 32px;
        height: 32px;
    }
}

/* Short laptop screens: tighter banner and headers buy the views more room */
@media only screen and (min-width: 1101px) and (hover: hover) and (max-height: 820px) {
    .menu-panel {
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .player-info-header {
        gap: 12px;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    .player-hero-crest {
        width: 46px;
        height: 46px;
        border-radius: 13px;
    }

    .player-hero-crest-face,
    .player-hero-avatar {
        border-radius: 11px;
        font-size: 1.4rem;
    }

    .player-hero-top {
        margin-bottom: 5px;
    }

    .player-info-name {
        font-size: 1.25rem;
    }

    .play-view-header {
        margin-bottom: 6px;
        padding-bottom: 8px;
    }

    .play-view-header h2 {
        font-size: 1.3rem;
    }

    .btn-back {
        width: 32px;
        height: 32px;
    }

    #play-tutorials .tutorials-avatar-lg {
        width: 52px;
        height: 52px;
    }
}

/* ── Phones: nothing in the play views overlaps or clips (10/23/2026) ──
   Off the fixed-height desktop menu the views grow with their content and the
   page scrolls, so every card sizes to its text instead of sharing a height. */

/* Campaign card: the copy is centred, so drop it below the corner chip */
@media only screen and (max-width: 1100px), only screen and (hover: none) {
    .play-btn-campaign .play-mode-text {
        padding-top: 36px;
    }

    /* ...and keep the art at its old size (it scales with the now-taller card) */
    .play-btn-campaign .play-mode-art {
        height: 92px;
    }
}

@media only screen and (max-width: 767px), only screen and (hover: none) {
    /* Tutorials: tutorial.css gives each bar flex: 1 1 0 + min-height: 60px to
       split the desktop panel; here that squeezes them to 60px and the text spills */
    #play-tutorials.play-view .tutorials-featured,
    #play-tutorials.play-view .tutorials-card {
        flex: 0 0 auto;
        gap: 14px;
        padding: 12px 14px;
    }

    #play-tutorials.play-view .tutorials-item-go {
        flex-shrink: 0;
    }

    /* Lobby: the bot picker takes its own row so ADD BOT / START GAME never wrap */
    #lobby-details .lobby-bot-add {
        flex: 1 1 100%;
        min-width: 0;
    }

    #lobby-details .lobby-bot-select {
        flex: 1 1 auto;
        min-width: 0;
    }

    #lobby-details .btn-gold {
        flex-shrink: 0;
        white-space: nowrap;
    }
}

@media only screen and (max-width: 480px) {
    /* Game-type cards: icon above the name, so the name gets the card's full width */
    .choice-grid .choice {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        align-content: start;
        padding: 12px;
    }

    .choice-grid .choice-icon {
        grid-row: auto;
        margin-bottom: 4px;
    }

    .choice-grid .choice-name {
        overflow-wrap: anywhere;
    }

    #play-tutorials.play-view .tutorials-avatar-lg {
        width: 56px;
        height: 56px;
    }

    #play-tutorials.play-view .tutorials-item-tag {
        letter-spacing: 1.5px;
    }

    /* Bot picker above a full-width ADD BOT, so the bot's name isn't cut off */
    #lobby-details .lobby-bot-add {
        flex-wrap: wrap;
    }

    #lobby-details .lobby-bot-add > * {
        flex: 1 1 100%;
    }

    .play-btn-campaign .play-mode-art {
        height: 84px;
    }
}

/* Campaign turn limit (play.js renderCampaignTurnLimit): a countdown chip beside the page title. */
.campaign-turn-limit { display: inline-flex; align-items: center; margin-left: 10px; padding: 3px 10px; border-radius: 999px; font-family: 'HwyGothic', sans-serif; font-size: 0.72rem; letter-spacing: 1.5px; color: #ffe9a8; background: rgba(255, 191, 0, 0.12); border: 1px solid rgba(255, 191, 0, 0.55); white-space: nowrap; }
.campaign-turn-limit-last { color: #0b1020; background: linear-gradient(180deg, #ff9a7a, #ff5a3c); border-color: transparent; animation: campaign-turn-limit-pulse 1.2s ease-in-out infinite; }
@keyframes campaign-turn-limit-pulse { 50% { box-shadow: 0 0 14px rgba(255, 90, 60, 0.7); } }

/* ── Choice spotlight (play.js renderChoiceSpotlight) ─────────────
   A pick off the board (revealed deck card, graveyard card, player / deck
   target) is brought to the centre: only the pickable options, large and
   glowing, with the prompt's buttons mirrored underneath. Backdrop click or
   the eye peeks at the board; the chip brings it back. */
.choice-spot {
    position: fixed;
    inset: 0;
    z-index: 5500;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.choice-spot-backdrop {
    position: absolute;
    inset: 0;
    /* No backdrop-filter: a live blur re-renders the whole board every frame
       something behind it moves (attacker glows, the inspect image swapping on
       hover), which is what made hovering in here lag. A deeper dim instead. */
    background: radial-gradient(ellipse at center, rgba(28, 20, 6, 0.62) 0%, rgba(0, 0, 0, 0.86) 75%);
    pointer-events: auto;
    animation: choice-spot-fade 0.25s ease-out;
}

.choice-spot-panel {
    position: relative;
    pointer-events: auto;
    max-width: min(980px, calc(100vw - 32px));
    max-height: calc(100vh - 40px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 22px 26px 18px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(30, 23, 10, 0.97), rgba(12, 10, 6, 0.97));
    border: 1px solid rgba(255, 191, 0, 0.45);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65), 0 0 46px rgba(255, 191, 0, 0.18);
    text-align: center;
    animation: choice-spot-rise 0.34s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.choice-spot.is-closing .choice-spot-panel,
.choice-spot.is-closing .choice-spot-backdrop {
    animation: choice-spot-out 0.2s ease-in forwards;
}

.choice-spot-title {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.9rem;
    letter-spacing: 3px;
    color: #ffbf00;
    margin: 0 34px 4px;
}

.choice-spot-hint {
    font-size: 0.68rem;
    letter-spacing: 2px;
    color: rgba(255, 240, 200, 0.55);
    margin-bottom: 14px;
    min-height: 0.8em;
}

.choice-spot-choices {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    /* overflow-y alone computes overflow-x to auto, and the auras (inset -12px
       + blur) and hover lifts poke past the sides — a stray left-right
       scrollbar. Clip sideways and leave room for the glow instead. */
    overflow-x: hidden;
    overflow-y: auto;
    padding: 28px 30px 22px;
    min-height: 0;
}

.choice-spot-choices.is-players {
    gap: 28px;
}

/* Each card sits in a breathing golden aura and rises in, one after another */
.choice-spot-choice {
    position: relative;
    isolation: isolate;
    animation: choice-spot-card-in 0.4s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
    animation-delay: calc(var(--i, 0) * 60ms);
}

/* The aura is a soft gradient (no blur filter) and only its opacity and scale
   animate, so it stays on the compositor instead of repainting every frame. */
.choice-spot-choice::before {
    content: '';
    position: absolute;
    inset: -16px;
    border-radius: 20px;
    background: radial-gradient(ellipse at center, rgba(255, 191, 0, 0.38) 0%, rgba(255, 191, 0, 0.14) 45%, rgba(255, 191, 0, 0) 72%);
    z-index: -1;
    animation: choice-spot-aura 2.2s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * -300ms);
    will-change: transform, opacity;
    pointer-events: none;
}

/* Hover / pick glow: a fixed-shadow layer that fades in, rather than
   transitioning big box-shadows (a full repaint on every frame). */
.choice-spot-choice::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 6px;
    box-shadow: 0 0 18px 3px rgba(255, 205, 80, 0.65);
    opacity: 0;
    transform: translateY(0) scale(1);
    transition: opacity 0.12s ease-out, transform 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.2);
    pointer-events: none;
}

.choice-spot .game-card.choice-spot-card {
    width: clamp(92px, min(13vw, 24vh), 150px);
    height: auto;
    aspect-ratio: 62 / 87;
    cursor: pointer;
    border: 1px solid rgba(255, 191, 0, 0.6);
    box-shadow: 0 0 18px rgba(255, 191, 0, 0.35), 0 12px 26px rgba(0, 0, 0, 0.55);
    /* Snappy lift with a touch of overshoot; transform-only so it composites */
    transition: transform 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.2), border-color 0.12s ease-out;
    will-change: transform;
}

@media (hover: hover) {
    .choice-spot .game-card.choice-spot-card:hover {
        transform: translateY(-8px) scale(1.05);
        border-color: #ffd24a;
        box-shadow: 0 0 18px rgba(255, 191, 0, 0.35), 0 12px 26px rgba(0, 0, 0, 0.55);
    }

    .choice-spot-choice:hover::after {
        opacity: 1;
        transform: translateY(-8px) scale(1.05);
    }
}

.choice-spot .game-card.choice-spot-card:active {
    transform: translateY(-4px) scale(1.01);
    transition-duration: 0.06s;
}

/* Picked: same 1px border (the board's 2px .selected border would nudge the
   row) with a bright ring and the glow layer held on. */
.choice-spot .game-card.choice-spot-card.selected,
.choice-spot .game-card.choice-spot-card.selected.selectable:hover {
    transform: translateY(-10px) scale(1.07);
    border: 1px solid #fff2c0;
    outline: none;
    box-shadow: 0 0 0 2px #ffbf00, 0 18px 32px rgba(0, 0, 0, 0.55);
}

.choice-spot-choice:has(.selected)::after {
    opacity: 1;
    transform: translateY(-10px) scale(1.07);
    box-shadow: 0 0 20px 5px rgba(255, 215, 110, 0.8);
}

/* Player / deck target tiles: blue = you, red = the opponent */
.choice-spot-player {
    --side: 74, 163, 255;
    width: 150px;
    height: auto;
    padding: 20px 10px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    border-radius: 12px;
    border: 1px solid rgba(var(--side), 0.6);
    background: radial-gradient(ellipse at 50% 30%, rgba(var(--side), 0.16), rgba(0, 0, 0, 0.25) 70%);
    box-shadow: 0 0 22px rgba(var(--side), 0.28);
    color: #fff;
    cursor: pointer;
    position: relative;
    transition: transform 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.2), border-color 0.12s ease-out;
    /* backwards, not both: a held end state would pin transform and swallow the hover lift */
    animation: choice-spot-card-in 0.4s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
    animation-delay: calc(var(--i, 0) * 80ms);
}

.choice-spot-player::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 40px 2px rgba(var(--side), 0.6);
    opacity: 0;
    transition: opacity 0.12s ease-out;
    pointer-events: none;
}

.choice-spot-player.side-opp {
    --side: 255, 90, 74;
}

@media (hover: hover) {
    .choice-spot-player:hover {
        transform: translateY(-6px);
        border-color: rgba(var(--side), 0.95);
    }

    .choice-spot-player:hover::after {
        opacity: 1;
    }
}

.choice-spot-player:active {
    transform: translateY(-2px) scale(0.98);
    transition-duration: 0.06s;
}

.choice-spot-player.is-chosen {
    border-color: rgba(var(--side), 1);
    box-shadow: 0 0 0 2px rgba(var(--side), 0.9), 0 0 22px rgba(var(--side), 0.28);
}

.choice-spot-player.is-chosen::after {
    opacity: 1;
    box-shadow: 0 0 46px 4px rgba(var(--side), 0.75);
}

.choice-spot-avatar-wrap {
    position: relative;
}

.choice-spot-avatar {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    border: 2px solid rgba(var(--side), 0.9);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 1.8rem;
    color: rgba(var(--side), 1);
}

.choice-spot-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.choice-spot-deck-badge {
    position: absolute;
    right: -6px;
    bottom: -4px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #17120a;
    border: 1px solid rgba(var(--side), 0.9);
    color: rgba(var(--side), 1);
    font-size: 0.8rem;
}

.choice-spot-name {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.75rem;
    letter-spacing: 2px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The prompt's own buttons, mirrored */
.choice-spot-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 6px;
}

.choice-spot-btn {
    height: auto;
    padding: 10px 24px;
    border-radius: 8px;
    border: 1px solid #ffbf00;
    background: rgba(255, 191, 0, 0.06);
    color: #ffbf00;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.75rem;
    letter-spacing: 2px;
    cursor: pointer;
    transition: background-color 0.1s ease-out, filter 0.1s ease-out, transform 0.12s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

@media (hover: hover) {
    .choice-spot-btn:hover:not(:disabled) {
        background-color: rgba(255, 191, 0, 0.18);
        transform: translateY(-2px);
    }

    /* Gradients can't transition, so brighten the confirm with a filter instead */
    .choice-spot-btn.btn-confirm:hover:not(:disabled) {
        filter: brightness(1.12);
    }
}

.choice-spot-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.97);
    transition-duration: 0.05s;
}

.choice-spot-btn.btn-confirm {
    background: linear-gradient(180deg, #ffd24a, #e0a000);
    border-color: #ffd24a;
    color: #140e02;
}

.choice-spot-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Peek at the board / bring the choice back */
.choice-spot-peek {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 191, 0, 0.35);
    background: rgba(255, 191, 0, 0.08);
    color: #ffbf00;
    cursor: pointer;
}

.choice-spot-reopen {
    display: none;
    position: absolute;
    bottom: 96px;
    left: 50%;
    width: 56px;
    height: 56px;
    margin-left: -28px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #ffbf00;
    background: radial-gradient(circle, rgba(255, 191, 0, 0.3), rgba(20, 14, 4, 0.92) 70%);
    color: #ffbf00;
    font-size: 1.2rem;
    cursor: pointer;
    pointer-events: auto;
    animation: choice-spot-beacon 1.4s ease-in-out infinite;
}

.choice-spot.is-min .choice-spot-backdrop,
.choice-spot.is-min .choice-spot-panel {
    display: none;
}

.choice-spot.is-min .choice-spot-reopen {
    display: block;
}

@keyframes choice-spot-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes choice-spot-rise {
    from { opacity: 0; transform: translateY(18px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes choice-spot-out {
    to { opacity: 0; transform: scale(0.97); }
}

@keyframes choice-spot-card-in {
    from { opacity: 0; transform: translateY(22px) scale(0.9); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes choice-spot-aura {
    0%, 100% { opacity: 0.55; transform: scale(0.97); }
    50%      { opacity: 1;    transform: scale(1.04); }
}

@keyframes choice-spot-beacon {
    0%, 100% { box-shadow: 0 0 12px rgba(255, 191, 0, 0.4); }
    50%      { box-shadow: 0 0 30px rgba(255, 191, 0, 0.85); }
}

@media (max-width: 767px) {
    .choice-spot-panel {
        padding: 18px 14px 14px;
    }
    .choice-spot-choices {
        gap: 12px;
    }
    .choice-spot .game-card.choice-spot-card {
        width: clamp(78px, min(27vw, 22vh), 120px);
    }
    .choice-spot-player {
        width: 128px;
    }
}


/* ══ SOCIAL: friends list, direct messages, global + game chat ═══════════════
   Rendered by play.js (renderRelations / renderDmList / renderChatThread). One look for the
   /play menu panel and the in-game FRIENDS / GAME CHAT tabs (.soc-list-compact,
   .soc-thread-compact). Avatars fall back to a coloured initial (--soc-hue per name). */

.soc-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Tabs: badges for pending requests / unread DMs, a dot for unseen global chat */
.friends-panel .panel-tab,
.game-friends-box .panel-tab {
    position: relative;
}

.soc-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    margin-left: 6px;
    padding: 0 4px;
    border-radius: 8px;
    background: linear-gradient(180deg, #ff6a2c, #e0331a);
    color: #fff;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.55rem;
    letter-spacing: 0;
    line-height: 1;
    vertical-align: 1px;
    box-shadow: 0 0 10px rgba(255, 80, 30, 0.55);
    animation: socBadgeIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    box-sizing: border-box;
}

.soc-tab-badge.dot {
    min-width: 7px;
    width: 7px;
    height: 7px;
    padding: 0;
    vertical-align: 3px;
}

@keyframes socBadgeIn {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}

/* ── Add-by-username ── */
.soc-add {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 0 10px;
    flex-shrink: 0;
}

.soc-add-icon {
    position: absolute;
    left: 12px;
    color: rgba(255, 191, 0, 0.45);
    font-size: 0.75rem;
    pointer-events: none;
    transition: color 0.2s;
}

.soc-add input {
    flex: 1;
    min-width: 0;
    height: 38px;
    padding: 0 46px 0 34px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.5px;
    color: #f0ece6;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 191, 0, 0.18);
    border-radius: 10px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.soc-add input::placeholder { color: rgba(240, 236, 230, 0.35); }

.soc-add input:focus {
    border-color: rgba(255, 191, 0, 0.55);
    background: rgba(255, 191, 0, 0.05);
    box-shadow: 0 0 0 3px rgba(255, 191, 0, 0.08);
}

.soc-add:focus-within .soc-add-icon { color: #ffbf00; }

.soc-add-btn {
    position: absolute;
    right: 4px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffcf3a, #e9a300);
    color: #1a1206;
    font-size: 0.75rem;
    cursor: pointer;
    transition: transform 0.15s, filter 0.2s;
}

.soc-add-btn:hover { filter: brightness(1.1); transform: scale(1.06); }
.soc-add-btn:active { transform: scale(0.95); }

.soc-add-compact input { height: 32px; }
.soc-add-compact .soc-add-btn { width: 26px; height: 26px; }

/* Error / confirmation line under the add box: collapses when empty */
.friends-error.soc-flash {
    max-height: 0;
    overflow: hidden;
    margin: 0;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.68rem;
    color: #ff7b6b;
    transition: max-height 0.25s, margin 0.25s;
}

.friends-error.soc-flash.visible {
    max-height: 60px;
    margin: -4px 2px 8px;
}

.friends-error.soc-flash.good { color: #7fdc8c; }

/* ── Lists + sections ── */
.soc-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 420px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 2px;
}

#game-friends-list.soc-list { max-height: none; }

.soc-section + .soc-section { margin-top: 8px; }

.soc-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 6px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.56rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 191, 0, 0.55);
    user-select: none;
}

.soc-section-count {
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(255, 191, 0, 0.1);
    color: #ffbf00;
    letter-spacing: 0;
}

.soc-section-extra {
    margin-left: auto;
    letter-spacing: 1px;
    text-transform: none;
    color: rgba(240, 236, 230, 0.4);
}

.soc-section-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.soc-collapsible > .soc-section-head { cursor: pointer; border-radius: 6px; }
.soc-collapsible > .soc-section-head:hover { color: #ffbf00; background: rgba(255, 191, 0, 0.04); }
.soc-collapsible > .soc-section-head:focus-visible { outline: 1px solid rgba(255, 191, 0, 0.5); }
.soc-section-chevron { font-size: 0.5rem; transition: transform 0.2s; }
.soc-collapsible.open .soc-section-chevron { transform: rotate(90deg); }
.soc-collapsible:not(.open) > .soc-section-body { display: none; }
.soc-section-quiet .soc-section-head { color: rgba(240, 236, 230, 0.38); }

/* ── Avatar ── */
.soc-avatar {
    --soc-hue: 40;
    position: relative;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 25%, hsla(var(--soc-hue), 85%, 70%, 0.55), transparent 60%),
        linear-gradient(145deg, hsl(var(--soc-hue), 55%, 32%), hsl(calc(var(--soc-hue) + 30), 60%, 16%));
    box-shadow: inset 0 0 0 1px hsla(var(--soc-hue), 80%, 70%, 0.35), 0 2px 6px rgba(0, 0, 0, 0.45);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.soc-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.soc-avatar-initial {
    font-family: 'DragonSlayer', serif;
    font-size: 0.95rem;
    color: #fff4dc;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    line-height: 1;
}

.soc-avatar-sm { width: 24px; height: 24px; }
.soc-avatar-sm .soc-avatar-initial { font-size: 0.72rem; }
.soc-avatar-md { width: 38px; height: 38px; }
.soc-avatar-md .soc-avatar-initial { font-size: 1.1rem; }

.soc-presence {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #120d0a;
    background: #5a5550;
    box-sizing: content-box;
}

.soc-avatar-md .soc-presence { width: 11px; height: 11px; }
.soc-presence.online   { background: #4cd964; box-shadow: 0 0 6px rgba(76, 217, 100, 0.7); }
.soc-presence.in-lobby { background: #64b4ff; box-shadow: 0 0 6px rgba(100, 180, 255, 0.7); }
.soc-presence.in-game  { background: #ff9f1c; box-shadow: 0 0 6px rgba(255, 159, 28, 0.7); }

.soc-status-online   { color: #6fe08a !important; }
.soc-status-in-lobby { color: #7cc0ff !important; }
.soc-status-in-game  { color: #ffae42 !important; }

/* ── Rows ── */
.soc-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    text-align: left;
    color: inherit;
    font: inherit;
    box-sizing: border-box;
    transition: background 0.18s, border-color 0.18s;
}

/* main.css gives every button a fixed height */
button.soc-row { height: auto; cursor: pointer; }

.soc-row:hover {
    background: rgba(255, 191, 0, 0.05);
    border-color: rgba(255, 191, 0, 0.12);
}

@keyframes socRowIn {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: none; }
}

.soc-row-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.soc-row-name {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.4px;
    color: #f0ece6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.soc-row-sub {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.58rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(240, 236, 230, 0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.soc-row-offline .soc-row-name { color: rgba(240, 236, 230, 0.55); }
.soc-row-offline .soc-avatar { filter: saturate(0.35) brightness(0.8); }
.soc-row-blocked .soc-row-name { color: rgba(240, 236, 230, 0.4); text-decoration: line-through; }

.soc-row-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Secondary actions surface on hover/focus on a mouse; touch always shows them */
@media (hover: hover) {
    .soc-row .soc-row-actions .soc-icon-btn:not(.soc-invite):not(.soc-positive):not(.soc-danger) {
        opacity: 0;
        transition: opacity 0.15s;
    }
    .soc-row:hover .soc-row-actions .soc-icon-btn,
    .soc-row:focus-within .soc-row-actions .soc-icon-btn {
        opacity: 1 !important;
    }
}

.soc-icon-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(255, 191, 0, 0.14);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(240, 236, 230, 0.7);
    font-size: 0.72rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s;
}

.soc-icon-btn:hover { background: rgba(255, 191, 0, 0.12); color: #ffbf00; border-color: rgba(255, 191, 0, 0.4); }
.soc-icon-btn:active { transform: scale(0.92); }
.soc-icon-btn.soc-positive { color: #6fe08a; border-color: rgba(76, 217, 100, 0.3); background: rgba(76, 217, 100, 0.08); }
.soc-icon-btn.soc-positive:hover { background: rgba(76, 217, 100, 0.2); color: #9af0a8; }
.soc-icon-btn.soc-danger { color: #ff8a7a; border-color: rgba(255, 90, 70, 0.25); background: rgba(255, 90, 70, 0.06); }
.soc-icon-btn.soc-danger:hover { background: rgba(255, 90, 70, 0.18); color: #ffb0a5; }

.soc-icon-btn.soc-invite {
    color: #1a1206;
    border-color: transparent;
    background: linear-gradient(180deg, #ffcf3a, #e9a300);
    box-shadow: 0 0 12px rgba(255, 191, 0, 0.35);
}

.soc-icon-btn.soc-invite:hover { filter: brightness(1.1); color: #1a1206; }

.soc-btn {
    height: 28px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 191, 0, 0.25);
    background: rgba(255, 191, 0, 0.06);
    color: #ffbf00;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.62rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.15s, background 0.15s, transform 0.12s;
}

.soc-btn:hover { background: rgba(255, 191, 0, 0.14); }
.soc-btn:active { transform: scale(0.96); }
.soc-btn-gold { border: none; color: #1a1206; background: linear-gradient(180deg, #ffd24a, #eaa500); box-shadow: 0 0 14px rgba(255, 191, 0, 0.35); }
.soc-btn-gold:hover { filter: brightness(1.08); background: linear-gradient(180deg, #ffd24a, #eaa500); }
.soc-btn-green { border-color: rgba(76, 217, 100, 0.4); color: #7fe891; background: rgba(76, 217, 100, 0.1); }
.soc-btn-green:hover { background: rgba(76, 217, 100, 0.2); }
.soc-btn-ghost { border-color: rgba(240, 236, 230, 0.15); color: rgba(240, 236, 230, 0.7); background: transparent; }
.soc-btn-ghost:hover { background: rgba(240, 236, 230, 0.07); }

/* Request / invite cards */
.soc-card {
    border-color: rgba(255, 191, 0, 0.22);
    background: linear-gradient(120deg, rgba(255, 191, 0, 0.09), rgba(255, 191, 0, 0.02));
}

.soc-card .soc-row-sub { color: rgba(255, 191, 0, 0.75); }

.soc-card-invite {
    border-color: rgba(255, 140, 40, 0.55);
    background:
        radial-gradient(ellipse 80% 120% at 0% 50%, rgba(255, 110, 30, 0.22), transparent 70%),
        linear-gradient(120deg, rgba(255, 191, 0, 0.12), rgba(255, 90, 30, 0.04));
    animation: socInviteGlow 2.4s ease-in-out infinite;
}

@keyframes socInviteGlow {
    0%, 100% { box-shadow: 0 0 0 rgba(255, 120, 30, 0); }
    50%      { box-shadow: 0 0 18px rgba(255, 120, 30, 0.35); }
}

/* Empty states */
.soc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 26px 16px;
    text-align: center;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.72rem;
    line-height: 1.5;
    color: rgba(240, 236, 230, 0.45);
}

.soc-empty i {
    font-size: 1.6rem;
    color: rgba(255, 191, 0, 0.3);
}

/* Lobby: the host's empty seat calls up the friends list */
.lobby-invite-btn {
    margin-left: auto;
    height: 26px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    border: 1px solid rgba(255, 191, 0, 0.35);
    background: rgba(255, 191, 0, 0.08);
    color: #ffbf00;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.6rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s;
}

.lobby-invite-btn:hover { background: rgba(255, 191, 0, 0.18); }

.friends-panel.soc-invite-flash {
    animation: socPanelFlash 1.8s ease;
}

.friends-panel.soc-invite-flash .soc-invite {
    animation: socInvitePulse 0.6s ease 3;
}

@keyframes socPanelFlash {
    0%, 100% { box-shadow: 0 26px 70px rgba(0, 0, 0, 0.6); }
    25%      { box-shadow: 0 0 0 2px rgba(255, 191, 0, 0.6), 0 0 40px rgba(255, 191, 0, 0.3); }
}

@keyframes socInvitePulse {
    50% { transform: scale(1.18); }
}

/* ── Messages tab ── */
.soc-dm-friend-icon {
    flex-shrink: 0;
    padding: 0 6px;
    font-size: 0.72rem;
    color: rgba(240, 236, 230, 0.3);
    transition: color 0.15s;
}

.soc-dm-friend:hover .soc-dm-friend-icon,
.soc-dm-friend:focus-visible .soc-dm-friend-icon { color: #ffbf00; }

.soc-convo .soc-convo-preview {
    text-transform: none;
    letter-spacing: 0.2px;
    font-size: 0.66rem;
    color: rgba(240, 236, 230, 0.45);
}

.soc-convo.unread .soc-row-name { color: #fff; }
.soc-convo.unread .soc-convo-preview { color: rgba(240, 236, 230, 0.85); }
.soc-convo.unread { background: rgba(255, 191, 0, 0.05); }

.soc-convo-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.soc-convo-time {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.55rem;
    color: rgba(240, 236, 230, 0.35);
}

.soc-unread {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: linear-gradient(180deg, #ff6a2c, #e0331a);
    color: #fff;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.58rem;
    line-height: 18px;
    text-align: center;
    box-sizing: border-box;
}

/* Conversation */
.soc-convo-view {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.soc-convo-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 191, 0, 0.1);
    flex-shrink: 0;
}

.soc-convo-head .btn-back {
    width: 30px;
    height: 30px;
    font-size: 0.72rem;
    flex-shrink: 0;
}

.soc-convo-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.dm-with-name {
    font-family: 'DragonSlayer', serif;
    font-size: 1rem;
    letter-spacing: 1px;
    color: #ffbf00;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dm-with-status {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.56rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(240, 236, 230, 0.4);
}

.dm-with-status:empty { display: none; }

/* ── Threads ── */
.soc-thread-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 220px;
}

.soc-thread {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 340px;
    margin: 0;
    padding: 6px 2px 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.soc-thread-compact {
    max-height: none;
}

.soc-time-sep {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 6px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.54rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(240, 236, 230, 0.32);
}

.soc-time-sep::before,
.soc-time-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 191, 0, 0.14), transparent);
}

/* DM bubbles */
.soc-bubble-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.soc-bubble-row.grouped { margin-top: 2px; }
.soc-bubble-row.mine { flex-direction: row-reverse; }

.soc-bubble {
    max-width: 78%;
    padding: 7px 11px;
    border-radius: 14px 14px 14px 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #f0ece6;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.76rem;
    line-height: 1.45;
    text-align: left;
    word-break: break-word;
    white-space: pre-wrap;
}

.soc-bubble-row.grouped:not(.mine) .soc-bubble { border-top-left-radius: 4px; }

.soc-bubble-row.mine .soc-bubble {
    border-radius: 14px 14px 4px 14px;
    background: linear-gradient(160deg, rgba(255, 191, 0, 0.26), rgba(255, 110, 30, 0.2));
    border-color: rgba(255, 191, 0, 0.3);
    color: #fff6e0;
}

.soc-bubble-row.mine.grouped .soc-bubble { border-top-right-radius: 4px; }

/* Global chat lines */
.soc-line {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 5px 30px 3px 4px;
    margin-top: 4px;
    border-radius: 8px;
    text-align: left;
}

/* Threads are redrawn whole, so only the newest line animates in */
.soc-thread > .soc-line:last-child,
.soc-thread > .soc-bubble-row:last-child {
    animation: socRowIn 0.25s ease both;
}

.soc-line.grouped { margin-top: 0; padding-top: 1px; }
.soc-line:hover { background: rgba(255, 255, 255, 0.025); }
.soc-line.mine { background: rgba(255, 191, 0, 0.035); }
.soc-line.mentioned { background: rgba(255, 140, 40, 0.1); box-shadow: inset 2px 0 0 #ff9a2a; }

.soc-line-avatar { cursor: pointer; flex-shrink: 0; }
.soc-line-avatar .soc-avatar { width: 28px; height: 28px; }
.soc-line-avatar .soc-avatar-initial { font-size: 0.8rem; }
.soc-line-gutter { flex: 0 0 28px; }

.soc-line-main { flex: 1 1 auto; min-width: 0; }

.soc-line-head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 1px;
}

.soc-line-name {
    --soc-hue: 40;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.4px;
    color: hsl(var(--soc-hue), 90%, 72%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.soc-line-name[data-act] { cursor: pointer; }
.soc-line-name[data-act]:hover { text-decoration: underline; }
.soc-line.mine .soc-line-name { color: #ffbf00; }

.soc-line-friend { font-size: 0.5rem; color: rgba(111, 224, 138, 0.8); }

.soc-line-time {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.52rem;
    color: rgba(240, 236, 230, 0.3);
    white-space: nowrap;
}

.soc-line-text {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.75rem;
    line-height: 1.45;
    color: rgba(240, 236, 230, 0.85);
    word-break: break-word;
    white-space: pre-wrap;
}

.soc-mention {
    padding: 0 3px;
    border-radius: 4px;
    background: rgba(255, 150, 40, 0.25);
    color: #ffd08a;
}

/* Game chat: one compact line per message */
.soc-line.compact {
    display: block;
    gap: 0;
    margin-top: 1px;
    padding: 3px 26px 3px 6px;
}

.soc-line.compact .soc-line-name { color: #ffbf00; margin-right: 6px; }
.soc-line.compact .soc-line-name::after { content: ':'; }
.soc-line.compact .soc-line-text { display: inline; font-size: 0.72rem; }
.soc-line.compact.mine .soc-line-name { color: #ffd86a; }

/* Report flag: on hover for a mouse, faint but present on touch */
.soc-msg-report {
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 120, 100, 0.7);
    font-size: 0.55rem;
    cursor: pointer;
    opacity: 0;
    flex-shrink: 0;
    transition: opacity 0.15s, background 0.15s;
}

.soc-line .soc-msg-report { position: absolute; right: 4px; top: 4px; }
.soc-line.compact .soc-msg-report { top: 2px; }
.soc-bubble-row:hover .soc-msg-report,
.soc-line:hover .soc-msg-report { opacity: 1; }
.soc-msg-report:hover { background: rgba(255, 90, 70, 0.15); }

@media (hover: none) {
    .soc-msg-report { opacity: 0.4; }
}

/* "New messages" pill when scrolled up */
.soc-jump {
    position: absolute;
    left: 50%;
    bottom: 10px;
    height: 28px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffd24a, #eaa500);
    color: #1a1206;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.6rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 8px);
    transition: opacity 0.2s, transform 0.2s;
    z-index: 2;
}

.soc-jump.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

/* Composer */
.soc-compose {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin-top: 8px;
    padding: 5px 5px 5px 12px;
    border: 1px solid rgba(255, 191, 0, 0.2);
    border-radius: 12px;
    background: rgba(20, 16, 12, 0.85);
    flex-shrink: 0;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.soc-compose:focus-within {
    border-color: rgba(255, 191, 0, 0.5);
    box-shadow: 0 0 0 3px rgba(255, 191, 0, 0.07);
}

.soc-compose input,
.soc-compose textarea {
    flex: 1;
    min-width: 0;
    height: 30px;
    padding: 6px 0;
    border: none;
    background: transparent;
    outline: none;
    color: #f0ece6;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.78rem;
    line-height: 1.4;
    resize: none;
    box-sizing: border-box;
}

.soc-compose textarea { height: auto; min-height: 30px; max-height: 110px; overflow-y: auto; }
.soc-compose input::placeholder,
.soc-compose textarea::placeholder { color: rgba(240, 236, 230, 0.35); }

.soc-count {
    align-self: center;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.56rem;
    color: rgba(240, 236, 230, 0.4);
    display: none;
}

.soc-count.visible { display: inline; }
.soc-count.low { color: #ff8a7a; }

.soc-send {
    flex-shrink: 0;
    width: 32px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 9px;
    background: linear-gradient(180deg, #ffcf3a, #e9a300);
    color: #1a1206;
    font-size: 0.72rem;
    cursor: pointer;
    transition: filter 0.15s, transform 0.12s;
}

.soc-send:hover { filter: brightness(1.1); }
.soc-send:active { transform: scale(0.94); }
.soc-send:disabled { opacity: 0.5; cursor: default; }

/* ── Player menu (⋯ / a name in chat) ── */
.soc-menu {
    position: fixed;
    z-index: 7100;
    min-width: 190px;
    max-width: min(280px, calc(100vw - 16px));
    box-sizing: border-box;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid rgba(255, 191, 0, 0.25);
    background: linear-gradient(180deg, rgba(26, 19, 14, 0.98), rgba(12, 9, 8, 0.98));
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.7);
    animation: socMenuIn 0.16s ease both;
}

@keyframes socMenuIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

.soc-menu-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 191, 0, 0.1);
    font-family: 'DragonSlayer', serif;
    font-size: 0.9rem;
    letter-spacing: 1px;
    color: #ffbf00;
    text-align: left;
}

.soc-menu-head .soc-avatar { flex-shrink: 0; }

/* long names end in an ellipsis on one line (the full name is the tooltip) */
.soc-menu-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.soc-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #f0ece6;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.5px;
    text-align: left;
    cursor: pointer;
}

.soc-menu-item i { width: 14px; text-align: center; color: rgba(255, 191, 0, 0.7); font-size: 0.72rem; }
.soc-menu-item:hover,
.soc-menu-item:focus-visible { background: rgba(255, 191, 0, 0.1); outline: none; }
.soc-menu-item.danger { color: #ff9585; }
.soc-menu-item.danger i { color: #ff7b6b; }
.soc-menu-item.danger:hover { background: rgba(255, 90, 70, 0.12); }

/* ── Toasts (requests, invites, DMs) ── */
.soc-toasts {
    position: fixed;
    top: 84px;
    right: 18px;
    z-index: 7050;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 340px;
    max-width: calc(100vw - 32px);
    pointer-events: none;
}

.soc-toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 34px 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 191, 0, 0.3);
    background:
        radial-gradient(ellipse 70% 100% at 0% 0%, rgba(255, 140, 40, 0.16), transparent 70%),
        linear-gradient(180deg, rgba(28, 20, 14, 0.97), rgba(12, 9, 8, 0.97));
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.65);
    pointer-events: auto;
    animation: socToastIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.soc-toast.clickable { cursor: pointer; }
.soc-toast.leaving { animation: socToastOut 0.22s ease both; }
.soc-toast-invite { border-color: rgba(255, 140, 40, 0.65); }
.soc-toast-invite::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 14px;
    box-shadow: 0 0 24px rgba(255, 120, 30, 0.35);
    animation: socInviteGlow 2.4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes socToastIn {
    from { opacity: 0; transform: translateX(24px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}

@keyframes socToastOut {
    to { opacity: 0; transform: translateX(24px); }
}

.soc-toast-body { flex: 1 1 auto; min-width: 0; }

.soc-toast-title {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.78rem;
    line-height: 1.35;
    color: #f0ece6;
}

.soc-toast-title i { color: #ffbf00; font-size: 0.7rem; }

.soc-toast-text {
    margin-top: 3px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.72rem;
    line-height: 1.4;
    color: rgba(240, 236, 230, 0.65);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.soc-toast-actions {
    display: flex;
    gap: 6px;
    margin-top: 9px;
}

.soc-toast-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: rgba(240, 236, 230, 0.4);
    font-size: 0.7rem;
    cursor: pointer;
}

.soc-toast-close:hover { color: #f0ece6; background: rgba(255, 255, 255, 0.06); }

@media only screen and (max-width: 767px) {
    .soc-toasts {
        top: 76px;
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
    }

    .soc-row { min-height: 50px; }
    .soc-icon-btn { width: 34px; height: 34px; }
    .soc-thread { max-height: 52vh; }
}

@media (prefers-reduced-motion: reduce) {
    .soc-row, .soc-line, .soc-bubble-row, .soc-toast, .soc-card-invite,
    .soc-toast-invite::before, .soc-tab-badge, .friends-panel.soc-invite-flash {
        animation: none !important;
    }
}

/* In-game FRIENDS tab: tighter rows */
.soc-list-compact .soc-row { min-height: 40px; padding: 4px 6px; gap: 8px; }
.soc-list-compact .soc-avatar { width: 26px; height: 26px; }
.soc-list-compact .soc-avatar-initial { font-size: 0.78rem; }
.soc-list-compact .soc-icon-btn { width: 26px; height: 26px; font-size: 0.65rem; }
.soc-list-compact .soc-row-name { font-size: 0.72rem; }

/* Shared-deck games (everything but CONSTRUCTED, ARENA and campaign constructed) show a single
   DECK pile beside your hand; play.js flags the opponent's slot. */
#opp-deck.deck-shared-hidden {
    display: none;
}


/* GEMINI (Set 2 rules preview): an admin-only third mode card (play.js applyGeminiCard) */
.play-modes.play-modes-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.play-btn.play-btn-gemini {
    background:
        radial-gradient(ellipse 70% 120% at 100% 50%, rgba(180, 140, 255, 0.34) 0%, rgba(180, 140, 255, 0) 70%),
        radial-gradient(ellipse 60% 90% at 85% 10%, rgba(79, 227, 201, 0.22) 0%, rgba(79, 227, 201, 0) 70%),
        linear-gradient(120deg, #07090f 0%, #10122a 60%, #1a1238 100%);
    box-shadow: inset 0 0 0 1px rgba(140, 160, 255, 0.3), 0 10px 26px rgba(0, 0, 0, 0.45);
    font-family: inherit;
    cursor: pointer;
}

.play-gemini-stars {
    position: absolute;
    z-index: -2;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    display: flex;
    gap: 6px;
    font-size: 2.2rem;
    pointer-events: none;
}

.play-gemini-stars i:first-child { color: #4fe3c9; filter: drop-shadow(0 0 12px rgba(79, 227, 201, 0.7)); }
.play-gemini-stars i:last-child { color: #b48cff; filter: drop-shadow(0 0 12px rgba(180, 140, 255, 0.7)); transform: translateY(14px) scale(0.8); }

@media only screen and (max-width: 767px) {
    .play-modes.play-modes-three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .play-modes.play-modes-three .play-btn-gemini {
        grid-column: 1 / -1;
        min-height: 72px;
    }
}

@media only screen and (max-width: 480px) {
    .play-modes.play-modes-three {
        grid-template-columns: minmax(0, 1fr);
    }
}
.play-gemini-tag {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.62rem;
    letter-spacing: 1.5px;
    white-space: nowrap;
    color: #d9fff7;
    background: rgba(79, 227, 201, 0.12);
    border: 1px solid rgba(140, 160, 255, 0.45);
}