/* Side Questies — the kid app's "game lobby" look (body.kid). The parent console keeps the plain cards in index.html.
   Big italic heads, glassy panels, rarity-colored tiles, glossy buttons with a moving shine, lobby light rays. */
body.kid{color:#fff;background:#0d0a2e}
body.kid::before{content:'';position:fixed;inset:-50%;z-index:-3;pointer-events:none;
  background:conic-gradient(from 0deg at 50% 40%,rgba(90,140,255,.0) 0deg,rgba(90,140,255,.18) 12deg,rgba(90,140,255,0) 24deg,rgba(180,90,255,.16) 60deg,rgba(180,90,255,0) 72deg,rgba(90,140,255,.14) 130deg,rgba(90,140,255,0) 142deg,rgba(255,90,180,.14) 200deg,rgba(255,90,180,0) 212deg,rgba(90,200,255,.16) 280deg,rgba(90,200,255,0) 292deg);
  animation:rays 60s linear infinite;opacity:1}
@keyframes rays{to{transform:rotate(360deg)}}
body.kid::after{content:'';position:fixed;inset:0;z-index:-4;pointer-events:none;height:auto;
  background:radial-gradient(120% 70% at 50% 0%,#3d5bff 0%,#2a1f8f 38%,#140b45 70%,#0a0624 100%)}
body.kid .bokeh{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
body.kid .bokeh i{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,0) 70%);animation:float 14s linear infinite}
@keyframes float{from{transform:translateY(20vh)}to{transform:translateY(-110vh)}}

body.kid .card{background:linear-gradient(180deg,rgba(40,34,110,.92),rgba(24,18,74,.92));border:2px solid rgba(140,160,255,.45);border-radius:18px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.18),0 10px 30px rgba(0,0,0,.35);color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
body.kid .card.soft{background:linear-gradient(180deg,rgba(30,120,90,.9),rgba(18,80,60,.9))}
body.kid .muted{color:#b9b3ff}
body.kid .h1{font-style:italic;font-size:34px;text-transform:uppercase;letter-spacing:.01em;transform:skewX(-6deg);transform-origin:left;
  color:#fff;-webkit-text-stroke:0;text-shadow:0 3px 0 #1a0f4a,0 0 22px rgba(120,150,255,.8)}
body.kid .h2{font-style:italic;color:#ffe45c;letter-spacing:.08em}
body.kid .btn{border:0;border-radius:12px;font-style:italic;color:#1b1030;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#fff58a 0%,#ffd400 45%,#f0a800 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.7),inset 0 -4px 0 rgba(150,80,0,.35),0 6px 0 #7a4a00,0 10px 20px rgba(0,0,0,.35)}
body.kid .btn::after{content:'';position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:shine 3.2s ease-in-out infinite}
@keyframes shine{0%,60%{left:-60%}100%{left:130%}}
body.kid .btn:active{transform:translateY(4px);box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 2px 0 #7a4a00}
body.kid .btn.green{background:linear-gradient(180deg,#8dff9e,#2fd65a 50%,#18a83e);box-shadow:inset 0 2px 0 rgba(255,255,255,.7),inset 0 -4px 0 rgba(0,80,20,.35),0 6px 0 #0c5a22,0 10px 20px rgba(0,0,0,.35)}
body.kid .btn.blue{background:linear-gradient(180deg,#8fc4ff,#3a7bff 50%,#2356d8);color:#fff;box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 6px 0 #16307a,0 10px 20px rgba(0,0,0,.35)}
body.kid .btn.pink{background:linear-gradient(180deg,#ffa3cc,#ff4f9a 50%,#d42a74);color:#fff;box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 6px 0 #7a1040,0 10px 20px rgba(0,0,0,.35)}
body.kid .btn.white{background:linear-gradient(180deg,#ffffff,#dcd8ff);box-shadow:inset 0 2px 0 #fff,0 6px 0 #4a3f9a,0 10px 20px rgba(0,0,0,.3)}
body.kid .btn.red{background:linear-gradient(180deg,#ff9aa6,#ff4d5e 50%,#c82336);color:#fff;box-shadow:0 6px 0 #6a0f1a}
body.kid .btn.sm{box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 4px 0 #4a3f9a}
body.kid .btn.sm.green{box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 4px 0 #0c5a22}
body.kid .chip{background:rgba(10,6,40,.75);color:#fff;border:2px solid rgba(160,170,255,.5);box-shadow:0 3px 0 rgba(0,0,0,.35)}
body.kid .chip.gold{background:linear-gradient(180deg,#3a2a00,#1a1200);border-color:#ffd400;color:#ffe45c;font-size:15px;padding:6px 14px 6px 8px}
body.kid .chip.bump{animation:bump .35s cubic-bezier(.2,1.8,.4,1)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
body.kid .pill{border:0;color:#1b1030}
body.kid input,body.kid select,body.kid textarea{background-color:rgba(255,255,255,.95);border:2px solid #8f9bff}
body.kid .linkbtn{color:#cfd6ff}
body.kid .notice{background:rgba(255,228,92,.14);border:1px solid rgba(255,228,92,.5);color:#fff4b0}
body.kid .li{border-bottom-color:rgba(160,170,255,.2)}
body.kid .li .grow span{color:#b9b3ff}

/* ── home base ── */
.hud{position:relative;margin:0 -14px 12px}
.hud-top{position:absolute;top:8px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:center;z-index:3;pointer-events:none}
.hud-top>*{pointer-events:auto}
.stage3d{position:relative;height:min(54vh,460px);min-height:300px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent);mask-image:linear-gradient(180deg,#000 80%,transparent)}
.stage3d canvas{cursor:grab}
.nameplate{position:relative;margin:-58px 14px 0;z-index:2;text-align:center}
.nameplate .hey{font-size:15px;color:#cfd6ff;text-shadow:0 2px 6px rgba(0,0,0,.6)}
.nameplate .tag{font-family:var(--game);font-weight:900;font-style:italic;font-size:30px;line-height:1;text-transform:uppercase;letter-spacing:.01em;
  color:#fff;text-shadow:0 3px 0 #1a0f4a,0 0 24px rgba(120,160,255,.9);word-break:break-word}
.nameplate .title{display:inline-block;margin-top:6px;font-size:13px;font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.06em;
  background:linear-gradient(90deg,#ffb800,#ffe45c);color:#2a1a00;padding:3px 12px;transform:skewX(-10deg);box-shadow:0 3px 0 #7a4a00}
.lvl{display:flex;align-items:center;gap:10px;margin:12px 4px 0}
.lvl .badge{flex:none;width:46px;height:46px;display:grid;place-items:center;font-family:var(--game);font-weight:900;font-size:20px;color:#1b1030;
  background:linear-gradient(180deg,#fff58a,#ffc400);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);filter:drop-shadow(0 3px 0 #7a4a00)}
.lvl .bar{flex:1;height:18px;border-radius:10px;background:rgba(0,0,0,.45);border:2px solid rgba(160,170,255,.5);overflow:hidden;position:relative}
.lvl .bar i{display:block;height:100%;background:linear-gradient(90deg,#10e7d4,#3a7bff,#b44cff);box-shadow:0 0 14px rgba(16,231,212,.8);transition:width 1s cubic-bezier(.2,.9,.3,1)}
.lvl .bar b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--game);font-weight:900;font-size:10px;color:#fff;text-shadow:0 1px 2px #000}
body.kid .statrow .stat{background:linear-gradient(180deg,rgba(40,34,110,.9),rgba(24,18,74,.9));border:2px solid rgba(140,160,255,.4);box-shadow:inset 0 2px 0 rgba(255,255,255,.15)}
body.kid .statrow .stat span{color:#b9b3ff}
/* rarity tiles */
body.kid .tile{border:0;border-radius:16px;color:#fff;min-height:128px;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -40px 60px rgba(0,0,0,.25),0 6px 0 rgba(0,0,0,.35),0 12px 24px rgba(0,0,0,.3)}
body.kid .tile::before{content:'';position:absolute;inset:0;background:radial-gradient(90% 70% at 80% 10%,rgba(255,255,255,.35),transparent 60%);pointer-events:none}
body.kid .tile::after{content:'';position:absolute;top:0;bottom:0;width:30%;left:-50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:shine 5s ease-in-out infinite}
body.kid .tile .ic{font-size:44px;filter:drop-shadow(0 4px 0 rgba(0,0,0,.35))}
body.kid .tile .t{font-style:italic;font-size:16px;text-shadow:0 2px 0 rgba(0,0,0,.35)}
body.kid .tile .s{opacity:1;color:rgba(255,255,255,.9)}
body.kid .tile:active{transform:translateY(5px) scale(.98)}
.r-legendary{background:linear-gradient(160deg,#ffb347,#ff7a1a 45%,#b8420a)}
.r-epic{background:linear-gradient(160deg,#d38cff,#9b3cff 45%,#5a15b0)}
.r-rare{background:linear-gradient(160deg,#7fd0ff,#2f86ff 45%,#1a3fb5)}
.r-uncommon{background:linear-gradient(160deg,#9dff8a,#2fce4a 45%,#127a2a)}
.r-mythic{background:linear-gradient(160deg,#ffe36e,#ffb800 40%,#e0600a)}
.r-icon{background:linear-gradient(160deg,#6ff7ff,#10b9d4 45%,#0a5a8a)}
.r-pink{background:linear-gradient(160deg,#ffa3d1,#ff4f9a 45%,#a8185a)}
.r-slate{background:linear-gradient(160deg,#c3c9ff,#6f78d8 45%,#3a3f8f)}

/* lists in kid screens */
body.kid .q{background:linear-gradient(180deg,rgba(40,34,110,.92),rgba(24,18,74,.92));border:2px solid rgba(140,160,255,.4);box-shadow:inset 0 2px 0 rgba(255,255,255,.15),0 6px 16px rgba(0,0,0,.3);color:#fff}
body.kid .q .n span{color:#b9b3ff}
body.kid .q.done{background:linear-gradient(180deg,rgba(20,110,70,.92),rgba(10,70,45,.92))}
body.kid .tick{background:rgba(0,0,0,.35);border:2px solid rgba(255,255,255,.5);box-shadow:none;color:#fff}
body.kid .tick.on{background:linear-gradient(180deg,#8dff9e,#2fd65a)} body.kid .tick.wait{background:linear-gradient(180deg,#fff58a,#ffc400)}
body.kid .ev{background:linear-gradient(180deg,rgba(40,34,110,.92),rgba(24,18,74,.92));border:2px solid rgba(140,160,255,.4);box-shadow:none;color:#fff}
body.kid .week div{background:rgba(24,18,74,.9);border:2px solid rgba(140,160,255,.4);color:#fff}
body.kid .week div.today{background:linear-gradient(180deg,#fff58a,#ffc400);color:#1b1030}
body.kid .lb{border-bottom-color:rgba(160,170,255,.2)} body.kid .lb.me{background:rgba(255,212,0,.16)}
body.kid .bub{border:0;box-shadow:0 3px 10px rgba(0,0,0,.3);color:#1b1030}
body.kid .bub.me{background:linear-gradient(180deg,#6ff7ff,#10cfe0)}
body.kid .choice{background:rgba(255,255,255,.95);border:2px solid #8f9bff;box-shadow:0 4px 0 #4a3f9a;color:#1b1030}
body.kid .choice.on{background:linear-gradient(180deg,#fff58a,#ffc400)}
body.kid .progress{background:rgba(0,0,0,.45);border:2px solid rgba(160,170,255,.5)} body.kid .progress>i{background:linear-gradient(90deg,#ff4f9a,#ffd400)}
.av3img{display:block;border-radius:inherit}
.mini .av3img,.lb .mini .av3img,.pers .mini .av3img{width:100%;height:auto}
body.kid .mini,body.kid .lb .mini,body.kid .pers .mini{border:2px solid rgba(255,255,255,.6);border-radius:10px;box-shadow:0 3px 8px rgba(0,0,0,.4)}
body.kid .podium .avw{border:2px solid rgba(255,255,255,.7);box-shadow:0 8px 20px rgba(0,0,0,.45)}
body.kid .podium .avw img{width:100%;height:auto;display:block}
.podium .p1 .avw{box-shadow:0 0 0 3px #ffd400,0 0 30px rgba(255,212,0,.7)}

/* ── avatar builder in 3D ── */
body.kid .avb-stage{position:sticky;top:env(safe-area-inset-top);z-index:5;display:block;padding:0;margin:0 -14px 8px;background:none}
body.kid .avb-preview{height:min(42vh,340px);border:0;border-radius:0;box-shadow:none;background:none}
.avb-tools{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:8px;align-items:flex-end;z-index:2}
.avb-hint{font-size:12px;color:#fff;text-shadow:0 1px 3px #000;opacity:.8}
body.kid .avb-tab{background:rgba(24,18,74,.9);border:2px solid rgba(140,160,255,.4);color:#fff;box-shadow:none}
body.kid .avb-tab.on{background:linear-gradient(180deg,#fff58a,#ffc400);color:#1b1030}
body.kid .avb-part{background:linear-gradient(180deg,rgba(40,34,110,.92),rgba(24,18,74,.92));border:2px solid rgba(140,160,255,.4);box-shadow:none}
body.kid .avb-lbl{color:#ffe45c}
body.kid .avb-opt{background:rgba(255,255,255,.08);border:2px solid rgba(160,170,255,.25)}
body.kid .avb-opt .nm{color:#fff}
body.kid .avb-opt.on{background:linear-gradient(180deg,#fff58a,#ffc400);border-color:#fff}
body.kid .avb-opt.on .nm{color:#1b1030}
body.kid .titles button{background:rgba(255,255,255,.1);border:2px solid rgba(160,170,255,.4);color:#fff}
body.kid .titles button.on{background:linear-gradient(180deg,#fff58a,#ffc400);color:#1b1030;border-color:#fff}
body.kid .sheet{background:linear-gradient(180deg,#2a2280,#140b45);border:2px solid rgba(140,160,255,.5);border-bottom:0;color:#fff}
body.kid .bigcode{background:rgba(0,0,0,.35);border-color:#ffd400;color:#ffe45c}
body.kid .day{-webkit-text-stroke:0;text-shadow:0 2px 0 #1a0f4a;font-style:italic}
.ob-stage{height:min(46vh,380px);margin:0 -14px;position:relative}

/* ── effects ── */
.fxcoin{position:fixed;z-index:95;width:26px;height:26px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,#fff6a8,#ffd400 45%,#e0a800);border:2px solid #7a4a00;display:grid;place-items:center;font:900 12px var(--game);color:#5a3a00;
  transition:transform .75s cubic-bezier(.5,-0.3,.7,1),opacity .75s;box-shadow:0 0 12px rgba(255,212,0,.8)}
.fxplus{position:fixed;z-index:96;pointer-events:none;font-family:var(--game);font-weight:900;font-style:italic;font-size:26px;color:#ffe45c;
  text-shadow:0 3px 0 #7a4a00,0 0 16px rgba(255,212,0,.9);animation:plus 1.1s ease-out forwards}
@keyframes plus{0%{transform:translate(-50%,0) scale(.6);opacity:0}20%{transform:translate(-50%,-10px) scale(1.2);opacity:1}100%{transform:translate(-50%,-70px) scale(1);opacity:0}}
.cine{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,rgba(40,20,120,.85),rgba(5,2,20,.96));animation:fadein .25s}
.cine::before{content:'';position:absolute;inset:-60%;background:repeating-conic-gradient(from 0deg,rgba(255,212,0,.22) 0 10deg,transparent 10deg 20deg);animation:rays 12s linear infinite}
.cine>*{position:relative}
.cine .big{font-family:var(--game);font-weight:900;font-style:italic;font-size:clamp(40px,12vw,76px);color:#fff;text-transform:uppercase;transform:skewX(-8deg);text-align:center;padding:0 14px;   /* (a title that wraps, "REWARD UNLOCKED" at 375px: centred and clear of the edges, like .gx-big) */
  text-shadow:0 5px 0 #1a0f4a,0 0 40px rgba(255,212,0,.9);animation:slam .6s cubic-bezier(.2,1.6,.4,1)}
.cine .num{margin-top:14px;width:130px;height:130px;display:grid;place-items:center;font-family:var(--game);font-weight:900;font-size:60px;color:#1b1030;
  background:linear-gradient(180deg,#fff58a,#ffc400);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);animation:slam .7s .15s both cubic-bezier(.2,1.6,.4,1)}
.cine .sub{margin-top:18px;font-size:18px;color:#cfd6ff;text-align:center;padding:0 20px}
.cine .tapc{margin-top:26px;font-size:13px;color:#8f9bff;letter-spacing:.2em;text-transform:uppercase}
@keyframes slam{0%{transform:scale(3) skewX(-8deg);opacity:0}100%{transform:scale(1) skewX(-8deg);opacity:1}}
@keyframes fadein{from{opacity:0}}
.chest{font-size:110px;line-height:1;animation:shake .5s ease-in-out 3}
.chest.open{animation:none;transform:scale(1.2)}
@keyframes shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg) scale(1.05)}75%{transform:rotate(12deg) scale(1.05)}}
.loot{font-size:96px;animation:slam .6s cubic-bezier(.2,1.6,.4,1)}

/* ── Guinea Pigs Go! (a portal in Caldwell, at Kiwanis Oval) ── */
.gp{position:fixed;inset:0;z-index:30;background:#0e0836;font-family:var(--body)}
.gp-view{position:absolute;inset:0}
.gp-hud{position:absolute;inset:0;pointer-events:none;display:none}
.gp-hud>*{pointer-events:auto}
.gp-top{position:absolute;top:calc(env(safe-area-inset-top) + 10px);left:10px;right:10px;display:flex;gap:10px;align-items:center}
.gp-prog{flex:1;position:relative;height:30px;border-radius:15px;background:rgba(255,248,236,.92);border:3px solid #e8c98f;box-shadow:0 3px 0 rgba(0,0,0,.2)}
.gp-prog::before{content:'';position:absolute;left:12px;right:30px;top:12px;height:4px;background:#d8b878;border-radius:2px}
.gp-prog b{position:absolute;top:7px;width:14px;height:14px;border-radius:50%;border:2px solid #4a3728;transition:left .1s linear}
.gp-prog b.me{width:18px;height:18px;top:4px;box-shadow:0 0 0 3px #e8632c}
.gp-prog .lettuce{position:absolute;right:6px;top:2px;font-style:normal;font-size:17px}
.gp-banner{display:none;position:absolute;left:50%;top:22%;transform:translateX(-50%);background:#fff;border:4px solid #e8536b;border-radius:18px;padding:10px 18px;text-align:center;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.gp-banner b{display:block;font-family:var(--game);font-weight:900;font-style:italic;color:#e8536b;font-size:clamp(16px,4.6vw,24px)}
.gp-banner small{color:#8a7154;font-size:14px}
.gp-count{display:none;position:absolute;inset:0;pointer-events:none;text-align:center;padding-top:22vh;background:rgba(0,0,0,.18)}
.gp-count b{display:block;font-family:var(--game);font-weight:900;font-style:italic;font-size:clamp(90px,30vw,170px);color:#fff;text-shadow:0 8px 0 #d97a2b,0 0 40px rgba(255,200,80,.9)}
.gp-count small{color:#fff;font-size:18px;text-shadow:0 2px 4px #000}
.gp-count.slam b{animation:slam .45s cubic-bezier(.2,1.6,.4,1)}
.gp-bubbles{position:absolute;inset:0;pointer-events:none}
.gp-bub{position:absolute;transform:translate(-50%,-100%);background:#fff;color:#4a3728;font-weight:800;font-size:16px;padding:5px 12px;border-radius:14px;white-space:nowrap;box-shadow:0 4px 10px rgba(0,0,0,.25)}
.gp-speed{position:absolute;inset:0;pointer-events:none;opacity:0;background:repeating-conic-gradient(from 0deg at 50% 45%,rgba(255,255,255,.55) 0 1.2deg,transparent 1.2deg 9deg);
  -webkit-mask-image:radial-gradient(circle at 50% 45%,transparent 32%,#000 70%);mask-image:radial-gradient(circle at 50% 45%,transparent 32%,#000 70%);animation:rays 3s linear infinite}
.gp-go{position:absolute;right:18px;bottom:calc(env(safe-area-inset-bottom) + 22px);width:112px;height:112px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffb38a,#e8632c 60%,#a8431a);color:#fff;font-family:var(--game);font-weight:900;font-style:italic;font-size:17px;line-height:1.1;
  border:5px solid #fff8ec;box-shadow:0 8px 0 #7a2a0a,0 12px 24px rgba(0,0,0,.4);touch-action:none;user-select:none;-webkit-user-select:none}
.gp-go.on{transform:translateY(6px);box-shadow:0 2px 0 #7a2a0a}
.gp-go.mash{background:radial-gradient(circle at 35% 30%,#ffc1cc,#e8536b 60%,#9a1a38);animation:bump .25s infinite}
.gp-select{position:absolute;left:0;right:0;bottom:0;max-height:62vh;overflow-y:auto;padding:0 12px calc(env(safe-area-inset-bottom) + 14px);
  background:linear-gradient(180deg,rgba(14,8,54,0),rgba(14,8,54,.92) 16%)}
.gp-title{text-align:center;font-family:var(--game);font-weight:900;font-style:italic;font-size:clamp(26px,8vw,44px);color:#fff;padding-top:26px;text-shadow:0 4px 0 #d97a2b,0 0 26px rgba(255,160,60,.8)}
.gp-title span{color:#ffe27a}
.gp-tag{text-align:center;color:#ffe8c8;margin:4px 0 12px}
.gp-cards{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
.gp-card{flex:0 0 min(78vw,260px);scroll-snap-align:center;text-align:left;background:linear-gradient(180deg,#fff8ec,#f3e2c6);border:4px solid var(--k);border-radius:18px;padding:12px;color:#4a3728;box-shadow:0 6px 0 rgba(0,0,0,.3)}
.gp-card b{display:block;font-family:var(--game);font-weight:900;font-size:18px}
.gp-card .sub{display:block;font-size:13.5px;color:#8a7154;min-height:54px;margin:4px 0 6px}
.gp-card .st{display:block;font-size:13px}
.gp-card .st i{font-style:normal;color:#e8912c;letter-spacing:2px}
.gp-card .go{display:block;margin-top:10px;text-align:center;background:var(--k);color:#fff;border-radius:999px;padding:8px;font-family:var(--game);font-weight:900;font-style:italic;box-shadow:0 4px 0 rgba(0,0,0,.25)}
.gp-results{display:none;position:absolute;left:0;right:0;bottom:0;padding:14px 14px calc(env(safe-area-inset-bottom) + 16px)}
.gp-res{max-width:520px;margin:0 auto;background:linear-gradient(180deg,#fff8ec,#f3e2c6);border:5px solid #e8c98f;border-radius:22px;padding:16px;color:#4a3728;box-shadow:0 10px 30px rgba(0,0,0,.4);animation:slam .5s cubic-bezier(.2,1.6,.4,1)}
.gp-head{font-family:var(--game);font-weight:900;font-style:italic;font-size:clamp(18px,5.4vw,26px);text-align:center}
.gp-foot{text-align:center;font-size:12px;color:#8a7154}
.gp-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:2px dashed #e8c98f}
.gp-row .pl{font-family:var(--game);font-weight:900;font-size:24px;width:26px}
.gp-row .dot{width:22px;height:22px;border-radius:50%;border:2px solid #4a3728}
.gp-row small{display:block;color:#8a7154}
.gp-res .btn{margin-top:12px}

/* ── daily check-in / journal / today ── */
.ci-card{text-align:center;padding:22px 14px}
.ci-q{font-family:var(--game);font-weight:900;font-style:italic;font-size:22px;line-height:1.2;margin-bottom:18px}
.ci-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.ci-opts.five{grid-template-columns:repeat(2,1fr)}
.ci-opt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border-radius:16px;background:rgba(255,255,255,.1);border:2px solid rgba(160,170,255,.4);color:#fff;font-weight:800;font-size:16px;transition:transform .1s}
.ci-opt .e{font-size:42px;line-height:1;filter:drop-shadow(0 4px 0 rgba(0,0,0,.3))}
.ci-opt:active,.ci-opt.picked{transform:scale(.94);background:linear-gradient(180deg,#fff58a,#ffc400);color:#1b1030;border-color:#fff}
.sect{display:flex;justify-content:space-between;align-items:baseline;margin:6px 2px 10px;font-family:var(--game);font-weight:900;font-style:italic;font-size:15px;color:#ffe45c;letter-spacing:.06em}
.sect small{font-family:var(--body);font-style:normal;color:#cfd6ff;font-size:13px;letter-spacing:0}
#tasks{margin-bottom:18px}
body.kid textarea{min-height:150px;font-size:17px;line-height:1.45}
.jentry .jbody{white-space:pre-wrap;margin-top:8px;font-size:16px;line-height:1.45;font-weight:600}
/* taller than the screen (an SE is 667px): the card's auto margins centre it when it fits and pin its top when it
   doesn't, so "You're not alone" can always be scrolled to (flex centring puts the overflow above the top, out of reach) */
.crisis{position:fixed;inset:0;z-index:200;background:rgba(10,14,40,.94);display:flex;align-items:flex-start;justify-content:center;
  padding:calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 16px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.crisis-card{margin:auto;max-width:460px;width:100%;background:#fdfbf6;color:#2a2438;border-radius:20px;padding:22px 18px;font-family:var(--body);font-size:16px;line-height:1.5;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.crisis-card .ch{font-size:26px;font-weight:800;margin-bottom:6px}
.crisis-card .ch,.chelp .ch{display:flex;align-items:center;justify-content:space-between;gap:10px}
.crisis-card .ch .saybtn{position:static;flex:none}   /* early readers' 🔊, in the heading row so it never covers the text */
@media (max-height:700px){.crisis-card{padding:16px 14px;font-size:15px;line-height:1.42}.crisis-card .ch{font-size:22px}.crisis-row{padding:9px 10px;margin:8px 0}.crisis-card p{margin:8px 0}}
.crisis-row{background:#f1eefc;border-radius:14px;padding:12px;margin:10px 0}
.crisis-row b{display:block;font-size:16px}
.crisis-row span{display:block;color:#5a5270;font-size:14.5px}
.crisis-btns{display:flex;gap:8px;margin-top:8px}
.cbtn{flex:1;text-align:center;padding:10px;border-radius:12px;background:#3a6ff0;color:#fff;font-weight:800;text-decoration:none}
.cclose{width:100%;margin-top:8px;padding:12px;border-radius:12px;background:#e6e2f2;color:#2a2438;font-weight:800;font-size:16px}

/* ── savings goal, reminders, store pins ── */
.goal .gemo,.goalcta .gemo,.remindcard .gemo{font-size:40px;line-height:1;filter:drop-shadow(0 3px 0 rgba(0,0,0,.3))}
.goal .glbl{font-family:var(--game);font-weight:900;font-style:italic;font-size:11px;letter-spacing:.1em;color:#ffe45c}
.goal .grow b{font-size:18px}
.gbar{position:relative;height:22px;border-radius:12px;background:rgba(0,0,0,.45);border:2px solid rgba(255,212,0,.6);overflow:hidden;margin:12px 0 6px}
.gbar i{display:block;height:100%;background:linear-gradient(90deg,#ffb800,#ffe45c);box-shadow:0 0 16px rgba(255,212,0,.8);transition:width 1.2s cubic-bezier(.2,.9,.3,1)}
.gbar b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--game);font-weight:900;font-size:11px;color:#fff;text-shadow:0 1px 2px #000}
.gsub{color:#cfd6ff}
.goal.ready{border-color:#3ddc68;box-shadow:0 0 0 2px rgba(61,220,104,.5),0 10px 30px rgba(0,0,0,.35)}
.goalcta,.remindcard{display:flex;align-items:center;gap:12px;width:100%;text-align:left}
.goalcta small,.remindcard small{display:block;color:#cfd6ff;font-weight:600}
.remindcard .rx{font-size:26px;line-height:1;color:#cfd6ff;padding:0 4px}
.rw{position:relative;margin:0;text-align:center}
.gpin{position:absolute;top:6px;right:6px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.3);font-size:17px;filter:grayscale(1);opacity:.7}
.gpin.on{filter:none;opacity:1;background:linear-gradient(180deg,#fff58a,#ffc400);border-color:#fff;box-shadow:0 0 14px rgba(255,212,0,.8)}
.rw.isgoal{border-color:#ffd400;box-shadow:0 0 0 2px rgba(255,212,0,.5),0 10px 30px rgba(0,0,0,.35)}

/* ── Sidebesties: the AI chat companion ── */
.ctitle{font-family:var(--game);font-weight:900;font-style:italic;font-size:14px;letter-spacing:.08em;color:#ffe45c;text-shadow:0 2px 0 #1a0f4a}
.chatwrap{display:flex;flex-direction:column;height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px);height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px);margin-bottom:-50px}
/* keyboard up (html.kb, app.js): iOS keeps the page full height behind the keyboard, so the chat ends at the visible height
   (--vvh) instead: the composer sits right on the keyboard and the header stays in view */
html.kb .chatwrap{height:calc(var(--vvh,100dvh) - env(safe-area-inset-top) - 20px);margin-bottom:calc(-50px - env(safe-area-inset-bottom))}
html.kb body:has(.chatwrap),html.kb #app:has(>.chatwrap){min-height:0}
html.kb .chatwrap .cstage{height:84px}   /* a smaller robot while typing, so the messages keep some room above the keyboard */
.cstage{position:relative;flex:none;height:170px;margin:0 -14px}
.cstage.big{height:min(40vh,300px);margin:0 -14px 6px}
.cname{flex:none;text-align:center;margin:-6px 0 8px}
.cname b{font-family:var(--game);font-weight:900;font-style:italic;font-size:24px;text-transform:uppercase;letter-spacing:.01em;text-shadow:0 3px 0 #1a0f4a,0 0 22px rgba(120,160,255,.85)}
.aitag{display:inline-block;margin-left:8px;vertical-align:5px;font-size:10px;font-weight:800;letter-spacing:.12em;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:#dfe4ff}
.cnote{flex:none;font-size:12.5px;margin-bottom:8px}
.cthread{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:4px 2px 10px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.cthread>.bub.me{max-width:82%}
.cb{display:flex;align-items:flex-end;gap:7px;align-self:flex-start;max-width:90%}
.cb img{width:30px;height:30px;flex:none;border-radius:50%;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.55);object-fit:cover}
.cb .bub{max-width:none;border-bottom-left-radius:4px}
body.kid .bub.err{background:#ffe1e5}
.typing{display:inline-flex;gap:5px;padding:5px 2px}
.typing i{width:8px;height:8px;border-radius:50%;background:#7a70a0;animation:tdot 1.1s infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-5px);opacity:1}}
.cchips{flex:none;display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:none}
.cchips::-webkit-scrollbar{display:none}
.cchips button{flex:none;padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.12);border:2px solid rgba(160,170,255,.5);color:#fff;font-weight:800;font-size:15px;white-space:nowrap}
.cchips button:active{background:linear-gradient(180deg,#fff58a,#ffc400);color:#1b1030}
.ccomposer{flex:none;display:flex;gap:8px;align-items:flex-end}
body.kid .ccomposer textarea{min-height:0;height:50px;max-height:130px;resize:none;border-radius:16px;font-size:17px;line-height:1.3;padding:12px 14px}
body.kid .ccomposer .btn{flex:none;width:58px;height:50px;padding:0;font-size:22px}
body.kid .ccomposer .btn:disabled,body.kid .ccomposer textarea:disabled{filter:grayscale(1);opacity:.6}
.cleft{flex:none;text-align:center;color:#cfd6ff;min-height:18px;margin-top:4px}
.chelp{align-self:stretch;background:#fdfbf6;color:#2a2438;border-radius:16px;padding:12px 14px;font-size:15px;line-height:1.45;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.chelp .ch{font-size:19px;font-weight:800}
.chelp p{margin:6px 0}
.cswatches{display:flex;flex-wrap:wrap;gap:10px}
.cswatches button{width:42px;height:42px;border-radius:50%;border:3px solid rgba(255,255,255,.35);box-shadow:0 3px 0 rgba(0,0,0,.35);transition:transform .12s}
.cswatches button.on{border-color:#fff;box-shadow:0 0 0 3px #ffd400,0 3px 0 rgba(0,0,0,.35);transform:scale(1.12)}
.ccta{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin-bottom:14px}
.ccta img{width:56px;height:56px;flex:none;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.3),rgba(255,255,255,.06));border:2px solid rgba(255,255,255,.5)}
.ccta b{font-size:18px}
.ccta small{display:block;color:#cfd6ff;font-weight:600}
.ccta-go{font-size:28px;filter:drop-shadow(0 3px 0 rgba(0,0,0,.3))}

/* emotes: a round button on the 3D stage opens a sheet of every move (avatar-emotes.js) */
.avb-preview{position:relative}
.emote-ui{position:absolute;inset:0;pointer-events:none;z-index:4;line-height:1.2}
.emote-btn{pointer-events:auto;position:absolute;right:10px;top:44%;width:64px;height:64px;border-radius:50%;border:3px solid var(--ink);
  background:linear-gradient(180deg,#ffe36e,#ffb300);box-shadow:0 4px 0 var(--ink),0 0 18px rgba(255,211,0,.45);font-size:24px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;cursor:pointer;animation:emotePulse 2.4s ease-in-out infinite}
.emote-btn span{font:900 8px/1 var(--game);letter-spacing:0;color:var(--ink);margin-top:2px}
.emote-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
@keyframes emotePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.emote-sheet{pointer-events:auto;position:absolute;left:10px;right:10px;top:10px;max-height:calc(100% - 20px);overflow:auto;border-radius:18px;
  background:rgba(22,10,44,.9);border:2px solid rgba(255,255,255,.18);box-shadow:0 10px 30px rgba(0,0,0,.45);padding:10px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.emote-sheet[hidden]{display:none}
.emote-head{display:flex;align-items:center;justify-content:space-between;color:#fff;font:900 15px/1 var(--game);margin:2px 4px 8px}
.emote-x{background:rgba(255,255,255,.12);border:0;color:#fff;border-radius:10px;width:32px;height:32px;font-size:16px;cursor:pointer}
.emote-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:6px}
.emote-opt{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px 7px;border-radius:14px;border:2px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));color:#fff;cursor:pointer}
.emote-opt i{font-style:normal;font-size:24px;line-height:1}
.emote-opt span{font:800 11px/1.1 var(--body,system-ui);text-align:center}
.emote-opt:active{transform:scale(.95);background:rgba(255,227,110,.25)}

/* ── Side Questie player: one question per screen, instant right/wrong ── */
.qtop{margin-bottom:10px}
.qcard{position:relative;text-align:center;padding:10px 12px 16px}
.qbar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px}
.qbar .saybtn{position:static;flex:none}
.qsub{font:italic 800 12px var(--game);color:#b9b3ff;text-transform:uppercase;letter-spacing:.06em;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saybtn{position:absolute;right:10px;top:10px;z-index:1;width:44px;height:44px;border-radius:50%;font-size:21px;line-height:1;display:grid;place-items:center;
  background:rgba(255,255,255,.14);border:2px solid rgba(160,170,255,.55);box-shadow:0 3px 0 rgba(0,0,0,.35)}
.saybtn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.35)}
.saybtn.sm{position:static;width:36px;height:36px;font-size:17px}
.ci-card{position:relative}
.ci-card .ci-q{margin:0 42px 18px}
/* --n = the widest counting group (kid.js playQ): a row of 4–5 shrinks to fit the card, so she can see every item she counts */
.qpic{--fit:calc((min(100vw,560px) - 70px) / (var(--n,1) * 1.4));font-size:min(clamp(46px,15vw,78px),var(--fit));line-height:1.15;margin:6px 0 6px;filter:drop-shadow(0 4px 0 rgba(0,0,0,.25))}
.qpic.many{font-size:min(clamp(28px,8.5vw,42px),var(--fit));letter-spacing:1px}
.qpic span{display:inline-block;white-space:nowrap}   /* a counting group (🍓🍓🍓🍓🍓) never splits across lines */
.qtext{font-family:var(--game);font-weight:900;font-style:italic;font-size:clamp(19px,5.4vw,25px);line-height:1.25;margin:8px 8px 16px;word-break:break-word;text-shadow:0 2px 0 #1a0f4a}
.qch{display:flex;flex-direction:column;gap:10px;text-align:left}
body.kid .qc{display:flex;align-items:center;gap:12px;width:100%;margin:0;min-height:58px;padding:12px 14px;font-size:19px;line-height:1.2;transition:transform .1s}
.qc .ltr{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font:normal 900 13px var(--game);background:rgba(27,16,48,.08);color:#6b5f8a}
.qch.emo,.qch.short{flex-direction:row;flex-wrap:wrap;justify-content:center}
body.kid .qch.emo .qc,body.kid .qch.short .qc{flex:0 0 calc(33.33% - 7px);width:auto;justify-content:center;position:relative;min-height:88px;padding:8px 4px}
.qch.emo .qc span{font-size:clamp(38px,11vw,54px);line-height:1}
.qch.short .qc span{font:900 clamp(22px,6.6vw,30px) var(--game)}
.qch.emo .ltr,.qch.short .ltr{position:absolute;left:5px;top:5px;width:19px;height:19px;font-size:10px;border-radius:6px}
body.kid .qc.picked{transform:scale(.96)}
body.kid .qc.right{background:linear-gradient(180deg,#b8ffc4,#2fd65a);box-shadow:0 0 0 3px #fff,0 0 24px rgba(61,220,104,.9);animation:qbounce .55s cubic-bezier(.2,1.6,.4,1)}
body.kid .qc.wrong{background:linear-gradient(180deg,#ffb3bd,#ff4d5e);color:#fff;animation:qshake .45s}
body.kid .qc.wrong .ltr{color:#fff;background:rgba(0,0,0,.15)}
body.kid .qc.glow{background:linear-gradient(180deg,#e2ffe7,#8dff9e);box-shadow:0 0 0 3px #3ddc68,0 0 22px rgba(61,220,104,.9);animation:qglow .8s ease-in-out infinite alternate}
body.kid .qc.dim{opacity:.4}
body.kid .qc.saying,body.kid .ci-opt.saying{box-shadow:0 0 0 4px #ffd400,0 0 20px rgba(255,212,0,.8)}
@keyframes qbounce{0%{transform:scale(1)}35%{transform:scale(1.1)}65%{transform:scale(.97)}100%{transform:scale(1)}}
@keyframes qshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
@keyframes qglow{to{box-shadow:0 0 0 5px #3ddc68,0 0 36px rgba(61,220,104,1)}}
.fbline{margin:14px 0 10px;font:italic 900 19px var(--game);line-height:1.3}
.fbline.ok{color:#8dff9e}.fbline.bad{color:#ffb3bd}.fbline b{color:#fff}
.qstars{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px;font-size:26px;line-height:1}
.qstars i{font-style:normal;color:rgba(255,255,255,.2);text-shadow:0 2px 0 rgba(0,0,0,.3)}
.qstars i.ok{color:#ffd400;text-shadow:0 0 10px rgba(255,212,0,.8),0 2px 0 #7a4a00}
.qstars i.miss{color:#8f86c9}
.qstars i.cur{color:#fff;animation:emotePulse 1.1s ease-in-out infinite}
/* result, early readers: big stars, coins, one line */
.lres{text-align:center;margin-top:28px}
.bigstars{display:flex;justify-content:center;flex-wrap:wrap;gap:2px;font-size:clamp(42px,13vw,64px);line-height:1}
.bigstars.ten{font-size:clamp(28px,8vw,40px)}
.bigstars i{font-style:normal;color:rgba(255,255,255,.18);animation:slam .5s both cubic-bezier(.2,1.6,.4,1)}
.bigstars i.ok{color:#ffd400;text-shadow:0 0 18px rgba(255,212,0,.9),0 4px 0 #7a4a00}
.lhead{font:italic 900 clamp(30px,9vw,44px) var(--game);margin:18px 0 10px;text-shadow:0 3px 0 #1a0f4a,0 0 22px rgba(120,150,255,.8)}
.lcoins{display:flex;justify-content:center;font-size:34px;margin:6px 0 10px}
.lbtns{display:flex;gap:12px;justify-content:center;margin-top:22px}
body.kid .lbtns .btn{width:auto;flex:1;max-width:150px;font-size:40px;padding:14px 0;font-style:normal}

/* ── Bonus Quests ── */
.bmeter .row b{font-size:16px}
.bcoins{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 6px}
.bcoins .coin{width:30px;height:30px;font-size:13px;opacity:.28;filter:grayscale(1)}
.bcoins .coin.on{opacity:1;filter:none;box-shadow:0 0 12px rgba(255,212,0,.8)}
.subjgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.subjgrid .subj:last-child:nth-child(odd){grid-column:1/-1}
.subj{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:132px;padding:16px 8px 12px;border-radius:18px;color:#fff;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -40px 60px rgba(0,0,0,.2),0 6px 0 rgba(0,0,0,.35),0 12px 24px rgba(0,0,0,.3)}
.subj .se{font-size:54px;line-height:1;filter:drop-shadow(0 4px 0 rgba(0,0,0,.35))}
.subj b{font:italic 900 15px var(--game);text-transform:uppercase;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.subj small{font-weight:700;opacity:.9}
.subj:active,.lq:active{transform:translateY(5px) scale(.98)}
.s-math{background:linear-gradient(160deg,#7fd0ff,#2f86ff 45%,#1a3fb5)}
.s-reading{background:linear-gradient(160deg,#ffb347,#ff7a1a 45%,#b8420a)}
.s-science{background:linear-gradient(160deg,#9dff8a,#2fce4a 45%,#127a2a)}
.s-social{background:linear-gradient(160deg,#6ff7ff,#10b9d4 45%,#0a5a8a)}
.s-spanish{background:linear-gradient(160deg,#ffa3d1,#ff4f9a 45%,#a8185a)}
.bsh{flex:1;font:italic 900 20px var(--game);text-transform:uppercase;text-align:right;text-shadow:0 2px 0 #1a0f4a}
.cons{display:flex;flex-wrap:wrap;gap:9px}
.con{display:flex;align-items:center;gap:8px;padding:9px 14px 9px 10px;border-radius:999px;background:rgba(255,255,255,.12);border:2px solid rgba(160,170,255,.45);color:#fff;font-weight:800;font-size:16px;line-height:1.15;text-align:left;box-shadow:0 3px 0 rgba(0,0,0,.3)}
.con .ce{font-size:26px;line-height:1}
.con.mix{background:linear-gradient(180deg,#fff58a,#ffc400);color:#1b1030;border-color:#fff}
.con:disabled{opacity:.35;box-shadow:none}
.con:active{transform:scale(.96)}
.r-brain{background:linear-gradient(160deg,#8affd9,#12c9a0 45%,#0a6e5a)}
.r-star{background:linear-gradient(160deg,#fff08a,#ff9ad8 50%,#b44cff)}

/* ── today's subjects (daily flow, calendar) ── */
.asg{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(160,170,255,.2)}
.asg:last-child{border-bottom:0}
.asg .ae{flex:none;font-size:28px;line-height:1;letter-spacing:-2px}
.asg .grow{flex:1;min-width:0}
.asg .grow b{display:block;font-size:17px}
.asg .grow span{font-size:13.5px;color:#b9b3ff}
.asg.passed .ae{filter:saturate(.6)}
/* kid calendar: 4 tappable weeks */
.mcal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:12px}
.mcal .dow{text-align:center;font:800 10.5px var(--game);color:#cfd6ff;padding:2px 0}
.mcal .mo{grid-column:1/-1;font:italic 900 13px var(--game);color:#ffe45c;margin:6px 2px 0;text-transform:uppercase;letter-spacing:.06em}
.mcal .cd{position:relative;min-width:0;min-height:60px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 1px 6px;border-radius:10px;background:rgba(24,18,74,.9);border:2px solid rgba(140,160,255,.35);color:#fff}
.mcal .cd .dn{font:900 15px var(--game)}
.mcal .cd .em{font-size:13px;line-height:1.1;letter-spacing:-1px;text-align:center;overflow:hidden;max-width:100%}
.mcal .cd .dot{position:absolute;right:4px;bottom:4px;width:7px;height:7px;border-radius:50%;background:#ff4f9a;box-shadow:0 0 6px #ff4f9a}
.mcal .cd.past{opacity:.5}
.mcal .cd.today{background:linear-gradient(180deg,#fff58a,#ffc400);color:#1b1030;border-color:#fff;opacity:1}
.mcal .cd.sel{box-shadow:0 0 0 3px #10e7d4,0 0 14px rgba(16,231,212,.7)}
.mcal .cd:active{transform:scale(.94)}

/* ── early readers (body.little): bigger, picture-first, read aloud ── */
.lqs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.lqs .lq:last-child:nth-child(odd){grid-column:1/-1}
.lq{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:140px;padding:14px 8px;border-radius:20px;color:#fff;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -40px 60px rgba(0,0,0,.2),0 6px 0 rgba(0,0,0,.35),0 12px 24px rgba(0,0,0,.3)}
.lq .pe{font-size:56px;line-height:1;white-space:nowrap;filter:drop-shadow(0 4px 0 rgba(0,0,0,.3))}
.lq .pe b{font-size:40px;margin-left:2px}
.lq .lt{font-weight:800;font-size:15px;line-height:1.15;text-align:center;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.lq .ok{position:absolute;top:8px;right:8px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:20px;background:#2fd65a;border:2px solid #fff}
.lq .ok.zz{background:rgba(0,0,0,.4)}
.lq.done{filter:saturate(.5);opacity:.85}
.lq.out{filter:grayscale(.8);opacity:.6}
.bonusbig{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin:2px 0 18px;padding:22px 12px;border-radius:20px;font:italic 900 24px var(--game);text-transform:uppercase;color:#1b1030;
  background:linear-gradient(160deg,#fff58a,#ffc400 45%,#ff9d00);box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 6px 0 #7a4a00,0 12px 24px rgba(0,0,0,.35)}
.bonusbig:active{transform:translateY(5px);box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 1px 0 #7a4a00}
body.kid .tiles.big .tile{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:136px}
body.kid .tiles.big .tile .ic{font-size:64px}
body.kid .tiles.big .tile .t{font-size:13px;margin-top:10px}
body.kid.little .btn.back,body.kid.little .qtop .btn.sm{font-size:18px;padding:7px 14px}
/* thumbs, not cursors: Back, Quit, the sound toggle and every other small kid button are at least 44px (48 for early readers) */
body.kid .btn.sm,body.kid button.chip{min-height:44px;min-width:44px;justify-content:center}
body.kid.little .btn.sm,body.kid.little button.chip{min-height:48px;min-width:48px}
body.little .qtext{font-size:clamp(23px,6.8vw,30px)}
body.little .qc{min-height:70px;font-size:24px;justify-content:center;text-align:center}
body.little .qch.emo .qc{min-height:108px}
body.little .qch.emo .qc span{font-size:clamp(50px,15vw,70px)}
body.little .qpic{font-size:min(clamp(60px,20vw,96px),var(--fit))}
body.little .qpic.many{font-size:min(clamp(30px,8.6vw,46px),var(--fit))}
body.little .saybtn{width:54px;height:54px;font-size:27px;background:linear-gradient(180deg,#fff58a,#ffc400);border-color:#fff}
body.little .saybtn.sm{width:42px;height:42px;font-size:20px}
body.little .fbline{font-size:24px}
body.little .passage{font-size:24px;line-height:1.6}
body.little .ci-q{font-size:26px}
body.little .ci-card .ci-q{margin:0 54px 18px}
body.little .ci-opt{font-size:18px}
body.little .ci-opt .e{font-size:58px}
body.little .con{font-size:18px;padding:12px 16px 12px 12px}
body.little .con .ce{font-size:36px}
body.little .subj .se{font-size:64px}
body.little .asg .ae{font-size:36px}
body.little #jmood button{font-size:34px;padding:6px 10px}
.stk{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.stk button{font-size:30px;line-height:1;padding:8px 0;border-radius:12px;background:rgba(255,255,255,.1);border:2px solid rgba(160,170,255,.35)}
.stk button:active{transform:scale(.9)}
.stktray{min-height:66px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;padding:8px;margin:0 0 10px;border:2px dashed rgba(255,228,92,.6);border-radius:14px}
.stktray button{font-size:40px;line-height:1}
.jstk{font-size:26px;margin-top:6px;letter-spacing:2px}
.gtedit{margin-top:14px;text-align:left}
.gtedit summary{cursor:pointer;color:#cfd6ff;font-weight:700;margin-bottom:8px}
.gtshow{font:italic 900 clamp(22px,7vw,30px) var(--game);text-align:center;margin:8px 0 12px;word-break:break-all;text-shadow:0 3px 0 #1a0f4a,0 0 20px rgba(120,160,255,.8)}
body.kid .bigdice{font-size:22px;padding:18px}
.etitles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.etitles button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px;border-radius:14px;background:rgba(255,255,255,.1);border:2px solid rgba(160,170,255,.4);color:#fff;font-weight:800;font-size:11.5px;line-height:1.1}
.etitles button .e{font-size:34px;line-height:1}
.etitles button.on{background:linear-gradient(180deg,#fff58a,#ffc400);color:#1b1030;border-color:#fff}
@media (prefers-reduced-motion:reduce){body.kid .qc.right,body.kid .qc.wrong,body.kid .qc.glow,.qstars i.cur,.bigstars i{animation:none}}

/* ── Store tabs (🎁 Real rewards · ⚔️ Gear & Blocks) and Locker tabs (👕 My look · 🎒 My stuff) ── */
.segtabs{display:flex;gap:8px;margin:2px 0 14px}
.segtabs button{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:7px;min-height:48px;padding:8px 8px;border-radius:14px;background:rgba(255,255,255,.1);
  border:2px solid rgba(160,170,255,.45);color:#fff;font:italic 900 12.5px var(--game);text-transform:uppercase;letter-spacing:.02em;line-height:1.1;box-shadow:0 3px 0 rgba(0,0,0,.3)}
.segtabs button .e{font-size:22px;font-style:normal;line-height:1;flex:none}
.segtabs button.on{background:linear-gradient(180deg,#fff58a,#ffc400);color:#1b1030;border-color:#fff}
.segtabs button:active{transform:translateY(2px)}
body.little .segtabs button{min-height:64px;font-size:15px}
body.little .segtabs button .e{font-size:32px}

/* ── Gear & Blocks: the instant item shop ── */
.gx-head{padding:12px 14px}
.gx-meter{margin-top:10px}
.gx-bar{height:12px;border-radius:7px;background:rgba(0,0,0,.45);border:2px solid rgba(160,170,255,.45);overflow:hidden;margin-top:5px}
.gx-bar i{display:block;height:100%;background:linear-gradient(90deg,#10e7d4,#3a7bff)}
.gx-mats{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.gx-mats span{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(160,170,255,.4);font-weight:800;font-size:14px}
.gx-mats span.zero{opacity:.45}
.gx-mats small{color:#b9b3ff;font-size:12px}
.gx-cats{margin:0 0 10px}
.gx-tiers{display:flex;gap:6px;overflow-x:auto;padding:8px 2px 10px;scrollbar-width:none}
.gx-tiers::-webkit-scrollbar{display:none}
.gx-tiers button{flex:1 0 58px;position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:56px;padding:7px 4px;border-radius:12px;
  background:rgba(24,18,74,.9);border:2px solid rgba(140,160,255,.4);color:#fff;font:800 11px var(--game)}
.gx-tiers button .e{font-size:22px;line-height:1}
.gx-tiers button.on{background:linear-gradient(180deg,#fff58a,#ffc400);color:#1b1030;border-color:#fff}
.gx-tiers button.lk .e{filter:grayscale(1);opacity:.7}
.gx-tiers button i{position:absolute;top:-7px;right:1px;font-style:normal;font-size:14px}
.gx-set{margin:0 0 12px;padding:10px 12px;border-radius:14px;background:rgba(0,0,0,.25);border:1px solid rgba(160,170,255,.3)}
.gx-set b{font:italic 900 15px var(--game)}
.gx-set.lk{border-color:rgba(255,212,0,.6);background:rgba(255,212,0,.08)}
.gx-rule{margin-top:5px;color:#dfe4ff}
.gx-set.lk .gx-rule{color:#ffe45c;font-weight:800}
.gx-how{margin-top:6px;text-decoration:none}
.gx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}
.gx-card{display:flex;flex-direction:column;gap:7px;min-width:0;padding:10px;border-radius:16px;color:#fff;
  background:linear-gradient(180deg,rgba(40,34,110,.92),rgba(24,18,74,.92));border:2px solid rgba(140,160,255,.45);box-shadow:inset 0 2px 0 rgba(255,255,255,.12),0 6px 16px rgba(0,0,0,.3)}
.gx-card.own{border-color:rgba(61,220,104,.8)}
.gx-card.lock .gx-top{opacity:.75}
.gx-card.flat{background:rgba(0,0,0,.2);box-shadow:none;border-color:rgba(160,170,255,.3)}
.gx-top{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;color:#fff;min-width:0}
.gx-top b{font-size:15.5px;line-height:1.15;overflow-wrap:anywhere}
.gx-ic{flex:none;display:inline-grid;vertical-align:middle;place-items:center;width:58px;height:58px;font-size:32px;line-height:1;border-radius:12px;
  background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 3px var(--tc,#8f9bff),inset 0 -7px 0 rgba(0,0,0,.28),0 3px 0 rgba(0,0,0,.3)}
.gx-ic.big{width:86px;height:86px;font-size:50px;border-radius:16px}
.gx-ic.pal{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px;padding:7px;box-shadow:inset 0 0 0 3px rgba(160,170,255,.7),0 3px 0 rgba(0,0,0,.3)}
.gx-ic.pal i{width:100%;height:100%;border-radius:2px;box-shadow:inset -3px -3px 0 rgba(0,0,0,.25),inset 3px 3px 0 rgba(255,255,255,.3)}
.gx-ic.pal.big{padding:10px;gap:4px}
.gx-ic.pal.n1 i{grid-area:1/1/3/3}
.gx-ic.pal.n2 i{grid-row:1/3}
.gx-ic.pal.n3 i:last-child{grid-column:1/3}
.gx-words{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.gx-words span{font-size:12.5px;font-weight:800;line-height:1.2;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.1);color:#dfe4ff}
.gx-price{display:flex;justify-content:center;align-items:center;gap:4px;font-size:16px}
.gx-price.dim{opacity:.6}
.gx-price small{font-weight:800}
.gx-rc{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.gx-rc span{font-size:12.5px;font-weight:800;padding:2px 7px;border-radius:8px;background:rgba(255,77,94,.16);border:1px solid rgba(255,120,130,.55)}
.gx-rc span.ok{background:rgba(61,220,104,.18);border-color:rgba(61,220,104,.65)}
.gx-btns{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:auto;text-align:center}
.gx-btns .pill{align-self:center;padding:3px 14px}
body.kid .gx-btns .btn{width:100%;padding-left:6px;padding-right:6px}
.gx-lock{font-size:12.5px;font-weight:800;color:#ffe45c;text-align:center;line-height:1.25;overflow-wrap:anywhere}
.gx-blocks{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:12px 0 0}
.gx-blocks span{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 5px;border-radius:999px;background:rgba(255,255,255,.1);font-weight:800;font-size:14px;text-transform:capitalize}
.gx-blocks i{width:18px;height:18px;border-radius:4px;box-shadow:inset -2px -2px 0 rgba(0,0,0,.25),inset 2px 2px 0 rgba(255,255,255,.3)}
/* the confirm sheet: price · have · after, then the 🎯 goal trade-off */
.gx-sum{margin:14px 0 12px;padding:8px 12px;border-radius:14px;background:rgba(0,0,0,.3)}
.gx-sum .row{padding:5px 0}
.gx-sum .row.tot{border-top:1px dashed rgba(255,255,255,.3);margin-top:3px;padding-top:9px}
.gx-trade{padding:10px 12px;border-radius:14px;background:rgba(255,212,0,.12);border:1px solid rgba(255,212,0,.55);margin-bottom:12px}
.gx-trade .row{align-items:flex-start;justify-content:flex-start}
.gx-trade .gemo{font-size:34px;line-height:1;flex:none}
.gx-trade b{display:block;font-size:16px}
.gx-trade small{display:block;color:#fff4b0;font-weight:600;font-size:14px;margin-top:2px}
.gx-tbar{position:relative;height:14px;border-radius:8px;background:rgba(0,0,0,.45);overflow:hidden;margin-top:9px}
.gx-tbar i{position:absolute;top:0;bottom:0;left:0}
.gx-tbar .now{background:linear-gradient(90deg,#ffb800,#ffe45c)}
.gx-tbar .gone{background:repeating-linear-gradient(45deg,rgba(255,77,94,.9) 0 6px,rgba(255,77,94,.45) 6px 12px)}
.gx-short{margin:4px 0 12px}
.cine .gx-big{font-size:clamp(32px,10vw,60px);text-align:center;padding:0 14px}
body.little .gx-ic{width:70px;height:70px;font-size:42px}
body.little .gx-ic.big{width:96px;height:96px;font-size:58px}
body.little .gx-top b{font-size:17px}
body.little .gx-words span{font-size:15px}

/* ── My stuff: mastery, materials, the collection book (silhouettes for what's not found yet) ── */
.mst-n{font:italic 900 36px var(--game);line-height:1;color:#ffe45c;text-shadow:0 3px 0 #7a4a00}
.mst-list{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}
.mst-list span{padding:4px 10px;border-radius:999px;background:rgba(61,220,104,.2);border:1px solid rgba(61,220,104,.65);font-weight:800;font-size:14px}
.mst-tiers{display:flex;gap:6px;margin:12px 0 8px}
.mst-tiers span{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;border-radius:12px;background:rgba(0,0,0,.3);border:1px solid rgba(160,170,255,.3);font-size:22px;line-height:1}
.mst-tiers span.on{background:rgba(61,220,104,.18);border-color:rgba(61,220,104,.65)}
.mst-tiers small{font:800 11px var(--body);color:#dfe4ff;white-space:nowrap}
.mst-go{color:#ffe45c}
.bk-h{font:italic 900 16px var(--game)}
.bk-n{font:900 14px var(--game);color:#ffe45c}
.bk-bar{height:10px;border-radius:6px;background:rgba(0,0,0,.45);overflow:hidden;margin:8px 0 6px}
.bk-bar i{display:block;height:100%;background:linear-gradient(90deg,#3ddc68,#10e7d4);box-shadow:0 0 10px rgba(61,220,104,.6)}
.bk-rule{margin-bottom:10px;color:#dfe4ff}
.bk-rule.lk{color:#ffe45c;font-weight:800}
.bk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bk-it{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;min-width:0;padding:9px 3px 7px;border-radius:14px;background:rgba(255,255,255,.08);border:2px solid rgba(160,170,255,.3);color:#fff}
.bk-it.got{border-color:rgba(61,220,104,.6);background:rgba(61,220,104,.1)}
.bk-it .e{font-size:32px;line-height:1.1}
.bk-it .gx-ic{width:40px;height:40px;padding:5px;gap:2px}
.bk-it small{font-weight:800;font-size:12px;line-height:1.1;text-align:center;overflow-wrap:anywhere}
.bk-it i{display:inline-flex;align-items:center;gap:3px;font-style:normal;font-size:11px;font-weight:800;color:#ffe45c;text-align:center;line-height:1.15}
.bk-it i .coin{width:14px;height:14px;font-size:8px;border-width:1px}
.bk-it.sil{background:rgba(0,0,0,.25);border-style:dashed}
.bk-it.sil .e,.bk-it.sil .gx-ic{filter:brightness(0) opacity(.45)}
.bk-it.sil small{color:#b9b3ff}
.bk-it:active{transform:scale(.95)}
body.little .bk-it .e{font-size:40px}
body.little .bk-it .gx-ic{width:48px;height:48px}
body.little .bk-it small{font-size:13px}

/* ── 🏙️ Back to Caldwell: the floating way back while a portal's screen is up (Side Questies, Bonus Quests, the Gear Shop).
   Top left, in a band of its own (body.cwtrip moves #app down), so it never sits on a question's answers; under sheets ── */
#cwpill{position:fixed;z-index:50;top:calc(env(safe-area-inset-top) + 8px);left:max(14px,env(safe-area-inset-left),calc(50% - 266px));max-width:calc(100% - 28px);
  display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 16px 8px 12px;border-radius:999px;border:2px solid rgba(255,255,255,.85);white-space:nowrap;
  background:linear-gradient(180deg,#8fc4ff,#3a7bff 50%,#2356d8);color:#fff;font:italic 900 14px var(--game);text-transform:uppercase;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 4px 0 #16307a,0 8px 18px rgba(0,0,0,.35);animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
#cwpill .e{font-size:20px;font-style:normal;line-height:1}
#cwpill:active{transform:translateY(3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 1px 0 #16307a}
body.kid.cwtrip #app{padding-top:calc(env(safe-area-inset-top) + 64px)}
body:not(.kid) #cwpill{display:none}
body.little #cwpill{min-height:52px}
@media (max-width:359px){#cwpill{font-size:12px;padding:8px 12px 8px 10px}}   /* (clear of the balance chip a result puts top right) */
body.little.cwtrip #app{padding-top:calc(env(safe-area-inset-top) + 72px)}