/* ============================================================
   Legend of the Rainbow Dragon — STYLES
   Storybook arcade. Fits the viewport (no page scroll).
   iPad + iPhone + desktop. Cool stuff everywhere.
   ============================================================ */
:root{
  --bg:#0f0a1e; --bg2:#1a1038; --card:#241749; --card2:#2e1d5c;
  --border:rgba(199,125,255,.28); --border2:rgba(199,125,255,.5);
  --pink:#ff6eb4; --yellow:#ffe14d; --green:#5dffb0; --blue:#5bc8ff;
  --purple:#c77dff; --orange:#ff9a3c; --red:#ff5d7e;
  --text:#f4ecff; --muted:rgba(244,236,255,.55);
  --term:#0a0618; --term-border:#3d2a6a;
  --shake:8px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
html,body{height:100%;height:100dvh;overflow:hidden}
body{
  background:radial-gradient(120% 100% at 50% 0%, var(--bg2), var(--bg) 70%);
  color:var(--text);
  font-family:'Nunito',sans-serif;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  touch-action:manipulation;
}

/* ---- Stage: the scalable game frame ---- */
#stage{
  position:relative;
  width:100%;height:100%;
  max-width:720px;max-height:980px;
  display:flex;flex-direction:column;
  background:radial-gradient(140% 90% at 50% -10%, #2a1a55, #120b26 65%);
  overflow:hidden;
  transform:translateX(var(--sx,0));
}
@media(min-width:600px){
  #stage{border-radius:26px;border:2px solid var(--border);box-shadow:0 24px 80px rgba(0,0,0,.55);max-height:94dvh}
  body{padding:12px}
}

/* layers above everything */
#fx-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}
#float-layer{position:absolute;inset:0;pointer-events:none;z-index:62;overflow:hidden}
#flash-layer{position:absolute;inset:0;pointer-events:none;z-index:58;opacity:0}

@keyframes screenShake{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(calc(var(--shake) * -1),2px)}
  40%{transform:translate(var(--shake),-2px)}
  60%{transform:translate(calc(var(--shake) * -0.6),1px)}
  80%{transform:translate(calc(var(--shake) * 0.4),-1px)}
}
@keyframes flashFade{0%{opacity:.65}100%{opacity:0}}

/* ============================================================
   TOP STATUS BAR — compact, glanceable
   ============================================================ */
.topbar{
  flex:0 0 auto;display:flex;align-items:center;gap:6px;
  padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top));
  /* AFTER the shorthand, not before it — the `padding:8px 10px` above resets all four sides, so
     a padding-right declared earlier in the same rule silently did nothing. 80px keeps the
     top-right corner clear for the shared ⛶. */
  padding-right:80px;
  background:linear-gradient(180deg,rgba(46,29,92,.95),rgba(36,23,73,.85));
  border-bottom:2px solid var(--border);
  position:relative;z-index:20;
}
.chip{
  display:flex;align-items:center;gap:5px;flex:1;
  background:rgba(10,6,24,.5);border:1.5px solid var(--border);
  border-radius:14px;padding:5px 8px;min-width:0;
}
.chip .ico{font-size:18px;line-height:1;flex:0 0 auto}
.chip .col{display:flex;flex-direction:column;min-width:0;line-height:1.05}
.chip .val{font-family:'Fredoka One',cursive;font-size:15px;color:var(--yellow);white-space:nowrap}
.chip .lbl{font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.chip.hp .val{color:var(--green)} .chip.turns .val{color:var(--blue)} .chip.charm .val{color:var(--pink)}
.hpbar{height:5px;background:rgba(255,255,255,.12);border-radius:99px;overflow:hidden;margin-top:2px;width:100%}
.hpbar>i{display:block;height:100%;background:linear-gradient(90deg,var(--green),#aaffd6);border-radius:99px;transition:width .35s ease}
.lvring{position:relative;width:30px;height:30px;flex:0 0 auto}
.lvring .num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Fredoka One',cursive;font-size:13px;color:var(--yellow)}

.iconbtn{
  flex:0 0 auto;width:44px;height:44px;border-radius:12px;border:1.5px solid var(--border); /* 44 = iPad touch floor, was 38 */
  background:rgba(10,6,24,.5);font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--text);
}
.iconbtn:active{transform:scale(.92)}

/* ============================================================
   SCREENS
   ============================================================ */
#screens{flex:1 1 0;min-height:0;position:relative}
.screen{position:absolute;inset:0;display:none;flex-direction:column;min-height:0;padding:10px;gap:9px}
.screen.active{display:flex;z-index:2}
.screen.active>*{animation:screenIn .3s ease}
@keyframes screenIn{from{transform:translateY(10px)}to{transform:translateY(0)}}

.scr-title{font-family:'Fredoka One',cursive;font-size:1.25rem;text-align:center;color:var(--purple);flex:0 0 auto;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.scr-sub{text-align:center;font-size:12px;color:var(--muted);margin-top:-4px;flex:0 0 auto}

/* ---- buttons ---- */
.btn{
  font-family:'Fredoka One',cursive;font-size:16px;border:none;border-radius:16px;
  padding:14px 16px;min-height:50px;cursor:pointer;color:#fff;
  background:var(--card2);box-shadow:0 5px 0 rgba(0,0,0,.32);
  transition:transform .08s ease,box-shadow .08s ease;position:relative;
}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(0,0,0,.32)}
.btn:disabled{opacity:.45;pointer-events:none;filter:grayscale(.4)}
.btn.primary{background:linear-gradient(160deg,#ffe14d,#ffb300);color:#3a1a00;box-shadow:0 5px 0 #b07a00}
.btn.green{background:linear-gradient(160deg,#5dffb0,#1fbf7a);color:#053a22;box-shadow:0 5px 0 #0c7a4a}
.btn.pink{background:linear-gradient(160deg,#ff8ec8,#ff4f9e);box-shadow:0 5px 0 #c01f6a}
.btn.blue{background:linear-gradient(160deg,#7ad7ff,#2f9fe0);box-shadow:0 5px 0 #1565a0}
.btn.purple{background:linear-gradient(160deg,#d6a0ff,#9b5ce0);box-shadow:0 5px 0 #6a2fb0}
.btn.ghost{background:rgba(255,255,255,.07);box-shadow:0 4px 0 rgba(0,0,0,.3);color:var(--text);font-size:14px}
.btn.sm{font-size:13px;min-height:42px;padding:9px 12px;border-radius:13px}

/* ============================================================
   HUB — Rainbow Town
   ============================================================ */
#screen-hub{gap:8px}
.hub-head{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:8px}
.hub-hero{font-size:30px;animation:bob 2.4s ease-in-out infinite}
.hub-name{font-family:'Fredoka One',cursive;font-size:1.3rem;color:var(--text)}
.hub-name .crown{color:var(--yellow)}
.tip-bubble{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;
  background:rgba(91,200,255,.12);border:1.5px dashed rgba(91,200,255,.45);
  border-radius:14px;padding:8px 12px;font-size:13px;line-height:1.3;color:var(--blue);font-weight:800;
  min-height:42px;
}
.tip-bubble .tdrag{font-size:20px;flex:0 0 auto;animation:wiggle 2s ease-in-out infinite}

.dragon-banner{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:12px 14px;border-radius:18px;color:#fff;
  background:linear-gradient(110deg,#ff6eb4,#ffe14d,#5dffb0,#5bc8ff,#c77dff);
  background-size:300% 100%;animation:rainbowSlide 6s linear infinite;
  box-shadow:0 6px 0 rgba(0,0,0,.3),0 0 28px rgba(255,110,180,.4);
  border:2px solid #fff;
}
.dragon-banner:active{transform:translateY(3px)}
.dragon-banner .dbe{font-size:34px;animation:bob 1.6s ease-in-out infinite}
.dragon-banner .dbt{font-family:'Fredoka One',cursive;font-size:1.05rem;text-shadow:0 2px 3px rgba(0,0,0,.4)}
.dragon-banner .dbs{font-size:11px;opacity:.95}

.town-grid{flex:1 1 0;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:9px;align-content:stretch}
.place{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:none;border-radius:18px;cursor:pointer;color:#fff;position:relative;overflow:hidden;
  box-shadow:0 5px 0 rgba(0,0,0,.3);transition:transform .1s ease,box-shadow .1s ease;
  padding:6px;min-height:0;
}
.place:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(0,0,0,.3)}
.place .pe{font-size:clamp(26px,7vw,40px);line-height:1;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.place .pl{font-family:'Fredoka One',cursive;font-size:clamp(12px,3.4vw,15px);text-shadow:0 1px 2px rgba(0,0,0,.4)}
.place .ps{font-size:9px;opacity:.85;font-weight:800}
.place.recommend{animation:placePulse 1.4s ease-in-out infinite}
.place.recommend::after{content:'👉';position:absolute;top:5px;right:7px;font-size:15px;animation:wiggle 1s ease-in-out infinite}
.place.locked{filter:grayscale(.7) brightness(.7);cursor:default}
.place .lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(8,5,18,.45);font-size:11px;gap:2px}
.place.adventure{background:linear-gradient(160deg,#2fa85a,#16502c)}
.place.shop{background:linear-gradient(160deg,#ff9a3c,#c25a10)}
.place.snack{background:linear-gradient(160deg,#ff7ec0,#c2256e)}
.place.music{background:linear-gradient(160deg,#6fc8ff,#2570c0)}
.place.inn{background:linear-gradient(160deg,#b48cff,#6a36c0)}
.place.healer{background:linear-gradient(160deg,#5dffb0,#1f9f68)}
.place.mail{background:linear-gradient(160deg,#ffd24d,#c79410)}
.place.hero{background:linear-gradient(160deg,#a0b4ff,#5060c0)}
.pe.bobble{animation:bob 2.8s ease-in-out infinite}
.town-grid .place:nth-child(1) .pe.bobble{animation-delay:0s}
.town-grid .place:nth-child(2) .pe.bobble{animation-delay:.5s}
.town-grid .place:nth-child(3) .pe.bobble{animation-delay:1.1s}
.town-grid .place:nth-child(4) .pe.bobble{animation-delay:.3s}
.town-grid .place:nth-child(5) .pe.bobble{animation-delay:.9s}
.town-grid .place:nth-child(6) .pe.bobble{animation-delay:1.4s}
.town-grid .place:nth-child(7) .pe.bobble{animation-delay:.2s}
.town-grid .place:nth-child(8) .pe.bobble{animation-delay:.7s}

.hub-foot{flex:0 0 auto;display:flex;gap:8px}
.hub-foot .btn{flex:1}

/* daily challenge mini ribbon */
.chal-ribbon{flex:0 0 auto;display:flex;align-items:center;gap:8px;background:rgba(199,125,255,.12);border:1.5px solid var(--border);border-radius:12px;padding:6px 10px;font-size:11px}
.chal-ribbon .ct{flex:1;color:var(--text)}
.chal-ribbon b{color:var(--green)}
/* 44px floor: the claim button was 30x24, the smallest tappable thing in the game and the only
   way to take the daily reward. */
.chal-ribbon .cclaim{font-family:'Fredoka One',cursive;font-size:11px;padding:5px 10px;border-radius:10px;border:none;background:var(--green);color:#053a22;cursor:pointer;min-width:44px;min-height:44px}
.chal-ribbon .cclaim:disabled{opacity:.5;background:rgba(255,255,255,.12);color:var(--muted)}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes wiggle{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes placePulse{0%,100%{box-shadow:0 5px 0 rgba(0,0,0,.3),0 0 0 rgba(255,225,77,0)}50%{box-shadow:0 5px 0 rgba(0,0,0,.3),0 0 22px rgba(255,225,77,.7)}}
@keyframes rainbowSlide{0%{background-position:0% 0}100%{background-position:300% 0}}
@keyframes popIn{0%{transform:scale(0) rotate(-12deg);opacity:0}70%{transform:scale(1.15) rotate(4deg)}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes floatUp{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}20%{transform:translate(-50%,-90%) scale(1.2);opacity:1}100%{transform:translate(-50%,-220%) scale(1);opacity:0}}
@keyframes idleFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}
@keyframes hurt{0%,100%{transform:translateX(0)}25%{transform:translateX(-14px) rotate(-6deg)}75%{transform:translateX(14px) rotate(6deg)}}
@keyframes lunge{0%{transform:translateX(0)}40%{transform:translateX(40px) scale(1.1)}100%{transform:translateX(0)}}

.float-num{
  position:absolute;transform:translate(-50%,-50%);
  font-family:'Fredoka One',cursive;font-size:26px;color:var(--yellow);
  text-shadow:0 2px 6px rgba(0,0,0,.7),0 0 2px #000;
  animation:floatUp 1.05s ease-out forwards;white-space:nowrap;
}
.float-num.dmg{color:#fff}
.float-num.super{color:var(--yellow);font-size:34px}
.float-num.heal{color:var(--green)}
.float-num.gold{color:var(--yellow)}
.float-num.bad{color:var(--red)}
.float-num.xp{color:var(--blue);font-size:20px}

/* ============================================================
   COMBAT — Sparkle Battle
   ============================================================ */
#screen-combat{padding:0;gap:0}
.battle{flex:1 1 0;min-height:0;display:flex;flex-direction:column;position:relative;overflow:hidden}
.battle-sky{position:absolute;inset:0;z-index:0;transition:background .5s ease}
.battle-decor{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.battle-decor span{position:absolute;font-size:26px;opacity:.5;animation:idleFloat 5s ease-in-out infinite}
.battle-top{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:8px 12px;padding-top:max(8px,env(safe-area-inset-top));position:relative;z-index:5}
.biome-name{font-family:'Fredoka One',cursive;font-size:13px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);background:rgba(0,0,0,.25);padding:4px 10px;border-radius:99px}
.flee-btn{font-family:'Fredoka One',cursive;font-size:12px;padding:6px 12px;border-radius:99px;border:1.5px solid rgba(255,255,255,.5);background:rgba(0,0,0,.25);color:#fff;cursor:pointer}

.mon-stage{flex:1 1 0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;position:relative;z-index:5;padding:6px}
.mon-emoji{font-size:clamp(64px,20vw,120px);line-height:1;filter:drop-shadow(0 8px 10px rgba(0,0,0,.45));animation:idleFloat 3.2s ease-in-out infinite}
.mon-emoji.star{filter:drop-shadow(0 0 18px var(--yellow)) drop-shadow(0 8px 10px rgba(0,0,0,.45))}
.mon-emoji.hurt{animation:hurt .4s ease}
.mon-name{font-family:'Fredoka One',cursive;font-size:1.1rem;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.6)}
.mon-name .startag{display:inline-block;font-size:10px;background:var(--yellow);color:#3a1a00;padding:2px 8px;border-radius:99px;margin-left:6px;vertical-align:middle}
.mon-hpbar{width:min(80%,300px);height:16px;background:rgba(0,0,0,.4);border-radius:99px;overflow:hidden;border:2px solid rgba(255,255,255,.4)}
.mon-hpbar>i{display:block;height:100%;background:linear-gradient(90deg,#ff5d7e,#ff9a3c);border-radius:99px;transition:width .4s cubic-bezier(.3,1.4,.5,1)}
.mon-hptext{font-size:12px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7)}

.hero-corner{position:absolute;left:10px;bottom:8px;z-index:6;display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.3);border-radius:14px;padding:5px 9px}
.hero-corner .ha{font-size:26px;animation:bob 2.4s ease-in-out infinite}
.hero-corner .hh{display:flex;flex-direction:column;line-height:1.1}
.hero-corner .hh .hn{font-size:11px;color:#fff}
.hero-corner .hh .hpmini{display:flex;gap:1px;font-size:11px}

/* power meter */
.combat-controls{flex:0 0 auto;padding:10px 12px;padding-bottom:max(12px,env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(18,11,38,.2),rgba(18,11,38,.95));position:relative;z-index:5;display:flex;flex-direction:column;gap:9px}
.meter-wrap{position:relative;height:34px;border-radius:99px;background:rgba(10,6,24,.7);border:2px solid var(--border);overflow:hidden}
.meter-zone{position:absolute;top:0;bottom:0;background:linear-gradient(90deg,rgba(93,255,176,.35),rgba(93,255,176,.6),rgba(93,255,176,.35));border-left:2px solid var(--green);border-right:2px solid var(--green)}
.meter-zone.core{background:linear-gradient(90deg,rgba(255,225,77,.5),rgba(255,225,77,.9),rgba(255,225,77,.5));border-color:var(--yellow)}
.meter-needle{position:absolute;top:-3px;bottom:-3px;width:6px;background:#fff;border-radius:99px;box-shadow:0 0 10px #fff,0 0 4px #fff;transform:translateX(-50%)}
.meter-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Fredoka One',cursive;font-size:12px;color:#fff;text-shadow:0 1px 3px #000;pointer-events:none}
.strike-btn{font-family:'Fredoka One',cursive;font-size:22px;padding:16px;border-radius:18px;border:none;cursor:pointer;color:#3a1a00;background:linear-gradient(160deg,#ffe14d,#ffae00);box-shadow:0 6px 0 #b07a00;letter-spacing:.03em;position:relative;overflow:hidden;animation:strikePulse 1.2s ease-in-out infinite}
.strike-btn::after{content:'';position:absolute;top:0;left:-60%;width:38%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-20deg);animation:shine 2.4s linear infinite;pointer-events:none}
.strike-btn:active{animation:none;transform:translateY(5px) scale(.97);box-shadow:0 1px 0 #b07a00}
.strike-btn.hot{background:linear-gradient(160deg,#aaffd0,#34d98a);color:#053a22;box-shadow:0 6px 0 #0c7a4a,0 0 26px rgba(93,255,176,.8);animation:strikeHot .25s ease-in-out infinite}
.strike-btn.super{background:linear-gradient(160deg,#fff3a0,#ffd000);color:#5a3000;box-shadow:0 6px 0 #b07a00,0 0 36px rgba(255,225,77,.95);animation:strikeSuper .18s ease-in-out infinite}
.strike-btn .nowtag{display:none}
.strike-btn.hot .nowtag,.strike-btn.super .nowtag{display:inline}
.strike-btn.hot .deftag,.strike-btn.super .deftag{display:none}
.strike-btn:disabled{animation:none;opacity:.6;filter:grayscale(.3)}
@keyframes strikePulse{0%,100%{transform:scale(1);box-shadow:0 6px 0 #b07a00,0 0 0 rgba(255,225,77,0)}50%{transform:scale(1.025);box-shadow:0 6px 0 #b07a00,0 0 22px rgba(255,225,77,.55)}}
@keyframes strikeHot{0%,100%{transform:scale(1.02)}50%{transform:scale(1.06)}}
@keyframes strikeSuper{0%,100%{transform:scale(1.05) rotate(-1deg)}50%{transform:scale(1.1) rotate(1deg)}}
@keyframes shine{0%{left:-60%}55%,100%{left:150%}}

.combat-result{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;padding:10px 12px;padding-bottom:max(12px,env(safe-area-inset-bottom));position:relative;z-index:7}
.result-card{background:rgba(10,6,24,.7);border:2px solid var(--border2);border-radius:16px;padding:12px;text-align:center;animation:popIn .4s ease}
.result-card .rt{font-family:'Fredoka One',cursive;font-size:1.1rem;color:var(--yellow)}
.result-card .rr{font-size:13px;color:var(--text);margin-top:4px;line-height:1.4}

/* mini combat log line (1 line, ticker) */
.combat-say{position:absolute;left:50%;top:14%;transform:translateX(-50%);z-index:6;font-family:'Fredoka One',cursive;font-size:14px;color:#fff;background:rgba(0,0,0,.35);padding:6px 14px;border-radius:99px;text-shadow:0 1px 2px #000;max-width:90%;text-align:center;opacity:0;transition:opacity .2s}
.combat-say.show{opacity:1}

/* ============================================================
   SHEET SCREENS (shop, snack, stats, mail) — scroll inside only
   ============================================================ */
.sheet{flex:1 1 0;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:8px;padding-right:2px}
.sheet::-webkit-scrollbar{width:6px}.sheet::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}

.gear-card{display:flex;align-items:center;gap:10px;background:var(--card);border:2px solid var(--border);border-radius:16px;padding:10px}
.gear-card.owned{border-color:var(--green);background:rgba(93,255,176,.08)}
.gear-card .ge{font-size:30px;flex:0 0 auto}
.gear-card .gi{flex:1;min-width:0}
.gear-card .gn{font-family:'Fredoka One',cursive;font-size:15px}
.gear-card .gm{font-size:11px;color:var(--muted)}
.gear-card .gact{flex:0 0 auto}
.tagok{color:var(--green);font-family:'Fredoka One',cursive;font-size:13px}

.big-emoji-card{flex:0 0 auto;text-align:center;background:var(--card);border:2px solid var(--border);border-radius:20px;padding:16px}
.big-emoji-card .bce{font-size:60px;line-height:1;animation:bob 2.6s ease-in-out infinite}
.big-emoji-card .bct{font-family:'Fredoka One',cursive;font-size:1.2rem;color:var(--yellow);margin-top:6px}
.big-emoji-card .bcx{font-size:14px;color:var(--text);margin-top:6px;line-height:1.45}

.opt-list{display:flex;flex-direction:column;gap:8px}

.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.stat-cell{background:var(--card);border:1.5px solid var(--border);border-radius:13px;padding:9px 11px;display:flex;flex-direction:column;gap:1px}
.stat-cell .sk{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.stat-cell .sv{font-family:'Fredoka One',cursive;font-size:16px;color:var(--yellow)}
.ach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.ach{background:var(--card);border:2px solid var(--border);border-radius:14px;padding:8px 4px;text-align:center;opacity:.4;transition:.2s}
.ach.on{opacity:1;border-color:var(--green);box-shadow:0 0 14px rgba(93,255,176,.25)}
.ach .ae{font-size:24px}
.ach .an{font-size:9px;margin-top:3px;line-height:1.15;color:var(--text)}

.mail-card{background:var(--card);border:1.5px solid var(--border);border-radius:14px;padding:11px 13px;text-align:left}
.mail-card .mf{font-family:'Fredoka One',cursive;font-size:12px;color:var(--purple);margin-bottom:4px}
.mail-card .mt{font-size:13px;line-height:1.45;color:var(--text);font-weight:700}
.mail-card.dad{border-color:var(--pink);background:rgba(255,110,180,.08)}

/* ============================================================
   OVERLAYS
   ============================================================ */
.ov{position:absolute;inset:0;z-index:80;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;background:rgba(12,8,26,.94);backdrop-filter:blur(3px)}
.ov.hidden{display:none}
.ov-emoji{font-size:64px;animation:bob 2s ease-in-out infinite}
.ov-title{font-family:'Fredoka One',cursive;font-size:clamp(26px,8vw,42px);line-height:1.08;background:linear-gradient(120deg,var(--pink),var(--yellow),var(--green),var(--blue),var(--purple));background-size:200%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:rainbowSlide 5s linear infinite}
.ov-sub{font-size:13px;color:var(--muted);line-height:1.5;max-width:320px}
.ov-nick{font-family:'Fredoka One',cursive;font-size:1.05rem;color:var(--yellow)}
.ov .btn{width:100%;max-width:300px}
.title-dragon{font-size:90px;animation:idleFloat 3.5s ease-in-out infinite;filter:drop-shadow(0 0 24px rgba(255,110,180,.5))}

.avatar-grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:320px}
.av{font-size:32px;width:60px;height:60px;border-radius:16px;border:3px solid transparent;background:var(--card);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.12s}
.av.sel{border-color:var(--yellow);box-shadow:0 0 16px rgba(255,225,77,.5);transform:scale(1.08)}
.name-in{font-family:'Fredoka One',cursive;font-size:18px;padding:13px 18px;border-radius:14px;border:2px solid var(--border);background:var(--card);color:var(--text);width:100%;max-width:280px;text-align:center}
.name-in:focus{outline:none;border-color:var(--purple)}

.lvup-stats{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.lvup-stats .ls{background:rgba(93,255,176,.12);border:1.5px solid var(--green);border-radius:12px;padding:8px 12px;font-family:'Fredoka One',cursive;font-size:14px;color:var(--green);animation:popIn .4s ease backwards}

.toast{position:absolute;top:64px;left:50%;transform:translateX(-50%);z-index:90;background:var(--card2);border:2px solid var(--yellow);border-radius:16px;padding:10px 16px;font-family:'Fredoka One',cursive;font-size:14px;color:var(--yellow);max-width:90%;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.4);animation:popIn .4s ease;display:flex;align-items:center;gap:8px}
.toast.hidden{display:none}

/* small screens */
@media(max-height:680px){
  .place .pe{font-size:clamp(22px,6vw,34px)}
  .hub-hero{font-size:26px}.hub-name{font-size:1.1rem}
  .tip-bubble{min-height:36px;padding:6px 10px;font-size:12px}
  .btn{min-height:46px;font-size:15px}
}
@media(min-width:600px){
  .scr-title{font-size:1.5rem}
  .place .pe{font-size:46px}.place .pl{font-size:16px}
  .ach-grid{grid-template-columns:repeat(3,1fr)}
  .mon-emoji{font-size:130px}
}