/* Study Bunny: the game's look. Pastel pinks, peach, lavender, mint and butter, dark plum
   outlines, chunky rounded buttons, crisp pixel art. Always the light daytime world
   (color-scheme: light); cloud.css's account bar reads the --card/--ink/... tokens below. */
:root {
  color-scheme: light;
  --plum: #3b2340;
  --plum2: #6b4a74;
  --ink: #45294d;
  --ink2: #735a7c;
  --pink: #ff8fb6;
  --pink2: #ffc4da;
  --pink3: #ffe4ee;
  --rose: #f2668f;
  --peach: #ffc9a8;
  --peach2: #ffe5d4;
  --lav: #e6dbff;
  --lav2: #c9b6ff;
  --lav3: #a58bea;
  --mint: #cdf3e1;
  --mint2: #9fe3c3;
  --mint3: #4fbf8b;
  --butter: #fff1b8;
  --butter2: #ffd95e;
  --cream: #fff8f3;
  --card: #fffdfd;
  --good: #2b9a62;
  --goodbg: #dcf7e8;
  --oops: #d9466f;
  --oopsbg: #ffe2ea;
  --onp: #3b2340;
  --solid: #45294d;
  --solidfg: #ffffff;
  --font: "Quicksand", "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* Tiny5 for the pixel lettering (Pixelify Sans read C as O, 2 as 8, 5 as S); the logo keeps Pixelify. */
  --pix: "Tiny5", "Quicksand", system-ui, sans-serif;
  --r: 18px;
  --shadow: 0 4px 0 rgba(59, 35, 64, 0.16);
  --navh: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-synthesis: style; font-synthesis-weight: none; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font);
  font-weight: 600;
  color: var(--ink);
  background: #ffe9f1;
  background-image:
    radial-gradient(circle at 12px 12px, rgba(255, 255, 255, 0.7) 2px, transparent 2.5px),
    linear-gradient(180deg, #ffe3ee 0%, #fff1e6 45%, #f1e9ff 100%);
  background-size: 28px 28px, 100% 100%;
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--rose); }
img { max-width: 100%; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
canvas.px, .px { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.noscript { text-align: center; padding: 40px; }

#app { max-width: 960px; margin: 0 auto; padding: 0 12px; padding-bottom: 16px; min-height: 100dvh; display: flex; flex-direction: column; }
body.has-nav #app { padding-bottom: calc(var(--navh) + var(--safe-b) + 16px); }
#screen { flex: 1; outline: none; position: relative; min-width: 0; }

/* ---------------------------------------------------------------- header + footer */
.top { display: flex; align-items: center; gap: 10px; padding: 8px 2px 4px; min-height: 44px; flex-wrap: wrap; }
.top .home { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink2); font-size: 13.5px; font-weight: 700; text-decoration: none; padding: 0 4px; white-space: nowrap; }
.top .home:hover { color: var(--ink); }
.top .acct { margin-top: 0; margin-left: auto; min-width: 0; flex: 1 1 auto; justify-content: flex-end; }
body.in-battle .top, body.in-story .top { display: none; }
.credit { text-align: center; font-size: 12px; color: var(--ink2); padding: 18px 16px 6px; }
.credit a { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.credit a span { text-decoration: underline; text-underline-offset: 2px; }
body.in-battle .credit, body.in-story .credit { display: none; }

/* ---------------------------------------------------------------- buttons, cards, chips */
.bb {
  --bg: var(--pink2);
  --bd: var(--plum);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 18px;
  border: 3px solid var(--bd); border-radius: 14px;
  background: var(--bg); color: var(--plum);
  font-family: var(--pix); font-weight: 700; font-size: 17px; letter-spacing: 0.02em; line-height: 1.1;
  box-shadow: 0 4px 0 var(--bd), inset 0 -4px 0 rgba(59, 35, 64, 0.12), inset 0 3px 0 rgba(255, 255, 255, 0.55);
  transform: translateY(0); transition: transform 0.08s, box-shadow 0.08s, filter 0.12s;
  text-decoration: none; user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.bb:hover { filter: brightness(1.04) saturate(1.05); }
.bb:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--bd), inset 0 -2px 0 rgba(59, 35, 64, 0.12), inset 0 3px 0 rgba(255, 255, 255, 0.55); }
.bb:focus-visible { outline: 3px dashed var(--lav3); outline-offset: 3px; }
.bb:disabled { opacity: 0.5; cursor: default; filter: grayscale(0.3); }
.bb.pink { --bg: var(--pink); }
.bb.mint { --bg: var(--mint2); }
.bb.lav { --bg: var(--lav2); }
.bb.butter { --bg: var(--butter2); }
.bb.peach { --bg: var(--peach); }
.bb.cream { --bg: var(--card); }
.bb.plum { --bg: var(--plum2); color: #fff; }
.bb.ghost { --bg: rgba(255, 255, 255, 0.75); box-shadow: 0 3px 0 var(--bd); }
.bb.sm { min-height: 44px; padding: 6px 12px; font-size: 15px; border-radius: 12px; }
.bb.big { min-height: 58px; font-size: 22px; padding: 12px 26px; border-radius: 18px; }
.bb.wide { width: 100%; }
.bb.icon { padding: 6px; min-width: 46px; }
.bb canvas { flex: none; }
.bb .k { font-family: var(--font); font-size: 11px; opacity: 0.6; font-weight: 700; }

.card {
  background: var(--card); border: 3px solid var(--plum); border-radius: var(--r);
  box-shadow: 0 5px 0 rgba(59, 35, 64, 0.18); padding: 16px; margin: 12px 0;
}
.card.soft { border-color: rgba(59, 35, 64, 0.18); box-shadow: 0 4px 14px rgba(120, 70, 130, 0.12); }
.card h2, .card h3 { margin: 0 0 8px; }
h1, h2, h3, .pix { font-family: var(--pix); font-weight: 700; letter-spacing: 0.01em; color: var(--plum); }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
.sub { color: var(--ink2); font-size: 14px; font-weight: 600; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row > .bb { flex: 1 1 auto; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
  background: var(--lav); color: var(--plum); font-size: 13px; font-weight: 700; border: 2px solid rgba(59, 35, 64, 0.15);
  white-space: nowrap;
}
.chip.new { background: #eef0f7; }
.chip.learning { background: var(--butter); }
.chip.mastered { background: var(--mint); }
.chip.missed { background: var(--oopsbg); color: #b8325b; } /* (the rose, darkened to 4.7:1 for small text) */
.chip.gold { background: linear-gradient(180deg, #fff3b0, #ffd45e); }
.chip.beyond { background: var(--peach2); } /* a question that uses facts beyond the creator's slides */
.bar { height: 14px; border-radius: 99px; background: #f4e8f0; border: 2px solid var(--plum); overflow: hidden; position: relative; }
.bar > i { display: block; height: 100%; background: linear-gradient(180deg, #8ae6bb, #4fbf8b); border-radius: 99px; transition: width 0.5s; }
.bar.pink > i { background: linear-gradient(180deg, #ffb3cd, #ff7fac); }
.bar.gold > i { background: linear-gradient(180deg, #ffe98a, #ffc531); }
.stars { display: inline-flex; gap: 2px; align-items: center; }
.stars canvas { display: block; }
.carrots { display: inline-flex; align-items: center; gap: 4px; font-family: var(--pix); font-weight: 700; }
.kbd { font-size: 12px; color: var(--ink2); }
kbd { font-family: var(--font); font-size: 11px; background: #fff; border: 1.5px solid var(--lav2); border-bottom-width: 3px; border-radius: 6px; padding: 0 5px; }

/* ---------------------------------------------------------------- screens + transitions */
.scr { animation: scrIn 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; transform-origin: 50% 0; }
.scr.out { animation: scrOut 0.14s ease-in both; pointer-events: none; }
@keyframes scrIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes scrOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-6px); } }
.back { margin: 6px 0 2px; }
.scr-head { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; flex-wrap: wrap; }
.scr-head h2 { margin: 0; font-size: 24px; flex: 1; min-width: 0; }

/* ---------------------------------------------------------------- HUD */
.hud {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; margin: 0 -4px 6px; border-radius: 0 0 16px 16px;
  background: rgba(255, 248, 243, 0.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 3px solid var(--plum); border-top: 0; box-shadow: var(--shadow);
}
.hud .purse { font-size: 20px; padding: 2px 10px 2px 6px; background: var(--butter); border-radius: 999px; border: 2px solid var(--plum); }
.hud .title { font-family: var(--pix); font-size: 18px; color: var(--plum); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud .chip { font-size: 13px; }

/* ---------------------------------------------------------------- bottom nav */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; justify-content: center; gap: 2px;
  padding: 6px 6px calc(6px + var(--safe-b));
  background: rgba(255, 250, 252, 0.96); border-top: 3px solid var(--plum);
  box-shadow: 0 -4px 14px rgba(120, 70, 130, 0.12);
}
.nav button {
  flex: 1 1 0; max-width: 150px; min-height: 52px; border: 0; background: transparent; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-family: var(--pix); font-size: 12.5px; color: var(--ink2); padding: 4px 2px; min-width: 0;
}
.nav button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.nav button[aria-current="page"] { background: var(--pink3); color: var(--plum); box-shadow: inset 0 0 0 2px var(--pink); }
.nav button:focus-visible { outline: 3px dashed var(--lav3); outline-offset: -3px; }

/* ---------------------------------------------------------------- title */
.title-scr { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 4px; }
.title-art { position: relative; width: 100%; border: 3px solid var(--plum); border-radius: 22px; overflow: hidden; box-shadow: 0 6px 0 rgba(59, 35, 64, 0.2); background: #ffd9e6; }
.title-art canvas { display: block; }
.logo { margin: 14px 0 2px; font-family: "Pixelify Sans", var(--pix); font-weight: 700; font-size: clamp(40px, 12vw, 72px); line-height: 0.95; color: #fff;
  text-shadow: 0 3px 0 var(--plum), 3px 0 0 var(--plum), -3px 0 0 var(--plum), 0 -3px 0 var(--plum), 3px 3px 0 var(--plum), -3px 3px 0 var(--plum), 3px -3px 0 var(--plum), -3px -3px 0 var(--plum), 0 8px 0 var(--pink), 4px 8px 0 var(--pink), -4px 8px 0 var(--pink);
  letter-spacing: 0.02em; }
.logo small { display: block; font-family: var(--pix); font-size: 0.32em; color: var(--plum); text-shadow: none; letter-spacing: 0.08em; margin-top: 12px; }
.tagline { max-width: 34em; margin: 8px auto 14px; color: var(--ink2); font-size: 15px; overflow-wrap: anywhere; }
.title-btns { display: flex; flex-direction: column; gap: 12px; width: min(340px, 100%); margin: 6px auto 0; }
.loading { display: inline-flex; align-items: center; gap: 10px; color: var(--ink2); font-size: 15px; margin-top: 8px; }
.oops-card { text-align: center; }

/* ---------------------------------------------------------------- intro storybook */
.story { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 10px 0 20px; min-height: 80dvh; justify-content: center; }
.story-page { width: 100%; max-width: 640px; cursor: pointer; }
.story-art { border: 3px solid var(--plum); border-radius: 20px 20px 0 0; overflow: hidden; background: #ffe; }
.story-art canvas { display: block; }
.story-text { background: var(--card); border: 3px solid var(--plum); border-top: 0; border-radius: 0 0 20px 20px; padding: 16px 18px; font-size: 18px; line-height: 1.45; min-height: 5.5em; box-shadow: 0 5px 0 rgba(59, 35, 64, 0.18); }
.story-text b { color: var(--rose); }
/* A long unbroken set title (a file name like "GeneticsATGGCC…") wraps instead of pushing sideways. */
.story, .story * { overflow-wrap: anywhere; }
.story-dots { display: flex; gap: 8px; }
.story-dots i { width: 12px; height: 12px; border-radius: 3px; background: #fff; border: 2px solid var(--plum); }
.story-dots i.on { background: var(--pink); }
.story-nav { display: flex; gap: 10px; width: 100%; max-width: 640px; }
.story-nav .bb { flex: 1; }
.tap-hint { color: var(--ink2); font-size: 13px; }

/* ---------------------------------------------------------------- map */
.map { position: relative; margin: 0 -4px; }
.sec { position: relative; border: 3px solid var(--plum); border-radius: 22px; overflow: hidden; margin: 0 0 14px; box-shadow: 0 5px 0 rgba(59, 35, 64, 0.18); }
.sec-bg { position: absolute; inset: 0; z-index: 0; }
.sec-bg canvas { width: 100%; height: 100%; }
.sec-head { position: relative; z-index: 2; display: flex; justify-content: center; padding-top: 10px; pointer-events: none; }
.ribbon { font-family: var(--pix); font-weight: 700; font-size: 17px; color: var(--plum); background: #fff; border: 3px solid var(--plum); border-radius: 12px; padding: 4px 14px; box-shadow: 0 3px 0 rgba(59, 35, 64, 0.3); max-width: calc(100% - 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec.castle .ribbon { background: #e9ffe0; }
.path { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: visible; }
.node {
  position: absolute; z-index: 3; transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: 0; background: transparent; padding: 0; min-width: 96px;
}
.node .spr { position: relative; display: flex; flex-direction: column; align-items: center; }
.node .pdl { margin-top: -10px; }
.node .lbl { font-family: var(--pix); font-size: 13.5px; color: var(--plum); background: rgba(255, 255, 255, 0.93); border: 2px solid var(--plum); border-radius: 10px; padding: 2px 8px; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 0 rgba(59, 35, 64, 0.25); }
.node .stars { background: rgba(255, 255, 255, 0.85); border-radius: 8px; padding: 1px 4px; border: 2px solid rgba(59, 35, 64, 0.3); }
.node .lockb { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); }
/* the path is open but the gate is shut: a sprout badge (train first), not a lock */
.node .sproutb { position: absolute; right: -10px; top: -6px; background: #fff; border: 2px solid var(--plum); border-radius: 12px; padding: 2px; box-shadow: 0 2px 0 rgba(59, 35, 64, 0.3); line-height: 0; }
.node .gtag { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-family: var(--pix); font-size: 12.5px; color: var(--plum); background: var(--mint); border: 2px solid var(--plum); border-radius: 999px; padding: 1px 8px 1px 5px; white-space: nowrap; box-shadow: 0 2px 0 rgba(59, 35, 64, 0.25); }
.node:focus-visible .lbl { outline: 3px dashed var(--lav3); outline-offset: 2px; }
.node.locked .lbl { background: rgba(240, 232, 240, 0.92); color: var(--ink2); }
.node.golden .lbl { background: linear-gradient(180deg, #fff6c4, #ffe07a); }
.node.cur .lbl { background: var(--pink2); }
.node:not(.locked):hover .spr { filter: brightness(1.06); }
.node.pop { animation: nodePop 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes nodePop { 0% { transform: translate(-50%, -100%) scale(0.4); } 100% { transform: translate(-50%, -100%) scale(1); } }
.mochi-here { position: absolute; z-index: 4; transform: translate(-50%, -100%); pointer-events: none; }
.mochi-here .say { position: absolute; left: 50%; bottom: calc(100% - 4px); transform: translateX(-50%); white-space: nowrap; font-family: var(--pix); font-size: 13px; color: var(--plum); background: var(--pink2); border: 2px solid var(--plum); border-radius: 10px; padding: 2px 8px; box-shadow: 0 2px 0 rgba(59, 35, 64, 0.25); animation: bob 1.4s ease-in-out infinite; }
.mochi-here .say.train { background: var(--mint); }
.mochi-here .say::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 8px; height: 8px; background: inherit; border-right: 2px solid var(--plum); border-bottom: 2px solid var(--plum); transform: translateX(-50%) rotate(45deg); }
.mochi-here .arrow { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); font-family: var(--pix); color: var(--rose); font-size: 16px; animation: bob 0.9s ease-in-out infinite; text-shadow: 0 2px 0 #fff; }
@keyframes bob { 50% { transform: translate(-50%, -5px); } }
.castle-note { position: absolute; z-index: 3; left: 50%; top: 52px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); text-align: center; font-size: 13px; background: rgba(255, 255, 255, 0.92); border: 2px solid var(--plum); border-radius: 10px; padding: 4px 10px; }
.map-foot { text-align: center; color: var(--ink2); font-size: 13px; margin: 4px 0 10px; }

/* ---------------------------------------------------------------- lair */
.lair .portrait { position: relative; border: 3px solid var(--plum); border-radius: 20px; overflow: hidden; box-shadow: 0 5px 0 rgba(59, 35, 64, 0.18); }
.lair .portrait canvas { display: block; }
.lair .who { text-align: center; margin: 10px 0 0; }
.lair .who h2 { margin: 0; font-size: 26px; }
.lair .who .ep { font-family: var(--pix); color: #b8325b; font-size: 17px; } /* (the rose, darkened to about 5:1 on the page) */
.bubble { position: relative; background: #fff; border: 3px solid var(--plum); border-radius: 16px; padding: 10px 14px; font-size: 15.5px; margin: 12px 0; }
.bubble::before { content: ""; position: absolute; left: 50%; top: -12px; width: 18px; height: 18px; background: #fff; border-left: 3px solid var(--plum); border-top: 3px solid var(--plum); transform: translateX(-50%) rotate(45deg); }
.bubble.left::before { left: 32px; }
.bubble.low { margin: 0 0 12px; }
.bubble.low::before { display: none; } /* (under the fruit's buttons on a short phone: no tail pointing at them) */
.objective { background: var(--lav); border-color: var(--lav3); }
.objective .ol { font-family: var(--pix); font-size: 14px; color: var(--plum2); text-transform: uppercase; letter-spacing: 0.02em; }
.objective p { margin: 4px 0 0; font-size: 16px; line-height: 1.45; color: var(--ink); }
.mastery .mline { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.mastery .mline b { font-size: 17px; }
.pool { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
/* Hop School and the gate: the card, then Train and Battle! (locked until every question is learned) */
.gate-box { margin: 12px 0 0; }
.gate-box.first { margin: 12px 0 14px; }
.gate-box.first .lair-btns { margin-bottom: 0; }
.card.school { margin: 0; }
.school .sline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.school .sline b { font-family: var(--pix); font-size: 19px; color: var(--plum); }
/* (learned counts in the body font: the pixel font's 9 reads as a 3 at these sizes) */
.school .sline .cnt { font-family: var(--font); font-weight: 700; font-size: 16px; color: var(--plum2); }
.school .why { margin-top: 6px; }
/* Learned in the Exam 2 Study Buddy (it counts toward Hop School): a small green tick and a line */
.sb-line { display: flex; align-items: baseline; gap: 6px; color: #1f7a4b; font-weight: 700; }
.sb-line[hidden] { display: none; }
.sb-tick { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--mint); border: 2px solid #1f7a4b; color: #17603a; font-size: 11px; line-height: 1; transform: translateY(2px); }
.card.school .sb-line { margin-top: 4px; }
.card.school.open { background: #f1fff7; border-color: var(--mint3); }
.card.school.king { background: var(--lav); }
.card.school.king .sline canvas { filter: grayscale(0.6); opacity: 0.7; }
.lair-btns { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 14px 0; }
.bb.locked { --bg: #efe8f2; --bd: #8d7a96; color: var(--ink2); width: 100%; box-shadow: 0 3px 0 var(--bd); cursor: not-allowed; }
.bb.locked:hover { filter: none; }
.gate-lock { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.gate-lock .sub { text-align: center; }
/* a short phone held upright (320x568): a tighter fruit page, so the header, the fruit and Train
   fit above the bottom menu together (it scrolls just past the page's "All classes" bar) */
.lair.short .who { margin-top: 6px; }
.lair.short .who h2 { font-size: 22px; }
.lair.short .who .ep { font-size: 15px; }
.lair.short .gate-box.first { margin: 8px 0 12px; }
.lair.short .card.school { padding: 10px 14px; }
.lair.short .card.school .sline { gap: 6px; margin-bottom: 6px; }
.lair.short .card.school .why { margin-top: 4px; }
.lair.short .lair-btns { margin-top: 10px; gap: 8px; }
.lair.short .lair-btns .bb.big { min-height: 50px; padding: 8px 20px; }
/* a phone 320 wide: the card's title a size down, so "· 40 / 40 learned" stays on its line */
@media (max-width: 339px) { .card.school .sline b { font-size: 17px; } }

/* ---------------------------------------------------------------- battle */
body.in-battle #app { padding-top: 6px; }
.bt { display: flex; flex-direction: column; gap: 8px; }
.bt-top { display: flex; align-items: center; gap: 8px; min-height: 46px; }
.bt-top .who { flex: 1; min-width: 0; line-height: 1.1; }
.bt-top .who b { display: block; font-family: var(--pix); font-size: 18px; color: var(--plum); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-top .who span { font-size: 12.5px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.bt-top .qn { font-family: var(--pix); font-size: 15px; background: #fff; border: 2px solid var(--plum); border-radius: 10px; padding: 4px 9px; white-space: nowrap; }
.bt-left { display: contents; }
/* The scene sticks to the top while the question scrolls under it (not while a phone's keyboard is up). */
.bt-stage { position: sticky; top: 0; z-index: 6; align-self: center; border: 3px solid var(--plum); border-radius: 16px; overflow: hidden; box-shadow: 0 5px 0 rgba(59, 35, 64, 0.2); background: #ffe6ef; max-width: 100%; touch-action: manipulation; }
.bt-stage canvas { display: block; }
.bt.kb .bt-stage { position: relative; }
/* (nor while a long question is read in one column: ui.js readMode) */
.bt.long .bt-stage { position: relative; }
.bt-stage.bleed { border-left: 0; border-right: 0; border-radius: 0; align-self: auto; max-width: none; margin: 0 calc(50% - 50vw); }
.bt-banner { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none; width: 94%;
  font-family: var(--pix); font-weight: 700; font-size: clamp(19px, 5.4vw, 34px); line-height: 1.1; color: #fff; text-align: center; overflow-wrap: break-word;
  text-shadow: 0 3px 0 var(--plum), 2px 0 0 var(--plum), -2px 0 0 var(--plum), 0 -2px 0 var(--plum), 2px 2px 0 var(--plum), -2px 2px 0 var(--plum), 2px -2px 0 var(--plum), -2px -2px 0 var(--plum);
  animation: banner 1.4s ease-out both; }
.bt-banner small { display: block; font-size: max(12px, 0.5em); margin-top: 4px; }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 25% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
.bt-banner.stay { top: 26%; animation: bannerStay 0.5s ease-out both; }
@keyframes bannerStay { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } 60% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.bt-say { position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); bottom: calc(var(--s, 2) * 2px); width: max-content; max-width: calc(100% - 12px); background: rgba(255, 255, 255, 0.92); border: 2px solid var(--plum); border-radius: 10px; padding: 2px 10px; font-size: 12.5px; font-weight: 700; line-height: 1.3; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: sayIn 0.3s ease-out both; pointer-events: none; }
/* the fruit's taunt: a speech bubble above the fruit, its tail pointing down at it */
.bt-say.wrap { white-space: normal; overflow: visible; bottom: auto; top: calc(var(--s, 2) * 13px); left: auto; right: 6px; transform: none; max-width: 70%; text-align: left; border-radius: 12px; padding: 3px 10px; }
.bt-stage.bleed .bt-say.wrap { font-size: 11.5px; line-height: 1.25; max-width: 76%; padding: 2px 8px; }
.bt-say.wrap.low { top: auto; bottom: calc(var(--s, 2) * 2px); left: 50%; right: auto; transform: translateX(-50%); max-width: calc(100% - 12px); text-align: center; }
.bt-say.wrap.low::after { display: none; }
.bt-say.wrap::after { content: ""; position: absolute; right: 22%; bottom: -7px; width: 10px; height: 10px; background: #fff; border-right: 2px solid var(--plum); border-bottom: 2px solid var(--plum); transform: rotate(45deg); }
.bt-say.mochi { background: #fff4f8; }
@keyframes sayIn { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
.bt-skip { position: absolute; right: 6px; bottom: 6px; z-index: 4; }
.bt-hud { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.sugar { flex: 1 1 110px; display: flex; align-items: center; gap: 8px; background: #fff; border: 3px solid var(--plum); border-radius: 14px; padding: 5px 10px; min-height: 46px; min-width: 0; }
.sugar .sl { font-family: var(--pix); font-size: 13px; color: var(--plum2); white-space: nowrap; line-height: 1; }
.sugar .cells { display: flex; gap: 4px; flex: 1; }
.sugar .cells i { flex: 1; height: 16px; border-radius: 5px; border: 2px solid var(--plum); background: #f6eef4; transition: background 0.2s; }
.sugar .cells i.on { background: linear-gradient(180deg, #ffd1e3, #ff8fb6); }
.sugar.full { background: linear-gradient(90deg, #fff1f7, #fff7d6, #f1fff7, #f3ecff); animation: rush 1s linear infinite; }
.sugar.full .cells i.on { background: linear-gradient(180deg, #fff3a6, #ffb14a); }
@keyframes rush { 50% { box-shadow: 0 0 0 3px var(--butter2); } }
.snackbar { display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.snackbar .cap { font-family: var(--pix); font-size: 10.5px; line-height: 1; color: var(--plum2); text-align: center; white-space: nowrap; letter-spacing: 0.02em; }
.items { display: flex; gap: 6px; }
.item { position: relative; min-width: 50px; min-height: 46px; border: 3px solid var(--plum); border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 3px; box-shadow: 0 3px 0 var(--plum); }
.item:disabled, .item.dim { opacity: 0.45; box-shadow: 0 1px 0 var(--plum); transform: translateY(2px); cursor: default; }
.item .n { position: absolute; right: -6px; bottom: -8px; background: var(--plum); color: #fff; font-size: 11px; font-family: var(--font); font-weight: 700; border-radius: 99px; padding: 1px 6px; }
.item.on { background: var(--butter); }
.item.passive { box-shadow: none; border-style: dashed; cursor: default; }
.item.passive.ready { background: #fff8d6; }
.item:active:not(:disabled):not(.passive):not(.dim) { transform: translateY(2px); box-shadow: 0 1px 0 var(--plum); }

/* question panel (battle + Hop School) */
.qp { background: var(--card); border: 3px solid var(--plum); border-radius: var(--r); padding: 14px; box-shadow: 0 5px 0 rgba(59, 35, 64, 0.18); overflow-wrap: anywhere; min-width: 0; }
/* (overflow-wrap is inherited: a long gene sequence or link in a stem, option, sentence, revealed answer or feedback wraps instead of pushing the frame sideways) */
.qp *, .fb { overflow-wrap: anywhere; }
.choice > span { min-width: 0; }
.qp .qtag { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.stem { font-family: var(--font); font-weight: 700; font-size: 18px; line-height: 1.45; color: var(--ink); margin: 2px 0 10px; }
/* a long stem (a patient case): a size smaller in a reading column, its closing question on its own line
   (two classes, so it wins over the .stem sizes for wide and small screens below) */
.stem.long { font-size: 16.5px; font-weight: 600; line-height: 1.5; max-width: 68ch; }
.stem .lead { display: block; margin-top: 8px; font-weight: 700; }
.qimg { margin: 6px 0 12px; text-align: center; }
.qimg img { max-height: 240px; border-radius: 12px; border: 2px solid var(--lav2); background: #fff; }
.choices { display: flex; flex-direction: column; gap: 8px; }
.choice {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; min-height: 50px;
  border: 3px solid var(--plum); border-radius: 14px; background: #fff; padding: 8px 12px;
  font-family: var(--font); font-weight: 600; font-size: 17px; line-height: 1.35; color: var(--ink);
  box-shadow: 0 3px 0 rgba(59, 35, 64, 0.35); transition: transform 0.08s, background 0.15s, opacity 0.2s;
}
.choice .L { flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--lav); border: 2px solid var(--plum); display: flex; align-items: center; justify-content: center; font-family: var(--pix); font-weight: 700; font-size: 16px; }
@media (hover: hover) { .choice:hover:not(:disabled) { background: var(--pink3); } }
.choice:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(59, 35, 64, 0.35); }
.choice:focus-visible { outline: 3px dashed var(--lav3); outline-offset: 2px; }
.choice:disabled { cursor: default; }
.choice.right { background: var(--goodbg); border-color: var(--good); box-shadow: 0 3px 0 var(--good); }
.choice.right .L { background: var(--mint2); }
.choice.wrong { background: var(--oopsbg); border-color: var(--oops); box-shadow: 0 3px 0 var(--oops); }
.choice.wrong .L { background: #ffc2d2; }
.choice.dim { opacity: 0.55; }
.choice.gone { opacity: 0.25; text-decoration: line-through; }
.choice.gone .L { background: #eee; }
.fillq .sent { font-size: 18px; line-height: 1.7; font-weight: 600; margin: 4px 0 12px; }
.fillq .blank { display: inline-block; min-width: 5.5em; border-bottom: 3px dashed var(--lav3); color: transparent; line-height: 1.1; vertical-align: baseline; }
.fillq .blank.cur { border-bottom-color: var(--rose); background: var(--pink3); border-radius: 4px 4px 0 0; }
.fillq .ans { padding: 0 4px; border-radius: 6px; font-weight: 700; }
.fillq .ans.ok { background: var(--goodbg); color: #1f7a4b; }
.fillq .ans.no { background: var(--oopsbg); color: #b8325b; }
.typer { display: flex; gap: 8px; }
.typer input { flex: 1; min-width: 0; min-height: 50px; border: 3px solid var(--plum); border-radius: 14px; padding: 8px 14px; font-size: 17px; font-weight: 600; background: #fff; }
.typer input:focus { outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px var(--pink3); }
.typer input:disabled { background: #f7f2f6; }
.idk { margin-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.linkbtn { border: 0; background: none; color: var(--ink2); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; font-size: 14px; min-height: 44px; padding: 0 4px; }
.fb { margin-top: 12px; border-radius: 14px; padding: 12px 14px; font-size: 16px; line-height: 1.45; border: 3px solid; animation: sayIn 0.25s ease-out both; }
.fb.ok { background: var(--goodbg); border-color: var(--good); }
.fb.no { background: var(--oopsbg); border-color: var(--oops); }
.fb .head { font-family: var(--pix); font-weight: 700; font-size: 18px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fb.ok .head { color: #1f7a4b; } /* (the green and rose, darkened to 4.7:1 on their backgrounds) */
.fb.no .head { color: #b8325b; }
/* "Did you mean …?" (a near miss on a fill-in) */
.fb.ask { background: var(--butter); border-color: var(--butter2); }
.fb.ask .head { color: var(--plum); }
.fb .ask-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.fb .ask-btns .bb { flex: 1 1 140px; min-height: 44px; }
.fb .ansline { margin-top: 4px; font-weight: 700; }
.fb .why { margin-top: 6px; color: var(--ink); font-weight: 600; }
.fb .obj { margin-top: 6px; font-size: 13px; color: var(--ink2); }
.fb details summary { cursor: pointer; font-weight: 700; color: var(--ink2); min-height: 44px; display: flex; align-items: center; }
.fb .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.qp-foot { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.qp-foot .bb { flex: 1 1 auto; }
.qp-foot .kbd { flex: 1 1 100%; text-align: center; }
.qp.answered .idk { display: none; }
@media (hover: none) { .qp > .kbd { display: none; } }
/* The landing demo (QUICK) fits its frame without scrolling: no header, snacks, chips or key hints,
   and once answered, the answer and why take the choices' place. */
.bt.quick .bt-top, .bt.quick .snackbar, .bt.quick .qtag, .bt.quick .qp > .kbd, .bt.quick .qp.answered .choices { display: none; }
.bt.quick .qp.answered .fb { margin-top: 10px; padding: 10px 12px; font-size: 15px; line-height: 1.4; }
@media (max-height: 599px) { .bt.quick .bt-hud { display: none; } }

/* small phones: the Sugar Rush meter and the four snacks share one row */
@media (max-width: 360px) {
  .bt-hud { flex-wrap: nowrap; }
  .sugar { flex: 1 1 0; padding: 5px 8px; }
  .sugar .sl { font-size: 11px; }
  .item { min-width: 44px; }
}
/* short, wide screens (a phone on its side, a laptop): the scene on the left, the question on the right
   (ui.js TWO_COL is the same query; it sizes the scene to this left column) */
@media (orientation: landscape) and (min-width: 560px) and (max-height: 900px) {
  .bt { display: grid; grid-template-columns: minmax(332px, 1.05fr) minmax(0, 1fr); column-gap: 12px; align-items: start; }
  .bt-left { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 6px; min-width: 0; }
  .bt-left .bt-stage { position: relative; top: auto; }
  .bt-left .bt-hud { flex-wrap: nowrap; }
  .bt-left .sugar { flex: 1 1 0; padding: 5px 8px; }
  .bt-left .item { min-width: 46px; }
  .bt-panel { min-width: 0; }
}
/* (a 320x568 phone on its side: a narrower scene column, so the question's has room; ui.js
   buildScene() uses the same 300px) */
@media (orientation: landscape) and (min-width: 560px) and (max-width: 599.98px) and (max-height: 900px) {
  .bt { grid-template-columns: minmax(300px, 1.05fr) minmax(0, 1fr); }
}

/* results */
.res { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: rgba(59, 35, 64, 0.38); padding: 12px; overflow: auto; animation: fadeIn 0.25s both; }
.res .res-card { width: min(640px, 100%); max-height: calc(100dvh - 24px); overflow: auto; margin: auto 0; background: var(--cream); border: 3px solid var(--plum); border-radius: 24px; padding: 18px 16px; box-shadow: 0 8px 0 rgba(59, 35, 64, 0.3); animation: slideUp 0.4s cubic-bezier(0.2, 1.2, 0.4, 1) both; }
@keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.res h2 { text-align: center; font-size: 30px; margin: 4px 0; }
.res .lead { text-align: center; color: var(--ink2); margin: 0 0 10px; }
.res-art { display: flex; justify-content: center; margin: 0 0 2px; }
.res-gold { display: flex; align-items: center; justify-content: center; gap: 6px; margin: -4px 0 8px; font-size: 14px; font-weight: 700; color: var(--plum2); text-align: center; }
.res .bigstars { display: flex; justify-content: center; gap: 8px; margin: 6px 0 10px; }
.res .bigstars canvas.pop { animation: starPop 0.5s cubic-bezier(0.2, 1.8, 0.4, 1) both; }
@keyframes starPop { from { transform: scale(0) rotate(-40deg); } to { transform: none; } }
.res .score { display: flex; justify-content: center; gap: 22px; margin: 6px 0 10px; text-align: center; }
.res .score b { display: block; font-family: var(--pix); font-size: 28px; color: var(--plum); }
.res .score span { font-size: 13px; color: var(--ink2); }
.loot { background: #fff; border: 2px solid rgba(59, 35, 64, 0.2); border-radius: 14px; padding: 8px 12px; margin: 8px 0; }
.loot div { display: flex; justify-content: space-between; padding: 3px 0; font-size: 15px; }
.loot .tot { border-top: 2px dashed var(--lav2); margin-top: 4px; padding-top: 6px; font-family: var(--pix); font-size: 17px; }
.missed h3 { margin: 12px 0 6px; }
.mrow { background: #fff; border: 2px solid rgba(59, 35, 64, 0.2); border-radius: 12px; margin: 6px 0; overflow-wrap: anywhere; }
.mrow > button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 10px 12px; min-height: 44px; font-weight: 600; font-size: 15px; line-height: 1.4; }
.mrow .a { display: block; color: #1f7a4b; font-weight: 700; margin-top: 3px; } /* (the green, darkened to 5:1 on white) */
.mrow .x { padding: 0 12px 10px; font-size: 14.5px; color: var(--ink); line-height: 1.45; }
.back-note { display: flex; align-items: flex-start; gap: 8px; background: var(--mint); border: 2px solid var(--plum); border-radius: 12px; padding: 8px 10px; margin: 10px 0 6px; font-size: 15px; line-height: 1.4; }
.back-note canvas { flex: none; margin-top: 1px; }
.back-note b { color: var(--plum); }
.unlock-note { text-align: center; background: var(--butter); border: 2px solid var(--plum); border-radius: 12px; padding: 8px; margin: 8px 0; font-weight: 700; }
.res-btns { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 14px; }
/* wide: the first button (and an odd one out at the end) full width; on a fight's results card, two
   buttons side by side */
@media (min-width: 520px) {
  .res-btns { grid-template-columns: 1fr 1fr; }
  .res-btns .bb:first-child, .res-btns .bb:last-child:nth-child(even) { grid-column: 1 / -1; }
  .res .res-btns .bb:first-child:nth-last-child(2), .res .res-btns .bb:last-child:nth-child(2) { grid-column: auto; }
}

/* ---------------------------------------------------------------- shop */
.shop-head { position: relative; border: 3px solid var(--plum); border-radius: 20px; overflow: hidden; box-shadow: 0 5px 0 rgba(59, 35, 64, 0.18); }
.shop-head canvas { display: block; }
.shop-head .clover { position: absolute; left: 4%; bottom: 6%; }
.shop-head .mochi { position: absolute; right: 6%; bottom: 6%; }
.clover-say { display: flex; gap: 10px; align-items: flex-start; }
.clover-say .bubble { flex: 1; margin: 10px 0 0; }
.clover-say .bubble::before { left: 26px; }
.tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: 1 0 auto; min-height: 44px; border: 3px solid var(--plum); border-radius: 12px; background: #fff; font-family: var(--pix); font-size: 15px; padding: 4px 12px; display: inline-flex; align-items: center; gap: 6px; }
.tabs button[aria-selected="true"] { background: var(--pink2); box-shadow: inset 0 -4px 0 rgba(59, 35, 64, 0.15); }
.goods { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 600px) { .goods { grid-template-columns: 1fr 1fr; } }
.good { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; background: #fff; border: 3px solid var(--plum); border-radius: 16px; padding: 10px; box-shadow: 0 4px 0 rgba(59, 35, 64, 0.15); }
.good .gi { width: 64px; height: 64px; border-radius: 12px; background: var(--pink3); display: flex; align-items: center; justify-content: center; border: 2px solid rgba(59, 35, 64, 0.2); }
.good h3 { margin: 0; font-size: 17px; }
.good .gd { font-size: 13.5px; color: var(--ink2); margin: 2px 0 4px; line-height: 1.35; }
.good .gs { font-size: 13px; font-weight: 700; color: var(--plum2); }
.good .gb { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; }
.good .gb .bb { flex: 1; }
.good.on { background: #fff8fb; border-color: var(--rose); }
.good.locked .gi { filter: grayscale(0.2); }

/* ---------------------------------------------------------------- Hop School */
/* (.scr-school: the Hop School screen; .card.school is the fruit page's Hop School card) */
.scr-school { display: flex; flex-direction: column; gap: 8px; }
.school-left, .school-right { min-width: 0; }
.school-top { margin: 4px 0 6px; flex-wrap: nowrap; }
.school-top .st { flex: 1; min-width: 0; line-height: 1.1; }
.school-top .st h2 { margin: 0; font-size: 22px; }
.school-top .st .sub { display: block; font-size: 13px; line-height: 1.25; overflow-wrap: anywhere; }
.school-top .lesson-n { font-family: var(--font); font-weight: 700; background: #fff; border-color: var(--plum); }
.school-art { position: relative; border: 3px solid var(--plum); border-radius: 18px; overflow: hidden; box-shadow: 0 5px 0 rgba(59, 35, 64, 0.18); }
.school-art canvas { display: block; }
.school-say { position: absolute; z-index: 3; left: 8px; top: 8px; max-width: min(72%, 360px); background: rgba(255, 255, 255, 0.95); border: 2px solid var(--plum); border-radius: 12px; padding: 4px 10px; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.school-say::after { content: ""; position: absolute; left: 22px; bottom: -7px; width: 10px; height: 10px; background: #fff; border-right: 2px solid var(--plum); border-bottom: 2px solid var(--plum); transform: rotate(45deg); }
.school-say.pop { animation: sayIn 0.3s ease-out both; }
.school-count { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; background: #fff; border: 3px solid var(--plum); border-radius: 14px; padding: 6px 10px; margin-top: 8px; }
.school-count .sb-line { flex: 1 0 100%; font-size: 13.5px; padding-left: 2px; }
.school-count .bar { flex: 1; min-width: 0; }
.school-count b { font-family: var(--font); font-weight: 700; font-size: 15px; color: var(--plum); white-space: nowrap; }
.learn-pop { position: absolute; z-index: 4; right: 3%; bottom: 60%; display: inline-flex; align-items: center; gap: 4px; font-family: var(--pix); font-size: 15px; color: #1f7a4b; background: #fff; border: 2px solid var(--good); border-radius: 999px; padding: 2px 8px 2px 4px; pointer-events: none; animation: learnPop 1.3s ease-out both; }
@keyframes learnPop { 0% { opacity: 0; transform: translateY(8px) scale(0.7); } 18% { opacity: 1; transform: translateY(0) scale(1.08); } 30% { transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-18px); } }
.school-art .bt-banner { animation-duration: 2.2s; top: 26%; }
.school-say:empty { display: none; }
.fb .learn-line { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding: 4px 10px 4px 6px; background: #fff; border: 2px solid var(--good); border-radius: 999px; width: fit-content; max-width: 100%; font-size: 14.5px; font-weight: 700; color: var(--plum); animation: sayIn 0.3s ease-out both; }
.fb .learn-line b { font-family: var(--pix); font-size: 16px; font-weight: 400; color: #1f7a4b; } /* (the green and rose, darkened to 5:1 for the pixel font) */
.fb .learn-line canvas { flex: none; }
.fb .learn-line.gate { border-radius: 14px; background: var(--butter); border-color: var(--plum); }
.fb .learn-line.gate b { color: #b8325b; }
.fb .learn-line span { flex: 1 1 auto; min-width: 0; }
.school-end { text-align: center; margin: 0; }
.school-end h2 { font-size: 26px; margin: 2px 0 6px; }
.school-end .big-line { font-family: var(--font); font-weight: 700; font-size: 20px; color: var(--plum); margin: 0 0 6px; }
.school-end .missed { text-align: left; }
/* Stop for now, under the question: what's learned is already saved */
.school-stop { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; margin: 10px 2px 4px; }
.school-stop[hidden] { display: none; }
.school-stop .sub { font-size: 13.5px; }
.school-stop .bb { margin-left: auto; }
@media (orientation: landscape) and (min-width: 560px) and (max-height: 900px) {
  .scr-school { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 1.1fr); column-gap: 14px; align-items: start; }
  .school-left { position: sticky; top: 6px; }
}
/* the shortest phones on their side (568x320): a little tighter, so the whole left column (the
   scene and the learned bar, which stay put while the question scrolls) fits on the screen */
@media (orientation: landscape) and (min-width: 560px) and (max-height: 340px) {
  .school-left { top: 4px; }
  .school-top { margin: 0 0 4px; }
  .school-count { margin-top: 6px; padding-top: 4px; padding-bottom: 4px; row-gap: 0; }
}

/* ---------------------------------------------------------------- shop note */
.shop-note { display: flex; align-items: center; gap: 6px; margin: 0 2px 8px; font-size: 14px; color: var(--ink2); }
.shop-note.snack { color: var(--plum); background: var(--pink3); border: 2px solid var(--pink); border-radius: 12px; padding: 6px 10px; font-weight: 700; }
.shop-note canvas { flex: none; }

/* ---------------------------------------------------------------- Mochi's Notebook (the Questions tab) */
.nb-key { margin: 0 2px 4px; font-size: 13px; }
.nb-state { display: flex; align-items: center; gap: 6px; margin: 10px 0 2px; color: var(--plum2); font-weight: 700; }
.nb-state.sb { color: #1f7a4b; }
.chip.sb { background: var(--goodbg); border-color: #1f7a4b; color: #1f7a4b; white-space: nowrap; }
.qrow .chips { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
@media (min-width: 540px) { .qrow .chips { flex-direction: row; align-items: center; } } /* (side by side when there's room: from a small phone on its side) */
.search { display: flex; gap: 8px; margin: 8px 0; }
.search input { flex: 1; min-width: 0; min-height: 48px; border: 3px solid var(--plum); border-radius: 14px; padding: 8px 14px; font-size: 16px; background: #fff; }
.search input:focus { outline: none; border-color: var(--rose); }
.search select { min-height: 48px; border: 3px solid var(--plum); border-radius: 14px; padding: 6px 8px; background: #fff; max-width: 45%; font-weight: 700; }
.filters { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filters button { min-height: 44px; flex: none; border: 2px solid var(--plum); background: #fff; border-radius: 99px; padding: 4px 12px; font-weight: 700; font-size: 14px; }
.filters button[aria-pressed="true"] { background: var(--plum2); color: #fff; }
.cx-stage { margin: 14px 0 6px; display: flex; align-items: center; gap: 2px 8px; flex-wrap: wrap; }
.cx-stage h3 { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 17px; }
.cx-stage .sub { white-space: nowrap; margin-left: auto; }
.qrow { display: flex; gap: 8px; align-items: flex-start; width: 100%; text-align: left; background: #fff; border: 2px solid rgba(59, 35, 64, 0.22); border-radius: 12px; padding: 10px 12px; margin: 6px 0; min-height: 48px; font-size: 15px; line-height: 1.4; font-weight: 600; }
.qrow:hover { border-color: var(--plum); }
.qrow .qt { flex: 1; min-width: 0; }
.qrow .qt-chip { display: block; margin-top: 5px; }
.qrow .k { flex: none; font-family: var(--pix); font-size: 12px; background: var(--lav); border-radius: 6px; padding: 1px 6px; margin-top: 2px; }
.qrow .k.fill { background: var(--peach2); }
.empty { text-align: center; color: var(--ink2); padding: 24px; }

/* ---------------------------------------------------------------- diary */
.profile { display: flex; gap: 14px; align-items: center; }
.profile .pic { flex: none; background: linear-gradient(180deg, #ffe3ee, #fff6d6); border: 3px solid var(--plum); border-radius: 18px; padding: 6px; }
.profile .gear { font-size: 14px; line-height: 1.6; min-width: 0; }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px), (orientation: landscape) and (min-width: 560px) and (max-height: 500px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tile { background: #fff; border: 3px solid var(--plum); border-radius: 16px; padding: 10px 12px; box-shadow: 0 4px 0 rgba(59, 35, 64, 0.15); min-width: 0; }
.tile b { display: block; font-family: var(--pix); font-size: 26px; color: var(--plum); line-height: 1.1; }
.tile span { font-size: 13px; color: var(--ink2); }
@media (max-width: 400px) { .tile { padding: 8px 10px; } .tile b { font-size: 22px; } .tile span { font-size: 12.5px; } }
.tile.pink { background: var(--pink3); } .tile.mint { background: var(--mint); } .tile.butter { background: var(--butter); } .tile.lav { background: var(--lav); }
.sbar { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 8px; align-items: center; margin: 8px 0; }
.sbar .nm { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbar .ct { font-size: 12.5px; color: var(--ink2); white-space: nowrap; }
.sbar .ct.lrn { display: flex; align-items: center; gap: 4px; margin-top: 3px; white-space: normal; line-height: 1.25; }
.sbar .ct.lrn canvas { max-width: none; }
.sbar .nw { white-space: nowrap; }
.days { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; align-items: end; height: 80px; margin-top: 8px; }
.days i { display: block; background: var(--pink); border: 2px solid var(--plum); border-radius: 5px 5px 2px 2px; min-height: 4px; }
.days i.zero { background: #f2e8ef; border-color: rgba(59, 35, 64, 0.25); }
.daylbl { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; font-size: 10px; color: var(--ink2); text-align: center; margin-top: 3px; }

/* ---------------------------------------------------------------- settings */
.set-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 2px dashed rgba(59, 35, 64, 0.12); flex-wrap: wrap; }
.set-row:last-child { border-bottom: 0; }
.set-row .lab { flex: 1 1 180px; min-width: 0; }
.set-row .lab b { display: block; font-size: 16px; }
.set-row .lab span { font-size: 13px; color: var(--ink2); }
.switch { position: relative; width: 70px; height: 44px; flex: none; border: 3px solid var(--plum); border-radius: 99px; background: #f1e6ee; padding: 0; }
.switch::after { content: ""; position: absolute; top: 4px; left: 4px; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid var(--plum); transition: transform 0.18s; }
.switch[aria-checked="true"] { background: var(--mint2); }
.switch[aria-checked="true"]::after { transform: translateX(26px); }
.switch:focus-visible { outline: 3px dashed var(--lav3); outline-offset: 2px; }
.seg { display: inline-flex; border: 3px solid var(--plum); border-radius: 14px; overflow: hidden; flex: none; }
.seg button { border: 0; background: #fff; min-height: 44px; padding: 4px 12px; font-weight: 700; font-size: 14px; }
.seg button + button { border-left: 2px solid var(--plum); }
.seg button[aria-pressed="true"] { background: var(--pink2); }
.vol { flex: 1 1 160px; accent-color: var(--rose); min-height: 44px; }

/* ---------------------------------------------------------------- dialogs + toasts */
.modal { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(59, 35, 64, 0.42); animation: fadeIn 0.18s both; }
.modal-card { width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: var(--cream); border: 3px solid var(--plum); border-radius: 22px; padding: 18px; box-shadow: 0 8px 0 rgba(59, 35, 64, 0.3); animation: slideUp 0.3s cubic-bezier(0.2, 1.2, 0.4, 1) both; }
.modal-card h2 { margin: 0 0 8px; }
.modal-card .row { margin-top: 14px; }
#toasts { position: fixed; left: 50%; top: 10px; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; width: min(440px, calc(100vw - 24px)); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; background: #fff; border: 3px solid var(--plum); border-radius: 16px; padding: 8px 12px; box-shadow: 0 5px 0 rgba(59, 35, 64, 0.25); font-size: 15px; animation: toastIn 0.35s cubic-bezier(0.2, 1.4, 0.4, 1) both; pointer-events: none; }
/* In a battle, toasts sit at the bottom, clear of the Run button and the fruit's name. */
body.in-battle #toasts { top: auto; bottom: calc(12px + var(--safe-b)); }
.toast.out { animation: toastOut 0.25s ease-in both; }
.toast canvas { flex: none; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-16px) scale(0.95); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-10px); } }

/* ---------------------------------------------------------------- guided tour */
.tour { position: fixed; inset: 0; z-index: 80; }
.tour-spot { position: fixed; left: 0; top: 0; width: 0; height: 0; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(43, 25, 50, 0.6); border: 3px dashed #fff; transition: transform 0.35s, width 0.35s, height 0.35s; pointer-events: none; }
.tour-spot.none { box-shadow: 0 0 0 9999px rgba(43, 25, 50, 0.6); border: 0; }
.tour-dock { position: fixed; left: 0; right: 0; display: flex; justify-content: center; padding: 12px; pointer-events: none; }
.tour-dock.d-bottom { bottom: 0; padding-bottom: calc(12px + var(--safe-b)); }
.tour-dock.d-top { top: 0; }
.tour-dock.d-center { top: 50%; transform: translateY(-50%); }
/* beside the battle's scene when it has its own column */
.tour-dock.d-right { top: 0; bottom: 0; left: max(52%, 346px); align-items: center; padding-bottom: calc(12px + var(--safe-b)); }
/* Hop School in two columns: over the scene's column while the step is about the question */
.tour-dock.d-left { top: 0; bottom: 0; right: max(50%, 320px); align-items: center; padding-bottom: calc(12px + var(--safe-b)); }
/* (560-599 wide: the battle's scene column is 300px, so the card can start sooner) */
@media (max-width: 599.98px) { body.in-battle .tour-dock.d-right { left: 322px; } }
.tour-card { pointer-events: auto; width: min(480px, 100%); background: var(--cream); border: 3px solid var(--plum); border-radius: 20px; padding: 14px; box-shadow: 0 6px 0 rgba(59, 35, 64, 0.35); animation: slideUp 0.3s cubic-bezier(0.2, 1.2, 0.4, 1) both; }
.tour-card .th { display: flex; align-items: center; gap: 8px; }
.tour-card .th h2 { flex: 1; margin: 0; font-size: 19px; }
.tour-card .cnt { font-family: var(--pix); font-size: 13px; color: var(--ink2); }
.tour-card .tb { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 10px; }
.tour-card .tb p { margin: 0; font-size: 15.5px; line-height: 1.45; }
.tour-card .tb canvas { flex: none; background: var(--pink3); border-radius: 12px; border: 2px solid var(--plum); }
.tour-card .tf { display: flex; gap: 8px; align-items: center; }
.tour-card .tf .sp { flex: 1; }
/* short or narrow screens: a smaller card, so what it's about has room */
@media (max-height: 700px), (max-width: 360px) {
  .tour-dock { padding: 8px; }
  .tour-dock.d-bottom { padding-bottom: calc(8px + var(--safe-b)); }
  .tour-card { padding: 10px 12px; border-radius: 16px; }
  .tour-card .th h2 { font-size: 17px; }
  .tour-card .tb { margin: 6px 0 8px; gap: 8px; }
  .tour-card .tb p { font-size: 14.5px; line-height: 1.38; }
  .tour-card .tb canvas { width: 32px !important; height: 32px !important; }
}
/* a very short screen (a small phone on its side): no room for Clover's picture, and a tighter card */
@media (max-height: 360px) {
  .tour-card { padding: 8px; }
  .tour-card .th h2 { font-size: 15.5px; }
  .tour-card .tb { margin: 4px 0 6px; }
  .tour-card .tb canvas { display: none; }
  .tour-card .tb p { font-size: 13.5px; line-height: 1.32; }
  /* (the footer fits a 206px card, the narrowest a side dock gets at 568x320) */
  .tour-card .tf { gap: 4px; }
  .tour-card .tf .sp { margin-right: -4px; }
  .tour-card .tf .bb { min-height: 40px; padding: 4px 8px; font-size: 14px; white-space: nowrap; }
  .tour-card .tf .bb.icon { min-width: 34px; padding: 4px 6px; }
}

/* ---------------------------------------------------------------- reduced motion */
body.rm *, body.rm *::before, body.rm *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
body.rm .bt-banner { animation: none; }
body.rm .learn-pop { animation: none; }
body.rm .scr { animation: none; }

/* ---------------------------------------------------------------- wider screens */
@media (min-width: 720px) {
  #app { padding: 0 20px 20px; }
  .stem { font-size: 19px; }
  .lair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; margin-top: 6px; }
  .lair-right .card:first-child { margin-top: 0; }
  .lair-right > .gate-box.first { margin-top: 0; }
}
/* a phone on its side: the results card can't show everything at once, so its buttons stay in view
   at the bottom of the card until they scroll into place (above the list of the missed ones) */
@media (max-height: 500px) and (min-width: 520px) {
  .res .res-btns { position: sticky; bottom: -18px; z-index: 1; background: var(--cream); margin: 10px 0 -18px; padding: 8px 0 18px; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; } /* (-18px: the card's padding) */
  .res .res-btns .bb { grid-column: auto !important; } /* (all in one row) */
  body.touring .res .res-btns { position: static; margin-bottom: 0; padding-bottom: 0; } /* (the tour scrolls the card itself) */
}
/* a phone on its side (568-719 wide): two columns on a fruit's page too, so Train and Battle! are
   beside the fruit, on screen on arrival, instead of under its full-width picture */
@media (orientation: landscape) and (min-width: 560px) and (max-height: 500px) {
  .lair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; margin-top: 6px; }
  .lair-right .card:first-child { margin-top: 0; }
  .lair-right > .gate-box.first { margin-top: 0; }
  .lair-right .card.school { padding: 10px 14px; }
  .lair-right .card.school .sline { margin-bottom: 6px; }
  .lair-right .lair-btns { margin-top: 10px; gap: 8px; }
  .lair-right .lair-btns .bb.big { min-height: 50px; padding: 8px 20px; }
}
/* (a 320x568 phone on its side: tighter still, so the card and both buttons fit above the menu) */
@media (orientation: landscape) and (min-width: 560px) and (max-height: 360px) {
  .lair-right .card.school { padding: 8px 12px; }
  .lair-right .card.school .sline { gap: 6px; margin-bottom: 4px; }
  .lair-right .card.school .sline canvas { width: 22px !important; height: 22px !important; }
  .lair-right .card.school .sline b { font-size: 17px; }
  .lair-right .card.school .sline .cnt { font-size: 14.5px; }
  .lair-right .card.school .why { margin-top: 4px; }
  .lair-right .lair-btns { margin-top: 8px; gap: 6px; }
  .lair-right .lair-btns .bb, .lair-right .lair-btns .bb.big { min-height: 44px; padding: 6px 16px; }
  .lair-right .gate-lock { gap: 4px; }
}
@media (max-width: 360px) {
  .bb { font-size: 16px; padding: 8px 12px; }
  .bb.big { font-size: 20px; }
  .stem, .choice, .fillq .sent { font-size: 17px; }
  .nav button { font-size: 11px; }
  .hud .purse { font-size: 17px; }
}
/* the tour needs room to scroll any target above its card */
body.touring #app { padding-bottom: 75vh; }
body.touring .res .res-card { padding-bottom: 50vh; }

/* tapped (not keyboard) focus: no ring */
body.ptr .bb:focus-visible, body.ptr .choice:focus-visible, body.ptr .nav button:focus-visible { outline: none; }

.sbar canvas, .cx-stage canvas { max-width: 52px; height: auto !important; }
.profile { flex-wrap: wrap; }
.profile .gear { flex: 1 1 150px; }
.narrow { display: none; }
@media (max-width: 380px) {
  .hud .title { display: none; }
  .hud .wide { display: none; }
  .hud .narrow { display: inline; }
  .nav button { font-size: 11px; padding: 4px 0; }
}
/* the shop's four tabs fit a phone's width without scrolling: no icons below 430px */
@media (max-width: 429.98px) {
  .tabs button { padding: 4px 8px; font-size: 14px; gap: 4px; }
  .tabs button canvas { display: none; }
}

/* ---- Study Buddy (the app): the share page around the game has the header and the sign-in, so
   the game starts at the top; a fruit with several objectives lists them. ---- */
#app { padding-top: 8px; }
.objective ul.objs { margin: 6px 0 0; padding: 0; list-style: none; }
.objective ul.objs li { margin: 5px 0; line-height: 1.4; }
.objective ul.objs b { color: var(--plum2); }
.title-btns .oops-card p.sub { overflow-wrap: anywhere; }