/* ============================================================
   VOIDMART — styles
   Bright knock-off shopping-app chrome over a dark neon game.
   ============================================================ */
:root{
  --orange:#ff6a13;
  --orange-2:#ff8a2b;
  --red:#ff2d4f;
  --pink:#ff3d8b;
  --green:#19c37d;
  --yellow:#ffc223;
  --ink:#1a1430;
  --ink-2:#2a2150;
  --paper:#fff7ef;
  --card:#ffffff;
  --space:#070713;
  --cyan:#37f0ff;
  --muted:#8a85a6;
  --shadow:0 10px 30px rgba(0,0,0,.28);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;overflow:hidden;background:var(--space);}
body{
  font-family:"Nunito",system-ui,sans-serif;
  color:var(--ink);
  position:fixed;inset:0;
  touch-action:none;user-select:none;-webkit-user-select:none;
  overscroll-behavior:none;
}
#app{position:fixed;inset:0;overflow:hidden;}
canvas#game{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;}
.hidden{display:none !important;}

/* ===================== HUD ===================== */
#hud{
  position:absolute;left:0;right:0;top:0;
  padding:calc(var(--safe-t) + 10px) calc(var(--safe-r) + 12px) 0 calc(var(--safe-l) + 12px);
  pointer-events:none;z-index:20;
  display:flex;flex-direction:column;gap:8px;
}
.hud-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.hud-left{flex:1;min-width:0;max-width:min(58%,360px);}
.bar-stack{display:flex;flex-direction:column;gap:6px;}
.bar{
  position:relative;height:clamp(15px,4.6vw,22px);border-radius:99px;
  background:rgba(8,8,22,.62);border:2px solid rgba(255,255,255,.16);
  overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.35);backdrop-filter:blur(3px);
}
.bar-fill{position:absolute;inset:0;width:100%;transform-origin:left;border-radius:99px;transition:width .12s linear;}
.bar.hull .bar-fill{background:linear-gradient(90deg,#ff4d6d,#ff8a2b);}
.bar.shield .bar-fill{background:linear-gradient(90deg,#37f0ff,#5b8cff);}
.bar-label{
  position:absolute;left:10px;top:50%;transform:translateY(-50%);
  font-family:"Space Mono",monospace;font-size:clamp(9px,2.7vw,12px);font-weight:700;
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);letter-spacing:.04em;mix-blend-mode:normal;
}
.hud-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.score-box{
  background:linear-gradient(180deg,#fff,#fff2e3);border:2px solid var(--orange);
  border-radius:14px;padding:3px 12px 4px;text-align:center;box-shadow:var(--shadow);min-width:78px;
}
.score-num{font-family:"Space Mono",monospace;font-weight:700;font-size:clamp(16px,5vw,24px);color:var(--orange);line-height:1;}
.score-cap{font-size:9px;font-weight:800;letter-spacing:.14em;color:#c06a2a;}
.wave-pill{
  background:var(--ink);color:#fff;font-weight:900;font-size:clamp(10px,3vw,13px);
  padding:4px 11px;border-radius:99px;letter-spacing:.06em;box-shadow:var(--shadow);
  border:2px solid rgba(255,255,255,.18);
}
.cart-row{display:flex;align-items:center;gap:8px;max-width:520px;}
.cart-icon{font-size:clamp(15px,4.6vw,20px);filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));}
.cart-bar{
  position:relative;flex:1;height:clamp(14px,4vw,20px);border-radius:99px;
  background:rgba(8,8,22,.62);border:2px solid rgba(255,255,255,.16);overflow:hidden;backdrop-filter:blur(3px);
}
.cart-fill{position:absolute;inset:0;width:0;background:linear-gradient(90deg,var(--yellow),var(--green));border-radius:99px;transition:width .18s ease;}
.cart-text{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:"Space Mono",monospace;font-weight:700;font-size:clamp(9px,2.7vw,12px);
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7);letter-spacing:.05em;
}
.coin-count{
  font-family:"Space Mono",monospace;font-weight:700;font-size:clamp(11px,3.2vw,15px);
  color:var(--yellow);text-shadow:0 1px 3px rgba(0,0,0,.6);white-space:nowrap;
}

/* Pause button */
#pauseBtn,#muteBtn{
  position:absolute;z-index:21;right:calc(var(--safe-r) + 12px);
  width:46px;height:46px;border-radius:50%;border:2px solid rgba(255,255,255,.25);
  background:rgba(20,16,40,.6);color:#fff;font-family:"Nunito",system-ui,sans-serif;font-weight:700;
  font-size:16px;letter-spacing:1px;backdrop-filter:blur(4px);cursor:pointer;
}
#pauseBtn{bottom:calc(var(--safe-b) + 14px);}
#muteBtn{bottom:calc(var(--safe-b) + 68px);font-size:18px;}

/* Boss banner */
#bossBanner{
  position:absolute;top:18%;left:50%;transform:translateX(-50%);z-index:22;
  background:linear-gradient(180deg,var(--red),#b3001f);color:#fff;text-align:center;
  padding:10px 22px;border-radius:16px;border:3px solid #fff;box-shadow:0 12px 40px rgba(255,45,79,.5);
  font-family:"Baloo 2",sans-serif;font-weight:800;pointer-events:none;
  animation:bossPop .5s cubic-bezier(.2,1.4,.4,1) both;max-width:90vw;
}
#bossBanner .bb-big{font-size:clamp(18px,6vw,30px);line-height:1.05;}
#bossBanner .bb-small{font-size:clamp(10px,3vw,13px);font-weight:700;opacity:.95;letter-spacing:.04em;}
@keyframes bossPop{from{opacity:0;transform:translateX(-50%) scale(.6);}to{opacity:1;transform:translateX(-50%) scale(1);}}

/* Toasts (pickup / event feed) */
#toasts{
  position:absolute;left:50%;top:46%;transform:translateX(-50%);z-index:18;
  display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;
}
.toast{
  background:rgba(255,255,255,.95);color:var(--ink);font-weight:800;
  padding:5px 13px;border-radius:99px;font-size:clamp(11px,3.2vw,14px);box-shadow:var(--shadow);
  animation:toastUp 1.1s ease forwards;border:2px solid var(--orange);white-space:nowrap;
}
.toast.good{border-color:var(--green);}
.toast.bad{border-color:var(--red);color:var(--red);}
@keyframes toastUp{0%{opacity:0;transform:translateY(10px) scale(.8);}15%{opacity:1;transform:translateY(0) scale(1);}80%{opacity:1;}100%{opacity:0;transform:translateY(-26px) scale(.95);}}

/* ===================== Full-screen screens ===================== */
.screen{
  position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  padding:calc(var(--safe-t) + 14px) 14px calc(var(--safe-b) + 14px);
  background:radial-gradient(120% 90% at 50% 0%,rgba(255,106,19,.18),rgba(7,7,19,.86) 60%,rgba(7,7,19,.96));
  backdrop-filter:blur(2px);overflow-y:auto;
}

/* phone-frame card used for start + game over */
.phone-frame{
  width:min(440px,94vw);background:var(--paper);border-radius:30px;
  box-shadow:0 24px 80px rgba(0,0,0,.55),0 0 0 6px rgba(255,255,255,.06);
  padding:26px 22px 22px;text-align:center;position:relative;
  border:3px solid #fff;
}
.app-badge{display:flex;justify-content:center;margin-bottom:8px;}
.app-icon{
  width:74px;height:74px;border-radius:20px;background:linear-gradient(150deg,var(--orange),var(--red));
  display:flex;align-items:center;justify-content:center;font-size:40px;
  box-shadow:0 10px 24px rgba(255,45,79,.4);transform:rotate(-4deg);
}
.logo{
  font-family:"Baloo 2",sans-serif;font-weight:800;font-size:clamp(34px,11vw,52px);
  line-height:.9;color:var(--orange);letter-spacing:-.02em;margin-top:4px;
  text-shadow:2px 2px 0 #ffd9b8;
}
.logo span{display:block;color:var(--ink);-webkit-text-stroke:0;text-shadow:2px 2px 0 #d9d2ee;}
.tagline{font-weight:800;color:#7a5a3a;margin:10px 0 12px;font-size:clamp(13px,3.8vw,16px);line-height:1.25;}
.rating-row{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:nowrap;margin-bottom:14px;max-width:100%;}
.stars{color:var(--yellow);font-size:clamp(12px,3.4vw,18px);letter-spacing:1px;text-shadow:0 1px 0 #c98a00;white-space:nowrap;flex-shrink:1;min-width:0;overflow:hidden;}
.rating-meta{font-size:clamp(10px,2.8vw,12px);color:var(--muted);font-weight:700;white-space:nowrap;flex-shrink:0;}
.rating-meta b{color:var(--green);}
.bullets{list-style:none;text-align:left;display:flex;flex-direction:column;gap:9px;margin:6px 4px 18px;}
.bullets li{display:flex;gap:10px;align-items:flex-start;font-size:clamp(12.5px,3.6vw,15px);font-weight:700;color:#4a3f5c;line-height:1.3;}
.bullets li .b-ico{font-size:18px;flex-shrink:0;line-height:1.25;}
.bullets li .b-txt{flex:1;min-width:0;overflow-wrap:anywhere;}
.bullets li b{color:var(--orange);}
.big-cta{
  width:100%;border:none;border-radius:18px;cursor:pointer;
  background:linear-gradient(180deg,var(--orange-2),var(--orange));color:#fff;
  font-family:"Baloo 2",sans-serif;font-weight:800;font-size:clamp(17px,5vw,22px);
  padding:15px;box-shadow:0 8px 0 #c2470a,0 14px 26px rgba(255,106,19,.4);
  letter-spacing:.02em;transition:transform .08s,box-shadow .08s;
}
.big-cta:active{transform:translateY(5px);box-shadow:0 3px 0 #c2470a,0 8px 14px rgba(255,106,19,.4);}
.legal{font-size:10.5px;color:#a99fbf;margin-top:14px;line-height:1.4;font-weight:600;}

/* Game over specifics */
.phone-frame.over{background:#fff;}
.over-stamp{
  position:absolute;top:16px;right:-6px;transform:rotate(9deg);
  background:var(--red);color:#fff;font-family:"Baloo 2";font-weight:800;
  padding:5px 16px;border-radius:8px;font-size:13px;letter-spacing:.06em;
  box-shadow:0 6px 14px rgba(255,45,79,.45);border:2px dashed #fff;
}
.over-title{font-family:"Baloo 2";font-weight:800;font-size:clamp(26px,8vw,38px);color:var(--ink);margin:10px 0 4px;}
.over-sub{font-weight:700;color:#7a5a3a;font-size:clamp(13px,3.8vw,16px);margin-bottom:14px;}
.receipt{
  background:repeating-linear-gradient(180deg,#fff,#fff 26px,#faf3ea 26px,#faf3ea 27px);
  border:2px dashed #d8cdbb;border-radius:12px;padding:14px 16px;text-align:left;
  font-family:"Space Mono",monospace;font-size:13px;color:#42384f;margin-bottom:18px;
}
.receipt .r-row{display:flex;justify-content:space-between;gap:12px;padding:2px 0;}
.receipt .r-row b{font-weight:700;}
.receipt .r-tot{border-top:2px solid #d8cdbb;margin-top:8px;padding-top:8px;font-weight:700;color:var(--orange);font-size:15px;}

/* ===================== SHOP SHEET ===================== */
#shopScreen{align-items:flex-end;padding:0;background:rgba(7,7,19,.55);backdrop-filter:blur(4px);}
.shop-sheet{
  width:100%;max-width:760px;margin:0 auto;background:var(--paper);
  border-radius:26px 26px 0 0;box-shadow:0 -16px 60px rgba(0,0,0,.5);
  padding:16px 14px calc(var(--safe-b) + 16px);max-height:94vh;display:flex;flex-direction:column;
  border-top:4px solid var(--orange);animation:sheetUp .34s cubic-bezier(.2,1.1,.3,1) both;
}
@keyframes sheetUp{from{transform:translateY(60px);opacity:.4;}to{transform:translateY(0);opacity:1;}}
.shop-head{text-align:center;flex-shrink:0;}
.flash{
  display:inline-block;background:#fff0d6;color:#c2470a;font-weight:900;font-size:12px;
  padding:4px 12px;border-radius:99px;border:1.5px solid var(--orange);margin-bottom:6px;letter-spacing:.02em;
}
.flash span{font-family:"Space Mono",monospace;}
.shop-title{font-family:"Baloo 2";font-weight:800;font-size:clamp(18px,5.2vw,26px);color:var(--ink);line-height:1.05;}
.shop-title b{color:var(--green);}
.shop-sub{font-size:clamp(11.5px,3.3vw,14px);font-weight:700;color:#8a6a4a;margin:4px 0 12px;}
.shop-sub b{color:var(--orange);}
.shop-cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:10px;overflow-y:auto;padding:2px;
  flex:1;min-height:0;
}
/* below ~520px the cards switch to a compact horizontal row */
@media (max-width:520px){.shop-cards{grid-template-columns:1fr;gap:9px;}}
.deal{
  background:var(--card);border-radius:16px;border:2px solid #eadfd0;cursor:pointer;
  padding:11px;display:flex;flex-direction:column;gap:7px;position:relative;text-align:left;
  box-shadow:0 4px 14px rgba(0,0,0,.07);transition:transform .1s,box-shadow .1s,border-color .1s;
  overflow:hidden;min-width:0;
}
.deal>div{min-width:0;}
@media (max-width:520px){.deal{flex-direction:row;align-items:center;}}
.deal:active{transform:scale(.97);}
.deal.r-common{border-color:#d9cff0;}
.deal.r-rare{border-color:#37b6ff;box-shadow:0 4px 18px rgba(55,182,255,.22);}
.deal.r-epic{border-color:var(--pink);box-shadow:0 4px 20px rgba(255,61,139,.26);}
.deal.r-legendary{border-color:var(--yellow);box-shadow:0 4px 22px rgba(255,194,35,.4);background:linear-gradient(180deg,#fffdf5,#fff6e0);}
.deal-tag{
  position:absolute;top:0;right:0;font-size:9px;font-weight:900;letter-spacing:.06em;color:#fff;
  padding:3px 8px;border-radius:0 14px 0 10px;
}
.r-common .deal-tag{background:#9b8fc0;}
.r-rare .deal-tag{background:#37b6ff;}
.r-epic .deal-tag{background:var(--pink);}
.r-legendary .deal-tag{background:linear-gradient(90deg,#ff9d00,var(--yellow));color:#5a3a00;}
.deal-thumb{
  width:100%;aspect-ratio:1.4/1;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-size:clamp(30px,9vw,42px);flex-shrink:0;position:relative;overflow:hidden;
  background:radial-gradient(circle at 50% 35%,#241a44,#0c0a1c);border:1.5px solid rgba(255,255,255,.08);
}
@media (max-width:520px){.deal-thumb{width:78px;height:64px;aspect-ratio:auto;}}
.deal-dept{font-size:clamp(9px,2.6vw,10px);font-weight:900;letter-spacing:.06em;color:var(--orange);text-transform:uppercase;overflow-wrap:anywhere;}
.deal-name{font-family:"Baloo 2";font-weight:700;font-size:clamp(13px,2.4vw,16px);color:var(--ink);line-height:1.08;overflow-wrap:anywhere;hyphens:auto;}
.deal-desc{font-size:clamp(11px,2vw,13px);font-weight:600;color:#6a6080;line-height:1.25;flex:1;overflow-wrap:anywhere;}
.deal-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:1px;}
.deal-stars{color:var(--yellow);font-size:11px;letter-spacing:.5px;}
.deal-sold{font-size:10px;color:var(--muted);font-weight:700;}
.deal-price{display:flex;align-items:baseline;gap:7px;margin-top:2px;flex-wrap:wrap;}
.price-now{font-family:"Baloo 2";font-weight:800;color:var(--green);font-size:clamp(15px,3vw,19px);}
.price-old{font-size:12px;color:#b3a9c4;text-decoration:line-through;font-weight:700;}
.price-off{font-size:10px;font-weight:900;color:var(--red);background:#ffe2e7;padding:1px 6px;border-radius:99px;}
.deal-lvl{font-size:9.5px;color:var(--muted);font-weight:800;letter-spacing:.04em;}
.add-cart{
  margin-top:auto;width:100%;border:none;border-radius:10px;background:linear-gradient(180deg,#ffa23b,var(--orange));
  color:#fff;font-family:"Baloo 2";font-weight:800;font-size:clamp(12px,2.2vw,14px);padding:8px 6px;cursor:pointer;
  box-shadow:0 3px 0 #c2470a;white-space:normal;overflow-wrap:anywhere;
}
.deal:active .add-cart{box-shadow:0 1px 0 #c2470a;}
/* whole card is already tappable — drop the decorative button on compact screens */
@media (max-width:520px){.add-cart{display:none;}}
.shop-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;flex-shrink:0;flex-wrap:wrap;}
.reroll-btn{
  background:#fff;border:2px solid var(--ink);border-radius:12px;font-family:"Baloo 2";font-weight:700;
  font-size:14px;padding:9px 16px;cursor:pointer;color:var(--ink);box-shadow:0 3px 0 #c9c0e0;
}
.reroll-btn:disabled{opacity:.4;box-shadow:none;cursor:not-allowed;}
.reroll-btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #c9c0e0;}
.reroll-count{color:var(--orange);font-family:"Space Mono",monospace;}
.ship-note{font-size:11px;font-weight:700;color:var(--green);}

/* level-up flash on cart */
.cart-fill.full{animation:cartFlash .5s ease infinite alternate;}
@keyframes cartFlash{from{filter:brightness(1);}to{filter:brightness(1.5);}}

/* ===================== PRIZE WHEEL ===================== */
#wheelScreen{align-items:flex-end;padding:0;background:rgba(7,7,19,.6);backdrop-filter:blur(4px);}
.wheel-sheet{
  width:100%;max-width:640px;margin:0 auto;background:var(--paper);
  border-radius:26px 26px 0 0;box-shadow:0 -16px 60px rgba(0,0,0,.5);
  padding:16px 16px calc(var(--safe-b) + 18px);max-height:94vh;display:flex;flex-direction:column;
  border-top:4px solid var(--yellow);animation:sheetUp .34s cubic-bezier(.2,1.1,.3,1) both;
}
.wheel-head{text-align:center;flex-shrink:0;}
.wheel-track{
  display:flex;flex-direction:column;gap:9px;margin:8px 2px 4px;overflow-y:auto;
}
.prize{
  display:flex;align-items:center;gap:13px;background:var(--card);border-radius:15px;
  border:2.5px solid #e7dccb;padding:11px 13px;position:relative;overflow:hidden;
  transition:transform .12s,border-color .12s,box-shadow .12s,background .12s;
}
.prize .p-emoji{
  width:52px;height:52px;flex-shrink:0;border-radius:13px;display:flex;align-items:center;justify-content:center;
  font-size:28px;background:radial-gradient(circle at 50% 35%,#2a1f4e,#0c0a1c);border:1.5px solid rgba(255,255,255,.1);
}
.prize .p-body{flex:1;min-width:0;text-align:left;}
.prize .p-name{font-family:"Baloo 2";font-weight:700;font-size:clamp(14px,4vw,17px);color:var(--ink);line-height:1.05;}
.prize .p-desc{font-size:clamp(11px,3.1vw,13px);font-weight:600;color:#6a6080;line-height:1.25;margin-top:2px;}
.prize .p-own{
  position:absolute;top:7px;right:9px;font-family:"Space Mono",monospace;font-size:10px;font-weight:700;
  color:#fff;background:var(--ink);padding:2px 7px;border-radius:99px;
}
.prize.lit{border-color:var(--yellow);transform:scale(1.025);box-shadow:0 6px 22px rgba(255,194,35,.45);background:linear-gradient(180deg,#fffdf5,#fff3d6);}
.prize.win{border-color:var(--orange);transform:scale(1.04);box-shadow:0 8px 30px rgba(255,106,19,.55);background:linear-gradient(180deg,#fff7ec,#ffe9cf);animation:winPulse .6s ease;}
@keyframes winPulse{0%{transform:scale(1.12);}100%{transform:scale(1.04);}}
.prize.win .p-emoji{box-shadow:0 0 0 3px var(--yellow);}
.wheel-foot{margin-top:12px;flex-shrink:0;}
.wheel-spin{box-shadow:0 8px 0 #c79100,0 14px 26px rgba(255,194,35,.4);background:linear-gradient(180deg,#ffd34d,#ffb300);color:#4a3000;}
.wheel-spin:active{box-shadow:0 3px 0 #c79100,0 8px 14px rgba(255,194,35,.4);}
.wheel-spin:disabled{opacity:.7;filter:saturate(.6);}
.wheel-claim{background:linear-gradient(180deg,#33d98a,var(--green));box-shadow:0 8px 0 #0f8a55,0 14px 26px rgba(25,195,125,.4);color:#fff;}
/* locked welcome-wheel teaser (free tier) */
.wheel-track.locked .prize{opacity:.62;filter:grayscale(.5);}
.prize .p-lock{margin-left:auto;flex-shrink:0;font-size:20px;opacity:.85;}
.wheel-spin.locked{background:linear-gradient(180deg,#ffd34d,#ff9d00);}
.wheel-skip{display:block;width:100%;margin-top:10px;padding:9px;background:none;border:none;
  color:#cdd2e6;font-family:inherit;font-size:13px;font-weight:700;opacity:.82;
  text-decoration:underline;cursor:pointer;}
.wheel-skip:active{opacity:1;}
.wheel-claim:active{box-shadow:0 3px 0 #0f8a55;}