/* ==========================================================================
   OpenRun design system -- ported verbatim from D:\Bandroom\wwwroot\style.css
   (--team-glow/--glass-fill/--glass-border/--glass-blur/--radius-* vars,
   .glass, neon-pulse/pill-glow-pulse/header-glow-pulse keyframes, .pill,
   header treatment). --team-primary/--team-secondary/--team-glow here are
   driven by the user's chosen FAVORITE TEAM (see app.js applyFavoriteTeamTheme),
   not a live matchup like Bandroom -- same var names/logic, different source.
   Hard rule: no grey text anywhere in this file.
   ========================================================================== */

@font-face {
  font-family: "Outfit";
  src: url("fonts/Outfit-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --team-secondary: #22d3ee;
  --team-primary: #0f766e;
  /* Lightest of --team-primary/--team-secondary, recomputed by applyFavoriteTeamTheme() every
     time the favorite team changes -- see app.js relativeLuminance()/applyFavoriteTeamTheme(). */
  --team-glow: #22d3ee;

  --glass-fill: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-blur: 26px;

  --radius-panel: 24px;
  --radius-card: 14px;

  --window-bg: #0b0d10;
  --font-body: "Outfit";
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--window-bg);
  color: #fff;
  font-family: var(--font-body), "Segoe UI", sans-serif;
}

/* ==========================================================================
   Favorite-team background photo -- set on #app (not body) by
   applyFavoriteTeamTheme() in app.js via --team-bg-image, one per team,
   see wwwroot/backgrounds/<ABBR>.jpg. Darkened/gradient so .glass panels
   and white text stay legible over any photo -- this is the ONLY place a
   non-solid background is allowed per the design system.
   ========================================================================== */
#app {
  background-image:
    linear-gradient(180deg, rgba(11,13,16,0.55) 0%, rgba(11,13,16,0.80) 55%, rgba(11,13,16,0.95) 100%),
    var(--team-bg-image, none);
  background-size: cover;
  background-position: center;
}

/* ==========================================================================
   Glass panel -- verbatim from Bandroom style.css
   ========================================================================== */
.glass {
  background: var(--glass-fill);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border: 1px solid var(--glass-border);
}

@keyframes neon-pulse {
  0%, 100% {
    border-color: color-mix(in srgb, var(--team-secondary) 45%, var(--glass-border));
    box-shadow: 0 0 10px -2px color-mix(in srgb, var(--team-secondary) 35%, transparent);
  }
  50% {
    border-color: color-mix(in srgb, var(--team-secondary) 85%, var(--glass-border));
    box-shadow: 0 0 22px 1px color-mix(in srgb, var(--team-secondary) 60%, transparent);
  }
}

@keyframes header-glow-pulse {
  0%, 100% { text-shadow: 0 0 6px color-mix(in srgb, var(--team-glow) 45%, transparent); }
  50% { text-shadow: 0 0 16px color-mix(in srgb, var(--team-glow) 90%, transparent); }
}

@keyframes pill-glow-pulse {
  0%, 100% { box-shadow: 0 0 6px -1px color-mix(in srgb, var(--team-primary, var(--accent)) 40%, transparent); }
  50% { box-shadow: 0 0 13px 0px color-mix(in srgb, var(--team-primary, var(--accent)) 80%, transparent); }
}

/* ==========================================================================
   Header treatment -- verbatim rule from Bandroom (design system rule 2026-08-09:
   any header defaults to this treatment)
   ========================================================================== */
[id$="-title"]:not(button), [id$="-header"]:not(button) {
  font-family: "Arial Black", "Arial Narrow Bold", Impact, var(--font-body, "Outfit"), sans-serif;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--team-primary, #000) 65%, black);
  color: var(--team-glow, #fff);
  animation: header-glow-pulse 3s ease-in-out infinite;
}

/* ==========================================================================
   Pill button -- verbatim from Bandroom (.pill), text always white per
   design system rule 2026-08-09 even though the border/glow is team-tinted.
   ========================================================================== */
.pill {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--team-secondary, var(--accent)) 40%, var(--glass-border));
  background: color-mix(in srgb, var(--team-secondary, var(--accent)) 16%, rgba(255, 255, 255, 0.04));
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
  animation: pill-glow-pulse 3s ease-in-out infinite;
}
.pill:hover { background: color-mix(in srgb, var(--team-secondary, var(--accent)) 28%, rgba(255, 255, 255, 0.08)); color: #fff; }
.pill[aria-pressed="true"], .pill.active {
  border-color: color-mix(in srgb, var(--team-secondary, var(--accent)) 85%, var(--glass-border));
  background: color-mix(in srgb, var(--team-secondary, var(--accent)) 32%, rgba(255, 255, 255, 0.06));
}
/* Keyboard focus ring -- pills had no visible :focus state before, so tabbing
   through the team grid / nav / roster actions was invisible. Reuses --team-glow
   so it reads as part of the existing accent language rather than a new color. */
.pill:focus-visible {
  outline: 2px solid var(--team-glow);
  outline-offset: 2px;
}

/* ==========================================================================
   OpenRun-specific layout -- phone-shaped app shell. Not ported, written new
   for this project (Bandroom is a desktop-window app, not phone-shaped).
   ========================================================================== */
#app {
  max-width: 390px;
  margin: 0 auto;
  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ==========================================================================
   Fake iPhone status bar + notch/Dynamic Island. Only shown when running
   inside the PC WebView2 shell (no real OS chrome there) -- a real installed
   iPhone PWA already has its own status bar, so body.pc-shell gates this,
   toggled by detectHostEnvironment() in app.js. Sized/positioned to read as
   an iPhone 14/15-class device: pill-shaped Dynamic Island, SF-style time,
   signal/wifi/battery glyphs.
   ========================================================================== */
#phone-statusbar { display: none; }
body.pc-shell #phone-statusbar {
  flex: 0 0 auto;
  position: relative;
  height: 44px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  background: var(--window-bg);
}
body.pc-shell #app {
  border-radius: 46px;
  border: 1px solid var(--glass-border);
  overflow: hidden;
}
#phone-notch {
  display: none;
}
body.pc-shell #phone-notch {
  display: block;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 26px;
  border-radius: 999px;
  background: #000;
}
#statusbar-icons {
  display: flex;
  align-items: center;
  gap: 5px;
}
.sb-icon { height: 11px; fill: #fff; color: #fff; }

#header-title {
  flex: 0 0 auto;
  padding: 16px 20px 14px;
  font-size: 20px;
  border-left: none;
  border-right: none;
  border-top: none;
  text-align: center;
}

#view-root {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#bottom-nav {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  border-left: none;
  border-right: none;
  border-bottom: none;
}

.nav-pill {
  flex: 1 1 0;
  text-align: center;
}

/* Generic content card, reuses .glass */
.card {
  border-radius: var(--radius-card);
  padding: 16px;
}

.panel {
  border-radius: var(--radius-panel);
  padding: 18px;
}

.card-title, .panel-title {
  font-size: 15px;
  margin: 0 0 8px;
}

.empty-state {
  color: #fff;
  opacity: 0.65;
  font-size: 13.5px;
  text-align: center;
  padding: 24px 8px;
}

.progress-track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  border: 1px solid var(--glass-border);
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: color-mix(in srgb, var(--team-glow) 80%, transparent);
  border-radius: 999px;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.team-grid .pill {
  width: 100%;
  text-align: center;
}

.score-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #fff;
  text-shadow: 0 0 14px color-mix(in srgb, var(--team-glow) 55%, transparent);
}
.score-row .score-sep {
  opacity: 0.5;
  font-weight: 600;
  font-size: 26px;
}

/* Small pulsing "LIVE" badge shown next to the score once GetLiveScore()
   reports hasData:true (see app.js startLiveScorePolling). Reuses the same
   glow/pulse language as everything else -- a filled dot + label, not a new
   shape or color system. */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--team-glow) 55%, var(--glass-border));
  background: color-mix(in srgb, var(--team-glow) 14%, rgba(255, 255, 255, 0.04));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}
.live-badge .live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--team-glow);
  box-shadow: 0 0 6px 1px var(--team-glow);
  animation: live-dot-pulse 1.4s ease-in-out infinite;
}
@keyframes live-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.8); }
}

.subtext {
  color: #fff;
  opacity: 0.7;
  font-size: 12.5px;
}

/* ==========================================================================
   In-app modal -- replaces window.alert()/window.prompt() (see app.js
   showAlertModal/showConfirmModal/showPromptModal). Reuses .card.glass for
   the panel itself so it matches every other surface in the app.
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1000;
}
.modal-card {
  width: 100%;
  max-width: 340px;
  animation: neon-pulse 3s ease-in-out infinite;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}