/* The Bitcoin Seinfeld "advert on a CRT" in views/partials/crtAd.ejs. Everything scales with the width of the
   TV (container units), so it stays crisp from a phone to a desktop. */
.crt { container-type: size; aspect-ratio: 16 / 9; background: radial-gradient(ellipse at 50% 40%, #3b2a22, #170e0b 75%); width: 100%; height: 100%; display: grid; place-items: center; }
/* the set is sized by the height of its box, so it always fits whatever shape the box is */
.crt-set { height: 98cqh; aspect-ratio: 100 / 69; container-type: inline-size; }
.crt-bezel {
  position: relative; display: grid; grid-template-columns: 1fr 15%; gap: 3cqw; padding: 3.2cqw;
  background: linear-gradient(145deg, #d8cdb4, #a99d82 55%, #8c8068);
  border: 0.5cqw solid #000; border-radius: 5cqw / 4cqw; box-shadow: inset 0 0.6cqw 0 rgba(255, 255, 255, 0.35), 1.2cqw 1.6cqw 0 rgba(0, 0, 0, 0.45);
}
.crt-screen {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #0b0b0b; border: 0.9cqw solid #1a1a1a;
  border-radius: 6cqw / 5cqw; box-shadow: inset 0 0 6cqw 1cqw rgba(0, 0, 0, 0.85); container-type: inline-size;
}
.crt-screen .ad { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; text-align: center; padding: 3cqw 6cqw 11cqw; animation: crt-flicker 6s infinite; }
.ad { background: linear-gradient(180deg, #1f7a8c 0%, #2a3d8f 55%, #6b2d8f 100%); overflow: hidden; }
.ad-stripes { position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 9cqw, rgba(255, 255, 255, 0.07) 9cqw 18cqw); }
.ad > * { position: relative; }
.ad-title { margin: 0; display: grid; font-family: "Bungee", Impact, "Arial Black", system-ui, sans-serif; text-transform: uppercase; line-height: 0.92; transform: rotate(-4deg); }
.ad-title .t1 { font-size: 11cqw; color: #f2b632; -webkit-text-stroke: 0.5cqw #000; text-shadow: 1cqw 1cqw 0 #c4361f, 1.6cqw 1.6cqw 0 #000; }
.ad-title .t2 { font-size: 13.5cqw; color: #fff; -webkit-text-stroke: 0.5cqw #000; text-shadow: 1cqw 1cqw 0 #ff4f6a, 1.6cqw 1.6cqw 0 #000; }
.ad-sub { margin: 4cqw 0 0; padding: 0.8cqw 2.5cqw; background: #f2b632; color: #1a0e08; border: 0.5cqw solid #000; font: 400 4.6cqw/1.2 "Bungee", Impact, "Arial Black", sans-serif; text-transform: uppercase; transform: rotate(-1.5deg); box-shadow: 0.8cqw 0.8cqw 0 #000; }
.ad-bar { position: absolute !important; left: 0; right: 0; bottom: 0; margin: 0; padding: 1.2cqw 2cqw; background: #000; color: #ffd23f; font: 700 4.4cqw/1.2 Impact, "Arial Black", sans-serif; letter-spacing: 0.3em; text-align: center; text-transform: uppercase; white-space: nowrap; }
.ad-burst { position: absolute !important; top: 3cqw; right: 3cqw; width: 16cqw; height: 16cqw; display: grid; place-items: center; background: #ff4f6a; color: #fff; font: 400 4.6cqw/1 "Bungee", Impact, sans-serif; text-shadow: 0.3cqw 0.3cqw 0 #000; transform: rotate(14deg); clip-path: polygon(50% 0, 61% 14%, 79% 8%, 80% 27%, 98% 30%, 88% 46%, 100% 61%, 82% 69%, 85% 88%, 66% 84%, 55% 100%, 44% 85%, 25% 92%, 22% 73%, 3% 68%, 14% 52%, 2% 37%, 21% 30%, 22% 11%, 40% 16%); }
/* the glass: scanlines, a curved-screen vignette and a soft glare */
.crt-glass { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 32%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0 0.5cqw, transparent 0.5cqw 1cqw),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}
.crt-side { display: grid; align-content: space-between; justify-items: center; padding: 2cqw 0; }
.crt-side .dial { width: 7cqw; height: 7cqw; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #666, #1a1a1a); border: 0.4cqw solid #000; }
.crt-side .grill { width: 70%; height: 16cqw; background: repeating-linear-gradient(0deg, #2b261b 0 0.7cqw, transparent 0.7cqw 1.7cqw); border-radius: 1cqw; }
.crt-side .led { width: 2cqw; height: 2cqw; border-radius: 50%; background: #ff4f6a; box-shadow: 0 0 1.5cqw #ff4f6a; }
.crt-feet { display: flex; justify-content: space-between; padding: 0 12%; }
.crt-feet i { width: 12cqw; height: 2.4cqw; background: #2b261b; border: 0.4cqw solid #000; border-top: 0; border-radius: 0 0 1cqw 1cqw; }
@keyframes crt-flicker { 0%, 92%, 100% { opacity: 1; } 94% { opacity: 0.88; } 96% { opacity: 1; } 98% { opacity: 0.93; } }
@media (prefers-reduced-motion: reduce) { .crt-screen .ad { animation: none; } }