/* Novamon - shared look for every page.
   Night-sky background so the eggs' white sticker borders pop; cream cards; gold XP. */

/* Fonts (Kyle chose Baloo 2, 2026-10-15): one friendly, rounded family for everything - extra
   bold for titles, semi-bold for text. A free Google Font (Open Font License), so it's fine on
   the public website. Fredoka is the backup. (Before this: Humongous of Eternity + Traffolight;
   their files stay in siteonts only for fonts.html's comparison - don't publish them.) */

:root {
  --sky-1: #0c2233;
  --sky-2: #17405a;
  --sky-3: #24607d;
  --card: #fff7e6;
  --card-2: #fdebc8;
  --ink: #1d2433;
  --ink-soft: #55607a;
  --line: #e7d3ad;
  --brand: #f2542d;
  --brand-dark: #b8340f;
  --gold: #ffc93c;
  --gold-dark: #c98a00;
  --good: #2f9e5a;
  --bad: #d63a3a;
  --radius: 22px;
  --shadow: 0 10px 0 rgba(0, 0, 0, .18), 0 18px 40px rgba(0, 0, 0, .28);
  --font: "Baloo 2", "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --title-font: "Baloo 2", "Fredoka", system-ui, sans-serif;
}

/* Big titles: Baloo 2 at its boldest */
h1, h2, .section-title, .modal-card h2, .card h2 {
  font-family: var(--title-font);
  font-weight: 800;
  line-height: 1.15;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  font-family: var(--font);
  font-weight: 600;
  line-height: 1.35;
  font-synthesis: none;
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, .10) 0 2px, transparent 3px) 0 0 / 90px 90px,
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, .07) 0 1.5px, transparent 2.5px) 0 0 / 130px 130px,
    radial-gradient(ellipse at 50% 0%, var(--sky-3) 0%, var(--sky-2) 40%, var(--sky-1) 100%) fixed;
  background-color: var(--sky-1);
  -webkit-font-smoothing: antialiased;
}

button, input, textarea { font-family: inherit; font-weight: inherit; }

.hidden { display: none !important; }

.wrap {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 16px 60px;
}

/* ---------------------------------------------------------------- logo -- */

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 18px 0 6px;
}
.logo-word {
  font-weight: 700;
  font-size: clamp(44px, 11vw, 84px);
  letter-spacing: .04em;
  line-height: 1;
  color: var(--gold);
  -webkit-text-stroke: 3px #7a2a0c;
  paint-order: stroke fill;
  text-shadow: 0 6px 0 var(--brand-dark), 0 12px 24px rgba(0, 0, 0, .35);
}
.logo img.logo-egg { width: clamp(54px, 12vw, 92px); flex: none; }
.tagline {
  text-align: center;
  color: #d8ecf5;
  font-size: clamp(17px, 4vw, 21px);
  margin: 6px 0 26px;
}

/* --------------------------------------------------------------- cards -- */

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 24px;
}
.card.narrow { max-width: 460px; margin: 0 auto; }
.logo + .card { margin-top: 26px; }
.card h2 { margin: 0 0 6px; font-size: 30px; }
.card p { margin: 6px 0; font-size: 18px; color: var(--ink-soft); line-height: 1.4; }

.section-title {
  color: #fff;
  text-align: center;
  font-size: clamp(24px, 6vw, 34px);
  font-weight: 700;
  margin: 8px 0 4px;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .25);
}
.section-sub {
  color: #cfe3ee;
  text-align: center;
  font-size: 18px;
  margin: 0 0 22px;
}

/* ------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 16px;
  padding: 14px 22px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  color: #fff;
  background: var(--brand);
  box-shadow: 0 5px 0 var(--brand-dark);
  transition: transform .08s, box-shadow .08s, filter .15s;
  touch-action: manipulation;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--brand-dark); }
.btn:disabled { filter: grayscale(.6) opacity(.6); cursor: default; }
.btn.wide { width: 100%; }
.btn.gold { background: var(--gold); color: #3b2a00; box-shadow: 0 5px 0 var(--gold-dark); }
.btn.quiet {
  background: transparent; color: var(--ink-soft); box-shadow: none;
  font-size: 17px; padding: 10px 12px; text-decoration: underline;
}
.btn.ghost {
  background: rgba(255, 255, 255, .12); color: #fff; box-shadow: none;
  border: 2px solid rgba(255, 255, 255, .35); font-size: 16px; padding: 8px 14px;
}

/* ---------------------------------------------------------- name grid -- */

.names {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
}
.name-btn {
  border: 0;
  border-radius: 16px;
  padding: 16px 10px;
  font-size: 21px;
  font-weight: 600;
  color: var(--ink);
  background: var(--card);
  box-shadow: 0 5px 0 var(--line);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .08s, box-shadow .08s, background .15s;
}
.name-btn:hover { background: #fff; }
.name-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--line); }
/* prototype only: the made-up students, under the real class */
.names-head {
  grid-column: 1 / -1;
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 2px dashed rgba(255, 255, 255, .25);
  color: #ffe08a;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
}
.names-head:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.name-btn.pretend { font-size: 18px; padding: 12px 8px; opacity: .85; }

/* -------------------------------------------------------------- forms -- */

.field { position: relative; margin: 18px 0 10px; }
.field input {
  width: 100%;
  font-family: inherit;
  font-size: 22px;
  padding: 14px 92px 14px 16px;
  border-radius: 14px;
  border: 3px solid var(--line);
  background: #fff;
  color: var(--ink);
  outline: none;
}
.field input:focus { border-color: var(--gold-dark); }
.field .peek {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: 0; background: var(--card-2); color: var(--ink-soft);
  font-size: 15px; font-weight: 600; padding: 8px 10px; border-radius: 10px; cursor: pointer;
}
.warn-note {
  background: #fff1d0; border-radius: 12px; padding: 10px 12px;
  font-size: 16px !important; color: #7a5200 !important;
}
.msg { min-height: 26px; font-size: 18px; font-weight: 600; margin: 6px 0 10px; }
.msg.bad { color: var(--bad); }
.msg.good { color: var(--good); }

.shake { animation: shake .4s; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px); }
  40% { transform: translateX(10px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

/* -------------------------------------------------------------- eggs -- */

/* Every egg picture is a square with the egg standing on the same spot (bottom at 98%),
   so they all rock on their base the same way. */
.egg {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 97%;
  animation: wiggle 3.4s ease-in-out infinite;
  -webkit-user-drag: none;
  user-select: none;
}
.egg.excited { animation: wiggle-fast 1.1s ease-in-out infinite; }

@keyframes wiggle {
  0%, 60%, 100% { transform: rotate(0deg); }
  65% { transform: rotate(-9deg); }
  71% { transform: rotate(8deg); }
  77% { transform: rotate(-6deg); }
  83% { transform: rotate(4deg); }
  89% { transform: rotate(-2deg); }
  94% { transform: rotate(0deg); }
}
@keyframes wiggle-fast {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(-10deg); }
  35% { transform: rotate(9deg); }
  55% { transform: rotate(-7deg); }
  75% { transform: rotate(5deg); }
  90% { transform: rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .egg, .egg.excited { animation: none; }
}

.egg-stage { position: relative; margin: 0 auto; isolation: isolate; }
.egg-stage::after {                       /* a soft shadow on the ground */
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 0;
  height: 7%; border-radius: 50%;
  background: rgba(0, 0, 0, .28); filter: blur(4px); z-index: -1;
}

.types { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 8px 0 0; }
.type {
  font-size: 15px; font-weight: 600; letter-spacing: .03em;
  padding: 4px 12px; border-radius: 999px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15);
}

/* the three first eggs */
.offers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.offer {
  border: 0; text-align: center; cursor: pointer;
  background: var(--card); border-radius: var(--radius);
  padding: 16px 12px 18px; box-shadow: 0 6px 0 var(--line), 0 14px 30px rgba(0, 0, 0, .25);
  transition: transform .15s, box-shadow .15s, outline-color .15s;
  outline: 5px solid transparent; outline-offset: 3px;
  touch-action: manipulation;
}
.offer:hover { transform: translateY(-3px); }
.offer.picked { outline-color: var(--gold); transform: translateY(-6px) scale(1.03); }
.offer .egg-stage { width: 82%; }
.offer-name { font-size: 20px; font-weight: 700; margin-top: 8px; color: var(--ink); }
.pick-bar { text-align: center; margin-top: 26px; min-height: 70px; }

/* ---------------------------------------------------------------- home -- */

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 18px;
}
.mini-logo {
  font-weight: 700; font-size: 26px; color: var(--gold);
  -webkit-text-stroke: 1.5px #7a2a0c; paint-order: stroke fill;
  text-shadow: 0 3px 0 var(--brand-dark);
}
.top-right { display: flex; align-items: center; gap: 10px; }

.xp-pill {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gold); color: #3b2a00;
  border-radius: 999px; padding: 8px 18px 8px 10px;
  font-size: 24px; font-weight: 700;
  box-shadow: 0 4px 0 var(--gold-dark);
  white-space: nowrap;
}
.xp-coin {
  width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6c9, #ffd75a 45%, #e0a100 100%);
  border: 3px solid #b77a00;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #7a4f00;
}
.xp-pop {
  position: absolute; right: 8px; top: -6px;
  font-size: 20px; font-weight: 700; color: #fff;
  text-shadow: 0 2px 0 var(--good), 0 0 8px rgba(0, 0, 0, .4);
  animation: pop-up 1.6s ease-out forwards; pointer-events: none;
}
@keyframes pop-up {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateY(-46px); opacity: 0; }
}

.trainer { color: #fff; font-size: 20px; font-weight: 600; }
.teacher-banner {
  background: #ffe08a; color: #5a3d00; border-radius: 14px;
  padding: 10px 14px; font-size: 16px; font-weight: 600; margin-bottom: 14px; text-align: center;
}

.home-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 22px;
  align-items: start;
}
.egg-card { text-align: center; padding-top: 30px; }
.egg-card .egg-stage { width: min(78%, 360px); }
.egg-card h2 { margin-top: 14px; }
.today-chip {
  display: inline-block; margin-top: 14px;
  background: #e5f6ea; color: var(--good);
  font-size: 18px; font-weight: 600; padding: 6px 14px; border-radius: 999px;
}
.today-chip.zero { background: #eef0f4; color: var(--ink-soft); }

.balance-card h3 { margin: 0 0 4px; font-size: 22px; }
.big-balance { font-size: 56px; font-weight: 700; line-height: 1.05; color: var(--ink); }
.big-balance small { font-size: 24px; color: var(--ink-soft); font-weight: 600; }
.ledger { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 14px 0 6px; font-size: 18px; }
.ledger div:nth-child(even) { text-align: right; font-weight: 600; }
.hint {
  margin-top: 16px; background: var(--card-2); border-radius: 14px; padding: 14px;
  font-size: 17px; line-height: 1.45; color: #5b4a2c;
}
.hint b { color: var(--ink); }

/* ------------------------------------------------- warming and hatching -- */

.home-stage { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; }
.home-stage.cold { cursor: default; }
.egg-bump { position: relative; transform-origin: 50% 97%; }
.egg-bump img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.egg-bump.bump { animation: bump .35s ease-out; }
@keyframes bump {
  0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 150, 40, 0)); }
  35% { transform: scale(1.06, .95); filter: drop-shadow(0 0 22px rgba(255, 150, 40, .95)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 150, 40, 0)); }
}

/* The closer it gets, the more it wiggles. */
.egg.warm-1 { animation: wiggle 2.6s ease-in-out infinite; }
.egg.warm-2 { animation: wiggle-more 1.9s ease-in-out infinite; }
.egg.warm-3 { animation: wiggle-lots 1.35s ease-in-out infinite; }
.egg.ready { animation: shake-ready .5s ease-in-out infinite; }
.egg.hatching { animation: shake-hard .11s linear infinite; }
@keyframes wiggle-more {
  0%, 50%, 100% { transform: rotate(0deg); }
  56% { transform: rotate(-12deg); }
  63% { transform: rotate(11deg); }
  70% { transform: rotate(-9deg); }
  77% { transform: rotate(6deg); }
  84% { transform: rotate(-3deg); }
  90% { transform: rotate(0deg); }
}
@keyframes wiggle-lots {
  0%, 36%, 100% { transform: rotate(0deg); }
  42% { transform: rotate(-14deg); }
  50% { transform: rotate(13deg); }
  58% { transform: rotate(-12deg); }
  66% { transform: rotate(10deg); }
  74% { transform: rotate(-7deg); }
  82% { transform: rotate(4deg); }
  90% { transform: rotate(0deg); }
}
@keyframes shake-ready {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(7deg); }
}
@keyframes shake-hard {
  0% { transform: translate(0, 0) rotate(-9deg); }
  25% { transform: translate(-6px, 2px) rotate(8deg); }
  50% { transform: translate(5px, -2px) rotate(-10deg); }
  75% { transform: translate(-4px, 1px) rotate(9deg); }
  100% { transform: translate(0, 0) rotate(-9deg); }
}

/* Cracks: a white halo under a dark line, so they show on light AND dark shells. */
.cracks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.cracks path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cracks .halo { stroke: rgba(255, 255, 255, .92); stroke-width: 30; }
.cracks .line { stroke: #24160d; stroke-width: 13; }
.cracks g { opacity: 0; transition: opacity .3s; }
.warm-1 .c1, .warm-2 .c1, .warm-3 .c1, .ready .c1, .hatching .c1,
.warm-2 .c2, .warm-3 .c2, .ready .c2, .hatching .c2,
.warm-3 .c3, .ready .c3, .hatching .c3,
.hatching .c4 { opacity: 1; }
.cracks g.fresh .line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw-crack .5s ease-out forwards; }
.cracks g.fresh .halo { animation: halo-in .5s ease-out; }
@keyframes draw-crack { to { stroke-dashoffset: 0; } }
@keyframes halo-in { from { opacity: 0; } to { opacity: 1; } }

.warm-pop {
  position: absolute; left: 50%; top: 18%; transform: translateX(-50%);
  font-size: 26px; font-weight: 700; color: #ff8a2a; pointer-events: none;
  text-shadow: 0 2px 0 #fff, 0 0 10px rgba(255, 255, 255, .9);
  animation: warm-pop 1s ease-out forwards; z-index: 3;
}
@keyframes warm-pop {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(.8); }
  20% { opacity: 1; transform: translate(-50%, 0) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -60px) scale(1); }
}

.warm-box { margin: 16px auto 0; max-width: 380px; }
.warm-bar {
  height: 22px; border-radius: 999px; background: #efe1c3; overflow: hidden;
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, .08);
}
.warm-fill {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #ffb340, #ff6a2a);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .12);
  transition: width .35s ease-out;
}
.warm-text { font-size: 18px; font-weight: 600; margin: 8px 0 12px; color: var(--ink); }
.warm-text span { color: var(--ink-soft); font-weight: 500; }
.warm-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.warm-btns .btn { flex: 1 1 150px; font-size: 18px; padding: 12px 12px; white-space: nowrap; }
.warm-tip { min-height: 24px; margin-top: 10px; font-size: 16px; color: var(--ink-soft); }
.warm-tip.bad { color: var(--bad); font-weight: 600; }
.btn.big { font-size: 24px; padding: 16px 26px; width: 100%; animation: ready-pulse 1.2s ease-in-out infinite; }
@keyframes ready-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* hatching */
.half { position: absolute; left: 0; top: 0; width: 100%; height: auto; pointer-events: none; z-index: 2; }
/* The split follows the big middle crack (c3 in index.html): same points, as percentages. */
.half-top { clip-path: polygon(0% 0%, 100% 0%, 100% 57.3%, 86.2% 57.3%, 80% 53.5%, 73% 60%, 65% 54%, 58% 60.5%, 50% 53.5%, 42% 60%, 35% 53%, 27% 59%, 21% 52%, 13.8% 56%, 0% 56%); }
.half-bottom { clip-path: polygon(0% 56%, 13.8% 56%, 21% 52%, 27% 59%, 35% 53%, 42% 60%, 50% 53.5%, 58% 60.5%, 65% 54%, 73% 60%, 80% 53.5%, 86.2% 57.3%, 100% 57.3%, 100% 100%, 0% 100%); }
.half-top.fly { animation: fly-top 1s ease-out forwards; }
.half-bottom.fly { animation: fly-bottom 1s ease-in forwards; }
@keyframes fly-top {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(-30%, -70%) rotate(-40deg); opacity: 0; }
}
@keyframes fly-bottom {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(18%, 45%) rotate(18deg); opacity: 0; }
}
.flash {
  position: absolute; inset: -25%; border-radius: 50%; pointer-events: none; z-index: 4; opacity: 0;
  background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, .9) 35%, rgba(255, 255, 255, 0) 70%);
}
.flash.on { animation: flash .9s ease-out forwards; }
@keyframes flash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
.burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 3; pointer-events: none; }
.burst i {
  position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--c, #ffc93c); box-shadow: 0 0 0 3px #fff;
  animation: burst 1.1s ease-out forwards;
}
@keyframes burst {
  0% { transform: translate(0, 0) scale(.4); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; }
}

/* the monster (a placeholder shadow monster until the real art exists) */
.monster { position: relative; z-index: 1; }
.monster svg { display: block; width: 100%; height: auto; overflow: visible; }
.monster .bob { animation: bob 2.4s ease-in-out infinite; transform-origin: 50% 92%; transform-box: fill-box; }
.monster.pop { animation: monster-pop .7s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes bob {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  50% { transform: translateY(-10px) scale(.98, 1.02); }
}
@keyframes monster-pop {
  0% { transform: scale(.2); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.monster .eye { animation: blink 4.5s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }

.hatch-banner {
  position: absolute; left: 50%; top: -20px; transform: translateX(-50%); z-index: 5;
  background: var(--gold); color: #3b2a00; font-size: 26px; font-weight: 700;
  padding: 6px 22px; border-radius: 999px; box-shadow: 0 4px 0 var(--gold-dark);
  animation: banner-in .6s cubic-bezier(.2, 1.6, .4, 1) both; white-space: nowrap;
}
@keyframes banner-in { from { transform: translateX(-50%) scale(.3); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
.egg-card { position: relative; }
.monster-note { margin: 10px 0 0 !important; font-size: 18px !important; }
.soon-chip {
  display: inline-block; margin-top: 14px; background: #ece6ff; color: #4b3aa0;
  font-size: 17px; font-weight: 600; padding: 6px 14px; border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
  .egg[class], .egg-bump.bump, .monster .bob, .monster .eye, .btn.big { animation: none !important; }
}

/* --------------------------------------------------------- title screen -- */
/* The scene keeps the picture's shape and covers the screen (cropping the edges), so the
   glows always sit on the torches, moon and roots. The logo and the words follow the screen. */

.title-screen {
  position: fixed; inset: 0; overflow: hidden; z-index: 50; cursor: pointer;
  background: #2a2160; -webkit-tap-highlight-color: transparent; user-select: none;
  transition: opacity .6s ease;
}
.title-screen.leaving { opacity: 0; pointer-events: none; }
.title-scene {
  --ratio: 1.7917;                                  /* 1376 x 768 */
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: max(100vw, calc(100vh * var(--ratio)));
  height: max(100vh, calc(100vw / var(--ratio)));
  background: url("art/title/wide.webp") center / 100% 100% no-repeat;
}
.glow { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; mix-blend-mode: screen; }
.glow.torch {
  width: 7%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255, 200, 90, .85) 0%, rgba(255, 140, 40, .45) 35%, rgba(255, 120, 30, 0) 70%);
  animation: flicker 1.7s ease-in-out infinite;
}
.glow.t1 { left: 5.9%; top: 66.7%; animation-duration: 1.6s; }
.glow.t2 { left: 13.0%; top: 63.1%; animation-duration: 2.1s; animation-delay: -.7s; width: 5.5%; }
.glow.t3 { left: 88.1%; top: 64.9%; animation-duration: 1.9s; animation-delay: -1.1s; width: 5.5%; }
.glow.t4 { left: 94.9%; top: 61.6%; animation-duration: 1.5s; animation-delay: -.3s; }
@keyframes flicker {
  0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(1); }
  20% { opacity: 1; transform: translate(-50%, -52%) scale(1.12); }
  40% { opacity: .62; transform: translate(-50%, -50%) scale(.94); }
  60% { opacity: .95; transform: translate(-50%, -51%) scale(1.06); }
  80% { opacity: .7; transform: translate(-50%, -50%) scale(.98); }
}
.glow.moon {
  left: 10.4%; top: 38.4%; width: 16%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255, 246, 200, .55) 0%, rgba(255, 240, 180, .18) 40%, rgba(255, 240, 180, 0) 70%);
  animation: breathe 5s ease-in-out infinite;
}
.glow.roots {
  left: 48%; top: 75%; width: 46%; height: 16%;
  background: radial-gradient(ellipse, rgba(255, 210, 110, .40) 0%, rgba(255, 190, 80, .14) 45%, rgba(255, 190, 80, 0) 72%);
  animation: breathe 4s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}
.fireflies { position: absolute; inset: 0; pointer-events: none; }
.fireflies i {
  position: absolute; width: .55%; aspect-ratio: 1; border-radius: 50%;
  background: #f4ffb0; box-shadow: 0 0 8px 3px rgba(220, 255, 140, .75);
  animation: drift var(--dur, 9s) ease-in-out var(--delay, 0s) infinite, blink var(--blink, 2.6s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes drift {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(var(--dx1), var(--dy1)); }
  50% { transform: translate(var(--dx2), var(--dy2)); }
  75% { transform: translate(var(--dx3), var(--dy3)); }
}
@keyframes blink {
  0%, 100% { opacity: .15; }
  50% { opacity: 1; }
}
.title-logo {
  position: absolute; left: 50%; top: 4vh; transform: translateX(-50%);
  width: min(62vw, 86vh, 920px); height: auto; pointer-events: none;
  animation: logo-in 1.2s cubic-bezier(.2, 1.3, .4, 1) both, logo-float 5s ease-in-out 1.2s infinite;
}
@keyframes logo-in {
  from { opacity: 0; transform: translateX(-50%) scale(.7); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}
@keyframes logo-float {
  0%, 100% { transform: translateX(-50%) translateY(0); filter: drop-shadow(0 0 0 rgba(80, 255, 230, 0)); }
  50% { transform: translateX(-50%) translateY(-6px); filter: drop-shadow(0 0 18px rgba(80, 255, 230, .55)); }
}
.title-prompt {
  position: absolute; left: 0; right: 0; bottom: 7vh; text-align: center; pointer-events: none;
  color: #fff; font-size: clamp(20px, 2.6vw, 34px); font-weight: 600; letter-spacing: .01em;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .45), 0 0 16px rgba(0, 0, 0, .55);
  animation: prompt-pulse 2.2s ease-in-out infinite;
}
@keyframes prompt-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
.say-tap { display: none; }
@media (hover: none) and (pointer: coarse) {
  .say-click { display: none; }
  .say-tap { display: inline; }
}
@media (max-aspect-ratio: 1/1) {
  .title-scene { --ratio: .5581; background-image: url("art/title/tall.webp"); }   /* 768 x 1376 */
  .glow.torch { width: 10%; }
  .glow.t1 { left: 5.2%; top: 79.5%; }
  .glow.t2 { left: 12.4%; top: 78.4%; width: 8%; }
  .glow.t3 { left: 89.3%; top: 79%; width: 8%; }
  .glow.t4 { left: 96.2%; top: 77.9%; }
  .glow.moon { left: 10.1%; top: 57.6%; width: 22%; }
  .glow.roots { left: 52%; top: 83%; width: 80%; height: 10%; }
  .fireflies i { width: 1.1%; }
  .title-logo { top: 12vh; width: min(94vw, 64vh); }
  .title-prompt { font-size: clamp(20px, 5.6vw, 30px); bottom: 6vh; }
}
@media (prefers-reduced-motion: reduce) {
  .glow, .fireflies i, .title-logo, .title-prompt { animation: none !important; }
}

/* the real logo on the inside pages */
.logo .logo-img { width: min(430px, 82vw); height: auto; display: block; }
.mini-logo-img { height: 46px; width: auto; display: block; }
.proto-link { text-align: center; margin: 28px 0 0; }
.proto-link a { color: #ffe08a; font-size: 16px; font-weight: 600; }

/* ------------------------------------------------------- pick a trainer -- */

.trainers {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px;
}
.trainer-card {
  border: 0; cursor: pointer; background: var(--card); border-radius: var(--radius);
  padding: 14px 8px 10px; box-shadow: 0 6px 0 var(--line), 0 14px 30px rgba(0, 0, 0, .25);
  outline: 5px solid transparent; outline-offset: 3px; touch-action: manipulation;
  transition: transform .15s, outline-color .15s;
}
.trainer-card:hover { transform: translateY(-3px); }
.trainer-card.picked { outline-color: var(--gold); transform: translateY(-6px) scale(1.03); }
.trainer-card img { display: block; width: 100%; height: auto; aspect-ratio: 0.56; object-fit: cover; }   /* the stickers are square with room on the sides */
.trainer-card.picked img { animation: hop .6s ease-in-out infinite; }
@keyframes hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.placeholder-note { text-align: center; color: #b9d3e0; font-size: 15px; margin-top: 18px; }

/* ------------------------------------------------- Mr Kyle's introduction -- */

.intro-stage { max-width: 720px; margin: 0 auto; }
.kyle { text-align: center; margin: 4px auto 18px; }
.kyle-art { width: min(220px, 52vw); margin: 0 auto; }
.kyle-art svg { display: block; width: 100%; height: auto; }
.kyle-tag {
  display: inline-block; margin-top: 8px; background: var(--gold); color: #3b2a00;
  font-weight: 700; font-size: 20px; padding: 4px 16px; border-radius: 999px; box-shadow: 0 4px 0 var(--gold-dark);
}
.kyle-soon { color: #b9d3e0; font-size: 14px; margin-top: 6px; }
.dialog-box {
  display: block; width: 100%; min-height: 132px; text-align: left; cursor: pointer;
  background: #fff; color: var(--ink); border: 5px solid #2a3350; border-radius: 18px;
  box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 7px #9fb3d6, 0 10px 30px rgba(0, 0, 0, .35);
  padding: 20px 52px 20px 24px; font-family: inherit; font-size: clamp(19px, 2.6vw, 24px);
  line-height: 1.45; position: relative; touch-action: manipulation;
}
.dialog-more {
  position: absolute; right: 22px; bottom: 14px; color: var(--brand); font-size: 20px;
  animation: more 0.9s ease-in-out infinite;
}
.dialog-more.hide { visibility: hidden; }
@keyframes more { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* The intro must fit on one screen, even a short laptop or Chromebook window (about 560-650px
   tall): the logo and Mr Kyle shrink with the screen's HEIGHT, the gaps tighten, and the page's
   bottom padding goes. Tall screens keep the full sizes. (dvh = the screen height a phone
   really shows; browsers that don't know it use the vh line.) Mr Kyle's picture is 200x230. */
.wrap:has(> #view-intro:not(.hidden)) { padding-top: 10px; padding-bottom: 16px; }
#view-intro .logo { margin: clamp(0px, 1.6vh, 18px) 0 clamp(0px, .5vh, 6px); }
#view-intro .logo .logo-img { width: min(430px, 82vw, 58vh); width: min(430px, 82vw, 58dvh); }
#view-intro .kyle { margin: 2px auto clamp(8px, 2vh, 18px); }
#view-intro .kyle-art { width: min(220px, 52vw, 28vh); width: min(220px, 52vw, 28dvh); }
#view-intro .kyle-tag { margin-top: 6px; }
#view-intro .kyle-soon { margin-top: 4px; }
#view-intro .dialog-box {
  min-height: clamp(100px, 16vh, 132px);
  padding-top: clamp(12px, 2.2vh, 20px); padding-bottom: clamp(12px, 2.2vh, 20px);
}

/* --------------------------------------------------- the first ten eggs -- */

.offers.ten { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
#view-pick .pick-bar, #view-character .pick-bar { position: sticky; bottom: 14px; z-index: 5; }
.offers.ten .offer { padding: 14px 10px; }
.offers.ten .offer .egg-stage { width: 88%; }

/* ------------------------------------------------- name your Novamon -- */

.modal {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(6, 14, 28, .72); backdrop-filter: blur(3px);
  animation: fade-in .3s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  width: 100%; max-width: 440px; background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 24px 22px 18px; text-align: center;
  animation: monster-pop .5s cubic-bezier(.2, 1.4, .4, 1) both;
}
.modal-card h2 { margin: 0; font-size: 30px; }
.modal-card p { color: var(--ink-soft); font-size: 17px; margin: 8px 0 0; }
.modal-card .field input { padding-right: 16px; text-align: center; }
.modal-monster { width: 150px; margin: 8px auto 0; }
.modal-monster svg { display: block; width: 100%; height: auto; overflow: visible; }
.modal-card .btn.quiet { margin-top: 8px; font-size: 16px; }
.fine { font-size: 14px !important; min-height: 18px; }
.monster-species { color: var(--ink-soft); font-size: 18px; font-weight: 600; margin-top: -4px; }

/* ------------------------------------------------------------ the world -- */

.world-body { overflow: hidden; height: 100%; touch-action: none; overscroll-behavior: none; user-select: none; }
.world-game { position: fixed; inset: 0; }
.world-game canvas { display: block; image-rendering: pixelated; }
.world-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10; pointer-events: none;
  display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px 18px;
  background: linear-gradient(rgba(8, 18, 32, .6), rgba(8, 18, 32, 0));
}
.world-top > * { pointer-events: auto; }
.world-logo img { height: 42px; width: auto; display: block; }
.world-right { display: flex; gap: 10px; align-items: center; }
.world-right .btn { white-space: nowrap; }
@media (max-width: 720px) {
  .world-logo img { height: 34px; }
  .world-right { gap: 8px; }
  .world-right .btn { font-size: 15px; padding: 7px 10px; }
}
.w-hint {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 10; pointer-events: none;
  background: rgba(255, 247, 230, .96); color: var(--ink); font-weight: 600; font-size: 18px;
  padding: 8px 18px; border-radius: 999px; box-shadow: 0 4px 0 var(--line); white-space: nowrap;
}
.world-say {
  position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%); z-index: 12;
  width: min(720px, calc(100% - 32px));
}
.dpad { position: fixed; left: 18px; bottom: 22px; width: 162px; height: 162px; z-index: 11; display: none; }
.dpad button {
  position: absolute; width: 54px; height: 54px; border: 0; border-radius: 14px; touch-action: none;
  background: rgba(255, 247, 230, .88); color: #2a3350; font-size: 22px; box-shadow: 0 4px 0 rgba(0, 0, 0, .25);
}
.dpad .up { left: 54px; top: 0; }
.dpad .down { left: 54px; bottom: 0; }
.dpad .left { left: 0; top: 54px; }
.dpad .right { right: 0; top: 54px; }
.dpad button.pressed { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .25); background: #fff; }
/* The on-screen Space button: shaped like a space bar */
.abtn {
  position: fixed; right: 18px; bottom: 56px; z-index: 11; display: none; touch-action: none;
  width: 128px; height: 62px; border-radius: 18px; border: 0; cursor: pointer;
  background: var(--brand); color: #fff; font: 700 24px var(--font); letter-spacing: .02em;
  box-shadow: 0 6px 0 var(--brand-dark);
}
.abtn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--brand-dark); }
.touch .dpad, .touch .abtn { display: block; }
.touch .w-hint { bottom: 200px; }
.touch .world-say { bottom: 196px; }

/* Key caps, drawn like keyboard keys */
kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 5px; margin: 1px;
  font: 700 14px var(--font); color: var(--ink); background: #fff; border-radius: 6px;
  box-shadow: inset 0 -3px 0 #c9bfae, 0 1px 0 rgba(0, 0, 0, .35);
}
kbd.space { min-width: 84px; }
.keycaps-t { display: inline-flex; flex-direction: column; align-items: center; line-height: 0; }
.keycaps-t > span { display: flex; }
.keycaps-t.big kbd { min-width: 40px; height: 40px; font-size: 20px; border-radius: 9px; }
kbd.space.big { min-width: 150px; height: 44px; font-size: 20px; border-radius: 10px; }

/* The controls bar, bottom right (computers) */
.keys-help {
  position: fixed; right: 12px; bottom: 12px; z-index: 9;
  display: flex; align-items: center; gap: 16px; padding: 8px 10px 8px 14px;
  background: rgba(14, 26, 44, .78); border-radius: 16px; color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
.kh-group { display: flex; align-items: center; gap: 8px; }
.kh-or { font-size: 14px; opacity: .8; }
.kh-label { font-size: 16px; font-weight: 600; }
.help-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--gold); color: #3b2a00; font: 700 20px var(--font); box-shadow: 0 3px 0 var(--gold-dark);
}
.touch-help { position: fixed; right: 16px; bottom: 136px; z-index: 11; display: none; }
.touch .keys-help { display: none; }
.touch .touch-help { display: block; }
.say-key { font-size: 13px; font-weight: 700; vertical-align: middle; margin-right: 4px; opacity: .8; }

/* How to play */
.howto-card { max-width: 580px; text-align: left; }
.howto-card .keycaps-t.big kbd { min-width: 34px; height: 34px; font-size: 18px; }
.howto-card h2 { text-align: center; margin-bottom: 8px; }
.howto-row { display: flex; align-items: center; gap: 16px; margin: 14px 0; }
.howto-row p { margin: 0 !important; font-size: 17px !important; color: var(--ink) !important; }
.howto-keys { flex: none; width: 260px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.howto-goal { text-align: center; margin: 16px 0 12px !important; }
.howto-card .fine { text-align: center; }
.mini-dpad { font-size: 22px; line-height: 1.15; text-align: center; color: #2a3350; }
.mini-space {
  display: inline-block; padding: 8px 18px; border-radius: 12px; background: var(--brand); color: #fff;
  font-weight: 700; font-size: 18px; box-shadow: 0 4px 0 var(--brand-dark);
}
.only-touch { display: none !important; }
.touch .only-touch { display: flex !important; }
.touch .only-keys { display: none !important; }
@media (max-width: 560px) {
  .howto-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .howto-keys { width: auto; }
}
.tree-card .tree-art-spot {
  height: 110px; margin: 12px 0; border: 3px dashed var(--line); border-radius: 16px;
  display: flex; align-items: center; justify-content: center; color: var(--ink-soft); font-size: 16px;
}
.tree-card .tree-xp { margin: 10px 0 8px; font-size: 18px; color: var(--ink); }
.tree-card .btn.wide { margin-top: 10px; font-size: 18px; }
.tree-card { max-width: 560px; max-height: calc(100vh - 32px); overflow-y: auto; }
.tree-note { font-size: 16px !important; margin: 8px 0 0 !important; }
.tree-note.good { color: var(--good) !important; font-weight: 600; }
/* a new egg is a choice of just 2 (Kyle, 2026-10-18): two big eggs side by side */
.tree-offers { display: grid; grid-template-columns: repeat(2, minmax(0, 180px)); justify-content: center; gap: 18px; margin: 14px 0 6px; }
.tree-offers .offer { padding: 14px 10px; border-radius: 18px; box-shadow: 0 4px 0 var(--line); }
.tree-offers .offer .egg-stage { width: 92%; }
.tree-new-egg { width: 150px; margin: 8px auto 0; }
@media (max-width: 560px) {
  .tree-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Levels, energy and moves (battles step 1, 2026-10-15): the Great Tree's "Level up" rows and
   the stats card on My Novamon share these. */
.btn.rest { background: #2f9e5a; box-shadow: 0 5px 0 #1d6b3b; }
.lv-badge {
  display: inline-block; background: var(--ink); color: #fff; border-radius: 999px;
  padding: 1px 10px; font-size: 15px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.energy-line { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink-soft); }
.energy-bar { flex: 1; height: 12px; background: #e7dcc4; border-radius: 999px; overflow: hidden; box-shadow: inset 0 2px 0 rgba(0, 0, 0, .08); }
.energy-fill { height: 100%; background: linear-gradient(90deg, #3fc46c, #7be08f); border-radius: 999px; transition: width .5s; }
.energy-num { color: var(--ink); font-weight: 700; min-width: 62px; text-align: right; }
.tree-mons { display: grid; gap: 10px; margin: 12px 0 6px; text-align: left; }
.tree-mon { background: var(--card-2); border-radius: 16px; padding: 12px 14px; display: grid; gap: 8px; }
.tree-mon-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 20px; }
.tree-mon-next { font-size: 15px; color: var(--ink-soft); }
.tree-mon .btn { justify-self: start; font-size: 17px; padding: 10px 16px; }
.tree-level-msg { min-height: 24px; font-size: 17px; margin: 4px 0; }
.tree-level-msg.good { color: var(--good); }
.tree-level-msg.bad { color: var(--bad); }
.tree-level-msg .learned { color: #b06a00; font-size: 19px; font-weight: 800; margin-top: 4px; animation: pop-in .5s ease-out; }
@keyframes pop-in { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.mon-stats { margin: 12px auto 4px; max-width: 360px; text-align: left; display: grid; gap: 10px; }
.mon-stats .mon-head { display: flex; align-items: center; justify-content: center; gap: 8px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.stat-grid div { background: var(--card-2); border-radius: 12px; padding: 6px 4px; font-size: 14px; color: var(--ink-soft); }
.stat-grid b { display: block; font-size: 22px; color: var(--ink); line-height: 1.1; }
.moves-title { font-size: 15px; color: var(--ink-soft); margin-bottom: -4px; }
.mon-moves { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.move-chip {
  border-radius: 12px; padding: 6px 10px; font-weight: 700; font-size: 16px; line-height: 1.2;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .18);
}
.move-chip small { display: block; font-size: 12px; font-weight: 600; opacity: .8; }
.mon-next { font-size: 14px; color: var(--ink-soft); margin: 0; text-align: center; }
.mon-stats .btn { justify-self: center; font-size: 17px; padding: 10px 18px; }

/* Celebrations (Kyle, 2026-10-15): "[Student] passed their [subject] test!" for 7 days */
.title-cheers { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.cheer {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  font-size: clamp(20px, 2.7vw, 34px); color: #fffbe0; letter-spacing: .01em;
  text-shadow: 0 0 2px rgba(38, 18, 66, .95), 0 0 6px rgba(38, 18, 66, .8), 0 2px 3px rgba(20, 8, 40, .9),
               0 0 18px rgba(255, 224, 120, .85), 0 0 34px rgba(255, 200, 80, .55);
  animation: cheer 5.4s ease-in-out both;
}
@keyframes cheer {
  0% { opacity: 0; transform: translate(-50%, -38%) scale(.9); }
  16% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  34% { transform: translate(-47%, -57%) rotate(-2deg); }
  52% { transform: translate(-53%, -52%) rotate(2deg); }
  70% { opacity: 1; transform: translate(-49%, -60%) rotate(-1deg); }
  100% { opacity: 0; transform: translate(-50%, -72%) scale(1.03) rotate(0deg); }
}
.cheer i {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: #f4ffb0; box-shadow: 0 0 8px 3px rgba(220, 255, 140, .8);
  animation: flutter var(--d, 1.4s) ease-in-out infinite alternate;
}
@keyframes flutter {
  from { transform: translate(0, 0); opacity: .25; }
  to { transform: translate(var(--fx), var(--fy)); opacity: 1; }
}
@media (max-aspect-ratio: 1/1) {
  .cheer { font-size: clamp(18px, 5.2vw, 26px); white-space: normal; width: 84vw; text-align: center; line-height: 1.3; }
}
@media (prefers-reduced-motion: reduce) { .cheer { animation: cheer-still 5.4s linear both; } .cheer i { animation: none; } }
@keyframes cheer-still { 0%, 100% { opacity: 0; } 15%, 85% { opacity: 1; } }

.cheers-card {
  max-width: 760px; margin: 0 auto 18px; padding: 14px 18px 16px; border-radius: var(--radius);
  background: linear-gradient(135deg, #fff6cf, #ffe08a); box-shadow: 0 6px 0 var(--gold-dark), 0 14px 30px rgba(0, 0, 0, .25);
  text-align: center;
}
.cheers-title { font-family: var(--title-font); font-weight: 800; font-size: 28px; color: #5a3d00; margin-bottom: 8px; }
.cheers-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cheers-list li {
  background: #fff; color: var(--ink); border-radius: 999px; padding: 6px 14px; font-size: 16px;
  box-shadow: 0 3px 0 rgba(201, 138, 0, .35);
}
.cheers-list li::before { content: "\2605  "; color: var(--gold-dark); font-family: "Fredoka", sans-serif; }
.cheers-list li.mine { background: var(--brand); color: #fff; box-shadow: 0 3px 0 var(--brand-dark); }
.cheers-list li.mine::before { color: #ffe08a; }

/* the egg shelf on My Novamon (when a student has more than one egg) */
.egg-shelf { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 0 0 16px; }
.shelf-item {
  width: 92px; border: 0; cursor: pointer; border-radius: 16px; padding: 6px 4px 8px;
  background: var(--card); box-shadow: 0 4px 0 var(--line); outline: 4px solid transparent; outline-offset: 2px;
  font-family: inherit; color: var(--ink); touch-action: manipulation;
}
.shelf-item.on { outline-color: var(--gold); }
.shelf-item img, .shelf-item svg { display: block; width: 64px; height: 64px; margin: 0 auto; }
.shelf-label { display: block; font-size: 13px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shelf-item .new-badge {
  display: inline-block; font-size: 11px; background: var(--brand); color: #fff; border-radius: 999px; padding: 1px 6px;
}
.home-world-btn { display: flex; justify-content: center; margin: -4px 0 18px; }

/* ------------------------------------------------------------- phones -- */

@media (max-width: 720px) {
  .home-grid { grid-template-columns: 1fr; }
  .offers { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
  .offers.ten { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; }
  .trainers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .mini-logo-img { height: 36px; }
  .xp-pill { font-size: 20px; padding: 6px 14px 6px 8px; }
  .xp-coin { width: 26px; height: 26px; }
  .trainer { display: none; }
  .mini-logo { font-size: 22px; }
  .big-balance { font-size: 46px; }
  .card { padding: 22px 18px; }
}

/* ------------------------------------------- story scenes (Scenes, shared.js) --
   Mr Kyle and Flint talking: the character sticker stands at the bottom (left, or right for
   "presenting" and for Flint), a talk box under it, and sometimes a picture while Flint explains. */
.scene {
  position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 10px 16px 12px; cursor: pointer;
  background: linear-gradient(180deg, rgba(12, 34, 51, .86) 0%, rgba(12, 34, 51, .93) 62%, rgba(12, 34, 51, .98) 100%);
}
.scene.hidden { display: none; }
.scene-stage { position: relative; width: min(1000px, 100%); flex: 1; min-height: 0; pointer-events: none; }
.scene-actor {
  position: absolute; bottom: -14px; left: 0; height: min(100%, 560px); max-width: 50%;
  object-fit: contain; object-position: bottom; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35));
  animation: actor-in .3s ease-out;
}
.scene.right .scene-actor { left: auto; right: 0; }
.scene-actor.hidden { display: none; }
.scene-actor.exit { animation: actor-exit 2.8s ease-in forwards; }
@keyframes actor-in { from { transform: translateY(12px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes actor-exit { 0% { transform: none; opacity: 1; } 100% { transform: translateX(70vw) scale(.92); opacity: 0; } }
.scene-pic {
  position: absolute; top: 2%; left: 2%; width: min(520px, 56%); max-height: 96%; overflow: hidden;
  background: var(--card); border-radius: 20px; padding: 14px 14px 10px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; gap: 8px; animation: actor-in .3s ease-out;
}
.scene:not(.right) .scene-pic { left: auto; right: 2%; }
.scene-pic.hidden { display: none; }
.scene-box { position: relative; width: min(1000px, 100%); z-index: 2; margin-top: 0; }
.scene-name {
  position: absolute; top: -17px; left: 18px; background: var(--gold); color: #3b2a00; font-weight: 800; font-size: 17px;
  padding: 1px 14px; border-radius: 999px; box-shadow: 0 3px 0 var(--gold-dark); font-style: normal;
}
.scene.right .scene-name { left: auto; right: 18px; }
.scene-name.flint { background: #28385f; color: #ffd75e; box-shadow: 0 3px 0 #141d33; }
.scene-name.hidden { display: none; }
.scene.narrator .scene-text { font-style: italic; color: var(--ink-soft); }
.scene-hint { color: #cfe3ee; font-size: 13px; margin-top: 6px; opacity: .8; }
@media (max-width: 700px) {
  .scene-actor { max-width: 66%; height: min(100%, 50vh); }
  .scene-pic { width: 100%; left: 0 !important; right: 0 !important; top: 0; padding: 10px; }
  .scene.with-pic .scene-actor { height: min(52%, 30vh); }
  .scene-pic .pic-map, .scene-pic .pic-tree { zoom: .72; }
  .scene-pic .pic-foe, .scene-pic .pic-me { width: 80px; }
  .scene-pic .pic-card { min-width: 0; width: 190px; }
  .scene-pic .pic-moves { min-width: 0; }
}

/* the pictures Flint shows (built from the game's own pieces) */
.pic-label { font-size: 15px; color: var(--ink-soft); text-align: center; }
.tile-art { position: relative; }
.tile-art i { position: absolute; background-image: url("art/world/tiny-town.png"); image-rendering: pixelated; }
.pic-map { position: relative; border-radius: 12px; overflow: hidden; border: 4px solid #2a3350; }
.pic-fog { position: absolute; left: 34%; top: 22%; width: 52%; height: 62%; pointer-events: none; }
.pic-fog i {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(150, 150, 165, .95) 0%, rgba(150, 150, 165, .7) 45%, rgba(150, 150, 165, 0) 72%);
  animation: fog-drift 6s ease-in-out infinite alternate;
}
.pic-fog i:nth-child(1) { left: 0; top: 10%; width: 60%; height: 70%; }
.pic-fog i:nth-child(2) { left: 30%; top: 0; width: 60%; height: 75%; animation-delay: -2s; }
.pic-fog i:nth-child(3) { left: 40%; top: 35%; width: 60%; height: 65%; animation-delay: -4s; }
.pic-fog i:nth-child(4) { left: 5%; top: 40%; width: 55%; height: 60%; animation-delay: -1s; }
@keyframes fog-drift { from { transform: translate(-4%, 0) scale(1); } to { transform: translate(4%, -3%) scale(1.06); } }
.pic-ringed { position: relative; display: inline-block; padding: 6px; }
.pic-ring {
  position: absolute; inset: -4px; border: 5px solid #ff4d4d; border-radius: 22px; pointer-events: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .7); animation: ring-pulse 1.1s ease-in-out infinite;
}
@keyframes ring-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.04); opacity: .75; } }
.pic-battle { display: flex; align-items: center; gap: 10px; width: 100%; justify-content: center; }
.pic-foe, .pic-me { width: 120px; flex: none; }
.pic-foe svg, .pic-me svg, .pic-foe img { width: 100%; height: auto; display: block; }
.pic-card { background: #fff; border: 4px solid #2a3350; border-radius: 14px; padding: 8px 12px; min-width: 210px; text-align: left; }
.pic-card b { font-size: 17px; }
.pic-num { text-align: right; font-weight: 800; font-size: 15px; }
.bar-line { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; font-weight: 800; color: var(--ink-soft); }
.bbar { flex: 1; height: 12px; background: #e7dcc4; border-radius: 999px; overflow: hidden; box-shadow: inset 0 2px 0 rgba(0, 0, 0, .08); }
.bbar div { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #8d8d99, #b9b9c4); transition: width .6s ease-out; }
.bbar.energy div { background: linear-gradient(90deg, #3fc46c, #7be08f); }
.bbar.energy.low div { background: linear-gradient(90deg, #e9a21a, #ffd166); }
.bbar.energy.danger div { background: linear-gradient(90deg, #d63a3a, #ff7a6b); }
.pic-moves { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-width: 260px; }
.pic-move { border-radius: 12px; padding: 8px 10px; font-weight: 800; font-size: 16px; box-shadow: 0 3px 0 rgba(0, 0, 0, .2); text-align: left; }
.pic-move small { display: block; font-size: 12px; font-weight: 600; opacity: .85; }
.pic-types { display: grid; justify-items: center; gap: 0; width: 240px; }
.pic-type { display: inline-block; border-radius: 999px; padding: 3px 12px; font-weight: 800; font-size: 15px; }
.pt-arrows svg { width: 220px; height: 120px; display: block; margin: -6px 0; }
.pt-bottom { display: flex; justify-content: space-between; width: 100%; }
.pt-say { margin-top: 8px; font-weight: 800; color: #b06a00; font-size: 18px; }
.pic-tree { position: relative; width: 192px; height: 192px; border-radius: 12px; overflow: hidden; border: 4px solid #2a3350; }
.pic-tree .tile-art { position: absolute; inset: 0; }
.pic-bigtree { position: absolute; left: 36px; bottom: 6px; width: 120px; height: 180px; }
.pic-bigtree::before, .pic-bigtree::after {
  content: ""; position: absolute; left: 0; width: 120px; height: 90px; background-image: url("art/world/tiny-town.png");
  background-size: 1440px 1320px; image-rendering: pixelated;
}
.pic-bigtree::before { top: 0; background-position: -480px 0; }
.pic-bigtree::after { top: 90px; background-position: -480px -120px; }
.pic-btn { pointer-events: none; font-size: 17px; padding: 10px 16px; }
.pic-menu { display: flex; gap: 10px; align-items: stretch; }
.pic-side { display: grid; gap: 8px; }
.pic-side-btn { border-radius: 12px; padding: 8px 14px; font-weight: 800; background: var(--card-2); box-shadow: 0 3px 0 var(--line); text-align: center; }
.pic-side-btn.run { background: #ffd9d0; color: #9c2c14; }
.pic-level { min-width: 260px; }
.pic-book { background: #fffdf6; border: 4px solid #8a5a2b; border-radius: 10px 18px 18px 10px; padding: 10px 14px; box-shadow: inset 8px 0 0 #e9d6b0; }
.pic-book-title { font-weight: 800; font-size: 20px; text-align: center; margin-bottom: 4px; }
.pic-book table { border-collapse: collapse; font-size: 14px; }
.pic-book th, .pic-book td { padding: 3px 8px; text-align: left; }
.pic-book td.more { color: var(--ink-soft); font-style: italic; }

/* --------------------------------------------- the battle screen (battle.js) --
   Pokémon Red's layout: the opponent's card top left and its picture top right on a patch of
   ground; your Novamon bottom left; your card bottom right; the talk box and moves underneath. */
.battle {
  position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #bfe7c6 0%, #9fd6a8 38%, #7cc18a 62%, #5fa86f 100%);
  animation: battle-in .45s ease-out;
}
.battle.vs-flint { background: linear-gradient(180deg, #c9d8f2 0%, #a9c3ea 40%, #86a6d6 64%, #6b8cc2 100%); }
.battle.hidden { display: none; }
.battle.closing { animation: battle-out .35s ease-in forwards; }
@keyframes battle-in { 0% { clip-path: circle(0% at 50% 50%); } 100% { clip-path: circle(80% at 50% 50%); } }
@keyframes battle-out { to { opacity: 0; } }
.b-field { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.b-card {
  position: absolute; background: #fff; border: 4px solid #2a3350; border-radius: 16px; padding: 8px 14px 10px;
  width: min(330px, 46vw); box-shadow: 0 6px 0 rgba(0, 0, 0, .18); z-index: 3;
}
.b-card.hidden { display: none; }
.b-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 19px; }
.b-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-foe-card { top: 5%; left: 4%; }
.b-me-card { bottom: 6%; right: 4%; }
.b-me-num { text-align: right; font-weight: 800; font-size: 16px; margin-top: 2px; }
.b-spot { position: absolute; width: min(34vh, 30vw, 250px); aspect-ratio: 1; z-index: 2; }
.b-spot::before {
  content: ""; position: absolute; left: -12%; right: -12%; bottom: 2%; height: 22%; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(70, 120, 60, .55), rgba(70, 120, 60, 0) 70%);
}
.vs-flint .b-spot::before { background: radial-gradient(ellipse at center, rgba(50, 70, 120, .5), rgba(50, 70, 120, 0) 70%); }
.b-foe-spot { top: 4%; right: 7%; }
.b-me-spot { bottom: 3%; left: 7%; }
.b-pic { position: absolute; inset: 0; }
.b-pic > svg, .b-pic > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; }
.b-pic > .creature-pic { filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .22)); }
.b-pic.hit { animation: b-hit .45s ease-in-out; }
@keyframes b-hit {
  0%, 100% { transform: none; filter: none; } 15% { transform: translateX(-9px); filter: brightness(2.2); }
  35% { transform: translateX(8px); } 55% { transform: translateX(-6px); filter: brightness(1.8); } 75% { transform: translateX(4px); }
}
.b-pic.worn { animation: b-worn 1s ease-in forwards; }
@keyframes b-worn { to { transform: translateY(30%) scale(.8); opacity: 0; } }
/* Gloomed creatures: a gentle purple haze that fades in and out (Kyle, 2026-10-15: not too thick
   or too often, so it doesn't distract during a fight). It drifts away as the creature calms. */
.b-fog { position: absolute; inset: -6%; pointer-events: none; opacity: 0; transition: opacity .8s; }
.b-foe-spot.gloomed .b-fog { opacity: 1; }
.b-fog i {
  position: absolute; border-radius: 50%; opacity: .2;
  animation: fog-drift 5s ease-in-out infinite alternate, b-haze 7s ease-in-out infinite;
  background: radial-gradient(circle, rgba(130, 96, 168, .6) 0%, rgba(130, 96, 168, .3) 45%, rgba(130, 96, 168, 0) 70%);
}
@keyframes b-haze { 0%, 100% { opacity: .15; } 50% { opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .b-fog i { animation: none; opacity: .45; } }
.b-fog i:nth-child(1) { left: -10%; top: 40%; width: 60%; height: 50%; }
.b-fog i:nth-child(2) { right: -10%; top: 15%; width: 55%; height: 45%; animation-delay: -2s; }
.b-fog i:nth-child(3) { left: 20%; bottom: -5%; width: 70%; height: 40%; animation-delay: -3.5s; }
/* Calming: a bright pulse while the gloomed picture fades into the healthy one (battle.js). */
.b-foe-spot.calming .b-pic { animation: b-calm 1.1s ease-in-out; }
@keyframes b-calm { 45% { filter: brightness(1.7) saturate(.7); transform: scale(1.06); } }
.b-foe-spot.calming .b-pic > :not(.b-calm-in) { animation: b-fade-out .9s ease-in-out .15s forwards; }
.b-calm-in { opacity: 0; animation: b-fade-in .9s ease-in-out .15s forwards; }
@keyframes b-fade-in { to { opacity: 1; } }
@keyframes b-fade-out { to { opacity: 0; } }
.b-foe-spot.calmed .b-pic { animation: b-hop .6s ease-in-out 3; }
@keyframes b-hop { 0%, 100% { transform: none; } 50% { transform: translateY(-12%); } }
.b-foe-spot.calmed::after {
  content: "\2726  \2726  \2726"; position: absolute; left: 0; right: 0; top: -6%; text-align: center; color: #ffd75e;
  font-size: 34px; text-shadow: 0 0 10px #fff; animation: b-sparkle 1.4s ease-out forwards;
}
@keyframes b-sparkle { from { opacity: 0; transform: translateY(20px); } 30% { opacity: 1; } to { opacity: 0; transform: translateY(-30px); } }
.b-trainer { position: absolute; z-index: 4; height: min(62%, 420px); bottom: 0; animation: b-slide-in .45s ease-out; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .3)); }
.b-trainer.hidden { display: none; }
.b-me-trainer { left: 3%; }
.b-foe-trainer { right: 3%; top: 2%; bottom: auto; height: min(78%, 480px); animation-name: b-slide-in-right; }
.b-trainer.leave { animation: b-slide-out .45s ease-in forwards; }
.b-foe-trainer.leave { animation: b-slide-out-right .45s ease-in forwards; }
@keyframes b-slide-in { from { transform: translateX(-120%); } to { transform: none; } }
@keyframes b-slide-in-right { from { transform: translateX(120%); } to { transform: none; } }
@keyframes b-slide-out { to { transform: translateX(-130%); } }
@keyframes b-slide-out-right { to { transform: translateX(130%); } }
.b-bottom { position: relative; padding: 10px 16px 14px; background: #20304a; display: flex; justify-content: center; min-height: 150px; }
.b-text { width: min(980px, 100%); min-height: 120px; cursor: pointer; }
.b-text.hidden { display: none; }
.b-menu { width: min(980px, 100%); display: flex; gap: 12px; }
.b-menu.hidden { display: none; }
.b-moves { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.b-move {
  border: 0; border-radius: 14px; padding: 10px 14px; text-align: left; font-family: inherit; font-weight: 800; font-size: 20px;
  cursor: pointer; box-shadow: 0 5px 0 rgba(0, 0, 0, .28); touch-action: manipulation; line-height: 1.15;
}
.b-move small { display: block; font-size: 13px; font-weight: 600; opacity: .85; }
.b-move:hover, .b-btn:hover { filter: brightness(1.07); }
.b-move:active, .b-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, .28); }
.b-side { display: grid; gap: 10px; width: min(150px, 28%); }
.b-btn {
  border: 0; border-radius: 14px; padding: 10px 12px; font-family: inherit; font-weight: 800; font-size: 19px; cursor: pointer;
  background: var(--card); color: var(--ink); box-shadow: 0 5px 0 var(--line); touch-action: manipulation;
}
.b-btn:disabled { opacity: .45; cursor: default; }
.b-run-btn { background: #ffd9d0; color: #9c2c14; box-shadow: 0 5px 0 #e3a99a; }
.b-move.focus, .b-btn.focus { outline: 4px solid #ffd75e; outline-offset: 2px; }
.b-team { width: min(980px, 100%); display: grid; gap: 8px; }
.b-team.hidden { display: none; }
.b-team-title { color: #fff; font-weight: 800; font-size: 18px; }
.b-team-list { display: grid; gap: 8px; }
.b-team-one { text-align: left; }
@media (max-width: 640px) {
  .b-card { width: 54vw; padding: 6px 10px 8px; }
  .b-name { font-size: 15px; }
  .b-name .lv-badge { font-size: 13px; padding: 1px 8px; }
  .b-spot { width: min(40vw, 30vh); }
  .b-foe-spot { top: 20%; right: 4%; }
  .b-me-spot { bottom: 18%; left: 3%; }
  .b-move { font-size: 17px; padding: 8px 10px; }
  .b-btn { font-size: 16px; }
}

/* ------------------------------------------------- Ranger HQ (world.html) -- */
.hq-card { max-width: 720px; max-height: calc(100vh - 32px); overflow-y: auto; text-align: left; }
.hq-card h2 { text-align: center; }
.hq-tabs { display: flex; gap: 8px; justify-content: center; margin: 10px 0 12px; }
.hq-tab {
  border: 0; border-radius: 999px; padding: 6px 16px; font-family: inherit; font-weight: 800; font-size: 17px; cursor: pointer;
  background: var(--card-2); color: var(--ink); box-shadow: 0 3px 0 var(--line);
}
.hq-tab.on { background: #28385f; color: #ffd75e; box-shadow: 0 3px 0 #141d33; }
.hq-page.hidden { display: none; }
.guide-rules { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; font-size: 16px; color: var(--ink); }
.guide-h { margin: 6px 0; font-size: 20px; }
.guide-table { overflow-x: auto; }
.guide-table table { border-collapse: collapse; width: 100%; font-size: 15px; }
.guide-table th { text-align: left; font-size: 14px; color: var(--ink-soft); padding: 4px 6px; }
.guide-table td { padding: 5px 6px; border-top: 2px solid var(--card-2); vertical-align: middle; }
.guide-table .pic-type { font-size: 13px; padding: 2px 9px; margin: 1px 0; }
.guide-note { font-size: 14px !important; color: var(--ink-soft); margin-top: 10px !important; }
.stamp-head { font-weight: 800; font-size: 20px; display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.stamp-head span { font-size: 16px; color: var(--ink-soft); }
.stamp-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.stamp {
  border: 3px dashed var(--line); border-radius: 14px; padding: 8px 6px; text-align: center; display: grid; gap: 4px;
  justify-items: center; align-content: start; min-height: 150px; background: #fffdf8;
}
.stamp.got { border-style: solid; border-color: #b7d9c0; background: #f2fbf4; }
.stamp-pic { width: 76px; }
.stamp-pic svg, .stamp-pic img { width: 100%; height: auto; display: block; }
.stamp-q { font-size: 54px; font-weight: 800; color: #d9c9a6; line-height: 76px; }
.stamp b { font-size: 14px; line-height: 1.15; }
.stamp small { font-size: 12px; color: var(--ink-soft); }
.stamp-type { font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 8px; }
@media (max-width: 640px) { .stamp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Ranger HQ's two pages per book (Kyle, 2026-10-16) and the character stamps */
.hq-subtabs { display: flex; gap: 6px; justify-content: center; margin: 0 0 12px; }
.hq-sub {
  border: 2px solid var(--line); border-radius: 12px; padding: 4px 14px; font-family: inherit; font-weight: 700; font-size: 15px;
  cursor: pointer; background: #fff; color: var(--ink-soft);
}
.hq-sub.on { background: var(--gold); border-color: var(--gold-dark); color: #3b2a00; }
.hq-sub-page.hidden { display: none; }
.stamp.person .stamp-face { width: 76px; height: 76px; border-radius: 50%; overflow: hidden; background: #e8f1fb; border: 3px solid #fff; box-shadow: 0 0 0 2px #b7d9c0; }
.stamp.person .stamp-face img { width: 180%; margin: -4% 0 0 -40%; display: block; }
.stamp-note { color: var(--good) !important; font-weight: 700; }
.stamp.more { border-style: dotted; }
.stamp.more .stamp-q { font-size: 36px; }

/* ------------------------------------------- evolving (Kyle, 2026-10-16) --
   The streak tracker (at the Tree and on My Novamon) and the big evolution moment. */
.evo-box {
  position: relative; overflow: hidden; display: grid; gap: 8px; text-align: center;
  background: linear-gradient(135deg, #fff8df, #ffe6a3); border: 3px solid #f0c24a; border-radius: 16px; padding: 12px 14px;
  animation: evo-box-glow 2.4s ease-in-out infinite;
}
.evo-box::before {                                     /* a slow shine across the box */
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent);
  animation: evo-shine 3.2s ease-in-out infinite;
}
.evo-title { font-size: 20px; font-weight: 800; color: #8a4b00; }
.evo-words { margin: 0; font-size: 15px; color: var(--ink); }
.evo-days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.evo-day {
  position: relative; overflow: hidden; background: #fff; border: 2px dashed #e2c98d; border-radius: 12px;
  padding: 6px 4px 8px; color: var(--ink-soft);
}
.evo-day b { display: block; font-size: 22px; line-height: 1.1; color: #c4b287; }
.evo-day small { display: block; font-size: 12px; }
.evo-day.done { background: #3fc46c; border: 2px solid var(--good); color: #fff; animation: pop-in .5s ease-out; }
.evo-day.done b { color: #fff; }
.evo-day.today { border: 2px solid #f0a92a; }
.evo-day.today b { color: var(--ink); }
.evo-day.today i { position: absolute; left: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, #ffb52e, #ffd75e); }
.evo-box.ready { animation: evo-ready 1.1s ease-in-out infinite; }
.evo-box .evo-go { justify-self: center; font-size: 21px; padding: 12px 30px; animation: evo-pulse 1s ease-in-out infinite; }
.evo-surprise { color: #8a4b00 !important; text-shadow: 0 0 10px #ffd75e; }
@keyframes evo-box-glow { 0%, 100% { box-shadow: 0 0 0 rgba(255, 200, 60, 0); } 50% { box-shadow: 0 0 18px rgba(255, 200, 60, .75); } }
@keyframes evo-ready { 0%, 100% { box-shadow: 0 0 6px rgba(255, 200, 60, .6); } 50% { box-shadow: 0 0 28px rgba(255, 190, 40, 1); } }
@keyframes evo-shine { 0% { left: -60%; } 60%, 100% { left: 130%; } }
@keyframes evo-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* the evolution itself (Evolution.play in shared.js) */
.evo {
  position: fixed; inset: 0; z-index: 200; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, #2d1e57 0%, #140c2b 58%, #06030e 100%);
  opacity: 0; transition: opacity .5s;
}
.evo.ph-in { opacity: 1; }
.evo.ph-out { opacity: 0; transition: opacity .4s; }
.evo-rays {
  position: absolute; left: 50%; top: 40%; width: 200vmax; height: 200vmax; margin: -100vmax 0 0 -100vmax;
  background: repeating-conic-gradient(rgba(255, 228, 140, 0) 0deg 8deg, rgba(255, 228, 140, .3) 8deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 4%, transparent 38%); mask: radial-gradient(circle, #000 4%, transparent 38%);
  opacity: 0; scale: .3; transition: opacity 1s, scale 1.6s, filter .6s;
}
.evo.ph-glow .evo-rays, .evo.ph-flicker .evo-rays, .evo.ph-done .evo-rays { opacity: 1; scale: 1; animation: evo-spin 10s linear infinite; }
.evo.ph-flicker .evo-rays { filter: brightness(1.7); }
.evo-sparks i {
  position: absolute; left: 50%; top: 40%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: #fffbe0; box-shadow: 0 0 12px 6px #ffd75e; opacity: 0;
}
.evo.ph-glow .evo-sparks i, .evo.ph-flicker .evo-sparks i { animation: evo-spark 1.3s ease-in infinite; }
/* streaks of light in the Novamon's two type colors (--c1, --c2): in while it glows, out on the reveal */
.evo-streaks i, .evo-burst i {
  position: absolute; left: 50%; top: 40%; height: 6px; margin-top: -3px; border-radius: 6px;
  transform-origin: 0 50%; opacity: 0; pointer-events: none;
}
.evo-streaks i {
  width: 42vmax; height: 12px; margin-top: -6px;
  background: linear-gradient(90deg, #fff 0%, var(--c) 10%, var(--c) 45%, transparent 100%);
  box-shadow: 0 0 22px 6px var(--c);
}
.evo.ph-glow .evo-streaks i, .evo.ph-flicker .evo-streaks i { animation: evo-streak-in 1.5s cubic-bezier(.45, 0, .75, .7) infinite; }
.evo-burst i {
  width: 46vmax; height: 14px; margin-top: -7px;
  background: linear-gradient(90deg, transparent 0%, var(--c) 70%, #fff 100%);
  box-shadow: 0 0 18px 4px var(--c);
}
.evo.ph-done .evo-burst i { animation: evo-streak-out 1.2s cubic-bezier(.1, .7, .3, 1) forwards; }
@keyframes evo-streak-in {
  0% { transform: rotate(var(--a)) translateX(70vmax) scaleX(.6); opacity: 0; }
  12% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: rotate(var(--a)) translateX(6vmax) scaleX(1); opacity: 0; }
}
@keyframes evo-streak-out {
  0% { transform: rotate(var(--a)) translateX(-30vmax) scaleX(.4); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: rotate(var(--a)) translateX(70vmax) scaleX(1.1); opacity: 0; }
}
.evo-stage { position: relative; width: min(44vh, 72vw, 360px); aspect-ratio: 1; margin-top: -14vh; }
.evo-stage::before {                                   /* a ring that bursts out on the reveal */
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 8px solid #ffe27a; opacity: 0; pointer-events: none;
}
.evo.ph-done .evo-stage::before { animation: evo-ring 1.1s ease-out .05s; }
.evo-mon { position: absolute; inset: 0; transition: filter 1.2s; }
.evo-mon svg { width: 100%; height: 100%; overflow: visible; }
.evo-mon.off { visibility: hidden; }
.evo.ph-glow .evo-mon, .evo.ph-flicker .evo-mon {               /* glowing white shapes, like Pokemon Red */
  filter: brightness(0) invert(1) drop-shadow(0 0 14px #fff) drop-shadow(0 0 30px var(--c1, #ffd75e)) drop-shadow(0 0 54px var(--c2, #ffd75e));
}
.evo.ph-flicker .evo-mon.new { transform: scale(1.08); }
.evo.ph-done .evo-mon.new { animation: evo-reveal .9s cubic-bezier(.2, 1.5, .4, 1); }
.evo.ph-done .evo-mon.new svg { animation: bob 2.4s ease-in-out infinite; transform-origin: 50% 92%; }
.evo-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity .8s ease-out; z-index: 4; }
.evo.ph-flash .evo-flash { opacity: 1; transition: opacity .3s ease-in; }
.evo-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.evo-confetti i { position: absolute; top: -24px; width: 10px; height: 16px; border-radius: 2px; animation: evo-fall 3.4s ease-in infinite; }
.evo-text {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(820px, calc(100% - 32px));
  min-height: 0; text-align: center; padding: 16px 20px; z-index: 3; cursor: pointer;
}
.evo-say { display: block; font-weight: 800; font-size: clamp(21px, 3vw, 30px); }
.evo-grew { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.evo-grew:empty { display: none; }
.evo-grew span {
  background: #e5f6ea; color: var(--good); border-radius: 999px; padding: 2px 14px; font-weight: 800; font-size: 18px;
  animation: pop-in .45s ease-out backwards;
}
.evo-grew span:nth-child(2) { animation-delay: .12s; }
.evo-grew span:nth-child(3) { animation-delay: .24s; }
.evo-grew span:nth-child(4) { animation-delay: .36s; }
.evo-tap { display: block; min-height: 1.2em; margin-top: 6px; font-size: 15px; color: var(--ink-soft); }
@keyframes evo-spin { to { rotate: 360deg; } }
@keyframes evo-spark {
  0% { transform: translate(var(--x), var(--y)) scale(.7); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translate(0, 0) scale(.15); opacity: 0; }
}
@keyframes evo-reveal { from { transform: scale(.55); } to { transform: scale(1); } }
@keyframes evo-ring { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
@keyframes evo-fall {
  0% { transform: translateY(0) rotate(0); }
  100% { transform: translateY(112vh) rotate(var(--spin)); }
}
@media (prefers-reduced-motion: reduce) {
  .evo-rays, .evo-sparks i, .evo-streaks i, .evo-box, .evo-box::before, .evo-box .evo-go, .evo.ph-done .evo-mon.new svg { animation: none !important; }
  .evo-confetti i { animation-duration: 6s; }
}

/* ------------------------------------------- Spark Blast tokens (Kyle, 2026-10-18) -- */
.token-icon { width: 30px; height: 30px; display: block; flex: none; }
.token-icon.big { width: 120px; height: 120px; filter: drop-shadow(0 6px 10px rgba(168, 67, 10, .35)); }
.token-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff1d6; color: #7a3a00; border: 3px solid #ff8a1f;
  border-radius: 999px; padding: 4px 14px 4px 5px;
  font-size: 22px; font-weight: 800; box-shadow: 0 4px 0 #c45a00; white-space: nowrap;
}
.token-pill .token-icon { width: 28px; height: 28px; }
.tree-tokens { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 18px; margin: 6px 0; }
.tree-tokens .token-icon { width: 32px; height: 32px; }
.token-have { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 17px; }
.token-week { display: grid; gap: 4px; margin-top: 8px; font-size: 14px; color: var(--ink-soft); text-align: center; }
.token-week-bar { height: 12px; background: #e7dcc4; border-radius: 999px; overflow: hidden; box-shadow: inset 0 2px 0 rgba(0, 0, 0, .08); }
.token-week-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff8a1f, #ffc531); border-radius: 999px; transition: width .5s; }
.token-week.done span { color: var(--good); font-weight: 700; }
.token-card-row { margin-top: 12px; padding-top: 10px; border-top: 2px dashed #ecdcb8; }
.token-card-row .tree-tokens { justify-content: flex-start; }
.token-card-row .fine { margin: 4px 0 0; }
#tree-egg-note .token-week { margin-top: 6px; }
.token-modal { z-index: 150; }
.token-card { text-align: center; max-width: 440px; }
.token-card h2 { margin: 6px 0 4px; }
.token-burst { display: flex; justify-content: center; position: relative; }
.token-burst::before {                                 /* a soft spinning glow behind the token */
  content: ""; position: absolute; left: 50%; top: 50%; width: 190px; height: 190px; margin: -95px 0 0 -95px;
  background: repeating-conic-gradient(rgba(255, 170, 40, 0) 0deg 12deg, rgba(255, 170, 40, .28) 12deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%);
  animation: evo-spin 8s linear infinite;
}
.token-burst .token-icon { position: relative; animation: token-pop .7s cubic-bezier(.2, 1.6, .4, 1); }
.token-why { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 4px; font-size: 18px; font-weight: 700; color: #8a4b00; }
@keyframes token-pop { from { transform: scale(.3) rotate(-90deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 640px) {
  .token-pill { font-size: 18px; padding: 3px 10px 3px 4px; }
  .token-pill .token-icon { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) { .token-burst::before, .token-burst .token-icon { animation: none !important; } }

/* ------------------------- pictures for Mr Kyle's opening speech (Kyle, 2026-10-18) --
   INTRO_PICS in shared.js. Each sits in the scene's picture card, beside Mr Kyle. */
.ip-frame {
  position: relative; width: 100%; height: clamp(150px, 33vh, 290px); border-radius: 16px; overflow: hidden;
  border: 4px solid #2a3350; display: flex; align-items: center; justify-content: center; flex: none;
}
.ip-sticker { height: 88%; max-width: 78%; object-fit: contain; position: relative; z-index: 1; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .25)); }
.ip-sunny { background: radial-gradient(circle at 50% 62%, #f6ffea 0%, #cdeeb6 52%, #86cd7f 100%); }
.ip-gloomy { background: radial-gradient(circle at 50% 62%, #9a97a8 0%, #67647a 55%, #3d3a4f 100%); }
.ip-night { background: radial-gradient(circle at 50% 50%, #4a3486 0%, #24184a 60%, #130c2a 100%); }
.ip-warm { background: radial-gradient(circle at 50% 58%, #fffaf0 0%, #ffe6ad 58%, #ffc773 100%); }
.ip-photo { background: #24184a; }
.ip-photo > .ip-bg { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.ip-map { height: auto; background: #3d7a3a; }
.ip-map .tile-art { flex: none; }

/* the Gloom: soft gray clouds drifting over the picture */
.ip-fog { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.ip-fog i {
  position: absolute; width: 70%; height: 70%; border-radius: 50%;
  background: radial-gradient(circle, rgba(160, 158, 176, .85) 0%, rgba(150, 148, 166, .55) 42%, rgba(150, 148, 166, 0) 70%);
  animation: ip-fog 7s ease-in-out infinite alternate;
}
.ip-fog i:nth-child(1) { left: -20%; top: -10%; }
.ip-fog i:nth-child(2) { left: 45%; top: -20%; animation-delay: -2s; }
.ip-fog i:nth-child(3) { left: -15%; top: 45%; animation-delay: -4s; }
.ip-fog i:nth-child(4) { left: 50%; top: 40%; animation-delay: -1s; }
.ip-fog i:nth-child(5) { left: 15%; top: 15%; width: 60%; height: 60%; animation-delay: -5s; opacity: .7; }
.ip-gloomy:not(.ip-mystery) .ip-fog { z-index: 0; }            /* behind the gloomed creature, so its face shows */
.ip-gloomy:not(.ip-mystery) .ip-fog i { opacity: .8; }
.ip-town .ip-fog i { opacity: .75; background: radial-gradient(circle, rgba(170, 168, 186, .8) 0%, rgba(160, 158, 176, .5) 45%, rgba(160, 158, 176, 0) 70%); }
.ip-town .tile-art { filter: saturate(.45) brightness(.85); }
@keyframes ip-fog { from { transform: translate(-6%, -3%) scale(1); } to { transform: translate(8%, 5%) scale(1.15); } }

.ip-mystery { background: radial-gradient(circle at 50% 50%, #7d7a8e 0%, #4b4860 60%, #2c293c 100%); }
.ip-q {
  position: relative; z-index: 3; font-size: clamp(90px, 18vh, 150px); line-height: 1; color: #f1eefa;
  text-shadow: 0 0 18px rgba(255, 255, 255, .55), 0 6px 0 #2c293c; animation: ip-pulse 2.2s ease-in-out infinite;
}

/* Spark: the glowing burst */
.ip-spark { height: 92%; width: auto; position: relative; z-index: 1; overflow: visible; }
.ip-spark-rays { transform-origin: 100px 100px; animation: ip-spin 12s linear infinite; }
.ip-spark-star { transform-origin: 100px 100px; animation: ip-pulse 1.8s ease-in-out infinite; }
.ip-spark-glow { animation: ip-glow 1.8s ease-in-out infinite; }

/* little twinkles, leaves and sparkles */
.ip-twinkles i, .ip-leaves i, .ip-rise i, .ip-fall i, .ip-beam i { position: absolute; pointer-events: none; z-index: 2; }
.ip-twinkles i::before { content: "\2726"; color: #fff3b0; font-size: 20px; text-shadow: 0 0 8px #ffd75e; }
.ip-warm .ip-twinkles i::before { color: #ff9d2e; text-shadow: 0 0 6px #fff; }
.ip-twinkles i { animation: ip-twinkle 1.6s ease-in-out infinite; }
.ip-twinkles i:nth-child(1) { left: 10%; top: 14%; }
.ip-twinkles i:nth-child(2) { left: 82%; top: 10%; animation-delay: -.4s; }
.ip-twinkles i:nth-child(3) { left: 88%; top: 62%; animation-delay: -.8s; }
.ip-twinkles i:nth-child(4) { left: 6%; top: 70%; animation-delay: -1.2s; }
.ip-twinkles i:nth-child(5) { left: 24%; top: 42%; animation-delay: -.2s; }
.ip-twinkles i:nth-child(6) { left: 72%; top: 36%; animation-delay: -1s; }
.ip-twinkles i:nth-child(7) { left: 50%; top: 6%; animation-delay: -.6s; }
.ip-twinkles i:nth-child(8) { left: 46%; top: 84%; animation-delay: -1.4s; }
.ip-leaves i { width: 12px; height: 8px; border-radius: 0 10px; background: #5fb85a; top: -10px; animation: ip-leaf 5s linear infinite; }
.ip-leaves i:nth-child(1) { left: 12%; }
.ip-leaves i:nth-child(2) { left: 30%; animation-delay: -1.5s; }
.ip-leaves i:nth-child(3) { left: 55%; animation-delay: -3s; background: #8bcf62; }
.ip-leaves i:nth-child(4) { left: 74%; animation-delay: -.7s; }
.ip-leaves i:nth-child(5) { left: 88%; animation-delay: -2.4s; background: #8bcf62; }
.ip-leaves i:nth-child(6) { left: 42%; animation-delay: -4s; }
.ip-rise i, .ip-fall i, .ip-beam i { width: 8px; height: 8px; border-radius: 50%; background: #fff6c0; box-shadow: 0 0 8px 3px #ffd75e; }
.ip-rise i { bottom: 8%; animation: ip-rise 3.2s ease-in infinite; }
.ip-fall i { top: -4%; animation: ip-fall 2.6s ease-in infinite; }
.ip-rise i:nth-child(odd), .ip-fall i:nth-child(odd) { width: 6px; height: 6px; }
.ip-rise i:nth-child(1), .ip-fall i:nth-child(1) { left: 30%; }
.ip-rise i:nth-child(2), .ip-fall i:nth-child(2) { left: 38%; animation-delay: -.5s; }
.ip-rise i:nth-child(3), .ip-fall i:nth-child(3) { left: 44%; animation-delay: -1.1s; }
.ip-rise i:nth-child(4), .ip-fall i:nth-child(4) { left: 50%; animation-delay: -1.7s; }
.ip-rise i:nth-child(5), .ip-fall i:nth-child(5) { left: 56%; animation-delay: -2.3s; }
.ip-rise i:nth-child(6), .ip-fall i:nth-child(6) { left: 63%; animation-delay: -.8s; }
.ip-rise i:nth-child(7), .ip-fall i:nth-child(7) { left: 34%; animation-delay: -2.8s; }
.ip-rise i:nth-child(8), .ip-fall i:nth-child(8) { left: 47%; animation-delay: -.2s; }
.ip-rise i:nth-child(9), .ip-fall i:nth-child(9) { left: 53%; animation-delay: -1.4s; }
.ip-rise i:nth-child(10), .ip-fall i:nth-child(10) { left: 60%; animation-delay: -2s; }
.ip-rise i:nth-child(11), .ip-fall i:nth-child(11) { left: 41%; animation-delay: -2.5s; }
.ip-rise i:nth-child(12), .ip-fall i:nth-child(12) { left: 66%; animation-delay: -1s; }
.ip-egg-grow {
  position: absolute; bottom: 4%; left: 50%; height: 36%; max-width: none; margin-left: -12%; z-index: 3;
  animation: ip-egg-in 1s cubic-bezier(.2, 1.5, .4, 1) .4s backwards, ip-wiggle 1.8s ease-in-out 1.6s infinite;
  filter: drop-shadow(0 0 12px rgba(255, 215, 94, .9));
}

/* "...now you're one of us!": the student's own Ranger with a ribbon */
.ip-ranger { height: 86%; margin-bottom: 8%; }
.ip-ribbon {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); z-index: 2; white-space: nowrap;
  background: var(--gold); color: #3b2a00; font-weight: 800; font-size: 17px; padding: 3px 16px; border-radius: 999px;
  box-shadow: 0 3px 0 var(--gold-dark); animation: pop-in .6s ease-out .3s backwards;
}

/* a Novamon's Spark calming a gloomed creature */
.ip-split { justify-content: space-between; background: linear-gradient(90deg, #fff6dd 0%, #fff0c8 45%, #8d8a9c 70%, #5d5a6e 100%); }
.ip-side { position: relative; width: 42%; height: 100%; display: flex; align-items: center; justify-content: center; }
.ip-side .ip-sticker { height: 78%; max-width: 100%; }
.ip-beam i { top: 50%; left: 34%; width: 13px; height: 13px; box-shadow: 0 0 12px 5px #ffd75e; animation: ip-beam 1.6s ease-in infinite; }
.ip-beam i:nth-child(2) { animation-delay: -.27s; margin-top: -14px; }
.ip-beam i:nth-child(3) { animation-delay: -.54s; margin-top: 10px; }
.ip-beam i:nth-child(4) { animation-delay: -.8s; margin-top: -4px; }
.ip-beam i:nth-child(5) { animation-delay: -1.07s; margin-top: 16px; }
.ip-beam i:nth-child(6) { animation-delay: -1.34s; margin-top: -18px; }

/* a Ranger walking down the path */
.ip-walker {
  position: absolute; left: 0; top: 98px; width: 48px; height: 72px; z-index: 2;
  background-size: 144px auto; background-position: 0 -144px; image-rendering: pixelated;
  animation: ip-walk-frames .6s steps(3) infinite, ip-walk 7s linear infinite;
}

/* the eggs on offer */
.ip-eggs { gap: 0; padding: 0 2%; }
.ip-egg { height: 78%; flex: 1 1 0; min-width: 0; object-fit: contain; animation: ip-wiggle 1.8s ease-in-out infinite; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .2)); }

.ip-bob { animation: ip-bob 2.6s ease-in-out infinite; }
.ip-shiver { animation: ip-shiver 2.4s ease-in-out infinite; }

@keyframes ip-spin { to { transform: rotate(360deg); } }
@keyframes ip-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes ip-glow { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
@keyframes ip-twinkle { 0%, 100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes ip-leaf { from { transform: translateY(0) rotate(0); } to { transform: translateY(330px) rotate(540deg); } }
@keyframes ip-rise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-230px); opacity: 0; } }
@keyframes ip-fall { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(230px); opacity: 0; } }
@keyframes ip-beam { 0% { transform: translateX(0) scale(.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateX(150px) scale(1.1); opacity: 0; } }
@keyframes ip-egg-in { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes ip-wiggle { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-7deg); } 80% { transform: rotate(6deg); } 90% { transform: rotate(-3deg); } }
@keyframes ip-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6%); } }
@keyframes ip-shiver { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-2px) rotate(-1deg); } 40% { transform: translateX(2px) rotate(1deg); } 60% { transform: translateX(-1px); } }
@keyframes ip-walk-frames { to { background-position-x: -144px; } }
@keyframes ip-walk { from { transform: translateX(-50px); } to { transform: translateX(440px); } }
@media (max-width: 720px) {
  .scene-pic .ip-map .tile-art { zoom: .7; }
  .ip-frame { height: clamp(130px, 26vh, 220px); }
  .ip-ribbon { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ip-frame *, .ip-frame *::before { animation: none !important; }
}

/* The Great Tree's picture in its window (Kyle, 2026-10-18: the title screen's Tree), with Spark rising */
.tree-card .tree-art-spot.tree-pic {
  position: relative; height: clamp(110px, 22vh, 170px); border: 4px solid #2a3350; overflow: hidden; background: #24184a;
}
.tree-pic > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; display: block; }

/* Kyle's Novamon art (novamonArt in shared.js, 2026-10-18): sized like the placeholder it replaces */
.monster .mon-art, .modal-monster .mon-art, .pic-foe .mon-art, .pic-me .mon-art, .evo-mon .mon-art {
  display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain;
}
.b-pic .mon-art { display: block; width: 100%; height: 100%; object-fit: contain; }
.mon-art.mon-form-2 { filter: drop-shadow(0 0 10px rgba(255, 215, 94, .9)); }
.mon-art.mon-form-3 { filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 18px rgba(255, 180, 40, 1)); }
.evo.ph-done .evo-mon.new .mon-art { animation: bob 2.4s ease-in-out infinite; transform-origin: 50% 92%; }

/* ------------------------------------------------ the courtyard's stations (2026-10-24) --
   openStation() in world.js fills #st-card. */
.st-card { max-width: 560px; max-height: calc(100vh - 32px); overflow-y: auto; }
.st-card h2 { margin: 0 0 8px; }
.st-card p { margin: 8px 0; }
.st-big { font-size: 44px; font-weight: 800; line-height: 1.05; color: var(--ink); margin: 6px 0; }
.st-big small { display: block; font-size: 16px; font-weight: 600; color: var(--ink-soft); }
.st-big.gloom { color: #5d5a6e; }
.st-meter {
  position: relative; height: 24px; background: #e7dcc4; border-radius: 999px; overflow: hidden;
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, .08); margin: 8px 0;
}
.st-meter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #3e9bff, #7fd0ff, #ffd75e); transition: width .6s; }
.st-meter.clear { background: #8d8a9c; }
.st-meter.clear i { background: linear-gradient(90deg, #3fc46c, #7be08f); }
.st-meter span { position: relative; display: block; text-align: center; font-weight: 800; font-size: 15px; line-height: 24px; color: var(--ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.st-wow { color: #b06a00; font-weight: 800; font-size: 19px; animation: pop-in .5s ease-out; }
.st-list { text-align: left; margin: 8px auto; max-width: 380px; padding-left: 22px; font-size: 17px; }
.st-list li { margin: 3px 0; }

/* the stations' own pictures, big and pixel-sharp */
.st-fountain, .st-tower, .st-stall { margin: 4px auto; image-rendering: pixelated; background-repeat: no-repeat; }
.st-fountain {
  width: 144px; height: 144px; background-image: url("art/world/props/fountain.png"); background-size: 432px 144px;
  animation: st-fountain .5s steps(3) infinite;
}
@keyframes st-fountain { to { background-position-x: -432px; } }
.st-tower { width: 96px; height: 144px; background-image: url("art/world/props/tower.png"); background-size: 96px 144px; }
.st-stall { width: 158px; height: 170px; background-image: url("art/world/props/stall.png"); background-size: 158px 170px; }

/* Novamon Park: the class's Novamon */
.st-park { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; margin: 10px 0; }
.st-mon { background: var(--card-2); border-radius: 14px; padding: 8px 6px; display: grid; justify-items: center; gap: 2px; }
.st-mon.mine { outline: 3px solid var(--gold); background: #fff3cf; }
.st-mon-pic { width: 84px; height: 84px; }
.st-mon-pic svg, .st-mon-pic .mon-art { width: 100%; height: 100%; display: block; object-fit: contain; overflow: visible; }
.st-mon b { font-size: 16px; line-height: 1.15; }
.st-mon small { font-size: 13px; color: var(--ink-soft); }

/* the Quest Board: a cork board with paper notes pinned on (Mossbrook's notice-board style) */
.st-cork {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 16px 12px; border-radius: 14px; margin: 8px 0;
  background: radial-gradient(circle at 20% 30%, rgba(0, 0, 0, .08) 0 2px, transparent 3px) 0 0 / 14px 14px, #c8935a;
  border: 6px solid #7a4b26; box-shadow: inset 0 0 0 2px #a26a3a;
}
.st-note {
  position: relative; width: 150px; min-height: 86px; padding: 14px 10px 10px; background: #fffbe9; color: #3b2f1a;
  font-weight: 700; font-size: 14px; line-height: 1.3; box-shadow: 0 3px 6px rgba(0, 0, 0, .25); transform: rotate(-2deg);
}
.st-note:nth-child(even) { transform: rotate(2.5deg); }
.st-note::before {
  content: ""; position: absolute; top: 4px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff8f8f, #c42c2c); box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.st-note small { display: block; margin-top: 6px; font-weight: 600; font-style: italic; }
.st-note.big { width: 100%; max-width: 330px; font-size: 18px; background: #fff3c4; transform: rotate(-1deg); }
.st-note.folded { background: #e9dfc6; color: #8a7a5a; display: grid; align-content: center; justify-items: center; }
.st-note.folded b { font-size: 26px; letter-spacing: .1em; }

/* the Class Battle Board: a chalkboard */
.st-chalk {
  display: grid; gap: 10px; padding: 22px 18px; margin: 8px 0; border-radius: 10px; text-align: center;
  background: #2f4a3a; color: #f2f4ec; border: 8px solid #7a4b26; font-size: 18px;
  text-shadow: 0 0 1px rgba(255, 255, 255, .6);
}
.st-chalk b { font-size: 26px; letter-spacing: .06em; }
@media (prefers-reduced-motion: reduce) { .st-fountain { animation: none; } }

/* ------------------------------------------------------- Mossbrook (2026-10-24) --
   "You pick" buttons in the talk box, mood bubbles, the townspeople's name tags, the HELP WANTED
   notes with DONE stamps, and the big creatures (the gear thief and the giant bear) in battle. */
.scene-choices { position: relative; z-index: 3; width: min(1000px, 100%); display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 10px; }
.scene-choices.hidden { display: none; }
.scene-choice {
  font-family: inherit; font-size: clamp(16px, 2.2vw, 19px); font-weight: 700; color: var(--ink); cursor: pointer;
  background: #fff; border: 4px solid #2a3350; border-radius: 14px; padding: 10px 18px; box-shadow: 0 4px 0 #1a2138;
}
.scene-choice.on, .scene-choice:hover { background: var(--gold); color: #3b2a00; transform: translateY(-2px); }
.scene-choice.on::before { content: "\25B6  "; }
.scene-bubble {
  position: absolute; left: min(30%, 260px); top: 6%; z-index: 4; min-width: 54px; text-align: center;
  background: #fff; border: 4px solid #2a3350; border-radius: 22px; padding: 4px 12px; font-size: 30px; font-weight: 800;
  color: #2a3350; animation: pop-in .35s ease-out; pointer-events: none;
}
.scene.right .scene-bubble { left: auto; right: min(30%, 260px); }
.scene-bubble.hidden { display: none; }
.scene-actor.hop { animation: actor-hop .45s ease-out 2; }
.scene-actor.shake { animation: actor-shake .5s ease-in-out; }
@keyframes actor-hop { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-26px); } }
@keyframes actor-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-10px); } 40% { transform: translateX(10px); } 60% { transform: translateX(-7px); } 80% { transform: translateX(7px); } }
.scene-name.gus { background: #8a6a44; color: #fff7e6; box-shadow: 0 3px 0 #5a4228; }
.scene-name.pip { background: #e35a5a; color: #fff; box-shadow: 0 3px 0 #a33a3a; }
.scene-name.mabel { background: #7aa266; color: #fff; box-shadow: 0 3px 0 #557544; }
.scene-name.rocco { background: #2c2c34; color: #ffd75e; box-shadow: 0 3px 0 #111; }

.st-note.help { background: #fffbe9; }
.st-note.help b { display: block; font-size: 16px; margin-top: 4px; }
.st-note.done { background: #eef7e6; }
.st-done {
  position: absolute; right: -4px; bottom: 6px; transform: rotate(-14deg); border: 3px solid #c42c2c; color: #c42c2c;
  border-radius: 8px; padding: 0 8px; font-size: 18px; font-weight: 800; letter-spacing: .08em; background: rgba(255, 255, 255, .6);
}
.st-note.thanks { background: #fff3c4; font-size: 20px; }

/* Kyle's play-test (2026-10-24): at 1.35x the gear thief was WAY too big and cut off at the top. Just a touch bigger now. */
.b-foe-spot.big { transform: scale(1.08); transform-origin: 50% 50%; }

/* The winch parts note: what's found and what's on the winch (2026-10-24) */
.st-note .st-parts { display: block; margin-top: 6px; font-size: 14px; font-weight: 600; line-height: 1.35; text-align: left; }