/* styles.css — everything outside the canvas.
   The game itself draws nothing here; this only decides how the canvas
   sits on the page and how big it gets. */

/* THE TYPEFACES, SELF-HOSTED.

   Ubuntu for anything read, Ubuntu Mono for anything that changes while
   being read — see src/fonts.js for why there are two, and for the gate
   that stops a run rendering in the fallback.

   No Google Fonts request: a convention-centre connection is the design
   constraint, and this is the same no-CDN posture as vendoring Kontra.
   Latin subset only. Licence: assets/fonts/UBUNTU-LICENSE.txt.

   font-display: block, because the game gates on fonts.ready anyway —
   swapping mid-run is the one behaviour we don't want. */
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url("assets/fonts/ubuntu-latin-300-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url("assets/fonts/ubuntu-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url("assets/fonts/ubuntu-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Ubuntu Mono";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("assets/fonts/ubuntu-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Ubuntu Mono";
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url("assets/fonts/ubuntu-mono-latin-700-normal.woff2") format("woff2");
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #070707;
  overflow: hidden;

  /* Stops the browser trying to scroll, zoom or text-select while
     you're tapping to play. Without this, mobile taps feel broken. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  font-family: Ubuntu, system-ui, "Segoe UI", Roboto, sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The canvas keeps its 360:640 shape and grows to fill whatever space is
   available, with black bars filling the leftover.

   The width is worked out from the screen HEIGHT, then capped at the
   screen width — that way the shape is preserved whichever way round the
   screen is tall or wide. (Setting height:100% with a max-width instead
   looks like it should work, but on a tall phone the width gets capped
   while the height doesn't, and the whole game comes out stretched.)

   Kontra converts touch positions back to game coordinates on its own,
   so this scaling never breaks the controls. */
#game {
  display: block;
  aspect-ratio: 360 / 640;
  width: min(100vw, calc(100vh * 360 / 640));   /* fallback for older browsers */
  width: min(100vw, calc(100dvh * 360 / 640));
  height: auto;
  background: #070707;
}

/* The leaderboard handle field — the only DOM element over the canvas.

   The id is deliberately not "name". autocomplete="off" is only part of
   the defence: browsers fall back to field name, id and label heuristics
   when deciding whether to offer a saved contact, and an id of
   "name-box" with a label reading "your name" was arguing the opposite
   of the attribute.

   It is positioned in JavaScript (src/nameEntry.js) rather than here,
   because where it goes is a GAME coordinate that has to be converted
   through however much CSS stretched the canvas. This rule only decides
   what it looks like, and that it starts hidden. */
#leaderboard-handle {
  position: fixed;
  display: none;              /* nameEntry.js turns it on for one screen */
  box-sizing: border-box;
  margin: 0;
  padding: 0 10px;
  border: 2px solid #FF9500;
  border-radius: 10px;
  background: #070707;
  color: #FFFFFF;
  font-family: inherit;
  font-weight: 700;
  text-align: center;
  letter-spacing: 1px;
  outline: none;

  /* body switches text selection off so tapping to play never selects
     anything. An input needs it back, or iOS refuses to put a caret in
     it and the keyboard never appears. */
  -webkit-user-select: text;
  user-select: text;
  touch-action: auto;
}

#leaderboard-handle::placeholder {
  color: rgba(128, 138, 159, 0.7);
  font-weight: 500;
  letter-spacing: 0;
}