Apply remaining UI and runtime updates

Author: life2harsh

css/crt.css

@@ -52,13 +52,14 @@
   position: absolute;
   inset: 10px;
   /* Rounder corners = more curved glass feel */
-  border-radius: 30px / 28px;
+  border-radius: 32px / 28px;
   overflow: hidden;
   background: #0a0e1a;
-  /* Perspective + slight scale creates the outward convex bulge illusion */
-  transform: perspective(900px) scale(1.018);
-  /* SVG barrel distortion filter */
-  filter: url(#barrel-distortion);
+  /* Real barrel bulge via SVG filter + mild perspective lift */
+  transform: perspective(900px) scale(1.012);
+  transform-origin: center;
+  filter: url(#crt-bulge-filter);
+  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.6);
 }
 
 /* Glass dome bubble highlight
@@ -82,9 +83,9 @@
       transparent 70%),
     /* Corner darkening — outward-curved screens are dark at corners */
     radial-gradient(ellipse 78% 72% at 50% 50%,
-      transparent 42%,
-      rgba(0, 0, 0, 0.28) 75%,
-      rgba(0, 0, 0, 0.55) 100%);
+      transparent 50%,
+      rgba(0, 0, 0, 0.20) 75%,
+      rgba(0, 0, 0, 0.38) 100%);
   pointer-events: none;
   z-index: 9990;
 }
@@ -110,27 +111,32 @@
 
 
 /* ---- SCANLINES ----
- * Horizontal lines that slowly scroll, like a real CRT.
+ * Alternating bright and dark horizontal lines.
  */
 .crt-scanlines {
   position: absolute;
   inset: 0;
-  background: repeating-linear-gradient(0deg,
-      transparent,
-      transparent 2px,
-      rgba(0, 0, 0, 0.075) 2px,
-      rgba(0, 0, 0, 0.075) 4px);
+  background: repeating-linear-gradient(
+      0deg,
+      rgba(255, 255, 255, 0.035) 0px,
+      rgba(255, 255, 255, 0.035) 1px,
+      rgba(0, 0, 0, 0.18) 2px,
+      rgba(0, 0, 0, 0.18) 4px
+  );
   pointer-events: none;
   z-index: 9000;
   animation: scanlineScroll 12s linear infinite;
 }
 
 /* ---- VIGNETTE ----
- * Corner darkening that complements the barrel lens curvature.
- * Made stronger than before to match the curved-screen look.
+ * Soft corner darkening.
  */
 .crt-vignette {
-  display: none;
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 8999;
+  background: radial-gradient(ellipse 70% 65% at 50% 50%, transparent 50%, rgba(0, 0, 0, 0.48) 100%);
 }
 
 /* ============================================================
@@ -154,130 +160,7 @@
    keeping the effect feeling organic and not repetitive.
    ============================================================ */
 
-/* WAVE 1 — Horizontal sweep band */
-.crt-wave-h {
-  position: absolute;
-  left: 0;
-  right: 0;
-  height: 4px;
-  pointer-events: none;
-  z-index: 9003;
-  background: linear-gradient(180deg,
-      transparent 0%,
-      rgba(200, 255, 200, 0.06) 30%,
-      rgba(200, 255, 200, 0.10) 50%,
-      rgba(200, 255, 200, 0.06) 70%,
-      transparent 100%);
-  box-shadow: 0 0 8px rgba(200, 255, 200, 0.08);
-  animation: waveH 4.8s linear infinite;
-}
-
-@keyframes waveH {
-  0% {
-    top: -10px;
-    opacity: 0;
-  }
-
-  3% {
-    opacity: 1;
-  }
-
-  90% {
-    opacity: 0.5;
-  }
-
-  100% {
-    top: calc(100% + 10px);
-    opacity: 0;
-  }
-}
-
-/* WAVE 2 — Roll bar (dark, wider, moves upward) */
-.crt-wave-roll {
-  position: absolute;
-  left: 0;
-  right: 0;
-  height: 28px;
-  pointer-events: none;
-  z-index: 9002;
-  background: linear-gradient(180deg,
-      transparent 0%,
-      rgba(0, 0, 0, 0.20) 20%,
-      rgba(0, 0, 0, 0.35) 50%,
-      rgba(0, 0, 0, 0.20) 80%,
-      transparent 100%);
-  animation: waveRoll 8.2s linear infinite;
-  animation-delay: -3.1s;
-}
-
-@keyframes waveRoll {
-  0% {
-    bottom: -40px;
-    opacity: 0;
-  }
-
-  5% {
-    opacity: 1;
-  }
-
-  88% {
-    opacity: 0.6;
-  }
-
-  100% {
-    bottom: calc(100% + 40px);
-    opacity: 0;
-  }
-}
-
-/* WAVE 3 — Sync jitter (whole screen skew, brief) */
-.crt-wave-jitter {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  z-index: 9004;
-  opacity: 0;
-  mix-blend-mode: difference;
-  animation: waveJitter 12.5s step-end infinite;
-  animation-delay: -4.7s;
-}
-
-@keyframes waveJitter {
-
-  /* 94.4% of the time: invisible */
-  0%,
-  94.4% {
-    opacity: 0;
-    transform: none;
-  }
-
-  /* Brief skew pulse */
-  94.5% {
-    opacity: 1;
-    transform: skewX(0.4deg) translateX(2px);
-    background: rgba(255, 255, 255, 0.015);
-  }
-
-  94.7% {
-    opacity: 1;
-    transform: skewX(-0.3deg) translateX(-3px);
-  }
-
-  94.9% {
-    opacity: 1;
-    transform: skewX(0.2deg) translateX(1px);
-  }
-
-  95.1% {
-    opacity: 0;
-    transform: none;
-  }
-
-  100% {
-    opacity: 0;
-    transform: none;
-  }
-}
+/* WAVE layers — disabled */
 
 
 /* ---- CHROMATIC ABERRATION ----
@@ -292,30 +175,30 @@
   overflow: hidden;
 }
 
-/* Red channel — shifts left */
+/* Red channel — shifts left (visible but subtle) */
 .crt-chromatic::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg,
-      rgba(255, 30, 30, 0.02) 0%,
+      rgba(255, 30, 30, 0.016) 0%,
       transparent 5%,
       transparent 95%,
-      rgba(255, 30, 30, 0.025) 100%);
-  transform: translateX(-1.5px);
+      rgba(255, 30, 30, 0.016) 100%);
+  transform: translateX(-0.8px);
 }
 
-/* Blue channel — shifts right */
+/* Blue channel — shifts right (visible but subtle) */
 .crt-chromatic::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg,
-      rgba(30, 80, 255, 0.025) 0%,
+      rgba(30, 80, 255, 0.016) 0%,
       transparent 5%,
       transparent 95%,
-      rgba(30, 80, 255, 0.02) 100%);
-  transform: translateX(1.5px);
+      rgba(30, 80, 255, 0.016) 100%);
+  transform: translateX(0.8px);
 }
 
 /* ---- PHOSPHOR GLOW ----
@@ -340,7 +223,7 @@
   inset: 0;
   pointer-events: none;
   z-index: 8997;
-  opacity: 0.03;
+  opacity: 0.028;
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
   background-size: 150px 150px;
   animation: noiseShift 0.3s steps(5) infinite;
@@ -546,41 +429,26 @@
   }
 }
 
-/* ---- POWER LED ----
- * Small green dot below the monitor bezel.
- */
-.crt-power-led {
-  position: absolute;
-  bottom: -22px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 8px;
-  height: 8px;
-  background: #39ff14;
-  border-radius: 50%;
-  box-shadow: 0 0 6px #39ff14, 0 0 15px rgba(57, 255, 20, 0.3);
-  animation: ledPulse 2.5s ease-in-out infinite;
-  z-index: 2;
-}
-
-/* ---- BRAND LABEL ---- */
+/* ---- POWER LED (removed) ---- */
+.crt-power-led,
 .crt-brand {
-  position: absolute;
-  bottom: -32px;
-  left: 50%;
-  transform: translateX(-50%);
-  font-family: 'Press Start 2P', monospace;
-  font-size: 5px;
-  color: rgba(255, 255, 255, 0.12);
-  letter-spacing: 5px;
-  white-space: nowrap;
+  display: none;
 }
 
 /* ============================================================
    GLOBAL BACKGROUND THEME ELEMENTS
    These sit behind the CRT screens to provide a continuous theme.
    ============================================================ */
 
+/* ---- GLOBAL THEME BACKGROUND ----
+ * Hidden by default; fades in when CRT boot completes.
+ */
+.global-theme-bg {
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 220ms ease, visibility 0s linear 220ms;
+}
+
 /* ---- SCENE ELEMENTS (trees, water, ground) ---- */
 .menu-trees {
   position: absolute;
@@ -734,4 +602,24 @@
 @keyframes waterShimmer {
   0% { transform: translateX(-10%); opacity: 0.5; }
   100% { transform: translateX(10%); opacity: 1; }
+}
+
+/* ============================================================
+   CRT BOOT STATE — scoped by body classes added in app.js
+   ============================================================ */
+
+/* Hide content layers during boot animation */
+body.crt-booting .global-theme-bg,
+body.crt-booting .start-screen,
+body.crt-booting .menu-screen {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+/* Reveal when CRT boot completes */
+body.crt-ready .global-theme-bg {
+  opacity: 1;
+  visibility: visible;
+  transition: opacity 220ms ease, visibility 0s linear 0s;
 }