:root {
  /* 色・動きのトークンは screens.css（docs/ui.md §11）。ここは土台だけ */
  --font-ui: 'Zen Kaku Gothic New', 'M PLUS Rounded 1c', system-ui, sans-serif;
  --font-round: 'M PLUS Rounded 1c', 'Zen Kaku Gothic New', sans-serif;
  --font-impact: 'Dela Gothic One', 'Zen Kaku Gothic New', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; color: #f3f6ff; font-family: var(--font-ui); overflow: hidden; }
#viewport { position: fixed; inset: 0; background: #000; }
#stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: 50% 50%; overflow: hidden; background: #070b18; }
#app, #overlay { position: absolute; inset: 0; }
#overlay { pointer-events: none; z-index: 100; }
#overlay > * { pointer-events: auto; }
button { font-family: inherit; color: inherit; }
img { -webkit-user-drag: none; user-select: none; }
/* 縦画面では 16:9 のステージが小さすぎて読めないので、横向きにするよう案内する（docs/ui.md §14） */
#rotate-note { display: none; }
@media (orientation: portrait) and (max-width: 900px) {
  #rotate-note { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px;
    background: #070b18; color: #f3f6ff; font: 800 22px/1.5 var(--font-round); text-align: center; }
  #rotate-note b { font-size: 64px; line-height: 1; color: #ffb627; animation: rotate-hint 2.4s ease-in-out infinite; }
  #rotate-note small { font-size: 15px; font-weight: 500; color: #9aa6c8; }
}
@keyframes rotate-hint { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(90deg); } }