:root {
  color-scheme: dark;
  --bg: #14201a;
  --fg: #ecebe8;
  --muted: #9a9ea6;
  --accent: #e2b547;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
  touch-action: none;
}

/* The game fills the screen inside the safe areas. In landscape the notch sits on
   the left or right, so all four insets matter. */
.game {
  position: fixed;
  top: env(safe-area-inset-top);
  right: env(safe-area-inset-right);
  bottom: env(safe-area-inset-bottom);
  left: env(safe-area-inset-left);
  overflow: hidden;
  touch-action: none;
}

.game canvas {
  display: block;
}

.rotate {
  display: none;
}

@media (orientation: portrait) {
  /* Hidden rather than display:none so Phaser keeps a measurable parent. */
  .game {
    visibility: hidden;
  }

  .rotate {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: var(--bg);
    text-align: center;
  }

  .rotate p {
    margin: 0 24px;
    font-size: 20px;
    font-weight: 600;
  }
}

.rotate-phone {
  width: 56px;
  height: 96px;
  border: 4px solid var(--fg);
  border-radius: 12px;
  position: relative;
  animation: rotate-hint 2.4s ease-in-out infinite;
}

.rotate-phone::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 18px;
  height: 4px;
  margin-left: -9px;
  border-radius: 2px;
  background: var(--accent);
}

@keyframes rotate-hint {
  0%, 25% { transform: rotate(0deg); }
  55%, 100% { transform: rotate(-90deg); }
}

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