/* Duckling Parade — the page furniture. Owned by the art director.
   The game itself is all drawn on the canvas (js/art/art.js); this is the
   frame around it, the full-screen button and the "turn your phone" card.

   House rules kept here: nothing a finger has to hit is smaller than 64 px,
   the type is large and friendly, and the page is the same golden hour as
   the game so the canvas looks like a window rather than a sticker. */
:root {
  --honey:  #ffc46a;
  --amber:  #f0913c;
  --ember:  #c85f2c;
  --deep:   #4a2f14;
  --cream:  #fff3d8;
  --ink:    #4a331c;
  /* On phones a plain 100vh includes the space under the browser bars, so the
     picture would be cut off at the bottom. dvh follows the bars. */
  --vh: 100vh;
}
@supports (height: 100dvh) {
  :root { --vh: 100dvh; }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #2a1c0e;
  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;
}

/* The room the game sits in: a warm evening, darkest at the bottom, so the
   bright canvas is the thing the eye goes to. */
body {
  height: var(--vh);
  display: flex;
  align-items: center;
  justify-content: center;
  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(ellipse at 74% 16%, rgba(255, 205, 130, .55) 0%, transparent 58%),
    radial-gradient(ellipse at 18% 88%, rgba(200, 95, 44, .40) 0%, transparent 62%),
    linear-gradient(165deg, #8a5a24 0%, #5c3a17 45%, #2a1c0e 100%);
}

#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: 22px;
  box-shadow:
    0 0 0 5px rgba(255, 243, 216, .22),
    0 0 70px rgba(255, 180, 90, .38),
    0 26px 64px rgba(0, 0, 0, .55);
  /* A finger steers Mama; it must never scroll or zoom the page instead. */
  touch-action: none;
  cursor: crosshair;
}

@media (pointer: coarse) and (max-width: 900px) {
  #game { border-radius: 12px; box-shadow: 0 0 0 3px rgba(255, 243, 216, .22); }
}

/* ---- corner button (full screen, menus only) ----
   64 x 64 with 16 px of clear space, like every other target in this game. */
.corner-btn {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 64px;
  height: 64px;
  border: none;
  border-radius: 50%;
  color: var(--deep);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--cream);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .18), 0 6px 16px rgba(0, 0, 0, .25);
  transition: transform .12s ease, background .12s ease;
  touch-action: manipulation;
}
.corner-btn::before {
  content: "";
  width: 26px;
  height: 26px;
  border: 4px solid currentColor;
  border-radius: 5px;
  clip-path: polygon(0 0, 38% 0, 38% 12%, 12% 12%, 12% 38%, 0 38%,
                     62% 0, 100% 0, 100% 38%, 88% 38%, 88% 12%, 62% 12%,
                     0 62%, 12% 62%, 12% 88%, 38% 88%, 38% 100%, 0 100%,
                     88% 62%, 100% 62%, 100% 100%, 62% 100%, 62% 88%, 88% 88%);
}
.corner-btn:hover { background: #ffffff; transform: scale(1.06); }
.corner-btn:active { transform: translateY(3px) scale(.97); box-shadow: 0 1px 0 rgba(0, 0, 0, .18); }
.corner-btn[hidden] { display: none; }

/* A visible keyboard focus ring: a grown-up may be tabbing about. */
.corner-btn:focus-visible,
#rotate-anyway:focus-visible {
  outline: 4px solid #ffd86b;
  outline-offset: 4px;
}

/* ---- arcade link (title screen only) ----
   A real <a href="/">, not a canvas button, so it works without JS and is
   reachable by keyboard/tab. It sits bottom-right, clear of the corner-btn
   (top-left, DOM) and the sound button the canvas draws top-right. Its look
   is deliberately the arcade site's own palette, not this game's honey-and-
   amber theme, so it reads as "leave the game" rather than as a game control. */
.arcade-link {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 0.5rem 0.9rem;
  border: 0.2rem solid #e0691a;
  border-radius: 1rem;
  background: #ff9a3d;
  color: #2a1240;
  font-family: "Trebuchet MS", "Comic Sans MS", system-ui, sans-serif;
  font-weight: bold;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .18), 0 6px 16px rgba(0, 0, 0, .25);
}
.arcade-link:hover,
.arcade-link:focus-visible {
  background: #fff3e2;
}
.arcade-link:focus-visible {
  outline: 4px solid #ffd86b;
  outline-offset: 4px;
}
.arcade-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: 22px;
  padding: 24px;
  text-align: center;
  color: var(--cream);
  background:
    radial-gradient(circle at 50% 34%, #b57a30 0%, transparent 62%),
    linear-gradient(170deg, #7a5220 0%, #2a1c0e 100%);
}
#rotate-hint p {
  margin: 0;
  font-size: 26px;
  font-weight: bold;
  line-height: 1.35;
  text-shadow: 0 3px 10px rgba(0, 0, 0, .55);
}
#rotate-hint .rotate-phone {
  font-size: 84px;
  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); }
}
@media (prefers-reduced-motion: reduce) {
  #rotate-hint .rotate-phone { animation: none; transform: rotate(-90deg); }
}
#rotate-anyway {
  min-height: 64px;
  margin-top: 6px;
  padding: 14px 32px;
  border: none;
  border-radius: 999px;
  font: inherit;
  font-size: 20px;
  font-weight: bold;
  color: var(--deep);
  background: var(--honey);
  box-shadow: 0 5px 0 #c98a3a;
  cursor: pointer;
  touch-action: manipulation;
}
#rotate-anyway:active { transform: translateY(4px); box-shadow: 0 1px 0 #c98a3a; }
@media (pointer: coarse) and (orientation: portrait) and (max-width: 640px) {
  #rotate-hint { display: flex; }
}
#rotate-hint.dismissed { display: none; }