/* Keep the canvas clear of notches / home indicators. UIScene reads these via --sa-* vars. */
:root {
  --sa-top: env(safe-area-inset-top, 0px);
  --sa-right: env(safe-area-inset-right, 0px);
  --sa-bottom: env(safe-area-inset-bottom, 0px);
  --sa-left: env(safe-area-inset-left, 0px);
}
#game { top: var(--sa-top); right: var(--sa-right); bottom: var(--sa-bottom); left: var(--sa-left); }
#rotate-hint { display: none; }
@media (pointer: coarse) and (orientation: portrait) and (max-width: 500px) {
  #rotate-hint {
    display: block; position: fixed; left: 50%; bottom: calc(6px + var(--sa-bottom)); transform: translateX(-50%);
    font-size: 10px; letter-spacing: .08em; color: #8a7fd6; opacity: .75; pointer-events: none; z-index: 5; white-space: nowrap;
    animation: fadeHint 6s forwards;
  }
}
@keyframes fadeHint { 0%, 70% { opacity: .75; } 100% { opacity: 0; } }