/* ============================================================
   ABRAJ RUNNERS - theme-cartoon.css
   Adult Cartoon Theme  →  .theme-cartoon
   Inspired by The Simpsons / Family Guy — sports bar energy,
   bold outlines, punchy colours, zero kindergarten vibes.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;600;700;800;900&display=swap');

/* ── Palette tokens ──────────────────────────────────────── */
/* Yellow   : #FFD90F  (Simpsons yellow)
   Orange   : #FF6B35  (amber punch)
   Red      : #E63946  (danger / accent)
   Teal     : #2EC4B6  (cool accent)
   BG dark  : #1a1711
   Card bg  : #2a2520
   Text     : #FFF8E7
   Outline  : #1a1008  (thick cartoon border)              */

/* ── Root ─────────────────────────────────────────────────── */
.theme-cartoon {
  font-family: 'Nunito', sans-serif;
  background-color: #1a1711;
  background-image:
    radial-gradient(ellipse 60% 40% at 80% 10%, rgba(255,217,15,.06) 0%, transparent 65%),
    radial-gradient(ellipse 50% 35% at 15% 85%, rgba(255,107,53,.07) 0%, transparent 65%);
  background-attachment: fixed;
  color: #FFF8E7;
  min-height: 100vh;
}

/* ── Header ───────────────────────────────────────────────── */
.theme-cartoon .site-header,
.theme-cartoon .header {
  background: #221e14;
  border-bottom: 4px solid #FFD90F;
  box-shadow: 0 4px 0 #1a1008, 0 6px 20px rgba(0,0,0,.5);
  position: relative;
}

.theme-cartoon .site-header .logo,
.theme-cartoon .header .logo {
  font-family: 'Fredoka One', cursive;
  font-size: 1.9rem;
  color: #FFD90F;
  letter-spacing: .04em;
  text-shadow:
    3px 3px 0 #1a1008,
    -1px -1px 0 #1a1008,
     1px -1px 0 #1a1008,
    -1px  1px 0 #1a1008;
}

/* ── Nav ──────────────────────────────────────────────────── */
.theme-cartoon .nav a,
.theme-cartoon .nav-link {
  background: #2a2520;
  color: #FFF8E7;
  border: 2px solid #3d3830;
  border-radius: 8px;
  font-weight: 700;
  transition: background .15s, border-color .15s, transform .15s;
}

.theme-cartoon .nav a:hover,
.theme-cartoon .nav-link:hover {
  background: #FFD90F;
  color: #1a1008;
  border-color: #1a1008;
  transform: translateY(-2px);
}

/* ── Stats Bar / Stat Cards ───────────────────────────────── */
.theme-cartoon .stats-bar,
.theme-cartoon .stat-card {
  background: #2a2520;
  border: 3px solid #1a1008;
  box-shadow: 4px 4px 0 #1a1008;
  border-radius: 12px;
}

.theme-cartoon .stat-value {
  font-family: 'Fredoka One', cursive;
  font-size: 2.6rem;
  color: #FFD90F;
  line-height: 1;
  text-shadow:
    2px 2px 0 #1a1008,
    -1px -1px 0 #1a1008;
}

.theme-cartoon .stat-label {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  color: #b0a898;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* ── Runner Cards ─────────────────────────────────────────── */
.theme-cartoon .runner-card {
  background: #2a2520;
  border: 3px solid #1a1008;
  border-radius: 14px;
  box-shadow: 5px 5px 0 #1a1008;
  transition: transform .15s, box-shadow .15s;
  position: relative;
}

.theme-cartoon .runner-card:hover {
  transform: translate(-3px, -4px);
  box-shadow: 8px 9px 0 #1a1008;
}

/* Top runner gets the yellow treatment */
.theme-cartoon .runner-card:nth-child(1) {
  border-color: #FFD90F;
  box-shadow: 5px 5px 0 #b89900;
}

.theme-cartoon .runner-card:nth-child(1):hover {
  box-shadow: 8px 9px 0 #b89900;
}

.theme-cartoon .runner-card .name {
  font-family: 'Fredoka One', cursive;
  font-size: 1.1rem;
  color: #FFF8E7;
  letter-spacing: .02em;
}

.theme-cartoon .runner-card .km-total {
  font-weight: 800;
  color: #2EC4B6;
  font-size: .9rem;
}

/* ── Avatar ───────────────────────────────────────────────── */
.theme-cartoon .avatar {
  border: 4px solid #1a1008;
  box-shadow: 3px 3px 0 #1a1008;
  border-radius: 50%;
  background: #3d3830;
}

/* ── Streak ───────────────────────────────────────────────── */
.theme-cartoon .streak {
  background: #FF6B35;
  border: 2px solid #1a1008;
  border-radius: 6px;
  padding: 3px 10px;
  font-weight: 900;
  color: #FFF8E7;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  box-shadow: 2px 2px 0 #1a1008;
}

.theme-cartoon .streak-fire {
  animation: fireFlicker 0.7s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 5px rgba(255,107,53,.8));
}

@keyframes fireFlicker {
  from { transform: scale(1) rotate(-6deg); filter: drop-shadow(0 0 4px rgba(255,107,53,.7)); }
  to   { transform: scale(1.3) rotate(6deg); filter: drop-shadow(0 0 10px rgba(230,57,70,.9)); }
}

/* ── Medals ───────────────────────────────────────────────── */
.theme-cartoon .medal {
  border-radius: 50%;
  border: 3px solid #1a1008;
  box-shadow: 2px 2px 0 #1a1008;
  font-size: 1.2rem;
}

.theme-cartoon .medal-gold {
  background: linear-gradient(135deg, #FFE066, #FFD90F, #d4a800);
  box-shadow: 2px 2px 0 #1a1008, 0 0 14px rgba(255,217,15,.5);
  animation: medalPulse 2s ease-in-out infinite;
}

.theme-cartoon .medal-silver {
  background: linear-gradient(135deg, #e8e8e8, #b0b0b0, #888);
  box-shadow: 2px 2px 0 #1a1008;
}

.theme-cartoon .medal-bronze {
  background: linear-gradient(135deg, #e8a45a, #cd7f32, #a05c10);
  box-shadow: 2px 2px 0 #1a1008;
}

.theme-cartoon .medal-diamond {
  background: linear-gradient(135deg, #a8f0ff, #2EC4B6, #1a9990);
  box-shadow: 2px 2px 0 #1a1008, 0 0 16px rgba(46,196,182,.6);
  animation: medalPulse 1.6s ease-in-out infinite;
}

@keyframes medalPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.1); }
}

/* ── Bench Zone / Sin Bin ─────────────────────────────────── */
.theme-cartoon .bench-zone {
  background: #1f1814;
  border: 4px solid #E63946;
  border-radius: 14px;
  box-shadow: 6px 6px 0 #8a0010;
  position: relative;
  overflow: visible;
}

.theme-cartoon .bench-zone:not(.bench-zone--empty)::after {
  content: 'SIN BIN';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: #E63946;
  color: #FFF8E7;
  padding: 4px 18px;
  border-radius: 6px;
  border: 3px solid #1a1008;
  font-size: .72rem;
  font-family: 'Fredoka One', cursive;
  letter-spacing: .1em;
  white-space: nowrap;
  box-shadow: 2px 2px 0 #1a1008;
}

.theme-cartoon .bench-zone--empty::after {
  content: 'ALL CLEAR';
  background: #2EC4B6;
  color: #1a1711;
}

.theme-cartoon .bench-zone h2 {
  color: #E63946;
  font-family: 'Fredoka One', cursive;
  text-shadow: 2px 2px 0 #1a1008;
}

.theme-cartoon .bench-zone .runner-card {
  border-color: #4a3530;
  opacity: .85;
  filter: saturate(.7);
}

/* ── Leaderboard ──────────────────────────────────────────── */
.theme-cartoon .leaderboard {
  background: #2a2520;
  border: 3px solid #1a1008;
  border-radius: 12px;
  box-shadow: 5px 5px 0 #1a1008;
  overflow: hidden;
}

.theme-cartoon .leaderboard thead th {
  background: #FFD90F;
  color: #1a1008;
  font-family: 'Fredoka One', cursive;
  letter-spacing: .06em;
  font-size: 1rem;
  border-bottom: 3px solid #1a1008;
}

.theme-cartoon .leaderboard tbody tr:nth-child(odd)  { background: #2a2520; }
.theme-cartoon .leaderboard tbody tr:nth-child(even) { background: #241f1a; }

.theme-cartoon .leaderboard tbody tr:nth-child(1) td { background: rgba(255,217,15,.12); }
.theme-cartoon .leaderboard tbody tr:nth-child(2) td { background: rgba(180,180,180,.08); }
.theme-cartoon .leaderboard tbody tr:nth-child(3) td { background: rgba(205,127,50,.08); }

.theme-cartoon .leaderboard tbody tr:hover td { background: rgba(255,107,53,.14); }

.theme-cartoon .leaderboard tbody td {
  color: #FFF8E7;
  font-weight: 600;
  border-bottom: 1px solid #3d3830;
}

.theme-cartoon .leaderboard .rank-badge {
  background: #FF6B35;
  color: #FFF8E7;
  font-family: 'Fredoka One', cursive;
  border: 2px solid #1a1008;
  box-shadow: 2px 2px 0 #1a1008;
  border-radius: 6px;
}

/* ── Today Status ─────────────────────────────────────────── */
.theme-cartoon .today-status {
  background: #2a2520;
  border: 3px solid #FFD90F;
  border-radius: 12px;
  box-shadow: 5px 5px 0 #1a1008;
}

.theme-cartoon .today-status .status-label {
  font-family: 'Fredoka One', cursive;
  color: #FFD90F;
  font-size: 1.3rem;
  text-shadow: 2px 2px 0 #1a1008;
  letter-spacing: .05em;
}

.theme-cartoon .today-status .status-value {
  font-family: 'Fredoka One', cursive;
  font-size: 2rem;
  color: #2EC4B6;
  text-shadow: 2px 2px 0 #1a1008;
}

/* ── Coming Soon Section ──────────────────────────────────── */
.theme-cartoon .coming-soon {
  background: #2a2520;
  border: 3px solid #1a1008;
  border-radius: 12px;
  box-shadow: 5px 5px 0 #1a1008;
}

.theme-cartoon .coming-soon h2,
.theme-cartoon .coming-soon h3 {
  font-family: 'Fredoka One', cursive;
  color: #FFD90F;
  text-shadow: 2px 2px 0 #1a1008;
}

.theme-cartoon .coming-soon p {
  color: #b0a898;
}

/* ── Music Section ────────────────────────────────────────── */
.theme-cartoon .music-section {
  background: #2a2520;
  border: 3px solid #2EC4B6;
  border-radius: 12px;
  box-shadow: 5px 5px 0 #1a1008;
}

.theme-cartoon .music-section h2,
.theme-cartoon .music-section h3 {
  font-family: 'Fredoka One', cursive;
  color: #2EC4B6;
  text-shadow: 2px 2px 0 #1a1008;
}

/* ── About Card ───────────────────────────────────────────── */
.theme-cartoon .about-card {
  background: #2a2520;
  border: 3px solid #1a1008;
  border-radius: 12px;
  box-shadow: 5px 5px 0 #1a1008;
  color: #FFF8E7;
}

.theme-cartoon .about-card h2,
.theme-cartoon .about-card h3 {
  font-family: 'Fredoka One', cursive;
  color: #FFD90F;
  text-shadow: 2px 2px 0 #1a1008;
}

/* ── Theme Switcher ───────────────────────────────────────── */
.theme-cartoon .theme-switcher button {
  background: #2a2520;
  color: #FFF8E7;
  border: 2px solid #3d3830;
  border-radius: 8px;
  font-weight: 700;
  box-shadow: 2px 2px 0 #1a1008;
  transition: background .12s, border-color .12s, transform .12s;
}

.theme-cartoon .theme-switcher button:hover {
  background: #3d3830;
  border-color: #FFD90F;
  transform: translateY(-2px);
}

.theme-cartoon .theme-switcher button.active,
.theme-cartoon .theme-switcher button[data-theme="cartoon"] {
  background: #FFD90F;
  color: #1a1008;
  border-color: #1a1008;
  box-shadow: 3px 3px 0 #1a1008;
  font-family: 'Fredoka One', cursive;
}

/* ── Buttons ──────────────────────────────────────────────── */
.theme-cartoon .btn {
  font-family: 'Fredoka One', cursive;
  letter-spacing: .05em;
  font-size: 1rem;
  border-radius: 8px;
  border: 3px solid #1a1008;
  box-shadow: 4px 4px 0 #1a1008;
  transition: transform .12s, box-shadow .12s;
}

.theme-cartoon .btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #1a1008;
}

.theme-cartoon .btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #1a1008;
}

.theme-cartoon .btn-primary {
  background: #FFD90F;
  color: #1a1008;
}

.theme-cartoon .btn-primary:hover {
  background: #ffe535;
}

.theme-cartoon .btn-secondary {
  background: #FF6B35;
  color: #FFF8E7;
}

.theme-cartoon .btn-success {
  background: #2EC4B6;
  color: #1a1008;
}

.theme-cartoon .btn-danger {
  background: #E63946;
  color: #FFF8E7;
}

.theme-cartoon .btn-danger:hover {
  background: #ff4752;
}

/* ── Admin Panel ──────────────────────────────────────────── */
.theme-cartoon .admin-sidebar {
  background: #221e14;
  border-right: 3px solid #3d3830;
}

.theme-cartoon .admin-card {
  background: #2a2520;
  border: 3px solid #1a1008;
  border-radius: 12px;
  box-shadow: 4px 4px 0 #1a1008;
  color: #FFF8E7;
}

.theme-cartoon .admin-card h3 {
  font-family: 'Fredoka One', cursive;
  color: #FFD90F;
  text-shadow: 2px 2px 0 #1a1008;
  border-bottom: 2px solid #3d3830;
  padding-bottom: .4em;
  margin-bottom: .6em;
}

/* ── Forms ────────────────────────────────────────────────── */
.theme-cartoon .form-group label {
  color: #b0a898;
  font-weight: 800;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.theme-cartoon .form-group input,
.theme-cartoon .form-group select,
.theme-cartoon .form-group textarea {
  background: #1a1711;
  border: 2px solid #3d3830;
  border-radius: 8px;
  color: #FFF8E7;
  transition: border-color .15s, box-shadow .15s;
}

.theme-cartoon .form-group input:focus,
.theme-cartoon .form-group select:focus,
.theme-cartoon .form-group textarea:focus {
  background: #1f1c14;
  border-color: #FFD90F;
  box-shadow: 0 0 0 3px rgba(255,217,15,.2);
  outline: none;
}

/* ── Data Table ───────────────────────────────────────────── */
.theme-cartoon .data-table {
  background: #2a2520;
  border: 3px solid #1a1008;
  border-radius: 10px;
  overflow: hidden;
}

.theme-cartoon .data-table thead th {
  background: #3d3830;
  color: #FFD90F;
  font-family: 'Fredoka One', cursive;
  font-size: .9rem;
  letter-spacing: .06em;
  border-bottom: 3px solid #1a1008;
}

.theme-cartoon .data-table tbody tr:nth-child(odd)  { background: #2a2520; }
.theme-cartoon .data-table tbody tr:nth-child(even) { background: #241f1a; }
.theme-cartoon .data-table tbody tr:hover td        { background: rgba(255,107,53,.12); }

.theme-cartoon .data-table tbody td {
  color: #FFF8E7;
  border-bottom: 1px solid #3d3830;
}

/* ── Modal ────────────────────────────────────────────────── */
.theme-cartoon .modal-content {
  background: #2a2520;
  border: 4px solid #1a1008;
  border-radius: 14px;
  box-shadow: 8px 8px 0 #1a1008;
  color: #FFF8E7;
}

.theme-cartoon .modal-header {
  border-bottom: 3px solid #3d3830;
}

.theme-cartoon .modal-header h2 {
  font-family: 'Fredoka One', cursive;
  color: #FFD90F;
  text-shadow: 2px 2px 0 #1a1008;
}

.theme-cartoon .modal-close {
  background: #3d3830;
  color: #FFF8E7;
  border: 2px solid #1a1008;
  border-radius: 6px;
  box-shadow: 2px 2px 0 #1a1008;
}

.theme-cartoon .modal-close:hover {
  background: #E63946;
  color: #FFF8E7;
}

/* ── Section Headings ─────────────────────────────────────── */
.theme-cartoon h1,
.theme-cartoon h2,
.theme-cartoon h3 {
  font-family: 'Fredoka One', cursive;
  letter-spacing: .03em;
}

.theme-cartoon h1 {
  color: #FFD90F;
  text-shadow: 3px 3px 0 #1a1008;
}

.theme-cartoon h2 {
  color: #FFF8E7;
  text-shadow: 2px 2px 0 #1a1008;
}

.theme-cartoon h3 {
  color: #FF6B35;
  text-shadow: 1px 1px 0 #1a1008;
}

/* ── Attendance Grid ──────────────────────────────────────── */
.theme-cartoon .attendance-item {
  background: #2a2520;
  border: 2px solid #3d3830;
  border-radius: 10px;
  box-shadow: 3px 3px 0 #1a1008;
  transition: border-color .12s, transform .12s;
}

.theme-cartoon .attendance-item:hover {
  border-color: #FFD90F;
  transform: translateY(-2px);
}

.theme-cartoon .attendance-item .att-name {
  color: #FFF8E7;
  font-weight: 700;
}

/* ── Footer ───────────────────────────────────────────────── */
.theme-cartoon .footer {
  background: #111009;
  border-top: 3px solid #3d3830;
  color: #6b6055;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .04em;
}

/* ── Confetti — adult cartoon colour burst ────────────────── */
.theme-cartoon .confetti-piece:nth-child(1)  { background: #FFD90F; left:  5%; animation: confettiDrop 3.0s ease-in .0s infinite; }
.theme-cartoon .confetti-piece:nth-child(2)  { background: #E63946; left: 12%; animation: confettiDrop 2.7s ease-in .3s infinite; border-radius: 50%; }
.theme-cartoon .confetti-piece:nth-child(3)  { background: #2EC4B6; left: 20%; animation: confettiDrop 3.3s ease-in .6s infinite; transform: rotate(45deg); }
.theme-cartoon .confetti-piece:nth-child(4)  { background: #FF6B35; left: 30%; animation: confettiDrop 2.5s ease-in .1s infinite; }
.theme-cartoon .confetti-piece:nth-child(5)  { background: #FFD90F; left: 40%; animation: confettiDrop 2.9s ease-in .8s infinite; border-radius: 50%; }
.theme-cartoon .confetti-piece:nth-child(6)  { background: #E63946; left: 50%; animation: confettiDrop 3.2s ease-in .4s infinite; }
.theme-cartoon .confetti-piece:nth-child(7)  { background: #2EC4B6; left: 62%; animation: confettiDrop 2.8s ease-in .7s infinite; border-radius: 50%; }
.theme-cartoon .confetti-piece:nth-child(8)  { background: #FF6B35; left: 73%; animation: confettiDrop 3.0s ease-in .2s infinite; transform: rotate(45deg); }
.theme-cartoon .confetti-piece:nth-child(9)  { background: #FFD90F; left: 83%; animation: confettiDrop 2.6s ease-in .9s infinite; }
.theme-cartoon .confetti-piece:nth-child(10) { background: #E63946; left: 92%; animation: confettiDrop 3.1s ease-in .5s infinite; }

@keyframes confettiDrop {
  0%   { transform: translateY(-20px) rotate(0deg)   scaleX(1);   opacity: 1; }
  25%  { transform: translateY(25vh)  rotate(90deg)  scaleX(.85); }
  50%  { transform: translateY(50vh)  rotate(180deg) scaleX(1.1); }
  75%  { transform: translateY(75vh)  rotate(270deg) scaleX(.9);  opacity: .8; }
  100% { transform: translateY(110vh) rotate(360deg) scaleX(1);   opacity: 0; }
}