:root{
  --txt:#ffffff;
  --panel: rgba(255,255,255,.08);
  --border: rgba(255,255,255,.16);
  --shadow: rgba(0,0,0,.40);

  --blue:#4ea0db;
  --blue2:#2b7fc0;
  --orange:#f0a11a;
  --orange2:#d47f00;
  --red:#e05a58;
  --red2:#b93b3a;
  --green:#9de27d;
}

*{box-sizing:border-box;}
html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--txt);}

body{
  background:
    radial-gradient(900px 600px at 15% -10%, rgba(120,180,220,.25) 0%, transparent 60%),
    radial-gradient(900px 600px at 85% 0%, rgba(80,120,160,.22) 0%, transparent 55%),
    radial-gradient(700px 700px at 50% 35%, rgba(255,255,255,.08) 0%, transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 2px, rgba(0,0,0,.00) 10px, rgba(0,0,0,.00) 18px),
    linear-gradient(180deg, #1a2733 0%, #101823 55%, #070b12 100%);
  overflow-x:hidden;
}

.game{max-width:520px;margin:0 auto;min-height:100vh;position:relative;padding-bottom: 98px;}

.panel{
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.24));
  background-color: var(--panel);
  border: 2px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 26px var(--shadow);
  backdrop-filter: blur(6px);
}

.wide{padding: 14px; border-radius: 16px; margin-top: 10px;}
.center{text-align:center;}
.small{font-size:12px;opacity:.88;line-height:1.35;}
.hint{margin-top: 12px;opacity: .92;font-size: 13px;line-height: 1.35;text-shadow: 0 2px 12px rgba(0,0,0,.55);}

/* HUD */
.hud{position: sticky;top: 0;z-index: 20;padding: 10px 10px 0 10px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;}
.hud-left,.hud-right{pointer-events:auto;}
.hud-left{width: 150px;padding: 8px 10px;}
.hud-row{display:flex;align-items:center;gap:8px;margin:2px 0;}
.hud-icon{width:22px;text-align:center;font-size:18px;}
.hud-val{font-weight:1000;font-size:18px;letter-spacing:.2px;text-shadow:0 3px 12px rgba(0,0,0,.55);}
.hud-right{width: 120px;padding: 8px 10px;display:flex;justify-content:space-between;align-items:center;}
.flag{font-size:18px;font-weight:1000;opacity:.95;}
.hud-menu{border:none;background:rgba(255,255,255,.14);color:var(--txt);font-weight:1000;border-radius:10px;width:44px;height:34px;cursor:pointer;}

/* Screens */
.screens{padding: 6px 10px 0 10px;}
.screen{display:none;}
.screen.active{display:block;}
.title-wrap{text-align:center;margin: 12px 0 8px;}
.title{font-size: 30px;font-weight: 1000;text-shadow: 0 4px 14px rgba(0,0,0,.65);}

/* HOME scene */
.scene{position:relative;height: 430px;margin-top: 10px;}
.slot{
  position:absolute;width: 106px;height: 126px;border-radius: 18px;
  background:
    radial-gradient(120px 120px at 30% 20%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.26));
  border: 2px solid rgba(255,255,255,.18);
  box-shadow: 0 14px 26px rgba(0,0,0,.34);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap: 6px;
}
.slot .m-ico{font-size: 42px; filter: drop-shadow(0 10px 18px rgba(0,0,0,.55));}
.slot .m-name{font-weight:1000;font-size: 13px; opacity: .95;}
.slot .m-count{font-weight:1000;font-size: 12px; opacity: .85;}

.s1{left:10px;top:28px;}
.s2{right:10px;top:28px;}
.s3{left:10px;top:196px;}
.s4{right:10px;top:196px;}
.s5{left:50%;top:112px;transform:translateX(-50%);}

.depot-bubble{
  position:absolute;left:50%;bottom: 30px;transform:translateX(-50%);
  width: 280px;padding: 12px 14px;border-radius: 18px;
  background: rgba(0,0,0,.30);
  border: 2px solid rgba(255,255,255,.18);
  box-shadow: 0 16px 30px rgba(0,0,0,.36);
  text-align:center;
}
.bubble-top{font-weight:1000; opacity:.92;}
.bubble-val{font-size:28px;font-weight:1000;margin-top:4px;text-shadow:0 3px 12px rgba(0,0,0,.55);}

.actionbar{margin-top: 12px;display:flex;align-items:center;justify-content:space-between;gap: 10px;padding: 10px 10px;}
.ab-left{display:flex;align-items:center;gap:10px;}
.ab-ico{font-size:24px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));}
.ab-val{font-size:22px;font-weight:1000;text-shadow:0 3px 12px rgba(0,0,0,.55);}

/* Buttons */
.btn-blue, .btn-orange, .btn-red{
  width: 100%;border:none;border-radius: 12px;padding: 12px 14px;font-weight: 1000;font-size: 18px;cursor:pointer;
  box-shadow: 0 12px 22px rgba(0,0,0,.40);
}
.btn-blue{background: linear-gradient(180deg, var(--blue), var(--blue2)); color:white;}
.btn-orange{background: linear-gradient(180deg, var(--orange), var(--orange2)); color:#2a1708;}
.btn-red{background: linear-gradient(180deg, var(--red), var(--red2)); color:white;}
.btn-orange.big{font-size:22px;padding: 14px 16px;border-radius: 14px;}
.btn-mini{
  margin-top:10px;border:none;border-radius: 10px;padding: 8px 10px;font-weight:1000;
  background: rgba(255,255,255,.14);color: white;cursor:pointer;
}

/* Store */
.store-list{margin-top: 10px; display:flex; flex-direction:column; gap: 12px;}
.card{display:flex;gap:12px;padding: 12px;border-radius: 16px;}
.avatar{
  width: 84px;height: 84px;border-radius: 16px;background: rgba(0,0,0,.18);
  border: 2px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;font-size:46px;
  box-shadow: 0 10px 18px rgba(0,0,0,.22) inset;
}
.cmeta{flex:1;}
.cname{font-size:22px;font-weight:1000;text-shadow:0 2px 12px rgba(0,0,0,.55);}
.ctext{margin-top:6px;font-size:14px;line-height:1.35;opacity:.96;}
.crow{margin-top:10px;display:flex;align-items:center;gap:10px;}
.qty{display:flex;align-items:center;gap:8px;background: rgba(0,0,0,.18);border: 2px solid rgba(255,255,255,.10);border-radius: 12px;padding: 6px 8px;}
.qbtn{width: 34px;height:34px;border:none;border-radius: 10px;background: rgba(255,255,255,.14);color:white;font-weight:1000;font-size:18px;cursor:pointer;}
.qval{min-width:28px;text-align:center;font-weight:1000;font-size:18px;}
.buybtn{flex:1;}
.buybtn button{width:100%;}

/* Store balance slim */
.slim{padding: 10px 12px;}
.balance-line{display:flex;align-items:center;gap:10px;}
.bal-ico{font-size:18px;}
.bal-num{font-size:20px;font-weight:1000;}
.bal-txt{opacity:.9;font-weight:900;font-size:14px;}

/* Topup */
.usd{
  width:100%;font-size: 34px;font-weight: 1000;text-align:center;padding: 10px 12px;border-radius: 14px;
  border: 2px solid rgba(255,255,255,.12);background: rgba(0,0,0,.22);color:white;
}
.get-row{margin-top: 10px;text-align:center;}
.get-label{opacity:.92;margin-top:8px;font-weight:1000;}
.get-line{margin-top:10px;font-size: 20px;}
.get-mini{margin-top:6px;font-size: 12px;opacity:.85;}
.bonus{margin-top: 12px;padding: 10px 12px;border-radius: 14px;font-weight: 1000;text-align:center;color:#123;background: var(--green);}
.go-back{margin: 12px auto 0;display:block;width: 180px;padding: 10px 14px;font-weight: 1000;border:none;cursor:pointer;}

/* Crypto */
.crypto-grid{display:grid;grid-template-columns: 1fr 1fr;gap: 10px;margin-top: 10px;}
.crypto-item{padding: 12px;border-radius: 14px;cursor:pointer;}
.crypto-item .cico{font-size: 30px;}
.crypto-item .cname{font-weight:1000;margin-top: 6px;}
.crypto-item .cnet{opacity:.9;margin-top: 2px;font-size: 13px;}

/* Send */
.send-label{opacity:.95;font-weight:1000;margin-top: 6px;}
.send-big{font-size: 28px;font-weight: 1000;text-align:center;margin-top: 8px;margin-bottom: 6px;}
.addr{margin-top: 8px;background: rgba(0,0,0,.22);border: 2px solid rgba(255,255,255,.10);border-radius: 12px;padding: 10px;font-weight: 900;word-break: break-all;}

/* Depot */
.depot-scene{position:relative;height: 520px;}
.warehouse{
  position:absolute;left:50%;top:120px;transform:translateX(-50%);
  width: 290px;height: 240px;border-radius: 22px;
  background:
    radial-gradient(240px 200px at 30% 20%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.28));
  border: 2px solid rgba(255,255,255,.14);
  box-shadow: 0 20px 38px rgba(0,0,0,.40);
  padding: 14px;
}
.w-top{display:flex;align-items:center;gap:10px;}
.w-badge{width: 44px;height:44px;border-radius: 14px;background: rgba(0,0,0,.22);border: 2px solid rgba(255,255,255,.10);display:flex;align-items:center;justify-content:center;font-size: 22px;}
.w-amt{font-size: 28px;font-weight:1000;text-shadow:0 2px 12px rgba(0,0,0,.55);}
.w-mid{margin-top: 14px;}
.w-line{height:10px;border-radius: 8px;background: rgba(255,255,255,.10);margin-top: 10px;border:1px solid rgba(255,255,255,.08);}
.w-bottom{position:absolute;left:14px;right:14px;bottom: 14px;}
.w-note{opacity:.9;font-weight:900;font-size: 13px;}
.sellbar{position:absolute;left:50%;bottom: 132px;transform:translateX(-50%);width: 92%;padding: 14px;}
.btn-circle{position:absolute;right: 10px;top: 240px;width: 48px;height:48px;border-radius: 50%;border: 2px solid rgba(255,255,255,.12);background: rgba(0,0,0,.22);color:white;font-size: 34px;cursor:pointer;}

/* Coming soon */
.coming{font-size: 26px;font-weight:1000;}
.coming-sub{margin-top: 10px;opacity:.9;}

/* Bottom nav */
.bottom{
  position: fixed;left: 50%;transform: translateX(-50%);bottom: 10px;
  width: min(520px, calc(100% - 20px));
  display:flex;justify-content:space-between;align-items:flex-end;
  padding: 10px 10px;border-radius: 16px;z-index: 25;
}
.nav-item{flex: 1;border:none;background: transparent;color:white;cursor:pointer;padding: 6px 4px;border-radius: 12px;}
.nav-item.active{background: rgba(255,255,255,.12);}
.ni-ico{font-size: 22px; line-height: 1;}
.ni-txt{font-size: 12px; font-weight: 1000; margin-top: 4px; opacity:.95;}

/* Coin logos */
.coin-ico{
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
}


/* Miner images */
.miner-ico{
  width: 104px;
  height: 104px;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.45));
}
.slot-ico{
  width: 96px;
  height: 96px;
}

/* Store balance icon size (match diamond) */
.bal-ico img.hud-ico{width:18px;height:18px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));}

/* Force small HUD coal icon (top-left) */
.hud-left .hud-icon img,
.hud-left .hud-icon .hud-ico{
  width: 22px !important;
  height: 22px !important;
  object-fit: contain;
  display: block;
}