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

html, body {
  width: 100%;
  height: 100%;
  background: #10131c;
  overflow: hidden;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* The whole screen is the jump button on a phone. Without these a quick
     double tap zooms, a long press selects the hint text and pops up the copy
     menu, and every tap flashes grey. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The canvas is a small pixel buffer blown up by an integer factor.
   image-rendering: pixelated is what keeps the pixels hard-edged. */
#game {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #f9c489;
  box-shadow: 0 0 0 2px #1b2030, 0 12px 40px rgba(0, 0, 0, .6);
}

/* UI layer sits exactly over the canvas. JS sets its width/height to match
   the scaled canvas; the transform keeps it centred on top of it. */
#ui {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .55);
  /* Sizes below are in cqh, a hundredth of this box's height, so the words
     scale with the picture rather than with the window around it. On a phone
     the two are far apart. */
  container-type: size;
}

/* --- the title card ------------------------------------------------------
   Everything behind this is pixels; the words are not. Canvas text would be
   magnified along with the pixel buffer and turn to mush, so the logo is DOM
   and renders at the monitor's real resolution. */
#title {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Just enough shade under the middle to hold the type off a bright sky,
     without hiding the rooftops it is sitting on. */
  background: radial-gradient(ellipse at 50% 46%,
              rgba(24, 14, 26, .45) 0%,
              rgba(24, 14, 26, .16) 52%,
              rgba(24, 14, 26, 0) 78%);
}

#logo {
  font-family: "Arial Black", "Segoe UI Black", Impact, sans-serif;
  font-size: clamp(42px, 15.5cqh, 138px);
  line-height: .9;
  letter-spacing: -.025em;
  text-shadow: none;
  filter: drop-shadow(0 4px 0 #4a2b1e) drop-shadow(0 12px 24px rgba(0, 0, 0, .55));
}

/* Sunlit tuf, then the orange off the Kinder wrapper. */
#logo .hen { color: #ffe9cf; }
#logo .go  { color: #f79320; }

#tagline {
  margin-top: .5em;
  font-size: clamp(11px, 2.6cqh, 22px);
  font-weight: 700;
  letter-spacing: .34em;
  text-indent: .34em;          /* letter-spacing pads the right, not the left */
  text-transform: uppercase;
  color: #ffe9cf;
  opacity: .92;
  text-shadow: 0 2px 0 rgba(48, 24, 18, .7);
}

/* #ui is pointer-events:none so the canvas stays clickable; this opts back in. */
#playButton {
  pointer-events: auto;
  cursor: pointer;
  margin-top: 1.5em;
  padding: .42em 1.5em;
  font: inherit;
  font-size: clamp(16px, 4cqh, 34px);
  font-weight: 800;
  letter-spacing: .06em;
  color: #4a2b1e;
  background: linear-gradient(#ffd9a4, #f79320);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 4px 0 #a8560d, 0 10px 22px rgba(0, 0, 0, .45);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
#playButton:hover { filter: brightness(1.07); transform: translateY(-2px); box-shadow: 0 6px 0 #a8560d, 0 14px 26px rgba(0, 0, 0, .45); }
#playButton:active { transform: translateY(2px); box-shadow: 0 2px 0 #a8560d, 0 6px 14px rgba(0, 0, 0, .45); }
#playButton:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

#titleHint {
  margin-top: 1.1em;
  font-size: clamp(10px, 2cqh, 16px);
  font-weight: 600;
  letter-spacing: .12em;
  opacity: .75;
}

/* --- the playing HUD ----------------------------------------------------- */

#hud {
  position: absolute;
  top: 2%;
  left: 2.5%;
  right: 2.5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: clamp(12px, 2.6cqh, 22px);
  font-weight: 700;
  letter-spacing: .04em;
}

#hudGoal { display: flex; align-items: center; gap: .45em; }
#hudGoal .egg {
  width: auto;
  height: clamp(20px, 4.2cqh, 36px);
  display: block;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45));
}

/* Level with his own record, or past it. Worth noticing. */
#hudGoal.full { color: #ffd36b; }
#hudGoal.full .egg { filter: drop-shadow(0 0 6px rgba(255, 211, 107, .9)); }

#hudRight { display: flex; align-items: center; gap: 1em; }
#hudBest,
#hudDeaths { opacity: .75; font-weight: 600; }

/* The speed the run has wound up to. Tabular figures so the number does not
   jog sideways as it counts up. */
#hudSpeed {
  opacity: .75;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* As fast as it goes. Worth noticing, like passing your own best. */
#hudSpeed.topped { color: #ffd36b; opacity: 1; }

/* The speaker. #ui is pointer-events:none so the canvas stays clickable;
   this one control opts back in. */
#hudAudio {
  pointer-events: auto;
  cursor: pointer;
  background: none;
  border: 0;
  padding: .1em .2em;
  color: #fff;
  opacity: .8;
  line-height: 0;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .55));
  transition: opacity .15s ease, transform .15s ease;
}
#hudAudio:hover { opacity: 1; transform: scale(1.12); }
#hudAudio:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
#hudAudio svg { width: clamp(40px, 6.8cqh, 60px); height: auto; display: block; }

.spk-body { fill: currentColor; }
.spk-wave { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.spk-cross { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; display: none; }

#hudAudio.muted { opacity: .55; }
#hudAudio.muted .spk-wave { display: none; }
#hudAudio.muted .spk-cross { display: block; }

#hint {
  position: absolute;
  bottom: 5%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: clamp(10px, 2.1cqh, 18px);
  font-weight: 600;
  opacity: .85;
  transition: opacity .6s ease;
}

/* It sits over the building fronts, and the window tiles cut straight through
   bare text. */
#hint span {
  padding: .3em .9em;
  border-radius: 999px;
  background: rgba(10, 14, 24, .4);
}

#message {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4em;
  text-align: center;
  font-size: clamp(18px, 5.5cqh, 46px);
  font-weight: 800;
  letter-spacing: .02em;
  background: rgba(10, 14, 24, .55);
}

#message .sub {
  font-size: .45em;
  font-weight: 600;
  opacity: .85;
}

#debug {
  position: absolute;
  top: 8%;
  left: 2.5%;
  font-family: Consolas, "Courier New", monospace;
  font-size: clamp(9px, 1.8cqh, 15px);
  line-height: 1.45;
  white-space: pre;
  background: rgba(10, 14, 24, .6);
  padding: .5em .7em;
  border-radius: 4px;
  text-shadow: none;
}

.hidden { display: none !important; }

/* --- phones and tablets ---------------------------------------------------
   Each hint is written twice, for keys and for fingers, and the device picks
   one. A laptop with a touch screen still has a keyboard and a mouse, so it
   keeps the key wording. */
.touch { display: none; }

@media (hover: none) and (pointer: coarse) {
  .keys { display: none; }
  .touch { display: inline; }

  /* A thumb needs a bigger target than a cursor does. */
  #hudAudio {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Held upright. The game is 16:9 and would be a thin strip across the middle,
   so this covers it until the phone is turned. input.js ignores taps under the
   same query. */
#rotate {
  display: none;
  position: fixed;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2em;
  padding: 0 16px;
  text-align: center;
  background: #10131c;
  color: #ffe9cf;
  font-size: clamp(18px, 5.5vw, 28px);
  font-weight: 700;
  letter-spacing: .02em;
}

@media (orientation: portrait) and (pointer: coarse) {
  #rotate { display: flex; }
}

#rotate svg { width: 30vw; max-width: 140px; height: auto; }
#rotate .was { fill: none; stroke: currentColor; stroke-width: 2.4; opacity: .4; }
#rotate .now { fill: none; stroke: #f79320; stroke-width: 2.8; }
#rotate .turn { fill: none; stroke: #f79320; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }