/* RAMA reel: scoped player controls. Load after the existing site stylesheet. */
#reel-dialog {
  --reel-white: #fff;
  --reel-track: rgb(255 255 255 / 0.3);
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 40px 0;
  border: 0;
  background: transparent;
  color: var(--reel-white);
  overflow: auto;
  overscroll-behavior: contain;
}

#reel-dialog[open] { display: grid; place-items: center; }
#reel-dialog::backdrop { background: rgb(0 0 0 / 0.94); }
#reel-dialog *, #reel-dialog *::before, #reel-dialog *::after { box-sizing: border-box; }
#reel-dialog [hidden] { display: none !important; }

#reel-dialog .reel-player {
  position: relative;
  display: block;
  width: min(92vw, calc((100dvh - 80px) * 1.777778));
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0;
  background: #000;
  color: #fff;
  line-height: 1;
  isolation: isolate;
}

#reel-dialog .reel-player:focus { outline: none; }
#reel-dialog #reel-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: contain;
  background: #000;
}

#reel-dialog button {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#reel-dialog button svg { display: block; width: 22px; height: 22px; pointer-events: none; }
#reel-dialog button:focus-visible,
#reel-dialog input:focus-visible,
#reel-dialog a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
#reel-dialog button:disabled { opacity: 0.45; cursor: default; }

#reel-dialog .reel-close {
  position: absolute;
  z-index: 6;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  background: rgb(0 0 0 / 0.48);
  border-radius: 50%;
}

#reel-dialog .reel-close svg { width: 25px; height: 25px; }
#reel-dialog .reel-center-play {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: none;
  width: 64px;
  height: 64px;
  padding: 18px;
  border: 1px solid rgb(255 255 255 / 0.5);
  border-radius: 50%;
  background: rgb(0 0 0 / 0.58);
  transform: translate(-50%, -50%);
}

#reel-dialog .is-paused .reel-center-play:not([hidden]) { display: grid; }
#reel-dialog .is-buffering .reel-center-play { display: none; }
#reel-dialog .reel-center-play svg { width: 26px; height: 26px; margin-left: 3px; }

#reel-dialog .reel-controls {
  position: absolute;
  z-index: 4;
  inset: auto 0 0;
  display: grid;
  gap: 0;
  padding: 32px 16px 8px;
  background: linear-gradient(transparent, rgb(0 0 0 / 0.86));
  color: #fff;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

#reel-dialog .is-controls-visible .reel-controls,
#reel-dialog .is-paused .reel-controls,
#reel-dialog .is-buffering .reel-controls,
#reel-dialog .reel-controls:has(:focus-visible) { opacity: 1; pointer-events: auto; }

#reel-dialog .reel-seek-wrap { display: flex; align-items: center; width: 100%; min-width: 0; height: 32px; }
#reel-dialog .reel-control-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
#reel-dialog .reel-control-row button { min-width: 44px; min-height: 44px; padding: 10px; }
#reel-dialog .reel-time { flex: 0 0 auto; color: #fff; font: 400 13px/1.3 'Sora', sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
#reel-dialog .reel-volume-group { display: flex; align-items: center; flex: 0 0 auto; gap: 4px; margin-left: auto; }

#reel-dialog .reel-seek,
#reel-dialog .reel-volume {
  --range-fill: 0%;
  display: block;
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #fff;
  accent-color: #fff;
  cursor: pointer;
  touch-action: none;
}

#reel-dialog .reel-seek { flex: 1 1 auto; width: 100%; }
#reel-dialog .reel-volume { --range-fill: 100%; flex: 0 0 96px; width: 96px; }
#reel-dialog .reel-seek:disabled { opacity: 0.4; cursor: wait; }
#reel-dialog .reel-volume:disabled { opacity: 0.4; cursor: default; }

#reel-dialog input[type='range']::-webkit-slider-runnable-track {
  height: 3px;
  border: 0;
  border-radius: 3px;
  background: linear-gradient(to right, #fff 0 var(--range-fill), var(--reel-track) var(--range-fill) 100%);
}

#reel-dialog input[type='range']::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4.5px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.1);
}

#reel-dialog input[type='range']::-moz-range-track { height: 3px; border: 0; border-radius: 3px; background: var(--reel-track); }
#reel-dialog input[type='range']::-moz-range-progress { height: 3px; border-radius: 3px; background: #fff; }
#reel-dialog input[type='range']::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; }

#reel-dialog .reel-status {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: max-content;
  max-width: calc(100% - 40px);
  margin: 0;
  padding: 12px 16px;
  border-radius: 8px;
  background: rgb(0 0 0 / 0.8);
  color: #fff;
  font: 400 13px/1.5 'Sora', sans-serif;
  text-align: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#reel-dialog .reel-error {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 54px 24px 24px;
  background: rgb(0 0 0 / 0.94);
  color: #fff;
  font: 400 14px/1.5 'Sora', sans-serif;
  text-align: center;
}

#reel-dialog .reel-error p { max-width: 34ch; margin: 0; }
#reel-dialog .reel-error .reel-retry { min-height: 44px; padding: 12px 20px; border: 1px solid rgb(255 255 255 / 0.55); border-radius: 6px; font-size: 13px; }
#reel-dialog .reel-error a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }

@media (hover: hover) and (pointer: fine) {
  #reel-dialog button:hover:not(:disabled) { background-color: rgb(255 255 255 / 0.13); }
  #reel-dialog .reel-close:hover { background-color: rgb(0 0 0 / 0.75); }
  #reel-dialog .reel-center-play:hover { background-color: rgb(0 0 0 / 0.8); border-color: #fff; }
}

@media (max-width: 700px) {
  #reel-dialog .reel-control-row { gap: 4px; }
  #reel-dialog .reel-volume { flex-basis: 64px; width: 64px; }
  #reel-dialog .reel-volume-group { gap: 0; }
  #reel-dialog .reel-controls { padding-right: max(12px, env(safe-area-inset-right)); padding-left: max(12px, env(safe-area-inset-left)); }
}

@media (max-width: 700px) and (orientation: portrait) {
  #reel-dialog { padding: max(12px, env(safe-area-inset-top)) 0 max(12px, env(safe-area-inset-bottom)); }
  #reel-dialog .reel-player { display: flex; flex-direction: column; width: 100%; max-width: 100%; height: auto; aspect-ratio: auto; }
  #reel-dialog #reel-video { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 16 / 9; }
  #reel-dialog .reel-controls { position: relative; inset: auto; width: 100%; padding-top: 2px; padding-bottom: 8px; background: #000; opacity: 1; pointer-events: auto; }
  #reel-dialog .reel-close { top: 8px; right: 8px; }
  #reel-dialog .reel-center-play, #reel-dialog .reel-status { top: calc(100vw * 0.28125); }
}

@media (max-height: 600px) and (orientation: landscape) {
  #reel-dialog { padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  #reel-dialog .reel-player { width: min(100%, calc((100dvh - 16px) * 1.777778)); }
}

/* Expanded fallback stays on the same page when native fullscreen is unavailable. */
#reel-dialog.is-expanded .reel-player,
#reel-dialog .reel-player.is-expanded,
#reel-dialog .reel-player:fullscreen {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  margin: 0;
  padding: 0;
  background: #000;
}

#reel-dialog.is-expanded #reel-video,
#reel-dialog .is-expanded #reel-video,
#reel-dialog .reel-player:fullscreen #reel-video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; aspect-ratio: auto; object-fit: contain; }
#reel-dialog.is-expanded .reel-controls,
#reel-dialog .is-expanded .reel-controls,
#reel-dialog .reel-player:fullscreen .reel-controls { position: absolute; inset: auto 0 0; padding: 32px max(16px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: linear-gradient(transparent, rgb(0 0 0 / 0.86)); }
#reel-dialog.is-expanded .reel-close,
#reel-dialog .is-expanded .reel-close,
#reel-dialog .reel-player:fullscreen .reel-close { top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); }
#reel-dialog.is-expanded .reel-center-play,
#reel-dialog.is-expanded .reel-status,
#reel-dialog .is-expanded .reel-center-play,
#reel-dialog .is-expanded .reel-status,
#reel-dialog .reel-player:fullscreen .reel-center-play,
#reel-dialog .reel-player:fullscreen .reel-status { top: 50%; }

/* Legacy WebKit element fullscreen. Native iPhone video uses its system controls. */
#reel-dialog .reel-player:-webkit-full-screen { position: fixed; inset: 0; display: grid; place-items: center; width: 100%; height: 100dvh; max-width: none; max-height: none; aspect-ratio: auto; margin: 0; padding: 0; background: #000; }
#reel-dialog .reel-player:-webkit-full-screen #reel-video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; aspect-ratio: auto; object-fit: contain; }
#reel-dialog .reel-player:-webkit-full-screen .reel-controls { position: absolute; inset: auto 0 0; padding: 32px max(16px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: linear-gradient(transparent, rgb(0 0 0 / 0.86)); }
#reel-dialog .reel-player:-webkit-full-screen .reel-close { top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); }
#reel-dialog .reel-player:-webkit-full-screen .reel-center-play,
#reel-dialog .reel-player:-webkit-full-screen .reel-status { top: 50%; }

#reel-dialog.is-expanded .reel-player:not(.is-controls-visible):not(.is-paused):not(.is-buffering) .reel-controls:not(:has(:focus-visible)),
#reel-dialog .reel-player.is-expanded:not(.is-controls-visible):not(.is-paused):not(.is-buffering) .reel-controls:not(:has(:focus-visible)),
#reel-dialog .reel-player:fullscreen:not(.is-controls-visible):not(.is-paused):not(.is-buffering) .reel-controls:not(:has(:focus-visible)) { opacity: 0; pointer-events: none; }
#reel-dialog .reel-player:-webkit-full-screen:not(.is-controls-visible):not(.is-paused):not(.is-buffering) .reel-controls:not(:has(:focus-visible)) { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  #reel-dialog .reel-controls { transition: none; }
}