/* ================================
   MatPulse App — live feed + follow page styles
   Covers: /app/follow, /app/live/:code
   ================================ */

/* ── Follow page ────────────────────────────────────────────────────────────── */
.follow-main { flex:1; display:flex; align-items:center; justify-content:center; padding:32px 16px; }
.follow-card { text-align:center; max-width:420px; width:100%; }
.follow-icon { font-size:48px; margin-bottom:16px; }
.follow-title { font-size:1.75rem; font-weight:800; margin-bottom:8px; }
.follow-sub { color:var(--fg-muted); font-size:0.9rem; margin-bottom:24px; }
.follow-error { color:#ff7a9a; background:rgba(255,77,109,0.08); border:1px solid rgba(255,77,109,0.2); border-radius:8px; padding:10px 14px; font-size:0.875rem; margin-bottom:16px; }
.follow-form { display:flex; flex-direction:column; gap:12px; margin-bottom:32px; }
.code-input-wrap { display:flex; justify-content:center; }
.code-input { background:rgba(255,255,255,0.05); border:2px solid rgba(255,255,255,0.15); border-radius:12px; color:var(--fg); font-family:'Outfit',sans-serif; font-size:2.4rem; font-weight:800; letter-spacing:0.18em; text-align:center; padding:16px 20px; width:100%; max-width:300px; outline:none; text-transform:uppercase; transition:border-color 0.2s; }
.code-input:focus { border-color:var(--accent); }
.code-input::placeholder { color:rgba(255,255,255,0.18); }
.follow-demo { font-size:0.82rem; color:var(--fg-muted); display:flex; flex-direction:column; gap:4px; }
.follow-demo-link { color:var(--accent); text-decoration:none; font-weight:600; }

/* ── Live feed page header ────────────────────────────────────────────────── */
.live-body { display:flex; flex-direction:column; }

.live-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: rgba(11,22,40,0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: sticky;
  top: 0;
  z-index: 100;
  gap: 8px;
}

.live-back { color:var(--fg-muted); text-decoration:none; font-size:0.85rem; flex-shrink:0; }
.live-back:hover { color:var(--fg); }

.live-title-wrap { display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.live-event-name { font-size:0.85rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.live-badge { display:flex; align-items:center; gap:5px; background:rgba(255,77,109,0.12); color:#ff4d6d; border-radius:20px; padding:3px 8px; font-size:0.68rem; font-weight:800; letter-spacing:0.08em; flex-shrink:0; }

.live-dot { width:6px; height:6px; background:#ff4d6d; border-radius:50%; animation:pulse 1.2s infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

.stream-status { display:flex; align-items:center; gap:5px; font-size:0.72rem; color:var(--fg-muted); flex-shrink:0; }
.stream-dot { width:6px; height:6px; background:var(--fg-muted); border-radius:50%; }
.stream-status.connected .stream-dot { background:var(--accent); }
.stream-status.connected #streamLabel { color:var(--accent); }

/* ── Division tabs ─────────────────────────────────────────────────────────── */
.division-tabs { display:flex; overflow-x:auto; gap:4px; padding:10px 12px; background:rgba(11,22,40,0.8); border-bottom:1px solid rgba(255,255,255,0.06); -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.division-tabs::-webkit-scrollbar { display:none; }
.div-tab { background:transparent; border:1px solid rgba(255,255,255,0.1); border-radius:20px; color:var(--fg-muted); font-family:'Outfit',sans-serif; font-size:0.78rem; font-weight:600; padding:5px 14px; cursor:pointer; white-space:nowrap; transition:all 0.15s; }
.div-tab.active { background:rgba(0,229,196,0.12); border-color:rgba(0,229,196,0.4); color:var(--accent); }

/* ── Live main ──────────────────────────────────────────────────────────────── */
.live-main { flex:1; padding:12px 0 80px; overflow-y:auto; }
.live-division { margin-bottom:8px; }
.live-div-name { font-size:0.72rem; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:0.07em; padding:8px 14px 4px; }

/* ── Live team row ─────────────────────────────────────────────────────────── */
.live-team-row {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.15s;
}
/* lt-actions wraps follow star + share button side by side */
.lt-actions { display:flex; align-items:center; gap:2px; }

.live-team-row.row-performing { background:rgba(255,184,0,0.05); }
.live-team-row.row-scored     { background:rgba(0,229,196,0.03); }
.live-team-row.row-followed   { border-left:2px solid var(--accent); }

.lt-rank { text-align:center; }

.rank-num { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; font-size:0.78rem; font-weight:700; background:rgba(255,255,255,0.06); color:var(--fg-muted); }
.rank-gold   { background:rgba(255,184,0,0.15); color:var(--amber); }
.rank-silver { background:rgba(200,210,230,0.12); color:#c8d2e6; }
.rank-bronze { background:rgba(200,130,60,0.12); color:#c88230; }
.rank-pending { background:transparent; color:var(--fg-muted); }
.rank-live  { background:rgba(255,77,109,0.12); }

.mini-dot { width:7px; height:7px; background:#ff4d6d; border-radius:50%; animation:pulse 1s infinite; }

.lt-info { min-width:0; }
.lt-name { font-weight:600; font-size:0.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lt-status { font-size:0.68rem; font-weight:700; letter-spacing:0.05em; }

.lt-score { text-align:right; min-width:56px; }

.score-num { font-family:'Outfit',sans-serif; font-size:1.25rem; font-weight:800; color:var(--fg); }
.score-final { color:var(--accent); }
.score-pending { font-size:1rem; color:var(--fg-muted); }

.score-breakdown-sm { font-size:0.65rem; color:var(--fg-muted); margin-top:2px; display:flex; gap:6px; justify-content:flex-end; }

.follow-btn { background:none; border:none; cursor:pointer; padding:6px; opacity:0.6; transition:opacity 0.15s; display:flex; align-items:center; }
.follow-btn:hover { opacity:1; }
.share-btn { background:none; border:none; cursor:pointer; padding:6px; opacity:0.5; transition:opacity 0.15s; display:flex; align-items:center; }
.share-btn:hover { opacity:1; }

/* ── Share sheet overlay ─────────────────────────────────────────────────────── */
.share-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  z-index: 300;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: env(safe-area-inset-bottom);
}
.share-sheet-overlay.open { display: flex; }
.share-sheet {
  background: #111d30;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px 20px 0 0;
  padding: 12px 20px 28px;
  width: 100%;
  max-width: 440px;
  text-align: center;
}
.share-sheet-handle { width:40px; height:4px; background:rgba(255,255,255,0.15); border-radius:2px; margin:0 auto 16px; }
.share-sheet-title { font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--fg-muted); margin-bottom:4px; }
.share-sheet-team { font-size:1.05rem; font-weight:700; margin-bottom:20px; }
.share-sheet-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:20px; }
.share-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  color: var(--fg);
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 14px 16px;
  cursor: pointer;
  text-decoration: none;
  min-width: 64px;
  transition: background 0.15s;
}
.share-action-btn:hover { background: rgba(255,255,255,0.12); }
.share-action-wa { color: #25d366; }
.share-sheet-cancel { background:none; border:1px solid rgba(255,255,255,0.12); border-radius:10px; color:var(--fg-muted); font-family:'Outfit',sans-serif; font-size:0.9rem; font-weight:600; padding:12px 32px; cursor:pointer; }

/* ── Live footer ────────────────────────────────────────────────────────────── */
.live-footer { display:flex; align-items:center; justify-content:space-between; padding:16px 14px; font-size:0.8rem; color:var(--fg-muted); border-top:1px solid rgba(255,255,255,0.06); }
.live-footer-link { color:var(--fg-muted); text-decoration:none; }
.live-footer-link:hover { color:var(--fg); }
.live-gym-code strong { color:var(--accent); letter-spacing:0.06em; }

/* ── Empty state ────────────────────────────────────────────────────────────── */
.empty-state { display:flex; flex-direction:column; align-items:center; gap:16px; padding:60px 24px; text-align:center; color:var(--fg-muted); }

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .form-row { grid-template-columns:1fr; }
  .score-inputs { grid-template-columns:1fr 1fr; }
  .admin-team-head,
  .admin-team-row { grid-template-columns:24px 1fr 48px 64px 80px; }
  .admin-team-head span:nth-child(3),
  .admin-team-head span:nth-child(4),
  .admin-team-head span:nth-child(5),
  .admin-team-row  span:nth-child(3),
  .admin-team-row  span:nth-child(4),
  .admin-team-row  span:nth-child(5) { display:none; }
}