*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#2b1a5a;overflow:hidden}
body{font-family:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Nunito","Trebuchet MS",system-ui,sans-serif;color:#2a1f4a;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
#app{position:fixed;inset:0;display:flex;flex-direction:column;background:linear-gradient(#7fd3ff,#c8f0ff 55%,#a6e88a);}
#bar{display:flex;align-items:center;gap:8px;padding:calc(8px + env(safe-area-inset-top)) 10px 8px;background:rgba(255,255,255,.55);backdrop-filter:blur(6px);flex-wrap:nowrap}
#bar .pill{background:#fff;border-radius:999px;padding:6px 12px;font-size:18px;box-shadow:0 2px 0 rgba(0,0,0,.12);white-space:nowrap}
#bar .pill b{font-size:19px}
#bar #muteBtn{margin-left:auto}
body.running #bar{display:none}
button{font:inherit;cursor:pointer;border:0}
.icon{width:46px;height:46px;border-radius:14px;background:#fff;font-size:24px;box-shadow:0 3px 0 rgba(0,0,0,.15);flex:none}
.screen{display:none;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 14px calc(24px + env(safe-area-inset-bottom));text-align:center}
.screen.active{display:block}
#run.screen{padding:0;position:relative;overflow:hidden}
#run.active{display:block}
h1,h2,h3{margin:.3em 0}
h2{font-size:28px}
.gameTitle{font-size:clamp(44px,12vw,80px);color:#fff;letter-spacing:1px;
  text-shadow:0 4px 0 #6a4cff,0 8px 0 #3a2a8a,0 10px 18px rgba(0,0,0,.25);margin-top:10px}
.tagline{font-size:20px;margin:6px 0 0;font-weight:700;color:#3a2a8a}
.hero{width:260px;height:200px;max-width:80vw}
.buddyName{font-weight:800;font-size:20px;margin:0 0 6px;color:#3a2a8a}
.menu{display:flex;flex-direction:column;gap:14px;align-items:center;margin:8px 0}
.big{display:block;width:min(360px,90%);margin:10px auto;padding:16px 18px;font-size:24px;font-weight:800;border-radius:20px;color:#fff;
  background:#3d8bff;box-shadow:0 6px 0 rgba(0,0,0,.25);transition:transform .08s}
.big:active,.icon:active,.btn:active{transform:translateY(3px)}
.menu .big{margin:0}
.big.go{background:linear-gradient(#5be05b,#2fb52f)}
.big.purple{background:linear-gradient(#a96bff,#7a3dff)}
.big.pink{background:linear-gradient(#ff7ab8,#ff3d8b)}
.big.orange{background:linear-gradient(#ffb547,#ff8a00)}
.big.gray{background:#9a9ab5}
.big:disabled{opacity:.45}
.link{background:none;color:#3a2a8a;text-decoration:underline;font-size:16px;margin-top:16px;padding:10px}
.card{background:#fff;border-radius:24px;padding:16px;box-shadow:0 6px 0 rgba(0,0,0,.12);margin:12px auto;max-width:520px}
.center{text-align:center}
.btn{padding:10px 14px;border-radius:14px;font-weight:800;font-size:17px;background:#3d8bff;color:#fff;box-shadow:0 4px 0 rgba(0,0,0,.2)}
.btn.green{background:#2fb52f}.btn.pink{background:#ff3d8b}.btn.gray{background:#9a9ab5}.btn.gold{background:#e6a100}.btn.purple{background:#7a3dff}
.btn:disabled{opacity:.45}
/* map */
#levels{display:flex;flex-direction:column;gap:14px;max-width:520px;margin:0 auto}
.level{display:flex;align-items:center;gap:14px;text-align:left;padding:14px;border-radius:22px;background:#fff;box-shadow:0 6px 0 rgba(0,0,0,.15);color:#2a1f4a;width:100%}
.level .lvE{font-size:44px;width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;flex:none}
.level .lvT{flex:1}
.level .lvT b{font-size:21px;display:block}
.level .lvT span{font-size:15px;opacity:.85}
.level .stars{font-size:24px;letter-spacing:2px;white-space:nowrap}
.level.locked{filter:grayscale(1);opacity:.6}
.tierGuide{font-size:16px;line-height:1.6}
.tierGuide .t{font-weight:800}
/* run */
#game{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#hud{position:absolute;left:0;right:0;top:0;padding:calc(8px + env(safe-area-inset-top)) 10px 0;pointer-events:none;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.45)}
.hudRow{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:800;font-size:22px}
.hudRow.small{font-size:17px;justify-content:flex-start;gap:14px;margin-top:4px;flex-wrap:wrap}
.hudRow .dist{font-size:30px}
#pauseBtn{pointer-events:auto;text-shadow:none}
.goalChip{background:rgba(0,0,0,.3);padding:3px 10px;border-radius:999px}
.goalChip.done{background:#2fb52f}
.tierbar{position:relative;height:22px;margin-top:8px;background:rgba(0,0,0,.3);border-radius:999px;overflow:hidden;max-width:520px}
#hTierFill{position:absolute;left:0;top:0;bottom:0;width:0;background:#5cb85c;border-radius:999px}
#hTierText{position:relative;font-size:14px;line-height:22px;font-weight:800;padding-left:10px}
#banner{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none;background:#fff;color:#3a2a8a;
  padding:12px 20px;border-radius:20px;font-size:22px;font-weight:900;text-align:center;box-shadow:0 6px 0 rgba(0,0,0,.2);transition:all .25s;width:max-content;max-width:90%}
#banner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(30,15,70,.55);padding:16px;z-index:5;overflow-y:auto}
.overlay.show{display:flex}
#modal{position:fixed;z-index:20}
.overlay .card{width:min(440px,100%)}
.lvEmoji{font-size:60px}
.goalLine{font-size:21px}
.tip{color:#7a3dff;font-weight:700}
/* result */
.stats{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;font-size:20px;font-weight:800}
.stats span{background:#f1edff;border-radius:14px;padding:8px 12px}
.bigStars{font-size:42px;letter-spacing:4px}
.reveal{position:relative}
.tierBadge{display:inline-block;color:#fff;font-weight:900;padding:6px 16px;border-radius:999px;font-size:20px;box-shadow:0 3px 0 rgba(0,0,0,.2)}
.eggShake{font-size:90px;display:inline-block;animation:shake .9s ease-in-out}
@keyframes shake{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(14deg)}60%{transform:rotate(-10deg)}80%{transform:rotate(10deg)}}
.pop{animation:pop .5s ease-out}
@keyframes pop{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.glow-1{box-shadow:0 0 0 4px #3d8bff,0 6px 0 rgba(0,0,0,.12)}
.glow-2{box-shadow:0 0 0 4px #a64dff,0 0 24px #a64dff}
.glow-3{box-shadow:0 0 0 5px #ffb300,0 0 30px #ffd23f}
input#mInput,.nameInput{font:inherit;font-size:26px;font-weight:800;text-align:center;width:100%;padding:12px;border-radius:16px;border:3px solid #a96bff;margin:8px 0;-webkit-user-select:text;user-select:text}
.ideas{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:6px 0}
.ideas button{background:#f1edff;color:#3a2a8a;border-radius:999px;padding:8px 14px;font-size:17px;font-weight:800}
/* lair + shop */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;max-width:820px;margin:0 auto}
.dcard,.pcard{background:#fff;border-radius:20px;padding:10px;box-shadow:0 5px 0 rgba(0,0,0,.12);display:flex;flex-direction:column;align-items:center;gap:4px}
.dcard canvas{width:140px;height:105px}
.dcard .nm{font-size:19px;font-weight:900}
.dcard .meta{font-size:14px;opacity:.85}
.dcard .row,.pcard .row{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.dcard .btn,.pcard .btn{font-size:15px;padding:8px 10px}
.dcard.buddy,.pcard.buddy{outline:4px solid #2fb52f}
.pcard .pe{font-size:56px;line-height:1.1}
.pcard .nm{font-size:19px;font-weight:900}
.nest{max-width:520px}
.meter{height:24px;background:#f1edff;border-radius:999px;overflow:hidden;margin:8px 0}
.meter div{height:100%;background:linear-gradient(90deg,#ffd27a,#ffb300);border-radius:999px}
.nestEggs{font-size:30px;font-weight:900}
.muted{opacity:.75;font-size:15px}
#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(120px);background:#3a2a8a;color:#fff;font-weight:800;
  padding:12px 20px;border-radius:18px;font-size:18px;transition:transform .25s;z-index:30;max-width:90%;text-align:center}
#toast.show{transform:translateX(-50%) translateY(0)}
@media (min-width:700px){.screen{padding-top:24px}}