@font-face {
  font-family: "Eudoxus Sans";
  src: url("/fonts/eudoxus-sans-bold-subset.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --black: #121116;
  --white: #ffffff;
  --pink: #fc3791;
  --glow: #ff61be;
  --edge: max(16px, env(safe-area-inset-bottom));
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--black);
  color: var(--white);
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
}

.stage {
  position: fixed;
  inset: 0;
  background: var(--black);
}

.film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--black);
}

.sound {
  position: absolute;
  right: max(20px, env(safe-area-inset-right));
  bottom: var(--edge);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 18px 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(18, 17, 22, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--white);
  font: 700 15px/1 "Eudoxus Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.sound:hover { border-color: rgba(255, 97, 190, 0.8); box-shadow: 0 0 24px rgba(255, 97, 190, 0.28); }
.sound:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }

.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico path:first-child { fill: currentColor; stroke: none; }
.ico-on { display: none; }
.sound[aria-pressed="true"] .ico-on { display: block; }
.sound[aria-pressed="true"] .ico-off { display: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.noscript {
  position: absolute; left: 16px; right: 16px; bottom: 96px; margin: 0;
  font: 15px/1.5 system-ui, sans-serif; text-align: center; color: rgba(255, 255, 255, 0.8);
}
.noscript a { color: var(--white); }

@media (orientation: portrait) {
  .sound { right: 50%; transform: translateX(50%); bottom: max(28px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .sound { transition: none; }
}