/* ===================================================================
   RISK TAKER — drag-to-Vercel static site
   Swap art in /assets. Every slot has a CSS fallback so it ships empty.
   =================================================================== */

:root{
  --bg:#050805;
  --money:#3fae53;          /* falling-bill green */
  --panel:#11140d;
  --panel-edge:#3a4a2c;
  --olive:#cdd6b0;
  --ink:#e9efd9;

  /* ===== Prevue / TV-Guide "Program Guide" EPG palette ===== */
  --epg-cell:#5d7e91;       /* steel-blue cell fill */
  --epg-cell-dk:#3f5e72;    /* darker cell (channel col / icon) */
  --epg-hi:#a7c6d6;         /* raised bevel highlight (top/left) */
  --epg-lo:#243d4c;         /* sunken bevel shadow (bottom/right) */
  --epg-text:#f3eed8;       /* cream guide text */
  --epg-textsh:#16303d;     /* text drop-shadow */
  --epg-magenta:#b8479c;    /* highlighted-program magenta */
  --epg-teal:#3fa9a0;       /* highlighted-program teal */
  --epg-marble1:#2b2275;    /* cloudy blue marble (light) */
  --epg-marble2:#171052;    /* cloudy blue marble (dark) */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:#040604;
  color:var(--ink);
  font-family:'M PLUS Rounded 1c',sans-serif;
  overflow-x:hidden;
  position:relative;
}
/* dark vignette so the green pops */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 35%,#0a120a 0%,#040604 70%,#000 100%);
}

/* ===================== CRT / COMPOSITE-VIDEO LO-RES PASS =====================
   Full-screen overlay. backdrop-filter blurs EVERYTHING behind it (text, cells,
   TV, images) for the soft low-resolution tuner look, without disturbing layout
   or the fixed rail/mascot. Scanlines + faint RGB shift finish the old-TV feel. */
.crt{
  position:fixed;inset:0;z-index:9000;pointer-events:none;
  backdrop-filter:blur(0.8px) contrast(1.06) saturate(1.12) brightness(1.02);
  -webkit-backdrop-filter:blur(0.8px) contrast(1.06) saturate(1.12) brightness(1.02);
  /* horizontal scanlines */
  background:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.16) 0px, rgba(0,0,0,.16) 1px,
      rgba(0,0,0,0)   1px, rgba(0,0,0,0)   3px),
    /* faint vertical RGB phosphor stripes */
    repeating-linear-gradient(90deg,
      rgba(255,0,0,.035)  0px, rgba(0,255,0,.035) 1px,
      rgba(0,0,255,.035)  2px, rgba(0,0,0,0)      3px);
  mix-blend-mode:normal;
}
/* gentle flicker so it feels like a live signal */
@keyframes crtFlicker{ 0%,100%{opacity:1} 50%{opacity:.94} 92%{opacity:.97} }
.crt{animation:crtFlicker 5.5s ease-in-out infinite}

/* low-res RGB-bleed on the cream guide text (the blurry white-text look) */
.wordmark,.lore-title,.lore-body p,.stat b,.stat span,.ca-text,.ca-copy,
.rail-btn,.bubble,.slide .ph,.tv-screen-fallback,.lore-img-fallback,.mascot-fallback{
  text-shadow:
    0.7px 0 0 rgba(255,40,40,.55),
   -0.7px 0 0 rgba(40,150,255,.55),
    0 1px 1px rgba(8,6,30,.7);
}
/* keep the wordmark's chunky gold 3D, just add the chromatic bleed on top */
.wordmark{
  text-shadow:
    0.8px 0 0 rgba(255,60,60,.5), -0.8px 0 0 rgba(60,150,255,.5),
    0 2px 0 #b9791a, 0 4px 0 #8a5712, 0 6px 0 #5e3b0c,
    0 8px 14px rgba(0,0,0,.6);
}

img,video{display:block}
a{text-decoration:none;color:inherit}

/* ===================== MONEY RAIN ===================== */
.rain{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.bill{
  position:absolute;top:-12vh;width:46px;height:24px;border-radius:3px;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.35) 0 18%,transparent 19%),
    linear-gradient(160deg,#5ed074,#2c8c40);
  border:1px solid #1c5a2a;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  font:700 9px/1 'M PLUS Rounded 1c',sans-serif;color:#0c3b18;letter-spacing:1px;
  animation:fall linear infinite;
}
.bill::after{content:"$SPED"}
@keyframes fall{
  0%{transform:translateY(0) rotate(0deg);opacity:0}
  8%{opacity:1}
  100%{transform:translateY(118vh) rotate(540deg);opacity:.9}
}

/* ===================== RIGHT RAIL ===================== */
.rail{
  position:fixed;top:50%;right:18px;transform:translateY(-50%);
  z-index:30;display:flex;flex-direction:column;gap:10px;
}
/* Prevue/TV-Guide beveled cell buttons */
.rail-btn{
  position:relative;display:flex;align-items:center;gap:10px;
  min-width:130px;padding:11px 15px;border-radius:2px;
  font:700 13px/1 'M PLUS Rounded 1c',sans-serif;letter-spacing:1px;color:var(--epg-text);
  background:var(--epg-cell);
  border-top:3px solid var(--epg-hi);   border-left:3px solid var(--epg-hi);
  border-right:3px solid var(--epg-lo);  border-bottom:3px solid var(--epg-lo);
  text-shadow:1px 1px 0 var(--epg-textsh);
  transition:filter .12s ease,transform .07s ease;
}
.rail-btn:hover{filter:brightness(1.12)}
/* press = invert the bevel (cell looks pushed in) */
.rail-btn:active{
  transform:translateY(1px);
  border-top-color:var(--epg-lo);  border-left-color:var(--epg-lo);
  border-right-color:var(--epg-hi); border-bottom-color:var(--epg-hi);
}
.rail-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;flex:none;font-size:11px;color:var(--epg-text);
  background:var(--epg-cell-dk);
  border-top:2px solid var(--epg-hi);  border-left:2px solid var(--epg-hi);
  border-right:2px solid var(--epg-lo); border-bottom:2px solid var(--epg-lo);
  text-shadow:1px 1px 0 var(--epg-textsh);
}
/* BUY = the highlighted magenta program cell */
.rail-buy{background:var(--epg-magenta)}
.rail-buy .rail-ico{background:#8e2f78}

/* ===================== MASCOT ===================== */
.mascot{
  position:fixed;left:14px;bottom:0;z-index:30;
  width:215px;height:280px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
}
.bubble{
  background:var(--epg-magenta);color:var(--epg-text);
  font:700 12px/1 'M PLUS Rounded 1c',sans-serif;letter-spacing:.5px;
  text-shadow:1px 1px 0 var(--epg-textsh);
  padding:8px 12px;border-radius:2px;margin-bottom:8px;
  border-top:3px solid var(--epg-hi);   border-left:3px solid var(--epg-hi);
  border-right:3px solid var(--epg-lo);  border-bottom:3px solid var(--epg-lo);
  position:relative;white-space:nowrap;
}
.bubble::after{
  content:"";position:absolute;left:26px;bottom:-10px;
  border:8px solid transparent;border-top-color:var(--epg-lo);
}
.mascot-vid{width:205px;height:auto;max-height:235px;object-fit:contain;position:relative;z-index:2}
/* fallback shown behind the (empty) video */
.mascot-fallback{
  position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
  width:165px;height:205px;border:2px dashed #3a4a2c;border-radius:10px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font:700 11px/1.3 'M PLUS Rounded 1c',sans-serif;color:#5a6b40;letter-spacing:1px;z-index:1;
  background:rgba(10,16,8,.5);
}

/* ===================== SECTIONS ===================== */
section{position:relative;z-index:10;min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:40px 200px;}

/* ---------- HERO ---------- */
.wordmark{
  font-family:'M PLUS Rounded 1c',sans-serif;font-weight:900;
  font-size:clamp(48px,9vw,128px);line-height:.9;letter-spacing:2px;
  text-align:center;margin-bottom:26px;
  color:#ffd24a;
  text-shadow:
    0 2px 0 #b9791a, 0 4px 0 #8a5712, 0 6px 0 #5e3b0c,
    0 8px 14px rgba(0,0,0,.6);
  -webkit-text-stroke:2px #3a2606;
}
.tv-wrap{
  position:relative;width:min(90vw,720px);aspect-ratio:1/1;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.6));
}
.tv-frame{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
/* video sits in the transparent screen hole: L10.4 T11.2 R11.4 B29.3 of frame.
   width/height given explicitly so the <video> (a replaced element) actually
   fills the hole instead of falling back to its 300x150 intrinsic size. */
.tv-screen,.tv-screen-fallback{
  position:absolute;top:11.2%;left:10.4%;
  width:78.2%;height:59.5%;border-radius:6px 6px 10px 10px;
}
.tv-screen{z-index:2;object-fit:cover;background:transparent}
.tv-screen-fallback{
  z-index:1;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,#0b0b0b,#0b0b0b 12px,#141414 12px,#141414 24px);
  color:#4a5a36;font:700 18px/1 'M PLUS Rounded 1c',sans-serif;letter-spacing:2px;
}

/* ---------- LORE ---------- */
/* contract bar = beveled guide cell + magenta copy button */
.ca-bar{
  display:flex;align-items:stretch;gap:0;margin-bottom:30px;max-width:560px;width:100%;
  background:var(--epg-cell);overflow:hidden;
  border-top:3px solid var(--epg-hi);   border-left:3px solid var(--epg-hi);
  border-right:3px solid var(--epg-lo);  border-bottom:3px solid var(--epg-lo);
}
.ca-text{
  flex:1;padding:11px 14px;font:700 13px/1.4 'M PLUS Rounded 1c',sans-serif;letter-spacing:1px;
  color:var(--epg-text);text-shadow:1px 1px 0 var(--epg-textsh);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-self:center;
}
.ca-copy{
  border:none;border-left:3px solid var(--epg-lo);
  background:var(--epg-magenta);color:var(--epg-text);text-shadow:1px 1px 0 var(--epg-textsh);
  font:700 12px/1 'M PLUS Rounded 1c',sans-serif;letter-spacing:2px;padding:11px 18px;cursor:pointer;
}
.ca-copy:hover{filter:brightness(1.12)}

/* ---- Prevue/TV-Guide "Program Guide" panel ---- */
.lore-panel{
  display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:18px;
  max-width:980px;width:100%;padding:18px;
  /* cloudy blue marble */
  background:
    radial-gradient(120% 80% at 20% 0%,  rgba(120,110,210,.55) 0%, rgba(0,0,0,0) 55%),
    radial-gradient(100% 90% at 90% 100%,rgba(70,60,160,.5)  0%, rgba(0,0,0,0) 60%),
    radial-gradient(80% 70% at 60% 40%,  rgba(150,140,230,.30) 0%, rgba(0,0,0,0) 70%),
    linear-gradient(160deg,var(--epg-marble1),var(--epg-marble2));
  /* raised outer bevel like the guide chassis */
  border-top:3px solid var(--epg-hi);   border-left:3px solid var(--epg-hi);
  border-right:3px solid #0e0a33;        border-bottom:3px solid #0e0a33;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.lore-img{
  overflow:hidden;min-height:320px;position:relative;background:#0c0a30;
  border-top:3px solid var(--epg-lo);   border-left:3px solid var(--epg-lo);
  border-right:3px solid var(--epg-hi);  border-bottom:3px solid var(--epg-hi);
}
.lore-img-fallback{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,#1a1352,#1a1352 14px,#221a63 14px,#221a63 28px);
  color:#8f88c8;font:700 16px/1 'M PLUS Rounded 1c',sans-serif;letter-spacing:2px;
}
.lore-title{
  font:800 30px/1 'M PLUS Rounded 1c',sans-serif;letter-spacing:1px;color:var(--epg-text);
  text-shadow:2px 2px 0 var(--epg-textsh);margin-bottom:14px;
}
.lore-body p{font-size:14px;line-height:1.55;color:#e7e2f4;margin-bottom:11px;
  text-shadow:1px 1px 0 rgba(10,8,40,.6)}
.lore-body b{color:#fff}
/* stat block = grid of beveled guide cells */
.stats{
  margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.stat{
  background:var(--epg-cell);padding:9px 11px;display:flex;flex-direction:column;gap:4px;
  border-top:2px solid var(--epg-hi);   border-left:2px solid var(--epg-hi);
  border-right:2px solid var(--epg-lo);  border-bottom:2px solid var(--epg-lo);
}
.stat span{font:700 9px/1 'M PLUS Rounded 1c',sans-serif;letter-spacing:2px;color:#dfeaf2}
.stat b{font:700 15px/1 'M PLUS Rounded 1c',sans-serif;letter-spacing:1px;color:var(--epg-text);
  text-shadow:1px 1px 0 var(--epg-textsh)}
.stat .burn{color:#ffd24a}

/* ---------- GALLERY ---------- */
.gallery-section{padding-top:60px}
.carousel{position:relative;width:min(96vw,1000px);display:flex;align-items:center;justify-content:center}
.track{
  position:relative;width:100%;height:380px;perspective:1400px;
}
.slide{
  position:absolute;top:50%;left:50%;
  width:320px;height:320px;border-radius:3px;overflow:hidden;
  background:#0c0a30;
  border-top:3px solid var(--epg-hi);   border-left:3px solid var(--epg-hi);
  border-right:3px solid var(--epg-lo);  border-bottom:3px solid var(--epg-lo);
  transform:translate(-50%,-50%);
  transition:transform .4s cubic-bezier(.4,.0,.2,1),opacity .4s ease,filter .4s ease;
  cursor:pointer;will-change:transform;
}
.slide .ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,#1a1352,#1a1352 14px,#221a63 14px,#221a63 28px);
  color:#9b94d4;font:700 15px/1 'M PLUS Rounded 1c',sans-serif;letter-spacing:2px;
}
.slide img{width:100%;height:100%;object-fit:cover}
/* neighbors tuck BEHIND the active one, dimmed + "locked" looking */
.slide.side-left  {transform:translate(-50%,-50%) translateX(-150px) scale(.82);opacity:.5;filter:brightness(.5) saturate(.7);z-index:3}
.slide.side-right {transform:translate(-50%,-50%) translateX( 150px) scale(.82);opacity:.5;filter:brightness(.5) saturate(.7);z-index:3}
.slide.far-left   {transform:translate(-50%,-50%) translateX(-260px) scale(.66);opacity:.22;filter:brightness(.35) saturate(.5);z-index:2}
.slide.far-right  {transform:translate(-50%,-50%) translateX( 260px) scale(.66);opacity:.22;filter:brightness(.35) saturate(.5);z-index:2}
/* highlighted meme = the magenta "selected program" cell, beveled like the guide */
.slide.active{
  transform:translate(-50%,-50%) scale(1.12);opacity:1;filter:none;z-index:5;
  border-top:4px solid var(--epg-hi);   border-left:4px solid var(--epg-hi);
  border-right:4px solid var(--epg-lo);  border-bottom:4px solid var(--epg-lo);
  box-shadow:0 24px 60px rgba(0,0,0,.7),0 0 0 3px var(--epg-magenta),0 0 26px rgba(184,71,156,.45);
}
.slide.hidden{transform:translate(-50%,-50%) scale(.5);opacity:0;z-index:1;pointer-events:none}
/* arrows = beveled blue guide buttons */
.arrow{
  position:absolute;z-index:5;width:48px;height:48px;border-radius:3px;
  background:var(--epg-cell);color:var(--epg-text);font-size:26px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding-bottom:3px;
  border-top:3px solid var(--epg-hi);   border-left:3px solid var(--epg-hi);
  border-right:3px solid var(--epg-lo);  border-bottom:3px solid var(--epg-lo);
  text-shadow:1px 1px 0 var(--epg-textsh);
  transition:filter .12s,transform .07s;
}
.arrow:hover{filter:brightness(1.12);transform:scale(1.05)}
.arrow:active{
  transform:scale(.98) translateY(1px);
  border-top-color:var(--epg-lo);border-left-color:var(--epg-lo);
  border-right-color:var(--epg-hi);border-bottom-color:var(--epg-hi);
}
.arrow-left{left:-6px}
.arrow-right{right:-6px}

/* ===================== RESPONSIVE ===================== */
@media (max-width:900px){
  section{padding:40px 16px 90px}
  .rail{right:8px;gap:7px}
  .rail-btn{min-width:auto;padding:8px 10px;font-size:0}
  .rail-btn span:last-child{display:none}
  .rail-ico{font-size:13px}
  .mascot{width:120px;height:150px}
  .mascot-vid{width:108px}
  .mascot-fallback{width:92px;height:112px}
  .lore-panel{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .slide{width:74vw;height:74vw;max-width:300px;max-height:300px}
}