:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #000; color: #fff; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
#player { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; background: #000; }
#player:fullscreen { width: 100%; height: 100%; }
video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
#play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 88px; height: 88px;
  padding: 0 5px 0 0; border: 1px solid #ffffff70; border-radius: 50%;
  color: #fff; background: #00000080; backdrop-filter: blur(12px);
  box-shadow: 0 4px 32px #00000040; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 160ms ease, scale 160ms ease;
}
#play[hidden] { display: none; }
#play:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }
#play:disabled { opacity: .65; cursor: wait; }
@media (hover: hover) { #play:hover { background: #000000b0; scale: 1.06; } }
#status {
  position: absolute; left: 50%; bottom: max(76px, env(safe-area-inset-bottom));
  transform: translateX(-50%); max-width: min(90vw, 36rem); margin: 0;
  padding: 10px 16px; border-radius: 8px; color: #fff; background: #000000bd;
  font-size: 1rem; line-height: 1.45; text-align: center; pointer-events: none;
}
#status:empty { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.no-script { position: absolute; inset: 45% 16px auto; text-align: center; font-size: 1rem; }
@media (prefers-reduced-motion: reduce) { #play { transition: none; } }