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

:root {
  --font: 'Nunito', system-ui, sans-serif;
  --ink: #3a3350;
  --ink-soft: #6b6383;
  --cream: #fdf6ec;
  --panel: rgba(255, 252, 246, 0.94);
  --gold: #f0c040;
  --gold-dim: #d4a830;
  --green: #5da345;
  --green-soft: #e8f4e0;
  --coral: #e2695a;
  --coral-soft: #fdeae6;
  --lav: #b9a5d8;
  --shadow: 0 10px 30px rgba(58, 51, 80, 0.18);
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: var(--font);
  color: var(--ink);
  background: #efe3d5;
}

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

button { font-family: var(--font); cursor: pointer; }
button:focus-visible, [tabindex]:focus-visible {
  outline: 4px solid #4a90d9;
  outline-offset: 3px;
  border-radius: 12px;
}

/* ══ Top bar ══ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 16px;
  background: var(--panel);
  border-bottom: 2px solid rgba(58, 51, 80, 0.08);
  backdrop-filter: blur(6px);
}
.topbar-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar-shop { height: 44px; width: auto; flex-shrink: 0; filter: drop-shadow(0 2px 3px rgba(58, 51, 80, 0.25)); }
.topbar-title-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.topbar-title strong { font-size: 17px; font-weight: 900; white-space: nowrap; }
.topbar-title span { font-size: 12px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.topbar-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.tb-btn {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 46px; padding: 8px 14px;
  border: 2px solid rgba(58, 51, 80, 0.14);
  border-radius: 14px;
  background: #fff; color: var(--ink);
  font-size: 14px; font-weight: 800;
  transition: transform 0.12s, background 0.15s, border-color 0.15s;
}
.tb-btn:hover { transform: translateY(-1px); border-color: rgba(58, 51, 80, 0.3); }
.tb-btn svg { width: 20px; height: 20px; fill: var(--ink); stroke: var(--ink); flex-shrink: 0; }
.tb-btn.toggle[aria-pressed="false"] { opacity: 0.45; }
.tb-btn.toggle[aria-pressed="false"] span::after { content: " off"; font-weight: 700; }
.tb-btn.quick-exit {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
.tb-btn.quick-exit svg { fill: var(--gold); stroke: none; }
.tb-btn.quick-exit:hover { background: #2a2440; }

/* ══ Stage ══ */
.stage {
  /* Starts below the top bar so nothing of the room hides under it, and the
     room is anchored to the top so the arches and bookcases are never cropped
     on wide, short windows (the floor is what gets trimmed instead). */
  position: fixed; top: var(--topbar-h); left: 0; right: 0; bottom: 0;
  /* Image is set from config.background; this is the fallback tone. */
  background: #efe3d5 center top / cover no-repeat;
}

/* ══ Ambience: window light, mist, dust motes (decorative) ══ */
.ambience {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.light-beam {
  position: absolute;
  top: -20%; left: -6%;
  width: 24vw; height: 100vh;
  background: linear-gradient(to bottom,
    rgba(255, 243, 205, 0.75),
    rgba(255, 243, 205, 0.28) 55%,
    rgba(255, 243, 205, 0) 85%);
  border-radius: 0 0 50% 50%;
  transform: rotate(24deg);
  transform-origin: top left;
  filter: blur(16px);
  mix-blend-mode: screen;
  animation: beamBreathe 11s ease-in-out infinite;
}
.beam-2 {
  left: 5%; width: 11vw;
  opacity: 0.75;
  transform: rotate(29deg);
  animation-delay: -5s;
  animation-duration: 14s;
}
.window-glow {
  position: absolute;
  top: 8%; left: -6%;
  width: 34vw; height: 55vh;
  background: radial-gradient(ellipse at 30% 40%,
    rgba(255, 246, 208, 0.85), rgba(255, 246, 208, 0) 70%);
  filter: blur(10px);
  mix-blend-mode: screen;
  animation: beamBreathe 9s -3s ease-in-out infinite;
}
@keyframes beamBreathe {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
.mist {
  position: absolute;
  width: 70vw; height: 26vh;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(255, 250, 242, 0.16), rgba(255, 250, 242, 0) 70%);
  filter: blur(18px);
  mix-blend-mode: screen;
  will-change: transform;
}
.mist-1 {
  bottom: 6vh; left: -12vw;
  animation: mistDrift 46s ease-in-out infinite alternate;
}
.mist-2 {
  bottom: 20vh; right: -18vw;
  height: 20vh; opacity: 0.8;
  animation: mistDrift 62s ease-in-out infinite alternate-reverse;
}
@keyframes mistDrift {
  0% { transform: translateX(0); }
  100% { transform: translateX(16vw); }
}
.mote {
  position: absolute;
  left: var(--mx); top: var(--my);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 250, 225, 0.95), rgba(255, 250, 225, 0) 72%);
  animation: moteFloat var(--ms) var(--md) ease-in-out infinite;
  opacity: 0;
  will-change: transform, opacity;
}
@keyframes moteFloat {
  0%   { transform: translate(0, 0) scale(0.7); opacity: 0; }
  20%  { opacity: 0.85; }
  50%  { transform: translate(18px, -26px) scale(1); opacity: 0.55; }
  80%  { opacity: 0.75; }
  100% { transform: translate(-10px, -48px) scale(0.6); opacity: 0; }
}
.stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(30, 24, 48, 0.12) 0%, rgba(30, 24, 48, 0) 22%, rgba(30, 24, 48, 0) 55%, rgba(30, 24, 48, 0.30) 100%);
}

/* Privacy meter */
:root { --topbar-h: 68px; }
.meter {
  /* Above the bins/bookcases (11) so it is never hidden behind them on narrow windows */
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 14;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; border-radius: 18px;
  background: var(--panel); box-shadow: var(--shadow);
}
.meter-label { font-size: 14px; font-weight: 900; color: var(--ink-soft); }
.meter-locks { display: flex; gap: 8px; }
.meter-lock { width: 30px; height: 30px; position: relative; }
.meter-lock svg { width: 100%; height: 100%; }
.meter-lock .lock-body { fill: #ded5ea; }
.meter-lock .lock-shackle { fill: none; stroke: #ded5ea; stroke-width: 2.6; }
.meter-lock.locked .lock-body { fill: var(--gold); }
.meter-lock.locked .lock-shackle { stroke: var(--gold-dim); }
.meter-lock.locked { animation: lockPop 0.5s ease; }
@keyframes lockPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.45) rotate(-6deg); }
  100% { transform: scale(1); }
}

/* Progress dots */
.progress {
  position: absolute; top: 72px; left: 50%; transform: translateX(-50%); z-index: 14;
  display: flex; gap: 7px;
}
.progress i {
  width: 11px; height: 11px; border-radius: 50%;
  background: rgba(255, 252, 246, 0.75);
  border: 2px solid rgba(58, 51, 80, 0.25);
}
.progress i.done { background: var(--green); border-color: var(--green); }
.progress i.now { background: var(--gold); border-color: var(--gold-dim); transform: scale(1.25); }
.progress i.skipped { background: var(--lav); border-color: var(--lav); }

/* ══ Card ══ */
.card-zone {
  position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  z-index: 12;
}
.game-card {
  position: relative;
  width: 228px;
  background: #fff;
  border-radius: 26px;
  border: 3px solid rgba(58, 51, 80, 0.1);
  box-shadow: var(--shadow);
  padding: 16px 16px 18px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  animation: cardFloat 3.2s ease-in-out infinite;
  transition: box-shadow 0.2s;
  will-change: transform;
}
.game-card:active { cursor: grabbing; }
.game-card.dragging {
  animation: none;
  transition: none;
  box-shadow: 0 24px 48px rgba(58, 51, 80, 0.3);
  z-index: 30;
}
.game-card.entering { animation: cardEnter 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), cardFloat 3.2s 0.55s ease-in-out infinite; pointer-events: none; }
.game-card.flying { animation: none; transition: transform 0.55s cubic-bezier(0.5, 0, 0.75, 0.6), opacity 0.55s ease; pointer-events: none; }
.game-card.returning { animation: none; transition: transform 0.5s cubic-bezier(0.34, 1.3, 0.64, 1); }
/* Float via transform (GPU-composited); margin/top would jitter. */
@keyframes cardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@keyframes cardEnter {
  0% { transform: scale(0.3) translateY(-120px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.card-art {
  width: 100%; aspect-ratio: 1;
  border-radius: 18px; overflow: hidden;
  background: var(--cream);
}
.card-art img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.card-label {
  margin-top: 12px;
  font-size: 21px; font-weight: 900; line-height: 1.2;
  text-align: center;
  min-height: 50px;
  display: flex; align-items: center; justify-content: center;
}
.card-speak {
  position: absolute; top: -14px; right: -14px;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--gold); border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(58, 51, 80, 0.25);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s;
}
.card-speak:hover { transform: scale(1.12); }
.card-speak svg { width: 22px; height: 22px; fill: var(--ink); stroke: var(--ink); }
.card-hint {
  font-size: 14px; font-weight: 800; color: #fff;
  background: rgba(58, 51, 80, 0.55);
  padding: 6px 16px; border-radius: 999px;
  pointer-events: none;
}
/* Skip appears only on cards the config marks as sensitive */
.card-skip { background: var(--panel); border-color: var(--lav); color: var(--ink); }
.card-skip[hidden] { display: none; }

/* ══ Baskets ══ */
.basket {
  position: absolute; bottom: 3.5vh; z-index: 11;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: none;
  padding: 14px;
  border-radius: 30px;
  transition: transform 0.18s ease, background 0.18s ease;
}
#basketLeft { left: 5vw; }
#basketRight { right: 5vw; }
.basket img {
  width: clamp(130px, 17vw, 200px);
  filter: drop-shadow(0 12px 14px rgba(58, 51, 80, 0.4));
  pointer-events: none;
  /* Only transform is transitioned; animating filter causes jittery repaints. */
  transition: transform 0.18s ease;
}
.basket:hover img, .basket:focus-visible img, .basket.armed img {
  filter: drop-shadow(0 12px 14px rgba(58, 51, 80, 0.4))
          drop-shadow(0 0 18px rgba(255, 232, 150, 0.95));
}
.basket-label {
  font-size: clamp(15px, 1.6vw, 19px); font-weight: 900; color: #fff;
  padding: 8px 20px; border-radius: 999px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
  margin-top: -8px;
  background: var(--ink); /* real colour is set from config.bins[].color */
}
.basket:hover img, .basket.armed img { transform: translateY(-6px) scale(1.06); }
.basket.armed { background: rgba(255, 252, 246, 0.35); }
.basket.armed::after {
  content: ""; position: absolute; inset: 0;
  border: 4px dashed rgba(255, 252, 246, 0.95);
  border-radius: 30px; pointer-events: none;
  animation: armedPulse 1s ease-in-out infinite;
}
@keyframes armedPulse {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}
.basket.received img { animation: basketBounce 0.5s ease; }
.basket-body { position: relative; display: block; line-height: 0; }

/* ══ Shelving mode: bookcases stand in the alcoves, signs baked into the art ══ */
/* Position and size are set per-alcove by layoutShelves() in game.js. */
.stage.shelving .basket img { height: var(--shelf-h, clamp(240px, 40vh, 420px)); width: auto; }
/* With bookcases up in the alcoves the meter moves out of their way, to the
   bottom-left above the sideboard; the progress dots stay top-centre. */
.stage.shelving .meter {
  top: auto; bottom: 16px; left: 16px; transform: none;
  flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 10px 14px 12px;
}
.stage.shelving .meter-locks { display: grid; grid-template-columns: repeat(5, 32px); gap: 6px; }
.stage.shelving .meter-lock { width: 32px; height: 32px; }
.stage.shelving .progress { top: 14px; }
@media (max-width: 800px) {
  /* Narrow: keep clear of the helper's speech bubble */
  .stage.shelving .meter { bottom: auto; top: 12px; left: 12px; }
}
/* The sign is baked into the bookcase artwork (make-cabinet-signs.ps1), so the
   text label is kept for assistive tech only. */
.stage.shelving .basket-label {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  background: none !important; box-shadow: none;
}
/* Hover/bounce move the whole body so the spines travel with the bookcase */
.stage.shelving .basket-body { transition: transform 0.18s ease; transform-origin: bottom center; }
.stage.shelving .basket:hover img, .stage.shelving .basket.armed img,
.stage.shelving .basket:focus-visible img, .stage.shelving .basket.received img { transform: none; animation: none; }
.stage.shelving .basket:hover .basket-body, .stage.shelving .basket.armed .basket-body { transform: translateY(-6px) scale(1.03); }
.stage.shelving .basket.received .basket-body { animation: basketBounce 0.5s ease; }
/* A copy of the room clipped to whatever stands in front of the bookcases
   (e.g. the armchair), so the shelves sit behind it. Clip set by layoutShelves(). */
.foreground {
  position: absolute; inset: 0; z-index: 11;
  background: inherit; pointer-events: none;
}
/* Cameo: a character peeks in from the right edge (config.cameo) */
.cameo {
  /* A full figure leaning in from the edge, tipped over so his upper body
     angles down into the room and his hips sit on the screen edge - legs stay
     off-stage. He slides in along his own body line. --cameo-hip is how far
     down the sprite his hips are (pivot); config.cameo.side = "left" flips him. */
  --cameo-h: clamp(360px, 92vh, 900px);
  --cameo-hip: 0.40;   /* belt line, fraction of sprite height (all poses share one crop) */
  --cameo-hipx: 0.62;  /* belt buckle, fraction of sprite width */
  --cameo-tilt: -30deg;
  position: absolute; right: 0; top: calc(72% - var(--cameo-h) * var(--cameo-hip));
  z-index: 12; pointer-events: none;
  height: var(--cameo-h);
  transform-origin: calc(var(--cameo-hipx) * 100%) calc(var(--cameo-hip) * 100%);
  /* out: hips on the edge, tipped over, pushed off-stage along his body */
  transform: translateX(calc((1 - var(--cameo-hipx)) * 100%)) rotate(var(--cameo-tilt)) translateY(80%);
  opacity: 0;
  /* An unhurried lean in and back out */
  transition: transform 1.3s cubic-bezier(0.25, 0.8, 0.3, 1), opacity 0.5s ease;
}
.cameo.in { transform: translateX(calc((1 - var(--cameo-hipx)) * 100%)) rotate(var(--cameo-tilt)); opacity: 1; }
/* Left edge: the sprite is mirrored, so the hips sit at (1 - hipx) across */
.cameo.left {
  right: auto; left: 0;
  transform-origin: calc((1 - var(--cameo-hipx)) * 100%) calc(var(--cameo-hip) * 100%);
  transform: translateX(calc((var(--cameo-hipx) - 1) * 100%)) rotate(calc(-1 * var(--cameo-tilt))) translateY(80%);
}
.cameo.left.in { transform: translateX(calc((var(--cameo-hipx) - 1) * 100%)) rotate(calc(-1 * var(--cameo-tilt))); }
.cameo.left img { transform: scaleX(-1); }
.cameo img {
  display: block; height: 100%; width: auto;
  filter: drop-shadow(-6px 10px 12px rgba(40, 30, 20, 0.3));
}
@media (max-width: 800px) { .cameo { --cameo-h: clamp(260px, 70vh, 520px); } }
/* Filed books: one spine per book, in rows over the shelf compartments */
.spines { position: absolute; inset: 0; pointer-events: none; }
.shelf-row {
  position: absolute; display: flex; align-items: flex-end; gap: 2%;
}
.spine {
  position: relative;
  flex: 0 1 14%; height: var(--h, 90%);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0) 30%, rgba(255, 255, 255, 0.14) 55%, rgba(0, 0, 0, 0.22)),
    var(--spine);
  border-radius: 2px 2px 1px 1px;
  /* side shading plus a shadow cast onto the shelf board it stands on */
  box-shadow: 1px 0 2px rgba(0, 0, 0, 0.35), 0 3px 4px rgba(0, 0, 0, 0.35);
  transform-origin: bottom;
  animation: spineIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.spine::before, .spine::after {
  content: ""; position: absolute; left: 18%; right: 18%; height: 2px;
  background: rgba(240, 192, 64, 0.85);
}
.spine::before { top: 14%; }
.spine::after { bottom: 14%; }
@keyframes spineIn {
  0% { transform: scaleY(0.1); opacity: 0; }
  100% { transform: scaleY(1); opacity: 1; }
}
@keyframes basketBounce {
  0% { transform: scale(1); }
  35% { transform: scale(1.14) translateY(-8px); }
  70% { transform: scale(0.97); }
  100% { transform: scale(1); }
}

/* ══ Sage ══ */
.sage {
  position: absolute; bottom: 3.5vh; left: 50%; transform: translateX(-50%);
  z-index: 13;
  display: flex; align-items: flex-end; gap: 12px;
  max-width: min(520px, 44vw);
}
.sage-face {
  width: 92px; height: 92px; border-radius: 50%;
  border: 4px solid #fff; object-fit: cover;
  box-shadow: var(--shadow);
  flex-shrink: 0;
}
.sage-bubble {
  position: relative;
  background: var(--panel);
  border-radius: 20px 20px 20px 6px;
  padding: 14px 18px;
  box-shadow: var(--shadow);
  min-width: 220px;
}
.sage-bubble p { font-size: 16px; font-weight: 800; line-height: 1.45; }
.sage-bubble.tip-good { border: 3px solid var(--green); }
.sage-bubble.tip-gentle { border: 3px solid var(--gold); }
.sage-bubble.tip-note { border: 3px solid var(--lav); }
.sage-bubble .btn { margin-top: 10px; }
.sage-bubble.pop { animation: bubblePop 0.35s ease; }
@keyframes bubblePop {
  0% { transform: scale(0.85); opacity: 0.4; }
  100% { transform: scale(1); opacity: 1; }
}

/* ══ Demo hand ══ */
.demo-hand {
  position: fixed; z-index: 60; width: 64px; height: 64px;
  pointer-events: none;
  /* Moved with transform (GPU-composited), never top/left, to stay smooth. */
  will-change: transform;
  filter: drop-shadow(0 6px 10px rgba(58, 51, 80, 0.35));
}

/* ══ Overlays & panels ══ */
.overlay[hidden] { display: none; }
.overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 84px 16px 24px;
  background: rgba(42, 34, 64, 0.45);
  backdrop-filter: blur(5px);
  overflow-y: auto;
}
.panel {
  background: var(--panel);
  border-radius: 28px;
  box-shadow: 0 24px 64px rgba(30, 24, 48, 0.4);
  padding: 34px 38px;
  width: min(560px, 94vw);
  text-align: center;
  margin: auto;
}
.panel h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 900; line-height: 1.1; margin-bottom: 4px; }
.panel h2 { font-size: 30px; font-weight: 900; margin-bottom: 8px; }
.panel-shop {
  font-size: 13px; font-weight: 900; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--lav); margin-bottom: 6px;
}
.entry-sage {
  width: 130px; height: 130px; border-radius: 50%;
  border: 5px solid var(--gold); object-fit: cover;
  margin: 18px auto 14px; display: block;
  box-shadow: var(--shadow);
}
.entry-welcome { font-size: 18px; font-weight: 700; line-height: 1.55; margin-bottom: 12px; }
.entry-note {
  font-size: 15px; font-weight: 800; color: var(--ink-soft);
  background: var(--green-soft); border-radius: 12px;
  padding: 10px 14px; margin-bottom: 22px;
}
.entry-quick-note { margin-top: 18px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.pause-text { font-size: 17px; font-weight: 700; color: var(--ink-soft); margin-bottom: 22px; }

.panel-buttons { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }

.btn {
  border: none; border-radius: 16px;
  background: #fff; color: var(--ink);
  border: 2px solid rgba(58, 51, 80, 0.16);
  font-weight: 900;
  transition: transform 0.12s, box-shadow 0.12s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn-big { font-size: 19px; padding: 15px 26px; min-height: 58px; }
.btn-small { font-size: 15px; padding: 8px 18px; min-height: 42px; }
.btn-primary {
  background: var(--gold); border-color: var(--gold);
  box-shadow: 0 5px 0 var(--gold-dim);
}
.btn-primary:hover { box-shadow: 0 7px 0 var(--gold-dim), 0 8px 18px rgba(58, 51, 80, 0.2); }
.btn-primary:active { box-shadow: 0 2px 0 var(--gold-dim); }

/* ══ Completion ══ */
.done-panel h2 { margin-top: 14px; }
.badge {
  width: 148px; height: 148px; margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #fff8e2, #ffe9a8);
  border: 6px solid var(--gold);
  box-shadow: 0 0 0 6px rgba(240, 192, 64, 0.3), var(--shadow);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 16px; overflow: hidden;
  animation: badgeSpin 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes badgeSpin {
  0% { transform: scale(0.2) rotate(-180deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.badge img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; }
.badge span {
  font-size: 12px; font-weight: 900; color: var(--gold-dim);
  text-transform: uppercase; letter-spacing: 0.5px;
  text-align: center; line-height: 1.15; max-width: 104px;
}
.done-text { font-size: 18px; font-weight: 700; line-height: 1.5; margin: 10px 0 22px; }

.help-box {
  margin-top: 24px; text-align: left;
  background: var(--cream); border-radius: 16px; padding: 16px 20px;
}
.help-title { font-size: 14px; font-weight: 900; margin-bottom: 10px; }
.help-box ul { list-style: none; }
.help-box li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; font-size: 15px; font-weight: 700;
  border-bottom: 1px solid rgba(58, 51, 80, 0.08);
}
.help-box li:last-child { border-bottom: none; }
.help-box li span:last-child { color: var(--ink-soft); text-align: right; }

/* ══ Sparkles ══ */
.spark {
  position: fixed; z-index: 90; pointer-events: none;
  width: 12px; height: 12px;
  clip-path: polygon(50% 0%, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0% 50%, 37% 37%);
  animation: sparkFly 0.9s ease-out forwards;
}
@keyframes sparkFly {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.1) rotate(180deg); opacity: 0; }
}

/* ══ Responsive ══ */
@media (max-width: 900px) {
  .tb-btn span { display: none; }
  .tb-btn.quick-exit span { display: inline; }
  .game-card { width: 190px; }
  .card-label { font-size: 18px; min-height: 44px; }
  .sage { max-width: 60vw; }
  .sage-face { width: 70px; height: 70px; }
  .sage-bubble p { font-size: 14px; }
}
@media (max-width: 640px) {
  .meter { padding: 8px 12px; }
  .meter-lock { width: 24px; height: 24px; }
  .progress { top: 62px; }
  .card-zone { top: 42%; }
  .basket { bottom: 2vh; padding: 8px; }
  #basketLeft { left: 1vw; }
  #basketRight { right: 1vw; }
  .sage { position: absolute; bottom: 2vh; max-width: 46vw; }
  .sage-face { display: none; }
}

/* ══ Reduced motion ══ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}