:root {
  --bg-deep: #050508;
  --bg-panel: #0c0c10;
  --red: #e63946;
  --red-dim: #9b1c26;
  --gold: #fcdd5e;
  --blue: #124db1;
  --accent: #fcdd5e;
  --white: #f4f4f5;
  --muted: #9a9aa3;
  --border: rgba(255, 255, 255, 0.08);
  --font-display: "Bebas Neue", Impact, sans-serif;
  --font-body: "Rajdhani", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--white);
  background: var(--bg-deep);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--gold);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

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

.noise {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  background: linear-gradient(
    180deg,
    rgba(5, 5, 8, 0.95) 0%,
    rgba(5, 5, 8, 0.75) 70%,
    transparent 100%
  );
  border-bottom: 1px solid transparent;
  transition: background 0.3s var(--ease-out), border-color 0.3s;
}

.site-header.is-scrolled {
  background: rgba(5, 5, 8, 0.92);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--border);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--white);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.06em;
}

.brand:hover {
  text-decoration: none;
  color: var(--gold);
}

.brand__mark {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(230, 57, 70, 0.35));
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(0.75rem, 1.25vw, 1.25rem);
}

.site-nav a[hidden],
.site-nav .nav-dropdown[hidden] {
  display: none !important;
}

.site-nav a {
  color: var(--muted);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  transition: color 0.2s;
}

.site-nav a:hover {
  color: var(--white);
  text-decoration: none;
}

.site-nav a[aria-current="page"],
.nav-dropdown__btn[aria-current="page"] {
  color: var(--white);
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--muted);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: color 0.2s;
}

.nav-dropdown__btn::after {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.72;
  transform: rotate(45deg) translateY(-0.12rem);
  transition: transform 0.2s var(--ease-out), opacity 0.2s;
}

.nav-dropdown__btn:hover,
.nav-dropdown__btn[aria-expanded="true"] {
  color: var(--white);
}

.nav-dropdown__btn[aria-expanded="true"]::after {
  opacity: 1;
  transform: rotate(-135deg) translateY(-0.05rem);
}

.nav-dropdown__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  padding: 0.4rem 0;
  background: rgba(12, 12, 16, 0.98);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  z-index: 120;
}

.nav-dropdown__panel a {
  display: block;
  padding: 0.55rem 1.1rem;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}

.nav-dropdown__panel a:hover {
  color: var(--white);
  background: rgba(230, 57, 70, 0.12);
  text-decoration: none;
}

.nav-dropdown__panel a[aria-current="page"] {
  color: var(--white);
  background: rgba(252, 221, 94, 0.1);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  border-radius: 4px;
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  margin: 0 auto;
  background: var(--white);
  transition: transform 0.25s, opacity 0.25s;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
  }

  .site-nav {
    position: fixed;
    top: 72px;
    right: 1rem;
    left: 1rem;
    flex-direction: column;
    align-items: stretch;
    padding: 1rem;
    background: rgba(12, 12, 16, 0.98);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
  }

  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .site-nav a {
    padding: 0.65rem 0.5rem;
    border-bottom: 1px solid var(--border);
  }

  .site-nav a:last-child {
    border-bottom: none;
  }

  .nav-dropdown {
    width: 100%;
    border-bottom: 1px solid var(--border);
  }

  .nav-dropdown__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    padding: 0.65rem 0.5rem;
  }

  .nav-dropdown__panel {
    position: static;
    transform: none;
    margin: 0 0 0.25rem;
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    min-width: unset;
  }

  .nav-dropdown__panel a {
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    border-bottom: 1px solid var(--border);
  }

  .nav-dropdown__panel a:last-child {
    border-bottom: none;
  }
}

/* Hero game slider */
.hero-slider {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 4.75rem 0 2.5rem;
  overflow: hidden;
}

.hero-slider__slides {
  position: relative;
  flex: 1;
  min-height: 38vh;
  display: grid;
  grid-template-areas: "stack";
}

.game-slide {
  grid-area: stack;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem clamp(1rem, 4vw, 2.5rem);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.55s var(--ease-out),
    visibility 0.55s;
}

.game-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.game-slide__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.game-slide__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -18deg,
    transparent,
    transparent 2px,
    rgba(255, 255, 255, 0.025) 2px,
    rgba(255, 255, 255, 0.025) 3px
  );
  mask-image: linear-gradient(180deg, black 30%, transparent 95%);
  pointer-events: none;
}

.game-slide__bg--beyblade {
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(230, 57, 70, 0.45), transparent 55%),
    radial-gradient(ellipse 50% 50% at 90% 80%, rgba(252, 221, 94, 0.12), transparent),
    linear-gradient(180deg, var(--bg-deep) 0%, #0a0a0f 100%);
}

.game-slide__bg--mlbb {
  background:
    radial-gradient(ellipse 90% 70% at 40% 0%, rgba(255, 107, 53, 0.35), transparent 55%),
    radial-gradient(ellipse 45% 45% at 85% 60%, rgba(18, 77, 177, 0.25), transparent),
    linear-gradient(180deg, var(--bg-deep) 0%, #0a0a0f 100%);
}

.game-slide__bg--hok {
  background:
    radial-gradient(ellipse 90% 70% at 55% 0%, rgba(212, 175, 55, 0.32), transparent 55%),
    radial-gradient(ellipse 40% 40% at 15% 70%, rgba(230, 57, 70, 0.18), transparent),
    linear-gradient(180deg, var(--bg-deep) 0%, #0a0a0f 100%);
}

.game-slide__bg--codm {
  background:
    radial-gradient(ellipse 88% 68% at 48% 0%, rgba(245, 224, 0, 0.28), transparent 55%),
    radial-gradient(ellipse 42% 42% at 12% 75%, rgba(74, 124, 42, 0.22), transparent),
    radial-gradient(ellipse 35% 35% at 92% 45%, rgba(180, 180, 180, 0.08), transparent),
    linear-gradient(180deg, var(--bg-deep) 0%, #0a0a0f 100%);
}

.game-slide__bg--dota {
  background:
    radial-gradient(ellipse 85% 65% at 50% 0%, rgba(211, 44, 230, 0.28), transparent 55%),
    radial-gradient(ellipse 50% 50% at 10% 50%, rgba(230, 57, 70, 0.15), transparent),
    linear-gradient(180deg, var(--bg-deep) 0%, #0a0a0f 100%);
}

.game-slide__grid {
  display: grid;
  gap: 1.75rem 2rem;
  align-items: center;
  justify-items: center;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .game-slide__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem 2.5rem;
  }

  .game-slide__col--text {
    justify-self: start;
    text-align: left;
  }

  .game-slide__col--visual {
    justify-self: end;
  }

  .game-slide__tagline {
    margin-left: 0;
    margin-right: 0;
  }
}

.game-slide__inner {
  max-width: 34rem;
  text-align: center;
}

@media (min-width: 768px) {
  .game-slide__inner {
    text-align: left;
  }
}

.game-slide__art {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}

.game-slide__art--bey {
  position: relative;
}

.game-slide__art--bey .game-slide__art-img {
  width: min(280px, 72vw);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid rgba(252, 221, 94, 0.35);
  box-shadow:
    0 0 0 1px rgba(230, 57, 70, 0.35),
    0 20px 60px rgba(0, 0, 0, 0.55),
    0 0 80px rgba(230, 57, 70, 0.2);
  background: radial-gradient(
    circle at 50% 45%,
    rgba(255, 255, 255, 0.14) 0%,
    transparent 55%
  );
}

@media (min-width: 768px) {
  .game-slide__art--bey .game-slide__art-img {
    width: min(340px, 36vw);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .game-slide.is-active .game-slide__art--bey .game-slide__art-img {
    animation: game-art-float 7s ease-in-out infinite;
  }
}

@keyframes game-art-float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(2deg);
  }
}

.game-slide__art-cap {
  margin: 0;
  max-width: 16rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
  text-align: center;
  line-height: 1.35;
}

@media (min-width: 768px) {
  .game-slide__art-cap {
    text-align: right;
    align-self: flex-end;
  }

  .game-slide__art--bey {
    align-items: flex-end;
  }
}

.game-slide__art--logo {
  padding: 1.25rem 1.5rem;
  background: rgba(12, 12, 16, 0.65);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}

.game-slide__logo-img {
  display: block;
  width: auto;
  max-width: min(280px, 78vw);
  max-height: clamp(100px, 22vw, 150px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.45));
}

.game-slide__eyebrow {
  margin: 0 0 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.72rem;
  color: var(--gold);
}

.game-slide__title {
  margin: 0 0 0.85rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.25rem, 14vw, 6.75rem);
  line-height: 0.92;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 0 50px rgba(0, 0, 0, 0.45);
}

.game-slide__tagline {
  margin: 0;
  color: var(--muted);
  font-size: 1.2rem;
  font-weight: 600;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}

.hero-slider__chrome {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.35rem;
  padding: 1.25rem 1.5rem 0;
}

.hero-motto {
  margin: 0;
  max-width: 26rem;
  padding: 0.85rem 0 0.85rem 1.1rem;
  border-left: 4px solid var(--red);
  text-align: left;
  background: linear-gradient(90deg, rgba(230, 57, 70, 0.08), transparent);
}

.hero-motto__quote {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.45;
  color: var(--white);
}

.hero-motto__cite {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold);
}

.hero-slider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
}

.hero-slider__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: rgba(12, 12, 16, 0.85);
  color: var(--white);
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s,
    color 0.2s;
}

.hero-slider__btn:hover {
  border-color: rgba(230, 57, 70, 0.45);
  color: var(--gold);
}

.hero-slider__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  max-width: 200px;
}

.hero-slider__dot {
  width: 11px;
  height: 11px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--muted);
  cursor: pointer;
  opacity: 0.45;
  transition:
    opacity 0.2s,
    transform 0.2s,
    background 0.2s;
}

.hero-slider__dot:hover {
  opacity: 0.85;
}

.hero-slider__dot.is-active {
  opacity: 1;
  background: var(--red);
  transform: scale(1.2);
  box-shadow: 0 0 12px rgba(230, 57, 70, 0.5);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.35rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border-radius: 2px;
  text-decoration: none;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s, filter 0.2s;
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-2px);
}

.btn--primary {
  color: var(--white);
  background: linear-gradient(135deg, var(--red-dim), var(--red));
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(230, 57, 70, 0.35);
}

.btn--ghost {
  color: var(--white);
  background: transparent;
  border: 1px solid var(--border);
}

.btn--facebook {
  color: #fff !important;
  background: linear-gradient(180deg, #1877f2, #0e5ecf);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 28px rgba(24, 119, 242, 0.35);
}

.btn--facebook:hover {
  color: #fff !important;
  filter: brightness(1.06);
}

.btn--lg {
  padding: 0.85rem 2rem;
  font-size: 1.05rem;
}

/* Sections */
.section {
  padding: 4.5rem 1.5rem;
  position: relative;
}

.section:nth-of-type(even) {
  background: linear-gradient(180deg, transparent, rgba(12, 12, 16, 0.6));
}

.section__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 880px) {
  .section__inner {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
  }

  .section__inner--reverse .section__copy {
    order: 2;
  }

  .section__inner--reverse .section__figure {
    order: 1;
  }
}

.section__inner--column {
  grid-template-columns: 1fr;
}

.section__title--center {
  text-align: center;
}

.section__title--center::after {
  margin-left: auto;
  margin-right: auto;
}

.section__text--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.section--games {
  scroll-margin-top: 4rem;
}

/* Organizational chart (About) */
.org-chart {
  max-width: 1100px;
  margin: 3rem auto 0;
  padding-top: 2.75rem;
  border-top: 1px solid var(--border);
  scroll-margin-top: 5rem;
}

.org-chart__title {
  margin: 0 0 1.75rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
}

.org-chart__title::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin-top: 0.65rem;
  background: linear-gradient(90deg, var(--red), var(--gold));
}

.org-chart__exec {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 520px) {
  .org-chart__exec {
    grid-template-columns: repeat(2, 1fr);
  }
}

.org-chart__exec-item {
  margin: 0;
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: linear-gradient(
    145deg,
    rgba(12, 12, 16, 0.95),
    rgba(230, 57, 70, 0.06)
  );
}

.org-chart__exec-item:first-child {
  border-left: 4px solid var(--red);
}

.org-chart__exec-item:last-child {
  border-left: 4px solid var(--gold);
}

.org-chart__role {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold);
}

.org-chart__name {
  font-family: var(--font-display);
  font-size: 1.85rem;
  letter-spacing: 0.06em;
  color: var(--white);
}

.org-chart__subtitle {
  margin: 2rem 0 0.85rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
}

.org-chart__roster {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-panel);
}

.org-chart__roster:last-child {
  margin-bottom: 0;
}

.org-chart__roster li {
  display: grid;
  gap: 0.35rem 1.25rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--border);
}

@media (min-width: 560px) {
  .org-chart__roster li {
    grid-template-columns: minmax(11rem, 14rem) 1fr;
    align-items: baseline;
  }
}

.org-chart__roster li:last-child {
  border-bottom: none;
}

.org-chart__squad {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--white);
  letter-spacing: 0.04em;
}

.org-chart__person {
  font-weight: 600;
  color: var(--muted);
  font-size: 1rem;
}

.org-chart__roster--vice .org-chart__person {
  color: #c4c4ce;
}

.games-grid {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .games-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .games-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

.games-grid__media {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  min-height: 4.5rem;
}

.games-grid__media--logo-only {
  justify-content: center;
  min-height: 5rem;
}

.games-grid__logo {
  display: block;
  flex: 1;
  min-width: 0;
  max-width: 70%;
  max-height: 52px;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.35));
}

.games-grid__media--logo-only .games-grid__logo {
  flex: none;
  max-width: 88%;
  max-height: 56px;
  object-position: center;
}

.games-grid__thumb {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(252, 221, 94, 0.3);
  box-shadow: 0 4px 16px rgba(230, 57, 70, 0.2);
}

@media (min-width: 560px) {
  .games-grid__thumb {
    width: 64px;
    height: 64px;
  }
}

.games-grid__card {
  margin: 0;
  padding: 1.35rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
  scroll-margin-top: 5.5rem;
  transition:
    border-color 0.2s,
    transform 0.2s var(--ease-out);
}

.games-grid__card:hover {
  transform: translateY(-3px);
}

.games-grid__card--beyblade {
  border-top: 3px solid var(--red);
}

.games-grid__card--mlbb {
  border-top: 3px solid #ff6b35;
}

.games-grid__card--hok {
  border-top: 3px solid #d4af37;
}

.games-grid__card--codm {
  border-top: 3px solid #f5e000;
}

.games-grid__card--dota {
  border-top: 3px solid #d32ce6;
}

.games-grid__card--tekken {
  border-top: 3px solid #d13a2a;
}

.games-grid__card--valorant {
  border-top: 3px solid #ff4655;
}

.games-grid__name {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.games-grid__desc {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
}

.section__title {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
}

.section__title::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin-top: 0.75rem;
  background: linear-gradient(90deg, var(--red), var(--gold));
}

.section__text {
  margin: 0 0 1rem;
  color: var(--muted);
  font-weight: 500;
  max-width: 36rem;
}

.section__text strong {
  color: var(--white);
  font-weight: 700;
}

.section__text--narrow {
  max-width: 40rem;
}

.stat-row {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  color: var(--muted);
}

.stat-row__num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem;
  letter-spacing: 0.04em;
  color: var(--red);
}

.section__figure {
  margin: 0;
}

.section__figure--logo {
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  transform: skewY(-2deg);
}

.section__figure--logo img {
  transform: skewY(2deg) scale(1.05);
}

.section--founder {
  background: radial-gradient(ellipse at 80% 20%, rgba(230, 57, 70, 0.08), transparent 55%);
}

.portrait-frame {
  position: relative;
  border: 2px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(230, 57, 70, 0.2),
    0 30px 80px rgba(0, 0, 0, 0.5);
}

.portrait-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 40%,
    rgba(5, 5, 8, 0.85) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.portrait-frame img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}

.portrait-caption {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.section__figure--portrait {
  position: relative;
}

.portrait-caption__role {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold);
}

.portrait-caption__name {
  font-family: var(--font-display);
  font-size: 2.25rem;
  letter-spacing: 0.08em;
}

/* Supporters */
.section--supporters .section__inner {
  align-items: start;
}

.partner-block {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  transition: border-color 0.2s var(--ease-out);
}

.partner-block:last-child {
  margin-bottom: 0;
}

.partner-block:hover {
  border-color: rgba(252, 221, 94, 0.35);
}

.partner-block__head {
  display: grid;
  grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  margin-bottom: 1.25rem;
}

@media (max-width: 560px) {
  .partner-block__head {
    grid-template-columns: 1fr;
  }
}

.partner-block__logo {
  aspect-ratio: 1;
  background: #000;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--border);
}

.partner-block__logo img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.partner-block__title {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.partner-block__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.85rem;
  letter-spacing: 0.06em;
}

.partner-block__role {
  margin: 0;
  color: var(--gold);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.partner-block__links {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.supporter-cards {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 520px) {
  .supporter-cards {
    grid-template-columns: minmax(0, 260px);
  }
}

.supporter-card {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem;
  transition: border-color 0.2s, transform 0.2s var(--ease-out);
}

.supporter-card--founder .supporter-card__title {
  font-size: 1.35rem;
}

.supporter-card:hover {
  border-color: rgba(252, 221, 94, 0.35);
  transform: translateY(-4px);
}

.supporter-card__media {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border-radius: 4px;
  margin-bottom: 1rem;
  overflow: hidden;
}

.supporter-card__media img {
  max-width: 85%;
  max-height: 85%;
  object-fit: contain;
}

.supporter-card__media--photo img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

.supporter-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.75rem;
  letter-spacing: 0.06em;
}

.supporter-card__meta {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 600;
}

/* Events */
.events-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 2rem;
}

.events-header .section__title::after {
  margin-left: auto;
  margin-right: auto;
}

.events-poster {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

.events-poster img {
  width: 100%;
  vertical-align: middle;
}

/* CTA */
.section--cta {
  padding-bottom: 5rem;
}

.cta-panel {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 3rem 1.5rem;
  background: linear-gradient(145deg, rgba(230, 57, 70, 0.12), rgba(18, 77, 177, 0.08));
  border: 1px solid var(--border);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.cta-panel::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: conic-gradient(
    from 180deg at 50% 50%,
    transparent 0deg,
    rgba(230, 57, 70, 0.06) 120deg,
    transparent 240deg
  );
  animation: spin-slow 20s linear infinite;
}

@keyframes spin-slow {
  to {
    transform: rotate(360deg);
  }
}

.cta-panel__title,
.cta-panel__text,
.cta-panel__hint,
.cta-panel__actions {
  position: relative;
  z-index: 1;
}

.cta-panel__title {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3rem);
  letter-spacing: 0.08em;
}

.cta-panel__text {
  margin: 0 0 1rem;
  color: var(--muted);
  font-weight: 500;
}

.cta-panel__hint {
  margin: 0 0 1.5rem;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--muted);
}

.cta-panel__hint strong {
  color: var(--white);
  font-weight: 700;
}

.cta-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

/* Footer */
.site-footer {
  padding: 1.5rem;
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
}

.site-footer__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: center;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
}

.site-footer__brand {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  color: var(--white);
}

.site-footer__fb {
  font-weight: 600;
  text-decoration: none;
}

.site-footer__fb:hover {
  text-decoration: underline;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  justify-content: center;
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
}

.site-footer__links a[hidden] {
  display: none !important;
}

.site-footer__links a {
  font-weight: 600;
  text-decoration: none;
}

.site-footer__links a:hover {
  text-decoration: underline;
}

.btn--discord {
  color: #fff !important;
  background: linear-gradient(180deg, #5865f2, #4752c4);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 28px rgba(88, 101, 242, 0.35);
}

.btn--discord:hover {
  color: #fff !important;
  filter: brightness(1.06);
}

.btn--messenger {
  color: #fff !important;
  background: linear-gradient(180deg, #0078ff, #00b2ff);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 28px rgba(0, 120, 255, 0.35);
}

.btn--messenger:hover {
  color: #fff !important;
  filter: brightness(1.06);
}

.site-nav a.nav-discord {
  color: #aab0ff;
}

.site-nav a.nav-discord:hover {
  color: #c8ccff;
}

/* Member verification page */
.verify-page {
  padding: 5.5rem 1.5rem 4rem;
  min-height: 70vh;
}

.verify-page__inner {
  max-width: 640px;
  margin: 0 auto;
}

.verify-page__title {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.verify-page__title::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin-top: 0.65rem;
  background: linear-gradient(90deg, var(--red), var(--gold));
}

.verify-page__lead {
  margin: 0 0 2rem;
  color: var(--muted);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.5;
}

.verify-page__discord {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  font-size: 1rem;
}

.verify-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.verify-form label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  color: var(--gold);
}

.verify-form input[type="text"] {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--white);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.verify-form input[type="text"]:focus {
  outline: none;
  border-color: rgba(230, 57, 70, 0.55);
  box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.15);
}

.verify-form .btn {
  align-self: flex-start;
}

.verify-outcome {
  min-height: 2rem;
}

.verify-outcome--miss {
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(12, 12, 16, 0.6);
}

.verify-miss {
  margin: 0 0 0.5rem;
  color: var(--white);
  font-weight: 600;
}

.verify-miss-hint {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.verify-card {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-panel);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

@media (min-width: 560px) {
  .verify-card {
    grid-template-columns: auto 1fr;
    align-items: start;
  }
}

.verify-card__photo {
  width: 100%;
  max-width: 220px;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid rgba(252, 221, 94, 0.25);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

/* Badges sit under the profile photo in the media column, centered so
   the pills read as captions for the photo rather than as a header for
   the body copy. Wraps on narrow screens if both pills get long. */
.verify-card__badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.75rem auto 0;
  max-width: 220px;
  align-items: center;
  justify-content: center;
}

.verify-card__badge {
  display: inline-block;
  padding: 0.35rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
  background: rgba(252, 221, 94, 0.1);
  border: 1px solid rgba(252, 221, 94, 0.25);
  border-radius: 4px;
}

/* Club-role flag — mirrors the verified badge but in per-role colors so
   Captain / Vice Captain stand out at a glance on the public lookup. */
.verify-flag {
  display: inline-block;
  padding: 0.35rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border: 1px solid transparent;
  border-radius: 4px;
}
.verify-flag--founder {
  color: #ffe79a;
  background: rgba(252, 221, 94, 0.18);
  border-color: rgba(252, 221, 94, 0.55);
}
.verify-flag--captain {
  color: #ffb3b8;
  background: rgba(230, 57, 70, 0.15);
  border-color: rgba(230, 57, 70, 0.45);
}
.verify-flag--vice {
  color: #a7c6ff;
  background: rgba(18, 77, 177, 0.2);
  border-color: rgba(18, 77, 177, 0.5);
}
.verify-flag--member {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
}

.verify-card__ign {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1.85rem;
  letter-spacing: 0.06em;
  line-height: 1.1;
}

.verify-card__real {
  margin: 0 0 1.25rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--muted);
}

.verify-card__label {
  display: block;
  margin-bottom: 0.15rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold);
}

.verify-card__games-title {
  margin: 0 0 0.65rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.verify-card__games {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.verify-tag {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
}

.verify-tag--beyblade {
  border-color: rgba(230, 57, 70, 0.45);
  color: #ffb3b8;
}

.verify-tag--mlbb {
  border-color: rgba(255, 107, 53, 0.5);
  color: #ffc4a8;
}

.verify-tag--hok {
  border-color: rgba(212, 175, 55, 0.45);
  color: #f5e6a8;
}

.verify-tag--dota {
  border-color: rgba(211, 44, 230, 0.45);
  color: #e8b8f0;
}

.verify-tag--codm {
  border-color: rgba(245, 224, 0, 0.45);
  color: #fff3a0;
}

.verify-tag--tekken {
  border-color: rgba(209, 58, 42, 0.5);
  color: #ffb9ad;
}

.verify-tag--valorant {
  border-color: rgba(255, 70, 85, 0.5);
  color: #ffb3ba;
}

/* Member login & dashboard */
.auth-page {
  padding: 5.5rem 1.5rem 4rem;
  min-height: 75vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.auth-panel {
  width: 100%;
  max-width: 440px;
  padding: 2rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-panel);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

.auth-page__title {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.75rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.auth-page__title::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 0.5rem;
  background: linear-gradient(90deg, var(--red), var(--gold));
}

.auth-page__lead {
  margin: 0 0 1rem;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.5;
}

.auth-page__info {
  margin: 0 0 1.5rem;
  padding: 0.85rem 1rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--muted);
  background: rgba(252, 221, 94, 0.06);
  border: 1px solid rgba(252, 221, 94, 0.2);
  border-radius: 6px;
}

.auth-page__info code {
  font-size: 0.85em;
  color: var(--gold);
}

/* Inline error surface shown above the signup form. It upgrades from a
   plain red line to a framed alert with an icon + bulleted list when the
   client detects multiple problems at once. */
.signup-status--err {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  margin: 0 0 0.75rem;
  padding: 0.75rem 0.9rem;
  color: #ffd1d4;
  background: rgba(230, 57, 70, 0.12);
  border: 1px solid rgba(230, 57, 70, 0.55);
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.45;
}

.signup-errors__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.05rem;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-weight: 800;
  font-family: var(--font-display);
  font-size: 0.9rem;
}

.signup-errors {
  flex: 1 1 auto;
  margin: 0;
}

.signup-errors__title {
  margin: 0 0 0.35rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: #ffd1d4;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.signup-errors__list {
  margin: 0;
  padding-left: 1.15rem;
  font-weight: 500;
  color: #ffe1e3;
}

.signup-errors__list li + li {
  margin-top: 0.15rem;
}

/* Field-level invalid cue. Red border + soft glow, plus a barely-there
   shake on appearance so the eye is drawn to the offending input. The
   .is-invalid class is cleared by signup.js the moment the user edits
   the field. */
.auth-form input.is-invalid,
.auth-form select.is-invalid,
.auth-form textarea.is-invalid {
  border-color: rgba(230, 57, 70, 0.85) !important;
  box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.2) !important;
  animation: signup-shake 0.32s ease-in-out 1;
}

@keyframes signup-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-form input.is-invalid,
  .auth-form select.is-invalid,
  .auth-form textarea.is-invalid {
    animation: none;
  }
}

.auth-page__footer {
  margin: 1.5rem 0 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--muted);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.auth-form label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  color: var(--gold);
}

.auth-form input[type="text"],
.auth-form input[type="password"],
.auth-form textarea,
.auth-form select {
  width: 100%;
  padding: 0.7rem 1rem;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--white);
  background: rgba(5, 5, 8, 0.6);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.auth-form select:not([multiple]) {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
}

.auth-form select[multiple] {
  padding: 0.35rem 0.4rem;
}

.auth-form select[multiple] option {
  padding: 0.35rem 0.55rem;
  border-radius: 3px;
}

.auth-form select[multiple] option:checked {
  background: linear-gradient(var(--red), var(--red));
  color: #fff;
}

.auth-form select option {
  background: #0b0b10;
  color: var(--white);
}

.auth-form input:focus,
.auth-form textarea:focus,
.auth-form select:focus {
  outline: none;
  border-color: rgba(230, 57, 70, 0.55);
  box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.12);
}

.auth-form__submit {
  margin-top: 0.35rem;
  width: 100%;
}

.login-error {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: #ffb3b8;
  background: rgba(230, 57, 70, 0.12);
  border: 1px solid rgba(230, 57, 70, 0.35);
  border-radius: 6px;
}

.site-nav .nav-logout {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  transition: color 0.2s;
}

.site-nav .nav-logout:hover {
  color: var(--white);
}

@media (max-width: 768px) {
  .site-nav .nav-logout {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.65rem 0.5rem;
    border-bottom: 1px solid var(--border);
  }
}

.dash-page {
  padding: 5.5rem 1.5rem 4rem;
  min-height: 75vh;
}

.dash-page__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.dash-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.dash-header__intro {
  flex: 1;
  min-width: min(100%, 280px);
}

.dash-header__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.85rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dash-header__welcome {
  margin: 0.5rem 0 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--muted);
}

.dash-header__logout {
  flex-shrink: 0;
  align-self: flex-start;
}

.dash-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 880px) {
  .dash-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dash-card--placeholder {
    grid-column: 1 / -1;
  }
}

.dash-card {
  padding: 1.35rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
}

.dash-card__title {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dash-profile {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 480px) {
  .dash-profile {
    grid-template-columns: auto 1fr;
    align-items: start;
  }
}

.dash-profile__photo {
  width: 100%;
  max-width: 180px;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid rgba(252, 221, 94, 0.25);
}

.dash-profile__dl {
  margin: 0;
}

.dash-profile__dl > div {
  margin-bottom: 0.85rem;
}

.dash-profile__dl dt {
  margin: 0 0 0.2rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
}

.dash-profile__dl dd {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--white);
}

.dash-games {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.dash-game-tag {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  color: var(--muted);
}

.dash-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dash-links li {
  margin-bottom: 0.65rem;
}

.dash-links a {
  font-weight: 600;
}

.dash-placeholder {
  margin: 0;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.5;
}

.site-header-tagline {
  margin: 0;
  padding: 5.25rem 1.25rem 0.35rem;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold);
}

@media (min-width: 769px) {
  .site-header-tagline {
    padding-top: 4.5rem;
  }
}

.org-chart-custom {
  margin-bottom: 1.5rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.games-grid__card--custom {
  border-top: 3px solid #6a6a75;
}

.btn--sm {
  padding: 0.35rem 0.65rem;
  font-size: 0.78rem;
  margin: 0.2rem 0.2rem 0.2rem 0;
}

.dash-page--full .dash-page__inner {
  max-width: 1100px;
}

.dash-disclaimer {
  margin: 0 0 1.5rem;
  padding: 0.85rem 1rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: rgba(252, 221, 94, 0.04);
}

.dash-role-badge {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold);
}

.dash-grid--wide {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .dash-grid--wide {
    grid-template-columns: repeat(2, 1fr);
  }

  .dash-card--span2 {
    grid-column: 1 / -1;
  }
}

.dash-card__hint {
  margin: -0.35rem 0 1rem;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.45;
}

.dash-points-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0.65rem 1rem;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(230, 57, 70, 0.15), transparent);
  border: 1px solid var(--border);
}

.dash-points-banner__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
}

.dash-points-banner__value {
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: 0.06em;
  color: var(--white);
}

/* Dual-banner layout: "Active season" on the left (gold accent, resets
   every season) and "Lifetime" on the right (muted, never resets). */
.dash-points-banner--dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  overflow: hidden;
}

.dash-points-banner__cell {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.8rem 1rem;
  background: linear-gradient(90deg, rgba(230, 57, 70, 0.18), transparent);
}

.dash-points-banner__cell--muted {
  background: rgba(255, 255, 255, 0.03);
  border-left: 1px solid var(--border);
}

.dash-points-banner__season {
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.1em;
}

.dash-points-banner__value--muted {
  color: var(--muted);
}

.dash-points-banner__meta {
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.05em;
}

@media (max-width: 520px) {
  .dash-points-banner--dual {
    grid-template-columns: 1fr;
  }
  .dash-points-banner__cell--muted {
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}

.dash-profile__photo-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.dash-upload-label {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--red);
  text-decoration: underline;
}

.dash-upload-status {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
  min-height: 1.25em;
}

.id-flags-review-note {
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--muted);
}

.id-flags-review-note:empty {
  display: none;
}

.id-flags-review-note--pending {
  color: var(--gold);
}

.id-flags-review-note--rejected {
  color: var(--red);
}

.dash-rank-key {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: var(--muted);
}

/* v1.49.0 — tournament submission rules callout above the form. */
.dash-rules-callout {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid rgba(245, 200, 120, 0.85);
  background: rgba(245, 200, 120, 0.07);
  border-radius: 6px;
  font-size: 0.85rem;
}
.dash-rules-callout strong { display: block; margin-bottom: 0.35rem; }
.dash-rules-callout ul { margin: 0; padding-left: 1.1rem; }
.dash-rules-callout li { margin: 0.2rem 0; line-height: 1.45; }
.dash-form__req { color: rgba(245, 120, 120, 0.95); font-weight: 700; }

/* v1.49.4 — bracket-name surface. The canonical name a member
   should register on Challonge with (e.g. "GRD|TAS Alice"),
   shown in the dashboard profile dl AND inline above the
   Challonge URL field on the achievement form. The copy
   button is the primary affordance: if members copy and paste
   into Challonge, v149_missing_tag never fires. */
.dash-bracket-hint {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.7rem;
  font-weight: 400;
  color: rgba(148, 163, 184, 0.85);
  text-transform: none;
  letter-spacing: 0;
}
.dash-bracket-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fde68a;
  background: rgba(245, 200, 120, 0.08);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}
.dash-bracket-copy {
  margin-left: 0.4rem;
}
.btn--xs {
  padding: 0.15rem 0.45rem;
  font-size: 0.7rem;
  line-height: 1.2;
}
.dash-bracket-copy-status {
  margin-left: 0.4rem;
  font-size: 0.78rem;
  color: rgba(203, 213, 225, 0.85);
}
.dash-bracket-copy-status--ok { color: #4ade80; }
.dash-bracket-copy-status--err { color: #f87171; }
.dash-bracket-form-hint {
  margin: -0.25rem 0 0.25rem;
  padding: 0.45rem 0.6rem;
  border-left: 2px solid rgba(120, 200, 245, 0.55);
  background: rgba(120, 200, 245, 0.06);
  border-radius: 4px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: rgba(203, 213, 225, 0.92);
}
.dash-bracket-form-hint strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #fde68a;
  background: rgba(245, 200, 120, 0.1);
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
}

/* v1.49.5 — re-submission banner above the achievement form.
   Shown when the member clicks "Fix & re-submit" on a rejected
   row OR lands on dashboard.html?refill=<id> from a rejection
   notification. Tells them clearly that the form has been
   pre-filled and the original rejected row remains as audit
   history. */
.dash-refill-banner {
  margin: 0 0 0.85rem;
  padding: 0.7rem 0.95rem;
  border-left: 3px solid rgba(245, 200, 120, 0.85);
  background: rgba(245, 200, 120, 0.08);
  border-radius: 6px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(226, 232, 240, 0.95);
}
.dash-refill-banner[hidden] { display: none; }
.dash-refill-banner strong { color: #fde68a; }
.dash-refill-banner #ach-refill-banner-label {
  color: #fde68a;
  font-weight: 600;
  margin-right: 0.15rem;
}
.dash-refill-dismiss {
  margin-left: 0.4rem;
  vertical-align: baseline;
}

/* v1.49.2 — "What to do next" callout under a rejected
   submission's note when the verifier picked a policy template
   (e.g. v149_floor / v149_no_challonge / v149_missing_tag).
   Sits inline inside the submissions-table note cell, so it
   uses a tight, low-key style so the table layout doesn't
   blow out. */
.dash-reject-next {
  margin-top: 0.4rem;
  padding: 0.4rem 0.55rem;
  border-left: 2px solid rgba(120, 200, 245, 0.65);
  background: rgba(120, 200, 245, 0.07);
  border-radius: 4px;
  font-size: 0.8rem;
  line-height: 1.4;
}
.dash-reject-next strong { display: inline; margin-right: 0.25rem; }

.dash-form {
  display: grid;
  gap: 0.85rem;
  max-width: 32rem;
}

.dash-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
}

.dash-form input[type="text"],
.dash-form input[type="url"],
.dash-form input[type="file"],
.dash-form input[type="number"],
.dash-form input[type="date"],
.dash-form select {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  padding: 0.55rem 0.75rem;
  color: var(--white);
  background: rgba(5, 5, 8, 0.5);
  border: 1px solid var(--border);
  border-radius: 4px;
}

/* Force the native date-picker indicator to render visibly on our dark
   background (Chromium renders it as a dark glyph by default). */
.dash-form input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.2);
  opacity: 0.85;
  cursor: pointer;
}

.dash-form input:focus,
.dash-form select:focus {
  outline: none;
  border-color: rgba(230, 57, 70, 0.5);
}

.dash-form__hint {
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}

.dash-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--white);
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
}

.digital-id-layout {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .digital-id-layout {
    grid-template-columns: minmax(0, 320px) 1fr;
    align-items: start;
  }
}

.digital-id-card {
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(252, 221, 94, 0.35);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  max-width: 340px;
}

.digital-id-card__brand {
  padding: 0.65rem 0.85rem 0.5rem;
  text-align: center;
  background: linear-gradient(180deg, #0d0d12 0%, #08080c 100%);
  border-bottom: 1px solid rgba(252, 221, 94, 0.2);
}

.digital-id-card__logo {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  max-height: 4.5rem;
  width: auto;
  object-fit: contain;
}

.digital-id-card__header {
  padding: 0.65rem 1rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--red-dim), var(--red));
  color: var(--white);
}

.digital-id-card__body {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: var(--bg-panel);
}

.digital-id-card__photo {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.digital-id-card__ign {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.06em;
}

.digital-id-card__name,
.digital-id-card__squad {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 600;
}

/* Reusable club-role pill. Lives next to IGN on the dashboard profile
   panel and (for Captain / Vice Captain only) on the Digital ID card.
   Kept deliberately in sync with .verify-flag--* (members.html) and
   .lb-badge--captain/vice (leaderboard) so the ranking vocabulary has
   one consistent color language across the product. */
.club-role-pill {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border: 1px solid transparent;
  border-radius: 4px;
  vertical-align: middle;
}
.club-role-pill--founder {
  color: #ffe79a;
  background: rgba(252, 221, 94, 0.18);
  border-color: rgba(252, 221, 94, 0.55);
}
.club-role-pill--captain {
  color: #ffb3b8;
  background: rgba(230, 57, 70, 0.15);
  border-color: rgba(230, 57, 70, 0.45);
}
.club-role-pill--vice {
  color: #a7c6ff;
  background: rgba(18, 77, 177, 0.2);
  border-color: rgba(18, 77, 177, 0.5);
}
.club-role-pill--member {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
}

.digital-id-card__clubrole {
  margin: 0.1rem 0 0.35rem;
}

.digital-id-card__badges {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.5;
}

.digital-id-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
}

.dash-table-wrap {
  overflow-x: auto;
  margin-top: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.dash-table th,
.dash-table td {
  padding: 0.65rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.dash-table th {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  background: rgba(12, 12, 16, 0.8);
}

.dash-table tr:last-child td {
  border-bottom: none;
}

.dash-table-empty {
  text-align: center;
  color: var(--muted);
  padding: 1.25rem !important;
}

.dash-status {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dash-status--pending {
  background: rgba(252, 221, 94, 0.15);
  color: var(--gold);
}

.dash-status--ok {
  background: rgba(46, 160, 67, 0.2);
  color: #7dffb3;
}

.dash-status--bad {
  background: rgba(230, 57, 70, 0.2);
  color: #ffb3b8;
}

.dash-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}

.dash-gallery__item {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-deep);
}

.dash-gallery__item img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

.dash-gallery__item figcaption {
  padding: 0.35rem 0.5rem;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.3;
}

.verif-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 12rem;
}

.verif-note {
  width: 100%;
  min-height: 3rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 0.35rem;
  background: rgba(5, 5, 8, 0.5);
  border: 1px solid var(--border);
  color: var(--white);
  border-radius: 4px;
}

.verif-date-input {
  display: block;
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 0.3rem 0.45rem;
  background: rgba(5, 5, 8, 0.5);
  border: 1px solid var(--border);
  color: var(--white);
  border-radius: 4px;
  min-width: 9rem;
}

.verif-date-input::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.2);
  opacity: 0.85;
  cursor: pointer;
}

.verif-date-input:focus {
  outline: none;
  border-color: var(--gold);
}

.verif-date-hint {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.7rem;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.verif-poster-link {
  display: inline-block;
  margin-bottom: 0.35rem;
  font-weight: 600;
}

.verif-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.85rem;
}

.verif-history-meta {
  display: inline-block;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.4;
}

.verif-preview-link {
  display: inline-block;
  margin-right: 0.5rem;
  font-weight: 600;
  cursor: pointer;
}

.verif-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.verif-lightbox[hidden] {
  display: none;
}

.verif-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 2, 5, 0.85);
  backdrop-filter: blur(3px);
  cursor: zoom-out;
}

.verif-lightbox__frame {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  max-width: min(95vw, 1100px);
  max-height: 92vh;
  width: 100%;
  background: rgba(10, 10, 14, 0.92);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
}

.verif-lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.4);
}

.verif-lightbox__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
}

.verif-lightbox__actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.verif-lightbox__body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem;
  overflow: auto;
  background: #05050a;
}

.verif-lightbox__body img {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

body.verif-lightbox-open {
  overflow: hidden;
}

.admin-page .admin-subtitle {
  margin: 1.5rem 0 0.75rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-form-grid {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1rem;
  max-width: 36rem;
}

@media (min-width: 560px) {
  .admin-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-span-2 {
    grid-column: 1 / -1;
  }
}

.admin-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold);
}

.admin-form-grid input,
.admin-form-grid select,
.admin-form-grid textarea {
  padding: 0.5rem 0.65rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--white);
  background: rgba(5, 5, 8, 0.5);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.admin-label {
  display: block;
  margin: 1rem 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
}

.admin-input-wide,
.admin-page textarea {
  width: 100%;
  max-width: 42rem;
  box-sizing: border-box;
}

.admin-mono {
  font-family: ui-monospace, monospace;
  font-size: 0.85rem;
}

.admin-hint {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.admin-status {
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.admin-num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--gold);
}

.dash-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.dash-overview {
  display: grid;
  gap: 1.5rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem;
}

.stats-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(215, 38, 56, 0.08), rgba(5, 5, 8, 0.45));
  min-height: 96px;
}

.stats-card__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.stats-card__value {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  color: var(--white);
  letter-spacing: 0.04em;
}

.stats-card__sub {
  font-size: 0.82rem;
  color: var(--muted);
}

.stats-card__link {
  color: var(--gold);
  text-decoration: none;
  font-weight: 600;
}

.stats-card__link:hover,
.stats-card__link:focus-visible {
  text-decoration: underline;
}

.overview-split {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 880px) {
  .overview-split {
    grid-template-columns: 1fr 1fr;
  }
}

.overview-block .admin-subtitle {
  margin-top: 0;
}

.pill {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid var(--border);
  background: rgba(5, 5, 8, 0.45);
  color: var(--muted);
}

.pill--ok {
  color: #7ee787;
  border-color: rgba(126, 231, 135, 0.35);
  background: rgba(126, 231, 135, 0.08);
}

.pill--bad {
  color: #ff8a8a;
  border-color: rgba(255, 138, 138, 0.35);
  background: rgba(255, 138, 138, 0.08);
}

.admin-members-toolbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 0 0 0.85rem;
}

@media (min-width: 640px) {
  .admin-members-toolbar {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

.admin-search-label,
.admin-page-size-label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
}

.admin-search-label input,
.admin-page-size-label select {
  padding: 0.5rem 0.65rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--white);
  background: rgba(5, 5, 8, 0.5);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.admin-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.85rem 0 1.25rem;
}

.admin-pager__info {
  font-size: 0.88rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.admin-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-end;
}

.admin-clubrole-select {
  font-size: 0.9rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--white);
  /* The admin table inherits light text on a dark row. We force a dark
     color here (and on <option>) so the select is legible whether the
     browser opens the dropdown list natively or renders the collapsed
     value in-place. */
  color: #111;
  max-width: 150px;
}
.admin-clubrole-select option {
  color: #111;
  background: var(--white);
}
.admin-clubrole-select:disabled {
  opacity: 0.6;
  cursor: wait;
}

.admin-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 1rem;
  overflow-y: auto;
}

.admin-modal[hidden] {
  display: none;
}

.admin-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(3px);
}

.admin-modal__panel {
  position: relative;
  z-index: 1;
  width: min(960px, 100%);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  margin: auto 0;
}

.admin-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.admin-modal__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-modal__close {
  font-size: 1.6rem;
  line-height: 1;
  color: var(--white);
  background: transparent;
  border: 1px solid var(--border);
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  cursor: pointer;
}

.admin-modal__close:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.admin-modal__body {
  padding: 1.25rem;
}

body.admin-modal-open {
  overflow: hidden;
}

.admin-profile {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .admin-profile {
    grid-template-columns: 180px 1fr;
    align-items: start;
  }
}

.admin-profile__photo,
.admin-profile__photo--empty {
  width: 180px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(5, 5, 8, 0.4);
}

.admin-profile__photo--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.85rem;
}

.admin-profile__dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1rem;
  margin: 0;
  font-size: 0.95rem;
}

.admin-profile__dl dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  align-self: center;
}

.admin-profile__dl dd {
  margin: 0;
  color: var(--white);
  word-break: break-word;
}

.stats-grid--compact .stats-card {
  min-height: 80px;
}

.stats-grid--compact .stats-card__value {
  font-size: 1.5rem;
}

/* ---- Chips (shared) ---------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.chip:hover,
.chip:focus-visible {
  color: var(--white);
  border-color: var(--accent, #f5a623);
  outline: none;
}

.chip--active {
  background: var(--accent, #f5a623);
  border-color: var(--accent, #f5a623);
  color: #0a0a0a;
}

.chip--active:hover,
.chip--active:focus-visible {
  color: #0a0a0a;
}

/* Warn variant — used for the "Missing dates" backfill tab so the backlog
   is visually distinct from the standard Pending/Verified/Rejected set. */
.chip--warn {
  border-color: rgba(252, 221, 94, 0.55);
  color: #fde68a;
  background: rgba(252, 221, 94, 0.08);
}

.chip--warn.chip--active {
  background: rgba(252, 221, 94, 0.9);
  border-color: rgba(252, 221, 94, 0.9);
  color: #1a1a00;
}

.chip__count {
  display: inline-flex;
  min-width: 1.5em;
  justify-content: center;
  padding: 0 0.35rem;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.4;
  border-radius: 999px;
  background: rgba(230, 57, 70, 0.85);
  color: #fff;
  letter-spacing: 0;
}

.stats-card--warn .stats-card__value {
  color: #fde68a;
}

.stats-card--warn {
  border-color: rgba(252, 221, 94, 0.35);
  background: linear-gradient(135deg, rgba(252, 221, 94, 0.1), transparent);
}

.pill {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
}

.pill--ok {
  color: #7ee49a;
  border-color: rgba(126, 228, 154, 0.45);
  background: rgba(126, 228, 154, 0.1);
}

.pill--bad {
  color: #ff8a8a;
  border-color: rgba(255, 138, 138, 0.45);
  background: rgba(255, 138, 138, 0.1);
}

/* ---- Leaderboard ------------------------------------------------------- */
.leaderboard-page {
  padding: 2.5rem 0 4rem;
}

.leaderboard-page__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.leaderboard-hero {
  margin-bottom: 1.5rem;
}

.leaderboard-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 0.5rem;
}

.leaderboard-hero__sub {
  color: var(--muted);
  max-width: 50rem;
  margin: 0 0 1rem;
}

.leaderboard-scoring {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.leaderboard-scoring h2 {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
}

.leaderboard-scoring ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.leaderboard-scoring li {
  display: inline-flex;
  gap: 0.35rem;
}

.leaderboard-scoring strong {
  color: var(--white);
}

.leaderboard-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.leaderboard-search {
  flex: 1 1 16rem;
  min-width: 12rem;
}

.leaderboard-search input {
  width: 100%;
  padding: 0.55rem 0.85rem;
  background: rgba(5, 5, 8, 0.55);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--white);
  font: inherit;
}

.leaderboard-search input:focus {
  outline: none;
  border-color: var(--accent, #f5a623);
}

.leaderboard-select select {
  padding: 0.55rem 0.85rem;
  background: rgba(5, 5, 8, 0.55);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--white);
  font: inherit;
}

.leaderboard-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.leaderboard-chips--games {
  flex: 1 1 100%;
}

.leaderboard-top {
  margin-bottom: 1.5rem;
}

.leaderboard-top__cards {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.lb-top-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.01)
  );
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
}

.lb-top-card--1 {
  border-color: rgba(245, 166, 35, 0.55);
  box-shadow: 0 10px 30px rgba(245, 166, 35, 0.1);
}

.lb-top-card--2 {
  border-color: rgba(180, 190, 200, 0.45);
}

.lb-top-card--3 {
  border-color: rgba(205, 127, 50, 0.45);
}

.lb-top-card__rank {
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent, #f5a623);
}

.lb-top-card__photo {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.15);
}

.lb-top-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.lb-top-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
}

.lb-top-card__squad,
.lb-top-card__points,
.lb-top-card__badges {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.lb-top-card__points {
  color: var(--white);
  font-weight: 600;
}

.leaderboard-table-wrap {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
}

.leaderboard-table thead th {
  text-align: left;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.35);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}

.leaderboard-table tbody td {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--muted);
  vertical-align: middle;
}

.leaderboard-table tbody tr:last-child td {
  border-bottom: none;
}

.leaderboard-table tbody tr:nth-child(odd) {
  background: rgba(255, 255, 255, 0.015);
}

.lb-rank {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--accent, #f5a623);
  width: 5rem;
}

.lb-points {
  color: var(--white);
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

/* v1.38.0 — most-loved leaderboard sort. The Reactions column
   carries a tiny breakdown strip (heart / trophy / fire) that
   highlights when the sort is active. */
.lb-rxn-cell {
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.65);
  font-variant-numeric: tabular-nums;
}
.lb-rxn-cell--active {
  color: var(--white);
  font-weight: 700;
}
.lb-points--active {
  outline: 1px solid rgba(245, 166, 35, 0.35);
  border-radius: 0.4rem;
}
.lb-rxn-strip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.lb-rxn {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.85em;
  line-height: 1;
}
.lb-rxn-cell--active .lb-rxn {
  background: rgba(245, 166, 35, 0.12);
}
.lb-rxn--heart .lb-rxn__icon { color: #ff5b7a; }
.lb-rxn--trophy .lb-rxn__icon { color: #f5a623; }
.lb-rxn--fire .lb-rxn__icon { color: #ff8a3d; }
.lb-rxn__n {
  font-weight: 600;
  color: var(--white);
}
.leaderboard-chips--sort {
  margin-right: 0.5rem;
}
.lb-top-card__points--rxn {
  color: var(--white);
}
.lb-top-card__rxn-strip {
  margin-top: 0.25rem;
}

.lb-member {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

/* Leaderboard rows wrap the member name in an <a> so clicking it opens the
   full portfolio. Inherit row colors so the link doesn't turn gold by
   default (that's reserved for call-to-action links). */
.lb-member__link {
  color: inherit;
  text-decoration: none;
}

.lb-member__link:hover .lb-member__ign {
  text-decoration: underline;
  color: var(--gold);
}

.lb-top-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.lb-top-card__link:hover .lb-top-card__name {
  color: var(--gold);
}

.verify-card__portfolio-link {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.82rem;
  color: var(--gold);
  border: 1px solid rgba(252, 221, 94, 0.4);
  border-radius: 4px;
  background: rgba(252, 221, 94, 0.08);
  transition: background 180ms var(--ease-out);
}

.verify-card__portfolio-link:hover {
  background: rgba(252, 221, 94, 0.18);
  text-decoration: none;
}

.lb-member__photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.lb-member__meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.lb-member__ign {
  color: var(--white);
  font-weight: 600;
}

.lb-member__games {
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 22rem;
}

.lb-badge {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0.05rem 0.4rem;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6fd5ff;
  border: 1px solid rgba(111, 213, 255, 0.45);
  border-radius: 4px;
  background: rgba(111, 213, 255, 0.08);
}

.lb-badge--pro {
  color: #f5a623;
  border-color: rgba(245, 166, 35, 0.5);
  background: rgba(245, 166, 35, 0.1);
}

/* Captain / Vice Captain markers on the leaderboard. Colors mirror the
   pills used on members.html (.verify-flag--*) and the dashboard
   (.club-role-pill--*) so the ranking vocabulary stays consistent. */
.lb-badge--founder {
  color: #ffe79a;
  border-color: rgba(252, 221, 94, 0.6);
  background: rgba(252, 221, 94, 0.18);
}
.lb-badge--captain {
  color: #ffb3b8;
  border-color: rgba(230, 57, 70, 0.55);
  background: rgba(230, 57, 70, 0.15);
}
.lb-badge--vice {
  color: #a7c6ff;
  border-color: rgba(18, 77, 177, 0.55);
  background: rgba(18, 77, 177, 0.2);
}

.leaderboard-empty {
  margin: 1rem;
  padding: 1rem;
  color: var(--muted);
  text-align: center;
}

/* v1.16.0: verifier leaderboard — smaller, denser table than the member
   leaderboard. Sits below the main table on leaderboard.html so the
   point-ranked members stay the visual anchor. */
.verifier-leaderboard {
  margin-top: 3rem;
  padding: 1rem 1.25rem 0.5rem;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.verifier-leaderboard__header {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}
.verifier-leaderboard__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  color: var(--white);
}
.verifier-leaderboard__sub {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
  max-width: 58ch;
}
.verifier-leaderboard__chips {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.3rem;
  flex-wrap: wrap;
}
.verifier-leaderboard__table-wrap {
  overflow-x: auto;
}
.verifier-leaderboard__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.verifier-leaderboard__table thead th {
  text-align: left;
  padding: 0.55rem 0.85rem;
  background: rgba(0, 0, 0, 0.35);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.verifier-leaderboard__table tbody td {
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--muted);
  vertical-align: middle;
}
.verifier-leaderboard__table tbody tr:last-child td {
  border-bottom: none;
}
.verifier-leaderboard__rank {
  font-family: var(--font-display);
  color: var(--accent, #f5a623);
  width: 3rem;
}
.verifier-leaderboard__member {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.verifier-leaderboard__ign {
  color: var(--white);
  font-weight: 600;
}
.verifier-leaderboard__username {
  color: var(--muted);
  font-size: 0.78rem;
}
.verifier-leaderboard__count {
  color: var(--white);
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}
.verifier-leaderboard__role {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.verifier-leaderboard__role--verifier {
  background: rgba(45, 180, 180, 0.12);
  color: #6fe2e2;
  border-color: rgba(45, 180, 180, 0.35);
}
.verifier-leaderboard__role--admin {
  background: rgba(234, 88, 12, 0.15);
  color: #f6a072;
  border-color: rgba(234, 88, 12, 0.4);
}

/* v1.17.0: optional JLAP expiry picker inside the verifier row. */
.verif-jlap-exp {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0.3rem 0;
  font-size: 0.78rem;
  color: var(--muted);
}
.verif-jlap-exp input[type="date"] {
  padding: 0.15rem 0.35rem;
  font-size: 0.8rem;
  background: rgba(0, 0, 0, 0.35);
  color: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.verif-jlap-exp input[type="date"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .lb-member__games {
    display: none;
  }

  .lb-top-card__photo {
    width: 72px;
    height: 72px;
  }
}

/* ---- Audit log panel --------------------------------------------------- */
.audit-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: flex-end;
  margin: 0.75rem 0 0.5rem;
}

.audit-filter {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.8rem;
  color: var(--muted);
  min-width: 10rem;
}

.audit-filter > span {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
}

.audit-filter input,
.audit-filter select {
  padding: 0.4rem 0.6rem;
  background: rgba(5, 5, 8, 0.55);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--white);
  font: inherit;
}

.audit-meta {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0.3rem 0 0.75rem;
}

.audit-table td {
  vertical-align: top;
  font-size: 0.85rem;
}

.audit-table td code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  color: var(--accent, #fcdd5e);
  background: rgba(255, 255, 255, 0.04);
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
}

.audit-detail details {
  max-width: 28rem;
}

.audit-detail summary {
  cursor: pointer;
  color: var(--muted);
}

.audit-detail summary:hover {
  color: var(--white);
}

.audit-detail pre {
  margin: 0.4rem 0 0;
  padding: 0.55rem 0.7rem;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--border);
  border-radius: 5px;
  max-height: 260px;
  overflow: auto;
  color: var(--white);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.audit-actions {
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
}

/* ---- Member inbox ------------------------------------------------------ */
.dash-inbox__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.dash-inbox__badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.05rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #0a0a0a;
  background: var(--gold, #fcdd5e);
  border-radius: 999px;
  vertical-align: middle;
}

.dash-inbox {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: 26rem;
  overflow-y: auto;
}

.dash-inbox__item {
  padding: 0.7rem 0.85rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: default;
  transition: background 0.15s ease;
}

.dash-inbox__item--unread {
  background: rgba(252, 221, 94, 0.07);
  border-color: rgba(252, 221, 94, 0.35);
  cursor: pointer;
}

.dash-inbox__item--unread:hover {
  background: rgba(252, 221, 94, 0.1);
}

.dash-inbox__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.dash-inbox__kind {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.dash-inbox__kind--achievement {
  color: #fcdd5e;
  border-color: rgba(252, 221, 94, 0.5);
  background: rgba(252, 221, 94, 0.08);
}

.dash-inbox__kind--jlap {
  color: #6fd5ff;
  border-color: rgba(111, 213, 255, 0.5);
  background: rgba(111, 213, 255, 0.08);
}

.dash-inbox__kind--idflags {
  color: #7ee49a;
  border-color: rgba(126, 228, 154, 0.45);
  background: rgba(126, 228, 154, 0.08);
}

.dash-inbox__title {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
}

.dash-inbox__time {
  color: var(--muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

.dash-inbox__body {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

.dash-inbox__empty {
  color: var(--muted);
  font-style: italic;
  margin: 0.5rem 0 0;
}

.nav-inbox__badge {
  display: inline-block;
  min-width: 1.1rem;
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: #0a0a0a;
  background: var(--gold, #fcdd5e);
  border-radius: 999px;
  vertical-align: middle;
}

/* ---- News widget (inline preview on dashboards) ----------------------- */
.dash-card--news {
  border-color: rgba(252, 221, 94, 0.28);
  background: linear-gradient(
    180deg,
    rgba(252, 221, 94, 0.04),
    rgba(255, 255, 255, 0.01)
  );
}

.news-widget {
  display: block;
}

.news-widget__loading,
.news-widget__empty {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-style: italic;
}

.news-widget__list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.news-widget__item {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.news-widget__item:hover {
  border-color: rgba(252, 221, 94, 0.4);
  background: rgba(252, 221, 94, 0.04);
}

.news-widget__item--pinned {
  border-color: rgba(252, 221, 94, 0.45);
  background: rgba(252, 221, 94, 0.06);
}

.news-widget__link {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  grid-template-areas:
    "kind new title time"
    "summary summary summary summary"
    "reactions reactions reactions reactions";
  gap: 0.4rem 0.55rem;
  padding: 0.6rem 0.8rem;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.news-widget__kind {
  grid-area: kind;
  display: inline-block;
  padding: 0.05rem 0.45rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.news-widget__kind--feature {
  color: #fcdd5e;
  border-color: rgba(252, 221, 94, 0.55);
  background: rgba(252, 221, 94, 0.08);
}

.news-widget__kind--update {
  color: #6fd5ff;
  border-color: rgba(111, 213, 255, 0.55);
  background: rgba(111, 213, 255, 0.08);
}

.news-widget__kind--fix {
  color: #7ee49a;
  border-color: rgba(126, 228, 154, 0.5);
  background: rgba(126, 228, 154, 0.08);
}

.news-widget__kind--announcement {
  color: #ffb27a;
  border-color: rgba(255, 178, 122, 0.55);
  background: rgba(255, 178, 122, 0.08);
}

.news-widget__kind--event {
  color: #d7a0ff;
  border-color: rgba(215, 160, 255, 0.55);
  background: rgba(215, 160, 255, 0.08);
}

.news-widget__new {
  grid-area: new;
  padding: 0.02rem 0.4rem;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #0a0a0a;
  background: var(--gold, #fcdd5e);
  border-radius: 3px;
}

.news-widget__title {
  grid-area: title;
  font-family: var(--font-display);
  font-size: 0.98rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.2;
}

.news-widget__time {
  grid-area: time;
  color: var(--muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

.news-widget__summary {
  grid-area: summary;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

/* v1.38.2 — read-only reaction summary chip on widget cards.
   Decorative-only: the widget link delegates the actual toggle
   to news.html, so these elements are <span>s that display
   counts. The chip only renders when total > 0 (see
   reactionSummaryHtml in js/news-widget.js). */
.news-widget__reactions {
  grid-area: reactions;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.1rem;
  font-size: 0.78rem;
  line-height: 1;
  color: var(--muted);
}
.news-widget__rxn {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.news-widget__rxn-icon {
  display: inline-flex;
}
.news-widget__rxn-n {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}
.news-widget__rxn--heart {
  color: rgba(255, 91, 122, 0.95);
}
.news-widget__rxn--fire {
  color: rgba(255, 138, 61, 0.95);
}
.news-widget__rxn--trophy {
  color: rgba(252, 221, 94, 0.95);
}

.news-widget__footer {
  margin: 0.6rem 0 0;
  text-align: right;
}

.news-widget__more {
  color: var(--gold, #fcdd5e);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.85rem;
}

.news-widget__more:hover {
  text-decoration: underline;
}

@media (max-width: 560px) {
  .news-widget__link {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "kind title time"
      "new summary summary"
      "reactions reactions reactions";
  }
  .news-widget__new {
    justify-self: start;
  }
}

/* ---- News "What's new" feed ------------------------------------------- */
.nav-news__badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.45rem;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: #0a0a0a;
  background: var(--gold, #fcdd5e);
  border-radius: 3px;
  vertical-align: middle;
  animation: nav-news-pulse 1.8s ease-in-out infinite;
}

@keyframes nav-news-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

.news-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.news-card {
  padding: 1rem 1.1rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.news-card:hover {
  border-color: rgba(252, 221, 94, 0.3);
}

.news-card--pinned {
  border-color: rgba(252, 221, 94, 0.45);
  background: rgba(252, 221, 94, 0.04);
}

.news-card--draft {
  opacity: 0.7;
  border-style: dashed;
}

.news-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.news-card__kind {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.news-card__kind--feature {
  color: #fcdd5e;
  border-color: rgba(252, 221, 94, 0.6);
  background: rgba(252, 221, 94, 0.08);
}

.news-card__kind--update {
  color: #6fd5ff;
  border-color: rgba(111, 213, 255, 0.6);
  background: rgba(111, 213, 255, 0.08);
}

.news-card__kind--fix {
  color: #7ee49a;
  border-color: rgba(126, 228, 154, 0.5);
  background: rgba(126, 228, 154, 0.08);
}

.news-card__kind--announcement {
  color: #ffb27a;
  border-color: rgba(255, 178, 122, 0.55);
  background: rgba(255, 178, 122, 0.08);
}

.news-card__kind--event {
  color: #d7a0ff;
  border-color: rgba(215, 160, 255, 0.55);
  background: rgba(215, 160, 255, 0.08);
}

.news-card__pinned,
.news-card__version,
.news-card__draft {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.news-card__pinned {
  color: #fcdd5e;
  border-color: rgba(252, 221, 94, 0.5);
}

.news-card__draft {
  color: #ff9a9a;
  border-color: rgba(255, 154, 154, 0.5);
}

.news-card__time {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.news-card__title {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
}

.news-card__summary {
  margin: 0 0 0.5rem;
  color: var(--white);
  font-size: 0.98rem;
  line-height: 1.45;
}

.news-card__body {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* v1.38.1 — reaction strip on news cards. Mirrors the
   leaderboard reaction chips visually so the vocabulary
   stays consistent across the site. */
.news-card__reactions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}
.news-rxn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.news-rxn:hover:not([disabled]) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--white);
}
.news-rxn[disabled] {
  cursor: not-allowed;
  opacity: 0.65;
}
.news-rxn.is-active {
  background: rgba(245, 166, 35, 0.18);
  border-color: rgba(245, 166, 35, 0.35);
  color: var(--white);
}
.news-rxn--heart.is-active {
  background: rgba(255, 91, 122, 0.18);
  border-color: rgba(255, 91, 122, 0.4);
}
.news-rxn--fire.is-active {
  background: rgba(255, 138, 61, 0.2);
  border-color: rgba(255, 138, 61, 0.42);
}
.news-rxn__icon {
  display: inline-flex;
  align-items: center;
}
.news-rxn__n {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}

.news-card__body p {
  margin: 0 0 0.5rem;
}

.news-card__body ul,
.news-card__body ol {
  margin: 0 0 0.5rem 1.25rem;
  padding: 0;
}

.news-card__body a {
  color: var(--gold, #fcdd5e);
  text-decoration: underline;
}

.news-card__body code {
  background: rgba(255, 255, 255, 0.06);
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  font-size: 0.85em;
}

.news-card__admin {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--border);
}

.news-card__delete {
  color: #ff9a9a !important;
}

.news-composer {
  border-color: rgba(252, 221, 94, 0.35);
  background: rgba(252, 221, 94, 0.03);
}

.news-composer .dash-card__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.news-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.news-form__actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.news-feed__tools {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.news-filter select {
  padding: 0.35rem 0.5rem;
  background: rgba(255, 255, 255, 0.02);
  color: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
}

/* The native option popup inherits a near-transparent background
   from the select, which in dark mode renders dark-grey text on
   dark-grey on Windows Chrome/Edge (filed as a bug screenshot
   from a member). Pin the option rows to a solid dark fill with
   light text the same way `.auth-form select option` already
   does, so the dropdown is readable in every browser/OS combo
   we ship for. */
.news-filter select option {
  background: #0b0b10;
  color: var(--white);
}
.news-filter select option:checked,
.news-filter select option:hover {
  background: linear-gradient(var(--red), var(--red));
  color: #fff;
}

.dash-upload-status.is-error {
  color: #ff9a9a;
}

.site-footer__links {
  margin-left: auto;
  font-size: 0.9rem;
  color: var(--muted);
}
.site-footer__links a {
  color: var(--muted);
  text-decoration: none;
}
.site-footer__links a:hover {
  color: var(--fg);
  text-decoration: underline;
}

.legal-page {
  max-width: 780px;
  margin: 2rem auto 4rem;
  padding: 0 1.5rem;
  color: var(--fg);
}
.legal-page__inner {
  background: rgba(255, 255, 255, 0.02);
  padding: 1.75rem 2rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  line-height: 1.65;
}
.legal-page__inner h1 {
  margin-top: 0;
}
.legal-page__inner h2 {
  margin-top: 2rem;
  font-size: 1.15rem;
  color: var(--accent, #e6b23c);
}
.legal-page__updated {
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: -0.75rem;
}

.danger-zone {
  border: 1px solid rgba(255, 110, 110, 0.4);
  background: rgba(255, 110, 110, 0.05);
  padding: 0.9rem 1rem;
  border-radius: 6px;
  margin-top: 1rem;
}
.danger-zone h3 {
  color: #ff9a9a;
  margin-top: 0;
}
.danger-zone .btn--danger {
  background: rgba(255, 110, 110, 0.2);
  color: #ffdada;
  border: 1px solid rgba(255, 110, 110, 0.45);
}
.danger-zone .btn--danger:hover {
  background: rgba(255, 110, 110, 0.35);
}

.session-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.session-row {
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.session-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
}
.session-row__meta {
  font-size: 0.8rem;
  color: var(--muted);
}
.session-row__actions {
  margin-top: 0.25rem;
}
.session-row--expired {
  opacity: 0.55;
}
.dash-form__details {
  margin-top: 0.6rem;
  padding: 0.5rem 0.7rem;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 6px;
}
.dash-form__details > summary {
  cursor: pointer;
  font-weight: 600;
}
.session-badge {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  font-size: 0.7rem;
  border-radius: 999px;
  background: rgba(230, 178, 60, 0.15);
  color: #e6b23c;
  border: 1px solid rgba(230, 178, 60, 0.35);
  margin-left: auto;
}
.session-badge--current {
  background: rgba(120, 200, 120, 0.15);
  color: #9ad39a;
  border-color: rgba(120, 200, 120, 0.35);
}
.sessions-actions {
  margin-top: 0.75rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.recovery-card {
  margin: 0.75rem 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}
.recovery-card__title {
  margin: 0 0 0.4rem 0;
  font-size: 0.95rem;
  color: var(--heading, #fff);
}
.recovery-new {
  margin: 0.9rem 0;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(230, 178, 60, 0.45);
  background: rgba(230, 178, 60, 0.07);
  border-radius: 6px;
}
.recovery-new__title {
  margin: 0 0 0.4rem 0;
  color: #f0c659;
}
.recovery-list {
  list-style: decimal;
  padding-left: 1.4rem;
  margin: 0.5rem 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1rem;
  letter-spacing: 0.04em;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem 1rem;
}
.recovery-list li {
  padding: 0.1rem 0.3rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.admin-security-panel {
  margin: 0.75rem 0;
  padding: 0.9rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}
.admin-sec-title {
  margin: 0 0 0.3rem 0;
  font-size: 1.05rem;
}
.admin-sec-subtitle {
  margin: 1rem 0 0.35rem 0;
  font-size: 0.9rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.admin-sec-profile {
  color: var(--muted);
  font-size: 0.88rem;
  margin-bottom: 0.35rem;
}
.admin-sec-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.admin-sec-list li {
  padding: 0.45rem 0.65rem;
  border-left: 2px solid rgba(230, 178, 60, 0.45);
  background: rgba(255, 255, 255, 0.025);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.admin-sec-head {
  font-size: 0.95rem;
  font-weight: 600;
}
.admin-sec-meta {
  font-size: 0.78rem;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.admin-sec-body {
  font-size: 0.85rem;
  color: var(--fg);
  margin-top: 0.2rem;
}

@media (max-width: 640px) {
  .news-form__row {
    grid-template-columns: 1fr;
  }
}

.dash-profile__actions {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.admin-modal__panel--narrow {
  width: min(720px, 100%);
}

/* --------------------------------------------------------------------------
 * Portfolio page
 * -------------------------------------------------------------------------- */

.portfolio-page {
  padding: 6rem 1rem 4rem;
  min-height: calc(100vh - 6rem);
}

.portfolio-page__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.portfolio-search {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
}

.portfolio-search__label {
  flex: 1;
}

.portfolio-search input[type="search"] {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  padding: 0.7rem 0.85rem;
  color: var(--white);
  background: rgba(5, 5, 8, 0.65);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.portfolio-search input[type="search"]:focus {
  outline: none;
  border-color: rgba(230, 57, 70, 0.5);
}

.portfolio-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  min-height: 1.25rem;
}

.portfolio-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.portfolio-hero {
  display: grid;
  gap: 1.5rem;
  padding: 1.75rem;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
}

@media (min-width: 720px) {
  .portfolio-hero {
    grid-template-columns: 220px 1fr;
    align-items: center;
  }
}

.portfolio-hero__photo {
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.35);
}

.portfolio-hero__body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.portfolio-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.portfolio-hero__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 3rem);
  letter-spacing: 0.06em;
  line-height: 1;
}

.portfolio-hero__squad,
.portfolio-hero__games,
.portfolio-hero__since {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.3;
}

.portfolio-flag {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border: 1px solid transparent;
  border-radius: 4px;
}

.portfolio-flag--founder {
  color: #ffe79a;
  background: rgba(252, 221, 94, 0.18);
  border-color: rgba(252, 221, 94, 0.55);
}

.portfolio-flag--head,
.portfolio-flag--captain {
  color: #ffb3b8;
  background: rgba(230, 57, 70, 0.15);
  border-color: rgba(230, 57, 70, 0.45);
}

.portfolio-flag--vice {
  color: #a7c6ff;
  background: rgba(18, 77, 177, 0.2);
  border-color: rgba(18, 77, 177, 0.5);
}

.portfolio-flag--member {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
}

.portfolio-flag--judge {
  color: #a7f5d0;
  background: rgba(22, 163, 74, 0.15);
  border-color: rgba(22, 163, 74, 0.55);
}

.portfolio-flag--pro {
  color: #fde68a;
  background: rgba(202, 138, 4, 0.18);
  border-color: rgba(202, 138, 4, 0.5);
}

.portfolio-stats {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.portfolio-stat {
  padding: 1.1rem 1.2rem;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.portfolio-stat__value {
  font-family: var(--font-display);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--gold);
  letter-spacing: 0.04em;
}

.portfolio-stat--active {
  border-color: rgba(230, 57, 70, 0.45);
  background: linear-gradient(135deg, rgba(230, 57, 70, 0.18), var(--bg-panel));
}

.portfolio-stat--active .portfolio-stat__value {
  color: #ffb3b8;
}

.portfolio-stat__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.portfolio-stat__meta {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 600;
}

.portfolio-pergame {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.portfolio-pergame__card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.9rem;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.9rem;
}

.portfolio-pergame__game {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
}

.portfolio-pergame__points {
  color: var(--gold);
  font-weight: 700;
}

.portfolio-pergame__events {
  color: var(--muted);
  font-size: 0.82rem;
}

.portfolio-filters {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.portfolio-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.portfolio-section-title {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.08em;
  color: var(--white);
}

.portfolio-note {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

.portfolio-table-wrap {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem;
}

.portfolio-table-scroll {
  overflow-x: auto;
}

.portfolio-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.portfolio-table thead th {
  text-align: left;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.portfolio-table tbody td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.portfolio-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

.portfolio-points-cell {
  font-weight: 700;
  color: var(--gold);
  text-align: right;
}

.portfolio-bracket-cell a {
  font-weight: 600;
}

/* v1.37.0 — reaction strip on the portfolio table.
 *
 * Each pill is a button so it gets keyboard focus + screen
 * reader pressed-state semantics for free via aria-pressed.
 * Active state uses a warm tint instead of a solid accent
 * because all three reaction types share the strip and
 * giving each its own active color would compete with the
 * existing gold/gt/non-scoring badges in the same row.
 */
.portfolio-reactions-cell {
  white-space: nowrap;
}
.rxn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.18rem 0.45rem;
  margin-right: 0.25rem;
  font-size: 0.78rem;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.rxn:hover:not(:disabled) {
  background: rgba(252, 221, 94, 0.08);
  border-color: rgba(252, 221, 94, 0.35);
}
.rxn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.rxn:disabled {
  cursor: progress;
  opacity: 0.6;
}
.rxn--active {
  background: rgba(252, 221, 94, 0.18);
  border-color: rgba(252, 221, 94, 0.6);
  color: var(--gold);
}
.rxn__icon {
  font-size: 0.95rem;
  line-height: 1;
}
.rxn__count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* v1.37.1 — checkbox row used in the dashboard
 * notification-preferences card. Keeps the checkbox aligned
 * to the top of the explanatory copy so two-line descriptions
 * (which is the common case here) don't push the box visually
 * off-center.
 */
.dash-toggle {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.5rem 0;
  cursor: pointer;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text);
}
.dash-toggle input[type="checkbox"] {
  margin-top: 0.2rem;
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--gold);
}
.dash-toggle strong {
  color: var(--gold);
}

.portfolio-gt {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.08rem 0.35rem;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  background: rgba(252, 221, 94, 0.18);
  color: var(--gold);
  border: 1px solid rgba(252, 221, 94, 0.5);
  border-radius: 3px;
}

.portfolio-gametag {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 4px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
}

.portfolio-empty {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Small-screen tightening */
@media (max-width: 520px) {
  .portfolio-search {
    flex-direction: column;
  }
  .portfolio-hero__photo {
    width: 160px;
    height: 160px;
  }
}

/* --------------------------------------------------------------------------
   Multi-game PRO flags
   -------------------------------------------------------------------------- */

/* Checkbox fieldsets on the dashboard + admin edit screens that let members
   pick which games their PRO status should cover. Minimal styling; each
   <label> reuses the surface's existing .dash-check / .admin-check look. */
.dash-pro-games,
.admin-pro-games {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.6rem 0.9rem 0.75rem;
  margin: 0;
  background: rgba(255, 255, 255, 0.02);
}

.dash-pro-games > legend,
.admin-pro-games > legend {
  padding: 0 0.35rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.dash-pro-games__help {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.dash-email-gate {
  margin: 0.35rem 0 0.75rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(234, 179, 8, 0.55);
  background: rgba(234, 179, 8, 0.12);
  border-radius: 6px;
  font-size: 0.85rem;
  color: #b45309;
  line-height: 1.4;
}
.dash-email-gate[hidden] {
  display: none;
}
.dash-email-gate strong {
  color: inherit;
}

.dash-jlap-status {
  margin: 0 0 0.85rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(148, 163, 184, 0.08);
  border-radius: 6px;
  font-size: 0.9rem;
  line-height: 1.4;
}
.dash-jlap-status[hidden] {
  display: none;
}
.dash-jlap-status__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.25rem;
  font-weight: 600;
}
.dash-jlap-status__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #94a3b8;
  display: inline-block;
}
.dash-jlap-status__detail {
  margin: 0;
  color: #334155;
}
.dash-jlap-status__renew {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  color: #7c2d12;
}
.dash-jlap-status__renew[hidden] {
  display: none;
}
.dash-jlap-status--ok {
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.1);
}
.dash-jlap-status--ok .dash-jlap-status__dot {
  background: #059669;
}
.dash-jlap-status--pending {
  border-color: rgba(14, 165, 233, 0.45);
  background: rgba(14, 165, 233, 0.1);
}
.dash-jlap-status--pending .dash-jlap-status__dot {
  background: #0284c7;
}
.dash-jlap-status--warn {
  border-color: rgba(234, 179, 8, 0.55);
  background: rgba(234, 179, 8, 0.12);
}
.dash-jlap-status--warn .dash-jlap-status__dot {
  background: #ca8a04;
}
.dash-jlap-status--expired,
.dash-jlap-status--rejected {
  border-color: rgba(239, 68, 68, 0.55);
  background: rgba(239, 68, 68, 0.1);
}
.dash-jlap-status--expired .dash-jlap-status__dot,
.dash-jlap-status--rejected .dash-jlap-status__dot {
  background: #dc2626;
}

.staff-2fa-banner {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.45;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(148, 163, 184, 0.08);
}
.staff-2fa-banner[hidden] {
  display: none;
}
.staff-2fa-banner__title {
  display: block;
  margin: 0 0 0.3rem;
  font-weight: 700;
}
.staff-2fa-banner__body {
  margin: 0;
  color: #334155;
}
.staff-2fa-banner--warn {
  border-color: rgba(234, 179, 8, 0.55);
  background: rgba(234, 179, 8, 0.12);
}
.staff-2fa-banner--bad {
  border-color: rgba(239, 68, 68, 0.6);
  background: rgba(239, 68, 68, 0.12);
}
.staff-2fa-gate {
  max-width: 720px;
  margin: 2.5rem auto;
  padding: 1.5rem 1.75rem;
  border: 1px solid rgba(239, 68, 68, 0.55);
  background: rgba(239, 68, 68, 0.08);
  border-radius: 10px;
  line-height: 1.55;
}
.staff-2fa-gate__title {
  margin: 0 0 0.75rem;
  font-size: 1.35rem;
  color: #991b1b;
}
.staff-2fa-gate code {
  padding: 0.05rem 0.3rem;
  background: rgba(15, 23, 42, 0.08);
  border-radius: 4px;
  font-size: 0.9em;
}

/* v1.33.0 — Staff sunset reactivation gate. Visually close to the
   2FA gate so staff see them as related guardrails, but uses an
   amber palette because the remedy is a short re-verification, not
   a "go enrol a missing factor" detour. */
.staff-sunset-gate {
  max-width: 640px;
  margin: 2.5rem auto;
  padding: 1.5rem 1.75rem;
  border: 1px solid rgba(234, 179, 8, 0.6);
  background: rgba(234, 179, 8, 0.1);
  border-radius: 10px;
  line-height: 1.55;
}
.staff-sunset-gate__title {
  margin: 0 0 0.5rem;
  font-size: 1.3rem;
  color: #854d0e;
}
.staff-sunset-gate__lede {
  margin: 0 0 1rem;
  color: #3f3f46;
}
.staff-sunset-gate__form {
  display: grid;
  gap: 0.75rem;
}
.staff-sunset-gate__field {
  display: grid;
  gap: 0.3rem;
}
.staff-sunset-gate__field > span {
  font-weight: 600;
  font-size: 0.95rem;
  color: #27272a;
}
.staff-sunset-gate__field input,
.staff-sunset-gate__field textarea {
  font: inherit;
  padding: 0.5rem 0.65rem;
  border: 1px solid rgba(15, 23, 42, 0.2);
  border-radius: 6px;
  background: #fff;
  color: inherit;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}
.staff-sunset-gate__field input:focus,
.staff-sunset-gate__field textarea:focus {
  outline: 2px solid rgba(234, 179, 8, 0.55);
  outline-offset: 1px;
  border-color: rgba(234, 179, 8, 0.75);
}
.staff-sunset-gate__actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}
.staff-sunset-gate__status {
  margin: 0.25rem 0 0;
  font-size: 0.95rem;
}
.staff-sunset-gate__status--info {
  color: #1e3a8a;
}
.staff-sunset-gate__status--ok {
  color: #065f46;
}
.staff-sunset-gate__status--warn {
  color: #854d0e;
}
.staff-sunset-gate__status--bad {
  color: #991b1b;
}

/* v1.35.0 — Admin 2FA reset form. Rendered inline inside
   #admin-security-result on the admin page when an admin clicks
   "Reset 2FA" for a target. Visually similar to the v1.33 sunset
   gate (same field/label cadence) but blue rather than amber
   because this is a deliberate operator action, not a remediation
   prompt for the operator themselves. */
.admin-2fa-reset-form {
  display: grid;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(59, 130, 246, 0.45);
  background: rgba(59, 130, 246, 0.08);
  border-radius: 8px;
  margin-top: 0.5rem;
}
.admin-2fa-reset-form__lede {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #1e3a8a;
}
.admin-2fa-reset-form__field {
  display: grid;
  gap: 0.3rem;
}
.admin-2fa-reset-form__field > span {
  font-weight: 600;
  font-size: 0.92rem;
}
.admin-2fa-reset-form__field input,
.admin-2fa-reset-form__field textarea,
.admin-2fa-reset-form__field select {
  font: inherit;
  padding: 0.5rem 0.65rem;
  border: 1px solid rgba(15, 23, 42, 0.2);
  border-radius: 6px;
  background: #fff;
  color: inherit;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}
.admin-2fa-reset-form__field input:focus,
.admin-2fa-reset-form__field textarea:focus,
.admin-2fa-reset-form__field select:focus {
  outline: 2px solid rgba(59, 130, 246, 0.55);
  outline-offset: 1px;
  border-color: rgba(59, 130, 246, 0.75);
}
.admin-2fa-reset-form__actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}
.admin-2fa-reset-form__status {
  margin: 0.25rem 0 0;
  font-size: 0.95rem;
}

.dash-pro-games__list,
.admin-pro-games__list {
  display: grid;
  gap: 0.35rem 0.9rem;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.dash-pro-games__item,
.admin-pro-games__item {
  margin: 0;
}

/* v1.14.0: Per-game PRO evidence sub-form. Rendered by dashboard-app.js as
   one card per newly-ticked game. Beyblade X cards also carry a
   league select (PBBL/XT/XV); every game accepts a photo and/or a link.
   Layout stacks on narrow viewports so the verifier queue screenshots
   stay readable. */
.dash-pro-evidence {
  margin-top: 0.9rem;
  display: grid;
  gap: 0.75rem;
}

.dash-pro-evidence__item {
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
  background: rgba(111, 213, 255, 0.04);
  display: grid;
  gap: 0.55rem;
}

.dash-pro-evidence__head {
  font-weight: 600;
  color: #6fd5ff;
  font-size: 0.95rem;
}

.dash-pro-evidence__field {
  display: grid;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.dash-pro-evidence__field input[type="url"],
.dash-pro-evidence__field input[type="text"],
.dash-pro-evidence__field select {
  width: 100%;
  min-height: 36px;
  padding: 0.35rem 0.55rem;
  border-radius: 6px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
  background: var(--card, rgba(0, 0, 0, 0.25));
  color: var(--text, #fff);
  font: inherit;
}

.id-judge-row {
  display: grid;
  gap: 0.25rem;
  margin-bottom: 0.6rem;
}

/* v1.26.0 — Challonge auto-fetch row: a ghost button tucked under the
   challonge-url input and a muted status line for feedback. */
.dash-challonge-fetch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: -0.2rem 0 0.6rem;
}

.dash-challonge-status {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted, #9aa);
  flex: 1 1 240px;
  min-width: 0;
}

/* v1.26.0 — Pill on portfolio / submissions list marking rows whose
   Challonge bracket the server fetched at ingest time. Visual twin of
   the GT-multiplier pill but in Challonge's blue. */
.pill--challonge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(37, 125, 191, 0.18);
  color: #6fb9ef;
  border: 1px solid rgba(111, 185, 239, 0.35);
}

/* v1.27.0 — upgraded pill for rows where the server matched the
   member's IGN against the bracket's participant list AND the
   final_rank agreed with the claimed placement. Stronger colour, a
   checkmark glyph; visually distinct from the URL-only v1.26 pill. */
.pill--challonge-placement {
  background: rgba(42, 160, 110, 0.2);
  color: #6de0a6;
  border-color: rgba(109, 224, 166, 0.4);
}

/* v1.28.0 — verifier side-by-side bracket snapshot. Sits directly
   under the "Challonge" link in the pending queue so the reviewer
   can compare typed event name + player count against what
   Challonge had at preview time, without leaving the page. */
.verif-chal-snap {
  margin-top: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--muted, #9aa);
  background: rgba(111, 185, 239, 0.08);
  border-left: 2px solid rgba(111, 185, 239, 0.35);
  border-radius: 0 4px 4px 0;
  word-break: break-word;
}

/* v1.28.0 — duplicate-poster warning. Advisory (not a block) — the
   verifier still decides — but the colour + icon glyph make the
   "look at this one" signal hard to miss even in a long queue. */
.verif-dup-warn {
  display: inline-block;
  margin-top: 0.3rem;
  padding: 0.15rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(224, 160, 70, 0.18);
  color: #e8b978;
  border: 1px solid rgba(232, 185, 120, 0.35);
  border-radius: 999px;
}
/* v1.30.0 - near-duplicate (pHash) variant. Softer orange instead
   of the exact-match red because the signal is weaker: two different
   events with the same overlay template can legitimately collide. */
.verif-dup-warn--phash {
  background: rgba(255, 171, 0, 0.08);
  border-color: rgba(255, 171, 0, 0.4);
  color: #ffcc66;
}

.verif-dup-warn::before {
  content: "\26A0  ";
}

/* v1.49.6 — re-submission lineage badge. Shown on queue
   rows that landed via the v1.49.5 "Fix & re-submit" flow.
   Visually distinct from the orange duplicate-poster warning
   (which is a "be suspicious" signal): re-submissions are a
   "you have history on this row" context badge, so a calm
   blue/cyan instead of orange. The arrow glyph is set inline
   in the label rather than via ::before so the existing
   ::before warning glyph rule above doesn't fire on it. */
.verif-resub-warn {
  display: inline-block;
  margin-top: 0.3rem;
  padding: 0.15rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(120, 180, 230, 0.14);
  color: #90c4ec;
  border: 1px solid rgba(120, 180, 230, 0.4);
  border-radius: 999px;
  white-space: pre-line;
  cursor: help;
}

/* v1.28.0 — rejection reason template dropdown. Sits immediately
   above the note textarea so picking one fills the textarea in one
   click; "Custom..." clears it and drops focus into the textarea. */
.verif-reject-template {
  display: block;
  width: 100%;
  margin-bottom: 0.3rem;
  padding: 0.3rem 0.45rem;
  font-size: 0.78rem;
  color: var(--text, #eee);
  background: var(--surface-2, #1e2530);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 4px;
}

/* v1.29.0 - verifier bulk-approve toolbar. Sits right above the
   pending table, stays hidden until at least one row is checked,
   and carries the "Approve selected (N)" button. Uses a warning
   border so it's obviously a "mass write" affordance. */
.verif-bulkbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.4rem 0 0.55rem;
  padding: 0.5rem 0.7rem;
  background: rgba(255, 193, 7, 0.07);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 6px;
  font-size: 0.85rem;
}
.verif-bulkbar[hidden] {
  display: none;
}
.verif-bulkbar__label {
  font-weight: 600;
  color: var(--text, #eee);
}
.verif-bulkbar__hint {
  margin-left: auto;
  color: var(--text-muted, #9aa4b2);
  font-size: 0.78rem;
}
.verif-bulk-cb-wrap {
  display: inline-block;
  margin-right: 0.35rem;
  vertical-align: middle;
}
.verif-bulk-cb {
  cursor: pointer;
  vertical-align: middle;
}
.verif-bulk-cb:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

/* v1.50.2 — verifier queue age badge. Color tiers match the
   v1.50.0 stale-achievement-nudge cron's escalation
   thresholds (5 / 14 / 30 days) so the inbox ping and the
   queue UI agree on which rows are stuck. */
.verif-age {
  display: inline-block;
  margin-right: 0.4rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid currentColor;
  vertical-align: middle;
  white-space: nowrap;
  cursor: help;
}
.verif-age--fresh {
  color: rgba(148, 163, 184, 0.9);
  background: rgba(148, 163, 184, 0.08);
}
.verif-age--tier1 {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.10);
}
.verif-age--tier2 {
  color: #fb923c;
  background: rgba(251, 146, 60, 0.12);
}
.verif-age--tier3 {
  color: #f87171;
  background: rgba(248, 113, 113, 0.14);
  animation: verif-age-pulse 2.4s ease-in-out infinite;
}
@keyframes verif-age-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.15); }
}

/* v1.51.2 — verifier "claim" pill + Take/Release buttons.
   When a verifier claims a pending row, the v1.50.0 stale-
   achievement cron stops fanning out pings to other
   verifiers; the claim badge surfaces that ownership in
   the queue UI so reviewers don't double-up on work. */
.verif-claim {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  border: 1px solid currentColor;
  vertical-align: middle;
  white-space: nowrap;
  cursor: help;
}
.verif-claim--unclaimed {
  color: rgba(148, 163, 184, 0.85);
  background: rgba(148, 163, 184, 0.06);
  border-style: dashed;
}
.verif-claim--mine {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.10);
}
.verif-claim--other {
  color: #6fd5ff;
  background: rgba(111, 213, 255, 0.08);
}
.verif-claim__btn {
  appearance: none;
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 0 0.4rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: transparent;
  color: inherit;
  cursor: pointer;
  line-height: 1.4;
}
.verif-claim__btn:hover {
  background: rgba(255, 255, 255, 0.08);
}
.verif-claim__btn:disabled {
  opacity: 0.6;
  cursor: progress;
}
.verif-claim__label {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.62rem;
}

/* v1.29.0 - "View poster" self-view link in My submissions. Keeps
   the inline style of the existing "does not count toward
   leaderboard" annotation (after an existing " - " bullet) so the
   detail cell stays scannable. */
.dash-poster-link {
  color: var(--link, #6fd5ff);
  text-decoration: underline dotted;
  cursor: pointer;
}
.dash-poster-link:hover,
.dash-poster-link:focus {
  text-decoration: underline;
}

/* Verifier-side: compact evidence list under each pending ID flag request.
   Photos load on click (via GET /api/id-flags/:id) so the queue stays
   fast. */
.verif-idflag-evidence {
  margin-top: 0.4rem;
  display: grid;
  gap: 0.35rem;
  font-size: 0.85rem;
}

.verif-idflag-evidence__item {
  border-left: 3px solid #6fd5ff;
  padding: 0.25rem 0.5rem;
  background: rgba(111, 213, 255, 0.05);
  border-radius: 0 6px 6px 0;
}

.verif-idflag-evidence__badge {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  border: 1px solid rgba(252, 221, 94, 0.4);
  background: rgba(252, 221, 94, 0.08);
  color: #fcdd5e;
  font-size: 0.75rem;
}

.verif-idflag-evidence__link {
  color: #6fd5ff;
  word-break: break-all;
}

/* Digital-ID line that lists the approved PRO-game pills. Uses flex-wrap so
   a member with several PRO flags still reads cleanly on the ID card. */
.digital-id-card__pro-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.digital-id-card__pro-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.digital-id-flag {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #fde68a;
  background: rgba(202, 138, 4, 0.18);
  border-color: rgba(202, 138, 4, 0.5);
}

/* Shared PRO pill look for the members directory and verify card. The
   per-game tint classes below override just the color trio, so a pill
   always keeps the same shape regardless of which surface it's on. */
.verify-flag--pro {
  color: #fde68a;
  background: rgba(202, 138, 4, 0.18);
  border-color: rgba(202, 138, 4, 0.5);
}

.verify-flag--judge {
  color: #a7f5d0;
  background: rgba(22, 163, 74, 0.15);
  border-color: rgba(22, 163, 74, 0.55);
}

/* Per-game tint. We target every surface (.lb-badge, .portfolio-flag,
   .verify-flag, .digital-id-flag) via attribute selectors so new surfaces
   pick up the palette for free. Each game has its own hue so a glance at
   a member's pills tells you which scenes they're pro in. */
[class*="--pro-bbx"] {
  color: #fde68a;
  background: rgba(202, 138, 4, 0.2);
  border-color: rgba(202, 138, 4, 0.55);
}

[class*="--pro-tekken"] {
  color: #ffb3b8;
  background: rgba(230, 57, 70, 0.18);
  border-color: rgba(230, 57, 70, 0.55);
}

[class*="--pro-ml"] {
  color: #93c5fd;
  background: rgba(37, 99, 235, 0.18);
  border-color: rgba(37, 99, 235, 0.55);
}

[class*="--pro-hok"] {
  color: #e9d5ff;
  background: rgba(147, 51, 234, 0.2);
  border-color: rgba(147, 51, 234, 0.55);
}

[class*="--pro-codm"] {
  color: #d9f99d;
  background: rgba(101, 163, 13, 0.2);
  border-color: rgba(101, 163, 13, 0.55);
}

[class*="--pro-valorant"] {
  color: #fecdd3;
  background: rgba(244, 63, 94, 0.18);
  border-color: rgba(244, 63, 94, 0.55);
}

[class*="--pro-dota2"] {
  color: #fdba74;
  background: rgba(234, 88, 12, 0.2);
  border-color: rgba(234, 88, 12, 0.55);
}

[class*="--pro-generic"] {
  color: #fde68a;
  background: rgba(202, 138, 4, 0.15);
  border-color: rgba(202, 138, 4, 0.45);
}

/* v1.20.0 — Staff 2FA rollout card on the admin dashboard. Tone mirrors
   the dash-jlap-status convention so admins get the same visual cue for
   "everything's fine", "clock is ticking", and "we're past the grace". */
.admin-2fa-rollout__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}
.admin-2fa-rollout__status {
  display: inline-block;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(148, 163, 184, 0.1);
  color: #cbd5e1;
}
.admin-2fa-rollout--ok .admin-2fa-rollout__status {
  border-color: rgba(34, 197, 94, 0.55);
  background: rgba(34, 197, 94, 0.1);
  color: #a7f3d0;
}
.admin-2fa-rollout--pending .admin-2fa-rollout__status {
  border-color: rgba(56, 189, 248, 0.55);
  background: rgba(56, 189, 248, 0.1);
  color: #bae6fd;
}
.admin-2fa-rollout--warn .admin-2fa-rollout__status {
  border-color: rgba(234, 179, 8, 0.55);
  background: rgba(234, 179, 8, 0.12);
  color: #fde68a;
}
.admin-2fa-rollout--bad .admin-2fa-rollout__status {
  border-color: rgba(239, 68, 68, 0.6);
  background: rgba(239, 68, 68, 0.12);
  color: #fecaca;
}
.admin-2fa-rollout__stats {
  margin: 0.65rem 0 1rem;
}
.admin-2fa-rollout__table td:last-child {
  text-align: right;
  white-space: nowrap;
}
.adm-2fa-nudge[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* v1.22.0 — Leaderboard cache stats card on the admin dashboard. Tone
   mirrors the 2FA-rollout conventions so "cold cache / disabled" reads
   pending, a healthy hit-rate reads ok, and a broken/disabled cache
   reads bad. */
.admin-cache-stats__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}
.admin-cache-stats__status {
  display: inline-block;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(148, 163, 184, 0.1);
  color: #cbd5e1;
}
.admin-cache-stats--ok .admin-cache-stats__status {
  border-color: rgba(34, 197, 94, 0.55);
  background: rgba(34, 197, 94, 0.1);
  color: #a7f3d0;
}
.admin-cache-stats--pending .admin-cache-stats__status {
  border-color: rgba(56, 189, 248, 0.55);
  background: rgba(56, 189, 248, 0.1);
  color: #bae6fd;
}
.admin-cache-stats--warn .admin-cache-stats__status {
  border-color: rgba(234, 179, 8, 0.55);
  background: rgba(234, 179, 8, 0.12);
  color: #fde68a;
}
.admin-cache-stats--bad .admin-cache-stats__status {
  border-color: rgba(239, 68, 68, 0.6);
  background: rgba(239, 68, 68, 0.12);
  color: #fecaca;
}
.admin-cache-stats__footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}
.admin-cache-stats__meta {
  color: rgba(203, 213, 225, 0.75);
  font-size: 0.85rem;
}

/* v1.32.0 - Per-submission audit timeline on the member
   dashboard. The toggle is a low-key link in the detail cell; the
   expanded row spans the full submissions table via colspan=5.
   Uses a vertical-rule list so the ordering is obvious without
   extra iconography. */
.dash-timeline-toggle {
  color: rgba(148, 163, 184, 0.9);
  text-decoration: underline dotted;
  font-size: 0.85rem;
}
.dash-timeline-toggle:hover {
  color: #e2e8f0;
}
.dash-timeline-toggle--open {
  color: #bae6fd;
}
.dash-timeline-row td {
  background: rgba(15, 23, 42, 0.65);
  padding: 0.75rem 1rem 1rem;
}
.dash-timeline {
  margin: 0;
}
.dash-timeline__loading,
.dash-timeline__empty,
.dash-timeline__error {
  color: rgba(148, 163, 184, 0.85);
  font-size: 0.9rem;
}
.dash-timeline__error {
  color: #fecaca;
}
.dash-timeline__list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 0.75rem;
  border-left: 2px solid rgba(148, 163, 184, 0.3);
}
.dash-timeline__event {
  position: relative;
  padding: 0.4rem 0 0.4rem 0.75rem;
  font-size: 0.9rem;
  line-height: 1.4;
}
.dash-timeline__event::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 0.85rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.75);
}
.dash-timeline__event--verified::before {
  background: #34d399;
}
.dash-timeline__event--rejected::before,
.dash-timeline__event--appeal_denied::before {
  background: #f87171;
}
.dash-timeline__event--appeal_filed::before,
.dash-timeline__event--appeal_accepted::before {
  background: #38bdf8;
}
.dash-timeline__event--dup_signal::before {
  background: #fbbf24;
}
.dash-timeline__head {
  color: #e2e8f0;
}
.dash-timeline__actor {
  color: #bae6fd;
  font-size: 0.85rem;
  margin-left: 0.35rem;
}
.dash-timeline__actor--sys {
  color: rgba(148, 163, 184, 0.75);
  font-style: italic;
}
.dash-timeline__when {
  color: rgba(148, 163, 184, 0.8);
  font-size: 0.8rem;
  margin-left: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.dash-timeline__body {
  color: rgba(226, 232, 240, 0.85);
  margin-top: 0.15rem;
  word-wrap: break-word;
}

/* v1.31.0 - Verifier + dup-signal analytics tile on the admin
   dashboard. Shares the cache-stats card skeleton but adds a window-
   toggle button group in the header and a table + stats-grid body.
   num cells are right-aligned so throughput columns stack cleanly. */
.admin-analytics__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
  flex-wrap: wrap;
}
.admin-analytics__window {
  display: inline-flex;
  gap: 0.25rem;
}
.admin-analytics__subhead {
  margin: 1rem 0 0.5rem;
  font-size: 1rem;
  color: #cbd5e1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-analytics__pending {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  color: rgba(203, 213, 225, 0.9);
}
.admin-analytics__pending strong {
  color: #fde68a;
}
.admin-analytics__verif th.num,
.admin-analytics__verif td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.admin-analytics__verif--idle td {
  opacity: 0.55;
}
.admin-analytics__sub {
  color: rgba(148, 163, 184, 0.85);
  font-size: 0.85rem;
}
.admin-analytics__hint {
  margin: 0 0 0.75rem;
  color: rgba(203, 213, 225, 0.8);
  font-size: 0.9rem;
}
.admin-analytics__hint strong {
  color: #fde68a;
}
.admin-analytics__footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}
.admin-analytics__meta {
  color: rgba(203, 213, 225, 0.75);
  font-size: 0.85rem;
}

/* v1.49.3 — rejection-template breakdown table. Reuses the
   admin-members-table layout but adds a sparkline cell + a
   click-to-drill affordance. The drilldown card sits below
   the table, hidden until a row is clicked. */
.admin-analytics__rt-pending {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: rgba(203, 213, 225, 0.85);
}
.admin-analytics__rt-pending strong {
  color: #fde68a;
}
.admin-analytics__rt-table th.num,
.admin-analytics__rt-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.admin-analytics__rt-table tr[data-rt-template] {
  cursor: pointer;
}
.admin-analytics__rt-table tr[data-rt-template]:hover td,
.admin-analytics__rt-table tr[data-rt-template]:focus td {
  background: rgba(120, 200, 245, 0.06);
}
.rt-spark-cell {
  width: 90px;
}
.rt-spark {
  display: block;
}
.admin-analytics__rt-drill {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-left: 3px solid rgba(120, 200, 245, 0.55);
  background: rgba(120, 200, 245, 0.05);
  border-radius: 6px;
}
.admin-analytics__rt-drill[hidden] {
  display: none;
}
.admin-analytics__rt-drill-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}
.admin-analytics__rt-drill-title {
  margin: 0;
  font-size: 0.95rem;
  color: #e2e8f0;
}

/* v1.20.0 — Dashboard recovery-codes prominent warning. Only rendered
   when the remaining count is at or below 3 AND the viewer is staff, so
   the real lockout risk (staff who can be hard-gated if they lose their
   authenticator) gets a banner above the fold instead of buried in the
   TOTP panel. */
.dash-recovery-alert {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.45;
  border: 1px solid rgba(234, 179, 8, 0.55);
  background: rgba(234, 179, 8, 0.12);
}
.dash-recovery-alert[hidden] {
  display: none;
}
.dash-recovery-alert--bad {
  border-color: rgba(239, 68, 68, 0.6);
  background: rgba(239, 68, 68, 0.12);
}
.dash-recovery-alert__title {
  display: block;
  margin: 0 0 0.3rem;
  font-weight: 700;
}
.dash-recovery-alert__body {
  margin: 0;
}
.dash-recovery-alert__cta {
  display: inline-block;
  margin-top: 0.4rem;
  font-weight: 600;
  color: inherit;
  text-decoration: underline;
}

/* v1.40.0 — squad-vs-squad leaderboard */
.leaderboard-mode-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.85rem;
}
.leaderboard-squads__cards {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.lb-squad-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1rem 1.1rem;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.01)
  );
  border: 1px solid var(--border);
  border-radius: 12px;
}
.lb-squad-card--1 {
  border-color: rgba(245, 166, 35, 0.55);
  box-shadow: 0 10px 30px rgba(245, 166, 35, 0.1);
}
.lb-squad-card--2 {
  border-color: rgba(180, 190, 200, 0.45);
}
.lb-squad-card--3 {
  border-color: rgba(205, 127, 50, 0.45);
}
.lb-squad-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}
.lb-squad-card__rank {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  color: var(--accent, #f5a623);
}
.lb-squad-card__name {
  font-weight: 700;
  font-size: 1.05rem;
}
.lb-squad-card__tag {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  border: 1px solid var(--border);
  border-radius: 999px;
  opacity: 0.85;
}
.lb-squad-card__metrics {
  display: grid;
  gap: 0.4rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lb-squad-card__metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.4rem 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.lb-squad-card__metric-label {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.7;
}
.lb-squad-card__metric-value {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.4rem;
}
.lb-squad-card__people {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.2rem;
  font-size: 0.85rem;
  opacity: 0.92;
}
.lb-squad-card__people strong {
  font-weight: 600;
  opacity: 0.75;
  margin-right: 0.3rem;
}
.lb-squad-card__rxn {
  display: flex;
  gap: 0.5rem;
  font-size: 0.8rem;
  opacity: 0.85;
}
.lb-squad-card--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease,
    box-shadow 0.12s ease;
}
.lb-squad-card--link:hover,
.lb-squad-card--link:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(245, 166, 35, 0.6);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
  outline: none;
}

/* v1.40.1 — squad detail page */
.squad-page {
  padding: 2.5rem 1rem 4rem;
}
.squad-page__inner {
  max-width: 1080px;
  margin: 0 auto;
}
.squad-page__crumbs {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  opacity: 0.8;
}
.squad-page__crumbs a {
  color: inherit;
  text-decoration: underline;
}
.squad-page__loading,
.squad-page__error {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
.squad-page__error {
  border-color: rgba(255, 90, 90, 0.4);
  color: rgba(255, 200, 200, 0.95);
}
.squad-hero {
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.4rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    rgba(245, 166, 35, 0.08),
    rgba(255, 255, 255, 0.01)
  );
}
.squad-hero__title {
  margin: 0 0 0.3rem;
  font-family: "Bebas Neue", sans-serif;
  font-size: 2.4rem;
  letter-spacing: 0.04em;
}
.squad-hero__sub {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  margin: 0 0 1rem;
  opacity: 0.9;
}
.squad-hero__tag {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  border: 1px solid var(--border);
  border-radius: 999px;
}
.squad-hero__meta {
  font-size: 0.85rem;
  opacity: 0.7;
}
.squad-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.squad-hero__stats li {
  display: flex;
  flex-direction: column;
  padding: 0.55rem 0.85rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  min-width: 7rem;
}
.squad-hero__label {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.7;
}
.squad-hero__value {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.6rem;
}
.squad-hero__leaders {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.squad-hero__leader {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.9rem;
}
.squad-hero__role {
  margin-right: 0.4rem;
  font-weight: 600;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.7rem;
}
.squad-roster,
.squad-timeline {
  margin-top: 1.6rem;
}
.squad-roster__heading,
.squad-timeline__heading {
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 0.05em;
  margin: 0 0 0.7rem;
  font-size: 1.4rem;
}
.squad-roster__cards {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.squad-roster__card {
  display: flex;
  flex-direction: column;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
/* v1.47.0 — the card is now an <article>, with an inner <a>
   that holds the portfolio link (photo + meta) and an
   optional <div> for manage actions (only rendered for
   captains / admins via squad-page.js). The hover lift
   moves to the inner link so the actions block doesn't
   bob with it. */
.squad-roster__link {
  display: flex;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease;
}
.squad-roster__link:hover,
.squad-roster__link:focus-visible {
  transform: translateY(-2px);
  outline: none;
}
.squad-roster__card:hover,
.squad-roster__card:focus-within {
  border-color: rgba(245, 166, 35, 0.55);
}
.squad-roster__card--managed {
  gap: 0.55rem;
}
.squad-manage__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  padding-top: 0.55rem;
  margin-top: 0.15rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.squad-manage__btn {
  font: inherit;
  font-size: 0.75rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(245, 166, 35, 0.5);
  background: rgba(245, 166, 35, 0.08);
  color: inherit;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.squad-manage__btn:hover,
.squad-manage__btn:focus-visible {
  background: rgba(245, 166, 35, 0.18);
  border-color: rgba(245, 166, 35, 0.9);
  outline: none;
}
.squad-manage__btn--remove {
  border-color: rgba(220, 80, 80, 0.55);
  background: rgba(220, 80, 80, 0.08);
}
.squad-manage__btn--remove:hover,
.squad-manage__btn--remove:focus-visible {
  background: rgba(220, 80, 80, 0.18);
  border-color: rgba(220, 80, 80, 0.95);
}
.squad-manage__status {
  font-size: 0.75rem;
  opacity: 0.8;
}
.squad-manage__status[data-kind="ok"] {
  color: rgba(120, 220, 140, 0.95);
  opacity: 1;
}
.squad-manage__status[data-kind="error"] {
  color: rgba(255, 140, 140, 0.95);
  opacity: 1;
}

/* v1.48.0 — captain transfer / step-down */
.squad-handoff {
  margin-top: 1.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(245, 166, 35, 0.35);
  border-radius: 14px;
  background: rgba(245, 166, 35, 0.04);
}
.squad-handoff__header {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.7rem;
}
.squad-handoff__heading {
  margin: 0;
  font-size: 1.15rem;
}
.squad-handoff__sub {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.75;
}
.squad-handoff__form {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
}
.squad-handoff__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8rem;
}
.squad-handoff__field select {
  font: inherit;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.25);
  color: inherit;
}
.squad-handoff__submit {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(245, 166, 35, 0.85);
  background: rgba(245, 166, 35, 0.18);
  color: inherit;
  cursor: pointer;
}
.squad-handoff__submit:hover,
.squad-handoff__submit:focus-visible {
  background: rgba(245, 166, 35, 0.32);
  outline: none;
}
.squad-handoff__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.squad-handoff__status {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.8rem;
  opacity: 0.85;
}
.squad-handoff__status[data-kind="ok"] {
  color: rgba(120, 220, 140, 0.95);
  opacity: 1;
}
.squad-handoff__status[data-kind="error"] {
  color: rgba(255, 140, 140, 0.95);
  opacity: 1;
}
@media (max-width: 640px) {
  .squad-handoff__form {
    grid-template-columns: 1fr;
  }
}

/* v1.47.1 — squad management activity log */
.squad-activity {
  margin-top: 1.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
}
.squad-activity__header {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.7rem;
}
.squad-activity__heading {
  margin: 0;
  font-size: 1.15rem;
}
.squad-activity__sub {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.75;
}
.squad-activity__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.7rem;
}
.squad-activity__filter {
  font: inherit;
  font-size: 0.75rem;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.squad-activity__filter:hover,
.squad-activity__filter:focus-visible {
  background: rgba(245, 166, 35, 0.08);
  border-color: rgba(245, 166, 35, 0.55);
  outline: none;
}
.squad-activity__filter.is-active {
  background: rgba(245, 166, 35, 0.18);
  border-color: rgba(245, 166, 35, 0.85);
}
.squad-activity__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.squad-activity__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
.squad-activity__badge {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap;
}
.squad-activity__row.is-role-change .squad-activity__badge {
  border-color: rgba(245, 166, 35, 0.7);
  color: rgba(245, 200, 120, 0.95);
}
.squad-activity__row.is-remove .squad-activity__badge {
  border-color: rgba(220, 80, 80, 0.65);
  color: rgba(255, 160, 160, 0.95);
}
.squad-activity__row.is-invite .squad-activity__badge {
  border-color: rgba(120, 180, 255, 0.55);
  color: rgba(170, 210, 255, 0.95);
}
.squad-activity__row.is-join-req .squad-activity__badge,
.squad-activity__row.is-join-cancel .squad-activity__badge,
.squad-activity__row.is-join-decide .squad-activity__badge {
  border-color: rgba(120, 220, 140, 0.55);
  color: rgba(160, 230, 180, 0.95);
}
.squad-activity__summary {
  font-size: 0.9rem;
  min-width: 0;
  word-break: break-word;
}
.squad-activity__time {
  font-size: 0.75rem;
  opacity: 0.7;
  white-space: nowrap;
}
.squad-activity__empty {
  margin: 0.6rem 0 0;
  padding: 0.7rem;
  border: 1px dashed var(--border);
  border-radius: 10px;
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.75;
}
.squad-activity__error {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  color: rgba(255, 140, 140, 0.95);
}
.squad-activity__more {
  margin-top: 0.7rem;
  font: inherit;
  font-size: 0.8rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(245, 166, 35, 0.55);
  background: rgba(245, 166, 35, 0.08);
  color: inherit;
  cursor: pointer;
}
.squad-activity__more:hover,
.squad-activity__more:focus-visible {
  background: rgba(245, 166, 35, 0.18);
  border-color: rgba(245, 166, 35, 0.95);
  outline: none;
}
.squad-activity__more:disabled {
  opacity: 0.5;
  cursor: progress;
}
.squad-roster__photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.04);
}
.squad-roster__meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.squad-roster__name {
  font-weight: 600;
}
.squad-roster__games {
  font-size: 0.8rem;
  opacity: 0.75;
}
.squad-roster__numbers {
  display: flex;
  gap: 0.8rem;
  margin-top: 0.2rem;
  font-size: 0.85rem;
  opacity: 0.92;
}
.squad-roster__empty {
  grid-column: 1 / -1;
  padding: 1rem;
  border: 1px dashed var(--border);
  border-radius: 10px;
  text-align: center;
  opacity: 0.8;
}
.squad-timeline__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.squad-timeline__item {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.7rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
.squad-timeline__date {
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 0.04em;
  opacity: 0.85;
}
.squad-timeline__blader {
  font-weight: 600;
  color: inherit;
  text-decoration: underline;
}
.squad-timeline__rank {
  margin-left: 0.3rem;
  font-weight: 600;
  color: var(--accent, #f5a623);
}
.squad-timeline__game {
  opacity: 0.75;
  font-size: 0.85rem;
}
.squad-timeline__event {
  font-size: 0.85rem;
  opacity: 0.85;
  margin-top: 0.1rem;
}
.squad-timeline__empty {
  padding: 1rem;
  border: 1px dashed var(--border);
  border-radius: 10px;
  text-align: center;
  opacity: 0.8;
}
@media (max-width: 540px) {
  .squad-timeline__item {
    grid-template-columns: 1fr;
  }
}

/* v1.40.2 — squad join request CTA + captain queue */
.squad-cta {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}
.squad-cta__state {
  margin: 0 0 0.6rem;
  font-size: 0.92rem;
}
.squad-cta__state a {
  color: inherit;
  text-decoration: underline;
}
.squad-cta__form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.squad-cta__label {
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.75;
}
.squad-cta__note {
  width: 100%;
  padding: 0.55rem 0.7rem;
  font: inherit;
  color: inherit;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  resize: vertical;
}
.squad-cta__actions {
  display: flex;
  justify-content: flex-end;
}
.squad-cta__submit,
.squad-cta__cancel {
  padding: 0.5rem 1.1rem;
  font: inherit;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: rgba(245, 166, 35, 0.18);
  color: inherit;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.squad-cta__submit:hover,
.squad-cta__cancel:hover {
  background: rgba(245, 166, 35, 0.32);
  border-color: rgba(245, 166, 35, 0.6);
}
.squad-cta__cancel {
  background: rgba(255, 90, 90, 0.18);
}
.squad-cta__cancel:hover {
  background: rgba(255, 90, 90, 0.3);
  border-color: rgba(255, 90, 90, 0.6);
}
.squad-queue {
  margin-top: 1.6rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}
.squad-queue__heading {
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 0.05em;
  margin: 0 0 0.3rem;
  font-size: 1.3rem;
}
.squad-queue__sub {
  margin: 0 0 0.8rem;
  font-size: 0.85rem;
  opacity: 0.8;
}
.squad-queue__list,
.squad-queue__recent {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.squad-queue__recent {
  margin-top: 0.4rem;
  opacity: 0.85;
}
.squad-queue__recent-heading {
  margin: 1rem 0 0.4rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.75;
}
.squad-queue__item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}
.squad-queue__head {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  justify-content: space-between;
}
.squad-queue__name {
  font-weight: 600;
  color: inherit;
  text-decoration: underline;
}
.squad-queue__note {
  font-size: 0.88rem;
  opacity: 0.92;
  white-space: pre-wrap;
}
.squad-queue__status {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--border);
  opacity: 0.85;
}
.squad-queue__status--accepted {
  border-color: rgba(120, 220, 140, 0.55);
  color: rgba(180, 240, 200, 0.95);
}
.squad-queue__status--declined,
.squad-queue__status--cancelled {
  border-color: rgba(255, 130, 130, 0.55);
  color: rgba(255, 200, 200, 0.95);
}
.squad-queue__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.squad-queue__btn {
  padding: 0.35rem 0.85rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.squad-queue__btn--accept {
  background: rgba(120, 220, 140, 0.18);
  border-color: rgba(120, 220, 140, 0.5);
}
.squad-queue__btn--accept:hover {
  background: rgba(120, 220, 140, 0.3);
}
.squad-queue__btn--decline {
  background: rgba(255, 130, 130, 0.18);
  border-color: rgba(255, 130, 130, 0.5);
}
.squad-queue__btn--decline:hover {
  background: rgba(255, 130, 130, 0.3);
}
.squad-queue__empty {
  margin: 0;
  padding: 0.7rem;
  border: 1px dashed var(--border);
  border-radius: 10px;
  text-align: center;
  opacity: 0.8;
}

/* v1.41.0 — invite codes admin panel + signup field */
.admin-invite-codes__form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}
.admin-invite-codes__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.admin-invite-codes__field {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.admin-invite-codes__field span {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.75;
}
.admin-invite-codes__field input,
.admin-invite-codes__field select {
  padding: 0.45rem 0.6rem;
  font: inherit;
  color: inherit;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.admin-invite-codes__actions {
  flex: 1 1 220px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.admin-invite-codes__filter {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0.6rem 0;
  flex-wrap: wrap;
}
.admin-invite-codes__search {
  flex: 1 1 220px;
  min-width: 180px;
  display: flex;
}
.admin-invite-codes__search input {
  flex: 1;
  padding: 0.4rem 0.6rem;
  font: inherit;
  color: inherit;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.admin-invite-codes__table-wrap {
  overflow-x: auto;
}
.admin-invite-codes__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.admin-invite-codes__table th,
.admin-invite-codes__table td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  text-align: left;
}
.invite-code-cell {
  font-family: ui-monospace, SFMono-Regular, "Menlo", monospace;
  letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.04);
  padding: 0.15rem 0.4rem;
  border-radius: 6px;
}
.invite-status {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.invite-status--active {
  border-color: rgba(120, 220, 140, 0.6);
  color: rgba(180, 240, 200, 0.95);
}
.invite-status--used {
  border-color: rgba(160, 180, 220, 0.5);
  color: rgba(190, 210, 245, 0.95);
}
.invite-status--revoked,
.invite-status--expired {
  border-color: rgba(255, 130, 130, 0.55);
  color: rgba(255, 200, 200, 0.95);
}

/* v1.42.0 — captain self-service invite codes panel */
.squad-invites {
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}
.squad-invites__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.squad-invites__heading {
  margin: 0;
  font-size: 1.05rem;
}
.squad-invites__quota {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.8;
}
.squad-invites__sub {
  margin: 0.4rem 0 0.7rem;
  opacity: 0.85;
}
.squad-invites__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: flex-end;
  margin-bottom: 0.8rem;
}
.squad-invites__field {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.squad-invites__field span {
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}
.squad-invites__field input {
  padding: 0.45rem 0.6rem;
  font: inherit;
  color: inherit;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.squad-invites__status {
  flex: 1 1 100%;
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  min-height: 1em;
  opacity: 0.9;
}
.squad-invites__status[data-kind="active"] {
  color: rgba(140, 220, 160, 0.95);
}
.squad-invites__status[data-kind="error"] {
  color: rgba(255, 170, 170, 0.95);
}
.squad-invites__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.squad-invites__item {
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
.squad-invites__row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.squad-invites__code {
  font-family: ui-monospace, SFMono-Regular, "Menlo", monospace;
  letter-spacing: 0.06em;
  background: rgba(255, 255, 255, 0.04);
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
}
.squad-invites__meta {
  margin-top: 0.3rem;
  font-size: 0.83rem;
  opacity: 0.85;
}
.squad-invites__row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.45rem;
}
.squad-invites__empty {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.7rem;
  border: 1px dashed var(--border);
  border-radius: 10px;
  text-align: center;
  opacity: 0.8;
}

/* v1.42.3 — captain analytics */
.squad-invites__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.4rem 0 0.7rem;
}
.squad-invites__stat {
  flex: 1 1 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}
.squad-invites__stat-num {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.1;
}
.squad-invites__stat-label {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-top: 0.15rem;
}
.squad-recruits {
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
}
.squad-recruits__heading {
  margin: 0 0 0.2rem;
  font-size: 0.95rem;
}
.squad-recruits__sub {
  margin: 0 0 0.55rem;
  font-size: 0.85rem;
  opacity: 0.8;
}
.squad-recruits__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.squad-recruits__item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.85rem;
}
.squad-recruits__name {
  text-decoration: none;
  color: inherit;
  font-weight: 600;
}
.squad-recruits__when {
  font-size: 0.72rem;
  opacity: 0.7;
}

/* v1.43.0 — squad announcements */
.squad-announcements {
  margin-top: 1.2rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}
.squad-announcements__heading {
  margin: 0 0 0.2rem;
  font-size: 1.1rem;
}
.squad-announcements__sub {
  margin: 0 0 0.9rem;
  font-size: 0.88rem;
  opacity: 0.78;
}
.squad-announcements__composer {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.9rem;
  margin-bottom: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}
.squad-announcements__label {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.78;
}
.squad-announcements__composer input[type="text"],
.squad-announcements__composer textarea {
  width: 100%;
  font: inherit;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  color: inherit;
  resize: vertical;
}
.squad-announcements__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
}
.squad-announcements__pin {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
}
.squad-announcements__counter {
  margin-left: auto;
  font-size: 0.75rem;
  opacity: 0.7;
}
.squad-announcements__counter--warn {
  color: #f5a623;
  opacity: 1;
}
.squad-announcements__composer button[type="submit"] {
  padding: 0.55rem 1rem;
  font: inherit;
  font-weight: 600;
  border: 0;
  border-radius: 8px;
  background: var(--accent, #ff7a59);
  color: #fff;
  cursor: pointer;
}
.squad-announcements__composer button[type="submit"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.squad-announcements__status {
  margin: 0;
  font-size: 0.85rem;
  min-height: 1.2em;
}
.squad-announcements__status--checking {
  opacity: 0.75;
}
.squad-announcements__status--active {
  color: #6cd45f;
}
.squad-announcements__status--error {
  color: #ff6b6b;
}
.squad-announcements__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.squad-announcements__item {
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}
.squad-announcements__item--pinned {
  border-color: rgba(255, 122, 89, 0.55);
  background: rgba(255, 122, 89, 0.06);
}
.squad-announcements__item-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 0.15rem;
}
.squad-announcements__item-title {
  margin: 0;
  font-size: 1rem;
  flex: 1 1 auto;
}
.squad-announcements__pin-chip {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(255, 122, 89, 0.18);
  color: #ffb39b;
}
.squad-announcements__item-meta {
  font-size: 0.78rem;
  opacity: 0.7;
  margin-bottom: 0.5rem;
}
.squad-announcements__item-body {
  font-size: 0.93rem;
  line-height: 1.45;
  white-space: normal;
  word-wrap: break-word;
}
.squad-announcements__link {
  color: #8fb6ff;
  text-decoration: underline;
}
.squad-announcements__item-actions {
  margin-top: 0.55rem;
  text-align: right;
}
.squad-announce-delete {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: inherit;
  font: inherit;
  font-size: 0.78rem;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  opacity: 0.75;
}
.squad-announce-delete:hover:not(:disabled) {
  opacity: 1;
  border-color: #ff6b6b;
  color: #ff6b6b;
}
.squad-announcements__empty {
  margin: 0.5rem 0 0;
  padding: 0.6rem 0.8rem;
  border: 1px dashed var(--border);
  border-radius: 10px;
  text-align: center;
  opacity: 0.78;
}

/* signup.html invite field */
#signup-invite {
  font-family: ui-monospace, SFMono-Regular, "Menlo", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#signup-invite-status[data-kind="active"] {
  color: rgba(140, 220, 160, 0.95);
}
#signup-invite-status[data-kind="checking"],
#signup-invite-status[data-kind="incomplete"] {
  opacity: 0.7;
}
#signup-invite-status[data-kind="not_found"],
#signup-invite-status[data-kind="invalid"],
#signup-invite-status[data-kind="revoked"],
#signup-invite-status[data-kind="used"],
#signup-invite-status[data-kind="expired"],
#signup-invite-status[data-kind="error"] {
  color: rgba(255, 170, 170, 0.95);
}

/* v1.46.0 — Public roster page (roster.html).
   Anonymous browseable view: every active member, grouped
   by squad, captains-first inside each group. Real names
   never appear here — that's the directory's job (auth-
   gated). */
.roster-page {
  max-width: 1100px;
  margin: 2.5rem auto;
  padding: 0 1.25rem;
}
.roster-page__title {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(2.2rem, 4vw, 3rem);
  letter-spacing: 0.04em;
  margin: 0 0 0.5rem;
}
.roster-page__lead {
  margin: 0 0 0.4rem;
  opacity: 0.85;
  line-height: 1.55;
  max-width: 60ch;
}
.roster-page__note {
  margin: 0 0 1.5rem;
  opacity: 0.75;
  font-size: 0.9rem;
}
.roster-page__note a { color: inherit; text-decoration: underline; }
.roster-page__status {
  margin: 0 0 1rem;
  opacity: 0.85;
  min-height: 1.4em;
  font-size: 0.92rem;
}
.roster-page__status[data-kind="error"] { color: rgba(255, 170, 170, 0.95); }
.roster-page__status[data-kind="ok"] { opacity: 0.7; }
.roster-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.25);
  margin: 0 0 1rem;
}
@media (max-width: 600px) {
  .roster-form { grid-template-columns: 1fr; }
}
.roster-form__label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.85;
}
.roster-form__label select {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(15, 23, 42, 0.7);
  color: inherit;
}
.roster-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.roster-empty {
  padding: 1.25rem;
  text-align: center;
  opacity: 0.7;
  border: 1px dashed rgba(148, 163, 184, 0.35);
  border-radius: 10px;
}
.roster-group {
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.55);
  padding: 0.85rem 1.1rem 1rem;
}
.roster-group__heading {
  margin: 0 0 0.6rem;
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
}
a.roster-group__link {
  color: inherit;
  text-decoration: none;
}
a.roster-group__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.roster-group__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.35rem 1rem;
}
.roster-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0;
  border-bottom: 1px dashed rgba(148, 163, 184, 0.15);
  font-size: 0.94rem;
}
.roster-row:last-child { border-bottom: 0; }
a.roster-row__ign {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
a.roster-row__ign:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.roster-row__sep { opacity: 0.4; }
.roster-row__squad {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(148, 163, 184, 0.45);
  text-underline-offset: 2px;
  font-size: 0.86rem;
  opacity: 0.85;
}
.roster-row__squad:hover { text-decoration-color: currentColor; }
.roster-row__squad--none { opacity: 0.5; text-decoration: none; }
.roster-row__badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-left: auto;
}
.roster-badge {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(148, 163, 184, 0.08);
  font-weight: 600;
}
.roster-badge--role { border-color: rgba(96, 165, 250, 0.55); background: rgba(96, 165, 250, 0.16); }
.roster-badge--judge { border-color: rgba(168, 85, 247, 0.55); background: rgba(168, 85, 247, 0.16); }
.roster-badge--pro { border-color: rgba(234, 179, 8, 0.55); background: rgba(234, 179, 8, 0.18); }
.roster-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 1.25rem 0 0;
}
.roster-pager[hidden] { display: none; }
.roster-pager__label {
  opacity: 0.75;
  font-size: 0.9rem;
}

/* v1.45.1 — Dashboard "your squad" widget card.
   Sits at the top of the dashboard grid (span-2) for any
   logged-in member who's currently in a squad. Hidden for
   squadless members (the existing profile-hints banner
   nudges those users separately). */
.dash-card--squad[hidden] { display: none; }
.dash-card--squad .dash-squad__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.dash-squad__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.85rem;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}
.dash-squad__name {
  margin: 0;
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.dash-squad__tag {
  font-family: "Rajdhani", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(148, 163, 184, 0.1);
  font-weight: 700;
}
.dash-squad__leaders {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  font-size: 0.9rem;
}
.dash-squad__leader-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.7rem;
  opacity: 0.65;
  margin-right: 0.3rem;
}
.dash-squad__warn {
  margin: 0 0 0.85rem;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 170, 80, 0.45);
  background: rgba(255, 170, 80, 0.1);
  font-size: 0.9rem;
}
.dash-squad__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0 0 0.85rem;
}
.dash-squad__stats > div { text-align: center; }
.dash-squad__stats dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.65;
}
.dash-squad__stats dd {
  margin: 0.1rem 0 0;
  font-size: 1.15rem;
  font-weight: 700;
}
@media (max-width: 520px) {
  .dash-squad__stats { grid-template-columns: repeat(2, 1fr); }
}
.dash-squad__pending {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.65rem 0.9rem;
  margin: 0 0 0.85rem;
  border-radius: 8px;
  border: 1px solid rgba(96, 165, 250, 0.45);
  background: rgba(96, 165, 250, 0.10);
  text-decoration: none;
  color: inherit;
  font-weight: 600;
}
.dash-squad__pending:hover { border-color: rgba(96, 165, 250, 0.85); }
.dash-squad__pending-num {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.6rem;
  line-height: 1;
}
.dash-squad__pending-label { font-size: 0.92rem; }
.dash-squad__ann {
  display: block;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(15, 23, 42, 0.55);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.12s ease;
}
.dash-squad__ann:hover { border-color: rgba(148, 163, 184, 0.55); }
.dash-squad__ann--empty {
  opacity: 0.65;
  font-style: italic;
}
.dash-squad__ann-meta {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
}
.dash-squad__ann-pin { color: rgba(234, 179, 8, 0.95); margin-right: 0.25rem; }

/* v1.48.1 — member self-leave */
.dash-squad__leave {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px dashed rgba(148, 163, 184, 0.25);
}
.dash-squad__leave-btn {
  font: inherit;
  font-size: 0.78rem;
  padding: 0.32rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(220, 80, 80, 0.55);
  background: rgba(220, 80, 80, 0.08);
  color: inherit;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.dash-squad__leave-btn:hover,
.dash-squad__leave-btn:focus-visible {
  background: rgba(220, 80, 80, 0.18);
  border-color: rgba(220, 80, 80, 0.95);
  outline: none;
}
.dash-squad__leave-btn:disabled {
  opacity: 0.5;
  cursor: progress;
}
.dash-squad__leave-status {
  font-size: 0.78rem;
  opacity: 0.75;
}
.dash-squad__leave-status[data-kind="ok"] {
  color: rgba(120, 220, 140, 0.95);
  opacity: 1;
}
.dash-squad__leave-status[data-kind="error"] {
  color: rgba(255, 140, 140, 0.95);
  opacity: 1;
}
.dash-squad__leave-hint {
  margin: 0.85rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px dashed rgba(148, 163, 184, 0.25);
  font-size: 0.8rem;
  opacity: 0.8;
}
.dash-squad__leave-hint a {
  color: rgba(245, 200, 120, 0.95);
}
.dash-squad__ann-title {
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0.25rem 0;
}
.dash-squad__ann-preview {
  opacity: 0.85;
  line-height: 1.45;
  font-size: 0.92rem;
}

/* v1.45.0 — Squads index (squads.html).
   One card per canonical squad with member count, points,
   verified wins, and captain / vice-captain lines. Click
   anywhere on a card to jump to the v1.40.x detail page. */
.squads-page {
  max-width: 1100px;
  margin: 2.5rem auto;
  padding: 0 1.25rem;
}
.squads-page__title {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(2.2rem, 4vw, 3rem);
  letter-spacing: 0.04em;
  margin: 0 0 0.5rem;
}
.squads-page__lead {
  margin: 0 0 1.5rem;
  opacity: 0.85;
  line-height: 1.55;
  max-width: 60ch;
}
.squads-page__status {
  margin: 0 0 1rem;
  opacity: 0.8;
  min-height: 1.4em;
}
.squads-page__status[data-kind="error"] { color: rgba(255, 170, 170, 0.95); }
.squads-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.85rem;
}
.squad-card {
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.55);
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.squad-card:hover { border-color: rgba(148, 163, 184, 0.55); transform: translateY(-2px); }
.squad-card--empty {
  grid-column: 1 / -1;
  padding: 2rem;
  text-align: center;
  opacity: 0.7;
}
.squad-card__link {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.1rem 1.2rem;
  color: inherit;
  text-decoration: none;
  height: 100%;
}
.squad-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}
.squad-card__name {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  margin: 0;
}
.squad-card__tag {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(148, 163, 184, 0.1);
  font-weight: 700;
}
.squad-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin: 0;
}
.squad-card__stats > div { text-align: center; }
.squad-card__stats dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.65;
}
.squad-card__stats dd {
  margin: 0.1rem 0 0;
  font-size: 1.25rem;
  font-weight: 700;
}
.squad-card__leaders {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
}
.squad-card__leader-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.7rem;
  opacity: 0.65;
  margin-right: 0.3rem;
}
.squad-card__leader--vacant .squad-card__leader-ign {
  opacity: 0.55;
  font-style: italic;
}
.squad-card__cta {
  margin-top: auto;
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.8;
  text-align: right;
}
.squad-card__link:hover .squad-card__cta { opacity: 1; }

/* v1.49.8 — recruiting badge surfaced on squad cards whose
   captain seat is open or whose roster is empty. Cyan + dashed
   border reads as friendly informational, not alarming red. */
.squad-card__recruiting {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.4rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px dashed rgba(56, 189, 248, 0.55);
  background: rgba(56, 189, 248, 0.08);
  color: #38bdf8;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.squad-card__recruiting::before {
  content: "•";
  font-size: 0.9rem;
  line-height: 0;
}

/* v1.49.8 — squad-page hero banner that explains the
   recruiting state above the (probably-empty) roster. Same
   palette as the card pill so the visual link is obvious. */
.squad-hero__recruiting {
  margin: 1rem 0 1.25rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px dashed rgba(56, 189, 248, 0.45);
  background: rgba(56, 189, 248, 0.08);
  color: rgba(226, 232, 240, 0.9);
  font-size: 0.92rem;
  line-height: 1.45;
}
.squad-hero__recruiting strong { color: #7dd3fc; }
.squad-hero__recruiting p { margin: 0; }
.squad-hero__recruiting p + p { margin-top: 0.4rem; }

/* v1.45.0 — captain "recruit from directory" CTA on squad page. */
.squad-recruit-cta {
  margin: 1rem 0 1.5rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px dashed rgba(96, 165, 250, 0.45);
  background: rgba(96, 165, 250, 0.08);
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
  justify-content: space-between;
}
.squad-recruit-cta__text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.4;
  flex: 1 1 auto;
  min-width: 200px;
}

/* v1.45.0 — clickable squad name on directory rows. */
.directory-row__squad-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(148, 163, 184, 0.45);
  text-underline-offset: 2px;
}
.directory-row__squad-link:hover {
  text-decoration-color: currentColor;
}

/* v1.44.0 — Member directory page (directory.html).
   Filterable, paginated list of every member. Visually
   sits between the dashboard's data-dense cards and the
   leaderboard's flat row layout. */
.directory-page {
  max-width: 1100px;
  margin: 2.5rem auto;
  padding: 0 1.25rem;
}
.directory-page__inner { display: block; }
.directory-page__title {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(2.2rem, 4vw, 3rem);
  letter-spacing: 0.04em;
  margin: 0 0 0.5rem;
}
.directory-page__lead {
  margin: 0 0 1.5rem;
  opacity: 0.85;
  line-height: 1.55;
  max-width: 60ch;
}
.directory-gate {
  padding: 1rem 1.25rem;
  border-radius: 10px;
  border: 1px solid rgba(96, 165, 250, 0.45);
  background: rgba(96, 165, 250, 0.10);
  margin: 0 0 1.5rem;
}
.directory-gate a { color: inherit; text-decoration: underline; }

.directory-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.25);
  margin: 0 0 1rem;
}
.directory-form[hidden] { display: none; }
.directory-form__row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 0.75rem;
}
.directory-form__row--secondary {
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
}
@media (max-width: 760px) {
  .directory-form__row,
  .directory-form__row--secondary {
    grid-template-columns: 1fr;
  }
}
.directory-form__label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.85;
}
.directory-form__label input,
.directory-form__label select {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(15, 23, 42, 0.7);
  color: inherit;
}
.directory-form__check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
  cursor: pointer;
}
.directory-status {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  min-height: 1.4em;
  opacity: 0.9;
}
.directory-status[data-kind="error"] { color: rgba(255, 170, 170, 0.95); }
.directory-status[data-kind="ok"]    { opacity: 0.7; }

.directory-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 0.6rem;
}
.directory-empty {
  grid-column: 1 / -1;
  padding: 1.25rem;
  text-align: center;
  opacity: 0.7;
  border: 1px dashed rgba(148, 163, 184, 0.35);
  border-radius: 10px;
}
.directory-row {
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.55);
  transition: transform 0.12s ease, border-color 0.12s ease;
  display: flex;
  align-items: stretch;
}
.directory-row:hover { border-color: rgba(148, 163, 184, 0.55); transform: translateY(-1px); }
.directory-row__link {
  display: flex;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  color: inherit;
  text-decoration: none;
  align-items: flex-start;
  flex: 1 1 auto;
  min-width: 0;
}
.directory-row__avatar-link {
  display: block;
  flex: 0 0 auto;
  text-decoration: none;
  border-radius: 50%;
}
a.directory-row__ign {
  color: inherit;
  text-decoration: none;
  display: block;
}
a.directory-row__ign:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.directory-row__avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: rgba(148, 163, 184, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
  color: rgba(226, 232, 240, 0.7);
}
.directory-row__avatar--blank { letter-spacing: 0; }
.directory-row__main { flex: 1 1 auto; min-width: 0; }
.directory-row__ign {
  font-weight: 700;
  font-size: 1.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.directory-row__realname {
  font-size: 0.85rem;
  opacity: 0.75;
  margin-top: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.directory-row__meta {
  font-size: 0.82rem;
  opacity: 0.65;
  margin-top: 0.25rem;
}
.directory-row__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.4rem;
}
.directory-badge {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(148, 163, 184, 0.1);
  font-weight: 600;
}
.directory-badge--role { border-color: rgba(96, 165, 250, 0.55); background: rgba(96, 165, 250, 0.18); }
.directory-badge--judge { border-color: rgba(168, 85, 247, 0.55); background: rgba(168, 85, 247, 0.16); }
.directory-badge--pro { border-color: rgba(234, 179, 8, 0.55); background: rgba(234, 179, 8, 0.18); }

.directory-row__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.85rem 1rem 0.85rem 0;
  border-left: 1px dashed rgba(148, 163, 184, 0.25);
}
.directory-row__invite {
  white-space: nowrap;
  font-size: 0.78rem;
}
.directory-row__invite--done {
  opacity: 0.7;
  cursor: default;
}

.directory-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 1.25rem 0 0;
}
.directory-pager[hidden] { display: none; }
.directory-pager__label {
  opacity: 0.75;
  font-size: 0.9rem;
}

/* v1.43.2 — dashboard profile-hygiene banner. Stack of
   one-row hints (missing email, unverified email, real
   name still equal to IGN). Each row carries its own
   tone (warn / info) and a CTA back to the profile
   card. Visually mirrors .staff-2fa-banner so the two
   sit comfortably together when both fire. */
.profile-hints {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 1rem;
}
.profile-hints[hidden] { display: none; }
.profile-hint {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(148, 163, 184, 0.08);
  font-size: 0.95rem;
  line-height: 1.45;
  flex-wrap: wrap;
}
.profile-hint--warn {
  border-color: rgba(234, 179, 8, 0.55);
  background: rgba(234, 179, 8, 0.12);
}
.profile-hint--info {
  border-color: rgba(96, 165, 250, 0.45);
  background: rgba(96, 165, 250, 0.10);
}
.profile-hint__body { flex: 1 1 18rem; min-width: 0; }
.profile-hint__title { display: inline; margin-right: 0.4rem; }
.profile-hint__text { color: inherit; opacity: 0.92; }
.profile-hint__actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
}

/* v1.50.1 — Captain quick-actions strip. Sits right under
   the squad hero so management surfaces (transfer captaincy,
   roster, invites, activity log) are visible without
   scrolling to the bottom of the page. */
.squad-quick-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.75rem;
  margin: 1rem 0 1.5rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(245, 166, 35, 0.3);
  border-radius: 12px;
  background: linear-gradient(
    180deg,
    rgba(245, 166, 35, 0.06),
    rgba(245, 166, 35, 0.02) 70%
  );
}
.squad-quick-actions__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(245, 166, 35, 0.85);
  padding-right: 0.25rem;
}
.squad-quick-actions__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
}
.squad-quick-actions__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(226, 232, 240, 0.18);
  background: rgba(15, 23, 42, 0.55);
  color: rgba(226, 232, 240, 0.92);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.squad-quick-actions__chip:hover,
.squad-quick-actions__chip:focus-visible {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(245, 166, 35, 0.45);
  transform: translateY(-1px);
  outline: none;
}
.squad-quick-actions__chip--accent {
  border-color: rgba(245, 166, 35, 0.55);
  background: rgba(245, 166, 35, 0.10);
  color: #f5a623;
}
.squad-quick-actions__chip--accent:hover,
.squad-quick-actions__chip--accent:focus-visible {
  background: rgba(245, 166, 35, 0.18);
  border-color: rgba(245, 166, 35, 0.85);
}

/* v1.50.1 — Self-contained toast host for the squad page.
   Used to surface the v1.49.9 `response.mutated` confirmation
   when a captain accepts a join request. Stacks newest-on-
   bottom, fixed top-right, auto-dismisses (squad-page.js
   owns the lifecycle). */
.squad-toast-host {
  position: fixed;
  top: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 9999;
  pointer-events: none;
  max-width: min(26rem, calc(100vw - 2rem));
}
.squad-toast {
  pointer-events: auto;
  cursor: pointer;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  border: 1px solid rgba(226, 232, 240, 0.18);
  background: rgba(15, 23, 42, 0.95);
  color: rgba(226, 232, 240, 0.95);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
  font-size: 0.9rem;
  line-height: 1.4;
  animation: squad-toast-in 0.18s ease-out both;
}
.squad-toast--leaving {
  animation: squad-toast-out 0.22s ease-in both;
}
.squad-toast--ok {
  border-color: rgba(74, 222, 128, 0.55);
  background: linear-gradient(
    180deg,
    rgba(34, 197, 94, 0.18),
    rgba(15, 23, 42, 0.95) 70%
  );
}
.squad-toast--warn {
  border-color: rgba(234, 179, 8, 0.55);
  background: linear-gradient(
    180deg,
    rgba(234, 179, 8, 0.18),
    rgba(15, 23, 42, 0.95) 70%
  );
}
.squad-toast--error {
  border-color: rgba(248, 113, 113, 0.6);
  background: linear-gradient(
    180deg,
    rgba(239, 68, 68, 0.20),
    rgba(15, 23, 42, 0.95) 70%
  );
}
.squad-toast__title {
  font-weight: 700;
  margin-bottom: 0.2rem;
}
.squad-toast__body {
  opacity: 0.92;
}
@keyframes squad-toast-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes squad-toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-6px); }
}

/* v1.50.1 — Member-facing "My join requests" panel on the
   dashboard. Hidden by default; revealed by dashboard-app.js
   when the member has any pending or recent join request
   history. */
.dash-join-requests {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.dash-join-requests__hint {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.78;
}
.dash-join-requests__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.dash-join-request {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.7rem;
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  border: 1px solid rgba(226, 232, 240, 0.16);
  background: rgba(15, 23, 42, 0.45);
}
.dash-join-request__squad {
  font-weight: 700;
  color: rgba(226, 232, 240, 0.95);
}
.dash-join-request__status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid currentColor;
  background: transparent;
}
.dash-join-request__status--pending  { color: #fbbf24; }
.dash-join-request__status--accepted { color: #4ade80; }
.dash-join-request__status--declined { color: #f87171; }
.dash-join-request__status--cancelled { color: rgba(226, 232, 240, 0.55); }
.dash-join-request__when {
  font-size: 0.8rem;
  opacity: 0.75;
}
.dash-join-request__note {
  flex: 1 1 100%;
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  opacity: 0.85;
  font-style: italic;
}
.dash-join-request__actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-left: auto;
}
.dash-join-request__action {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(226, 232, 240, 0.25);
  background: rgba(15, 23, 42, 0.6);
  color: rgba(226, 232, 240, 0.92);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.dash-join-request__action:hover {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(245, 166, 35, 0.55);
}
.dash-join-request__action[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* v1.50.4 — "Squads recruiting now" card. Surfaced on the
   dashboard for un-squadded members. Uses the v1.49.8
   recruitingMembers flag from /api/squads?summary=1. */
.dash-recruiting {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.dash-recruiting__row {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.5rem 0.85rem;
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  border: 1px solid rgba(226, 232, 240, 0.16);
  background: rgba(15, 23, 42, 0.45);
}
@media (max-width: 720px) {
  .dash-recruiting__row {
    grid-template-columns: 1fr;
  }
}
.dash-recruiting__name {
  font-weight: 700;
  color: rgba(226, 232, 240, 0.95);
  text-decoration: none;
}
.dash-recruiting__name:hover {
  color: #f5a623;
}
.dash-recruiting__cap {
  font-size: 0.85rem;
  opacity: 0.85;
  min-width: 0;
}
.dash-recruiting__cap--vacant {
  color: #fbbf24;
  font-weight: 600;
}
.dash-recruiting__count {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  opacity: 0.75;
  white-space: nowrap;
}
.dash-recruiting__cta {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(245, 166, 35, 0.55);
  background: rgba(245, 166, 35, 0.10);
  color: #f5a623;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.dash-recruiting__cta:hover {
  background: rgba(245, 166, 35, 0.18);
  border-color: rgba(245, 166, 35, 0.85);
}

/* v1.51.0 — admin squad-health table. Pulls the four
   diagnostic signals (leadership, recruiting, queue,
   stale achievements) into one colour-coded card. */
.admin-squad-health {
  margin-bottom: 1rem;
}
.admin-squad-health__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}
.admin-squad-health__table th,
.admin-squad-health__table td {
  vertical-align: top;
}
.admin-squad-health__generated {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  opacity: 0.6;
  text-align: right;
}
.adm-sh-pill {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid currentColor;
  cursor: help;
}
.adm-sh-pill--healthy {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.10);
}
.adm-sh-pill--warning {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.10);
}
.adm-sh-pill--critical {
  color: #f87171;
  background: rgba(248, 113, 113, 0.14);
  animation: adm-sh-pulse 2.4s ease-in-out infinite;
}
@keyframes adm-sh-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.15); }
}
.adm-sh-empty {
  color: #fbbf24;
  font-weight: 600;
}
.adm-sh-role {
  opacity: 0.7;
  font-size: 0.85em;
}
.adm-sh-age {
  opacity: 0.7;
  font-size: 0.85em;
}
.adm-sh-reasons {
  margin-top: 0.2rem;
  font-size: 0.78rem;
  opacity: 0.7;
}
.admin-squad-health__table tr[data-health="critical"] {
  background: rgba(248, 113, 113, 0.04);
}
.admin-squad-health__table tr[data-health="warning"] {
  background: rgba(251, 191, 36, 0.04);
}

/* v1.51.3 — trend chip rendered next to the live health
   pill. The chip surfaces the delta against the oldest
   snapshot in the 7d window so an admin can see "this
   squad has been worsening for a week" alongside the
   point-in-time pill. Chips are intentionally subtle
   (smaller, lower contrast than the pill) so the live
   state stays visually dominant. */
.adm-sh-trend {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  border: 1px solid currentColor;
  cursor: help;
  vertical-align: middle;
}
.adm-sh-trend--stable {
  color: rgba(148, 163, 184, 0.95);
  background: rgba(148, 163, 184, 0.06);
}
.adm-sh-trend--improving {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.08);
}
.adm-sh-trend--worsening {
  color: #f87171;
  background: rgba(248, 113, 113, 0.10);
}
.adm-sh-trend--changed {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.08);
}

/* v1.51.1 — Captain successor suggestion modal. Surfaces
   ranked in-squad candidates when an admin clicks the
   "Suggest successor" button on a critical squad-health
   row. The modal is intentionally lightweight (no third-
   party dependency) so it stays usable from the admin
   page even on slow connections. */
.adm-sh-suggest {
  margin-left: 0.5rem;
  padding: 0.18rem 0.55rem;
  border: 1px solid #f87171;
  background: rgba(248, 113, 113, 0.08);
  color: #f87171;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.adm-sh-suggest:hover {
  background: rgba(248, 113, 113, 0.18);
}
.adm-suggest-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.adm-suggest-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.adm-suggest-card {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: #131821;
  color: #e8edf5;
  border: 1px solid #2a3243;
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.adm-suggest-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid #1f2735;
}
.adm-suggest-header h3 {
  margin: 0;
  font-size: 1rem;
}
.adm-suggest-close {
  background: transparent;
  border: 0;
  color: #e8edf5;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.3rem;
}
.adm-suggest-body {
  padding: 0.9rem 1rem 1.1rem;
}
.adm-suggest-loading,
.adm-suggest-empty,
.adm-suggest-error,
.adm-suggest-help {
  margin: 0 0 0.7rem;
  font-size: 0.85rem;
}
.adm-suggest-error { color: #f87171; }
.adm-suggest-help  { opacity: 0.75; }
.adm-suggest-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.adm-suggest-row {
  border: 1px solid #2a3243;
  border-radius: 8px;
  padding: 0.7rem 0.8rem;
  background: rgba(255, 255, 255, 0.02);
}
.adm-suggest-row[data-rank="1"] {
  border-color: #4ade80;
  background: rgba(74, 222, 128, 0.06);
}
.adm-suggest-row__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.adm-suggest-rank {
  font-weight: 700;
  color: #fbbf24;
}
.adm-suggest-ign {
  font-weight: 600;
}
.adm-suggest-role {
  font-size: 0.75rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid #2a3243;
  border-radius: 999px;
  opacity: 0.85;
}
.adm-suggest-score {
  margin-left: auto;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
  cursor: help;
}
.adm-suggest-reasons {
  list-style: disc;
  padding-left: 1.2rem;
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  opacity: 0.85;
}
.adm-suggest-row__actions {
  display: flex;
  justify-content: flex-end;
}
.adm-suggest-promote {
  padding: 0.4rem 0.9rem;
  border: 1px solid #4ade80;
  background: rgba(74, 222, 128, 0.1);
  color: #4ade80;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}
.adm-suggest-promote:hover {
  background: rgba(74, 222, 128, 0.22);
}
.adm-suggest-promote:disabled {
  opacity: 0.6;
  cursor: progress;
}