/*
  FXBALL — design tokens
  Palette: near-black night-pitch base, chalk white for text, the
  FXBALL brand green (lifted from the logo) as the one accent that
  fires everywhere — buttons, active states, glows, badges.
  Type: Bebas Neue for scoreboard-style display type (self-hosted, SIL
  OFL) paired with Manrope for body copy — both served from /static, so
  the CSP stays locked to script-src/style-src 'self' with no external
  font requests at runtime.
*/
@font-face {
  font-family: "Bebas Neue";
  src: url("/static/fonts/bebas-neue-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/static/fonts/manrope-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/static/fonts/manrope-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/static/fonts/manrope-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/static/fonts/manrope-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #06090a;
  --navy-raised: #101613;
  --pitch: #04150d;
  --pitch-light: #0e3624;
  --chalk: #f5f5f0;
  --chalk-dim: #99a6a0;
  --green: #01e86f;
  --green-dim: #049a54;
  --line: rgba(245, 245, 240, 0.10);
  --danger: #e6584f;
  --ok: #3fae6a;
  --warn: #e8a33f;

  --tier-bronze: #a9702f;
  --tier-bronze_shiny: #c9974f;
  --tier-silver: #9fa6ad;
  --tier-silver_shiny: #d7dbdf;
  --tier-gold: #d4af37;
  --tier-gold_shiny: #f5d565;
  --tier-iridescent: #b565f2;

  --radius: 14px;
  --radius-sm: 8px;
  --gap: 16px;
  --nav-height: 64px;
  --dock-height: 62px;
  --font-display: "Bebas Neue", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;

  /* Elevation system — layered, colour-tinted shadows read as more
     "designed" than a single flat box-shadow. */
  --shadow-xs: 0 2px 6px rgba(0,0,0,0.22);
  --shadow-sm: 0 4px 14px rgba(0,0,0,0.28);
  --shadow-md: 0 10px 28px rgba(0,0,0,0.34);
  --shadow-lg: 0 20px 48px rgba(0,0,0,0.42);
  --shadow-glow-green: 0 8px 24px rgba(1,232,111,0.28);

  /* Glass surfaces (topbar, floating dock nav) */
  --glass-bg: rgba(6, 12, 10, 0.72);
  --glass-border: rgba(1,232,111,0.14);
  --glass-blur: 20px;

  /* Motion */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 12% -8%, rgba(1,232,111,0.16), transparent 42%),
    radial-gradient(circle at 88% 6%, rgba(4,154,84,0.14), transparent 38%),
    var(--navy);
  background-attachment: fixed;
  color: var(--chalk);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
}

a { color: inherit; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.display {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0.035em;
}

/* ---------- Layout shell ---------- */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--gap);
  border-bottom: 1px solid var(--glass-border);
  background:
    linear-gradient(180deg, rgba(4,21,13,0.65) 0%, rgba(6,9,10,0.78) 160%);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  position: sticky;
  top: 0;
  z-index: 20;
  transition: box-shadow 0.3s ease;
}
.topbar.is-scrolled { box-shadow: var(--shadow-md); }
.topbar .brand {
  font-size: 20px;
  letter-spacing: 0.06em;
  line-height: 1;
}
.topbar .brand .dot { color: var(--green); }
.brand-logo { height: 22px; width: auto; display: block; filter: drop-shadow(0 0 8px rgba(1,232,111,0.18)); }
.brand-block { display: flex; flex-direction: row; align-items: center; gap: 8px; min-width: 0; }
.brand-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.topbar-crest {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  image-rendering: pixelated;
  flex-shrink: 0;
  display: none;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-border);
}
.topbar-crest.has-crest { display: block; }
.topbar-club-name {
  font-size: 11px;
  color: var(--chalk-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46vw;
}

.coins-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(1,232,111, 0.12);
  border: 1px solid rgba(1,232,111, 0.35);
  color: var(--green);
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
}

.coins-pill span[aria-hidden="true"] {
  font-size: 11px;
  opacity: 0.75;
  letter-spacing: 0.03em;
}

.topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* ---------- Account menu (topbar) ---------- */
.account-menu { position: relative; }
.account-menu-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  padding: 0;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.05);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.account-menu-btn:hover { border-color: var(--green-dim); }
.account-menu.open .account-menu-btn { border-color: var(--green); background: rgba(1,232,111,0.12); }
.account-avatar {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--green);
  text-transform: uppercase;
  line-height: 1;
}
.account-menu-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 190px;
  background: var(--navy-raised);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: 30;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.account-menu.open .account-menu-dropdown {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .account-menu-dropdown { transition: none; }
}
.account-menu-name {
  font-size: 12px;
  color: var(--chalk-dim);
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  background: none;
  border: none;
  color: var(--chalk);
  font-size: 13.5px;
  font-weight: 500;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}
.account-menu-item svg { flex-shrink: 0; color: var(--chalk-dim); }
.account-menu-item:hover { background: rgba(255,255,255,0.06); }
.account-menu-item.danger { color: var(--danger); }
.account-menu-item.danger svg { color: var(--danger); }
.account-menu-item.danger:hover { background: rgba(230,88,79,0.14); }

/* Bottom tab bar — primary nav, thumb-reachable on mobile/tablet */
.tabbar {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0) + 14px);
  transform: translateX(-50%);
  width: min(94vw, 460px);
  height: var(--dock-height);
  display: flex;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  z-index: 30;
  padding: 0 4px;
}
.tabbar button {
  position: relative;
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  color: var(--chalk-dim);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  padding: 6px 1px;
  transition: color 0.2s ease;
}
.tabbar button span.tab-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tabbar button svg { width: 20px; height: 20px; transition: transform 0.25s var(--ease-spring), filter 0.25s ease; }
.tabbar button.active { color: var(--green); }
.tabbar button.active svg { filter: drop-shadow(0 0 6px rgba(1,232,111,0.55)); transform: translateY(-1px) scale(1.08); }
.tabbar button::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(1,232,111,0.14);
  transform: translateX(-50%) scale(0.4);
  opacity: 0;
  transition: transform 0.25s var(--ease-spring), opacity 0.25s ease;
  z-index: -1;
}
.tabbar button.active::before { opacity: 1; transform: translateX(-50%) scale(1); }

main.content {
  flex: 1;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--gap) var(--gap) calc(var(--dock-height) + 40px);
}

@media (min-width: 720px) {
  main.content { max-width: 960px; padding-bottom: calc(var(--nav-height) + 40px); }
}

/* ---------- Sections ---------- */
.view { display: none; }
.view.active { display: block; animation: view-in 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes view-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* .social-subtabs is a second, independent instance of this same look
   (see static/js/social.js) — kept a different class from .subtabs so
   team.js's document.querySelectorAll(".subtabs button") never picks up
   Social's tab buttons and wires them to Team's subview-toggle logic. */
.subtabs, .social-subtabs {
  position: relative;
  display: flex;
  gap: 4px;
  background: var(--navy-raised);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: var(--gap);
  overflow-x: auto;
}
.subtabs-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: 0;
  background: var(--green);
  border-radius: 999px;
  box-shadow: var(--shadow-xs);
  transition: transform 0.32s var(--ease-spring), width 0.32s var(--ease-spring);
  z-index: 0;
  pointer-events: none;
}
.subtabs button, .social-subtabs button {
  position: relative;
  z-index: 1;
  flex: 1;
  white-space: nowrap;
  background: none;
  border: none;
  color: var(--chalk-dim);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s ease;
}
.subtabs button.active, .social-subtabs button.active { color: #04140c; }
.subview, .social-subview { display: none; }
.subview.active, .social-subview.active { display: block; animation: view-in 0.28s cubic-bezier(0.22, 1, 0.36, 1); }

.section-title {
  font-size: 15px;
  color: var(--chalk-dim);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.card {
  background: var(--navy-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--gap);
  margin-bottom: var(--gap);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.stat-block {
  background: var(--navy-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
  text-align: center;
}
.stat-block .value {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--green);
  transition: transform 0.2s ease;
  display: inline-block;
}
.stat-block .value.bump { animation: value-bump 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes value-bump { 30% { transform: scale(1.25); } }
.stat-block .label {
  font-size: 11px;
  color: var(--chalk-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.stat-icon {
  width: 24px;
  height: 24px;
  margin: 0 auto 6px;
  color: var(--green);
}
.stat-icon svg { width: 100%; height: 100%; display: block; }

/* Icon badge for the stadium/facilities upgrade cards on the Club tab —
   the stadium one visibly gains detail (extra tiers, floodlights, a roof)
   as its level rises, so upgrading reads as the ground actually growing. */
.upgrade-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 196, 107, 0.12);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  flex-shrink: 0;
}
.upgrade-card-icon svg { width: 25px; height: 25px; }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  overflow: hidden;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 15px;
  font-weight: 400;
  border: none;
  border-radius: var(--radius-sm);
  padding: 13px 18px;
  cursor: pointer;
  width: 100%;
  transition: transform 0.12s var(--ease-spring), opacity 0.15s ease, box-shadow 0.2s ease;
}
.btn:active { transform: scale(0.96); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn::after {
  content: "";
  position: absolute;
  left: var(--ripple-x, 50%);
  top: var(--ripple-y, 50%);
  width: 10px;
  height: 10px;
  background: rgba(255,255,255,0.55);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
}
.btn.rippling::after { animation: btn-ripple 0.55s ease-out; }
@keyframes btn-ripple {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0.55; }
  100% { transform: translate(-50%, -50%) scale(26); opacity: 0; }
}
.btn-primary {
  background: linear-gradient(135deg, #5cf5a0, var(--green) 55%, var(--green-dim));
  color: #04140c;
  box-shadow: 0 4px 14px rgba(1,232,111,0.25);
}
@media (hover: hover) { .btn-primary:hover { box-shadow: 0 6px 20px rgba(1,232,111,0.4); } }
.btn-secondary { background: transparent; color: var(--chalk); border: 1px solid var(--line); }
@media (hover: hover) { .btn-secondary:hover { border-color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.03); } }
.btn-danger { background: transparent; color: var(--danger); border: 1px solid rgba(230,88,79,0.4); }
.btn-block-row { display: flex; gap: 10px; }
.btn-block-row .btn { width: auto; flex: 1; }

/* ---------- Forms ---------- */
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 12px;
  color: var(--chalk-dim);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.field input {
  width: 100%;
  background: var(--navy);
  border: 1px solid var(--line);
  color: var(--chalk);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 15px;
  font-family: var(--font-body);
}
.field input:focus { border-color: var(--green); }

.error-text {
  color: var(--danger);
  font-size: 13px;
  margin: -6px 0 14px;
  min-height: 1em;
}
.help-text { color: var(--chalk-dim); font-size: 13px; margin-top: 6px; }

/* ---------- 3D card viewer (drag + phone-tilt) ---------- */
.card-3d-stage {
  perspective: 900px;
  display: flex;
  justify-content: center;
  padding: 6px 0 2px;
}
.card-3d {
  position: relative;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  touch-action: none;
  cursor: grab;
}
.card-3d.tilting { transition: none; cursor: grabbing; }
.card-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.45), transparent 55%);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.card-3d.tilting .card-shine, .card-3d:hover .card-shine { opacity: 1; }
/* Holo (iridescent) and metal-shine (bronze/silver/gold shiny) both got a
   pass here: the shine layer used to sit at a flat, always-on opacity
   with a big central white hotspot blended via color-dodge — an
   aggressive blend mode that blows anything near white straight to pure
   white. Combined with the hotspot defaulting to dead-centre (--mx/--my
   50%/50%, i.e. right over the name/stats), the card would wash out to
   an unreadable white blob before anyone even touched it. Fix: a much
   softer idle presence, a gentler highlight, and a dark vignette baked
   into the tier backgrounds below so the text always has something to
   sit on regardless of where the shine's hotspot lands. */
.card-3d.card-holo .card-shine {
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.28), transparent 50%),
    conic-gradient(from calc(var(--ry, 0deg) * 3), #ff2e63, #ff9f1c, #ffe45e, #19e68c, #1fa2ff, #8a2be2, #ff2e63);
  mix-blend-mode: color-dodge;
  opacity: 0.22;
  transition: opacity 0.3s ease;
}
.card-3d.card-holo.tilting .card-shine, .card-3d.card-holo:hover .card-shine { opacity: 0.55; }

/* Shiny (bronze/silver/gold) tiers: a metallic sweep tinted in their own
   colour — never the iridescent rainbow, which is reserved for the top
   tier. Idle-animated so the shine reads even before anyone touches the
   card, with a brighter boost on tilt/hover. */
.card-3d.card-metal-shine .card-shine {
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.4), transparent 50%),
    linear-gradient(
      115deg,
      transparent 22%,
      color-mix(in srgb, var(--tier-color, #fff) 60%, transparent) 38%,
      rgba(255,255,255,0.85) 48%,
      color-mix(in srgb, var(--tier-color, #fff) 60%, transparent) 58%,
      transparent 74%
    );
  background-size: 100% 100%, 240% 240%;
  background-position: 0 0, -70% -70%;
  opacity: 0.4;
  animation: metal-idle-sweep 3.4s ease-in-out infinite;
}
@keyframes metal-idle-sweep {
  0%, 15% { background-position: 0 0, -70% -70%; }
  55%, 100% { background-position: 0 0, 70% 70%; }
}
.card-3d.card-metal-shine.tilting .card-shine, .card-3d.card-metal-shine:hover .card-shine {
  opacity: 0.8;
  animation-play-state: paused;
}

.pack-grid { perspective: 700px; }
.reveal-card { position: relative; overflow: hidden; }

/* Tier background washes for the big card / reveal moment. Every shiny
   and iridescent variant gets a dark radial vignette (::after) baked in
   so the card content stays legible no matter how bright the shine
   layer above it gets — see the .card-holo/.card-metal-shine comment. */
.tier-bg-bronze { background: linear-gradient(160deg, #6b4520, #a9702f 60%, #7a4d21); }
.tier-bg-bronze_shiny, .tier-bg-silver_shiny, .tier-bg-gold_shiny, .tier-bg-iridescent { position: relative; }
.tier-bg-bronze_shiny::after, .tier-bg-silver_shiny::after, .tier-bg-gold_shiny::after, .tier-bg-iridescent::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(circle at 50% 38%, transparent 35%, rgba(5,8,14,0.45) 100%);
  pointer-events: none;
}
.tier-bg-bronze_shiny { background: linear-gradient(160deg, #7a5227, #c9974f 55%, #8a5f2e); }
.tier-bg-silver { background: linear-gradient(160deg, #565b61, #9fa6ad 55%, #6c7278); }
.tier-bg-silver_shiny { background: linear-gradient(160deg, #7c8388, #e5e8ea 50%, #9ba1a6); }
.tier-bg-gold { background: linear-gradient(160deg, #8a6c1f, #d4af37 55%, #a5822a); }
.tier-bg-gold_shiny { background: linear-gradient(160deg, #a3841f, #ffe793 50%, #d4af37); }
.tier-bg-iridescent {
  background: conic-gradient(from 180deg, #ff2e63, #ff9f1c, #ffe45e, #19e68c, #1fa2ff, #8a2be2, #ff2e63);
  background-size: 220% 220%;
  animation: holo-shift 7s linear infinite;
}
@keyframes holo-shift { to { background-position: 220% 50%; } }

.big-card {
  position: relative;
  overflow: hidden;
  width: min(78vw, 300px);
  border-radius: 20px;
  padding: 26px 18px 20px;
  text-align: center;
  color: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.18);
}
.big-card .content { position: relative; z-index: 1; }
.big-card .tier-badge { background: rgba(10,17,40,0.55); color: #fff; }
.big-card .big-overall { font-family: var(--font-display); font-size: 46px; line-height: 1; margin-top: 10px; text-shadow: 0 2px 10px rgba(0,0,0,0.4); }
.big-card .big-position { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.big-card .big-name { font-family: var(--font-display); font-size: 21px; margin: 10px 0 2px; text-shadow: 0 2px 8px rgba(0,0,0,0.35); }
.big-card .big-meta { font-size: 12.5px; opacity: 0.9; margin-bottom: 16px; }

.macro-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 6px;
  background: rgba(10,17,40,0.35);
  border-radius: 12px;
  padding: 12px 6px;
}
.macro-stat { display: flex; flex-direction: column; align-items: center; }
.macro-stat .macro-value { font-family: var(--font-display); font-size: 20px; }
.macro-stat .macro-label { font-size: 10px; letter-spacing: 0.06em; opacity: 0.85; }

.card-caption { text-align: center; color: var(--chalk-dim); font-size: 12px; margin-top: 10px; }

.stat-breakdown-group { margin-top: 14px; }
.stat-bar-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-bottom: 7px; }
.stat-bar-row .stat-name { width: 128px; flex-shrink: 0; color: var(--chalk-dim); }
.stat-bar-track { flex: 1; height: 6px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; }
.stat-bar-fill { height: 100%; background: var(--green); border-radius: 4px; }
.stat-bar-row .stat-num { width: 24px; text-align: right; font-family: var(--font-mono); color: var(--chalk); }

.tilt-hint {
  text-align: center;
  margin: -4px 0 14px;
}

.pixel-face {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
}
.player-headshot {
  display: block;
  border-radius: 8px;
  background: radial-gradient(circle at 50% 38%, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 70%);
}
.avatar-ring {
  position: relative;
  flex-shrink: 0;
  border-radius: 10px;
  padding: 2px;
  background: linear-gradient(160deg, var(--tier-color, var(--green)), transparent 70%);
}
.avatar-ring .pixel-face, .avatar-ring .player-headshot { border-radius: 8px; }
.big-card .avatar-ring {
  margin: 4px auto 10px;
  width: fit-content;
  padding: 3px;
  background: linear-gradient(160deg, rgba(255,255,255,0.85), rgba(255,255,255,0.15));
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.big-card .avatar-ring .pixel-face, .big-card .avatar-ring .player-headshot { border-radius: 10px; }

/* ---------- Pixel-art editors (crest + kits) ---------- */
.pixel-editor { display: flex; flex-direction: column; align-items: center; }
.pixel-grid-wrap {
  width: 100%;
  max-width: 280px;
  padding: 8px;
  background: repeating-conic-gradient(#1a2340 0% 25%, #141c34 0% 50%) 50% / 16px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
.pixel-grid {
  display: grid;
  width: 100%;
  touch-action: none;
  border-radius: 4px;
  overflow: hidden;
}
.pixel-cell {
  aspect-ratio: 1;
  background: transparent;
  cursor: pointer;
  outline: 1px solid rgba(255,255,255,0.04);
}
.pixel-cell.masked { pointer-events: none; outline: none; background: transparent !important; }
.pixel-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
  width: 100%;
}
.palette-swatch {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 2px solid var(--line);
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.15s ease;
}
.palette-swatch.active { border-color: var(--green); transform: scale(1.14); }
.palette-swatch.eraser {
  background:
    linear-gradient(45deg, transparent 46%, var(--danger) 48%, var(--danger) 52%, transparent 54%),
    var(--navy);
}

/* ---------- Formation pitch ---------- */
.pitch-wrap { width: 100%; }
.pitch {
  position: relative;
  width: 100%;
  aspect-ratio: 68 / 100;
  max-width: 360px;
  margin: 0 auto;
  background: repeating-linear-gradient(180deg, #12492f 0, #12492f 10%, #103f29 10%, #103f29 20%);
  border: 2px solid rgba(255,255,255,0.35);
  border-radius: 10px;
  overflow: hidden;
}
.pitch-circle {
  position: absolute;
  left: 50%; top: 50%;
  width: 30%; aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,0.35);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.pitch-line-half {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  background: rgba(255,255,255,0.35);
}
/* Live match viewer: a Three.js canvas (see match3d.js) mounts here in
   place of a flat 2D pitch. Sized like the old .pitch so the modal
   layout doesn't jump, but full-bleed (no inner padding) since the
   canvas draws its own turf, markings, and goal frames. touch-action:
   none hands drag/pinch entirely to OrbitControls instead of letting
   the page try to scroll underneath it. */
.pitch-3d {
  position: relative;
  width: 100%;
  aspect-ratio: 68 / 100;
  max-width: 360px;
  margin: 0 auto;
  border: 2px solid rgba(255,255,255,0.35);
  border-radius: 10px;
  overflow: hidden;
  background: #06090a;
  touch-action: none;
}
.pitch-3d canvas { display: block; width: 100%; height: 100%; }

/* Lineup builder: each slot is a wrapper (positioned) holding the tappable
   dot plus a name/role label below it, so the pitch doubles as a legible
   team-sheet rather than just anonymous markers. */
.pitch-slot-wrap {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.pitch-slot {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.5);
  background: rgba(10,17,40,0.72);
  color: var(--chalk);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, border-color 0.2s ease;
}
.pitch-slot:active { transform: scale(0.9); }
.pitch-slot.filled { background: var(--green); color: #04140c; border-color: #fff; }
.pitch-slot-role { opacity: 0.85; }
.pitch-slot-name {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--chalk);
  background: rgba(10,17,40,0.65);
  padding: 1px 6px;
  border-radius: 999px;
  white-space: nowrap;
  max-width: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ---------- Match viewer ---------- */
.match-score {
  text-align: center;
  font-family: var(--font-display);
  font-size: 34px;
  color: var(--green);
  margin-bottom: 12px;
  display: block;
}
.match-score.bump { animation: value-bump 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.match-feed {
  margin-top: 14px;
  max-height: 180px;
  overflow-y: auto;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.feed-line {
  font-size: 12.5px;
  color: var(--chalk-dim);
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  animation: view-in 0.25s ease;
}
.feed-line:last-child { border-bottom: none; }
.feed-line.goal { color: var(--green); font-weight: 700; }
.feed-line.halftime, .feed-line.fulltime, .feed-line.kickoff { color: var(--chalk); font-weight: 600; }

/* ---------- Picker rows (lineup slot selection) ---------- */
.picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease;
}
.picker-row:hover, .picker-row:active { background: rgba(255,255,255,0.05); }
.picker-ovr { font-family: var(--font-display); color: var(--green); width: 28px; text-align: center; }
.picker-name { flex: 1; font-weight: 600; font-size: 13.5px; }

/* ---------- Player card ---------- */
.player-card {
  position: relative;
  background: var(--navy-raised);
  border: 1px solid var(--line);
  border-left: 4px solid var(--tier-color, var(--green));
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease, border-color 0.18s ease;
  opacity: 0;
  animation: card-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.player-card:active { transform: scale(0.985); }
@media (hover: hover) {
  .player-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0,0,0,0.32);
    border-color: rgba(255,255,255,0.22);
  }
}
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.player-card .avatar-ring { width: 44px; height: 44px; }
.player-card .ovr {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--tier-color, var(--green));
  width: 38px;
  text-align: center;
  flex-shrink: 0;
}
.player-card .info { flex: 1; min-width: 0; }
.player-card .name { font-weight: 700; font-size: 15px; }
.player-card .meta {
  font-size: 12px;
  color: var(--chalk-dim);
  display: flex;
  gap: 8px;
  margin-top: 2px;
  flex-wrap: wrap;
  align-items: center;
}
.tier-badge {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  color: #04140c;
  background: var(--tier-color, var(--green));
}
.tier-badge.badge-iridescent {
  background: linear-gradient(120deg, #ff5f6d, #ffc371, #6dd5ed, #a463f2);
  background-size: 300% 100%;
  animation: badge-shimmer 3.5s linear infinite;
  color: #10101a;
}
@keyframes badge-shimmer { to { background-position: 300% 0; } }

.tier-badge.badge-shiny {
  position: relative;
  overflow: hidden;
  background: var(--tier-color, var(--green));
  animation: badge-halo 2.6s ease-in-out infinite;
}
.tier-badge.badge-shiny::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.4) 47%, rgba(255,255,255,0.98) 50%, rgba(255,255,255,0.4) 53%, transparent 60%);
  background-size: 260% 260%;
  animation: badge-sweep 2.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes badge-sweep {
  0% { background-position: -90% -90%; }
  40%, 100% { background-position: 190% 190%; }
}
@keyframes badge-halo {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tier-color, #fff) 55%, transparent); }
  50% { box-shadow: 0 0 5px 1px color-mix(in srgb, var(--tier-color, #fff) 55%, transparent); }
}

/* Pack reveal grid */
.pack-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 480px) { .pack-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px) { .pack-grid { grid-template-columns: repeat(4, 1fr); } }

.reveal-card {
  background: var(--navy-raised);
  border: 1px solid var(--line);
  border-top: 4px solid var(--tier-color, var(--green));
  border-radius: var(--radius-sm);
  padding: 14px 10px 12px;
  text-align: center;
  opacity: 0;
  transform: translateY(14px) scale(0.94);
  animation: reveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  cursor: pointer;
}
@keyframes reveal { to { opacity: 1; transform: none; } }
.reveal-card .avatar-ring { width: 52px; height: 52px; margin: 0 auto 8px; }
.reveal-card .ovr { font-family: var(--font-display); font-size: 26px; color: var(--tier-color, var(--green)); }
.reveal-card .pos { font-size: 11px; color: var(--chalk-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.reveal-card .name { font-size: 12.5px; font-weight: 700; margin: 4px 0; line-height: 1.2; }
/* Small cards (pack summary grid, squad grid) get the same idea as the
   big 3D card — a diagonal shimmer sweep — but kept to a safe `screen`
   blend at modest opacity instead of color-dodge, since there's no
   dark vignette layer here to protect the text underneath. */
.reveal-card.tier-iridescent-flair, .reveal-card.tier-shiny-flair { box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3); }
.reveal-card.tier-iridescent-flair::after, .reveal-card.tier-shiny-flair::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background-size: 260% 260%;
  animation: shimmer-sweep 2.8s ease-in-out infinite;
}
.reveal-card.tier-iridescent-flair::after {
  background-image: linear-gradient(
    115deg, transparent 30%,
    rgba(255, 95, 150, 0.35) 40%, rgba(255, 230, 120, 0.4) 46%, rgba(130, 220, 255, 0.4) 52%, rgba(190, 120, 255, 0.35) 58%,
    transparent 68%
  );
  opacity: 0.6;
}
.reveal-card.tier-shiny-flair::after {
  background-image: linear-gradient(
    115deg, transparent 32%,
    color-mix(in srgb, var(--tier-color, #fff) 70%, transparent) 46%,
    rgba(255,255,255,0.85) 50%,
    color-mix(in srgb, var(--tier-color, #fff) 70%, transparent) 54%,
    transparent 68%
  );
  opacity: 0.5;
}
@keyframes shimmer-sweep {
  0%, 15% { background-position: -60% -60%; }
  60%, 100% { background-position: 160% 160%; }
}

.pack-list { display: flex; flex-direction: column; gap: var(--gap); }

.pack-tease {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 20px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(1,232,111,0.12), transparent 60%),
    var(--navy-raised);
}
.pack-banner {
  display: block;
  width: 100%;
  max-height: 140px;
  object-fit: cover;
  border-radius: calc(var(--radius) - 4px);
  margin-bottom: 14px;
}
.pack-odds-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.pack-odds-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--chalk-dim);
  font-family: var(--font-mono);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 9px 3px 3px;
}
.pack-odds-chip .tier-badge { padding: 2px 7px; font-size: 10px; }
.pack-tease::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 0deg, transparent, rgba(1,232,111,0.08), transparent 30%);
  animation: pack-tease-spin 8s linear infinite;
  pointer-events: none;
}
@keyframes pack-tease-spin { to { transform: rotate(360deg); } }
.pack-tease > * { position: relative; z-index: 1; }
.pack-tease .badge-free {
  display: inline-block;
  background: var(--green);
  color: #04140c;
  font-family: var(--font-display);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
  animation: badge-pulse 2.2s ease-in-out infinite;
}
@keyframes badge-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(1,232,111,0.5); } 50% { box-shadow: 0 0 0 8px rgba(1,232,111,0); } }

/* ---------- Rip-pack intro (FX Logo Pack) ---------- */
/* A siege-style tear: the pack is two halves (.rip-flap-left/-right) split
   by a jagged vertical seam (complementary clip-path polygons, so at rest
   they interlock into what reads as one sealed pack). Swiping the seam
   sideways — either direction works, both just drive the same "tear
   progress" — peels both flaps apart from the centre with a bit of
   rotation, while a blurred, bright seam-glow bar and a scaling radial
   burst behind them sell "light escaping through a crack" rather than a
   flat colour wipe. The colour-peek layer tinted by the best tier pulled
   sits behind everything, so what's actually peeking through the crack is
   true rarity colour, not just decoration. Past the halfway mark on
   release the flaps fly apart the rest of the way into the existing
   sequential flip reveal; short of that, everything snaps back shut. */
.pack-tease-rip .pack-open-btn { background: linear-gradient(120deg, var(--green), #19e68c, var(--green)); background-size: 220% 100%; animation: rip-badge-sweep 3s linear infinite; }
@keyframes rip-badge-sweep { to { background-position: -220% 0; } }
.rip-stage {
  position: relative;
  height: 360px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy-raised);
  box-shadow: var(--shadow-md);
  touch-action: none;
  user-select: none;
  perspective: 700px;
}
.rip-color-peek {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,0.45), transparent 55%),
    linear-gradient(160deg, color-mix(in srgb, var(--tier-color, var(--green)) 55%, black), var(--tier-color, var(--green)) 55%, color-mix(in srgb, var(--tier-color, var(--green)) 45%, black));
  /* Invisible until the tear actually starts — at rest (--tear: 0) this
     must show nothing, so the rarity colour is never spoiled before the
     player swipes. It fades in together with the burst/seam-glow so the
     reveal reads as one continuous "light escaping through the crack". */
  opacity: var(--tear, 0);
}
.rip-color-peek::after {
  /* Light rays, hidden until a tear is underway (opacity driven by the
     --tear custom property the drag handler sets), sweeping slowly so
     the light looks alive rather than a static sunburst sticker. */
  content: "";
  position: absolute;
  inset: -20%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255,255,255,0.22) 0deg 4deg,
    transparent 4deg 16deg
  );
  mix-blend-mode: screen;
  opacity: calc(var(--tear, 0) * 0.8);
  animation: rip-rays-spin 9s linear infinite;
}
@keyframes rip-rays-spin { to { transform: rotate(360deg); } }
.rip-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,0.95), color-mix(in srgb, var(--tier-color, var(--green)) 70%, white) 35%, transparent 70%);
  transform: translate(-50%, -50%) scale(calc(0.15 + var(--tear, 0) * 1.1));
  opacity: calc(var(--tear, 0) * 0.9);
  filter: blur(6px);
}
.rip-seam-glow {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: calc(3px + var(--tear, 0) * 46px);
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--tier-color, var(--green)) 65%, white) 30%,
    #fff 50%,
    color-mix(in srgb, var(--tier-color, var(--green)) 65%, white) 70%,
    transparent
  );
  opacity: calc(var(--tear, 0) * 0.95);
  filter: blur(calc(2px + var(--tear, 0) * 5px));
}
.rip-flap {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(165deg, #0c1512, #142420 55%, #0a110e);
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform 0.4s var(--ease-out), opacity 0.3s ease;
  will-change: transform;
}
.rip-flap.dragging { transition: none; }
.rip-flap-inner {
  position: absolute;
  inset: 0;
}
.rip-pack-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130px;
  height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.5));
}
/* Complementary jagged seam down the middle — matched zigzags so the two
   flaps interlock seamlessly at rest (--tear: 0) and read as a torn edge
   once they separate. */
.rip-flap-left {
  clip-path: polygon(
    0 0, 51% 0, 48% 6%, 54% 11%, 47% 17%, 53% 23%, 46% 29%, 54% 35%,
    47% 41%, 53% 47%, 46% 53%, 54% 59%, 47% 65%, 53% 71%, 46% 77%,
    54% 83%, 48% 89%, 51% 94%, 49% 100%, 0 100%
  );
}
.rip-flap-right {
  clip-path: polygon(
    51% 0, 100% 0, 100% 100%, 49% 100%, 51% 94%, 48% 89%, 54% 83%,
    46% 77%, 53% 71%, 47% 65%, 54% 59%, 46% 53%, 53% 47%, 47% 41%,
    54% 35%, 46% 29%, 53% 23%, 47% 17%, 54% 11%, 48% 6%
  );
}
/* No separate clip on the logo itself: each flap already clips everything
   inside it (including the logo) to its own jagged polygon above, so the
   logo's visible edge automatically follows the exact same torn line as
   the flap — a single matched cut instead of this straight 50% cut
   fighting the jagged one and chewing up the wordmark. */
.rip-tear-hint {
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  width: 76%;
  height: 24px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 2px dashed rgba(245,245,240,0.35);
  cursor: grab;
  opacity: calc(1 - var(--tear, 0) * 1.6);
  transition: opacity 0.2s ease;
}
.rip-tear-hint.dragging { cursor: grabbing; }
.rip-tear-hint::before,
.rip-tear-hint::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border-left: 2px solid rgba(245,245,240,0.55);
  border-bottom: 2px solid rgba(245,245,240,0.55);
  animation: rip-hint-sway 1.4s ease-in-out infinite;
}
.rip-tear-hint::before {
  left: -2px;
  transform: translateY(-50%) rotate(45deg);
  animation-name: rip-hint-sway-left;
}
.rip-tear-hint::after {
  right: -2px;
  left: auto;
  transform: translateY(-50%) rotate(225deg);
  animation-name: rip-hint-sway-right;
}
@keyframes rip-hint-sway-left { 0%, 100% { transform: translateY(-50%) rotate(45deg) translateX(0); } 50% { transform: translateY(-50%) rotate(45deg) translateX(-6px); } }
@keyframes rip-hint-sway-right { 0%, 100% { transform: translateY(-50%) rotate(225deg) translateX(0); } 50% { transform: translateY(-50%) rotate(225deg) translateX(6px); } }

/* ---------- Sequential pack reveal ---------- */
/* A sticky header above the reveal stage: the close (X) and "Skip to end"
   controls live here, always in view, so closing or bailing out of the
   reveal never requires scrolling to find a button — whatever the pack
   size or where the person has scrolled to while browsing the summary. */
.reveal-top-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0 10px;
  background: linear-gradient(to bottom, var(--navy) 70%, transparent);
}
.reveal-top-bar .reveal-counter { order: 2; flex: 1; text-align: center; }
.btn-icon-close {
  order: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--chalk-dim);
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-icon-close:hover { background: rgba(255,255,255,0.14); color: var(--chalk); }
.btn.btn-sm {
  order: 3;
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 999px;
}
.reveal-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.reveal-counter { font-family: var(--font-mono); font-size: 13px; color: var(--chalk-dim); white-space: nowrap; }
.reveal-progress-track { flex: 1; height: 6px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; }
.reveal-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--pitch-light), var(--green));
  border-radius: 4px;
  width: 0%;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-stage {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 18px 0 22px;
  perspective: 1200px;
  touch-action: pan-y;
}
.reveal-stage.reveal-flash::after {
  content: "";
  position: absolute;
  inset: -10% -20%;
  background: radial-gradient(circle, rgba(255,255,255,0.35), transparent 65%);
  animation: reveal-flash-pulse 0.7s ease;
  pointer-events: none;
}
@keyframes reveal-flash-pulse { from { opacity: 1; } to { opacity: 0; } }

.flip-card { width: min(78vw, 300px); aspect-ratio: 300 / 430; cursor: pointer; }
.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 20px;
  overflow: hidden;
}
.flip-back {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, var(--navy-raised), var(--pitch) 160%);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 40px rgba(0,0,0,0.4);
  animation: flip-back-pulse 1.5s ease-in-out infinite;
}
@keyframes flip-back-pulse { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
.flip-back-logo {
  width: 84px;
  height: 84px;
  border-radius: 20px;
  filter: drop-shadow(0 6px 18px rgba(1,232,111,0.25));
}
.flip-front { transform: rotateY(180deg); }
.flip-front .big-card { width: 100%; height: 100%; border-radius: 20px; }

/* ---------- Player-detail card flip (2D stats <-> 3D kit model) ---------- */
.player-flip {
  width: min(78vw, 300px);
  aspect-ratio: 300 / 430;
  margin: 0 auto;
  perspective: 1400px;
}
.player-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.player-flip.flipped .player-flip-inner { transform: rotateY(180deg); }
.player-flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 20px;
  overflow: hidden;
}
.player-flip-front .card-3d-stage { padding: 0; height: 100%; }
.player-flip-back {
  transform: rotateY(180deg);
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,0.06), transparent 60%),
    linear-gradient(160deg, var(--navy-raised), var(--pitch) 160%);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(0,0,0,0.4);
}
.player-3d-stage {
  width: 100%;
  height: 100%;
}
.player-flip-btn {
  display: block;
  margin: 12px auto 0;
}

.reveal-nav { margin-top: 4px; }

.reveal-summary { animation: view-in 0.3s ease; }
.reveal-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 480px) { .reveal-summary-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px) { .reveal-summary-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Squad grid ---------- */
.squad-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.squad-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 480px) { .squad-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px) { .squad-grid { grid-template-columns: repeat(4, 1fr); } }

.squad-tile {
  background: var(--navy-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 10px 12px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  animation: card-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease, border-color 0.18s ease;
}
.squad-tile:active { transform: scale(0.97); }
@media (hover: hover) {
  .squad-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.28); border-color: rgba(255,255,255,0.2); }
}
.tile-avatar-wrap { position: relative; width: 56px; height: 56px; margin: 0 auto 8px; }
.tile-avatar-wrap .avatar-ring { width: 100%; height: 100%; }
.tile-ovr-badge {
  position: absolute;
  bottom: -4px;
  right: -6px;
  background: var(--tier-color, var(--green));
  color: #04140c;
  font-family: var(--font-display);
  font-size: 12px;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--navy-raised);
}
.squad-tile .tile-name {
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.squad-tile .tile-meta {
  font-size: 10.5px;
  color: var(--chalk-dim);
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.squad-tile .tile-listed { color: var(--green); font-size: 10px; margin-top: 5px; font-weight: 600; }

/* ---------- Squad filters, grouping, trade-up ---------- */
.squad-filters { margin-bottom: 14px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; }
.chip {
  border: 1px solid var(--line);
  background: var(--navy-raised);
  color: var(--chalk-dim);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.chip[data-filter-tier] { border-color: color-mix(in srgb, var(--chip-color) 45%, var(--line)); }
.chip.active {
  background: var(--chip-color, var(--green));
  border-color: var(--chip-color, var(--green));
  color: #04140c;
}
.squad-group-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--chalk-dim);
  cursor: pointer;
  width: fit-content;
}
.squad-group-toggle input { width: 15px; height: 15px; accent-color: var(--green); }

.squad-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 14px;
  margin: 18px 0 10px;
}
.squad-group-header:first-child { margin-top: 0; }
.squad-group-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tier-color); flex-shrink: 0; }

.squad-tile.tradeup-mode { cursor: pointer; }
.squad-tile.tradeup-mode.disabled { opacity: 0.4; cursor: not-allowed; }
.squad-tile.selected { border-color: var(--green); box-shadow: 0 0 0 2px rgba(1,232,111,0.35); }
.tile-select-check {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--navy-raised);
  color: transparent;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.squad-tile.selected .tile-select-check {
  background: var(--green);
  border-color: var(--green);
  color: #04140c;
}

.tradeup-bar {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: var(--gap);
  margin-bottom: 14px;
}
.tradeup-bar #tradeup-selection-text { font-size: 13px; color: var(--chalk-dim); }

/* Marketplace listing row */
.listing-row {
  background: var(--navy-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
  opacity: 0;
  animation: card-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.listing-row .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.listing-row .prices { display: flex; gap: 14px; margin-top: 10px; font-family: var(--font-mono); font-size: 13px; }
.listing-row .prices .green { color: var(--green); }
.listing-row .timer { font-size: 11px; color: var(--chalk-dim); margin-top: 6px; }

/* ---------- Daily reward card ---------- */
.daily-reward-card {
  background: linear-gradient(160deg, var(--navy-raised), rgba(20,99,69,0.35));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: var(--gap);
  margin-bottom: var(--gap);
  box-shadow: var(--shadow-sm);
}
.daily-reward-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.streak-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  background: rgba(1,232,111,0.12);
  border: 1px solid rgba(1,232,111,0.35);
  padding: 3px 9px;
  border-radius: 999px;
}
.daily-reward-pips { display: flex; gap: 6px; }
.reward-pip {
  flex: 1;
  aspect-ratio: 1;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--chalk-dim);
  transition: transform 0.15s var(--ease-spring), background 0.2s ease, border-color 0.2s ease;
}
.reward-pip.completed { background: var(--pitch-light); border-color: transparent; color: var(--chalk); }
.reward-pip.available {
  border-color: var(--green);
  color: var(--green);
  animation: pip-pulse 1.6s ease-in-out infinite;
}
@keyframes pip-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(1,232,111,0.4); }
  50% { box-shadow: 0 0 0 5px rgba(1,232,111,0); }
}

/* ---------- Next objectives ---------- */
.objective-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--navy-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
  opacity: 0;
  animation: card-in 0.35s var(--ease-out) forwards;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.objective-card:hover, .objective-card:active { border-color: rgba(1,232,111,0.3); background: var(--pitch); }

/* A brief glow-and-settle pulse on whatever "Next up" routed you to —
   a button, a card, a whole list — so the destination is unmistakable
   even when the tab switch itself was instant. Self-removing: the JS
   that applies this strips the class once the animation finishes. */
.jump-target-highlight {
  animation: jump-target-pulse 1.6s ease-out;
  border-radius: var(--radius-sm);
}
@keyframes jump-target-pulse {
  0% { box-shadow: 0 0 0 0 rgba(1,232,111,0.65); }
  60% { box-shadow: 0 0 0 14px rgba(1,232,111,0); }
  100% { box-shadow: 0 0 0 0 rgba(1,232,111,0); }
}
.objective-marker {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  margin-top: 6px;
  flex-shrink: 0;
  box-shadow: 0 0 8px 1px rgba(1,232,111,0.5);
}
.objective-title { font-weight: 700; font-size: 14px; }
.objective-desc { font-size: 12.5px; color: var(--chalk-dim); margin-top: 2px; }

/* ---------- Achievements ---------- */
.achievements-strip-card { margin-bottom: var(--gap); }
.achievements-strip-head { display: flex; align-items: center; justify-content: space-between; }
.link-btn {
  background: none;
  border: none;
  color: var(--green);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
}
.achievements-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 8px;
  cursor: pointer;
}
.achievement-badge {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line);
  color: var(--chalk-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s var(--ease-spring), box-shadow 0.15s ease;
}
.achievement-badge:active { transform: scale(0.92); }
@media (hover: hover) {
  .achievement-badge:hover { box-shadow: 0 0 0 1px var(--green); }
}
.achievement-badge svg { width: 21px; height: 21px; }
.achievement-badge.unlocked {
  background: linear-gradient(135deg, #5cf5a0, var(--green));
  color: #04140c;
  border-color: transparent;
  box-shadow: var(--shadow-glow-green);
}
.achievement-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  opacity: 0.55;
}
.achievement-row.unlocked { opacity: 1; }
.achievement-row-icon {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: var(--chalk-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.achievement-row-icon svg { width: 15px; height: 15px; }
.achievement-row.unlocked .achievement-row-icon {
  background: var(--green);
  color: #04140c;
}
.achievement-row-name { font-weight: 700; font-size: 13.5px; }

/* ---------- Live news feed (Home) ---------- */
/* Platform-wide transfer/match activity — real managers and the seeded
   bot clubs alike (app/services/bot_activity.py) — polled by app.js
   every few seconds while Home is the active view. A fixed-height,
   internally-scrolling list rather than one that grows the page: new
   rows slide in at the top and the oldest rows past NEWS_MAX_ROWS are
   dropped from the DOM (see app.js), so this stays cheap indefinitely
   regardless of how long the tab stays open.

   Starts collapsed to a single preview line (latest headline, kept in
   sync on every poll even while collapsed) and expands to the full
   scrollable list on click — polling never stops either way, only the
   card's height changes. */
.news-ticker-card {
  background: linear-gradient(160deg, var(--navy-raised), rgba(4,154,84,0.16));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: var(--gap);
  margin-bottom: var(--gap);
  box-shadow: var(--shadow-sm);
}
.news-ticker-head {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.news-ticker-card:not(.collapsed) .news-ticker-head { margin-bottom: 10px; }
.news-ticker-title {
  font-size: 15px;
  color: var(--chalk-dim);
  flex-shrink: 0;
}
.news-ticker-preview {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--chalk-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.news-ticker-card:not(.collapsed) .news-ticker-preview { display: none; }
.news-ticker-chevron {
  flex-shrink: 0;
  color: var(--chalk-dim);
  transition: transform 0.2s var(--ease-out);
}
.news-ticker-card:not(.collapsed) .news-ticker-chevron { transform: rotate(180deg); }
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(1,232,111,0.6);
  flex-shrink: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .live-dot { animation: live-dot-pulse 2s ease-out infinite; }
}
@keyframes live-dot-pulse {
  0% { box-shadow: 0 0 0 0 rgba(1,232,111,0.55); }
  70% { box-shadow: 0 0 0 8px rgba(1,232,111,0); }
  100% { box-shadow: 0 0 0 0 rgba(1,232,111,0); }
}
.news-ticker-card.collapsed .news-ticker-list {
  max-height: 0;
  overflow: hidden;
}
.news-ticker-list {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column-reverse; /* newest row (appended last) renders at the top */
  transition: max-height 0.25s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .news-ticker-list { transition: none; }
}
.news-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line);
}
.news-ticker-list > .news-row:first-child { border-bottom: none; }
.news-row .news-headline { font-size: 13px; font-weight: 600; color: var(--chalk); }
.news-row .news-headline .news-icon { color: var(--green); margin-right: 5px; }
.news-row .news-detail-line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  color: var(--chalk-dim);
}
@media (prefers-reduced-motion: no-preference) {
  .news-row.news-row-enter {
    animation: news-row-in 0.4s var(--ease-out) both;
  }
}
@keyframes news-row-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Activity feed ---------- */
.activity-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.activity-row:last-child { border-bottom: none; }
.activity-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.activity-dot.activity-match { background: var(--green); }
.activity-dot.activity-sale { background: var(--ok); }
.activity-text { flex: 1; font-size: 13px; }
.activity-time { font-size: 11px; color: var(--chalk-dim); white-space: nowrap; }

/* ---------- Rivalry ---------- */
.rivalry-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--chalk-dim);
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--chalk-dim);
}
.empty-state::before {
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  border-radius: 50%;
  border: 2px dashed var(--line);
}

/* ---------- Skeleton loading placeholders ---------- */
.skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  0% { background-position: -60% 0; }
  100% { background-position: 160% 0; }
}
.skeleton-tile { aspect-ratio: 1 / 1.15; }
.skeleton-row { height: 78px; margin-bottom: 10px; }
.skeleton-line { height: 14px; margin-bottom: 8px; }

/* ---------- Sparkle burst (rare pack pulls) ---------- */
.sparkle-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, var(--green) 70%);
  box-shadow: 0 0 6px 1px rgba(255,255,255,0.7);
  pointer-events: none;
  animation: sparkle-fly 0.8s ease-out forwards;
}
@keyframes sparkle-fly {
  0% { transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--distance)) scale(0.2); opacity: 0; }
}

/* Toasts */
#toast-root {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(92vw, 420px);
}
.toast {
  background: var(--navy-raised);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ok);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 13.5px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  animation: toast-in 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.toast.closing { animation: toast-out 0.25s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-14px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-10px) scale(0.97); } }
.toast.error { border-left-color: var(--danger); }

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(10, 17, 40, 0.75);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 90;
  animation: backdrop-in 0.22s ease;
}
.modal-backdrop.closing { animation: backdrop-out 0.2s ease forwards; }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes backdrop-out { to { opacity: 0; } }
@media (min-width: 600px) { .modal-backdrop { align-items: center; } }
.modal {
  background: var(--navy-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 20px;
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  animation: modal-in 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.modal-backdrop.closing .modal { animation: modal-out 0.2s ease forwards; }
@keyframes modal-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes modal-out { to { opacity: 0; transform: translateY(18px); } }
@media (min-width: 600px) {
  .modal { border-radius: var(--radius); }
  @keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } }
}

/* Auth / landing */
.landing {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% -10%, rgba(20,99,69,0.55), transparent 55%),
    radial-gradient(circle at 100% 110%, rgba(1,232,111,0.10), transparent 45%),
    var(--navy);
}
.landing-inner { width: 100%; max-width: 400px; margin: 0 auto; }
.landing .brand-hero {
  font-size: 40px;
  line-height: 1;
  text-align: center;
  margin-bottom: 6px;
}
.landing .tagline {
  text-align: center;
  color: var(--chalk-dim);
  font-size: 14px;
  margin-bottom: 28px;
}
.auth-tabs { display: flex; margin-bottom: 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.auth-tabs button {
  flex: 1; background: none; border: none; color: var(--chalk-dim);
  padding: 10px; font-family: var(--font-display); letter-spacing: 0.03em; cursor: pointer;
}
.auth-tabs button.active { background: var(--green); color: #04140c; }

.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(0,0,0,0.25);
  border-top-color: #04140c;
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.7s linear infinite;
  vertical-align: -3px;
  margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------- onboarding wizard ---------- */
.onboarding-topbar { justify-content: center; }
.onboarding-content {
  max-width: 480px;
  margin: 0 auto;
  padding: 28px var(--gap) 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.onboarding-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 4px;
}
.onboarding-step {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--chalk-dim);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.onboarding-step.active { background: var(--green); border-color: var(--green); color: #04140c; }
.onboarding-step.done { background: var(--ok); border-color: var(--ok); color: #06170f; }
.onboarding-step-line { width: 28px; height: 2px; background: var(--line); }
.onboarding-lede { color: var(--chalk-dim); font-size: 14px; line-height: 1.5; margin: 0 0 4px; }
.onboarding-editor-card { display: flex; justify-content: center; padding: 18px; }
.onboarding-nav {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.onboarding-nav .btn { flex: 1; }
#onboarding-back-btn { flex: 0 0 96px; }

/* ---------- Social: friends, requests, trades ---------- */
.pending-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--danger);
  margin-left: 5px;
  vertical-align: 2px;
}
.tabbar button .pending-dot { position: absolute; top: 4px; right: calc(50% - 16px); margin-left: 0; }

.friend-search-results { margin-bottom: 4px; }
.friend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--navy-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.friend-row-info { flex: 1; min-width: 0; }
.friend-row-name { font-weight: 700; font-size: 14px; }
.friend-row-meta { color: var(--chalk-dim); font-size: 12px; margin-top: 2px; }
.friend-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.friend-row-actions .btn { width: auto; padding: 8px 12px; font-size: 12px; }

/* Read-only pitch used for a friend's starting XI — same visual language
   as the lineup builder's pitch, but slots open a player card instead of
   a squad picker, and there's no "empty slot" fallback plus label. */
.pitch-slot.readonly { cursor: pointer; }
.pitch-slot.empty { background: rgba(10,17,40,0.4); opacity: 0.6; cursor: default; }

/* Trade builder + trade offer display */
.trade-card {
  background: var(--navy-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.trade-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.trade-card-title { font-weight: 700; font-size: 13.5px; }
.trade-card-status {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
}
.trade-card-status.pending { color: var(--green); background: rgba(1,232,111,0.12); }
.trade-card-status.accepted { color: var(--ok); background: rgba(74,209,153,0.12); }
.trade-card-status.declined, .trade-card-status.cancelled { color: var(--chalk-dim); background: rgba(255,255,255,0.06); }
.trade-sides { display: flex; gap: 10px; }
.trade-side { flex: 1; min-width: 0; }
.trade-side-label { font-size: 10.5px; color: var(--chalk-dim); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 4px; }
.trade-side-coins { font-family: var(--font-mono); color: var(--green); font-size: 12.5px; margin-bottom: 4px; }
.trade-player-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 3px 0;
}
.trade-player-chip .ovr { font-family: var(--font-mono); color: var(--green); width: 20px; flex-shrink: 0; text-align: right; }
.trade-player-chip .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trade-card-message { font-size: 12px; color: var(--chalk-dim); font-style: italic; margin-top: 8px; }
.trade-card-actions { display: flex; gap: 8px; margin-top: 10px; }
.trade-card-actions .btn { width: auto; flex: 1; font-size: 12.5px; padding: 8px; }

/* Trade-builder modal: two scrollable squad pickers (mine vs theirs) */
.trade-builder-col { margin-bottom: 16px; }
.trade-builder-label { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.trade-builder-coin-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.trade-builder-coin-row input {
  width: 100%;
  background: var(--navy);
  border: 1px solid var(--line);
  color: var(--chalk);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--font-mono);
}
.trade-builder-squad {
  max-height: 32vh;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.trade-pick-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  transition: background 0.15s ease;
}
.trade-pick-row:last-child { border-bottom: none; }
.trade-pick-row:hover, .trade-pick-row:active { background: rgba(255,255,255,0.05); }
.trade-pick-row.selected { background: rgba(1,232,111,0.12); }
.trade-pick-row .check {
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--line);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.trade-pick-row.selected .check { background: var(--green); border-color: var(--green); }
.trade-pick-row.selected .check::after { content: ""; width: 5px; height: 9px; border: solid #04140c; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px,-1px); }

/* ---------- Fitness ---------- */
.fitness-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#fitness-value, #matches-fitness-value { font-family: var(--font-mono); white-space: nowrap; }
#fitness-fill { background: linear-gradient(90deg, #2a9df4, var(--green)); }
#fitness-watch-ad-btn:disabled, #matches-fitness-ad-btn:disabled { opacity: 0.55; cursor: default; }

/* Matches-tab fitness bar — a taller, segmented gauge rather than the
   thin Home-tab progress line, since this is the number a manager checks
   right before deciding whether they can even play; colour shifts from
   green through amber to red as it drains so the state reads at a
   glance, and a low reading gets a slow pulse to actually draw the eye
   rather than just sitting there a different colour. */
.fitness-bar-lg {
  position: relative;
  height: 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  overflow: hidden;
  margin-top: 10px;
}
.fitness-bar-lg-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2a9df4, var(--green));
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
  position: relative;
}
/* Faint vertical ticks marking each whole fitness point, so the bar
   reads as a discrete 0–10 gauge rather than an ambiguous percentage. */
.fitness-bar-lg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(10% - 1px),
    rgba(6,9,10,0.35) calc(10% - 1px),
    rgba(6,9,10,0.35) 10%
  );
  pointer-events: none;
}
.fitness-bar-lg.level-mid .fitness-bar-lg-fill { background: linear-gradient(90deg, var(--warn), #ffd23f); }
.fitness-bar-lg.level-low .fitness-bar-lg-fill { background: linear-gradient(90deg, var(--danger), #ff8c42); animation: fitness-pulse 1.6s ease-in-out infinite; }
@keyframes fitness-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

/* ---------- Matches tab: record strip, Play Now, filter tabs ---------- */
.match-record-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: var(--gap);
}
.match-record-row .stat-block { padding: 10px 6px; }
.match-record-row .value { font-size: 20px; }

.play-now-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: linear-gradient(135deg, rgba(1,232,111,0.16), var(--navy-raised) 60%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 16px var(--gap);
  margin-bottom: var(--gap);
}
.play-now-glow {
  position: absolute;
  top: -40%;
  right: -15%;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(1,232,111,0.35), transparent 70%);
  pointer-events: none;
}
.play-now-body { position: relative; z-index: 1; }
.play-now-title {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.02em;
  margin: 0 0 2px;
}
.play-now-card .play-now-btn { position: relative; z-index: 1; width: auto; padding: 13px 26px; flex-shrink: 0; }

/* A second, independent pill-tab row style (own class, not .subtabs) so
   team.js's generic .subtabs wiring — which toggles .subview panels by
   data-subtab id — never picks these up; same reasoning as
   .social-subtabs elsewhere. No sliding indicator here, just a flat
   active state, wired by small dedicated handlers in team.js. */
.match-filter-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  overflow-x: auto;
}
.match-filter-tabs button {
  flex: 1;
  white-space: nowrap;
  background: var(--navy-raised);
  border: 1px solid var(--line);
  color: var(--chalk-dim);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.match-filter-tabs button.active { color: #04140c; background: var(--green); border-color: var(--green); }

/* Opponent card additions — BOT tag and a small result-letter badge used
   in both the opponent list (rival record) and match history. */
.badge-pill {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--chalk-dim);
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--line);
}
.result-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  font-family: var(--font-display);
  font-size: 14px;
  flex-shrink: 0;
}
.result-badge.result-w { background: rgba(63,174,106,0.18); color: var(--ok); }
.result-badge.result-l { background: rgba(230,88,79,0.18); color: var(--danger); }
.result-badge.result-d { background: rgba(255,255,255,0.08); color: var(--chalk-dim); }