/* ═══════════ QUAGOO™ 1997 — QUAGOTRON 2000 ═══════════ */
:root{
  --q-purple:#5b1fa8;
  --q-purple-deep:#3c1070;
  --q-pink:#ff6ec7;
  --q-pink-hot:#ff3fa4;
  --q-yellow:#ffe14d;
  --q-cream:#fff3d6;
  --crt-green:#c8ffc8;
  --osd-font:'VT323','Courier New',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:#1a1a1d url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjQiPjxyZWN0IHdpZHRoPSI0IiBoZWlnaHQ9IjQiIGZpbGw9IiMxYTFhMWQiLz48cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSIjMjIyMjI2Ii8+PC9zdmc+);
  font-family:'Trebuchet MS',Verdana,sans-serif;
  overflow:hidden;
  cursor:crosshair;
}
.hidden{display:none!important}
.blink{animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* ═══ TV FRAME ═══ */
#tv{
  position:fixed;inset:0;
  padding:clamp(10px,2.2vw,26px);
  background:linear-gradient(160deg,#4a4a52,#232327 40%,#111 100%);
  box-shadow:inset 0 0 60px #000;
}
#screen{
  position:relative;width:100%;height:100%;
  background:#000;
  border-radius:2.2vw/2.8vw;
  overflow:hidden;
  box-shadow:inset 0 0 8vw rgba(0,0,0,.85), inset 0 0 2vw rgba(0,0,0,.6), 0 0 0 6px #0c0c0e, 0 0 22px rgba(120,60,255,.25);
}
.tv-brand{
  position:fixed;bottom:2px;left:50%;transform:translateX(-50%);
  color:#9a9aa4;font:700 11px/1 'Arial',sans-serif;letter-spacing:4px;
}
.tv-led{
  position:fixed;bottom:6px;right:34px;width:9px;height:9px;border-radius:50%;
  background:#2eff6a;box-shadow:0 0 8px #2eff6a;transition:.3s;
}
.tv-led.off{background:#ff3030;box-shadow:0 0 8px #ff3030}

/* ═══ CRT FX LAYERS ═══ */
.fx-scanlines{position:absolute;inset:0;pointer-events:none;z-index:60;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;}
.fx-aperture{position:absolute;inset:0;pointer-events:none;z-index:61;opacity:.5;
  background:repeating-linear-gradient(90deg,rgba(255,0,80,.05) 0 1px,rgba(0,255,120,.04) 1px 2px,rgba(60,80,255,.05) 2px 3px);}
.fx-vignette{position:absolute;inset:0;pointer-events:none;z-index:62;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.34) 88%,rgba(0,0,0,.7) 100%);}
.fx-flicker{position:absolute;inset:0;pointer-events:none;z-index:63;background:#fff;opacity:0;
  animation:flicker 4.2s infinite;}
@keyframes flicker{
  0%,93%,100%{opacity:0}
  94%{opacity:.025}95%{opacity:0}
  96.5%{opacity:.04}97%{opacity:0}
}
#staticCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:70;opacity:.06}
#trackingBand{position:absolute;left:0;right:0;height:46px;top:-60px;pointer-events:none;z-index:64;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.10) 30%,rgba(180,180,255,.16) 50%,rgba(255,255,255,.10) 70%,transparent);
  filter:blur(1px);}
#trackingBand.rolling{animation:trackroll 7s linear infinite}
@keyframes trackroll{0%{top:-60px}100%{top:110%}}
#powerOff{position:absolute;inset:0;background:#000;z-index:90}

/* ═══ OSD ═══ */
#osd{position:absolute;inset:0;pointer-events:none;z-index:75;
  font-family:var(--osd-font);color:var(--crt-green);
  text-shadow:0 0 6px rgba(120,255,120,.9),2px 0 0 rgba(255,0,0,.35),-2px 0 0 rgba(0,80,255,.35);}
.osd-left{position:absolute;top:2.2vh;left:3vw;font-size:clamp(20px,3vh,34px);display:flex;flex-direction:column;gap:.4vh}
.osd-right{position:absolute;top:2.2vh;right:3vw;font-size:clamp(20px,3vh,34px);display:flex;gap:14px}
.osd-chname{position:absolute;bottom:2.4vh;left:3vw;font-size:clamp(16px,2.4vh,26px);letter-spacing:2px}

/* ═══ GATE ═══ */
.gate{position:absolute;inset:0;z-index:40;background:#0000c8;
  background:repeating-linear-gradient(0deg,#0000c8 0 6px,#0000bb 6px 12px);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--osd-font);color:#fff;}
.gate-inner{padding:20px;max-width:680px}
.gate-osd{font-size:26px;color:var(--crt-green);margin-bottom:3vh;text-shadow:0 0 6px #7f7}
.gate-title{font-size:clamp(34px,7vw,64px);letter-spacing:8px;margin-bottom:3vh;
  text-shadow:3px 3px 0 #000,0 0 18px rgba(255,255,255,.5);}
.gate-box{border:4px double #fff;padding:22px;font-size:clamp(18px,2.6vw,26px);line-height:1.5;background:rgba(0,0,60,.4)}
.gate-q{margin-top:2vh;font-size:clamp(22px,3.4vw,34px);color:var(--q-yellow)}
.gate-btns{display:flex;gap:16px;justify-content:center;margin-top:2.4vh;flex-wrap:wrap}
.gate-legal{margin-top:3vh;font-size:15px;opacity:.7}

/* SMPTE bars */
#bars{position:absolute;inset:0;z-index:41}
.smpte{display:flex;height:75%}
.smpte div{flex:1}
.smpte div:nth-child(1){background:#c0c0c0}.smpte div:nth-child(2){background:#c0c000}
.smpte div:nth-child(3){background:#00c0c0}.smpte div:nth-child(4){background:#00c000}
.smpte div:nth-child(5){background:#c000c0}.smpte div:nth-child(6){background:#c00000}
.smpte div:nth-child(7){background:#0000c0}
.bars-msg{height:25%;background:#111;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--osd-font);font-size:clamp(20px,3.4vw,34px);letter-spacing:4px;text-align:center}
.bars-msg span{color:#ff3030;animation:blink 1s steps(2) infinite;font-size:.7em;margin-top:8px}

/* ═══ SITE SHELL ═══ */
#site{position:absolute;inset:0;z-index:10;background:
  radial-gradient(120% 90% at 50% 0%,#7a2fd0 0%,var(--q-purple) 34%,var(--q-purple-deep) 75%,#24073f 100%);}
.ticker{position:absolute;top:0;left:0;right:0;height:34px;z-index:20;overflow:hidden;
  background:linear-gradient(180deg,#ffe968,var(--q-yellow) 55%,#d9a900);
  border-bottom:3px solid var(--q-purple-deep);
  font:700 17px/34px 'Arial Black','Arial',sans-serif;color:var(--q-purple-deep);white-space:nowrap;}
.ticker-track{display:inline-block;padding-left:0;animation:tick 28s linear infinite}
@keyframes tick{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* spokesman peeking from bottom-left, behind channel content */
#spokesman{position:absolute;left:-2%;bottom:0;height:min(46vh,420px);z-index:1;
  transform:translateY(105%);transition:transform 1.1s cubic-bezier(.2,.8,.25,1);
  pointer-events:none;filter:drop-shadow(6px 10px 18px rgba(0,0,0,.5))}
#spokesman.in{transform:translateY(4%)}

.channel{position:absolute;inset:34px 0 0 0;display:none;z-index:2}
.channel.active{display:block}
.ch-scroll{height:100%;overflow-y:auto;overflow-x:hidden;padding:4.5vh 4vw 6vh;scrollbar-width:thin;scrollbar-color:var(--q-pink) var(--q-purple-deep)}
.ch-scroll::-webkit-scrollbar{width:14px}
.ch-scroll::-webkit-scrollbar-track{background:var(--q-purple-deep)}
.ch-scroll::-webkit-scrollbar-thumb{background:linear-gradient(var(--q-pink),var(--q-pink-hot));border:3px ridge #fff}

.ch-heading{font-family:'Bungee','Arial Black',sans-serif;color:var(--q-yellow);
  font-size:clamp(22px,4vw,40px);text-shadow:3px 3px 0 var(--q-purple-deep),6px 6px 0 rgba(0,0,0,.35);
  margin-bottom:3vh;letter-spacing:1px;}
.ch-heading span{display:block;font-family:'Trebuchet MS';font-size:.45em;color:var(--q-pink);letter-spacing:3px}
.ch-heading.small{font-size:clamp(16px,2.4vw,24px);margin:4vh 0 2vh}

/* ═══ CHUNKY BUTTONS ═══ */
.chunky-btn{
  font:900 clamp(15px,1.8vw,20px)/1 'Arial Black','Arial',sans-serif;
  padding:14px 26px;cursor:pointer;letter-spacing:1px;
  color:var(--q-purple-deep);
  background:linear-gradient(180deg,#fff,#e8e8f0 45%,#b8b8c8 55%,#dedee8);
  border:3px outset #f4f4ff;border-radius:10px;
  box-shadow:0 5px 0 #55557a,0 8px 14px rgba(0,0,0,.45);
  text-shadow:1px 1px 0 #fff;
  transition:transform .06s;
}
.chunky-btn:hover{filter:brightness(1.08) saturate(1.2)}
.chunky-btn:active{transform:translateY(4px);box-shadow:0 1px 0 #55557a}
.chunky-btn.yes{background:linear-gradient(180deg,#b6ffb6,#4ad04a 50%,#2a9a2a);color:#052e05;border-color:#8f8}
.chunky-btn.no{background:linear-gradient(180deg,#ffb6b6,#d04a4a 50%,#9a2a2a);color:#2e0505;border-color:#f88}
.chunky-btn.big-cta{display:block;margin:1.6vh auto;min-width:min(420px,80%);
  background:linear-gradient(180deg,#ff9ddb,var(--q-pink-hot) 50%,#c2187b);color:#fff;
  text-shadow:2px 2px 0 var(--q-purple-deep);border-color:#ffc0e5;font-size:clamp(18px,2.4vw,26px)}
.chunky-btn.big-cta.alt{background:linear-gradient(180deg,#ffee9d,var(--q-yellow) 50%,#c99b00);color:var(--q-purple-deep);text-shadow:1px 1px 0 #fff}
.chunky-btn.mini{padding:9px 14px;font-size:14px}

/* ═══ HERO (CH3) ═══ */
.hero{text-align:center;position:relative;padding-top:1vh}
.chrome-title{
  font-family:'Monoton','Arial Black',cursive;font-weight:400;
  font-size:clamp(52px,11vw,130px);letter-spacing:.06em;
  background:linear-gradient(180deg,#fdfdff 8%,#a8d8ff 30%,#4569c4 46%,#eef6ff 52%,var(--q-pink) 70%,#8a1fc9 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(3px 5px 0 rgba(40,6,80,.9)) drop-shadow(0 0 26px rgba(255,110,199,.65));
  animation:shimmer 5s ease-in-out infinite;
}
@keyframes shimmer{0%,100%{filter:drop-shadow(3px 5px 0 rgba(40,6,80,.9)) drop-shadow(0 0 18px rgba(255,110,199,.5))}
  50%{filter:drop-shadow(3px 5px 0 rgba(40,6,80,.9)) drop-shadow(0 0 40px rgba(255,225,77,.9))}}
.hero-sub{color:var(--q-cream);font:700 clamp(14px,2vw,22px) 'Trebuchet MS';letter-spacing:4px;margin:1vh 0 2vh}
.hero-stage{position:relative;display:inline-block}
#box3d{display:none;height:clamp(260px,48vh,470px);width:clamp(260px,48vh,470px);margin:0 auto;position:relative}
#box3d.ready{display:block;cursor:grab}
#box3d.grabbed{cursor:grabbing}
#box3d.ready::after{content:'';position:absolute;left:50%;bottom:4px;transform:translateX(-50%);
  width:58%;height:26px;background:radial-gradient(ellipse,rgba(0,0,0,.5),transparent 70%);z-index:-1}
#box3d canvas{width:100%!important;height:100%!important;display:block}
#heroBox{height:clamp(240px,44vh,430px);user-select:none;cursor:grab;
  filter:drop-shadow(0 24px 26px rgba(0,0,0,.55));
  animation:bob 3.4s ease-in-out infinite;}
#heroBox.grabbed{cursor:grabbing;animation:none}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-16px) rotate(2deg)}}
.drag-hint{color:var(--q-yellow);font:700 14px 'Comic Sans MS','Trebuchet MS';margin-top:.6vh;letter-spacing:2px}
.noshake{color:#fff;font:900 clamp(18px,2.6vw,28px) 'Arial Black';margin:1.6vh 0;
  text-shadow:0 0 12px var(--q-pink-hot),2px 2px 0 var(--q-purple-deep)}

.starburst{
  position:absolute;z-index:5;width:110px;height:110px;display:flex;align-items:center;justify-content:center;
  text-align:center;font:900 17px/1.05 'Arial Black';color:var(--q-purple-deep);
  background:var(--q-yellow);
  clip-path:polygon(50% 0%,61% 12%,77% 6%,80% 22%,96% 24%,90% 39%,100% 50%,90% 61%,96% 76%,80% 78%,77% 94%,61% 88%,50% 100%,39% 88%,23% 94%,20% 78%,4% 76%,10% 61%,0% 50%,10% 39%,4% 24%,20% 22%,23% 6%,39% 12%);
  animation:spinPulse 6s linear infinite;
}
@keyframes spinPulse{0%{transform:rotate(0) scale(1)}50%{transform:rotate(8deg) scale(1.12)}100%{transform:rotate(0) scale(1)}}
.sb-new{top:-10px;left:6vw;background:#ff4b4b;color:#fff;font-size:24px}
.sb-tv{top:60px;right:5vw;background:var(--q-yellow)}
.sb-spin{top:-24px;right:-24px;width:96px;height:96px;font-size:15px;background:var(--q-pink);color:#fff}

.home-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin:5vh 0}
.tile{background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.04));
  border:3px ridge var(--q-pink);border-radius:14px;padding:18px;cursor:pointer;color:#fff;transition:.15s;}
.tile:hover{transform:scale(1.04) rotate(-1deg);background:linear-gradient(160deg,rgba(255,110,199,.35),rgba(255,255,255,.08));box-shadow:0 0 22px rgba(255,110,199,.5)}
.tile-num{font-family:var(--osd-font);color:var(--crt-green);font-size:19px;text-shadow:0 0 6px #7f7}
.tile h3{font:900 19px 'Arial Black';margin:6px 0;color:var(--q-yellow)}
.tile p{font-size:14px;color:var(--q-cream)}

.site-footer{text-align:center;border-top:3px dashed var(--q-pink);padding-top:3vh}
.counter-wrap{color:var(--q-cream);font:700 15px 'Trebuchet MS';letter-spacing:2px}
.counter{display:inline-block;margin-left:10px;font-family:var(--osd-font);font-size:26px;color:#7cff7c;
  background:#000;padding:3px 10px;border:2px inset #666;letter-spacing:5px;cursor:pointer;
  text-shadow:0 0 8px #5f5}
.badges{display:flex;gap:10px;justify-content:center;margin:2.4vh 0;flex-wrap:wrap}
.badge88{width:96px;height:34px;display:flex;align-items:center;justify-content:center;text-align:center;
  font:700 9px/1.2 Verdana;color:#fff;background:linear-gradient(135deg,#555,#222);
  border:1px solid #999;letter-spacing:.5px}
.badge88.b2{background:linear-gradient(135deg,#003399,#001a4d)}
.badge88.b3{background:linear-gradient(135deg,#8a1fc9,#3c1070)}
.badge88.b4{background:linear-gradient(135deg,#c2187b,#6e0d45)}
.legal{color:rgba(255,243,214,.55);font-size:11px;max-width:700px;margin:0 auto 2vh;line-height:1.5}

/* ═══ CH4 · VCR PLAYER ═══ */
.vcr-wrap{max-width:560px;margin:0 auto;text-align:center}
.tape-label{display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:repeating-linear-gradient(45deg,#e8e0c8 0 12px,#ded6bc 12px 24px);
  color:#333;font:700 14px 'Courier New';padding:8px 12px;border-radius:6px 6px 0 0;
  border:2px solid #111;border-bottom:none}
.tape-reel{animation:reelspin 2s linear infinite;display:inline-block}
@keyframes reelspin{100%{transform:rotate(360deg)}}
.crt-player{position:relative;background:#000;border:2px solid #111;aspect-ratio:9/16;max-height:64vh;margin:0 auto;overflow:hidden}
.crt-player video{width:100%;height:100%;object-fit:contain;background:#000}
.player-osd{position:absolute;top:10px;left:12px;right:12px;display:flex;justify-content:space-between;
  font-family:var(--osd-font);font-size:24px;color:var(--crt-green);
  text-shadow:0 0 6px rgba(120,255,120,.9);pointer-events:none;z-index:3}
.player-noise{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.14) 0 2px,rgba(0,0,0,.2) 2px 4px)}
.player-noise.glitch{animation:vglitch .5s steps(3) infinite}
@keyframes vglitch{0%{opacity:.55;transform:translateY(0)}50%{opacity:.3;transform:translateY(8px) skewX(3deg)}100%{opacity:.6;transform:translateY(-6px)}}
.player-scanlines{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px)}
.vcr-controls{display:flex;gap:6px;justify-content:center;background:linear-gradient(180deg,#3a3a40,#1c1c20);
  padding:12px;border:2px solid #111;border-top:none;border-radius:0 0 10px 10px}
.vcr-btn{font:700 16px 'Arial';color:#ddd;background:linear-gradient(180deg,#55555e,#2a2a30);
  border:2px outset #666;border-radius:6px;padding:10px 14px;cursor:pointer;min-width:52px}
.vcr-btn:active{border-style:inset;transform:translateY(1px)}
.vcr-btn.play{background:linear-gradient(180deg,#ff9ddb,#c2187b);color:#fff;min-width:64px}
.vcr-btn.trk{font-family:var(--osd-font);font-size:18px}
.vcr-note{color:var(--q-yellow);font:700 13px 'Courier New';margin-top:1.4vh;letter-spacing:2px}
.scene-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;max-width:800px;margin:0 auto}
.scene-grid button{font:700 13px 'Courier New';padding:12px 8px;cursor:pointer;color:var(--q-cream);
  background:rgba(0,0,0,.35);border:2px ridge var(--q-pink);border-radius:8px;letter-spacing:1px;transition:.15s}
.scene-grid button:hover{background:var(--q-pink-hot);color:#fff}
.scene-grid button.now{background:var(--q-yellow);color:var(--q-purple-deep);border-color:#fff}

/* ═══ CH5 · PRODUCT ═══ */
.product-flex{display:flex;gap:4vw;flex-wrap:wrap;justify-content:center;align-items:flex-start}
.spinner-stage{position:relative;text-align:center;flex:0 1 420px}
#spinnerImg{height:clamp(280px,52vh,520px);user-select:none;cursor:grab;touch-action:pan-y;
  filter:drop-shadow(0 20px 24px rgba(0,0,0,.55))}
#spinnerImg.grabbed{cursor:grabbing}
.spin-controls{display:flex;gap:8px;justify-content:center;margin-top:1.6vh;flex-wrap:wrap}
.facts-panel{flex:0 1 340px;background:#fff;color:#000;border:2px solid #000;padding:14px 16px;
  font-family:'Helvetica','Arial',sans-serif;text-align:left;transform:rotate(.6deg);box-shadow:8px 10px 0 rgba(0,0,0,.35)}
.facts-panel h3{font:900 34px 'Arial Black';letter-spacing:-1px}
.facts-rule{height:1px;background:#000;margin:6px 0}
.facts-rule.thick{height:9px}
.facts-row{display:flex;justify-content:space-between;font-size:15px;padding:4px 0;border-bottom:1px solid #000}
.facts-row.big{font-size:19px}
.facts-fine{font-size:11px;line-height:1.4;padding:6px 0}
/* ═══ CH6 · ORDER ═══ */
.order-flex{display:flex;gap:4vw;flex-wrap:wrap;justify-content:center;align-items:flex-start}
.order-left{flex:0 1 300px;display:flex;justify-content:center}
.infomercial-img{width:100%;max-height:66vh;object-fit:contain;border:4px ridge var(--q-yellow);border-radius:8px;box-shadow:0 14px 30px rgba(0,0,0,.5)}
.order-right{flex:0 1 480px;text-align:center}
.price-tag{font:900 clamp(30px,4.6vw,52px) 'Arial Black';color:#fff;text-shadow:3px 3px 0 var(--q-purple-deep)}
.price-tag s{color:#ff8080;font-size:.55em;margin-right:12px}
.price-now{color:var(--q-yellow);animation:pricewobble 1.6s ease-in-out infinite;display:inline-block}
@keyframes pricewobble{0%,100%{transform:rotate(-3deg) scale(1)}50%{transform:rotate(3deg) scale(1.12)}}
.price-sh{font-size:.35em;color:var(--q-cream);margin-left:8px}
.wait-more{color:var(--q-yellow);font:900 clamp(17px,2.4vw,24px) 'Arial Black';margin:1.4vh 0 .6vh}
.more-copy{color:var(--q-cream);font-size:15px;max-width:420px;margin:0 auto}
#urgencyTimer{font-family:var(--osd-font);color:#ff5c5c;font-size:1.3em}
.phone-number{display:block;font:900 clamp(26px,4.4vw,46px)/1.2 'Arial Black';color:#fff;text-decoration:none;
  margin:2vh 0 .4vh;letter-spacing:1px;
  text-shadow:0 0 16px var(--q-pink-hot),3px 3px 0 var(--q-purple-deep);
  animation:blink 1.2s steps(2) infinite}
.order-form{margin-top:3.4vh;background:rgba(0,0,0,.3);border:3px ridge var(--q-yellow);border-radius:12px;
  padding:18px;text-align:left;color:var(--q-cream)}
.order-form h3{font:900 15px 'Arial Black';color:var(--q-yellow);text-align:center;margin-bottom:12px;letter-spacing:1px}
.order-form label{display:block;font:700 13px 'Courier New';letter-spacing:1px;margin:10px 0}
.order-form input,.order-form select{display:block;width:100%;margin-top:4px;padding:9px;font:700 15px 'Courier New';
  background:#0b0518;color:#7cff7c;border:2px inset #777;border-radius:4px}
.order-form .chunky-btn{display:block;margin:16px auto 6px}
.form-fine{font-size:11px;text-align:center;opacity:.65}

/* ═══ CH7 · FRANCHIZE ═══ */
.fran-flex{display:flex;gap:4vw;flex-wrap:wrap;justify-content:center;align-items:flex-start}
.fran-img{flex:0 1 340px;width:min(340px,90vw);border:4px ridge var(--q-pink);border-radius:8px;box-shadow:0 14px 30px rgba(0,0,0,.5)}
.fran-copy{flex:0 1 480px;color:var(--q-cream);font-size:16px;line-height:1.6}
.chrome-sub{font-family:'Bungee','Arial Black',sans-serif;font-size:clamp(24px,3.6vw,36px);
  background:linear-gradient(180deg,#fff 20%,#9db8ff 45%,#3a57b0 50%,#e8f0ff 55%,#c0cfff 80%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(2px 3px 0 rgba(20,10,60,.8));margin-bottom:1.4vh}
.fran-list{list-style:none;margin:1.6vh 0}
.fran-list li{padding:5px 0;font-weight:700;color:#fff}
.dialup{margin-top:1.6vh;background:#000;border:2px inset #666;padding:14px;border-radius:6px;
  font-family:var(--osd-font);color:#7cff7c;font-size:20px;text-shadow:0 0 6px #5f5}
.dialup-bar{height:18px;background:#111;border:1px solid #444;margin-top:10px}
#dialupProgress{height:100%;width:0%;background:repeating-linear-gradient(90deg,#7cff7c 0 14px,#39a039 14px 28px);transition:width .3s}

/* ═══ CH8 · DEALER NETWORK ═══ */
.map-panel{max-width:860px;margin:0 auto 4vh;border:4px ridge var(--q-pink);border-radius:12px;
  overflow:hidden;box-shadow:0 14px 30px rgba(0,0,0,.5);background:#060314}
.map-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;
  padding:8px 14px;background:linear-gradient(180deg,#1a0a33,#0d0520);
  font-family:var(--osd-font);font-size:17px;color:var(--crt-green);letter-spacing:2px;
  border-bottom:2px solid var(--q-purple);text-shadow:0 0 6px rgba(120,255,120,.7)}
.map-live{color:#ff5c5c;text-shadow:0 0 8px #f55}
#coverageMap{display:block;width:100%;height:auto}
.zone{cursor:pointer}
.zone-dot{fill:var(--q-yellow);stroke:#fff;stroke-width:2.5}
.zone-ping{fill:none;stroke:var(--q-yellow);stroke-width:3;animation:ping 1.8s ease-out infinite}
@keyframes ping{0%{r:12;opacity:1}100%{r:52;opacity:0}}
.zone-glow{animation:zoneglow 3s ease-in-out infinite}
@keyframes zoneglow{0%,100%{opacity:.65}50%{opacity:1}}
.zone-label{fill:#fff;font:700 20px 'Courier New',monospace;letter-spacing:2px;
  paint-order:stroke;stroke:#060314;stroke-width:5}
.zone:hover .zone-dot{fill:#fff}
.zone.dim{opacity:.25}
.truck-emoji{font-size:34px;text-anchor:middle}
.truck-label{text-anchor:middle;fill:var(--q-yellow)}
#terpTruck{animation:truckroam 26s ease-in-out infinite}
@keyframes truckroam{
  0%{transform:translate(700,470)}18%{transform:translate(520,480)}
  38%{transform:translate(330,430)}52%{transform:translate(430,300)}
  70%{transform:translate(620,260)}86%{transform:translate(760,340)}
  100%{transform:translate(700,470)}}
.map-note{fill:rgba(255,243,214,.5);font:15px 'Courier New',monospace;text-anchor:middle;letter-spacing:1px}
.vendor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;max-width:980px;margin:0 auto}
.vendor{position:relative;display:block;background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.03));
  border:3px ridge var(--q-pink);border-radius:12px;padding:16px 14px 14px;text-decoration:none;transition:.15s}
.vendor:hover{transform:scale(1.045) rotate(-.8deg);background:linear-gradient(160deg,rgba(255,110,199,.4),rgba(255,255,255,.08));
  box-shadow:0 0 22px rgba(255,110,199,.55)}
.vendor b{display:block;font:900 17px 'Arial Black';color:var(--q-yellow);margin-bottom:2px}
.vendor i{display:block;font:700 15px 'Courier New';font-style:normal;color:#7cff7c;text-shadow:0 0 6px rgba(120,255,120,.6)}
.vendor em{position:absolute;right:12px;bottom:10px;font:900 13px 'Arial Black';font-style:normal;color:#fff;
  background:linear-gradient(180deg,var(--q-pink),#c2187b);padding:4px 10px;border-radius:8px;border:2px outset #ffc0e5}
.v-tag{position:absolute;top:-11px;left:12px;font:900 11px 'Arial Black';color:var(--q-purple-deep);
  background:var(--q-yellow);padding:3px 9px;border-radius:6px;border:2px solid var(--q-purple-deep);letter-spacing:1px}
.vendor.hide{display:none}

/* ═══ REMOTE ═══ */
#remote{position:fixed;right:18px;bottom:18px;z-index:200;width:150px;
  background:linear-gradient(170deg,#3c3c44,#191921);border-radius:18px;padding:12px;
  border:2px solid #0a0a0e;box-shadow:0 10px 26px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.15);
  user-select:none}
.remote-top{text-align:center;font:900 13px 'Arial Black';color:var(--q-pink);letter-spacing:1px;margin-bottom:8px}
.remote-top span{font:700 7px Verdana;color:#999;letter-spacing:2px}
.r-btn{font:700 13px 'Arial';color:#eee;background:linear-gradient(180deg,#55555e,#26262c);
  border:2px outset #666;border-radius:8px;padding:8px 0;cursor:pointer;width:100%}
.r-btn:active{border-style:inset}
.r-btn.power{background:linear-gradient(180deg,#e04b4b,#8a1515);border-color:#f88;margin-bottom:8px}
.r-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:8px}
.r-btn.num{font-family:var(--osd-font);font-size:17px}
.r-btn.num.now{background:linear-gradient(180deg,#ffe968,#c99b00);color:#2b2000;border-color:#ffd}
.r-rocker{display:grid;gap:6px}
.r-btn.ch{background:linear-gradient(180deg,#7a2fd0,#3c1070);border-color:#a6f}

/* ═══ MODAL ═══ */
#modal{position:fixed;inset:0;z-index:300;background:rgba(0,0,20,.72);display:flex;align-items:center;justify-content:center}
.modal-box{background:repeating-linear-gradient(0deg,#0000c8 0 6px,#0000bb 6px 12px);
  border:4px double #fff;color:#fff;font-family:var(--osd-font);font-size:clamp(19px,2.6vw,26px);
  padding:28px;max-width:520px;text-align:center;line-height:1.5;box-shadow:0 0 60px rgba(0,0,200,.6)}
.modal-box .chunky-btn{margin-top:18px}

/* ═══ CREDIT ═══ */
#siteCredit{color:rgba(255,243,214,.55);text-decoration:none}
#siteCredit b{color:rgba(255,110,199,.6);font-weight:700}
#siteCredit:hover{color:rgba(255,243,214,.9)}
#siteCredit:hover b{color:var(--q-pink)}

/* ═══ SPARKLES ═══ */
.spark{position:fixed;z-index:400;pointer-events:none;font-size:13px;
  animation:sparkfall 0.9s ease-out forwards;color:var(--q-yellow);text-shadow:0 0 6px var(--q-pink)}
@keyframes sparkfall{0%{opacity:1;transform:translateY(0) scale(1) rotate(0)}
  100%{opacity:0;transform:translateY(34px) scale(.3) rotate(120deg)}}
.boxrain{position:fixed;z-index:399;pointer-events:none;top:-140px;
  animation:boxfall linear forwards}
@keyframes boxfall{100%{transform:translateY(120vh) rotate(360deg)}}

/* ═══ POWER ANIM ═══ */
#powerOff.collapsing{animation:crtoff .45s ease-in forwards;background:#fff}
@keyframes crtoff{0%{clip-path:inset(0 0 0 0);opacity:.9}
  60%{clip-path:inset(49.5% 0 49.5% 0);opacity:1}
  100%{clip-path:inset(49.5% 49.5% 49.5% 49.5%);opacity:0}}
#powerOff.on-static{background:#000}

/* small screens */
@media(max-width:700px){
  #remote{transform:scale(.8);right:4px;bottom:4px;transform-origin:bottom right}
  .osd-left,.osd-right{font-size:18px}
  /* starbursts: shrink + move above the title so they never cover it */
  .hero{padding-top:78px}
  .starburst{width:68px;height:68px;font-size:10px}
  .sb-new{font-size:14px;top:2px;left:2vw}
  .sb-tv{top:2px;right:2vw}
  /* spokesman: on phones bring him in front of the page (still under the CRT
     overlay, still click-through) and shrink him to a corner peek */
  #spokesman{z-index:40;height:min(34vh,300px);left:-6%}
  #spokesman.in{transform:translateY(10%)}
}