/* Gambit Club — "app" look for Settings, Spectate and Analysis.
   Mirrors the Android app: deep navy ground, glass cards with a thin blue edge, gold pills for the selected state. */
:root {
  --ap-bg: #020815;
  --ap-card-a: rgba(4, 14, 36, .97);
  --ap-card-b: #040f24;
  --ap-edge: rgba(55, 138, 221, .16);
  --ap-edge-strong: rgba(55, 138, 221, .38);
  --ap-gold: #d4af37;
  --ap-gold-a: #f59e0b;
  --ap-gold-b: #fbbf24;
  --ap-text: #f1f5f9;
  --ap-dim: #94a3b8;
  --ap-mute: #7d879c;
  --ap-green: #34d399;
  --ap-red: #ef4444;
  --ap-out: cubic-bezier(.23, 1, .32, 1);
}

/* ── top bar with a round back button ── */
.ap-top {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; margin: 0 -16px 6px;
  background: linear-gradient(180deg, var(--ap-bg) 70%, rgba(2, 8, 21, 0));
}
.ap-back {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 22px; line-height: 1;
  color: var(--ap-text); background: rgba(55, 138, 221, .1); border: 1px solid var(--ap-edge);
  cursor: pointer; text-decoration: none;
  transition: transform .16s var(--ap-out), background .16s;
}
.ap-back:active { transform: scale(.94); }
.ap-title { font-size: 20px; font-weight: 800; color: var(--ap-text); line-height: 1.15; }
.ap-sub { font-size: 12px; color: var(--ap-dim); margin-top: 1px; }
.ap-top-main { flex: 1; min-width: 0; }

/* ── cards & sections ── */
.ap-sec, .ap-card {
  background: linear-gradient(180deg, var(--ap-card-a), var(--ap-card-b));
  border: 1px solid var(--ap-edge); border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.ap-sec { padding: 16px; margin-bottom: 14px; }
.ap-sec-title { font-size: 14px; font-weight: 800; color: var(--ap-text); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.ap-label { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ap-mute); margin: 12px 0 8px; }

/* ── chips ── */
.ap-scroll { min-width: 0; max-width: 100%; display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ap-scroll::-webkit-scrollbar { display: none; }
.ap-chip {
  flex: none; scroll-snap-align: start; cursor: pointer; white-space: nowrap;
  padding: 8px 14px; border-radius: 999px; font-size: 12px; font-weight: 700;
  color: var(--ap-dim); background: rgba(55, 138, 221, .08); border: 1px solid var(--ap-edge);
  transition: transform .16s var(--ap-out), background .16s, color .16s, border-color .16s;
}
.ap-chip:active { transform: scale(.97); }
.ap-chip.on, .ap-chip.active {
  color: #0a1020; border-color: transparent;
  background: linear-gradient(90deg, var(--ap-gold-a), var(--ap-gold-b));
  box-shadow: 0 4px 14px rgba(245, 158, 11, .28);
}
@media (hover: hover) and (pointer: fine) { .ap-chip:not(.on):not(.active):hover { background: rgba(55, 138, 221, .16); color: var(--ap-text); } }

/* ── pill toggle ── */
.ap-toggle, .notif-toggle {
  position: relative; flex: none; width: 46px; height: 26px; border-radius: 999px; cursor: pointer;
  background: rgba(125, 135, 156, .35); border: 1px solid rgba(255, 255, 255, .06);
  transition: background .2s var(--ap-out);
}
.ap-toggle::after, .notif-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
  transition: transform .2s var(--ap-out);
}
.ap-toggle.on, .notif-toggle.on { background: linear-gradient(90deg, var(--ap-gold-a), var(--ap-gold-b)); }
.ap-toggle.on::after, .notif-toggle.on::after { transform: translateX(20px); left: 2px; }

/* ── rows ── */
.ap-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(55, 138, 221, .08); }
.ap-row:last-child { border-bottom: 0; }
.ap-row-t { font-size: 14px; font-weight: 600; color: var(--ap-text); }
.ap-row-s { font-size: 11.5px; color: var(--ap-mute); margin-top: 2px; }
.ap-link { display: flex; align-items: center; gap: 10px; padding: 12px 0; text-decoration: none; color: var(--ap-text); border-bottom: 1px solid rgba(55, 138, 221, .08); }
.ap-link:last-child { border-bottom: 0; }
.ap-link .ap-chev { margin-left: auto; color: var(--ap-gold); font-size: 22px; line-height: 1; }

/* ── live badge ── */
.ap-live {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: .04em; color: #f87171;
  background: rgba(239, 68, 68, .15); border: 1px solid rgba(239, 68, 68, .4);
}
.ap-live i { width: 7px; height: 7px; border-radius: 50%; background: #f87171; animation: apPulse 1.2s ease-in-out infinite; }
@keyframes apPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ── gold button ── */
.ap-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 12px 16px; border: 0; border-radius: 12px; cursor: pointer; font-size: 14px; font-weight: 800; color: #0a1020;
  background: linear-gradient(90deg, var(--ap-gold-a), var(--ap-gold-b)); box-shadow: 0 6px 18px rgba(245, 158, 11, .28);
  transition: transform .16s var(--ap-out), filter .16s;
}
.ap-btn:active { transform: scale(.97); }
.ap-btn.green { background: linear-gradient(90deg, #059669, var(--ap-green)); box-shadow: 0 6px 18px rgba(52, 211, 153, .25); }
.ap-btn.ghost { color: var(--ap-text); background: rgba(55, 138, 221, .1); box-shadow: none; border: 1px solid var(--ap-edge); }

@media (prefers-reduced-motion: reduce) { .ap-live i { animation: none; } .ap-chip, .ap-btn, .ap-back, .ap-toggle::after, .notif-toggle::after { transition: none; } }