:root { --red-deep: #c4121e; }

.stage { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; background: #000; }

.tv {
  container-type: inline-size; position: relative; overflow: hidden; background: #000;
  width: min(100vw, calc(100dvh * 16 / 9)); aspect-ratio: 16 / 9; margin: 0 auto;
}
.tv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.menu {
  position: absolute; inset: 0; padding: 4cqw; display: flex; flex-direction: column; align-items: flex-start;
  background: linear-gradient(90deg, rgb(11 11 26 / 0.85), rgb(11 11 26 / 0.35) 60%, transparent);
}
.menu[hidden] { display: none; }
.menu-title {
  margin: 0; font: 400 7cqw/1 var(--font-title); letter-spacing: 0.04em; color: var(--yellow);
  text-shadow: 0.35cqw 0.35cqw 0 var(--red-deep), 0.7cqw 0.7cqw 0 var(--blue);
}
.disc-badge {
  margin: 1.5cqw 0 2.5cqw; padding: 0.2cqw 1.4cqw; font-size: 2.4cqw; letter-spacing: 0.15em;
  background: var(--blue); color: var(--paper); border: 0.3cqw solid var(--paper); border-radius: 2cqw;
}
.menu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8cqw; width: 36cqw; }
.menu-item {
  width: 100%; text-align: left; padding: 0.3cqw 1.6cqw; font-size: 3cqw; line-height: 1.1; letter-spacing: 0.05em;
  background: rgb(11 11 26 / 0.85); color: var(--paper); border: 0.3cqw solid var(--blue); border-radius: 0.6cqw;
}
.menu-item[aria-current='true'], .menu-item:focus-visible {
  background: var(--yellow); color: var(--ink); border-color: var(--paper);
  box-shadow: var(--glow); animation: menu-glow 1.4s ease-in-out infinite alternate;
}
.menu-item:focus-visible { outline: 0.3cqw solid var(--red-deep); outline-offset: 0.2cqw; }
@keyframes menu-glow { to { box-shadow: 0 0 6px #ffd21f, 0 0 14px #ffd21f66; } }

.osd {
  position: absolute; bottom: 2cqw; right: 16cqw; margin: 0; max-width: 45cqw; padding: 0.6cqw 1.6cqw;
  font-size: max(15px, 2.8cqw); line-height: 1.15; color: var(--yellow); background: rgb(0 0 0 / 0.85);
  border: 0.25cqw solid var(--yellow); visibility: hidden;
}
.osd.is-on { visibility: visible; }

.sound-toggle {
  position: absolute; right: 2cqw; bottom: 2cqw; padding: 0.3cqw 1.4cqw; font-size: 2.2cqw;
  background: rgb(0 0 0 / 0.85); color: var(--paper); border: 0.25cqw solid var(--paper); letter-spacing: 0.08em;
}
.sound-toggle[aria-pressed='true'] { color: var(--yellow); border-color: var(--yellow); background: var(--red-deep); }

/* Portrait phone: TV on top, remote below, two-column menu */
@media (orientation: portrait) and (max-width: 600px) {
  .stage { justify-content: flex-start; }
  .tv { width: 100%; }
  .menu { padding: 3cqw; background: linear-gradient(180deg, rgb(11 11 26 / 0.75), rgb(11 11 26 / 0.5)); }
  .menu-title { font-size: 7cqw; }
  .disc-badge { margin: 1cqw 0 2cqw; font-size: 3.4cqw; }
  .menu-list { width: 100%; grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 1.4cqw 2cqw; }
  .menu-item { font-size: 4.4cqw; padding: 0.4cqw 2cqw; }
  .osd { right: 3cqw; bottom: 2cqw; max-width: 46cqw; font-size: max(14px, 3.4cqw); }
  .sound-toggle { display: none; }
  /* A disc screen is open: the TV fills the height left above a compact remote */
  .stage.is-screen { height: 100dvh; min-height: 0; overflow: hidden; }
  .stage.is-screen .tv { flex: 1 1 0; min-height: 0; aspect-ratio: auto; }
}