/* ============================================================
   ARCADE VENDOR — Ice Cream Truck Prize Exchange
   Palette purchasing UI + 3D gamble carousel
   ============================================================ */

/* ── Vendor Row Header (ice cream truck theme) ── */
#row-vendor .games-row-header {
  background: linear-gradient(90deg,
    rgba(255, 182, 193, 0.08) 0%,
    rgba(255, 218, 185, 0.06) 50%,
    rgba(173, 216, 230, 0.08) 100%);
}

#row-vendor .games-row-label {
  letter-spacing: 0.15em;
}

.vendor-currency-badge {
  margin-left: auto;
  font-size: 0.8em;
  color: #ffd700;
  letter-spacing: 0.05em;
  font-weight: 600;
  opacity: 0.85;
}

/* ── Vendor Overlay (modal) ── */
.vendor-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 960;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.vendor-overlay.vendor-visible {
  display: flex;
  opacity: 1;
}

/* Minimize state — shrinks to top-left chip while dragging item to inventory */
.vendor-overlay.vendor-minimized .vendor-modal {
  transform: scale(0.08) translate(-400%, -300%);
  opacity: 0.3;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.2s ease;
}

.vendor-overlay.vendor-minimized .vendor-dim {
  opacity: 0;
  pointer-events: none;
}

.vendor-dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  transition: opacity 0.25s ease;
}

.vendor-modal {
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 520px;
  max-height: 82vh;
  background: rgba(15, 18, 15, 0.98);
  /* Punch through CRT scanlines — crisp content */
  isolation: isolate;
  border: 1px solid rgba(255, 200, 140, 0.2);
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 0 40px rgba(255, 180, 120, 0.08),
    inset 0 0 30px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  transform-origin: top left;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.2s ease;
}

/* ── Vendor Header (ice cream truck banner) ── */
.vendor-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(135deg,
    rgba(255, 150, 170, 0.12) 0%,
    rgba(255, 200, 120, 0.1) 50%,
    rgba(140, 200, 255, 0.1) 100%);
  border-bottom: 1px solid rgba(255, 200, 140, 0.15);
}

.vendor-truck-icon {
  font-size: 1.8em;
  animation: vendor-truck-bounce 2s ease-in-out infinite;
}

@keyframes vendor-truck-bounce {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-3px) rotate(-2deg); }
  75% { transform: translateY(-2px) rotate(1deg); }
}

.vendor-title {
  font-size: 0.9em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--phosphor-bright, #90ee90);
  flex: 1;
}

.vendor-title-sub {
  font-size: 0.65em;
  opacity: 0.5;
  letter-spacing: 0.08em;
  display: block;
  margin-top: 2px;
}

.vendor-balance {
  font-size: 0.85em;
  color: #ffd700;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.vendor-close {
  background: rgba(255, 60, 60, 0.15);
  border: 1px solid rgba(255, 60, 60, 0.3);
  color: rgba(255, 100, 100, 0.8);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.8em;
  display: grid;
  place-items: center;
  transition: all 0.15s;
}

.vendor-close:hover {
  background: rgba(255, 60, 60, 0.3);
  color: #ff6464;
}

/* ── Tab Switcher ── */
.vendor-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255, 200, 140, 0.1);
}

.vendor-tab {
  flex: 1;
  padding: 8px 12px;
  background: none;
  border: none;
  color: var(--phosphor-dim, #668866);
  font-size: 0.72em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s;
  border-bottom: 2px solid transparent;
}

.vendor-tab:hover {
  color: var(--phosphor-bright, #90ee90);
}

.vendor-tab.vendor-tab-active {
  color: #ffd700;
  border-bottom-color: #ffd700;
}

/* ── Tab Content ── */
.vendor-tab-content {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}

.vendor-panel {
  display: none;
}

.vendor-panel.vendor-panel-active {
  display: block;
}

/* ════════════════════════════════════════════════
   PURCHASING — Color Palette UI
   ════════════════════════════════════════════════ */

.vendor-palette-container {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  margin-bottom: 12px;
}

.vendor-palette {
  display: flex;
  height: 140px;
  width: 100%;
}

.vendor-prize {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: flex 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  border: none;
  padding: 0;
  color: white;
}

.vendor-prize:nth-child(1) { background: #264653; }
.vendor-prize:nth-child(2) { background: #2a9d8f; }
.vendor-prize:nth-child(3) { background: #e9c46a; }
.vendor-prize:nth-child(4) { background: #f4a261; }

/* Rotating buyback slot — pulsing border */
.vendor-prize.vendor-buyback {
  background: linear-gradient(135deg, #3a506b, #1c2541);
  border-left: 1px dashed rgba(255, 215, 0, 0.3);
}

.vendor-prize-emoji {
  font-size: 1.6em;
  transition: transform 0.15s ease;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
}

.vendor-prize-name {
  font-size: 0.6em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.15s ease;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.5);
}

.vendor-prize-price {
  font-size: 0.55em;
  opacity: 0;
  transition: opacity 0.15s ease;
  color: #ffd700;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.vendor-prize:hover {
  flex: 2.2;
  box-shadow: rgba(100, 100, 111, 0.25) 0px 7px 29px 0px;
}

.vendor-prize:hover .vendor-prize-name,
.vendor-prize:hover .vendor-prize-price {
  opacity: 1;
}

.vendor-prize:hover .vendor-prize-emoji {
  transform: scale(1.2);
}

/* Affordability states */
.vendor-prize.vendor-cant-afford {
  filter: grayscale(0.5) brightness(0.6);
  cursor: not-allowed;
}

.vendor-prize.vendor-cant-afford:hover {
  flex: 1;
  box-shadow: none;
}

.vendor-prize.vendor-sold {
  opacity: 0.25;
  pointer-events: none;
}

.vendor-prize.vendor-sold::after {
  content: 'SOLD';
  position: absolute;
  font-size: 0.6em;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.5);
}

/* Palette stats bar */
.vendor-palette-stats {
  height: 32px;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  box-sizing: border-box;
  color: rgba(200, 200, 200, 0.5);
  font-size: 0.6em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vendor-palette-stats svg {
  fill: rgba(200, 200, 200, 0.4);
  width: 14px;
  height: 14px;
}

/* ════════════════════════════════════════════════
   GAMBLE — 3D Rotating Card Carousel
   ════════════════════════════════════════════════ */

.vendor-gamble-arena {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
}

.vendor-gamble-label {
  font-size: 0.65em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--phosphor-dim, #668866);
  margin-bottom: 12px;
  opacity: 0.7;
}

/* 3D Scene */
.vendor-carousel-scene {
  width: 300px;
  height: 180px;
  perspective: 800px;
  margin: 0 auto;
  cursor: pointer;
}

.vendor-carousel {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: vendorCarouselSpin 18s linear infinite;
  will-change: transform;
}

.vendor-carousel:hover {
  animation-play-state: paused;
}

@keyframes vendorCarouselSpin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(-360deg); }
}

/* Gamble cards in carousel */
.vendor-gamble-card {
  position: absolute;
  width: 70px;
  height: 100px;
  border-radius: 6px;
  border: 2px solid rgba(200, 200, 200, 0.15);
  top: 50%;
  left: 50%;
  transform-origin: center center;
  animation: vendorCardBrightness 18s linear infinite;
  transition: border-color 0.2s, box-shadow 0.2s;
  will-change: transform, filter;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
}

.vendor-gamble-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  opacity: 0.9;
  z-index: 0;
}

.vendor-gamble-card-price {
  position: relative;
  z-index: 1;
  font-size: 0.5em;
  color: #ffd700;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.vendor-gamble-card-icon {
  position: relative;
  z-index: 1;
  font-size: 1.3em;
}

.vendor-gamble-card-label {
  position: relative;
  z-index: 1;
  font-size: 0.4em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* Carousel hover pauses card brightness too */
.vendor-carousel:hover .vendor-gamble-card {
  animation-play-state: paused;
}

.vendor-gamble-card:hover {
  border-color: #ffd700;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.3);
}

@keyframes vendorCardBrightness {
  10%  { filter: brightness(1); }
  50%  { filter: brightness(0.15); }
  90%  { filter: brightness(1); }
}

/* Gamble gradient types */
.vendor-gamble-standard::before {
  background: linear-gradient(135deg, #4CAF50, #ffd700, #4CAF50);
}
.vendor-gamble-cursed::before {
  background: linear-gradient(135deg, #b71c1c, #1a1a1a, #b71c1c);
}
.vendor-gamble-binary::before {
  background: linear-gradient(135deg, #fff, #111, #fff, #111);
}
.vendor-gamble-empty::before {
  background: linear-gradient(135deg, #444, #222, #333, #444);
}

/* Carousel card positions (8 cards around cylinder) */
.vendor-gamble-card:nth-child(1) { transform: translate(-50%, -50%) rotateY(0deg) translateZ(120px); animation-delay: 0s; }
.vendor-gamble-card:nth-child(2) { transform: translate(-50%, -50%) rotateY(45deg) translateZ(120px); animation-delay: -2.25s; }
.vendor-gamble-card:nth-child(3) { transform: translate(-50%, -50%) rotateY(90deg) translateZ(120px); animation-delay: -4.5s; }
.vendor-gamble-card:nth-child(4) { transform: translate(-50%, -50%) rotateY(135deg) translateZ(120px); animation-delay: -6.75s; }
.vendor-gamble-card:nth-child(5) { transform: translate(-50%, -50%) rotateY(180deg) translateZ(120px); animation-delay: -9s; }
.vendor-gamble-card:nth-child(6) { transform: translate(-50%, -50%) rotateY(225deg) translateZ(120px); animation-delay: -11.25s; }
.vendor-gamble-card:nth-child(7) { transform: translate(-50%, -50%) rotateY(270deg) translateZ(120px); animation-delay: -13.5s; }
.vendor-gamble-card:nth-child(8) { transform: translate(-50%, -50%) rotateY(315deg) translateZ(120px); animation-delay: -15.75s; }

/* Gamble result flash */
@keyframes vendorGambleFlash {
  0%   { box-shadow: 0 0 0 rgba(255, 215, 0, 0); }
  30%  { box-shadow: 0 0 40px rgba(255, 215, 0, 0.8); }
  70%  { box-shadow: 0 0 20px rgba(255, 215, 0, 0.4); }
  100% { box-shadow: 0 0 0 rgba(255, 215, 0, 0); }
}

.vendor-gamble-result {
  animation: vendorGambleFlash 0.8s ease-out;
}

/* Gamble cost label */
.vendor-gamble-cost {
  font-size: 0.6em;
  color: rgba(255, 215, 0, 0.7);
  letter-spacing: 0.08em;
  margin-top: 10px;
}

/* ════════════════════════════════════════════════
   PURCHASE FEEDBACK & DRAG GHOST
   ════════════════════════════════════════════════ */

.vendor-purchase-ghost {
  position: fixed;
  z-index: 999999;
  pointer-events: none;
  font-size: 2.2em;
  opacity: 0.85;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
  animation: vendor-ghost-pulse 0.5s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes vendor-ghost-pulse {
  from { transform: translate(-50%, -50%) scale(1); }
  to   { transform: translate(-50%, -50%) scale(1.12); }
}

/* Purchase success flash on the prize slot */
@keyframes vendorPurchaseFlash {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(0.92); opacity: 0.5; }
  100% { transform: scale(1); opacity: 0.25; }
}

.vendor-prize-purchased {
  animation: vendorPurchaseFlash 0.4s ease-out forwards;
}

/* ════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .vendor-modal {
    width: 95%;
    max-height: 75vh;
  }

  .vendor-palette {
    height: 120px;
  }

  .vendor-carousel-scene {
    width: 240px;
    height: 150px;
  }

  .vendor-gamble-card {
    width: 56px;
    height: 80px;
  }

  /* Smaller carousel radius on mobile */
  .vendor-gamble-card:nth-child(1) { transform: translate(-50%, -50%) rotateY(0deg) translateZ(90px); }
  .vendor-gamble-card:nth-child(2) { transform: translate(-50%, -50%) rotateY(45deg) translateZ(90px); }
  .vendor-gamble-card:nth-child(3) { transform: translate(-50%, -50%) rotateY(90deg) translateZ(90px); }
  .vendor-gamble-card:nth-child(4) { transform: translate(-50%, -50%) rotateY(135deg) translateZ(90px); }
  .vendor-gamble-card:nth-child(5) { transform: translate(-50%, -50%) rotateY(180deg) translateZ(90px); }
  .vendor-gamble-card:nth-child(6) { transform: translate(-50%, -50%) rotateY(225deg) translateZ(90px); }
  .vendor-gamble-card:nth-child(7) { transform: translate(-50%, -50%) rotateY(270deg) translateZ(90px); }
  .vendor-gamble-card:nth-child(8) { transform: translate(-50%, -50%) rotateY(315deg) translateZ(90px); }
}

@media (max-width: 480px) {
  .vendor-palette {
    height: 100px;
  }

  .vendor-prize-emoji {
    font-size: 1.2em;
  }

  .vendor-header {
    padding: 8px 10px;
  }

  .vendor-truck-icon {
    font-size: 1.4em;
  }
}