@font-face{font-family:Unbounded;font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/unbounded-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:Unbounded;font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/unbounded-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Unbounded;font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/unbounded-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:Unbounded;font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/unbounded-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:Unbounded;font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/unbounded-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Unbounded;font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/unbounded-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:Onest;font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/onest-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:Onest;font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/onest-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Onest;font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/onest-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:Onest;font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/onest-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:Onest;font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/onest-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Onest;font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/onest-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:Onest;font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/onest-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:Onest;font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/onest-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Onest;font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/onest-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Crystal Mine Pro: game UI. Mobile-first, one screen with no page scroll. */
:root{--bg:#120a30;--bg2:#1b1145;--card:#231758;--ink:#f3efff;--mu:#a9a2d6;--ln:rgba(255,255,255,.1);--am:#ffc94a;--ok:#4be0a0;--acc:#7a3cff;--pk:#ff4f8b;color-scheme:dark;--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:var(--bg);color:var(--ink);font:400 15px/1.4 Onest,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.ico{display:inline-block;width:1.18em;height:1.18em;vertical-align:-.22em;flex:none;filter:drop-shadow(0 1px 1px rgba(10,0,40,.35))}
.fab .fc{width:26px;height:24px}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer;touch-action:manipulation}
button:focus-visible{outline:3px solid var(--am);outline-offset:2px}
button:disabled{cursor:default}
.spr{display:block;width:100%;height:100%;background:center/contain no-repeat}
.mn1{background-image:url(assets/scene/miner_1.webp)}.mn2{background-image:url(assets/scene/miner_2.webp)}.chs{background-image:url(assets/scene/chest.webp)}
.gem-quartz{background-image:url(assets/gems/quartz.webp)}.gem-amethyst{background-image:url(assets/gems/amethyst.webp)}.gem-emerald{background-image:url(assets/gems/emerald.webp)}.gem-ruby{background-image:url(assets/gems/ruby.webp)}.gem-sun{background-image:url(assets/gems/sun.webp)}.gem-sky{background-image:url(assets/gems/sky.webp)}.gem-cosmic{background-image:url(assets/gems/cosmic.webp)}
.pt0{background-image:url(assets/pets/pet_00.webp)}.pt1{background-image:url(assets/pets/pet_01.webp)}.pt2{background-image:url(assets/pets/pet_02.webp)}.pt3{background-image:url(assets/pets/pet_03.webp)}.pt4{background-image:url(assets/pets/pet_04.webp)}.pt5{background-image:url(assets/pets/pet_05.webp)}.pt6{background-image:url(assets/pets/pet_06.webp)}.pt7{background-image:url(assets/pets/pet_07.webp)}.pt8{background-image:url(assets/pets/pet_08.webp)}.pt9{background-image:url(assets/pets/pet_09.webp)}.pt10{background-image:url(assets/pets/pet_10.webp)}.pt11{background-image:url(assets/pets/pet_11.webp)}.pt12{background-image:url(assets/pets/pet_12.webp)}.pt13{background-image:url(assets/pets/pet_13.webp)}.pt14{background-image:url(assets/pets/pet_14.webp)}.pt15{background-image:url(assets/pets/pet_15.webp)}.pt16{background-image:url(assets/pets/pet_16.webp)}.pt17{background-image:url(assets/pets/pet_17.webp)}.pt18{background-image:url(assets/pets/pet_18.webp)}.pt19{background-image:url(assets/pets/pet_19.webp)}.pt20{background-image:url(assets/pets/pet_20.webp)}

/* ---------- layout ---------- */
#app{position:fixed;inset:0;display:grid;grid-template-rows:minmax(0,1.42fr) minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);padding-bottom:var(--safe-b)}
#app.closed{grid-template-rows:minmax(0,1fr) 0 auto}
#app.closed #panel{display:none}
/* Landscape, desktop and square windows: two columns that fill the whole area */
@media(min-aspect-ratio:1/1){
 #app{grid-template-columns:minmax(0,1fr) clamp(290px,34vw,460px);grid-template-rows:minmax(0,1fr) auto}
 #stage{grid-row:1/3}#panel{grid-column:2;grid-row:1;display:flex!important}#nav{grid-column:2;grid-row:2}
 #app.closed{grid-template-rows:minmax(0,1fr) auto}
}
#stage{--g1:#5cf0ff;--g2:#7a4dff;--s1:#3a1a9a;--s2:#12063a;position:relative;overflow:hidden;display:flex;flex-direction:column;padding-top:var(--safe-t);background:radial-gradient(70% 45% at 50% 100%,rgba(255,79,163,.34),transparent),radial-gradient(120% 80% at 50% 12%,var(--s1) 0%,var(--s2) 100%);transition:--s1 .6s}
#bgw{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#bgw .bgl{position:absolute;inset:0;background:center 62%/cover no-repeat;opacity:0;transition:opacity 1.1s ease}
#bgw .bgl.on{opacity:1}
#bgw::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,4,26,.62) 0%,rgba(8,4,26,.18) 24%,rgba(8,4,26,0) 46%,rgba(8,4,26,.08) 70%,rgba(8,4,26,.5) 100%),radial-gradient(60% 40% at 50% 62%,rgba(8,4,26,.28),transparent 70%)}
#stage.hasbg::before{display:none}
#stage.hasbg .deco{opacity:0}
#stage::before{content:"";position:absolute;inset:0;background:url(assets/scene/bg.jpg) center/cover;opacity:.3;pointer-events:none}
#stage.frz{box-shadow:inset 0 0 70px 10px rgba(255,176,46,.6)}
#stage.boss{box-shadow:inset 0 0 90px 12px rgba(255,40,70,.5)}
#cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}

/* ---------- HUD ---------- */
#hud{position:relative;z-index:5;padding:10px 14px 0;text-align:center;width:100%;max-width:640px;margin:0 auto}
.h-top{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-right:38px}
@media(min-aspect-ratio:1/1){.h-top{padding-right:0}#subTabs{padding-right:54px!important}}
.lvl{text-align:left;min-width:0;line-height:1.15}
.lvl b{display:block;font:800 14px/1.2 Unbounded,Onest,sans-serif;white-space:nowrap}
.lvl small{display:block;color:#d8ceff;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chips{display:flex;gap:6px;flex:none}
.chip{display:flex;align-items:center;gap:5px;height:34px;padding:0 11px;border-radius:99px;background:rgba(10,4,40,.55);border:1px solid rgba(255,255,255,.2);font:800 13px Unbounded,Onest,sans-serif;font-variant-numeric:tabular-nums}
#gear{position:fixed;top:calc(8px + var(--safe-t));right:10px;z-index:20;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:18px;line-height:0;background:rgba(10,4,40,.8);border:1px solid rgba(255,255,255,.25)}
#gear .ico{display:block;width:20px;height:20px;vertical-align:0}
.chip.bump{animation:bump .36s}
@keyframes bump{40%{transform:scale(1.2);background:rgba(92,240,255,.4)}}
.bal{font:800 clamp(22px,6vw,30px)/1.1 Unbounded,Onest,sans-serif;background:linear-gradient(#fff8c9,#ffb02e);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums;margin-top:1px}
.sub{font:600 12px Onest,sans-serif;color:#dcd2ff;min-height:16px}
.bar{position:relative;height:18px;border-radius:99px;background:rgba(5,2,28,.6);overflow:hidden;font:700 11px/18px Onest,sans-serif;text-align:center;border:1px solid rgba(255,255,255,.12)}
.bar i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);border-radius:99px;transition:transform .12s linear}
.bar span{position:relative;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.vein{margin-top:8px}
#veinF{background:linear-gradient(90deg,var(--g2),var(--g1))}
.boss #veinF{background:linear-gradient(90deg,#b4122f,#ff5a5f)}
.btimer{display:none;margin-top:3px;height:14px;line-height:14px}
.boss .btimer{display:block}
#bossF{background:linear-gradient(90deg,#ff9f1c,#ffe066);transition:none}
#buffs{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-top:4px;min-height:0}
#buffs span{background:linear-gradient(135deg,#ffb02e,#ff4f8b);padding:2px 9px;border-radius:99px;font:700 11px Onest,sans-serif;white-space:nowrap}

/* ---------- scene ---------- */
#scene{position:relative;flex:1 1 0;min-height:0;z-index:2;width:100%;max-width:640px;margin:0 auto}
#scene>*{position:absolute}
.deco{top:0;bottom:0;left:50%;width:max(100%,min(100vw,1300px));height:100%;transform:translateX(-50%);pointer-events:none}
.gwrap{left:50%;bottom:9%;height:min(74%,420px);aspect-ratio:440/495;transform:translateX(-50%);max-width:52%}
.rays{position:absolute;inset:-35%;background:repeating-conic-gradient(rgba(255,255,255,.14) 0 7deg,transparent 7deg 22deg);-webkit-mask:radial-gradient(circle,#000 8%,transparent 62%);mask:radial-gradient(circle,#000 8%,transparent 62%);animation:spin 40s linear infinite;pointer-events:none}
.hot .rays{background:repeating-conic-gradient(rgba(255,170,60,.3) 0 7deg,transparent 7deg 22deg);animation-duration:7s}
.glow{position:absolute;inset:-6%;border-radius:50%;background:radial-gradient(circle,var(--g2) 0,transparent 62%);opacity:.5;pointer-events:none}
.hot .glow{background:radial-gradient(circle,#ff9f1c 0,transparent 62%);opacity:.9}
.boss .glow{background:radial-gradient(circle,#ff2846 0,transparent 62%);opacity:.8}
#gemBtn{position:absolute;inset:0;border-radius:50%;cursor:pointer}
.rb #gemBtn{animation:hue 6s linear infinite}
#gemBody{position:absolute;inset:0;animation:idle 6s ease-in-out infinite;will-change:transform}
.boss #gemBody{animation:bossbreath 2.4s ease-in-out infinite}
.boss #gem{filter:brightness(.62) saturate(1.5) contrast(1.25) hue-rotate(-12deg)!important}
@keyframes bossbreath{50%{transform:translateY(-4px) scale(1.025)}}
#bossRing{display:none;position:absolute;inset:-7%;border-radius:50%;pointer-events:none;background:repeating-conic-gradient(rgba(255,110,40,.75) 0 3deg,transparent 3deg 15deg);-webkit-mask:radial-gradient(closest-side,transparent 88%,#000 90%,#000 96%,transparent 98%);mask:radial-gradient(closest-side,transparent 88%,#000 90%,#000 96%,transparent 98%);animation:spin 16s linear infinite}
.boss #bossRing{display:block}
#cracks,#bossFace{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none}
#bossFace{display:none;overflow:visible}
.boss #bossFace{display:block}
#bossFace .u-body{opacity:.8;animation:uSmoke 3.4s ease-in-out infinite;transform-origin:50% 45%}
#bossFace .u-smoke{fill:#0a0318}
#bossFace .u-crown{fill:#12062a;opacity:.85}
#bossFace .u-halo{mix-blend-mode:screen;animation:uPulse 2.4s ease-in-out infinite}
#bossFace .u-eyes path{fill:url(#uEye);filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #ff4fd8)}
#bossFace .u-eyes{animation:uBlink 6s infinite;transform-origin:50% 49%}
#bossFace .u-grin{fill:#ff9ff0;opacity:.8;filter:drop-shadow(0 0 3px #ff4fd8)}
#bossFace .u-veins path{fill:none;stroke:url(#uVein);stroke-width:1.4;stroke-linecap:round;filter:drop-shadow(0 0 2px #e879f9);animation:uPulse 2.4s ease-in-out infinite;mix-blend-mode:screen}
@keyframes uSmoke{50%{transform:scale(1.035)}}
@keyframes uPulse{50%{opacity:.45}}
@keyframes uBlink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
.boss #cracks{display:none}
#stage.boss{box-shadow:inset 0 0 90px 12px rgba(190,40,220,.45)}
.boss .glow{background:radial-gradient(circle,#c026d3 0,transparent 62%);opacity:.75}
.boss #bossRing{background:repeating-conic-gradient(rgba(232,121,249,.7) 0 3deg,transparent 3deg 15deg)}
.bub.c{left:50%;transform:translateX(-50%)}
#gemBody .bub.umb{bottom:calc(100% + 6px);max-width:min(240px,66vw)}
.bub.umb{background:linear-gradient(#2a1150,#140726);color:#ffd6f8;border:1.5px solid #d946ef;box-shadow:0 0 14px rgba(217,70,239,.55),0 5px 14px rgba(10,0,40,.5);font-style:italic}
.bub.umb::before,.bub.umb::after{background:#2a1150;left:50%;border:1px solid #d946ef}
.bub.umb b{display:block;font-style:normal;color:#f0abfc;font-size:10px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:1px}
.low #bossFace .u-smoke,.low #bossFace .u-crown,.low #bossFace .u-eyes path,.low #bossFace .u-grin,.low #bossFace .u-veins path{filter:none}
.low #bossFace *{animation:none}
#cracks path{stroke:rgba(255,255,255,.85);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .25s;filter:drop-shadow(0 0 2px rgba(0,0,0,.55))}
#cracks path.on{opacity:1}
.boss #cracks{display:none}
@keyframes emb{50%{opacity:.55}}
#weakLayer{position:absolute;inset:0;pointer-events:none}
.weak{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;pointer-events:auto;background:radial-gradient(circle,#fff 0 16%,#ffe066 26%,rgba(255,120,60,.85) 44%,transparent 70%);animation:wk .9s ease-in-out infinite;z-index:3}
@keyframes wk{50%{transform:scale(1.28)}}
.rock{position:absolute;width:46px;height:46px;margin:-23px 0 0 -23px;font-size:32px;pointer-events:auto;z-index:4;filter:drop-shadow(0 3px 3px rgba(0,0,0,.5));animation:rk .3s ease-out}
@keyframes rk{from{transform:translateY(-120px) scale(.6)}}
.cavein #gem{filter:brightness(.55) saturate(.6)!important}
#miner{left:3%;bottom:5%;height:min(50%,240px);aspect-ratio:525/526;z-index:4;pointer-events:none;animation:mbob 3.4s ease-in-out infinite;max-width:30%}
#miner .spr{position:absolute;inset:0}
#miner .m2{opacity:0}
#sayA{position:absolute;left:30%;bottom:92%;width:0;height:0}
#petLayer{inset:0;pointer-events:none;z-index:4}
.s0{left:74%;bottom:2%;width:17%}.s1{left:80%;bottom:40%;width:15%}.s2{left:14%;bottom:56%;width:14%}.s3{left:66%;bottom:66%;width:14%}.s4{left:38%;bottom:1%;width:14%}
.spet{position:absolute;aspect-ratio:1;max-width:110px;filter:drop-shadow(0 4px 5px rgba(10,0,40,.45))}
#dropLayer{inset:0;pointer-events:none;z-index:5}
.drop{position:absolute;width:44px;height:44px;margin-left:-22px;font-size:26px;pointer-events:auto;filter:drop-shadow(0 0 8px #7de9ff);animation:shn 1s ease-in-out infinite}
.drop.big{font-size:38px;filter:drop-shadow(0 0 14px #fff)}
@keyframes shn{50%{filter:drop-shadow(0 0 16px #bff4ff)}}
.fabs{top:3%;display:flex;flex-direction:column;gap:8px;z-index:5}
.fabs.l{left:8px}.fabs.r{right:8px}
.fab{position:relative;width:42px;min-height:42px;border-radius:14px;background:rgba(10,4,40,.62);border:1px solid rgba(255,255,255,.22);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3px 0;font-size:20px;line-height:1.1}
.fab small{font:700 9px Onest,sans-serif;color:#e8e2ff;white-space:nowrap;font-variant-numeric:tabular-nums}
.fab.ready{background:linear-gradient(135deg,#ffc94a,#ff7a45);border-color:#fff3b8;animation:wob 1.6s infinite}
.fab.ready small{color:#2a1300}
#fTrader{background:linear-gradient(135deg,#34d399,#059669);animation:wob 1.2s infinite}

/* ---------- lower stage ---------- */
#lower{position:relative;z-index:5;padding:6px 14px 10px;display:flex;flex-direction:column;gap:8px;width:100%;max-width:640px;margin:0 auto}
.combo{height:14px;line-height:14px;font-size:10px}
#comboF{background:linear-gradient(90deg,#3be3f2,#ffb02e,#ff4f8b);transition:none}
#team{display:flex;justify-content:center;gap:10px}
.tm{position:relative;width:42px;height:42px;border-radius:50%;background:rgba(10,4,40,.65);border:1.5px solid rgba(255,255,255,.2);display:grid;place-items:center;font-size:18px;color:#cfc7f5;line-height:1}
.tm .spr{position:absolute;inset:3px;width:auto;height:auto}
.tm small{position:absolute;bottom:3px;font:700 9px Onest;color:#cfc7f5}
.tm.lock{opacity:.5;font-size:14px;padding-bottom:9px}
.tm .ring{position:absolute;inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px);transform:rotate(-90deg);fill:none}
.tm .ring circle{stroke:rgba(255,255,255,.14);stroke-width:3}
.tm .ring .rf{stroke:var(--rc,#fff);stroke-dasharray:113;stroke-linecap:round;transition:stroke-dashoffset .12s linear}
.tm.ready{animation:rdy 1.1s ease-in-out infinite;border-color:#fff;box-shadow:0 0 12px 3px var(--rc,#fff)}
@keyframes rdy{50%{transform:scale(1.1)}}
.goal{display:flex;align-items:center;gap:8px;width:100%;padding:5px 7px 5px 10px;border-radius:13px;background:rgba(10,4,40,.62);border:1px solid rgba(255,255,255,.16);text-align:left;min-height:42px}
.goal.ready{background:linear-gradient(90deg,rgba(122,60,255,.75),rgba(255,79,139,.55));border-color:#ffd97a}
.gi{font-size:18px;flex:none}
.gt{flex:1;min-width:0;line-height:1.15}
.gt b{display:block;font:600 12px Onest,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gt small{font-size:11px;color:#d8ceff}
.gbar{position:relative;display:block;height:5px;margin-top:3px;border-radius:9px;background:rgba(255,255,255,.14);overflow:hidden}
.gbar i{position:absolute;inset:0;transform-origin:left;background:linear-gradient(90deg,#5cf0ff,#b78bff);border-radius:9px}
.gbar.big{height:18px;margin:8px 0;text-align:center;font:700 11px/18px Onest}
.gbar.big span{position:relative}
.pr{flex:none;font:800 10.5px Unbounded,Onest,sans-serif;white-space:nowrap;padding:5px 9px;border-radius:99px;border:1px solid var(--ln);background:rgba(255,255,255,.06);color:#d9d2ff}
.pr.can{background:linear-gradient(135deg,#ffc94a,#ff7a45);color:#2a1300;border-color:transparent}

/* ---------- panel ---------- */
#panel{display:flex;flex-direction:column;min-height:0;background:var(--bg2);border-top:1px solid var(--ln)}
#subTabs{display:flex;gap:6px;padding:10px 14px 8px;flex:none}
#subTabs.one{display:none}
#subTabs button{flex:1;padding:6px 4px;border-radius:9px;font:700 11.5px Onest,sans-serif;color:var(--mu);background:rgba(255,255,255,.05);white-space:nowrap}
#subTabs button.on{background:var(--acc);color:#fff}
#panelBody{flex:1;min-height:0;overflow-y:auto;padding:4px 14px 14px;touch-action:pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
#nav{display:grid;background:#0d0726;border-top:1px solid var(--ln)}
#nav button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 0 7px;color:var(--mu);line-height:1.1}
#nav span{display:flex;align-items:center;justify-content:center;width:34px;height:34px;font-size:17px;transition:transform .15s}
#nav small{font:700 10px Onest,sans-serif}
#nav{grid-auto-flow:column;grid-auto-columns:1fr}
#nav button.fresh span{animation:wob 1.3s infinite}
#nav button.on{color:#fff;background:linear-gradient(180deg,rgba(122,60,255,.45),transparent)}
#nav button.on span{transform:translateY(-1px) scale(1.12)}
#nav button.dot::after{content:"";position:absolute;top:5px;left:calc(50% + 12px);width:9px;height:9px;border-radius:50%;background:var(--pk);box-shadow:0 0 0 2px #0d0726}
.nav-ico{display:block;width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(10,0,40,.34))}
.item{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;text-align:left;padding:7px 9px;margin-bottom:8px;border-radius:12px;font-size:13.5px;background:rgba(255,255,255,.045);border:1px solid transparent;transition:background .15s}
.item.can{background:linear-gradient(90deg,rgba(122,60,255,.28),rgba(255,255,255,.05));border-color:rgba(255,201,74,.3)}
.item.can .pr{background:linear-gradient(135deg,#ffc94a,#ff7a45);border-color:transparent;color:#2a1300}
.item:active{transform:scale(.985)}
.item.off{opacity:.62}
.item.done{opacity:.5}.item.done .pr{color:var(--ok)}
.item.ad .ic{background:linear-gradient(135deg,#34d399,#059669)}
.ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:18px;background:linear-gradient(135deg,var(--h1,#a58bff),var(--h2,#6a46ff))}
.ic.eg{font-size:0}.ic.eg .egg-ico{width:30px;height:30px;object-fit:contain;display:block;filter:drop-shadow(0 3px 8px rgba(15,10,40,.32))}.ic.pl{font:800 15px Unbounded,Onest,sans-serif}

.task-ico,.goal-ico{display:block;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(10,0,40,.35));}
.task-ico{width:30px;height:30px;}
.goal-ico{width:22px;height:22px;}
.depth-ico{image-rendering:auto;}

.tx{min-width:0}
.tx b{display:block;font-weight:700;line-height:1.2}.tx b em{font:800 11px Unbounded,Onest;color:var(--am);font-style:normal;margin-left:3px}
.tx small{display:block;color:var(--mu);font-size:11px;line-height:1.25}
.bm{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--mu);padding:0 2px 7px}
.bm button{padding:4px 11px;border-radius:99px;border:1px solid var(--ln);font:700 12px Onest,sans-serif;color:var(--ink)}
.bm button.on{background:var(--acc);border-color:var(--acc)}
.sph{padding:2px 4px 8px;color:var(--mu);font-size:12.5px;margin:0}.sph b{color:var(--am)}
h3{font:800 12.5px Unbounded,Onest,sans-serif;margin:12px 3px 7px}
.card{padding:11px;border-radius:15px;background:var(--card);margin-bottom:9px;border:1px solid var(--ln)}
.card p{margin:5px 0 8px;font-size:12.5px;color:#d3ccf5}
.card.rb{background:linear-gradient(135deg,#3a1a9a,#7a2a8f)}
.card .ch{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12.5px}
.card.ev{display:flex;gap:11px;align-items:center;background:linear-gradient(135deg,#7a3cff,#c62f7f)}
.evi{font-size:40px;flex:none}.tm-l{font-weight:700}.card.ev p{color:#fff;margin:3px 0}.card.ev .tm{all:unset;font:800 12px Unbounded,Onest,sans-serif;color:#ffe9a8}
.btn{display:block;width:100%;padding:11px 12px;border-radius:13px;font:800 13.5px Onest,sans-serif;background:rgba(255,255,255,.09);border:1px solid var(--ln)}
.btn.pri{background:linear-gradient(135deg,#ff4f8b,#7a3cff);border-color:transparent;box-shadow:0 6px 16px rgba(255,79,139,.35)}
.btn.danger{background:#b4122f;border-color:transparent}
.btn:disabled{opacity:.5;box-shadow:none}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:8px 0}
.day{background:rgba(255,255,255,.06);border-radius:10px;padding:5px 1px;text-align:center;min-height:50px}
.day small{display:block;font-size:9px;color:var(--mu);white-space:nowrap}
.day b{display:block;font-size:11px;line-height:1.15;margin-top:2px;word-break:break-word}
.day.done{opacity:.4;background:rgba(75,224,160,.2)}
.day.today{box-shadow:0 0 0 2px #ffc94a;background:rgba(255,201,74,.2)}
#pRows.pets,.pets.mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:7px}
.pet{display:block;width:100%;background:rgba(255,255,255,.055);border:1.5px solid var(--ln);border-radius:14px;padding:7px 4px;text-align:center;height:100%}
.pet.on{border-color:var(--rc,#ffc94a);background:rgba(122,60,255,.25)}
.pet .pe{position:relative;display:block;height:60px}
.pet .pd{position:absolute;right:4px;top:-2px;font-size:13px;font-style:normal}
.pet b{display:block;font-size:11.5px;line-height:1.15;margin-top:3px}
.pet small{display:block;color:var(--mu);font-size:10.5px;line-height:1.2}
.pet.no .pe .spr,.pet.lockd .pe .spr{filter:brightness(0) opacity(.4)}
.st{color:#ffc94a;letter-spacing:-1px;font-size:11px!important}.st u{text-decoration:none;opacity:.2}
.pe.sm{position:relative;width:46px;height:46px;display:block}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px 12px;padding:4px 4px 10px;font-size:12px;color:var(--mu)}
.stats b{display:block;color:var(--ink);font:800 12.5px Unbounded,Onest,sans-serif}
.ach{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 8px;margin-bottom:5px;opacity:.45;border-radius:13px;background:rgba(255,255,255,.035)}
.ach .ic{filter:grayscale(1)}
.ach.got{opacity:1}.ach.got .ic{filter:none}
.ach em{font:700 11px Onest;color:var(--ok);font-style:normal;white-space:nowrap}
.box{display:flex;align-items:center;gap:12px;padding:2px}
.chest{flex:none;width:74px;height:74px}.chest.ready{animation:wob 1.3s infinite}
.bt b{display:block}.bt small{color:var(--mu)}
.wwrap{position:relative;width:min(96%,330px);aspect-ratio:1;margin:12px auto 8px;isolation:isolate}
@media(max-width:600px){.wwrap{width:min(58vw,210px);margin:6px auto 2px}}
@media(max-width:600px) and (max-height:700px){.wwrap{width:min(50vw,180px)}}
.wheel,.wheel-frame{position:absolute;inset:0;background-repeat:no-repeat;background-position:center;background-size:100% 100%;pointer-events:none}
.wheel{background-image:url('assets/wheel/wheel_disc.webp');transform-origin:51.835% 46.172%;will-change:transform}
.wheel-frame{background-image:url('assets/wheel/wheel_frame.webp');z-index:1}
.reward-icon{display:inline-block;vertical-align:-.32em;width:1.45em;height:1.45em;object-fit:contain}
.awi .reward-icon{width:38px;height:38px;vertical-align:middle}
.rl .reward-icon{width:30px;height:30px;vertical-align:middle}
.day .reward-icon{width:18px;height:18px}
.pc .reward-icon{width:32px;height:32px}
.wbtn{max-width:280px;margin:8px auto 0}

/* ---------- effects ---------- */
.pop{position:fixed;pointer-events:none;font:800 15px Unbounded,Onest,sans-serif;color:#ffe27a;text-shadow:0 2px 6px rgba(20,0,70,.85);transform:translate(-50%,-50%);animation:up 1.2s ease-out forwards;z-index:30;white-space:nowrap}
.pop.crit{font-size:20px;color:#ff6fae}
.pop.pet{font-size:12.5px;color:#a8f5ff}
.pop.dm{font-size:18px;color:#a8f5ff}
.pop.skill{font-size:15px;color:#fff}
.pop.heart{font-size:20px}
.shot{position:fixed;font-size:24px;z-index:6;pointer-events:none;filter:drop-shadow(0 0 8px #ff9f1c)}
.fly{position:fixed;font-size:22px;z-index:40;pointer-events:none}
.gold{position:fixed;z-index:25;width:62px;height:62px;border-radius:50%;font-size:28px;color:#fff;background:radial-gradient(circle at 35% 30%,#fff7b0,#ffc22e 45%,#d97a00);box-shadow:0 0 0 7px rgba(255,200,50,.3),0 0 30px 10px rgba(255,190,40,.75);animation:bob 1.5s ease-in-out infinite}
.met{position:fixed;top:-60px;z-index:24;font-size:32px;width:54px;height:54px;animation:fall linear forwards}
.met.dia{filter:drop-shadow(0 0 10px #a8f5ff)}
.cart{position:fixed;z-index:24;font-size:40px;width:64px;height:64px;filter:drop-shadow(0 0 12px #ffd54a)}
.bub{position:absolute;bottom:102%;width:max-content;max-width:min(200px,50vw);background:#fff;color:#1d1840;font:700 11.5px/1.25 Onest,sans-serif;padding:6px 9px;border-radius:12px;z-index:8;animation:bub .25s ease-out;text-align:left;box-shadow:0 5px 14px rgba(10,0,40,.35)}
.bub.l{left:-4px;border-bottom-left-radius:3px}
.bub.r{right:-4px;border-bottom-right-radius:3px}
.bub.out{opacity:0;transition:opacity .25s}
#sayA .bub{bottom:2px}
@keyframes bub{from{opacity:0;transform:translateY(8px) scale(.85)}}
.banner{position:absolute;left:50%;top:18%;width:max-content;transform:translateX(-50%);z-index:7;font:800 clamp(16px,5vw,24px)/1.2 Unbounded,Onest,sans-serif;white-space:nowrap;padding:8px 18px;border-radius:14px;background:rgba(10,4,40,.8);animation:bn 1.7s ease-out forwards;pointer-events:none;max-width:94%;overflow:hidden;text-overflow:ellipsis}
.banner.red{background:linear-gradient(135deg,#b4122f,#6d0b2a)}
.banner.gold{background:linear-gradient(135deg,#ffb02e,#d9480f);color:#2a1300}
@keyframes bn{0%{opacity:0;transform:translateX(-50%) scale(.6)}12%{opacity:1;transform:translateX(-50%) scale(1.06)}22%{transform:translateX(-50%) scale(1)}80%{opacity:1}100%{opacity:0}}
#toast{position:fixed;left:50%;bottom:calc(66px + var(--safe-b));transform:translate(-50%,30px);background:linear-gradient(135deg,#2a1f6b,#5a2bd9);color:#fff;padding:10px 16px;border-radius:14px;font-weight:700;font-size:13px;opacity:0;transition:.25s;z-index:60;max-width:92vw;text-align:center;pointer-events:none;box-shadow:0 10px 30px rgba(40,10,120,.5)}
#toast.on{opacity:1;transform:translate(-50%,0)}
#aw{position:fixed;left:50%;top:calc(8px + var(--safe-t));transform:translateX(-50%);z-index:70;display:flex;align-items:center;gap:11px;padding:9px 16px 9px 9px;border-radius:18px;color:#fff;background:linear-gradient(135deg,#2b1a7a,#7a3cff 60%,#ff4f8b);box-shadow:0 14px 40px rgba(60,20,160,.55),inset 0 0 0 2px rgba(255,255,255,.25);width:max-content;max-width:94vw;overflow:hidden;pointer-events:none}
#aw.show{animation:awin .5s cubic-bezier(.2,1.4,.4,1)}
.awr{position:absolute;left:-60px;top:-70px;width:200px;height:200px;border-radius:50%;background:repeating-conic-gradient(rgba(255,255,255,.2) 0 8deg,transparent 8deg 24deg);animation:spin 6s linear infinite}
.awi{position:relative;flex:none;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:27px;background:rgba(255,255,255,.2)}
.awt{position:relative;display:flex;flex-direction:column;line-height:1.2;min-width:0}
.awt small{font:700 10px Onest,sans-serif;opacity:.85}
.awt b{font:800 13.5px Unbounded,Onest,sans-serif}
.awt span{font-size:11.5px;opacity:.9}
@keyframes awin{from{transform:translate(-50%,-150%) scale(.8)}}

/* ---------- modal ---------- */
#modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;background:rgba(6,2,24,.74);padding:14px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.m-card{position:relative;display:flex;flex-direction:column;width:min(420px,100%);max-height:96%;overflow:hidden;background:linear-gradient(180deg,#2a1c6b,#1a1050);border:1.5px solid rgba(255,255,255,.2);border-radius:22px;padding:16px;text-align:center;animation:mi .28s cubic-bezier(.2,1.3,.4,1)}
@keyframes mi{from{transform:scale(.8);opacity:0}}
.m-rays{position:absolute;left:50%;top:-30px;width:320px;height:320px;margin-left:-160px;pointer-events:none;background:repeating-conic-gradient(rgba(255,255,255,.07) 0 8deg,transparent 8deg 24deg);-webkit-mask:radial-gradient(circle,#000 10%,transparent 60%);mask:radial-gradient(circle,#000 10%,transparent 60%);animation:spin 18s linear infinite}
.m-card>*:not(.m-rays):not(.m-x){position:relative;flex:none}
.m-card>.m-body:not(.m-rays):not(.m-x){flex:0 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin}
.m-x{position:absolute!important;right:9px;top:9px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.1);z-index:2}
.m-ic{font-size:46px;line-height:1.1;display:flex;align-items:center;justify-content:center}
.m-card h2{font:800 17px/1.25 Unbounded,Onest,sans-serif;margin:7px 0}
.m-body p{margin:6px 0;font-size:13.5px}.mu{color:var(--mu)}.rar{font-weight:800}
.m-btns{display:flex;flex-direction:column;gap:7px;margin-top:11px}
.big-pet{display:block;width:min(150px,24vh);height:min(150px,24vh);margin:0 auto}
.big-pet.no .spr{filter:brightness(0) opacity(.45)}
.big-pet.pop-in{animation:pi .55s cubic-bezier(.2,1.5,.4,1)}
@keyframes pi{from{transform:scale(0) rotate(-20deg)}}
.big-gem{display:block;width:min(104px,18vh);height:min(116px,20vh);margin:0 auto}
.big-egg{display:flex;align-items:center;justify-content:center;min-height:118px}.big-egg-img{display:block;width:min(146px,26vh);height:min(146px,26vh);object-fit:contain;animation:eg .24s ease-in-out infinite;filter:drop-shadow(0 10px 24px rgba(35,10,80,.38))}
@keyframes eg{25%{transform:rotate(-13deg)}75%{transform:rotate(13deg)}}
.bn{font:800 15px Unbounded,Onest,sans-serif;color:var(--am)}
.rlist{display:flex;flex-direction:column;gap:5px;margin:8px 0}
.rl{display:flex;align-items:center;justify-content:center;gap:8px;padding:7px;border-radius:11px;background:rgba(255,255,255,.08)}
.rl span{font-size:20px}.rl b{font:800 13px Unbounded,Onest,sans-serif}
.kv{display:grid;gap:5px;text-align:left}
.kv div{padding:7px 9px;border-radius:11px;background:rgba(255,255,255,.07);font-size:13px}
.kv small{display:block;color:var(--mu);font-size:11.5px;line-height:1.25}
.pet-m .m-btns{display:grid;grid-template-columns:1fr 1fr}.pet-m .m-btns .btn{padding:10px 6px;font-size:12px}
.sets{display:flex;flex-direction:column;gap:6px}
.tgl{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;background:rgba(255,255,255,.07);font-weight:700;font-size:13.5px;text-align:left}
.tgl i{flex:none;width:40px;height:22px;border-radius:99px;background:rgba(255,255,255,.2);position:relative;transition:.15s}
.tgl i::after{content:"";position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.15s}
.tgl.on i{background:var(--ok)}.tgl.on i::after{left:20px}
.tgl.danger{color:#ff8a9a}
#hint{position:fixed;z-index:75;pointer-events:none;transform:translate(-50%,0);display:flex;flex-direction:column;align-items:center}
#hint.up{transform:translate(-50%,-100%);flex-direction:column-reverse}
#hint .hand{font-size:34px;line-height:1;animation:hd 1.1s ease-in-out infinite}
#hint.up .hand{rotate:180deg}
#hintT{background:#fff;color:#1d1840;padding:7px 12px;border-radius:12px;font:800 12.5px/1.25 Onest,sans-serif;text-align:center;width:max-content;max-width:min(280px,86vw);box-shadow:0 6px 18px rgba(10,0,40,.45)}
@keyframes hd{50%{transform:translateY(10px) scale(.92)}}
@keyframes idle{50%{transform:translateY(-6px) rotate(1deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes hue{to{filter:hue-rotate(360deg)}}
@keyframes up{to{transform:translate(-50%,-110px) scale(1.12);opacity:0}}
@keyframes bob{50%{transform:translateY(-12px) rotate(6deg)}}
@keyframes wob{30%{transform:scale(1.13) rotate(-6deg)}60%{transform:scale(.97) rotate(4deg)}}
@keyframes fall{to{transform:translateY(112vh) rotate(200deg)}}
@keyframes mbob{50%{transform:translateY(-3px) scaleY(.985)}}
@keyframes cb{50%{transform:translateY(-5px)}}
.lite .rays,.lite #cv,.lite .glow{display:none}
.lite #gemBody,.lite #miner,.lite .spet,.lite .m-rays,.lite .awr{animation:none}
@media(max-width:879px){.rays{animation:none}}
@media(prefers-reduced-motion:reduce){#gemBody,#bossRing,.rays,.spet,#miner,.gold,.m-rays,.awr,.fab.ready,.chest.ready{animation:none}}
@media(max-height:640px){.bal{font-size:22px}.tm{width:38px;height:38px}.goal{min-height:36px}.lvl small{display:none}.sub{display:none}}
@media(max-height:460px){.spet{max-width:62px}.s1{bottom:30%}.s2{bottom:70%;left:12%}.s3{bottom:68%}.gwrap{height:82%}#miner{height:62%}.bal{font-size:17px;margin:0}.bar{height:14px;line-height:14px;font-size:10px}.vein{margin-top:2px}#hud{padding:4px 8px 0}.chip{height:26px;font-size:11px}#lower{padding:2px 8px 4px;gap:3px;flex-direction:row;flex-wrap:wrap;align-items:center}.combo{width:100%;height:10px;line-height:10px;font-size:8px}#team{gap:4px;flex:none}.tm{width:30px;height:30px}.tm small{display:none}.goal{flex:1;min-width:0;min-height:30px;padding:2px 6px}.gi{display:none}.gbar{margin-top:1px;height:4px}.fab{width:34px;min-height:34px;font-size:15px}.fabs{gap:3px}.fab small{font-size:8px}#subTabs{padding:4px 8px}#subTabs button{padding:4px}#nav button{padding:3px 0}#nav span{width:30px;height:30px;font-size:15px}#nav small{font-size:9px}.item{padding:5px;grid-template-columns:36px minmax(0,1fr) auto;margin-bottom:4px}.ic{width:36px;height:36px;font-size:18px}.lvl b{font-size:11px}#buffs span{font-size:9px;padding:1px 6px}.m-card{padding:10px}.m-ic{font-size:30px}.big-pet{width:80px;height:80px}.m-card h2{font-size:14px;margin:3px 0}.btn{padding:8px}}

/* ---------- splash ---------- */
#sp{--w:min(100vw,56.25vh,540px);position:fixed;inset:0;z-index:9999;background:#150a35;color:#fff;overflow:hidden;transition:opacity .5s}
#sp.out{opacity:0;pointer-events:none}
#sp .bl{display:none;position:absolute;inset:-8%;background:var(--art) center/cover;filter:blur(28px) brightness(.5) saturate(1.2)}
@media(min-aspect-ratio:3/5){#sp .bl{display:block}}
#sp .col{position:absolute;top:0;bottom:0;left:50%;width:var(--w);transform:translateX(-50%)}
#sp .art{position:absolute;left:0;right:0;top:0;height:88%;background:var(--art) center top/cover;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
#sp .ttl{position:absolute;left:0;right:0;top:calc(var(--w)*.08);text-align:center;padding:0 7%}
#sp h1 span{display:inline-block}
#sp h1{margin:0;font:800 calc(var(--w)*.082)/1.06 Unbounded,"Arial Rounded MT Bold",Onest,system-ui,sans-serif;color:#ffc83a;background:linear-gradient(#fff6b8 8%,#ffd24a 42%,#ff9a1f 92%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(calc(var(--w)*.008) 0 0 #34126e) drop-shadow(calc(var(--w)*-.008) 0 0 #34126e) drop-shadow(0 calc(var(--w)*.008) 0 #34126e) drop-shadow(0 calc(var(--w)*-.008) 0 #34126e) drop-shadow(0 calc(var(--w)*.014) 0 #1d0a45)}
#sp .sl{margin:calc(var(--w)*.03) auto 0;max-width:88%;font:700 calc(var(--w)*.04)/1.25 Onest,system-ui,sans-serif;color:#e6f7ff;text-shadow:0 1px 0 #1a0b4d,0 0 10px #1a0b4d,0 0 18px rgba(20,10,80,.9)}
#sp .ctl{position:absolute;left:0;right:0;bottom:0;padding:0 9% calc(var(--w)*.05 + var(--safe-b));display:flex;flex-direction:column;align-items:center;gap:calc(var(--w)*.035)}
#sp .go{width:80%;font:800 calc(var(--w)*.05)/1 Unbounded,"Arial Rounded MT Bold",Onest,system-ui,sans-serif;color:#3a1500;padding:calc(var(--w)*.032) 0;border-radius:999px;background:linear-gradient(#ffe56b,#ffb52a 55%,#ff8f1a);box-shadow:0 calc(var(--w)*.014) 0 #a84e00,0 calc(var(--w)*.03) calc(var(--w)*.06) rgba(255,160,30,.45),inset 0 2px 0 rgba(255,255,255,.6);animation:spp 1.8s ease-in-out infinite}
#sp .lg{display:flex;gap:calc(var(--w)*.025);justify-content:center}
#sp .lg button{border:2px solid rgba(255,255,255,.28);background:rgba(24,10,60,.62);color:#e9e4ff;font:700 calc(var(--w)*.032)/1 Onest,system-ui,sans-serif;padding:calc(var(--w)*.02) calc(var(--w)*.035);border-radius:999px}
#sp .lg button[aria-pressed=true]{background:#fff;color:#2a1070;border-color:#fff}
#sp .ld{width:84%;display:none;flex-direction:column;gap:calc(var(--w)*.025)}
#sp.run .go,#sp.run .lg,#sp.run .spet2{display:none}
#sp.run .ld{display:flex}
#sp .lt{display:flex;justify-content:space-between;font:700 calc(var(--w)*.036)/1 Onest,system-ui,sans-serif;color:#fff3c2;text-shadow:0 1px 0 #1a0b4d,0 0 8px #1a0b4d}
#sp .tr{height:calc(var(--w)*.06);border-radius:999px;background:rgba(18,8,48,.85);border:2px solid #4b2a9a;padding:3px}
#sp .fl{height:100%;width:0;border-radius:999px;background:linear-gradient(#fff29a,#ffcf33 50%,#ffab1a);transition:width .2s}
@keyframes spp{50%{transform:scale(1.035)}}
#sp .spet2{position:absolute;height:auto;aspect-ratio:1;filter:drop-shadow(0 calc(var(--w)*.012) calc(var(--w)*.02) rgba(10,0,40,.55));animation:spb 3.4s ease-in-out infinite}
@keyframes spb{50%{translate:0 calc(var(--w)*-.014)}}

/* ---------- phone (portrait). Nothing here touches the desktop layout ---------- */
#panelClose{display:none}
@media(max-aspect-ratio:1/1){
 #app{grid-template-rows:minmax(0,1fr) 48% auto}
 #app.closed{grid-template-rows:minmax(0,1fr) 0 auto}
 #stage{grid-row:1;touch-action:manipulation}
 #panel{grid-row:2}
 #nav{grid-row:3}
 #hud{padding:6px 12px 0}
 .h-top{padding-right:42px}
 .bal{font-size:24px}
 .sub{display:block;font-size:11px;min-height:0}
 .vein{margin-top:4px;height:16px;line-height:16px}
 #scene{max-width:none}
 .gwrap{bottom:15%;height:72%;max-width:70%}
 #miner{left:0;bottom:1%;height:40%;max-width:36%}
 .spet{max-width:88px}
 .fabs{top:4px}
 .fabs.l{left:6px}.fabs.r{right:6px}
 .fab{width:40px;min-height:40px}
 #lower{padding:4px 10px 6px;gap:5px;max-width:none}
 .tm{width:40px;height:40px}
 /* menu open: the crystal stays in view, secondary controls step aside */
 #app:not(.closed) .fabs,#app:not(.closed) #team,#app:not(.closed) .goal,#app:not(.closed) #buffs,#app:not(.closed) .sub{display:none}
 #app:not(.closed) .gwrap{bottom:2%;height:94%}
 #app:not(.closed) #miner{height:62%}
 #app:not(.closed) .spet{max-width:60px;width:14%}
 /* little room with the menu open: the miner keeps the left side, pets line up on the right */
 #app:not(.closed) #miner{height:58%;left:2%}
 #app:not(.closed) .s0{left:83%;bottom:2%}
 #app:not(.closed) .s1{left:68%;bottom:2%}
 #app:not(.closed) .s2{left:83%;bottom:50%}
 #app:not(.closed) .s3{left:68%;bottom:50%}
 #app:not(.closed) .s4{left:43%;bottom:1%}
 #panelClose{display:flex;justify-content:center;align-items:center;width:100%;height:18px;flex:none}
 #panelClose i{display:block;width:44px;height:5px;border-radius:9px;background:rgba(255,255,255,.35)}
 #subTabs{padding:0 12px 6px}
 .pop{font-size:14px}
 .pop.crit{font-size:18px}
 .banner{top:6%;font-size:15px}
}

/* ---------- living pets: parts of the sprite move, see src/js/29_rigs.js ---------- */
.rig{position:absolute;will-change:transform}
.lyr{position:absolute;inset:0;display:block;background-size:100% 100%;background-repeat:no-repeat}
.rig.hover{animation:ihover 1.5s ease-in-out infinite alternate}
.rig.breathe{transform-origin:50% 100%;animation:ibreathe 1.7s ease-in-out infinite alternate}
.rig.waddle{transform-origin:50% 100%;animation:iwaddle 1.25s ease-in-out infinite alternate}
.rig.perky{transform-origin:50% 100%;animation:iperky 2.6s ease-in-out infinite}
@keyframes ihover{from{transform:translateY(5%) rotate(-2deg)}to{transform:translateY(-6%) rotate(2deg)}}
@keyframes ibreathe{from{transform:scale(1,1)}to{transform:scale(1.025,.965)}}
@keyframes iwaddle{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes iperky{0%,55%,100%{transform:translateY(0) scale(1,1)}65%{transform:translateY(0) scale(1.05,.92)}76%{transform:translateY(-9%) scale(.96,1.05)}88%{transform:translateY(0) scale(1.03,.96)}}
.big-pet{position:relative}
/* thoughts: a cloud with two little puffs */
.bub{border-radius:16px;box-shadow:0 5px 14px rgba(10,0,40,.4);font-weight:600}
.bub::before,.bub::after{content:"";position:absolute;background:#fff;border-radius:50%}
.bub::before{width:9px;height:9px;bottom:-6px}
.bub::after{width:5px;height:5px;bottom:-12px}
.bub.l{border-bottom-left-radius:16px}
.bub.r{border-bottom-right-radius:16px}
.bub.l::before{left:18px}.bub.l::after{left:12px}
.bub.r::before{right:18px}.bub.r::after{right:12px}
.bub{bottom:calc(102% + 10px)}
/* super strike */
.tm.sup{--p:0%;background:conic-gradient(#ffd24a var(--p),rgba(10,4,40,.7) 0);border-color:rgba(255,255,255,.3);font-size:20px}
.tm.sup .ico{filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))}
.tm.sup.ready{--rc:#ffd24a;background:radial-gradient(circle at 35% 30%,#fff7b0,#ffb02e 60%,#ff6a1f)}
/* golden vein */
.gv #gem{filter:sepia(1) saturate(3.4) hue-rotate(-6deg) brightness(1.12)!important}
.gv .glow{background:radial-gradient(circle,#ffd24a 0,transparent 62%);opacity:.95}
.gv .vein #veinF,.gv #veinF{background:linear-gradient(90deg,#ff9f1c,#ffe680)}
/* guardian's chests */
.picks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0}
.pick{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;border-radius:14px;background:rgba(255,255,255,.07);border:1.5px solid var(--ln);min-height:112px}
.pick:not(:disabled):active{transform:scale(.96)}
.pick .pc{display:block;width:62px;height:62px;animation:wob 2s infinite}
.pick b{font-size:18px;line-height:1.1}
.pick small{font-size:11px;font-weight:700;line-height:1.15;color:#fff}
.pick.on{border-color:#ffd24a;background:rgba(255,201,74,.2)}
.pick.on .pc,.pick.dim .pc{animation:none}
.pick.dim{opacity:.5}

/* ---------- phones: same scene, without effects that a weak GPU must recompute on every frame ---------- */
.low .spet,.low .ico,.low .drop,.low .drop.big,.low .rock,.low .shot,.low .met.dia,.low .cart,.low #bossFace,.low #bossFace .slit,.low #bossFace .veins path,.low #cracks path{filter:none}
.low .rays,.low #bossRing,.low .m-rays,.low .awr,.low .rb #gemBtn,.low #bossFace .slit,.low #bossFace .vent,.low #bossFace .veins path{animation:none}
.low .drop{animation:spp 1s ease-in-out infinite}
.low #miner{animation:none}
.low #modal{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(6,2,24,.86)}
@keyframes gco{from{opacity:0}to{opacity:1}}
@media(pointer:coarse){#sp .spet2{filter:none}#sp .bl{filter:none}}

/* Umbrax artwork: the shadow trapped inside the crystal; the SVG face stays as a fallback */
#umbrax,#uSheen{display:none;position:absolute;pointer-events:none}
#umbrax{left:6%;width:88%;top:2%;aspect-ratio:1}
#umbrax::before{content:"";position:absolute;left:14%;right:14%;top:18%;bottom:22%;border-radius:50%;background:radial-gradient(closest-side,rgba(8,2,20,.85),rgba(8,2,20,0));}
.boss #umbrax{display:block;animation:uFloat 3.6s ease-in-out infinite}
#umbrax img{position:relative;display:block;width:100%;height:100%;-webkit-mask-image:linear-gradient(#000 66%,transparent 97%);mask-image:linear-gradient(#000 66%,transparent 97%);filter:drop-shadow(0 0 12px rgba(217,70,239,.5))}
#umbrax .u-eye{position:absolute;left:24%;width:52%;top:32%;height:20%;mix-blend-mode:screen;background:radial-gradient(ellipse 22% 38% at 31% 50%,rgba(255,150,245,.95),transparent),radial-gradient(ellipse 22% 38% at 69% 50%,rgba(255,150,245,.95),transparent);animation:uEyes 2.6s ease-in-out infinite}
.boss #uSheen{display:block;inset:0;mix-blend-mode:screen;opacity:.16}
html:not(.umbfb) #bossFace .u-body,html:not(.umbfb) #bossFace .u-halo,html:not(.umbfb) #bossFace .u-eyes,html:not(.umbfb) #bossFace .u-grin{display:none}
.umbfb #umbrax,.umbfb #uSheen{display:none!important}
@keyframes uFloat{50%{transform:translateY(-2.5%) scale(1.025)}}
@keyframes uEyes{0%,100%{opacity:.35}50%{opacity:1}}
.low #umbrax,.low #umbrax .u-eye{animation:none}.low #umbrax img{filter:none}

/* building artwork in the shop */
.ic.bimg{width:48px;height:48px;border-radius:13px;position:relative;flex:none;background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--h1) 55%,transparent),color-mix(in srgb,var(--h2) 70%,#120a30) 78%);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--h1) 60%,transparent)}
.ic.bimg i{position:absolute;inset:-5px;background:center/contain no-repeat;filter:drop-shadow(0 2px 3px rgba(10,0,40,.55))}
.item.off .ic.bimg i{filter:saturate(.6) brightness(.82) drop-shadow(0 2px 3px rgba(10,0,40,.55))}
.item:has(.ic.bimg){grid-template-columns:48px minmax(0,1fr) auto;gap:12px}

/* New 3D quest icons in Tasks > Today / Weekly only. */
.ic.quest-ic{overflow:visible;}
.ic.quest-ic .quest-pic{display:block;object-fit:contain;width:36px;height:36px;max-width:none;max-height:none;filter:drop-shadow(0 2px 2px rgba(9,4,35,.38));pointer-events:none;}

/* New achievement imagery: the existing purple tile and interaction states remain. */
.ach .ic .ach-ico{display:block;width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(14,5,42,.38))}
.awi .ach-award-ico{display:block;width:40px;height:40px;object-fit:contain}

/* ---------- fixes ---------- */
/* The crystal is its own GPU layer: cracks, bubbles and weak spots no longer repaint it */
#gem{will-change:transform;transform:translateZ(0);backface-visibility:hidden}
/* A talking character stays in front of the pets */
#miner.talk,.spet.talk{z-index:9}

/* ---------- pets move as one whole picture (no cut parts, no seams) ---------- */
.mv{position:absolute;inset:0;animation:var(--t) ease-in-out infinite alternate;will-change:transform}
.mv-flap{animation-name:mflap}.mv-wag{animation-name:mwag}.mv-stomp{animation-name:mstomp}.mv-nibble{animation-name:mnibble}.mv-toss{animation-name:mtoss}
.mv-tilt{animation-name:mtilt;animation-direction:normal}
@keyframes mflap{from{transform:scale(1.03,.97)}to{transform:scale(.9,1.04) translateY(-2%)}}
@keyframes mwag{from{transform:rotate(-3deg) skewX(4deg)}to{transform:rotate(3deg) skewX(-4deg)}}
@keyframes mstomp{from{transform:scale(1.02,.98)}to{transform:scale(.98,1.02)}}
@keyframes mnibble{from{transform:translateY(0) rotate(-1.5deg)}to{transform:translateY(-3%) rotate(1.5deg)}}
@keyframes mtoss{from{transform:rotate(-2deg)}to{transform:rotate(3deg) translateY(-3%)}}
@keyframes mtilt{0%,55%,100%{transform:rotate(0)}66%{transform:rotate(-7deg)}82%{transform:rotate(6deg)}}
.gl2{position:absolute;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;background:radial-gradient(circle,rgba(255,250,170,.9),rgba(255,226,90,.35) 45%,transparent 70%);mix-blend-mode:screen;animation:gco .9s ease-in-out infinite alternate}
@media(prefers-reduced-motion:reduce){.mv,.gl2,.rig{animation:none}}

/* Artwork on the side buttons of the main screen */
.fab-img{display:block;width:min(34px,100%);height:auto;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(10,0,40,.5));pointer-events:none}
.fab .ei{display:block;line-height:0}
.evi-img{display:block;width:48px;height:48px;object-fit:contain}
@media(max-height:460px){.fab-img{width:26px;height:26px}}

/* pet skins */
.skins{margin-top:10px;text-align:left}.skh{display:block;font-size:13px;margin:0 0 6px 2px}
.skg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.sk{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 3px 5px;border-radius:12px;background:rgba(255,255,255,.06);border:2px solid color-mix(in srgb,var(--rc) 45%,transparent);font:inherit;color:inherit;cursor:pointer;min-width:0}
.sk i{display:block;width:100%;aspect-ratio:1;background:center/contain no-repeat;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
.sk.lock i{filter:brightness(.35) saturate(.4)}.sk.na i{filter:brightness(0) opacity(.35)}
.sk.on{border-color:var(--rc);box-shadow:0 0 12px -2px var(--rc);background:color-mix(in srgb,var(--rc) 18%,transparent)}
.skn{font-size:10.5px;line-height:1.15;text-align:center;font-weight:700;color:var(--rc);max-width:100%;min-height:2.3em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.skp{font-size:10.5px;opacity:.85}

/* story chapters */
#story{position:fixed;inset:0;z-index:10000;background:radial-gradient(circle at 50% 40%,#2a1a6e,#07031a 75%);display:grid;place-items:center;animation:stIn .35s ease-out;padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom))}
#story.out{opacity:0;transition:opacity .3s}
@keyframes stIn{from{opacity:0}}
.st-box{position:relative;width:min(94vw,82vh,720px);cursor:pointer;user-select:none}
.st-img{position:relative;aspect-ratio:1;border-radius:18px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 2px rgba(255,255,255,.12)}
.st-img img{display:block;width:100%;height:100%;object-fit:cover}
.st-img img.in{animation:stZoom 6s ease-out forwards}
.st-img .st-next{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
@keyframes stZoom{from{transform:scale(1.06);opacity:.2}12%{opacity:1}to{transform:scale(1)}}
.st-ttl{position:absolute;left:12px;top:12px;padding:6px 12px;border-radius:12px;background:rgba(10,4,30,.62);backdrop-filter:blur(4px);color:#fff;line-height:1.15}
.st-ttl small{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#ffd54a}
.st-ttl b{font:800 15px Unbounded,Onest,sans-serif}
.st-cap{position:absolute;left:10px;right:10px;bottom:10px;padding:12px 16px 14px;border-radius:16px;background:rgba(14,6,40,.82);backdrop-filter:blur(6px);border:2px solid rgba(255,255,255,.14);color:#fff}
.st-cap.sp1{border-color:#ffb02e}.st-cap.sp2{border-color:#d946ef;box-shadow:0 0 22px rgba(217,70,239,.45)}
.st-who{display:block;font:800 13px Unbounded,Onest,sans-serif;color:#ffd54a;margin-bottom:3px}
.sp2 .st-who{color:#f0abfc}.sp2 .st-txt{color:#ffd6f8;font-style:italic}
.st-txt{margin:0;font:600 clamp(14px,2.3vh,19px)/1.35 Onest,sans-serif;min-height:2.7em}
.sp0 .st-txt{font-style:italic;color:#e3dcff}
.st-go{position:absolute;right:14px;bottom:8px;font:800 12px Onest,sans-serif;color:#ffd54a;animation:stB 1s ease-in-out infinite}
@keyframes stB{50%{transform:translateY(3px)}}
.st-dots{display:flex;gap:6px;justify-content:center;margin-top:10px}.st-dots i{width:22px;height:5px;border-radius:3px;background:rgba(255,255,255,.2)}.st-dots i.on{background:#ffd54a}
.st-skip{position:fixed;right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));padding:8px 14px;border-radius:12px;border:0;background:rgba(255,255,255,.14);color:#fff;font:700 13px Onest,sans-serif;cursor:pointer}
@media(prefers-reduced-motion:reduce){.st-img img.in,.st-go{animation:none}}
.st-cap.sp3{border-color:#a7b4c9}.sp3 .st-who{color:#cfd8e6}
.tgl.off{opacity:.55;cursor:default}
.st-cap.sp4{border-color:#a78bfa}.sp4 .st-who{color:#c4b5fd}.st-cap.sp5{border-color:#4ade80}.sp5 .st-who{color:#86efac}.st-cap.sp6{border-color:#c08a4b}.sp6 .st-who{color:#f5c27a}.st-cap.sp7{border-color:#fb923c}.sp7 .st-who{color:#fdba74}
.st-cap.sp8{border-color:#c026d3}.sp8 .st-who{color:#e879f9}.st-cap.sp9{border-color:#f9a8d4}.sp9 .st-who{color:#fbcfe8}.st-cap.sp10{border-color:#f97316}.sp10 .st-who{color:#fdba74}.st-cap.sp11{border-color:#93c5fd}.sp11 .st-who{color:#bfdbfe}.st-cap.sp12{border-color:#6d28d9}.sp12 .st-who{color:#a78bfa}.st-cap.sp13{border-color:#dc2626}.sp13 .st-who{color:#fca5a5}
.st-cap.sp14{border-color:#facc15}.sp14 .st-who{color:#fde047}.st-cap.sp15{border-color:#7dd3fc}.sp15 .st-who{color:#bae6fd}.st-cap.sp16{border-color:#a16207}.sp16 .st-who{color:#fcd34d}.st-cap.sp17{border-color:#ea580c}.sp17 .st-who{color:#fdba74}.st-cap.sp18{border-color:#22c55e}.sp18 .st-who{color:#86efac}
.st-cap.sp19{border-color:#a855f7}.sp19 .st-who{color:#d8b4fe}.st-cap.sp20{border-color:#14b8a6}.sp20 .st-who{color:#5eead4}.st-cap.sp21{border-color:#94a3b8}.sp21 .st-who{color:#cbd5e1}.st-cap.sp22{border-color:#ef4444}.sp22 .st-who{color:#fca5a5}.st-cap.sp23{border-color:#f472b6}.sp23 .st-who{color:#fbcfe8}
.bk-pg{margin:0 0 10px;font:600 13px Onest,sans-serif;color:#e8e2ff;opacity:.9;text-align:center}.sets.book{max-height:52vh;overflow-y:auto;padding-right:2px}.tgl.new{background:linear-gradient(135deg,rgba(255,201,74,.28),rgba(255,122,69,.22));border-color:#ffc94a}
.st-cap.sp24{border-color:#7dd3fc}.sp24 .st-who{color:#e0f2fe}.st-cap.sp25{border-color:#a5b4fc}.sp25 .st-who{color:#e0e7ff}
.st-cap.sp26{border-color:#fcd34d}.sp26 .st-who{color:#fde68a}
.ico.ri{object-fit:contain;width:1.32em;height:1.32em;vertical-align:-.3em;pointer-events:none;-webkit-user-drag:none;user-select:none}
.ico.ri-comet{width:1.1em;height:1.6em;vertical-align:-.45em}
.drop .ico.ri{width:40px;height:40px;vertical-align:0}.drop.big .ico.ri{width:56px;height:56px}
.met .ico.ri{width:48px;height:48px;vertical-align:0}.met .ico.ri-comet{width:46px;height:82px;margin-top:-30px}
.met.dia .ico.ri{width:44px;height:44px}
.ic .ico.ri,.ic .reward-icon{width:30px;height:30px;vertical-align:0;object-fit:contain}
.goal-ico.ri,.gi .ico.ri{width:26px;height:26px}
.ic.pl{position:relative}.ic.pl .pln{position:absolute;right:-5px;bottom:-5px;min-width:17px;height:17px;padding:0 3px;border-radius:9px;background:#2a1550;border:1px solid rgba(255,255,255,.35);font:800 10px/15px Onest,sans-serif;font-style:normal;color:#fff;text-align:center}
.cart .ico.ri{width:58px;height:58px;vertical-align:0}.rock .ico.ri{width:46px;height:46px;vertical-align:0}
#gear .ico.ri{width:22px;height:22px}
.gold .gold-img{width:118%;height:118%;margin:-9%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 0 10px #ffd54a)}
button.gold{background:radial-gradient(circle,rgba(255,225,110,.6),rgba(255,180,40,0) 70%);box-shadow:none}
#fStory .ico.ri{width:34px;height:34px;vertical-align:0;display:block}
.tgl .ico.ri{width:24px;height:24px;vertical-align:-.35em;margin-right:4px}
.m-ic .ico.ri{width:64px;height:64px}
/* v26 tutorial: Rudy's cloud + a small finger that glides */
#hint{transition:left .55s cubic-bezier(.3,.7,.3,1),top .55s cubic-bezier(.3,.7,.3,1)}
#hint.solo #hintT{display:none}
#hint .hand{font-size:30px}
#hint .hand .ico{width:30px;height:30px}
#sayA .bub.tut{bottom:2px;max-width:min(230px,58vw);font:700 13px/1.3 Onest,sans-serif;padding:8px 11px;border:2px solid #ffc94a;box-shadow:0 0 0 3px rgba(255,201,74,.25),0 6px 16px rgba(10,0,40,.45);animation:bub .3s ease-out;z-index:9}
#sayA .bub.tut::before,#sayA .bub.tut::after{border:2px solid #ffc94a}
#sayA .bub.tut b{display:block;font:800 10px/1 Onest,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#d97706;margin-bottom:3px}
@media(prefers-reduced-motion:reduce){#hint{transition:none}}
#hint .hand .ico,#hint .hand .ico.ri{width:42px;height:42px;filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 12px #ffc94a)}

/* v27: book guardians replace the crystal during guardian fights */
#bossArt{position:absolute;left:-14%;width:128%;bottom:-2%;height:auto;max-height:118%;object-fit:contain;object-position:50% 100%;pointer-events:none;z-index:3;filter:drop-shadow(0 0 14px rgba(217,70,239,.55)) drop-shadow(0 10px 14px rgba(0,0,0,.45));transform-origin:50% 90%}
.bart #bossArt{display:block;animation:baIn .55s cubic-bezier(.2,1.4,.4,1) both,baBreath 2.6s 0.6s ease-in-out infinite}
.bart #gem,.bart #uSheen,.bart #umbrax,.bart #bossFace,.bart #cracks{visibility:hidden!important}
.bart.bout #bossArt{animation:baOut .5s ease-in forwards}
@keyframes baIn{0%{opacity:0;transform:scale(.4) translateY(20%)}100%{opacity:1;transform:none}}
@keyframes baBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.035,.975)}}
@keyframes baOut{to{opacity:0;transform:scale(1.25);filter:brightness(3) blur(4px)}}
.low #bossArt{filter:none}.low .bart #bossArt,.lite .bart #bossArt{animation:none}

/* v28: level badge — the number in a circle above a small "LEVEL" plate */
.lvl{display:flex;align-items:flex-start;gap:7px;height:34px;position:relative;z-index:3}
.lv-badge{display:flex;flex-direction:column;align-items:center;flex:0 0 auto;width:54px;margin-top:5px}
.lv-c{position:relative;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto}
.lv-c b{position:relative;font:900 17px/1 Unbounded,Onest,sans-serif;color:#fff;letter-spacing:-.5px;text-shadow:0 2px 3px rgba(0,0,0,.45)}
.lvl.big .lv-c b{font-size:14px}
.lv-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);display:none}
.lv-ring circle{fill:none;stroke-width:3.4}
.lv-tr{stroke:rgba(255,255,255,.16)}
.lv-pr{stroke:#ffd54a;stroke-linecap:round;stroke-dasharray:0 113.1;transition:stroke-dasharray .5s ease;filter:drop-shadow(0 0 2px rgba(255,213,74,.8))}
.lvl.grd .lv-pr{stroke:#ff5a7a;filter:drop-shadow(0 0 3px #ff2d55)}
.lv-t{margin-top:-7px;position:relative;padding:2px 7px 2px;border-radius:5px;font:800 8.5px/1.15 Unbounded,Onest,sans-serif;letter-spacing:.6px;text-transform:uppercase;color:#fff;white-space:nowrap}
.lvl small{margin-top:6px;max-width:42vw;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.6)}
/* A — gold coin */
.lvA .lv-c{background:radial-gradient(circle at 35% 30%,#5b3cc4,#24105e 70%);box-shadow:0 0 0 3px #ffcf4a,0 0 0 5px #9a5b0a,0 4px 10px rgba(0,0,0,.45),inset 0 -4px 8px rgba(0,0,0,.35)}
.lvA .lv-t{background:linear-gradient(#ffdf6e,#f0a020);color:#4a2400;box-shadow:0 0 0 1.5px #9a5b0a,0 2px 4px rgba(0,0,0,.35);text-shadow:none}
/* B — crystal, follows the biome colours */
.lvB .lv-c{background:radial-gradient(circle at 32% 28%,#fff8 0,transparent 30%),linear-gradient(145deg,var(--g1),var(--g2));box-shadow:0 0 0 2.5px rgba(255,255,255,.85),0 0 14px var(--g2),0 4px 10px rgba(0,0,0,.45)}
.lvB .lv-t{background:rgba(14,6,40,.82);border:1.5px solid var(--g1);color:var(--g1);box-shadow:0 2px 6px rgba(0,0,0,.4)}
/* C — dark badge with a ring that fills on the way to the guardian */
.lvC .lv-c{background:radial-gradient(circle at 35% 30%,#3a2a6e,#120830 75%);box-shadow:0 3px 10px rgba(0,0,0,.5)}
.lvC .lv-ring{display:block}
.lvC .lv-t{background:linear-gradient(90deg,#8b3dff,#ff4fa3);box-shadow:0 2px 5px rgba(0,0,0,.4)}
@media(max-height:640px){.lv-c{width:38px;height:38px}.lv-c b{font-size:14px}.lv-badge{width:46px}.lvl{height:28px}}

/* v28: Rudy skins */
.pet.skin .pe{height:74px}
.pet.skin .pe .spr{background-size:contain;background-position:50% 100%}
.pet.skin.sbuy .pe .spr{filter:saturate(.85) brightness(.92)}
.pet.skin .sk-b{position:absolute;top:-4px;right:-4px;font:800 8.5px/1 Unbounded,Onest,sans-serif;font-style:normal;padding:3px 5px;border-radius:6px;color:#fff;text-transform:uppercase;letter-spacing:.3px;box-shadow:0 2px 4px rgba(0,0,0,.35)}
.pet.skin.sdm .sk-b{background:linear-gradient(135deg,#5cc8ff,#8b5cff)}
.pet.skin.sad .sk-b{background:linear-gradient(135deg,#ff9f1c,#ff4fa3)}
.pet.skin.sdm small,.pet.skin.sad small{color:#ffe08a;font-weight:800}
.sk-prev{width:150px;height:150px;margin:0 auto 6px;position:relative}
.sk-prev .spr{position:absolute;inset:0;background-size:contain;background-position:50% 100%;background-repeat:no-repeat}

/* Telegram: keep the HUD below Telegram's own header in fullscreen */
:root{--safe-t:max(env(safe-area-inset-top,0px),var(--tg-top,0px))}
.tgme{outline:2px solid #ffcf4a;outline-offset:-2px}
.tgst .pr{white-space:nowrap}