:root {
  --font: "Baloo 2", "Nunito", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --ink: #fff4d6;
  --ink-soft: #cfe0f0;
  --panel: rgba(12, 18, 42, 0.84);
  --panel-edge: rgba(255, 226, 160, 0.38);
  --gold: #ffd36b;
  --gold-deep: #e89b3c;
  --teal: #5fd3b8;
  --u: 1; /* UI scale for the screen size, set from JS */
  /* Safe areas (notches, camera cut-outs, rounded corners). In the Android app the Capacitor
     bridge supplies --safe-area-inset-*; browsers supply env(). */
  --sat: max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px));
  --sar: max(env(safe-area-inset-right, 0px), var(--safe-area-inset-right, 0px));
  --sab: max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px));
  --sal: max(env(safe-area-inset-left, 0px), var(--safe-area-inset-left, 0px));
  --room-w: calc(100vw - var(--sal) - var(--sar) - 24px);
  --room-h: calc(100vh - var(--sat) - var(--sab) - 20px);
}
@supports (height: 100dvh) {
  :root { --room-h: calc(100dvh - var(--sat) - var(--sab) - 20px); }
}
#safe-probe { position: fixed; left: 0; top: 0; width: 0; height: 0; visibility: hidden; pointer-events: none; padding: var(--sat) var(--sar) var(--sab) var(--sal); }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #060b18;
  color: var(--ink);
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
}

#stage {
  position: absolute;
  display: block;
  touch-action: none;
  cursor: crosshair;
}

body.menu #stage { cursor: default; }
/* The mouse pointer would show exactly where a throw lands, so it is hidden while playing.
   Settings > "Show mouse pointer" brings it back for anyone who needs it. */
body.in-game:not(.show-cursor) #stage { cursor: none; }

/* ---------- HUD ---------- */
#hud {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  pointer-events: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "left center right";
  align-items: start;
  column-gap: calc(12px * var(--u));
  padding: calc(var(--sat) + 8px * var(--u)) calc(var(--sar) + 14px * var(--u)) calc(14px * var(--u)) calc(var(--sal) + 14px * var(--u));
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  /* a soft dusk wash so the HUD reads over any scenery */
  background: linear-gradient(to bottom, rgba(5, 9, 24, 0.5), rgba(5, 9, 24, 0.22) 65%, rgba(5, 9, 24, 0));
}
#hud[hidden] { display: none; }
.hud-left { grid-area: left; justify-self: start; line-height: 1.1; min-width: 0; max-width: 100%; }
/* The stage name and the score sit on small frosted plates, so they read over any scenery
   (dark burrows, bright lily pads) and in the far corners of big, square screens. */
@media (pointer: coarse) {
  *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .hud-left, .hud-scorebox { background: linear-gradient(180deg, rgba(14, 26, 58, 0.84), rgba(8, 14, 34, 0.78)) !important; }
}
.hud-left, .hud-scorebox {
  padding: calc(5px * var(--u) + 2px) calc(10px * var(--u) + 6px) calc(6px * var(--u) + 2px);
  border-radius: calc(14px * var(--u) + 4px);
  background: linear-gradient(180deg, rgba(14, 26, 58, 0.72), rgba(8, 14, 34, 0.62));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255, 226, 160, 0.26);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.hud-left > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-center { grid-area: center; justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: calc(10px * var(--u)); }
.hud-right { grid-area: right; justify-self: end; display: flex; align-items: center; gap: calc(12px * var(--u)); }
/* Narrow screens (phones upright, a Fold's cover screen): name and score on top, the
   progress bar across the full width underneath. */
body.narrow #hud { grid-template-columns: 1fr auto; grid-template-areas: "left right" "center center"; row-gap: 6px; padding-bottom: 12px; }
body.narrow .hud-center { padding-top: 0; justify-self: stretch; }
body.narrow .progress { width: 100%; min-width: 0; }
body.narrow .goal-track { width: max(96px, calc(150px * var(--u))); }
.hud-small { font-size: max(12.5px, calc(15px * var(--u))); color: var(--ink-soft); opacity: 0.95; }
.hud-title { font-size: max(17px, calc(24px * var(--u))); font-weight: 800; }
.hud-score { font-size: max(18px, calc(26px * var(--u))); font-weight: 800; line-height: 1.1; }
.hud-score b { color: var(--gold); font-variant-numeric: tabular-nums; }
.hud-timer { font-size: max(18px, calc(30px * var(--u))); font-weight: 800; font-variant-numeric: tabular-nums; }
.hud-timer.low { color: #ff9a9a; }

/* Star goal meter under the score */
.hud-scorebox { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.goal-meter { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.goal-track {
  position: relative; width: max(110px, calc(190px * var(--u))); height: max(8px, calc(11px * var(--u)));
  border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1.5px solid rgba(255, 230, 170, 0.55);
}
.goal-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #f6c35b, #ffe9a8); transition: width 0.2s;
}
.goal-track .notch { position: absolute; top: -3px; bottom: -3px; width: 2px; background: rgba(255, 244, 214, 0.85); border-radius: 2px; }
.goal-track .n3 { right: -1px; }
.goal-text { font-size: max(12.5px, calc(14px * var(--u))); color: var(--ink-soft); font-weight: 700; white-space: nowrap; }
.goal-meter.done .goal-fill { background: linear-gradient(90deg, #ffd36b, #fff6cf); box-shadow: 0 0 10px rgba(255, 211, 107, 0.8); }
.goal-meter.done .goal-text { color: var(--gold); }
.goal-meter.pop .goal-track { animation: goalpop 0.6s ease-out; }
@keyframes goalpop { 0% { transform: scale(1); } 30% { transform: scale(1.12); box-shadow: 0 0 16px rgba(255, 211, 107, 0.9); } 100% { transform: scale(1); } }
body.reduce-motion .goal-meter.pop .goal-track { animation: none; }
.goal-meter.modes .goal-track { display: none; }

.progress {
  width: calc(300px * var(--u));
  min-width: 120px;
  height: max(10px, calc(16px * var(--u)));
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid rgba(255, 230, 170, 0.45);
  overflow: hidden;
}
.progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #7ee0c3, #ffe08a);
  border-radius: 999px;
  transition: width 0.25s ease-out;
}

.icon-btn, .swap-btn {
  pointer-events: auto;
  display: grid;
  place-items: center;
  width: max(46px, calc(54px * var(--u)));
  height: max(46px, calc(54px * var(--u)));
  border-radius: 50%;
  border: 2px solid var(--panel-edge);
  background: radial-gradient(circle at 35% 28%, rgba(70, 92, 150, 0.75), rgba(12, 18, 42, 0.78) 70%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
}
.icon-btn:hover, .swap-btn:hover { background: rgba(40, 52, 96, 0.85); }
.swap-btn {
  position: fixed;
  right: calc(var(--sar) + 18px * var(--u));
  bottom: calc(var(--sab) + 18px * var(--u));
  width: max(64px, calc(84px * var(--u)));
  height: max(64px, calc(84px * var(--u)));
}
.swap-btn[hidden] { display: none; }

/* ---------- overlay screens ---------- */
#ui {
  position: fixed;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(10px, var(--sat)) max(12px, var(--sar)) max(10px, var(--sab)) max(12px, var(--sal));
}
#ui { z-index: 2; } /* above the touch pad */
#ui.dim { background: rgba(4, 6, 18, 0.45); pointer-events: auto; }

.screen {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-height: 100%;
  max-width: 100%;
  animation: rise 0.28s ease-out;
}
body.reduce-motion .screen, .screen.still { animation: none; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.panel {
  position: relative;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 214, 140, 0.10), rgba(255, 214, 140, 0) 60%),
    linear-gradient(180deg, rgba(24, 34, 72, 0.92), rgba(10, 15, 36, 0.92));
  border: 2px solid var(--panel-edge);
  border-radius: 26px;
  padding: 18px 26px 22px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 0 30px rgba(120, 160, 255, 0.06);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 226, 160, 0.4) transparent;
  max-height: var(--room-h);
  max-width: min(760px, var(--room-w));
}
.panel > h2:first-child::after {
  content: ""; display: block; width: 72px; height: 3px; margin: 8px auto 2px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 211, 107, 0), var(--gold), rgba(255, 211, 107, 0));
}

h1, h2, h3 { margin: 0; line-height: 1.1; }
h2 { font-size: clamp(24px, 4.2vh, 36px); text-align: center; color: var(--gold); }
h3 { font-size: 20px; color: var(--gold); margin-top: 10px; }
p { margin: 6px 0; line-height: 1.35; color: var(--ink-soft); }

.logo {
  font-size: clamp(52px, min(15vh, 23vw), 128px);
  font-weight: 800;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #fff6d6 10%, #ffd36b 55%, #f0a04b 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 0 #5a3010) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.5));
  line-height: 0.95;
}
.subtitle { font-size: clamp(16px, 3vh, 24px); color: #bfeee0; margin-top: -2px; text-shadow: 0 2px 4px rgba(0,0,0,0.6); }

.title-screen { align-self: center; margin-right: var(--pip-side, 34vw); }
body.tall .title-screen { margin-right: 0; margin-top: var(--pip-room, 0px); align-self: flex-start; }
.menu-list { display: flex; flex-direction: column; gap: 12px; width: min(420px, 88vw); margin-top: 12px; }
.menu-row { display: flex; gap: 10px; }
.menu-row .btn { flex: 1 1 0; min-width: 0; padding-inline: 12px; font-size: clamp(15px, 2.6vh, 19px); }
.menu-row .btn.small { font-size: clamp(13px, 2.2vh, 15px); padding-inline: 8px; gap: 5px; }

/* Buttons: leaf-cut plates with a fine inner line, like carved moonstone and lantern glass.
   The main action glows warm gold; everything else is frosted dusk glass with a gold hairline. */
.btn {
  --cut: 26px;
  --cut-small: 9px;
  font-family: var(--font);
  font-size: clamp(17px, 3vh, 22px);
  font-weight: 800;
  letter-spacing: 0.02em;
  min-height: 50px;
  padding: 8px 22px;
  border-radius: var(--cut) var(--cut-small) var(--cut) var(--cut-small);
  border: 1.5px solid rgba(255, 246, 214, 0.85);
  cursor: pointer;
  color: #4a2a0c;
  background:
    radial-gradient(120% 140% at 15% 0%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, #ffe9a8 0%, #ffc95a 50%, #f0a03c 100%);
  box-shadow:
    0 0 0 3px rgba(255, 211, 107, 0.14),
    0 0 22px rgba(255, 200, 90, 0.38),
    0 6px 0 -1px #9a5c20,
    0 12px 16px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s, filter 0.15s, box-shadow 0.15s, border-radius 0.25s;
  touch-action: manipulation;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  isolation: isolate;
}
/* the fine inner line */
.btn::before {
  content: ""; position: absolute; inset: 3px; z-index: -1; pointer-events: none;
  border-radius: calc(var(--cut) - 3px) calc(var(--cut-small) - 2px) calc(var(--cut) - 3px) calc(var(--cut-small) - 2px);
  border: 1px solid rgba(255, 255, 255, 0.42);
}
/* a slow shimmer that drifts across the plate */
.btn::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  transform: skewX(-18deg);
  animation: shimmer 5.5s ease-in-out infinite;
}
@keyframes shimmer { 0%, 62% { left: -60%; } 100% { left: 130%; } }
body.reduce-motion .btn::after { animation: none; display: none; }
.btn .ico { width: 1.15em; height: 1.15em; flex: none; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.4)); }
.btn:hover:not(:disabled) { filter: brightness(1.06) saturate(1.08); }
@media (hover: hover) { .btn:hover:not(:disabled) { transform: translateY(-2px); border-radius: var(--cut-small) var(--cut) var(--cut-small) var(--cut); } }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 3px rgba(255, 211, 107, 0.14), 0 0 14px rgba(255, 200, 90, 0.3), 0 2px 0 -1px #9a5c20, 0 4px 8px rgba(0, 0, 0, 0.35); }
.btn:focus-visible, .lvl:focus-visible, .skin:focus-visible, .seg button:focus-visible, .toggle:focus-visible { outline: 3px solid #9ff0ff; outline-offset: 3px; }
.btn.alt {
  color: var(--ink);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  border: 1.5px solid rgba(255, 226, 160, 0.5);
  background:
    radial-gradient(130% 120% at 12% 0%, rgba(150, 190, 255, 0.28), rgba(150, 190, 255, 0) 60%),
    linear-gradient(160deg, rgba(52, 78, 134, 0.88), rgba(20, 34, 76, 0.92));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 0 3px rgba(120, 160, 255, 0.07), 0 6px 0 -1px #0e1936, 0 12px 16px rgba(0, 0, 0, 0.35);
}
.btn.alt::before { border-color: rgba(255, 226, 160, 0.2); }
.btn.alt::after { background: linear-gradient(100deg, rgba(190, 220, 255, 0), rgba(190, 220, 255, 0.22), rgba(190, 220, 255, 0)); animation-duration: 7s; }
.btn.alt .ico { color: var(--gold); filter: drop-shadow(0 0 4px rgba(255, 211, 107, 0.55)); }
.btn.alt:hover:not(:disabled) { border-color: rgba(255, 226, 160, 0.95); box-shadow: 0 0 0 3px rgba(255, 211, 107, 0.12), 0 0 20px rgba(120, 190, 255, 0.4), 0 6px 0 -1px #0e1936, 0 12px 16px rgba(0, 0, 0, 0.35); }
.btn.alt:active:not(:disabled) { box-shadow: 0 0 0 3px rgba(120, 160, 255, 0.07), 0 2px 0 -1px #0e1936, 0 4px 8px rgba(0, 0, 0, 0.35); }
.btn.small { --cut: 20px; --cut-small: 7px; font-size: 16px; min-height: 44px; padding: 6px 16px; gap: 7px; }
.btn.danger { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); border-color: rgba(255, 214, 214, 0.7); background: linear-gradient(160deg, #f08a92, #c23a48 60%, #a02a38); box-shadow: 0 0 0 3px rgba(224, 112, 122, 0.12), 0 6px 0 -1px #6a1620, 0 12px 16px rgba(0, 0, 0, 0.35); }
.btn:disabled { filter: grayscale(0.8) brightness(0.7); cursor: default; }
.btn:disabled::after { display: none; }
/* the title screen's main button breathes */
.menu-list > .btn:first-child { min-height: 58px; font-size: clamp(20px, 3.4vh, 26px); animation: breathe 3.6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 3px rgba(255, 211, 107, 0.14), 0 0 18px rgba(255, 200, 90, 0.3), 0 6px 0 -1px #9a5c20, 0 12px 16px rgba(0, 0, 0, 0.35); } 50% { box-shadow: 0 0 0 5px rgba(255, 211, 107, 0.2), 0 0 32px rgba(255, 200, 90, 0.6), 0 6px 0 -1px #9a5c20, 0 12px 16px rgba(0, 0, 0, 0.35); } }
body.reduce-motion .menu-list > .btn:first-child { animation: none; }
.btn-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }

.corner { position: fixed; top: calc(var(--sat) + 10px); right: calc(var(--sar) + 14px); pointer-events: auto; z-index: 2; }
.drops { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 20px; background: rgba(12,18,42,0.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); border: 2px solid var(--panel-edge); padding: 4px 14px; border-radius: 999px; }
.drop-icon { width: 16px; height: 20px; display: inline-block; background: radial-gradient(circle at 40% 60%, #fff, #9ff0ff 40%, #45a8ff); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; transform: rotate(180deg); }

/* ---------- map ---------- */
.map { width: min(900px, var(--room-w)); max-width: min(900px, var(--room-w)); }
.world { margin-top: 12px; }
.world-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.world-head h3 { margin: 0; }
.world-head span { color: var(--ink-soft); font-size: 15px; }
.lvl-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 6px; }
.lvl {
  font-family: var(--font);
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 56px;
  border-radius: 18px;
  border: 2px solid rgba(255, 230, 170, 0.4);
  background: radial-gradient(circle at 35% 30%, #3e6a8a, #1b2f52 70%);
  color: var(--ink);
  font-size: clamp(18px, 3.4vh, 26px);
  font-weight: 800;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2px;
  touch-action: manipulation;
}
.lvl.w2 { background: radial-gradient(circle at 35% 30%, #7a5a3e, #3a2430 70%); }
.lvl.w3 { background: radial-gradient(circle at 35% 30%, #34508a, #0e1c3c 70%); }
.lvl.bonus { background: radial-gradient(circle at 35% 30%, #6a4ab0, #24164a 70%); border-color: var(--gold); }
.lvl { box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15); transition: transform 0.1s, filter 0.12s; }
.lvl:hover:not(:disabled) { filter: brightness(1.15); }
@media (hover: hover) { .lvl:hover:not(:disabled) { transform: translateY(-2px); } }
.lvl:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
.lvl.next { border-color: var(--gold); animation: nextglow 2.4s ease-in-out infinite; }
@keyframes nextglow { 0%, 100% { box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35), 0 0 0 rgba(255, 211, 107, 0); } 50% { box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35), 0 0 16px rgba(255, 211, 107, 0.6); } }
body.reduce-motion .lvl.next { animation: none; box-shadow: 0 0 10px rgba(255, 211, 107, 0.5); }
.lvl:disabled { opacity: 0.45; cursor: default; }
.skin.cant { filter: grayscale(0.6) brightness(0.75); }
.lvl .stars { font-size: clamp(10px, 1.8vh, 14px); letter-spacing: 1px; color: var(--gold); line-height: 1; }
.lvl .stars .off { color: rgba(255, 255, 255, 0.25); }
.lvl .lock { font-size: 18px; }
.map-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; color: var(--ink-soft); }

/* ---------- results ---------- */
.stats { display: grid; grid-template-columns: auto auto; gap: 4px 22px; justify-content: center; font-size: 19px; margin-top: 6px; }
.stats b { color: var(--gold); text-align: right; font-variant-numeric: tabular-nums; }
.badge { display: inline-block; background: #ff8fa3; color: #3a0c18; font-weight: 800; padding: 2px 10px; border-radius: 999px; font-size: 15px; margin-left: 6px; }
/* Star goals checklist, scoring tips, achievements */
.goals { list-style: none; padding: 0; margin: 8px 0 4px; display: grid; gap: 4px; }
.goals li { display: grid; grid-template-columns: 4.2em 1fr 1.4em; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.22); color: var(--ink-soft); font-size: 17px; text-align: left; }
.goals .gs { color: rgba(255, 255, 255, 0.3); letter-spacing: 1px; }
.goals li.met { color: var(--ink); background: rgba(255, 211, 107, 0.14); }
.goals li.met .gs, .goals .tick { color: var(--gold); font-weight: 800; }
.score-tips { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 6px; }
.score-tips li { display: grid; grid-template-columns: 1.6em 1fr; gap: 6px; font-size: 15px; line-height: 1.3; color: var(--ink-soft); text-align: left; }
.score-tips b { color: var(--ink); }
.score-tips .ti { color: var(--gold); font-size: 18px; text-align: center; }
.stage-card { width: min(760px, var(--room-w)); }
.sc-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.sc-head h2 { text-align: left; }
.sc-world { color: var(--ink-soft); font-size: 15px; }
.sc-flow { margin: 2px 0 10px; padding: 6px 12px 6px 30px; position: relative; border-radius: 12px; font-size: 14px; line-height: 1.35; color: var(--ink-soft);
  background: linear-gradient(90deg, rgba(var(--flow), 0.16), rgba(var(--flow), 0.02)); }
.sc-flow::before { content: ''; position: absolute; left: 10px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, rgb(var(--flow)) 45%, rgba(var(--flow), 0) 75%); box-shadow: 0 0 10px rgba(var(--flow), 0.8); }
.sc-flow b { color: rgb(var(--flow)); margin-right: 4px; }
body.narrow .sc-flow { font-size: 13px; margin-bottom: 6px; }
.sc-stars { font-size: 34px; color: var(--gold); letter-spacing: 3px; white-space: nowrap; }
.sc-stars .off, .lvl .stars .off { color: rgba(255, 255, 255, 0.22); }
.sc-cols, .win-cols { display: grid; grid-template-columns: 1fr 1.2fr; gap: 6px 24px; align-items: start; }
.sc-status { margin-top: 8px; }
.sc-status b { color: var(--gold); }
.win-panel { min-width: 320px; text-align: center; width: min(720px, var(--room-w)); }
.win-cols .stats { justify-content: stretch; }
.breakdown { font-size: 16px; background: rgba(0, 0, 0, 0.2); border-radius: 14px; padding: 8px 14px; margin-top: 6px; }
.goal-hint b { color: var(--gold); }
.goal-hint .tip { font-size: 15px; color: var(--ink-soft); }
.earned { margin-top: 10px; display: grid; gap: 6px; }
.earned-h { color: var(--gold); font-weight: 800; grid-column: 1 / -1; }
.earned.compact { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.earned.compact .ach { padding: 5px 10px; }
.earned.compact .ach small { display: none; }
.ach { display: grid; grid-template-columns: 2em 1fr auto; gap: 10px; align-items: center; text-align: left; padding: 7px 12px; border-radius: 14px; background: rgba(0, 0, 0, 0.25); border: 1.5px solid rgba(255, 255, 255, 0.08); color: var(--ink-soft); }
.ach small { display: block; font-size: 13.5px; line-height: 1.25; }
.ach .ai { font-size: 22px; text-align: center; color: rgba(255, 255, 255, 0.3); }
.ach .ad { font-weight: 800; font-size: 14px; color: rgba(255, 255, 255, 0.4); }
.ach.got { background: rgba(255, 211, 107, 0.12); border-color: rgba(255, 211, 107, 0.45); color: var(--ink); }
.ach.got .ai, .ach.got .ad { color: var(--gold); }
.ach-panel { width: min(880px, var(--room-w)); max-width: min(880px, var(--room-w)); }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; margin-top: 10px; }
.ach-meter { height: 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.4); overflow: hidden; max-width: 360px; margin: 6px auto 0; }
.ach-meter span { display: block; height: 100%; background: linear-gradient(90deg, #f6c35b, #ffe9a8); }
.btn small.cnt { font-size: 0.75em; opacity: 0.8; margin-left: 4px; }
.menu-row .btn { white-space: nowrap; }
.map-btns { display: flex; gap: 8px; }
@media (max-width: 640px) { .sc-cols, .win-cols { grid-template-columns: 1fr; } }
/* On short phone screens the Play / Replay buttons stay pinned at the bottom of the card. */
@media (max-height: 560px) { .stage-card, .win-panel { overflow-x: hidden; } .stage-card .btn-row, .win-panel .btn-row { position: sticky; bottom: -22px; margin: 12px -26px -22px; padding: 10px 0 12px; background: var(--panel-solid, rgb(14, 20, 44)); border-top: 1px solid rgba(255, 255, 255, 0.08); } }
.hint { background: rgba(95, 211, 184, 0.14); border: 1px solid rgba(95, 211, 184, 0.5); border-radius: 14px; padding: 8px 12px; margin-top: 10px; color: #c9f7e8; text-align: center; }

/* ---------- settings ---------- */
.settings { width: min(620px, var(--room-w)); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.set-row label, .set-row .lbl { font-size: 18px; font-weight: 700; }
.set-row small { display: block; font-weight: 400; color: var(--ink-soft); font-size: 14px; }
input[type=range] { width: min(240px, 40vw); height: 32px; accent-color: var(--gold); cursor: pointer; }
.toggle {
  position: relative; width: 62px; height: 34px; border-radius: 999px; border: 2px solid var(--panel-edge);
  background: rgba(0, 0, 0, 0.4); cursor: pointer; flex: none;
}
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #9aa6c0; transition: left 0.15s, background 0.15s; }
.toggle[aria-checked="true"] { background: rgba(95, 211, 184, 0.45); }
.toggle[aria-checked="true"]::after { left: 31px; background: #fff4d6; }
.seg { display: inline-flex; border: 2px solid var(--panel-edge); border-radius: 999px; overflow: hidden; flex: none; }
.seg button { font-family: var(--font); font-size: 15px; font-weight: 700; padding: 6px 12px; min-height: 38px; background: transparent; color: var(--ink); border: none; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--gold); color: #3a2410; }

/* ---------- wardrobe ---------- */
.skins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 10px; }
.skin {
  font-family: var(--font); color: var(--ink);
  border: 2px solid rgba(255, 230, 170, 0.3); border-radius: 18px; background: rgba(255, 255, 255, 0.05);
  padding: 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.skin canvas { width: min(120px, 100%); height: auto; aspect-ratio: 5 / 4; }
.skin.equipped { border-color: var(--gold); background: rgba(255, 211, 107, 0.12); }
.skin .name { font-weight: 800; font-size: 17px; }
.skin .cost { font-size: 15px; color: var(--ink-soft); }
.skin.locked canvas { filter: brightness(0.35) saturate(0.3); }

/* ---------- how to ---------- */
.howto { width: min(720px, var(--room-w)); }
.howto ul { margin: 6px 0; padding-left: 20px; color: var(--ink-soft); line-height: 1.4; }
.howto li b { color: var(--ink); }
.seed-legend { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 6px 0; }
.seed-legend canvas { width: 40px; height: 40px; }

/* ---------- misc ---------- */
#toast {
  position: fixed; left: 50%; bottom: calc(var(--sab) + 26px); transform: translateX(-50%) translateY(30px);
  background: var(--panel); border: 2px solid var(--panel-edge); border-radius: 26px; padding: 8px 20px;
  font-weight: 700; opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; z-index: 5; max-width: 90vw; text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%); }

.noscript { position: fixed; inset: 0; display: grid; place-items: center; font-size: 22px; }

@media (max-height: 460px) {
  .panel { padding: 10px 16px 14px; border-radius: 18px; }
  .menu-list { gap: 6px; margin-top: 4px; }
  .btn { min-height: 44px; }
  .lvl-grid { gap: 6px; }
  .lvl { min-height: 46px; border-radius: 14px; }
  .skin canvas { width: min(96px, 100%); }
  .world { margin-top: 6px; }
}

/* ---------- narrow screens ---------- */
body.narrow .panel { padding: 14px 16px 18px; border-radius: 22px; }
body.narrow .lvl-grid { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 7px; }
body.narrow .lvl { min-height: 52px; border-radius: 16px; }
body.narrow .skins { grid-template-columns: repeat(2, 1fr); gap: 10px; }
body.narrow .goals li { font-size: 15.5px; grid-template-columns: 3.8em 1fr 1.4em; padding: 4px 8px; }
body.narrow .stats { font-size: 17px; gap: 3px 16px; }
body.narrow .sc-stars { font-size: 28px; }
body.narrow .set-row { flex-wrap: wrap; }
body.narrow .set-row input[type=range] { width: 100%; }
body.narrow .ach-grid { grid-template-columns: 1fr; }
body.narrow .ach-hero { gap: 14px; padding: 4px 2px 10px; }
body.narrow .ach-ring { width: 92px; height: 92px; }
body.narrow .ach-ring b { font-size: 28px; }
body.narrow .ach-hero h2 { font-size: 26px; }
body.narrow .win-panel { min-width: 0; }
body.narrow .map-foot { justify-content: center; text-align: center; }
/* Upright phones: buttons pinned to the bottom of long cards, as on short landscape screens. */
@media (max-width: 619px) {
  .stage-card, .win-panel { overflow-x: hidden; }
  .stage-card .btn-row, .win-panel .btn-row { position: sticky; bottom: -18px; margin: 12px -16px -18px; padding: 10px 0 12px; background: var(--panel-solid, rgb(12, 18, 40)); border-top: 1px solid rgba(255, 255, 255, 0.08); }
}
/* Keep panels clear of the stardrop counter in the top corner. */
body.narrow #ui:has(.corner) { padding-top: calc(var(--sat) + 52px); }
.menu-row .btn[data-act="ach"] { flex-grow: 1.45; }
/* Narrow screens: shorter labels so nothing is clipped. */
body.narrow .menu-row .btn { font-size: 15.5px; gap: 6px; padding-inline: 8px; }
body.narrow .menu-row .btn.small { font-size: 13.5px; padding-inline: 6px; }
body.narrow .menu-row .btn.small .ico, body.narrow .menu-row .btn[data-act="ach"] .ico { display: none; }

/* ---------- picture-lessons, calmer cards ---------- */
.demo-card { display: grid; gap: 8px; align-content: start; }
.demo { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: 16px; border: 2px solid rgba(255, 226, 160, 0.28); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(0, 0, 0, 0.3); background: #0e2a3e; }
.demo-cap { display: grid; gap: 2px; text-align: left; min-height: 3.2em; }
.demo-cap b { color: var(--gold); font-size: 18px; }
.demo-cap span { color: var(--ink-soft); font-size: 15px; line-height: 1.3; }
/* Picture-lessons: the picture and its caption slide as one page; swipe, arrows or dots turn it. */
.demo-stage { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; overflow: hidden; border-radius: 16px; }
.demo-stage:active { cursor: grabbing; }
.demo-slide { display: grid; gap: 8px; will-change: transform; }
.demo-nav { display: flex; align-items: center; justify-content: center; gap: 10px; }
.demo-arrow { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  color: var(--gold); background: rgba(0, 0, 0, 0.28); border: 1.5px solid rgba(255, 226, 160, 0.28); transition: background 0.15s, transform 0.12s; }
.demo-arrow:active { transform: scale(0.92); background: rgba(255, 211, 107, 0.18); }
@media (hover: hover) { .demo-arrow:hover { background: rgba(255, 211, 107, 0.16); } }
.demo-dots { display: flex; gap: 8px; justify-content: center; align-items: center; }
.demo-dots button { width: 10px; height: 10px; padding: 0; border-radius: 999px; border: 0; background: rgba(255, 255, 255, 0.25); cursor: pointer; position: relative; transition: width 0.25s cubic-bezier(.2,.9,.25,1), background 0.2s; }
.demo-dots button::after { content: ""; position: absolute; inset: -12px -6px; } /* a bigger touch target than it looks */
.demo-dots button[aria-selected="true"] { width: 26px; background: linear-gradient(90deg, #ffe39a, #f6c35b); box-shadow: 0 0 10px rgba(255, 211, 107, 0.6); }
.swipe-hint { display: none; margin: 6px 0 0; text-align: center; font-size: 13px; color: var(--ink-soft); opacity: 0.7; }
@media (pointer: coarse) { .swipe-hint { display: block; } }
.how-body { touch-action: pan-y; }

/* ---------- stage card: tinted by the stage's water, glossy stars, goals as tiles ---------- */
.stage-card { background:
    radial-gradient(90% 46% at 18% 0%, rgba(var(--flow), 0.20), rgba(var(--flow), 0) 70%),
    radial-gradient(120% 60% at 50% 0%, rgba(255, 214, 140, 0.08), rgba(255, 214, 140, 0) 60%),
    linear-gradient(180deg, rgba(24, 34, 72, 0.94), rgba(10, 15, 36, 0.94)); }
.stage-card .sc-head { align-items: center; }
.sc-title { min-width: 0; }
.stage-card .sc-world { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14.5px; margin-bottom: 4px; }
.sc-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: 800; font-size: 13px; letter-spacing: 0.3px;
  color: #10213a; background: linear-gradient(180deg, #fff, rgb(var(--flow))); box-shadow: 0 0 12px rgba(var(--flow), 0.45); }
.stage-card h2 { font-size: clamp(26px, 4.4vh, 36px); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), 0 0 22px rgba(255, 211, 107, 0.25); }
.stage-card .sc-stars { display: flex; gap: 2px; padding: 6px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.26); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.mstar { width: 1em; height: 1em; overflow: visible; display: block; }
.mstar path { fill: rgba(6, 14, 36, 0.4); stroke: rgba(255, 240, 200, 0.28); stroke-width: 7; stroke-linejoin: round; }
.mstar.on path { fill: url(#lmStarFill); stroke: #e98f36; stroke-width: 9; paint-order: stroke; filter: drop-shadow(0 0 4px rgba(255, 200, 90, 0.55)); }
.mstar ellipse { fill: rgba(255, 255, 255, 0.85); }
.stage-card .sc-flow { background: linear-gradient(90deg, rgba(var(--flow), 0.18), rgba(var(--flow), 0.02)); border: 1px solid rgba(var(--flow), 0.22); }
.stage-card .demo { border-color: rgba(var(--flow), 0.45); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 22px rgba(var(--flow), 0.16), inset 0 0 0 1px rgba(0, 0, 0, 0.3); }
.goal-tiles { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gt { position: relative; display: grid; justify-items: center; gap: 1px; padding: 9px 4px 8px; border-radius: 16px; text-align: center;
  background: rgba(0, 0, 0, 0.24); border: 1.5px solid rgba(255, 255, 255, 0.07); color: var(--ink-soft); }
.gt-stars { display: flex; gap: 1px; font-size: 16px; margin-bottom: 3px; opacity: 0.55; filter: grayscale(0.6); }
.gt b { font-size: 18px; color: var(--ink); line-height: 1.1; }
.gt small { font-size: 12.5px; }
.gt.met { background: linear-gradient(180deg, rgba(255, 211, 107, 0.22), rgba(255, 211, 107, 0.06)); border-color: rgba(255, 211, 107, 0.55); box-shadow: 0 0 14px rgba(255, 211, 107, 0.18); }
.gt.met .gt-stars { opacity: 1; filter: none; }
.gt.met b { color: var(--gold); }
.gt-ok { position: absolute; top: -7px; right: -5px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 900;
  color: #1d3a14; background: linear-gradient(180deg, #c8f7a0, #7fd35a); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); }
.sc-meter { position: relative; height: 8px; margin: 12px 2px 0; border-radius: 999px; background: rgba(0, 0, 0, 0.4); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); }
.sc-meter span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(var(--flow), 0.9), #ffd36b); box-shadow: 0 0 8px rgba(255, 211, 107, 0.45); }
.sc-meter i { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 2px; background: rgba(255, 244, 214, 0.75); }
body.narrow .gt b { font-size: 16.5px; }
body.narrow .stage-card .sc-stars { padding: 5px 8px; }
.sc-cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 10px 26px; margin-top: 10px; }
.sc-side h3 { font-size: 19px; }
.sc-bonus { font-size: 14px; color: var(--ink-soft); margin: 8px 0 0; }
.stage-card .sc-status { margin: 8px 0 0; }
.stage-card .btn-row .ico, .win-panel .btn-row .ico { margin-right: 6px; }

.win-name { margin: 2px 0 0; color: var(--ink-soft); }
.win-score { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-top: 4px; }
.win-score > b { font-size: 40px; color: var(--gold); font-variant-numeric: tabular-nums; line-height: 1; }
.win-score small { font-size: 16px; margin-left: 10px; }
.gbar { position: relative; height: 12px; margin: 12px 14px 26px; border-radius: 999px; background: rgba(0, 0, 0, 0.4); }
.gbar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #f6c35b, #ffe9a8); }
.gbar .mk { position: absolute; top: -3px; width: 3px; height: 18px; margin-left: -1.5px; border-radius: 2px; background: rgba(255, 255, 255, 0.4); }
.gbar .mk.met { background: #fff; }
.gbar .mk em { position: absolute; top: 21px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 14px; color: rgba(255, 255, 255, 0.45); white-space: nowrap; }
.gbar .mk.met em { color: var(--gold); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px; }
.chip { display: grid; gap: 1px; min-width: 88px; padding: 6px 12px; border-radius: 14px; background: rgba(0, 0, 0, 0.26); text-align: center; }
.chip b { color: var(--gold); font-size: 19px; font-variant-numeric: tabular-nums; }
.chip span { color: var(--ink-soft); font-size: 13.5px; }
.chip.wide { min-width: 110px; }
.win-panel .goal-hint { display: block; }
.win-panel .goal-hint .tip { display: block; margin-top: 2px; }

.tabs { display: flex; gap: 5px; overflow-x: auto; padding: 8px 2px 6px; scrollbar-width: none; justify-content: center; flex-wrap: wrap; }
.tabs::-webkit-scrollbar { display: none; }
.tab { font: inherit; font-weight: 700; font-size: 15px; color: var(--ink-soft); background: rgba(0, 0, 0, 0.26); border: 1.5px solid transparent; border-radius: 999px; padding: 6px 11px; min-height: 36px; cursor: pointer; white-space: nowrap; }
.tab[aria-selected="true"] { color: #2a1c05; background: linear-gradient(180deg, #ffe39a, #f6c35b); }
.how-page { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 10px 24px; align-items: center; min-height: 200px; margin-top: 8px; }
.how-page[hidden] { display: none; }
.how-page:not(:has(.demo-card)) { grid-template-columns: 1fr; text-align: center; }
.how-text { text-align: left; }
.how-page:not(:has(.demo-card)) .how-text { text-align: center; }
.how-text h3 { color: var(--gold); font-size: 22px; margin-bottom: 4px; }
.how-text p { margin: 6px 0; }
.how-text .keys { font-size: 14px; color: var(--ink-soft); }
.power-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.power-list li { display: grid; grid-template-columns: 6.5em 1fr; gap: 8px; padding: 5px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.22); font-size: 15px; line-height: 1.3; }
.power-list b { font-size: 16px; }
.power-list span { color: var(--ink-soft); }
@media (max-width: 640px) {
  .sc-cols, .how-page { grid-template-columns: 1fr; }
  .demo-cap { text-align: center; min-height: 0; }
  .how-text { text-align: center; }
  .how-page { min-height: 0; }
}
@media (max-height: 460px) and (min-width: 641px) { .demo-cap span { font-size: 14px; } .how-page { min-height: 0; } }
/* Short landscape screens: smaller pictures so a card fits without much scrolling. */
@media (max-height: 560px) {
  .demo { max-height: 128px; width: auto; margin-inline: auto; }
  .demo-cap { min-height: 0; }
  .demo-cap b { font-size: 16px; }
  .demo-cap span { font-size: 13.5px; }
  .sc-head { padding-right: 78px; }
  .sc-stars { font-size: 26px; }
  .how-page { min-height: 0; margin-top: 2px; }
  .tabs { padding: 4px 2px 2px; }
  .tab { min-height: 32px; padding: 4px 12px; }
  .chip { padding: 4px 10px; }
}

/* ---------- round-end screens: a glowing pond panel, sunburst behind it, bubbles and Pip ---------- */
.end-wrap { position: relative; isolation: isolate; display: flex; flex-direction: column; max-height: 100%; max-width: 100%; }
.end-panel {
  border: 2px solid transparent;
  background: var(--end-bg) padding-box, var(--end-edge) border-box;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 40px var(--end-halo), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.end-panel > h2 { padding-inline: 58px; }
.end-win {
  --end-bg: radial-gradient(90% 44% at 50% 0%, rgba(255, 205, 120, 0.3), rgba(255, 205, 120, 0) 70%),
    radial-gradient(70% 40% at 50% 106%, rgba(95, 211, 184, 0.24), rgba(95, 211, 184, 0) 70%),
    linear-gradient(172deg, rgba(84, 44, 98, 0.96) 0%, rgba(44, 54, 112, 0.96) 40%, rgba(14, 66, 86, 0.96) 100%);
  --end-edge: linear-gradient(160deg, #ffe9a8, #f0a04b 28%, #ffb3c7 52%, #5fd3b8 80%, #ffe9a8);
  --end-halo: rgba(255, 196, 110, 0.22);
  --end-ray: rgba(255, 214, 140, 0.2);
  --panel-solid: rgb(18, 60, 84);
}
.end-lose {
  --end-bg: radial-gradient(70% 40% at 50% 0%, rgba(205, 210, 255, 0.2), rgba(205, 210, 255, 0) 70%),
    linear-gradient(175deg, rgba(40, 36, 88, 0.96), rgba(26, 44, 86, 0.96) 55%, rgba(14, 34, 60, 0.96));
  --end-edge: linear-gradient(160deg, #eef0ff, rgba(176, 164, 255, 0.75) 40%, rgba(120, 206, 226, 0.65) 75%, #eef0ff);
  --end-halo: rgba(170, 170, 255, 0.16);
  --end-ray: rgba(200, 205, 255, 0.11);
  --panel-solid: rgb(18, 36, 66);
  min-width: 320px; max-width: min(540px, var(--room-w)); text-align: center;
}
.end-results {
  --end-bg: radial-gradient(90% 44% at 50% 0%, rgba(120, 240, 210, 0.22), rgba(120, 240, 210, 0) 70%),
    radial-gradient(60% 40% at 15% 100%, rgba(190, 140, 255, 0.2), rgba(190, 140, 255, 0) 70%),
    linear-gradient(170deg, rgba(18, 70, 92, 0.96), rgba(30, 46, 104, 0.96) 60%, rgba(46, 32, 90, 0.96));
  --end-edge: linear-gradient(160deg, #b9fff0, #5fd3b8 30%, #d9c2ff 65%, #ffd36b);
  --end-halo: rgba(95, 211, 184, 0.2);
  --end-ray: rgba(150, 255, 225, 0.15);
  --panel-solid: rgb(22, 56, 96);
  min-width: 320px; text-align: center;
}
.end-win h2, .end-results h2 {
  background: linear-gradient(100deg, #ffe08a 0%, #fffaf0 18%, #ffd36b 36%, #ffb38a 58%, #ffe08a 80%, #fffaf0 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(90, 40, 10, 0.55)) drop-shadow(0 0 14px rgba(255, 200, 110, 0.35));
  animation: titleShine 5s linear infinite;
}
.end-results h2 { background-image: linear-gradient(100deg, #b9fff0 0%, #ffffff 18%, #7fe8cf 36%, #d9c2ff 58%, #b9fff0 80%, #ffffff 100%); filter: drop-shadow(0 2px 0 rgba(10, 40, 60, 0.6)); }
.end-lose h2 { color: #e4e6ff; text-shadow: 0 0 18px rgba(190, 190, 255, 0.45); }
.end-lose > h2::after { background: linear-gradient(90deg, rgba(220, 220, 255, 0), #d6d3f2, rgba(220, 220, 255, 0)) !important; }
@keyframes titleShine { from { background-position: 0% 0; } to { background-position: -220% 0; } }

/* the sunburst / moonbeams turning slowly behind the panel */
.end-rays {
  position: absolute; left: 50%; top: 70px; width: 820px; height: 820px; margin: -410px 0 0 -410px; z-index: -1;
  pointer-events: none; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, var(--end-ray, rgba(255, 214, 140, 0.18)) 0deg 6deg, rgba(0, 0, 0, 0) 6deg 18deg);
  -webkit-mask: radial-gradient(closest-side, #000 18%, rgba(0, 0, 0, 0.5) 55%, transparent 100%);
  mask: radial-gradient(closest-side, #000 18%, rgba(0, 0, 0, 0.5) 55%, transparent 100%);
  animation: raysSpin 80s linear infinite;
}
.end-wrap:has(.end-win) .end-rays { --end-ray: rgba(255, 214, 140, 0.2); }
.end-wrap:has(.end-lose) .end-rays { --end-ray: rgba(200, 205, 255, 0.1); animation-duration: 160s; }
.end-wrap:has(.end-results) .end-rays { --end-ray: rgba(150, 255, 225, 0.14); }
@keyframes raysSpin { to { transform: rotate(360deg); } }

/* bubbles rising through the panel, petals drifting down on a perfect clear */
.end-fx { position: absolute; inset: 0; border-radius: 26px; overflow: hidden; pointer-events: none; z-index: 1; container-type: size; }
.end-fx .bub {
  position: absolute; bottom: -24px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; opacity: 0;
  border: 1.5px solid rgba(205, 242, 255, 0.5);
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.7) 0 16%, rgba(255, 255, 255, 0) 30%), rgba(160, 220, 255, 0.06);
  animation: bubUp var(--d) linear var(--w) infinite;
}
@keyframes bubUp {
  0% { opacity: 0; transform: translate(0, 0); }
  12% { opacity: 0.75; }
  35% { transform: translate(9px, calc(-35cqh - 10px)); }
  65% { transform: translate(-7px, calc(-65cqh - 20px)); }
  88% { opacity: 0.6; }
  100% { opacity: 0; transform: translate(4px, calc(-100cqh - 40px)); }
}
.end-fx .petal {
  position: absolute; top: -22px; left: var(--x); width: 10px; height: 14px; opacity: 0;
  border-radius: 80% 0 80% 0; background: var(--c); box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.12);
  animation: petalFall var(--d) linear var(--w) infinite;
}
@keyframes petalFall {
  0% { opacity: 0; transform: translate(0, 0) rotate(0); }
  8% { opacity: 0.9; }
  30% { transform: translate(18px, calc(30cqh + 10px)) rotate(calc(var(--r) * 0.3)); }
  60% { transform: translate(-14px, calc(60cqh + 20px)) rotate(calc(var(--r) * 0.6)); }
  90% { opacity: 0.85; }
  100% { opacity: 0; transform: translate(8px, calc(100cqh + 44px)) rotate(var(--r)); }
}

/* Pip, cheering from the panel's top corner */
.end-pip { position: absolute; right: -30px; top: -40px; width: 140px; height: 140px; z-index: 3; pointer-events: none; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.35)); }

/* the moon over the lose screen */
.end-moon { display: block; width: 58px; height: 58px; margin: -4px auto 4px; filter: drop-shadow(0 0 12px rgba(220, 220, 255, 0.7)); animation: moonSway 6s ease-in-out infinite; }
@keyframes moonSway { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(5deg) translateY(-3px); } }
.lose-bar { position: relative; height: 10px; margin: 10px 18px 4px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); overflow: hidden; }
.lose-bar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #8fa8ff, #c7b8ff 60%, #eef0ff); animation: fillIn 1.1s 0.25s cubic-bezier(.2, .8, .3, 1) both; }
.end-panel .chip { background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.08); }
.end-lose .chip b { color: #e4e6ff; }
.end-results .chip b { color: #b9fff0; }
.end-panel .win-score > b { font-size: 46px; text-shadow: 0 3px 0 rgba(90, 40, 10, 0.5), 0 0 22px rgba(255, 211, 107, 0.45); }

/* the score bar fills in, with a glint running along it */
.end-win .gbar .fill { animation: fillIn 1.2s 0.3s cubic-bezier(.2, .8, .3, 1) both; overflow: hidden; }
.end-win .gbar .fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 70%); background-size: 250% 100%; animation: glint 2.8s 1.5s ease-in-out infinite; }
@keyframes fillIn { from { width: 0; } }
@keyframes glint { from { background-position: 150% 0; } to { background-position: -100% 0; } }

/* the stars: dashed hollows that fill with plump, smiling stars */
.big-stars { display: flex; justify-content: center; align-items: flex-end; gap: 2px; margin: 4px 0 0; font-size: 0; letter-spacing: 0; }
.svg-defs { position: absolute; width: 0; height: 0; }
.bstar { position: relative; display: block; width: 78px; height: 78px; }
.bstar.s1 { width: 102px; height: 102px; margin-bottom: 12px; }
.bstar.s0 { transform: rotate(-13deg); }
.bstar.s2 { transform: rotate(13deg); }
.bstar svg { display: block; width: 100%; height: 100%; overflow: visible; }
.st-empty { fill: rgba(6, 14, 36, 0.34); stroke: rgba(255, 240, 200, 0.38); stroke-width: 3; stroke-dasharray: 5 5; stroke-linejoin: round; }
.st-full { transform-origin: 50px 53px; transform: scale(0); opacity: 0; }
.st-body { fill: url(#lmStarFill); stroke: #e98f36; stroke-width: 10; stroke-linejoin: round; paint-order: stroke; }
.st-shine { fill: rgba(255, 255, 255, 0.8); }
.st-cheek { fill: #ff8f8f; opacity: 0.55; }
.st-eye { fill: #5a2c10; transform-box: fill-box; transform-origin: center; }
.st-smile { fill: none; stroke: #5a2c10; stroke-width: 2.6; stroke-linecap: round; }
.bstar.on svg { filter: drop-shadow(0 4px 0 rgba(120, 52, 12, 0.45)) drop-shadow(0 0 16px rgba(255, 211, 107, 0.65)); }
.bstar.on .st-full { animation: starPop 0.62s cubic-bezier(.2, 1.6, .4, 1) forwards, starBob 3.4s ease-in-out 0.8s infinite; }
.bstar.s1.on .st-full { animation-delay: 0s, 1.3s; }
.bstar.s2.on .st-full { animation-delay: 0s, 1.8s; }
.bstar.on .st-eye { animation: starBlink 5s 1.4s infinite; }
.bstar.s1.on .st-eye { animation-delay: 2.6s; }
.bstar.s2.on .st-eye { animation-delay: 3.7s; }
@keyframes starPop { 0% { opacity: 0; transform: scale(0) rotate(-45deg); } 55% { opacity: 1; transform: scale(1.3) rotate(8deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes starBob { 0%, 100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); } 50% { opacity: 1; transform: translateY(-3px) scale(1.04) rotate(-3deg); } }
@keyframes starBlink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.12); } }
.bstar .burst { position: absolute; inset: 2%; border-radius: 50%; border: 3px solid rgba(255, 236, 170, 0.95); opacity: 0; transform: scale(0.3); pointer-events: none; }
.bstar.on .burst { animation: starBurst 0.65s ease-out 0.1s forwards; }
@keyframes starBurst { 0% { opacity: 1; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1.7); border-width: 1px; } }
.bstar > b {
  position: absolute; left: 50%; top: 53%; width: 13px; height: 13px; margin: -6.5px; opacity: 0; pointer-events: none;
  background: #ffe7a0; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.bstar > b:nth-of-type(3n + 2) { background: #9ff0dc; }
.bstar > b:nth-of-type(3n) { background: #ffb3c7; }
.bstar.on > b { animation: starSpark 0.8s ease-out 0.08s forwards; }
@keyframes starSpark {
  0% { opacity: 1; transform: rotate(var(--a)) translateX(12px) scale(0.4); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(64px) scale(1) rotate(120deg); }
}
.end-win.perfect .bstar.s1.on svg { filter: drop-shadow(0 4px 0 rgba(120, 52, 12, 0.45)) drop-shadow(0 0 26px rgba(255, 226, 140, 0.9)); }
body.narrow .bstar { width: 64px; height: 64px; }
body.narrow .bstar.s1 { width: 84px; height: 84px; margin-bottom: 10px; }
body.narrow .end-panel > h2 { padding-inline: 46px; }
body.narrow .end-pip { width: 106px; height: 106px; right: -10px; top: -26px; }
body.narrow .end-panel .win-score > b { font-size: 40px; }
@media (max-height: 560px) {
  .bstar { width: 56px; height: 56px; }
  .bstar.s1 { width: 72px; height: 72px; margin-bottom: 8px; }
  .end-pip { width: 96px; height: 96px; top: -14px; right: -14px; }
  .end-moon { width: 40px; height: 40px; }
}
body.reduce-motion .end-rays, body.reduce-motion .end-moon, body.reduce-motion .end-win h2, body.reduce-motion .end-results h2 { animation: none; }
body.reduce-motion .end-fx { display: none; }
body.reduce-motion .bstar.on .st-full { animation: none; opacity: 1; transform: none; }
body.reduce-motion .bstar.on .st-eye, body.reduce-motion .bstar .burst, body.reduce-motion .bstar > b { animation: none; }
body.reduce-motion .end-win .gbar .fill, body.reduce-motion .lose-bar span { animation: none; }
body.reduce-motion .end-win .gbar .fill::after { display: none; }

/* ---------- the Adventure map (a pannable, zoomable world) ---------- */
.ow { position: fixed; inset: 0; overflow: hidden; pointer-events: auto; touch-action: none; cursor: grab; background: #0b2a38; z-index: 1; }
.ow.panning { cursor: grabbing; }
.ow-sea, .ow-air { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.ow-air { z-index: 1; }
.ow-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.ow-art { position: absolute; inset: 0; display: block; overflow: visible; }
.ow-gate .post { fill: #5a4030; }
.ow-gate .arch { stroke: #7a5c40; }
.ow-gate .lamp { fill: #3a3a4a; }
.ow-gate.lit .post { fill: #8a6a48; }
.ow-gate.lit .arch { stroke: var(--gold); }
.ow-gate.lit .lamp { fill: #ffe6a8; }

/* a small name tag floating over each area of the realm */
.ow-area { position: absolute; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap; }
.ow-area span {
  display: inline-block; padding: 5px 14px 6px; border-radius: 999px;
  font: 800 16px var(--font); letter-spacing: 0.3px; color: var(--ac, #ffe9a8);
  background: rgba(8, 14, 34, 0.62); border: 1.5px solid color-mix(in srgb, var(--ac, #ffe9a8) 55%, transparent);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.ow-area span::before, .ow-area span::after { content: "✦"; font-size: 10px; opacity: 0.7; margin: 0 7px; vertical-align: 2px; }
.ow-area.locked span { color: rgba(255, 255, 255, 0.55); border-color: rgba(255, 255, 255, 0.18); }
.ow-area.locked span::before, .ow-area.locked span::after { content: none; }

/* the swirling gates at each end of the road, into the next and back to the last realm */
.ow-portal {
  position: absolute; width: 100px; height: 100px; margin: -50px 0 0 -50px; padding: 0;
  border: 0; border-radius: 50%; background: none; cursor: pointer; touch-action: none;
  display: grid; place-items: center; color: var(--ink); transition: filter 0.15s, transform 0.15s;
}
.ow-portal .swirl {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--pc), var(--pw), var(--pg), var(--pc), var(--pw), var(--pg), var(--pc));
  -webkit-mask: radial-gradient(circle, transparent 46%, #000 48%, #000 68%, transparent 70%, transparent 74%, #000 76%);
  mask: radial-gradient(circle, transparent 46%, #000 48%, #000 68%, transparent 70%, transparent 74%, #000 76%);
  box-shadow: 0 0 26px var(--pg); animation: owSwirl 6s linear infinite;
}
.ow-portal::before { content: ""; position: absolute; inset: 14px; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--pg) 70%, #fff) 0, var(--pw) 55%, rgba(8, 14, 34, 0.9) 100%);
  box-shadow: 0 0 30px var(--pg), inset 0 0 18px rgba(0, 0, 0, 0.5); }
.ow-portal .ico { position: relative; font-size: 34px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); animation: owBob 3s ease-in-out infinite; }
.ow-portal .tag {
  position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); white-space: nowrap;
  padding: 4px 12px 5px; border-radius: 999px; font: 800 15px var(--font); color: var(--pc);
  background: rgba(8, 14, 34, 0.72); border: 1.5px solid color-mix(in srgb, var(--pc) 55%, transparent);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}
.ow-portal.locked { cursor: not-allowed; }
.ow-portal.locked .swirl, .ow-portal.locked::before { filter: grayscale(0.85) brightness(0.6); animation-duration: 24s; }
.ow-portal.locked .tag { color: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.2); }
@media (hover: hover) { .ow-portal:hover:not(.locked) { filter: brightness(1.15); transform: scale(1.05); } }
.ow-portal:focus-visible { outline: 4px solid #9ff0ff; outline-offset: 6px; }
.ow-portal.shake { animation: owShake 0.4s; }
.ow-portal.enter { animation: owEnter 0.4s ease-in forwards; }
.ow-portal.enter .swirl { animation-duration: 0.6s; }
.ow-portal.arrive { animation: owArrive 0.9s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes owSwirl { to { transform: rotate(360deg); } }
@keyframes owBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes owEnter { to { transform: scale(1.5); filter: brightness(1.8); } }
body.reduce-motion .ow-portal, body.reduce-motion .ow-portal .swirl, body.reduce-motion .ow-portal .ico { animation: none; }

.ow-node {
  position: absolute; width: 68px; height: 68px; margin: -34px 0 0 -34px; padding: 0;
  border-radius: 50%; border: 3px solid rgba(255, 230, 170, 0.55);
  background: radial-gradient(circle at 35% 30%, #3e8a9a, #1b3f5a 72%);
  color: var(--ink); font: 800 28px var(--font); cursor: pointer; touch-action: none;
  display: grid; place-items: center;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.4), 0 8px 14px rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.22);
  transition: filter 0.12s, transform 0.12s;
}
.ow-node.w2 { background: radial-gradient(circle at 35% 30%, #8a6a48, #3a2430 72%); }
.ow-node.w3 { background: radial-gradient(circle at 35% 30%, #4a6aa8, #0e1c3c 72%); }
.ow-node.kit-sky { background: radial-gradient(circle at 35% 30%, #8ac0e8, #2f5880 72%); }
.ow-node.kit-reef { background: radial-gradient(circle at 35% 30%, #3ab0a0, #0e3a4a 72%); }
.ow-node.kit-frost { background: radial-gradient(circle at 35% 30%, #a8d0e8, #34587a 72%); }
.ow-node.kit-dream { background: radial-gradient(circle at 35% 30%, #c89ae0, #4a2a6a 72%); }
.ow-node.bonus { background: radial-gradient(circle at 35% 30%, #8a64d0, #24164a 72%); border-color: var(--gold); }
.ow-node .num { line-height: 1; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); }
.ow-node .lock { font-size: 22px; }
.ow-stars { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); font-size: 17px; letter-spacing: 1px; color: var(--gold); white-space: nowrap; line-height: 1; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); }
.ow-stars .off { color: rgba(255, 255, 255, 0.3); }
.ow-node.cleared { border-color: var(--gold); }
.ow-node.perfect { box-shadow: 0 5px 0 rgba(0, 0, 0, 0.4), 0 0 18px rgba(255, 211, 107, 0.7), inset 0 2px 0 rgba(255, 255, 255, 0.22); }
/* Cleared stages wear their stars: a copper rim for one, a moonlit silver shine for two,
   a golden glowing face with a twinkle for three. The star row sits on a little dark pill. */
.ow-node.cleared .ow-stars { padding: 3px 7px 4px; border-radius: 999px; background: rgba(8, 14, 34, 0.72); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); font-size: 15px; }
.ow-node.s1 { border-color: #e0a066; box-shadow: 0 5px 0 rgba(0, 0, 0, 0.4), 0 8px 14px rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 3px rgba(224, 160, 102, 0.35); }
.ow-node.s1 .ow-stars { border: 1px solid rgba(224, 160, 102, 0.5); }
.ow-node.s2 { border-color: #d8f3ff; box-shadow: 0 5px 0 rgba(0, 0, 0, 0.4), 0 0 14px rgba(170, 230, 255, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 3px rgba(200, 240, 255, 0.3); }
.ow-node.s2::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; pointer-events: none;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0) 70%, rgba(190, 235, 255, 0.22)); }
.ow-node.s2 .ow-stars { border: 1px solid rgba(200, 240, 255, 0.55); }
.ow-node.s3 { border-color: #fff1b8; color: #5a3305;
  background: radial-gradient(circle at 34% 28%, #fffbe0 0, #ffe07a 26%, #f6b33d 62%, #b8661a 100%);
  box-shadow: 0 5px 0 #7a4210, 0 0 22px rgba(255, 211, 107, 0.85), 0 0 44px rgba(255, 190, 80, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.6), inset 0 -6px 10px rgba(150, 70, 0, 0.35); }
.ow-node.s3 .num { text-shadow: 0 1px 0 rgba(255, 250, 220, 0.8); }
.ow-node.s3::before { content: "✦"; position: absolute; top: -8px; right: -6px; font-size: 20px; line-height: 1; color: #fffbe0;
  text-shadow: 0 0 8px rgba(255, 220, 120, 0.95); animation: owTwinkle 2.6s ease-in-out infinite; pointer-events: none; }
.ow-node.s3 .ow-stars { border: 1px solid rgba(255, 211, 107, 0.7); text-shadow: 0 0 6px rgba(255, 211, 107, 0.8); }
@keyframes owTwinkle { 0%, 100% { transform: scale(0.75) rotate(0deg); opacity: 0.7; } 50% { transform: scale(1.15) rotate(20deg); opacity: 1; } }
body.reduce-motion .ow-node.s3::before { animation: none; }
.ow-node.locked { filter: grayscale(0.7) brightness(0.65); cursor: not-allowed; }
.ow-node.next { border-color: var(--gold); }
.ow-node.next::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 3px solid var(--gold); opacity: 0; animation: owPulse 2s ease-out infinite; }
@keyframes owPulse { 0% { transform: scale(0.8); opacity: 0.9; } 100% { transform: scale(1.25); opacity: 0; } }
body.reduce-motion .ow-node.next::after { animation: none; opacity: 0.6; transform: none; }
@media (hover: hover) { .ow-node:hover:not(.locked) { filter: brightness(1.18); transform: translateY(-2px); } }
.ow-node:focus-visible { outline: 4px solid #9ff0ff; outline-offset: 4px; }
.ow-node.shake { animation: owShake 0.4s; }
@keyframes owShake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.ow-node.arrive { animation: owArrive 0.9s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes owArrive { 0% { transform: scale(0.6); } 100% { transform: scale(1); } }
body.reduce-motion .ow-node.shake, body.reduce-motion .ow-node.arrive { animation: none; }
.ow-pip { position: absolute; left: 0; top: 0; width: 120px; height: 120px; pointer-events: none; filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.4)); }

.ow-top { position: absolute; z-index: 2; left: calc(var(--sal) + 12px); right: calc(var(--sar) + 128px); top: calc(var(--sat) + 10px); display: flex; align-items: center; gap: 10px; pointer-events: none; }
.ow-top > * { pointer-events: auto; }
.ow-top .btn { min-height: 44px; }
.ow-top .short { display: none; }
.ow-head { margin: 0 auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.ow-realm { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 2px solid var(--panel-edge); background: rgba(12, 18, 42, 0.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--gold); font: 800 30px/1 var(--font); cursor: pointer; display: grid; place-items: center; padding: 0 0 4px; touch-action: manipulation; }
.ow-realm.locked { color: var(--ink-soft); opacity: 0.6; }
.ow-realm.gap { visibility: hidden; }
.ow-realm:active { transform: translateY(2px); }
.ow-realm:focus-visible { outline: 3px solid #9ff0ff; outline-offset: 3px; }
.ow-title { margin: 0 auto; min-width: 0; display: grid; text-align: center; background: rgba(12, 18, 42, 0.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 2px solid var(--panel-edge); border-radius: 18px; padding: 3px 18px 4px; line-height: 1.15; }
.ow-title b { font-size: 20px; color: var(--gold); }
.ow-title span { font-size: 14px; color: var(--ink-soft); }
.ow-zoom { position: absolute; z-index: 2; right: calc(var(--sar) + 14px); bottom: calc(var(--sab) + 16px); display: grid; gap: 10px; }
.ow-round { width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--panel-edge); background: rgba(12, 18, 42, 0.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--ink); font: 800 26px var(--font); cursor: pointer; display: grid; place-items: center; padding: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); touch-action: manipulation; }
.ow-round:active { transform: translateY(2px); }
.ow-round:focus-visible { outline: 3px solid #9ff0ff; outline-offset: 3px; }
.ow-info { position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); bottom: calc(var(--sab) + 16px); max-width: calc(100vw - 170px); display: grid; text-align: center; gap: 1px; padding: 6px 20px 8px; border-radius: 20px; background: rgba(12, 18, 42, 0.8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 2px solid var(--panel-edge); pointer-events: none; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); }
.ow-info b { color: var(--gold); font-size: 19px; }
.ow-info span { color: var(--ink-soft); font-size: 14.5px; }
.ow-info .gold { color: var(--gold); font-style: normal; letter-spacing: 1px; }
.ow-info .gold .off { color: rgba(255, 255, 255, 0.3); }
body.narrow .ow-top { right: calc(var(--sar) + 118px); gap: 6px; }
body.narrow .ow-top .lbl { display: none; }
body.narrow .ow-top .short { display: inline; font-size: 20px; }
body.narrow .ow-top .btn.small { padding-inline: 12px; min-width: 48px; }
body.narrow .ow-title { padding: 2px 10px 3px; }
body.narrow .ow-head { gap: 4px; }
body.narrow .ow-realm { width: 38px; height: 38px; font-size: 26px; }
body.narrow .ow-title em { display: none; }
.ow-title em { font-style: normal; }
body.narrow .ow-top .btn.small .ico { margin: 0; }
body.narrow .ow-title b { font-size: 17px; }
body.narrow .ow-title span { font-size: 12.5px; }
@media (max-height: 460px) {
  .ow-info { padding: 3px 16px 5px; }
  .ow-info b { font-size: 16px; }
  .ow-info span { font-size: 13px; }
  .ow-round { width: 44px; height: 44px; }
  .ow-zoom { gap: 8px; }
}

/* ---------- on-screen touch pad: stick on the left, throw button on the right ----------
   Quiet by design: thin edges and see-through fills, so the pond stays the star. Sizes come from
   padMetrics() in render/view.js and the safe areas keep it clear of cut-outs and curved edges. */
#pad { position: fixed; inset: 0; pointer-events: none; z-index: 1; -webkit-user-select: none; user-select: none; }
#pad[hidden] { display: none; }
#pad-stick, #pad-fire, .pad-swap { touch-action: none; -webkit-tap-highlight-color: transparent; }
#pad-stick {
  position: absolute; pointer-events: auto;
  left: calc(var(--sal) + var(--pad-margin, 16px)); bottom: calc(var(--sab) + var(--pad-margin, 16px));
  width: var(--pad-stick, 108px); height: var(--pad-stick, 108px); border-radius: 50%;
  background: radial-gradient(circle, rgba(150, 185, 235, 0.06) 0 50%, rgba(150, 185, 235, 0.16) 100%);
  border: 2px solid rgba(255, 232, 170, 0.24);
  opacity: 0.62; transition: opacity 0.2s;
}
#pad-stick::before { content: ""; position: absolute; inset: -16px; border-radius: 50%; } /* a forgiving touch area */
#pad-stick::after { content: ""; position: absolute; inset: 24%; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, 0.12); }
#pad-knob {
  position: absolute; left: 50%; top: 50%; width: 42%; height: 42%; margin: -21% 0 0 -21%; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, rgba(255, 244, 214, 0.5), rgba(255, 205, 130, 0.2) 75%);
  border: 2px solid rgba(255, 238, 195, 0.5); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22);
}
#pad-stick.held { opacity: 0.95; }
#pad-right {
  position: absolute; display: flex; flex-direction: var(--pad-dir, column); align-items: center; gap: var(--pad-gap, 11px);
  right: calc(var(--sar) + var(--pad-margin, 16px)); bottom: calc(var(--sab) + var(--pad-margin, 16px)); pointer-events: none;
}
#pad-fire, .pad-swap {
  pointer-events: auto; display: grid; place-items: center; padding: 0; cursor: pointer; border-radius: 50%; color: rgba(255, 244, 214, 0.9);
  opacity: 0.6; transition: opacity 0.2s, transform 0.08s, box-shadow 0.2s;
}
#pad-fire {
  width: var(--pad-fire, 68px); height: var(--pad-fire, 68px); position: relative;
  border: 2px solid rgba(255, 211, 107, 0.5);
  background: radial-gradient(circle at 38% 30%, rgba(255, 228, 165, 0.36), rgba(255, 170, 85, 0.14) 72%);
}
#pad-fire::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; }
#pad-fire span { width: 36%; height: 36%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.75), rgba(255, 211, 107, 0.5)); box-shadow: 0 0 10px rgba(255, 211, 107, 0.35); }
#pad-fire.held { opacity: 0.95; transform: scale(0.93); box-shadow: 0 0 18px rgba(255, 211, 107, 0.45); }
.pad-swap {
  width: var(--pad-swap, 52px); height: var(--pad-swap, 52px);
  border: 2px solid rgba(255, 232, 170, 0.3);
  background: radial-gradient(circle at 36% 28%, rgba(110, 140, 205, 0.34), rgba(14, 22, 52, 0.3) 72%);
}
.pad-swap::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.pad-swap { position: relative; }
.pad-swap:active { opacity: 0.95; transform: scale(0.94); }
body.reduce-motion #pad-stick, body.reduce-motion #pad-fire, body.reduce-motion .pad-swap { transition: none; }

/* ---------- Achievements: a progress ring, coloured shelves and medals ---------- */
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
.ach-hero { display: flex; align-items: center; gap: 22px; padding: 6px 6px 14px; margin-bottom: 4px; border-bottom: 1px solid rgba(255, 226, 160, 0.14); }
.ach-ring { --p: 0; flex: none; width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: conic-gradient(from -90deg, #ffe9a8, #ffd36b calc(var(--p) * 0.5%), #f29b40 calc(var(--p) * 1%), rgba(255, 255, 255, 0.09) 0);
  box-shadow: 0 0 26px rgba(255, 211, 107, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.06); animation: achRing 1.1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes achRing { from { --p: 0; } }
.ach-ring > div { position: absolute; inset: 9px; border-radius: 50%; display: grid; place-content: center; text-align: center; line-height: 1;
  background: radial-gradient(circle at 40% 30%, rgba(40, 54, 104, 1), rgba(12, 18, 42, 1) 75%); box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5); }
.ach-ring b { font-size: 34px; color: var(--gold); text-shadow: 0 0 14px rgba(255, 211, 107, 0.5); }
.ach-ring span { font-size: 13px; color: var(--ink-soft); margin-top: 3px; }
.ach-hero-txt { min-width: 0; }
.ach-hero h2 { text-align: left; }
.ach-hero p { margin: 6px 0 8px; color: var(--ink-soft); }
.ach-hero-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ach-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 10px; border-radius: 999px; font-weight: 800; font-size: 14px;
  background: rgba(69, 168, 255, 0.14); border: 1px solid rgba(159, 240, 255, 0.35); color: #cfefff; }
.ach-pill .drop-icon { width: 11px; height: 14px; }
.ach-pill.soft { background: rgba(0, 0, 0, 0.25); border-color: rgba(255, 255, 255, 0.1); color: var(--ink-soft); }
.ach-shelf { margin-top: 14px; }
.ach-shelf h3 { display: flex; align-items: center; gap: 10px; font-size: 17px; color: rgb(var(--h)); letter-spacing: 0.3px; }
.ach-shelf h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(var(--h), 0.45), rgba(var(--h), 0)); order: 1; }
.ach-shelf h3 small { order: 2; font-size: 13px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: rgba(var(--h), 0.12); border: 1px solid rgba(var(--h), 0.3); }
.ach-shelf.full h3 small { color: #1a1406; background: rgb(var(--h)); }
.ach-panel .ach-grid { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.ach-card { position: relative; display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 9px 12px 9px 10px; border-radius: 18px; overflow: hidden;
  background: rgba(0, 0, 0, 0.24); border: 1.5px solid rgba(255, 255, 255, 0.06); color: var(--ink-soft); animation: achIn 0.45s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(var(--i) * 18ms); }
@keyframes achIn { from { opacity: 0; transform: translateY(8px); } }
.ach-card.got { color: var(--ink); background: linear-gradient(135deg, rgba(var(--h), 0.18), rgba(var(--h), 0.04) 70%); border-color: rgba(var(--h), 0.42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.ach-card.got::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.12) 50%, transparent 60%);
  transform: translateX(-100%); animation: achShine 7s ease-in-out infinite; animation-delay: calc(var(--i) * 0.31s); }
@keyframes achShine { 0%, 78% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.medal { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: rgba(0, 0, 0, 0.3); border: 2px dashed rgba(255, 255, 255, 0.16); }
.medal i { font-style: normal; font-size: 22px; line-height: 1; color: rgba(255, 255, 255, 0.28); }
.got .medal { border: 2px solid rgba(255, 244, 214, 0.85);
  background: radial-gradient(circle at 34% 28%, #fff 0, rgb(var(--h)) 42%, rgba(var(--h), 0.55) 100%);
  box-shadow: 0 0 0 3px rgba(var(--h), 0.22), 0 0 16px rgba(var(--h), 0.55), inset 0 -4px 8px rgba(0, 0, 0, 0.25); }
.got .medal i { color: #1b1530; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }
.ach-txt { min-width: 0; text-align: left; }
.ach-txt b { display: block; font-size: 16px; line-height: 1.2; }
.got .ach-txt b { color: rgb(var(--h)); }
.ach-txt small { display: block; font-size: 13.5px; line-height: 1.25; margin-top: 1px; }
.ach-txt em { display: block; font-style: normal; font-size: 12px; margin-top: 3px; color: rgba(var(--h), 0.85); }
.ach-chip { font-weight: 800; font-size: 13px; padding: 3px 8px; border-radius: 999px; color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.06); }
.got .ach-chip { width: 24px; height: 24px; padding: 0; display: grid; place-items: center; color: #1d3a14; background: linear-gradient(180deg, #c8f7a0, #7fd35a); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); }
.ach-panel .btn-row .ico { margin-right: 6px; }
body.reduce-motion .ach-ring, body.reduce-motion .ach-card, body.reduce-motion .ach-card.got::after { animation: none; }

/* A realm's finale: its little ending, told under the score */
.realm-ending {
  margin: 10px auto 4px; max-width: 520px; padding: 10px 14px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 211, 107, 0.16), rgba(200, 170, 255, 0.14));
  border: 1px solid rgba(255, 211, 107, 0.45); text-align: center;
}
.realm-ending p { margin: 0 0 6px; font-style: italic; line-height: 1.4; }
.realm-ending b { color: var(--gold); }

/* ---------- boutique ---------- */
.panel.boutique { width: min(900px, var(--room-w)); max-width: none; }
.bq { display: grid; grid-template-columns: minmax(200px, 250px) 1fr; gap: 16px; margin-top: 6px; text-align: left; }
.bq-stage { display: flex; flex-direction: column; gap: 8px; }
.bq-pip-wrap { border-radius: 20px; background: radial-gradient(70% 60% at 50% 45%, rgba(255, 226, 160, 0.2), rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, rgba(60, 90, 150, 0.5), rgba(20, 30, 70, 0.6)); border: 1.5px solid rgba(255, 226, 160, 0.3); display: grid; place-items: center; }
.bq-pip { width: 200px; height: 190px; max-width: 100%; }
.bq-info { min-height: 120px; }
.bq-tag { display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #1a1430; background: var(--rc); border-radius: 999px; padding: 1px 10px; }
.bq-name { font-weight: 800; font-size: 21px; line-height: 1.15; margin-top: 4px; }
.bq-desc { margin: 2px 0 8px; font-size: 15px; color: var(--ink-soft); line-height: 1.3; }
.bq-buy { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bq-buy .btn { min-height: 46px; font-size: 17px; padding-inline: 18px; }
.bq-buy .btn.small { font-size: 14px; min-height: 40px; padding-inline: 12px; }
.bq-buy .drop-icon, .bq-card .drop-icon { width: 12px; height: 15px; vertical-align: -2px; }
.bq-shelf { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.bq-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.bq-tabs::-webkit-scrollbar { display: none; }
.bq-items { max-height: min(52vh, 420px); overflow-y: auto; padding: 2px 4px 6px 2px; overscroll-behavior: contain; }
.bq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 9px; }
.bq-grid.swatches { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 7px; }
.bq-card {
  font-family: var(--font); color: var(--ink); position: relative; cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.1); border-top: 3px solid var(--rc); border-radius: 14px;
  background: rgba(255, 255, 255, 0.05); padding: 6px 4px 5px; display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.bq-card canvas { width: 100px; max-width: 100%; height: auto; aspect-ratio: 100 / 84; }
.bq-card .name { font-weight: 800; font-size: 14px; line-height: 1.1; text-align: center; }
.bq-card .cost { font-size: 13px; color: var(--ink-soft); }
.bq-card.own .cost { color: #9ff0dc; }
.bq-card.on { background: rgba(255, 211, 107, 0.13); border-color: rgba(255, 211, 107, 0.7); border-top-color: var(--rc); }
.bq-card.on .cost { color: var(--gold); font-weight: 800; }
.bq-card.sel { outline: 3px solid #9ff0ff; outline-offset: 1px; }
.bq-card.cant { opacity: 0.62; }
.bq-card:focus-visible { outline: 3px solid #9ff0ff; outline-offset: 2px; }
.bq-card .sw { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 45%), var(--sw); border: 2px solid rgba(255, 255, 255, 0.5); margin: 3px 0 2px; }
.bq-h { margin: 10px 0 5px; font-size: 16px; color: var(--gold); }
.bq-h:first-of-type { margin-top: 6px; }
.bq-build-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; font-size: 15px; color: var(--ink-soft); }
.bq-note, .bq-foot { text-align: center; font-size: 14px; color: var(--ink-soft); margin: 8px 0 0; }
@media (max-height: 460px) {
  .bq-pip { width: 150px; height: 142px; }
  .bq-items { max-height: 52vh; }
  .bq-info { min-height: 0; }
}
body.narrow .bq { grid-template-columns: 1fr; gap: 10px; }
body.narrow .bq-stage { flex-direction: row; align-items: center; }
body.narrow .bq-pip-wrap { flex: none; }
body.narrow .bq-pip { width: 130px; height: 124px; }
body.narrow .bq-info { min-height: 0; flex: 1; min-width: 0; }
body.narrow .bq-name { font-size: 18px; }
body.narrow .bq-items { max-height: 40vh; }
body.narrow .bq-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 7px; }
body.narrow .bq-grid.swatches { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }

/* ---------- home: Pip's glade ---------- */
/* The screen fills #ui but lets taps through everywhere except its buttons, so Pip (drawn on the
   canvas in the .home-pip gap) can still be booped. */
.screen.home {
  pointer-events: none; width: 100%; height: 100%; max-width: 1180px;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; align-items: stretch; gap: 4px;
  animation: homeIn 0.45s ease-out;
}
@keyframes homeIn { from { opacity: 0; } to { opacity: 1; } }
.home button, .home .bubble, .home input { pointer-events: auto; }
.home-banner { display: flex; flex-direction: column; align-items: center; }
.home .logo { font-size: clamp(42px, min(11vh, 17vw), 104px); }
.home .subtitle {
  position: relative; margin-top: 2px; padding: 2px 26px 4px; font-size: clamp(13px, 2.3vh, 18px); font-weight: 700;
  color: #fff4d6; text-shadow: 0 1px 0 #1d5a50; letter-spacing: 0.04em;
  background: linear-gradient(180deg, #4cc2a4, #2c8f80);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%, 12px 50%);
}

.home-stage {
  width: 100%; min-height: 0; display: grid; align-items: center; justify-items: center;
  grid-template-columns: 1fr minmax(250px, 1.15fr) 1fr; grid-template-rows: 1fr 1fr;
  grid-template-areas: "pond mid tent" "glass mid trophy";
  --lm-h: clamp(52px, 15vh, 120px);
}
.lm-pond { grid-area: pond; } .lm-glass { grid-area: glass; } .lm-tent { grid-area: tent; } .lm-trophy { grid-area: trophy; }
.home-mid { grid-area: mid; align-self: stretch; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.home-pip { flex: 1 1 auto; min-height: 96px; width: 100%; pointer-events: none; }

/* Pip's speech bubble */
.bubble {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px;
  max-width: min(340px, 92vw); padding: 9px 18px 7px; border-radius: 22px; text-align: center;
  background: linear-gradient(180deg, #fffaf0, #fff0d8); color: #5a3a48;
  box-shadow: 0 0 0 3px #e8c48c, 0 7px 0 -1px rgba(60, 30, 10, 0.25), 0 14px 26px rgba(0, 0, 0, 0.38);
  animation: bubbleIn 0.5s cubic-bezier(.3, 1.6, .5, 1) both 0.15s;
  transform-origin: 50% 110%;
}
.bubble::after {
  content: ""; position: absolute; left: 50%; bottom: -14px; width: 26px; height: 16px; margin-left: -13px;
  background: #fff0d8; clip-path: polygon(0 0, 100% 0, 45% 100%);
}
@keyframes bubbleIn { from { opacity: 0; transform: scale(0.6) translateY(10px); } to { opacity: 1; transform: none; } }
.bubble .hi { font-size: clamp(13px, 2.1vh, 16px); font-weight: 700; color: #9a6a7a; }
.bubble .who { font-size: clamp(22px, 4.2vh, 34px); font-weight: 800; line-height: 1.05; color: #e0628a; text-shadow: 0 2px 0 #ffd6e4; overflow-wrap: anywhere; }
.bubble .line { font-size: clamp(12.5px, 1.9vh, 15px); color: #6e5060; line-height: 1.25; }
.bubble .notme {
  appearance: none; border: 0; background: none; font: inherit; cursor: pointer;
  margin-top: 1px; padding: 4px 8px; font-size: 12.5px; font-weight: 700; color: #2f8c86;
  text-decoration: underline dotted 1.5px; text-underline-offset: 3px; border-radius: 8px;
}
.bubble .notme:hover { color: #1f6c68; }
.bubble .notme:focus-visible { outline: 3px solid #4cc2b0; }
.bubble.ask { gap: 4px; }
.name-in {
  width: min(250px, 70vw); margin: 2px 0; padding: 7px 12px; border-radius: 14px; border: 2px solid #e8c48c;
  background: #fff; color: #4a2f3c; font: inherit; font-size: 20px; font-weight: 800; text-align: center; outline: none;
  -webkit-user-select: text; user-select: text;
}
.name-in:focus { border-color: #4cc2b0; box-shadow: 0 0 0 3px rgba(76, 194, 176, 0.3); }
.name-in::placeholder { color: #c9aab4; font-weight: 600; }
.ask-row { display: flex; align-items: center; gap: 8px; }
.bubble .btn.small { min-height: 40px; font-size: 16px; }
.bubble.nudge { animation: nudge 0.35s; }
@keyframes nudge { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* the big way in */
.btn.home-go { min-height: 60px; padding-inline: 26px; font-size: clamp(20px, 3.4vh, 26px); animation: breathe 3.6s ease-in-out infinite; }
.btn.home-go .ico { width: 1.25em; height: 1.25em; }
.home-go > span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.home-go small { font-size: 0.5em; font-weight: 700; opacity: 0.85; margin-top: 3px; white-space: nowrap; }

/* landmarks */
.lm {
  appearance: none; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; padding: 4px 6px;
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0;
  -webkit-tap-highlight-color: transparent; transition: transform 0.22s cubic-bezier(.3, 1.5, .5, 1);
}
.lm::before {
  content: ""; position: absolute; left: 50%; top: 40%; width: 150%; height: 90%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 220, 140, 0.32), rgba(255, 220, 140, 0)); opacity: 0; transition: opacity 0.25s; pointer-events: none;
}
.lm:hover, .lm:focus-visible { transform: translateY(-5px); }
.lm:hover::before, .lm:focus-visible::before { opacity: 1; }
.lm:active { transform: translateY(1px) scale(0.97); }
.lm:focus-visible { outline: none; }
.lm:focus-visible .plaque { outline: 3px solid #9ff0ff; outline-offset: 3px; }
.lm-art svg { display: block; height: var(--lm-h); width: auto; overflow: visible; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45)); }
.lm-art { margin-bottom: -6px; position: relative; }

.plaque, .sign {
  position: relative; color: #fff4d6; text-shadow: 0 2px 0 #3e2410;
  background:
    repeating-linear-gradient(176deg, rgba(255, 255, 255, 0) 0 7px, rgba(60, 30, 10, 0.12) 7px 8px),
    linear-gradient(180deg, #b07a44, #85552c 60%, #6c4220);
  border: 2px solid #3e2410; border-radius: 11px;
  box-shadow: inset 0 2px 0 rgba(255, 224, 170, 0.4), inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 4px 0 #2c180a, 0 9px 14px rgba(0, 0, 0, 0.4);
}
.plaque { display: flex; flex-direction: column; align-items: center; padding: 4px 18px 5px; line-height: 1.05; }
.plaque::before, .plaque::after {
  content: ""; position: absolute; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe6a8, #8a6a3a); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.plaque::before { left: 6px; } .plaque::after { right: 6px; }
.plaque b { font-size: clamp(14px, 2.4vh, 19px); font-weight: 800; white-space: nowrap; }
.plaque small { font-size: clamp(11px, 1.7vh, 13px); font-weight: 700; color: #ffdf9e; white-space: nowrap; }

.home-signs { align-self: end; margin-top: 6px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; padding-bottom: 2px; }
.sign {
  appearance: none; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  min-height: 42px; padding: 5px 14px; font-size: clamp(13px, 2vh, 15px); font-weight: 800;
  transition: transform 0.18s, filter 0.18s; transform: rotate(var(--tilt, 0deg));
}
.sign:nth-child(1) { --tilt: -2deg; } .sign:nth-child(3) { --tilt: 2deg; }
.sign .ico { width: 1.1em; height: 1.1em; color: #ffe6a8; }
.sign:hover { filter: brightness(1.1); transform: rotate(0deg) translateY(-2px); }
.sign:active { transform: translateY(2px); }
.sign:focus-visible { outline: 3px solid #9ff0ff; outline-offset: 3px; }

/* little lives for each landmark */
.lm-pond .ring { transform-box: fill-box; transform-origin: center; animation: hmRing 3.2s ease-out infinite; }
.lm-pond .ring.r2 { animation-delay: 1.6s; }
@keyframes hmRing { from { transform: scale(0.4); opacity: 0.9; } to { transform: scale(2.6); opacity: 0; } }
.lm-pond .inf { stroke-dasharray: 22 8; animation: hmFlow 2.4s linear infinite; }
@keyframes hmFlow { to { stroke-dashoffset: -60; } }
.lm-glass .stream { animation: hmFlow 0.9s linear infinite; }
.lm-glass .sand-top { transform-box: fill-box; transform-origin: 50% 100%; animation: hmSand 6s ease-in-out infinite; }
@keyframes hmSand { 50% { transform: scaleY(0.8); } }
.twinkle { transform-box: fill-box; transform-origin: center; animation: hmTwinkle 2.2s ease-in-out infinite; }
.twinkle.t2 { animation-delay: 1.1s; }
@keyframes hmTwinkle { 0%, 100% { transform: scale(0.5) rotate(0deg); opacity: 0.4; } 50% { transform: scale(1.2) rotate(45deg); opacity: 1; } }
.lm-tent .flag { transform-box: fill-box; transform-origin: 0 50%; animation: hmFlag 1.6s ease-in-out infinite; }
@keyframes hmFlag { 50% { transform: skewY(8deg) scaleX(0.85); } }
.lm-trophy .glow { transform-box: fill-box; transform-origin: center; animation: hmGlow 3s ease-in-out infinite; }
@keyframes hmGlow { 50% { transform: scale(1.15); opacity: 0.6; } }
.lm-trophy .star { animation: hmBob 3s ease-in-out infinite; }
@keyframes hmBob { 50% { transform: translateY(-3px); } }
.lm:hover .ring, .lm:focus-visible .ring { animation-duration: 1.6s; }
body.reduce-motion .home *, body.reduce-motion .screen.home { animation: none !important; }

/* tall screens: Pip and the bubble up top, the landmarks in a 2 x 2 garden below */
body.tall .home-stage {
  grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto auto;
  grid-template-areas: "mid mid" "pond tent" "glass trophy"; row-gap: 6px;
  --lm-h: clamp(40px, 7vh, 84px);
}
body.tall .home-mid { padding-bottom: 6px; }
body.narrow .plaque { padding-inline: 14px; }
body.narrow .home-signs { gap: 6px; flex-wrap: nowrap; }
body.narrow .sign { padding-inline: 9px; gap: 4px; font-size: 13px; }
body.narrow .home-mid { gap: 4px; }
@media (max-height: 460px) {
  .home .logo { font-size: clamp(34px, 10vh, 60px); }
  .home .subtitle { display: none; }
  .home-stage { --lm-h: clamp(40px, 13vh, 70px); }
  .bubble { padding: 5px 14px 4px; }
  .bubble .line { display: none; }
  .btn.home-go { min-height: 48px; }
  .sign { min-height: 36px; }
}

/* Adult/guardian online-save screen, shown only in the web build. */
.account-panel { width: min(580px, var(--room-w)); text-align: center; }
.account-note, .account-policy { font-size: 14px; }
.account-form { display: grid; gap: 12px; margin: 16px auto 8px; max-width: 440px; text-align: left; }
.account-form > label:not(.account-check) { display: grid; gap: 5px; color: var(--ink); font-weight: 750; }
.account-form input:not([type=checkbox]) { width: 100%; min-height: 46px; padding: 9px 12px; border: 1.5px solid rgba(255, 226, 160, 0.55); border-radius: 12px; background: rgba(7, 13, 32, 0.78); color: var(--ink); font: inherit; }
.account-form input:focus-visible { outline: 3px solid #9ff0ff; outline-offset: 2px; }
.account-check { display: flex; align-items: flex-start; gap: 9px; color: var(--ink-soft); font-size: 14px; line-height: 1.35; }
.account-check input { width: 19px; height: 19px; flex: none; accent-color: var(--gold); }
.account-form > .btn { width: 100%; }
.account-policy a, .policy-link { color: #9ff0ff; }
.account-status { color: var(--gold); font-weight: 800; }
.account-choice { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 12px; }
.account-choice > .btn { flex: 1 1 210px; }