/* ---------- Base layout ---------- */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: #f7f7f7;
  color: #111;
}
.page { max-width: 900px; margin: 2rem auto; padding: 0 1rem 3rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* ---------- Variables ---------- */
:root {
  --tv-max-width: 720px;

  /* Screen box (normal mode only) — tune to fit PNG opening */
  --screen-left: 13%;
  --screen-top: 42%;
  --screen-width: 75%;
  --screen-height: 40%;
  --screen-radius: 5%;

  /* Play button position (normal mode: center of screen) */
  --play-left: calc(var(--screen-left) + var(--screen-width) / 2);
  --play-top:  calc(var(--screen-top)  + var(--screen-height) / 2);
}

/* ---------- TV wrapper ---------- */
.tv {
  position: relative;
  width: min(100%, var(--tv-max-width));
  width:200%!important;
  margin-left:-20%!important;
  margin-top:60px!important;
  margin-inline: auto;
  aspect-ratio: 600 / 700; /* approximate ratio of your overlay PNG */
  display: grid;
  place-items: center;
  user-select: none;
}
.tv-text {
 font-size:14px!important;
 text-align:center!important;
 width:200%!important;
 margin-left:-20%!important;
}
.tv-desktop {
display:none;	
}
@media(max-width:992px) {
	.tv-desktop {
	display:block;
	width:100%!important;
	margin-left:0%!important;
}
}

/* ---------- Screen + Video ---------- */
.screen {
  position: absolute;
  z-index: 10;                 /* video layer */
  overflow: hidden;
  background: #000;
}

/* Normal view → clip to TV opening using your variables */
.tv:not(:fullscreen) .screen {
  left: var(--screen-left);
  top: var(--screen-top);
  width: var(--screen-width);
  height: var(--screen-height);
  border-radius: var(--screen-radius);
  /* DEBUG while aligning:
  outline: 2px dashed rgba(255,0,128,.6);
  */
}

.screen video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
  position: relative;
  z-index: 10;
}

/* ---------- Overlay (TV frame) ---------- */
.tv .overlay {
  position: relative;          /* keep natural image sizing */
  width: 100%;
  height: auto;
  z-index: 20 !important;      /* above .screen/video */
  pointer-events: auto;        /* MUST receive clicks (for fullscreen) */
  display: block;
}

/* REMOVE base overlay fade (prevents double-fade flicker) */
/* .overlay:hover { opacity: 0.9; } */

/* ---------- Hover TV image (non-blocking, no flicker) ---------- */
/* Purely visual hover frame that never intercepts clicks */
.tv::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/tv-overlay-hover.png") center/contain no-repeat;
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 25;                 /* above video & base overlay, below button */
  pointer-events: none;        /* IMPORTANT: do not block clicks */
  /* Promote to its own layer to avoid repaint flicker */
  will-change: opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.tv:hover::after { opacity: 1; }

/* ---------- Play/Pause button (TOP) ---------- */
/* ---------- Play/Pause button (TOP) ---------- */
.tv .play {
  position: absolute;
  left: var(--play-left);
  top: var(--play-top);
  transform: translate(-50%, -50%);
  z-index: 30 !important;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
  opacity: 0;                  /* hidden by default */
  pointer-events: none;        /* don’t block clicks when hidden */
  transition: opacity .25s ease;
}

/* Show the button when hovering over the TV */
.tv:hover .play {
  opacity: 1;
  pointer-events: auto;
}

.tv .play .icon {
  width:50px;
  height: auto;
  display: block;
}
.tv .play .icon-pause { display: none; }
.tv.playing .play .icon-play { display: none; }
.tv.playing .play .icon-pause { display: block; }

/* ---------- FULLSCREEN: VIDEO ONLY (ULTRA-STRICT) ---------- */
/* Hide EVERYTHING inside .tv */
.tv:is(:fullscreen, :-webkit-full-screen) * {
  display: none !important;
}
/* Bring back only the .screen and its children */
.tv:is(:fullscreen, :-webkit-full-screen) .screen,
.tv:is(:fullscreen, :-webkit-full-screen) .screen * {
  display: block !important;
}
/* But inside .screen, show only the <video> */
.tv:is(:fullscreen, :-webkit-full-screen) .screen > :not(video) {
  display: none !important;
}
/* CRITICAL: hide the hover pseudo-element in fullscreen */
.tv:is(:fullscreen, :-webkit-full-screen)::after {
  content: none !important;
  display: none !important;
}

/* Expand the screen to the whole viewport */
.tv:is(:fullscreen, :-webkit-full-screen) .screen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
  z-index: 1 !important;
}

/* Make the video fill the viewport */
.tv:is(:fullscreen, :-webkit-full-screen) .screen > video {
  position: absolute !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  object-fit: cover !important; /* change to 'contain' for letterbox */
  background: #000 !important;
}

/* Optional: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tv::after { transition: none; }
}

/* --- Hover-only play button & hide while playing --- */
.tv .play { transition: opacity 0.3s ease; }
.tv.playing .play { opacity: 0; pointer-events: none; }
/* Desktop: reveal on hover even while playing */
@media (hover: hover) and (pointer: fine) {
  .tv:hover .play { opacity: 1; pointer-events: auto; }
}