/* =======================
   GLOBAL / BACKGROUNDS
======================= */
:root{
  --win95-gray:#c0c0c0;
  --win95-dark:#808080;
  --win95-light:#f0f0f0;
  --neon-cyan:#00ffff;
  --neon-pink:#ff00ff;
  --neon-yellow:#ffff00;
  --text:#eaffff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:#000; color:var(--text);
  font-family:'VT323', monospace; overflow:hidden;
}

/* == Background Styles == */
.bg-0{ 
  background: url("Assets/GIFS/f55b0f3e0d9b878ed9192b8358fd1480.gif") 
              center center / cover no-repeat #000;
  position: relative;
  overflow: hidden;
}

.bg-0::before {
  content: "";
  position: fixed;
  inset: 0;
  background: inherit;
  background-size: cover;
  image-rendering: pixelated;
  filter: brightness(0.2);  
  filter: contrast(1.2);
  z-index: -1;
}

.bg-5{ 
  background:
    radial-gradient(circle at 10% 10%, rgba(255,0,255,.2), transparent 30%),
    radial-gradient(circle at 80% 20%, rgba(0,255,255,.2), transparent 35%),
    radial-gradient(circle at 30% 80%, rgba(255,255,0,.2), transparent 40%),
    #050011; 
}

.bg-1{ 
  background:
    repeating-conic-gradient(from 0deg, #111 0 10deg, #222 10deg 20deg); 
}

.bg-2{ 
  background:
    linear-gradient(45deg, #0ff2, #f0f2, #ff02, #0f02); 
}

.bg-3{ 
  background:
    radial-gradient(circle at 50% 50%, #222, #000); 
}

.bg-4{ 
  background:
    repeating-linear-gradient(90deg, #111 0 20px, #000 20px 40px); 
}

/* == Overlay Effects == */
.overlay-grid::before{
  z-index: 2;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.24) 0 2px, rgba(0,0,0,.45) 2px 4px);
  mix-blend-mode:multiply;
}

#noiseOverlay{
  position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay; background-size:250px;
}

/* =======================
   UTILITY CLASSES
======================= */
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:8px}
.win:focus{outline:2px dashed #ff0}
.hint{font-size:12px;opacity:.8}
.link-list a{color:#00ffff}

/* =======================
   LED COUNTER
======================= */
.counter{
  font-family:'Press Start 2P', monospace;color:#111;background:#222;
  border:2px inset #666;display:inline-block;padding:6px 10px
}
.counter .digit{
  display:inline-block;width:14px;text-align:center;margin:0 1px;
  color:#0f0;text-shadow:0 0 6px #0f0, 0 0 10px #0f0
}

/* =======================
   GUESTBOOK
======================= */
.gb-card{
  background:linear-gradient(135deg,#ff6aff,#6affff,#ffff6a);
  padding:2px;border-radius:8px;margin-bottom:10px
}
.gb-inner{
  background:#fff;color:#000;padding:8px;border-radius:6px;
  font-family:'VT323';font-size:18px
}

/* =======================
   CRT TV EFFECTS
======================= */
/* == CRT Container == */
.crt-container {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}

/* == CRT Screen Curvature == */
.crt-screen {
  position: absolute;
  inset: 0;
  border-radius: 15px;
  overflow: hidden;
  transform: perspective(1000px) rotateX(0deg);
  filter: contrast(1.2) brightness(1.1) saturate(1.3);
}

/* == Rolling Scanlines == */
.crt-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    rgba(0, 255, 0, 0.03) 1px,
    transparent 2px,
    rgba(0, 0, 0, 0.1) 1px,
    transparent 4px
  );
  animation: roll 0.3s linear infinite;
  pointer-events: none;
}

/* == Bloom Effect == */
.crt-bloom {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 255, 255, 0.1) 0%,
    rgba(255, 0, 255, 0.05) 30%,
    transparent 100%
  );
  filter: blur(5px);
  mix-blend-mode: screen;
}

/* == Color Bleeding/Chromatic Aberration == */
.crt-aberration {
  position: absolute;
  inset: 0;
  filter: 
    drop-shadow(1px 0 0 rgba(237, 92, 92, 0.3))
    drop-shadow(-1px 0 0 rgba(1, 62, 62, 0.3));
  mix-blend-mode: multiply;
}




.tv-startup.tv-on {
  animation: turnOnTV 2s ease-out forwards;
}



/* == Phosphor Afterglow == */
.crt-phosphor {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(0, 255, 0, 0.02) 0%,
    transparent 50%
  );
  animation: phosphorGlow 3s ease-in-out infinite alternate;
}

/* =======================
   CRT ANIMATIONS
======================= */
@keyframes roll {
  0% { transform: translateY(0); }
  100% { transform: translateY(4px); }
}

@keyframes flicker {
  0% { opacity: 0.98; }
  50% { opacity: 1; }
  100% { opacity: 0.96; }
}



@keyframes phosphorGlow {
  0% { opacity: 0.1; }
  100% { opacity: 0.3; }
}