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

:root {
    --green: #00ff88;
    --cyan: #00e5ff;
    --orange: #ff9800;
    --purple: #a855f7;
    --red: #ff3a3a;
    --bg: #030a07;
    --panel: rgba(8,22,14,0.92);
    --border: rgba(0,255,136,0.35);
    --text-dim: #8ab89a;
    --glow-green: 0 0 12px #00ff88, 0 0 30px rgba(0,255,136,0.3);
    --glow-cyan: 0 0 12px #00e5ff, 0 0 30px rgba(0,229,255,0.3);
}

body {
    background: var(--bg);
    color: var(--green);
    font-family: 'Share Tech Mono', monospace;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 60px 10px 40px;
    overflow-x: hidden;
    position: relative;
}

#starfield {
    position: fixed; top:0; left:0; width:100%; height:100%;
    z-index: 0; pointer-events: none;
}
.grid-bg {
    position: fixed; top:0; left:0; width:100%; height:100%;
    background-image:
        linear-gradient(rgba(0,255,136,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,255,136,0.04) 1px, transparent 1px);
    background-size: 35px 35px;
    z-index: 0; pointer-events:none;
}

.top-bar {
    position: fixed; top:0; left:0; width:100%;
    padding: 8px 20px;
    background: rgba(3,10,7,0.95);
    border-bottom: 1px solid var(--border);
    font-size: 0.72rem;
    display: flex; align-items: center; gap: 10px;
    z-index: 100; letter-spacing: 0.05em;
    backdrop-filter: blur(8px);
}
.status-dot { color: var(--green); text-shadow: var(--glow-green); font-size: 0.8rem; }
.status-text { color: var(--text-dim); flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

/* MAINFRAME */
#mainframe {
    position: relative; z-index: 10;
    width: 680px; max-width: 97%;
    border: 1.5px solid var(--border);
    background: var(--panel);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 28px 28px 32px;
    box-shadow: 0 0 40px rgba(0,255,136,0.12), inset 0 0 30px rgba(0,0,0,0.5);
    overflow: hidden;
}
#mainframe::-webkit-scrollbar { width: 4px; }
#mainframe::-webkit-scrollbar-thumb { background: var(--green); border-radius: 4px; }

/* SCENES */
.scene { display:none; opacity:0; transition: opacity 0.5s ease; }
.scene.active { display:block; opacity:1; }
.hidden { display:none !important; }
.mt { margin-top: 16px; }
.mb { margin-bottom: 10px; }
.text-center { text-align:center; }
.text-left { text-align:left; }
.text-green { color: var(--green); text-shadow: var(--glow-green); }
.text-orange { color: var(--orange); text-shadow: 0 0 8px var(--orange); }
.text-cyan { color: var(--cyan); text-shadow: var(--glow-cyan); }
.text-red { color: var(--red); }
.width-full { width:100%; display:block; }
.banner { background:#0a1a0d; border:1px dotted var(--orange); padding:10px; font-weight:bold; }

/* TERMINAL (Scene 0) */
.terminal-box { border: 1px solid var(--border); border-radius: 8px; overflow:hidden; }
.terminal-header {
    background: #0d1f14; padding: 10px 15px;
    display: flex; align-items:center; gap: 8px;
    border-bottom: 1px solid var(--border);
}
.dot { width:12px; height:12px; border-radius:50%; display:inline-block; }
.dot.red { background:#ff5f57; }
.dot.yellow { background:#febc2e; }
.dot.green { background:#28c840; }
.terminal-title { margin-left: 8px; font-size:0.8rem; color: var(--text-dim); }
.terminal-body { padding: 20px; min-height:100px; }
.terminal-body p, .terminal-body div p { color: var(--green); line-height: 1.8; font-size: 1rem; }
.cursor-blink { animation: cursorBlink 1s step-end infinite; }
@keyframes cursorBlink { 0%,100%{opacity:1} 50%{opacity:0} }
#boot-text p { color: var(--text-dim); animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateX(-5px)} to{opacity:1;transform:none} }

/* TITLES */
.tech-title {
    font-family: 'Orbitron', monospace;
    font-size: 1.2rem; font-weight: 700;
    color: var(--green);
    text-shadow: var(--glow-green);
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px; margin-bottom: 12px;
    letter-spacing: 0.05em;
}
.scene-sub { color: var(--text-dim); font-size:0.95rem; line-height:1.6; font-family:'Share Tech Mono',monospace; }

/* BUTTONS */
button {
    background: transparent;
    border: 1px solid var(--green);
    color: var(--green);
    padding: 11px 22px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.25s;
    text-transform: uppercase;
    font-family: 'Share Tech Mono', monospace;
    border-radius: 4px;
    letter-spacing: 0.05em;
}
button:hover { background: rgba(0,255,136,0.12); box-shadow: var(--glow-green); }
.btn-cyan { border-color: var(--cyan); color: var(--cyan); }
.btn-cyan:hover { background: rgba(0,229,255,0.12); box-shadow: var(--glow-cyan); }
.btn-danger { background: #8b0000; border-color: var(--red); color:#fff; font-weight:bold; padding:15px 30px; font-size:1.2rem; }
.btn-danger:hover { background:#b71c1c; box-shadow: 0 0 25px var(--red); }
.btn-mystery { border-color: var(--purple); color: var(--purple); animation: mysteryPulse 2s ease-in-out infinite alternate; }
.btn-mystery:hover { background: rgba(168,85,247,0.15); box-shadow: 0 0 20px var(--purple); }
@keyframes mysteryPulse { from{box-shadow:0 0 5px var(--purple)} to{box-shadow:0 0 22px var(--purple), 0 0 45px var(--purple)} }
.btn-back { border-color:#444; color:#666; font-size:0.9rem; }
.btn-back:hover { border-color:var(--purple); color:var(--purple); }
.glow { box-shadow: var(--glow-cyan); }
.heartbeat { animation: heartbeat 1s infinite alternate; }
@keyframes heartbeat { from{transform:scale(1)} to{transform:scale(1.06); box-shadow:0 0 30px var(--red)} }

/* ========================
   CRO OSCILLOSCOPE
   ======================== */
.cro-chassis {
    background: #0b1a0e;
    border: 2px solid #2a4a30;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.8), inset 0 0 20px rgba(0,0,0,0.5);
}
.cro-screen-bezel {
    background: #060f08;
    border: 3px solid #1a3320;
    border-radius: 6px;
    padding: 8px;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.9);
}
.cro-screen {
    position: relative;
    background: #001508;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.9);
}
#cro-canvas { display:block; width:100%; height:auto; }

/* Phosphor scanline */
.cro-scanline {
    position: absolute; top:0; left:0; width:100%; height:100%;
    background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.12) 4px);
    pointer-events:none; z-index:3;
}
/* CRO grid overlay */
.cro-grid-overlay {
    position:absolute; top:0; left:0; width:100%; height:100%;
    background-image:
        linear-gradient(rgba(0,255,100,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,255,100,0.08) 1px, transparent 1px),
        linear-gradient(rgba(0,255,100,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,255,100,0.04) 1px, transparent 1px);
    background-size: 52px 40px, 52px 40px, 10.4px 8px, 10.4px 8px;
    pointer-events:none; z-index:2;
}
/* CRO phosphor glow effect on canvas via CSS filter */
#cro-canvas { filter: drop-shadow(0 0 4px #00ff88) brightness(1.1); }

.cro-labels { display:flex; justify-content:space-between; padding: 4px 8px 0; }
.cro-label-left, .cro-label-right { font-size:0.7rem; color:#2a8a4a; letter-spacing:0.1em; }

.cro-controls {
    display:flex; align-items:center; justify-content:space-between;
    margin-top: 12px; padding: 0 4px;
}
.cro-knob-group { display:flex; flex-direction:column; align-items:center; gap:5px; }
.cro-knob {
    width:42px; height:42px; border-radius:50%;
    background: radial-gradient(circle at 35% 35%, #3a5a3a, #0d1f0d);
    border: 2px solid #2a4a2a;
    box-shadow: 0 3px 8px rgba(0,0,0,0.8), inset 0 1px 2px rgba(255,255,255,0.1);
    position:relative;
}
.cro-knob::after {
    content:''; position:absolute; top:6px; left:50%; transform:translateX(-50%);
    width:3px; height:10px; background: var(--green); border-radius:2px;
    box-shadow: 0 0 5px var(--green);
}
.cro-knob-label { font-size:0.65rem; color: var(--text-dim); letter-spacing:0.1em; }
.cro-readout {
    background: #000d05; border: 1px solid #1a3320; padding: 10px 18px;
    border-radius: 4px; font-size:0.85rem; min-width:180px;
}
.cro-readout-row { display:flex; gap:6px; margin-bottom:4px; align-items:baseline; }
.cro-rlabel { color:#4a8a5a; }
.cro-rval { color: var(--green); text-shadow: var(--glow-green); font-size:1.05rem; }

/* Decoded stream */
.decoded-header { color: var(--orange); font-size:0.85rem; margin-bottom:8px; }
.decoded-lines {
    background: #000d05; border: 1px solid #1a3320;
    border-radius:4px; padding:12px; min-height:60px;
    font-size: 0.9rem; line-height:1.8; color: var(--cyan);
    text-shadow: var(--glow-cyan);
}
.tune-hint { font-size:0.9rem; }

/* SLIDER */
.slider { width:100%; height:6px; background:#1a3320; outline:none; -webkit-appearance:none; margin-top:14px; border-radius:3px; }
.slider::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; background: var(--cyan); border-radius:50%; box-shadow: var(--glow-cyan); cursor:pointer; }

/* ========================
   PCB BOARD
   ======================== */
.board-3d-wrapper { perspective:900px; margin:15px 0; display:flex; justify-content:center; }
.pcb-board {
    width:100%; max-width:500px; height:155px;
    background: linear-gradient(135deg, #003a18, #001f0d);
    border: 3px solid #005a22; border-radius:10px;
    transform: rotateX(38deg);
    box-shadow: 10px 14px 25px rgba(0,0,0,0.9), inset 0 0 15px rgba(0,0,0,0.6);
    display:flex; justify-content:space-evenly; align-items:center; position:relative; padding:10px;
}
.board-traces { position:absolute; top:5px; left:5px; right:5px; bottom:5px; border:1px dotted rgba(0,255,136,0.2); pointer-events:none; z-index:0; border-radius:6px; }
.slot {
    width:29%; height:82%; background:rgba(0,0,0,0.5);
    border:2px dashed var(--orange); display:flex; justify-content:center; align-items:center;
    color:var(--orange); font-size:0.9rem; cursor:pointer; transition:all 0.3s; z-index:10; border-radius:4px;
}
.slot:hover { background:rgba(255,152,0,0.15); border-color:#fff; }
.slot.filled { border:2px solid var(--cyan); background:rgba(0,229,255,0.08); box-shadow:0 0 12px rgba(0,229,255,0.25); }

/* Components */
.draggables { display:flex; justify-content:space-evenly; margin-top:14px; }
.comp-item {
    background:rgba(0,0,0,0.6); border:2px solid var(--orange); border-radius:8px;
    padding:10px; cursor:pointer; display:flex; flex-direction:column; align-items:center;
    width:90px; height:100px; transition:all 0.2s;
}
.comp-item:hover { background:rgba(255,152,0,0.15); transform:translateY(-3px); }
.comp-item.selected { background:var(--orange); box-shadow:0 0 18px var(--orange); transform:translateY(-6px) scale(1.06); border-color:#fff; }
.comp-item.selected p { color:#fff; }
.comp-item.placed { opacity:0.1; pointer-events:none; filter:grayscale(100%); }
.comp-item p { margin-top:5px; font-size:0.7rem; color:var(--orange); text-align:center; }
.comp-css-arduino { width:35px; height:60px; background:#00878F; border-radius:2px; position:relative; }
.comp-css-arduino::before { content:''; position:absolute; top:-4px; left:8px; width:19px; height:6px; background:silver; border-radius:1px; }
.comp-css-arduino .mcu { position:absolute; top:35%; left:20%; width:60%; height:40%; background:#222; transform:rotate(45deg); }
.comp-css-relay { width:50px; height:35px; background:#880000; border-radius:2px; display:flex; padding:3px; }
.comp-css-relay .cube { width:30px; height:100%; background:#1e88e5; border-radius:1px; }
.comp-css-relay .pins { flex-grow:1; height:100%; background:#222; margin-left:4px; display:flex; flex-direction:column; justify-content:space-evenly; align-items:center; }
.comp-css-relay .pins div { width:80%; height:4px; background:silver; }
.comp-css-capacitor { width:25px; height:25px; border-radius:50%; background:radial-gradient(circle at 30% 30%, #666, #111); position:relative; }
.comp-css-capacitor::before { content:''; position:absolute; right:2px; top:4px; bottom:4px; width:5px; background:silver; border-radius:2px; }

/* Flash effects */
.flash-arduino { box-shadow:0 0 30px var(--cyan), inset 0 0 20px var(--cyan) !important; background:#00e5ff !important; }
.flash-relay { box-shadow:0 0 30px var(--red) !important; background:#ff3333 !important; }
.flash-relay .cube { background:#fff !important; }
.flash-capacitor { box-shadow:0 0 30px var(--orange) !important; }

/* Upload bar */
.charge-bar-bg { width:100%; height:8px; background:#1a3320; overflow:hidden; border-radius:4px; }
.charge-bar-fill { width:0%; height:100%; background: linear-gradient(90deg, var(--green), var(--cyan)); transition:width 0.1s; }

/* ========================
   POETRY CARD
   ======================== */
.poetry-card {
    background: linear-gradient(135deg, rgba(0,20,10,0.9), rgba(0,10,20,0.9));
    border: 1px solid rgba(0,229,255,0.3);
    border-radius: 12px; padding: 24px 28px;
    text-align:center; position:relative; overflow:hidden;
}
.poetry-card::before {
    content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
    background: radial-gradient(ellipse at 50% 50%, rgba(0,229,255,0.05), transparent 70%);
    animation: poetryGlow 4s ease-in-out infinite alternate;
}
@keyframes poetryGlow { from{opacity:0.5} to{opacity:1} }
.poetry-stars { font-size:1.3rem; margin-bottom:12px; letter-spacing:8px; animation: starSpin 3s linear infinite; display:inline-block; }
@keyframes starSpin { from{letter-spacing:8px} 50%{letter-spacing:16px} to{letter-spacing:8px} }
.poetry-text {
    font-family: 'Caveat', cursive;
    font-size: 1.45rem; color: #e0f0ff; line-height:2;
    min-height: 80px; text-shadow: 0 0 8px rgba(0,229,255,0.4);
}
.poetry-sig { margin-top:14px; font-size:0.85rem; color:var(--text-dim); font-style:italic; }

/* ========================
   GIF ROW
   ======================== */
.gif-row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.gif-card { display:flex; flex-direction:column; align-items:center; gap:6px; }
.fun-gif { width:120px; height:90px; object-fit:cover; border-radius:8px; border:2px solid var(--border); box-shadow:0 0 12px rgba(0,255,136,0.2); }
.gif-caption { font-size:0.7rem; color:var(--text-dim); text-align:center; }

/* Questions */
.question-box { border:1px solid var(--border); border-radius:8px; padding:18px; }
.question-box h3 { font-size:1rem; margin-bottom:4px; }
.input-group { margin-bottom:14px; }
.input-group label { display:block; margin-bottom:6px; color:var(--cyan); font-size:0.9rem; }
.tech-input { width:100%; background:rgba(0,0,0,0.5); border:1px solid var(--cyan); color:#fff; padding:10px; font-family:'Share Tech Mono',monospace; outline:none; border-radius:4px; font-size:0.95rem; }
.tech-input:focus { box-shadow:0 0 10px rgba(0,229,255,0.3); }

/* RC Car */
.rc-lane { width:100%; height:60px; border-bottom:3px dashed #2a4a2a; position:relative; overflow:hidden; margin-top:10px; background:rgba(0,0,0,0.3); border-radius:4px 4px 0 0; }
#rc-car { position:absolute; bottom:5px; left:-80px; font-size:3rem; transition:left 2.5s cubic-bezier(0.2,0.8,0.4,1); }

/* Countdown */
.digital-display { font-family:'Orbitron',monospace; font-size:5rem; color:var(--red); text-shadow:0 0 25px var(--red); margin:10px 0; }

/* ========================
   FINALE
   ======================== */
.fixed-overlay { position:fixed; top:0; left:0; width:100%; height:100%; z-index:9999; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:20px; }
.finale-overlay { background:rgba(3,10,7,0.96); overflow-y:auto; }
.finale-inner { max-width:620px; width:100%; text-align:center; }
.finale-emoji-rain { font-size:2rem; letter-spacing:8px; animation:emojiFloat 2s ease-in-out infinite alternate; }
@keyframes emojiFloat { from{transform:translateY(0)} to{transform:translateY(-8px)} }
.celebration-text {
    font-family:'Orbitron',monospace; font-size:2rem; font-weight:900;
    color: var(--cyan); text-shadow: var(--glow-cyan);
    margin:16px 0; line-height:1.3;
    animation: celebPulse 1.5s ease-in-out infinite alternate;
}
@keyframes celebPulse { from{text-shadow: var(--glow-cyan)} to{text-shadow:0 0 30px var(--cyan), 0 0 60px rgba(0,229,255,0.5)} }
.finale-gif-big { margin:16px 0; }
.big-gif { width:200px; border-radius:12px; border:2px solid var(--cyan); box-shadow: var(--glow-cyan); }
.recap-card { background:rgba(0,229,255,0.06); border-left:4px solid var(--cyan); padding:16px 20px; text-align:left; border-radius:4px; margin-bottom:16px; font-size:1.05rem; }
.recap-card p { margin-bottom:6px; color:var(--text-dim); }
.final-poem {
    font-family:'Caveat',cursive; font-size:1.4rem;
    color:#c8e8d0; line-height:2; margin:16px 0;
    text-shadow:0 0 8px rgba(0,255,136,0.2);
}
.finale-buttons { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }

/* ========================
   RIDDLE
   ======================== */
.riddle-overlay { background:rgba(2,3,8,0.98) !important; z-index:99999 !important; overflow-y:auto; align-items:flex-start; padding-top:40px; padding-bottom:40px; }
.riddle-box { width:640px; max-width:96%; border:2px solid var(--purple); background:rgba(8,5,18,0.97); border-radius:12px; padding:30px; box-shadow:0 0 50px rgba(168,85,247,0.25); }
.riddle-intro { color:var(--text-dim); margin-bottom:18px; }
.riddle-stage { margin-top:8px; }
.clue-box { background:rgba(168,85,247,0.07); border-left:4px solid var(--purple); padding:15px 18px; border-radius:4px; margin-bottom:10px; }
.clue-label { color:var(--purple); font-size:0.78rem; margin-bottom:6px; letter-spacing:0.08em; }
.clue-text { color:#e2d4f0; font-style:italic; line-height:1.7; font-family:'Caveat',cursive; font-size:1.2rem; }
.clue-gif { margin:10px 0; text-align:center; }
.riddle-gif { width:140px; height:100px; object-fit:cover; border-radius:8px; border:2px solid rgba(168,85,247,0.4); }
.riddle-feedback { margin-top:10px; padding:8px 12px; border-radius:4px; font-size:0.9rem; }
.riddle-feedback.correct { color:var(--cyan); border:1px solid var(--cyan); background:rgba(0,229,255,0.07); text-shadow:var(--glow-cyan); }
.riddle-feedback.wrong { color:var(--red); border:1px solid var(--red); background:rgba(255,58,58,0.07); }
.reveal-screen { background:rgba(168,85,247,0.07); border:2px solid var(--purple); border-radius:10px; padding:28px; margin-top:10px; }
.reveal-gif { width:180px; border-radius:10px; border:2px solid var(--purple); margin-bottom:8px; }
.reveal-msg { color:var(--text-dim); font-family:'Caveat',cursive; font-size:1.35rem; line-height:1.9; }

/* Blink */
.blink-slow { animation:blinkSlow 1.5s step-end infinite; }
@keyframes blinkSlow { 0%,100%{opacity:1} 50%{opacity:0} }

/* Shake */
.shake { animation:shakeAnim 0.5s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shakeAnim {
    10%,90%{transform:translate3d(-20px,0,0)}
    20%,80%{transform:translate3d(25px,0,0)}
    30%,50%,70%{transform:translate3d(-35px,0,0)}
    40%,60%{transform:translate3d(35px,0,0)}
}