:root {
  --pink: #ff7eb6;
  --deep-pink: #e84a94;
  --lilac: #b79cff;
  --ink: #5b3a7a;
  --card: #ffffff;
  --gold: #ffcf3f;
}
* { box-sizing: border-box; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none;
  font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, #ffd6ec 0%, #e6d9ff 55%, #cfeaff 100%);
  -webkit-user-select: none; user-select: none;
}
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }

.screen { position: fixed; inset: 0; display: none; }
.screen.on { display: flex; }

.round {
  width: 60px; height: 60px; border-radius: 50%; background: var(--card); font-size: 30px;
  box-shadow: 0 4px 0 rgba(91, 58, 122, .18); flex: none;
}
.round:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(91, 58, 122, .18); }

/* ---------- map ---------- */

#map { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; background: #4fb7ef; }
#world { position: relative; height: 100%; flex: none; }
#world > img { height: 100%; width: auto; display: block; pointer-events: none; }
.node {
  position: absolute; width: 3.8vh; height: 3.8vh; transform: translate(-50%, -50%); border-radius: 50%;
  font-size: 1.9vh; font-weight: 800; color: #fff; background: #4f8bf0;
  border: .4vh solid #fff; box-shadow: 0 .4vh 0 rgba(0, 0, 0, .25);
}
/* the painted buttons are small and close together: only the next level is big */
/* each game has its colour: letters pink, numbers blue, plants green */
.node.letters { --game: var(--pink); }
.node.numbers { --game: #4f8bf0; }
.node.plants { --game: #3fb950; }
.node { background: var(--game, #4f8bf0); }
.node.open { width: 6vh; height: 6vh; font-size: 3vh; z-index: 1; animation: pulse 1.4s ease-in-out infinite; }
.node.done { border-color: var(--gold); }
.node.done::after { content: "⭐"; position: absolute; right: -1.4vh; top: -1.6vh; font-size: 2vh; }
.node.locked { width: 2.8vh; height: 2.8vh; font-size: 0; border-width: .3vh; opacity: .75; }
.node.soon { width: 2.8vh; height: 2.8vh; font-size: 0; border-width: .3vh; background: #9aa3ad; opacity: .6; }
#hero {
  position: absolute; font-size: 9vh; line-height: 1; transform: translate(-50%, -112%);
  transition: left 1.6s ease-in-out, top 1.6s ease-in-out; pointer-events: none;
}
#hero span { display: inline-block; animation: bob 1.6s ease-in-out infinite; }
.map-button {
  position: fixed; top: calc(env(safe-area-inset-top) + 12px); z-index: 3;
  width: 64px; height: 64px; border-radius: 50%; font-size: 36px; background: rgba(255, 255, 255, .85);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .2);
}
body:not([data-screen="map"]) .map-button { display: none; }
.map-button { -webkit-touch-callout: none; }
#flag { left: calc(env(safe-area-inset-left) + 14px); }

/* ---------- a level ---------- */

#play {
  flex-direction: column;
  padding: calc(env(safe-area-inset-top) + 12px) calc(env(safe-area-inset-right) + 16px)
           calc(env(safe-area-inset-bottom) + 16px) calc(env(safe-area-inset-left) + 16px);
}
.bar { display: flex; align-items: center; justify-content: space-between; min-height: 60px; z-index: 2; }
.stars { font-size: 30px; letter-spacing: 2px; }
.stars span { opacity: .25; filter: grayscale(1); transition: all .3s; display: inline-block; }
.stars span.won { opacity: 1; filter: none; transform: scale(1.2); }
#stage { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.pic { text-align: center; font-size: min(28vw, 15vh); line-height: 1.1; }
.pic:empty { display: none; }
.choices { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: center; justify-items: center; }
.choices.two { grid-template-columns: 1fr; }
.choice {
  position: relative; width: min(42vw, 30vh); aspect-ratio: 1; border-radius: 34px; background: var(--card);
  box-shadow: 0 8px 0 rgba(91, 58, 122, .15); font-size: min(27vw, 19vh); font-weight: 800; line-height: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4%; transition: opacity .3s;
}
.choices.two .choice { width: min(60vw, 30vh); font-size: min(38vw, 19vh); }
.choice:nth-child(4n+1) { color: #e84a94; }
.choice:nth-child(4n+2) { color: #8f6fe6; }
.choice:nth-child(4n+3) { color: #2fa6d9; }
.choice:nth-child(4n+4) { color: #f29a2e; }
.choice.no { animation: wobble .5s; opacity: .35; }
.choice.yay { animation: dance .9s ease-in-out infinite; background: #fff6c9; }
.choice.fade { opacity: .15; }
.choice > i { position: absolute; right: -6px; bottom: -10px; font-size: .45em; font-style: normal; }

/* numbers: the digit, and optionally its dots */
.numbers .choice { font-size: min(22vw, 15vh); }
.numbers.two .choice { font-size: min(30vw, 15vh); }
.dots { display: grid; grid-template-columns: repeat(5, .16em); gap: .05em; }
.dots i { width: .16em; height: .16em; border-radius: 50%; background: currentColor; opacity: .75; }

/* plants: photo cards */
.photos .choice { overflow: hidden; border: 6px solid #fff; }
.photos .choice img { width: 100%; height: 100%; object-fit: cover; border-radius: 28px; pointer-events: none; }
.photos .choice.yay { border-color: var(--gold); }

/* pop */
.sky { position: absolute; inset: 0; overflow: hidden; }
.balloon {
  position: absolute; bottom: -150px; width: 104px; height: 128px; color: #fff; font-size: 60px; font-weight: 800;
  border-radius: 50% 50% 50% 50% / 44% 44% 56% 56%; animation: rise linear forwards;
  box-shadow: inset -10px -12px 0 rgba(0, 0, 0, .1);
}
.balloon::after {
  content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 46px; background: rgba(91, 58, 122, .35);
}
.balloon.no { opacity: .3; }
.balloon.popped { background: none !important; box-shadow: none; font-size: 80px; animation-play-state: paused; }
.balloon.popped::after { display: none; }

/* ---------- celebration ---------- */

#party { flex-direction: column; align-items: center; justify-content: center; overflow: hidden; z-index: 5; }
#party .mascot { font-size: 170px; animation: dance 1s ease-in-out infinite; z-index: 1; }
#party .prize { font-size: 60px; z-index: 1; }
.confetti { position: absolute; top: -60px; font-size: 34px; animation: fall linear infinite; }

/* ---------- parent menu ---------- */

#parent { z-index: 6; align-items: center; justify-content: center; background: rgba(40, 20, 60, .55); padding: 16px; }
#parent .panel {
  width: 100%; max-width: 420px; background: #fff; border-radius: 24px; padding: 20px;
  display: flex; flex-direction: column; gap: 14px; font-size: 17px;
}
#parent h2 { margin: 0; font-size: 22px; }
#parent label { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.seg { display: flex; gap: 6px; }
.seg button { flex: 1; padding: 10px 6px; border-radius: 14px; background: #f1ecf7; font-weight: 700; }
.seg button.sel { background: var(--pink); color: #fff; }
#parent .wide { padding: 12px; border-radius: 14px; background: #f1ecf7; font-weight: 700; }
#parent .danger { color: #b3261e; }

@keyframes bob { 50% { transform: translateY(-6px); } }
@keyframes pulse { 50% { transform: translate(-50%, -50%) scale(1.15); } }
@keyframes wobble { 25% { transform: translateX(-10px); } 50% { transform: translateX(10px); } 75% { transform: translateX(-6px); } }
@keyframes dance { 25% { transform: rotate(-8deg) scale(1.08); } 75% { transform: rotate(8deg) scale(1.08); } }
@keyframes rise { to { transform: translateY(calc(-100vh - 320px)); } }
@keyframes fall { to { transform: translateY(calc(100vh + 120px)) rotate(360deg); } }