/* Math Tower - one bright toy/arcade look: sky blue, chunky "Lilita One", thick ink outlines,
   hard offset shadows, saturated stickers. Every colour is a token on :root. */

:root {
  color-scheme: light;

  --ink: #1d1b33;
  --ink-2: #4a4670;
  --ink-3: #8d89a8;
  --paper: #ffffff;
  --paper-2: #eef3ff;
  --paper-3: #d9e3fb;

  --sky: #38b6ff;
  --sky-2: #8fd9ff;
  --grass: #3fcf62;
  --grass-d: #1f9c42;
  --sun: #ffd23f;
  --sun-d: #e89a00;
  --orange: #ff9f1c;
  --coral: #ff5a5f;
  --coral-d: #d4303b;
  --pink: #ff6fb5;
  --pink-d: #d94791;
  --blue: #3d8bff;
  --blue-d: #1d5fd0;
  --mint: #3fe0c5;
  --coin: #ffcc1f;
  --chalk: #1f5b43;
  --wood: #c0843f;
  --space: #15113a;
  --bad-1: #b3122b;
  --bad-2: #4a0612;
  --scrim: rgba(21, 17, 58, 0.58);

  --font-display: "Lilita One", "Arial Black", "Trebuchet MS", sans-serif;
  --font-body: "Baloo 2", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;

  --line: 4px;
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 26px;

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

  /* Sticker text outlines (text-shadow rings) */
  --o-sm: 2px 0 0 var(--ink), 1.4px 1.4px 0 var(--ink), 0 2px 0 var(--ink), -1.4px 1.4px 0 var(--ink), -2px 0 0 var(--ink), -1.4px -1.4px 0 var(--ink), 0 -2px 0 var(--ink), 1.4px -1.4px 0 var(--ink), 0 3px 0 var(--ink);
  --o-md: 3px 0 0 var(--ink), 2.6px 1.5px 0 var(--ink), 1.5px 2.6px 0 var(--ink), 0 3px 0 var(--ink), -1.5px 2.6px 0 var(--ink), -2.6px 1.5px 0 var(--ink), -3px 0 0 var(--ink), -2.6px -1.5px 0 var(--ink), -1.5px -2.6px 0 var(--ink), 0 -3px 0 var(--ink), 1.5px -2.6px 0 var(--ink), 2.6px -1.5px 0 var(--ink), 0 5px 0 var(--ink), 2px 5px 0 var(--ink), -2px 5px 0 var(--ink);
  --o-lg: 5px 0 0 var(--ink), 4.6px 1.9px 0 var(--ink), 3.5px 3.5px 0 var(--ink), 1.9px 4.6px 0 var(--ink), 0 5px 0 var(--ink), -1.9px 4.6px 0 var(--ink), -3.5px 3.5px 0 var(--ink), -4.6px 1.9px 0 var(--ink), -5px 0 0 var(--ink), -4.6px -1.9px 0 var(--ink), -3.5px -3.5px 0 var(--ink), -1.9px -4.6px 0 var(--ink), 0 -5px 0 var(--ink), 1.9px -4.6px 0 var(--ink), 3.5px -3.5px 0 var(--ink), 4.6px -1.9px 0 var(--ink), 0 9px 0 var(--ink), 3px 9px 0 var(--ink), -3px 9px 0 var(--ink), 4.6px 7px 0 var(--ink), -4.6px 7px 0 var(--ink);

  --rainbow: linear-gradient(90deg, #ff5a5f, #ff9f1c, #ffd23f, #3fcf62, #3fe0c5, #3d8bff, #a66bff, #ff6fb5, #ff5a5f);
  --math-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.2' stroke-width='7' stroke-linecap='round'%3E%3Cpath d='M34 20v28M20 34h28'/%3E%3Cpath d='M118 24l22 22M140 24l-22 22'/%3E%3Cpath d='M22 130h30'/%3E%3Cpath d='M112 122h30M112 136h30'/%3E%3Cpath d='M78 84h26'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.2'%3E%3Ccircle cx='91' cy='71' r='5'/%3E%3Ccircle cx='91' cy='97' r='5'/%3E%3C/g%3E%3C/svg%3E");
  --stars: radial-gradient(2px 2px at 12% 18%, #fff 50%, transparent 52%), radial-gradient(2px 2px at 78% 12%, #fff 50%, transparent 52%), radial-gradient(3px 3px at 55% 70%, #fff 50%, transparent 52%), radial-gradient(2px 2px at 30% 82%, #fff 50%, transparent 52%), radial-gradient(2px 2px at 90% 60%, #fff 50%, transparent 52%), radial-gradient(3px 3px at 42% 34%, #ffe98a 50%, transparent 52%);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  position: fixed;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  background: var(--sky);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  overscroll-behavior: none;
}

button, input { font: inherit; color: inherit; }
button { -webkit-appearance: none; appearance: none; touch-action: manipulation; }

#game-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  display: block;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  outline: none;
  z-index: 0;
}

#ui-root {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  font-family: var(--font-body);
  user-select: none;
  -webkit-user-select: none;
}
#ui-root input { user-select: text; -webkit-user-select: text; }

.noscript {
  position: fixed; inset: 0; display: grid; place-items: center; pointer-events: auto;
  font-family: var(--font-display); font-size: 28px; color: #fff; text-shadow: var(--o-md); background: var(--sky);
}

/* ------------------------------------------------------------------ */
/* Building blocks                                                     */
/* ------------------------------------------------------------------ */

.icon { display: inline-flex; flex: none; width: 1.25em; height: 1.25em; line-height: 0; }
.icon svg { width: 100%; height: 100%; display: block; overflow: visible; }
.coin-icon svg { fill: var(--coin); color: var(--ink); }

.card {
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 0 var(--ink);
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  min-height: 52px;
  padding: 0 20px;
  border: var(--line) solid var(--ink);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 5px 0 var(--ink);
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease, background-color 0.15s ease;
}
.btn .icon { width: 1.2em; height: 1.2em; }
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 6px 0 var(--ink); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.btn:focus-visible, .icon-btn:focus-visible, .key:focus-visible, .char-card:focus-visible,
.swatch:focus-visible, .chip-opt:focus-visible { outline: 4px solid var(--blue); outline-offset: 3px; }
.btn[disabled], .btn[disabled]:hover, .btn[disabled]:active {
  background: #dedbea; color: #6f6a8a; border-color: #8c87a8; box-shadow: 0 5px 0 #8c87a8;
  transform: none; filter: none; cursor: not-allowed; text-shadow: none;
}
.btn-big { min-height: 62px; padding: 0 26px; font-size: 23px; border-radius: 20px; }
.btn-small { min-height: 44px; padding: 0 14px; font-size: 16px; border-width: 3px; border-radius: 14px; box-shadow: 0 4px 0 var(--ink); }
.btn-small:hover { box-shadow: 0 5px 0 var(--ink); }
.btn-wide { width: 100%; }
.btn-grow { flex: 1; }
.btn-go { background: var(--grass); color: #fff; text-shadow: var(--o-sm); }
.btn-sun { background: var(--sun); color: var(--ink); }
.btn-danger { background: var(--coral); color: #fff; text-shadow: var(--o-sm); }
.btn-ghost { background: var(--paper-2); }
.btn-plain { background: var(--paper); }
.btn-danger-soft { color: var(--coral-d); }
.btn-ghost-dark { background: transparent; color: #fff; border-color: #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
.btn-ghost-dark:hover { box-shadow: 0 5px 0 rgba(0, 0, 0, 0.35); }
.btn-ghost-dark:active { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-col { display: grid; gap: 12px; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: var(--line) solid var(--ink);
  border-radius: 15px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.icon-btn .icon { width: 26px; height: 26px; }
.icon-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--ink); }
.icon-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.icon-btn.is-off { background: #e3e0ee; color: #7d7899; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px 3px 8px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 3px 0 var(--ink);
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.3;
  white-space: nowrap;
}
.chip .icon { width: 20px; height: 20px; }

.rank-tag {
  --rank: #9c8f7a;
  display: inline-flex;
  align-items: center;
  padding: 2px 10px 1px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: var(--rank);
  color: #fff;
  box-shadow: 0 3px 0 var(--ink);
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.05em;
  line-height: 1.25;
  text-shadow: var(--o-sm);
  white-space: nowrap;
}
.rainbow, .rank-tag.rainbow {
  background: var(--rainbow);
  background-size: 200% 100%;
  animation: rainbow-move 3s linear infinite;
}

kbd {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border: 2px solid var(--ink);
  border-bottom-width: 4px;
  border-radius: 7px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1;
  vertical-align: middle;
}
kbd.wide { min-width: 54px; }

/* Shared animations */
@keyframes rainbow-move { to { background-position: 200% 0; } }
@keyframes pop { 0% { transform: scale(0.88); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-10px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.16); } 100% { transform: scale(1); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes wiggle { 0%, 100% { transform: rotate(8deg); } 50% { transform: rotate(-4deg) scale(1.08); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(24px) scale(0.96); } }

.pop { animation: pop 0.32s cubic-bezier(0.2, 1.4, 0.4, 1); }
.shake { animation: shake 0.4s ease; }
.nudge { animation: shake 0.3s ease; }
.bump { animation: bump 0.4s cubic-bezier(0.2, 1.5, 0.4, 1); }

/* Every full-screen screen catches pointer input. */
.screen { position: fixed; inset: 0; pointer-events: auto; }
.screen.is-open { animation: fade-in 0.25s ease; }
.screen.is-leaving { animation: fade-out 0.26s ease forwards; pointer-events: none; }

/* ------------------------------------------------------------------ */
/* Start screen                                                        */
/* ------------------------------------------------------------------ */

.screen-start {
  z-index: 50;
  overflow: hidden;
  background-color: var(--sky);
  background-image: var(--math-pattern);
  background-size: 180px 180px;
}
.start-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cloud { position: absolute; display: block; width: 150px; height: auto; animation: float 6s ease-in-out infinite; }
.cloud.c1 { top: 6%; left: -30px; width: 170px; }
.cloud.c2 { top: 16%; right: -36px; width: 140px; animation-delay: -2s; }
.cloud.c3 { bottom: 16%; left: 6%; width: 110px; animation-delay: -4s; opacity: 0.9; }
.hills {
  position: absolute; left: -10%; right: -10%; bottom: -60px; height: 150px;
  background: var(--grass);
  border-top: var(--line) solid var(--ink);
  border-radius: 50% 50% 0 0 / 70px 70px 0 0;
}
.hills::before {
  content: ""; position: absolute; left: 55%; right: -10%; top: -40px; height: 120px;
  background: #2fb653; border: var(--line) solid var(--ink); border-bottom: 0;
  border-radius: 50% 50% 0 0 / 60px 60px 0 0; z-index: -1;
}

.start-scroll {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: calc(var(--safe-t) + 18px) calc(var(--safe-r) + 16px) calc(var(--safe-b) + 28px) calc(var(--safe-l) + 16px);
}
.start-wrap {
  min-height: 100%;
  max-width: 1060px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: center;
  gap: 16px;
}
.start-head { display: grid; justify-items: center; text-align: center; gap: 4px; }

.logo { display: grid; justify-items: center; line-height: 0.84; transform: rotate(-3deg); }
.logo-line { display: flex; gap: 0.02em; }
.logo-ch {
  --c: #fff;
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(58px, 17vw, 112px);
  color: var(--c);
  text-shadow: var(--o-lg);
  transform: rotate(var(--rot, -3deg));
  animation: letter-bob 2.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.18s);
}
.logo-ch:nth-child(even) { --rot: 4deg; }
.logo-math .logo-ch:nth-child(1) { --c: var(--coral); }
.logo-math .logo-ch:nth-child(2) { --c: var(--sun); }
.logo-math .logo-ch:nth-child(3) { --c: var(--grass); }
.logo-math .logo-ch:nth-child(4) { --c: var(--pink); }
.logo-tower .logo-ch { --c: #fff; }
@keyframes letter-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

.tagline {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: clamp(19px, 5vw, 24px);
  color: #fff;
  text-shadow: var(--o-sm);
}
.tower-art { display: none; }

.start-card { width: 100%; max-width: 460px; padding: 20px 20px 22px; }
.start-card.pop { animation: pop 0.3s cubic-bezier(0.2, 1.4, 0.4, 1); }
.start-card.shake { animation: shake 0.4s ease; }
.card-title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.05;
  color: var(--ink);
}

.stepper { display: flex; align-items: center; justify-content: center; gap: 8px; margin: -2px 0 12px; }
.step-dot {
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 3px solid var(--ink); border-radius: 50%; background: var(--paper-2);
  font-family: var(--font-display); font-size: 17px; color: var(--ink-3);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.step-dot.is-on { background: var(--sun); color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.step-line { width: 56px; height: 10px; border: 3px solid var(--ink); border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.step-line span { display: block; width: 0; height: 100%; background: var(--sun); transition: width 0.35s ease; }
.stepper.is-two .step-line span { width: 100%; }

.field { margin-bottom: 14px; min-width: 0; }
.field-label {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
  font-weight: 800; font-size: 17px; line-height: 1.1; color: var(--ink);
}
.field-label .icon { width: 22px; height: 22px; color: var(--blue-d); }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 12px; }
.text-input {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  border: var(--line) solid var(--ink);
  border-radius: 16px;
  background: var(--paper-2);
  box-shadow: inset 0 4px 0 rgba(29, 27, 51, 0.08);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 21px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.text-input::placeholder { color: #9a96b5; font-weight: 600; }
.text-input:focus { background: #fff; border-color: var(--blue-d); box-shadow: 0 0 0 4px rgba(61, 139, 255, 0.35); }
.has-error .text-input { border-color: var(--coral-d); background: #fff0f0; }
.field-error {
  display: flex; align-items: center; gap: 6px; margin: 6px 0 0;
  font-weight: 800; font-size: 15px; line-height: 1.15; color: var(--coral-d);
}
.field-error:empty { display: none; }
.field-error .icon { width: 20px; height: 20px; }

.pick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pick {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 12px 8px 10px;
  border: var(--line) solid var(--ink);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 5px 0 var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.15s ease;
}
.pick:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink); }
.pick:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pick-art {
  display: grid; place-items: center; width: 66px; height: 66px;
  border: 3px solid var(--ink); border-radius: 50%; background: var(--paper-2);
  transition: background-color 0.15s ease;
}
.pick-art .icon { width: 42px; height: 42px; }
.pick-name { font-family: var(--font-display); font-size: 23px; line-height: 1; }
.pick-check {
  position: absolute; top: -12px; right: -10px; display: grid; place-items: center;
  width: 34px; height: 34px; border: 3px solid var(--ink); border-radius: 50%;
  background: var(--grass); color: #fff; transform: scale(0);
  transition: transform 0.22s cubic-bezier(0.3, 1.7, 0.5, 1);
}
.pick-check .icon { width: 20px; height: 20px; }
.pick-check svg { stroke-width: 3.4; }
.pick-girl .pick-art { color: var(--pink-d); }
.pick-boy .pick-art { color: var(--blue-d); }
.pick-girl:has(input:checked) { background: var(--pink); }
.pick-boy:has(input:checked) { background: var(--blue); }
.pick:has(input:checked) .pick-art { background: #fff; }
.pick:has(input:checked) .pick-name { color: #fff; text-shadow: var(--o-sm); }
.pick:has(input:checked) .pick-check { transform: scale(1); }
.pick:has(input:focus-visible) { outline: 4px solid var(--blue); outline-offset: 3px; }
.has-error .pick { border-color: var(--coral-d); }
.pick.boing { animation: pop 0.34s cubic-bezier(0.2, 1.6, 0.4, 1); }
.pick-small { grid-template-columns: auto 1fr; justify-items: start; align-items: center; gap: 10px; padding: 8px 12px; }
.pick-small .pick-art { width: 48px; height: 48px; }
.pick-small .pick-art .icon { width: 30px; height: 30px; }
.pick-small .pick-name { font-size: 21px; }

.continue { display: grid; gap: 14px; }
.btn-continue { min-height: 84px; justify-content: flex-start; gap: 14px; padding: 10px 18px; white-space: normal; text-align: left; }
.btn-continue > .icon { width: 36px; height: 36px; }
.btn-stack { display: grid; gap: 6px; min-width: 0; }
.btn-stack b { font-weight: 400; font-size: 24px; line-height: 1.05; overflow-wrap: anywhere; }
.btn-stack small {
  justify-self: start; padding: 2px 10px; border: 2px solid var(--ink); border-radius: 10px;
  background: #fff; color: var(--ink); text-shadow: none;
  font-family: var(--font-body); font-weight: 800; font-size: 14px; line-height: 1.3;
}
.confirm-box {
  padding: 12px; border: 3px dashed var(--coral-d); border-radius: 16px; background: #fff3f3;
}
.confirm-box.pop { animation: pop 0.3s cubic-bezier(0.2, 1.4, 0.4, 1); }
.confirm-box p { margin: 0 0 12px; font-weight: 700; font-size: 16px; line-height: 1.3; }
.confirm-box .btn { font-size: 17px; }

/* v6 "Who's playing?": a grid of big player cards, "Add a new player", a delete button with an in-page confirm. */
/* --n (set by ui.js on the card) = cards in the grid: a short list keeps a snug, centred card instead of a wide empty one */
.start-card.is-picker { max-width: clamp(460px, calc(var(--n, 9) * 172px + (var(--n, 9) - 1) * 12px + 48px), 640px); }
.players { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.pk-title { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; }
.pk-title .icon { width: 38px; height: 38px; color: var(--blue-d); }
.pk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  justify-self: center;
  width: 100%;
  max-width: calc(var(--n, 9) * 172px + (var(--n, 9) - 1) * 12px);
  gap: 20px 12px;
  padding-top: 8px;             /* room for the "Last played" ribbon and the delete buttons */
}
.pk-card { position: relative; display: grid; min-width: 0; }
.pk-play {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);    /* a wide rank badge (OUTSTANDING) may not widen the card's column */
  justify-items: center;
  align-content: start;
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding: 12px 8px 12px;
  border: var(--line) solid var(--ink);
  border-radius: 20px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 5px 0 var(--ink);
  font: inherit;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.15s ease;
}
.pk-play:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink); }
.pk-play:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.pk-play:focus-visible { outline: 4px solid var(--blue); outline-offset: 3px; }
.pk-card.boing .pk-play { animation: pop 0.34s cubic-bezier(0.2, 1.6, 0.4, 1); }
.pk-thumb { width: min(100%, 120px); }
.pk-thumb.is-deep { background: radial-gradient(circle at 50% 40%, var(--deep-1, #5546c9) 0%, var(--deep-2, #1d1650) 78%); }
.pk-thumb.is-deep .thumb-ph { color: rgba(255, 255, 255, 0.45); }
.pk-name {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-display); font-size: 22px; line-height: 1.1;
}
.pk-rank { max-width: 100%; overflow: hidden; font-size: 14px; padding: 1px 7px 0; letter-spacing: 0.02em; }
.pk-age {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; white-space: nowrap;
  padding: 1px 8px; border: 2px solid var(--ink); border-radius: 999px; background: #fff;
  font-weight: 800; font-size: 14px; line-height: 1.3; color: var(--ink);
}
.pk-age .icon { width: 16px; height: 16px; color: var(--pink, #ff5fa2); flex: none; }
.pk-meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 10px;
  font-weight: 800; font-size: 15px; line-height: 1.25; color: var(--ink-2);
}
.pk-meta > span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.pk-meta .icon { width: 18px; height: 18px; }
.pk-world .icon { color: var(--blue-d); }
.pk-card.is-last .pk-play { background: #fff5c2; }
.pk-last {
  position: absolute; top: -13px; left: -6px; z-index: 1;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 9px 1px 5px;
  border: 3px solid var(--ink); border-radius: 999px;
  background: var(--sun); box-shadow: 0 2px 0 var(--ink);
  font-family: var(--font-display); font-size: 13px; line-height: 1.3; white-space: nowrap;
  pointer-events: none;
}
.pk-last .icon { width: 15px; height: 15px; }
.pk-del {
  position: absolute; top: -12px; right: -9px; z-index: 2;
  display: grid; place-items: center;
  width: 42px; height: 42px; padding: 0;
  border: 3px solid var(--ink); border-radius: 50%;
  background: #fff; color: var(--coral-d);
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.15s ease;
}
.pk-del .icon { width: 21px; height: 21px; }
.pk-del:hover { background: #fff0f0; transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
.pk-del:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.pk-del:focus-visible { outline: 4px solid var(--blue); outline-offset: 2px; }
#ui-root.is-touch .pk-del { width: 44px; height: 44px; }
@media (pointer: coarse) { #ui-root .pk-del { width: 44px; height: 44px; } }
.pk-add {
  align-content: center;
  min-height: 100%;
  border-style: dashed;
  background: var(--paper-2);
  box-shadow: 0 5px 0 rgba(29, 27, 51, 0.3);
}
.pk-add:hover { box-shadow: 0 7px 0 rgba(29, 27, 51, 0.3); }
.pk-add:active { box-shadow: 0 2px 0 rgba(29, 27, 51, 0.3); }
.pk-add-art {
  display: grid; place-items: center; width: 68px; height: 68px; margin: 6px 0 4px;
  border: 3px solid var(--ink); border-radius: 50%;
  background: var(--grass); color: #fff; box-shadow: 0 3px 0 var(--ink);
}
.pk-add-art .icon { width: 38px; height: 38px; filter: drop-shadow(0 2px 0 var(--ink)); }
.pk-add .pk-name { white-space: normal; font-size: 20px; line-height: 1.05; }
.pk-sub { font-weight: 800; font-size: 14px; line-height: 1.2; color: var(--ink-2); }
.pk-add.is-full { color: #6f6a8a; }
.pk-add.is-full .pk-add-art { background: #dedbea; color: #6f6a8a; }
.pk-add.is-full .pk-add-art .icon { filter: none; }
.pk-note {
  display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px;
  border: 3px solid var(--ink); border-radius: 14px; background: #e6f3ff;
  font-weight: 800; font-size: 16px; line-height: 1.3;
}
.pk-note.pop { animation: pop 0.3s cubic-bezier(0.2, 1.4, 0.4, 1); }
.pk-note .icon { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--blue-d); }
.pk-note.is-bad { background: #fff3f3; }
.pk-note.is-bad .icon { color: var(--coral-d); }
.pk-confirm { display: grid; gap: 14px; padding: 16px; }
.pkc-top { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; }
.pkc-thumb { width: 96px; }
.pkc-words .card-title { margin: 0 0 6px; font-size: 28px; overflow-wrap: anywhere; }
.pkc-words p { margin: 0; }
.btn-fit { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 380px) {
  .pk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
  .pk-name { font-size: 20px; }
  .pkc-top { grid-template-columns: 76px minmax(0, 1fr); }
  .pkc-thumb { width: 76px; }
}

@media (min-width: 920px) {
  .start-wrap { grid-template-columns: minmax(0, 1fr) 460px; gap: 48px; align-items: center; }
  .start-head { align-self: center; }
  /* v6: "Who's playing?" gets a wider column (beats start-art.css, which is loaded after this file) */
  .screen-start .start-wrap.has-picker { grid-template-columns: minmax(0, 1fr) minmax(0, 640px); }
  .screen-start .start-wrap.has-picker .start-card.is-picker { justify-self: center; }
}
@media (min-width: 920px) and (min-height: 660px) {
  .tower-art { display: block; width: 210px; height: auto; margin-top: 10px; animation: float 4.5s ease-in-out infinite; filter: drop-shadow(0 8px 0 rgba(29, 27, 51, 0.22)); }
}
@media (max-width: 380px) {
  .field-row { grid-template-columns: minmax(0, 1fr) 84px; gap: 10px; }
  .start-card { padding: 16px 14px 18px; }
}

/* ------------------------------------------------------------------ */
/* Reaction screen (YAY / ARGH)                                        */
/* ------------------------------------------------------------------ */

.screen-reaction { z-index: 52; display: grid; place-items: center; overflow: hidden; text-align: center; }
.reaction-bg { position: absolute; inset: -60%; }
.is-good .reaction-bg {
  background: repeating-conic-gradient(from 0deg, #ffd23f 0deg 10deg, #ffbe1a 10deg 20deg);
  animation: spin 40s linear infinite;
}
.is-bad { background: var(--bad-2); }
.is-bad .reaction-bg {
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 70, 70, 0.55) 0%, rgba(120, 8, 26, 0.2) 38%, rgba(20, 2, 8, 0.85) 100%),
    repeating-conic-gradient(from 3deg at 50% 42%, #7d0b1e 0deg 9deg, #5e0716 9deg 18deg);
}
.burst {
  position: absolute; left: 50%; top: 40%; width: min(130vw, 860px); aspect-ratio: 1;
  translate: -50% -50%;
  background: #ff3b30;
  clip-path: polygon(50% 0%, 57% 30%, 79% 7%, 69% 36%, 98% 25%, 75% 47%, 100% 60%, 71% 60%, 85% 88%, 60% 70%, 52% 100%, 44% 72%, 20% 93%, 30% 64%, 0% 72%, 24% 50%, 2% 30%, 31% 35%, 21% 6%, 43% 28%);
  opacity: 0.32;
  animation: throb 0.9s ease-in-out infinite;
}
@keyframes throb { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.06) rotate(3deg); } }

.reaction-inner {
  position: relative; z-index: 2; display: grid; justify-items: center; gap: 10px;
  width: 100%; max-width: 680px; max-height: 100%; overflow-y: auto;
  padding: calc(var(--safe-t) + 20px) 16px calc(var(--safe-b) + 24px);
}
.reaction-face {
  display: grid; place-items: center; width: 128px; height: 128px;
  border: 6px solid var(--ink); border-radius: 50%; box-shadow: 0 8px 0 var(--ink);
  animation: face-in 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.reaction-face .icon { width: 92px; height: 92px; }
.is-good .reaction-face { background: var(--grass); color: var(--ink); }
.is-bad .reaction-face { background: var(--coral); color: var(--ink); }
@keyframes face-in { from { transform: scale(0) rotate(-30deg); } }

.reaction-word {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(100px, 30vw, 210px);
  line-height: 0.92;
  letter-spacing: 0.02em;
  text-shadow: var(--o-lg);
}
.is-good .reaction-word { color: #fff; animation: yay-bounce 0.9s cubic-bezier(0.3, 0, 0.4, 1) infinite; }
.is-bad .reaction-word { color: #ff4a3d; animation: argh-shake 0.5s linear 0s 2, argh-jitter 1.8s linear 1s infinite; }
@keyframes yay-bounce {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  30% { transform: translateY(-26px) scale(0.96, 1.06); }
  55% { transform: translateY(0) scale(1.08, 0.92); }
  70% { transform: translateY(-6px) scale(1, 1); }
}
@keyframes argh-shake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  10% { transform: translate(-14px, 4px) rotate(-5deg); }
  20% { transform: translate(12px, -6px) rotate(4deg); }
  30% { transform: translate(-10px, 6px) rotate(-3deg); }
  40% { transform: translate(10px, -2px) rotate(5deg); }
  50% { transform: translate(-8px, 4px) rotate(-2deg); }
  60% { transform: translate(8px, -4px) rotate(3deg); }
  70% { transform: translate(-6px, 2px) rotate(-3deg); }
  80% { transform: translate(5px, -3px) rotate(2deg); }
  90% { transform: translate(-3px, 2px) rotate(-1deg); }
}
@keyframes argh-jitter {
  0%, 70%, 100% { transform: translate(0, 0) rotate(0); }
  74% { transform: translate(-6px, 2px) rotate(-3deg); }
  78% { transform: translate(6px, -2px) rotate(3deg); }
  82% { transform: translate(-4px, 1px) rotate(-2deg); }
  86% { transform: translate(3px, 0) rotate(1deg); }
}
.reaction-line {
  margin: 4px 0 0; font-family: var(--font-display); font-size: clamp(24px, 6vw, 36px); line-height: 1.1;
  color: #fff; text-shadow: var(--o-md);
}
.reaction-sub {
  margin: 4px 0 0; padding: 8px 16px; max-width: 520px;
  border: 3px solid var(--ink); border-radius: 16px; background: #fff; color: var(--ink);
  box-shadow: 0 4px 0 var(--ink); font-weight: 700; font-size: 18px; line-height: 1.3;
}
.reaction-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 6px; }
.pick-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 3px 12px 3px 8px; border: 3px solid var(--ink); border-radius: 999px;
  background: var(--paper-2); box-shadow: 0 3px 0 var(--ink);
  font-family: var(--font-display); font-size: 16px; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pick-chip .icon { width: 20px; height: 20px; }
.screen-reaction .btn-big { margin-top: 6px; animation: rise-in 0.4s 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both; }

/* Confetti pieces fall forever; with reduced motion they sit still. */
.confetti { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.confetti i {
  position: absolute; top: -30px; display: block;
  border: 2px solid var(--ink); border-radius: 3px;
  animation: confetti-fall var(--t) linear var(--d) infinite;
}
@keyframes confetti-fall {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to { transform: translate3d(var(--x), 110vh, 0) rotate(var(--r)); }
}

/* ------------------------------------------------------------------ */
/* Movie finder: "Searching the internet..." and the result card       */
/* ------------------------------------------------------------------ */

.screen-movie {
  z-index: 53;
  display: grid;
  place-items: center;
  overflow: hidden;
  background-color: var(--space);
  background-image: var(--stars);
  background-size: 260px 260px;
  color: #fff;
  text-align: center;
}
/* The slowly turning rays are a bigger layer clipped to the screen (nothing sticks out past the edges). */
.movie-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.movie-bg::before {
  content: ""; position: absolute; inset: -40%;
  background:
    radial-gradient(circle at 50% 50%, rgba(123, 92, 255, 0.5) 0%, rgba(123, 92, 255, 0) 45%),
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.05) 0deg 8deg, transparent 8deg 16deg);
  animation: spin 70s linear infinite;
}
.movie-inner {
  position: relative; z-index: 2; display: grid; justify-items: center; width: 100%; max-height: 100%;
  overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--safe-t) + 18px) 16px calc(var(--safe-b) + 22px);
}

.movie-search { display: grid; justify-items: center; gap: 12px; width: 100%; max-width: 620px; }
.search-orb { position: relative; flex: none; width: 150px; height: 150px; }
.orb-ring { position: absolute; inset: 0; border: 4px dashed rgba(255, 255, 255, 0.45); border-radius: 50%; animation: spin 9s linear infinite; }
.orb-globe {
  position: absolute; inset: 22px; display: grid; place-items: center;
  border: 5px solid var(--ink); border-radius: 50%; background: var(--blue); color: #fff;
  box-shadow: 0 6px 0 var(--ink), 0 0 44px rgba(61, 139, 255, 0.65);
}
.orb-globe .icon { width: 58%; height: 58%; }
.orb-lens {
  position: absolute; left: 50%; top: 50%; width: 42%; height: 42%; margin: -21% 0 0 -21%;
  display: grid; place-items: center; border: 4px solid var(--ink); border-radius: 50%;
  background: var(--sun); color: var(--ink); box-shadow: 0 4px 0 var(--ink);
  animation: lens-orbit 2.6s linear infinite;
}
.orb-lens .icon { width: 60%; height: 60%; }
.orb-lens svg { stroke-width: 2.6; }
@keyframes lens-orbit {
  from { transform: rotate(0deg) translateX(60%) rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) translateX(60%) rotate(-180deg) scale(1.12); }
  to { transform: rotate(360deg) translateX(60%) rotate(-360deg) scale(1); }
}
.search-title {
  margin: 4px 0 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(26px, 6vw, 42px); line-height: 1.1; text-shadow: var(--o-md); overflow-wrap: anywhere;
}
.search-movie { color: var(--sun); }
.dots i { font-style: normal; animation: dot-blink 1.2s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: 0.2s; }
.dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-blink { 0%, 100% { opacity: 0.2; } 40% { opacity: 1; } }
.search-sub {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin: 0; padding: 4px 14px 4px 8px;
  border: 3px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); box-shadow: 0 3px 0 var(--ink);
  font-weight: 800; font-size: 17px; line-height: 1.2;
}
.search-sub .icon { width: 22px; height: 22px; }
.search-lines { list-style: none; display: grid; gap: 6px; width: min(460px, 100%); margin: 2px 0 0; padding: 0; text-align: left; }
.search-lines li {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 12px;
  border: 3px solid rgba(255, 255, 255, 0.22); border-radius: 14px; background: rgba(255, 255, 255, 0.08);
  font-weight: 700; font-size: 15px; line-height: 1.25;
  animation: rise-in 0.3s ease both;
}
.search-lines li.is-live { border-color: var(--sun); background: rgba(255, 210, 63, 0.15); }
.line-icon {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px;
  border: 2px solid var(--ink); border-radius: 50%; background: var(--grass); color: #fff;
}
.line-icon .icon { width: 16px; height: 16px; }
.line-icon svg { stroke-width: 3.2; }
.is-live .line-icon { border: 0; background: transparent; }
.spinner { display: block; width: 22px; height: 22px; border: 4px solid rgba(255, 255, 255, 0.28); border-top-color: var(--sun); border-radius: 50%; animation: spin 0.8s linear infinite; }
.line-text { min-width: 0; overflow-wrap: anywhere; }
.search-skip { margin-top: 4px; }
.search-skip.pop { animation: rise-in 0.35s ease; }

.movie-card {
  position: relative; display: grid; gap: 12px; width: min(640px, 100%); padding: 18px;
  border: var(--line) solid var(--ink); border-radius: var(--r-lg); background: var(--paper); color: var(--ink);
  box-shadow: 0 8px 0 var(--ink); text-align: left;
  animation: modal-in 0.42s cubic-bezier(0.2, 1.35, 0.4, 1);
}
.movie-kicker {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 3px 14px 3px 8px;
  border: 3px solid var(--ink); border-radius: 999px; background: var(--grass); color: #fff; box-shadow: 0 3px 0 var(--ink);
  font-family: var(--font-display); font-size: 20px; line-height: 1.2; text-shadow: var(--o-sm);
}
.movie-kicker.is-made { background: var(--pink); }
.movie-kicker .icon { width: 24px; height: 24px; filter: drop-shadow(0 2px 0 var(--ink)); }
.movie-kicker svg { stroke-width: 2.8; }
.movie-film {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; padding: 12px;
  border: 3px solid var(--ink); border-radius: 18px; background: var(--paper-2);
}
.film-badge {
  display: grid; place-items: center; width: 48px; height: 48px;
  border: 3px solid var(--ink); border-radius: 14px; background: var(--sun); box-shadow: 0 3px 0 var(--ink);
}
.film-badge .icon { width: 28px; height: 28px; }
.movie-film.is-missing .film-badge { background: #e3e0ee; color: var(--ink-3); }
.film-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.05; overflow-wrap: anywhere; }
.film-year {
  display: inline-block; padding: 1px 8px 0; border: 2px solid var(--ink); border-radius: 8px; background: #fff;
  font-size: 17px; line-height: 1.2; vertical-align: 3px;
}
.film-sum {
  margin: 6px 0 0; font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.movie-char {
  display: grid; grid-template-columns: 196px minmax(0, 1fr); align-items: center; gap: 16px; padding: 12px 16px 12px 12px;
  border: var(--line) solid var(--ink); border-radius: 22px;
  background-color: var(--space); background-image: var(--stars); background-size: 240px 160px;
  color: #fff; box-shadow: 0 5px 0 var(--ink);
}
.sil-wrap { position: relative; width: 100%; aspect-ratio: 1; }
.sil-glow {
  position: absolute; inset: 4%; border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 180, 255, 0.95) 0%, rgba(123, 92, 255, 0.5) 42%, rgba(123, 92, 255, 0) 70%);
  animation: sil-glow 2.4s ease-in-out infinite;
}
@keyframes sil-glow { 50% { transform: scale(1.08); opacity: 0.75; } }
.char-thumb.sil-thumb { position: relative; border: 0; border-radius: 0; background: transparent; }
.sil-thumb .thumb-ph { color: rgba(255, 255, 255, 0.4); }
/* A mystery shape: whatever the renderer gives, the locked favourite reads as a dark silhouette with a glow. */
.char-thumb.is-sil img { filter: brightness(0) drop-shadow(0 0 2px #efe9ff) drop-shadow(0 0 10px #9b82ff); }
.char-text { display: grid; justify-items: start; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.unlock-badge {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; padding: 4px 12px 4px 8px;
  border: 3px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); box-shadow: 0 3px 0 var(--ink);
  font-family: var(--font-display); font-size: 17px; line-height: 1.15; overflow-wrap: anywhere;
}
.unlock-badge > span { min-width: 0; }
.unlock-badge b { font-weight: 400; color: var(--blue-d); }
.unlock-badge .icon { flex: none; width: 20px; height: 20px; }
.unlock-badge.is-open { background: var(--sun); }
.rb-text {
  background: var(--rainbow); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-stroke: 0.6px var(--ink); animation: rainbow-move 3s linear infinite;
}
.movie-char-name {
  min-width: 0; max-width: 100%; margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 38px; line-height: 1;
  text-shadow: var(--o-md); overflow-wrap: anywhere;
}
/* "Buzz Lightyear is from Toy Story (1995)." */
.movie-char-from {
  display: inline-flex; align-items: flex-start; gap: 5px; min-width: 0; max-width: 100%; margin: 0;
  padding: 2px 10px 2px 6px; border-radius: 10px; background: rgba(255, 210, 63, 0.16); color: var(--sun);
  font-weight: 800; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere;
}
.movie-char-from .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.movie-char-sum {
  margin: 0; font-weight: 600; font-size: 15px; line-height: 1.3; color: #ddd8ff;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.movie-source { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 700; font-size: 13px; line-height: 1.2; color: var(--ink-3); }
.movie-source .icon { flex: none; width: 18px; height: 18px; }
.movie-go { justify-self: center; min-width: min(320px, 100%); }
/* Source line + "Not right? Fix it" */
.movie-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-width: 0; }
.movie-foot .movie-source { flex: 1 1 200px; min-width: 0; }
.movie-fix { flex: none; max-width: 100%; }
.movie-fix .icon { width: 20px; height: 20px; }
/* The fix form (same fields as the designer's Search again) */
.movie-kicker.is-fix { background: var(--blue); }
.movie-fixcard { width: min(580px, 100%); }
.movie-fixcard .ds-lead .icon { color: var(--blue-d); }
.fix-actions { justify-content: flex-end; flex-wrap: nowrap; }

/* ------------------------------------------------------------------ */
/* Loading                                                             */
/* ------------------------------------------------------------------ */

.overlay-loading {
  z-index: 60;
  display: grid;
  place-items: center;
  background-color: var(--space);
  background-image: var(--math-pattern);
  background-size: 180px 180px;
}
.loading-box { display: grid; justify-items: center; gap: 18px; padding: 16px; text-align: center; }
.loading-tower { display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-start; gap: 4px; height: 160px; }
.loading-tower i {
  display: block; height: 26px; border: var(--line) solid var(--ink); border-radius: 8px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
  opacity: 0;
  animation: stack 2.6s cubic-bezier(0.3, 1.4, 0.5, 1) infinite;
}
.loading-tower i:nth-child(1) { width: 110px; background: var(--grass); animation-delay: 0s; }
.loading-tower i:nth-child(2) { width: 94px; background: var(--sun); animation-delay: 0.22s; }
.loading-tower i:nth-child(3) { width: 78px; background: var(--blue); animation-delay: 0.44s; }
.loading-tower i:nth-child(4) { width: 62px; background: var(--coral); animation-delay: 0.66s; }
.loading-tower i:nth-child(5) { width: 46px; background: var(--mint); animation-delay: 0.88s; }
@keyframes stack {
  0% { opacity: 0; transform: translateY(-46px); }
  12% { opacity: 1; transform: translateY(0); }
  78% { opacity: 1; transform: translateY(0); }
  92%, 100% { opacity: 0; transform: translateY(0) scale(0.9); }
}
.loading-text { margin: 0; font-family: var(--font-display); font-size: 28px; color: #fff; text-shadow: var(--o-sm); }
.loading-bar { width: min(320px, 72vw); height: 24px; padding: 3px; border: var(--line) solid #fff; border-radius: 999px; overflow: hidden; }
.loading-bar span {
  display: block; width: 42%; height: 100%; border-radius: 999px;
  background: repeating-linear-gradient(-45deg, var(--sun) 0 10px, var(--orange) 10px 20px);
  animation: bar-slide 1.1s ease-in-out infinite alternate;
}
@keyframes bar-slide { from { transform: translateX(-20%); } to { transform: translateX(158%); } }

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

.hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.hud.is-open { animation: fade-in 0.3s ease; }
.hud button, .hud-hint { pointer-events: auto; }

.hud-left, .hud-right { position: absolute; top: calc(var(--safe-t) + 12px); display: grid; gap: 8px; }
.hud-left { left: calc(var(--safe-l) + 12px); justify-items: start; }
.hud-right { right: calc(var(--safe-r) + 12px); justify-items: end; }

.hud-card {
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: 18px;
  box-shadow: 0 5px 0 var(--ink);
  padding: 8px 12px;
}
/* The rank card is a button: tapping it explains that ranks come from Training. Long names wrap under the rank. */
.hud-player {
  display: grid; gap: 6px; width: auto; min-width: 236px; max-width: min(340px, 46vw);
  color: var(--ink); text-align: left; font: inherit; cursor: pointer; touch-action: manipulation;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.hud-player:hover { transform: translateY(-1px); box-shadow: 0 6px 0 var(--ink); }
.hud-player:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.hud-player:focus-visible { outline: 4px solid var(--blue); outline-offset: 3px; }
.hud-player.pop { animation: pop 0.32s cubic-bezier(0.2, 1.4, 0.4, 1); }
.hud-player-top { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
.hud-rank { font-size: 18px; }
.hud-rank.pop { animation: pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1); }
.hud-name { flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-size: 19px; line-height: 1.25; }
.mini-bar {
  --bar: var(--grass);
  display: block;
  height: 18px; padding: 2px; border: 3px solid var(--ink); border-radius: 999px; background: var(--paper-2); overflow: hidden;
}
.mini-bar-fill {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: repeating-linear-gradient(90deg, var(--bar) 0 5px, transparent 5px 7px);
  transition: width 0.45s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.mini-bar.rainbow { background: var(--paper-2); animation: none; }
.mini-bar.rainbow .mini-bar-fill { background: var(--rainbow); background-size: 200% 100%; animation: rainbow-move 3s linear infinite; }
.hud-rank-sub { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; line-height: 1.15; color: var(--ink-2); }
.hud-rank-sub b { color: var(--ink); }
.hud-rank-sub .sub-icon { width: 16px; height: 16px; color: var(--blue-d); }

/* "New looks!": characters unlocked but not seen yet (rank-up closed with "Later") */
.btn-newlooks {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px 0 10px;
  border: 3px solid var(--ink); border-radius: 999px; background: var(--pink); color: #fff;
  box-shadow: 0 4px 0 var(--ink); font-family: var(--font-display); font-size: 17px; line-height: 1; text-shadow: var(--o-sm);
  cursor: pointer; touch-action: manipulation;
  animation: looks-pulse 1.4s ease-in-out infinite;
}
.btn-newlooks .icon { width: 22px; height: 22px; filter: drop-shadow(0 2px 0 var(--ink)); }
.btn-newlooks:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); animation: none; }
@keyframes looks-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); box-shadow: 0 4px 0 var(--ink), 0 0 0 6px rgba(255, 111, 181, 0.35); } }

.hud-world { --world: var(--grass); }
.world-dot { width: 16px; height: 16px; border: 3px solid var(--ink); border-radius: 50%; background: var(--world); }
.btn-down { min-height: 48px; padding: 0 16px; background: var(--sun); font-size: 18px; animation: rise-in 0.3s cubic-bezier(0.2, 1.4, 0.4, 1); }

.hud-btns { display: flex; gap: 8px; }
.hud-coins { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 128px; padding: 4px 14px 4px 8px; }
.hud-coins .icon { width: 34px; height: 34px; }
.hud-coin-num { font-family: var(--font-display); font-size: 30px; line-height: 1.2; }
.chip-carry { background: var(--sun); }
.chip-per { font-size: 14px; }
.chip-per .icon { color: var(--sun-d); }
/* Training pays no coins, so the "+N per gate" chip steps aside while it is open. */
#ui-root[data-modal="training"] .chip-per { visibility: hidden; }
.chip-skip { gap: 5px; font-size: 14px; background: #e9e7f2; color: var(--ink-2); }
.chip-skip .skip-icon { color: var(--ink-3); }
.chip-skip.is-ready { background: var(--mint); color: var(--ink); }
.chip-skip.is-ready .skip-icon { color: var(--ink); }
/* Ready but too few coins: the grey wait look, "Need (coin) N" (mint only ever means "you can skip now"). */
.chip-skip.is-ready.is-poor { background: #e9e7f2; color: var(--ink-2); }
.chip-skip.is-ready.is-poor .skip-icon { color: var(--ink-3); }
.skip-price { display: inline-flex; align-items: center; gap: 2px; margin-left: 2px; padding-left: 6px; border-left: 2px solid rgba(29, 27, 51, 0.25); }
.skip-price b { font-weight: 400; }
.chip-skip .skip-price .icon { width: 17px; height: 17px; }
.chip-skip.is-poor .skip-price { margin-left: 0; padding-left: 0; border-left: 0; }
/* "Coin Power ready": enough banked coins for the next level in the Shop. */
.hud-coins { position: relative; }
.power-badge {
  position: absolute; top: -11px; left: -11px; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px;
  border: 3px solid var(--ink); border-radius: 50%; background: var(--grass); color: #fff; box-shadow: 0 3px 0 var(--ink);
  pointer-events: auto;
  animation: power-pop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.power-badge .icon { width: 17px; height: 17px; filter: drop-shadow(0 1px 0 var(--ink)); }
.power-badge svg { stroke-width: 2.6; }
@keyframes power-pop { 0% { transform: scale(0) rotate(-40deg); } 60% { transform: scale(1.3) rotate(8deg); } 100% { transform: scale(1) rotate(0deg); } }
.icon-btn.btn-hint.is-on { background: var(--sun); }
/* The menu waits while a gate is open (Escape and the answer keys belong to the gate). */
#ui-root.has-math .hud [data-act="menu"] { opacity: 0.45; }

.hud-meter {
  position: absolute;
  right: calc(var(--safe-r) + 18px);
  top: 50%;
  transform: translateY(-38%);
  height: min(44vh, 360px);
  width: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.meter-cap { display: grid; place-items: center; width: 34px; height: 34px; border: 3px solid var(--ink); border-radius: 50%; background: var(--paper); box-shadow: 0 3px 0 var(--ink); flex: none; }
.meter-cap .icon { width: 20px; height: 20px; }
.meter-top { background: var(--mint); }
.meter-track { position: relative; flex: 1; width: 18px; border: 3px solid var(--ink); border-radius: 999px; background: rgba(255, 255, 255, 0.8); }
.meter-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; border-radius: 999px; background: var(--sun); transition: height 0.25s linear; }
.meter-ticks { position: absolute; inset: 0; }
.tick { position: absolute; left: -8px; right: -8px; height: 8px; margin-bottom: -4px; border: 2px solid var(--ink); border-radius: 4px; background: #fff; }
.tick.is-solved { background: var(--grass); }
.meter-marker {
  position: absolute; left: 50%; bottom: 0; z-index: 2;
  display: grid; place-items: center; width: 36px; height: 36px;
  transform: translate(-50%, 50%);
  border: 3px solid var(--ink); border-radius: 50%; background: var(--pink); color: var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  transition: bottom 0.25s linear;
}
.meter-marker[data-g="boy"] { background: var(--blue); }
.meter-face { display: grid; place-items: center; }
.meter-face .icon { width: 22px; height: 22px; }

#ui-root.has-math .hud-hint, #ui-root.has-modal .hud-hint, #ui-root.has-tour .hud-hint { visibility: hidden; }
/* Going down is not possible while answering a gate, and on phones the button would cover the board. */
#ui-root.has-math .btn-down { visibility: hidden; }
.hud-hint {
  position: absolute;
  left: calc(var(--safe-l) + 12px);
  bottom: calc(var(--safe-b) + 12px);
  display: grid;
  gap: 5px;
  padding: 10px 44px 10px 12px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: rgba(29, 27, 51, 0.88);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.hint-title { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 15px; color: var(--sun); }
.hint-title .icon { width: 20px; height: 20px; }
.hint-row { display: flex; align-items: center; gap: 4px; }
.hint-row b { width: 46px; font-family: var(--font-display); font-weight: 400; color: #fff; }
.hint-row span { margin-left: 2px; color: #d6d3ea; }
.hint-close {
  position: absolute; top: 6px; right: 6px; display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 10px;
  background: transparent; color: #fff; cursor: pointer;
}
.hint-close:hover { background: rgba(255, 255, 255, 0.12); }
.hint-close .icon { width: 18px; height: 18px; }

/* ------------------------------------------------------------------ */
/* Power-ups (v3): the bag, the running effect, the Magic Wand rescue  */
/* ------------------------------------------------------------------ */

/* A hotbar at the bottom middle (phones: see the touch rules below, it keeps clear of the joystick and Jump). */
.power-dock {
  position: absolute; left: 0; right: 0; bottom: calc(var(--safe-b) + 12px); margin: 0 auto; width: max-content;
  display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none;
}
.power-bar {
  position: relative; z-index: 1; display: flex; gap: 8px; padding: 7px;
  border: 3px solid var(--ink); border-radius: 20px;
  background: rgba(29, 27, 51, 0.6); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.pw-slot {
  --pw: var(--paper-3);
  position: relative; display: grid; place-items: center; width: 58px; height: 58px; padding: 0;
  border: 3px solid var(--ink); border-radius: 15px; background: var(--paper); color: #fff;
  box-shadow: 0 4px 0 var(--ink); cursor: pointer; pointer-events: auto; touch-action: manipulation;
  -webkit-touch-callout: none; transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.pw-slot:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.pw-slot:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.pw-slot:focus-visible { outline: 4px solid var(--sun); outline-offset: 2px; }
.pw-ico {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px;
  background: var(--pw); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.2), inset 0 3px 0 rgba(255, 255, 255, 0.35);
}
.pw-ico .icon { width: 30px; height: 30px; filter: drop-shadow(0 2px 0 rgba(29, 27, 51, 0.6)); }
.pw-ico svg { stroke-width: 2.3; }
.pw-key {
  position: absolute; top: -9px; left: -9px; z-index: 1; display: grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 5px; border: 2px solid var(--ink); border-radius: 7px;
  background: var(--sun); color: var(--ink); font-family: var(--font-display); font-size: 13px; line-height: 1;
}
/* An empty slot: a dashed hole in the bar. */
.pw-slot.is-empty { background: rgba(255, 255, 255, 0.12); border: 3px dashed rgba(255, 255, 255, 0.5); box-shadow: none; cursor: default; }
.pw-slot.is-empty:hover, .pw-slot.is-empty:active { transform: none; box-shadow: none; }
.pw-slot.is-empty .pw-ico { background: transparent; box-shadow: none; }
.pw-slot.is-empty .pw-key { background: rgba(255, 255, 255, 0.55); border-color: rgba(29, 27, 51, 0.55); color: rgba(29, 27, 51, 0.75); }
.pw-slot.is-new { animation: slot-new 0.55s cubic-bezier(0.2, 1.6, 0.4, 1); }
.pw-slot.is-used { animation: pop 0.3s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes slot-new { 0% { transform: scale(0.4) rotate(-20deg); } 60% { transform: scale(1.18) rotate(6deg); } 100% { transform: scale(1); } }
/* The name: on hover (mouse) or a long press (touch). */
.pw-tip {
  position: absolute; bottom: calc(100% + 14px); left: 50%; z-index: 2; transform: translateX(-50%);
  display: grid; justify-items: center; padding: 4px 10px; border: 3px solid var(--ink); border-radius: 11px;
  background: var(--paper); color: var(--ink); box-shadow: 0 3px 0 var(--ink);
  font-family: var(--font-display); font-size: 15px; line-height: 1.15; white-space: nowrap;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.12s ease, visibility 0.12s;
}
.pw-tip small { font-family: var(--font-body); font-size: 12px; font-weight: 800; color: var(--ink-2); }
.pw-slot.is-peek .pw-tip { opacity: 1; visibility: visible; }
@media (hover: hover) { .pw-slot:hover .pw-tip { opacity: 1; visibility: visible; } }
/* Item colours (slots and the running-effect pill) */
[data-type="jetpack"] { --pw: #ff7a3d; }
[data-type="wand"] { --pw: #a66bff; }
[data-type="doubleJump"] { --pw: #3d8bff; }
[data-type="speed"] { --pw: #2fbf55; }
[data-type="bubble"] { --pw: #22c3dd; }
[data-type="superJump"] { --pw: #ff5fae; }
/* The wand while it can save you: it glows in its slot too. */
.pw-slot.is-ready { animation: wand-slot 0.9s ease-in-out infinite; }
@keyframes wand-slot { 50% { box-shadow: 0 4px 0 var(--ink), 0 0 0 5px rgba(198, 140, 255, 0.75), 0 0 18px 6px rgba(255, 220, 255, 0.8); } }

/* The running effect: its icon inside a shrinking timer ring, its name, what it does, seconds left. */
.power-active {
  display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px;
  border: 3px solid var(--ink); border-radius: 999px; background: var(--paper); box-shadow: 0 4px 0 var(--ink);
}
.pa-ring { position: relative; display: grid; place-items: center; width: 48px; height: 48px; flex: none; }
.pa-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.pa-track { fill: var(--pw, var(--sun)); stroke: #e3e0ee; stroke-width: 6; }
.pa-arc { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; }
.pa-icon { position: relative; display: grid; place-items: center; color: #fff; }
.pa-icon .icon { width: 24px; height: 24px; filter: drop-shadow(0 2px 0 rgba(29, 27, 51, 0.6)); }
.pa-text { display: grid; gap: 1px; min-width: 0; line-height: 1.05; }
.pa-name { font-family: var(--font-display); font-weight: 400; font-size: 19px; white-space: nowrap; }
.pa-hint { font-size: 12.5px; font-weight: 800; color: var(--ink-2); white-space: nowrap; }
.pa-hint:empty { display: none; }
.pa-secs { min-width: 2.2ch; font-family: var(--font-display); font-size: 24px; line-height: 1; text-align: right; }
.power-active.is-ending .pa-ring { animation: ring-hurry 0.5s ease-in-out infinite; }
@keyframes ring-hurry { 50% { transform: scale(1.14); } }

/* The Magic Wand rescue: big, glowing, impossible to miss while you fall. */
.wand-rescue {
  position: absolute; left: 0; right: 0; bottom: calc(var(--safe-b) + 128px); margin: 0 auto; width: max-content; max-width: calc(100vw - 24px);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 74px; padding: 0 20px 0 14px;
  border: var(--line) solid var(--ink); border-radius: 24px;
  background: linear-gradient(135deg, #8f55ff 0%, #c25cff 45%, #ff6fb5 100%); color: #fff;
  box-shadow: 0 6px 0 var(--ink);
  font-family: var(--font-display); font-size: 29px; line-height: 1; letter-spacing: 0.02em; text-shadow: var(--o-sm);
  cursor: pointer; pointer-events: auto; touch-action: manipulation;
  animation: wand-in 0.4s cubic-bezier(0.2, 1.6, 0.4, 1), wand-glow 1s ease-in-out 0.4s infinite;
}
.wand-rescue > .icon { width: 42px; height: 42px; filter: drop-shadow(0 2px 0 var(--ink)); animation: wiggle 0.8s ease-in-out infinite; }
.wand-rescue > .icon svg { stroke-width: 2.4; }
.wand-key { min-width: 36px; height: 36px; font-size: 19px; text-shadow: none; }
.is-touch .wand-key { display: none; }
.wand-rescue:active, .wand-rescue.is-used { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.wand-rescue:focus-visible { outline: 4px solid var(--sun); outline-offset: 3px; }
.wand-sparks { position: absolute; inset: 0; pointer-events: none; }
.wand-sparks i {
  position: absolute; width: 14px; height: 14px; border-radius: 2px; background: #fff;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: wand-spark 1.2s ease-in-out infinite;
}
.wand-sparks i:nth-child(1) { left: -10px; top: -10px; }
.wand-sparks i:nth-child(2) { right: -8px; top: -12px; width: 18px; height: 18px; animation-delay: 0.3s; background: #ffe98a; }
.wand-sparks i:nth-child(3) { right: 18%; bottom: -12px; animation-delay: 0.6s; }
.wand-sparks i:nth-child(4) { left: 22%; bottom: -10px; width: 11px; height: 11px; animation-delay: 0.9s; background: #ffe98a; }
@keyframes wand-in { from { opacity: 0; transform: translateY(30px) scale(0.6); } }
@keyframes wand-glow {
  0%, 100% { box-shadow: 0 6px 0 var(--ink), 0 0 0 0 rgba(194, 92, 255, 0.7), 0 0 22px 4px rgba(255, 214, 255, 0.55); }
  50% { box-shadow: 0 6px 0 var(--ink), 0 0 0 16px rgba(194, 92, 255, 0), 0 0 40px 14px rgba(255, 214, 255, 0.85); }
}
@keyframes wand-spark { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

/* Powers wait while a gate, a dialog, the Paper or the tour is up. */
#ui-root.has-math .power-dock, #ui-root.has-modal .power-dock, #ui-root.has-paper .power-dock, #ui-root.has-tour .power-dock,
#ui-root.has-math .wand-rescue, #ui-root.has-modal .wand-rescue, #ui-root.has-paper .wand-rescue, #ui-root.has-tour .wand-rescue { visibility: hidden; }
/* The station button steps up over the hotbar; the wand button over the running-effect pill too. */
#ui-root.has-power .station-prompt { bottom: calc(var(--safe-b) + 106px); }
#ui-root.has-power-active:not(.is-touch) .wand-rescue { bottom: calc(var(--safe-b) + 196px); }

/* Wide desktop windows: the wand button sits beside the hotbar, so it never covers the falling character in the
   middle of the screen. */
@media (min-width: 1100px) {
  #ui-root:not(.is-touch) .wand-rescue,
  #ui-root.has-power-active:not(.is-touch) .wand-rescue { left: calc(50% + 156px); right: auto; bottom: calc(var(--safe-b) + 12px); margin: 0; max-width: calc(50vw - 226px); }
}

/* Narrow desktop windows: the hotbar moves right, clear of the controls card. */
@media (max-width: 920px) {
  #ui-root:not(.is-touch) .power-dock { left: auto; right: calc(var(--safe-r) + 64px); margin: 0; align-items: flex-end; }
}

/* Touch screens held upright: the bag sits over the Jump button; the joystick keeps the bottom-left. */
#ui-root.is-touch .power-dock { left: auto; right: calc(var(--safe-r) + 12px); bottom: calc(var(--safe-b) + 148px); margin: 0; align-items: flex-end; gap: 8px; }
#ui-root.is-touch .power-bar { gap: 6px; padding: 5px; border-radius: 17px; }
#ui-root.is-touch .pw-slot { width: 50px; height: 50px; border-radius: 13px; }
#ui-root.is-touch .pw-ico { width: 37px; height: 37px; border-radius: 10px; }
#ui-root.is-touch .pw-ico .icon { width: 26px; height: 26px; }
#ui-root.is-touch .pw-key { min-width: 19px; height: 19px; font-size: 11px; top: -8px; left: -8px; }
#ui-root.is-touch .pw-tip { left: auto; right: -6px; transform: none; }
/* The running-effect pill stays left of the tower meter. */
#ui-root.is-touch .power-active { margin-right: 46px; padding: 3px 12px 3px 3px; gap: 6px; }
#ui-root.is-touch .pa-ring { width: 42px; height: 42px; }
#ui-root.is-touch .pa-name { font-size: 16px; }
#ui-root.is-touch .pa-hint { font-size: 11.5px; }
#ui-root.is-touch .pa-secs { font-size: 20px; }
#ui-root.is-touch .wand-rescue { bottom: calc(var(--safe-b) + min(44vh, 320px) + 18px); }
#ui-root.is-touch.has-power .station-prompt { bottom: calc(var(--safe-b) + 214px); }
@media (orientation: portrait) {
  /* Short phones: the tower meter moves up out of the bag's way. */
  #ui-root.is-touch.has-power .hud-meter { height: min(30vh, 260px); transform: translateY(-56%); }
  #ui-root.is-touch.has-power.has-power-active .station-prompt { bottom: calc(var(--safe-b) + 282px); }
}
/* Touch screens held sideways: the bag sits in the gap between the joystick and the Jump / Slide buttons. */
@media (orientation: landscape) {
  #ui-root.is-touch .power-dock {
    right: auto; left: calc((min(46vw, 320px) + 100vw - 214px) / 2); bottom: calc(var(--safe-b) + 8px);
    transform: translateX(-50%); align-items: center;
  }
  #ui-root.is-touch .power-active { margin-right: 0; }
  #ui-root.is-touch .pw-tip { left: 50%; right: auto; transform: translateX(-50%); }
  #ui-root.is-touch.has-power .station-prompt { bottom: calc(var(--safe-b) + 196px); }
}
/* Small phones sideways: two rows of two so the bag fits that gap. */
@media (orientation: landscape) and (max-width: 759px) {
  #ui-root.is-touch .power-bar { display: grid; grid-template-columns: repeat(2, auto); gap: 6px 8px; }
  #ui-root.is-touch .pw-slot { width: 44px; height: 44px; }
  #ui-root.is-touch .pw-ico { width: 32px; height: 32px; }
  #ui-root.is-touch .pw-ico .icon { width: 23px; height: 23px; }
  #ui-root.is-touch .pa-hint { display: none; }
}
@media (max-width: 640px) {
  .wand-rescue { min-height: 66px; font-size: 25px; padding: 0 18px 0 12px; border-radius: 22px; }
  .wand-rescue > .icon { width: 36px; height: 36px; }
}
@media (max-height: 540px) {
  .wand-rescue { min-height: 60px; font-size: 24px; }
  .wand-rescue > .icon { width: 34px; height: 34px; }
}

/* ------------------------------------------------------------------ */
/* Station prompt                                                      */
/* ------------------------------------------------------------------ */

.station-prompt {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-b) + 28px);
  z-index: 15;
  transform: translateX(-50%);
  pointer-events: auto;
}
.is-touch .station-prompt { bottom: calc(var(--safe-b) + 196px); }
.station-prompt.is-open { animation: prompt-in 0.32s cubic-bezier(0.2, 1.5, 0.4, 1); }
.station-prompt.is-leaving { animation: fade-out 0.16s ease forwards; }
@keyframes prompt-in { from { opacity: 0; transform: translate(-50%, 30px) scale(0.85); } }
.btn-station { min-height: 66px; font-size: 24px; background: var(--sun); animation: station-bob 1.6s ease-in-out infinite; }
.btn-station .icon { width: 32px; height: 32px; }
.btn-station-training { background: var(--blue); color: #fff; text-shadow: var(--o-sm); }
.btn-station-wardrobe { background: var(--pink); color: #fff; text-shadow: var(--o-sm); }
.btn-station-towers { background: var(--mint); }
.station-key { min-width: 34px; height: 34px; font-size: 18px; text-shadow: none; }
.is-touch .station-key { display: none; }
@keyframes station-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }

/* ------------------------------------------------------------------ */
/* Number pad + answer display (math panel and training)               */
/* ------------------------------------------------------------------ */

.answer-display {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 72px;
  min-width: 0;
  padding: 0 18px;
  border: var(--line) solid var(--ink);
  border-radius: 18px;
  background: var(--paper-2);
  box-shadow: inset 0 5px 0 rgba(29, 27, 51, 0.08);
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1;
  overflow: hidden;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.answer-prefix { order: -2; color: var(--ink-2); font-size: 0.75em; }
.answer-prefix:empty { display: none; }
.answer-text { white-space: nowrap; }
.answer-display.is-empty .answer-text { color: #b4b0cc; }
.answer-display.is-empty .caret { order: -1; }
.caret { flex: none; width: 4px; height: 0.95em; border-radius: 2px; background: var(--blue); animation: blink 1s steps(1) infinite; }
.answer-display.is-good { border-color: var(--grass-d); background: #e2fbe8; }
.answer-display.is-bad { border-color: var(--coral-d); background: #ffecec; }
.answer-display.is-good .caret, .answer-display.is-bad .caret { display: none; }

.numpad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 56px; gap: 8px; }
.key {
  display: grid;
  place-items: center;
  padding: 0;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 4px 0 var(--ink);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  transition: transform 0.06s ease, box-shadow 0.06s ease, background-color 0.1s ease;
}
.key:hover { background: #f7f9ff; }
.key:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); background: var(--paper-2); }
.key.is-pressed { animation: key-press 0.16s ease; }
@keyframes key-press { 40% { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); background: var(--sun); } }
.key-fn { background: var(--paper-3); }
.key-fn:hover { background: #cdd9f6; }
.key-fn .icon { width: 30px; height: 30px; }
.key-minus { font-size: 34px; }
.key-ok {
  grid-row: span 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: var(--grass); color: #fff; font-size: 22px; text-shadow: var(--o-sm);
}
.key-ok:hover { background: #4bdc6e; }
.key-ok .icon { width: 34px; height: 34px; }
.key-ok svg { stroke-width: 3.2; filter: drop-shadow(0 2px 0 var(--ink)); }
.key-zero { grid-column: span 3; }

/* ------------------------------------------------------------------ */
/* Math panel (docked at the bottom so the 3D board stays visible)     */
/* ------------------------------------------------------------------ */

.math-panel {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-b) + 14px);
  z-index: 20;
  width: min(800px, calc(100vw - 24px));
  transform: translateX(-50%);
  pointer-events: auto;
}
.math-panel.is-open { animation: math-up 0.3s cubic-bezier(0.2, 1.3, 0.4, 1); }
.math-panel.is-leaving { animation: math-down 0.22s ease forwards; pointer-events: none; }
.math-panel.is-closing { pointer-events: none; }
@keyframes math-up { from { transform: translate(-50%, 120%); } }
@keyframes math-down { to { transform: translate(-50%, 130%); } }

.math-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: center;
  gap: 20px;
  padding: 16px 18px;
  border: var(--line) solid var(--ink);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: 0 8px 0 var(--ink);
}
.math-main { min-width: 0; }
.math-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.math-kicker {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 6px;
  border: 3px solid var(--ink); border-radius: 999px; background: var(--mint);
  font-family: var(--font-display); font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase;
}
.math-kicker .icon { width: 18px; height: 18px; }
.math-q-row { display: grid; gap: 10px; margin: 10px 0 8px; }
.math-problem { font-family: var(--font-display); font-size: clamp(36px, 6vw, 58px); line-height: 1.05; overflow-wrap: anywhere; }
.math-eq { color: var(--ink-3); }
.math-help { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.math-panel.is-submitting .numpad, .math-panel.is-submitting .btn-skip { opacity: 0.6; pointer-events: none; }
.math-x { position: absolute; top: -20px; right: -12px; width: 44px; height: 44px; }

/* Coin skip */
.btn-skip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; max-width: 100%; padding: 0 12px 0 8px;
  border: 3px solid var(--ink); border-radius: 13px; background: var(--sun); color: var(--ink);
  box-shadow: 0 4px 0 var(--ink); font-family: var(--font-display); font-size: 16px; line-height: 1.05; text-align: left;
  cursor: pointer; touch-action: manipulation;
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease;
}
.btn-skip .icon { width: 22px; height: 22px; }
.btn-skip b { font-weight: 400; }
.btn-skip .skip-icon { width: 20px; height: 20px; margin-left: 2px; }
.btn-skip.is-ready:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 5px 0 var(--ink); }
.btn-skip.is-ready:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn-skip:focus-visible { outline: 4px solid var(--blue); outline-offset: 3px; }
.btn-skip.is-wait, .btn-skip.is-poor {
  background: #ebe9f3; color: #615c80; border-color: #8c87a8; box-shadow: 0 3px 0 #8c87a8; font-size: 14px; cursor: not-allowed;
}
.btn-skip.is-wait .icon { width: 18px; height: 18px; }
.btn-skip.is-poor .coin-icon svg { fill: #f3e6a8; }
.skip-short { display: none; }

/* Toasts dodge the board while a gate is open: they sit just above the panel instead. v5: align-content keeps a
   toast its own height when a floor banner rule pins the box at the top as well (it stretched into a big card). */
#ui-root.has-math .toasts { top: auto; bottom: calc(var(--math-h, 300px) + 14px); align-content: end; }

.math-result {
  position: absolute;
  inset: -4px;
  z-index: 3;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 12px;
  border: var(--line) solid var(--ink);
  border-radius: var(--r-lg);
  color: #fff;
  text-align: center;
  animation: pop 0.34s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.math-result.good { background: var(--grass); }
.math-result.bad { background: var(--coral); }
.math-result.skip { background: var(--blue); }
.result-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.math-result small.result-coins { display: inline-flex; align-items: center; gap: 4px; background: var(--sun); }
.result-coins .icon { width: 24px; height: 24px; }
.math-result b { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 6vw, 46px); line-height: 1.05; text-shadow: var(--o-md); }
.math-result small {
  padding: 2px 12px; border: 3px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink);
  font-family: var(--font-display); font-size: 20px;
}
.result-badge {
  display: grid; place-items: center; width: 64px; height: 64px;
  border: var(--line) solid var(--ink); border-radius: 50%; background: #fff; color: var(--ink);
  box-shadow: 0 4px 0 var(--ink);
}
.result-badge .icon { width: 40px; height: 40px; }
.result-badge svg { stroke-width: 3.2; }

/* "Paper" button (math panel and Training desk) */
.btn-paper {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px 0 8px;
  border: 3px solid var(--ink); border-radius: 13px; background: var(--paper); color: var(--ink);
  box-shadow: 0 4px 0 var(--ink); font-family: var(--font-display); font-size: 16px; line-height: 1;
  cursor: pointer; touch-action: manipulation; transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn-paper .icon { width: 24px; height: 24px; color: var(--blue-d); }
.btn-paper:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--ink); background: #f7f9ff; }
.btn-paper:active, .btn-paper.is-on { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); background: var(--sun); }
.btn-paper:focus-visible { outline: 4px solid var(--blue); outline-offset: 3px; }
.math-kicker { margin-right: auto; white-space: nowrap; }
.math-prob-line { display: flex; align-items: center; gap: 12px; min-width: 0; }
.math-prob-line .math-problem { flex: 1; min-width: 0; }
.math-prob-line .btn-paper { flex: none; }
.btn-paper.paper-top { display: none; }
.math-panel.is-submitting .btn-paper { opacity: 0.6; pointer-events: none; }
.train-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.train-tools .btn-paper { min-height: 42px; }

/* ------------------------------------------------------------------ */
/* Paper (v3): a squared page, a black pen and an eraser               */
/* ------------------------------------------------------------------ */

.paper-layer {
  position: fixed; inset: 0; z-index: 38; display: grid; place-items: center;
  padding: calc(var(--safe-t) + 16px) 16px calc(var(--safe-b) + 16px);
  pointer-events: auto;
}
/* Desktop math gate: under the docked math panel (z 20) so the answer can still be typed there. */
.paper-layer.is-docked { z-index: 19; display: block; padding: 0; }
.paper-scrim { position: absolute; inset: 0; background: var(--scrim); }
.paper-layer.is-docked .paper-scrim { background: rgba(21, 17, 58, 0.34); }
.paper-layer.is-open .paper-scrim { animation: fade-in 0.2s ease; }
.paper-layer.is-leaving { pointer-events: none; }
.paper-layer.is-leaving .paper-scrim { animation: fade-out 0.2s ease forwards; }

.paper-card {
  position: relative; display: flex; flex-direction: column;
  width: min(1040px, 100%); height: min(88vh, 780px);
  border: var(--line) solid var(--ink); border-radius: 26px; background: var(--paper-2);
  box-shadow: 0 10px 0 var(--ink); overflow: hidden;
  animation: paper-in 0.32s cubic-bezier(0.2, 1.3, 0.4, 1);
}
.paper-layer.is-leaving .paper-card { animation: paper-out 0.2s ease forwards; }
@keyframes paper-in { from { opacity: 0; transform: translateY(-36px) rotate(-1.2deg) scale(0.96); } }
@keyframes paper-out { to { opacity: 0; transform: translateY(-24px) scale(0.97); } }
.is-docked .paper-card {
  position: absolute; left: 0; right: 0; margin: 0 auto;
  top: calc(var(--safe-t) + 12px); bottom: calc(var(--math-h, 300px) + 14px);
  width: min(800px, calc(100vw - 24px)); height: auto; min-height: 220px;
}

/* Tool bar: the yellow top of a writing pad */
.paper-bar {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: var(--line) solid var(--ink); background: var(--sun);
}
.paper-title { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; min-width: 0; }
.paper-badge {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px;
  border: 3px solid var(--ink); border-radius: 13px; background: var(--paper); box-shadow: 0 3px 0 var(--ink);
}
.paper-badge .icon { width: 28px; height: 28px; color: var(--blue-d); }
.paper-word { font-family: var(--font-display); font-size: 28px; line-height: 1; color: #fff; text-shadow: var(--o-md); }
.paper-tools { display: flex; align-items: center; gap: 8px; }
.paper-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 46px; padding: 0 13px 0 10px;
  border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); color: var(--ink);
  box-shadow: 0 4px 0 var(--ink); font-family: var(--font-display); font-size: 17px; line-height: 1; white-space: nowrap;
  cursor: pointer; touch-action: manipulation; transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.12s ease;
}
.paper-btn .icon { width: 24px; height: 24px; }
.paper-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--ink); }
.paper-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.paper-btn:focus-visible { outline: 4px solid var(--blue); outline-offset: 2px; }
/* The tool in your hand looks pressed in. */
.paper-tool.is-on { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink), inset 0 3px 0 rgba(0, 0, 0, 0.18); background: var(--blue); color: #fff; text-shadow: var(--o-sm); }
.paper-tool.is-on .icon { filter: drop-shadow(0 2px 0 var(--ink)); }
.paper-clear .icon { color: var(--coral-d); }
.pb-short { display: none; }
.paper-done { background: var(--grass); color: #fff; text-shadow: var(--o-sm); padding: 0 16px 0 12px; }
.paper-done .icon { filter: drop-shadow(0 2px 0 var(--ink)); }
.paper-done svg { stroke-width: 3; }

.paper-main {
  flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px;
}
.has-answer .paper-main { grid-template-columns: minmax(0, 1fr) 300px; }

/* The page: white with faint squares; the canvas over it is transparent, so the eraser leaves the squares. */
.paper-sheet {
  position: relative; min-width: 0; min-height: 0; overflow: hidden;
  border: 3px solid var(--ink); border-radius: 16px;
  background-color: #fff;
  background-image:
    linear-gradient(rgba(61, 139, 255, 0.17) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61, 139, 255, 0.17) 1px, transparent 1px);
  background-size: 26px 26px;
  background-position: -1px -1px;
  box-shadow: 0 4px 0 rgba(29, 27, 51, 0.25);
}
.paper-sheet.is-wiped { animation: paper-wipe 0.35s ease; }
@keyframes paper-wipe { 0% { filter: brightness(1); } 40% { filter: brightness(1.08); transform: translateX(-4px); } 70% { transform: translateX(3px); } 100% { transform: none; } }
.paper-problem {
  position: absolute; left: 0; top: 0; right: 0; z-index: 1;
  padding: 12px 18px 8px; font-family: var(--font-display); font-size: clamp(32px, 4.6vw, 48px); line-height: 1.05;
  color: var(--ink); overflow-wrap: anywhere; pointer-events: none;
}
.pp-eq { color: var(--ink-3); }
.paper-tip {
  position: absolute; left: 50%; top: 56%; z-index: 1; margin: 0; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px;
  border: 3px dashed rgba(29, 27, 51, 0.25); border-radius: 999px;
  color: var(--ink-3); font-weight: 800; font-size: 17px; white-space: nowrap; pointer-events: none;
  transition: opacity 0.2s ease;
}
.paper-tip .icon { width: 22px; height: 22px; }
.paper-tip.is-gone { opacity: 0; }
.paper-canvas {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; display: block;
  touch-action: none; -ms-touch-action: none; cursor: crosshair;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.tool-eraser .paper-canvas { cursor: none; }
/* The eraser's size, as a ring that follows the pointer */
.paper-ring {
  position: absolute; left: -12px; top: -12px; z-index: 3; width: 24px; height: 24px;
  border: 2px solid var(--ink); border-radius: 50%; background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 0 1.5px #fff, inset 0 0 0 1.5px #fff; pointer-events: none; display: none;
}
.paper-ring.is-on { display: block; }

/* The answer box + keys (when the page covers where you normally type) */
.paper-answer {
  position: relative; display: grid; align-content: start; gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 56px;
  grid-template-areas: "disp disp disp disp" "k1 k2 k3 kb" "k4 k5 k6 km" "k7 k8 k9 ok" "k0 k0 k0 ok";
}
.paper-answer .answer-display { grid-area: disp; height: auto; }
.paper-feedback {
  grid-area: disp; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 6px;
  border: var(--line) solid var(--ink); border-radius: 18px; color: #fff; text-shadow: var(--o-sm);
  font-family: var(--font-display); font-size: 26px; line-height: 1; animation: pop 0.3s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.paper-feedback b { font-weight: 400; }
.paper-feedback .icon { width: 28px; height: 28px; filter: drop-shadow(0 2px 0 var(--ink)); }
.paper-feedback svg { stroke-width: 3; }
.paper-feedback.good { background: var(--grass); }
.paper-feedback.bad { background: var(--coral); }
.paper-answer [data-key="1"] { grid-area: k1; }
.paper-answer [data-key="2"] { grid-area: k2; }
.paper-answer [data-key="3"] { grid-area: k3; }
.paper-answer [data-key="4"] { grid-area: k4; }
.paper-answer [data-key="5"] { grid-area: k5; }
.paper-answer [data-key="6"] { grid-area: k6; }
.paper-answer [data-key="7"] { grid-area: k7; }
.paper-answer [data-key="8"] { grid-area: k8; }
.paper-answer [data-key="9"] { grid-area: k9; }
.paper-answer [data-key="0"] { grid-area: k0; }
.paper-answer [data-key="minus"] { grid-area: km; }
.paper-answer [data-key="back"] { grid-area: kb; }
.paper-answer [data-key="ok"] { grid-area: ok; }

/* Phones: the page fills the screen */
@media (max-width: 640px), (max-height: 540px) {
  .paper-layer { padding: 0; }
  .paper-card { width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
  .paper-bar { padding: calc(var(--safe-t) + 8px) calc(var(--safe-r) + 10px) 8px calc(var(--safe-l) + 10px); }
  .paper-main { padding: 10px calc(var(--safe-r) + 10px) calc(var(--safe-b) + 10px) calc(var(--safe-l) + 10px); gap: 10px; }
  .paper-badge { width: 40px; height: 40px; }
  .paper-badge .icon { width: 25px; height: 25px; }
  .paper-word { font-size: 24px; }
  .paper-btn { min-height: 44px; padding: 0 11px 0 8px; font-size: 16px; }
  .paper-btn .icon { width: 22px; height: 22px; }
  .paper-tip { font-size: 15px; }
}
/* Upright phones: two rows (title + Done, then the tools), and the answer is a strip under the page. */
@media (max-width: 640px) and (min-height: 541px) {
  .paper-bar { flex-wrap: wrap; row-gap: 8px; }
  .paper-tools { order: 3; flex: 1 1 100%; }
  .paper-tools .paper-btn { flex: 1 1 0; min-width: 0; }
  .pb-long { display: none; }
  .pb-short { display: inline; }
  .paper-problem { font-size: clamp(28px, 9vw, 40px); padding: 10px 14px 6px; }
  .has-answer .paper-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .paper-answer {
    gap: 6px; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: 54px; grid-auto-rows: 46px;
    grid-template-areas: "disp disp disp disp ok ok" "k1 k2 k3 k4 k5 km" "k6 k7 k8 k9 k0 kb";
  }
  .paper-answer .answer-display { height: auto; font-size: 32px; border-radius: 14px; padding: 0 12px; }
  .paper-answer .key { font-size: 24px; border-radius: 12px; }
  .paper-answer .key-ok { flex-direction: row; gap: 6px; font-size: 20px; }
  .paper-answer .key-ok .icon { width: 26px; height: 26px; }
  .paper-answer .key-fn .icon { width: 26px; height: 26px; }
  .paper-feedback { font-size: 22px; border-radius: 14px; }
}
@media (max-width: 380px) and (min-height: 541px) {
  .paper-tools .paper-btn { padding: 0 6px; gap: 4px; font-size: 15px; }
}
/* Phones held sideways: page on the left, a slim answer column on the right. */
@media (max-height: 540px) {
  .paper-bar { padding-top: calc(var(--safe-t) + 6px); padding-bottom: 6px; }
  .paper-badge { width: 36px; height: 36px; border-radius: 11px; }
  .paper-btn { min-height: 40px; }
  .paper-problem { font-size: 30px; padding: 8px 14px 4px; }
  .has-answer .paper-main { grid-template-columns: minmax(0, 1fr) 236px; }
  .paper-answer { gap: 6px; grid-auto-rows: 42px; }
  .paper-answer .answer-display { height: auto; font-size: 28px; border-radius: 14px; padding: 0 12px; }
  .paper-answer .key { font-size: 21px; border-radius: 12px; }
  .paper-answer .key-ok { font-size: 16px; }
  .paper-answer .key-ok .icon { width: 26px; height: 26px; }
  .paper-answer .key-fn .icon { width: 24px; height: 24px; }
  .paper-feedback { font-size: 21px; border-radius: 14px; }
}
@media (max-height: 540px) and (max-width: 700px) {
  .paper-word { display: none; }
}

/* On upright phones the gate panel's top row keeps the Paper and Skip buttons; the kicker shrinks to its icon. */
@media (max-width: 640px) and (min-height: 541px) {
  .btn-paper.paper-top { display: inline-flex; }
  .btn-paper.paper-inline { display: none; }
}
/* Small landscape phones: the short skip label keeps the top row on one line. */
@media (max-height: 540px) and (max-width: 760px) {
  .skip-long { display: none; }
  .skip-short { display: inline; }
}
@media (max-width: 640px) {
  .math-panel.has-skip .math-kicker > span:not(.icon) { display: none; }
  .math-panel.has-skip .math-kicker { padding: 2px 6px; }
  .btn-paper { min-height: 38px; font-size: 15px; padding: 0 10px 0 6px; }
}

/* ------------------------------------------------------------------ */
/* Modals                                                              */
/* ------------------------------------------------------------------ */

.modal-layer {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: calc(var(--safe-t) + 16px) 16px calc(var(--safe-b) + 16px);
  pointer-events: auto;
}
.modal-scrim { position: absolute; inset: 0; background: var(--scrim); }
.modal-layer.is-open .modal-scrim { animation: fade-in 0.2s ease; }
.modal-layer.is-leaving .modal-scrim { animation: fade-out 0.2s ease forwards; }

.modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(720px, 100%);
  max-height: min(88vh, 860px);
  border: var(--line) solid var(--ink);
  border-radius: 28px;
  background: var(--paper);
  box-shadow: 0 10px 0 var(--ink);
  overflow: hidden;
  outline: none;
  animation: modal-in 0.32s cubic-bezier(0.2, 1.35, 0.4, 1);
}
.modal.no-anim { animation: none; }
.modal-layer.is-leaving .modal { animation: modal-out 0.2s ease forwards; }
@keyframes modal-in { from { opacity: 0; transform: translateY(40px) scale(0.92); } }
@keyframes modal-out { to { opacity: 0; transform: translateY(30px) scale(0.95); } }

.modal-shop { width: min(920px, 100%); --head: var(--sun); }
.modal-training { width: min(860px, 100%); --head: var(--blue); }
.modal-wardrobe { width: min(880px, 100%); --head: var(--pink); }
.modal-designer { width: min(900px, 100%); height: min(88vh, 760px); --head: var(--mint); }
.modal-pause { width: min(480px, 100%); --head: var(--sky); }

.modal-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 14px;
  border-bottom: var(--line) solid var(--ink);
  background: var(--head, var(--sun));
}
.modal-icon {
  flex: none; display: grid; place-items: center; width: 52px; height: 52px;
  border: 3px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 0 3px 0 var(--ink);
}
.modal-icon .icon { width: 32px; height: 32px; }
.modal-titles { flex: 1; min-width: 0; }
.modal-titles h2 {
  margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 1.05;
  color: #fff; text-shadow: var(--o-md); overflow-wrap: anywhere;
}
.modal-titles p { margin: 6px 0 0; font-size: 14px; font-weight: 800; line-height: 1.2; color: var(--ink); }
.modal-x { flex: none; align-self: flex-start; }

.modal-body {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
}
.modal-foot {
  flex: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: var(--line) solid var(--ink);
  background: var(--paper-2);
}

/* ---------------- Shop ---------------- */
/* Coin Power on the left, "What coins do" beside it (stacks on phones). */
.modal-body.shop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  grid-template-areas: "top top" "title uses" "ladder uses" "next uses";
  grid-template-rows: auto auto auto 1fr;
  column-gap: 18px;
  align-items: start;
}
.shop .shop-top { grid-area: top; }
.shop .sec-power { grid-area: title; }
.shop .ladder { grid-area: ladder; }
.shop .shop-next { grid-area: next; }
.shop .coin-uses { grid-area: uses; }
.shop-sec-title {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 4px 0 0;
  font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.1;
}
.shop-sec-title .icon { width: 24px; height: 24px; color: var(--sun-d); }
.shop-sec-title span { font-family: var(--font-body); font-weight: 700; font-size: 14px; color: var(--ink-2); }

.coin-uses {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px;
  border: 3px solid var(--ink); border-radius: 20px; background: var(--paper);
  box-shadow: 0 5px 0 var(--ink);
}
.uses-title { display: flex; align-items: center; gap: 6px; margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.1; }
.uses-title .icon { width: 26px; height: 26px; }
.use {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 8px; border: 3px solid var(--ink); border-radius: 14px; background: var(--paper-2);
}
.use-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 3px solid var(--ink); border-radius: 12px; background: var(--sun); }
.use-icon .icon { width: 22px; height: 22px; }
.use-skip .use-icon { background: var(--mint); }
.use-text b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 17px; line-height: 1.1; }
.use-text span { display: block; margin-top: 2px; font-weight: 600; font-size: 13px; line-height: 1.25; color: var(--ink-2); }
.use-text em { font-style: normal; font-weight: 800; color: var(--ink); }
.use-price {
  display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px 3px 5px;
  border: 3px solid var(--ink); border-radius: 12px; background: var(--sun); box-shadow: 0 3px 0 var(--ink);
  font-family: var(--font-display); font-size: 20px; line-height: 1;
}
.use-price b { font-weight: 400; }
.use-price .icon { width: 22px; height: 22px; }
.use-rules { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.rule-box {
  display: grid; align-content: start; justify-items: center; gap: 6px; padding: 8px 6px;
  border: 2px dashed var(--ink-3); border-radius: 14px; text-align: center;
  font-weight: 700; font-size: 12.5px; line-height: 1.2; color: var(--ink-2);
}
.rule-box b { font-family: var(--font-display); font-weight: 400; font-size: 15px; color: var(--ink); }
.rule-you { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 3px; max-width: 100%; margin-top: -2px; padding: 1px 7px 1px 4px; border: 2px solid var(--ink); border-radius: 9px; background: var(--sun); color: var(--ink); }
.rule-you b { white-space: nowrap; }
.rule-you .icon { width: 16px; height: 16px; }
.pips { display: flex; gap: 4px; height: 40px; align-items: center; }
.pip { display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--ink); border-radius: 8px; background: var(--grass); color: #fff; }
.pip .icon { width: 16px; height: 16px; }
.pip svg { stroke-width: 3; }
.pip-skip { background: var(--mint); color: var(--ink); }
.pip-skip svg { stroke-width: 2.2; }
.cost-bars { display: flex; align-items: flex-end; gap: 2px; width: 100%; height: 40px; padding: 0 4px; }
.cost-bars i { flex: 1; height: var(--h); min-height: 4px; border: 1.5px solid var(--ink); border-radius: 3px 3px 1px 1px; background: var(--paper-3); }
.cost-bars i.is-easier { background: #c9f0d3; }
.cost-bars i.is-you { background: var(--sun); box-shadow: 0 0 0 2px var(--sun-d); }
.skip-status {
  display: flex; align-items: center; gap: 6px; margin: 0; padding: 6px 10px;
  border-radius: 12px; font-weight: 800; font-size: 14px; line-height: 1.2;
}
.skip-status .icon { flex: none; width: 20px; height: 20px; }
.skip-status b { font-family: var(--font-display); font-weight: 400; font-size: 17px; }
.skip-status.is-ready { background: #e2fbe8; color: var(--grass-d); }
.skip-status.is-wait { background: var(--paper-2); color: var(--ink-2); }
.skip-status.is-poor { background: #fff5d6; color: #8a5a00; }

.shop-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.balance { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 34px; line-height: 1; }
.balance .icon { width: 40px; height: 40px; }
.balance span { font-size: 18px; color: var(--ink-2); }
.now-power {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px;
  border: 3px solid var(--ink); border-radius: 14px; background: var(--paper-2);
  font-weight: 800; font-size: 15px;
}
.now-power b { font-family: var(--font-display); font-weight: 400; font-size: 20px; }
.now-power .icon { width: 22px; height: 22px; color: var(--sun-d); }

.ladder {
  list-style: none;
  margin: 0;
  padding: 8px 2px 0;
  display: grid;
  /* 15 steps in two rows of 8 + 7: wide enough for "+50,000" */
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: end;
  gap: 6px;
}
.pw-step { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; min-width: 0; height: 176px; }
.step-tag {
  align-self: center; margin-bottom: 5px; padding: 1px 6px;
  border: 2px solid var(--ink); border-radius: 7px; background: var(--ink); color: #fff;
  font-family: var(--font-display); font-size: 12px; letter-spacing: 0.05em;
}
.is-next .step-tag { background: #fff; color: var(--ink); }
.step-bar {
  display: grid; justify-items: center; align-content: start; padding-top: 4px;
  height: calc(var(--h) * 1.2px);
  border: 3px solid var(--ink); border-radius: 10px 10px 5px 5px;
  background: var(--paper-2);
}
.step-check { width: 20px; height: 20px; color: #fff; }
.step-check svg { stroke-width: 3.2; }
.step-val { margin-top: 5px; text-align: center; font-family: var(--font-display); font-size: 15px; line-height: 1.1; white-space: nowrap; }
.step-val.is-long { font-size: 13px; letter-spacing: -0.02em; }
.is-owned .step-bar { background: var(--grass); }
.is-owned .step-val { color: var(--ink-2); }
.is-now .step-bar { background: repeating-linear-gradient(-45deg, var(--sun) 0 8px, #ffc21a 8px 16px); box-shadow: 0 4px 0 var(--ink); }
.is-now .step-val { font-size: 17px; }
.is-next .step-bar { background: repeating-linear-gradient(-45deg, #fff 0 6px, var(--paper-3) 6px 12px); border-style: dashed; }
.is-new .step-bar { animation: pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1); transform-origin: bottom; }

.shop-next {
  display: grid; justify-items: center; gap: 12px; margin-top: 14px; padding: 14px;
  border: 3px solid var(--ink); border-radius: 20px; background: var(--paper-2);
}
.shop-deal { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.deal-num { font-family: var(--font-display); font-size: 40px; line-height: 1; }
.deal-from { color: var(--ink-2); }
.deal-to { padding: 4px 12px; border: 3px solid var(--ink); border-radius: 14px; background: var(--sun); box-shadow: 0 4px 0 var(--ink); }
.deal-arrow { width: 32px; height: 32px; }
.deal-label { font-weight: 800; font-size: 14px; line-height: 1.1; text-align: left; color: var(--ink-2); }
.shop-cost { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 18px; }
.shop-cost b { font-family: var(--font-display); font-weight: 400; font-size: 26px; }
.shop-cost .icon { width: 26px; height: 26px; }
.btn-buy { max-width: 420px; }
.btn-buy .coin-icon { width: 28px; height: 28px; }
.shop-max { display: flex; align-items: center; gap: 12px; }
.shop-max > .icon { width: 52px; height: 52px; color: var(--sun-d); }
.shop-max b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 26px; }
.shop-max span { font-weight: 700; }

/* ---------------- Training ---------------- */
.ladder-scroll { margin: -4px -16px 12px; padding: 6px 16px 10px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.ladder-scroll::-webkit-scrollbar { display: none; }
.rank-ladder { list-style: none; display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; min-width: max-content; }
.rung {
  --rank: #9c8f7a;
  display: flex; align-items: center; gap: 4px; padding: 4px 10px 3px 6px;
  border: 3px solid var(--ink); border-radius: 12px; background: var(--paper-2);
  font-family: var(--font-display); font-size: 14px; letter-spacing: 0.04em; line-height: 1.2; white-space: nowrap;
}
.rung-icon { width: 16px; height: 16px; }
.rung.is-passed { background: var(--rank); color: #fff; text-shadow: var(--o-sm); }
.rung.is-current { margin: 0 6px; background: var(--rank); color: #fff; text-shadow: var(--o-sm); box-shadow: 0 4px 0 var(--ink); transform: scale(1.14); }
.rung.is-locked { color: var(--ink-3); border-color: #a9a5c4; }
.rung.is-cosmic.is-current, .rung.is-cosmic.is-passed { background: var(--rainbow); background-size: 200% 100%; animation: rainbow-move 3s linear infinite; }

.train-bar { margin-bottom: 14px; }
.train-bar-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 700; font-size: 15px; }
.train-count b { font-family: var(--font-display); font-weight: 400; font-size: 19px; }
.barcode {
  --rank: var(--grass);
  display: flex; gap: 3px; height: 40px; padding: 4px;
  border: var(--line) solid var(--ink); border-radius: 12px; background: var(--paper);
}
.barcode i { flex: 1 1 0; min-width: 2px; border-radius: 2px; background: #e4e9f7; }
.barcode i:nth-child(3n) { flex-grow: 1.7; }
.barcode i:nth-child(4n + 1) { flex-grow: 0.7; }
.barcode i.on { background: var(--rank); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.18), inset 0 0 0 2px var(--ink); }
.barcode i.just { animation: seg-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes seg-pop { 0% { transform: scaleY(0.2); } 60% { transform: scaleY(1.25); } 100% { transform: scaleY(1); } }
.barcode.is-max { display: grid; place-items: center; background: var(--rainbow); background-size: 200% 100%; animation: rainbow-move 3s linear infinite; }
/* The answer that ranks you up: the whole bar fills up segment by segment and shines. */
.barcode.is-full { position: relative; overflow: hidden; border-color: var(--ink); box-shadow: 0 0 0 4px var(--sun), 0 4px 0 6px var(--ink); }
.barcode.is-full i.on { animation: seg-fill 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both; animation-delay: calc(var(--i, 0) * 0.025s); }
.barcode.is-full::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  animation: bar-shine 0.9s 0.45s ease-in-out 2;
}
@keyframes seg-fill { 0% { transform: scaleY(0.15); filter: brightness(1.6); } 60% { transform: scaleY(1.2); } 100% { transform: scaleY(1); } }
@keyframes bar-shine { to { left: 120%; } }
.train-full {
  display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 2px 10px 1px 6px;
  border: 3px solid var(--ink); border-radius: 10px; background: var(--sun); box-shadow: 0 3px 0 var(--ink);
  font-family: var(--font-display); font-size: 16px; letter-spacing: 0.04em;
  animation: pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.train-full .icon { width: 18px; height: 18px; }
.barcode-max { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 22px; color: #fff; text-shadow: var(--o-sm); }

.train-play { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: center; gap: 20px; }
.train-left { display: grid; gap: 10px; min-width: 0; }
.train-problem {
  display: grid; place-items: center; min-height: 112px; padding: 14px;
  border: 7px solid var(--wood); border-radius: 18px; outline: 3px solid var(--ink); outline-offset: 0;
  background: var(--chalk); color: #fff;
  box-shadow: 0 6px 0 var(--ink), inset 0 0 30px rgba(0, 0, 0, 0.35);
  font-family: var(--font-display); font-size: clamp(40px, 7vw, 62px); line-height: 1.05; text-align: center; overflow-wrap: anywhere;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
}
.train-problem .math-eq { color: rgba(255, 255, 255, 0.55); }
.train-feedback { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; font-family: var(--font-display); font-size: 22px; text-align: center; }
.train-feedback .icon { width: 28px; height: 28px; }
.train-feedback.good { color: var(--grass-d); }
.train-feedback.bad { color: var(--coral-d); }
.train-feedback b { font-weight: 400; }
.train-streak {
  justify-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px 4px 8px;
  border: 3px solid var(--ink); border-radius: 999px; background: var(--paper-2);
  font-weight: 800; font-size: 16px;
}
.train-streak b { font-family: var(--font-display); font-weight: 400; font-size: 22px; }
.train-streak .icon { width: 22px; height: 22px; color: var(--orange); }
.train-streak.is-hot { background: var(--orange); color: #fff; text-shadow: var(--o-sm); }
.train-streak.is-hot .icon { color: #fff; }

/* ---------------- Wardrobe ---------------- */
.char-group { margin-bottom: 20px; }
.group-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 10px; font-weight: 800; font-size: 15px; }
.group-note { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); }
.group-note .icon { width: 18px; height: 18px; }
.char-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 760px) {
  .modal-body.wardrobe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-content: start; }
  .modal-body.wardrobe .group-fav { grid-column: 1 / -1; }
}

.char-card {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 8px 8px 10px;
  border: var(--line) solid var(--ink);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 5px 0 var(--ink);
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.15s ease;
}
.char-card:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink); }
.char-card:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.char-thumb {
  position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1;
  border: 3px solid var(--ink); border-radius: 14px; overflow: hidden;
  background: radial-gradient(circle at 50% 38%, #ffffff 0%, var(--paper-3) 75%);
}
.char-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; animation: fade-in 0.25s ease; }
.thumb-ph { display: grid; place-items: center; width: 52%; height: 52%; color: #bdb8d8; animation: ph-pulse 1.2s ease-in-out infinite; }
.thumb-ph .icon { width: 100%; height: 100%; }
@keyframes ph-pulse { 50% { opacity: 0.45; } }
/* Long names ("Jade Guardian", "Storm Striker") get two lines instead of an ellipsis. */
.char-name {
  max-width: 100%; overflow: hidden; white-space: normal; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  font-family: var(--font-display); font-size: 17px; line-height: 1.05;
}
.char-status { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 800; line-height: 1.1; color: var(--ink-2); }
.char-status .icon { width: 16px; height: 16px; }
.char-status.pop { animation: pop 0.3s ease; color: var(--coral-d); }
.char-card.is-on { background: var(--sun); }
.char-card.is-on .char-status { color: var(--ink); }
.char-card.is-on::after {
  content: ""; position: absolute; inset: -9px; border: 3px dashed var(--ink); border-radius: 26px; pointer-events: none;
}
.char-card.is-locked { background: #e9e7f2; cursor: not-allowed; box-shadow: 0 5px 0 #8f8aa8; border-color: #6d6890; }
.char-card.is-locked:hover { transform: none; }
.char-card.is-locked .char-thumb { border-color: #6d6890; }
.char-card.is-locked .char-thumb img { filter: grayscale(1) brightness(0.55) contrast(0.9); }
.char-card.is-locked .char-name { color: #6d6890; }
/* LEGENDARY, ALPHA and COSMIC looks (white, gold, shiny) on a deep backdrop tinted with the rank's glow
   (ui.js sets --deep-1 / --deep-2 on unlocked cards and rank-up stickers). */
.char-card.is-deep .char-thumb, .new-card.is-deep .char-thumb {
  background: radial-gradient(circle at 50% 40%, var(--deep-1, #5546c9) 0%, var(--deep-2, #1d1650) 78%);
}
.char-card.is-deep .thumb-ph, .new-card.is-deep .thumb-ph { color: rgba(255, 255, 255, 0.45); }
.char-lock {
  position: absolute; left: 50%; top: 40%; display: grid; place-items: center; width: 50px; height: 50px;
  transform: translate(-50%, -50%);
  border: 3px solid #fff; border-radius: 50%; background: var(--ink); color: #fff;
}
.char-lock .icon { width: 26px; height: 26px; }
.char-new {
  position: absolute; top: -10px; right: -8px; z-index: 2; padding: 2px 8px 1px;
  border: 3px solid var(--ink); border-radius: 10px; background: var(--coral); color: #fff;
  font-family: var(--font-display); font-size: 14px; letter-spacing: 0.05em; text-shadow: var(--o-sm);
  animation: wiggle 1.2s ease-in-out infinite;
}

.group-fav .group-title .rank-tag { animation: rainbow-move 3s linear infinite; }
.fav-card {
  display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; gap: 16px; padding: 14px;
  border: var(--line) solid var(--ink); border-radius: 24px;
  background-color: var(--space); background-image: var(--stars); background-size: 240px 160px;
  box-shadow: 0 6px 0 var(--ink); color: #fff;
}
.fav-card .char-card { background: #2b2470; border-color: var(--ink); }
.fav-card .char-card.is-locked { background: #3a3560; }
.fav-card .char-thumb { background: radial-gradient(circle at 50% 38%, #5546c9 0%, #1d1650 75%); }
.fav-info { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.fav-name { max-width: 100%; font-family: var(--font-display); font-size: 32px; line-height: 1.05; text-shadow: var(--o-md); overflow-wrap: anywhere; }
.fav-movie { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #d9d4ff; }
.fav-movie .icon { width: 20px; height: 20px; }
.fav-locked { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 700; color: #d9d4ff; }
.fav-locked .icon { width: 20px; height: 20px; flex: none; }
.fav-fix { max-width: 100%; }
.fav-fix .icon { width: 20px; height: 20px; }
/* Fix the search (wardrobe, before COSMIC): a search-only panel */
.modal-favsearch { width: min(640px, 100%); --head: var(--sky); }
.modal-body.favsearch { padding-bottom: calc(var(--safe-b) + 18px); }

/* ---------------- Favourite designer ---------------- */
.designer { display: grid; grid-template-columns: 252px minmax(0, 1fr); align-items: start; gap: 20px; }
.design-preview { position: sticky; top: 0; z-index: 3; display: grid; justify-items: center; gap: 10px; }
.preview-frame {
  position: relative; width: 248px; height: 288px; border: var(--line) solid var(--ink); border-radius: 26px; overflow: hidden;
  background-color: var(--space); background-image: radial-gradient(circle at 50% 62%, rgba(123, 92, 255, 0.55) 0%, rgba(123, 92, 255, 0) 60%), var(--stars);
  box-shadow: 0 6px 0 var(--ink);
}
.preview-frame.pop { animation: frame-pulse 0.3s ease; }
@keyframes frame-pulse { 40% { box-shadow: 0 6px 0 var(--ink), 0 0 0 5px rgba(63, 224, 197, 0.6); } }
.preview-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.preview-frame.is-dragging .preview-canvas { cursor: grabbing; }
.preview-frame.is-3d .preview-thumb { display: none; }
.preview-thumb { width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; background: transparent; }
.preview-thumb.pop { animation: pop 0.3s cubic-bezier(0.2, 1.5, 0.4, 1); }
.preview-thumb .thumb-ph { color: #6c63c9; }
.turn-btn {
  position: absolute; bottom: 8px; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; padding: 0;
  border: 3px solid var(--ink); border-radius: 13px; background: rgba(255, 255, 255, 0.94); color: var(--ink);
  box-shadow: 0 3px 0 var(--ink); cursor: pointer; touch-action: manipulation;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.turn-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.turn-btn:focus-visible { outline: 4px solid var(--sun); outline-offset: 2px; }
.turn-btn .icon { width: 24px; height: 24px; }
.turn-left { left: 8px; }
.turn-right { right: 8px; }
.drag-hint {
  position: absolute; left: 50%; bottom: 17px; z-index: 1; display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px 3px 6px; border-radius: 999px; background: rgba(13, 10, 40, 0.6); color: #fff;
  font-weight: 800; font-size: 12px; line-height: 1.2; white-space: nowrap; pointer-events: none;
  transform: translateX(-50%); transition: opacity 0.3s ease;
}
.drag-hint .icon { width: 16px; height: 16px; animation: hand-wave 1.8s ease-in-out infinite; }
.drag-hint { animation: fade-out 0.5s 5s ease forwards; }
@keyframes hand-wave { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
.preview-frame.was-dragged .drag-hint, .preview-frame.no-3d .drag-hint, .preview-frame.no-3d .turn-btn { opacity: 0; visibility: hidden; }
.preview-info { display: grid; justify-items: center; gap: 6px; min-width: 0; max-width: 100%; text-align: center; }
.preview-name { min-width: 0; max-width: 100%; font-family: var(--font-display); font-size: 26px; line-height: 1.1; overflow-wrap: anywhere; }
.preview-movie { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; font-weight: 700; font-size: 14px; line-height: 1.2; color: var(--ink-2); }
.preview-movie:empty { display: none; }
.preview-movie .icon { flex: none; width: 18px; height: 18px; }
.btn-search .icon { width: 20px; height: 20px; }

.design-main { min-width: 0; }
.design-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.design-tab {
  min-height: 42px; padding: 0 14px; border: 3px solid var(--ink); border-radius: 13px; background: var(--paper-2); color: var(--ink);
  box-shadow: 0 3px 0 var(--ink); font-family: var(--font-display); font-size: 16px; line-height: 1;
  cursor: pointer; touch-action: manipulation; transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.12s ease;
}
.design-tab:hover { background: #fff; }
.design-tab.is-on { background: var(--mint); transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.design-tab:focus-visible { outline: 4px solid var(--blue); outline-offset: 2px; }
.design-panel { animation: fade-in 0.18s ease; }
.design-row { margin-bottom: 16px; }
.design-label { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-weight: 800; font-size: 16px; }
.multi-count { padding: 0 8px; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper-2); font-family: var(--font-display); font-weight: 400; font-size: 14px; line-height: 1.4; }
.multi-count.is-full { background: var(--coral); color: #fff; }
.design-opts { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 4px 2px; }
.design-note { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-weight: 700; font-size: 14px; color: var(--ink-2); }
.design-note .icon { flex: none; width: 18px; height: 18px; }
.swatch {
  display: grid; place-items: center; width: 46px; height: 46px; padding: 0;
  border: 3px solid var(--ink); border-radius: 50%; background: var(--sw);
  box-shadow: 0 3px 0 var(--ink); cursor: pointer; touch-action: manipulation;
  transition: transform 0.12s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.swatch-check { display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--ink); border-radius: 50%; background: #fff; opacity: 0; transform: scale(0.4); transition: opacity 0.12s, transform 0.16s; }
.swatch-check .icon { width: 16px; height: 16px; }
.swatch-check svg { stroke-width: 3.2; }
.swatch.is-on { transform: scale(1.1); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ink); }
.swatch.is-on .swatch-check { opacity: 1; transform: scale(1); }
.chip-opt {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 13px;
  border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); color: var(--ink);
  box-shadow: 0 3px 0 var(--ink); cursor: pointer; touch-action: manipulation;
  font-family: var(--font-display); font-size: 16px; line-height: 1;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.12s ease;
}
.chip-opt:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.chip-opt.is-on { background: var(--sun); }
.design-row [data-act="multi"].is-on { background: var(--mint); }
.chip-opt .icon { width: 20px; height: 20px; }
.chip-dot { width: 18px; height: 18px; border: 2px solid var(--ink); border-radius: 50%; }
.chip-none { min-height: 46px; }
.preset-opt { background: var(--paper-2); }
.preset-undo { background: #fff; }
.preset-dots { display: inline-flex; }
.preset-dots i { width: 16px; height: 16px; margin-left: -5px; border: 2px solid var(--ink); border-radius: 50%; }
.preset-dots i:first-child { margin-left: 0; }
.letter-field { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 800; }
.letter-field .text-input { width: 64px; height: 50px; padding: 0; text-align: center; font-family: var(--font-display); font-size: 26px; text-transform: uppercase; }
.design-empty { display: flex; align-items: center; gap: 8px; font-weight: 700; }

/* Search again (inside the designer) */
.design-search { display: grid; gap: 12px; padding: 14px; border: 3px solid var(--ink); border-radius: 20px; background: var(--paper-2); animation: fade-in 0.2s ease; }
.design-search.is-searching {
  justify-items: center; text-align: center; color: #fff;
  background-color: var(--space); background-image: var(--stars); background-size: 240px 160px;
}
.design-search .search-orb { width: 108px; height: 108px; }
.ds-lead { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-weight: 700; font-size: 15px; line-height: 1.3; }
.ds-lead .icon { flex: none; width: 24px; height: 24px; color: var(--blue-d); }
.ds-lead.is-bad, .ds-lead.is-bad .icon { color: var(--coral-d); }
.ds-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.ds-field { display: grid; gap: 4px; min-width: 0; font-weight: 800; font-size: 14px; }
.ds-field > span { display: inline-flex; align-items: center; gap: 4px; }
.ds-field .icon { width: 18px; height: 18px; color: var(--blue-d); }
.ds-field .text-input { height: 50px; font-size: 18px; }
.ds-actions { justify-content: flex-end; flex-wrap: nowrap; }
.ds-title { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 1.15; text-shadow: var(--o-sm); }
.ds-title b { font-weight: 400; color: var(--sun); }
.ds-result { display: grid; grid-template-columns: 124px minmax(0, 1fr); align-items: center; gap: 14px; }
.ds-thumb { border-radius: 18px; background: radial-gradient(circle at 50% 38%, #5546c9 0%, #1d1650 75%); }
.ds-text { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.ds-name { min-width: 0; max-width: 100%; font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.05; overflow-wrap: anywhere; }
.ds-movie, .ds-source { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; font-weight: 700; font-size: 14px; line-height: 1.2; color: var(--ink-2); overflow-wrap: anywhere; }
.ds-movie > span, .ds-source > span { min-width: 0; }
.ds-movie .icon, .ds-source .icon { flex: none; width: 18px; height: 18px; }
.ds-from { max-width: 100%; padding: 1px 8px; border-radius: 8px; background: rgba(61, 139, 255, 0.12); color: var(--blue-d); font-weight: 800; font-size: 13px; line-height: 1.25; overflow-wrap: anywhere; }
/* The wardrobe's fix panel shows the result as a silhouette (no reveal before COSMIC). */
.ds-thumb.is-sil .thumb-ph { color: rgba(255, 255, 255, 0.4); }
.ds-sum { font-weight: 600; font-size: 14px; line-height: 1.3; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ds-source { font-size: 12px; color: var(--ink-3); }

/* ---------------- Pause ---------------- */
.pause-list .btn { justify-content: flex-start; }
/* v6: whose game this is, at the top of the pause menu, and "Switch player" */
.pause-who {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  margin: 0 0 14px; padding: 8px 12px 8px 8px;
  border: 3px solid var(--ink); border-radius: 18px; background: var(--paper-2);
}
.pwho-thumb { width: 64px; border-radius: 12px; }
.pwho-text { display: grid; gap: 2px; min-width: 0; line-height: 1.1; }
.pwho-text small {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 800; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2);
}
.pwho-text small .icon { width: 16px; height: 16px; }
.pwho-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-weight: 400; font-size: 26px; }
.pause-list .btn-switch { background: var(--sky-2); }
@media (max-height: 540px) {
  .pause-who { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; margin-bottom: 10px; padding: 5px 10px 5px 5px; }
  .pwho-thumb { width: 48px; border-radius: 10px; }
  .pwho-text b { font-size: 21px; }
}
.btn-toggle > span:not(.icon):not(.toggle-pill) { flex: 1; text-align: left; }
.toggle-pill {
  padding: 3px 12px 2px; border: 3px solid var(--ink); border-radius: 999px; background: #e3e0ee; color: var(--ink-2);
  font-size: 15px; text-shadow: none;
}
.btn-toggle.is-on .toggle-pill { background: var(--grass); color: #fff; text-shadow: var(--o-sm); }
.rules { list-style: none; display: grid; gap: 12px; margin: 0 0 14px; padding: 0; }
.rules li { display: flex; align-items: flex-start; gap: 12px; }
.rule-icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border: 3px solid var(--ink); border-radius: 14px; background: var(--paper-2); box-shadow: 0 3px 0 var(--ink); }
.rule-icon .icon { width: 26px; height: 26px; }
.rules li:nth-child(1) .rule-icon { background: var(--grass); }
.rules li:nth-child(2) .rule-icon { background: var(--mint); }
.rules li:nth-child(3) .rule-icon { background: var(--paper); }
.rules li:nth-child(4) .rule-icon { background: var(--sun); }
.rules li:nth-child(5) .rule-icon { background: var(--orange); }
.rules li:nth-child(6) .rule-icon { background: var(--mint); }
.rules li:nth-child(7) .rule-icon { background: var(--sky-2); }
.rules li:nth-child(8) .rule-icon { background: var(--pink); }
.rules li:nth-child(9) .rule-icon { background: #c9a8ff; }
.rules li:nth-child(10) .rule-icon { background: #ffb08a; }
.rules li:nth-child(11) .rule-icon { background: var(--sun); }
.rules li:nth-child(12) .rule-icon { background: #d9b8ff; }
.rules b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: 1.1; }
.rules span { display: block; margin-top: 2px; font-weight: 600; font-size: 15px; line-height: 1.3; }
.controls-box { margin-bottom: 14px; padding: 8px 12px; border: 3px dashed var(--ink-3); border-radius: 16px; background: var(--paper-2); }
.controls-box p { margin: 0; font-weight: 600; font-size: 15px; line-height: 2; }
.confirm-box.danger { border-style: solid; }
.confirm-box .btn-danger-soft { box-shadow: 0 3px 0 var(--ink); }

/* ------------------------------------------------------------------ */
/* Rank-up celebration                                                 */
/* ------------------------------------------------------------------ */

.screen-celebrate {
  --rank: #4fd16b;
  --rank-glow: #1f7a35;
  z-index: 40;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--rank-glow);
  text-align: center;
}
.screen-celebrate.is-cosmic { background-color: var(--space); background-image: var(--stars); background-size: 260px 260px; }
.cele-rays {
  position: absolute; inset: -60%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.13) 0deg 10deg, transparent 10deg 20deg);
  animation: spin 30s linear infinite;
}
.cele-inner {
  position: relative; z-index: 2; display: grid; justify-items: center; gap: 10px;
  width: 100%; max-width: 980px; max-height: 100%; overflow-y: auto;
  padding: calc(var(--safe-t) + 20px) 16px calc(var(--safe-b) + 24px);
}
.cele-badge {
  display: grid; place-items: center; width: 116px; height: 116px;
  border: 6px solid var(--ink); border-radius: 50%; background: var(--rank); color: var(--ink);
  box-shadow: 0 8px 0 var(--ink);
  animation: badge-in 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.is-cosmic .cele-badge { background: var(--rainbow); background-size: 200% 100%; animation: badge-in 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) both, rainbow-move 3s linear infinite; }
.cele-badge .icon { width: 66px; height: 66px; }
@keyframes badge-in { from { transform: scale(0) rotate(-200deg); } }
.cele-kicker { margin: 6px 0 0; font-family: var(--font-display); font-size: 30px; color: #fff; text-shadow: var(--o-md); }
.cele-rank {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  --len: 10;
  font-size: clamp(36px, min(calc((100vw - 56px) / (var(--len) * 0.66)), 24vh), 124px); line-height: 0.95; letter-spacing: 0.02em;
  color: var(--rank); text-shadow: var(--o-lg); white-space: nowrap;
  animation: rank-in 0.7s 0.15s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
.cele-rank .rb { display: inline-block; }
@keyframes rank-in { from { opacity: 0; transform: scale(2.2) rotate(-6deg); } }
.cele-perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 8px 0 4px; animation: rise-in 0.4s 0.6s ease both; }
.perk {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 10px;
  border: 3px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 0 4px 0 var(--ink);
  font-family: var(--font-display); font-size: 20px; line-height: 1.15; text-align: left;
}
.perk b { font-weight: 400; color: var(--blue-d); }
.perk .icon { width: 28px; height: 28px; }
.perk-coin { background: var(--sun); }
.cele-actions { display: grid; justify-items: center; gap: 12px; margin-top: 8px; animation: rise-in 0.4s 0.8s ease both; }
/* The new looks, popping in one by one */
.cele-new { display: flex; justify-content: center; gap: 12px; margin: 4px 0 2px; }
/* Big stickers (about 1.5x the first version) so the detailed high-rank looks read at a glance. */
.new-card {
  display: grid; justify-items: center; gap: 4px; width: min(192px, 22vh); padding: 6px 6px 8px;
  border: var(--line) solid var(--ink); border-radius: 18px; background: var(--paper); box-shadow: 0 5px 0 var(--ink);
  animation: sticker-in 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both;
  animation-delay: calc(0.75s + var(--d, 0) * 0.16s);
}
.new-card:nth-child(1) { rotate: -4deg; }
.new-card:nth-child(3) { rotate: 4deg; }
.new-card .char-thumb { border-radius: 12px; }
.new-name {
  max-width: 100%; overflow: hidden; white-space: normal; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  font-family: var(--font-display); font-size: 17px; line-height: 1.05; color: var(--ink);
}
.cele-new.is-fav .new-card { width: min(250px, 26vh); background: #2b2470; }
.cele-new.is-fav .char-thumb { background: radial-gradient(circle at 50% 38%, #5546c9 0%, #1d1650 75%); }
.cele-new.is-fav .new-name { color: #fff; text-shadow: var(--o-sm); font-size: 19px; }
@keyframes sticker-in { from { opacity: 0; transform: translateY(30px) scale(0.5) rotate(-12deg); } }

/* ------------------------------------------------------------------ */
/* World intro                                                         */
/* ------------------------------------------------------------------ */

.screen-world {
  z-index: 45;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--w-sky, var(--sky));
  text-align: center;
  cursor: pointer;
}
.screen-world.is-leaving { animation: world-out 0.32s ease forwards; }
@keyframes world-out { to { opacity: 0; transform: scale(1.06); } }
.world-stripes {
  position: absolute; inset: -50%;
  background: repeating-linear-gradient(-30deg, rgba(255, 255, 255, 0.14) 0 44px, transparent 44px 88px);
  animation: stripes-move 3s linear infinite;
}
@keyframes stripes-move { to { transform: translateX(101.6px); } }
.world-inner { position: relative; z-index: 2; display: grid; justify-items: center; gap: 6px; padding: 24px 16px; }
.world-kicker {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 4px 16px 4px 10px;
  border: 3px solid var(--ink); border-radius: 999px; background: var(--paper); box-shadow: 0 4px 0 var(--ink);
  font-family: var(--font-display); font-size: 24px;
  animation: rise-in 0.4s ease both;
}
.world-kicker .icon { width: 30px; height: 30px; }
.world-name {
  --len: 10;
  margin: 10px 0 14px; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(36px, min(calc((100vw - 56px) / (var(--len) * 0.6)), 26vh), 140px); line-height: 0.95; color: var(--w-main, #fff); text-shadow: var(--o-lg);
  white-space: nowrap;
  animation: rank-in 0.7s 0.1s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
.world-sub {
  max-width: 640px; margin: 0; padding: 6px 16px; border: 3px solid var(--ink); border-radius: 14px;
  background: var(--paper); box-shadow: 0 4px 0 var(--ink); font-weight: 800; font-size: 18px; line-height: 1.3;
  animation: rise-in 0.4s 0.5s ease both;
}
.world-sub b { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.03em; color: var(--blue-d); }
.world-tip {
  display: flex; align-items: center; gap: 8px; max-width: 520px; margin: 8px 0 0; padding: 6px 14px 6px 8px;
  border: 3px solid var(--ink); border-radius: 14px; background: var(--sun); box-shadow: 0 4px 0 var(--ink);
  font-weight: 800; font-size: 16px; line-height: 1.25; text-align: left;
  animation: rise-in 0.4s 0.9s ease both;
}
.world-tip .icon { flex: none; width: 30px; height: 30px; padding: 3px; border: 2px solid var(--ink); border-radius: 9px; background: #fff; }
.world-tip b { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.03em; }

/* ------------------------------------------------------------------ */
/* First-visit tour (a card at the bottom; the hub stays visible)      */
/* ------------------------------------------------------------------ */

.tour-layer {
  position: fixed; inset: 0; z-index: 35; display: grid; place-items: end center;
  padding: 16px 16px calc(var(--safe-b) + 18px);
  background: linear-gradient(to top, rgba(21, 17, 58, 0.55), rgba(21, 17, 58, 0) 60%);
  pointer-events: auto;
}
.tour-layer.is-open { animation: fade-in 0.25s ease; }
.tour-layer.is-leaving { animation: fade-out 0.22s ease forwards; pointer-events: none; }
.tour-card {
  --tour: var(--mint);
  display: grid; gap: 10px; width: min(520px, 100%); padding: 14px 16px 14px;
  border: var(--line) solid var(--ink); border-radius: var(--r-lg); background: var(--paper);
  box-shadow: 0 8px 0 var(--ink);
}
.tour-card.pop { animation: rise-in 0.32s cubic-bezier(0.2, 1.4, 0.4, 1); }
.tour-top { display: flex; align-items: center; gap: 12px; }
.tour-icon {
  flex: none; display: grid; place-items: center; width: 56px; height: 56px;
  border: 3px solid var(--ink); border-radius: 16px; background: var(--tour); box-shadow: 0 4px 0 var(--ink);
}
.tour-icon .icon { width: 32px; height: 32px; }
.tour-kicker { margin: 0; font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.tour-titles h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.05; }
.tour-text { margin: 0; font-weight: 700; font-size: 17px; line-height: 1.35; }
.tour-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.tour-dots { display: flex; gap: 6px; margin-right: auto; }
.tour-dots i { width: 12px; height: 12px; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper-3); }
.tour-dots i.is-on { background: var(--tour, var(--sun)); }
.tour-card[style*="--tour"] .tour-dots i.is-on { background: var(--tour); }
@media (max-height: 540px) {
  .tour-layer { padding-bottom: calc(var(--safe-b) + 8px); }
  .tour-card { gap: 6px; padding: 10px 12px; }
  .tour-icon { width: 44px; height: 44px; }
  .tour-icon .icon { width: 26px; height: 26px; }
  .tour-titles h2 { font-size: 23px; }
  .tour-text { font-size: 15px; }
}

/* ------------------------------------------------------------------ */
/* Toasts                                                              */
/* ------------------------------------------------------------------ */

.toasts {
  position: fixed;
  top: calc(var(--safe-t) + 14px);
  left: 50%;
  z-index: 70;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: max-content;
  max-width: min(460px, calc(100vw - 32px));
  transform: translateX(-50%);
  pointer-events: none;
  align-content: start;
}
.toast {
  display: flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 8px 16px 8px 10px;
  border: 3px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 0 4px 0 var(--ink);
  font-family: var(--font-display); font-size: 18px; line-height: 1.2;
  animation: toast-in 0.32s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.toast .icon { width: 26px; height: 26px; }
.toast-coin { background: var(--sun); }
.toast-good { background: var(--grass); color: #fff; text-shadow: var(--o-sm); }
.toast-bad { background: var(--coral); color: #fff; text-shadow: var(--o-sm); }
.toast-good .icon svg, .toast-bad .icon svg { stroke-width: 3; }
.toast.is-again { animation: pop 0.3s cubic-bezier(0.2, 1.5, 0.4, 1); }
.toast.is-leaving { animation: toast-out 0.28s ease forwards; }
/* A modal is open: one toast, at the bottom just above the modal's buttons (ui.js measures the footer into
   --toast-b), never over its title. The id selector wins over every phone / landscape / math-panel rule. */
#ui-root.has-modal #toasts { top: auto; bottom: var(--toast-b, calc(var(--safe-b) + 84px)); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-20px) scale(0.8); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-14px) scale(0.92); } }

/* ------------------------------------------------------------------ */
/* v4: tower codes, the Tower Machine, the floors, the floor banner    */
/* ------------------------------------------------------------------ */

/* A tower code as chunky word tiles: Brave - Panda - 27. Selectable (the copy fallback picks it out). */
.code-tiles {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 3px;
  user-select: text; -webkit-user-select: text; cursor: text;
}
#ui-root .code-tiles, #ui-root .code-tiles * { user-select: text; -webkit-user-select: text; }
.code-tiles .ct {
  display: inline-block; padding: 4px 12px 2px;
  border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 4px 0 var(--ink);
  font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.1; letter-spacing: 0.02em;
  color: #fff; text-shadow: var(--o-sm); white-space: nowrap;
}
.code-tiles .ct-0 { background: var(--pink); }
.code-tiles .ct-1 { background: var(--blue); }
.code-tiles .ct-2 { background: var(--sun); color: var(--ink); text-shadow: none; }
.code-tiles .ct-dash { font-style: normal; font-family: var(--font-display); font-size: 22px; line-height: 1; color: var(--ink); }
.code-tiles ::selection { background: rgba(61, 139, 255, 0.5); }
.tw-copy.is-copied, .pc-copy.is-copied { background: var(--grass); color: #fff; text-shadow: var(--o-sm); }
/* When copying did not work: the code in a read-only box, already picked out, to copy by hand. */
.tw-copy-note.is-field, .pc-note.is-field { display: grid; justify-items: stretch; gap: 6px; width: 100%; }
.cn-line { display: inline-flex; align-items: center; gap: 6px; }
.cn-line .icon { flex: none; width: 19px; height: 19px; }
.code-field {
  width: 100%; min-width: 0; height: 44px; padding: 0 12px; border: 3px solid var(--ink); border-radius: 12px;
  background: #fff; color: var(--ink); text-align: center; outline: none;
  font-family: var(--font-display); font-weight: 400; font-size: 21px; letter-spacing: 0.03em;
}
.code-field:focus { border-color: var(--blue-d); box-shadow: 0 0 0 4px rgba(61, 139, 255, 0.35); }
.code-field::selection { background: rgba(61, 139, 255, 0.45); }
.tw-copy-note.pop, .pc-note.pop { animation: pop 0.3s cubic-bezier(0.2, 1.4, 0.4, 1); }

/* ---------------- The Tower Machine ---------------- */
.modal-towers { width: min(920px, 100%); --head: var(--mint); }
.modal-towers.is-narrow { width: min(640px, 100%); }
.modal-body.towers {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  grid-template-areas: "code floors" "new floors" "play floors";
  grid-template-rows: auto auto 1fr;
  gap: 14px 18px;
  align-items: start;
}
.modal-body.towers.no-floors { grid-template-columns: minmax(0, 1fr); grid-template-areas: "code" "new" "play"; grid-template-rows: none; }
.modal-body.towers.towers-confirm, .modal-body.towers.towers-busy { display: block; }
.tw-code-card { grid-area: code; }
.tw-new-card { grid-area: new; }
.tw-play-card { grid-area: play; }
.tw-floors { grid-area: floors; }
.tw-card { padding: 14px; border: 3px solid var(--ink); border-radius: 20px; background: var(--paper-2); box-shadow: 0 4px 0 var(--ink); }
.tw-kicker {
  display: flex; align-items: center; gap: 7px; margin: 0;
  font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: 1.1; color: var(--ink);
}
.tw-kicker .icon { width: 25px; height: 25px; }
/* The code card: the code big in the middle, like the screen on the machine. */
.tw-code-card {
  display: grid; justify-items: center; gap: 12px; text-align: center;
  background: #dcfbf4 radial-gradient(circle, rgba(29, 27, 51, 0.09) 1.5px, transparent 2px) 0 0 / 14px 14px;
}
.tw-code .ct { padding: 6px 14px 3px; border-radius: 15px; border-width: 4px; box-shadow: 0 5px 0 var(--ink); font-size: clamp(26px, 3.4vw, 38px); }
.tw-code .ct-dash { font-size: 30px; }
.tw-nocode { margin: 0; font-weight: 800; color: var(--ink-2); }
.tw-copy-row { display: grid; justify-items: center; gap: 8px; }
.tw-copy-note {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0;
  font-weight: 800; font-size: 14.5px; line-height: 1.25; color: var(--ink-2); text-align: left;
}
.tw-copy-note .icon { flex: none; width: 19px; height: 19px; }
.tw-copy-note kbd { min-width: 22px; height: 22px; font-size: 12px; }
.tw-copy-note b { font-family: var(--font-display); font-weight: 400; color: var(--ink); }
.tw-new-card { padding: 12px; background: #e9fbe9; }
.tw-new .icon { animation: dice-wobble 2.6s ease-in-out infinite; }
@keyframes dice-wobble { 0%, 70%, 100% { transform: rotate(0deg); } 78% { transform: rotate(-18deg) scale(1.1); } 88% { transform: rotate(14deg); } }
.tw-hint { margin: 8px 0 0; text-align: center; font-weight: 700; font-size: 14px; line-height: 1.25; color: var(--ink-2); }
.tw-play-card { display: grid; gap: 10px; }
.tw-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.tw-input { height: 54px; font-family: var(--font-display); font-weight: 400; font-size: 22px; letter-spacing: 0.02em; }
.tw-input::placeholder { font-family: var(--font-body); font-weight: 600; font-size: 19px; letter-spacing: 0; }
.tw-play { min-height: 54px; background: var(--blue); color: #fff; text-shadow: var(--o-sm); }
.tw-msg { display: flex; align-items: center; gap: 6px; margin: -2px 0 0; font-weight: 800; font-size: 15px; line-height: 1.25; }
.tw-msg:empty { display: none; }
.tw-msg .icon { flex: none; width: 20px; height: 20px; }
.tw-msg.tw-bad { color: var(--coral-d); }
.tw-msg.tw-note { color: var(--blue-d); }
.tw-msg.tw-good { color: var(--grass-d); }

/* The floors as a little tower: the roof (portal) on top, floor 1 above the bottom floor. */
.tw-floors { display: grid; gap: 10px; align-content: start; }
.floor-stack {
  list-style: none; margin: 0; padding: 0; display: grid;
  border: 3px solid var(--ink); border-radius: 16px; overflow: hidden; background: var(--paper); box-shadow: 0 4px 0 var(--ink);
}
.fl {
  --fl-top: #8bdc5a; --fl-side: #5aa83a; --fl-acc: #ffe14d;
  display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 5px 10px 11px 8px;
  border-top: 3px solid var(--ink);
  background: linear-gradient(to bottom, var(--fl-top) 0, var(--fl-top) calc(100% - 7px), var(--fl-side) calc(100% - 7px));
}
.fl:first-child { border-top: 0; }
.fl-num {
  flex: none; display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 5px;
  border: 3px solid var(--ink); border-radius: 10px; background: #fff;
  font-family: var(--font-display); font-size: 18px; line-height: 1; color: var(--ink);
}
.fl-num .icon { width: 20px; height: 20px; }
.fl-ico {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px;
  border: 3px solid var(--ink); border-radius: 50%; background: var(--fl-acc); color: var(--ink);
}
.fl-ico .icon { width: 18px; height: 18px; }
.fl-name {
  min-width: 0; font-family: var(--font-display); font-weight: 400; font-size: 19px; line-height: 1.05;
  color: #fff; text-shadow: var(--o-sm); overflow-wrap: anywhere;
}
.fl small { margin-left: auto; font-weight: 800; font-size: 12.5px; line-height: 1.1; text-align: right; }
.fl-roof { padding-bottom: 5px; background: repeating-linear-gradient(-45deg, #2b2470 0 10px, #372d8f 10px 20px); }
.fl-roof .fl-num { background: #c9a8ff; }
.fl-roof small { color: #e4dcff; }
.fl-base { padding-bottom: 5px; background: #e6e2f3; }
.fl-base .fl-name { color: var(--ink); text-shadow: none; }
.fl-base small { color: var(--ink-2); }

/* "Make a new tower?": a friendly yellow confirm; the big green button keeps the tower. */
.tw-confirm { max-width: 580px; margin: 0 auto; border-color: var(--sun-d); background: #fff8df; }
.tw-confirm-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.tw-confirm .tw-confirm-top p { margin: 0; font-size: 22px; line-height: 1.15; }
.tw-confirm-top b { font-family: var(--font-display); font-weight: 400; }
.tw-confirm-ico {
  flex: none; display: grid; place-items: center; width: 54px; height: 54px;
  border: 3px solid var(--ink); border-radius: 16px; background: var(--mint); box-shadow: 0 3px 0 var(--ink);
}
.tw-confirm-ico .icon { width: 32px; height: 32px; animation: dice-wobble 1.8s ease-in-out infinite; }
.tw-rules { list-style: none; display: grid; gap: 8px; margin: 0 0 16px; padding: 0; }
.tw-rules li { display: flex; align-items: flex-start; gap: 9px; font-weight: 700; font-size: 16px; line-height: 1.3; }
.tw-rules li > .icon { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.tw-inline-code {
  display: inline-block; padding: 0 7px; border: 2px solid var(--ink); border-radius: 8px; background: var(--sun);
  font-family: var(--font-display); font-weight: 400; letter-spacing: 0.02em; white-space: nowrap;
  user-select: text; -webkit-user-select: text;
}
.tw-busy { display: grid; justify-items: center; gap: 12px; padding: 34px 10px; text-align: center; }
.tw-busy p { margin: 0; font-family: var(--font-display); font-size: 26px; }
.tw-busy-ico {
  display: grid; place-items: center; width: 92px; height: 92px;
  border: var(--line) solid var(--ink); border-radius: 26px; background: var(--mint); box-shadow: 0 6px 0 var(--ink);
}
.tw-busy-ico .icon { width: 56px; height: 56px; transform-origin: 50% 85%; animation: lever-pull 0.9s ease-in-out infinite; }
@keyframes lever-pull { 50% { transform: rotate(-14deg) scale(1.05); } }

/* Pause menu: the code with a copy button, and where to change it. */
.pause-code {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label copy" "code copy" "note note";
  gap: 6px 10px; align-items: center; padding: 10px 12px; border: 3px solid var(--ink); border-radius: 16px;
  background: #dcfbf4; box-shadow: 0 4px 0 var(--ink);
}
.pc-label { grid-area: label; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 18px; line-height: 1; }
.pc-label .icon { width: 22px; height: 22px; }
.pc-code { grid-area: code; justify-content: flex-start; gap: 4px 2px; }
.pc-code .ct { padding: 3px 8px 1px; border-radius: 10px; box-shadow: 0 3px 0 var(--ink); font-size: 19px; }
.pc-code .ct-dash { font-size: 16px; }
.pc-copy { grid-area: copy; }
.pc-note { grid-area: note; display: flex; align-items: center; gap: 7px; margin: 0; font-weight: 700; font-size: 14px; line-height: 1.25; color: var(--ink-2); }
.pc-note .icon { flex: none; width: 20px; height: 20px; color: var(--ink); }
.pc-note b { color: var(--ink); }
.pc-note kbd { min-width: 22px; height: 22px; font-size: 12px; }
.rules li:nth-child(13) .rule-icon { background: var(--mint); }

/* World intro: the tower code and one chip per floor, in that place's colours. */
.world-tower { display: grid; justify-items: center; gap: 10px; max-width: min(940px, 100%); margin-top: 6px; }
.wt-code {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; margin: 0;
  padding: 5px 12px 6px 8px; border: 3px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 0 4px 0 var(--ink);
  animation: rise-in 0.4s 0.65s ease both;
}
.wt-code-ico { width: 26px; height: 26px; }
.wt-code-label { font-weight: 800; font-size: 15px; }
.wt-tiles { gap: 3px 2px; }
.wt-tiles .ct { padding: 2px 8px 0; border-radius: 9px; box-shadow: 0 3px 0 var(--ink); font-size: 20px; }
.wt-tiles .ct-dash { font-size: 16px; }
.wt-floors { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; }
.wt-floor {
  --fl-top: #8bdc5a; --fl-side: #5aa83a; --fl-acc: #ffe14d;
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 9px 5px;
  border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink);
  background: linear-gradient(to bottom, var(--fl-top) 0, var(--fl-top) calc(100% - 6px), var(--fl-side) calc(100% - 6px));
  animation: rise-in 0.35s calc(0.8s + var(--i, 0) * 0.11s) cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.wt-floor .fl-num { min-width: 26px; height: 26px; border-width: 2px; border-radius: 8px; font-size: 16px; }
.wt-ico { width: 28px; height: 28px; padding: 4px; border: 2px solid var(--ink); border-radius: 50%; background: var(--fl-acc); }
.wt-floor b { font-family: var(--font-display); font-weight: 400; font-size: 18px; line-height: 1.1; color: #fff; text-shadow: var(--o-sm); white-space: nowrap; }
.screen-world.has-tower .world-name { margin: 6px 0 10px; }

/* ---------------- The floor banner: "Floor 2 · ICE CASTLE" ---------------- */
.biome-banner {
  position: fixed; left: 50%; top: calc(var(--safe-t) + 12px); z-index: 26;
  width: max-content; max-width: calc(100vw - 24px); transform: translateX(-50%); pointer-events: none;
}
.bb {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 22px 10px 10px; overflow: hidden;
  border: var(--line) solid var(--ink); border-radius: 22px;
  background: linear-gradient(135deg, var(--bb-a, #3d8bff), var(--bb-b, #1d5fd0));
  box-shadow: 0 6px 0 var(--ink);
}
.biome-banner.is-open .bb { animation: bb-in 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.biome-banner.is-leaving .bb { animation: bb-out 0.38s ease forwards; }
.bb-ico {
  flex: none; display: grid; place-items: center; width: 58px; height: 58px;
  border: var(--line) solid var(--ink); border-radius: 18px; background: var(--bb-acc, var(--sun)); color: var(--ink); box-shadow: 0 4px 0 var(--ink);
}
.bb-ico .icon { width: 36px; height: 36px; }
.biome-banner.is-open .bb-ico { animation: bb-ico 0.7s 0.12s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.bb-text { display: grid; justify-items: start; gap: 3px; min-width: 0; }
.bb-floor {
  padding: 1px 10px 0; border: 3px solid var(--ink); border-radius: 999px; background: #fff;
  font-family: var(--font-display); font-size: 17px; line-height: 1.2; letter-spacing: 0.03em; color: var(--ink);
}
.bb-name {
  max-width: 100%; font-family: var(--font-display); font-weight: 400; font-size: 46px; line-height: 1; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--bb-name, #fff); text-shadow: var(--o-md); padding-bottom: 5px;
}
.bb-shine {
  position: absolute; top: 0; bottom: 0; left: -40%; width: 26%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent); transform: skewX(-18deg);
}
.biome-banner.is-open .bb-shine { animation: bb-shine 1.1s 0.45s ease both; }
@keyframes bb-in { from { opacity: 0; transform: translateY(-46px) scale(0.6) rotate(-5deg); } }
@keyframes bb-out { to { opacity: 0; transform: translateY(-34px) scale(0.85); } }
@keyframes bb-ico { from { transform: scale(0) rotate(-140deg); } }
@keyframes bb-shine { from { left: -40%; } to { left: 120%; } }
/* Never over a math gate, a dialog, the Paper, the tour, or a fall with the Magic Wand on offer. */
#ui-root.has-math .biome-banner, #ui-root.has-modal .biome-banner, #ui-root.has-paper .biome-banner,
#ui-root.has-tour .biome-banner, #ui-root.has-wand .biome-banner { visibility: hidden; }
/* The toasts step down below the banner while it shows. */
#ui-root.has-banner .toasts { top: calc(var(--safe-t) + 112px); }

/* ---------------- The Magic Wand never covers the rank tag over the character's head ---------------- */
@keyframes wand-drop { from { opacity: 0; transform: translateY(-30px) scale(0.6); } }
/* Held upright: just above the power bar, below the character (the tag floats above it). */
@media (orientation: portrait) {
  #ui-root.is-touch .wand-rescue { bottom: calc(var(--safe-b) + 224px); }
  #ui-root.is-touch.has-power-active .wand-rescue { bottom: calc(var(--safe-b) + 284px); }
}
/* Held sideways: at the top, between the rank card and the coins (the tag is in the middle of the screen).
   The toasts that live up there wait (ui.js keeps them until they can be seen) so nothing covers the tag. */
@media (orientation: landscape) {
  #ui-root.is-touch .wand-rescue,
  #ui-root.is-touch.has-power-active .wand-rescue {
    top: calc(var(--safe-t) + 8px); bottom: auto;
    animation: wand-drop 0.4s cubic-bezier(0.2, 1.6, 0.4, 1), wand-glow 1s ease-in-out 0.4s infinite;
  }
  #ui-root.is-touch.has-wand:not(.has-modal):not(.has-math):not(.has-paper) .toasts { visibility: hidden; }
}
@media (orientation: landscape) and (max-width: 760px) {
  #ui-root.is-touch .wand-rescue,
  #ui-root.is-touch.has-power-active .wand-rescue {
    left: calc(var(--safe-l) + 258px); right: auto; margin: 0;
    max-width: calc(100vw - var(--safe-l) - var(--safe-r) - 440px); min-width: 0;
  }
  #ui-root.is-touch .wand-use { display: none; }
}
@media (orientation: landscape) and (max-width: 620px) {
  #ui-root.is-touch .wand-rescue .wand-text { display: none; }
  #ui-root.is-touch .wand-rescue { padding: 0 14px; }
}

/* ---------------- v4 on phones ---------------- */
@media (max-width: 640px) {
  .modal-body.towers { grid-template-columns: minmax(0, 1fr); grid-template-areas: "code" "new" "play" "floors"; grid-template-rows: none; gap: 12px; }
  .tw-card { padding: 12px; }
  .tw-code .ct { font-size: clamp(22px, 7.6vw, 30px); padding: 5px 10px 2px; }
  .tw-code .ct-dash { font-size: 22px; }
  .tw-new { font-size: clamp(18px, 5.4vw, 22px); padding: 0 14px; }
  .tw-input { font-size: 20px; }
  .tw-confirm .tw-confirm-top p { font-size: 20px; }
  .tw-rules li { font-size: 15px; }
  .pc-code .ct { font-size: 16px; padding: 2px 6px 0; }
  .pc-code .ct-dash { font-size: 14px; }
  .pause-code { gap: 6px 8px; padding: 10px; }
  .wt-floor b { font-size: 16px; }
  .wt-floors { gap: 6px; }
  .wt-floor { padding: 3px 10px 8px 4px; gap: 5px; }
  .wt-ico { width: 24px; height: 24px; padding: 3px; }
  /* The banner sits over the top row of HUD stickers for its two seconds, so the middle of the screen (the
     character and its rank tag) stays clear; the toasts below the HUD stay where they are. */
  .biome-banner { top: calc(var(--safe-t) + 10px); max-width: calc(100vw - 20px); }
  .bb { gap: 10px; padding: 6px 16px 8px 8px; border-radius: 20px; }
  .bb-ico { width: 46px; height: 46px; border-radius: 14px; }
  .bb-ico .icon { width: 28px; height: 28px; }
  .bb-floor { font-size: 15px; }
  .bb-name { font-size: clamp(24px, 7.6vw, 32px); }
  #ui-root.has-banner .toasts { top: calc(var(--safe-t) + 226px); }
}
@media (max-height: 540px) {
  .modal-body.towers { grid-template-columns: minmax(0, 1fr) minmax(0, 250px); gap: 10px 14px; }
  .modal-body.towers.no-floors { grid-template-columns: minmax(0, 1fr); }
  .tw-card { padding: 9px 12px; border-radius: 16px; }
  /* Code card in two columns: the code and its Copy button side by side. */
  .tw-code-card { grid-template-columns: minmax(0, 1fr) auto; justify-items: start; align-items: center; gap: 6px 12px; text-align: left; }
  .tw-code-card .tw-kicker, .tw-code-card .tw-copy-note { grid-column: 1 / -1; }
  .tw-code-card .tw-copy-row { display: contents; }
  .tw-code { justify-content: flex-start; }
  .tw-new-card { padding: 0; border: 0; background: none; box-shadow: none; }
  .tw-kicker { font-size: 17px; }
  .tw-kicker .icon { width: 21px; height: 21px; }
  .tw-code .ct { font-size: 24px; padding: 3px 10px 1px; border-width: 3px; box-shadow: 0 4px 0 var(--ink); }
  .tw-code .ct-dash { font-size: 20px; }
  .tw-copy { min-height: 44px; font-size: 17px; padding: 0 14px; }
  .tw-copy-note { font-size: 13px; justify-content: flex-start; }
  .tw-new { min-height: 52px; font-size: 20px; }
  .tw-hint { display: none; }
  .tw-play-card { gap: 6px; }
  .tw-input, .tw-play { height: 46px; min-height: 46px; }
  .tw-floors { gap: 6px; }
  .fl { min-height: 40px; padding: 3px 8px 9px 6px; gap: 6px; }
  .fl-num { min-width: 26px; height: 26px; font-size: 15px; border-radius: 8px; }
  .fl-ico { width: 28px; height: 28px; }
  .fl-ico .icon { width: 16px; height: 16px; }
  .fl-name { font-size: 16px; }
  .fl small { font-size: 11px; }
  .fl-roof, .fl-base { padding-bottom: 3px; }
  .tw-confirm-top { margin-bottom: 6px; }
  .tw-confirm-ico { width: 42px; height: 42px; border-radius: 12px; }
  .tw-confirm-ico .icon { width: 26px; height: 26px; }
  .tw-confirm .tw-confirm-top p { font-size: 19px; }
  .tw-rules { gap: 4px; margin-bottom: 10px; }
  .tw-rules li { font-size: 14px; }
  .tw-busy { padding: 14px 10px; }
  .pause-code { gap: 4px; padding: 6px 10px; }
  .pc-note { font-size: 13px; }
  /* World intro: a smaller name makes room for the code and the floors. */
  .screen-world.has-tower .world-name { font-size: clamp(32px, min(calc((100vw - 56px) / (var(--len) * 0.6)), 17vh), 96px); margin: 2px 0 6px; }
  .screen-world.has-tower .world-inner { gap: 4px; padding: calc(var(--safe-t) + 8px) 16px calc(var(--safe-b) + 8px); }
  .screen-world.has-tower .world-sub { font-size: 14px; padding: 4px 12px; }
  .screen-world.has-tower.many-floors .world-tip { display: none; }
  .world-tower { gap: 6px; margin-top: 2px; }
  .wt-code { padding: 3px 10px 4px 6px; }
  .wt-code-ico { width: 22px; height: 22px; }
  .wt-tiles .ct { font-size: 17px; }
  .wt-floor { padding: 2px 10px 7px 3px; gap: 4px; }
  .wt-floor b { font-size: 15px; }
  .wt-floor .fl-num { min-width: 22px; height: 22px; font-size: 14px; }
  .wt-ico { width: 22px; height: 22px; padding: 3px; }
  /* Banner: between the rank card and the coins at the top. */
  .biome-banner { top: calc(var(--safe-t) + 8px); max-width: max(240px, calc(100vw - 540px)); }
  .bb { gap: 8px; padding: 5px 14px 6px 6px; border-radius: 18px; }
  .bb-ico { width: 40px; height: 40px; border-radius: 12px; border-width: 3px; box-shadow: 0 3px 0 var(--ink); }
  .bb-ico .icon { width: 24px; height: 24px; }
  .bb-floor { font-size: 13px; padding: 0 8px; border-width: 2px; }
  .bb-name { font-size: 27px; text-shadow: var(--o-sm); padding-bottom: 3px; }
  #ui-root.has-banner .toasts { top: calc(var(--safe-t) + 86px); }
}

/* Small phones held sideways: a narrower floors column and smaller code tiles, so the code and Copy share a row. */
@media (max-height: 540px) and (max-width: 760px) {
  .modal-body.towers { grid-template-columns: minmax(0, 1fr) minmax(0, 212px); }
  .tw-code .ct { font-size: 20px; padding: 3px 8px 1px; }
  .tw-code .ct-dash { font-size: 16px; }
  .tw-copy-more { display: none; }
  .fl-name { font-size: 15px; }
  .fl small { display: none; }
  /* The banner starts right of the rank card (centred it would cover its edge). */
  .biome-banner { left: calc(var(--safe-l) + 256px); transform: none; max-width: calc(100vw - var(--safe-l) - var(--safe-r) - 436px); }
  .bb-ico { width: 34px; height: 34px; border-radius: 10px; }
  .bb-ico .icon { width: 20px; height: 20px; }
  .bb-name { font-size: 22px; }
}

/* ------------------------------------------------------------------ */
/* Phones and small screens                                            */
/* ------------------------------------------------------------------ */

@media (max-width: 640px) {
  /* HUD: compact stickers */
  .hud-player { width: auto; min-width: 172px; max-width: calc(100vw - 210px); gap: 5px; padding: 6px 10px; border-radius: 16px; }
  .hud-rank { font-size: 15px; padding: 1px 8px 0; }
  .hud-name { font-size: 16px; }
  .mini-bar { height: 14px; }
  .hud-rank-sub { font-size: 12px; gap: 4px; }
  .hud-rank-sub .sub-icon { width: 14px; height: 14px; }
  .btn-newlooks { min-height: 36px; font-size: 15px; padding: 0 12px 0 8px; }
  .btn-newlooks .icon { width: 19px; height: 19px; }
  .chip-skip .skip-price .icon { width: 15px; height: 15px; }
  .hud-coins { min-width: 0; padding: 3px 12px 3px 6px; }
  .hud-coins .icon { width: 28px; height: 28px; }
  .hud-coin-num { font-size: 24px; }
  .chip { font-size: 13px; padding: 2px 10px 2px 6px; }
  .chip .icon { width: 17px; height: 17px; }
  .hud-btns { gap: 6px; }
  .hud-meter { right: calc(var(--safe-r) + 12px); height: min(36vh, 300px); transform: translateY(-30%); }
  .btn-down { min-height: 48px; font-size: 16px; padding: 0 14px; }
  .toasts { top: calc(var(--safe-t) + 226px); }
  .hide-sm { display: none; }
  .step-2 .btn-row { flex-wrap: nowrap; }
  .step-2 .btn-row .btn-ghost { padding: 0 14px; }
  .step-2 .btn-row .btn-grow { min-width: 0; padding: 0 16px; }

  /* Math panel becomes a bottom sheet */
  .math-panel { left: 0; right: 0; bottom: 0; width: 100%; transform: none; }
  .math-panel.is-open { animation: sheet-up 0.3s cubic-bezier(0.2, 1.2, 0.4, 1); }
  .math-panel.is-leaving { animation: sheet-down 0.22s ease forwards; }
  .math-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 12px 14px calc(var(--safe-b) + 14px);
    border-bottom: 0;
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -4px 0 rgba(29, 27, 51, 0.18);
  }
  .math-q-row { grid-template-columns: minmax(0, 1fr) minmax(118px, 42%); align-items: center; margin: 8px 0 0; }
  .math-problem { font-size: clamp(28px, 9vw, 40px); }
  .answer-display { height: 60px; font-size: 36px; padding: 0 12px; border-radius: 16px; }
  .math-help { display: none; }
  .numpad { grid-auto-rows: 52px; gap: 7px; }
  .math-x { top: 8px; right: 10px; }
  .math-inner.has-x .math-top { padding-right: 50px; }
  .math-top { flex-wrap: nowrap; }
  .math-kicker { flex: none; font-size: 13px; padding: 2px 8px 2px 5px; }
  .btn-skip { min-height: 38px; font-size: 15px; padding: 0 10px 0 6px; }
  .btn-skip.is-wait, .btn-skip.is-poor { font-size: 13px; }
  .skip-long { display: none; }
  .skip-short { display: inline; }
  .math-result { inset: -4px -4px 0; border-bottom: 0; border-radius: 26px 26px 0 0; padding-bottom: calc(var(--safe-b) + 12px); }

  /* Modals become bottom sheets */
  .modal-layer { place-items: end center; padding: calc(var(--safe-t) + 12px) 0 0; }
  .modal {
    width: 100% !important;
    max-height: calc(100vh - var(--safe-t) - 12px);
    max-height: calc(100dvh - var(--safe-t) - 12px);
    border-bottom: 0;
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -4px 0 rgba(29, 27, 51, 0.25);
    animation: sheet-up 0.32s cubic-bezier(0.2, 1.2, 0.4, 1);
  }
  .modal-layer.is-leaving .modal { animation: sheet-down 0.2s ease forwards; }
  .modal-head { padding: 10px 10px 10px 12px; gap: 10px; }
  .modal-icon { width: 46px; height: 46px; border-radius: 14px; }
  .modal-icon .icon { width: 28px; height: 28px; }
  .modal-titles h2 { font-size: 27px; }
  .modal-titles p { font-size: 13px; margin-top: 4px; }
  .modal-body { padding: 14px 14px calc(var(--safe-b) + 18px); }
  .modal-foot { padding: 10px 14px calc(var(--safe-b) + 12px); }

  .ladder-scroll { margin: -4px -14px 12px; padding: 6px 14px 10px; }

  /* Shop: one column (Coin Power, then what coins do); ladder in two rows of five */
  .modal-body.shop { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "title" "ladder" "next" "uses"; grid-template-rows: none; }
  .shop .coin-uses { margin-top: 16px; }
  .ladder { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 12px; }
  .pw-step { height: 116px; }
  .step-bar { height: calc(var(--h) * 0.7px); }
  .balance { font-size: 28px; }
  .balance .icon { width: 32px; height: 32px; }
  .deal-num { font-size: 32px; }
  .shop-sec-title { font-size: 20px; }

  /* Movie result */
  .movie-inner { padding: calc(var(--safe-t) + 12px) 12px calc(var(--safe-b) + 16px); }
  .movie-card { gap: 10px; padding: 14px; }
  .search-orb { width: 120px; height: 120px; }
  .film-title { font-size: 23px; }
  .film-badge { width: 42px; height: 42px; }
  .movie-film { padding: 10px; gap: 10px; }
  .movie-char { grid-template-columns: 124px minmax(0, 1fr); gap: 10px; padding: 10px 12px 10px 8px; }
  .movie-char-name { font-size: 29px; }
  .unlock-badge { font-size: 15px; padding: 3px 10px 3px 6px; }
  .movie-char-sum { font-size: 14px; -webkit-line-clamp: 3; }

  /* Rank-up: smaller new-look stickers */
  .cele-new { gap: 8px; }
  .new-card { width: min(124px, calc((100vw - 56px) / 3)); border-width: 3px; border-radius: 15px; }
  .new-name { font-size: 14px; }
  .cele-new.is-fav .new-card { width: min(210px, 26vh); }

  /* Training stacks */
  .train-play { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .train-problem { min-height: 84px; padding: 8px; font-size: clamp(34px, 10vw, 46px); border-width: 6px; }
  .train-left { gap: 8px; }
  .train-left .answer-display { height: 58px; font-size: 34px; }
  .train-feedback { min-height: 26px; font-size: 19px; }
  .barcode { height: 34px; }

  /* Wardrobe: 3 per row */
  .char-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .char-card { padding: 5px 5px 8px; border-radius: 16px; border-width: 3px; }
  .char-thumb { border-radius: 11px; border-width: 2px; }
  .char-name { font-size: 14px; }
  .char-status { font-size: 11.5px; }
  .char-status .icon { width: 13px; height: 13px; }
  .char-lock { width: 40px; height: 40px; }
  .char-lock .icon { width: 20px; height: 20px; }
  .fav-card { grid-template-columns: 116px minmax(0, 1fr); gap: 12px; padding: 10px; }
  .fav-name { font-size: 25px; }
  .fav-info .btn { min-height: 48px; padding: 0 14px; font-size: 17px; }

  /* Designer: the turnable preview stays on top, name and Search again beside it */
  .modal-designer { height: calc(100vh - var(--safe-t) - 12px); height: calc(100dvh - var(--safe-t) - 12px); }
  .designer { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .design-preview {
    top: -14px; z-index: 3; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; gap: 12px;
    margin: -14px -14px 0; padding: 10px 14px; background: var(--paper); border-bottom: 3px solid var(--ink);
  }
  .preview-frame { width: 156px; height: 168px; border-radius: 20px; }
  .turn-btn { width: 36px; height: 36px; bottom: 6px; border-radius: 11px; }
  .turn-left { left: 6px; }
  .turn-right { right: 6px; }
  .turn-btn .icon { width: 20px; height: 20px; }
  .drag-hint { bottom: 50px; font-size: 11px; }
  .preview-info { justify-items: start; text-align: left; gap: 8px; }
  .preview-name { text-align: left; font-size: 24px; }
  .design-tabs { gap: 5px; margin-bottom: 12px; }
  .design-tab { min-height: 38px; padding: 0 11px; font-size: 15px; }
  .swatch { width: 46px; height: 46px; }
  .ds-fields { grid-template-columns: minmax(0, 1fr); }
  .ds-result { grid-template-columns: 96px minmax(0, 1fr); }
  .ds-name { font-size: 23px; }

  .rules b { font-size: 18px; }
  .rules span { font-size: 14px; }
  .reaction-face { width: 104px; height: 104px; }
  .reaction-face .icon { width: 74px; height: 74px; }
  .reaction-sub { font-size: 16px; }
  .perk { font-size: 17px; }
}

@keyframes sheet-up { from { transform: translateY(105%); } }
@keyframes sheet-down { to { transform: translateY(105%); } }

/* Short landscape phones: keep the math sheet and numpads small */
@media (max-height: 540px) {
  .numpad { grid-auto-rows: 42px; gap: 6px; }
  .key { font-size: 22px; }
  .key-ok { font-size: 18px; }
  .math-problem { font-size: 30px; }
  .answer-display { height: 52px; font-size: 30px; }
  .math-inner { padding: 10px 14px; gap: 12px; }
  .math-help { display: none; }
  .math-q-row { margin: 6px 0 0; }
  .hud-meter { display: none; }
  .reaction-face, .cele-badge { width: 84px; height: 84px; border-width: 5px; }
  .reaction-face .icon, .cele-badge .icon { width: 56px; height: 56px; }
  .reaction-word { font-size: clamp(72px, 18vh, 140px); }
}
@media (max-width: 640px) and (max-height: 540px) {
  .math-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Landscape phones: everything important must fit without scrolling */
@media (max-height: 540px) {
  .math-panel { bottom: calc(var(--safe-b) + 6px); width: min(720px, calc(100vw - 24px)); }
  .math-inner { grid-template-columns: minmax(0, 1fr) 260px; }
  .math-kicker { font-size: 13px; }

  .reaction-inner { gap: 6px; padding: calc(var(--safe-t) + 10px) 16px calc(var(--safe-b) + 10px); }
  .reaction-face { width: 60px; height: 60px; border-width: 4px; box-shadow: 0 5px 0 var(--ink); }
  .reaction-face .icon { width: 42px; height: 42px; }
  .reaction-word { font-size: clamp(54px, 16vh, 120px); }
  .reaction-line { font-size: 22px; margin: 0; }
  .reaction-sub { font-size: 15px; padding: 6px 12px; }
  .reaction-pick { display: none; }
  .screen-reaction .btn-big { min-height: 52px; font-size: 20px; margin-top: 2px; }

  .cele-inner { gap: 6px; padding: calc(var(--safe-t) + 10px) 16px calc(var(--safe-b) + 10px); }
  .cele-badge { width: 60px; height: 60px; border-width: 4px; box-shadow: 0 5px 0 var(--ink); }
  .cele-badge .icon { width: 38px; height: 38px; }
  .cele-kicker { font-size: 22px; margin: 0; }
  .cele-perks { margin: 2px 0; }
  .perk { font-size: 16px; padding: 5px 12px 5px 8px; }
  .cele-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 4px; }
  .cele-actions .btn-big { min-height: 52px; font-size: 20px; }

  .world-kicker { font-size: 20px; }

  .modal-layer { padding-top: calc(var(--safe-t) + 8px); padding-bottom: 0; }
  .modal { max-height: calc(100vh - var(--safe-t) - 8px); max-height: calc(100dvh - var(--safe-t) - 8px); }
  .modal-head { padding: 6px 8px 6px 10px; gap: 8px; }
  .modal-icon { width: 40px; height: 40px; border-radius: 12px; }
  .modal-icon .icon { width: 24px; height: 24px; }
  .modal-titles h2 { font-size: 24px; }
  .modal-titles p { display: none; }
  .modal-x { width: 44px; height: 44px; align-self: center; }
  .modal-body { padding: 10px 14px calc(var(--safe-b) + 12px); }
  .modal-foot { padding: 8px 14px calc(var(--safe-b) + 8px); }
  .modal-training .ladder-scroll { display: none; }
  .train-bar { margin-bottom: 8px; }
  .train-bar-top { margin-bottom: 4px; }
  .barcode { height: 28px; }
  .train-play { grid-template-columns: minmax(0, 1fr) 260px; gap: 14px; }
  .train-problem { min-height: 60px; padding: 6px; font-size: 36px; border-width: 5px; }
  .train-left { gap: 6px; }
  .train-left .answer-display { height: 50px; font-size: 30px; }
  .train-feedback { min-height: 22px; font-size: 17px; }
  .train-streak { padding: 2px 12px 2px 6px; }
  /* Designer: preview column stays put (sticky) while the options scroll */
  .modal-designer { height: calc(100vh - var(--safe-t) - 8px); height: calc(100dvh - var(--safe-t) - 8px); }
  .designer { grid-template-columns: 178px minmax(0, 1fr); gap: 14px; }
  .design-preview {
    position: sticky; top: 0; align-self: start; margin: 0; padding: 0; border: 0; background: transparent;
    display: grid; grid-template-columns: none; justify-items: center; gap: 6px;
  }
  .preview-frame { width: 172px; height: 150px; border-radius: 20px; }
  .modal-designer .modal-foot .btn { min-height: 46px; font-size: 19px; }
  .turn-btn { width: 34px; height: 34px; bottom: 6px; border-radius: 10px; }
  .turn-left { left: 6px; }
  .turn-right { right: 6px; }
  .turn-btn .icon { width: 19px; height: 19px; }
  .drag-hint { bottom: 46px; font-size: 11px; }
  .preview-info { gap: 4px; justify-items: center; }
  .preview-name { font-size: 18px; line-height: 1.05; }
  .preview-movie { display: none; }
  .btn-search { min-height: 38px; font-size: 14px; padding: 0 10px; }
  .design-tabs { gap: 5px; margin-bottom: 10px; }
  .design-tab { min-height: 36px; padding: 0 10px; font-size: 15px; }
  .design-row { margin-bottom: 12px; }
  .design-label { margin-bottom: 4px; font-size: 15px; }
  .swatch { width: 42px; height: 42px; }
  .chip-opt { min-height: 40px; }
  .ds-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .design-search { gap: 8px; padding: 10px; }
  .design-search .search-orb { width: 80px; height: 80px; }
  .ds-field .text-input { height: 44px; }
  .ds-result { grid-template-columns: 92px minmax(0, 1fr); }

  /* Shop: ladder and the deal side by side so Buy is visible straight away; what coins do below */
  .modal-body.shop {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-areas: "top top" "title next" "ladder next" "uses uses";
    grid-template-rows: auto auto 1fr auto;
  }
  .shop-top { margin-bottom: 2px; }
  .balance { font-size: 26px; }
  .balance .icon { width: 30px; height: 30px; }
  .shop-sec-title { font-size: 18px; }
  .shop-sec-title span { display: none; }
  .pw-step { height: 128px; }
  .step-bar { height: calc(var(--h) * 0.9px); }
  .step-val { font-size: 12px; }
  .is-now .step-val { font-size: 13px; }
  .step-val.is-long { font-size: 10.5px; }
  .step-tag { font-size: 10px; padding: 0 4px; }
  .shop-next { margin-top: 4px; gap: 8px; padding: 10px; align-self: start; }
  .deal-num { font-size: 28px; }
  .shop .btn-buy { min-height: 52px; font-size: 19px; }
  .shop .coin-uses { margin-top: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .shop .uses-title, .shop .skip-status { grid-column: 1 / -1; }
  .shop .use-rules { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }

  /* Movie result: two columns so everything fits without scrolling */
  .movie-inner { padding: calc(var(--safe-t) + 8px) 12px calc(var(--safe-b) + 8px); }
  .movie-search { gap: 8px; }
  .search-orb { width: 92px; height: 92px; }
  .orb-globe { inset: 14px; border-width: 4px; }
  .search-title { font-size: 26px; }
  .search-sub { font-size: 15px; }
  .search-lines li { min-height: 34px; padding: 4px 10px; font-size: 14px; }
  /* Only the result card is a two-column grid: its grid-area rules are scoped to it (the designer's search
     result reuses .movie-kicker, and the fix form is a plain one-column .movie-card). */
  .movie-card { padding: 12px; gap: 8px; }
  .movie-card.is-result {
    width: min(860px, 100%); gap: 8px 14px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-areas: "kick char" "film char" "foot go";
    align-items: start;
  }
  .movie-kicker { font-size: 17px; }
  .movie-card.is-result .movie-kicker { grid-area: kick; }
  .movie-card.is-result .movie-film { grid-area: film; padding: 10px; }
  .film-title { font-size: 22px; }
  .film-sum { -webkit-line-clamp: 4; font-size: 14px; }
  .movie-card.is-result .movie-char { grid-area: char; grid-template-columns: 128px minmax(0, 1fr); gap: 10px; padding: 10px; }
  .movie-char-name { font-size: 28px; }
  .movie-char-from { font-size: 13px; }
  .unlock-badge { font-size: 15px; }
  .movie-char-sum { font-size: 14px; -webkit-line-clamp: 3; }
  .movie-card.is-result .movie-foot { grid-area: foot; align-self: center; }
  .movie-card.is-result .movie-go { grid-area: go; min-height: 52px; font-size: 20px; justify-self: stretch; }
  .movie-card.movie-fixcard { width: min(640px, 100%); }
  .movie-fixcard .ds-field .text-input { height: 44px; }

  /* Rank-up: room for the new-look stickers */
  .cele-kicker { display: none; }
  .cele-inner { gap: 5px; }
  .cele-badge { width: 46px; height: 46px; border-width: 4px; box-shadow: 0 4px 0 var(--ink); }
  .cele-badge .icon { width: 28px; height: 28px; }
  .cele-rank { font-size: clamp(36px, min(calc((100vw - 56px) / (var(--len) * 0.66)), 17vh), 124px); }
  .cele-new { gap: 8px; margin: 0; }
  .new-card { width: min(104px, 24vh); padding: 3px 3px 5px; border-width: 3px; border-radius: 13px; gap: 2px; }
  .new-name { font-size: 12px; }
  .cele-new.is-fav .new-card { width: min(128px, 30vh); }
  .cele-new.is-fav .new-name { font-size: 14px; }

  .world-sub { font-size: 16px; }
  .world-tip { font-size: 14px; }
  /* Toasts fit between the HUD columns (rank card on the left, coins on the right) */
  .hud-player { max-width: 284px; }
  .toasts { top: calc(var(--safe-t) + 10px); max-width: max(232px, calc(100vw - 600px)); }
  .toast { padding: 5px 12px 5px 8px; font-size: 15px; }
  .toast .icon { width: 22px; height: 22px; }
  #ui-root.has-math .toasts { top: calc(var(--safe-t) + 8px); bottom: auto; }
  #ui-root.has-modal .toasts { max-width: min(460px, calc(100vw - 32px)); }
  .math-top { flex-wrap: nowrap; }
  .btn-skip { min-height: 36px; font-size: 15px; }
  /* The math panel has its own Skip button: the HUD skip and per-gate chips step aside (they would sit on it). */
  #ui-root.has-math .chip-skip, #ui-root.has-math .chip-per { visibility: hidden; }
}

/* Landscape phones: logo beside the form */
@media (max-height: 540px) and (min-width: 600px) {
  .start-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 20px; align-items: center; }
  /* v6 Who's playing?: a wider card and compact player cards, so a whole row shows on a short screen */
  .start-wrap.has-picker { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); }
  .pk-title .icon { width: 30px; height: 30px; }
  .start-card.is-picker { max-width: clamp(420px, calc(var(--n, 9) * 136px + (var(--n, 9) - 1) * 10px + 40px), 520px); }
  .pk-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); max-width: calc(var(--n, 9) * 136px + (var(--n, 9) - 1) * 10px); gap: 18px 10px; padding-top: 6px; }
  .pk-play { gap: 4px; padding: 8px 6px 9px; border-radius: 16px; }
  .pk-thumb { width: min(100%, 80px); border-radius: 12px; }
  .pk-name { font-size: 19px; }
  .pk-rank { font-size: 11px; padding: 0 5px; letter-spacing: 0.01em; }
  .pk-meta { font-size: 13px; gap: 0 8px; }
  .pk-meta .icon { width: 16px; height: 16px; }
  .pk-add-art { width: 52px; height: 52px; margin: 2px 0; }
  .pk-add-art .icon { width: 30px; height: 30px; }
  .pk-add .pk-name { font-size: 17px; }
  .pk-sub { font-size: 12px; }
  /* narrow cards: the "Last played" ribbon moves to the bottom edge, clear of the delete button */
  .pk-last { top: auto; bottom: -11px; left: 50%; transform: translateX(-50%); font-size: 12px; }
  .pk-card.is-last .pk-play { padding-bottom: 14px; }
  .pk-note { font-size: 14px; padding: 8px 10px; }
  .pk-confirm { padding: 12px; gap: 10px; }
  .pkc-top { grid-template-columns: 72px minmax(0, 1fr); }
  .pkc-thumb { width: 72px; }
  .pkc-words .card-title { font-size: 22px; }
  .logo-ch { font-size: clamp(44px, 15vh, 80px); }
  .tagline { font-size: 18px; }
  .start-card { padding: 14px 16px 16px; }
  .card-title { font-size: 24px; margin-bottom: 8px; }
  .stepper { margin-bottom: 6px; }
  .text-input { height: 48px; font-size: 19px; }
  .pick { padding: 6px 8px; grid-template-columns: auto 1fr; justify-items: start; align-items: center; gap: 8px; }
  .pick-art { width: 44px; height: 44px; }
  .pick-art .icon { width: 28px; height: 28px; }
  .pick-name { font-size: 20px; }
  .field { margin-bottom: 10px; }
  .btn-big { min-height: 54px; }
  .hills { height: 90px; }
}

/* ------------------------------------------------------------------ */
/* Touch screens: every small control is at least a 44 px target       */
/* ------------------------------------------------------------------ */

#ui-root.is-touch .btn-skip, #ui-root.is-touch .design-tab, #ui-root.is-touch .btn-search,
#ui-root.is-touch .btn-newlooks, #ui-root.is-touch .btn-paper { min-height: 44px; }
#ui-root.is-touch .turn-btn { width: 44px; height: 44px; }
#ui-root.is-touch .drag-hint { bottom: 56px; }
@media (pointer: coarse) {
  #ui-root .btn-skip, #ui-root .design-tab, #ui-root .btn-search, #ui-root .btn-newlooks, #ui-root .btn-paper { min-height: 44px; }
  #ui-root .turn-btn { width: 44px; height: 44px; }
}

/* ------------------------------------------------------------------ */
/* Reduced motion: keep the moments, drop the movement                 */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
  }
  .confetti i { top: var(--y); animation: none !important; }
  .reaction-bg, .cele-rays, .world-stripes { animation: none !important; }
}

/* ================================================================== */
/* v5: answer kinds (decimal comma, fraction bar, choice buttons)      */
/* ================================================================== */

.numpad.has-x1 .key-zero { grid-column: span 2; }
.numpad.has-x2 .key-zero { grid-column: span 1; }
.key-comma, .key-slash { font-size: 34px; }
.answer-unit { flex: none; margin-left: 2px; font-size: 0.62em; color: var(--ink-2); }
.answer-display.is-choice .caret { display: none; }

/* Choice problems: 2-4 big answer buttons where the keys usually are. */
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choices-3 .choice:last-child, .choices-5 .choice:last-child { grid-column: span 2; }
.key.choice {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 74px; padding: 10px 12px;
  border-width: var(--line); border-radius: 18px; box-shadow: 0 5px 0 var(--ink);
  font-size: 28px; line-height: 1.05; text-align: center; overflow-wrap: anywhere;
}
.choice-text { min-width: 0; }
.choice-kbd { position: absolute; top: 5px; left: 6px; min-width: 20px; height: 20px; padding: 0 4px; font-size: 11px; border-bottom-width: 3px; }
.is-touch .choice-kbd { display: none; }
.key.choice.is-picked { background: var(--sun); }
.key.choice.is-right { background: var(--grass); color: #fff; text-shadow: var(--o-sm); }
.key.choice.is-picked:not(.is-right) { animation: shake 0.3s ease; }
.math-panel.is-correct .key.choice.is-picked, .train-play.is-correct .key.choice.is-picked { background: var(--grass); color: #fff; text-shadow: var(--o-sm); }

/* Long word problems: smaller type so they fit (ui.js adds is-long / is-xlong). */
.math-problem.is-long, .lab-q.is-long { font-size: clamp(22px, 3.4vw, 32px); line-height: 1.12; }
.math-problem.is-xlong, .lab-q.is-xlong { font-family: var(--font-body); font-weight: 800; font-size: clamp(16px, 2.2vw, 21px); line-height: 1.25; }
.train-problem.is-long { font-size: clamp(24px, 3.8vw, 34px); line-height: 1.12; }
.train-problem.is-xlong { font-family: var(--font-body); font-weight: 800; font-size: clamp(17px, 2.4vw, 22px); line-height: 1.3; }
.paper-problem.is-long { font-size: clamp(20px, 3vw, 30px); line-height: 1.15; }
.paper-problem.is-xlong { font-family: var(--font-body); font-weight: 800; font-size: clamp(15px, 2vw, 20px); line-height: 1.3; }

/* The Paper's own answer box: the extra key, and choice buttons. */
.paper-answer.has-x { grid-template-areas: "disp disp disp disp" "k1 k2 k3 kb" "k4 k5 k6 km" "k7 k8 k9 ok" "k0 k0 kx ok"; }
.paper-answer .key-x { grid-area: kx; }
.paper-answer.is-choice { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "disp disp"; grid-auto-rows: minmax(56px, auto); }
.paper-answer.is-choice .key.choice { min-height: 56px; font-size: 22px; }
.paper-answer.is-choice.choices-3 .choice:last-child { grid-column: span 2; }
@media (max-width: 640px) and (min-height: 541px) {
  .paper-answer.has-x {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-areas: "disp disp disp disp disp ok ok" "k1 k2 k3 k4 k5 kx km" "k6 k7 k8 k9 k0 kb kb";
  }
  .paper-answer.is-choice { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "disp disp"; grid-template-rows: 50px; grid-auto-rows: 50px; }
  .paper-answer.is-choice .key.choice { min-height: 0; font-size: 20px; }
}
@media (max-width: 640px) {
  .key.choice { min-height: 58px; font-size: 24px; border-radius: 16px; }
}
@media (max-height: 540px) {
  .key.choice { min-height: 46px; padding: 4px 8px; font-size: 21px; border-width: 3px; border-radius: 14px; box-shadow: 0 4px 0 var(--ink); }
  .choices { gap: 7px; }
  .paper-answer.is-choice { grid-auto-rows: minmax(44px, auto); }
}

/* ================================================================== */
/* v5: Character Lab                                                   */
/* ================================================================== */

.screen-lab {
  z-index: 34;
  overflow: hidden;
  background-color: #8a5cff;
  background-image: var(--math-pattern), linear-gradient(155deg, #6f5cff 0%, #a66bff 42%, #ff6fb5 100%);
  background-size: 180px 180px, 100% 100%;
}
.screen-lab.is-open { animation: lab-in 0.32s cubic-bezier(0.2, 1.2, 0.4, 1); }
@keyframes lab-in { from { opacity: 0; transform: scale(1.03); } }

.lab-shell {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "bar bar" "stage lib";
  gap: 14px 16px;
  padding: calc(var(--safe-t) + 12px) calc(var(--safe-r) + 16px) calc(var(--safe-b) + 18px) calc(var(--safe-l) + 16px);
  outline: none;
}

/* Top bar: title, the adjustment meter, Wear it, close */
.lab-bar { grid-area: bar; display: flex; align-items: center; gap: 12px; min-width: 0; }
.lab-title { flex: none; display: flex; align-items: center; gap: 10px; }
.lab-badge {
  display: grid; place-items: center; width: 52px; height: 52px; flex: none;
  border: 3px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 0 4px 0 var(--ink);
}
.lab-badge .icon { width: 32px; height: 32px; color: #7a3df0; }
.lab-title h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: 1; color: #fff; text-shadow: var(--o-md); white-space: nowrap; }
.lt-short { display: none; }
.lab-meter {
  flex: 1 1 auto; min-width: 0; max-width: 470px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px; padding: 5px 16px 5px 7px;
  border: 3px solid var(--ink); border-radius: 999px; background: var(--paper); box-shadow: 0 4px 0 var(--ink);
}
.lab-pips { flex: none; display: flex; gap: 5px; }
.lab-pip {
  display: grid; place-items: center; width: 30px; height: 30px;
  border: 3px solid var(--ink); border-radius: 50%; background: var(--paper-2); color: transparent;
  transition: background-color 0.2s ease;
}
.lab-pip .icon { width: 18px; height: 18px; }
.lab-pip svg { stroke-width: 3.2; }
.lab-pip.is-on { background: var(--grass); color: #fff; animation: bump 0.4s cubic-bezier(0.2, 1.5, 0.4, 1); }
.lab-pip-math { background: #fff3c4; color: var(--ink); border-style: dashed; }
.lab-meter.is-math .lab-pip-math { background: var(--sun); border-style: solid; animation: lab-pulse 1.1s ease-in-out infinite; }
@keyframes lab-pulse { 50% { transform: scale(1.14); } }
.lab-meter-text { min-width: 0; font-family: var(--font-display); font-size: 17px; line-height: 1.1; }
.lab-meter.is-math .lab-meter-text { color: var(--coral-d); }
.lm-short { display: none; }
.lab-wear { flex: none; min-height: 54px; font-size: 21px; }
.lab-wear .icon { width: 26px; height: 26px; }
.lab-x { flex: none; }

/* The stage: the live 3D character */
.lab-stage {
  grid-area: stage;
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: var(--line) solid var(--ink);
  border-radius: 30px;
  background:
    radial-gradient(60% 9% at 50% 88%, rgba(29, 27, 51, 0.16) 0%, rgba(29, 27, 51, 0) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 70%, rgba(122, 92, 255, 0.16) 70.2%, rgba(122, 92, 255, 0.24) 100%),
    radial-gradient(110% 75% at 50% 32%, #ffffff 0%, #eef4ff 42%, #c7dcff 100%);
  box-shadow: 0 8px 0 var(--ink);
  touch-action: none;
  cursor: grab;
  transition: box-shadow 0.15s ease;
}
.lab-stage.is-turning { cursor: grabbing; }
.lab-view { position: absolute; top: 66px; right: 0; bottom: 66px; left: 0; z-index: 1; }
.lab-canvas { display: block; width: 100%; height: 100%; }
.lab-stage.is-changed::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 60%);
  animation: lab-flash 0.5s ease forwards;
}
@keyframes lab-flash { from { opacity: 1; } to { opacity: 0; } }
.lab-stage.no-3d .lab-view::before {
  content: "3D preview not available"; position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 20px; color: var(--ink-3);
}

.lab-stage-top {
  position: absolute; top: 12px; left: 12px; right: 12px; z-index: 3;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  pointer-events: none;
}
.lab-stage-top > * { pointer-events: auto; }
.lab-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lab-tool { width: 46px; height: 46px; }
.lab-tool .icon { width: 24px; height: 24px; }
.lab-tool[disabled] { opacity: 0.4; cursor: default; transform: none; box-shadow: 0 4px 0 var(--ink); }
.lab-random { min-height: 46px; }
.lab-slots { display: flex; gap: 6px; }
.lab-slot {
  position: relative; display: grid; place-items: center; width: 56px; height: 64px; padding: 0; overflow: hidden;
  border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 0 4px 0 var(--ink);
  cursor: pointer; touch-action: manipulation; transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.lab-slot b {
  position: absolute; left: 3px; top: 2px; z-index: 1; display: grid; place-items: center; min-width: 20px; height: 20px;
  border-radius: 7px; background: var(--ink); color: #fff; font-family: var(--font-display); font-weight: 400; font-size: 13px;
}
.lab-slot-pic { position: absolute; inset: 0; display: grid; place-items: center; }
.lab-slot-pic img { width: 100%; height: 100%; object-fit: contain; }
.lab-slot.is-empty { border-style: dashed; background: rgba(255, 255, 255, 0.7); }
.lab-slot.is-on { background: var(--sun); transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.lab-slot.is-on b { background: var(--blue-d); }
.lab-slot:focus-visible, .lab-tab:focus-visible, .lab-card:focus-visible, .lab-swatch:focus-visible, .lab-pose:focus-visible,
.lab-cslot:focus-visible { outline: 4px solid var(--blue); outline-offset: 3px; }

.lab-tip {
  position: absolute; left: 50%; bottom: 78px; z-index: 3; margin: 0; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 24px); padding: 4px 12px 4px 8px;
  border: 3px solid var(--ink); border-radius: 999px; background: rgba(255, 255, 255, 0.94);
  font-weight: 800; font-size: 14px; line-height: 1.15; white-space: nowrap; pointer-events: none;
  transition: opacity 0.3s ease;
}
.lab-tip .icon { width: 20px; height: 20px; color: var(--blue-d); }
.lab-tip > span:not(.icon) { overflow: hidden; text-overflow: ellipsis; }
.lab-stage.was-turned .lab-tip, .lab-stage.is-changed .lab-tip, .screen-lab.is-dragging .lab-tip { opacity: 0; }

.lab-zoom { position: absolute; right: 12px; top: 50%; z-index: 3; display: grid; gap: 8px; transform: translateY(-50%); }
.lab-poses {
  position: absolute; left: 50%; bottom: 12px; z-index: 3; transform: translateX(-50%);
  display: flex; gap: 4px; padding: 5px;
  border: 3px solid var(--ink); border-radius: 18px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 4px 0 var(--ink);
}
.lab-pose {
  display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 12px;
  border: 3px solid transparent; border-radius: 12px; background: transparent; color: var(--ink);
  font-family: var(--font-display); font-size: 16px; line-height: 1; cursor: pointer; touch-action: manipulation;
}
.lab-pose .icon { width: 22px; height: 22px; }
.lab-pose:hover { background: var(--paper-2); }
.lab-pose.is-on { background: var(--blue); border-color: var(--ink); color: #fff; text-shadow: var(--o-sm); }
.lab-pose.is-on .icon { filter: drop-shadow(0 2px 0 var(--ink)); }

/* Dragging a card: the stage becomes a drop zone; over it, it glows green. */
.lab-drop {
  position: absolute; inset: 10px; z-index: 2; display: grid; place-items: start center; padding-top: 72px;
  border: 5px dashed transparent; border-radius: 24px; opacity: 0; pointer-events: none;
  transition: opacity 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.lab-drop > span:not(.icon) {
  display: inline-flex; align-items: center; gap: 8px; max-width: 90%; padding: 6px 16px 6px 10px;
  border: 3px solid var(--ink); border-radius: 999px; background: var(--paper); box-shadow: 0 4px 0 var(--ink);
  font-family: var(--font-display); font-size: 18px; line-height: 1.1;
}
.lab-drop .icon { width: 24px; height: 24px; color: var(--blue-d); }
.lab-drop b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen-lab.is-dragging .lab-drop { opacity: 1; border-color: rgba(61, 139, 255, 0.55); }
.lab-stage.is-over .lab-drop { border-color: var(--grass); background: rgba(63, 207, 98, 0.13); }
.lab-stage.is-over .lab-drop > span:not(.icon) { background: var(--grass); color: #fff; text-shadow: var(--o-sm); }
.lab-stage.is-over .lab-drop .icon { color: #fff; }
.lab-stage.is-over { box-shadow: 0 8px 0 var(--ink), 0 0 0 6px rgba(63, 207, 98, 0.75); }

/* The library: category drawers on the left, the cards on the right */
.lab-lib {
  grid-area: lib;
  min-height: 0;
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "tabs head" "tabs grid";
  overflow: hidden;
  border: var(--line) solid var(--ink);
  border-radius: 30px;
  background: var(--paper);
  box-shadow: 0 8px 0 var(--ink);
}
.lab-tabs {
  grid-area: tabs;
  display: flex; flex-direction: column; gap: 5px; min-height: 0;
  padding: 10px 9px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  border-right: var(--line) solid var(--ink);
  background: var(--pink);
  scrollbar-width: thin;
}
.lab-tab {
  flex: none; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 38px; padding: 0 8px;
  border: 3px solid var(--ink); border-radius: 12px; background: var(--paper); color: var(--ink); box-shadow: 0 3px 0 var(--ink);
  font-family: var(--font-display); font-size: 15px; line-height: 1; text-align: left; white-space: nowrap;
  cursor: pointer; touch-action: manipulation; transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.12s ease;
}
.lab-tab .icon { width: 22px; height: 22px; }
.lab-tab > span:not(.icon) { overflow: hidden; text-overflow: ellipsis; }
.lab-tab:hover { background: #fff7fb; }
.lab-tab.is-on { background: var(--sun); transform: translateX(4px); box-shadow: 0 2px 0 var(--ink); }

.lab-lib-head {
  grid-area: head; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0;
  padding: 12px 14px 10px; border-bottom: 3px solid var(--paper-3);
}
.lab-cat-title { margin: 0; display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1; }
.lab-cat-title > .icon { width: 30px; height: 30px; color: #7a3df0; }
.lab-count {
  padding: 2px 9px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper-2);
  font-family: var(--font-body); font-weight: 800; font-size: 13px; line-height: 1.2;
}
.lab-colors { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; min-width: 0; }
.lab-colors-label { flex: none; display: grid; place-items: center; color: var(--ink-2); }
.lab-colors-label .icon { width: 24px; height: 24px; }
.lab-colors-note { flex: none; font-size: 13px; font-weight: 800; color: var(--ink-2); }
.lab-cslots { flex: none; display: inline-flex; overflow: hidden; border: 3px solid var(--ink); border-radius: 12px; }
.lab-cslot {
  min-height: 32px; padding: 0 10px; border: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-display); font-size: 14px; line-height: 1; cursor: pointer;
}
.lab-cslot + .lab-cslot { border-left: 3px solid var(--ink); }
.lab-cslot.is-on { background: var(--blue); color: #fff; text-shadow: var(--o-sm); }
.lab-swatches {
  flex: 1; min-width: 0; display: flex; gap: 7px; padding: 4px 3px 7px; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; overscroll-behavior: contain;
}
.lab-swatch {
  flex: none; width: 32px; height: 32px; padding: 0; border: 3px solid var(--ink); border-radius: 50%;
  background: var(--c); box-shadow: 0 3px 0 var(--ink); cursor: pointer; touch-action: manipulation;
  transition: transform 0.08s ease;
}
.lab-swatch:hover { transform: translateY(-2px); }
.lab-swatch.is-on { transform: scale(1.12); box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--blue); }
.lab-swatch[disabled] { opacity: 0.35; cursor: not-allowed; transform: none; }

.lab-grid {
  grid-area: grid;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  align-content: start;
  gap: 12px;
  padding: 14px 14px 18px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.screen-lab.is-dragging .lab-grid { overflow-y: hidden; }
.lab-card {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 5px; min-width: 0;
  padding: 8px 6px 9px; border: 3px solid var(--ink); border-radius: 18px; background: var(--paper); color: var(--ink);
  box-shadow: 0 4px 0 var(--ink); text-align: center; cursor: grab; touch-action: pan-y;
  -webkit-touch-callout: none; -webkit-user-drag: none;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.15s ease, opacity 0.15s ease;
}
.lab-card:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.lab-card:active { cursor: grabbing; }
.lab-card-pic {
  display: grid; place-items: center; width: 100%; max-width: 88px; aspect-ratio: 1; overflow: hidden;
  border-radius: 13px; background: radial-gradient(circle at 50% 40%, #ffffff 0%, var(--paper-2) 80%);
}
.lab-card-pic img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; animation: fade-in 0.2s ease; }
.lab-pic-fb {
  display: grid; place-items: center; width: 66%; aspect-ratio: 1; border: 3px solid var(--ink); border-radius: 50%;
  background: var(--c); color: var(--ink); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.12);
}
.lab-pic-fb .icon { width: 58%; height: 58%; padding: 2px; border-radius: 8px; background: rgba(255, 255, 255, 0.85); }
.lab-card-name {
  max-width: 100%; min-height: 2.2em; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  font-weight: 800; font-size: 13px; line-height: 1.1;
}
.lab-card-check {
  position: absolute; top: -9px; right: -9px; z-index: 1; display: none; place-items: center; width: 28px; height: 28px;
  border: 3px solid var(--ink); border-radius: 50%; background: var(--grass); color: #fff;
}
.lab-card-check .icon { width: 16px; height: 16px; }
.lab-card-check svg { stroke-width: 3.4; }
.lab-card.is-on { background: #dcfbe4; }
.lab-card.is-on .lab-card-check { display: grid; }
.lab-card.is-locked { background: #ece9f5; border-color: #6d6890; box-shadow: 0 4px 0 #8f8aa8; cursor: not-allowed; }
.lab-card.is-locked:hover { transform: none; }
.lab-card.is-locked .lab-card-pic { filter: grayscale(1) opacity(0.5); }
.lab-card.is-locked .lab-card-name { color: #6d6890; }
.lab-card-lock {
  position: absolute; top: 6px; left: 50%; z-index: 1; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 3px; max-width: calc(100% - 8px); padding: 1px 7px 1px 4px;
  border: 2px solid var(--ink); border-radius: 999px; background: var(--rank, #9c8f7a); color: #fff;
  font-family: var(--font-display); font-size: 11px; line-height: 1.3; letter-spacing: 0.03em; text-shadow: var(--o-sm); white-space: nowrap;
}
.lab-card-lock .icon { width: 13px; height: 13px; }
.lab-card.is-lifted { opacity: 0.4; transform: scale(0.94); }
.lab-empty { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 30px 0; font-weight: 800; color: var(--ink-3); }

/* The card in your hand while dragging */
.lab-ghost {
  position: fixed; left: 0; top: 0; z-index: 8; width: 112px; margin: -60px 0 0 -56px;
  display: grid; justify-items: center; gap: 4px; padding: 8px 6px;
  border: 3px solid var(--ink); border-radius: 18px; background: var(--paper);
  box-shadow: 0 16px 26px rgba(21, 17, 58, 0.35), 0 5px 0 var(--ink);
  rotate: -7deg; pointer-events: none; will-change: transform;
  transition: scale 0.15s ease, rotate 0.15s ease, border-color 0.15s ease;
}
.lab-ghost-pic { display: grid; place-items: center; width: 84px; height: 84px; overflow: hidden; border-radius: 13px; background: var(--paper-2); }
.lab-ghost-pic img { width: 100%; height: 100%; object-fit: contain; }
.lab-ghost-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; font-size: 12px; }
.lab-ghost.is-over { scale: 1.08; rotate: 4deg; border-color: var(--grass-d); }
.lab-ghost.is-match { box-shadow: 0 16px 26px rgba(21, 17, 58, 0.35), 0 5px 0 var(--ink), 0 0 0 6px rgba(63, 207, 98, 0.7); }
.lab-ghost.is-dropped { transition: scale 0.24s ease, opacity 0.24s ease; scale: 0.2; opacity: 0; }
.lab-ghost.is-back { transition: transform 0.26s ease, opacity 0.26s ease, scale 0.26s ease; scale: 0.7; opacity: 0; }

/* The math card (every third change) */
.lab-math { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 16px; }
.lab-math.is-open { animation: fade-in 0.2s ease; }
.lab-math.is-leaving { animation: fade-out 0.2s ease forwards; pointer-events: none; }
.lab-math-scrim { position: absolute; inset: 0; background: var(--scrim); }
.lab-math-card {
  position: relative; display: grid; gap: 10px; width: min(760px, 100%); max-height: 100%; overflow-x: hidden; overflow-y: auto;
  padding: 16px 18px; border: var(--line) solid var(--ink); border-radius: 28px; background: var(--paper);
  box-shadow: 0 10px 0 var(--ink); animation: modal-in 0.32s cubic-bezier(0.2, 1.35, 0.4, 1);
}
.lab-math-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lab-math-kicker {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 7px;
  border: 3px solid var(--ink); border-radius: 999px; background: var(--sun);
  font-family: var(--font-display); font-size: 17px; letter-spacing: 0.04em; text-transform: uppercase;
}
.lab-math-kicker .icon { width: 20px; height: 20px; }
.lab-math-tag { padding: 2px 10px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper-2); font-weight: 800; font-size: 13px; }
.lab-math-top .btn-paper { margin-left: auto; }
.lab-math-win {
  margin: 0; display: flex; align-items: center; gap: 12px; padding: 8px 12px;
  border: 3px dashed var(--sun-d); border-radius: 18px; background: #fff7d6;
  font-weight: 800; font-size: 14px; line-height: 1.2; color: var(--ink-2);
}
.lab-math-win b { display: block; margin-top: 2px; font-family: var(--font-display); font-weight: 400; font-size: 21px; color: var(--ink); }
.lab-win-pic {
  flex: none; display: grid; place-items: center; width: 54px; height: 54px; overflow: hidden;
  border: 3px solid var(--ink); border-radius: 14px; background: var(--paper);
}
.lab-win-pic img { width: 100%; height: 100%; object-fit: contain; }
.lab-win-pic.is-color { background: var(--c); border-radius: 50%; }
.lab-win-pic.is-icon .icon { width: 30px; height: 30px; color: #7a3df0; }
.lab-win-pic .lab-pic-fb { width: 80%; }
.lab-math-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: center; gap: 20px; }
.lab-math-main { display: grid; gap: 10px; min-width: 0; }
.lab-q { font-family: var(--font-display); font-size: clamp(34px, 5vw, 56px); line-height: 1.05; overflow-wrap: anywhere; }
.lab-math-foot { display: flex; }
.lab-math-card.is-submitting .answer-pad { opacity: 0.6; pointer-events: none; }
.lab-math-result {
  position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 10px;
  padding: 16px; border-radius: 24px; color: #fff; text-align: center; animation: pop 0.34s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.lab-math-result.good { background: var(--grass); }
.lab-math-result.bad { background: var(--coral); }
.lab-math-result b { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 5vw, 50px); line-height: 1.05; text-shadow: var(--o-md); }
.lmr-sub {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 14px; border: 3px solid var(--ink); border-radius: 14px;
  background: var(--paper); color: var(--ink); font-family: var(--font-display); font-size: 21px;
}
.lmr-sub .icon { width: 22px; height: 22px; color: var(--sun-d); }
.lab-burst { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }

/* Wardrobe: the Lab corner; pause menu: the Lab button */
.lab-entry {
  display: flex; align-items: stretch; gap: 14px; margin: 0 0 18px; padding: 12px;
  border: var(--line) solid var(--ink); border-radius: 24px; color: #fff;
  background: var(--math-pattern), linear-gradient(135deg, #7a5cff 0%, #a66bff 45%, #ff6fb5 100%);
  background-size: 140px 140px, 100% 100%;
  box-shadow: 0 6px 0 var(--ink);
}
.modal-body.wardrobe .lab-entry { grid-column: 1 / -1; }
.lab-entry .lab-look { flex: none; width: 140px; }
.lab-entry-info { flex: 1; min-width: 0; display: grid; align-content: center; gap: 8px; }
.lab-entry h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1; text-shadow: var(--o-md); }
.lab-entry h3 .icon { width: 32px; height: 32px; filter: drop-shadow(0 2px 0 var(--ink)); }
.lab-entry p { margin: 0; font-weight: 800; font-size: 15px; line-height: 1.25; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }
.btn-lab { background: var(--sun); color: var(--ink); }
.lab-entry .btn-lab { justify-self: start; }
.pause-list .btn-lab { background: linear-gradient(135deg, #8a5cff, #ff6fb5); color: #fff; text-shadow: var(--o-sm); }
.pause-list .btn-lab .icon { filter: drop-shadow(0 2px 0 var(--ink)); }

/* Tablets held upright: the same stack as an upright phone, with roomier sizes. */
@media (min-width: 641px) and (max-width: 1100px) and (orientation: portrait) and (min-height: 700px) {
  .lab-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(320px, 46%) minmax(0, 1fr); grid-template-areas: "bar" "stage" "lib"; }
  .lab-title h2 { display: none; }
  .lab-lib { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "tabs" "head" "grid"; }
  .lab-tabs { flex-direction: row; gap: 6px; padding: 8px; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: var(--line) solid var(--ink); }
  .lab-tab { flex-direction: column; justify-content: center; gap: 3px; width: 86px; min-height: 60px; padding: 4px 3px; font-size: 13px; text-align: center; }
  .lab-tab.is-on { transform: translateY(2px); }
}

/* Phones held upright: the character on top, the library below; tabs scroll sideways. */
@media (max-width: 640px) and (min-height: 541px) {
  .lab-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(230px, 41%) minmax(0, 1fr);
    grid-template-areas: "bar" "stage" "lib";
    gap: 9px;
    padding: calc(var(--safe-t) + 8px) calc(var(--safe-r) + 8px) calc(var(--safe-b) + 10px) calc(var(--safe-l) + 8px);
  }
  .lab-bar { gap: 8px; }
  .lab-title { display: none; }
  .lab-meter { max-width: none; min-height: 46px; padding: 3px 10px 3px 5px; gap: 6px; }
  .lab-pip { width: 24px; height: 24px; border-width: 2.5px; }
  .lab-pip .icon { width: 14px; height: 14px; }
  .lab-meter-text { font-size: 14px; line-height: 1.05; }
  .lm-long { display: none; }
  .lm-short { display: inline; }
  .lab-wear { min-height: 46px; padding: 0 12px; font-size: 17px; border-radius: 15px; }
  .lab-wear .icon { width: 22px; height: 22px; }
  .lab-x { width: 44px; height: 44px; }
  .lab-stage, .lab-lib { border-radius: 22px; box-shadow: 0 5px 0 var(--ink); }
  .lab-stage-top { top: 8px; left: 8px; right: 8px; }
  .lab-view { top: 54px; bottom: 54px; }
  .lab-tools { gap: 6px; }
  .lab-tool { width: 42px; height: 42px; border-radius: 13px; }
  .lab-random { min-height: 42px; width: 42px; padding: 0; }
  .lab-random > span:not(.icon) { display: none; }
  .lab-slots { gap: 5px; }
  .lab-slot { width: 42px; height: 48px; border-radius: 12px; }
  .lab-slot b { min-width: 17px; height: 17px; font-size: 11px; }
  .lab-tip, .lab-zoom { display: none; }
  .lab-poses { bottom: 8px; padding: 4px; gap: 2px; border-radius: 15px; }
  .lab-pose { min-height: 40px; padding: 0 9px; }
  .lab-pose > span:not(.icon) { display: none; }
  .lab-drop { padding-top: 60px; }
  .lab-drop > span:not(.icon) { font-size: 15px; }
  .lab-lib { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "tabs" "head" "grid"; }
  .lab-tabs {
    flex-direction: row; gap: 5px; padding: 7px; overflow-x: auto; overflow-y: hidden;
    border-right: 0; border-bottom: var(--line) solid var(--ink); scrollbar-width: none;
  }
  .lab-tabs::-webkit-scrollbar { display: none; }
  .lab-tab { flex-direction: column; justify-content: center; gap: 2px; width: 70px; min-height: 52px; padding: 3px 2px; font-size: 11px; text-align: center; }
  .lab-tab > span:not(.icon) { max-width: 100%; }
  .lab-tab.is-on { transform: translateY(2px); }
  .lab-lib-head { padding: 7px 10px; gap: 6px 10px; }
  .lab-cat-title { font-size: 20px; }
  .lab-cat-title > .icon { width: 24px; height: 24px; }
  .lab-colors { flex-basis: 100%; }
  .lab-swatch { width: 30px; height: 30px; }
  .lab-grid { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 9px; padding: 10px 9px 14px; }
  .lab-card { padding: 6px 4px 7px; border-radius: 15px; }
  .lab-card-name { font-size: 12px; }
  .lab-math { padding: 8px; place-items: end center; }
  .lab-math-card { padding: 12px; gap: 8px; border-radius: 24px; }
  .lab-math-body { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .lab-math-top { gap: 6px; }
  .lab-math-kicker { font-size: 14px; padding: 2px 9px 2px 5px; }
  .lab-math-kicker .icon { width: 17px; height: 17px; }
  .lab-math-tag { font-size: 12px; padding: 1px 8px; }
  .lab-math-top .btn-paper { min-height: 38px; }
  .lab-math-win { padding: 6px 10px; gap: 10px; }
  .lab-math-win b { font-size: 18px; }
  .lab-win-pic { width: 44px; height: 44px; }
  .lab-q { font-size: clamp(30px, 9vw, 42px); }
  .lab-math-card .math-help { display: none; }
  .lab-math-card .answer-display { height: 58px; font-size: 34px; }
  .lab-entry { flex-direction: row; gap: 10px; padding: 10px; }
  .lab-entry .lab-look { width: 108px; }
  .lab-entry h3 { font-size: 23px; }
  .lab-entry p { font-size: 13px; }
}
@media (max-width: 380px) and (min-height: 541px) {
  .lab-meter-text { font-size: 12px; }
  .lab-wear > span:not(.icon) { display: none; }
  .lab-wear { padding: 0 10px; }
}

/* Phones held sideways: the character on the left, the library on the right with a slim drawer column. */
@media (max-height: 540px) {
  .lab-shell {
    grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "stage bar" "stage lib";
    gap: 7px 10px;
    padding: calc(var(--safe-t) + 6px) calc(var(--safe-r) + 8px) calc(var(--safe-b) + 8px) calc(var(--safe-l) + 8px);
  }
  .lab-bar { gap: 7px; }
  .lab-badge { width: 40px; height: 40px; border-radius: 12px; }
  .lab-badge .icon { width: 25px; height: 25px; }
  .lab-title h2 { display: none; }
  .lab-meter { padding: 3px 10px 3px 4px; gap: 6px; }
  .lab-pip { width: 22px; height: 22px; border-width: 2.5px; }
  .lab-pip .icon { width: 13px; height: 13px; }
  .lab-meter-text { font-size: 14px; }
  .lm-long { display: none; }
  .lm-short { display: inline; }
  .lab-wear { min-height: 42px; padding: 0 12px; font-size: 16px; border-radius: 14px; box-shadow: 0 4px 0 var(--ink); }
  .lab-wear .icon { width: 21px; height: 21px; }
  .lab-x { width: 42px; height: 42px; }
  .lab-stage, .lab-lib { border-radius: 20px; box-shadow: 0 5px 0 var(--ink); }
  .lab-stage-top { top: 7px; left: 7px; right: 7px; }
  .lab-view { top: 48px; bottom: 48px; }
  .lab-tools { gap: 5px; }
  .lab-tool { width: 38px; height: 38px; border-radius: 12px; border-width: 3px; }
  .lab-tool .icon { width: 21px; height: 21px; }
  .lab-random { min-height: 38px; width: 38px; padding: 0; }
  .lab-random > span:not(.icon) { display: none; }
  .lab-slots { gap: 4px; }
  .lab-slot { width: 36px; height: 42px; border-radius: 11px; }
  .lab-slot b { min-width: 16px; height: 16px; font-size: 10px; }
  .lab-tip, .lab-zoom { display: none; }
  .lab-poses { bottom: 7px; padding: 3px; gap: 2px; border-radius: 14px; }
  .lab-pose { min-height: 36px; padding: 0 8px; }
  .lab-pose > span:not(.icon) { display: none; }
  .lab-drop { padding-top: 54px; }
  .lab-drop > span:not(.icon) { font-size: 14px; }
  .lab-lib { grid-template-columns: 60px minmax(0, 1fr); }
  .lab-tabs { padding: 6px 5px; gap: 4px; scrollbar-width: none; }
  .lab-tabs::-webkit-scrollbar { display: none; }
  .lab-tab { justify-content: center; min-height: 40px; padding: 0; }
  .lab-tab > span:not(.icon) { display: none; }
  .lab-tab .icon { width: 24px; height: 24px; }
  .lab-tab.is-on { transform: translateX(2px); }
  .lab-lib-head { padding: 6px 10px; gap: 4px 10px; flex-wrap: nowrap; }
  .lab-cat-title { flex: none; font-size: 18px; }
  .lab-cat-title > .icon { display: none; }
  .lab-count { font-size: 11px; padding: 1px 6px; }
  .lab-colors { flex: 1 1 auto; }
  .lab-colors-label { display: none; }
  .lab-cslot { min-height: 28px; padding: 0 7px; font-size: 12px; }
  .lab-swatch { width: 28px; height: 28px; }
  .lab-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; padding: 9px 9px 12px; }
  .lab-card { padding: 5px 4px 6px; border-radius: 14px; gap: 3px; }
  .lab-card-pic { max-width: 64px; }
  .lab-card-name { font-size: 11px; }
  .lab-math { padding: 6px; }
  .lab-math-card { padding: 10px 12px; gap: 6px; border-radius: 22px; width: min(720px, 100%); }
  .lab-math-body { grid-template-columns: minmax(0, 1fr) 250px; gap: 12px; }
  .lab-math-win { padding: 4px 10px; font-size: 12px; }
  .lab-math-win b { font-size: 16px; }
  .lab-win-pic { width: 36px; height: 36px; border-radius: 10px; }
  .lab-math-kicker { font-size: 14px; padding: 1px 10px 1px 5px; }
  .lab-q { font-size: 30px; }
  .lab-math-card .math-help { display: none; }
  .lab-math-foot .btn { min-height: 38px; }
  .lab-math-result b { font-size: 30px; }
  .lmr-sub { font-size: 17px; }
}
@media (max-height: 540px) and (max-width: 700px) {
  .lab-meter-text { font-size: 12px; }
  .lab-wear > span:not(.icon) { display: none; }
}
@media (pointer: coarse) {
  .lab-tool { min-width: 40px; min-height: 40px; }
  .icon-btn { width: 48px; height: 48px; }
  .answer-pad .key { min-height: 54px; }
}

.icon-btn.is-active {
  background: var(--sun);
  color: var(--ink);
}