/* Stoncat */

/* --- Fonts --- */
h1, h2, h3, h4, h5, h6,
.logo,
.btn,
.nav-link,
.footer-link,
.page-title,
.item-name,
.state-title,
.section-title,
.modal-header h2,
.card-name,
.preset-btn {
    font-family: 'Manrope', sans-serif;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg-primary:    #1D1E20;
    --bg-secondary:  #0C0C0D;
    --purrk-swatch:  #e8e4dc;
    --bg-card:       #27282B;
    --bg-card-hover: #303136;
    --bg-input:      #18191B;
    --border:        #333438;
    --border-light:  #45464B;
    --text-primary:  #e8eaf0;
    --text-secondary:#8b8fa3;
    --text-muted:    #5a5e73;
    --accent:        #0180FF;
    --accent-hover:  #2E9AFF;
    --accent-glow:   rgba(1, 128, 255, 0.3);
    --btn-blue-gradient: linear-gradient(104.31deg, #0180FF 0%, #0060CC 100%);
    --success:       #4ade80;
    --warning:       #fbbf24;
    --gemston:       #0180FF;
    --danger:        #f87171;

    /* Rarity colors */
    --rarity-paper:   #8b8fa3;
    --rarity-hodl:    #4ade80;
    --rarity-whale:   #60a5fa;
    --rarity-genesis: #c084fc;
    --rarity-diamond: #fbbf24;
    --rarity-satoshi: #ff6b9d;

    /* Purrk tiers (Dress up / wearing / roll reveal) */
    --codex-tier-standard: #8b8fa3;
    --codex-tier-premium: #4ade80;
    --codex-tier-elite: #60a5fa;
    --codex-tier-mythic: #fbbf24;

    --radius:    12px;
    --radius-sm: 8px;
    --radius-lg: 16px;
    --shadow:    0 4px 24px rgba(0, 0, 0, 0.4);
    --transition: 0.2s ease;

    /* Typography scale (desktop) */
    --type-h1-size: 72px;
    --type-h1-line: 68px;
    --type-h2-size: 42px;
    --type-h2-line: 50px;
    --type-h3-size: 20px;
    --type-h3-line: 30px;
    --type-text-size: 17px;
    --type-text-line: 25px;
    --type-text-sm-size: 15px;
    --type-text-sm-line: 20px;
}

html { font-size: 16px; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--type-text-size);
    line-height: var(--type-text-line);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1,
.page-title,
.state-title,
.explore-hero-title,
.verify-title {
    font-size: var(--type-h1-size);
    line-height: var(--type-h1-line);
}

h2,
.explore-section-title,
.modal-header h2 {
    font-size: var(--type-h2-size);
    line-height: var(--type-h2-line);
}

h3,
.section-title {
    font-size: var(--type-h3-size);
    line-height: var(--type-h3-line);
}

p,
.page-subtitle,
.state-text,
.modal-description,
.explore-hero-text,
.explore-section-text {
    font-size: var(--type-text-size);
    line-height: var(--type-text-line);
}

small,
.gemston-label,
.meta-label,
.progress-text,
.footer-text {
    font-size: var(--type-text-sm-size);
    line-height: var(--type-text-sm-line);
}

a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-hover); }

img { max-width: 100%; height: auto; display: block; }

/* --- Header --- */
.site-header {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}
.header-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.header-left { display: flex; align-items: center; gap: 16px; }
.logo {
    display: inline-flex;
    align-items: center;
    color: var(--text-primary);
}
.logo img {
    display: block;
    height: 28px;
    width: auto;
}
.logo:hover {
    filter: brightness(1.1);
}

.gemston-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
    margin-right: 10px;
}
.gemston-icon { width: 16px; height: 16px; display: inline-block; vertical-align: middle; }
.gemston-icon-inline { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; }
.gemston-amount { font-weight: 700; color: var(--gemston); }
.gemston-label { color: var(--text-muted); font-size: 0.75rem; }

.header-nav { display: flex; gap: 4px; }
.nav-link {
    display: inline-grid;
    grid-template-columns: 20px auto;
    align-items: center;
    column-gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    color: #F8FAFC;
    font-size: 0.88rem;
    font-weight: 500;
    transition: color var(--transition), background-color var(--transition);
}
.nav-link.active { color: var(--accent); background: transparent; }
.nav-link.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* Nav icons — overlap both states and fade between them */
.nav-link .nav-icon,
.nav-link .nav-icon-active {
    grid-column: 1;
    grid-row: 1;
    width: 20px;
    height: 20px;
    display: block;
    transition: opacity var(--transition);
}
.nav-link .nav-icon { opacity: 1; }
.nav-link .nav-icon-active { opacity: 0; }
.nav-link.active .nav-icon { opacity: 0; }
.nav-link.active .nav-icon-active { opacity: 1; }

/* Desktop top nav: text-only, no icons */
@media (min-width: 769px) {
    .header-nav .nav-link {
        display: inline-flex;
        align-items: center;
        column-gap: 0;
    }
    .header-nav .nav-link .nav-icon,
    .header-nav .nav-link .nav-icon-active {
        display: none !important;
    }
}

.header-right {
    display: flex;
    align-items:center;
    gap: 10px;
}
#ton-connect {
    margin-left: 15px;
    width: 190px;
    min-height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.btn-buy-header {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    white-space: nowrap;
    transition: color var(--transition);
}
.btn-buy-header:hover {
    color: var(--accent);
}

.header-get-gemston {
    position: relative;
    flex-shrink: 0;
}
.header-get-gemston > summary.btn-buy-header {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    list-style: none;
}
.header-get-gemston > summary.btn-buy-header::-webkit-details-marker,
.header-get-gemston > summary.btn-buy-header::marker {
    display: none;
    content: none;
}
.header-get-gemston-chevron {
    display: block;
    flex-shrink: 0;
    opacity: 0.7;
    transition: transform var(--transition);
}
.header-get-gemston[open] > summary.btn-buy-header {
    color: var(--accent);
}
.get-gemston[open] .header-get-gemston-chevron {
    transform: rotate(180deg);
}
.feed-get-gemston {
    display: none;
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    align-self: stretch;
}
.feed-get-gemston > summary.btn-buy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 100%;
    list-style: none;
    cursor: pointer;
}
.feed-get-gemston > summary.btn-buy::-webkit-details-marker,
.feed-get-gemston > summary.btn-buy::marker {
    display: none;
    content: none;
}
.feed-get-gemston > .header-get-gemston-menu {
    top: auto;
    bottom: calc(100% + 8px);
    right: 0;
    left: 0;
    min-width: 0;
    width: 100%;
}
.feed-get-gemston[open] > .header-get-gemston-menu {
    display: flex;
}
.header-get-gemston-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 120;
    min-width: 188px;
    padding: 6px;
    display: none;
    flex-direction: column;
    gap: 2px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}
.header-get-gemston[open] > .header-get-gemston-menu {
    display: flex;
}
.header-get-gemston-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
}
.header-get-gemston-item:hover,
.header-get-gemston-item:focus-visible {
    background: var(--bg-card-hover);
    color: var(--accent);
}
.header-get-gemston-ext {
    display: block;
    flex-shrink: 0;
    opacity: 0.55;
}
.wallet-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-family: monospace;
}
.wallet-badge.connected { border-color: var(--success); }
.wallet-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
}

.inline-form { display: inline; }

/* --- Main --- */
.main-content {
    flex: 1;
    max-width: 1120px;
    margin: 0 auto;
    padding: 32px 20px 60px;
    width: 100%;
}
/* Homepage: strip the default 60px (and 96px mobile) bottom padding — the
   landing page's last section handles its own spacing to the footer, and the
   default padding was showing up as an odd empty gap above the site footer. */
body.page-home .main-content {
    padding-bottom: 0;
}
body.page-home.has-mobile-sticky-cta .main-content {
    padding-bottom: 0;
}

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    line-height: 1.4;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
    background: var(--btn-blue-gradient);
    color: #fff;
    transition: transform 0.16s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.btn-primary:hover {
    background: var(--btn-blue-gradient);
    box-shadow: 0 0 22px var(--accent-glow);
    filter: brightness(1.08);
    color: #fff;
    transform: translateY(-1px) scale(1.015);
}
.btn-primary:active { transform: scale(0.96); }

.btn-secondary {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--bg-card-hover); border-color: var(--border-light); color: var(--text-primary); }

.btn-outline {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
}
.btn-outline:hover { background: var(--accent); color: #fff; }

.btn-sm { padding: 5px 14px; font-size: 0.8rem; }
.btn-lg { padding: 14px 32px; font-size: 1rem; }

.btn-block { width: 100%; }
.btn:disabled, .btn.disabled { opacity: 0.5; cursor: not-allowed; }

/* Mutation-specific button with glow */
.btn-mutate {
    background: var(--btn-blue-gradient);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.btn-mutate:hover {
    box-shadow: 0 0 30px rgba(1, 128, 255, 0.4);
}
.btn-mutate::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.08) 50%, transparent 60%);
    animation: shimmer 3s infinite;
}
@keyframes shimmer {
    0%   { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}

/* --- Cards --- */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    transition: all var(--transition);
}
.card:hover {
    border-color: var(--border-light);
    box-shadow: var(--shadow);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    /* Stretch mint card to the NFT card height in the same row.
       Mint card content is absolutely positioned so it does not inflate the row. */
    align-items: stretch;
}

/* Stoncat NFT card */
.stoncat-card {
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    height: fit-content;
    align-self: start;
}
.stoncat-card:hover { transform: translateY(-4px); }
.stoncat-card .card-image {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 14px;
    background: var(--bg-primary);
}
.stoncat-card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.stoncat-card .card-name {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 6px;
}
.stoncat-card .card-meta {
    font-size: 0.82rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.stoncat-card .card-meta .rarity-badge {
    white-space: nowrap;
    flex-shrink: 0;
}

/* Rarity border glow on cards */
.stoncat-card.rarity-hodl    { border-color: var(--rarity-hodl); }
.stoncat-card.rarity-whale   { border-color: var(--rarity-whale); }
.stoncat-card.rarity-genesis { border-color: var(--rarity-genesis); }
.stoncat-card.rarity-diamond { border-color: var(--rarity-diamond); box-shadow: 0 0 20px rgba(251, 191, 36, 0.15); }
.stoncat-card.rarity-satoshi { border-color: var(--rarity-satoshi); box-shadow: 0 0 25px rgba(255, 107, 157, 0.2); }

/* New Stoncat card (create prompt) — original full-bleed design */
.new-stoncat-card {
    display: block;
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    border: 2px dashed var(--border);
    cursor: pointer;
    color: var(--text-primary);
    overflow: hidden;
    padding: 0;
    text-align: center;
    width: 100%;
    /* Intrinsic size so a one-column grid (viewport ≲ 380px) cannot collapse
       this tile to a 2px dashed sliver. In a shared row, stretch still
       matches the sibling NFT card. */
    align-self: stretch;
    min-height: 240px;
    aspect-ratio: 1;
    background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.08), rgba(12, 16, 24, 0.84) 72%);
}
.new-stoncat-card:hover { border-color: var(--accent); }
.new-stoncat-card:disabled,
.new-stoncat-card[disabled] {
    cursor: wait;
    border-style: solid;
    border-color: var(--border);
}
.new-stoncat-card.is-mint-cooldown {
    cursor: wait;
    opacity: 0.72;
}
.new-stoncat-card.is-mint-cooldown:hover {
    border-color: var(--border);
}
.new-stoncat-card .spinner {
    margin: 0;
}
.new-stoncat-card.is-minting {
    /* Keep the tile as a block. Flex-on-<button> in mobile WebKit stretches
       the spinner to the card's aspect ratio (oval instead of a circle). */
    display: block;
    padding: 0;
    text-align: center;
    font-weight: 700;
}
.new-card-minting-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.new-stoncat-card.is-minting .new-card-minting-status {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
}
.new-stoncat-card.is-minting .spinner {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    max-width: 20px;
    max-height: 20px;
    aspect-ratio: 1 / 1;
    align-self: center;
}
.new-card-minting-label {
    min-width: 0;
    max-width: 100%;
    line-height: 1.3;
}
.new-stoncat-card.is-minting .new-card-image,
.new-stoncat-card.is-minting .new-card-overlay,
.new-stoncat-card.is-minting .new-card-content {
    display: none;
}
.new-card-image {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: -8px;
    width: 108%;
    max-width: none;
    transform: translateX(-50%);
    opacity: 0.62;
    filter: saturate(1) brightness(0.98);
    pointer-events: none;
}
.new-card-overlay {
    position: absolute;
    z-index: 0;
    inset: 0;
    background: linear-gradient(180deg, rgba(12, 16, 24, 0.12), rgba(12, 16, 24, 0.48) 58%, rgba(12, 16, 24, 0.72) 100%);
    pointer-events: none;
}
.new-card-content {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 16px;
}
.new-card-icon {
    font-size: 2rem;
    color: rgba(232, 234, 240, 0.7);
    line-height: 1;
}
.new-card-text {
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 700;
    color: rgba(232, 234, 240, 0.86);
}
.new-card-cost {
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--gemston);
}
.new-card-cost-free {
    color: var(--success);
}
.new-stoncat-card-free {
    border-color: rgba(74, 222, 128, 0.4);
}
.new-stoncat-card-free:hover {
    border-color: var(--success);
}

/* --- Rarity badges --- */
.rarity-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
    border: 1px solid transparent;
    white-space: nowrap;
}
.rarity-paper   .rarity-badge, .rarity-badge.rarity-paper   { background: rgba(139,143,163,0.15); color: var(--rarity-paper); }
.rarity-hodl    .rarity-badge, .rarity-badge.rarity-hodl    { background: rgba(74,222,128,0.15);  color: var(--rarity-hodl); }
.rarity-whale   .rarity-badge, .rarity-badge.rarity-whale   { background: rgba(96,165,250,0.15);  color: var(--rarity-whale); }
.rarity-genesis .rarity-badge, .rarity-badge.rarity-genesis { background: rgba(192,132,252,0.15); color: var(--rarity-genesis); }
.rarity-diamond .rarity-badge, .rarity-badge.rarity-diamond { background: rgba(251,191,36,0.15);  color: var(--rarity-diamond); }
.rarity-satoshi .rarity-badge, .rarity-badge.rarity-satoshi { background: rgba(255,107,157,0.15); color: var(--rarity-satoshi); }

.rarity-badge-large {
    font-size: 1.4rem;
    font-weight: 800;
    text-align: center;
    padding: 8px 24px;
    border-radius: 12px;
    margin-bottom: 16px;
}

/* --- Page sections --- */
.page-header {
    margin-bottom: 32px;
}
.page-title {
    font-size: var(--type-h1-size);
    line-height: var(--type-h1-line);
    font-weight: 800;
    margin-bottom: 8px;
}
.page-subtitle {
    color: var(--text-secondary);
    font-size: var(--type-text-size);
    line-height: var(--type-text-line);
}

/* --- State pages (my-stoncat states) --- */
.state-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
    min-height: 400px;
}
.state-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.6;
}
.state-icon-image {
    font-size: 0;
    opacity: 1;
}
.state-icon-image img {
    width: 120px;
    height: auto;
    display: block;
}
.state-title {
    font-size: var(--type-h1-size);
    line-height: var(--type-h1-line);
    font-weight: 700;
    margin-bottom: 12px;
}
.state-text {
    color: var(--text-secondary);
    max-width: 420px;
    margin-top: 24px;
    margin-bottom: 24px;
    font-size: var(--type-text-size);
    line-height: var(--type-text-line);
}
.state-cost {
    color: var(--gemston);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 20px;
}
.state-cost-free {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(74, 222, 128, 0.4);
    background: rgba(74, 222, 128, 0.1);
    color: var(--success);
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    /* Fade the whole pill so it reads as a supporting label rather than a
       second primary action competing with the "Mint Free Stoncat" CTA. */
    opacity: 0.72;
}

/* Mobile empty-state tightening. Effective usable viewport in iOS Safari
   is only ~570-600px (fixed .footer-nav docks bottom, Safari's own chrome
   eats another ~70px), and the desktop rules produce a ~675px button
   bottom — well past the fold. We shrink the icon, drop the container
   padding, trim margins around the title/text, and pull the free-mint
   pill down to a single-line 13px chip so the "Mint Free Stoncat" CTA
   reliably lands above the fold on iPhone SE and iPhone 15 alike. */
@media (max-width: 560px) {
    .state-container {
        padding: 24px 20px 20px;
        min-height: 0;
    }
    .state-icon {
        margin-bottom: 12px;
    }
    .state-icon-image img {
        width: 88px;
    }
    .state-title {
        margin-bottom: 6px;
    }
    .state-text {
        margin-top: 12px;
        margin-bottom: 14px;
    }
    .state-cost {
        margin-bottom: 14px;
        font-size: 1rem;
    }
    .state-cost-free {
        padding: 4px 11px;
        font-size: 0.78rem;
        letter-spacing: 0.02em;
    }
}

/* --- Item page --- */
.item-layout {
    --item-col-image: 1.12fr;
    --item-col-details: 0.88fr;
    display: grid;
    grid-template-columns: minmax(0, var(--item-col-image)) minmax(0, var(--item-col-details));
    gap: 28px 32px;
    align-items: start;
}
.item-hero {
    grid-column: 1 / -1;
    display: flex;
    align-items: stretch;
    gap: 32px;
    min-width: 0;
}
.item-media {
    flex: 1.12 1 0;
    display: flex;
    flex-direction: column;
    /* Match .item-details-primary gap (stats → Feed block) */
    gap: 16px;
    min-width: 0;
    width: auto;
    align-self: flex-start;
    position: sticky;
    top: 93px;
}
.item-details-primary {
    flex: 0.88 1 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.item-below-image {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    min-width: 0;
    width: 100%;
}
.item-below-image .purrks-panel {
    width: 100%;
}
.item-below-image .attr-grid {
    width: 100%;
}
.item-layout > .purrk-inventory {
    grid-column: 2;
    min-width: 0;
}
.item-image {
    width: 100%;
    aspect-ratio: 1;
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-card);
    border: 2px solid var(--border);
}
.item-hero .item-image {
    flex: none;
    width: 100%;
}
.item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.item-image-loader {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    background: rgba(12, 12, 13, 0.7);
    color: var(--text-secondary);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}
.item-image-loader .spinner {
    width: 28px;
    height: 28px;
}
.item-image.is-loading .item-image-loader {
    display: flex;
}
.item-image.is-loading img {
    opacity: 0.35;
}
.item-image-share {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #1d1e20;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.item-image-share:hover,
.item-image-share:focus-visible {
    background: rgba(255, 255, 255, 0.92);
    transform: scale(1.04);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.24);
    outline: none;
}
.item-image-share:active {
    transform: scale(0.98);
}
.item-image.is-loading .item-image-share {
    opacity: 0.55;
}

/* Desktop owner: right column matches media column; Feed grows into the leftover space */
@media (min-width: 769px) {
    .item-layout--owner .item-details-primary {
        /* Stretch to the flex line height set by the media column (image + Dress up) */
        align-self: stretch;
        min-height: 0;
    }
    /* Host must grow — section lives inside it (also moved into the feed modal on mobile) */
    .item-layout--owner #mutation-section-host {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    .item-layout--owner .mutation-section {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        margin-top: 0;
        margin-bottom: 0;
        min-height: 0;
        width: 100%;
    }
    .item-layout--owner .mutation-section-title {
        margin-bottom: 8px;
        font-size: 1.4rem;
        line-height: 1.25;
    }
    .item-layout--owner .mutation-section-lead {
        margin-bottom: 16px;
        font-size: 0.95rem;
        line-height: 1.4;
    }
    .item-layout--owner .amount-presets {
        margin-bottom: 14px;
    }
    /* Match .btn-lg height (14px pad + 1rem type + border) */
    .item-layout--owner .mutation-amount-row .amount-input {
        padding: 14px 16px;
        font-size: 1rem;
        line-height: 1.25;
        box-sizing: border-box;
    }
    .item-layout--owner .mutation-actions {
        /* Keep CTA near the bottom, but never collapse the gap when the
           pending card fills leftover column space. */
        margin-top: auto;
        padding-top: 16px;
    }
    .item-layout--owner .spend-risk-note {
        margin-top: 12px;
    }
}

.item-name {
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 700;
}
.item-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.item-share-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: color var(--transition);
}
.item-share-link:hover,
.item-share-link:focus-visible {
    color: var(--accent);
    outline: none;
}
.item-share-link-icon {
    flex-shrink: 0;
}
.item-name-block .item-share-link {
    margin-top: 10px;
}
.item-owned-label {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(74, 222, 128, 0.45);
    background: rgba(74, 222, 128, 0.12);
    color: var(--success);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
}
.item-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    margin-top: 10px;
}
.meta-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.progress-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.progress-track {
    width: 100%;
    height: 6px;
    background: var(--border-light);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 6px;
}
.progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
    min-width: 3px;
}
.progress-fill-stage {
    background: var(--accent);
}
.progress-text {
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 0.2px;
}
.meta-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.meta-label-tip {
    position: relative;
    width: fit-content;
    max-width: 100%;
    cursor: pointer;
    transition: color var(--transition);
}
.meta-label-tip .meta-label-text {
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-color: rgba(220, 230, 248, 0.45);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color var(--transition), text-decoration-color var(--transition);
}
.meta-help-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid rgba(220, 230, 248, 0.5);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.meta-label-tip:hover,
.meta-label-tip:focus,
.meta-label-tip:focus-visible,
.meta-label-tip.is-open {
    color: var(--accent);
    outline: none;
}
.meta-label-tip:hover .meta-label-text,
.meta-label-tip:focus .meta-label-text,
.meta-label-tip:focus-visible .meta-label-text,
.meta-label-tip.is-open .meta-label-text {
    text-decoration-color: var(--accent);
}
.meta-label-tip:hover .meta-help-mark,
.meta-label-tip:focus .meta-help-mark,
.meta-label-tip:focus-visible .meta-help-mark,
.meta-label-tip.is-open .meta-help-mark {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(1, 128, 255, 0.12);
}
.meta-tooltip {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.6;
    white-space: normal;
    width: min(280px, calc(100vw - 40px));
    z-index: 1000;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
/* Invisible bridge so the pointer can cross the gap without closing hover. */
.meta-tooltip::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 14px;
}
.meta-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 12px;
    border: 6px solid transparent;
    border-bottom-color: var(--border-light);
}
.meta-label-tip--end .meta-tooltip {
    left: auto;
    right: 0;
}
.meta-label-tip--end .meta-tooltip::before {
    left: auto;
    right: 12px;
}
.meta-label-tip:hover .meta-tooltip,
.meta-label-tip:focus .meta-tooltip,
.meta-label-tip.is-open .meta-tooltip {
    display: block;
}
body.rarity-stage-help-open .meta-tooltip {
    display: none !important;
}
#rarity-stage-help-modal {
    z-index: 1100;
}
.tooltip-journey {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 4px;
    letter-spacing: 0.3px;
}
.tooltip-link {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}
.tooltip-link:hover {
    color: var(--accent-hover);
}
.item-stage {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-primary);
    padding: 4px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.stats-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.stat-card {
    flex: 1;
    min-width: 120px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    text-align: center;
}
.stat-value {
    font-size: 1.18rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1.05;
}
.stat-label {
    font-size: 0.68rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
    line-height: 1.2;
}

/* Attributes table */
.section-title {
    font-size: var(--type-h3-size);
    line-height: var(--type-h3-line);
    font-weight: 700;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.section-title.no-bottom-border {
    padding-bottom: 0;
    border-bottom: none;
}
.section-title.no-margin-bottom {
    margin-bottom: 0;
}
.attr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.attr-item {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    text-align: center;
}
.attr-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 2px;
    line-height: 1.1;
}
.attr-value {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}

/* Mutation form */
.mutation-section {
    background: var(--bg-secondary);
    border: 1px solid rgba(1, 128, 255, 0.22);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: 0 0 0 1px rgba(1, 128, 255, 0.16), 0 0 34px rgba(1, 128, 255, 0.16);
    transition: box-shadow var(--transition), border-color var(--transition);
}
.mutation-section--compact {
    padding: 14px 16px 16px;
    margin-bottom: 14px;
}
.mutation-section--compact .mutation-section-title {
    margin-bottom: 6px;
    font-size: 1.05rem;
    line-height: 1.3;
}
.mutation-section-lead {
    margin: 0 0 10px;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.35;
}
.roll-pending-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(251, 191, 36, 0.35);
    background: rgba(251, 191, 36, 0.1);
    color: var(--text-primary);
}
.roll-pending-card.hidden {
    display: none;
}
.roll-pending-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-top: 3px;
    border: 2px solid rgba(251, 191, 36, 0.28);
    border-top-color: var(--warning, #fbbf24);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}
.roll-pending-copy {
    min-width: 0;
}
.roll-pending-title {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.3;
}
.roll-pending-text {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.35;
}
.mutation-section.is-roll-pending .amount-presets,
.mutation-section.is-roll-pending .mutation-amount-row,
.mutation-section.is-roll-pending .mutation-actions,
.mutation-section.is-roll-cooldown .mutation-actions #mutate-btn {
    opacity: 0.55;
    pointer-events: none;
}
.mutation-section.is-roll-pending .mutation-actions #mutate-btn,
.mutation-section.is-roll-cooldown .mutation-actions #mutate-btn {
    cursor: not-allowed;
}
.mutation-amount-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;
}
.mutation-amount-row .amount-input-wrap {
    flex: 0 0 220px;
    width: 220px;
    min-width: 220px;
    margin: 0;
    gap: 8px;
}
.mutation-amount-row .amount-input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}
.mutation-amount-row .amount-suffix {
    flex: 0 0 auto;
}
.mutation-amount-row .spend-tier-hint {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}
.mutation-actions {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin-top: 16px;
}
.mutation-actions #mutate-btn,
.mutation-actions .btn-mutate {
    flex: 1 1 auto;
    min-width: 0;
}
.mutation-actions .btn-buy {
    flex: 0 0 auto;
    white-space: nowrap;
}
.mutation-actions > button.btn-buy[data-buy-gemston] {
    display: inline-flex;
}
.spend-tier-hint {
    margin: 10px 0 0;
    padding: 0;
    border: none;
    background: transparent;
}
.spend-tier-hint-row {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 0;
}
.spend-tier-pill {
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.spend-tier-desc {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}
.spend-tier-odds-link {
    flex-shrink: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}
.spend-tier-odds-link:hover {
    color: var(--accent-hover);
}
.spend-risk-note {
    margin: 18px 0 0;
    font-size: 0.74rem;
    line-height: 1.4;
    color: var(--text-muted);
}
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Purrks — left column under image */
.purrks-panel {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}
.purrks-panel-lead {
    margin: 10px 0 0;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--text-muted);
}
.purrks-tier-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin: 8px 0 12px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
}
.purrks-tier-legend .attr-tier {
    font-size: inherit;
    font-weight: 600;
}
.purrks-tier-legend-sep {
    color: var(--text-muted);
    font-weight: 500;
}
.purrks-panel--side .attr-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.purrks-panel--side .attr-item {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
}

/* Purrk inventory — right column on the item page */
.purrk-inventory {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.purrk-inventory-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}
.purrk-inventory-lead {
    margin: 7px 0 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}
.purrk-inventory-count {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.2;
    padding-top: 5px;
}
.purrk-inventory-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.purrk-inventory-card {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
    padding: 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.purrk-inventory-card:hover:not(.is-locked):not([aria-disabled="true"]),
.purrk-inventory-card:focus-visible:not(.is-locked):not([aria-disabled="true"]) {
    border-color: rgba(1, 128, 255, 0.58);
    background: var(--bg-secondary);
    outline: none;
    transform: translateY(-1px);
}
.purrk-inventory-card.is-equipped {
    border-color: rgba(1, 128, 255, 0.52);
    background: rgba(1, 128, 255, 0.07);
}
.purrk-inventory-card.is-locked {
    cursor: not-allowed;
    opacity: 0.6;
}
.purrk-inventory-card.is-busy {
    cursor: wait;
    opacity: 0.72;
}
.purrk-inventory-preview {
    display: flex;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    background: var(--purrk-swatch, #e8e4dc);
}
.purrk-inventory-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.purrk-inventory-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    padding-right: 2px;
}
.purrk-inventory-name,
.purrk-inventory-trait,
.purrk-inventory-status {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.purrk-inventory-name {
    font-size: 0.8rem;
    font-weight: 700;
}
.purrk-inventory-trait {
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: 0.7rem;
}
.purrk-inventory-status {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.67rem;
}
.purrk-inventory-card.is-equipped .purrk-inventory-status {
    color: var(--accent);
}
.purrk-lock-badge,
.purrk-equipped-badge {
    position: absolute;
    top: 7px;
    right: 7px;
    border-radius: 999px;
    padding: 3px 6px;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.purrk-lock-badge {
    background: rgba(139, 143, 163, 0.2);
    color: var(--text-secondary);
}
.purrk-equipped-badge {
    background: rgba(1, 128, 255, 0.16);
    color: var(--accent);
}
.purrk-inventory-empty {
    margin: 0;
    padding: 16px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.82rem;
    text-align: center;
}

.item-dress-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}
.item-dress-actions .btn {
    width: 100%;
}
.attr-item--wear {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    margin: 0;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
}
.attr-item--wear .attr-label {
    width: 100%;
    text-align: left;
}
button.attr-item--wear {
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
button.attr-item--wear:hover,
button.attr-item--wear:focus-visible {
    border-color: rgba(1, 128, 255, 0.55);
    background: rgba(1, 128, 255, 0.06);
    outline: none;
}
.attr-wear-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-width: 0;
}
.attr-tier {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: var(--codex-tier-standard);
}
.attr-tier--standard { color: var(--codex-tier-standard); }
.attr-tier--premium { color: var(--codex-tier-premium); }
.attr-tier--elite { color: var(--codex-tier-elite); }
.attr-tier--mythic { color: var(--codex-tier-mythic); }
.purrk-inbound-section {
    grid-column: 1 / -1;
    margin-top: 4px;
}
.purrk-inbound {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

/* Feed modal — mobile sticky opens this; form is moved from #mutation-section-host */
.feed-modal {
    padding: 16px;
}
.modal-content.feed-modal-content {
    display: flex;
    flex-direction: column;
    width: min(440px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    max-height: min(90vh, calc(100vh - 32px));
    padding: 0;
    overflow: hidden;
}
.feed-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 0;
}
.feed-modal-heading {
    min-width: 0;
    flex: 1 1 auto;
}
.feed-modal-header h2 {
    margin: 0;
    font-size: 1.25rem;
}
.feed-modal-lead {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.4;
    font-weight: 400;
}
.feed-modal-body {
    padding: 12px 18px 18px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.feed-modal-body .mutation-section {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.feed-modal-body .mutation-section:hover,
.feed-modal-body .mutation-section:focus-within {
    border: 0;
    box-shadow: none;
}
/* Modal header already carries title/lead */
.feed-modal-body .mutation-section-title,
.feed-modal-body .mutation-section-lead {
    display: none;
}
.feed-modal-body .mutation-actions {
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 0;
}
.feed-modal-body .mutation-actions .btn {
    flex: 1 1 auto;
}
.feed-modal-body .mutation-actions .feed-get-gemston {
    flex: 1 1 auto;
}

/* Dress-up modal — traits | values | preview (desktop), stacked on mobile */
.dresser-modal {
    padding: 16px;
}
.modal-content.dresser-modal-content {
    display: flex;
    flex-direction: column;
    /* Hug content so left/right modal padding stay equal (no empty 1fr strip) */
    width: fit-content;
    max-width: min(1120px, calc(100vw - 32px));
    height: min(820px, calc(100vh - 32px));
    max-height: min(820px, calc(100vh - 32px));
    padding: 10px;
    overflow: hidden;
}
.dresser-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px 0;
}
.dresser-modal-heading {
    min-width: 0;
    flex: 1 1 auto;
}
.dresser-modal-header h2 {
    margin: 0;
    font-size: 1.3rem;
}
.dresser-modal-lead {
    margin: 6px 0 0;
    max-width: 40rem;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.4;
    font-weight: 400;
}
.dresser-modal-body {
    display: grid;
    /* traits | narrow values | preview (no stretch gap) */
    grid-template-columns: max-content 220px auto;
    /* One row capped to the modal body so the options column scrolls */
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    gap: 14px 16px;
    min-height: 0;
    flex: 1 1 auto;
    padding: 12px 18px 16px;
    overflow: hidden;
}
.dresser-preview-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: min(520px, calc(100vh - 300px));
    max-width: 100%;
    /* Keep preview/actions at natural height; don't stretch with the list */
    align-self: start;
}
.dresser-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-primary);
    overflow: hidden;
}
.dresser-preview-expand {
    display: none;
}
.dresser-preview-stack {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.dresser-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
}
.dresser-layer.is-empty {
    display: none;
}
.dresser-save-btn,
.dresser-save-hint,
.dresser-status {
    width: 100%;
}
/* Desktop: match category tab tile height (Body / Face / …). */
@media (min-width: 769px) {
    .dresser-save-btn {
        padding: 11px 16px;
        font-size: 0.95rem;
        font-weight: 700;
        line-height: 1.4;
        box-sizing: border-box;
    }
}
.dresser-save-hint {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.4;
}
.dresser-status {
    margin: 0;
}
.dresser-tabs {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 168px;
    min-height: 0;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.dresser-tabs::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
.dresser-tab {
    /* appearance + flex + tight line-height: iOS Safari otherwise keeps
       UA button padding and inherited 24px body line-height, so labels
       sit on the bottom edge and clip outside the chip. */
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    width: 100%;
    padding: 11px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
.dresser-tab.is-active,
.dresser-tab[aria-selected="true"] {
    border-color: rgba(1, 128, 255, 0.55);
    background: rgba(1, 128, 255, 0.12);
    color: var(--text-primary);
}
.dresser-options {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 8px;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-right: 2px;
}
.dresser-options::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
.dresser-option {
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    font: inherit;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.dresser-option:hover:not([aria-disabled="true"]),
.dresser-option:focus-visible:not([aria-disabled="true"]) {
    border-color: rgba(1, 128, 255, 0.55);
    background: var(--bg-secondary);
    outline: none;
}
.dresser-option.is-selected {
    border-color: rgba(1, 128, 255, 0.55);
    background: rgba(1, 128, 255, 0.08);
}
.dresser-option.is-locked,
.dresser-option.is-pending,
.dresser-option[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.58;
}
.dresser-option-preview {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--purrk-swatch, #e8e4dc);
}
.dresser-option-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.dresser-option-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}
.dresser-option-name,
.dresser-option-status {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dresser-option-name-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}
.dresser-option-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.86rem;
    font-weight: 700;
}
.dresser-option-tier {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--codex-tier-standard);
}
.dresser-option-tier--standard { color: var(--codex-tier-standard); }
.dresser-option-tier--premium { color: var(--codex-tier-premium); }
.dresser-option-tier--elite { color: var(--codex-tier-elite); }
.dresser-option-tier--mythic { color: var(--codex-tier-mythic); }
.dresser-option-name.dresser-option--premium,
.dresser-option--premium .dresser-option-name { color: var(--codex-tier-premium); }
.dresser-option--elite .dresser-option-name { color: var(--codex-tier-elite); }
.dresser-option--mythic .dresser-option-name { color: var(--codex-tier-mythic); }
.dresser-option-status {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 0.7rem;
}
.dresser-option.is-ghost {
    opacity: 0.72;
    background: rgba(255, 255, 255, 0.02);
}
.dresser-option-preview--ghost {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        repeating-linear-gradient(
            -45deg,
            rgba(139, 143, 163, 0.12),
            rgba(139, 143, 163, 0.12) 6px,
            rgba(139, 143, 163, 0.04) 6px,
            rgba(139, 143, 163, 0.04) 12px
        );
}
.dresser-option-preview--ghost::after {
    content: '?';
    color: var(--text-muted);
    font-size: 1.1rem;
    font-weight: 800;
    opacity: 0.7;
}
.dresser-options-empty {
    margin: 0;
    padding: 14px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.45;
    text-align: left;
}
.dresser-options-empty--inline {
    padding: 8px 10px;
    margin-bottom: 2px;
}
.dresser-status {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
}
.dresser-status.is-error {
    color: var(--danger, #ff6b6b);
}
html.modal-open,
body.modal-open {
    overflow: hidden;
    overscroll-behavior: none;
}
body.modal-open {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
}
.purrk-inbound-title {
    margin: 0 0 9px;
    color: var(--text-secondary);
    font-size: 0.88rem;
}
.purrk-accept-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 0.72fr) auto;
    align-items: center;
    gap: 9px;
    padding: 10px 0;
    border-top: 1px solid var(--border);
}
.purrk-accept-form > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
    font-size: 0.8rem;
}
.purrk-accept-form span {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.purrk-accept-form select {
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.75rem;
}
.purrk-accept-form .btn {
    padding: 9px 12px;
    font-size: 0.75rem;
}
.btn-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 132px;
}
.btn-share-icon {
    flex-shrink: 0;
}
.mutation-modal-footer {
    display: flex;
    gap: 10px;
    justify-content: stretch;
}
.mutation-modal-footer .btn {
    flex: 1;
}
.modal-content--mutation {
    max-width: 420px;
}
.mutation-purrk-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0 auto 14px;
    max-width: 200px;
}
.mutation-purrk-card.hidden { display: none; }
.mutation-purrk-preview {
    width: 160px;
    height: 160px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--purrk-swatch, #e8e4dc);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    animation: purrkRevealPop 0.45s ease-out;
}
.mutation-purrk-card.is-duplicate .mutation-purrk-preview {
    opacity: 0.78;
    filter: saturate(0.85);
}
.mutation-purrk-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.mutation-purrk-tier {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    background: rgba(255, 255, 255, 0.08);
    color: var(--codex-tier-standard);
}
.mutation-purrk-tier--standard { color: var(--codex-tier-standard); }
.mutation-purrk-tier--premium { color: var(--codex-tier-premium); }
.mutation-purrk-tier--elite { color: var(--codex-tier-elite); }
.mutation-purrk-tier--mythic { color: var(--codex-tier-mythic); }
@keyframes purrkRevealPop {
    from { transform: scale(0.86); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .mutation-purrk-preview { animation: none; }
}
.mutation-reveal {
    margin: 0 0 14px;
}
.mutation-reveal-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-primary);
    border: 1px solid var(--border);
}
.mutation-reveal-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.45s ease;
}
.mutation-reveal-img.is-active {
    opacity: 1;
}
.mutation-reveal-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.mutation-reveal-thumb {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.mutation-reveal-thumb img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}
.mutation-reveal-thumb span {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.mutation-reveal-thumb.is-selected {
    border-color: var(--accent);
    color: var(--text-primary);
    background: rgba(1, 128, 255, 0.08);
}
.mutation-reveal-thumb:hover {
    border-color: var(--border-light);
    color: var(--text-primary);
}
.modal-meta-line {
    margin: 0 0 8px;
    color: var(--text-secondary);
    font-size: 0.86rem;
    font-weight: 600;
    text-align: center;
}
.modal-content--mutation .modal-change-primary {
    margin-bottom: 10px;
}
.modal-content--mutation .modal-header {
    margin-bottom: 4px;
}
.modal-content--mutation .modal-header h2 {
    font-size: 1.35rem;
}
.modal-content-share {
    max-width: 560px;
}
.modal-content-share .modal-header {
    align-items: flex-start;
    gap: 12px;
}
.modal-content-share .modal-close {
    flex-shrink: 0;
    margin-top: -2px;
}
.share-card-preview-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-primary);
    margin-bottom: 12px;
}
.share-card-preview {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
}
.share-card-text {
    margin: 0 0 14px;
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.5;
}
.share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.share-actions a.btn {
    flex: 1 1 calc(50% - 8px);
    text-align: center;
    text-decoration: none;
}
#share-modal {
    z-index: 1100;
}
.spend-risk-note a {
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.spend-risk-note a:hover {
    color: var(--accent);
}
.amount-presets {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.mutation-section--compact .amount-presets {
    gap: 6px;
    margin-bottom: 10px;
}
.mutation-section--compact .preset-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
}
.preset-btn {
    padding: 8px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all var(--transition);
}
.preset-btn:hover, .preset-btn.active {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(1, 128, 255, 0.1);
}
.amount-input-wrap {
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 6px;
}
.amount-input {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    outline: none;
    transition: border-color var(--transition);
}
.amount-input:focus { border-color: var(--accent); }
.amount-input::placeholder { color: var(--text-muted); }
.amount-input::-webkit-outer-spin-button,
.amount-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.amount-input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}
.amount-suffix {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    white-space: nowrap;
    padding-right: 4px;
}

/* Roll history: desktop under Feed (col 2); mobile under Wearing (DOM order) */
.item-layout > .history-section {
    grid-column: 2;
    min-width: 0;
    width: 100%;
}
.history-list { list-style: none; }
.history-total-count {
    font-size: 0.85em;
    font-weight: 500;
    color: var(--text-muted);
}
.history-load-more {
    display: block;
    width: 100%;
    margin-top: 12px;
}
/* Author display:block must not override the hidden attribute. */
.history-load-more[hidden] {
    display: none !important;
}
.history-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}
.history-item:last-child { border-bottom: none; }
.history-num {
    font-size: 0.75rem;
    color: var(--text-muted);
    min-width: 28px;
    text-align: center;
}
.history-info { flex: 1; }
.history-title {
    font-size: 0.88rem;
    font-weight: 600;
}
.history-meta {
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.history-proof-fail {
    color: #fca5a5;
}
.history-proof-pending {
    color: var(--text-muted);
    font-style: italic;
}
.history-proof-link {
    font-size: 0.75rem;
    color: var(--accent);
    text-decoration: none;
}
.history-proof-link:hover {
    text-decoration: underline;
}
.history-cost {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gemston);
    white-space: nowrap;
}

/* --- Mutation verifier page --- */
.verify-wrap {
    max-width: 920px;
    margin: 0 auto;
}
.verify-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
}
.verify-title {
    font-size: var(--type-h1-size);
    line-height: var(--type-h1-line);
    margin-bottom: 8px;
}
.verify-subtitle {
    color: var(--text-secondary);
    font-size: var(--type-text-size);
    line-height: var(--type-text-line);
    margin-bottom: 10px;
}
.verify-hint {
    color: var(--text-secondary);
    font-size: var(--type-small-size, 0.9rem);
    line-height: var(--type-text-line);
    margin: 0 0 16px;
}
.verify-hint code {
    font-family: "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
    font-size: 0.86em;
    color: var(--text-primary);
}
.verify-hint-example {
    display: inline-block;
    margin-top: 6px;
    padding: 6px 8px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    word-break: break-all;
}
.verify-hint-example strong {
    color: var(--accent);
    font-weight: 700;
}
.verify-form {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}
.verify-input {
    flex: 1;
    min-width: 0;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: 10px 12px;
    font-family: "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
    font-size: 0.86rem;
}
.verify-input:focus {
    outline: none;
    border-color: var(--accent);
}
.verify-alert {
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-bottom: 14px;
    font-size: 0.88rem;
}
.verify-alert-error {
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.45);
    color: #fecaca;
}
.verify-status {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-radius: var(--radius-sm);
    padding: 12px;
    margin-bottom: 14px;
}
.verify-status strong {
    font-size: 0.95rem;
}
.verify-status span {
    color: var(--text-secondary);
    font-size: 0.82rem;
}
.verify-status.verify-ok {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.45);
}
.verify-status.verify-fail {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.45);
}
.verify-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.verify-kv {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px;
}
.verify-kv span {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
}
.verify-kv strong {
    font-size: 0.85rem;
    word-break: break-all;
}
.verify-mono {
    font-family: "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
}
.verify-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}
.verify-links a {
    color: var(--accent);
    font-size: 0.84rem;
    text-decoration: none;
}
.verify-links a:hover {
    text-decoration: underline;
}
.verify-block {
    margin-top: 12px;
}
.verify-block-title {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.verify-pre {
    background: #101115;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px;
    font-size: 0.78rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 260px;
    overflow: auto;
}
@media (max-width: 700px) {
    .verify-form {
        flex-direction: column;
        align-items: stretch;
    }
}

/* --- Modal --- */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overscroll-behavior: contain;
}
.hidden { display: none; }
.modal.hidden { display: none; }
.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}
.modal-content {
    position: relative;
    overflow: hidden;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    max-width: 460px;
    width: 100%;
    padding: 28px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
    animation: modalIn 0.3s ease;
}
.mint-modal-content {
    max-width: 520px;
}

/* --- Free-mint onboarding (mint modal teaser only) --- */
.onboarding-teaser {
    margin: 10px 0 0;
    color: var(--accent);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
}
.mint-modal-image-wrap {
    margin-bottom: 14px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-card);
}
.mint-modal-image-wrap img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}
@keyframes modalIn {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.confetti-piece {
    position: absolute;
    top: -16px;
    width: 8px;
    height: 12px;
    opacity: 0;
    border-radius: 2px;
    background: hsl(calc(360 * var(--i, 0)), 85%, 62%);
    animation: confettiDrop var(--dur, 1s) ease-out forwards;
    animation-delay: var(--delay, 0s);
}
.confetti-piece:nth-child(4n) { background: #7aa2ff; }
.confetti-piece:nth-child(4n+1) { background: #2dd4bf; }
.confetti-piece:nth-child(4n+2) { background: #fbbf24; }
.confetti-piece:nth-child(4n+3) { background: #f472b6; }
@keyframes confettiDrop {
    0% {
        opacity: 0;
        transform: translate3d(0, -12px, 0) rotate(0deg);
    }
    12% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate3d(var(--dx, 0px), 220px, 0) rotate(var(--rot, 180deg));
    }
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}
.modal-header h2 {
    font-size: var(--type-h2-size);
    line-height: var(--type-h2-line);
    font-weight: 800;
}
.modal-body,
.modal-footer {
    position: relative;
    z-index: 2;
}
.modal-subtitle {
    margin: -2px 0 14px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}
.modal-close {
    background: none;
    border: none;
    box-shadow: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    outline: none;
}
.modal-close:hover { color: var(--text-primary); }
.modal-close:focus,
.modal-close:focus-visible {
    outline: none;
    border: none;
    box-shadow: none;
}
.modal-description {
    color: var(--text-secondary);
    font-size: var(--type-text-size);
    line-height: var(--type-text-line);
    margin-bottom: 14px;
}
.modal-change-primary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(45, 212, 191, 0.09);
    border: 1px solid rgba(45, 212, 191, 0.5);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-bottom: 10px;
    font-size: 0.88rem;
}
.modal-change-label {
    color: var(--text-secondary);
    font-weight: 600;
}
.modal-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.modal-metric-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.74rem;
    line-height: 1;
    font-weight: 600;
}
.modal-image-status {
    margin-top: -8px;
    margin-bottom: 16px;
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.modal-progress {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.modal-progress-track {
    width: 100%;
    height: 6px;
    background: var(--border-light);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}
.modal-progress-fill {
    height: 100%;
    min-width: 3px;
    border-radius: 3px;
    background: var(--accent);
    transition: width 0.55s ease;
}
.modal-coach-tip {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.84rem;
    line-height: 1.5;
}
.mutation-reveal-title {
    animation: mutationTitlePop 0.55s ease;
}
.mutation-reveal-premium .modal-change-primary {
    animation: mutationChangeIn 0.45s ease;
}
.mutation-reveal-elite {
    border-color: rgba(96, 165, 250, 0.65);
    animation: mutationRevealPulse 0.7s ease;
}
.mutation-reveal-mythic {
    border-color: rgba(251, 191, 36, 0.75);
    animation: mutationRevealPulse 0.85s ease;
}
.mutation-reveal-elite .modal-change-primary,
.mutation-reveal-mythic .modal-change-primary {
    animation: mutationChangeIn 0.5s ease;
}
.mutation-reveal-mythic .modal-change-primary {
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.55);
}
@keyframes mutationTitlePop {
    0% { transform: scale(0.96); opacity: 0.5; }
    60% { transform: scale(1.03); opacity: 1; }
    100% { transform: scale(1); }
}
@keyframes mutationChangeIn {
    from { transform: translateY(6px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes mutationRevealPulse {
    0% { box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5); }
    40% { box-shadow: 0 0 0 1px rgba(1, 128, 255, 0.35), 0 16px 56px rgba(1, 128, 255, 0.22); }
    100% { box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5); }
}
.modal-footer {
    margin-top: 24px;
    text-align: center;
}

/* Omniston buy modal */
.modal-content-buy-gemston {
    max-width: min(560px, 100%);
    width: 100%;
    min-width: 0;
    padding: 22px;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Odds & fairness modal */
.modal-content-odds {
    max-width: 560px;
    max-height: min(88vh, 760px);
    display: flex;
    flex-direction: column;
    padding: 24px;
}
.modal-content-odds .modal-header {
    align-items: flex-start;
    gap: 12px;
    flex-shrink: 0;
}
.modal-content-odds .modal-header h2 {
    flex: 1;
    min-width: 0;
    padding-right: 4px;
}
.modal-content-odds .modal-close {
    flex-shrink: 0;
    margin-top: -2px;
    line-height: 1;
}
.odds-modal-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
    margin-right: -4px;
}
.odds-modal-body .policy-section {
    margin-bottom: 18px;
}
.odds-modal-body .policy-section:last-child {
    margin-bottom: 0;
}
.odds-modal-body .policy-section h2 {
    font-size: 1rem;
    margin-bottom: 6px;
}
.odds-modal-body .policy-lead,
.odds-modal-body .policy-section p,
.odds-modal-body .policy-list {
    font-size: 0.86rem;
}
#odds-modal {
    z-index: 1100;
}

/* Spend risk confirmation modal */
.modal-content-spend-risk {
    max-width: 440px;
}
.modal-content-spend-risk .modal-header {
    align-items: flex-start;
    gap: 12px;
}
.modal-content-spend-risk .modal-header h2 {
    flex: 1;
    min-width: 0;
    padding-right: 4px;
}
.modal-content-spend-risk .modal-close {
    flex-shrink: 0;
    margin-top: -2px;
    line-height: 1;
}
.spend-risk-lead {
    margin: 0 0 12px;
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.5;
}
.spend-risk-detail {
    margin: 0 0 14px;
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.55;
}
.spend-risk-warning {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: var(--radius-sm);
    background: rgba(251, 191, 36, 0.08);
    color: var(--text-primary);
    font-size: 0.86rem;
    line-height: 1.5;
}
.spend-risk-terms {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.45;
}
.spend-risk-terms a {
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.spend-risk-terms a:hover {
    color: var(--accent);
}
.spend-risk-footer {
    display: flex;
    gap: 10px;
    justify-content: stretch;
}
.spend-risk-footer .btn {
    flex: 1;
}
#spend-risk-modal {
    z-index: 1100;
}

/* Rarity & stage help modal */
.modal-content-help {
    max-width: 520px;
    max-height: min(88vh, 720px);
    display: flex;
    flex-direction: column;
    padding: 24px;
}
.modal-content-help .modal-header {
    align-items: flex-start;
    gap: 12px;
}
.modal-content-help .modal-header h2 {
    flex: 1;
    min-width: 0;
    padding-right: 4px;
}
.modal-content-help .modal-close {
    flex-shrink: 0;
    margin-top: -2px;
    line-height: 1;
}
.help-modal-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
    margin-right: -4px;
}
.help-section + .help-section {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.help-section-title {
    margin: 0 0 6px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}
.help-section-text {
    margin: 0 0 6px;
    color: var(--text-secondary);
    font-size: 0.86rem;
    line-height: 1.55;
}
.help-section-text:last-child {
    margin-bottom: 0;
}
.help-section-text strong {
    color: var(--text-primary);
    font-weight: 600;
}
.help-journey,
.help-brackets {
    margin: 4px 0 8px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.5;
    letter-spacing: 0.2px;
}
.help-brackets {
    color: var(--text-muted);
}
.modal-content-help .modal-footer {
    margin-top: 18px;
    flex-shrink: 0;
}

/* Campaign invite — boarding pass */
#campaign-invite-modal {
    z-index: 1050;
}
.modal-content-campaign-invite {
    max-width: 400px;
    max-height: min(88vh, 760px);
    overflow-y: auto;
    padding: 22px 22px 24px;
    background:
        linear-gradient(180deg, rgba(1, 128, 255, 0.14) 0%, transparent 34%),
        var(--bg-secondary);
    box-shadow:
        0 12px 48px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(1, 128, 255, 0.2);
}
.campaign-invite-header {
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}
.campaign-invite-heading {
    min-width: 0;
    flex: 1;
}
.campaign-invite-eyebrow {
    margin: 0 0 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: lowercase;
    white-space: nowrap;
    color: var(--accent);
}
.campaign-invite-header h2 {
    font-size: 30px;
    line-height: 1.12;
    letter-spacing: -0.03em;
}
.campaign-invite-header .modal-close {
    flex-shrink: 0;
    margin-top: -2px;
}
.campaign-invite-photo {
    margin: 0 0 16px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px dashed rgba(64, 209, 253, 0.35);
    background: var(--bg-card);
}
.campaign-invite-photo img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}
.campaign-invite-copy {
    margin: 0;
    color: var(--text-secondary);
}
.campaign-invite-copy strong {
    color: var(--text-primary);
    font-weight: 600;
}
.campaign-invite-footer {
    margin-top: 18px;
}
.campaign-invite-cta {
    width: 100%;
}
@media (max-width: 768px) {
    .campaign-invite-header h2 {
        font-size: 26px;
        line-height: 1.15;
    }
}
@media (max-height: 740px) {
    .campaign-invite-photo img {
        aspect-ratio: 4 / 3;
    }
}

/* Loading state shown while the on-demand widget bundle downloads on first click.
   Matches the site's inline `.spinner` pattern used by #wallet-connect-loader. */
.buy-gemston-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 460px;
    padding: 20px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-align: center;
}
.buy-gemston-loading.hidden {
    display: none;
}
.buy-gemston-widget-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 460px;
    border-radius: var(--radius);
    overflow: hidden;
    --border-width: 1px;
    --max-border-radius: 16px;
    --border-radius: 10px;
    --accent-1: #061425;
    --accent-2: #0a1d33;
    --accent-3: #0d2742;
    --accent-4: #113252;
    --accent-5: #153d63;
    --accent-6: #1a4875;
    --accent-7: #1f5688;
    --accent-8: #25659e;
    --accent-9: #0180ff;
    --accent-10: #2e9aff;
    --accent-11: #7dbdff;
    --accent-12: #d9ecff;
    --grey-1: #11141a;
    --grey-2: #141923;
    --grey-3: #1a2230;
    --grey-4: #1f2938;
    --grey-5: #253044;
    --grey-6: #2c3950;
    --grey-7: #35435d;
    --grey-8: #43536d;
    --grey-9: #5a6b86;
    --grey-10: #7f92ac;
    --grey-11: #aebdd1;
    --grey-12: #e7edf7;
    --background-color: #151a24;
    --background-hover-color: #1b2230;
    --border-color: #2b3648;
    --success-color: #22c55e;
    --danger-color: #f87171;
    --text-primary-color: #f4f7ff;
    --text-secondary-color: #aebbd0;
    --text-accent-color: #2e9aff;
    --icon-primary-color: #eaf1ff;
    --icon-secondary-color: #9aa9c2;
    --icon-accent-color: #2e9aff;
    --button-primary-background-color: #0180ff;
    --button-primary-text-color: #eaf3ff;
    --button-primary-background-hover-color: #2e9aff;
    --button-primary-text-hover-color: #f4f9ff;
    --button-primary-text-disabled-color: #7f8da3;
    --button-primary-background-disabled-color: #1f2a36;
    --button-secondary-text-color: #d9e2f3;
    --button-secondary-text-hover-color: #f4f8ff;
    --button-secondary-text-disabled-color: #8492a8;
    --button-secondary-background-color: #1b2330;
    --button-secondary-background-hover-color: #242f40;
    --button-secondary-background-disabled-color: #161d28;
    --button-secondary-border-width: 1px;
    --button-secondary-border-color: #3a4459;
    --button-secondary-border-hover-color: #4b5870;
    --button-secondary-border-disabled-color: #273143;
    --icon-button-text-color: #dce7fb;
    --icon-button-background-color: #202838;
    --icon-button-background-hover-color: #273246;
    --icon-button-border-width: 1px;
    --icon-button-border-radius: var(--border-radius);
    --icon-button-border-color: #3a4459;
    --input-border-width: 1px;
    --input-border-radius: var(--border-radius);
    --input-border-color: #344156;
    --input-background-color: #121720;
    --input-placeholder-color: #7f8fa9;
    --input-caret-color: #2e9aff;
    --input-active-background-color: #17202c;
    --input-active-border-color: #4f607a;
    --input-invalid-border-color: #f87171;
    --form-background-color: #171d29;
    --form-border-color: #2f3b50;
    --form-border-width: 1px;
    --form-border-radius: 12px;
    --dialog-background-color: #171b24;
    --dialog-border-color: #324056;
    --dialog-border-width: 1px;
    --dialog-border-radius: 12px;
    --dialog-overlay-background-color: rgba(5, 8, 12, 0.72);
    --tooltip-background-color: #101722;
    --tooltip-border-color: #344156;
    --tooltip-border-width: 1px;
    --tooltip-border-radius: var(--border-radius);
    --tooltip-text-color: #dce6f8;
    --toggle-group-text-color: #cfd9ea;
    --toggle-group-border-color: #3a465c;
    --toggle-group-border-width: 1px;
    --toggle-group-border-radius: var(--border-radius);
    --toggle-group-background-color: #171f2b;
    --toggle-group-hover-text-color: #ecf3ff;
    --toggle-group-hover-border-color: #4b5870;
    --toggle-group-hover-background-color: #212b3a;
    --toggle-group-selected-text-color: #0f141d;
    --toggle-group-selected-border-color: #2e9aff;
    --toggle-group-selected-background-color: #0180ff;
    --snackbar-border-color: #354258;
    --snackbar-border-width: 1px;
    --snackbar-border-radius: 12px;
    --snackbar-background-color: #171b24;
    --switch-track-border-width: 1px;
    --switch-track-border-radius: 999px;
    --switch-track-checked-border-color: #2e9aff;
    --switch-track-checked-background-color: #0180ff;
    --switch-track-checked-background-hover-color: #2e9aff;
    --switch-track-unchecked-border-color: #3a4459;
    --switch-track-unchecked-background-color: #1a2130;
    --switch-track-unchecked-background-hover-color: #242d3d;
    --switch-thumb-background-color: #f2f6ff;
    --switch-thumb-border-width: 1px;
    --switch-thumb-border-radius: 999px;
    --switch-thumb-checked-border-color: #d9ecff;
    --switch-thumb-unchecked-border-color: #8fa1bc;
    --alert-text-color: #dce7fb;
    --alert-icon-color: #7f92ac;
    --alert-border-color: #3b4a61;
    --alert-border-width: 1px;
    --alert-border-radius: var(--border-radius);
    --alert-background-color: #151d29;
    --swap-button-background-color: #0180ff;
    --swap-button-border-color: #2e9aff;
    --swap-button-border-width: 1px;
    --swap-button-border-radius: var(--border-radius);
    --swap-button-hover-background-color: #2e9aff;
    --swap-button-icon-color: #eaf3ff;
    --button-primary-border-radius: var(--border-radius);
    --button-secondary-border-radius: var(--border-radius);
    --active-order-button-border-radius: var(--border-radius);
    --label-border-radius: var(--border-radius);
    --skeleton-border-radius: var(--border-radius);
}
.buy-gemston-widget-container button,
.buy-gemston-widget-container input,
.buy-gemston-widget-container select,
.buy-gemston-widget-container textarea,
.buy-gemston-widget-container [role='button'] {
    border-radius: 10px !important;
}
.buy-gemston-widget-container [role='dialog'],
.buy-gemston-widget-container [class*='modal'],
.buy-gemston-widget-container [class*='snackbar'],
.buy-gemston-widget-container [class*='toast'],
.buy-gemston-widget-container [class*='notification'],
.buy-gemston-widget-container [class*='panel'],
.buy-gemston-widget-container [class*='card'],
.buy-gemston-widget-container [class*='surface'] {
    border-radius: 12px !important;
}
/* Omniston may render overlays/notifications outside the mount node; keep overrides widget-scoped by class signature. */
[class*='omniston'][role='dialog'],
[class*='omniston'][class*='modal'],
[class*='omniston'][class*='snackbar'],
[class*='omniston'][class*='toast'],
[class*='omniston'][class*='notification'] {
    border-radius: 12px !important;
}
[class*='omniston'] button,
[class*='omniston'] input,
[class*='omniston'] select,
[class*='omniston'] textarea,
[class*='omniston'] [role='button'] {
    border-radius: 10px !important;
}
/* Many Omniston overlays are rendered via portals (e.g., Radix) outside mount container. */
.buy-gemston-open [data-radix-portal] [role='dialog'],
.buy-gemston-open [data-radix-portal] [class*='dialog'],
.buy-gemston-open [data-radix-portal] [class*='modal'],
.buy-gemston-open [data-radix-portal] [class*='snackbar'],
.buy-gemston-open [data-radix-portal] [class*='toast'],
.buy-gemston-open [data-radix-portal] [class*='notification'],
.buy-gemston-open [data-radix-portal] [class*='panel'],
.buy-gemston-open [data-radix-portal] [class*='card'] {
    border-radius: 12px !important;
}
.buy-gemston-open [data-radix-portal] button,
.buy-gemston-open [data-radix-portal] input,
.buy-gemston-open [data-radix-portal] select,
.buy-gemston-open [data-radix-portal] textarea,
.buy-gemston-open [data-radix-portal] [role='button'] {
    border-radius: 10px !important;
}
.buy-gemston-fallback-note {
    margin-top: 12px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Omniston's supported floor is 340px. Our modal chrome (20px + 22px each
   side) is 84px, so the widget overflows below ~425px. Drop padding and
   force the mount node to the viewport so 320–424px phones still fit. */
@media (max-width: 440px) {
    #buy-gemston-modal {
        padding: 8px;
    }
    .modal-content-buy-gemston {
        padding: 12px 8px 14px;
    }
    .buy-gemston-widget-container {
        --spacing-base: 6px;
        /* Dialogs use width: var(--dialog-width). 100% on a position:fixed
           overlay is the viewport — keep that only on phones so 440px
           default dialogs don't overflow. Desktop must not inherit this. */
        --dialog-width: 100%;
        --snackbar-width: 100%;
    }
    .buy-gemston-widget-container,
    .buy-gemston-widget-container > *,
    .buy-gemston-widget-container > * > * {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
}
.buy-gemston-fallback-note a {
    color: var(--accent);
}

/* Trait changes list in modal */
.trait-changes { display: flex; flex-direction: column; gap: 8px; }
.trait-changes.hidden { display: none; }
.trait-change-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-card);
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}
.trait-change-name { color: var(--text-muted); font-weight: 500; }
.trait-change-arrow { color: var(--text-muted); margin: 0 6px; }
.trait-change-from { color: var(--text-secondary); }
.trait-change-to { color: var(--accent); font-weight: 600; }

.stage-change {
    margin-top: 14px;
    padding: 12px;
    background: rgba(1, 128, 255, 0.1);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    text-align: center;
    font-weight: 700;
}

/* --- Footer --- */
.site-footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    padding: 20px;
    text-align: center;
}
.footer-inner {
    max-width: 1120px;
    margin: 0 auto;
}
.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.footer-logo {
    display: inline-flex;
    align-items: center;
}
.footer-logo img {
    display: block;
    height: 20px;
    width: auto;
}
.footer-nav {
    display: none;
}
.mobile-sticky-cta-bar,
.mobile-sticky-cta {
    display: none;
}
.footer-link {
    display: grid;
    justify-items: center;
    row-gap: 4px;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--transition);
}
.footer-link .nav-icon,
.footer-link .nav-icon-active {
    grid-column: 1;
    grid-row: 1;
    width: 24px;
    height: 24px;
    display: block;
    transition: opacity var(--transition);
}
.footer-link .nav-icon { opacity: 1; }
.footer-link .nav-icon-active { opacity: 0; }
.footer-link span { grid-column: 1; grid-row: 2; }
.footer-link.active { color: var(--accent); }
.footer-link.active .nav-icon { opacity: 0; }
.footer-link.active .nav-icon-active { opacity: 1; }
.footer-link.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* Apply hover visuals only on devices that truly support hover.
   Prevents touch devices from getting "stuck" in hover state on first tap. */
@media (hover: hover) and (pointer: fine) {
    .nav-link:hover { color: var(--accent-hover); }
    .nav-link:hover .nav-icon { opacity: 0; }
    .nav-link:hover .nav-icon-active { opacity: 1; }

    .footer-link:hover { color: var(--text-primary); }
    .footer-link:hover .nav-icon { opacity: 0; }
    .footer-link:hover .nav-icon-active { opacity: 1; }
}
.footer-text {
    color: var(--text-muted);
    font-size: var(--type-text-sm-size);
    line-height: var(--type-text-sm-line);
}
.footer-text a {
    color: var(--text-secondary);
}
.footer-sep {
    margin: 0 0.35em;
    color: var(--text-muted);
}
.footer-text a:hover {
    color: var(--accent);
}

/* --- Loading spinner --- */
.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Wallet connect redirect overlay */
.wallet-connect-loader {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wallet-connect-loader.hidden {
    display: none;
}
.wallet-connect-loader-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(3px);
}
.wallet-connect-loader-content {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 999px;
    border: 1px solid var(--border-light);
    background: rgba(18, 20, 24, 0.92);
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 600;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

/* --- Error/success messages --- */
.flash-container {
    position: fixed;
    top: calc(72px + env(safe-area-inset-top, 0px));
    right: 20px;
    width: min(420px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1100;
    pointer-events: none;
}
.flash-message {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    border-radius: var(--radius-sm);
    margin-bottom: 0;
    font-size: 0.9rem;
    font-weight: 600;
    pointer-events: auto;
    /* Dark glass base — readable over any page art; accent via border/text */
    background: rgba(12, 12, 13, 0.78);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.flash-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    min-width: 0;
    flex: 1 1 auto;
}
.flash-action {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
a.flash-action,
a.flash-action:hover,
a.flash-action:focus-visible {
    color: inherit;
}
.flash-action:hover,
.flash-action:focus-visible {
    opacity: 0.9;
    outline: none;
}
.flash-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    opacity: 0.7;
    flex-shrink: 0;
}
.flash-close:hover { opacity: 1; }
.flash-success {
    border: 1px solid rgba(74, 222, 128, 0.65);
    color: #6ee7a0;
}
.flash-error {
    border: 1px solid rgba(248, 113, 113, 0.7);
    color: #fca5a5;
}

/* --- Explore page --- */
.explore-hero {
    text-align: center;
    padding: 48px 0 32px;
}
.explore-hero-title {
    font-size: var(--type-h1-size);
    line-height: var(--type-h1-line);
    font-weight: 800;
    margin-bottom: 14px;
}
.explore-hero-text {
    color: var(--text-secondary);
    font-size: var(--type-text-size);
    line-height: var(--type-text-line);
    max-width: 520px;
    margin: 0 auto;
}

/* Hero mosaic */
.hero-mosaic-wrap {
    container-type: inline-size;
    margin: 36px 0 0;
    display: flex;
    justify-content: center;
    overflow: hidden;
}
.hero-mosaic {
    --hero-scale: 0.885;
    --hero-gap: calc(1.8cqw * var(--hero-scale));
    --hero-lg: calc(25.8cqw * var(--hero-scale));
    --hero-md: calc(18cqw * var(--hero-scale));
    --hero-sm: calc(12cqw * var(--hero-scale));
    --hero-top-offset: calc(5.25cqw * var(--hero-scale));
    --hero-bottom-offset: calc(var(--hero-top-offset) + var(--hero-lg) - (2 * var(--hero-sm)) - var(--hero-gap));
    display: flex;
    align-items: center;
    gap: var(--hero-gap);
    width: max-content;
}
.hero-mosaic-core {
    display: flex;
    flex-direction: column;
    gap: var(--hero-gap);
    width: max-content;
    transform: translateX(calc(-0.5 * (var(--hero-top-offset) + var(--hero-bottom-offset))));
}
.hero-side-col {
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-row {
    display: flex;
    align-items: flex-start;
    gap: var(--hero-gap);
    width: max-content;
}
.hero-row-top {
    align-items: flex-start;
    transform: translateX(var(--hero-top-offset));
}
.hero-row-bottom {
    transform: translateX(var(--hero-bottom-offset));
}
.hero-tile {
    flex: 0 0 auto;
    aspect-ratio: 1;
    border-radius: 16px;
    overflow: hidden;
}
.hero-tile-lg { width: var(--hero-lg); }
.hero-tile-md { width: var(--hero-md); }
.hero-tile-sm { width: var(--hero-sm); }
.hero-tile-drop-sm {
    margin-top: calc(var(--hero-md) - var(--hero-sm));
}
.hero-tile-lift {
    transform: none;
}
.hero-tile-rise {
    margin-top: calc(-1 * (var(--hero-lg) - var(--hero-md)));
}
.hero-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Stoncat showcase carousel */
.showcase-carousel {
    --showcase-size: 240px;
    margin-top: 60px;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.showcase-track {
    display: flex;
    gap: 16px;
    animation: scrollShowcase 30s linear infinite;
    width: max-content;
}
.showcase-carousel:hover .showcase-track,
.showcase-carousel:focus-within .showcase-track {
    animation-play-state: paused;
}
.showcase-item {
    flex-shrink: 0;
    width: var(--showcase-size);
    padding: 12px;
    border-radius: var(--radius);
    background: var(--bg-card);
    border: 2px solid var(--border);
    box-sizing: border-box;
    display: block;
    color: inherit;
    text-decoration: none;
    transition: border-color var(--transition);
}
.showcase-item:hover,
.showcase-item:focus-visible {
    border-color: var(--accent);
}
.showcase-item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.showcase-item-image {
    overflow: hidden;
    border-radius: calc(var(--radius) - 6px);
    border: 1px solid var(--border);
}
.showcase-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}
.showcase-item-meta {
    padding-top: 10px;
}
.showcase-item-name {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary);
}
.showcase-item-address {
    display: inline-block;
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.explore-odds-cta {
    margin: 18px 0 0;
    text-align: center;
}
.explore-odds-cta a {
    color: var(--accent);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
}
.explore-odds-cta a:hover {
    color: var(--accent-hover);
}
.odds-table-wrap {
    overflow-x: auto;
    margin: 12px 0 16px;
}
.odds-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}
.odds-table th,
.odds-table td {
    padding: 8px 10px;
    border: 1px solid var(--border);
    text-align: left;
}
.odds-table th {
    color: var(--text-secondary);
    font-weight: 600;
    background: var(--bg-primary);
}
.odds-table td {
    color: var(--text-primary);
}
@keyframes scrollShowcase {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.explore-section {
    margin-bottom: 48px;
}
.explore-section-title {
    font-size: var(--type-h2-size);
    line-height: var(--type-h2-line);
    font-weight: 800;
    margin-top: 120px;
    margin-bottom: 10px;
}
.explore-section-text {
    color: var(--text-secondary);
    font-size: var(--type-text-size);
    line-height: var(--type-text-line);
    max-width: 560px;
    margin-bottom: 20px;
}

.explore-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.explore-cards-2col {
    grid-template-columns: repeat(2, 1fr);
}
.explore-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}
.explore-card-num {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(1, 128, 255, 0.15);
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 800;
    margin-bottom: 14px;
}
.explore-card-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.explore-card-text {
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.6;
}

/* Explore: rarity & stages */
.explore-rarity .explore-section-title,
.explore-faq .explore-section-title {
    text-align: center;
    margin-bottom: 30px;
}
.rarity-stage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}
.rarity-stage-card {
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(35, 39, 47, 0.9), rgba(24, 28, 36, 0.96));
    box-shadow: 0 18px 46px rgba(2, 6, 23, 0.28);
    padding: 18px;
}
.rarity-stage-card-visual {
    padding: 14px;
}
.rarity-stage-visual-wrap {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}
.rarity-stage-visual-wrap img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}
.rarity-stage-visual-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.rarity-stage-visual-pill {
    min-height: 34px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(21, 26, 34, 0.92);
    display: inline-flex;
    align-items: center;
    overflow: hidden;
}
.rarity-stage-visual-pill-key {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    min-height: 34px;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(186, 196, 216, 0.9);
    background: rgba(45, 52, 66, 0.66);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.rarity-stage-visual-pill-key-genesis {
    color: var(--rarity-genesis);
}
.rarity-stage-visual-pill-text {
    padding: 0 12px;
    font-size: 0.75rem;
    line-height: 1;
    color: rgba(203, 210, 224, 0.78);
}
.rarity-stage-title {
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    color: #f8fafc;
}
.rarity-stage-text {
    margin: 0 0 14px;
    color: rgba(226, 232, 240, 0.76);
    font-size: var(--type-text-size);
    line-height: 1.45;
    max-width: 31ch;
}
.rarity-stage-chip-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.rarity-stage-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.82rem;
    line-height: 1;
    font-weight: 700;
}
.rarity-stage-chip-arrow {
    color: rgba(139, 143, 163, 0.72);
    font-size: 0.92rem;
    line-height: 1;
}
.rarity-stage-chip-paper { background: rgba(139,143,163,0.18); color: var(--rarity-paper); }
.rarity-stage-chip-hodl { background: rgba(74,222,128,0.16); color: var(--rarity-hodl); }
.rarity-stage-chip-whale { background: rgba(96,165,250,0.16); color: var(--rarity-whale); }
.rarity-stage-chip-genesis { background: rgba(192,132,252,0.18); color: var(--rarity-genesis); }
.rarity-stage-chip-diamond { background: rgba(251,191,36,0.18); color: var(--rarity-diamond); }
.rarity-stage-chip-satoshi { background: rgba(255,107,157,0.18); color: var(--rarity-satoshi); }
.rarity-stage-chip-neutral { background: rgba(255, 255, 255, 0.04); color: rgba(226, 232, 240, 0.8); }

/* Explore: 11 unique purrks composition */
.explore-purrks .explore-section-title,
.explore-purrks .explore-section-text {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.explore-purrks .explore-section-text {
    max-width: 760px;
}
.purrks-stage {
    position: relative;
    width: min(653px, 100%);
    margin: 30px auto 0;
    min-height: 313px;
}
.purrks-core {
    position: relative;
    width: 253px;
    margin: 0 auto;
    z-index: 2;
}
.purrks-card {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(117, 152, 255, 0.28), rgba(63, 96, 210, 0.24));
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(2, 6, 23, 0.24);
}
.purrks-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}
.purrks-card-stack {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
}
.purrks-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}
.purrks-cta {
    appearance: none;
    width: 100%;
    margin-top: 8px;
    height: 43px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: linear-gradient(180deg, rgba(35, 39, 47, 0.92), rgba(24, 28, 36, 0.96));
    color: #f8fafc;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}
.purrks-cta-star {
    color: var(--accent);
    font-size: 1.3em;
    line-height: 1;
}
.purrks-tag {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    z-index: 3;
    min-height: 37px;
    padding: 0 11px 0 0;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(35, 39, 47, 0.88), rgba(24, 28, 36, 0.94));
    color: rgba(226, 232, 240, 0.8);
    font-size: 1.36rem;
    font-weight: 500;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 0;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), transform var(--transition);
    overflow: hidden;
}
.purrks-tag > span:not(.purrks-tag-swatch) {
    padding: 0 0 0 10px;
}
.purrks-tag:hover {
    border-color: rgba(255, 255, 255, 0.16);
}
.purrks-tag.is-active {
    border-color: rgba(1, 128, 255, 0.52);
    background: linear-gradient(180deg, rgba(35, 45, 64, 0.9), rgba(24, 31, 44, 0.96));
    transform: translateY(-1px);
}
.purrks-tag img,
.purrks-tag-swatch {
    width: 37px;
    height: 37px;
    border-radius: 8px;
    object-fit: cover;
    display: block;
    background: rgba(11, 15, 22, 0.95);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.07);
}
.purrks-tag-swatch {
    background: linear-gradient(180deg, #7f95ff, #4468ff);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.purrks-tag-background { left: 14px; top: 123px; }
.purrks-tag-face { left: 119px; top: 56px; }
.purrks-tag-body { right: 56px; top: 61px; }
.purrks-tag-clothes { right: 94px; top: 143px; }

.purrks-tag-ghost {
    position: absolute;
    z-index: 1;
    width: 67px;
    height: 36px;
    border-radius: 9px;
    border: 2px dashed rgba(255, 255, 255, 0.1);
    opacity: 0.45;
}
.purrks-tag-ghost-top-left { left: 87px; top: 40px; }
.purrks-tag-ghost-top-right { right: 195px; top: 80px; }
.purrks-tag-ghost-bottom-left { left: 131px; top: 181px; }
.purrks-tag-ghost-bottom-right { right: 157px; top: 172px; }

/* Explore: How it works cards */
.explore-how .explore-section-title {
    text-align: center;
    margin-bottom: 20px;
}
.explore-how-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.explore-how-card {
    position: relative;
    min-height: 426px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(36, 40, 47, 0.9), rgba(27, 31, 38, 0.95));
    box-shadow: 0 18px 46px rgba(2, 6, 23, 0.28);
    padding: 16px 16px 0;
    overflow: hidden;
}
.explore-how-num {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(12, 16, 23, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f5f8ff;
    font-size: 0.78rem;
    font-weight: 800;
}
.explore-how-title {
    margin: 14px 0 6px;
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    color: #f8fafc;
}
.explore-how-text {
    margin: 0;
    max-width: 30ch;
    color: rgba(226, 232, 240, 0.76);
    font-size: var(--type-text-size);
    line-height: 1.45;
}
.explore-how-visual-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 208px;
    pointer-events: none;
}
.explore-how-visual {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 260px;
    max-width: 88%;
    height: auto;
    display: block;
}
.explore-how-chip {
    position: absolute;
    left: 16px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 10px;
    background: rgba(61, 67, 82, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(228, 235, 245, 0.9);
    font-size: 0.82rem;
    line-height: 1;
    font-weight: 700;
}
.explore-how-chip-genesis {
    background: rgba(120, 85, 198, 0.36);
    color: #d9c8ff;
    border-color: rgba(192, 132, 252, 0.4);
}
.explore-how-gem {
    position: absolute;
    width: 36px;
    height: 36px;
    opacity: 0.95;
    filter: drop-shadow(0 0 12px rgba(1, 128, 255, 0.26));
}
.explore-how-gem-left {
    left: 16px;
    bottom: 58px;
}
.explore-how-gem-right {
    right: 18px;
    bottom: 48px;
}

.explore-journey {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
}
.explore-arrow {
    color: var(--text-muted);
    font-size: 0.8rem;
}
.stage-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-primary);
    border: 1px solid var(--border);
}

/* Traits grid */
.traits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}
.trait-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px 10px;
    text-align: center;
    transition: border-color var(--transition);
}
.trait-card:hover {
    border-color: var(--border-light);
}
.trait-card-accessory {
    border-style: dashed;
}
.trait-card-icon {
    font-size: 1.5rem;
    margin-bottom: 8px;
}
.trait-card-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* FAQ accordion */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 16px 20px;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: color var(--transition);
    font-family: 'Manrope', sans-serif;
}
.faq-question:hover {
    color: var(--accent);
}
.faq-toggle {
    font-size: 1.2rem;
    color: var(--text-muted);
    transition: transform var(--transition);
    flex-shrink: 0;
    margin-left: 12px;
}
.faq-item.open .faq-toggle {
    transform: rotate(45deg);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.faq-item.open .faq-answer {
    max-height: 480px;
}
.faq-answer p {
    padding: 0 20px 16px;
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.7;
}
.faq-answer a {
    color: var(--accent);
}

/* --- Live activity feed --- */
.explore-activity {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
.explore-activity .explore-section-title {
    margin-bottom: 0;
}
.activity-feed-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.activity-feed-more-link {
    color: var(--accent);
    font-family: 'Manrope', sans-serif;
    font-size: var(--type-text-sm-size);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.activity-feed-more-link:hover {
    color: var(--accent-hover);
}
.activity-feed-more {
    margin-top: 14px;
    text-align: right;
}
.activity-feed {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border);
}
.activity-feed-item {
    margin: 0;
}
.activity-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 14px;
    border-bottom: 1px solid var(--border);
    color: inherit;
    text-decoration: none;
    transition: background var(--transition);
}
a.activity-row:hover {
    background: rgba(255, 255, 255, 0.03);
}
.activity-row--static {
    cursor: default;
}
.activity-thumb {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-light);
    background: var(--bg-secondary);
}
.activity-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.activity-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
}
.activity-headline {
    color: var(--text-secondary);
    font-size: var(--type-text-sm-size);
    line-height: 1.35;
}
.activity-name {
    color: var(--text-primary);
    font-weight: 700;
    margin-right: 0.35em;
}
.activity-row--rarity .activity-headline,
.activity-row--stage .activity-headline {
    color: var(--text-primary);
}
.activity-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.activity-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid var(--border-light);
    background: var(--bg-card);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.3;
    color: var(--text-secondary);
}
.activity-chip--mint {
    color: var(--accent);
    border-color: rgba(1, 128, 255, 0.45);
    background: rgba(1, 128, 255, 0.1);
}
.activity-chip--mutate,
.activity-chip--roll {
    color: var(--text-secondary);
}
.activity-chip--look {
    color: #6ee7b7;
    border-color: rgba(52, 211, 153, 0.45);
    background: rgba(52, 211, 153, 0.1);
}
.activity-spend {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.activity-aside {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    min-width: 72px;
    text-align: right;
}
.activity-rarity {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.2;
}
.activity-rarity.rarity-paper { color: var(--rarity-paper); }
.activity-rarity.rarity-hodl { color: var(--rarity-hodl); }
.activity-rarity.rarity-whale { color: var(--rarity-whale); }
.activity-rarity.rarity-genesis { color: var(--rarity-genesis); }
.activity-rarity.rarity-diamond { color: var(--rarity-diamond); }
.activity-rarity.rarity-satoshi { color: var(--rarity-satoshi); }
.activity-time {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.2;
    white-space: nowrap;
}
.activity-feed-empty {
    color: var(--text-secondary);
    font-size: var(--type-text-sm-size);
    line-height: var(--type-text-sm-line);
    padding: 24px 0;
}
.live-page {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: 0 20px 40px;
    box-sizing: border-box;
}
.live-page-header {
    margin-bottom: 18px;
    text-align: center;
}
.live-page-heading {
    display: block;
}
.live-page-lead {
    margin: 8px auto 0;
    max-width: 36rem;
    color: var(--text-secondary);
    font-size: var(--type-text-sm-size);
    line-height: 1.45;
}
.live-page-section {
    margin-bottom: 0;
    width: 100%;
}

@media (max-width: 560px) {
    .live-page {
        padding-left: 16px;
        padding-right: 16px;
    }
    .activity-thumb {
        width: 56px;
        height: 56px;
    }
    .activity-row {
        gap: 12px;
        padding: 12px 0;
    }
    .activity-aside {
        min-width: 64px;
    }
}

/* --- Leaderboard --- */
.leaderboard-header {
    margin-bottom: 28px;
}
.leaderboard-section {
    margin-bottom: 32px;
}
.leaderboard-empty {
    min-height: 300px;
}
/* "Show more" pagination row — appears under the table only when the DB
   has more rows than are currently rendered. Removed from the DOM once
   the last batch has been appended. */
.leaderboard-more-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 0 8px;
}
.leaderboard-more-btn {
    min-width: 140px;
}
.leaderboard-more-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.leaderboard-more-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 0.88rem;
}
.leaderboard-more-status[hidden] {
    display: none;
}
/* "Only the top 100 shown" hint. Rendered pre-hidden and revealed via JS the
   moment the last "Show more" batch lands (or server-side if the initial
   render already contained the full capped list). */
.leaderboard-cap-note {
    margin: 12px 0 8px;
    padding: 12px 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.4;
}
.leaderboard-cap-note[hidden] {
    display: none;
}
.leaderboard-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(1, 128, 255, 0.12);
    border: 1px solid rgba(1, 128, 255, 0.22);
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}
.leaderboard-owner {
    display: inline-block;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.leaderboard-table-wrap {
    border-radius: var(--radius);
    --leaderboard-table-min-width: 1016px;
    max-width: 100%;
    overflow: visible;
}
.leaderboard-table-sticky {
    --leaderboard-sticky-gap: 12px;
    /* 60px desktop header-inner + 12px air. Mobile header is height:auto
       (9–10px padding + 40px wallet button + 1px border ≈ 59–61px), so the
       mask must overlap the site header — a flush 12px band leaves a 1–2px
       hole where scrolled thumbs bleed through. */
    position: sticky;
    top: 72px;
    z-index: 4;
    background: var(--bg-primary);
    overflow: visible;
}
.leaderboard-table-sticky::before {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    bottom: 100%;
    height: calc(var(--leaderboard-sticky-gap) + 8px);
    background: var(--bg-primary);
    pointer-events: none;
}
.leaderboard-table-sticky-inner {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-bottom: none;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.leaderboard-table-sticky-inner::-webkit-scrollbar {
    display: none;
}
.leaderboard-table-body-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: none;
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.leaderboard-table {
    width: 100%;
    min-width: var(--leaderboard-table-min-width);
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}
.leaderboard-col-rank { width: 72px; }
/* Rarity is wider so "Diamond · 107" / "Satoshi · 999" stay on one line */
.leaderboard-col-rarity { width: 184px; }
.leaderboard-col-utility,
.leaderboard-col-stage { width: 148px; }
.leaderboard-col-owner,
.leaderboard-col-nft { width: 140px; }
.leaderboard-table th,
.leaderboard-table td {
    padding: 16px 18px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.leaderboard-table-head th {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: inset 0 -1px 0 var(--border);
    overflow: hidden;
}
.leaderboard-sort-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}
.leaderboard-sort-link:hover {
    color: var(--text-primary);
}
.leaderboard-sort-link.is-active {
    color: var(--accent);
}
.leaderboard-sort-indicator {
    flex: 0 0 auto;
    font-size: 0.85em;
    line-height: 1;
    opacity: 0.9;
}
.leaderboard-utility-cell {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--text-primary);
}
.leaderboard-table-head th:first-child {
    border-top-left-radius: calc(var(--radius) - 1px);
}
.leaderboard-table-head th:last-child {
    border-top-right-radius: calc(var(--radius) - 1px);
}
.leaderboard-table-head th {
    border-bottom: 1px solid var(--border);
}
.leaderboard-table-body td {
    background: var(--bg-card);
}
.leaderboard-table tbody tr {
    transition: background-color var(--transition);
}
.leaderboard-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.02);
}
.leaderboard-table tbody tr:last-child td {
    border-bottom: none;
}
.leaderboard-rank-cell {
    font-weight: 700;
}
.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 14px;
    color: inherit;
    text-decoration: none;
}
.leaderboard-item:hover .leaderboard-item-name,
.leaderboard-item-name:hover {
    color: var(--accent);
}
.leaderboard-item-static {
    cursor: default;
}
a.leaderboard-thumb {
    text-decoration: none;
    color: inherit;
}
.leaderboard-thumb {
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--border);
    background: var(--bg-primary);
}
.leaderboard-thumb.rarity-hodl { border-color: var(--rarity-hodl); }
.leaderboard-thumb.rarity-whale { border-color: var(--rarity-whale); }
.leaderboard-thumb.rarity-genesis { border-color: var(--rarity-genesis); }
.leaderboard-thumb.rarity-diamond { border-color: var(--rarity-diamond); }
.leaderboard-thumb.rarity-satoshi { border-color: var(--rarity-satoshi); }
.leaderboard-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.leaderboard-item-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.leaderboard-item-name {
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    transition: color var(--transition);
}
.leaderboard-item-name-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.leaderboard-owned-label {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(74, 222, 128, 0.45);
    background: rgba(74, 222, 128, 0.12);
    color: var(--success);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    white-space: nowrap;
}
.leaderboard-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: color var(--transition), background var(--transition);
}
.leaderboard-share:hover,
.leaderboard-share:focus-visible {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
    outline: none;
}
.leaderboard-share:active {
    transform: scale(0.96);
}
.leaderboard-share:disabled {
    opacity: 0.55;
    cursor: wait;
}
.leaderboard-item-subline {
    color: var(--text-secondary);
    font-size: 0.82rem;
}
.leaderboard-owner-cell {
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    white-space: nowrap;
}
.leaderboard-address-link {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition);
}
.leaderboard-address-link:hover {
    color: var(--accent);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    :root {
        --type-h1-size: 48px;
        --type-h1-line: 48px;
        --type-h2-size: 32px;
        --type-h2-line: 38px;
        --type-h3-size: 18px;
        --type-h3-line: 26px;
        --type-text-size: 16px;
        --type-text-line: 24px;
        --type-text-sm-size: 14px;
        --type-text-sm-line: 20px;
    }

    .flash-container {
        top: calc(92px + env(safe-area-inset-top, 0px));
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(520px, calc(100vw - 24px));
    }

    .header-inner {
        height: auto;
        padding: 10px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .header-nav { display: none; }
    .header-left {
        min-width: 0;
    }
    .header-right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
    }
    .logo img {
        height: 24px;
    }
    #ton-connect {
        margin-left: 0;
        width: auto;
        max-width: min(190px, 52vw);
        min-height: 40px;
    }
    #ton-connect > *,
    #ton-connect > * > *,
    #ton-connect tc-root,
    #ton-connect tc-root > div {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    #ton-connect button,
    #ton-connect [data-tc-dropdown-button],
    #ton-connect [role="button"],
    #ton-connect tc-root button {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 40px !important;
        padding: 0 12px !important;
        gap: 6px !important;
        font-size: 0.82rem !important;
        white-space: nowrap !important;
        flex-wrap: nowrap !important;
    }
    .gemston-badge,
    .header-get-gemston { display: none; }

    .site-footer {
        position: static;
        z-index: auto;
        padding: 20px 16px calc(110px + env(safe-area-inset-bottom, 0px));
        background: var(--bg-secondary);
        border-top: 1px solid var(--border);
    }
    .mobile-sticky-cta-bar {
        display: flex;
        align-items: stretch;
        gap: 8px;
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(88px + env(safe-area-inset-bottom, 0px));
        z-index: 121;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .mobile-sticky-cta-bar.mobile-sticky-cta-hidden {
        opacity: 0;
        transform: translateY(12px);
        pointer-events: none;
    }
    .mobile-sticky-cta-bar .mobile-sticky-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        position: static;
        flex: 1 1 0;
        min-width: 0;
        min-height: 50px;
        padding: 0 12px;
        border: 0;
        border-radius: var(--radius-lg);
        background: var(--btn-blue-gradient);
        color: #fff;
        font: inherit;
        font-weight: 800;
        font-size: 0.9rem;
        overflow: hidden;
        isolation: isolate;
        -webkit-tap-highlight-color: transparent;
        text-decoration: none;
        cursor: pointer;
        box-shadow: 0 10px 30px rgba(1, 128, 255, 0.35);
        transition: box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
    }
    /* Quiet secondary — before first feed: Dress; after: Feed/Roll */
    .mobile-sticky-cta.mobile-sticky-cta--secondary {
        background: rgba(12, 12, 13, 0.92);
        color: var(--text-primary);
        border: 1px solid rgba(1, 128, 255, 0.45);
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
        font-weight: 700;
        backdrop-filter: blur(8px);
    }
    .mobile-sticky-cta,
    .mobile-sticky-cta:hover,
    .mobile-sticky-cta:active,
    .mobile-sticky-cta:focus,
    .mobile-sticky-cta:visited {
        color: #fff;
        text-decoration: none;
    }
    .mobile-sticky-cta.mobile-sticky-cta--secondary,
    .mobile-sticky-cta.mobile-sticky-cta--secondary:hover,
    .mobile-sticky-cta.mobile-sticky-cta--secondary:active,
    .mobile-sticky-cta.mobile-sticky-cta--secondary:focus,
    .mobile-sticky-cta.mobile-sticky-cta--secondary:visited {
        color: var(--text-primary);
    }
    .mobile-sticky-cta-label {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mobile-sticky-cta:active {
        box-shadow: 0 10px 30px rgba(1, 128, 255, 0.35);
        color: #fff;
    }
    .mobile-sticky-cta.mobile-sticky-cta--secondary:active {
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
        color: var(--text-primary);
        border-color: rgba(1, 128, 255, 0.65);
    }
    .mobile-sticky-cta:focus-visible {
        outline: 2px solid rgba(255, 255, 255, 0.7);
        outline-offset: 2px;
    }
    .mobile-sticky-cta.mobile-sticky-cta--secondary:focus-visible {
        outline-color: rgba(1, 128, 255, 0.7);
    }
    .mobile-sticky-cta.is-disabled,
    .mobile-sticky-cta[aria-disabled="true"] {
        opacity: 0.55;
        cursor: not-allowed;
    }
    .footer-nav {
        display: flex;
        justify-content: space-around;
        padding: 10px 0;
        background: rgba(12, 12, 13, 0.96);
        border-radius: var(--radius-lg);
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        z-index: 120;
        box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42);
        backdrop-filter: blur(8px);
        min-height: 66px;
        align-items: center;
    }
    .footer-brand { display: flex; }
    .footer-text { display: block; }

    .main-content { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
    body.has-mobile-sticky-cta .main-content { padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)); }
    body.has-mobile-sticky-cta .site-footer { padding-bottom: calc(168px + env(safe-area-inset-bottom, 0px)); }

    .explore-cards { grid-template-columns: 1fr; }
    .explore-cards-2col { grid-template-columns: 1fr; }
    .rarity-stage-grid { grid-template-columns: 1fr; }
    .rarity-stage-card-visual {
        max-width: 360px;
        margin: 0 auto;
    }
    .rarity-stage-visual-overlay {
        top: 8px;
        left: 8px;
        gap: 4px;
    }
    .rarity-stage-visual-pill {
        min-height: 30px;
    }
    .rarity-stage-visual-pill-key {
        min-height: 30px;
        padding: 0 10px;
        font-size: 0.8rem;
    }
    .rarity-stage-visual-pill-text {
        padding: 0 10px;
        font-size: 0.8rem;
    }
    .purrks-stage {
        min-height: 0;
        width: min(560px, 100%);
    }
    .purrks-core {
        width: min(360px, 100%);
    }
    .purrks-tag {
        min-height: 48px;
        border-radius: 12px;
        font-size: 1.2rem;
        padding: 0 12px 0 0;
    }
    .purrks-tag img,
    .purrks-tag-swatch {
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }
    .purrks-tag-background { left: 0; top: 142px; }
    .purrks-tag-face { left: 12%; top: 34px; }
    .purrks-tag-body { right: 0; top: 40px; }
    .purrks-tag-clothes { right: 0; top: 172px; }
    .purrks-tag-ghost {
        width: 76px;
        height: 42px;
    }
    .purrks-tag-ghost-top-left { left: 12%; top: 42px; }
    .purrks-tag-ghost-top-right { right: 18%; top: 66px; }
    .purrks-tag-ghost-bottom-left { left: 14%; top: 208px; }
    .purrks-tag-ghost-bottom-right { right: 16%; top: 204px; }
    .explore-how-grid { grid-template-columns: 1fr; }
    .explore-how-card { min-height: 392px; }
    .explore-how-visual { width: 230px; bottom: 0; }
    .explore-hero-title { font-size: var(--type-h1-size); line-height: var(--type-h1-line); }
    .hero-mosaic-wrap {
        margin-left: -20px;
        margin-right: -20px;
    }
    .hero-mosaic {
        --hero-scale: 0.63;
        --hero-gap: calc(3cqw * var(--hero-scale));
        --hero-lg: calc(43.8cqw * var(--hero-scale));
        --hero-md: calc(30cqw * var(--hero-scale));
        --hero-sm: calc(20.4cqw * var(--hero-scale));
        --hero-top-offset: calc(4.8cqw * var(--hero-scale));
    }
    .hero-mosaic-core {
        transform: translateX(calc(-0.5 * (var(--hero-top-offset) + var(--hero-bottom-offset))));
    }
    .showcase-carousel {
        --showcase-size: 180px;
    }
    .traits-grid { grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)); }

    .item-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        min-width: 0;
    }
    .item-hero {
        flex-direction: column;
        gap: 24px;
    }
    .item-media {
        position: relative;
        top: auto;
        flex: none;
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
        align-self: center;
    }
    .item-hero .item-image {
        width: 100%;
    }
    /* On-page Dress / Feed are desktop-only; mobile uses sticky CTAs + modals */
    .item-dress-actions,
    #mutation-section-host {
        display: none;
    }
    .item-details-primary {
        flex: none;
        width: 100%;
    }
    .item-below-image,
    .item-layout > .purrk-inventory,
    .item-layout > .history-section {
        grid-column: 1;
    }
    /* Extra breathing room above Wearing / roll history on stacked mobile layout */
    .item-below-image {
        margin-top: 8px;
        padding-top: 16px;
    }
    .item-layout > .history-section {
        margin-top: 8px;
        padding-top: 16px;
    }
    .feed-modal {
        padding: 0;
        align-items: stretch;
    }
    .modal-content.feed-modal-content {
        width: 100%;
        max-width: none;
        height: auto;
        max-height: 100%;
        margin: auto 0 0;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        justify-content: flex-start;
    }
    .feed-modal-header {
        padding: 14px 16px 0;
    }
    .feed-modal-body {
        padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    }
    .dresser-modal {
        padding: 0;
        align-items: stretch;
    }
    .modal-content.dresser-modal-content {
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        border-radius: 0;
        justify-content: flex-start;
    }
    .dresser-modal-header {
        padding: 10px 14px 0;
    }
    .dresser-modal-lead {
        margin-top: 4px;
    }
    .dresser-modal-body {
        grid-template-columns: minmax(0, 1fr);
        /* preview | tabs | options(fill) — keep tabs pinned; extra space stays in options */
        grid-template-rows: auto auto minmax(0, 1fr);
        align-content: start;
        align-items: stretch;
        gap: 10px;
        padding-top: 4px;
        overflow: hidden;
    }
    .dresser-preview-col {
        order: -1;
        /* Full modal width so the save hint can wrap in ~2 lines; image/button stay narrow */
        width: 100%;
        max-width: none;
        margin: 0;
        flex: none;
        align-items: center;
        gap: 8px;
    }
    .dresser-preview {
        /* Cap by viewport height so short phones keep room for the Purrk list.
           Tap expands back to the 240px inspect size. */
        width: min(240px, 26vh, 100%);
        margin-left: 0;
        transition: width 0.2s ease;
    }
    .dresser-preview.is-expanded {
        width: min(240px, 72vw, 100%);
    }
    .dresser-save-btn {
        width: min(240px, 100%);
        margin-left: 0;
    }
    .dresser-preview-expand {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: block;
        border: 0;
        padding: 0;
        background: transparent;
        cursor: zoom-in;
    }
    .dresser-preview.is-expanded .dresser-preview-expand {
        cursor: zoom-out;
    }
    .dresser-preview-expand-badge {
        position: absolute;
        right: 8px;
        bottom: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: rgba(12, 12, 13, 0.62);
        color: #fff;
        pointer-events: none;
    }
    .dresser-preview-icon-collapse {
        display: none;
    }
    .dresser-preview.is-expanded .dresser-preview-icon-expand {
        display: none;
    }
    .dresser-preview.is-expanded .dresser-preview-icon-collapse {
        display: block;
    }
    .dresser-preview-expand:focus-visible .dresser-preview-expand-badge {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }
    .dresser-save-hint,
    .dresser-status {
        width: 100%;
        max-width: none;
        margin-left: 0;
        padding: 0 2px;
        box-sizing: border-box;
    }
    .dresser-tabs {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
    }
    .dresser-tabs.is-scrollable-end {
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 72px), transparent 100%);
        mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 72px), transparent 100%);
    }
    .dresser-tabs.is-scrollable-start.is-scrollable-end {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
    }
    .dresser-tabs.is-scrollable-start:not(.is-scrollable-end) {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 72px, #000 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 72px, #000 100%);
    }
    .dresser-tab {
        width: auto;
        white-space: nowrap;
        justify-content: center;
    }
    .dresser-options {
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        align-self: stretch;
        min-height: 0;
        max-height: none;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .dresser-options.is-scrollable-end {
        -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 48px), transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 48px), transparent 100%);
    }
    .dresser-options.is-scrollable-start.is-scrollable-end {
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 calc(100% - 48px), transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 calc(100% - 48px), transparent 100%);
    }
    .dresser-options.is-scrollable-start:not(.is-scrollable-end) {
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 100%);
        mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 100%);
    }
    .dresser-save-hint {
        text-align: center;
        font-size: 0.76rem;
        line-height: 1.35;
    }
    .item-meta {
        grid-template-columns: minmax(0, 1fr);
    }
    .meta-label-tip--end .meta-tooltip {
        left: 0;
        right: auto;
    }
    .meta-label-tip--end .meta-tooltip::before {
        left: 12px;
        right: auto;
    }

    .card-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .stoncat-card {
        padding: 14px;
    }
    .stoncat-card .card-image {
        margin-bottom: 10px;
    }

    .leaderboard-table th,
    .leaderboard-table td {
        padding: 14px 12px;
    }
    /* Tight rank column: less white space between "#N" and the thumbnail. */
    .leaderboard-table th:nth-child(1),
    .leaderboard-table td:nth-child(1) {
        padding-right: 4px;
    }
    .leaderboard-table th:nth-child(2),
    .leaderboard-table td:nth-child(2) {
        padding-left: 6px;
        /* Keep Mine pill / wrapped names clear of the rarity badge */
        padding-right: 22px;
    }
    .leaderboard-table-wrap {
        /* rank 42 + stoncat 300 + rarity 168 + 2×120 + 2×110 = 970 */
        --leaderboard-table-min-width: 970px;
    }
    .leaderboard-table-sticky-inner,
    .leaderboard-table-body-wrap {
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 64px), transparent 100%);
        mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 64px), transparent 100%);
    }
    .leaderboard-table-sticky {
        --leaderboard-sticky-gap: 12px;
        top: 72px;
    }
    .leaderboard-col-stoncat { width: 300px; }
    .leaderboard-col-rarity { width: 168px; }
    .leaderboard-col-utility,
    .leaderboard-col-stage { width: 120px; }
    .leaderboard-col-owner,
    .leaderboard-col-nft { width: 110px; }
    .leaderboard-col-rank { width: 42px; }
    .leaderboard-thumb {
        width: 52px;
        height: 52px;
    }
    /* Mine pill: align to the top of the Stoncat name (not centered on the
       wrapped block) and shrink so it does not steal a whole line worth of
       vertical space when the name wraps to two lines. */
    .leaderboard-item-name-wrap {
        align-items: flex-start;
        gap: 6px;
    }
    .leaderboard-owned-label {
        /* Same proportions as item-page Mine pill; keep top-aligned with name. */
        margin-top: 2px;
    }
    .leaderboard-share {
        margin-top: 0;
    }
    .leaderboard-table-body .leaderboard-rank-cell {
        font-size: 0.92rem;
        letter-spacing: 0.01em;
    }
    .leaderboard-table-body .leaderboard-owner-cell,
    .leaderboard-table-body .leaderboard-owner-cell .leaderboard-address-link {
        font-size: 0.76rem;
    }
    .leaderboard-item-subline {
        font-size: 0.76rem;
    }

    .stats-row { flex-direction: column; }
    .stat-card { min-width: auto; }
    .purrk-accept-form {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .purrk-accept-form > div {
        grid-column: 1 / -1;
    }

    .mutation-actions #mutate-btn,
    .mutation-actions .btn-mutate {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 0.9rem;
        padding: 12px 10px;
    }
    .mutation-actions .btn-buy {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: 0.88rem;
        padding: 12px 12px;
    }
    .mutation-actions > button.btn-buy[data-buy-gemston] {
        display: none;
    }
    .feed-get-gemston {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
    }
    .feed-get-gemston > summary.btn-buy {
        font-size: 0.88rem;
        padding: 12px 12px;
        white-space: nowrap;
    }
    .feed-modal-content:has(.feed-get-gemston[open]) {
        overflow: visible;
    }
    .feed-modal-content:has(.feed-get-gemston[open]) .feed-modal-body {
        overflow: visible;
    }
    .mutation-actions #mutate-btn.btn-loading-icon-only,
    .mutation-actions .btn-mutate.btn-loading-icon-only {
        gap: 0;
    }
    .mutation-amount-row {
        flex-wrap: wrap;
        gap: 10px;
    }
    .mutation-amount-row .amount-input-wrap {
        flex: 0 0 220px;
        width: 220px;
        min-width: 0;
        max-width: 100%;
        gap: 8px;
    }
    .amount-input-wrap {
        gap: 8px;
    }
    .amount-input {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 44px;
        padding-top: 0;
        padding-bottom: 0;
    }
    .mutation-amount-row .spend-tier-hint {
        flex: 1 1 100%;
    }
    .mutation-amount-row .spend-tier-hint-row {
        justify-content: flex-start;
    }
    .amount-suffix {
        flex: 0 0 auto;
        font-size: 0.8rem;
        padding-right: 0;
    }
    .preset-btn {
        min-height: 44px;
        padding-top: 0;
        padding-bottom: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .page-title { font-size: var(--type-h1-size); line-height: var(--type-h1-line); }
}

@media (max-width: 768px) and (max-height: 720px) {
    .dresser-modal-lead {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dresser-preview {
        transition: none;
    }
}

@media (max-width: 480px) {
    :root {
        --type-h1-size: 40px;
        --type-h1-line: 42px;
        --type-h2-size: 28px;
        --type-h2-line: 34px;
    }

    .purrks-core {
        width: 100%;
    }
    .purrks-card {
        border-radius: 20px;
    }
    .purrks-cta {
        height: 54px;
        font-size: 1.2rem;
        border-radius: 14px;
    }
    .purrks-tag {
        min-height: 40px;
        font-size: 0.92rem;
        gap: 0;
        padding: 0 10px 0 0;
    }
    .purrks-tag img,
    .purrks-tag-swatch {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }
    .purrks-tag-background { top: 108px; }
    .purrks-tag-face { top: 24px; }
    .purrks-tag-body { top: 28px; }
    .purrks-tag-clothes { top: 138px; }
    .purrks-tag-ghost {
        width: 60px;
        height: 34px;
        border-radius: 10px;
    }
    .purrks-tag-ghost-top-left { top: 28px; }
    .purrks-tag-ghost-top-right { top: 46px; }
    .purrks-tag-ghost-bottom-left { top: 166px; }
    .purrks-tag-ghost-bottom-right { top: 160px; }

    .item-media {
        max-width: 420px;
    }
    .header-inner {
        padding: 9px 12px;
        gap: 10px;
    }
    .logo img {
        height: 22px;
    }
    .gemston-label { display: none; }
    .amount-input {
        flex-basis: 70%;
    }
    .amount-presets { gap: 6px; }
    .preset-btn { padding: 6px 12px; font-size: 0.8rem; }
    .leaderboard-table-wrap {
        /* rank 42 + stoncat 280 + rarity 160 + 2×110 + 2×100 = 902 */
        --leaderboard-table-min-width: 902px;
    }
    .leaderboard-col-stoncat { width: 280px; }
    .leaderboard-col-rarity { width: 160px; }
    .leaderboard-col-utility,
    .leaderboard-col-stage { width: 110px; }
    .leaderboard-col-owner,
    .leaderboard-col-nft { width: 100px; }
    .leaderboard-thumb {
        width: 56px;
        height: 56px;
    }
    .leaderboard-owner {
        font-size: 0.76rem;
    }
    .leaderboard-table-body .leaderboard-rank-cell {
        font-size: 0.86rem;
    }
    .leaderboard-table-body .leaderboard-owner-cell,
    .leaderboard-table-body .leaderboard-owner-cell .leaderboard-address-link {
        font-size: 0.72rem;
    }
}

/* --- TON Connect button overrides --- */
#ton-connect {
    display: flex;
    align-items: center;
    justify-content: flex-end !important;
}
#ton-connect > * {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    display: flex !important;
    justify-content: flex-end !important;
}
#ton-connect > * > * {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}
#ton-connect tc-root,
#ton-connect tc-root > div {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}
#ton-connect button,
#ton-connect [data-tc-dropdown-button],
#ton-connect [role="button"],
#ton-connect tc-root button {
    background: var(--btn-blue-gradient) !important;
    border: 0 !important;
    color: #fff !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    border-radius: 12px !important;
    transition: filter 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: 8px !important;
    padding: 0 16px !important;
    min-height: 40px !important;
}
#ton-connect button *,
#ton-connect [data-tc-dropdown-button] *,
#ton-connect [role="button"] *,
#ton-connect tc-root button * {
    color: inherit !important;
}
#ton-connect button svg,
#ton-connect [data-tc-dropdown-button] svg,
#ton-connect [role="button"] svg,
#ton-connect tc-root button svg {
    color: inherit !important;
    flex-shrink: 0 !important;
}
#ton-connect button svg path,
#ton-connect [data-tc-dropdown-button] svg path,
#ton-connect [role="button"] svg path,
#ton-connect tc-root button svg path {
    fill: currentColor !important;
    stroke: currentColor !important;
}
#ton-connect button:hover,
#ton-connect [data-tc-dropdown-button]:hover,
#ton-connect [role="button"]:hover {
    transform: none !important;
    filter: brightness(0.85) !important;
}

/* Connected wallet: muted so it doesn't compete with Feed / primary CTAs */
body[data-wallet-connected="1"] #ton-connect button,
body[data-wallet-connected="1"] #ton-connect [data-tc-dropdown-button],
body[data-wallet-connected="1"] #ton-connect [role="button"],
body[data-wallet-connected="1"] #ton-connect tc-root button {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-secondary) !important;
    filter: none !important;
}
body[data-wallet-connected="1"] #ton-connect button:hover,
body[data-wallet-connected="1"] #ton-connect [data-tc-dropdown-button]:hover,
body[data-wallet-connected="1"] #ton-connect [role="button"]:hover {
    border-color: var(--border-light) !important;
    color: var(--text-primary) !important;
    filter: none !important;
}

/* --- NFT badges --- */
.nft-links-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.nft-ext-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition);
}
.nft-ext-link:hover {
    color: var(--accent);
}
.nft-ext-link svg {
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity var(--transition);
}
.nft-ext-link:hover svg {
    opacity: 1;
}
.nft-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
}
.nft-pending {
    background: rgba(251, 191, 36, 0.15);
    color: var(--warning);
    border: 1px solid rgba(251, 191, 36, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.nft-pending-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(251, 191, 36, 0.25);
    border-top-color: var(--warning);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}
.card-nft-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(74, 222, 128, 0.9);
    color: #000;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.card-image {
    position: relative;
}

/* ============================================================
   Privacy / Cookies policy page
   Long-form content page. Mirrors .verify-wrap / .verify-card
   container conventions but tuned for dense reading text:
   generous line-height, section rhythm, styled lists.
   ============================================================ */
.policy-wrap {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 8px;
}
.policy-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px 44px;
}
.policy-header {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}
.policy-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: var(--type-h1-size);
    line-height: var(--type-h1-line);
    letter-spacing: -0.01em;
    margin: 0 0 6px;
    color: var(--text-primary);
}
.policy-meta {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.4;
}
.policy-section {
    margin-bottom: 28px;
}
.policy-section:last-child {
    margin-bottom: 0;
}
.policy-section h2 {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.25;
    letter-spacing: -0.005em;
    margin: 0 0 12px;
    color: var(--text-primary);
}
.policy-section h3 {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.35;
    margin: 20px 0 6px;
    color: var(--text-primary);
}
.policy-section p {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-primary);
}
.policy-section p:last-child {
    margin-bottom: 0;
}
.policy-lead {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: var(--text-primary);
}
.policy-list {
    margin: 0;
    padding-left: 20px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-primary);
}
.policy-list li {
    margin-bottom: 10px;
}
.policy-list li:last-child {
    margin-bottom: 0;
}
.policy-section code {
    font-family: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    padding: 1px 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    color: rgba(245, 246, 248, 0.92);
}
.policy-section a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
.policy-section a:hover {
    color: var(--accent-hover);
}
.policy-contact {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

@media (max-width: 640px) {
    .policy-card {
        padding: 28px 22px;
        border-radius: var(--radius-sm);
    }
    .policy-header {
        margin-bottom: 24px;
        padding-bottom: 18px;
    }
    .policy-section {
        margin-bottom: 22px;
    }
    .policy-section h2 {
        font-size: 20px;
    }
    .policy-section h3 {
        font-size: 15px;
    }
    .policy-section p,
    .policy-list {
        font-size: 14.5px;
    }
    .policy-lead {
        font-size: 15px !important;
    }
}

/* ============================================================
   Cookie Notice
   Corner-docked, notice-only (no accept/reject). Dismissal is
   persisted in localStorage — see app.js initCookieNotice().
   Kept as its own layer so it never overlaps the site header,
   sticky mobile CTA, or the mint/mutation modals.
   ============================================================ */
.cookie-notice {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 1000;
    width: 380px;
    max-width: calc(100vw - 48px);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 44px 16px 18px;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
    font-family: 'Inter', system-ui, sans-serif;
    cursor: pointer;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.28s ease, transform 0.28s ease;
    will-change: opacity, transform;
}
.cookie-notice.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.cookie-notice.is-leaving {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
}
.cookie-notice-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(245, 246, 248, 0.85);
}
.cookie-notice-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: rgba(245, 246, 248, 0.86);
}
.cookie-notice-link {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
.cookie-notice-link:hover {
    color: var(--accent-hover);
}
.cookie-notice-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: rgba(245, 246, 248, 0.6);
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
}
.cookie-notice-close:hover,
.cookie-notice-close:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    outline: none;
}
.cookie-notice-close:focus-visible {
    box-shadow: 0 0 0 2px var(--accent-glow);
}

/* Mobile: stretch full-width minus 16px gutters, sit above the
   sticky CTA bar + footer nav so both stay visible. */
@media (max-width: 560px) {
    .cookie-notice {
        left: 16px;
        right: 16px;
        bottom: 16px;
        width: auto;
        max-width: none;
        padding: 14px 40px 14px 14px;
        gap: 12px;
        border-radius: 18px;
    }
    body.has-mobile-sticky-cta .cookie-notice {
        bottom: calc(150px + env(safe-area-inset-bottom, 0px));
    }
    .cookie-notice-icon {
        width: 28px;
        height: 28px;
    }
    .cookie-notice-text {
        font-size: 13.5px;
    }
}

/* Respect prefers-reduced-motion: skip the slide/fade transition. */
@media (prefers-reduced-motion: reduce) {
    .cookie-notice {
        transition: opacity 0.15s ease;
        transform: none;
    }
    .cookie-notice.is-leaving {
        transform: none;
    }
}

/* ================================================================
   Purrks codex (/purrks) — catalog preview
   ================================================================ */
.codex-page {
    --codex-tier-standard: #8b8fa3;
    --codex-tier-premium: #4ade80;
    --codex-tier-elite: #60a5fa;
    --codex-tier-mythic: #fbbf24;
    max-width: 960px;
    margin: 0 auto;
    padding: 28px 20px 64px;
}
.codex-hero {
    margin-bottom: 28px;
}
.codex-eyebrow {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.codex-title {
    margin: 0 0 12px;
    font-size: clamp(36px, 6vw, 52px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.codex-lead {
    margin: 0;
    max-width: 42rem;
    color: var(--text-secondary);
    font-size: var(--type-text-sm-size);
    line-height: 1.55;
}
.codex-lead strong {
    color: var(--text-primary);
    font-weight: 600;
}
.codex-help-link {
    display: inline;
    font-weight: 600;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}
.codex-help-link:hover {
    color: var(--accent-hover);
}
.codex-stages {
    margin-bottom: 28px;
    padding: 20px 0 24px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.codex-stages-title {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
}
.codex-stages-text {
    margin: 0 0 18px;
    max-width: 40rem;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-secondary);
}
.codex-stages-text strong {
    color: var(--text-primary);
    font-weight: 600;
}
.codex-timeline {
    list-style: none;
    margin: 0;
    padding: 8px 0 0;
    display: flex;
    align-items: flex-start;
    gap: 0;
}
.codex-timeline-step {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 8px;
    padding: 0 16px 0 0;
}
.codex-timeline-step:last-child {
    padding-right: 0;
}
.codex-timeline-step:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 12px;
    right: 0;
    height: 2px;
    background: var(--border-light);
}
.codex-timeline-dot {
    position: relative;
    z-index: 1;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bg-primary);
    border: 2px solid var(--accent);
    box-shadow: 0 0 0 3px var(--bg-primary);
}
.codex-timeline-name {
    font-family: 'Manrope', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
}
.codex-timeline-meta {
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--text-muted);
}
.codex-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 36px;
    position: sticky;
    top: 64px;
    z-index: 5;
    padding: 10px 0;
    background: linear-gradient(to bottom, var(--bg-primary) 70%, transparent);
}
.codex-jump-link {
    display: inline-flex;
    align-items: center;
    padding: 6px 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-secondary);
}
.codex-jump-link:hover {
    color: var(--text-primary);
    border-color: var(--border-light);
    background: var(--bg-card);
}
.codex-trait {
    margin-bottom: 40px;
    scroll-margin-top: 120px;
}
.codex-trait-head {
    margin-bottom: 14px;
}
.codex-trait-title {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.codex-trait-note {
    margin: 8px 0 0;
    max-width: 42rem;
    color: var(--text-secondary);
    font-size: var(--type-small-size, 0.9rem);
    line-height: 1.45;
}
.codex-trait-note strong {
    color: var(--text-primary);
    font-weight: 700;
}
.codex-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 12px;
}
.codex-option {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    overflow: hidden;
}
.codex-option--mythic {
    border-color: color-mix(in srgb, var(--codex-tier-mythic) 35%, var(--border));
}
.codex-option-preview {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: zoom-in;
    color: inherit;
    font: inherit;
    background: var(--purrk-swatch, #e8e4dc);
    transition: background-color 0.15s ease, filter 0.15s ease;
}
.codex-option-preview:hover,
.codex-option-preview:focus-visible {
    background: #f2efe6;
    filter: brightness(1.02);
}
.codex-option-preview:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}
.codex-option-preview img {
    width: 78%;
    height: 78%;
    object-fit: contain;
    image-rendering: auto;
    pointer-events: none;
}
.modal-content-purrk-zoom {
    max-width: min(560px, calc(100vw - 32px));
}
.purrk-zoom-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-top: 4px;
}
.purrk-zoom-body img {
    width: min(420px, 100%);
    aspect-ratio: 1;
    object-fit: contain;
    background:
        radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.04), transparent 55%),
        #141516;
    border-radius: var(--radius-sm);
}
.purrk-zoom-caption {
    margin: 0;
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--type-small-size, 0.9rem);
    line-height: 1.35;
}
.codex-option-body {
    padding: 10px 11px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.codex-option-name {
    margin: 0;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
}
.codex-option-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.codex-pill {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.35;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}
.codex-pill--kind {
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid var(--border-light);
    background: var(--bg-card);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-secondary);
    vertical-align: middle;
}
.codex-pill--standard { color: var(--codex-tier-standard); }
.codex-pill--premium  { color: var(--codex-tier-premium); }
.codex-pill--elite    { color: var(--codex-tier-elite); }
.codex-pill--mythic   { color: var(--codex-tier-mythic); }
.codex-option-stage {
    margin: 0;
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.3;
}

@media (max-width: 720px) {
    .codex-timeline {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .codex-timeline::-webkit-scrollbar { display: none; }
    .codex-timeline-step {
        flex: 0 0 96px;
    }
    .codex-jump {
        top: 56px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-left: -4px;
        margin-right: -4px;
        padding-left: 4px;
        padding-right: 4px;
    }
    .codex-jump::-webkit-scrollbar { display: none; }
    .codex-jump-link { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
    .codex-trait { scroll-margin-top: 100px; }
}

/* Live activity toasts — ephemeral FOMO pings */
.live-toast-root {
    position: fixed;
    top: calc(60px + env(safe-area-inset-top, 0px) + 8px);
    right: 10px;
    bottom: auto;
    left: auto;
    z-index: 90;
    width: min(300px, calc(100vw - 20px));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    pointer-events: none;
}
.live-toast-root[hidden] { display: none; }
.live-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(1, 128, 255, 0.35);
    border-radius: 14px;
    background: rgba(12, 12, 13, 0.94);
    color: inherit;
    text-decoration: none;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateX(18px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.live-toast.is-visible {
    opacity: 1;
    transform: translateX(0);
}
.live-toast.is-leaving {
    opacity: 0;
    transform: translateX(14px);
}
.live-toast:hover {
    border-color: rgba(1, 128, 255, 0.55);
    background: rgba(29, 30, 32, 0.98);
}
.live-toast-thumb {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-card);
}
.live-toast-thumb--item {
    background: var(--purrk-swatch, #e8e4dc);
}
.live-toast-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.live-toast-thumb--item img {
    object-fit: contain;
}
.live-toast-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.live-toast-chip {
    align-self: flex-start;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(1, 128, 255, 0.16);
    color: var(--accent-hover);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.live-toast-text {
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--text-secondary);
}
.live-toast-name { color: var(--text-primary); }
.live-toast-item {
    color: var(--text-primary);
    font-weight: 800;
}
.live-toast-run {
    color: var(--text-muted);
    font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
    .live-toast {
        transition: opacity 0.15s ease;
        transform: none;
    }
    .live-toast.is-visible,
    .live-toast.is-leaving { transform: none; }
}
@media (min-width: 769px) {
    .live-toast-root {
        top: auto;
        right: 16px;
        bottom: 24px;
        width: 320px;
        flex-direction: column-reverse; /* newest closest to bottom edge */
    }
}