/* ===================== Mintvale · World ===================== */
: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;
  --green:#74d35a; --good:#56e08a; --bad:#ff6b6b; --blue:#5ab0ff; --purple:#b06bff;
  --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%; overflow:hidden; }
body{ font-family:var(--font-ui); background:#0b0f1a; color:var(--text); user-select:none; }
button{ font-family:var(--font-ui); cursor:pointer; color:var(--text); border:none; background:none; }
b{ font-weight:400; }

#app{ position:fixed; inset:0; }
#app canvas{ display:block; }

/* ===== name tags (CSS2D) ===== */
.nametag{
  font-family:var(--font-ui); font-size:17px; line-height:1; white-space:nowrap;
  color:#fff; text-shadow:0 1px 0 #000, 0 0 6px rgba(0,0,0,.7);
  background:rgba(12,16,28,.55); border:1.5px solid rgba(255,255,255,.18);
  padding:3px 9px; border-radius:99px; backdrop-filter:blur(2px); transform:translateY(-4px);
}
.nametag.self{ border-color:var(--gold); color:#fff; }
.nametag .lv{ color:var(--gold); }
.buildtag{
  font-family:var(--font-ui); font-size:15px; color:#fff; white-space:nowrap;
  text-shadow:0 1px 0 #000, 0 0 6px rgba(0,0,0,.7);
  background:rgba(12,16,28,.5); border:1.5px solid rgba(255,255,255,.14);
  padding:2px 8px; border-radius:8px; text-align:center;
}
.buildtag b{ color:var(--gold); }
.pouchbubble{ font-family:var(--font-ui); font-size:16px; white-space:nowrap; color:#3a2a00;
  background:linear-gradient(180deg,#fff0b8,var(--gold)); border:1.5px solid var(--gold-deep);
  padding:2px 9px; border-radius:99px; animation:glowpulse 1s ease-in-out infinite; }
@keyframes glowpulse{ 50%{ box-shadow:0 0 14px var(--gold-glow); } }
.chesttag{ font-family:var(--font-ui); font-size:17px; white-space:nowrap; color:#fff;
  background:rgba(60,40,0,.7); border:1.5px solid var(--gold); padding:3px 10px; border-radius:8px;
  animation:glowpulse 1s ease-in-out infinite; }

/* ===== HUD ===== */
.hud{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; gap:16px; padding:10px 16px; flex-wrap:wrap;
  background:linear-gradient(180deg, rgba(20,26,43,.92), rgba(20,26,43,0));
  pointer-events:none;
}
.hud > *{ pointer-events:auto; }
.brand{ display:flex; align-items:center; gap:11px; }
.logo{ width:42px; height:42px; display:grid; place-items:center; font-family:var(--font-pix); font-size:18px; color:#5a3c00;
  background:linear-gradient(160deg,#ffe08a,var(--gold) 45%,var(--gold-deep)); border-radius:11px;
  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:14px; background:linear-gradient(180deg,#fff,#ffd970); -webkit-background-clip:text; background-clip:text; color:transparent; }
.brand-txt p{ font-size:14px; color:var(--muted); margin-top:3px; }

.stats{ display:flex; gap:12px; flex-wrap:wrap; }
.stat{ display:flex; align-items:center; gap:9px; background:rgba(20,26,43,.82); border:1.5px solid var(--line-soft);
  padding:7px 13px; border-radius:12px; min-height:48px; backdrop-filter:blur(6px); }
.stat .ico{ font-size:22px; 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:27px; color:var(--gold); text-shadow:0 0 14px var(--gold-glow); }
.stat.coins small{ font-size:15px; color:var(--green); margin-top:2px; }
.stat.renown b{ font-size:24px; color:#d9b3ff; }
.stat.renown small{ font-size:13px; color:var(--muted); }
.lvl-badge{ font-family:var(--font-pix); font-size:9px; color:var(--ink); background:linear-gradient(180deg,#b6f59a,var(--green)); padding:7px 8px; border-radius:9px; box-shadow:0 3px 0 #3c8a33; }
.lvl-badge b{ font-size:12px; }
.stat.level{ gap:11px; }
.xpwrap{ display:flex; flex-direction:column; gap:4px; min-width:120px; }
.xpbar{ height:11px; 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; }
.xptext{ font-size:13px; color:var(--muted); }

.controls{ margin-left:auto; display:flex; gap:8px; align-items:center; }
.online{ display:flex; align-items:center; gap:6px; font-size:18px; color:var(--text);
  background:rgba(20,26,43,.82); border:1.5px solid var(--line); padding:9px 13px; border-radius:11px; }
.online b{ color:var(--good); }
.online.solo b{ color:var(--muted); }
.icon-btn{ height:44px; min-width:44px; font-size:17px; border-radius:11px; background:rgba(20,26,43,.9); border:1.5px solid var(--line); display:grid; place-items:center; transition:.15s; padding:0 12px; }
.icon-btn:hover{ background:var(--panel-2); transform:translateY(-2px); }
.icon-btn.pill{ font-size:18px; gap:6px; }
.ascend-btn{ font-family:var(--font-pix); font-size:9px; padding:12px 13px; 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; }
@keyframes ascpulse{ 50%{ filter:brightness(1.15);} }

/* ===== banners / prompts / hint ===== */
.netbanner{ position:fixed; top:62px; left:50%; transform:translateX(-50%); z-index:18;
  font-size:16px; color:#ffdf9e; background:rgba(28,22,10,.85); border:1.5px solid #6b5320;
  padding:8px 16px; border-radius:99px; box-shadow:var(--shadow); }
.netbanner.live{ color:#bff7cf; background:rgba(14,30,18,.85); border-color:#2f6a3c; }
.prompt{ position:fixed; bottom:128px; left:50%; transform:translateX(-50%); z-index:18;
  font-family:var(--font-ui); font-size:20px; color:#3a2a00; background:linear-gradient(180deg,#fff0b8,var(--gold));
  padding:9px 18px; border-radius:12px; box-shadow:0 5px 0 var(--gold-deep), var(--shadow); animation:bob2 1s ease-in-out infinite; }
.prompt b{ background:#3a2a00; color:var(--gold); padding:1px 7px; border-radius:6px; }
@keyframes bob2{ 50%{ transform:translateX(-50%) translateY(-5px);} }
.hint{ position:fixed; bottom:14px; left:50%; transform:translateX(-50%); z-index:16;
  font-size:16px; color:var(--muted); background:rgba(12,16,28,.6); border:1.5px solid var(--line-soft);
  padding:7px 14px; border-radius:99px; backdrop-filter:blur(4px); }
.hint b{ color:var(--text); }

/* ===== mobile joystick ===== */
.joystick{ position:fixed; left:24px; bottom:28px; width:124px; height:124px; z-index:17;
  border-radius:50%; background:rgba(12,16,28,.4); border:2px solid rgba(255,255,255,.16); display:none; touch-action:none; }
.knob{ position:absolute; left:50%; top:50%; width:54px; height:54px; margin:-27px 0 0 -27px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff7d6, var(--gold)); box-shadow:0 4px 12px rgba(0,0,0,.5); }
@media (hover:none){ .joystick{ display:block; } .hint{ display:none; } }

/* ===== quest chip / combo / clock ===== */
.questchip{ position:fixed; left:14px; top:108px; z-index:16; width:248px; max-width:60vw;
  display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:14px;
  background:rgba(20,26,43,.85); border:1.5px solid var(--line); backdrop-filter:blur(6px); box-shadow:var(--shadow); }
.questchip .q-ico{ font-size:22px; }
.questchip .q-body{ flex:1; min-width:0; }
.q-label{ font-family:var(--font-pix); font-size:7px; color:var(--gold); letter-spacing:1px; }
.q-text{ font-size:16px; color:var(--text); margin:2px 0 5px; line-height:1.1; }
.q-bar{ height:7px; background:#0d1322; border:1.5px solid var(--line); border-radius:99px; overflow:hidden; }
.q-bar i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,#ffd970,var(--gold)); transition:width .3s; }
.q-reward{ font-size:15px; color:var(--gold); white-space:nowrap; }
.questchip.done{ border-color:#3a6a4a; animation:qpulse .6s ease; }
@keyframes qpulse{ 50%{ transform:scale(1.04); } }

.clock{ position:fixed; left:14px; top:62px; z-index:16; font-size:18px; padding:6px 12px; border-radius:99px;
  background:rgba(20,26,43,.85); border:1.5px solid var(--line); backdrop-filter:blur(6px); }

.combo{ position:fixed; left:50%; top:70px; transform:translateX(-50%); z-index:19;
  font-family:var(--font-pix); font-size:13px; color:#fff; letter-spacing:1px;
  padding:8px 16px; border-radius:99px; background:linear-gradient(180deg,#ff8a3d,#ff5d2b);
  box-shadow:0 4px 0 #b53d18, 0 0 22px rgba(255,120,50,.6); animation:combopop .25s ease; }
.combo b{ color:#fff3c9; font-size:17px; }
.combo span{ font-size:11px; opacity:.9; }
@keyframes combopop{ from{ transform:translateX(-50%) scale(.6); opacity:0; } }
.combo.bump{ animation:combobump .2s ease; }
@keyframes combobump{ 50%{ transform:translateX(-50%) scale(1.18); } }

/* ===== Shop ===== */
.shop{ position:fixed; top:0; right:0; bottom:0; width:390px; max-width:92vw; z-index:30;
  background:linear-gradient(180deg,#141a2b,#0e1424); border-left:2px solid var(--line);
  display:flex; flex-direction:column; box-shadow:-12px 0 40px rgba(0,0,0,.5); animation:slidein .25s ease; }
@keyframes slidein{ from{ transform:translateX(40px); opacity:0; } }
.shop-head{ display:flex; align-items:center; gap:10px; padding:14px 14px 8px; }
.tabs{ display:flex; gap:5px; flex:1; }
.tab{ font-size:16px; padding:8px 12px; border-radius:10px; color:var(--muted); background:#0e1322; border:1.5px solid var(--line); }
.tab.active{ background:linear-gradient(180deg,#2a3450,#1b2336); color:#fff; border-color:#46598a; }
.qty{ display:flex; gap:4px; background:#0e1322; padding:4px; border-radius:10px; border:1.5px solid var(--line); margin:0 14px 6px; }
.qty button{ font-size:15px; padding:5px 8px; 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); }
.close{ width:34px; height:34px; border-radius:9px; background:#0e1322; border:1.5px solid var(--line); font-size:16px; }
.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:11px; align-items:center; background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1.5px solid var(--line-soft); border-radius:14px; padding:10px 11px; position:relative; overflow:hidden; transition:.15s; }
.card.affordable{ border-color:#3a6a4a; box-shadow:0 0 0 1px rgba(86,224,138,.25); }
.card.locked{ opacity:.55; filter:grayscale(.6); }
.card-icon{ width:50px; height:50px; flex-shrink:0; display:grid; place-items:center; font-size:30px; 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:20px; } .card-own{ font-size:15px; color:var(--muted); }
.card-blurb{ font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-rate{ font-size:15px; color:var(--green); margin-top:2px; } .card-rate b{ color:#9af0b4; }
.buy-btn{ min-width:92px; padding:9px 11px; border-radius:11px; font-size:17px; background:#0e1322; border:1.5px solid var(--line); color:var(--muted); display:flex; flex-direction:column; align-items:center; line-height:1.1; }
.buy-btn .b-amt{ font-size:12px; opacity:.8; }
.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:17px; }
.card-lock b{ color:var(--gold); }
.shop-foot{ padding:10px 16px; border-top:1.5px solid var(--line-soft); font-size:15px; color:var(--muted); }
.shop-foot b{ color:var(--gold); }

/* ===== modals ===== */
.modal-bg{ position:fixed; inset:0; background:rgba(6,9,16,.72); backdrop-filter:blur(4px); display:grid; place-items:center; z-index:60; }
.modal{ width:min(440px,92vw); background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:2px solid var(--line); border-radius:18px; padding:26px; box-shadow:var(--shadow); animation:pop .3s ease; }
@keyframes pop{ from{ transform:scale(.92); opacity:0; } }
.modal-logo{ font-size:46px; text-align:center; filter:drop-shadow(0 0 18px var(--gold-glow)); }
.modal h3{ font-family:var(--font-pix); font-size:15px; color:#ffd970; margin:8px 0 12px; text-align:center; }
.modal p{ font-size:17px; color:var(--text); margin-bottom:12px; line-height:1.45; text-align:center; }
.modal .warn{ color:#ffb27a; font-size:15px; }
.modal .tiny{ font-size:13px; color:var(--muted); margin-top:10px; }
.name-input{ width:100%; font-family:var(--font-ui); font-size:24px; text-align:center; color:#fff;
  background:#0e1322; border:2px solid var(--line); border-radius:12px; padding:12px; outline:none; }
.name-input:focus{ border-color:var(--gold); }
.swatches{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:16px 0 18px; }
.swatch{ width:38px; height:38px; border-radius:50%; border:3px solid rgba(255,255,255,.2); cursor:pointer; transition:.12s; }
.swatch.sel{ border-color:#fff; transform:scale(1.15); box-shadow:0 0 14px rgba(255,255,255,.4); }
.btn-gold{ padding:12px 18px; border-radius:12px; font-size:18px; color:#3a2a00; background:linear-gradient(180deg,#ffe28a,var(--gold)); box-shadow:0 4px 0 var(--gold-deep); }
.btn-gold:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--gold-deep); }
.btn-gold.big{ width:100%; font-size:20px; padding:14px; }
.btn-ghost{ padding:10px 15px; border-radius:11px; font-size:17px; background:#0e1322; border:1.5px solid var(--line); color:var(--muted); }
.btn-ghost.sm{ padding:7px 12px; font-size:15px; }
.btn-ghost.danger{ color:#ff9b8a; border-color:#5a2c2c; }
.btn-ghost.toggle{ min-width:60px; }
.btn-ghost.toggle.on{ color:#9af0b4; border-color:#3a6a4a; background:#102018; }
.btn-ghost.toggle.off{ color:#ff9b8a; border-color:#5a2c2c; }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:16px; }
.menu-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 0; border-bottom:1.5px solid var(--line-soft); font-size:18px; }
.menu-row a{ text-decoration:none; display:inline-block; }
.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; }

/* ===== toasts / fx ===== */
.toasts{ position:fixed; top:74px; right:16px; display:flex; flex-direction:column; gap:9px; 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:11px 15px; border-radius:12px; box-shadow:var(--shadow); font-size:17px; max-width:300px; 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:var(--purple); }
.toast b{ color:var(--gold); } .toast small{ display:block; color:var(--muted); font-size:14px; 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:0; margin:0; } }
.levelflash{ position:fixed; inset:0; pointer-events:none; z-index:45; opacity:0; background:radial-gradient(circle at 50% 50%, rgba(116,211,90,.3), transparent 60%); }
.levelflash.go{ animation:flash .8s ease; } @keyframes flash{ 0%{opacity:0;} 30%{opacity:1;} 100%{opacity:0;} }

.popup{ position:fixed; z-index:48; 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%); pointer-events:none; animation:popf 1s ease-out forwards; }
@keyframes popf{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.6);} 15%{ opacity:1; transform:translate(-50%,-70%) scale(1.1);} 100%{ opacity:0; transform:translate(-50%,-150%) scale(1);} }

/* ===== loading ===== */
.loading{ position:fixed; inset:0; z-index:80; display:flex; flex-direction:column; gap:16px; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#0c111e,#0b0f1a); color:var(--muted); font-size:18px; }
.loading.hide{ opacity:0; pointer-events:none; transition:opacity .5s; }
.spin{ width:46px; height:46px; border:5px solid var(--line); border-top-color:var(--gold); border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg);} }

@media (max-width:760px){
  .brand-txt{ display:none; }
  .stat.coins b{ font-size:22px; }
  .xpwrap{ display:none; }
  .hint{ display:none; }
  .controls{ gap:6px; }
  .icon-btn.pill span{ display:none; }
}