/* ============================================================
   FOOTBALLIQ — SEASON & PREDICTION ACCESS CONTROL (styles)
   Loaded only by /bet/index.html, AFTER auth.css. Reuses the
   design tokens from ../style.css. Purely additive.
   ============================================================ */

/* ==========================================================
   ROLE-BASED VISIBILITY
   • Creation controls (matches / seasons): Admin or VIP only.
     Hidden entirely for regular users — no disabled button.
   • Data section: Admin only (VIP excluded unless granted).
   These complement auth.css's .admin-only rule.
   ========================================================== */
.creator-only { display: none !important; }
body.se-can-create .creator-only { display: inline-flex !important; }

.data-only { display: none !important; }
body.se-can-data .data-only { display: inline-flex !important; }
/* The Data nav tab is a button — keep it inline-block when allowed. */
body.se-can-data .nav-tab.data-only { display: inline-block !important; }

/* ==========================================================
   EXPERT PREDICTIONS PANEL
   ========================================================== */
#expertPredPanel { margin-top: 28px; }
.se-panel-head { margin-bottom: 14px; }
.se-panel-title {
  font-family: var(--font-condensed, var(--font-display));
  font-size: 20px; font-weight: 700; letter-spacing: .5px;
  color: var(--text-primary);
}
.se-panel-sub { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }

.se-match-list { display: flex; flex-direction: column; gap: 14px; }

.se-match {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px;
}
.se-match-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 10px;
}
.se-match-teams { font-size: 15px; color: var(--text-primary); }
.se-match-meta { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; }

/* — current user's submit / lock bar — */
.se-self {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 9px 12px; margin-bottom: 12px; border-radius: 10px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  font-size: 13px; color: var(--text-secondary);
}
.se-self-hint { color: var(--text-muted); font-style: italic; }
.se-self-count { font-weight: 600; color: var(--text-primary); }
.se-submit-btn {
  margin-left: auto; padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 700;
  background: var(--accent); color: #04150b; border: none; cursor: pointer;
  transition: var(--transition, all .2s ease);
}
.se-submit-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.se-self-locked { background: rgba(255,215,0,.07); border-color: rgba(255,215,0,.3); }

.pred-locked-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-condensed, inherit); font-weight: 700; font-size: 12px;
  letter-spacing: .4px; text-transform: uppercase;
  color: var(--gold); background: rgba(255,215,0,.12);
  border: 1px solid rgba(255,215,0,.4); border-radius: 999px; padding: 4px 12px;
}
.pred-locked-time { font-weight: 500; text-transform: none; opacity: .8; font-size: 11px; }

/* — expert cards — */
.se-experts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .se-experts { grid-template-columns: 1fr; } }

.se-card {
  position: relative; overflow: hidden;
  background: rgba(255,255,255,0.02); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px; min-height: 84px;
}
.se-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.se-card-name { font-family: var(--font-condensed, inherit); font-weight: 700; font-size: 14px; color: var(--text-primary); }
.se-edit-btn {
  font-size: 11px; padding: 3px 9px; border-radius: 7px; cursor: pointer;
  background: var(--bg-elevated, rgba(255,255,255,.05)); color: var(--text-secondary);
  border: 1px solid var(--border);
}
.se-edit-btn:hover { color: var(--accent); border-color: var(--accent); }

.se-card-picks { display: flex; flex-wrap: wrap; gap: 6px; transition: filter .5s ease, opacity .5s ease; }
.se-pick {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 7px;
  font-size: 12px; font-weight: 600; color: var(--text-primary);
  background: var(--bg-elevated, rgba(255,255,255,.06)); border: 1px solid var(--border);
}
.se-pick-correct { color: var(--win, #00e676); background: rgba(0,230,118,.12); border-color: rgba(0,230,118,.4); }
.se-pick-wrong   { color: var(--loss, #ff5252); background: rgba(255,82,82,.10); border-color: rgba(255,82,82,.35); }
.se-empty { font-size: 12px; color: var(--text-muted); font-style: italic; }

/* — LOCKED state: blur, disable interaction, lock overlay — */
.se-card-locked .se-blur {
  filter: blur(7px); opacity: .65; pointer-events: none; user-select: none;
}
.se-card-locked { pointer-events: none; }
.se-card-locked .se-edit-btn { pointer-events: auto; }
.se-lock-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 26px; z-index: 2; pointer-events: none;
  background: radial-gradient(circle at center, rgba(0,0,0,.18), transparent 70%);
}

/* — REVEALED state: smooth fade-in / reveal animation — */
.se-card-revealed .se-card-picks { animation: seReveal .55s cubic-bezier(.16,1,.3,1) both; }
@keyframes seReveal {
  from { opacity: 0; filter: blur(6px); transform: translateY(6px); }
  to   { opacity: 1; filter: blur(0);   transform: translateY(0); }
}
.se-match-unlocked { animation: seCardPop .4s ease both; }
@keyframes seCardPop {
  from { box-shadow: 0 0 0 0 rgba(0,230,118,0); }
  40%  { box-shadow: 0 0 0 2px rgba(0,230,118,.35); }
  to   { box-shadow: 0 0 0 0 rgba(0,230,118,0); }
}

.se-unlock-msg {
  margin-top: 12px; text-align: center; font-size: 13px; font-weight: 600;
  color: var(--text-secondary); padding: 8px;
  border: 1px dashed var(--border); border-radius: 10px;
  background: rgba(255,255,255,0.02);
}

/* — admin expert editor helper — */
.se-ed-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }

/* ==========================================================
   SEASON MANAGER + MULTI-SEASON MATCH ASSIGNMENT
   ========================================================== */
.se-tag {
  display: inline-block; vertical-align: middle; margin-left: 6px;
  font-family: var(--font-condensed, inherit); font-size: 10px; font-weight: 700;
  letter-spacing: .4px; text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
  background: var(--bg-elevated, rgba(255,255,255,.06)); color: var(--text-secondary);
  border: 1px solid var(--border);
}
.se-tag-default { background: rgba(79,195,247,.14); color: var(--accent3, #4fc3f7); border-color: rgba(79,195,247,.4); }
.se-tag-expert  { background: rgba(255,215,0,.14);  color: var(--gold);            border-color: rgba(255,215,0,.4); }
.se-protected { font-size: 14px; opacity: .65; cursor: help; }

.se-season-checks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.se-check {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 8px; font-size: 13px; cursor: pointer;
  background: var(--bg-elevated, rgba(255,255,255,.04)); border: 1px solid var(--border);
  color: var(--text-primary);
}
.se-check input { accent-color: var(--accent); cursor: pointer; }
.se-check:hover { border-color: var(--accent); }
.se-allseasons {
  width: 100%; gap: 10px; padding: 10px 12px;
  background: rgba(0,230,118,.06); border-color: rgba(0,230,118,.35);
}
.se-allseasons strong { color: var(--accent); }

/* ==========================================================
   MATCH TIME BAR — countdown / live / finished / lock
   ========================================================== */
.se-mt-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 0 0 10px; padding: 6px 10px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  border-radius: 8px; font-size: 12px;
}
.se-mt { display: inline-flex; align-items: center; gap: 5px; font-weight: 700;
  font-family: var(--font-condensed, inherit); letter-spacing: .3px; }
.se-mt-pre { color: var(--accent3, #4fc3f7); }
.se-cd { font-variant-numeric: tabular-nums; }
.se-mt-time { color: var(--text-muted); font-size: 11px; margin-left: auto; }
.se-mt-finished { color: var(--win, #00e676); }
.se-mt-live { color: var(--loss, #ff5252); text-transform: uppercase; }
.se-live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--loss, #ff5252);
  display: inline-block; animation: seLivePulse 1.1s ease-in-out infinite;
}
@keyframes seLivePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,82,82,.6); }
  50%      { opacity: .55; box-shadow: 0 0 0 5px rgba(255,82,82,0); }
}
.se-mt-lock { color: var(--gold); font-size: 11px; margin-left: auto; }