/* ===========================
   Fun + Utility Tools Plugin
   Colorful & Playful Theme
   =========================== */

:root {
  --fut-primary: #6C63FF;
  --fut-secondary: #FF6584;
  --fut-accent: #43E97B;
  --fut-orange: #F7971E;
  --fut-teal: #00B4D8;
  --fut-purple: #A855F7;
  --fut-danger: #EF4444;
  --fut-bg: #F0F4FF;
  --fut-card: #FFFFFF;
  --fut-text: #1E1B4B;
  --fut-muted: #6B7280;
  --fut-radius: 16px;
  --fut-shadow: 0 4px 24px rgba(108,99,255,0.12);
  --fut-shadow-hover: 0 8px 32px rgba(108,99,255,0.22);
}

#fut-wrapper {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--fut-bg);
  border-radius: var(--fut-radius);
  padding: 0 0 32px 0;
  max-width: 900px;
  margin: 0 auto;
  color: var(--fut-text);
  box-shadow: var(--fut-shadow);
  overflow: hidden;
}

/* ===== TABS ===== */
#fut-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: linear-gradient(135deg, var(--fut-primary), #A855F7);
  padding: 12px 12px 0;
  border-radius: var(--fut-radius) var(--fut-radius) 0 0;
}

.fut-tab {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: none;
  border-radius: 10px 10px 0 0;
  padding: 9px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s;
  white-space: nowrap;
}

.fut-tab:hover { background: rgba(255,255,255,0.28); transform: translateY(-2px); }
.fut-tab.active {
  background: var(--fut-bg);
  color: var(--fut-primary);
  transform: translateY(0);
}

/* ===== PANELS ===== */
.fut-panel { display: none; padding: 24px 28px; animation: futFadeIn 0.3s ease; }
.fut-panel.active { display: block; }

@keyframes futFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.fut-tool-title {
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 20px;
  background: linear-gradient(135deg, var(--fut-primary), var(--fut-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== CARD ===== */
.fut-card {
  background: var(--fut-card);
  border-radius: var(--fut-radius);
  padding: 24px;
  box-shadow: var(--fut-shadow);
}

/* ===== FORM ELEMENTS ===== */
.fut-label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 8px; color: var(--fut-text); }
.fut-textarea {
  width: 100%; box-sizing: border-box;
  border: 2px solid #E0E7FF; border-radius: 10px;
  padding: 10px 12px; font-size: 14px; resize: vertical;
  font-family: inherit; transition: border-color 0.2s;
  background: #F8F9FF;
}
.fut-textarea:focus { outline: none; border-color: var(--fut-primary); }

.fut-input {
  border: 2px solid #E0E7FF; border-radius: 8px;
  padding: 8px 12px; font-size: 14px; font-family: inherit;
  transition: border-color 0.2s; background: #F8F9FF;
  width: 80px;
}
.fut-input:focus { outline: none; border-color: var(--fut-primary); }
.fut-input-sm { width: 60px; text-align: center; }
.fut-input-full { width: 100%; box-sizing: border-box; font-size: 16px; padding: 12px 16px; }

.fut-check-wrap {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; cursor: pointer; margin: 8px 0;
}

/* ===== BUTTONS ===== */
.fut-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; border-radius: 50px; cursor: pointer;
  font-size: 15px; font-weight: 700; padding: 11px 24px;
  transition: all 0.2s; margin-top: 14px;
}
.fut-btn-lg { padding: 14px 36px; font-size: 17px; }
.fut-btn-primary {
  background: linear-gradient(135deg, var(--fut-primary), #A855F7);
  color: #fff; box-shadow: 0 4px 16px rgba(108,99,255,0.35);
}
.fut-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(108,99,255,0.45); }

.fut-btn-secondary {
  background: linear-gradient(135deg, var(--fut-teal), #43E97B);
  color: #fff; box-shadow: 0 4px 16px rgba(0,180,216,0.3);
}
.fut-btn-secondary:hover { transform: translateY(-2px); }

.fut-btn-danger {
  background: linear-gradient(135deg, var(--fut-danger), var(--fut-secondary));
  color: #fff;
}
.fut-btn-truth {
  background: linear-gradient(135deg, #3B82F6, #06B6D4);
  color: #fff; font-size: 16px; padding: 14px 32px;
  border-radius: 50px; border: none; cursor: pointer; font-weight: 700;
  box-shadow: 0 4px 16px rgba(59,130,246,0.35);
  transition: all 0.2s;
}
.fut-btn-dare {
  background: linear-gradient(135deg, #EF4444, #F97316);
  color: #fff; font-size: 16px; padding: 14px 32px;
  border-radius: 50px; border: none; cursor: pointer; font-weight: 700;
  box-shadow: 0 4px 16px rgba(239,68,68,0.35);
  transition: all 0.2s; margin-top: 14px;
}
.fut-btn-truth:hover, .fut-btn-dare:hover { transform: translateY(-2px) scale(1.04); }

/* ===== RESULT BOX ===== */
.fut-result-box {
  margin-top: 18px; border-radius: 14px; padding: 18px 22px;
  background: linear-gradient(135deg, #EEF2FF, #F0FDF4);
  border: 2px solid #C7D2FE;
  font-size: 16px; font-weight: 700; color: var(--fut-text);
  animation: futPop 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes futPop { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ===== ROW ===== */
.fut-row { display: flex; align-items: center; gap: 12px; margin: 12px 0; flex-wrap: wrap; }
.fut-center { justify-content: center; }
.fut-desc { color: var(--fut-muted); font-size: 14px; margin-bottom: 16px; }

/* ===== WHEEL ===== */
.fut-wheel-layout { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.fut-wheel-left { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fut-wheel-right { flex: 1; min-width: 200px; }

#fut-wheel-container {
  position: relative; width: 360px; height: 360px;
}
#fut-canvas { border-radius: 50%; box-shadow: 0 8px 32px rgba(108,99,255,0.25); }
#fut-wheel-pointer {
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  font-size: 36px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
  z-index: 2;
}

/* ===== SUB TABS ===== */
.fut-sub-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.fut-sub-tab {
  background: #E0E7FF; color: var(--fut-primary);
  border: none; border-radius: 50px; padding: 8px 18px;
  cursor: pointer; font-size: 13px; font-weight: 700; transition: all 0.2s;
}
.fut-sub-tab.active { background: var(--fut-primary); color: #fff; }
.fut-sub-panel { display: none; }
.fut-sub-panel.active { display: block; animation: futFadeIn 0.3s ease; }

/* ===== TIMER ===== */
#fut-timer-display {
  font-size: 72px; font-weight: 900; text-align: center;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--fut-primary), var(--fut-secondary));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin: 20px 0; line-height: 1;
}

/* ===== CRICKET TOSS ===== */
.fut-toss-card { text-align: center; }
.fut-toss-card .fut-row { justify-content: center; gap: 20px; }
.fut-field { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fut-vs {
  font-size: 24px; font-weight: 900; color: var(--fut-secondary);
  align-self: flex-end; margin-bottom: 8px;
}
.fut-coin {
  font-size: 80px; margin: 20px auto;
  display: block; text-align: center; transition: transform 0.1s;
}
.fut-coin.spinning { animation: futCoinFlip 1.5s ease-in-out; }
@keyframes futCoinFlip {
  0% { transform: rotateY(0); }
  50% { transform: rotateY(720deg) scale(1.3); }
  100% { transform: rotateY(1440deg); }
}

/* ===== IPL ===== */
.fut-ipl-teams {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0;
}
.fut-ipl-badge {
  padding: 6px 14px; border-radius: 50px; font-size: 12px;
  font-weight: 700; color: #fff; white-space: nowrap;
}

/* ===== TRUTH/DARE ===== */
.fut-td-card { text-align: center; }
.fut-td-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ===== YES/NO ===== */
.fut-yesno-card { text-align: center; }
.fut-yesno-display {
  font-size: 96px; margin: 20px auto; display: block;
  animation: futPulse 2s infinite;
}
@keyframes futPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.fut-yesno-history {
  margin-top: 16px; max-height: 180px; overflow-y: auto;
}
.fut-history-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border-radius: 8px; margin-bottom: 6px;
  background: #F8F9FF; font-size: 13px; border: 1px solid #E0E7FF;
}
.fut-history-badge {
  padding: 3px 10px; border-radius: 50px; font-size: 12px;
  font-weight: 700; color: #fff;
}
.badge-yes { background: #22C55E; }
.badge-no  { background: #EF4444; }
.badge-maybe { background: #F59E0B; }

/* ===== GIVEAWAY ===== */
.winner-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: linear-gradient(135deg, #FFF7ED, #FEFCE8);
  border-radius: 10px; margin-bottom: 8px; border: 1px solid #FED7AA;
  animation: futPop 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.winner-trophy { font-size: 22px; }
.winner-name { font-size: 17px; font-weight: 800; color: #92400E; }

/* ===== TEAMS ===== */
.team-block {
  background: linear-gradient(135deg, #EEF2FF, #E0F2FE);
  border-radius: 12px; padding: 12px 16px; margin-bottom: 12px;
  border: 1px solid #C7D2FE;
}
.team-block h4 { margin: 0 0 8px; font-size: 16px; color: var(--fut-primary); }
.team-member {
  display: inline-block; background: var(--fut-primary); color: #fff;
  border-radius: 50px; padding: 3px 12px; font-size: 13px;
  font-weight: 600; margin: 3px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
  .fut-tab { font-size: 11px; padding: 7px 10px; }
  .fut-panel { padding: 16px; }
  #fut-wheel-container { width: 280px; height: 280px; }
  #fut-canvas { width: 280px; height: 280px; }
  #fut-timer-display { font-size: 52px; }
  .fut-wheel-layout { flex-direction: column; align-items: center; }
}