/* ============================================================
   ARKADE 2.0 — Shop & locker specific styles
   ============================================================ */
/* Runde 18: sichtbarer Scroll-"Regler" statt versteckter Scrollbar (siehe base.css #toptabs/.shop-tabs
   für die eigentliche Scrollbar-Optik) — bei 13 Shop- bzw. 17 Admin-Kategorien (beide nutzen diese
   Klasse) muss auf Mobile/iPad sichtbar sein, dass mehr Inhalt seitlich wartet. */
.shop-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 20px; }
.shop-tab {
  display: flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--surface); border: var(--border-w) solid var(--border); color: var(--text-dim);
  font-weight: 600; font-size: 14px; white-space: nowrap; transition: all .15s;
}
.shop-tab:hover { border-color: var(--border-hi); color: var(--text); }
.shop-tab.active { background: var(--grad-accent); color: #0a0b10; border-color: var(--border-hi); font-weight: 700; padding-left: 22px; position: relative; }
.shop-tab.active::before { content: ''; position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 2px; background: #0a0b10; }

/* Runde 21: Öffnen-Animation für Mystery Boxen + Nadel-Bounce fürs Glücksrad-Landen. */
@keyframes shopBoxShake { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-8deg); } 40% { transform: rotate(7deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(4deg); } }
@keyframes shopNeedleBounce { 0% { transform: translateX(-50%) rotate(0deg); } 30% { transform: translateX(-50%) rotate(-14deg); } 55% { transform: translateX(-50%) rotate(9deg); } 75% { transform: translateX(-50%) rotate(-5deg); } 100% { transform: translateX(-50%) rotate(0deg); } }
.low-power [style*="shopBoxShake"], .low-power [style*="shopNeedleBounce"] { animation: none !important; }

/* Runde 18: die frühere "dünner Rand + hellerer Rand oben"-Glas-Lichtkante entfällt (kein Glas
   mehr) — ein einziger durchgehender dicker Rand ersetzt sie. */
.shop-item {
  position: relative; border-radius: var(--r-lg); border: var(--border-w) solid var(--border); overflow: hidden;
  background: var(--surface); padding: 16px; display: flex; flex-direction: column; gap: 10px;
  transition: transform .15s var(--ease-out), border-color .15s, box-shadow .15s;
}
.shop-item:hover { transform: translate(-2px, -2px); border-color: var(--border-hi); box-shadow: var(--sh-md); }
.shop-item.owned { border-color: var(--green); }
.shop-item .si-preview { height: 76px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--bg-1); }
.shop-item .si-name { font-weight: 700; font-size: 15px; }
.shop-item .si-desc { font-size: 12px; color: var(--text-mut); line-height: 1.4; min-height: 16px; }
.shop-item .si-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.shop-item .si-price { font-family: var(--font-mono); font-weight: 700; font-size: 14px; }
.shop-item .si-price.coin { color: var(--gold); }
.shop-item .si-price.gem { color: var(--cyan); }
.shop-item .si-buy { margin-left: auto; }
.shop-item .si-tag { position: absolute; top: 10px; right: 10px; }

.perk-active-bar {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px;
}
.perk-active {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: var(--r-md);
  background: var(--surface-hi); border: var(--border-w) solid var(--border-hi);
}
.perk-active .pa-ic { font-size: 22px; }
.perk-active .pa-name { font-weight: 700; font-size: 13px; }

/* Runde 18: die veralteten Cyan/Violett-Reste (aus einer noch früheren Runde vor "Ember Glass")
   sind entfernt — flache, deckende Tönung mit dem aktuellen Akzent statt Verlauf. */
.gem-cta {
  background: var(--grad-accent-soft), var(--ink-1);
  border: var(--border-w) solid var(--border); position: relative; overflow: hidden;
}
.gem-cta::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--grain-layer); opacity: .5; mix-blend-mode: overlay; }