/* UNIT3 - RAW/BRUTALIST THEME (v19 - TYPOGRAPHY REVAMP) */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;900&family=Space+Grotesk:wght@400;500;600;700&family=Syne:wght@600;700;800&display=swap');

/* 1. VARIABLES & SETUP */
:root {
    --bg-color: #0a0a0a;
    --text-color: #fafafa;
    --border-style: 1px solid #fafafa;
    --accent-color: #fafafa;

    --font-logo: 'Orbitron', sans-serif;
    /* Logo ONLY */
    --font-ui: 'Syne', sans-serif;
    /* Buttons, headers, UI */
    --font-body: 'Space Grotesk', sans-serif;
    /* General body text */
    --font-address: 'Courier New', monospace;
    /* Address + map ONLY */

    --transition-speed: 0.1s;
    transition: background-color var(--transition-speed);
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
}

html {
    background-color: var(--bg-color);
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-ui);
    font-size: 16px;
    overflow: hidden;
    position: relative;
    isolation: isolate;
    /* Use pseudo-element for grid to prevent splitting/collapsing margin bugs */
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: -2;
}

body.light-mode::before {
    background-image: radial-gradient(rgba(0, 0, 0, 0.2) 1px, transparent 1px);
}

body.edit-mode::before {
    opacity: 1;
    visibility: visible;
}

/* 2. TYPOGRAPHY & BUTTONS */
h1,
h2,
h3 {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

button {
    background: transparent;
    border: var(--border-style);
    color: var(--text-color);
    font-family: var(--font-ui);
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    padding: 10px 20px;
    font-size: 1rem;
    transition: background var(--transition-speed) linear, color var(--transition-speed) linear;
}

button:hover {
    background: var(--text-color);
    color: var(--bg-color);
}

a {
    color: inherit;
    text-decoration: underline;
}

/* 3. CENTRE STATE */
#centre-state {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.logo-container,
.tagline-container {
    text-align: center;
    user-select: none;
    position: relative;
    z-index: 40;
    pointer-events: none;
    color: var(--text-color);
}

.logo-main {
    font-family: var(--font-logo);
    font-size: 5rem;
    font-weight: 900;
    letter-spacing: 5px;
    margin-bottom: 0.5rem;
}

/* New SVG wordmark */
#unit3-logo {
    display: block;
    width: min(360px, 72vw);
    height: auto;
    margin: 0 auto;
    cursor: pointer;
    pointer-events: auto;
    /* Rotated/flying strikes may extend past the wordmark bounds — let them */
    overflow: visible;
}

/* The three strikes of the "3" — animate around their own centre */
.logo-strike {
    transform-box: fill-box;
    transform-origin: center;
}

.tagline {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 2px;
    white-space: nowrap;
}

/* PILLAR NAV (Glides to side) */
.pillar-nav {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate3d(calc(-50% + var(--drag-x, 0px)), calc(-50% + var(--drag-y, 0px)), 0);
    display: flex;
    z-index: 65;
    flex-direction: row;
    gap: 2rem;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    margin-top: 10rem;
    /* Give space for logo */
}

.pillar-btn {
    font-size: 1.5rem;
    font-family: var(--font-ui);
    letter-spacing: 3px;
    padding: 15px 30px;
    background: transparent;
    color: #fff;
    border: 1px solid transparent;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    white-space: nowrap;
    transform: translate3d(var(--drag-x, 0px), var(--drag-y, 0px), 0) scale(var(--drag-scale, 1)) rotate(var(--drag-rotate, 0deg));
    transform-origin: center center;
}

.pillar-btn:hover {
    border-color: var(--text-color);
    background: transparent;
    color: var(--text-color);
    mix-blend-mode: difference;
    transform: translate3d(var(--drag-x, 0px), var(--drag-y, 0px), 0) scale(1.08) rotate(var(--drag-rotate, 0deg));
    letter-spacing: 6px;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3), 0 0 40px rgba(255, 255, 255, 0.1);
}

/* Drawer open state (glides to sidebar) */
body.drawer-open .pillar-nav {
    top: 0;
    left: 0;
    transform: translate(0, 0);
    width: 250px;
    height: 100vh;
    flex-direction: column;
    justify-content: flex-start;
    padding: 2rem;
    padding-top: 10rem;
    gap: 2rem;
    margin-top: 0;
}

body.drawer-open .pillar-btn {
    border: none;
    padding: 0;
    text-align: left;
    background: transparent;
    color: #fff;
    opacity: 0.4;
    font-weight: 900;
    letter-spacing: 2px;
    transform: none !important;
}

body.drawer-open .pillar-btn:hover,
body.drawer-open .pillar-btn.active {
    background: transparent;
    color: #fff;
    opacity: 1;
}

.latest-btn-container {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
}

.latest-btn-container button {
    font-size: 1.2rem;
    padding: 12px 40px;
}

.footer-info {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    text-align: left;
    font-size: 0.8rem;
    opacity: 0.7;
    font-family: var(--font-address);
}

.status-dot {
    color: #00ff00;
}

/* 4. DRAWER SYSTEM */
.drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 60vw;
    height: 100vh;
    background: var(--bg-color);
    border-left: var(--border-style);
    transform: translateX(100%);
    transition: transform var(--transition-speed) linear, width 0.3s ease;
    z-index: 20;
    display: flex;
    flex-direction: column;
    padding: 0;
    min-width: 300px;
    /* Prevent shrinking too small */
    max-width: 100vw;
}

/* DRAGGING STATE - Disable transition for instant follow */
.drawer.is-dragging {
    transition: none !important;
    user-select: none;
    pointer-events: auto;
    /* Ensure events still fire */
}

/* DRAG HANDLE */
.drag-handle {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 15px;
    cursor: col-resize;
    z-index: 100;
    /* Visual indicator on hover */
    display: flex;
    align-items: center;
    justify-content: center;
}

.drag-handle:hover,
.drawer.is-dragging .drag-handle {
    background: rgba(255, 255, 255, 0.1);
}

/* Grip Line Visual */
.drag-handle::after {
    content: '';
    width: 1px;
    height: 30px;
    background: #555;
    display: block;
}

/* Default Width */
.drawer {
    width: 60vw;
}

/* Width Modifiers */
.drawer.width-small {
    width: 30vw;
}

.drawer.width-medium {
    width: 60vw;
}

.drawer.width-large {
    width: 90vw;
}

.drawer.active {
    transform: translateX(0);
}

.drawer-header {
    padding: 2rem;
    border-bottom: var(--border-style);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* Changed for filter bar */
    background: var(--bg-color);
    position: sticky;
    top: 0;
    z-index: 5;
}

/* FILTER BAR STYLES */
.filter-bar {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 4px 8px;
    font-size: 1.2rem;
    /* Emoji size */
    border: 1px solid transparent;
    /* Hidden border default */
    opacity: 0.5;
}

.filter-btn:first-child {
    font-size: 0.8rem;
    /* Text size for ALL */
    padding: 6px 8px;
    border: 1px solid #333;
}

.filter-btn:hover {
    background: transparent;
    border-color: #fff;
    opacity: 1;
    color: var(--text-color);
}

.filter-btn.active {
    opacity: 1;
    border-color: var(--text-color);
    background: rgba(255, 255, 255, 0.1);
}

/* HEADER ACTIONS (Reset & Close) */
.header-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.icon-btn {
    border: none;
    background: transparent;
    color: var(--text-color);
    font-size: 1.25rem;
    /* Slightly larger for touch targets */
    cursor: pointer;
    padding: 5px;
    line-height: 1;
    transition: all 0.2s ease;
    opacity: 0.6;
}

.icon-btn:hover {
    opacity: 1;
    background: transparent;
    color: var(--text-color);
}

/* Specific: Reset Button */
.reset-btn {
    font-size: 1.1rem;
    /* slightly smaller icon */
}

.reset-btn:hover {
    transform: rotate(-180deg);
    /* Counter-clockwise spin */
}

/* Specific: Close Button */
.close-btn {
    font-size: 1.4rem;
}

.close-btn:hover {
    transform: rotate(90deg);
    /* Smooth quarter turn */
    color: #e55a2b;
    /* Optional: Accent color on hover? Or stick to white. Let's stick to white/theme default first or maybe just brighter */
}

.drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
}

/* Scrollbar styling */
.drawer-content::-webkit-scrollbar {
    width: 8px;
}

.drawer-content::-webkit-scrollbar-track {
    background: var(--bg-color);
    border-left: 1px solid #333;
}

.drawer-content::-webkit-scrollbar-thumb {
    background: var(--text-color);
}

/* 5. SECTION MARKERS */
.section-marker {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.4;
    margin: 3rem 0 1.5rem 0;
    border-bottom: 1px dashed #333;
    padding-bottom: 0.5rem;
}

.section-marker:first-child {
    margin-top: 0;
}

/* 6. INFINITE WALL BLOCKS */
.block {
    border: var(--border-style);
    padding: 1.5rem;
    margin-bottom: 2rem;
    cursor: pointer;
    background: var(--bg-color);
    transition: all var(--transition-speed) linear;
}

.block:hover {
    background: #111;
    border-color: #fff;
}

.block-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.block-header h3 {
    margin: 0;
    font-size: 1rem;
}

.block-emoji {
    font-size: 1.5rem;
}

.pillar-label {
    display: inline-block;
    font-size: 0.65rem;
    text-transform: uppercase;
    opacity: 0.5;
    margin-bottom: 0.75rem;
    letter-spacing: 1px;
}

.block-preview {
    margin-bottom: 0.5rem;
}

.block-preview p {
    font-size: 0.9rem;
    line-height: 1.4;
    opacity: 0.8;
}

.block-expanded {
    display: none;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed #333;
}

/* Expanded State */
.block.expanded {
    background: #0f0f0f;
    border: 2px solid white;
}

.block.expanded .block-preview {
    display: none;
}

.block.expanded .block-expanded {
    display: block;
    animation: quickFade 0.2s;
}

.block-expanded p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

.block img {
    margin-top: 1rem;
    width: 100%;
    height: auto;
    border: var(--border-style);
    display: block;
}

.tag {
    display: inline-block;
    font-size: 0.7rem;
    opacity: 0.5;
    margin-right: 0.75rem;
}

.block-meta {
    margin-top: 1rem;
}

/* 7. ANIMATIONS */
@keyframes quickFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 8. MARKETPLACE MODAL */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    display: none;
    z-index: 30;
}

.modal-overlay.active {
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    width: 90%;
    max-width: 1200px;
    height: 90vh;
    background: var(--bg-color);
    border: 2px solid var(--text-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-header {
    padding: 2rem;
    border-bottom: var(--border-style);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* SHOP MODAL HEADER */
.shop-modal-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.2rem 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-wrap: nowrap;
}

.shop-modal-header h2 {
    flex-shrink: 0;
    margin: 0;
}

.shop-filter-pills {
    display: flex;
    gap: 0;
    flex: 1;
}

.shop-pill {
    background: transparent;
    color: var(--text-color);
    border: none;
    border-bottom: 1px solid transparent;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    letter-spacing: 2px;
    padding: 4px 12px;
    cursor: pointer;
    opacity: 0.35;
    transition: opacity 0.15s, border-color 0.15s;
}

.shop-pill:hover {
    opacity: 0.75;
}

.shop-pill.active {
    opacity: 1;
    border-bottom-color: var(--text-color);
}

.shop-right-controls {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-left: auto;
    flex-shrink: 0;
}

.shop-sort-toggle {
    background: transparent;
    color: var(--text-color);
    border: none;
    font-family: var(--font-ui);
    font-size: 0.65rem;
    letter-spacing: 2px;
    cursor: pointer;
    opacity: 0.4;
    padding: 0;
    transition: opacity 0.15s;
    white-space: nowrap;
}

.shop-sort-toggle:hover {
    opacity: 1;
}

/* SHOP GRID — zero-gap border trick */
/* ── MARKETPLACE TABS BAR ── */
.marketplace-tabs-bar {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    min-height: 40px;
    align-items: center;
    overflow-x: auto;
}

.product-tab {
    background: transparent;
    border: 1px solid var(--text-color);
    color: var(--text-color);
    padding: 4px 12px;
    font-family: var(--font-ui);
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.product-tab:hover,
.product-tab.active {
    background: var(--text-color);
    color: var(--bg-color);
}

/* ── OS PRODUCT WINDOW ── */
.product-window {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 350px;
    max-width: 90vw;
    background: var(--bg-color);
    border: 1px solid var(--text-color);
    z-index: 100;
    display: flex;
    flex-direction: column;
    box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.5);
    transition: opacity 0.2s;
}

.product-window.minimized {
    display: none;
}

.pw-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    border-bottom: 1px solid var(--text-color);
    background: var(--text-color);
    color: var(--bg-color);
    cursor: grab;
    user-select: none;
}

.pw-header:active {
    cursor: grabbing;
}

.pw-title {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 1rem;
}

.pw-controls {
    display: flex;
    gap: 5px;
}

.pw-btn {
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--bg-color);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    cursor: pointer;
    font-family: monospace;
    transition: all 0.2s;
}

.pw-btn:hover {
    background: transparent;
    color: var(--bg-color);
    border-color: var(--bg-color);
}

.pw-content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 60vh;
    overflow-y: auto;
}

.pw-image {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.05);
}

.pw-desc {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    line-height: 1.4;
    opacity: 0.8;
}

.pw-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.2);
}

.pw-price {
    font-family: var(--font-number);
    font-size: 1.2rem;
}

.pw-buy {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--text-color);
    color: var(--text-color);
    font-family: var(--font-ui);
    font-size: 0.7rem;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
}

.pw-buy:hover {
    background: var(--text-color);
    color: var(--bg-color);
}

/* ── QUICK BUY OVERRIDES ── */
.quick-buy-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 5px 10px;
    font-family: var(--font-ui);
    font-size: 0.6rem;
    letter-spacing: 1px;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s;
    z-index: 5;
}

.product-card:not(.in-store):hover .quick-buy-btn {
    opacity: 1;
}

.product-card:not(.in-store):hover::after {
    display: none;
    /* Hide old BUY label */
}

.shop-grid {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.product-card {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background 0.2s;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    background: rgba(255, 255, 255, 0.03);
}

.product-card.in-store {
    cursor: default;
}

.product-img-wrap {
    aspect-ratio: 1;
    overflow: hidden;
    position: relative;
    background: rgba(255, 255, 255, 0.04);
}

.product-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);
    display: block;
}

.product-card:hover .product-img-wrap img {
    transform: scale(1.04);
}

/* Hover fade-in label */
.product-card:not(.in-store)::after {
    content: 'BUY';
    position: absolute;
    top: 10px;
    right: 10px;
    font-family: var(--font-ui);
    font-size: 0.58rem;
    letter-spacing: 2px;
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity 0.2s, transform 0.2s;
}

.product-card:not(.in-store):hover::after {
    opacity: 1;
    transform: translateY(0);
}

.product-info-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 12px 12px;
    gap: 8px;
}

.product-name {
    font-family: system-ui, -apple-system, 'Helvetica Neue', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.3;
    opacity: 0.88;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-price {
    font-family: system-ui, -apple-system, 'Helvetica Neue', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    opacity: 0.55;
    white-space: nowrap;
    flex-shrink: 0;
    color: var(--text-color);
}

/* FEATURED MARKETPLACE IN WALL */
.marketplace-featured {
    border: var(--border-style);
    padding: 1.5rem;
    margin-bottom: 2rem;
    background: #0a0a0a;
}

.marketplace-preview {
    display: flex;
    gap: 1rem;
    margin: 1rem 0;
}

.mini-product {
    border: 1px dashed #333;
    padding: 0.5rem;
    flex: 1;
    text-align: center;
    cursor: pointer;
}

.shop-cta {
    text-align: center;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .logo-main {
        font-size: 3rem;
    }

    .pillar-nav {
        flex-direction: column;
        gap: 1rem;
        width: 80%;
    }

    .pillar-btn {
        font-size: 1.2rem;
    }

    .drawer {
        width: 100vw;
        height: 90vh;
        bottom: 0;
        top: auto;
        border-left: none;
        border-top: var(--border-style);
        transform: translateY(100%);
    }

    .drawer.active {
        transform: translateY(0);
    }

    .latest-btn-container {
        width: 90%;
        text-align: center;
    }

    .latest-btn-container button {
        width: 100%;
    }

    .shop-controls {
        flex-direction: column;
        gap: 0.5rem;
    }

    .drawer-header {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .close-btn {
        position: absolute;
        top: 2rem;
        right: 1rem;
    }
}

/* 12. CALENDAR MODAL */
.calendar-modal-content {
    max-width: 900px;
}

.calendar-view {
    padding: 2rem;
    overflow-y: auto;
    max-height: 70vh;
}

/* Hide gliding nav on mobile when drawer is open to let drawer take over */
@media (max-width: 768px) {
    body.drawer-open .pillar-nav {
        display: none;
    }

    .drawer {
        z-index: 40;
    }
}

/* 14. MENU MODAL */
.menu-modal-content {
    max-width: 600px;
    height: auto;
    max-height: 80vh;
}

.menu-view {
    padding: 3rem;
    text-align: center;
}

.menu-view h3 {
    margin-top: 1rem;
    font-size: 1.5rem;
}

.menu-view p {
    font-size: 1.1rem;
    line-height: 1.6;
}

/* 15. CONTROL CLUSTER */
.control-cluster {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    gap: 0.5rem;
    z-index: 50;
}

.latest-feed-btn {
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s ease, background 0.2s ease;
    font-size: 1.2rem;
    padding: 10px 20px;
    font-weight: 900;
    background: var(--text-color);
    color: var(--bg-color);
    border: none;
    border-radius: 50px;
}

.latest-feed-btn:hover {
    transform: scale(1.05);
    background: #fff;
    color: #000;
}

.latest-feed-btn:active {
    transform: scale(0.95);
}

.latest-feed-container {
    position: fixed;
    bottom: 5rem;
    right: 2rem;
    width: 380px;
    max-height: 70vh;
    background: var(--bg-color);
    border: var(--border-style);
    border-radius: 8px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    transform: translateY(20px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    overflow: hidden;
}

.latest-feed-container.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.latest-feed-container .drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.control-btn {
    width: 45px;
    height: 45px;
    padding: 0;
    font-size: 1.2rem;
    border: 1px solid var(--text-color);
    background: var(--bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

.control-btn:hover {
    background: var(--text-color);
    color: var(--bg-color);
    transform: translateY(-2px);
}

/* (duplicate .footer-info rule removed — consolidated above) */

/* 16. THEME TOGGLE */
body.light-mode {
    --bg-color: #fafafa;
    --text-color: #0a0a0a;
    --border-style: 1px solid #0a0a0a;
}

/* Invert specific elements if needed manually, or rely on vars */

/* 17. REFINEMENTS */
.block-type-label {
    font-size: 0.75rem;
    font-weight: bold;
    opacity: 0.6;
    margin-right: 0.5rem;
    letter-spacing: 1px;
}

/* 18. LOGO GLIDE ANIMATION */
/* Hide the sidebar logo, we will reuse the center one */
.sidebar-logo,
/* If any leftover */
.drawer .logo-main,
.drawer-header h2 {
    /* Actually we keep the headers text 'CREATES' etc. */
    /* But the main UNIT3 Logo is what we animate. */
}

/* LOGO — fixed centre on landing, glides to sidebar on drawer open */
.logo-container {
    /* Ensure it can move freely */
    position: fixed;
    top: calc(40% - 1.75rem);
    left: 50%;
    /* Combine original -50% -50% with our drag variables (scale and rotate included) */
    transform: translate3d(calc(-50% + var(--drag-x, 0px)), calc(-50% + var(--drag-y, 0px)), 0) scale(var(--drag-scale, 1)) rotate(var(--drag-rotate, 0deg));
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    transform-origin: center center;
}

body.drawer-open .logo-container {
    top: 2rem;
    left: 2rem;
    transform: translate(0, 0) scale(calc(0.6 * var(--drag-scale, 1)));
    transform-origin: top left;
    text-align: left;
}

.tagline-container {
    position: fixed;
    top: calc(40% + 4rem);
    left: 50%;
    transform: translate3d(calc(-50% + var(--drag-x, 0px)), calc(-50% + var(--drag-y, 0px)), 0) scale(var(--drag-scale, 1)) rotate(var(--drag-rotate, 0deg));
    transform-origin: center center;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 70;
}

body.drawer-open .tagline-container {
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none !important;
}

/* Override Center State to not interfere */
#centre-state {
    justify-content: center;
    /* Revert to center */
    padding-top: 100px;
    /* Reduced from 200px to bring nav closer to logo */
}

/* duplicate .pillar-nav removed — position:relative was overriding position:fixed from rule above */

.marketplace-featured {
    background: var(--bg-color);
    border: 1px solid var(--text-color);
    color: var(--text-color);
}

.mini-product {
    border: 1px dashed var(--text-color);
}

/* 19. BUGFIX: LOGO Z-INDEX & OPACITY */
/* Since we moved logo-container to root, we need to ensure */
/* 1. It centers itself by default (already handled by .logo-container fixed positioning in step 18) */
/* 2. It sits ABOVE everything except modals */
.logo-container {
    z-index: 70 !important;
    /* Higher than sidebar (30) and drawers (20) */
    pointer-events: auto !important;
    /* Ensure clickable */
}

/* Ensure sidebar doesn't hide it if z-index conflict exists */
#side-nav {
    z-index: 40;
    /* Lower than logo (70) */
}

.drawer {
    z-index: 30;
    /* Lower than sidebar */
}

/* Modals are 30/300? Check modal z-index */
.modal-overlay {
    z-index: 100 !important;
    /* Topmost */
}

/* Center state adjustment now that logo is gone from flow */
#centre-state {
    padding-top: 0;
    /* Reset padding since logo is absolute/fixed */
    /* Check if we need to push pillars down? */
    /* Since logo is fixed at top: 30%, pillars should be fine if centered or pushed. */
    padding-top: 20vh;
    /* Adjust to clear the logo */
}

/* 20. FINAL TWEAKS (Spacing & Contrast) */
/* Reduce gap between logo and buttons */
#centre-state {
    padding-top: 15vh !important;
    /* Brought closer (was 200px/20vh) */
}

.pillar-nav {
    margin-top: 10rem !important;
    /* Reduced from 15rem */
}

/* Fix Hover Contrast in Light Mode */
body.light-mode .block:hover {
    background: #e0e0e0;
    /* Light grey hover instead of black */
    color: #000;
    border-color: #000;
}

body.light-mode .block.expanded {
    background: #fff;
    border-color: #000;
}

/* Ensure dark mode still works */
body:not(.light-mode) .block:hover {
    background: #111;
    color: #fff;
    border-color: #fff;
}

/* ADDITIONS FOR DRAWER NAVIGATION */

/* Ensure transition handles all transforms */
.drawer {
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    /* Smoother slide */
}

/* Base Active State (Center) */
.drawer.active {
    transform: translateX(0);
    z-index: 25;
    /* Top active drawer */
}

/* Exit to Left (When going to Next) */
.drawer.slide-out-left {
    transform: translateX(-100%);
    z-index: 20;
}

/* Enter from Left (When going to Previous) */
.drawer.entered-from-left {
    /* Initially set via JS before adding active class, or handled via keyframes? 
       Actually, simple state classes are better. 
       If I want to slide IN from left, I need to start at -100% and go to 0. 
       If I want to slide OUT to right, I go to 100%. 
    */
}

/* Nav Controls in Header */
.drawer-nav-controls {
    display: flex;
    gap: 0.5rem;
    margin-right: 1rem;
}

.nav-arrow-btn {
    padding: 5px 10px;
    font-size: 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    background: transparent;
    color: var(--text-color);
    transition: all 0.2s ease;
}

.nav-arrow-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--text-color);
}

/* ============================================
   16. EDIT MODE & TOOLBAR (Phase 2)
   ============================================ */

/* The Grid Pattern Overlay was moved to body::before pseudo */

/* Edit Toggle Button */
.edit-toggle-btn {
    background: transparent;
    border: 1px solid var(--text-color);
    color: var(--text-color);
    transition: all 0.2s;
    cursor: pointer;
    font-weight: bold;
}

.edit-toggle-btn:hover,
body.edit-mode .edit-toggle-btn {
    background: var(--text-color);
    color: var(--bg-color);
}

body.drawer-open .edit-toggle-btn {
    display: none;
}

/* Floating Toolbar */
.edit-toolbar {
    position: fixed;
    top: 5rem;
    right: 2rem;
    width: 280px;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    background: var(--bg-color);
    border: var(--border-style);
    padding: 1.5rem;
    z-index: 100;
    display: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
}

body.edit-mode .edit-toolbar {
    display: block;
}

body.drawer-open.edit-mode .edit-toolbar {
    display: none;
}

/* Font variants on pillar buttons */
.pillar-btn[data-font="orbitron"] {
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 3px;
    font-size: 1.5rem;
}

.pillar-btn[data-font="syne"] {
    font-family: 'Syne', sans-serif;
    letter-spacing: 5px;
    font-size: 2rem;
}

/* Highlight active font button in sidebar too */
body.drawer-open .pillar-btn[data-font="syne"] {
    font-family: 'Syne', sans-serif;
    letter-spacing: 3px;
}

/* SVG/PNG custom type option */
.pillar-svg-img {
    display: none;
    height: 3rem;
    width: 12.5rem;
    flex: 0 0 auto;
    pointer-events: none;
    background-color: currentColor;
    -webkit-mask-image: var(--pillar-mark);
    mask-image: var(--pillar-mark);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.pillar-btn[data-pillar="creates"] .pillar-svg-img {
    --pillar-mark: url("pngs/creates-no-bg.webp");
}

.pillar-btn[data-pillar="curates"] .pillar-svg-img {
    --pillar-mark: url("pngs/curates-no-bg.webp");
}

.pillar-btn[data-pillar="connects"] .pillar-svg-img {
    --pillar-mark: url("pngs/connects-no-bg.webp");
}

.pillar-btn[data-font="custom-svg"] {
    letter-spacing: 0;
}

.pillar-btn[data-font="custom-svg"] .pillar-text {
    display: none;
}

.pillar-btn[data-font="custom-svg"] .pillar-svg-img {
    display: block;
}

/* Scale SVG down in sidebar */
body.drawer-open .pillar-btn[data-font="custom-svg"] .pillar-svg-img {
    height: 1.4rem;
    width: 5.85rem;
}

/* Font option artwork inherits the option's selected/unselected foreground colour. */
.font-option-svg-preview {
    display: block;
    height: 1.2rem;
    width: 70%;
    margin-bottom: 0.15rem;
    background-color: currentColor;
    -webkit-mask-image: var(--pillar-mark, url("pngs/creates-no-bg.webp"));
    mask-image: var(--pillar-mark, url("pngs/creates-no-bg.webp"));
    -webkit-mask-position: left center;
    mask-position: left center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}


/* In edit mode, show a subtle indicator on pillar buttons */
body.edit-mode .pillar-btn {
    outline: 1px dashed rgba(255, 255, 255, 0.3);
    outline-offset: 6px;
    cursor: pointer;
}

.toolbar-btn {
    background: transparent;
    color: var(--text-color);
    transition: all 0.2s;
    cursor: pointer;
    text-align: center;
    font-size: 0.8rem;
    font-family: inherit;
    font-weight: bold;
}

.toolbar-btn:hover,
.toolbar-btn.active {
    background: var(--text-color);
    color: var(--bg-color);
}

/* Specific for light mode toolbar */
body.light-mode .edit-toolbar {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* Phase 3: Drag and Drop Elements */
.is-draggable {
    cursor: grab !important;
    outline: 2px dashed rgba(255, 255, 255, 0.4);
    outline-offset: 5px;
    transition: outline 0.2s !important;
    z-index: 60 !important;
    pointer-events: auto !important;
}

body.light-mode .is-draggable {
    outline-color: rgba(0, 0, 0, 0.4);
}

.is-selected-for-transform {
    outline: 3px solid var(--text-color) !important;
    outline-offset: 10px;
}

.is-draggable:active,
.is-draggable.is-dragging-element {
    cursor: grabbing !important;
    opacity: 0.8;
    transition: none !important;
}

/* Drag offsets for fixed/absolute-position UI elements */
#our-space-btn {
    transform: translate3d(calc(-50% + var(--drag-x, 0px)), var(--drag-y, 0px), 0);
}

#account-icon-el,
#control-cluster-el,
#footer-info-el {
    transform: translate3d(var(--drag-x, 0px), var(--drag-y, 0px), 0);
}

/* Phase 5A: Transform Handles (Stretch Goal) */
.transform-handle-wrapper {
    position: fixed;
    pointer-events: none;
    z-index: 999;
}

.transform-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: white;
    border: 2px solid black;
    border-radius: 50%;
    pointer-events: auto;
    cursor: pointer;
    transform: translate(-50%, -50%);
}

body:not(.light-mode) .transform-handle {
    background: black;
    border-color: white;
}

.corner-handle.tl {
    top: 0;
    left: 0;
    cursor: nwse-resize;
}

.corner-handle.tr {
    top: 0;
    right: 0;
    cursor: nesw-resize;
    transform: translate(50%, -50%);
}

.corner-handle.bl {
    bottom: 0;
    left: 0;
    cursor: nesw-resize;
    transform: translate(-50%, 50%);
}

.corner-handle.br {
    bottom: 0;
    right: 0;
    cursor: nwse-resize;
    transform: translate(50%, 50%);
}

.rotation-handle {
    top: -30px;
    left: 50%;
    cursor: grab;
}

/* Line connecting rotation handle to element */
.rotation-handle::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 20px;
    background: black;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
}

body:not(.light-mode) .rotation-handle::after {
    background: white;
}

/* ═══════════════════════════════════════════
   MEMBER CARD — Brutalist Component System
   ═══════════════════════════════════════════ */

.mc-wrapper {
    width: 100%;
    max-width: 500px;
}

/* ── Physical Member Card ── */
.mc-card {
    width: 100%;
    aspect-ratio: 1.586 / 1;
    background-color: #000;
    background-image: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px);
    background-size: 18px 18px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

/* Large faint "3" watermark */
.mc-card::after {
    content: '3';
    position: absolute;
    right: -0.05em;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-ui);
    font-weight: 900;
    font-size: 16rem;
    color: rgba(255, 255, 255, 0.025);
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

.mc-card-inner {
    position: absolute;
    inset: 0;
    padding: 1.4rem 1.6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 1;
}

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

.mc-card-top {
    align-items: flex-start;
}

.mc-card-bot {
    align-items: flex-end;
}

.mc-card-wordmark {
    font-family: var(--font-logo);
    font-size: 1.7rem;
    font-weight: 900;
    letter-spacing: 4px;
    color: #fff;
    line-height: 1;
}

.mc-card-num {
    color: rgba(255, 255, 255, 0.45);
}

.mc-card-tag {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.55rem;
    letter-spacing: 2.5px;
    color: rgba(255, 255, 255, 0.4);
}

.mc-vtag-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00ff00;
    box-shadow: 0 0 6px rgba(0, 255, 0, 0.6);
    display: inline-block;
    flex-shrink: 0;
}

.mc-card-mid {
    align-items: center;
    gap: 1.5rem;
}

/* QR inside the card */
.mc-card .mc-qr-container {
    width: 76px;
    height: 76px;
    background: #fff;
    padding: 4px;
    margin: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mc-card-units-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
}

.mc-card-balance {
    font-family: var(--font-ui);
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1;
    color: #fff;
    animation: units-pulse 3s ease-in-out infinite;
}

.mc-card-units-label {
    font-size: 0.6rem;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.35);
}

.mc-card-name {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    letter-spacing: 2px;
    color: #fff;
    margin-bottom: 0.2rem;
}

.mc-card-email-small {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.3);
}

.mc-card-id-block {
    text-align: right;
}

.mc-card-id-label {
    font-size: 0.5rem;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.2);
    margin-bottom: 0.15rem;
}

.mc-card-id-val {
    font-family: var(--font-ui);
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.35);
}

@keyframes units-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.65;
    }
}

/* Legacy QR container (outside card context — fallback) */
.mc-qr-container {
    width: 120px;
    height: 120px;
    background: white;
    margin: 0 auto 1rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}

/* Feature Rows */
.mc-features {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.mc-feature-row {
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.mc-feature-row:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.2);
}

.mc-feature-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-size: 0.9rem;
}

.mc-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.7;
}

.mc-icon-units {
    opacity: 1;
    color: #00ff00;
}

.mc-arrow {
    width: 18px;
    height: 18px;
    opacity: 0.3;
    flex-shrink: 0;
    transition: opacity 0.2s, transform 0.2s;
}

.mc-feature-row:hover .mc-arrow {
    opacity: 0.7;
    transform: translateX(3px);
}

.mc-arrow-down {
    transform: none;
}

.mc-feature-row:hover .mc-arrow-down {
    transform: translateY(2px);
}

/* Connections List */
.mc-connections-list {
    display: none;
    padding: 0.8rem 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-top: none;
    font-size: 0.8rem;
    flex-direction: column;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.02);
}

.mc-empty-state {
    opacity: 0.4;
    font-style: italic;
}


/* Reset Layout Row */
.mc-reset-row {
    border-color: rgba(255, 170, 0, 0.15);
    margin-top: 1rem;
}

.mc-reset-row .mc-icon {
    color: #ffaa00;
    opacity: 0.6;
}

.mc-reset-row:hover {
    background: rgba(255, 170, 0, 0.05);
    border-color: rgba(255, 170, 0, 0.3);
}

/* Sign Out */
.mc-signout-btn {
    width: 100%;
    padding: 1rem;
    background: transparent;
    border: 1px solid rgba(255, 68, 68, 0.4);
    color: #ff4444;
    font-weight: bold;
    cursor: pointer;
    font-family: var(--font-ui);
    transition: all 0.2s;
    letter-spacing: 2px;
    font-size: 0.85rem;
}

.mc-signout-btn:hover {
    background: rgba(255, 68, 68, 0.08);
    border-color: #ff4444;
}

.mc-footer {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.65rem;
    opacity: 0.2;
    letter-spacing: 2px;
}

/* ═══════════════════════════════════════════
   CART ICON
   ═══════════════════════════════════════════ */

.cart-icon {
    position: absolute;
    top: 2rem;
    right: 5.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    background: var(--bg-color);
    cursor: pointer;
    z-index: 50;
    transition: background 0.2s, border-color 0.2s;
}

.cart-icon:hover {
    background: var(--text-color);
    border-color: var(--text-color);
}

.cart-icon:hover svg {
    stroke: var(--bg-color);
}

.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: white;
    color: black;
    font-size: 0.6rem;
    font-weight: bold;
    width: 18px;
    height: 18px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* ═══════════════════════════════════════════
   OUR SPACE VIEWER
   ═══════════════════════════════════════════ */

/* Centre header button */
.space-btn {
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    padding: 8px 20px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--text-color);
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 3px;
    cursor: pointer;
    transition: all 0.3s;
}

.space-btn:hover {
    background: var(--text-color);
    color: var(--bg-color);
    border-color: var(--text-color);
}

/* Cart Checkout Button */
.checkout-btn {
    padding: 8px 20px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--text-color);
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 3px;
    cursor: pointer;
    transition: all 0.3s;
}

.checkout-btn:hover:not(:disabled) {
    background: var(--text-color);
    color: var(--bg-color);
    border-color: var(--text-color);
}

.checkout-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Backdrop overlay — dims everything behind the viewer */
.space-viewer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.space-viewer-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

/* Popup Container — drops down from button */
.space-viewer-container {
    position: fixed;
    top: 5rem;
    left: 50%;
    transform: translateX(-50%) scaleY(0);
    transform-origin: top center;
    width: 90%;
    max-width: 800px;
    max-height: 80vh;
    background: var(--bg-color);
    border: 1px solid rgba(255, 255, 255, 0.15);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.25s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    overflow: hidden;
}

.space-viewer-container.active {
    transform: translateX(-50%) scaleY(1);
    opacity: 1;
    pointer-events: auto;
}

/* Header */
.space-viewer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.5);
}

.space-viewer-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    letter-spacing: 3px;
}

.space-viewer-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* 2D / 3D Toggle */
.space-view-toggle {
    display: flex;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.space-toggle-btn {
    padding: 0.35rem 0.8rem;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-family: var(--font-ui);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.2s;
}

.space-toggle-btn.active {
    background: var(--text-color);
    color: var(--bg-color);
}

.space-toggle-btn:not(.active):hover {
    color: rgba(255, 255, 255, 0.7);
}

/* Viewer Body */
.space-viewer-body {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 400px;
    background: #ffffff;
}

/* Panels */
.space-panel {
    position: absolute;
    inset: 0;
    display: none;
}

.space-panel-active {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2D Container */
.space-2d-container {
    width: 100%;
    height: 100%;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
}

.space-2d-container:active {
    cursor: grabbing;
}

#space-2d-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

/* Placeholder states */
.space-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    height: 100%;
    color: rgba(0, 0, 0, 0.4);
    font-family: var(--font-ui);
    font-size: 0.75rem;
    letter-spacing: 3px;
}

.space-placeholder-sub {
    font-family: var(--font-ui);
    font-size: 0.6rem;
    letter-spacing: 1px;
    opacity: 0.5;
}

/* Responsive */
@media (max-width: 600px) {
    .space-viewer-container {
        width: 95%;
        top: 4rem;
        max-height: 85vh;
    }

    .space-viewer-body {
        min-height: 300px;
    }

    .space-btn {
        font-size: 0.6rem;
        padding: 6px 14px;
        letter-spacing: 2px;
    }
}

/* ═══════════════════════════════════════════
   PRODUCT UNITS REDEMPTION ROW
   ═══════════════════════════════════════════ */

.product-units-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.7rem;
    border-top: 1px solid rgba(0, 255, 0, 0.1);
    background: rgba(0, 255, 0, 0.03);
    font-size: 0.7rem;
}

.units-cost {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #00ff00;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.units-icon {
    width: 14px;
    height: 14px;
    color: #00ff00;
}

.units-redeem-btn {
    background: transparent;
    border: 1px solid rgba(0, 255, 0, 0.4);
    color: #00ff00;
    padding: 0.25rem 0.6rem;
    font-size: 0.6rem;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    font-family: var(--font-ui);
    transition: all 0.2s;
}

.units-redeem-btn:hover:not(.disabled) {
    background: rgba(0, 255, 0, 0.1);
    border-color: #00ff00;
}

.units-redeem-btn.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.3);
}

.units-login-hint {
    font-size: 0.6rem;
    opacity: 0.4;
    font-style: italic;
}

/* ═══════════════════════════════════════════
   COMPREHENSIVE MOBILE OVERHAUL
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── HOMEPAGE TOP BAR ── */
    /* Compact Edit Mode button — top center on mobile */
    .edit-toggle-btn {
        font-size: 0.55rem !important;
        padding: 5px 10px !important;
        letter-spacing: 1px !important;
        top: 1.1rem !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        border-radius: 16px !important;
        z-index: 51 !important;
    }

    /* Disable all drag transforms on mobile */
    .is-draggable {
        cursor: default !important;
    }

    /* Our Space button — move to left since Edit Mode is hidden on mobile */
    .space-btn {
        position: absolute !important;
        left: 1rem !important;
        right: auto !important;
        top: 1rem !important;
        transform: none !important;
        font-size: 0.6rem !important;
        padding: 8px 16px !important;
        letter-spacing: 2px !important;
    }

    /* Account icon — smaller, tighter positioning */
    .account-icon {
        width: 34px !important;
        height: 34px !important;
        top: 1rem !important;
        right: 1rem !important;
    }

    /* ── LOGO ── */
    .logo-container {
        margin-bottom: 2rem;
        top: calc(40% - 1.3rem);
        /* Reset any drag transforms that may have been set */
        transform: translate(-50%, -50%) scale(1) rotate(0deg) !important;
    }

    .tagline-container {
        top: calc(40% + 2.75rem);
        transform: translate(-50%, -50%) scale(1) rotate(0deg) !important;
    }

    .logo-main {
        font-size: 2.8rem !important;
    }

    .tagline {
        font-size: 0.7rem !important;
    }

    /* When drawer is open on mobile, hide the logo completely */
    body.drawer-open .logo-container,
    body.drawer-open .tagline-container {
        display: none !important;
    }

    /* ── PILLAR NAV (3 C's) ── */
    .pillar-nav {
        flex-direction: column !important;
        gap: 0.5rem !important;
        width: auto !important;
        margin-top: 4rem !important;
        /* Reset any drag transform */
        transform: translate(-50%, -50%) !important;
    }

    .pillar-btn {
        font-size: 1rem !important;
        padding: 10px 20px !important;
        letter-spacing: 2px !important;
        /* Reset any element-level drag transforms */
        transform: none !important;
    }

    .pillar-btn[data-font="custom-svg"] .pillar-svg-img {
        width: 9.4rem;
        height: 2.25rem;
    }

    /* ── FOOTER INFO (OPEN 9AM + Address) ── */
    .footer-info {
        bottom: 5rem !important;
        left: 1rem !important;
        font-size: 0.65rem !important;
        max-width: 55% !important;
    }

    /* Hide footer when drawer or latest is open */
    body.drawer-open .footer-info {
        display: none !important;
    }

    /* ── CONTROL CLUSTER (LATEST Button) ── */
    .control-cluster {
        bottom: 1.2rem !important;
        right: 1rem !important;
    }

    .latest-feed-btn {
        font-size: 0.9rem !important;
        padding: 8px 16px !important;
    }

    /* ── LATEST FEED POPUP ── */
    .latest-feed-container {
        width: calc(100vw - 2rem) !important;
        right: 1rem !important;
        bottom: 4rem !important;
        max-height: 75vh !important;
        border-radius: 6px !important;
    }

    .latest-feed-container .drawer-header {
        padding: 0.8rem 1rem !important;
    }

    .latest-feed-container .drawer-header h2 {
        font-size: 1rem !important;
    }

    .latest-feed-container .drawer-content {
        padding: 1rem !important;
    }

    /* ── DRAWERS (Creates / Curates / Connects) ── */
    .drawer {
        width: 100vw !important;
        min-width: unset !important;
        height: 100vh !important;
        top: 0 !important;
        right: 0 !important;
        border-left: none !important;
    }

    .drawer.active {
        transform: translateX(0) !important;
    }

    /* Disable drag handle on mobile — not useful on touch */
    .drag-handle {
        display: none !important;
    }

    /* Drawer header — stack vertically, give room to close button */
    .drawer-header {
        padding: 1.2rem 1rem !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.8rem !important;
        position: relative !important;
    }

    .drawer-header h2 {
        font-size: 1.3rem !important;
        padding-right: 2.5rem !important;
    }

    .header-actions {
        position: absolute !important;
        top: 1rem !important;
        right: 1rem !important;
    }

    /* Filter bar inside drawers */
    .filter-bar {
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
    }

    .filter-btn {
        font-size: 0.75rem !important;
        padding: 4px 8px !important;
    }

    .filter-btn:first-child {
        font-size: 0.7rem !important;
    }

    /* Drawer content — prevent horizontal overflow */
    .drawer-content {
        padding: 1rem !important;
        overflow-x: hidden !important;
    }

    /* Content blocks / cards — prevent right-edge clipping */
    .block {
        max-width: 100% !important;
        overflow: hidden !important;
        word-wrap: break-word !important;
    }

    .block-title {
        font-size: 1rem !important;
        word-break: break-word !important;
    }

    /* ── SIDEBAR NAV — hide on mobile when drawer is open ── */
    body.drawer-open .pillar-nav {
        display: none !important;
    }

    /* ── MARKETPLACE FEATURED ── */
    .marketplace-featured {
        flex-direction: column !important;
    }

    .mini-product {
        width: 100% !important;
        min-width: unset !important;
    }

    /* ── SHOP MODAL ── */
    .shop-modal-header {
        flex-direction: column !important;
        gap: 0.5rem !important;
        padding: 1rem !important;
    }

    .shop-filter-pills {
        flex-wrap: wrap !important;
    }

    .modal-content {
        width: 98% !important;
        height: 95vh !important;
    }

    /* ── CALENDAR MODAL ── */
    .calendar-modal-content {
        width: 98% !important;
    }

    .calendar-view {
        padding: 1rem !important;
    }

    /* ── OUR SPACE VIEWER ── */
    .space-viewer-container {
        width: 96% !important;
        top: 3.5rem !important;
        max-height: 80vh !important;
    }

    /* ── EDIT TOOLBAR — resizable bottom sheet on mobile ── */
    .edit-toolbar {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: 90vw !important;
        max-height: 40vh !important;
        min-height: 80px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        border: none !important;
        border-top: none !important;
        border-radius: 14px 14px 0 0 !important;
        padding: 0.6rem 1rem 2rem !important;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.95) !important;
        z-index: 200 !important;
        background: rgba(12, 12, 12, 0.97) !important;
        backdrop-filter: blur(16px) !important;
        /* Smooth when JS sets height */
        transition: height 0.0s !important;
    }

    /* Drag-resize handle bar at the very top of the sheet */
    .edit-toolbar::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 2px;
        margin: 0 auto 0.8rem auto;
        cursor: ns-resize;
        flex-shrink: 0;
    }

    /* Tighter section spacing so content scrolls cleanly */
    .edit-toolbar .toolbar-section {
        margin-bottom: 1.2rem !important;
    }

    .edit-toolbar h3,
    .edit-toolbar .toolbar-header {
        margin-bottom: 0.5rem !important;
        padding-bottom: 0.2rem !important;
        font-size: 0.8rem !important;
    }

    /* Hide MOVE ELEMENTS section on mobile — drag doesn't work on touch */
    .edit-toolbar #move-elements-btn,
    .edit-toolbar #element-sliders,
    .edit-toolbar .toolbar-section:first-of-type>label:first-child {
        display: none !important;
    }

    /* Horizontal scrolling font picker */
    #font-picker-inline {
        flex-direction: row !important;
        overflow-x: auto !important;
        padding-bottom: 5px !important;
        gap: 8px !important;
    }

    .font-option {
        flex: 0 0 auto !important;
        min-width: 90px !important;
        text-align: center !important;
    }

    /* Global FX buttons — 2-column grid */
    .edit-toolbar .toolbar-section:last-of-type {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    .edit-toolbar .toolbar-section:last-of-type>label {
        grid-column: 1 / -1 !important;
    }

    .edit-toolbar .toolbar-section:last-of-type button {
        margin-bottom: 0 !important;
        font-size: 0.65rem !important;
        padding: 8px 4px !important;
    }

    /* ── ACCOUNT DRAWER ── */
    .mc-card {
        padding: 1rem !important;
    }

    .mc-card-top {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    /* ── CONNECTS SECTION ── */
    .connects-hero {
        padding: 1.5rem !important;
    }

    .connects-hero h2 {
        font-size: 1.8rem !important;
    }

    /* Product units row */
    .product-units-row {
        flex-direction: column !important;
        gap: 0.3rem !important;
        align-items: flex-start !important;
    }
}

/* Extra small screens (iPhone SE etc) */
@media (max-width: 380px) {
    .logo-main {
        font-size: 2.2rem !important;
    }

    .pillar-btn {
        font-size: 0.85rem !important;
        padding: 8px 14px !important;
    }

    .footer-info {
        font-size: 0.55rem !important;
        bottom: 4.5rem !important;
    }

    .latest-feed-btn {
        font-size: 0.8rem !important;
        padding: 6px 12px !important;
    }

    .latest-feed-container {
        bottom: 3.5rem !important;
    }
}

/* ============================================
   CUSTOM CURSOR STYLES
   ============================================ */
/* Hide native cursor when custom is active, but use a blank GIF 
   so iOS/WebKit doesn't disable click events on non-button elements */
body.cursor-custom,
body.cursor-custom * {
    cursor: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7), auto !important;
}

#custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none !important;
    z-index: 999999;
    transform: translate(-50%, -50%);
    display: none;
    /* transition applies to width/height to smoothly resize outer box */
    transition: width 0.15s, height 0.15s;
}

#custom-cursor-inner {
    width: 100%;
    height: 100%;
    pointer-events: none !important;
    opacity: 0;
    transition: opacity 0.2s;
    /* Removed translateZ(0) / will-change because it breaks mix-blend-mode in newer Safari/Chrome */
}

/* Invert circle cursor */
body.cursor-invert-circle #custom-cursor {
    display: block;
    mix-blend-mode: difference;
    pointer-events: none !important;
}

body.cursor-invert-circle #custom-cursor-inner {
    background: white;
    border-radius: 50%;
}

/* Pixel pointer cursor — tip at top-left, inverts against bg */
body.cursor-pixel #custom-cursor {
    display: block;
    mix-blend-mode: difference;
    transform: translate(0, 0);
    pointer-events: none !important;
    /* Base at top-left */
}

body.cursor-pixel #custom-cursor-inner {
    background: transparent;
    border-radius: 0;
    width: 0;
    height: 0;
    border-left: calc(var(--cursor-size, 24px) / 2) solid transparent;
    border-right: calc(var(--cursor-size, 24px) / 2) solid transparent;
    border-bottom: calc(var(--cursor-size, 24px)) solid white;
    transform: rotate(-45deg);
    transform-origin: top left;
}

/* Crosshair reticle cursor */
body.cursor-crosshair #custom-cursor {
    display: block;
    mix-blend-mode: difference;
    pointer-events: none !important;
}

body.cursor-crosshair #custom-cursor-inner {
    background: transparent;
    border-radius: 0;
    position: relative;
    width: 100%;
    height: 100%;
}

body.cursor-crosshair #custom-cursor-inner::before,
body.cursor-crosshair #custom-cursor-inner::after {
    content: '';
    position: absolute;
    background: white;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

body.cursor-crosshair #custom-cursor-inner::before {
    width: 100%;
    height: 2px;
}

body.cursor-crosshair #custom-cursor-inner::after {
    width: 2px;
    height: 100%;
}

/* Ring cursor — hollow circle */
body.cursor-ring #custom-cursor {
    display: block;
    mix-blend-mode: difference;
    pointer-events: none !important;
}

body.cursor-ring #custom-cursor-inner {
    background: transparent;
    /* border is set dynamically in JS */
    border-radius: 50%;
}

/* Active state for cursor style buttons */
.cursor-style-btn.active {
    background: var(--text-color) !important;
    color: var(--bg-color) !important;
}

/* CAFE panel: desktop resizing and an accessible expand/restore control. */
#drawer-latest {
    resize: none;
    min-width: 320px;
    min-height: 260px;
    max-width: calc(100vw - 4rem);
    max-height: calc(100vh - 7rem);
    transition-property: transform, opacity;
}
#drawer-latest .drawer-header {
    flex-shrink: 0;
    display: block;
    width: 100%;
    box-sizing: border-box;
}
#drawer-latest .drawer-header > div:first-child {
    padding-right: 44px;
    min-height: 32px;
    box-sizing: border-box;
}
#drawer-latest .drawer-header .close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    margin: 0;
    display: grid;
    place-items: center;
}
#filter-latest {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem !important;
    margin-top: 1.5rem;
    margin-bottom: 0.25rem;
    width: 100%;
}
#filter-latest .filter-btn {
    grid-column: span 2;
    min-width: 0;
    min-height: 44px;
    padding: 12px 6px !important;
    font-size: 0.75rem !important;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-align: center;
    white-space: normal;
    border: 1px solid var(--text-color);
    opacity: 0.75;
}
#filter-latest .filter-btn:nth-child(n) { grid-column: span 3; }
.cafe-about {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.75;
    text-align: left;
    overflow-wrap: break-word;
}
.cafe-about p { margin: 0 0 1.4rem; }
.cafe-about p:last-child { margin-bottom: 0; font-weight: 600; }
.cafe-about-intro { font-size: 1.15rem; font-weight: 600; }
#filter-latest .filter-btn.active,
#filter-latest .filter-btn:hover,
#filter-latest .filter-btn:focus-visible { opacity: 1; }
#cafe-resize-dot {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    border: 0;
    background: transparent;
    z-index: 10;
    cursor: nwse-resize;
    touch-action: none;
    padding: 8px;
}
#cafe-resize-dot::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-color);
}
#drawer-latest .drawer-content { min-height: 0; }
#drawer-latest.cafe-expanded {
    width: calc(100vw - 4rem) !important;
    height: calc(100vh - 7rem) !important;
    max-height: calc(100vh - 7rem) !important;
    resize: none;
}
.creates-preview {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
#drawer-creates .creates-preview #content-creates {
    height: 100%;
    box-sizing: border-box;
    filter: blur(4px);
    opacity: 0.45;
    pointer-events: none;
    user-select: none;
}
#filter-creates { opacity: 0.6; }
.creates-coming-soon {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    text-align: center;
    font-family: var(--font-logo);
    font-size: clamp(1.5rem, 4vw, 3rem);
    font-weight: 900;
    letter-spacing: 0.08em;
    color: var(--text-color);
    cursor: default;
}
@media (max-width: 768px) {
    #drawer-latest {
        resize: none;
        min-width: 0;
        max-width: calc(100vw - 2rem);
        min-height: 220px;
    }
    #drawer-latest.cafe-expanded {
        width: calc(100vw - 2rem) !important;
        height: calc(100dvh - 5rem) !important;
        max-height: calc(100dvh - 5rem) !important;
    }
}