/* Short landscape (below 400px tall): a portrait gate over the play surface.
   The HUD and the 18+ line stay above it. */
.rotate-gate { display: none; }
@media (orientation: landscape) and (max-height: 399px) {
  .app.play .rotate-gate,
  .app:has(.r5-scrim) .rotate-gate,
  .tc-app .rotate-gate,
  .tc-app:has(.r5-scrim) .rotate-gate {
    display: flex;
    position: fixed;
    z-index: 66;
    inset: 0;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    background: rgba(4, 8, 14, .92);
  }
  .app.play .hud,
  .app.play .legal,
  .app:has(.r5-scrim) .hud,
  .app:has(.r5-scrim) .legal,
  .tc-app.land .tc-hud,
  .tc-app .tc-hud,
  .tc-app .tc-notice {
    position: relative;
    z-index: 70;
  }
  .app.play .modeseg,
  .app.play .modeseg button { pointer-events: none; }
}
.rotate-card {
  width: min(340px, 100%);
  border-radius: 18px;
  background: #FBF5E8;
  color: #1b2230;
  border: 1px solid #C9A961;
  padding: 14px 16px 16px;
  text-align: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.rotate-card h2 {
  margin: 8px 0 0;
  font: 800 18px/1.2 var(--serif, Georgia);
  color: #1b2230;
}
.rotate-card p {
  margin: 6px 0 0;
  font: 600 14px/1.35 var(--sans, system-ui);
  color: #1b2230;
}
.rotate-phone {
  display: inline-block;
  width: 26px;
  height: 42px;
  border: 3px solid #9C7428;
  border-radius: 6px;
  position: relative;
  transform: rotate(90deg);
}
.rotate-phone::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: #9C7428;
}
@media (prefers-reduced-motion: no-preference) {
  .rotate-phone { animation: rotate-phone 1.8s ease-in-out infinite; }
}
@keyframes rotate-phone {
  0%, 18% { transform: rotate(90deg); }
  55%, 100% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .rotate-phone { animation: none; transform: rotate(90deg); }
}