/* ═══════════════════════════════════════════════════════════════
   MINER EMPIRE — overrides.css   ✦ Kristal Mağara Teması ✦
   style.css'e dokunulmaz — tüm değişiklikler buradadır.
   ═══════════════════════════════════════════════════════════════ */

/* ── Viewport & layout ────────────────────────────────────────── */
:root { --app-height: 100vh; }
.game { min-height: var(--app-height) !important; }
.screens { padding-bottom: 120px !important; }
/* Bottom nav is ALWAYS visible on all screens */
/* body[data-screen] .bottom rules removed — nav stays fixed */
button, .nav-item, .btn-orange, .buybtn button {
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}

/* ── Icon sizes ───────────────────────────────────────────────── */
.depot-ico  { width:30px;height:30px;object-fit:contain;display:inline-block; }
.ab-ico-img { width:24px;height:24px;object-fit:contain;display:block; }
.hud-left .hud-icon img,
.hud-left .hud-icon .hud-ico { width:22px !important;height:22px !important;object-fit:contain;display:block; }

/* ═══════════════════════════════════════════════════════════════
   KRİSTAL MAĞARA ARKA PLAN
   ═══════════════════════════════════════════════════════════════ */

#bgAnim { position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden; }
.game   { position:relative;z-index:1; }

/* Ana gradient — soğuk mavi/mor mağara */
#bgAnim .bg-gradient {
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 130% 55% at 50% 0%,   rgba(80,180,255,.22),  transparent 60%),
    radial-gradient(ellipse 80%  80% at 8%  75%,  rgba(120,80,255,.18),  transparent 58%),
    radial-gradient(ellipse 70%  70% at 92% 70%,  rgba(0,220,180,.12),   transparent 56%),
    radial-gradient(ellipse 60%  40% at 50% 50%,  rgba(40,60,120,.25),   transparent 70%),
    linear-gradient(180deg, #060c18 0%, #040a14 40%, #030710 100%);
}

/* Tavan ve duvar kristal parlamaları — sabit + pulse */
#bgAnim .bg-dust {
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    radial-gradient(circle at 12% 8%,  rgba(80,180,255,.35) 0 3px,  transparent 5px),
    radial-gradient(circle at 85% 5%,  rgba(140,80,255,.30) 0 2px,  transparent 4px),
    radial-gradient(circle at 45% 12%, rgba(0,220,200,.28)  0 2.5px,transparent 5px),
    radial-gradient(circle at 70% 18%, rgba(80,180,255,.25) 0 2px,  transparent 4px),
    radial-gradient(circle at 25% 22%, rgba(160,80,255,.22) 0 3px,  transparent 6px),
    radial-gradient(circle at 90% 30%, rgba(0,200,180,.20)  0 2px,  transparent 4px),
    radial-gradient(circle at 5%  40%, rgba(80,140,255,.18) 0 2px,  transparent 4px),
    radial-gradient(circle at 60% 3%,  rgba(200,120,255,.25)0 2px,  transparent 4px);
  animation: crystalGlow 4s ease-in-out infinite alternate;
}
@keyframes crystalGlow {
  0%   { opacity:.6; transform:scale(1); }
  50%  { opacity:1;  transform:scale(1.008); }
  100% { opacity:.7; transform:scale(1); }
}

/* Kristal zemin yansıması */
#bgAnim .bg-gradient::after {
  content:'';
  position:absolute;bottom:0;left:0;right:0;height:35%;
  background:
    linear-gradient(0deg,
      rgba(80,180,255,.08) 0%,
      rgba(120,80,255,.05) 40%,
      transparent 100%);
  pointer-events:none;
}

/* Kristal parçacıkları — bg-coal layer'ını kristal için kullan */
#bgAnim .bg-coal { position:absolute;inset:0;z-index:2; }

.coal-particle {           /* kristal parçacığı olarak override */
  position:absolute;
  top:-60px;
  width:14px;height:14px;
  background-image:url('/static/assets/ui/gem_particle.svg');
  background-size:contain;background-repeat:no-repeat;
  filter:
    hue-rotate(var(--hue,0deg))
    brightness(1.8)
    drop-shadow(0 0 6px rgba(80,180,255,.7))
    drop-shadow(0 0 14px rgba(120,80,255,.4));
  animation-name:crystalFall;
  animation-timing-function:linear;
  will-change:transform,opacity;
}
@keyframes crystalFall {
  0%   { transform:translate3d(0,-60px,0) rotate(0deg)   scale(.7); opacity:0; }
  8%   { opacity:.9; }
  85%  { opacity:.8; }
  100% { transform:translate3d(var(--drift,0px),calc(100vh + 80px),0) rotate(var(--rot,200deg)) scale(1.05); opacity:0; }
}

/* Büyük elmas parçacıkları — bg-gems layer */
#bgAnim .bg-gems { position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none; }

#bgAnim .gem-particle {
  position:absolute;top:-10vh;
  width:18px;height:18px;
  background-image:url('/static/assets/ui/gem_particle.svg');
  background-size:contain;background-repeat:no-repeat;
  opacity:.9;
  filter:
    hue-rotate(var(--hue,180deg))
    brightness(2.0)
    drop-shadow(0 0 8px rgba(80,200,255,.65))
    drop-shadow(0 0 18px rgba(120,80,255,.35));
  animation-name:gemDrift;
  animation-timing-function:linear;
  animation-iteration-count:1;
}
@keyframes gemDrift {
  0%   { transform:translate3d(0,-10vh,0) rotate(0deg)     scale(.9); }
  30%  { transform:translate3d(calc(var(--drift)*.4),35vh,0) rotate(130deg) scale(1.0); }
  100% { transform:translate3d(var(--drift),115vh,0)        rotate(var(--rot)) scale(1.08); }
}
#bgAnim .gem-particle.twinkle {
  animation-name:gemDrift,gemSparkle;
  animation-timing-function:linear,ease-in-out;
  animation-iteration-count:1,infinite;
}
@keyframes gemSparkle {
  0%,100%{ filter:hue-rotate(var(--hue,180deg)) brightness(1.8) drop-shadow(0 0 8px rgba(80,200,255,.55)); opacity:.75; }
  50%    { filter:hue-rotate(calc(var(--hue,180deg) + 30deg)) brightness(2.6) drop-shadow(0 0 18px rgba(160,120,255,.90)) drop-shadow(0 0 32px rgba(80,220,255,.45)); opacity:1; }
}
body.reduce-fx #bgAnim .gem-particle.twinkle { animation-name:gemDrift; animation-iteration-count:1; }

/* Mağara duvardaki sabit ışık çizgileri */
#bgAnim::before {
  content:'';
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(105deg, transparent 30%, rgba(80,180,255,.04) 50%, transparent 70%),
    linear-gradient(75deg,  transparent 40%, rgba(120,80,255,.03)  55%, transparent 75%);
  animation:wallShimmer 8s ease-in-out infinite alternate;
}
@keyframes wallShimmer {
  0%   { opacity:.4; }
  100% { opacity:1; }
}

/* ═══════════════════════════════════════════════════════════════
   PANEL & HUD — kristal temasına uygun
   ═══════════════════════════════════════════════════════════════ */

/* Panel parlamaları biraz mavimsiye dönsün */
.panel {
  border-color: rgba(100,180,255,.18) !important;
  box-shadow: 0 12px 26px rgba(0,0,20,.45), inset 0 1px 0 rgba(100,180,255,.10) !important;
}

/* Bottom nav kristal efekti */
.bottom {
  background:
    linear-gradient(180deg, rgba(20,30,60,.72), rgba(10,15,35,.85)) !important;
  border: 1px solid rgba(80,160,255,.18) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 -4px 24px rgba(40,100,255,.12), 0 8px 30px rgba(0,0,0,.4) !important;
}
.nav-item.active {
  background: rgba(80,160,255,.14) !important;
}

/* HUD panelleri */
.hud-left, .hud-right {
  background:
    linear-gradient(180deg, rgba(20,35,70,.80), rgba(10,18,40,.85)) !important;
  border-color: rgba(80,160,255,.20) !important;
  backdrop-filter: blur(8px) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SLOT KARTLARI
   ═══════════════════════════════════════════════════════════════ */

.slot {
  border-radius: 20px !important;
  background:
    radial-gradient(110px 100px at 30% 15%, rgba(80,160,255,.12), transparent 60%),
    linear-gradient(160deg, rgba(255,255,255,.08), rgba(0,10,30,.32)) !important;
  border: 2px solid rgba(80,160,255,.22) !important;
  box-shadow:
    0 14px 28px rgba(0,0,20,.5),
    inset 0 1px 0 rgba(100,180,255,.12) !important;
  transition: transform .2s ease, box-shadow .2s ease;
  overflow: visible !important;
}
.slot:active { transform: scale(0.97); }

/* Her madenciye özgü renk */
.slot[data-miner="baby"]   { --sc:#4ea0db; }
.slot[data-miner="green"]  { --sc:#3db53a; }
.slot[data-miner="yellow"] { --sc:#e8a800; }
.slot[data-miner="blue"]   { --sc:#2a80ff; }
.slot[data-miner="red"]    { --sc:#e02a1a; }

.slot.has-miner::before {
  content:''; position:absolute; top:0; left:0; right:0;
  height:3px; border-radius:20px 20px 0 0;
  background: var(--sc, rgba(80,160,255,.7));
  box-shadow: 0 0 14px var(--sc, rgba(80,160,255,.5));
}

/* ── Madenci görseli ──────────────────────────────────────────── */
.slot.has-miner .m-ico {
  position:relative; width:96px; height:90px;
  display:flex; align-items:flex-end; justify-content:center;
}
.slot.has-miner .miner-wrap {
  display:flex; flex-direction:column; align-items:center; width:100%; gap:0;
}
.slot.has-miner .miner-ico.slot-ico {
  width:72px; height:72px; object-fit:contain;
  position:relative; z-index:3;
}

/* ── Madenci animasyonları ────────────────────────────────────── */

/* Baby — neşeli zıplama + hafif dönüş */
.miner-anim-baby {
  animation: babyBounce 1.8s cubic-bezier(.4,0,.6,1) infinite;
  transform-origin: 50% 100%;
}
@keyframes babyBounce {
  0%,100%{ transform:translateY(0)    rotate(0deg)   scaleY(1)    scaleX(1); }
  20%    { transform:translateY(-6px)  rotate(-2deg)  scaleY(1.03) scaleX(.99); }
  40%    { transform:translateY(-11px) rotate(1.5deg) scaleY(1.05) scaleX(.97); }
  60%    { transform:translateY(-7px)  rotate(-1deg)  scaleY(1.02) scaleX(.99); }
  80%    { transform:translateY(-2px)  rotate(.5deg)  scaleY(.98)  scaleX(1.01); }
}

/* Green — ağır kazma sallama, gövde eğimi */
.miner-anim-green {
  animation: greenSwing 1.05s ease-in-out infinite;
  transform-origin: 50% 88%;
}
@keyframes greenSwing {
  0%,100%{ transform:rotate(0deg)   translateX(0); }
  20%    { transform:rotate(-5deg)  translateX(-2px); }
  45%    { transform:rotate(4.5deg) translateX(2.5px); }
  65%    { transform:rotate(-3deg)  translateX(-1.5px); }
  85%    { transform:rotate(2deg)   translateX(1px); }
}

/* Yellow — heyecanlı titreme + sıçrama */
.miner-anim-yellow {
  animation: yellowExcite 1.5s ease-in-out infinite;
}
@keyframes yellowExcite {
  0%,100%{ transform:translateX(0)   translateY(0)    rotate(0deg); }
  10%    { transform:translateX(-3px) translateY(0)    rotate(-2deg); }
  20%    { transform:translateX(3px)  translateY(0)    rotate(2deg); }
  30%    { transform:translateX(-4px) translateY(0)    rotate(-2.5deg); }
  40%    { transform:translateX(3px)  translateY(0)    rotate(2deg); }
  50%    { transform:translateX(-2px) translateY(0)    rotate(-1deg); }
  60%    { transform:translateX(0)    translateY(-9px)  rotate(-1deg); }
  75%    { transform:translateX(0)    translateY(-14px) rotate(1deg); }
  88%    { transform:translateX(0)    translateY(-4px)  rotate(0deg); }
}

/* Blue — mühendis: yavaş ve zarif süzülme + hafif eğim */
.miner-anim-blue {
  animation: blueFloat 2.6s ease-in-out infinite;
}
@keyframes blueFloat {
  0%,100%{ transform:translateY(0)    rotate(-.6deg); }
  25%    { transform:translateY(-5px)  rotate(.8deg); }
  50%    { transform:translateY(-9px)  rotate(-.5deg); }
  75%    { transform:translateY(-4px)  rotate(.4deg); }
}

/* Red — güçlü, baskın nefes + küçük sarsıntı */
.miner-anim-red {
  animation: redDominate 2.0s ease-in-out infinite;
  transform-origin: 50% 58%;
}
@keyframes redDominate {
  0%,100%{ transform:scaleX(1)    scaleY(1)    translateY(0); }
  20%    { transform:scaleX(1.04) scaleY(.97)  translateY(1px); }
  45%    { transform:scaleX(.97)  scaleY(1.04) translateY(-3px); }
  65%    { transform:scaleX(1.02) scaleY(.99)  translateY(0px); }
  80%    { transform:scaleX(1.01) scaleY(1.01) translateY(-1px); }
}

/* Şapka glow — renk teması */
.slot[data-miner="baby"]   .slot-ico { filter:drop-shadow(0 6px 16px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(78,160,219,.55)); }
.slot[data-miner="green"]  .slot-ico { filter:drop-shadow(0 6px 16px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(61,181,58,.50)); }
.slot[data-miner="yellow"] .slot-ico { filter:drop-shadow(0 6px 16px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(232,168,0,.55)); }
.slot[data-miner="blue"]   .slot-ico { filter:drop-shadow(0 6px 16px rgba(0,0,0,.55)) drop-shadow(0 0 20px rgba(42,128,255,.60)); }
.slot[data-miner="red"]    .slot-ico { filter:drop-shadow(0 6px 16px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(224,42,26,.65)); }

/* Mine scene (canvas köşesi) */
.mine-scene {
  width:66px; height:58px; border-radius:12px; overflow:hidden;
  background:linear-gradient(180deg,rgba(80,160,255,.10),rgba(0,0,30,.50));
  border:1px solid rgba(80,160,255,.18);
  box-shadow:inset 0 0 0 1px rgba(80,160,255,.10), 0 4px 12px rgba(0,0,0,.4);
}
.mine-canvas { width:100%; height:100%; }

.slot .m-name  { font-weight:800; font-size:12px; opacity:.92; text-align:center; margin-top:2px; text-shadow:0 2px 8px rgba(0,0,0,.55); }
.slot .m-count { font-size:13px; font-weight:900; opacity:.85; color:#6acfff; text-shadow:0 0 10px rgba(100,200,255,.55); }

.slot:not(.has-miner) { opacity:.55; border-style:dashed !important; border-color:rgba(80,140,255,.18) !important; }
.slot:not(.has-miner) .m-ico img.empty-pick { width:52px;height:52px;display:block;margin:0 auto 6px;opacity:.5;filter:drop-shadow(0 6px 12px rgba(0,0,0,.4)); }

/* ═══════════════════════════════════════════════════════════════
   MAĞAZA KARTLARI
   ═══════════════════════════════════════════════════════════════ */
.store-list { margin-top:10px; display:flex; flex-direction:column; gap:14px; }

.card.panel {
  display:flex; gap:0; padding:0;
  border-radius:18px !important; overflow:hidden;
  border:2px solid rgba(80,160,255,.16) !important;
  box-shadow:0 14px 28px rgba(0,0,30,.4), inset 0 1px 0 rgba(100,180,255,.10) !important;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(0,5,25,.30)) !important;
  transition:transform .2s, box-shadow .2s;
}
.card[data-card="baby"]   { border-left:4px solid #4ea0db !important; }
.card[data-card="green"]  { border-left:4px solid #3db53a !important; }
.card[data-card="yellow"] { border-left:4px solid #e8a800 !important; }
.card[data-card="blue"]   { border-left:4px solid #2a80ff !important; }
.card[data-card="red"]    { border-left:4px solid #e02a1a !important; }

.avatar {
  width:96px !important; height:96px !important;
  border-radius:0 !important;
  background:rgba(0,5,20,.25) !important;
  border:none !important; border-right:1px solid rgba(80,160,255,.12) !important;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; position:relative; overflow:hidden;
}
.avatar::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(80px 80px at 40% 30%,rgba(80,180,255,.12),transparent 70%);
  pointer-events:none;
}
.avatar .miner-ico {
  width:82px !important; height:82px !important;
  object-fit:contain; position:relative; z-index:1;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.55));
  animation:storeFloat 3s ease-in-out infinite;
}
@keyframes storeFloat {
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-5px); }
}

.cmeta { flex:1; padding:12px 14px; display:flex; flex-direction:column; justify-content:space-between; }
.cname { font-size:18px !important; font-weight:900 !important; text-shadow:0 2px 10px rgba(0,0,0,.55) !important; }
.ctext { margin-top:5px !important; font-size:13px !important; line-height:1.6 !important; opacity:.92 !important; }
.ctext b { color:#7acfff; }
.crow { margin-top:10px !important; }

.buybtn button {
  background:linear-gradient(180deg,#f0a11a,#d47f00) !important;
  color:#1a0f00 !important; font-weight:900 !important;
  font-size:16px !important; border-radius:12px !important;
  padding:10px 14px !important;
  box-shadow:0 8px 18px rgba(200,120,0,.30) !important;
  transition:all .15s !important;
}
.buybtn button:active { transform:scale(0.96) !important; }

.qty { border-radius:12px !important; border:2px solid rgba(80,160,255,.16) !important; background:rgba(0,5,25,.25) !important; }
.qbtn { border-radius:10px !important; background:rgba(80,160,255,.14) !important; font-size:20px !important; transition:background .15s; }
.qbtn:active { background:rgba(80,160,255,.28) !important; }
.qval { font-size:20px !important; font-weight:900 !important; min-width:32px !important; }

/* ═══════════════════════════════════════════════════════════════
   DEPOT
   ═══════════════════════════════════════════════════════════════ */
.pile-wrap { position:relative; margin-top:10px; height:150px; border-radius:18px; overflow:hidden; }
.coal-pile {
  position:absolute; left:16px; right:16px; bottom:18px;
  height:calc(18px + (110px * var(--pile)));
  border-radius:18px 18px 10px 10px;
  background:
    radial-gradient(circle at 20% 20%,rgba(255,255,255,.12),transparent 35%),
    linear-gradient(180deg,rgba(40,40,55,.95),rgba(15,15,25,.98));
  box-shadow:0 -8px 30px rgba(80,160,255,.10), inset 0 6px 16px rgba(80,160,255,.06);
  transform-origin:bottom center; transition:height .45s ease;
}
.coal-pile.pulse { animation:pilePulse .55s ease; }
@keyframes pilePulse { 0%{transform:scale(1);}45%{transform:scale(1.02);}100%{transform:scale(1);} }

.conveyor { position:absolute;left:14px;right:14px;bottom:0;height:16px;border-radius:12px;background:linear-gradient(180deg,rgba(5,10,25,.9),rgba(20,25,45,.95));overflow:hidden; }
.conveyor .belt { position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(80,180,255,.0) 0px,rgba(80,180,255,.0) 10px,rgba(80,180,255,.20) 10px,rgba(80,180,255,.20) 18px);animation:beltMove 1.1s linear infinite; }
.conveyor .belt:nth-child(2){ opacity:.35;animation-duration:1.6s;filter:blur(1px); }
@keyframes beltMove{ from{transform:translateX(0);}to{transform:translateX(-36px);} }

.depot-bubble.depot-bubble--below { position:relative !important;left:auto !important;bottom:auto !important;top:auto !important;transform:none !important;margin:10px auto 0 !important;width:min(320px,92%) !important; }

#screen-depot .warehouse { overflow:hidden; }
#screen-depot .pile-wrap { position:absolute;left:14px;right:14px;bottom:14px;margin-top:0;height:122px;border-radius:18px;background:rgba(0,5,20,.22);border:1px solid rgba(80,160,255,.12);box-shadow:inset 0 8px 18px rgba(0,0,0,.40); }
#screen-depot .coal-pile { left:12px;right:12px;bottom:12px;height:calc(14px + (88px * var(--pile)));border-radius:16px 16px 12px 12px;z-index:1; }
#screen-depot .conveyor { display:none !important; }
#screen-depot .sellbar { bottom:96px !important; }

#screen-depot .coal-bin {
  position:absolute;left:12px;right:12px;bottom:12px;
  height:calc(8px + (92px * var(--fill)));
  border-radius:16px 16px 12px 12px; pointer-events:none; z-index:2;
  transition:height .45s ease;
  background:
    radial-gradient(circle at 18% 28%,rgba(80,180,255,.14),transparent 40%),
    url("/static/assets/ui/coal.png");
  background-size:auto,26px 26px;
  background-repeat:no-repeat,repeat;
  filter:saturate(1.05) brightness(.98);
  box-shadow:inset 0 10px 18px rgba(0,0,0,.25), 0 -8px 24px rgba(80,160,255,.06);
}
#screen-depot .coal-bin.fill-pulse { animation:fillPulse .55s ease; }
@keyframes fillPulse { 0%{transform:scale(1);}45%{transform:scale(1.015);filter:brightness(1.05);}100%{transform:scale(1);} }

.num-pop { animation:numPop .45s ease; }
@keyframes numPop { 0%{transform:translateY(0) scale(1);}40%{transform:translateY(-2px) scale(1.06);filter:brightness(1.15);}100%{transform:translateY(0) scale(1);} }

/* ═══════════════════════════════════════════════════════════════
   HOME — Bucket & Flying Coal
   ═══════════════════════════════════════════════════════════════ */
#screen-home { position:relative; }
.home-fly-fx { position:absolute;inset:0;pointer-events:none;overflow:visible; }
.fly-coal { position:absolute;width:16px;height:16px;background-image:url("/static/assets/ui/coal.png");background-size:contain;background-repeat:no-repeat;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4));will-change:transform,opacity; }
.coal-bucket { width:min(280px,76%);height:130px;margin:10px auto 6px;position:relative;pointer-events:none; }
.coal-bucket .bucket-toplip { position:absolute;left:14px;right:14px;top:12px;height:22px;border-radius:16px;background:linear-gradient(180deg,rgba(80,160,255,.15),rgba(0,0,0,.18));border:1px solid rgba(80,160,255,.14); }
.coal-bucket .bucket-body { position:absolute;left:26px;right:26px;top:28px;bottom:12px;border-radius:18px 18px 24px 24px;background:linear-gradient(180deg,rgba(20,30,55,.82),rgba(5,8,20,.82));border:1px solid rgba(80,160,255,.12);box-shadow:inset 0 16px 26px rgba(0,0,0,.40);overflow:hidden; }
.bucket-fill { position:absolute;left:10px;right:10px;bottom:10px;height:calc(10px + (78px * var(--fill)));border-radius:14px 14px 16px 16px;background:url("/static/assets/ui/coal.png");background-size:26px 26px;background-repeat:repeat;box-shadow:inset 0 14px 22px rgba(0,0,0,.25);transform-origin:bottom center;transition:height .45s ease; }
.bucket-fill.pulse { animation:bucketPulse .38s ease; }
@keyframes bucketPulse { 0%{transform:scale(1);}45%{transform:scale(1.03);}100%{transform:scale(1);} }

.depot-bubble { position:relative; overflow:hidden; }
.depot-bubble.bubble-pop { animation:bubblePop .55s cubic-bezier(.2,.9,.2,1); }
@keyframes bubblePop { 0%{filter:brightness(1);}35%{filter:brightness(1.08);box-shadow:0 0 0 1px rgba(80,180,255,.20),0 10px 22px rgba(0,0,0,.28);}100%{filter:brightness(1);} }

.home-coal-fx { position:absolute;inset:0;pointer-events:none; }
.home-coal-p { position:absolute;left:var(--x,50%);bottom:10px;width:14px;height:14px;background-image:url("/static/assets/ui/coal.png");background-size:contain;background-repeat:no-repeat;transform:translateX(-50%);filter:drop-shadow(0 6px 10px rgba(0,0,0,.4));animation:homeCoalRise var(--dur,.7s) ease-out forwards;animation-delay:var(--delay,0s);opacity:0; }
@keyframes homeCoalRise { 0%{opacity:0;transform:translateX(-50%) translateY(0) scale(.75);}12%{opacity:1;}100%{opacity:0;transform:translateX(calc(-50% + var(--dx,0px))) translateY(-42px) scale(1.02);} }

/* ═══════════════════════════════════════════════════════════════
   DİL MODAL
   ═══════════════════════════════════════════════════════════════ */
.lang-btn { background:transparent;border:none;color:inherit;font:inherit;cursor:pointer;padding:6px 10px;border-radius:10px;display:flex;align-items:center;gap:8px; }
.lang-btn:active { transform:scale(0.98); }
.langbtn-flag { width:22px;height:16px;border-radius:4px;display:block; }
.lang-modal { position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,20,.65);backdrop-filter:blur(4px); }
.lang-modal.hidden { display:none; }
.lang-card { width:min(420px,94vw);border-radius:18px;padding:14px;box-shadow:0 12px 40px rgba(0,0,0,.5);background:rgba(8,14,32,.92);border:1px solid rgba(80,160,255,.20);backdrop-filter:blur(10px); }
.lang-title { text-align:center;font-weight:800;font-size:22px;margin:6px 0 12px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.4); }
.lang-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.lang-item { display:flex;align-items:center;gap:10px;width:100%;padding:12px;border-radius:14px;border:1px solid rgba(0,0,0,.35);cursor:pointer;color:#111;font-weight:800;background:linear-gradient(180deg,rgba(205,149,89,.95),rgba(153,94,46,.95));box-shadow:inset 0 2px 0 rgba(255,255,255,.18),0 6px 14px rgba(0,0,0,.3);touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .15s; }
.lang-item:active { transform:scale(0.98); }
.lang-flag-img { width:28px;height:22px;border-radius:5px;display:block;flex:0 0 auto;box-shadow:0 2px 0 rgba(0,0,0,.25); }
.lang-name { flex:1;text-align:left;font-size:15px; }
.lang-close { width:100%;margin-top:12px;padding:10px 12px;border-radius:14px;border:1px solid rgba(80,160,255,.20);background:rgba(80,160,255,.10);color:#fff;font-weight:800;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent; }
.lang-close:active { transform:scale(0.99); }

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  .miner-anim-baby,.miner-anim-green,.miner-anim-yellow,
  .miner-anim-blue,.miner-anim-red,.avatar .miner-ico { animation:none !important; }
}

/* ── Body arka plan — Kristal Mağara (style.css override) ─────── */
body {
  background:
    radial-gradient(ellipse 120% 50% at 50% 0%,   rgba(60,160,255,.20), transparent 58%),
    radial-gradient(ellipse 75%  75% at 5%  72%,  rgba(100,60,255,.16), transparent 56%),
    radial-gradient(ellipse 65%  65% at 95% 68%,  rgba(0,200,170,.10),  transparent 54%),
    radial-gradient(ellipse 50%  35% at 50% 48%,  rgba(30,50,110,.22),  transparent 68%),
    repeating-linear-gradient(135deg,
      rgba(80,140,255,.018) 0px, rgba(80,140,255,.018) 1px,
      transparent 1px, transparent 22px),
    linear-gradient(180deg, #060c18 0%, #040a14 50%, #030710 100%) !important;
}

/* ═══════════════════════════════════════════════════════════════
   REFERRAL SAYFASI
   ═══════════════════════════════════════════════════════════════ */

.ref-page-title {
  background: linear-gradient(135deg, #6abaff, #a07aff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Stats Row */
.ref-stats-row {
  display: flex; gap: 12px; padding: 0 16px; margin-top: 4px;
}
.ref-stat-card {
  flex: 1; border-radius: 18px; padding: 18px 14px 14px;
  text-align: center; position: relative; overflow: hidden;
  background:
    radial-gradient(80px 60px at 50% 10%, rgba(80,180,255,.15), transparent 65%),
    linear-gradient(160deg, rgba(255,255,255,.08), rgba(0,10,40,.35));
  border: 2px solid rgba(80,160,255,.22);
  box-shadow: 0 12px 28px rgba(0,0,20,.4), inset 0 1px 0 rgba(100,180,255,.12);
}
.ref-stat-card--earn {
  background:
    radial-gradient(80px 60px at 50% 10%, rgba(160,80,255,.18), transparent 65%),
    linear-gradient(160deg, rgba(255,255,255,.08), rgba(20,0,40,.35));
  border-color: rgba(160,80,255,.28);
}
.ref-stat-icon { font-size: 26px; margin-bottom: 6px; }
.ref-stat-val  {
  font-size: 26px; font-weight: 900; color: #fff;
  text-shadow: 0 0 18px rgba(100,180,255,.6);
  letter-spacing: -0.5px;
}
.ref-stat-card--earn .ref-stat-val { text-shadow: 0 0 18px rgba(160,100,255,.6); }
.ref-stat-lbl  { font-size: 11px; color: rgba(255,255,255,.45); margin-top: 4px; letter-spacing: .5px; text-transform: uppercase; }

/* Info banner */
.ref-info-banner {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 12px 16px 0;
  padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(80,160,255,.10), rgba(160,80,255,.08));
  border: 1px solid rgba(100,160,255,.22);
}
.ref-info-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.ref-info-text { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.75); }
.ref-info-text b { color: #7adaff; }

/* Link card */
.ref-link-card {
  margin: 12px 16px 0 !important;
  padding: 14px 16px !important;
  border-radius: 18px !important;
  border: 2px solid rgba(80,160,255,.25) !important;
  background:
    radial-gradient(120px 60px at 50% 0%, rgba(80,160,255,.12), transparent 70%),
    linear-gradient(160deg, rgba(255,255,255,.07), rgba(0,5,30,.35)) !important;
}
.ref-link-label {
  font-size: 12px; color: rgba(255,255,255,.45); letter-spacing: 1px;
  text-transform: uppercase; margin-bottom: 10px;
}
.ref-link-row {
  display: flex; align-items: center; gap: 8px;
}
.ref-link-val {
  flex: 1; font-size: 13px; font-weight: 700;
  color: #6abaff; word-break: break-all; line-height: 1.4;
  background: rgba(0,10,40,.35); border-radius: 10px;
  padding: 8px 12px; border: 1px solid rgba(80,160,255,.18);
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.ref-copy-btn {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(160deg, rgba(80,160,255,.22), rgba(80,160,255,.08));
  border: 2px solid rgba(80,160,255,.30);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; cursor: pointer; transition: all .15s;
  touch-action: manipulation;
}
.ref-copy-btn:active { transform: scale(0.92); background: rgba(80,160,255,.35); }

/* Telegram invite button */
.ref-invite-btn {
  display: flex; align-items: center; gap: 12px;
  width: calc(100% - 32px); margin: 12px 16px 0;
  padding: 16px 18px; border-radius: 18px;
  background: linear-gradient(135deg, #229ED9, #1a7fb5);
  border: none; color: #fff; cursor: pointer;
  box-shadow: 0 8px 24px rgba(34,158,217,.35), inset 0 1px 0 rgba(255,255,255,.15);
  transition: all .2s; touch-action: manipulation;
  position: relative; overflow: hidden;
}
.ref-invite-btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.12), transparent 60%);
  pointer-events: none;
}
.ref-invite-btn:active { transform: scale(0.98); box-shadow: 0 4px 14px rgba(34,158,217,.3); }
.ref-invite-ico  { font-size: 22px; flex-shrink: 0; }
.ref-invite-txt  { flex: 1; font-size: 15px; font-weight: 700; text-align: left; letter-spacing: .2px; }
.ref-invite-arrow{ font-size: 22px; opacity: .7; }

/* Recent referrals */
.ref-recent-wrap {
  margin: 16px 16px 0; border-radius: 16px;
  background: rgba(0,5,25,.25);
  border: 1px solid rgba(80,160,255,.15);
  overflow: hidden;
}
.ref-recent-title {
  padding: 12px 16px 8px; font-size: 12px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.4);
  border-bottom: 1px solid rgba(80,160,255,.10);
}
.ref-recent-item {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-bottom: 1px solid rgba(80,160,255,.07);
  font-size: 13px;
}
.ref-recent-item:last-child { border-bottom: none; }
.rri-id   { flex: 1; color: rgba(255,255,255,.7); font-weight: 600; }
.rri-coal { color: #7adaff; font-weight: 800; }
.rri-date { color: rgba(255,255,255,.35); font-size: 11px; margin-left: 6px; }

/* ═══════════════════════════════════════════════════════════════
   DEPO — Yenileme
   ═══════════════════════════════════════════════════════════════ */

/* Top stat bar */
.depot-top-bar {
  display: flex; align-items: stretch; gap: 0;
  margin: 0 16px 14px;
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(0,5,30,.35));
  border: 2px solid rgba(80,160,255,.20);
  border-radius: 18px; overflow: hidden;
}
.dtb-card {
  flex: 1; display: flex; align-items: center; gap: 10px; padding: 14px 16px;
}
.dtb-card:first-child { border-right: 1px solid rgba(80,160,255,.15); }
.dtb-ico { width: 28px; height: 28px; object-fit: contain; }
.dtb-ico-emoji { font-size: 24px; }
.dtb-info { display: flex; flex-direction: column; gap: 2px; }
.dtb-label { font-size: 10px; text-transform: uppercase; letter-spacing: .8px; color: rgba(255,255,255,.4); }
.dtb-val {
  font-size: 20px; font-weight: 900; color: #fff;
  text-shadow: 0 0 14px rgba(100,180,255,.5);
}
.dtb-sep { width: 0; }

/* Mine visual container */
.depot-mine-visual {
  position: relative;
  margin: 0 16px 14px;
  border-radius: 22px; overflow: hidden;
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(80,180,255,.14), transparent 60%),
    radial-gradient(ellipse 60% 80% at 10% 80%, rgba(120,60,255,.10), transparent 60%),
    linear-gradient(180deg, #060c1a 0%, #030810 100%);
  border: 2px solid rgba(80,160,255,.18);
  box-shadow: 0 16px 32px rgba(0,0,20,.5), inset 0 1px 0 rgba(100,180,255,.10);
  min-height: 200px;
}

/* Stalactites */
.mine-ceiling {
  position: absolute; top: 0; left: 0; right: 0;
  height: 50px; display: flex; align-items: flex-start;
  justify-content: space-around; padding: 0 16px;
  pointer-events: none; z-index: 2;
}
.stalactite {
  width: 16px; border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, rgba(80,160,255,.30), rgba(80,160,255,.08));
  box-shadow: 0 0 8px rgba(80,180,255,.25);
}
.s1 { height: 38px; width: 12px; margin-top: 0; }
.s2 { height: 55px; width: 18px; margin-top: 0; background: linear-gradient(180deg, rgba(140,80,255,.35), rgba(140,80,255,.08)); }
.s3 { height: 42px; width: 14px; margin-top: 0; }
.s4 { height: 62px; width: 20px; margin-top: 0; background: linear-gradient(180deg, rgba(0,200,180,.30), rgba(0,200,180,.06)); }
.s5 { height: 34px; width: 10px; margin-top: 0; }

/* Wall crystals */
.mine-wall-left, .mine-wall-right {
  position: absolute; top: 40px; bottom: 80px;
  width: 28px; pointer-events: none; z-index: 2;
}
.mine-wall-left  { left: 6px; }
.mine-wall-right { right: 6px; }
.wall-crystal {
  position: absolute; border-radius: 3px 3px 0 0;
  animation: crystalWallPulse 3s ease-in-out infinite;
}
.wc1 { bottom: 60px; left: 2px;  width: 8px; height: 22px; background: linear-gradient(0deg, rgba(80,180,255,.50), rgba(80,180,255,.15)); }
.wc2 { bottom: 30px; left: 12px; width: 6px; height: 16px; background: linear-gradient(0deg, rgba(140,80,255,.45), rgba(140,80,255,.12)); animation-delay: .8s; }
.wc3 { bottom: 80px; left: 6px;  width: 5px; height: 14px; background: linear-gradient(0deg, rgba(0,200,180,.40), rgba(0,200,180,.10)); animation-delay: 1.6s; }
.wc4 { bottom: 50px; right: 2px; width: 9px; height: 24px; background: linear-gradient(0deg, rgba(80,180,255,.45), rgba(80,180,255,.12)); animation-delay: .4s; }
.wc5 { bottom: 20px; right: 10px;width: 6px; height: 18px; background: linear-gradient(0deg, rgba(200,80,255,.40), rgba(200,80,255,.10)); animation-delay: 1.2s; }
@keyframes crystalWallPulse {
  0%,100%{ opacity:.6; filter:brightness(1); }
  50%    { opacity:1;  filter:brightness(1.4) drop-shadow(0 0 4px rgba(80,180,255,.4)); }
}

/* Coal pile floor */
.mine-floor {
  position: absolute; left: 30px; right: 30px; bottom: 44px;
}
#screen-depot .pile-wrap {
  position: relative; height: 100px; margin: 0;
  border-radius: 12px; overflow: hidden;
}
#screen-depot .coal-pile {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(8px + (80px * var(--pile)));
  border-radius: 10px 10px 6px 6px;
  background:
    radial-gradient(circle at 20% 20%, rgba(80,180,255,.12), transparent 40%),
    linear-gradient(180deg, rgba(35,40,55,.95), rgba(15,18,30,.98));
  box-shadow: 0 -4px 20px rgba(80,160,255,.08);
  transition: height .45s ease;
}
#screen-depot .coal-pile.pulse { animation: pilePulse .55s ease; }

/* Conveyor */
.depot-conveyor {
  position: absolute; bottom: -40px; left: -30px; right: -30px; height: 36px;
}
.dc-track {
  position: absolute; inset: 8px 0; border-radius: 6px;
  background: linear-gradient(180deg, rgba(10,15,35,.95), rgba(5,8,20,.95));
  overflow: hidden;
  border: 1px solid rgba(80,160,255,.15);
}
.dc-belt {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(80,180,255,.0) 0, rgba(80,180,255,.0) 14px,
    rgba(80,180,255,.18) 14px, rgba(80,180,255,.18) 22px
  );
  animation: beltMove .9s linear infinite;
}
.dc-roller {
  position: absolute; top: 2px; width: 16px; height: 30px; border-radius: 8px;
  background: linear-gradient(180deg, rgba(60,80,140,.9), rgba(20,30,70,.9));
  border: 1px solid rgba(80,160,255,.25);
}
.dc-roller-l { left: 0; }
.dc-roller-r { right: 0; }
.dc-coal-stream { position: absolute; top: 0; left: 0; right: 0; height: 8px; pointer-events: none; }
.dc-coal-piece {
  position: absolute; top: -4px; width: 10px; height: 10px;
  background: radial-gradient(circle, #3a3a3a, #1a1a2a);
  border-radius: 50%; border: 1px solid rgba(80,180,255,.12);
  animation: dcCoalDrop 1s linear forwards;
}
@keyframes dcCoalDrop {
  0%  { opacity: 0; transform: translateY(-12px); }
  20% { opacity: 1; }
  80% { opacity: .9; }
  100%{ opacity: 0; transform: translateY(20px); }
}

/* Light rays */
.mine-light-ray {
  position: absolute; top: 0; width: 40px;
  height: 100%; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(80,180,255,.06), transparent 80%);
  animation: rayShimmer 6s ease-in-out infinite;
}
.mray1 { left: 25%; animation-delay: 0s; }
.mray2 { right: 30%; animation-delay: 2.5s; }
@keyframes rayShimmer {
  0%,100% { opacity: .3; transform: skewX(-5deg); }
  50%     { opacity: .8; transform: skewX(5deg); }
}

/* Sell panel */
.depot-sell-panel {
  display: flex !important; align-items: center; gap: 14px;
  margin: 0 16px !important; padding: 14px 16px !important;
  border-radius: 18px !important;
  border: 2px solid rgba(80,160,255,.18) !important;
  background:
    radial-gradient(80px 50px at 30% 50%, rgba(80,160,255,.10), transparent 65%),
    linear-gradient(160deg, rgba(255,255,255,.07), rgba(0,5,30,.35)) !important;
}
.dsp-info { flex: 1; }
.dsp-reward-line {
  display: flex; align-items: center; gap: 6px;
  font-size: 18px; font-weight: 900; color: #fff;
}
.dsp-ico       { font-size: 20px; }
.dsp-plus      { color: rgba(255,255,255,.4); font-size: 16px; }
.dsp-coal-ico  { width: 18px; height: 18px; object-fit: contain; }
.dsp-hint      { font-size: 11px; color: rgba(255,255,255,.35); margin-top: 4px; letter-spacing: .3px; }
.dsp-btn {
  flex-shrink: 0; font-size: 16px !important; font-weight: 900 !important;
  padding: 12px 20px !important; border-radius: 14px !important;
}

/* ── Coal icon in referral stat card ─────────────────────────── */
.ref-stat-icon-wrap {
  height: 32px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.ref-coal-ico {
  width: 28px; height: 28px; object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(80,160,255,.35));
}


/* ═══════════════════════════════════════════════════════════════
   MINERS SCENE — Profesyonel 5-slot grid düzeni
   ═══════════════════════════════════════════════════════════════ */

/* scene: absolute konumlamayı kaldırıp flex grid yap */
.scene {
  position: relative !important;
  height: auto !important;
  min-height: 160px !important;
  margin: 8px 10px 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 6px 0 8px !important;
}

/* Tüm slot'ları absolute'dan kurtarıp normal akışa al */
.slot,
.slot.s1, .slot.s2, .slot.s3, .slot.s4, .slot.s5 {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  width: calc(20% - 8px) !important;
  min-width: 68px !important;
  max-width: 100px !important;
  height: auto !important;
  min-height: 118px !important;
  padding: 10px 6px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  box-sizing: border-box !important;
}

/* Miner image inside slot */
.slot.has-miner .miner-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  gap: 4px !important;
}
.slot.has-miner .slot-ico {
  width: 56px !important;
  height: 56px !important;
  display: block !important;
}

/* Mine canvas scene - keep it small */
.mine-scene {
  width: 100% !important;
  height: 36px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin-top: 2px !important;
}
.mine-canvas {
  width: 100% !important;
  height: 36px !important;
  display: block !important;
}

/* Slot text labels */
.slot .m-name {
  font-size: 10px !important;
  font-weight: 800 !important;
  text-align: center !important;
  width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-top: 2px !important;
  opacity: .92 !important;
}
.slot .m-count {
  font-size: 11px !important;
  font-weight: 900 !important;
  color: #6acfff !important;
  text-align: center !important;
}

/* Empty slot */
.slot:not(.has-miner) .m-ico img.empty-pick {
  width: 40px !important;
  height: 40px !important;
}

/* Responsive: small phones */
@media (max-width: 360px) {
  .slot, .slot.s1, .slot.s2, .slot.s3, .slot.s4, .slot.s5 {
    width: calc(33% - 7px) !important;
    min-width: 60px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   HOME — Top bar & stats
   ═══════════════════════════════════════════════════════════════ */
.home-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 6px;
  gap: 10px;
}
.home-stats {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 6px 12px;
}
.hs-item {
  display: flex; align-items: center; gap: 5px; padding: 0 8px;
}
.hs-ico { font-size: 14px; }
.hs-coal-ico { width: 14px; height: 14px; object-fit: contain; }
.hs-val { font-size: 13px; font-weight: 900; color: #fff; }
.hs-lbl { font-size: 10px; color: rgba(255,255,255,.45); letter-spacing: .4px; }
.hs-sep {
  width: 1px; height: 20px; background: rgba(255,255,255,.12); margin: 0 4px;
}

/* ═══════════════════════════════════════════════════════════════
   MINERS — New card grid design
   ═══════════════════════════════════════════════════════════════ */

/* Scene container — scrollable vertical list of cards */
#screen-home .scene {
  position: relative !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 4px 14px 10px !important;
  margin: 0 !important;
  overflow-y: auto !important;
  /* keep space for bottom elements */
  max-height: calc(var(--app-height, 100vh) - 230px) !important;
}

/* Miner card */
.miner-card {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  border-radius: 20px !important;
  padding: 0 !important;
  overflow: hidden !important;
  background:
    radial-gradient(120px 80px at 15% 50%, rgba(var(--mc-rgb, 80,160,255),.13), transparent 65%),
    linear-gradient(135deg, rgba(255,255,255,.07) 0%, rgba(0,0,0,.22) 100%) !important;
  border: 1.5px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 8px 24px rgba(0,0,10,.35) !important;
  transition: transform .18s, box-shadow .18s !important;
  min-height: 84px !important;
}
.miner-card:active { transform: scale(0.98) !important; }
.miner-card.miner-card--locked {
  opacity: .55 !important;
}

/* Left accent bar */
.mc-active-bar {
  position: absolute !important;
  left: 0 !important; top: 12px !important; bottom: 12px !important;
  width: 3px !important;
  border-radius: 0 3px 3px 0 !important;
  opacity: .8 !important;
}

/* Tier badge */
.mc-tier {
  position: absolute !important;
  top: 8px !important; right: 10px !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--mc, #6abaff) !important;
  opacity: .7 !important;
}

/* Glow ring behind avatar */
.mc-glow-ring {
  position: absolute !important;
  left: 4px !important; top: 50% !important;
  transform: translateY(-50%) !important;
  width: 80px !important; height: 80px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, var(--mg, rgba(80,160,255,.25)), transparent 70%) !important;
  pointer-events: none !important;
}

/* Avatar area */
.mc-avatar {
  width: 84px !important;
  height: 84px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px !important;
}
.mc-img {
  width: 68px !important;
  height: 68px !important;
  object-fit: contain !important;
  display: block !important;
}

/* Body text */
.mc-body {
  flex: 1 !important;
  padding: 12px 14px 12px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.mc-name {
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: .2px !important;
  color: #fff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.45) !important;
}

/* Stats row */
.mc-stats {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.mc-stat {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.mc-stat-ico { width: 14px !important; height: 14px !important; object-fit: contain !important; }
.mc-stat-val {
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #fff !important;
  letter-spacing: -.3px !important;
}
.mc-stat-lbl {
  font-size: 11px !important;
  color: rgba(255,255,255,.45) !important;
  margin-top: 1px !important;
}
.mc-count {
  font-size: 14px !important;
  font-weight: 900 !important;
  color: var(--mc, #6abaff) !important;
  padding: 4px 10px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  letter-spacing: .2px !important;
}
.mc-count--lock {
  color: rgba(255,255,255,.35) !important;
  font-size: 16px !important;
}

/* Per-miner accent colors via CSS variables */
.miner-card[data-miner="baby"]   { --mc: #4ea0db; --mg: rgba(78,160,219,.30); }
.miner-card[data-miner="green"]  { --mc: #3db53a; --mg: rgba(61,181,58,.28);  }
.miner-card[data-miner="yellow"] { --mc: #e8a800; --mg: rgba(232,168,0,.30);  }
.miner-card[data-miner="blue"]   { --mc: #2a80ff; --mg: rgba(42,128,255,.32); }
.miner-card[data-miner="red"]    { --mc: #e02a1a; --mg: rgba(224,42,26,.32);  }

/* Depot sell panel — tighter layout */
.depot-sell-panel {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  margin: 0 14px !important;
}
.dsp-reward-line {
  font-size: 16px !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
}
.dsp-btn {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  padding: 12px 18px !important;
  font-size: 15px !important;
  border-radius: 14px !important;
  min-width: 80px !important;
  max-width: 110px !important;
}

/* Remove old title-wrap on home (now using home-topbar) */
#screen-home > .title-wrap { display: none !important; }

/* ════════════════════════════════════════════════════════════════
   MENU SCREEN — Kart Grid
   ════════════════════════════════════════════════════════════════ */
.menu-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 14px;
}
.menu-card {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 20px;
  border: 1.5px solid rgba(255,255,255,.10);
  background:
    radial-gradient(200px 120px at 0% 50%, rgba(255,255,255,.08), transparent 65%),
    linear-gradient(160deg, rgba(255,255,255,.07), rgba(0,0,0,.22));
  box-shadow: 0 8px 24px rgba(0,0,10,.35);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  width: 100%;
  text-align: left;
}
.menu-card:active { transform: scale(0.97); }
.menu-card:first-child { grid-column: unset; }

.menu-card--spin {
  border-color: rgba(251,191,36,.28);
  background:
    radial-gradient(120px 100px at 50% 0%, rgba(251,191,36,.18), transparent 65%),
    linear-gradient(160deg, rgba(251,191,36,.07), rgba(0,0,0,.22));
}
.menu-card--swap {
  border-color: rgba(80,200,120,.25);
  background:
    radial-gradient(120px 100px at 50% 0%, rgba(80,200,120,.15), transparent 65%),
    linear-gradient(160deg, rgba(80,200,120,.06), rgba(0,0,0,.22));
}

.menu-card-ico {
  font-size: 32px;
  line-height: 1;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  flex-shrink: 0;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.45));
}
.menu-card-texts {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.menu-card-label {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .3px;
  color: #fff;
}
.menu-card-sub {
  font-size: 12px;
  color: rgba(255,255,255,.45);
  display: flex;
  align-items: center;
  gap: 4px;
}
.menu-card-sub-ico {
  width: 14px;
  height: 14px;
  object-fit: contain;
  vertical-align: middle;
}
.menu-card-badge {
  position: absolute;
  top: 8px; right: 10px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(239,68,68,.5);
}

/* ════════════════════════════════════════════════════════════════
   SPIN SCREEN — Premium
   ════════════════════════════════════════════════════════════════ */
#screen-spin {
  display: none;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  padding-bottom: 24px;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(251,191,36,.12), transparent 55%),
    radial-gradient(ellipse 60% 60% at 10% 80%, rgba(99,102,241,.10), transparent 55%);
}
#screen-spin.active { display: flex !important; }

.spin-header {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 12px 14px 6px;
  gap: 10px;
}
.back-btn {
  font-size: 26px;
  font-weight: 300;
  color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  cursor: pointer;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.spin-title {
  flex: 1;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .3px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.spin-ticket-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: rgba(255,255,255,.6);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  transition: all .25s;
}
.spin-ticket-badge--active {
  background: rgba(251,191,36,.15);
  border-color: rgba(251,191,36,.4);
  color: rgba(255,255,255,.8);
}
.spin-ticket-badge b {
  color: #fbbf24;
  font-size: 16px;
  font-weight: 900;
}
.spin-ticket-icon {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  box-shadow: 0 2px 8px rgba(251,191,36,.4);
}

/* Wheel container */
.wheel-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 14px 0 8px;
  position: relative;
}
.wheel-outer-ring {
  position: relative;
  width: 316px;
  height: 316px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(0,0,0,.25));
  border: 2px solid rgba(255,255,255,.08);
  box-shadow:
    0 0 0 6px rgba(255,255,255,.03),
    0 0 50px rgba(251,191,36,.20),
    0 24px 60px rgba(0,0,30,.65);
  padding: 8px;
  box-sizing: border-box;
}
#spinCanvas {
  border-radius: 50%;
  display: block;
  width: 300px !important;
  height: 300px !important;
}

/* Prize reveal */
.spin-prize-reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(251,191,36,.18), rgba(245,158,11,.08));
  border: 1.5px solid rgba(251,191,36,.4);
  margin: 6px 14px;
  width: calc(100% - 28px);
  box-sizing: border-box;
  box-shadow: 0 8px 24px rgba(251,191,36,.15);
}
.spin-prize-reveal.hidden { display: none; }
.spr-ico { position: relative; }
.spr-img {
  width: 56px; height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.5));
}
.spr-label {
  font-size: 18px;
  font-weight: 900;
  color: #fbbf24;
  text-align: center;
  text-shadow: 0 2px 10px rgba(251,191,36,.4);
}
@keyframes sprPop {
  0%   { transform: scale(.7) rotate(-5deg); opacity: 0; }
  50%  { transform: scale(1.1) rotate(2deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.spr-pop { animation: sprPop .55s cubic-bezier(.34,1.56,.64,1); }

/* Spin footer */
.spin-footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 4px;
}
.spin-hint {
  font-size: 12px;
  color: rgba(255,255,255,.4);
  text-align: center;
  letter-spacing: .2px;
}
.spin-btn {
  width: 100%;
  max-width: 300px;
  padding: 17px 24px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #1a1200;
  background: linear-gradient(135deg, #fcd34d, #fbbf24 40%, #f59e0b 80%, #d97706);
  box-shadow:
    0 8px 24px rgba(251,191,36,.5),
    0 2px 0 rgba(255,255,255,.25) inset,
    0 -2px 0 rgba(0,0,0,.15) inset;
  transition: transform .12s, box-shadow .12s;
  position: relative;
  overflow: hidden;
}
.spin-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  animation: spinBtnSheen 3s infinite;
}
@keyframes spinBtnSheen {
  0%   { left: -100%; }
  40%  { left: 120%; }
  100% { left: 120%; }
}
.spin-btn:active { transform: scale(0.97); box-shadow: 0 4px 14px rgba(251,191,36,.35); }
.spin-btn:disabled { opacity: .5; cursor: not-allowed; }
.spin-btn:disabled::before { display: none; }
.spin-btn-ico { margin-right: 8px; font-size: 20px; }

/* Spin history */
.spin-history-wrap {
  width: 100%;
  padding: 4px 14px 8px;
}
.spin-history-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: 8px;
  padding-left: 2px;
}
.spin-history-list { display: flex; flex-direction: column; gap: 6px; }
.spin-hist-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.07);
  font-size: 13px;
}
.shi-label {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.shi-ico {
  width: 18px; height: 18px;
  object-fit: contain;
  vertical-align: middle;
}
.shi-date { font-size: 11px; color: rgba(255,255,255,.35); }

/* Menu card arrow */
.menu-card-arrow {
  font-size: 20px;
  color: rgba(255,255,255,.25);
  margin-left: auto;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════
   SWAP SCREEN
   ════════════════════════════════════════════════════════════════ */
#screen-swap {
  display: none;
  flex-direction: column;
  overflow-y: auto;
}
#screen-swap.active {
  display: flex !important;
}
.swap-header {
  display: flex;
  align-items: center;
  padding: 10px 14px 6px;
  gap: 10px;
}
.swap-title {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .3px;
  flex: 1;
}
.swap-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 14px 20px;
}

/* Rate card */
.swap-rate-card {
  border-radius: 22px;
  padding: 20px 16px 14px;
  background:
    radial-gradient(180px 100px at 50% 0%, rgba(80,200,120,.18), transparent 60%),
    linear-gradient(160deg, rgba(255,255,255,.07), rgba(0,0,0,.20));
  border: 1.5px solid rgba(80,200,120,.25);
  box-shadow: 0 8px 28px rgba(0,20,10,.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.swap-rate-row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  justify-content: center;
}
.swap-rate-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.sri-ico { font-size: 30px; }
.sri-ico-img { width: 30px; height: 30px; object-fit: contain; }
.sri-val {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -.5px;
}
.swap-bonus-val { color: #4ade80; }
.sri-lbl {
  font-size: 11px;
  color: rgba(255,255,255,.5);
  letter-spacing: .5px;
}
.swap-rate-arrow {
  font-size: 22px;
  color: rgba(255,255,255,.3);
  font-weight: 300;
  padding-bottom: 12px;
}
.swap-bonus-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(74,222,128,.12);
  border: 1px solid rgba(74,222,128,.28);
  font-size: 13px;
  font-weight: 800;
  color: #4ade80;
}
.sbt-ico { font-size: 15px; }

/* Input card */
.swap-input-card {
  border-radius: 20px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.swap-balance-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sbal-lbl { font-size: 12px; color: rgba(255,255,255,.5); letter-spacing: .4px; }
.sbal-val { font-size: 15px; font-weight: 900; color: #fbbf24; }

.swap-inp-row { display: flex; flex-direction: column; gap: 6px; }
.swap-inp-label { font-size: 12px; color: rgba(255,255,255,.5); letter-spacing: .4px; }
.swap-inp-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.swap-inp-btn {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1.5px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  color: #fff;
  font-size: 20px;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .12s;
}
.swap-inp-btn:active { background: rgba(255,255,255,.14); }
.swap-gem-input {
  flex: 1;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1.5px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  text-align: center;
  outline: none;
  min-width: 0;
}
.swap-gem-input:focus { border-color: rgba(80,200,120,.45); }
.swap-min-hint { font-size: 11px; color: rgba(255,255,255,.35); text-align: center; }

.swap-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(74,222,128,.07);
  border: 1px solid rgba(74,222,128,.18);
  font-size: 14px;
  color: rgba(255,255,255,.7);
}
.swap-preview-val {
  font-size: 20px;
  font-weight: 900;
  color: #4ade80;
}
.swap-preview-ico { width: 18px; height: 18px; object-fit: contain; }

.swap-exec-btn {
  width: 100%;
  padding: 15px;
  border-radius: 16px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .5px;
  color: #fff;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  box-shadow: 0 6px 20px rgba(34,197,94,.35), 0 2px 0 rgba(255,255,255,.1) inset;
  transition: transform .12s;
}
.swap-exec-btn:active { transform: scale(0.97); }
.swap-exec-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Swap history */
.swap-history-wrap { display: flex; flex-direction: column; gap: 8px; }
.swap-hist-title {
  font-size: 12px; font-weight: 800; letter-spacing: .8px;
  text-transform: uppercase; color: rgba(255,255,255,.4);
}
.swap-hist-list { display: flex; flex-direction: column; gap: 6px; }

/* Swap toast */
.swap-toast {
  position: fixed;
  bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px);
  padding: 12px 20px;
  border-radius: 16px;
  background: rgba(34,197,94,.15);
  border: 1.5px solid rgba(34,197,94,.4);
  color: #4ade80;
  font-size: 14px; font-weight: 800;
  z-index: 500;
  opacity: 0;
  transition: all .3s;
  white-space: nowrap;
  pointer-events: none;
}
.swap-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ════════════════════════════════════════════════════════════════
   STORE SCREEN — Premium
   ════════════════════════════════════════════════════════════════ */
.store-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 8px;
}
.store-header-title {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .3px;
}
.store-balance-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 15px;
  font-weight: 900;
}
.sbp-ico { width: 18px; height: 18px; object-fit: contain; }

/* Topup CTA button */
.store-topup-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(100% - 28px);
  margin: 0 14px 12px;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1.5px solid rgba(251,191,36,.30);
  background:
    radial-gradient(200px 100px at 0% 50%, rgba(251,191,36,.14), transparent),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(0,0,0,.18));
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(251,191,36,.12);
  transition: transform .13s;
}
.store-topup-btn:active { transform: scale(0.98); }
.stb-left { display: flex; align-items: center; gap: 12px; flex: 1; }
.stb-ico {
  font-size: 26px;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(251,191,36,.4);
}
.stb-texts { display: flex; flex-direction: column; gap: 3px; }
.stb-title { font-size: 15px; font-weight: 900; color: #fff; }
.stb-sub { font-size: 12px; color: rgba(255,255,255,.45); }
.stb-arrow { font-size: 22px; color: rgba(255,255,255,.3); margin-left: auto; }

/* Store cards */
#screen-store .store-list { display: flex; flex-direction: column; gap: 12px; padding: 0 14px 80px; }
.card.panel {
  padding: 0 !important;
  overflow: hidden;
  border-radius: 20px !important;
}
.sc-miner-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  overflow: hidden;
}
.sc-tier-badge { display: none; }
.sc-miner-img {
  height: 82px;
  width: auto;
  object-fit: contain;
  margin-top: 10px;
}
.sc-body { padding: 12px 14px 14px; }
.sc-name {
  font-size: 17px;
  font-weight: 900;
  margin-bottom: 8px;
}
.sc-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
}
.sc-stat {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.09);
  padding: 5px 10px;
  border-radius: 10px;
}
.sc-stat--own { gap: 4px; }
.sc-own-ico { font-size: 13px; }
.sc-stat-ico { width: 14px; height: 14px; object-fit: contain; }
.sc-stat-lbl { color: rgba(255,255,255,.45); font-size: 11px; font-weight: 600; }
.sc-price-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 900;
}
.sc-price-val { font-size: 16px; }
.sc-buy-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sc-qty {
  display: flex;
  align-items: center;
  gap: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
}
.sc-qbtn {
  width: 36px; height: 36px;
  border: none;
  background: rgba(255,255,255,.07);
  color: #fff;
  font-size: 18px;
  font-weight: 300;
  cursor: pointer;
}
.sc-qbtn:active { background: rgba(255,255,255,.15); }
.sc-qval {
  width: 36px;
  text-align: center;
  font-size: 15px;
  font-weight: 900;
  color: #fff;
}
.sc-buy-btn {
  flex: 1;
  padding: 10px 14px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  letter-spacing: .3px;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
  transition: transform .12s;
}
.sc-buy-btn:active { transform: scale(0.97); }

/* ════════════════════════════════════════════════════════════════
   TOPUP SCREEN — Premium
   ════════════════════════════════════════════════════════════════ */
#screen-topup {
  display: none;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding-bottom: 24px;
}
#screen-topup.active { display: flex !important; }
.topup-header {
  display: flex;
  align-items: center;
  padding: 12px 14px 4px;
  gap: 10px;
}
.topup-header-title {
  font-size: 20px;
  font-weight: 900;
  flex: 1;
}

/* Amount card */
.topup-amount-card {
  margin: 0 14px;
  padding: 20px;
  border-radius: 24px;
  background:
    radial-gradient(200px 120px at 50% 0%, rgba(99,102,241,.18), transparent),
    linear-gradient(160deg, rgba(255,255,255,.07), rgba(0,0,0,.20));
  border: 1.5px solid rgba(99,102,241,.25);
  box-shadow: 0 8px 28px rgba(0,0,20,.35);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tac-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.tac-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tac-dollar {
  font-size: 32px;
  font-weight: 900;
  color: rgba(255,255,255,.5);
}
.tac-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 44px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -1px;
  width: 0;
}
.tac-quick-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tac-quick {
  flex: 1;
  min-width: 44px;
  padding: 8px 4px;
  border-radius: 12px;
  border: 1.5px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.7);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all .15s;
}
.tac-quick:active, .tac-quick--active {
  background: rgba(99,102,241,.3);
  border-color: rgba(99,102,241,.6);
  color: #fff;
}

/* Preview card */
.topup-preview-card {
  margin: 0 14px;
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tpc-row {
  display: flex;
  align-items: center;
  gap: 0;
}
.tpc-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.tpc-div {
  width: 1px;
  height: 48px;
  background: rgba(255,255,255,.10);
  flex-shrink: 0;
}
.tpc-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}
.tpc-val {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 22px;
  font-weight: 900;
}
.tpc-val--green { color: #4ade80; }
.tpc-ico { width: 20px; height: 20px; object-fit: contain; }
.tpc-sub { font-size: 11px; color: rgba(255,255,255,.4); }
.tpc-rate {
  font-size: 11px;
  color: rgba(255,255,255,.3);
  text-align: center;
  letter-spacing: .2px;
}

/* Ticket info */
.topup-ticket-info {
  margin: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(251,191,36,.08);
  border: 1px solid rgba(251,191,36,.22);
}
.tti-ico { font-size: 22px; flex-shrink: 0; }
.tti-text { font-size: 13px; color: rgba(255,255,255,.65); line-height: 1.4; }

/* Pay button */
.topup-pay-btn {
  margin: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 20px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .4px;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #4f46e5 50%, #4338ca);
  box-shadow:
    0 8px 24px rgba(99,102,241,.45),
    0 2px 0 rgba(255,255,255,.15) inset;
  transition: transform .12s;
  position: relative;
  overflow: hidden;
}
.topup-pay-btn::before {
  content:'';
  position:absolute;
  top:0; left:-100%;
  width:100%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  animation: payBtnSheen 3s infinite;
}
@keyframes payBtnSheen {
  0%  { left:-100%; }
  40% { left:120%; }
  100%{ left:120%; }
}
.topup-pay-btn:active { transform:scale(0.97); }
.tpb-ico { font-size: 20px; }
.tpb-arrow { margin-left: auto; font-size: 20px; color: rgba(255,255,255,.4); }

/* ════════════════════════════════════════════════════════════════
   CRYPTO SELECT SCREEN — Premium
   ════════════════════════════════════════════════════════════════ */
#screen-crypto {
  display: none;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  padding-bottom: 20px;
}
#screen-crypto.active { display: flex !important; }
.crypto-header {
  display: flex;
  align-items: center;
  padding: 12px 14px 8px;
  gap: 10px;
}
.crypto-header-title {
  flex: 1;
  font-size: 20px;
  font-weight: 900;
}
.crypto-refresh-btn {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  color: rgba(255,255,255,.6);
  font-size: 13px;
  padding: 6px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
.crypto-section-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  padding: 4px 16px 10px;
}
.crypto-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 14px;
}
.crypto-item {
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 14px 16px !important;
  border-radius: 18px !important;
  cursor: pointer;
  background:
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(0,0,0,.18));
  border: 1.5px solid rgba(255,255,255,.09) !important;
  transition: transform .13s, background .13s;
}
.crypto-item:active {
  transform: scale(0.98);
  background: linear-gradient(135deg, rgba(255,255,255,.11), rgba(0,0,0,.22)) !important;
}
.ci-img-wrap {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.ci-img { width: 36px; height: 36px; object-fit: contain; }
.ci-body { flex: 1; }
.ci-name { font-size: 16px; font-weight: 900; }
.ci-net { font-size: 12px; color: rgba(255,255,255,.45); margin-top: 2px; }
.ci-price {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.5);
}
.ci-arrow { font-size: 22px; color: rgba(255,255,255,.25); }

/* ════════════════════════════════════════════════════════════════
   SEND (Payment) SCREEN — Premium
   ════════════════════════════════════════════════════════════════ */
#screen-send {
  display: none;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding-bottom: 24px;
}
#screen-send.active { display: flex !important; }
.send-header {
  display: flex;
  align-items: center;
  padding: 12px 14px 4px;
  gap: 10px;
}
.send-header-title {
  flex: 1;
  font-size: 20px;
  font-weight: 900;
}
.send-status-bar {
  margin: 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(59,130,246,.12);
  border: 1px solid rgba(59,130,246,.28);
  font-size: 13px;
  color: rgba(255,255,255,.7);
}
.ssb-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #3b82f6;
  flex-shrink: 0;
}
.ssb-dot--pulse {
  animation: ssbPulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(59,130,246,.7);
}
@keyframes ssbPulse {
  0%   { box-shadow: 0 0 0 0 rgba(59,130,246,.7); }
  70%  { box-shadow: 0 0 0 8px rgba(59,130,246,0); }
  100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); }
}
.send-amount-card {
  margin: 0 14px;
  padding: 20px;
  border-radius: 22px;
  background:
    radial-gradient(180px 100px at 50% 0%, rgba(99,102,241,.15), transparent),
    linear-gradient(160deg, rgba(255,255,255,.07), rgba(0,0,0,.20));
  border: 1.5px solid rgba(99,102,241,.22);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.sac-label {
  font-size: 11px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: rgba(255,255,255,.4);
  align-self: flex-start;
}
.sac-amount {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.5px;
  text-align: center;
  word-break: break-all;
}
.sac-copy-btn, .sad-copy-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 14px;
  border: 1.5px solid rgba(99,102,241,.4);
  background: rgba(99,102,241,.12);
  color: #a5b4fc;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  width: 100%;
  justify-content: center;
  transition: background .13s;
}
.sac-copy-btn:active, .sad-copy-btn:active {
  background: rgba(99,102,241,.25);
}

.send-addr-card {
  margin: 0 14px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sad-label {
  font-size: 11px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: rgba(255,255,255,.4);
}
.sad-addr {
  font-size: 13px;
  font-weight: 700;
  word-break: break-all;
  line-height: 1.5;
  color: rgba(255,255,255,.8);
  padding: 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.08);
  letter-spacing: .3px;
}

.send-warning {
  margin: 0 14px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(234,179,8,.08);
  border: 1px solid rgba(234,179,8,.2);
  font-size: 12px;
  color: rgba(255,255,255,.5);
  line-height: 1.4;
}
.sw-ico { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

/* ════════════════════════════════════════════════════════════════
   WITHDRAW SCREEN — Premium
   ════════════════════════════════════════════════════════════════ */
#screen-withdraw {
  display: none;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding-bottom: 24px;
}
#screen-withdraw.active { display: flex !important; }
.wd-header {
  display: flex;
  align-items: center;
  padding: 12px 14px 4px;
  gap: 10px;
}
.wd-header-title {
  flex: 1;
  font-size: 20px;
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wd-coin-badge {
  font-size: 13px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(251,191,36,.15);
  border: 1px solid rgba(251,191,36,.3);
  color: #fbbf24;
  letter-spacing: .3px;
}
.wd-fee-banner {
  margin: 0 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 13px;
  color: rgba(255,255,255,.55);
}
.wd-fee-banner b { color: rgba(255,255,255,.75); margin-left: 2px; }
.wfb-ico { font-size: 14px; }

.wd-form-card {
  margin: 0 14px;
  padding: 18px;
  border-radius: 22px;
  background:
    linear-gradient(160deg, rgba(255,255,255,.07), rgba(0,0,0,.20));
  border: 1.5px solid rgba(255,255,255,.10);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wd-field { display: flex; flex-direction: column; gap: 6px; }
.wd-field-label {
  font-size: 11px; font-weight: 800; letter-spacing: .8px;
  text-transform: uppercase; color: rgba(255,255,255,.4);
}
.wd-field-input {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px;
  border-radius: 14px;
  border: 1.5px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  outline: none;
  transition: border-color .2s;
}
.wd-field-input:focus { border-color: rgba(251,191,36,.45); }
.wd-gems-row { position: relative; }
.wd-gems-input { padding-right: 42px; font-size: 20px; font-weight: 900; }
.wd-gems-ico {
  position: absolute;
  right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 20px;
}

.wd-get-card {
  padding: 14px;
  border-radius: 16px;
  background: rgba(251,191,36,.08);
  border: 1px solid rgba(251,191,36,.20);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wgc-lbl { font-size: 12px; color: rgba(255,255,255,.45); }
.wgc-amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 24px;
  font-weight: 900;
  color: #fbbf24;
}
.wgc-coin { font-size: 14px; color: rgba(255,255,255,.5); font-weight: 700; }

.wd-submit-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px;
  border-radius: 16px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 900;
  color: #1a1200;
  background: linear-gradient(135deg, #fcd34d, #fbbf24, #f59e0b);
  box-shadow: 0 6px 20px rgba(251,191,36,.4), 0 2px 0 rgba(255,255,255,.2) inset;
  transition: transform .12s;
}
.wd-submit-btn:active { transform: scale(0.97); }
.wsb-ico { font-size: 18px; }

.wd-history-card {
  margin: 0 14px;
  padding: 16px;
  border-radius: 20px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.whc-title {
  font-size: 11px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: rgba(255,255,255,.35);
  margin-bottom: 12px;
}
.wd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.wd-table th {
  text-align: left;
  padding: 6px 4px;
  color: rgba(255,255,255,.35);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.wd-table td {
  padding: 10px 4px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  color: rgba(255,255,255,.75);
}
.wd-table tr:last-child td { border-bottom: none; }

/* Store card miner animations */
.sc-miner-img.miner-anim-baby   { animation: babyBounce  1.8s cubic-bezier(.4,0,.6,1) infinite; transform-origin:50% 100%; }
.sc-miner-img.miner-anim-green  { animation: greenSwing  1.05s ease-in-out infinite; transform-origin:50% 88%; }
.sc-miner-img.miner-anim-yellow { animation: yellowExcite 1.5s ease-in-out infinite; }
.sc-miner-img.miner-anim-blue   { animation: blueFloat   2.6s ease-in-out infinite; }
.sc-miner-img.miner-anim-red    { animation: redDominate 2.0s ease-in-out infinite; transform-origin:50% 58%; }

/* Rate info in withdraw/send */
.wgc-rate {
  font-size: 11px;
  color: rgba(255,255,255,.35);
  margin-top: 4px;
  letter-spacing: .2px;
}
.sac-rate {
  font-size: 11px;
  color: rgba(255,255,255,.35);
  text-align: center;
  letter-spacing: .2px;
}

/* Menu screen fix — ensure it renders as block not flex */
#screen-menu {
  display: none;
}
#screen-menu.active {
  display: block !important;
}

/* Store screen fix */
#screen-store {
  display: none;
}
#screen-store.active {
  display: block !important;
}

/* ════════════════════════════════════════════════════════════════
   DAILY BONUS — Menu card
   ════════════════════════════════════════════════════════════════ */
.menu-card--daily {
  border-color: rgba(74,222,128,.28);
  background:
    radial-gradient(120px 100px at 50% 0%, rgba(74,222,128,.15), transparent 65%),
    linear-gradient(160deg, rgba(74,222,128,.07), rgba(0,0,0,.22));
}
.daily-ico-wrap {
  position: relative;
  overflow: visible !important;
}
.daily-ico-pick {
  font-size: 26px;
  display: inline-block;
  animation: dailyPickIdle 2.2s ease-in-out infinite;
  transform-origin: 70% 80%;
}
@keyframes dailyPickIdle {
  0%,100% { transform: rotate(-12deg) translateY(0); }
  40%     { transform: rotate(8deg)  translateY(-3px); }
  70%     { transform: rotate(-6deg) translateY(-1px); }
}
.menu-daily-badge {
  background: #4ade80 !important;
  color: #052e16 !important;
  font-weight: 900;
  font-size: 12px;
}

/* ════════════════════════════════════════════════════════════════
   DAILY SCREEN
   ════════════════════════════════════════════════════════════════ */
#screen-daily {
  display: none;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  padding-bottom: 90px;
}
#screen-daily.active { display: flex !important; }

.daily-header {
  display: flex;
  align-items: center;
  padding: 12px 14px 4px;
  gap: 10px;
}
.daily-title {
  flex: 1;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .3px;
}

/* Hero pick animation */
.daily-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110px;
  margin: 0 14px;
}
.daily-pick-anim {
  font-size: 72px;
  line-height: 1;
  filter: drop-shadow(0 0 24px rgba(74,222,128,.6));
  animation: heroPickIdle 2.5s ease-in-out infinite;
  transform-origin: 60% 75%;
  z-index: 2;
  position: relative;
}
@keyframes heroPickIdle {
  0%,100% { transform: rotate(-15deg) scale(1); }
  35%     { transform: rotate(10deg)  scale(1.05) translateY(-6px); }
  60%     { transform: rotate(-8deg)  scale(.98); }
}
.daily-rays {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.daily-ray {
  position: absolute;
  left: 50%; top: 50%;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(to top, rgba(74,222,128,0), rgba(74,222,128,.5));
  transform-origin: 50% 100%;
  animation: rayPulse 2.5s ease-in-out infinite;
}
@keyframes rayPulse {
  0%,100% { opacity: .25; height: 30px; }
  50%     { opacity: .7;  height: 48px; }
}

/* Streak bar */
.daily-streak-bar {
  display: flex;
  gap: 6px;
  padding: 0 14px;
  justify-content: center;
}
.dsb-day {
  flex: 1;
  max-width: 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.dsb-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  transition: all .3s;
}
.dsb-dot--claimed {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  border-color: #4ade80;
  box-shadow: 0 0 10px rgba(74,222,128,.5);
}
.dsb-dot--today {
  border-color: #fbbf24;
  box-shadow: 0 0 8px rgba(251,191,36,.4);
  animation: todayPulse 1.8s ease-in-out infinite;
}
@keyframes todayPulse {
  0%,100% { box-shadow: 0 0 8px rgba(251,191,36,.4); }
  50%     { box-shadow: 0 0 18px rgba(251,191,36,.7); }
}
.dsb-lbl {
  font-size: 9px;
  color: rgba(255,255,255,.3);
  font-weight: 700;
  letter-spacing: .5px;
}

/* Prize grid */
.daily-prize-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 0 14px;
}
.dpg-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  transition: all .2s;
}
.dpg-card--coal  { border-color: rgba(148,163,184,.18); }
.dpg-card--gems  { border-color: rgba(168,85,247,.22);  background: rgba(168,85,247,.06); }
.dpg-ico  { font-size: 20px; line-height: 1; }
.dpg-ico img { width: 20px; height: 20px; object-fit: contain; }
.dpg-val  { font-size: 13px; font-weight: 900; color: #fff; }
.dpg-pct  { font-size: 9px;  color: rgba(255,255,255,.3); font-weight: 700; }

/* Claim button */
.daily-claim-btn {
  position: relative;
  margin: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 20px;
  border-radius: 22px;
  border: none;
  cursor: pointer;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .5px;
  color: #052e16;
  background: linear-gradient(135deg, #4ade80, #22c55e 50%, #16a34a);
  box-shadow:
    0 8px 28px rgba(74,222,128,.45),
    0 2px 0 rgba(255,255,255,.25) inset;
  overflow: hidden;
  transition: transform .13s;
}
.daily-claim-btn:active { transform: scale(0.97); }
.daily-claim-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}
.dcb-ico { font-size: 22px; animation: btnPickAnim 1.6s ease-in-out infinite; transform-origin: 60% 75%; }
@keyframes btnPickAnim {
  0%,100% { transform: rotate(-10deg); }
  40%     { transform: rotate(8deg) translateY(-3px); }
}
.dcb-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  animation: btnSheen 2.8s ease-in-out infinite;
}
@keyframes btnSheen {
  0%   { transform: translateX(-120%); }
  45%  { transform: translateX(120%);  }
  100% { transform: translateX(120%);  }
}

/* Claimed card */
.daily-claimed-card {
  margin: 0 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  background:
    radial-gradient(180px 100px at 0% 50%, rgba(74,222,128,.12), transparent),
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(0,0,0,.20));
  border: 1.5px solid rgba(74,222,128,.25);
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.daily-claimed-card.hidden { display: none !important; }
.dcc-ico { font-size: 42px; flex-shrink: 0; }
.dcc-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.dcc-title { font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: rgba(255,255,255,.4); }
.dcc-prize { font-size: 22px; font-weight: 900; color: #4ade80; }
.dcc-timer { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.dcc-timer-lbl { font-size: 10px; color: rgba(255,255,255,.35); font-weight: 700; }
.dcc-timer-val { font-size: 18px; font-weight: 900; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }

/* Prize pop animation */
.daily-prize-pop { animation: dailyPrizePop .5s cubic-bezier(.2,1.4,.5,1) both; }
@keyframes dailyPrizePop {
  0%   { transform: scale(0.4) rotate(-8deg); opacity: 0; }
  70%  { transform: scale(1.08) rotate(2deg);  opacity: 1; }
  100% { transform: scale(1)    rotate(0);     opacity: 1; }
}

/* History */
.daily-history {
  padding: 0 14px;
}
.dh-title {
  font-size: 11px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: rgba(255,255,255,.3);
  margin-bottom: 10px;
}
.dh-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.dh-item:last-child { border-bottom: none; }
.dh-ico  { font-size: 18px; width: 26px; text-align: center; flex-shrink: 0; }
.dh-ico img { width: 18px; height: 18px; object-fit: contain; }
.dh-val  { font-size: 14px; font-weight: 900; flex: 1; }
.dh-date { font-size: 11px; color: rgba(255,255,255,.35); }

/* Bounce on claim */
@keyframes pickStrike {
  0%   { transform: rotate(-15deg) scale(1); }
  25%  { transform: rotate(20deg)  scale(1.2) translateY(-12px); }
  50%  { transform: rotate(-5deg)  scale(1.1) translateY(-4px); }
  75%  { transform: rotate(5deg)   scale(1.05); }
  100% { transform: rotate(-15deg) scale(1); }
}
.pick-striking { animation: pickStrike .6s ease-out forwards !important; }

/* ════════════════════════════════════════════════════════════════
   DAILY SCREEN — Premium Upgrade
   ════════════════════════════════════════════════════════════════ */

/* Hero area — larger, more dramatic */
.daily-hero {
  position: relative;
  height: 140px !important;
  margin: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Ground glow under pick */
.daily-hero::before {
  content: '';
  position: absolute;
  bottom: 8px; left: 50%;
  transform: translateX(-50%);
  width: 90px; height: 18px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(74,222,128,.35), transparent 70%);
  animation: groundGlowPulse 2.5s ease-in-out infinite;
}
@keyframes groundGlowPulse {
  0%,100% { opacity:.5; transform:translateX(-50%) scaleX(1); }
  50%     { opacity:1;  transform:translateX(-50%) scaleX(1.3); }
}

/* Bigger pick with richer glow */
.daily-pick-anim {
  font-size: 86px !important;
  filter:
    drop-shadow(0 0 18px rgba(74,222,128,.7))
    drop-shadow(0 0 36px rgba(74,222,128,.35))
    drop-shadow(0 8px 24px rgba(0,0,0,.6)) !important;
  z-index: 2;
  position: relative;
}

/* Strike animation — more dramatic */
@keyframes heroPickIdle {
  0%,100% { transform: rotate(-18deg) scale(1)   translateY(0); }
  30%     { transform: rotate(12deg)  scale(1.08) translateY(-10px); }
  55%     { transform: rotate(-8deg)  scale(.97)  translateY(2px); }
  75%     { transform: rotate(-14deg) scale(1.01) translateY(-3px); }
}

/* Spark particles on strike */
.daily-spark {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  pointer-events: none;
  animation: sparkFly .6s ease-out forwards;
}
@keyframes sparkFly {
  0%   { opacity:1; transform: translate(0,0) scale(1); }
  100% { opacity:0; transform: var(--tx, translate(30px,-30px)) scale(0); }
}

/* Pick strike animation */
@keyframes pickStrike {
  0%   { transform: rotate(-18deg) scale(1); }
  15%  { transform: rotate(22deg)  scale(1.18) translateY(-14px); }
  30%  { transform: rotate(5deg)   scale(1.05) translateY(4px); }
  50%  { transform: rotate(-10deg) scale(.99); }
  75%  { transform: rotate(-16deg) scale(1.01); }
  100% { transform: rotate(-18deg) scale(1); }
}
.pick-striking {
  animation: pickStrike .65s cubic-bezier(.2,1.3,.5,1) forwards !important;
  filter:
    drop-shadow(0 0 28px rgba(74,222,128,.9))
    drop-shadow(0 0 50px rgba(74,222,128,.5))
    drop-shadow(0 0 70px rgba(255,255,180,.3)) !important;
}

/* Prize reveal — bigger pop with glow */
.daily-claimed-card {
  margin: 0 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 18px;
  border-radius: 24px;
  background:
    radial-gradient(180px 100px at 0% 50%, rgba(74,222,128,.18), transparent),
    linear-gradient(135deg, rgba(255,255,255,.09), rgba(0,0,0,.22));
  border: 1.5px solid rgba(74,222,128,.35);
  box-shadow:
    0 8px 32px rgba(0,0,0,.4),
    0 0 40px rgba(74,222,128,.12);
}

/* Streak dots — more visual */
.dsb-dot {
  width: 32px !important;
  height: 32px !important;
  font-size: 14px !important;
}
.dsb-dot--claimed {
  background: linear-gradient(135deg, #4ade80, #16a34a) !important;
  box-shadow: 0 0 12px rgba(74,222,128,.6), 0 2px 0 rgba(255,255,255,.2) inset !important;
}
.dsb-dot--today {
  background: rgba(251,191,36,.15) !important;
  box-shadow: 0 0 12px rgba(251,191,36,.5) !important;
}

/* Claim button — bigger and more dramatic */
.daily-claim-btn {
  margin: 0 14px;
  padding: 20px !important;
  font-size: 19px !important;
  border-radius: 24px !important;
  box-shadow:
    0 10px 32px rgba(74,222,128,.5),
    0 2px 0 rgba(255,255,255,.3) inset !important;
  letter-spacing: .8px !important;
}
.dcb-ico {
  font-size: 26px !important;
}

/* Prize pop — more spring */
@keyframes dailyPrizePop {
  0%   { transform: scale(.3) rotate(-12deg); opacity:0; }
  50%  { transform: scale(1.12) rotate(3deg);  opacity:1; }
  75%  { transform: scale(.95) rotate(-1deg); }
  100% { transform: scale(1)   rotate(0);     opacity:1; }
}

/* Spin screen improvements */
.wheel-wrap {
  position: relative;
}
/* Glow ring behind canvas */
.wheel-wrap::before {
  content: '';
  position: absolute;
  inset: -15px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251,191,36,.12) 0%, transparent 70%);
  animation: wheelGlow 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes wheelGlow {
  0%,100% { opacity:.5; transform: scale(1); }
  50%     { opacity:1;  transform: scale(1.05); }
}

/* Spin button improvements */
.spin-play-btn {
  position: relative;
  overflow: hidden;
  font-size: 18px !important;
  letter-spacing: .6px;
}
.spin-play-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 50%);
  border-radius: inherit;
}

/* Prize reveal card */
#spinPrizeReveal {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ════ PERFORMANCE: Reduce bg anim on non-home screens ════════ */
body:not([data-screen="home"]):not([data-screen="store"]):not([data-screen="miners"]) #bgAnim {
  opacity: 0.15 !important;
  pointer-events: none;
}
/* GPU-accelerate bg particles */
.coal-particle, .gem-particle {
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* Spin canvas GPU hint */
#spinCanvas {
  will-change: contents;
  image-rendering: pixelated;
}
/* Reduce animation complexity on low-end */
@media (prefers-reduced-motion: reduce) {
  .coal-particle, .gem-particle,
  .daily-ray, .daily-pick-anim,
  .spin-play-btn::before { animation: none !important; }
}