/* ===================================================================
   NFT CRYOGENIC LAB — VISUAL SYSTEM v8.0 "CRYOCORE"
   Full redesign: sci-fi cryo-lab HUD aesthetic.
   All functional class hooks preserved (progress bars, treasury-status,
   activity cards, coming-soon-overlay, wallet buttons, etc.)
   =================================================================== */

/* ---------- Design tokens ---------- */
:root {
    --void:        #04070d;
    --abyss:       #070d18;
    --panel:       rgba(13, 22, 38, 0.72);
    --panel-hard:  #0d1626;
    --line:        rgba(77, 232, 255, 0.14);
    --line-strong: rgba(77, 232, 255, 0.4);
    --ice:         #4de8ff;
    --ice-soft:    #9be9ff;
    --glacial:     #3d7bfd;
    --plasma:      #a78bfa;
    --frost:       #eaf6ff;
    --dim:         #7d93b2;
    --faint:       #4a5c78;
    --gold:        #ffd166;
    --ember:       #ff8a4c;
    --alive:       #34f5c5;
    --danger:      #ff5d73;

    --font-display: 'Orbitron', 'Segoe UI', sans-serif;
    --font-body:    'Rajdhani', 'Segoe UI', sans-serif;

    --clip-panel: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
    --clip-chip:  polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    --clip-btn:   polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

/* ---------- Base ---------- */
* { scrollbar-width: thin; scrollbar-color: rgba(77,232,255,0.35) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(77,232,255,0.25); border-radius: 4px; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    letter-spacing: 0.015em;
    color: var(--frost);
}

h1, h2, h3, .font-display {
    font-family: var(--font-display);
    letter-spacing: 0.05em;
}

/* ---------- Animations ---------- */
@keyframes spin { to { transform: rotate(360deg); } }

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

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes pulseReady {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(52, 245, 197, 0.6); }
    50% { transform: scale(1.04); box-shadow: 0 0 0 12px rgba(52, 245, 197, 0); }
}

@keyframes gradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes progressShine {
    0% { left: -100%; }
    100% { left: 100%; }
}

@keyframes activityProgress {
    0% { width: 0%; }
    100% { width: 100%; }
}

@keyframes auroraDrift {
    0%   { transform: translate3d(-4%, calc(-2% + var(--bg-aurora-y, 0px)), 0) scale(1); }
    50%  { transform: translate3d(4%, calc(3% + var(--bg-aurora-y, 0px)), 0) scale(1.08); }
    100% { transform: translate3d(-4%, calc(-2% + var(--bg-aurora-y, 0px)), 0) scale(1); }
}

@keyframes frostFall {
    0%   { transform: translateY(-6vh) translateX(0); opacity: 0; }
    10%  { opacity: 0.7; }
    100% { transform: translateY(106vh) translateX(24px); opacity: 0; }
}

@keyframes scanline {
    0% { background-position: 0 0; }
    100% { background-position: 0 6px; }
}

@keyframes glowBreath {
    0%, 100% { box-shadow: 0 0 18px rgba(77, 232, 255, 0.12), inset 0 0 24px rgba(77, 232, 255, 0.04); }
    50%      { box-shadow: 0 0 30px rgba(77, 232, 255, 0.22), inset 0 0 34px rgba(77, 232, 255, 0.07); }
}

@keyframes titleFlicker {
    0%, 92%, 100% { opacity: 1; }
    93% { opacity: 0.75; }
    94% { opacity: 1; }
    96% { opacity: 0.85; }
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---------- Background: void + aurora + frost particles ---------- */
.gradient-bg {
    /* Depth: a darker floor with a faint vertical "spine of light" so the page
       reads as a lit space rather than one flat plane. */
    background:
        radial-gradient(120% 60% at 50% -10%, rgba(20, 40, 74, 0.55), transparent 60%),
        linear-gradient(180deg, #060c18 0%, var(--void) 42%, #03060c 100%);
    position: relative;
}

.gradient-bg::before {
    content: '';
    position: fixed;
    inset: -20%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(38% 32% at 22% 18%, rgba(61, 123, 253, 0.18), transparent 70%),
        radial-gradient(32% 30% at 80% 12%, rgba(77, 232, 255, 0.12), transparent 70%),
        radial-gradient(40% 36% at 70% 85%, rgba(167, 139, 250, 0.12), transparent 70%),
        radial-gradient(30% 26% at 12% 78%, rgba(77, 232, 255, 0.08), transparent 70%);
    animation: auroraDrift 26s ease-in-out infinite;
    will-change: transform;
}

.gradient-bg::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(77, 232, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(77, 232, 255, 0.035) 1px, transparent 1px);
    background-size: 44px 44px;
    /* Perspective fade: grid is brightest up top and dissolves downward,
       giving the surface a sense of receding depth. */
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.25) 30%, transparent 70%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.25) 30%, transparent 70%);
    /* scroll parallax: grid scrolls faster than the aurora (deeper layering) */
    background-position: 0 var(--bg-grid-y, 0px);
    transition: background-position 0.05s linear;
}

/* A third, fixed depth layer: soft top glow + deep bottom vignette that frames
   the whole scroll so content sits inside an atmosphere, not on a slab. */
.gradient-bg-depth {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(90% 50% at 50% 0%, rgba(77, 232, 255, 0.06), transparent 55%),
        radial-gradient(120% 60% at 50% 100%, rgba(4, 7, 13, 0.9), transparent 55%);
    /* hue shifts subtly as you travel down the page (driven by fx.js) */
    transform: translate3d(0, var(--bg-depth-y, 0px), 0);
    opacity: var(--bg-depth-o, 1);
    will-change: transform;
}

#app, .loading-screen, .mobile-metamask-modal { position: relative; z-index: 1; }

/* Frost particles container (optional, injected by hero-carousel.js) */
.frost-field {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.frost-flake {
    position: absolute;
    top: -6vh;
    color: rgba(155, 233, 255, 0.5);
    animation: frostFall linear infinite;
    user-select: none;
    text-shadow: 0 0 6px rgba(77, 232, 255, 0.6);
}

.snowflake {
    color: rgba(255, 255, 255, 0.7);
    position: absolute;
    user-select: none;
    pointer-events: none;
}

/* ---------- Loading screen ---------- */
.loading-screen {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(60% 50% at 50% 40%, rgba(61, 123, 253, 0.14), transparent 70%),
        var(--void);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    color: var(--frost);
}

.loading-screen h2 { font-family: var(--font-display); }

.loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loading-spinner {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(77, 232, 255, 0.15);
    border-top-color: var(--ice);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
    filter: drop-shadow(0 0 6px rgba(77, 232, 255, 0.5));
}

.pulse-animation { animation: pulseReady 1.5s ease-in-out infinite; }
.float-animation { animation: float 3s ease-in-out infinite; }

/* ---------- Buttons: global reskin ---------- */
button {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0.04em;
}

button:disabled { opacity: 0.45; cursor: not-allowed; }
button:disabled:hover { transform: none !important; box-shadow: none !important; }

/* Reskin the tailwind utility buttons used across the game & JS-generated cards */
[class*="bg-cyan-6"], [class*="bg-purple-6"], [class*="bg-yellow-6"],
[class*="bg-green-6"], [class*="bg-red-6"], [class*="bg-blue-6"],
[class*="bg-orange-6"] {
    clip-path: var(--clip-btn);
    border-radius: 0 !important;
    text-transform: uppercase;
    font-size: 0.8rem !important;
    letter-spacing: 0.08em;
    position: relative;
    transition: filter 0.2s ease, transform 0.2s ease;
}

button[class*="bg-cyan-6"]   { background: linear-gradient(160deg, #0ea5c9, #0b7ea0) !important; box-shadow: 0 0 14px rgba(14,165,201,0.35); }
button[class*="bg-purple-6"] { background: linear-gradient(160deg, #7c5cf0, #5b3fd0) !important; box-shadow: 0 0 14px rgba(124,92,240,0.3); }
button[class*="bg-yellow-6"] { background: linear-gradient(160deg, #e0a63a, #b97f18) !important; box-shadow: 0 0 14px rgba(224,166,58,0.3); color: #16120a !important; }
button[class*="bg-green-6"]  { background: linear-gradient(160deg, #17c98f, #0f9e70) !important; box-shadow: 0 0 14px rgba(23,201,143,0.3); }
button[class*="bg-red-6"]    { background: linear-gradient(160deg, #f0506b, #cf3050) !important; box-shadow: 0 0 14px rgba(240,80,107,0.3); }
button[class*="bg-blue-6"]   { background: linear-gradient(160deg, #3d7bfd, #2856c9) !important; box-shadow: 0 0 14px rgba(61,123,253,0.3); }
button[class*="bg-orange-6"] { background: linear-gradient(160deg, #f07f3c, #d05a1a) !important; box-shadow: 0 0 14px rgba(240,127,60,0.3); }

button[class*="bg-"]:not(:disabled):hover {
    filter: brightness(1.15);
    transform: translateY(-2px);
}

/* ---------- HUD Header ---------- */
header {
    background: linear-gradient(180deg, rgba(10, 18, 32, 0.92), rgba(10, 18, 32, 0.75)) !important;
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line) !important;
    position: sticky;
    top: 0;
    z-index: 50;
}

header::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ice) 30%, var(--plasma) 70%, transparent);
    opacity: 0.5;
}

header h1 {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.12em !important;
    background: linear-gradient(90deg, var(--ice-soft), var(--ice) 45%, var(--glacial)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    animation: titleFlicker 9s linear infinite;
    filter: drop-shadow(0 0 12px rgba(77, 232, 255, 0.35));
}

/* HUD stat chips (balance / earning rate) */
#earning-rate-display,
header .bg-yellow-500\/20 {
    clip-path: var(--clip-chip);
    border-radius: 0 !important;
    background: rgba(13, 22, 38, 0.85) !important;
    border: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: 0.8rem;
}

#earning-rate-display { border-color: rgba(52, 245, 197, 0.3); }
#earning-rate { color: var(--alive) !important; text-shadow: 0 0 8px rgba(52, 245, 197, 0.5); }
#token-balance { color: var(--gold); text-shadow: 0 0 8px rgba(255, 209, 102, 0.4); }

/* Wallet buttons */
.wallet-connect {
    clip-path: var(--clip-btn);
    background: linear-gradient(135deg, rgba(61,123,253,0.9), rgba(14,165,201,0.9));
    background-size: 300% 300%;
    animation: gradient 4s ease infinite;
    border: 1px solid rgba(77, 232, 255, 0.35);
    text-transform: uppercase;
    font-size: 0.75rem !important;
    letter-spacing: 0.08em;
    transition: all 0.25s ease;
}

.wallet-connect:hover {
    box-shadow: 0 0 18px rgba(77, 232, 255, 0.45);
    transform: translateY(-2px);
}

.demo-mode-btn {
    clip-path: var(--clip-btn);
    background: linear-gradient(135deg, #f07f3c, #cf3050) !important;
    background-size: 300% 300% !important;
    animation: gradient 3s ease infinite;
    border: 1px solid rgba(255, 138, 76, 0.5) !important;
    text-transform: uppercase;
    font-size: 0.75rem !important;
    letter-spacing: 0.08em;
    position: relative;
    overflow: hidden;
}

.demo-mode-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    animation: shimmer 2.4s infinite;
}

.demo-mode-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 18px rgba(240, 127, 60, 0.5);
}

.tx-pending {
    background: linear-gradient(45deg, #e0a63a, #b97f18);
    background-size: 300% 300%;
    animation: gradient 2s ease infinite;
}

/* ---------- Core panel system ---------- */
/* Every rounded card container from the old design becomes a cryo-panel */
.cryo-panel,
main section > div[class*="border"],
main section > div[class*="bg-gradient-to-r"],
#connect-prompt .bg-green-500\/10,
#network-warning,
#transaction-status {
    position: relative;
    clip-path: var(--clip-panel);
    border-radius: 0 !important;
    background:
        linear-gradient(160deg, rgba(77, 232, 255, 0.05), transparent 40%),
        var(--panel) !important;
    border: 1px solid var(--line) !important;
    backdrop-filter: blur(10px);
    animation: glowBreath 7s ease-in-out infinite;
}

/* Corner brackets on panels */
.cryo-panel::before,
main section > div[class*="bg-gradient-to-r"]::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, var(--line-strong), var(--line-strong)) top left / 26px 1px no-repeat,
        linear-gradient(0deg,  var(--line-strong), var(--line-strong)) top left / 1px 26px no-repeat,
        linear-gradient(90deg, var(--line-strong), var(--line-strong)) bottom right / 26px 1px no-repeat,
        linear-gradient(0deg,  var(--line-strong), var(--line-strong)) bottom right / 1px 26px no-repeat;
}

/* Section headings become console labels */
main section > h2,
main section > div > h2 {
    font-family: var(--font-display) !important;
    text-transform: uppercase;
    font-size: 1.05rem !important;
    letter-spacing: 0.14em !important;
    color: var(--ice-soft) !important;
}

main section > h2::after,
main section > div > h2::after {
    content: '';
    flex: 1;
    height: 1px;
    margin-left: 0.75rem;
    background: linear-gradient(90deg, var(--line-strong), transparent);
    align-self: center;
}

/* Inner cards (shop packs, treasury chain cards, JS-generated NFT cards) */
.card-hover,
.bg-slate-800\/50 {
    clip-path: var(--clip-chip);
    border-radius: 0 !important;
    background:
        linear-gradient(160deg, rgba(77, 232, 255, 0.04), transparent 45%),
        rgba(11, 19, 33, 0.85) !important;
    border: 1px solid rgba(77, 232, 255, 0.12) !important;
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    border-color: rgba(77, 232, 255, 0.45) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 22px rgba(77, 232, 255, 0.15);
}

.card-hover h3 {
    font-family: var(--font-display);
    font-size: 0.95rem !important;
    letter-spacing: 0.06em;
}

/* Price tags */
.text-yellow-400.font-bold {
    font-family: var(--font-display);
    text-shadow: 0 0 10px rgba(255, 209, 102, 0.35);
}

/* ---------- Activity cards ---------- */
.activity-card {
    clip-path: var(--clip-chip);
    border-radius: 0 !important;
    background:
        linear-gradient(180deg, rgba(77, 232, 255, 0.05), transparent 50%),
        rgba(11, 19, 33, 0.9) !important;
    border: 1px solid rgba(77, 232, 255, 0.14) !important;
    transition: all 0.25s ease;
    cursor: pointer;
    position: relative;
}

.activity-card:hover {
    transform: translateY(-4px);
    border-color: rgba(77, 232, 255, 0.5) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5), 0 0 18px rgba(77, 232, 255, 0.18);
}

.activity-card h3 { font-family: var(--font-display); letter-spacing: 0.05em; }

.activity-card.disabled { opacity: 0.45; cursor: not-allowed; }
.activity-card.disabled:hover { transform: none; box-shadow: none; }

.activity-card.active {
    animation: pulse 2s infinite;
    border-color: rgba(77, 232, 255, 0.6) !important;
    box-shadow: 0 0 24px rgba(77, 232, 255, 0.3);
}

/* ---------- Progress bars ---------- */
.progress-bar {
    background: linear-gradient(90deg, var(--alive), var(--gold));
    height: 100%;
    transition: width 1s ease-in-out;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(52, 245, 197, 0.4);
}

.progress-bar::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    animation: progressShine 2s infinite;
}

.unfreezing-progress-bar {
    background: linear-gradient(90deg, var(--ember), var(--danger));
    height: 100%;
    transition: width 1s ease-in-out;
    box-shadow: 0 0 10px rgba(255, 138, 76, 0.4);
}

/* Progress track (the gray bg bar) */
.bg-gray-700 {
    background: rgba(77, 232, 255, 0.08) !important;
    border: 1px solid rgba(77, 232, 255, 0.1);
    border-radius: 0 !important;
    clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
}

.feed-progress-bar,
.sleep-progress-bar,
.hygiene-progress-bar,
.entertainment-progress-bar,
.friendship-progress-bar,
.workout-progress-bar {
    position: relative;
    overflow: hidden;
    border-radius: 0 !important;
}

.feed-progress-bar::after,
.sleep-progress-bar::after,
.hygiene-progress-bar::after,
.entertainment-progress-bar::after,
.friendship-progress-bar::after,
.workout-progress-bar::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    animation: progressShine 2s infinite;
}

.feed-progress-bar.active         { animation: activityProgress 60s linear forwards; }
.sleep-progress-bar.active        { animation: activityProgress 28800s linear forwards; }
.hygiene-progress-bar.active      { animation: activityProgress 1800s linear forwards; }
.entertainment-progress-bar.active{ animation: activityProgress 3600s linear forwards; }
.friendship-progress-bar.active   { animation: activityProgress 3600s linear forwards; }
.workout-progress-bar.active      { animation: activityProgress 3600s linear forwards; }

/* ---------- Treasury ---------- */
.treasury-status {
    padding: 0.35rem 0.6rem;
    clip-path: var(--clip-chip);
    font-size: 0.68rem;
    font-weight: 700;
    font-family: var(--font-display);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.treasury-online  { background: rgba(52, 245, 197, 0.1);  color: var(--alive);  border: 1px solid rgba(52, 245, 197, 0.3); }
.treasury-offline { background: rgba(255, 93, 115, 0.1);  color: var(--danger); border: 1px solid rgba(255, 93, 115, 0.3); }
.treasury-warning { background: rgba(255, 209, 102, 0.1); color: var(--gold);   border: 1px solid rgba(255, 209, 102, 0.3); }

/* Big treasury numbers */
#treasury-earned, #treasury-claimed, #treasury-available {
    font-family: var(--font-display);
    text-shadow: 0 0 16px currentColor;
}

/* ---------- Global booster banner ---------- */
.global-booster-banner {
    clip-path: var(--clip-panel);
    border-radius: 0 !important;
    background: linear-gradient(100deg, rgba(224, 166, 58, 0.22), rgba(207, 90, 26, 0.22)) !important;
    background-size: 300% 300% !important;
    animation: gradient 4s ease infinite;
    border: 1px solid rgba(255, 209, 102, 0.45) !important;
    box-shadow: 0 0 28px rgba(255, 209, 102, 0.2);
    backdrop-filter: blur(8px);
}

/* ---------- Coming soon overlay ---------- */
.coming-soon-overlay {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(-45deg, transparent 0 12px, rgba(77, 232, 255, 0.04) 12px 24px),
        linear-gradient(135deg, rgba(4, 7, 13, 0.9), rgba(13, 22, 38, 0.78));
    backdrop-filter: blur(3px) saturate(0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.coming-soon-overlay .font-bold {
    font-family: var(--font-display);
    letter-spacing: 0.2em;
    color: var(--ice-soft);
    text-shadow: 0 0 12px rgba(77, 232, 255, 0.5);
}

/* ---------- NFT components ---------- */
.nft-container {
    width: 100%;
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
    background: var(--panel-hard);
    clip-path: var(--clip-chip);
}

.nft-image { width: 100%; height: 100%; object-fit: cover; }

.ice-overlay {
    background: linear-gradient(to bottom, rgba(155, 233, 255, 0.28), rgba(77, 232, 255, 0.45));
    backdrop-filter: blur(2px);
}

/* ---------- Worker status ---------- */
.worker-status-busy,
.worker-status-available,
.worker-status-activity {
    clip-path: var(--clip-chip);
    padding: 0.25rem 0.55rem;
    font-size: 0.65rem;
    font-weight: 700;
    font-family: var(--font-display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.worker-status-busy      { background: rgba(255, 93, 115, 0.12);  border: 1px solid rgba(255, 93, 115, 0.35);  color: var(--danger); }
.worker-status-available { background: rgba(52, 245, 197, 0.12);  border: 1px solid rgba(52, 245, 197, 0.35);  color: var(--alive); }
.worker-status-activity  { background: rgba(77, 232, 255, 0.12);  border: 1px solid rgba(77, 232, 255, 0.35);  color: var(--ice); animation: pulse 2s infinite; }

.cancel-activity-btn {
    clip-path: var(--clip-btn);
    background: linear-gradient(160deg, #f0506b, #cf3050);
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cancel-activity-btn:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
    box-shadow: 0 0 14px rgba(240, 80, 107, 0.45);
}

/* ---------- Admin panel ---------- */
.admin-chain-btn { transition: all 0.3s ease; border: 2px solid transparent; clip-path: var(--clip-btn); }
.admin-chain-btn.selected {
    border-color: var(--ice) !important;
    box-shadow: 0 0 12px rgba(77, 232, 255, 0.4) !important;
    transform: scale(1.05) !important;
    font-weight: bold !important;
}
.admin-chain-btn:not(.selected):hover { transform: scale(1.02); }

/* ---------- Mobile MetaMask modal ---------- */
.mobile-metamask-modal {
    position: fixed;
    inset: 0;
    background: rgba(4, 7, 13, 0.85);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1rem;
}

.mobile-metamask-content {
    clip-path: var(--clip-panel);
    background: linear-gradient(160deg, rgba(77, 232, 255, 0.06), transparent 40%), var(--panel-hard);
    padding: 2rem;
    max-width: 420px;
    width: 100%;
    text-align: center;
    border: 1px solid var(--line-strong);
}

.mobile-install-btn {
    clip-path: var(--clip-btn);
    background: linear-gradient(45deg, #f07f3c, #e0a63a);
    color: #16120a;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    display: inline-block;
    font-weight: bold;
    margin: 0.5rem;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
}

.mobile-install-btn:hover { transform: translateY(-2px); box-shadow: 0 0 16px rgba(240, 127, 60, 0.45); }

.mobile-connect-btn {
    clip-path: var(--clip-btn);
    background: linear-gradient(45deg, #3d7bfd, #0ea5c9);
    color: #fff;
    padding: 1rem 2rem;
    border: none;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    margin: 0.5rem;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.mobile-connect-btn:hover { transform: translateY(-2px); box-shadow: 0 0 16px rgba(61, 123, 253, 0.5); }

.mobile-steps {
    text-align: left;
    background: rgba(77, 232, 255, 0.06);
    border: 1px solid var(--line);
    padding: 1rem;
    margin: 1rem 0;
    clip-path: var(--clip-chip);
}

.mobile-steps ol { margin: 0; padding-left: 1.5rem; }
.mobile-steps li { margin: 0.5rem 0; color: var(--frost); }

.mobile-indicator {
    position: fixed;
    top: 4px; right: 4px;
    background: rgba(61, 123, 253, 0.8);
    color: white;
    padding: 0.25rem 0.5rem;
    clip-path: var(--clip-chip);
    font-size: 0.625rem;
    z-index: 1000;
    font-family: var(--font-display);
}

.mobile-indicator.android { background: rgba(52, 245, 197, 0.8); color: #052018; }
.mobile-indicator.ios     { background: rgba(167, 139, 250, 0.85); }

/* ---------- Stats modal ---------- */
#stats-modal { backdrop-filter: blur(10px); }

#stats-modal .bg-slate-800 {
    clip-path: var(--clip-panel);
    border-radius: 0 !important;
    background: var(--panel-hard) !important;
    border: 1px solid var(--line-strong);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(77, 232, 255, 0.08);
}

.stats-section {
    background: rgba(13, 22, 38, 0.6);
    border: 1px solid rgba(167, 139, 250, 0.2);
    clip-path: var(--clip-chip);
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.stats-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(125, 147, 178, 0.12);
}

.stats-item:last-child { border-bottom: none; }
.stats-label { color: var(--dim); font-size: 0.875rem; }
.stats-value { color: var(--frost); font-weight: 600; }
.stats-highlight { color: var(--plasma); font-weight: bold; }

.stats-title {
    color: var(--plasma);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

#stats-modal button:hover { transform: scale(1.1); transition: transform 0.2s ease; }

/* ===================================================================
   HERO SECTION — carousel + video + collapsible quick panels
   =================================================================== */
.hero-section {
    position: relative;
    margin-bottom: 2rem;
    clip-path: var(--clip-panel);
    overflow: hidden;
    border: none;
    background: linear-gradient(135deg, #060b16, #0c1a36 55%, #060b16);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* scanline texture over the hero */
.hero-section::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    background: repeating-linear-gradient(0deg, rgba(77, 232, 255, 0.025) 0 1px, transparent 1px 3px);
    animation: scanline 8s linear infinite;
}

.hero-carousel {
    position: relative;
    width: 100%;
    /* Taller, and responsive to viewport so the hero isn't a thin strip on
       large screens. Clamped between 460px and 620px. */
    height: clamp(460px, 56vh, 620px);
    overflow: hidden;
}

@media (max-width: 640px) { .hero-carousel { height: clamp(380px, 62vh, 460px); } }

.hero-slides {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
}

.hero-slide {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    /* Content must clear the nav arrows with a comfortable gap.
       Arrow inner edge sits at ~1rem inset + ~42px ≈ 58px; we start the
       content well past that so there's a clear ~28–30px breathing gap. */
    padding: 3rem clamp(5rem, 7vw, 6.5rem);
    overflow: hidden;
    box-sizing: border-box;
}

@media (max-width: 640px) { .hero-slide { padding: 1.5rem 1.25rem 3.5rem; } }

.hero-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.55;
    pointer-events: none;
}

.hero-slide--brand::before {
    background:
        radial-gradient(circle at 85% 20%, rgba(77, 232, 255, 0.28), transparent 55%),
        radial-gradient(circle at 8% 90%, rgba(167, 139, 250, 0.24), transparent 50%);
}

.hero-slide--treasury::before {
    background:
        radial-gradient(circle at 15% 15%, rgba(255, 209, 102, 0.22), transparent 55%),
        radial-gradient(circle at 90% 85%, rgba(255, 138, 76, 0.18), transparent 55%);
}

.hero-slide--video::before {
    background: radial-gradient(circle at 50% 50%, rgba(61, 123, 253, 0.18), transparent 60%);
}

.hero-slide-content { position: relative; z-index: 2; max-width: 580px; }

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-display);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ice);
    background: rgba(77, 232, 255, 0.08);
    border: 1px solid rgba(77, 232, 255, 0.35);
    padding: 0.35rem 0.8rem;
    clip-path: var(--clip-chip);
    margin-bottom: 1rem;
    font-weight: 600;
}

.hero-title {
    font-family: var(--font-display);
    font-size: 2.1rem;
    line-height: 1.15;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.8rem;
    background: linear-gradient(90deg, #ffffff, var(--ice-soft) 60%, var(--ice));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 18px rgba(77, 232, 255, 0.25));
}

@media (max-width: 640px) { .hero-title { font-size: 1.35rem; } }

.hero-subtitle {
    color: var(--dim);
    font-size: 1rem;
    line-height: 1.55;
    margin-bottom: 1.4rem;
    max-width: 46ch;
}

.hero-cta-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.hero-cta {
    clip-path: var(--clip-btn);
    padding: 0.75rem 1.5rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.25s ease;
}

.hero-cta--primary {
    background: linear-gradient(45deg, #0ea5c9, #3d7bfd);
    color: #fff;
    box-shadow: 0 0 18px rgba(14, 165, 201, 0.35);
}

.hero-cta--primary:hover { transform: translateY(-2px); box-shadow: 0 0 26px rgba(14, 165, 201, 0.55); }

.hero-cta--ghost {
    background: rgba(77, 232, 255, 0.05);
    border-color: rgba(77, 232, 255, 0.3);
    color: var(--ice-soft);
}

.hero-cta--ghost:hover { background: rgba(77, 232, 255, 0.12); transform: translateY(-2px); }

/* Video slide */
.hero-video-wrap {
    position: relative;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 16 / 9;
    clip-path: var(--clip-chip);
    overflow: hidden;
    border: 1px solid var(--line-strong);
    background: #000;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}

.hero-video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero-video-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background:
        radial-gradient(circle at 50% 45%, rgba(61, 123, 253, 0.25), transparent 60%),
        linear-gradient(135deg, #060b16, #0c1a36);
    color: var(--ice-soft);
    text-align: center;
    padding: 1rem;
}

.hero-play-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(14, 165, 201, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #fff;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 1px solid rgba(155, 233, 255, 0.5);
    box-shadow: 0 0 24px rgba(77, 232, 255, 0.45);
}

.hero-play-btn:hover { transform: scale(1.1); box-shadow: 0 0 34px rgba(77, 232, 255, 0.7); }

/* Arrows */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    clip-path: var(--clip-chip);
    background: rgba(6, 11, 22, 0.65);
    border: 1px solid rgba(77, 232, 255, 0.25);
    color: var(--ice-soft);
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
}

.hero-arrow:hover { background: rgba(14, 165, 201, 0.4); border-color: var(--ice); }
.hero-arrow-left { left: 2.25rem; }
.hero-arrow-right { right: 2.25rem; }

@media (max-width: 640px) {
    /* On mobile the arrows move OUT of the content area to the bottom,
       flanking the dots — content is never covered, and swipe still works. */
    .hero-arrow {
        width: 34px; height: 34px; font-size: 1rem;
        top: auto; bottom: 0.85rem; transform: none;
        background: rgba(6, 11, 22, 0.8);
    }
    .hero-arrow-left { left: 1rem; right: auto; }
    .hero-arrow-right { right: 1rem; left: auto; }
    /* nudge the dots up a hair so they sit centered between the arrows */
    .hero-dots { bottom: calc(1.35rem + 10px); }
}

/* Dots */
.hero-dots {
    position: absolute;
    bottom: calc(1rem + 10px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 5;
}

.hero-dot {
    width: 8px;
    height: 8px;
    background: rgba(155, 233, 255, 0.25);
    cursor: pointer;
    border: none;
    padding: 0;
    transition: all 0.25s ease;
    clip-path: polygon(2px 0, 100% 0, 100% calc(100% - 2px), calc(100% - 2px) 100%, 0 100%, 0 2px);
}

.hero-dot.active {
    width: 24px;
    background: linear-gradient(90deg, var(--ice), var(--glacial));
    box-shadow: 0 0 10px rgba(77, 232, 255, 0.6);
}

/* Quick panels */
.hero-quick-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line);
    border-top: 1px solid var(--line-strong);
    position: relative;
    z-index: 4;
}

@media (max-width: 768px) { .hero-quick-panels { grid-template-columns: 1fr; } }

.hero-panel { background: rgba(6, 11, 22, 0.92); }

.hero-panel-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: transparent;
    border: none;
    color: var(--frost);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background 0.2s ease;
}

.hero-panel-toggle:hover { background: rgba(77, 232, 255, 0.04); }

.hero-panel-toggle .hero-panel-label { display: flex; align-items: center; gap: 0.6rem; }

.hero-panel-toggle .hero-panel-hint {
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--faint);
    margin-left: 0.5rem;
    text-transform: none;
    letter-spacing: 0.03em;
}

.hero-panel-toggle .chevron { transition: transform 0.3s ease; color: var(--faint); font-size: 0.9rem; }
.hero-panel.open .chevron { transform: rotate(180deg); color: var(--ice); }

.hero-panel-body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }

.hero-panel-body-inner {
    padding: 0 1.5rem 1.25rem 1.5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

@media (min-width: 480px) { .hero-panel-body-inner { grid-template-columns: repeat(4, 1fr); } }

.hero-mini-card {
    clip-path: var(--clip-chip);
    background: rgba(13, 22, 38, 0.8);
    border: 1px solid rgba(77, 232, 255, 0.12);
    padding: 0.8rem 0.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
}

.hero-mini-card:hover {
    transform: translateY(-3px);
    border-color: rgba(77, 232, 255, 0.5);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45), 0 0 14px rgba(77, 232, 255, 0.15);
}

.hero-mini-card .icon { font-size: 1.5rem; margin-bottom: 0.35rem; }
.hero-mini-card .label {
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--frost);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.hero-mini-card .sub { font-size: 0.62rem; color: var(--dim); margin-top: 0.2rem; }

/* ---------- Mobile responsive ---------- */
@media (max-width: 640px) {
    /* header padding/brand handled by the dedicated mobile-header block below */

    /* wallet buttons stay in a horizontal row on mobile (icon buttons) */
    #wallet-selection { flex-direction: row !important; gap: 0.35rem !important; }
    #wallet-selection button { width: 34px; justify-content: center; font-size: 1rem; padding: 0; }

    #wallet-connected { flex-direction: column !important; gap: 0.5rem !important; width: 100%; }
    #disconnect-wallet { width: 100%; }

    .grid.md\:grid-cols-2 { grid-template-columns: 1fr !important; gap: 1rem !important; }
    .grid.md\:grid-cols-3,
    .grid.md\:grid-cols-4,
    .grid.xl\:grid-cols-5 { grid-template-columns: 1fr !important; }

    main { padding: 1rem !important; }

    .activity-card { padding: 1rem !important; }
    .activity-card .text-3xl,
    .activity-card .text-4xl { font-size: 2rem !important; }
}

/* ===================================================================
   GAME SCREEN SECTION — embedded viewport with launch + fullscreen
   =================================================================== */
.game-screen-panel {
    position: relative;
    clip-path: var(--clip-panel);
    border: 1px solid var(--line-strong);
    background:
        linear-gradient(160deg, rgba(77, 232, 255, 0.05), transparent 40%),
        var(--panel);
    backdrop-filter: blur(10px);
    overflow: hidden;
}

/* Poster (pre-launch) */
.game-screen-poster {
    position: relative;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
    padding: 2.5rem 1.5rem;
    background:
        radial-gradient(55% 60% at 50% 30%, rgba(61, 123, 253, 0.2), transparent 70%),
        radial-gradient(40% 40% at 78% 80%, rgba(167, 139, 250, 0.14), transparent 70%),
        repeating-linear-gradient(0deg, rgba(77, 232, 255, 0.02) 0 1px, transparent 1px 3px),
        linear-gradient(160deg, #060b16, #0b1730);
}

.game-screen-poster .poster-icon {
    font-size: 3.4rem;
    filter: drop-shadow(0 0 22px rgba(77, 232, 255, 0.5));
    animation: float 3.4s ease-in-out infinite;
}

.game-screen-poster h3 {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 1.35rem;
    background: linear-gradient(90deg, #ffffff, var(--ice-soft) 60%, var(--ice));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.game-screen-poster p {
    color: var(--dim);
    max-width: 48ch;
    font-size: 0.95rem;
    line-height: 1.55;
}

.game-launch-btn {
    clip-path: var(--clip-btn);
    padding: 0.95rem 2.4rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #fff;
    border: 1px solid rgba(155, 233, 255, 0.5);
    background: linear-gradient(45deg, #0ea5c9, #3d7bfd, #7c5cf0);
    background-size: 250% 250%;
    animation: gradient 4s ease infinite;
    cursor: pointer;
    box-shadow: 0 0 26px rgba(61, 123, 253, 0.45);
    transition: all 0.25s ease;
}

.game-launch-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 0 40px rgba(77, 232, 255, 0.6);
}

.game-screen-poster .poster-specs {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 0.68rem;
    color: var(--faint);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: var(--font-display);
}

/* Stage (post-launch) */
.game-screen-stage { position: relative; }

.game-screen-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    background: rgba(6, 11, 22, 0.92);
    border-bottom: 1px solid var(--line);
}

.game-screen-toolbar .toolbar-title {
    font-family: var(--font-display);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ice-soft);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.game-screen-toolbar .live-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--alive);
    box-shadow: 0 0 8px rgba(52, 245, 197, 0.8);
    animation: pulse 1.6s infinite;
}

.game-toolbar-btn {
    clip-path: var(--clip-chip);
    background: rgba(13, 22, 38, 0.9);
    border: 1px solid rgba(77, 232, 255, 0.25);
    color: var(--ice-soft);
    padding: 0.4rem 0.9rem;
    font-size: 0.7rem;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.game-toolbar-btn:hover {
    border-color: var(--ice);
    background: rgba(14, 165, 201, 0.18);
}

/* Game viewport — native 720p (1280x720, strict 16:9).
   The engine renders at 1280x720; CSS scales the box down proportionally
   on smaller screens, never changing the aspect ratio. */
#game-screen-wrap {
    position: relative;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    background: #02040a;
}

/* Breakout: let the game section reach full 1280px even though the page
   container is 1152px wide. Margin-based (no transform) so it doesn't
   fight the scroll-reveal transforms. */
/* Game viewport stays aligned with every other section (container width).
   The engine renders at native 1280x720 and scales down proportionally —
   still crisp, still strict 16:9 — rather than spilling past the container. */
#game-screen-section .game-screen-panel {
    width: 100%;
    margin-left: 0;
}

/* Fullscreen: letterboxed 16:9 centered on black — the game area itself
   never stretches out of aspect. */
#game-screen-wrap:fullscreen {
    max-width: none;
    aspect-ratio: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

#game-screen-wrap:fullscreen #game-screen-frame {
    width: min(100vw, calc(100vh * 16 / 9));
    height: min(100vh, calc(100vw * 9 / 16));
}

#game-screen-wrap:fullscreen #game-screen-loading {
    width: min(100vw, calc(100vh * 16 / 9));
    height: min(100vh, calc(100vw * 9 / 16));
    inset: auto;
}

#game-screen-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

#game-screen-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: var(--dim);
    background: #02040a;
    text-align: center;
    padding: 1rem;
}

@media (max-width: 640px) {
    .game-screen-poster { min-height: 280px; padding: 2rem 1rem; }
    /* Mobile keeps strict 16:9 (scaled down). A dedicated portrait
       adaptation will replace this later. */
}

/* ===================================================================
   AFF v8.1 — video-bg slide, news slide, packs slide, header nav, footer
   =================================================================== */

/* Header nav */
.header-link {
    font-family: var(--font-display);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--dim);
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
}
.header-link:hover { color: var(--ice); text-shadow: 0 0 8px rgba(77,232,255,0.5); }

/* Phantom wallet button accent */
.wallet-connect--phantom {
    background: linear-gradient(135deg, rgba(124, 92, 240, 0.95), rgba(84, 56, 200, 0.95)) !important;
    border-color: rgba(167, 139, 250, 0.5) !important;
}
.wallet-connect--phantom:hover { box-shadow: 0 0 18px rgba(167, 139, 250, 0.55); }

/* ---------- Slide 1: video background ---------- */
.hero-slide--videobg { padding: 0; }

.hero-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    background:
        radial-gradient(60% 55% at 50% 40%, rgba(61, 123, 253, 0.28), transparent 70%),
        linear-gradient(160deg, #060b16, #0b1730);
}

.hero-videobg-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(70% 70% at 50% 55%, rgba(4, 7, 13, 0.15), rgba(4, 7, 13, 0.72) 85%),
        linear-gradient(180deg, rgba(4, 7, 13, 0.35), transparent 30%, transparent 65%, rgba(4, 7, 13, 0.55));
}

.hero-slide--videobg .hero-slide-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.hero-slide-content--center { text-align: center; max-width: none; }

/* Semi-transparent WEBM video playing behind the centered hero content */
.hero-content-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.35;
    z-index: 0;
    pointer-events: none;
    mix-blend-mode: screen;
}
/* Keep the actual content (glass group, buttons) above the video */
.hero-slide-content--center > *:not(.hero-content-video) {
    position: relative;
    z-index: 1;
}

/* Single frosted-glass panel sitting above the video but behind the logo,
   title and subtitle group — slightly darkened for readability. */
.hero-slide-content--center .hero-glass-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.4rem 2rem;
    margin-top: 25px;
    margin-bottom: 1.4rem;
    background: rgba(4, 8, 16, 0.82);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(77, 232, 255, 0.16);
    border-radius: 18px;
    box-shadow: 0 8px 36px rgba(0, 0, 0, 0.45);
}
/* the wordmark image no longer needs its own panel */
.hero-slide-content--center .hero-glass-panel .hero-wordmark-img {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.hero-logo { margin-bottom: 0.6rem; }
.hero-logo img { height: 84px; width: auto; filter: drop-shadow(0 0 24px rgba(77, 232, 255, 0.5)); }
.hero-logo-mark {
    font-size: 3.2rem;
    filter: drop-shadow(0 0 22px rgba(52, 245, 197, 0.55));
    animation: float 3.6s ease-in-out infinite;
    display: inline-block;
}

.hero-title--xl {
    font-size: 2.6rem;
    filter: drop-shadow(0 0 24px rgba(77, 232, 255, 0.35));
}
@media (max-width: 640px) { .hero-title--xl { font-size: 1.6rem; } }

.hero-subtitle--center { margin-left: auto; margin-right: auto; color: #eaf4ff; }
.hero-cta-row--center { justify-content: center; margin-top: 15px; }

.hero-cta--big {
    font-size: 0.95rem;
    padding: 1rem 2.6rem;
    box-shadow: 0 0 30px rgba(14, 165, 201, 0.5);
}

a.hero-cta { text-decoration: none; display: inline-flex; align-items: center; }

/* ---------- Slide 2: news ---------- */
.hero-slide--news::before {
    content: '';
    position: absolute; inset: 0; opacity: 0.5; pointer-events: none;
    background:
        radial-gradient(circle at 88% 18%, rgba(77, 232, 255, 0.22), transparent 55%),
        radial-gradient(circle at 8% 85%, rgba(61, 123, 253, 0.2), transparent 50%);
}

.hero-news-list {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    /* Safety net: if the hero is very short, the list scrolls instead of
       letting the last card clip below the frame. */
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(77,232,255,0.3) transparent;
}
.hero-news-list::-webkit-scrollbar { width: 5px; }
.hero-news-list::-webkit-scrollbar-thumb { background: rgba(77,232,255,0.3); border-radius: 3px; }
/* the copy column becomes a flex column so the scroll area can size itself */
.hero-slide--news .hero-news-copy { display: flex; flex-direction: column; min-height: 0; }
/* slightly tighter title on the news slide to save vertical room */
.hero-slide--news .hero-title { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 0.6rem; }

.hero-news-item {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    clip-path: var(--clip-chip);
    background: rgba(6, 11, 22, 0.7);
    border: 1px solid rgba(77, 232, 255, 0.14);
    padding: 0.7rem 0.9rem;
    transition: all 0.2s ease;
}

.hero-news-item:hover { border-color: rgba(77, 232, 255, 0.4); transform: translateX(3px); }

.news-date {
    flex: 0 0 auto;
    font-family: var(--font-display);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ice);
    background: rgba(77, 232, 255, 0.08);
    border: 1px solid rgba(77, 232, 255, 0.25);
    clip-path: var(--clip-chip);
    padding: 0.3rem 0.5rem;
    margin-top: 0.1rem;
    white-space: nowrap;
}

.news-title { font-weight: 700; font-size: 0.9rem; color: var(--frost); }
.news-text { font-size: 0.78rem; color: var(--dim); line-height: 1.4; }

/* News slide two-column layout: copy on the left, artwork on the right.
   The slide carries extra horizontal padding (below) so the artwork's right
   edge clears the nav arrow with a comfortable gap. */
/* News slide: extra breathing room on the sides so neither the copy nor the
   artwork can touch the hero frame or collide with the nav arrows. */
/* News slide: extra breathing room on the sides so neither the copy nor the
   artwork can touch the hero frame or collide with the nav arrows.
   Vertical padding is trimmed here (this slide is content-heavy) so all three
   news cards fit inside the hero height even on short viewports. */
.hero-slide--news {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
    padding-left: clamp(5rem, 7vw, 6.5rem);
    padding-right: clamp(5.5rem, 8vw, 7.5rem);
}
.hero-news-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    /* both columns share the same height and align top+bottom, so the artwork
       never sticks out below the news list */
    align-items: stretch;
    width: 100%;
    max-width: 100%;
}
.hero-news-copy {
    max-width: 640px;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-news-media {
    position: relative;
    min-height: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
}
.hero-news-img {
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: cover;
    clip-path: var(--clip-panel);
    filter: none;
}
.hero-news-img.is-empty {
    background:
        repeating-linear-gradient(-45deg, rgba(77,232,255,0.06) 0 16px, transparent 16px 32px),
        radial-gradient(70% 90% at 60% 40%, rgba(77,232,255,0.10), transparent 70%),
        rgba(6, 11, 22, 0.6);
    position: relative;
}
.hero-news-img.is-empty::after {
    content: 'IMG';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 2.4rem;
    letter-spacing: 0.1em;
    color: rgba(77, 232, 255, 0.4);
}
/* framed corner accents around the artwork */
.hero-news-media-corner {
    position: absolute;
    width: 26px; height: 26px;
    border: 2px solid var(--ice);
    opacity: 0.7;
    pointer-events: none;
}
.hero-news-media-corner--tl { top: -6px; left: -6px; border-right: none; border-bottom: none; }
.hero-news-media-corner--br { bottom: -6px; right: -6px; border-left: none; border-top: none; }

/* Hide the L-shaped corner accents in Project News and About sections */
.hero-news-media-corner,
.about-media-corner { display: none; }

@media (max-width: 860px) {
    .hero-news-layout { grid-template-columns: 1fr; gap: 1.25rem; }
    .hero-news-media { display: none; } /* on narrow screens, copy-only */
}

@media (max-width: 640px) {
    .hero-news-item { padding: 0.55rem 0.7rem; gap: 0.6rem; }
    .news-text { display: none; } /* compact on phones */
}

/* ---------- Slide 3: special packs ---------- */
.hero-slide--packs::before {
    content: '';
    position: absolute; inset: 0; opacity: 0.55; pointer-events: none;
    background:
        radial-gradient(circle at 15% 15%, rgba(255, 209, 102, 0.22), transparent 55%),
        radial-gradient(circle at 90% 85%, rgba(255, 138, 76, 0.18), transparent 55%);
}

/* Keep the eyebrow labels ("Project News", "Limited Offer") at the SAME
   height across slides by top-aligning their content identically. */
.hero-slide--news,
.hero-slide--packs { align-items: flex-start; }
.hero-slide--news .hero-slide-content,
.hero-slide--packs .hero-slide-content { padding-top: 1.25rem; }

/* On the packs slide only, push the TITLE down (below the eyebrow line) and
   the pack CARDS down further, without moving the eyebrow. */
.hero-slide--packs .hero-title { margin-top: 1rem; margin-bottom: 0.5rem; font-size: 1.7rem; }
.hero-slide--packs .hero-packs-row { margin-top: 0.5rem; }

@media (max-width: 640px) {
    .hero-slide--packs .hero-title { font-size: 1.25rem; margin-top: 0.5rem; }
    .hero-slide--packs .hero-packs-row { margin-top: 0.35rem; }
    .hero-slide--news .hero-slide-content,
    .hero-slide--packs .hero-slide-content { padding-top: 1rem; }
}

.hero-packs-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
}

@media (max-width: 640px) { .hero-packs-row { grid-template-columns: 1fr; gap: 0.5rem; } }

.hero-pack-card {
    position: relative;
    clip-path: var(--clip-chip);
    background: rgba(6, 11, 22, 0.8);
    border: 1px solid rgba(77, 232, 255, 0.16);
    padding: 1rem 0.75rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    /* Square cards: height matches the (current) width */
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
}

.hero-pack-card:hover {
    transform: translateY(-4px);
    border-color: rgba(77, 232, 255, 0.5);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5), 0 0 18px rgba(77, 232, 255, 0.18);
}

.hero-pack-card--featured {
    border-color: rgba(255, 209, 102, 0.45);
    background: linear-gradient(180deg, rgba(255, 209, 102, 0.07), transparent 60%), rgba(6, 11, 22, 0.85);
}

.hero-pack-card--featured:hover {
    border-color: rgba(255, 209, 102, 0.8);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 209, 102, 0.25);
}

.pack-badge {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    font-family: var(--font-display);
    font-size: 0.52rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #16120a;
    background: linear-gradient(45deg, var(--gold), var(--ember));
    clip-path: var(--clip-chip);
    padding: 0.22rem 0.45rem;
}

.pack-icon { font-size: 1.9rem; margin-bottom: 0.35rem; }
.pack-name {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--frost);
}
.pack-desc { font-size: 0.66rem; color: var(--dim); margin: 0.2rem 0 0.4rem; }
.pack-price {
    font-family: var(--font-display);
    font-size: 0.8rem;
    color: var(--gold);
    text-shadow: 0 0 10px rgba(255, 209, 102, 0.4);
}

@media (max-width: 640px) {
    /* On phones the packs stack in one column; keeping them square would make
       them huge, so switch to a compact horizontal row (aspect ratio off). */
    .hero-pack-card { aspect-ratio: auto; flex-direction: row; display: flex; align-items: center; gap: 0.7rem; text-align: left; padding: 0.6rem 0.8rem; justify-content: flex-start; }
    .pack-icon { margin-bottom: 0; font-size: 1.5rem; }
    .pack-desc { margin: 0; }
    .pack-price { margin-left: auto; }
}

/* Locked mini-cards in Upgrades panel */
.hero-mini-card.is-locked { opacity: 0.55; }
.hero-mini-card.is-locked:hover { opacity: 0.8; }
.hero-mini-card.is-locked .label::after { content: ' 🔒'; font-size: 0.6rem; }

/* ---------- Footer ---------- */
.site-footer {
    margin-top: 3rem;
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg, transparent, rgba(6, 11, 22, 0.9));
    position: relative;
}

.site-footer::before {
    content: '';
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ice) 30%, var(--plasma) 70%, transparent);
    opacity: 0.45;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2rem;
}

@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-logo {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-logo span {
    background: linear-gradient(90deg, var(--ice-soft), var(--ice));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.footer-tagline { color: var(--faint); font-size: 0.82rem; margin-top: 0.6rem; max-width: 34ch; line-height: 1.5; }

.footer-col { display: flex; flex-direction: column; gap: 0.5rem; }

.footer-heading {
    font-family: var(--font-display);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ice);
    margin-bottom: 0.3rem;
}

.footer-link {
    color: var(--dim);
    font-size: 0.85rem;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
    width: fit-content;
}

.footer-link:hover { color: var(--frost); transform: translateX(3px); }

.footer-bottom {
    margin-top: 2.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(77, 232, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 0.72rem;
    color: var(--faint);
}

.footer-token { font-family: var(--font-display); letter-spacing: 0.08em; }

/* ===================================================================
   v8.2 — icon wallet buttons, small Demo, hamburger menu
   =================================================================== */

/* Icon-only wallet buttons */
.wallet-icon-btn {
    width: 40px;
    height: 40px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    border-radius: 0 !important;
}

/* Compact Demo button — sizing lives on .demo-mode-btn itself so it
   survives main.js rewriting className on demo-mode toggle */
.demo-mode-btn {
    padding: 0.45rem 0.9rem !important;
    font-size: 0.68rem !important;
    height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

/* Hamburger */
.menu-wrap { position: relative; }

.menu-toggle {
    width: 40px;
    height: 40px;
    clip-path: var(--clip-chip);
    background: rgba(13, 22, 38, 0.85) !important;
    border: 1px solid var(--line-strong) !important;
    color: var(--ice) !important;
    font-size: 1.15rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    text-shadow: 0 0 8px rgba(77, 232, 255, 0.6);
}

.menu-toggle:hover {
    border-color: var(--ice) !important;
    background: rgba(14, 165, 201, 0.2) !important;
    box-shadow: 0 0 14px rgba(77, 232, 255, 0.35);
}

.menu-toggle.open { color: var(--danger) !important; text-shadow: 0 0 8px rgba(255, 93, 115, 0.5); }

.menu-dropdown.hidden { display: none !important; }

.menu-dropdown {
    position: fixed;
    min-width: 200px;
    clip-path: var(--clip-panel);
    background: linear-gradient(160deg, rgba(77, 232, 255, 0.06), transparent 40%), var(--panel-hard);
    border: 1px solid var(--line-strong);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* fixed + very high z-index escapes the header's backdrop-filter /
       sticky stacking context entirely; position set by JS. */
    z-index: 3000;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 24px rgba(77, 232, 255, 0.08);
}

.menu-item {
    display: block;
    padding: 0.6rem 0.8rem;
    font-family: var(--font-display);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--frost);
    text-decoration: none;
    clip-path: var(--clip-chip);
    transition: all 0.2s ease;
}

.menu-item:hover {
    background: rgba(77, 232, 255, 0.1);
    color: var(--ice);
    transform: translateX(3px);
}

/* ===================================================================
   FX LAYER v1.0 — scroll & interaction effects
   =================================================================== */

/* Scroll progress bar */
.fx-scroll-progress {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 2px;
    z-index: 200;
    transform-origin: 0 50%;
    transform: scaleX(0);
    background: linear-gradient(90deg, var(--ice), var(--glacial) 55%, var(--plasma));
    box-shadow: 0 0 10px rgba(77, 232, 255, 0.6);
    pointer-events: none;
}

/* Header shrink */
header { transition: padding 0.3s ease, box-shadow 0.3s ease; }
header.fx-scrolled {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
header.fx-scrolled h1 { font-size: 1.15rem !important; transition: font-size 0.3s ease; }
header h1 { transition: font-size 0.3s ease; }

/* Scroll reveal */
.fx-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.fx-reveal.fx-in { opacity: 1; transform: none; }

/* Child cards start slightly lower inside a revealing section */
.fx-reveal .card-hover,
.fx-reveal .activity-card,
.fx-reveal .hero-pack-card {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.5s ease,
                border-color 0.25s ease, box-shadow 0.25s ease;
}
.fx-reveal .card-hover.fx-in,
.fx-reveal .activity-card.fx-in,
.fx-reveal .hero-pack-card.fx-in { opacity: 1; transform: none; }

/* Pointer spotlight: radial glow + border light following the cursor.
   Uses --fx-x / --fx-y set by fx.js. */
.card-hover, .activity-card, .hero-mini-card, .hero-pack-card,
.hero-news-item, .game-screen-panel,
main section > div[class*="bg-gradient-to-r"] {
    position: relative;
}

.fx-spot::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(
        220px circle at var(--fx-x, 50%) var(--fx-y, 50%),
        rgba(77, 232, 255, 0.10),
        transparent 65%
    );
    transition: opacity 0.3s ease;
}

main section > div[class*="bg-gradient-to-r"].fx-spot::after {
    background: radial-gradient(
        420px circle at var(--fx-x, 50%) var(--fx-y, 50%),
        rgba(77, 232, 255, 0.07),
        transparent 70%
    );
}

/* Tilt smoothing */
.fx-tilt {
    transition: transform 0.12s ease-out !important;
    will-change: transform;
    z-index: 2;
}

/* Click ripple */
.fx-ripple {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(155, 233, 255, 0.5), rgba(77, 232, 255, 0.15) 55%, transparent 70%);
    transform: scale(0);
    animation: fxRipple 0.6s ease-out forwards;
    pointer-events: none;
    z-index: 3;
}

@keyframes fxRipple {
    to { transform: scale(1); opacity: 0; }
}

/* Back-to-top */
.fx-top-btn {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: 46px;
    height: 46px;
    clip-path: var(--clip-chip);
    background: rgba(6, 11, 22, 0.85);
    border: 1px solid var(--line-strong);
    color: var(--ice);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 90;
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(6px);
    box-shadow: 0 0 18px rgba(77, 232, 255, 0.15);
}

.fx-top-btn.show { opacity: 1; transform: none; pointer-events: auto; }
.fx-top-btn:hover {
    border-color: var(--ice);
    background: rgba(14, 165, 201, 0.25);
    box-shadow: 0 0 26px rgba(77, 232, 255, 0.4);
    transform: translateY(-3px);
}

/* Decode heading target keeps layout stable */
.fx-decode-target { display: inline-block; min-width: 1ch; }

/* Hero title subtle chromatic hover */
.hero-title { transition: text-shadow 0.25s ease; }
.hero-title:hover {
    text-shadow:
        1.5px 0 0 rgba(255, 93, 115, 0.45),
        -1.5px 0 0 rgba(77, 232, 255, 0.55);
}

/* Focus visibility for accessibility (keyboard users) */
button:focus-visible, a:focus-visible, .hero-mini-card:focus-visible {
    outline: 2px solid var(--ice);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .fx-reveal { opacity: 1 !important; transform: none !important; }
    .fx-scroll-progress { display: none; }
}

/* ===================================================================
   ATMOSPHERE LAYER v1.0 — "Descent into the Cryo Lab"
   ticker · scroll rail w/ temperature · ghost indices · grain · tabs
   =================================================================== */

/* Skip link (a11y) */
.skip-link {
    position: fixed;
    top: -48px;
    left: 1rem;
    z-index: 300;
    background: var(--panel-hard);
    color: var(--ice);
    border: 1px solid var(--line-strong);
    padding: 0.6rem 1rem;
    clip-path: var(--clip-chip);
    font-family: var(--font-display);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: top 0.25s ease;
}
.skip-link:focus { top: 0.75rem; }

/* ---------- Status ticker ---------- */
.fx-ticker {
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background: rgba(4, 7, 13, 0.75);
    backdrop-filter: blur(6px);
    position: relative;
    z-index: 40;
    mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
    /* Fades out as the hero scrolls away. --fx-ticker-fade goes 1 -> 0,
       driven by fx.js. Collapses its own height so nothing jumps. */
    --fx-ticker-fade: 1;
    opacity: var(--fx-ticker-fade);
    transform: translateY(calc((1 - var(--fx-ticker-fade)) * -12px));
    transition: opacity 0.15s linear, transform 0.15s linear;
    pointer-events: var(--fx-ticker-pe, auto);
}

.fx-ticker-track {
    display: inline-flex;
    gap: 3rem;
    padding: 0.45rem 0;
    white-space: nowrap;
    animation: fxTicker 42s linear infinite;
    will-change: transform;
}

.fx-ticker-track span {
    font-family: var(--font-display);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--faint);
}

.fx-ticker-track span:nth-child(4n+1) { color: var(--ice); opacity: 0.8; }
.fx-ticker:hover .fx-ticker-track { animation-play-state: paused; }

@keyframes fxTicker {
    to { transform: translateX(-50%); }
}

/* ---------- Scroll rail: section nav + temperature gauge ---------- */
.fx-rail {
    position: fixed;
    left: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 80;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

@media (min-width: 1400px) { .fx-rail { display: flex; } }

.fx-rail-line {
    width: 1px;
    height: 46px;
    background: linear-gradient(180deg, transparent, var(--line-strong), transparent);
}

.fx-rail-dots { display: flex; flex-direction: column; gap: 0.9rem; }

.fx-rail-dot {
    position: relative;
    width: 10px;
    height: 10px;
    padding: 0;
    border: 1px solid rgba(77, 232, 255, 0.35);
    background: transparent;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); /* diamond */
    cursor: pointer;
    transition: all 0.25s ease;
}

.fx-rail-dot:hover { background: rgba(77, 232, 255, 0.3); }

.fx-rail-dot.active {
    background: var(--ice);
    box-shadow: 0 0 12px rgba(77, 232, 255, 0.8);
    transform: scale(1.3);
}

.fx-rail-dot .fx-rail-label {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%) translateX(-6px);
    font-family: var(--font-display);
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ice-soft);
    background: rgba(6, 11, 22, 0.9);
    border: 1px solid var(--line);
    padding: 0.25rem 0.55rem;
    clip-path: var(--clip-chip);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
}

.fx-rail-dot:hover .fx-rail-label,
.fx-rail-dot.active .fx-rail-label { opacity: 1; transform: translateY(-50%) translateX(0); }

.fx-rail-temp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-display);
}

.fx-rail-temp .temp-value {
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    color: var(--ice);
    text-shadow: 0 0 8px rgba(77, 232, 255, 0.5);
    writing-mode: vertical-rl;
}

.fx-rail-temp .temp-track {
    width: 3px;
    height: 64px;
    background: rgba(77, 232, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.fx-rail-temp .temp-fill {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 5%;
    background: linear-gradient(180deg, var(--ice), var(--glacial));
    box-shadow: 0 0 8px rgba(77, 232, 255, 0.7);
    transition: height 0.2s linear;
}

/* ---------- Ghost section indices ---------- */
main section { position: relative; }

.fx-index {
    position: absolute;
    top: -0.4em;
    right: 0.05em;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(4rem, 9vw, 7.5rem);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(77, 232, 255, 0.10);
    pointer-events: none;
    user-select: none;
    z-index: 0;
    will-change: transform;
}

.fx-index::after {
    content: attr(data-label);
    position: absolute;
    right: 0.1em;
    bottom: -1.1em;
    font-size: 0.115em;
    letter-spacing: 0.5em;
    -webkit-text-stroke: 0;
    color: rgba(77, 232, 255, 0.22);
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---------- Film grain ---------- */
.fx-grain {
    position: fixed;
    inset: -50%;
    z-index: 95;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: fxGrain 0.6s steps(3) infinite;
}

@keyframes fxGrain {
    0% { transform: translate(0, 0); }
    33% { transform: translate(-2%, 1%); }
    66% { transform: translate(1%, -2%); }
    100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) { .fx-grain { animation: none; } }

/* ---------- Boot lines on loading screen ---------- */
.fx-boot {
    margin-top: 1.25rem;
    font-family: 'Courier New', monospace;
    font-size: 0.68rem;
    color: rgba(77, 232, 255, 0.65);
    text-align: left;
    min-height: 4.2em;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}
.fx-boot div::before { content: '> '; color: var(--faint); }

/* ---------- Cursor ring (desktop) ---------- */
.fx-cursor {
    position: fixed;
    top: 0; left: 0;
    width: 26px;
    height: 26px;
    border: 1px solid rgba(77, 232, 255, 0.5);
    border-radius: 50%;
    pointer-events: none;
    z-index: 250;
    transform: translate(-50%, -50%);
    transition: width 0.18s ease, height 0.18s ease, border-color 0.18s ease, opacity 0.25s ease;
    mix-blend-mode: screen;
    opacity: 0;
}

.fx-cursor.on { opacity: 1; }
.fx-cursor.hoverable {
    width: 42px;
    height: 42px;
    border-color: rgba(77, 232, 255, 0.9);
    box-shadow: 0 0 16px rgba(77, 232, 255, 0.35);
}

/* ---------- Upgrades tabs ---------- */
.hero-tabs {
    display: flex;
    gap: 2px;
    padding: 0.75rem 1.5rem 0;
}

.hero-tab {
    flex: 1;
    padding: 0.55rem 0.75rem;
    background: rgba(13, 22, 38, 0.7);
    border: 1px solid rgba(77, 232, 255, 0.12);
    border-bottom: none;
    color: var(--dim);
    font-family: var(--font-display);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
    transition: all 0.2s ease;
}

.hero-tab:hover { color: var(--ice-soft); background: rgba(77, 232, 255, 0.06); }

.hero-tab.active {
    color: var(--ice);
    background: rgba(77, 232, 255, 0.1);
    border-color: rgba(77, 232, 255, 0.35);
    text-shadow: 0 0 8px rgba(77, 232, 255, 0.5);
}

.hero-tab-pane.hidden { display: none !important; }

.hero-panel-body-inner--skills { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 480px) { .hero-panel-body-inner--skills { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .hero-panel-body-inner--skills { grid-template-columns: repeat(5, 1fr); } }

/* ===================================================================
   COMMAND CENTER launchers + MODAL system (Activities / Upgrades)
   =================================================================== */

/* Launchers */
.cmd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 640px) { .cmd-grid { grid-template-columns: 1fr; } }

.cmd-trigger {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    text-align: left;
    padding: 1.25rem 1.5rem;
    clip-path: var(--clip-panel);
    border: 1px solid var(--line-strong);
    background:
        linear-gradient(160deg, rgba(77, 232, 255, 0.06), transparent 45%),
        var(--panel);
    backdrop-filter: blur(10px);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    animation: glowBreath 7s ease-in-out infinite;
}

.cmd-trigger::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, var(--line-strong), var(--line-strong)) top left / 26px 1px no-repeat,
        linear-gradient(0deg,  var(--line-strong), var(--line-strong)) top left / 1px 26px no-repeat,
        linear-gradient(90deg, var(--line-strong), var(--line-strong)) bottom right / 26px 1px no-repeat,
        linear-gradient(0deg,  var(--line-strong), var(--line-strong)) bottom right / 1px 26px no-repeat;
    pointer-events: none;
}

.cmd-trigger:hover {
    transform: translateY(-4px);
    border-color: var(--ice);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 28px rgba(77, 232, 255, 0.2);
}

.cmd-trigger--upgrades:hover { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 28px rgba(167, 139, 250, 0.25); }
.cmd-trigger--upgrades { border-color: rgba(167, 139, 250, 0.4); }

.cmd-icon {
    font-size: 2rem;
    filter: drop-shadow(0 0 12px rgba(77, 232, 255, 0.5));
    flex: 0 0 auto;
}

.cmd-text { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; }

.cmd-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--frost);
}

.cmd-sub { font-size: 0.72rem; color: var(--dim); }

.cmd-arrow {
    font-size: 1.2rem;
    color: var(--ice);
    transition: transform 0.25s ease;
}
.cmd-trigger:hover .cmd-arrow { transform: translateX(5px); }

/* ---------- Modal ---------- */
body.fx-modal-lock { overflow: hidden; }

.fx-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.fx-modal[hidden] { display: none; }

.fx-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 4, 10, 0.72);
    backdrop-filter: blur(8px) saturate(0.85);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.fx-modal.open .fx-modal-backdrop { opacity: 1; }

.fx-modal-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 760px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    clip-path: var(--clip-panel);
    border: 1px solid var(--line-strong);
    background:
        linear-gradient(160deg, rgba(77, 232, 255, 0.06), transparent 40%),
        var(--panel-hard);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65), 0 0 50px rgba(77, 232, 255, 0.1);
    transform: translateY(24px) scale(0.98);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.32s ease;
}
.fx-modal.open .fx-modal-panel { transform: none; opacity: 1; }

.fx-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--line);
    background: rgba(6, 11, 22, 0.6);
}

.fx-modal-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ice-soft);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
}

.fx-modal-close {
    width: 38px;
    height: 38px;
    clip-path: var(--clip-chip);
    background: rgba(13, 22, 38, 0.85);
    border: 1px solid var(--line-strong);
    color: var(--ice);
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.fx-modal-close:hover {
    border-color: var(--danger);
    color: var(--danger);
    background: rgba(255, 93, 115, 0.12);
    transform: rotate(90deg);
}

.fx-modal-body {
    padding: 1.25rem 1.5rem 1.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Reset the extracted panel bodies for modal context (they used accordion vars) */
.fx-modal-body .hero-panel-body-inner { padding: 0; }
.fx-modal-body .hero-tabs { padding: 0 0 0.75rem; }

@media (max-width: 640px) {
    .fx-modal { padding: 0; align-items: flex-end; }
    .fx-modal-panel {
        max-width: none;
        max-height: 90vh;
        clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%, 0 16px);
    }
    .fx-modal.open .fx-modal-panel { transform: none; }
    .fx-modal-panel { transform: translateY(40px); }
}

/* ===================================================================
   TOP FEATURE BANNER — wide, under the header (taller than global boost)
   =================================================================== */
.top-banner {
    padding: 1rem 1.5rem 0;
}
@media (max-width: 640px) { .top-banner { padding: 0.75rem 1rem 0; } }

/* When placed inside <main> (already padded), drop the horizontal padding
   and give it normal section spacing below the hero. */
.top-banner--inmain {
    padding: 0;
    margin-bottom: 2rem;
}

.top-banner-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    /* taller so the full-bleed artwork has room to read */
    min-height: 180px;
    padding: 1.6rem 1.9rem;
    clip-path: var(--clip-panel);
    overflow: hidden;
    border: 1px solid var(--line-strong);
    background: var(--panel-hard);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(77, 232, 255, 0.08);
}

@media (max-width: 760px) {
    .top-banner-inner { flex-direction: column; align-items: flex-start; text-align: left; min-height: 0; }
}

.top-banner-glow {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: none;
}

.top-banner-left { position: relative; z-index: 2; flex: 1; }

.top-banner-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-display);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ice);
    background: rgba(77, 232, 255, 0.1);
    border: 1px solid rgba(77, 232, 255, 0.3);
    padding: 0.3rem 0.6rem;
    clip-path: var(--clip-chip);
    margin-bottom: 0.6rem;
}

.top-banner-title {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2.2vw, 1.5rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0 0 0.35rem;
    background: linear-gradient(90deg, #fff, var(--ice-soft) 70%, var(--ice));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.8));
}

.top-banner-sub {
    font-size: 0.85rem;
    color: #cdddf2;
    margin: 0;
    max-width: 62ch;
    line-height: 1.45;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}

.top-banner-actions {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* Full-bleed background artwork filling the whole featured block, above the frame */
.top-banner-bg {
    position: absolute;
    inset: -1px;
    object-fit: cover;
    z-index: 1;
    display: block;
}

/* Placeholder while no asset is present */
.top-banner-bg.is-empty {
    background:
        repeating-linear-gradient(-45deg, rgba(77,232,255,0.05) 0 14px, transparent 14px 28px),
        radial-gradient(60% 120% at 85% 20%, rgba(167,139,250,0.16), transparent 60%),
        var(--panel-hard);
}
.top-banner-bg.is-empty::after {
    content: '🖼️ featured artwork';
    position: absolute;
    right: 1.25rem;
    bottom: 0.9rem;
    font-family: var(--font-display);
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--faint);
}

/* Light scrim only on the left, keeps text readable without dimming the art */
.top-banner-scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(90deg, rgba(6,11,22,0.6) 0%, rgba(6,11,22,0.25) 32%, rgba(6,11,22,0) 55%);
    pointer-events: none;
}

@media (max-width: 640px) {
    .top-banner-scrim {
        background: linear-gradient(180deg, rgba(6,11,22,0.15) 0%, rgba(6,11,22,0.45) 60%, rgba(6,11,22,0.65) 100%);
    }
}

.top-banner-content {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: center;
}

.top-banner-cta {
    clip-path: var(--clip-btn);
    padding: 0.8rem 1.6rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #fff;
    border: 1px solid rgba(155, 233, 255, 0.5);
    background: linear-gradient(45deg, #0ea5c9, #3d7bfd);
    box-shadow: 0 0 20px rgba(14, 165, 201, 0.35);
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}
.top-banner-cta:hover { transform: translateY(-2px); box-shadow: 0 0 30px rgba(14, 165, 201, 0.55); }



/* Working-slots "(0/5)" is kept in the DOM for game-mechanics.js but hidden
   from view on every screen size (earlier design decision). */
#working-slots-info { display: none !important; }

/* Header layout made robust independent of Tailwind's flex utilities:
   define the row + right cluster explicitly so it never collapses to block. */
header .max-w-6xl {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
header .max-w-6xl > .flex.flex-row.items-center {
    display: flex;
    flex-direction: row;
    align-items: center;
}
/* Respect Tailwind's .hidden: only lay out these as flex when NOT hidden,
   otherwise the ID selector's specificity would override .hidden and the
   connect buttons would stay visible after a wallet connects. */
#wallet-selection:not(.hidden) { display: flex; flex-direction: row; align-items: center; }
#wallet-connected:not(.hidden) { display: flex; }
.hidden { display: none !important; }

/* ===================================================================
   MOBILE HEADER — logo-only brand, icon-only HUD, compact wallets,
   Demo tucked into the hamburger menu
   =================================================================== */

/* Demo lives ONLY in the hamburger menu now (removed from the header), so the
   menu item is always shown. */
.menu-demo-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
    color: var(--frost);
}

@media (max-width: 640px) {
    /* --- Header layout: brand left, everything else in a tight cluster right --- */
    header { padding: 0.55rem 0.7rem !important; }
    header .max-w-6xl {
        gap: 0.5rem !important;
        flex-wrap: nowrap;
    }

    /* Brand: show only the glyph, hide the wordmark */
    .brand-text { display: none; }
    .brand-glyph { font-size: 1.5rem; }
    header h1 { font-size: 1.5rem !important; }

    /* The whole right-side cluster: single row, no wrapping, no stretching */
    header .max-w-6xl > .flex.flex-row.items-center {
        gap: 0.4rem !important;
        flex-wrap: nowrap;
        flex: 0 1 auto;
        min-width: 0;
    }

    /* HUD chips: icons + numbers only, compact, never stretched */
    .hud-label { display: none; }
    #working-slots-info { display: none !important; }
    #earning-rate-display,
    #token-balance-chip,
    header .max-w-6xl .flex.items-center.gap-1\.5 {
        padding: 0.35rem 0.5rem !important;
        flex: 0 0 auto;
        gap: 0.3rem !important;
    }
    #earning-rate-display #earning-rate,
    #token-balance { font-size: 0.8rem; }

    /* Wallet buttons: fixed square size, never stretched */
    #wallet-section { width: auto !important; flex: 0 0 auto; }
    #wallet-selection { gap: 0.35rem !important; flex-wrap: nowrap; }
    #wallet-selection .wallet-icon-btn {
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 auto;
        padding: 0 !important;
        font-size: 1rem;
    }

    /* Demo button leaves the header on mobile → into the hamburger menu */
    #demo-mode-btn { display: none !important; }
    .menu-demo-item { display: block; }

    .menu-toggle { width: 34px !important; height: 34px !important; flex: 0 0 auto; }
}

/* Very narrow phones: the earning-rate chip is optional; drop it to save room */
@media (max-width: 400px) {
    #earning-rate-display { display: none !important; }
}

/* ===================================================================
   ABOUT PROJECT / ABOUT TEAM
   =================================================================== */
/* About project — horizontal slider of parts */
.about-slider {
    position: relative;
    overflow: hidden;
    clip-path: var(--clip-panel);
    border: none;
    background: transparent;
}
.about-track {
    display: flex;
    transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
}
.about-slide {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: stretch;
    /* extra side padding so the content clears the nav arrows (arrow inner
       edge sits at ~0.6rem + 38px ≈ 48px; content starts well past that) */
    padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(4.5rem, 6vw, 5rem);
}
@media (max-width: 760px) { .about-slide { grid-template-columns: 1fr; padding: 1.25rem 1.25rem 3.25rem; } }

/* media slot (image / gif / video) */
.about-media {
    position: relative;
    align-self: stretch;
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.about-media-img,
.about-media video {
    width: 100%;
    height: 100%;
    max-height: 340px;
    object-fit: cover;
    display: block;
    clip-path: var(--clip-panel);
    border: 1px solid rgba(77, 232, 255, 0.4);
    filter: none;
}
.about-media-img.is-empty {
    min-height: 260px;
    background:
        repeating-linear-gradient(-45deg, rgba(77,232,255,0.06) 0 16px, transparent 16px 32px),
        radial-gradient(70% 90% at 50% 40%, rgba(77,232,255,0.10), transparent 70%),
        rgba(6, 11, 22, 0.6);
    position: relative;
}
.about-media-img.is-empty::after {
    content: '▶ media';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(77, 232, 255, 0.4);
}
/* framed corner accents (match the news slide media) */
.about-media-corner {
    position: absolute;
    width: 24px; height: 24px;
    border: 2px solid var(--ice);
    opacity: 0.7;
    pointer-events: none;
}
.about-media-corner--tl { top: -6px; left: -6px; border-right: none; border-bottom: none; }
.about-media-corner--br { bottom: -6px; right: -6px; border-left: none; border-top: none; }

/* copy column: eyebrow + title + a scrollable text field */
.about-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}
.about-copy-eyebrow {
    font-family: var(--font-display);
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ice);
    margin-bottom: 0.5rem;
}
.about-copy-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.1rem, 2.2vw, 1.4rem);
    letter-spacing: 0.01em;
    color: var(--frost);
    margin: 0 0 0.9rem;
}
.about-lead {
    /* scrollable text field: caps height and scrolls when copy is long */
    overflow-y: auto;
    max-height: 220px;
    padding-right: 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(77,232,255,0.35) transparent;
    /* soft fade at the bottom hints there's more to read */
    mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
}
.about-lead::-webkit-scrollbar { width: 6px; }
.about-lead::-webkit-scrollbar-thumb { background: rgba(77,232,255,0.3); border-radius: 3px; }
.about-lead p {
    color: var(--dim);
    line-height: 1.7;
    margin: 0 0 1rem;
    font-size: 0.95rem;
}
.about-lead p:last-child { margin-bottom: 0; }
@media (max-width: 760px) { .about-lead { max-height: 180px; } }

/* slider arrows */
.about-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    clip-path: var(--clip-chip);
    background: rgba(6, 11, 22, 0.8);
    border: 1px solid var(--line);
    color: var(--ice-soft);
    font-size: 1.3rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 4;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
}
.about-arrow:hover { color: var(--ice); border-color: var(--line-strong); background: rgba(14, 165, 201, 0.35); }
.about-arrow--prev { left: 0.6rem; }
.about-arrow--next { right: 0.6rem; }
.about-arrow[disabled] { opacity: 0.25; cursor: default; pointer-events: none; }
@media (max-width: 760px) {
    /* on mobile move arrows to the bottom so they never sit over the media/text */
    .about-arrow { top: auto; bottom: 0.6rem; transform: none; width: 34px; height: 34px; font-size: 1.1rem; }
}

/* pager under the stats: dots + a swipe hint */
.about-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.2rem;
}
.about-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    cursor: pointer;
    background: rgba(155, 233, 255, 0.25);
    clip-path: polygon(2px 0, 100% 0, 100% calc(100% - 2px), calc(100% - 2px) 100%, 0 100%, 0 2px);
    transition: all 0.25s ease;
}
.about-dot.is-active {
    width: 24px;
    background: linear-gradient(90deg, var(--ice), var(--glacial));
    box-shadow: 0 0 10px rgba(77, 232, 255, 0.6);
}
.about-hint {
    margin-left: 0.6rem;
    font-family: var(--font-display);
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--faint);
    animation: aboutHintPulse 2.4s ease-in-out infinite;
}
@keyframes aboutHintPulse { 0%,100% { opacity: 0.4; transform: translateX(0); } 50% { opacity: 0.9; transform: translateX(3px); } }

/* stats: one row of four below, with clear separation between them */
.about-facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
@media (max-width: 760px) { .about-facts { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; } }
@media (max-width: 420px) { .about-facts { grid-template-columns: 1fr; } }

.about-fact {
    position: relative;
    clip-path: var(--clip-chip);
    background:
        linear-gradient(160deg, rgba(77,232,255,0.05), transparent 45%),
        rgba(6, 11, 22, 0.7);
    border: 1px solid rgba(77, 232, 255, 0.16);
    padding: 1.2rem 1rem;
    text-align: center;
    transition: transform 0.25s ease, border-color 0.25s ease;
}
.about-fact:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.about-fact-num {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(120deg, var(--ice), var(--plasma));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.about-fact-label {
    font-family: var(--font-display);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faint);
    margin-top: 0.4rem;
}

/* Team */
.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
@media (max-width: 760px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .team-grid { grid-template-columns: 1fr; } }

.team-card {
    clip-path: var(--clip-panel);
    background:
        linear-gradient(160deg, rgba(167, 139, 250, 0.08), transparent 45%),
        rgba(6, 11, 22, 0.7);
    border: 1px solid var(--line-strong);
    padding: 1.5rem 1rem;
    text-align: center;
    transition: all 0.25s ease;
}
.team-card:hover {
    transform: translateY(-4px);
    border-color: rgba(77, 232, 255, 0.45);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(77, 232, 255, 0.15);
}
.team-avatar {
    font-size: 2.6rem;
    margin-bottom: 0.7rem;
    filter: drop-shadow(0 0 12px rgba(77, 232, 255, 0.35));
}
.team-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
    margin-bottom: 0.25rem;
}
.team-role {
    font-size: 0.78rem;
    color: var(--dim);
    line-height: 1.4;
}

/* ===================================================================
   SECTION RHYTHM & DIVIDERS  — cohesive spacing + a signature seam
   between major blocks so the page reads as deliberate chapters,
   not a uniform stack.
   =================================================================== */

/* Deliberate vertical rhythm. Sections keep a modest gap; the seam dividers
   add the larger "chapter" breaks between major blocks. Dynamically-shown
   sections (chambers, workers…) therefore still breathe even without a seam. */
#main-content > .max-w-6xl > section { margin-bottom: 1.5rem; }
#main-content > .max-w-6xl > .cryo-seam + section { margin-top: 0; }

/* The seam divider element (inserted between major sections) */
.cryo-seam {
    --seam-accent: var(--ice);
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: clamp(3rem, 6vw, 4.75rem) 0;
}

.cryo-seam::before,
.cryo-seam::after {
    content: '';
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, transparent, rgba(77, 232, 255, 0.28), transparent);
}
.cryo-seam::before { background: linear-gradient(90deg, transparent, rgba(77, 232, 255, 0.28)); }
.cryo-seam::after  { background: linear-gradient(90deg, rgba(77, 232, 255, 0.28), transparent); }

.cryo-seam-node {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-display);
    font-size: 0.6rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--faint);
    white-space: nowrap;
}
.cryo-seam-node .diamond {
    width: 9px; height: 9px;
    background: var(--seam-accent);
    transform: rotate(45deg);
    box-shadow: 0 0 12px var(--seam-accent);
}
.cryo-seam-node .idx { color: var(--ice); }

/* subtle chapter number ghost behind the seam */
.cryo-seam-ghost {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(3rem, 8vw, 5.5rem);
    line-height: 1;
    color: rgba(77, 232, 255, 0.035);
    pointer-events: none;
    user-select: none;
    letter-spacing: 0.05em;
}

@media (max-width: 640px) {
    .cryo-seam { margin: 2.5rem 0; }
    .cryo-seam-node { font-size: 0.54rem; letter-spacing: 0.2em; }
}

/* ===================================================================
   UNIFIED SECTION HEADER — one visual language for every block title
   =================================================================== */
.sec-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.75rem;
}
.sec-head .sec-ico {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    clip-path: var(--clip-chip);
    background: linear-gradient(160deg, rgba(77,232,255,0.14), transparent 60%), rgba(6, 11, 22, 0.8);
    border: 1px solid rgba(77, 232, 255, 0.28);
    box-shadow: 0 0 18px rgba(77, 232, 255, 0.1);
}
.sec-head .sec-titles { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.sec-head .sec-kicker {
    font-family: var(--font-display);
    font-size: 0.58rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ice);
    opacity: 0.85;
}
.sec-head .sec-title {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.05;
    margin: 0;
    color: var(--frost);
}
.sec-head .sec-rule {
    flex: 1;
    height: 1px;
    align-self: center;
    background: linear-gradient(90deg, rgba(77, 232, 255, 0.22), transparent);
    min-width: 24px;
}

@media (max-width: 640px) {
    .sec-head { gap: 0.65rem; margin-bottom: 1.25rem; }
    .sec-head .sec-ico { width: 36px; height: 36px; font-size: 1.05rem; }
    .sec-head .sec-rule { display: none; }
}

/* ===================================================================
   ROADMAP — vertical phase timeline
   =================================================================== */
.roadmap-track {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
/* the spine */
.roadmap-track::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: linear-gradient(180deg, rgba(77,232,255,0.5), rgba(77,232,255,0.12));
}
.roadmap-item {
    position: relative;
    display: flex;
    gap: 1.1rem;
    padding: 0 0 1.5rem 2.4rem;
}
.roadmap-item:last-child { padding-bottom: 0; }

.roadmap-node {
    position: absolute;
    left: 3px;
    top: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--panel-hard, #0b1220);
    border: 2px solid rgba(77, 232, 255, 0.4);
    z-index: 1;
}
.roadmap-item.is-done .roadmap-node {
    background: var(--ice);
    border-color: var(--ice);
    box-shadow: 0 0 12px rgba(77, 232, 255, 0.6);
}
.roadmap-item.is-active .roadmap-node {
    border-color: var(--ice);
    box-shadow: 0 0 0 4px rgba(77, 232, 255, 0.12), 0 0 14px rgba(77, 232, 255, 0.5);
    animation: roadmapPulse 2s ease-in-out infinite;
}
@keyframes roadmapPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(77,232,255,0.12), 0 0 14px rgba(77,232,255,0.5); }
    50% { box-shadow: 0 0 0 7px rgba(77,232,255,0.05), 0 0 18px rgba(77,232,255,0.7); }
}

.roadmap-body {
    flex: 1;
    clip-path: var(--clip-panel);
    background:
        linear-gradient(160deg, rgba(77,232,255,0.05), transparent 45%),
        rgba(6, 11, 22, 0.6);
    border: 1px solid var(--line-strong, rgba(77,232,255,0.16));
    padding: 1rem 1.2rem;
    transition: border-color 0.25s ease, transform 0.25s ease;
}
.roadmap-item.is-active .roadmap-body {
    border-color: rgba(77, 232, 255, 0.4);
    box-shadow: 0 0 24px rgba(77, 232, 255, 0.1);
}
.roadmap-body:hover { transform: translateX(3px); border-color: rgba(77, 232, 255, 0.4); }

.roadmap-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.4rem;
}
.roadmap-phase {
    font-family: var(--font-display);
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ice);
}
.roadmap-status {
    font-family: var(--font-display);
    font-size: 0.55rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.18rem 0.5rem;
    clip-path: var(--clip-chip);
    color: var(--faint);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.roadmap-item.is-done .roadmap-status {
    color: #7bffb0;
    background: rgba(77, 255, 158, 0.08);
    border-color: rgba(77, 255, 158, 0.3);
}
.roadmap-item.is-active .roadmap-status {
    color: var(--ice);
    background: rgba(77, 232, 255, 0.1);
    border-color: rgba(77, 232, 255, 0.35);
}
.roadmap-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
    margin: 0 0 0.35rem;
    color: var(--frost);
}
.roadmap-text {
    font-size: 0.85rem;
    color: var(--dim);
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 640px) {
    .roadmap-item { padding-left: 2.1rem; gap: 0.8rem; }
    .roadmap-body { padding: 0.85rem 1rem; }
    .roadmap-title { font-size: 0.98rem; }
}

/* ===================================================================
   TREASURY VAULTS — brought into the site's design language, with a
   "cryo terminal" readout for the balance numbers.
   =================================================================== */
.vault-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
}
@media (max-width: 760px) { .vault-grid { grid-template-columns: 1fr; } }

.vault {
    --vault-accent: var(--ice);
    position: relative;
    clip-path: var(--clip-panel);
    background:
        linear-gradient(160deg, rgba(77, 232, 255, 0.05), transparent 42%),
        rgba(6, 11, 22, 0.66);
    border: 1px solid var(--line);
    border-top: 3px solid var(--vault-accent);
    padding: 1.15rem 1.2rem 1.25rem;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
}
.vault::after {
    content: '';
    position: absolute;
    right: -30%;
    top: -60%;
    width: 70%;
    height: 160%;
    background: radial-gradient(circle, color-mix(in srgb, var(--vault-accent) 14%, transparent), transparent 70%);
    pointer-events: none;
}
.vault:hover {
    transform: translateY(-4px);
    border-color: var(--line-strong);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 26px color-mix(in srgb, var(--vault-accent) 18%, transparent);
}
.vault--bsc  { --vault-accent: var(--gold); }
.vault--wax  { --vault-accent: var(--ember); }
.vault--hive { --vault-accent: var(--ice); }

.vault-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
}
.vault-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    color: var(--frost);
}
.vault-ico { font-size: 1.05rem; }

/* status pill — reuses game-driven .treasury-status/.treasury-online ids */
.vault-status.treasury-status {
    font-family: var(--font-display);
    font-size: 0.55rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.24rem 0.5rem;
    clip-path: var(--clip-chip);
    color: var(--alive);
    background: rgba(52, 245, 197, 0.1);
    border: 1px solid rgba(52, 245, 197, 0.3);
    white-space: nowrap;
}

.vault-addr {
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    color: var(--faint);
    margin-bottom: 0.9rem;
}

/* the cryo-terminal balance readout */
.vault-balance {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}
.vault-num {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--vault-accent);
    text-shadow: 0 0 14px color-mix(in srgb, var(--vault-accent) 40%, transparent);
    font-variant-numeric: tabular-nums;
}
.vault-unit {
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    color: var(--dim);
}
.vault-token {
    font-family: var(--font-display);
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
}

.vault-actions {
    margin-top: 1.1rem;
    display: flex;
    justify-content: center;
}
/* shared quiet "ghost" button used across upgraded sections */
.ghost-btn {
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ice-soft);
    background: rgba(77, 232, 255, 0.06);
    border: 1px solid var(--line);
    clip-path: var(--clip-btn);
    padding: 0.6rem 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.ghost-btn:hover {
    color: var(--ice);
    border-color: var(--line-strong);
    background: rgba(77, 232, 255, 0.12);
    transform: translateY(-2px);
}

/* ===================================================================
   OUTRO / FAREWELL IMAGE BAND  (hero-sized, full-bleed under the content)
   =================================================================== */
.outro {
    position: relative;
    width: 100%;
    height: clamp(360px, 48vh, 520px);
    margin-top: clamp(3rem, 6vw, 4.5rem);
    clip-path: var(--clip-panel);
    overflow: hidden;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.outro-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    display: block;
}
.outro-img.is-empty {
    background:
        radial-gradient(60% 80% at 50% 40%, rgba(77, 232, 255, 0.14), transparent 70%),
        repeating-linear-gradient(-45deg, rgba(77,232,255,0.05) 0 18px, transparent 18px 36px),
        linear-gradient(180deg, #081120, #04070d);
}
.outro-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(65% 65% at 50% 55%, rgba(4,7,13,0.4) 0%, transparent 68%);
    pointer-events: none;
}
.outro-content {
    position: relative;
    z-index: 2;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.outro-glyph {
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    filter: drop-shadow(0 0 18px rgba(77, 232, 255, 0.4));
    margin-bottom: 0.75rem;
    animation: outroFloat 5s ease-in-out infinite;
    display: none;
}
/* frosted-glass panel behind the outro text (same material as Hero) */
.outro-glass {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    margin-bottom: 1.4rem;
    background: rgba(4, 8, 16, 0.82);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(77, 232, 255, 0.16);
    border-radius: 14px;
    box-shadow: 0 8px 36px rgba(0, 0, 0, 0.45);
}
.outro-glass .outro-title { margin-bottom: 0.3rem; }
.outro-glass .outro-sub { margin-bottom: 0; }
@keyframes outroFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.outro-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.8rem, 4.5vw, 3rem);
    letter-spacing: 0.04em;
    margin: 0 0 0.5rem;
    background: linear-gradient(90deg, #fff, var(--ice-soft) 60%, var(--ice));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.85));
}
.outro-sub {
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ice);
    margin: 0 0 1.6rem;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

/* ===================================================================
   FOOTER LEGAL / DISCLAIMER
   =================================================================== */
.footer-disclaimer {
    margin-top: 1.5rem;
    padding: 1rem 1.2rem;
    clip-path: var(--clip-chip);
    background: rgba(6, 11, 22, 0.5);
    border: 1px solid rgba(77, 232, 255, 0.1);
}
.footer-disclaimer p {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.6;
    color: var(--faint);
    letter-spacing: 0.01em;
}
.footer-legal-links { display: inline-flex; align-items: center; gap: 0.5rem; }
.footer-legal-links a {
    color: var(--dim);
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-legal-links a:hover { color: var(--ice); }
.footer-legal-links .sep { color: var(--faint); }

@media (max-width: 640px) {
    .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; align-items: center; }
}

/* ===================================================================
   LAB SHOP PACK CARDS — price + button always aligned across all cards
   =================================================================== */
.shop-pack {
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* description grows to fill the gap so the foot row is pushed to a shared
   baseline regardless of how long the title or description is */
.shop-pack .shop-pack-desc {
    flex: 1 1 auto;
}
/* the price + button row sits at the bottom of every card, so it lines up */
.shop-pack .shop-pack-foot {
    margin-top: auto;
}

/* Single Solana treasury vault */
.vault-grid--single { grid-template-columns: minmax(0, 460px); justify-content: center; }
.vault--sol { --vault-accent: #14f195; }  /* Solana green */
.vault--sol .vault-ico { color: #14f195; }

/* Footer social / contact icons (inline SVG for crisp, consistent rendering) */
.footer-link { display: inline-flex; align-items: center; gap: 0.55rem; }
.footer-ic {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    fill: currentColor;
    opacity: 0.85;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.footer-link:hover .footer-ic { opacity: 1; transform: translateY(-1px); }


/* ============================================================
   TEMP — hidden from the site for now, kept in the code/DOM.
   Command Center + Skills & Upgrades will move into the in-game
   screen later. Remove these rules to bring them back.
   ============================================================ */
#command-center,
#skills-section { display: none !important; }

/* ============================================================
   Demo -> connect prompt (shown when a demo user hits Play / Buy)
   ============================================================ */
body.demo-connect-lock { overflow: hidden; }

.demo-connect-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}
.demo-connect-modal.hidden { display: none; }

.demo-connect-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 6, 13, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.demo-connect-panel {
    position: relative;
    width: min(440px, 100%);
    text-align: center;
    padding: 2rem 1.75rem 1.6rem;
    background: linear-gradient(160deg, #0b1626, #0a1120 70%, #0b1626);
    border: 1px solid rgba(77, 232, 255, 0.28);
    clip-path: var(--clip-panel, none);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 40px rgba(77, 232, 255, 0.12);
    animation: demoConnectIn 0.28s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
@keyframes demoConnectIn {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

.demo-connect-x {
    position: absolute;
    top: 0.6rem;
    right: 0.7rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7f93ad;
    background: transparent;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    transition: color 0.2s ease;
}
.demo-connect-x:hover { color: #e6f6ff; }

.demo-connect-icon {
    font-size: 2.6rem;
    line-height: 1;
    margin-bottom: 0.6rem;
    filter: drop-shadow(0 0 18px rgba(77, 232, 255, 0.4));
}

.demo-connect-title {
    font-family: var(--font-display, inherit);
    font-size: 1.35rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #eaf6ff;
    margin: 0 0 0.5rem;
}

.demo-connect-text {
    font-size: 0.92rem;
    line-height: 1.5;
    color: #aebfd6;
    margin: 0 auto 1.25rem;
    max-width: 34ch;
}

.demo-connect-wallets {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.demo-connect-wallet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.85rem 1rem;
    font-family: var(--font-display, inherit);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #04121c;
    background: linear-gradient(90deg, #4de8ff, #34f5c5);
    border: none;
    clip-path: var(--clip-chip, none);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
    box-shadow: 0 0 24px rgba(77, 232, 255, 0.35);
}
.demo-connect-wallet:hover { transform: translateY(-1px); filter: brightness(1.05); }
.demo-connect-wallet span { font-size: 1.1rem; }

.demo-connect-continue {
    background: transparent;
    border: none;
    color: #7f93ad;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    padding: 0.35rem 0.5rem;
    transition: color 0.2s ease;
}
.demo-connect-continue:hover { color: #cfe0f3; text-decoration: underline; }


/* ===================================================================
   CRYOCORE v8.1 — DESIGN REFINEMENT LAYER
   Surgical polish on top of v8.0. Purely additive / overriding; no
   existing rule is deleted. Grouped so any single change is easy to find,
   tweak, or revert. Everything here respects prefers-reduced-motion.
   =================================================================== */

/* -------------------------------------------------------------------
   1. HERO · "Special Packs" slide — balance fix
   Before: the pack block was capped at 680px and left-hugged inside a
   wide slide, leaving a large dead zone on the right (the "shifted /
   broken" look). Now the block is centered and the cards are given a
   calmer landscape proportion so the row breathes inside the frame.
   ------------------------------------------------------------------- */
.hero-slide--packs { justify-content: center; align-items: center; }
.hero-slide--packs .hero-slide-content {
    max-width: 760px !important;   /* beats the inline max-width:680 */
    margin-inline: auto;
    width: 100%;
    text-align: center;            /* centers eyebrow + title as a unit */
    padding-top: 0;                /* was bumped down; now vertically centered */
}
.hero-slide--packs .hero-eyebrow { margin-inline: auto; }

@media (min-width: 641px) {
    /* drop the hard 1:1 square for a steadier landscape card */
    .hero-slide--packs .hero-pack-card {
        aspect-ratio: auto;
        min-height: 176px;
        justify-content: center;
        padding: 1.15rem 0.9rem;
    }
    /* the featured pack sits slightly proud so the eye lands on it first */
    .hero-slide--packs .hero-pack-card--featured { transform: translateY(-6px); }
    .hero-slide--packs .hero-pack-card--featured:hover { transform: translateY(-10px); }
}

/* -------------------------------------------------------------------
   2. HEADER · align every control to one 40px baseline
   The stat chips used Tailwind py-2 (~35px) while the wallet / menu
   buttons are 40px, so the row sat a few px out of true. Lock the
   chips to the same optical height.
   ------------------------------------------------------------------- */
@media (min-width: 641px) {
    #earning-rate-display,
    #token-balance-chip {
        min-height: 40px;
        align-items: center;
    }
}

/* -------------------------------------------------------------------
   3. SECTION HEADERS · HUD end-cap on the rule
   A small diamond terminator turns the trailing hairline into a
   deliberate readout instead of a fading line. Rule is already hidden
   on mobile, so this is desktop-only by inheritance.
   ------------------------------------------------------------------- */
.sec-head .sec-rule { position: relative; overflow: visible; }
.sec-head .sec-rule::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 7px;
    height: 7px;
    transform: translateY(-50%) rotate(45deg);
    background: var(--ice);
    box-shadow: 0 0 9px rgba(77, 232, 255, 0.65);
    opacity: 0.75;
}

/* -------------------------------------------------------------------
   4. CARDS · HUD top-edge readout on hover
   Shop packs, treasury vaults and JS-generated NFT cards all share
   .card-hover. A thin scan-line lights along the top edge on hover,
   tying every panel to the same instrument-panel language. The
   card's clip-path naturally trims the line at the cut corner.
   ------------------------------------------------------------------- */
.card-hover { position: relative; }
.card-hover::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(77, 232, 255, 0.55), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 2;
}
.card-hover:hover::before { opacity: 1; }

/* -------------------------------------------------------------------
   5. BUTTONS · light sweep on hover
   The reskinned HUD buttons already lift + brighten; a single sheen
   pass adds the "energized" feel without adding permanent motion.
   Clipped to the button's polygon by the existing clip-path.
   ------------------------------------------------------------------- */
button[class*="bg-"]:not(:disabled) { overflow: hidden; }
button[class*="bg-"]:not(:disabled)::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -45%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38), transparent);
    transform: skewX(-18deg);
    opacity: 0;
    pointer-events: none;
}
button[class*="bg-"]:not(:disabled):hover::after { animation: btnSheen 0.7s ease; }
@keyframes btnSheen {
    0%   { left: -45%; opacity: 0; }
    18%  { opacity: 0.55; }
    100% { left: 125%; opacity: 0; }
}

/* -------------------------------------------------------------------
   6. HERO CTA · primary button gets the same sheen vocabulary
   ------------------------------------------------------------------- */
.hero-cta--primary { position: relative; overflow: hidden; }
.hero-cta--primary::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -45%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-18deg);
    opacity: 0;
    pointer-events: none;
}
.hero-cta--primary:hover::after { animation: btnSheen 0.7s ease; }

/* -------------------------------------------------------------------
   7. Motion budget — fold the new effects into reduced-motion
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    button[class*="bg-"]:not(:disabled):hover::after,
    .hero-cta--primary:hover::after { animation: none; opacity: 0; }
}


/* ===================================================================
   CRYOCORE v8.2 — LAYOUT FIXES (from full-page audit)
   =================================================================== */

/* 1. Sticky header was covering section titles on any in-page jump
   (menu -> #roadmap-section / #footer, hero "All Packs" -> #shop-section).
   Give every anchor target room to clear the ~72px sticky header. */
#main-content section[id],
#top-banner,
#footer { scroll-margin-top: 90px; }

/* 2. Lab Shop "Buy Pack" buttons wrapped to two lines and spilled past the
   card's cut corner in the dense 5-up grid. Keep them on one line, sized to
   fit, and let the price take the slack. */
.shop-pack .shop-pack-foot { gap: 0.6rem; }
.shop-pack .shop-pack-foot > button {
    white-space: nowrap;
    flex: 0 0 auto;
    font-size: 0.68rem !important;
    letter-spacing: 0.06em;
    padding: 0.5rem 0.85rem !important;
    line-height: 1;
}
.shop-pack .shop-pack-foot > .text-yellow-400 { min-width: 0; }

/* 3. Daily-tasks reward buttons ("START") + task grid buttons: same no-wrap
   guard so short labels never break. */
#daily-tasks-container button,
.daily-task-card button,
.task-card button { white-space: nowrap; }


/* ===================================================================
   CRYOCORE v8.3 — HERO REWORK (visibility + balance)
   =================================================================== */

/* 1. Hero titles must NEVER render invisible. Root cause of the "ghosted"
   titles: the decode effect wraps the text in an inline-block child, so the
   parent's background-clip:text gradient has no glyphs to paint. Fixes:
   (a) fx.js already skips .hero-title, (b) if a wrapper ever sneaks in, give
   IT the gradient so it still paints, (c) a solid fallback if background-clip
   isn't supported at all. */
.hero-title { color: var(--ice-soft); }               /* fallback fill */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero-title {
        background: linear-gradient(90deg, #ffffff, var(--ice-soft) 55%, var(--ice));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}
.hero-title .fx-decode-target,
.hero-title .fx-decode-char {
    background: linear-gradient(90deg, #ffffff, var(--ice-soft) 55%, var(--ice));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* 2. NEWS slide: the copy column defaulted to align-items:stretch, so the
   eyebrow chip and title stretched edge-to-edge (the "bar" look) and the
   whole block sat pinned to the top. Left-align the content and vertically
   center the layout so it sits balanced and a touch lower. */
.hero-slide--news { align-items: center; }            /* move block down / center */
.hero-news-copy { align-items: flex-start; }          /* chip + title natural width */
.hero-slide--news .hero-news-copy { align-items: flex-start; }

/* 3. PACKS slide: title + new subtitle + 3 cards as one centred, balanced
   stack (title on top, description under it, cards below). */
.hero-slide--packs .hero-slide-content { padding-top: 0; }
.hero-packs-sub {
    margin: 0 auto 1.1rem;
    max-width: 46ch;
    color: var(--dim);
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: center;
}
@media (max-width: 640px) {
    .hero-packs-sub { font-size: 0.85rem; margin-bottom: 0.75rem; }
}


/* ===================================================================
   CRYOCORE v8.4 — header demo pill · merged treasury · skills removed
   =================================================================== */

/* Demo is a calm OUTLINE pill, sitting apart from the wallet-connect
   buttons (it is no longer wedged between Phantom and MetaMask). */
.demo-pill {
    height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0 0.9rem;
    font-family: var(--font-display);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ice-soft);
    background: rgba(77, 232, 255, 0.06);
    border: 1px solid rgba(77, 232, 255, 0.30);
    clip-path: var(--clip-btn);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.demo-pill:hover {
    background: rgba(77, 232, 255, 0.14);
    border-color: var(--ice);
    transform: translateY(-1px);
}
@media (max-width: 640px) {
    /* on phones keep only the icon to save room */
    .demo-pill { padding: 0 0.6rem; font-size: 0; gap: 0; }
    .demo-pill::first-letter { font-size: 1rem; }
}

/* Treasury now holds the vault AND the claims in one block (single wallet). */
.treasury-claims { margin-top: 1.25rem; }
.treasury-claims-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
    margin: 0 0 1.4rem;
}

/* Skills & Upgrades panel is removed from the site entirely (kept only as a
   separate spec doc). Belt-and-suspenders in case any legacy code injects it. */
#skills-section { display: none !important; }


/* ===================================================================
   CRYOCORE v8.5 — one-row header (both wallet states) + news centering
   =================================================================== */

/* Header must stay a SINGLE row whether the visitor is in demo (connect
   buttons) or has a real wallet (address chip + Disconnect). Never wrap. */
header .max-w-6xl {
    flex-wrap: nowrap !important;
    min-width: 0;
}
header .max-w-6xl > div:last-child {   /* right-hand control cluster */
    flex-wrap: nowrap;
    min-width: 0;
}
#wallet-section { display: flex; align-items: center; flex: 0 0 auto; }
#wallet-selection,
#wallet-connected:not(.hidden) { display: flex; flex-wrap: nowrap; align-items: center; }
/* brand shrinks/ellipsizes before it can push controls onto a second row */
header h1 { min-width: 0; }
.brand-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Compact, fixed-height connected chip so it lines up with the 40px controls */
#wallet-connected .bg-green-500\/10 { min-height: 40px; }
#wallet-address { white-space: nowrap; }

/* Belt-and-suspenders: the two wallet states are mutually exclusive. If any
   legacy code shows both, keep them on one line instead of stacking. */
#wallet-section { gap: 0.5rem; }

/* NEWS slide: force the content to sit vertically centred in the hero frame
   (equal space top and bottom) — no more top-heavy layout. */
.hero-slide--news { align-items: center !important; }
.hero-slide--news .hero-news-layout { align-self: center; }


/* ===================================================================
   CRYOCORE v8.6 — NO wallet gate. The site + game are ALWAYS visible.
   In demo there is simply no real crypto; everything else is identical.
   =================================================================== */
#connect-prompt { display: none !important; }   /* the "Connect Your Wallet" screen never appears */
#game-content   { display: block !important; }  /* full site/game is always shown */


/* ===================================================================
   CRYOCORE v8.7 — footer social icons: one uniform size, aligned
   =================================================================== */
.site-footer .footer-ic {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    fill: currentColor;
    opacity: 0.8;
    vertical-align: middle;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.site-footer .footer-link {
    display: inline-flex !important;
    align-items: center;
    gap: 0.55rem;
    line-height: 1.2;
    white-space: nowrap;
}
.site-footer .footer-link:hover .footer-ic { opacity: 1; transform: translateY(-1px); }
/* even vertical rhythm between links in a column */
.site-footer .footer-col .footer-link { padding: 0.28rem 0; }


/* ===================================================================
   CRYOCORE v8.8 — Treasury as ONE cohesive panel (vault + claims)
   =================================================================== */
.treasury-panel {
    max-width: 620px;
    margin: 0 auto;
    padding: 1.4rem 1.6rem 1.5rem;
}
/* balance readout a touch bigger so it anchors the panel */
.treasury-panel .vault-num { font-size: 1.7rem; }

.treasury-claims-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
    margin: 1.2rem 0 1.15rem;
}

/* stats: same monospace/tabular language as the balance, evenly spaced */
.treasury-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.treasury-stat { text-align: center; min-width: 0; }
.treasury-stat-num {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 1.45rem;
    line-height: 1;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}
.treasury-stat-num.t-gold  { color: var(--gold);  text-shadow: 0 0 12px rgba(255, 209, 102, 0.32); }
.treasury-stat-num.t-green { color: var(--alive); text-shadow: 0 0 12px rgba(52, 245, 197, 0.32); }
.treasury-stat-num.t-ice   { color: var(--ice);   text-shadow: 0 0 12px rgba(77, 232, 255, 0.32); }
.treasury-stat-label {
    margin-top: 0.4rem;
    font-family: var(--font-display);
    font-size: 0.55rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dim);
}

/* one tidy action row; consistent button sizing */
.treasury-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 0.6rem;
}
.treasury-btn {
    font-family: var(--font-display);
    font-size: 0.7rem !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.7rem 1.15rem !important;
    white-space: nowrap;
    clip-path: var(--clip-btn);
    border-radius: 0 !important;
    cursor: pointer;
}
/* the ghost refresh matches the quiet HUD language */
.treasury-btn--ghost {
    color: var(--ice-soft);
    background: rgba(77, 232, 255, 0.06) !important;
    border: 1px solid var(--line) !important;
    box-shadow: none !important;
}
.treasury-btn--ghost:hover {
    color: var(--ice);
    background: rgba(77, 232, 255, 0.12) !important;
    border-color: var(--line-strong) !important;
    transform: translateY(-2px);
}

@media (max-width: 560px) {
    .treasury-stats { gap: 0.6rem; }
    .treasury-stat-num { font-size: 1.15rem; }
    .treasury-btn { flex: 1 1 auto; }
}


/* ===================================================================
   CRYOCORE v9.0 — News title always ONE line ("Latest from the Lab")
   The 2-column news layout narrows the copy column (~385px near 860px,
   ~485px at 1440), so the title is sized fluidly to fit on a single line
   at every width and never wrap.
   =================================================================== */
.hero-slide--news .hero-title {
    white-space: nowrap;
    font-size: clamp(1rem, 2.5vw, 2rem) !important;
    letter-spacing: 0.03em;
}

/* On phones the news slide is copy-only; shrink its (desktop-sized) side
   padding so the one-line title has room and never overflows. */
@media (max-width: 640px) {
    .hero-slide--news { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
}


/* ===================================================================
   CRYOCORE v9.2 — Treasury full-width, two-column (vault | claims)
   =================================================================== */
.treasury-panel {
    max-width: none;            /* span the full section width */
    margin: 0;
    padding: 1.5rem 1.8rem;
}
.treasury-cols {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
    gap: 2.4rem;
    align-items: center;
}
/* divider between the vault (left) and the claims/actions (right) */
.treasury-vault-col {
    border-right: 1px solid var(--line);
    padding-right: 2.4rem;
    min-width: 0;
}
.treasury-panel .vault-num { font-size: 2rem; }   /* balance anchors the left col */

.treasury-claim-col { min-width: 0; }
/* stats fill the right column evenly */
.treasury-claim-col .treasury-stats { margin-bottom: 1.25rem; }
/* actions left-aligned under the stats, wrapping if needed */
.treasury-claim-col .treasury-actions { justify-content: flex-start; }

@media (max-width: 820px) {
    /* stack: vault on top, claims below, divider becomes horizontal */
    .treasury-cols { grid-template-columns: 1fr; gap: 1.3rem; }
    .treasury-vault-col {
        border-right: none;
        border-bottom: 1px solid var(--line);
        padding-right: 0;
        padding-bottom: 1.3rem;
    }
    .treasury-claim-col .treasury-actions { justify-content: center; }
}
@media (max-width: 560px) {
    .treasury-panel { padding: 1.2rem 1.1rem; }
    .treasury-claim-col .treasury-stats { gap: 0.6rem; }
}


/* ===================================================================
   CRYOCORE v9.4 — dynamically-rendered task cards visible + aligned
   =================================================================== */
/* BUG FIX: telegram-tasks.js re-renders the task cards via innerHTML AFTER
   fx.js has already run its reveal pass, so the fresh .card-hover cards never
   receive .fx-in and were stuck at opacity:0 (invisible → "empty" task list).
   Force cards inside JS-rendered sections to stay visible. */
#daily-tasks-section .card-hover,
#daily-tasks-section .daily-task-card,
#game-screen-section .card-hover,
#chambers-section .card-hover,
#supervisors-section .card-hover,
#scientists-section .card-hover,
#working-section .card-hover {
    opacity: 1 !important;
    transform: none !important;
}

/* Even task cards: make each a flex column and pin the reward+button row to a
   shared baseline so buttons don't sit at different heights across cards. */
#daily-tasks-section .daily-task-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
#daily-tasks-section .daily-task-card > .flex.items-center.gap-3 { flex: 0 0 auto; }
#daily-tasks-section .daily-task-card > .flex.justify-between {
    margin-top: auto;   /* footer (reward + Start/Completed) aligned to bottom */
    padding-top: 0.5rem;
}


/* ===================================================================
   CRYOCORE v9.5 — shared block background (Special Packs + Lab Shop)
   Drop assets/blocks-bg.png to activate. If the file is missing the layer
   is simply transparent and the blocks look exactly as before.
   Set a DIFFERENT image per block by overriding --block-bg on that block.
   =================================================================== */
:root { --block-bg: url('assets/blocks-bg.png'); }

.hero-slide--packs, #shop-section { position: relative; }

.block-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--block-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.42;                 /* subtle so cards/text stay readable */
    pointer-events: none;
    border-radius: inherit;
}
/* the packs slide already has a clipped frame — match it */
.hero-slide--packs .block-bg { clip-path: inherit; }

/* keep all real content above the background layer */
.hero-slide--packs > .hero-slide-content { position: relative; z-index: 1; }
#shop-section > *:not(.block-bg) { position: relative; z-index: 1; }


/* ===================================================================
   CRYOCORE v9.6 — image slots (logo, wordmark, pack art, member photos)
   Drop the named files into /assets to activate. Missing file -> the
   emoji/text fallback stays (img removes itself via onerror).
   =================================================================== */

/* 1) Header logo 32x32  (assets/logo-32.png) */
.brand-glyph { display: inline-flex; align-items: center; }
.brand-logo-img { width: 32px; height: 32px; object-fit: contain; display: block; }
.brand-glyph:has(.brand-logo-img) .brand-glyph-fallback { display: none; }

/* 2) Wordmark on the hero video 566x48  (assets/logo-text.png) */
.hero-wordmark-img {
    display: block;
    height: 48px;                     /* "may be bigger" — bump this value */
    width: auto;
    max-width: min(566px, 82vw);
    margin: 0.2rem auto 0.1rem;
    filter: drop-shadow(0 0 18px rgba(77, 232, 255, 0.35));
}
.hero-slide--videobg:has(.hero-wordmark-img) .hero-title--xl { display: none; }

/* 3) Special-pack art (hero) 244x176  (assets/pack-*.png) */
.hero-pack-card { position: relative; overflow: hidden; }
.hero-pack-card .pack-art {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0; pointer-events: none;
}
.hero-pack-card:has(.pack-art)::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(4,7,13,0.12), rgba(4,7,13,0.72));
}
.hero-pack-card > *:not(.pack-art) { position: relative; z-index: 2; }
.hero-pack-card:has(.pack-art) .pack-icon { display: none; }
.hero-pack-card:has(.pack-art) .pack-name,
.hero-pack-card:has(.pack-art) .pack-desc,
.hero-pack-card:has(.pack-art) .pack-price { text-shadow: 0 1px 6px rgba(0,0,0,0.85); }

/* 4) Lab-shop pack art 201x225  (assets/shop-*.png) */
.shop-pack { position: relative; overflow: hidden; }
.shop-pack .pack-art {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0; pointer-events: none;
}
.shop-pack:has(.pack-art)::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(4,7,13,0.15), rgba(4,7,13,0.78));
}
.shop-pack > *:not(.pack-art) { position: relative; z-index: 2; }
/* the coming-soon overlay must stay absolute (out of flow) and on top */
.shop-pack .coming-soon-overlay { position: absolute; z-index: 3; }
.shop-pack:has(.pack-art) h3,
.shop-pack:has(.pack-art) .shop-pack-desc,
.shop-pack:has(.pack-art) .shop-pack-foot span { text-shadow: 0 1px 6px rgba(0,0,0,0.85); }

/* 5) Team member photos 264x168  (assets/member-1..4.png) */
.team-avatar { position: relative; }
.team-avatar-img {
    width: 100%;
    max-width: 264px;
    aspect-ratio: 264 / 168;
    object-fit: cover;
    display: block;
    margin: 0 auto 0.15rem;
    clip-path: var(--clip-chip);
    border: 1px solid rgba(77, 232, 255, 0.22);
}
.team-avatar:has(.team-avatar-img) .team-avatar-fallback { display: none; }


/* ===================================================================
   CRYOCORE v9.9 — HUD vector frames (dark) + brand acts as Home
   Reusable corner-bracket + bolt frame. Add <i class="hud-corners">
   inside any position:relative panel. Thickness via the modifier.
   =================================================================== */
:root {
    --hud-corner: rgba(96, 188, 226, 0.5);   /* corner brackets (dark cyan) */
    --hud-bolt:   rgba(150, 180, 210, 0.32);  /* corner bolts */
    --hud-edge:   rgba(120, 165, 205, 0.14);  /* faint edge line */
}

.hud-corners {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    --len: 22px;      /* bracket arm length */
    --t: 2px;         /* bracket thickness  */
    --boff: 10px;     /* bolt inset from corner */
    /* faint full edge so it reads as a frame, not just corners */
    box-shadow: inset 0 0 0 1px var(--hud-edge);
    background:
        /* four L-brackets = 8 line segments */
        linear-gradient(var(--hud-corner), var(--hud-corner)) top left     / var(--len) var(--t) no-repeat,
        linear-gradient(var(--hud-corner), var(--hud-corner)) top left     / var(--t) var(--len) no-repeat,
        linear-gradient(var(--hud-corner), var(--hud-corner)) top right    / var(--len) var(--t) no-repeat,
        linear-gradient(var(--hud-corner), var(--hud-corner)) top right    / var(--t) var(--len) no-repeat,
        linear-gradient(var(--hud-corner), var(--hud-corner)) bottom left  / var(--len) var(--t) no-repeat,
        linear-gradient(var(--hud-corner), var(--hud-corner)) bottom left  / var(--t) var(--len) no-repeat,
        linear-gradient(var(--hud-corner), var(--hud-corner)) bottom right / var(--len) var(--t) no-repeat,
        linear-gradient(var(--hud-corner), var(--hud-corner)) bottom right / var(--t) var(--len) no-repeat,
        /* four corner bolts */
        radial-gradient(circle at center, var(--hud-bolt) 42%, transparent 48%) var(--boff) var(--boff) / 5px 5px no-repeat,
        radial-gradient(circle at center, var(--hud-bolt) 42%, transparent 48%) calc(100% - var(--boff)) var(--boff) / 5px 5px no-repeat,
        radial-gradient(circle at center, var(--hud-bolt) 42%, transparent 48%) var(--boff) calc(100% - var(--boff)) / 5px 5px no-repeat,
        radial-gradient(circle at center, var(--hud-bolt) 42%, transparent 48%) calc(100% - var(--boff)) calc(100% - var(--boff)) / 5px 5px no-repeat;
}
.hud-corners--thick { --len: 30px; --t: 3px; --boff: 12px; }
.hud-corners--med   { --len: 24px; --t: 2px; --boff: 10px; }
.hud-corners--thin  { --len: 18px; --t: 1.5px; --boff: 9px; }

/* make sure the panels can host the frame */
#hero-carousel, .top-banner-inner, .treasury-panel { position: relative; }

/* brand = Home affordance */
.brand-home { cursor: pointer; }
.brand-home:hover .brand-text { filter: brightness(1.15); }
.brand-home:focus-visible { outline: 2px solid var(--ice); outline-offset: 4px; }


/* ===================================================================
   CRYOCORE v10.0 — pre-sale purchase modal + pack ribbons (UI only)
   =================================================================== */
/* card ribbon */
.pack-ribbon {
    position: absolute; top: 10px; right: -1px; z-index: 3;
    font-family: var(--font-display); font-size: 0.55rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: #061018;
    background: linear-gradient(90deg, var(--ice), var(--ice-soft));
    padding: 0.22rem 0.6rem; clip-path: polygon(8px 0,100% 0,100% 100%,0 100%);
    box-shadow: 0 2px 10px rgba(77,232,255,0.25);
}
.hero-pack-card[role="button"] { cursor: pointer; }

/* overlay */
.presale-overlay {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 1.25rem;
    background: rgba(3,6,12,0.78); backdrop-filter: blur(6px);
    animation: presaleFade 0.18s ease;
}
.presale-overlay[hidden] { display: none; }
@keyframes presaleFade { from { opacity: 0; } to { opacity: 1; } }

/* panel */
.presale-modal {
    position: relative; width: 100%; max-width: 460px;
    background: linear-gradient(160deg, rgba(15,26,40,0.98), rgba(8,14,24,0.98));
    border: 1px solid var(--line-strong);
    clip-path: var(--clip-panel);
    padding: 1.7rem 1.6rem 1.4rem;
    text-align: center;
    box-shadow: 0 24px 70px rgba(0,0,0,0.6);
    animation: presalePop 0.2s ease;
}
@keyframes presalePop { from { transform: translateY(10px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
.presale-close {
    position: absolute; top: 10px; right: 12px; z-index: 6;
    width: 28px; height: 28px; border: 1px solid var(--line);
    background: rgba(255,255,255,0.04); color: var(--dim);
    cursor: pointer; font-size: 0.8rem; line-height: 1;
}
.presale-close:hover { color: var(--ice); border-color: var(--line-strong); }
.presale-badge {
    display: inline-block; font-family: var(--font-display); font-size: 0.56rem;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--ember);
    border: 1px solid rgba(255,150,80,0.35); background: rgba(255,150,80,0.08);
    padding: 0.28rem 0.7rem; clip-path: var(--clip-chip); margin-bottom: 0.8rem;
}
.presale-ico { font-size: 2.6rem; line-height: 1; margin-bottom: 0.4rem; }
.presale-title {
    font-family: var(--font-display); font-size: 1.4rem; font-weight: 800;
    letter-spacing: 0.02em; color: var(--ice-soft); margin: 0 0 0.35rem;
}
.presale-sub { color: var(--dim); font-size: 0.9rem; margin: 0 auto 1.1rem; max-width: 34ch; }

/* includes list */
.presale-list { list-style: none; margin: 0 0 1.2rem; padding: 0; text-align: left; }
.presale-list li {
    position: relative; padding: 0.55rem 0.5rem 0.55rem 1.9rem; color: var(--text);
    font-size: 0.92rem; border-bottom: 1px solid rgba(120,165,205,0.10);
}
.presale-list li::before {
    content: '◆'; position: absolute; left: 0.6rem; top: 0.55rem; color: var(--ice); font-size: 0.7rem;
}

/* coin-sale tiers */
.presale-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 1.1rem; }
.presale-tier {
    display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
    padding: 0.7rem 0.4rem; cursor: pointer;
    background: rgba(77,232,255,0.05); border: 1px solid var(--line);
    clip-path: var(--clip-chip); transition: all 0.15s ease;
}
.presale-tier:hover { background: rgba(77,232,255,0.12); border-color: var(--ice); transform: translateY(-2px); }
.presale-tier-sol { font-family: var(--font-display); font-size: 0.92rem; color: var(--ice-soft); letter-spacing: 0.03em; }
.presale-tier-aff { font-size: 0.6rem; color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; }

/* cta */
.presale-cta-wrap { display: flex; align-items: center; justify-content: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.presale-price { font-family: var(--font-display); font-size: 0.95rem; color: var(--gold); letter-spacing: 0.04em; }
.presale-cta {
    font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: #061018; background: linear-gradient(90deg, var(--ice), var(--ice-soft));
    border: none; padding: 0.75rem 1.4rem; clip-path: var(--clip-btn); cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
}
.presale-cta:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
.presale-cta:disabled { background: rgba(52,245,197,0.18); color: var(--alive); cursor: default; }
.presale-note { font-size: 0.74rem; color: var(--muted); line-height: 1.5; margin: 0; }
.presale-note--hl { color: var(--ice-soft); }

@media (max-width: 420px) {
    .presale-tiers { grid-template-columns: repeat(2, 1fr); }
    .presale-title { font-size: 1.2rem; }
}


/* ===================================================================
   CRYOCORE v10.1 — HUD frames BOLDER (visible mechanical bezel)
   Overrides v9.9: brighter accents, longer/thicker brackets, bigger
   bolts, double edge line. Hero = bulky, others thinner but prominent.
   =================================================================== */
:root {
    --hud-corner: rgba(120, 210, 245, 0.9);    /* bright, clearly visible */
    --hud-bolt:   rgba(180, 205, 230, 0.7);
    --hud-edge:   rgba(120, 180, 220, 0.34);   /* visible outer edge */
    --hud-edge2:  rgba(110, 170, 210, 0.16);   /* inner line (double frame) */
}

.hud-corners {
    /* double edge for a mechanical bezel look */
    box-shadow:
        inset 0 0 0 1.5px var(--hud-edge),
        inset 0 0 0 7px transparent,
        inset 0 0 0 8.5px var(--hud-edge2);
    /* brighter bolts, a touch bigger */
    --bolt-d: 3.4px;
}
/* rebuild the bracket + bolt background at larger sizes & brighter color */
.hud-corners {
    background:
        linear-gradient(var(--hud-corner), var(--hud-corner)) top left     / var(--len) var(--t) no-repeat,
        linear-gradient(var(--hud-corner), var(--hud-corner)) top left     / var(--t) var(--len) no-repeat,
        linear-gradient(var(--hud-corner), var(--hud-corner)) top right    / var(--len) var(--t) no-repeat,
        linear-gradient(var(--hud-corner), var(--hud-corner)) top right    / var(--t) var(--len) no-repeat,
        linear-gradient(var(--hud-corner), var(--hud-corner)) bottom left  / var(--len) var(--t) no-repeat,
        linear-gradient(var(--hud-corner), var(--hud-corner)) bottom left  / var(--t) var(--len) no-repeat,
        linear-gradient(var(--hud-corner), var(--hud-corner)) bottom right / var(--len) var(--t) no-repeat,
        linear-gradient(var(--hud-corner), var(--hud-corner)) bottom right / var(--t) var(--len) no-repeat,
        radial-gradient(circle at center, var(--hud-bolt) 45%, transparent 52%) var(--boff) var(--boff) / 6px 6px no-repeat,
        radial-gradient(circle at center, var(--hud-bolt) 45%, transparent 52%) calc(100% - var(--boff)) var(--boff) / 6px 6px no-repeat,
        radial-gradient(circle at center, var(--hud-bolt) 45%, transparent 52%) var(--boff) calc(100% - var(--boff)) / 6px 6px no-repeat,
        radial-gradient(circle at center, var(--hud-bolt) 45%, transparent 52%) calc(100% - var(--boff)) calc(100% - var(--boff)) / 6px 6px no-repeat;
    filter: drop-shadow(0 0 6px rgba(90, 190, 235, 0.35));  /* subtle glow so it reads */
}

/* MUCH bigger tiers */
.hud-corners--thick { --len: 60px; --t: 4.5px; --boff: 18px; }   /* hero: bulky */
.hud-corners--med   { --len: 42px; --t: 3px;   --boff: 14px; }
.hud-corners--thin  { --len: 32px; --t: 2.5px; --boff: 12px; }


/* ===================================================================
   CRYOCORE v10.2 — REALISTIC metal frames (SVG 9-slice border-image)
   Replaces the flat corner-lines: beveled metal, rivets, double edge,
   rounded corners, scales to any size. Thickness = border-width.
   =================================================================== */
.hud-corners {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    /* clear the old flat look */
    background: none !important;
    box-shadow: none !important;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.45));
    border: 20px solid transparent;
    border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%234a586c'/%3E%3Cstop offset='0.45' stop-color='%23222d3d'/%3E%3Cstop offset='0.55' stop-color='%231b2431'/%3E%3Cstop offset='1' stop-color='%230b111a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23m)' fill-rule='evenodd' d='M20,3 H120 A17,17 0 0 1 137,20 V120 A17,17 0 0 1 120,137 H20 A17,17 0 0 1 3,120 V20 A17,17 0 0 1 20,3 Z M34,29 H106 A6,6 0 0 1 112,35 V105 A6,6 0 0 1 106,111 H34 A6,6 0 0 1 28,105 V35 A6,6 0 0 1 34,29 Z'/%3E%3Cpath fill='none' stroke='%2305090f' stroke-width='2' d='M20,4 H120 A16,16 0 0 1 136,20 V120 A16,16 0 0 1 120,136 H20 A16,16 0 0 1 4,120 V20 A16,16 0 0 1 20,4 Z'/%3E%3Cpath fill='none' stroke='%236b7c95' stroke-width='1.2' opacity='0.8' d='M34,29.6 H106 A5.4,5.4 0 0 1 111.4,35 V105 A5.4,5.4 0 0 1 106,110.4 H34 A5.4,5.4 0 0 1 28.6,105 V35 A5.4,5.4 0 0 1 34,29.6 Z'/%3E%3Cg fill='%230a1019' stroke='%235a6b82' stroke-width='1'%3E%3Ccircle cx='15' cy='15' r='3.4'/%3E%3Ccircle cx='125' cy='15' r='3.4'/%3E%3Ccircle cx='15' cy='125' r='3.4'/%3E%3Ccircle cx='125' cy='125' r='3.4'/%3E%3C/g%3E%3C/svg%3E") 26 stretch;
}
.hud-corners--thick { border-width: 26px; }
.hud-corners--med   { border-width: 17px; }
.hud-corners--thin  { border-width: 13px; }

/* framed panels: round the corners to match the metal frame (no angular clip) */
#hero-carousel,
.top-banner-inner,
.treasury-panel {
    clip-path: none !important;
    border-radius: 18px;
    overflow: hidden;
}
.top-banner-inner { border-radius: 16px; }
.treasury-panel  { border-radius: 14px; }
/* keep carousel arrows above the frame */
.hero-arrow { z-index: 7; }


/* ===================================================================
   CRYOCORE v10.3 — metal frame integration fixes
   - remove panel borders (a cyan edge was leaking under the frame)
   - round content to match the frame's inner opening (no square inner corner)
   - larger, cleaner inner bevel on the frame
   =================================================================== */
.hud-corners { border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%234a586c'/%3E%3Cstop offset='0.45' stop-color='%23222d3d'/%3E%3Cstop offset='0.55' stop-color='%231b2431'/%3E%3Cstop offset='1' stop-color='%230b111a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23m)' fill-rule='evenodd' d='M20,3 H120 A17,17 0 0 1 137,20 V120 A17,17 0 0 1 120,137 H20 A17,17 0 0 1 3,120 V20 A17,17 0 0 1 20,3 Z M40,29 H100 A11,11 0 0 1 111,40 V100 A11,11 0 0 1 100,111 H40 A11,11 0 0 1 29,100 V40 A11,11 0 0 1 40,29 Z'/%3E%3Cpath fill='none' stroke='%2305090f' stroke-width='2' d='M20,4 H120 A16,16 0 0 1 136,20 V120 A16,16 0 0 1 120,136 H20 A16,16 0 0 1 4,120 V20 A16,16 0 0 1 20,4 Z'/%3E%3Cpath fill='none' stroke='%236b7c95' stroke-width='1.3' opacity='0.85' d='M40,29.7 H100 A10.3,10.3 0 0 1 110.3,40 V100 A10.3,10.3 0 0 1 100,110.3 H40 A10.3,10.3 0 0 1 29.7,100 V40 A10.3,10.3 0 0 1 40,29.7 Z'/%3E%3Cg fill='%230a1019' stroke='%235a6b82' stroke-width='1'%3E%3Ccircle cx='15' cy='15' r='3.4'/%3E%3Ccircle cx='125' cy='15' r='3.4'/%3E%3Ccircle cx='15' cy='125' r='3.4'/%3E%3Ccircle cx='125' cy='125' r='3.4'/%3E%3C/g%3E%3C/svg%3E") 26 stretch; }

/* no own border on framed panels — the metal frame is the border now */
#hero-carousel,
.top-banner-inner,
.treasury-panel { border: none !important; }

/* content rounded to fill the frame's inner opening (frame band ~ 17-26px) */
#hero-carousel   { border-radius: 30px; }
.top-banner-inner{ border-radius: 24px; }
.treasury-panel  { border-radius: 22px; }
.hud-corners--thin { border-width: 15px; }

/* soft inner shadow so content sits *inside* the bezel with depth */
#hero-carousel::after,
.top-banner-inner::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5;
    border-radius: inherit;
    box-shadow: inset 0 0 22px rgba(0,0,0,0.45);
}


/* ===================================================================
   CRYOCORE v10.6 — thick frames rebuilt as MASKED gradient border.
   Outer & inner radii are concentric by construction, so the inner
   opening follows the outer bend and the content sits in it exactly.
   Keeps the matte-spectral metal gradient + rivets + bevel hairlines.
   =================================================================== */
.hud-corners {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    border: 0 !important;
    border-image: none !important;
    border-radius: var(--fr, 30px);
    padding: var(--fw, 26px);
    background:
        linear-gradient(135deg,
            #5b6d84 0%, #4d5c7e 18%, #3e5a68 36%,
            #3c3f5c 54%, #262d3d 72%, #0b111d 100%) !important;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    box-shadow: inset 0 0 0 1.5px rgba(5, 9, 15, 0.85);   /* outer bevel line */
    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.42)) drop-shadow(0 0 10px rgba(120,150,220,0.10));
}
/* inner spectral hairline — follows the concentric inner radius */
.hud-corners::before {
    content: '';
    position: absolute;
    inset: var(--fw, 26px);
    border-radius: calc(var(--fr, 30px) - var(--fw, 26px));
    box-shadow: inset 0 0 0 1px rgba(127, 208, 224, 0.30);
    background: none;
    pointer-events: none;
}
/* corner rivets, centered in the band */
.hud-corners::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    --r: calc(var(--fw, 26px) / 2);
    background:
        radial-gradient(circle at center, rgba(180,205,230,0.6) 42%, transparent 48%) var(--r) var(--r) / 6px 6px no-repeat,
        radial-gradient(circle at center, rgba(180,205,230,0.6) 42%, transparent 48%) calc(100% - var(--r)) var(--r) / 6px 6px no-repeat,
        radial-gradient(circle at center, rgba(180,205,230,0.6) 42%, transparent 48%) var(--r) calc(100% - var(--r)) / 6px 6px no-repeat,
        radial-gradient(circle at center, rgba(180,205,230,0.6) 42%, transparent 48%) calc(100% - var(--r)) calc(100% - var(--r)) / 6px 6px no-repeat;
}
.hud-corners--thick { --fr: 36px; --fw: 26px; }
.hud-corners--med   { --fr: 28px; --fw: 17px; }
.hud-corners--thin  { --fr: 24px; --fw: 15px; }

/* content radius = frame OUTER radius, so content fills the concentric opening */
#hero-carousel    { border-radius: 36px !important; }
.top-banner-inner { border-radius: 28px !important; }
.treasury-panel   { border-radius: 24px !important; }


/* ===================================================================
   CRYOCORE v10.8 — CHAMFERED dark-graphite metal frame (matches ref)
   Octagon outer + concentric octagon inner (same geometry), dark metal,
   thin light bevel line on the inner edge, corner screws. Thinner.
   Overrides the previous rounded/masked frame.
   =================================================================== */
.hud-corners {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    /* reset the previous masked-gradient approach */
    background: none !important;
    -webkit-mask: none !important;
            mask: none !important;
    box-shadow: none !important;
    filter: drop-shadow(0 5px 14px rgba(0,0,0,0.55)) drop-shadow(0 0 6px rgba(120,140,200,0.06));
    border-radius: 0 !important;
    /* chamfered metal via 9-slice */
    border: 16px solid transparent !important;
    border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23313a47'/%3E%3Cstop offset='0.25' stop-color='%232b303e'/%3E%3Cstop offset='0.5' stop-color='%23243039'/%3E%3Cstop offset='0.75' stop-color='%231b1f29'/%3E%3Cstop offset='1' stop-color='%23111420'/%3E%3C/linearGradient%3E%3ClinearGradient id='bev' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%236b7c95'/%3E%3Cstop offset='0.5' stop-color='%235f6f88'/%3E%3Cstop offset='1' stop-color='%234f5e74'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' fill-rule='evenodd' d='M12,0 L108,0 L120,12 L120,108 L108,120 L12,120 L0,108 L0,12 Z M24,16 L96,16 L104,24 L104,96 L96,104 L24,104 L16,96 L16,24 Z'/%3E%3Cpath fill='none' stroke='%2305080d' stroke-width='1.3' d='M12,0.6 L108,0.6 L119.4,12 L119.4,108 L108,119.4 L12,119.4 L0.6,108 L0.6,12 Z'/%3E%3Cpath fill='none' stroke='url(%23bev)' stroke-width='1.1' opacity='0.5' d='M24,16.7 L96,16.7 L103.3,24 L103.3,96 L96,103.3 L24,103.3 L16.7,96 L16.7,24 Z'/%3E%3Cpath fill='none' stroke='%230c0f16' stroke-width='1' d='M25,18 L95,18 L102,25 L102,95 L95,102 L25,102 L18,95 L18,25 Z'/%3E%3Cg fill='%23090d15' stroke='%23404f63' stroke-width='0.8'%3E%3Ccircle cx='9' cy='9' r='2.6'/%3E%3Ccircle cx='111' cy='9' r='2.6'/%3E%3Ccircle cx='9' cy='111' r='2.6'/%3E%3Ccircle cx='111' cy='111' r='2.6'/%3E%3C/g%3E%3C/svg%3E") 16 stretch !important;
}
.hud-corners::before, .hud-corners::after { display: none !important; }

.hud-corners--thick { border-width: 16px !important; }
.hud-corners--med   { border-width: 11px !important; }
.hud-corners--thin  { border-width: 8px !important; }

/* framed panels: rectangular (the chamfer lives in the frame SVG); keep the
   inner content clipped to the SAME chamfer so it fills the octagon opening */
#hero-carousel,
.top-banner-inner,
.treasury-panel {
    border-radius: 0 !important;
    clip-path: none !important;
    overflow: hidden;
}

/* ================= SPECIAL PACKS: PRE-SALE (new card design) ================= */
.hero-slide--packs .hero-pack-card,
.hero-pack-card {
    background: transparent !important;
    border: none !important;
    clip-path: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
    display: block !important;
    overflow: visible !important;
    border-radius: 12px;
    text-align: center;
}
.hero-pack-card--featured,
.hero-slide--packs .hero-pack-card--featured { transform: none !important; }
.hero-pack-card:hover,
.hero-slide--packs .hero-pack-card--featured:hover {
    transform: translateY(-4px) !important;
    box-shadow: none !important;
}

.pack-media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: visible;
    background: transparent !important;
}
.pack-media .pack-art {
    position: static !important;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transform: translateY(-20px);
}
.hero-pack-card .pack-icon { display: none !important; }
.hero-pack-card:has(.pack-art)::after { content: none !important; background: none !important; }

.pack-info {
    position: absolute;
    left: 0.45rem; right: 0.45rem; bottom: 0.45rem;
    z-index: 3;
    transform: translateY(20px);
    padding: 0.45rem 0.5rem 0.5rem;
    text-align: center;
    background: rgba(4, 8, 16, 0.42);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(77, 232, 255, 0.16);
    border-radius: 12px;
}
.pack-info .pack-name,
.pack-info .pack-desc,
.pack-info .pack-price { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75); }
.pack-info .pack-desc { margin: 0.12rem 0 0.22rem; }

/* pulsing Limited Offer eyebrow */
@keyframes offerPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(255,138,76,0); border-color: rgba(255,138,76,0.55); }
    50% { transform: scale(1.06); box-shadow: 0 0 20px rgba(255,138,76,0.55); border-color: rgba(255,209,102,0.95); }
}
.hero-slide--packs .hero-eyebrow {
    color: var(--gold);
    background: rgba(22, 10, 6, 0.6);
    border-color: rgba(255, 138, 76, 0.55);
    animation: offerPulse 2s ease-in-out infinite;
}

/* Featured banner: no vignette over the artwork so it reads clear and bright */
.top-banner-inner::after { box-shadow: none !important; }

/* ===== COSMIC BG (v9) — scroll-driven space → planet canvas ===== */
#cosmic-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    display: block;
}
/* the old opaque body gradient would hide the canvas — make it transparent
   and let the canvas own the base color */
body.gradient-bg { background: transparent; }
html { background: #04070d; } /* overscroll / pre-paint color */
/* footer sits ON the planet: soften its slab so the horizon glows through */
.site-footer { background: linear-gradient(180deg, transparent, rgba(6, 11, 22, 0.55)); }

/* v2: декоративные плиты за секциями убраны — без арт-ассетов они дают
   только пустой прямоугольник со швом (та самая «полоска») */
.block-bg { display: none !important; }

/* ===================================================================
   MOBILE LAYOUT PATCH v2.1
   1) about-facts — один горизонтальный ряд из 4, как на десктопе
   2) hero-слайд паков — компактные 3 вертикальных пака + видимый заголовок
   3) Play Now не наезжает на точки карусели
   4) Lab Shop / Daily Tasks / Team — горизонтальные снап-галереи (2 в кадре)
   =================================================================== */

@media (max-width: 760px) {
    /* 1 — статы в один ряд */
    .about-facts { grid-template-columns: repeat(4, 1fr) !important; gap: 0.45rem !important; }
    .about-fact { padding: 0.6rem 0.3rem !important; }
    .about-fact-value { font-size: 1.05rem !important; }
    .about-fact-label { font-size: 0.52rem !important; letter-spacing: 0.08em !important; }
}

@media (max-width: 640px) {
    /* 3 — контенту слайда больше воздуха снизу: кнопки не доходят до точек */
    .hero-slide { padding-bottom: 5rem; }

    /* 2 — слайд Special Packs: компактные горизонтальные ряды-паки */
    .hero-slide--packs .hero-slide-content { justify-content: flex-start; padding-top: 0.4rem; }
    .hero-slide--packs .hero-title { font-size: 1.15rem; margin-bottom: 0.1rem; }
    .hero-slide--packs .hero-eyebrow { font-size: 0.62rem; }
    .hero-packs-sub { display: none; }               /* экономим вертикаль */
    .hero-packs-row {
        display: flex !important;
        flex-direction: column;
        gap: 0.45rem;
        margin-top: 0.5rem;
    }
    .hero-pack-card {
        aspect-ratio: auto !important;
        padding: 0.55rem 0.8rem !important;
        text-align: left;
    }
    .hero-pack-card .pack-media { display: flex; align-items: center; gap: 0.65rem; }
    .hero-pack-card .pack-art {
        width: 46px; height: 46px; flex: 0 0 46px;
        object-fit: cover; border-radius: 6px;
    }
    .hero-pack-card .pack-info { flex: 1 1 auto; }
    .hero-pack-card .pack-name { font-size: 0.88rem; }
    .hero-pack-card .pack-desc { font-size: 0.68rem; opacity: 0.75; }
    .hero-pack-card .pack-price { font-size: 0.78rem; margin-top: 0.1rem; }

    /* 4 — горизонтальные галереи с прилипанием. Универсальный рецепт:
       колонки шириной чуть меньше половины экрана → видно, что справа
       есть продолжение, свайп сам доводит до карточки */
    #shop-section .grid,
    #daily-tasks-container,
    .team-grid {
        display: grid !important;
        grid-template-columns: none !important;
        grid-auto-flow: column !important;
        grid-auto-columns: calc(50% - 0.65rem) !important;
        gap: 0.8rem !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.75rem;
        scrollbar-width: thin;
        scrollbar-color: rgba(77, 232, 255, 0.35) transparent;
    }
    #shop-section .grid > *,
    #daily-tasks-container > *,
    .team-grid > * {
        scroll-snap-align: start;
        min-width: 0;
    }
    /* компактнее карточки паков в магазине, чтобы влезали по 2 */
    #shop-section .shop-pack { padding: 0.9rem !important; }
    #shop-section .shop-pack h3 { font-size: 0.95rem !important; }
    #shop-section .shop-pack-foot { flex-wrap: wrap; gap: 0.4rem; }
}

/* v2.1b — добить квадратную пустую медиа-зону пака на мобильном:
   без арт-ассета .pack-media (aspect 1:1) раздувала карточку до квадрата */
@media (max-width: 640px) {
    .hero-pack-card .pack-media { aspect-ratio: auto !important; }
    .hero-pack-card .pack-art { transform: none !important; }
    .hero-pack-card .pack-media.is-empty::before {
        content: '📦';
        font-size: 1.4rem;
        width: 46px; height: 46px; flex: 0 0 46px;
        display: flex; align-items: center; justify-content: center;
        background: rgba(77, 232, 255, 0.07);
        border: 1px solid rgba(77, 232, 255, 0.18);
        border-radius: 6px;
    }
}

/* v2.1c — заголовок слайда паков не должен подлезать под первую карточку */
@media (max-width: 640px) {
    .hero-slide--packs .hero-title { margin-bottom: 0.4rem; position: relative; z-index: 2; }
    .hero-packs-row { margin-top: 0.9rem !important; }
}

/* ===================================================================
   MOBILE PATCH v2.2
   — carousel clip: соседние слайды больше не просачиваются в кадр
   — pack-info возвращён в поток (наезды «Pre-order» устранены)
   — Daily Tasks: галерея на РЕАЛЬНОМ контейнере задач
   — скроллбары галерей скрыты: листание свайпом по самим карточкам
   — новостной слайд: воздух от рамки, компактный заголовок
   =================================================================== */

/* критично на всех ширинах: лента слайдов не должна выглядывать из окна */
.hero-carousel { overflow: hidden; }

@media (max-width: 640px) {
    /* pack-info был absolute-оверлеем поверх арта — в компактном ряду
       он вылезал из карточки и прятался под соседнюю */
    .hero-pack-card .pack-info {
        position: static !important;
        transform: none !important;
        background: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        padding: 0 !important;
        text-align: left;
    }

    /* Daily Tasks: telegram-tasks.js рендерит карточки в собственные
       div.grid внутри секции — превращаем каждый в снап-галерею */
    #daily-tasks-section div.grid {
        display: grid !important;
        grid-template-columns: none !important;
        grid-auto-flow: column !important;
        grid-auto-columns: calc(50% - 0.65rem) !important;
        gap: 0.8rem !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.4rem;
    }
    #daily-tasks-section div.grid > * { scroll-snap-align: start; min-width: 0; }

    /* свайп идёт по самим карточкам — полосы прокрутки не нужны */
    #shop-section .grid, #daily-tasks-section div.grid, .team-grid { scrollbar-width: none !important; }
    #shop-section .grid::-webkit-scrollbar,
    #daily-tasks-section div.grid::-webkit-scrollbar,
    .team-grid::-webkit-scrollbar { display: none; }

    /* новостной слайд: отступы от рамки, плейсхолдер-арт скрыт,
       компактный заголовок и карточки новостей */
    .hero-slide--news { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
    .hero-slide--news .hero-news-media { display: none; }
    .hero-slide--news .hero-title { font-size: 1.25rem; }
    .hero-news-item { padding: 0.55rem 0.7rem; }
    .hero-news-list { gap: 0.5rem; }
}

/* v2.2b — карточкам задач чуть больше ширины: ~полторы в кадре,
   кнопки и награды не обрезаются, край следующей намекает на свайп */
@media (max-width: 640px) {
    #daily-tasks-section div.grid { grid-auto-columns: calc(66% - 0.4rem) !important; }
    #daily-tasks-section div.grid .task-card,
    #daily-tasks-section div.grid > * { font-size: 0.92em; }
}

/* ===================================================================
   MOBILE PATCH v2.3
   — футер: Project | Community в два столбца рядом
   — Daily Tasks: одна карточка в кадре, листание по одной
   — слайд паков: воздух от рамки карусели
   — главный слайд: компакт, стеклянная панель не липнет к рамке
   — курсор grab на галереях (drag мышкой делает gallery-drag.js)
   =================================================================== */

@media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 1.25rem 1rem !important; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-col:last-child { grid-column: 1 / -1; }   /* Contact — во всю ширину */
}

@media (max-width: 640px) {
    /* задачи: один слот в кадре + узкий намёк на следующую */
    #daily-tasks-section div.grid { grid-auto-columns: 86% !important; }

    /* паки: отступы от рамки карусели и между собой */
    .hero-slide--packs { padding-left: 1.6rem !important; padding-right: 1.6rem !important; }
    .hero-packs-row { gap: 0.55rem; }

    /* главный слайд: компактнее, чтобы стеклянная панель гарантированно
       помещалась и имела зазор от верхней рамки */
    .hero-slide--videobg { padding-top: 1.6rem !important; }
    .hero-slide-content--center .hero-glass-panel {
        padding: 1rem 1.15rem;
        margin-top: 10px;
        margin-bottom: 0.9rem;
    }
    .hero-logo-mark { font-size: 2.2rem; }
    .hero-title--xl { font-size: 1.4rem !important; }
    .hero-slide-content--center .hero-subtitle { font-size: 0.85rem; }
    .hero-cta--big { padding: 0.8rem 1.6rem; font-size: 0.95rem; }

    /* галереи можно таскать и мышкой (см. gallery-drag.js) */
    #shop-section .grid, #daily-tasks-section div.grid, .team-grid { cursor: grab; }
    .is-dragging { cursor: grabbing !important; scroll-snap-type: none !important; }
}

/* v2.3b — скролл не застревает на каруселях:
   тач: разрешены обе оси (вертикальный свайп уходит странице),
   мышь: axis-lock в gallery-drag.js v2 + отключение выделения на драге */
@media (max-width: 640px) {
    #shop-section .grid, #daily-tasks-section div.grid, .team-grid { touch-action: pan-x pan-y; }
}
body.drag-no-select { user-select: none; -webkit-user-select: none; }

/* v2.3c — Daily Tasks: ровно одна карточка в кадре, без выглядывающего
   края следующей (листается свайпом/драгом по одной) */
@media (max-width: 640px) {
    #daily-tasks-section div.grid { grid-auto-columns: 100% !important; }
}

/* ===================================================================
   MOBILE PATCH v2.4 — фидбек с реального устройства (Honor 50)
   =================================================================== */

/* дебаг-чип платформы («📱 Android / iOS») пользователю не нужен */
#mobile-indicator { display: none !important; }

@media (max-width: 640px) {
    /* высокие экраны: карусели больше вертикали — контент слайдов
       гарантированно помещается вместе с отступами от рамок */
    .hero-carousel { height: clamp(430px, 64vh, 540px); }

    /* слайд паков: LIMITED OFFER больше не срезается сверху */
    .hero-slide--packs { padding-top: 1.1rem !important; }
    .hero-slide--packs .hero-eyebrow { margin-bottom: 0.35rem; }

    /* внутренние отступы паков: текст не касается краёв подложек */
    .hero-pack-card { padding: 0.7rem 0.9rem !important; }
    .hero-pack-card .pack-media { gap: 0.8rem; align-items: center; }
    .hero-pack-card .pack-info { padding: 0.1rem 0 !important; }
    .hero-pack-card .pack-name { line-height: 1.25; margin-bottom: 0.18rem; }
    .hero-pack-card .pack-desc { line-height: 1.35; }
    .hero-pack-card .pack-price { margin-top: 0.25rem; }
    .hero-packs-row { gap: 0.6rem; }
}

/* совсем узкие экраны (Honor 50 ≈ 360px): ещё компактнее */
@media (max-width: 400px) {
    .hero-title--xl { font-size: 1.3rem !important; }
    .hero-slide-content--center .hero-subtitle { font-size: 0.82rem; }
    .hero-logo-mark { font-size: 2rem; }
    .hero-pack-card .pack-name { font-size: 0.84rem; }
    .hero-pack-card .pack-desc { font-size: 0.66rem; }
}

/* v2.4b — паки: больше воздуха слева — зазор иконка/текст и паддинги */
@media (max-width: 640px) {
    .hero-pack-card { padding: 0.75rem 1rem !important; }
    .hero-pack-card .pack-media { gap: 1.05rem; }
    .hero-pack-card .pack-info { padding-left: 0.2rem !important; }
}

/* v2.4c — pack-info: у текстовой подложки (с циановой рамкой) снова
   есть внутренние отступы — текст не касается её краёв
   (перекрывает ранние обнуления паддинга) */
@media (max-width: 640px) {
    .hero-pack-card .pack-info { padding: 0.55rem 0.8rem !important; }
}

/* ===================================================================
   MOBILE PATCH v2.5
   — слайд паков: контент прижат к верху слайда (раньше .hero-slide
     центрировал его, и при нехватке высоты чип LIMITED OFFER
     срезался верхней рамкой)
   — чуть выше минимум карусели для коротких вьюпортов
   — Windows 125%: мягкий ограничитель root-шрифта (см. коммент)
   =================================================================== */

@media (max-width: 640px) {
    .hero-slide--packs {
        display: flex !important;
        flex-direction: column;
        justify-content: flex-start !important;
        align-items: stretch;
        padding-top: 1.25rem !important;
    }
    .hero-slide--packs .hero-slide-content {
        margin: 0 auto auto !important;   /* auto снизу = прижат к верху */
        width: 100%;
    }
    .hero-carousel { height: clamp(440px, 64vh, 560px); }
    /* компакт заголовка паков — гарантия помещаемости на коротких экранах */
    .hero-slide--packs .hero-title { font-size: 1.05rem !important; }
}

/* Windows «размер текста 125%»: root-шрифт браузера становится 20px,
   и rem-сетка разъезжается относительно px-значений. Мягкий фикс:
   уважаем настройку пользователя, но ограничиваем дрейф ~10% —
   при 100% ничего не меняется (16px), при 125% вместо 20px будет 17.5px.
   Полный аудит единиц (px→rem) сделаем отдельным этапом. */
html { font-size: clamp(15px, 1rem, 17.5px); }

/* v2.5b — загрузочный экран: эмодзи-лого над заголовком (как в hero),
   бут-лог на 10px уже с каждой стороны — не липнет к краям телефона */
.loading-logo-mark {
    font-size: 2.6rem;
    line-height: 1;
    margin-bottom: 0.6rem;
    filter: drop-shadow(0 0 18px rgba(77, 232, 255, 0.35));
}
.fx-boot { max-width: min(280px, calc(100% - 20px)); }
.loading-screen .text-center { padding: 0 10px; }

/* v2.5c — слайд паков: вертикальное центрирование блока. auto-марджины
   центрируют, когда высоты хватает, и схлопываются в 0 при нехватке —
   чип LIMITED OFFER в этом случае прижат к верху, а не срезан */
@media (max-width: 640px) {
    .hero-slide--packs .hero-slide-content { margin: auto !important; }
    .hero-slide--packs { padding-bottom: 4.2rem !important; } /* низ = зона точек */
}

/* ===================================================================
   PATCH v2.6
   — Lab Simulation: дропдаун (свёрнут по умолчанию, шапка — кнопка)
   — outro на мобильном: картинка задаёт высоту сама, полная ширина,
     без обрезки и без «letterbox-миниатюры»
   =================================================================== */

/* --- sim dropdown --- */
.sim-collapsible .sec-head { cursor: pointer; user-select: none; }
.sim-collapsible .sec-head::after {
    content: '▾';
    color: var(--cyan, #4de8ff);
    font-size: 1rem;
    margin-left: 0.6rem;
    transition: transform 0.25s ease;
    transform: rotate(-90deg);           /* свёрнуто: стрелка вбок */
}
.sim-collapsible.is-open .sec-head::after { transform: rotate(0deg); }
.sim-collapsible .game-screen-panel {
    display: none;
}
.sim-collapsible.is-open .game-screen-panel {
    display: block;
    animation: simReveal 0.3s ease;
}
@keyframes simReveal {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}

/* outro: возвращена ИСХОДНАЯ реализация (cover, фикс. высота) —
   мои эксперименты v2.4/v2.6 откачены по просьбе владельца */

/* v2.6b — точки-индикаторы мобильных галерей (в стиле hero-карусели) */
.gal-dots {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin: 0.35rem 0 0.25rem;
}
.gal-dot {
    width: 9px; height: 9px;
    border-radius: 3px;
    border: none;
    padding: 0;
    background: rgba(122, 143, 166, 0.45);
    transition: all 0.25s ease;
    cursor: pointer;
}
.gal-dot.is-active {
    width: 22px;
    background: linear-gradient(90deg, #2f7bff, #4de8ff);
}
@media (min-width: 641px) { .gal-dots { display: none; } }