/* Fall Frenzy — the page around the canvas. THE ART DIRECTOR OWNS THIS FILE.
   Everything the player looks at while playing is drawn on the canvas, so this
   file has three jobs and no more:

     1. letterbox a 16:9 picture in the middle of the window, safe-area padded;
     2. make the space around it look like a warm autumn afternoon rather than
        a black bar, and match the sky so the first paint is never a dark flash;
     3. style the one piece of real HTML in the game — the "turn your phone
        sideways" card — to the same rules as the canvas: big round buttons,
        large friendly type, nothing a fingertip has to hunt for (44 px is the
        floor, and the button here is 56).

   Palette, for anyone editing this later (it matches js/core/constants.js):
     ink #3a2a1c   paper #fff7ea   conker #8a5a3b   wicker #c08a4e
     sky #8fd0ea   peach #ffc98a   pumpkin #f47b1f  butter #ffc233
     quiet ink #4f4033 — the grown-up's small print, 9.2:1 on paper
     button green #458235 — the one big button, 4.67:1 behind white type
       (it lives in PAL.button in js/core/draw.js, not in constants.js)

   Contrast: the big buttons are green #458235, which is 4.67:1 behind white
   type, so the biggest words in the game pass 4.5:1 on the measurement and
   not only by eye. White labels — on the canvas and here — also carry a dark
   halo, which is belt and braces, not the thing doing the work. If this green
   is ever edited, keep it at or below #458235's lightness; the canvas side
   enforces that for itself in `fitForWhiteType` in js/core/draw.js.
*/

:root {
  /* On phones a plain 100vh includes the space under the browser's own bars,
     so the bottom of the picture would be cut off; dvh follows the bars. */
  --vh: 100vh;
  --ink: #3a2a1c;
  --paper: #fff7ea;
  --conker: #6b4327;
  --butter: #ffc233;
  --pumpkin: #f47b1f;
}
@supports (height: 100dvh) {
  :root { --vh: 100dvh; }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #4a3320;
  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;
  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);
  /* Late afternoon, out past the edge of the picture: warm, never black. */
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 201, 138, .55) 0%, transparent 58%),
    radial-gradient(circle at 12% 92%, rgba(107, 67, 39, .65) 0%, transparent 55%),
    linear-gradient(#6b4327 0%, #4a3320 55%, #3a2a1c 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: 18px;
  /* The same sky the canvas opens on, so the very first frame is not a hole. */
  background: linear-gradient(#8fd0ea, #d8f0f6 78%, #7ea85a 78%);
  box-shadow:
    0 0 0 5px rgba(255, 247, 234, .22),
    0 0 0 8px rgba(58, 36, 16, .35),
    0 22px 60px rgba(30, 18, 8, .55);
  /* Fingers steer Pip; they must never scroll or zoom the page instead. */
  touch-action: none;
  cursor: crosshair;
}

@media (pointer: coarse) and (max-width: 900px) {
  #game {
    border-radius: 10px;
    box-shadow: 0 0 0 3px rgba(255, 247, 234, .2), 0 8px 24px rgba(30, 18, 8, .5);
  }
}

/* ---- back to the arcade -------------------------------------------------
   The one link out of the game and back to the homepage. It is deliberately
   styled like the ARCADE's own chrome (site/css/site.css's .home-link),
   not like anything Pip's world draws, so a grown-up recognises it as "leave
   this game" rather than another button belonging to Fall Frenzy. It only
   ever shows on the title screen — js/main.js toggles .is-hidden to match
   game.state — and sits in the canvas's free top-left corner, well clear of
   the sound/full-screen buttons in the top-right (LAYOUT.title, x 798-948). */
#home-link {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 5;
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border-radius: 1rem;
  border: 0.2rem solid #e0691a;
  background: #ff9a3d;
  color: #2a1240;
  font-family: "Trebuchet MS", "Comic Sans MS", system-ui, sans-serif;
  font-weight: bold;
  font-size: 0.85rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
  cursor: pointer;
}
#home-link:hover,
#home-link:focus-visible {
  background: #fff3e2;
  outline: none;
}
#home-link.is-hidden {
  display: none;
}

/* ---- "turn your phone sideways" ----------------------------------------
   The only HTML a player ever sees. It is a card in the same style as the
   cards drawn on the canvas: warm paper, big round type, one fat button. */
#rotate-hint {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px;
  text-align: center;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 26%, #ffd7a0 0%, transparent 62%),
    linear-gradient(#8fd0ea, #ffc98a);
}
#rotate-hint p {
  margin: 0;
  max-width: 15em;
  font-size: 26px;
  line-height: 1.25;
  font-weight: bold;
  text-shadow: 0 2px 0 rgba(255, 247, 234, .8);
}
#rotate-hint .rotate-phone {
  font-size: 76px;
  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: 56px;                 /* never smaller than a child's fingertip */
  min-width: 220px;
  margin-top: 4px;
  padding: 14px 30px;
  border: none;
  border-bottom: 5px solid #2d5623;
  border-radius: 999px;
  font: inherit;
  font-size: 21px;
  font-weight: bold;
  color: #ffffff;
  /* The same dark halo the canvas buttons give their white labels, so this
     one real HTML button reads as well as the drawn ones. */
  text-shadow: 0 1px 0 rgba(36, 40, 14, .75), 0 0 4px rgba(36, 40, 14, .6);
  background: #458235;
  box-shadow: 0 6px 18px rgba(30, 18, 8, .35);
  cursor: pointer;
}
#rotate-anyway:active {
  transform: translateY(3px);
  border-bottom-width: 2px;
}
#rotate-anyway:focus-visible {
  outline: 4px solid var(--butter);
  outline-offset: 3px;
}

@media (pointer: coarse) and (orientation: portrait) and (max-width: 640px) {
  #rotate-hint { display: flex; }
}
#rotate-hint.dismissed { display: none; }