:root {
  --bg: #0b0d24;
  --panel: #151a3e;
  --panel-2: #1f2658;
  --line: #333c7c;
  --text: #f7f2ff;
  --muted: #b9b6de;
  --accent: #ffc94d;
  --accent-2: #ff7a45;
  --good: #7dffb2;
  --bad: #ff6b6b;
  --radius: 12px;
  --header-h: 48px;
  --hud-h: 58px;
  --dock-h: 58px;
  /* The safe areas (notches, rounded corners, the home indicator), with the
     page drawn edge to edge (viewport-fit=cover). */
  --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);
  /* Where the game meets the bottom of the screen, what a thumb touches keeps
     a further 10 px over the home indicator (none on a screen without one). */
  --home-b: calc(var(--safe-b) + min(var(--safe-b), 10px));
  /* Height the game may use: the viewport below the site header (which grows
     by the top inset in the home-screen app), above the home indicator. */
  --avail: calc(100vh - var(--header-h) - 16px);
  --avail: calc(100dvh - var(--header-h) - var(--safe-t) - var(--safe-b) - 16px);
  /* The smallest text (docs/PLATFORMS.md, "Layout"): 14 px on a desktop, 15
     on a tablet, 13 on a phone. The canvas reads it too (render.js). */
  --t-min: 14px;
  color-scheme: dark;
}

@media (pointer: coarse) {
  :root {
    --t-min: 15px;
  }
}

@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: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, sans-serif;
  -webkit-text-size-adjust: 100%;
}

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

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;
  border-bottom: 1px solid var(--line);
}

.site-header nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
}

.page {
  padding: 8px max(8px, var(--safe-r)) 40px max(8px, var(--safe-l));
}

/* ---------- Game layout ----------
   The play field is 22 x 28 units. The column is as wide as the height
   allows, and the stage keeps that shape. Menus hide the HUD
   and the dock, and the stage takes their room so nothing jumps. Phones held
   sideways and full screen lay the HUD and the dock beside the field
   instead ("Side columns" below). */

.game-root {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: max(320px, calc((var(--avail) - var(--hud-h) - var(--dock-h)) * 22 / 28));
  background: #070918;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  /* No page scrolling, pinch or double-tap zoom, pull-to-refresh, selection
     or long-press menu over the game (docs/PLATFORMS.md); the menus still
     scroll (.overlay). */
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
  container: game / inline-size;
}

.stage {
  position: relative;
  width: 100%;
  flex: none;
  min-height: 260px;
  height: calc(var(--avail) - var(--hud-h) - var(--dock-h));
  height: min(calc(var(--avail) - var(--hud-h) - var(--dock-h)), calc(100cqw * 28 / 22));
}

.game-root:not(.playing) .stage {
  height: var(--avail);
  height: min(var(--avail), calc(100cqw * 28 / 22 + var(--hud-h) + var(--dock-h)));
}

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

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

.hud {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--hud-h);
  /* The pause button keeps 16 px from the game's edge, which is the
     screen's edge on a phone. */
  padding: 5px 8px 5px 16px;
  background: linear-gradient(180deg, #1b2150, #131838);
  border-bottom: 1px solid var(--line);
  flex: none;
}

.hud-label {
  font-size: var(--t-min);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  white-space: nowrap;
}

.hud-level {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.goal {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 10px 2px 4px;
  background: var(--panel-2);
  border-radius: 999px;
  border: 1px solid var(--line);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
}

.goal-icon {
  display: flex;
  width: 22px;
  height: 22px;
}

.goal-icon canvas {
  width: 22px;
  height: 22px;
}

.goal.done {
  border-color: var(--good);
  color: var(--good);
}

.goal.bump,
.hud-shots.bump {
  animation: bump 0.25s ease-out;
}

@keyframes bump {
  0% {
    transform: scale(1.18);
  }
}

.wicks {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 3px 0;
}

.wicks i {
  width: 9px;
  height: 14px;
  border-radius: 50% 50% 45% 45%;
  background: #3a3f6e;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25);
}

.wicks i.on {
  background: radial-gradient(circle at 50% 70%, #fff2b0 0 25%, #ffb347 45%, #ff6a2a 80%);
  box-shadow: 0 0 6px rgba(255, 170, 70, 0.8);
}

.hud-score {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.hud-num {
  font-weight: 800;
  font-size: 20px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.hud-stars {
  display: flex;
  gap: 3px;
}

.hs {
  width: 14px;
  height: 14px;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  background: #454c86;
}

.hs.near {
  background: #a88a3a;
}

.hs.lit {
  background: #ffd23a;
}

.endless .hud-stars {
  display: none;
}

.hud-shots {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 70px;
  padding: 2px 8px;
  background: var(--panel-2);
  border-radius: 10px;
  border: 1px solid var(--line);
}

.hud-big {
  font-size: 24px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

.hud-shots.low .hud-big {
  color: var(--bad);
  animation: throb 0.9s ease-in-out infinite;
}

@keyframes throb {
  50% {
    transform: scale(1.15);
  }
}

/* ---------- Dock (boosters and sound) ---------- */

.dock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: var(--dock-h);
  padding: 6px;
  background: linear-gradient(0deg, #1b2150, #131838);
  border-top: 1px solid var(--line);
  flex: none;
}

.booster {
  position: relative;
  width: 74px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.b-icon {
  display: flex;
}

.b-icon canvas {
  width: 22px;
  height: 22px;
}

.b-name {
  font-size: var(--t-min);
  line-height: 1.1;
}

.booster.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent) inset, 0 0 12px rgba(255, 201, 77, 0.55);
}

.b-count {
  position: absolute;
  right: -6px;
  top: -8px;
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  background: var(--accent-2);
  color: #fff;
  font-size: var(--t-min);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.btn-sound {
  font-size: max(13px, var(--t-min));
  padding: 0 12px;
  min-width: 84px;
}

/* ---------- Buttons ---------- */

.btn {
  /* Every button is thumb-sized: 44 px at least. */
  min-height: 44px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  border-radius: 10px;
  padding: 9px 14px;
  font-weight: 700;
}

.btn:hover {
  border-color: var(--muted);
}

.btn:focus-visible,
.booster:focus-visible,
.lvl:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn-icon {
  min-width: 44px;
  height: 44px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.btn-icon svg {
  fill: currentColor;
}

.btn-small {
  padding: 6px 12px;
  font-size: max(14px, var(--t-min));
}

.btn-primary {
  background: linear-gradient(180deg, #ffd978, #ffa53a);
  color: #3a1d00;
  border-color: #ffcf6b;
  font-size: 18px;
  padding: 12px 26px;
  box-shadow: 0 4px 0 #b36a00;
}

.btn-primary.btn-small {
  font-size: max(14px, var(--t-min));
  padding: 7px 14px;
  box-shadow: 0 3px 0 #b36a00;
}

.btn-primary:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #b36a00;
}

.btn:disabled,
.booster:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ---------- Overlay screens ---------- */

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(6, 8, 26, 0.66);
  overflow-y: auto;
  z-index: 5;
  /* The menus scroll with a finger (the page too, on the title): only play
     takes every touch. */
  touch-action: manipulation;
}

.overlay:empty {
  display: none;
}

.overlay.clear {
  background: linear-gradient(180deg, rgba(6, 8, 26, 0.2), rgba(6, 8, 26, 0.45));
}

.card {
  width: 100%;
  max-width: 430px;
  max-height: 100%;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(38, 45, 104, 0.97), rgba(22, 26, 64, 0.97));
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  text-align: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 201, 77, 0.08) inset;
  animation: pop 0.22s ease-out;
}

@keyframes pop {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
}

.card h2 {
  margin: 0 0 6px;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.card p {
  color: var(--muted);
  margin: 6px 0;
  line-height: 1.45;
}

.card p.muted,
.muted {
  color: var(--muted);
  font-size: max(14px, var(--t-min));
}

.card p.tip {
  color: var(--text);
  background: rgba(255, 201, 77, 0.1);
  border: 1px solid rgba(255, 201, 77, 0.35);
  border-radius: 10px;
  padding: 8px 10px;
  margin: 10px 0;
}

.card p.help {
  color: var(--good);
  font-weight: 700;
}

.help-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.help-card > h2,
.help-card > .row-buttons {
  flex: none;
}

.help-body {
  overflow-y: auto;
  min-height: 0;
  text-align: left;
}

.game-root:fullscreen .overlay[data-screen='help'] {
  padding-top: max(64px, calc(var(--safe-t) + 52px));
}

/* Keep result actions visible even when many achievements arrive together. */
.card.split.top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto auto;
  overflow: hidden;
}

.card.split.top > .card-info {
  min-height: 0;
  overflow-y: auto;
}

.tag-hard {
  font-size: var(--t-min);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #7a1f3d;
  color: #ffd2dc;
  border: 1px solid #c2456e;
}

.goal-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 4px;
  font-size: 18px;
  font-weight: 800;
}

.goal-line canvas {
  width: 28px;
  height: 28px;
}

.card > p:not(.muted):not(.tip):not(.help),
.card-info > p:not(.muted):not(.tip):not(.help),
.card-act > p:not(.muted):not(.tip):not(.help) {
  color: var(--text);
}

.row-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 14px;
}

.row-buttons.small {
  margin-top: 4px;
  gap: 8px;
}

.row-buttons.small .btn {
  padding: 6px 12px;
  font-size: max(13px, var(--t-min));
}

.title-card {
  max-width: 380px;
}

.logo {
  font-size: 34px;
  font-size: clamp(26px, 8.5cqw, 38px);
  font-weight: 900;
  letter-spacing: 1.5px;
  white-space: nowrap;
  line-height: 1;
  margin: 4px 0 4px;
  color: #ffe7b0;
  text-shadow: 0 0 18px rgba(255, 160, 60, 0.75), 0 2px 0 #9a3b12;
}

.logo span {
  color: #ff9a4d;
}

.tagline {
  font-size: 15px;
}

.title-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  max-width: 280px;
  margin: 16px auto 0;
}

.streak {
  color: var(--accent) !important;
  font-weight: 700;
}

/* Map */
.map {
  width: 100%;
  max-width: 520px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(27, 33, 80, 0.97), rgba(12, 15, 38, 0.97));
  border-radius: 14px;
  border: 1px solid var(--line);
  overflow: hidden;
}

.map-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.map-stars {
  font-weight: 800;
  font-size: 18px;
  color: #ffd23a;
}

.chest {
  flex: 1 1 150px;
  font-size: var(--t-min);
  color: var(--muted);
  text-align: right;
}

.bar {
  height: 10px;
  background: #0b0e26;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  margin-top: 3px;
}

.bar > div {
  height: 100%;
  background: linear-gradient(90deg, #ff7a45, #ffd23a);
}

.inventory {
  display: flex;
  gap: 10px;
  width: 100%;
  justify-content: center;
  font-size: var(--t-min);
  color: var(--muted);
}

.inventory span {
  display: flex;
  align-items: center;
  gap: 3px;
}

.inventory canvas {
  width: 18px;
  height: 18px;
}

.map-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  overscroll-behavior: contain;
}

.world {
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--w0), var(--w1));
  box-shadow: 0 0 18px -8px var(--glow) inset;
}

.world h3 {
  margin: 0;
  font-size: 15px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.place-head {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 2px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.place-head::after {
  content: '▾';
  /* Decoration only: empty alt text keeps the caret out of the button's name. */
  content: '▾' / '';
  order: 3;
  font-size: 13px;
  transition: transform 0.2s;
}

.place-head[aria-expanded='false']::after {
  transform: rotate(-90deg);
}

.place-head:disabled {
  cursor: default;
}

.place-head:disabled::after {
  content: '';
}

.place-head:focus-visible {
  outline: 2px solid #fff3b0;
  outline-offset: 2px;
  border-radius: 8px;
}

.world h3 small {
  color: var(--muted);
  font-size: var(--t-min);
  font-weight: 600;
  margin-left: auto;
}

.world.locked {
  opacity: 0.55;
}

.levels {
  margin-top: 8px;
}

.levels[hidden] {
  display: none;
}

.levels {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 60px));
  justify-content: center;
  gap: 8px 10px;
}

.lvl {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50% 50% 44% 44%;
  border: 1px solid rgba(255, 220, 160, 0.45);
  background: radial-gradient(circle at 50% 40%, #ffcf7a, #e8632f 70%, #a8331a);
  color: #3a1400;
  font-weight: 900;
  font-size: 17px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 0 10px rgba(255, 140, 60, 0.35);
}

.lvl .st {
  font-size: var(--t-min);
  letter-spacing: -2px;
  color: #fff4c2;
  text-shadow: 0 1px 1px #6a2400;
  min-height: 1em;
  line-height: 1;
}

.lvl.hard {
  background: radial-gradient(circle at 50% 40%, #ff9ab8, #c7285e 70%, #7a1033);
  color: #fff;
}

.lvl.current {
  outline: 3px solid #fff3b0;
  outline-offset: 2px;
  animation: glow 1.4s ease-in-out infinite;
}

@keyframes glow {
  50% {
    box-shadow: 0 0 22px rgba(255, 220, 120, 0.9);
  }
}

.lvl.locked {
  background: #20264f;
  border-color: var(--line);
  color: var(--muted);
  box-shadow: none;
}

.item-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 12px 0;
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: var(--t-min);
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  animation: pop 0.3s ease-out backwards;
}

.item canvas {
  width: 30px;
  height: 30px;
}

.item:nth-child(2) {
  animation-delay: 0.08s;
}
.item:nth-child(3) {
  animation-delay: 0.16s;
}
.item:nth-child(4) {
  animation-delay: 0.24s;
}
.item:nth-child(5) {
  animation-delay: 0.32s;
}
.item:nth-child(6) {
  animation-delay: 0.4s;
}

/* Win and lose */
.big-stars {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 10px 0 4px;
}

.big-star {
  width: 48px;
  height: 48px;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  background: #3b4278;
}

.big-star:nth-child(2) {
  transform: translateY(-8px) scale(1.12);
}

.big-star.lit {
  background: linear-gradient(180deg, #fff3a0, #ffc12e);
  animation: starpop 0.35s ease-out;
}

.big-star:nth-child(2).lit {
  animation-name: starpop2;
}

@keyframes starpop {
  0% {
    transform: scale(1.8);
  }
}

@keyframes starpop2 {
  0% {
    transform: translateY(-8px) scale(2);
  }
}

.result-score {
  font-size: 34px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #ffe7b0;
}

.rewards {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: max(14px, var(--t-min));
}

.rewards li {
  background: rgba(125, 255, 178, 0.08);
  border: 1px solid rgba(125, 255, 178, 0.3);
  border-radius: 8px;
  padding: 5px 8px;
}

.progress {
  margin: 12px 0 4px;
  font-size: max(14px, var(--t-min));
  color: var(--muted);
}

.progress .bar {
  height: 12px;
  margin-top: 6px;
}

.ach-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ach-list li {
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  font-weight: 700;
  color: var(--muted);
}

.ach-list li.got {
  color: var(--text);
  border-color: rgba(125, 255, 178, 0.45);
  background: rgba(125, 255, 178, 0.07);
}

.ach-list small {
  display: block;
  font-weight: 400;
  font-size: var(--t-min);
  color: var(--muted);
}

/* ---------- Ads and the page below the game ---------- */

.ad-slot {
  max-width: 970px;
  margin: 12px auto 0;
  min-height: 0;
}

.ad-slot.in-card {
  margin-top: 14px;
}

.about {
  max-width: 820px;
  margin: 24px auto 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 15px;
}

.about h1,
.about h2 {
  color: var(--text);
}

.about strong {
  color: var(--text);
}

kbd {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 5px;
  font-family: inherit;
  font-size: 0.92em;
  color: var(--text);
  white-space: nowrap;
}

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

@media (max-width: 520px) {
  .page {
    padding: 0 var(--safe-r) 32px var(--safe-l);
  }
  :root {
    --avail: calc(100vh - var(--header-h));
    --avail: calc(100dvh - var(--header-h) - var(--safe-t) - var(--safe-b));
  }
  .game-root {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .about {
    padding: 0 12px;
  }
}

@media (max-width: 380px) {
  .hud {
    gap: 5px;
    padding: 5px 5px 5px 16px;
  }
  .goal {
    font-size: 14px;
    padding-right: 7px;
  }
  .hud-num {
    font-size: 17px;
  }
  .hud-shots {
    min-width: 58px;
    padding: 2px 5px;
  }
  .hud-big {
    font-size: 21px;
  }
  .dock {
    gap: 8px;
  }
  .card {
    padding: 14px;
  }
}

/* ---------- Side columns ----------
   Phones and tablets held sideways, and any screen held sideways in full
   screen: the HUD is a column on the left and the dock a column on the right,
   and the field takes the whole height between them. The rules for the
   columns are a container query on the game's root, which is a size
   container in those layouts; in the others it is only an inline-size one,
   so they don't apply. */
:root {
  --side-l: 124px;
  --side-r: 100px;
}

/* Phones held sideways: the game fills the screen. The site header steps
   aside while a game is in play (html.lb-in-play, main.js) and comes back
   with the menus, which fit under it, so "Full screen" is always a tap away
   from a menu. */
@media (orientation: landscape) and (max-height: 540px) {
  .page {
    padding: 0 0 32px;
  }
  .game-root {
    flex-direction: row;
    justify-content: center;
    max-width: none;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h) - var(--safe-t));
    padding: 0 var(--safe-r) 0 var(--safe-l);
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    container-type: size;
  }
  html.lb-in-play .site-header {
    display: none;
  }
  html.lb-in-play .game-root {
    height: 100vh;
    height: 100dvh;
  }
  /* The menus reach the bottom of the screen too: their buttons keep 16 px
     over the home indicator, and inside the notch's side. */
  .overlay {
    padding: 12px max(12px, var(--safe-r)) max(12px, calc(var(--safe-b) + 16px)) max(12px, var(--safe-l));
  }
  .tagline {
    display: none;
  }
  /* The cards widen and tighten so a level's card, its tip and its buttons
     fit under the header without scrolling. */
  .card {
    max-width: 600px;
    padding: 10px 16px;
  }
  .card h2 {
    font-size: 21px;
    margin-bottom: 2px;
  }
  .card p {
    margin: 4px 0;
    line-height: 1.35;
  }
  .card p.tip {
    margin: 6px 0;
    padding: 6px 10px;
  }
  /* A level's, the daily's and endless's cards: what it is about on the
     left, the tip and the buttons on the right. */
  .card.split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 20px;
  }
  .card.split > :not(.card-info):not(.card-act) {
    flex: 1 0 100%;
  }
  .card.split > .card-info,
  .card.split > .card-act {
    flex: 1 1 0;
    min-width: 0;
  }
  /* A result: its buttons first on the right, in view whatever the rewards. */
  .card.split.top {
    align-items: flex-start;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .card.split.top > .ad-slot {
    grid-column: 1 / -1;
  }
  .card.split.top .row-buttons {
    margin-top: 0;
  }
  .goal-line {
    margin: 6px 0 2px;
    font-size: 16px;
  }
  .row-buttons {
    margin-top: 10px;
  }
  .rewards li {
    padding: 3px 8px;
  }
  .logo {
    font-size: 30px;
  }
  .title-card {
    max-width: 440px;
  }
  /* Two buttons a row, so the title and the pause menu fit a phone's height. */
  .title-menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    max-width: 400px;
    margin-top: 10px;
  }
  .title-menu > .row-buttons,
  .title-menu > :first-child:nth-last-child(even) {
    grid-column: 1 / -1;
    margin-top: 0;
  }
  .btn-primary {
    font-size: 16px;
    padding: 9px 20px;
  }
  .big-star {
    width: 36px;
    height: 36px;
  }
  .result-score {
    font-size: 26px;
  }
}

/* Tablets held sideways: the same columns beside a field as tall as the
   screen under the header allows (a quarter wider than the column layout's
   on a Galaxy Tab S9). The header stays: there is room for it. */
@media (orientation: landscape) and (pointer: coarse) and (min-height: 541px) {
  .game-root {
    flex-direction: row;
    justify-content: center;
    max-width: none;
    height: calc(100vh - var(--header-h) - 16px);
    height: calc(100dvh - var(--header-h) - var(--safe-t) - var(--safe-b) - 16px);
    container-type: size;
    /* It ends above the home indicator already. */
    --home-b: 0px;
  }
}

@container game (orientation: landscape) {
  .stage,
  .game-root:not(.playing) .stage {
    flex: none;
    align-self: center;
    width: auto;
    height: min(100cqh, calc((100cqw - var(--side-l) - var(--side-r)) * 28 / 22));
    aspect-ratio: 22 / 28;
    min-height: 0;
    /* Where the field meets the bottom of the screen it keeps above the home
       indicator (render.js reads this padding; the water goes on under it). */
    padding-bottom: var(--home-b);
  }
  .hud {
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    height: auto;
    width: var(--side-l);
    padding: 8px;
    gap: 10px;
    border-bottom: 0;
    border-right: 1px solid var(--line);
    background: linear-gradient(90deg, #1b2150, #131838);
  }
  .hud-level {
    align-items: center;
  }
  .hud-score {
    flex: none;
  }
  .hud-shots {
    min-width: 0;
  }
  .btn-icon {
    align-self: center;
  }
  .dock {
    flex-direction: column;
    height: auto;
    width: var(--side-r);
    padding: 8px;
    gap: 14px;
    border-top: 0;
    border-left: 1px solid var(--line);
    background: linear-gradient(270deg, #1b2150, #131838);
  }
  .btn-sound {
    min-width: 0;
    width: 100%;
    padding: 0 6px;
  }
}

/* ---------- Full screen (the site's button, docs/PLATFORMS.md) ----------
   The game fills the screen inside its safe areas and draws at the new size
   (render.js follows the canvas's box). Upright, the column is as wide as the
   screen's height allows and sits in the middle, under a band at the top for
   the site's "Leave full screen", which stays where the site puts it: no HUD
   item goes under it. Held sideways, the side columns take the whole height,
   and the button moves to the top right corner, over the gutter beside the
   dock (24 px from the corner, 16 px inside the safe area). */
.game-root:fullscreen {
  --fs-band: max(60px, calc(var(--safe-t) + 52px));
  --home-b: calc(var(--safe-b) + min(var(--safe-b), 10px));
  max-width: none;
  border: 0;
  border-radius: 0;
  container-type: size;
  justify-content: center;
  align-items: center;
  padding: var(--fs-band) var(--safe-r) var(--home-b) var(--safe-l);
}

.game-root:fullscreen .overlay {
  padding: var(--fs-band) max(12px, var(--safe-r)) max(12px, var(--home-b)) max(12px, var(--safe-l));
}

@media (orientation: portrait) {
  .game-root:fullscreen > .hud,
  .game-root:fullscreen > .stage,
  .game-root:fullscreen > .dock {
    width: min(100cqw, calc((100cqh - var(--hud-h) - var(--dock-h)) * 22 / 28));
  }
  .game-root:fullscreen > .stage {
    min-height: 0;
    height: calc(min(100cqw, calc((100cqh - var(--hud-h) - var(--dock-h)) * 22 / 28)) * 28 / 22);
  }
  .game-root:fullscreen:not(.playing) > .stage {
    height: min(100cqh, calc(min(100cqw, calc((100cqh - var(--hud-h) - var(--dock-h)) * 22 / 28)) * 28 / 22 + var(--hud-h) + var(--dock-h)));
  }
}

@media (orientation: landscape) {
  .game-root:fullscreen {
    flex-direction: row;
    align-items: stretch;
    padding: var(--safe-t) var(--safe-r) 0 var(--safe-l);
  }
  .game-root:fullscreen .overlay {
    padding: max(12px, var(--safe-t)) max(12px, var(--safe-r)) max(12px, var(--home-b)) max(12px, var(--safe-l));
  }
  .game-root .am-fs-exit {
    left: auto;
    right: max(24px, calc(var(--safe-r) + 16px));
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Calm decoration; action and result feedback keep their timing. */
  .hud-shots.low .hud-big, .lvl.current { animation: none; }
  .card { animation: none; }
}