/* ilmoo - Maths in the Meadows */

@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/baloo2-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/baloo2-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Patrick Hand";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/patrickhand-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Patrick Hand";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/patrickhand-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #1b2a4a;
  /* Type scale, radii, and the three shadows. Digits that use calc(--cw) stay off this scale. */
  --fs-15: 15px;
  --fs-18: 18px;
  --fs-22: 22px;
  --fs-26: 26px;
  --fs-32: 32px;
  --fs-40: 40px;
  --lh-ui: 1.2;
  --lh-display: 1.1;
  --r-s: 12px;
  --r-m: 20px;
  --r-l: 28px;
  --r-pill: 999px;
  --sh-lip: 0 4px 0 rgba(35, 50, 74, .15);
  --sh-card: 0 8px 24px rgba(27, 42, 74, .14);
  --sh-modal: 0 24px 48px rgba(27, 42, 74, .22);

  --ink-soft: #4f5d70;
  --white: #fff;

  --paper: #fffdf8;
  --ruled: #dbe7f4;
  --margin: #f2a3a3;

  --pen: #2360c4;
  --red: #e0474c;
  --pencil: #e2761d;
  --tick: #2e9e5b;
  --hint: #7654c4;

  --go: #37a855;
  --go-deep: #26893f;
  --panel: rgba(255, 255, 255, .94);

  /* One accent for both buddies. Only the signboard colour follows the buddy. */
  --accent: #2f6fe0;
  --accent-deep: #1d4fae;
  --accent-soft: #dfeaff;
  --band: rgba(47, 111, 224, .08);

  --round: "Baloo 2", ui-rounded, "Segoe UI Rounded", system-ui, -apple-system, sans-serif;
  --hand: "Patrick Hand", "Comic Sans MS", "Chalkboard SE", cursive;

  /* Spacing scale: 4, 8, 12, 16, 24, 32, 48. Screen padding 20. Radius 20 to 24. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --pad: 16px;
  --radius: var(--r-m);
  --tap: 64px;
  --tap-main: 88px;
  --text-min: 18px;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }
html.i18n-pending body { visibility: hidden; }

body {
  font-family: var(--round);
  font-weight: 500;
  line-height: var(--lh-ui);
  color: var(--ink);
  background: #bfe6fb;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overflow-x: hidden;
}
body.is-playing { overflow: hidden; }

button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Meadow scenery ---------- */

.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: linear-gradient(180deg, #6cc2f2 0%, #a9dcf9 32%, #dff3ff 48%);
}
.scene-wrap, .scene { position: absolute; inset: 0; width: 100%; height: 100%; }

.cloud { position: absolute; fill: #fff; filter: drop-shadow(0 6px 0 rgba(160, 205, 235, .55));  }
.cloud--1 { width: 170px; left: 3%; top: 7%; }
.cloud--2 { width: 120px; left: 48%; top: 20%; opacity: .85;   }
.cloud--3 { width: 200px; left: -6%; top: 27%; opacity: .7;  }
@keyframes drift { from { transform: translateX(-5vw); } to { transform: translateX(12vw); } }

.sun {
  position: absolute;
  right: 3%;
  top: calc(7% + (1 - var(--day, 0)) * 7%);
  width: clamp(92px, 17vw, 170px);
  transition: top 1.4s ease;
}
.sun__art { display: block; width: 100%; height: auto; overflow: visible; }
.sun__rays { transform-origin: 100px 100px; transform-box: view-box; animation: spin 60s linear infinite; }
.sun__face { display: none; }
@keyframes spin { to { transform: rotate(1turn); } }

.sign { position: absolute; right: 1.5%; top: 31%; width: clamp(96px, 12vw, 150px); }
@media (max-width: 600px) { .sign { display: none; } }
.sign__art { display: block; width: 100%; height: auto; }

.flora { position: absolute; bottom: -6px; width: clamp(130px, 19vw, 250px); }
.flora--left { left: -26px; }
.flora--right { right: -26px; }
.flora__art { display: block; width: 100%; height: auto; }

.butterfly {
  position: absolute;
  right: 4%;
  top: 50%;
  width: 40px;
  }
.butterfly__art { display: block; width: 100%; height: auto; overflow: visible; }
.wing { transform-origin: 30px 26px; transform-box: view-box; animation: flap .35s ease-in-out infinite alternate; }
@keyframes flap { to { transform: scaleX(.35); } }
@keyframes flutter {
  0%, 100% { transform: translate(0, 0) rotate(-6deg); }
  30% { transform: translate(-26px, -18px) rotate(4deg); }
  60% { transform: translate(-8px, -34px) rotate(-2deg); }
}

/* ---------- Branding ---------- */

.logo { width: 1.25em; height: 1.25em; flex: none; }

.brandbar { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }

/* Shared metrics for both buddies. Only colours change with the buddy. */
.brandbar__site {
  position: relative;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px 5px;
  border: 2.5px solid transparent;
  border-radius: var(--r-s);
  font-family: var(--round);
  
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  
  text-shadow: 0 1.5px 0 rgba(90, 50, 15, .6);
  }
.brandbar__site::before,
.brandbar__site::after {
  content: "";
  position: absolute;
  top: -12px;
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: transparent;
}
.brandbar__site::before { left: 18px; }
.brandbar__site::after { right: 18px; }

.brandbar__title {
  margin: 6px 0 0;
  padding: 0;
  border: 0;
  font-family: var(--round);
  
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.01em;
  white-space: normal;
  color: #fff;
  -webkit-text-stroke-width: .15em;
  -webkit-text-stroke-color: #2f8a3a;
  paint-order: stroke fill;
  text-shadow: 0 .07em 0 #1f6a2a;
}
.brandbar__title small {
  font-family: inherit;
  
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.01em;
  
  color: #ffd23f;
}

.buddy-milo .brandbar__site {
  border-color: #7e5026;
  background: linear-gradient(180deg, #dca067, #bf8446);
  color: #fff8ec;
  box-shadow: 0 3px 0 #7e5026;
}
.buddy-milo .brandbar__site::before,
.buddy-milo .brandbar__site::after { background: #7e5026; }

.buddy-daisy .brandbar__site {
  border-color: #c63a73;
  background: linear-gradient(180deg, #ff9ec4, #e5508c);
  color: #fff;
  text-shadow: 0 1.5px 0 rgba(140, 30, 70, .45);
  box-shadow: 0 3px 0 #c63a73;
}
.buddy-daisy .brandbar__site::before,
.buddy-daisy .brandbar__site::after { background: #c63a73; }

/* ---------- Buddies and speech bubbles ---------- */

.cow { display: block; width: 100%; height: 100%; overflow: hidden; }
.cow .face { display: none; }
.cow .face--normal { display: inline; }
.cow.is-happy .face--normal, .cow.is-worried .face--normal, .cow.is-think .face--normal { display: none; }
.cow.is-happy .face--happy, .cow.is-worried .face--worried, .cow.is-think .face--think { display: inline; }
.cow .buddy__head { transform-origin: 110px 140px; transform-box: view-box; }
.cow .buddy__arm { transform-origin: 70px 162px; transform-box: view-box; }
.cow.is-nod .buddy__head { animation: nod .5s ease-in-out; }
.cow.is-shake .buddy__head { animation: headShake .5s ease-in-out; }
.cow.is-happy .buddy__arm { animation: pump .6s ease-in-out 2; }

@keyframes nod { 30% { transform: rotate(-3deg) translateY(3px); } 60% { transform: rotate(2deg) translateY(-1px); } }
@keyframes headShake { 20% { transform: rotate(-6deg); } 45% { transform: rotate(5deg); } 70% { transform: rotate(-3deg); } }
@keyframes pump { 50% { transform: rotate(10deg); } }

.bubble {
  position: relative;
  margin: 0;
  
  background: var(--white);
  border-radius: var(--r-l);
  box-shadow: var(--sh-card);
  line-height: 1.15;
}
.bubble b { display: block;  font-weight: 800;  }
.bubble span {  margin-top: 2px; font-size: 16px; font-weight: 600; color: var(--ink); }
.buddy .bubble {
  height: auto;
  
  display: flex;
  }
.buddy .bubble b {
  flex: 0 0 auto;
  
  margin-top: 0;
  overflow: hidden;
  min-height: 28px;
  max-height: 28px;
  white-space: nowrap;
}
.buddy .bubble span,
.buddy .bubble span:empty {
  flex: 0 0 auto;
  
  height: calc(var(--sub-lines) * (1.15em + 2px));
  min-height: calc(var(--sub-lines) * (1.15em + 2px));
  max-height: calc(var(--sub-lines) * (1.15em + 2px));
  margin-top: 0;
  overflow: hidden;
  line-height: 1.15;
}
.bubble::before {
  content: "";
  position: absolute;
  left: -12px;
  bottom: 18px;
  border: 12px solid transparent;
  border-right-color: var(--white);
  border-left: 0;
}
.bubble::after {
  position: absolute;
  right: -10px;
  top: -14px;
  width: 30px;
  height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cg stroke='%2343b05a' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M8 20 L4 27'/%3E%3Cpath d='M15 16 L15 6'/%3E%3Cpath d='M21 20 L28 14'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.bubble.is-new { animation: bubbleIn .35s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes bubbleIn { from { transform: scale(.88); opacity: .3; } }

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

.start {
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  min-width: 0;
  max-width: 480px;
  margin: 0 auto;
  padding: max(26px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.start__hero { display: flex; flex-direction: column; align-items: center; width: 100%; }

.start__buddy { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.start__cow,
.buddy__cow,
.report__cow,
.picker__art {
  position: relative;
  overflow: hidden;
  flex: none;
}
.start__cow { width: clamp(140px, 40vw, 200px); aspect-ratio: 220 / 200; height: auto; }
.start__cow .cow,
.buddy__cow .cow,
.report__cow .cow,
.picker__art .cow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.bubble--start {
  max-width: none;
  
  box-sizing: border-box;
  display: flex;
  }
.bubble--start b,
.bubble--start span {
  margin-top: 0;
  }
.bubble--start span { height: calc(3 * 1.15em + 6px); }

.setup {
  width: 100%;
  display: grid;
  gap: 14px;
  padding: 18px 16px 16px;
  background: var(--panel);
  border-radius: var(--r-l);
  box-shadow: var(--sh-modal);
}

.field__label {
  margin: 0 0 6px;
  height: 1.35em;
  overflow: hidden;
  white-space: nowrap;
  font-size: var(--fs-15);
  font-weight: 800;
  line-height: 1.15;
}

.picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.picker button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 6px 6px;
  border: 2.5px solid #e2eaf2;
  border-radius: var(--r-m);
  background: #f5f9fc;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.picker__art { display: block; width: 96px; height: 70px; }
.picker__name {  font-weight: 800;  }
.picker button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 3px var(--accent); }
.picker button[aria-pressed="true"] .picker__name { color: var(--accent-deep); }

.seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  
  border-radius: var(--r-m);
  }
.seg button {
  border: 0;
  
  padding: 7px 4px 6px;
  
  font-weight: 700;
  line-height: var(--lh-display);
  
  transition: background-color .2s, color .2s, box-shadow .2s;
}
.seg button small { display: block; margin-top: 2px; font-size: var(--fs-15); font-weight: 700; color: #4f5d70; opacity: 1; }
.nowrap { white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--ink); box-shadow: inset 0 0 0 3px var(--accent); }
.seg button[aria-pressed="true"] small { color: var(--accent-deep); opacity: 1; }
.seg button span,
.seg button small {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-align: center;
}

.seg[data-setting="digits"] { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; }
.seg[data-setting="digits"] button {
  position: relative;
  height: 40px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 2px 2px;
  white-space: nowrap;
  overflow: hidden;
}
.digits-caption {
  margin: 2px 0 0;
  height: 2.5em;
  overflow: hidden;
  text-align: center;
  font-size: var(--fs-15);
  font-weight: 700;
  line-height: var(--lh-ui);
  color: var(--ink-soft);
}
.whos__row {
  display: grid;
  }
.whos__slot[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 3px var(--accent); }
.whos__art {   flex: none; }
.whos__art svg { display: block; width: 26px; height: 26px; }
.whos__slot {
  height: 52px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 2px;
  border: 2px solid #e2eaf2;
  border-radius: var(--r-s);
  background: #f5f9fc;
  overflow: hidden;
 appearance: none; -webkit-appearance: none; color: inherit; }
.whos__name {
  width: 100%;
  max-width: 100%;
  
  font-weight: 800;
  line-height: var(--lh-display);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
.whos__add { font-size: var(--fs-22); font-weight: 800; line-height: 1; color: var(--accent-deep); }
.ribbon-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 16px;
  height: 16px;
  pointer-events: none;
}
.seg button .ribbon-badge { width: 16px; height: 16px; }
.ribbon-badge svg,
.seg button .ribbon-badge svg { display: block; width: 16px; height: 16px; }

.btn-go {
  height: 52px;
  border: 0;
  border-radius: var(--r-pill);
  padding: 0 20px;
  background: linear-gradient(180deg, #2a8541, #1e6e33);
  color: var(--white);
  font-size: var(--fs-22);
  font-weight: 800;
  box-shadow: 0 5px 0 #145024, 0 12px 22px rgba(30, 110, 51, .3);
  transition: transform .1s, box-shadow .1s, background .2s;
}
.btn-go:hover { background: linear-gradient(180deg, #24783a, #185c2c); }
.btn-go:active { transform: translateY(3px); box-shadow: 0 2px 0 #145024, 0 6px 12px rgba(30, 110, 51, .3); }

.btn-soft {
  border: 0;
  border-radius: var(--r-pill);
  padding: 10px 24px;
  background: #e9f0f7;
  color: var(--ink);
  
  font-weight: 800;
}
.btn-soft:active { transform: scale(.98); }

.btn-meadow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  height: 44px;
  min-height: 44px;
  padding: 0 12px;
  white-space: nowrap;
  overflow: hidden;
}
.btn-meadow__text { flex: 1; min-width: 0;  text-align: center; }
.btn-meadow__art {   flex: none; }
.btn-meadow__art svg { display: block; width: 18px; height: 26px; }
.btn-ribbon { width: 18px; height: 18px; flex: none; display: inline-flex; }
.btn-ribbon svg { display: block; width: 18px; height: 18px; }

.btn-link {
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-size: var(--fs-15);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 4px 8px;
}

.best {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 4px;
  height: 2.6em;
  margin: 0;
  overflow: hidden;
  text-align: center;
  font-size: var(--fs-15);
  line-height: 1.25;
  color: var(--ink-soft);
}
.best.is-empty { visibility: hidden; }
.best__lead, .best__tail {
  display: flex;
  align-items: center;
  height: 100%;
  min-width: 0;
  overflow: hidden;
}
.best__lead { justify-content: flex-end; text-align: right; }
.best__tail { justify-content: flex-start; text-align: left; }
.best .mini-stars { color: #f0b400; letter-spacing: 1px; }

.switches {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) 88px;
  align-items: center;
  gap: 8px;
  height: 40px;
}
.langtog {
  display: grid;
  grid-template-columns: 1fr 1fr;
  
  background: #e9f0f7;
}
.langtog button {
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  padding: 0;
  
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}
.langtog button[aria-checked="true"] {
  background: var(--accent-soft);
  color: var(--accent-deep);
  box-shadow: inset 0 0 0 3px var(--accent);
}
.switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  border: 0;
  
  font-weight: 700;
  line-height: var(--lh-display);
  
  white-space: nowrap;
  overflow: hidden;
}
.switch > span:last-child {
  display: flex;
  align-items: center;
  flex: 1;
  height: 2.2em;
  min-height: 0;
  max-height: 2.2em;
  min-width: 0;
  overflow: hidden;
  line-height: 1.05;
  text-align: left;
  white-space: normal;
}
.switch__track { position: relative;   border-radius: var(--r-pill); background: #cfdbe6; transition: background-color .2s; }
.switch__knob {
  position: absolute;
  
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  transition: transform .2s;
}
.switch[aria-checked="true"] .switch__track { background: var(--go); }
.switch[aria-checked="true"] .switch__knob { transform: translateX(16px); }

.foot { display: grid; justify-items: center; gap: 10px; width: 100%; min-width: 0; max-width: 100%; }
.woodsign {
  box-sizing: border-box;
  width: 100%;
  max-width: 400px;
  min-width: 0;
  padding: 8px 24px 9px;
  text-align: center;
  border: 3px solid #7e5026;
  border-radius: var(--r-s);
  background: linear-gradient(180deg, #dca067, #c08547);
  box-shadow: 0 4px 0 #7e5026, 0 10px 18px rgba(80, 50, 20, .25);
  color: #4a2a10;
}
.woodsign__brand { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-22); font-weight: 800; line-height: var(--lh-display); color: #2b1a0a; }
.woodsign__tag { margin: 2px 0 0;  font-weight: 700; color: #2b1a0a;   }
.foot__small,
.parents {
  box-sizing: border-box;
  
  margin: 0;
  
  padding: 6px 12px;
  border-radius: var(--r-s);
  background: #2f4a2a;
  color: #fff;
  
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}
.foot__small {
  display: grid;
  grid-template-columns: 1fr auto auto 1fr;
  align-items: center;
  column-gap: 4px;
}
.foot__small > span:first-child {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
}
#year { grid-column: 2; width: 2.6em; text-align: right; }
.foot__small > span:last-child { grid-column: 3; width: 8.4em; overflow: hidden; white-space: nowrap; text-align: left; }
.parents summary { cursor: pointer; display: block; width: 100%; }
.parents p {
  height: 11.5em;
  margin: 6px 0 0;
  overflow: hidden;
  font-weight: 600;
  text-align: left;
}
.parents .switch {
  position: relative;
  box-sizing: border-box;
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  margin-top: 8px;
  overflow: hidden;
  color: #fff;
}
.parents .switch .switch__track {
  position: absolute;
  left: 2px;
  top: 4px;
}
.parents .switch > span:last-child {
  position: absolute;
  left: 46px;
  right: 4px;
  top: 4px;
  width: auto;
  height: 22px;
  min-height: 22px;
  max-height: 22px;
  margin: 0;
}
.parents .langtog { margin: 8px auto 0; }
.parents .btn-manage {
  display: block;
  width: 100%;
  height: 40px;
  margin-top: 8px;
  padding: 0 10px;
}

@media (min-width: 900px) {
  .start {
    max-width: 1060px;
    display: grid;
    grid-template-columns: 1fr 440px;
    align-content: center;
    column-gap: 56px;
    row-gap: 26px;
    padding: 40px 32px;
  }
  .start__buddy { margin-top: 26px; }
  .start__cow { width: 240px; }
  .bubble--start span { font-size: var(--fs-18); height: calc(2 * 1.15em + 4px); }
  .foot { grid-column: 1 / -1; }
}

/* Phones: tighter start screen so Let's go sits higher. Metrics stay shared by both buddies. */
@media (max-width: 480px) {
  .start {
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 12px 8px;
  }
  .start .brandbar { gap: 2px; }
  .start .brandbar__site { font-size: var(--fs-15); padding: 4px 12px 4px; }
  .start .brandbar__title { font-size: var(--fs-32); margin-top: 2px; }
  .start__buddy { margin-top: 2px; gap: 8px; }
  .start__cow { width: 104px; }
  .bubble--start span { font-size: var(--fs-15); height: calc(2 * 1.15em + 4px); }
  .setup { gap: 8px; padding: 10px 12px; border-radius: var(--r-m); }
  .field__label { margin-bottom: 4px; font-size: var(--fs-15); }
  .picker { gap: 8px; }
  .picker button { padding: 4px 4px 3px; }
  .picker__art { width: 72px; height: 52px; }
  .seg button { padding: 5px 3px 4px;  }
  .seg button small { font-size: var(--fs-15); }
  .btn-go { padding: 10px 16px 9px; font-size: var(--fs-22); }
  .btn-meadow { min-height: 44px; padding: 6px 12px; font-size: 16px; }
  .switches { gap: 12px; }
  .foot { gap: 6px; }
  .woodsign { padding: 5px 16px 6px; }
  .woodsign__brand { font-size: var(--fs-18); }
}

/* Phones up to a tall handset: keep the first screen, including Let's go, from scrolling. */
@media (max-width: 480px) and (max-height: 900px) {
  .start { gap: 2px; padding: 2px 10px 2px; }
  .start .brandbar__title { font-size: var(--fs-26); }
  .start__buddy { margin-top: 0; }
  .start__cow { width: 68px; }
  .bubble--start span { font-size: var(--fs-15); line-height: 1.4; margin-top: 0; height: calc(2 * 1.4em + 2px); }
  .setup { gap: 2px; padding: 4px 10px; }
  .field__label { margin-bottom: 1px; font-size: var(--fs-15); }
  .picker button { padding: 2px 4px 2px; }
  .picker__art { width: 52px; height: 36px; }
  .seg button { padding: 3px 2px 3px;  }
  .seg[data-setting="digits"] button { height: 34px; padding: 8px 1px 2px; font-size: var(--fs-15); }
  .digits-caption { font-size: var(--fs-15); }
  .seg button small { font-size: var(--fs-15); margin-top: 1px; }
  .btn-go { padding: 7px 14px 6px; font-size: var(--fs-18); height: 40px; }
  .switches { height: 36px; gap: 4px; }
  .switch {  gap: 4px; }
  .btn-meadow { height: 40px; min-height: 40px; padding: 2px 10px; }
  .best { height: 2.5em; font-size: var(--fs-15); }
  .foot { gap: 2px; }
  .woodsign { padding: 2px 12px 3px; }
  .foot__small, .parents { padding: 4px 8px; }
}

/* ---------- My meadow ---------- */

.meadow {
  margin: 0 auto;
  
  display: flex;
  flex-direction: column;
  }
.meadow__bar h2 { flex: 1; min-width: 0; height: auto; margin: 0; overflow: hidden; white-space: nowrap; font-weight: 800; line-height: var(--lh-display); }
.meadow-cast {  flex-wrap: wrap;  align-items: flex-end; }
.meadow-item { display: flex; flex-direction: column; align-items: center; width: 72px; }
.meadow-item__art { width: 48px; height: 48px; }
.meadow-item__art svg { display: block; width: 48px; height: 48px; }
.meadow-item__name {
  position: relative;
  box-sizing: border-box;
  width: 72px;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  margin-top: 2px;
  overflow: hidden;
  border-radius: var(--r-m);
  background: var(--white);
  color: var(--ink);
  font-size: var(--fs-15);
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
}
.meadow-item__label {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-items: stretch;
  padding: 2px 4px;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-align: center;
}
.meadow-flowers .flower { width: 16px; height: 26px; }
.meadow__tally {
  position: relative;
  height: 52px;
  min-height: 52px;
  max-height: 52px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-m);
  background: var(--white);
  color: var(--ink);
}
.meadow__count {
  font-size: var(--fs-18);
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  }
.meadow__h { height: 1.3em; margin: 4px 0 0; overflow: hidden; font-size: var(--fs-18); font-weight: 800; color: var(--ink); }
.meadow__next-label { height: 2.6em; margin: 0 0 8px; overflow: hidden; font-size: var(--fs-15); font-weight: 800; line-height: 1.25; }
.meadow__track { height: 12px; border-radius: var(--r-pill); background: #e1e9f1; overflow: hidden; }
.meadow__fill { height: 100%; width: 0; border-radius: var(--r-pill); background: #2e9e4a; }
.ribbon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; }
.ribbon-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 8px;
  border-radius: var(--r-s);
  background: #f4f7fb;
}
.ribbon-cell__skill { height: 2.6em; margin: 0; overflow: hidden; font-size: var(--fs-15); font-weight: 800; line-height: var(--lh-ui); }
.ribbon-cell__lvl { display: block; font-size: var(--fs-15); font-weight: 700; }
.ribbon-cell__art { width: 36px; height: 36px; flex: none; }
.ribbon-cell__art svg { display: block; width: 36px; height: 36px; }
.ribbon-cell__art.is-next { opacity: 0.4; }
.ribbon-cell__tier { height: 1.3em; margin: 0; overflow: hidden; font-size: var(--fs-15); font-weight: 800; line-height: var(--lh-ui); }
.ribbon-cell__goal {
  height: 6.6em;
  margin: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: var(--fs-15);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}
.ribbon-cell__line,
.ribbon-cell__extra { height: 2.6em; overflow: hidden; }
.ribbon-cell__extra.is-empty { visibility: hidden; }
.ribbon-cell__dots { display: flex; align-items: center; gap: 5px; height: 1.4em; overflow: hidden; }
.ribbon-cell__dots .dot {
  width: 9px;
  height: 9px;
  box-sizing: border-box;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: transparent;
}
.ribbon-cell__dots .dot.is-on { background: var(--ink); }
.meadow .legend {
  border-radius: var(--r-s);
  
  color: var(--ink);
}
.meadow .legend > span {
  height: 70px;
  justify-content: center;
  overflow: hidden;
}
.meadow .legend > span > span {
  height: auto;
  max-height: 2.4em;
  overflow: hidden;
  font-size: var(--fs-15);
  line-height: 1.15;
}
.meadow .legend svg {
  width: 26px;
  height: 39px;
  flex: none;
}
.meadow__more {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 4px;
  height: 14px;
  min-height: 14px;
  max-height: 14px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  font-size: var(--fs-15);
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  white-space: nowrap;
  color: var(--ink);
}
.meadow__more.is-empty { visibility: hidden; }
.visits { display: grid; grid-template-columns: repeat(7, 1fr);  margin: 0; padding: 0; list-style: none; }
.visit { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.visit__day { display: block; width: 100%; min-width: 0; overflow: hidden; font-size: var(--fs-15); font-weight: 800; line-height: var(--lh-display); white-space: nowrap; text-align: center; }
.visit__pot { width: 28px; height: 32px; }
.visit__pot svg { display: block; width: 28px; height: 32px; }
.visits__caption { height: 4.2em; min-height: 4.2em; max-height: 4.2em; margin: 8px 0 0; overflow: hidden; font-size: var(--fs-15); font-weight: 700; line-height: 1.3; text-align: center; color: var(--ink); }

/* ---------- Game screen ---------- */

.game {
  height: 100vh;
  height: 100dvh;
  max-width: 520px;
  margin: 0 auto;
  
  display: flex;
  flex-direction: column;
  }

.game__brand { flex: none; }
.brandbar--compact .brandbar__site { font-size: var(--fs-15); }
.brandbar--compact .brandbar__title { font-size: var(--fs-32); margin-top: 4px; -webkit-text-stroke-width: .16em; }
.brandbar--compact .brandbar__title small { display: inline; font-size: .62em; margin: 0 .1em; }

.topbar { display: flex; align-items: center;  }

.round-btn {
  flex: none;
  
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--sh-card);
}
#btn-sound .snd-off { display: none; }
#btn-sound[aria-pressed="false"] .snd-on { display: none; }
#btn-sound[aria-pressed="false"] .snd-off { display: inline; }
#btn-sound[aria-pressed="false"] { color: var(--ink-soft); }

.progress {
  flex: 1;
  min-width: 0;
  padding: 6px 14px 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .88);
  box-shadow: var(--sh-card);
}
.progress__text {
  height: 1.6em;
  margin: 0 0 4px;
  overflow: hidden;
  font-size: var(--fs-15);
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
.progress__text b { font-weight: 800; }
.progress__track { height: 9px; border-radius: var(--r-pill); background: #e1e9f1; overflow: hidden; }
.progress__fill {
  height: 100%;
  width: 0;
  min-width: 9px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, #6bcf5f, #2e9e4a);
  transition: width .6s ease;
}

.clock {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 13px;
  border-radius: var(--r-pill);
  background: var(--white);
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--sh-card);
}

/* The buddy peeks over the top of the notebook */
.buddy {
  flex: 0 0 var(--bh);
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 0;
  }
.buddy__cow { position: relative; height: 100%; aspect-ratio: 220 / 200; flex: none; margin-left: -6px; }
.buddy__cow .buddy-art--back { position: absolute; inset: 0; z-index: 1; }
.buddy__cow .buddy-art--front { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.buddy .bubble {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
 max-width: 100%; margin-bottom: 0;
  --head-lines: 1;
  --sub-lines: 1;
  z-index: 2;
  padding: 6px 10px;
}

/* Exercise book */
.page {
  position: relative;
  z-index: 2;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  
  border-radius: var(--r-m);
  background-color: var(--paper);
  
  background-size: 100% 30px;
  background-position: 0 24px;
  box-shadow: var(--sh-modal);
  container-type: size;
}
.page::before {
  content: "";
  position: absolute;
  left: 36px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--margin);
}
.page__rings {
  position: absolute;
  top: -13px;
  left: 20px;
  right: 20px;
  height: 32px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 32'%3E%3Cellipse cx='17' cy='25' rx='5' ry='4' fill='%23b9c9da'/%3E%3Crect x='12.5' y='1' width='9' height='26' rx='4.5' fill='%232f6fe0'/%3E%3Crect x='14' y='3' width='3' height='18' rx='1.5' fill='%239cc0ff'/%3E%3C/svg%3E") left top / 34px 32px repeat-x;
  pointer-events: none;
}

.page__no {
  left: 4px;
  top: 30px;
  
  text-align: center;
  font: 400 21px/1 var(--hand);
  color: #b4232c;
}

.page__topic {
  right: 14px;
  top: 26px;
  
  display: grid;
  place-items: center;
  
  font-family: var(--round);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  
  text-decoration: underline wavy var(--accent);
  text-underline-offset: 4px;
  transform: rotate(-3deg);
  box-shadow: var(--sh-card);
  background: #fff1a0;
  color: var(--ink);
}
.page__topic::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -7px;
  width: 38px;
  height: 12px;
  margin-left: -19px;
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
  transform: rotate(4deg);
}
.page__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.calc {
  /* The last cap pays for a 22px place-name row on short screens. On tall screens the older cap stays smaller, so digit size is unchanged. */
  
  --ph-row: max(22px, calc(var(--cw) * .44));
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cw));
  
  justify-items: center;
  align-items: center;
  
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
  --cw: 60px;
  grid-template-rows: 24px 20px var(--cw) var(--cw) 4px var(--cw);
}
@keyframes turnIn { from { opacity: 0; transform: translateY(12px); } }

.band {
  grid-row: 1 / -1;
  width: 94%;
  height: calc(100% + 6px);
  align-self: stretch;
  border-radius: var(--r-s);
  
  transition: opacity .2s;
}

.ph {
  min-width: 0;
  height: 100%;
  
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: stretch;
  padding: 0;
  border-radius: var(--r-pill);
  background: #eaf2fb;
  color: #1e3f73;
  
  font-weight: 800;
  
  white-space: normal;
  
  container-type: size;
  container-name: ph;
  transition: background-color .2s, color .2s;
  justify-self: center;
  padding-inline: 0;
}
.ph.is-active { background: var(--accent-soft); color: var(--accent-deep); }
.ph.is-wrong { background: #ffe1e1; color: #9f1724; }
.ph .l, .ph .s { display: block; width: 100%; min-width: 0; overflow: hidden; text-align: center; }
.ph .l {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: var(--fs-15);
  line-height: 1.05;
  white-space: pre-line;
  overflow-wrap: normal;
  word-break: normal;
}
.ph .s, .calc.is-short .ph .s { display: none; }
.calc.is-short .ph .l { display: block; }
/* Taller chips only. A 22px row fits two lines at 10px, so the font stays 10px until the row grows. */
@container ph (min-height: 26px) and (min-width: 52px) {
  .ph .l { font-size: var(--fs-15); }
}
@container ph (min-height: 30px) and (min-width: 64px) {
  .ph .l { font-size: var(--fs-15); }
}
@container ph (min-height: 36px) and (min-width: 88px) {
  .ph .l { font-size: var(--fs-15); }
}

.dig { position: relative; }
.dig.is-struck { color: #a9b6c6; }
.dig.is-struck::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  top: 50%;
  height: 3px;
  border-radius: 2px;
  background: var(--pencil);
  transform: rotate(-22deg);
}
.op { font-weight: 800; }

.rule { width: 100%; height: 3.5px; border-radius: 2px; background: var(--ink); }

.mark {
  align-self: end;
  font: 400 .52em/1 var(--hand);
  
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s, transform .3s;
}
.mark.is-on { opacity: 1; transform: none; }

.cell {
  position: relative;
  
  display: grid;
  place-items: center;
  border: 2.5px dashed #a9c2de;
  border-radius: var(--r-s);
  color: transparent;
}
.cell.is-active { border: 3px solid var(--accent); background: #fff; box-shadow: 0 0 0 4px var(--accent-soft); color: var(--pen); }
.cell.is-active:empty::after {
  content: "";
  width: 3px;
  height: 52%;
  border-radius: 2px;
  background: var(--accent);
  animation: caret 1.05s steps(1) infinite;
}
.cell.is-done { border-color: transparent; color: var(--pen); animation: inked .3s ease-out; }
.cell.is-wrong { border: 3px solid var(--red); background: #fff1f1; color: var(--red); box-shadow: none; animation: nudge .3s ease-in-out; }
.cell.is-fading { opacity: 0; transition: opacity .35s; }
.note.is-again { color: var(--red); font-family: var(--round); font-weight: 800; }

@keyframes caret { 50% { opacity: 0; } }
@keyframes inked { from { opacity: 0; transform: scale(.7) rotate(-6deg); } }
@keyframes nudge { 30% { transform: translateX(-4px); } 60% { transform: translateX(4px); } }

.tick {
  position: absolute;
  right: calc(var(--cw) * -1.16);
  bottom: calc(var(--cw) * .1);
  width: calc(var(--cw) * 1.1);
  height: calc(var(--cw) * 1.1);
  overflow: visible;
  pointer-events: none;
}
.tick path {
  fill: none;
  stroke: var(--tick);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw .45s ease-out forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.note {
  align-self: stretch;
  
  min-width: 0;
  
  text-align: center;
  text-wrap: balance;
  font: 400 18px/1.2 var(--hand);
  color: var(--hint);
}
.note.is-new { animation: turnIn .3s ease-out; }

/* Keypad on a soft green panel */
.pad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  
  border-radius: var(--r-l);
  background: rgba(150, 214, 118, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 8px 20px rgba(40, 110, 40, .15);
  grid-template-rows: repeat(4, 68px);
}

.key {
  gap: 6px;
  
  background: var(--white);
  color: var(--ink);
  
  line-height: 1;
  box-shadow: 0 4px 0 #cfdbe6, 0 8px 14px rgba(27, 42, 74, .12);
  }
.key { --key-lip: #cfdbe6; }
/* The 3px drop is paint only. It does not change the layout gap. */
.key:active, .key.is-hit { transform: translateY(3px); box-shadow: 0 1px 0 var(--key-lip); background: #f4f8ff; }
.key--hint {   background: #fff3c4; color: #5b3e00;  line-height: 1; box-shadow: 0 4px 0 #ecd58a, 0 8px 14px rgba(27, 42, 74, .12); }
.key--hint span { width: 100%; min-width: 0; overflow: hidden; text-align: center; white-space: nowrap; }
.key {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-m);
  padding: 0;
  font-weight: 800;
  user-select: none;
  -webkit-user-select: none;
  transition: transform .08s, box-shadow .08s, background-color .15s;
 min-width: 0; }
.key--hint:active, .key--hint.is-hit { background: #ffeaa0; box-shadow: 0 1px 0 #ecd58a; }
.key--back { background: #e2edfa; box-shadow: 0 4px 0 #bfd1e6, 0 8px 14px rgba(27, 42, 74, .12); }

/* Flowers that grow for each finished question */
.bed {
  max-width: calc(100% - 148px);
}
.bed .flower {
  max-width: 24px;
  min-width: 8px;
}
.flower svg { display: block; width: 100%; height: 100%; overflow: visible; }
.flower.is-new svg { animation: grow .7s cubic-bezier(.3, 1.5, .5, 1); transform-origin: 50% 100%; }
@keyframes grow { from { transform: scaleY(.2) scaleX(.6); } }

.petal {
  position: fixed;
  z-index: 30;
  width: 12px;
  height: 8px;
  border-radius: 70% 0 70% 0;
  background: var(--c);
  pointer-events: none;
  animation: petal var(--d) ease-in forwards;
}
@keyframes petal { to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }

/* Short phones: drop the title and shrink the buddy */
@media (max-height: 819px) and (orientation: portrait) {
  .game__brand .brandbar__site { display: none; }
  .brandbar--compact .brandbar__title { margin-top: 0; font-size: var(--fs-32); }
}
@media (max-height: 739px) and (orientation: portrait) {
  .buddy .bubble span { font-size: var(--fs-15); }
  .key { border-radius: var(--r-s); }
}

/* Portrait tablets: a wider single column */
@media (min-width: 700px) and (orientation: portrait) {
  .game { max-width: 700px; padding-inline: 28px;   }
  .page { --cw-max: 88px;  --sum-reserve: 96px; }
  .page::before { left: 48px; }
  .page__no { left: 8px;  font-size: var(--fs-22); }
  .buddy .bubble span { font-size: var(--fs-18); }
  .key {  border-radius: var(--r-m); }
  .note { font-size: var(--fs-22); }
  .brandbar--compact .brandbar__title { font-size: 44px; }
}

/* Two columns for desktops and landscape screens */
@media (min-width: 880px), (orientation: landscape) and (min-width: 620px) {
  .game {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 380px);
    }
  .game__brand { grid-area: brand; }
  .topbar { grid-area: top; }
  .buddy { grid-area: buddy; }
  .page { grid-area: page; --cw-max: 96px;  }
  .page::before { left: 50px; }
  .page__no { left: 8px;  font-size: var(--fs-22); }
  .pad { grid-area: pad;     }
  .bed { grid-area: bed;  }
  .note { font-size: var(--fs-22); }
  .buddy .bubble span { font-size: var(--fs-18); }
  .brandbar--compact .brandbar__title { font-size: var(--fs-40); }
}

/* Wide screens wrap the longest note onto two lines, so the box can be shorter. */
@media (min-width: 1100px) and (min-height: 640px) {
  .page { --sum-reserve: 72px; }
}

@media (orientation: landscape) and (max-height: 560px) {
  /* Too short for the peeking buddy: it moves above the keypad instead */
  .sign { display: none; }
  .buddy {
    grid-area: buddy;
}
  .buddy .bubble {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
  .buddy__cow .buddy-art--front { display: none; }
  .page {
    grid-area: page;
}
  .buddy .bubble span { font-size: var(--fs-15); }
  .pad {
    height: 100%;
    grid-area: pad;
}
  .key {  border-radius: var(--r-s); }
  .clock { padding: 8px 11px; }
}

/* Portrait phones: a shorter note, and a little less gap, so the sums stay large. */
@media (orientation: portrait) and (max-width: 699px) {
  .page {  --sum-reserve: 80px; }
}
/* 360x640: the full place names need a 22px row. This gives that height back. Keys stay at least 38px. */
@media (orientation: portrait) and (max-width: 699px) and (min-height: 780px) {
  .buddy .bubble { margin-bottom: 8px; }
}

/* ---------- Report ---------- */

.modal {
  --modal-pad: 16px;
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: max(var(--modal-pad), env(safe-area-inset-top)) max(var(--modal-pad), env(safe-area-inset-right)) max(var(--modal-pad), env(safe-area-inset-bottom)) max(var(--modal-pad), env(safe-area-inset-left));
  overflow: hidden;
  background: rgba(27, 42, 74, .32);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.report {
  /* Room below the dialog so the rise animation still keeps the buttons on screen. */
  max-height: calc(100vh - 2 * var(--modal-pad) - 8px);
  max-height: calc(100dvh - 2 * var(--modal-pad) - 8px);
  padding: 20px 18px 18px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  text-align: center;
  background: var(--white);
  border-radius: var(--r-l);
  box-shadow: var(--sh-modal);
  animation: rise .45s cubic-bezier(.2, 1.2, .4, 1);
}
@keyframes rise { from { opacity: 0; transform: translateY(30px); } }

.report__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.report__body > :not(.report__review) { flex: none; }

.report__top { display: grid;  align-items: center; gap: 8px; width: 100%; }
.report__cow {  aspect-ratio: 220 / 200; flex: none; }
.report h2 {
  width: 100%;
  min-width: 0;
  height: 2.8em;
  min-height: 2.8em;
  max-height: 2.8em;
  margin: 0;
  overflow: hidden;
  font-size: var(--fs-26);
  font-weight: 800;
  line-height: 1.15;
  text-align: left;
  text-wrap: balance;
  color: var(--accent-deep);
}

.stars { display: flex; justify-content: center; align-items: flex-end; gap: 6px;  }
.star { width: 62px; height: 62px; }
.star:nth-child(2) { width: 76px; height: 76px; }
.star path { fill: #e4ebf2; }
.star.is-on path { fill: #ffc933; stroke: #e2a300; stroke-width: 1.5; stroke-linejoin: round; }
.star.is-on { animation: starPop .5s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--i) * .28s + .2s); }
@keyframes starPop { from { transform: scale(0) rotate(-40deg); } }

.report__line {    font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--ink-soft); }

.report__bed {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 2px 4px;
  
  border-radius: var(--r-m);
  background: linear-gradient(180deg, #eef9e8, #cfeec2);
}

.legend {
  font-size: var(--fs-15);
  font-weight: 600;
  line-height: 1.15;
  }
.legend span { display: flex; flex-direction: column; align-items: center; height: 44px; min-width: 0; overflow: hidden; text-align: center; }
.legend span > span { display: block; width: 100%; min-width: 0; overflow: hidden; text-align: center; }
.legend svg { width: 14px; height: 22px; }

.report__best {    font: 400 20px/1.2 var(--hand); color: var(--accent); }
.report__best.is-empty { visibility: hidden; }

.report__flowers {    font-size: 16px; font-weight: 800; color: var(--ink); }
.report__flowers.is-empty { visibility: hidden; }
.report__cards {
  gap: 8px;
  justify-content: center;
}
.unlock-card__art { width: 48px; height: 48px; flex: none; }
.unlock-card__art svg { display: block; width: 48px; height: 48px; }
.unlock-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-m);
  background: #f4f7fb;
  text-align: left;
 height: 64px; overflow: hidden; }
.unlock-card__text { flex: 1; min-width: 0; height: 2.6em; margin: 0; overflow: hidden; font-size: var(--fs-15); font-weight: 800; line-height: 1.25; color: var(--ink); }

.report__review {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 10px;
  overflow: auto;
  overscroll-behavior: contain;
  text-align: left;
  display: grid;
  gap: 6px;
  align-content: start;
}
.report__review:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.review-row {
  margin: 0;
  
  border-radius: var(--r-s);
  background: #f4f7fb;
}
.review-row.is-miss { background: #fff1f1; }
.review-q,
.review-a,
.review-note { margin: 0; }
.review-a {   color: #4f5d70; }
.review-note { margin-top: 2px;   color: #b3261e; }
.report--leave { width: min(100%, 360px); }
.leave__text {  margin: 8px 0 0; overflow: hidden;  font-weight: 700; line-height: 1.25; color: #4f5d70; }
.report--form { width: min(100%, 420px);  }
.form__label { display: block;  margin: 8px 0 4px; overflow: hidden;  font-weight: 800; }
.form__input {
  display: block;
  width: 100%;
  
  padding: 0 12px;
  
  font: inherit;
  font-weight: 700;
}
.form__hint {  margin: 4px 0 0; overflow: hidden;  font-weight: 700;   }
.avatar-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 64px 64px; gap: 6px; margin-top: 6px; }
.avatar-grid button {
  height: 64px;
  border: 2px solid #e2eaf2;
  border-radius: var(--r-s);
  background: #f5f9fc;
  }
.avatar-grid button[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 3px var(--accent); }
.avatar-grid svg { display: block; width: 40px; height: 40px;  }
.manage-list { min-height: 0; }
.manage-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  
  align-items: center;
  }
.manage-row + .manage-row { margin-top: 6px; }
.manage-row__name { overflow: hidden; white-space: nowrap; font-weight: 800; }

.report__actions {
  flex: none;
  display: grid;
  justify-items: stretch;
  gap: 10px;
  margin-top: 16px;
  background: var(--white);
}
.report__actions .btn-go,
.report__actions .btn-soft {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Short viewports: keep the buttons on screen and leave the review some room. */
@media (max-height: 700px) {
  .report {
    max-height: calc(100vh - 2 * var(--modal-pad) - 36px);
    max-height: calc(100dvh - 2 * var(--modal-pad) - 36px);
    padding: 12px 12px 10px;
    border-radius: var(--r-m);
  }
  .report h2 { font-size: var(--fs-22); }
  .stars {  gap: 4px; }
  .star { width: 36px; height: 36px; }
  .star:nth-child(2) { width: 44px; height: 44px; }
  .report__line { font-size: var(--fs-15); }
  .legend {  font-size: var(--fs-15); }
  .legend svg { width: 12px; height: 18px; }
  .report__best {  font-size: 16px; }
  .report__review { margin-top: 6px; gap: 4px; }
  .review-row { padding: 4px 6px; }
  .report__actions { margin-top: 8px; gap: 6px; }
  .report__actions .btn-go { padding: 8px 14px 7px; font-size: var(--fs-18); }
  .report__actions .btn-soft { padding: 8px 14px 6px; }
}

/* ---------- Calm motion ---------- */

.calm *, .calm *::before, .calm *::after {
  animation-delay: 0s !important;
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}
.calm .cell.is-active:empty::after { opacity: 1; }
.calm .petal { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-delay: 0s !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .cell.is-active:empty::after { opacity: 1; }
  .petal { display: none; }
}

/* Clock on, narrow phones: "Question 20 of 20" does not fit beside the clock,
   so the first word is kept for screen readers only. */
@media (max-width: 389px) {
  .topbar:has(#clock:not([hidden])) .progress__text > span:first-child {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* Ambient drift stays off on every screen. Reward motion (stars, flowers, nods) still runs. */
.cloud,
.sun__rays,
.butterfly,
.wing { animation: none; }

/* Programmatic focus on headings must not draw a box. Keyboard focus on buttons stays. */
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
h1[tabindex="-1"]:focus,
h2[tabindex="-1"]:focus,
#page[tabindex="-1"]:focus { outline: none; }

/* ---------- Pass 1 shells: home, who, pick, grown-ups ---------- */

.shell {
  box-sizing: border-box;
  width: 100%;
  padding: max(var(--pad), calc(env(safe-area-inset-top) + 8px)) max(var(--pad), calc(env(safe-area-inset-right) + 8px)) max(var(--pad), calc(env(safe-area-inset-bottom) + 8px)) max(var(--pad), calc(env(safe-area-inset-left) + 8px));
  font-size: var(--text-min);
}
.shell--child {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.shell--parent {
  min-height: 100dvh;
  overflow: auto;
}
.shell__in {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.shell--child .shell__in { flex: 1; }
.shell__h {
  flex: none;
  margin: 0;
  height: 76px;
  overflow: hidden;
  text-align: center;
  font-size: var(--fs-26);
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  -webkit-text-stroke: 4px #1f6a2a;
  paint-order: stroke fill;
  text-shadow: 0 2px 0 #1f6a2a;
}
.shell__h--bar {
  flex: 1;
  height: auto;
  min-height: 0;
  font-size: var(--fs-26);
  line-height: var(--lh-display);
  display: flex;
  align-items: center;
  justify-content: center;
}

.topbar-child {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  height: var(--tap);
}
.nav-btn,
.lock-btn {
  flex: none;
  width: var(--tap);
  height: var(--tap);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-m);
  padding: 0;
  background: #fff;
  color: var(--ink);
  box-shadow: var(--sh-lip);
}
.nav-spacer { width: var(--tap); height: var(--tap); flex: none; }

.player-chip {
  flex: 1;
  min-width: 0;
  height: var(--tap);
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 0 var(--s4) 0 var(--s2);
  border: 0;
  border-radius: var(--r-l);
  background: #fff;
  color: var(--ink);
  box-shadow: var(--sh-lip);
  text-align: left;
}
.player-chip__art {
  width: 48px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
}
.player-chip__art svg { width: 44px; height: 44px; display: block; }
.player-chip__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--fs-18);
  font-weight: 800;
  line-height: var(--lh-display);
}

.shell .brandbar {
  flex: none;
  height: 108px;
  overflow: hidden;
  justify-content: center;
  gap: var(--s1);
}
.shell .brandbar__site { font-size: var(--fs-18); }
.shell .brandbar__title {
  margin: 0;
  height: 2.3em;
  overflow: hidden;
  font-size: var(--fs-32);
  line-height: var(--lh-display);
  white-space: normal;
}
.shell .brandbar__title small {
  display: inline;
  font-size: var(--fs-18);
  margin: 0 .12em;
}

.home-hero {
  gap: var(--s3);
  min-height: 0;
}
.home-hero .picker {
  width: 58%;
  flex: none;
  height: 100%;
  gap: var(--s3);
}
.shell .picker button {
  gap: var(--s1);
  padding: var(--s2);
  border-width: 3px;
  border-radius: var(--radius);
  box-shadow: none;
}
.shell .picker button[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 3px var(--accent);
}
.shell .picker__name { font-size: var(--fs-18); height: auto; min-height: 1.35em; overflow: visible; line-height: 1.35; }

.btn-play {
  flex: none;
  width: 100%;
  height: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  border: 0;
  border-radius: var(--r-l);
  padding: 0 var(--s4);
  background: linear-gradient(180deg, #34a052, #1e6e33);
  color: #fff;
  box-shadow: 0 6px 0 #145024;
}
.btn-play__word {
  font-size: var(--fs-32);
  font-weight: 800;
  line-height: var(--lh-display);
}
.btn-play__meta {
  display: flex;
  
  gap: var(--s2);
  }
.btn-play__meta span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  background: rgba(255, 255, 255, .22);
  font-size: var(--fs-18);
  font-weight: 800;
  line-height: 1;
}
#play-size { width: 92px; box-sizing: border-box; }

.home-tiles {
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
}
.home-tile {
  height: 168px;
  min-height: var(--tap);
  display: grid;
  grid-template-rows: 52px 44px 28px;
  align-content: center;
  justify-items: center;
  align-items: center;
  padding: var(--s2);
  border: 0;
  border-radius: var(--r-l);
  background: #fff;
  color: var(--ink);
  box-shadow: var(--sh-lip);
  text-align: center;
}
.home-tile__art,
.home-tile .btn-meadow__art,
.home-tile__icon {
  grid-row: 1;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
}
.home-tile .btn-meadow__art svg { width: 36px; height: 52px; }
.home-tile__icon svg { width: 48px; height: 48px; display: block; }
.home-tile__name {
  grid-row: 2;
  align-self: start;
  height: auto;
  max-height: 44px;
  font-size: var(--fs-18);
  font-weight: 800;
  line-height: var(--lh-ui);
  text-wrap: balance;
  overflow: visible;
}
.home-tile__badge {
  grid-row: 3;
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  margin-top: 0;
  padding: 0 10px 0 6px;
  border-radius: var(--r-pill);
  background: #e7f4e4;
  color: #1b2a4a;
  font-size: var(--fs-18);
  font-weight: 800;
  line-height: 1;
}
.home-tile__flower, .home-tile__flower svg { width: 14px; height: 22px; display: block; }

.shell .whos__row {
  min-height: 0;
  height: auto;
  }
.shell .whos__slot {
  height: auto;
  min-height: 128px;
  gap: var(--s2);
  padding: var(--s2);
  border-width: 3px;
  border-radius: var(--radius);
  box-shadow: none;
}
.shell .whos__slot[aria-checked="true"] {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 3px var(--accent);
}
.shell .whos__art,
.shell .whos__art svg { width: 64px; height: 64px; }
.shell .whos__name { font-size: var(--fs-18); height: 1.2em; }

.steps {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  height: var(--tap);
}
.steps__dot {
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .55);
}
.steps__dot.is-on { width: 32px; background: #1e6e33; }

.opt-list {
  min-height: 0;
  
  gap: var(--s3);
}
.opt {
  gap: var(--s4);
  padding: 0 var(--s4);
  }
.opt__sym {
  width: 72px;
  height: 72px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-m);
  font-size: var(--fs-32);
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
.opt__sym--add { background: #2f9e4a; }
.opt__sym--sub { background: #2f6fe0; }
.opt__sym--mix { background: #ffe08a; color: #1b2a4a; }
.opt__sym--size {
  background: var(--accent-soft);
  color: var(--ink);
  
  padding: 0 var(--s1);
  }
.opt__txt { flex: 1; min-width: 0; height: 52px; display: flex; flex-direction: column; justify-content: center; gap: var(--s1); }
.opt__name {
  min-width: 0;
  font-size: var(--fs-22);
  font-weight: 800;
  line-height: 1.15;
}
.opt__ex {
  font-size: var(--fs-18);
  font-weight: 700;
  line-height: var(--lh-display);
  color: #4f5d70;
}

.grown { gap: var(--s4); padding-bottom: var(--s6); }
.grown__h {
  margin: var(--s2) 0 0;
  font-size: var(--fs-18);
  font-weight: 800;
  line-height: var(--lh-ui);
  color: var(--ink);
}
.grown .langtog {
  width: 100%;
  height: 56px;
  gap: var(--s2);
  padding: var(--s1);
  border-radius: var(--r-m);
}
.grown .langtog button { font-size: var(--fs-18); min-height: 48px; }
.grown .switch {
  min-height: 56px;
  height: 56px;
  max-height: 56px;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-m);
  background: #fff;
  font-size: var(--fs-18);
  color: var(--ink);
  box-shadow: var(--sh-lip);
}
.grown .switch > span:last-child {
  height: auto;
  max-height: none;
  overflow: visible;
  font-size: var(--fs-18);
  line-height: 1.35;
}
.grown .switch__track { width: 52px; height: 32px; flex: none; }
.grown .switch__knob { width: 24px; height: 24px; top: 4px; left: 4px; }
.grown .switch[aria-checked="true"] .switch__knob { transform: translateX(20px); }
.grown__note,
.parents__note {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}
.parents__note {
  height: 15em;
  overflow: hidden;
  padding: var(--s3);
  border-radius: var(--r-m);
  background: rgba(255, 255, 255, .92);
}
.grown__note { height: 4.4em; overflow: hidden; }
.grown .seg {
  gap: var(--s3);
  padding: 0;
  background: transparent;
}
.grown .seg button {
  height: 76px;
  min-height: 76px;
  max-height: 76px;
  border-radius: var(--r-m);
  background: #fff;
  font-size: var(--fs-22);
  color: var(--ink);
  box-shadow: var(--sh-lip);
  overflow: hidden;
}
.grown .seg button small {
  display: block;
  height: 2.3em;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.15;
  color: #4f5d70;
  white-space: normal;
}
.grown .seg button[aria-pressed="true"] { background: var(--accent-soft); box-shadow: inset 0 0 0 3px var(--accent); }
.grown__btn {
  min-height: 56px;
  font-size: var(--fs-18);
  border-radius: var(--r-m);
}
.grown .woodsign { height: 118px; overflow: hidden; }
.grown .woodsign__tag {
  font-size: 16px;
  white-space: normal;
  height: 3.2em;
  overflow: hidden;
}
.grown .foot__small {
  width: 100%;
  max-width: none;
  height: 6.8em;
  overflow: hidden;
  font-size: 16px;
}
.grown .foot__small > span:first-child { white-space: normal; height: auto; }

.picker--form { margin-top: var(--s2); }
.picker--form button { min-height: 64px; }
.picker--form .picker__name {  height: auto; line-height: 1.35; }
.form__input {
  border: 2px solid #c5d4e4;
  border-radius: var(--r-s);
  background: #fff;
  color: var(--ink);
 height: 48px; min-height: 48px; font-size: var(--fs-18); }
#gate-modal .btn-go,
#gate-modal .btn-soft,
#add-modal .btn-go,
#add-modal .btn-soft {
  min-height: 48px;
  height: 48px;
  font-size: var(--fs-18);
}
.form__label { font-size: 16px; height: auto; min-height: 1.3em; }
.form__hint {
  color: var(--ink-soft);
 font-size: 16px; line-height: 1.35; height: 4.4em; }
.report--form {
  text-align: left;
 overflow: auto; }
.report--form > * { flex-shrink: 0; }
.manage-row { height: auto; min-height: 48px; gap: var(--s2); }
.manage-row__name { font-size: 16px; }
.manage-row .btn-soft {
  white-space: nowrap;
  overflow: hidden;
  width: auto;
  min-width: 48px;
  height: 48px;
  padding: 0 10px;
  font-size: 16px;
}

@media (max-height: 700px) {
  .shell--child {
    padding-top: max(12px, calc(env(safe-area-inset-top) + 8px));
    padding-bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px));
  }
  .shell .brandbar { height: 74px; }
  .shell .brandbar__title { font-size: var(--fs-22); height: 1.35em; }
  .shell .picker__name { font-size: var(--fs-18); }
  .btn-play { height: var(--tap-main); }
  .btn-play__word { font-size: var(--fs-32); }
  .shell .whos__slot { min-height: 104px; }
  .shell .whos__art,
  .shell .whos__art svg { width: 48px; height: 48px; }
  .shell__h { height: 64px; font-size: var(--fs-26); }
  .opt__sym { width: 56px; height: 56px; font-size: var(--fs-26); }
  .opt__name { font-size: var(--fs-18); }
}

/* Pass 1 fixes: one home buddy, pick tiles, buddy chooser. */

.home-buddy {
  flex: none;
  align-self: center;
  width: 150px;
  height: 150px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-l);
  background: transparent;
  box-shadow: none;
}
.home-buddy__art,
.home-buddy__art svg,
.pick-hero__art,
.pick-hero__art svg {
  display: block;
  }
.home-buddy__art { width: 150px; height: 150px; }

.speak-btn.is-live { visibility: visible; background: #eef6ff; }
.speak-btn {
  visibility: hidden;
  flex: none;
  width: 64px;
  height: 64px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-l);
  background: transparent;
  color: var(--ink);
  display: grid;
  place-items: center;
}
.shell .bubble--start::after,
.bubble--pick::after { content: none; }

.pick-hero {
  flex: none;
  
  display: flex;
  align-items: center;
  gap: var(--s3);
}
.pick-hero__art { width: 96px; height: 96px; flex: none; }
.bubble--pick {
  flex: 1;
  min-width: 0;
  
  margin: 0;
  display: flex;
  
  gap: var(--s2);
  padding: var(--s3);
  }
.pick-q {
  flex: 1;
  min-width: 0;
  margin: 0;
  
  font-size: var(--fs-22);
  font-weight: 800;
  line-height: var(--lh-ui);
  color: var(--ink);
  }

.opt-list {
  display: flex;
  flex-direction: column;
 flex: 1 1 auto; }
.opt {
  display: flex;
  align-items: center;
  border: 3px solid transparent;
  border-radius: var(--r-l);
  background: #fff;
  color: var(--ink);
  box-shadow: var(--sh-lip);
  text-align: left;
  flex: none;
  height: 128px;
  min-height: 88px;
}
.opt[aria-pressed="true"] {
  border-color: transparent;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 3px var(--accent);
}
.opt > .opt__name { flex: 1; min-width: 0; }
.opt__mark {
  flex: none;
  width: 28px;
  height: 28px;
  margin-left: auto;
  border: 3px solid #b7c4d2;
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
 position: relative; }
.opt[aria-pressed="true"] .opt__mark {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: none;
}
.opt[aria-pressed="true"] .opt__mark::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.picker--buddy {
  flex: 1;
  min-height: 0;
  height: auto;
  
  gap: var(--s3);
}
.shell .picker--buddy button {
  height: 100%;
  min-height: 180px;
  justify-content: center;
}
.picker--buddy .picker__art { width: 100%; height: 160px; }

@media (max-height: 700px) {
  .pick-hero__art { width: 72px; height: 72px; }
  .pick-q { font-size: var(--fs-18); }
  .opt {
    padding: 0 var(--s3);
    gap: var(--s3);
 height: 88px; min-height: 88px; }
  .picker--buddy .picker__art { height: 112px; }
  .shell .picker--buddy button { min-height: 140px; }
}

/* Pass 2: game screen. Later than the round 4.1 media rules. */

.game {
  --bh: 72px;
  gap: 4px;
  padding: max(6px, env(safe-area-inset-top)) max(var(--pad), calc(env(safe-area-inset-right) + 8px)) max(16px, calc(env(safe-area-inset-bottom) + 8px)) max(var(--pad), calc(env(safe-area-inset-left) + 8px));
  overflow: hidden;
}
.game .buddy { margin-bottom: 0; overflow: visible; }
.game .game__brand { display: none; }
.game .topbar {
  height: 64px;
  }
.game .round-btn {
  width: 64px;
  height: 64px;
}
.game .bed .flower svg { display: block; width: 100%; height: 24px; }
.game .bed .flower .bed-ring { opacity: 0; }
.game .bed .flower.is-now .bed-ring { opacity: 1; }
.game .flower.is-now { box-shadow: none; }
.game .page__no,
.game .page__topic,
.game .note {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  max-height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  flex: none;
}
.game .page {
  padding: 4px 6px 0;
  background-image: none;
}
.game .page::before,
.game .page__rings { display: none; }
.game .calc {
  font-size: calc(var(--cw) * .86);
  
  animation: none;
}
.game .calc.is-big { grid-template-rows: 36px 20px var(--cw) var(--cw) 4px var(--cw); }
.game .dig,
.game .cell {
  width: var(--cw);
  height: var(--cw);
}
.game .ph,
.game .ph .l { font-size: var(--fs-18); line-height: 1.05; overflow: hidden; }
.game .calc.is-big .ph.is-fit16,
.game .calc.is-big .ph.is-fit16 .l { font-size: 16px; line-height: 1.05; }
.game .band { background: rgba(47, 111, 224, .28); }
.game .mark {
  font-family: var(--round);
  font-size: var(--fs-18);
  font-weight: 800;
  color: #9a3412;
}
.game .work-line { display: none; }
.game #bubble-work {
  height: 22px;
  
  font-size: var(--fs-18);
  
  line-height: 22px;
  }
.game #bubble-work.is-on { display: block; }
.game .buddy .bubble:has(#bubble-work.is-on) {
  padding-top: 2px;
  padding-bottom: 2px;
}
.game .buddy .bubble {
  overflow: visible;
  }
.game #bubble-sub { display: none; }
.game .buddy .bubble b {
  height: 28px;
  
  font-size: var(--fs-18);
  line-height: 28px;
  
  color: var(--ink);
}
.game .pad {
  flex: none;
  height: auto;
  gap: 12px;
  padding: 0;
  
  align-content: stretch;
}
.game .key { font-size: var(--fs-26); }
.game .key--hint {
  flex-direction: row;
  font-size: var(--fs-18);
  gap: 0;
}
.game .clock { height: 48px; flex: none; }

@media (max-width: 700px) and (max-height: 740px) {
  .game {
    gap: 0;
    padding-top: max(0px, env(safe-area-inset-top));
    padding-right: max(var(--pad), env(safe-area-inset-right));
    
    padding-left: max(var(--pad), env(safe-area-inset-left));
  }
  .game .buddy { align-items: flex-start; margin-bottom: 0; }
  .game .buddy__cow { height: 42px; align-self: flex-start; }
  .game .buddy .bubble { margin-top: 0; }
  .game .pad { grid-template-rows: repeat(4, 64px); }
  .game .page { padding: 0 4px; }
}

@media (min-width: 880px), (orientation: landscape) and (min-width: 620px) {
  .game {
    max-width: 1140px;
    --bh: 84px;
    grid-template-rows: 64px var(--bh) minmax(0, 1fr);
    grid-template-areas:
      "top  top"
      "buddy pad"
      "page pad";
  }
  .game .pad {
    height: auto;
    align-self: end;
    grid-template-rows: repeat(4, 68px);
  }
  .game .calc { --cw: 60px; }
  .game .round-btn { width: 64px; height: 64px; }
}

@media (orientation: landscape) and (max-height: 560px) {
  .game .calc { --cw: 56px; }
}

/* Pass 2 fixes: one-line bubbles, tails, home bubble hugs the line. */

.bubble::after { content: none; }
.shell .bubble--start::before,
.bubble--pick::before,
.game .buddy .bubble::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 50%;
  bottom: auto;
  margin-top: -9px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 11px 9px 0;
  border-color: transparent #fff transparent transparent;
  background: none;
}
.home-hero {
  flex: none;
  display: flex;
 height: auto; align-items: center; }
.shell .bubble--start {
  min-width: 0;
  margin: 0;
  border-radius: var(--radius);
  font-size: var(--fs-22);
  font-weight: 800;
  line-height: 1.15;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex: 1 1 auto;
  width: auto;
  height: 72px;
  min-height: 72px;
  max-height: 72px;
  overflow: visible;
  padding: 4px 8px;
  gap: 4px;
}
.shell .bubble--start b {
  color: var(--ink);
  flex: 1;
  min-width: 0;
  overflow: visible;
  font-size: var(--fs-18);
  line-height: 28px;
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  white-space: nowrap;
}
@media (min-height: 780px) {
  #screen-start .shell__in { justify-content: space-between; }
}
@media (min-width: 380px) and (max-width: 520px) and (min-height: 780px) {
  #screen-start .home-hero { gap: 8px; }
  #screen-start .bubble--start { padding-left: 4px; padding-right: 4px; }
}
@media (max-height: 700px) {
  .home-hero { height: auto; min-height: 0; }
  .home-buddy,
  .home-buddy__art { width: 96px; height: 96px; }
  .shell .bubble--start { height: 72px; min-height: 72px; max-height: 72px; }
}

/* ---------- Pass 3: reward, meadow, ribbons, visits ---------- */

@keyframes meadow-wiggle {
  0% { transform: rotate(0deg); }
  35% { transform: rotate(-8deg); }
  70% { transform: rotate(7deg); }
  100% { transform: rotate(0deg); }
}
.is-wiggle { animation: meadow-wiggle 280ms ease; transform-origin: 50% 80%; }

.meadow {
  max-width: 520px;
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
  gap: 12px;
  padding: max(8px, calc(env(safe-area-inset-top) + 8px)) max(var(--pad), calc(env(safe-area-inset-right) + 8px)) max(6px, env(safe-area-inset-bottom)) max(var(--pad), calc(env(safe-area-inset-left) + 8px));
  background: transparent;
}
.meadow__bar { flex: none; height: 64px; }
#meadow-title:focus {
  outline-offset: 4px;
 outline: none; }
.meadow__stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}
.meadow__count {
  flex: none;
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  margin: 0;
  padding: 0 8px;
  display: flex;
  
  gap: 8px;
  overflow: hidden;
  border-radius: var(--r-m);
  background: #fff;
  color: #1b2a4a;
  white-space: nowrap;
}
.meadow__count b { font-size: var(--fs-40); line-height: 1; font-weight: 800; }
.meadow__count span { font-size: var(--fs-18); font-weight: 800; }
.meadow__say {
  flex: none;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  margin: 0;
  padding: 6px 12px;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  font-size: var(--fs-18);
  font-weight: 800;
  line-height: 28px;
  color: #1b2a4a;
}
.meadow__say:empty { visibility: hidden; }
.meadow__scene {
  justify-content: flex-end;
  flex: 1 1 auto;
  min-height: 0;
  padding: 6px;
  overflow: hidden;
  border-radius: var(--r-m);
  background: linear-gradient(180deg, #c5e8fb 0 42%, #b7e4a4 42% 100%);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.meadow-decos { display: flex; gap: 4px; height: 36px; min-height: 36px; overflow: hidden; }
.meadow-decos:empty { display: none; }
.meadow-deco, .meadow-deco svg { width: 36px; height: 36px; display: block; }
.meadow-cast {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-content: start;
}
.meadow-hit {
  height: 76px;
  min-height: 64px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-m);
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}
.meadow-hit__art, .meadow-hit__art svg { width: 48px; height: 48px; display: block; }
.meadow-hit.is-locked .meadow-hit__art { filter: grayscale(1) brightness(0.35); }
.meadow-hit__need { font-size: var(--fs-18); font-weight: 800; line-height: 1; color: #1b2a4a; }
.meadow-flowers {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1px 2px;
  min-height: 28px;
  max-height: 56px;
  overflow: hidden;
  margin-top: auto;
}
.meadow-flowers .flower, .meadow-flowers .flower svg { width: 14px; height: 22px; }
.meadow .legend span,
.meadow .legend span > span {
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  font-size: var(--fs-18);
  font-weight: 800;
  line-height: 1.05;
}
.legend__btn {
  margin: 0;
  padding: 4px 4px 6px;
  border: 0;
  border-radius: var(--r-m);
  background: #fff;
  color: #1b2a4a;
  display: flex;
  
  align-items: center;
  
  gap: 2px;
  font-size: var(--fs-18);
  font-weight: 800;
  line-height: 1.05;
}
.legend__art { width: 16px;   flex: none; }
.legend__art svg { width: 16px; height: 22px; display: block; }
.meadow .legend .legend__line span {
  display: inline;
  height: auto;
  max-height: none;
  overflow: visible;
}
.meadow .legend .legend__line {
  width: 100%;
  }
.legend__n {  font-weight: 800;  }
.meadow__dock { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; height: 72px; }
.dock-btn {
  height: 72px;
  min-height: 64px;
  margin: 0;
  padding: 4px 8px;
  border: 0;
  border-radius: var(--r-m);
  background: #fff;
  color: #1b2a4a;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  
  font-size: var(--fs-18);
  font-weight: 800;
  line-height: 1.05;
}
.dock-btn__art, .dock-btn__art svg { width: 36px; height: 36px; display: block; flex: none; }

.ribbon-ops { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ribbon-ops button {
  height: 64px;
  }
.ribbon-list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.ribbon-row {
  flex: 1 1 0;
  min-height: 56px;
  max-height: 84px;
  display: grid;
  
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: var(--r-m);
  background: #fff;
}
.ribbon-row__art, .ribbon-row__art svg { width: 44px; height: 44px; display: block; }
.ribbon-row__art.is-locked { filter: grayscale(1) brightness(0.35); }
.ribbon-row__name, .ribbon-row__tier {
  margin: 0;
  overflow: hidden;
  font-size: var(--fs-18);
  font-weight: 800;
  line-height: var(--lh-display);
  color: #1b2a4a;
}
.ribbon-row__tier { white-space: nowrap; }

#screen-visits .visits__total {
  overflow: hidden;
  font-size: var(--fs-32);
  
  line-height: 1.15;
  }
#screen-visits .visits__week {
  overflow: hidden;
  font-size: var(--fs-18);
  
  line-height: var(--lh-ui);
  }
#screen-visits .visits { align-items: end; gap: 6px; margin-top: 12px; }
#screen-visits .visit__day { height: 22px; font-size: var(--fs-18); line-height: 22px; overflow: hidden; }
#screen-visits .visit__pot, #screen-visits .visit__pot svg { width: 40px; height: 48px; }

.review-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: 8px;
  align-content: start;
  padding-bottom: 8px;
}
.review-q { font-size: var(--fs-22); font-weight: 800; }
.review-a { font-size: var(--fs-18); font-weight: 700; }
.review-note { font-size: var(--fs-18); font-weight: 800; }

.grown__goals {
  display: grid;
  gap: 8px;
  height: 340px;
  min-height: 340px;
  max-height: 340px;
  overflow: hidden;
  align-content: start;
}
.grown__goals p { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--ink); }

.report--reward {
  width: min(100%, 420px);
  gap: 8px;
  padding: 12px 14px 14px;
}
.report--reward .report__top { grid-template-columns: 84px minmax(0, 1fr); }
.report--reward .report__cow { width: 84px; }
.report--reward h2 {
  height: auto;
  min-height: 2.3em;
  max-height: 2.3em;
  font-size: var(--fs-22);
  line-height: 1.15;
  text-align: left;
}
.report--reward .stars { margin: 0; }
.report--reward .star { width: 40px; height: 40px; }
.report--reward .star:nth-child(2) { width: 48px; height: 48px; }
.report--reward .report__line,
.report--reward .report__best,
.report--reward .report__flowers {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.report--reward .report__bed { margin: 0; padding: 4px 6px 2px; max-height: 64px; overflow: hidden; }
.report--reward .report__bed .flower, .report--reward .report__bed .flower svg { width: 16px; height: 24px; }
.report--reward .report__cards { margin: 0; display: flex;  }
.report--reward .report__cards:empty { display: none; }
.report__mark, .report__mark svg { width: 48px; height: 48px; display: block; }
.report--reward .report__actions { margin-top: 4px; gap: 12px; }
.report--reward .btn-go { height: 88px; min-height: 88px; font-size: var(--fs-22); }
.report__row { display: flex; gap: 12px; }
.report__home {
  width: 64px;
  height: 64px;
  min-width: 64px;
  flex: none;
  border: 0;
  border-radius: var(--r-m);
  background: #e9f0f7;
  color: #1b2a4a;
  display: grid;
  place-items: center;
  padding: 0;
}
.report__sums {
  flex: 1 1 auto;
  height: 64px;
  min-height: 64px;
  border: 0;
  border-radius: var(--r-m);
  background: #e9f0f7;
  color: #1b2a4a;
  font-size: var(--fs-18);
  font-weight: 800;
}
.report--reward .report__up { width: 100%; min-height: 64px; height: 64px; font-size: var(--fs-18); }

/* Polish pass 1. Column centres, answer gutters, short-phone card, tablet sum. */

.game .dig { display: grid; place-items: center; }
/* Glyph "1" only. The hole on its left grows with the digit, so the nudge is a fraction of the cell.
   0.025 * 60px = 1.5px, the phone correction. 0.05 * 60px = 3px on the answer cell. */
.game .dig.is-one { transform: translateX(calc(var(--cw) * 0.025)); }
.game .cell.is-one { padding-left: calc(var(--cw) * 0.05); }
/* Width only. Height stays on the column size so a 56px sum is still 56px tall. */
.game .cell { width: calc(var(--cw) - 8px); }
.game #bubble-work {
  display: none;
  margin: 0;
  font-weight: 800;
  color: #7a4a12;
  white-space: nowrap;
 text-align: start; }
.game .key { padding-top: 2px; }

.game .topbar {
  flex: none;
  gap: 12px;
 position: relative; }
.game #btn-speak { margin-left: auto; }
.game #clock:not([hidden]) { margin-left: auto; }
.game #clock:not([hidden]) ~ #btn-speak { margin-left: 8px; }
.game .bed {
  align-self: center;
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, .92);
  border-radius: var(--r-pill);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  flex: none;
  width: max-content;
  
  height: auto;
  padding: 2px 16px 4px;
}
.game .bed .flower {
  flex: 0 1 24px;
  width: 24px;
  
  height: 24px;
}

@media (max-width: 700px) and (max-height: 740px) {
  /* Keep 56px cells (the size check floor) and 12px key gaps.
     The card gains the space from a shorter header row, a shorter buddy row, and less bottom padding. */
  .game { padding-bottom: max(2px, env(safe-area-inset-bottom)); --bh: 56px; }
  .game .calc {
    --cw: 56px;
    grid-template-rows: 22px 16px var(--cw) var(--cw) 4px var(--cw);
  }
  .game .calc.is-big { grid-template-rows: 34px 16px var(--cw) var(--cw) 4px var(--cw); }
}

/* Tablets and wider, once the screen is at least 768 by 700. Phones stay on the 60px cells.
   1280 wide uses this larger cell too. */
@media (min-width: 768px) and (min-height: 700px) {
  .game .calc {
    /* 11vmin fills a 3-digit sum better. The column cap keeps a wide sum inside the card. */
    --cw: min(96px, max(72px, min(11vmin, calc((100cqi - 16px) / var(--cols)))));
    --ph: max(40px, calc(var(--cw) * .48));
    grid-template-rows: var(--ph) 20px var(--cw) var(--cw) 4px var(--cw);
  }
  .game .calc.is-big {
    grid-template-rows: var(--ph) 20px var(--cw) var(--cw) 4px var(--cw);
  }
  .game .page,
  .game .pad {
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
    justify-self: center;
  }
  /* 20px keeps the header and the answer row off the card edges. */
  .game .page { container-type: inline-size; padding: 20px 16px; }
  .game .pad { align-self: start; grid-row: 3; }
  body.is-playing .sign { display: none; }
}
/* Portrait tablet: the card fills the space above the keypad and centres the sum. */
@media (min-width: 768px) and (min-height: 700px) and (orientation: portrait) {
  /* The 880px rule turns the game into two columns. Portrait stays one column, card over keypad. */
  .game { display: flex; flex-direction: column; }
  .game .topbar,
  .game .buddy,
  .game .page,
  .game .pad {
    width: 100%;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    justify-self: center;
    align-self: center;
  }
  .game .page { flex: 1 1 auto; height: auto; min-height: 0; align-self: center; }
  .game .page__body { flex: 1 1 auto; height: auto; min-height: 0; justify-content: center; }
}
/* Landscape tablet: card hugs the sum, keypad stays beside it, tops aligned. */
@media (min-width: 768px) and (min-height: 700px) and (orientation: landscape) {
  .game .page { flex: 0 0 auto; height: auto; align-self: start; }
  .game .page__body { flex: none; height: auto; }
  /* The top bar spans both columns, so auto margins would centre it on the whole grid. */
  .game .page,
  .game .topbar,
  .game .buddy {
    justify-self: start;
    margin-left: 0;
    margin-right: auto;
    width: min(560px, 100%);
    max-width: 560px;
  }
}

/* Polish pass 2. One side gutter, safe areas, landscape, shared icons and chips. */

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.nav-ico { width: 30px; height: 30px; display: block; }
.nav-ico--sm { width: 28px; height: 28px; }

.btn-play__meta {
  justify-content: center;
 width: 168px; height: 32px; }
.btn-play__meta .play-chip { width: auto; min-width: 0; height: 32px; padding: 0 14px; border-radius: var(--r-pill); }
.btn-play__meta .play-chip[data-op="add"] { background: #1f7a35; color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.btn-play__meta .play-chip[data-op="sub"] { background: #2f6fe0; color: #fff; }
.btn-play__meta .play-chip[data-op="mix"] { background: #ffe08a; color: #1b2a4a; }


.pick-q {   max-height: none;   }
.bubble--pick, .pick-hero { height: auto; min-height: 72px; overflow: visible; }
.opt__name { text-wrap: balance; }

.meadow__bar h2.shell__h {
  color: #fff;
  font-size: var(--fs-26);
  -webkit-text-stroke: 4px #1f6a2a;
  paint-order: stroke fill;
  text-shadow: 0 2px 0 #1f6a2a;
}
.meadow .legend .legend__line .legend__n { display: block; font-size: var(--fs-26); line-height: 1; }
.meadow .legend .legend__line {
  display: block;
  flex: none;
  text-align: center;
  font-size: var(--fs-18);
  font-weight: 800;
  line-height: var(--lh-display);
  height: 72px;
  min-height: 72px;
  max-height: 72px;
  overflow: hidden;
}
.meadow .legend,
.meadow .meadow__legend {
  flex: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  background: transparent;
  align-items: stretch;
 height: 108px; min-height: 108px; max-height: 108px; }
.legend__btn {
  flex-direction: column;
  justify-content: center;
 height: 108px; min-height: 108px; }
.dock-btn { justify-content: flex-start; justify-items: start; gap: 12px; text-align: left; padding-left: 12px; }

body:has(#screen-meadow:not([hidden])) .cloud--1 { top: 22%; left: 22%; }
body:has(#screen-meadow:not([hidden])) .cloud--2 { top: 30%; left: 62%; }
body:has(#screen-meadow:not([hidden])) .cloud--3 { top: 38%; left: 6%; }

.visits-card {
  margin-top: 8px;
  padding: 16px;
  border-radius: var(--r-m);
  background: rgba(255, 255, 255, .92);
}
#screen-visits .visits__total,
#screen-visits .visits__week { margin: 0; }
#screen-visits .visits__total {
  font-weight: 800;
  text-align: center;
  color: #1b2a4a;
 height: 74px; min-height: 74px; max-height: 74px; }
#screen-visits .visits__week {
  font-weight: 800;
  text-align: center;
 height: 22px; min-height: 22px; max-height: 22px; margin-top: 4px; }
@media (max-width: 360px) {
  #visits-title { font-size: var(--fs-22); }
}

.review-row { padding: 12px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; }
.review-q, .review-a, .review-note { grid-column: 1; }
.review-ok { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: #1e6e33; }
.review-ok svg { display: block; }

.ribbon-row { grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 12px; }

.report--leave { text-align: center; }
.report--leave h2 { height: auto; min-height: 0; max-height: none; margin-bottom: 4px; text-align: center; }
.report--leave .leave__text { height: auto; min-height: 0; max-height: none; text-align: center; }
.report--leave .report__actions > button { min-height: 48px; height: 48px; }

#add-title { height: auto; min-height: 1.2em; max-height: none; margin-bottom: 8px; }
.avatar-grid button { display: grid; place-items: center; padding: 0; }
.avatar-grid svg { margin: 0; }

#gate-ans { border: 2px solid #c5d4e4; }

.brandbar--who .brandbar__site { font-size: var(--fs-18); }
.brandbar--who .brandbar__title { font-size: var(--fs-26); margin: 0; }
.shell .whos__row {
  flex: 1;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
 align-content: center; }

.picker--buddy { align-content: center; }
.shell .picker--buddy > button { max-height: 420px; height: auto; align-self: center; }


/* Polish pass 3. One check on the selected controls that do not already have .opt__mark.
   Pressed feedback is instant. Calm and reduced motion already zero transition duration. */
:is(.whos__slot, .picker button, .seg button, .avatar-grid button, .langtog button, .ribbon-ops button) {
  position: relative;
}
:is(
  .whos__slot[aria-checked="true"],
  .picker button[aria-pressed="true"],
  .seg button[aria-pressed="true"],
  .avatar-grid button[aria-checked="true"],
  .langtog button[aria-checked="true"],
  .ribbon-ops button[aria-selected="true"]
)::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 8px;
  width: 6px;
  height: 10px;
  border: solid var(--accent-deep);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  pointer-events: none;
}
:is(
  .opt,
  .home-tile,
  .btn-play,
  .nav-btn,
  .lock-btn,
  .round-btn,
  .player-chip,
  .legend__btn,
  .dock-btn,
  .whos__slot,
  .picker button,
  .ribbon-ops button,
  .meadow-hit,
  .seg button,
  .avatar-grid button,
  .modal button,
  .speak-btn,
  .home-buddy
):active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(35, 50, 74, .15);
}

/* Polish round 2a. Column count, wide tick, tablet stack, landscape buddy and who,
   centring, 18px child text, press ring, safe-area breathing room. */

/* Sum tick stays inside the card once the sum is four columns or wider.
   A negative top hangs off a phone card that only has about 2px of headroom. */
.calc.is-wide .tick {
  right: 2px;
  top: 2px;
  bottom: auto;
  width: calc(var(--cw) * 0.62);
  height: calc(var(--cw) * 0.62);
}

/* Header chips use the same 8px gap as the answer cells. */
.game .ph {
  width: calc(var(--cw) - 8px);
  }

/* Pick question sits on the bubble centre. The bubble keeps its own min-height. */
.bubble--pick {
  flex-direction: row;
  justify-content: space-between;
 align-items: center; }
.pick-q {
  text-align: left;
  overflow: visible;
  text-wrap: balance;
 min-height: 0; height: auto; }

/* Count ink is centred in the pill. Baseline stays so the word sits on the number. */
.meadow__count {
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  align-items: baseline;
}

/* Selected press keeps the 3px ring. The general :active rule replaces box-shadow. */
:is(.opt, .whos__slot, .picker button, .seg button, .avatar-grid button)[aria-pressed="true"]:active,
:is(.opt, .whos__slot, .picker button, .seg button, .avatar-grid button)[aria-checked="true"]:active,
.ribbon-ops button[aria-selected="true"]:active {
  box-shadow: inset 0 0 0 3px var(--accent), 0 1px 0 rgba(35, 50, 74, .15);
}

/* Soft labels sit optically centred. 12px 8px still left the ink 1.2px low, so the block is 11px 9px. */
.btn-soft { padding-block: 11px 9px; }
.ribbon-ops button {
  min-height: 64px;
  border-radius: var(--r-m);
  background: #fff;
  color: #1b2a4a;
  font-size: var(--fs-18);
  font-weight: 800;
  border: 3px solid transparent;
  box-shadow: inset 0 0 0 3px #d5e2c8;
}
.ribbon-ops button[aria-selected="true"] {
  border: 3px solid transparent;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 3px var(--accent);
}

/* Not yet / Belum. #5f6b7a on #fff is 5.43:1. */
.ribbon-row.is-locked .ribbon-row__tier { color: #5f6b7a; }

/* Child text that was under 18px. Leave buttons stay 48px tall. */
.leave__text,
.report__actions .btn-soft,
#add-modal .picker__name { font-size: var(--fs-18); }

/* Pick-2 size symbols snap to the 22px step. 5vw was landing on 19.5px. */
.opt__sym--size {
  text-align: center;
 font-size: var(--fs-22); }

/* BM hint wraps to two lines. Both languages share that height so the modal does not shift. */
#add-modal .form__hint {
  overflow: hidden;
  height: auto;
  min-height: 2.7em;
  max-height: none;
}

@media (max-height: 700px) {
  .modal { --modal-pad: var(--pad); }
}

#visits-title { white-space: nowrap; }

/* Short landscape game. The bubble sits over the card, so the keypad can start
   under the top bar. Four 64px rows and three 12px gaps are 292px, which ends
   above the 369 safe line on a 390px screen. A 2px key gap is not allowed. */
@media (orientation: landscape) and (max-height: 560px) {
  .game {
    --bh: 34px;
    row-gap: 0;
    column-gap: 12px;
    padding-top: max(0px, env(safe-area-inset-top));
    padding-bottom: max(6px, env(safe-area-inset-bottom));
    grid-template-columns: minmax(280px, 1fr) minmax(216px, 280px);
    grid-template-rows: 64px var(--bh) minmax(0, 1fr);
    grid-template-areas:
      "top top"
      "buddy pad"
      "page pad";
  }
  .game .page { margin-top: 0;  }
  .game .buddy {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 34px;
    margin: 0;
    }
  /* The cow gives its width to the sentence. A 34px row cannot hold two lines. */
  .game .buddy__cow { display: none; }
  .game .buddy .bubble {
    display: flex;
    flex: 1 1 auto;
    
    width: 100%;
    height: 30px;
    min-height: 30px;
    margin: 0;
    padding: 0 4px;
    overflow: visible;
  }
  .game #bubble-head,
  .game #bubble-work,
  .game #bubble-work.is-on {
    display: block;
    height: 28px;
    min-height: 28px;
    max-height: 28px;
    margin: 0;
    overflow: visible;
    font-size: var(--fs-18);
    line-height: 24px;
    white-space: nowrap;
  }
  .game #bubble-work { display: none; }
  .game #bubble-work.is-on { display: block; }
  .game .pad {
    gap: 12px;
    padding: 0;
    grid-template-rows: repeat(4, 64px);
    height: auto;
    align-self: start;
    }
}

/* Polish round 3. Later than the Pass and Polish blocks so these win. */

/* One solved look for every sum. The corner tick is not used.
   Pen #2360c4 on #e6f6ea is 5.29:1. The border stays 2.5px and turns solid.
   The existing inked animation is unchanged. */
.calc.is-solved .cell {
  background: #e6f6ea;
  border-style: solid;
  border-color: #2e9e57;
  color: var(--pen);
}
.calc > .tick { display: none; }
.buddy.is-solved .solve-tick {
  left: 8px;
  right: auto;
  top: 50%;
  bottom: auto;
  width: 28px;
  height: 28px;
  margin: 0;
  transform: translateY(-50%);
}
.buddy.is-solved #bubble-head,
.buddy.is-solved #bubble-work,
.buddy.is-solved #bubble-work.is-on {
  padding-left: 40px;
  box-sizing: border-box;
}

/* Calm and reduced motion keep the key colour change and drop the 3px move. */
.calm .key:active,
.calm .key.is-hit { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .key:active,
  .key.is-hit { transform: none; }
}

/* Dock labels may wrap. The 72px and 64px heights stay shared by both languages. */
.dock-btn > span:not(.dock-btn__art) {
  min-width: 0;
  white-space: normal;
  text-wrap: balance;
}

/* Meadow bottom stays 6px when the inset is 0, and gains 8px once an inset exists. */
.meadow {
  padding-bottom: calc(max(6px, env(safe-area-inset-bottom)) + min(8px, env(safe-area-inset-bottom)));
}

/* Landscape phone: the keypad fills the bubble row and the card row. */
@media (orientation: landscape) and (max-height: 560px) {
  .game {
    --bh: 30px;
    padding-top: max(6px, env(safe-area-inset-top));
  }
  .game .buddy {
    align-items: flex-start;
    height: 30px;
  }
  .game .page { margin-top: 8px; }
  .game .pad {
    grid-row: 2 / 4;
    align-self: stretch;
    grid-template-rows: repeat(4, 1fr);
  }
}

/* Tablet landscape: 560 / 32 / 380. Keys cap at 96 (4 rows and 3 gaps of 12 are 420).
   The card stays at its content height and shares the keypad top.
   Spare space is split above the buddy row and below the keypad.
   The first track is 64px, the same as the top bar, so those two spaces match.
   The bubble sits at the bottom of the buddy row with 8px of padding under it. */
@media (min-width: 768px) and (min-height: 700px) and (orientation: landscape) {
  .game {
    container-type: size;
    grid-template-columns: 560px 380px;
    grid-template-rows: 64px 1fr var(--bh) auto 1fr;
    grid-template-areas:
      "top top"
      ". ."
      "buddy ."
      "page pad"
      ". .";
    column-gap: 32px;
    row-gap: 0;
    justify-content: center;
  }
  .game .topbar {
    align-self: start;
    height: 64px;
  }
  .game .buddy {
    align-self: stretch;
    align-items: flex-end;
    box-sizing: border-box;
    height: auto;
    padding-bottom: 8px;
  }
  .game .page {
    align-self: start;
    height: auto;
    margin-top: 0;
    grid-row: 4;
    grid-column: 1;
  }
  .game .pad {
    align-self: start;
    grid-row: 4;
    grid-column: 2;
    width: 100%;
    max-width: none;
    height: 420px;
    max-height: 100%;
    margin-top: 0;
    grid-template-rows: repeat(4, minmax(64px, 96px));
  }
}

/* Tablet portrait: the card hugs the sum. The keypad gap is 12px.
   Spare space under the buddy is split above the card and below the keypad. */
@media (min-width: 768px) and (min-height: 700px) and (orientation: portrait) {
  .game { gap: 0; }
  .game .topbar { margin-bottom: 4px; }
  .game .page {
    flex: 0 1 auto;
    height: auto;
    max-height: 60vh;
    margin-top: auto;
    margin-bottom: 12px;
  }
  .game .pad { margin-bottom: auto; }
  .game .page__body { flex: 0 1 auto; }
}

/* Short portrait phones. Quit is 8px below the top inset. The flex gap on
   these screens is already 0, so a 12px page margin is the card-to-keypad gap.
   Key rows stay 56px. A large safe area clamps them toward 48px so the
   4-digit sum still fits in the card. */
@media (max-height: 700px) and (orientation: portrait) {
  .game {
    gap: 0;
    padding-top: calc(8px + env(safe-area-inset-top));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .game .pad { grid-template-rows: repeat(4, 56px); }
  .game .page { margin-bottom: 12px; min-height: 0; }
}

/* 360x640 with 24px insets. Key rows stay 56 until the safe area is large.
   At 24px top and bottom, factor 0.25 gives a 48px row: the card is 224px
   and the pad is 8/8. Factor 0.234375 would give 48.5: the card is 222px
   and the pad is 7/7, short of 8. The header track can spare about 1px
   (20px track, 18.9px line) and the rule track 0.5px (4px track, 3.5px
   rule). 1 + 0.5 = 1.5, which is under the 2px those taller keys need.
   Digit cells stay 56. 0.25 is 8/32, unitless, so older browsers keep it.
   375x667 still uses 56, including a 20px top inset. */
@media (max-width: 360px) and (max-height: 700px) and (orientation: portrait) {
  .game .pad {
    grid-template-rows: repeat(4, clamp(48px, calc(56px - (env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px) - 16px) * 0.25), 56px));
  }
}

/* Notch phones taller than 700. No inset keeps the 6px top padding.
   An inset adds 8px, so the quit control sits 8px under the notch. */
@media (max-width: 480px) and (orientation: portrait) and (min-height: 701px) {
  .game {
    padding-top: calc(max(6px, env(safe-area-inset-top)) + min(8px, max(0px, env(safe-area-inset-top))));
  }
}

/* 390 and other tall phone portraits already have a 4px flex gap, so 8px margin lands on 12.
   Short phones set their own 12px margin. This rule must not override them. */
@media (min-width: 361px) and (max-width: 480px) and (orientation: portrait) and (min-height: 701px) {
  .game .page { margin-bottom: 8px; }
}

/* Grown-up and legal paragraphs may break a widow onto the previous line.
   Game and home copy is not included. */
#screen-grownups p,
#add-hint { text-wrap: pretty; }

/* Phone landscape at 500px or shorter. Taller screens, including a short
   desktop window from 501px to 560px, do not match. */
#rotate {
  position: fixed;
  inset: 0;
  z-index: 80;
  margin: 0;
  padding: 24px;
  background: #e7f6ff;
  color: #1b2a4a;
}
#rotate:focus,
#rotate:focus-visible { outline: none; }
#rotate[hidden] { display: none !important; }
#rotate:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
#rotate-art,
#rotate-art svg { display: block; width: 120px; height: 120px; }
#rotate-text {
  margin: 0;
  max-width: 18em;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

/* Round 4d. 360 and 375 portrait only. 390 and wider keep the rules above.
   The quit circle sits 8px above the buddy. The keypad sits 8px above the
   bottom inset. The card keeps 8px around the sum, and the column band
   stays inside the card. The two-line hint keeps an 18px font. The head
   box is 23px and the work box is 17px so both fit the 40px buddy row. */
@media (max-width: 375px) and (orientation: portrait) {
  .game .topbar { margin-bottom: 8px; }
}

@media (max-width: 375px) and (max-height: 700px) and (orientation: portrait) {
  .game { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .game .page { padding-top: 8px; padding-bottom: 8px; }
  .game .band { height: 100%; }
  .game .calc.is-big { grid-template-rows: 22px 16px var(--cw) var(--cw) 4px var(--cw); }
  .game .buddy .bubble:has(#bubble-work.is-on) { padding-top: 0; padding-bottom: 0; }
  /* 360x640, 24px insets, hint, EN Milo and BM Daisy. The font stays 18px.
     #bubble-head is a 23px box with an 18px line: scrollHeight 23 equals
     clientHeight 23. #bubble-work is a 17px box with a 17px line. The bubble
     is 40px and the gap to the card is 0. Glyph ink sits on rows 2 through 35
     inside the bubble. The page is 640px. */
  .game .buddy .bubble:has(#bubble-work.is-on) #bubble-head,
  .game .buddy .bubble:has(#bubble-work.is-on) #bubble-work.is-on {
    margin: 0;
    padding: 0;
    font-size: var(--fs-18);
  }
  .game .buddy .bubble:has(#bubble-work.is-on) #bubble-head {
    height: 23px;
    min-height: 23px;
    max-height: 23px;
    line-height: 18px;
  }
  .game .buddy .bubble:has(#bubble-work.is-on) #bubble-work.is-on {
    height: 17px;
    min-height: 17px;
    max-height: 17px;
    line-height: 17px;
  }
}

@media (max-width: 360px) and (max-height: 700px) and (orientation: portrait) {
  .game { --bh: 40px; }
  .game .buddy__cow { height: 40px; }
  .game .calc,
  .game .calc.is-big { grid-template-rows: 20px 16px var(--cw) var(--cw) 4px var(--cw); }
}