/* ===================== Mintvale ===================== */
:root{
  --gold:#ffcf4d; --gold-deep:#e0a82e; --gold-glow:rgba(255,207,77,.55);
  --ink:#0b0f1a; --panel:#141a2b; --panel-2:#1b2336; --panel-3:#222c45;
  --line:#2c3654; --line-soft:#222a42;
  --text:#eaf0ff; --muted:#8a96ba; --dim:#5d678a;
  --green:#74d35a; --good:#56e08a; --bad:#ff6b6b; --blue:#5ab0ff;
  --sky1:#9fdcff; --sky2:#e7f7ff; --grass1:#8ed96a; --grass2:#54a64c;
  --path:#e7c894;
  --r:16px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --font-pix:'Press Start 2P', system-ui, sans-serif;
  --font-ui:'VT323', ui-monospace, monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden]{ display:none !important; }
html,body{ height:100%; }
body{
  font-family:var(--font-ui);
  background:
    radial-gradient(1200px 600px at 80% -10%, #1b2440 0%, transparent 60%),
    radial-gradient(1000px 700px at -10% 110%, #16203a 0%, transparent 55%),
    linear-gradient(160deg, #0c111e 0%, #0b0f1a 100%);
  color:var(--text);
  overflow:hidden;
  user-select:none;
  display:flex; flex-direction:column;
}
button{ font-family:var(--font-ui); cursor:pointer; color:var(--text); border:none; background:none; }
b{ font-weight:400; }

/* ---------- HUD ---------- */
.hud{
  display:flex; align-items:center; gap:18px;
  padding:12px 18px;
  background:linear-gradient(180deg, rgba(27,35,54,.96), rgba(20,26,43,.96));
  border-bottom:2px solid var(--line);
  box-shadow:0 6px 24px rgba(0,0,0,.4);
  z-index:30; flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; gap:12px; }
.logo{
  width:46px; height:46px; display:grid; place-items:center;
  font-family:var(--font-pix); font-size:20px; color:#5a3c00;
  background:linear-gradient(160deg,#ffe08a,var(--gold) 45%,var(--gold-deep));
  border-radius:12px;
  box-shadow:0 4px 0 #a6761b, 0 6px 16px var(--gold-glow);
  border:2px solid #fff3c9;
}
.brand-txt h1{ font-family:var(--font-pix); font-size:15px; letter-spacing:1px;
  background:linear-gradient(180deg,#fff,#ffd970); -webkit-background-clip:text; background-clip:text; color:transparent; }
.brand-txt p{ font-size:15px; color:var(--muted); margin-top:3px; letter-spacing:1px; }

.stats{ display:flex; align-items:center; gap:14px; margin-left:6px; flex-wrap:wrap; }
.stat{
  display:flex; align-items:center; gap:10px;
  background:var(--panel); border:1.5px solid var(--line-soft);
  padding:8px 14px; border-radius:12px; min-height:50px;
}
.stat .ico{ font-size:24px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.stat-body{ display:flex; flex-direction:column; line-height:1; }
.stat.coins b{ font-size:30px; color:var(--gold); text-shadow:0 0 14px var(--gold-glow); letter-spacing:1px; }
.stat.coins small{ font-size:16px; color:var(--green); margin-top:2px; }
.stat.renown b{ font-size:26px; color:#d9b3ff; }
.stat.renown small{ font-size:14px; color:var(--muted); }

.stat.level{ gap:12px; }
.lvl-badge{ font-family:var(--font-pix); font-size:10px; color:var(--ink);
  background:linear-gradient(180deg,#b6f59a,var(--green)); padding:8px 9px; border-radius:9px;
  box-shadow:0 3px 0 #3c8a33; }
.lvl-badge b{ font-size:13px; }
.xpwrap{ display:flex; flex-direction:column; gap:4px; min-width:140px; }
.xpbar{ height:12px; background:#0d1322; border:1.5px solid var(--line); border-radius:99px; overflow:hidden; position:relative; }
.xpbar i{ position:absolute; inset:0; width:0%;
  background:linear-gradient(90deg,#56e08a,#9af0b4); border-radius:99px;
  box-shadow:0 0 12px rgba(86,224,138,.6); transition:width .3s cubic-bezier(.2,.8,.2,1); }
.xptext{ font-size:14px; color:var(--muted); letter-spacing:.5px; }

.controls{ margin-left:auto; display:flex; gap:8px; align-items:center; }
.icon-btn{
  width:42px; height:42px; font-size:18px; border-radius:11px;
  background:var(--panel); border:1.5px solid var(--line);
  display:grid; place-items:center; transition:.15s;
}
.icon-btn:hover{ background:var(--panel-2); transform:translateY(-2px); }
.icon-btn:active{ transform:translateY(0); }
.ascend-btn{
  font-family:var(--font-pix); font-size:10px; padding:11px 14px; border-radius:11px;
  color:#3a1a55; background:linear-gradient(180deg,#e9c2ff,#b06bff);
  box-shadow:0 4px 0 #6a32b0, 0 0 18px rgba(176,107,255,.5);
  animation:ascpulse 1.6s ease-in-out infinite;
}
.ascend-btn:active{ transform:translateY(2px); box-shadow:0 2px 0 #6a32b0; }
@keyframes ascpulse{ 50%{ filter:brightness(1.15); } }

/* ---------- Layout ---------- */
main{ flex:1; display:flex; gap:0; min-height:0; }
.map{ flex:1; position:relative; min-width:0; padding:16px; }
.shop{ width:380px; flex-shrink:0; background:linear-gradient(180deg,#141a2b,#10162400);
  border-left:2px solid var(--line); display:flex; flex-direction:column; min-height:0; }

/* ---------- Scene / Map ---------- */
.scene{
  position:relative; width:100%; height:100%;
  border-radius:22px; overflow:hidden;
  border:2px solid var(--line);
  box-shadow:var(--shadow), inset 0 0 0 4px rgba(255,255,255,.03);
}
.sky{ position:absolute; inset:0; background:linear-gradient(180deg,var(--sky2) 0%, var(--sky1) 45%); }
.clouds{ position:absolute; inset:0; pointer-events:none; }
.cloud{ position:absolute; font-size:54px; opacity:.92; filter:drop-shadow(0 6px 6px rgba(120,160,190,.25)); }
.c1{ top:8%; left:-14%; animation:drift 46s linear infinite; }
.c2{ top:20%; left:-30%; font-size:40px; opacity:.8; animation:drift 64s linear infinite; }
.c3{ top:4%; left:-50%; font-size:70px; opacity:.7; animation:drift 90s linear infinite; }
@keyframes drift{ to{ transform:translateX(160vw); } }
.sun{ position:absolute; top:5%; right:6%; font-size:64px; filter:drop-shadow(0 0 24px rgba(255,220,120,.7));
  animation:sunbob 6s ease-in-out infinite; }
@keyframes sunbob{ 50%{ transform:translateY(8px) rotate(8deg); } }

.ground{
  position:absolute; left:0; right:0; bottom:0; height:62%;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.18), transparent 30%),
    linear-gradient(180deg, var(--grass1), var(--grass2));
  border-top:6px solid #6cc05e;
}
.ground::before{ /* grass texture dots */
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.10) 1.5px, transparent 1.6px);
  background-size:22px 22px; opacity:.5;
}
.ground::after{ /* winding path */
  content:""; position:absolute; left:50%; bottom:-10px; width:120px; height:90%;
  transform:translateX(-50%);
  background:linear-gradient(180deg, transparent, var(--path) 18%);
  border-radius:60px 60px 0 0; opacity:.85;
  box-shadow:inset 0 0 0 4px rgba(0,0,0,.05);
}

.decor{ position:absolute; inset:0; pointer-events:none; }
.decor span{ position:absolute; font-size:30px; filter:drop-shadow(0 4px 3px rgba(0,0,0,.25)); }

.plots{
  position:absolute; inset:0; padding:22px 26px 120px;
  display:flex; flex-wrap:wrap; align-content:flex-start; justify-content:center;
  gap:14px; overflow:hidden;
}
.empty-hint{
  margin-top:8%; text-align:center; font-size:22px; line-height:1.5;
  color:#36632f; text-shadow:0 1px 0 rgba(255,255,255,.35);
  background:rgba(255,255,255,.18); padding:18px 22px; border-radius:16px;
  border:2px dashed rgba(54,99,47,.4);
}

.tile{
  position:relative; width:92px; height:92px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  animation:plop .45s cubic-bezier(.2,1.5,.4,1) both, bob 3.2s ease-in-out infinite;
}
.tile .b-icon{ font-size:48px; line-height:1; filter:drop-shadow(0 6px 5px rgba(0,0,0,.3)); }
.tile .b-shadow{ position:absolute; bottom:8px; width:54px; height:14px; border-radius:50%;
  background:rgba(0,0,0,.22); filter:blur(2px); z-index:-1; }
.tile .b-count{
  position:absolute; top:-2px; right:0; font-family:var(--font-pix); font-size:9px;
  color:#3a2a00; background:linear-gradient(180deg,#ffe28a,var(--gold));
  padding:4px 6px; border-radius:8px; box-shadow:0 2px 0 var(--gold-deep);
}
.tile .b-name{ font-size:13px; color:#2c5226; margin-top:2px; text-shadow:0 1px 0 rgba(255,255,255,.4); white-space:nowrap; }
.tile.producing .b-icon{ animation:produce .4s ease; }
@keyframes plop{ 0%{ transform:scale(0) translateY(20px); opacity:0; } 100%{ transform:scale(1) translateY(0); opacity:1; } }
@keyframes bob{ 50%{ transform:translateY(-5px); } }
@keyframes produce{ 50%{ transform:scale(1.18) rotate(-4deg); } }

/* collect button */
.collect{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  z-index:8;
}
.coin-stack{ position:relative; width:118px; height:118px; display:grid; place-items:center;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.25), rgba(255,207,77,.0) 60%);
  filter:drop-shadow(0 0 26px var(--gold-glow));
  animation:coinpulse 1.8s ease-in-out infinite;
}
.coinbig{ font-size:86px; transition:transform .08s; }
.coin-shine{ position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 4px rgba(255,255,255,.18), 0 0 40px var(--gold-glow);
  animation:ring 1.8s ease-out infinite; }
.collect:active .coinbig{ transform:scale(.84); }
.collect-label{ font-family:var(--font-pix); font-size:10px; color:#5a3c00;
  background:linear-gradient(180deg,#fff0b8,var(--gold)); padding:7px 12px; border-radius:10px;
  box-shadow:0 4px 0 var(--gold-deep); letter-spacing:1px; }
@keyframes coinpulse{ 50%{ transform:translateX(-50%) translateY(-4px) scale(1.04); } }
@keyframes ring{ 0%{ box-shadow:0 0 0 0 var(--gold-glow);} 100%{ box-shadow:0 0 0 26px rgba(255,207,77,0);} }
/* collect btn uses translateX from parent? keep simple: */
.collect{ animation:none; }

/* fx particles */
.fx{ position:absolute; inset:0; pointer-events:none; z-index:12; overflow:hidden; }
.pop{ position:absolute; font-family:var(--font-pix); font-size:14px; color:var(--gold);
  text-shadow:0 2px 0 #7a5500, 0 0 10px var(--gold-glow); transform:translate(-50%,-50%);
  animation:pop 1s ease-out forwards; white-space:nowrap; }
.pop.click{ font-size:18px; }
@keyframes pop{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.6);}
  15%{ opacity:1; transform:translate(-50%,-60%) scale(1.1);}
  100%{ opacity:0; transform:translate(-50%,-150%) scale(1);} }
.floatcoin{ position:absolute; font-size:20px; animation:floatup 1.4s ease-out forwards; pointer-events:none; }
@keyframes floatup{ 0%{ opacity:0; transform:translateY(0) scale(.6);} 20%{opacity:1;} 100%{ opacity:0; transform:translateY(-70px) scale(1);} }

/* ---------- Shop ---------- */
.shop-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 16px 12px; }
.shop-head h2{ font-family:var(--font-pix); font-size:13px; color:var(--text); }
.qty{ display:flex; gap:4px; background:#0e1322; padding:4px; border-radius:10px; border:1.5px solid var(--line); }
.qty button{ font-size:16px; padding:5px 9px; border-radius:7px; color:var(--muted); }
.qty button.active{ background:linear-gradient(180deg,#ffe28a,var(--gold)); color:#4a3300; box-shadow:0 2px 0 var(--gold-deep); }

.cards{ flex:1; overflow-y:auto; padding:4px 12px 12px; display:flex; flex-direction:column; gap:10px; }
.cards::-webkit-scrollbar{ width:9px; }
.cards::-webkit-scrollbar-thumb{ background:var(--line); border-radius:9px; }

.card{
  display:flex; gap:12px; align-items:center;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1.5px solid var(--line-soft); border-radius:14px; padding:11px 12px;
  position:relative; overflow:hidden; transition:.15s;
}
.card.affordable{ border-color:#3a6a4a; box-shadow:0 0 0 1px rgba(86,224,138,.25), 0 6px 16px rgba(0,0,0,.3); }
.card.affordable:hover{ transform:translateX(-3px); }
.card.locked{ opacity:.55; filter:grayscale(.6); }
.card.maxed{ border-color:var(--gold-deep); }
.card-icon{ width:54px; height:54px; flex-shrink:0; display:grid; place-items:center;
  font-size:34px; background:#0e1322; border-radius:12px; border:1.5px solid var(--line); }
.card-main{ flex:1; min-width:0; }
.card-top{ display:flex; align-items:baseline; gap:8px; }
.card-name{ font-size:21px; color:var(--text); }
.card-own{ font-size:16px; color:var(--muted); }
.card-blurb{ font-size:14px; color:var(--muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-rate{ font-size:16px; color:var(--green); margin-top:3px; }
.card-rate b{ color:#9af0b4; }
.card-buy{ flex-shrink:0; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.buy-btn{
  min-width:96px; padding:9px 12px; border-radius:11px; font-size:18px;
  background:#0e1322; border:1.5px solid var(--line); color:var(--muted);
  display:flex; flex-direction:column; align-items:center; line-height:1.1; transition:.12s;
}
.buy-btn .b-amt{ font-size:13px; opacity:.8; }
.buy-btn .b-cost{ display:flex; align-items:center; gap:3px; }
.card.affordable .buy-btn{ background:linear-gradient(180deg,#74d35a,#4ca64a); color:#0f2410;
  border-color:#3c8a33; box-shadow:0 4px 0 #357a2c; }
.card.affordable .buy-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 #357a2c; }
.card-lock{ position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(10,14,26,.55); font-size:18px; color:#cdd6f0; gap:6px; }
.card-lock b{ color:var(--gold); }

.shop-foot{ padding:10px 16px; border-top:1.5px solid var(--line-soft); font-size:16px; color:var(--muted); }
.shop-foot b{ color:var(--gold); }

/* ---------- Toasts ---------- */
.toasts{ position:fixed; top:84px; right:18px; display:flex; flex-direction:column; gap:10px; z-index:50; }
.toast{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1.5px solid var(--line); border-left:5px solid var(--gold);
  padding:12px 16px; border-radius:12px; box-shadow:var(--shadow);
  font-size:18px; max-width:320px; animation:toastin .35s cubic-bezier(.2,1.4,.4,1) both;
}
.toast.level{ border-left-color:var(--green); }
.toast.unlock{ border-left-color:var(--blue); }
.toast.renown{ border-left-color:#b06bff; }
.toast b{ color:var(--gold); }
.toast small{ display:block; color:var(--muted); font-size:15px; margin-top:2px; }
@keyframes toastin{ from{ opacity:0; transform:translateX(40px); } }
.toast.out{ animation:toastout .3s ease forwards; }
@keyframes toastout{ to{ opacity:0; transform:translateX(40px); height:0; padding-top:0; padding-bottom:0; margin:0; } }

/* level flash */
.levelflash{ position:fixed; inset:0; pointer-events:none; z-index:45; opacity:0;
  background:radial-gradient(circle at 50% 50%, rgba(116,211,90,.35), transparent 60%); }
.levelflash.go{ animation:flash .8s ease; }
@keyframes flash{ 0%{opacity:0;} 30%{opacity:1;} 100%{opacity:0;} }

/* modal */
.modal-bg{ position:fixed; inset:0; background:rgba(6,9,16,.7); backdrop-filter:blur(3px);
  display:grid; place-items:center; z-index:60; }
.modal{ width:min(420px,92vw); background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:2px solid var(--line); border-radius:18px; padding:24px; box-shadow:var(--shadow);
  animation:plop .3s ease; }
.modal h3{ font-family:var(--font-pix); font-size:15px; color:#d9b3ff; margin-bottom:12px; }
.modal p{ font-size:18px; color:var(--text); margin-bottom:10px; line-height:1.4; }
.modal .warn{ color:#ffb27a; font-size:16px; }
.ascend-info{ background:#0e1322; border:1.5px solid var(--line); border-radius:12px; padding:12px 14px; margin:12px 0; }
.ascend-info div{ font-size:18px; margin:4px 0; }
.ascend-info b{ color:#d9b3ff; }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:16px; }
.btn-ghost{ padding:11px 16px; border-radius:11px; font-size:18px; background:#0e1322; border:1.5px solid var(--line); color:var(--muted); }
.btn-gold{ padding:11px 18px; border-radius:11px; font-size:18px; color:#3a1a55;
  background:linear-gradient(180deg,#e9c2ff,#b06bff); box-shadow:0 4px 0 #6a32b0; }
.btn-gold:active{ transform:translateY(3px); box-shadow:0 1px 0 #6a32b0; }

/* ---------- Responsive ---------- */
@media (max-width:880px){
  main{ flex-direction:column; }
  .shop{ width:100%; border-left:none; border-top:2px solid var(--line); height:46%; }
  .map{ height:54%; padding:10px; }
  .hud{ gap:10px; padding:10px; }
  .stat.coins b{ font-size:24px; }
  .brand-txt p{ display:none; }
  .xpwrap{ min-width:100px; }
}
@media (max-width:520px){
  .controls .icon-btn{ width:38px; height:38px; }
  .coin-stack{ width:96px; height:96px; }
  .coinbig{ font-size:68px; }
}