/* Tooth Fairy Clinic — "Bubblegum Clinic" (look A, picked by Nick from the playable 3D preview).
   The stage is a Babylon canvas; everything here is the DOM that floats over it, in the lab
   grammar: ink #3b2a2a outlines, hard 4px shadows, Chewy once for the title, Baloo 2 for buttons,
   Nunito for anything she reads. */
:root{ --ink:#3b2a2a; --pink:#ff5fa2; --teal:#2bb3a3; --lemon:#ffd84d; --ground:#ffd9e6; --muted:rgba(59,42,42,.62); --sh:4px 4px 0 var(--ink); --sh3:3px 3px 0 var(--ink); }
*{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:700;color:var(--ink);background:var(--ground);touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden}
.d,#coins,.card,.stk,.chip,#hint,#brave small,h2{font-family:'Baloo 2','Trebuchet MS',sans-serif}
.hide{display:none!important}
button{font:inherit;color:var(--ink);cursor:pointer}
.sh{border:3px solid var(--ink);box-shadow:var(--sh)}

#stage{position:fixed;inset:0;overflow:hidden}
#view{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
/* no WebGL: the game still plays, on a flat clinic wall */
body.flat #view{display:none}
body.flat #stage{background:linear-gradient(#ffe3ec 0 62%,transparent 62%),repeating-conic-gradient(#ff9ec2 0 25%,#fff6f9 0 50%) 0 0/84px 84px}
body.flat #bubble{transform:none!important;left:50%;top:22%;margin-left:-150px}

/* top: title after the shared 🏠, coins + cosy before the shared ⛶ */
#title{position:absolute;left:76px;top:12px;font-family:'Chewy','Baloo 2',sans-serif;font-size:clamp(28px,4vw,42px);letter-spacing:1px;color:var(--pink);text-shadow:3px 3px 0 var(--ink);line-height:1.1;pointer-events:none}
#topR{position:absolute;right:76px;top:12px;display:flex;gap:8px;align-items:center}
#coins{background:#fff;border-radius:999px;padding:3px 14px;font-size:20px;min-height:44px;display:flex;align-items:center;gap:6px}
#coins.bump{animation:bump .35s} @keyframes bump{40%{transform:scale(1.18)}}
.chip{background:#fff;border-radius:999px;padding:4px 14px;font-size:16px;min-height:44px;white-space:nowrap}
.chip:active,.card:active,.stk:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
#brave{position:absolute;left:76px;top:66px;display:flex;align-items:center;gap:6px;background:#fff;border-radius:999px;padding:3px 14px;font-size:clamp(20px,2.4vw,26px)}
#brave small{font-size:15px;margin-right:2px}
#brave span{opacity:.28;transition:all .25s} #brave span.on{opacity:1;transform:scale(1.3)}

#bubble{position:absolute;left:0;top:0;max-width:min(320px,58vw);background:#fff;border-radius:22px;padding:10px 16px;font-size:clamp(16px,1.9vw,21px);line-height:1.3;pointer-events:none;z-index:4}
#bubble::after{content:'';position:absolute;left:28px;bottom:-13px;width:20px;height:20px;background:#fff;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(45deg)}
#bubble.pop #bubTxt{animation:pop .3s cubic-bezier(.3,1.5,.5,1)} @keyframes pop{from{transform:scale(.8);opacity:0}}

/* bottom: padded clear of the shared 🔊/📮 (left) and the portal's 💬 (right — it paints over the
   iframe from the parent document, so nothing in here can see it) */
#bottom{position:absolute;left:0;right:0;bottom:0;padding:0 84px 16px 76px;display:flex;flex-direction:column;align-items:center;gap:10px;z-index:3}
#hint{background:var(--pink);color:#fff;border-radius:999px;padding:4px 16px;font-size:clamp(15px,1.7vw,19px);text-align:center}
/* the comfort shelf: 16 things, two rows of eight */
#cards{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:min(1020px,100%)}
#cards .card{width:clamp(96px,12.5vw,136px);min-height:112px;padding:8px 6px 9px;font-size:clamp(13px,1.3vw,16px);border-radius:20px;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
#cards .card.wide{width:auto;cursor:pointer}
#cards .card.lifted{opacity:.35}
#ghost{position:fixed;z-index:60;font-size:88px;line-height:1;pointer-events:none;transform:translate(-50%,-72%) rotate(-8deg);filter:drop-shadow(5px 8px 0 rgba(59,42,42,.35));transition:font-size .12s}
#ghost.near{font-size:112px}
#tell{position:absolute;z-index:11;font-size:72px;line-height:1;pointer-events:none;filter:drop-shadow(3px 4px 0 rgba(59,42,42,.35))}
#tell.pop{animation:tellin .3s cubic-bezier(.3,1.6,.5,1)} @keyframes tellin{from{transform:scale(.3);opacity:0}}
#cards .card i{font-size:clamp(44px,5.4vw,62px)}
#cards .card.play{background:#fff8d6}
#cards .card.play::after{content:'PLAY';font-size:13px;background:var(--pink);color:#fff;border-radius:999px;padding:0 7px;line-height:1.35}
#prizes,#quiz{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:min(880px,100%)}
#quiz{grid-template-columns:repeat(3,minmax(0,1fr));width:min(780px,100%)}
.ans{min-height:96px;font-size:clamp(16px,1.8vw,21px)!important}
.ans .svgic{width:54px;height:54px;display:block} .ans .svgic svg{width:100%;height:100%}
.ans .num{font-family:'Chewy',sans-serif;font-size:46px;color:var(--pink);-webkit-text-stroke:2px var(--ink)}
.ans.right{background:#d6f7d6} .ans.wrong{background:#ffd6d6}
#prizes{grid-template-columns:repeat(3,minmax(0,1fr));width:min(720px,100%)}
.card{background:#fff;border-radius:18px;padding:8px 6px 10px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:clamp(14px,1.55vw,18px);line-height:1.15;min-height:88px;text-align:center}
.card i{font-style:normal;font-size:clamp(34px,4.2vw,50px);line-height:1.1}
.card:nth-child(odd){transform:rotate(-1.5deg)} .card:nth-child(even){transform:rotate(1.5deg)}
.card[disabled]{opacity:.42;cursor:default}
.card.wide{grid-column:1/-1;max-width:420px;justify-self:center;width:100%;background:var(--lemon)}
.float{position:absolute;font-family:'Chewy',sans-serif;font-size:40px;color:var(--lemon);-webkit-text-stroke:2px var(--ink);text-shadow:3px 3px 0 var(--ink);pointer-events:none;z-index:6;animation:fl 1.15s ease-out forwards}
@keyframes fl{to{transform:translateY(-130px);opacity:0}}

/* the gentle polish: a big mouth in the lower part of the screen, the kid's face above it */
#polishOv{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;gap:8px;align-items:center;padding:6px 88px 12px 76px;touch-action:none;background:radial-gradient(ellipse at 50% 40%,#ffe3ee 0,#ffb9d3 100%)}
#polishOv.shake #mouthBox{animation:shake .4s} @keyframes shake{25%{transform:translateX(-10px) rotate(-1deg)}50%{transform:translateX(10px) rotate(1deg)}75%{transform:translateX(-6px)}}
#polishMsg{background:#fff;border-radius:16px;padding:6px 16px;font-size:clamp(15px,1.8vw,20px);text-align:center;line-height:1.3}
#mouthBox{flex:1 1 0;min-height:0;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:none}
#mouthCv{display:block;border:5px solid var(--ink);border-radius:34px;box-shadow:8px 8px 0 rgba(59,42,42,.35);touch-action:none;cursor:none;user-select:none;-webkit-user-select:none}
#bling{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center}
.chip.on{background:var(--lemon);outline:4px solid var(--ink);outline-offset:2px}
body.inmouth #title,body.inmouth #level,body.inmouth #bookBtn,body.inmouth #cosyBtn{display:none}
body.inmouth #brave,body.inmouth #topR{z-index:9}
body.inmouth #factToast{top:6px}
#mouthTools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center;font-family:'Baloo 2',sans-serif}
#mouthTools .key{font-size:15px;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:1px 12px}
#mouthTools .key.g{background:#d6f7d6} #mouthTools .key.f{background:#ffd6d6}
#fills{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
@keyframes nudge{to{transform:translateY(-4px)}}
#nastyBtn{background:#e9ffd9}
#level{position:absolute;left:76px;top:118px;background:var(--lemon);border-radius:999px;padding:2px 14px;font-family:'Baloo 2',sans-serif;font-size:16px}
/* the mouth snaps shut on a CHOMP */
#polishOv{transition:opacity .2s} #polishOv.shut #mouthBox{animation:chomp .42s cubic-bezier(.6,0,.9,.4) forwards}
@keyframes chomp{to{transform:scaleY(.04)}}
.bugIn{animation:bugwig .35s ease-in-out infinite alternate} @keyframes bugwig{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
.bug,.stuck,[data-cav],[data-wob]{cursor:pointer}
.stuck text,.bug circle,.bug path{pointer-events:none} .bug>circle:last-child,.stuck>circle{pointer-events:all}
.tooth.wobbly{animation:wob .5s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 0} @keyframes wob{from{rotate:-5deg}to{rotate:5deg}}
#cosyFound{font-size:16px}
.spark{animation:spark .6s ease-out} @keyframes spark{from{transform:scale(0);transform-box:fill-box;transform-origin:center}}
#brushCur{position:absolute;left:0;top:0;width:60px;height:60px;border-radius:50%;border:5px solid var(--ink);background:rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;font-size:30px;pointer-events:none;z-index:9;transition:border-color .1s,background .1s}
#brushCur.gentle{border-color:#2f9a4c;background:rgba(126,224,129,.55)}
#brushCur.fast{border-color:#c2452b;background:rgba(255,120,120,.6)}

/* tools, toys, facts */
#toolbar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
#toolbar.want{animation:shake .4s}
.tool{background:#fff;border-radius:16px;min-width:96px;min-height:64px;padding:4px 10px;display:flex;flex-direction:column;align-items:center;font-family:'Baloo 2',sans-serif;font-size:14px;line-height:1.1}
.tool i{font-style:normal;font-size:30px;line-height:1.1}
.tool.on{background:var(--lemon);outline:4px solid var(--ink);outline-offset:2px}
.tool.idle{opacity:.45}
.tool.want{animation:nudge .25s ease-in-out 4 alternate;background:#d9f0ff}
.tool:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
#factToast{position:absolute;left:50%;top:70px;transform:translateX(-50%);max-width:min(560px,80vw);background:#fffbe0;border-radius:16px;padding:8px 18px;font-size:clamp(16px,1.9vw,21px);line-height:1.3;text-align:center;z-index:12;pointer-events:none}
#factToast.show{animation:factin .4s cubic-bezier(.3,1.5,.5,1)} @keyframes factin{from{transform:translateX(-50%) scale(.7);opacity:0}}
#mini{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;padding:0 84px 24px 76px;pointer-events:none}
#mini>*{pointer-events:auto}
.miniMsg{background:#fff;border-radius:16px;padding:6px 18px;font-family:'Baloo 2',sans-serif;font-size:clamp(17px,2vw,22px);text-align:center}
.miniRow{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.stk.green{background:#7ee081}
.bub{position:absolute;aspect-ratio:1;border-radius:50%;border:4px solid rgba(255,255,255,.95);background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.95) 0 12%,rgba(190,235,255,.45) 13% 100%);box-shadow:0 0 0 2px rgba(59,42,42,.25);animation:bob 3.2s ease-in-out infinite alternate;padding:0}
@keyframes bob{from{transform:translateY(14px)}to{transform:translateY(-22px)}}
#bookItems{display:flex;flex-direction:column;gap:8px;margin:0 0 16px;text-align:left}
.fact{display:flex;gap:10px;align-items:flex-start;border:3px solid var(--ink);border-radius:14px;padding:8px 10px;background:#fffbe0;font-size:16px;line-height:1.35}
.fact .stars{flex:0 0 auto;color:#e0a800;font-size:18px;letter-spacing:1px}
.fact.locked{background:#f1eef3;color:var(--muted)}

/* cosy shop */
.ov{position:fixed;inset:0;background:rgba(59,42,42,.55);z-index:9999;display:flex;align-items:center;justify-content:center;padding:18px;overflow:auto}
.panelBox{background:#fff;border:5px solid var(--ink);border-radius:26px;padding:22px 20px;max-width:560px;width:100%;text-align:center;box-shadow:10px 10px 0 var(--ink);max-height:92vh;overflow:auto}
.panelBox h2{font-size:clamp(26px,5vw,38px);line-height:1;margin:0 0 8px;font-weight:800;text-shadow:3px 3px 0 var(--pink)}
.panelBox p{font-size:17px;line-height:1.4;margin:4px 0 14px;color:var(--muted)}
#cosyItems{display:flex;flex-direction:column;gap:10px;margin:0 0 16px;text-align:left}
.item{display:flex;align-items:center;gap:12px;border:3px solid var(--ink);border-radius:16px;padding:8px 10px;background:#fff5f9;box-shadow:var(--sh3)}
.item .ic{width:58px;height:58px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:#fff;border:3px solid var(--ink);border-radius:12px;font-size:30px}
.item .tx{flex:1;font-size:15px;line-height:1.3}
.item .tx b{display:block;font-family:'Baloo 2',sans-serif;font-size:19px}
.item.owned{background:#e9ffd9}
.stk{font-size:20px;border:3px solid var(--ink);border-radius:16px;padding:8px 16px;box-shadow:var(--sh);min-height:48px;background:var(--lemon)}
.stk.white{background:#fff} .stk[disabled]{opacity:.4}
.item .stk{flex:0 0 auto;min-width:96px;font-size:18px}
.stk.big{font-size:24px;min-height:58px;padding:10px 24px}

@media (max-width:640px), (orientation:portrait){
  #cards{gap:8px} #cards .card{width:clamp(92px,28vw,120px);min-height:100px}
  #prizes .card,#quiz .card{min-height:64px}
  #quiz{grid-template-columns:1fr}
  .tool{min-width:74px}
  #prizes{grid-template-columns:1fr;width:min(420px,100%)}
  #bottom{padding:0 16px 84px 70px}
  #polishOv{padding:6px 12px 84px}
  /* portrait: below the shared ⛶ with room for its 6px halo, or it dodges down the page */
  #topR{top:76px;right:12px} #brave{top:128px;left:12px} #level{top:176px;left:12px}
}
@media (prefers-reduced-motion:reduce){ .float,.spark,#polishOv.shake{animation:none} }