/* Layout: one fixed 16:9 canvas, letterboxed inside the phone's safe area. Bright sticker-book look. */
:root {
  --bg: #241d4a;
  --ink: #1f1a3a;
  --cream: #fff7e8;
  --pink: #ff8fc4;
  --display: "Lilita One", "Trebuchet MS", sans-serif;
  --body: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  color-scheme: dark;
}
html, body {
  margin: 0; height: 100%; background: var(--bg); overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
#safe {
  position: fixed; pointer-events: none;
  top: env(safe-area-inset-top, 0px); bottom: env(safe-area-inset-bottom, 0px);
  left: env(safe-area-inset-left, 0px); right: env(safe-area-inset-right, 0px);
}
#game { position: fixed; display: block; }
#rotate {
  position: fixed; inset: 0; display: none; z-index: 2;
  flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding-inline: 24px; background: var(--bg); color: var(--cream);
  font: 600 20px/1.3 var(--body); text-align: center;
}
#rotate b { font: 400 34px var(--display); color: var(--pink); }
#rotate .phone {
  width: 46px; height: 80px; border: 4px solid var(--cream); border-radius: 10px;
  animation: turn 2.2s ease-in-out infinite;
}
@keyframes turn { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (prefers-reduced-motion: reduce) { #rotate .phone { animation: none; transform: rotate(-90deg); } }
@media (orientation: portrait) and (pointer: coarse) { #rotate { display: flex; } }