/* The remote exists only on a portrait phone. Elsewhere display:none also removes it from the tab order. */
.remote { display: none; }

@media (orientation: portrait) and (max-width: 600px) {
  .remote {
    display: grid; gap: 34px; width: min(92vw, 340px); margin: 18px auto 24px; padding: 22px 18px 24px;
    background: linear-gradient(180deg, #4a4a5e, #1c1c2a 70%); border: 2px solid #6a6a80;
    border-radius: 34px 34px 48px 48px; box-shadow: 0 10px 0 #0a0a14, inset 0 3px 0 #ffffff33;
  }
  /* compact while a disc screen is open, so the TV gets the height */
  .stage.is-screen .remote { gap: 8px; margin: 8px auto 10px; padding: 10px 14px 12px; border-radius: 26px 26px 34px 34px; box-shadow: 0 5px 0 #0a0a14, inset 0 3px 0 #ffffff33; }
  .stage.is-screen .r-btn { min-height: 40px; font-size: 1.15rem; }
  .stage.is-screen .r-dpad { width: 132px; height: 132px; gap: 3px; padding: 5px; }
  .stage.is-screen .r-row, .stage.is-screen .r-jokes { gap: 8px; }
  .stage.is-screen .r-play[data-hint]::before { display: none; } /* would cover the Down key */
  .stage.is-screen .r-joke { font-size: 0.95rem; }
}

.r-btn {
  min-height: 48px; padding: 0 10px; font-family: var(--font-osd); font-size: 1.35rem; letter-spacing: 0.06em;
  color: var(--paper); background: linear-gradient(180deg, #5c5c74, #2a2a3c); border: 2px solid #0a0a14;
  border-radius: 14px; box-shadow: 0 4px 0 #0a0a14, inset 0 2px 0 #ffffff44;
}
.r-btn:active, .r-btn.is-pressed { transform: translateY(3px); box-shadow: 0 1px 0 #0a0a14, inset 0 2px 0 #ffffff22; }

.r-dpad {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 6px;
  width: 200px; height: 200px; margin: 0 auto; padding: 8px; border-radius: 50%; background: #12121e;
}
.r-up { grid-area: 1 / 2; border-radius: 14px 14px 4px 4px; }
.r-left { grid-area: 2 / 1; border-radius: 14px 4px 4px 14px; }
.r-right { grid-area: 2 / 3; border-radius: 4px 14px 14px 4px; }
.r-down { grid-area: 3 / 2; border-radius: 4px 4px 14px 14px; }
.r-dpad .r-btn { min-height: 0; padding: 0; }
.r-ok { grid-area: 2 / 2; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff5a62, var(--red-deep) 70%); }

.r-row, .r-jokes { display: grid; gap: 12px; }
.r-row { grid-template-columns: repeat(3, 1fr); }
.r-jokes { grid-template-columns: repeat(4, 1fr); }
.r-joke { font-size: 1.05rem; padding: 0 4px; background: linear-gradient(180deg, #3c3c52, #20202e); }
.r-menu { background: linear-gradient(180deg, #4a74f0, var(--blue) 60%, #123aa8); }
.r-play { position: relative; background: linear-gradient(180deg, #ffe36a, var(--yellow) 60%, #d9a900); color: var(--ink); }
.r-mute[data-muted='true'] {
  background: linear-gradient(180deg, #e8404a, var(--red-deep)); box-shadow: 0 4px 0 #0a0a14, 0 0 14px #ff2a36, inset 0 2px 0 #ffffff44;
}

.r-play[data-hint]::before {
  content: 'PRESS ▶';
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); padding: 2px 8px;
  font-size: 1.05rem; white-space: nowrap; color: var(--ink); background: var(--yellow); border: 2px solid var(--ink);
  animation: hint-blink 0.9s steps(1) infinite;
}
@keyframes hint-blink { 50% { background: #fffbe8; } }