/* ==========================================================
   RetroTVPlayer.css
   ==========================================================
   COORDINATE SYSTEM
   The four vars below were measured directly from the supplied
   TV artwork (SVF_TV.png, 3120x1755px): the transparent "screen"
   cutout sits at left 14.6% / top 13.0%, and is 60.9% wide and
   60.6% tall of the full image. Tune these four numbers if you
   swap in a different TV image — nothing else needs to change.

   SCALING
   --tv-scale only resizes .tv-stage (the TV artwork + video) via
   .retro-tv's width. .tv-controls deliberately does NOT inherit
   that scale — it has its own fixed font-size, so the buttons
   stay a comfortable, constant size no matter how large or small
   you make the TV. If you DO want the controls to shrink/grow
   with the TV, remove the "font-size: 16px" override in
   .tv-controls below and it will inherit the scaled size again.
   ========================================================== */

.retro-tv {
  --tv-scale: 1;
  --screen-left: 14.6%;
  --screen-top: 13.0%;
  --screen-width: 60.9%;
  --screen-height: 60.6%;

  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  width: min(calc(720px * var(--tv-scale)), 96vw);
  font-family: 'Courier New', ui-monospace, monospace;
}

/* ---------- TV + screen ---------- */

.tv-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3120 / 1755; /* matches the source artwork exactly */
}

.tv-screen {
  position: absolute;
  left: var(--screen-left);
  top: var(--screen-top);
  width: var(--screen-width);
  height: var(--screen-height);
  overflow: hidden;
  background: #000;
  z-index: 1; /* below the frame artwork */
}

.tv-video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden; /* safety net in case the iframe is briefly unsized */
}

/* IMPORTANT: the YouTube IFrame API replaces #yt-target itself with a
   new <iframe> — the div (and its "tv-video-target" class) is gone
   afterward, so we can't select ".tv-video-target iframe". Instead we
   target any iframe that ends up inside .tv-video-wrap, which is one
   level up and survives the replacement. This iframe is forced to fill
   and overflow its 16:9 box so it always covers the (slightly
   non-16:9) screen cutout completely — any excess is cropped by
   .tv-screen's overflow:hidden, and any remainder disappears under the
   bezel above it. */
.tv-video-wrap iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none; /* clicks go to the retro buttons, not YouTube's own UI */
}

.tv-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2; /* above the screen — hides the video's rectangular edges */
  pointer-events: none;
  user-select: none;
}

/* ---------- Controls ---------- */

.tv-controls {
  display: flex;
  font-size: 16px; /* fixed — intentionally NOT scaled by --tv-scale */
  gap: 0.6em;
  margin-top: 0.9em;
  padding: 0.5em 0.7em;
  background: linear-gradient(180deg, #2a2a2e, #1a1a1c);
  border-radius: 0.25em;
  box-shadow:
    0 0.2em 0.4em rgba(0, 0, 0, 0.5),
    inset 0 0.06em 0 rgba(255, 255, 255, 0.08);
}

.tv-btn {
  appearance: none;
  border: none;
  cursor: pointer;
  width: 2.6em;
  height: 2.2em;
  border-radius: 0.15em; /* rectangular, not pill-shaped */
  background: linear-gradient(180deg, #4a4a4f 0%, #333336 55%, #262629 100%);
  box-shadow:
    0 0.18em 0 #111113,           /* mechanical "depth" under the key */
    0 0.25em 0.35em rgba(0, 0, 0, 0.55),
    inset 0 0.06em 0 rgba(255, 255, 255, 0.25),
    inset 0 -0.1em 0.15em rgba(0, 0, 0, 0.35);
  transform: translateY(0);
  transition: transform 60ms ease, box-shadow 60ms ease;
}

.tv-btn-face {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 1.05em;
  color: #e4e4e0;
  text-shadow: 0 0.06em 0.06em rgba(0, 0, 0, 0.6);
}

.tv-btn:hover {
  background: linear-gradient(180deg, #55555b 0%, #38383c 55%, #2a2a2d 100%);
}

.tv-btn:active,
.tv-btn[aria-pressed='true'] {
  transform: translateY(0.16em);
  box-shadow:
    0 0.02em 0 #111113,
    0 0.05em 0.1em rgba(0, 0, 0, 0.5),
    inset 0 0.1em 0.2em rgba(0, 0, 0, 0.55);
}

.tv-btn:focus-visible {
  outline: 0.15em solid #7fb3ff;
  outline-offset: 0.15em;
}

@media (max-width: 480px) {
  .tv-controls { gap: 0.4em; padding: 0.4em 0.5em; }
  .tv-btn { width: 2.3em; height: 2em; }
}