/* Kiki Store — neon dark brand (matches catgirls) */
:root {
  --neon-pink: #FF1493;
  --neon-cyan: #00D4FF;
  --neon-violet: #BF00FF;
  --neon-rose: #FF85C8;
  --bg-void: #04000c;
  --bg-glass: rgba(255,255,255,0.045);
  --bg-glass-hov: rgba(255,255,255,0.085);
  --border-dim: rgba(255,255,255,0.08);
  --text-bright: #FFFFFF;
  --text-soft: #C8C8E8;
  --text-muted: rgba(255,255,255,0.42);
  --font-display: 'Cinzel','Times New Roman',serif;
  --font-ui: 'Exo 2','Arial',sans-serif;
  --font-jp: 'Noto Sans JP',sans-serif;
  --ease: cubic-bezier(0.4,0,0.2,1);
  --pink-glow: rgba(255,20,147,0.35);
  --cyan-glow: rgba(0,212,255,0.3);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-ui);
  background:var(--bg-void);
  color:var(--text-bright);
  min-height:100vh;
  overflow-x:hidden;
  padding-top:72px;
  padding-bottom:96px;
}

.bg-base{
  position:fixed;inset:0;z-index:-5;
  background:
    radial-gradient(ellipse 130% 90% at 15% 0%, rgba(191,0,255,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 80% 60% at 85% 100%, rgba(0,212,255,0.14) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 55% 55%, rgba(255,20,147,0.10) 0%, transparent 60%),
    linear-gradient(155deg,#04000c 0%,#0b001a 40%,#0f0030 70%,#04000c 100%);
}
.bg-scanlines{
  position:fixed;inset:0;z-index:-3;pointer-events:none;
  background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.06) 2px,rgba(0,0,0,0.06) 4px);
}
.bg-grid{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,20,147,0.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,20,147,0.025) 1px,transparent 1px);
  background-size:64px 64px;
}
.bg-vignette{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 45%,rgba(4,0,12,0.8) 100%);
}

.store-main{
  max-width:1060px;
  margin:0 auto;
  padding:36px 24px 60px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:48px;
}
.back-link{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;
  color:var(--text-muted);text-decoration:none;
  font-size:.72rem;letter-spacing:2px;text-transform:uppercase;
  transition:color .2s var(--ease);
}
.back-link:hover{color:var(--neon-pink)}

.hero{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.hero-emoji{font-size:3.6rem;filter:drop-shadow(0 0 18px var(--pink-glow))}
.hero-title{
  font-family:var(--font-display);
  font-size:clamp(2.4rem,6vw,4.2rem);
  font-weight:700;letter-spacing:.08em;
  background:linear-gradient(130deg,var(--neon-pink) 0%,var(--neon-rose) 35%,var(--neon-cyan) 70%,var(--neon-violet) 100%);
  background-size:220% 220%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:titleGrad 10s ease infinite;
  filter:drop-shadow(0 0 22px var(--pink-glow));
}
@keyframes titleGrad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.hero-jp{font-family:var(--font-jp);font-size:.85rem;letter-spacing:5px;color:var(--neon-cyan);text-shadow:0 0 12px var(--cyan-glow)}
.hero-sub{font-size:.78rem;letter-spacing:3px;color:var(--text-muted);text-transform:uppercase;font-family:var(--font-display)}
.hero-divider{display:flex;align-items:center;gap:16px;width:100%;max-width:420px;margin-top:6px}
.hero-divider-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--pink-glow),transparent)}
.hero-divider-gem{width:8px;height:8px;background:var(--neon-pink);transform:rotate(45deg);box-shadow:0 0 12px var(--neon-pink)}

.balance-bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 22px;
  padding:14px 22px;border-radius:999px;
  border:1px solid rgba(255,20,147,0.35);
  background:rgba(255,20,147,0.08);
  box-shadow:0 0 24px rgba(255,20,147,0.18);
}
.balance-bar .bal-label{font-size:.72rem;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted)}
.balance-bar .bal-val{font-size:1.25rem;font-weight:700;color:var(--neon-cyan)}
.balance-bar .atm-open-btn{
  appearance:none;border:1px solid rgba(126,249,255,0.4);
  background:rgba(0,212,255,0.12);color:var(--neon-cyan);
  border-radius:999px;padding:8px 14px;font:600 .78rem/1 var(--font-ui);
  cursor:pointer;letter-spacing:1px;text-transform:uppercase;
}
.balance-bar .atm-open-btn:hover{background:rgba(0,212,255,0.22)}

.section{width:100%}
.section-label{
  text-align:center;font-size:.62rem;font-weight:600;
  letter-spacing:4px;text-transform:uppercase;color:var(--text-muted);margin-bottom:20px;
}
.toast-banner{
  width:100%;max-width:640px;text-align:center;
  padding:12px 18px;border-radius:14px;
  border:1px solid rgba(255,20,147,0.4);
  background:rgba(24,0,36,0.9);color:#fff;
  font-size:.9rem;display:none;
}
.toast-banner.is-on{display:block}
.toast-banner.ok{border-color:rgba(0,212,255,0.45)}
.toast-banner.warn{border-color:rgba(255,215,0,0.4)}

.pack-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
}
.pack-card{
  position:relative;padding:26px 22px;
  background:var(--bg-glass);
  border:1px solid rgba(255,20,147,0.28);
  border-radius:20px;
  transition:all .3s var(--ease);
  overflow:hidden;
  display:flex;flex-direction:column;gap:10px;
}
.pack-card::before{
  content:'';position:absolute;top:0;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
}
.pack-card:hover{
  transform:translateY(-6px);
  background:var(--bg-glass-hov);
  border-color:var(--neon-pink);
  box-shadow:0 12px 36px rgba(0,0,0,.4),0 0 28px var(--pink-glow);
}
.pack-icon{font-size:2.1rem;filter:drop-shadow(0 0 8px var(--pink-glow))}
.pack-title{font-family:var(--font-display);font-size:1.05rem;letter-spacing:.04em}
.pack-cash{color:var(--neon-cyan);font-weight:700;font-size:1.35rem}
.pack-price{color:var(--text-soft);font-size:.95rem}
.pack-buy{
  margin-top:8px;appearance:none;cursor:pointer;
  border:none;border-radius:12px;padding:12px 16px;
  font:600 .9rem/1.2 var(--font-ui);
  color:#fff;
  background:linear-gradient(90deg,rgba(255,20,147,0.9),rgba(191,0,255,0.8));
  box-shadow:0 0 18px rgba(255,20,147,0.35);
}
.pack-buy:hover{filter:brightness(1.08)}
.pack-buy:disabled{opacity:.45;cursor:not-allowed}

.empty-merch{
  text-align:center;padding:40px 24px;
  border-radius:20px;border:1px dashed rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.03);
  color:var(--text-muted);
}
.empty-merch strong{display:block;color:var(--text-soft);font-family:var(--font-display);margin-bottom:8px;letter-spacing:.06em}

.store-footer-links{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
}
.store-footer-links a{
  color:var(--text-muted);text-decoration:none;font-size:.78rem;letter-spacing:1px;
  border-bottom:1px solid transparent;
}
.store-footer-links a:hover{color:var(--neon-pink);border-color:var(--neon-pink)}

@media(max-width:768px){
  .store-main{padding:20px 16px 48px;gap:36px}
  .pack-grid{grid-template-columns:1fr}
}