/* copied from
 * https://github.com/chrismaltby/gb-studio/blob/v2beta/appData/js-emulator/css/style.css
 * (see LICENSE.gbstudio)
 *
 * modifications are marked with binjgb below.
 */

/* Layout notes (Skull Buster changes)
 * ----------------------------------
 * The stock GB Studio sheet was built for a ~320pt phone and never sized the
 * canvas, so the game rendered at its intrinsic 144px height as a strip pinned
 * to the top of the screen while the fixed-position gamepad floated over the
 * bottom third of it. Three things changed:
 *
 *   1. body/#game/#controller are a real flex column, so the pad sits *below*
 *      the play area instead of on top of it.
 *   2. The canvas fills the play area; object-fit keeps the 10:9 aspect.
 *   3. Every hard-coded controller pixel is now a multiple of --u, which
 *      scales with the viewport, so the pad grows on a 430pt phone instead of
 *      huddling in the corner.
 *
 * 100dvh (not 100vh) matters: on mobile 100vh includes the retracted URL bar,
 * which produces an unreachable scroll region.
 */

html {
  height: 100%;
  /* Stops Android pull-to-refresh and iOS rubber-band chaining. Note WKWebView
   * bounce also needs `ios.scrollEnabled: false` in capacitor.config.ts --
   * CSS alone does not cover it. */
  overscroll-behavior: none;
}

body {
  background: #031921;
  color: #fff;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
    Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
  margin: 0;  /* binjgb */
  padding: 0;  /* binjgb */
  touch-action: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;  /* binjgb */
  overflow: hidden;
  overscroll-behavior: none;

  /* Base unit for the on-screen gamepad; every control below is a multiple of
   * it. Bounded so the pad never gets comically large on a tablet or unusably
   * small on a narrow phone.
   *
   * Width term:  d-pad (0..37u) + button cluster (38..72u) + margin = 75u.
   * Height term: the controller block is 50u tall and should not eat more
   *              than about a third of the screen. */
  --u: clamp(3.2px, min(100vw / 75, 100dvh / 160), 5.5px);

  /* Safe-area insets. These evaluate to 0 unless the viewport meta carries
   * viewport-fit=cover (index.html sets it). */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  display: flex;
  flex-direction: column;
  height: 100dvh;
}

#game {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;  /* without this the flex item refuses to shrink */
  width: 100%;
  padding-top: var(--safe-top);
  box-sizing: border-box;
  touch-action: none;
}

#game canvas {
  /* Stock sheet set neither, so the canvas kept its intrinsic 160x144. */
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Controller geometry, in --u units, laid out on a 75u-wide field:
 *
 *   0                   37 38                            72  75
 *   |<---- d-pad 36u --->| |<------ button cluster ------>|
 *
 * The stock sheet put B at right:100px beside a 184px d-pad, which overlapped
 * on any phone narrower than ~370px -- one of the things the deleted 320px
 * media query was patching around. These two regions cannot intersect at any
 * viewport size, so no per-width special cases are needed.
 *
 * A is deliberately larger than B: A is fire, held constantly, while B is only
 * an alternate "any key" on menus (src/game.c).
 */
#controller {
  display: none;  /* simple.js switches this on for touch devices */
  position: relative;
  flex: 0 0 auto;
  height: calc(var(--u) * 50);
  width: 100%;
  padding-bottom: var(--safe-bottom);
  touch-action: none;
  opacity: 0.8;
}

/* A gapless 3x3 grid of 12u cells. Adjacent hit zones mean a thumb sliding
 * across the cross never lands in a dead gap, which matters for the game's
 * 8-way movement. */
#controller_dpad {
  position: absolute;
  bottom: calc(var(--u) * 8);
  left: calc(var(--u) * 1);
  width: calc(var(--u) * 36);
  height: calc(var(--u) * 36);
}

#controller_dpad:before {
  content: "";
  display: block;
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 12);
  background: #5c5c5c;
  background: radial-gradient(
    ellipse at center,
    #5c5c5c 0%,
    #555 59%,
    #5c5c5c 60%
  );
  position: absolute;
  left: calc(var(--u) * 12);
  top: calc(var(--u) * 12);
}

#controller_left,
#controller_right,
#controller_up,
#controller_down {
  position: absolute;
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 12);
  background: #666;
  background: radial-gradient(ellipse at center, #666 0%, #5c5c5c 80%);
}

#controller_left {
  left: 0;
  top: calc(var(--u) * 12);
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

#controller_right {
  left: calc(var(--u) * 24);
  top: calc(var(--u) * 12);
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

#controller_up {
  left: calc(var(--u) * 12);
  top: 0;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

#controller_down {
  left: calc(var(--u) * 12);
  top: calc(var(--u) * 24);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* Upper row of the cluster: A at the outer edge, B inboard and smaller. */
#controller_a {
  position: absolute;
  bottom: calc(var(--u) * 19);
  right: calc(var(--u) * 3);
  width: calc(var(--u) * 18);
  height: calc(var(--u) * 18);
  border-radius: calc(var(--u) * 18);
  font-size: calc(var(--u) * 9);
}

#controller_b {
  position: absolute;
  bottom: calc(var(--u) * 21);
  right: calc(var(--u) * 23);
  width: calc(var(--u) * 14);
  height: calc(var(--u) * 14);
  border-radius: calc(var(--u) * 14);
  font-size: calc(var(--u) * 7);
}

.roundBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: #440f1f;
  background: #870a4c;
  background: radial-gradient(ellipse at center, #ab1465 0%, #8b1e57 100%);
  box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.2);
}

.capsuleBtn {
  font-weight: bold;
  font-size: calc(var(--u) * 2.6);
  letter-spacing: 0.05em;
  color: #111;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  width: calc(var(--u) * 14);
  height: calc(var(--u) * 8);
  border-radius: calc(var(--u) * 8);
  background: #222;
  background: radial-gradient(ellipse at center, #666 0%, #555 100%);
  box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.2);
}

/* Lower row of the cluster, clear of A/B above and the d-pad to the left. */
#controller_start {
  position: absolute;
  bottom: calc(var(--u) * 4);
  right: calc(var(--u) * 5);
}

#controller_select {
  position: absolute;
  bottom: calc(var(--u) * 4);
  right: calc(var(--u) * 21);
}

.btnPressed {
  opacity: 0.5;
}

/* The stock sheet had three media queries here. All are gone:
 *
 *   - a `max-device-width: 320px` portrait nudge, obsolete now that every
 *     dimension scales with --u (and max-device-width is deprecated: it
 *     reports hardware pixels, ignoring DPR);
 *   - `max-width:500px and max-height:400px { #controller { display: none } }`,
 *     which silently removed the *entire gamepad* on small landscape screens,
 *     leaving a touch-only player with no input at all;
 *   - a "PLEASE ROTATE" landscape nag plus a landscape re-centering rule.
 *
 * Landscape is now handled by simply letting the flex column reflow: the
 * canvas shrinks and the pad keeps its proportions. The app build additionally
 * locks to portrait (see capacitor.config.ts and the platform manifests).
 */