/*
 * Same shell as Roo Run: the canvas is fixed and centred, and lib/pixel/screen.js
 * owns its size and the portrait rotation transform. See that file's header for
 * why portrait rotates rather than letterboxing.
 */

* { box-sizing: border-box; }

html, body {
  /* dvh, not vh: vh is locked to the largest viewport and ignores the mobile
     URL bar collapsing, so the game would size itself to space that isn't there. */
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background: #140f14;
  color: #8a7f86;
  font: 13px/1.5 ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

#game {
  position: fixed;
  left: 50%;
  top: 50%;
  /* transform comes from screen.js — it owns the rotation decision */
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #241a2e;
  cursor: pointer;
  touch-action: none;
}

#hint {
  position: fixed;
  left: 50%;
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  margin: 0;
  width: min(52ch, calc(100vw - 2rem));
  text-align: center;
  font-size: 12px;
  pointer-events: none;
}

#rotate-hint {
  position: fixed;
  left: 50%;
  bottom: max(1.5rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  margin: 0;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: rgb(20 15 20 / 85%);
  color: #f2ede4;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}

body[data-rotated="1"] #rotate-hint { animation: nudge 4.5s ease forwards; }
@keyframes nudge { 0%, 68% { opacity: 1; } 100% { opacity: 0; } }

@media (pointer: fine) {
  #game { border: 2px solid #43151f; box-shadow: 0 0 0 1px #000, 0 10px 40px rgb(0 0 0 / 60%); }
}

@media (pointer: coarse), (max-height: 460px) {
  #hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-rotated="1"] #rotate-hint { animation: none; opacity: 1; }
}