:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #050505;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; }
html, body, #game-root { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #050505; }
html, body { min-height: 100dvh; }
body {
  position: fixed;
  inset: 0;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#game-root { position: absolute; inset: 0; }
canvas { display: block; image-rendering: auto; width: 100% !important; height: 100% !important; }

#rotate-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  place-items: center;
  padding:
    calc(28px + var(--safe-top))
    calc(28px + var(--safe-right))
    calc(28px + var(--safe-bottom))
    calc(28px + var(--safe-left));
  background:
    radial-gradient(circle at 50% 42%, rgba(48, 65, 61, 0.22), transparent 34%),
    #050707;
  color: #f2efe8;
}
.orientation-blocked #rotate-overlay { display: grid; }
.orientation-blocked #game-root { visibility: hidden; }
.rotate-card { width: min(420px, 90vw); text-align: center; }
.rotate-device {
  width: 102px;
  height: 58px;
  margin: 0 auto 28px;
  border: 2px solid rgba(242, 239, 232, 0.72);
  border-radius: 15px;
  transform: rotate(-90deg);
  box-shadow: 0 0 0 1px rgba(77, 168, 255, 0.08), 0 18px 52px rgba(0,0,0,.42);
  position: relative;
  animation: rotate-device 2.2s ease-in-out infinite;
}
.rotate-device::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #e4e0d7;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  opacity: .65;
}
.rotate-kicker { margin: 0 0 10px; font: 600 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; color: #89938f; }
.rotate-title { margin: 0; font-size: clamp(28px, 8vw, 42px); line-height: .98; letter-spacing: -.03em; }
.rotate-copy { margin: 17px auto 0; max-width: 330px; color: #aeb8b5; font-size: 14px; line-height: 1.55; }
@keyframes rotate-device { 0%, 22% { transform: rotate(-90deg); } 62%, 100% { transform: rotate(0deg); } }

@media (prefers-reduced-motion: reduce) { .rotate-device { animation: none; transform: rotate(0deg); } }