/* Socify Giveaway — custom animations & layout helpers */

body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

.badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.72rem; letter-spacing: 0.04em;
  padding: 0.2rem 0.55rem; border-radius: 9999px; border: 1px solid transparent;
}

/* ---- Slot reel ---- */
#reel { will-change: transform; }
#reel .row { height: 64px; }

/* ---- Confetti ---- */
#confetti-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 60;
}

/* ---- Winner banner ---- */
@keyframes bannerIn {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.banner-pop { animation: bannerIn 0.45s ease-out both; }

/* ---- Toggle switch ---- */
.switch { position: relative; width: 46px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track {
  position: absolute; inset: 0; border-radius: 9999px;
  background: #374151; transition: background 0.2s; cursor: pointer;
}
.switch .track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 9999px; background: #fff; transition: transform 0.2s;
}
.switch input:checked + .track { background: linear-gradient(135deg, #f77737, #e1306c); }
.switch input:checked + .track::after { transform: translateX(20px); }

/* ---- Counters ---- */
.stepper button {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; background: #1f2937; color: #fff;
  font-size: 1.15rem; font-weight: 700; transition: background 0.15s;
}
.stepper button:hover { background: #374151; }
.stepper button:active { transform: scale(0.94); }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #374151; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- Sticky action column (settings table) ---- */
.sticky-col {
  position: sticky; right: 0;
  background-color: #17171d;
  box-shadow: -8px 0 12px -8px rgba(0, 0, 0, 0.6);
}
tr:hover .sticky-col { background-color: #1e1e26; }

/* ---- Reel center indicator ---- */
.center-line {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; transform: translateY(-1px);
  background: linear-gradient(90deg, transparent, #e1306c, transparent);
  z-index: 20; pointer-events: none;
}

/* ========== SPLASH v2: neon burst + glowing typewriter ========== */
.splash-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  margin: 0;
  opacity: 0;
  animation:
    splash-title-burst 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    splash-title-pulse 2.4s ease-in-out 0.75s infinite;
}
/* 1. Adım: ani turuncu/kırmızı neon ışık patlaması (flash glow burst) */
@keyframes splash-title-burst {
  0%   { opacity: 0; transform: scale(0.92); text-shadow: 0 0 0 rgba(255,90,31,0); }
  45%  { opacity: 1; transform: scale(1.04);
         text-shadow: 0 0 20px rgba(255,170,100,1), 0 0 50px rgba(255,110,40,1), 0 0 95px rgba(255,140,70,0.95), 0 0 160px rgba(255,150,80,0.6); }
  70%  { text-shadow: 0 0 12px rgba(255,120,50,1), 0 0 34px rgba(255,90,31,0.95), 0 0 70px rgba(255,120,60,0.75), 0 0 110px rgba(255,140,70,0.45); }
  100% { opacity: 1; transform: scale(1); text-shadow:
           0 0 10px rgba(255,110,40,1), 0 0 28px rgba(255,90,31,0.9), 0 0 60px rgba(255,120,60,0.6), 0 0 100px rgba(255,140,70,0.35); }
}
/* burst sonrası hafif sürekli parlama */
@keyframes splash-title-pulse {
  0%, 100% { text-shadow: 0 0 10px rgba(255,110,40,1), 0 0 28px rgba(255,90,31,0.9), 0 0 60px rgba(255,120,60,0.6), 0 0 100px rgba(255,140,70,0.35); }
  50%      { text-shadow: 0 0 14px rgba(255,130,60,1), 0 0 38px rgba(255,100,40,1), 0 0 78px rgba(255,120,60,0.8), 0 0 120px rgba(255,150,80,0.5); }
}

/* 2. Adım: "by bredby" — Giveaway'in altında sağa hizalı, harf harf parlayan daktilo */
.splash-sub {
  margin-top: 0.5rem;
  text-align: right; /* "Giveaway" kelimesinin tam altına sağa yaslanır */
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(0.85rem, 2vw, 1.1rem);
  color: rgba(240, 232, 220, 0.92); /* soluk bej */
}
.splash-char {
  display: inline-block;
  opacity: 0;
  animation: splash-char-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes splash-char-in {
  0%   { opacity: 0; text-shadow: 0 0 0 rgba(255,90,31,0); }
  40%  { opacity: 1; color: #ffd9c2; text-shadow: 0 0 14px rgba(255,140,60,1), 0 0 30px rgba(255,90,31,0.9); }
  100% { opacity: 1; color: rgba(240, 232, 220, 0.92); text-shadow: 0 0 10px rgba(255,120,60,0.8), 0 0 24px rgba(255,90,31,0.55); }
}
/* ========== /SPLASH v2 ========== */