python-tdd/src/static_src/scss/_wallet-tokens.scss

.token {
    position: relative;
    display: inline-block;
    cursor: help;
    color: rgba(var(--terUser), 1);

    .token-tooltip {
        position: absolute;
        bottom: 125%;
        left: 50%;
        transform: translateX(-50%);
    }

    &:hover .token-tooltip {
        display: block; // legacy fallback; .tt is JS-portal-only (no CSS hover)
    }
}

.token--empty {
    cursor: help;

    > i { opacity: 0.4; }
}

// Aperture foundation lives universally in _base.scss; nothing
// wallet-specific to override.

.wallet-page {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.wallet-tokens {
    display: flex;
    flex-direction: column;
    overflow: visible;

    .token-row {
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        overflow: visible;
    }

    .token {
        font-size: 1.5rem;
    }

    .token:hover .token-tooltip { display: none; }
}

#id_payment_methods {
    overflow-y: auto;
}

@media (max-width: 768px) {
    .token .token-tooltip {
        width: 13rem;
        max-width: 90vw;
        left: 0;
        transform: none;
    }

    .wallet-tokens .token-tooltip {
        left: 50%;
        transform: translateX(-50%);
    }
}


// ── Wallet Shop applet ───────────────────────────────────────────────────────
// Mimics `.wallet-tokens` (horizontal row of tooltipped icons) but each tile
// carries an admin-defined catalog item + an optional `.shop-badge` (eg "×5"
// for the bundle) + a BUY-ITEM microbutton hosted in the tooltip portal.
// JS wiring lives in `apps/dashboard/static/apps/dashboard/wallet-shop.js`.

.wallet-shop {
    display: flex;
    flex-direction: column;
    overflow: visible;

    .shop-grid {
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        gap: 1rem;
        overflow: visible;
    }
}

.shop-tile {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: rgba(var(--terUser), 1);
    cursor: help;
}

// ×N quantity badge — top-right corner, --quaUser glyph on --quiUser bg.
// User-tweaked 2026-05-22: shrunk from 2rem → 1.5rem + nudged further up
// + right so most of the underlying tile icon stays visible.
.shop-badge {
    position: absolute;
    top: -0.8rem;
    right: -1.2rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: rgba(var(--secUser), 1);
    color: rgba(var(--priUser), 1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 900;
    pointer-events: none;
}

// `.tt-micro` — sibling of `.tt` on each `.shop-tile`. Holds the BUY-ITEM
// btn (or × + 'Already owned' when capped). wallet.js's tooltip handler
// clones this into `#id_mini_tooltip_portal` on hover so the btn appears
// as a small floating bubble adjacent to the main tooltip card —
// mirroring Game Kit's Equipped/Unequipped/In-Use microtooltip pattern.
// Hidden in the source DOM; only the portal clone is visible.
.tt-micro {
    display: none;
}

// Wallet-side mini portal — pinned to the bottom-right of the main
// portal by wallet.js (mirrors gameboard.js's gameKit positioning).
// Mostly mirrors gameboard's mini at `_gameboard.scss:140` but allows
// the BUY-ITEM btn label to wrap onto multiple lines (gameboard's
// mini holds short status text like "In-Use: X" which wants nowrap;
// our buy btn is round + needs the label to break onto 2 lines).
#id_mini_tooltip_portal {
    position: fixed;
    z-index: 9999;
    width: fit-content;
    text-align: center;
    padding: 0.5rem 0.75rem;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;

    .tt-buy-btn {
        padding: 0.25rem 0.75rem;
        white-space: normal;
        word-break: normal;
    }

    // `.tt-already-owned` text — match Game Kit's "Equipped" / "In-Use: X"
    // microtext styling (--secUser at full alpha, slightly bigger than
    // 0.75rem) so the wallet shop's "Already owned" pill reads as the
    // same widget as the gameboard's status pills.
    .tt-already-owned {
        font-size: 0.85rem;
        margin: 0;
        font-style: italic;
        color: rgba(var(--secUser), 1);
        white-space: nowrap;
    }

    &.active { display: flex; }
}