/* Film surfaces carry only the movie and the game's chunky, outlined controls. */
dialog.game-cinema {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #03080e;
  color: #fff;
  overflow: hidden;
}
.game-cinema::backdrop { background: #03080e; }
.game-cinema video { display: block; width: 100%; height: 100%; object-fit: contain; }
.film-controls { position: absolute; bottom: 24px; left: 24px; display: flex; }
.film-controls button, .film-skip, .film-start, .film-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  min-height: 60px;
  margin: 0;
  padding: 12px 24px;
  border: 3px solid #071523;
  border-radius: 42% 34% 38% 32% / 48% 42% 48% 42%;
  background: #fff8e5;
  color: #071523;
  box-shadow: 0 5px 0 #071523;
  font: 900 20px/1.3 'IBM Plex Sans Arabic', 'Cairo', sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 140ms ease, background 140ms ease;
}
.film-controls svg, .film-skip svg, .film-close svg { width: 24px; height: 24px; flex: 0 0 auto; }
.film-skip, .film-start { background: #f5a400; }
.film-controls button:hover, .film-close:hover { background: #fff; transform: translateY(-2px); }
.film-skip:hover, .film-start:hover { background: #ffc247; transform: translateY(-2px); }
.film-controls button:active, .film-skip:active, .film-start:active, .film-close:active { transform: translateY(3px); box-shadow: 0 2px 0 #071523; }
.film-controls button:focus-visible, .film-skip:focus-visible, .film-start:focus-visible, .film-close:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.game-cinema .film-controls { bottom: max(24px, env(safe-area-inset-bottom)); left: max(24px, env(safe-area-inset-left)); }
.film-skip { position: absolute; bottom: max(24px, env(safe-area-inset-bottom)); right: max(24px, env(safe-area-inset-right)); }
.film-status { position: absolute; inset: auto 16px 100px; text-align: center; color: #fff; font: 700 16px/1.5 'IBM Plex Sans Arabic', 'Cairo', sans-serif; text-shadow: 0 1px 5px #000; pointer-events: none; }
.rules-preview-popover[popover] { inset: auto; margin: 0; border: 0; background: transparent; }
/* Height determines width on short screens: no scroll container or footer. */
#rules-preview-popover:has(.rules-preview-film) {
  width: min(720px, calc(100vw - 32px), calc((100dvh - 32px) * 16 / 9));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.rules-preview-film { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 7% 8% 7% 8% / 13% 15% 13% 15%; background: #03080e; }
.rules-preview-film video { display: block; width: 100%; height: 100%; object-fit: contain; }
.film-close { position: absolute; top: 18px; left: 18px; width: 56px; min-height: 56px; padding: 0; }
.film-start { position: absolute; bottom: 24px; right: 24px; }
html:has(.rules-preview-popover.is-open), body:has(.rules-preview-popover.is-open) { overflow-x: clip; }
@media (max-width: 600px), (max-height: 450px) {
  .film-controls button, .film-skip, .film-start { min-height: 50px; padding: 10px 14px; font-size: 17px; gap: 8px; }
  .film-controls svg, .film-skip svg { width: 20px; height: 20px; }
  .film-controls, .game-cinema .film-controls { bottom: max(16px, env(safe-area-inset-bottom)); left: max(16px, env(safe-area-inset-left)); }
  .film-skip, .film-start { bottom: max(16px, env(safe-area-inset-bottom)); right: max(16px, env(safe-area-inset-right)); }
  .film-close { top: 12px; left: 12px; width: 48px; min-height: 48px; }
}
@media (max-width: 360px) {
  .film-controls button, .film-skip, .film-start { padding-inline: 10px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .film-controls button, .film-skip, .film-start, .film-close { transition: none; }
}