/* ============================================================================
   FootyGenius — Liquid Glass layer (iOS-26 inspired)
   Shared across every page. Loaded AFTER each page's inline <style> so it
   layers a uniform translucent-glass treatment onto the app's shared classes
   (.app-bar, .tabbar, .card, form controls…) without touching page markup.
   Calibrated "middle ground": clearly glassy, still readable. Tune the tokens
   in :root below to push the whole app lighter or heavier in one place.
   ========================================================================== */
:root {
  /* Glass surfaces (alpha lowered ~20% for more transparency) */
  --glass-bg: rgba(255, 255, 255, 0.46);
  --glass-bg-strong: rgba(255, 255, 255, 0.59);
  --glass-tint: rgba(38, 166, 154, 0.05);
  --glass-blur: 18px;
  --glass-saturate: 180%;
  --glass-border: rgba(255, 255, 255, 0.55);
  /* Specular: bright top inner edge + soft drop. The inset top line is the
     "liquid" highlight that reads as a glass bevel. */
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 0 0 0.5px rgba(255, 255, 255, 0.3);
  --glass-shadow: 0 8px 30px rgba(26, 60, 55, 0.14);
}

/* Reusable backdrop blur (kept in one place so every surface matches). */
.glass,
.app-bar,
.tabbar,
.card,
.toast {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

/* ── Ambient background ─────────────────────────────────────────────────────
   Glass needs something behind it to refract. Replace the flat near-white bg
   with a soft teal-tinted mesh, fixed so it shows through every surface. */
body {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(77, 182, 172, 0.16) 0%, transparent 55%),
    radial-gradient(120% 80% at 0% 100%, rgba(38, 166, 154, 0.14) 0%, transparent 55%),
    radial-gradient(90% 60% at 50% 120%, rgba(26, 60, 55, 0.10) 0%, transparent 60%),
    var(--bg, #F8FAF9);
  background-attachment: fixed;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card {
  background: linear-gradient(135deg, var(--glass-bg-strong), var(--glass-bg)) , var(--glass-tint);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
}

/* ── App bar (brand header) ─────────────────────────────────────────────────
   Keep the teal identity but add a glass sheen + specular edge so it belongs
   to the same system. */
.app-bar {
  background:
    linear-gradient(135deg, rgba(38, 166, 154, 0.92) 0%, rgba(26, 60, 55, 0.92) 100%);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.app-bar .player-switch {
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* ── Floating glass tab bar ─────────────────────────────────────────────────
   The signature iOS-26 element: a translucent capsule floating off the edges. */
.tabbar {
  /* Center on the viewport. Set left + transform explicitly so centering is
     self-contained and doesn't depend on each page's base .tabbar rule. */
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  margin: 0;
  /* float in from the sides and up off the bottom */
  bottom: calc(var(--safe-b, 0px) + 10px);
  width: min(calc(100% - 24px), 456px);
  height: var(--tabbar-h, 64px);
  padding: 0 6px;
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius, 28px);
  background: linear-gradient(135deg, var(--glass-bg-strong), var(--glass-bg));
  box-shadow: var(--glass-shadow), var(--glass-highlight);
}
/* Active tab gets a soft glass capsule behind it. */
.tab { position: relative; border-radius: 18px; }
.tab.active::before {
  content: "";
  position: absolute;
  inset: 8px 6px;
  border-radius: 16px;
  background: var(--teal-50, rgba(38, 166, 154, 0.10));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  z-index: -1;
}
.tab-fab .fab {
  box-shadow: 0 6px 18px rgba(26, 60, 55, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* ── Form controls: inputs, selects, textareas ─────────────────────────────
   Glass fields with a specular top edge; teal glow on focus. */
input:not([type="checkbox"]):not([type="range"]),
select,
textarea {
  background: var(--glass-bg-strong) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-highlight);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--teal, #26A69A) !important;
  box-shadow: 0 0 0 3px rgba(38, 166, 154, 0.18), var(--glass-highlight);
  outline: none;
}

/* ── Search-result / autocomplete rows ──────────────────────────────────────
   Shared glass row for the JS-rendered dropdowns (opponent search, badge
   search…). Use class .fg-opt-row instead of inline white styles. */
.fg-opt-list { display: flex; flex-direction: column; gap: 6px; }
.fg-opt-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--glass-radius, 14px);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  box-shadow: var(--glass-highlight);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.12s, transform 0.04s;
}
.fg-opt-row:hover { border-color: var(--teal); }
.fg-opt-row:active { transform: scale(0.99); }
.fg-opt-row .fg-opt-crest {
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 9px; object-fit: contain;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--glass-border);
}
.fg-opt-row .fg-opt-crest--empty {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--teal-50); color: var(--teal-dark);
  font-weight: 800; font-size: 14px;
}
.fg-opt-row .fg-opt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-opt-row .fg-opt-age { font-size: 11px; color: var(--muted); font-weight: 700; flex: 0 0 auto; }
.fg-opt-row.fg-opt-create { color: var(--teal); border-style: dashed; border-color: var(--teal); justify-content: flex-start; }

/* ── Animated loaders ───────────────────────────────────────────────────────
   Upgrade every text loader (.loading) to a glass spinner + label. Error/empty
   messages opt out with .loading.no-spin. */
@keyframes fg-spin { to { transform: rotate(360deg); } }

.fg-spinner, .loading:not(.no-spin)::before {
  content: "";
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 3px solid var(--teal-50, rgba(38, 166, 154, 0.18));
  border-top-color: var(--teal, #26A69A);
  animation: fg-spin 0.7s linear infinite;
  flex: 0 0 auto;
}
.loading:not(.no-spin) {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; min-height: 72px; color: var(--muted, #9E9E9E);
  font-size: 13px; font-weight: 600;
}

/* Full-screen glass loading modal (window.FGLoading.show / .hide) */
.fg-loading-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(26, 60, 55, 0.16);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.18s; pointer-events: none;
}
.fg-loading-overlay.show { opacity: 1; pointer-events: auto; }
.fg-loading-box {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 26px 32px; border-radius: 22px;
  background: var(--glass-bg-strong, rgba(255, 255, 255, 0.74));
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.55));
  box-shadow: 0 18px 40px rgba(26, 60, 55, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  color: var(--text, #1A3C37); font-weight: 700; font-size: 14px;
}
.fg-loading-box .fg-spinner { width: 40px; height: 40px; border-width: 3.5px; }

@media (prefers-reduced-motion: reduce) {
  .fg-spinner, .loading:not(.no-spin)::before { animation-duration: 1.6s; }
}

/* ── Toast ─────────────────────────────────────────────────────────────── */
.toast {
  background: linear-gradient(135deg, rgba(26, 60, 55, 0.82), rgba(26, 60, 55, 0.7));
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* ── Glass range slider (opt-in via input[type=range].glass-slider) ─────────
   The app has no sliders yet; this is the house style for when it adds them. */
input[type="range"].glass-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 30px;
  background: transparent;
  cursor: pointer;
}
input[type="range"].glass-slider::-webkit-slider-runnable-track {
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), var(--glass-bg));
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 2px rgba(26, 60, 55, 0.12);
}
input[type="range"].glass-slider::-moz-range-track {
  height: 12px;
  border-radius: 999px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}
input[type="range"].glass-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffffff, #eaf3f1);
  border: 1px solid var(--glass-border);
  box-shadow: 0 3px 8px rgba(26, 60, 55, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
input[type="range"].glass-slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--glass-border);
  box-shadow: 0 3px 8px rgba(26, 60, 55, 0.28);
}

/* ── Glass toggle switch (enhances the app's existing .switch) ───────────── */
.switch .slider, .switch > span {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--glass-highlight);
}

/* Respect reduced-transparency / motion preferences: fall back to solid. */
@media (prefers-reduced-transparency: reduce) {
  .glass, .app-bar, .tabbar, .card, .toast,
  input:not([type="checkbox"]):not([type="range"]), select, textarea {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .card { background: var(--card, #fff); }
  .tabbar { background: rgba(255, 255, 255, 0.97); }
}