:root{
  --ink:#150f2e; --panel:#fff6e3; --sky1:#0b051f; --sky2:#2a1b5e; --sky3:#5c3a8f;
  --blue:#3f93ff; --blueD:#2257c4; --red:#e6453c; --gold:#ffce3a; --goldD:#ff9e1f;
  --green:#33d68a; --purp:#8a4fd0; --txt:#fff6e3; --glow:#ffcf57;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;overflow:hidden;}
body{
  font-family:'Baloo 2',sans-serif;color:var(--txt);
  background:linear-gradient(180deg,var(--sky1),var(--sky2) 60%,var(--sky3));
  display:flex;align-items:center;justify-content:center;
  -webkit-user-select:none;user-select:none;touch-action:manipulation;
}
#stage{width:100%;height:100dvh;max-width:none;position:relative;overflow:hidden;display:flex;flex-direction:column;}
/* Painted scene layer — behind all screens. No image by default (transparent),
   so the original gradient/SVG look is preserved until art files are added. */
#bgLayer{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
  background-repeat:no-repeat;opacity:0;transition:opacity .45s ease;pointer-events:none;}
#bgLayer.on{opacity:1;}
.screen{position:absolute;inset:0;z-index:1;display:none;flex-direction:column;align-items:center;justify-content:center;padding:18px;gap:14px;}
.screen.on{display:flex;}
.comic{font-family:'Bangers',cursive;letter-spacing:.04em;}
.read{font-family:'Andika',sans-serif;}

.btn{
  font-family:'Bangers',cursive;font-size:clamp(26px,4.5vw,40px);letter-spacing:.06em;
  color:var(--ink);background:linear-gradient(180deg,#ffd75e,#f0a82b);
  border:5px solid var(--ink);border-radius:26px;padding:16px 38px;cursor:pointer;
  box-shadow:0 8px 0 #9c6a12, 0 14px 24px rgba(0,0,0,.35);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:active{transform:translateY(6px);box-shadow:0 2px 0 #9c6a12;}
.btn.blue{background:linear-gradient(180deg,#5ea0ff,#2257c4);color:#fff;box-shadow:0 8px 0 #143a85,0 14px 24px rgba(0,0,0,.35);}
.btn.blue:active{box-shadow:0 2px 0 #143a85;}
.btn.ghost{background:transparent;color:var(--txt);border-color:var(--txt);box-shadow:none;font-size:clamp(20px,3vw,26px);padding:10px 24px;}
.btn:disabled{opacity:.4;pointer-events:none;}

.bubble{
  position:relative;background:rgba(18,11,40,.82);color:#fff6e3;border:4px solid var(--gold);
  border-radius:22px;padding:16px 70px 16px 22px;max-width:min(760px,92vw);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:clamp(19px,3vw,27px);line-height:1.4;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
  box-shadow:0 12px 30px rgba(0,0,0,.55), 0 0 26px rgba(255,206,58,.3), inset 0 1px 0 rgba(255,255,255,.12);
}
.bubble .ear{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:52px;height:52px;border-radius:50%;background:var(--blue);border:4px solid var(--ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;font-size:26px;
}

.tilerow{display:flex;gap:clamp(10px,2vw,22px);flex-wrap:wrap;justify-content:center;}
.tile{
  width:clamp(96px,16vw,150px);height:clamp(96px,16vw,150px);
  background:linear-gradient(180deg,#5ea0ff,#2257c4);
  border:6px solid var(--ink);border-radius:24px;color:#fff;
  font-family:'Andika',sans-serif;font-weight:700;font-size:clamp(54px,9vw,84px);
  display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;
  box-shadow:0 8px 0 #143a85;transition:transform .12s,opacity .3s,filter .3s;
}
.tile:active{transform:translateY(5px);box-shadow:0 3px 0 #143a85;}
.tile.dim{opacity:.32;filter:grayscale(.6);pointer-events:none;}
.tile.hint{animation:hintpulse 1.6s ease-in-out infinite;}
@keyframes hintpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.tile.win{background:linear-gradient(180deg,#5fe0a0,#23a35f);box-shadow:0 8px 0 #137044;animation:pop .5s ease;}
/* Read-It: small tappable letter tiles of the word + big picture choices */
.tile.rletter{width:clamp(64px,11vw,96px);height:clamp(64px,11vw,96px);font-size:clamp(38px,7vw,60px);
  background:linear-gradient(180deg,#ffd75e,#f0a82b);color:var(--ink);box-shadow:0 6px 0 #9c6a12;}
.tile.rletter:active{box-shadow:0 2px 0 #9c6a12;}
.picktile{font-size:clamp(50px,10vw,82px);background:linear-gradient(180deg,#fff6e3,#e7dcc0);color:var(--ink);}
/* confusable-letter contrast cue (b vs d) on the learn screen */
#letterCue{align-items:center;gap:14px;}
#letterCue .cueok,#letterCue .cuex{font-weight:700;font-size:clamp(44px,9vw,74px);width:clamp(64px,12vw,100px);height:clamp(64px,12vw,100px);border:5px solid var(--ink);border-radius:18px;display:flex;align-items:center;justify-content:center;}
#letterCue .cueok{background:#3ec97e;color:#fff;box-shadow:0 5px 0 #137044;}
#letterCue .cuex{background:#e7dcc0;color:#9c2f2f;position:relative;opacity:.85;}
#letterCue .cuex::after{content:"";position:absolute;left:8%;top:46%;width:84%;height:6px;background:#e6453c;transform:rotate(-18deg);border-radius:3px;}
#letterCue .cuevs{font-family:'Bangers',cursive;color:var(--gold);font-size:clamp(16px,3vw,24px);-webkit-text-stroke:3px var(--ink);paint-order:stroke;}
/* Instant Spells: big heart-word + word-choice tiles. Heart letters glow gold with a ♥. */
.spellbig{font-size:clamp(70px,15vw,128px);font-weight:700;color:var(--txt);letter-spacing:.06em;-webkit-text-stroke:5px var(--ink);paint-order:stroke;}
.wordtile{width:auto;min-width:clamp(96px,18vw,150px);height:clamp(80px,13vw,120px);padding:0 18px;
  font-size:clamp(34px,6vw,54px);font-weight:700;background:linear-gradient(180deg,#fff6e3,#e7dcc0);color:var(--ink);letter-spacing:.04em;}
.heartl{color:var(--gold);position:relative;}
.heartl::after{content:"♥";position:absolute;top:-.7em;left:50%;transform:translateX(-50%);font-size:.42em;color:var(--red);-webkit-text-stroke:0;}
/* Story Gate: sentence word tiles wrap; sight words get a soft gold tint */
#sentWords{flex-wrap:wrap;max-width:min(900px,96vw);}
.wordtile.heartword{background:linear-gradient(180deg,#fff3c4,#ffe08a);}
/* Vex's Fortress finale boss */
#fortBanner{font-size:clamp(24px,5vw,40px);color:var(--gold);-webkit-text-stroke:5px var(--ink);paint-order:stroke;text-align:center;}
.forthp{width:min(560px,90vw);height:26px;border-radius:14px;border:4px solid var(--ink);background:#3b1a1a;overflow:hidden;box-shadow:0 4px 0 #1a0c0c;}
#fortHPfill{height:100%;width:100%;background:linear-gradient(180deg,#ff6b5e,#c4302b);transition:width .35s ease;}
#fortVex .boss{width:clamp(140px,24vw,230px);}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.slot{
  width:clamp(86px,14vw,130px);height:clamp(86px,14vw,130px);border-radius:22px;
  border:6px dashed var(--ink);background:#ffe9a8;color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-family:'Andika',sans-serif;font-weight:700;font-size:clamp(48px,8vw,74px);
}
.slot.filled{border-style:solid;background:#3ec97e;color:var(--ink);animation:pop .45s ease;}
/* ----- Magic-E (long vowels) ----- */
.magtile{ width:clamp(78px,13vw,112px); height:clamp(78px,13vw,112px); border-radius:20px;
  border:5px solid var(--ink); background:#ffe9a8; color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:clamp(42px,7vw,64px); }
.magtile.vowelt{ background:#cfe6ff; }                          /* the vowel about to go long */
.magtile.longv{ background:linear-gradient(180deg,#ffd75e,#f0a82b); box-shadow:0 0 18px var(--gold); }
.magtile.longv.flip{ animation:magflip .5s ease; }
@keyframes magflip{ 0%{transform:scale(1)} 45%{transform:scale(1.35) rotate(-6deg)} 100%{transform:scale(1)} }
.magtile.silente{ opacity:.5; border-style:dashed; color:var(--purp); }   /* silent E (also used on read/forge tiles+slots) */
.magtile.silente.flyin{ animation:magflyin .5s ease; }
@keyframes magflyin{ 0%{transform:translateX(70px) scale(.4); opacity:0} 60%{opacity:1} 100%{transform:translateX(0) scale(1); opacity:.5} }
.rletter.silente, .slot.silente{ opacity:.55; border-style:dashed; }       /* silent E in read tiles / forge slots */
.rletter.longv{ background:linear-gradient(180deg,#ffd75e,#f0a82b); }
/* heart-word slot: the irregular "remember it" letter, marked with a ♥ */
.slot.heartslot{position:relative;border-color:var(--red);background:#ffd9e4;}
.slot.heartslot::after{content:"♥";position:absolute;top:-14px;right:-6px;font-size:30px;color:var(--red);-webkit-text-stroke:3px var(--ink);paint-order:stroke;}
.slot.heartslot.filled{background:#ff9ec0;}
/* word-sized slot (cloze blank / scramble slots hold whole words, not one letter) */
.wordslot{min-width:clamp(90px,16vw,140px);width:auto;height:clamp(72px,12vw,108px);padding:0 14px;border-radius:18px;
  border:5px dashed var(--ink);background:#ffe9a8;color:var(--ink);display:flex;align-items:center;justify-content:center;
  font-family:'Andika',sans-serif;font-weight:700;font-size:clamp(30px,6vw,50px);}
.wordslot.filled{border-style:solid;background:#3ec97e;color:var(--ink);animation:pop .45s ease;}

.hud{position:absolute;top:env(safe-area-inset-top,8px);left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:10px 14px;pointer-events:none;z-index:5;}
.hud>*{pointer-events:auto;}
.chip{background:rgba(21,15,46,.85);border:3px solid var(--txt);border-radius:18px;padding:6px 16px;font-family:'Bangers',cursive;font-size:clamp(17px,2.6vw,24px);color:var(--gold);letter-spacing:.06em;}
.roundbtn{width:54px;height:54px;border-radius:50%;background:rgba(21,15,46,.85);border:3px solid var(--txt);color:var(--txt);font-size:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.starsrow{font-size:clamp(20px,3vw,28px);color:var(--gold);}
/* Daily Training meter — encouragement only, fills as he plays, never drains/penalizes */
#dailyMeter{position:absolute;top:calc(env(safe-area-inset-top,8px) + 58px);left:14px;right:14px;z-index:5;pointer-events:none;}
.dailylabel{font-family:'Bangers',cursive;font-size:clamp(14px,2.4vw,19px);letter-spacing:.06em;color:var(--gold);text-align:center;-webkit-text-stroke:3px var(--ink);paint-order:stroke;}
.dailybar{height:16px;border-radius:10px;border:3px solid var(--ink);background:rgba(21,15,46,.8);overflow:hidden;box-shadow:0 3px 0 rgba(0,0,0,.3);margin-top:2px;}
#dailyFill{height:100%;width:0%;background:linear-gradient(90deg,#5fe0a0,#23a35f);transition:width .5s ease;}
#dailyFill.done{background:linear-gradient(90deg,#ffd75e,#f0a82b);}

/* ------- CITY MAP ------- */
#mapScroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;}
#mapSVGwrap{width:100%;}
#mapSVGwrap svg{display:block;width:100%;height:auto;}
.mnode{cursor:pointer;}
.mnode.locked{opacity:.45;pointer-events:none;}
.mnode .ring{animation:none;}
.mnode.current .ring{animation:mappulse 1.8s ease-in-out infinite;transform-origin:center;transform-box:fill-box;}
@keyframes mappulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
#mapHud{position:absolute;top:calc(env(safe-area-inset-top,8px) + 64px);left:14px;right:14px;display:flex;justify-content:space-between;pointer-events:none;z-index:4;}

#traceWrap{position:relative;width:min(64dvh,86vw);aspect-ratio:1;background:rgba(255,246,227,.08);border:5px solid var(--txt);border-radius:28px;}
#traceSVG{width:100%;height:100%;touch-action:none;}
.tdot{fill:var(--gold);stroke:var(--ink);stroke-width:3;}
.tdot.next{animation:hintpulse 1.4s infinite;transform-origin:center;transform-box:fill-box;}
.tdot.hit{fill:var(--green);}
.guide{font-family:'Andika',sans-serif;font-weight:700;fill:rgba(255,246,227,.16);}

.boss{width:clamp(170px,30vw,280px);transition:transform .35s ease;}
.boss.hitfx{animation:shake .38s ease;}
@keyframes shake{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(-8px,3px) rotate(-3deg)}50%{transform:translate(7px,-3px) rotate(2deg)}75%{transform:translate(-5px,2px) rotate(-2deg)}100%{transform:translate(0,0)}}
.boss.flee{transform:translateX(140%) rotate(14deg) scale(.7);opacity:0;transition:all .9s ease;}
.pips{display:flex;gap:10px;justify-content:center;margin-bottom:6px;}
.pip{width:24px;height:24px;border-radius:50%;background:#9fe870;border:3px solid var(--ink);}
.pip.off{background:#3b3360;border-color:#9b94c9;}
.burst{
  position:absolute;width:140px;height:140px;border-radius:50%;pointer-events:none;z-index:9;
  background:radial-gradient(circle,#ffffff 0%,#fff3c4 28%,#ffc93c 50%,rgba(255,138,61,0) 72%);
  animation:burst .55s ease-out forwards;
}
@keyframes burst{0%{transform:scale(.15);opacity:1}55%{opacity:.95}100%{transform:scale(1.7);opacity:0}}
/* sparkle particles flung out from a correct answer */
.spark{position:absolute;width:14px;height:14px;border-radius:3px;pointer-events:none;z-index:9;
  box-shadow:0 0 8px rgba(255,255,255,.7);animation:sparkfly .5s ease-out forwards;}
@keyframes sparkfly{0%{transform:translate(0,0) scale(1) rotate(0);opacity:1}
  100%{transform:translate(var(--sx),var(--sy)) scale(.2) rotate(160deg);opacity:0}}
/* confetti rain on wins */
.confetti{position:absolute;top:-24px;width:12px;height:16px;pointer-events:none;z-index:12;
  animation:confettifall linear forwards;}
@keyframes confettifall{0%{transform:translate(0,0) rotate(0);opacity:1}
  100%{transform:translate(var(--dx),105vh) rotate(720deg);opacity:.9}}
/* full-stage flash (single, soft — not a strobe) */
.flashfx{position:absolute;inset:0;pointer-events:none;z-index:11;background:rgba(255,255,255,.45);
  animation:flashfade .36s ease-out forwards;}
@keyframes flashfade{0%{opacity:1}100%{opacity:0}}
/* screen shake on big hits */
#stage.shaking{animation:stageshake .34s ease;}
#stage.shaking.big{animation:stageshake .5s ease;}
@keyframes stageshake{0%{transform:translate(0,0)}20%{transform:translate(-7px,4px)}40%{transform:translate(6px,-4px)}
  60%{transform:translate(-5px,3px)}80%{transform:translate(4px,-2px)}100%{transform:translate(0,0)}}
/* combo streak chip */
.combochip{position:absolute;top:18%;left:50%;transform:translateX(-50%);z-index:13;pointer-events:none;
  font-family:'Bangers',cursive;font-size:clamp(30px,6vw,52px);color:#ff8a3d;
  -webkit-text-stroke:6px var(--ink);paint-order:stroke;letter-spacing:.04em;animation:combochip .9s ease-out forwards;}
@keyframes combochip{0%{transform:translateX(-50%) scale(.4) rotate(-6deg);opacity:0}
  25%{transform:translateX(-50%) scale(1.2) rotate(-6deg);opacity:1}100%{transform:translateX(-50%) scale(1) translateY(-26px) rotate(-6deg);opacity:0}}
/* adult gate: gear grows/glows while held */
.roundbtn.holding{animation:holdgrow 3s linear forwards;}
@keyframes holdgrow{0%{transform:scale(1);box-shadow:0 0 0 2px rgba(255,201,60,.35)}
  100%{transform:scale(1.28);box-shadow:0 0 0 12px rgba(255,201,60,.85),0 0 22px rgba(255,201,60,.9)}}
@media (prefers-reduced-motion: reduce){
  .confetti,.spark,#stage.shaking,.flashfx,.combochip{animation-duration:.2s!important;}
  #stage.shaking{animation:none;}
}
.zapword{position:absolute;font-family:'Bangers',cursive;color:var(--gold);-webkit-text-stroke:6px var(--ink);paint-order:stroke;font-size:clamp(40px,8vw,72px);pointer-events:none;animation:zw .8s ease-out forwards;z-index:9;}
@keyframes zw{0%{transform:scale(.4) rotate(-8deg);opacity:0}30%{opacity:1}100%{transform:scale(1.15) rotate(-8deg) translateY(-30px);opacity:0}}

.panelart{position:relative;width:min(600px,90vw);border:5px solid var(--gold);border-radius:24px;overflow:hidden;background:rgba(20,12,44,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 14px 30px rgba(0,0,0,.5), 0 0 24px rgba(255,206,58,.22);}
.panelart svg{display:block;width:100%;height:auto;}

/* ally cheer pop — a friend's face + name bounces in during their mission type */
.allypop{position:absolute;left:14px;bottom:96px;z-index:7;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));
  animation:allypop 2.2s ease forwards;}
.allypop .allyname{margin-top:-6px;font-family:'Bangers',cursive;font-size:18px;letter-spacing:.06em;
  color:var(--gold);-webkit-text-stroke:4px var(--ink);paint-order:stroke;}
@keyframes allypop{0%{transform:scale(.3) translateY(20px);opacity:0}
  14%{transform:scale(1.12) translateY(0);opacity:1}24%{transform:scale(1)}
  80%{transform:scale(1);opacity:1}100%{transform:scale(.9) translateY(-8px);opacity:0}}

.title-logo{font-size:clamp(54px,10vw,110px);color:var(--gold);-webkit-text-stroke:8px var(--ink);paint-order:stroke;text-align:center;line-height:.95;}
.sub{font-size:clamp(20px,3.4vw,30px);color:#cfc6f2;text-align:center;}
.heroimg{width:clamp(150px,26vw,260px);}
.gearlist{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.gearbadge{background:rgba(21,15,46,.7);border:3px solid var(--gold);color:var(--gold);border-radius:16px;padding:8px 16px;font-family:'Bangers',cursive;font-size:20px;letter-spacing:.05em;}
#settingsPanel{position:absolute;inset:0;background-color:#0b051f;background-image:linear-gradient(rgba(11,5,31,.84),rgba(11,5,31,.92)),url("art/bg-base.jpeg");background-size:cover;background-position:center;z-index:20;display:none;flex-direction:column;align-items:center;justify-content:flex-start;gap:12px;padding:24px 18px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
#settingsPanel.on{display:flex;}
#saveBox{width:min(640px,90vw);height:100px;border-radius:14px;border:3px solid var(--txt);background:#171236;color:var(--txt);font-size:12px;padding:8px;}

/* Grown-Up Corner tabs */
.tabbar{display:flex;gap:8px;}
.tabbtn{font-family:'Bangers',cursive;font-size:22px;letter-spacing:.04em;color:var(--txt);
  background:rgba(255,255,255,.06);border:3px solid #3a2d72;border-radius:14px 14px 0 0;padding:8px 22px;cursor:pointer;}
.tabbtn.on{background:#241b4d;border-color:var(--gold);color:var(--gold);}
.tabpane{display:none;flex-direction:column;align-items:center;gap:12px;width:min(720px,94vw);}
/* Progress tab */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;}
.pcard{background:#241b4d;border:2px solid #3a2d72;border-radius:14px;padding:10px;text-align:center;}
.pnum{font-family:'Bangers',cursive;font-size:30px;color:var(--gold);letter-spacing:.03em;}
.plbl{font-size:12px;color:#cfc6f2;}
.psec{width:100%;text-align:left;font-size:14px;color:#e7e0ff;margin-top:6px;}
.pgems{margin-top:6px;line-height:1.9;}
.pgem{display:inline-block;min-width:26px;padding:2px 7px;border-radius:8px;border:2px solid var(--ink);
  color:#fff;font-family:'Andika',sans-serif;font-weight:700;text-align:center;}
.pgem.warn{background:#e6453c;}
.pnote{font-size:12px;color:#9b94c9;}
.tabpane.on{display:flex;}
.audrow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center;width:100%;}
.audrow input[type=password],.audrow select{flex:1;min-width:180px;padding:9px 12px;border-radius:12px;
  border:2px solid #3a2d72;background:#171236;color:var(--txt);font-size:15px;font-family:inherit;}
.audrow label{font-size:13px;color:#cfc6f2;display:block;margin-bottom:3px;}
.audfilter{display:flex;gap:6px;margin-left:auto;}
.chipbtn{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:14px;color:var(--txt);
  background:rgba(255,255,255,.06);border:2px solid #3a2d72;border-radius:14px;padding:6px 14px;cursor:pointer;}
.chipbtn.on{background:linear-gradient(180deg,#ffd75e,#f0a82b);color:var(--ink);border-color:var(--ink);}
.audlist{width:100%;max-height:46dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  border:2px solid #3a2d72;border-radius:14px;background:rgba(0,0,0,.2);}
.audline{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid #2a2350;}
.audline:last-child{border-bottom:none;}
.audline.rec{background:rgba(179,72,110,.16);}
.audline .meta{flex:1;min-width:0;}
.audline .lid{font-family:'Baloo 2';font-weight:800;font-size:13px;color:var(--gold);}
.audline .ltx{font-size:12px;color:#cfc6f2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.audline .st{font-size:11px;font-weight:800;padding:2px 7px;border-radius:8px;white-space:nowrap;}
.st.s-mine{background:#1f8a70;color:#fff;} .st.s-ship{background:#2257c4;color:#fff;} .st.s-tts{background:#3b3360;color:#cfc6f2;}
.audline button{font-family:'Baloo 2';font-weight:800;font-size:13px;color:var(--ink);
  background:linear-gradient(180deg,#ffd75e,#f0a82b);border:2px solid var(--ink);border-radius:10px;padding:5px 9px;cursor:pointer;}
.audline button.rec2{background:linear-gradient(180deg,#ff8aa5,#c9466a);color:#fff;}
.audline button.rec2.live{background:#e6453c;animation:recpulse 1.2s ease-in-out infinite;}
.audline button:disabled{opacity:.35;pointer-events:none;}
@keyframes recpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.fadein{animation:fade .5s ease;}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.vpstatus{font-size:14px;color:#9b94c9;}
.echip{font-family:'Bangers',cursive;font-size:20px;letter-spacing:.05em;padding:10px 18px;border-radius:16px;
  border:4px solid var(--ink);background:#241b4d;color:var(--txt);cursor:pointer;}
.echip.onsel{background:linear-gradient(180deg,#ffd75e,#f0a82b);color:var(--ink);}
.echip.lockd{opacity:.4;pointer-events:none;}
.equiprow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.baselbl{font-family:'Bangers',cursive;color:#9b94c9;font-size:20px;letter-spacing:.1em;}
.gemshelf{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;background:rgba(21,15,46,.6);
  border:3px solid #3a2d72;border-radius:18px;padding:12px 18px;min-height:64px;}
/* Player picker (who's playing) */
#playerPicker{position:absolute;inset:0;background-color:#0b051f;background-image:linear-gradient(rgba(11,5,31,.55),rgba(11,5,31,.68)),url("art/bg-title.jpeg");background-size:cover;background-position:center;z-index:22;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px;}
#playerPicker.on{display:flex;}
#playerCards{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;align-items:flex-end;}
.playercard{background:rgba(31,22,56,.92);border:5px solid var(--ink);border-radius:22px;
  padding:14px 18px 12px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;
  box-shadow:0 8px 0 #0c0820;transition:transform .12s ease;}
.playercard.cur{border-color:var(--gold);box-shadow:0 0 22px var(--gold),0 8px 0 #0c0820;}
.playercard:active{transform:translateY(5px);}
.playercard .pchero svg{height:130px;width:auto;}
.playercard .pcname{font-weight:700;font-size:22px;color:var(--txt);}
/* Training Room slot row (build-the-word) */
.slotrow{display:flex;gap:clamp(8px,1.6vw,16px);flex-wrap:wrap;justify-content:center;min-height:90px;align-items:center;}
/* Trophy shelf items */
.trophy{font-size:34px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4));}
/* Shop overlay */
#shopPanel{position:absolute;inset:0;background-color:#0b051f;background-image:linear-gradient(rgba(11,5,31,.66),rgba(11,5,31,.80)),url("art/bg-base.jpeg");background-size:cover;background-position:center;z-index:20;display:none;flex-direction:column;
  align-items:center;justify-content:flex-start;gap:14px;padding:24px 18px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
#shopPanel.on{display:flex;}
#shopGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;width:min(680px,94vw);}
.shopitem{background:rgba(21,15,46,.7);border:3px solid #3a2d72;border-radius:16px;padding:12px 8px;
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;}
.shopitem .ic{font-size:42px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4));}
.shopitem .nm{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:14px;color:var(--txt);}
.shopitem .buy{font-family:'Bangers',cursive;font-size:17px;letter-spacing:.04em;padding:6px 14px;border-radius:12px;
  border:3px solid var(--ink);background:linear-gradient(180deg,#ffd75e,#f0a82b);color:var(--ink);cursor:pointer;}
.shopitem .buy.cant{opacity:.45;}
.shopitem.owned{border-color:#3ec97e;}
.shopitem .owned-tag{font-family:'Bangers',cursive;color:#9fe870;font-size:16px;}
.mcloudA{animation:mdrift 90s linear infinite;}
.mcloudB{animation:mdrift 140s linear infinite;}
@keyframes mdrift{from{transform:translateX(0)}to{transform:translateX(-180px)}}
/* ============================================================
   CHROME POLISH — depth · gloss · glow · glass, to match the painted art.
   Additive layer (M3 target, so filters/blur used freely). Static depth only,
   so it doesn't fight prefers-reduced-motion.
   ============================================================ */

/* cinematic vignette over the painted scene (sits on the art, behind content) */
#bgLayer.on{box-shadow:inset 0 0 150px 36px rgba(6,3,18,.5), inset 0 -120px 130px rgba(6,3,18,.55);}

/* characters & art "sit" in the scene: soft grounding shadow (+ faint hero glow) */
#titleHero,#baseHero,#restHero,#winHero,
.boss,#bossArt,#forgeBoss,#fortVexSprite,.playercard .pchero,.allypop{
  filter:drop-shadow(0 16px 16px rgba(0,0,0,.5));}
/* art inside the see-through panel casts its own shadow → pops in 3D */
.panelart svg{filter:drop-shadow(0 12px 12px rgba(0,0,0,.55));}
#titleHero,#baseHero{filter:drop-shadow(0 16px 16px rgba(0,0,0,.5)) drop-shadow(0 0 30px rgba(120,180,255,.32));}

/* premium buttons: glossy top sheen + outer glow + crisp press */
.btn{position:relative;overflow:hidden;border-width:6px;
  box-shadow:0 7px 0 #9c6a12, 0 9px 12px rgba(0,0,0,.4);}
.btn::after{content:"";position:absolute;left:0;right:0;top:0;height:48%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0));
  border-radius:22px 22px 50% 50%/24px 24px 36% 36%;}
.btn.blue{box-shadow:0 7px 0 #143a85, 0 9px 12px rgba(0,0,0,.4);}
.btn.ghost{overflow:visible;background:rgba(16,10,38,.42);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 6px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.14);}
.btn.ghost::after{display:none;}

/* glass HUD chips + round buttons */
.chip,.roundbtn{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:rgba(16,10,38,.5);
  box-shadow:0 4px 14px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.14);}

/* faint film grain so buttons/panels read as painterly, not flat plastic */
.btn::before,.bubble::before,.panelart::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:150px 150px;opacity:.08;mix-blend-mode:overlay;}

/* answer tiles & word tiles: glossy top highlight + stronger lift off the art */
.tile{box-shadow:0 8px 0 #143a85, 0 10px 18px rgba(0,0,0,.42);}
.tile::before{content:"";position:absolute;left:0;right:0;top:0;height:46%;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0));}
.tile.rletter{box-shadow:0 6px 0 #9c6a12, 0 8px 14px rgba(0,0,0,.4);}
.tile.win{box-shadow:0 8px 0 #137044, 0 0 28px rgba(60,230,160,.65);}
.slot,.magtile,.wordslot{box-shadow:0 6px 14px rgba(0,0,0,.32);}
.slot.filled,.wordslot.filled,.magtile.longv{box-shadow:0 0 22px rgba(60,230,160,.5), 0 6px 12px rgba(0,0,0,.3);}

/* title: keep the bold stroked gold, add a warm glow */
.title-logo{filter:drop-shadow(0 3px 0 rgba(0,0,0,.45)) drop-shadow(0 0 18px rgba(255,200,80,.55));}

/* loose text labels stay legible over busy painted scenes */
.baselbl{color:#cfc4ff;text-shadow:0 2px 6px rgba(0,0,0,.65);}
.sub,.gearbadge,.starsrow,.dailylabel{text-shadow:0 2px 7px rgba(0,0,0,.6);}

/* menu/panel cards: frosted glass so the Grown-Up Corner & Shop look designed */
.pcard,.shopitem,.gemshelf,.audrow,.playercard,.shopitem,.tabbtn{
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);}
.pcard{background:rgba(28,20,58,.5);box-shadow:0 6px 16px rgba(0,0,0,.35);}
.shopitem{background:rgba(20,12,44,.5);box-shadow:0 6px 16px rgba(0,0,0,.35);}
.gemshelf{background:rgba(16,10,38,.45);}
.playercard{box-shadow:0 10px 24px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12);}
.echip{box-shadow:0 4px 0 rgba(0,0,0,.4), 0 6px 12px rgba(0,0,0,.3);}
.gearbadge{box-shadow:0 0 18px rgba(255,206,58,.35), 0 6px 14px rgba(0,0,0,.4);}

@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important;}}