/* LOCKED TOKENS (ritual + ui-ux-pro-max: bubble shapes, energetic display face, never static; palette overridden to the assigned teal/orange lane)
   palette: teal #0A786B (sampled from the avatar bg) · teal-deep #064A44 · orange #FF7A1F · orange-deep #D9530B
            cream #F6EEDC · ink #141210 · yellow #FFD23F (rental sticker) · vfd #5FF2D6 (VCR display) · pink #F2A9A0 (cat nose)
   type: Luckiest Guy (bubble cartoon display) · VT323 (VCR on-screen timecode chrome) · Varela Round (body)
   spacing: 4 8 12 16 24 32 48 72 px · radius: 10 (VCR keys) 18 (bubble panels) 999 (pills)
   motion: one idiom, cartoon overshoot cubic-bezier(.34,1.56,.64,1) at 180ms; the head itself runs on the audio spring in app.js */
@font-face { font-family: 'Luckiest Guy'; src: url(fonts/luckiest-guy-latin-400-normal.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'VT323'; src: url(fonts/vt323-latin-400-normal.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Varela Round'; src: url(fonts/varela-round-latin-400-normal.woff2) format('woff2'); font-display: swap; }

:root {
  --teal: #0A786B; --teal-deep: #064A44; --orange: #FF7A1F; --orange-deep: #D9530B;
  --cream: #F6EEDC; --ink: #141210; --yellow: #FFD23F; --vfd: #5FF2D6; --pink: #F2A9A0;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --r-key: 10px; --r-bubble: 18px; --pop: cubic-bezier(.34, 1.56, .64, 1);
  --display: 'Luckiest Guy', 'Arial Black', sans-serif;
  --mono: 'VT323', 'Courier New', monospace;
  --body: 'Varela Round', 'Trebuchet MS', sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--teal-deep); color: var(--cream); font-family: var(--body); font-size: 17px; line-height: 1.55; overflow-x: hidden; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 3px dashed var(--yellow); outline-offset: 3px; }

/* whole-page VHS: fine scanlines + a slow rolling tracking band */
body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.07) 2px 3px); }
.tracking-band { position: fixed; left: 0; right: 0; top: 0; height: 46px; z-index: 51; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(246,238,220,.06) 40%, rgba(246,238,220,.13) 52%, rgba(246,238,220,.04) 60%, transparent);
  border-top: 1px solid rgba(246,238,220,.08); animation: roll 11s linear infinite; }
@keyframes roll { from { transform: translateY(-60px); } to { transform: translateY(110vh); } }

/* top bumper bar */
.bumper-bar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--s4);
  padding: var(--s2) var(--s5); background: var(--ink); font-family: var(--mono); font-size: 22px; letter-spacing: 1px;
  border-bottom: 4px solid var(--orange); }
.bumper-bar .chan { background: var(--orange); color: var(--ink); padding: 0 var(--s2); border-radius: 4px; }
.bumper-bar .brand { font-family: var(--display); font-size: 20px; color: var(--yellow); letter-spacing: 1px; padding-top: 3px; }
.bumper-bar .status { color: var(--vfd); margin-left: auto; }
.bumper-bar .clock { color: var(--cream); min-width: 10ch; text-align: right; }
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* hero: Saturday-morning bumper sunburst */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6);
  padding: var(--s6) var(--s4) var(--s7); overflow: hidden; isolation: isolate;
  background: repeating-conic-gradient(from -4deg at 32% 42%, var(--orange) 0 9deg, #FF8C3A 9deg 18deg); }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 32% 42%, rgba(255,210,63,.45), transparent 55%); }
@media (min-width: 920px) {
  .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; padding: var(--s7) var(--s7) var(--s8); gap: var(--s7); }
}

/* the TV set */
.tv { width: 100%; max-width: 580px; justify-self: center; background: #DCD2BF; border: 4px solid var(--ink);
  border-radius: 34px; padding: var(--s4) var(--s4) 0; box-shadow: 10px 10px 0 var(--ink); transform: rotate(-1.2deg); }
.tv-screen { position: relative; aspect-ratio: 1 / 1; border-radius: 26px / 30px; overflow: hidden; background: var(--teal);
  border: 4px solid var(--ink); box-shadow: inset 0 0 0 3px #2b2620; }
.stage { position: absolute; inset: 0; }
.stage-base { width: 100%; height: 100%; object-fit: cover; }
.head { position: absolute; left: 28.125%; top: 18.066%; width: 48.535%; height: auto;
  transform-origin: 50.7% 103.8%; will-change: transform; }
.head.ghost { opacity: 0; filter: sepia(1) hue-rotate(115deg) saturate(1.4) brightness(.92); }
.tv-screen.hit .head.main { filter: drop-shadow(3px 0 0 rgba(255, 60, 90, .45)) drop-shadow(-3px 0 0 rgba(95, 242, 214, .5)); }
.scanlines { position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 3px, rgba(0,0,0,.12) 3px 4px),
              radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.45) 100%); }
.osd { position: absolute; font-family: var(--mono); font-size: clamp(20px, 4.4vw, 30px); color: #fff; line-height: 1;
  text-shadow: 2px 2px 0 rgba(0,0,0,.6); pointer-events: none; }
.osd-tl { top: 5%; left: 6%; } .osd-tr { top: 5%; right: 6%; }
.osd-bl { bottom: 5%; left: 6%; } .osd-br { bottom: 5%; right: 6%; }
.insert-tape { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: var(--s1); padding-bottom: 16%; border: 0; background: linear-gradient(to top, rgba(6,74,68,.78), rgba(6,74,68,0) 55%);
  transition: opacity .25s; }
.insert-tape .it-big { font-family: var(--display); font-size: clamp(34px, 8vw, 54px); color: var(--yellow); letter-spacing: 1px;
  text-shadow: 3px 3px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink);
  animation: pulse 1.1s var(--pop) infinite alternate; }
.insert-tape .it-small { font-family: var(--mono); font-size: 22px; color: var(--cream); text-shadow: 1px 1px 0 var(--ink); }
.insert-tape:hover .it-big { color: #fff; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.07); } }
body.is-playing .insert-tape { opacity: 0; pointer-events: none; }
.tv-chin { display: flex; align-items: center; justify-content: space-between; padding: var(--s3) var(--s2) var(--s4); }
.tv-brand { font-family: var(--display); font-size: 18px; color: #6d6353; letter-spacing: 2px; }
.tv-led { width: 14px; height: 14px; border-radius: 50%; background: #5a1f10; border: 2px solid var(--ink); transition: background .05s; }
body.is-playing .tv-led { background: #a8360f; }
.tv-led.on { background: var(--orange) !important; box-shadow: 0 0 12px var(--orange); }

/* hero copy */
.hero-copy { color: var(--ink); max-width: 560px; justify-self: center; width: 100%; }
.kicker { font-family: var(--mono); font-size: 24px; margin: 0 0 var(--s2); display: inline-block; background: var(--ink); color: var(--yellow);
  padding: 2px var(--s3); border-radius: 6px; transform: rotate(-2deg); }
.wordmark { font-family: var(--display); font-weight: 400; font-size: clamp(64px, 16vw, 128px); line-height: .88; margin: var(--s3) 0 var(--s4);
  color: var(--cream); letter-spacing: 2px; -webkit-text-stroke: 3px var(--ink);
  text-shadow: 5px 5px 0 var(--ink), 10px 10px 0 var(--teal-deep); }
.wordmark span { display: inline-block; }
.wordmark span:first-child { color: var(--yellow); transform: rotate(-3deg); }
.sub { font-size: 19px; margin: 0 0 var(--s5); max-width: 32em; }
.deck { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); background: var(--ink); padding: var(--s3);
  border-radius: var(--r-bubble); box-shadow: 6px 6px 0 var(--teal-deep); }
.vcr-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--s3) var(--s1) var(--s2); min-height: 64px;
  background: #2c2824; border: 0; border-bottom: 5px solid #000; border-radius: var(--r-key); color: var(--cream);
  transition: transform .18s var(--pop), background .15s; }
.vcr-btn .glyph { font-size: 20px; color: var(--orange); line-height: 1; }
.vcr-btn .lbl { font-family: var(--mono); font-size: 20px; letter-spacing: 1px; }
.vcr-btn:hover { background: #3a342e; transform: translateY(-2px); }
.vcr-btn:active { transform: translateY(3px); border-bottom-width: 2px; }
.vcr-btn.play { background: var(--orange); color: var(--ink); }
.vcr-btn.play .glyph { color: var(--ink); }
body.is-playing .vcr-btn.play { background: var(--yellow); }
.deck-hint { font-size: 15px; margin: var(--s3) 0 var(--s4); }
.readouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin-bottom: var(--s5); }
.readout { background: #0B1F1C; border: 3px solid var(--ink); border-radius: var(--r-key); padding: var(--s2) var(--s3); display: flex; flex-direction: column; min-width: 0; }
.r-lbl { font-family: var(--mono); font-size: 16px; color: #3f8f80; letter-spacing: 1px; }
.r-val { font-family: var(--mono); font-size: 34px; color: var(--vfd); line-height: 1; text-shadow: 0 0 8px rgba(95,242,214,.5); }
.vu { display: flex; gap: 3px; align-items: flex-end; height: 34px; }
.vu i { flex: 1; height: 100%; background: #16352f; border-radius: 2px; }
.vu i.on { background: var(--vfd); } .vu i.hot { background: var(--orange); }

.cta-row { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: stretch; }
.tape-label { flex: 1 1 260px; min-width: 0; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 0 0 var(--s2);
  background: var(--cream); color: var(--ink); border: 3px solid var(--ink); border-radius: 8px; box-shadow: 6px 6px 0 var(--ink);
  transform: rotate(-1deg); overflow: hidden; transition: transform .18s var(--pop); }
.tape-label:hover { transform: rotate(0deg) scale(1.02); }
.tl-top { display: flex; justify-content: space-between; gap: var(--s2); background: var(--teal); color: var(--cream);
  font-family: var(--mono); font-size: 18px; padding: 2px var(--s3); border-bottom: 3px solid var(--ink); }
.tl-rewind { color: var(--yellow); }
.tl-ca { font-family: var(--mono); font-size: 24px; padding: var(--s1) var(--s3) 0; overflow-wrap: anywhere; line-height: 1.1; }
.tl-hint { font-size: 13px; padding: 0 var(--s3); color: #5d5446; }
.tape-label.copied .tl-hint { color: var(--teal); font-weight: bold; }
.buy { flex: 1 1 220px; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--s4) var(--s5);
  font-family: var(--display); font-size: 22px; letter-spacing: 1px; text-decoration: none; color: var(--cream); background: var(--teal);
  border: 3px solid var(--ink); border-radius: 999px; box-shadow: 6px 6px 0 var(--ink); transition: transform .18s var(--pop), box-shadow .18s; }
.buy:hover { transform: translate(-2px, -2px) rotate(-1.5deg); box-shadow: 9px 9px 0 var(--ink); }
.buy:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }

/* back of the VHS sleeve */
.sleeve { background: var(--cream); color: var(--ink); padding: var(--s7) var(--s4);
  background-image: linear-gradient(100deg, var(--teal) 0 var(--s5), transparent var(--s5)); }
.sleeve-inner { max-width: 1100px; margin: 0 auto; }
.sleeve-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); flex-wrap: wrap; }
.sleeve h2 { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 8vw, 72px); line-height: 1; margin: 0;
  color: var(--teal); text-shadow: 4px 4px 0 var(--orange); }
.rating { display: flex; align-items: center; gap: var(--s2); border: 3px solid var(--ink); padding: var(--s1) var(--s3) var(--s1) var(--s1); border-radius: 8px; background: #fff; }
.rating-v { font-family: var(--display); font-size: 34px; background: var(--ink); color: var(--cream); width: 48px; height: 48px;
  display: grid; place-items: center; border-radius: 4px; padding-top: 4px; }
.rating-t { font-family: var(--mono); font-size: 18px; line-height: 1; }
.sleeve-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
@media (min-width: 920px) { .sleeve-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s7); } .sleeve { padding: var(--s8) var(--s7); } }
.synopsis p { margin: 0 0 var(--s4); font-size: 18px; }
.synopsis h3 { font-family: var(--display); font-weight: 400; font-size: 28px; margin: var(--s5) 0 var(--s3); color: var(--orange-deep); letter-spacing: 1px; }
.features { list-style: none; padding: 0; margin: 0 0 var(--s5); display: grid; gap: var(--s2); }
.features li { position: relative; padding: var(--s2) var(--s3) var(--s2) 44px; background: #fff; border: 2px solid var(--ink); border-radius: var(--r-key); }
.features li::before { content: ''; position: absolute; left: 12px; top: 50%; width: 20px; height: 13px; margin-top: -7px;
  background: var(--ink); border-radius: 3px; box-shadow: inset 4px 3px 0 -1px var(--cream), inset -4px 3px 0 -1px var(--cream); }
.runtime { font-family: var(--mono); font-size: 20px !important; color: var(--teal-deep); }
.stills { display: grid; gap: var(--s5); align-content: start; }
.still { margin: 0; background: var(--ink); padding: var(--s2) var(--s2) var(--s3); border-radius: 6px; box-shadow: 8px 8px 0 var(--orange); }
.still.s1 { transform: rotate(2deg); max-width: 380px; justify-self: center; width: 100%; }
.still.s2 { transform: rotate(-1.5deg); }
.still img { border-radius: 3px; width: 100%; height: auto; }
.still figcaption { font-family: var(--mono); font-size: 20px; color: var(--cream); padding-top: var(--s2); }
.still figcaption span { color: var(--vfd); margin-right: var(--s2); }

/* footer: video club membership card */
.club { padding: var(--s7) var(--s4) var(--s6); display: flex; flex-direction: column; align-items: center; gap: var(--s5);
  background: var(--teal-deep) repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 12px, transparent 12px 24px); }
.card { width: 100%; max-width: 560px; background: var(--yellow); color: var(--ink); border: 4px solid var(--ink); border-radius: var(--r-bubble);
  padding: var(--s5); box-shadow: 10px 10px 0 var(--orange); transform: rotate(-1.5deg); position: relative; overflow: hidden; }
.card::after { content: ''; position: absolute; right: var(--s5); top: var(--s5); width: 80px; height: 26px; opacity: .8;
  background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 7px, transparent 7px 9px); }
.card-top { display: flex; gap: var(--s3); align-items: baseline; flex-wrap: wrap; padding-right: 96px; }
.card-title { font-family: var(--display); font-size: 26px; letter-spacing: 1px; }
.card-no { font-family: var(--mono); font-size: 20px; }
.card-member { font-family: var(--mono); font-size: 20px; line-height: 1.2; margin: var(--s3) 0 var(--s4); }
.card-links { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.link-x { display: inline-flex; align-items: center; gap: var(--s2); text-decoration: none; font-family: var(--mono); font-size: 22px;
  background: var(--cream); border: 3px solid var(--ink); border-radius: 999px; padding: 2px var(--s4) 2px var(--s1); transition: transform .18s var(--pop); }
.link-x img { width: 40px; height: 40px; }
.link-sticker { text-decoration: none; font-family: var(--display); font-size: 18px; letter-spacing: 1px; padding: var(--s2) var(--s4) 6px;
  border: 3px solid var(--ink); border-radius: 999px; transition: transform .18s var(--pop); }
.link-sticker.orange { background: var(--orange); } .link-sticker.yellow { background: var(--cream); }
.link-x:hover, .link-sticker:hover { transform: rotate(-4deg) scale(1.06); }
.rewind { font-family: var(--display); font-size: clamp(28px, 6vw, 44px); color: var(--vfd); margin: 0; letter-spacing: 2px; text-shadow: 3px 3px 0 var(--ink); }

@media (max-width: 480px) {
  body { font-size: 16px; }
  .bumper-bar { font-size: 18px; gap: var(--s2); padding: var(--s2) var(--s3); }
  .bumper-bar .brand { display: none; }
  .bumper-bar .clock { min-width: 0; }
  .tv { padding: var(--s3) var(--s3) 0; border-radius: 26px; box-shadow: 6px 6px 0 var(--ink); }
  .vcr-btn .lbl { font-size: 17px; }
  .r-val { font-size: 28px; }
  .r-lbl { font-size: 14px; }
  .wordmark { -webkit-text-stroke: 2px var(--ink); text-shadow: 3px 3px 0 var(--ink), 6px 6px 0 var(--teal-deep); }
}
@media (prefers-reduced-motion: reduce) {
  .tracking-band, .blink, .insert-tape .it-big { animation: none; }
  .tracking-band { display: none; }
  * { transition-duration: .01ms !important; }
}

/* Luckiest Guy's lowercase is erratic: every display-face element is set in caps */
.brand, .wordmark, .sleeve h2, .synopsis h3, .card-title, .link-sticker, .buy, .rewind, .it-big, .tv-brand { text-transform: uppercase; }
/* keep sleeve text clear of the teal spine stripe */
.sleeve { padding-left: calc(var(--s5) + var(--s4)); }
@media (min-width: 920px) { .sleeve { padding-left: var(--s7); } }