/* Alfie's Rainbow World — soft, magical, pre-reader friendly. Big taps, no reading needed. */
:root{
  --pink:#ff8fce; --pink2:#ff6fb8; --purple:#a98cff; --purple2:#7c5bff; --blue:#5fd0ff;
  --mint:#7cf0c8; --yellow:#ffe08a; --peach:#ffb38a; --ink:#4a2d6b; --card:#fff;
  --soft:#fff4fb; --line:#ffd9f0;
  --rainbow:linear-gradient(90deg,#ff7ab8,#ffb36b,#ffe066,#7ef0a6,#5fd0ff,#a98cff);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;font-family:"Fredoka","Baloo 2",system-ui,sans-serif;color:var(--ink);
  background:linear-gradient(160deg,#fff0fb 0%,#f3ecff 45%,#e8f7ff 100%);overflow:hidden;user-select:none;touch-action:manipulation;}
.screen{position:fixed;inset:0;display:none;flex-direction:column;animation:fade .35s ease;}
.screen.active{display:flex;}
@keyframes fade{from{opacity:0;transform:scale(.99);}to{opacity:1;transform:none;}}

/* floating sparkle sky */
.sky{position:absolute;inset:0;overflow:hidden;background:
  radial-gradient(circle at 20% 22%,rgba(255,255,255,.9) 0 2px,transparent 3px),
  radial-gradient(circle at 70% 16%,rgba(255,255,255,.8) 0 2px,transparent 3px),
  radial-gradient(circle at 84% 60%,rgba(255,255,255,.8) 0 2px,transparent 3px),
  radial-gradient(circle at 32% 74%,rgba(255,255,255,.7) 0 2px,transparent 3px),
  linear-gradient(160deg,#ffd9f3,#e6d6ff 55%,#d4f1ff);}

/* ---------- LOGIN ---------- */
.login-wrap{position:relative;z-index:2;margin:auto;text-align:center;padding:24px;}
.login-uni{font-size:7rem;animation:bob 2.6s ease-in-out infinite;filter:drop-shadow(0 8px 22px rgba(124,91,255,.4));}
.login-title{font-family:"Baloo 2";font-weight:800;font-size:2.5rem;line-height:1.05;margin:.1em 0 .5em;
  background:var(--rainbow);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.big-play{font-family:"Baloo 2";font-weight:800;font-size:1.7rem;color:#fff;border:none;cursor:pointer;
  padding:20px 38px;border-radius:40px;background:linear-gradient(90deg,var(--pink2),var(--purple2));
  box-shadow:0 14px 30px rgba(255,111,184,.45),inset 0 2px 0 rgba(255,255,255,.5);animation:pulse 2s ease-in-out infinite;}
.big-play:active{transform:scale(.95);}
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg);}50%{transform:translateY(-14px) rotate(3deg);}}

/* ---------- TOPBAR + CHIPS ---------- */
.topbar{display:flex;align-items:center;gap:8px;padding:max(12px,env(safe-area-inset-top)) 14px 8px;}
.topbar>:nth-child(2){margin-right:auto;}
.chip{background:#fff;border-radius:30px;padding:8px 16px;font-weight:700;font-size:1.1rem;
  box-shadow:0 6px 16px rgba(169,140,255,.18);display:inline-flex;align-items:center;gap:5px;border:2px solid var(--line);}
.gem-chip{color:#c4248a;} .uni-chip{color:#7c5bff;cursor:pointer;}
.chip.pop{animation:chippop .4s ease;} @keyframes chippop{40%{transform:scale(1.25);}}
.icon-btn{width:46px;height:46px;border-radius:50%;border:2px solid var(--line);background:#fff;font-size:1.3rem;
  cursor:pointer;box-shadow:0 6px 14px rgba(169,140,255,.15);}
.icon-btn:active{transform:scale(.92);}

/* ---------- MEADOW (home) ---------- */
.meadow{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 16px 28px;display:flex;flex-direction:column;gap:14px;}
.guide{display:flex;align-items:center;gap:10px;}
.guide-uni{font-size:3.2rem;animation:bob 3s ease-in-out infinite;flex:0 0 auto;}
.guide-bubble{background:#fff;border:2px solid var(--line);border-radius:20px 20px 20px 6px;padding:12px 16px;
  font-weight:600;font-size:1.05rem;box-shadow:0 8px 20px rgba(169,140,255,.18);}
.rank-track{display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap;padding:2px;}
.rank-step{font-size:.78rem;font-weight:700;padding:6px 10px;border-radius:20px;background:#fff;border:2px solid var(--line);color:#b69ad6;opacity:.7;}
.rank-step.done{background:var(--rainbow);color:#fff;border-color:transparent;opacity:1;}
.rank-step.current{background:#fff;border-color:var(--purple2);color:var(--purple2);opacity:1;transform:scale(1.08);box-shadow:0 6px 16px rgba(124,91,255,.25);}

.deck-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.deck-card{border:none;cursor:pointer;border-radius:26px;padding:22px 14px;color:#fff;text-align:center;
  font-family:"Baloo 2";font-weight:800;font-size:1.2rem;box-shadow:0 12px 26px rgba(124,91,255,.22),inset 0 2px 0 rgba(255,255,255,.4);
  display:flex;flex-direction:column;align-items:center;gap:6px;min-height:130px;justify-content:center;}
.deck-card:active{transform:scale(.96);}
.deck-card .de{font-size:2.8rem;filter:drop-shadow(0 4px 8px rgba(0,0,0,.15));}
.deck-card .dsub{font-family:"Fredoka";font-weight:500;font-size:.8rem;opacity:.95;}
.deck-letters{background:linear-gradient(150deg,#ff9ed8,#ff6fb8);}
.deck-counting{background:linear-gradient(150deg,#7fb4ff,#5fd0ff);}
.deck-alliteration{background:linear-gradient(150deg,#b69bff,#7c5bff);}
.deck-longshort{background:linear-gradient(150deg,#7cf0c8,#36c79a);}

.dance-btn{margin:4px auto 0;border:none;cursor:pointer;font-family:"Baloo 2";font-weight:800;font-size:1.2rem;color:#fff;
  padding:16px 30px;border-radius:34px;background:linear-gradient(90deg,#ffb36b,#ff7ab8,#a98cff);background-size:200%;
  animation:shift 4s linear infinite;box-shadow:0 12px 26px rgba(255,122,184,.35);}
.dance-btn:active{transform:scale(.95);}
@keyframes shift{to{background-position:200%;}}

/* ---------- GAME ---------- */
#screen-game{background:linear-gradient(160deg,#fff4fb,#f0ecff 60%,#e8f7ff);}
.progress-dots{display:flex;gap:7px;margin:0 auto;}
.pdot{width:16px;height:16px;border-radius:50%;background:#eadcff;border:2px solid #fff;box-shadow:0 2px 4px rgba(124,91,255,.2);}
.pdot.win{background:radial-gradient(circle at 35% 30%,#fff,#ffd23f);border-color:#ffb800;}
.time-chip{color:#7c5bff;font-size:1rem;}
.time-chip.low{color:#ff5b8c;animation:tpulse .6s ease-in-out infinite;}
@keyframes tpulse{50%{transform:scale(1.15);}}
.play-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:14px;padding:6px 16px 18px;overflow-y:auto;}
.big-stage{min-height:34vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;width:100%;}
.big-letter{font-family:"Baloo 2";font-weight:800;font-size:9rem;line-height:1;
  background:var(--rainbow);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 14px rgba(124,91,255,.25));animation:popin .4s ease;}
.big-count{font-size:3rem;line-height:1.35;max-width:90%;word-break:break-word;letter-spacing:4px;animation:popin .4s ease;}
.big-pic{font-size:6.5rem;line-height:1;animation:popin .4s ease;}
.big-word{font-family:"Baloo 2";font-weight:800;font-size:2.2rem;color:var(--purple2);text-transform:capitalize;}
@keyframes popin{0%{transform:scale(.4);opacity:0;}70%{transform:scale(1.12);}100%{transform:scale(1);opacity:1;}}
.hear-btn{border:2px solid var(--line);background:#fff;color:var(--purple2);font-family:"Fredoka";font-weight:600;
  padding:8px 18px;border-radius:24px;font-size:.95rem;cursor:pointer;box-shadow:0 4px 10px rgba(124,91,255,.12);}
.hear-btn:active{transform:scale(.94);}
.prompt{font-family:"Baloo 2";font-weight:800;font-size:1.4rem;color:var(--ink);text-align:center;}
.pads{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;width:100%;}
.pad{border:none;cursor:pointer;background:#fff;border:3px solid var(--line);border-radius:24px;
  min-width:96px;min-height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  box-shadow:0 10px 22px rgba(124,91,255,.16);transition:transform .1s;padding:10px 14px;}
.pad:active{transform:scale(.93);}
.pad.pad-letter{font-family:"Baloo 2";font-weight:800;font-size:3.2rem;color:var(--purple2);}
.pad.pad-num{font-family:"Baloo 2";font-weight:800;font-size:3rem;color:#c4248a;}
.pad .pad-pic{font-size:3.4rem;}
.pad.pad-len{min-width:auto;width:78%;max-width:340px;align-items:flex-start;}
.len-thing{font-size:3.4rem;display:inline-block;transform-origin:left center;transform:scaleX(calc(var(--w)*2.2));}
.pad.right{border-color:#7cf0c8;background:#f1fff9;animation:rightpop .5s ease;}
.pad.wrong{opacity:.4;}
@keyframes rightpop{40%{transform:scale(1.12);}}
.sparkle-layer{position:fixed;inset:0;pointer-events:none;z-index:20;}
.spark{position:absolute;font-size:1.6rem;animation:rise 1.1s ease-out forwards;}
@keyframes rise{0%{opacity:0;transform:translateY(0) scale(.4);}30%{opacity:1;}100%{opacity:0;transform:translateY(-120px) scale(1.4) rotate(40deg);}}

/* ---------- WIN ---------- */
#screen-win{background:linear-gradient(160deg,#ffe3f5,#ece1ff 60%,#e0f6ff);align-items:center;justify-content:center;overflow-y:auto;}
.win-card{margin:auto;text-align:center;padding:24px;max-width:460px;}
.win-title{font-family:"Baloo 2";font-weight:800;font-size:2.2rem;color:var(--purple2);margin:.2em 0;}
.win-gems{font-size:2rem;letter-spacing:4px;margin:8px 0;min-height:1.4em;}
.win-uni{margin:10px 0 18px;}
.win-uni .got{font-size:6rem;animation:bob 2.4s ease-in-out infinite;filter:drop-shadow(0 8px 20px rgba(124,91,255,.4));}
.win-uni .got-name{font-family:"Baloo 2";font-weight:800;font-size:1.3rem;color:#c4248a;margin-top:4px;}
.win-burst{position:absolute;inset:0;pointer-events:none;}
.ghost-btn{display:block;margin:12px auto 0;background:none;border:none;color:#a98cd6;font-family:"Fredoka";font-weight:600;font-size:1rem;cursor:pointer;text-decoration:underline;}

/* ---------- STABLE (collection) ---------- */
#screen-stable{background:linear-gradient(160deg,#f3ecff,#e8f7ff);}
.stable-title{font-family:"Baloo 2";font-weight:800;font-size:1.25rem;color:var(--purple2);margin:0 auto;}
.stable-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:14px;padding:16px;align-content:start;}
.uni-cell{background:#fff;border:3px solid var(--line);border-radius:22px;padding:12px 6px;text-align:center;box-shadow:0 8px 18px rgba(124,91,255,.14);}
.uni-cell .uc-emoji{font-size:2.6rem;}
.uni-cell .uc-name{font-weight:600;font-size:.72rem;color:#9a7ec6;margin-top:4px;}
.uni-cell.locked{opacity:.5;filter:grayscale(.7);}
.uni-cell.locked .uc-emoji{filter:brightness(.4);}

/* ---------- DANCE ---------- */
#screen-dance{background:linear-gradient(160deg,#ffd6f0,#d9c9ff 55%,#cdeeff);align-items:center;justify-content:center;}
.dance-stage{margin:auto;text-align:center;position:relative;z-index:2;}
.dance-uni{font-size:8rem;animation:dance .7s ease-in-out infinite;filter:drop-shadow(0 10px 22px rgba(124,91,255,.4));}
@keyframes dance{0%,100%{transform:translateY(0) rotate(-10deg);}50%{transform:translateY(-22px) rotate(10deg) scale(1.06);}}
.dance-title{font-family:"Baloo 2";font-weight:800;font-size:2rem;color:var(--purple2);}
.dance-moves{font-size:2.4rem;letter-spacing:10px;animation:shift 2s linear infinite;}
.dance-floor{position:absolute;left:50%;bottom:-10px;width:200px;height:30px;transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(124,91,255,.4),transparent 70%);border-radius:50%;}

/* ---------- PARENT ---------- */
.parent-wrap{flex:1;overflow-y:auto;padding:18px;max-width:560px;margin:0 auto;width:100%;}
.pcard{background:#fff;border:2px solid var(--line);border-radius:20px;padding:16px;margin-bottom:14px;box-shadow:0 8px 18px rgba(124,91,255,.12);}
.pcard h3{margin:0 0 8px;color:var(--purple2);}
.pstat{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--line);font-weight:600;}
.voice-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.voice-pick{border:2px solid var(--line);background:#fff;border-radius:20px;padding:8px 14px;font-family:"Fredoka";font-weight:600;cursor:pointer;}
.voice-pick.on{background:var(--purple2);color:#fff;border-color:transparent;}

@media(min-width:560px){ .deck-grid{grid-template-columns:repeat(4,1fr);} }