:root {
  --pink: #ff6ec7;
  --purple: #9b5de5;
  --deep: #3d1a63;
  /* The height of what can actually be seen. On phones the plain 100vh
     includes the space under the browser's own bars, so the sky would be cut
     off at the bottom; dvh follows the bars as they come and go. */
  --vh: 100vh;
}
@supports (height: 100dvh) {
  :root { --vh: 100dvh; }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #1a0b33;
  font-family: "Trebuchet MS", "Comic Sans MS", system-ui, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: none;
}

body {
  height: var(--vh);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Keep the picture and its buttons clear of notches and the home bar. */
  padding:
    env(safe-area-inset-top, 0px)
    env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px)
    env(safe-area-inset-left, 0px);
  background:
    radial-gradient(circle at 20% 15%, #4b1d7a 0%, transparent 55%),
    radial-gradient(circle at 80% 85%, #7a2a86 0%, transparent 55%),
    #1a0b33;
}

#stage {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: calc(var(--vh) * 16 / 9);
  max-height: calc(100vw * 9 / 16);
  margin: auto;
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, .18),
    0 0 60px rgba(255, 110, 199, .45),
    0 24px 60px rgba(0, 0, 0, .55);
  image-rendering: auto;
  /* A small cursor, so it does not hide the unicorn it is steering. */
  cursor: crosshair;
  /* Fingers steer her; they must never scroll or zoom the page instead. */
  touch-action: none;
}

/* On a phone the picture fills the screen edge to edge, so the frame and its
   shadow have nowhere to go and only steal a few pixels of sky. */
@media (pointer: coarse) and (max-width: 900px) {
  #game { border-radius: 10px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .18); }
}

/* ---- corner buttons ---- */
.corner-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px);
  color: #fff;
  transition: transform .12s ease, background .12s ease;
  touch-action: manipulation;
}
.corner-btn:hover { background: rgba(255, 255, 255, .38); transform: scale(1.08); }
.corner-btn:active { transform: scale(.94); }
.corner-btn.off { opacity: .45; }
#btn-fullscreen { right: 70px; }
#btn-fullscreen[hidden] { display: none; }

/* ---- link back to the arcade homepage ----
   Shown only on the title screen (js/main.js toggles [hidden]), in the
   top-left corner where the title screen keeps clear: the "High Scores"
   pill lives bottom-left (canvas-drawn, see js/ui/ui.js titleScoresButton),
   and sound/full-screen live top-right. Styled like the arcade site itself
   (not this game's own rainbow theme) so it reads as "leave to the arcade",
   deliberately not blended in with the game's own buttons. */
.arcade-home-link {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  background: #ff9a3d;
  border: 0.2rem solid #e0691a;
  border-radius: 1rem;
  padding: 0.5rem 0.9rem;
  font-family: "Trebuchet MS", "Comic Sans MS", system-ui, sans-serif;
  font-weight: bold;
  font-size: 15px;
  line-height: 1;
  color: #2a1240;
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
}
.arcade-home-link:hover,
.arcade-home-link:focus-visible {
  background: #fff3e2;
}
.arcade-home-link[hidden] { display: none; }

/* ---- "turn your phone sideways" ---- */
#rotate-hint {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(circle at 50% 30%, #6a2aa8 0%, transparent 60%),
    #1a0b33;
}
#rotate-hint p {
  margin: 0;
  font-size: 22px;
  font-weight: bold;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
#rotate-hint .rotate-phone {
  font-size: 72px;
  line-height: 1;
  animation: turn-phone 2.2s ease-in-out infinite;
}
@keyframes turn-phone {
  0%, 25%   { transform: rotate(0deg); }
  60%, 100% { transform: rotate(-90deg); }
}
#rotate-anyway {
  margin-top: 8px;
  padding: 12px 22px;
  border: none;
  border-radius: 999px;
  font: inherit;
  font-size: 16px;
  color: #fff;
  background: rgba(255, 255, 255, .2);
  cursor: pointer;
}
#rotate-anyway:active { background: rgba(255, 255, 255, .35); }
/* Only a narrow touchscreen held upright: tablets are big enough either way. */
@media (pointer: coarse) and (orientation: portrait) and (max-width: 640px) {
  #rotate-hint { display: flex; }
}
#rotate-hint.dismissed { display: none; }