/* ========================================
   BARABAN — Mobile-First Gambling Style
   ======================================== */

:root {
  /* Casino Gold & Neon Colors */
  --gold: #FFD700;
  --gold-dark: #FFA500;
  --gold-light: #FFED4E;
  --red-neon: #FF0844;
  --pink-neon: #FF1493;
  --purple-neon: #9D00FF;
  --cyan-neon: #00FFFF;
  --green-neon: #00FF41;

  /* Backgrounds */
  --bg-dark: #0A0014;
  --bg-gradient: linear-gradient(180deg, #0A0014 0%, #1A0028 50%, #0A0014 100%);
  --card-bg: rgba(20, 10, 30, 0.95);
  --glass-bg: rgba(255, 255, 255, 0.05);

  /* Text */
  --text-white: #FFFFFF;
  --text-gold: var(--gold);
  --text-muted: rgba(255, 255, 255, 0.7);

  /* Shadows & Glows */
  --glow-gold: 0 0 20px var(--gold), 0 0 40px var(--gold-dark);
  --glow-red: 0 0 30px var(--red-neon), 0 0 60px rgba(255, 8, 68, 0.5);
  --glow-purple: 0 0 25px var(--purple-neon), 0 0 50px rgba(157, 0, 255, 0.5);
}

/* ========================================
   RESET & BASE
   ======================================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100vh;
  background: var(--bg-dark);
  background-image: var(--bg-gradient);
  color: var(--text-white);
  font-family: 'Rubik', sans-serif;
  overflow-x: hidden;
  position: relative;
  touch-action: pan-y;
}

/* ========================================
   ANIMATED BACKGROUND
   ======================================== */

.stars {
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, white, transparent),
    radial-gradient(2px 2px at 60% 70%, white, transparent),
    radial-gradient(1px 1px at 50% 50%, white, transparent),
    radial-gradient(1px 1px at 80% 10%, white, transparent),
    radial-gradient(2px 2px at 90% 60%, white, transparent),
    radial-gradient(1px 1px at 30% 80%, white, transparent);
  background-size: 200% 200%;
  background-position: 0% 0%;
  animation: stars-twinkle 8s ease-in-out infinite;
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}

@keyframes stars-twinkle {
  0%, 100% { opacity: 0.3; background-position: 0% 0%; }
  50% { opacity: 0.6; background-position: 100% 100%; }
}

.glow-orbs {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 215, 0, 0.15), transparent 30%),
    radial-gradient(circle at 85% 80%, rgba(255, 8, 68, 0.15), transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(157, 0, 255, 0.1), transparent 40%);
  animation: orbs-float 10s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

@keyframes orbs-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-20px, -30px) scale(1.1); }
  66% { transform: translate(20px, 20px) scale(0.9); }
}

/* ========================================
   APP CONTAINER
   ======================================== */

.app {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ========================================
   HEADER
   ======================================== */

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: var(--card-bg);
  border-bottom: 3px solid var(--gold);
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.logo-icon {
  font-size: 32px;
  animation: logo-bounce 2s ease-in-out infinite;
}

@keyframes logo-bounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(10deg); }
}

.logo-text {
  font-family: 'Bungee', cursive;
  font-size: 28px;
  letter-spacing: 2px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark), var(--gold-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
  filter: drop-shadow(0 2px 8px rgba(255, 215, 0, 0.4));
}

.coins-display {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.2));
  padding: 8px 16px;
  border-radius: 50px;
  border: 2px solid var(--gold);
  box-shadow: var(--glow-gold);
}

.coin-icon {
  font-size: 24px;
  animation: coin-spin 3s linear infinite;
}

@keyframes coin-spin {
  0%, 100% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
}

#sectorCounter {
  font-family: 'Black Ops One', cursive;
  font-size: 24px;
  color: var(--gold);
  min-width: 30px;
  text-align: center;
  text-shadow: 0 0 10px var(--gold);
}

/* ========================================
   WHEEL SECTION
   ======================================== */

.wheel-section {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.wheel-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* Prize Pointer */
.prize-pointer {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pointer-arrow {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 40px solid var(--red-neon);
  filter: drop-shadow(0 0 15px var(--red-neon));
  animation: pointer-pulse 1.5s ease-in-out infinite;
}

@keyframes pointer-pulse {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.1); }
}

.pointer-gem {
  font-size: 32px;
  margin-top: 5px;
  filter: drop-shadow(0 0 10px var(--cyan-neon));
  animation: gem-sparkle 2s ease-in-out infinite;
}

@keyframes gem-sparkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.2); }
}

/* Wheel Frame */
.wheel-frame {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--card-bg);
  padding: 15px;
  border: 5px solid var(--gold);
  box-shadow:
    var(--glow-gold),
    inset 0 0 50px rgba(255, 215, 0, 0.2),
    0 10px 50px rgba(0, 0, 0, 0.5);
  position: relative;
}

.wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.1), transparent 70%),
    conic-gradient(from 0deg,
      transparent 0deg,
      rgba(255, 215, 0, 0.1) 45deg,
      transparent 90deg,
      rgba(255, 8, 68, 0.1) 135deg,
      transparent 180deg,
      rgba(157, 0, 255, 0.1) 225deg,
      transparent 270deg,
      rgba(0, 255, 255, 0.1) 315deg,
      transparent 360deg
    );
  border: 8px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.8),
    0 5px 30px rgba(0, 0, 0, 0.6);
  transition: transform 5s cubic-bezier(0.17, 0.67, 0.12, 0.99);
  overflow: hidden;
}

.wheel.spinning {
  transition: transform 6s cubic-bezier(0.08, 0.6, 0.15, 1);
}

/* Wheel Center */
.wheel-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  border: 5px solid var(--text-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--glow-gold), inset 0 0 20px rgba(0, 0, 0, 0.4);
  z-index: 100;
}

.center-star {
  font-size: 40px;
  color: var(--text-white);
  animation: star-rotate 5s linear infinite;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
}

@keyframes star-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Wheel Segments */
.segment {
  position: absolute;
  width: 50%;
  height: 50%;
  transform-origin: 100% 100%;
  overflow: hidden;
}

.segment-content {
  position: absolute;
  inset: -100% 0 0 -100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 15px;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-white);
  text-shadow:
    0 0 10px rgba(0, 0, 0, 0.9),
    0 2px 4px rgba(0, 0, 0, 0.8),
    0 0 20px currentColor;
  border: 2px solid rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.segment-label {
  font-weight: 900;
  font-size: 15px;
  line-height: 1.2;
}

/* Mega Spin Button */
.spin-mega-btn {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 6px solid var(--gold);
  background: linear-gradient(135deg, var(--red-neon), var(--pink-neon));
  box-shadow:
    var(--glow-red),
    inset 0 0 40px rgba(255, 255, 255, 0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.3s ease;
  z-index: 10;
  font-family: 'Black Ops One', cursive;
}

.spin-mega-btn:active {
  transform: translateX(-50%) scale(0.95);
}

.spin-mega-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(1);
}

.spin-btn-bg {
  position: absolute;
  inset: -50%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: spin-bg-rotate 3s linear infinite;
}

@keyframes spin-bg-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spin-btn-shine {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4), transparent 50%);
  animation: shine-pulse 2s ease-in-out infinite;
}

@keyframes shine-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.spin-btn-text {
  position: relative;
  z-index: 2;
  font-size: 22px;
  color: var(--text-white);
  text-shadow:
    0 0 10px rgba(0, 0, 0, 0.8),
    0 0 20px var(--gold),
    0 2px 4px rgba(0, 0, 0, 0.6);
  text-align: center;
  line-height: 1.2;
  padding: 0 15px;
  letter-spacing: 2px;
}

/* Winner Card */
.winner-card {
  width: 100%;
  background: var(--card-bg);
  border: 3px solid var(--gold);
  border-radius: 20px;
  padding: 24px;
  text-align: center;
  box-shadow: var(--glow-gold), inset 0 0 30px rgba(255, 215, 0, 0.1);
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.winner-badge {
  font-family: 'Black Ops One', cursive;
  font-size: 14px;
  color: var(--gold);
  letter-spacing: 2px;
  text-shadow: 0 0 15px var(--gold);
}

.winner-title {
  font-family: 'Bungee', cursive;
  font-size: 28px;
  color: var(--text-white);
  text-shadow: 0 0 20px var(--cyan-neon);
  word-break: break-word;
}

.winner-desc {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.4;
}

.winner-link {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--purple-neon), var(--pink-neon));
  color: var(--text-white);
  text-decoration: none;
  border-radius: 50px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: var(--glow-purple);
  transition: all 0.3s ease;
}

.winner-link:hover {
  transform: scale(1.05);
  box-shadow: 0 0 40px var(--purple-neon);
}

.winner-link:empty {
  display: none;
}

/* ========================================
   QUICK ADD SECTION
   ======================================== */

.quick-add-section {
  padding: 20px;
  background: var(--card-bg);
  border-top: 3px solid var(--gold);
  box-shadow: 0 -4px 20px rgba(255, 215, 0, 0.2);
  margin-top: auto;
}

/* Input Group */
.input-group {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.quick-input {
  flex: 1;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 215, 0, 0.5);
  border-radius: 50px;
  color: var(--text-white);
  font-family: 'Rubik', sans-serif;
  transition: all 0.3s ease;
}

.quick-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.quick-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
  background: rgba(255, 255, 255, 0.15);
}

.add-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  border: 3px solid var(--gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--glow-gold);
  transition: all 0.3s ease;
}

.add-btn:active {
  transform: scale(0.9);
}

.add-btn-plus {
  font-size: 36px;
  font-weight: 900;
  color: var(--bg-dark);
  line-height: 1;
}

/* Chips Container */
.chips-container {
  min-height: 120px;
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 20px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 15px;
  border: 2px dashed rgba(255, 215, 0, 0.3);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: flex-start;
}

.chips-container::-webkit-scrollbar {
  width: 8px;
}

.chips-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

.chips-container::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 10px;
}

.empty-state {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-muted);
  padding: 20px;
}

.empty-icon {
  font-size: 48px;
  opacity: 0.5;
}

.empty-state p {
  font-size: 14px;
  text-align: center;
}

/* Chip (option card) */
.chip {
  position: relative;
  padding: 12px 40px 12px 20px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.3));
  border: 2px solid var(--gold);
  border-radius: 50px;
  color: var(--text-white);
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
  animation: chip-pop 0.3s ease;
}

@keyframes chip-pop {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.chip-color {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 8px currentColor;
  flex-shrink: 0;
}

.chip-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.chip-remove {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 8, 68, 0.8);
  border: 2px solid white;
  color: white;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.chip-remove:hover {
  background: var(--red-neon);
  transform: translateY(-50%) scale(1.1);
}

/* Action Bar */
.action-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.action-btn {
  padding: 16px 12px;
  border-radius: 15px;
  border: 2px solid;
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
  font-family: 'Rubik', sans-serif;
}

.action-btn:active {
  transform: scale(0.95);
}

.action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(1);
}

.btn-emoji {
  font-size: 28px;
}

.btn-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.random-btn {
  border-color: var(--purple-neon);
  color: var(--purple-neon);
}

.random-btn:not(:disabled):active {
  background: rgba(157, 0, 255, 0.2);
  box-shadow: 0 0 25px rgba(157, 0, 255, 0.5);
}

.save-btn {
  border-color: var(--cyan-neon);
  color: var(--cyan-neon);
}

.save-btn:not(:disabled):active {
  background: rgba(0, 255, 255, 0.2);
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.5);
}

.share-btn {
  border-color: var(--green-neon);
  color: var(--green-neon);
}

.share-btn:not(:disabled):active {
  background: rgba(0, 255, 65, 0.2);
  box-shadow: 0 0 25px rgba(0, 255, 65, 0.5);
}

/* ========================================
   MODAL
   ======================================== */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal.active {
  display: flex;
  animation: modal-fade-in 0.3s ease;
}

@keyframes modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-content {
  background: var(--card-bg);
  border: 3px solid var(--gold);
  border-radius: 20px;
  width: 100%;
  max-width: 500px;
  box-shadow: var(--glow-gold);
  animation: modal-slide-up 0.3s ease;
}

@keyframes modal-slide-up {
  from { transform: translateY(50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 2px solid rgba(255, 215, 0, 0.3);
}

.modal-header h2 {
  font-family: 'Bungee', cursive;
  font-size: 20px;
  color: var(--gold);
}

.modal-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 8, 68, 0.2);
  border: 2px solid var(--red-neon);
  color: var(--red-neon);
  font-size: 28px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.modal-close:hover {
  background: var(--red-neon);
  color: white;
  transform: rotate(90deg);
}

.modal-body {
  padding: 20px;
}

.share-input-group {
  display: flex;
  gap: 10px;
}

.share-url-input {
  flex: 1;
  padding: 14px 18px;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 215, 0, 0.5);
  border-radius: 12px;
  color: var(--text-white);
  font-size: 14px;
  font-family: monospace;
}

.copy-share-btn {
  padding: 14px 24px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  border: 2px solid var(--gold-light);
  border-radius: 12px;
  color: var(--bg-dark);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: var(--glow-gold);
  transition: all 0.3s ease;
}

.copy-share-btn:active {
  transform: scale(0.95);
}

/* ========================================
   CONFETTI
   ======================================== */

.confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

.confetti-piece {
  position: absolute;
  width: 10px;
  height: 16px;
  top: -20px;
  animation: confetti-fall 3s linear forwards;
}

@keyframes confetti-fall {
  to {
    transform: translateY(110vh) rotate(720deg);
    opacity: 0;
  }
}

/* ========================================
   TABLET & DESKTOP
   ======================================== */

@media (min-width: 768px) {
  .app {
    max-width: 700px;
    padding: 20px;
  }

  .header {
    border-radius: 20px 20px 0 0;
  }

  .wheel-container {
    max-width: 500px;
  }

  .spin-mega-btn {
    width: 200px;
    height: 200px;
  }

  .spin-btn-text {
    font-size: 24px;
  }

  .quick-add-section {
    border-radius: 0 0 20px 20px;
  }

  .chip-label {
    max-width: 300px;
  }
}

@media (min-width: 1024px) {
  .app {
    max-width: 900px;
  }

  .action-bar {
    grid-template-columns: repeat(3, 1fr);
  }
}