/*
 * Dasha Madness — Girly / logo-pink theme
 * Inspired by the hot-pink logo bubbles + chrome lettering.
 *
 * ═══════════════════════════════════════════════════════════
 * REVERT TO CLASSIC (dark red accents):
 *   In index.html and admin.html, remove or comment out:
 *     <link rel="stylesheet" href="/theme-girly.css" />
 *   Leave styles.css as-is. That restores the previous look.
 * ═══════════════════════════════════════════════════════════
 */

:root {
  /* Soft plum / blush dark base — girly but still easy on the eyes */
  --bg: #1a1018;
  --bg-elevated: #261820;
  --bg-card: #2e1c28;
  --border: rgba(255, 180, 210, 0.14);
  --border-strong: rgba(255, 77, 184, 0.5);

  /* Logo hot pink family */
  --red: #ff4db8;
  --red-bright: #ff6ec7;
  --gold: #ff4db8;
  --gold-bright: #ff7ad4;

  /* High-contrast text on dark pink base */
  --text: #fff7fb;
  --text-muted: #d4b0c4;

  /* Soft lilac / orchid accents */
  --purple: #c084fc;
  --purple-dim: #7c3aed;
  --magenta: #f472b6;

  --danger: #fb7185;
  --success: #6ee7b7;
  --shadow: 0 20px 50px rgba(40, 10, 30, 0.5);
}

/* Blush ambient glow */
.bg-glow {
  background:
    radial-gradient(ellipse 80% 50% at 15% -5%, rgba(255, 77, 184, 0.28), transparent 55%),
    radial-gradient(ellipse 55% 40% at 90% 5%, rgba(192, 132, 252, 0.22), transparent 50%),
    radial-gradient(ellipse 50% 45% at 50% 100%, rgba(255, 110, 199, 0.14), transparent 55%);
}

/* Tabs */
.tab-btn.active {
  color: #3b1028;
  background: linear-gradient(135deg, #ff8fd0, #ff4db8);
}

/* Soft pink primary buttons */
.btn-primary {
  background: linear-gradient(135deg, #ff6ec7, #e879f9 45%, #ff4db8);
  color: #fff;
}

.btn-primary:hover {
  filter: brightness(1.06);
}

.btn-secondary {
  background: rgba(255, 77, 184, 0.14);
  border-color: rgba(255, 77, 184, 0.4);
  color: var(--text);
}

/* Round pill & status chips */
.round-pill {
  border-color: rgba(255, 77, 184, 0.45);
  background: linear-gradient(135deg, rgba(255, 77, 184, 0.28), rgba(192, 132, 252, 0.18));
  color: var(--gold-bright);
}

.user-chip {
  border-color: rgba(255, 77, 184, 0.4);
  background: rgba(255, 77, 184, 0.14);
  color: var(--gold-bright);
}

/* Timer */
.timer-inline {
  background: linear-gradient(135deg, rgba(255, 77, 184, 0.16), rgba(192, 132, 252, 0.1));
  border-color: rgba(255, 77, 184, 0.4);
}

.timer-num {
  color: var(--gold-bright);
}

/* Cards & matchups */
.matchup-card:hover,
.pick-game:hover {
  border-color: rgba(255, 122, 212, 0.35);
}

.photo-option:not(:disabled):hover {
  box-shadow: 0 8px 24px rgba(255, 77, 184, 0.28);
}

.vote-bar > span {
  background: linear-gradient(90deg, #c084fc, #ff4db8);
}

/* Winner banner */
.winner-card {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 77, 184, 0.28), transparent 55%),
    linear-gradient(180deg, rgba(192, 132, 252, 0.14), transparent 50%),
    var(--bg-card);
  border-color: rgba(255, 77, 184, 0.5);
  box-shadow:
    var(--shadow),
    0 0 80px rgba(255, 77, 184, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.winner-label {
  color: var(--gold-bright);
  text-shadow: 0 0 28px rgba(255, 77, 184, 0.5);
}

.winner-photo-wrap {
  border-color: #ff6ec7;
  box-shadow:
    0 16px 48px rgba(40, 10, 30, 0.55),
    0 0 0 6px rgba(255, 77, 184, 0.18);
}

/* Bracket connectors / accents */
.bm-board {
  --bm-line: rgba(255, 77, 184, 0.32);
  --bm-line-strong: rgba(255, 110, 199, 0.55);
}

.bm-game.current {
  border-color: rgba(255, 122, 212, 0.45);
  box-shadow: 0 0 0 1px rgba(255, 77, 184, 0.3), 0 6px 20px rgba(192, 132, 252, 0.22);
}

.bm-slot.winner {
  background: linear-gradient(90deg, rgba(255, 77, 184, 0.18), transparent 85%);
}

.bm-trophy {
  background: linear-gradient(180deg, rgba(255, 77, 184, 0.14), rgba(30, 16, 28, 0.92));
}

.bm-trophy.crowned {
  border-color: rgba(255, 77, 184, 0.55);
  box-shadow: 0 0 40px rgba(255, 77, 184, 0.22);
}

/* Upload zone */
.upload-zone {
  border-color: rgba(255, 77, 184, 0.4);
  background: rgba(255, 77, 184, 0.06);
}

.upload-zone.dragover {
  border-color: var(--gold-bright);
  background: rgba(192, 132, 252, 0.14);
}

/* Leaderboard highlight */
.leaderboard-table tr.me {
  background: rgba(255, 77, 184, 0.1);
}

.user-link {
  color: var(--gold-bright);
}

/* Toast / modal */
.toast {
  border-color: rgba(255, 77, 184, 0.45);
  background: #2a1824;
}

.modal-panel {
  border-color: rgba(255, 77, 184, 0.45);
  box-shadow: var(--shadow), 0 0 60px rgba(255, 77, 184, 0.15);
}

.modal-head {
  background: rgba(38, 24, 32, 0.96);
}

/* Brand logo drop shadow in pink */
.brand-wordmark {
  filter: drop-shadow(0 2px 14px rgba(255, 77, 184, 0.35));
}