/* ============================================================================
 * fms-screen.css  —  structure + state ONLY. Look is 100% yours via variables.
 * ----------------------------------------------------------------------------
 * Override any of these on a page, a room, or a single screen. Examples:
 *
 *   :root{ --fms-screen-radius:14px; --fms-screen-play-color:#f6d68a; }
 *   .page-comedy .fms-screen{ --fms-screen-frame-image:url("...bezel.png"); }
 *
 * VARIABLES (defaults in parens):
 *   --fms-screen-ratio (16/9)         aspect ratio
 *   --fms-screen-bg (#000)            backing behind the video/poster
 *   --fms-screen-radius (0)           corner rounding
 *   --fms-screen-frame-image (none)   OPTIONAL overlay bezel PNG (transparent center) — YOUR ornate TV frame
 *   --fms-screen-frame-inset (0)      pull the video in from the frame edge (e.g. 6%)
 *   --fms-screen-play-size (72px)     play button diameter
 *   --fms-screen-play-color (#fff)    glyph color
 *   --fms-screen-play-bg (rgba(0,0,0,.45))   play button backing
 *   --fms-screen-play-image (none)    OPTIONAL custom play-button image (replaces the CSS triangle)
 * ========================================================================== */

.fms-screen {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--fms-screen-ratio, 16 / 9);
  background: var(--fms-screen-bg, #000);
  border-radius: var(--fms-screen-radius, 0);
  overflow: hidden;
  isolation: isolate;
}

/* poster, media, and the injected player all fill the inner area (inside any frame inset) */
.fms-screen__poster,
.fms-screen__media {
  position: absolute;
  inset: var(--fms-screen-frame-inset, 0);
  width: auto;
  height: auto;
  right: var(--fms-screen-frame-inset, 0);
  bottom: var(--fms-screen-frame-inset, 0);
  border: 0;
}
.fms-screen__poster { object-fit: cover; z-index: 1; }
.fms-screen__media  { z-index: 2; }
.fms-screen__media  { inline-size: calc(100% - 2 * var(--fms-screen-frame-inset, 0px));
                      block-size: calc(100% - 2 * var(--fms-screen-frame-inset, 0px)); }
.fms-screen__poster { inline-size: calc(100% - 2 * var(--fms-screen-frame-inset, 0px));
                      block-size: calc(100% - 2 * var(--fms-screen-frame-inset, 0px)); }

/* OPTIONAL overlay frame — your bezel art sits ON TOP, video shows through its transparent center */
.fms-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background-image: var(--fms-screen-frame-image, none);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* play button (centered) */
.fms-screen__play {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--fms-screen-play-size, 72px);
  height: var(--fms-screen-play-size, 72px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: var(--fms-screen-play-bg, rgba(0, 0, 0, .45));
  color: var(--fms-screen-play-color, #fff);
  display: grid;
  place-items: center;
  transition: transform .15s ease, background .15s ease;
}
.fms-screen__play:hover { transform: translate(-50%, -50%) scale(1.06); }
.fms-screen__play:focus-visible { outline: 2px solid var(--fms-screen-play-color, #fff); outline-offset: 3px; }

/* default glyph = a CSS play triangle; replace entirely with --fms-screen-play-image if you want */
.fms-screen__play-glyph {
  width: 0; height: 0;
  margin-left: 15%;
  border-style: solid;
  border-width: calc(var(--fms-screen-play-size, 72px) * .22) 0
                calc(var(--fms-screen-play-size, 72px) * .22)
                calc(var(--fms-screen-play-size, 72px) * .34);
  border-color: transparent transparent transparent currentColor;
}
.fms-screen__play[style*="--fms-screen-play-image"] .fms-screen__play-glyph,
.fms-screen--img-play .fms-screen__play-glyph { display: none; }
.fms-screen--img-play .fms-screen__play {
  background: var(--fms-screen-play-image, none) center / contain no-repeat;
}

/* once playing, hide the poster + button */
.fms-screen.is-playing .fms-screen__poster,
.fms-screen.is-playing .fms-screen__play { display: none; }