/* ============================================
   Pre-Mint standalone landing page styles.
   Reuses the underwater palette via base.css :root vars; everything
   else is scoped to .premint-* so it cannot collide with /app's CSS.
   ============================================ */

:root {
    color-scheme: dark;
}

* { box-sizing: border-box; }

body.premint-body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body, 'Nunito', sans-serif);
    color: var(--text-main, #ffffff);
    background:
        radial-gradient(ellipse at 20% -10%, rgba(127, 234, 245, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 110%, rgba(255, 138, 108, 0.08) 0%, transparent 55%),
        linear-gradient(180deg, var(--bg-gradient-1, #0a2640) 0%, var(--bg-dark, #051828) 100%);
    overflow-x: hidden;
}

.premint-backdrop {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.premint-bubbles::before,
.premint-bubbles::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 12% 78%, rgba(255, 255, 255, 0.18) 1px, transparent 1.5px),
        radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.12) 1px, transparent 1.5px),
        radial-gradient(circle at 71% 65%, rgba(255, 255, 255, 0.16) 1px, transparent 1.5px),
        radial-gradient(circle at 88% 30%, rgba(255, 255, 255, 0.10) 1px, transparent 1.5px),
        radial-gradient(circle at 45% 90%, rgba(255, 255, 255, 0.14) 1px, transparent 1.5px);
    background-size: 100% 100%;
    animation: premint-bubble-drift 24s linear infinite;
    opacity: 0.6;
}

.premint-bubbles::after {
    animation-duration: 36s;
    opacity: 0.4;
    background-size: 80% 80%;
    background-position: 50% 50%;
}

@keyframes premint-bubble-drift {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-120vh); }
}

/* ============ Header ============ */
.premint-header {
    position: relative;
    z-index: 2;
    display: grid;
    /* 1fr | auto | 1fr — left and right columns flex equally so the middle
       column (the view-switcher) is anchored to the viewport's true center
       regardless of how wide the wallet/My-Salmon buttons get. */
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 18px 36px;
}

.premint-header > .premint-logo { justify-self: start; }
.premint-header > .premint-view-tabs { justify-self: center; }
.premint-header > .premint-header-actions { justify-self: end; }

.premint-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-main, #fff);
    text-decoration: none;
    font-family: var(--font-display, 'Lilita One');
    font-size: 22px;
    letter-spacing: 0.5px;
}

.premint-logo img { border-radius: 8px; }

.premint-connect-btn {
    background: linear-gradient(135deg, var(--green-main, #2dd4e9), var(--green-dark, #0e9bb1));
    color: #051828;
    border: none;
    border-radius: 12px;
    padding: 10px 18px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 4px 20px rgba(45, 212, 233, 0.25);
}

.premint-connect-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(45, 212, 233, 0.4); }
.premint-connect-btn.is-connected {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-main);
    box-shadow: none;
    font-family: 'JetBrains Mono', monospace;
}

/* ============ Main ============ */
.premint-main {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 36px 80px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

.premint-hero {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}

.premint-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--pink-main, #ff8a6c);
    margin-bottom: 20px;
}

/* Editorial-style flanking lines — replaces the rounded badge so the
   eyebrow reads like a magazine kicker rather than a UI pill/chip. */
.premint-eyebrow::before,
.premint-eyebrow::after {
    content: '';
    display: inline-block;
    width: 32px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 138, 108, 0.7));
}

.premint-eyebrow::after {
    background: linear-gradient(90deg, rgba(255, 138, 108, 0.7), transparent);
}

.premint-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(40px, 6vw, 72px);
    line-height: 1.05;
    margin: 0 0 20px;
    background: linear-gradient(135deg, #fff 0%, #b3f2fa 60%, #2dd4e9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.premint-tagline {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-muted, rgba(255, 255, 255, 0.75));
    margin: 0;
}

/* ============ Mint card (rotator + controls) ============ */
.premint-card {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 32px;
    background: linear-gradient(165deg, rgba(14, 38, 56, 0.85) 0%, rgba(5, 24, 40, 0.92) 100%);
    border: 1px solid rgba(127, 234, 245, 0.18);
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.premint-rotator-card {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 18px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 360px;
    position: relative;
    overflow: hidden;
}

.salmon-rotator {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 320px;
    margin: 0 auto;
}

.salmon-rotator-slot {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.salmon-rotator-slot.is-active { opacity: 1; }

.salmon-rotator-slot svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.4));
}

.rotator-caption {
    margin-top: 18px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.rotator-caption #rotatorClassName {
    color: var(--green-light, #7feaf5);
    font-weight: 700;
    transition: opacity 0.2s ease;
}

.rotator-caption-sep {
    display: inline-block;
    margin: 0 8px;
    opacity: 0.4;
}

/* ============ Quantity stepper ============ */
.premint-controls {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.premint-quantity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.premint-quantity-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dim, rgba(255, 255, 255, 0.5));
    font-weight: 700;
}

.premint-quantity-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.premint-qty-btn {
    background: transparent;
    border: none;
    color: var(--text-main);
    font-size: 18px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.premint-qty-btn:hover { background: rgba(255, 255, 255, 0.06); }

#premintQuantity {
    width: 56px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text-main);
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    -moz-appearance: textfield;
}

#premintQuantity::-webkit-outer-spin-button,
#premintQuantity::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.premint-quantity-hint {
    font-size: 11px;
    color: var(--text-dim);
}

/* ============ Currency options ============ */
.premint-options {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.premint-option {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.15));
    color: var(--text-main);
    text-align: left;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
}

.premint-option:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: rgba(127, 234, 245, 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.premint-option:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Mint-in-flight state. Adds a subtle pulse + spinner so the user knows
   the wallet popup is doing something. is-loading is added in JS the
   moment we await the mint tx and removed in finally. */
.premint-option.is-loading {
    cursor: progress;
    pointer-events: none;
    position: relative;
    animation: premint-option-pulse 1.6s ease-in-out infinite;
}

.premint-option.is-loading::after {
    content: '';
    position: absolute;
    top: 14px;
    right: 14px;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(127, 234, 245, 0.25);
    border-top-color: rgba(127, 234, 245, 0.95);
    border-radius: 50%;
    animation: premint-spinner 0.7s linear infinite;
}

@keyframes premint-option-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(127, 234, 245, 0.0); }
    50%      { box-shadow: 0 0 0 4px rgba(127, 234, 245, 0.18); }
}

@keyframes premint-spinner {
    to { transform: rotate(360deg); }
}

/* Visible focus rings on every form input and button. The base
   declarations clear `outline` for cosmetic reasons; restore it for
   keyboard users so the page passes WCAG 2.4.7. */
.premint-option:focus-visible,
.premint-connect-btn:focus-visible,
.premint-share-btn:focus-visible,
.premint-nav-btn:focus-visible,
.premint-network-banner-btn:focus-visible,
.form-input:focus-visible,
input[type="number"]#premintQuantity:focus-visible {
    outline: 2px solid #7feaf5;
    outline-offset: 2px;
}

/* Inline subtitle that explains why a mint button is disabled (Connect
   Wallet, Sold out, Wrong network, etc). Hidden when the button is live. */
/* Wrong-network banner — appears at the top of the premint card when the
   connected wallet is on the wrong chain. Click the inline button to
   trigger the wallet's chain-switch flow. */
.premint-network-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 18px;
    padding: 12px 16px;
    background: rgba(255, 138, 108, 0.12);
    border: 1px solid rgba(255, 138, 108, 0.4);
    border-radius: 12px;
    color: rgba(255, 213, 175, 0.95);
    font-size: 14px;
}
/* The default [hidden] = display:none is overridden by the flex rule above,
   so the banner stays visible after a chain switch even when the JS sets
   .hidden = true. Restore the hide. */
.premint-network-banner[hidden] {
    display: none;
}

.premint-network-banner-msg strong {
    color: #fff;
    font-weight: 700;
}

.premint-network-banner-btn {
    appearance: none;
    background: linear-gradient(135deg, #ff8a6c 0%, #ffb168 100%);
    color: #1a0d08;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.premint-network-banner-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(255, 138, 108, 0.4);
}

.premint-network-banner-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.premint-option-disabled-reason {
    margin-top: 10px;
    padding: 6px 10px;
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 213, 175, 0.95);
    background: rgba(255, 138, 108, 0.12);
    border: 1px solid rgba(255, 138, 108, 0.28);
    border-radius: 8px;
}

.premint-option.bands:hover:not(:disabled) {
    border-color: rgba(255, 138, 108, 0.4);
}

.premint-option-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
}

.premint-option-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.premint-option-titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.premint-option-label {
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 0.5px;
}

.premint-option-price {
    font-size: 12px;
    color: var(--text-muted);
}

.premint-option-total {
    text-align: right;
    display: flex;
    flex-direction: column;
}

.premint-option-total-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dim);
}

.premint-option-total-value {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--green-light);
}

/* ============ Per-currency supply bar ============ */
.premint-option-supply {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.premint-supply-bar {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 999px;
    overflow: hidden;
}

.premint-supply-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--green-main, #2dd4e9), var(--green-light, #7feaf5));
    border-radius: 999px;
    transition: width 0.4s var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1));
}

.premint-option.bands .premint-supply-fill {
    background: linear-gradient(90deg, var(--pink-main, #ff8a6c), var(--pink-light, #ffc4ad));
}

.premint-supply-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.premint-disclaimer {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-dim);
    margin: 0;
}

/* ============ Footer ============ */
.premint-footer {
    position: relative;
    z-index: 2;
    padding: 24px 36px 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    color: var(--text-dim);
    font-size: 12px;
}

.premint-footer a {
    color: var(--green-light);
    text-decoration: none;
}

.premint-footer a:hover { text-decoration: underline; }

.premint-footer-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ============ Rarity distribution row ============ */
.rarity-distribution {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px dashed rgba(255, 255, 255, 0.06);
}

.rarity-distribution-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dim, rgba(255, 255, 255, 0.5));
    font-weight: 700;
    margin-right: 6px;
}

.rarity-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border: 1px solid;
    border-radius: 999px;
    font-family: var(--font-display, 'Lilita One');
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.4;
}

.rarity-pill[data-tier="legendary"] { color: #ffa157; border-color: rgba(255, 161, 87, 0.45); background: rgba(255, 161, 87, 0.08); }
.rarity-pill[data-tier="epic"]      { color: #a86bff; border-color: rgba(168, 107, 255, 0.45); background: rgba(168, 107, 255, 0.08); }
.rarity-pill[data-tier="rare"]      { color: #5fa8d6; border-color: rgba(95, 168, 214, 0.45); background: rgba(95, 168, 214, 0.08); }
/* Brighter Common pill — #b8c0c8 on the dark card was failing WCAG AA. */
.rarity-pill[data-tier="common"]    { color: #e3e8ee; border-color: rgba(227, 232, 238, 0.4);  background: rgba(227, 232, 238, 0.10); }

/* ============ View switcher (Mint / Marketplace) ============ */
.premint-view-tabs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-subtle, rgba(45, 212, 233, 0.14));
    border-radius: 12px;
}

.premint-view-tab {
    background: transparent;
    border: none;
    color: var(--text-muted, rgba(255, 255, 255, 0.75));
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 8px 18px;
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.premint-view-tab:hover { color: var(--text-main); }

.premint-view-tab.is-active {
    background: linear-gradient(135deg, rgba(45, 212, 233, 0.18), rgba(95, 168, 214, 0.12));
    color: var(--text-main);
    box-shadow: inset 0 0 0 1px rgba(127, 234, 245, 0.35);
}

/* Each section is hidden until its tab is selected. */
.premint-view { display: none; }
.premint-view.is-active { display: block; }

/* The mint view used to be the only child of .premint-main and inherited
   its 40px grid gap between hero and card. Restore that gap inside the
   wrapper. The marketplace view manages its own internal spacing (toolbar,
   filters, grid) via marketplace.css and doesn't want this gap. */
[data-premint-view="mint"].is-active {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* ============ Marketplace section header inside premint ============ */
.premint-marketplace-header {
    text-align: center;
    margin-bottom: 24px;
}

.premint-marketplace-header h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 42px);
    margin: 0 0 6px;
    background: linear-gradient(135deg, #fff 0%, #b3f2fa 60%, #2dd4e9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.premint-marketplace-header p {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
}

/* "List a Salmon" CTA. On desktop it floats to the right of the toolbar
   row visually; on mobile it stretches full-width so it doesn't look
   like a stranded right-aligned button on its own line. */
.premint-marketplace-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}

@media (max-width: 720px) {
    .premint-marketplace-header {
        margin-bottom: 16px;
    }
    .premint-marketplace-actions {
        justify-content: stretch;
    }
    .premint-marketplace-actions .btn {
        flex: 1;
    }
}

/* ============ Toast (used by ported marketplace module) ============ */
.premint-toast-host {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.premint-toast {
    pointer-events: auto;
    min-width: 240px;
    max-width: 360px;
    padding: 12px 16px;
    background: rgba(14, 38, 56, 0.95);
    border: 1px solid var(--border-subtle, rgba(45, 212, 233, 0.14));
    border-left: 3px solid var(--green-main, #2dd4e9);
    border-radius: 10px;
    color: var(--text-main);
    font-size: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.premint-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.premint-toast-success { border-left-color: var(--green-main, #2dd4e9); }
.premint-toast-error   { border-left-color: #ff6b6b; }
.premint-toast-warning { border-left-color: var(--pink-main, #ff8a6c); }

/* ============ Header actions + secondary nav button ============ */
.premint-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.premint-nav-btn {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-main);
    border: 1px solid var(--border-subtle, rgba(45, 212, 233, 0.14));
    border-radius: 12px;
    padding: 10px 16px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.premint-nav-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(127, 234, 245, 0.45);
}

.premint-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--green-main, #2dd4e9), var(--green-dark, #0e9bb1));
    color: #051828;
    font-size: 11px;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
}

/* ============ Wallet menu (balances + disconnect) ============ */
.premint-wallet-menu {
    position: absolute;
    z-index: 1500;
    min-width: 240px;
    padding: 14px;
    background: linear-gradient(165deg, rgba(14, 38, 56, 0.98) 0%, rgba(5, 24, 40, 0.99) 100%);
    border: 1px solid rgba(127, 234, 245, 0.25);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    color: var(--text-main);
    font-family: var(--font-body);
}

.premint-wallet-menu[hidden] { display: none; }

.premint-wallet-menu-addr {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-dim);
    word-break: break-all;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-subtle, rgba(45, 212, 233, 0.14));
}

.premint-wallet-menu-balances {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.premint-wallet-balance {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}

.premint-wallet-balance-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 11px;
    font-weight: 700;
}

.premint-wallet-balance-value {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--green-light);
}

.premint-wallet-menu-disconnect {
    width: 100%;
    padding: 9px 12px;
    background: rgba(255, 107, 107, 0.10);
    border: 1px solid rgba(255, 107, 107, 0.35);
    border-radius: 10px;
    color: #ff6b6b;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.premint-wallet-menu-disconnect:hover {
    background: rgba(255, 107, 107, 0.18);
}

/* ============ Modals (My Salmon + reveal) ============ */
.premint-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.premint-modal[data-state="open"] { display: flex; }

.premint-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
}

.premint-modal-card {
    position: relative;
    width: 100%;
    max-width: 720px;
    max-height: 86vh;
    background: linear-gradient(165deg, rgba(14, 38, 56, 0.97) 0%, rgba(5, 24, 40, 0.99) 100%);
    border: 1px solid rgba(127, 234, 245, 0.25);
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.premint-modal-card-reveal {
    border-color: rgba(255, 138, 108, 0.4);
}

.premint-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-subtle, rgba(45, 212, 233, 0.14));
}

.premint-modal-header h3 {
    font-family: var(--font-display);
    font-size: 22px;
    margin: 0;
    color: var(--text-main);
}

.premint-modal-card-reveal .premint-modal-header h3 {
    background: linear-gradient(135deg, #fff 0%, var(--pink-light, #ffc4ad) 60%, var(--pink-main, #ff8a6c) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.premint-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.premint-modal-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-main);
}

.premint-modal-body {
    padding: 20px 22px;
    overflow-y: auto;
}

.premint-reveal-subtitle {
    margin: 0 0 16px;
    color: var(--text-muted);
    font-size: 14px;
}

.premint-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--border-subtle, rgba(45, 212, 233, 0.14));
    flex-wrap: wrap;
}

.premint-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #000;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    padding: 10px 16px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.premint-share-btn:hover {
    background: #1a1a1a;
    transform: translateY(-1px);
}

.premint-share-btn svg { display: block; }

.premint-modal-empty {
    grid-column: 1 / -1;
    padding: 40px 20px;
    text-align: center;
    color: var(--text-dim);
    font-size: 14px;
}

/* ============ Salmon card grid (used inside both modals) ============ */
.premint-salmon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}

.premint-salmon-card {
    background: linear-gradient(165deg,
        rgba(14, 38, 56, 0.95) 0%,
        rgba(5, 24, 40, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.premint-salmon-card.is-clickable {
    cursor: pointer;
}

.premint-salmon-card.is-clickable:hover,
.premint-salmon-card.is-clickable:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(127, 234, 245, 0.35);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    outline: none;
}

/* ───── Salmon art lightbox ───── */
/* The lightbox is opened from BOTH the My Salmons modal and the post-mint
   Reveal modal, so it has to paint above other open modals. Bump above
   the default .premint-modal z-index (1000). */
.premint-lightbox {
    z-index: 1200;
}

.premint-lightbox-card {
    max-width: 560px;
    width: 92vw;
    padding: 24px 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    /* Override the parent .premint-modal-card overflow:hidden — when the
       art + meta + button exceed max-height: 86vh on shorter viewports,
       hidden clips the bottom padding away and the button ends up flush
       against the border. Allowing scroll keeps the padding intact. */
    overflow-y: auto;
}

.premint-lightbox-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
}

.premint-lightbox-art {
    /* Width capped so aspect-ratio: 1/1 stays square AND fits within
       max-height: 86vh alongside the meta block + Download PNG button.
       Reduced from 60vh to 48vh to leave headroom for the chrome below
       — was clipping the button's bottom padding on shorter viewports. */
    width: min(100%, 48vh);
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    flex: none;
    /* #0a1828 — same dark navy used by every other salmon art frame, the
       backend PNG renderer, and the canvas-blob download, so a salmon
       looks identical in-app, when downloaded, and on marketplaces that
       scrape the OG image. */
    background: #0a1828;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.premint-lightbox-art svg,
.premint-lightbox-art-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.premint-lightbox-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}

.premint-lightbox-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.premint-lightbox-token {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.92);
}

.premint-lightbox-class {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.78);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.premint-lightbox-class-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex: none;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.25);
    padding: 2px;
}

.premint-lightbox-actions {
    display: flex;
    justify-content: stretch;
    margin-top: 4px;
}

.premint-lightbox-actions .premint-share-btn {
    flex: 1;
    justify-content: center;
    padding: 12px 16px;
}

.premint-lightbox-actions .premint-share-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.premint-salmon-art {
    aspect-ratio: 1 / 1;
    background: #0a1828;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.premint-salmon-art svg {
    width: 130%;
    height: 130%;
    object-fit: contain;
}

/* Backend-rendered PNG (used by My Salmon + Reveal cards). 100% because
   the backend canvas already fills tightly, unlike the SVG composition
   which had padding inside its viewBox. */
.premint-salmon-art-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #0a1828;
}

/* When the backend /image/<id> request fails (eg. brand-new token before
   the RPC catches up), the salmon-retry-img helper in premint.js retries
   on a backoff. Hide the browser's broken-image icon during retries —
   parent containers all have a dark bg so the user sees a clean dark
   square instead of the broken glyph. */
.salmon-retry-img.is-broken { visibility: hidden; }

.premint-salmon-placeholder {
    width: 60%;
    height: 60%;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    animation: premint-art-pulse 2s ease-in-out infinite;
}

@keyframes premint-art-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}

.premint-salmon-meta {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.premint-salmon-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.premint-salmon-token {
    font-family: var(--font-display);
    font-size: 14px;
    color: var(--text-main);
    letter-spacing: 0.5px;
}

.premint-salmon-rarity {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-dim);
}

.premint-salmon-class {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.premint-salmon-class-logo {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex: none;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.25);
    padding: 1px;
}

/* Faction row — small logo + faction name shown directly under the class
   line. Dimmer than the class label so the eye reads class first. Reused
   across the salmon card grid AND the lightbox. */
.premint-salmon-faction {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
}

.premint-salmon-faction-logo {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex: none;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.25);
    padding: 1px;
}

.premint-salmon-stats {
    display: flex;
    gap: 12px;
    padding-top: 4px;
    color: var(--text-muted);
    font-size: 13px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
}

.premint-salmon-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Force consistent icon dimensions — emoji glyphs (⚔ vs ⌛) have different
   intrinsic heights at the same font-size, which made stat rows look
   slightly misaligned. Fixed-box renders them at uniform visual size. */
.premint-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    font-size: 12px;
    line-height: 1;
    opacity: 0.75;
}

/* ============ Responsive ============ */
@media (max-width: 880px) {
    .premint-card {
        grid-template-columns: 1fr;
        padding: 20px;
    }
    .premint-rotator-card { min-height: 280px; }
    .premint-main { padding: 24px 20px 60px; }
    .premint-header { padding: 14px 20px; }
}

/* Tablet → small-mobile: drop the centered-nav 3-col grid since the 1fr
   side columns can't stay wide enough to keep the tabs visually central
   AND make room for the wallet button. Switch to a 2-row layout: logo +
   actions on top, full-width tab pill below. */
@media (max-width: 720px) {
    .premint-header {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "logo  actions"
            "tabs  tabs";
        gap: 12px;
        padding: 12px 16px;
    }
    .premint-header > .premint-logo         { grid-area: logo; }
    .premint-header > .premint-header-actions { grid-area: actions; justify-self: end; }
    .premint-header > .premint-view-tabs    { grid-area: tabs; justify-self: stretch; }

    /* Stretch tabs to fill the row, equal thirds. */
    .premint-view-tabs { display: grid; grid-template-columns: 1fr 1fr 1fr; }
    .premint-view-tab  { text-align: center; padding: 8px 12px; font-size: 13px; }

    /* Trim action buttons so both fit on the same line on phones. */
    .premint-header-actions { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
    .premint-nav-btn,
    .premint-connect-btn {
        padding: 8px 12px;
        font-size: 12px;
    }
    .premint-logo { font-size: 18px; }
    .premint-logo img { width: 32px; height: 32px; }

    /* Reveal-modal footer: at narrow widths the third button wraps but stays
       right-aligned, leaving an awkward orphan. Stack vertically with full-
       width buttons so the layout reads cleanly on phones. */
    .premint-modal-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 12px 16px;
    }
    .premint-modal-footer > button {
        width: 100%;
        justify-content: center;
    }

    /* Reveal modal: tighten paddings + cap the art so the whole card +
       footer fits in the viewport without internal scrolling on phones. */
    .premint-modal-card-reveal .premint-modal-header { padding: 14px 16px; }
    .premint-modal-card-reveal .premint-modal-header h3 { font-size: 18px; }
    .premint-modal-card-reveal .premint-modal-body { padding: 12px 16px; }
    .premint-modal-card-reveal .premint-reveal-subtitle { margin: 0 0 10px; font-size: 13px; }
    .premint-modal-card-reveal .premint-salmon-art {
        aspect-ratio: auto;
        height: 36vh;
        max-height: 320px;
    }
}

/* Very small phones: hide the "River Run" wordmark next to the logo image
   and contract the My Salmon label to "Salmon" so the top row stays on one
   line down to ~360px viewports. */
@media (max-width: 460px) {
    .premint-logo span { display: none; }
    .premint-nav-btn  { padding: 7px 10px; font-size: 11px; gap: 4px; }
    .premint-connect-btn { padding: 7px 12px; font-size: 11px; }
    .premint-view-tab { padding: 7px 10px; font-size: 12px; letter-spacing: 0.5px; }
    .premint-header { padding: 10px 12px; }

    /* Shrink the inventory badge so it doesn't push the "Salmon" label
       off the button or wrap into a second line. */
    .premint-nav-badge {
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        font-size: 10px;
    }
}

/* ============ Info view ============ */
[data-premint-view="info"].is-active {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 880px;
    margin: 0 auto;
    padding: 8px 4px 60px;
}

.info-intro {
    text-align: center;
    padding: 12px 0 4px;
}

.info-intro h2 {
    font-family: var(--font-display);
    font-size: 36px;
    line-height: 1.05;
    color: #fff;
    margin: 8px 0 14px;
}

.info-intro-lede {
    color: var(--text-dim);
    font-size: 15px;
    line-height: 1.6;
    max-width: 640px;
    margin: 0 auto;
}

.info-section {
    background: linear-gradient(165deg, rgba(14, 38, 56, 0.6) 0%, rgba(5, 24, 40, 0.7) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 22px 24px;
}

.info-section h3 {
    font-family: var(--font-display);
    font-size: 22px;
    color: #fff;
    margin: 0 0 6px;
}

.info-section-lede {
    color: var(--text-dim);
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 16px;
}

.info-section-footnote {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--text-dim);
    font-style: italic;
}

/* Three-stat grid (BP / TP / SPD). Auto-fit so it gracefully drops to 2
   columns then 1 column on narrower viewports. */
.info-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 14px;
}

.info-stat-card {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(127, 234, 245, 0.18);
    border-radius: 12px;
    padding: 16px;
}

.info-stat-icon {
    font-size: 24px;
    margin-bottom: 4px;
}

.info-stat-name {
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
    font-size: 15px;
}

.info-stat-card p {
    margin: 0;
    color: var(--text-dim);
    font-size: 13px;
    line-height: 1.55;
}

/* 8-class grid */
.info-class-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.info-class {
    display: flex;
    gap: 12px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 12px 14px;
}

.info-class-emoji {
    font-size: 28px;
    line-height: 1;
}

.info-class-art {
    width: 56px;
    height: 56px;
    flex: none;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
    padding: 4px;
}

.info-faction-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #fff;
}

.info-faction-art {
    width: 28px;
    height: 28px;
    flex: none;
    object-fit: contain;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.25);
    padding: 2px;
}

.info-class-name {
    font-weight: 700;
    color: #fff;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.info-class-bonus {
    color: #7feaf5;
    font-size: 12px;
    font-weight: 600;
    margin: 2px 0 6px;
}

.info-class p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-dim);
}

/* Rarity row */
.info-rarity-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.info-rarity {
    text-align: center;
    border-radius: 10px;
    padding: 12px 8px;
    border: 1px solid;
}

.info-rarity[data-tier="legendary"] { color: #ffd93d; border-color: rgba(255, 217, 61, 0.4); background: rgba(255, 217, 61, 0.06); }
.info-rarity[data-tier="epic"]      { color: #ff6bcd; border-color: rgba(255, 107, 205, 0.4); background: rgba(255, 107, 205, 0.06); }
.info-rarity[data-tier="rare"]      { color: #6bcfff; border-color: rgba(107, 207, 255, 0.4); background: rgba(107, 207, 255, 0.06); }
.info-rarity[data-tier="common"]    { color: #e3e8ee; border-color: rgba(227, 232, 238, 0.4); background: rgba(227, 232, 238, 0.06); }

.info-rarity-name {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.info-rarity-mult {
    font-family: var(--font-display);
    font-size: 22px;
    margin: 4px 0 2px;
    color: #fff;
}

.info-rarity-rate {
    font-size: 11px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Faction matchups table */
.info-faction-table-wrap {
    overflow-x: auto;
}

.info-faction-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--text-main);
}

.info-faction-table th,
.info-faction-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.info-faction-table th {
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.06em;
}

.info-faction-table tbody tr:hover {
    background: rgba(127, 234, 245, 0.04);
}

/* Synergies */
.info-synergy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.info-synergy {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 14px;
}

.info-synergy-name {
    font-weight: 700;
    color: #fff;
    font-size: 14px;
}

.info-synergy-bonus {
    color: #7feaf5;
    font-size: 12px;
    font-weight: 600;
    margin: 4px 0 8px;
}

.info-synergy p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-dim);
}

.info-section-cta {
    text-align: center;
    background: linear-gradient(165deg, rgba(255, 138, 108, 0.1) 0%, rgba(127, 234, 245, 0.06) 100%);
    border-color: rgba(255, 138, 108, 0.25);
}

.info-section-cta h3 { color: rgba(255, 213, 175, 0.95); }
.info-section-cta p  { color: var(--text-dim); margin: 0; max-width: 540px; margin-inline: auto; }

@media (max-width: 760px) {
    .info-stat-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .info-rarity-grid { grid-template-columns: repeat(2, 1fr); }
    .info-intro h2 { font-size: 28px; }
}