/* ===== Base ===== */
:root{ --stroke: rgba(255,255,255,.12); --shadow: 0 18px 36px rgba(0,0,0,.7); --fallback-glow: 29,78,216; }
*{ box-sizing:border-box; }
html, body { height:100%; }
body{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin:0; padding:16px; background:#000; color:#e5e7eb; }
header{ max-width:960px; margin:0 auto 14px; }
.player-info{ display:grid; grid-template-columns:auto 220px auto 220px; align-items:center; gap:10px 12px; }
.player-info label{ font-weight:600; }
.player-info input{ width:100%; padding:10px 12px; font-size:16px; border:1px solid var(--stroke); border-radius:10px; background:#111; color:#e5e7eb; }
#submitBtn{ padding:12px 18px; font-size:16px; border-radius:14px; border:1px solid var(--stroke); background:#0a84ff; color:#fff; font-weight:700; box-shadow:0 8px 20px rgba(10,132,255,.35); }
.submit-bar{ max-width:960px; margin:10px auto 0; display:flex; justify-content:center; }
@media (max-width:640px){ .player-info{ grid-template-columns:1fr 1fr; } #submitBtn{ width:100%; } }

/* ===== Vegas titles (one-time shimmer) ===== */
.vegas-title,.vegas-header{
  text-align:center; margin:6px auto 6px;
  font-weight:900; letter-spacing:.06em; text-transform:uppercase;
  background: linear-gradient(180deg,#fff7d6 0%,#ffd76a 40%,#fbbf24 60%,#b45309 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 6px rgba(255,210,110,.35), 0 0 12px rgba(255,160,0,.18);
  position:relative;
}
.vegas-title{ font-size: clamp(28px, 4vw, 42px); }
.vegas-header{ font-size: clamp(18px, 2.8vw, 22px); margin-top:10px; }
.subhead{ margin:0 auto 14px; text-align:center; color:#c8cbd2; opacity:.9; }

.shimmer .vegas-title::before, .shimmer .vegas-header::before{
  content:""; position:absolute; top:-20%; left:-45%; width:45%; height:160%;
  transform:skewX(-20deg);
  background:linear-gradient(75deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.85) 45%,rgba(255,255,255,0) 90%);
  filter:blur(.5px); opacity:.4; animation: titleShimmer 3.8s linear 1;
}
@keyframes titleShimmer{ 0%{left:-45%;} 100%{left:110%;} }

/* ===== Matchups ===== */
#matchups{ max-width:960px; margin:0 auto; }
#matchups h3{ margin:16px 0 8px; font-size:16px; color:#d1d5db; }

.matchup-card{
  position:relative; overflow:hidden;
  border-radius:16px; padding:14px 12px; margin-bottom:14px;
  border:2px solid rgba(255,215,0,.28);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 22px 40px rgba(0,0,0,.75), 0 0 20px rgba(255,215,0,.16);
  color:#fff;
}
/* Important: decoration layers must never steal taps */
.matchup-card::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(140% 160% at 12% -8%,
      rgba(var(--brand-rgb, var(--fallback-glow)), .55),
      rgba(var(--brand-rgb, var(--fallback-glow)), .22) 46%,
      rgba(0,0,0,.18) 72%);
  pointer-events:none;
}
.matchup-card::after{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.20));
  pointer-events:none;
}
.matchup-card > *{ position:relative; z-index:2; }
.matchup-card[data-brand]{ border-color: rgba(var(--brand-rgb), .55); box-shadow: 0 22px 40px rgba(0,0,0,.78), 0 0 26px rgba(var(--brand-rgb), .28); }

.matchup-header{ font-size:13px; color:rgba(255,255,255,.9); margin-bottom:8px; }

.team-option{
  display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 6px;
  border-radius:10px; transition:background .18s, box-shadow .18s; cursor:default;
  -webkit-tap-highlight-color: rgba(255,255,255,.15);
  position: relative;
}
.team-option.selected{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  box-shadow: 0 0 0 2px rgba(255,255,255,.18), 0 8px 18px rgba(0,0,0,.35);
}
.team-line{ display:flex; align-items:center; gap:8px; color:#fff; }
.logo{ width:24px; height:24px; object-fit:contain; 
  filter: drop-shadow(0 0 3px rgba(255,255,255,.75)) drop-shadow(0 2px 3px rgba(0,0,0,.35)); }

/* Make sure the actual checkbox is always clickable */
.team-option input[type="checkbox"]{ margin-left: 8px; 
  width: 30px; height: 30px;
  position: relative; z-index: 5; pointer-events:auto;
}

/* ===== Leaderboard ===== */
#leaderboard{ margin:18px auto 0; max-width:960px; padding:12px; border-radius:16px; background:linear-gradient(180deg,#fb4f14,#ff6a33); box-shadow:0 10px 30px rgba(0,0,0,.55); }
.lb-list{ display:grid; gap:10px; }
.lb-row{ background:#0f1115; border:1px solid rgba(255,255,255,.10); box-shadow:0 8px 20px rgba(0,0,0,.55); display:grid; grid-template-columns:minmax(160px,1fr) repeat(4,32px); align-items:center; column-gap:12px; padding:10px 12px; border-radius:12px; }
.lb-left{ display:flex; align-items:center; gap:8px; min-width:0; }
.lb-name{ font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#eaecef; }
.lb-wins{ display:inline-block; min-width:20px; text-align:center; font-weight:800; padding:0 6px; border-radius:999px; background:rgba(10,132,255,.18); color:#7ab7ff; font-size:12px; }
.lb-pick{ width:32px; height:32px; border-radius:9px; border:1px solid rgba(255,255,255,.14); display:grid; place-items:center; overflow:hidden; background:#0b0d10; }
.lb-pick img.lb-logo{ width:20px; height:20px; object-fit:contain; display:block;
  filter: drop-shadow(0 0 3px rgba(255,255,255,.9)) drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.lb-pick.ok{ background:#22c55e33; border-color:#16a34a; }
.lb-pick.bad{ background:#ef444433; border-color:#ef4444; }

@media (max-width:520px){
  .lb-row{ grid-template-columns:1fr 32px 32px 32px 32px; row-gap:8px; }
  .lb-left{ grid-column:1 / -1; }
  .lb-pick:first-of-type{ grid-column:2; }
}