/* =====================================================================
   FPL Analyzer — Account section
     • ProfileCard (ported from the React Bits component to vanilla DOM,
       re-themed from its blue/purple palette to FPL purple/green)
     • Favourite club picker, FPL ID save, Follow-us-on-X
     • GitHub-style contribution heatmap in FPL greens
   ===================================================================== */

/* ─── ProfileCard ───────────────────────────────────────────────────── */

.pc-card-wrapper {
  --pointer-x: 50%;
  --pointer-y: 50%;
  --pointer-from-center: 0;
  --pointer-from-top: 0.5;
  --pointer-from-left: 0.5;
  --card-opacity: 0;
  --rotate-x: 0deg;
  --rotate-y: 0deg;
  --background-x: 50%;
  --background-y: 50%;
  --grain: none;
  --icon: none;
  --behind-glow-color: rgba(0, 255, 135, 0.34);
  --behind-glow-size: 55%;
  --inner-gradient: linear-gradient(145deg, #18181b66 0%, #00ff871f 100%);
  /* FPL-flavoured holographic pillars: greens/cyans instead of rainbow */
  --sunpillar-1: hsl(156, 100%, 70%);
  --sunpillar-2: hsl(170, 100%, 68%);
  --sunpillar-3: hsl(186, 100%, 70%);
  --sunpillar-4: hsl(280, 90%, 74%);
  --sunpillar-5: hsl(310, 90%, 72%);
  --sunpillar-6: hsl(140, 100%, 72%);
  --card-radius: 22px;

  perspective: 500px;
  transform: translate3d(0, 0, 0.1px);
  position: relative;
  touch-action: none;
  width: 100%;
  max-width: 400px;
}

.pc-behind {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--pointer-x) var(--pointer-y),
      var(--behind-glow-color) 0%, transparent var(--behind-glow-size));
  filter: blur(50px) saturate(1.1);
  opacity: calc(0.8 * var(--card-opacity));
  transition: opacity 200ms ease;
}

.pc-card-wrapper:hover,
.pc-card-wrapper.active { --card-opacity: 1; }

.pc-card-shell { position: relative; z-index: 1; }

.pc-card {
  /* Taller and less narrow than the source component. At the original
     420px x 0.718 the card resolved to ~301px wide, which truncated longer
     handles and squeezed the status text in the info bar. */
  height: 520px;
  display: grid;
  aspect-ratio: 0.77;
  border-radius: var(--card-radius);
  position: relative;
  background-blend-mode: color-dodge, normal, normal, normal;
  box-shadow: rgba(0, 0, 0, 0.8) calc((var(--pointer-from-left) * 10px) - 3px)
              calc((var(--pointer-from-top) * 20px) - 6px) 20px -5px;
  transition: transform 1s ease;
  transform: translateZ(0) rotateX(0deg) rotateY(0deg);
  background: rgba(0, 0, 0, 0.9);
  backface-visibility: hidden;
  overflow: hidden;
}

.pc-card.active {
  transition: none;
  transform: translateZ(0) rotateX(var(--rotate-y)) rotateY(var(--rotate-x));
}

.pc-card-shell.entering .pc-card { transition: transform 180ms ease-out; }

.pc-card * {
  display: grid;
  grid-area: 1/-1;
  border-radius: var(--card-radius);
  pointer-events: none;
}

.pc-inside {
  inset: 0;
  position: absolute;
  background-image: var(--inner-gradient);
  background-color: rgba(11, 0, 19, 0.97);
  transform: none;
}

.pc-shine {
  mask-image: var(--icon);
  mask-mode: luminance;
  mask-repeat: repeat;
  mask-size: 150%;
  mask-position: top calc(200% - (var(--background-y) * 5)) left calc(100% - var(--background-x));
  transition: filter 0.8s ease;
  /* Dialled well back from the source component — the full-strength holo
     sheen washed the card out and made the name/monogram hard to read. */
  filter: brightness(0.38) contrast(1.15) saturate(0.30) opacity(0.26);
  animation: holo-bg 18s linear infinite;
  mix-blend-mode: color-dodge;
}

.pc-shine,
.pc-shine::after {
  --space: 5%;
  --angle: -45deg;
  transform: translate3d(0, 0, 1px);
  overflow: hidden;
  z-index: 3;
  background-size: cover;
  background-position: center;
  background-image:
    repeating-linear-gradient(0deg,
      var(--sunpillar-1) calc(var(--space) * 1), var(--sunpillar-2) calc(var(--space) * 2),
      var(--sunpillar-3) calc(var(--space) * 3), var(--sunpillar-4) calc(var(--space) * 4),
      var(--sunpillar-5) calc(var(--space) * 5), var(--sunpillar-6) calc(var(--space) * 6),
      var(--sunpillar-1) calc(var(--space) * 7)),
    repeating-linear-gradient(var(--angle),
      #0a0a0b 0%, #8a8a8e 3.8%, hsl(156, 29%, 66%) 4.5%,
      #8a8a8e 5.2%, #0a0a0b 10%, #0a0a0b 12%),
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 0%, 0.1) 12%, hsla(0, 0%, 0%, 0.15) 20%, hsla(0, 0%, 0%, 0.25) 120%);
  background-position: 0 var(--background-y), var(--background-x) var(--background-y), center;
  background-blend-mode: color, hard-light;
  background-size: 500% 500%, 300% 300%, 200% 200%;
  background-repeat: repeat;
}

.pc-shine::before,
.pc-shine::after {
  content: '';
  background-position: center;
  background-size: cover;
  grid-area: 1/1;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.pc-card.active .pc-shine {
  filter: brightness(0.52) contrast(1.25) saturate(0.42) opacity(0.4);
  animation-play-state: paused;
}

.pc-card.active .pc-shine::before,
.pc-card.active .pc-shine::after { opacity: 1; }

.pc-shine::before {
  background-image:
    linear-gradient(45deg, var(--sunpillar-4), var(--sunpillar-5), var(--sunpillar-6),
      var(--sunpillar-1), var(--sunpillar-2), var(--sunpillar-3)),
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), hsl(0, 0%, 70%) 0%, hsla(0, 0%, 30%, 0.2) 90%),
    var(--grain);
  background-size: 250% 250%, 100% 100%, 220px 220px;
  background-position: var(--pointer-x) var(--pointer-y), center,
    calc(var(--pointer-x) * 0.01) calc(var(--pointer-y) * 0.01);
  background-blend-mode: color-dodge;
  /* Source peaked at 2x brightness under the cursor; halved so hovering
     highlights the card instead of blowing it out. */
  filter: brightness(calc(1.05 - (var(--pointer-from-center) * 0.35)))
    contrast(calc(var(--pointer-from-center) + 1.3))
    saturate(calc(0.35 + var(--pointer-from-center) * 0.5));
  mix-blend-mode: luminosity;
  opacity: 0.55;
}

.pc-shine::after {
  background-position: 0 var(--background-y),
    calc(var(--background-x) * 0.4) calc(var(--background-y) * 0.5), center;
  background-size: 200% 300%, 700% 700%, 100% 100%;
  mix-blend-mode: difference;
  filter: brightness(0.8) contrast(1.5);
}

.pc-glare {
  transform: translate3d(0, 0, 1.1px);
  overflow: hidden;
  background-image: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsl(156, 22%, 52%) 12%, hsla(280, 40%, 16%, 0.85) 90%);
  mix-blend-mode: overlay;
  filter: brightness(0.5) contrast(1.05);
  opacity: 0.6;
  z-index: 4;
}

.pc-avatar-content { mix-blend-mode: luminosity; overflow: visible; backface-visibility: hidden; }

.pc-avatar-content .avatar {
  width: 100%;
  position: absolute;
  left: 50%;
  transform-origin: 50% 100%;
  transform: translateX(calc(-50% + (var(--pointer-from-left) - 0.5) * 6px)) translateZ(0)
    scaleY(calc(1 + (var(--pointer-from-top) - 0.5) * 0.02))
    scaleX(calc(1 + (var(--pointer-from-left) - 0.5) * 0.01));
  bottom: -1px;
  backface-visibility: hidden;
  will-change: transform;
  transition: transform 120ms ease-out;
}

/* Monogram fallback when the user has no avatar image */
.pc-monogram {
  position: absolute;
  inset: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 6.5rem;
  font-weight: 800;
  /* The parent uses mix-blend-mode: luminosity, so this reads as a grey —
     keep it low so the monogram sits behind the text instead of glaring. */
  color: rgba(255, 255, 255, 0.16);
  letter-spacing: -2px;
  z-index: 1;
  padding-bottom: 60px;
}

.pc-user-info {
  position: absolute;
  --ui-inset: 14px;
  bottom: var(--ui-inset);
  left: var(--ui-inset);
  right: var(--ui-inset);
  z-index: 2;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 10px 12px;
  pointer-events: auto;
}

.pc-user-details { display: flex !important; align-items: center; gap: 10px; min-width: 0; }

.pc-mini-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
  display: flex !important; align-items: center; justify-content: center;
  background: rgba(0, 255, 135, 0.14);
  font-weight: 800; font-size: 0.85rem; color: var(--pl-green, #00ff87);
}

.pc-mini-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.pc-user-text { display: flex !important; align-items: flex-start; flex-direction: column; gap: 5px; min-width: 0; }

.pc-handle {
  font-size: 0.82rem; font-weight: 600; color: rgba(255, 255, 255, 0.92); line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 165px;
}

/* nowrap stops a long status ("ID 1541234") from breaking one character per
   line when the info bar is tight. */
.pc-status {
  font-size: 0.72rem; color: rgba(255, 255, 255, 0.7); line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 165px;
}

.pc-contact-btn {
  border: 1px solid rgba(0, 255, 135, 0.4) !important;
  background: rgba(0, 255, 135, 0.14) !important;
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--pl-green, #00ff87) !important;
  -webkit-text-fill-color: var(--pl-green, #00ff87);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  pointer-events: auto;
}

.pc-contact-btn:hover {
  background: var(--pl-green, #00ff87) !important;
  color: #06130d !important;
  -webkit-text-fill-color: #06130d;
  transform: translateY(-1px);
}

.pc-content:not(.pc-avatar-content) {
  max-height: 100%;
  overflow: hidden;
  text-align: center;
  position: relative;
  transform: translate3d(calc(var(--pointer-from-left) * -6px + 3px),
    calc(var(--pointer-from-top) * -6px + 3px), 0.1px);
  z-index: 5;
  mix-blend-mode: luminosity;
}

.pc-details {
  width: 100%; position: absolute; top: 2em;
  display: flex !important; flex-direction: column;
  padding: 0 18px; box-sizing: border-box;
}

.pc-details h3 {
  font-weight: 700; margin: 0 0 4px; font-size: 1.85rem; line-height: 1.12;
  /* Wrap rather than overflow — full names are long. */
  white-space: normal; overflow-wrap: break-word;
  background-image: linear-gradient(to bottom, #f2f2f2, #9fe9c4);
  -webkit-text-fill-color: transparent; background-clip: text; -webkit-background-clip: text;
}

.pc-details p {
  font-weight: 600; position: relative; top: 0; font-size: 0.85rem;
  margin: 0 auto; max-width: 100%;
  white-space: normal; overflow-wrap: break-word;
  background-image: linear-gradient(to bottom, #e6e6e6, #6fb894);
  -webkit-text-fill-color: transparent; background-clip: text; -webkit-background-clip: text;
}

@keyframes holo-bg {
  0%   { background-position: 0 var(--background-y), 0 0, center; }
  100% { background-position: 0 var(--background-y), 90% 90%, center; }
}

/* ─── Account layout ────────────────────────────────────────────────── */

.acct-grid {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  width: 100%;
  min-width: 0;
}

/* Grid and flex items otherwise use min-width:auto. A populated, no-wrap club
   row then becomes the grid track's intrinsic width and pushes the entire
   Account column off-screen on mobile. Keep every container shrinkable while
   leaving the club row and heatmap themselves horizontally scrollable. */
.acct-grid > *,
.acct-grid > * > *,
.acct-panel,
.acct-field,
.acct-clubs,
.hm-wrap {
  min-width: 0;
  max-width: 100%;
}

.acct-panel {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 18px;
  width: 100%;
}

.acct-panel h3 {
  font-size: 0.72rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted, #7a5a82);
  margin: 0 0 14px;
  font-weight: 700;
}

.acct-field { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; width: 100%; }

.acct-input {
  flex: 1 1 180px;
  min-width: 150px;
  padding: 11px 14px;
  border-radius: 9px;
  font-size: 0.9rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  outline: none;
  max-width: 100%;
}

.acct-input:focus-visible { border-color: var(--pl-green, #00ff87); }

.acct-hint { font-size: 0.76rem; color: var(--text-muted, #7a5a82); margin-top: 9px; line-height: 1.5; }

.acct-save-state { font-size: 0.78rem; font-weight: 700; color: var(--pl-green, #00ff87); }

/* Club picker */
.acct-clubs { display: flex; flex-wrap: wrap; gap: 7px; width: 100%; }

.acct-club {
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-secondary, #c0a8c8);
  transition: all 0.18s ease;
}

.acct-club:hover { border-color: rgba(0, 255, 135, 0.5); color: #fff; }

.acct-club.selected {
  background: rgba(0, 255, 135, 0.16);
  border-color: var(--pl-green, #00ff87);
  color: var(--pl-green, #00ff87);
}

/* ─── Activity heatmap ──────────────────────────────────────────────── */

.hm-wrap { width: 100%; overflow-x: auto; padding-bottom: 6px; }

.hm-inner { display: inline-flex; gap: 9px; }

.hm-daylabels {
  display: grid;
  grid-template-rows: repeat(7, 13px);
  gap: 3px;
  padding-top: 20px;
  flex-shrink: 0;
}

.hm-daylabel {
  font-size: 0.62rem;
  color: var(--text-muted, #7a5a82);
  line-height: 13px;
  height: 13px;
  white-space: nowrap;
}

.hm-body { display: flex; flex-direction: column; gap: 4px; }

.hm-months {
  display: flex;
  height: 16px;
  font-size: 0.65rem;
  color: var(--text-muted, #7a5a82);
  position: relative;
}

.hm-month { position: absolute; white-space: nowrap; }

.hm-cols { display: flex; gap: 3px; }

.hm-col { display: grid; grid-template-rows: repeat(7, 13px); gap: 3px; }

.hm-cell {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.05);
  transition: transform 0.12s ease, outline-color 0.12s ease;
  outline: 1px solid transparent;
}

.hm-cell.l1 { background: rgba(0, 255, 135, 0.28); }
.hm-cell.l2 { background: rgba(0, 255, 135, 0.50); }
.hm-cell.l3 { background: rgba(0, 255, 135, 0.74); }
.hm-cell.l4 { background: #00ff87; box-shadow: 0 0 7px rgba(0, 255, 135, 0.55); }

.hm-cell.pad { background: transparent; }

.hm-cell:not(.pad):hover { transform: scale(1.28); outline-color: rgba(255, 255, 255, 0.55); }

.hm-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  font-size: 0.7rem;
  color: var(--text-muted, #7a5a82);
  margin-top: 10px;
}

.hm-legend .hm-cell { width: 11px; height: 11px; }

.hm-summary { font-size: 0.82rem; color: var(--text-secondary, #c0a8c8); margin-bottom: 14px; }
.hm-summary strong { color: #fff; }

/* ─── Light mode ────────────────────────────────────────────────────── */

:root.light-mode .acct-panel { background: rgba(24, 24, 27, 0.03); border-color: rgba(24, 24, 27, 0.10); }
:root.light-mode .acct-input { background: #fff; border-color: rgba(24, 24, 27, 0.16); color: var(--text-primary, #0d0a14); }
:root.light-mode .acct-club { background: rgba(24, 24, 27, 0.04); border-color: rgba(24, 24, 27, 0.12); }
:root.light-mode .hm-cell { background: rgba(24, 24, 27, 0.07); }
:root.light-mode .hm-cell.pad { background: transparent; }

/* ─── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .acct-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pc-card-wrapper { max-width: 360px; margin: 0 auto; }
}

/* ─── Mobile (≤640px) ───────────────────────────────────────────────────
   8-point grid throughout, 44px minimum tap targets, full-width primary
   actions, and horizontal scrolling confined to the heatmap and club row. */
@media (max-width: 640px) {
  .acct-grid { gap: 16px; }

  /* Scale to the viewport instead of overflowing a 375px screen. */
  .pc-card-wrapper { width: 100%; max-width: min(340px, 100%); min-width: 0; }
  .pc-card-shell, .pc-card { width: 100%; max-width: 100%; }
  .pc-card { height: auto; aspect-ratio: 0.77; }

  .acct-panel { padding: 24px 16px; margin-bottom: 16px; border-radius: 16px; }
  .acct-panel h3 { margin-bottom: 16px; }

  /* Stack the field so the input is full width and the button is a
     comfortable 48px target rather than a cramped inline control. */
  .acct-field { flex-direction: column; align-items: stretch; gap: 8px; }
  .acct-input {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 48px;
    min-height: 48px;
    font-size: 16px;
  } /* 16px avoids iOS zoom-on-focus */
  .acct-field .analyze-btn { width: 100% !important; min-width: 0; max-width: 100%; min-height: 48px; }
  .acct-save-state { text-align: center; min-height: 20px; }

  /* Club picker: a scroll-snapped row beats a 20-item wrap that pushes the
     rest of the page far down the screen. */
  .acct-clubs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 8px;
    margin: 0;
  }
  .acct-club {
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-height: 44px;
    padding: 8px 16px;
    font-size: 0.8rem;
  }

  .hm-summary { font-size: 0.8rem; line-height: 1.5; }
  .hm-cell { width: 11px; height: 11px; }
  .hm-col, .hm-daylabels { grid-template-rows: repeat(7, 11px); }
  .hm-daylabel { line-height: 11px; height: 11px; }

  .x-follow { min-width: 0; max-width: 100%; min-height: 44px; justify-content: center; width: 100%; }
}

@media (max-width: 380px) {
  .pc-details h3 { font-size: 1.5rem; }
  .pc-monogram { font-size: 4.5rem; }
  .pc-handle, .pc-status { max-width: 118px; }
  .pc-contact-btn { padding: 8px 11px; font-size: 0.68rem; }
  .pc-mini-avatar { width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .pc-shine { animation: none; }
  .pc-card { transition: none; }
  .pc-avatar-content .avatar { transition: none; }
  .hm-cell:not(.pad):hover { transform: none; }
}

/* ─── Language picker (More → Preferences) ──────────────────────────────
   Lives here rather than in its own file so it rides the existing
   account.css request and APP_SHELL entry. Markup: index.html #langSelect,
   populated by I18N.mountPicker(). */

.lang-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  padding: 16px;
  border-radius: 12px;
  background: rgba(0, 212, 255, 0.06);
  border: 1px solid rgba(0, 212, 255, 0.18);
}

.lang-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pl-cyan);
}

.lang-select-wrap { position: relative; display: block; }

.lang-select {
  /* 16px keeps iOS Safari from zooming the viewport on focus. */
  font-size: 16px;
  font-family: inherit;
  font-weight: 600;
  width: 100%;
  min-height: 48px;
  padding: 12px 44px 12px 14px;
  border-radius: 10px;
  color: var(--text-primary, #fff);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.lang-select:hover { background: rgba(255, 255, 255, 0.08); }

.lang-select:focus-visible {
  outline: none;
  border-color: var(--pl-cyan);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.25);
}

/* The native list renders in the OS palette, so force readable colours
   rather than white-on-white in dark mode. */
.lang-select option { color: #0b0f14; background: #fff; }

.lang-chevron {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: var(--text-secondary, rgba(255, 255, 255, 0.6));
  pointer-events: none;
}

.lang-hint {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-secondary, rgba(255, 255, 255, 0.6));
}

/* RTL: the chevron and text alignment mirror with the document direction. */
.rtl .lang-field { text-align: right; }
.rtl .lang-select { padding: 12px 14px 12px 44px; }
.rtl .lang-chevron { right: auto; left: 14px; }

/* ─── Club kits: home / away per club ───────────────────────────────── */

.acct-kits-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.acct-kits-reset {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-secondary, #c0a8c8);
  transition: border-color 0.18s ease, color 0.18s ease;
}

.acct-kits-reset:hover { border-color: var(--pl-green, #00ff87); color: #fff; }

/* Auto-fill rather than a fixed count: 20 clubs have to sit sensibly in the
   account column on a desktop and in one narrow column on a phone. */
.acct-kits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px;
  width: 100%;
  margin-top: 12px;
}

.acct-kit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 4px 7px;
  border-radius: 12px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-secondary, #c0a8c8);
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.acct-kit:hover { border-color: rgba(0, 255, 135, 0.5); color: #fff; }

/* The shirt is the label, so it must not be dimmed by the button's own
   colour treatment the way the text is. */
.acct-kit-img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  pointer-events: none;
}

.acct-kit-code { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.3px; }

.acct-kit-state {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  opacity: 0.65;
}

/* Away is the deliberate, non-default choice, so it is the one that gets a
   colour — a club left on its home kit should look untouched.

   These tiles are opted out of the global button material in
   liquid-glass.css and tactical-redesign.css, the same way .tab-btn and
   .pos-filter-btn are: they are a picker, not a control surface. Without
   that opt-out no accent is possible here — `html body button:not(...)`
   scores (0,7,3) because :not() carries its argument's specificity, so it
   beats .acct-kit.away at (0,2,0) even with !important on both sides. */
.acct-kit.away {
  background: rgba(0, 255, 135, 0.14);
  border-color: var(--pl-green, #00ff87);
  color: var(--pl-green, #00ff87);
}

.acct-kit.away .acct-kit-state { opacity: 1; }

/* Third gets its own colour rather than sharing the away accent — with three
   states, "not home" is no longer enough to tell someone what they picked. */
.acct-kit.third {
  background: rgba(0, 209, 255, 0.14);
  border-color: var(--pl-cyan, #00d1ff);
  color: var(--pl-cyan, #00d1ff);
}

.acct-kit.third .acct-kit-state { opacity: 1; }

:root.light-mode .acct-kit,
:root.light-mode .acct-kits-reset {
  background: rgba(24, 24, 27, 0.04);
  border-color: rgba(24, 24, 27, 0.12);
}

:root.light-mode .acct-kit.away {
  background: rgba(0, 160, 80, 0.12);
  border-color: #00a050;
  color: #00713a;
}

:root.light-mode .acct-kit.third {
  background: rgba(0, 130, 175, 0.12);
  border-color: #0082af;
  color: #005f80;
}

@media (prefers-reduced-motion: reduce) {
  .acct-kit,
  .acct-kits-reset { transition: none; }
}

/* ─── Notifications panel ───────────────────────────────────────────── */

.acct-notify-rows { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }

.acct-notify-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1.45;
}

.acct-notify-row input { margin-top: 3px; flex: 0 0 auto; }