/* ============================================================
   Green Meadow — Math Farm
   ------------------------------------------------------------
   A fixed 1280x800 stage, scaled to whatever window it is given.
   Every measurement below is in stage pixels, so the layout can be
   read straight off the design sheet.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  /* Letterboxing is unavoidable on a phone or tablet whose shape differs from
     the stage's. Grading the surround from dusk sky to deep meadow makes those
     bands read as the world continuing, rather than as a broken layout. */
  background: linear-gradient(#153c4e 0%, #1b4a34 55%, #14300f 100%);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;          /* no rubber-banding behind the stage */
  touch-action: manipulation;          /* and no double-tap zoom on the tiles */
}

body {
  font-family: "Baloo 2", "Arial Rounded MT Bold", "Nunito", "Trebuchet MS",
               system-ui, sans-serif;
  font-weight: 800;
  color: #5a3312;
  user-select: none;
  -webkit-user-select: none;
}

button {
  font: inherit; color: inherit; cursor: pointer; border: 0; background: none;
  padding: 0; touch-action: manipulation;
}
img {
  display: block; -webkit-user-drag: none; user-select: none;
  -webkit-touch-callout: none;         /* no long-press "save image" sheet */
}

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

/* The stage is measured against this box, not the window, so notch and
   home-indicator insets are kept clear on phones held sideways. */
#fit {
  position: fixed; inset: 0; overflow: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#stage {
  position: absolute; left: 50%; top: 50%;
  width: 1280px; height: 800px;
  overflow: hidden;
  transform-origin: center center;
  /* --k is the fit-to-window scale, set from script on resize */
  transform: translate(-50%, -50%) scale(var(--k, 1));
  border-radius: 22px;
  box-shadow: 0 26px 80px rgba(0, 0, 0, .55);
}

#stage.shake { animation: shake .4s ease; }
@keyframes shake {
  0%, 100% { transform: translate(-50%, -50%) scale(var(--k, 1)) translateX(0); }
  25% { transform: translate(-50%, -50%) scale(var(--k, 1)) translateX(-8px); }
  75% { transform: translate(-50%, -50%) scale(var(--k, 1)) translateX(8px); }
}

/* two screens share the stage; only one is ever in the tree */
#screen-title, #screen-game { position: absolute; inset: 0; overflow: hidden; }
#screen-title[hidden], #screen-game[hidden] { display: none; }

/* ============================================================
   TITLE SCREEN
   ============================================================ */

.tscene { position: absolute; inset: 0; }
.tsky {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 78% 4%, rgba(255, 250, 214, .75), transparent 55%),
    linear-gradient(#2f8fd8 0%, #63b6e8 30%, #9ad6f2 58%, #cfeeff 100%);
}
.tlayer { position: absolute; pointer-events: none; }
.tfar  { width: 1620px; left: -170px; bottom: 96px; opacity: .96; }
.tmid  { width: 1420px; left: -70px;  bottom: -110px; }
/* wider than the stage and squared off at the base, so no corner shows sky */
.tfore { width: 1420px; left: -70px;  bottom: -300px; }

.tmoth { position: absolute; width: 52px; will-change: transform; }
.tmoth-a { left: 1030px; top: 96px; animation: flit-a 19s ease-in-out infinite; }
.tmoth-b { left: 214px;  top: 322px; width: 46px; animation: flit-b 24s ease-in-out infinite 4s; }
.tbird   { position: absolute; left: 690px; top: 150px; width: 74px;
           animation: flit-b 31s ease-in-out infinite 9s; }

/* --- the cast --- */
.tcast { position: absolute; inset: 0; pointer-events: none; }
.tc { position: absolute; filter: drop-shadow(0 10px 12px rgba(24, 52, 14, .4)); }
.tc-cow   { left: -34px;  bottom: 60px;  width: 330px; animation: graze 7.2s ease-in-out infinite; }
.tc-sheep { left: 236px;  bottom: 34px;  width: 214px; animation: graze 8.4s ease-in-out infinite 1.1s; }
.tc-chick { left: 402px;  bottom: 4px;   width: 104px; animation: graze 5.6s ease-in-out infinite .6s; }
.tc-horse { right: -18px; bottom: 62px;  width: 268px; animation: graze 7.8s ease-in-out infinite 2.2s; }
.tc-pig   { right: 176px; bottom: 22px;  width: 190px; animation: graze 6.4s ease-in-out infinite 1.7s; }

/* --- music and sound --- */
.tsw { position: absolute; right: 48px; top: 18px; display: flex; gap: 26px; z-index: 6; }
.tsw-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: transform .13s cubic-bezier(.3, 1.6, .5, 1);
}
.tsw-btn img { width: 74px; filter: drop-shadow(0 5px 6px rgba(20, 40, 8, .5)); }
.tsw-btn span {
  font-size: 19px; letter-spacing: .06em; text-transform: uppercase; color: #fff;
  text-shadow: 0 2px 0 rgba(30, 60, 14, .85), 0 4px 8px rgba(0, 0, 0, .45);
}
.tsw-btn:active { transform: scale(.93); }
.tsw-btn::after { content: ""; position: absolute; inset: -10px; }

/* --- wordmark and ribbon --- */
.tlogo {
  position: absolute; left: 50%; top: 10px; width: 566px; margin: 0;
  transform: translateX(-50%);
  z-index: 5;
  animation: logo-in .8s cubic-bezier(.2, 1.5, .4, 1) both;
}
.tlogo img { width: 100%; filter: drop-shadow(0 14px 18px rgba(20, 44, 10, .45)); }
@keyframes logo-in {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-40px) scale(.82); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* the subtitle ribbon is not in the asset kit, so it is drawn here */
.tribbon {
  position: absolute; left: 50%; top: 286px; margin: 0;
  transform: translateX(-50%);
  z-index: 5;
  animation: logo-in .8s cubic-bezier(.2, 1.5, .4, 1) .12s both;
}
.tribbon span {
  position: relative; display: block;
  padding: 9px 76px 11px;
  font-size: 25px; color: #fff;
  text-shadow: 0 2px 0 rgba(58, 22, 96, .9), 0 5px 10px rgba(30, 8, 50, .5);
  background: linear-gradient(#9a5ad4 0%, #7a35bd 52%, #6528a6 100%);
  border-top: 3px solid #c294ec;
  border-bottom: 3px solid #4e1c85;
  box-shadow: 0 6px 14px rgba(30, 10, 50, .42);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
/* the folded ends */
.tribbon span::before, .tribbon span::after {
  content: ""; position: absolute; top: 6px; width: 34px; height: calc(100% - 12px);
  background: linear-gradient(#7a35bd, #521c8c);
  clip-path: polygon(0 0, 100% 18%, 100% 82%, 0 100%);
}
.tribbon span::before { left: -30px; transform: scaleX(-1); }
.tribbon span::after  { right: -30px; }

/* --- the menu --- */
.tmenu {
  position: absolute; left: 50%; top: 352px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 13px;
  z-index: 5;
}
.tbtn {
  position: relative; display: block;
  transition: transform .13s cubic-bezier(.3, 1.6, .5, 1), filter .2s ease;
  animation: menu-in .5s cubic-bezier(.25, 1.4, .4, 1) both;
}
.tbtn img { width: 100%; filter: drop-shadow(0 7px 9px rgba(20, 44, 10, .42)); }
.tbtn-play     { width: 344px; animation-delay: .18s; }
.tbtn-continue { width: 344px; animation-delay: .26s; }
.tmenu-row     { display: flex; gap: 16px; }
.tbtn-small    { width: 160px; }
.tmenu-row .tbtn:nth-child(1) { animation-delay: .34s; }
.tmenu-row .tbtn:nth-child(2) { animation-delay: .40s; }
.tmenu-row .tbtn:nth-child(3) { animation-delay: .46s; }
@keyframes menu-in {
  0%   { opacity: 0; transform: translateY(22px) scale(.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.tbtn:active { transform: scale(.96); }
.tbtn:focus-visible { outline: 4px solid #fff; outline-offset: 5px; border-radius: 40px; }

/* CONTINUE carries the saved lesson under its label, as in the design */
.tbtn-sub {
  position: absolute; left: 0; right: 0; bottom: 19%;
  text-align: center; font-size: 17px; font-style: normal; color: #eaf6ff;
  text-shadow: 0 2px 3px rgba(12, 48, 86, .9);
  padding-left: 44px;                 /* clear of the painted book icon */
  pointer-events: none;
}
/* nothing saved yet: greyed and inert, rather than lying about what it does */
.tbtn.is-off { pointer-events: none; filter: grayscale(.85) brightness(.82); opacity: .72; }

/* --- the slate --- */
.tslate {
  position: absolute; left: 26px; bottom: 24px; width: 236px;
  padding: 12px 14px 10px;
  border-radius: 12px;
  background: linear-gradient(#39352f, #24211c);
  border: 9px solid #b07c3e;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1),
              inset 0 3px 12px rgba(0, 0, 0, .6),
              0 7px 0 #7d5427, 0 14px 22px rgba(20, 10, 0, .45);
  z-index: 4;
}
.tslate-sum {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 38px; line-height: 1; color: #7fc7f5;
}
.tslate-sum i { font-style: normal; font-size: 30px; color: #f6e6a8; }
.tslate-sum .g { color: #f2839f; }
.tslate-sum .p { color: #a6e26a; }
.tslate-words {
  display: flex; justify-content: center; gap: 9px; margin-top: 7px;
  font-size: 15px; letter-spacing: .07em; text-transform: uppercase; color: #f2ecdd;
}
.tslate-words span + span::before {
  content: "•"; margin-right: 9px; color: #f6d24f;
}

/* --- the curriculum note --- */
.tbadge {
  position: absolute; right: 24px; bottom: 26px;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 12px;
  border-radius: 14px;
  background: linear-gradient(#efd39a, #cfa257);
  border: 4px solid #8f6428;
  box-shadow: inset 0 2px 0 rgba(255, 248, 220, .75), 0 6px 0 #7d5427,
              0 12px 20px rgba(20, 10, 0, .4);
  z-index: 4;
}
.tbadge img { width: 44px; filter: drop-shadow(0 2px 3px rgba(60, 30, 0, .5)); }
.tbadge small { display: block; font-size: 15px; color: #6b4413; line-height: 1.1; }
.tbadge strong { display: block; font-size: 21px; color: #2f6b18; line-height: 1.1; }

/* ============================================================
   Shared panels: settings, credits, parents
   ============================================================ */

.pane {
  position: absolute; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 22, 5, .74);
  backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .25s ease;
}
.pane[hidden] { display: none; }
.pane.open { opacity: 1; }

/* The painted frame keeps its own aspect, and the writable cream area sits a
   little over 19% in on every side — everything below is expressed against that
   rather than in pixels, so text can never spill onto the wood. */
.pane-box {
  position: relative; width: 780px; height: 758px;
  transform: translateY(20px) scale(.95);
  transition: transform .35s cubic-bezier(.3, 1.5, .5, 1);
}
.pane.open .pane-box { transform: translateY(0) scale(1); }
.pane-art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .5));
}
.pane-close { position: absolute; right: 8px; top: 6px; width: 74px; z-index: 2; }
.pane-close img { width: 100%; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.pane-close::after { content: ""; position: absolute; inset: -14px; }
.pane-close:active { transform: scale(.93); }

.pane-title {
  position: absolute; left: 19.5%; right: 19.5%; top: 20.5%; margin: 0;
  text-align: center; font-size: 38px; line-height: 1.1; color: #6d3d17;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .7);
}
.pane-body {
  position: absolute; left: 19.5%; right: 19.5%; top: 28.5%; bottom: 21%;
  padding-right: 8px;
  overflow-y: auto; overscroll-behavior: contain;
  font-size: 20px; line-height: 1.4; color: #5a3a16;
  scrollbar-width: thin;
  scrollbar-color: rgba(140, 96, 40, .55) transparent;
  -webkit-mask-image: linear-gradient(#000 0, #000 calc(100% - 22px), transparent 100%);
          mask-image: linear-gradient(#000 0, #000 calc(100% - 22px), transparent 100%);
}
.pane-body::-webkit-scrollbar { width: 8px; }
.pane-body::-webkit-scrollbar-track { background: rgba(140, 96, 40, .12); border-radius: 4px; }
.pane-body::-webkit-scrollbar-thumb {
  background: rgba(140, 96, 40, .5); border-radius: 4px;
}
.pane-body p { margin: 0 0 14px; }
.pane-body h3 {
  margin: 20px 0 8px; font-size: 24px; color: #3f7a1f;
}
.pane-body h3:first-child { margin-top: 0; }
.pane-body ul { margin: 0 0 14px; padding-left: 26px; }
.pane-body li { margin-bottom: 7px; }
.pane-body b { color: #7a4a12; }
.pane-body dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; }
.pane-body dt { font-size: 20px; color: #7a4a12; }
.pane-body dd { margin: 0; }

/* rows of sprite toggles inside a panel */
.pane-rows { display: flex; flex-direction: column; gap: 16px; }
.pane-row {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px; border-radius: 16px;
  background: rgba(151, 105, 44, .13);
  border: 3px solid rgba(151, 105, 44, .3);
}
.pane-row img { width: 62px; flex: none; }
.pane-row-label { flex: 1; font-size: 24px; color: #6d3d17; }
.pane-row-state { font-size: 20px; color: #7f6234; }
.pane-row.is-off img { filter: grayscale(1); opacity: .55; }
.pane-row button { display: flex; align-items: center; gap: 16px; width: 100%; }

.pane-actions { display: flex; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
.pane-mini {
  padding: 9px 22px; border-radius: 30px;
  background: linear-gradient(#e0b365, #b8802f);
  border: 3px solid #8f6428;
  box-shadow: 0 4px 0 #7d5427;
  font-size: 20px; color: #fff8e6;
  text-shadow: 0 2px 2px rgba(70, 40, 6, .7);
}
.pane-mini:active { transform: translateY(2px); box-shadow: 0 2px 0 #7d5427; }
.pane-note { font-size: 18px; color: #7f6234; margin-top: 10px; }

/* While a card is up, only the painted scene shows behind it. The cards carry
   their own banners and planks, so the playing furniture would only compete. */
#stage.sheeted .hud,
#stage.sheeted .board,
#stage.sheeted .answers,
#stage.sheeted .progress { opacity: 0; pointer-events: none; }
.hud, .board, .answers, .progress { transition: opacity .35s ease .05s; }

/* ============================================================
   The painted scene
   Four layers over a CSS sky. Each sheet is transparent where its
   original had a dark vignette, so they stack without seams.
   ============================================================ */

.scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

.sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 70% at 50% 96%, rgba(255, 246, 190, .55), transparent 60%),
    linear-gradient(#7ec8f2 0%, #a4dcf7 42%, #cdeeff 72%, #e6f7ff 100%);
}

.cloud {
  position: absolute;
  background: radial-gradient(closest-side, #fff 68%, rgba(255, 255, 255, 0) 100%);
  opacity: .85;
  filter: blur(.4px);
  will-change: transform;
}
.cloud::before, .cloud::after {
  content: ""; position: absolute;
  background: radial-gradient(closest-side, #fff 68%, rgba(255, 255, 255, 0) 100%);
}
.cloud-a { width: 300px; height: 96px; left: -320px; top: 62px; animation: drift 92s linear infinite; }
.cloud-a::before { width: 190px; height: 130px; left: 44px; top: -46px; }
.cloud-a::after  { width: 130px; height: 84px; left: 176px; top: -22px; }
.cloud-b { width: 220px; height: 72px; left: -260px; top: 168px; animation: drift 128s linear infinite 14s; opacity: .7; }
.cloud-b::before { width: 140px; height: 96px; left: 30px; top: -34px; }
.cloud-c { width: 360px; height: 104px; left: -420px; top: 20px; animation: drift 164s linear infinite 40s; opacity: .55; }
.cloud-c::before { width: 220px; height: 148px; left: 66px; top: -56px; }
@keyframes drift { to { transform: translateX(1760px); } }

.scene-layer { position: absolute; pointer-events: none; }

/* far hills and the little village */
.hills  { width: 1440px; left: -80px; bottom: 150px; opacity: .92; animation: sway 26s ease-in-out infinite; }
/* the barn, the windmill, the path and the pond */
.farm   { width: 1500px; left: -110px; bottom: 44px; }
/* The decorated strip the animals stand on. Wider than the stage, so the
   painted ends — where the strip narrows to a point — fall outside it; and the
   build script squares off its base, so no corner can show the scene beneath. */
.ground { width: 1340px; left: -30px; bottom: -104px; }

@keyframes sway {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-12px); }
}

.moth { position: absolute; width: 46px; will-change: transform; }
.moth-a { left: 966px; top: 312px; animation: flit-a 17s ease-in-out infinite; }
.moth-b { left: 262px; top: 158px; width: 40px; animation: flit-b 22s ease-in-out infinite 3s; }
@keyframes flit-a {
  0%   { transform: translate(0, 0) rotate(-6deg); }
  25%  { transform: translate(-120px, -54px) rotate(8deg); }
  50%  { transform: translate(64px, -104px) rotate(-4deg); }
  75%  { transform: translate(150px, -30px) rotate(10deg); }
  100% { transform: translate(0, 0) rotate(-6deg); }
}
@keyframes flit-b {
  0%   { transform: translate(0, 0) rotate(6deg); }
  33%  { transform: translate(230px, 48px) rotate(-8deg); }
  66%  { transform: translate(90px, 120px) rotate(6deg); }
  100% { transform: translate(0, 0) rotate(6deg); }
}

/* leaves and petals drifting on the breeze — the design sheet's particle row,
   used as ambience rather than as feedback */
.drift {
  position: absolute; top: -60px; opacity: .75;
  will-change: transform;
}
.drift-a { left: 14%; width: 34px; animation: drift-down 19s linear infinite; }
.drift-b { left: 46%; width: 26px; animation: drift-down 26s linear infinite 6s; }
.drift-c { left: 71%; width: 30px; animation: drift-down 23s linear infinite 13s; }
.drift-d { left: 88%; width: 32px; animation: drift-down 31s linear infinite 3s; }
@keyframes drift-down {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  10%  { opacity: .75; }
  50%  { transform: translate(-110px, 430px) rotate(220deg); }
  90%  { opacity: .6; }
  100% { transform: translate(70px, 880px) rotate(460deg); opacity: 0; }
}

/* ============================================================
   The animals
   ============================================================ */

.pen { position: absolute; inset: 0; z-index: 6; pointer-events: none; }

/* The box is the animal's footprint and never moves: the cast shadow hangs off
   it, and the sprite does the bobbing inside. Animating the box instead would
   drag the shadow along and undo the point of having one. */
.beast { position: absolute; }
/* height drives the size, not width: a pose of a different aspect then changes
   how much room the animal takes, never how tall it stands */
.beast .pose {
  height: 100%; width: auto;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 5px 4px rgba(30, 60, 20, .28));
  animation: graze 6.5s ease-in-out infinite;
}
/* Only ever one pose in flow, so the box still shrink-wraps to whichever is
   showing. The other stays loaded and decoded, just not painted. */
.beast .pose-glad { display: none; }
.beast.chomp .pose-idle { display: none; }
.beast.chomp .pose-glad { display: block; }

/* Grounding shadow. A drop-shadow filter follows the silhouette and so never
   touches the grass, which is what made the animals look airborne.

   isolation + z-index put it *behind* the sprite. Without that it wins the
   painting order — an absolutely positioned pseudo-element paints after static
   in-flow content — and lands as a dark smudge across the hooves instead of a
   shadow under them, which reads as floating all over again. */
.beast { isolation: isolate; }
.beast::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; bottom: -6px;
  width: 88%; height: 34px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(22, 48, 12, .58), rgba(22, 48, 12, 0) 100%);
}

.cow   { left: 10px;  bottom: 20px; height: 242px; }
.sheep { right: 30px; bottom: 32px; height: 183px; }
/* the flock is drawn facing right; on the right of the stage it should look in.
   The flip goes on the box, so it cannot collide with the sprite's animation. */
.sheep { transform: scaleX(-1); }
.sheep .pose { animation-duration: 7.8s; animation-delay: 1.4s; }

@keyframes graze {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  40% { transform: translateY(-5px) rotate(-1.2deg); }
  70% { transform: translateY(0) rotate(1deg); }
}

/* fed: a happy double hop */
.beast.chomp .pose { animation: chomp .9s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes chomp {
  0%   { transform: translateY(0) scale(1); }
  18%  { transform: translateY(-34px) scale(1.06, .94); }
  36%  { transform: translateY(0) scale(.94, 1.06); }
  56%  { transform: translateY(-18px) scale(1.03, .97); }
  78%  { transform: translateY(0) scale(.97, 1.03); }
  100% { transform: translateY(0) scale(1); }
}

/* ============================================================
   Heads-up display
   ============================================================ */

.hud { position: absolute; inset: 0 0 auto 0; height: 220px; z-index: 30; }

/* --- the two counters: a wooden plate with a sprite hanging off it --- */
.pill {
  position: absolute; display: flex; align-items: center;
  height: 54px; padding: 0 22px 0 62px;
  border-radius: 30px;
  background: linear-gradient(#a9713a 0%, #8b5527 46%, #7a4720 100%);
  border: 3px solid #eab35c;
  box-shadow:
    inset 0 3px 0 rgba(255, 226, 170, .38),
    inset 0 -4px 8px rgba(60, 26, 8, .5),
    0 4px 0 #5d3411, 0 8px 14px rgba(30, 12, 0, .35);
}
.pill-icon {
  position: absolute; left: -12px; top: 50%;
  width: 68px; transform: translateY(-50%);
  filter: drop-shadow(0 3px 3px rgba(40, 12, 0, .45));
}
/* The badge box is exactly the heart's box, so the number centres on the heart
   rather than on the plate. The padding lifts it off the heart's lower point —
   a heart's visual centre sits above its bounding box centre. */
.pill-badge {
  position: absolute; left: -12px; top: 50%;
  width: 68px; height: 61px;
  transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  padding-bottom: 9px;
  font-size: 27px; line-height: 1;
  color: #fff; text-shadow: 0 2px 0 #b81f23, 0 -1px 0 #b81f23, 2px 0 0 #b81f23, -2px 0 0 #b81f23;
}
.pill-text {
  font-size: 25px; line-height: 1; color: #fff8e2;
  text-shadow: 0 2px 2px rgba(60, 26, 8, .75);
  letter-spacing: .01em;
}
.pill-num { min-width: 74px; text-align: center; font-size: 30px; }

.pill-life { left: 28px; top: 34px; }
/* clear of both round buttons in the corner */
.pill-star { right: 200px; top: 34px; padding: 0 12px 0 66px; }

.pill.tick { animation: tick .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes tick { 50% { transform: scale(1.09); } }

/* --- the level banner: two arched planks with metal straps --- */
.banner {
  position: absolute; left: 50%; top: 6px; width: 528px;
  transform: translateX(-50%);
  filter: drop-shadow(0 10px 12px rgba(30, 40, 15, .4));
}
.banner > img { width: 100%; }
.banner::before, .banner::after {
  content: ""; position: absolute; top: 2px;
  width: 24px; height: 136px; border-radius: 8px;
  background: linear-gradient(90deg, #6d3f16, #a9702f 22%, #c98c44 50%, #a9702f 78%, #6d3f16);
  border: 2px solid #5b3211;
  box-shadow: 0 3px 6px rgba(30, 12, 0, .4);
}
.banner::before { left: 46px; }
.banner::after  { right: 46px; }

.banner-title, .banner-sub {
  position: absolute; left: 0; width: 100%; text-align: center;
  color: #fff7e6; text-transform: uppercase;
  text-shadow:
    0 3px 0 rgba(88, 46, 14, .95), 0 -2px 0 rgba(88, 46, 14, .6),
    3px 0 0 rgba(88, 46, 14, .6), -3px 0 0 rgba(88, 46, 14, .6),
    0 6px 10px rgba(50, 25, 5, .5);
}
.banner-title { top: 33px; font-size: 37px; letter-spacing: .01em; }
.banner-sub   { top: 115px; font-size: 27px; letter-spacing: .02em; }

/* --- round sprite buttons --- */
.round-btn { position: absolute; width: 70px; transition: transform .12s ease; }
.round-btn img { width: 100%; filter: drop-shadow(0 5px 6px rgba(30, 12, 0, .45)); }
/* an invisible margin around the sprite, so the target stays thumb-sized once
   the stage is scaled down onto a phone */
.round-btn::after { content: ""; position: absolute; inset: -15px; }
.round-btn:active { transform: scale(.94); }
.btn-gear { right: 32px; top: 26px; }
.btn-home { right: 112px; top: 26px; }

/* ============================================================
   The equation board
   ============================================================ */

.board {
  position: absolute; left: 50%; top: 188px; width: 578px;
  transform: translateX(-50%);
  z-index: 20;
  filter: drop-shadow(0 14px 18px rgba(30, 45, 15, .38));
}
.board-art { width: 100%; }

.equation {
  position: absolute; inset: 25% 13% 21% 13%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.equation.arrive { animation: arrive .5s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes arrive {
  0% { transform: scale(.86); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* a number sits in a sunken chip, like the ones painted on the board */
.chip {
  min-width: 82px; height: 90px; padding: 0 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 61px; line-height: 1; color: #6d3d17;
  border-radius: 18px;
  background: linear-gradient(#f6e8c6, #fbf1d8);
  box-shadow:
    inset 0 3px 5px rgba(150, 104, 46, .45),
    inset 0 -2px 0 rgba(255, 255, 255, .8),
    0 1px 0 rgba(255, 255, 255, .6);
  text-shadow: 0 2px 0 rgba(255, 255, 255, .75), 0 -1px 0 rgba(92, 50, 16, .28);
}
.op {
  font-size: 58px; line-height: 1; color: #6d3d17; padding: 0 6px;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .75), 0 -1px 0 rgba(92, 50, 16, .28);
}
/* the unknown: a dashed cut-out until it is filled in */
.chip-answer {
  background: rgba(246, 232, 198, .55);
  border: 4px dashed #9a6a34;
  box-shadow: inset 0 2px 4px rgba(150, 104, 46, .3);
  color: #8a5a28;
}
.chip-answer.filled {
  border-style: solid; border-color: #63a83a;
  background: linear-gradient(#dcf3c2, #eefadb);
  color: #3c7a1c;
  animation: land .45s cubic-bezier(.3, 1.6, .5, 1);
}
@keyframes land { 0% { transform: scale(.6) rotate(-8deg); } 100% { transform: scale(1) rotate(0); } }

/* ============================================================
   The four answers
   ============================================================ */

.answers {
  position: absolute; left: 50%; top: 452px;
  transform: translateX(-50%);
  display: flex; gap: 36px; z-index: 20;
}

.ans {
  position: relative; width: 118px;
  transition: transform .13s cubic-bezier(.3, 1.6, .5, 1), filter .13s ease;
  filter: drop-shadow(0 8px 8px rgba(30, 45, 15, .4));
}
.ans img { width: 100%; }
.ans span {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding-bottom: 5px;
  font-size: 50px; line-height: 1; color: #fff;
  text-shadow:
    0 3px 0 rgba(52, 30, 8, .55), 0 -2px 0 rgba(52, 30, 8, .35),
    3px 0 0 rgba(52, 30, 8, .35), -3px 0 0 rgba(52, 30, 8, .35),
    0 7px 12px rgba(30, 15, 0, .45);
}
/* the light bamboo surround from the design sheet */
.ans::before {
  content: ""; position: absolute; inset: -9px;
  border: 8px solid #e0b672;
  border-radius: 22px;
  background: linear-gradient(#f0cd93, #cf9f5d);
  box-shadow:
    inset 0 2px 0 rgba(255, 245, 214, .8),
    inset 0 -3px 4px rgba(120, 76, 26, .45),
    0 3px 0 #8f6428;
  z-index: -1;
}
.ans:active { transform: translateY(1px) scale(.97); }
.ans:focus-visible { outline: 4px solid #fff; outline-offset: 6px; border-radius: 22px; }

.ans.win  { animation: win .7s ease; }
.ans.lose { animation: lose .6s ease; }
@keyframes win {
  0%   { transform: scale(1); filter: drop-shadow(0 8px 8px rgba(30, 45, 15, .4)); }
  40%  { transform: scale(1.22) rotate(-3deg); filter: brightness(1.3) drop-shadow(0 0 26px #ffe680); }
  100% { transform: scale(1.1); filter: brightness(1.12) drop-shadow(0 0 18px #ffe680); }
}
@keyframes lose {
  0%, 100% { transform: translateX(0); filter: none; }
  20% { transform: translateX(-11px) rotate(-4deg); filter: saturate(.4) brightness(.85); }
  50% { transform: translateX(9px) rotate(3deg); filter: saturate(.4) brightness(.85); }
  80% { transform: translateX(-5px); filter: saturate(.6); }
}

/* ============================================================
   Progress towards the present
   ============================================================ */

.progress {
  position: absolute; left: 50%; top: 692px; width: 700px;
  transform: translateX(-50%);
  display: flex; align-items: center; z-index: 20;
}
.progress-track {
  position: relative; flex: 1; height: 34px; margin: 0 46px 0 34px;
  border-radius: 20px;
  background: linear-gradient(#8b5527 0%, #6d3f16 55%, #7d4a1d 100%);
  border: 3px solid #5b3211;
  box-shadow:
    inset 0 4px 7px rgba(40, 18, 2, .65),
    inset 0 -2px 0 rgba(214, 160, 96, .3),
    0 3px 0 #4a280d, 0 7px 12px rgba(20, 10, 0, .35);
  overflow: hidden;
}
.progress-fill {
  position: absolute; inset: 3px auto 3px 3px; width: 0;
  border-radius: 16px;
  background: linear-gradient(#a6e4ff 0%, #45a8ea 48%, #1f7fd0 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .55), 0 0 12px rgba(60, 170, 255, .6);
  transition: width .55s cubic-bezier(.3, 1.2, .5, 1);
}
.progress-knob {
  position: relative; width: 66px; z-index: 2; margin-right: -46px;
  filter: drop-shadow(0 4px 5px rgba(30, 12, 0, .5));
}
.progress-gift {
  position: relative; width: 68px; z-index: 2; margin-left: -50px;
  filter: drop-shadow(0 4px 5px rgba(30, 12, 0, .5));
}
.progress-gift.ready { animation: jig .6s ease-in-out infinite; }
@keyframes jig {
  0%, 100% { transform: rotate(-7deg) scale(1.06); }
  50% { transform: rotate(7deg) scale(1.14); }
}

/* ============================================================
   Transient layers: sparkles, thrown hay, ribbons, hints
   ============================================================ */

.fx-layer { position: absolute; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.fx { position: absolute; transform: translate(-50%, -50%); }
.fx img { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); }

@keyframes spark {
  0%   { transform: translate(-50%, -50%) scale(.3); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(140deg); opacity: 0; }
}
@keyframes burst {
  0%   { transform: translate(-50%, -50%) scale(.2); opacity: 0; }
  30%  { opacity: .95; }
  100% { transform: translate(-50%, -50%) scale(1.5) rotate(60deg); opacity: 0; }
}
/* A lob, not a slide. The food has to clear the midground — the meadow already
   has carrots, apples and veg crates painted into it, so a small sprite tracking
   straight through the grass is camouflage. Rising well above the scenery, and
   carrying a bright rim, is what makes it readable. */
@keyframes toss {
  0%   { transform: translate(-50%, -50%) scale(.4) rotate(0deg); opacity: 0; }
  12%  { opacity: 1; }
  50%  { transform: translate(calc(-50% + var(--dx) * .5),
                             calc(-50% + var(--dy) * .5 - 150px))
                   scale(1.2) rotate(200deg); }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
                   scale(1) rotate(400deg); opacity: 1; }
}
@keyframes fall {
  0%   { transform: translate(-50%, -50%) rotate(0deg); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), 880px) rotate(var(--spin)); opacity: .9; }
}

.score-pop {
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, -50%);
  font-size: 44px; color: #ffe14f;
  /* a dark outline, so it reads over the cream board as well as over grass */
  text-shadow: 0 3px 0 #4a2a06, 0 -2px 0 #4a2a06, 3px 0 0 #4a2a06, -3px 0 0 #4a2a06,
               2px 2px 0 #4a2a06, -2px 2px 0 #4a2a06, 0 8px 14px rgba(40, 20, 0, .55);
  animation: rise 1.1s cubic-bezier(.2, .9, .3, 1) forwards;
}
@keyframes rise {
  0%   { transform: translate(-50%, -50%) scale(.5); opacity: 0; }
  25%  { transform: translate(-50%, -80%) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, -220%) scale(1); opacity: 0; }
}

/* The effects layer's nodes are zero-width anchors, so the bubble has to size
   itself to its content rather than inherit a width to wrap against. */
.hint {
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 12px;
  width: max-content; max-width: 640px;
  padding: 9px 24px 9px 14px;
  border-radius: 22px;
  background: linear-gradient(#fff8e0, #f5e3b4);
  border: 4px solid #d2a355;
  box-shadow: 0 5px 0 #a9793a, 0 12px 22px rgba(30, 20, 0, .35);
  font-size: 23px; line-height: 1.25; color: #6d3d17; text-align: left;
  animation: hint 4.2s ease forwards;
}
.hint img { position: static; transform: none; width: 38px; flex: none; }
@keyframes hint {
  0%   { transform: translate(-50%, -20%) scale(.8); opacity: 0; }
  8%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  88%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -70%) scale(.95); opacity: 0; }
}

/* The feedback ribbon lives in the band between the answers and the progress
   bar, so it never covers the statement it is reacting to. */
.ribbon {
  position: absolute; left: 50%; top: 566px;
  transform: translateX(-50%);
  z-index: 45; opacity: 0; pointer-events: none;
}
.ribbon img { width: 262px; filter: drop-shadow(0 10px 14px rgba(20, 30, 5, .45)); }
.ribbon.show { animation: ribbon 1.3s cubic-bezier(.3, 1.5, .5, 1) forwards; }
@keyframes ribbon {
  0%   { opacity: 0; transform: translateX(-50%) scale(.5) rotate(-8deg); }
  18%  { opacity: 1; transform: translateX(-50%) scale(1.12) rotate(2deg); }
  32%  { transform: translateX(-50%) scale(1) rotate(0deg); }
  78%  { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(.94) translateY(-24px); }
}

/* ============================================================
   Sheets: the opening card, the result, the settings
   ============================================================ */

.sheet {
  position: absolute; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(66% 66% at 50% 46%, rgba(16, 38, 11, .58), rgba(8, 22, 5, .82));
  opacity: 0; transition: opacity .3s ease;
}
.sheet[hidden] { display: none; }
.sheet.open { opacity: 1; }

.sheet-box {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  transform: translateY(26px) scale(.94);
  transition: transform .38s cubic-bezier(.3, 1.5, .5, 1);
}
.sheet.open .sheet-box { transform: translateY(0) scale(1); }

.sheet-arch  { width: 560px; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .5)); }
.sheet-great { width: 340px; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .5)); }
.sheet-goal  { width: 330px; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .45)); }

.sheet-plank { position: relative; width: 430px; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45)); }
.sheet-plank.wide { width: 480px; }
.sheet-plank > img { width: 100%; }
.sheet-plank-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  /* the inset keeps a long line inside the painted frame instead of
     overflowing it, and lets it wrap onto a second line if it must */
  padding: 0 13%;
  font-size: 33px; line-height: 1.12; text-align: center; color: #6d3d17;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .7);
}

.done-stars { display: flex; gap: 18px; align-items: flex-end; }
.done-stars img { width: 92px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45)); }
.done-stars img:nth-child(2) { width: 112px; }
.done-stars img.lit { animation: pop .5s cubic-bezier(.3, 1.8, .5, 1) both; }
@keyframes pop {
  0%   { transform: scale(.2) rotate(-40deg); opacity: 0; }
  70%  { transform: scale(1.25) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.done-tally { display: flex; gap: 34px; }
.done-tally span {
  display: flex; align-items: center; gap: 8px;
  font-size: 30px; color: #fff8e2;
  text-shadow: 0 3px 0 rgba(50, 28, 6, .8), 0 6px 12px rgba(0, 0, 0, .5);
}
.done-tally img { width: 44px; }

.sheet-row { display: flex; gap: 22px; }
.sheet-note {
  margin: 0; font-size: 21px; color: #f2ffe4;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .7);
}
.sheet-note kbd {
  font: inherit; padding: 1px 9px; border-radius: 7px;
  background: rgba(255, 255, 255, .22); border: 2px solid rgba(255, 255, 255, .45);
}

/* --- the glossy pill buttons, with their labels wiped and re-set --- */
/* The button grows with its label rather than clipping it — the artwork is a
   stretched background, and a capsule takes a little widening invisibly. */
.pill-btn {
  position: relative; min-width: 212px; height: 78px; padding: 0 36px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .13s cubic-bezier(.3, 1.6, .5, 1);
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45));
}
.pill-btn.big { min-width: 260px; height: 96px; padding: 0 44px; }
.pill-btn::before {
  content: ""; position: absolute; inset: 0;
  background: var(--art) center / 100% 100% no-repeat;
}
.pill-btn.green  { --art: url("../art/ui/btn-green.png"); }
.pill-btn.gold   { --art: url("../art/ui/btn-gold.png"); }
.pill-btn.blue   { --art: url("../art/ui/btn-blue.png"); }
.pill-btn.purple { --art: url("../art/ui/btn-purple.png"); }
.pill-btn span {
  position: relative; padding-bottom: 4px; white-space: nowrap;
  font-size: 31px; color: #fff; text-transform: uppercase; letter-spacing: .02em;
  text-shadow: 0 3px 0 rgba(40, 24, 4, .5), 0 -2px 0 rgba(40, 24, 4, .3),
               0 6px 10px rgba(20, 10, 0, .4);
}
.pill-btn.big span { font-size: 42px; }
.pill-btn:active { transform: translateY(2px) scale(.97); }
.pill-btn:focus-visible { outline: 4px solid #fff; outline-offset: 6px; border-radius: 40px; }

.toggles { display: flex; gap: 26px; }
.toggle {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 20px; border-radius: 22px;
  background: rgba(255, 248, 226, .16);
  border: 3px solid rgba(255, 248, 226, .4);
  font-size: 22px; color: #fff8e2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .6);
  transition: transform .13s ease, opacity .2s ease;
}
.toggle img { width: 62px; }
.toggle.off { opacity: .42; }
.toggle.off img { filter: grayscale(1); }


/* Lift-on-hover only where there is a pointer that can hover. On a touch
   screen these rules would stick after a tap and leave a tile raised. */
@media (hover: hover) and (pointer: fine) {
  .round-btn:hover { transform: scale(1.07); }
  .ans:hover  { transform: translateY(-6px) scale(1.04); }
  .pill-btn:hover  { transform: translateY(-4px) scale(1.04); }
  .toggle:hover { transform: translateY(-3px); }
}

/* ============================================================
   Turn-your-device card
   ============================================================ */

#rotate {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 32px;
  background: linear-gradient(#3d7a2c, #1d4415);
  text-align: center;
}
#rotate[hidden] { display: none; }
#rotate img {
  width: 46vw; max-width: 220px;
  animation: tip 2.6s ease-in-out infinite;
}
#rotate strong {
  font-size: clamp(22px, 6.4vw, 34px); color: #fff8e2;
  text-shadow: 0 3px 0 rgba(24, 52, 12, .9), 0 6px 14px rgba(0, 0, 0, .5);
}
#rotate span {
  font-size: clamp(15px, 4.2vw, 21px); color: #d7f0c2;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
@keyframes tip {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-88deg); }
}

@media (prefers-reduced-motion: reduce) {
  .cloud, .moth, .drift, .beast, .hills, .progress-gift.ready { animation: none !important; }
  .drift { display: none; }
}