/* ppuzzl.net — Cyberpunk Puzzle Network */
:root {
    --void: #07060D;
    --panel: rgba(13,10,30,0.72);
    --grid: #1A1A3E;
    --cyan: #00FFD1;
    --magenta: #FF2E6A;
    --amber: #FFB627;
    --text: #B8C4E0;
    --dim: #5A6178;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Share Tech', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.8; color: var(--text); background: var(--void); overflow-x: hidden; }

#particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.scanline-overlay { position: fixed; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(13,10,30,0.04) 2px, rgba(13,10,30,0.04) 3px); }

.hud-top { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); z-index: 80; opacity: 0; transition: opacity 0.3s; }
.hud-top.on { opacity: 1; }
.hud-corner { position: fixed; z-index: 80; width: 24px; height: 24px; opacity: 0; transition: opacity 0.3s; }
.hud-corner.on { opacity: 0.6; }
.tl { top: 12px; left: 12px; border-top: 2px solid var(--magenta); border-left: 2px solid var(--magenta); }
.tr { top: 12px; right: 12px; border-top: 2px solid var(--magenta); border-right: 2px solid var(--magenta); }
.bl { bottom: 12px; left: 12px; border-bottom: 2px solid var(--magenta); border-left: 2px solid var(--magenta); }
.br { bottom: 12px; right: 12px; border-bottom: 2px solid var(--magenta); border-right: 2px solid var(--magenta); }

.zone { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 5; padding: 80px 24px; }

#zone-hero { gap: 16px; }
.hero-line { width: 0; height: 1px; background: var(--cyan); opacity: 0.6; transition: width 0.6s ease-out; }
.hero-line.on { width: 200px; }
.hero-title { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 80px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cyan); text-shadow: 0 0 20px rgba(0,255,209,0.4); }
.hero-title .letter { display: inline-block; opacity: 0; transition: opacity 0.1s; }
.hero-title .letter.on { opacity: 1; }
.hero-sub { font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 24px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--magenta); text-shadow: 0 0 12px rgba(255,46,106,0.4); margin-left: 30%; opacity: 0; transition: opacity 0.2s; }
.hero-sub.on { opacity: 1; }
.hero-tagline { font-size: 14px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--dim); opacity: 0; transition: opacity 0.4s; }
.hero-tagline.on { opacity: 1; }

.panel { background: var(--panel); backdrop-filter: blur(16px); border: 1px solid rgba(0,255,209,0.15); padding: 40px; max-width: 680px; box-shadow: 0 0 40px rgba(0,255,209,0.06); opacity: 0; transform: translateY(60px); transition: opacity 0.5s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); margin-bottom: 24px; }
.panel.visible { opacity: 1; transform: translateY(0); }
.panel-tag { font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan); display: block; margin-bottom: 12px; }
.panel-heading { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 36px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--cyan); text-shadow: 0 0 20px rgba(0,255,209,0.4); margin-bottom: 16px; }
.panel-text { color: var(--text); letter-spacing: 0.02em; margin-bottom: 12px; }
.accent-cyan { color: var(--cyan); }
.accent-magenta { color: var(--magenta); }
.accent-amber { color: var(--amber); }

.zone-scatter { gap: 40px; }
.zone-scatter .panel-a { align-self: flex-start; margin-left: 10%; }
.zone-scatter .panel-b { align-self: flex-end; margin-right: 10%; max-width: 400px; }
.zone-scatter .panel-c { align-self: flex-start; margin-left: 20%; max-width: 500px; }

.zone-pattern { gap: 24px; }
.zone-pattern .panel-d { align-self: flex-start; margin-left: 5%; }
.zone-pattern .panel-e { align-self: flex-end; margin-right: 5%; max-width: 500px; }
.zone-pattern .panel-f { align-self: center; max-width: 450px; }
.zone-pattern .panel-g { align-self: flex-start; margin-left: 15%; max-width: 550px; }

.zone-assembly { gap: 16px; }
.zone-assembly .panel-h { max-width: 600px; }
.zone-assembly .panel-i { max-width: 400px; margin-left: 10%; }

.zone-signal .panel-final { max-width: 900px; border-color: rgba(0,255,209,0.4); box-shadow: 0 0 60px rgba(0,255,209,0.1); }

@media (max-width: 768px) {
    .hero-title { font-size: 40px; letter-spacing: 0.15em; }
    .zone-scatter .panel-a, .zone-scatter .panel-b, .zone-scatter .panel-c,
    .zone-pattern .panel-d, .zone-pattern .panel-e, .zone-pattern .panel-f, .zone-pattern .panel-g { margin-left: 0; margin-right: 0; align-self: stretch; max-width: 100%; }
    .panel { padding: 24px; }
}