/* HTML UI layer over the canvas. The canvas keeps only the 3D machine, claw and pets. */
#ui {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  display: grid;
  grid-template: "tl tl tr" auto "book main tr" minmax(0, 1fr) "book dock dock" auto / auto minmax(0, 1fr) auto;
  gap: 0.5em 1em;
  padding: 0.8em 1em 0.6em;
  --u: clamp(12px, 2.3vmin, 24px); /* base font size, em-independent */
  --bw: calc(var(--u) * 0.23); /* border width: every pill, panel, button, card */
  --bw-sm: calc(var(--u) * 0.12); /* border width: small badges (sticker faces, labels, counts) */
  font: 800 var(--u) / 1.2 "Baloo 2", "Nunito", "Quicksand", "Arial Rounded MT Bold", "Trebuchet MS", ui-rounded, system-ui, "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  color: #4f2a86;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  --banner-a: #e5127f;
  --banner-b: #7a1fd1;
}
:where(#ui button) {
  font: inherit;
  color: inherit;
  border: 0;
  padding: 0;
  cursor: pointer;
  touch-action: none;
  pointer-events: auto;
}

/* Before the child starts: only the theme switch and the start card show (hidden, not removed, so the grid does not shift). */
#stock, #book, .tr, #dock { transition: opacity 0.3s, visibility 0.3s; }
#ui:not(.started) :is(#stock, #book, .tr, #dock) { opacity: 0; visibility: hidden; }

/* ── pills ── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.25em 0.9em;
  border: var(--bw) solid #fff;
  border-radius: 99em;
  background: linear-gradient(180deg, var(--a), var(--b));
  color: #fff;
  box-shadow: 0 0.25em 0.7em rgba(30, 30, 80, 0.35), inset 0 0.25em 0 rgba(255, 255, 255, 0.35);
  paint-order: stroke fill;
  -webkit-text-stroke: 0.2em var(--stroke);
  white-space: nowrap;
}
.tl {
  grid-area: tl;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5em;
}
.tl-row {
  display: flex;
  align-items: center;
  gap: 0.6em;
}
#stock {
  --a: #a6e0ff;
  --b: #5fb4ff;
  --stroke: #25679f;
  font-size: 1.25em;
}
#theme {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: var(--bw) solid #fff;
  border-radius: 99em;
  background: #fff;
  box-shadow: 0 0.2em 0.6em rgba(0, 0, 0, 0.3);
  font-size: 0.9em;
}
#theme .opt {
  position: relative;
  z-index: 1;
  grid-row: 1;
  padding: 0.35em 0.9em;
  text-align: center;
  white-space: nowrap;
  transition: color 0.25s;
}
#theme .girl { grid-column: 1; color: #fff; }
#theme .boy { grid-column: 2; color: #2563eb; }
#theme .knob {
  grid-area: 1 / 1;
  border-radius: 99em;
  background: linear-gradient(180deg, #ff4fa0, #d41470);
  box-shadow: 0 0.15em 0.4em rgba(0, 0, 0, 0.3);
  transition: transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1), background 0.25s;
}
#theme[data-theme="boy"] .knob { transform: translateX(100%); background: linear-gradient(180deg, #2563eb, #1d4ed8); }
#theme[data-theme="boy"] .girl { color: #ff4fa0; }
#theme[data-theme="boy"] .boy { color: #fff; }

/* ── top right: stars, hearts, hint ── */
.tr {
  grid-area: tr;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5em;
  max-width: 45vw;
}
.panel {
  position: relative;
  display: flex;
  align-items: center;
  border: var(--bw) solid var(--bd);
  border-radius: 99em;
  background: linear-gradient(180deg, var(--p1), var(--p2));
  box-shadow: 0 0.25em 0.7em var(--sh), inset 0 0.25em 0 rgba(255, 255, 255, 0.6);
}
#stars {
  --bd: #ffc933;
  --p1: #fffbe2;
  --p2: #ffe79a;
  --sh: rgba(150, 90, 0, 0.3);
  gap: 0.4em;
  padding: 0.15em 0.9em 0.15em 0.6em;
  font-size: 1.6em;
  color: #ff8a00;
  -webkit-text-stroke: 0.22em #fff;
  paint-order: stroke fill;
}
#stars .num { min-width: 1.2em; text-align: right; font-weight: 900; }
#stars .icon { -webkit-text-stroke: 0; }
#stars.pop { animation: pop 0.6s ease-out; }
.plus {
  position: absolute;
  left: 0.6em;
  top: -0.2em;
  font-size: 0.9em;
  font-weight: 900;
  animation: floatup 0.9s ease-out forwards;
}
#hearts {
  --bd: #ff8fb8;
  --p1: #fff6fb;
  --p2: #ffd9ea;
  --sh: rgba(150, 30, 80, 0.25);
  padding: 0.25em 0.6em;
  gap: 0.05em;
  font-size: 1.4em;
}
.heart { display: inline-block; font-size: 1em; filter: drop-shadow(0 0.1em 0.1em rgba(200, 30, 90, 0.35)); }
.heart.empty { filter: grayscale(1) opacity(0.35); }
.heart.fill { animation: pop 0.55s ease-out; }
.heart.lose { animation: lose 0.6s ease-out; }
#hint {
  max-width: 100%;
  padding: 0.45em 1em;
  border: var(--bw) solid #8f5bd6;
  border-radius: 1.2em;
  background: #fff;
  font-size: 1.2em;
  text-align: center;
  box-shadow: 0 0.3em 0.9em rgba(70, 30, 120, 0.45);
  transition: opacity 0.2s;
}
#hint.pop { animation: pop 0.35s ease-out; }
#hint.hide { opacity: 0; }

/* ── sticker book ── */
#book {
  grid-area: book;
  align-self: start;
  max-height: 100%;
  padding: 0.5em;
  border: var(--bw) solid #b88cff;
  border-radius: 1.4em;
  background: linear-gradient(180deg, #fff, #f1e9ff);
  box-shadow: 0 0.4em 1em rgba(70, 30, 120, 0.4);
  overflow-y: auto;
  pointer-events: auto;
  scrollbar-width: none;
}
#book .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5em;
}
.sticker {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.7em;
}
.sticker .face {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  border: var(--bw-sm) solid var(--bd, #c9a8ff);
  background: var(--bg, #d7c3ff);
  font-size: 1.5em;
  color: #fff;
  box-shadow: 0 0.12em 0.3em rgba(70, 30, 120, 0.3);
}
.sticker.caught .face { background: #fff; }
.sticker .face .q { -webkit-text-stroke: 0.1em rgba(0, 0, 0, 0.15); paint-order: stroke fill; animation: wave 2s ease-in-out infinite; }
.sticker .face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.sticker .cnt {
  position: absolute;
  right: -0.35em;
  bottom: -0.25em;
  min-width: 1.2em;
  padding: 0 0.25em;
  border-radius: 99em;
  background: #ff4f98;
  border: var(--bw-sm) solid #fff;
  color: #fff;
  font-size: 0.55em;
  text-align: center;
}
.sticker.glow .face { animation: pop 0.8s ease-out; box-shadow: 0 0 0.9em 0.3em #ffe066; }

/* ── banner ── */
#banner {
  grid-area: main;
  place-self: start center;
  position: relative;
  display: none;
  align-items: center;
  gap: 0.6em;
  padding: 0.3em 1.4em 0.3em 0.5em;
  border: var(--bw) solid #fff;
  border-radius: 99em;
  background: linear-gradient(90deg, var(--banner-a), var(--banner-b));
  color: #fff;
  font-size: 1.9em;
  font-weight: 900;
  paint-order: stroke fill;
  -webkit-text-stroke: 0.2em #2a0a4a;
  box-shadow: 0 0.3em 1em rgba(40, 5, 70, 0.6);
  white-space: nowrap;
}
#banner.show { display: flex; animation: bannerIn 0.5s ease-out; }
#banner.out { animation: bannerOut 0.5s ease-in forwards; }
#banner .face {
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: #fff;
  -webkit-text-stroke: 0;
}
#banner .new {
  position: absolute;
  left: -0.3em;
  top: -0.6em;
  padding: 0 0.5em;
  border-radius: 99em;
  background: #ffd23f;
  color: #c2410c;
  font-size: 0.5em;
  -webkit-text-stroke: 0;
  transform: rotate(-12deg);
}

/* ── start card ── */
#card {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: min(30em, 90vw);
  box-sizing: border-box;
  padding: 1.1em 1em 0.9em;
  border: var(--bw) solid #fff;
  border-radius: 1.8em;
  background: linear-gradient(180deg, rgba(255, 246, 252, 0.72), rgba(214, 238, 255, 0.72));
  text-align: center;
  box-shadow: 0 0.5em 1.4em rgba(70, 30, 120, 0.4);
  animation: cardIn 0.55s ease-out;
}
#card.out { animation: cardOut 0.4s ease-in forwards; }
#card h1 {
  margin: 0;
  font-size: 2.2em;
  color: #ff4f98;
  -webkit-text-stroke: 0.2em #fff;
  paint-order: stroke fill;
}
#card p { margin: 0.2em 0 0.4em; font-size: 1.2em; }
#card .pets { font-size: 1.8em; letter-spacing: 0.1em; }
#card .pets span { display: inline-block; animation: hop 1.2s ease-in-out infinite; animation-delay: calc(var(--i) * -0.14s); }
#start {
  margin: 0.5em 0 0.3em;
  padding: 0.35em 1.4em;
  border: var(--bw) solid #fff;
  border-radius: 99em;
  background: linear-gradient(180deg, #ff7a7a, #e0243a);
  color: #fff;
  font-size: 1.5em;
  font-weight: 900;
  -webkit-text-stroke: 0.12em #8f1226;
  paint-order: stroke fill;
  box-shadow: 0 0.2em 0.7em rgba(150, 10, 30, 0.5);
  animation: pulse 1s ease-in-out infinite;
}
#card small { display: block; font-size: 1em; opacity: 0.8; animation: blink 1.6s ease-in-out infinite; }

/* ── control dock ── */
#pad {
  display: grid;
  grid-template: ". up ." auto "left drop right" auto ". down ." auto / auto auto auto;
  place-items: center;
  gap: 0.35em;
}
#dock {
  grid-area: dock;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0.9em;
}
.ctl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
}
.ctl .cap {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.7em;
  height: 2.7em;
  border-radius: 50%;
  border: var(--bw) solid #fff;
  background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--c) 55%, #fff), var(--c) 65%);
  color: #fff;
  font-size: 1.25em;
  line-height: 1;
  -webkit-text-stroke: 0.08em var(--d);
  paint-order: stroke fill;
  box-shadow: 0 0.35em 0 var(--d), 0 0.7em 0.9em rgba(0, 0, 0, 0.35);
  transition: transform 0.06s, box-shadow 0.06s;
}
.ctl .cap > * { pointer-events: none; }
.ctl.down .cap,
.ctl .cap:active {
  transform: translateY(0.3em);
  box-shadow: 0 0.05em 0 var(--d), 0 0.2em 0.4em rgba(0, 0, 0, 0.35);
  filter: brightness(1.15);
}
.ctl.dir { --c: #3fd1b5; --d: #0f7a67; }
.ctl.up { grid-area: up; }
.ctl.left { grid-area: left; }
.ctl.right { grid-area: right; }
.ctl.south { grid-area: down; }
.ctl.drop { --c: #ff3d3d; --d: #a3121f; grid-area: drop; }
.ctl.drop .cap { width: 3.4em; height: 3.4em; }
.ctl.drop.ready .cap { animation: pulse 0.9s ease-in-out infinite; }
.ctl.music { --c: #ff9fcf; --d: #b0206b; }
.ctl.music .cap { width: 2.2em; height: 2.2em; font-size: 1em; }
.ctl.music.off .cap { filter: grayscale(0.8); }
/* ── portrait / narrow ── */
@media (max-aspect-ratio: 5/4) {
  #ui { grid-template: "tl tr" auto "book book" auto "main main" minmax(0, 1fr) "dock dock" auto / minmax(0, 1fr) auto; }
  #stock { font-size: 1em; }
  .tr { max-width: 60vw; }
  .tr #stars { font-size: 1.3em; }
  .tr #hearts { font-size: 1.1em; }
  #book { max-height: 45vh; }
  #book .grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    justify-content: space-between;
  }
}
  
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes lose { 0% { transform: scale(1); } 40% { transform: scale(1.5); opacity: 0.4; } 100% { transform: scale(1); } }
@keyframes floatup { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-1.6em); opacity: 0; } }
@keyframes wave { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes bannerIn { from { transform: scale(0.2); opacity: 0; } 60% { transform: scale(1.08); } to { transform: scale(1); opacity: 1; } }
@keyframes bannerOut { to { transform: scale(0.6); opacity: 0; } }
@keyframes cardIn { from { transform: scale(0.3); opacity: 0; } 70% { transform: scale(1.06); } to { transform: scale(1); opacity: 1; } }
@keyframes cardOut { to { transform: scale(1.25); opacity: 0; } }
@keyframes hop { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-0.3em); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes blink { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* Skip: shown while the camera rides the train; back to the claw view. Right edge, below the stars/hearts. */
#skip {
  position: absolute;
  right: 1em;
  top: 42%;
  padding: 0.5em 1.1em;
  border: var(--bw) solid #fff;
  border-radius: 99em;
  background: linear-gradient(180deg, #ffb347, #ff7a1a);
  color: #fff;
  box-shadow: 0 0.2em 0.6em rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
#skip.show { opacity: 1; visibility: visible; }