/* Idleora Gem Mine - Belink style. Mobile-first; iPhone safe areas; no hover dependency. */
:root{
  --bg:#0a0614; --bg2:#120a24; --ink:#efeafc; --mut:#a79fc4; --dim:#6f6890;
  --line:rgba(255,255,255,.09); --card:rgba(255,255,255,.045); --card2:rgba(255,255,255,.075);
  --pink:#ec4899; --vio:#7c3aed; --gold:#fcd34d; --ok:#34d399;
  --g1:#f5f3ff; --g2:#c4b5fd; --g3:#8b5cf6; --g4:#5b21b6; --glow:rgba(167,139,250,.55);
  --r:18px; --ease:cubic-bezier(.2,.8,.2,1);
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--ink)}
body{font:15px/1.45 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;overflow:hidden;overscroll-behavior:none;
  background:radial-gradient(120% 80% at 50% -10%,#2a0f4a 0%,transparent 55%),radial-gradient(90% 60% at 100% 100%,rgba(236,72,153,.13),transparent 60%),var(--bg)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-user-select:none;user-select:none}
button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
[hidden]{display:none!important}
h1,h2,h3,.brand b,.gems,.tab,.row-name,.tier-chip{font-family:"Inter Tight",Inter,system-ui,sans-serif}

.app{height:100%;height:100dvh;display:flex;flex-direction:column;max-width:1240px;margin:0 auto;
  padding:calc(var(--sat) + 10px) max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left))}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 2px 10px}
.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.brand img{width:34px;height:34px;border-radius:10px;box-shadow:0 4px 18px rgba(236,72,153,.35)}
.brand-txt{display:flex;flex-direction:column;line-height:1.1}
.brand b{font-size:19px;font-weight:800;letter-spacing:-.01em}
.brand small{font-size:11.5px;color:var(--mut);letter-spacing:.02em}
.top-actions{display:flex;gap:8px}
.icon-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--card);display:grid;place-items:center}
.icon-btn svg{width:21px;height:21px;fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icon-btn svg .fill{fill:var(--ink);stroke:none}
.icon-btn .snd-off{display:none}
.icon-btn.muted .snd-on{display:none}.icon-btn.muted .snd-off{display:inline}
.icon-btn:active{transform:scale(.94)}

.layout{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px}

/* ---------- stage ---------- */
.stage{position:relative;flex:0 0 auto;height:100%;min-height:0;border-radius:24px;overflow:hidden;
  border:1px solid var(--line);
  background:radial-gradient(60% 55% at 50% 58%,var(--glow) 0%,transparent 70%),linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  display:flex;flex-direction:column;align-items:center;-webkit-user-select:none;user-select:none;transition:background .8s}
#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.stage-head{width:100%;padding:12px 14px 0;z-index:2}
.tier-row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12.5px}
.tier-chip{font-weight:700;font-size:12.5px;padding:3px 10px;border-radius:99px;color:#14091f;background:linear-gradient(135deg,var(--g1),var(--g2));letter-spacing:.02em}
.tier-next{color:var(--mut)}
.bar{height:6px;border-radius:9px;background:rgba(255,255,255,.08);margin-top:8px;overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,var(--pink),var(--g2));transition:width .35s var(--ease)}
.counter{text-align:center;margin-top:10px;z-index:2}
.gems{display:flex;align-items:center;justify-content:center;gap:8px;font-size:clamp(34px,9vw,46px);font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.gem-ico{width:.62em;height:.62em;fill:var(--g2);stroke:none}
.gem-ico .ln{fill:none;stroke:rgba(20,8,40,.45);stroke-width:1.2}
.rate{color:var(--mut);font-size:13.5px;margin-top:6px;font-variant-numeric:tabular-nums;display:flex;gap:8px;justify-content:center;align-items:center}
.rate #gps{color:var(--ink);font-weight:600}
.frenzy{font-size:11px;font-weight:800;color:#1b1203;background:var(--gold);border-radius:99px;padding:2px 8px;animation:pulse 1s infinite}
.crystal{position:relative;z-index:2;flex:1;min-height:0;width:min(64vw,250px);display:grid;place-items:center;touch-action:none;margin-top:4px}
.gem-svg{width:100%;max-height:100%;aspect-ratio:1;filter:none;animation:float 4.5s ease-in-out infinite;transition:transform .09s var(--ease)}
.crystal.hit .gem-svg{transform:scale(.9) rotate(-2deg)}
.f{stroke:rgba(255,255,255,.18);stroke-width:1;transition:fill .8s}
.f1{fill:var(--g1)}.f2{fill:var(--g2)}.f3{fill:var(--g3)}.f4{fill:var(--g4)}.f5{fill:color-mix(in srgb,var(--g1) 55%,var(--g2))}
.edge{fill:none;stroke:rgba(255,255,255,.55);stroke-width:2;stroke-linejoin:round}
.glint{stroke:#fff;stroke-width:4;stroke-linecap:round;opacity:.85}
.halo{position:absolute;width:78%;aspect-ratio:1;border-radius:50%;border:2px solid color-mix(in srgb,var(--g2) 60%,transparent);opacity:0;pointer-events:none}
.crystal.hit .halo{animation:ring .5s var(--ease)}
.spark{position:absolute;width:14px;height:14px;background:radial-gradient(circle,#fff 0 20%,transparent 60%);pointer-events:none;animation:twinkle 2.6s infinite}
.spark::before,.spark::after{content:"";position:absolute;left:50%;top:50%;width:2px;height:14px;margin:-7px 0 0 -1px;background:#fff;border-radius:2px}
.spark::after{transform:rotate(90deg)}
.s1{left:22%;top:22%}.s2{right:20%;top:46%;animation-delay:1.3s}
.stage-foot{display:flex;gap:8px;z-index:2;margin:2px 0 4px}
.pill{font-size:12px;padding:4px 10px;border-radius:99px;background:rgba(0,0,0,.28);border:1px solid var(--line);color:var(--mut);font-variant-numeric:tabular-nums}
.pill.combo.hot{color:#1b1203;background:var(--gold);border-color:transparent;font-weight:700}
.hint{z-index:2;font-size:13px;color:var(--ink);background:rgba(236,72,153,.14);border:1px solid rgba(236,72,153,.32);
  padding:6px 12px;border-radius:12px;margin:0 12px 12px;text-align:center;max-width:94%}
.geode{position:absolute;z-index:4;width:66px;height:66px;filter:drop-shadow(0 0 16px rgba(252,211,77,.85));animation:bob 1.6s ease-in-out infinite;touch-action:none}
.geode svg{width:100%;height:100%}

/* ---------- panel ---------- */
.panel{flex:1;min-height:0;display:flex;flex-direction:column;border-radius:24px 24px 0 0;border:1px solid var(--line);border-bottom:0;background:rgba(255,255,255,.03)}
.tabs{display:flex;gap:4px;padding:6px;border-bottom:1px solid var(--line)}
.tab{position:relative;flex:1;padding:10px 4px;border-radius:12px;font-weight:600;font-size:14px;color:var(--mut)}
.tab.on{color:var(--ink);background:var(--card2)}
.dot{position:absolute;top:8px;right:calc(50% - 40px);width:7px;height:7px;border-radius:50%;background:var(--pink);box-shadow:0 0 8px var(--pink)}
.buybar{display:flex;align-items:center;justify-content:space-between;padding:8px 12px 2px;color:var(--mut);font-size:13px}
.seg{display:flex;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:2px}
.seg button{padding:5px 12px;border-radius:8px;font-size:13px;font-weight:600;color:var(--mut)}
.seg button.on{background:var(--card2);color:var(--ink)}
.list{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:8px 10px calc(84px + var(--sab))}
.sec-title{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:12px 4px 6px}

.row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px;margin-bottom:8px;border-radius:16px;
  background:var(--card);border:1px solid var(--line);transition:transform .12s var(--ease),border-color .2s,background .2s}
.row:active{transform:scale(.985)}
.row.can{border-color:rgba(236,72,153,.45);background:linear-gradient(90deg,rgba(236,72,153,.10),rgba(124,58,237,.06))}
.row.no{opacity:.62}
.row.locked{opacity:.45}
.row.coach{animation:coach 1.3s infinite}
.row-ico{flex:0 0 44px;height:44px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(236,72,153,.22),rgba(124,58,237,.22));font-size:22px}
.row-ico svg{width:26px;height:26px}
.row-main{flex:1;min-width:0}
.row-name{display:flex;align-items:baseline;gap:6px;font-weight:700;font-size:15px}
.row-name em{font-style:normal;font-size:12px;color:var(--mut);font-weight:600}
.row-desc{font-size:12.5px;color:var(--mut);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-desc b{color:var(--ink);font-weight:600}
.mile{height:4px;border-radius:4px;background:rgba(255,255,255,.08);margin-top:6px;overflow:hidden}
.mile i{display:block;height:100%;background:linear-gradient(90deg,var(--vio),var(--pink));border-radius:4px}
.row-cost{flex:0 0 auto;text-align:right;font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;display:flex;flex-direction:column;align-items:flex-end}
.row-cost small{font-size:11px;color:var(--mut);font-weight:500}
.row.no .row-cost{color:var(--mut)}
.row.done{opacity:.55}

.card{padding:14px;border-radius:16px;background:var(--card);border:1px solid var(--line);margin-bottom:10px}
.card h3{font-size:16px;margin-bottom:4px}
.card p{color:var(--mut);font-size:13px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:14px;font-weight:700;font-size:15px;
  background:linear-gradient(135deg,var(--pink),var(--vio));color:#fff;box-shadow:0 8px 24px rgba(236,72,153,.3)}
.btn:active{transform:scale(.97)}
.btn.ghost{background:var(--card2);box-shadow:none;color:var(--ink)}
.btn[disabled]{opacity:.45;pointer-events:none}
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.tier{border-radius:14px;padding:10px 4px 8px;text-align:center;background:var(--card);border:1px solid var(--line);font-size:11.5px;color:var(--mut)}
.tier svg{width:34px;height:34px;display:block;margin:0 auto 4px}
.tier.got{color:var(--ink);border-color:rgba(252,211,77,.35)}
.tier.cur{box-shadow:0 0 0 2px var(--gold) inset}
.tier.lock svg{filter:grayscale(1) brightness(.45)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stat{padding:12px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.stat b{display:block;font-size:17px;font-variant-numeric:tabular-nums}
.stat span{font-size:12px;color:var(--mut)}
.links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* ---------- toasts + modal ---------- */
.toasts{position:fixed;left:50%;top:calc(var(--sat) + 64px);transform:translateX(-50%);z-index:50;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(92vw,420px)}
.toast{padding:10px 16px;border-radius:14px;background:#1b1028;border:1px solid rgba(252,211,77,.35);backdrop-filter:none;-webkit-backdrop-filter:none;
  font-size:14px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.45);animation:toast 2.8s var(--ease) forwards;text-align:center}
.toast small{display:block;font-weight:500;color:var(--mut);font-size:12.5px}
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;background:rgba(5,2,12,.88);backdrop-filter:none;-webkit-backdrop-filter:none;animation:fade .2s}
.sheet{width:min(420px,100%);border-radius:24px;padding:24px 22px 20px;background:linear-gradient(180deg,#1b0f33,#120a24);border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 80px rgba(0,0,0,.6);text-align:center;animation:pop .28s var(--ease)}
.m-art{height:112px;display:grid;place-items:center;margin-bottom:8px}
.m-art svg{height:104px;width:auto}
.sheet h2{font-size:22px;font-weight:800;letter-spacing:-.01em;margin-bottom:6px}
.m-body{color:var(--mut);font-size:14.5px}
.m-body b{color:var(--ink)}
.m-big{font-family:"Inter Tight",Inter,sans-serif;font-size:30px;font-weight:800;color:var(--gold);margin:8px 0 2px}
.m-dots{display:flex;gap:6px;justify-content:center;margin:16px 0 4px}
.m-dots i{width:7px;height:7px;border-radius:9px;background:rgba(255,255,255,.2);transition:width .25s}
.m-dots i.on{width:22px;background:var(--pink)}
.m-actions{display:flex;gap:10px;justify-content:center;margin-top:14px}
.m-actions .btn{flex:1}

@keyframes float{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes ring{0%{opacity:.9;transform:scale(.7)}100%{opacity:0;transform:scale(1.25)}}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4)}45%{opacity:1;transform:scale(1)}60%{opacity:0}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-8px) rotate(6deg)}}
@keyframes pulse{50%{opacity:.6}}
@keyframes coach{0%,100%{box-shadow:0 0 0 0 rgba(236,72,153,.0)}50%{box-shadow:0 0 0 4px rgba(236,72,153,.35)}}
@keyframes toast{0%{opacity:0;transform:translateY(-8px)}10%,82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(8px)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-iteration-count:1!important}}

/* ---------- desktop ---------- */
@media (min-width:900px){
  body{overflow:hidden}
  .app{padding-top:18px}
  .layout{flex-direction:row;gap:18px;padding-bottom:18px}
  .stage{flex:1.1;height:auto;min-height:0}
  .crystal{width:min(34vw,330px)}
  .panel{flex:1;border-radius:24px;border-bottom:1px solid var(--line)}
  .list{padding-bottom:20px}
  .gems{font-size:54px}
}
@media (max-height:700px) and (max-width:899px){.stage{min-height:0;height:100%}.hint{font-size:12px;margin-bottom:8px}}

/* ================= v4: endless gems, shop, ranks, chat ================= */
.gem-art{display:grid;place-items:center;width:100%;height:100%;min-height:0}
.gem-art .gem-svg{filter:none}
.crystal.spawn .gem-art{animation:spawn .45s var(--ease)}
.crystal.shatter .gem-art{animation:shatter .26s ease-in forwards}
.cracks .ck{opacity:0;transition:opacity .2s}
.crystal.c1 .ck1,.crystal.c2 .ck2,.crystal.c3 .ck3{opacity:1}
.crystal.c3 .gem-svg{animation:float 4.5s ease-in-out infinite}
.gsp{animation:twinkle 2.2s infinite;transform-box:fill-box;transform-origin:center}
.crystal[data-rar="4"] .gem-art::before,.crystal[data-rar="5"] .gem-art::before{content:"";position:absolute;width:86%;aspect-ratio:1;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(252,211,77,.55),rgba(244,114,182,.15) 42%,transparent 70%);filter:none;animation:none;opacity:.42}
.crystal[data-rar="5"] .gem-art::before{background:conic-gradient(#f472b6,#fbbf24,#34d399,#60a5fa,#c084fc,#f472b6);opacity:.55}
[data-r="0"]{--rc:#cbd5e1}[data-r="1"]{--rc:#6ee7b7}[data-r="2"]{--rc:#60a5fa}[data-r="3"]{--rc:#c084fc}[data-r="4"]{--rc:#fbbf24}[data-r="5"]{--rc:#f472b6}
.gem-info{z-index:2;width:min(86%,330px);margin-top:2px}
.gem-line{display:flex;align-items:center;justify-content:center;gap:7px;font-size:13px;min-width:0}
.rar{flex:0 0 auto;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#0b0616;background:var(--rc);padding:2px 7px;border-radius:99px}
.gname{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hp{height:7px;border-radius:9px;background:rgba(255,255,255,.1);margin-top:5px;overflow:hidden;border:1px solid rgba(255,255,255,.06)}
.hp i{display:block;height:100%;width:100%;border-radius:9px;background:linear-gradient(90deg,var(--gold),#fb923c,var(--pink));transition:width .2s linear}
.boosts{z-index:2;display:flex;flex-wrap:wrap;justify-content:center;gap:4px;pointer-events:none;margin-top:4px}
.boosts:empty{display:none}
.pill.boost{color:#1b1203;background:linear-gradient(135deg,#fde68a,#fcd34d);border-color:transparent;font-weight:700;font-size:11px;padding:3px 8px}
i.cur{display:inline-block;flex:0 0 auto;width:13px;height:13px;border-radius:50%;vertical-align:-2px;margin-right:3px}
i.cur.co{background:radial-gradient(circle at 35% 30%,#fff7c2 0 18%,#fbbf24 45%,#b45309 100%);box-shadow:0 0 0 1px rgba(120,53,15,.5) inset}
i.cur.bg{border-radius:3px;transform:rotate(45deg) scale(.82);background:linear-gradient(135deg,#f0f9ff,#60a5fa 50%,#6366f1);box-shadow:0 0 6px rgba(96,165,250,.7)}
.wallet-chip{height:40px;padding:0 11px;border-radius:12px;border:1px solid var(--line);background:var(--card);display:flex;align-items:center;gap:3px;font-weight:700;font-size:13px;font-variant-numeric:tabular-nums}
.wallet-chip span{margin-right:7px}.wallet-chip span:last-child{margin-right:0}
.icon-btn{position:relative}
.icon-btn.on{background:var(--card2);border-color:rgba(236,72,153,.5)}
.dot-btn{top:6px;right:6px}
.toast[data-r="-1"]{border-color:rgba(96,165,250,.5)}
.toast[data-r="3"],.toast[data-r="4"],.toast[data-r="5"]{border-color:var(--rc);box-shadow:0 0 24px color-mix(in srgb,var(--rc) 45%,transparent)}
.toast[data-r="5"]{background:linear-gradient(135deg,rgba(80,20,70,.95),rgba(30,20,70,.95))}

/* shop */
.wallet-card{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:center;padding:12px;border-radius:16px;margin:4px 0 8px;
  background:linear-gradient(135deg,rgba(252,211,77,.10),rgba(96,165,250,.10));border:1px solid rgba(252,211,77,.25)}
.wallet-card b{display:flex;align-items:center;font-size:20px;font-variant-numeric:tabular-nums}
.wallet-card span{font-size:11.5px;color:var(--mut)}
.btn.sm{padding:8px 12px;font-size:13px;border-radius:11px}
.btn.gift{padding:10px 12px;font-size:13.5px;animation:coach 1.4s infinite}
.shop-note{font-size:12px;color:var(--mut);margin:2px 4px 8px;line-height:1.5}
.shop-note span{color:var(--rc);font-weight:600;white-space:nowrap}
.row-desc.wrap{white-space:normal}
.shop-row{cursor:default}
.buy2{display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.price{flex:0 0 auto;min-width:72px;display:inline-flex;align-items:center;justify-content:center;padding:8px 11px;border-radius:11px;font-weight:700;font-size:13.5px;
  background:var(--card2);border:1px solid var(--line);font-variant-numeric:tabular-nums}
.price.can{background:linear-gradient(135deg,var(--pink),var(--vio));border-color:transparent;color:#fff}
.price.use{background:rgba(52,211,153,.16);border-color:rgba(52,211,153,.5);color:#a7f3d0}
.price.owned{color:var(--mut);background:none}
.price.soon{color:var(--mut)}
.price[disabled]{opacity:.45}
.online-card .links{margin-top:10px}
.warn{color:#fca5a5!important;margin-top:8px}
/* ranks */
.seg.wide{display:flex;margin:4px 0 10px}.seg.wide button{flex:1;padding:8px 6px}
ol.ranks{list-style:none;margin:0 0 6px}
ol.ranks li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:13px;background:var(--card);border:1px solid var(--line);margin-bottom:6px;font-variant-numeric:tabular-nums}
ol.ranks li.me{border-color:rgba(252,211,77,.55);background:rgba(252,211,77,.08)}
ol.ranks .rk{width:28px;text-align:center;font-weight:800;color:var(--mut)}
ol.ranks .nm{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
ol.ranks small,.acct small{color:var(--dim);font-weight:500;margin-left:2px}
.acct p{margin-bottom:6px;color:var(--ink)!important;font-size:13.5px!important}
.acct p.small{color:var(--mut)!important;font-size:12px!important}
.acct code{font:700 14px ui-monospace,Menlo,monospace;letter-spacing:.06em;color:var(--gold);background:rgba(0,0,0,.3);padding:2px 7px;border-radius:7px}
.link{color:#f9a8d4;font-weight:600;font-size:13px;text-decoration:underline;text-underline-offset:3px;padding:2px 4px}
/* codex */
.codex .rc{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:8px}
.codex .rc span{text-align:center;font-size:10px;color:var(--rc);line-height:1.2}
.codex .rc b{display:block;font-size:16px;color:var(--ink)}
.fams{display:grid;grid-template-columns:repeat(16,1fr);gap:4px;margin-top:8px}
.fams i{aspect-ratio:1;border-radius:3px;transform:rotate(45deg) scale(.78);background:rgba(255,255,255,.07)}
.fams i.open{background:rgba(255,255,255,.18)}
.fams i.on{background:hsl(var(--h),var(--s),var(--l));box-shadow:0 0 6px hsl(var(--h),var(--s),var(--l))}
.finds{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.find{text-align:center;padding:8px 4px;border-radius:14px;background:var(--card);border:1px solid var(--line);font-size:11px;color:var(--mut);line-height:1.25}
.find .mini{width:52px;height:52px;display:block;margin:0 auto 3px}
.find b{display:block;color:var(--rc);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em}
/* modal input */
.m-input{width:100%;margin-top:14px;padding:12px 14px;border-radius:13px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.35);color:var(--ink);font:600 16px Inter,sans-serif;text-align:center;outline:none}
.m-input:focus{border-color:var(--pink)}
.m-err{color:#fca5a5;font-size:13px;min-height:18px;margin-top:6px}
/* chat */
.chat{position:fixed;z-index:2147483000;right:max(14px,calc((100vw - 1240px)/2 + 14px));top:calc(var(--sat) + 62px);bottom:18px;width:380px;display:flex;flex-direction:column;
  border-radius:22px;background:linear-gradient(180deg,rgba(30,16,56,.97),rgba(16,9,32,.97));border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 80px rgba(0,0,0,.6);
  backdrop-filter:none;-webkit-backdrop-filter:none;animation:none;overflow:hidden}
.chat-head{display:flex;align-items:center;gap:10px;padding:10px 10px 6px 16px}
.chat-head b{font:800 17px "Inter Tight",Inter,sans-serif}
.chat-head span{flex:1;font-size:12px;color:var(--ok)}
.chat-head .icon-btn{width:34px;height:34px}
.chat-rooms{margin:0 10px 6px!important}
.chat-rooms button{font-size:12.5px}
.room-bar{display:flex;gap:6px;padding:0 10px 6px}
.room-bar input,.chat-form input{flex:1;min-width:0;padding:9px 12px;border-radius:11px;border:1px solid var(--line);background:rgba(0,0,0,.3);color:var(--ink);font:500 15px Inter,sans-serif;outline:none}
.room-bar input{text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.chat-list{flex:1;min-height:0;overflow-y:auto;padding:6px 12px;overscroll-behavior:contain}
.chat-empty{color:var(--mut);font-size:13px;text-align:center;padding:30px 10px}
.msg{padding:7px 10px;border-radius:13px;background:var(--card);margin-bottom:6px;max-width:92%}
.msg.mine{margin-left:auto;background:rgba(236,72,153,.14)}
.mh{display:flex;align-items:center;gap:6px;font-size:11.5px}
.mh b{color:#c4b5fd;font-weight:700}
.msg.mine .mh b{color:#f9a8d4}
.mh time{color:var(--dim)}
.mact{margin-left:auto;padding:0 6px;color:var(--mut);font-size:15px;line-height:1}
.msg p{font-size:14px;word-wrap:break-word;overflow-wrap:anywhere;unicode-bidi:plaintext}
.chat-note{font-size:11.5px;color:var(--dim);padding:2px 14px 4px}
.chat-note.err{color:#fca5a5}
.chat-form{display:flex;gap:6px;padding:4px 10px calc(10px + var(--sab))}
/* skins */
body[data-skin="aurora"] .stage{background:radial-gradient(60% 55% at 50% 58%,var(--glow) 0%,transparent 70%),linear-gradient(180deg,rgba(16,185,129,.20),rgba(56,189,248,.10) 50%,rgba(124,58,237,.12))}
body[data-skin="obsidian"] .stage{background:radial-gradient(60% 55% at 50% 58%,var(--glow) 0%,transparent 70%),radial-gradient(80% 50% at 50% 110%,rgba(249,115,22,.35),transparent 70%),linear-gradient(180deg,#0b0a0f,#16110f)}
body[data-skin="frost"] .stage{background:radial-gradient(60% 55% at 50% 58%,var(--glow) 0%,transparent 70%),linear-gradient(180deg,rgba(186,230,253,.18),rgba(14,116,144,.10))}
body[data-skin="nebula"] .stage{background:radial-gradient(60% 55% at 50% 58%,var(--glow) 0%,transparent 70%),radial-gradient(40% 30% at 20% 30%,rgba(236,72,153,.25),transparent),radial-gradient(40% 30% at 80% 70%,rgba(99,102,241,.3),transparent),#0c0618}
body[data-skin="royal"] .stage{background:radial-gradient(60% 55% at 50% 58%,var(--glow) 0%,transparent 70%),linear-gradient(180deg,rgba(252,211,77,.16),rgba(120,53,15,.18));border-color:rgba(252,211,77,.4)}
@keyframes spawn{from{opacity:0;transform:scale(.55) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes shatter{to{opacity:0;transform:scale(1.35);filter:blur(3px) brightness(2)}}
@keyframes shake{0%,100%{rotate:0deg}25%{rotate:-1.2deg}75%{rotate:1.2deg}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:899px){
  .stage{height:100%;min-height:0}
  .chat{left:0;right:0;bottom:0;top:auto;width:auto;height:min(80dvh,640px);border-radius:22px 22px 0 0;border-bottom:0}
}
@media (max-width:520px){
  .tabs{gap:2px;padding:5px}
  .tab{font-size:12px;padding:9px 1px;border-radius:10px;letter-spacing:-.01em}
  .dot{right:4px;top:5px}
  .brand-txt small{display:none}
  .top-actions{gap:6px}
  .icon-btn{width:38px;height:38px}
  .wallet-chip{height:38px;padding:0 9px;font-size:12.5px}
  .finds{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:370px){#btnSound{display:none}}
@media (max-height:700px) and (max-width:899px){.stage{min-height:0;height:100%}}
.wallet-chip{position:relative}
.wallet-chip.pop{animation:chipPop .5s var(--ease)}
.wallet-chip.pop::after{content:attr(data-pop);position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:4px;white-space:nowrap;font-size:12px;font-weight:800;color:#1b1203;
  background:var(--gold);padding:2px 8px;border-radius:99px;animation:popUp 1.2s var(--ease) forwards;pointer-events:none;z-index:5}
@keyframes chipPop{40%{transform:scale(1.12)}}
@keyframes popUp{0%{opacity:0;translate:0 -6px}15%{opacity:1;translate:0 0}75%{opacity:1}100%{opacity:0;translate:0 6px}}
.modal{z-index:2147483100}.toasts{z-index:2147483200}

/* v4.1 polish: shards label, chat clears floating site buttons */
.shard-ico{width:.5em;height:.62em}
.counter{position:relative;z-index:4}
body.chat-open .bks-fab,body.chat-open .bks-ov,body.chat-open .bo-gear{display:none!important}

/* appshell: one screen, fixed frame, no blur shake, in-app back/forward */
html,body{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;overflow:hidden!important;overscroll-behavior:none!important}
.app{position:fixed!important;inset:0!important;max-width:none!important;width:auto!important;height:auto!important;margin:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;
  padding:calc(var(--sat) + 6px) max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left))!important}
.layout{position:relative!important;flex:1 1 auto!important;min-height:0!important;display:block!important;gap:0!important;padding:0!important}
.layout>.screen{position:absolute!important;inset:0!important;display:none!important;min-height:0!important;height:auto!important;max-height:none!important;border-radius:18px!important}
.layout>.screen.on{display:flex!important}
.stage{min-height:0!important;height:100%!important;flex:none!important}
.panel{height:100%!important;border-bottom:1px solid var(--line)!important;border-radius:18px!important}
.panel.screen.on,.chat.screen.on{flex-direction:column}
.stage.screen.on{flex-direction:column;align-items:center}
.buybar{display:none!important}
.panel[data-kind="miners"] .buybar{display:flex!important}
.list{padding:8px 10px 12px!important}
.top{gap:6px;padding:0 0 6px;flex-wrap:nowrap;min-width:0}
.nav-btn{width:36px;height:36px;flex:0 0 36px;border-radius:12px}
.nav-btn svg{width:20px;height:20px}
.nav-btn[disabled]{opacity:.32}
.brand{flex:1 1 auto;min-width:0;gap:8px;text-align:start}
.brand img{width:28px;height:28px;flex:0 0 28px}
.brand-txt{min-width:0}
.brand b,.brand small{display:block!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.brand b{font-size:15px}
.brand small{font-size:11px}
.top-actions{gap:4px;align-items:center;flex:0 1 auto;min-width:0}
.top-actions .icon-btn{width:36px;height:36px;flex:0 0 36px}
.wallet-chip{height:36px;max-width:34vw;padding:0 8px;font-size:12px;min-width:0}
.wallet-chip span{overflow:hidden;text-overflow:ellipsis}
.dock{flex:0 0 auto;display:flex;gap:2px;padding:6px 0 calc(6px + var(--sab))}
.dock button{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  padding:7px 2px 6px;border-radius:14px;color:var(--mut);font:700 10.5px/1.15 "Inter Tight",Inter,sans-serif;letter-spacing:-.02em}
.dock button>span{font-size:15px;line-height:1}
.dock button.on{color:var(--ink);background:var(--card2)}
.dock .dot{top:3px;right:calc(50% - 18px)}
.more{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:8px;padding:12px 10px calc(12px + var(--sab))}
.more-row{display:flex!important;align-items:center;gap:12px;width:100%!important;height:auto!important;text-align:start;padding:14px!important;
  border-radius:16px;background:var(--card);border:1px solid var(--line);font-weight:700;font-size:15px}
.more-row svg{width:22px;height:22px;flex:0 0 auto;fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.more-row svg .fill{fill:var(--ink);stroke:none}
.more-row .snd-off{display:none}
.more-row.muted .snd-on{display:none}
.more-row.muted .snd-off{display:inline}
.more-row .sub{margin-inline-start:auto;color:var(--mut);font-size:12px;font-weight:600}
#btnSound{display:flex!important}
.chat{position:absolute!important;inset:0!important;top:0!important;right:0!important;bottom:0!important;left:0!important;width:auto!important;height:auto!important;
  z-index:2!important;border-radius:18px!important;background:#140c24!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;animation:none!important;box-shadow:none!important}
.modal{background:rgba(5,2,12,.88)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.toast{background:#1b1028!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.gem-svg,.gem-art .gem-svg{filter:none!important}
.crystal.c3 .gem-svg{animation:float 4.5s ease-in-out infinite!important}
.crystal[data-rar="4"] .gem-art::before,.crystal[data-rar="5"] .gem-art::before{filter:none!important;animation:none!important;opacity:.42!important;
  background:radial-gradient(circle,rgba(252,211,77,.55),rgba(244,114,182,.15) 42%,transparent 70%)!important}
.bo-gear{bottom:calc(74px + env(safe-area-inset-bottom,0px))!important}
.bo-card,.bo-panel{bottom:calc(128px + env(safe-area-inset-bottom,0px))!important}
@media (max-height:700px){
  .gems{font-size:30px!important}
  .counter{margin-top:4px}
  .hint{margin-bottom:6px;font-size:12px}
  .stage-head{padding-top:6px}
  .rate{margin-top:2px}
}
@media (min-width:900px){
  .crystal{width:min(34vw,330px)}
  .gems{font-size:54px}
}
.toasts{position:fixed!important;left:50%!important;right:auto!important;top:calc(var(--sat) + 8px)!important;transform:translateX(-50%)!important;z-index:2147483600!important;width:min(92vw,420px)!important;display:flex!important}
.toast{opacity:1!important;animation:none!important;background:#1b1028!important}