* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --accent: #7C3AED;
    --accent-rgb: 124, 58, 237;
    --universe-rot: 0deg;
    --logo-offset-x: 0px; /* fine horizontal tuning for logo overlay centering */
    --ring-width: 2px; /* orbital ring stroke width (must match ::after) */
    --footer-aspect: 1.46; /* width/height for footer media area to avoid JS measuring */
    --footer-ref-height: 260px; /* reference height to align divider across modals */
}

html, body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

body {
    font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    /* Use site-wide background image */
    background-color: #000;
    /* 50% dark overlay over the background image for better contrast */
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('bg.webp');
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
    color: #fff;
    overflow: hidden;
    height: 100vh;
    cursor: auto;
}

/* Headings use Space Grotesk */
h1, h2, h3, h4, h5, h6,
.central-title,
.hex-title,
.detail-content h2 {
    font-family: 'Space Grotesk', 'Lato', Arial, sans-serif;
}

/* Starfield canvas */
.starfield {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -3;
    /* Keep canvas transparent so the site background image is visible */
    background: transparent;
}

/* Custom Cursor */
.custom-cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    background: var(--accent);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: screen;
    transition: all 0.1s ease;
}

/* cursor trails removed */

/* Main Container - Hexagonal Universe */
.universe {
    position: relative;
    width: 200vw;
    height: 200vh;
    transform: translate3d(-50vw, -50vh, 0);
    transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* Hexagonal Grid System */
.hex-grid {
    position: absolute;
    width: 100%;
    height: 100%;
}

.hex-cell {
    position: absolute;
    width: 300px;
    height: 260px;
    margin: 130px 0;
    /* Wider shield-hex with a rounded (less sharp) bottom tip */
    clip-path: polygon(25% 0%, 75% 0%, 95% 52%, 50% 94%, 5% 52%);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(255, 255, 255, 0.05));
    border-style: solid;
    border-width: 2px;
    border-color: rgba(var(--accent-rgb), 0.35);
    border-top-color: transparent; /* hide top edge highlight */
    backdrop-filter: blur(10px);
    cursor: pointer;
    /* Smooth counter-rotation matches universe rotation timing */
    transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                background 0.6s cubic-bezier(0.23, 1, 0.32, 1),
                box-shadow 0.6s cubic-bezier(0.23, 1, 0.32, 1),
                border-color 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden;
    /* Keep visual orientation upright while universe rotates */
    --hex-scale: 1;
    --hex-rot: 0deg;
    transform: rotate(calc(-1 * var(--universe-rot))) scale(var(--hex-scale)) rotate(var(--hex-rot));
    will-change: transform, box-shadow, background, border-color;
}

/* Centering helper for top/bottom middle hexes */
.hex-center {
    left: 50% !important;
    margin-left: -150px; /* half of 300px width */
}

@media (max-width: 768px) {
    /* Reduce heavy paints and disable costly effects on mobile */
    body {
        background-attachment: scroll, scroll;
    }

    .tessellation { display: none; }

    .central-hub {
        animation: none;
        box-shadow: none;
    }
    .central-hub::before,
    .central-hub::after { display: none; }

    .logo { animation: none; filter: none; }

    .nav-node { box-shadow: none; }
    /* Keep nodes statically positioned on hover; no transform override on mobile */
    .nav-node:hover { box-shadow: none; --node-scale: 1; }
    .hex-center {
        margin-left: -100px; /* half of 200px width on mobile */
    }
}

.hex-cell:hover {
    --hex-scale: 1.1;
    --hex-rot: 5deg;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.35), rgba(255, 255, 255, 0.12));
    border-color: var(--accent);
    border-top-color: transparent;
    box-shadow: 0 0 50px rgba(var(--accent-rgb), 0.55);
}

.hex-cell.active {
    --hex-scale: 1.2;
    --hex-rot: 0deg;
    background: linear-gradient(135deg, var(--accent), rgba(var(--accent-rgb), 0.8));
    border-color: #fff;
    border-top-color: transparent;
    z-index: 1000;
}

/* Hex Content */
.hex-content {
    position: absolute;
    top: 37%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 20px;
    width: 80%;
}

.hex-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #fff;
}

.hex-subtitle {
    font-size: 12px;
    opacity: 0.8;
    line-height: 1.35;
}

.hex-icon {
    font-size: 40px;
    color: var(--accent);
    margin-bottom: 8px;
}

.hex-icon-img {
    display: inline-block;
    width: 72px;
    height: 72px;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.35));
}

/* Central Hub */
.central-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    /* Soft stellar core glow without hard edges */
    background:
        radial-gradient(closest-side, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.12) 25%, rgba(124,58,237,0.10) 55%, rgba(124,58,237,0.06) 72%, rgba(124,58,237,0.03) 85%, rgba(124,58,237,0.0) 100%),
        radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb), 0.35), transparent 70%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 2000;
    box-shadow:
        0 0 120px rgba(var(--accent-rgb), 0.55),
        inset 0 0 60px rgba(255,255,255,0.28);
    animation: pulse 3s infinite ease-in-out;
    will-change: transform;
}

/* Soft animated glow layers for the stellar core */
.central-hub::before {
    content: '';
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, rgba(var(--accent-rgb), 0.18) 40%, rgba(var(--accent-rgb), 0.08) 70%, rgba(124,58,237,0) 100%);
    filter: blur(22px);
    opacity: 0.7;
    animation: auraPulse 6s ease-in-out infinite;
    pointer-events: none;
}

.central-hub::after {
    content: '';
    position: absolute;
    inset: -80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.12) 0%, rgba(var(--accent-rgb), 0.08) 40%, rgba(124,58,237,0) 75%);
    filter: blur(40px);
    opacity: 0.55;
    animation: outerGlow 10s ease-in-out infinite;
    pointer-events: none;
}



.central-hub-inner {
    /* Keep hub content upright if universe rotates via CSS var */
    transform: rotate(calc(-1 * var(--universe-rot)));
    transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    /* Ensure perfect centering inside the circular hub */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.logo {
    width: 150px;
    height: 150px;
    display: block;
    margin-top: -8px;
    margin-bottom: 24px;
    margin-left: auto;
    margin-right: auto;
    animation: glowPulse 5.5s ease-in-out infinite;
    filter: drop-shadow(0 0 18px rgba(var(--accent-rgb), 0.5)) drop-shadow(0 0 7px rgba(255,255,255,0.32));
}

.logo::after { display: none; }

/* Remove styles related to stylized text A */

.central-title {
    font-size: 32px;
    font-weight: 900;
    text-align: center;
    line-height: 1.2;
}

.central-subtitle {
    font-size: 14px;
    opacity: 0.9;
    margin-top: 10px;
    text-align: center;
}

/* Orbital Navigation */
.orbital-nav {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(var(--orbit-rot, 0deg));
    width: 600px;
    height: 600px;
    border: 0;
    border-radius: 50%;
    z-index: 1500;
    transform-origin: center;
    will-change: transform;
    /* radius follows element size; subtract half stroke to hit center of line */
    --orbit-radius: calc(50% - (var(--ring-width) / 2));
}

/* Overlay the orbital ring above nodes so the line visually passes through centers */
.orbital-nav::after {
    content: '';
    position: absolute;
    inset: 0;
    border: var(--ring-width) solid rgba(var(--accent-rgb), 0.3);
    border-radius: 50%;
    pointer-events: none;
    /* Place ring behind nav nodes */
    z-index: 0;
}

.nav-node {
    position: absolute;
    width: 60px;
    height: 60px;
    background: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.3s ease,
                background 0.3s ease,
                border-color 0.3s ease;
    border: 3px solid #fff;
    /* Counter-rotate to keep upright relative to page */
    --node-scale: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
               rotate(var(--node-angle, 0deg))
               translateX(var(--orbit-radius, 0px))
               rotate(calc(-1 * var(--node-angle, 0deg)))
               rotate(calc(-1 * var(--orbit-rot, 0deg)))
               rotate(calc(-1 * var(--universe-rot)))
               scale(var(--node-scale));
    will-change: transform, box-shadow, background, border-color;
    /* Ensure nodes render above the orbital ring */
    z-index: 1;
}

.nav-node .nav-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), 0.35));
}

.nav-node:hover {
    --node-scale: 1.3;
    box-shadow: 0 0 30px var(--accent);
}

/* Keep icons upright while orbiting and while universe rotates */
.nav-node i {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes upright {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

/* Positions will be set dynamically via JS to lie exactly on the ring */

/* Flowing Connections */
.connection {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0), var(--accent), rgba(var(--accent-rgb), 0));
    z-index: 500;
}

.connection::before {
    content: '';
    position: absolute;
    top: -5px;
    width: 10px;
    height: 10px;
    background: var(--accent);
    border-radius: 50%;
    animation: flow 3s infinite ease-in-out;
}

/* Reverse particle direction for incoming connections */
.connection.incoming::before {
    animation-direction: reverse;
}

/* Tessellated Background */
.tessellation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.1;
}

.tessellation::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        polygon(50% 0%, 0% 100%, 100% 100%),
        polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    background-size: 60px 52px, 120px 104px;
    background-repeat: repeat;
    animation: tessellate 20s infinite linear;
}

/* Fractal Detail Panel */
.detail-panel {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translate3d(110%, -50%, 0);
    width: 380px;
    height: 80vh;
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid var(--accent);
    border-radius: 20px 0 0 20px;
    padding: 30px;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 3000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.detail-panel.active {
    transform: translate3d(0, -50%, 0);
}

/* Make content area scrollable inside flex panel */
.detail-panel .detail-content {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    /* Hide scrollbars but keep scrolling */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}
.detail-panel .detail-content::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Show scrollbar only while scrolling/hovering */
.detail-panel .detail-content.scrolling { scrollbar-width: thin; -ms-overflow-style: auto; }
.detail-panel .detail-content.scrolling::-webkit-scrollbar { width: 8px; height: 8px; display: block; }
.detail-panel .detail-content.scrolling::-webkit-scrollbar-track { background: transparent; }
.detail-panel .detail-content.scrolling::-webkit-scrollbar-thumb {
    background-color: rgba(var(--accent-rgb), 0.55);
    border-radius: 8px;
}

/* Sticky footer area for modal illustration */
.detail-footer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(var(--accent-rgb), 0.2);
    position: relative;
    display: block;
    overflow: hidden; /* prevent metrics/image from spilling out during initial height sync */
    box-sizing: border-box;
}

/* Hide mobile-only close button on desktop by default */
.detail-close { display: none; }

/* Curtain handle toggle button */
.detail-toggle {
    position: fixed;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 56px;
    height: 140px;
    border-radius: 16px;
    border: 2px solid var(--accent);
    background: rgba(0,0,0,0.75);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.25s ease, box-shadow 0.25s ease, right 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 3200;
}
.detail-toggle:hover {
    background: var(--accent);
    box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.35);
}
.detail-toggle i { font-size: 22px; }

/* When panel is open, move the handle to its left edge and flip arrow */
.detail-panel.active ~ .detail-toggle {
    /* Slightly larger overlap of the handle over the open panel */
    right: calc(380px - 12px);
}

.detail-content h2 {
    color: var(--accent);
    margin-bottom: 20px;
    font-size: 24px;
}

.detail-content p {
    line-height: 1.6;
    margin-bottom: 15px;
    opacity: 0.9;
}

/* Vote account block in Welcome */
.detail-content .vote-account { margin: 14px 0 2px; }
.detail-content .vote-account .va-label {
    font-weight: 700;
    margin-bottom: 6px;
    color: rgba(255,255,255,0.9);
}
.detail-content .copy-field {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(var(--accent-rgb), 0.4);
    border-radius: 10px;
    background: rgba(0,0,0,0.35);
}
.detail-content .copy-text {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    word-break: break-all;
    user-select: text;
}
.detail-content .copy-btn {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--accent);
    background: rgba(0,0,0,0.2);
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.detail-content .copy-btn:hover { background: var(--accent); box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.35); }
.detail-content .copy-btn:active { transform: translateY(-1px); }
.detail-content .copy-field.copied { border-color: var(--accent); box-shadow: inset 0 0 0 2px rgba(var(--accent-rgb), 0.25); }
.detail-content .copy-field.copied .copy-btn { background: var(--accent); }

/* Make modal text fill full line width for better readability */
.detail-content p {
    text-align: justify;
    text-justify: inter-word;
}
.detail-content li {
    text-align: left;
    text-justify: auto;
}

/* Justify list items only in STAKING PORTAL modal */
.detail-content ol.justify-list li {
    text-align: justify;
    text-justify: inter-word;
}

/* Modal illustration styling */
.modal-illustration {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    margin-top: 16px;
    border: 1px solid rgba(var(--accent-rgb), 0.25);
}

/* Divider used in modals to separate intro from metrics */
.detail-content .modal-divider {
    width: 100%;
    height: 0;
    margin: 16px 0 12px;
    border: 0;
    border-top: 1px solid rgba(var(--accent-rgb), 0.2);
}

/* Consistent spacing for list items in modals (exclude contact list) */
.detail-content ul:not(.contact-list) li,
.detail-content ol:not(.contact-list) li {
	margin: 12px 0;
	line-height: 1.6;
}

/* Compact list spacing for selected modals (1–4) */
.detail-content ul.tight-list li,
.detail-content ol.tight-list li {
	margin: 0;
}

/* Aligned contact list */
.detail-content .contact-list {
    list-style: none;
    margin: 16px 0;
    padding: 0;
    /* Keep list centered by content width, then offset slightly left */
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    transform: translateX(-15%);
}
.detail-content .contact-list li {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
}
.detail-content .contact-list .label {
    color: rgba(255,255,255,0.85);
    font-weight: 700;
    text-align: right;
    justify-self: end;
}
.detail-content .contact-list .value { justify-self: start; }
.detail-content .contact-list .value a {
    color: var(--accent);
    text-decoration: underline;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 30px;
}

/* Center metrics grid when placed in the footer (modal 0)
   Footer exists only when content includes an element with class 'modal-illustration'.
   In Welcome, the metrics grid has both 'modal-illustration stats-grid', so it's moved to footer. */
/* Footer type flags */
.detail-footer::before {
    content: "";
    display: block;
    width: 100%;
    padding-bottom: calc(100% / var(--footer-aspect)); /* reserve height */
}

.footer-media {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: stretch;
}

/* Stick metrics to the bottom of the reserved media area */
.detail-footer.has-metrics .footer-media { align-content: end; }
.detail-footer.has-metrics .footer-media .stats-grid { align-self: end; }

/* Wider metrics grid and centered below the divider */
.footer-media .stats-grid {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    margin: 0 auto;
    height: 100%;
    display: grid;
    align-content: center; /* vertical centering within reserved height */
    justify-items: stretch; /* stretch cards to full cell width */
}

/* Remove extra top margin for items moved to footer */
.footer-media .modal-illustration { margin-top: 0; }

/* Make stat cards occupy full width of their grid cells */
.footer-media .stats-grid .stat-card { width: 100%; }

/* Hide outline of the metrics container (only for stats grid moved to footer) */
.footer-media .stats-grid.modal-illustration {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Ensure images honor the reserved aspect-ratio area without shifting */
.detail-footer.has-image .footer-media { align-content: end; }
.detail-footer.has-image .footer-media .modal-illustration {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    align-self: end;
}

.stat-card {
    background: rgba(var(--accent-rgb), 0.1);
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
}

.stat-number {
    font-size: 24px;
    font-weight: 800;
    color: var(--accent);
}

.stat-label {
    font-size: 12px;
    opacity: 0.8;
    margin-top: 5px;
}

/* impossible-structure visuals removed */

/* Multi-dimensional Scroll Indicator */
.scroll-indicator {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 4000;
    background: rgba(0, 0, 0, 0.55);
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(var(--accent-rgb), 0.5);
    backdrop-filter: blur(6px);
    align-items: center;
}

.scroll-direction {
    width: 40px;
    height: 40px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.scroll-direction:hover {
    background: var(--accent);
    transform: scale(1.1);
}

/* Control Panel */
.control-panel {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.55);
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(var(--accent-rgb), 0.5);
    z-index: 4000;
    display: flex;
    align-items: center;
    gap: 10px;
    backdrop-filter: blur(6px);
}

.control-button {
    width: 46px;
    height: 46px;
    padding: 0;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    border: 1px solid var(--accent);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

.control-button:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.35);
}

/* Solflare button (modal 5) */
.solflare-btn {
    display: inline-block;
    margin-top: 12px;
    text-decoration: none;
    border-radius: 12px;
    /* Always show filled purple background with thin white border */
    background: var(--accent);
    border: 1px solid #fff;
    overflow: hidden;
    transition: all 0.25s ease;
}
.solflare-img {
    display: block;
    width: 60%;
    height: auto;
    border-radius: 12px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
    margin-left: auto;
    margin-right: auto;
    transform: scale(0.8);
    transform-origin: center;
}
.solflare-btn:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.35);
}
.solflare-btn:hover .solflare-img {
    transform: scale(0.8) scale(1.03);
}
/* Touch feedback for mobile: mimic hover on press */
.solflare-btn:active {
    background: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.35);
}
.solflare-btn:active .solflare-img {
    transform: scale(0.82) scale(0.98);
}

/* Liquid Morphing Background */
.liquid-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background: radial-gradient(circle at 20% 50%, rgba(var(--accent-rgb), 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(var(--accent-rgb), 0.1) 0%, transparent 50%),
                radial-gradient(circle at 40% 80%, rgba(var(--accent-rgb), 0.1) 0%, transparent 50%);
    animation: none;
    will-change: auto;
}

/* Animations */
@keyframes pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.05); }
}

@keyframes auraPulse {
    0%, 100% { opacity: 0.55; transform: scale(0.98); }
    50% { opacity: 0.8; transform: scale(1.02); }
}

@keyframes outerGlow {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.65; }
}

@keyframes glowPulse {
    0%, 100% { filter: drop-shadow(0 0 18px rgba(var(--accent-rgb), 0.50)) drop-shadow(0 0 7px rgba(255,255,255,0.32)); }
    50% { filter: drop-shadow(0 0 28px rgba(var(--accent-rgb), 0.75)) drop-shadow(0 0 12px rgba(255,255,255,0.5)); }
}

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

@keyframes rotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes flow {
    0% { left: 0; opacity: 0; }
    50% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

@keyframes tessellate {
    from { transform: translateX(0); }
    to { transform: translateX(60px); }
}

/* keyframes 'impossible' removed */

@keyframes liquid {
    0%, 100% { transform: scale(1) rotate(0deg); }
    33% { transform: scale(1.1) rotate(120deg); }
    66% { transform: scale(0.9) rotate(240deg); }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .universe {
        width: 100vw;
        height: 100vh;
        transform: translate(0, 0);
    }

    .hex-cell {
        width: 200px;
        height: 173px;
        margin: 86px 0;
    }

    .central-hub {
        width: 260px;
        height: 260px;
        pointer-events: auto; /* enable tap on center to open welcome */
        top: calc(50% - 8vh);
        overflow: hidden; /* ensure inner content never bleeds outside the circle */
        z-index: 2600; /* above orbital nav for center taps */
        cursor: pointer;
    }

    .central-title {
        font-size: 20px;
        margin-bottom: 6px;
    }
    .central-hub-inner {
        padding: 8px 12px;
    }

    .logo {
        width: 110px;
        height: 110px;
        margin-top: 0;
        margin-bottom: 12px;
    }

    .hex-icon-img {
        width: 58px;
        height: 58px;
    }

    .central-subtitle {
        font-size: 12px;
        line-height: 1.3;
        max-width: 85%;
        margin-left: auto;
        margin-right: auto;
    }

    .orbital-nav {
        position: fixed;
        left: 50%;
        top: calc(50% - 8vh);
        transform: translate(-50%, -50%) rotate(var(--orbit-rot, 0deg));
        width: 320px;
        height: 320px;
        z-index: 2500; /* above central hub visuals */
    }

    .control-panel {
        top: 10px;
        left: 10px;
        padding: 15px;
    }

    .detail-panel {
        position: fixed;
        left: 50%;
        top: 50%;
        right: auto;
        bottom: auto;
        width: min(92vw, 420px);
        max-height: 80vh;
        border-radius: 16px;
        transform: translate(-50%, -50%) scale(0.98);
        opacity: 0;
        pointer-events: none;
        box-sizing: border-box;
        padding: 16px 16px 20px;
        word-break: break-word;
        display: flex;
        flex-direction: column;
    }
    .detail-panel.active {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        pointer-events: auto;
    }

    .detail-panel .detail-content {
        flex: 1 1 auto;
        max-height: none;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .detail-content h2 { font-size: 24px; margin-bottom: 16px; }
    .detail-content { text-align: left; }
    .detail-content p { margin-bottom: 15px; line-height: 1.6; opacity: 0.9; }
    .detail-content ul, .detail-content ol { padding-left: 20px; margin: 12px 0; }
    .detail-content li { margin: 12px 0; line-height: 1.6; }
    .detail-content li::marker { color: var(--accent); font-weight: 700; }
    .detail-content a { color: var(--accent); text-decoration: underline; }
    .detail-content p { display: block; -webkit-line-clamp: unset; -webkit-box-orient: initial; overflow: visible; }
    /* Preserve bullets/numbers on mobile */
    .detail-content li { display: list-item; -webkit-line-clamp: unset; -webkit-box-orient: initial; overflow: visible; }
    .stats-grid { grid-template-columns: 1fr 1fr; }

    /* Keep Solflare button readable and consistent on mobile */
    .solflare-img { width: 70%; }

    /* Ensure contact list alignment also holds on narrow screens */
    .detail-content .contact-list {
        grid-auto-flow: row;
        /* Match desktop: keep centered by content width and offset slightly left */
        width: max-content;
        margin-left: auto;
        margin-right: auto;
        transform: translateX(-15%);
    }
    .detail-content .contact-list .label { text-align: right; justify-self: end; }
    .detail-content .contact-list .value { justify-self: start; }

    /* Hide top and bottom control UI on mobile */
    .control-panel,
    .scroll-indicator {
        display: none;
    }

    /* De-clutter: show only the orbital with icons */
    .hex-grid .hex-cell,
    .connection {
        display: none;
    }

    /* Prevent any page-level scrollbars on small screens */
    body { overflow: hidden; }

    /* Slightly smaller nodes for mobile ergonomics */
    .nav-node {
        width: 56px;
        height: 56px;
        border-width: 2px;
        /* prevent any orbit "flying" animation on tap */
        transition: none;
        --node-scale: 1;
    }
    .nav-node .nav-icon {
        width: 40px;
        height: 40px;
    }
    .nav-node:active { --node-scale: 0.94; }

    /* Polished modal look on mobile */
    .detail-panel {
        background: rgba(0,0,0,0.92);
        border: 1px solid rgba(var(--accent-rgb), 0.5);
        box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    }
    /* Hide handle on mobile; use close button inside panel */
    .detail-toggle { display: none; }
    .detail-close {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid var(--accent);
        background: rgba(0,0,0,0.3);
        color: #fff;
        display: grid;
        place-items: center;
        cursor: pointer;
        transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
        z-index: 1;
    }
    .detail-close:hover {
        background: var(--accent);
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.35);
    }
    .detail-content a { color: var(--accent); text-decoration: underline; }
    .detail-content ul { list-style: disc; }
    .detail-content ol { list-style: decimal; }
    .detail-content li::marker { color: var(--accent); }
}