/* Spell It! — "Bubble Lagoon" sticker direction (2026-09-03).
   Lab grammar (ink outlines, hard 4px shadows, Chewy + Sniglet, sticker buttons) with a palette
   that belongs to this game only: sea-glass mint ground, aqua lagoon sky, coral + berry accents.
   Deliberately NOT the lollipop stand's sand/red boardwalk and NOT the sewing shop's cream/pink. */
:root{
  --ink:#3b2a2a;
  --sh:4px 4px 0 var(--ink);
  --mint:#c7efe3; --mint2:#a9e3d5;      /* ground */
  --paper:#ffffff;
  --sky1:#4fcfe0; --sky2:#a9eef0; --sky3:#ddf9f4;  /* lagoon */
  --coral:#ff5b5b; --berry:#e5348a; --tang:#ff9a3c; --sunny:#ffd23f;
  --grape:#8a5cff; --lime:#7bd94a; --deep:#1f7f8c;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overscroll-behavior:none}
body{
  font-family:'Nunito','Trebuchet MS',sans-serif;font-weight:800;color:var(--ink);
  background:var(--mint);
  /* bubble texture — this game's own paper, not the stitched grid */
  background-image:radial-gradient(circle at 14px 14px,rgba(255,255,255,.75) 5px,transparent 6px),
                   radial-gradient(circle at 46px 42px,rgba(255,255,255,.45) 3px,transparent 4px);
  background-size:64px 64px,64px 64px;
  touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden}
.f,.h1,.sticker,#slots,.wslot,.lb,#hud b,#pipSay,.gcard{font-family:'Chewy',cursive;font-weight:400}
.hide{display:none!important}

/* ---------------- layout ---------------- */
#root{
  position:fixed;inset:0;display:grid;gap:clamp(6px,1.1vw,12px);
  padding:clamp(6px,1.1vw,12px);
  grid-template-columns:1fr clamp(168px,19vw,236px);
  grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"hud hud" "scene rail" "word rail";
}
#hud{grid-area:hud}#scene{grid-area:scene}#rail{grid-area:rail}#wordbar{grid-area:word}

/* ---------------- HUD ---------------- */
/* 64px left for the shared 🏠, 80px right for the shared ⛶ — never put anything tappable there. */
#hud{display:flex;align-items:center;gap:clamp(6px,1.2vw,14px);padding-left:64px;padding-right:80px;min-height:56px}
.pill{display:flex;align-items:center;gap:6px;background:var(--paper);border:4px solid var(--ink);
  border-radius:999px;padding:3px 14px 3px 9px;box-shadow:var(--sh);font-size:clamp(17px,2.4vw,26px);line-height:1.2}
.pill .ic{font-size:.95em}
#streakPill{background:var(--sunny)}
#streakPill.hot{animation:hotpulse .6s ease-in-out infinite alternate}
@keyframes hotpulse{to{transform:scale(1.09) rotate(-3deg)}}
#rainbow{flex:1;display:flex;gap:4px;height:clamp(20px,3vh,30px);background:var(--paper);
  border:4px solid var(--ink);border-radius:999px;box-shadow:var(--sh);padding:3px;overflow:hidden;min-width:70px}
#rainbow i{flex:1;border-radius:999px;background:rgba(59,42,42,.12);transition:background .35s,transform .35s}
#rainbow i.on{transform:scaleY(1.06)}
#rainbow.full{animation:hotpulse .5s ease-in-out infinite alternate}
#bookBtn{flex:0 0 auto;font-size:clamp(16px,2.2vw,24px);padding:6px 14px;min-height:48px;display:flex;align-items:center;gap:6px}

/* ---------------- scene: the lagoon ---------------- */
#scene{position:relative;overflow:hidden;border:5px solid var(--ink);border-radius:26px;box-shadow:var(--sh);
  background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 55%,var(--sky3) 100%)}
#clouds{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 18% 12%,#fff 34px,transparent 35px),
             radial-gradient(circle at 26% 14%,#fff 26px,transparent 27px),
             radial-gradient(circle at 78% 20%,#fff 30px,transparent 31px),
             radial-gradient(circle at 86% 22%,#fff 22px,transparent 23px);
  opacity:.85}
/* lazy rising bubbles — scene prop unique to this game */
.amb{position:absolute;bottom:-40px;border-radius:50%;border:3px solid rgba(59,42,42,.25);
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.9),rgba(255,255,255,.15));
  pointer-events:none;animation:rise linear infinite}
@keyframes rise{from{transform:translateY(0) translateX(0)}to{transform:translateY(-115vh) translateX(22px)}}

/* the bubble friend she is spelling free */
/* The friend is docked in the scene's top-right "rescue" corner and #fall stops short of it,
   so a falling letter never lands on top of the creature she is trying to free. */
#bubble{position:absolute;right:2.5%;top:6%;
  width:clamp(96px,17vh,168px);aspect-ratio:1;border-radius:50%;border:5px solid var(--ink);
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.95),rgba(255,255,255,.35) 55%,rgba(255,255,255,.12));
  box-shadow:inset -8px -10px 0 rgba(31,127,140,.18),var(--sh);
  display:flex;align-items:center;justify-content:center;z-index:3;
  animation:bob 3.1s ease-in-out infinite alternate;pointer-events:none}
@keyframes bob{to{transform:translateY(-12px)}}
#bubbleFriend{font-size:clamp(46px,9vh,88px);filter:drop-shadow(4px 5px 0 rgba(59,42,42,.25))}
#bubble.shake{animation:bshake .3s}
@keyframes bshake{25%{transform:rotate(-7deg) scale(1.07)}60%{transform:rotate(6deg) scale(.96)}}
#bubble.pop{animation:bpop .45s ease-out forwards}
@keyframes bpop{to{transform:scale(1.7);opacity:0}}

#fall{position:absolute;inset:0;right:clamp(112px,20vh,200px);z-index:5}
#coach{position:absolute;left:50%;bottom:12px;transform:translateX(-50%) rotate(-1.5deg);
  background:var(--sunny);border:4px solid var(--ink);border-radius:16px;box-shadow:var(--sh);
  padding:8px 16px;font-size:clamp(13px,2vw,18px);z-index:8;max-width:88%;text-align:center;
  animation:coachin .4s cubic-bezier(.3,1.5,.5,1)}
@keyframes coachin{from{transform:translateX(-50%) scale(.7);opacity:0}}

/* ---------------- falling letters ---------------- */
.lb{position:absolute;width:var(--lb);height:var(--lb);border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--lb) * .56);color:var(--ink);
  border:4px solid var(--ink);box-shadow:3px 3px 0 var(--ink);cursor:pointer;touch-action:none;
  transform:rotate(var(--rot,-3deg))}
.lb:active{transform:rotate(var(--rot,-3deg)) translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.lb.next{outline:5px solid var(--sunny);outline-offset:3px;animation:nx .7s ease-in-out infinite alternate}
@keyframes nx{to{outline-color:#fff}}
.lb.got{animation:got .34s ease-out forwards;pointer-events:none}
@keyframes got{0%{transform:scale(1.3) rotate(0)}100%{transform:scale(0) rotate(30deg);opacity:0}}
.lb.oops{animation:oops .4s ease-out forwards;pointer-events:none}
@keyframes oops{25%{transform:rotate(-14deg)}60%{transform:rotate(12deg)}100%{transform:scale(.4) rotate(0);opacity:0}}
.lb.dud{animation:dud .26s ease-out forwards;pointer-events:none}
@keyframes dud{to{transform:scale(.4);opacity:0}}

/* ---------------- rail ---------------- */
#rail{display:flex;flex-direction:column;gap:clamp(6px,1.1vh,12px);min-height:0}
#pipCard{background:var(--paper);border:5px solid var(--ink);border-radius:22px;box-shadow:var(--sh);
  padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;flex:0 0 auto}
#pip{font-size:clamp(40px,7vh,74px);line-height:1;filter:drop-shadow(4px 5px 0 rgba(59,42,42,.25));
  cursor:pointer;transition:transform .15s}
#pip:active{transform:scale(.9)}
#pip.hop{animation:hop .55s cubic-bezier(.3,1.5,.5,1)}
@keyframes hop{30%{transform:translateY(-22px) scale(1.06,.95)}60%{transform:translateY(0) scale(.95,1.06)}}
#pip.sad{animation:sad .6s}
@keyframes sad{40%{transform:translateY(8px) rotate(-9deg) scale(.94)}}
#pipSay{font-size:clamp(14px,1.5vw,19px);line-height:1.15;text-align:center;color:var(--deep);min-height:1.2em}
#rail .sticker{width:100%;text-align:center}
#shelf{flex:1 1 auto;min-height:0;background:var(--paper);border:5px solid var(--ink);border-radius:22px;
  box-shadow:var(--sh);padding:8px;display:flex;flex-direction:column;gap:6px;overflow:hidden}
.shelfTitle{font-family:'Fredoka','Nunito',cursive;font-size:clamp(11px,1.1vw,14px);letter-spacing:1px;color:var(--deep);text-align:center}
#shelfRow{flex:1;display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px;overflow:auto;touch-action:pan-y;justify-content:center}
#shelfRow div{width:clamp(30px,3.6vw,44px);aspect-ratio:1;border:3px solid var(--ink);border-radius:11px;
  background:var(--sky3);display:flex;align-items:center;justify-content:center;font-size:clamp(16px,2vw,24px);
  box-shadow:2px 2px 0 var(--ink)}
#shelfRow div.gold{background:linear-gradient(135deg,var(--sunny),#fff0b0)}
#shelfRow div.ghost{background:#eef7f4;opacity:.4;border-style:dashed}
#shelfRow:empty:after,#shelf.empty #shelfRow:after{content:''}
#shelf.empty .shelfTitle{opacity:.6}

/* ---------------- sticker buttons ---------------- */
.sticker{font-family:'Fredoka','Nunito',cursive;font-size:clamp(15px,1.7vw,21px);letter-spacing:.5px;
  border:4px solid var(--ink);border-radius:16px;padding:10px 16px;box-shadow:var(--sh);
  cursor:pointer;color:var(--ink);min-height:48px;background:var(--paper);transform:rotate(-2deg)}
.sticker:active{transform:rotate(-2deg) translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.sticker.yellow{background:var(--sunny)}.sticker.white{background:#fff}
.sticker.cyan{background:var(--sky2)}.sticker.coral{background:var(--coral);color:#fff}
.sticker.big{font-size:clamp(18px,2.2vw,26px);padding:13px 24px;min-height:56px}
.sticker.off{opacity:.55}

/* ---------------- word bar ---------------- */
/* margin-left keeps the bottom-left corner clear for the shared 🔊 and 📮 */
#wordbar{margin-left:68px;background:var(--paper);border:5px solid var(--ink);border-radius:22px;
  box-shadow:var(--sh);padding:clamp(6px,1.1vh,12px) 14px;display:flex;flex-direction:column;
  align-items:center;gap:6px}
#slots{display:flex;gap:clamp(4px,.8vw,9px);justify-content:center;flex-wrap:nowrap;max-width:100%}
.wslot{--w:clamp(30px,min(9.5vw,7.4vh),60px);
  width:var(--w);height:calc(var(--w) * 1.1);border-radius:12px;border:4px solid var(--ink);
  background:#fff5df;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-size:calc(var(--w) * .62);color:rgba(59,42,42,.2);box-shadow:2px 2px 0 rgba(59,42,42,.35);
  transition:background .2s,color .2s}
.wslot.next{border-style:dashed;background:var(--sunny);animation:nslot .8s ease-in-out infinite alternate}
@keyframes nslot{to{filter:brightness(1.12)}}
.wslot.done{color:#fff;animation:slotpop .38s cubic-bezier(.3,1.6,.5,1)}
@keyframes slotpop{from{transform:scale(1.35) rotate(-8deg)}}
#clue{display:flex;align-items:center;gap:8px;font-size:clamp(13px,1.7vw,19px);color:var(--deep);text-align:center}
#clueE{font-size:1.5em}

/* ---------------- overlays ---------------- */
.ov{position:fixed;inset:0;background:rgba(31,127,140,.55);z-index:9999;display:flex;
  align-items:center;justify-content:center;padding:16px}
.panel{background:var(--paper);border:6px solid var(--ink);border-radius:28px;padding:20px 18px 18px;
  box-shadow:10px 10px 0 var(--ink);width:min(620px,100%);max-height:92vh;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:10px}
.panel .h1{font-family:'Chewy',cursive;font-size:clamp(26px,5vw,42px);line-height:1;
  text-shadow:3px 3px 0 var(--berry);letter-spacing:1px}
.panel p{font-size:clamp(13px,2vw,17px);line-height:1.35;margin:0;color:var(--deep)}
#bookGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:8px;width:100%;
  overflow:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch;padding:4px;min-height:80px}
.sk{aspect-ratio:1;border:4px solid var(--ink);border-radius:14px;background:#eef7f4;
  display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:2px 2px 0 var(--ink);
  position:relative;filter:grayscale(1);opacity:.35}
.sk.got{filter:none;opacity:1;background:var(--sky3)}
.sk.gold{background:linear-gradient(135deg,var(--sunny),#fff0b0);box-shadow:3px 3px 0 var(--ink)}
.sk.gold:after{content:'⭐';position:absolute;right:-6px;top:-8px;font-size:15px}
.sk.pop{animation:slotpop .45s cubic-bezier(.3,1.6,.5,1)}
#gradeGrid{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:100%}
.gcard{flex:1 1 90px;min-width:88px;min-height:96px;border:4px solid var(--ink);border-radius:18px;
  box-shadow:var(--sh);cursor:pointer;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;font-size:16px;padding:8px 4px}
.gcard .n{font-size:30px}
.gcard .d{font-family:'Nunito',sans-serif;font-size:13px;opacity:.8;line-height:1.15}
.gcard.sel{outline:5px solid var(--ink);outline-offset:4px;transform:scale(1.04)}
.gcard:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}

/* ---------------- fx ---------------- */
#fx{position:fixed;inset:0;pointer-events:none;z-index:9000}
.bit{position:fixed;pointer-events:none;z-index:9001;animation:bit var(--d,.7s) ease-out forwards}
@keyframes bit{from{transform:translate(0,0) rotate(0) scale(1);opacity:1}
               to{transform:translate(var(--tx),var(--ty)) rotate(var(--r)) scale(.2);opacity:0}}
.float{position:fixed;pointer-events:none;font-family:'Chewy',cursive;z-index:9002;
  -webkit-text-stroke:2px var(--ink);text-shadow:3px 3px 0 var(--ink);color:var(--sunny);
  animation:fl 1s ease-out forwards;white-space:nowrap}
@keyframes fl{to{transform:translate(-50%,-80px);opacity:0}}
.fly{position:fixed;pointer-events:none;z-index:9003;transition:transform .7s cubic-bezier(.3,.6,.4,1.2),opacity .7s}
#root.bump{animation:rbump .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes rbump{22%{transform:scale(1.015) translateY(-6px)}52%{transform:scale(.997) translateY(3px)}}
#root.shakeit{animation:rshake .3s}
@keyframes rshake{25%{transform:translateX(-7px)}60%{transform:translateX(6px)}}

/* ---------------- portrait + phone ----------------
   Stack: scene on top, the rail becomes one horizontal strip of controls, word bar last.
   This block lives at the END of the file on purpose — it overrides #rail's flex-direction,
   and an earlier copy of it silently lost to the later base rule. */
@media (max-aspect-ratio:1/1){
  #root{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto auto;
        grid-template-areas:"hud" "scene" "rail" "word"}
  #rail{flex-direction:row;align-items:stretch;gap:8px}
  #pipCard{flex:1 1 auto;min-width:0;flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:6px 10px;border-radius:18px}
  #pip{font-size:clamp(30px,7.5vw,50px)}
  #pipSay{text-align:left;font-size:clamp(12px,3.1vw,17px);min-height:0}
  #rail .sticker{width:auto;flex:0 0 auto;font-size:clamp(13px,3.2vw,18px);padding:8px 11px;
    display:flex;align-items:center;border-radius:14px}
  #bubble{width:clamp(76px,20vw,140px)}
  #bubbleFriend{font-size:clamp(38px,10vw,70px)}
  /* stacked, the scene reaches down the left edge where the shared 📮 and 🔊 live, and the rail
     sits beside them — keep both out of that 56–62px column so nothing is untappable. */
  #fall{right:clamp(90px,24vw,170px);left:56px}
  #rail{padding-left:62px}
  #shelf{display:none}
}
/* phone: the rail must not eat the scene — shorten the labels and tighten everything */
@media (max-width:430px){
  #hud{min-height:48px;gap:5px;padding-right:72px}
  .pill{padding:2px 10px 2px 7px}
  #wordbar{padding:6px 8px;margin-left:62px}
  #clue{font-size:13px}
  #pipSay{display:none}
  #pipCard{flex:0 0 auto}
}