/* Rustic look: old paper for every card, panel and button (see "Paper skin"
   at the end), Rye for titles and Patrick Hand, a neat handwriting, for the
   words kids read. Both fonts are SIL Open Font License (assets/fonts). */

@font-face { font-family: 'Rye'; src: url('assets/fonts/Rye-Regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Patrick Hand'; src: url('assets/fonts/PatrickHand-Regular.woff2') format('woff2'); font-display: swap; }

:root {
  --head: 'Rye', Georgia, 'Times New Roman', serif;
  --hand: 'Patrick Hand', 'Comic Sans MS', 'Segoe Print', sans-serif;
  --body: var(--hand);
  --ink: #3b2a1a;
  --cream: #f7f1df;
  --leaf: #3d7a45;
  --leaf-dark: #2b5631;
  --gold: #e8a838;
  --gold-dark: #b87a1c;
  --panel: #5caa63;
  --tile: #8fd18a;
  --mint: #e7f5df;
  --strand: #ffcf3f;
  --warn: #b33a1a;
  --shadow: rgba(20, 40, 18, 0.28);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  font-family: var(--body);
  color: var(--ink);
  background: linear-gradient(180deg, #4f9a5a, #2f6a38 60%, #24512b);
  background-attachment: fixed;
}
body { min-height: 100dvh; }
h1, h2, h3 { font-family: var(--head); font-weight: 400; letter-spacing: 0.03em; }

.btn {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 0.7rem 1.25rem;
  min-height: 44px;
  font: inherit;
  font-weight: 800;
  background: var(--gold);
  color: #3b2a1a;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--gold-dark);
  touch-action: manipulation;
}
.btn:active { transform: translateY(2px); box-shadow: none; }
.btn:focus-visible, .chip:focus-visible, .tile:focus-visible, .map-node:focus-visible {
  outline: 3px solid #fff2b0;
  outline-offset: 2px;
}
.btn-ghost {
  background: rgba(247, 241, 223, 0.92);
  box-shadow: 0 2px 0 rgba(0,0,0,0.15);
}
.btn[disabled] { opacity: 0.5; cursor: default; }

/* ---------- Opening card (same structure as Veggie Crush) ---------- */
#sq-open {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: start center;
  align-content: start;
  padding: 3.25rem 0.75rem 0.85rem;
  overflow-y: auto;
  background: rgba(20, 40, 18, 0.55);
}
#sq-open[hidden], #app[hidden], .overlay[hidden], [hidden] { display: none !important; }

.sq-studio {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: var(--cream);
  font-weight: 800;
  background: rgba(0,0,0,0.28);
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
}
.sq-howto {
  display: grid;
  gap: 0.5rem;
  justify-items: center;
  width: min(440px, 100%);
}
.sq-title-art {
  width: 100%;
  height: min(22dvh, 150px);
  border-radius: 14px;
  box-shadow: 0 8px 22px var(--shadow);
  background: url("assets/bg/forest.jpg") center 70% / cover, #1a3d22;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  overflow: hidden;
}
.title-word {
  font-family: var(--head); font-weight: 400; letter-spacing: 0.03em;
  font-size: clamp(2.4rem, 12vw, 3.6rem);
  color: var(--gold);
  -webkit-text-stroke: 2px #3b2a1a;
  paint-order: stroke fill;
  text-shadow: 0 4px 0 #3b2a1a;
}
.title-wheel { width: 64px; animation: spin 6s linear infinite; }
.title-load { width: 56px; }
@keyframes spin { to { transform: rotate(360deg); } }
.sq-howto-card {
  background: var(--cream);
  border-radius: 18px;
  padding: 0.85rem 1rem 1rem;
  box-shadow: 0 10px 30px var(--shadow);
}
.sq-howto-card h2 { margin: 0 0 0.35rem; font-size: 1.15rem; }
.sq-howto-card p { margin: 0 0 0.4rem; line-height: 1.35; font-size: 0.95rem; }
.sq-play { width: 100%; margin-top: 0.45rem; }

/* ---------- App shell ---------- */
#app {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;
  padding-bottom: var(--safe-bottom);
}
.hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.55rem 0.85rem;
  background: rgba(247, 241, 223, 0.94);
  border-bottom: 3px solid var(--leaf-dark);
}
.brand { display: flex; gap: 0.55rem; align-items: center; min-width: 0; flex: 1 1 0; }
.brand > div { min-width: 0; }
.brand h1 { margin: 0; font-size: 1.25rem; }
.tag { margin: 0; font-size: 0.85rem; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo { width: 34px; height: 34px; }
.stats { display: flex; gap: 0.5rem; margin: 0 0 0 auto; flex: 0 0 auto; }
.stats div {
  background: var(--mint);
  border-radius: 12px;
  padding: 0.2rem 0.5rem;
  min-width: 3.3rem;
  text-align: center;
}
.stats dt { margin: 0; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; }
.stats dd { margin: 0; font-weight: 800; font-size: 1.05rem; }
.hud-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.hud-actions .btn { font-size: 0.88rem; padding: 0.4rem 0.75rem; min-height: 40px; }

.playfield {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  padding: 0.6rem;
  align-content: start;
}
.stage-col { width: min(100%, 620px); margin: 0 auto; display: grid; gap: 0.55rem; }

/* ---------- Stage ---------- */
.stage-wrap {
  position: relative;
  border: 4px solid #24512b;
  border-radius: 18px;
  overflow: hidden;
  background: #9fd3e8;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.18), 0 10px 24px var(--shadow);
  aspect-ratio: 1 / 1;
  max-height: 52dvh;
  width: 100%;
  margin: 0 auto;
}
#stage {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y;   /* a swipe on the picture scrolls the page */
}
/* The level instructions sit in a card above the picture, so they never cover the pulleys */
.goal {
  margin: 0;
  padding: 0.45rem 0.75rem;
  border-radius: 14px;
  border: 3px solid #24512b;
  background: rgba(247, 241, 223, 0.96);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.3;
}
.toast {
  position: absolute;
  left: 50%;
  bottom: 0.6rem;
  transform: translateX(-50%);
  margin: 0;
  max-width: calc(100% - 1rem);
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: #3b2a1a;
  color: var(--cream);
  font-weight: 800;
  font-size: 0.9rem;
  text-align: center;
  pointer-events: none;
  animation: toast-in 0.2s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 6px); } }

/* ---------- Gauge, rope meter, pull button ---------- */
.readouts {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.6rem;
  align-items: center;
  background: var(--cream);
  border-radius: 18px;
  padding: 0.5rem 0.7rem;
  box-shadow: 0 6px 16px var(--shadow);
}
.gauge { margin: 0; text-align: center; width: 104px; }
.gauge svg { width: 104px; height: 104px; display: block; }
.gauge figcaption { font-size: 0.72rem; font-weight: 700; line-height: 1.1; margin-top: -2px; }
.gauge figcaption b { font-size: 1.3rem; font-family: var(--head); font-weight: 400; letter-spacing: 0.03em; }
.gauge.over figcaption b { color: var(--warn); }
.gauge.over svg { animation: pin-shake 0.12s linear infinite; }
@keyframes pin-shake { 50% { transform: translateX(1.5px); } }

.rope-meter { min-width: 0; }
.rm-label { margin: 0 0 0.25rem; font-size: 0.82rem; font-weight: 700; }
.rm-track {
  position: relative;
  height: 22px;
  border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, rgba(59,42,26,0.55) 0 2px, transparent 2px 100%) 0 100% / var(--tick, 10%) 40% no-repeat repeat-x,
    #e9d7a4;
  border: 2px solid #8a6a2c;
  overflow: hidden;
}
.rm-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: url("assets/parts/rope.png") 0 0 / 22px 22px repeat-x;
  background-color: #c9a440;
  transform-origin: left;
  transition: width 0.08s linear;
}
.rm-need {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 3px;
  background: var(--leaf);
  box-shadow: 0 0 0 1px #fff;
  left: 0;
}
.rm-need.too-far { background: var(--warn); }
.rm-strands { margin: 0.3rem 0 0; font-size: 0.82rem; font-weight: 700; line-height: 1.25; }
.rm-strands .s { background: var(--strand); border-radius: 6px; padding: 0 0.3rem; }

.btn-pull {
  min-width: 84px;
  min-height: 64px;
  font-size: 1.4rem;
  font-family: var(--head); font-weight: 400; letter-spacing: 0.03em;
  border-radius: 20px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.btn-pull.holding { transform: translateY(2px); box-shadow: none; background: #f4b942; }
.pull-arrow { display: inline-block; font-size: 1.3rem; }

/* ---------- Parts bin ---------- */
.bin {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), transparent 35%),
    url("assets/ui/green_large.png") center / 100% 100% no-repeat,
    var(--panel);
  border: 3px solid #24512b;
  border-radius: 18px;
  /* The panel art has a dark frame about 2.5% of its width on each side, so
     the sides grow with it and everything stays on the light green. */
  padding: 0.9rem calc(2.5% + 0.75rem) 1rem;
  box-shadow: 0 8px 20px var(--shadow);
}
.bin-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.3rem 0.6rem; margin-bottom: 0.4rem; }
.bin-head h2 { margin: 0; font-size: 1.05rem; color: #16321a; }
.tie { display: flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; font-weight: 800; color: #16321a; }
.chip {
  appearance: none;
  border: 2px solid #24512b;
  background: var(--mint);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  min-height: 36px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--gold); border-color: var(--gold-dark); }
/* Wrap rather than scroll sideways, so no part is ever hidden off the edge. */
.bin-tiles { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.bin-empty { margin: 0.2rem 0; font-weight: 700; color: #16321a; font-size: 0.9rem; }
.tile {
  position: relative;
  flex: 0 0 auto;
  width: 84px;
  min-height: 92px;
  border: 0;
  border-radius: 14px;
  padding: 0.35rem 0.25rem 0.3rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.35), transparent 45%),
    var(--tile);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.1;
  color: #16321a;
  cursor: pointer;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.2rem;
}
.tile img { width: 44px; height: 44px; object-fit: contain; pointer-events: none; }
.tile .count {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 1.4rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--cream);
  font-size: 0.78rem;
}
.tile.on { outline: 3px solid var(--gold); outline-offset: -3px; background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent 45%), #c6eabb; }
.tile.locked { filter: grayscale(1); opacity: 0.6; cursor: default; }
.tile .minus {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  background: #3b2a1a;
  color: var(--cream);
  font-weight: 800;
  line-height: 26px;
  padding: 0;
}

/* ---------- Side panel ---------- */
.side-panel { width: min(100%, 620px); margin: 0 auto; }
.panel-inner {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), transparent 35%),
    url("assets/ui/green_large.png") center / 100% 100% no-repeat,
    var(--panel);
  border-radius: 18px;
  padding: 0.9rem 1.05rem 1rem;
  color: #16321a;
  box-shadow: 0 8px 20px var(--shadow);
  border: 3px solid #24512b;
}
.panel-inner h2 { margin: 0 0 0.3rem; }
.meta { margin: 0.15rem 0; font-weight: 700; }
.goal-line { display: block; }
#side-goal { display: none; } /* the same lines are already in the card above the picture */
.hint { margin: 0.55rem 0 0; font-size: 0.9rem; opacity: 0.95; }
.side-stars { margin-top: 0.5rem; font-size: 1.4rem; letter-spacing: 0.1em; }

/* ---------- Overlays and cards ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(15, 30, 14, 0.55);
  overflow-y: auto;
}
.overlay-card {
  width: min(440px, 100%);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  background: var(--cream);
  border-radius: 18px;
  padding: 1.15rem 1.2rem 1.2rem;
  text-align: center;
  box-shadow: 0 12px 36px var(--shadow);
}
.overlay-card h2 { margin: 0 0 0.45rem; position: relative; z-index: 2; }
#overlay-body { position: relative; isolation: isolate; }
.overlay-card p { margin: 0 0 0.75rem; line-height: 1.4; }
.overlay-buttons { display: grid; gap: 0.5rem; margin-top: 0.4rem; }
.overlay-buttons .btn { width: 100%; }
.overlay-card .left { text-align: left; }
.big-stars { font-size: 2.4rem; letter-spacing: 0.15em; margin: 0.1rem 0 0.5rem; }
.star-on { color: var(--gold); text-shadow: 0 2px 0 var(--gold-dark); }
.big-stars span { display: inline-block; position: relative; }
.big-stars .star-on { animation: star-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
.big-stars .star-on:nth-child(2) { animation-delay: 0.25s; }
.big-stars .star-on:nth-child(3) { animation-delay: 0.5s; }
.big-stars .star-on::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.6em;
  height: 2.6em;
  margin: -1.3em 0 0 -1.3em;
  background: url("assets/fx/sparkle.png") center / contain no-repeat;
  z-index: -1;
  opacity: 0;
  animation: flash 0.7s ease-out both;
  animation-delay: inherit;
}
@keyframes star-pop {
  from { transform: scale(0) rotate(-40deg); }
  to { transform: scale(1) rotate(0); }
}
@keyframes flash {
  0% { opacity: 0; transform: scale(0.3); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.4); }
}
.star-off { color: #d7cfb6; }
.math {
  display: inline-block;
  font-family: var(--head); font-weight: 400; letter-spacing: 0.04em;
  font-size: 1.3rem;
  background: var(--mint);
  border-radius: 12px;
  padding: 0.35rem 0.75rem;
  margin: 0 0 0.75rem;
}
.tag-line {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--leaf);
  margin-bottom: 0.2rem;
}

/* Discovery card layers */
.layers { text-align: left; display: grid; gap: 0.5rem; margin-bottom: 0.6rem; }
.layer { border-radius: 14px; padding: 0.6rem 0.75rem; background: #fff; border: 2px solid #e2d8bc; }
.layer h3 { margin: 0 0 0.2rem; font-size: 0.95rem; color: var(--leaf-dark); }
.layer p { margin: 0; font-size: 0.95rem; }
.layer.engineer { border-color: #8fd18a; }
.layer.physicist { border-color: #6ba4c9; background: #f4f9fc; }
.layer.locked { background: transparent; border-style: dashed; color: #7a7260; font-size: 0.86rem; }

/* Why? question */
.choices { display: grid; gap: 0.45rem; margin-bottom: 0.6rem; }
.choice {
  appearance: none;
  border: 2px solid #24512b;
  background: #fff;
  border-radius: 14px;
  padding: 0.7rem 0.8rem;
  min-height: 48px;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.choice.right { background: #c6eabb; border-color: var(--leaf); }
.choice.wrong { background: #f6d5c8; border-color: var(--warn); }
.choice[disabled] { cursor: default; }
.choice.right { position: relative; color: var(--ink); }

/* Right answer: a gold burst with stars flying out */
.pop-fx { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 3; }
.pop-fx img {
  position: absolute;
  width: 150px;
  left: -75px;
  top: -75px;
  animation: flash 0.8s ease-out both;
}
.pop-fx .fly {
  position: absolute;
  left: -0.5em;
  top: -0.6em;
  font-size: 1.3rem;
  color: var(--gold);
  text-shadow: 0 2px 0 var(--gold-dark);
  animation: fly 0.9s ease-out both;
}
@keyframes fly {
  0% { transform: translate(0, 0) scale(0.4); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(160deg); opacity: 0; }
}

/* Field Notes */
.notes { text-align: left; display: grid; gap: 0.45rem; }
.note { background: #fff; border-radius: 14px; padding: 0.55rem 0.75rem; border: 2px solid #e2d8bc; }
.note h3 { margin: 0 0 0.15rem; font-size: 1rem; }
.note p { margin: 0.15rem 0 0; font-size: 0.92rem; }
.note .deeper { color: #33584a; font-size: 0.88rem; }
.note.locked { color: #9a917b; border-style: dashed; background: transparent; }
.setting { display: flex; gap: 0.5rem; align-items: center; justify-content: center; font-weight: 700; margin: 0.6rem 0 0.2rem; font-size: 0.9rem; }
.setting input { width: 22px; height: 22px; }

/* Level map */
.map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem 0.5rem;
  margin: 0.4rem 0 0.6rem;
  padding: 0.6rem 0.2rem;
  border-radius: 14px;
  background:
    radial-gradient(circle at 20% 20%, rgba(143, 209, 138, 0.35), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(232, 168, 56, 0.25), transparent 45%),
    #fbf7ea;
}
.map-node {
  appearance: none;
  border: 3px solid #24512b;
  border-radius: 18px;
  background: var(--tile);
  padding: 0.45rem 0.2rem 0.35rem;
  min-height: 84px;
  font: inherit;
  cursor: pointer;
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  box-shadow: 0 3px 0 #24512b;
}
.map-node .num {
  font-family: var(--head); font-weight: 400; letter-spacing: 0.03em;
  font-size: 1.35rem;
  line-height: 1;
}
.map-node .nm { font-size: 0.7rem; font-weight: 800; line-height: 1.1; }
.map-node .st { font-size: 0.85rem; letter-spacing: 0.05em; }
.map-node.current { background: var(--gold); }
.map-node.done { background: #c6eabb; }
.map-node[disabled] { background: #ddd6c2; border-color: #b4ab92; box-shadow: 0 3px 0 #b4ab92; cursor: default; color: #8a8270; }

/* Cheer, as in Veggie Crush, with the kid character */
.cheer { display: flex; justify-content: center; margin-bottom: 0.3rem; position: relative; }
.cheer img { position: relative; z-index: 1; }
.cheer img.jumping { animation: none; transition: transform 0.13s ease-out; }
/* Level done: gold rays turning behind the kid */
.cheer.rays { margin-top: 1.1rem; }
.cheer.rays::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190px;
  height: 190px;
  margin: -95px 0 0 -95px;
  background: url("assets/fx/rays.png") center / contain no-repeat;
  animation: rays-in 0.5s ease-out both, spin 16s linear infinite;
  pointer-events: none;
}
@keyframes rays-in { from { opacity: 0; scale: 0.3; } }
.twinkle {
  position: absolute;
  width: 46px;
  margin: -23px 0 0 -23px;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  animation: twinkle 2.2s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.4) rotate(0); }
  50% { opacity: 1; transform: scale(1) rotate(45deg); }
}
.cheer img { height: 104px; animation: hop 0.7s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes hop {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  40% { transform: translateY(-10px) rotate(5deg); }
}

/* ---------- Wider screens ---------- */
@media (min-width: 900px) {
  .playfield {
    grid-template-columns: minmax(0, 620px) minmax(240px, 300px);
    justify-content: center;
    align-items: start;
    padding: 1rem 1.25rem 1.5rem;
  }
  .stage-col, .side-panel { width: 100%; margin: 0; }
  .side-panel { position: sticky; top: 0.75rem; }
  .panel-inner {
    min-height: 320px;
    padding: 1.4rem 1.5rem 1.5rem;
    background-image:
      linear-gradient(180deg, rgba(255,255,255,0.18), transparent 35%),
      url("assets/ui/green_long_vertical.png");
    background-size: 100% 100%;
  }
  .stage-wrap { aspect-ratio: 4 / 3; max-height: 62dvh; }
}

@media (max-width: 420px) {
  .hud { padding: 0.45rem 0.6rem; gap: 0.4rem 0.6rem; }
  .stats { gap: 0.3rem; }
  .stats div { min-width: 2.9rem; max-width: 4.2rem; padding: 0.15rem 0.35rem; display: flex; flex-direction: column; justify-content: space-between; }
  .stats dt { font-size: 0.6rem; letter-spacing: 0.02em; line-height: 1.15; }
  .goal { font-size: 0.8rem; padding: 0.4rem 0.6rem; }
  .brand h1 { font-size: 1.1rem; }
  .hud-actions { width: 100%; }
  .hud-actions .btn { flex: 1; padding: 0.35rem 0.4rem; font-size: 0.82rem; }
  .readouts { grid-template-columns: auto 1fr auto; gap: 0.45rem; padding: 0.45rem 0.5rem; }
  .gauge, .gauge svg { width: 88px; }
  .gauge svg { height: 88px; }
  .btn-pull { min-width: 70px; min-height: 88px; padding: 0.4rem; font-size: 1rem; display: grid; place-items: center; }
  .rm-strands { font-size: 0.76rem; }
  .stage-wrap { max-height: 46dvh; }
  .tile { width: 76px; min-height: 84px; }
}

/* ---------- Extras ---------- */
.side-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.side-actions:empty { display: none; }
.side-actions .btn { font-size: 0.88rem; padding: 0.4rem 0.75rem; min-height: 40px; }
#app.expert .rm-need { display: none; }

.hub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; margin-bottom: 0.4rem; }
.hub-tile {
  appearance: none;
  border: 2px solid #24512b;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.45), transparent 50%), var(--mint);
  box-shadow: 0 3px 0 #24512b;
  padding: 0.6rem 0.5rem 0.65rem;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.2rem;
  text-align: center;
}
.hub-tile:active { transform: translateY(2px); box-shadow: 0 1px 0 #24512b; }
.hub-tile img { width: 46px; height: 46px; object-fit: contain; }
.hub-name { font-family: var(--head); font-weight: 400; letter-spacing: 0.04em; font-size: 1.4rem; }
.hub-sub { font-size: 0.78rem; font-weight: 700; line-height: 1.25; color: #3e5a3a; }

.designer > p:first-child { margin-bottom: 0.4rem; }
.designer-preview { position: relative; display: flex; justify-content: center; margin: 0.2rem 0 0.5rem; }
.designer-preview img { height: 64px; max-width: 110px; object-fit: contain; }
.designer-load {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--cream);
  border: 2px solid #3b2a1a;
  border-radius: 8px;
  padding: 0 0.35rem;
  font-family: var(--head); font-weight: 400; letter-spacing: 0.03em;
}
.designer-rows { display: grid; gap: 0.4rem; text-align: left; }
.d-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.d-row[hidden] { display: none; }
.d-label { font-weight: 800; font-size: 0.92rem; }
.d-stepper { display: flex; align-items: center; gap: 0.3rem; }
.d-step {
  appearance: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #24512b;
  background: var(--gold);
  box-shadow: 0 2px 0 var(--gold-dark);
  font: inherit;
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.d-step:active { transform: translateY(1px); box-shadow: none; }
.d-value { min-width: 2.4rem; text-align: center; font-family: var(--head); font-weight: 400; letter-spacing: 0.03em; font-size: 1.45rem; }
.d-stepper.wide .d-value { min-width: 7.5rem; font-size: 1.35rem; }
.d-stepper.wide .d-step { font-size: 1.6rem; padding-bottom: 0.15rem; }
.d-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: flex-end; }
.d-chips .chip { min-height: 36px; padding: 0.25rem 0.6rem; }
.d-check { margin: 0.7rem 0 0.2rem; font-weight: 800; color: var(--leaf-dark); }
.d-check.bad { color: var(--warn); }
.d-check.shake { animation: pin-shake 0.12s linear 3; }

.share-code {
  font-family: var(--head); font-weight: 400; letter-spacing: 0.03em;
  font-size: 2rem;
  letter-spacing: 0.1em;
  background: #fff;
  border: 2px dashed var(--gold-dark);
  border-radius: 12px;
  padding: 0.4rem 0.5rem;
  word-break: break-all;
}
.share-link, .code-input {
  width: 100%;
  font: inherit;
  font-weight: 700;
  padding: 0.55rem 0.7rem;
  border: 2px solid #24512b;
  border-radius: 12px;
  background: #fff;
}
.code-input { font-family: var(--head); font-weight: 400; font-size: 1.6rem; letter-spacing: 0.1em; text-align: center; text-transform: uppercase; }
.code-label { display: block; font-weight: 800; margin-bottom: 0.4rem; }
.share-note { min-height: 1.2em; margin: 0.4rem 0 0; font-weight: 800; color: var(--leaf-dark); }

.jobs { display: grid; gap: 0.45rem; }
.job {
  appearance: none;
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 0.6rem;
  text-align: left;
  border: 2px solid #e2d8bc;
  border-radius: 14px;
  background: #fff;
  padding: 0.45rem 0.7rem;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.job img { width: 54px; height: 44px; object-fit: contain; }
.job.done { background: #eef7e8; border-color: #b9dcae; }
.job-mark { font-weight: 800; color: var(--leaf); font-size: 1.2rem; }
.job-art { display: flex; justify-content: center; margin-bottom: 0.4rem; }
.job-art img { height: 76px; max-width: 140px; object-fit: contain; }
.speech {
  background: #fff;
  border: 2px solid #e2d8bc;
  border-radius: 14px;
  padding: 0.55rem 0.75rem;
  font-style: italic;
  text-align: left;
}
.streak { font-family: var(--head); font-weight: 400; letter-spacing: 0.04em; font-size: 1.5rem; }
.gold-medal { font-size: 2.6rem; line-height: 1; margin-bottom: 0.3rem; animation: star-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both; }

@media (max-width: 420px) {
  .hub { grid-template-columns: 1fr 1fr; gap: 0.4rem; }
  .hub-sub { font-size: 0.72rem; }
  .d-stepper.wide .d-value { min-width: 6.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .title-wheel, .cheer img, .gauge.over svg, .cheer.rays::before, .big-stars .star-on { animation: none; }
  .big-stars .star-on::before, .twinkle, .pop-fx .fly { display: none; }
  .gold-medal, .d-check.shake { animation: none; }
}

/* ---------- Paper skin ----------
   Every card, panel and button is a piece of old paper, drawn with
   border-image so the torn edges and curled corners keep their size while the
   middle stretches. Shadows follow the paper's shape (drop-shadow). */
html { background: #3e2b19; }
body {
  background: radial-gradient(ellipse at 50% 0%, #6b4d2e, #3e2b19 70%) fixed, #3e2b19;
  /* Patrick Hand runs small: match the x-height of an ordinary font */
  font-size-adjust: ex-height 0.53;
}
h1, h2, h3 { font-family: var(--head); letter-spacing: 0.01em; color: var(--ink); }
/* Rye is already big for its size: only the handwriting gets the x-height match */
h1, h2, h3, .btn:not(.btn-ghost), .title-word { font-size-adjust: none; }
.brand h1 { white-space: nowrap; }
.title-word { font-size: clamp(2.2rem, 10vw, 3rem); white-space: nowrap; }

.paper-sheet, .overlay-card, .sq-howto-card, .panel-inner,
.readouts, .bin, .goal, .btn, .chip, .tile, .stats div, .map-node, .hub-tile,
.choice, .note, .layer, .job, .speech, .math, .d-step, .hud, .share-code {
  background: none;
  border-style: solid;
  border-width: 0;
  border-radius: 0;
  box-shadow: none;
}
.overlay-card, .sq-howto-card, .panel-inner {
  border-image: url("assets/ui/paper_sheet.png") 46 fill / 30px stretch;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
}
.overlay-card { padding: 1.6rem 1.6rem 1.5rem; }
.sq-howto-card { padding: 1.35rem 1.4rem 1.3rem; }
.panel-inner, .panel-inner h2, .meta, .hint { color: var(--ink); }
.hud {
  border-image: url("assets/ui/paper_scroll.png") 34 48 36 40 fill / 16px 26px 18px 20px stretch;
  padding: 0.7rem 1.6rem 0.75rem 1.3rem;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
}
.readouts {
  border-image: url("assets/ui/paper_soft.png") 32 fill / 20px stretch;
  padding: 0.75rem 0.95rem;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3));
}
.bin {
  border-image: url("assets/ui/paper_burnt.png") 36 fill / 24px stretch;
  padding: 1.1rem 1.15rem 1.2rem;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
}
.bin-head h2, .tie, .bin-empty { color: var(--ink); }
.goal {
  border-image: url("assets/ui/paper_card.png") 30 fill / 18px stretch;
  padding: 0.65rem 0.95rem;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}
.stage-wrap { border-color: #5a3f22; border-radius: 8px; }

/* Buttons: cream note card, or burnt brown paper for the main action */
.btn {
  border-image: url("assets/ui/paper_burnt.png") 36 fill / 14px stretch;
  color: var(--ink);
  font-family: var(--head);
  font-weight: 400;
  letter-spacing: 0.02em;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.35));
}
.btn-ghost {
  border-image: url("assets/ui/paper_card.png") 30 fill / 12px stretch;
  font-family: var(--hand);
  font-size: 1.05rem;
}
.btn:active, .btn-pull.holding { transform: translateY(2px); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); }
.btn:not(.btn-ghost) { font-size: 1.25rem; }
.btn-pull { font-size: 1.3rem; }
.chip {
  border-image: url("assets/ui/paper_card.png") 30 fill / 10px stretch;
  font-family: var(--hand);
  font-size: 1.05rem;
}
.chip[aria-pressed="true"] { border-image-source: url("assets/ui/paper_burnt.png"); border-image-slice: 36 fill; }

/* Sticky notes: part tiles, the numbers in the top bar, the level map */
.tile, .stats div, .map-node, .hub-tile, .d-step {
  border-image: url("assets/ui/paper_note.png") 22 fill / 12px stretch;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.3));
  color: var(--ink);
}
.tile { font-family: var(--hand); font-size: 0.92rem; }
.tile.on, .map-node.current { border-image-source: url("assets/ui/paper_burnt.png"); border-image-slice: 36 fill; outline: none; }
.map-node.done { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.3)) sepia(0.15) saturate(1.3); }
.map-node[disabled] { opacity: 0.55; color: var(--ink); }
.map { background: none; }
.stats dd { font-family: var(--hand); font-size: 1.2rem; }
.stats dt { opacity: 0.8; }
.tile .count { background: rgba(255, 250, 235, 0.9); border-radius: 6px; }

/* Paper inside the cards */
.choice, .job {
  border-image: url("assets/ui/paper_card.png") 30 fill / 12px stretch;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
  font-family: var(--hand);
  font-size: 1.08rem;
}
.choice.right { border-image-source: url("assets/ui/paper_burnt.png"); border-image-slice: 36 fill; }
.choice.wrong { opacity: 0.6; text-decoration: line-through; }
.note, .layer, .speech {
  border-image: url("assets/ui/paper_torn.png") 32 fill / 14px stretch;
  padding: 0.8rem 0.95rem;
}
.layer.locked, .note.locked { border-image: none; border: 2px dashed #b9a57e; border-radius: 10px; }
.math {
  border-image: url("assets/ui/paper_scroll.png") 34 48 36 40 fill / 12px 20px 14px 16px stretch;
  padding: 0.55rem 1.4rem 0.6rem 1.1rem;
  font-family: var(--hand);
  font-size: 1.35rem;
  letter-spacing: 0.02em;
}

/* Numbers and short labels read better in the handwriting than in Rye */
.gauge figcaption b, .map-node .num, .hub-name, .d-value, .designer-load,
.share-code, .code-input, .streak { font-family: var(--hand); letter-spacing: 0.02em; }
.map-node .num { font-size: 1.5rem; }
.hub-name { font-size: 1.35rem; }
.title-word { font-family: var(--head); color: #f1d9a6; -webkit-text-stroke: 2px #3b2a1a; }
.tag-line { color: #7a4f1f; }
.layer h3, .note .deeper { color: #6b4a22; }
.sq-studio { background: rgba(0, 0, 0, 0.35); }
.toast { background: #3b2a1a; font-family: var(--hand); font-size: 1.05rem; }
.map-node.done, .map-node.current, .map-node[disabled], .tile.on, .chip[aria-pressed="true"], .choice.right, .choice.wrong { background: none; }
.hub-sub { color: #6b4a22; }
@media (max-width: 420px) {
  .brand { gap: 0.35rem; }
  .brand h1 { font-size: 0.98rem; }
  .logo { width: 26px; height: 26px; }
  .hud { padding: 0.6rem 1.3rem 0.65rem 1rem; }
  .stats div { padding: 0.4rem 0.35rem 0.25rem; }
}
.stats div { padding-top: 0.4rem; }
/* He only hops when he's happy: the stuck picture on a fail card stays still */
.cheer img[src$="stuck.png"], .cheer img[src$="grip.png"] { animation: none; }