html,
body {
  height: 100%;
  margin: 0;
  background: #000;
}

/* an iPhone turned sideways enlarges text it thinks is small: the buttons' labels and the tip's */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* A double tap never zooms the page (Matt's friend, 30 Sep 2026: mashing taps
   on a phone zoomed the game off the screen). On every device, from the first
   paint, before the game knows it's a touch screen: manipulation ends the
   double tap and keeps the rest. A touch screen then takes every gesture
   (body.touch, below), and src/touch.js holdZoom covers an iPhone's gaps.
   Never user-scalable=no: the phone's own zoom must always work */
html {
  touch-action: manipulation;
}

#stage {
  display: grid;
  place-items: center;
  height: 100%;
}

#screen {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #000;
  -webkit-tap-highlight-color: transparent; /* an iPhone greys the whole game on every tap otherwise */
}

/* the game has the focus from the start (main.js): no ring round the whole screen */
#screen:focus {
  outline: none;
}

/* Options > Screen: CRT (settings.js), an old TV over the game's own pixels,
   which stay sharp in every share, save and replay.
   - The glow: a blur under a game pixel wide (--px, set by main.js fit).
   - A mask darkens the corners, and they're rounded, like the glass.
   - Scanlines, where a game row is two screen pixels or more (body.scanlines,
     main.js fit; any less and they shimmer): a mask one game row tall (1/240
     of the canvas) lets the black page through the bottom of each row, and
     the brightness they take away is given back. A filter runs before a
     mask, so the lines stay crisp over the glow.
   - Nothing moves or flickers: no rolling bar. */
body.crt #screen {
  --lines: linear-gradient(to bottom, #000 60%, rgba(0, 0, 0, 0.5) 60%);
  --corners: radial-gradient(ellipse 75% 75% at center, #000 70%, rgba(0, 0, 0, 0.72) 100%);
  -webkit-mask-image: var(--corners);
  mask-image: var(--corners);
  filter: blur(calc(var(--px, 3px) * 0.22)) brightness(1.06) saturate(1.2);
  border-radius: calc(var(--px, 3px) * 5);
}

body.crt.scanlines #screen {
  -webkit-mask-image: var(--lines), var(--corners);
  mask-image: var(--lines), var(--corners);
  -webkit-mask-size: 100% calc(100% / 240), 100% 100%;
  mask-size: 100% calc(100% / 240), 100% 100%;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  filter: blur(calc(var(--px, 3px) * 0.22)) brightness(1.2) saturate(1.2);
}

/* an iPhone's one-time cards (src/hometip.js): in Safari, add the game to the
   home screen to play it full screen; in the home-screen app, bring the wins
   over with a password. Ordinary text, over a dimmed game */
.homecard {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  overflow: auto; /* a screen shorter than the card scrolls it, rather than cutting off its top */
  padding: 16px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.62);
  /* it scrolls, and nothing else: on an iPhone a scroller starts its own
     touch-action afresh, so a double tap or a pinch here would zoom the page,
     and the zoom would stay once the card closed */
  touch-action: pan-y;
}

.homecard .card {
  margin: auto; /* centred, while there's room */
  max-width: 320px;
  padding: 16px 18px;
  border: 2px solid #f8d878;
  border-radius: 10px;
  background: #101830;
  color: #f8f8f8;
  font: 15px/1.45 system-ui, -apple-system, sans-serif;
}

.homecard h2 {
  margin: 0 0 8px;
  font-size: 17px;
  color: #f8d878;
}

.homecard p {
  margin: 0 0 8px;
}

.homecard svg {
  vertical-align: -3px;
  margin: 0 2px;
  color: #58a8f8;
}

/* side by side where they fit, the main one gold */
.homecard .buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}

.homecard button {
  min-width: 100px; /* two side by side on a 320-pixel iPhone */
  min-height: 44px;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: #f8d878;
  color: #101830;
  font: 700 15px system-ui, -apple-system, sans-serif;
}

.homecard button.plain {
  background: transparent;
  box-shadow: inset 0 0 0 2px #f8d878;
  color: #f8d878;
}

/* read by screen readers, never seen (src/speak.js) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

noscript {
  color: #f8f8f8;
  font: 16px/1.5 system-ui, sans-serif;
  text-align: center;
}

/* ---------------------------------------------------------------- touch */
/* The pad only exists on touch screens; main.js sizes the canvas around it. */

#pad {
  display: none;
}

body.touch {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

body.touch #stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: env(safe-area-inset-top, 0px);
  box-sizing: border-box;
}

/* buttons scale with the screen so both clusters fit a 360px phone; the
   number pad's six keys a row share its width (14 px sides, 8 px gaps) */
body.touch {
  --dir: clamp(46px, 14vw, 60px);
  --hit: clamp(56px, 17vw, 72px);
  --key: min(var(--dir), calc((100vw - 68px) / 6));
}

body.touch #pad {
  position: relative;
  display: flex;
  flex: 1;
  align-items: flex-end; /* low, where thumbs rest */
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: 520px;
  box-sizing: border-box;
  padding: 44px 14px calc(22px + env(safe-area-inset-bottom, 0px));
}

/* Options > Punch buttons: LEFT puts the punches under the left thumb */
body.touch.lefty #pad {
  flex-direction: row-reverse;
}

#pad .cluster {
  display: grid;
  gap: 8px;
}

/* the moves: a cross, ▲ over ◀ ▼ ▶ (▲ is up in menus, and the head in a
   fight, as on the keyboard), with DUCK under them */
#pad .move {
  grid-template-columns: repeat(3, var(--dir));
  grid-template-rows: var(--dir) var(--dir) 42px;
}

#pad .move .up { grid-area: 1 / 2; }
#pad .move .left { grid-area: 2 / 1; }
#pad .move .down { grid-area: 2 / 2; }
#pad .move .right { grid-area: 2 / 3; }

#pad .move .wide {
  grid-column: 1 / 4;
  grid-row: 3;
}

/* In a fight ▲ goes, and ◀ ▼ ▶ take its row as well, twice as tall: L▲
   and R▲ send a punch to the head, all ▲ did there, and the dodges are
   the buttons wanted fastest (Matt, 2026-10-15). The cluster's size
   doesn't change, so neither does the game's. Menus keep the cross */
body:not(.pad-menu) #pad .move .up {
  display: none;
}

body:not(.pad-menu) #pad .move .left,
body:not(.pad-menu) #pad .move .down,
body:not(.pad-menu) #pad .move .right {
  grid-row: 1 / 3;
  border-radius: calc(var(--dir) / 2);
}

/* A controller in use (src/touch.js setPadAway): the pad steps aside and the
   game takes the screen, centred, so a phone sent to a TV looks like a
   console there. A touch brings the pad back */
body.touch.pad-away #pad {
  display: none;
}

body.touch.pad-away #stage {
  justify-content: center;
}

/* Menu controls, anywhere but a fight (src/touch.js): the arrows, BACK and
   OK in the big punch buttons' places, the fight's other buttons gone. Each
   cluster keeps its width, so sideways the game doesn't move */
body.pad-menu #pad [data-menu="none"] {
  display: none;
}

body.pad-menu #pad .move {
  grid-template-rows: var(--dir) var(--dir);
}

body.pad-menu #pad .punch {
  grid-template-rows: var(--hit);
}

body.pad-menu #pad .big {
  font-size: 15px;
  letter-spacing: 0.06em;
}

/* RETOUR is half as long again as BACK: in French the word goes by the
   button's size (at 15 px it ran 12 px past a small phone's) */
html:lang(fr) body.pad-menu #pad .big {
  font-size: calc(var(--hit) * 0.2);
  letter-spacing: 0.02em;
}

/* the password's number pad (body.pad-numpad), in two halves, 1-5 and
   delete, 6-0 and OK. Upright, a row each, reading as they count, whichever
   hand the punches suit: a phone's 3x4 keypad needs more height than a
   short phone leaves under the game. Sideways, where the clusters were */
#pad .keys {
  display: none;
  grid-template-columns: repeat(6, var(--key));
  grid-template-rows: var(--key);
}

body.pad-numpad #pad .keys {
  display: grid;
}

body.pad-numpad #pad .move,
body.pad-numpad #pad .punch {
  display: none;
}

body.touch.pad-numpad #pad {
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

#pad .keys button {
  border-radius: 12px;
}

#pad .keys .ok {
  color: #f8d878;
  font-size: 16px;
}

/* Elbows Up on top, head punches in the middle, body punches (the main ones) at the thumb */
#pad .punch {
  grid-template-columns: repeat(2, var(--hit));
  grid-template-rows: 44px 50px var(--hit);
}

#pad .punch .head {
  justify-self: center;
  width: max(44px, calc(var(--hit) - 12px)); /* never under a thumb's 44 */
  border-radius: 14px;
  font-size: 16px;
}

#pad .punch .star {
  grid-column: 1 / 3;
  justify-self: center;
  width: 50px;
}

#pad button {
  margin: 0;
  padding: 0;
  border: 2px solid rgba(248, 248, 248, 0.4);
  border-radius: 50%;
  background: rgba(248, 248, 248, 0.08);
  color: #f8f8f8;
  font: 700 20px/1 system-ui, sans-serif;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

#pad button.on {
  background: rgba(248, 56, 0, 0.6);
  border-color: #f83800;
}

#pad .wide {
  border-radius: 10px;
  font-size: 14px;
  letter-spacing: 0.12em;
}

#pad .star {
  color: #f8d878;
}

/* the golden maple leaf, the same pixels as the HUD's */
#pad .star svg {
  display: block;
  margin: 0 auto;
}

/* pause and full screen: 44 pixels tall, a thumb's size (Apple's guidance) */
#pad .pause {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 44px;
  border-radius: 8px;
  font-size: 13px;
}

/* full screen (src/fullscreen.js): corners out to go in, corners in to come
   out. Upright it sits over the moves, whose cluster is short: over the
   punches, a small phone's Elbows Up button came up into it */
#pad .fs {
  position: absolute;
  top: 8px;
  left: 14px;
  width: 44px;
  height: 44px;
  border-radius: 8px;
}

/* (sideways it keeps the top left, whichever hand: the pause has the top right) */
@media (orientation: portrait) {
  body.touch.lefty #pad .fs {
    left: auto;
    right: 14px;
  }
}

#pad .fs svg {
  display: block;
  margin: 0 auto;
}

#pad [hidden],
#pad .fs .exit,
body.fullscreen #pad .fs .enter {
  display: none;
}

body.fullscreen #pad .fs .exit {
  display: inline;
}

/* sideways phone: the game in the middle, a cluster on each side. The
   buttons go by the screen's height (the short side): by its width they
   were always the biggest, and on a small phone they left the game little
   room. main.js fit() measures them and puts the game between. */
@media (orientation: landscape) {
  body.touch {
    --dir: clamp(44px, 13vh, 60px);
    --hit: clamp(52px, 15vh, 72px);
    --dir: clamp(44px, 13svh, 60px); /* the height with the browser's bars showing, where it's known */
    --hit: clamp(52px, 15svh, 72px);
  }

  body.touch #stage {
    justify-content: center;
    padding-top: 0;
  }

  body.touch #pad {
    position: absolute;
    inset: 0;
    max-width: none;
    padding: 0;
    pointer-events: none;
  }

  body.touch #pad .cluster,
  body.touch #pad .pause,
  body.touch #pad .fs {
    position: absolute;
    pointer-events: auto;
  }

  /* the pause button has the top right: full screen takes the top left */
  body.touch #pad .fs {
    top: 12px;
    right: auto;
    left: calc(14px + env(safe-area-inset-left, 0px));
  }

  /* above the home bar of an iPhone without a button (its inset is 21 px
     sideways), where a thumb sliding up leaves the game */
  body.touch #pad .move {
    left: calc(14px + env(safe-area-inset-left, 0px));
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }

  body.touch #pad .punch {
    right: calc(14px + env(safe-area-inset-right, 0px));
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }

  /* the number pad's halves where the clusters were: 1-5 left, 6-0 right, either hand */
  body.touch.pad-numpad #pad .keys {
    grid-template-columns: repeat(3, var(--dir));
    grid-template-rows: repeat(2, var(--dir));
  }

  body.touch #pad .keys-a {
    left: calc(14px + env(safe-area-inset-left, 0px));
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }

  body.touch #pad .keys-b {
    right: calc(14px + env(safe-area-inset-right, 0px));
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }

  body.touch #pad .pause {
    top: 12px;
    left: auto;
    right: calc(14px + env(safe-area-inset-right, 0px));
    transform: none;
  }

  /* punches on the left, moves on the right (Options > Punch buttons) */
  body.touch.lefty #pad .move {
    left: auto;
    right: calc(14px + env(safe-area-inset-right, 0px));
  }

  body.touch.lefty #pad .punch {
    right: auto;
    left: calc(14px + env(safe-area-inset-left, 0px));
  }
}