:root {
  /* layout: one screen, prompt on top, stage in the middle, three big answers at the bottom */
  --sky: #E3F0F7;
  --ink: #17324D;
  --bean: #F2B632;
  --bean-edge: #C98A0E;
  --paper: #FFFFFF;
  --cover: #2F6F8F;
  --go: #D4451F;
  --good: #2E9E6B;
  --soft: #9DB7C6;
  --display: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--sky); color: var(--ink); font-family: var(--body);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  touch-action: manipulation; overflow: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 4px solid var(--ink); outline-offset: 4px; }
.screen { display: none; height: 100%; padding: 20px; flex-direction: column; align-items: center; justify-content: center; gap: 24px; text-align: center; }
.screen.active { display: flex; }
h1 { font-family: var(--display); font-weight: 600; font-size: clamp(36px, 7vw, 72px); margin: 0; text-wrap: balance; }
.note { font-size: 16px; max-width: 46ch; line-height: 1.5; margin: 0; color: #3F5B73; }

.big-go {
  font-family: var(--display); font-weight: 600; font-size: clamp(32px, 6vw, 56px);
  background: var(--go); color: #fff; border-radius: 999px; padding: 24px 64px;
  box-shadow: 0 8px 0 #9E3013;
}
.big-go:active { transform: translateY(4px); box-shadow: 0 4px 0 #9E3013; }
.big-go:disabled { opacity: .6; }

.tiles { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; width: 100%; }
.tile {
  background: var(--paper); border-radius: 32px; padding: 24px; width: min(42vw, 360px); min-width: 240px;
  min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  box-shadow: 0 8px 0 var(--soft);
}
.tile:active { transform: translateY(4px); box-shadow: 0 4px 0 var(--soft); }
.tile .name { font-family: var(--display); font-weight: 500; font-size: 28px; }
.pic { display: flex; gap: 10px; align-items: center; justify-content: center; }
.pic .mini { font-family: var(--display); font-weight: 600; font-size: 40px; background: var(--sky); border-radius: 14px; width: 64px; height: 76px; display: grid; place-items: center; }
.pic .mini.q { background: var(--bean); }
.pic .b { width: 40px; height: 40px; }

#play { justify-content: space-between; padding: 16px 20px 24px; }
.top { width: 100%; display: flex; align-items: center; gap: 16px; min-height: 72px; padding-right: 44px; }
.again {
  flex: none; width: 72px; height: 72px; border-radius: 50%; background: var(--paper);
  display: grid; place-items: center; box-shadow: 0 5px 0 var(--soft);
}
.again:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--soft); }
.again svg { width: 36px; height: 36px; }
.caption { flex: 1; text-align: left; font-size: 18px; color: #3F5B73; min-height: 1.4em; }
.dots { flex: none; display: flex; gap: 8px; }
.dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--soft); opacity: .5; }
.dots i.done { background: var(--good); opacity: 1; }
.dots i.now { background: var(--ink); opacity: 1; }

.stage { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }
.card {
  font-family: var(--display); font-weight: 600; font-size: clamp(56px, 11vw, 120px); font-variant-numeric: tabular-nums;
  background: var(--paper); border-radius: 28px; min-width: 1.9em; padding: 0 .25em; height: 1.7em;
  display: grid; place-items: center; box-shadow: 0 8px 0 var(--soft);
  opacity: 0; transform: scale(.6); transition: opacity .25s, transform .25s;
}
.card.in { opacity: 1; transform: none; }
.card.q { background: var(--bean); box-shadow: 0 8px 0 var(--bean-edge); }
.card.good { background: var(--good); color: #fff; box-shadow: 0 8px 0 #1F7450; }

.bean {
  width: clamp(40px, 7vw, 72px); height: clamp(40px, 7vw, 72px); border-radius: 50%;
  background: var(--bean); border: 4px solid var(--bean-edge);
  opacity: 0; transform: translateY(-40px) scale(.6); transition: opacity .25s, transform .3s;
}
.bean.in { opacity: 1; transform: none; }
.bean.glow { box-shadow: 0 0 0 8px rgba(46,158,107,.45); }
.b { border-radius: 50%; background: var(--bean); border: 3px solid var(--bean-edge); display: inline-block; }
.tray {
  position: relative; overflow: hidden; background: var(--paper); border-radius: 28px; padding: 24px;
  width: min(56vw, 440px); min-height: clamp(150px, 26vw, 230px);
  display: flex; flex-wrap: wrap; gap: 14px; align-content: center; justify-content: center;
  box-shadow: 0 8px 0 var(--soft);
}
.cover {
  position: absolute; inset: 0; background: var(--cover); border-radius: 28px;
  transform: translateY(-105%); transition: transform .5s;
  background-image: radial-gradient(rgba(255,255,255,.18) 6px, transparent 7px); background-size: 44px 44px;
}
.cover.down { transform: none; }
.extra { display: flex; gap: 14px; min-width: clamp(100px, 18vw, 170px); justify-content: center; }

.answers { width: 100%; display: flex; gap: 20px; justify-content: center; }
.ans {
  font-family: var(--display); font-weight: 600; font-size: clamp(48px, 9vw, 96px); font-variant-numeric: tabular-nums;
  flex: 1; max-width: 240px; min-height: clamp(110px, 18vw, 170px); border-radius: 32px;
  background: var(--ink); color: #fff; box-shadow: 0 8px 0 #0B1C2D; transition: opacity .2s, background .2s;
}
.ans:active { transform: translateY(4px); box-shadow: 0 4px 0 #0B1C2D; }
.ans:disabled { opacity: .35; }
.ans.no { opacity: .2; }
.ans.saying, .ans.glow { background: var(--go); box-shadow: 0 8px 0 #9E3013; opacity: 1; }
.ans.yes { background: var(--good); box-shadow: 0 8px 0 #1F7450; opacity: 1; }

.star { width: clamp(120px, 26vw, 220px); height: auto; }
@keyframes bob { 50% { transform: translateY(-14px) rotate(6deg); } }
#done .star { animation: bob 1.6s ease-in-out infinite; }

.grown {
  position: fixed; top: calc(10px + env(safe-area-inset-top)); right: calc(10px + env(safe-area-inset-right));
  width: 44px; height: 44px; border-radius: 50%; background: transparent; display: grid; place-items: center; z-index: 5;
}
.grown span { width: 12px; height: 12px; border-radius: 50%; background: var(--soft); }
#parent {
  position: fixed; inset: 0; background: var(--paper); z-index: 10; display: none; overflow: auto;
  padding: 24px; text-align: left; -webkit-user-select: text; user-select: text;
}
#parent.open { display: block; }
#parent .wrap { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
#parent h2 { font-family: var(--display); font-weight: 600; font-size: 28px; margin: 0; }
#parent p { margin: 0; line-height: 1.5; }
.tw { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #D6E2EA; font-size: 16px; }
th { font-weight: 700; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 14px; font-weight: 700; }
.pill.ok { background: #DDF3E8; color: #1F7450; }
.pill.mid { background: #FBE9C3; color: #7A5200; }
.pill.low { background: #F8D9CF; color: #9E3013; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn { background: var(--ink); color: #fff; border-radius: 12px; padding: 12px 18px; font-weight: 700; font-size: 16px; }
.btn.alt { background: var(--sky); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .card, .bean, .cover { transition: none; }
  #done .star { animation: none; }
}