* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #14162b;
  overflow: hidden;
  font-family: "Trebuchet MS", "Segoe UI", "Segoe UI Emoji", sans-serif;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The stage keeps a 16:9 shape; game.js sets its font-size so em units scale with it. */
#stage {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  aspect-ratio: 16 / 9;
  font-size: 16px;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
}

#topbar {
  position: absolute;
  top: 1em;
  right: 1em;
  display: flex;
  gap: 0.5em;
}

#topbar button {
  width: 2.6em;
  height: 2.6em;
  font-size: 1em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
}

#touch {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1em;
  padding: 0 1.2em;
  display: none;
  justify-content: space-between;
  pointer-events: none;
}

#touch.show { display: flex; }

#touch button {
  pointer-events: auto;
  width: 4.2em;
  height: 4.2em;
  margin-right: 0.6em;
  font-size: 1.3em;
  border-radius: 50%;
  color: #fff;
  background: rgba(20, 22, 43, 0.45);
  border: 0.15em solid rgba(255, 255, 255, 0.7);
}

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5em 2em;
  text-align: center;
  color: #fff;
  background: rgba(20, 22, 43, 0.82);
}

.hidden { display: none; }

h1 {
  margin: 0;
  font-size: 3em;
  color: #ffd84a;
  text-shadow: 0.06em 0.06em 0 #c2410c;
}

.sub {
  margin: 0.5em 0 1em;
  font-size: 1.15em;
}

.keys {
  margin: 1.1em 0 0;
  font-size: 0.9em;
  opacity: 0.8;
}

#levelGrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7em;
  width: 100%;
}

#who {
  position: absolute;
  top: 1em;
  left: 1em;
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-size: 1.1em;
  font-weight: bold;
}

#who button, .row .small {
  padding: 0.4em 0.8em;
  font-size: 0.85em;
  font-weight: bold;
  border-radius: 0.6em;
  color: #1c1d33;
  background: rgba(255, 255, 255, 0.85);
}

#profileList {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  margin: 1.2em 0;
  max-height: 55%;
  overflow-y: auto;
  padding: 0.3em;
}

.row {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.row .player {
  width: 16em;
  padding: 0.5em 1em;
  border-radius: 0.8em;
  font-size: 1.1em;
  color: #1c1d33;
  background: #e8f8ff;
  border-bottom: 0.25em solid rgba(0, 0, 0, 0.25);
}

.row .player.current { background: #ffd84a; }
.row .name { font-size: 1.3em; font-weight: bold; }
.row .small { width: 2.6em; height: 2.6em; padding: 0; }

#nameInput {
  width: 12em;
  padding: 0.4em 0.6em;
  font-family: inherit;
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  border: 0.15em solid #ffd84a;
  border-radius: 0.6em;
  user-select: text;
  -webkit-user-select: text;
}

#ageButtons {
  display: flex;
  gap: 0.6em;
}

.age {
  width: 2.6em;
  height: 2.6em;
  font-size: 1.5em;
  font-weight: bold;
  border-radius: 50%;
  color: #1c1d33;
  background: #e8f8ff;
}

.age.picked {
  background: #ffd84a;
  outline: 0.15em solid #fff;
}

#formHint { min-height: 1.3em; margin: 0.8em 0; color: #ffb199; opacity: 1; }

.row button:hover, .row button:focus-visible,
#who button:hover, #who button:focus-visible,
.age:hover, .age:focus-visible { outline: 0.15em solid #fff; }

.card {
  width: 10.6em;
  padding: 0.6em 0.4em 0.7em;
  border-radius: 0.9em;
  color: #1c1d33;
  border-bottom: 0.3em solid rgba(0, 0, 0, 0.25);
  font-size: 1em;
  line-height: 1.25;
}

.card:hover, .card:focus-visible {
  transform: translateY(-0.15em);
  outline: 0.2em solid #fff;
}

.card .num { font-size: 1.7em; font-weight: bold; }
.card .name { font-weight: bold; }
.card .topic { font-size: 0.85em; }
.card .ages { font-size: 0.8em; opacity: 0.75; }
.card .stars { font-size: 1.2em; letter-spacing: 0.1em; }

#progBody {
  display: flex;
  gap: 2em;
  width: 100%;
  margin: 1em 0;
  max-height: 62%;
  text-align: left;
}

#progBody .col {
  flex: 1;
  overflow-y: auto;
  padding-right: 0.5em;
}

#progBody h2 {
  margin: 0 0 0.5em;
  font-size: 1.3em;
  color: #ffd84a;
}

.stat { margin-bottom: 0.7em; }
.stat .name { font-weight: bold; }

.bar {
  height: 0.7em;
  margin: 0.2em 0;
  border-radius: 0.35em;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

.fill {
  height: 100%;
  border-radius: 0.35em;
  background: #58c04a;
}

.tricky {
  display: flex;
  justify-content: space-between;
  padding: 0.35em 0.7em;
  margin-bottom: 0.35em;
  border-radius: 0.5em;
  font-weight: bold;
  background: rgba(255, 255, 255, 0.12);
}

.tricky .ages { font-weight: normal; }

#resStars {
  margin-top: 0.3em;
  font-size: 4em;
  letter-spacing: 0.15em;
  color: #ffd84a;
}

.buttons { display: flex; gap: 0.8em; }

.buttons button {
  padding: 0.6em 1.2em;
  font-size: 1.2em;
  font-weight: bold;
  border-radius: 0.7em;
  color: #1c1d33;
  background: #ffd84a;
  border-bottom: 0.25em solid #c98a00;
}

.buttons button:hover, .buttons button:focus-visible { outline: 0.2em solid #fff; }

/* ---- world menu extras ---- */

#menu h1 { font-size: 2.4em; }
#menu .sub { margin: 0.3em 0 0.7em; }

#levelGrid {
  max-height: 58%;
  overflow-y: auto;
  padding: 0.3em 0;
}

.card .tag {
  font-size: 0.75em;
  font-weight: bold;
  color: #c2410c;
}

.card.locked {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 0.12em dashed rgba(255, 255, 255, 0.5);
  cursor: default;
}

.card.locked:hover { transform: none; outline: none; }

.buttons.small { margin-top: 0.8em; }
.buttons.small button { padding: 0.4em 0.9em; font-size: 1em; }
.keys { margin-top: 0.7em; }

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

#shopBody { width: 100%; }

#shopBody h2, #speedBody h2 {
  margin: 0.5em 0 0.4em;
  font-size: 1.2em;
  color: #ffd84a;
}

.shelf {
  display: flex;
  justify-content: center;
  gap: 0.6em;
}

.item {
  width: 7.4em;
  padding: 0.5em 0.3em;
  border-radius: 0.8em;
  color: #1c1d33;
  background: #e8f8ff;
  border-bottom: 0.25em solid rgba(0, 0, 0, 0.25);
  font-size: 1em;
  line-height: 1.3;
}

.item.wearing { background: #ffd84a; }
.item:hover, .item:focus-visible { outline: 0.15em solid #fff; }
.item .name { font-weight: bold; }
.item .price { font-size: 0.85em; }

.swatch {
  width: 2.2em;
  height: 2.2em;
  margin: 0 auto 0.2em;
  border-radius: 0.6em;
  font-size: 1.2em;
  line-height: 2.2em;
}

.swatch:not([style]) {
  width: 1.5em;
  height: 1.5em;
  font-size: 1.8em;
  line-height: 1.5em;
}

#shopHint { min-height: 1.3em; color: #ffb199; opacity: 1; }

/* ---- speed round ---- */

#speedBody {
  width: 100%;
  margin: 0.6em 0 1em;
}

.topics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6em;
  max-height: 16em;
  overflow-y: auto;
  padding: 0.3em;
}

.topics .item { width: 11em; }

.speedQ {
  margin: 0.2em 0 0.5em;
  font-size: 3em;
  font-weight: bold;
}

.speedInfo { font-size: 1.2em; }

.answers {
  display: flex;
  justify-content: center;
  gap: 1em;
  margin: 0.4em 0 0.6em;
}

.answers button {
  width: 4.2em;
  padding: 0.35em 0;
  font-size: 2.2em;
  font-weight: bold;
  border-radius: 0.5em;
  color: #fff;
  background: #3d8bff;
  border-bottom: 0.18em solid #1f5fc4;
}

.answers button:hover, .answers button:focus-visible { outline: 0.1em solid #fff; }

.answers button:disabled {
  background: #6b6f85;
  border-bottom-color: #4a4d61;
  cursor: default;
  outline: none;
}

.speedTime {
  font-size: 3.4em;
  font-weight: bold;
  color: #ffd84a;
}

/* ---- bonus questions and big coins ---- */

#quizBody { width: 100%; }

.card .bigs {
  font-size: 0.9em;
  letter-spacing: 0.25em;
  color: #c98a00;
}

/* ---- splash screen ---- */

#splash {
  justify-content: flex-start;
  padding-top: 2.6em;
  background: none;
}

.logo {
  font-size: 6em;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.02em;
  text-shadow: 0.05em 0.06em 0 #1c1d33;
  animation: bob 2.4s ease-in-out infinite;
}

.logo span:first-child { color: #ffd84a; }
.logo span:last-child { color: #ff8a3d; font-style: italic; }

.tagline {
  margin: 0.3em 0 0.9em;
  font-size: 1.6em;
  font-weight: bold;
  color: #1c1d33;
}

#btnStart {
  padding: 0.35em 1.4em;
  font-size: 2em;
  font-weight: bold;
  border-radius: 0.6em;
  color: #1c1d33;
  background: #ffd84a;
  border-bottom: 0.2em solid #c98a00;
  animation: pulse 1.6s ease-in-out infinite;
}

#btnStart:hover, #btnStart:focus-visible { outline: 0.12em solid #fff; }

#splash .keys { color: #1c1d33; opacity: 0.75; }

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-0.12em) rotate(1.5deg); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .logo, #btnStart { animation: none; }
}

/* ---- family sync ---- */

#familyBody {
  max-width: 34em;
  margin-bottom: 0.8em;
}

#familyBody .buttons {
  justify-content: center;
  flex-wrap: wrap;
  margin: 0.6em 0;
}

.familyCode {
  margin: 0.4em 0;
  padding: 0.4em 0.8em;
  font-family: Consolas, "Courier New", monospace;
  font-size: 2em;
  font-weight: bold;
  letter-spacing: 0.06em;
  border-radius: 0.4em;
  color: #1c1d33;
  background: #ffd84a;
  user-select: all;
  -webkit-user-select: all;
}

.familyInput {
  width: 18em;
  padding: 0.4em 0.6em;
  font-family: Consolas, "Courier New", monospace;
  font-size: 1.2em;
  text-align: center;
  text-transform: uppercase;
  border: 0.15em solid #ffd84a;
  border-radius: 0.5em;
  user-select: text;
  -webkit-user-select: text;
}

/* ---- tablets and phones ---- */

/* Fit the visible screen, not the area behind the browser's toolbars (where supported) */
html, body { height: 100dvh; }
#stage { width: min(100vw, calc(100dvh * 16 / 9)); }

body {
  -webkit-touch-callout: none;          /* no copy menu on a long press */
  -webkit-tap-highlight-color: transparent;
}

/* Keyboard hints are no use on a touch screen */
@media (pointer: coarse) {
  .keyhint { display: none; }
}

/* Held upright, the game asks to be turned sideways (game.js pauses meanwhile) */
#rotate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
  font-size: 1.6rem;
  font-weight: bold;
  color: #ffd84a;
  background: #14162b;
}

#rotate .phone {
  font-size: 5rem;
  animation: turn 2s ease-in-out infinite;
}

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

@media (orientation: portrait) and (pointer: coarse) {
  #rotate { display: flex; }
}

/* ---- fractions written stacked, as in school ---- */

.frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
  margin: 0 0.12em;
  font-size: 0.62em;
  line-height: 1.1;
}

.frac > span:first-child {
  padding: 0 0.15em;
  border-bottom: 0.12em solid currentColor;
}

/* ---- settings ---- */

#settingsBody {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.6em 1em;
  align-items: center;
  margin-bottom: 1em;
  text-align: left;
  font-size: 1.15em;
}

#settingsBody button {
  min-width: 11em;
  padding: 0.4em 0.8em;
  font-size: 1em;
  font-weight: bold;
  border-radius: 0.6em;
  color: #1c1d33;
  background: #e8f8ff;
  border-bottom: 0.2em solid rgba(0, 0, 0, 0.25);
}

#settingsBody button.on { background: #ffd84a; }
#settingsBody button:hover, #settingsBody button:focus-visible { outline: 0.15em solid #fff; }

/* Easier to read: a plainer, wider typeface with more space between letters and words */
body.easy-read { font-family: Verdana, "Segoe UI", sans-serif; letter-spacing: 0.03em; word-spacing: 0.12em; }

/* Calm: no animations */
body.calm .logo, body.calm #btnStart, body.calm #rotate .phone { animation: none; }

/* ---- grown-up area ---- */


/* word problems are long: smaller type on the question screens */
.speedQ.long { max-width: 30em; margin-left: auto; margin-right: auto; font-size: 1.7em; line-height: 1.3; }

/* pictures (clocks, shapes, charts) on the bonus question and speed round screens */
.visual { display: block; margin: 0 auto 0.4em; width: 13em; height: 9em; }

/* ---- Times Tables Check practice ---- */

.item.mtc { width: 23em; background: #ffd84a; }

.mtcEntry {
  display: inline-block;
  min-width: 3.5em;
  margin: 0 0 0.3em;
  padding: 0.1em 0.4em;
  font-size: 2.6em;
  font-weight: bold;
  border-radius: 0.3em;
  color: #1c1d33;
  background: #fff;
}

.mtcBar { width: 20em; height: 0.6em; margin: 0 auto 0.6em; border-radius: 0.3em; background: rgba(255, 255, 255, 0.2); overflow: hidden; }
.mtcBar > div { height: 100%; background: #58c04a; }
.mtcPad { display: grid; grid-template-columns: repeat(6, 3.2em); gap: 0.4em; justify-content: center; }
.mtcPad button { height: 2.3em; font-size: 1.2em; font-weight: bold; border-radius: 0.5em; color: #1c1d33; background: #e8f8ff; border-bottom: 0.18em solid rgba(0, 0, 0, 0.25); }
.mtcPad button.go { grid-column: span 2; background: #ffd84a; }
.mtcPad button:hover, .mtcPad button:focus-visible { outline: 0.15em solid #fff; }

/* ---- "Show me how" lessons ---- */

.lessonText { max-width: 26em; margin: 0.4em auto 0.6em; font-size: 1.6em; line-height: 1.35; }
.lessonDots { display: flex; justify-content: center; gap: 1em; margin-bottom: 0.7em; }
.dotGroup { display: flex; gap: 0.3em; }
.dot { display: inline-block; width: 1.2em; height: 1.2em; border-radius: 50%; box-sizing: border-box; }
.dot.a { background: #3d8bff; }
.dot.b { background: #ff9f43; }
.dot.o { border: 0.18em solid #3d8bff; }
.dot.x { background: #c9ccd6; position: relative; }
.dot.x::after { content: '✕'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #d64545; font-weight: bold; font-size: 0.9em; }

/* ---- sticker book ---- */

#stickerGrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5em;
  width: 100%;
  max-height: 55%;
  overflow-y: auto;
  padding: 0.3em;
}

.sticker {
  padding: 0.4em 0.2em;
  border-radius: 0.9em;
  font-size: 0.85em;
  line-height: 1.2;
  color: #1c1d33;
  background: rgba(255, 255, 255, 0.15);
  border: 0.18em dashed rgba(255, 255, 255, 0.4);
}

.sticker .art { font-size: 2.2em; filter: grayscale(1); opacity: 0.35; }
.sticker .label { color: #fff; opacity: 0.7; }
.sticker.got { background: #fff8e1; border: 0.18em solid #ffd84a; cursor: pointer; }
.sticker.got .art { filter: none; opacity: 1; }
.sticker.got .label { color: #1c1d33; opacity: 1; font-weight: bold; }
.sticker.gold { box-shadow: 0 0 0 0.2em #c98a00, 0 0 0.8em #ffd84a; }

/* ---- certificate: hidden on screen, the only thing printed ---- */

#certificate { display: none; }

@media print {
  @page { size: landscape; margin: 1cm; }
  html, body { height: auto; background: #fff; overflow: visible; display: block; }
  body > *:not(#certificate) { display: none !important; }
  #certificate { display: block; color: #1c1d33; font-family: "Trebuchet MS", "Segoe UI", sans-serif; }
  .certInner { border: 0.6cm double #c98a00; border-radius: 0.8cm; padding: 1.2cm; text-align: center; }
  .certTitle { font-size: 34pt; font-weight: bold; color: #c2410c; margin-bottom: 0.5cm; }
  .certLine { font-size: 16pt; margin: 0.25cm 0; }
  .certName { font-size: 40pt; font-weight: bold; margin: 0.3cm 0; }
  .certTopic { font-size: 26pt; font-weight: bold; color: #1f5fc4; }
  .certStars { font-size: 30pt; color: #c98a00; margin: 0.4cm 0; }
  .certFrom { font-size: 14pt; margin-top: 0.4cm; font-weight: bold; }
}

/* the shop has more shelves now */
#shopBody { max-height: 64%; overflow-y: auto; padding: 0 0.3em; }

/* the pause menu's buttons, one above another */
.buttons.stack { flex-direction: column; align-items: stretch; min-width: 14em; margin-top: 0.8em; }

/* a picture of the world at the top of its card on the world menu */
.card { overflow: hidden; padding-top: 0; }
.card .pic {
  height: 5.6em;
  margin: 0 -0.4em 0.35em;
  background: center / cover no-repeat;
  border-bottom: 0.15em solid rgba(0, 0, 0, 0.18);
}

/* today's challenge and missions above the worlds, and the night worlds once found */
#todayRow { display: flex; gap: 0.6em; justify-content: center; align-items: stretch; flex-wrap: wrap; margin: 0 auto 0.5em; max-width: 56em; }
#todayRow .daily { font-size: 0.85em; padding: 0.4em 0.8em; border-radius: 0.7em; background: #ffd84a; color: #1c1d33; }
#todayRow .daily.done { background: #9ae6b4; }
.missions { display: flex; gap: 0.4em; flex-wrap: wrap; justify-content: center; }
.missions .mission { font-size: 0.75em; padding: 0.35em 0.6em; border-radius: 0.6em; background: rgba(255, 255, 255, 0.15); color: #fff; }
.missions .mission b { color: #ffd84a; }
#nightRow { display: flex; gap: 0.4em; justify-content: center; flex-wrap: wrap; }
#nightRow.hidden { display: none; }
#menu h1 { margin: 0.6em 0 0; font-size: 2em; }
#menu .sub { margin: 0.2em 0 0.5em; }
#levelGrid { max-height: 48%; }
#nightRow button { font-size: 0.8em; padding: 0.35em 0.7em; border-radius: 0.6em; background: #3a2f7a; color: #fff; border: 0.1em solid #c3b1ff; }
#stickerExtras { display: flex; gap: 0.6em; justify-content: center; flex-wrap: wrap; margin-top: 0.6em; }

/* family sync: two big choices, the linked tick, and quieter secondary buttons */
.familyChoices { display: flex; gap: 0.8em; justify-content: center; flex-wrap: wrap; margin: 0.8em 0; }
.familyChoice { display: flex; flex-direction: column; align-items: center; gap: 0.3em; min-width: 13em; padding: 0.9em 1.1em; border-radius: 0.9em; font-size: 1.1em; font-weight: bold; }
.familyChoice span { font-size: 0.72em; font-weight: normal; opacity: 0.75; }
.familyLinked { font-size: 1.2em; font-weight: bold; color: #9ae6b4; margin: 0.4em 0; }
button.quiet { background: transparent; color: #fff; text-decoration: underline; box-shadow: none; border: none; }

/* ---- menus (v2.33) ---- */
/* Back always sits in the top-left corner of a screen */
.overlay button.back { position: absolute; top: 0.7em; left: 0.7em; padding: 0.4em 0.9em; font-size: 0.95em; z-index: 2; }
/* the world screen's top row: play next, today's challenge, and chips that open small panels */
#todayRow .playNext { font-size: 1.05em; padding: 0.5em 1.1em; border-radius: 0.8em; background: #37b24d; color: #fff; font-weight: bold; }
#todayRow .chip { font-size: 0.8em; padding: 0.4em 0.8em; border-radius: 0.7em; background: rgba(255, 255, 255, 0.15); color: #fff; }
#todayRow .chip.open { background: rgba(255, 255, 255, 0.3); }
#missions, #nightRow { margin: 0 auto 0.5em; }
/* the tab bar along the bottom of the world screen */
#tabs { display: flex; gap: 0.3em; justify-content: center; margin-top: 0.5em; }
#tabs button { display: flex; flex-direction: column; align-items: center; min-width: 5.6em; padding: 0.35em 0.5em; font-size: 0.75em; border-radius: 0.7em; background: rgba(255, 255, 255, 0.12); color: #fff; }
#tabs button .icon { font-size: 1.6em; line-height: 1.2; }
#tabs button.hidden { display: none; }
/* a locked world: its picture greyed out */
.card.locked .pic { filter: grayscale(1) brightness(0.7); }
.card.locked { padding-top: 0; }
/* settings in groups */
#settingsBody .group { grid-column: 1 / -1; margin: 0.6em 0 0.1em; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.7; text-align: left; }
/* settings fit on one screen (and scroll on a small one) */
#settings { overflow-y: auto; }
#settings .sub { margin: 0.1em 0 0.2em; }
#settingsBody { row-gap: 0.3em; }
#settingsBody button { padding: 0.3em 0.9em; }
#settingsBody .group { margin: 0.35em 0 0; }
/* "Not Aisha?" on the bright splash screen */
#btnNotMe { color: #1c1d33; font-size: 1em; margin-top: 0.3em; }

/* ---- menus inside a world (v2.34) ---- */
#pause .buttons.stack button { padding: 0.45em 1em; }
#pauseConfirm .buttons { justify-content: center; }
/* the results screen: one big next step, and stars that arrive one by one */
#result button.primary { font-size: 1.35em; padding: 0.6em 1.6em; }
#resStars.reveal { animation: starsIn 1.2s steps(3, end) both; }
@keyframes starsIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
body.calm #resStars.reveal { animation: none; }
#pauseButtons.hidden, #pauseConfirm.hidden { display: none; }
#result .buttons button.primary { font-size: 1.35em; padding: 0.6em 1.6em; }
#result .buttons { align-items: center; flex-wrap: wrap; justify-content: center; }
#result .buttons button { font-size: 0.95em; }
#result .buttons button.primary { font-size: 1.6em; padding: 0.55em 1.5em; }

/* choosing a character on the new-player screen */
#charButtons { display: flex; gap: 0.4em; justify-content: center; flex-wrap: wrap; margin-bottom: 0.4em; }
#charButtons button { display: flex; flex-direction: column; align-items: center; min-width: 4.6em; padding: 0.3em 0.5em; border-radius: 0.7em; font-size: 0.8em; background: rgba(255, 255, 255, 0.15); color: #fff; }
#charButtons button .icon { font-size: 1.8em; line-height: 1.2; }
#charButtons button.picked { background: #ffd84a; color: #1c1d33; outline: 0.15em solid #fff; }
#profileForm .sub { margin: 0.3em 0; }

/* longer shop shelves wrap onto a second row on narrow screens */
.shelf { flex-wrap: wrap; row-gap: 0.5em; }

/* ---- the logo (v2.43): bouncing letter tiles for "Maths", a speeding "Dash" ---- */
.logo { display: flex; flex-direction: column; align-items: center; font-size: 1em; text-shadow: none; animation: none; letter-spacing: 0; line-height: 1; }
.logoMaths { display: flex; gap: 0.12em; font-size: 3.6em; }
.logoMaths span {
  display: inline-flex; align-items: center; justify-content: center; width: 1.05em; height: 1.1em;
  border-radius: 0.2em; color: #fff; font-weight: bold;
  border-bottom: 0.1em solid rgba(0, 0, 0, 0.28); box-shadow: 0 0.08em 0 #1c1d33;
  text-shadow: 0 0.05em 0 rgba(0, 0, 0, 0.3);
  animation: tile 2.2s ease-in-out infinite;
}
.logoMaths span:nth-child(1) { background: #ff5d8f; transform: rotate(-6deg); animation-delay: 0s; }
.logoMaths span:nth-child(2) { background: #3d8bff; transform: rotate(4deg); animation-delay: 0.12s; }
.logoMaths span:nth-child(3) { background: #ffc928; transform: rotate(-3deg); animation-delay: 0.24s; color: #1c1d33; }
.logoMaths span:nth-child(4) { background: #4cc96a; transform: rotate(5deg); animation-delay: 0.36s; }
.logoMaths span:nth-child(5) { background: #9b5de5; transform: rotate(-4deg); animation-delay: 0.48s; }
@keyframes tile { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 0 -0.18em; } }
.logoDash { position: relative; display: flex; align-items: center; margin-top: 0.05em; font-size: 5.2em; }
.logoDash .word {
  font-weight: bold; font-style: italic; letter-spacing: 0.02em;
  background: linear-gradient(180deg, #ffe066 0%, #ff9f43 55%, #ff6b1a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0.03em 0.04em 0 #1c1d33) drop-shadow(-0.015em -0.015em 0 #1c1d33) drop-shadow(0.015em -0.015em 0 #1c1d33);
  transform: skewX(-8deg);
}
.logoDash .speed { display: flex; flex-direction: column; gap: 0.07em; margin-right: 0.08em; }
.logoDash .speed i { display: block; height: 0.07em; border-radius: 0.04em; background: #fff; opacity: 0.85; animation: zoom 0.9s linear infinite; }
.logoDash .speed i:nth-child(1) { width: 0.55em; animation-delay: 0s; }
.logoDash .speed i:nth-child(2) { width: 0.8em; animation-delay: 0.3s; }
.logoDash .speed i:nth-child(3) { width: 0.45em; animation-delay: 0.6s; }
@keyframes zoom { from { translate: 0.25em 0; opacity: 0.9; } to { translate: -0.35em 0; opacity: 0; } }
.logoDash .bolt { font-size: 0.55em; margin-left: 0.05em; animation: bolt 1.6s ease-in-out infinite; }
@keyframes bolt { 0%, 100% { rotate: -8deg; scale: 1; } 50% { rotate: 8deg; scale: 1.15; } }
body.calm .logoMaths span, body.calm .logoDash .speed i, body.calm .logoDash .bolt { animation: none; }
@media (prefers-reduced-motion: reduce) { .logoMaths span, .logoDash .speed i, .logoDash .bolt { animation: none; } }
/* a small, still version of the logo as the world screen's title */
#menu h1.miniLogo { display: flex; align-items: center; justify-content: center; gap: 0.25em; font-size: 0.42em; margin: 5.2em 0 0.4em; }
#menu h1.miniLogo .logoMaths span { animation: none; }
#menu h1.miniLogo .logoDash { margin-top: 0; font-size: 5em; }

/* the corner buttons sit above every screen, so they can always be pressed */
#topbar { z-index: 5; }

/* a world card's best time */
.card .best { font-size: 0.75em; opacity: 0.8; margin-top: 0.1em; }

/* cards line up at the top even when some show a best time */
#levelGrid { align-items: flex-start; }

/* a screen taller than the window starts at the top and scrolls, so its top is never cut off */
.overlay { overflow-y: auto; justify-content: safe center; }
#settingsBody { max-height: 62%; overflow-y: auto; padding: 0 0.4em; }

/* the Expert button on a world card */
.card .expert { display: inline-block; cursor: pointer; margin-top: 0.3em; padding: 0.15em 0.6em; font-size: 0.75em; border-radius: 0.6em; background: #1c1d33; color: #ffd84a; }
.card .expert.done { background: #ffd84a; color: #1c1d33; }