/* CRT shell shared by /, /web, /app */
:root{--ph:#e4ebe7;--ph-dim:#8d9692;--brand:#30B94F;--glass:#0a0c0c;--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box;margin:0}
html,body{height:100%;background:#000;overflow:hidden}
body{font-family:"VT323",ui-monospace,monospace;color:var(--ph)}
/* the tube: whole viewport, rounded bulging glass */
.tube{position:fixed;inset:clamp(6px,1.4vmin,14px);border-radius:clamp(28px,7vmin,80px)/clamp(34px,9vmin,100px);
  background:radial-gradient(ellipse at 50% 45%,#1a1e1e 0%,var(--glass) 62%,#010402 100%);overflow:hidden;
  box-shadow:0 0 0 2px #111,0 0 40px rgba(255,255,255,.04)}
.content{position:absolute;inset:0;animation:breathe 4s ease-in-out infinite;transform-origin:center}
/* overlays */
.noise,.scan,.bulge,.roll,.flash{position:absolute;inset:0;pointer-events:none}
.noise{width:100%;height:100%;opacity:0;mix-blend-mode:screen;image-rendering:pixelated;z-index:5}
.scan{z-index:6;background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 4px)}
.roll{z-index:6;background:linear-gradient(180deg,transparent,rgba(255,255,255,.025) 45%,rgba(255,255,255,.045) 50%,transparent 60%);height:22%;animation:roll 11s linear infinite}
/* convex edges: dark falloff + glass highlight */
.bulge{z-index:7;border-radius:inherit;
  box-shadow:inset 0 0 clamp(40px,10vmin,140px) clamp(10px,3vmin,40px) rgba(0,0,0,.92),inset 0 0 4px 2px #000;
  background:radial-gradient(ellipse 60% 35% at 32% 18%,rgba(255,255,255,.07),transparent 70%),
             radial-gradient(ellipse 120% 120% at 50% 50%,transparent 55%,rgba(0,0,0,.55) 100%)}
.glow{text-shadow:0 0 5px rgba(230,240,235,.55),0 0 18px rgba(230,240,235,.18)}
/* power-on: dot → line → full picture */
.tube.boot .content,.tube.boot .noise{animation:on 1.1s var(--ease) both}
.flash{z-index:8;background:#f2f6f4;opacity:0}
.tube.boot .flash{animation:flash 1.1s ease-out both}
.tube.off .content,.tube.off .noise{animation:off .45s ease-in both}
.tube.static .noise{opacity:.35;transition:opacity .1s}
@keyframes on{0%{transform:scale(0,.004);filter:brightness(6)}35%{transform:scale(1,.004);filter:brightness(5)}70%{transform:scale(1,1.04);filter:brightness(1.6)}100%{transform:none;filter:none}}
@keyframes flash{0%{opacity:0}30%{opacity:.7}100%{opacity:0}}
@keyframes off{60%{transform:scale(1,.004);filter:brightness(5)}100%{transform:scale(0,.004);filter:brightness(8)}}
@keyframes roll{from{transform:translateY(-100%)}to{transform:translateY(400%)}}
@keyframes breathe{50%{filter:brightness(1.03)}}
/* NES pixel scene behind the content */
.scene{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;z-index:0}
.nes{font-family:"Press Start 2P",monospace;color:#fcfcfc;text-shadow:2px 2px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000}
@media (prefers-reduced-motion:reduce){.content,.roll,.tube.boot .content,.tube.boot .noise,.tube.boot .flash{animation:none!important}.noise{opacity:.06}}