* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
html { background: #F4ECDC; }
body {
  font-family: "Nunito", system-ui, sans-serif;
  color: var(--ink, #4A3B2F);
  overflow-x: hidden;
}
#root { min-height: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ---------------- Themes ---------------- */
.theme-everyone {
  --paper: #FBF4E4; --paper2: #F4E8CE; --ink: #4A3B2F; --muted: #93826C;
  --card: #FFFDF7; --brand: #D9734E; --buddy: #7FB85A; --ring: rgba(217,115,78,.25);
}
.theme-ryan {
  --paper: #EAF1FF; --paper2: #D9E6FF; --ink: #1E2A52; --muted: #6173A0;
  --card: #FFFFFF; --brand: #E6453F; --buddy: #2D6BE0; --ring: rgba(45,107,224,.22);
}
.theme-ashlynn {
  --paper: #FBEAF7; --paper2: #F0E0FF; --ink: #5A2D63; --muted: #A07AAB;
  --card: #FFFFFF; --brand: #EC5BA8; --buddy: #9B5DE0; --ring: rgba(155,93,224,.22);
}

.rp-root, .rp-screen { min-height: 100vh; min-height: 100dvh; }

.rp-screen {
  position: relative;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--paper) 0%, var(--paper2) 100%);
  overflow: hidden;
  padding: clamp(16px, 3vw, 40px);
}
.rp-screen::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, rgba(0,0,0,.035) 1.4px, transparent 1.6px);
  background-size: 26px 26px;
  opacity: .5;
}
.rp-screen > * { position: relative; z-index: 1; }

/* ---------------- Decor ---------------- */
.rp-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.rp-decor-item { position: absolute; opacity: .8; }
@keyframes drift { 0%,100%{ transform: translateY(0) rotate(-6deg);} 50%{ transform: translateY(-16px) rotate(6deg);} }
@keyframes drift2 { 0%,100%{ transform: translateY(0) rotate(8deg);} 50%{ transform: translateY(18px) rotate(-6deg);} }
@keyframes twinkle { 0%,100%{ transform: scale(.7) rotate(0); opacity:.4;} 50%{ transform: scale(1.15) rotate(40deg); opacity:1;} }
.rp-drift { animation: drift 7s ease-in-out infinite; }
.rp-drift2 { animation: drift2 9s ease-in-out infinite; }
.rp-twinkle { animation: twinkle 3.4s ease-in-out infinite; }
.rp-twinkle2 { animation: twinkle 4.2s ease-in-out infinite .6s; }

/* swaying foliage (flowers, grass) — pivot at the base */
@keyframes sway { 0%,100%{ transform: rotate(-5deg);} 50%{ transform: rotate(5deg);} }
@keyframes sway2 { 0%,100%{ transform: rotate(6deg);} 50%{ transform: rotate(-4deg);} }
.rp-sway { animation: sway 4.6s ease-in-out infinite; transform-origin: bottom center; }
.rp-sway2 { animation: sway2 5.6s ease-in-out infinite .4s; transform-origin: bottom center; }

/* sky — bright blue backdrop with sun + drifting clouds (garden screens only) */
.rp-sky { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, #6FC2F0 0%, #93D4F4 40%, #C2E9FB 70%, #E4F6FD 100%); }
.rp-sun { position: absolute; top: 12px; left: clamp(80px, 9vw, 150px); z-index: 0; pointer-events: none; }
.rp-cloud { position: absolute; z-index: 0; pointer-events: none; opacity: .97; }
@keyframes cloudA { 0%,100%{ transform: translateX(0);} 50%{ transform: translateX(28px);} }
@keyframes cloudB { 0%,100%{ transform: translateX(0);} 50%{ transform: translateX(-32px);} }
.rp-cloud-a { animation: cloudA 22s ease-in-out infinite; }
.rp-cloud-b { animation: cloudB 28s ease-in-out infinite; }
/* the garden screens use the sky, not the cream dot texture */
.rp-screen.theme-everyone::before { display: none; }

/* garden floor — lawn, trees, bushes, grass fringe (all anchored to the bottom) */
.rp-ground { position: absolute; left: 0; right: 0; bottom: -2px; z-index: 0; opacity: .9; line-height: 0; }
.rp-tree { position: absolute; bottom: 6px; z-index: 0; transform-origin: bottom center; }
.rp-bush { position: absolute; bottom: 0; z-index: 0; line-height: 0; }
.rp-grass { position: absolute; bottom: -4px; z-index: 0; opacity: .92; transform-origin: bottom center; line-height: 0; }
@keyframes treesway { 0%,100%{ transform: rotate(-1.6deg);} 50%{ transform: rotate(1.6deg);} }
@keyframes treesway2 { 0%,100%{ transform: rotate(1.8deg);} 50%{ transform: rotate(-1.2deg);} }
.rp-treesway { animation: treesway 7s ease-in-out infinite; }
.rp-treesway2 { animation: treesway2 8.6s ease-in-out infinite .5s; }

/* crawling / fluttering bugs — outer slides across, inner bobs/flaps */
.rp-bug { position: absolute; left: 0; z-index: 0; opacity: .96; pointer-events: none; will-change: transform; }
@keyframes crawlRight { from { transform: translateX(-18vw);} to { transform: translateX(118vw);} }
@keyframes crawlLeft { from { transform: translateX(118vw);} to { transform: translateX(-18vw);} }
.rp-crawl-r { animation-name: crawlRight; animation-timing-function: linear; animation-iteration-count: infinite; }
.rp-crawl-l { animation-name: crawlLeft; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes crawlBob { 0%,100%{ transform: translateY(0) rotate(-2.5deg);} 50%{ transform: translateY(-5px) rotate(2.5deg);} }
.rp-crawl-bob { display: inline-block; animation: crawlBob .85s ease-in-out infinite; will-change: transform; }
/* butterflies loop a figure-8 (outer path) with a fast wing-flap (inner scaleX) */
.rp-bfly { position: absolute; z-index: 0; pointer-events: none; will-change: transform; animation-name: fig8; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
@keyframes fig8 {
  0%   { transform: translate(0, 0); }
  12.5%{ transform: translate(64px, 30px); }
  25%  { transform: translate(90px, 0); }
  37.5%{ transform: translate(64px, -30px); }
  50%  { transform: translate(0, 0); }
  62.5%{ transform: translate(-64px, 30px); }
  75%  { transform: translate(-90px, 0); }
  87.5%{ transform: translate(-64px, -30px); }
  100% { transform: translate(0, 0); }
}
@keyframes flap { 0%,100%{ transform: scaleX(1);} 50%{ transform: scaleX(.55);} }
.rp-flap { display: inline-block; animation: flap .34s ease-in-out infinite; will-change: transform; }
.rp-gflower { position: absolute; z-index: 0; transform-origin: bottom center; }

/* respect reduced-motion: keep a calm garden, no roaming bugs */
@media (prefers-reduced-motion: reduce) {
  .rp-grass, .rp-gflower, .rp-treesway, .rp-treesway2, .rp-cloud, .rp-crawl-bob, .rp-flap { animation: none; }
  .rp-bug, .rp-bfly { display: none; }
}

/* ---------------- Shared motion ---------------- */
@keyframes bob { 0%,100%{ transform: translateY(0) rotate(-1.5deg);} 50%{ transform: translateY(-14px) rotate(1.5deg);} }
@keyframes wigglesoft { 0%,100%{ transform: rotate(-4deg);} 50%{ transform: rotate(4deg);} }
.bob { animation: bob 3.6s ease-in-out infinite; display: inline-block; }
.wiggle-soft { animation: wigglesoft 2.4s ease-in-out infinite; display: inline-block; transform-origin: bottom center; }

/* ---------------- Picker ---------------- */
.rp-picker-screen { display: flex; align-items: center; justify-content: center; }
.rp-picker-inner { width: 100%; max-width: 1000px; text-align: center; }
.rp-site-title {
  font-family: "Baloo 2", sans-serif; font-weight: 800; white-space: nowrap; line-height: 1;
  font-size: clamp(32px, 7vw, 66px); color: #4F9E43;
  margin: 0 0 clamp(4px, 1vw, 12px);
  text-shadow: 0 3px 0 rgba(255,255,255,.78);
}
.rp-picker-title {
  font-family: "Baloo 2", sans-serif; font-weight: 800;
  font-size: clamp(30px, 6vw, 60px); color: var(--ink);
  margin: 0 0 clamp(20px, 4vw, 46px);
  text-shadow: 0 3px 0 rgba(255,255,255,.6);
}
.rp-picker-grid {
  display: grid; gap: clamp(16px, 3vw, 30px);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.rp-picker-card {
  background: var(--card);
  border-radius: 36px;
  padding: clamp(20px, 3vw, 36px) 18px clamp(18px, 3vw, 28px);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  box-shadow: 0 16px 0 rgba(0,0,0,.06), 0 26px 44px rgba(0,0,0,.12);
  border: 5px solid #fff;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
  outline: none;
}
.rp-picker-card:hover { transform: translateY(-8px) scale(1.02); }
.rp-picker-card:active { transform: translateY(2px) scale(.98); }
.pick-ryan { background: linear-gradient(180deg,#EAF1FF,#fff); }
.pick-ashlynn { background: linear-gradient(180deg,#FBEAF7,#fff); }
.pick-everyone { background: linear-gradient(180deg,#FBF4E4,#fff); }
.rp-picker-char { height: 198px; display: flex; align-items: flex-end; justify-content: center; }
.rp-picker-name { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: clamp(24px,3vw,32px); color: var(--ink); }
.rp-picker-love { font-weight: 700; color: var(--muted); font-size: clamp(13px,1.6vw,16px); }
.rp-picker-hint { margin-top: clamp(20px,4vw,40px); font-weight: 800; color: var(--muted); font-size: clamp(15px,2vw,19px); }

/* Phone: collapse the three big stacked cards into one compact row (profile-picker
   style) so the garden scene behind them stays visible, and drop the picker content
   below the fixed volume cluster so it stops colliding with the title. Desktop keeps
   the large auto-fit cards above. */
@media (max-width: 560px) {
  .rp-picker-inner { padding-top: 60px; }
  .rp-site-title  { font-size: clamp(26px, 8vw, 40px); margin-bottom: 2px; }
  .rp-picker-title { font-size: clamp(22px, 6.5vw, 38px); margin-bottom: clamp(12px, 4vw, 22px); }

  .rp-picker-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .rp-picker-card {
    border-radius: 20px; border-width: 4px; padding: 12px 6px; gap: 2px;
    box-shadow: 0 8px 0 rgba(0,0,0,.05), 0 14px 20px rgba(0,0,0,.12);
  }
  .rp-picker-char { height: 92px; }
  .rp-picker-char .rp-buddy-img { width: 100% !important; height: 100% !important;
    filter: drop-shadow(0 5px 7px rgba(0,0,0,.16)); }
  .pick-ryan     .rp-picker-char .rp-buddy-img { transform: translateY(6px); }
  .pick-everyone .rp-picker-char .rp-buddy-img { transform: translateY(3px); }
  .rp-picker-name { font-size: clamp(15px, 4.6vw, 22px); }
  .rp-picker-love { display: none; }
  .rp-picker-hint { margin-top: clamp(16px, 5vw, 28px); font-size: clamp(14px, 4vw, 18px); }
}

/* ---------------- Home top bar ---------------- */
.rp-home-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1100px; margin: 0 auto clamp(8px,2vw,16px); }
.rp-switch {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border-radius: 999px; padding: 6px 16px 6px 6px;
  box-shadow: 0 8px 0 rgba(0,0,0,.05), 0 12px 22px rgba(0,0,0,.1);
  border: 3px solid #fff; transition: transform .15s;
}
.rp-switch:active { transform: scale(.96); }
.rp-switch-face { width: 44px; height: 44px; border-radius: 50%; background: var(--paper2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rp-switch-face svg { transform: translateY(2px); }
.rp-switch-name { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 18px; color: var(--ink); }
.rp-switch-swap { color: var(--brand); font-weight: 900; font-size: 18px; }
.rp-sound {
  width: 52px; height: 52px; border-radius: 50%; font-size: 24px;
  background: var(--card); box-shadow: 0 8px 0 rgba(0,0,0,.05), 0 12px 22px rgba(0,0,0,.1);
  border: 3px solid #fff; transition: transform .15s;
}
.rp-sound:active { transform: scale(.92); }

/* Volume cluster (➖ · 🔊/🔇 · ➕) — fixed top-right on every screen */
.rp-snd { position: fixed; top: clamp(16px, 3vw, 40px); right: clamp(14px, 3vw, 34px); z-index: 30;
  display: flex; gap: 8px; align-items: center; }
.rp-snd-btn { width: 50px; height: 50px; border-radius: 50%; font-size: 23px; line-height: 1; padding: 0;
  background: #FFFDF7; box-shadow: 0 8px 0 rgba(0,0,0,.05), 0 12px 22px rgba(0,0,0,.1);
  border: 3px solid #fff; transition: transform .15s, opacity .15s;
  display: flex; align-items: center; justify-content: center; }
.rp-snd-btn:active { transform: scale(.9); }
.rp-snd-btn.dim { opacity: .35; }
.rp-snd-mute.off { opacity: .6; }
.rp-sound.off { opacity: .55; }

/* ---------------- Hero ---------------- */
.rp-hero {
  max-width: 1100px; margin: clamp(6px,2vw,20px) auto clamp(20px,4vw,40px);
  display: flex; align-items: center; justify-content: center; gap: clamp(10px,3vw,40px);
  flex-wrap: wrap;
}
.rp-hero-char { flex: 0 0 auto; }
.rp-hero-text { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 440px; }
.rp-hero-logo { display: flex; flex-direction: column; line-height: 1; }
.rp-logo-roly { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: clamp(34px,5.5vw,62px); color: var(--brand); text-shadow: 0 4px 0 rgba(255,255,255,.7); white-space: nowrap; }
.rp-logo-place { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: clamp(34px,5.5vw,62px); color: var(--ink); text-shadow: 0 4px 0 rgba(255,255,255,.7); }
.rp-bubble-greet {
  position: relative; background: var(--card); color: var(--ink);
  font-weight: 800; font-size: clamp(16px,2.2vw,22px);
  padding: 16px 22px; border-radius: 22px; border: 3px solid #fff;
  box-shadow: 0 10px 0 rgba(0,0,0,.05), 0 16px 28px rgba(0,0,0,.1);
}
.rp-bubble-greet::after {
  content: ""; position: absolute; left: 36px; bottom: -16px;
  border: 10px solid transparent; border-top-color: var(--card); border-bottom: 0;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.04));
}

/* ---------------- Activity grid ---------------- */
.rp-grid {
  max-width: 1100px; margin: 0 auto; display: grid; gap: clamp(16px,2.5vw,28px);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  padding-bottom: 40px;
}
.rp-card {
  position: relative; background: var(--card); border-radius: 32px;
  padding: clamp(22px,3vw,32px) 22px clamp(18px,2.5vw,26px);
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  border: 5px solid #fff;
  box-shadow: 0 14px 0 var(--ring), 0 22px 40px rgba(0,0,0,.12);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
  overflow: hidden;
}
.rp-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 50%;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.rp-card > * { position: relative; }
.rp-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 18px 0 var(--ring), 0 30px 50px rgba(0,0,0,.16); }
.rp-card:active { transform: translateY(2px) scale(.99); }
.rp-card-medallion {
  width: 132px; height: 132px; border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--accent) 22%, #fff);
  display: flex; align-items: center; justify-content: center; margin-bottom: 8px;
}
.rp-card-label { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: clamp(20px,2.4vw,26px); color: var(--ink); }
.rp-card-sub { font-weight: 700; color: var(--muted); font-size: clamp(13px,1.6vw,16px); }
.rp-card-go {
  margin-top: 12px; width: 54px; height: 54px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 20px;
  display: flex; align-items: center; justify-content: center; padding-left: 3px;
  box-shadow: 0 6px 0 color-mix(in srgb, var(--accent) 60%, #000 20%);
}
.rp-card-soon {
  position: absolute; top: 14px; right: 14px; background: var(--ink); color: #fff;
  font-weight: 800; font-size: 12px; padding: 4px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; opacity: .85;
}

/* ---------------- Activity ---------------- */
.rp-activity {
  position: relative; min-height: 100vh; min-height: 100dvh;
  background: radial-gradient(120% 80% at 50% -10%, var(--paper) 0%, var(--paper2) 100%);
  padding: clamp(14px,2.5vw,28px); display: flex; flex-direction: column; overflow: hidden;
}
.rp-activity::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(0,0,0,.035) 1.4px, transparent 1.6px);
  background-size: 26px 26px; opacity: .5;
}
.rp-activity > * { position: relative; z-index: 1; }
.rp-act-top { display: flex; align-items: center; gap: 16px; max-width: 1000px; margin: 0 auto; width: 100%; }
.rp-back, .rp-home-btn {
  width: 56px; height: 56px; border-radius: 50%; background: var(--card);
  box-shadow: 0 8px 0 rgba(0,0,0,.06), 0 12px 22px rgba(0,0,0,.12); border: 3px solid #fff;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: transform .15s;
}
.rp-back:active, .rp-home-btn:active { transform: scale(.92); }
.rp-back-arrow { font-size: 27px; line-height: 1; }
.rp-act-title { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: clamp(20px,3vw,30px); color: var(--ink); }
/* progress pips float at top-center (clear of the 🏠 left + volume cluster right), matching the video */
.rp-progress-track { position: fixed; top: clamp(22px, 3vw, 46px); left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; flex-wrap: wrap; max-width: 220px; justify-content: center; z-index: 6; }
.rp-pip { width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px var(--ring); transition: all .3s; }
.rp-pip.on { background: var(--buddy); box-shadow: inset 0 0 0 0 transparent; transform: scale(1.1); }

/* Phone: declutter the activity top bar. The title can't share one line with the
   fixed volume cluster, and the centered pips would tuck under it. Hide the title
   (an adult backstop — the games are visual + narrated) and drop the pips to their
   own row below the 🏠 + volume controls. */
@media (max-width: 560px) {
  .rp-act-title { display: none; }
  .rp-progress-track { top: 78px; }
}

.rp-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px,2vw,24px); max-width: 1000px; margin: 0 auto; width: 100%; padding: 10px 0; }
.rp-cat-wrap { display: flex; align-items: center; justify-content: center; transition: transform .35s cubic-bezier(.34,1.56,.64,1); min-height: 180px; }
.rp-cat-wrap.grow { transform: scale(1.07); }
.rp-replay { cursor: pointer; } /* tap the picture to hear the prompt again */

.rp-prompt { display: flex; justify-content: center; }
.rp-thought {
  background: var(--card); border: 4px solid #fff; border-radius: 28px;
  padding: 10px 28px; display: flex; align-items: center; gap: 14px;
  box-shadow: 0 10px 0 rgba(0,0,0,.05), 0 16px 28px rgba(0,0,0,.12);
}
.rp-thought-label { font-family: "Baloo 2", sans-serif; font-weight: 700; color: var(--muted); font-size: clamp(16px,2.4vw,24px); }
.rp-thought-num { font-family: "Baloo 2", sans-serif; font-weight: 800; color: var(--brand); font-size: clamp(44px,8vw,72px); line-height: 1; }
.rp-thought-word { font-family: "Baloo 2", sans-serif; font-weight: 800; color: var(--brand); font-size: clamp(26px,5vw,44px); line-height: 1; }

/* Beginning Sounds — the big picture the kid names */
.rp-sound-pic { font-size: clamp(96px,22vw,176px); line-height: 1; }

/* ---------------- Number bubbles ---------------- */
.rp-bubbles {
  display: flex; flex-wrap: wrap; gap: clamp(10px,1.8vw,18px);
  justify-content: center; max-width: 760px; margin: 0 auto clamp(10px,3vw,30px); padding-top: 6px;
}
.rp-bubble {
  width: clamp(62px, 13vw, 92px); height: clamp(62px, 13vw, 92px); border-radius: 50%;
  background: var(--bub); color: #fff;
  font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: clamp(28px,6vw,44px);
  border: 5px solid #fff;
  box-shadow: 0 8px 0 color-mix(in srgb, var(--bub) 55%, #000 22%), 0 14px 22px rgba(0,0,0,.18);
  transition: transform .14s cubic-bezier(.34,1.56,.64,1), opacity .2s;
  display: flex; align-items: center; justify-content: center;
}
.rp-bubble:hover { transform: translateY(-5px) scale(1.05); }
.rp-bubble:active { transform: translateY(3px) scale(.95); }
.rp-bubble.hint { animation: hintpulse 1.3s ease-in-out infinite; }
@keyframes hintpulse { 0%,100%{ box-shadow: 0 8px 0 color-mix(in srgb, var(--bub) 55%, #000 22%), 0 14px 22px rgba(0,0,0,.18), 0 0 0 0 var(--ring);} 50%{ box-shadow: 0 8px 0 color-mix(in srgb, var(--bub) 55%, #000 22%), 0 14px 22px rgba(0,0,0,.18), 0 0 0 14px var(--ring);} }
.rp-bubble.done { background: #cdd3cf; box-shadow: 0 6px 0 #aab2ad, 0 10px 18px rgba(0,0,0,.12); opacity: .65; transform: scale(.9); color: #fff; }
.rp-bubble.wrong { animation: shake .42s; }
@keyframes shake { 0%,100%{ transform: translateX(0);} 20%{ transform: translateX(-9px) rotate(-5deg);} 40%{ transform: translateX(9px) rotate(5deg);} 60%{ transform: translateX(-7px) rotate(-4deg);} 80%{ transform: translateX(7px) rotate(4deg);} }

/* ---------------- Win / coming soon ---------------- */
.rp-win, .rp-soon { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.rp-soon { gap: 14px; }
.rp-soon-char { margin-bottom: 6px; }
.rp-win-title { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: clamp(28px,5vw,48px); color: var(--ink); }
.rp-win-sub { font-weight: 700; color: var(--muted); font-size: clamp(15px,2.2vw,20px); max-width: 360px; }
.rp-big-btn {
  margin-top: 10px; background: var(--brand); color: #fff;
  font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: clamp(18px,2.6vw,24px);
  padding: 16px 36px; border-radius: 999px; border: 4px solid #fff;
  box-shadow: 0 8px 0 color-mix(in srgb, var(--brand) 55%, #000 25%), 0 16px 26px rgba(0,0,0,.18);
  transition: transform .15s;
}
.rp-big-btn:active { transform: translateY(4px); box-shadow: 0 4px 0 color-mix(in srgb, var(--brand) 55%, #000 25%), 0 10px 18px rgba(0,0,0,.18); }

/* ---------------- Confetti burst ---------------- */
.rp-burst { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.rp-confetti { position: absolute; top: -40px; animation: fall linear forwards; }
@keyframes fall { 0%{ transform: translateY(-40px) rotate(0); opacity: 1;} 100%{ transform: translateY(104vh) rotate(540deg); opacity: .9;} }

/* ---------------- Ryan: comic superhero ---------------- */
.rp-comic-decor { z-index: 0; }
.rp-web { position: absolute; top: 0; pointer-events: none; opacity: .12; }
.rp-web-left { left: 0; }
.rp-web-right { right: 0; }
.rp-skyline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(90px, 15vh, 165px); opacity: .42; }
.rp-pow { position: absolute; filter: drop-shadow(0 6px 8px rgba(0,0,0,.16)); }
.rp-pow1 { top: 10%; left: 3%; }
.rp-pow2 { bottom: 7%; right: 4%; }
.rp-pow3 { bottom: 17%; left: 7%; }

.rp-comic .rp-logo-roly { color: #E6453F; -webkit-text-stroke: 2px #1E2A52; paint-order: stroke fill; text-shadow: 3px 3px 0 #2D6BE0; }
.rp-comic .rp-logo-place { color: #fff; -webkit-text-stroke: 2px #1E2A52; paint-order: stroke fill; text-shadow: 3px 3px 0 #2D6BE0; }

.rp-hero-team-wrap { flex: 0 0 auto; width: min(440px, 86vw); }
.rp-crew-row { display: flex; align-items: flex-end; justify-content: center; gap: clamp(2px, 1.5vw, 14px); width: 100%; }
.rp-crew-col { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1 1 0; min-width: 0; }
.rp-crew-col.col-center { flex: 1.32 1 0; }
.rp-crew-char { width: 100%; height: clamp(116px, 24vw, 185px); display: flex; align-items: flex-end; justify-content: center; }
.rp-crew-char .rp-member-pop, .rp-crew-char .bob { width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.rp-crew-char svg { max-width: 100%; height: auto; filter: drop-shadow(0 7px 8px rgba(0,0,0,.16)); }

.rp-greet-comic { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rp-greet-comic-sub { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: clamp(16px,2.2vw,22px); color: var(--ink); }

.rp-comic .rp-card { border: 4px solid #1E2A52; box-shadow: 6px 8px 0 #1E2A52, 0 22px 38px rgba(0,0,0,.14); }
.rp-comic .rp-card:hover { box-shadow: 8px 12px 0 #1E2A52, 0 30px 48px rgba(0,0,0,.18); }
.rp-comic .rp-card-go { box-shadow: 0 5px 0 #1E2A52; }
.rp-comic .rp-home-btn, .rp-comic .rp-sound, .rp-comic .rp-back { border-color: #1E2A52; }

/* ---------------- Crew (shared) ---------------- */
.rp-crew-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rp-member-pop { animation: heropop .55s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes heropop { 0% { transform: scale(.3) translateY(40px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }
.rp-crew-names { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.rp-name-chip { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 13px; padding: 4px 13px; border-radius: 999px; white-space: nowrap; }
.chip-comic { background: #fff; color: #1E2A52; border: 2.5px solid #1E2A52; box-shadow: 2px 3px 0 #1E2A52; }
.chip-sparkle { background: #fff; color: #8A3D86; border: 2.5px solid #EC5BA8; box-shadow: 0 4px 0 rgba(236,91,168,.3); }

/* ---------------- Section label ---------------- */
.rp-section-head { display: flex; align-items: center; gap: 14px; max-width: 1100px; margin: clamp(6px,2vw,14px) auto clamp(12px,2vw,20px); }
.rp-section-line { flex: 1; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 16%, transparent); }
.rp-section-label { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: clamp(15px,2.2vw,21px); color: var(--ink); text-transform: uppercase; letter-spacing: .05em; }

/* ---------------- Ashlynn: sparkle ---------------- */
.rp-sparkle-decor { z-index: 0; }
.rp-glow { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; }
.rp-glow1 { width: 340px; height: 340px; background: #FFC6E8; top: -70px; left: -50px; }
.rp-glow2 { width: 300px; height: 300px; background: #D9C2FF; bottom: 30px; right: -40px; }
.rp-castle { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(96px,16vh,180px); opacity: .4; }
.rp-sparkle .rp-logo-roly { color: #EC5BA8; text-shadow: 0 4px 0 rgba(255,255,255,.8), 3px 5px 0 rgba(155,93,224,.22); }
.rp-sparkle .rp-logo-place { color: #9B5DE0; text-shadow: 0 4px 0 rgba(255,255,255,.8), 3px 5px 0 rgba(236,91,168,.2); }
.rp-greet-sparkle { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rp-sparkle-badge {
  position: relative; display: flex; align-items: center; gap: 10px;
  background: linear-gradient(120deg, #EC5BA8, #9B5DE0); color: #fff;
  font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: clamp(22px,3.4vw,34px);
  padding: 12px 28px; border-radius: 999px; border: 4px solid #fff;
  box-shadow: 0 10px 0 rgba(155,93,224,.22), 0 18px 30px rgba(155,93,224,.3);
}
.rp-badge-spark { position: absolute; }
.rp-badge-spark.s1 { top: -12px; right: -4px; }
.rp-badge-spark.s2 { bottom: -10px; left: 16px; }
.rp-sparkle .rp-card { border-color: #fff; box-shadow: 0 14px 0 rgba(236,91,168,.16), 0 22px 40px rgba(155,93,224,.18); }
.rp-sparkle .rp-card:hover { box-shadow: 0 18px 0 rgba(236,91,168,.22), 0 30px 50px rgba(155,93,224,.22); }

@media (max-width: 560px) {
  .rp-hero { flex-direction: column; gap: 6px; margin: clamp(2px,1vw,10px) auto clamp(14px,4vw,24px); }
  .rp-hero-text { align-items: center; text-align: center; }
  .rp-bubble-greet::after { left: 50%; margin-left: -10px; }

  /* Phone: the hero character + greeting badge are sized for desktop (240px buddy,
     165px comic burst) and dominate a phone — scale them down. */
  .rp-hero-char .rp-buddy-img { width: 150px !important; height: 150px !important; }
  .rp-greet-comic > svg { width: 118px !important; height: 118px !important; }

  /* Phone: the home game/video cards are big stacked boxes (132px medallion, full
     width) that bury the themed scene — collapse them into compact horizontal rows
     (medallion · label/sub · ▶), one per line. Desktop keeps the big tile grid. */
  .rp-grid { grid-template-columns: 1fr; gap: 12px; max-width: 460px; padding-bottom: 28px; }
  .rp-card {
    display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center;
    column-gap: 14px; text-align: left;
    padding: 12px 16px; border-radius: 24px; border-width: 4px;
    box-shadow: 0 8px 0 var(--ring), 0 14px 24px rgba(0,0,0,.12);
  }
  .rp-card::before { inset: 0 auto 0 0; width: 92px; height: 100%; }
  .rp-card-medallion {
    grid-column: 1; grid-row: 1 / 3; width: 72px; height: 72px; margin-bottom: 0;
    box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--accent) 22%, #fff);
  }
  /* the medallion icons carry inline sizes (96–150px); scale to fit the 72px circle */
  .rp-card-medallion > * { transform: scale(.55); }
  .rp-card-label { grid-column: 2; grid-row: 1; align-self: end; font-size: 19px; line-height: 1.15; }
  .rp-card-sub   { grid-column: 2; grid-row: 2; align-self: start; font-size: 14px; }
  .rp-card-go    { grid-column: 3; grid-row: 1 / 3; align-self: center; margin-top: 0; width: 46px; height: 46px; font-size: 18px; }
}

/* ---------------- Character images (the kid avatars) ---------------- */
/* Each kid now has a dedicated illustrated character (characters/*.png). They
   render as plain <img>; the bob/float animation lives on the wrapping element. */
.rp-buddy-img { display: block; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.16)); }
/* Picker art has uneven transparent padding below the feet — nudge each down so all
   three stand on the same line (Ashlynn has the least padding, so she's the baseline). */
.pick-ryan .rp-buddy-img { transform: translate(-12px, 19px); }
.pick-everyone .rp-buddy-img { transform: translateY(8px); }

/* ---------------- Password gate (family-only) ---------------- */
.auth-overlay {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: radial-gradient(120% 80% at 50% -10%, #FBF4E4 0%, #F4E8CE 100%), #F4ECDC;
}
.auth-overlay.auth-hidden { display: none; }
.auth-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
  background: #FFFDF7; border: 5px solid #fff; border-radius: 32px; padding: clamp(28px,5vw,48px) clamp(24px,5vw,52px);
  box-shadow: 0 10px 0 rgba(0,0,0,.05), 0 20px 40px rgba(0,0,0,.14); max-width: 420px; width: 100%;
}
.auth-bug { font-size: clamp(64px, 16vmin, 110px); animation: bob 2.2s ease-in-out infinite; }
.auth-title { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: clamp(28px,5vw,44px);
  color: #D9734E; margin: 0; text-shadow: 0 4px 0 rgba(255,255,255,.7); }
.auth-hint { font-weight: 700; color: #93826C; margin: 0; font-size: clamp(15px,2.4vw,19px); }
.auth-input {
  font-family: inherit; font-size: clamp(22px,4vw,30px); font-weight: 800; text-align: center; letter-spacing: .15em;
  width: 100%; padding: 14px 18px; border-radius: 18px; border: 3px solid #F4E8CE; background: #fff; color: #4A3B2F;
  outline: none;
}
.auth-input:focus { border-color: #D9734E; box-shadow: 0 0 0 4px rgba(217,115,78,.18); }
.auth-go {
  font-family: inherit; font-weight: 800; font-size: clamp(20px,3.6vw,26px); color: #fff; background: #D9734E;
  border: none; border-radius: 999px; padding: 14px 36px; cursor: pointer;
  box-shadow: 0 8px 0 rgba(0,0,0,.1), 0 14px 24px rgba(0,0,0,.16);
}
.auth-go:active { transform: translateY(3px); }
.auth-error { color: #E6453F; font-weight: 800; min-height: 1.2em; font-size: clamp(14px,2.2vw,18px); }