* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: #4aa3e0;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#device {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* viewport-fit=cover (index.html) lets the page draw under the sensor
     housing and home indicator on a notched iPhone; without this padding
     the case art (an in-flow grid item, so it does respect it) draws
     straight into that area and the housing clips it. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* The physical case. case.jpg (Jason's redrawn faceplate, 2582x1456) is a
   single device filling the whole canvas - unlike the previous art, there
   is no second side-by-side photo to crop out, so background-size is a
   plain 100% and #case's aspect-ratio matches the file directly. */
#case {
  position: relative;
  width: min(96vw, calc(92vh * 1.773352));
  aspect-ratio: 2582 / 1456;
  background-image: url('assets/img/case.jpg');
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
  border-radius: 3%;
}

#lcd-cutout {
  /* Percentages of #case, measured by scanning case.jpg in a canvas along
     its middle row and middle column (to skip the hole's rounded corners),
     walking outward from the centre until the pixels stop being the
     near-grayscale recess (screen backlight plus its inner shadow bevel)
     and hit the saturated tan/purple bezel colour. That first pass at pure
     white only found the fully-lit core of the recess and missed the wide
     antialiased shadow gradient around it - up to ~100px of the 1456px-tall
     source on the top edge alone - so the cutout it produced (x:571-2005
     y:317-1184) sat well inside the case's actual opening and let that
     shadow band show through as an off-white ring around the LCD. The
     corrected bounding box is x:548-2029 y:239-1208, i.e. left 21.224% top
     16.415% width 57.359% height 66.552%. Its aspect (~1.528) is much
     closer to the printed LCD art's 1474/978 (~1.507) than the old box's
     ~1.654 was, so #lcd below (fit inside by height, never stretched) now
     leaves only a sliver of this background per side instead of a visible
     gap of case art. background is black to match screen.jpg's own baked-in
     black border (see #lcd-bg below): any remaining sliver, or any future
     re-measurement that's still slightly off, reads as screen surround
     instead of a bare hole. */
  position: absolute;
  left: 21.224%;
  top: 16.415%;
  width: 57.359%;
  height: 66.552%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#lcd {
  position: relative;
  height: 100%;
  aspect-ratio: 1474 / 978;
  overflow: hidden;
}

#lcd-bg, #lcd-layer, #lcd-glass { position: absolute; inset: 0; }

/* screen.jpg (and screen-color.jpg) hold the LCD art in the left 1547 of
   2048 texture pixels; the rest is white padding. Scale the image up so
   that left portion covers the whole box, then let #lcd's overflow:hidden
   clip the padding instead of stretching it across the display. */
#lcd-bg {
  width: 132.3852%;   /* 100 / (1547 / 2048) */
  height: 100%;
  object-fit: fill;
}

.lcd-segments { width: 100%; height: 100%; display: block; }

#lcd-glass {
  pointer-events: none;
  background: linear-gradient(150deg, rgba(255,255,255,.16), transparent 42%);
  mix-blend-mode: screen;
}

.touch-zone {
  position: absolute;
  border: 0;
  background: transparent;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* Generous thumb targets running to the screen edges. HIT is on the left.
   On the new case art GAME A, GAME B, and TIME are three separate purple
   buttons stacked in a single right-hand column above UP and DOWN (found
   by scanning case.jpg for the button colors: GAME A/B/TIME sit at image
   y 98-207 / 280-389 / 460-571 of 1456, UP/DOWN at y 850-979 / 1116-1241),
   matching the real hardware layout. The three mode zones are stacked
   top-to-bottom in that order, then a >=6vh gap, then UP/DOWN - keeping a
   reach for UP well clear of any mode button so it can never misfire a new
   game. tests/zones.test.js checks the gap and checks every zone against
   the LCD rect it derives from this file.

   Width is 22vw, well past the drawn buttons' actual footprint (they sit
   in roughly the rightmost 7-13% of the case) but still clear of the LCD,
   which now runs out to about 69vw. zone-hit is 26vw, clear of the LCD's
   left edge at about 31vw.

   Each zone's outer edge also carries the matching env(safe-area-inset-*)
   so it tracks the home indicator/sensor housing on whichever side it ends
   up on - landscape can be rotated either way, so the indicator can land
   on the left or the right. #device's own padding (above) does not help
   here: these zones are position: absolute against #device as their
   containing block, which per spec resolves against the padding edge, so
   that padding only ever shifts the in-flow case art, never an absolutely
   positioned child. tests/zones.test.js resolves env() as 0, the correct
   value on a non-notched desktop browser (the nominal viewport it tests
   against), so it checks the same geometry this file draws in the common
   case and the inset only ever grows a zone's protected margin further. */
#zone-hit  { left: env(safe-area-inset-left);  top: 0;    width: 26vw; height: 100vh; }
#zone-a    { right: env(safe-area-inset-right); top: 0;    width: 22vw; height: 14vh; }
#zone-b    { right: env(safe-area-inset-right); top: 14vh; width: 22vw; height: 14vh; }
/* TIME is a long-press-only zone (see input.js): a deliberate ~700ms hold,
   not a tap, since a slightly-off reach for GAME B could otherwise brush
   it. It's the third button in the mode column on this case art, not a
   top-bezel strip like the previous art. */
#zone-time { right: env(safe-area-inset-right); top: 28vh; width: 22vw; height: 14vh; }
/* zone-up starts at 49vh, 7vh clear of zone-time's bottom at 42vh - past
   the 6vh minimum so a reach for UP can't clip TIME (or GAME A/B above
   it) and silently start a new game or open the clock. */
#zone-up   { right: env(safe-area-inset-right); top: 49vh; width: 22vw; height: 17vh; }
/* bottom sits 5vh clear of the true screen edge, not flush against it, plus
   the real safe-area inset on top of that, so DOWN's tap doesn't land under
   the home indicator, where iOS eats it. */
#zone-down { right: env(safe-area-inset-right); bottom: calc(5vh + env(safe-area-inset-bottom)); width: 22vw; height: 29vh; }

/* Uncomment to see the hit areas while tuning them.
.touch-zone { background: rgba(255,0,0,.2); } */

#rotate-notice { display: none; }

@media (orientation: portrait) {
  #device { display: none; }
  #rotate-notice {
    display: grid;
    place-items: center;
    position: absolute;
    inset: 0;
    background: #8fa88f;
    color: #1a1a1a;
    font: 700 5vw system-ui, sans-serif;
    text-align: center;
  }
}