* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%; background: #1a1a2e; color: #f4f4ff;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden; -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* Phones: size to the visible viewport rather than the browser's idea of the
     window, never rubber-band or pull-to-refresh behind the game, never let the
     OS inflate the text, and never wait 300ms to see if a tap was a double. */
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  overscroll-behavior: none; touch-action: manipulation;
}
@supports (height: 100dvh) { html, body { height: 100dvh; } }
#app { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
#game {
  display: block; touch-action: none; background: #1a1a2e;
  image-rendering: pixelated; image-rendering: crisp-edges;
}
#ui {
  position: absolute; left: 0; top: 0; width: 320px; height: 544px;
  transform-origin: top left; pointer-events: none;
}
.screen {
  position: absolute; inset: 0; display: none; flex-direction: column; align-items: center;
  gap: 8px; padding: 24px 20px; text-align: center; pointer-events: auto;
  background: rgba(26, 26, 46, 0.7);
  /* `safe center` centres a screen that fits and falls back to the top for one
     that does not, instead of centring it and spilling the ends off both edges -
     which is what the menu did on a phone, with its first and last lines landing
     outside the play area entirely. Anything still too tall scrolls. */
  justify-content: center;
  justify-content: safe center;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
/* Scroll, but never show a bar for it. A 15px scrollbar down the side of a
   320px-wide game is five percent of the play area spent on furniture, and the
   vertical one was narrowing the content enough to summon a horizontal one as
   well - two bars, both permanent, on a screen nobody needs to scroll. */
.screen, .list { scrollbar-width: none; -ms-overflow-style: none; }
.screen::-webkit-scrollbar, .list::-webkit-scrollbar { width: 0; height: 0; display: none; }
.screen.active { display: flex; }
.title { image-rendering: pixelated; margin: 0 0 2px; }
.screen h2 {
  font-size: 22px; margin: 0 0 4px; letter-spacing: 2px; text-transform: uppercase; font-weight: 800;
  color: #ffd93b; text-shadow: 3px 3px 0 #1a1a2e;
}
.screen p { margin: 2px 0; font-size: 13px; color: #f4f4ff; }
.screen .sub { font-size: 12px; color: #b4b8d6; }
.btn {
  display: block; width: 236px; padding: 9px 10px; margin: 0; border: 3px solid #1a1a2e; border-radius: 2px;
  background: #ffd93b; color: #1a1a2e; font-size: 14px; font-weight: 800; cursor: pointer; white-space: nowrap;
  text-transform: uppercase; letter-spacing: 1px; box-shadow: 3px 3px 0 #1a1a2e;
  transition: transform 0.05s, background 0.15s;
}
.btn:hover { background: #ffe36b; }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #1a1a2e; }
.btn.secondary { background: #22243a; color: #f4f4ff; border-color: #9a9fbf; font-size: 13px; padding: 7px 12px; }
.btn.secondary:hover { background: #2f3252; }
.btn.small { width: 150px; font-size: 12px; padding: 6px 10px; }
.btn.third { width: 88px; font-size: 11px; padding: 6px 4px; }   /* three to a row */
.row { display: flex; gap: 8px; align-items: center; justify-content: center; }
.charrow { gap: 6px; }
.btn.tiny { width: 34px; padding: 6px 0; font-size: 14px; }
.charcard {
  display: flex; align-items: center; gap: 10px; width: 186px; padding: 6px 10px; text-align: left;
  background: #12121f; border: 3px solid #1a1a2e; border-radius: 2px; box-shadow: 3px 3px 0 #1a1a2e;
}
.charpic canvas { image-rendering: pixelated; display: block; }
.chartext { display: flex; flex-direction: column; gap: 2px; }
.chartext b { color: #ffd93b; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; }
.chartext .blurb { font-size: 11px; line-height: 1.25; color: #b4b8d6; }
input.seed {
  width: 138px; padding: 7px 8px; border-radius: 2px; border: 3px solid #9a9fbf; background: #12121f; color: #fff;
  /* 16px exactly: anything smaller and iOS Safari zooms the page in when the
     field takes focus, and there is no zooming back out of a game. */
  font-size: 16px; text-transform: uppercase; font-family: monospace; letter-spacing: 1px;
  box-shadow: 3px 3px 0 #1a1a2e;
}
input.seed:focus { outline: none; border-color: #ffd93b; }
.stat { font-size: 15px; color: #fff; }
.stat b { color: #ffd93b; }
.cup { line-height: 0; margin: 4px 0; }
.cupimg { image-rendering: pixelated; vertical-align: middle; }
.cupnone { color: #9a9fbf; }
.list {
  /* Do not let the flex column squeeze this down to a slot: on a phone with a
     few levels played it was being shrunk to about a row and a half. It keeps
     its height and the menu scrolls instead. */
  flex: 0 0 auto;
  width: 100%; max-height: 170px; overflow-y: auto; overscroll-behavior: contain;
  font-size: 12px; text-align: left; background: #12121f;
  border: 3px solid #1a1a2e; border-radius: 2px; box-shadow: 3px 3px 0 #1a1a2e; padding: 4px 8px;
}
.list .item {
  display: flex; justify-content: space-between; align-items: center; padding: 4px 2px;
  border-bottom: 1px solid rgba(255,255,255,0.08); cursor: pointer;
}
.list .item:hover { background: rgba(255, 217, 59, 0.12); }
.list .item span:first-child { font-family: monospace; letter-spacing: 1px; color: #ffd93b; }
.list .item .cupimg { margin-right: 4px; }
.credit { font-size: 10px; color: #9a9fbf; margin-top: 6px; }
.credit.link { cursor: pointer; text-decoration: underline; margin-top: 0; }
.charwrap { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
/* The difficulty toggle: three buttons, the chosen one lit. It reads as a
   setting rather than a button you press, so the unchosen two stay quiet and
   the chosen one takes the same yellow the primary buttons use. */
.diffwrap { display: flex; flex-direction: column; align-items: center; width: 100%; gap: 2px; }
.diffrow { gap: 5px; }
/* Wide enough for the longest of the three words at this size - measured, not
   guessed: at 74px 'Punishing' overflowed its button by six pixels and the
   end of the word was simply not drawn. The row comes out a little wider
   than the 236px buttons above it, which the 320px menu has room for. */
.btn.diff { width: 84px; letter-spacing: 0; }
.btn.diff.on { background: #ffd93b; color: #1a1a2e; border-color: #1a1a2e; }
.btn.diff.on:hover { background: #ffe36b; }
.diffwrap .sub { margin: 0; font-size: 10px; }
/* developer mode, while it is on: the one line on the menu that is a warning */
.sub.dev { color: #ff8a9c; font-size: 11px; }
/* the three marks a seed can carry */
.marks { display: flex; justify-content: center; gap: 10px; margin: 2px 0 0; font-size: 10px; color: #7f86a8; }
.marks .got { color: #ffcc4d; }
.list.tall { max-height: 260px; }

/* ------------------------------------------------------------------ touch */
/* The overlay is scaled with the canvas, so a CSS pixel in here is a logical
   game pixel: on a phone that is about 1.2 real pixels. These sizes are what it
   takes for the small controls to clear the 44px a thumb actually needs. */
@media (pointer: coarse) {
  .btn { padding: 12px 10px; }
  .btn.secondary { padding: 11px 12px; }
  .btn.small { padding: 10px 10px; font-size: 13px; }
  .btn.third { padding: 10px 4px; font-size: 12px; }
  /* The three difficulty names are longer than 'Sound: On', and a thumb-sized
     button with the word clipped off it reads as a bug. There is room across
     the screen for wider ones here, so they get it. */
  .btn.diff { width: 78px; font-size: 11px; padding: 10px 2px; }
  .btn.tiny { width: 40px; padding: 11px 0; }
  .list { max-height: 120px; }
  .list.tall { max-height: 200px; }
  .list .item { padding: 7px 2px; }
  .screen { gap: 6px; padding: 12px 12px; }
}
.btn, input.seed, .list .item { touch-action: manipulation; }

/* A phone held sideways gets a tall thin game in the middle of a wide screen.
   Say so rather than letting them squint at it.

   `pointer: coarse` is not decoration: without it this is a rule about the SHAPE
   of a window, and a desktop browser that is merely short - a half-height window,
   a laptop with the dev tools docked underneath - is wider than it is tall and
   under 520px, so it was being told to turn its phone upright. The primary
   pointer being a finger is what actually distinguishes the case this is for.
   The same query lives in game.js, which pauses the climb behind the card; the
   two have to agree or a desktop pauses with nothing on screen to explain it. */
#rotate {
  position: fixed; inset: 0; display: none; z-index: 10;
  align-items: center; justify-content: center; text-align: center;
  background: #1a1a2e; color: #f4f4ff; font-size: 15px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; padding: 24px;
}
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  #rotate { display: flex; }
}

/* The panel that shows when the game never boots - see index.html. It has to
   read on a browser that could not run the game, so it asks for nothing newer
   than flexbox - `inset` is spelled out the long way for the same reason - and
   `[hidden]` is spelled out because `display: flex` would otherwise win
   against the attribute. */
#boothelp {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: flex; z-index: 20;
  flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: #1a1a2e; color: #f4f4ff;
  font-size: 15px; line-height: 1.6; padding: 24px;
}
#boothelp[hidden] { display: none; }
#boothelp p { max-width: 24em; margin: 0 0 12px; }
#boothelp b { color: #ffd93b; }