.fx { position: fixed; inset: 0; pointer-events: none; }
.noise {
  z-index: 20;
  width: 100%;
  height: 100%;
  opacity: .045;
  mix-blend-mode: screen;
  image-rendering: pixelated;
}
.scan {
  z-index: 21;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px);
}
.vignette {
  z-index: 22;
  background: radial-gradient(ellipse at center, transparent 62%, rgba(5,12,50,.45) 100%);
}
.track {
  z-index: 23;
  top: -15vh;
  bottom: auto;
  height: 12vh;
  opacity: 0;
  filter: blur(2px);
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.18) 45%, rgba(255,255,255,.06) 60%, transparent);
}
.track.roll { animation: tracking-roll 1s linear 2; }
.track.roll-once { animation: tracking-roll 1s linear 1; }
@keyframes tracking-roll { from { top: -15vh; opacity: 1; } to { top: 110vh; opacity: 1; } }

.screen {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0 clamp(10px, 2.4vw, 24px);
  padding: calc(var(--pad) + env(safe-area-inset-top, 0px)) var(--pad) calc(var(--pad) * .8 + env(safe-area-inset-bottom, 0px));
  touch-action: pan-y;
}
.screen.blip { animation: screen-blip .35s steps(3); }
@keyframes screen-blip { 0% { filter: brightness(1.7); } 50% { filter: brightness(.6); } 100% { filter: brightness(1); } }
.osd {
  color: var(--osd);
  line-height: 1;
  text-shadow: 0 0 8px rgba(95,211,95,.45), 1px 0 rgba(184,50,42,.35);
}
.osd-state { grid-area: 1 / 1; font-size: var(--t-m); }
.channel-osd {
  grid-area: 1 / 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: var(--t-m);
  text-align: right;
}
.channel-osd strong { font-size: var(--t-xl); font-weight: 400; line-height: .76; }
.channel-osd .channel-name { max-width: 34ch; font-size: var(--t-s); line-height: .9; }
.channel-osd .channel-name:empty { display: none; }
.mute-osd {
  position: fixed;
  z-index: 24;
  bottom: 10vh;
  left: var(--pad);
  font-size: var(--t-m);
}
.clock-osd {
  position: fixed;
  z-index: 25;
  right: auto;
  bottom: calc(var(--pad) * .8 + env(safe-area-inset-bottom, 0px));
  left: var(--pad);
  font-size: var(--t-s);
}
.blink { animation: blink 1s steps(1,end) infinite; }
@keyframes blink { 50% { opacity: 0; } }

#main {
  grid-area: 2 / 1 / 3 / 4;
  align-self: center;
  justify-self: center;
  width: min(100%, 1000px);
  max-height: 100%;
  min-height: 0;
  padding: 2vh 0;
  overflow: auto;
  scrollbar-width: none;
}
#main::-webkit-scrollbar { display: none; }

#vcr-player-layer {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: #050608;
  opacity: 0;
  pointer-events: none;
}
#vcr-player-host { position: absolute; inset: 0; }
#vcr-player-layer iframe,
.vcr-local-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-width: 177.78vh;
  min-height: 100vh;
  border: 0;
  transform: translate(-50%, -50%);
  object-fit: cover;
  pointer-events: none;
}
.screen.vcr-playing #vcr-player-layer { opacity: 1; }
.screen.vcr-playing #main {
  position: fixed;
  z-index: 2;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
}
.screen.vcr-playing .channel-osd { display: none; }
.screen.vcr-playing > .vcr-play-sp,
.screen.vcr-playing > .osd-state,
.screen.vcr-playing > .clock-osd,
.screen.vcr-playing > .mute-osd {
  position: fixed;
  z-index: 25;
}
.screen.vcr-playing > .vcr-play-sp {
  top: calc(var(--pad) + env(safe-area-inset-top, 0px));
  right: var(--pad);
  bottom: auto;
  left: auto;
  display: block;
  color: var(--white);
  font-size: var(--t-m);
}
.screen.vcr-playing > .osd-state {
  top: calc(var(--pad) + env(safe-area-inset-top, 0px));
  left: var(--pad);
  right: auto;
  bottom: auto;
  font-size: var(--t-m);
}
.screen.vcr-stopping > .osd-state {
  top: 50%;
  right: auto;
  bottom: auto;
  z-index: 25;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--t-xl);
}
.screen.vcr-playing > .clock-osd {
  top: auto;
  right: auto;
  bottom: calc(var(--pad) + env(safe-area-inset-bottom, 0px));
  left: var(--pad);
  font-size: var(--t-m);
}
.screen.vcr-playing .vcr-view { position: fixed; inset: 0; }
.screen.vcr-playing .vcr-counter {
  position: fixed;
  top: auto;
  left: auto;
  right: var(--pad);
  z-index: 25;
  bottom: calc(var(--pad) + env(safe-area-inset-bottom, 0px));
  color: var(--white);
  font-size: var(--t-m);
  text-shadow: 0 2px 5px #000;
}
.vcr-credit {
  position: fixed;
  z-index: 25;
  top: auto;
  bottom: calc(var(--pad) + 2.2em + env(safe-area-inset-bottom, 0px));
  right: auto;
  left: var(--pad);
  max-width: 70vw;
  padding: .5em .7em;
  color: #fff;
  background: rgb(0 0 0 / 72%);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(12px, 1vw, 16px);
  font-weight: 800;
  line-height: 1.15;
  text-align: left;
  opacity: 0;
  visibility: hidden;
}
.vcr-credit.is-visible { opacity: 1; visibility: visible; }
.vcr-credit .credit-line { overflow-wrap: anywhere; text-align: left; }
.sound-unlock {
  position: fixed;
  z-index: 26;
  bottom: 8vh;
  top: auto;
  right: auto;
  left: 50%;
  padding: .2em .5em;
  color: var(--osd);
  background: rgb(5 6 8 / 75%);
  font-size: var(--t-m);
  transform: translateX(-50%);
  pointer-events: auto;
  white-space: nowrap;
}
@media (orientation: portrait) and (max-width: 700px) {
  #vcr-player-layer iframe,
  .vcr-local-video {
    width: 100vw;
    height: 56.25vw;
    min-width: 0;
    min-height: 0;
  }
}
#main:has(.commercial-view) {
  position: fixed;
  z-index: 0;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  min-height: 0;
  align-self: stretch;
  justify-self: stretch;
  padding: 0;
  overflow: hidden;
}
.screen:has(.commercial-view) > .osd:not(.clock-osd) {
  position: relative;
  z-index: 1;
}

#main:has(.vcr-view > .logo) {
  position: fixed;
  z-index: 0;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  min-height: 0;
  align-self: stretch;
  justify-self: stretch;
  padding: 0;
  overflow: hidden;
}
.screen:has(.vcr-view > .logo) > .osd:not(.clock-osd) {
  position: relative;
  z-index: 1;
}
#main:has(.vcr-view > .logo) .vcr-view {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.8vh, 18px);
  width: 100%;
  height: 100%;
  text-align: center;
}
#main:has(.vcr-view > .logo) .logo {
  position: relative;
  z-index: 0;
  inset: auto;
  width: min(78vmin, 680px);
  height: auto;
  max-width: none;
  object-fit: contain;
  object-position: center;
  transform: none;
  filter: none;
  animation: none;
}
#main:has(.vcr-view > .logo) .press,
#main:has(.vcr-view > .logo) .tag,
#main:has(.vcr-view > .logo) .deck-now {
  position: relative;
  z-index: 1;
  left: auto;
  width: max-content;
  max-width: calc(100vw - 2rem);
  padding: .2em .45em;
  background: rgba(0, 0, 0, .68);
  transform: none;
}
#main:has(.vcr-view > .logo) .press {
  position: relative;
  bottom: auto;
}
#main:has(.vcr-view > .logo) .tag {
  position: relative;
  bottom: auto;
}
.edge-channel {
  position: fixed;
  z-index: 26;
  top: 50%;
  right: max(4px, env(safe-area-inset-right, 0px));
  display: grid;
  gap: 2px;
  transform: translateY(-50%);
  opacity: .28;
  transition: opacity .2s ease;
}
.edge-channel:hover, .edge-channel:focus-within { opacity: .9; }
.edge-channel button {
  width: 32px;
  min-height: 30px;
  font-size: var(--t-s);
}
.edge-channel button:hover { color: var(--white); }

.landing { display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 3vh, 32px); text-align: center; }
.logo {
  display: block;
  width: clamp(200px, 34vw, 440px);
  height: auto;
  filter: drop-shadow(2px 0 rgba(184,50,42,.55)) drop-shadow(-2px 0 rgba(120,190,255,.55)) drop-shadow(0 0 18px rgba(244,246,255,.18));
  animation: logo-wobble 6s steps(1,end) infinite;
}
@keyframes logo-wobble {
  0%, 96% { transform: none; }
  97% { transform: translateX(3px) skewX(-2deg); }
  98% { transform: translateX(-2px); }
  99% { transform: none; }
}
.press { color: var(--osd); font-size: var(--t-l); text-shadow: 0 0 10px rgba(95,211,95,.5); }
.tag { color: var(--dim); font-size: var(--t-s); }
.title { margin-bottom: .2em; font-size: var(--t-xl); font-weight: 400; line-height: .9; }
.subline { color: var(--dim); font-size: var(--t-m); }
.snow-view {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 42vh;
  color: var(--dim);
  font-size: var(--t-xl);
  opacity: .9;
}

.vcr-view { display: grid; justify-items: center; gap: clamp(12px, 2vh, 20px); text-align: center; }
.vcr-view .logo { width: clamp(190px, 28vw, 360px); }
.vcr-error {
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: min(92vw, 460px);
  padding: 18px 22px;
  color: var(--white);
  background: rgb(5 6 8 / 88%);
  border: 1px solid rgb(255 255 255 / 35%);
  font-size: var(--t-s);
}
.vcr-error p { margin: 0; }
.vcr-error button {
  color: var(--osd);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.deck-now {
  color: var(--dim);
  font-size: var(--t-s);
  letter-spacing: .1em;
  opacity: .65;
}
.tape-picture, .broadcast-picture {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 720px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--black);
}
.tape-picture video, .broadcast-picture video, .tape-picture iframe, .broadcast-picture iframe {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}
.tape-picture .youtube-player, .broadcast-picture .youtube-player,
.tape-picture .youtube-fallback, .broadcast-picture .youtube-fallback {
  width: 100%;
  height: 100%;
  border: 0;
}
.picture-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--dim);
  background: repeating-linear-gradient(90deg, #d7d7d0 0 14%, #d8c143 14% 28%, #54a66d 28% 42%, #4a73aa 42% 57%, #7f5da6 57% 71%, #c56956 71% 85%, #ded7c7 85%);
  filter: saturate(.75) brightness(.82);
}
.picture-placeholder span { padding: .3em .6em; color: var(--white); background: rgba(0,0,0,.75); font-size: var(--t-s); }
.picture-credit {
  position: absolute;
  bottom: 4%;
  left: 4%;
  display: grid;
  color: var(--white);
  font-size: var(--t-s);
  line-height: .9;
  text-align: left;
   animation: credit-in .35s steps(2), credit-out .5s ease 5s forwards;
}
.picture-credit.deck-credit { bottom: 12%; }
.picture-credit span { color: var(--dim); }
@keyframes credit-in { from { transform: translateX(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes credit-out { to { opacity: 0; } }
.picture-rec { position: absolute; top: 3%; right: 3%; color: var(--red); font-size: var(--t-s); text-shadow: 0 0 8px rgba(184,50,42,.6); }
.play-osd { color: var(--osd); font-size: var(--t-s); }
.deck-play-osd {
  position: absolute;
  z-index: 2;
  bottom: 4%;
  left: 4%;
  color: #83d78a;
  font-family: monospace;
  font-size: clamp(.65rem, 1.4vw, 1rem);
  letter-spacing: .08em;
  text-shadow: 0 0 5px rgba(105, 255, 129, .65);
}
.preview-osd {
  position: absolute;
  z-index: 25;
  top: 2%;
  left: 2%;
  color: #ef625a;
  font-size: var(--t-s);
  text-shadow: 0 0 8px rgba(239, 62, 48, .7);
}
.deck-degraded .tape-picture { filter: contrast(1.06) saturate(.88); }
.vcr-prompt { color: var(--osd); font-size: var(--t-l); }
.vcr-meta { display: flex; width: 100%; justify-content: space-between; color: var(--dim); font-size: var(--t-s); }
.tape-loader {
  width: min(100%, 720px);
  aspect-ratio: 4 / 3;
  margin: 0 auto;
  background: var(--black);
}

.broadcast-view { display: grid; justify-items: center; gap: 10px; }
.broadcast-picture { max-height: 74vh; }
.broadcast-title { color: var(--dim); font-size: var(--t-m); text-align: center; }

.commercial-view { position: relative; display: block; width: 100%; height: 100%; }
.commercial-picture {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  overflow: hidden;
  background: #050608;
}
.commercial-picture video,
.commercial-picture iframe,
.commercial-picture .youtube-player,
.commercial-picture .youtube-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  object-position: center;
}
.commercial-bars {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.commercial-bars span:nth-child(1),
.commercial-bars span:nth-child(5) { background: #F4F6FF; }
.commercial-bars span:nth-child(2),
.commercial-bars span:nth-child(6) { background: #1E3DB8; }
.commercial-bars span:nth-child(3),
.commercial-bars span:nth-child(7) { background: #5FD35F; }
.commercial-bars span:nth-child(4) { background: #050608; }
.commercial-station-id {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 92%;
  padding: .3em .55em;
  transform: translate(-50%, -50%);
  background: #050608;
  color: #F4F6FF;
  font-size: clamp(16px, 3.3vw, 30px);
  font-weight: 400;
  letter-spacing: .08em;
  text-align: center;
  white-space: nowrap;
}
.commercial-apart {
  position: absolute;
  z-index: 2;
  right: max(2%, calc(env(safe-area-inset-right, 0px) + 8px));
  bottom: max(3%, calc(env(safe-area-inset-bottom, 0px) + 12px));
  left: max(2%, calc(env(safe-area-inset-left, 0px) + 8px));
  width: max-content;
  max-width: 96%;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: #5FD35F;
  font: inherit;
  font-size: clamp(12px, 2.8vw, 21px);
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 6px #050608;
  cursor: pointer;
}
.commercial-apart:hover,
.commercial-apart:focus-visible { color: #5FD35F; }

.shop-view {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  width: min(100%, 1100px);
  height: min(78vh, 760px);
  min-height: min(520px, calc(100dvh - 118px));
  margin: 0 auto;
  overflow: hidden;
  background: var(--black);
}
.shop-head {
  position: absolute;
  z-index: 5;
  top: 10px;
  right: clamp(12px, 2vw, 22px);
  left: clamp(12px, 2vw, 22px);
  display: flex;
  justify-content: space-between;
  color: var(--dim);
  font-size: var(--t-s);
}
.shop-video-verde .shop-head { justify-content: flex-end; }
.shop-stage { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; min-height: 0; overflow: hidden; background: var(--black); }
.shop-image { position: relative; z-index: 1; display: grid; grid-row: 1; place-items: center; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; padding: clamp(38px, 5vh, 46px) clamp(10px, 3vw, 30px) 8px; color: var(--white); font-size: var(--t-l); text-align: center; }
.shop-image img { display: block; width: auto; height: auto; max-width: 100%; max-height: min(43dvh, 500px); object-fit: contain; object-position: center; filter: saturate(.7); }
.shop-noise,
.shop-static {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}
.shop-noise {
  opacity: .1;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(244, 246, 255, .11) 3px 4px),
    repeating-linear-gradient(90deg, rgba(5, 6, 8, .12) 0 1px, transparent 1px 5px);
}
.shop-stage.sold-out .shop-noise { opacity: .06; }
.shop-static {
  z-index: 4;
  opacity: 0;
  background:
    repeating-linear-gradient(0deg, rgba(244, 246, 255, .88) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(5, 6, 8, .82) 5px 8px);
}
.shop-stage.is-blipping .shop-static { opacity: .82; }
.shop-stage.sold-out.is-blipping .shop-static { opacity: .16; }
.shop-copy {
  position: relative;
  z-index: 3;
  display: grid;
  grid-row: 2;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  gap: 4px clamp(12px, 3vw, 32px);
  min-height: clamp(120px, 18vh, 148px);
  padding: clamp(12px, 2vw, 22px);
  border-top: 3px solid var(--osd);
  background: var(--canal);
}
.shop-details { grid-column: 1; grid-row: 1; display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 2px; }
.shop-copy small { color: var(--dim); font-size: var(--t-s); }
.shop-copy h2 { margin: .02em 0; font-size: var(--t-l); font-weight: 400; line-height: .9; }
.shop-sub { margin: 0; color: var(--dim); font-size: var(--t-s); }
.cc-caption {
  display: inline-flex;
  align-items: center;
  gap: .55ch;
  width: max-content;
  margin-top: 5px;
  padding: 3px 7px 3px 4px;
  border: 1px solid rgba(244, 246, 255, .78);
  border-radius: 2px;
  background: rgba(5, 6, 8, .94);
  color: var(--white);
  font-size: var(--t-s);
  line-height: 1;
  letter-spacing: .04em;
  text-shadow: 0 0 5px rgba(244, 246, 255, .28);
}
.cc-caption-mark {
  display: inline-grid;
  min-width: 2.15em;
  min-height: 1.55em;
  place-items: center;
  border: 1px solid var(--osd);
  color: var(--osd);
  font-weight: 700;
  letter-spacing: .03em;
  text-shadow: 0 0 6px rgba(95, 211, 95, .45);
}
.price { color: var(--osd); font-size: var(--t-xl); line-height: .9; }
.shop-copy .price { grid-column: 2; grid-row: 1; justify-self: end; }
.price-sold { position: relative; display: inline-block; }
.price-sold::after { position: absolute; top: 50%; right: 0; left: 0; height: 2px; background: var(--white); content: ""; }
.phone { grid-column: 1; grid-row: 2; color: var(--dim); font-size: var(--t-s); }
.shop-action-stack { grid-column: 2; grid-row: 2; display: flex; min-width: 0; flex-direction: column; align-items: flex-end; gap: 5px; }
.shop-action-stack.form-open { grid-column: 1 / -1; align-items: stretch; }
.shop-action-stack.form-open .cc-caption { align-self: flex-end; }
.order { align-self: flex-end; padding: 0; border: 0; background: none; color: var(--osd); font: inherit; font-size: var(--t-m); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
.apartado-form { display: grid; width: 100%; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; }
.apartado-form label,
.apartado-form button { color: var(--osd); font: inherit; font-size: var(--t-s); white-space: nowrap; }
.apartado-form input { min-width: 0; padding: 2px 0; border: 0; border-bottom: 1px solid var(--dim); border-radius: 0; outline-offset: 3px; background: transparent; color: var(--white); font: inherit; font-size: var(--t-s); }
.apartado-form input::placeholder { color: var(--dim); opacity: 1; }
.apartado-form button { padding: 0; border: 0; background: transparent; cursor: pointer; }
.apartado-form button:disabled { opacity: .55; cursor: wait; }
.apartado-note,
.apartado-status { width: 100%; margin: 0; color: var(--dim); font-size: var(--t-s); line-height: 1; }
.apartado-status:empty { display: none; }
.shop-empty { color: var(--dim); font-size: var(--t-l); text-align: center; }

.guide-view { width: min(100%, 920px); background: #07124a; }
.guide-promo { padding: clamp(16px, 3vw, 30px); border-bottom: 3px solid var(--osd); background: linear-gradient(110deg, #1E3DB8, #0f1f7a); }
.guide-promo p { color: var(--dim); font-size: var(--t-m); }
.guide-promo h1 { margin: .1em 0; font-size: var(--t-xl); font-weight: 400; line-height: .8; }
.guide-grid-wrap { height: min(42vh, 420px); overflow: hidden; }
.guide-grid { animation: guide-scroll 28s linear infinite; }
.guide-grid-wrap:hover .guide-grid { animation-play-state: paused; }
.guide-row { display: grid; grid-template-columns: 7ch 5ch minmax(0, 1fr); gap: 1ch; padding: .35em clamp(12px, 2vw, 24px); border-bottom: 1px solid rgba(244,246,255,.09); color: var(--white); font-size: var(--t-m); }
.guide-row .time { color: var(--osd); }
.guide-row .channel { color: var(--dim); }
.guide-row a { text-decoration: underline; text-underline-offset: .18em; }
@keyframes guide-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.newsletter {
  position: fixed;
  z-index: 10;
  right: var(--pad);
  bottom: env(safe-area-inset-bottom, 0px);
  left: var(--pad);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1ch;
  width: min(calc(100% - 2 * var(--pad)), 920px);
  margin: 0 auto;
  padding: 12px clamp(12px, 2vw, 24px);
  color: var(--white);
  background: var(--black);
  font-size: var(--t-m);
}
.newsletter label { color: var(--dim); }
.newsletter input { min-width: 15ch; flex: 1; border: 0; border-bottom: 2px solid var(--dim); outline: 0; color: var(--white); background: transparent; }
.newsletter input:focus { border-color: var(--osd); }
.newsletter button { color: var(--osd); }
.newsletter-status { flex-basis: 100%; min-height: 1.2em; color: var(--dim); font-size: var(--t-s); }

.hint {
  position: fixed;
  z-index: 27;
  right: 50%;
  bottom: 20vh;
  max-width: calc(100% - 32px);
  padding: .3em .7em;
  color: var(--osd);
  background: rgba(5,6,8,.9);
  font-size: var(--t-m);
  transform: translateX(50%);
}
.whisper { position: fixed; z-index: 3; right: 0; bottom: 24vh; left: 0; opacity: 0; pointer-events: none; font-size: var(--t-l); text-align: center; transition: opacity 1.2s; }
.whisper.show { opacity: .85; }
.error-view { display: grid; justify-items: center; gap: 12px; color: var(--dim); font-size: var(--t-m); text-align: center; }
.error-view button { color: var(--osd); text-decoration: underline; }

.screen.haunt-mode { z-index: 1; }
.screen.haunt-mode .channel-osd,
.screen.haunt-mode .edge-channel { z-index: 2; }
.screen.haunt-mode .channel-osd { position: relative; }
.haunt-view {
  position: fixed;
  z-index: 0;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
  pointer-events: none;
}
.haunt-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  animation: haunt-jitter 7.5s steps(1, end) infinite;
}
.haunt-view[data-channel="53"] .haunt-video { scale: 1.8; }
.haunt-video-hidden { visibility: hidden !important; }
.haunt-static-band {
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  opacity: .42;
  background: repeating-linear-gradient(90deg, #eee 0 2px, transparent 2px 4px, #aaa 4px 7px, transparent 7px 9px);
}
.haunt-eject {
  position: absolute;
  z-index: 2;
  color: var(--osd);
  font-size: clamp(4rem, 18vw, 14rem);
  line-height: .85;
  text-shadow: 0 0 12px rgba(95,211,95,.65);
  animation: haunt-eject-flicker 900ms steps(1, end) 1;
}
.haunt-shake { animation: haunt-shake 120ms steps(1, end) 1; }
@keyframes haunt-jitter {
  0%, 42%, 44%, 76%, 78%, 100% { transform: translateY(0); }
  43%, 77% { transform: translateY(-1px); }
  45%, 79% { transform: translateY(1px); }
}
@keyframes haunt-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(var(--hit-x), var(--hit-y)); }
  45% { transform: translate(calc(var(--hit-x) * -.65), calc(var(--hit-y) * -.65)); }
  70% { transform: translate(calc(var(--hit-x) * .28), calc(var(--hit-y) * .28)); }
}
@keyframes haunt-eject-flicker {
  0%, 100% { opacity: 1; }
  30% { opacity: .18; }
  34%, 64% { opacity: 1; }
  68% { opacity: .45; }
}

@media (max-width: 700px) {
  .screen { grid-template-rows: auto minmax(0, 1fr) auto; }
  .channel-osd strong { font-size: clamp(42px, 13vw, 72px); }
  .channel-osd .channel-name { max-width: 29ch; font-size: clamp(12px, 3.5vw, 16px); }
  .shop-view { width: 100%; height: min(82vh, 760px); min-height: min(500px, calc(100dvh - 118px)); }
  .shop-image { padding: 36px 4px 4px; }
  .shop-image img { max-height: min(52dvh, 110vw, 500px); }
  .shop-copy { gap: 4px 8px; min-height: 108px; padding: 12px; }
  .shop-copy h2 { font-size: var(--t-m); }
  .shop-copy .price { font-size: var(--t-l); }
  .shop-action-stack { gap: 4px; }
  .apartado-form { gap: 6px; }
  .apartado-form label,
  .apartado-form input,
  .apartado-form button { font-size: var(--t-s); }
  .cc-caption { margin-top: 4px; padding: 2px 6px 2px 3px; }
  .guide-row { grid-template-columns: 6ch 4ch minmax(0, 1fr); font-size: var(--t-s); }
  .newsletter label { flex-basis: 100%; }
  .newsletter input { min-width: 12ch; }
}
@media (prefers-reduced-motion: reduce) {
  .logo,
  .guide-grid,
  .haunt-video,
  .haunt-shake,
  .haunt-eject { animation: none !important; }
}