:root {
  --bg: #0c0a1c;
  --panel: rgba(22, 18, 48, 0.94);
  --panel-2: #262050;
  --line: #3d347a;
  --text: #f4f1ff;
  --muted: #b3aad8;
  --accent: #ff8a3d;
  --accent-2: #3fd8f0;
  --good: #6fe08a;
  --radius: 12px;
  --header-h: 48px;
  /* The screen's safe areas (docs/PLATFORMS.md, "Layout"): under a notch, a
     cut-out, a home-screen app's status bar or the home indicator. What the
     player reads or touches stays inside them. The tests set these to try
     insets the browsers here don't have. */
  --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 smallest text: 14 px on a desktop, 15 on a tablet, 13 on a phone
     (docs/PLATFORMS.md, "Readable at phone size"). */
  --t-min: 14px;
  /* The HUD: a bar above the field, or two columns beside it (layout() in
     src/main.js reads these). */
  --hud-h: 54px;
  --col-w: 150px;
  color-scheme: dark;
}

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

/* 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: 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;
}

/* The page keeps the side insets of a phone held sideways. */
.page {
  padding: 8px max(8px, var(--safe-r)) 40px max(8px, var(--safe-l));
}

/* Reads the safe areas for layout() in src/main.js. */
.wr-safe-probe {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  visibility: hidden;
  pointer-events: none;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
}

/* ---------- Game layout ----------
   layout() in src/main.js sizes the game for the space it has (docs/PLATFORMS.md,
   "Layout"): the root's --root-w and --root-h, the field's --stage-w and
   --stage-h, and --pad-*, how far the HUD and the field keep from the root's
   sides (16 px inside the screen's edges and safe areas on a touch screen).
   The HUD is a bar above the field, or two columns beside it (.wr-side) where
   that gives the field more room. In full screen (.wr-fs) the site's "Leave
   full screen" sits over a corner the HUD keeps for it: Sound's place at the
   bar's right end (.wr-slot-corner; sound is in the pause menu), or the top of
   the right-hand column (.wr-slot-side). On a phone in play and in full screen
   (.wr-bleed) the world's scene fills the screen behind it all (#bleed). */

.game-root {
  position: relative;
  isolation: isolate; /* the scene behind (#bleed) stays inside the game */
  margin: 0 auto;
  width: var(--root-w, 100%);
  max-width: 100%;
  height: var(--root-h, auto);
  padding: var(--pad-t, 0px) var(--pad-r, 0px) var(--pad-b, 0px) var(--pad-l, 0px);
  background: #07061a;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  /* No scrolling, zooming, selection or long-press menu over the game; the
     menus scroll inside themselves (.wr-overlay), and the page around the
     game still zooms. */
  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;
  align-items: center;
}

/* In full screen the game is the screen: edge to edge, its parts in the middle. */
.game-root.wr-fs {
  border: 0;
  border-radius: 0;
  justify-content: center;
}

.wr-stage {
  position: relative;
  flex: none;
  width: var(--stage-w, 480px);
  height: var(--stage-h, 720px);
  margin: 0 auto;
  touch-action: none;
  overflow: hidden;
}

.wr-stage canvas {
  display: block;
  outline: none;
}

.wr-stage canvas.wr-hide-cursor {
  cursor: none;
}

/* The HUD beside the field: the left column holds Pause, the level and the
   Wreck meter; the right one Mute, the score and the balls. */
.game-root.wr-side {
  display: grid;
  grid-template-columns: var(--col-w) var(--stage-w) var(--col-w);
  grid-template-rows: var(--stage-h);
  column-gap: 8px;
  justify-content: center;
  align-content: center;
}

.wr-side .wr-hud {
  display: contents;
}

.wr-side .wr-hl {
  grid-column: 1;
  grid-row: 1;
}

.wr-side .wr-stage {
  grid-column: 2;
  grid-row: 1;
}

.wr-side .wr-hr {
  grid-column: 3;
  grid-row: 1;
}

/* "Leave full screen" (site/fullscreen.js) goes over the slot layout() picked:
   --exit-x and --exit-y are that slot's place on the screen. */
.wr-slot {
  display: none;
  flex: none;
  width: 44px;
  height: 44px;
}

.wr-fs.wr-slot-corner .wr-slot[data-slot='corner'],
.wr-fs.wr-slot-side .wr-slot[data-slot='side'] {
  display: block;
}

/* Sound's corner goes to "Leave full screen"; sound is in the pause menu, and M. */
.wr-fs.wr-slot-corner #btn-mute {
  display: none;
}

/* The world's scene behind the game, edge to edge (paintBleed in src/main.js). */
.wr-bg {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

.wr-bleed .wr-bg {
  display: block;
}

/* Over the scene the HUD is glass, not a slab. */
.wr-bleed .wr-hud {
  background: linear-gradient(180deg, rgba(29, 24, 69, 0.62), rgba(15, 12, 38, 0.5));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

#game-root.wr-fs .am-fs-exit {
  top: var(--exit-y, max(8px, env(safe-area-inset-top, 0px)));
  left: var(--exit-x, calc(50% - 22px));
}

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

.wr-hud {
  flex: none;
  width: var(--stage-w, 100%);
  height: var(--bar-h, var(--hud-h));
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  background: linear-gradient(180deg, #1d1845, #0f0c26);
  border-bottom: 1px solid var(--line);
  border-radius: 10px 10px 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Off between levels: the menus cover the game, and the HUD keeps its place. */
.wr-hud.wr-off {
  visibility: hidden;
}

.wr-hl,
.wr-hr {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.wr-hl {
  flex: 1 1 auto;
}

.wr-hr {
  flex: 0 0 auto;
}

.wr-hinfo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.wr-hl .wr-hinfo {
  flex: 1 1 auto;
}

.wr-hr .wr-hinfo {
  align-items: flex-end;
}

/* "Leave full screen" in the middle of the bar: the two halves share the rest. */

.wr-hbtn {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid #4a3f8f;
  background: linear-gradient(180deg, #342c6e, #221c4a);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 2px 0 rgba(0, 0, 0, 0.3);
  padding: 0;
}

.wr-hbtn:active {
  transform: translateY(1px);
}

.wr-hbtn svg {
  width: 18px;
  height: 18px;
  fill: var(--text);
  stroke: var(--text);
  stroke-width: 0;
}

.wr-hbtn .wr-wave,
.wr-hbtn .wr-x {
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.wr-hbtn .wr-x,
.wr-hbtn.off .wr-wave {
  display: none;
}

.wr-hbtn.off .wr-x {
  display: inline;
}

.wr-hlevel {
  font-size: var(--t-min);
  line-height: 1.2;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wr-hscore {
  display: inline-block;
  font-size: max(18px, var(--t-min));
  line-height: 1.15;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px rgba(255, 180, 90, 0.35);
  transform-origin: right center;
}

/* Two names, so each new score restarts the tick. */
.wr-hscore.t0 {
  animation: wr-tick0 0.22s ease-out;
}

.wr-hscore.t1 {
  animation: wr-tick1 0.22s ease-out;
}

@keyframes wr-tick0 {
  from {
    transform: scale(1.16);
    color: #ffe28a;
  }
}

@keyframes wr-tick1 {
  from {
    transform: scale(1.16);
    color: #ffe28a;
  }
}

/* The Wreck meter, its name inside it at the smallest text size. */
.wr-meter {
  position: relative;
  height: calc(var(--t-min) + 6px);
  border-radius: 6px;
  background: #16122f;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.wr-meter-fill {
  height: 100%;
  width: 0;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 55%),
    linear-gradient(90deg, #ff4d1f, #ff8a3d 60%, #ffd07a);
  box-shadow: 0 0 8px rgba(255, 138, 61, 0.6);
  transition: width 0.15s linear;
}

.wr-meter.full .wr-meter-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.75) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: wr-shine 1.3s ease-in-out infinite;
}

@keyframes wr-shine {
  to {
    transform: translateX(100%);
  }
}

.wr-meter span {
  position: absolute;
  right: 6px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  font-size: var(--t-min);
  line-height: 1;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 4px rgba(0, 0, 0, 0.8);
}

.wr-meter.full {
  box-shadow: 0 0 10px #ff8a3d;
  animation: wr-pulse 0.8s ease-in-out infinite alternate;
}

@keyframes wr-pulse {
  from {
    box-shadow: 0 0 4px #ff8a3d;
  }
  to {
    box-shadow: 0 0 14px #ffb45a;
  }
}

/* Paused, nothing moves: the meter's shine waits too. */
.wr-paused .wr-meter.full,
.wr-paused .wr-meter.full .wr-meter-fill::after,
.wr-paused .wr-hscore {
  animation-play-state: paused;
}

.wr-lives {
  display: flex;
  gap: 3px;
  max-width: 96px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.wr-lives i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 16%, #ece8ff 34%, #a39bd0 78%, #6f67a0);
  box-shadow:
    0 0 6px rgba(210, 200, 255, 0.5),
    inset 0 -1px 1px rgba(0, 0, 0, 0.3);
}

/* The HUD's columns beside the field. */
.wr-side .wr-hl,
.wr-side .wr-hr {
  align-self: start;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 10px;
  border-radius: 12px;
  background: linear-gradient(180deg, #1d1845, #0f0c26);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.wr-side .wr-hl .wr-hbtn {
  align-self: flex-start;
}

.wr-side .wr-hinfo {
  gap: 10px;
}

.wr-side .wr-hlevel {
  white-space: normal;
  overflow-wrap: anywhere;
}

.wr-side .wr-hr {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas:
    '. slot mute'
    'info info info';
  column-gap: 8px;
  row-gap: 12px;
}

.wr-side .wr-hr .wr-hinfo {
  grid-area: info;
}

.wr-side .wr-hr .wr-slot {
  grid-area: slot;
}

.wr-side .wr-hr .wr-hbtn {
  grid-area: mute;
}

.wr-side .wr-hscore {
  font-size: 26px;
}

/* ---------- Banner and toast over the field ---------- */

.wr-banner {
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: 86%;
  padding: 12px 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(34, 28, 78, 0.9), rgba(10, 8, 28, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  text-align: center;
  pointer-events: none;
  font-size: max(14px, var(--t-min));
  line-height: 1.4;
}

.wr-banner strong {
  display: block;
  font-size: max(18px, var(--t-min));
  margin-bottom: 4px;
  text-shadow: 0 0 12px rgba(255, 180, 90, 0.45);
}

.wr-banner p {
  margin: 4px 0 0;
  color: #ddd7ff;
}

.wr-banner p:last-child {
  color: var(--accent);
  font-weight: 700;
}

.wr-toast {
  position: absolute;
  left: 8px;
  top: 10px;
  width: max-content;
  max-width: min(66%, 320px);
  padding: 8px 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(40, 26, 50, 0.92), rgba(12, 8, 26, 0.92));
  border: 1px solid rgba(255, 138, 61, 0.6);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.4),
    0 0 12px rgba(255, 138, 61, 0.18);
  font-size: var(--t-min);
  line-height: 1.35;
  text-align: left;
  pointer-events: none;
}

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

/* The menus cover the game and scroll inside it, never moving the page: the
   overlay keeps its padding (--ov-*, from layout(): on a touch screen inside
   the screen's edges and safe areas, in full screen below "Leave full
   screen"), and the menu scrolls in the box inside it (.wr-scroll), so a
   control scrolled to the menu's edge never comes nearer the screen's. */
.wr-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  padding: var(--ov-t, 16px) var(--ov-r, 12px) var(--ov-b, 16px) var(--ov-l, 12px);
  background: rgba(7, 6, 20, 0.62);
  touch-action: pan-y;
}

.wr-scroll {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Up and down only: no pinch zoom or sideways pan over a menu. */
  touch-action: pan-y;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.wr-overlay[data-screen='title'] {
  background: linear-gradient(rgba(7, 6, 20, 0.35), rgba(7, 6, 20, 0.7));
}

/* Centred by auto margins, which never push a menu taller than its box out of
   reach above the top, as align-items: center would. */
.wr-scroll > * {
  margin-top: auto;
  margin-bottom: auto;
}

.wr-card {
  width: min(440px, 100%);
  margin: auto 0;
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(40, 33, 88, 0.96), rgba(18, 14, 42, 0.96));
  border: 1px solid #4a3f8f;
  box-shadow:
    0 14px 44px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.wr-card h2 {
  margin: 0 0 8px;
  font-size: 22px;
}

.wr-card h3 {
  margin: 16px 0 6px;
  font-size: max(16px, var(--t-min));
  color: var(--accent-2);
}

.wr-card p {
  margin: 6px 0;
  line-height: 1.45;
}

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

.wr-good {
  color: var(--good);
  font-weight: 700;
}

.wr-big {
  font-size: 34px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  margin: 4px 0 !important;
}

.wr-plus {
  color: #7ff0d0;
  font-weight: 800;
}

.wr-ach {
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 138, 61, 0.14);
  border: 1px solid rgba(255, 138, 61, 0.4);
  font-size: max(14px, var(--t-min));
}

.wr-result {
  text-align: center;
}

.wr-btn {
  min-height: 44px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid #4a3f8f;
  background: linear-gradient(180deg, #352d70, #241e54);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 2px 0 rgba(0, 0, 0, 0.32);
  color: var(--text);
  font-weight: 700;
  font-size: max(15px, var(--t-min));
  transition:
    border-color 0.15s,
    filter 0.15s;
}

.wr-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.wr-btn:hover:not(:disabled) {
  border-color: #7a6ee0;
}

.wr-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.wr-btn:focus-visible,
.wr-level:focus-visible,
.wr-world:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

.wr-primary {
  background: linear-gradient(180deg, #ffbd80, #ff7a33 55%, #f0561c);
  border-color: #ffc590;
  color: #1c0d02;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 3px 0 #a8380f,
    0 6px 18px rgba(255, 106, 43, 0.35);
}

.wr-primary:hover:not(:disabled) {
  border-color: #ffe0c0;
  filter: brightness(1.07);
}

.wr-quiet {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--muted);
  font-weight: 600;
  min-height: 40px;
}

.wr-btn small {
  display: block;
  font-size: var(--t-min);
  font-weight: 600;
  opacity: 0.85;
  margin-top: 2px;
}

.wr-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.wr-actions.wr-col {
  flex-direction: column;
  align-items: stretch;
}

.wr-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  margin-top: 8px;
}

/* ---------- Endless and its top 10 ---------- */

.wr-endless {
  text-align: center;
}

.wr-endless .wr-primary {
  min-width: 140px;
}

.wr-boardbox {
  min-height: 44px;
}

.wr-board {
  width: 100%;
  margin: 4px 0 8px;
  border-collapse: separate;
  border-spacing: 0 4px;
  font-size: max(15px, var(--t-min));
  font-variant-numeric: tabular-nums;
  text-align: left;
}

.wr-board th {
  padding: 0 8px;
  font-size: var(--t-min);
  font-weight: 600;
  color: var(--muted);
}

.wr-board td {
  padding: 5px 8px;
  vertical-align: middle;
  background: #17133a;
  border-block: 1px solid var(--line);
}

.wr-board td:first-child {
  border-left: 1px solid var(--line);
  border-radius: 8px 0 0 8px;
}

.wr-board td:last-child {
  border-right: 1px solid var(--line);
  border-radius: 0 8px 8px 0;
}

.wr-board .wr-rank {
  width: 2.4em;
  font-weight: 900;
  color: var(--muted);
}

.wr-board tbody tr:nth-child(-n + 3) .wr-rank {
  color: #ffd84a;
}

/* A username is at most 16 characters; on a narrow phone a long one ends in an ellipsis. */
.wr-board .wr-name {
  max-width: 0;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.wr-board .wr-num {
  text-align: right;
  white-space: nowrap;
}

.wr-board .wr-score {
  font-weight: 800;
}

.wr-board tr.wr-me td {
  background: rgba(255, 138, 61, 0.16);
  border-color: var(--accent);
}

.wr-place,
.wr-mine {
  font-weight: 700;
}

.wr-who,
.wr-mine {
  font-size: max(14px, var(--t-min));
}

.wr-who {
  color: var(--muted);
}

.wr-card a {
  color: var(--accent-2);
  font-weight: 700;
}

/* On a touch screen a link's tap area is 44 px tall, without moving the words around it. */
@media (pointer: coarse) {
  .wr-link {
    display: inline-block;
    padding: 12px 4px;
    margin: -12px -4px;
  }
}

/* ---------- Title ---------- */

.wr-title {
  width: min(400px, 100%);
  text-align: center;
  padding: 12px 4px;
}

.wr-logo {
  margin: 0;
  --logo: clamp(40px, 12vw, 56px);
  font-size: var(--logo);
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1.05;
  color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, #fff6e6 42%, #ffc27a 58%, #ff7a33 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 3px 0 #b8431a) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 22px rgba(255, 138, 61, 0.35));
}

.wr-logo span {
  display: inline-block;
  color: transparent;
  /* The o is a ball: its letter stays for screen readers, at no size, so no lettering shows round the ball. */
  font-size: 0;
  width: calc(var(--logo) * 0.62);
  height: calc(var(--logo) * 0.62);
  margin: 0 calc(var(--logo) * 0.02);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #c9c3e8 60%, #8a82b8);
  box-shadow: 0 0 16px rgba(255, 180, 90, 0.8);
  vertical-align: calc(var(--logo) * -0.02);
  text-shadow: none;
  overflow: hidden;
}

.wr-sub {
  margin: 12px 0 18px;
  color: #e6e0ff;
  font-weight: 600;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.wr-play {
  width: 100%;
  font-size: 20px;
  min-height: 60px;
}

.wr-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.wr-grid2 .wr-btn {
  background: rgba(38, 32, 80, 0.92);
}

/* A short screen (a phone held sideways): the title's two halves side by side. */
@media (max-height: 479px) and (min-width: 560px) {
  .wr-title {
    width: min(720px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    column-gap: 20px;
    row-gap: 8px;
    align-items: center;
    padding: 0 4px;
  }
  .wr-title > .wr-logo,
  .wr-title > .wr-sub,
  .wr-title > .wr-play {
    grid-column: 1;
  }
  .wr-title > .wr-grid2,
  .wr-title > .wr-row {
    grid-column: 2;
  }
  .wr-title > .wr-grid2 {
    grid-row: 1 / span 2;
    align-self: end;
    margin-top: 0;
  }
  .wr-title > .wr-row {
    grid-row: 3;
    margin-top: 0;
  }
  .wr-title .wr-logo {
    --logo: 40px;
  }
  .wr-title .wr-sub {
    margin: 6px 0 10px;
  }
}

/* ---------- Levels ---------- */

.wr-levels-card {
  width: min(520px, 100%);
}

.wr-packbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

/* Chapters and their ten worlds keep the existing coloured chips. */
.wr-chapters {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

.wr-chapters .wr-world,
.wr-worlds .wr-world {
  min-height: 44px;
}

.wr-worlds {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.wr-world {
  min-width: 0;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background: color-mix(in srgb, var(--w, #888) 28%, rgba(10, 8, 24, 0.9));
  color: #fff;
  font: inherit;
  font-size: var(--t-min);
  font-weight: 700;
  cursor: pointer;
}

.wr-world[aria-current='true'] {
  background: var(--w, #888);
  color: #140c22;
  border-color: #fff;
}

.wr-world.locked {
  opacity: 0.45;
}

.wr-packname {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.wr-packname strong {
  display: block;
  font-size: 19px;
  color: var(--pack, #fff);
}

.wr-packname small {
  font-size: var(--t-min);
  color: var(--muted);
}

.wr-icon {
  min-width: 64px;
}

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

.wr-level {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 4px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #211b4e, #141033);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  min-width: 0;
  transition:
    transform 0.12s,
    border-color 0.12s;
}

.wr-level:hover:not(.locked) {
  transform: translateY(-2px);
  border-color: #7a6ee0;
}

.wr-level canvas {
  width: 100%;
  max-width: 96px;
  aspect-ratio: 128 / 104;
  height: auto;
  border-radius: 6px;
  background: radial-gradient(ellipse at 50% 35%, rgba(110, 96, 200, 0.3), rgba(8, 6, 24, 0.55));
}

.wr-level.done {
  border-color: #6a5ec8;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 14px rgba(122, 110, 224, 0.25);
}

.wr-level.locked {
  opacity: 0.6;
  cursor: default;
}

.wr-lid {
  font-size: var(--t-min);
  color: var(--muted);
}

.wr-lname {
  font-size: var(--t-min);
  font-weight: 700;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wr-stars span {
  color: #4a4378;
  font-size: max(14px, var(--t-min));
}

.wr-stars span.on {
  color: #ffd84a;
  text-shadow: 0 0 6px rgba(255, 216, 74, 0.6);
}

.wr-result .wr-stars span {
  font-size: 40px;
  display: inline-block;
  margin: 0 3px;
}

.wr-stars span.pop {
  animation: wr-pop 0.35s ease-out;
}

@keyframes wr-pop {
  from {
    transform: scale(1.8);
  }
  to {
    transform: scale(1);
  }
}

.wr-lock {
  width: 12px;
  height: 12px;
  margin-top: 2px;
  border-radius: 2px;
  background: #6c63a8;
  position: relative;
}

.wr-lock::before {
  content: '';
  position: absolute;
  left: 2px;
  top: -6px;
  width: 8px;
  height: 8px;
  border: 2px solid #6c63a8;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  box-sizing: border-box;
}

/* ---------- Styles shop ---------- */

.wr-shards {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}

.wr-gem {
  display: inline-block;
  width: 10px;
  height: 14px;
  background: linear-gradient(135deg, #e8fff8, #7ff0d0 45%, #2fae93);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.wr-shop {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wr-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #211b4e, #141033);
}

.wr-item.on {
  border-color: var(--accent);
}

.wr-item canvas {
  flex: none;
  width: 90px;
  height: 36px;
  border-radius: 6px;
}

.wr-iname {
  flex: 1;
  min-width: 0;
  font-weight: 700;
}

.wr-item .wr-btn {
  min-height: 38px;
  padding: 6px 12px;
}

.wr-tag {
  font-size: var(--t-min);
  color: var(--accent);
  font-weight: 700;
  padding: 0 8px;
}

/* ---------- Help, achievements, settings ---------- */

.wr-icons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wr-icons li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: max(14px, var(--t-min));
  line-height: 1.35;
}

.wr-icons canvas {
  flex: 0 0 auto;
  width: 32px;
  height: 16px;
}

.wr-help .wr-icons li:nth-child(n) canvas.wr-bicon {
  width: 30px;
  height: 24px;
}

.wr-achs {
  list-style: none;
  margin: 8px 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.wr-achs li {
  padding: 8px 10px;
  border-radius: 8px;
  background: #17133a;
  border: 1px solid var(--line);
  opacity: 0.6;
}

.wr-achs li.got {
  opacity: 1;
  border-color: var(--accent);
}

.wr-achs li.got strong::before {
  content: '✓ ';
  color: var(--good);
}

.wr-achs small {
  display: block;
  font-size: var(--t-min);
  color: var(--muted);
}

/* A switch's whole row is pressed: 48 px tall, 8 px from the next. */
.wr-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-top: 8px;
  padding: 4px 0;
  font-size: max(15px, var(--t-min));
  cursor: pointer;
}

.wr-toggle input {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
}

kbd {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 5px;
  font-size: var(--t-min);
  color: var(--text);
}

/* ---------- The rotate prompt ----------
   The field is tall: on a phone held sideways it would be under 200 px wide,
   too small to play, so a level in progress pauses behind this until the
   phone is upright again (src/main.js). The menus work either way. */

.wr-rotate {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 16px max(16px, var(--safe-r)) max(16px, var(--safe-b)) max(16px, var(--safe-l));
  background: radial-gradient(ellipse at 50% 30%, #241d58 0%, #07061a 75%);
  text-align: center;
  touch-action: none;
}

.wr-rotate p {
  margin: 0;
  font-size: max(18px, var(--t-min));
  font-weight: 800;
  color: var(--text);
}

/* A phone turning from sideways to upright. */
.wr-rotate-phone {
  position: relative;
  width: 44px;
  height: 78px;
  border: 4px solid var(--accent);
  border-radius: 11px;
  box-shadow: 0 0 18px rgba(255, 138, 61, 0.45);
  animation: wr-turn 2.6s ease-in-out infinite;
}

.wr-rotate-phone::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 14px;
  height: 4px;
  margin-left: -7px;
  border-radius: 2px;
  background: var(--accent);
}

@keyframes wr-turn {
  0%,
  25% {
    transform: rotate(-90deg);
  }
  60%,
  100% {
    transform: rotate(0deg);
  }
}

/* ---------- Ads & page ---------- */

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

.ad-slot[data-filled='true'] {
  min-height: 90px;
}

.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);
}

@media (max-width: 560px) {
  .page {
    padding: 0 var(--safe-r) 32px var(--safe-l);
  }
  .game-root {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .wr-levels {
    grid-template-columns: repeat(3, 1fr);
  }
  .about {
    padding: 0 12px;
  }
}

/* Touch screens: every control at least 44 px square and 8 px from the next
   (docs/PLATFORMS.md, "Controls for each format"). */
@media (pointer: coarse) {
  .wr-hbtn {
    width: 44px;
    height: 44px;
  }
  .wr-quiet,
  .wr-item .wr-btn {
    min-height: 44px;
  }
  .wr-row {
    gap: 8px;
  }
  .wr-worlds {
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
  }
  .wr-world {
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Calm decoration; action and result feedback keep their timing. */
  .wr-meter.full, .wr-meter i::after, .wr-rotate-phone { animation: none; }
  .wr-tip, .wr-level, .wr-opt { transition: none; }
}