* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --neon-green: #00ff41; --hot-pink: #ff006e; --cyan: #00d4ff; --yellow: #ffe600; --purple: #bf00ff;
  --glacier: #a8e6ff; --frost: #f0fbff; --acorn: #8b5a2b; --meteor: #ff3b1f;
  --bg-panel: #10121a; --bg-card: #171a26; --border-dim: #262b3d;
}
body {
  background: radial-gradient(ellipse at top, #0f1a2a 0%, #0a0a0f 55%), #0a0a0f;
  color: #e0e6ee; font-family: 'IBM Plex Mono', monospace; overflow-x: hidden; min-height: 100vh;
}
.px { font-family: 'Press Start 2P', monospace; }
.panel { background: var(--bg-panel); border: 1px solid var(--border-dim); }
.chip { padding: 4px 12px; border-radius: 999px; border: 1px solid currentColor; background: rgba(255,255,255,0.03); }
.chip-btn { padding: 8px 14px; border-radius: 10px; font-size: 12px; font-weight: 700; background: var(--bg-card); border: 1px solid var(--border-dim); color: #ccc; }

@keyframes glitch1 { 0%,100%{clip-path:inset(0);transform:none} 20%{clip-path:inset(20% 0 60% 0);transform:translate(-4px,2px)} 60%{clip-path:inset(10% 0 70% 0);transform:translate(3px,-1px)} }
@keyframes glitch2 { 0%,100%{clip-path:inset(0);transform:none} 30%{clip-path:inset(60% 0 10% 0);transform:translate(3px,-2px)} 70%{clip-path:inset(5% 0 80% 0);transform:translate(-3px,2px)} }
@keyframes colorShift {
  0%,100% { color: var(--neon-green); text-shadow: 0 0 20px var(--neon-green); }
  25% { color: var(--hot-pink); text-shadow: 0 0 20px var(--hot-pink); }
  50% { color: var(--cyan); text-shadow: 0 0 20px var(--cyan); }
  75% { color: var(--glacier); text-shadow: 0 0 24px #fff; }
}
.glitch-title { position: relative; font-family: 'Press Start 2P', monospace; animation: colorShift 3s infinite; display: inline-block; }
.glitch-title::before, .glitch-title::after { content: attr(data-text); position: absolute; inset: 0; z-index: -1; }
.glitch-title::before { color: var(--hot-pink); animation: glitch1 2s infinite; }
.glitch-title::after { color: var(--cyan); animation: glitch2 2.5s infinite; }

.ice-badge {
  font-family: 'Press Start 2P', monospace; font-size: 10px; color: #06233a;
  background: linear-gradient(110deg, #d9f4ff 20%, #fff 40%, #a8e6ff 60%, #d9f4ff 80%);
  background-size: 250% 100%; animation: shimmer 3s linear infinite;
  box-shadow: 0 0 25px rgba(168,230,255,0.5);
}
@keyframes shimmer { to { background-position: -250% 0; } }
.acorn-btn { display: inline-block; animation: spin 2.5s linear infinite; font-size: 14px; cursor: pointer; }
@keyframes spin { to { transform: rotate(360deg); } }

.marquee { overflow: hidden; white-space: nowrap; font-size: 11px; color: var(--glacier); opacity: 0.5; max-width: 800px; margin: 12px auto 0; }
.marquee span { display: inline-block; padding-left: 100%; animation: marq 22s linear infinite; }
@keyframes marq { to { transform: translateX(-100%); } }

.snow {
  position: fixed; inset: -100px 0 0 0; pointer-events: none; z-index: 0; opacity: 0.35;
  background-image:
    radial-gradient(2px 2px at 20px 30px, #fff, transparent), radial-gradient(2px 2px at 140px 80px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 90px 160px, #fff, transparent), radial-gradient(2.5px 2.5px at 200px 210px, #dff, transparent),
    radial-gradient(1px 1px at 260px 40px, #fff, transparent);
  background-size: 300px 260px; animation: snowfall 14s linear infinite;
}
@keyframes snowfall { to { background-position: 40px 260px, -30px 260px, 20px 260px, -10px 260px, 30px 260px; } }

.drop-zone { animation: borderPulse 3s infinite; transition: all .2s; }
.drop-zone:hover { background: rgba(168,230,255,0.04); }
@keyframes borderPulse { 0%,100%{border-color:var(--neon-green)} 33%{border-color:var(--glacier)} 66%{border-color:var(--hot-pink)} }
.float { animation: float 3s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px); } }
.pulse { animation: pulse 2s infinite; }
@keyframes pulse { 50% { transform: scale(1.03); opacity: .85; } }

.scanline-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: rgba(0,255,65,0.06); z-index: 9999; pointer-events: none; animation: scan 4s linear infinite; }
@keyframes scan { from { transform: translateY(-10px); } to { transform: translateY(100vh); } }

.neon-btn { position: relative; transition: all .2s; }
.neon-btn:hover { animation: shake .4s; box-shadow: 0 0 18px currentColor; }
@keyframes shake { 20%{transform:translateX(-3px) rotate(-1deg)} 40%{transform:translateX(3px) rotate(1deg)} 60%{transform:translateX(-2px)} }

.effect-card { background: var(--bg-card); border: 1px solid var(--border-dim); transition: all .2s; }
.effect-card:hover { transform: translateY(-2px); border-color: var(--cyan); }
.ice-card { background: linear-gradient(160deg, rgba(168,230,255,0.07), var(--bg-card) 60%); }

.ice-panel {
  background: linear-gradient(160deg, rgba(168,230,255,0.12), rgba(16,18,26,0.8));
  border: 1px solid rgba(168,230,255,0.35); backdrop-filter: blur(6px);
  box-shadow: inset 0 0 40px rgba(168,230,255,0.08), 0 0 30px rgba(168,230,255,0.08);
}
.frost-head { color: var(--frost); text-shadow: 0 0 12px var(--glacier); }
.movie-card {
  background: rgba(10,14,22,0.8); border: 2px solid rgba(255,255,255,0.08); transition: all .25s; position: relative; overflow: hidden;
}
.movie-card::after {
  content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .3s; pointer-events: none;
  background: linear-gradient(135deg, transparent 45%, rgba(255,255,255,0.7) 46%, transparent 48%),
              linear-gradient(60deg, transparent 60%, rgba(255,255,255,0.5) 61%, transparent 62%);
}
.movie-card:hover { border-color: var(--mc); box-shadow: 0 0 18px var(--mc), inset 0 0 20px rgba(240,251,255,0.15); transform: translateY(-3px); }
.movie-card:hover::after { opacity: 1; }
.movie-card.selected { border-color: var(--mc); background: color-mix(in srgb, var(--mc) 18%, #0a0e16); box-shadow: 0 0 24px var(--mc); }

.chaos-slider { cursor: pointer; }
.timeline-segment { cursor: pointer; transition: transform .15s; min-width: 4px; }
.timeline-segment:hover { transform: scaleY(1.2); filter: brightness(1.4); }

.progress-bar-fill { background: linear-gradient(90deg, var(--neon-green), var(--cyan), var(--hot-pink), var(--yellow)); background-size: 300% 100%; animation: grad 2s linear infinite; }
@keyframes grad { to { background-position: 300% 0; } }
.ice-fill {
  background:
    linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.9) 31%, transparent 33%) 0 0/40px 100%,
    linear-gradient(60deg, transparent 60%, rgba(6,35,58,0.6) 61%, transparent 63%) 0 0/28px 100%,
    linear-gradient(90deg, #f0fbff, #a8e6ff, #5cc8ff);
}
.scrat-bob { animation: float .4s ease-in-out infinite; transition: margin-left .3s; }

.scrat-run { position: fixed; top: 45%; left: -200px; font-size: 64px; z-index: 10000; pointer-events: none; animation: scratRun 4s linear forwards; }
@keyframes scratRun { 0%{left:-200px;transform:rotate(0)} 50%{transform:translateY(-60px) rotate(-10deg)} 100%{left:110vw;transform:rotate(10deg)} }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--border-dim); border-radius: 3px; }