:root {
  --ink: #3a2519;
  --cream: #fff8ea;
  --cream-2: #f6e8cc;
  --wood: #8a5a33;
  --wood-2: #6d4128;
  --gold: #ffc94a;
  --good: #3fae4f;
  --bad: #d9534a;
  /* The screen's safe areas (docs/PLATFORMS.md, "Layout"): under a notch, a
     cut-out or the home indicator. What the player reads or touches stays
     inside them. The tests set these to try insets the browsers here lack. */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  /* The site header, which takes the top inset (in a home-screen app, the status bar). */
  --header-h: calc(48px + var(--safe-t));
  --hud-h: 44px;
  /* The smallest text: 14 px on a desktop, 15 on a tablet, 13 on a phone. */
  --t-min: 14px;
  --accent: #6fae4f;
  --radius: 14px;
  color-scheme: light;
}

/* A tablet: a touch screen at least 600 px each way. */
@media (pointer: coarse) {
  :root {
    --t-min: 15px;
  }
}

/* A phone: a touch screen under 600 px one way or the other. */
@media (pointer: coarse) and (max-width: 599px), (pointer: coarse) and (max-height: 599px) {
  :root {
    --t-min: 13px;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: #2b1a10;
  color: #f7ecdc;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a {
  color: var(--gold);
}

button {
  font: inherit;
  color: inherit;
  touch-action: manipulation;
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

.site-header {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

/* The page keeps the game inside the side insets (a phone held sideways);
   the site header takes the top one. */
.page {
  padding: 8px max(8px, var(--safe-r)) 40px max(8px, var(--safe-l));
}

/* ---------- Game area ---------- */

/* No scrolling, zooming, selection or long-press menu mid-play
   (docs/PLATFORMS.md): the game takes no touch gestures but the menus' own
   scrolling (.screen), and main.js prevents Safari's pinch and the context
   menu over it.

   The game draws edge to edge; what the player reads or touches keeps inside
   the insets that reach into the game (--in-*): on the page only the bottom
   one (the home indicator of a home-screen app), in full screen all four.
   main.js measures them (#probe) and sets --pad-*: each inset, with touch
   controls a further 16 px in at the sides and the foot. --clear-top keeps
   the top middle clear for the site's "Leave full screen" in full screen. */
.game-root {
  --in-t: 0px;
  --in-r: 0px;
  --in-b: var(--safe-b);
  --in-l: 0px;
  --pad-t: 0px;
  --pad-r: 0px;
  --pad-b: 0px;
  --pad-l: 0px;
  --clear-top: 0px;
  --hud-top: max(6px, var(--pad-t));
  --hud-x: 6px;
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: none;
  height: max(440px, calc(100vh - var(--header-h) - 16px));
  height: max(440px, calc(100dvh - var(--header-h) - 16px));
  background: #3a2519;
  border-radius: var(--radius);
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* Full screen through the site's button: the game fills the screen edge to
   edge. The sides take the larger inset both ways (a phone held sideways has
   its camera on one side), so the game's middle is the screen's, where the
   site puts "Leave full screen" (44 px, 8 px from the top or under a notch). */
.game-root:fullscreen {
  --in-t: var(--safe-t);
  --in-r: max(var(--safe-l), var(--safe-r));
  --in-l: max(var(--safe-l), var(--safe-r));
  --clear-top: calc(max(8px, var(--safe-t)) + 52px);
  max-width: none;
  max-height: none;
  border-radius: 0;
}

.game-root:-webkit-full-screen {
  --in-t: var(--safe-t);
  --in-r: max(var(--safe-l), var(--safe-r));
  --in-l: max(var(--safe-l), var(--safe-r));
  --clear-top: calc(max(8px, var(--safe-t)) + 52px);
  max-width: none;
  max-height: none;
  border-radius: 0;
}

/* The insets where they reach into the game, for main.js to measure. */
.probe {
  position: absolute;
  inset: 0;
  padding: var(--in-t) var(--in-r) var(--in-b) var(--in-l);
  font-size: var(--t-min);
  visibility: hidden;
  pointer-events: none;
}

#stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* ---------- HUD ---------- */

/* The HUD: Pause and the acorns with the star goals on the left, the combo
   and what is left on the right. In full screen on a wide screen the halves
   keep the top middle clear for "Leave full screen"; on a narrow one the
   HUD moves down below it. */
.hud {
  position: absolute;
  top: var(--hud-top);
  left: max(var(--hud-x), var(--pad-l));
  right: max(var(--hud-x), var(--pad-r));
  height: var(--hud-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
  z-index: 3;
}

.hud-l,
.hud-r {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.hud-l {
  flex: 1 1 auto;
}

.hud-r {
  flex: none;
}

.hud-l > *,
.hud-r > * {
  pointer-events: auto;
}

.hud-btn {
  flex: none;
  width: 44px;
  height: 44px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--cream);
  color: var(--ink);
  display: grid;
  place-items: center;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
}

.hud-btn svg {
  width: 18px;
  height: 18px;
  fill: var(--ink);
}

.hud-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.hud-mid {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
  max-width: 520px;
  height: 44px;
  padding: 0 12px 0 8px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
}

.hud-money {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 20px;
  font-weight: 900;
  min-width: 64px;
  font-variant-numeric: tabular-nums;
}

.acorn {
  display: inline-block;
  width: 20px;
  height: 22px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'%3E%3Cellipse cx='10' cy='13.5' rx='6.2' ry='7' fill='%23c7843e' stroke='%233a2519' stroke-width='1.6'/%3E%3Cpath d='M2.5 9.5Q10 1.5 17.5 9.5Q10 11.5 2.5 9.5z' fill='%237a4a26' stroke='%233a2519' stroke-width='1.6'/%3E%3Cpath d='M10 5L11.3 1.5' stroke='%233a2519' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.hud-goal {
  position: relative;
  flex: 1 1 auto;
  min-width: 60px;
  height: 22px;
}

.hud-goal .bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 5px;
  height: 12px;
  border-radius: 8px;
  background: #e2d3b9;
  border: 2px solid var(--ink);
  overflow: hidden;
}

.hud-goal .bar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #ffd24a, #f29a2a);
  transition: width 0.2s;
}

.hud-goal .tick {
  position: absolute;
  top: -1px;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cpath d='M0-10L2.9-4 9.5-3.1 4.8 1.5 5.9 8.1 0 5 -5.9 8.1 -4.8 1.5 -9.5-3.1 -2.9-4z' fill='%23b9a58c' stroke='%233a2519' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.hud-goal .tick.on {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cpath d='M0-10L2.9-4 9.5-3.1 4.8 1.5 5.9 8.1 0 5 -5.9 8.1 -4.8 1.5 -9.5-3.1 -2.9-4z' fill='%23ffcf3a' stroke='%233a2519' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
  animation: pop 0.4s ease-out;
}

.hud-goal .tick[data-k='2'] {
  margin-left: -20px;
}

.hud-lives {
  display: flex;
  gap: 4px;
}

.hud-lives i {
  width: 18px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cpath d='M0 8C-12-1-7-10 0-4C7-10 12-1 0 8z' fill='%23d9cbbd' stroke='%233a2519' stroke-width='1.5'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.hud-lives i.on {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cpath d='M0 8C-12-1-7-10 0-4C7-10 12-1 0 8z' fill='%23e8454f' stroke='%233a2519' stroke-width='1.5'/%3E%3C/svg%3E");
}

.hud-combo {
  flex: none;
  padding: 7px 10px;
  border-radius: 12px;
  border: 2px solid var(--ink);
  background: #ffb0e0;
  color: var(--ink);
  font-weight: 900;
  font-size: max(15px, var(--t-min));
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
  animation: pop 0.25s ease-out;
}

.hud-info {
  flex: none;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(58, 37, 25, 0.78);
  color: #fff8ea;
  font-weight: 800;
  font-size: max(14px, var(--t-min));
  white-space: nowrap;
}

/* Full screen, wide enough for both halves beside "Leave full screen". */
.game-root:fullscreen .hud-l,
.game-root:fullscreen .hud-r {
  max-width: calc(50% - 30px);
}

.game-root:-webkit-full-screen .hud-l,
.game-root:-webkit-full-screen .hud-r {
  max-width: calc(50% - 30px);
}

/* Full screen on a screen too narrow for that (a phone held upright): the HUD
   moves down below "Leave full screen". */
@media (max-width: 599px) {
  .game-root:fullscreen {
    --hud-top: var(--clear-top);
  }

  .game-root:-webkit-full-screen {
    --hud-top: var(--clear-top);
  }

  .game-root:fullscreen .hud-l,
  .game-root:fullscreen .hud-r,
  .game-root:-webkit-full-screen .hud-l,
  .game-root:-webkit-full-screen .hud-r {
    max-width: none;
  }
}

/* A touch screen in full screen: the HUD keeps 24 px from the sides, clear of
   a phone's rounded corners. */
@media (pointer: coarse) {
  .game-root:fullscreen {
    --hud-x: 24px;
  }

  .game-root:-webkit-full-screen {
    --hud-x: 24px;
  }
}

@keyframes pop {
  0% {
    transform: scale(0.6);
  }
  70% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

.coach {
  position: absolute;
  top: max(calc(var(--hud-top) + var(--hud-h) + 8px), var(--clear-top));
  left: 50%;
  transform: translateX(-50%);
  max-width: min(92%, 560px);
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(58, 37, 25, 0.88);
  color: #fff8ea;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  text-align: center;
  pointer-events: none;
  z-index: 3;
}

/* On a short screen, above the counter, clear of the orders (main.js). */
.coach.low {
  top: auto;
  bottom: var(--coach-low, 40%);
}

.toast {
  position: absolute;
  left: 50%;
  bottom: max(16px, calc(var(--pad-b) + 8px));
  transform: translateX(-50%);
  max-width: 90%;
  padding: 9px 16px;
  border-radius: 12px;
  background: rgba(30, 18, 10, 0.92);
  color: #fff8ea;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  pointer-events: none;
  z-index: 6;
}

/* ---------- Screens ---------- */

/* Menus start below "Leave full screen" in full screen, and keep inside the
   safe areas, their buttons 16 px in. */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, var(--clear-top), var(--pad-t)) max(12px, var(--pad-r)) max(12px, var(--pad-b)) max(12px, var(--pad-l));
  background: rgba(30, 18, 10, 0.55);
  z-index: 5;
  overflow: auto;
  touch-action: pan-y;
}

/* In full screen there is no page behind to scroll. */
.game-root:fullscreen .screen {
  overscroll-behavior: contain;
}

.game-root:-webkit-full-screen .screen {
  overscroll-behavior: contain;
}

.screen.clear {
  background: linear-gradient(180deg, rgba(30, 18, 10, 0.15), rgba(30, 18, 10, 0.55));
}

.card {
  width: min(100%, 440px);
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  display: flex;
  flex-direction: column;
  gap: 10px;
  --pad: 18px;
  padding: var(--pad);
  border-radius: 18px;
  border: 3px solid var(--ink);
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.3), 0 16px 40px rgba(0, 0, 0, 0.35);
  text-align: center;
  animation: rise 0.22s ease-out;
}

.card.wide {
  width: min(100%, 720px);
  height: 100%;
  text-align: left;
}

@keyframes rise {
  from {
    transform: translateY(14px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.card h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
}

.card h3 {
  margin: 0;
  font-size: 18px;
}

.card h4 {
  margin: 0;
  font-size: 16px;
}

.card p {
  margin: 0;
  line-height: 1.4;
}

.sub {
  color: #6d5040;
  font-size: 15px;
}

.scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px 2px 8px;
  min-height: 0;
}

.menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.row {
  display: flex;
  gap: 8px;
}

.row > * {
  flex: 1 1 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 46px;
  padding: 8px 14px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.15;
  box-shadow: 0 4px 0 var(--ink);
  transition: transform 0.05s;
}

.btn span {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.btn small {
  font-weight: 600;
  font-size: var(--t-min);
  opacity: 0.8;
}

.btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--ink);
}

.btn:focus-visible {
  outline: 3px solid #4f8fe6;
  outline-offset: 2px;
}

.btn.primary {
  background: linear-gradient(180deg, #ffd766, #f5a623);
}

.btn.big {
  min-height: 60px;
  font-size: 20px;
}

.btn.small {
  min-height: 44px;
  min-width: 44px;
  padding: 4px 12px;
  font-size: max(14px, var(--t-min));
  box-shadow: 0 3px 0 var(--ink);
}

.btn.toggle {
  background: var(--cream-2);
}

.bar-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}

.bar-top h2 {
  text-align: center;
  font-size: 19px;
}

.bar-top h2 small {
  display: block;
  font-size: var(--t-min);
  font-weight: 700;
  opacity: 0.85;
}

.wallet {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 900;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.wallet.big {
  justify-content: center;
  font-size: 22px;
}

.wallet.big span {
  font-weight: 600;
  font-size: 15px;
}

canvas.icon {
  display: inline-block;
  vertical-align: middle;
  flex: none;
}

.stars {
  display: inline-flex;
  gap: 1px;
  vertical-align: middle;
}

/* Title */

.title-card {
  gap: 12px;
}

.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.logo-a {
  font-size: 46px;
  color: #e8703a;
  text-shadow: 0 3px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink);
  -webkit-text-stroke: 1px var(--ink);
}

.logo-b {
  font-size: 34px;
  color: #6fae4f;
  text-shadow: 0 3px 0 var(--ink);
  -webkit-text-stroke: 1px var(--ink);
}

.sound-row {
  justify-content: center;
}

/* Map */

.eatery {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  border: 2px solid var(--ink);
  background: #fff;
  border-left: 8px solid var(--accent);
}

.eatery.locked {
  opacity: 0.6;
  background: var(--cream-2);
}

.eatery-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.eatery-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 800;
}

.blurb {
  color: #6d5040;
  font-size: max(14px, var(--t-min));
}

.levels {
  display: grid;
  grid-template-columns: repeat(5, minmax(44px, 1fr));
  gap: 8px;
}

.lvl {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 44px;
  min-height: 52px;
  padding: 2px 0;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--cream);
  color: var(--ink);
  font-weight: 900;
  font-size: 17px;
  box-shadow: 0 3px 0 var(--ink);
}

.lvl.done {
  background: #fff3c9;
}

.lvl.locked {
  opacity: 0.55;
  box-shadow: none;
  font-size: max(14px, var(--t-min));
}

.lvl:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--ink);
}

.lvl:focus-visible {
  outline: 3px solid #4f8fe6;
  outline-offset: 2px;
}

.rush-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: #fff;
}

.rush-row > div {
  flex: 1;
}

.rush-row.locked {
  opacity: 0.6;
}

/* Intro and results */

.goals {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.goal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  border-radius: 10px;
  background: #fff;
  border: 2px solid var(--ink);
}

.goal b {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 17px;
}

.meta {
  color: #6d5040;
  font-size: max(14px, var(--t-min));
}

.tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px;
  border-radius: 12px;
  background: #fff;
  border: 2px dashed var(--accent);
}

.tip-icons {
  display: flex;
  gap: 8px;
}

.best {
  font-size: max(14px, var(--t-min));
  font-weight: 700;
}

.big-stars {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.bs canvas {
  width: 46px;
  height: 46px;
}

.bs.on {
  animation: starIn 0.45s ease-out both;
  animation-delay: var(--d);
}

@keyframes starIn {
  0% {
    transform: scale(0) rotate(-40deg);
  }
  70% {
    transform: scale(1.25) rotate(8deg);
  }
  100% {
    transform: scale(1);
  }
}

.col-main,
.col-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* When a level start or results card has more than fits (many new trophies
   on a small screen), it scrolls with its buttons kept in view. */
.intro-card,
.results-card {
  padding-bottom: 0;
}

.intro-card .col-side > .row:last-child,
.results-card .col-side > .menu:last-child {
  position: sticky;
  bottom: 0;
  padding-bottom: var(--pad);
  background: var(--cream);
}

.total {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: 32px;
  font-weight: 900;
}

.breakdown {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 12px;
  background: #fff;
  border: 2px solid rgba(58, 37, 25, 0.2);
  font-size: 15px;
}

.breakdown .line {
  display: flex;
  justify-content: space-between;
}

.breakdown .neg b {
  color: var(--bad);
}

.msg {
  font-weight: 800;
}

.bonus {
  font-weight: 800;
  color: #2f7d3a;
}

.ach-new {
  padding: 8px;
  border-radius: 12px;
  background: #fff3c9;
  border: 2px solid #e0a82a;
  font-size: 15px;
}

.wallet-line {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  font-size: max(14px, var(--t-min));
}

.keys {
  font-size: var(--t-min);
  color: #6d5040;
}

/* Hints follow the last input used (main.js sets data-input): a touch, a
   mouse or the keyboard. Key hints show after a key or the mouse. */
.game-root[data-input='key'] .no-key,
.game-root:not([data-input='touch']) .in-touch,
.game-root:not([data-input='mouse']) .in-mouse,
.game-root:not([data-input='key']) .in-key {
  display: none;
}

/* Kitchen */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tab {
  flex: 1 1 auto;
  padding: 8px 12px;
  min-height: 44px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--cream-2);
  color: var(--ink);
  font-weight: 800;
  font-size: max(14px, var(--t-min));
}

.tab:focus-visible {
  outline: 3px solid #4f8fe6;
  outline-offset: 2px;
}

.tab.on {
  background: var(--accent);
  color: #fff;
  text-shadow: 0 1px 0 var(--ink);
}

.up-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: #fff;
}

.up-row.done {
  background: var(--cream-2);
}

.up-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 10px;
  background: var(--cream);
}

.up-text {
  flex: 1;
  min-width: 0;
}

.up-text small {
  color: #6d5040;
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--t-min);
  letter-spacing: 0.5px;
}

.up-text p {
  font-size: max(14px, var(--t-min));
  color: #5a4030;
}

.up-text .note {
  color: var(--bad);
  font-weight: 700;
}

.pips {
  display: inline-flex;
  gap: 3px;
  vertical-align: middle;
}

.pips i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: #fff;
}

.pips i.on {
  background: var(--accent);
}

.btn.buy {
  flex: none;
  min-width: 96px;
}

.owned {
  flex: none;
  font-weight: 800;
  color: #6d5040;
}

/* Trophies and help */

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.stats div {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  border-radius: 12px;
  background: #fff;
  border: 2px solid rgba(58, 37, 25, 0.2);
  text-align: center;
}

.stats b {
  font-size: 18px;
}

.stats span {
  font-size: var(--t-min);
  color: #6d5040;
}

.ach {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--cream-2);
  opacity: 0.7;
}

.ach.got {
  background: #fff;
  opacity: 1;
  border: 2px solid #e0a82a;
}

.ach p {
  font-size: var(--t-min);
  color: #6d5040;
}

.help-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.help-ic {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #fff;
}

/* ---------- About ---------- */

.ad-slot {
  max-width: 1200px;
  margin: 12px auto 0;
}

.about {
  max-width: 820px;
  margin: 24px auto 0;
  padding: 0 8px;
  line-height: 1.55;
  color: #eadbc6;
}

.about h1 {
  font-size: 26px;
}

.about h2 {
  font-size: 19px;
  margin-top: 22px;
}

kbd {
  padding: 1px 6px;
  border: 1px solid #8a6a52;
  border-bottom-width: 2px;
  border-radius: 5px;
  font-size: 0.9em;
  background: #3a2519;
}

/* ---------- Small screens ---------- */

@media (max-width: 560px) {
  .page {
    padding: 0 var(--safe-r) 32px var(--safe-l);
  }
  .game-root {
    border-radius: 0;
    height: max(440px, calc(100vh - var(--header-h)));
    height: max(440px, calc(100dvh - var(--header-h)));
  }
  .card {
    --pad: 14px;
  }
  .hud-money {
    font-size: 17px;
    min-width: 52px;
  }
  .hud-mid {
    gap: 6px;
    padding: 0 8px 0 6px;
  }
  .hud-info {
    font-size: var(--t-min);
    padding: 8px 8px;
  }
  .coach {
    font-size: max(14px, var(--t-min));
  }
  .logo-a {
    font-size: 40px;
  }
  .tab {
    padding: 6px 8px;
  }
}

/* Short landscape screens (phones held sideways): the game fits the screen
   under the site header on the menus, and takes the whole screen while
   playing. Cards scroll inside themselves with their buttons kept in view. */
@media (max-height: 540px) and (orientation: landscape) {
  .game-root {
    height: max(260px, calc(100vh - var(--header-h) - 16px));
    height: max(260px, calc(100dvh - var(--header-h) - 16px));
  }
  .card.split {
    width: min(100%, 720px);
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
  }
  /* Auto margins center a column that fits and top-align one that scrolls. */
  .col-main {
    flex: 0 0 40%;
    margin-block: auto;
  }
  .col-side {
    flex: 1 1 0;
    min-width: 0;
    margin-block: auto;
    gap: 8px;
  }
  .intro-card .col-main,
  .results-card .col-main {
    padding-bottom: var(--pad);
  }
  /* While playing, the game takes the whole screen edge to edge, as in full
     screen: the sides take the larger inset both ways, and the HUD keeps
     24 px from them, clear of the phone's rounded corners. */
  body.playing .site-header {
    display: none;
  }
  body.playing .page {
    padding: 0;
  }
  body.playing .game-root {
    --in-t: var(--safe-t);
    --in-r: max(var(--safe-l), var(--safe-r));
    --in-l: max(var(--safe-l), var(--safe-r));
    --hud-x: 24px;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    border-radius: 0;
  }
  .hud-combo,
  .hud-info {
    padding: 5px 8px;
    font-size: var(--t-min);
  }
  .card {
    --pad: 12px;
    gap: 8px;
  }
  .card.wide {
    width: min(100%, 820px);
  }
  .logo-a {
    font-size: 32px;
  }
  .logo-b {
    font-size: 24px;
  }
  .btn.big {
    min-height: 48px;
    font-size: 17px;
  }
  .btn {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card {
    animation: none;
  }
}