/* =========================================================
   FLAPPY BIRD: STORE COMPONENT OVERRIDES (HANDCRAFTED ARCADE THEME)
   ========================================================= */

.shop-tabs-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
  margin-bottom: 5px;
  width: 100%;
  flex-shrink: 0;
  background: #091427;
  border: 1.5px solid #1c355a;
  border-radius: 10px;
  padding: 3px 4px;
  box-sizing: border-box;
}

.shop-tabs {
  display: flex;
  gap: 4px;
  margin: 0;
  overflow-x: auto;
  padding: 0 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  flex: 1 1 auto;
  scroll-behavior: smooth;
}

.shop-tabs::-webkit-scrollbar {
  display: none;
}

.shop-tabs button {
  flex-shrink: 0;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 7px;
  background: transparent;
  border: 1px solid transparent;
  color: #94a3b8;
  box-shadow: none;
  font: 900 10px/1 'Trebuchet MS', Arial, sans-serif;
  letter-spacing: .3px;
  white-space: nowrap;
  transition: all .15s ease;
  touch-action: manipulation;
  cursor: pointer;
}

.shop-tabs button:hover {
  background: rgba(56, 189, 248, 0.15);
  color: #e2e8f0;
}

.shop-tabs button.active {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
  border: 1px solid #38bdf8;
  color: #ffffff;
  box-shadow: 0 2px 0 #075985;
}

.tab-scroll-arrow {
  flex-shrink: 0;
  width: 20px;
  height: 22px;
  border-radius: 6px;
  background: #11203b;
  border: 1.5px solid #1e385f;
  color: #38bdf8;
  font: 900 13px Arial, sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  padding: 0;
  line-height: 1;
  box-shadow: 0 1.5px 0 #091427;
}

.tab-scroll-arrow:hover {
  background: #182c4e;
  color: #ffffff;
  border-color: #38bdf8;
}

.tab-scroll-arrow:active {
  transform: translateY(1px);
}

.skin-card.playing-preview {
  border-color: #38bdf8;
  background: linear-gradient(180deg, #1e3e6b 0%, #122846 100%);
  box-shadow: 0 0 0 1.5px #38bdf8, 0 4px 12px rgba(56, 189, 248, 0.35);
}

.skin-card.playing-preview .skin-cost {
  background: #0284c7 !important;
  color: #fff !important;
}

.skin-card .skin-preview.pipe-preview,
.skin-card .skin-preview.bg-preview,
.skin-card .skin-preview.music-preview,
.skin-card .skin-preview.aura-preview,
.skin-card .skin-preview.hat-preview,
.skin-card .skin-preview.outfit-preview,
.skin-card .skin-preview.booster-preview {
  background: #091427;
}