/* Villa League Frontend Styles v2 */
:root {
  --vl-cream:   #FAF6EF;
  --vl-sand:    #EDE0C8;
  --vl-gold:    #C9A84C;
  --vl-teal:    #2A7A6F;
  --vl-teal-lt: #3D9E91;
  --vl-teal-bg: #EAF4F2;
  --vl-terra:   #C4673A;
  --vl-dark:    #1C1610;
}

/* ===== MINI NAV ===== */
.vl-mini-nav {
  display: flex;
  gap: 8px;
  background: #1C1610;
  border-radius: 16px;
  padding: 10px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.vl-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  border-radius: 10px;
  text-decoration: none;
  color: rgba(255,255,255,0.45);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: all 0.2s;
  position: relative;
  min-width: 60px;
}
.vl-nav-item:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); }
.vl-nav-item.active { background: #2A7A6F; color: #fff; }
.vl-nav-item.vl-nav-alert { color: #C4673A; animation: vlNavPulse 2s ease-in-out infinite; }
.vl-nav-item.vl-nav-alert.active { background: #C4673A; color: #fff; animation: none; }
@keyframes vlNavPulse { 0%,100% { opacity:1; } 50% { opacity:0.6; } }
.vl-nav-icon { font-size: 20px; line-height: 1; }
.vl-nav-label { line-height: 1; }
.vl-nav-badge::after {
  content: attr(data-badge);
  position: absolute;
  top: 6px; right: 6px;
  background: #C4673A;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 480px) {
  .vl-mini-nav { gap: 4px; padding: 8px; }
  .vl-nav-item { padding: 10px 4px; font-size: 10px; }
  .vl-nav-icon { font-size: 18px; }
}
  --vl-mid:     #6B5B45;
  --vl-light:   #B8A898;
  --vl-r:       12px;
  --vl-r-lg:    20px;
  --vl-shadow:  0 4px 20px rgba(0,0,0,0.08);
  --vl-shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
}
.vl-wrap { font-family:'Josefin Sans',Arial,sans-serif; color:var(--vl-dark); max-width:900px; margin:0 auto; }

/* BUTTONS */
.vl-btn { display:inline-block; font-family:inherit; font-size:14px; font-weight:500; letter-spacing:0.08em; padding:14px 28px; border-radius:100px; border:none; cursor:pointer; transition:all .2s; text-decoration:none; text-align:center; }
.vl-btn-primary   { background:var(--vl-teal); color:#fff; }
.vl-btn-primary:hover { background:var(--vl-teal-lt); transform:translateY(-1px); }
.vl-btn-secondary { background:var(--vl-gold); color:var(--vl-dark); }
.vl-btn-secondary:hover { opacity:.9; transform:translateY(-1px); }
.vl-btn-outline   { background:transparent; color:var(--vl-teal); border:1.5px solid var(--vl-teal); }
.vl-btn-outline:hover { background:var(--vl-teal-bg); }
.vl-btn-full  { width:100%; box-sizing:border-box; }
.vl-btn-large { padding:18px 40px; font-size:16px; }
.vl-btn:disabled { opacity:.4; cursor:not-allowed; transform:none !important; }

/* STATUS BANNER */
.vl-status-banner { padding:14px 20px; border-radius:var(--vl-r); font-size:15px; font-weight:500; margin-bottom:24px; text-align:center; }
.vl-status-preseason   { background:var(--vl-sand); color:var(--vl-dark); }
.vl-status-draft_open  { background:var(--vl-teal-bg); color:var(--vl-teal); border:1px solid var(--vl-teal); }
.vl-status-season_live { background:#FFF3E8; color:var(--vl-terra); border:1px solid var(--vl-terra); }
.vl-status-season_over { background:var(--vl-cream); color:var(--vl-dark); border:1px solid var(--vl-sand); }

/* FORMS */
.vl-form-box, .vl-success-box, .vl-waitlist-box { background:#fff; border-radius:var(--vl-r-lg); padding:40px; box-shadow:var(--vl-shadow); max-width:480px; margin:0 auto; }
.vl-success-box, .vl-waitlist-box { text-align:center; }
.vl-form-title { font-family:'Tenor Sans',Georgia,serif; font-size:26px; color:var(--vl-dark); margin:0 0 8px; }
.vl-form-desc  { font-size:14px; color:var(--vl-mid); margin-bottom:24px; line-height:1.6; }
.vl-field { margin-bottom:16px; }
.vl-field label { display:block; font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--vl-mid); margin-bottom:6px; }
.vl-field input { width:100%; box-sizing:border-box; padding:14px 16px; border:1.5px solid var(--vl-sand); border-radius:var(--vl-r); font-family:inherit; font-size:15px; color:var(--vl-dark); background:var(--vl-cream); outline:none; transition:border-color .2s; }
.vl-field input:focus { border-color:var(--vl-teal); background:#fff; }
.vl-error { background:#FFF0ED; border:1px solid var(--vl-terra); color:var(--vl-terra); padding:10px 14px; border-radius:var(--vl-r); font-size:13px; margin-bottom:12px; }
.vl-form-note { font-size:12px; color:var(--vl-light); margin-top:12px; text-align:center; }
.vl-form-note a { color:var(--vl-teal); }
.vl-success-icon { font-size:48px; margin-bottom:16px; }
.vl-success-box h3, .vl-waitlist-box h3 { font-family:'Tenor Sans',serif; font-size:24px; color:var(--vl-dark); margin:0 0 12px; }
.vl-success-box p, .vl-waitlist-box p { font-size:15px; color:var(--vl-mid); line-height:1.7; }
.vl-already-in { background:var(--vl-teal-bg); border-radius:var(--vl-r); padding:16px 20px; font-size:14px; color:var(--vl-teal); }
.vl-already-in a { color:var(--vl-teal); font-weight:600; }

/* LOCKED / EMPTY */
.vl-locked-msg { background:var(--vl-cream); border:1px solid var(--vl-sand); border-radius:var(--vl-r); padding:24px; text-align:center; color:var(--vl-mid); font-size:15px; }
.vl-cta-box { background:var(--vl-teal-bg); border-radius:var(--vl-r); padding:24px; text-align:center; margin:24px 0; }
.vl-cta-box p { color:var(--vl-teal); font-size:15px; margin-bottom:16px; }
.vl-alert-box { background:#FFF3E8; border:1px solid var(--vl-terra); border-radius:var(--vl-r); padding:14px 20px; font-size:14px; color:var(--vl-terra); margin-bottom:20px; }
.vl-alert-box a { color:var(--vl-terra); font-weight:600; }

/* SECTION */
.vl-section { margin-bottom:32px; }
.vl-section-label { font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--vl-gold); margin-bottom:16px; }

/* ISLANDERS GRID — draft board */
.vl-islanders-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:16px; margin-bottom:24px; }
.vl-isl-card { background:#fff; border:2px solid transparent; border-radius:var(--vl-r-lg); padding:20px 16px; text-align:center; cursor:pointer; box-shadow:var(--vl-shadow); transition:all .2s; position:relative; }
.vl-isl-card:hover:not(.is-dumped) { transform:translateY(-3px); box-shadow:var(--vl-shadow-lg); border-color:var(--vl-teal); }
.vl-isl-card.selected { border-color:var(--vl-teal); background:var(--vl-teal-bg); }
.vl-isl-card.is-dumped { opacity:.4; cursor:not-allowed; filter:grayscale(.5); }
.vl-isl-photo { width:64px; height:64px; border-radius:50%; overflow:hidden; margin:0 auto 12px; background:var(--vl-sand); }
.vl-isl-photo img { width:100%; height:100%; object-fit:cover; }
.vl-initials { width:100%; height:100%; background:var(--vl-teal); color:#fff; font-size:24px; font-weight:600; display:flex; align-items:center; justify-content:center; }
.vl-isl-name { font-weight:600; font-size:14px; margin-bottom:4px; }
.vl-isl-meta { font-size:11px; color:var(--vl-light); margin-bottom:8px; }
.vl-isl-status { font-size:10px; font-weight:600; letter-spacing:.08em; padding:3px 10px; border-radius:100px; display:inline-block; }
.vl-s-active    { background:var(--vl-teal-bg); color:var(--vl-teal); }
.vl-s-coupled   { background:#F0FFF8; color:#1A7A4A; }
.vl-s-single    { background:#FFF0F0; color:var(--vl-terra); }
.vl-s-dumped    { background:#F5F5F5; color:#999; }
.vl-s-bombshell { background:#FFF8E8; color:var(--vl-gold); border:1px solid var(--vl-gold); }
.vl-check-mark { position:absolute; top:10px; right:12px; font-size:16px; color:var(--vl-teal); opacity:0; transition:opacity .2s; }
.vl-isl-card.selected .vl-check-mark { opacity:1; }

/* PICK TRACKER */
.vl-pick-tracker { display:flex; gap:12px; justify-content:center; margin-bottom:28px; flex-wrap:wrap; }
.vl-pick-slot { background:#fff; border:2px dashed var(--vl-sand); border-radius:var(--vl-r); min-width:120px; height:56px; display:flex; align-items:center; justify-content:center; transition:all .2s; padding:0 12px; }
.vl-pick-slot.filled { border-color:var(--vl-teal); background:var(--vl-teal-bg); }
.slot-label { font-size:12px; color:var(--vl-light); letter-spacing:.1em; text-transform:uppercase; }
.slot-name  { font-size:13px; font-weight:600; color:var(--vl-teal); }

/* DRAFT FOOTER */
.vl-draft-header { text-align:center; margin-bottom:24px; }
.vl-draft-header h2 { font-family:'Tenor Sans',serif; font-size:28px; color:var(--vl-dark); margin-bottom:8px; }
.vl-draft-footer { text-align:center; padding:24px 0; }

/* MY TEAM */
.vl-team-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; flex-wrap:wrap; gap:16px; }
.vl-team-header h2 { font-family:'Tenor Sans',serif; font-size:28px; color:var(--vl-dark); margin:0 0 4px; }
.vl-team-header p  { color:var(--vl-mid); font-size:14px; margin:0; }
.vl-team-stats { display:flex; gap:12px; }
.vl-stat-pill  { background:var(--vl-dark); border-radius:var(--vl-r); padding:12px 20px; text-align:center; }
.stat-num   { display:block; font-family:'Tenor Sans',serif; font-size:24px; color:var(--vl-gold); line-height:1; }
.stat-label { display:block; font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-top:4px; }
.vl-picks-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; }
.vl-pick-card { background:#fff; border-radius:var(--vl-r-lg); padding:20px; box-shadow:var(--vl-shadow); display:flex; gap:14px; align-items:flex-start; position:relative; }
.vl-pick-card.is-dumped { opacity:.5; filter:grayscale(.4); }
.vl-pick-photo { width:56px; height:56px; border-radius:50%; overflow:hidden; flex-shrink:0; background:var(--vl-sand); position:relative; }
.vl-pick-photo img { width:100%; height:100%; object-fit:cover; }
.vl-pick-name { font-weight:600; font-size:15px; margin-bottom:3px; }
.vl-pick-meta { font-size:11px; color:var(--vl-light); margin-bottom:5px; }
.vl-pick-status { font-size:12px; color:var(--vl-teal); font-weight:500; }
.vl-pick-coupled { font-size:11px; color:var(--vl-mid); margin-top:2px; }
.vl-waiver-tag { position:absolute; bottom:-4px; right:-4px; background:var(--vl-gold); color:var(--vl-dark); font-size:9px; font-weight:700; padding:2px 6px; border-radius:100px; }

/* POINTS LOG */
.vl-points-log { background:#fff; border-radius:var(--vl-r); box-shadow:var(--vl-shadow); overflow:hidden; }
.vl-log-row { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--vl-sand); font-size:13px; }
.vl-log-row:last-child { border-bottom:none; }
.log-reason { color:var(--vl-mid); }
.log-pts { font-weight:700; font-size:14px; }
.log-pts.pos { color:var(--vl-teal); }
.log-pts.neg { color:var(--vl-terra); }
.vl-footer-links { text-align:center; margin-top:24px; }

/* LEADERBOARD */
.vl-lb-header { text-align:center; margin-bottom:28px; }
.vl-lb-header h2 { font-family:'Tenor Sans',serif; font-size:28px; color:var(--vl-dark); margin-bottom:8px; }
.vl-lb-table { background:#fff; border-radius:var(--vl-r-lg); overflow:hidden; box-shadow:var(--vl-shadow); }
.vl-lb-row { display:grid; grid-template-columns:48px 1fr 1.5fr 70px 60px; gap:8px; align-items:center; padding:14px 20px; border-bottom:1px solid var(--vl-sand); }
.vl-lb-row:last-child { border-bottom:none; }
.vl-lb-head { background:var(--vl-dark); color:rgba(255,255,255,.5); font-size:10px; letter-spacing:.15em; text-transform:uppercase; }
.vl-lb-row:hover:not(.vl-lb-head) { background:var(--vl-cream); }
.col-rank  { font-family:'Tenor Sans',serif; font-size:20px; color:var(--vl-gold); text-align:center; }
.vl-lb-head .col-rank { font-family:inherit; font-size:10px; color:rgba(255,255,255,.5); }
.col-player { font-weight:600; font-size:14px; }
.col-picks  { font-size:12px; color:var(--vl-mid); }
.col-pts    { text-align:center; font-size:16px; color:var(--vl-teal); }
.you-badge  { background:var(--vl-gold); color:var(--vl-dark); font-size:9px; font-weight:700; padding:2px 7px; border-radius:100px; margin-left:6px; }
.is-elim    { opacity:.4; }
.is-you .col-player { color:var(--vl-teal); }
.elim-badge { font-size:11px; color:var(--vl-terra); }

/* PREDICTIONS */
.vl-pred-header { text-align:center; margin-bottom:28px; }
.vl-pred-header h2 { font-family:'Tenor Sans',serif; font-size:28px; margin-bottom:8px; }
.vl-questions { display:flex; flex-direction:column; gap:20px; }
.vl-q-card { background:#fff; border-radius:var(--vl-r-lg); padding:28px; box-shadow:var(--vl-shadow); }
.vl-q-card.is-locked { opacity:.7; }
.vl-q-meta { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.ep-badge   { background:var(--vl-dark); color:#fff; font-size:10px; font-weight:600; letter-spacing:.1em; padding:4px 10px; border-radius:100px; }
.pts-badge  { background:var(--vl-teal-bg); color:var(--vl-teal); font-size:10px; font-weight:600; padding:4px 10px; border-radius:100px; }
.lock-time  { font-size:11px; color:var(--vl-mid); }
.locked-badge { font-size:11px; color:var(--vl-terra); }
.vl-q-text  { font-family:'Tenor Sans',serif; font-size:20px; margin:0 0 16px; }
.vl-options { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.vl-opt     { display:flex; align-items:center; gap:12px; padding:12px 16px; border:1.5px solid var(--vl-sand); border-radius:var(--vl-r); cursor:pointer; transition:all .15s; }
.vl-opt:hover { border-color:var(--vl-teal); background:var(--vl-teal-bg); }
.vl-opt.selected { border-color:var(--vl-teal); background:var(--vl-teal-bg); }
.vl-opt input { accent-color:var(--vl-teal); }
.vl-opt span  { font-size:14px; }
.vl-result   { padding:12px 16px; border-radius:var(--vl-r); font-size:14px; font-weight:500; }
.vl-result.correct   { background:#E8FFF0; color:#1A7A4A; }
.vl-result.incorrect { background:#FFF0EE; color:var(--vl-terra); }
.vl-submitted { padding:12px 16px; background:var(--vl-cream); border-radius:var(--vl-r); font-size:13px; color:var(--vl-mid); }
.vl-pred-msg  { margin-top:10px; font-size:13px; font-weight:500; }

/* WAIVER */
.vl-waiver-header { text-align:center; margin-bottom:28px; }
.vl-waiver-footer { text-align:center; margin-top:24px; }
.vl-waiver-summary { font-size:14px; color:var(--vl-mid); margin-bottom:16px; }
.vl-waiver-from.selected { border-color:var(--vl-terra) !important; background:#FFF0EE !important; }
.vl-waiver-to.selected   { border-color:var(--vl-teal) !important; background:var(--vl-teal-bg) !important; }

/* RESPONSIVE */
@media (max-width:600px) {
  .vl-form-box, .vl-success-box { padding:28px 20px; }
  .vl-islanders-grid { grid-template-columns:repeat(2,1fr); }
  .vl-lb-row { grid-template-columns:40px 1fr 60px; }
  .col-picks, .col-alive { display:none; }
  .vl-team-header { flex-direction:column; align-items:flex-start; }
  .vl-picks-grid { grid-template-columns:1fr; }
}