/*
 * FETCH, PATCH!  —  style.css
 * The page around the game: a dark, warm arcade-cabinet backdrop, the canvas in a thin frame in the
 * middle, one quiet line of help under it, and two touch buttons that only exist on touch devices.
 *
 * Who sets what:
 *   - PATCH.Screen (js/input.js) sets the canvas's width / height and toggles two classes on #stage:
 *       .bare     no frame, no margins (when that is what lets the picture grow a whole step)
 *       .compact  no room for the help line
 *   - PATCH.Input adds .touch to <html> on touch devices, and .is-down to a button while it is held.
 *   - #stage's PADDING is the contract with PATCH.Screen: the canvas is fitted into whatever the
 *     padding leaves free. Reserve space for anything new by adding padding here, not in script.
 */

:root {
  /* the game's palette (PATCH.PAL in js/core.js) */
  --ink: #1b1410;
  --umber: #4a3526;
  --tan: #b9a58a;
  --cream: #f4efe6;
  --midnight: #141831;
  --turquoise: #1fd1c1;
  --sunset: #f6a04d;

  --edge: 8px; /* least gap between the window and the frame */
  --bezel: 5px; /* dark surround between the frame and the picture */
  --pad-gap: 6px; /* around the touch buttons */
  --gutter: clamp(72px, 10vw, 88px); /* width of a touch button in landscape */
  --pads-min: 104px; /* least height of the button row in portrait */

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  color-scheme: dark;
}

/* ---- the page: nothing scrolls, selects, zooms or bounces ------------------------------------- */
html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html {
  background: var(--ink);
}

body {
  position: fixed; /* stops the rubber-band scroll on iOS */
  inset: 0;
  color: var(--tan);
  /* lamplight on dark wood panelling */
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 132px),
    radial-gradient(120% 85% at 50% 36%, #3b2a1d 0%, #271b13 48%, var(--ink) 100%);
}

/* ---- stage: the canvas is fitted into this box's content area --------------------------------- */
#stage {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(var(--edge), var(--safe-top)) max(var(--edge), var(--safe-right)) max(var(--edge), var(--safe-bottom))
    max(var(--edge), var(--safe-left));
}

#stage.bare {
  --edge: 0px;
  --bezel: 0px;
}

/* ---- the cabinet frame and the picture -------------------------------------------------------- */
#frame {
  position: relative;
  flex: none;
  padding: var(--bezel);
  border: 2px solid var(--umber);
  border-radius: 6px;
  background: #0f0b08;
  box-shadow:
    0 0 0 1px #0c0806,
    inset 0 0 0 1px rgba(0, 0, 0, 0.6),
    0 22px 60px rgba(0, 0, 0, 0.55),
    0 0 110px rgba(214, 122, 69, 0.09);
}

#stage.bare #frame {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#game {
  display: block;
  /* a sensible size until PATCH.Screen takes over */
  width: min(640px, 100vw);
  aspect-ratio: 16 / 9;
  background: var(--midnight);
  outline: none;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.notice {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 24px;
  text-align: center;
  font: 16px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  color: var(--cream);
}

/* ---- one quiet line of controls --------------------------------------------------------------- */
#help {
  flex: none;
  margin: 12px 0 0;
  font: 12px/16px ui-monospace, SFMono-Regular, 'Cascadia Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  letter-spacing: 0.12em;
  white-space: nowrap;
  color: rgba(185, 165, 138, 0.68); /* quiet, but a 12-year-old still has to be able to read it */
}

#help b {
  font-weight: 600;
  color: rgba(244, 239, 230, 0.85);
}

#stage.compact #help,
.touch #help {
  display: none;
}

/* ---- touch buttons ----------------------------------------------------------------------------
 * Landscape: one in each bottom corner, in gutters that #stage keeps clear of the canvas.
 * Portrait:  the canvas sits at the top and the two buttons share everything below it.
 * ------------------------------------------------------------------------------------------- */
#pads {
  display: none;
}

.pad {
  appearance: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: var(--gutter);
  height: clamp(72px, 44vh, 152px);
  border: 2px solid rgba(31, 209, 193, 0.5);
  border-radius: 14px;
  outline: none;
  background: rgba(31, 209, 193, 0.11);
  color: rgba(31, 209, 193, 0.92);
  font: 700 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  letter-spacing: 0.16em;
  text-indent: 0.16em; /* re-centre the label after its trailing letter-space */
  cursor: pointer;
  touch-action: none;
  pointer-events: auto;
  -webkit-user-select: none;
  user-select: none;
}

#btn-duck {
  border-color: rgba(246, 160, 77, 0.5);
  background: rgba(246, 160, 77, 0.11);
  color: rgba(246, 160, 77, 0.92);
}

.pad svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
  shape-rendering: crispEdges;
}

.pad.is-down {
  background: rgba(31, 209, 193, 0.34);
  border-color: var(--turquoise);
  color: var(--cream);
}

#btn-duck.is-down {
  background: rgba(246, 160, 77, 0.34);
  border-color: var(--sunset);
}

.touch #stage {
  padding-left: calc(max(var(--pad-gap), var(--safe-left)) + var(--gutter) + var(--pad-gap));
  padding-right: calc(max(var(--pad-gap), var(--safe-right)) + var(--gutter) + var(--pad-gap));
}

.touch #pads {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 max(var(--pad-gap), var(--safe-right)) max(var(--pad-gap), var(--safe-bottom)) max(var(--pad-gap), var(--safe-left));
  pointer-events: none; /* only the buttons themselves take touches */
}

@media (orientation: portrait) {
  .touch #stage {
    justify-content: flex-start;
    padding-left: max(var(--edge), var(--safe-left));
    padding-right: max(var(--edge), var(--safe-right));
    /* keep at least --pads-min free under the canvas... */
    padding-bottom: calc(max(var(--pad-gap), var(--safe-bottom)) + var(--pads-min));
  }

  .touch #pads {
    position: static;
    flex: 1 1 auto;
    align-self: stretch;
    align-items: stretch;
    gap: var(--pad-gap);
    /* ...and let the buttons grow back into that reserve, so they fill whatever is left */
    margin: var(--pad-gap) 0 calc(-1 * var(--pads-min));
    padding: 0 var(--pad-gap);
  }

  .touch .pad {
    flex: 1 1 0;
    width: auto;
    height: auto;
  }
}