/* Fonts are served from this site (assets/fonts, SIL Open Font License), not
 * Google Fonts, so loading the game doesn't contact anyone else.
 * Latin and Latin Extended subsets, so names with accents work. */
/* Andika 400, latin-ext */
@font-face {
  font-family: 'Andika';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/andika-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Andika 400, latin */
@font-face {
  font-family: 'Andika';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/andika-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Andika 700, latin-ext */
@font-face {
  font-family: 'Andika';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/andika-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Andika 700, latin */
@font-face {
  font-family: 'Andika';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/andika-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Lilita One 400, latin-ext */
@font-face {
  font-family: 'Lilita One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/lilita-one-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Lilita One 400, latin */
@font-face {
  font-family: 'Lilita One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/lilita-one-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- vibes (colour themes chosen by each child) ---------- */
:root, [data-vibe="night"] {
  --bg: #1a1040; --bg2: #3a1d78; --ink: #fff6fb; --soft: #cbb8ff;
  --card: #2c1d68; --card-ink: #fff6fb; --line: #ffffff22;
  --accent: #ff4fa3; --accent2: #2fd8ff; --gold: #ffcf3a; --pop: #b98aff;
  --tile: #fff6fb; --tile-ink: #2a1650;
  --pattern: radial-gradient(circle at 12% 18%, #ffffff55 0 1.5px, transparent 2.5px),
             radial-gradient(circle at 70% 40%, #ffffff40 0 1px, transparent 2px),
             radial-gradient(circle at 35% 75%, #ff4fa355 0 2px, transparent 3px);
  --pattern-size: 140px 140px, 90px 90px, 200px 200px;
  color-scheme: dark;
}
[data-vibe="honmoon"] {
  --bg: #ffe9a8; --bg2: #ffbf3f; --ink: #3a1d5c; --soft: #7a5a2a;
  --card: #fff7df; --card-ink: #3a1d5c; --line: #3a1d5c22;
  --accent: #8b3fe0; --accent2: #ff6a3d; --gold: #ffb300; --pop: #ff4fa3;
  --tile: #ffffff; --tile-ink: #3a1d5c;
  --pattern: repeating-radial-gradient(circle at 50% 120%, #ffffff00 0 30px, #ffffff55 30px 34px);
  --pattern-size: auto;
  color-scheme: light;
}
[data-vibe="bubblegum"] {
  --bg: #ffe0f0; --bg2: #ffb0d8; --ink: #5a1446; --soft: #a2457f;
  --card: #ffffff; --card-ink: #5a1446; --line: #5a144622;
  --accent: #ff3d8b; --accent2: #8a5cff; --gold: #ffc23d; --pop: #39c8ff;
  --tile: #ffffff; --tile-ink: #5a1446;
  --pattern: radial-gradient(circle at 25% 25%, #ffffff99 0 10px, transparent 11px),
             radial-gradient(circle at 75% 70%, #ffffff77 0 6px, transparent 7px);
  --pattern-size: 120px 120px, 80px 80px;
  color-scheme: light;
}
[data-vibe="ocean"] {
  --bg: #c6f1ff; --bg2: #5ccff2; --ink: #083650; --soft: #2f6a87;
  --card: #ffffff; --card-ink: #083650; --line: #08365022;
  --accent: #ff7a59; --accent2: #0a9fc4; --gold: #ffc93d; --pop: #ff4fa3;
  --tile: #ffffff; --tile-ink: #083650;
  --pattern: radial-gradient(ellipse 40px 12px at 50% 100%, #ffffff66 0 70%, transparent 72%);
  --pattern-size: 80px 40px;
  color-scheme: light;
}
[data-vibe="jungle"] {
  --bg: #dcf6c8; --bg2: #8fd96a; --ink: #1c401f; --soft: #3f6b33;
  --card: #fffbe8; --card-ink: #1c401f; --line: #1c401f22;
  --accent: #ff8a1f; --accent2: #2b9c48; --gold: #ffcf3a; --pop: #ff4fa3;
  --tile: #ffffff; --tile-ink: #1c401f;
  --pattern: radial-gradient(ellipse 18px 9px at 30% 30%, #2b9c4833 0 70%, transparent 72%),
             radial-gradient(ellipse 9px 18px at 70% 70%, #2b9c4833 0 70%, transparent 72%);
  --pattern-size: 70px 70px, 90px 90px;
  color-scheme: light;
}
[data-vibe="rainbow"] {
  --bg: #fff9ef; --bg2: #ffe3f0; --ink: #2b2350; --soft: #6c5f9a;
  --card: #ffffff; --card-ink: #2b2350; --line: #2b235022;
  --accent: #ff5470; --accent2: #3d7bff; --gold: #ffc53d; --pop: #2fcf7a;
  --tile: #ffffff; --tile-ink: #2b2350;
  --pattern: linear-gradient(180deg, #ff547022 0 14%, #ff9f1c22 14% 28%, #ffd23f22 28% 42%, #2fcf7a22 42% 56%, #3d7bff22 56% 70%, #8a5cff22 70% 84%, transparent 84%);
  --pattern-size: 100% 100%;
  color-scheme: light;
}

/* ---------- scenery: a world that grows a piece with each sound set ---------- */
#scenery { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: .8; }
#scenery.sc-wow { animation: sc-wow 1.4s ease-out; }
#topbar, #stage { position: relative; z-index: 1; }
#scenery .lv { opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s; transform-box: fill-box; transform-origin: 50% 100%; }
#scenery .lv.on { opacity: 1; visibility: visible; }
#scenery .lv.grow { animation: sc-grow 1.6s cubic-bezier(.2, 1.4, .4, 1) both; }
.sc-land { position: absolute; left: 0; bottom: 0; width: 100%; height: min(42vh, 62vw); }
.sc-far { fill: color-mix(in srgb, var(--bg2) 70%, var(--ink) 30%); opacity: .55; }
.sc-snow { fill: #fff; opacity: .8; }
.sc-hill { fill: color-mix(in srgb, var(--bg2) 55%, var(--accent2) 45%); opacity: .8; }
.sc-hill2 { fill: color-mix(in srgb, var(--bg2) 45%, var(--pop) 55%); opacity: .85; }
.sc-wall { fill: color-mix(in srgb, var(--card) 80%, var(--ink) 20%); }
.sc-flag { transform-box: fill-box; transform-origin: 0 50%; animation: sc-flap 1.2s ease-in-out infinite alternate; }
.sc-tree { fill: color-mix(in srgb, var(--accent2) 65%, var(--bg2) 35%); }
.sc-trunk { fill: color-mix(in srgb, #8a5a2b 80%, var(--bg2) 20%); }
.sc-shine { fill: #fff; opacity: .35; }
.sc-cloud { fill: color-mix(in srgb, #fff 80%, var(--bg2) 20%); opacity: .75; }
.sc-sun { position: absolute; right: 9%; top: 15%; width: 20vmin; aspect-ratio: 1; }
.sc-disc { position: absolute; inset: 22%; border-radius: 50%; background: var(--gold); box-shadow: 0 0 40px var(--gold); }
.sc-rays {
  position: absolute; inset: 0; border-radius: 50%; animation: lazyspin 40s linear infinite;
  background: repeating-conic-gradient(color-mix(in srgb, var(--gold) 55%, transparent) 0 10deg, transparent 10deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 40%, transparent 70%); mask: radial-gradient(circle, #000 40%, transparent 70%);
}
.sc-clouds i { position: absolute; top: var(--y); left: 0; width: var(--w); animation: sc-drift var(--t) linear var(--d) infinite; }
.sc-balloons i { position: absolute; width: var(--w); animation: sc-bob 6s ease-in-out var(--d) infinite; }
:root:has(#topbar[hidden]) .sc-bunting { display: none; }
.sc-bunting { position: absolute; left: 0; top: 0; width: 100%; height: 9vh; min-height: 56px; }
.sc-shooting i {
  position: absolute; left: var(--x); top: var(--y); width: 18vmin; height: 3px; border-radius: 3px; rotate: 25deg; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--gold) 80%, #fff); filter: drop-shadow(0 0 6px var(--gold));
  animation: sc-shoot 7.5s ease-in var(--d) infinite;
}
.sc-lanterns i {
  position: absolute; left: var(--x); bottom: -12vmin; width: 4.5vmin; height: 6vmin; border-radius: 40% 40% 30% 30%;
  background: radial-gradient(circle at 50% 70%, #fff8 0 20%, var(--gold) 60%, var(--accent) 100%); box-shadow: 0 0 22px var(--gold);
  animation: sc-rise var(--t) linear var(--d) infinite;
}
@keyframes sc-grow {
  0% { opacity: 0; scale: .2; translate: 0 30px; filter: brightness(2.5) drop-shadow(0 0 30px #fff); }
  60% { opacity: 1; filter: brightness(1.6) drop-shadow(0 0 24px #fff); }
  100% { opacity: 1; scale: 1; translate: 0 0; filter: none; }
}
@keyframes sc-wow { 0% { opacity: .8; } 25% { opacity: 1; filter: brightness(1.4) saturate(1.3); } 100% { opacity: .8; } }
@keyframes sc-drift { from { translate: -30vmin 0; } to { translate: calc(100vw + 30vmin) 0; } }
@keyframes sc-bob { 50% { translate: 0 -4vh; rotate: 3deg; } }
@keyframes sc-flap { to { scale: .7 1; } }
@keyframes sc-shoot { 0% { opacity: 0; translate: 0 0; } 4% { opacity: 1; } 14% { opacity: 0; translate: 30vmin 14vmin; } 100% { opacity: 0; translate: 30vmin 14vmin; } }
@keyframes sc-rise { 0% { translate: 0 0; opacity: 0; } 10% { opacity: .9; } 50% { rotate: 6deg; } 90% { opacity: .9; } 100% { translate: 2vw -115vh; opacity: 0; rotate: -4deg; } }

/* ---------- base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  display: flex; flex-direction: column;
  font-family: 'Andika', 'Comic Sans MS', 'Trebuchet MS', system-ui, sans-serif;
  color: var(--ink);
  background: var(--pattern), linear-gradient(170deg, var(--bg) 0%, var(--bg2) 100%);
  background-size: var(--pattern-size), 100% 100%;
  background-attachment: fixed;
  -webkit-user-select: none; user-select: none;
  /* No press-and-hold pop-up (save image, copy) on iPads. */
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  /* No pinch or double-tap zoom: little fingers set it off by accident. */
  touch-action: pan-x pan-y;
  overflow: hidden;
  transition: background-color .4s;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; padding: 0; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 4px solid var(--accent2); outline-offset: 3px; }
button:disabled { cursor: default; }
svg { display: block; }
/* picture-only text: colour emoji font first */
.pic-card span, .reveal-pic, .emoji-av, .float-text, .lock, .tb-btn, .home-go {
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
/* text mixed with emoji: text font first, colour emoji as the fallback */
.tb-stat, .board .ask { font-family: 'Andika', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.finish-prize, .prize-val, .rank, .st { font-family: 'Lilita One', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.display, .logo, .ask, .hb-label, .gc-name, .finish-title, .prize-name, .prize-val, .chunky, .intro-badge, .jp-title, .jp-name, .jp-stars {
  font-family: 'Lilita One', 'Arial Rounded MT Bold', 'Trebuchet MS', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; letter-spacing: .02em; font-weight: 400;
}

.stage {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
  padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
  padding-block: 12px max(16px, env(safe-area-inset-bottom));
}

/* chunky toy buttons: a solid "base" shadow that the button presses into */
.chunky {
  --c: var(--accent);
  background: var(--c); color: #fff;
  font-size: clamp(26px, 4vw, 40px);
  padding: .35em 1.1em; border-radius: 999px;
  box-shadow: 0 8px 0 color-mix(in srgb, var(--c) 62%, #000), 0 14px 24px #0003;
  transition: transform .08s, box-shadow .08s;
  text-shadow: 0 2px 0 #0003;
}
.chunky:active:not(:disabled) { transform: translateY(6px); box-shadow: 0 2px 0 color-mix(in srgb, var(--c) 62%, #000), 0 4px 10px #0003; }
.chunky.alt { --c: var(--accent2); }
.chunky:disabled { filter: grayscale(.8); opacity: .6; }

.av { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--card); overflow: hidden; box-shadow: inset 0 0 0 3px var(--line); flex: none; }
.av svg { width: 100%; height: 100%; }
.av.big { width: clamp(84px, 14vw, 120px); height: clamp(84px, 14vw, 120px); }
.emoji-av { font-size: 1.9em; line-height: 1; }
.av.big .emoji-av { font-size: clamp(48px, 8vw, 70px); }

.round-btn { width: 60px; height: 60px; border-radius: 50%; background: var(--card); color: var(--card-ink); font-size: 30px; box-shadow: 0 5px 0 var(--line); flex: none; }

/* ---------- top bar ---------- */
#topbar {
  display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
}
#topbar[hidden] { display: none; }
.tb-me { display: flex; align-items: center; gap: 10px; background: var(--card); color: var(--card-ink); padding: 5px 16px 5px 5px; border-radius: 999px; min-width: 0; box-shadow: 0 4px 0 var(--line); }
.tb-me .av { width: 50px; height: 50px; }
.tb-name { font-size: 22px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30vw; }
.tb-stat { font-size: 24px; font-weight: 700; background: var(--card); color: var(--card-ink); padding: 8px 16px; border-radius: 999px; font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 4px 0 var(--line); }
.tb-right { margin-left: auto; display: flex; gap: 10px; }
.tb-btn { width: 58px; height: 58px; border-radius: 50%; background: var(--card); font-size: 28px; box-shadow: 0 4px 0 var(--line); }
.tb-btn.fs-btn { display: grid; place-items: center; color: var(--card-ink); }

/* ---------- players ---------- */
.players { display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 3vh, 32px); margin: auto 0; padding-block: 16px; }
.logo { margin: 0; font-size: clamp(64px, 13vw, 140px); line-height: .9; display: flex; gap: .2em; flex-wrap: wrap; justify-content: center; }
.logo span:first-child { color: var(--accent); text-shadow: 0 6px 0 color-mix(in srgb, var(--accent) 55%, #000); transform: rotate(-4deg); }
.logo span:last-child { color: var(--gold); text-shadow: 0 6px 0 color-mix(in srgb, var(--gold) 55%, #000); transform: rotate(3deg); }
.player-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(12px, 2vw, 22px); max-width: 980px; }
.player-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: clamp(140px, 20vw, 190px); padding: 16px 10px 14px;
  background: var(--card); color: var(--card-ink); border-radius: 28px;
  box-shadow: 0 8px 0 var(--line), 0 12px 24px #0002;
  transition: transform .1s;
}
.player-card:active { transform: translateY(5px) scale(.98); }
.pc-name { font-size: 26px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-stars { font-size: 18px; color: var(--soft); font-variant-numeric: tabular-nums; }
.player-card.add { background: transparent; border: 5px dashed var(--soft); box-shadow: none; color: var(--ink); justify-content: center; }
.plus { font-family: 'Lilita One', sans-serif; font-size: 90px; line-height: 1; color: var(--accent); }
.grownups-link { font-size: 16px; color: var(--soft); text-decoration: underline; padding: 10px; }
.players-links { display: flex; gap: 8px; justify-content: center; }

/* ---------- create player ---------- */
.create { display: flex; flex-direction: column; gap: 16px; flex: 1; }
.create-head { display: flex; align-items: center; justify-content: space-between; }
.create-head > span { width: 60px; }
.step-dots { display: flex; gap: 10px; }
.step-dots span { width: 18px; height: 18px; border-radius: 50%; background: var(--line); }
.step-dots span.on { background: var(--accent); }
.create-body { display: flex; flex-direction: column; align-items: center; gap: 22px; margin: auto 0; padding-bottom: 24px; }
.ask { margin: 0; font-size: clamp(34px, 6vw, 56px); text-align: center; text-wrap: balance; }
.name-form { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; }
.name-form input {
  font: 700 clamp(34px, 6vw, 54px) 'Andika', sans-serif; text-align: center;
  width: min(14ch, 80vw); padding: 10px 20px; border-radius: 24px;
  border: 5px solid var(--accent); background: var(--tile); color: var(--tile-ink);
  -webkit-user-select: text; user-select: text;
}
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(88px, 14vw, 124px), 1fr)); gap: 14px; width: min(100%, 860px); }
/* Nine favourites sit best as a square. */
.fav-grid { grid-template-columns: repeat(3, minmax(0, clamp(88px, 14vw, 124px))); width: auto; justify-content: center; }
.av-pick { aspect-ratio: 1; max-width: 100%; border-radius: 50%; padding: 6px; background: var(--card); box-shadow: 0 6px 0 var(--line); transition: transform .12s; }
.av-pick .av { width: 100%; height: 100%; box-shadow: none; }
.av-pick .emoji-av { font-size: clamp(44px, 8vw, 70px); }
.av-pick.sel { background: var(--accent); transform: scale(1.08); }

.vibe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 24vw, 220px), 1fr)); gap: 16px; width: min(100%, 860px); }
.fav-ask { margin-top: clamp(24px, 4vw, 40px); }
.vibe-card {
  display: flex; flex-direction: column; border-radius: 24px; overflow: hidden;
  background: var(--card); color: var(--card-ink); box-shadow: 0 6px 0 var(--line);
  border: 5px solid transparent; transition: transform .12s;
}
.vibe-card.sel { border-color: var(--accent); transform: scale(1.05); }
.vc-sky { height: clamp(76px, 12vw, 110px); display: flex; align-items: flex-end; justify-content: center; gap: 8px; padding: 12px;
  background: var(--pattern), linear-gradient(170deg, var(--bg), var(--bg2)); background-size: var(--pattern-size), 100% 100%; }
.vc-sky i { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); box-shadow: 0 4px 0 #0002; }
.vc-sky i:nth-child(2) { background: var(--accent2); height: 40px; border-radius: 14px; }
.vc-sky i:nth-child(3) { background: var(--gold); }
.vc-name { padding: 8px; font-size: 18px; font-weight: 700; text-align: center; }

/* ---------- hub ---------- */
.hub { display: flex; flex-direction: column; gap: clamp(16px, 3vh, 28px); margin: auto 0; align-items: center; padding-block: 8px; }
.hub-buttons { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: clamp(12px, 2vw, 24px); width: min(100%, 1040px); }
.hub-btn {
  --c: var(--accent);
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px;
  min-height: clamp(220px, 42vh, 380px); padding: 16px; border-radius: 36px;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c) 70%, #fff), var(--c));
  color: #fff; overflow: hidden;
  box-shadow: 0 10px 0 color-mix(in srgb, var(--c) 60%, #000), 0 16px 30px #0003;
  transition: transform .08s, box-shadow .08s;
}
.hub-btn:active { transform: translateY(7px); box-shadow: 0 3px 0 color-mix(in srgb, var(--c) 60%, #000); }
.hub-btn.spin { --c: var(--gold); }
.hub-btn.games { --c: var(--accent2); }
.hb-label { font-size: clamp(32px, 5vw, 54px); text-shadow: 0 3px 0 #0004; line-height: 1; }
.hb-art { width: 62%; max-width: 200px; margin-bottom: auto; filter: drop-shadow(0 6px 0 #0002); }
.hb-letters { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.hb-letters b { background: #fff; color: #2a1650; border-radius: 12px; padding: 0 10px; font-size: clamp(22px, 3.2vw, 32px); box-shadow: 0 3px 0 #0003; }
.hb-wheel { width: 74%; max-width: 220px; margin-bottom: auto; filter: drop-shadow(0 6px 0 #0002); }
.hub-btn.spin:not(.none) .mini-rot { transform-origin: 50px 50px; animation: lazyspin 9s linear infinite; }
.hub-btn.none { filter: saturate(.5); }
.hb-badge {
  position: absolute; top: 14px; right: 14px; min-width: 58px; height: 58px; padding: 0 10px; border-radius: 999px;
  display: grid; place-items: center; background: var(--accent); color: #fff;
  font: 400 32px 'Lilita One', sans-serif; box-shadow: 0 4px 0 #0003;
}
.hub-btn.spin:not(.none) .hb-badge { animation: pulse 1.4s ease-in-out infinite; }
/* Every egg has hatched: Learn is the way on (app.js learnPrompt). */
.hub.ready .hub-btn.learn { animation: ready-glow 1.4s ease-in-out infinite; }
.hub.ready .hub-btn.spin, .hub.ready .hub-btn.games { filter: saturate(.55) brightness(.85); }
.hb-point { position: absolute; top: 12px; right: 16px; font-size: clamp(44px, 6vw, 64px); line-height: 1; animation: point-up .9s ease-in-out infinite; filter: drop-shadow(0 4px 0 #0003); }
.chunky.ready { animation: ready-glow 1.4s ease-in-out infinite; }
.finish-btns:has(.ready:not([hidden])) > :not(.ready) { filter: saturate(.55) brightness(.85); }
@keyframes ready-glow {
  0%, 100% { outline: 0 solid #fff0; outline-offset: 0; }
  50% { outline: 8px solid color-mix(in srgb, var(--gold) 80%, transparent); outline-offset: 6px; }
}
@keyframes point-up { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
/* Every mini game, a little tile each; the ones still locked are greyed out. */
.hb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; width: 92%; max-width: 260px; margin-bottom: auto; }
.hb-grid i { aspect-ratio: 1; display: grid; place-items: center; padding: 8%; border-radius: 22%; background: var(--gc); box-shadow: 0 3px 0 #0003; }
.hb-grid i > svg { width: 100%; height: 100%; }
.hb-grid .emoji-av { font-size: clamp(16px, 2.6vw, 30px); line-height: 1; }
.hb-grid i.off { filter: grayscale(1) brightness(.75); opacity: .5; }
/* eggs: one per sound being learned (eggs.js) */
.nest { display: flex; gap: clamp(8px, 2vw, 18px); flex-wrap: wrap; justify-content: center; align-items: flex-end; }
.egg { width: clamp(62px, 11vw, 92px); padding: 0; background: none; transform-origin: 50% 90%; filter: drop-shadow(0 5px 0 #0003); }
.egg svg { display: block; width: 100%; overflow: visible; }
.egg-shell { fill: var(--tile); stroke: color-mix(in srgb, var(--tile-ink) 25%, transparent); stroke-width: 2; }
.egg-shine { fill: #fff; opacity: .55; }
.egg-letter { font-family: 'Andika', sans-serif; font-weight: 700; font-size: 40px; fill: var(--tile-ink); }
.egg-crack { fill: none; stroke: var(--tile-ink); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1 1; transition: stroke-dashoffset .6s ease-out; }
.egg-crack.egg-gold { stroke: var(--gold); stroke-width: 7.5; opacity: 0; transition: stroke-dasharray .9s ease-out; }
.egg.gold-crack .egg-gold { opacity: 1; filter: drop-shadow(0 0 3px var(--gold)) drop-shadow(0 0 7px var(--gold)); }
.egg-lid { transform: translate(-14px, -30px) rotate(-28deg); transform-origin: 20% 50%; }
.egg-pic { font-size: 58px; }
.egg.wobbly { animation: egg-wobble 2.6s ease-in-out infinite; }
.egg.egg-jiggle { animation: egg-jiggle .5s; }
.egg.just-hatched .egg-pic { animation: egg-pop .6s cubic-bezier(.2, 1.6, .4, 1); transform-origin: 50% 80%; transform-box: fill-box; }
.egg.just-hatched .egg-lid { animation: egg-lid .5s ease-out backwards; }
@keyframes egg-wobble { 0%, 70%, 100% { rotate: 0deg; } 76% { rotate: -7deg; } 84% { rotate: 6deg; } 92% { rotate: -3deg; } }
@keyframes egg-jiggle { 25% { rotate: -9deg; } 50% { rotate: 8deg; } 75% { rotate: -4deg; } }
@keyframes egg-pop { 0% { scale: .2; opacity: 0; } 100% { scale: 1; opacity: 1; } }
@keyframes egg-lid { 0% { transform: none; } }
.finish .nest { margin: -4px 0 4px; }

/* ---------- lesson round ---------- */
.s-learn, .s-game { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
.round-bar { display: flex; align-items: center; gap: 16px; flex: none; }
.quit { width: 56px; height: 56px; border-radius: 50%; background: var(--card); color: var(--card-ink); font-size: 26px; box-shadow: 0 4px 0 var(--line); flex: none; }
.dots { flex: 1; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.dots .dot { width: clamp(22px, 4vw, 34px); height: clamp(22px, 4vw, 34px); border-radius: 50%; background: var(--line); transition: background .2s, transform .2s; }
.dots .dot.intro { border-radius: 8px; }
.dots .dot.now { background: var(--soft); transform: scale(1.2); }
.dots .dot.done { background: var(--gold); box-shadow: 0 0 0 3px #fff8 inset; }
.dots .dot.helped { background: color-mix(in srgb, var(--soft) 70%, #2fcf7a); box-shadow: none; }
.dots .dot.gold { display: grid; place-items: center; font-size: clamp(14px, 2.6vw, 22px); line-height: 1; box-shadow: 0 0 0 3px #fff8 inset, 0 0 14px var(--gold); animation: pop-in .4s; }
.dots .dot.gold::after { content: '★'; color: #fff; text-shadow: 0 1px 0 #b07a10; }
.ch-holder { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.ch { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 4vh, 44px); padding-block: 12px; }
.prompt-row { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }

.ear {
  width: clamp(72px, 11vw, 96px); height: clamp(72px, 11vw, 96px); border-radius: 50%;
  background: var(--accent2); color: #fff; font-size: 38px; display: grid; place-items: center;
  box-shadow: 0 7px 0 color-mix(in srgb, var(--accent2) 60%, #000); flex: none;
}
.ear svg { width: 55%; }
.ear:active { transform: translateY(5px); box-shadow: 0 2px 0 color-mix(in srgb, var(--accent2) 60%, #000); }

.choices { display: flex; gap: clamp(12px, 2.5vw, 26px); flex-wrap: wrap; justify-content: center; }
.letter-card {
  min-width: clamp(110px, 17vw, 160px); height: clamp(120px, 19vw, 180px); padding: 0 18px;
  border-radius: 28px; background: var(--tile); color: var(--tile-ink);
  font-size: clamp(64px, 10vw, 104px); font-weight: 700; line-height: 1;
  box-shadow: 0 9px 0 var(--line), 0 12px 22px #0002; transition: transform .1s, opacity .3s;
}
.letter-card:active:not(:disabled) { transform: translateY(5px); }
.letter-card.small { min-width: clamp(84px, 12vw, 116px); height: clamp(90px, 13vw, 124px); font-size: clamp(48px, 7vw, 70px); border-radius: 22px; }
.letter-card.huge { min-width: clamp(170px, 26vw, 260px); height: clamp(190px, 30vw, 290px); font-size: clamp(120px, 18vw, 190px); }
.letter-card:disabled { opacity: .3; }
.right { background: #2fcf7a !important; color: #fff !important; transform: scale(1.08); }
.hint { animation: pulse 1s ease-in-out infinite; box-shadow: 0 0 0 7px var(--gold), 0 9px 0 var(--line) !important; }

.pic-card {
  width: clamp(120px, 18vw, 180px); height: clamp(120px, 18vw, 180px); border-radius: 30px;
  background: var(--tile); display: grid; place-items: center;
  box-shadow: 0 9px 0 var(--line), 0 12px 22px #0002; transition: transform .1s, opacity .3s;
}
.pic-card span { font-size: clamp(64px, 10vw, 104px); line-height: 1; }
.pic-card.big { width: clamp(150px, 24vw, 230px); height: clamp(150px, 24vw, 230px); }
.pic-card.big span { font-size: clamp(90px, 14vw, 140px); }
.pic-card:disabled { opacity: .3; }
.reveal-pic { font-size: 70px; animation: pop-in .4s; }

.intro-badge { font-size: clamp(30px, 5vw, 44px); color: var(--gold); text-shadow: 0 3px 0 #0003; }
.intro-row { display: flex; gap: clamp(16px, 4vw, 40px); align-items: center; flex-wrap: wrap; justify-content: center; }
.go { font-size: 48px; padding: .15em 1.2em; }

.word { display: flex; gap: 8px; background: var(--tile); padding: 10px 18px 16px; border-radius: 28px; box-shadow: 0 9px 0 var(--line); }
.wtile { position: relative; font-size: clamp(64px, 11vw, 112px); font-weight: 700; color: var(--tile-ink); padding: 0 6px 18px; border-radius: 16px; line-height: 1.05; transition: background .15s, transform .15s; }
.wtile i { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); background: var(--accent); }
.wtile i.dot { width: 16px; height: 16px; border-radius: 50%; }
.wtile i.dash { width: 70%; height: 8px; border-radius: 6px; }
.wtile.lit { background: color-mix(in srgb, var(--gold) 45%, transparent); transform: translateY(-6px); }
.word.solved { box-shadow: 0 0 0 6px #2fcf7a, 0 9px 0 var(--line); }
.blend-btn { font-size: 40px; }

.boxes { display: flex; gap: 10px; }
.box {
  padding: 0; background: none; cursor: pointer; font-family: inherit;
  width: clamp(84px, 13vw, 124px); height: clamp(96px, 14vw, 134px); border-radius: 20px;
  border: 5px dashed var(--soft); display: grid; place-items: center;
  font-size: clamp(56px, 8vw, 80px); font-weight: 700; color: var(--tile-ink);
}
.box.next { border-color: var(--accent); border-style: solid; animation: glow 1.4s ease-in-out infinite; }
.box.filled { background: var(--tile); border: 5px solid #2fcf7a; }
.box.gold { background: radial-gradient(circle at 35% 30%, #fff9 0 12%, transparent 40%), var(--gold); border-color: #e0a500; color: #4a2a00; box-shadow: 0 0 18px var(--gold); }
.box.lit { background: color-mix(in srgb, var(--gold) 45%, transparent); transform: translateY(-6px); transition: transform .15s, background .15s; }
.tiles.resting { opacity: .25; pointer-events: none; transition: opacity .3s; }
.tiles .letter-card.gone { display: none; }
.boxes.solved .box:not(.gold) { background: #2fcf7a; color: #fff; }

/* ---------- wheel ---------- */
.wheel-screen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 4vh, 34px); position: relative; }
.wheel-wrap { position: relative; isolation: isolate; width: min(84vw, 58vh, 560px); aspect-ratio: 1; max-width: 100%; }
.wheel-svg { position: relative; width: 100%; height: 100%; }
.wheel-svg > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The rim is the wheel's outline, so its shadow does for the whole wheel and never needs redrawing. */
.wheel-base { filter: drop-shadow(0 12px 20px #0004); }
.wheel-rot { will-change: transform; }
.seg-val { font-family: 'Lilita One', sans-serif; font-size: 30px; }
.pointer {
  position: absolute; left: 50%; top: -14px; z-index: 2; width: 54px; height: 64px; transform: translateX(-50%);
  background: var(--accent); clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 4px 0 #0004); transform-origin: 50% 20%;
}
.pointer.flick { animation: flick .12s; }
.pointer.boom { animation: pointer-boom .5s cubic-bezier(.2, 1.6, .4, 1); }
/* Sunburst behind the wheel: lazy while idle, whirling while it spins. */
.wheel-rays { position: absolute; inset: -16%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(#ffe36a55 0 10deg, transparent 10deg 20deg);
  mask: radial-gradient(closest-side, #000 55%, transparent); -webkit-mask: radial-gradient(closest-side, #000 55%, transparent);
  animation: lazyspin 24s linear infinite; }
.wheel-wrap.spinning .wheel-rays { animation-duration: 3s; }
.wheel-wrap.landed .wheel-rays { animation-duration: 6s; background: repeating-conic-gradient(#ffe36aaa 0 10deg, transparent 10deg 20deg); }
.wheel-base .bulb { fill: #fff8d0; animation: bulb 1.2s steps(1) infinite; }
.wheel-base .bulb.odd { animation-delay: -.6s; }
.wheel-wrap.spinning .bulb { animation-duration: .24s; }
.wheel-wrap.spinning.fast .bulb { animation-duration: .12s; }
.wheel-wrap.landed .bulb { animation: bulb-win .18s steps(1) infinite; }
.wheel-wrap.winding .wheel-svg { scale: .97; transition: scale .4s; }
.wheel-svg { transition: scale .5s cubic-bezier(.2, 1.6, .4, 1); }
.wheel-wrap.spinning.fast .wheel-svg { scale: 1.03; }
.seg-shade { fill: #000; opacity: 0; transition: opacity .3s; pointer-events: none; }
.wheel-wrap.landed .seg-shade { opacity: .45; }
.wheel-wrap.landed .seg-shade.win { fill: #fff; opacity: 0; animation: seg-win .25s ease-in-out 6 alternate; }
.spin-btn:not(:disabled) { animation: pulse 1.4s ease-in-out infinite; }
.spin-btn:not(:disabled):active { scale: .92; animation: none; }
.prize-rays { position: absolute; left: 50%; top: 50%; width: min(130vw, 130vh); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(#ffe36a 0 10deg, transparent 10deg 20deg);
  mask: radial-gradient(closest-side, #000 40%, transparent); -webkit-mask: radial-gradient(closest-side, #000 40%, transparent);
  animation: lazyspin 8s linear infinite; }
.prize { position: relative; }
.wheel-result.leaving .prize-rays { opacity: 0; transition: opacity .4s; }
.prize-art { animation: jp-dance 1.1s ease-in-out .4s infinite; }
@keyframes bulb { 0% { fill: #fff8d0; } 50% { fill: #b07a10; } }
@keyframes bulb-win { 0% { fill: #fff; } 50% { fill: #ff4fa3; } }
@keyframes seg-win { from { opacity: 0; } to { opacity: .55; } }
@keyframes pointer-boom { 40% { scale: 1.4; } }
.spin-btn { font-size: clamp(40px, 7vw, 64px); padding: .25em 1.4em; --c: var(--accent); }
.spin-count { font-size: .6em; opacity: .9; }
.wheel-result { position: absolute; inset: 0; display: grid; place-items: center; background: #0006; border-radius: 30px; z-index: 5; transition: background .5s; overflow: hidden; }
.wheel-result.leaving { background: transparent; }
.prize {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--card); color: var(--card-ink); border-radius: 36px; padding: 20px 30px 24px;
  box-shadow: 0 12px 0 var(--line), 0 20px 40px #0005; animation: pop-in .45s cubic-bezier(.2, 1.6, .4, 1);
}
.prize-art { width: clamp(180px, min(48vw, 42vh), 360px); aspect-ratio: 1; }
.prize-art svg { width: 100%; height: 100%; }
.prize-val { font-size: clamp(48px, 8vw, 72px); color: var(--accent); line-height: 1; }

/* Stars flying from a prize into the header total. */
.fly-star {
  position: fixed; z-index: 60; pointer-events: none; font-size: 44px; line-height: 1;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  filter: drop-shadow(0 0 10px #ffe03a); translate: none;
}
.tb-stat.tb-bump { animation: tb-bump .25s ease-out; }
.tb-stat.tb-glow { animation: tb-glow 1.1s ease-out; }
@keyframes tb-bump { 40% { scale: 1.22; } }
@keyframes tb-glow {
  0% { scale: 1.3; box-shadow: 0 4px 0 var(--line), 0 0 0 0 #ffe03a; }
  40% { box-shadow: 0 4px 0 var(--line), 0 0 0 14px #ffe03a66; }
  100% { scale: 1; box-shadow: 0 4px 0 var(--line), 0 0 0 26px #ffe03a00; }
}

/* ---------- favourite party (top prize) ---------- */
.wheel-wrap.jp-hit { animation: jp-shake .08s linear 9, jp-glow .35s ease-in-out 2 alternate; }
.wheel-wrap.jp-hit .seg-jp { animation: jp-seg .14s steps(2) 6; }
.jp {
  position: fixed; inset: 0; z-index: 45; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(4px, 1.4vh, 14px);
  background: radial-gradient(circle at 50% 45%, #ffe680 0%, #ff8fd0 38%, #7a3cff 72%, #2a0f6b 100%);
  opacity: 0; transition: opacity .2s; padding: 16px;
}
.jp.on { opacity: 1; }
.jp-rays {
  position: absolute; left: 50%; top: 45%; width: 260vmax; height: 260vmax; translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, #ffffff66 0deg 7deg, transparent 7deg 15deg);
  animation: lazyspin 9s linear infinite; pointer-events: none;
  -webkit-mask: radial-gradient(circle, #000 0 20%, transparent 55%); mask: radial-gradient(circle, #000 0 20%, transparent 55%);
}
.jp-flash { position: absolute; inset: 0; background: #fff; pointer-events: none; opacity: 0; }
.jp.on .jp-flash { animation: jp-flash .7s ease-out; }
.jp-sparkles span {
  position: absolute; font-size: calc(34px * var(--s)); pointer-events: none;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  animation: jp-twinkle 1.2s ease-in-out var(--d) infinite;
}
.jp-title { position: relative; display: flex; flex-wrap: wrap; justify-content: center; font-size: min(11vw, 11vh, 120px); line-height: 1.05; }
.jp-br { flex-basis: 100%; height: 0; }
.jp-title span {
  display: inline-block; color: hsl(calc(var(--i) * 45deg) 95% 58%);
  -webkit-text-stroke: .06em #fff; paint-order: stroke fill;
  text-shadow: 0 .06em 0 #3a1d5c, 0 0 .3em #fff8;
  animation: jp-letter-in .5s cubic-bezier(.2, 1.8, .4, 1) calc(.25s + var(--i) * .07s) both,
             jp-wave 1s ease-in-out calc(1s + var(--i) * .09s) infinite,
             jp-hue 2s linear infinite;
}
.jp-hero { position: relative; width: min(66vw, 34vh, 380px); aspect-ratio: 1; }
.jp-rumi {
  position: absolute; inset: 0; filter: drop-shadow(0 0 24px #fff) drop-shadow(0 10px 0 #0003);
  animation: jp-zoom .9s cubic-bezier(.2, 1.5, .4, 1) .1s both, jp-dance .9s ease-in-out 1.1s infinite;
}
.jp-rumi svg { width: 100%; height: 100%; }
.jp-orbit { position: absolute; inset: -14%; animation: lazyspin 4s linear infinite; }
.jp-orbit span {
  position: absolute; left: 50%; top: 50%; font-size: min(6vmin, 5vh, 50px); translate: -50% -50%;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  transform: rotate(calc(var(--i) * 45deg)) translateY(calc(min(66vw, 34vh, 380px) * -.64)) rotate(calc(var(--i) * -45deg));
  animation: jp-twinkle .8s ease-in-out calc(var(--i) * .1s) infinite;
}
.jp-name {
  position: relative; font-size: min(9vw, 9vh, 84px); color: #fff; line-height: 1;
  text-shadow: 0 5px 0 #8b3fe0, 0 0 20px #ff4fd8; animation: pop-in .5s cubic-bezier(.2, 1.6, .4, 1) .7s both;
}
.jp-stars {
  position: relative; font-size: min(10vw, 10vh, 96px); color: #ffe03a; line-height: 1;
  -webkit-text-stroke: .05em #6a2bd0; paint-order: stroke fill; text-shadow: 0 6px 0 #3a1d5c;
  font-family: 'Lilita One', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  animation: pop-in .4s cubic-bezier(.2, 1.6, .4, 1) 1.2s both;
}
.jp-stars b { display: inline-block; min-width: 2.2ch; font-weight: 400; }
.jp-stars b.jp-tick { animation: bounce .15s; }
.jp.counted .jp-stars { animation: jp-big .6s cubic-bezier(.2, 1.8, .4, 1); }
.jp-ok { position: relative; --c: #ff3d8b; visibility: hidden; font-size: min(6vw, 7vh, 56px); }
.jp.ready .jp-ok { visibility: visible; animation: pop-in .4s cubic-bezier(.2, 1.6, .4, 1), pulse 1s ease-in-out .4s infinite; }
.jp.leaving { opacity: 0; transition: opacity .6s; pointer-events: none; }

/* Slower devices (see SP.fx in ui.js). Level 1 drops the animated filters,
 * which redraw every frame; level 0 also stills the big background movers. */
:root:not([data-fx="2"]) .jp-title span { animation: jp-letter-in .5s cubic-bezier(.2, 1.8, .4, 1) calc(.25s + var(--i) * .07s) both, jp-wave 1s ease-in-out calc(1s + var(--i) * .09s) infinite; }
:root:not([data-fx="2"]) .wheel-wrap.jp-hit { animation: jp-shake .08s linear 9; }
:root:not([data-fx="2"]) .jp-rumi { filter: none; }
:root:not([data-fx="2"]) .fly-star { filter: none; }
[data-fx="0"] .jp-rays, [data-fx="0"] .jp-sparkles { display: none; }
[data-fx="0"] .jp-orbit, [data-fx="0"] .wheel-rays, [data-fx="0"] .prize-rays { animation: none; }
[data-fx="0"] #scenery :is(.sc-flag, .sc-clouds i, .sc-balloons i, .sc-shooting i, .sc-rays) { animation-play-state: paused; }
@keyframes jp-shake { 25% { translate: -10px 4px; } 50% { translate: 8px -6px; } 75% { translate: -6px -4px; } }
@keyframes jp-glow { to { filter: drop-shadow(0 0 40px #ffe03a) brightness(1.25); } }
@keyframes jp-seg { 50% { fill: #fff; } }
@keyframes jp-flash { 0% { opacity: .95; } 100% { opacity: 0; } }
@keyframes jp-twinkle { 0%, 100% { scale: .4; opacity: .3; } 50% { scale: 1.2; opacity: 1; } }
@keyframes jp-letter-in { 0% { transform: translateY(-120vh) rotate(-40deg); } 100% { transform: none; } }
@keyframes jp-wave { 0%, 100% { translate: 0 0; scale: 1; } 30% { translate: 0 -.22em; scale: 1.12; } }
@keyframes jp-hue { to { filter: hue-rotate(360deg); } }
@keyframes jp-zoom { 0% { transform: scale(0) rotate(-540deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes jp-dance { 0%, 100% { rotate: -8deg; translate: 0 0; } 25% { translate: 0 -6%; } 50% { rotate: 8deg; translate: 0 0; } 75% { translate: 0 -6%; } }
@keyframes jp-big { 50% { scale: 1.35; } }

/* ---------- games ---------- */
.games-screen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 4vh, 34px); }
.games-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(44%, 160px), 1fr)); gap: clamp(10px, 1.8vw, 20px); width: min(100%, 1100px); padding-block: 8px; }
.game-card {
  --gc: var(--accent);
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 10px 12px; border-radius: 28px; color: #fff;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--gc) 65%, #fff), var(--gc));
  box-shadow: 0 9px 0 color-mix(in srgb, var(--gc) 60%, #000), 0 14px 22px #0003;
}
.game-card:active { transform: translateY(6px); }
.gc-art { width: min(60%, 118px); aspect-ratio: 1; display: grid; place-items: center; filter: drop-shadow(0 6px 0 #0002); }
.gc-art > svg { width: 100%; height: 100%; }
.gc-art .emoji-av { font-size: clamp(60px, 9vw, 100px); }
.gc-name { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.05; text-align: center; text-shadow: 0 3px 0 #0004; }
.game-card.locked { filter: grayscale(.85); }
.game-card.locked .gc-art { opacity: .55; }
.lock { position: absolute; top: 26%; font-size: 56px; filter: drop-shadow(0 4px 0 #0005); }
.gc-sounds { position: absolute; top: 12px; right: 14px; padding: 2px 10px; border-radius: 999px; background: #0006; font-size: 18px; font-weight: 700; letter-spacing: .04em; }
.gc-new { position: absolute; top: -10px; right: -6px; padding: 4px 12px; border-radius: 999px; background: var(--gold); color: #4a2a00; font: 22px 'Lilita One', sans-serif; rotate: 8deg; box-shadow: 0 4px 0 #0003; animation: gc-new 1.4s ease-in-out infinite; }
@keyframes gc-new { 50% { scale: 1.12; rotate: -4deg; } }
@media (prefers-reduced-motion: reduce) { .gc-new { animation: none; } }

.game-area { flex: 1; position: relative; min-height: 0; margin-top: 10px; border-radius: 30px; overflow: hidden; }

.pop-area { background: linear-gradient(180deg, #120a2e, #3b1a6e 70%, #6b2a8a); box-shadow: inset 0 0 0 4px #ffffff22; }
/* A night over the city: twinkling stars, a moon, concert spotlights sweeping, and the golden Honmoon along the bottom. */
.dp-stars { position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(2px 2px at 12% 18%, #fff, transparent), radial-gradient(2px 2px at 32% 8%, #fff, transparent), radial-gradient(3px 3px at 52% 24%, #ffe9a8, transparent), radial-gradient(2px 2px at 72% 12%, #fff, transparent), radial-gradient(2px 2px at 88% 30%, #fff, transparent), radial-gradient(2px 2px at 22% 40%, #fff, transparent), radial-gradient(3px 3px at 64% 44%, #fff, transparent), radial-gradient(2px 2px at 42% 52%, #ffe9a8, transparent);
  animation: dp-twinkle 2.6s ease-in-out infinite; }
.dp-moon { position: absolute; right: 12%; top: 14%; width: clamp(50px, 8vw, 90px); aspect-ratio: 1; border-radius: 50%; background: #fff6d8; box-shadow: 0 0 40px 10px #fff6d855; pointer-events: none; }
.dp-moon::after { content: ''; position: absolute; inset: -6% -6% 6% 26%; border-radius: 50%; background: #2a1458; }
.dp-beam { position: absolute; bottom: 0; left: 26%; width: 140px; height: 120%; transform-origin: 50% 100%; translate: -50% 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(0deg, #ff4fd866, transparent 85%); clip-path: polygon(44% 100%, 56% 100%, 100% 0, 0 0); animation: dp-sweep 6s ease-in-out infinite alternate; }
.dp-beam.two { left: 74%; background: linear-gradient(0deg, #2fd8ff66, transparent 85%); animation-delay: -3s; animation-direction: alternate-reverse; }
.dp-city { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; pointer-events: none; background: #1a0b33;
  clip-path: polygon(0 100%, 0 40%, 6% 40%, 6% 20%, 12% 20%, 12% 55%, 18% 55%, 18% 10%, 21% 0, 24% 10%, 24% 45%, 32% 45%, 32% 25%, 40% 25%, 40% 60%, 46% 60%, 46% 30%, 52% 30%, 52% 15%, 58% 15%, 58% 50%, 66% 50%, 66% 20%, 72% 20%, 72% 40%, 80% 40%, 80% 8%, 86% 8%, 86% 50%, 92% 50%, 92% 30%, 100% 30%, 100% 100%); }
.honmoon { --power: 0; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; pointer-events: none;
  background: linear-gradient(90deg, #ffd23a, #fff3b0, #ff9f1c, #fff3b0, #ffd23a); background-size: 200% 100%;
  box-shadow: 0 0 calc(26px + var(--power) * 50px) calc(8px + var(--power) * 14px) #ffd23a; opacity: calc(.75 + var(--power) * .25);
  animation: honmoon 2s linear infinite; transition: box-shadow .4s, opacity .4s; }
.honmoon.surge { animation: honmoon 2s linear infinite, honmoon-surge .5s ease-out; }
.pop-hunter { position: absolute; left: 10px; bottom: 0; width: clamp(110px, 16vw, 170px); filter: drop-shadow(0 0 18px #b98aff); pointer-events: none; }
.pop-ear { position: absolute; right: 14px; top: 14px; z-index: 3; }
.slash { position: absolute; z-index: 4; height: 10px; translate: -50% -50%; border-radius: 10px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #fff 30%, #fff8c0 50%, #fff 70%, transparent); box-shadow: 0 0 18px 6px #ffd23a; }
.splash-word.zap { color: #ffe03a; -webkit-text-stroke-color: #4a1a8a; z-index: 5; }
.splash-word.combo { color: #fff; -webkit-text-stroke-color: #ff4fa3; font-size: clamp(44px, 8vw, 84px); }
.demon .d-eyes { transform-origin: 50px 32px; animation: d-blink 3.4s infinite; }
.demon svg { animation: d-bob var(--bob, 1.4s) ease-in-out infinite; }
.demon.cackle svg { animation: d-cackle .5s; }
@keyframes dp-twinkle { 50% { opacity: .55; } }
@keyframes dp-sweep { from { rotate: -22deg; } to { rotate: 22deg; } }
@keyframes honmoon { to { background-position: -200% 0; } }
@keyframes honmoon-surge { 40% { height: 26px; filter: brightness(1.5); } }
@keyframes d-blink { 0%, 92%, 100% { scale: 1 1; } 95% { scale: 1 .1; } }
@keyframes d-bob { 50% { scale: 1.06 .95; } }
@keyframes d-cackle { 20% { rotate: -12deg; scale: 1.1; } 40% { rotate: 10deg; } 60% { rotate: -8deg; scale: 1.05; } 80% { rotate: 5deg; } }
.demon { position: absolute; left: 0; top: 0; will-change: transform; touch-action: none; }
.demon svg { width: 100%; height: 100%; filter: drop-shadow(0 6px 0 #0004); }
.demon span { position: absolute; inset: 22% 0 0; display: grid; place-items: center; font-size: 46px; font-weight: 700; color: #fff; text-shadow: 0 3px 0 #0006; }
.demon.popped { pointer-events: none; }
/* Animate the demon's insides: scale on .demon itself would also scale its translate() and fling it across the screen. */
.demon.popped > * { animation: demon-swell .12s ease-in forwards; }
@keyframes demon-swell { to { scale: 1.25; } }
.burst { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.burst b { position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%; border: 6px solid var(--c); animation: burst-ring .45s ease-out forwards; }
.burst i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 3px; background: var(--c); box-shadow: 0 0 0 2px #fff8; animation: burst-shard .55s cubic-bezier(.15, .7, .3, 1) forwards; }
.burst i:nth-child(odd) { background: #fff; border-radius: 50%; width: 13px; height: 13px; }
@keyframes burst-ring { from { scale: .6; opacity: 1; } to { scale: 1.9; opacity: 0; border-width: 1px; } }
@keyframes burst-shard { from { transform: rotate(var(--a)) translateX(10px) scale(1); opacity: 1; } to { transform: rotate(var(--a)) translateX(var(--d)) scale(.3) rotate(180deg); opacity: 0; } }

.puddle-area { display: flex; flex-direction: column; background: linear-gradient(180deg, #5fc4ff, #a6e3ff 58%); }
.pz-play { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.pz-sun { position: absolute; right: 7%; top: 8%; width: clamp(70px, 10vw, 110px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(#fff6a8, #ffd23a 60%); box-shadow: 0 0 0 14px #ffe36a55, 0 0 60px 20px #ffe36a88; animation: pz-sun 3s ease-in-out infinite; }
.pz-cloud { position: absolute; top: 12%; left: 0; width: 130px; height: 44px; border-radius: 30px; background: #fff; opacity: .95; animation: pz-cloud 38s linear infinite; }
.pz-cloud::before, .pz-cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.pz-cloud::before { width: 60px; height: 60px; left: 18px; top: -30px; }
.pz-cloud::after { width: 44px; height: 44px; left: 64px; top: -20px; }
.pz-cloud.two { top: 30%; scale: .7; animation-duration: 55s; animation-delay: -30s; }
/* Rolling green hills, Peppa style. */
.pz-hill { position: absolute; left: -10%; right: -10%; bottom: 0; height: 36%; border-radius: 50% 50% 0 0 / 30% 30% 0 0; background: linear-gradient(180deg, #8ad65e, #5fb540); box-shadow: inset 0 10px 0 #a4e57a; }
.pz-hill.back { left: 40%; right: -30%; height: 46%; background: #74c84d; box-shadow: none; }
.puddle-top { flex: 1; display: flex; align-items: center; justify-content: center; gap: 20px; padding: 16px; }
.puddle-top .pic-card { animation: pop-in .45s cubic-bezier(.2, 1.5, .4, 1); }
.puddle-ground { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: clamp(14px, 4vw, 40px); padding: 0 16px 26px clamp(110px, 18vw, 170px); min-height: 200px; }
.piggy { position: absolute; left: 12px; bottom: 30px; width: clamp(96px, 15vw, 150px); z-index: 3; transform-origin: 50% 85%; pointer-events: none; }
.pig-body { position: relative; transform-origin: 50% 100%; animation: pig-wiggle 1.6s ease-in-out infinite; }
.piggy.leaping .pig-body { animation: none; }
.pig-mud { position: absolute; border-radius: 50% 45% 55% 40%; background: #7a4a26; box-shadow: inset -2px -3px 0 #5e3519; translate: -50% -50%; animation: pop-in .3s; }
.piggy.no { animation: pig-no .5s; }
.puddle {
  position: relative; z-index: 2;
  width: clamp(120px, 20vw, 200px); height: clamp(70px, 11vw, 110px); border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, #a8754a, #6e4423); box-shadow: inset 0 -8px 0 #0002, 0 6px 0 #4f8f43;
  display: grid; place-items: center;
  animation: puddle-in .5s cubic-bezier(.2, 1.5, .4, 1) calc(var(--i) * .1s) both, puddle-wobble 2.4s ease-in-out calc(var(--i) * .4s) infinite;
}
/* A glint of sky on the mud. */
.puddle::before { content: ''; position: absolute; left: 18%; top: 16%; width: 30%; height: 20%; border-radius: 50%; background: #fff5; rotate: -12deg; animation: glint 2.4s ease-in-out infinite; }
.puddle:active { scale: .94; }
.puddle span { position: relative; font-size: clamp(48px, 7vw, 72px); font-weight: 700; color: #fff; text-shadow: 0 3px 0 #0005; }
.puddle.splash { animation: splash .6s; }
.puddle.muddy { background: radial-gradient(ellipse at 50% 40%, #c48a5a, #7a4a26); }
.puddle.hint { box-shadow: 0 0 0 7px var(--gold), 0 6px 0 #4f8f43; animation: puddle-in .5s both, pulse 1s ease-in-out infinite; }
.mud-drop { position: absolute; z-index: 4; border-radius: 50%; pointer-events: none; box-shadow: inset -2px -3px 0 #0003; }
.mud-ring { position: absolute; z-index: 1; border-radius: 50%; border: 5px solid #fff9; pointer-events: none; }
.splash-word {
  position: absolute; z-index: 5; translate: -50% -50%; pointer-events: none; white-space: nowrap;
  font: 400 clamp(40px, 7vw, 72px) 'Lilita One', sans-serif; color: #ffd23a; letter-spacing: .03em;
  -webkit-text-stroke: 4px #6e4423; paint-order: stroke fill; text-shadow: 0 6px 0 #0004;
  animation: splash-word 1.3s cubic-bezier(.2, 1.6, .4, 1) forwards;
}
.game-area.thud { animation: thud .35s; }
@keyframes pz-sun { 50% { box-shadow: 0 0 0 22px #ffe36a44, 0 0 80px 30px #ffe36a99; } }
@keyframes pz-cloud { from { translate: -160px 0; } to { translate: calc(100vw + 40px) 0; } }
@keyframes pig-wiggle { 0%, 100% { scale: 1 1; translate: 0 0; } 40% { scale: 1.05 .94; } 60% { translate: 0 -10px; scale: .97 1.04; } 80% { translate: 0 0; } }
@keyframes pig-no { 20% { rotate: -10deg; } 45% { rotate: 9deg; } 70% { rotate: -6deg; } 90% { rotate: 3deg; } }
@keyframes puddle-in { from { scale: 0; } to { scale: 1; } }
@keyframes puddle-wobble { 50% { border-radius: 46% 54% 50% 50% / 55% 45% 55% 45%; } }
@keyframes glint { 50% { opacity: .4; translate: 6px 0; } }
@keyframes splash-word { 0% { scale: 0; rotate: -20deg; opacity: 1; } 25% { scale: 1.2; rotate: 6deg; } 40% { scale: 1; rotate: -4deg; } 80% { opacity: 1; translate: -50% -80%; } 100% { opacity: 0; translate: -50% -110%; scale: 1.1; } }
@keyframes thud { 30% { translate: 0 8px; } 60% { translate: 0 -3px; } }

.keepy-area { display: flex; flex-direction: column; background: repeating-linear-gradient(90deg, #ffe6c7 0 46px, #ffdcb4 46px 92px); }
.sky { position: relative; flex: 1; min-height: 0; }
/* Bluey's lounge room: a window onto the sky, a lamp and the couch. */
.ku-window { position: absolute; left: 8%; top: 10%; width: clamp(110px, 18vw, 200px); aspect-ratio: 1.2; border: 10px solid #fff; border-radius: 14px; background: linear-gradient(180deg, #5fc4ff, #bfeaff); box-shadow: 0 6px 0 #0001; overflow: hidden; }
.ku-window i { position: absolute; width: 60px; height: 22px; border-radius: 20px; background: #fff; top: 22%; animation: pz-cloud 24s linear infinite; }
.ku-window i:last-child { top: 58%; scale: .7; animation-delay: -12s; }
.ku-window::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(50% - 4px), #fff calc(50% - 4px) calc(50% + 4px), transparent 0); }
.ku-lamp { position: absolute; right: 26%; bottom: 0; width: 8px; height: 46%; background: #8a6a4a; }
.ku-lamp::before { content: ''; position: absolute; left: 50%; top: -48px; translate: -50% 0; width: 90px; height: 54px; background: #ffd23a; clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); }
.ku-lamp::after { content: ''; position: absolute; left: 50%; top: 6px; translate: -50% 0; width: 200px; height: 140px; border-radius: 50%; background: radial-gradient(#fff6a855, transparent 70%); pointer-events: none; }
.ku-couch { position: absolute; left: 4%; bottom: 0; width: clamp(150px, 26vw, 280px); height: 22%; border-radius: 26px 26px 0 0; background: linear-gradient(#6fa8dc 55%, #5b93c7 55%); }
.ku-couch::before, .ku-couch::after { content: ''; position: absolute; bottom: 0; width: 18%; height: 120%; border-radius: 20px 20px 0 0; background: #5b93c7; }
.ku-couch::before { left: -6%; } .ku-couch::after { right: -6%; }
.bal-shadow { position: absolute; left: 50%; bottom: -6px; width: 150px; height: 24px; border-radius: 50%; background: #5a3a1a; transform-origin: 50% 50%; z-index: 1; }
.balloon { position: absolute; left: 50%; top: 0; z-index: 2; width: clamp(150px, 22vw, 210px); cursor: pointer; will-change: transform; --bal: #ff4a5a; }
.bal-in { position: relative; transform-origin: 50% 90%; }
.balloon svg { width: 100%; filter: drop-shadow(0 8px 6px #0003); overflow: visible; }
.bal-skin { fill: var(--bal); transition: fill .4s; }
.bal-string { transform-origin: 50px 112px; animation: bal-string 1.2s ease-in-out infinite; }
.balloon.low .bal-in { animation: bal-low .5s ease-in-out infinite; }
.balloon-word { position: absolute; left: 0; right: 0; top: 24%; display: flex; justify-content: center; font-size: clamp(38px, 6vw, 56px); font-weight: 700; color: #fff; text-shadow: 0 3px 0 #0005; }
.pupper { position: absolute; right: 12px; bottom: 0; z-index: 3; width: clamp(90px, 14vw, 140px); transform-origin: 50% 100%; pointer-events: none; }
.pup-body { transform-origin: 50% 100%; animation: pig-wiggle 1.3s ease-in-out infinite; }
.pupper.no { animation: pig-no .5s; }
.floor { height: 16px; background: repeating-linear-gradient(90deg, #c9844a 0 40px, #b8743c 40px 80px); }
.keepy-pics { padding: 16px; background: #fff6e8; }
.keepy-pics .pic-card { animation: puddle-in .45s cubic-bezier(.2, 1.5, .4, 1) calc(var(--i) * .08s) both; }
.keepy-pics .pic-card.shake { animation: shake .4s; }
.ku-dust { position: absolute; z-index: 4; border-radius: 50%; background: #fff; box-shadow: inset -3px -4px 0 #e8d6c0; pointer-events: none; }
.splash-word.boop { color: #fff; -webkit-text-stroke-color: #3d8fe0; }
.splash-word.ohno { color: #ff4a5a; -webkit-text-stroke-color: #fff; }
@keyframes bal-string { 50% { rotate: 12deg; } }
@keyframes bal-low { 50% { translate: 0 -6px; filter: drop-shadow(0 0 14px #ff4a5a); } }

/* Rocket Kitty: a candy-coloured galaxy. */
.rocket-area { display: flex; flex-direction: column; background: radial-gradient(ellipse at 50% 120%, #ff4fd855, transparent 60%), linear-gradient(180deg, #0d0630, #2b0f5e 55%, #5a1a7a); box-shadow: inset 0 0 0 4px #ffffff22; }
.rk-nebula { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 18% 30%, #ff4fa355, transparent 30%), radial-gradient(circle at 80% 60%, #2fd8ff44, transparent 32%), radial-gradient(circle at 55% 15%, #b98aff55, transparent 28%), radial-gradient(circle at 35% 85%, #ffcf3a33, transparent 25%);
  animation: rk-nebula 12s ease-in-out infinite alternate; }
.rk-twinkle { position: absolute; inset: 0; pointer-events: none; opacity: .9;
  background-image: radial-gradient(2px 2px at 20px 30px, #fff, transparent), radial-gradient(2px 2px at 90px 120px, #ffe9a8, transparent), radial-gradient(3px 3px at 160px 60px, #fff, transparent), radial-gradient(2px 2px at 230px 170px, #bff3ff, transparent), radial-gradient(2px 2px at 60px 200px, #ffd0f0, transparent);
  background-size: 260px 230px; animation: rk-twinkle 2.6s ease-in-out infinite; }
.rk-twinkle.two { background-size: 190px 170px; background-position: 70px 40px; animation-delay: -1.3s; }
.rk-ringed { position: absolute; right: 6%; top: 18%; width: clamp(70px, 11vw, 120px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe08a, #ff9f1c 55%, #e0405a); animation: pz-sun 4s ease-in-out infinite; pointer-events: none; }
.rk-ringed::after { content: ''; position: absolute; left: -35%; right: -35%; top: 38%; height: 26%; border-radius: 50%; border: 6px solid #ffd0f0cc; rotate: -18deg; }
.rk-moon { position: absolute; left: 22%; top: 34%; width: 34px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e9f8ff, #8fd0ff); box-shadow: 0 0 18px #8fd0ff; animation: rk-orbit 9s ease-in-out infinite alternate; pointer-events: none; }
.rk-shoot { position: absolute; left: 0; top: 0; width: 120px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, #fff); rotate: 25deg; animation: rk-shoot 7s linear infinite; pointer-events: none; }
.rk-galaxy { position: relative; z-index: 1; display: flex; justify-content: center; gap: clamp(8px, 2vw, 18px); padding: 12px 12px 0; }
.rk-world { width: clamp(44px, 7vw, 64px); aspect-ratio: 1; border-radius: 50%; border: 3px dashed #ffffff55; display: grid; place-items: center; }
.rk-world.got { border: 0; background: radial-gradient(circle at 35% 30%, var(--w1), var(--w2)); box-shadow: 0 0 18px var(--w1), inset -6px -6px 0 #0002; animation: pop-in .5s cubic-bezier(.2, 1.6, .4, 1), rk-spin-world 6s ease-in-out .5s infinite; }
.rk-world span { font-size: clamp(24px, 4vw, 36px); line-height: 1; }
.rk-play { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: 6px; min-height: 0; padding: 4px 16px 24px clamp(120px, 19vw, 190px); }
.rk-top { display: flex; align-items: center; gap: 20px; }
.rk-top .pic-card { animation: pop-in .45s cubic-bezier(.2, 1.5, .4, 1); }
.rk-slots { display: flex; gap: 12px; }
.rk-slot { width: clamp(66px, 10vw, 96px); height: clamp(76px, 11vw, 106px); border-radius: 22px; border: 4px dashed #ffffff88; background: #ffffff14; display: grid; place-items: center; font-size: clamp(46px, 7vw, 68px); font-weight: 700; color: #fff; }
.rk-slot.next { border-color: var(--gold); box-shadow: 0 0 18px #ffcf3a88; animation: pulse 1.2s ease-in-out infinite; }
.rk-slot.filled { border: 0; background: linear-gradient(180deg, #ff7ad0, #8a4dff); box-shadow: 0 6px 0 #4a1a8a; text-shadow: 0 3px 0 #0004; }
.rk-slots.solved .rk-slot { animation: rk-hop .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.rk-slots.solved .rk-slot:nth-child(2) { animation-delay: .1s; } .rk-slots.solved .rk-slot:nth-child(3) { animation-delay: .2s; } .rk-slots.solved .rk-slot:nth-child(4) { animation-delay: .3s; }
.rk-field { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(6px, 1.6vw, 20px); max-width: 900px; }
.rk-star { position: relative; width: clamp(84px, 11vw, 124px); aspect-ratio: 1; translate: 0 var(--dy); animation: rk-star-in .45s cubic-bezier(.2, 1.6, .4, 1) calc(var(--i) * .08s) backwards, rk-bob var(--tw) ease-in-out calc(var(--i) * -.5s) infinite; }
.rk-star svg, .rk-fly svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 10px #fff6) drop-shadow(0 5px 0 #0003); }
.rk-star span, .rk-fly span { position: relative; display: grid; place-items: center; height: 100%; padding-top: 10%; font-size: clamp(34px, 5vw, 50px); font-weight: 700; color: #fff; text-shadow: 0 2px 0 #0007, 0 0 6px #0005; }
.rk-star:active { scale: .9; }
.rk-star.twinkle svg { animation: rk-twinkle-star .5s; }
.rk-star.shake { animation: shake .4s; }
.rk-star.hint svg { filter: drop-shadow(0 0 14px var(--gold)) drop-shadow(0 0 4px #fff); }
.rk-star.hint { animation: pulse 1s ease-in-out infinite; box-shadow: none !important; }
.rk-fly { position: absolute; z-index: 6; pointer-events: none; }
.rk-rocket { position: absolute; left: clamp(8px, 2vw, 24px); bottom: 14px; z-index: 3; width: clamp(100px, 15vw, 150px); --fuel: 0; pointer-events: none; animation: rk-hover 2.4s ease-in-out infinite; }
.rk-rocket > svg { position: relative; width: 100%; display: block; filter: drop-shadow(0 6px 10px #0006); overflow: visible; }
.rk-fuel { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--fuel)); transition: transform .4s cubic-bezier(.2, 1.6, .4, 1); }
.rk-pilot { position: absolute; left: 50%; top: 42.2%; width: 40%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; overflow: hidden; }
.rk-pilot svg { width: 100%; height: 100%; display: block; }
.rk-flame { position: absolute; left: 50%; top: 88%; width: 34%; height: 18%; translate: -50% 0; border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%; background: radial-gradient(ellipse at 50% 20%, #fff 0 15%, #ffe03a 35%, #ff9f1c 60%, #ff4fa3); transform-origin: 50% 0; scale: 1 calc(.4 + var(--fuel) * .6); transition: scale .3s; animation: rk-flicker .15s ease-in-out infinite alternate; }
.rk-rocket.ready { animation: rk-rumble .08s linear infinite; }
.rk-rocket.ready .rk-flame { scale: 1.3 1.8; }
.rk-rocket.launch .rk-flame { scale: 1.6 3.4; }
.rk-trail { position: absolute; z-index: 2; border-radius: 50%; pointer-events: none; box-shadow: 0 0 12px currentColor; }
.splash-word.count { color: #fff; -webkit-text-stroke-color: #ff4fa3; font-size: clamp(56px, 9vw, 96px); }
.splash-word.blast { color: #ffe03a; -webkit-text-stroke-color: #8a2be2; font-size: clamp(44px, 8vw, 84px); }
@keyframes rk-nebula { to { filter: hue-rotate(40deg); transform: scale(1.08); } }
@keyframes rk-twinkle { 50% { opacity: .35; } }
@keyframes rk-orbit { to { translate: 60px 20px; } }
@keyframes rk-shoot { 0%, 80% { translate: -150px 40px; opacity: 0; } 82% { opacity: 1; } 92%, 100% { translate: 110vw 360px; opacity: 0; } }
@keyframes rk-spin-world { 50% { rotate: 10deg; scale: 1.08; } }
@keyframes rk-star-in { from { scale: 0; } }
@keyframes rk-bob { 50% { transform: translateY(-10px) rotate(6deg); } }
@keyframes rk-hop { 40% { transform: translateY(-18px) scale(1.12); } }
@keyframes rk-twinkle-star { 50% { scale: 1.3; rotate: 36deg; } }
@keyframes rk-hover { 50% { translate: 0 -8px; } }
@keyframes rk-rumble { 25% { translate: -2px 1px; } 75% { translate: 2px -1px; } }
@keyframes rk-flicker { to { transform: scale(.85, 1.15); } }

/* ---------- leaderboard ---------- */
.board { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-block: 8px; }
.board-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; width: min(100%, 760px); }
.board-list .row {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: left;
  background: var(--card); color: var(--card-ink); border-radius: 26px; padding: 10px 18px 10px 10px;
  box-shadow: 0 6px 0 var(--line);
}
.board-list li.me .row { box-shadow: 0 0 0 5px var(--accent), 0 6px 0 var(--line); }
.rank { width: 46px; text-align: center; font-size: 34px; flex: none; }
.board-list .av { width: 68px; height: 68px; }
.who { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nm { font-size: 26px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.path { height: 14px; border-radius: 10px; background: var(--line); overflow: hidden; }
.path i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--gold)); border-radius: 10px; }
.set { font-size: 18px; color: var(--soft); letter-spacing: .1em; }
.st { font-size: 30px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- friends on other tablets ---------- */
.friends { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; width: min(100%, 1040px); }
.friends[hidden] { display: none; }
.friend {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 18px 6px 6px;
  background: var(--card); color: var(--card-ink); border-radius: 999px; box-shadow: 0 5px 0 var(--line);
  animation: pop-in .4s cubic-bezier(.2, 1.6, .4, 1);
}
.friend:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--line); }
.friend .av { width: 56px; height: 56px; }
.fr-name { font-size: 22px; font-weight: 700; max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend.busy { opacity: .7; }
/* The green "playing now" dot, on friends and on their cards elsewhere. */
.friend::after, .player-card.online::after, .board-list .row.online::after {
  content: ''; position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: #2fcf7a; box-shadow: 0 0 0 3px var(--card); animation: pulse 1.6s ease-in-out infinite;
}
.friend.busy::after { background: var(--gold); animation: none; }
.player-card, .board-list .row { position: relative; }
.player-card.online::after { top: 12px; left: 12px; width: 22px; height: 22px; }

.fr-layer { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: #0006; animation: fr-fade .2s; }
@keyframes fr-fade { from { opacity: 0; } }
.fr-pop {
  display: flex; flex-direction: column; align-items: center; gap: 18px; width: min(100%, 460px);
  background: var(--card); color: var(--card-ink); border-radius: 32px; padding: 22px; box-shadow: 0 10px 0 var(--line), 0 20px 40px #0005;
  animation: pop-in .35s cubic-bezier(.2, 1.6, .4, 1);
}
.fr-head { display: flex; align-items: center; gap: 12px; font-size: 28px; }
.fr-head .av { width: 72px; height: 72px; }
.fr-emojis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.fr-emoji { font-size: 52px; width: 92px; height: 92px; border-radius: 24px; background: color-mix(in srgb, var(--card-ink) 8%, transparent); }
.fr-emoji:active { transform: scale(.9); }
.fr-play { font-size: 28px; }
.fr-pair { display: flex; align-items: center; gap: 14px; }
.fr-pair .av { width: clamp(84px, 22vw, 120px); height: clamp(84px, 22vw, 120px); }
.fr-pair .av .emoji-av { font-size: 64px; }
.fr-hands { font-size: 56px; animation: pulse 1.2s ease-in-out infinite; }
.fr-btns { display: flex; gap: 20px; }
.fr-btns .chunky, .fr-ask .fr-no { font-size: 40px; min-width: 110px; }
.fr-wait { display: flex; gap: 12px; }
.fr-wait i { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); animation: pulse 1s ease-in-out infinite; }
.fr-wait i:nth-child(2) { animation-delay: .2s; } .fr-wait i:nth-child(3) { animation-delay: .4s; }

.fr-toast {
  position: fixed; z-index: 35; top: max(14px, env(safe-area-inset-top)); left: 50%; translate: -50% 0;
  display: flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border-radius: 999px;
  background: var(--card); color: var(--card-ink); box-shadow: 0 6px 0 var(--line), 0 12px 30px #0004;
  pointer-events: none; animation: pop-in .4s cubic-bezier(.2, 1.6, .4, 1);
}
.fr-toast .av { width: 64px; height: 64px; }
.fr-big { font-size: 60px; line-height: 1; animation: bounce .8s ease-in-out 2; }

.coop-bar .av { width: clamp(48px, 8vw, 64px); height: clamp(48px, 8vw, 64px); }
.coop-bar .co-me { box-shadow: 0 0 0 4px var(--gold); }
.coop-bar .co-friend { box-shadow: 0 0 0 4px var(--accent2); }
.coop-bar .dot.mine { background: var(--gold); }
.coop-bar .dot.theirs { background: var(--accent2); }
.finish-arts { display: flex; gap: 20px; }

/* ---------- finish ---------- */
.finish { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; }
.finish-art { width: clamp(110px, 18vw, 190px); aspect-ratio: 1; border-radius: 50%; background: var(--card); overflow: hidden; display: grid; place-items: center; animation: pop-in .5s cubic-bezier(.2, 1.6, .4, 1); box-shadow: 0 0 0 8px var(--gold); }
.finish-art svg { width: 100%; height: 100%; }
.finish-art .emoji-av { font-size: 110px; }
.finish-title { font-size: clamp(48px, 9vw, 84px); color: var(--gold); text-shadow: 0 5px 0 #0003; }
.finish-set { display: flex; gap: 10px; }
.finish-set b { background: var(--tile); color: var(--tile-ink); font-size: 56px; padding: 0 18px; border-radius: 18px; box-shadow: 0 6px 0 var(--line); animation: pop-in .5s backwards; }
.finish-set b:nth-child(2) { animation-delay: .15s; } .finish-set b:nth-child(3) { animation-delay: .3s; } .finish-set b:nth-child(4) { animation-delay: .45s; }
.finish-prize { display: flex; align-items: center; gap: 10px; font-size: 54px; }
.mini-wheel { width: 70px; display: inline-block; }
.mini-wheel .mini-rot { transform-origin: 50px 50px; animation: lazyspin 3s linear infinite; }
.finish-btns { display: flex; gap: 18px; margin-top: 10px; }

/* ---------- grown-ups ---------- */
.s-grownups { -webkit-user-select: text; user-select: text; }
.gu { width: min(100%, 860px); margin: 0 auto; display: flex; flex-direction: column; gap: 18px; padding-block: 8px 30px; font-size: 17px; line-height: 1.5; }
.gu h2 { font: 400 36px 'Lilita One', sans-serif; margin: 0; }
.gu h3 { margin: 0 0 8px; font-size: 22px; }
.gu p { margin: 0 0 10px; max-width: 65ch; }
.gu section { background: var(--card); color: var(--card-ink); border-radius: 22px; padding: 18px 20px; }
.gu-head { display: flex; align-items: center; gap: 16px; }
.gate { align-items: center; text-align: center; margin: auto; }
.gate .back { align-self: flex-start; }
.gate-quiz { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.gate-quiz.nope { animation: shake .4s; }
.gate-q { font: 400 30px/1.3 'Lilita One', sans-serif; margin: 0; max-width: 22ch; }
.gate-blank { display: inline-block; min-width: 3ch; border-bottom: 4px solid var(--accent); color: var(--accent); }
.gu .gate-quiz input[type="text"] { font-size: 24px; text-align: center; width: 12ch; }
.gate-go { font-size: 22px; font-weight: 700; padding: 10px 34px; border-radius: 999px; background: var(--accent); color: #fff; box-shadow: 0 4px 0 var(--line); }
.gu h4 { margin: 12px 0 6px; font-size: 17px; }
.vl { display: flex; flex-wrap: wrap; gap: 8px; }
.vl button { height: 38px; border-radius: 999px; padding: 0 14px; font-size: 15px; background: transparent; color: var(--card-ink); border: 2px solid var(--line); }
.vl button:active { background: color-mix(in srgb, var(--accent2) 25%, transparent); }
.gu-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.gu select, .gu input[type="text"], .sg-say { font: inherit; padding: 6px 10px; border-radius: 10px; border: 2px solid var(--line); background: var(--tile); color: var(--tile-ink); max-width: 100%; }
.gu input[type="range"] { width: 200px; accent-color: var(--accent); }
.gu input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--accent); }
.sound-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.sg { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px; background: color-mix(in srgb, var(--card-ink) 6%, transparent); }
.sg b { width: 42px; font-size: 26px; text-align: center; }
.sg-say { width: 80px; flex: 1; min-width: 0; }
.sg button { width: 40px; height: 40px; border-radius: 50%; background: var(--accent2); color: #fff; font-size: 16px; flex: none; }
.sg .sg-rec { background: #e8364f; }
.sg .sg-rec.rec-on { animation: pulse .6s infinite; box-shadow: 0 0 0 5px #e8364f66; }
.sg .sg-del { background: var(--soft); }
.sg { flex-wrap: wrap; }
.sg-from { display: flex; gap: 6px; flex-basis: 100%; }
.sg .sg-from button, .sg-all button { width: auto; height: 34px; flex: 1; border-radius: 999px; padding: 0 12px; font-size: 14px; background: transparent; color: var(--card-ink); border: 2px solid var(--line); }
.sg-all { gap: 8px; margin-bottom: 8px; }
.sg-all button { flex: none; height: 40px; font-size: 16px; }
.sg .sg-from button:disabled { opacity: .35; }
.sg .sg-from button.on { background: var(--accent2); border-color: var(--accent2); color: #fff; font-weight: 700; }
.gu-players { display: flex; flex-direction: column; gap: 10px; }
.gp { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gp-name { flex: 1; min-width: 120px; font-weight: 700; display: flex; flex-direction: column; }
.gp-name small { font-weight: 400; color: var(--soft); }
.gp-level { max-width: 220px; }
.gp-del { position: relative; width: 48px; height: 48px; border-radius: 50%; background: #e8364f22; font-size: 22px; overflow: hidden; }
.gp-del::before { content: ''; position: absolute; inset: 0; background: #e8364f; transform: scaleY(0); transform-origin: bottom; }
.gp-del.holding::before { transform: scaleY(1); transition: transform var(--hold) linear; }

/* ---------- effects ---------- */
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }
.float-text { position: fixed; z-index: 40; transform: translate(-50%, 0); font-size: 46px; pointer-events: none; animation: float-up 1.2s ease-out forwards; }
.bounce { animation: bounce .4s; }
.shake { animation: shake .4s; }
.pop-in { animation: pop-in .35s cubic-bezier(.2, 1.6, .4, 1); }

@keyframes bounce { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.15); } 70% { transform: scale(.95); } }
@keyframes shake { 0%, 100% { translate: 0; } 20% { translate: -12px; } 40% { translate: 10px; } 60% { translate: -8px; } 80% { translate: 5px; } }
@keyframes pop-in { 0% { transform: scale(.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes pulse { 0%, 100% { scale: 1; } 50% { scale: 1.08; } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 var(--accent); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 30%, transparent); } }
@keyframes float-up { 0% { opacity: 0; translate: 0 10px; scale: .5; } 20% { opacity: 1; scale: 1.2; } 100% { opacity: 0; translate: 0 -120px; scale: 1; } }
@keyframes flick { 50% { rotate: -14deg; } }
@keyframes lazyspin { to { transform: rotate(360deg); } }
@keyframes splash { 0% { scale: 1; } 30% { scale: 1.25 .8; } 60% { scale: .95 1.1; } 100% { scale: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hub.ready .hub-btn.learn, .chunky.ready { outline: 8px solid color-mix(in srgb, var(--gold) 80%, transparent); outline-offset: 6px; }
}

/* ---------- phones ---------- */
@media (max-width: 640px) {
  .hub-buttons { grid-template-columns: 1fr 1fr; }
  .hub-btn.learn { grid-column: 1 / -1; min-height: 210px; }
  .hub-btn { min-height: 180px; border-radius: 28px; }
  .hb-art { width: 40%; }
  .tb-name { display: none; }
  .tb-btn { width: 48px; height: 48px; font-size: 22px; }
  .tb-me .av { width: 44px; height: 44px; }
  .tb-stat { font-size: 20px; padding: 6px 12px; }
  #topbar { gap: 8px; }
  .tb-right { gap: 6px; }
  .wtile { font-size: 56px; }
  .ear { width: 64px; height: 64px; font-size: 30px; }
  .choices.pics .pic-card { width: 100px; height: 100px; }
  .choices.pics .pic-card span { font-size: 58px; }
  .puddle-ground { padding-left: 90px; gap: 10px; }
  .puddle { width: 84px; height: 56px; }
  .piggy { width: 80px; }
  .rk-play { padding-left: 84px; }
  .rk-rocket { width: 76px; }
  .rk-star { width: 78px; }
  .rk-slot { width: 56px; height: 64px; }
  .dots { gap: 5px; }
  .dots .dot { width: 20px; height: 20px; }
}
/* Narrow phones: five header buttons plus the stars only fit when smaller. */
@media (max-width: 420px) {
  .tb-me { padding: 3px; flex: none; }
  .tb-me .av { width: 40px; height: 40px; }
  .tb-btn { width: 42px; height: 42px; font-size: 19px; }
  .tb-stat { font-size: 18px; padding: 6px 10px; }
  #topbar { gap: 6px; }
  .tb-right { gap: 5px; }
}

/* ---------- mini games: listen, then pick from two (gameKit.narrow) ---------- */
.gk-rest { opacity: .3; pointer-events: none; transition: opacity .3s; }
.gk-gone { opacity: .12 !important; filter: grayscale(1); pointer-events: none; transition: opacity .3s; }
.gk-gold { filter: drop-shadow(0 0 14px var(--gold)) brightness(1.08); }