:root {
    --bg-dark: #000000;
    --text-main: #f4f4f4;
    --text-muted: #666666;
    --accent-blue: #0044ff;
    --accent-neon: #ff0055;
    --accent-cyan: #00ffff;
    --grid-line: rgba(255, 255, 255, 0.15);
    
    --font-ui: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    --transition-fast: 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
    --transition-kinetic: 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    --transition-panel: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

/* Let Curate and Results scroll. Body handles normal document flow naturally. */
body {
    background-color: var(--bg-dark); color: var(--text-main); font-family: var(--font-body);
    overflow-x: hidden; min-height: 100vh; cursor: none;
}
/* ONLY playground disables scroll to prevent accidental bleeding on mousewheel drag */
body.pg-active { overflow: hidden; height: 100vh; }

#noise-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none;
    z-index: 9998; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

#cursor-follower {
    position: fixed; width: 20px; height: 20px; background: var(--text-main); border-radius: 50%;
    pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); mix-blend-mode: difference;
    transition: width 0.2s, height 0.2s, border-radius 0.2s;
}
body:active #cursor-follower { width: 30px; height: 30px; }
.magnetic:hover ~ #cursor-follower { width: 60px; height: 60px; background: transparent; border: 1px solid var(--text-main); }

/* Global Nav */
.global-nav {
    position: fixed; top: 0; left: 0; width: 100%; padding: 1.5rem 2rem; display: flex;
    justify-content: space-between; align-items: center; border-bottom: 1px solid var(--grid-line);
    z-index: 100; background: var(--bg-dark); font-family: var(--font-ui); text-transform: uppercase;
}
.logo { font-weight: 700; letter-spacing: 2px; cursor: pointer; }
.blink { animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
.nav-links { display: flex; gap: 2rem; }
.nav-btn {
    background: none; border: none; color: var(--text-muted); font-family: inherit;
    font-size: 0.9rem; font-weight: 600; cursor: none; transition: color var(--transition-fast);
}
.nav-btn.active, .nav-btn:hover { color: var(--text-main); }
.nav-back {
    background: none; border: none; color: var(--text-muted); font-family: var(--font-ui);
    font-size: 0.8rem; font-weight: 700; cursor: none; text-transform: uppercase; display: flex;
    align-items: center; padding: 0.5rem 0; margin-right: 1.5rem; transition: color 0.2s;
}
.nav-back:hover { color: var(--text-main); }
.pg-header-action { padding: 1.5rem; border-bottom: 1px solid var(--grid-line); }

/* Screens */
.screen {
    position: absolute; top: 0; left: 0; width: 100%;
    /* Let the screen grow beyond 100vh natively if needed */
    min-height: 100vh; padding-top: 80px; transition: opacity 0.6s ease, transform 0.6s ease;
    display: flex; flex-direction: column; 
    /* Remove `overflow:hidden` so standard page scrolling works across Curate/Results */
}
.screen.hidden { opacity: 0; pointer-events: none; transform: translateY(20px); position: fixed; }
.screen.active { opacity: 1; pointer-events: auto; transform: translateY(0); position: absolute;}

/* SCREEN 1 */
.hero-content {
    flex-grow: 1; display: flex; flex-direction: column; padding: 2rem 2rem 5rem 2rem;
    position: relative; max-width: 1400px; margin: 0 auto; width: 100%;
}
.massive-title {
    font-family: var(--font-ui); font-size: clamp(3rem, 8vw, 8rem); font-weight: 800; line-height: 0.85;
    letter-spacing: -0.05em; margin-bottom: 1rem; text-transform: uppercase; z-index: 2; pointer-events: none;
}
.selection-limit-text {
    font-family: var(--font-ui); font-size: 0.85rem; color: var(--text-muted); font-weight: 600;
    text-transform: uppercase; letter-spacing: 2px; margin-bottom: 2rem; z-index: 2;
}
.outline-text { -webkit-text-stroke: 1px var(--text-main); color: transparent; }

.vibe-canvas { position: relative; flex-grow: 1; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 1rem; padding: 1rem; }
.vibe-node {
    font-family: var(--font-ui); font-size: clamp(1.2rem, 2.5vw, 2.5rem); font-weight: 400; color: var(--text-muted); cursor: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); white-space: nowrap; text-transform: lowercase; padding: 0.4rem 1.2rem;
    border-radius: 100px; border: 1px solid transparent; height: max-content; display: inline-flex; align-items: center; justify-content: center;
}
.vibe-node:hover { color: var(--text-main); font-weight: 600; }
.vibe-node.selected { color: var(--text-main); border: 1px solid rgba(255, 255, 255, 0.3); font-weight: 500; }

/* Refined Subtle Personalities */
.vibe-node.sel-modern {
    background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); 
    border-radius: 100px; transform: scale(1.05); font-weight: 500;
}
.vibe-node.sel-editorial {
    background: transparent; border: none; border-bottom: 2px solid var(--text-main);
    border-radius: 0; transform: scale(1.05); letter-spacing: 1px; font-weight: 400; font-style: italic;
}
.vibe-node.sel-futuristic {
    border-radius: 0; border: 1px solid var(--accent-cyan); color: var(--accent-cyan);
    background: transparent; box-shadow: 0 0 6px rgba(0, 255, 255, 0.15); transform: scale(1.05); font-weight: 600;
}
.vibe-node.sel-tech {
    border-radius: 4px; border: 1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.08);
    transform: scale(1.05); font-weight: 600; font-family: monospace;
}
@keyframes wobble { 0%, 100% { transform: scale(1.1) rotate(-1deg); } 50% { transform: scale(1.1) rotate(1deg); } }
.vibe-node.sel-playful {
    background: var(--text-main); color: var(--bg-dark); border-radius: 100px; font-weight: 700; animation: wobble 1.5s infinite ease-in-out;
}
.vibe-node.sel-luxury {
    border: 1px solid #c9b178; background: transparent; color: #f9f5e8; border-radius: 2px;
    font-weight: 300; letter-spacing: 2px;
}
.vibe-node.sel-brutalist {
    background: var(--text-main); color: var(--bg-dark); border-radius: 0; border: none;
    font-weight: 900; transition: none; transform: scale(1.08);
}
.vibe-node.sel-bold {
    background: rgba(255,255,255,0.15); color: var(--text-main); border: 1px solid rgba(255,255,255,0.6);
    border-radius: 10px; font-weight: 800; transform: scale(1.08); padding: 0.5rem 1.6rem;
}
.vibe-node.sel-minimal {
    border: none; background: transparent; color: rgba(255,255,255, 0.85); transform: none; padding: 0.2rem;
    border-bottom: 1px solid rgba(255,255,255,0.2); border-radius: 0; font-weight: 300;
}
@keyframes kineticShift { 0% { transform: skewX(-5deg); } 50% { transform: skewX(5deg); } 100% { transform: skewX(-5deg); } }
.vibe-node.sel-kinetic { border-radius: 0; border-bottom: 2px solid var(--accent-blue); animation: kineticShift 0.4s infinite linear; font-style: italic; font-weight: 700; }
@keyframes chaosShift { 0% { transform: rotate(3deg) scale(1.05); } 50% { transform: rotate(-3deg) scale(0.95); } 100% { transform: rotate(3deg) scale(1.05); } }
.vibe-node.sel-chaos { animation: chaosShift 0.25s infinite; color: var(--accent-neon); font-weight: 900; }

/* Rejection shake animation */
@keyframes shakeReject {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); color: var(--accent-neon); }
    40%, 80% { transform: translateX(5px); color: var(--accent-neon); }
}
.vibe-node.shake-reject {
    animation: shakeReject 0.35s ease-in-out;
}

.cta-actions { position: fixed; bottom: 2rem; right: 2rem; z-index: 10; }
.brutal-btn {
    background: var(--text-main); color: var(--bg-dark); font-family: var(--font-ui);
    font-weight: 800; font-size: 1rem; padding: 1.2rem 2.5rem; border: none; cursor: none;
    text-transform: uppercase; letter-spacing: 1px; transition: all var(--transition-kinetic); position: relative; overflow: hidden;
}
.brutal-btn.primary { border-radius: 0; box-shadow: 4px 4px 0 var(--accent-blue); }
.brutal-btn.primary:not(:disabled):hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--accent-neon); }
.brutal-btn:disabled { opacity: 0.3; filter: grayscale(1); box-shadow: none; }
.brutal-btn.secondary { background: transparent; color: var(--text-main); border: 1px solid var(--grid-line); }
.brutal-btn.secondary:hover { background: var(--text-main); color: var(--bg-dark); }

#transition-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; display: flex; align-items: center; justify-content: center; }
#scatter-container { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.scatter-word {
    color: var(--text-main); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; text-transform: uppercase;
    transform-origin: center; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s; will-change: transform, opacity;
}

/* SCREEN 2 */
.results-header {
    display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 2rem; border-bottom: 1px solid var(--grid-line); flex-shrink: 0;
}
.header-left { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.label { font-family: var(--font-ui); font-size: 0.75rem; color: var(--text-muted); letter-spacing: 2px; text-transform: uppercase; }
.active-vibes { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.tag { background: var(--text-main); color: var(--bg-dark); padding: 0.2rem 0.6rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; font-family: var(--font-ui); }

/* Results Container fix: allowing native document stretch */
.results-container {
    padding: 3rem 2rem 8rem 2rem; display: flex; flex-direction: column; gap: 3rem; max-width: 1400px; margin: 0 auto; width: 100%; height: auto;
}

/* Previews stretching properly */
.preview-card {
    border: 1px solid var(--grid-line); position: relative; transition: border-color var(--transition-fast); display: flex; flex-direction: row; 
    width: 100%; background: var(--bg-dark); height: auto; align-items: stretch;
}
.preview-card:hover { border-color: rgba(255,255,255,0.4); }
.card-main-content {
    min-width: 100%; width: 100%; transition: min-width var(--transition-panel), width var(--transition-panel); display: flex; flex-direction: column; flex-grow: 1;
}

.font-meta {
    display: flex; justify-content: space-between; padding: 0.8rem 1.5rem; border-bottom: 1px solid var(--grid-line); background: rgba(255,255,255,0.02);
    font-family: var(--font-ui); text-transform: uppercase; font-size: 0.8rem; flex-shrink: 0;
}
.font-meta .col { display: flex; gap: 2rem; align-items: center; }
.font-link { color: var(--text-main); text-decoration: none; display: flex; align-items: center; gap: 0.3rem; transition: color 0.2s; cursor: none; font-weight: 600; }
.font-link:hover { color: var(--accent-cyan); }

/* Ensure preview area expands */
.preview-canvas { padding: 3rem 2rem; flex-grow: 1; align-items: center; }

.card-footer-actions { border-top: 1px solid var(--grid-line); padding: 0.8rem 1.5rem; display: flex; justify-content: flex-end; align-items: center; margin-top: auto; flex-shrink: 0; }
.btn-understand {
    background: transparent; color: var(--text-main); border: 1px solid var(--grid-line); padding: 0.5rem 1rem; font-family: var(--font-ui); font-size: 0.8rem; text-transform: uppercase;
    cursor: none; transition: background 0.2s, color 0.2s; display: flex; align-items: center; gap: 0.5rem; margin: 0;
}
.btn-understand:hover { background: var(--text-main); color: var(--bg-dark); }

/* Learning Panel */
.explanation-panel {
    width: 0; min-width: 0; opacity: 0; background: #0a0a0c; border-left: 0px solid transparent; 
    overflow: hidden; transition: width var(--transition-panel), min-width var(--transition-panel), opacity var(--transition-panel), padding var(--transition-panel);
    padding: 0; display: flex; flex-direction: column; white-space: nowrap; align-self: stretch; /* Match height */
}

.preview-card.expanded .card-main-content { min-width: 65%; width: 65%; }
.preview-card.expanded .explanation-panel {
    width: 35%; min-width: 300px; opacity: 1; padding: 2rem; border-left: 1px solid var(--grid-line); white-space: normal;
}
.panel-title { font-family: var(--font-ui); font-size: 1.1rem; margin-bottom: 2rem; text-transform: uppercase; padding-bottom: 1rem; border-bottom: 1px solid var(--grid-line); }
.panel-section { margin-bottom: 1.5rem; }
.panel-label { font-family: var(--font-ui); font-size: 0.75rem; color: var(--text-muted); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 0.3rem; }
.panel-text { font-size: 0.9rem; line-height: 1.5; color: #e0e0e0; }

/* Layout Modes Fixed */
.layout-hero .preview-canvas { text-align: center; }
.layout-hero .pg-heading { font-size: clamp(2rem, 6vw, 6rem); line-height: 1.1; margin-bottom: 1.5rem; word-wrap: break-word; color: #fff; }
.layout-hero .pg-body { font-size: 1.15rem; line-height: 1.6; max-width: 550px; margin: 0 auto; color: #bbb; }
.layout-editorial .preview-canvas { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.layout-editorial .pg-heading { font-size: clamp(2rem, 4.5vw, 4.5rem); line-height: 1.1; color: #fff; }
.layout-editorial .pg-body { font-size: 1rem; line-height: 1.7; color: #bbb; }
@media(max-width: 800px) { .layout-editorial .preview-canvas { grid-template-columns: 1fr; gap: 2rem; } }
.layout-poster .preview-canvas { padding: 0; position: relative; display: flex; flex-direction: column; justify-content: center; background: #080808; min-height: 350px; overflow: hidden; /* only hide inside canvas */ }
.layout-poster .pg-heading { font-size: clamp(3rem, 10vw, 10rem); line-height: 0.9; color: var(--text-main); opacity: 0.15; padding-left: 1rem; white-space: nowrap; font-weight: 800; align-self: flex-start; }
.layout-poster .pg-body { position: relative; width: 100%; max-width: 400px; align-self: flex-end; margin: -4rem 2rem 2rem 0; font-size: 1rem; line-height: 1.6; background: var(--text-main); color: var(--bg-dark); padding: 1.5rem; }


/* SCREEN 3 Playground fixing text clipping */
.playground-layout { display: flex; flex-direction: row; height: 100vh; padding-top: 67px; overflow: hidden; }
.pg-preview-pane { flex: 2; border-right: 1px solid var(--grid-line); position: relative; display: flex; flex-direction: column; }
.pg-controls { flex: 1; display: flex; flex-direction: row; min-width: 450px; position: relative;}
.pg-column { flex: 1; border-right: 1px solid var(--grid-line); display: flex; flex-direction: column; background: rgba(255,255,255,0.02); position: relative; }
.pg-column:last-child { border-right: none; }
.col-header { padding: 1rem; text-align: center; font-family: var(--font-ui); font-size: 0.75rem; font-weight: 700; letter-spacing: 2px; border-bottom: 1px solid var(--grid-line); background: var(--bg-dark); z-index: 5; flex-shrink: 0; }
.scroll-instruction { font-size: 0.6rem; color: var(--accent-cyan); font-weight: 400; margin-top: 0.5rem; text-transform: uppercase; }
.scroll-wheel { flex-grow: 1; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; scrollbar-width: none; scroll-behavior: smooth; position: relative; z-index: 1; }
.scroll-wheel::-webkit-scrollbar { display: none; }
.reticle-overlay { position: absolute; top: calc(50% + 30px); left: 0; width: 100%; height: 100px; transform: translateY(-50%); border-top: 1px solid rgba(255,255,255,0.3); border-bottom: 1px solid rgba(255,255,255,0.3); pointer-events: none; z-index: 0; background: rgba(0, 255, 255, 0.03); box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5); }

/* Anti-clipping fixes for item height and line-heights */
.font-option {
    height: 100px; display: flex; align-items: center; justify-content: center; overflow: visible;
    scroll-snap-align: center; cursor: none; transition: opacity 0.2s, transform 0.2s, color 0.2s;
    opacity: 0.2; font-size: 1.5rem; line-height: 1.5; /* Line height fix */ text-align: center; padding: 0 1rem; user-select: none; will-change: transform, opacity; 
}
.font-option.spacer { pointer-events: none; }
.font-option.active { opacity: 1; transform: scale(1.15); /* Lower scale to prevent clip */ color: var(--text-main); font-weight: 600; text-shadow: 0 0 10px rgba(255,255,255,0.2); }
.font-option:hover:not(.active) { opacity: 0.6; color: var(--text-main); }

.pg-preview-content { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; padding: 4rem; overflow-y: auto; }
.pg-preview-content::-webkit-scrollbar { display: none;}
#pg-heading-preview { font-size: clamp(3rem, 6vw, 7rem); line-height: 1.1; margin-bottom: 1.5rem; transition: font-family 0.1s; }
#pg-body-preview { font-size: 1.25rem; line-height: 1.6; max-width: 650px; color: var(--text-muted); transition: font-family 0.1s; }
.pg-preview-footer { padding: 1.5rem; border-top: 1px solid var(--grid-line); font-family: var(--font-ui); display: flex; gap: 2rem; flex-shrink: 0; }
.pg-preview-footer .spacing { margin: 0 1rem; color: var(--grid-line); }