:root {
    --orange: #F05A28;
    --teal: #00D1B2;
    --ink: #111827;
    --yellow: #FFD400;
    --pink: #FF4D8D;
    --violet: #5B5BF7;
    --cream: #FFF4C7;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--ink);
    color: var(--ink);
    font-family: 'Atkinson Hyperlegible', 'Lato', sans-serif;
    overflow-x: hidden;
    cursor: crosshair;
}

body.glitching .simulation { filter: hue-rotate(30deg) contrast(1.2); transform: skewX(-1deg); }

.noise,
.scanline {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 50;
    opacity: .18;
    background-image: linear-gradient(transparent 50%, rgba(17,24,39,.35) 50%), radial-gradient(circle at 20% 30%, var(--pink) 0 1px, transparent 1px), radial-gradient(circle at 80% 70%, var(--teal) 0 1px, transparent 1px);
    background-size: 100% 5px, 37px 37px, 43px 43px;
    mix-blend-mode: multiply;
}

.scanline { position: absolute; opacity: .28; mix-blend-mode: normal; }

.cursor-dunce {
    position: fixed;
    z-index: 100;
    width: 30px;
    height: 30px;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background: var(--yellow);
    color: var(--ink);
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    display: grid;
    place-items: end center;
    transform: translate(-200px, -200px) rotate(12deg);
    pointer-events: none;
}

.scene {
    min-height: 100vh;
    position: relative;
    padding: 8vh 6vw;
    display: grid;
    align-items: center;
    overflow: hidden;
    border-bottom: 8px dashed var(--ink);
}

.boot-scene { background: var(--cream); grid-template-columns: 1.2fr .72fr; gap: 3vw; }
.permanence-scene { background: var(--teal); grid-template-columns: 1fr .8fr; gap: 4vw; }
.maze-scene { background: var(--yellow); grid-template-rows: auto auto 1fr; }
.memory-scene { background: var(--violet); color: var(--cream); }
.emotion-scene { background: var(--pink); place-items: center; }
.certificate-scene { background: var(--cream); place-items: center; }

.boot-grid {
    position: absolute;
    inset: -20%;
    background-image: linear-gradient(rgba(91,91,247,.22) 2px, transparent 2px), linear-gradient(90deg, rgba(91,91,247,.22) 2px, transparent 2px);
    background-size: 44px 44px;
    transform: rotate(-3deg);
}

.emulator-window {
    position: relative;
    border: 5px solid var(--ink);
    background: var(--cream);
    box-shadow: 14px 14px 0 var(--ink);
}

.window-bar {
    height: 36px;
    border-bottom: 5px solid var(--ink);
    background: var(--violet);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    color: white;
    font-family: 'IBM Plex Mono', monospace;
    text-transform: uppercase;
}

.window-bar span { width: 14px; height: 14px; display: inline-block; border: 3px solid var(--ink); border-radius: 50%; background: var(--yellow); }
.window-bar span:nth-child(2) { background: var(--pink); }
.window-bar span:nth-child(3) { background: var(--teal); }
.window-bar.mini { background: var(--orange); }

.hero-window { padding: 0 34px 38px; transform: rotate(-1.5deg); }
.system-tag, .chapter-label { font-family: 'IBM Plex Mono', monospace; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.system-tag { color: var(--orange); margin-top: 28px; }

.wordmark {
    font-family: 'Bungee', 'Space Grotesk', sans-serif;
    font-size: clamp(4rem, 12vw, 11rem);
    line-height: .83;
    margin: 10px 0 22px;
    color: var(--yellow);
    text-shadow: 7px 0 var(--pink), -7px 0 var(--teal), 0 10px var(--ink);
    animation: glitchNudge 2.4s steps(2) infinite;
}

.wordmark::after { content: attr(data-glitch); position: absolute; left: 42px; top: 78px; color: transparent; -webkit-text-stroke: 2px var(--ink); opacity: .25; }
.hero-copy { font-size: clamp(1.25rem, 2.2vw, 2rem); max-width: 760px; }
.boot-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; }

.panic-button,
.answer-card,
.maze-node,
.memory-bubble,
.mood-button {
    border: 4px solid var(--ink);
    background: var(--yellow);
    color: var(--ink);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    box-shadow: 7px 7px 0 var(--ink);
    padding: 16px 22px;
    text-transform: uppercase;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.panic-button:hover,
.answer-card:hover,
.maze-node:hover,
.memory-bubble:hover,
.mood-button:hover { transform: translate(5px, 5px) rotate(-1deg); box-shadow: 2px 2px 0 var(--ink); background: var(--teal); }

.rubber-stamp,
.stamp-cloud span,
.final-stamp {
    font-family: 'Bungee', sans-serif;
    border: 6px double var(--orange);
    color: var(--orange);
    padding: 8px 16px;
    transform: rotate(7deg);
    display: inline-block;
    background: rgba(255,244,199,.7);
}

.diagnostic-panel { align-self: end; transform: rotate(2.5deg); }
.diagnostic-panel ul, .boot-logs { margin: 0; padding: 22px; list-style: none; font-family: 'IBM Plex Mono', monospace; font-size: 1.05rem; }
.diagnostic-panel li { padding: 8px 0; border-bottom: 2px dotted var(--ink); }
.diagnostic-panel strong { color: var(--pink); }

.spinner-head {
    position: absolute;
    right: 7vw;
    top: 12vh;
    width: 120px;
    height: 120px;
    border: 14px solid var(--teal);
    border-top-color: var(--orange);
    border-radius: 50%;
    background: var(--yellow);
    animation: dopeySpin 4s linear infinite;
    display: grid;
    place-items: center;
    box-shadow: 9px 9px 0 var(--ink);
}
.face { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 1.7rem; animation: counterSpin 4s linear infinite; }

.chapter-label { position: relative; z-index: 1; background: var(--ink); color: var(--cream); width: max-content; padding: 10px 14px; box-shadow: 7px 7px 0 var(--orange); }
.test-card { padding: 0 28px 34px; transform: rotate(2deg); }
h2, .giant-title { font-family: 'Bungee', sans-serif; line-height: 1; }
h2 { font-size: clamp(2.4rem, 6vw, 5.5rem); margin: 28px 0 18px; }
.test-card p, .memory-header p, .certificate p { font-size: 1.3rem; }

.duck-stage { height: 260px; position: relative; border: 4px dashed var(--ink); background: repeating-linear-gradient(45deg, var(--yellow) 0 18px, var(--cream) 18px 36px); overflow: hidden; }
.server-cable { position: absolute; width: 70%; height: 26px; left: 12%; top: 55%; background: var(--ink); border-radius: 20px; }
.duck { position: absolute; left: 18%; top: 38%; width: 130px; height: 92px; border: 5px solid var(--ink); border-radius: 52% 48% 44% 44%; background: var(--yellow); display: grid; place-items: center; font-family: 'Bungee'; transition: transform .5s ease; }
.duck::after { content: ''; position: absolute; right: -34px; top: 26px; border-left: 36px solid var(--orange); border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
.box-lid { position: absolute; right: 10%; top: 22%; width: 210px; height: 150px; background: var(--pink); border: 5px solid var(--ink); display: grid; place-items: center; font-family: 'IBM Plex Mono'; font-weight: 700; transform-origin: top left; transition: transform .5s cubic-bezier(.2,1.6,.4,1); }
.box-lid.closed { transform: rotate(-14deg) translateX(-180px); }
.duck.confused { transform: translateX(130px) rotate(360deg); }

.answer-stack { display: grid; gap: 18px; transform: rotate(-2deg); }
.answer-card:nth-child(2) { background: var(--pink); }
.answer-card:nth-child(3) { background: var(--cream); }
.answer-card:nth-child(4) { background: var(--violet); color: white; }
.stamp-cloud { position: absolute; left: 5vw; bottom: 7vh; display: flex; gap: 20px; opacity: .75; }
.stamp-cloud span:nth-child(2) { transform: rotate(-12deg); color: var(--violet); border-color: var(--violet); }
.stamp-cloud span:nth-child(3) { transform: rotate(5deg); color: var(--ink); border-color: var(--ink); }

.giant-title { font-size: clamp(3rem, 9vw, 9rem); max-width: 1100px; color: var(--pink); text-shadow: 7px 7px 0 var(--ink); margin: 4vh 0; }
.maze-board { padding-bottom: 34px; transform: rotate(-1deg); }
.maze-lines { min-height: 360px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; gap: 18px; padding: 40px; background-image: linear-gradient(90deg, transparent 0 48%, var(--ink) 48% 52%, transparent 52%); }
.maze-node { min-height: 96px; background: var(--cream); }
.maze-node.active { background: var(--teal); animation: badIdea .6s ease; }
.self-arrow { position: absolute; right: 8%; bottom: 5%; font-size: 8rem; color: var(--orange); transform: rotate(20deg); }
.self-arrow small { display: block; font-size: 1rem; font-family: 'IBM Plex Mono'; color: var(--ink); }
.maze-caption { font-family: 'IBM Plex Mono'; font-size: 1.2rem; background: var(--ink); color: var(--cream); padding: 14px; width: max-content; }

.memory-header { max-width: 920px; }
.bubble-field { position: relative; min-height: 430px; }
.memory-bubble { position: absolute; width: 210px; height: 210px; border-radius: 50%; background: var(--cream); text-transform: none; animation: floaty 5s ease-in-out infinite; }
.memory-bubble span { display: block; font-family: 'IBM Plex Mono'; color: var(--orange); margin-bottom: 8px; }
.memory-bubble:nth-child(1) { left: 2%; top: 8%; }
.memory-bubble:nth-child(2) { left: 24%; top: 34%; animation-delay: -.8s; }
.memory-bubble:nth-child(3) { left: 45%; top: 5%; animation-delay: -1.5s; }
.memory-bubble:nth-child(4) { right: 12%; top: 28%; animation-delay: -2.2s; }
.memory-bubble:nth-child(5) { right: 1%; top: 0; animation-delay: -3s; }
.memory-bubble.popped { background: var(--yellow); transform: scale(1.12) rotate(8deg); }
.brain-pixels { position: absolute; right: 6vw; bottom: 7vh; display: grid; grid-template-columns: repeat(3, 32px); gap: 8px; }
.brain-pixels i { width: 32px; height: 32px; background: var(--pink); border: 4px solid var(--ink); animation: pixelThink 1.2s steps(2) infinite; }
.brain-pixels i:nth-child(even) { background: var(--teal); animation-delay: .3s; }

.emotional-loader { width: min(880px, 88vw); padding: 0 34px 42px; transform: rotate(1.5deg); }
.loading-track { height: 46px; border: 5px solid var(--ink); background: var(--cream); overflow: hidden; margin: 28px 0; }
.loading-fill { height: 100%; width: 12%; background: repeating-linear-gradient(90deg, var(--teal) 0 28px, var(--yellow) 28px 56px, var(--orange) 56px 84px); transition: width .5s ease; }
.mood-row { display: flex; flex-wrap: wrap; gap: 18px; }
.warning-face { position: absolute; right: 10vw; top: 12vh; font-size: 10rem; color: var(--yellow); text-shadow: 7px 7px 0 var(--ink); transform: rotate(14deg); }
.warning-face span { font-family: 'IBM Plex Mono'; font-size: 3rem; color: var(--ink); }

.certificate { position: relative; width: min(980px, 90vw); min-height: 630px; border: 12px double var(--ink); background: linear-gradient(135deg, var(--cream), #FFF4C7 65%, var(--yellow)); padding: 42px; box-shadow: 20px 20px 0 var(--orange); transform: rotate(-1.2deg); }
.cert-top { font-family: 'IBM Plex Mono'; border-bottom: 4px solid var(--ink); padding-bottom: 16px; }
.cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 32px 0; }
.cert-grid span { border: 4px solid var(--ink); padding: 14px; font-family: 'IBM Plex Mono'; background: var(--teal); }
.final-stamp { position: absolute; right: 6%; bottom: 12%; font-size: clamp(1.8rem, 4vw, 3.8rem); opacity: 0; transform: rotate(-18deg) scale(2); transition: opacity .25s ease, transform .45s cubic-bezier(.2,1.8,.2,1); }
.final-stamp.visible { opacity: 1; transform: rotate(-18deg) scale(1); }

.wobble-card { animation: wobble 7s ease-in-out infinite; }
.crooked-left { transform: rotate(-2.5deg); }
.crooked-right { transform: rotate(2.5deg); }

@keyframes glitchNudge { 0%, 90%, 100% { transform: translate(0); } 92% { transform: translate(8px, -3px); } 94% { transform: translate(-6px, 5px); } 96% { transform: translate(4px, 2px); } }
@keyframes wobble { 0%,100% { transform: rotate(-1.5deg) translateY(0); } 50% { transform: rotate(1deg) translateY(10px); } }
@keyframes dopeySpin { to { transform: rotate(360deg); } }
@keyframes counterSpin { to { transform: rotate(-360deg); } }
@keyframes badIdea { 0% { transform: scale(1); } 40% { transform: scale(1.1) rotate(4deg); } 100% { transform: scale(1); } }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-24px) rotate(4deg); } }
@keyframes pixelThink { 50% { transform: translate(8px, -8px); } }

@media (max-width: 850px) {
    .scene, .boot-scene, .permanence-scene { grid-template-columns: 1fr; padding: 7vh 5vw; }
    .diagnostic-panel, .spinner-head, .stamp-cloud, .warning-face { position: relative; inset: auto; }
    .maze-lines, .cert-grid { grid-template-columns: 1fr; }
    .memory-bubble { position: relative; left: auto !important; right: auto !important; top: auto !important; margin: 16px; }
    .bubble-field { min-height: auto; display: flex; flex-wrap: wrap; }
}