/* IRG design system
   Instant Reality Gaming — League custom 5v5 inhouses
   Include on every page: <link rel="stylesheet" href="css/styles.css">
*/

@import url("tokens.css");
@import url("themes.css");
@import url("esports-public.css");
@import url("admin-preserve.css");
@import url("motion-ui.css");

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

/* Profile engagement polish: scoped to badges, achievements, and activity. */
.featured-slot {
  border-color: rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.1), transparent 42%),
    linear-gradient(155deg, #242a34 0%, #171b22 58%, #101319 100%);
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.featured-slot:not(.is-locked):hover,
.featured-slot:focus-within {
  border-color: rgba(182, 255, 42, 0.42);
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.42),
    0 0 18px rgba(182, 255, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transform: translateY(-2px);
}

.featured-slot > .irg-badge,
.featured-slot > .irg-badge-tooltip {
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.52)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.08));
}

.featured-slot--empty {
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.06), transparent 46%),
    linear-gradient(155deg, #1d222b, #12161c);
  box-shadow:
    0 9px 20px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.featured-slot.is-locked {
  opacity: 0.72;
  border-color: rgba(255, 255, 255, 0.08);
  background: linear-gradient(155deg, #1b2028, #11151b);
  box-shadow:
    0 7px 16px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    inset 0 -8px 18px rgba(0, 0, 0, 0.18);
}

.featured-badge-picker__trigger {
  border-color: rgba(255, 255, 255, 0.18);
  background: linear-gradient(180deg, #11151b, #090b0f);
  box-shadow:
    0 5px 12px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.profile-achieve-filters__tabs .profile-tab {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.profile-achieve-filters__tabs .profile-tab:hover,
.profile-achieve-filters__tabs .profile-tab.is-active {
  border-color: rgba(182, 255, 42, 0.52);
  background: rgba(182, 255, 42, 0.12);
  color: #f7ffe9;
}

.achievement-category-picker {
  --achievement-category-color: #8fb7e8;
  position: relative;
  width: min(100%, 26rem);
  display: grid;
  gap: 0.45rem;
  margin: 0 0 var(--space-5);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.achievement-category-picker.is-gold,
.achievement-category-picker__option.is-gold { --achievement-category-color: #f5c542; }
.achievement-category-picker.is-green,
.achievement-category-picker__option.is-green { --achievement-category-color: #4ade80; }
.achievement-category-picker.is-purple,
.achievement-category-picker__option.is-purple { --achievement-category-color: #a78bfa; }
.achievement-category-picker.is-blue,
.achievement-category-picker__option.is-blue { --achievement-category-color: #60a5fa; }
.achievement-category-picker.is-orange,
.achievement-category-picker__option.is-orange { --achievement-category-color: #fb923c; }
.achievement-category-picker.is-silver,
.achievement-category-picker__option.is-silver { --achievement-category-color: #d4d4d8; }
.achievement-category-picker.is-teal,
.achievement-category-picker__option.is-teal { --achievement-category-color: #2dd4bf; }
.achievement-category-picker.is-pink,
.achievement-category-picker__option.is-pink { --achievement-category-color: #f472b6; }
.achievement-category-picker.is-discord,
.achievement-category-picker__option.is-discord { --achievement-category-color: #818cf8; }
.achievement-category-picker.is-all,
.achievement-category-picker__option.is-all { --achievement-category-color: #8fb7e8; }

.achievement-category-picker__label {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.achievement-category-picker__trigger {
  width: 100%;
  min-height: 3.35rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--achievement-category-color) 48%, rgba(255, 255, 255, 0.12));
  border-radius: var(--radius-md);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--achievement-category-color) 13%, transparent), transparent 52%),
    linear-gradient(180deg, #202734, #171c25);
  color: var(--color-text);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.28),
    inset 3px 0 0 var(--achievement-category-color),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  cursor: pointer;
  text-align: left;
}

.achievement-category-picker__trigger:hover,
.achievement-category-picker__trigger:focus-visible {
  border-color: color-mix(in srgb, var(--achievement-category-color) 78%, white 8%);
  outline: none;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.34),
    0 0 18px color-mix(in srgb, var(--achievement-category-color) 16%, transparent),
    inset 3px 0 0 var(--achievement-category-color);
}

.achievement-category-picker__swatch {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--achievement-category-color);
  box-shadow: 0 0 12px color-mix(in srgb, var(--achievement-category-color) 58%, transparent);
}

.is-all > .achievement-category-picker__swatch,
.achievement-category-picker.is-all .achievement-category-picker__trigger > .achievement-category-picker__swatch {
  background: conic-gradient(#f5c542, #4ade80, #60a5fa, #a78bfa, #fb923c, #f5c542);
}

.achievement-category-picker__selection {
  min-width: 0;
  display: grid;
  gap: 0.08rem;
}

.achievement-category-picker__selection strong {
  overflow: hidden;
  color: var(--achievement-category-color);
  font-size: 0.93rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.achievement-category-picker__selection small,
.achievement-category-picker__option small {
  color: var(--color-text-subtle);
  font-size: 0.68rem;
  font-weight: 600;
}

.achievement-category-picker__chevron {
  color: var(--achievement-category-color);
  font-size: 0.78rem;
}

.achievement-category-picker__menu {
  position: absolute;
  z-index: 45;
  top: calc(100% + 0.4rem);
  left: 0;
  width: 100%;
  max-height: min(26rem, 55vh);
  padding: 0.4rem;
  overflow-y: auto;
  border: 1px solid rgba(153, 181, 216, 0.24);
  border-radius: var(--radius-md);
  background: linear-gradient(155deg, #202733, #11161e 72%);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.achievement-category-picker__option {
  --achievement-category-color: #8fb7e8;
  width: 100%;
  min-height: 2.65rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid transparent;
  border-radius: 0.55rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 1rem;
  gap: 0.65rem;
  align-items: center;
  background: transparent;
  color: var(--achievement-category-color);
  cursor: pointer;
  font-weight: 750;
  text-align: left;
}

.achievement-category-picker__option:hover,
.achievement-category-picker__option:focus-visible,
.achievement-category-picker__option.is-selected {
  border-color: color-mix(in srgb, var(--achievement-category-color) 35%, transparent);
  outline: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--achievement-category-color) 15%, transparent), rgba(255, 255, 255, 0.025));
}

.achievement-category-picker__option.is-selected {
  box-shadow: inset 3px 0 0 var(--achievement-category-color);
}

.achieve-claim,
.reward-meter__claim,
.profile-claim-all {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.075);
  color: var(--color-text);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.25);
}

.achieve-claim:disabled,
.reward-meter__claim:disabled,
.profile-claim-all:disabled {
  opacity: 0.7;
  background: rgba(255, 255, 255, 0.065);
  color: rgba(255, 255, 255, 0.7);
}

.achieve-claim.is-ready:not(:disabled),
.reward-meter__claim.is-ready:not(:disabled),
.profile-claim-all.is-ready:not(:disabled) {
  border-color: rgba(203, 255, 92, 0.9);
  background: linear-gradient(135deg, #caff4f, #8fce18);
  color: #0a1103;
  font-weight: 800;
  box-shadow:
    0 0 0 1px rgba(182, 255, 42, 0.26),
    0 0 18px rgba(182, 255, 42, 0.34),
    0 8px 18px rgba(61, 95, 8, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.profile-claim-all.is-ready:not(:disabled) {
  animation: profile-claim-pulse 1.8s ease-in-out infinite;
}

@keyframes profile-claim-pulse {
  0%, 100% {
    filter: brightness(1);
    box-shadow: 0 0 0 1px rgba(182, 255, 42, 0.26), 0 0 14px rgba(182, 255, 42, 0.28), 0 8px 18px rgba(61, 95, 8, 0.3);
  }
  50% {
    filter: brightness(1.13);
    box-shadow: 0 0 0 1px rgba(213, 255, 126, 0.48), 0 0 26px rgba(182, 255, 42, 0.58), 0 10px 22px rgba(61, 95, 8, 0.38);
  }
}

.reward-meter__pill--pts,
.activity-value--points {
  color: #b6ff2a;
}

.reward-meter__pill--pts {
  background: rgba(182, 255, 42, 0.15);
  box-shadow: inset 0 0 0 1px rgba(182, 255, 42, 0.18);
}

.activity-value--points,
.activity-value--negative,
.activity-value--xp {
  font-weight: 750;
}

.activity-value--xp {
  color: #8b5cf6;
}

.activity-value--negative {
  color: #fb7185;
}

.activity-list {
  gap: 0.75rem;
}

.activity-list li {
  gap: 0.28rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, rgba(96, 165, 250, 0.075), transparent 48%),
    rgba(255, 255, 255, 0.025);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.activity-list li:hover {
  border-color: rgba(96, 165, 250, 0.4);
  background:
    linear-gradient(135deg, rgba(96, 165, 250, 0.11), transparent 52%),
    rgba(255, 255, 255, 0.035);
}

.activity-list__title {
  color: #8fc5ff;
  font-size: 0.95rem;
}

.activity-list__detail {
  line-height: 1.5;
}

.profile-activity {
  display: grid;
  gap: var(--space-4);
}

.profile-activity__heading,
.profile-activity__pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.profile-activity__heading .h3,
.profile-activity__heading .eyebrow {
  margin: 0;
}

.profile-activity__count {
  padding: 0.35rem 0.65rem;
  border: 1px solid rgba(139, 92, 246, 0.26);
  border-radius: var(--radius-full);
  color: #c4b5fd;
  background: rgba(139, 92, 246, 0.1);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.profile-activity__nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  padding: 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.18);
}

.profile-activity__nav .profile-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 0;
}

.profile-activity__nav .profile-tab span {
  min-width: 1.4rem;
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-muted);
  font-size: 0.68rem;
}

.profile-activity__nav .profile-tab.is-active span {
  background: rgba(139, 92, 246, 0.2);
  color: #ddd6fe;
}

.profile-activity__pager {
  justify-content: center;
  padding-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

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

  .profile-activity__heading {
    align-items: flex-end;
  }
}

.lvl-tint--base {
  --lvl-tint-color: #93c5fd;
  --lvl-tint-bg: rgba(59, 130, 246, 0.16);
  --lvl-tint-ring: rgba(147, 197, 253, 0.4);
}
.lvl-tint--green {
  --lvl-tint-color: #67e8f9;
  --lvl-tint-bg: rgba(34, 211, 238, 0.16);
  --lvl-tint-ring: rgba(103, 232, 249, 0.42);
}
.lvl-tint--teal {
  --lvl-tint-color: #22d3ee;
  --lvl-tint-bg: rgba(6, 182, 212, 0.18);
  --lvl-tint-ring: rgba(34, 211, 238, 0.48);
}
.lvl-tint--blue {
  --lvl-tint-color: #60a5fa;
  --lvl-tint-bg: rgba(59, 130, 246, 0.2);
  --lvl-tint-ring: rgba(96, 165, 250, 0.5);
}
.lvl-tint--violet {
  --lvl-tint-color: #a78bfa;
  --lvl-tint-bg: rgba(124, 58, 237, 0.2);
  --lvl-tint-ring: rgba(167, 139, 250, 0.52);
}
.lvl-tint--gold {
  --lvl-tint-color: #c084fc;
  --lvl-tint-bg: rgba(147, 51, 234, 0.21);
  --lvl-tint-ring: rgba(192, 132, 252, 0.56);
}
.lvl-tint--orange {
  --lvl-tint-color: #e879f9;
  --lvl-tint-bg: rgba(192, 38, 211, 0.22);
  --lvl-tint-ring: rgba(232, 121, 249, 0.58);
}
.lvl-tint--mythic {
  --lvl-tint-color: #f0abfc;
  --lvl-tint-bg: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(59, 130, 246, 0.2));
  --lvl-tint-ring: rgba(240, 171, 252, 0.68);
}

@media (max-width: 720px) {
  .profile-achieve-filters__tabs {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    padding-bottom: 0;
  }

  .profile-achieve-filters__tabs .profile-tab {
    width: 100%;
    min-width: 0;
    padding-inline: 0.45rem;
  }

  .profile-achieve-filters__tabs .profile-claim-all {
    grid-column: 1 / -1;
    width: 100%;
  }
}

.reward-meter__claim,
.achieve-claim,
.profile-claim-all {
  min-width: 4.5rem;
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .profile-achieve-filters__tabs {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    padding-bottom: 0;
  }

  .profile-achieve-filters__tabs .profile-tab {
    width: 100%;
    min-width: 0;
    padding-inline: 0.45rem;
  }

  .profile-achieve-filters__tabs .profile-claim-all {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-claim-all.is-ready:not(:disabled) {
    animation: none;
  }
}

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-offset) + var(--space-4));
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  overflow-x: clip;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
p {
  margin: 0;
}

.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;
}

.mobile-panel[hidden] {
  display: none !important;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-text);
  color: var(--color-bg);
}

.skip-link:focus {
  top: var(--space-4);
}

.container {
  width: min(100% - var(--space-8), var(--container));
  margin-inline: auto;
}

main,
#content {
  flex: 1;
  /* Clear fixed .site-header. Do not rely on this alone when .section is present —
     .section's padding shorthand overrides padding-top (higher specificity). */
  padding-top: var(--header-offset);
}

/* Typography scale */
.display {
  font-size: clamp(2rem, 6vw, var(--text-5xl));
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
}

.display--brand {
  color: var(--color-accent);
}

.h2 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
}

.h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.lede {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
}

.card,
.panel-card,
.profile-panel,
.announcement-card,
.member-card,
.shop-card,
.achieve-card {
  min-width: 0;
  overflow-wrap: anywhere;
}

.muted {
  color: var(--color-text-muted);
}

.subtle {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}

.center {
  text-align: center;
}

.irg-readonly-banner {
  position: sticky;
  top: 0;
  z-index: 80;
  padding: 0.55rem 1rem;
  text-align: center;
  font-size: var(--text-sm);
  color: #1a1a12;
  background: #e8c547;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.irg-session-banner {
  position: sticky;
  top: 0;
  z-index: 85;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem 1rem;
  padding: 0.55rem 1rem;
  text-align: center;
  font-size: var(--text-sm);
  color: #f7f4ef;
  background: #5c2a22;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.irg-session-banner__actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.5rem;
  padding: var(--irg-btn-padding-y, 0) var(--irg-btn-padding-x, var(--space-4));
  border: none;
  border-radius: var(--irg-btn-radius, var(--radius-md));
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--irg-btn-font-weight, var(--weight-medium));
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-float-sm);
  transition: background var(--ease), box-shadow var(--ease), transform var(--ease), filter var(--ease);
}

.btn:hover {
  background: var(--color-surface-hover);
  box-shadow: var(--shadow-float-sm-hover);
}

.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.btn-lg {
  min-height: 2.75rem;
  padding: 0 var(--space-5);
}

.btn-ghost {
  background: var(--color-surface);
  border: none;
  box-shadow: var(--shadow-float-sm);
}

.btn-ghost:hover {
  background: var(--color-surface-hover);
  box-shadow: var(--shadow-float-sm-hover);
}

.btn-discord {
  background: var(--color-discord);
  box-shadow: var(--shadow-float-sm);
}

.btn-discord:hover {
  background: var(--color-discord-hover);
  box-shadow: var(--shadow-float-sm-hover), 0 0 0 1px rgba(88, 101, 242, 0.5);
  transform: translateY(-1px);
}

.btn-discord:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  box-shadow: var(--shadow-float-sm), 0 0 0 4px rgba(88, 101, 242, 0.35);
}

.btn-accent {
  background: var(--irg-btn-primary-bg, var(--color-accent));
  color: var(--irg-btn-primary-text, #111);
  box-shadow: var(--shadow-float-sm);
}

.btn-accent:hover {
  filter: brightness(1.08);
  box-shadow: var(--shadow-float-sm-hover), 0 0 0 1px rgba(182, 255, 42, 0.45);
  transform: translateY(-1px);
}

.btn-accent:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  box-shadow: var(--shadow-float-sm), 0 0 0 4px var(--color-accent-dim);
}

/* Header */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  height: var(--header-height);
  border: none;
  background: rgba(16, 16, 20, 0.78);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-nav);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: min(100% - var(--space-8), var(--container));
  margin-inline: auto;
  gap: var(--space-4);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  min-width: 0;
}

.brand img {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}

.brand__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  color: var(--color-accent-deep);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 10rem;
}

.nav {
  display: none;
  align-items: center;
  gap: var(--space-1);
}

.nav a,
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: inherit;
  cursor: pointer;
  transition: background var(--ease-ui), color var(--ease-ui);
}

.nav .irg-icon,
.nav-trigger .irg-icon {
  opacity: 0.75;
  transition: opacity var(--ease-ui), color var(--ease-ui);
}

.nav a:hover .irg-icon,
.nav a[aria-current="page"] .irg-icon,
.nav-trigger:hover .irg-icon,
.nav-item[data-open="true"] > .nav-trigger .irg-icon,
.nav-trigger[aria-current="page"] .irg-icon {
  opacity: 1;
  color: var(--color-accent);
}

.nav a:hover,
.nav a[aria-current="page"],
.nav-trigger:hover,
.nav-item[data-open="true"] > .nav-trigger,
.nav-trigger[aria-current="page"] {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.06);
}

.nav a:focus-visible,
.nav-trigger:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.nav-item {
  position: relative;
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 12rem;
  padding-top: var(--space-2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--ease), visibility var(--ease);
}

.nav-item[data-open="true"] > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.nav-dropdown__inner {
  display: flex;
  flex-direction: column;
  padding: var(--space-1);
  border: none;
  border-radius: var(--radius-md);
  background: rgba(18, 18, 20, 0.98);
  box-shadow: var(--shadow-float);
}

.nav-dropdown a,
.nav-dropdown .nav-trigger {
  display: block;
  width: 100%;
  white-space: nowrap;
  text-align: left;
}

.nav-item--nested .nav-dropdown--nested {
  top: 0;
  left: 100%;
  padding-top: 0;
  padding-left: var(--space-1);
}

.header-actions {
  display: none;
  align-items: center;
  gap: var(--space-2);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  box-shadow: var(--shadow-float-sm);
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 1rem;
  height: 1.5px;
  background: var(--color-text);
  position: relative;
}

.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle span::before {
  top: -5px;
}

.nav-toggle span::after {
  top: 5px;
}

.mobile-panel {
  display: none;
  position: fixed;
  top: var(--header-offset);
  right: 0;
  left: 0;
  z-index: var(--z-header);
  border: none;
  background: var(--color-bg);
  padding: var(--space-4);
  box-shadow: var(--shadow-nav);
  max-height: calc(100svh - var(--header-offset));
  overflow: auto;
  opacity: 0;
  transform: translateY(-0.5rem);
  transition: opacity var(--ease-out), transform var(--ease-out);
}

.mobile-panel.is-open {
  display: block;
  opacity: 1;
  transform: none;
}

.mobile-panel a,
.mobile-panel .btn {
  width: 100%;
  margin-bottom: var(--space-2);
  text-align: left;
}

.mobile-panel .nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  overflow-wrap: anywhere;
}

.mobile-panel .nav-link--toggle {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.mobile-panel .nav-link--toggle[aria-expanded="true"],
.mobile-panel .nav-link[aria-current="page"] {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.06);
}

.mobile-subnav {
  margin: 0 0 var(--space-2) var(--space-4);
  padding-left: var(--space-3);
  border: none;
  box-shadow: inset 2px 0 0 rgba(255, 255, 255, 0.08);
}

.mobile-subnav .nav-link {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Rules page */
.rules-page {
  display: grid;
  gap: var(--space-4);
  max-width: 62rem;
  margin: var(--space-6) auto 0;
}

.rules-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.rules-tabs__tab {
  display: grid;
  gap: 0.3rem;
  min-height: 4.5rem;
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  color: var(--color-text-muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--ease-out), border-color var(--ease-out), color var(--ease-out);
}

.rules-tabs__tab:hover,
.rules-tabs__tab.is-active {
  color: var(--color-text);
  border-color: color-mix(in srgb, var(--color-accent) 52%, transparent);
  background: color-mix(in srgb, var(--color-accent) 9%, var(--color-surface));
}

.rules-tabs__tab span {
  font-weight: var(--weight-semibold, 600);
}

.rules-tabs__tab small {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 1.35;
}

.rules-panel {
  padding: clamp(var(--space-4), 3vw, var(--space-8));
}

.rules-content {
  display: grid;
  gap: var(--space-5);
}

.rules-intro {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: 1.6;
}

.rules-content__section {
  display: grid;
  gap: var(--space-2);
}

.rules-content__section + .rules-content__section {
  padding-top: var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}

.rules-content__section h2 {
  margin: 0;
  font-size: var(--text-lg);
}

.rules-content__section p,
.rules-content__section ul {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.65;
}

.rules-content__section ul {
  display: grid;
  gap: 0.45rem;
  padding-left: 1.25rem;
}

.rules-content__section a {
  color: var(--color-accent);
}

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

/* Hero */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  min-height: min(40rem, 88svh);
  padding: var(--space-16) var(--space-4) var(--space-12);
  overflow: hidden;
  text-align: center;
}

.hero__media {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(9, 9, 11, 0.35) 0%, rgba(9, 9, 11, 0.2) 42%, var(--color-bg) 100%),
    url("../assets/cosmetics/banners/banner-summoners-rift.png") center / cover no-repeat;
  filter: saturate(1.05) brightness(0.72);
}

/* Homepage: centered logo only — no background image */
.hero--home {
  justify-content: flex-start;
  min-height: min(28rem, 60svh);
  padding: calc(var(--header-offset) + var(--space-10)) 0 var(--space-12);
  background: transparent;
}

.hero--home .hero__media {
  display: none;
}

.hero--home .hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  max-width: 40rem;
  margin: 0 auto;
  padding: 0;
}

/* Full-page home shell */
.home-page {
  position: relative;
  isolation: isolate;
  background: var(--color-bg);
}

.home-page__body {
  position: relative;
  z-index: 1;
}

.home-page .announcement-card,
.home-page .queue-card,
.home-page .activity-card {
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.72),
    0 8px 24px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.45);
}

.home-page .discord-widget {
  box-shadow:
    0 28px 64px rgba(0, 0, 0, 0.75),
    0 10px 24px rgba(0, 0, 0, 0.5);
}

.home-page .announcement-card:hover,
.home-page .activity-card:hover {
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.8),
    0 10px 28px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(0, 0, 0, 0.5);
}

.home-page .queue-card {
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.72),
    0 8px 24px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.45),
    inset 4px 0 0 var(--color-accent);
}

.home-page .section {
  background: transparent;
}

.hero--home .hero__brand {
  width: clamp(7rem, 20vw, 12rem);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.85));
}

.hero--home .hero__subtitle {
  margin: 0;
  max-width: 36rem;
  line-height: 1.5;
  text-align: center;
}

.hero--home .hero__actions {
  flex-direction: column;
  align-items: center;
  margin: 0;
}

.hero--home .hero__actions-primary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.hero--home .hero__meta {
  margin: 0;
}

.queue-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 1.75rem;
  padding: 0.15rem 0.7rem;
  border-radius: var(--radius-full);
  background: var(--color-accent-dim);
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.queue-pill::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--color-accent);
}

.h1.display,
.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.15;
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 56rem;
  margin-top: auto;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.hero__meta {
  margin-top: var(--space-4);
}

.sides {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  margin-top: var(--space-6);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.side-blue {
  color: var(--color-blue-side);
}

.side-red {
  color: var(--color-red-side);
}

/* Sections / cards */
.section {
  padding: var(--space-section-y) var(--space-4);
}

/* Restore header clearance wiped by .section { padding } shorthand */
main.section,
#content.section,
main#content.section {
  padding-top: calc(var(--header-offset) + var(--space-section-y));
}

.section-head {
  max-width: 36rem;
  margin: 0 auto var(--space-section-head);
  text-align: center;
}

.section-head p {
  margin-top: var(--space-3);
}

.section-head--left {
  max-width: none;
  margin: 0 0 var(--space-6);
  text-align: left;
}

.section-head__title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.section-head--left .section-head__title {
  justify-content: flex-start;
}

.section-head__icon {
  flex-shrink: 0;
  color: var(--color-accent);
  opacity: 0.9;
}

.home-split {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: flex-start;
  width: 100%;
  min-width: 0;
}

/* Home sections: horizontal inset comes from .container (matches header / other pages) */
#announcements.section {
  padding-inline: 0;
}

#current-games.section {
  padding-inline: 0;
}

/* Announcements (2× prior width) + Discord under header Sign in (right of container) */
#announcements .container.home-split {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  width: min(100% - var(--space-8), var(--container));
  max-width: var(--container);
  margin-inline: auto;
}

#announcements .home-split > :first-child {
  flex: 1 1 44rem;
  max-width: 44rem;
  width: 100%;
}

#announcements .home-split > .discord-widget,
#announcements .home-split > aside.discord-widget {
  flex: 0 0 350px;
  max-width: 350px;
  width: 100%;
  margin-left: auto;
}

.home-split > * {
  position: relative;
  inset: auto;
  float: none;
  min-width: 0;
  box-sizing: border-box;
}

.home-split > :first-child {
  flex: 1 1 20rem;
  max-width: 100%;
}

.home-split > .discord-widget,
.home-split > aside.discord-widget {
  flex: 1 1 350px;
  max-width: min(350px, 100%);
  width: 100%;
  position: static;
  top: auto;
}

/* Side-by-side announcements + Discord only when both fit cleanly. */
@media (max-width: 1439px) {
  #announcements .home-split > :first-child,
  #announcements .home-split > .discord-widget,
  #announcements .home-split > aside.discord-widget {
    flex: 1 1 100%;
    max-width: 100%;
    margin-left: 0;
  }

  #announcements .home-split > .discord-widget,
  #announcements .home-split > aside.discord-widget,
  .home-split > .discord-widget,
  .home-split > aside.discord-widget {
    position: static;
    top: auto;
  }
}

@media (min-width: 1440px) {
  .home-split > .discord-widget,
  .home-split > aside.discord-widget {
    position: sticky;
    top: calc(var(--header-offset) + var(--space-6));
    flex: 0 0 350px;
    max-width: 350px;
  }

  #announcements .home-split > .discord-widget,
  #announcements .home-split > aside.discord-widget {
    flex: 0 0 350px;
    max-width: 350px;
    margin-left: auto;
  }
}


.eyebrow {
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.activity-grid {
  display: grid;
  gap: var(--space-4);
}

.activity-card {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  padding: var(--space-card);
  box-shadow: var(--shadow-float);
  transition: transform var(--ease-out), box-shadow var(--ease-out);
}

.activity-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-float-hover);
}

.activity-card .btn {
  justify-self: start;
  margin-top: var(--space-2);
}

.activity-card--name {
  place-items: center;
  text-align: center;
  padding: var(--space-8) var(--space-6);
}

.announcement-list {
  display: grid;
  gap: var(--space-4);
}

.announcement-card {
  display: grid;
  gap: var(--space-3);
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  padding: var(--space-card);
  box-shadow: var(--shadow-float);
  transition: transform var(--ease-out), box-shadow var(--ease-out);
}

.announcement-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-float-hover);
}

.announcement-card__body {
  color: var(--color-text-muted);
  line-height: var(--leading-body);
  white-space: pre-wrap;
  overflow: hidden;
  max-height: 9.9em;
}

.announcement-card.is-open .announcement-card__body {
  max-height: none;
}

.announcement-card__more {
  display: none;
  justify-self: start;
}

.announcement-card.has-overflow .announcement-card__more {
  display: inline-flex;
}

.discord-widget {
  position: relative;
  border: none;
  outline: none;
  border-radius: 8px;
  background: transparent;
  padding: 0;
  display: block;
  min-width: 0;
  width: 350px;
  max-width: 100%;
  height: 500px;
  /* Shadow on the outer shell so clip on the inner frame doesn't eat it */
  box-shadow:
    0 28px 64px rgba(0, 0, 0, 0.75),
    0 10px 24px rgba(0, 0, 0, 0.5);
  line-height: 0;
}

.discord-widget__frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #111214;
  /* Avoids light anti-alias fringe from overflow+radius on dark pages */
  clip-path: inset(0 round 8px);
}

.discord-widget__frame iframe {
  position: absolute;
  /* Pull Discord's outer stroke outside the clipped frame */
  top: -3px;
  left: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  max-width: none;
  border: 0;
  outline: none;
  background: #111214;
}

/* Dark edge veil — covers leftover subpixel fringe without a bright ring */
.discord-widget__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7);
}

.activity-card__tag {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.activity-card__tag.is-live {
  color: var(--color-accent);
}

.activity-card__tag.is-soon {
  color: var(--color-text-muted);
}

.grid-4 {
  display: grid;
  gap: var(--space-6);
}

.card-icon {
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-sm);
}

.card-icon--join {
  background: #1f3d2b;
}

.card-icon--queue {
  background: #1b2a44;
}

.card-icon--compete {
  background: #3b1d24;
}

.card-icon--history {
  background: #3d3420;
}

.placeholder {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-5);
  color: var(--color-text-muted);
  text-align: center;
}

.placeholder--rich {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
}

.placeholder__icon {
  display: inline-flex;
  color: var(--color-accent);
  opacity: 0.85;
}

.placeholder__body {
  max-width: 28rem;
}

.lb-toolbar {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.lb-toolbar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.lb-toolbar__controls {
  justify-content: space-between;
}

.lb-toolbar__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 42%),
    color-mix(in srgb, var(--color-bg-elevated) 92%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    var(--shadow-float-sm);
}

.lb-toolbar__cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.lb-toolbar__cluster--start {
  flex: 1 1 16rem;
}

.lb-toolbar__cluster--end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.lb-toolbar__field-label,
.lb-season__label {
  flex: 0 0 auto;
  color: var(--color-text-subtle);
  font-size: 0.68rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.lb-toolbar__action {
  flex: 0 0 auto;
  min-height: var(--lb-control-h, 2.5rem);
  padding-inline: var(--space-4);
}

.lb-toolbar__search-group {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  width: 100%;
  max-width: 36rem;
}

.lb-toolbar__options-panel {
  display: block;
  width: 100%;
}

.lb-toolbar__options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.lb-toolbar__row--meta {
  flex-wrap: nowrap;
  gap: var(--space-2);
  min-width: 0;
}

.lb-toolbar__row--meta .subtle {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-search--compact {
  flex: 1 1 11rem;
  min-width: 0;
  max-width: 16rem;
}

.members-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  white-space: nowrap;
}

.members-sort__buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.2rem;
}

.members-sort__buttons.lb-seg {
  flex-wrap: wrap;
}

.members-sort__buttons button {
  min-height: 2.1rem;
  padding: 0 0.85rem;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  box-shadow: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.members-sort__buttons button:hover,
.members-sort__buttons button:focus-visible {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.06);
}

.members-sort__buttons button.is-active,
.members-sort__buttons button[aria-pressed="true"] {
  background: var(--color-text);
  color: #111;
  box-shadow: var(--shadow-float-xs);
}

.members-sort__buttons button[aria-sort]::after {
  content: "";
  margin-left: 0.3rem;
  font-size: 0.6rem;
  line-height: 1;
  opacity: 0.72;
}

.members-sort__buttons button[aria-sort="ascending"]::after {
  content: "▲";
}

.members-sort__buttons button[aria-sort="descending"]::after {
  content: "▼";
}

.lb-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-full);
  border: none;
  box-shadow: var(--shadow-float-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lb-status::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-text-subtle);
}

.lb-status[data-state="live"]::before {
  background: var(--color-accent);
  animation: irg-live-pulse 2.4s ease-in-out infinite;
}

.lb-status[data-state="offline"]::before {
  background: var(--color-red-side);
}

.lb-status[data-state="loading"]::before {
  background: var(--color-blue-side);
}

.lb-status[data-state="misconfigured"]::before {
  background: #fb923c;
}

.lb-search,
.lb-season {
  min-width: 12rem;
}

.lb-search input,
.lb-season select {
  width: 100%;
  min-height: var(--lb-control-h, 2.5rem);
  padding: 0 var(--space-3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-input);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  transition:
    border-color 0.18s var(--ease-out-fn, ease),
    box-shadow 0.18s var(--ease-out-fn, ease),
    background 0.18s var(--ease-out-fn, ease);
}

.lb-search input:hover,
.lb-season select:hover {
  border-color: rgba(255, 255, 255, 0.14);
  background: var(--color-surface-hover);
}

.lb-search input:focus-visible,
.lb-season select:focus-visible {
  border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-border));
  box-shadow: 0 0 0 3px var(--color-accent-dim);
  outline: none;
}

/* Compact season control aligned with search / segmented toggles. */
#leaderboard-app.lb .lb-season--leaderboard {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  width: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

#leaderboard-app.lb .lb-season--leaderboard::before {
  content: none;
  display: none;
}

#leaderboard-app.lb .lb-season--leaderboard::after {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  display: block;
  width: 0.4rem;
  height: 0.4rem;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  content: "";
  pointer-events: none;
  transform: translateY(-65%) rotate(45deg);
}

#leaderboard-app.lb .lb-season--leaderboard select {
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  min-width: 11.5rem;
  min-height: var(--lb-control-h, 2.5rem);
  padding: 0 2.1rem 0 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 55%),
    var(--color-surface);
  box-shadow: var(--shadow-input);
  color: var(--color-text);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  color-scheme: dark;
}

#leaderboard-app.lb .lb-season--leaderboard select option {
  background: var(--color-bg-elevated);
  color: var(--color-text);
}

#leaderboard-app.lb .lb-season--leaderboard select:hover {
  border-color: rgba(255, 255, 255, 0.14);
  background: var(--color-surface-hover);
}

#leaderboard-app.lb .lb-season--leaderboard:focus-within::after {
  border-color: var(--color-text);
}

#leaderboard-app.lb .lb-season--leaderboard select:focus-visible {
  outline: none;
}

@media (max-width: 1024px) {
  #leaderboard-app.lb .lb-season--leaderboard {
    width: auto;
    min-width: 0;
  }

  #leaderboard-app.lb .lb-season--leaderboard select {
    min-width: 10.5rem;
  }
}

@media (max-width: 767px) {
  #leaderboard-app.lb .lb-season--leaderboard {
    flex: 1 1 auto;
  }

  #leaderboard-app.lb .lb-season--leaderboard select {
    width: 100%;
    min-width: 0;
  }
}

.lb-seg {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: var(--shadow-float-xs);
}

.lb-seg button {
  min-height: 2.1rem;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.lb-seg button:hover,
.lb-seg button:focus-visible {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.06);
}

.lb-seg button.is-active,
.lb-seg button[aria-pressed="true"] {
  background: var(--color-text);
  color: #111;
}

.lb-th {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: var(--weight-medium);
  letter-spacing: inherit;
  text-align: inherit;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}

.lb-th:hover,
.lb-th.is-active {
  color: var(--color-text);
}

.lb-th::after {
  content: "";
  width: 0.65rem;
  font-size: 0.65rem;
  color: var(--color-accent);
}

/* Rank #1 is best, so its arrow follows best/worst rather than numeric order. */
th[aria-sort="ascending"] .lb-th:not([data-col="rank"])::after,
th[aria-sort="descending"] .lb-th[data-col="rank"]::after {
  content: "▲";
}

th[aria-sort="descending"] .lb-th:not([data-col="rank"])::after,
th[aria-sort="ascending"] .lb-th[data-col="rank"]::after {
  content: "▼";
}

.lb-name {
  font-weight: var(--weight-semibold);
  display: inline-flex;
  align-items: flex-start;
  gap: 0.45rem;
}

.lb-name__content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.35rem;
  min-width: 0;
}

.lb-name__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  min-width: 0;
  text-align: left;
  line-height: 1.2;
}

.lb-name__badges {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-self: flex-start;
  gap: 0.2rem;
  margin: 0;
  padding-top: 0.05rem;
  line-height: 0;
  flex-shrink: 0;
}

.lb-name__badges .irg-badge {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.lb-name__link {
  display: block;
  min-width: 0;
}

.lb-name__identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.02rem;
  text-align: left;
  min-width: 0;
}

.lb-name__identity .irg-name {
  display: block;
}

.lb-name__identity .irg-title {
  margin-top: 0;
  line-height: 1.15;
}

.lb-podium__card.has-cosmetic-banner {
  background-image:
    linear-gradient(rgba(5, 7, 12, 0.72), rgba(5, 7, 12, 0.78)),
    var(--irg-banner-image) !important;
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  color: #f4f4f5;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 10px rgba(0, 0, 0, 0.85);
}

/* Scrim + cover so any banner stays readable (inline bg uses --irg-banner-image). */
.lb-table tbody tr.has-cosmetic-banner {
  background-image:
    linear-gradient(
      90deg,
      rgba(5, 7, 12, 0.88) 0%,
      rgba(5, 7, 12, 0.78) 42%,
      rgba(5, 7, 12, 0.82) 100%
    ),
    var(--irg-banner-image) !important;
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

/* Let a banner reach the row above it instead of leaving that row's divider
   painted over the first pixel of the banner. */
.lb-table tbody tr:has(+ tr.has-cosmetic-banner) > td {
  box-shadow: none;
}

.lb-table thead:has(+ tbody > tr.has-cosmetic-banner) th {
  box-shadow: none;
}

.lb-table tbody tr.has-cosmetic-banner .lb-rank,
.lb-table tbody tr.has-cosmetic-banner .lb-name,
.lb-table tbody tr.has-cosmetic-banner .lb-name__identity,
.lb-table tbody tr.has-cosmetic-banner .lb-ign,
.lb-table tbody tr.has-cosmetic-banner .lb-solo,
.lb-table tbody tr.has-cosmetic-banner .lb-wr,
.lb-table tbody tr.has-cosmetic-banner td {
  color: #f4f4f5;
  /* Avoid a bright uncovered seam at fractional browser zoom / display scaling. */
  box-shadow: inset 0 -1px 0 rgba(5, 7, 12, 0.82);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.98),
    0 0 12px rgba(0, 0, 0, 0.9),
    0 0 3px rgba(0, 0, 0, 1);
}

.lb-table tbody tr.has-cosmetic-banner .lb-ign {
  color: #e4e4e7;
}

.lb-table tbody tr.has-cosmetic-banner .lb-rank {
  color: #fafafa;
}

.lb-table tbody tr.has-cosmetic-banner .lb-rank--gold {
  color: #fde68a;
}

.lb-table tbody tr.has-cosmetic-banner .lb-rank--silver {
  color: #f4f4f5;
}

.lb-table tbody tr.has-cosmetic-banner .lb-rank--bronze {
  color: #fdba74;
}

.lb-table tbody tr.has-cosmetic-banner .irg-title {
  color: #fde68a;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.98),
    0 0 10px rgba(0, 0, 0, 0.9);
}

/* Gradient / effect names stay readable on banner backgrounds without stripping shop colors. */
.lb-table tbody tr.has-cosmetic-banner .irg-name--cosmetic {
  text-shadow: none !important;
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.92))
    drop-shadow(0 0 10px rgba(0, 0, 0, 0.55));
}

.lb-table tbody tr.has-cosmetic-banner .irg-name:not(.irg-name--cosmetic),
.lb-table tbody tr.has-cosmetic-banner .lb-name__identity .irg-name:not(.irg-name--cosmetic) {
  color: #fafafa !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.98),
    0 0 12px rgba(0, 0, 0, 0.9),
    0 0 3px rgba(0, 0, 0, 1);
}

.lb-table tbody tr.has-cosmetic-banner .lb-wr {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.98),
    0 0 12px rgba(0, 0, 0, 0.95),
    0 0 3px rgba(0, 0, 0, 1);
}

.lb-table tbody tr.has-cosmetic-banner .lb-solo {
  color: #f4f4f5;
}

.shop-card__visual--shop-art {
  position: relative;
  aspect-ratio: 4 / 1;
  width: auto;
  align-self: stretch;
  min-height: 0 !important;
  height: auto;
  margin-inline: calc(var(--space-4) * -1);
  margin-top: calc(var(--space-4) * -1);
  margin-bottom: 0.55rem;
  padding: 0 !important;
  display: block;
  overflow: hidden;
  background: #0a0a0c;
  place-items: unset;
  border-radius: 0;
}

.shop-card__shop-art {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
}

.shop-list-row__visual .shop-card__visual--shop-art,
.shop-list-row__visual .shop-card__visual--border {
  position: absolute;
  inset: 0;
  padding: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  height: 100%;
  width: 100%;
  aspect-ratio: auto;
  border-radius: inherit;
}

.shop-list-row__visual .shop-card__shop-art,
.shop-list-row__visual .shop-border-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.lb-ign {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  line-height: 1.15;
  margin: 0;
}

.lb-rank {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.lb-rank--gold {
  color: #fbbf24;
}

.lb-rank--silver {
  color: #d4d4d8;
}

.lb-rank--bronze {
  color: #d97706;
}

.lb-placement {
  margin-top: 0.15rem;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.lb-solo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.lb-solo img {
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

.lb-solo.is-manual-verify img {
  filter:
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 6px rgba(255, 255, 255, 0.22));
}

.lb-solo__sparkle {
  position: absolute;
  top: -0.1rem;
  right: -0.15rem;
  width: 0.42rem;
  height: 0.42rem;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.98) 0 22%, transparent 26%),
    linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)),
    linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%, 14% 100%, 100% 14%;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8));
  animation: member-rank-sparkle 2.6s ease-in-out infinite;
}

.queue-follower__player-rank .lb-solo {
  display: grid;
  place-items: center;
  gap: 0;
}

.queue-follower__player-rank .lb-solo__sparkle {
  top: -0.05rem;
  right: -0.05rem;
  width: 0.36rem;
  height: 0.36rem;
}

@media (prefers-reduced-motion: reduce) {
  .lb-solo__sparkle {
    animation: none;
    opacity: 0.7;
  }
}

.lb-wr {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
}

.lb-empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-10) var(--space-4);
}

.lb-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.table-wrap {
  overflow-x: auto;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-lg);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

th,
td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border: none;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}

th {
  color: var(--color-text-subtle);
  font-weight: var(--weight-medium);
}

.form {
  display: grid;
  gap: var(--space-4);
  max-width: 36rem;
  margin-inline: auto;
}

.form label {
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.form input,
.form textarea,
.form select {
  width: 100%;
  padding: var(--space-3);
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.queue-board {
  display: grid;
  gap: var(--space-6);
}

/* Solo queue: same footprint as the left column when ongoing is present, centered. */
.queue-board--single {
  display: flex;
  justify-content: center;
  justify-items: center;
}

.queue-board--single > .queue-card {
  width: 100%;
  max-width: 28rem;
}

.game-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.game-block__queue-toggle {
  margin: 0 0 var(--space-4);
}

.game-block__queue-toggle[hidden] {
  display: none !important;
}

.queue-card {
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  padding: 0;
  display: grid;
  box-shadow: var(--shadow-float), inset 4px 0 0 var(--color-accent);
}

.queue-card__hero,
.ongoing-games__hero {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.queue-card__status-icon,
.ongoing-games__status-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  background: var(--color-accent-dim);
  color: var(--color-accent);
}

.queue-card__hero-text,
.ongoing-games__hero-text {
  min-width: 0;
  flex: 1;
}

.queue-board--with-ongoing {
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: start;
}

@media (min-width: 900px) {
  .queue-board--single > .queue-card {
    /* Same share as with-ongoing left column: 0.95 / (0.95 + 1.15). */
    max-width: calc((100% - var(--space-5)) * 0.95 / 2.1);
  }

  .queue-board--with-ongoing {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
    gap: var(--space-5);
    align-items: stretch;
  }

  /* Ongoing fills queue height without driving the row taller. */
  .queue-board--with-ongoing > .ongoing-games {
    height: 0;
    min-height: 100%;
    align-self: stretch;
    overflow: hidden;
  }
}

.ongoing-games {
  position: relative;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  padding: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  min-height: 0;
  overflow: hidden;
  box-shadow: var(--shadow-float), inset 4px 0 0 var(--color-accent);
}

.home-page .ongoing-games {
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.72),
    0 8px 24px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.45),
    inset 4px 0 0 var(--color-accent);
}

.ongoing-games__header {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-card) var(--space-card) var(--space-3);
}

.ongoing-games__header .h3 {
  margin: 0;
}

.ongoing-games__meta-line {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.ongoing-games__body {
  padding: 0 var(--space-card) var(--space-card);
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow: hidden;
}

.ongoing-games__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
}

.ongoing-games__entry {
  min-width: 0;
  flex: 0 0 auto;
}

/* Expanded match consumes remaining dead space; list scrolls if multi games leave too little room. */
.ongoing-games__entry.is-open {
  flex: 1 1 auto;
  min-height: 12rem;
  display: flex;
  flex-direction: column;
}

.ongoing-games__entry.is-open > .queue-follower__match {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

.ongoing-games__yours {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-left: auto;
}

.ongoing-games__open {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* PiP match board on home — collapsed by default; expand fills leftover panel height. */
.ongoing-games .queue-follower__match.is-home-scale {
  position: relative;
  display: grid;
  grid-template-rows: auto;
  gap: 0.45rem;
  padding: 0.65rem 0.7rem 0.7rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  min-height: 0;
  height: auto;
  max-height: none;
  overflow: hidden;
}

.ongoing-games .queue-follower__match.is-home-scale:not(.is-collapsed) {
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
}

.ongoing-games .queue-follower__match.is-home-scale.is-yours {
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.35);
  background: rgba(212, 175, 55, 0.06);
}

.ongoing-games .queue-follower__match.is-home-scale .queue-follower__match-hero {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  position: relative;
  z-index: 1;
}

.ongoing-games .queue-follower__match-toggle {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ongoing-games .queue-follower__match-toggle:hover .queue-follower__match-title {
  color: var(--color-accent);
}

.ongoing-games .queue-follower__match-toggle-copy {
  min-width: 0;
  display: grid;
  gap: 0.08rem;
}

.ongoing-games .queue-follower__match-expand {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 2rem;
  padding: 0.3rem 0.65rem;
  margin-left: auto;
}

.ongoing-games .queue-follower__match.is-home-scale .queue-follower__match-icon {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}

.ongoing-games .queue-follower__match.is-home-scale .queue-follower__match-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: var(--weight-bold);
}

.ongoing-games .queue-follower__match.is-home-scale .queue-follower__meta {
  margin: 0;
  font-size: 0.7rem;
}

.ongoing-games .queue-follower__match.is-home-scale .ongoing-games__open {
  margin-left: 0;
}

.ongoing-games .queue-follower__match.is-home-scale .queue-follower__match-body {
  min-height: 0;
  max-height: none;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  overflow: hidden;
}

.ongoing-games .queue-follower__match.is-home-scale .queue-follower__match-body > .queue-follower__cs-board,
.ongoing-games .queue-follower__match.is-home-scale .queue-follower__match-body > .queue-follower__teams,
.ongoing-games .queue-follower__match.is-home-scale .queue-follower__match-body > .queue-follower__hub-empty {
  flex: 1 1 auto;
  min-height: 0;
}

.ongoing-games .queue-follower__match.is-home-scale .queue-follower__role-progress {
  flex: 0 0 auto;
}

.ongoing-games .queue-follower__match.is-home-scale .queue-follower__teams.is-split {
  gap: 0.35rem;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.ongoing-games .queue-follower__match.is-home-scale .queue-follower__team {
  padding: 0.28rem;
  gap: 0.18rem;
  min-height: 0;
  height: 100%;
}

.ongoing-games .queue-follower__match.is-home-scale .queue-follower__section-title {
  font-size: 0.65rem;
}

.ongoing-games .queue-follower__match.is-home-scale .queue-follower__player-list {
  gap: 0.12rem;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.ongoing-games .queue-follower__match.is-home-scale .queue-follower__player {
  padding: 0.16rem 0.28rem;
  gap: 0.28rem;
  min-height: 0;
}

.ongoing-games .queue-follower__match.is-home-scale .queue-follower__player-avatar {
  width: 1.3rem;
  height: 1.3rem;
}

.ongoing-games .queue-follower__match.is-home-scale .queue-follower__player-name {
  font-size: 0.74rem;
  max-width: none;
}

.ongoing-games .queue-follower__match.is-home-scale .queue-follower__player-meta {
  display: flex;
  font-size: 0.58rem;
}

.ongoing-games .queue-follower__match.is-home-scale .queue-follower__player-cosmetics {
  align-items: center;
  gap: 0.22rem;
  min-width: 0;
}

.ongoing-games .queue-follower__match.is-home-scale .queue-follower__player-badges {
  display: inline-flex;
  align-items: center;
  gap: 0.08rem;
  flex-shrink: 0;
}

.ongoing-games .queue-follower__match.is-home-scale .queue-follower__player-badges .irg-badge {
  display: block;
  width: 0.85rem;
  height: 0.85rem;
  object-fit: contain;
}

.ongoing-games .queue-follower__match.is-home-scale .queue-follower__player-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #9db0c4;
}

.ongoing-games .queue-follower__match.is-home-scale .queue-follower__player-rank .lb-solo img {
  width: 14px;
  height: 14px;
}

.ongoing-games .queue-follower__match.is-home-scale .queue-follower__cs-board {
  gap: 0.35rem;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.ongoing-games .queue-follower__match.is-home-scale .queue-follower__cs-side {
  padding: 0.28rem;
  gap: 0.18rem;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.ongoing-games .queue-follower__match.is-home-scale .queue-follower__cs-side-title {
  font-size: 0.65rem;
}

.ongoing-games .queue-follower__match.is-home-scale .queue-follower__cs-side.is-blue .queue-follower__cs-side-title {
  color: #4aa3ff;
}

.ongoing-games .queue-follower__match.is-home-scale .queue-follower__cs-side.is-red .queue-follower__cs-side-title {
  color: #ff5a5a;
}

.ongoing-games .queue-follower__match.is-home-scale .queue-follower__cs-bans {
  gap: 0.12rem;
}

.ongoing-games .queue-follower__match.is-home-scale .queue-follower__cs-ban {
  border-radius: 0.2rem;
}

.ongoing-games .queue-follower__match.is-home-scale .queue-follower__cs-picks {
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: 0.12rem;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.ongoing-games .queue-follower__match.is-home-scale .queue-follower__cs-pick {
  min-height: 0;
  height: 100%;
  border-radius: 0.24rem;
}

.ongoing-games .queue-follower__match.is-home-scale .queue-follower__cs-pick-art {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.ongoing-games .queue-follower__match.is-home-scale .queue-follower__cs-pick-art img,
.ongoing-games .queue-follower__match.is-home-scale .queue-follower__cs-ban img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  display: block;
}

@media (max-width: 520px) {
  .ongoing-games .queue-follower__match.is-home-scale .queue-follower__teams.is-split,
  .ongoing-games .queue-follower__match.is-home-scale .queue-follower__cs-board {
    grid-template-columns: 1fr;
  }

  .ongoing-games .queue-follower__match.is-home-scale .queue-follower__match-hero {
    flex-wrap: wrap;
  }
}

.queue-card__header {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-card) var(--space-card) var(--space-4);
}

.queue-card__header .h3 {
  margin: 0;
}

.queue-card__meta {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.queue-card__header .queue-count {
  margin-top: var(--space-2);
}

.queue-card__header .queue-meter {
  margin: var(--space-3) 0 0;
}

.queue-section {
  padding: var(--space-4) var(--space-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.queue-section__title {
  margin: 0 0 var(--space-3);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.queue-list {
  list-style: decimal;
  margin: 0;
  padding: 0 0 0 1.25rem;
  display: grid;
  gap: var(--space-2);
}

.queue-list > li {
  min-width: 0;
}

.queue-list--plain {
  list-style: none;
  padding-left: 0;
}

.queue-list a {
  color: var(--color-text);
}

.queue-list a:hover {
  color: var(--color-accent);
}

.queue-list__player {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.queue-list__player-row {
  flex: 1 1 auto;
}

.queue-list__npc {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  font-size: 0.62rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.queue-list__player-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-3);
  min-width: 0;
}

.queue-list__player-row > .rank-pair {
  grid-column: 2;
  justify-self: end;
}

.queue-list__player-copy {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
  white-space: nowrap;
}

.queue-list__player-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--weight-semibold);
}

.queue-list__player-meta {
  display: inline-flex;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  gap: 0.35rem;
  color: var(--color-text-muted);
  font-size: 0.68rem;
  white-space: nowrap;
}

.queue-list__player-meta > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.queue-list__role-icons {
  display: inline-flex;
  align-items: center;
  gap: 0.14rem;
  flex: 0 0 auto;
}

.queue-list__role-icons img {
  display: block;
  width: 0.9rem;
  height: 0.9rem;
  object-fit: contain;
}

@media (max-width: 720px) {
  .queue-list__player-row {
    column-gap: var(--space-2);
  }

  .queue-list__player-copy {
    gap: 0.35rem;
  }
}

.rank-pair {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.22rem;
  min-width: 0;
  color: var(--color-text-muted);
  font-size: 0.68rem;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rank-pair__part {
  display: inline-flex;
  align-items: center;
  gap: 0.14rem;
}

.rank-pair__label {
  color: var(--color-text-muted);
  font-size: 0.92em;
}

.rank-pair__crest {
  display: block;
  width: 1rem;
  height: 1rem;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}

.rank-pair__empty {
  width: 1rem;
  text-align: center;
  color: var(--color-text-muted);
}

.rank-pair__tier {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

.rank-pair__lp {
  color: #f5d28a;
  font-size: 0.9em;
  font-weight: var(--weight-semibold);
}

.rank-pair__separator {
  color: var(--color-text-muted);
  opacity: 0.75;
}

.rank-pair.is-compact {
  gap: 0.14rem;
  font-size: 0.6rem;
}

.rank-pair.is-compact .rank-pair__part {
  gap: 0.08rem;
}

.rank-pair.is-compact .rank-pair__crest,
.rank-pair.is-compact .rank-pair__empty {
  width: 0.82rem;
  height: 0.82rem;
}

.rank-pair.is-compact .rank-pair__empty {
  height: auto;
}

.rank-pair.is-dense {
  flex-wrap: nowrap;
  gap: 0.1rem;
  font-size: 0.58rem;
  white-space: nowrap;
}

.rank-pair.is-dense .rank-pair__part {
  flex: 0 0 auto;
  gap: 0.04rem;
}

.rank-pair.is-dense .rank-pair__label {
  font-size: 0.82em;
}

.rank-pair.is-dense .rank-pair__crest,
.rank-pair.is-dense .rank-pair__empty {
  width: 0.78rem;
  height: 0.78rem;
}

.rank-pair.is-dense .rank-pair__tier {
  font-size: 0.92em;
}

.queue-card__footer {
  margin: 0;
  padding: var(--space-3) var(--space-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.queue-card__footer a,
.queue-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-text-muted);
  vertical-align: middle;
}

.queue-card__footer a:hover {
  color: var(--color-accent);
}

.queue-card .btn-discord {
  margin: 0 var(--space-card) var(--space-5);
}

.queue-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0 var(--space-card) var(--space-5);
}

.queue-card__actions .btn-discord {
  margin: 0;
}

.queue-card__error {
  margin: 0 var(--space-card) var(--space-2);
  color: var(--color-danger, #c44);
}

.queue-follower {
  position: fixed;
  z-index: 80;
  font-size: var(--text-sm);
}

.queue-follower--orb {
  --queue-orb-blue: #5f88bd;
  --queue-orb-blue-deep: #203a5b;
  /* SSR / pre-hydrate fallback: bottom-right quadrant, inset from corner. */
  left: auto;
  top: auto;
  right: 10vw;
  bottom: 12vh;
  width: 4.4rem;
  height: 4.4rem;
  border: none;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  display: grid;
  place-items: center;
  isolation: isolate;
  position: fixed;
  transform: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.queue-follower--orb.has-pos {
  right: auto;
  bottom: auto;
  transform: none;
}

.queue-follower__orb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--queue-orb-blue) 72%, transparent);
  opacity: 0.7;
  animation: queue-follower-orbit 2.4s ease-out infinite;
  pointer-events: none;
}

.queue-follower__orb-ring--delay {
  animation-delay: 1.2s;
  border-color: color-mix(in srgb, var(--queue-orb-blue) 48%, transparent);
}

.queue-follower--orb.is-ready .queue-follower__orb-ring {
  border-color: color-mix(in srgb, var(--queue-orb-blue) 82%, #fff 12%);
  animation-duration: 1.2s;
}

.queue-follower--orb.is-match .queue-follower__orb-ring {
  border-color: color-mix(in srgb, var(--color-success, #3ecf8e) 70%, transparent);
  animation-duration: 1s;
}

.queue-follower__orb-burst {
  position: absolute;
  inset: -0.35rem;
  border-radius: 50%;
  background:
    conic-gradient(
      from 20deg,
      transparent 0 12%,
      color-mix(in srgb, var(--color-accent) 55%, transparent) 12% 16%,
      transparent 16% 38%,
      color-mix(in srgb, var(--color-success, #3ecf8e) 50%, transparent) 38% 42%,
      transparent 42% 70%,
      color-mix(in srgb, var(--color-accent) 40%, transparent) 70% 74%,
      transparent 74% 100%
    );
  animation: queue-follower-burst-spin 4s linear infinite;
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}

.queue-follower__orb-core {
  position: relative;
  z-index: 1;
  width: 3.7rem;
  height: 3.7rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(
      circle at 30% 25%,
      color-mix(in srgb, #8eb7e2 38%, transparent),
      transparent 58%
    ),
    linear-gradient(145deg, #2a4b73, var(--queue-orb-blue-deep));
  box-shadow:
    var(--shadow-float),
    0 0 18px color-mix(in srgb, var(--queue-orb-blue) 30%, transparent),
    inset 0 0 0 1px rgba(190, 218, 247, 0.24);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.queue-follower--orb.is-idle .queue-follower__orb-ring {
  border-color: color-mix(in srgb, var(--queue-orb-blue) 52%, transparent);
  animation-duration: 3.2s;
}

.queue-follower--orb.is-idle .queue-follower__orb-core {
  background:
    radial-gradient(
      circle at 30% 25%,
      color-mix(in srgb, #8eb7e2 30%, transparent),
      transparent 60%
    ),
    linear-gradient(145deg, #29496f, var(--queue-orb-blue-deep));
}

.queue-follower--orb:hover .queue-follower__orb-core,
.queue-follower--orb:focus-visible .queue-follower__orb-core {
  transform: scale(1.06);
}

.queue-follower--orb.is-ready .queue-follower__orb-core {
  animation: queue-follower-ready-glow 1.1s ease-in-out infinite;
}

.queue-follower--orb.is-ready-done .queue-follower__orb-core {
  box-shadow:
    var(--shadow-float),
    0 0 0 2px color-mix(in srgb, var(--queue-orb-blue) 55%, transparent);
}

.queue-follower__orb-count {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-bold);
  font-size: 1.15rem;
  line-height: 1;
  color: var(--color-text);
}

.queue-follower__orb-badge {
  position: absolute;
  right: -0.15rem;
  bottom: -0.1rem;
  z-index: 2;
  min-width: 1.55rem;
  height: 1.2rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.62rem;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: #4f7fb9;
  box-shadow: 0 2px 9px color-mix(in srgb, var(--queue-orb-blue) 55%, transparent);
  pointer-events: none;
}

.queue-follower__orb-badge.is-match {
  background: var(--color-success, #3ecf8e);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-success, #3ecf8e) 45%, transparent);
}

/* Character companion — freestanding sprite, no circular plate. */
.queue-follower--orb.is-character {
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 0;
  background: transparent;
  isolation: auto;
}

.queue-follower--orb.is-character .queue-follower__orb-ring,
.queue-follower--orb.is-character .queue-follower__orb-burst {
  display: none !important;
}

.queue-follower--orb.is-character .queue-follower__orb-core {
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: none !important;
  box-shadow: none !important;
  overflow: visible;
  animation: none !important;
  transition: transform 220ms ease;
}

.queue-follower--orb.is-character:hover .queue-follower__orb-core,
.queue-follower--orb.is-character:focus-visible .queue-follower__orb-core {
  transform: scale(1.04);
}

.queue-follower--orb.is-character .queue-follower__orb-badge {
  right: 0.35rem;
  bottom: 0.45rem;
}

.queue-pet-slot {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.queue-pet {
  position: relative;
  display: grid;
  place-items: end center;
  width: 6.75rem;
  height: 6.75rem;
  filter:
    drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4))
    drop-shadow(0 0 18px color-mix(in srgb, var(--color-accent, #93c5fd) 18%, transparent));
}

/* Shimeji-style contact shadow — shared ground line under the silhouette. */
.queue-pet__ground {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 4%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(2, 6, 23, 0.42) 0%,
    rgba(2, 6, 23, 0.18) 45%,
    transparent 72%
  );
  pointer-events: none;
  z-index: 0;
  transform: scaleY(0.55);
  opacity: 0.85;
  transition: opacity 180ms ease, transform 180ms ease;
}
.queue-companion.no-shadow .queue-pet__ground {
  opacity: 0;
}
.queue-pet.is-locomoting .queue-pet__ground {
  opacity: 0.55;
  transform: scaleY(0.45) scaleX(1.08);
}
.queue-pet.is-dragging .queue-pet__ground {
  opacity: 0.2;
  transform: scaleY(0.35) scaleX(0.85);
}
.queue-pet.is-settling .queue-pet__ground {
  animation: qp-ground-land 420ms ease-out;
}
.queue-pet.is-intent-rest .queue-pet__ground {
  opacity: 0.65;
  transform: scaleY(0.5) scaleX(1.12);
}

.queue-pet.is-preview {
  width: 2.75rem;
  height: 2.75rem;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.32));
}

.queue-pet__flip {
  display: grid;
  place-items: end center;
  width: 100%;
  height: 100%;
  transform-origin: 50% 88%;
  transition: transform 100ms ease-out;
  z-index: 1;
}

.queue-pet.is-face-left .queue-pet__flip {
  transform: scaleX(-1);
}

.queue-pet.is-locomoting.is-face-left .queue-pet__flip,
.queue-pet.is-locomoting.is-face-right .queue-pet__flip {
  transition-duration: 90ms;
}

/* Drag tilt + land squash (desktop-pet physics feel). */
.queue-pet.is-dragging .queue-pet__flip {
  transform: scaleX(var(--qp-face, 1)) rotate(-8deg) translateY(-6%);
  transition-duration: 80ms;
}
.queue-pet.is-dragging.is-face-left .queue-pet__flip {
  transform: scaleX(-1) rotate(-8deg) translateY(-6%);
}
.queue-pet.is-dragging.is-face-right .queue-pet__flip {
  transform: scaleX(1) rotate(8deg) translateY(-6%);
}
.queue-pet.is-settling .queue-pet__flip {
  animation: qp-land-squash 420ms ease-out;
}
.queue-pet.is-intent-notice .queue-pet__flip {
  animation: qp-notice-lean 520ms ease-out;
}
.queue-pet.is-intent-rest:not(.is-locomoting) .queue-pet__flip {
  transform: scaleX(var(--qp-face-sign, 1)) translateY(4%);
}
.queue-pet.is-intent-rest.is-face-left:not(.is-locomoting) .queue-pet__flip {
  transform: scaleX(-1) translateY(4%);
}
.queue-pet.is-intent-rest.is-face-right:not(.is-locomoting) .queue-pet__flip {
  transform: scaleX(1) translateY(4%);
}

.queue-pet__glow {
  position: absolute;
  inset: 12% 18% 8%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 60%,
    color-mix(in srgb, var(--color-accent, #93c5fd) 28%, transparent),
    transparent 70%
  );
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
  filter: blur(2px);
  animation: qp-ambient-glow 3.2s ease-in-out infinite;
}

.queue-pet--ember .queue-pet__glow {
  background: radial-gradient(circle at 50% 60%, rgba(180, 83, 9, 0.38), transparent 72%);
}
.queue-pet--hex .queue-pet__glow {
  background: radial-gradient(circle at 50% 60%, rgba(79, 70, 229, 0.32), transparent 72%);
}
.queue-pet--tempo .queue-pet__glow {
  background: radial-gradient(circle at 50% 60%, rgba(71, 85, 105, 0.35), transparent 72%);
}
.queue-pet--fox .queue-pet__glow,
.queue-pet--riot .queue-pet__glow {
  background: radial-gradient(circle at 50% 60%, rgba(127, 29, 29, 0.28), transparent 72%);
}
.queue-pet--owl .queue-pet__glow,
.queue-pet--spark .queue-pet__glow {
  background: radial-gradient(circle at 50% 60%, rgba(30, 58, 95, 0.42), transparent 72%);
}
.queue-pet--blade .queue-pet__glow,
.queue-pet--shade .queue-pet__glow,
.queue-pet--quiver .queue-pet__glow {
  background: radial-gradient(circle at 50% 60%, rgba(51, 65, 85, 0.4), transparent 72%);
}

.queue-pet__img,
.queue-pet__rive,
.queue-pet__raster,
.queue-pet-svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  overflow: visible;
  position: relative;
  z-index: 1;
}

/* Dual-buffer raster stage: crossfade between clip frames (walk / idle / act). */
.queue-pet__raster-stage {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.queue-pet.is-rig .queue-pet__raster-stage,
.queue-pet.is-model .queue-pet__raster-stage {
  position: absolute;
  inset: 0;
  transition: opacity 220ms ease-out;
}
.queue-pet__rig-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  transition: opacity 220ms ease-out;
}
.queue-pet__model-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  transition: opacity 220ms ease-out;
}
.queue-pet.is-rig.rig-ready .queue-pet__raster-stage {
  opacity: 0;
}
.queue-pet.is-rig.rig-ready .queue-pet__rig-canvas {
  opacity: 1;
}
.queue-pet.is-model.model-ready .queue-pet__raster-stage {
  opacity: 0;
}
.queue-pet.is-model.model-ready .queue-pet__model-canvas {
  opacity: 1;
}
.queue-pet__static-preview {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
  user-select: none;
}
.queue-pet__raster-stage .queue-pet__raster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  opacity: 0;
  transition: opacity var(--qp-fade, 0.14s) ease-out;
  will-change: opacity;
}
.queue-pet__raster-stage .queue-pet__raster.is-front {
  opacity: 1;
  z-index: 2;
}
.queue-pet__raster-stage .queue-pet__raster.is-back {
  opacity: 0;
  z-index: 1;
}
.queue-pet__raster-stage--strip .queue-pet__strip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  z-index: 2;
  pointer-events: none;
  /* Soft painted pets — avoid pixelated nearest-neighbor on WebP strips. */
  image-rendering: auto;
  background-origin: border-box;
  background-clip: border-box;
  background-position-y: 100%;
}
.queue-pet__raster-stage.is-clip-idle .queue-pet__raster.is-front,
.queue-pet__raster-stage.is-clip-rest .queue-pet__raster.is-front,
.queue-pet__raster-stage.is-clip-queue .queue-pet__raster.is-front {
  transition-duration: 0.26s;
}
.queue-pet__raster-stage.is-clip-walk .queue-pet__raster.is-front,
.queue-pet__raster-stage.is-clip-move .queue-pet__raster.is-front {
  transition-duration: 0.04s;
}
.queue-pet__raster-stage.is-clip-cheer .queue-pet__raster.is-front,
.queue-pet__raster-stage.is-clip-pet .queue-pet__raster.is-front,
.queue-pet__raster-stage.is-clip-skill .queue-pet__raster.is-front,
.queue-pet__raster-stage.is-clip-act .queue-pet__raster.is-front {
  transition-duration: 0.1s;
}

/* Raster pets: whole-body motion layered on sequenced frames.
   Idle bob only when companion setting allows (Codex-style micro motion). */
.queue-companion.has-idle-bob .queue-pet.is-raster.has-reactions:not(.is-locomoting):not(.is-intent-rest):not(.is-dragging) .queue-pet__raster-stage {
  animation: qp-breathe 2.8s ease-in-out infinite;
}
.queue-companion.has-idle-bob .queue-pet.is-raster.is-intent-rest:not(.is-locomoting) .queue-pet__raster-stage {
  animation: qp-breathe 4.6s ease-in-out infinite;
}
.queue-pet.is-raster.is-locomoting.locomotion-walk .queue-pet__raster-stage,
.queue-pet.is-raster.is-locomoting.locomotion-skitter .queue-pet__raster-stage {
  animation: qp-walk-bob 0.36s ease-in-out infinite;
}
.queue-pet.is-raster.is-locomoting.locomotion-float .queue-pet__raster-stage,
.queue-pet.is-raster.is-locomoting.locomotion-fly .queue-pet__raster-stage {
  animation: qp-travel-float 0.75s ease-in-out infinite;
}
.queue-pet.is-raster.is-locomoting.locomotion-hop .queue-pet__raster-stage {
  animation: qp-travel-hop 0.5s ease-in-out infinite;
}
.queue-pet.is-raster.is-act-dance .queue-pet__raster-stage,
.queue-pet.is-raster.is-act-celebrate .queue-pet__raster-stage,
.queue-pet.is-raster.is-act-jump .queue-pet__raster-stage {
  animation: qp-act-celebrate 0.9s ease-in-out infinite !important;
}
.queue-pet.is-raster.is-act-attack .queue-pet__raster-stage,
.queue-pet.is-raster.is-act-pounce .queue-pet__raster-stage {
  animation: qp-act-attack 0.7s ease-in-out infinite !important;
}
.queue-pet.is-raster.is-act-cast .queue-pet__raster-stage,
.queue-pet.is-raster.is-act-think .queue-pet__raster-stage {
  animation: qp-act-cast 0.95s ease-in-out infinite !important;
}
.queue-pet.is-raster.is-act-wave .queue-pet__raster-stage,
.queue-pet.is-raster.is-act-flex .queue-pet__raster-stage,
.queue-pet.is-raster.is-act-spin .queue-pet__raster-stage,
.queue-pet.is-raster.is-act-stretch .queue-pet__raster-stage,
.queue-pet.is-raster.is-act-nod .queue-pet__raster-stage {
  animation: qp-act-wave 0.85s ease-in-out infinite !important;
}
.queue-companion.is-petted .queue-pet.is-raster .queue-pet__raster-stage {
  animation: qp-act-celebrate 0.75s ease-in-out infinite !important;
}

.queue-pet__classic-dot {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: linear-gradient(145deg, #2a4b73, var(--queue-orb-blue-deep, #203a5b));
  box-shadow: inset 0 0 0 1px rgba(190, 218, 247, 0.28);
}

/* No circular FX plate behind freestanding pets. */
.queue-pet__fx {
  display: none;
}

.queue-pet-svg {
  overflow: visible;
}

/* Locomotion while roaming / dragging */
.queue-pet.is-locomoting.locomotion-walk .qp-boot--l,
.queue-pet.is-locomoting.locomotion-walk .qp-foot--l {
  animation: qp-stomp-l 0.32s ease-in-out infinite !important;
}
.queue-pet.is-locomoting.locomotion-walk .qp-boot--r,
.queue-pet.is-locomoting.locomotion-walk .qp-foot--r {
  animation: qp-stomp-r 0.32s ease-in-out infinite !important;
}
.queue-pet.is-locomoting.locomotion-walk .qp-body {
  animation: qp-walk-bob 0.32s ease-in-out infinite !important;
}
.queue-pet.is-locomoting.locomotion-walk .qp-shadow {
  animation: qp-shadow-pulse 0.32s ease-in-out infinite !important;
}

.queue-pet.is-locomoting.locomotion-float .queue-pet-svg,
.queue-pet.is-locomoting.locomotion-float .queue-pet__rive,
.queue-pet.is-locomoting.locomotion-fly .queue-pet-svg,
.queue-pet.is-locomoting.locomotion-fly .queue-pet__rive {
  animation: qp-travel-float 0.7s ease-in-out infinite;
}
.queue-pet.is-locomoting.locomotion-fly .qp-wing--l {
  transform-origin: 70% 50%;
  animation: qp-wing-l 0.28s ease-in-out infinite !important;
}
.queue-pet.is-locomoting.locomotion-fly .qp-wing--r {
  transform-origin: 30% 50%;
  animation: qp-wing-r 0.28s ease-in-out infinite !important;
}

.queue-pet.is-locomoting.locomotion-hop .queue-pet-svg,
.queue-pet.is-locomoting.locomotion-hop .queue-pet__rive {
  animation: qp-travel-hop 0.45s ease-in-out infinite;
}
.queue-pet.is-locomoting.locomotion-hop .qp-ear--l,
.queue-pet.is-locomoting.locomotion-hop .qp-ear--r {
  animation: qp-ear-bounce 0.45s ease-in-out infinite !important;
}

.queue-pet.is-locomoting.locomotion-skitter .queue-pet-svg,
.queue-pet.is-locomoting.locomotion-skitter .queue-pet__rive {
  animation: qp-travel-skitter 0.28s linear infinite;
}
.queue-pet.is-locomoting.locomotion-skitter .qp-boot--l,
.queue-pet.is-locomoting.locomotion-skitter .qp-foot--l,
.queue-pet.is-locomoting.locomotion-skitter .qp-boot--r,
.queue-pet.is-locomoting.locomotion-skitter .qp-foot--r {
  animation: qp-stomp-l 0.18s ease-in-out infinite !important;
}

/* Idle animal life */
.queue-pet.has-reactions .qp-tail {
  transform-origin: 30% 50%;
  animation: qp-tail-wag 1.8s ease-in-out infinite;
}
.queue-pet.has-reactions.locomotion-fly:not(.is-locomoting) .qp-wing--l {
  transform-origin: 70% 50%;
  animation: qp-wing-l 1.4s ease-in-out infinite;
}
.queue-pet.has-reactions.locomotion-fly:not(.is-locomoting) .qp-wing--r {
  transform-origin: 30% 50%;
  animation: qp-wing-r 1.4s ease-in-out infinite;
}
.queue-pet.has-reactions .qp-ear--l {
  transform-origin: 50% 100%;
  animation: qp-ear-idle 2.4s ease-in-out infinite;
}
.queue-pet.has-reactions .qp-ear--r {
  transform-origin: 50% 100%;
  animation: qp-ear-idle 2.4s ease-in-out 0.2s infinite;
}

/* Mood faces */
.queue-pet-svg .qp-mouth--flat,
.queue-pet-svg .qp-mouth--open,
.queue-pet-svg .qp-sweat,
.queue-pet-svg .qp-fx-bolts,
.queue-pet-svg .qp-fx-slash,
.queue-pet-svg .qp-fx-stars,
.queue-pet-svg .qp-fx-sparkles,
.queue-pet-svg .qp-fx-burst,
.queue-pet-svg .qp-fx-notes,
.queue-pet-svg .qp-fx-runes,
.queue-pet-svg .qp-fx-impact,
.queue-pet-svg .qp-afterimage,
.queue-pet-svg .qp-ground-dust {
  opacity: 0;
  pointer-events: none;
}
.queue-pet-svg .qp-mouth--smile { opacity: 1; }
.queue-pet-svg.is-ready .qp-mouth--smile,
.queue-pet-svg.is-match .qp-mouth--smile { opacity: 0; }
.queue-pet-svg.is-ready .qp-mouth--flat { opacity: 1; }
.queue-pet-svg.is-match .qp-mouth--open { opacity: 1; }
.queue-pet-svg.is-queue .qp-sweat { opacity: 1; animation: qp-sweat-drip 1.2s ease-in-out infinite; }
.queue-pet-svg.is-ready .qp-brow--l,
.queue-pet-svg.is-ready .qp-brow--r { opacity: 1 !important; }

/* Shared body motion */
.queue-pet.has-reactions .queue-pet-svg.is-idle .qp-body,
.queue-pet.has-reactions .queue-pet-svg.is-idle .qp-flame,
.queue-pet.has-reactions .queue-pet-svg.is-idle .qp-head {
  animation: qp-breathe 2.6s ease-in-out infinite;
}
.queue-pet.has-reactions .queue-pet-svg.is-queue .qp-body,
.queue-pet.has-reactions .queue-pet-svg.is-queue .qp-flame {
  animation: qp-impatient 1.2s ease-in-out infinite;
}
.queue-pet.has-reactions .queue-pet-svg.is-ready {
  animation: qp-alert-pulse 0.9s ease-in-out infinite;
}
.queue-pet.has-reactions .queue-pet-svg.is-match {
  animation: qp-celebrate 1s ease-in-out infinite;
}

/* Mature ability-VFX tint (override cute pastels on FX layers) */
.queue-pet-svg .qp-fx-stars path,
.queue-pet-svg .qp-fx-stars circle {
  fill: #94a3b8 !important;
}
.queue-pet-svg .qp-fx-sparkles circle {
  fill: #cbd5e1 !important;
}
.queue-pet-svg .qp-fx-notes path,
.queue-pet-svg .qp-fx-notes circle {
  stroke: #64748b !important;
  fill: #94a3b8 !important;
}
.queue-pet-svg .qp-fx-bolts path {
  stroke: #93c5fd !important;
}
.queue-pet-svg .qp-fx-slash path {
  stroke: #e2e8f0 !important;
}
.queue-pet-svg .qp-fx-impact path {
  stroke: #cbd5e1 !important;
}
.queue-pet-svg .qp-fx-burst path {
  fill: #94a3b8 !important;
}
.queue-pet-svg--ember .qp-fx-burst path,
.queue-pet-svg--ember .qp-fx-stars circle {
  fill: #b45309 !important;
}
.queue-pet-svg--hex .qp-fx-burst path,
.queue-pet-svg--hex .qp-fx-stars circle,
.queue-pet-svg--hex .qp-fx-sparkles circle {
  fill: #818cf8 !important;
}

/* —— Spark —— */
.queue-pet-svg--spark.has-reactions .qp-orbit--far {
  transform-origin: 64px 62px;
  animation: qp-orbit-spin 7s linear infinite;
}
.queue-pet-svg--spark.has-reactions .qp-orbit--near {
  transform-origin: 64px 62px;
  animation: qp-orbit-spin-rev 4.5s linear infinite;
}
.queue-pet-svg--spark.has-reactions.is-queue .qp-orbit--far { animation-duration: 3.2s; }
.queue-pet-svg--spark.has-reactions.is-queue .qp-orbit--near { animation-duration: 2.2s; }
.queue-pet-svg--spark.has-reactions.is-ready .qp-orbit--far,
.queue-pet-svg--spark.has-reactions.is-match .qp-orbit--far { animation-duration: 1.6s; }
.queue-pet-svg--spark.has-reactions.is-ready .qp-orbit--near,
.queue-pet-svg--spark.has-reactions.is-match .qp-orbit--near { animation-duration: 1.1s; }
.queue-pet-svg--spark.has-reactions .qp-crest {
  transform-origin: 64px 40px;
  animation: qp-crest-twinkle 2s ease-in-out infinite;
}
.queue-pet-svg--spark.has-reactions .qp-heart {
  animation: qp-heart-pulse 1.8s ease-in-out infinite;
}
.queue-pet-svg--spark.has-reactions .qp-eye {
  transform-origin: center;
  animation: qp-blink 4.2s step-end infinite;
}
.queue-pet-svg--spark.has-reactions .qp-eyes {
  transform-origin: 64px 60px;
  animation: qp-look-around 6s ease-in-out infinite;
}
/* Idle limb waves removed — they detached arms from torso. Motion is body-level. */
.queue-pet-svg--spark.has-reactions .qp-ring--a {
  transform-origin: 64px 62px;
  animation: qp-orbit-spin 10s linear infinite;
  opacity: 0.45;
}
.queue-pet-svg--spark.has-reactions .qp-ring--b {
  transform-origin: 64px 62px;
  animation: qp-orbit-spin-rev 7s linear infinite;
  opacity: 0.35;
}
.queue-pet-svg--spark.has-reactions.is-ready .qp-fx-bolts,
.queue-pet-svg--spark.has-reactions.is-match .qp-fx-bolts {
  opacity: 1;
  animation: qp-bolt-flash 0.5s ease-in-out infinite;
}
.queue-pet-svg--spark.has-reactions.is-match .qp-fx-stars {
  opacity: 1;
}
.queue-pet-svg--spark.has-reactions.is-match .qp-star--a { animation: qp-star-pop 0.9s ease-in-out infinite; }
.queue-pet-svg--spark.has-reactions.is-match .qp-star--b { animation: qp-star-pop 0.9s ease-in-out 0.2s infinite; }
.queue-pet-svg--spark.has-reactions.is-match .qp-star--c { animation: qp-star-pop 0.9s ease-in-out 0.4s infinite; }
.queue-pet-svg--spark.has-reactions.is-queue .qp-ground-dust { opacity: 1; }
.queue-pet-svg--spark.has-reactions.is-queue .qp-dust--a { animation: qp-dust 1s ease-out infinite; }
.queue-pet-svg--spark.has-reactions.is-queue .qp-dust--b { animation: qp-dust 1.1s ease-out 0.2s infinite; }
.queue-pet-svg--spark.has-reactions.is-queue .qp-dust--c { animation: qp-dust 0.9s ease-out 0.35s infinite; }
.queue-pet-svg--spark.has-reactions.is-match .qp-foot--l { animation: qp-stomp-l 0.4s ease-in-out infinite; }
.queue-pet-svg--spark.has-reactions.is-match .qp-foot--r { animation: qp-stomp-r 0.4s ease-in-out infinite; }
.queue-pet-svg--spark.has-reactions.is-ready .qp-brow--l {
  transform: translateY(1px) rotate(-10deg);
  transform-origin: 53px 52px;
}
.queue-pet-svg--spark.has-reactions.is-ready .qp-brow--r {
  transform: translateY(1px) rotate(10deg);
  transform-origin: 75px 52px;
}

/* —— Blade —— */
.queue-pet-svg--blade.has-reactions .qp-cape {
  transform-origin: 64px 62px;
  animation: qp-cape-sway 2.4s ease-in-out infinite;
}
.queue-pet-svg--blade.has-reactions.is-queue .qp-cape { animation-duration: 1.4s; }
.queue-pet-svg--blade.has-reactions .qp-plume {
  transform-origin: 76px 22px;
  animation: qp-plume-wave 2s ease-in-out infinite;
}
.queue-pet-svg--blade.has-reactions .qp-sword-hand {
  transform-origin: 86px 72px;
  animation: qp-sword-idle 2.8s ease-in-out infinite;
}
.queue-pet-svg--blade.has-reactions.is-queue .qp-sword-hand {
  animation: qp-sword-tap 1s ease-in-out infinite;
}
.queue-pet-svg--blade.has-reactions.is-ready .qp-sword-hand {
  animation: qp-sword-guard 0.8s ease-in-out infinite;
}
.queue-pet-svg--blade.has-reactions.is-match .qp-sword-hand {
  animation: qp-sword-slash 0.5s ease-in-out infinite;
}
.queue-pet-svg--blade.has-reactions.is-ready .qp-fx-slash,
.queue-pet-svg--blade.has-reactions.is-match .qp-fx-slash {
  opacity: 1;
  animation: qp-slash-fade 0.65s ease-in-out infinite;
}
.queue-pet-svg--blade.has-reactions.is-match .qp-fx-sparkles { opacity: 1; }
.queue-pet-svg--blade.has-reactions.is-match .qp-glint--a { animation: qp-glint 0.7s ease-in-out infinite; }
.queue-pet-svg--blade.has-reactions.is-match .qp-glint--b { animation: qp-glint 0.7s ease-in-out 0.15s infinite; }
.queue-pet-svg--blade.has-reactions.is-match .qp-glint--c { animation: qp-glint 0.7s ease-in-out 0.3s infinite; }
.queue-pet-svg--blade.has-reactions.is-ready .qp-brow--l {
  transform: translateY(1px) rotate(-12deg);
  transform-origin: 56px 37px;
}
.queue-pet-svg--blade.has-reactions.is-ready .qp-brow--r {
  transform: translateY(1px) rotate(12deg);
  transform-origin: 72px 37px;
}
.queue-pet-svg--blade.has-reactions .qp-eye { animation: qp-blink 4.8s step-end infinite; }
.queue-pet-svg--blade.has-reactions.is-match .qp-boot--l { animation: qp-stomp-l 0.38s ease-in-out infinite; }
.queue-pet-svg--blade.has-reactions.is-match .qp-boot--r { animation: qp-stomp-r 0.38s ease-in-out infinite; }
.queue-pet-svg--blade.has-reactions.is-queue .qp-body {
  animation: qp-walk-sway 0.7s ease-in-out infinite;
}

/* —— Ember —— */
.queue-pet-svg--ember.has-reactions .qp-heat {
  transform-origin: 64px 70px;
  animation: qp-heat-pulse 2.2s ease-in-out infinite;
}
.queue-pet-svg--ember.has-reactions .qp-tongue--back {
  transform-origin: 64px 80px;
  animation: qp-flame-back 2s ease-in-out infinite;
}
.queue-pet-svg--ember.has-reactions .qp-tongue--outer {
  transform-origin: 64px 88px;
  animation: qp-flame-outer 1.6s ease-in-out infinite;
}
.queue-pet-svg--ember.has-reactions .qp-tongue--mid {
  transform-origin: 64px 84px;
  animation: qp-flame-mid 1.25s ease-in-out infinite;
}
.queue-pet-svg--ember.has-reactions .qp-tongue--inner {
  transform-origin: 64px 80px;
  animation: qp-flame-inner 1s ease-in-out infinite;
}
.queue-pet-svg--ember.has-reactions .qp-tongue--lick {
  animation: qp-flame-lick 1.45s ease-in-out infinite;
}
.queue-pet-svg--ember.has-reactions .qp-tongue--lick-b {
  animation: qp-flame-lick-b 1.7s ease-in-out infinite;
}
.queue-pet-svg--ember.has-reactions .qp-spark--a { animation: qp-ember-rise 2.2s ease-in infinite; }
.queue-pet-svg--ember.has-reactions .qp-spark--b { animation: qp-ember-rise 2.6s ease-in 0.3s infinite; }
.queue-pet-svg--ember.has-reactions .qp-spark--c { animation: qp-ember-rise 2s ease-in 0.6s infinite; }
.queue-pet-svg--ember.has-reactions .qp-spark--d { animation: qp-ember-rise 2.8s ease-in 0.9s infinite; }
.queue-pet-svg--ember.has-reactions .qp-spark--e { animation: qp-ember-rise 2.3s ease-in 1.1s infinite; }
.queue-pet-svg--ember.has-reactions .qp-spark--f { animation: qp-ember-rise 2.5s ease-in 0.5s infinite; }
.queue-pet-svg--ember.has-reactions.is-ready .qp-tongue--outer,
.queue-pet-svg--ember.has-reactions.is-match .qp-tongue--outer {
  animation-duration: 0.65s;
  filter: brightness(1.18);
}
.queue-pet-svg--ember.has-reactions.is-ready .qp-tongue--mid,
.queue-pet-svg--ember.has-reactions.is-match .qp-tongue--mid {
  animation-duration: 0.5s;
}
.queue-pet-svg--ember.has-reactions.is-match .qp-fx-burst {
  opacity: 1;
  animation: qp-burst-pop 0.75s ease-in-out infinite;
}
.queue-pet-svg--ember.has-reactions .qp-eye { animation: qp-blink 4s step-end infinite; }
.queue-pet-svg--ember.has-reactions.is-ready .qp-brow--l {
  transform: translateY(1px) rotate(-10deg);
  transform-origin: 53px 62px;
}
.queue-pet-svg--ember.has-reactions.is-ready .qp-brow--r {
  transform: translateY(1px) rotate(10deg);
  transform-origin: 75px 62px;
}

/* —— Random alive-acts (SVG + Rive canvas) —— */
.queue-pet.is-act-dance .queue-pet-svg,
.queue-pet.is-act-dance .queue-pet__rive,
.queue-pet-svg.is-act-dance {
  animation: qp-act-dance 0.85s ease-in-out infinite !important;
}
.queue-pet.is-act-spin .queue-pet-svg,
.queue-pet.is-act-spin .queue-pet__rive,
.queue-pet-svg.is-act-spin {
  animation: qp-act-spin 1s ease-in-out infinite !important;
}
.queue-pet.is-act-attack .queue-pet-svg,
.queue-pet.is-act-attack .queue-pet__rive,
.queue-pet-svg.is-act-attack {
  animation: qp-act-attack 0.65s ease-in-out infinite !important;
}
/* Wave = whole figure nod (limb-only rotate looked detached) */
.queue-pet.is-act-wave .queue-pet-svg,
.queue-pet.is-act-wave .queue-pet__rive,
.queue-pet-svg.is-act-wave {
  animation: qp-act-nod 0.7s ease-in-out infinite !important;
}
.queue-pet.is-act-wave .queue-pet-svg .qp-arm--r,
.queue-pet-svg.is-act-wave .qp-arm--r {
  transform-origin: top center;
  animation: qp-arm-wave-r 0.55s ease-in-out infinite !important;
}
.queue-pet.is-act-stretch .queue-pet-svg,
.queue-pet.is-act-stretch .queue-pet__rive,
.queue-pet-svg.is-act-stretch {
  animation: qp-act-stretch 1.05s ease-in-out infinite !important;
}
.queue-pet.is-act-flex .queue-pet-svg,
.queue-pet.is-act-flex .queue-pet__rive,
.queue-pet-svg.is-act-flex {
  animation: qp-act-flex 0.8s ease-in-out infinite !important;
}
.queue-pet.is-act-pounce .queue-pet-svg,
.queue-pet.is-act-pounce .queue-pet__rive,
.queue-pet-svg.is-act-pounce {
  animation: qp-act-pounce 0.75s ease-in-out infinite !important;
}
.queue-pet.is-act-cast .queue-pet-svg,
.queue-pet.is-act-cast .queue-pet__rive,
.queue-pet-svg.is-act-cast {
  animation: qp-act-cast 0.9s ease-in-out infinite !important;
}
.queue-pet.is-act-vanish .queue-pet-svg,
.queue-pet.is-act-vanish .queue-pet__rive,
.queue-pet-svg.is-act-vanish {
  animation: qp-act-vanish 0.85s ease-in-out infinite !important;
}
.queue-pet.is-act-sit .queue-pet-svg,
.queue-pet.is-act-sit .queue-pet__rive,
.queue-pet-svg.is-act-sit {
  animation: qp-act-sit 1.1s ease-in-out infinite !important;
}
.queue-pet.is-act-nod .queue-pet-svg,
.queue-pet.is-act-nod .queue-pet__rive,
.queue-pet-svg.is-act-nod {
  animation: qp-act-nod 0.7s ease-in-out infinite !important;
}
.queue-pet.is-act-think .queue-pet-svg,
.queue-pet.is-act-think .queue-pet__rive,
.queue-pet-svg.is-act-think {
  animation: qp-act-think 1.2s ease-in-out infinite !important;
}
.queue-pet.is-act-celebrate .queue-pet-svg,
.queue-pet.is-act-celebrate .queue-pet__rive,
.queue-pet-svg.is-act-celebrate {
  animation: qp-act-celebrate 0.85s ease-in-out infinite !important;
}
.queue-pet.is-act-jump .queue-pet-svg,
.queue-pet.is-act-jump .queue-pet__rive,
.queue-pet-svg.is-act-jump {
  animation: qp-act-jump 0.7s ease-in-out infinite !important;
}

/* Show combat / spell / vibe FX while acting */
.queue-pet-svg.is-act-attack .qp-fx-slash,
.queue-pet-svg.is-act-attack .qp-fx-impact,
.queue-pet-svg.is-act-attack .qp-fx-bolts,
.queue-pet-svg.is-act-pounce .qp-fx-slash,
.queue-pet-svg.is-act-pounce .qp-ground-dust,
.queue-pet-svg.is-act-cast .qp-fx-burst,
.queue-pet-svg.is-act-cast .qp-fx-runes,
.queue-pet-svg.is-act-cast .qp-fx-sparkles,
.queue-pet-svg.is-act-dance .qp-fx-notes,
.queue-pet-svg.is-act-dance .qp-fx-stars,
.queue-pet-svg.is-act-vanish .qp-afterimage,
.queue-pet-svg.is-act-vanish .qp-fx-stars,
.queue-pet-svg.is-act-celebrate .qp-fx-stars,
.queue-pet-svg.is-act-celebrate .qp-fx-sparkles,
.queue-pet-svg.is-act-celebrate .qp-fx-notes,
.queue-pet-svg.is-act-celebrate .qp-fx-burst,
.queue-pet-svg.is-act-jump .qp-ground-dust,
.queue-pet-svg.is-act-jump .qp-fx-stars,
.queue-pet-svg.is-act-think .qp-fx-sparkles,
.queue-pet-svg.is-act-think .qp-fx-runes,
.queue-pet-svg.is-act-sit .qp-fx-sparkles,
.queue-pet-svg.is-act-nod .qp-fx-sparkles {
  opacity: 1 !important;
}

.queue-pet-svg.is-act-celebrate .qp-star--a { animation: qp-star-pop 0.85s ease-in-out infinite; }
.queue-pet-svg.is-act-celebrate .qp-star--b { animation: qp-star-pop 0.85s ease-in-out 0.15s infinite; }
.queue-pet-svg.is-act-celebrate .qp-star--c { animation: qp-star-pop 0.85s ease-in-out 0.3s infinite; }
.queue-pet-svg.is-act-jump .qp-dust--a,
.queue-pet-svg.is-act-pounce .qp-dust--a { animation: qp-dust 0.7s ease-out infinite; }
.queue-pet-svg.is-act-jump .qp-dust--b,
.queue-pet-svg.is-act-pounce .qp-dust--b { animation: qp-dust 0.75s ease-out 0.12s infinite; }
.queue-pet-svg.is-act-nod .qp-head {
  transform-origin: 64px 48px;
  animation: qp-act-nod-head 0.7s ease-in-out infinite !important;
}
.queue-pet-svg.is-act-think .qp-head {
  transform-origin: 64px 48px;
  animation: qp-act-think-head 1.2s ease-in-out infinite !important;
}
.queue-pet-svg.is-act-sit .qp-body {
  animation: qp-act-sit-body 1.1s ease-in-out infinite !important;
}

/* —— Signature packs: fighters / spirits —— */
.queue-pet-svg--spark.has-reactions .qp-body {
  animation: qp-breathe 2.8s ease-in-out infinite;
}
.queue-pet-svg--spark.is-act-cast .qp-fx-bolts,
.queue-pet-svg--spark.is-act-attack .qp-fx-bolts {
  opacity: 1 !important;
  animation: qp-bolt-flash 0.55s ease-in-out infinite;
}
.queue-pet-svg--spark.is-act-celebrate .qp-orbit--far { animation-duration: 1.2s !important; }
.queue-pet-svg--spark.is-act-celebrate .qp-orbit--near { animation-duration: 0.9s !important; }

.queue-pet-svg--blade.has-reactions .qp-cape {
  transform-origin: 64px 40px;
  animation: qp-cape-sway 2.4s ease-in-out infinite;
}
.queue-pet-svg--blade.has-reactions .qp-plume {
  transform-origin: 70px 22px;
  animation: qp-plume-wave 2.2s ease-in-out infinite;
}
.queue-pet-svg--blade.is-act-attack .qp-sword-hand,
.queue-pet-svg--blade.is-act-pounce .qp-sword-hand {
  animation: qp-sword-slash 0.55s ease-in-out infinite !important;
}
.queue-pet-svg--blade.is-act-flex .qp-sword-hand {
  animation: qp-sword-guard 0.7s ease-in-out infinite !important;
}

.queue-pet-svg--ember.has-reactions .qp-flame,
.queue-pet--ember.has-reactions .queue-pet__rive {
  animation: qp-heat-pulse 2.2s ease-in-out infinite;
}
.queue-pet-svg--ember.is-act-cast .qp-fx-burst,
.queue-pet-svg--ember.is-act-attack .qp-fx-burst,
.queue-pet-svg--ember.is-act-celebrate .qp-fx-burst {
  opacity: 1 !important;
  animation: qp-burst-pop 0.7s ease-in-out infinite;
}
.queue-pet.is-act-cast.queue-pet--ember .queue-pet__rive,
.queue-pet.is-act-attack.queue-pet--ember .queue-pet__rive {
  filter: brightness(1.18) saturate(1.15);
}

.queue-pet-svg--shade.has-reactions .qp-scarf-tail {
  transform-origin: 78px 52px;
  animation: qp-plume-wave 1.8s ease-in-out infinite;
}
.queue-pet-svg--shade.is-act-attack .qp-weapon,
.queue-pet-svg--shade.is-act-pounce .qp-weapon {
  animation: qp-sword-slash 0.5s ease-in-out infinite !important;
}
.queue-pet-svg--shade.is-act-vanish .qp-afterimage {
  opacity: 0.55 !important;
  animation: qp-slash-fade 0.85s ease-in-out infinite;
}

.queue-pet-svg--tempo.has-reactions .qp-ribbon--l {
  animation: qp-arm-wave-l 2.4s ease-in-out infinite;
}
.queue-pet-svg--tempo.has-reactions .qp-ribbon--r {
  animation: qp-arm-wave-r 2.4s ease-in-out infinite;
}
.queue-pet-svg--tempo.is-act-dance .qp-ribbon--l,
.queue-pet-svg--tempo.is-act-jump .qp-ribbon--l {
  animation: qp-arm-wave-l 0.45s ease-in-out infinite !important;
}
.queue-pet-svg--tempo.is-act-dance .qp-ribbon--r,
.queue-pet-svg--tempo.is-act-jump .qp-ribbon--r {
  animation: qp-arm-wave-r 0.45s ease-in-out infinite !important;
}
.queue-pet-svg--tempo.is-act-dance .qp-note--a,
.queue-pet-svg--tempo.is-act-spin .qp-note--a,
.queue-pet-svg--tempo.is-act-jump .qp-note--a,
.queue-pet-svg--tempo.is-act-celebrate .qp-note--a {
  opacity: 1;
  animation: qp-star-pop 0.6s ease-in-out infinite;
}
.queue-pet-svg--tempo.is-act-dance .qp-note--b,
.queue-pet-svg--tempo.is-act-spin .qp-note--b,
.queue-pet-svg--tempo.is-act-jump .qp-note--b,
.queue-pet-svg--tempo.is-act-celebrate .qp-note--b {
  opacity: 1;
  animation: qp-star-pop 0.6s ease-in-out 0.15s infinite;
}

.queue-pet-svg--riot.has-reactions .qp-fist--l,
.queue-pet-svg--riot.has-reactions .qp-fist--r {
  transform-origin: center;
  animation: qp-heart-pulse 2s ease-in-out infinite;
}
.queue-pet-svg--riot.is-act-attack .qp-fist--r,
.queue-pet-svg--riot.is-act-pounce .qp-fist--r {
  animation: qp-sword-slash 0.5s ease-in-out infinite !important;
}
.queue-pet-svg--riot.is-act-attack .qp-ground-dust,
.queue-pet-svg--riot.is-act-jump .qp-ground-dust {
  opacity: 1 !important;
}

.queue-pet-svg--quiver.has-reactions .qp-quiver-pack {
  animation: qp-breathe 2.8s ease-in-out infinite;
}
.queue-pet-svg--quiver.is-act-attack .qp-bow,
.queue-pet-svg--quiver.is-act-pounce .qp-bow {
  transform-origin: 90px 68px;
  animation: qp-sword-guard 0.6s ease-in-out infinite !important;
}
.queue-pet-svg--quiver.is-act-celebrate .qp-fx-stars {
  opacity: 1 !important;
}

.queue-pet-svg--hex.has-reactions .qp-rune--a { animation: qp-ember-rise 3s ease-in infinite; opacity: 0.7; }
.queue-pet-svg--hex.has-reactions .qp-rune--b { animation: qp-ember-rise 2.6s ease-in 0.5s infinite; opacity: 0.7; }
.queue-pet-svg--hex.has-reactions .qp-rune--c { animation: qp-ember-rise 2.8s ease-in 1s infinite; opacity: 0.7; }
.queue-pet-svg--hex.is-act-cast .qp-staff-orb,
.queue-pet-svg--hex.is-act-attack .qp-staff-orb,
.queue-pet-svg--hex.is-act-think .qp-staff-orb {
  animation: qp-heart-pulse 0.55s ease-in-out infinite !important;
}

/* —— Bassel (portrait companion) —— */
.queue-pet-svg--bassel.has-reactions .qp-hair {
  transform-origin: 64px 26px;
  animation: qp-crest-twinkle 3.2s ease-in-out infinite;
}
.queue-pet-svg--bassel.has-reactions .qp-beard {
  transform-origin: 64px 48px;
  animation: qp-breathe 3.4s ease-in-out infinite;
}
.queue-pet-svg--bassel.has-reactions .qp-eye {
  animation: qp-blink 4.6s step-end infinite;
}
.queue-pet-svg--bassel.has-reactions.is-queue .qp-body {
  animation: qp-walk-sway 0.85s ease-in-out infinite;
}
.queue-pet-svg--bassel.is-act-attack .qp-arm--r,
.queue-pet-svg--bassel.is-act-pounce .qp-arm--r {
  animation: qp-sword-slash 0.5s ease-in-out infinite !important;
}
.queue-pet-svg--bassel.is-act-dance .qp-arm--l,
.queue-pet-svg--bassel.is-act-dance .qp-arm--r,
.queue-pet-svg--bassel.is-act-celebrate .qp-arm--l,
.queue-pet-svg--bassel.is-act-celebrate .qp-arm--r {
  animation: qp-arm-cheer 0.55s ease-in-out infinite !important;
}
.queue-pet-svg--bassel.is-act-flex .qp-arm--l,
.queue-pet-svg--bassel.is-act-flex .qp-arm--r {
  animation: qp-heart-pulse 0.65s ease-in-out infinite !important;
}
.queue-pet-svg--bassel.is-act-nod .qp-head {
  transform-origin: 64px 40px;
  animation: qp-act-nod-head 0.7s ease-in-out infinite !important;
}
.queue-pet-svg--bassel.is-act-dance .qp-fx-notes,
.queue-pet-svg--bassel.is-act-spin .qp-fx-stars,
.queue-pet-svg--bassel.is-act-celebrate .qp-fx-stars,
.queue-pet-svg--bassel.is-act-attack .qp-fx-impact {
  opacity: 1 !important;
}

/* —— Animals —— */
.queue-pet-svg--fox.has-reactions .qp-tail,
.queue-pet-svg--cat.has-reactions .qp-tail,
.queue-pet-svg--pup.has-reactions .qp-tail {
  animation: qp-tail-wag 1.6s ease-in-out infinite;
}
.queue-pet-svg--fox.has-reactions.is-match .qp-tail,
.queue-pet-svg--cat.has-reactions.is-match .qp-tail,
.queue-pet-svg--pup.has-reactions.is-match .qp-tail {
  animation-duration: 0.7s;
}
.queue-pet-svg--fox.has-reactions .qp-ear--l,
.queue-pet-svg--cat.has-reactions .qp-ear--l,
.queue-pet-svg--pup.has-reactions .qp-ear--l,
.queue-pet-svg--bunny.has-reactions .qp-ear--l {
  animation: qp-ear-idle 2.2s ease-in-out infinite;
}
.queue-pet-svg--fox.has-reactions .qp-ear--r,
.queue-pet-svg--cat.has-reactions .qp-ear--r,
.queue-pet-svg--pup.has-reactions .qp-ear--r,
.queue-pet-svg--bunny.has-reactions .qp-ear--r {
  animation: qp-ear-idle 2.2s ease-in-out 0.18s infinite;
}
.queue-pet-svg--fox.has-reactions .qp-eye,
.queue-pet-svg--cat.has-reactions .qp-eye,
.queue-pet-svg--pup.has-reactions .qp-eye,
.queue-pet-svg--bunny.has-reactions .qp-eye,
.queue-pet-svg--owl.has-reactions .qp-eye {
  animation: qp-blink 4.8s step-end infinite;
}
.queue-pet-svg--fox.is-act-wave .qp-arm--r,
.queue-pet-svg--cat.is-act-wave .qp-arm--r,
.queue-pet-svg--pup.is-act-wave .qp-arm--r,
.queue-pet-svg--bunny.is-act-wave .qp-arm--r {
  animation: qp-act-wave 0.5s ease-in-out infinite !important;
}
.queue-pet-svg--fox.is-act-sit .qp-tail,
.queue-pet-svg--cat.is-act-sit .qp-tail,
.queue-pet-svg--pup.is-act-sit .qp-tail,
.queue-pet-svg--bunny.is-act-sit .qp-ear--l,
.queue-pet-svg--bunny.is-act-sit .qp-ear--r {
  animation: qp-breathe 1.1s ease-in-out infinite !important;
}
.queue-pet-svg--fox.is-act-pounce .qp-body,
.queue-pet-svg--cat.is-act-pounce .qp-body,
.queue-pet-svg--pup.is-act-jump .qp-body,
.queue-pet-svg--bunny.is-act-jump .qp-body {
  animation: qp-act-pounce 0.7s ease-in-out infinite !important;
}
.queue-pet-svg--bunny.is-act-jump .qp-ear--l,
.queue-pet-svg--bunny.is-act-jump .qp-ear--r,
.queue-pet-svg--bunny.is-act-celebrate .qp-ear--l,
.queue-pet-svg--bunny.is-act-celebrate .qp-ear--r {
  animation: qp-ear-bounce 0.55s ease-in-out infinite !important;
}
.queue-pet-svg--owl.has-reactions .qp-wing--l {
  transform-origin: 70% 50%;
  animation: qp-wing-l 1.6s ease-in-out infinite;
}
.queue-pet-svg--owl.has-reactions .qp-wing--r {
  transform-origin: 30% 50%;
  animation: qp-wing-r 1.6s ease-in-out infinite;
}
.queue-pet-svg--owl.is-act-dance .qp-wing--l,
.queue-pet-svg--owl.is-act-cast .qp-wing--l,
.queue-pet-svg--owl.is-act-think .qp-wing--l {
  animation: qp-wing-l 0.4s ease-in-out infinite !important;
}
.queue-pet-svg--owl.is-act-dance .qp-wing--r,
.queue-pet-svg--owl.is-act-cast .qp-wing--r,
.queue-pet-svg--owl.is-act-think .qp-wing--r {
  animation: qp-wing-r 0.4s ease-in-out infinite !important;
}
.queue-pet-svg--owl.is-act-nod .qp-head {
  transform-origin: 64px 52px;
  animation: qp-act-nod-head 0.75s ease-in-out infinite !important;
}
.queue-pet-svg--owl.is-act-think .qp-head {
  transform-origin: 64px 52px;
  animation: qp-act-think-head 1.2s ease-in-out infinite !important;
}

/* Petting happy beat (QueueCompanionLayer.is-petted) */
.queue-companion.is-petted .queue-pet-svg,
.queue-companion.is-petted .queue-pet__rive,
.queue-follower--orb.is-petted .queue-pet-svg {
  animation: qp-act-celebrate 0.7s ease-in-out infinite !important;
}
.queue-companion.is-petted .queue-pet-svg .qp-fx-stars,
.queue-companion.is-petted .queue-pet-svg .qp-fx-sparkles,
.queue-companion.is-petted .queue-pet-svg .qp-fx-burst,
.queue-companion.is-petted .queue-pet-svg .qp-heart {
  opacity: 1 !important;
}
.queue-companion.is-petted .queue-pet-svg .qp-tail {
  animation: qp-tail-wag 0.55s ease-in-out infinite !important;
}
.queue-companion.is-petted .queue-pet-svg .qp-ear--l,
.queue-companion.is-petted .queue-pet-svg .qp-ear--r {
  animation: qp-ear-bounce 0.5s ease-in-out infinite !important;
}

.queue-follower__settings-appearance {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  margin-bottom: 0.35rem;
}

.queue-follower__settings-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
}

.queue-follower__settings-radio input {
  accent-color: var(--color-accent);
}

.queue-follower__pet-picker-wrap {
  display: grid;
  gap: 0.4rem;
  margin: 0.25rem 0 0.55rem;
}

.queue-follower__pet-picker {
  display: grid;
  gap: 0.45rem;
}

.queue-follower__pet-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}

.queue-follower__pet-pager-btn {
  display: inline-grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: var(--radius-md, 0.45rem);
  border: 1px solid color-mix(in srgb, var(--color-border, #3a4a63) 80%, transparent);
  background: color-mix(in srgb, var(--color-bg, #121820) 70%, transparent);
  color: var(--color-text);
  cursor: pointer;
}

.queue-follower__pet-pager-btn:hover:not(:disabled),
.queue-follower__pet-pager-btn:focus-visible:not(:disabled) {
  border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
}

.queue-follower__pet-pager-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.queue-follower__pet-pager-meta {
  min-width: 3rem;
  text-align: center;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.queue-follower__pet-option {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0.55rem;
  align-items: center;
  text-align: left;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-md, 0.5rem);
  border: 1px solid color-mix(in srgb, var(--color-border, #3a4a63) 80%, transparent);
  background: color-mix(in srgb, var(--color-bg, #121820) 70%, transparent);
  color: inherit;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.queue-follower__pet-option:hover,
.queue-follower__pet-option:focus-visible {
  border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
}

.queue-follower__pet-option.is-selected {
  border-color: color-mix(in srgb, var(--color-accent) 70%, transparent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 25%, transparent);
}

.queue-follower__pet-option-art {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--queue-orb-blue-deep, #203a5b) 55%, transparent);
  overflow: hidden;
}

.queue-follower__pet-option-meta {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.queue-follower__pet-option-meta strong {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold, 600);
}

.queue-follower__pet-option-meta span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.3;
}

@keyframes qp-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-1.5px) scale(1.012); }
}
@keyframes qp-land-squash {
  0% { transform: scaleX(var(--qp-land-face, 1)) scaleY(1.06) translateY(-6%); }
  55% { transform: scaleX(calc(var(--qp-land-face, 1) * 1.06)) scaleY(0.9) translateY(2%); }
  100% { transform: scaleX(var(--qp-land-face, 1)) scaleY(1) translateY(0); }
}
.queue-pet.is-settling.is-face-left { --qp-land-face: -1; }
.queue-pet.is-settling.is-face-right { --qp-land-face: 1; }
@keyframes qp-notice-lean {
  0% { transform: scaleX(var(--qp-notice-face, 1)) translateX(0); }
  40% { transform: scaleX(var(--qp-notice-face, 1)) translateX(4%); }
  100% { transform: scaleX(var(--qp-notice-face, 1)) translateX(0); }
}
.queue-pet.is-intent-notice.is-face-left { --qp-notice-face: -1; }
.queue-pet.is-intent-notice.is-face-right { --qp-notice-face: 1; }
@keyframes qp-ground-land {
  0% { transform: scaleY(0.35) scaleX(0.9); opacity: 0.25; }
  55% { transform: scaleY(0.65) scaleX(1.18); opacity: 0.95; }
  100% { transform: scaleY(0.55) scaleX(1); opacity: 0.85; }
}
@keyframes qp-impatient {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-2px) rotate(-1.2deg); }
  75% { transform: translateY(-1px) rotate(1.2deg); }
}
@keyframes qp-alert-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
@keyframes qp-celebrate {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-4px) rotate(-3deg); }
  75% { transform: translateY(-1px) rotate(3deg); }
}
@keyframes qp-orbit-spin { to { transform: rotate(360deg); } }
@keyframes qp-orbit-spin-rev { to { transform: rotate(-360deg); } }
@keyframes qp-crest-twinkle {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.1); filter: brightness(1.25); }
}
@keyframes qp-heart-pulse {
  0%, 100% { transform: scale(1); opacity: 0.45; }
  50% { transform: scale(1.2); opacity: 0.75; }
}
@keyframes qp-blink {
  0%, 40%, 44%, 100% { transform: scaleY(1); }
  42% { transform: scaleY(0.1); }
}
@keyframes qp-look-around {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-2px); }
  70% { transform: translateX(2px); }
}
/* Shoulder-hinged only — tiny angles so limbs stay visually attached */
@keyframes qp-arm-wave-l {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-4deg); }
}
@keyframes qp-arm-wave-r {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(4deg); }
}
@keyframes qp-arm-cheer {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(-6deg) translateY(-1px); }
}
@keyframes qp-bolt-flash {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
@keyframes qp-star-pop {
  0%, 100% { transform: scale(0.7); opacity: 0.25; }
  50% { transform: scale(1.15); opacity: 1; }
}
@keyframes qp-dust {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  40% { opacity: 0.8; }
  100% { transform: translate(-6px, -8px) scale(1.2); opacity: 0; }
}
@keyframes qp-sweat-drip {
  0%, 100% { transform: translateY(0); opacity: 0.35; }
  50% { transform: translateY(3px); opacity: 1; }
}
@keyframes qp-stomp-l {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes qp-stomp-r {
  0%, 100% { transform: translateY(-3px); }
  50% { transform: translateY(0); }
}
@keyframes qp-cape-sway {
  0%, 100% { transform: skewX(0deg) scaleY(1); }
  50% { transform: skewX(-5deg) scaleY(1.05); }
}
@keyframes qp-plume-wave {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(14deg); }
}
@keyframes qp-sword-idle {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-5deg); }
}
@keyframes qp-sword-tap {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  40% { transform: rotate(-12deg) translateY(1px); }
  70% { transform: rotate(8deg) translateY(-1px); }
}
@keyframes qp-sword-guard {
  0%, 100% { transform: rotate(-20deg) translate(1px, -3px); }
  50% { transform: rotate(-28deg) translate(2px, -4px); }
}
@keyframes qp-sword-slash {
  0% { transform: rotate(-8deg) translate(0, 0); }
  50% { transform: rotate(10deg) translate(2px, 1px); }
  100% { transform: rotate(-8deg) translate(0, 0); }
}
@keyframes qp-slash-fade {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.95; }
}
@keyframes qp-glint {
  0%, 100% { opacity: 0.2; transform: scale(0.7); }
  50% { opacity: 1; transform: scale(1.3); }
}
@keyframes qp-walk-sway {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  50% { transform: translateX(2px) rotate(1.5deg); }
}
@keyframes qp-heat-pulse {
  0%, 100% { transform: scale(0.95); opacity: 0.35; }
  50% { transform: scale(1.08); opacity: 0.65; }
}
@keyframes qp-flame-back {
  0%, 100% { transform: scaleY(1) rotate(0deg); opacity: 0.45; }
  50% { transform: scaleY(1.12) rotate(3deg); opacity: 0.7; }
}
@keyframes qp-flame-outer {
  0%, 100% { transform: scaleY(1) scaleX(1) rotate(0deg); }
  50% { transform: scaleY(1.1) scaleX(0.94) rotate(-2deg); }
}
@keyframes qp-flame-mid {
  0%, 100% { transform: scaleY(1) translateY(0); }
  50% { transform: scaleY(1.12) translateY(-2px); }
}
@keyframes qp-flame-inner {
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50% { transform: scale(1.14); opacity: 1; }
}
@keyframes qp-flame-lick {
  0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.4; }
  50% { transform: translate(3px, -4px) rotate(10deg); opacity: 0.85; }
}
@keyframes qp-flame-lick-b {
  0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.3; }
  50% { transform: translate(-3px, -3px) rotate(-8deg); opacity: 0.7; }
}
@keyframes qp-ember-rise {
  0% { transform: translateY(10px) scale(0.5); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translateY(-28px) scale(1.15); opacity: 0; }
}
@keyframes qp-burst-pop {
  0%, 100% { transform: scale(0.8); opacity: 0.3; }
  50% { transform: scale(1.15); opacity: 0.9; }
}
@keyframes qp-act-dance {
  0%, 100% { transform: translateY(0) rotate(-1.5deg) scale(1); }
  25% { transform: translateY(-4px) rotate(2deg) scale(1.015); }
  50% { transform: translateY(-1px) rotate(-2deg) scale(1.01); }
  75% { transform: translateY(-5px) rotate(1.5deg) scale(1.02); }
}
@keyframes qp-act-spin {
  0% { transform: rotate(0deg) scale(1); }
  45% { transform: rotate(180deg) scale(1.03); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes qp-act-attack {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  35% { transform: translate(7px, -2px) rotate(5deg) scale(1.03); }
  55% { transform: translate(-2px, 1px) rotate(-2deg); }
}
@keyframes qp-act-wave {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(6deg) translateY(0); }
}
@keyframes qp-act-stretch {
  0%, 100% { transform: scaleY(1) scaleX(1); }
  50% { transform: scaleY(1.06) scaleX(0.97) translateY(-2px); }
}
@keyframes qp-act-flex {
  0%, 100% { transform: scale(1, 1); }
  40% { transform: scale(1.05, 0.96); }
  70% { transform: scale(0.97, 1.04); }
}
@keyframes qp-act-pounce {
  0%, 100% { transform: translate(0, 0) scale(1); }
  35% { transform: translate(0, -8px) scale(1.04); }
  55% { transform: translate(5px, 1px) scale(0.98); }
}
@keyframes qp-act-cast {
  0%, 100% { transform: scale(1) rotate(0deg); filter: brightness(1); }
  40% { transform: scale(1.04) rotate(-1.5deg); filter: brightness(1.1); }
  70% { transform: scale(1.02) rotate(1.5deg); filter: brightness(1.06); }
}
@keyframes qp-act-vanish {
  0%, 100% { opacity: 1; transform: translate(0, 0) scale(1); filter: blur(0); }
  35% { opacity: 0.12; transform: translate(-14px, -1px) scale(0.94); filter: blur(1.5px); }
  55% { opacity: 0.15; transform: translate(14px, 1px) scale(0.95); filter: blur(1.5px); }
  75% { opacity: 1; transform: translate(0, 0) scale(1.02); filter: blur(0); }
}
@keyframes qp-act-sit {
  0%, 100% { transform: translateY(3px) scaleY(0.96) scaleX(1.02); }
  50% { transform: translateY(4px) scaleY(0.94) scaleX(1.03); }
}
@keyframes qp-act-sit-body {
  0%, 100% { transform: translateY(1px) scaleY(0.97); }
  50% { transform: translateY(2px) scaleY(0.95); }
}
@keyframes qp-act-nod {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  40% { transform: translateY(2px) rotate(1deg); }
  70% { transform: translateY(-1px) rotate(-0.5deg); }
}
@keyframes qp-act-nod-head {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  40% { transform: rotate(5deg) translateY(2px); }
  70% { transform: rotate(-2deg) translateY(-1px); }
}
@keyframes qp-act-think {
  0%, 100% { transform: translateY(0) rotate(-0.5deg) scale(1); }
  50% { transform: translateY(-2px) rotate(1deg) scale(1.01); }
}
@keyframes qp-act-think-head {
  0%, 100% { transform: rotate(-3deg) translate(0, 0); }
  50% { transform: rotate(4deg) translate(1px, -1px); }
}
@keyframes qp-act-celebrate {
  0%, 100% { transform: translateY(0) rotate(-1deg) scale(1); }
  25% { transform: translateY(-6px) rotate(2deg) scale(1.03); }
  50% { transform: translateY(-1px) rotate(-2deg) scale(1.015); }
  75% { transform: translateY(-7px) rotate(1.5deg) scale(1.035); }
}
@keyframes qp-act-jump {
  0%, 100% { transform: translateY(0) scaleY(1) scaleX(1); }
  30% { transform: translateY(-11px) scaleY(1.03) scaleX(0.98); }
  55% { transform: translateY(1px) scaleY(0.94) scaleX(1.04); }
  75% { transform: translateY(-3px) scaleY(1.01) scaleX(0.99); }
}
@keyframes qp-ambient-glow {
  0%, 100% { opacity: 0.35; transform: scale(0.96); }
  50% { opacity: 0.7; transform: scale(1.05); }
}
@keyframes qp-walk-bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-2px) rotate(1deg); }
}
@keyframes qp-shadow-pulse {
  0%, 100% { transform: scaleX(1); opacity: 0.4; }
  50% { transform: scaleX(0.85); opacity: 0.25; }
}
@keyframes qp-travel-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-7px) rotate(2deg); }
}
@keyframes qp-travel-hop {
  0%, 100% { transform: translateY(0) scaleY(1); }
  35% { transform: translateY(-12px) scaleY(1.04); }
  55% { transform: translateY(0) scaleY(0.94); }
}
@keyframes qp-travel-skitter {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(1px, -2px) rotate(-3deg); }
  75% { transform: translate(-1px, -1px) rotate(3deg); }
}
@keyframes qp-wing-l {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-28deg); }
}
@keyframes qp-wing-r {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(28deg); }
}
@keyframes qp-tail-wag {
  0%, 100% { transform: rotate(-12deg); }
  50% { transform: rotate(18deg); }
}
@keyframes qp-ear-idle {
  0%, 100% { transform: rotate(0deg); }
  40% { transform: rotate(-6deg); }
  70% { transform: rotate(4deg); }
}
@keyframes qp-ear-bounce {
  0%, 100% { transform: rotate(0deg); }
  40% { transform: rotate(-16deg); }
  70% { transform: rotate(10deg); }
}

@media (prefers-reduced-motion: reduce) {
  .queue-pet.has-reactions .queue-pet-svg,
  .queue-pet.has-reactions .queue-pet-svg *,
  .queue-pet.has-reactions .queue-pet__rive,
  .queue-pet.has-reactions .queue-pet__raster,
  .queue-pet.has-reactions .queue-pet__raster-stage,
  .queue-pet.is-locomoting .queue-pet-svg,
  .queue-pet.is-locomoting .queue-pet-svg *,
  .queue-pet.is-locomoting .queue-pet__rive,
  .queue-pet.is-locomoting .queue-pet__raster,
  .queue-pet.is-locomoting .queue-pet__raster-stage,
  .queue-pet[class*="is-act-"] .queue-pet-svg,
  .queue-pet[class*="is-act-"] .queue-pet__rive,
  .queue-pet[class*="is-act-"] .queue-pet__raster,
  .queue-pet[class*="is-act-"] .queue-pet__raster-stage,
  .queue-companion.is-petted .queue-pet-svg,
  .queue-companion.is-petted .queue-pet__rive,
  .queue-companion.is-petted .queue-pet__raster,
  .queue-companion.is-petted .queue-pet__raster-stage,
  .queue-pet__glow {
    animation: none !important;
  }

  .queue-pet__raster-stage .queue-pet__raster {
    transition: none !important;
  }
  .queue-pet__flip {
    animation: none !important;
    transition: none !important;
  }

  .queue-pet-svg .qp-fx-bolts,
  .queue-pet-svg .qp-fx-slash,
  .queue-pet-svg .qp-fx-burst,
  .queue-pet-svg .qp-fx-stars,
  .queue-pet-svg .qp-fx-sparkles,
  .queue-pet-svg .qp-fx-notes,
  .queue-pet-svg .qp-fx-runes,
  .queue-pet-svg .qp-fx-impact,
  .queue-pet-svg .qp-afterimage,
  .queue-pet-svg .qp-sweat,
  .queue-pet-svg .qp-ground-dust {
    opacity: 0 !important;
    animation: none !important;
  }
}

.queue-follower--panel {
  left: auto;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1.25rem, 4vh, 2.5rem);
  transform: none;
  width: min(22.5rem, calc(100vw - 2rem));
  max-height: min(34rem, calc(100vh - 2.5rem));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-float), inset 4px 0 0 var(--color-accent);
  touch-action: pan-y;
  isolation: isolate;
}

.queue-follower--panel.is-dragging,
.queue-follower--panel.has-pos {
  left: auto;
  right: auto;
  bottom: auto;
  transform: none;
}

.queue-follower--panel.is-ready-check {
  box-shadow:
    var(--shadow-float),
    inset 4px 0 0 var(--color-accent),
    0 0 0 1px color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.queue-follower--panel.is-match-lobby {
  box-shadow:
    var(--shadow-float),
    inset 4px 0 0 var(--color-success, #3ecf8e),
    0 0 24px color-mix(in srgb, var(--color-accent) 18%, transparent);
}

/* Match flow (lobby → draft → roles → vote → champ select): shared footprint. */
.queue-follower--panel.is-match-flow {
  width: min(28rem, calc(100vw - 1.25rem));
  max-height: min(26rem, calc(100vh - 2rem));
}

.queue-follower--panel.is-match-flow .queue-follower__scroll:not(.queue-follower__scroll--settings) {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.queue-follower--panel.is-match-flow .queue-follower__match {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0.45rem 0.55rem 0.25rem;
  gap: 0.4rem;
  overflow: hidden;
}

.queue-follower--panel.is-match-flow .queue-follower__match-flare {
  display: none;
}

.queue-follower--panel.is-match-flow .queue-follower__match-hero {
  padding: 0.35rem 0.45rem;
  gap: 0.4rem;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.queue-follower--panel.is-match-flow .queue-follower__match-icon {
  width: 2rem;
  height: 2rem;
}

.queue-follower--panel.is-match-flow .queue-follower__match-title {
  font-size: var(--text-sm);
}

.queue-follower--panel.is-match-flow .queue-follower__meta {
  font-size: var(--text-xs);
}

.queue-follower--panel.is-match-flow .queue-follower__role-progress {
  flex-shrink: 0;
  gap: 0.15rem;
}

.queue-follower--panel.is-match-flow .queue-follower__role-progress .queue-meter {
  height: 0.35rem;
}

.queue-follower--panel.is-dragging {
  opacity: 0.96;
  user-select: none;
}

.queue-follower--panel.is-role-assign {
  box-shadow:
    var(--shadow-float),
    inset 4px 0 0 color-mix(in srgb, var(--color-accent) 70%, #4aa3ff 30%),
    0 0 20px color-mix(in srgb, var(--color-accent) 14%, transparent);
}

.queue-follower__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 0.75rem 0.65rem;
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
  position: relative;
  z-index: 3;
  background: var(--color-bg-elevated);
  touch-action: none;
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 8px 16px -12px rgba(0, 0, 0, 0.55);
}

.queue-follower__head:active,
.queue-follower--panel.is-dragging .queue-follower__head {
  cursor: grabbing;
}

.queue-follower__head-text {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.queue-follower__head-text strong {
  font-size: var(--text-sm);
  line-height: 1.2;
}

.queue-follower__head-meta {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-follower__head-actions {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
}

.queue-follower__icon-btn {
  border: none;
  background: color-mix(in srgb, var(--color-surface) 72%, transparent);
  color: var(--color-text-muted);
  width: 1.85rem;
  height: 1.85rem;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 140ms ease, background 140ms ease, transform 140ms ease;
}

.queue-follower__icon-btn:hover,
.queue-follower__icon-btn:focus-visible {
  color: var(--color-text);
  background: var(--color-surface);
}

.queue-follower__icon-btn.is-active {
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-accent) 22%, var(--color-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.queue-follower__settings {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0.75rem 0.85rem 1rem;
  background: transparent;
  border-bottom: none;
  flex-shrink: 0;
  position: relative;
  z-index: 3;
  animation: queue-follower-ready-in 220ms ease-out;
}

.queue-follower--panel.is-settings {
  width: min(24rem, calc(100vw - 1.5rem));
  max-height: min(36rem, calc(100vh - 2rem));
}

.queue-follower__scroll--settings {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
}

.queue-follower__settings-section {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.7rem 0.75rem 0.8rem;
  border-radius: var(--radius-md, 0.65rem);
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--color-accent) 9%, var(--color-bg)),
      color-mix(in srgb, var(--color-surface) 88%, var(--color-bg))
    );
  border: 1px solid color-mix(in srgb, var(--color-text-muted) 16%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 4%, transparent);
}

.queue-follower__settings-section-head {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text-muted) 14%, transparent);
  margin-bottom: 0.1rem;
}

.queue-follower__settings-section-title {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold, 700);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
}

.queue-follower__settings-section-lead {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--color-text-muted);
}

/* Appearance segmented control + companion gallery */
.queue-follower__appearance-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.2rem;
  padding: 0.2rem;
  border-radius: var(--radius-md, 0.55rem);
  background: color-mix(in srgb, var(--color-bg) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-text-muted) 18%, transparent);
}

.queue-follower__appearance-seg-btn {
  appearance: none;
  border: none;
  margin: 0;
  min-height: 2rem;
  padding: 0.35rem 0.5rem;
  border-radius: calc(var(--radius-md, 0.55rem) - 0.1rem);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold, 600);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.queue-follower__appearance-seg-btn:hover,
.queue-follower__appearance-seg-btn:focus-visible {
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

.queue-follower__appearance-seg-btn.is-active {
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-accent) 22%, var(--color-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.queue-follower__pet-picker-wrap {
  display: grid;
  gap: 0.55rem;
  margin: 0.15rem 0 0.35rem;
}

.queue-follower__pet-selected {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: 0.65rem;
  align-items: center;
  padding: 0.45rem 0.55rem;
  border-radius: var(--radius-md, 0.55rem);
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-accent) 24%, transparent);
}

.queue-follower__pet-selected-art {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: var(--radius-sm, 0.4rem);
  background: color-mix(in srgb, var(--color-bg) 55%, transparent);
  overflow: hidden;
}

.queue-follower__pet-selected-art .queue-pet {
  width: 3.25rem;
  height: 3.25rem;
}

.queue-follower__pet-selected-copy {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.queue-follower__pet-selected-copy strong {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.2;
}

.queue-follower__pet-selected-copy span {
  font-size: 0.68rem;
  color: var(--color-text-muted);
  line-height: 1.3;
}

.queue-follower__pet-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}

.queue-follower__pet-option {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--color-text-muted) 18%, transparent);
  background: color-mix(in srgb, var(--color-bg) 55%, var(--color-surface));
  color: var(--color-text);
  border-radius: var(--radius-md, 0.55rem);
  padding: 0.4rem 0.3rem 0.45rem;
  display: grid;
  gap: 0.3rem;
  justify-items: center;
  cursor: pointer;
  min-width: 0;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.queue-follower__pet-option:hover,
.queue-follower__pet-option:focus-visible {
  border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
}

.queue-follower__pet-option.is-selected {
  border-color: color-mix(in srgb, var(--color-accent) 70%, transparent);
  background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 28%, transparent);
}

.queue-follower__pet-option-art {
  display: grid;
  place-items: center;
  width: 100%;
  height: 3.1rem;
  overflow: hidden;
}

.queue-follower__pet-option-name {
  font-size: 0.68rem;
  font-weight: var(--weight-semibold, 600);
  line-height: 1.15;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-follower__pet-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.queue-follower__pet-pager-btn {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-sm, 0.4rem);
  border: 1px solid color-mix(in srgb, var(--color-border, #3a4a63) 80%, transparent);
  background: color-mix(in srgb, var(--color-bg, #121820) 70%, transparent);
  color: var(--color-text);
  cursor: pointer;
}

.queue-follower__pet-pager-btn:hover:not(:disabled),
.queue-follower__pet-pager-btn:focus-visible:not(:disabled) {
  border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
}

.queue-follower__pet-pager-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.queue-follower__pet-pager-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

.queue-follower__pet-pager-dot {
  appearance: none;
  border: none;
  padding: 0;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-text-muted) 45%, transparent);
  cursor: pointer;
}

.queue-follower__pet-pager-dot.is-active {
  width: 0.85rem;
  background: var(--color-accent);
}

.queue-follower__pet-pager-meta {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  min-width: 2.2rem;
  text-align: center;
}

.queue-follower__companion-settings {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.35rem;
  padding-top: 0.45rem;
  border-top: 1px solid color-mix(in srgb, var(--color-text-muted) 16%, transparent);
}

.queue-follower__companion-subhead {
  margin: 0.35rem 0 0.1rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.queue-follower__companion-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.25rem;
}

.queue-follower__settings-field input[type="range"] {
  width: 100%;
  accent-color: var(--color-accent);
}

.queue-follower--orb.has-hover-bounce .queue-follower__orb-core {
  transition: transform 160ms ease;
}

.queue-follower--orb.has-hover-bounce:hover .queue-follower__orb-core {
  transform: scale(1.05);
}

.queue-follower--orb.no-pet-glow .queue-pet__glow {
  display: none;
}

.queue-follower--orb.has-pet-glow .queue-pet__glow {
  opacity: calc(0.12 + var(--qc-glow, 0.45) * 0.35);
}

.queue-follower--orb.no-pet-shadow .queue-pet {
  filter: none;
}

.queue-follower__settings-callout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 0.55rem 0.6rem;
  border-radius: var(--radius-sm, 0.45rem);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 22%, transparent);
}

.queue-follower__settings-callout p {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text);
}

.queue-follower__settings-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}

.queue-follower__settings-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  font-size: 0.68rem;
  color: var(--color-text-muted);
}

.queue-follower__settings-field select,
.queue-follower__settings-field input[type="text"] {
  width: 100%;
  min-height: 2rem;
  padding: 0.3rem 0.45rem;
  border-radius: var(--radius-sm, 0.4rem);
  border: 1px solid color-mix(in srgb, var(--color-text-muted) 28%, transparent);
  background: color-mix(in srgb, var(--color-bg) 70%, var(--color-surface));
  color: var(--color-text);
  font-size: var(--text-xs);
  box-sizing: border-box;
}

.queue-follower__settings-field input[type="text"]::placeholder {
  color: color-mix(in srgb, var(--color-text-muted) 80%, transparent);
}

/* Desk-pet companion layer (Pocket Bird / Tiny Pasture / Baba Friend cues) */
.queue-companion {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  opacity: var(--qc-opacity, 1);
}

.queue-companion.no-glow .queue-pet__glow {
  display: none;
}

.queue-companion.has-glow .queue-pet__glow {
  opacity: calc(0.12 + var(--qc-glow, 0.45) * 0.35);
}

.queue-companion.no-shadow .queue-pet {
  filter: none;
}

.queue-companion.has-idle-bob .queue-companion__body {
  animation: qc-idle-bob 2.4s ease-in-out infinite;
}

.queue-companion.is-quiet.has-idle-bob .queue-companion__body,
.queue-companion.is-petted.has-idle-bob .queue-companion__body {
  animation: none;
}

.queue-companion__body {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.queue-companion__vibe {
  position: absolute;
  bottom: 0.15rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: 0.22rem;
  pointer-events: none;
}

.queue-companion__vibe-dot {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.queue-companion__vibe-dot.is-energy {
  background: #7dd3fc;
}

.queue-companion__vibe-dot.is-bond {
  background: #f9a8d4;
}

.queue-companion__name {
  position: absolute;
  top: 0.05rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  max-width: 90%;
  padding: 0.08rem 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-bg) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-text-muted) 22%, transparent);
  color: var(--color-text);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.queue-companion.name-bottom .queue-companion__name {
  top: auto;
  bottom: 0.1rem;
}

.queue-companion__emote {
  position: absolute;
  top: -0.15rem;
  right: 0.1rem;
  z-index: 4;
  max-width: 5.5rem;
  padding: 0.12rem 0.35rem;
  border-radius: 0.55rem 0.55rem 0.55rem 0.2rem;
  background: color-mix(in srgb, var(--color-surface) 92%, #fff 8%);
  border: 1px solid color-mix(in srgb, var(--color-text-muted) 24%, transparent);
  color: var(--color-text);
  font-size: 0.58rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  animation: qc-emote-in 220ms ease-out;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

.queue-companion.emote-pill .queue-companion__emote {
  border-radius: 999px;
}

.queue-companion.emote-minimal .queue-companion__emote {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  font-size: 0.62rem;
}

.queue-companion.is-petted .queue-companion__emote {
  color: #f472b6;
}

.queue-companion__tip {
  position: absolute;
  bottom: 0.15rem;
  left: 50%;
  z-index: 5;
  transform: translateX(-50%);
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-bg) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
  color: var(--color-text-muted);
  font-size: 0.55rem;
  white-space: nowrap;
  pointer-events: none;
  animation: qc-emote-in 200ms ease-out;
}

.queue-companion__heart {
  position: absolute;
  z-index: 5;
  color: #fb7185;
  font-size: 0.85rem;
  line-height: 1;
  pointer-events: none;
  animation: qc-heart-rise 850ms ease-out forwards;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.queue-companion.heart-star .queue-companion__heart {
  color: #fbbf24;
}

.queue-companion.heart-spark .queue-companion__heart {
  color: #93c5fd;
}

.queue-companion__spark {
  appearance: none;
  border: none;
  padding: 0;
  position: absolute;
  top: -0.4rem;
  z-index: 6;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #fff 0 22%, transparent 23%),
    radial-gradient(circle at 50% 50%, #fde68a 0 55%, #f59e0b 56% 100%);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.55);
  cursor: pointer;
  animation: qc-spark-fall 3.6s linear forwards;
}

.queue-companion__spark:hover,
.queue-companion__spark:focus-visible {
  transform: scale(1.15);
}

.queue-follower--orb.is-quiet .queue-pet__glow {
  opacity: 0.08;
  animation: none;
}

.queue-follower--orb.is-following {
  cursor: grab;
}

@keyframes qc-idle-bob {
  0%,
  100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes qc-emote-in {
  from { opacity: 0; transform: translateY(4px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes qc-heart-rise {
  0% { opacity: 0; transform: translateY(4px) scale(0.7); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-28px) scale(1.15); }
}

@keyframes qc-spark-fall {
  0% { opacity: 0; transform: translateY(-8px) scale(0.6); }
  12% { opacity: 1; }
  100% { opacity: 0.85; transform: translateY(72px) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .queue-companion__heart,
  .queue-companion__spark,
  .queue-companion__emote,
  .queue-companion.has-idle-bob .queue-companion__body,
  .queue-follower--orb.has-hover-bounce .queue-follower__orb-core {
    animation: none !important;
    transition: none !important;
  }
}

.queue-follower__settings-field select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.queue-follower__settings-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.queue-follower__settings-link {
  font-size: var(--text-xs);
  color: var(--color-accent);
  text-decoration: none;
}

.queue-follower__settings-link:hover {
  text-decoration: underline;
}

.queue-follower__settings-toggle {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  padding: 0.4rem 0.15rem;
  cursor: pointer;
}

.queue-follower__settings-toggle-copy {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.queue-follower__settings-toggle-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold, 600);
  color: var(--color-text);
  line-height: 1.25;
}

.queue-follower__settings-toggle-desc {
  font-size: 0.65rem;
  line-height: 1.35;
  color: var(--color-text-muted);
}

.queue-follower__settings-switch {
  appearance: none;
  width: 2.35rem;
  height: 1.3rem;
  margin: 0;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-text-muted) 35%, transparent);
  background: color-mix(in srgb, var(--color-text-muted) 28%, var(--color-bg));
  position: relative;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.queue-follower__settings-switch::after {
  content: "";
  position: absolute;
  top: 0.12rem;
  left: 0.12rem;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 160ms ease;
}

.queue-follower__settings-switch:checked {
  background: color-mix(in srgb, var(--color-accent) 78%, #1a6b4a);
  border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
}

.queue-follower__settings-switch:checked::after {
  transform: translateX(1.05rem);
}

.queue-follower__settings-switch:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.queue-follower__settings-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text);
  cursor: pointer;
}

.queue-follower__settings-hint {
  margin: -0.05rem 0 0.15rem;
  padding-left: 0.15rem;
  font-size: 0.65rem;
  line-height: 1.35;
  color: var(--color-text-muted);
}

.queue-follower__settings-usage-reset {
  color: var(--color-text-subtle, var(--color-text-muted));
  white-space: nowrap;
}

.queue-follower__settings-hint--flush {
  margin-left: 0;
  padding-left: 0;
}

.queue-follower__settings-hint a {
  color: var(--color-accent);
}

.queue-follower__settings-flash {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-success, #3ecf8e);
}

.queue-follower__settings-flash.is-error {
  color: var(--color-danger, #f07178);
}

.queue-follower__settings-volume {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0 0.15rem;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  cursor: default;
}

.queue-follower__settings-volume input[type="range"] {
  width: 100%;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.queue-follower__settings-volume-value {
  min-width: 1.75rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.queue-follower__settings-reset {
  justify-self: start;
  align-self: flex-start;
  margin-top: 0.15rem;
  font-size: var(--text-xs);
}

.queue-follower__snap-ghost {
  position: fixed;
  z-index: 79;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--color-accent) 55%, transparent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  pointer-events: none;
  opacity: 0.7;
  box-sizing: border-box;
}

.queue-follower__snap-ghost.is-panel {
  border-radius: var(--radius-lg);
}

.queue-follower--panel.is-hub {
  width: min(24rem, calc(100vw - 2rem));
  max-height: min(36rem, calc(100vh - 2.5rem));
}

.queue-follower__hub {
  display: grid;
  gap: 0.85rem;
  padding: 0.7rem 0.75rem 0.85rem;
  animation: queue-follower-ready-in 240ms ease-out;
}

.queue-follower__hub-section {
  display: grid;
  gap: 0.45rem;
}

.queue-follower__hub-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.queue-follower__hub-item {
  display: grid;
  gap: 0.35rem;
  padding: 0.45rem;
  border-radius: var(--radius-md);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-accent) 7%, var(--color-surface)),
      color-mix(in srgb, var(--color-surface) 88%, transparent)
    );
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text-muted) 12%, transparent);
}

.queue-follower__hub-row {
  width: 100%;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.55rem;
  align-items: center;
  padding: 0.2rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.queue-follower__hub-row:hover,
.queue-follower__hub-row:focus-visible {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

.queue-follower__hub-row.is-yours {
  box-shadow: inset 3px 0 0 var(--color-accent);
}

.queue-follower__hub-row.is-ready {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--color-accent) 70%, #fff 10%);
}

.queue-follower__hub-row-main {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.queue-follower__hub-row-main strong {
  font-size: var(--text-sm);
  line-height: 1.2;
}

.queue-follower__hub-row-meta {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-follower__hub-row-side {
  display: grid;
  justify-items: end;
  gap: 0.25rem;
  min-width: 3.5rem;
}

.queue-follower__hub-count {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
}

.queue-follower__hub-row-side .queue-meter {
  width: 3.4rem;
  height: 0.28rem;
}

.queue-follower__hub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0 0.15rem 0.1rem;
}

.queue-follower__hub-actions .btn {
  min-height: 1.7rem;
  padding: 0.2rem 0.55rem;
  font-size: var(--text-xs);
}

.queue-follower__hub-empty {
  margin: 0;
  padding: 0.35rem 0.15rem;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.queue-follower__hub-guest {
  display: grid;
  gap: 0.55rem;
  padding: 0.7rem 0.75rem;
  border-radius: var(--radius-md);
  background:
    radial-gradient(
      circle at 12% 0%,
      color-mix(in srgb, var(--color-accent) 18%, transparent),
      transparent 55%
    ),
    color-mix(in srgb, var(--color-surface) 90%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 22%, transparent);
}

.queue-follower__hub-guest p {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}

.queue-follower__collapse {
  border: none;
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  color: var(--color-text-muted);
  width: 1.85rem;
  height: 1.85rem;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.queue-follower__collapse:hover {
  color: var(--color-text);
  background: var(--color-surface);
}

.queue-follower__body,
.queue-follower__scroll {
  display: grid;
  gap: 0;
  padding: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--color-bg-elevated);
  position: relative;
  z-index: 1;
}

.queue-follower__foot {
  flex-shrink: 0;
  position: relative;
  z-index: 3;
  background: var(--color-bg-elevated);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 -10px 18px -14px rgba(0, 0, 0, 0.6);
  padding: 0.65rem 0.85rem 0.85rem;
}

.queue-follower__foot .queue-follower__actions {
  padding: 0;
}

.queue-follower__foot .queue-follower__actions:empty {
  display: none;
}

.queue-follower__foot:has(.queue-follower__actions:empty) {
  display: none;
}

.queue-follower__card-header {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-4) var(--space-3);
}

.queue-follower__status {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.queue-follower__card-header .queue-count {
  margin-top: 0.15rem;
}

.queue-follower__card-header .queue-meter {
  margin-top: 0.45rem;
}

.queue-follower__ready-hero {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 var(--space-4);
  padding: 0.85rem 0.9rem;
  border-radius: var(--radius-md);
  background:
    radial-gradient(
      circle at 12% 20%,
      color-mix(in srgb, var(--color-accent) 28%, transparent),
      transparent 55%
    ),
    color-mix(in srgb, var(--color-surface) 88%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 22%, transparent);
  animation: queue-follower-ready-in 280ms ease-out;
}

.queue-follower__ready-ring {
  position: relative;
  width: 4.25rem;
  height: 4.25rem;
  flex-shrink: 0;
}

.queue-follower__ready-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.queue-follower__ready-track {
  fill: none;
  stroke: color-mix(in srgb, var(--color-surface) 70%, #000 10%);
  stroke-width: 5;
}

.queue-follower__ready-progress {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke-dashoffset 240ms ease;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-accent) 45%, transparent));
}

.queue-follower__ready-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--color-accent);
  animation: queue-follower-icon-pop 1.2s ease-in-out infinite;
}

.queue-follower__ready-copy {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.queue-follower__ready-label {
  margin: 0;
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.queue-follower__ready-timer {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
}

.queue-follower__ready-count {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.queue-follower__section {
  padding: var(--space-3) var(--space-4) var(--space-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.queue-follower__section-title {
  margin: 0 0 0.55rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.queue-follower__section-title span {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  font-size: 0.85em;
}

.queue-follower__slots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  max-height: 11rem;
  overflow: auto;
}

.queue-follower__player-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
  max-height: none;
  overflow: visible;
}

.queue-follower__player {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
}

.queue-follower__player.is-empty {
  opacity: 0.55;
  grid-template-columns: auto 1fr;
}

.queue-follower__player.is-ready {
  background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface));
  box-shadow: inset 2px 0 0 var(--color-accent);
}

.queue-follower__player.is-npc {
  outline: 1px dashed color-mix(in srgb, var(--color-text-muted) 35%, transparent);
}

.queue-follower__player-index {
  width: 1.1rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  opacity: 0.7;
}

.queue-follower__player-avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-surface);
}

.queue-follower__player-avatar.is-fallback {
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
}

.queue-follower__player-main {
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}

.queue-follower__player-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}

.queue-follower__player-name {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 9rem;
}

a.queue-follower__player-name:hover {
  color: var(--color-accent);
}

.queue-follower__npc-tag {
  font-size: 0.62rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border: 1px solid color-mix(in srgb, var(--color-text-muted) 40%, transparent);
  border-radius: 999px;
  padding: 0.05rem 0.35rem;
}

.queue-follower__mini-ready {
  font-size: 0.65rem;
  padding: 0.05rem 0.35rem;
}

.queue-follower__player-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  overflow: hidden;
}

.queue-follower__player-rank {
  display: grid;
  justify-items: center;
  gap: 0.05rem;
  min-width: 2.4rem;
}

.queue-follower__rank-label {
  font-size: 0.58rem;
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.1;
  max-width: 3.6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-follower__player-rank .lb-solo img {
  width: 22px;
  height: 22px;
}

.queue-follower__slot {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  color: var(--color-text-muted);
}

.queue-follower__slot.is-filled {
  color: var(--color-text);
}

.queue-follower__slot.is-ready {
  background: color-mix(in srgb, var(--color-accent) 16%, var(--color-surface));
  box-shadow: inset 2px 0 0 var(--color-accent);
}

.queue-follower__slot-index {
  width: 1.15rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  opacity: 0.75;
}

.queue-follower__slot-label {
  font-size: var(--text-sm);
}

.queue-follower__slot-check {
  color: var(--color-accent);
  display: grid;
  place-items: center;
}

.queue-follower__waiting,
.queue-follower__bench {
  margin-top: 0.65rem;
}

.queue-follower__bench .queue-follower__section-title {
  margin-bottom: 0.4rem;
}

.queue-follower__match {
  position: relative;
  display: grid;
  gap: 0.75rem;
  padding: var(--space-4);
  overflow: hidden;
  isolation: isolate;
}

.queue-follower__match-flare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.queue-follower__match-flare span {
  position: absolute;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0;
  animation: queue-follower-spark 1.8s ease-in-out infinite;
}

.queue-follower__match-flare span:nth-child(1) {
  left: 12%;
  top: 18%;
  animation-delay: 0s;
}
.queue-follower__match-flare span:nth-child(2) {
  left: 78%;
  top: 22%;
  background: var(--color-success, #3ecf8e);
  animation-delay: 0.25s;
}
.queue-follower__match-flare span:nth-child(3) {
  left: 22%;
  top: 70%;
  animation-delay: 0.45s;
}
.queue-follower__match-flare span:nth-child(4) {
  left: 88%;
  top: 62%;
  background: #f0c14b;
  animation-delay: 0.6s;
}
.queue-follower__match-flare span:nth-child(5) {
  left: 48%;
  top: 12%;
  animation-delay: 0.8s;
}
.queue-follower__match-flare span:nth-child(6) {
  left: 58%;
  top: 78%;
  background: var(--color-success, #3ecf8e);
  animation-delay: 1s;
}

.queue-follower__match-hero {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-md);
  background:
    radial-gradient(
      circle at 15% 20%,
      color-mix(in srgb, var(--color-accent) 32%, transparent),
      transparent 55%
    ),
    color-mix(in srgb, var(--color-surface) 90%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 28%, transparent);
  animation: queue-follower-ready-in 320ms ease-out;
}

.queue-follower__role-progress {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.35rem;
}

.queue-follower__role-progress-label {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.queue-follower__teams.is-lanes .queue-follower__player.is-lane.has-lane {
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
  box-shadow: inset 2px 0 0 var(--color-accent);
}

.queue-follower__teams.is-lanes .queue-follower__player.is-lane.needs-lane {
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--color-text-muted) 45%, transparent);
}

.queue-follower__lane-badge {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface));
  flex-shrink: 0;
  overflow: hidden;
}

.queue-follower__lane-badge img {
  width: 1.15rem;
  height: 1.15rem;
  object-fit: contain;
}

.queue-follower__lane-badge.is-empty {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: var(--weight-bold);
  background: color-mix(in srgb, var(--color-surface) 90%, transparent);
}

.queue-follower__lane-name {
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
}

.queue-follower__player.is-lane {
  grid-template-columns: auto auto 1fr auto;
}

.queue-follower__match-icon {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
  animation: queue-follower-icon-pop 1.3s ease-in-out infinite;
  flex-shrink: 0;
}

.queue-follower__match-title {
  margin: 0;
  font-weight: var(--weight-bold);
}

.queue-follower__teams {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.75rem;
}

/* Blue | Red columns — same footprint language as champ-select board. */
.queue-follower__teams.is-split {
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.queue-follower__teams.is-split .queue-follower__team {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.2rem;
  min-width: 0;
  min-height: 0;
  padding: 0.28rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-surface) 72%, transparent);
  overflow: hidden;
}

.queue-follower__teams.is-split .queue-follower__section-title {
  margin: 0;
  padding: 0.05rem 0 0.02rem;
  width: 100%;
  justify-content: space-between;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}

.queue-follower__teams.is-split .queue-follower__team.is-blue .queue-follower__section-title {
  color: #4aa3ff;
}

.queue-follower__teams.is-split .queue-follower__team.is-red .queue-follower__section-title {
  color: #ff5a5a;
}

.queue-follower__teams.is-split .queue-follower__section-title span {
  font-size: 0.62rem;
  letter-spacing: 0;
  text-transform: none;
}

.queue-follower__teams.is-split .queue-follower__player-list {
  display: grid;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: 0.14rem;
  min-height: 0;
  overflow: hidden;
}

.queue-follower__teams.is-split .queue-follower__player {
  padding: 0.2rem 0.28rem;
  gap: 0.28rem;
  min-height: 0;
  border-radius: 0.28rem;
}

.queue-follower__teams.is-split .queue-follower__player.is-empty {
  grid-template-columns: auto 1fr;
}

.queue-follower__teams.is-split .queue-follower__player-index {
  width: 0.9rem;
  font-size: 0.62rem;
}

.queue-follower__teams.is-split .queue-follower__player-avatar {
  width: 1.35rem;
  height: 1.35rem;
}

.queue-follower__teams.is-split .queue-follower__player-avatar.is-fallback {
  font-size: 0.62rem;
}

.queue-follower__teams.is-split .queue-follower__player-name {
  font-size: 0.78rem;
  max-width: none;
}

.queue-follower__teams.is-split .queue-follower__player-meta {
  font-size: 0.62rem;
  gap: 0.2rem;
}

.queue-follower__teams.is-split:not(.is-lanes) .queue-follower__player-meta {
  display: none;
}

.queue-follower__teams.is-split .queue-follower__npc-tag {
  font-size: 0.52rem;
  padding: 0.02rem 0.22rem;
}

.queue-follower__teams.is-split .queue-follower__player-rank {
  min-width: 1.35rem;
}

.queue-follower__teams.is-split .queue-follower__player-rank .lb-solo img {
  width: 16px;
  height: 16px;
}

.queue-follower__teams.is-split .rank-pair {
  gap: 0.08rem;
  font-size: 0.54rem;
  justify-content: center;
}

.queue-follower__teams.is-split .rank-pair__part {
  gap: 0.04rem;
}

.queue-follower__teams.is-split .rank-pair__crest,
.queue-follower__teams.is-split .rank-pair__empty {
  width: 0.9rem;
  height: 0.9rem;
}

.queue-follower__teams.is-split .rank-pair__label {
  font-size: 0.46rem;
}

.queue-follower__teams.is-split .rank-pair__tier {
  font-size: 0.56rem;
}

.queue-follower__teams.is-split .rank-pair__lp {
  font-size: 0.46rem;
}

.queue-follower__teams.is-split .rank-pair.is-dense {
  font-size: 0.56rem;
  gap: 0.06rem;
}

.queue-follower__teams.is-split .rank-pair.is-dense .rank-pair__crest,
.queue-follower__teams.is-split .rank-pair.is-dense .rank-pair__empty {
  width: 0.78rem;
  height: 0.78rem;
}

.queue-follower__teams.is-split .rank-pair.is-dense .rank-pair__label {
  font-size: 0.5rem;
}

.queue-follower__teams.is-split .queue-follower__lane-badge {
  width: 1.35rem;
  height: 1.35rem;
}

.queue-follower__teams.is-split .queue-follower__lane-badge img {
  width: 0.95rem;
  height: 0.95rem;
}

.queue-follower__teams.is-split .queue-follower__lane-badge.is-empty {
  font-size: 0.65rem;
}

.queue-follower__teams.is-split .queue-follower__player.is-lane {
  grid-template-columns: auto 1fr auto;
}

.queue-follower__teams.is-split .queue-follower__player.is-lane.is-empty {
  grid-template-columns: auto 1fr;
}

.queue-follower__cs-board {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.queue-follower__cs-side {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 0.22rem;
  min-width: 0;
  min-height: 0;
  padding: 0.28rem 0.28rem 0.22rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-surface) 72%, transparent);
  overflow-x: hidden;
  overflow-y: hidden;
}

.queue-follower__cs-side.is-blue {
  box-shadow: inset 3px 0 0 color-mix(in srgb, #4aa3ff 85%, transparent);
}

.queue-follower__cs-side.is-red {
  box-shadow: inset 3px 0 0 color-mix(in srgb, #ff5a5a 85%, transparent);
}

.queue-follower__cs-side-title {
  margin: 0;
  padding: 0.05rem 0 0.02rem;
  font-size: 0.65rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  line-height: 1.2;
  overflow: visible;
}

.queue-follower__cs-bans {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.18rem;
  flex-shrink: 0;
}

.queue-follower__cs-ban {
  aspect-ratio: 1;
  border-radius: 0.25rem;
  background: color-mix(in srgb, #000 35%, var(--color-surface));
  display: grid;
  place-items: center;
  overflow: hidden;
  opacity: 0.5;
}

.queue-follower__cs-ban.is-filled {
  opacity: 1;
  filter: grayscale(0.4) brightness(0.8);
}

.queue-follower__cs-ban.is-none {
  opacity: 0.7;
  color: var(--color-text-muted);
  font-size: 0.65rem;
}

.queue-follower__cs-ban.is-active {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--color-accent);
  filter: none;
}

.queue-follower__cs-ban img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.queue-follower__cs-ban-empty {
  width: 40%;
  height: 2px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--color-text-muted) 50%, transparent);
}

.queue-follower__cs-picks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: 0.16rem;
  min-height: 0;
  overflow: hidden;
}

.queue-follower__cs-pick {
  position: relative;
  display: grid;
  min-height: 0;
  border-radius: 0.3rem;
  overflow: hidden;
  background: color-mix(in srgb, #000 30%, var(--color-surface));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.queue-follower__cs-pick.is-active {
  box-shadow: inset 0 0 0 2px var(--color-accent);
}

.queue-follower__cs-pick-num {
  position: absolute;
  top: 50%;
  left: 0.2rem;
  transform: translateY(-50%);
  z-index: 1;
  width: 1rem;
  height: 1rem;
  border-radius: 0.2rem;
  display: grid;
  place-items: center;
  font-size: 0.62rem;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: color-mix(in srgb, #000 65%, transparent);
  line-height: 1;
}

.queue-follower__cs-pick-art {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.queue-follower__cs-pick-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  display: block;
}

.queue-follower__cs-pick.is-veiled-pick .queue-follower__cs-pick-art img {
  filter: grayscale(1) brightness(0.62) contrast(1.08);
}

.queue-follower__cs-pick.is-hidden-pick .queue-follower__cs-pick-art {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, #121216 90%, transparent);
  color: var(--color-text-muted);
  font-weight: 700;
}

.queue-follower__cs-pick:not(.is-filled) .queue-follower__cs-pick-art {
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 4px,
      color-mix(in srgb, var(--color-text-muted) 12%, transparent) 4px,
      color-mix(in srgb, var(--color-text-muted) 12%, transparent) 5px
    );
}

.queue-follower__team.is-blue {
  box-shadow: inset 3px 0 0 color-mix(in srgb, #4aa3ff 85%, transparent);
}

.queue-follower__team.is-blue .queue-follower__section-title {
  color: #4aa3ff;
}

.queue-follower__team.is-red {
  box-shadow: inset 3px 0 0 color-mix(in srgb, #ff5a5a 85%, transparent);
}

.queue-follower__team.is-red .queue-follower__section-title {
  color: #ff5a5a;
}

.queue-follower__match-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  animation: queue-follower-ready-btn 1.4s ease-in-out infinite;
}

.queue-follower__meta {
  margin: 0;
  color: var(--color-text-muted);
}

.queue-follower__error {
  margin: 0 var(--space-4) var(--space-2);
  color: var(--color-danger, #c44);
}

.queue-follower__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0;
}

.queue-follower__ready-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  animation: queue-follower-ready-btn 1.4s ease-in-out infinite;
}

.queue-follower__ready-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

@keyframes queue-follower-orbit {
  0% {
    transform: scale(0.92);
    opacity: 0.7;
  }
  70% {
    transform: scale(1.28);
    opacity: 0;
  }
  100% {
    transform: scale(1.28);
    opacity: 0;
  }
}

@keyframes queue-follower-ready-glow {
  0%,
  100% {
    box-shadow:
      var(--shadow-float),
      0 0 0 0 color-mix(in srgb, var(--color-accent) 0%, transparent);
  }
  50% {
    box-shadow:
      var(--shadow-float),
      0 0 0 6px color-mix(in srgb, var(--color-accent) 22%, transparent);
  }
}

@keyframes queue-follower-ready-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes queue-follower-icon-pop {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

@keyframes queue-follower-ready-btn {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 0%, transparent);
  }
  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent) 18%, transparent);
  }
}

@keyframes queue-follower-burst-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes queue-follower-spark {
  0%,
  100% {
    opacity: 0;
    transform: translateY(0) scale(0.6);
  }
  35% {
    opacity: 1;
    transform: translateY(-10px) scale(1.15);
  }
  70% {
    opacity: 0.2;
    transform: translateY(-18px) scale(0.85);
  }
}

.queue-count {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
}

.queue-meter {
  height: 0.4rem;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  overflow: hidden;
}

.queue-meter span {
  display: block;
  height: 100%;
  background: var(--color-accent);
}

.pill {
  display: inline-flex;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border: none;
  box-shadow: var(--shadow-float-xs);
}

.pill-live {
  background: var(--color-accent-dim);
  color: var(--color-accent);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.game-chip {
  display: grid;
  gap: 0.15rem;
  min-width: 8rem;
  padding: var(--space-3) var(--space-4);
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-float);
}

.game-chip:hover {
  background: var(--color-surface-hover);
}

.member-grid,
.achieve-grid {
  display: grid;
  gap: var(--space-4);
}

.player-list {
  --player-row-columns:
    2.5rem
    2.75rem
    minmax(0, 1.55fr)
    5.25rem
    minmax(9.5rem, 0.95fr)
    minmax(0, 0.75fr);
  list-style: none;
  margin: 0;
  padding: 0.35rem;
  display: grid;
  gap: 0.2rem;
  background: var(--color-bg-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float-sm);
}

.player-row {
  min-width: 0;
  border-radius: var(--radius-md);
}

.player-row__link {
  display: grid;
  grid-template-columns: var(--player-row-columns);
  gap: var(--space-3);
  align-items: center;
  padding: 0.7rem 0.85rem;
  color: inherit;
  text-decoration: none;
  min-width: 0;
  border-radius: inherit;
  transition: background 0.15s var(--ease-out-fn, ease);
}

.player-list__header {
  display: grid;
  grid-template-columns: var(--player-row-columns);
  gap: var(--space-3);
  align-items: end;
  padding: 0.35rem 0.85rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-text-subtle);
  font-size: 0.66rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.07em;
  line-height: 1.15;
  text-transform: uppercase;
  opacity: 1 !important;
  transform: none !important;
}

.player-list__header-games,
.player-list__header-rank,
.player-list__header-roles {
  text-align: center;
}

.player-list__header-roles {
  text-align: right;
}

.player-row:not(.has-cosmetic-banner) .player-row__link:hover {
  background: rgba(255, 255, 255, 0.035);
}

.player-row.has-cosmetic-banner .player-row__link {
  background: transparent;
}

.player-row__pos {
  color: var(--color-text-subtle);
  font-size: 0.78rem;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.player-row__avatar {
  display: grid;
  place-items: center;
}

.player-row__identity {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.player-row__name {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  font-size: 1rem;
  font-weight: var(--weight-semibold);
  line-height: 1.2;
}

.player-row__lvl {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.player-row__meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  font-size: 0.82rem;
}

.player-row__meta > .subtle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.player-role-icons {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  flex: 0 0 auto;
}

.player-role-icons__sep {
  color: var(--color-text-subtle);
  font-size: 0.72rem;
  font-weight: var(--weight-semibold);
  line-height: 1;
  opacity: 0.7;
}

.player-role-icons .tournament-role-badge {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.member-card__footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.player-row__games {
  display: grid;
  justify-items: center;
  gap: 0.05rem;
  min-width: 0;
  padding: 0.35rem 0.45rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.035);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  text-align: center;
}

.player-row__games strong {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.player-row__games span {
  font-size: 0.62rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.player-row__rank {
  justify-self: stretch;
  min-width: 0;
}

.player-row__rank .tournament-rank-badge {
  width: 100%;
  gap: 0.55rem;
}

.player-row__rank .tournament-rank-badge img {
  width: 40px;
  height: 40px;
}

.player-row__rank .tournament-rank-badge__text strong {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.player-row__rank .tournament-rank-badge__div {
  font-size: 0.78rem;
}

.player-row__rank .tournament-rank-badge__lp {
  font-size: 0.72rem;
}

.player-row__rank .tournament-rank-badge__sparkle {
  width: 0.42rem;
  height: 0.42rem;
  top: -0.08rem;
  right: -0.08rem;
}

.player-row__roles {
  justify-self: end;
  min-width: 0;
}

.player-row__roles .discord-roles {
  justify-content: flex-end;
}

.player-row__identity .profile-hero__featured {
  flex-wrap: wrap;
  gap: 0.15rem;
  margin: 0.1rem 0 0;
  max-width: 100%;
}

.player-row__identity .profile-hero__featured .irg-badge {
  width: 18px;
  height: 18px;
}

#members-app .player-list {
  margin-top: 0;
  overflow: visible;
}

@media (max-width: 1100px) {
  .player-list {
    --player-row-columns:
      2.25rem
      2.75rem
      minmax(0, 1.4fr)
      4.75rem
      minmax(8.5rem, 1fr);
  }

  .player-row__roles,
  .player-list__header-roles {
    display: none;
  }
}

@media (max-width: 900px) {
  .player-list__header {
    display: none;
  }

  .player-row__link {
    grid-template-columns:
      2.1rem
      2.5rem
      minmax(0, 1fr)
      auto;
    grid-template-areas:
      "pos avatar identity rank"
      "pos avatar games rank";
    row-gap: 0.25rem;
    padding: 0.65rem 0.7rem;
  }

  .player-row__pos {
    grid-area: pos;
  }

  .player-row__avatar {
    grid-area: avatar;
  }

  .player-row__identity {
    grid-area: identity;
  }

  .player-row__games {
    grid-area: games;
    justify-self: start;
    padding: 0.2rem 0.4rem;
  }

  .player-row__games strong {
    font-size: 0.95rem;
  }

  .player-row__rank {
    grid-area: rank;
    justify-self: end;
  }

  .player-row__rank .tournament-rank-badge img {
    width: 34px;
    height: 34px;
  }

  .player-row__rank .tournament-rank-badge__text strong {
    font-size: 0.85rem;
  }
}

.member-card,
.achieve-card,
.login-panel,
.profile,
.team-col {
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  padding: var(--space-5);
  box-shadow: var(--shadow-float);
  transition: box-shadow var(--ease);
}

.member-card,
.profile {
  position: relative;
}
.member-card {
  overflow: visible;
}
.member-card.has-player-bg,
.member-card.has-cosmetic-banner {
  /* Clip splash/banner + ::before/::after to the card radius (no square corner bleed). */
  overflow: hidden;
  background-color: #05070c;
  /* Kill light theme rim; dark inset ring reads clean on splash art. */
  border-color: rgba(0, 0, 0, 0.65) !important;
  box-shadow:
    var(--shadow-float),
    inset 0 0 0 1px rgba(0, 0, 0, 0.55);
}
.member-card.has-player-bg:hover,
.member-card.has-cosmetic-banner:hover {
  border-color: rgba(47, 107, 255, 0.28) !important;
  box-shadow:
    var(--shadow-float-hover),
    inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.profile {
  overflow: hidden;
}
.profile.has-cosmetic-banner:has(.profile-hero.irg-border),
.profile.has-cosmetic-banner:has(.profile-hero.irg-border--image) {
  overflow: visible !important;
}

.member-card.has-player-bg,
.profile.has-player-bg {
  min-height: 11rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
  background-color: var(--color-bg);
  isolation: isolate;
}

/* Don't let card-level text-shadow wash out shop name colors/effects. */
.member-card.has-player-bg .irg-name--cosmetic,
.profile.has-player-bg .irg-name--cosmetic {
  text-shadow: none;
}

.member-card.has-player-bg::after,
.profile.has-player-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: var(--player-bg);
  background-size: cover;
  background-position: var(--player-bg-pos, center right);
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}

.member-card.has-player-bg::before,
.profile.has-player-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* Match leaderboard banner scrim — keep splash readable, never wash out text. */
  background: linear-gradient(
    90deg,
    rgba(5, 7, 12, 0.88) 0%,
    rgba(5, 7, 12, 0.72) 42%,
    rgba(5, 7, 12, 0.78) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.member-card.has-player-bg > *,
.profile.has-player-bg > * {
  position: relative;
  z-index: 2;
}

.member-card:hover {
  box-shadow: var(--shadow-float-hover);
}

.achieve-card:hover {
  box-shadow: var(--shadow-float-hover);
}

.member-card__rank {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.roster-list {
  list-style: none;
  margin: 0;
  padding: 0.25rem;
  display: grid;
  gap: 0;
}

.roster-row {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) minmax(0, auto);
  gap: var(--space-3);
  align-items: center;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  font-size: var(--text-sm);
  min-width: 0;
  transition: background 0.15s var(--ease-out-fn, ease);
}

.roster-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

.roster-row.has-cosmetic-banner,
.roster-panel.has-cosmetic-banner,
.player-row.has-cosmetic-banner {
  /* Same dark scrim as leaderboard rows — override inline banner url. */
  background-image:
    linear-gradient(
      90deg,
      rgba(5, 7, 12, 0.88) 0%,
      rgba(5, 7, 12, 0.78) 42%,
      rgba(5, 7, 12, 0.82) 100%
    ),
    var(--irg-banner-image) !important;
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  border-radius: var(--radius-md);
  padding-inline: 0.75rem;
  /* Badge tooltips are positioned above the row; do not clip them to the
     banner card's bounds. The background still follows the rounded card. */
  overflow: visible;
  color: #f4f4f5;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 10px rgba(0, 0, 0, 0.85);
}

.roster-row.has-cosmetic-banner:hover,
.roster-panel.has-cosmetic-banner:hover,
.player-row.has-cosmetic-banner:hover {
  background-image:
    linear-gradient(
      90deg,
      rgba(5, 7, 12, 0.84) 0%,
      rgba(5, 7, 12, 0.72) 42%,
      rgba(5, 7, 12, 0.78) 100%
    ),
    var(--irg-banner-image) !important;
}

.roster-row.has-cosmetic-banner .subtle,
.roster-panel.has-cosmetic-banner .subtle,
.roster-row.has-cosmetic-banner .muted,
.roster-panel.has-cosmetic-banner .muted,
.player-row.has-cosmetic-banner .subtle,
.player-row.has-cosmetic-banner .muted {
  color: #e4e4e7;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 10px rgba(0, 0, 0, 0.85),
    0 0 2px rgba(0, 0, 0, 1);
}

.roster-row.has-cosmetic-banner .roster-row__name strong,
.roster-panel.has-cosmetic-banner .roster-row__name strong,
.player-row.has-cosmetic-banner .player-row__name {
  color: #fafafa;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 0 8px rgba(0, 0, 0, 0.75);
}

/* Keep shop name colors/effects readable on banners (match leaderboards). */
.roster-row.has-cosmetic-banner .irg-name--cosmetic,
.roster-panel.has-cosmetic-banner .irg-name--cosmetic,
.player-row.has-cosmetic-banner .irg-name--cosmetic,
.member-card.has-cosmetic-banner .irg-name--cosmetic,
.member-card.has-player-bg .irg-name--cosmetic,
.lb-podium__card.has-cosmetic-banner .irg-name--cosmetic {
  text-shadow: none !important;
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.92))
    drop-shadow(0 0 10px rgba(0, 0, 0, 0.55));
}

.roster-row.has-cosmetic-banner .irg-name:not(.irg-name--cosmetic),
.roster-panel.has-cosmetic-banner .irg-name:not(.irg-name--cosmetic),
.player-row.has-cosmetic-banner .irg-name:not(.irg-name--cosmetic),
.member-card.has-cosmetic-banner .irg-name:not(.irg-name--cosmetic),
.member-card.has-player-bg .irg-name:not(.irg-name--cosmetic),
.lb-podium__card.has-cosmetic-banner .irg-name:not(.irg-name--cosmetic) {
  color: #fafafa !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.98),
    0 0 12px rgba(0, 0, 0, 0.9),
    0 0 3px rgba(0, 0, 0, 1);
}

.roster-row.has-cosmetic-banner .irg-title,
.roster-panel.has-cosmetic-banner .irg-title,
.player-row.has-cosmetic-banner .irg-title,
.member-card.has-cosmetic-banner .irg-title,
.member-card.has-player-bg .irg-title {
  color: #fde68a;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.98),
    0 0 10px rgba(0, 0, 0, 0.9);
}

.roster-row__details {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.discord-roles {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
  max-width: 100%;
}

.discord-role {
  margin: 0;
  padding: 0.15rem 0.45rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  font-size: var(--text-xs);
  line-height: 1.2;
  white-space: nowrap;
}

.member-card__footer {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.75rem;
}

.member-card .discord-roles {
  justify-content: flex-start;
}

.roster-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  object-fit: cover;
  background: var(--color-surface);
}

.roster-row__name {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.roster-row strong {
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-check {
  display: inline-flex;
  color: var(--color-accent);
  flex-shrink: 0;
}

.roster-row__staff-badges {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  flex: 0 0 auto;
}

.roster-row__staff-badges .irg-badge,
.roster-row__staff-badges .irg-badge--empty {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.roster-level {
  flex-shrink: 0;
  padding: 0.05rem 0.4rem;
  border: none;
  border-radius: var(--radius-full);
  background: var(--lvl-tint-bg, var(--color-bg));
  color: var(--lvl-tint-color, #86efac);
  font-size: var(--text-xs);
  font-style: italic;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  white-space: nowrap;
  box-shadow: var(--shadow-float-xs), inset 0 0 0 1px var(--lvl-tint-ring, rgba(134, 239, 172, 0.35));
}

.roster-panels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--space-4);
}

.roster-panel {
  display: grid;
  justify-items: start;
  gap: 0.4rem;
  padding: var(--space-4);
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
}

.roster-avatar--lg {
  width: 4rem;
  height: 4rem;
}

.lb-podium {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: var(--space-3);
  align-items: end;
  margin: 0 0 var(--space-6);
}

.lb-podium__card {
  position: relative;
  container-type: inline-size;
  text-align: center;
  padding: var(--space-5) var(--space-3);
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
}

.lb-podium__card .irg-frame {
  margin: 0 auto var(--space-3);
}

/* Badges overlay the card — they must not grow the podium */
.lb-podium__badges {
  position: absolute;
  top: 0.45rem;
  left: 0.45rem;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.2rem;
  margin: 0;
  z-index: 2;
  max-width: calc(100% - 0.75rem);
  pointer-events: none;
}

.lb-podium__badges .irg-badge,
.lb-podium__badges .irg-badge--sm,
.lb-podium__badges .irg-badge--md {
  width: clamp(0.85rem, 11cqi, 1.35rem);
  height: clamp(0.85rem, 11cqi, 1.35rem);
  flex: 0 0 auto;
  pointer-events: auto;
}

.lb-podium__card--bronze,
.lb-podium__card--silver {
  min-height: 8.75rem;
}

/* Pin medals to podium columns so a missing #1 leaves the center open. */
.lb-podium__card--silver {
  grid-column: 1;
}

.lb-podium__card--gold {
  grid-column: 2;
  min-height: 10rem;
  border-color: rgba(245, 197, 66, 0.45);
}

.lb-podium__card--bronze {
  grid-column: 3;
}

.stat-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
  .lb-podium,
  .roster-panels {
    grid-template-columns: 1fr;
  }

  .lb-podium__card--silver,
  .lb-podium__card--gold,
  .lb-podium__card--bronze {
    grid-column: auto;
  }

  .roster-row {
    grid-template-columns: 1.75rem minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 0.2rem var(--space-2);
    padding: 0.4rem 0.5rem;
    font-size: 0.8125rem;
    align-items: start;
  }

  .roster-row > :first-child {
    grid-row: 1 / span 2;
    align-self: center;
  }

  .roster-row__details {
    grid-column: 2;
    min-width: 0;
  }

  .roster-row .discord-roles {
    grid-column: 2;
    justify-content: flex-start;
  }

  .roster-row__name {
    flex-wrap: wrap;
  }

  .roster-row .subtle,
  .roster-row .roster-meta {
    display: block;
    font-size: 0.75rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
  }

  .roster-row strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
  }

  .roster-row strong a,
  .roster-row strong > span {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .roster-row strong a .irg-name,
  .roster-row__name .irg-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
    font-size: 0.875rem;
  }

  .roster-row__name .irg-title {
    font-size: 0.65rem;
    letter-spacing: 0.05em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

  .roster-row__details .profile-hero__featured {
    flex-wrap: wrap;
    gap: 0.15rem;
    margin: 0;
    max-width: 100%;
  }

  .roster-row__details .profile-hero__featured .irg-badge {
    width: 18px;
    height: 18px;
  }

  .roster-list,
  .roster-panels {
    /* Let badge hover panels escape the list; the page shell still clips
       accidental viewport-wide overflow. */
    overflow: visible;
  }

  .roster-panel {
    padding: var(--space-3);
    font-size: 0.8125rem;
  }

  .roster-panel .discord-roles {
    justify-content: flex-start;
    width: 100%;
  }

  .discord-role {
    font-size: 0.6875rem;
    padding: 0.1rem 0.35rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .roster-level {
    font-size: 0.6875rem;
    padding: 0.05rem 0.3rem;
  }
}

.achieve-card.is-locked {
  opacity: 0.45;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.stat-row dt {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stat-row dd {
  margin: 0.2rem 0 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
}

.team-grid {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.team-col--blue {
  box-shadow: var(--shadow-float), inset 3px 0 0 var(--color-blue-side);
}

.team-col--red {
  box-shadow: var(--shadow-float), inset 3px 0 0 var(--color-red-side);
}

.login-panel {
  max-width: 36rem;
  margin-inline: auto;
  display: grid;
  gap: var(--space-4);
}

.section--account-form {
  padding-bottom: var(--space-16);
}

main.section.section--account-form,
#content.section.section--account-form {
  padding-top: calc(var(--header-offset) + var(--space-10));
}

.account-form-wrap {
  width: min(100%, 28rem);
  margin-inline: auto;
}

.account-form-card {
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  padding: var(--space-8) var(--space-6);
  display: grid;
  gap: var(--space-6);
  box-shadow: var(--shadow-float);
}

.account-form-card__hero {
  display: grid;
  gap: var(--space-3);
  text-align: center;
}

.account-form-card__avatar {
  width: 4rem;
  height: 4rem;
  margin-inline: auto;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3b82f6 0%, #7c3aed 100%);
  color: #fff;
  overflow: hidden;
}

.account-form-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-form-card__title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.account-form-card__subtitle {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.account-form {
  display: grid;
  gap: var(--space-5);
}

.account-form__row {
  display: grid;
  gap: var(--space-4);
}

.account-form__field {
  display: grid;
  gap: var(--space-2);
}

.account-form__field label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.account-form__field input,
.account-form__field select {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.55rem 0.75rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
}

.account-form__field input:disabled,
.account-form__field select:disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.92;
}

.account-form__field select {
  appearance: none;
  padding-right: 2rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 1rem) calc(50% - 0.15rem),
    calc(100% - 0.65rem) calc(50% - 0.15rem);
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
}

.account-form__hint {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  line-height: var(--leading-snug);
}

.account-form__hint a {
  color: var(--color-accent);
}

.account-form__hint a:hover {
  text-decoration: underline;
}

.account-form__flash {
  margin: 0;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-md);
  border: none;
  background: rgba(182, 255, 42, 0.1);
  font-size: var(--text-sm);
  text-align: center;
  box-shadow: var(--shadow-float-sm), inset 0 0 0 1px rgba(182, 255, 42, 0.35);
}

.account-form__flash--error {
  background: rgba(239, 68, 68, 0.12);
  color: #fecaca;
  box-shadow: var(--shadow-float-sm), inset 0 0 0 1px rgba(239, 68, 68, 0.45);
}

.account-form__actions {
  display: grid;
  gap: var(--space-3);
}

.account-form__actions .btn {
  width: 100%;
  justify-content: center;
}

.account-form__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.account-form__footer a {
  color: var(--color-text-muted);
}

.account-form__footer a:hover {
  color: var(--color-text);
}

.account-form-section {
  display: grid;
  gap: 0.85rem;
  padding-top: 1.25rem;
  margin-top: 0.35rem;
  border-top: 1px solid color-mix(in srgb, var(--border, #2a2a2a) 80%, transparent);
}

.account-form-card > .account-form-section:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.account-form-section__head {
  display: grid;
  gap: 0.25rem;
}

.account-form-section__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.account-form-section__lead {
  margin: 0;
  color: var(--muted, #9a9a9a);
  font-size: 0.92rem;
  line-height: 1.45;
}

.account-form-callout {
  display: grid;
  gap: 0.75rem;
  padding: 0.95rem 1rem;
  border-radius: 0.65rem;
  border: 1px solid color-mix(in srgb, var(--border, #2a2a2a) 85%, transparent);
  background: color-mix(in srgb, var(--surface-2, #161616) 88%, transparent);
}

.account-form-callout--danger {
  border-color: color-mix(in srgb, var(--danger, #b33) 55%, transparent);
}

.account-form-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.account-form-status-row__label {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted, #9a9a9a);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.account-form-status-row__value {
  margin: 0.15rem 0 0;
  font-weight: 600;
  word-break: break-word;
}

.account-form__actions--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.account-form-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: center;
  margin-top: 0.85rem;
}

.account-form-jump a {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border, #2a2a2a) 90%, transparent);
  background: color-mix(in srgb, var(--surface-2, #161616) 70%, transparent);
  color: var(--muted, #9a9a9a);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.account-form-jump a:hover {
  color: var(--color-text, #f2f2f2);
  border-color: color-mix(in srgb, var(--accent, #c9a227) 45%, transparent);
}

.account-form-section--focus {
  border-radius: 0.75rem;
  padding: 1rem;
  margin-top: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--accent, #c9a227) 40%, transparent);
  background: color-mix(in srgb, var(--accent, #c9a227) 6%, transparent);
  animation: account-form-focus-in 0.45s ease-out;
}

@keyframes account-form-focus-in {
  from {
    opacity: 0.55;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.account-form-steps {
  margin: 0.35rem 0 0.5rem;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.35rem;
  color: var(--color-text, #f2f2f2);
  font-size: 0.92rem;
  line-height: 1.45;
}

.account-form-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.35rem;
}

.account-form-compare__col {
  display: grid;
  gap: 0.4rem;
  justify-items: start;
  padding: 0.65rem 0.75rem;
  border-radius: 0.55rem;
  border: 1px solid color-mix(in srgb, var(--border, #2a2a2a) 85%, transparent);
  background: color-mix(in srgb, var(--surface, #111) 70%, transparent);
}

.account-form-compare__label {
  margin: 0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted, #9a9a9a);
}

.account-form-compare__value {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
}

.account-form-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 0.65rem 0.85rem;
}

.account-form-meta__label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #9a9a9a);
}

.account-form-meta__value {
  display: block;
  margin-top: 0.15rem;
  font-weight: 600;
  font-size: 0.92rem;
}

.account-form-identity {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.account-form-identity img {
  border-radius: 0.45rem;
  flex-shrink: 0;
}

.account-form-ttl {
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 0.5rem;
  font-size: 0.88rem;
  border: 1px solid color-mix(in srgb, var(--border, #2a2a2a) 80%, transparent);
  background: color-mix(in srgb, var(--surface-2, #161616) 80%, transparent);
}

.account-form-ttl--urgent {
  border-color: color-mix(in srgb, var(--danger, #b33) 50%, transparent);
  color: color-mix(in srgb, var(--danger, #e66) 85%, var(--color-text, #f2f2f2));
}

.account-form-recovery {
  display: grid;
  gap: 0.35rem;
  padding: 0.7rem 0.8rem;
  border-radius: 0.55rem;
  border: 1px dashed color-mix(in srgb, var(--accent, #c9a227) 45%, transparent);
}

.account-form-recovery__title {
  margin: 0;
  font-weight: 650;
  font-size: 0.9rem;
}

.account-form-recovery ol {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.3rem;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--muted, #9a9a9a);
}

.account-form__flash--resume,
.account-form__flash--progress {
  background: color-mix(in srgb, var(--accent, #c9a227) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent, #c9a227) 35%, transparent);
}

@media (max-width: 520px) {
  .account-form-compare {
    grid-template-columns: 1fr;
  }
}

.account-form__actions--inline .btn {
  width: auto;
}

@media (min-width: 640px) {
  .account-form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Tournament signup — settings-style card over LoL splash art */
.section--tournament {
  position: relative;
  padding: 0;
  min-height: calc(100vh - var(--header-offset));
}

main.section.section--tournament,
#content.section.section--tournament {
  padding-top: var(--header-offset);
}

.tournament-page {
  position: relative;
  min-height: calc(100vh - var(--header-offset));
  display: flex;
  flex-direction: column;
}

.tournament-shell {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  display: flex;
  align-items: stretch;
  min-height: inherit;
  min-width: 0;
}

.tournament-shell__stage {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.tournament-splash {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/*
  LoL section shell: viewport-sized splash (same framing as tournament).
  Sticky keeps it screen-sized and locked to the viewport while content scrolls over it.
*/
.lol-section-shell {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  min-height: calc(100vh - var(--header-offset));
}

.lol-section-shell > .tournament-splash {
  position: sticky;
  top: 0;
  z-index: 0;
  flex: 0 0 auto;
  width: 100%;
  height: 100dvh;
  margin-bottom: -100dvh;
}

.lol-section-shell__content {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-height: inherit;
}

.tournament-splash__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: saturate(1.05);
}

.tournament-splash__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(9, 9, 11, 0.55) 0%, rgba(9, 9, 11, 0.82) 45%, rgba(9, 9, 11, 0.94) 100%),
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(182, 255, 42, 0.08), transparent 70%);
  pointer-events: none;
}

/* Opaque floating panels (leaderboards + members roster) */
#leaderboard-app.lb,
#roster-app {
  background: rgba(12, 12, 16, 0.96);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-float);
}

#leaderboard-app.lb .table-wrap,
#roster-app .roster-list,
#roster-app .roster-panels,
#members-app .player-list {
  background: var(--color-bg-elevated);
  border-radius: var(--radius-md);
}

#leaderboard-app.lb .lb-podium__card,
#roster-app .roster-panel {
  background: var(--color-surface);
}

#leaderboard-app.lb .lb-search input,
#leaderboard-app.lb .lb-season select,
#members-app .lb-search input,
#roster-app .lb-search input {
  background: var(--color-surface);
}

#leaderboard-app.lb .lb-seg,
#members-app .lb-seg,
#roster-app .lb-seg {
  background: rgba(255, 255, 255, 0.05);
}

.tournament-page__content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-4) var(--space-16);
  width: 100%;
}

.tournament-page__card-wrap {
  width: min(100%, 32rem);
}

.tournament-page__content.is-draft,
.tournament-page__content.is-bracket,
.tournament-page__content.is-wide {
  align-items: flex-start;
  justify-content: flex-start;
}

.tournament-page__card-wrap.is-draft,
.tournament-page__card-wrap.is-bracket {
  width: min(100%, 78rem);
}

.tournament-page__card-wrap.is-wide {
  width: min(100%, 88rem);
}

.tournament-page__content.is-wide {
  padding-inline: var(--space-4);
}

.tournament-panel-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0 0 0.85rem;
  padding: 0 0.15rem;
}

.tournament-panel-header__crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-muted, #9aa3b2);
}

.tournament-panel-header__crumb-root,
.tournament-panel-header__crumb-sep {
  flex: 0 0 auto;
}

.tournament-panel-header__crumb-event {
  min-width: 0;
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text, #e8ecf4);
  font-weight: 600;
}

.tournament-panel-header__crumb-section {
  flex: 0 0 auto;
  color: var(--color-text, #e8ecf4);
  font-weight: 650;
}

.tournament-panel-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.tournament-draft-board__team.is-highlight {
  outline: 2px solid color-mix(in srgb, var(--color-accent, #b6ff2a) 70%, transparent);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent, #b6ff2a) 25%, transparent);
}

.match-overview-team__name-btn {
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.match-overview-team__name-btn:hover strong,
.match-overview-team__name-btn:focus-visible strong {
  color: var(--color-accent, #b6ff2a);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.player-event-match.is-openable {
  cursor: pointer;
}

.player-event-match.is-openable:hover,
.player-event-match.is-openable:focus-visible {
  background: color-mix(in srgb, var(--color-surface-2, #1b2230) 80%, transparent);
}

.tournament-card--wide {
  padding-top: 2.25rem;
}

.tournament-card--wide .account-form-card__hero {
  margin-bottom: 0.35rem;
}

/* Extra top room on all public tournament panels (title not flush with edge). */
.tournament-page__content > .tournament-page__card-wrap > .tournament-card,
.tournament-page__content > .account-form-wrap > .tournament-card {
  padding-top: 2.25rem;
}

.tournament-bracket {
  display: grid;
  gap: 1.5rem;
  margin-top: 0.75rem;
  text-align: left;
}

.bhq-bracket {
  display: grid;
  gap: 1.75rem;
  margin-top: 0.85rem;
  text-align: left;
}

.bhq-bracket__section {
  display: grid;
  gap: 0.55rem;
}

.bhq-bracket__section.is-expanded {
  position: relative;
  z-index: 5;
}

.bhq-bracket__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.bhq-bracket__toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.bhq-bracket__hint {
  font-size: 0.75rem;
  margin-right: 0.25rem;
}

.bhq-bracket__section-title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.bhq-bracket__viewport {
  position: relative;
  height: min(62vh, 560px);
  overflow: auto;
  touch-action: pan-x pan-y;
  cursor: grab;
  user-select: none;
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
    rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-overflow-scrolling: touch;
}

.bhq-bracket__section.is-expanded .bhq-bracket__viewport {
  height: min(88vh, 920px);
}

.bhq-bracket__viewport.is-dragging {
  cursor: grabbing;
  touch-action: none;
}

.bhq-bracket__canvas {
  position: relative;
  margin: 0;
  flex: 0 0 auto;
}

.bhq-bracket__lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.bhq-bracket__connector {
  fill: none;
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.bhq-bracket__round-label {
  position: absolute;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  z-index: 1;
  pointer-events: none;
}

.bhq-bracket__section-label {
  position: absolute;
  left: 16px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  z-index: 1;
  pointer-events: none;
}

.bhq-match__name.is-placeholder {
  font-size: 0.68rem;
  line-height: 1.15;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--color-text-subtle);
}

.bhq-match {
  position: absolute;
  display: grid;
  grid-auto-rows: minmax(0, auto);
  border-radius: 4px;
  overflow: hidden;
  background: #1c1c20;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
  z-index: 1;
  isolation: isolate;
}

.bhq-match.is-clickable {
  cursor: pointer;
}

.bhq-match.is-clickable:hover,
.bhq-match.is-clickable:focus-visible {
  z-index: 4;
  border-color: rgba(182, 255, 42, 0.45);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(182, 255, 42, 0.18);
}

.bhq-match.is-finished.is-clickable .bhq-match__row {
  pointer-events: auto;
}

.bhq-match__name-hover {
  flex: 1;
  min-width: 0;
  max-width: 100%;
}

.bhq-match.is-live {
  border-color: rgba(182, 255, 42, 0.55);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(182, 255, 42, 0.2);
}

.bhq-match__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0 0.55rem;
  min-height: 1.45rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.78rem;
  line-height: 1.2;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
  max-width: 100%;
}

.bhq-match__row:last-child {
  border-bottom: none;
}

.bhq-match__row.is-winner {
  background: rgba(182, 255, 42, 0.14);
  font-weight: 600;
}

.bhq-match__row.is-loser {
  background: rgba(239, 68, 68, 0.14);
  font-weight: 600;
}

.bhq-match__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.bhq-match__score {
  flex: 0 0 auto;
  min-width: 1.1rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-subtle);
  font-weight: 600;
}

.bhq-match__row.is-winner .bhq-match__score {
  color: var(--color-accent, #b6ff2a);
}

.bhq-match__row.is-loser .bhq-match__score {
  color: #fca5a5;
}

.bhq-match__seed {
  flex: 0 0 auto;
  min-width: 1rem;
  margin-right: 0.25rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

.bhq-match__date {
  grid-column: 1 / -1;
  padding: 0.15rem 0.55rem 0.25rem;
  font-size: 0.62rem;
  color: var(--color-text-subtle);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.bhq-match__edit {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  padding: 0.2rem 0.35rem 0.3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.bhq-match__edit .btn {
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
  min-height: 0;
}

.tournament-team-hover {
  position: relative;
  display: block;
  max-width: 100%;
}

.tournament-team-hover__label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tournament-team-hover__panel {
  min-width: 16rem;
  max-width: 22rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-md, 8px);
  background: #16161a;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}

.tournament-team-hover__panel.is-portal {
  position: fixed;
  z-index: 12000;
  pointer-events: auto;
}

.tournament-team-hover__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.72rem;
}

.tournament-team-hover__head strong {
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tournament-team-hover__empty {
  font-size: 0.72rem;
  margin: 0;
}

.tournament-team-hover__slots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.22rem;
}

.tournament-team-hover__slot {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  min-height: 1.35rem;
}

.tournament-team-hover__slot.is-empty {
  color: var(--color-text-subtle);
}

.tournament-team-hover__slot-num {
  flex: 0 0 auto;
  width: 1rem;
  font-size: 0.65rem;
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

.tournament-team-hover__avatar {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.tournament-team-hover__avatar.is-empty {
  display: inline-block;
  background: rgba(255, 255, 255, 0.06);
}

.tournament-team-hover__slot-name {
  flex: 1;
  min-width: 0;
}

.tournament-team-hover__subs {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tournament-team-hover__subs-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-bottom: 0.25rem;
}

.tournament-team-hover__kda {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-size: 0.68rem;
  color: var(--color-text-subtle);
  margin-left: auto;
}

.tournament-team-hover__scoreboard {
  display: inline-grid;
  grid-template-columns: 3.4rem 2rem 2.4rem 2.6rem 1.8rem;
  gap: 0.2rem;
  margin-left: auto;
  align-items: center;
  font-variant-numeric: tabular-nums;
  font-size: 0.62rem;
  color: var(--color-text-subtle);
  text-align: right;
}

.tournament-team-hover__scoreboard .tournament-team-hover__kda {
  margin-left: 0;
}

.tournament-team-hover__stat {
  white-space: nowrap;
}

.tournament-team-hover__scoreboard-head {
  display: grid;
  grid-template-columns: 3.4rem 2rem 2.4rem 2.6rem 1.8rem;
  gap: 0.2rem;
  justify-content: end;
  margin: 0 0 0.25rem;
  padding-left: 4.5rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  text-align: right;
}

.tournament-team-hover__panel.is-portal {
  min-width: 300px;
  max-width: min(440px, calc(100vw - 24px));
}

.tournament-match-roster.has-scoreboard .match-roster__player.has-scoreboard {
  gap: 0.35rem;
}

.tournament-match-roster__scoreboard-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.6rem 2.2rem 2.6rem 2.8rem 2rem;
  gap: 0.25rem;
  align-items: end;
  margin: 0 0 0.35rem;
  padding: 0 0.15rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  text-align: right;
}

.tournament-match-roster__scoreboard-spacer {
  text-align: left;
}

.tournament-match-player__scoreboard {
  display: inline-grid;
  grid-template-columns: 3.6rem 2.2rem 2.6rem 2.8rem 2rem;
  gap: 0.25rem;
  margin-left: auto;
  align-items: center;
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  color: var(--color-text-muted);
  text-align: right;
}

.tournament-match-player__scoreboard .match-roster__kda {
  margin-left: 0;
}

.tournament-match-player__stat {
  white-space: nowrap;
}

.tournament-match-roster__subs {
  margin-top: 0.5rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.tournament-match-roster__subs-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-bottom: 0.35rem;
}

.tournament-match-stats-list .match-roster__player {
  min-height: 1.75rem;
}

.tournament-match-player__avatar {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.tournament-match-player__avatar.is-empty {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.tournament-match-player__name {
  min-width: 0;
}

.tournament-match-player__link {
  color: inherit;
  text-decoration: none;
}

.tournament-match-player__link:hover {
  color: var(--color-primary, #a6d671);
  text-decoration: underline;
}

.tournament-match-player__hover-name {
  display: block;
  /* Tip is a child of .draft-player-hover — never clip it here. */
  overflow: visible;
  max-width: 100%;
}

.tournament-match-player__hover-name .draft-player-hover__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tournament-match-overlay {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4, 1rem);
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
}

.tournament-match-dialog {
  width: min(100%, 56rem);
  max-height: min(92vh, 900px);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg, 12px);
  background: var(--color-bg-elevated, #16161a);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.tournament-match-dialog--dense {
  width: min(100%, 52rem);
}

.tournament-match-dialog--dense .tournament-match-dialog__head {
  padding: 0.65rem 0.9rem;
}

.tournament-match-dialog--dense .tournament-match-dialog__eyebrow {
  margin-bottom: 0.1rem;
  font-size: 0.7rem;
}

.tournament-match-dialog--dense .tournament-match-dialog__title {
  font-size: clamp(1rem, 2vw, 1.25rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tournament-match-dialog--dense .tournament-match-dialog__kpi {
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
}

.tournament-match-dialog--dense .tournament-match-dialog__kpi-value {
  font-size: 0.92rem;
}

.tournament-match-dialog--dense .tournament-match-dialog__meta {
  gap: 0.35rem 0.7rem;
  padding: 0 0.9rem 0.4rem;
  font-size: 0.68rem;
}

.tournament-match-dialog--dense .tournament-match-dialog__chips {
  gap: 0.3rem;
  padding: 0.45rem 0.9rem;
}

.tournament-match-dialog--dense .tournament-match-dialog__chip {
  padding: 0.15rem 0.45rem;
  font-size: 0.68rem;
}

.tournament-match-dialog--dense .tournament-match-dialog__body {
  padding: 0.65rem 0.9rem 0.85rem;
}

.tournament-match-dialog--dense .tournament-match-teams .match-team {
  padding: 0.5rem 0.55rem;
}

.tournament-match-dialog--dense .match-teams {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.tournament-match-dialog--dense .match-team__head {
  margin-bottom: 0.35rem;
}

.tournament-match-dialog--dense .match-roster {
  gap: 0.2rem;
}

.tournament-match-dialog--dense .match-roster__player {
  min-height: 1.35rem;
  gap: 0.28rem;
}

.tournament-match-dialog--dense .tournament-match-player__avatar,
.tournament-match-dialog--dense .tournament-match-player__avatar.is-empty {
  width: 18px;
  height: 18px;
}

.tournament-match-dialog--dense .match-role-icon {
  width: 15px;
  height: 15px;
}

.tournament-match-dialog--dense .match-champ-icon {
  width: 20px;
  height: 20px;
}

.tournament-match-dialog--dense .tournament-match-player__scoreboard {
  font-size: 0.66rem;
  grid-template-columns: 3.2rem 1.9rem 2.3rem 2.4rem 1.7rem;
  gap: 0.18rem;
}

.tournament-match-dialog--dense .tournament-match-roster__scoreboard-head {
  grid-template-columns: minmax(0, 1fr) 3.2rem 1.9rem 2.3rem 2.4rem 1.7rem;
  font-size: 0.52rem;
  margin-bottom: 0.2rem;
}

.tournament-match-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.tournament-match-dialog__title-wrap {
  min-width: 0;
}

.tournament-match-dialog__eyebrow {
  margin: 0 0 0.25rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm, 0.8125rem);
}

.tournament-match-dialog__title {
  margin: 0;
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  line-height: 1.25;
}

.tournament-match-dialog__close {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: var(--radius-sm, 6px);
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}

.tournament-match-dialog__close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-text);
}

.tournament-match-dialog__kpi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

.tournament-match-dialog__kpi-item {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}

.tournament-match-dialog__kpi-label {
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.tournament-match-dialog__kpi-value {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tournament-match-dialog__kpi-value.is-win {
  color: #c8f0a0;
}

.tournament-match-dialog__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.85rem;
  padding: 0 var(--space-5, 1.25rem) 0.55rem;
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

.tournament-match-dialog__meta-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.65rem;
}

.tournament-match-dialog__meta-sandbox {
  color: #c8f0a0;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.62rem;
}

.tournament-match-dialog__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.tournament-match-dialog__chip {
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.72rem;
  color: var(--color-text-muted);
  line-height: 1.3;
}

.tournament-match-dialog__chip--btn {
  cursor: pointer;
  color: var(--color-text);
  background: rgba(166, 214, 113, 0.12);
  border-color: rgba(166, 214, 113, 0.35);
  font: inherit;
  font-size: 0.72rem;
}

.tournament-match-dialog__chip--btn.is-active,
.tournament-match-dialog__chip--btn:hover {
  background: rgba(166, 214, 113, 0.22);
  border-color: rgba(166, 214, 113, 0.55);
}

.tournament-match-dialog__chip--win {
  color: #c8f0a0;
  border-color: rgba(166, 214, 113, 0.35);
}

.tournament-match-dialog__chip--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.65rem;
}

.tournament-match-dialog__body {
  padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
  overflow: auto;
  min-height: 0;
}

.tournament-match-dialog__loading {
  margin: 0 0 0.65rem;
}

.tournament-match-dialog__note {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
}

.tournament-match-dialog__notes {
  margin-top: 0.85rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tournament-match-dialog__lobby-events {
  margin-top: 0.85rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tournament-match-dialog__timeline {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}

.tournament-match-dialog__timeline li {
  display: flex;
  gap: 0.65rem;
  font-size: 0.8rem;
}

.tournament-match-dialog__timeline-time {
  flex: 0 0 4.5rem;
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

.tournament-match-dialog__timeline-event {
  color: inherit;
}

.tournament-match-teams {
  margin-top: 0;
}

.tournament-match-teams .match-team {
  padding: var(--space-3, 0.75rem);
  border-radius: var(--radius-md, 8px);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.match-team__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tournament-team-hover__head strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

/* Match stats deep-dive (modal Stats toggle) */
.match-stats-deep {
  display: grid;
  gap: 0.75rem;
}

.match-stats-deep__banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.75rem;
}

.match-stats-deep__preview {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #c8f0a0;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  border: 1px solid rgba(166, 214, 113, 0.35);
  background: rgba(166, 214, 113, 0.1);
}

.match-stats-objectives-wrap {
  display: grid;
  gap: 0.4rem;
}

.match-stats-objectives {
  display: grid;
  gap: 0.25rem;
}

.match-stats-objectives__label {
  font-size: 0.7rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-stats-objectives__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.match-stats-objectives__chip {
  font-size: 0.62rem;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-text-muted);
}

/* Tab nav + reference comparison charts */
.match-stats-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0 0 0.75rem;
}

.match-stats-tabs--modal {
  position: sticky;
  top: 0;
  z-index: 3;
  flex: 0 0 auto;
  padding: 0.4rem 0.9rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 0;
  background: var(--color-bg-elevated, #16161a);
}

.match-stats-tabs button {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.35rem 0.65rem;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
}

.match-stats-tabs button.is-active,
.match-stats-tabs button:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}

.match-stats-tabs--sub {
  margin-bottom: 0.5rem;
}

.match-stats-tabs--sub button {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.match-overview-panel,
.match-builds-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.match-overview-team,
.match-builds-team {
  padding: 0.5rem 0.55rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  min-width: 0;
}

.match-overview-team h3,
.match-builds-team h3 {
  margin: 0 0 0.45rem;
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-overview-team ul,
.match-builds-team ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.match-overview-team li,
.match-builds-team li {
  display: flex;
  gap: 0.4rem;
  align-items: flex-start;
  min-width: 0;
}

.match-overview-team__main {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 0.12rem;
}

.match-overview-team__main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
}

.match-overview-team__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.12rem;
}

.match-overview-team__items img,
.match-builds-team img {
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.35);
}

.match-overview-team__item-empty {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
}

.match-overview-team__dmg {
  font-variant-numeric: tabular-nums;
  font-size: 0.68rem;
  color: var(--color-text-muted);
}

.match-compare-panel {
  display: grid;
  gap: 0.65rem;
}

.match-compare-legend {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  font-size: 0.72rem;
  font-weight: 700;
}

.match-compare-legend .is-blue {
  color: #60a5fa;
}

.match-compare-legend .is-red {
  color: #f87171;
}

.match-compare-legend .is-win {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 0.18em;
}

.match-compare-metrics {
  justify-content: center;
}

.match-compare-single {
  min-width: 0;
}

.match-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.stat-compare-block {
  padding: 0.55rem 0.5rem 0.65rem;
  border-radius: 8px;
  background: rgba(10, 14, 22, 0.85);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.stat-compare-block__title {
  margin: 0 0 0.45rem;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
}

.stat-compare-block__body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.35rem;
  align-items: center;
}

.stat-compare-block__donut-wrap {
  position: relative;
  width: 88px;
  height: 88px;
}

.stat-compare-block__totals {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  pointer-events: none;
}

.stat-compare-block__totals hr {
  width: 1.6rem;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  margin: 0.1rem 0;
}

.stat-compare-block__totals .is-blue {
  color: #60a5fa;
}

.stat-compare-block__totals .is-red {
  color: #f87171;
}

.stat-flank {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.28rem;
}

.stat-flank li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 2.4rem;
  gap: 0.25rem;
  align-items: center;
}

.stat-flank img,
.stat-flank__icon-empty {
  width: 18px;
  height: 18px;
  border-radius: 3px;
}

.stat-flank__icon-empty {
  background: rgba(255, 255, 255, 0.08);
}

.stat-flank__track {
  height: 0.45rem;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.stat-flank__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.stat-flank--blue .stat-flank__fill {
  background: #3b82f6;
}

.stat-flank--red .stat-flank__track {
  direction: rtl;
}

.stat-flank--red .stat-flank__fill {
  background: #ef4444;
}

.stat-flank__val {
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--color-text-muted);
}

.stat-lead-chart__head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
}

.stat-lead-chart__plot {
  position: relative;
}

.stat-lead-chart__svg {
  width: 100%;
  height: auto;
  display: block;
  background: linear-gradient(165deg, #1a1d24 0%, #12151b 100%);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  cursor: crosshair;
}

.stat-lead-chart__grid {
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 1;
}

.stat-lead-chart__grid-v {
  stroke: rgba(255, 255, 255, 0.04);
  stroke-width: 1;
}

.stat-lead-chart__zero {
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1.5;
}

.stat-lead-chart__ylab,
.stat-lead-chart__tick {
  fill: rgba(255, 255, 255, 0.45);
  font-size: 9px;
}

.stat-lead-chart__guide {
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.stat-lead-chart__legend.is-blue {
  color: #60a5fa;
}

.stat-lead-chart__legend.is-red {
  color: #f87171;
}

.stat-lead-chart__legend.is-even {
  color: #9ca3af;
}

.stat-lead-chart__tooltip {
  position: absolute;
  top: 0.5rem;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
  min-width: 7rem;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  background: rgba(12, 14, 18, 0.94);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  font-size: 0.72rem;
  display: grid;
  gap: 0.15rem;
}

.stat-multi-series {
  margin-bottom: 0.85rem;
  padding: 0.7rem 0.75rem;
  border-radius: 12px;
  background: linear-gradient(165deg, #1e222b 0%, #151820 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.stat-multi-series__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.55rem;
}

.stat-multi-series__legend--segmented {
  gap: 0;
  width: fit-content;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.stat-multi-series__legend--segmented .stat-multi-series__chip {
  border-radius: 0;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-multi-series__legend--segmented .stat-multi-series__chip:last-child {
  border-right: none;
}

.stat-multi-series__chip {
  font: inherit;
  font-size: 0.7rem;
  font-weight: 650;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-muted);
  cursor: pointer;
}

.stat-multi-series__chip.is-on {
  color: #fff;
  border-color: color-mix(in srgb, var(--series-color) 55%, transparent);
  background: color-mix(in srgb, var(--series-color) 28%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--series-color) 40%, transparent);
}

.stat-multi-series__plot {
  position: relative;
}

.stat-multi-series__svg {
  width: 100%;
  height: auto;
  display: block;
  cursor: crosshair;
}

.stat-multi-series__grid {
  stroke: rgba(255, 255, 255, 0.06);
}

.stat-multi-series__axis {
  stroke: rgba(255, 255, 255, 0.18);
}

.stat-multi-series__tick {
  fill: rgba(255, 255, 255, 0.45);
  font-size: 9px;
}

.stat-multi-series__ylab {
  fill: rgba(255, 255, 255, 0.45);
  font-size: 9px;
}

.stat-multi-series__guide {
  stroke: rgba(255, 255, 255, 0.35);
  stroke-dasharray: 3 3;
}

.stat-multi-series__tooltip {
  position: absolute;
  top: 0.35rem;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
  min-width: 8rem;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  background: rgba(12, 14, 18, 0.94);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  font-size: 0.72rem;
}

.stat-multi-series__tooltip ul {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.2rem;
}

.stat-multi-series__tooltip li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  opacity: 0.72;
}

.stat-multi-series__tooltip li.is-active {
  opacity: 1;
  font-weight: 650;
}

.match-timeline-markers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.55rem;
}

.player-event-filters {
  display: grid;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(10, 12, 16, 0.72);
}

.player-event-filters--sticky {
  position: sticky;
  top: 0;
  z-index: 3;
  backdrop-filter: blur(8px);
}

.player-event-filters__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: end;
}

.player-event-filters label {
  display: grid;
  gap: 0.15rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.player-event-filters select {
  font: inherit;
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 0.25rem 0.4rem;
}

.player-event-filters__clear {
  font: inherit;
  font-size: 0.7rem;
  padding: 0.3rem 0.55rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text-muted);
  cursor: pointer;
}

.player-event-filters__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.player-event-filters__chip {
  font-size: 0.68rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: rgba(77, 143, 217, 0.2);
  color: #c6ddf7;
}

.player-event-compare__targets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
}

.player-event-compare__targets button {
  font: inherit;
  font-size: 0.72rem;
  font-weight: 650;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-muted);
  cursor: pointer;
}

.player-event-compare__targets button.is-active {
  color: #fff;
  border-color: rgba(77, 143, 217, 0.55);
  background: rgba(77, 143, 217, 0.25);
}

.player-event-compare__picker {
  display: grid;
  gap: 0.55rem;
  margin-bottom: 0.75rem;
}

.player-event-compare__search {
  display: grid;
  gap: 0.2rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.player-event-compare__search input {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.28);
  color: var(--color-text);
}

.player-event-compare__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.player-event-compare__chips button {
  font: inherit;
  font-size: 0.7rem;
  padding: 0.28rem 0.55rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text);
  cursor: pointer;
}

.player-event-compare__chips button.is-active {
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.18);
}

.player-event-compare__search-hits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
  max-height: 10rem;
  overflow: auto;
}

.player-event-compare__search-hits button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  text-align: left;
  font: inherit;
  font-size: 0.75rem;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text);
  cursor: pointer;
}

.stat-dual-avg {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.stat-dual-avg__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.stat-dual-avg__row {
  display: grid;
  grid-template-columns: minmax(3.2rem, 5.5rem) minmax(0, 1fr) 2.8rem;
  gap: 0.35rem;
  align-items: center;
  font-size: 0.7rem;
  margin-bottom: 0.2rem;
}

.stat-dual-avg__who {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stat-dual-avg__track {
  height: 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.stat-dual-avg__fill {
  display: block;
  height: 100%;
}

.stat-dual-avg__fill.is-you {
  background: #8fbf5a;
}

.stat-dual-avg__fill.is-event {
  background: #4d8fd9;
}

@media (max-width: 720px) {
  .match-overview-panel,
  .match-builds-panel,
  .match-compare-grid {
    grid-template-columns: 1fr;
  }

  .tournament-match-dialog__kpi {
    grid-template-columns: 1fr;
  }

  .stat-compare-block__body {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .tournament-match-dialog--dense {
    width: min(100%, 100vw);
    max-height: 94vh;
  }

  .tournament-match-dialog--dense .match-teams {
    grid-template-columns: 1fr;
  }

  .tournament-match-dialog--dense .tournament-match-player__scoreboard {
    grid-template-columns: 3rem 1.7rem 2rem 2.1rem 1.5rem;
  }
}

/* Roster player event overview modal */
.player-event-dialog {
  width: min(100%, 58rem);
}

.player-event-dialog__head {
  align-items: center;
}

.player-event-dialog__identity {
  display: flex;
  gap: 0.75rem;
  min-width: 0;
  flex: 1 1 auto;
}

.player-event-dialog__avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.12);
  flex: 0 0 auto;
}

.player-event-dialog__avatar.is-empty {
  display: inline-block;
  background: rgba(255, 255, 255, 0.06);
}

.player-event-dialog__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
  align-items: center;
}

.player-event-dialog__team {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-event-dialog__actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
}

.player-event-dialog__actions .tournament-match-dialog__chip--btn {
  text-decoration: none;
}

.player-event-form {
  display: inline-flex;
  gap: 0.2rem;
  letter-spacing: 0.04em;
  font-weight: 700;
}

.player-event-form .is-win {
  color: #86efac;
}

.player-event-form .is-loss {
  color: #fca5a5;
}

.player-event-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 0.45rem;
  margin-bottom: 0.85rem;
}

.player-event-tile {
  padding: 0.45rem 0.55rem;
  border-radius: var(--radius-md, 8px);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  min-width: 0;
}

.player-event-tile__label {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-bottom: 0.2rem;
}

.player-event-tile__value {
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

.player-event-tile__delta {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.62rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.player-event-tiles--kpi {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 720px) {
  .player-event-tiles--kpi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.player-event-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}

.player-event-series {
  padding: 0.65rem 0.7rem;
  border-radius: 10px;
  background: #1a1d24;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.player-event-series--panel {
  background: linear-gradient(165deg, #1e222b 0%, #151820 100%);
}

.player-event-series__head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
  font-size: 0.78rem;
}

.player-event-series__chart {
  display: flex;
  align-items: flex-end;
  gap: 0.3rem;
  height: 7.25rem;
  padding-top: 0.35rem;
}

.player-event-series__col {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.15rem;
}

.player-event-series__val {
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.player-event-series__bar {
  width: 100%;
  max-width: 1.55rem;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, #5b9cf5 0%, #3b82f6 55%, #2563eb 100%);
  min-height: 0.25rem;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.18);
}

.player-event-series__idx {
  font-size: 0.55rem;
  color: var(--color-text-subtle);
}

.player-event-shares {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}

.player-event-share {
  padding: 0.65rem 0.7rem;
  border-radius: 10px;
  background: linear-gradient(165deg, #1e222b 0%, #151820 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.player-event-share h3 {
  margin: 0 0 0.55rem;
  font-size: 0.8rem;
}

.player-event-share ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.player-event-share__donut-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
}

.player-event-share__donut-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  flex: 0 0 auto;
}

.player-event-share__donut-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
  line-height: 1.15;
  font-size: 0.72rem;
}

.player-event-share__donut-label strong {
  font-size: 0.95rem;
}

.player-event-share__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.player-event-share__legend li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 0.35rem;
  align-items: center;
  font-size: 0.72rem;
}

.player-event-share__swatch {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  justify-self: end;
}

.player-event-share__swatch.is-blue {
  background: #3b82f6;
}

.player-event-share__meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  margin-bottom: 0.15rem;
}

.player-event-share__icon-empty {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
}

.player-event-share__ranked {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.player-event-share__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-event-share__count {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.player-event-share__track {
  height: 0.28rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.player-event-share__track > span {
  display: block;
  height: 100%;
  background: #4d8fd9;
}

.player-event-matches h3 {
  margin: 0 0 0.45rem;
  font-size: 0.85rem;
}

.player-event-compare {
  display: grid;
  gap: 0.75rem;
}

.player-event-compare__note {
  margin: 0;
  font-size: 0.75rem;
}

.player-event-compare__footer {
  margin-top: 0.35rem;
  padding: 0.7rem 0.75rem;
  border-radius: 10px;
  background: linear-gradient(165deg, #1e222b 0%, #151820 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.player-event-compare__footer h3 {
  margin: 0 0 0.25rem;
  font-size: 0.85rem;
}

.player-event-compare__footer .muted {
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
}

.player-event-match-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.player-event-match {
  display: grid;
  grid-template-columns: 1.4rem 22px minmax(0, 1fr) 4.2rem 2rem 2.4rem 2.6rem 1.8rem 1.6rem;
  gap: 0.35rem;
  align-items: center;
  padding: 0.4rem 0.45rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  font-size: 0.72rem;
}

.player-event-match.is-win {
  box-shadow: inset 0 0 0 1px rgba(134, 239, 172, 0.22);
}

.player-event-match.is-loss {
  box-shadow: inset 0 0 0 1px rgba(252, 165, 165, 0.18);
}

.player-event-match__result {
  font-weight: 800;
  text-align: center;
}

.player-event-match.is-win .player-event-match__result {
  color: #86efac;
}

.player-event-match.is-loss .player-event-match__result {
  color: #fca5a5;
}

.player-event-match__main {
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}

.player-event-match__main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-event-match__kda,
.player-event-match__stat,
.player-event-match__game {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.tournament-roster-player-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.tournament-roster-player-btn:hover,
.tournament-roster-player-btn:focus-visible {
  color: var(--color-primary, #a6d671);
  text-decoration: underline;
}

.tournament-roster-table tr.is-clickable {
  cursor: pointer;
}

.tournament-roster-table tr.is-clickable:hover {
  background: rgba(255, 255, 255, 0.03);
}

@media (max-width: 720px) {
  .player-event-charts,
  .player-event-shares {
    grid-template-columns: 1fr;
  }

  .player-event-match {
    grid-template-columns: 1.2rem 20px minmax(0, 1fr) 3.6rem;
    grid-template-rows: auto auto;
  }

  .player-event-match__stat,
  .player-event-match__game {
    display: none;
  }
}

.bhq-bracket__rosters {
  display: grid;
  gap: 0.45rem;
}

.bhq-bracket__rosters .tournament-draft-board {
  margin-top: 0.35rem;
}

.bhq-bracket__team-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.3rem 0.9rem;
  font-size: var(--text-sm);
}

.tournament-bracket__section {
  display: grid;
  gap: 0.75rem;
}

.tournament-bracket__section-title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  text-align: center;
}

.tournament-bracket__tree {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.tournament-bracket__round {
  flex: 0 0 min(14rem, 78vw);
  scroll-snap-align: start;
  display: grid;
  gap: 0.65rem;
  align-content: start;
  position: relative;
}

.tournament-bracket__round + .tournament-bracket__round::before {
  content: "";
  position: absolute;
  left: -0.55rem;
  top: 2.4rem;
  bottom: 0.75rem;
  width: 0.1rem;
  background: rgba(255, 255, 255, 0.12);
}

.tournament-bracket__round-title {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
}

.tournament-bracket__round-matches {
  display: grid;
  gap: 1rem;
  min-height: 100%;
  align-content: space-around;
}

.tournament-bracket__match {
  display: grid;
  gap: 0;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.tournament-bracket__match.is-live {
  border-color: rgba(182, 255, 42, 0.4);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(182, 255, 42, 0.15);
}

.tournament-bracket__slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  min-height: 2.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: var(--text-sm);
}

.tournament-bracket__slot:last-of-type {
  border-bottom: none;
}

.tournament-bracket__slot.is-winner {
  background: rgba(182, 255, 42, 0.1);
  font-weight: var(--weight-semibold);
}

.tournament-bracket__slot-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tournament-bracket__slot-score {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-subtle);
}

.tournament-bracket__match-meta {
  padding: 0.3rem 0.7rem 0.45rem;
  font-size: var(--text-xs);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.tournament-bracket__rosters {
  display: grid;
  gap: 0.5rem;
}

.tournament-bracket__team-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.35rem 1rem;
  font-size: var(--text-sm);
}

@media (min-width: 900px) {
  .tournament-bracket__round {
    flex: 1 1 0;
    min-width: 11rem;
  }
}

.tournament-card {
  backdrop-filter: blur(12px);
  background: rgba(24, 24, 27, 0.88);
  box-shadow:
    var(--shadow-float),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

.tournament-card__icon {
  width: 4rem;
  height: 4rem;
  margin-inline: auto;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #b6ff2a 0%, #6ea810 100%);
  color: #111;
  box-shadow: 0 8px 24px rgba(182, 255, 42, 0.25);
}

.tournament-card__stat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-inline: auto;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: var(--text-sm);
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.tournament-card__stat strong {
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
}

.tournament-card__test-banner {
  margin: 0.75rem auto 0;
  max-width: 28rem;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-md);
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: 1.4;
}
.tournament-card__turn-banner {
  margin: 0.75rem 0 0;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: var(--text-sm);
}
.tournament-card__turn-banner.is-you {
  background: rgba(182, 255, 42, 0.12);
  border-color: rgba(182, 255, 42, 0.35);
  color: var(--color-text);
  font-weight: 600;
}
.tournament-card__teams {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.85rem;
}
.tournament-card__team {
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  text-align: left;
}
.tournament-card__team.is-active {
  border-color: rgba(182, 255, 42, 0.4);
  background: rgba(182, 255, 42, 0.08);
}
.tournament-card__pool {
  margin-top: 1rem;
}
.tournament-card__pool-list {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.5rem;
}
.tournament-card__pool-list .btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  text-align: left;
}

.tournament-card__draft-meta {
  text-align: center;
}

.tournament-draft-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
  overflow: visible;
  align-items: start;
  isolation: isolate;
}

.tournament-draft-board__team {
  min-width: 0;
  display: grid;
  gap: 0.45rem;
  padding: 0.7rem 0.55rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  text-align: left;
  overflow: visible;
  position: relative;
  z-index: 1;
  transform-origin: top center;
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.22s ease,
    background 0.22s ease;
}

/* Hover lift — all teams including the captain on the clock. */
@media (hover: hover) {
  .tournament-draft-board.is-live .tournament-draft-board__team:hover {
    transform: scale(1.05);
    z-index: 10;
    background: var(--color-surface-hover);
    border-color: rgba(255, 255, 255, 0.24);
    box-shadow:
      0 20px 48px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(255, 255, 255, 0.12);
  }

  .tournament-draft-board.is-live .tournament-draft-board__team:hover .tournament-draft-board__slot {
    background: rgba(0, 0, 0, 0.38);
    border-color: rgba(255, 255, 255, 0.14);
  }

  .tournament-draft-board.is-live
    .tournament-draft-board__team:hover
    .tournament-draft-board__slot.is-filled {
    background: rgba(255, 255, 255, 0.08);
  }

  .tournament-draft-board.is-live .tournament-draft-board__team.is-active:hover {
    border-color: rgba(182, 255, 42, 0.65);
    box-shadow:
      0 20px 48px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(182, 255, 42, 0.35),
      0 0 20px rgba(182, 255, 42, 0.12);
  }
}

/* Captain on the clock — same card size; green accent only (no default scale-up). */
.tournament-draft-board__team.is-active {
  border-color: rgba(182, 255, 42, 0.5);
  background: #212820;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(182, 255, 42, 0.22),
    0 0 16px rgba(182, 255, 42, 0.08);
}

.tournament-draft-board__team-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem;
  min-width: 0;
}

.tournament-draft-board__team-head strong {
  font-size: var(--text-sm);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tournament-draft-board__count {
  flex: 0 0 auto;
  font-size: 0.7rem;
  white-space: nowrap;
}

.tournament-draft-board__captain {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.3;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  overflow: visible;
}

.tournament-draft-board__name,
.tournament-draft-board__slot-name {
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

.tournament-draft-board__slots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.tournament-draft-board__slot {
  display: grid;
  grid-template-columns: 0.95rem 1.25rem minmax(0, 1fr) auto auto;
  gap: 0.3rem;
  align-items: center;
  min-height: 2rem;
  min-width: 0;
  padding: 0.28rem 0.4rem;
  border-radius: var(--radius-sm, 6px);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.18);
  font-size: var(--text-xs);
  position: relative;
  overflow: visible;
}

.tournament-draft-board__slot.has-meta {
  /* Keep a single horizontal row — same height as empty slots. */
  align-items: center;
  min-height: 2rem;
}

.tournament-draft-board__slot-name {
  /* Tip is a child of .draft-player-hover — never clip it here. */
  overflow: visible;
  max-width: 100%;
}

.tournament-draft-board__slot-name .draft-player-hover__label,
.tournament-draft-board__slot-name:not(.draft-player-hover) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tournament-draft-board__slot-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  flex: 0 0 auto;
  max-width: 100%;
}

.tournament-draft-board__slot-meta .rank-pair {
  display: grid;
  gap: 0.08rem;
  font-size: 0.62rem;
}

.tournament-draft-board__slot-meta .rank-pair__part {
  display: grid;
  grid-template-columns: 1.6rem 0.78rem minmax(0, 1fr) auto;
  gap: 0.05rem;
  white-space: nowrap;
}

.tournament-draft-board__slot-meta .rank-pair__separator {
  display: none;
}

.tournament-draft-board__slot-meta .rank-pair__crest,
.tournament-draft-board__slot-meta .rank-pair__empty {
  width: 0.78rem;
  height: 0.78rem;
}

.tournament-draft-board__slot-meta .rank-pair__tier {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.62rem;
}

.tournament-draft-board__slot-meta .rank-pair__lp {
  font-size: 0.5rem;
}

.tournament-draft-board__slot-meta .tournament-rank-badge {
  max-width: 7.5rem;
  gap: 0.2rem;
}

.tournament-draft-board__slot-meta .tournament-rank-badge__text {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.2rem;
  font-size: 0.62rem;
  line-height: 1.1;
  min-width: 0;
}

.tournament-draft-board__slot-meta .tournament-rank-badge__text strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.62rem;
  font-weight: 600;
}

.tournament-draft-board__slot-meta .tournament-rank-badge__div {
  display: none;
}

.tournament-draft-board__slot-meta .tournament-rank-badge__lp {
  display: none;
}

.tournament-draft-board__slot > .tournament-draft-board__slot-name,
.tournament-draft-board__slot > .draft-player-hover {
  min-width: 0;
}

.tournament-role-pair.is-compact {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0.12rem;
}

.tournament-role-pair.is-compact .tournament-role-badge {
  min-height: 0;
  padding: 0.05rem;
  gap: 0;
  border-radius: 4px;
}

.tournament-draft-board__avatar {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.tournament-draft-board__avatar.is-empty {
  display: block;
  background: rgba(255, 255, 255, 0.06);
}

.tournament-draft-board__avatar--captain {
  width: 1.25rem;
  height: 1.25rem;
}

.tournament-draft-board__subs {
  margin-top: 0.15rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.tournament-draft-board__subs-label {
  font-size: 0.62rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-bottom: 0.35rem;
}

.tournament-draft-board__slot.is-filled {
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
}

.tournament-draft-board__slot-num {
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

.tournament-draft-board__slot.is-empty .tournament-draft-board__slot-name {
  color: var(--color-text-subtle);
}

.draft-player-hover {
  position: relative;
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
}

.draft-player-hover__label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: help;
}

.draft-player-hover__link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.draft-player-hover__button {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.draft-player-hover__link:hover,
.draft-player-hover__link:focus-visible,
.draft-player-hover__button:hover,
.draft-player-hover__button:focus-visible {
  color: var(--color-primary, #a6d671);
  text-decoration: underline;
}

.draft-player-hover__tip-link {
  color: var(--color-primary, #a6d671);
  text-decoration: none;
  font-size: 0.72rem;
}

.draft-player-hover__tip-link:hover {
  text-decoration: underline;
}

.draft-player-hover__tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.4rem);
  transform: translateX(-50%) translateY(4px);
  z-index: 80;
  display: grid;
  gap: 0.2rem;
  min-width: 11rem;
  max-width: 16rem;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-sm, 6px);
  background: #16161a;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  color: var(--color-text);
  font-size: 0.72rem;
  line-height: 1.35;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.12s ease,
    transform 0.12s ease;
}

/* Portaled tips escape overflow:auto / zoom clipping and always paint on top. */
.draft-player-hover__tip.is-portal {
  position: fixed;
  bottom: auto;
  z-index: 10050;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -100%) translateY(-2px);
}

.draft-player-hover__tip.is-portal.is-below {
  transform: translate(-50%, 0) translateY(2px);
}

.draft-player-hover__tip.is-portal.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -100%) translateY(0);
}

.draft-player-hover__tip.is-portal.is-below.is-open {
  transform: translate(-50%, 0) translateY(0);
}

.draft-player-hover__tip-name {
  font-size: 0.8rem;
  word-break: break-word;
}

.draft-player-hover__tip-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  object-fit: cover;
  margin-bottom: 0.15rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.draft-player-hover:hover .draft-player-hover__tip,
.draft-player-hover:focus-within .draft-player-hover__tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Lift the team/slot above siblings so the tip is not covered by the next card. */
.tournament-draft-board__team:has(.draft-player-hover:hover),
.tournament-draft-board__team:has(.draft-player-hover:focus-within),
.tournament-team-stats__section:has(.draft-player-hover:hover),
.tournament-team-stats__section:has(.draft-player-hover:focus-within) {
  z-index: 30;
}

.tournament-draft-board__slot:has(.draft-player-hover:hover),
.tournament-draft-board__slot:has(.draft-player-hover:focus-within),
.tournament-team-stats__row:has(.draft-player-hover:hover),
.tournament-team-stats__row:has(.draft-player-hover:focus-within) {
  z-index: 5;
}

.tournament-draft-board__opgg {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.55rem;
}

.tournament-draft-board__opgg .match-opgg-btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.tournament-draft-board__player-opgg,
.tournament-draft-pool__player-opgg {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.25);
  color: var(--color-text-muted);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.tournament-draft-board__player-opgg:hover,
.tournament-draft-pool__player-opgg:hover {
  color: var(--color-accent, #d4af37);
  border-color: rgba(212, 175, 55, 0.45);
}

@media (max-width: 1100px) {
  .tournament-draft-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .tournament-draft-board {
    grid-template-columns: minmax(0, 1fr);
  }

  .tournament-draft-board.is-live .tournament-draft-board__team:hover {
    transform: none;
  }
}

.tournament-draft-pool {
  margin-top: 1.25rem;
  display: grid;
  gap: 0.85rem;
  text-align: left;
}

.tournament-draft-pool__head {
  display: grid;
  gap: 0.2rem;
  text-align: center;
}

.tournament-draft-pool__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: end;
}

.tournament-draft-pool__filter {
  display: grid;
  gap: 0.25rem;
  min-width: min(100%, 10rem);
  flex: 1 1 10rem;
  font-size: var(--text-xs);
}

.tournament-draft-pool__filter input,
.tournament-draft-pool__filter select {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-float-sm);
  font: inherit;
}

.tournament-draft-pool__roles {
  display: grid;
  gap: 1rem;
}

.tournament-draft-pool__role h4 {
  margin: 0 0 0.45rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.tournament-draft-pool__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.45rem;
}

.tournament-draft-pool__player {
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: start;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
  color: inherit;
  font: inherit;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.tournament-draft-pool__avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.tournament-draft-pool__avatar.is-empty {
  display: block;
  background: rgba(255, 255, 255, 0.06);
}

.tournament-draft-pool__player-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.15rem 0.5rem;
  min-width: 0;
}

.tournament-draft-pool__player.is-pickable:hover {
  transform: translateY(-1px);
  border-color: rgba(182, 255, 42, 0.35);
  background: rgba(182, 255, 42, 0.06);
}

.tournament-draft-pool__player .tournament-draft-pool__name,
.tournament-draft-pool__player .tournament-draft-pool__meta {
  grid-column: 1;
}

.tournament-draft-pool__player-opgg {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  justify-self: end;
}

.tournament-draft-pool__player.is-pickable {
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.15s ease;
}

.tournament-draft-pool__player.is-pickable:hover {
  border-color: rgba(182, 255, 42, 0.45);
  background: rgba(182, 255, 42, 0.1);
  transform: translateY(-1px);
}

.tournament-draft-pool__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.tournament-draft-pool__meta {
  font-size: var(--text-xs);
  line-height: 1.35;
}

.tournament-card__rules {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  line-height: var(--leading-snug);
  text-align: center;
}

.tournament-card__rules li::before {
  content: "• ";
  color: var(--color-accent);
}

.tournament-card__panel {
  display: grid;
  gap: var(--space-4);
}

.tournament-card__panel-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  text-align: center;
}

.tournament-card__details {
  margin: 0;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.tournament-card__details div {
  display: grid;
  gap: 0.15rem;
}

.tournament-card__details dt {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tournament-card__details dd {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.tournament-card__confirm {
  display: grid;
  gap: var(--space-3);
  text-align: center;
}

.tournament-card__confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.tournament-card .account-form__field textarea {
  width: 100%;
  min-height: 5.5rem;
  padding: 0.55rem 0.75rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-family: inherit;
  resize: vertical;
}

.tournament-card .account-form__field textarea:disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.92;
}

/* Public tournament shell: right rail nav + adaptive stage */
.tournament-page.is-test-mode {
  box-shadow: inset 0 3px 0 0 color-mix(in srgb, var(--color-accent, #b6ff2a) 55%, transparent);
}

.tournament-nav {
  --tournament-nav-width: 12.75rem;
  position: sticky;
  top: var(--header-offset, 0px);
  z-index: 30;
  flex: 0 0 var(--tournament-nav-width);
  width: var(--tournament-nav-width);
  align-self: flex-start;
  height: calc(100dvh - var(--header-offset, 0px));
  margin: 0;
  padding: 1rem 0.7rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: none;
  border-left: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-bg-elevated, #141418) 94%, transparent) 0%,
      color-mix(in srgb, var(--color-surface, #18181b) 90%, transparent) 100%
    );
  backdrop-filter: blur(14px);
  box-shadow: -12px 0 28px rgba(0, 0, 0, 0.22);
}

.tournament-nav--test {
  border-left-color: color-mix(in srgb, var(--color-accent, #b6ff2a) 35%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-accent, #b6ff2a) 6%, var(--color-bg-elevated, #141418)) 0%,
      color-mix(in srgb, var(--color-surface, #18181b) 90%, transparent) 100%
    );
}

.tournament-nav__brand {
  display: grid;
  gap: 0.65rem;
  padding: 0 0.35rem;
}

.tournament-nav__active {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tournament-mode-segment {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  padding: 0.15rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  width: 100%;
}

.tournament-mode-segment button {
  flex: 1 1 0;
  padding: 0.35rem 0.55rem;
  border: 0;
  border-radius: calc(var(--radius-md) - 2px);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

.tournament-mode-segment button.is-active,
.tournament-mode-segment button:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.08);
}

.tournament-nav__eyebrow {
  font-size: 0.68rem;
  font-weight: var(--weight-semibold, 600);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-accent, #b6ff2a) 78%, var(--color-text-muted));
}

.tournament-nav__event {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
  font-size: var(--text-xs);
}

.tournament-nav__event-label {
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.65rem;
  font-weight: 600;
}

.tournament-nav__event select {
  width: 100%;
  min-height: 2.35rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
  border-radius: calc(var(--radius-md) - 2px);
  background: color-mix(in srgb, var(--color-bg, #0c0c0e) 70%, var(--color-surface, #18181b));
  color: var(--color-text);
  font: inherit;
  font-size: 0.8rem;
}

.tournament-nav__event select:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-accent, #b6ff2a) 55%, transparent);
  outline-offset: 1px;
}

.tournament-nav__error {
  margin: 0 0.35rem;
  font-size: var(--text-xs);
  line-height: 1.35;
}

.tournament-tabs {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0.2rem;
  min-height: 0;
  padding: 0.15rem;
  overflow-y: auto;
  scrollbar-width: thin;
}

.tournament-tabs__tab {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  min-height: 2.55rem;
  padding: 0.55rem 0.75rem 0.55rem 0.85rem;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-md) - 2px);
  background: transparent;
  color: color-mix(in srgb, var(--color-text) 68%, var(--color-text-muted));
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--ease, 0.15s ease),
    color var(--ease, 0.15s ease),
    border-color var(--ease, 0.15s ease),
    box-shadow var(--ease, 0.15s ease);
}

.tournament-tabs__tab::before {
  content: "";
  position: absolute;
  top: 0.45rem;
  bottom: 0.45rem;
  left: 0.2rem;
  width: 2px;
  border-radius: 999px;
  background: transparent;
  transition: background var(--ease, 0.15s ease);
}

.tournament-tabs__tab:hover {
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-surface-hover, #27272a) 55%, transparent);
  border-color: color-mix(in srgb, var(--color-text) 10%, transparent);
}

.tournament-tabs__tab.is-active,
.tournament-tabs__tab[aria-selected="true"] {
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-surface-hover, #27272a) 88%, transparent);
  border-color: color-mix(in srgb, var(--color-accent, #b6ff2a) 40%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent, #b6ff2a) 12%, transparent);
}

.tournament-tabs__tab.is-active::before,
.tournament-tabs__tab[aria-selected="true"]::before {
  background: var(--color-accent, #b6ff2a);
}

.tournament-tabs__label {
  display: block;
}

.tournament-card__hero--start {
  text-align: center;
  justify-items: center;
}

.tournament-role-picker {
  display: grid;
  gap: 0.85rem;
}

.tournament-role-picker__group {
  display: grid;
  gap: 0.4rem;
}

.tournament-role-picker__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.tournament-role-picker__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tournament-role-picker__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.35rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
  border-radius: calc(var(--radius-md) - 2px);
  background: color-mix(in srgb, var(--color-bg, #0c0c0e) 55%, transparent);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition:
    background var(--ease, 0.15s ease),
    border-color var(--ease, 0.15s ease),
    box-shadow var(--ease, 0.15s ease);
}

.tournament-role-picker__btn img {
  display: block;
  flex: 0 0 auto;
}

.tournament-role-picker__btn:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--color-accent, #b6ff2a) 45%, transparent);
  background: color-mix(in srgb, var(--color-surface-hover, #27272a) 70%, transparent);
}

.tournament-role-picker__btn.is-active {
  border-color: color-mix(in srgb, var(--color-accent, #b6ff2a) 60%, transparent);
  background: color-mix(in srgb, var(--color-accent, #b6ff2a) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent, #b6ff2a) 18%, transparent);
}

.tournament-role-picker__btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.tournament-role-pair {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.tournament-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.6rem;
  padding: 0.15rem 0.5rem 0.15rem 0.3rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  background: color-mix(in srgb, var(--color-bg, #0c0c0e) 40%, transparent);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.tournament-role-badge img {
  display: block;
}

.tournament-rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.tournament-rank-badge__crest {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.tournament-rank-badge img {
  display: block;
  flex: 0 0 auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.tournament-rank-badge.is-manual-verify img {
  filter:
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4))
    drop-shadow(0 0 5px rgba(255, 255, 255, 0.2));
}

.tournament-rank-badge__sparkle {
  position: absolute;
  top: -0.12rem;
  right: -0.12rem;
  width: 0.34rem;
  height: 0.34rem;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.98) 0 22%, transparent 26%),
    linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)),
    linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%, 14% 100%, 100% 14%;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8));
  animation: member-rank-sparkle 2.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .tournament-rank-badge__sparkle {
    animation: none;
    opacity: 0.7;
  }
}

.tournament-rank-badge__text {
  display: grid;
  gap: 0.05rem;
  line-height: 1.15;
  min-width: 0;
}

.tournament-rank-badge__text strong {
  font-size: var(--text-sm);
  font-weight: 650;
}

.tournament-rank-badge__div {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}

.tournament-rank-badge__lp {
  font-size: 0.7rem;
  color: color-mix(in srgb, var(--color-accent, #b6ff2a) 75%, var(--color-text-muted));
  font-weight: 600;
}

.tournament-rank-badge.is-compact .tournament-rank-badge__text {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.2rem;
}

.tournament-rank-badge.is-compact .tournament-rank-badge__text strong {
  font-size: 0.62rem;
}

.tournament-rank-badge.is-compact .tournament-rank-badge__lp {
  font-size: 0.58rem;
}

.account-form__label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: var(--text-sm);
  font-weight: 600;
}

.tournament-panel-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: end;
  margin: 0.25rem 0 1rem;
}

.tournament-panel-filters__field {
  display: grid;
  gap: 0.25rem;
  min-width: min(100%, 10rem);
  flex: 1 1 10rem;
  font-size: var(--text-xs);
}

.tournament-panel-filters__field input,
.tournament-panel-filters__field select {
  width: 100%;
  min-height: 2.35rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
  border-radius: calc(var(--radius-md) - 2px);
  background: var(--color-surface, #18181b);
  color: var(--color-text);
  font: inherit;
}

.tournament-filter-chip.is-active {
  color: var(--color-text);
  border-color: color-mix(in srgb, var(--color-accent, #b6ff2a) 45%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent, #b6ff2a) 20%, transparent);
  background: color-mix(in srgb, var(--color-accent, #b6ff2a) 14%, var(--color-surface, #18181b));
}

.tournament-roster-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 0.5rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
}

.tournament-roster-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  text-align: left;
}

.tournament-roster-table th,
.tournament-roster-table td {
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: middle;
}

.tournament-roster-table th {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: rgba(255, 255, 255, 0.03);
  white-space: nowrap;
}

.tournament-roster-table th button {
  all: unset;
  cursor: pointer;
  color: inherit;
}

.tournament-roster-table th button:hover {
  color: var(--color-accent, #b6ff2a);
}

.tournament-roster-table tbody tr:hover {
  background: color-mix(in srgb, var(--color-accent, #b6ff2a) 6%, transparent);
}

.tournament-roster-table__main {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 10rem;
}

.tournament-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.tournament-status-pill.is-signed {
  background: rgba(255, 255, 255, 0.06);
}

.tournament-status-pill.is-checked {
  border-color: color-mix(in srgb, var(--color-accent, #b6ff2a) 40%, transparent);
  background: color-mix(in srgb, var(--color-accent, #b6ff2a) 12%, transparent);
  color: var(--color-text);
}

.tournament-status-pill.is-drafted {
  border-color: rgba(212, 175, 55, 0.4);
  background: rgba(212, 175, 55, 0.12);
  color: var(--color-text);
}

.tournament-roster-teams {
  display: grid;
  gap: 0.85rem;
  margin-top: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.tournament-roster-team {
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  text-align: left;
}

.tournament-roster-team__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.55rem;
}

.tournament-roster-team__head h2 {
  margin: 0;
  font-size: var(--text-base);
}

.tournament-roster-team__members {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.tournament-roster-team__members li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.35rem 0.45rem;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.18);
}

.tournament-roster-team__name {
  font-weight: 600;
}

.tournament-form {
  display: inline-flex;
  gap: 0.2rem;
}

.tournament-form__chip {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  font-size: 0.7rem;
  font-weight: 700;
}

.tournament-form__chip.is-win {
  background: color-mix(in srgb, var(--color-accent, #b6ff2a) 22%, transparent);
  color: var(--color-text);
}

.tournament-form__chip.is-loss {
  background: rgba(255, 80, 80, 0.18);
  color: var(--color-text);
}

.tournament-roster-view-segment {
  margin: 0.15rem 0 0.85rem;
}

.tournament-leaderboard-table th:nth-child(n + 3),
.tournament-leaderboard-table td:nth-child(n + 3) {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.tournament-leaderboard-table th:nth-child(1),
.tournament-leaderboard-table td:nth-child(1),
.tournament-leaderboard-table th:nth-child(2),
.tournament-leaderboard-table td:nth-child(2),
.tournament-leaderboard-table th:last-child,
.tournament-leaderboard-table td:last-child {
  text-align: left;
}

.tournament-team-stats {
  display: grid;
  gap: 0.85rem;
  margin-top: 0.5rem;
}

.tournament-team-stats__section {
  position: relative;
  z-index: 1;
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  text-align: left;
}

.tournament-team-stats__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.55rem;
}

.tournament-team-stats__name {
  font-size: var(--text-base);
}

.tournament-team-stats__record {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--text-sm);
}

.tournament-team-stats__empty {
  margin: 0;
  font-size: var(--text-sm);
}

.tournament-team-stats__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

.tournament-team-stats__row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.35rem 1.25rem minmax(0, 1.2fr) minmax(0, 1fr) 4.5rem minmax(0, 1fr) auto;
  gap: 0.45rem 0.55rem;
  align-items: center;
  padding: 0.3rem 0.4rem;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.18);
  font-size: var(--text-sm);
}

.tournament-team-stats__avatar {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.tournament-team-stats__avatar.is-empty {
  display: inline-block;
}

.tournament-team-stats__opgg {
  justify-self: end;
}

.tournament-team-stats__slot-num {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-align: center;
}

.tournament-team-stats__player {
  font-weight: 600;
  /* Tip is a child of .draft-player-hover — never clip it here. */
  overflow: visible;
  min-width: 0;
  max-width: 100%;
}

.tournament-team-stats__player .draft-player-hover__label,
.tournament-team-stats__player:not(.draft-player-hover) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tournament-team-stats__meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.tournament-team-stats__kda {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--color-text-muted);
}

.tournament-team-stats__champs-cell {
  min-width: 0;
}

.tournament-team-stats__champs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.tournament-team-stats__champ {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.tournament-team-stats__champ img {
  border-radius: 0.2rem;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .tournament-team-stats__row {
    grid-template-columns: 1.35rem minmax(0, 1fr) auto;
    grid-template-areas:
      "num name kda"
      "num meta champs";
  }

  .tournament-team-stats__slot-num {
    grid-area: num;
  }

  .tournament-team-stats__player {
    grid-area: name;
  }

  .tournament-team-stats__meta {
    grid-area: meta;
  }

  .tournament-team-stats__kda {
    grid-area: kda;
    justify-self: end;
  }

  .tournament-team-stats__champs-cell {
    grid-area: champs;
  }
}

.tournament-schedule {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  text-align: left;
}

.tournament-match-card {
  position: relative;
  display: grid;
  gap: 0.65rem;
  width: 100%;
  padding: 0.85rem 0.95rem 0.85rem 1.05rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.15s ease;
}

.tournament-match-card:hover,
.tournament-match-card:focus-visible {
  border-color: color-mix(in srgb, var(--color-accent, #b6ff2a) 40%, transparent);
  background: rgba(255, 255, 255, 0.055);
  outline: none;
}

.tournament-match-card__accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: rgba(255, 255, 255, 0.18);
}

.tournament-match-card.winner-a .tournament-match-card__accent {
  background: color-mix(in srgb, #4aa3ff 75%, #fff);
}

.tournament-match-card.winner-b .tournament-match-card__accent {
  background: color-mix(in srgb, #ff5a5a 75%, #fff);
}

.tournament-match-card.is-finished:not(.winner-a):not(.winner-b) .tournament-match-card__accent {
  background: rgba(182, 255, 42, 0.55);
}

.tournament-match-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
}

.tournament-match-card__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.4rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.22);
  font-size: 0.65rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.tournament-match-card__chip.is-status {
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 600;
}

.tournament-match-card__when {
  margin-left: auto;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent, #b6ff2a);
}

.tournament-match-card__body {
  display: grid;
  gap: 0.65rem;
  align-items: stretch;
}

@media (min-width: 720px) {
  .tournament-match-card__body {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.75rem;
  }
}

.tournament-match-card__score {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 3.25rem;
  padding: 0.35rem 0.55rem;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-variant-numeric: tabular-nums;
}

.tournament-match-card__score strong {
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

.tournament-match-card__team {
  min-width: 0;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
  border-left-width: 3px;
}

.tournament-match-card__team.is-blue {
  border-left-color: #4aa3ff;
}

.tournament-match-card__team.is-red {
  border-left-color: #ff5a5a;
}

.tournament-match-card__team.is-winner {
  background: rgba(182, 255, 42, 0.06);
  border-color: rgba(182, 255, 42, 0.22);
}

.tournament-match-card__team-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}

.tournament-match-card__team-head strong {
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tournament-match-card__winner-tag {
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-accent, #b6ff2a);
}

.tournament-match-card__empty {
  margin: 0;
  font-size: var(--text-xs);
}

.tournament-match-card__players {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.28rem;
}

.tournament-match-card__subs {
  margin-top: 0.4rem;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tournament-match-card__subs-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-bottom: 0.25rem;
}

.tournament-match-card__player {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.3rem;
  min-height: 1.45rem;
  min-width: 0;
  font-size: 0.74rem;
}

.tournament-match-card__avatar,
.tournament-match-card__champ {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.tournament-match-card__champ {
  border-radius: 4px;
}

.tournament-match-card__avatar.is-empty {
  display: inline-block;
}

.tournament-match-card__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.tournament-match-card__kda {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-size: 0.68rem;
  white-space: nowrap;
}

.tournament-match-card__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  align-items: center;
}

.tournament-match-card__notes {
  font-size: var(--text-xs);
}

.tournament-history-matches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.tournament-schedule__match {
  display: grid;
  gap: 0.35rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
}

.tournament-schedule__match.is-clickable {
  cursor: pointer;
}

.tournament-schedule__match.is-clickable:hover,
.tournament-schedule__match.is-clickable:focus-visible {
  border-color: color-mix(in srgb, var(--color-accent, #b6ff2a) 35%, transparent);
  background: rgba(255, 255, 255, 0.05);
}

@media (min-width: 640px) {
  .tournament-schedule__match {
    grid-template-columns: 11rem minmax(0, 1fr);
    align-items: start;
    gap: 0.85rem;
  }
}

.tournament-schedule__match.is-completed {
  opacity: 0.82;
}

.tournament-schedule__when {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent, #b6ff2a);
}

.tournament-schedule__body {
  display: grid;
  gap: 0.2rem;
}

.tournament-schedule__notes {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.tournament-history-list {
  display: grid;
  gap: 1.25rem;
  margin-top: 0.75rem;
  text-align: left;
}

.tournament-history-season {
  display: grid;
  gap: 0.75rem;
}

.tournament-history-season__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 650;
  letter-spacing: 0.01em;
}

.tournament-history-series {
  display: grid;
  gap: 0.65rem;
}

.tournament-history-series__title {
  margin: 0.15rem 0 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tournament-history-card {
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

.tournament-history-card__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
}

.tournament-history-card__toggle {
  flex: 1 1 14rem;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 0.85rem;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.tournament-history-card__toggle:hover {
  background: rgba(255, 255, 255, 0.04);
}

.tournament-history-card__title-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.tournament-history-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.45rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.tournament-history-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  margin-top: 0.35rem;
  font-size: var(--text-sm);
}

.tournament-history-card__champion {
  color: color-mix(in srgb, var(--color-accent, #b6ff2a) 75%, #fff);
  font-weight: 600;
}

.tournament-history-card__meta {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--text-sm);
}

.tournament-history-card__head > .btn {
  margin: 0.55rem 0.65rem 0.55rem 0;
  align-self: center;
}

.tournament-history-card__body {
  padding: 0 0.85rem 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.tournament-history-match-row.is-clickable {
  cursor: pointer;
}

.tournament-history-match-row.is-clickable:hover,
.tournament-history-match-row.is-clickable:focus-visible {
  background: rgba(255, 255, 255, 0.04);
}

.tournament-career {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
}

.tournament-career__head {
  display: grid;
  gap: 0.2rem;
}

.tournament-career__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
}

.tournament-career__hint {
  margin: 0;
  font-size: var(--text-sm);
}

.tournament-career__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
}

.tournament-career__stats > div {
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.tournament-career__stats dt {
  margin: 0;
  font-size: 0.72rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tournament-career__stats dd {
  margin: 0.15rem 0 0;
  font-size: 1.05rem;
  font-weight: 650;
}

.tournament-career__champs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tournament-career__champs li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  font-size: var(--text-sm);
}

.tournament-career__champs img {
  border-radius: 0.25rem;
}

.tournament-career__events {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tournament-career__events li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

.tournament-career__event-main {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.tournament-career__event-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tournament-career__place {
  flex: 0 0 auto;
  font-weight: 650;
  font-size: var(--text-sm);
}

@media (max-width: 640px) {
  .tournament-career__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tournament-standings-team-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-accent, #b6ff2a) 45%, transparent);
  text-underline-offset: 0.15em;
}

.tournament-standings-team-link:hover,
.tournament-standings-team-link:focus-visible {
  color: var(--color-accent, #b6ff2a);
}

.tournament-card__archive-meta {
  display: grid;
  gap: 0.55rem;
  justify-items: center;
}

.tournament-card__archive-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
  margin-top: 0.35rem;
}

.tournament-card__podium-panel {
  margin-top: 0.5rem;
}

.tournament-podium {
  margin-top: var(--space-4);
  margin-bottom: 0;
}

.tournament-podium__place {
  margin: 0 0 0.2rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tournament-podium__team {
  margin: 0;
  font-weight: 650;
}

.tournament-podium__captain {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
}

.tournament-podium .stat-num {
  margin: 0.45rem 0 0;
}

@media (max-width: 900px) {
  .tournament-shell {
    flex-direction: column;
  }

  .tournament-nav {
    --tournament-nav-width: 100%;
    order: -1;
    position: sticky;
    top: var(--header-offset, 0px);
    width: 100%;
    height: auto;
    max-height: none;
    flex: 0 0 auto;
    padding: 0.65rem 0.75rem 0.75rem;
    border-left: none;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
    background: color-mix(in srgb, var(--color-bg-elevated, #141418) 92%, transparent);
  }

  .tournament-nav__brand {
    gap: 0.45rem;
  }

  .tournament-tabs {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0.25rem;
    padding-bottom: 0.15rem;
    -webkit-overflow-scrolling: touch;
  }

  .tournament-tabs__tab {
    width: auto;
    min-height: 2.25rem;
    padding: 0.45rem 0.85rem;
    text-align: center;
  }

  .tournament-tabs__tab::before {
    top: auto;
    bottom: 0.15rem;
    left: 0.55rem;
    right: 0.55rem;
    width: auto;
    height: 2px;
  }
}

@media (min-width: 768px) {
  .tournament-splash__img {
    object-position: center 15%;
  }

  .tournament-page__content {
    padding-block: var(--space-12);
  }
}

/* Footer */
.site-footer {
  margin-top: auto;
  border: none;
  padding: var(--space-12) var(--space-4) var(--space-8);
  background: var(--color-bg);
  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.35), 0 -2px 8px rgba(0, 0, 0, 0.2);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-8);
}

.site-footer__brand-copy {
  display: block;
}

body .site-footer__brand {
  position: relative;
  align-items: center;
}

.site-footer__visits {
  position: absolute;
  top: calc(100% + 0.55rem);
  left: calc(36px + 0.75rem);
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 1.3;
  white-space: nowrap;
}

.site-footer__visits strong {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
}

.site-footer a {
  color: #c4c4cc;
  font-size: var(--text-sm);
}

.site-footer a:hover {
  color: var(--color-text);
}

.site-footer .muted,
.site-footer__meta,
.site-footer__legal {
  color: var(--color-text-muted);
}

.site-footer__meta {
  margin-top: var(--space-8);
  font-size: var(--text-xs);
}

.site-footer__legal {
  margin-top: 0.85rem;
  max-width: 72rem;
  font-size: 0.75rem;
  line-height: 1.5;
}

.donate-page__container {
  width: min(calc(100% - 2rem), 92rem);
  max-width: 92rem;
}

.donate-panel {
  position: relative;
  width: 100%;
  max-width: none;
  margin: clamp(1rem, 2vw, 2rem) auto 0;
}

.donate-eyebrow {
  margin: 0 0 0.55rem;
  color: var(--color-text-subtle, #9aa6b2);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.donate-column--plus .donate-column__heading h2 span {
  color: #4a9dff;
  text-shadow: 0 0 32px rgba(45, 126, 255, 0.38);
}

.donate-art {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  margin: 0 0 clamp(1.6rem, 3vw, 2.35rem);
  overflow: hidden;
  border: 1px solid rgba(144, 174, 208, 0.2);
  border-radius: 1.25rem;
  background: #080d13;
  box-shadow:
    0 24px 70px rgba(0, 4, 12, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  isolation: isolate;
}

.donate-art::before {
  position: absolute;
  z-index: -1;
  inset: 20% 12%;
  content: "";
  background: radial-gradient(ellipse, rgba(26, 100, 237, 0.22), transparent 70%);
  filter: blur(46px);
}

.donate-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.donate-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: clamp(1.5rem, 3.2vw, 3.25rem);
  max-width: 92rem;
  margin: 0 auto;
  align-items: stretch;
}

.donate-column {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  min-width: 0;
}

.donate-column__content { min-width: 0; }

.donate-column__heading {
  margin: 0 0 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(155, 174, 201, 0.13);
}
.donate-title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.55rem 0.85rem;
}
.donate-title-line .donate-eyebrow { margin: 0; }
.donate-column__heading h2 {
  margin: 0;
  font-size: clamp(2.15rem, 3.2vw, 3.15rem);
  font-weight: 760;
  letter-spacing: -0.045em;
  line-height: 1.06;
}
.donate-column__heading > .muted {
  max-width: 35rem;
  margin: 0.8rem 0 0;
  line-height: 1.65;
}

.donate-plus-summary {
  margin: 0.75rem 0 0;
  color: #b8c4d2;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
.donate-plus-summary strong { color: #f1f5fa; font-weight: 700; }
.donate-plus-summary span { color: #66788d; }

.donate-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.5rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}
.donate-benefits li {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.12rem;
  min-height: 2.75rem;
  padding: 0.45rem 0 0.45rem 1.05rem;
  border-top: 1px solid rgba(155, 174, 201, 0.1);
  color: #e0e7ef;
  font-size: 0.86rem;
  line-height: 1.4;
}
.donate-benefits li::before {
  position: absolute;
  top: 0.82rem;
  left: 0;
  width: 0.4rem;
  height: 0.4rem;
  border: 1px solid rgba(125, 170, 214, 0.72);
  border-radius: 50%;
  background: rgba(65, 116, 165, 0.2);
  content: "";
}
.donate-benefits li:nth-child(-n + 2) { border-top: 0; }
.donate-benefits li strong { font-weight: 650; }
.donate-benefits li span { color: #9caabc; font-size: 0.77rem; }
.donate-perk-soon {
  color: #8fa0b3;
  font-weight: 550;
  font-size: 0.78em;
}

.donate-alert {
  margin: 1rem 0;
  padding: 0.5rem 0 0.5rem 0.85rem;
  border-left: 2px solid rgba(255, 190, 90, 0.82);
  color: #ffd7a0;
  font-size: 0.9rem;
  line-height: 1.5;
}
.donate-alert--error { border-color: #ff7588; color: #ffb0ba; }
.donate-alert code { overflow-wrap: anywhere; }

.donate-presets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 1.35rem 0 1rem;
}

.donate-presets .btn {
  min-width: 0;
  min-height: 3rem;
  border: 1px solid rgba(176, 195, 222, 0.17);
  border-radius: 0.75rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018));
  color: #c9d3df;
  font-variant-numeric: tabular-nums;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}
.donate-presets .btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(74, 157, 255, 0.55);
}
.donate-presets .btn.btn-accent {
  border-color: rgba(118, 166, 214, 0.62);
  background: linear-gradient(145deg, #263d56, #1b2d42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 25px rgba(4, 16, 29, 0.18);
  color: #f3f6fa;
}

.donate-form {
  display: grid;
  gap: 0.8rem;
  max-width: none;
  margin-inline: 0;
}
.donate-form__controls {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(11rem, 0.8fr);
  align-items: end;
  gap: 0.75rem;
}
.donate-custom { display: grid; gap: 0.45rem; color: #aebdcd; font-size: 0.78rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; }
.donate-amount-input {
  display: flex;
  min-height: 3.65rem;
  align-items: center;
  gap: 0.25rem;
  padding: 0 1rem;
  border: 1px solid rgba(153, 181, 210, 0.22);
  border-radius: 0.9rem;
  background: rgba(6, 12, 20, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.donate-amount-input:focus-within {
  border-color: rgba(131, 169, 209, 0.6);
  box-shadow: 0 0 0 3px rgba(80, 125, 171, 0.14);
}
.donate-amount-input > span:first-child { color: #95a6ba; font-size: 1rem; font-weight: 650; }
.donate-amount-input input {
  width: 100%;
  min-width: 0;
  min-height: 3.5rem;
  padding-inline: 0.35rem;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: #f1f5f9;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.donate-amount-input__currency {
  color: #75869a;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.11em;
}
.donate-form > .btn-accent {
  min-height: 3.25rem;
  border-radius: 0.9rem;
  font-weight: 750;
}

.donate-form > .btn-accent,
.donate-plus-actions .btn-accent {
  border: 1px solid rgba(131, 169, 209, 0.43);
  background: linear-gradient(135deg, #20374f, #294f70);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 8px 22px rgba(2, 7, 14, 0.24);
  color: #f4f7fb;
}
.donate-form > .btn-accent:hover:not(:disabled),
.donate-plus-actions .btn-accent:hover:not(:disabled) {
  border-color: rgba(164, 194, 226, 0.65);
  background: linear-gradient(135deg, #294663, #315d82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 25px rgba(2, 7, 14, 0.3);
  filter: none;
  transform: translateY(-1px);
}

.donate-form > .muted { margin: 0; }
.donate-form .donate-anonymous {
  display: flex;
  min-height: 3.65rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.75rem 0.85rem 0.75rem 1rem;
  border: 1px solid rgba(153, 181, 210, 0.18);
  border-radius: 0.9rem;
  background: linear-gradient(145deg, rgba(28, 39, 53, 0.64), rgba(13, 20, 29, 0.62));
  color: #cbd5e1;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.donate-anonymous:hover { border-color: rgba(130, 169, 209, 0.45); transform: translateY(-1px); }
.donate-anonymous input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.donate-anonymous__copy { display: grid; min-width: 0; gap: 0.12rem; }
.donate-anonymous__copy strong { font-size: 0.86rem; font-weight: 680; }
.donate-anonymous__copy small { color: #8292a5; font-size: 0.68rem; line-height: 1.35; }
.donate-anonymous__toggle {
  position: relative;
  flex: 0 0 auto;
  width: 2.35rem;
  height: 1.35rem;
  border: 1px solid rgba(147, 172, 199, 0.32);
  border-radius: 999px;
  background: rgba(3, 8, 14, 0.7);
  transition: border-color 160ms ease, background 160ms ease;
}
.donate-anonymous__toggle::after {
  position: absolute;
  top: 0.18rem;
  left: 0.2rem;
  width: 0.86rem;
  height: 0.86rem;
  border-radius: 50%;
  background: #9aabba;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.38);
  content: "";
  transition: background 160ms ease, transform 160ms ease;
}
.donate-anonymous input:checked + .donate-anonymous__toggle {
  border-color: rgba(105, 161, 218, 0.72);
  background: #284e71;
}
.donate-anonymous input:checked + .donate-anonymous__toggle::after {
  background: #eef6ff;
  transform: translateX(0.96rem);
}
.donate-anonymous:has(input:focus-visible) { outline: 2px solid #709bc4; outline-offset: 3px; }

.donate-plus-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0.65rem;
  margin: 1.35rem 0 0;
}
.donate-plan-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0.85rem 0 0.35rem;
}
.donate-plan-picker .btn {
  min-height: 2.6rem;
  width: 100%;
  padding-inline: 0.55rem;
  border-radius: 0.75rem;
  font-size: 0.84rem;
  justify-content: center;
}
.donate-gift-card {
  margin-top: 0.85rem;
  padding: 1rem 1.05rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(200, 170, 110, 0.22);
  background: rgba(0, 0, 0, 0.18);
  display: grid;
  gap: 0.7rem;
}
.donate-gift-card__intro {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
}
.donate-gift-card__field {
  display: grid;
  gap: 0.35rem;
  font-size: 0.86rem;
}
.donate-gift-card__hint {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.4;
}
.donate-gift-card__field input {
  width: 100%;
  min-height: 2.6rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.28);
  color: inherit;
  padding: 0.45rem 0.7rem;
}
.donate-gift-card > .btn {
  justify-self: start;
  min-height: 3rem;
}
.donate-benefits--compact {
  margin-top: 0.55rem;
}
.donate-plus-actions .btn { min-height: 3.2rem; padding-inline: 1.3rem; border-radius: 0.9rem; }

@media (max-width: 720px) {
  .donate-plan-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.donate-member-status { margin: 0.9rem 0; color: #b4ec7a; font-size: 0.9rem; }
.donate-member-status--inactive { color: #c5d0dc; }
.donate-member-status--pastdue { color: #f0c674; }

.donate-community {
  position: relative;
  align-self: start;
  width: 100%;
  margin-top: 2rem;
  padding: 1.35rem clamp(1rem, 2vw, 1.6rem) 1.1rem;
  overflow: hidden;
  border: 1px solid rgba(151, 177, 205, 0.17);
  border-radius: 1rem;
  background:
    linear-gradient(145deg, rgba(24, 34, 47, 0.72), rgba(10, 16, 23, 0.72)),
    radial-gradient(circle at 80% 0%, rgba(54, 115, 175, 0.1), transparent 44%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 18px 50px rgba(1, 5, 10, 0.2);
  backdrop-filter: blur(18px);
}
.donate-community::before {
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(158, 190, 224, 0.55), transparent);
  content: "";
}

.donate-community__heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  margin-bottom: 0.8rem;
}
.donate-community__heading h3 { margin: 0; font-size: 1.25rem; letter-spacing: -0.02em; }
.donate-community__heading .donate-eyebrow { margin-bottom: 0.32rem; }
.donate-count { color: var(--color-text-subtle, #9aa6b2); font-size: 0.67rem; font-weight: 750; letter-spacing: 0.12em; white-space: nowrap; }

.donate-ranking,
.donate-members {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.donate-ranking li {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.78rem 0;
  border-bottom: 1px solid rgba(155, 174, 201, 0.11);
}

.donate-ranking__rank {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border: 1px solid rgba(153, 180, 208, 0.17);
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.035);
  color: #b6c7d9;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.donate-ranking__person { display: grid; min-width: 0; gap: 0.18rem; }
.donate-ranking__person strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donate-ranking__person small { color: var(--color-text-subtle, #9aa6b2); font-size: 0.75rem; }
.donate-ranking__amount { color: #e9eef4; white-space: nowrap; font-variant-numeric: tabular-nums; }

.donate-profile-meta,
.donate-member__name-line {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.42rem;
}
.donate-profile-badges {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.14rem;
}
.donate-profile-badges .irg-badge {
  display: block;
  width: 1.18rem;
  height: 1.18rem;
  object-fit: contain;
}
.donate-profile-title {
  overflow: hidden;
  color: #9db0c4;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.donate-members {
  max-height: 28rem;
  overflow: auto;
  padding-right: 0.5rem;
}

.donate-members li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.78rem 0;
  border-bottom: 1px solid rgba(155, 174, 201, 0.11);
}

.donate-member__identity { display: grid; min-width: 0; gap: 0.2rem; }
.donate-member__name-line { flex-wrap: wrap; }
.donate-member__name-line strong { min-width: 0; overflow-wrap: anywhere; }
.donate-members li .donate-member-tenure {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.42rem;
  color: #bdc9d6;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.donate-member__months {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.08rem;
  font-size: 0.72rem;
  font-style: italic;
  line-height: 1.25;
}
.donate-member__gifted-by {
  color: #9db0c4;
  font-size: 0.7rem;
  font-style: italic;
  white-space: nowrap;
}
.donate-member__subscription-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  padding: 0.16rem 0.48rem;
  border: 1px solid rgba(83, 157, 255, 0.42);
  border-radius: 999px;
  color: #cfe3ff;
  background: rgba(37, 105, 190, 0.2);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.donate-privacy-note { margin: 0.8rem 0 0; color: var(--color-text-subtle, #9aa6b2); font-size: 0.76rem; line-height: 1.5; }

@media (max-width: 900px) {
  .donate-page__container { width: min(calc(100% - 1.25rem), 44rem); }
  .donate-columns { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .donate-column { display: block; }
  .donate-column--plus {
    margin-top: 3rem;
    padding: 3rem 0 0;
    border-top: 1px solid rgba(155, 174, 201, 0.18);
    border-left: 0;
  }
  .donate-form__controls { grid-template-columns: minmax(0, 1fr); }
  .donate-presets { gap: 0.45rem; }
  .donate-presets .btn { min-width: 4rem; }
}

@media (max-width: 480px) {
  .donate-art { width: 100%; margin-bottom: 1.5rem; border-radius: 0.9rem; }
  .donate-column__heading h2 { font-size: 2.15rem; }
  .donate-ranking li { grid-template-columns: 1.75rem minmax(0, 1fr) auto; gap: 0.55rem; }
  .donate-benefits { grid-template-columns: minmax(0, 1fr); }
  .donate-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.admin-donations__section { margin-top: 1.5rem; }
.admin-donations__section h3 { margin: 0 0 0.75rem; }
.donations-table { min-width: 920px; table-layout: auto; }
.donations-table__subline { display: block; margin-top: 0.2rem; color: var(--color-text-subtle, #9aa6b2); }
.donations-record-details summary { cursor: pointer; color: var(--color-text-muted, #c7d2cc); }
.donations-record-details > div { display: grid; gap: 0.35rem; min-width: 18rem; margin-top: 0.5rem; }
.donations-record-details code { white-space: normal; overflow-wrap: anywhere; }
.donations-pagination { justify-content: space-between; margin-top: 0.75rem; }
.donations-pagination > div { display: flex; gap: 0.5rem; }

.admin-field--wide {
  min-width: 0;
  flex: 1 1 14rem;
  margin: 0;
}

.admin-page__nav-toggle {
  display: none;
}

.admin-hub__nav-backdrop {
  display: none;
}

.admin-field {
  min-width: 0;
}

@media (min-width: 768px) {
  .site-header__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-6);
  }

  .site-header__inner > .brand {
    min-width: 0;
  }

  .nav,
  .header-actions {
    display: flex;
  }

  .site-header__inner .nav {
    min-width: 0;
    justify-self: center;
  }

  .header-actions {
    justify-self: end;
    flex-shrink: 0;
  }

  .nav-toggle {
    display: none;
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .queue-board:not(.queue-board--single),
  .member-grid,
  .achieve-grid,
  .team-grid,
  .activity-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-row {
    grid-template-columns: repeat(4, 1fr);
  }

  .site-footer__inner {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    align-items: start;
  }

  .site-footer nav {
    flex-wrap: wrap;
    justify-content: flex-end;
    white-space: normal;
  }
}

@media (min-width: 1100px) {
  .site-footer nav {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}

@media (min-width: 1024px) {
  .grid-4,
  .activity-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Desktop header: full-size nav only when brand + links + HUD fit comfortably. */
@media (min-width: 1440px) {
  .site-header__inner {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    width: min(100% - var(--space-8), 90rem);
  }

  .site-header__inner > .brand {
    justify-self: start;
  }

  .brand__name {
    max-width: none;
  }

  .site-header__inner .nav {
    justify-content: center;
    justify-self: center;
    min-width: 0;
    gap: 0.15rem;
  }

  .site-header__inner .nav a,
  .site-header__inner .nav-trigger {
    gap: 0.35rem;
    padding-inline: 0.55rem;
    font-size: var(--text-sm);
    white-space: nowrap;
  }

  .site-header__inner .header-actions {
    justify-self: end;
  }
}

/* Collapse primary nav until there is room for full-size controls.
   Prefer the hamburger over shrinking link text. */
@media (min-width: 768px) and (max-width: 1439px) {
  .site-header__inner {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .brand__name {
    max-width: min(14rem, 42vw);
  }

  .site-header__inner .nav,
  .site-header__inner .header-actions:not(.is-authed) {
    display: none;
  }

  .site-header__inner .header-actions.is-authed {
    display: flex;
    margin-left: auto;
    gap: 0.35rem;
    flex-shrink: 0;
  }

  .site-header__inner .header-actions.is-authed .header-status,
  .site-header__inner .header-actions.is-authed .notif-bell {
    display: none;
  }

  .site-header__inner .nav-toggle {
    display: inline-flex;
    flex-shrink: 0;
  }
}

/* Comfort band: drop brand text / LIVE / header invite before anything shrinks. */
@media (min-width: 1440px) and (max-width: 1599px) {
  .site-header__inner .brand__name {
    display: none;
  }

  .site-header__inner .header-status,
  .site-header__inner .header-actions:not(.is-authed) [data-discord-invite] {
    display: none;
  }

  .site-header__inner .header-hud__label {
    display: none;
  }
}

/* In nested editor Live view, sticky can cover content — keep static there */
.page-editor__live-view-body .home-split > .discord-widget,
.page-editor__live-view-body .home-split > aside.discord-widget {
  position: static;
  top: auto;
}


[hidden] {
  display: none !important;
}

.header-actions.is-authed [data-sign-in],
.mobile-panel.is-authed [data-sign-in-mobile] {
  display: none !important;
}

.header-actions:not(.is-authed) [data-account-menu],
.mobile-panel:not(.is-authed) [data-account-menu-mobile] {
  display: none !important;
}

.header-actions:not(.is-authed) [data-header-hud] {
  display: none !important;
}

/* IRG account & profile */
.account-menu { position: relative; flex-shrink: 0; }
.account-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  width: max-content;
  min-width: max-content;
  flex-shrink: 0;
  height: 2.4rem;
  padding: 0.25rem 0.55rem 0.25rem 0.25rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  line-height: 1;
  overflow: visible;
}
.account-trigger__avatar {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  position: relative;
  z-index: 1;
}
.account-trigger__name {
  display: none;
}
.account-trigger__level {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.55rem;
  min-width: 3.25rem;
  padding: 0.15rem 0.55rem;
  font-size: 0.7rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--lvl-tint-color, var(--color-accent, #b6ff2a));
  border-radius: var(--radius-full);
  background: var(--lvl-tint-bg, rgba(163, 230, 53, 0.12));
  border: none;
  box-shadow: var(--shadow-float-xs), inset 0 0 0 1px var(--lvl-tint-ring, rgba(163, 230, 53, 0.3));
}

.lvl-tint--base {
  --lvl-tint-color: #a3e635;
  --lvl-tint-bg: rgba(163, 230, 53, 0.12);
  --lvl-tint-ring: rgba(163, 230, 53, 0.3);
}
.lvl-tint--green {
  --lvl-tint-color: #4ade80;
  --lvl-tint-bg: rgba(74, 222, 128, 0.14);
  --lvl-tint-ring: rgba(74, 222, 128, 0.35);
}
.lvl-tint--teal {
  --lvl-tint-color: #2dd4bf;
  --lvl-tint-bg: rgba(45, 212, 191, 0.14);
  --lvl-tint-ring: rgba(45, 212, 191, 0.35);
}
.lvl-tint--blue {
  --lvl-tint-color: #60a5fa;
  --lvl-tint-bg: rgba(96, 165, 250, 0.14);
  --lvl-tint-ring: rgba(96, 165, 250, 0.35);
}
.lvl-tint--violet {
  --lvl-tint-color: #c084fc;
  --lvl-tint-bg: rgba(192, 132, 252, 0.14);
  --lvl-tint-ring: rgba(192, 132, 252, 0.35);
}
.lvl-tint--gold {
  --lvl-tint-color: #fbbf24;
  --lvl-tint-bg: rgba(251, 191, 36, 0.16);
  --lvl-tint-ring: rgba(251, 191, 36, 0.4);
}
.lvl-tint--orange {
  --lvl-tint-color: #fb923c;
  --lvl-tint-bg: rgba(251, 146, 60, 0.16);
  --lvl-tint-ring: rgba(251, 146, 60, 0.4);
}
.lvl-tint--mythic {
  --lvl-tint-color: #f0abfc;
  --lvl-tint-bg: rgba(240, 171, 252, 0.18);
  --lvl-tint-ring: rgba(240, 171, 252, 0.45);
}
.account-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  min-width: 12rem;
  padding: calc(0.35rem + var(--space-2)) var(--space-2) var(--space-2);
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-float);
  z-index: 40;
  display: none;
  gap: 0.15rem;
}
.account-dropdown__level {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 0.35rem;
  padding: 0.35rem 0.55rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.account-dropdown__level-label {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.account-dropdown__level-value {
  font-style: italic;
  font-weight: var(--weight-semibold);
  color: var(--lvl-tint-color, #86efac);
  font-variant-numeric: tabular-nums;
}
.account-mobile__level {
  margin: 0;
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}
.account-mobile__level span {
  font-style: italic;
  font-weight: var(--weight-semibold);
  color: #86efac;
}
.account-menu:hover .account-dropdown,
.account-menu:focus-within .account-dropdown {
  display: grid;
}

/* Header HUD: Points + Level */
.header-hud {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.header-hud__stat {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.2rem 0.65rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-size: var(--text-sm);
}
.header-hud__label {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.header-hud__value {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  min-width: 1.25rem;
  text-align: right;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.header-hud__value .irg-sliding-number {
  font-weight: inherit;
  line-height: 1;
  height: 1em;
}

/* Notification bell + drawer */
.notif-bell {
  position: relative;
  flex-shrink: 0;
}
.notif-bell__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-float-sm);
  cursor: pointer;
}
.notif-bell__trigger:hover {
  background: var(--color-surface-2, rgba(255, 255, 255, 0.08));
}
.notif-bell__badge {
  position: absolute;
  top: -0.15rem;
  right: -0.2rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.25rem;
  border-radius: var(--radius-full);
  background: #b6ff2a;
  color: #0b1008;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.1rem;
  text-align: center;
}
.notif-drawer {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  width: min(22rem, calc(100vw - 1.5rem));
  max-height: min(28rem, 70vh);
  display: flex;
  flex-direction: column;
  background: var(--color-surface, #12161d);
  border-radius: 0.75rem;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  z-index: 90;
  overflow: hidden;
}
.notif-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.notif-drawer__action {
  border: none;
  background: transparent;
  color: var(--color-text-subtle, #9aa3b2);
  font-size: var(--text-xs);
  cursor: pointer;
  padding: 0;
}
.notif-drawer__action:hover {
  color: var(--color-text);
}
.notif-drawer__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  padding: 0.4rem 0.55rem 0;
}
.notif-drawer__tabs button {
  border: none;
  background: transparent;
  color: var(--color-text-subtle);
  padding: 0.45rem 0.5rem;
  border-radius: 0.5rem;
  font-size: var(--text-xs);
  cursor: pointer;
}
.notif-drawer__tabs button.is-active {
  background: rgba(182, 255, 42, 0.12);
  color: var(--color-text);
}
.notif-drawer__list {
  overflow: auto;
  padding: 0.4rem;
  display: grid;
  gap: 0.25rem;
}
.notif-drawer__empty {
  margin: 0;
  padding: 1.25rem 0.75rem;
  text-align: center;
  font-size: var(--text-sm);
}
.notif-item {
  display: grid;
  gap: 0.2rem;
  text-align: left;
  padding: 0.65rem 0.7rem;
  border: none;
  border-radius: 0.55rem;
  background: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
}
.notif-item:hover {
  background: rgba(255, 255, 255, 0.05);
}
.notif-item.is-unread {
  background: rgba(182, 255, 42, 0.08);
}
.notif-item.is-read {
  opacity: 0.78;
}
.notif-section {
  display: grid;
  gap: 0.25rem;
}
.notif-section + .notif-section {
  margin-top: 0.35rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.notif-section__label {
  padding: 0.25rem 0.55rem 0.15rem;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.notif-item__title {
  font-size: var(--text-sm);
  font-weight: 600;
}
.notif-item__body {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notif-item__meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.65rem;
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.notif-item__cat {
  opacity: 0.85;
}
.irg-notif-toast-stack {
  z-index: 95;
}

.btn-sm {
  min-height: 1.85rem;
  padding: 0 0.65rem;
  font-size: var(--text-xs);
}

/* Achievement groups (profile) */
.achieve-groups {
  display: grid;
  gap: var(--space-6);
}
.achieve-group__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-base);
}
.achieve-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.achieve-card--compact {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex: 1 1 16rem;
  max-width: 22rem;
  padding: var(--space-3) var(--space-4);
}
.achieve-card__main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 0.35rem;
}
.achieve-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
}
.achieve-card__title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
}
.achieve-card__desc {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.45;
  overflow-wrap: break-word;
}
.achieve-card__progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}
.achieve-card__actions {
  flex-shrink: 0;
  padding-top: 0.1rem;
}
.achieve-reward {
  font-size: var(--text-xs);
  color: #86efac;
  white-space: nowrap;
}
.achieve-reward--none {
  color: var(--color-text-subtle);
}
.achieve-claim {
  min-width: 4.25rem;
}
.achieve-claim:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.achieve-claim.is-ready {
  border-color: rgba(182, 255, 42, 0.45);
  background: rgba(182, 255, 42, 0.12);
  color: var(--color-accent);
}
.achieve-claim.is-ready:hover {
  background: rgba(182, 255, 42, 0.2);
}
.achieve-claim.is-claimed:disabled {
  opacity: 0.65;
}
.xp-bar--compact {
  flex: 1 1 4rem;
  max-width: 6rem;
  height: 0.35rem;
  margin: 0;
}

.account-dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 0.35rem;
}
.account-dropdown a,
.account-dropdown button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.75rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  min-height: 2.5rem;
}
.account-dropdown a:hover,
.account-dropdown button:hover { background: var(--color-surface-hover); }
.account-dropdown a[href="/admin"] {
  color: var(--color-accent);
}
.account-mobile {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.account-mobile__links {
  display: grid;
  gap: 0.15rem;
}
.account-mobile__links a,
.account-mobile__links button {
  display: block;
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.account-mobile__links a:hover,
.account-mobile__links button:hover {
  background: var(--color-surface-hover);
  color: var(--color-accent);
}
.profile-shell { display: grid; gap: var(--space-6); }
.profile-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.profile-tab {
  min-height: 2.25rem;
  padding: 0 var(--space-4);
  border: none;
  box-shadow: var(--shadow-float-xs);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: box-shadow var(--ease), background var(--ease), color var(--ease);
}

.profile-tab:hover,
.profile-tab.is-active,
.profile-tab[aria-selected="true"] {
  box-shadow: var(--shadow-float-sm);
  color: var(--color-text);
  background: var(--color-surface-hover);
}

/* Two-tier profile navigation: realm (IRG / LoL) + section tabs */
.profile-nav {
  display: grid;
  gap: var(--space-3);
  margin-block: var(--space-2) 0;
  min-width: 0;
}
.profile-nav__realms,
.profile-nav__tabs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.2rem;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  padding: 0.25rem;
  border: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  box-shadow: var(--shadow-float-xs);
}
.profile-nav__realm,
.profile-nav__tab {
  position: relative;
  min-height: 2.35rem;
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: calc(var(--radius-md) - 2px);
  background: transparent;
  color: color-mix(in srgb, var(--color-text) 72%, var(--color-text-muted));
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease), box-shadow var(--ease);
}
.profile-nav__realm:hover,
.profile-nav__tab:hover {
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-surface-hover) 70%, transparent);
  border-color: color-mix(in srgb, var(--color-text) 12%, transparent);
}
.profile-nav__realm.is-active,
.profile-nav__realm[aria-selected="true"],
.profile-nav__tab.is-active,
.profile-nav__tab[aria-selected="true"] {
  color: var(--color-text);
  background: var(--color-surface-hover);
  border-color: color-mix(in srgb, var(--color-accent, #c9a227) 55%, var(--color-border));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent, #c9a227) 22%, transparent);
}
.profile-nav__tab {
  min-height: 2.15rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.profile-nav + .profile-panel,
.profile-nav + #member-panel-irg,
.profile-nav + #member-panel-lol {
  margin-top: var(--space-4);
}
.profile-achieve-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.profile-achieve-filters__tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.profile-achieve-filters__tabs > .profile-achieve-season {
  flex: 0 0 12rem;
  width: 12rem;
  min-width: 12rem;
}

/* Keep the achievement archive picker visually distinct from ordinary filters. */
.profile-achieve-season {
  position: relative;
  display: grid;
  gap: 0.35rem;
  width: min(14rem, 100%);
  min-width: 14rem;
  padding: 0.55rem 0.65rem 0.65rem;
  border: 1px solid rgba(88, 133, 255, 0.38);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 0% 0%, rgba(76, 125, 255, 0.17), transparent 48%),
    linear-gradient(135deg, rgba(27, 34, 54, 0.97), rgba(18, 21, 32, 0.99));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 10px 24px rgba(7, 8, 16, 0.22);
}

.profile-achieve-season::before {
  content: "ACHIEVEMENT SEASONS";
  padding-left: 0.15rem;
  color: rgba(180, 204, 255, 0.82);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.profile-achieve-season::after {
  position: absolute;
  right: 1.05rem;
  bottom: 1.25rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid rgba(225, 235, 255, 0.9);
  border-bottom: 2px solid rgba(225, 235, 255, 0.9);
  content: "";
  pointer-events: none;
  transform: rotate(45deg);
}

.profile-achieve-season select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 2.75rem;
  padding: 0.6rem 2.4rem 0.6rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 0.7rem;
  background: linear-gradient(135deg, rgba(39, 58, 99, 0.96), rgba(27, 34, 58, 0.99));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(14, 14, 23, 0.5);
  color: var(--color-text);
  color-scheme: dark;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.profile-achieve-season select option {
  background: #1d263d;
  color: #f1f5ff;
}

.profile-achieve-season select:hover {
  border-color: rgba(126, 169, 255, 0.68);
  background: linear-gradient(135deg, rgba(49, 73, 122, 0.98), rgba(31, 42, 72, 0.99));
}

.profile-achieve-season:focus-within {
  border-color: rgba(126, 169, 255, 0.78);
  box-shadow:
    0 0 0 3px rgba(76, 125, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 10px 24px rgba(7, 8, 16, 0.22);
}

.profile-achieve-season select:focus-visible {
  outline: none;
}

.match-card-list {
  display: grid;
  gap: var(--space-4);
}
.match-card-list--compact {
  gap: var(--space-3);
}
.match-card {
  display: block;
  padding: var(--space-4);
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--ease), transform var(--ease), background var(--ease);
}
.match-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: var(--color-surface);
  transform: translateY(-1px);
}
.match-card--static {
  cursor: default;
}
.match-card--static:hover {
  transform: none;
}
.match-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
  margin-inline: calc(-1 * var(--space-5, 1.25rem));
  margin-top: calc(-1 * var(--space-5, 1.25rem));
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.match-card--win .match-card__head {
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.55), rgba(22, 163, 74, 0.35));
  color: #ecfdf5;
}
.match-card--loss .match-card__head {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.55), rgba(185, 28, 28, 0.35));
  color: #fef2f2;
}
.match-card--win .match-card__meta,
.match-card--loss .match-card__meta {
  color: inherit;
  opacity: 0.92;
}
.match-roster__name.is-self {
  color: #f5c542;
  font-weight: var(--weight-semibold);
}
.match-card__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}
.match-card__meta {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.match-meta__result--win { color: #86efac; }
.match-meta__result--loss { color: #fca5a5; }
.match-teams {
  display: grid;
  gap: var(--space-4);
}
.match-team__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}
.match-team-dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.match-team-dot--blue { background: var(--color-blue-side); }
.match-team-dot--red { background: var(--color-red-side); }
.match-team--blue {
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-blue-side);
}
.match-team--red {
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-red-side);
}
.match-team--winner {
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin: calc(-1 * var(--space-2));
}
.match-team--blue.match-team--winner {
  background: rgba(59, 130, 246, 0.14);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.22);
}
.match-team--red.match-team--winner {
  background: rgba(239, 68, 68, 0.14);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.22);
}
.match-card__number,
.match-meta__number {
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
}
.match-opgg-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-left: auto;
}
.match-opgg-btn {
  padding: 0.2rem 0.55rem;
  font-size: var(--text-xs);
  line-height: 1.4;
}
.match-roster__opgg {
  margin-left: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-decoration: none;
}
.match-roster__opgg:hover {
  color: var(--color-accent);
}
.match-sr-table-wrap {
  margin-top: var(--space-3);
}
.match-sr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.match-sr-table th,
.match-sr-table td {
  padding: var(--space-2) var(--space-3);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  text-align: left;
}
.match-sr-table th:last-child,
.match-sr-table td:last-child {
  text-align: right;
}
.match-sr-delta--up { color: #86efac; }
.match-sr-delta--down { color: #fca5a5; }
.match-roster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.match-roster__player {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-height: 1.6rem;
}
.match-role-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}
.match-role-icon--text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--color-surface-hover);
  color: var(--color-text-muted);
  font-size: 0.65rem;
  font-weight: var(--weight-semibold);
}
.match-roster__sep {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1;
}
.match-roster__name {
  display: grid;
  gap: 0.12rem;
  font-size: var(--text-sm);
  min-width: 0;
}
.match-roster__name a {
  color: var(--color-text);
  text-decoration: none;
}
.match-roster__name a:hover {
  color: var(--color-accent);
}
.match-champ-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 4px;
}
.match-roster__kda {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.match-scoreboard-wrap {
  margin-top: 0.4rem;
}

.match-scoreboard__rank {
  margin-top: 0.12rem;
}
.match-scoreboard {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.match-scoreboard th,
.match-scoreboard td {
  padding: 0.35rem 0.45rem;
  text-align: left;
  vertical-align: middle;
}
.match-scoreboard th {
  color: var(--color-text-muted);
  font-weight: var(--weight-semibold);
}
.match-scoreboard td:nth-child(4),
.match-scoreboard td:nth-child(5),
.match-scoreboard td:nth-child(6),
.match-scoreboard td:nth-child(7),
.match-scoreboard th:nth-child(4),
.match-scoreboard th:nth-child(5),
.match-scoreboard th:nth-child(6),
.match-scoreboard th:nth-child(7) {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.match-detail__summary {
  margin-top: 0.35rem;
  margin-bottom: var(--space-5);
}
.match-detail .match-teams {
  margin-top: var(--space-4);
}

/* Game report (history detail) */
.match-report {
  display: grid;
  gap: var(--space-5);
}
.match-report__back {
  margin: 0 0 var(--space-2);
}
.match-report__header {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-float);
}
.match-report__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.match-report__eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.match-report__title {
  margin: 0;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  line-height: 1.2;
}
.match-report__number {
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
}
.match-report__winner {
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.match-report__winner--blue {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.35);
}
.match-report__winner--red {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.35);
}
.match-report__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.match-report__chip {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}
.match-report__teams {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 900px) {
  .match-report__teams {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}
.match-report__team {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-float);
}
.match-report__team--blue {
  border-left: 3px solid var(--color-blue-side);
}
.match-report__team--red {
  border-left: 3px solid var(--color-red-side);
}
.match-report__team--winner.match-report__team--blue {
  background: rgba(59, 130, 246, 0.08);
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(59, 130, 246, 0.2);
}
.match-report__team--winner.match-report__team--red {
  background: rgba(239, 68, 68, 0.08);
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(239, 68, 68, 0.2);
}
.match-report__team-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}
.match-report__team-badge {
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: rgba(182, 255, 42, 0.12);
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}
.match-report__section {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-float);
}
.match-report__section-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
}
.match-report__section-note {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
}
.match-report__table-wrap {
  overflow-x: auto;
}
.match-report__table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.match-report__table th,
.match-report__table td {
  padding: 0.45rem 0.55rem;
  text-align: left;
  vertical-align: middle;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
.match-report__table th {
  color: var(--color-text-muted);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.match-report__table td:nth-child(n + 5),
.match-report__table th:nth-child(n + 5) {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.match-report__rating-table td:nth-child(n + 2),
.match-report__rating-table th:nth-child(n + 2) {
  text-align: right;
}
.match-report__player-cell {
  min-width: 8rem;
}
.match-report__player-name {
  display: block;
  font-weight: var(--weight-semibold);
}
.match-report__player-role,
.match-report__player-riot {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}
.match-report__rank-cell {
  white-space: nowrap;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}
.match-champ-icon--empty {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
}
.match-rating-delta--up { color: #86efac; }
.match-rating-delta--down { color: #fca5a5; }
.match-rating-delta--flat { color: var(--color-text-muted); }
.match-report__timeline-meta {
  margin: 0 0 var(--space-2);
}
.match-report__timeline-scroll {
  max-height: min(28rem, 55vh);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: var(--space-2);
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.match-report__timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.match-report__timeline-item {
  display: grid;
  gap: 0.15rem;
  padding-left: var(--space-3);
  border-left: 2px solid rgba(255, 255, 255, 0.1);
}
.match-report__timeline-time {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}
.match-report__timeline-msg {
  font-size: var(--text-sm);
}
.match-report__live-code,
.match-report__live-note {
  margin: 0;
}

.achieve-card--unlocked {
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(182, 255, 42, 0.35);
}
.profile-panel {
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  padding: var(--space-card);
  box-shadow: var(--shadow-float);
}
.profile-overview { display: grid; gap: var(--space-6); position: relative; }
.profile-overview.irg-theme,
.profile.irg-theme { position: relative; }
.profile-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: none;
  min-height: 12rem;
  padding: var(--space-16) var(--space-card) var(--space-card);
  display: flex;
  align-items: end;
  gap: var(--space-5);
  background-color: var(--color-bg-elevated);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-float);
}
.profile-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 20%, rgba(9, 9, 11, 0.88) 100%);
  pointer-events: none;
  z-index: 1;
}
.profile-hero > * { position: relative; z-index: 2; }
.profile-hero__avatar { border-radius: 50%; border: 2px solid var(--color-border); }
.profile-hero__id { display: grid; gap: 0.2rem; min-width: 0; }
.profile-hero__id .h2 { margin: 0; }
.profile-hero__name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  min-width: 0;
  max-width: 100%;
}
.profile-hero__name-row .h2 { margin: 0; min-width: 0; }
.profile-hero__discord-roles { justify-content: flex-start; }
.profile-hero--compact {
  min-height: 0;
  padding: var(--space-5);
  align-items: center;
}
.profile-hero--compact::before { display: none; }
.profile.has-cosmetic-banner > .profile-hero,
.profile-overview.has-cosmetic-banner > .profile-hero {
  border: 0;
  border-radius: var(--radius-lg);
  min-height: 0;
  padding: 0;
  background-color: transparent;
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(182, 255, 42, 0.18);
}
/* Full-bleed flush banner on member profile (break out of .container gutters) */
#member-app.container .profile.has-cosmetic-banner {
  overflow: hidden;
}
/* Borders must bleed past the profile outline — never clip the frame ornaments */
.profile.has-cosmetic-banner:has(.profile-hero.irg-border),
.profile-overview.has-cosmetic-banner:has(.profile-hero.irg-border),
#member-app.container .profile.has-cosmetic-banner:has(.profile-hero.irg-border),
.profile.has-cosmetic-banner:has(.profile-hero.irg-border--image),
.profile-overview.has-cosmetic-banner:has(.profile-hero.irg-border--image),
#member-app.container .profile.has-cosmetic-banner:has(.profile-hero.irg-border--image),
.section:has(.profile-hero.irg-border--image),
.container:has(.profile-hero.irg-border--image),
#content:has(.profile-hero.irg-border--image) {
  overflow: visible !important;
}
.profile.has-cosmetic-banner > .profile-hero.irg-border,
.profile-overview.has-cosmetic-banner > .profile-hero.irg-border,
.profile.has-cosmetic-banner > .profile-hero.irg-border--image,
.profile-overview.has-cosmetic-banner > .profile-hero.irg-border--image {
  overflow: visible !important;
}
/* Room for top/bottom border ornaments outside the banner plane */
.profile.has-cosmetic-banner:has(.profile-hero.irg-border--image),
.profile-overview.has-cosmetic-banner:has(.profile-hero.irg-border--image) {
  padding-block: clamp(1.1rem, 3.2vw, 2rem);
}
#member-app.container .profile.has-cosmetic-banner > .profile-hero {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(182, 255, 42, 0.18);
}
.profile-hero {
  position: relative;
}
/* Badge detail bubbles need to escape the hero bounds when they open above a badge. */
.profile-hero:has(.irg-badge-tooltip) {
  overflow: visible;
}
.profile-overview.has-cosmetic-banner > .profile-hero:has(.irg-badge-tooltip),
.profile.has-cosmetic-banner > .profile-hero:has(.irg-badge-tooltip),
#member-app.container .profile.has-cosmetic-banner:has(.profile-hero .irg-badge-tooltip) {
  overflow: visible !important;
}
.profile-hero:has(.irg-badge-tooltip)::before,
.profile-hero:has(.irg-badge-tooltip) .profile-hero__banner {
  border-radius: inherit;
}
.profile-hero__title-corner {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 3;
  margin: 0;
  text-align: right;
  max-width: 40%;
}

.profile-hero__presence {
  position: absolute;
  top: var(--space-4);
  right: var(--space-6);
  bottom: auto;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  pointer-events: none;
}

.profile-hero__presence-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
  white-space: nowrap;
}

.profile-hero__presence--offline .profile-hero__presence-label {
  color: rgba(255, 255, 255, 0.72);
  font-weight: var(--weight-medium);
}

/* Keep clear of ornamental frame borders */
.profile-hero.irg-border .profile-hero__presence,
.profile-hero.irg-border--image .profile-hero__presence {
  top: max(1.5rem, 5.5cqi);
  right: max(3rem, 9cqi);
  bottom: auto;
  z-index: 12;
}

.roster-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0;
}

@keyframes presence-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.55;
    transform: scale(0.82);
  }
}

.presence-dot {
  display: inline-block;
  flex-shrink: 0;
  border-radius: 50%;
  vertical-align: middle;
  animation: presence-pulse 1.5s ease-in-out infinite;
}

.presence-dot--sm {
  width: 0.55rem;
  height: 0.55rem;
  margin-inline: 0.15rem;
}

.presence-dot--md {
  width: 0.85rem;
  height: 0.85rem;
}

.presence-dot--online {
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.85);
}
.profile-hero__main {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  min-width: 0;
}
.member-card,
.panel-card {
  overflow: visible;
}
.member-card__avatar {
  overflow: visible;
}
.member-card__avatar-wrap {
  position: relative;
  width: 48px;
  height: 48px;
  overflow: visible;
}
#members-grid > .member-card {
  display: flex;
  min-height: 16rem;
  flex-direction: column;
}
#members-grid > .member-card .member-card__footer {
  margin-top: auto;
}
.member-card__peak-rank {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.member-card__peak-rank::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.05rem;
  z-index: 0;
  width: 70%;
  height: 0.55rem;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(0, 0, 0, 0.28) 45%,
    transparent 72%
  );
  transform: translateX(-50%);
  filter: blur(1px);
  pointer-events: none;
}
.member-card__peak-rank::before {
  content: "";
  position: absolute;
  top: 0.28rem;
  right: 0.42rem;
  z-index: 2;
  width: 0.5rem;
  height: 0.5rem;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.98) 0 22%, transparent 26%),
    linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)),
    linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%, 14% 100%, 100% 14%;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.75));
  animation: member-rank-sparkle 2.6s ease-in-out infinite;
  pointer-events: none;
}
.member-card__peak-rank-image {
  position: relative;
  z-index: 1;
  width: 3.15rem;
  height: 3.15rem;
  object-fit: contain;
  filter:
    drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55))
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.85));
}
.member-card.has-player-bg > .member-card__peak-rank,
.member-card.has-cosmetic-banner > .member-card__peak-rank {
  position: absolute;
}
@keyframes member-rank-sparkle {
  0%,
  100% {
    opacity: 0.12;
    transform: scale(0.45) rotate(0deg);
  }
  35% {
    opacity: 1;
    transform: scale(1) rotate(18deg);
  }
  55% {
    opacity: 0.35;
    transform: scale(0.7) rotate(-8deg);
  }
  75% {
    opacity: 0.85;
    transform: scale(0.95) rotate(10deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .member-card__peak-rank::before {
    animation: none;
    opacity: 0.55;
    transform: none;
  }
}
.roster-row .irg-frame,
.roster-panel .irg-frame,
.member-card__avatar .irg-frame,
.lb-podium__card .irg-frame,
.lb-name__avatar .irg-frame {
  overflow: visible;
}
.lb-name__avatar {
  overflow: visible;
}
.lb-name a,
.roster-row a,
.roster-panel a,
.member-card a,
.lb-podium__card a {
  color: inherit;
  text-decoration: none;
}
.member-card.has-cosmetic-banner:not(.has-player-bg) {
  background-image:
    linear-gradient(rgba(5, 7, 12, 0.72), rgba(5, 7, 12, 0.78)),
    var(--irg-banner-image) !important;
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  color: #f4f4f5;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 10px rgba(0, 0, 0, 0.85);
}

/* Player directory cards are taller than the 4:1 banner canvas. Keep artwork
   proportional here without changing the full-card treatment elsewhere. */
#members-app .member-card.has-cosmetic-banner:not(.has-player-bg) {
  background-size: cover, cover;
}

.member-card.has-cosmetic-banner .subtle,
.member-card.has-cosmetic-banner .muted,
.member-card.has-player-bg .subtle,
.member-card.has-player-bg .muted,
.member-card.has-cosmetic-banner .member-card__rank,
.member-card.has-player-bg .member-card__rank {
  color: #e4e4e7;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 10px rgba(0, 0, 0, 0.85),
    0 0 2px rgba(0, 0, 0, 1);
}

.member-card.has-cosmetic-banner .h3,
.member-card.has-player-bg .h3 {
  color: #fafafa;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.98),
    0 0 12px rgba(0, 0, 0, 0.9);
}
.profile-level-card {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.03);
  border: none;
  box-shadow: var(--shadow-float);
}
.profile-level-card__label {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.profile-level-card__value {
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: var(--weight-bold);
  line-height: 1.1;
  margin: 0.25rem 0 0.75rem;
  color: var(--lvl-tint-color, inherit);
}
.xp-bar {
  height: 0.55rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.xp-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e9d5ff 0%, #7c3aed 55%, #3b0764 100%);
}
.xp-count {
  color: #f5c542;
  font-variant-numeric: tabular-nums;
}
.profile-hero__avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.profile-hero__avatar--empty {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: rgba(255,255,255,0.04);
}
.profile-hero__identity .h2 {
  margin: 0;
}
.profile-hero__featured {
  position: static;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.4rem;
  transform: none;
}
.profile-hero__featured .irg-badge,
.profile-hero__featured .irg-badge--empty {
  width: 32px;
  height: 32px;
}
.irg-badge {
  display: block;
  object-fit: contain;
  image-rendering: auto;
  background: transparent;
}
.irg-badge-tooltip {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  vertical-align: middle;
}
.irg-badge-tooltip__bubble {
  position: absolute;
  z-index: 40;
  left: 50%;
  bottom: calc(100% + 0.45rem);
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  width: min(22rem, calc(100vw - 1rem));
  min-height: 4.55rem;
  box-sizing: border-box;
  padding: 0.65rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--color-accent) 42%, var(--color-border));
  border-radius: 0.55rem;
  background: color-mix(in srgb, var(--color-surface) 94%, #090b11);
  box-shadow: 0 0.55rem 1.25rem rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.04);
  color: var(--color-text);
  font-size: 0.72rem;
  line-height: 1.3;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0.3rem);
  visibility: hidden;
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
}
.irg-badge-tooltip__bubble--portal {
  position: fixed;
  top: auto;
  bottom: auto;
  left: 0;
  z-index: 10000;
  opacity: 1;
  pointer-events: none;
  visibility: visible;
  transform: translate(-50%, -100%);
  transition: none;
}
.irg-badge-tooltip__bubble--portal.is-below {
  transform: translate(-50%, 0);
}
.irg-badge-tooltip__bubble::after {
  position: absolute;
  left: 50%;
  bottom: -0.3rem;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 1px solid color-mix(in srgb, var(--color-accent) 42%, var(--color-border));
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 42%, var(--color-border));
  background: color-mix(in srgb, var(--color-surface) 94%, #090b11);
  content: "";
  transform: translateX(-50%) rotate(45deg);
}
.irg-badge-tooltip__bubble--portal.is-below::after {
  top: -0.3rem;
  bottom: auto;
  transform: translateX(-50%) rotate(225deg);
}
.irg-badge-tooltip:hover .irg-badge-tooltip__bubble,
.irg-badge-tooltip:focus-within .irg-badge-tooltip__bubble {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
  visibility: visible;
}
.irg-badge-tooltip__name {
  color: var(--color-text);
  font-weight: 800;
}
.irg-badge-tooltip__art {
  display: grid;
  flex: 0 0 4rem;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 0.42rem;
  background: rgba(255, 255, 255, 0.035);
}
.irg-badge-tooltip__art img {
  display: block;
  width: 4rem;
  height: 4rem;
  object-fit: contain;
}
.irg-badge-tooltip__copy {
  display: grid;
  min-width: 0;
  gap: 0.18rem;
}
.irg-badge-tooltip__description {
  color: var(--color-text-muted);
  white-space: normal;
  overflow-wrap: anywhere;
}
.irg-badge-tooltip__association {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  color: var(--color-text-muted);
  font-size: 0.66rem;
  white-space: nowrap;
}
.irg-badge-tooltip__association > span {
  flex: 0 0 auto;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.irg-badge-tooltip__association > strong {
  min-width: 0;
  overflow: hidden;
  color: var(--color-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.irg-badge.is-locked {
  filter: grayscale(0.55) brightness(0.82);
  opacity: 0.88;
}
.irg-badge--sm { width: 36px; height: 36px; }
.irg-badge--md { width: 56px; height: 56px; }
.irg-badge--lg { width: 72px; height: 72px; }
.irg-badge--empty {
  display: block;
  width: 56px;
  height: 56px;
  box-sizing: border-box;
  border: 1px dashed color-mix(in srgb, var(--color-text) 28%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
}
.featured-board {
  display: grid;
  gap: var(--space-3);
}
.featured-board__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.featured-slot {
  position: relative;
  width: 7.5rem;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.4rem;
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: inherit;
  font: inherit;
  cursor: default;
}
.featured-slot:focus-within {
  z-index: 40;
}
button.featured-slot { cursor: pointer; }
.featured-slot.is-locked {
  opacity: 0.55;
}
.featured-slot.is-unlock {
  opacity: 1;
  border: 2px dashed rgba(182, 255, 42, 0.7);
  background: rgba(182, 255, 42, 0.08);
  box-shadow: inset 0 0 0 1px rgba(182, 255, 42, 0.18);
}
.featured-slot.is-unlock .featured-slot__unlock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.6rem;
  padding: 0.2rem 0.55rem;
  border: none;
  border-radius: var(--radius-full);
  background: rgba(9, 9, 11, 0.55);
  color: var(--color-accent);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: var(--shadow-float-xs), inset 0 0 0 1px rgba(182, 255, 42, 0.65);
}
.featured-slot.is-locked .featured-slot__unlock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.6rem;
  padding: 0.2rem 0.55rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.featured-slot--picker,
.featured-slot--empty {
  justify-content: center;
  min-height: 6.25rem;
}
.featured-slot--empty {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--color-text) 22%, transparent);
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  box-shadow: none;
}
.featured-slot select {
  width: 100%;
  font-size: var(--text-xs);
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.3rem;
}
.featured-badge-picker {
  position: relative;
  width: 100%;
}
.featured-badge-picker__trigger {
  width: 100%;
  min-height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.25rem 0.45rem;
  border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  box-shadow: var(--shadow-float-sm);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
}
.featured-badge-picker__trigger:hover,
.featured-badge-picker__trigger[aria-expanded="true"] {
  border-color: rgba(var(--ui-accent-rgb), 0.56);
  background: rgba(var(--ui-accent-rgb), 0.09);
}
.featured-badge-picker__trigger:focus-visible,
.featured-badge-picker__option:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.featured-badge-picker__chevron {
  color: var(--color-accent);
  font-size: 0.72rem;
  line-height: 1;
}
.featured-badge-picker__menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 50%;
  z-index: 40;
  width: 11rem;
  max-height: 13rem;
  overflow-y: auto;
  display: block;
  padding: 0.4rem;
  border: 1px solid rgba(var(--ui-accent-rgb), 0.36);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-surface) 94%, black);
  box-shadow: var(--shadow-float-md);
  transform: translateX(-50%);
}
.featured-badge-picker__section + .featured-badge-picker__section {
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
}
.featured-badge-picker__section-label {
  margin: 0 0 0.35rem;
  color: var(--color-text-muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}
.featured-badge-picker__section-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
}
.featured-badge-picker__menu > .featured-badge-picker__option--none {
  margin-bottom: 0.45rem;
}
.featured-badge-picker__option {
  min-width: 0;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0.3rem;
  border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-bg) 78%, transparent);
  color: var(--color-text);
  cursor: pointer;
}
.featured-badge-picker__option:hover,
.featured-badge-picker__option[aria-selected="true"] {
  border-color: rgba(var(--ui-accent-rgb), 0.7);
  background: rgba(var(--ui-accent-rgb), 0.14);
  box-shadow: inset 0 0 0 1px rgba(var(--ui-accent-rgb), 0.2);
}
.featured-badge-picker__option .irg-badge {
  width: 38px;
  height: 38px;
}
.featured-badge-picker__option--none {
  color: var(--color-text-muted);
  font-size: 1.5rem;
  line-height: 1;
}
.loadout-inventory {
  display: grid;
  gap: var(--space-5);
}
.loadout-inventory__tabs {
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.loadout-inventory__tabs button {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 0.55rem 0.85rem;
  margin-bottom: -1px;
}
.loadout-inventory__tabs button.is-active {
  color: var(--color-text);
  border-bottom-color: var(--color-accent, #b6ff2a);
}
.loadout-inventory__hint {
  margin: 0;
}
.loadout-inventory__hint .linkish {
  appearance: none;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  padding: 0;
}
.loadout-teaser {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: linear-gradient(165deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.08);
}
.loadout-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}
@media (max-width: 960px) {
  .loadout-strip {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--space-3);
    padding-bottom: var(--space-2);
    -webkit-overflow-scrolling: touch;
  }
  .loadout-strip .loadout-tile {
    flex: 0 0 min(86vw, 19rem);
    scroll-snap-align: start;
  }
}
.loadout-tile {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-3);
  min-height: 0;
  padding: var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  background:
    linear-gradient(165deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018));
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.loadout-tile--ghost {
  border-style: dashed;
  opacity: 0.55;
}
.loadout-tile.is-active {
  border-color: rgba(182, 255, 42, 0.5);
  box-shadow:
    inset 0 0 0 1px rgba(182, 255, 42, 0.22),
    0 0 0 1px rgba(182, 255, 42, 0.08);
}
.loadout-tile.is-editing {
  border-color: rgba(255, 255, 255, 0.28);
}
.loadout-tile.is-applied {
  animation: loadout-apply-flash 420ms ease;
}
@keyframes loadout-apply-flash {
  0% { transform: scale(1); }
  35% { transform: scale(1.015); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .loadout-tile.is-applied { animation: none; }
}
.loadout-tile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.loadout-tile__name {
  margin: 0;
  font-size: 1.08rem;
  letter-spacing: 0.01em;
}
.loadout-tile__badge {
  flex: 0 0 auto;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0b1208;
  background: #b6ff2a;
}
.loadout-tile__preview {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}
.loadout-tile__banner {
  height: 3.4rem;
  border-radius: var(--radius-sm, 0.4rem);
  background-color: rgba(0, 0, 0, 0.35);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.loadout-tile__banner--empty {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,0.03),
      rgba(255,255,255,0.03) 6px,
      transparent 6px,
      transparent 12px
    ),
    rgba(0, 0, 0, 0.28);
  color: var(--color-text-muted);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.loadout-slot-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  border-radius: var(--radius-sm, 0.4rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
}
.loadout-slot-list__row {
  display: grid;
  grid-template-columns: 5.75rem minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
  padding: 0.48rem 0.55rem;
  background: rgba(8, 10, 14, 0.72);
  min-height: 2.35rem;
}
.loadout-slot-list__row.is-filled {
  box-shadow: inset 2px 0 0 rgba(182, 255, 42, 0.35);
}
.loadout-slot-list__row.is-empty {
  opacity: 0.48;
}
.loadout-slot-list__row--uncommon.is-filled { box-shadow: inset 2px 0 0 #86efac; }
.loadout-slot-list__row--rare.is-filled { box-shadow: inset 2px 0 0 #60a5fa; }
.loadout-slot-list__row--epic.is-filled { box-shadow: inset 2px 0 0 #c084fc; }
.loadout-slot-list__row--legendary.is-filled { box-shadow: inset 2px 0 0 #fbbf24; }
.loadout-slot-list__row--mythic.is-filled { box-shadow: inset 2px 0 0 #fb7185; }
.loadout-slot-list__slot {
  color: var(--color-text-muted);
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
}
.loadout-slot-list__value {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.loadout-slot-list__hit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  max-width: 100%;
  padding: 0.1rem 0.2rem 0.1rem 0;
  border-radius: 0.3rem;
  outline: none;
  cursor: help;
}
.loadout-slot-list__hit:hover .loadout-slot-list__name,
.loadout-slot-list__hit:focus-visible .loadout-slot-list__name {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.28);
  text-underline-offset: 0.18em;
}
.loadout-slot-list__pip {
  flex: 0 0 auto;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.loadout-slot-list__pip--common { background: #a8a29e; }
.loadout-slot-list__pip--uncommon { background: #86efac; }
.loadout-slot-list__pip--rare { background: #60a5fa; }
.loadout-slot-list__pip--epic { background: #c084fc; }
.loadout-slot-list__pip--legendary { background: #fbbf24; }
.loadout-slot-list__pip--mythic { background: #fb7185; }
.loadout-slot-list__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-text);
}
.loadout-slot-list__row.is-empty .loadout-slot-list__name {
  font-weight: 500;
  color: var(--color-text-muted);
}
.loadout-slot-preview {
  position: fixed;
  z-index: 1200;
  width: min(18.5rem, calc(100vw - 1.25rem));
  padding: 0.7rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(10, 12, 16, 0.97);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 0.15rem));
  animation: loadout-slot-preview-in 140ms ease-out;
}
.loadout-slot-preview.is-below {
  transform: translate(-50%, 0.15rem);
}
@keyframes loadout-slot-preview-in {
  from { opacity: 0; transform: translate(-50%, calc(-100% - 0.4rem)); }
  to { opacity: 1; transform: translate(-50%, calc(-100% - 0.15rem)); }
}
.loadout-slot-preview.is-below {
  animation-name: loadout-slot-preview-in-below;
}
@keyframes loadout-slot-preview-in-below {
  from { opacity: 0; transform: translate(-50%, -0.2rem); }
  to { opacity: 1; transform: translate(-50%, 0.15rem); }
}
@media (prefers-reduced-motion: reduce) {
  .loadout-slot-preview,
  .loadout-slot-preview.is-below {
    animation: none;
  }
}
.loadout-slot-preview__visual {
  overflow: hidden;
  border-radius: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #050608;
  margin-bottom: 0.55rem;
}
.loadout-slot-preview__visual .shop-card__visual {
  width: 100% !important;
  min-height: 7.5rem !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
}
.loadout-slot-preview__visual--banner .shop-card__visual {
  min-height: 0 !important;
  aspect-ratio: 4 / 1 !important;
}
.loadout-slot-preview__visual--border .shop-card__visual {
  min-height: 8rem !important;
}
.loadout-slot-preview__slot {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.loadout-slot-preview__name {
  margin: 0.15rem 0 0;
  font-size: 0.98rem;
  font-weight: 700;
}
.loadout-slot-preview__rarity {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  text-transform: capitalize;
}
.loadout-tile__fill {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.loadout-tile__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: 0.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.cosmetic-hover-preview {
  --cosmetic-hover-hero-h: clamp(8.5rem, 20vw, 13rem);
  position: fixed;
  z-index: 1400;
  width: min(34rem, calc(100vw - 1.5rem));
  max-height: calc(100vh - 1.5rem);
  overflow: visible;
  padding: 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 10, 14, 0.97);
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 0.2rem));
  animation: cosmetic-hover-preview-in 140ms ease-out;
}
.cosmetic-hover-preview.is-below {
  transform: translate(-50%, 0.2rem);
  animation-name: cosmetic-hover-preview-in-below;
}
.cosmetic-hover-preview--border,
.cosmetic-hover-preview--banner,
.cosmetic-hover-preview--theme,
.cosmetic-hover-preview--fx {
  width: min(42rem, calc(100vw - 1.25rem));
}
.cosmetic-hover-preview--frame,
.cosmetic-hover-preview--name,
.cosmetic-hover-preview--title {
  width: min(28rem, calc(100vw - 1.5rem));
}
@keyframes cosmetic-hover-preview-in {
  from { opacity: 0; transform: translate(-50%, calc(-100% - 0.45rem)); }
  to { opacity: 1; transform: translate(-50%, calc(-100% - 0.2rem)); }
}
@keyframes cosmetic-hover-preview-in-below {
  from { opacity: 0; transform: translate(-50%, -0.2rem); }
  to { opacity: 1; transform: translate(-50%, 0.2rem); }
}
@media (prefers-reduced-motion: reduce) {
  .cosmetic-hover-preview,
  .cosmetic-hover-preview.is-below {
    animation: none;
  }
}
.cosmetic-hover-preview__stage {
  overflow: visible;
  border-radius: var(--radius-md);
  margin-bottom: 0.65rem;
  background: #050608;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.cosmetic-hover-preview__stage .shop-preview,
.cosmetic-hover-preview__stage .profile-border-preview,
.cosmetic-hover-preview__stage .cosmetic-type-preview {
  width: 100%;
  margin: 0;
}
.cosmetic-hover-preview--border .cosmetic-hover-preview__stage .profile-border-preview > .profile-hero,
.cosmetic-hover-preview--banner .cosmetic-hover-preview__stage .shop-preview.shop-preview--banner {
  width: 100%;
  max-height: var(--cosmetic-hover-hero-h);
  aspect-ratio: 4 / 1;
  height: auto;
  min-height: 0;
}
.cosmetic-hover-preview__stage .profile-border-preview {
  overflow: visible;
  padding-block: clamp(0.45rem, 1.2vw, 0.75rem);
}
.cosmetic-hover-preview__stage .profile-border-preview > .profile-hero.irg-border--image,
.cosmetic-hover-preview__stage .profile-border-preview > .profile-hero.irg-border {
  overflow: visible;
}
.cosmetic-hover-preview__slot {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.cosmetic-hover-preview__name {
  margin: 0.2rem 0 0;
  font-size: 1.05rem;
  font-weight: 700;
}
.cosmetic-hover-preview__rarity {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  text-transform: capitalize;
}

/* Type-specific preview stages (hover + shop detail) */
.cosmetic-type-preview {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 7.5rem;
  padding: 1rem 1.1rem;
  box-sizing: border-box;
  border-radius: inherit;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(18, 22, 32, 0.95), rgba(8, 10, 14, 0.98));
}
.cosmetic-type-preview--lg {
  min-height: 9.5rem;
}
.cosmetic-type-preview--border,
.cosmetic-type-preview--banner {
  padding: 0;
  min-height: 0;
  background: transparent;
  overflow: visible;
  place-items: stretch;
}
.cosmetic-type-preview--frame {
  gap: 0.75rem;
  min-height: 11rem;
  padding: 1.35rem 1.1rem 1.1rem;
}
.cosmetic-type-preview--title {
  min-height: 8.5rem;
  padding: 1.5rem 1.25rem;
}
.cosmetic-type-preview__title {
  font-size: clamp(1.15rem, 2.6vw, 1.55rem);
  letter-spacing: 0.12em;
  text-align: center;
  margin: 0;
}
.cosmetic-type-preview--name {
  gap: 0.65rem;
  min-height: 8.5rem;
  padding: 1.4rem 1.25rem;
}
.cosmetic-type-preview__name {
  font-size: clamp(1.35rem, 3.2vw, 1.85rem);
  line-height: 1.15;
  text-align: center;
}
.cosmetic-type-preview__caption {
  margin: 0;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  text-align: center;
}
.cosmetic-type-preview--fx {
  position: relative;
  min-height: 12rem;
  overflow: visible;
  background: linear-gradient(135deg, rgba(18, 22, 39, 0.98), rgba(12, 11, 24, 0.98));
  box-shadow:
    0 0 0 1px rgba(139, 92, 246, 0.18),
    0 0 2.75rem rgba(76, 29, 149, 0.24);
}
.cosmetic-type-preview--fx::before,
.cosmetic-type-preview--fx::after {
  inset: -10%;
  border-radius: inherit;
}
.cosmetic-type-preview--fx > * {
  position: relative;
  z-index: 2;
}
.cosmetic-type-preview__fx-core {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: min(100%, 22rem);
}
.cosmetic-type-preview__fx-copy {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}
.cosmetic-type-preview--theme {
  padding: 0;
  min-height: 12.5rem;
  overflow: hidden;
  place-items: stretch;
  background: transparent;
}
.cosmetic-type-preview--theme .shop-preview {
  min-height: 12.5rem;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: inherit;
  overflow: hidden;
}
.cosmetic-type-preview--theme .shop-preview.shop-preview--banner {
  aspect-ratio: auto;
  max-height: none;
}
.cosmetic-type-preview--default {
  padding: 0;
  min-height: 0;
  background: transparent;
}
.shop-detail__preview {
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-4);
  overflow: visible;
}
.shop-detail__preview .cosmetic-type-preview--border,
.shop-detail__preview .cosmetic-type-preview--banner {
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
}
.shop-detail__preview .cosmetic-type-preview--fx,
.shop-detail__preview .cosmetic-type-preview--theme,
.shop-detail__preview .cosmetic-type-preview--frame,
.shop-detail__preview .cosmetic-type-preview--name,
.shop-detail__preview .cosmetic-type-preview--title {
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  min-height: 13rem;
}
.shop-detail:has(.cosmetic-type-preview--fx) {
  overflow: visible;
}
.loadout-editor {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}
.loadout-editor__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.loadout-editor__name input {
  min-width: min(100%, 16rem);
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm, 0.35rem);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.25);
  color: inherit;
  font: inherit;
}
.loadout-editor__body {
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
  gap: var(--space-4);
}
@media (max-width: 720px) {
  .loadout-editor__body {
    grid-template-columns: 1fr;
  }
}
.loadout-editor__slots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  align-content: start;
}
.loadout-editor__slots button {
  width: 100%;
  display: grid;
  gap: 0.1rem;
  text-align: left;
  appearance: none;
  cursor: pointer;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-sm, 0.35rem);
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  font: inherit;
}
.loadout-editor__slots button.is-active {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}
.loadout-editor__picker {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  min-width: 0;
}
.loadout-editor__grid {
  max-height: 28rem;
  overflow: auto;
  padding: 0.35rem 0.15rem 0.5rem;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  align-content: start;
}
.loadout-pick {
  appearance: none;
  display: grid;
  grid-template-rows: auto auto;
  gap: 0;
  padding: 0;
  overflow: hidden;
  text-align: left;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.28);
  color: inherit;
  font: inherit;
  cursor: pointer;
  min-width: 0;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.loadout-pick:hover {
  border-color: rgba(255, 255, 255, 0.22);
}
.loadout-pick.is-selected {
  border-color: rgba(182, 255, 42, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(182, 255, 42, 0.2),
    0 0 0 1px rgba(182, 255, 42, 0.12);
}
.loadout-pick__visual {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  background: #050608;
  isolation: isolate;
}
.loadout-pick__visual .shop-card__visual,
.loadout-pick__visual .shop-card__visual--banner,
.loadout-pick__visual .shop-card__visual--shop-art,
.loadout-pick__visual .shop-card__visual--border,
.loadout-pick__visual .shop-card__visual--title,
.loadout-pick__visual .shop-card__visual--frame,
.loadout-pick__visual .shop-card__visual--theme {
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  align-self: stretch !important;
  min-height: 5.5rem !important;
  height: auto !important;
  aspect-ratio: 16 / 10;
  border-radius: 0 !important;
  padding: 0 !important;
}
.loadout-pick__visual .shop-card__visual--banner,
.loadout-pick__visual .shop-card__visual--shop-art {
  min-height: 0 !important;
  aspect-ratio: 4 / 1;
}
.loadout-pick__visual .shop-card__visual--title {
  display: grid;
  place-items: center;
  min-height: 4.75rem !important;
  aspect-ratio: auto;
  padding: 0.85rem 0.75rem !important;
}
.loadout-pick__visual .shop-card__title-sample,
.loadout-pick__visual .irg-title {
  font-size: 0.95rem;
  letter-spacing: 0.08em;
}
.loadout-pick__visual .banner-fit,
.loadout-pick__visual .shop-card__shop-art,
.loadout-pick__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.loadout-pick__label {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.7rem 0.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.045);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.loadout-editor__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.loadout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--space-3);
}
.profile-stat-block {
  position: relative;
  overflow: hidden;
  padding: var(--space-4);
  border: none;
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
    url("/assets/brand/irg-mark.png") right 0.6rem center / 5.5rem no-repeat;
  box-shadow: var(--shadow-float);
}
.profile-stat-block--cq { box-shadow: var(--shadow-float), inset 3px 0 0 #a78bfa; }
.profile-stat-block--nq { box-shadow: var(--shadow-float), inset 3px 0 0 #60a5fa; }
.stat-wl--win { color: #86efac; font-weight: 700; }
.stat-wl--loss { color: #fca5a5; font-weight: 700; }
.stat-wl--good { color: #86efac; }
.stat-wl--bad { color: #fca5a5; }
.achieve-groups { display: grid; gap: var(--space-10); }
.achieve-group__title {
  margin: 0 0 var(--space-4);
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.achieve-group--green .achieve-group__title,
.achieve-group--green .achieve-card {
  color: #86efac;
}
.achieve-group--green .achieve-card {
  color: inherit;
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(74, 222, 128, 0.45);
}
.achieve-group--purple .achieve-group__title { color: #c4b5fd; }
.achieve-group--purple .achieve-card {
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(167, 139, 250, 0.45);
}
.achieve-group--blue .achieve-group__title { color: #93c5fd; }
.achieve-group--blue .achieve-card {
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(96, 165, 250, 0.45);
}
.achieve-group--gold .achieve-group__title { color: #f5c542; }
.achieve-group--gold .achieve-card {
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(245, 197, 66, 0.4);
}
.achieve-group--orange .achieve-group__title { color: #fdba74; }
.achieve-group--orange .achieve-card {
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(251, 146, 60, 0.45);
}
.achieve-group--silver .achieve-group__title { color: #e4e4e7; }
.achieve-group--silver .achieve-card {
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(212, 212, 216, 0.4);
}
.achieve-group--teal .achieve-group__title { color: #5eead4; }
.achieve-group--teal .achieve-card {
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(45, 212, 191, 0.4);
}
.achieve-group--pink .achieve-group__title { color: #f9a8d4; }
.achieve-group--pink .achieve-card {
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(244, 114, 182, 0.4);
}
.achieve-group--discord .achieve-group__title { color: #a5b4fc; }
.achieve-group--discord .achieve-card {
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(129, 140, 248, 0.45);
}
.achievement-association {
  width: fit-content;
  max-width: 100%;
  margin: 0.55rem 0 0;
  padding: 0.28rem 0.52rem;
  border: 1px solid rgba(74, 222, 128, 0.32);
  border-radius: 999px;
  display: flex;
  gap: 0.38rem;
  align-items: center;
  background: rgba(74, 222, 128, 0.09);
  color: #bbf7d0;
  font-size: var(--text-xs);
  line-height: 1.2;
}
.achievement-association.is-opponent {
  border-color: rgba(251, 146, 60, 0.36);
  background: rgba(251, 146, 60, 0.1);
  color: #fed7aa;
}
.achievement-association span {
  color: currentColor;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  opacity: 0.75;
  text-transform: uppercase;
}
.achievement-association strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.badge-association {
  width: min(100%, 8.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 0;
  margin: 0.15rem auto 0;
  padding: 0.3rem 0.45rem;
  border: 1px solid rgba(45, 212, 191, 0.3);
  border-radius: 0.55rem;
  background: rgba(45, 212, 191, 0.08);
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}
.badge-association.is-opponent {
  border-color: rgba(251, 146, 60, 0.34);
  background: rgba(251, 146, 60, 0.09);
}
.badge-association span {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.badge-association strong {
  min-width: 0;
  overflow: hidden;
  color: var(--color-text);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.achieve-card--compact {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex: 1 1 18rem;
  max-width: 26rem;
  padding: var(--space-3) var(--space-4);
}
.badge-catalog {
  display: grid;
  gap: var(--space-8);
}
.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: var(--space-3);
}
.badge-cell {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  text-align: center;
}
.badge-cell--admin,
.achieve-card--admin {
  position: relative;
}
.profile-badge-admin {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-3);
}
.shop-modal__panel--badge-editor {
  width: min(100%, 28rem);
}
.profile-badge-editor__preview {
  display: grid;
  place-items: center;
}
.profile-badge-editor__url {
  margin: 0 0 0.5rem;
  font-size: var(--text-xs);
  word-break: break-all;
}
.profile-badge-editor__library {
  display: grid;
  gap: var(--space-2);
}
.profile-badge-editor__library > input[type="search"] {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  box-shadow: var(--shadow-float-sm);
}
.profile-badge-editor__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr));
  gap: 0.45rem;
  max-height: 13rem;
  overflow: auto;
  padding: 0.15rem;
}
.profile-badge-editor__card {
  padding: 0.35rem;
  gap: 0;
}
.profile-badge-editor__card .shop-asset-card__preview {
  aspect-ratio: 1;
  min-height: 0;
  padding: 0.25rem;
}
.profile-badge-editor__card strong,
.profile-badge-editor__card .subtle,
.profile-badge-editor__card .shop-asset-card__actions {
  display: none;
}
.badge-cell p {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.profile-section { display: grid; gap: var(--space-3); }
.profile-inventory {
  display: grid;
  grid-template-columns: minmax(9rem, 11rem) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.profile-inventory__nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: sticky;
  top: 0.5rem;
}
.profile-inventory__nav button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.65rem;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font: inherit;
}
.profile-inventory__nav button:hover,
.profile-inventory__nav button.is-active {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text);
}
.profile-inventory__main {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}
.profile-inventory__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}
@media (max-width: 1024px) {
  .profile-inventory {
    grid-template-columns: 1fr;
  }
  .profile-inventory__nav {
    flex-direction: row;
    flex-wrap: nowrap;
    position: static;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--space-1);
    padding: var(--space-1);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-float-sm);
  }
  .profile-inventory__nav::-webkit-scrollbar {
    display: none;
  }
  .profile-inventory__nav button {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.04);
  }
  .profile-inventory__nav button.is-active {
    background: rgba(255, 255, 255, 0.12);
  }
  .profile-inventory__toolbar {
    display: grid;
    gap: var(--space-2);
  }
  .profile-inventory__toolbar .shop-toolbar__search,
  .profile-inventory__toolbar .shop-toolbar__sort {
    min-width: 0;
  }
}
.profile-stat-grid { display: grid; gap: var(--space-4); }

/* League social stats (mirrors Discord /stats profile) */
.lol-social-stats {
  display: grid;
  gap: var(--space-5);
}
.social-stats-tabs {
  margin-top: var(--space-2);
  min-width: 0;
  /* inherits bordered segmented control from .profile-nav__tabs */
}
.social-section {
  display: grid;
  gap: var(--space-5);
}
.social-highlight-grid {
  display: grid;
  gap: var(--space-3);
}
.social-highlight {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-float-xs);
}
.social-highlight__title {
  margin: 0 0 var(--space-1);
  font-size: 0.95rem;
  font-weight: 650;
}
.social-highlight__title--with-help {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.social-decay-block__header {
  margin-bottom: var(--space-3);
}
.social-decay-block__title {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 var(--space-1);
  font-size: 1.05rem;
  font-weight: 700;
}
.social-decay-block__lead {
  margin: 0;
  font-size: 0.85rem;
}
.social-decay-block .admin-help-tip__bubble {
  max-width: min(28rem, 85vw);
}
.social-highlight__hint {
  margin: 0 0 var(--space-3);
  font-size: 0.85rem;
  line-height: 1.35;
}
.social-highlight__body {
  margin: 0;
  line-height: 1.45;
}
.social-highlight__stat {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.social-player-link {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
.social-player-link:hover {
  color: var(--color-accent, #c9a227);
  text-decoration: underline;
}
.social-wl {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.social-wr {
  white-space: nowrap;
}
.social-list-block {
  display: grid;
  gap: var(--space-2);
}
.social-rank-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.social-rank-list li {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-float-xs);
}
.social-rank-list__n {
  font-weight: 700;
  color: var(--color-text-muted);
}
.social-metric-grid {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}
.social-metric {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-float-xs);
}
.social-metric dt {
  margin: 0 0 var(--space-1);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.social-metric dd {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 650;
}
.social-metric .subtle {
  margin: var(--space-1) 0 0;
}
.social-role {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.social-role img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
@media (min-width: 720px) {
  .social-highlight-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .social-metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 960px) {
  .social-metric-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.profile-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
.badge-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.badge-chip, .badge-card {
  padding: var(--space-3) var(--space-4);
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-float);
}
.activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}
.activity-list li {
  display: grid;
  gap: 0.15rem;
  padding-bottom: var(--space-3);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
.irg-public-card {
  margin: var(--space-5) 0;
  padding: var(--space-5);
  border: none;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: var(--shadow-float);
}
@media (min-width: 768px) {
  .profile-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .match-teams { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.header-status {
  margin-right: 0.35rem;
}
.section--admin {
  padding-bottom: var(--space-8);
}

main.section.section--admin,
#content.section.section--admin {
  padding-top: calc(var(--header-offset) + var(--space-8));
}
.section--admin .section-head {
  margin-bottom: var(--space-5);
}
.section--admin .section-head p {
  margin-top: 0.35rem;
}
.admin-shell {
  display: grid;
  gap: var(--space-4);
  max-width: 80rem;
}
.container.admin-shell.admin-shell--wide {
  width: calc(100% - var(--space-8));
  max-width: none;
}
.admin-card,
.admin-section {
  display: grid;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.025);
}
.admin-card h2,
.admin-card h3,
.admin-slide > .h3 {
  margin: 0;
  font-size: var(--text-md);
}
.admin-card p,
.admin-slide > .muted,
.admin-slide > .subtle {
  margin: 0;
}
.admin-card__head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: flex-start;
}
.admin-teams {
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 700px) {
  .admin-teams { grid-template-columns: 1fr 1fr; }
}
.admin-teams h4 {
  margin: 0 0 0.25rem;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.admin-players {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.2rem;
  font-size: var(--text-sm);
}
.admin-actions,
.admin-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.admin-form {
  display: grid;
  gap: 0.65rem;
}
.admin-form input:not([type="checkbox"]):not([type="radio"]),
.admin-form select,
.admin-form textarea,
.admin-inline input:not([type="checkbox"]):not([type="radio"]),
.admin-inline select {
  width: 100%;
  min-height: 2.15rem;
  padding: 0.4rem 0.65rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: 0.55rem;
  background: var(--color-bg-elevated);
  color: var(--color-text);
}
.admin-inline input,
.admin-inline select {
  width: auto;
  min-width: 9rem;
}
.admin-check {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.admin-flash,
.irg-toast {
  padding: 0.55rem 0.8rem;
  border-radius: 0.65rem;
  border: none;
  background: rgba(182, 255, 42, 0.1);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-float-sm), inset 0 0 0 1px rgba(182, 255, 42, 0.35);
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
.irg-toast-stack {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 80;
  display: grid;
  gap: 0.45rem;
  max-width: min(22rem, calc(100vw - 2rem));
  pointer-events: none;
}
.irg-toast-stack .irg-toast {
  animation: irg-toast-in 0.25s ease-out, irg-toast-out 0.45s ease-in 2.3s forwards;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  background: rgba(12, 16, 22, 0.92);
  border-color: rgba(182, 255, 42, 0.45);
  color: var(--color-text);
}
.irg-toast--bad {
  border-color: rgba(248, 113, 113, 0.45);
  color: #fca5a5;
}
@keyframes irg-toast-in {
  from { opacity: 0; transform: translateY(-0.4rem); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes irg-toast-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
.admin-flash.is-busy {
  border-color: var(--color-border);
  background: rgba(255, 255, 255, 0.04);
}
.admin-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.admin-kpis div {
  padding: 0.55rem 0.65rem;
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.03);
}
.admin-kpis dt {
  margin: 0;
  color: var(--color-text-subtle);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.admin-kpis dd {
  margin: 0.15rem 0 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.admin-games {
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 720px) {
  .admin-games { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.admin-game-card {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  text-align: left;
  padding: 1rem 1.05rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: 0.9rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  color: inherit;
  cursor: pointer;
  min-height: 8.5rem;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
.admin-game-card .h3 {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.admin-game-card:hover:not(:disabled) {
  border-color: rgba(182, 255, 42, 0.45);
  background: rgba(182, 255, 42, 0.08);
}
.admin-game-card:disabled,
.admin-game-card.is-soon {
  cursor: not-allowed;
  opacity: 0.5;
}
.admin-game-card__kicker {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.admin-game-card.is-soon .admin-game-card__kicker {
  color: var(--color-text-subtle);
}
.admin-console {
  display: grid;
  gap: 0.75rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.admin-console__top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  align-items: center;
}
.admin-console__top h2 {
  margin: 0;
}
.admin-products {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.admin-chip {
  border: none;
  box-shadow: var(--shadow-float-sm);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-full);
  padding: 0.28rem 0.7rem;
  font-size: var(--text-xs);
}
.admin-chip.is-on {
  border-color: rgba(182, 255, 42, 0.55);
  background: rgba(182, 255, 42, 0.12);
  color: var(--color-accent);
}
.admin-chip:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.admin-slider {
  position: relative;
  overflow: hidden;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: 1rem;
  background: rgba(9, 9, 11, 0.55);
  max-width: 100%;
  min-width: 0;
}
.admin-slider__nav {
  display: flex;
  gap: 0.2rem;
  overflow-x: auto;
  padding: 0.45rem 0.55rem;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  scrollbar-width: none;
}
.admin-slider__nav::-webkit-scrollbar { display: none; }
.admin-slider__tab {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  padding: 0.38rem 0.7rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  font-size: var(--text-sm);
}
.admin-slider__tab.is-on {
  background: rgba(182, 255, 42, 0.14);
  color: var(--color-text);
}
.admin-slider__stage {
  position: relative;
}
.admin-slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  margin-top: -1rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: 999px;
  background: rgba(18, 18, 20, 0.86);
  color: var(--color-text);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.admin-slider__arrow.is-prev { left: 0.2rem; }
.admin-slider__arrow.is-next { right: 0.2rem; }
.admin-slider__arrow:disabled {
  opacity: 0;
  pointer-events: none;
}
.admin-slider__viewport {
  height: min(34rem, calc(100dvh - 12.5rem));
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
}
.admin-slider__viewport.is-dragging {
  cursor: grabbing;
  user-select: none;
}
.admin-slider__track {
  display: flex;
  height: 100%;
  will-change: transform;
}
.admin-slider__track.is-animating {
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.admin-slide {
  flex: 0 0 100%;
  min-width: 100%;
  height: 100%;
  overflow: auto;
  padding: 0.75rem 1rem 0.85rem 0.85rem;
  display: grid;
  gap: 0.7rem;
  align-content: start;
  scrollbar-width: thin;
}
.admin-slider__dots {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.45rem 0 0.6rem;
}
.admin-slider__dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.2);
  padding: 0;
}
.admin-slider__dot.is-on {
  background: var(--color-accent);
  transform: scale(1.2);
}
.admin-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.15rem 0 0.1rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.admin-pager button {
  min-width: 2rem;
  height: 2rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: 0.5rem;
  background: var(--color-surface);
  color: var(--color-text);
}
.admin-pager button:disabled {
  opacity: 0.35;
}
.admin-grid-2 {
  display: grid;
  gap: 0.65rem;
}
@media (min-width: 800px) {
  .admin-grid-2 { grid-template-columns: 1fr 1fr; }
}
.admin-cmd {
  display: grid;
  gap: 0.25rem;
  padding: 0.5rem 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
.admin-cmd:last-child { border-bottom: 0; }
.admin-cmd__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  justify-content: space-between;
}
.admin-cmd select {
  min-height: 2rem;
  padding: 0.3rem 0.5rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: 0.45rem;
  background: var(--color-bg-elevated);
  color: var(--color-text);
}
.admin-form select[multiple],
.admin-cmd select[multiple] {
  min-height: 7rem;
}
.admin-toggle {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  font-size: var(--text-sm);
}
.admin-lol-stack {
  display: grid;
  gap: var(--space-3);
}
.admin-lol-card {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: normal;
}
.admin-lol-card__lead {
  margin: 0.25rem 0 var(--space-3);
  font-size: var(--text-sm);
}
.admin-lol-card__note {
  margin: 0 0 var(--space-2);
  font-size: 0.8125rem;
}
.admin-lol-block__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.admin-lol-reward-group {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.admin-lol-reward-group:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.admin-lol-reward-group__head {
  display: grid;
  gap: 0.35rem;
}
.admin-lol-reward-group__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--color-text);
  letter-spacing: 0;
  text-transform: none;
}
.admin-lol-reward-group__lead {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}
.admin-lol-reward-group__badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 0.15rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.admin-lol-reward-group__badge--auto {
  border-color: color-mix(in srgb, #86efac 35%, transparent);
  color: #86efac;
}
.admin-lol-reward-group__badge--claim {
  border-color: color-mix(in srgb, var(--color-gold, #d4af37) 40%, transparent);
  color: var(--color-gold, #d4af37);
}
.admin-lol-reward-group__badge--soon {
  border-color: rgba(255, 255, 255, 0.12);
}
.admin-lol-field input[type="number"] {
  max-width: 11rem;
}
.admin-lol-grid-tight {
  gap: var(--space-3);
}
.admin-lol-field {
  display: grid;
  gap: 0.35rem;
  font-size: var(--text-sm);
}
.admin-duration-controls {
  display: grid;
  grid-template-columns: minmax(5rem, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-2);
}
.admin-duration-controls input[type="number"] {
  max-width: none;
}
.admin-lol-field__label {
  font-weight: 500;
  color: var(--color-text);
}
.admin-lol-field__hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}
.admin-field-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
  font-weight: 600;
  color: var(--color-text-muted);
}
.admin-field-label__text {
  line-height: 1.3;
}
.admin-field__head {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  max-width: 100%;
}
.admin-field__head .admin-field__label,
.admin-field__head .admin-field-label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--color-text-muted);
}
.admin-help-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  flex-shrink: 0;
  margin-left: 0.1rem;
}
.admin-help-tip__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, var(--color-text-muted) 85%, transparent);
  cursor: help;
  user-select: none;
  line-height: 0;
  transition: color 0.12s ease, background 0.12s ease;
}
.admin-help-tip__mark .irg-icon {
  width: 0.85rem;
  height: 0.85rem;
}
.admin-help-tip__mark:hover,
.admin-help-tip__mark:focus-visible {
  color: var(--color-gold, #d4af37);
  background: color-mix(in srgb, var(--color-gold, #d4af37) 12%, transparent);
  outline: none;
}
.admin-help-tip__bubble {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.4rem);
  transform: none;
  z-index: 50;
  width: max-content;
  max-width: min(20rem, 72vw);
  padding: 0.55rem 0.7rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: color-mix(in srgb, var(--color-bg) 94%, #000);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  color: var(--color-text);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, visibility 0.12s ease;
}
.admin-help-tip__bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0.55rem;
  transform: none;
  border: 5px solid transparent;
  border-top-color: color-mix(in srgb, var(--color-bg) 94%, #000);
}
.admin-help-tip:hover .admin-help-tip__bubble,
.admin-help-tip:focus-within .admin-help-tip__bubble {
  opacity: 1;
  visibility: visible;
}
.admin-check__text {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  line-height: 1.3;
}
.admin-check__text .admin-help-tip {
  margin-left: 0.05rem;
}
.admin-check-card__text .admin-help-tip {
  margin-left: 0.2rem;
}
.admin-hub-check .admin-help-tip {
  margin-left: 0.25rem;
}
.admin-lol-field input,
.admin-lol-field select,
.admin-lol-field textarea,
.admin-form .admin-lol-field input,
.admin-form .admin-lol-field select,
.admin-form .admin-lol-field textarea {
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-bg-elevated);
  color: var(--color-text);
  box-shadow: var(--shadow-float-sm);
  font: inherit;
}
.admin-lol-inline-field {
  margin-top: var(--space-3);
  max-width: 20rem;
}
.admin-lol-channel-editor {
  display: grid;
  gap: var(--space-2);
  max-width: 28rem;
}
.admin-lol-channel-current {
  margin: 0;
  font-size: var(--text-sm);
}
.admin-lol-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
  max-width: 100%;
}
.admin-role-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.admin-check-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 0;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  font: inherit;
  text-align: left;
}
.admin-form label.admin-check-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.admin-check-card:hover {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), var(--shadow-float-sm);
}
.admin-check-card--flat {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.admin-check-card--role {
  padding: 0.55rem 0.75rem;
}
.admin-check-card.is-disabled,
.admin-check-card:has(input:disabled) {
  opacity: 0.72;
  cursor: default;
}
.admin-check-card.is-disabled:hover,
.admin-check-card:has(input:disabled):hover {
  background: rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.admin-check-card__text {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text);
}
.admin-check-card__box {
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  min-height: 1rem;
  max-width: 1rem;
  max-height: 1rem;
  flex: 0 0 1rem;
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--color-accent);
  cursor: pointer;
  appearance: auto;
}
.admin-form .admin-check-card__box {
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  min-height: 1rem;
  max-width: 1rem;
  max-height: 1rem;
  padding: 0;
  box-shadow: none;
  border-radius: 0.2rem;
  background: transparent;
  flex: 0 0 1rem;
  align-self: center;
}
.admin-role-list > li.muted {
  padding: var(--space-2);
  font-size: var(--text-sm);
}
.admin-cmd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.admin-cmd-head .h3 {
  margin: 0;
}
.admin-cmd-head .admin-pager {
  flex: 0 0 auto;
  padding: 0;
}
.admin-lol-stack--commands .admin-lol-card {
  padding-inline: var(--space-2);
}
.admin-check-option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem;
  align-items: start;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  cursor: pointer;
}
.admin-check-option input[type="checkbox"] {
  width: 0.875rem;
  height: 0.875rem;
  margin: 0.15rem 0 0;
  flex-shrink: 0;
  accent-color: var(--color-accent);
}
.admin-check-option span {
  color: var(--color-text);
}
.admin-check-option--inline {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.2rem 0;
}
.admin-check-option--inline input[type="checkbox"] {
  margin: 0;
}
.admin-role-picks {
  display: grid;
  gap: 0.15rem;
  max-height: 11rem;
  overflow-y: auto;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.admin-role-picks--compact {
  max-height: 8rem;
}
.admin-cmd-list {
  display: grid;
  gap: var(--space-2);
}
.admin-cmd-acc {
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.admin-cmd-acc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  list-style: none;
  font-size: var(--text-sm);
  user-select: none;
}
.admin-cmd-acc__summary::-webkit-details-marker {
  display: none;
}
.admin-cmd-acc__summary::before {
  content: "▸";
  margin-right: 0.35rem;
  color: var(--color-text-muted);
  transition: transform 0.15s ease;
}
.admin-cmd-acc[open] .admin-cmd-acc__summary::before {
  transform: rotate(90deg);
}
.admin-cmd-acc__title {
  font-weight: 600;
  color: var(--color-text);
}
.admin-cmd-acc__status {
  font-size: 0.75rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-muted);
}
.admin-cmd-acc__status.is-on {
  background: rgba(182, 255, 42, 0.12);
  color: var(--color-accent);
}
.admin-cmd-acc__body {
  display: grid;
  gap: var(--space-2);
  padding: 0 var(--space-3) var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.admin-cmd-acc__enabled {
  margin-top: var(--space-2);
}
.admin-cmd-acc__note {
  margin: 0;
  font-size: 0.8125rem;
}
.admin-form label:not(.admin-lol-field):not(.admin-check-option):not(.admin-check-card):not(.admin-check):not(.admin-field) {
  display: grid;
  gap: 0.35rem;
  font-size: var(--text-sm);
}
.admin-form label:not(.admin-lol-field):not(.admin-check-option):not(.admin-check-card):not(.admin-check):not(.admin-field) select {
  padding: 0.45rem 0.55rem;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-bg-elevated);
  color: var(--color-text);
  box-shadow: var(--shadow-float-sm);
}
@media (prefers-reduced-motion: reduce) {
  .admin-slider__track.is-animating { transition: none; }
}
.match-card.is-highlight {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Shop + cosmetics — natural page scroll with generous vertical rhythm. */
main.section.section--shop,
#content.section.section--shop,
main#content.section.section--shop {
  --shop-sticky-top: calc(var(--header-offset) + var(--space-3));
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: calc(100svh - var(--header-offset));
  height: auto;
  max-height: none;
  margin-top: 0;
  padding-top: calc(var(--header-offset) + var(--space-4));
  padding-bottom: var(--space-24);
  overflow: visible;
}
.section--shop .section-head--shop,
.section--shop .section-head.section-head--shop {
  flex: 0 0 auto;
  margin: 0 auto var(--space-4);
}
body:has(.section--shop) #site-footer {
  margin-top: var(--space-12);
}
.shop-page {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  height: auto;
  max-height: none;
  padding-inline: 0;
  overflow: visible;
}
.shop-shell {
  /* Nav + catalog as one centered band — equal left/right page margins */
  display: grid;
  grid-template-columns: 11.5rem minmax(0, 1fr);
  grid-template-rows: auto;
  gap: var(--space-6);
  align-items: start;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  width: min(100% - var(--space-8), calc(var(--container) + 11.5rem + var(--space-5)));
  margin-inline: auto;
  padding-inline: 0;
}
.shop-float-nav {
  position: sticky;
  top: var(--shop-sticky-top);
  z-index: 12;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 11.5rem;
  max-height: calc(100svh - var(--header-offset) - var(--space-8));
  min-height: 0;
  margin-left: 0;
  padding: var(--space-2);
  overflow-x: hidden;
  overflow-y: auto;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: var(--shadow-float);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
  align-self: start;
  isolation: isolate;
}
.shop-float-nav::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 100vh;
  background: var(--color-bg);
  pointer-events: none;
}
.shop-float-nav::-webkit-scrollbar {
  width: 6px;
}
.shop-float-nav::-webkit-scrollbar-track {
  background: transparent;
}
.shop-float-nav::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}
.shop-float-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35);
}
.shop-float-nav a {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: background var(--ease), color var(--ease);
}
.shop-float-nav a:hover,
.shop-float-nav a.is-active,
.shop-float-nav__filter:hover,
.shop-float-nav__filter.is-active {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.06);
}
.shop-float-nav__filter {
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-align: left;
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
.shop-float-nav__rule {
  display: block;
  height: 1px;
  margin: var(--space-2) var(--space-2);
  background: var(--color-border);
}
.shop-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-content: stretch;
  min-width: 0;
  min-height: 0;
  max-width: none;
  height: auto;
  max-height: none;
  padding-bottom: 0;
  overflow: visible;
}
.shop-main__top,
.shop-main__chrome {
  min-width: 0;
}
.shop-main__top {
  position: sticky;
  top: var(--shop-sticky-top);
  z-index: 11;
  padding-top: var(--space-2);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-2);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.72);
  isolation: isolate;
  overflow: visible;
}
.shop-main__chrome {
  padding-bottom: var(--space-3);
}
.shop-main__top .shop-main__chrome {
  padding-bottom: 0;
}
.shop-main__top::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 100vh;
  background: var(--color-bg);
  pointer-events: none;
}
.shop-preview-dock-host:empty {
  display: none;
}
.shop-preview-dock {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  overflow: visible;
}
.shop-preview-dock__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.shop-preview-dock__label {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.shop-preview-dock__label strong {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}
.shop-preview-dock__dismiss {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2rem;
  padding-inline: var(--space-3);
}
.shop-preview-dock .shop-border-live-preview,
.shop-preview-dock .shop-banner-live-preview {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}
.shop-catalog {
  min-width: 0;
  min-height: 0;
  overflow: visible;
  padding-right: 0;
  padding-top: var(--space-2);
  padding-bottom: var(--space-12);
}
.shop-staff-toast {
  position: fixed;
  top: calc(var(--header-offset) + var(--space-3));
  left: 50%;
  z-index: 100;
  width: min(28rem, calc(100% - 2rem));
  transform: translateX(-50%);
  pointer-events: none;
}
.shop-staff-toast .admin-flash {
  pointer-events: auto;
  margin: 0;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.45);
}
.shop-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: baseline;
  margin-bottom: var(--space-3);
}
.shop-main__chrome .shop-head {
  margin-bottom: var(--space-2);
}
.shop-balance strong { color: var(--color-accent); font-size: 1.4rem; }
.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  margin-bottom: var(--space-2);
}
.shop-toolbar__search {
  flex: 1 1 14rem;
  min-width: 10rem;
}
.shop-toolbar__search input,
.shop-toolbar__filter select,
.shop-toolbar__sort select {
  width: 100%;
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  color: var(--color-text);
}
.shop-toolbar__filter,
.shop-toolbar__sort {
  flex: 0 0 10rem;
}
.shop-toolbar__views {
  display: inline-flex;
  gap: var(--space-1);
  margin-left: auto;
  padding: var(--space-1);
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
}
.shop-toolbar__views button {
  min-height: 2rem;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: calc(var(--radius-md) - 2px);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.shop-toolbar__views button.is-active,
.shop-toolbar__views button:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.06);
}
.shop-toolbar__filters-panel {
  flex: 1 1 100%;
  min-width: 0;
}
.shop-toolbar__filters {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.shop-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.shop-filter-chip {
  min-height: 1.85rem;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.shop-filter-chip:hover,
.shop-filter-chip.is-active {
  color: var(--color-text);
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}
.shop-filter-chip.is-active {
  border-color: rgba(182, 255, 42, 0.45);
  color: var(--color-accent);
  background: rgba(182, 255, 42, 0.08);
}
.shop-filter-clear {
  min-height: 1.85rem;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  text-decoration: underline;
  cursor: pointer;
}
.shop-pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: center;
  margin-top: var(--space-6);
  padding: var(--space-3) 0;
}
.shop-pager__meta {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.shop-admin-dd {
  position: relative;
  flex: 0 0 auto;
}
.shop-admin-dd__btn {
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.shop-admin-dd__btn.is-on {
  border-color: rgba(182, 255, 42, 0.4);
  color: var(--color-accent);
  background: rgba(182, 255, 42, 0.1);
}
.shop-admin-dd__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: 15rem;
  padding: var(--space-2);
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-md);
  background: rgba(9, 9, 11, 0.96);
  display: grid;
  gap: 2px;
}
.shop-admin-dd__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.shop-admin-dd__toggle .is-on { color: var(--color-accent); font-weight: 700; }
.shop-admin-dd__toggle .is-off { color: #f87171; font-weight: 700; }
.shop-admin-dd__menu hr {
  border: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  margin: var(--space-1) 0;
}
.shop-admin-dd__menu > button {
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
}
.shop-admin-dd__menu > button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.shop-admin-dd__menu > button:not(:disabled):hover {
  background: rgba(255, 255, 255, 0.06);
}
.shop-card-wrap {
  position: relative;
}
.shop-list-row-wrap,
.shop-detail.is-admin {
  position: relative;
}
.shop-list-row-wrap.is-admin .shop-list-row {
  padding-right: 7rem;
}
.shop-card-admin {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 4;
  display: flex;
  gap: 0.35rem;
}
.shop-card-admin__edit,
.shop-card-admin__x {
  height: 1.75rem;
  border-radius: var(--radius-sm);
  border: none;
  background: rgba(9, 9, 11, 0.9);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-float-xs);
}
.shop-card-admin__edit { padding: 0 0.65rem; }
.shop-card-admin__x {
  width: 1.75rem;
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.45);
  line-height: 1;
  font-size: 1rem;
}
.shop-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: rgba(0, 0, 0, 0.68);
  isolation: isolate;
}
.shop-modal__panel {
  width: min(100%, 36rem);
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-float);
  transform: translateZ(0);
}
.shop-modal__panel--huge { width: min(100%, 62rem); }
.shop-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
.shop-modal__close {
  width: 2rem;
  height: 2rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
}
.shop-modal__body {
  padding: var(--space-4);
  overflow: auto;
}
.shop-modal__warn {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: none;
  background: rgba(248, 113, 113, 0.08);
  color: #fca5a5;
  font-size: var(--text-sm);
  box-shadow: var(--shadow-float-sm), inset 0 0 0 1px rgba(248, 113, 113, 0.35);
}
.shop-manage-modal {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: var(--space-4);
  min-height: 0;
}
.shop-manage-modal__nav {
  display: grid;
  gap: var(--space-1);
  align-content: start;
}
.shop-manage-modal__nav button {
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
}
.shop-manage-modal__nav button.is-active,
.shop-manage-modal__nav button:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.06);
}
.shop-manage-modal__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  margin-left: 0.4rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.25);
  color: var(--color-text);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}
.shop-manage-modal__page {
  min-width: 0;
}
/* Admin hub modal (legacy) */
.admin-hub-modal__panel--mega {
  width: min(100%, 72rem);
  max-height: min(92vh, 52rem);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.admin-hub-modal__body {
  padding: 0;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Full-page admin — no card/panel chrome; nav flush to the left edge */
.admin-page {
  --admin-content-max: 52rem;
  --admin-content-max-wide: 76rem;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
  /* Fixed viewport height so inner .admin-hub__main can scroll */
  height: calc(100dvh - var(--header-offset, 4.5rem));
  max-height: calc(100dvh - var(--header-offset, 4.5rem));
  min-height: 0;
  overflow: hidden;
}

main.admin-page,
#content.admin-page,
main#content.admin-page {
  /* Header already offsets site chrome; don't double-pad away the scrollport */
  padding: 0;
  margin-top: var(--header-offset, 4.5rem);
  height: calc(100dvh - var(--header-offset, 4.5rem));
  max-height: calc(100dvh - var(--header-offset, 4.5rem));
}

.admin-page__status {
  padding: var(--space-4) var(--space-5);
  width: 100%;
  max-width: var(--admin-content-max);
  margin-inline: auto;
  text-align: center;
  box-sizing: border-box;
}

.admin-page__bar {
  display: flex;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0.65rem var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: color-mix(in srgb, var(--color-surface) 40%, transparent);
  box-sizing: border-box;
}
.admin-page__bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  max-width: none;
  min-width: 0;
}

.admin-page__bar-inner .admin-page__nav-toggle {
  order: -1;
}
.admin-page__nav-toggle {
  display: none;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
.admin-page__crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15rem;
  min-width: 0;
  flex: 1 1 auto;
  font-size: 0.88rem;
}
.admin-page__crumb-root {
  color: var(--color-text-muted);
  font-weight: 500;
}
.admin-page__crumb {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  color: var(--color-text-muted);
}
.admin-page__crumb .is-current {
  color: var(--color-text);
  font-weight: 600;
}
.admin-page__crumb-sep {
  opacity: 0.55;
}
.admin-page__bar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
}
.admin-page__bar-hint {
  display: none;
  max-width: 22rem;
  font-size: 0.75rem;
  text-align: right;
  line-height: 1.3;
}
@media (min-width: 1100px) {
  .admin-page__bar-hint {
    display: block;
  }
}
.admin-page__exit {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: inherit;
  text-decoration: none;
  font-size: 0.82rem;
  background: rgba(255, 255, 255, 0.03);
}
.admin-page__exit:hover {
  background: rgba(255, 255, 255, 0.07);
}
.admin-page__bar-title {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}
.admin-page__bar-kicker {
  font-size: var(--text-sm);
  font-weight: 400;
}

/* Shared admin section layout */
.admin-section-shell {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.admin-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.admin-section-header__text {
  min-width: 0;
  flex: 1 1 12rem;
  overflow-wrap: anywhere;
}
.admin-section-header__title {
  margin: 0;
  font-size: var(--text-xl, 1.25rem);
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.admin-section-header__desc {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}
.admin-section-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  max-width: 100%;
}
.admin-subnav {
  flex: 0 0 auto;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.admin-subnav__track {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  padding: 0 var(--space-1) var(--space-2);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.admin-subnav__track::-webkit-scrollbar {
  display: none;
}
.admin-subnav__tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.admin-subnav__tab.is-active,
.admin-subnav__tab:hover:not(:disabled) {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.06);
}
.admin-subnav__tab:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.admin-subnav__badge,
.admin-nav-badge,
.shop-manage-modal__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.25);
  color: var(--color-text);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}
.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.admin-toolbar__search {
  flex: 1 1 16rem;
  min-width: 0;
}
.admin-content-body {
  min-width: 0;
  max-width: 100%;
  display: grid;
  gap: var(--space-5);
  align-content: start;
}
.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: var(--space-3);
}
.admin-stat-grid--compact {
  margin-bottom: 0;
}
.admin-stat {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
.admin-stat__label {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
}
.admin-stat strong {
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}
.admin-stat strong.is-ok { color: #86efac; }
.admin-stat strong.is-warn { color: #fca5a5; }
.admin-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--space-3);
}
.admin-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: normal;
}
.admin-card:hover:not(.is-disabled) {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}
.admin-card.is-disabled,
.admin-card:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.admin-card-grid:not(.admin-hub-link-grid) .admin-card {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.admin-section-layout,
.shop-manage-modal {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: var(--space-4);
  min-height: 0;
}
.admin-section-layout__nav,
.shop-manage-modal__nav {
  display: grid;
  gap: var(--space-1);
  align-content: start;
}
.admin-section-layout__body,
.shop-manage-modal__page {
  min-width: 0;
}
.admin-console__panel {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.admin-page .admin-hub {
  /* flex-basis 0 forces a bounded height so overflow-y on __main works */
  flex: 1 1 0;
  min-height: 0;
  height: auto;
  max-height: none;
  display: grid;
  grid-template-columns: 16.75rem minmax(0, 1fr);
  overflow: hidden;
}

.admin-hub {
  display: grid;
  grid-template-columns: 16.75rem minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}
.admin-hub__nav {
  overflow: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  max-height: 100%;
  padding: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 28%),
    color-mix(in srgb, var(--color-surface) 55%, transparent);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.admin-hub__nav-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: var(--space-4) var(--space-3) var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex: 0 0 auto;
}
.admin-hub__nav-brand-mark {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1a1408;
  background: linear-gradient(145deg, #f0d78c, var(--color-gold, #d4af37));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.admin-hub__nav-brand-copy {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}
.admin-hub__nav-brand-copy strong {
  font-size: 0.95rem;
  line-height: 1.2;
}
.admin-hub__nav-brand-copy .muted {
  font-size: 0.72rem;
}
.admin-hub__nav-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-3) var(--space-2) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.admin-hub__nav-group {
  display: grid;
  gap: 0.2rem;
}
.admin-hub__nav-group--sub {
  padding-top: var(--space-2);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.admin-hub__nav-kicker {
  font-size: 0.65rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 0 var(--space-2) 0.35rem;
}
.admin-hub__guild-picker {
  display: grid;
  gap: 0.35rem;
  padding: var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  flex: 0 0 auto;
}
.admin-hub__guild-menu {
  z-index: 5;
}
.admin-hub__guild-trigger {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.65rem;
  background: color-mix(in srgb, var(--color-bg) 70%, transparent);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.admin-hub__guild-trigger:hover:not(:disabled),
.admin-hub__guild-trigger.is-open {
  border-color: color-mix(in srgb, var(--color-gold, #d4af37) 45%, rgba(255, 255, 255, 0.15));
  background: color-mix(in srgb, var(--color-bg) 55%, rgba(255, 255, 255, 0.04));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-gold, #d4af37) 18%, transparent);
}
.admin-hub__guild-trigger:disabled,
.admin-hub__guild-trigger.is-locked {
  cursor: default;
  opacity: 0.92;
}
.admin-hub__guild-trigger-icon {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.45rem;
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-gold, #d4af37);
  flex: 0 0 auto;
}
.admin-hub__guild-trigger-copy {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
  flex: 1 1 auto;
}
.admin-hub__guild-trigger-copy strong {
  font-size: 0.82rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-hub__guild-trigger-copy .muted {
  font-size: 0.68rem;
}
.admin-hub__guild-trigger-chevron {
  color: var(--color-text-muted);
  transition: transform 0.18s ease;
  flex: 0 0 auto;
}
.admin-hub__guild-trigger.is-open .admin-hub__guild-trigger-chevron {
  transform: rotate(180deg);
}
.admin-hub__guild-dropdown {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  top: calc(100% - 0.35rem);
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: color-mix(in srgb, var(--color-bg) 92%, #000);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.03);
  display: grid;
  gap: 0.15rem;
  z-index: 20;
  animation: admin-hub-dropdown-in 0.16s ease;
}
@keyframes admin-hub-dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.admin-hub__guild-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.55rem 0.6rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.admin-hub__guild-option:hover,
.admin-hub__guild-option.is-selected {
  background: rgba(255, 255, 255, 0.06);
}
.admin-hub__guild-option-copy {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
  flex: 1 1 auto;
}
.admin-hub__guild-option-copy strong {
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-hub__guild-option-copy .muted {
  font-size: 0.65rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.admin-hub__guild-select {
  width: 100%;
  font: inherit;
  font-size: var(--text-sm);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
  background: transparent;
  color: inherit;
}
.admin-hub__nav-item {
  display: grid;
  gap: 0.15rem;
}
.admin-hub__nav-row {
  display: flex;
  align-items: stretch;
  gap: 0.15rem;
  min-width: 0;
}
.admin-hub__nav-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 0.55rem;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.admin-hub__nav-btn--sub {
  padding-left: var(--space-3);
  font-size: 0.8125rem;
}
.admin-hub__nav-btn:hover:not(.is-disabled) {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.05);
}
.admin-hub__nav-btn.is-active,
.admin-hub__nav-item.is-active > .admin-hub__nav-row > .admin-hub__nav-btn {
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-gold, #d4af37) 12%, rgba(255, 255, 255, 0.04));
  box-shadow: inset 2px 0 0 var(--color-gold, #d4af37);
}
.admin-hub__nav-btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.admin-hub__nav-chevron {
  display: grid;
  place-items: center;
  width: 1.85rem;
  min-height: 2.35rem;
  flex: 0 0 auto;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: background 0.15s ease, color 0.15s ease;
}
.admin-hub__nav-chevron:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.05);
}
.admin-hub__nav-chevron .irg-icon {
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.admin-hub__nav-item.is-expanded > .admin-hub__nav-row > .admin-hub__nav-chevron .irg-icon {
  transform: rotate(180deg);
}
.admin-hub__nav-label {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.admin-hub__nav-tag {
  font-size: 0.62rem;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.15);
  color: var(--color-gold, #d4af37);
}
.admin-hub__nav-children {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.18s ease;
  pointer-events: none;
}
.admin-hub__nav-children.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  pointer-events: auto;
}
.admin-hub__nav-children-clip {
  overflow: hidden;
  min-height: 0;
}
.admin-hub__nav-children-panel {
  display: grid;
  gap: 0.1rem;
  margin: 0.1rem 0 0.25rem 0.85rem;
  padding: 0.2rem 0 0.2rem 0.65rem;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.admin-hub__nav-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  width: 100%;
  padding: 0.42rem 0.55rem;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.8rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.admin-hub__nav-child:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.05);
}
.admin-hub__nav-child.is-active {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.07);
}
.admin-hub-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.admin-hub__main {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  max-height: 100%;
  padding: var(--space-5) var(--space-4);
  transition: opacity 0.15s ease;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
}
.admin-hub__content {
  width: 100%;
  max-width: var(--admin-content-max, 52rem);
  margin-inline: auto;
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
}
.admin-hub__content:has(.admin-hub-tournament),
.admin-hub__content:has(.admin-hub-shop),
.admin-hub__content:has(.admin-catalog),
.admin-hub__content:has(.admin-console),
.admin-hub__content:has(.admin-role-perms),
.admin-hub__content:has(.admin-announce-editor),
.admin-hub__content:has(.admin-nav-editor),
.admin-hub__content:has(.admin-hub-website),
.admin-hub__content:has(.ticket-admin),
.admin-hub__content:has(.admin-hub-tickets),
.admin-hub__content:has(.admin-health-panel),
.admin-hub__content:has(.admin-donations),
.admin-hub__content:has(.admin-logging) {
  max-width: var(--admin-content-max-wide, 76rem);
}

/* ── Admin CRM visual uplift (Stripe/Linear density on IRG gold dark) ── */
.admin-page {
  --admin-control-h: 2.25rem;
  --admin-control-radius: 0.5rem;
  --admin-panel-pad: 1rem 1.1rem;
  --admin-gap: 0.75rem;
  --admin-gap-lg: 1.25rem;
  --admin-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%23a1a1aa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.admin-hub__main {
  font-size: 0.875rem;
  line-height: 1.45;
}

.admin-section-header {
  gap: 0.65rem;
  padding-bottom: 0.15rem;
  margin-bottom: 0.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 0.85rem;
}
.admin-section-header__title {
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  font-weight: 650;
}
.admin-section-header__desc {
  font-size: 0.8125rem;
  max-width: 46rem;
  line-height: 1.45;
}

.admin-stat-grid {
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 0.65rem;
}
.admin-stat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 5.25rem;
  padding: 0.85rem 0.95rem;
  border-radius: 0.7rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
.admin-stat__label {
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0;
}
.admin-stat strong,
.admin-stat__value {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.admin-stat__value.is-ok { color: #86efac; }
.admin-stat__value.is-warn { color: #fca5a5; }
.admin-stat__value--compact {
  display: block;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
  font-weight: 650;
}
.admin-stat__value .admin-stat__value--compact {
  font-size: 0.95rem;
}
.admin-stat__meta {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.68rem;
  font-weight: 500;
  font-family: var(--font-mono);
  color: var(--color-text-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Shared modern controls across all admin panels */
.admin-page input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
.admin-page select,
.admin-page textarea {
  min-height: var(--admin-control-h);
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--admin-control-radius);
  background: color-mix(in srgb, var(--color-bg) 78%, #000);
  color: var(--color-text);
  font: inherit;
  font-size: 0.8125rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.admin-page .admin-form input:not([type="checkbox"]):not([type="radio"]),
.admin-page .admin-form select,
.admin-page .admin-form textarea,
.admin-page .admin-field input:not([type="checkbox"]):not([type="radio"]),
.admin-page .admin-field select,
.admin-page .admin-field textarea,
.admin-page .admin-panel input:not([type="checkbox"]):not([type="radio"]),
.admin-page .admin-panel select,
.admin-page .admin-panel textarea {
  width: 100%;
}
.admin-page .admin-table select,
.admin-page .admin-actions select,
.admin-page .admin-toolbar select,
.admin-page .admin-inline select {
  width: auto;
  min-width: 6.5rem;
  max-width: 100%;
}
.admin-page textarea {
  min-height: 5.5rem;
  resize: vertical;
  line-height: 1.45;
}
.admin-page select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2rem;
  background-image: var(--admin-select-chevron);
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 0.75rem;
  cursor: pointer;
}
.admin-page input:hover:not(:disabled):not([type="checkbox"]):not([type="radio"]),
.admin-page select:hover:not(:disabled),
.admin-page textarea:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.16);
}
.admin-page input:focus-visible:not([type="checkbox"]):not([type="radio"]),
.admin-page select:focus-visible,
.admin-page textarea:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--color-gold, #d4af37) 55%, rgba(255, 255, 255, 0.2));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--color-gold, #d4af37) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.admin-page input:disabled,
.admin-page select:disabled,
.admin-page textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.admin-field,
.admin-form label.admin-field,
.admin-page label.admin-field {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  font: inherit;
  color: inherit;
}
.admin-field__label,
.admin-field > span:first-child:not(.admin-field__hint) {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--color-text-muted);
}
.admin-field__hint {
  font-size: 0.72rem;
  color: var(--color-text-subtle);
  line-height: 1.35;
}
.admin-field__input-suffix {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.admin-field__input-suffix input {
  min-width: 0;
}
.admin-field__input-suffix-label {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  font-size: 0.78rem;
}
.admin-form {
  display: grid;
  gap: var(--admin-gap);
}
.admin-form--grid {
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  gap: 0.75rem 0.85rem;
}
.admin-form--grid .admin-field--wide {
  grid-column: 1 / -1;
}

.admin-panel {
  display: grid;
  gap: 0.85rem;
  padding: var(--admin-panel-pad);
  border-radius: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015));
  box-shadow: none;
}
.admin-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.admin-panel__title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.admin-panel__desc {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
  max-width: 40rem;
}
.admin-panel__body {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}
.admin-panel--flat {
  background: transparent;
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.1);
}

.admin-banner {
  margin: 0;
  padding: 0.7rem 0.85rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.8125rem;
  line-height: 1.4;
}
.admin-banner--error,
.donate-alert.donate-alert--error {
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.1);
  color: #fecaca;
}
.admin-banner--ok {
  border-color: rgba(134, 239, 172, 0.28);
  background: rgba(134, 239, 172, 0.08);
  color: #bbf7d0;
}

.admin-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}
.admin-status--ok {
  color: #86efac;
  background: rgba(134, 239, 172, 0.1);
  border-color: rgba(134, 239, 172, 0.22);
}
.admin-status--warn {
  color: #fcd34d;
  background: rgba(252, 211, 77, 0.1);
  border-color: rgba(252, 211, 77, 0.22);
}
.admin-status--danger {
  color: #fca5a5;
  background: rgba(248, 113, 113, 0.1);
  border-color: rgba(248, 113, 113, 0.22);
}
.admin-status--muted {
  color: var(--color-text-muted);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

.admin-table-wrap {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--color-bg) 70%, transparent);
  overflow: hidden;
}
.admin-table--ledger {
  table-layout: auto;
}
.admin-table--ledger th {
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.65rem 0.75rem;
  background: rgba(255, 255, 255, 0.025);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
.admin-table--ledger td {
  padding: 0.7rem 0.75rem;
  font-size: 0.8125rem;
  vertical-align: middle;
}
.admin-table--ledger tbody tr:hover td {
  background: rgba(255, 255, 255, 0.025);
}
.admin-actions--compact {
  gap: 0.35rem;
}
.admin-actions--compact .btn,
.admin-actions--compact .btn-sm {
  min-height: 1.75rem;
  padding: 0 0.55rem;
  font-size: 0.7rem;
  border-radius: 0.45rem;
}

.admin-pill-list,
.admin-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.admin-pill-list li,
.admin-checklist li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.8125rem;
}
.admin-checklist {
  counter-reset: admin-check;
}
.admin-checklist li {
  counter-increment: admin-check;
  padding-left: 2.4rem;
  position: relative;
}
.admin-checklist li::before {
  content: counter(admin-check);
  position: absolute;
  left: 0.55rem;
  top: 0.5rem;
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #1a1408;
  background: linear-gradient(145deg, #f0d78c, var(--color-gold, #d4af37));
}

.admin-hub-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.admin-hub-section,
.admin-donations,
.admin-console,
.admin-hub-home,
.admin-health-panel {
  display: grid;
  gap: var(--admin-gap-lg);
}
.admin-console--crm .admin-console__panel {
  gap: var(--admin-gap-lg);
}
.stack-md {
  display: grid;
  gap: var(--space-5);
}
.stack-sm {
  display: grid;
  gap: var(--space-3);
}
.admin-donations .stack-md {
  gap: var(--admin-gap-lg);
}
.admin-donations .stack-sm {
  gap: var(--admin-gap);
}
.admin-donations .admin-card {
  /* Prefer admin-panel; soften legacy cards if still present */
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015));
  padding: var(--admin-panel-pad);
  gap: 0.75rem;
}
.admin-check {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 0.45rem 0.65rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.8125rem;
  line-height: 1.3;
  cursor: pointer;
  box-sizing: border-box;
}
.admin-form--grid .admin-check,
.admin-form--grid .admin-check-card {
  grid-column: 1 / -1;
  width: fit-content;
  max-width: 100%;
}
.admin-check input[type="checkbox"],
.admin-check input[type="radio"] {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  min-height: 0;
  margin: 0;
  accent-color: var(--color-gold, #d4af37);
  cursor: pointer;
}
.admin-check-list {
  display: grid;
  gap: 0.4rem;
  justify-items: start;
}

/* Kill space-between / full-width checkbox sprawl across admin */
.admin-page label:has(> input[type="checkbox"]):not(.admin-check-card):not(.admin-shop-switch):not(.admin-switch) {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  width: fit-content;
  max-width: 100%;
}
.admin-page label:has(> input[type="checkbox"]):not(.admin-check-card) > input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--color-gold, #d4af37);
}
.admin-role-list .admin-check,
.admin-role-picks .admin-check {
  width: 100%;
  max-width: 100%;
}
.admin-role-perms__acc-master.admin-check {
  padding: 0 0.85rem;
  border: none;
  background: transparent;
}
.admin-role-perms__feature.admin-check {
  padding: 0.35rem 0.55rem;
}
.admin-cmd-acc__enabled.admin-check {
  width: 100%;
  max-width: 100%;
}

.admin-page .btn {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  box-shadow: none;
  min-height: 2.15rem;
  padding-inline: 0.85rem;
  font-size: 0.8125rem;
}
.admin-page .admin-help-tip__mark {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: inherit;
}
.admin-page .btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-surface-hover) 85%, transparent);
  border-color: rgba(255, 255, 255, 0.14);
}
.admin-page .btn-accent {
  border-color: color-mix(in srgb, var(--color-gold, #d4af37) 45%, transparent);
  background: color-mix(in srgb, var(--color-gold, #d4af37) 18%, rgba(255, 255, 255, 0.04));
  color: #f8e7b0;
}
.admin-page .btn-accent:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-gold, #d4af37) 28%, rgba(255, 255, 255, 0.05));
}
.admin-page .btn-ghost {
  background: transparent;
  box-shadow: none;
}
.admin-page .btn-sm {
  min-height: 1.75rem;
  padding-inline: 0.55rem;
  font-size: 0.7rem;
}

.admin-hub-toolbar .btn,
.donations-pagination .btn {
  min-height: 1.9rem;
  font-size: 0.75rem;
}

@media (max-width: 720px) {
  .admin-form--grid {
    grid-template-columns: 1fr;
  }
}

.admin-hub-shop-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
.admin-hub-shop-tabs button {
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.admin-hub-shop-tabs button.is-active,
.admin-hub-shop-tabs button:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.06);
}
.admin-catalog__loading,
.admin-catalog__retry {
  margin-bottom: var(--space-3);
}
.admin-hub-shop-panel {
  min-width: 0;
  max-width: 100%;
  width: 100%;
}
.admin-hub-shop {
  max-width: 100%;
  width: 100%;
  min-width: 0;
}
.admin-catalog {
  display: grid;
  grid-template-columns: 11.5rem minmax(0, 1fr);
  gap: var(--space-4);
  min-height: 0;
  align-items: start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.admin-catalog__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background: rgba(9, 9, 11, 0.72);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-float);
  max-height: none;
  overflow-y: auto;
  position: sticky;
  top: 0;
}
.admin-catalog__nav button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-align: left;
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
.admin-catalog__nav button.is-active,
.admin-catalog__nav button:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.06);
}
.admin-catalog__count {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  opacity: 0.85;
}
.admin-catalog__nav button.is-active .admin-catalog__count {
  color: var(--color-text);
}
.admin-catalog__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.25);
  color: var(--color-text);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}
.admin-catalog__rule {
  display: block;
  height: 1px;
  margin: var(--space-2) var(--space-1);
  background: var(--color-border);
}
.admin-catalog__main {
  min-width: 0;
}
.admin-catalog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.admin-catalog__head .h3 {
  margin: 0 0 0.15rem;
}
.admin-catalog__toolbar {
  margin-bottom: var(--space-2);
}
.admin-catalog__filters {
  margin-bottom: var(--space-3);
}
.admin-catalog__subnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.admin-catalog__subnav button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}
.admin-catalog__subnav button.is-active,
.admin-catalog__subnav button:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.08);
}
.admin-catalog-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.admin-catalog-list__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-float-sm);
}
.admin-catalog-list__row--visual {
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
}
.admin-catalog-list__visual {
  width: 4.75rem;
  height: 4.75rem;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
}
.admin-catalog-preview {
  width: 100%;
  height: 100%;
  min-height: 0;
}
.admin-catalog-preview .shop-card__visual {
  width: 100%;
  height: 100%;
  min-height: 0;
}
.admin-catalog-list__actions,
.admin-catalog-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}
.admin-catalog-list__body {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}
.admin-catalog-list__body strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-catalog-list__flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}
.admin-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--space-3);
}
.admin-catalog-card {
  display: grid;
  gap: var(--space-2);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: var(--shadow-float-sm);
  overflow: hidden;
}
.admin-catalog-card__visual {
  aspect-ratio: 4 / 3;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.admin-catalog-card__visual .admin-catalog-preview {
  height: 100%;
}
.admin-catalog-card__visual .shop-card__visual {
  height: 100%;
  min-height: 8rem;
}
.admin-catalog-card__body {
  display: grid;
  gap: 0.25rem;
  padding: 0 var(--space-3);
}
.admin-catalog-card__actions {
  padding: 0 var(--space-3) var(--space-3);
}
.admin-catalog-card__hit {
  display: grid;
  gap: 0.25rem;
  padding: var(--space-3);
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.admin-catalog-card__hit:hover {
  background: rgba(255, 255, 255, 0.04);
}
.admin-catalog-card.is-editing {
  box-shadow: var(--shadow-float);
}
.admin-catalog-card .admin-shop-panel {
  border-radius: 0;
  box-shadow: none;
}
.admin-catalog__add {
  margin-bottom: var(--space-3);
}
.admin-catalog__pager {
  margin-top: var(--space-3);
}
.pill--muted {
  opacity: 0.75;
}
@media (max-width: 860px) {
  .admin-catalog {
    grid-template-columns: 1fr;
  }
  .admin-catalog__nav {
    position: static;
    max-height: none;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .admin-catalog__rule {
    display: none;
  }
  .admin-catalog-list__row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}
.shop-assets--embedded {
  min-height: 24rem;
}
.shop-assets--embedded .shop-assets__hint {
  margin-bottom: 0.75rem;
}
.admin-hub__main.is-transitioning {
  opacity: 0.72;
}
.admin-hub-page {
  animation: admin-hub-fade-in 0.22s ease;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
@keyframes admin-hub-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.admin-hub-home__head {
  margin-bottom: var(--space-4);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.admin-hub-home__head .h3,
.admin-hub-home__head .muted {
  overflow-wrap: anywhere;
}
.admin-hub-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  width: 100%;
  max-width: 100%;
}
.admin-hub-stats--compact {
  margin-bottom: var(--space-3);
}
.admin-hub-stat {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
.admin-hub-stat__label {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
}
.admin-hub-stat strong {
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}
.admin-hub-stat strong.is-ok { color: #86efac; }
.admin-hub-stat strong.is-warn { color: #fca5a5; }
.admin-hub-quicklinks__title {
  font-size: var(--text-sm);
  font-weight: 600;
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
}
.admin-hub-quicklinks__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.admin-hub-quicklink {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
.admin-hub-quicklink:hover {
  border-color: rgba(212, 175, 55, 0.35);
  background: rgba(212, 175, 55, 0.06);
}
.admin-hub-quicklink__ext {
  opacity: 0.5;
  margin-top: auto;
}
.admin-games--compact {
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}
.admin-hub-section {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.admin-hub-section:has(.admin-role-perms) {
  max-width: 100%;
}
.admin-hub-section--soon {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  max-width: 36rem;
  margin-inline: auto;
}

/* Unified Logging workspace */
.admin-logging__note {
  margin: 0 0 0.85rem;
  font-size: 0.8125rem;
}
.admin-logging__layout {
  display: grid;
  grid-template-columns: minmax(11.5rem, 14.5rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.admin-logging__rail {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  position: sticky;
  top: 0.5rem;
  padding: 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--color-bg) 72%, transparent);
}
.admin-logging__source {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.admin-logging__source strong {
  font-size: 0.8125rem;
  font-weight: 650;
}
.admin-logging__source .muted {
  font-size: 0.7rem;
  line-height: 1.35;
}
.admin-logging__source:hover {
  background: rgba(255, 255, 255, 0.04);
}
.admin-logging__source.is-active {
  background: rgba(212, 175, 55, 0.12);
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.28);
}
.admin-logging__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.admin-logging__filters {
  align-items: end;
  gap: 0.65rem 0.75rem;
}
.admin-logging__filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-bottom: 0.1rem;
}
.admin-logging__table-wrap {
  max-height: min(70vh, 42rem);
  overflow: auto;
}
.admin-logging__table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--color-bg) 92%, #1a1a1a);
}
.admin-logging__table td:last-child,
.admin-logging__table th:last-child {
  min-width: 10rem;
}
.admin-logging__pager {
  justify-content: flex-start;
}
@media (max-width: 900px) {
  .admin-logging__layout {
    grid-template-columns: 1fr;
  }
  .admin-logging__rail {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-x: auto;
  }
  .admin-logging__source {
    min-width: 9.5rem;
    flex: 1 1 9.5rem;
  }
}

.admin-hub-home {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.admin-role-perms {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.admin-role-perms__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.admin-role-perms__title {
  margin: 0;
  font-size: 1.05rem;
}
.admin-role-perms__lead {
  margin: 0.3rem 0 0;
  max-width: 36rem;
  font-size: 0.85rem;
}
.admin-role-perms__guild {
  display: grid;
  gap: 0.15rem;
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: right;
}
.admin-role-perms__guild-name {
  font-size: 0.8rem;
  font-weight: var(--weight-semibold);
}
.admin-role-perms__guild-id {
  font-size: 0.7rem;
  color: var(--color-text-subtle);
}
.admin-role-perms__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin-bottom: var(--space-3);
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.75rem;
  color: var(--color-text-subtle);
}
.admin-role-perms__legend strong {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}
.admin-role-perms__intro {
  margin-bottom: var(--space-4);
}
.admin-role-perms__intro .muted {
  margin: 0.35rem 0 0;
}
.admin-role-perms__layout {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 720px) {
  .admin-role-perms__layout {
    grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr);
    align-items: start;
  }
}
.admin-role-perms__search {
  display: block;
  margin-bottom: var(--space-2);
}
.admin-role-perms__search input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
}
.admin-role-perms__roles .admin-role-picks {
  max-height: min(28rem, 60vh);
}
.admin-role-perms__role {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.admin-role-perms__role + .admin-role-perms__role {
  margin-top: 0.2rem;
}
.admin-role-perms__role.is-active,
.admin-role-perms__role:hover {
  border-color: rgba(212, 175, 55, 0.35);
  background: rgba(212, 175, 55, 0.08);
}
.admin-role-perms__role-name {
  font-weight: var(--weight-semibold);
  font-size: 0.85rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-role-perms__mode-pill {
  flex-shrink: 0;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-full);
  font-size: 0.65rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-subtle);
}
.admin-role-perms__mode-pill--full {
  background: rgba(212, 175, 55, 0.2);
  color: #e8d48a;
}
.admin-role-perms__mode-pill--admin {
  background: rgba(96, 165, 250, 0.18);
  color: #93c5fd;
}
.admin-role-perms__mode-pill--custom {
  background: rgba(52, 211, 153, 0.16);
  color: #6ee7b7;
}
.admin-role-perms__mode-pill--none {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-subtle);
}
.admin-role-perms__editor-head {
  margin-bottom: var(--space-2);
}
.admin-role-perms__editor-title {
  margin: 0;
  font-size: 1.05rem;
}
.admin-role-perms__role-id {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
}
.admin-role-perms__mode-block {
  margin-bottom: var(--space-3);
}
.admin-role-perms__mode-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.45rem;
  font-size: 0.8rem;
  font-weight: var(--weight-semibold);
}
.admin-role-perms__mode-seg {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.25rem;
  padding: 0.2rem;
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.admin-role-perms__mode-seg button {
  padding: 0.45rem 0.35rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-subtle);
  font: inherit;
  font-size: 0.78rem;
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.admin-role-perms__mode-seg button:hover:not(:disabled) {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.05);
}
.admin-role-perms__mode-seg button.is-active {
  background: rgba(212, 175, 55, 0.18);
  color: #f0e2a8;
}
.admin-role-perms__mode-seg button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.admin-role-perms__mode-hint,
.admin-role-perms__empty-state {
  margin: 0.55rem 0 0;
  font-size: 0.78rem;
}
.admin-role-perms__group {
  margin-bottom: var(--space-3);
}
.admin-role-perms__perm-desc {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  font-weight: var(--weight-regular);
  color: var(--color-text-subtle);
}
.admin-role-perms__accordions {
  display: grid;
  gap: 0.35rem;
}
.admin-role-perms__acc {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}
.admin-role-perms__acc.is-open {
  border-color: rgba(212, 175, 55, 0.28);
}
.admin-role-perms__acc.is-disabled {
  opacity: 0.85;
}
.admin-role-perms__acc-head {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
}
.admin-role-perms__acc-toggle {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.admin-role-perms__acc-toggle:hover {
  background: rgba(255, 255, 255, 0.04);
}
.admin-role-perms__acc-chevron {
  flex-shrink: 0;
  width: 0.9rem;
  margin-top: 0.1rem;
  color: var(--color-text-subtle);
}
.admin-role-perms__acc-label {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  font-weight: var(--weight-semibold);
  line-height: 1.35;
}
.admin-role-perms__acc-master {
  display: flex;
  align-items: center;
  padding: 0 0.85rem;
  cursor: pointer;
}
.admin-role-perms__acc-body {
  display: grid;
  gap: 0.3rem;
  padding: 0 0.55rem 0.55rem 1.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 0.45rem;
}
.admin-role-perms__feature:not(.admin-check) {
  padding: 0.4rem 0.6rem;
}
.admin-role-perms__empty {
  margin: 0.25rem 0 0.35rem;
  font-size: 0.8rem;
}
.admin-members-quicklinks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--space-3);
}
.admin-members-quicklink {
  display: inline-flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 8.5rem;
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.admin-members-quicklink:hover {
  border-color: rgba(212, 175, 55, 0.35);
  background: rgba(212, 175, 55, 0.08);
}
.admin-members-quicklink strong {
  font-size: 0.85rem;
}
.admin-members-quicklink .muted {
  font-size: 0.72rem;
}
@media (max-width: 520px) {
  .admin-role-perms__mode-seg {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.admin-hub-link-cards {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.admin-hub-link-card {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: var(--space-3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease;
  min-width: 0;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.admin-hub-link-card strong,
.admin-hub-link-card p,
.admin-hub-link-card .muted {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.admin-hub-link-card:hover:not(.is-soon) {
  border-color: rgba(212, 175, 55, 0.35);
}
.admin-hub-link-card.is-soon {
  opacity: 0.55;
  cursor: not-allowed;
}
.admin-hub-link-card__action {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-gold, #d4af37);
}
.admin-hub-link-card__kicker {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.admin-hub-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
  max-width: 100%;
}
/* ── Tournament admin CRM visual uplift (extends Admin CRM density) ── */
.admin-hub-tournament {
  --admin-control-h: 2.25rem;
  --admin-control-radius: 0.5rem;
  --admin-panel-pad: 1rem 1.1rem;
  --admin-gap: 0.75rem;
  --admin-gap-lg: 1.25rem;
  --admin-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%23a1a1aa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  min-width: 0;
  width: 100%;
  max-width: 100%;
  display: grid;
  gap: var(--admin-gap-lg);
  font-size: 0.875rem;
  line-height: 1.45;
}
.admin-hub-tournament__body {
  display: grid;
  gap: var(--admin-gap-lg);
  min-width: 0;
}
.admin-hub-tournament .admin-hub-page {
  display: grid;
  gap: var(--admin-gap);
  min-width: 0;
}

/* Section cards — match .admin-panel */
.admin-hub-tournament .admin-panel,
.admin-hub-tournament .tour-settings-section.admin-panel,
.admin-hub-tournament .tour-test-section.admin-panel,
.admin-hub-tournament .tour-signups-recover.admin-panel,
.admin-hub-tournament .admin-hub-history-card.admin-panel,
.admin-hub-tournament .admin-hub-draft-pool.admin-panel,
.admin-hub-tournament .admin-hub-captain-order.admin-panel {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: var(--admin-panel-pad);
  border-radius: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015));
  box-shadow: none;
}
.admin-hub-tournament .tour-settings-section +
.tour-settings-section {
  border-top: 0;
  margin-top: 0;
}
.admin-hub-tournament .tour-test-section.admin-panel {
  border-top: 0;
}
.admin-hub-tournament .tour-signups-recover {
  margin-top: 0;
}
.admin-hub-tournament .tour-signups-recover__summary {
  padding: 0;
}
.admin-hub-tournament .tour-signups-recover__body {
  padding: 0;
  gap: var(--admin-gap);
}
.admin-hub-tournament .admin-hub-form-stack {
  gap: var(--admin-gap-lg);
}
.admin-hub-tournament .admin-hub-form-grid,
.admin-hub-tournament .admin-form--grid {
  gap: 0.75rem 0.85rem;
}

/* Controls — unify heights with admin CRM */
.admin-hub-tournament input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
.admin-hub-tournament select,
.admin-hub-tournament textarea {
  min-height: var(--admin-control-h);
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--admin-control-radius);
  background: color-mix(in srgb, var(--color-bg) 78%, #000);
  color: var(--color-text);
  font: inherit;
  font-size: 0.8125rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  box-sizing: border-box;
}
.admin-hub-tournament .admin-field input:not([type="checkbox"]):not([type="radio"]),
.admin-hub-tournament .admin-field select,
.admin-hub-tournament .admin-field textarea,
.admin-hub-tournament .admin-panel input:not([type="checkbox"]):not([type="radio"]),
.admin-hub-tournament .admin-panel select,
.admin-hub-tournament .admin-panel textarea {
  width: 100%;
}
.admin-hub-tournament .admin-table input:not([type="checkbox"]),
.admin-hub-tournament .admin-table select,
.admin-hub-tournament .admin-hub-toolbar input:not([type="checkbox"]),
.admin-hub-tournament .admin-hub-toolbar select,
.admin-hub-tournament .admin-hub-inline-actions select {
  width: auto;
  min-width: 0;
  max-width: 100%;
}
.admin-hub-tournament select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2rem;
  background-image: var(--admin-select-chevron);
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 0.75rem;
  cursor: pointer;
}
.admin-hub-tournament textarea {
  min-height: 5.5rem;
  resize: vertical;
}
.admin-hub-tournament .btn {
  min-height: var(--admin-control-h);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--admin-control-radius);
  font-size: 0.8125rem;
}
.admin-hub-tournament .admin-actions--compact .btn,
.admin-hub-tournament .admin-actions--compact .btn-sm {
  min-height: 1.75rem;
  padding: 0 0.55rem;
  font-size: 0.7rem;
  border-radius: 0.45rem;
}

/* Checkbox / toggle rows — label + control, no space-between sprawl */
.admin-hub-tournament label.admin-check,
.admin-hub-tournament .admin-check,
.admin-hub-tournament label.admin-hub-check,
.admin-hub-tournament .admin-hub-check {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.65rem;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 0.45rem 0.65rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--color-text);
  cursor: pointer;
  box-sizing: border-box;
}
.admin-hub-tournament .admin-check input[type="checkbox"],
.admin-hub-tournament .admin-check input[type="radio"],
.admin-hub-tournament .admin-hub-check input[type="checkbox"],
.admin-hub-tournament .admin-hub-check input[type="radio"],
.admin-hub-tournament input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  min-height: 1rem;
  margin: 0;
  accent-color: var(--color-gold, #d4af37);
  cursor: pointer;
}
.admin-hub-tournament .admin-hub-toolbar .admin-check,
.admin-hub-tournament .admin-hub-toolbar .admin-hub-check,
.admin-hub-tournament .tour-bracket-edit-toggle {
  padding: 0.3rem 0.5rem;
  gap: 0.5rem;
}

/* Toolbars / subnav / inline actions */
.admin-hub-tournament .admin-hub-toolbar,
.admin-hub-tournament .admin-hub-inline-actions,
.admin-hub-tournament .admin-toolbar,
.admin-hub-tournament .admin-actions,
.admin-hub-tournament .tour-schedule-toolbar,
.admin-hub-tournament .tour-history-toolbar,
.admin-hub-tournament .tour-bracket-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0;
  margin-bottom: 0;
}
.admin-hub-tournament .admin-hub-toolbar {
  margin-bottom: 0.15rem;
}
.admin-hub-tournament .admin-hub-toolbar .admin-field {
  width: auto;
  min-width: 9rem;
}
.admin-hub-tournament .admin-hub-segment,
.admin-hub-tournament .tour-settings-jump {
  align-items: center;
}
.admin-hub-tournament .admin-hub-segment button {
  min-height: 1.75rem;
  padding: 0.3rem 0.65rem;
  font-size: 0.75rem;
}
.admin-hub-tournament .admin-subnav,
.admin-hub-tournament .admin-section-header {
  align-items: center;
}
.admin-hub-tournament .admin-section-header__actions,
.admin-hub-tournament .admin-section-header .admin-hub-inline-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

/* Tables — ledger density */
.admin-hub-tournament .admin-table-wrap {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--color-bg) 70%, transparent);
  overflow: hidden;
}
.admin-hub-tournament .admin-table--ledger th,
.admin-hub-tournament .admin-table th {
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.65rem 0.75rem;
  background: rgba(255, 255, 255, 0.025);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
.admin-hub-tournament .admin-table--ledger td,
.admin-hub-tournament .admin-table td {
  padding: 0.7rem 0.75rem;
  font-size: 0.8125rem;
  vertical-align: middle;
}
.admin-hub-tournament .admin-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.025);
}

/* Meta / status density */
.admin-hub-tournament .tour-panel-meta {
  font-size: 0.8125rem;
  margin: 0;
}
.admin-hub-tournament .tour-settings-hint {
  font-size: 0.78rem;
  margin: 0.15rem 0 0;
}
.admin-hub-tournament .admin-hub-stats--compact {
  gap: 0.65rem;
}
.admin-hub-tournament .admin-field {
  display: grid;
  gap: 0.35rem;
  margin: 0;
}
.admin-hub-tournament .admin-field__head {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  max-width: 100%;
}
.admin-hub-tournament .admin-field > label,
.admin-hub-tournament .admin-field__label,
.admin-hub-tournament .admin-field > span.admin-field__label,
.admin-hub-tournament .admin-field__head .admin-field__label {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.25;
}
.admin-hub-tournament .admin-field__head .admin-help-tip,
.admin-hub-tournament .admin-check__text .admin-help-tip {
  margin-left: 0;
  align-self: center;
}
.admin-hub-tournament .admin-help-tip__mark {
  width: 1rem;
  height: 1rem;
  color: color-mix(in srgb, var(--color-text-muted) 70%, transparent);
}
.admin-hub-tournament .admin-help-tip__mark .irg-icon {
  width: 0.8rem;
  height: 0.8rem;
}

.admin-hub-tournament__test-chip {
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: var(--color-text);
  font-size: var(--text-sm);
}
.admin-hub-tournament__test-chip.is-active,
.admin-hub-tournament__test-chip:hover {
  background: rgba(212, 175, 55, 0.2);
}
.admin-subnav__item {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.admin-subnav__item--divider {
  margin-left: var(--space-1);
}
.admin-subnav__divider {
  display: inline-block;
  width: 1px;
  height: 1.25rem;
  margin-right: var(--space-2);
  background: rgba(255, 255, 255, 0.14);
  flex: 0 0 auto;
}
.admin-subnav__group {
  display: inline-block;
  margin-right: var(--space-2);
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.06);
  flex: 0 0 auto;
}
.admin-subnav--grouped {
  width: 100%;
  max-width: 100%;
}
.admin-subnav__groups {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0 var(--space-1) var(--space-2);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
.admin-subnav__group-row {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.admin-subnav__group-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.2;
}
.admin-subnav__group-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  min-width: 0;
}
.admin-subnav--grouped .admin-subnav__tab {
  padding: 0.4rem 0.7rem;
}
@media (max-width: 720px) {
  .admin-subnav__group-row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

.admin-subnav--dropdowns {
  width: 100%;
  max-width: 100%;
  margin-bottom: var(--space-2);
}
.admin-subnav__dropdown-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}
.admin-subnav__dd {
  position: relative;
  min-width: 0;
}
.admin-subnav__dd-trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 0.35rem;
  align-items: center;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.65rem;
  background: color-mix(in srgb, var(--color-bg) 55%, rgba(255, 255, 255, 0.03));
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.admin-subnav__dd-kicker {
  grid-column: 1;
  grid-row: 1;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.admin-subnav__dd-value {
  grid-column: 1;
  grid-row: 2;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-subnav__dd-chevron {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--color-text-muted);
  transition: transform 0.18s ease;
}
.admin-subnav__dd.is-open .admin-subnav__dd-chevron {
  transform: rotate(180deg);
}
.admin-subnav__dd-trigger:hover,
.admin-subnav__dd.is-open .admin-subnav__dd-trigger,
.admin-subnav__dd.is-active .admin-subnav__dd-trigger {
  border-color: color-mix(in srgb, var(--color-gold, #d4af37) 42%, rgba(255, 255, 255, 0.12));
  background: color-mix(in srgb, var(--color-gold, #d4af37) 10%, rgba(255, 255, 255, 0.04));
  box-shadow: inset 2px 0 0 var(--color-gold, #d4af37);
}
.admin-subnav__dd-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.3rem);
  z-index: 30;
  display: grid;
  gap: 0.15rem;
  padding: 0.35rem;
  margin: 0;
  border-radius: 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: color-mix(in srgb, var(--color-bg) 94%, #000);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.03);
  animation: admin-hub-dropdown-in 0.14s ease;
}
.admin-subnav__dd-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
}
.admin-subnav__dd-option:hover,
.admin-subnav__dd-option.is-selected {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.06);
}
.admin-subnav__dd-option:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.admin-subnav__dd-hint {
  margin: 0.45rem 0 0;
  font-size: 0.72rem;
}
@media (max-width: 900px) {
  .admin-subnav__dropdown-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .admin-subnav__dropdown-row {
    grid-template-columns: 1fr;
  }
}

.admin-hub__nav-child-wrap {
  display: grid;
  gap: 0.1rem;
}
.admin-hub__nav-child-kicker {
  display: block;
  margin: 0.45rem 0 0.15rem;
  padding: 0 0.55rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-muted) 90%, var(--color-gold, #d4af37));
}
.admin-hub__nav-child-kicker.is-first {
  margin-top: 0.1rem;
}
.admin-lol-channel-matrix {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
.admin-lol-channel-row {
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}
.admin-lol-channel-row__label {
  font-weight: 600;
  font-size: var(--text-sm);
}
.admin-lol-channel-row__hint {
  margin: 0.15rem 0 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}
.admin-lol-quicklinks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.admin-lol-quicklinks a,
.admin-lol-quicklinks button {
  text-align: left;
}
@media (max-width: 720px) {
  .admin-lol-channel-row {
    grid-template-columns: 1fr;
  }
}
.tour-panel-meta {
  margin: 0;
  font-size: var(--text-sm);
}
.tour-panel-section-title {
  margin-top: var(--space-2);
}
.tour-panel-live-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: rgba(182, 255, 42, 0.08);
  border: 1px solid rgba(182, 255, 42, 0.22);
  font-size: var(--text-sm);
}
.tour-settings-jump {
  position: sticky;
  top: 0;
  z-index: 2;
  margin-bottom: var(--space-2);
  backdrop-filter: blur(8px);
}
.tour-settings-section {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
  scroll-margin-top: 3.5rem;
}
.tour-settings-section + .tour-settings-section {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: var(--space-2);
}
.tour-settings-hint {
  margin-top: 0.35rem;
  font-size: 0.85rem;
}
.tour-signups-recover {
  margin-top: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.tour-signups-recover__summary {
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  font-weight: 600;
  list-style: none;
}
.tour-signups-recover__summary::-webkit-details-marker {
  display: none;
}
.tour-signups-recover__summary::before {
  content: "▸ ";
  color: var(--color-text-muted);
}
.tour-signups-recover[open] > .tour-signups-recover__summary::before {
  content: "▾ ";
}
.tour-signups-recover__body {
  display: grid;
  gap: var(--space-2);
  padding: 0 var(--space-3) var(--space-3);
}
.tour-signups-recover__actions {
  align-items: center;
  flex-wrap: wrap;
}
.tour-field-label {
  display: block;
  margin-bottom: 0.25rem;
}
.tour-bracket-toolbar {
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.tour-bracket-edit-toggle {
  margin: 0;
}
.tour-history-toolbar {
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.tour-history-stack {
  display: grid;
  gap: var(--space-2);
}
.admin-hub-history-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--color-surface);
}
.admin-hub-history-card__head {
  display: flex;
  width: 100%;
  gap: var(--space-2);
  align-items: baseline;
  justify-content: space-between;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  text-align: left;
  padding: 0;
  font: inherit;
}
.admin-hub-history-card__meta {
  display: block;
  margin-top: 0.2rem;
}
.admin-hub-history-card__body {
  margin-top: var(--space-3);
}
.tour-test-section {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.tour-test-section:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.bhq-bracket__zoom-label {
  min-width: 3.25rem;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.bhq-bracket__zoom-layer {
  position: relative;
}
.bhq-bracket__zoom-inner {
  position: relative;
}
.tour-bracket-workspace__layout {
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr) minmax(16rem, 20rem);
  gap: var(--space-3);
  align-items: start;
  min-width: 0;
}
.tour-bracket-workspace__layout.is-rail-collapsed {
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
}
.tour-bracket-workspace__layout:not(:has(.tour-match-drawer)) {
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
}
.tour-bracket-workspace__layout.is-rail-collapsed:not(:has(.tour-match-drawer)) {
  grid-template-columns: minmax(0, 1fr);
}
.tour-bracket-rail {
  position: sticky;
  top: var(--space-2);
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  max-height: calc(100vh - 8rem);
  overflow: auto;
}
.tour-bracket-workspace__status {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
}
.tour-bracket-workspace__main {
  min-width: 0;
}
.tour-match-drawer {
  position: sticky;
  top: var(--space-2);
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  max-height: calc(100vh - 8rem);
  overflow: auto;
}
.tour-match-drawer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}
.tour-match-drawer__head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  justify-content: flex-end;
}
.tour-match-drawer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: 0.8rem;
}
.tour-match-drawer__vs {
  margin: 0;
}
.tour-match-drawer__hint {
  font-size: 0.75rem;
}
.tour-match-drawer__section {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}
.tour-match-drawer__dirty {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.28);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.tour-match-drawer__error {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: rgba(220, 60, 60, 0.1);
  border: 1px solid rgba(220, 60, 60, 0.28);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.tour-match-drawer__winner-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.tour-match-drawer__winner-chip {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm, 4px);
  background: rgba(182, 255, 42, 0.18);
  border: 1px solid rgba(182, 255, 42, 0.35);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.tour-match-drawer__code-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}
@media (max-width: 1100px) {
  .tour-bracket-workspace__layout,
  .tour-bracket-workspace__layout.is-rail-collapsed,
  .tour-bracket-workspace__layout:not(:has(.tour-match-drawer)),
  .tour-bracket-workspace__layout.is-rail-collapsed:not(:has(.tour-match-drawer)) {
    grid-template-columns: minmax(0, 1fr);
  }
  .tour-bracket-rail,
  .tour-match-drawer {
    position: static;
    max-height: none;
  }
}
.admin-hub-tournament .shop-manage-modal,
.admin-hub-tournament .admin-section-layout {
  min-height: 0;
  width: 100%;
  max-width: 100%;
}
.admin-hub-test-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.28);
  font-size: var(--text-sm);
  color: var(--color-text);
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
.admin-hub-form-stack {
  display: grid;
  gap: var(--space-3);
}
.admin-hub-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--space-3);
}
.admin-hub-check {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}
.admin-hub-check input {
  margin-top: 0.2rem;
}
.admin-hub-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-3);
}
.admin-hub-toolbar__search {
  flex: 1 1 12rem;
  min-width: 0;
}
.admin-hub-segment {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  padding: 0.15rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.admin-hub-segment button {
  padding: 0.35rem 0.7rem;
  border: 0;
  border-radius: calc(var(--radius-md) - 2px);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}
.admin-hub-segment button.is-active,
.admin-hub-segment button:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.08);
}
.admin-hub-captain-order {
  margin-top: var(--space-4);
}
.admin-hub-captain-order__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
}
.admin-hub-captain-order__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.admin-hub-captain-order__rank {
  font-variant-numeric: tabular-nums;
  color: var(--color-gold, #d4af37);
  font-weight: 600;
  min-width: 1.75rem;
}
.admin-hub-captain-order__name {
  flex: 1 1 auto;
  min-width: 0;
}
.admin-hub-captain-order__actions {
  display: inline-flex;
  gap: 0.15rem;
}
.admin-hub-pick-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
}
.admin-hub-pick-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.admin-hub-pick-list li:last-child {
  border-bottom: 0;
}
.admin-hub-draft-pool {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.admin-hub-bracket {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.admin-hub-bracket__matches {
  display: grid;
  gap: var(--space-2);
}
.admin-hub-match {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.admin-hub-match__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.admin-hub-match__code {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
}
.admin-hub-match__code code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 0.1rem 0.35rem;
  border-radius: 0.3rem;
  background: rgba(255, 255, 255, 0.06);
}
.admin-hub-link-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.admin-hub-link-grid .admin-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-content: start;
  align-items: stretch;
  gap: var(--space-2);
  min-height: 8.5rem;
  padding: var(--space-4);
  overflow-wrap: normal;
  word-break: normal;
}
.admin-hub-link-grid .admin-card strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.3;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.admin-hub-link-grid .admin-card p,
.admin-hub-link-grid .admin-card .muted {
  margin: 0;
  line-height: 1.45;
  overflow-wrap: break-word;
  word-break: normal;
}
.admin-hub-link-grid .admin-card .admin-hub-link-card__action {
  margin-top: auto;
  justify-self: start;
}
.admin-hub-link-grid .admin-card .admin-hub-link-card__kicker {
  margin-top: auto;
  justify-self: start;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  letter-spacing: 0.04em;
}
.admin-hub-link-grid .admin-card.is-soon,
.admin-hub-link-grid .admin-card.is-disabled {
  opacity: 0.72;
}
.admin-announce-editor__block {
  margin: var(--space-3) 0;
  padding-top: var(--space-2);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.admin-announce-editor__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.admin-announce-editor__head-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: min(100%, 20rem);
}
.admin-announce-editor__status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: flex-start;
}
.admin-announce-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.admin-announce-pill.is-live {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(127, 29, 29, 0.35);
}
.admin-announce-editor__tabs {
  margin-bottom: 0.85rem;
}
.admin-announce-layout {
  display: grid;
  grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.admin-announce-side {
  position: sticky;
  top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
}
.admin-announce-side__title {
  margin: 0;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.admin-announce-side__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.admin-announce-side__note,
.admin-announce-side__empty {
  font-size: 0.8rem;
  line-height: 1.4;
}
.admin-announce-side--list {
  max-height: min(70vh, 36rem);
  overflow: auto;
}
.admin-announce-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.admin-announce-card {
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
.admin-announce-card--empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 10rem;
  justify-content: center;
}
.admin-announce-card__toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.admin-announce-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.admin-announce-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.admin-announce-grid-2 label,
.admin-announce-span-2 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
}
.admin-announce-grid-2 .admin-field,
.admin-announce-span-2.admin-field,
.admin-announce-main .admin-field {
  display: grid;
  gap: 0.35rem;
  margin: 0;
}
.admin-announce-grid-2 .admin-field__label,
.admin-announce-span-2 .admin-field__label,
.admin-announce-main .admin-field__label {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.admin-announce-card.admin-panel {
  margin: 0;
}
.admin-announce-side .admin-check-card {
  width: 100%;
  margin: 0;
}
.admin-announce-side .admin-check-card__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.admin-announce-side .admin-check-card__text strong {
  font-size: 0.8125rem;
}
.admin-announce-side .admin-check-card__text small {
  font-size: 0.75rem;
  line-height: 1.35;
}
.admin-hub-website .admin-panel + .admin-panel {
  margin-top: 0.85rem;
}

/* Website analytics dashboard */
.admin-hub-website .wa-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
}
.admin-hub-website .wa-head__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}
.admin-hub-website .wa-period {
  display: inline-flex;
  padding: 0.15rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.22);
}
.admin-hub-website .wa-period__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
}
.admin-hub-website .wa-period__btn.is-active {
  color: #fff;
  background: rgba(96, 165, 250, 0.22);
}
.admin-hub-website .wa-body {
  display: grid;
  gap: 1rem;
}
.admin-hub-website .wa-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.65rem;
}
.admin-hub-website .wa-metrics.is-loading {
  opacity: 0.65;
}
.admin-hub-website .wa-metric {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0.7rem;
  padding: 0.75rem 0.85rem;
  min-width: 0;
}
.admin-hub-website .wa-metric__label {
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.admin-hub-website .wa-metric__value {
  margin-top: 0.35rem;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.admin-hub-website .wa-metric__meta {
  margin-top: 0.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  font-size: 0.72rem;
}
.admin-hub-website .wa-metric__change--up {
  color: #86efac;
}
.admin-hub-website .wa-metric__change--down {
  color: #fca5a5;
}
.admin-hub-website .wa-metric__change--flat {
  color: var(--color-text-muted);
}
.admin-hub-website .wa-chart-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0.75rem;
  padding: 0.85rem 1rem 0.55rem;
}
.admin-hub-website .wa-chart-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}
.admin-hub-website .wa-sparkline {
  width: 100%;
  height: auto;
  display: block;
}
.admin-hub-website .wa-sparkline--empty {
  min-height: 7rem;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
}
.admin-hub-website .wa-ranks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.admin-hub-website .wa-rank {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0.75rem;
  padding: 0.75rem 0.85rem;
  min-width: 0;
}
.admin-hub-website .wa-rank__title {
  margin: 0 0 0.55rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.admin-hub-website .wa-rank__table {
  width: 100%;
}
.admin-hub-website .wa-rank__name {
  max-width: 18rem;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
.admin-hub-website .wa-rank__num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 1100px) {
  .admin-hub-website .wa-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .admin-hub-website .wa-metrics,
  .admin-hub-website .wa-ranks {
    grid-template-columns: 1fr;
  }
  .admin-hub-website .wa-rank__name {
    max-width: 100%;
  }
}

/* Identity / alt navigator */
.admin-hub-website .wa-id-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  align-items: flex-start;
}
.admin-hub-website .wa-id-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.admin-hub-website .wa-id-jump .btn {
  font-size: 0.75rem;
  padding: 0.3rem 0.6rem;
}
.admin-hub-website .wa-id-body {
  display: grid;
  gap: 1rem;
}
.admin-hub-website .wa-id-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
}
.admin-hub-website .wa-id-rail {
  display: grid;
  gap: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.18);
  border-radius: 0.75rem;
  padding: 0.75rem;
  min-width: 0;
  position: sticky;
  top: 0.75rem;
  max-height: calc(100vh - 2rem);
  overflow: auto;
}
.admin-hub-website .wa-id-rail__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.admin-hub-website .wa-id-search input {
  width: 100%;
}
.admin-hub-website .wa-id-check {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.35;
}
.admin-hub-website .wa-id-check input {
  margin-top: 0.15rem;
}
.admin-hub-website .wa-id-source-wrap {
  display: grid;
  gap: 0.35rem;
}
.admin-hub-website .wa-id-source-label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.admin-hub-website .wa-id-source {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.admin-hub-website .wa-id-source .btn {
  font-size: 0.72rem;
  padding: 0.28rem 0.55rem;
}
.admin-hub-website .wa-id-list {
  display: grid;
  gap: 0.35rem;
  max-height: 28rem;
  overflow: auto;
  padding-right: 0.15rem;
}
.admin-hub-website .wa-id-table-scroll {
  max-height: 22rem;
  overflow: auto;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.55rem;
}
.admin-hub-website .wa-id-table-scroll .admin-table {
  margin: 0;
}
.admin-hub-website .wa-id-table {
  table-layout: auto !important;
  width: 100%;
  min-width: 36rem;
}
.admin-hub-website .wa-id-cell-ip {
  white-space: nowrap;
  vertical-align: middle;
}
.admin-hub-website .wa-id-cell-ip .admin-status {
  margin-left: 0.35rem;
  vertical-align: middle;
}
.admin-hub-website .wa-id-ip-btn {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  padding: 0.2rem 0.4rem;
  white-space: nowrap;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}
.admin-hub-website .wa-id-cell-num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.admin-hub-website .wa-id-cell-wrap {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  min-width: 7rem;
}
.admin-hub-website .wa-id-card > .wa-id-pager,
.admin-hub-website .wa-id-pager--local {
  margin-top: 0.65rem;
}
.admin-hub-website .wa-id-filters {
  margin-bottom: 0.75rem;
}
.admin-hub-website .wa-id-section-note {
  margin: 0 0 0.65rem;
  font-size: 0.8rem;
  line-height: 1.4;
}
.admin-hub-website .wa-id-suspicious-reason {
  display: grid;
  gap: 0.2rem;
}
.admin-hub-website .wa-id-suspicious-detail {
  font-size: 0.72rem;
  line-height: 1.3;
}
.admin-hub-website .wa-id-list__empty {
  margin: 0.5rem 0;
  font-size: 0.85rem;
}
.admin-hub-website .wa-id-member {
  appearance: none;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  border-radius: 0.55rem;
  padding: 0.55rem 0.65rem;
  cursor: pointer;
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}
.admin-hub-website .wa-id-member:hover {
  border-color: rgba(147, 197, 253, 0.35);
}
.admin-hub-website .wa-id-member.is-active {
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(96, 165, 250, 0.12);
}
.admin-hub-website .wa-id-member__name {
  font-weight: 650;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}
.admin-hub-website .wa-id-member__meta {
  font-size: 0.72rem;
  overflow-wrap: anywhere;
  white-space: normal;
}
.admin-hub-website .wa-id-member__flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.15rem;
}
.admin-hub-website .wa-id-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.78rem;
  flex-wrap: wrap;
}
.admin-hub-website .wa-id-pager__btns {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.admin-hub-website .wa-id-detail {
  min-width: 0;
  display: grid;
  gap: 0.75rem;
}
.admin-hub-website .wa-id-empty {
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 0.75rem;
  padding: 1.5rem 1.1rem;
}
.admin-hub-website .wa-id-detail__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}
.admin-hub-website .wa-id-crumb {
  font-size: 0.75rem;
  word-break: break-all;
}
.admin-hub-website .wa-id-dossier.is-loading {
  opacity: 0.7;
}
.admin-hub-website .wa-id-dossier {
  display: grid;
  gap: 0.85rem;
}
.admin-hub-website .wa-id-dossier__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  align-items: flex-start;
}
.admin-hub-website .wa-id-dossier__title {
  margin: 0;
  font-size: 1.15rem;
  overflow-wrap: anywhere;
}
.admin-hub-website .wa-id-dossier__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.admin-hub-website .wa-id-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.admin-hub-website .wa-id-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0.75rem;
  padding: 0.75rem 0.85rem;
  min-width: 0;
}
.admin-hub-website .wa-id-card--span {
  grid-column: 1 / -1;
}
.admin-hub-website .wa-id-alts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.admin-hub-website .wa-id-alts > li {
  display: flex;
  gap: 0.45rem;
  align-items: flex-start;
  min-width: 0;
}
.admin-hub-website .wa-id-alt {
  appearance: none;
  flex: 1;
  min-width: 0;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  border-radius: 0.55rem;
  padding: 0.5rem 0.6rem;
  cursor: pointer;
  display: grid;
  gap: 0.2rem;
}
.admin-hub-website .wa-id-alt:hover {
  border-color: rgba(252, 211, 77, 0.4);
}
.admin-hub-website .wa-id-alt__name {
  font-weight: 650;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  overflow-wrap: anywhere;
}
.admin-hub-website .wa-id-alt__badge {
  font-weight: 550;
  font-size: 0.68rem;
}
.admin-hub-website .wa-id-alt__meta {
  font-size: 0.72rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.admin-hub-website .wa-id-alt--device {
  border-color: rgba(251, 191, 36, 0.28);
  background: rgba(251, 191, 36, 0.06);
}
.admin-hub-website .wa-id-alt--device:hover {
  border-color: rgba(251, 191, 36, 0.55);
}
.admin-hub-website .wa-id-alt--network {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(148, 163, 184, 0.05);
}
.admin-hub-website .wa-id-alt--network:hover {
  border-color: rgba(148, 163, 184, 0.5);
}
.admin-hub-website .wa-id-alt--cross {
  border-color: rgba(251, 146, 60, 0.28);
  background: rgba(251, 146, 60, 0.05);
}
.admin-hub-website .wa-id-alt--cross:hover {
  border-color: rgba(251, 146, 60, 0.5);
}
.admin-hub-website .wa-id-alt__ips {
  font-size: 0.72rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
.admin-hub-website .wa-id-ipfocus__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.55rem;
}
.admin-hub-website .wa-id-ipfocus__head .wa-rank__title {
  margin: 0;
  overflow-wrap: anywhere;
}
.admin-hub-website .wa-id-ipfocus__sub {
  margin: 0.75rem 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.72);
}
.admin-hub-website .wa-id-cell-members {
  min-width: 12rem;
  max-width: 22rem;
  vertical-align: top;
}
.admin-hub-website .wa-id-cluster-names {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: flex-start;
  max-height: 7.5rem;
  overflow: auto;
  padding: 0.1rem 0;
}
.admin-hub-website .wa-id-cluster-names__btn {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  max-width: min(100%, 9.5rem);
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  line-height: 1.2;
  padding: 0.22rem 0.4rem;
  font-size: 0.75rem;
}
.admin-hub-website .wa-id-cluster-names__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.admin-hub-website .wa-id-cluster-names__riot {
  font-size: 0.65rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.admin-hub-website .wa-id-cluster-names__more {
  font-size: 0.72rem;
  padding: 0.22rem 0.45rem;
  align-self: center;
  opacity: 0.9;
}
.admin-hub-website .wa-analytics-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.15rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.75rem;
  background: rgba(0, 0, 0, 0.18);
  position: sticky;
  top: 0.5rem;
  z-index: 5;
}
.admin-hub-website .wa-analytics-tabs .btn {
  font-size: 0.8rem;
}
.admin-hub-website .wa-id-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  width: 100%;
  margin-top: 0.85rem;
}
.admin-hub-website .wa-id-guide > div {
  display: grid;
  gap: 0.22rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.025);
  min-width: 0;
}
.admin-hub-website .wa-id-guide strong {
  font-size: 0.78rem;
}
.admin-hub-website .wa-id-guide span {
  color: var(--color-text-muted);
  font-size: 0.72rem;
  line-height: 1.4;
}
.admin-hub-website .wa-pass-activity__search {
  width: min(100%, 22rem);
  margin: 0;
}
.admin-hub-website .wa-pass-activity__search input {
  width: 100%;
}
.admin-hub-website .wa-pass-activity__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
  color: var(--color-text-muted);
  font-size: 0.78rem;
}
.admin-hub-website .wa-pass-activity__summary strong {
  color: inherit;
  font-variant-numeric: tabular-nums;
}
.admin-hub-website .wa-pass-activity__body.is-loading,
.admin-hub-website .wa-id-table-scroll.is-loading {
  opacity: 0.68;
}
.admin-hub-website .wa-pass-activity__list {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}
.admin-hub-website .wa-pass-activity__record {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.025);
  padding: 0.7rem 0.8rem;
}
.admin-hub-website .wa-pass-activity__record-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 0.95fr) minmax(0, 1.2fr) minmax(0, 1.1fr);
  gap: 0.6rem 1rem;
  align-items: start;
}
.admin-hub-website .wa-pass-activity__cell {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
.admin-hub-website .wa-pass-activity__person {
  font-weight: 650;
  min-width: 0;
}
.admin-hub-website .wa-pass-activity__label {
  color: var(--color-text-muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  line-height: 1.3;
  text-transform: uppercase;
}
.admin-hub-website .wa-pass-activity__label--second {
  margin-top: 0.35rem;
}
.admin-hub-website .wa-pass-activity__ip {
  width: fit-content;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.admin-hub-website .wa-pass-activity__matches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  min-width: 0;
}
.admin-hub-website .wa-pass-activity__match {
  padding: 0.15rem 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-size: 0.75rem;
}
.admin-hub-website .wa-pass-activity__count {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.admin-hub-website .wa-pass-activity__count span {
  font-size: 0.75rem;
  font-weight: 500;
}
.admin-hub-website .wa-pass-activity__expand {
  justify-self: start;
  margin-top: 0.15rem;
  padding: 0.25rem 0.45rem;
}
.admin-hub-website .wa-pass-activity__history {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.7rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.admin-hub-website .wa-pass-activity__history p {
  margin: 0;
  max-width: 75rem;
  line-height: 1.45;
}
.admin-hub-website .wa-pass-activity__explanation {
  color: var(--color-text-muted);
  font-size: 0.8rem;
}
.admin-hub-website .wa-pass-activity__use-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 0.35rem 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.admin-hub-website .wa-pass-activity__use-list li {
  display: grid;
  grid-template-columns: 0.55rem minmax(7rem, 1fr) minmax(0, 1.4fr);
  gap: 0.45rem;
  align-items: center;
  min-width: 0;
  padding: 0.35rem 0.45rem;
  border-radius: 0.4rem;
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.78rem;
}
.admin-hub-website .wa-pass-activity__use-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--color-primary, #60a5fa);
}
.admin-hub-website .wa-pass-activity__use-list time {
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.admin-hub-website .wa-pass-activity__use-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: space-between;
}
.admin-hub-website .wa-pass-activity__empty {
  margin: 0;
  padding: 1rem;
  text-align: center;
}
.admin-hub-website .wa-alt-enforce__intro {
  max-width: 76rem;
  line-height: 1.55;
}
.admin-hub-website .wa-alt-enforce .admin-card {
  display: grid;
  gap: 0.5rem;
}
.admin-hub-website .wa-alt-enforce .admin-card h4,
.admin-hub-website .wa-alt-enforce .admin-card p {
  margin-top: 0;
  margin-bottom: 0;
}
@media (max-width: 900px) {
  .admin-hub-website .wa-id-layout,
  .admin-hub-website .wa-id-grid,
  .admin-hub-website .wa-id-guide {
    grid-template-columns: 1fr;
  }
  .admin-hub-website .wa-id-rail {
    position: static;
    max-height: none;
  }
  .admin-hub-website .wa-id-list {
    max-height: 16rem;
  }
  .admin-hub-website .wa-id-table {
    min-width: 28rem;
  }
  .admin-hub-website .wa-pass-activity__record-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .admin-hub-website .wa-pass-activity__record-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .admin-hub-website .wa-pass-activity__record {
    padding: 0.6rem;
  }
  .admin-hub-website .wa-pass-activity__use-list li {
    grid-template-columns: 0.55rem minmax(0, 1fr);
  }
  .admin-hub-website .wa-pass-activity__use-list time {
    grid-column: 2;
  }
}
.admin-hub-website .wa-alt-enforce {
  display: grid;
  gap: 0.9rem;
  min-width: 0;
}
.admin-hub-website .wa-alt-enforce__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.68fr);
  gap: 1rem;
  align-items: stretch;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.8rem;
  background: linear-gradient(135deg, rgba(60, 105, 255, 0.09), rgba(255, 255, 255, 0.025));
}
.admin-hub-website .wa-alt-enforce__eyebrow,
.admin-hub-website .wa-alt-section-kicker {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.65rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}
.admin-hub-website .wa-alt-enforce__header h3 {
  margin: 0.15rem 0 0.25rem;
}
.admin-hub-website .wa-alt-enforce__intro {
  max-width: 62rem;
  margin: 0;
  line-height: 1.5;
}
.admin-hub-website .wa-alt-enforce__impact {
  display: grid;
  align-content: center;
  gap: 0.25rem;
  padding: 0.7rem 0.85rem;
  border-left: 2px solid var(--color-primary, #3b82f6);
  border-radius: 0.35rem;
  background: rgba(7, 12, 24, 0.25);
  font-size: 0.8rem;
  line-height: 1.45;
}
.admin-hub-website .wa-alt-enforce__impact span {
  color: var(--color-text-muted);
}
.admin-hub-website .wa-alt-notice {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.55rem;
  align-items: baseline;
  margin: 0;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(97, 165, 255, 0.2);
  border-radius: 0.6rem;
  background: rgba(58, 121, 241, 0.06);
  color: var(--color-text-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}
.admin-hub-website .wa-alt-notice strong {
  color: var(--color-text, #f7f8fb);
}
.admin-hub-website .wa-alt-notice--subtle {
  margin: 0.7rem 0;
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(255, 255, 255, 0.08);
}
.admin-hub-website .wa-alt-tabs {
  display: flex;
  gap: 0.35rem;
  min-width: 0;
  overflow-x: auto;
  padding: 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.75rem;
  background: rgba(0, 0, 0, 0.13);
  scrollbar-width: thin;
}
.admin-hub-website .wa-alt-tab {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0.55rem;
  align-items: center;
  justify-content: center;
  min-height: 2.45rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 0.55rem;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}
.admin-hub-website .wa-alt-tab:hover {
  color: var(--color-text, #f7f8fb);
  background: rgba(255, 255, 255, 0.045);
}
.admin-hub-website .wa-alt-tab:focus-visible,
.admin-hub-website .wa-alt-manual summary:focus-visible,
.admin-hub-website .wa-alt-evidence summary:focus-visible {
  outline: 2px solid var(--color-primary, #3b82f6);
  outline-offset: 2px;
}
.admin-hub-website .wa-alt-tab.is-active {
  border-color: rgba(92, 143, 255, 0.42);
  background: rgba(60, 105, 255, 0.16);
  color: var(--color-text, #f7f8fb);
}
.admin-hub-website .wa-alt-tab__count,
.admin-hub-website .wa-alt-evidence summary span {
  display: inline-flex;
  min-width: 1.35rem;
  justify-content: center;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}
.admin-hub-website .wa-alt-tab.is-active .wa-alt-tab__count {
  background: rgba(92, 143, 255, 0.2);
}
.admin-hub-website .wa-alt-loading {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}
.admin-hub-website .wa-alt-undo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0.5rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.78rem;
}
.admin-hub-website .wa-alt-panel {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  transition: opacity 140ms ease;
}
.admin-hub-website .wa-alt-panel.is-loading {
  opacity: 0.62;
}
.admin-hub-website .wa-alt-panel__heading,
.admin-hub-website .wa-alt-list-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}
.admin-hub-website .wa-alt-panel__heading h4,
.admin-hub-website .wa-alt-list-heading h5 {
  margin: 0;
}
.admin-hub-website .wa-alt-panel__heading p,
.admin-hub-website .wa-alt-list-heading p {
  max-width: 68rem;
  margin: 0.18rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}
.admin-hub-website .wa-alt-count {
  flex: 0 0 auto;
  padding: 0.25rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}
.admin-hub-website .wa-alt-manual {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.025);
}
.admin-hub-website .wa-alt-manual summary {
  padding: 0.65rem 0.8rem;
  color: var(--color-text, #f7f8fb);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.admin-hub-website .wa-alt-manual__body {
  display: grid;
  gap: 0.45rem;
  padding: 0 0.8rem 0.8rem;
}
.admin-hub-website .wa-alt-manual__body label,
.admin-hub-website .wa-alt-form-card label {
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
}
.admin-hub-website .wa-alt-manual__body input,
.admin-hub-website .wa-alt-form-card input,
.admin-hub-website .wa-alt-form-card select {
  width: 100%;
  min-width: 0;
}
.admin-hub-website .wa-alt-manual__body p,
.admin-hub-website .wa-alt-form-card__note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.73rem;
  line-height: 1.45;
}
.admin-hub-website .wa-alt-review-list,
.admin-hub-website .wa-alt-cluster-list,
.admin-hub-website .wa-alt-exception-list {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
}
.admin-hub-website .wa-alt-review-card,
.admin-hub-website .wa-alt-cluster-card,
.admin-hub-website .wa-alt-exception-card,
.admin-hub-website .wa-alt-form-card,
.admin-hub-website .wa-alt-empty {
  min-width: 0;
  padding: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.025);
}
.admin-hub-website .wa-alt-review-card,
.admin-hub-website .wa-alt-cluster-card,
.admin-hub-website .wa-alt-form-card {
  display: grid;
  gap: 0.7rem;
}
.admin-hub-website .wa-alt-review-card__head,
.admin-hub-website .wa-alt-cluster-card__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1rem;
  align-items: center;
  justify-content: space-between;
}
.admin-hub-website .wa-alt-review-card__head h5,
.admin-hub-website .wa-alt-cluster-card__head h5,
.admin-hub-website .wa-alt-form-card__head h5 {
  margin: 0.12rem 0 0;
  font-size: 0.95rem;
}
.admin-hub-website .wa-alt-status {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 0.18rem 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}
.admin-hub-website .wa-alt-status--review {
  border-color: rgba(255, 191, 96, 0.28);
  background: rgba(255, 191, 96, 0.08);
  color: #ffd99e;
}
.admin-hub-website .wa-alt-status--confirmed {
  border-color: rgba(77, 212, 156, 0.25);
  background: rgba(77, 212, 156, 0.08);
  color: #9ce8c3;
}
.admin-hub-website .wa-alt-status--primary {
  border-color: rgba(77, 212, 156, 0.24);
  background: rgba(77, 212, 156, 0.07);
  color: #9ce8c3;
}
.admin-hub-website .wa-alt-status--secondary {
  border-color: rgba(255, 191, 96, 0.2);
  background: rgba(255, 191, 96, 0.055);
  color: #f0d2a0;
}
.admin-hub-website .wa-alt-status--muted {
  color: var(--color-text-muted);
}
.admin-hub-website .wa-alt-review-card__members {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 23rem), 1fr));
  gap: 0.45rem;
}
.admin-hub-website .wa-alt-review-member {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
  min-width: 0;
  padding: 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.6rem;
  background: rgba(7, 12, 24, 0.22);
}
.admin-hub-website .wa-alt-review-member.is-selected {
  border-color: rgba(82, 135, 255, 0.25);
  background: rgba(61, 104, 212, 0.06);
}
.admin-hub-website .wa-alt-review-member__select {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.4rem;
  cursor: pointer;
}
.admin-hub-website .wa-alt-review-member__select input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.admin-hub-website .wa-alt-review-member__check {
  display: grid;
  width: 1rem;
  height: 1rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0.28rem;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
.admin-hub-website .wa-alt-review-member__select input:checked + .wa-alt-review-member__check {
  border-color: var(--color-primary, #3b82f6);
  background: var(--color-primary, #3b82f6);
}
.admin-hub-website .wa-alt-review-member__select input:checked + .wa-alt-review-member__check::after {
  content: "✓";
  color: white;
  font-size: 0.7rem;
  font-weight: 800;
}
.admin-hub-website .wa-alt-review-member__select input:focus-visible + .wa-alt-review-member__check {
  outline: 2px solid white;
  outline-offset: 2px;
}
.admin-hub-website .wa-alt-review-member__main,
.admin-hub-website .wa-alt-review-member__identity,
.admin-hub-website .wa-alt-review-member__signals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.55rem;
  align-items: center;
  min-width: 0;
}
.admin-hub-website .wa-alt-review-member__main {
  display: grid;
  gap: 0.35rem;
}
.admin-hub-website .wa-alt-review-member__identity strong,
.admin-hub-website .wa-alt-primary__identity strong,
.admin-hub-website .wa-alt-secondary__identity strong,
.admin-hub-website .wa-alt-exception-card strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.83rem;
}
.admin-hub-website .wa-alt-signal,
.admin-hub-website .wa-alt-fingerprint,
.admin-hub-website .wa-alt-score {
  display: inline-flex;
  max-width: 100%;
  padding: 0.16rem 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  color: var(--color-text-muted);
  font-size: 0.65rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.admin-hub-website .wa-alt-signal {
  color: var(--color-text, #f7f8fb);
}
.admin-hub-website .wa-alt-signal--muted {
  color: var(--color-text-muted);
}
.admin-hub-website .wa-alt-score {
  border-color: rgba(92, 143, 255, 0.18);
  background: rgba(60, 105, 255, 0.06);
  font-variant-numeric: tabular-nums;
}
.admin-hub-website .wa-alt-review-member__hint {
  color: var(--color-text-muted);
  font-size: 0.7rem;
  line-height: 1.4;
}
.admin-hub-website .wa-alt-review-primary {
  display: grid;
  grid-template-columns: minmax(8rem, 0.45fr) minmax(12rem, 1fr);
  gap: 0.3rem 0.75rem;
  align-items: center;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.02);
}
.admin-hub-website .wa-alt-review-primary label {
  color: var(--color-text, #f7f8fb);
  font-size: 0.73rem;
  font-weight: 700;
}
.admin-hub-website .wa-alt-review-primary select {
  width: 100%;
  min-width: 0;
}
.admin-hub-website .wa-alt-review-primary > span {
  grid-column: 1 / -1;
  color: var(--color-text-muted);
  font-size: 0.7rem;
  line-height: 1.45;
}
.admin-hub-website .wa-alt-small-action {
  min-height: 1.8rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.7rem;
}
.admin-hub-website .wa-alt-evidence {
  padding-top: 0.55rem;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
}
.admin-hub-website .wa-alt-evidence summary {
  display: flex;
  width: fit-content;
  gap: 0.4rem;
  align-items: center;
  color: var(--color-text-muted);
  font-size: 0.73rem;
  font-weight: 700;
  cursor: pointer;
}
.admin-hub-website .wa-alt-evidence ul {
  display: grid;
  gap: 0.35rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}
.admin-hub-website .wa-alt-evidence li {
  display: grid;
  grid-template-columns: minmax(11rem, 0.8fr) minmax(0, 1.2fr);
  gap: 0.45rem 0.8rem;
  align-items: center;
  min-width: 0;
  padding: 0.45rem 0.55rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.025);
}
.admin-hub-website .wa-alt-evidence__pair {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  color: var(--color-text-muted);
  font-size: 0.74rem;
}
.admin-hub-website .wa-alt-review-card__actions,
.admin-hub-website .wa-alt-cluster-card__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.8rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
  color: var(--color-text-muted);
  font-size: 0.72rem;
}
.admin-hub-website .wa-alt-review-card__actions > div,
.admin-hub-website .wa-alt-secondary__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.admin-hub-website .wa-alt-review-card__actions .btn,
.admin-hub-website .wa-alt-secondary__actions .btn,
.admin-hub-website .wa-alt-cluster-card__footer .btn,
.admin-hub-website .wa-alt-exception-card .btn {
  min-height: 2rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.72rem;
}
.admin-hub-website .wa-alt-empty {
  display: grid;
  gap: 0.25rem;
  justify-items: center;
  padding: 1.3rem 1rem;
  text-align: center;
}
.admin-hub-website .wa-alt-empty strong {
  font-size: 0.86rem;
}
.admin-hub-website .wa-alt-empty span {
  max-width: 48rem;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  line-height: 1.5;
}
.admin-hub-website .wa-alt-cluster-card__head-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  color: var(--color-text-muted);
  font-size: 0.7rem;
}
.admin-hub-website .wa-alt-primary {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  min-width: 0;
  padding: 0.7rem;
  border: 1px solid rgba(77, 212, 156, 0.22);
  border-radius: 0.65rem;
  background: rgba(77, 212, 156, 0.045);
}
.admin-hub-website .wa-alt-primary__marker {
  display: grid;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 0.55rem;
  background: rgba(77, 212, 156, 0.14);
  color: #9ce8c3;
  font-size: 0.78rem;
  font-weight: 800;
}
.admin-hub-website .wa-alt-primary__identity,
.admin-hub-website .wa-alt-secondary__identity {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}
.admin-hub-website .wa-alt-role-label {
  color: var(--color-text-muted);
  font-size: 0.66rem;
  line-height: 1.35;
}
.admin-hub-website .wa-alt-primary__hint {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: 0.68rem;
  text-align: right;
}
.admin-hub-website .wa-alt-secondary-list {
  display: grid;
  gap: 0.35rem;
}
.admin-hub-website .wa-alt-secondary-list__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.7rem;
  align-items: baseline;
  justify-content: space-between;
  color: var(--color-text-muted);
  font-size: 0.7rem;
}
.admin-hub-website .wa-alt-secondary-list__head strong {
  color: var(--color-text, #f7f8fb);
}
.admin-hub-website .wa-alt-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 0.6rem;
  background: rgba(0, 0, 0, 0.12);
}
.admin-hub-website .wa-alt-secondary-list__empty {
  margin: 0;
  padding: 0.4rem 0;
  color: var(--color-text-muted);
  font-size: 0.75rem;
}
.admin-hub-website .wa-alt-cluster-card__notes {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  line-height: 1.45;
}
.admin-hub-website .wa-alt-danger-action {
  border-color: rgba(255, 112, 112, 0.22);
  color: #ffb5b5;
}
.admin-hub-website .wa-alt-danger-action:hover:not(:disabled) {
  border-color: rgba(255, 112, 112, 0.42);
  background: rgba(255, 80, 80, 0.08);
}
.admin-hub-website .wa-alt-exception-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  align-items: start;
}
.admin-hub-website .wa-alt-form-card {
  align-content: start;
  gap: 0.4rem;
}
.admin-hub-website .wa-alt-form-card__head {
  display: grid;
  gap: 0.2rem;
  margin-bottom: 0.25rem;
}
.admin-hub-website .wa-alt-form-card__head p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.74rem;
  line-height: 1.45;
}
.admin-hub-website .wa-alt-form-card label span {
  font-weight: 500;
}
.admin-hub-website .wa-alt-form-card__note {
  margin: 0.2rem 0;
}
.admin-hub-website .wa-alt-form-card--unlock {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.018);
}
.admin-hub-website .wa-alt-list-heading {
  margin-top: 0.3rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
}
.admin-hub-website .wa-alt-exception-card {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) minmax(12rem, 1.25fr) minmax(10rem, 1fr) minmax(11rem, 1fr) auto;
  gap: 0.6rem 1rem;
  align-items: center;
}
.admin-hub-website .wa-alt-exception-card__identity,
.admin-hub-website .wa-alt-exception-card__scope,
.admin-hub-website .wa-alt-exception-card__note,
.admin-hub-website .wa-alt-exception-card__expiry {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
}
.admin-hub-website .wa-alt-exception-card__note span:last-child {
  color: var(--color-text-muted);
  font-size: 0.74rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.admin-hub-website .wa-alt-exception-card__expiry strong {
  font-variant-numeric: tabular-nums;
}
.admin-hub-website .wa-alt-panel--audit .wa-id-table-scroll {
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.65rem;
}
@media (max-width: 900px) {
  .admin-hub-website .wa-alt-enforce__header {
    grid-template-columns: 1fr;
  }
  .admin-hub-website .wa-alt-enforce__impact {
    border-left-width: 0;
    border-top: 2px solid var(--color-primary, #3b82f6);
  }
  .admin-hub-website .wa-alt-exception-tools {
    grid-template-columns: 1fr;
  }
  .admin-hub-website .wa-alt-exception-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .admin-hub-website .wa-alt-enforce__header,
  .admin-hub-website .wa-alt-review-card,
  .admin-hub-website .wa-alt-cluster-card,
  .admin-hub-website .wa-alt-exception-card,
  .admin-hub-website .wa-alt-form-card {
    padding: 0.65rem;
  }
  .admin-hub-website .wa-alt-review-member {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .admin-hub-website .wa-alt-review-primary {
    grid-template-columns: 1fr;
  }
  .admin-hub-website .wa-alt-review-member > .wa-alt-small-action {
    grid-column: 2;
    justify-self: start;
  }
  .admin-hub-website .wa-alt-evidence li {
    grid-template-columns: 1fr;
  }
  .admin-hub-website .wa-alt-review-card__actions {
    align-items: stretch;
  }
  .admin-hub-website .wa-alt-review-card__actions > div {
    width: 100%;
  }
  .admin-hub-website .wa-alt-review-card__actions .btn {
    flex: 1 1 auto;
  }
  .admin-hub-website .wa-alt-primary {
    flex-wrap: wrap;
  }
  .admin-hub-website .wa-alt-primary__hint {
    width: 100%;
    margin-left: 2.7rem;
    text-align: left;
  }
  .admin-hub-website .wa-alt-secondary__actions {
    width: 100%;
  }
  .admin-hub-website .wa-alt-secondary__actions .btn {
    flex: 1 1 auto;
  }
  .admin-hub-website .wa-alt-exception-card {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }
  .admin-hub-website .wa-alt-exception-card .btn {
    justify-self: start;
  }
}
.admin-nav-editor .admin-nav-row__fields .admin-field,
.admin-nav-editor__add-grid .admin-field {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  min-width: 0;
}
.admin-nav-editor .admin-field__label {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.admin-nav-row {
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  padding: 0.55rem 0.65rem;
}
.admin-hub-tickets .admin-panel {
  margin-top: 0.75rem;
}
.admin-hub-tickets .ticket-table,
.admin-hub-tickets .ticket-list {
  border-radius: 0.55rem;
  overflow: hidden;
}
.admin-role-perms.admin-panel {
  padding: 1rem 1.1rem;
}
.admin-role-perms .admin-panel__title {
  margin: 0;
}
.admin-role-perms .admin-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.85rem;
  margin: 0 0 0.85rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.admin-role-perms .admin-field {
  display: grid;
  gap: 0.3rem;
  margin: 0 0 0.65rem;
}
.admin-hub-shop .admin-panel__head {
  margin-bottom: 0.65rem;
}
.admin-hub-shop .admin-manage__row.admin-form--grid,
.admin-hub-shop .admin-form.admin-form--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.65rem;
  align-items: end;
}
.admin-catalog__head .admin-panel__title {
  margin: 0;
  font-size: 1rem;
}
.admin-catalog__head .admin-panel__desc {
  margin: 0.2rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}
.shop-assets.admin-panel {
  padding: 0.85rem;
}
.admin-announce-span-2 {
  grid-column: 1 / -1;
}
.admin-announce-switch {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0.25rem 0;
  text-align: left;
}
.admin-announce-switch input {
  margin-top: 0.2rem;
}
.admin-announce-switch span {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.admin-announce-switch small {
  font-size: 0.75rem;
}
.admin-announce-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 0.55rem;
}
.admin-announce-feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  text-align: left;
  padding: 0.7rem 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
  color: inherit;
  cursor: pointer;
}
.admin-announce-feature:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--color-gold, #d4af37) 45%, transparent);
}
.admin-announce-feature.is-on {
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(127, 29, 29, 0.28);
}
.admin-announce-feature:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.admin-announce-feature__paths {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono, ui-monospace, monospace);
}
.admin-announce-banner-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.admin-announce-banner-nav__item {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.5rem;
  align-items: center;
  text-align: left;
  padding: 0.55rem 0.6rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.admin-announce-banner-nav__item:hover,
.admin-announce-banner-nav__item.is-active {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}
.admin-announce-banner-nav__copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.admin-announce-banner-nav__copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-announce-banner-nav__idx {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}
.admin-announce-sev {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: #60a5fa;
}
.admin-announce-sev--warning {
  background: #f59e0b;
}
.admin-announce-sev--critical {
  background: #f87171;
}
.admin-announce-editor__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, transparent, rgba(9, 9, 11, 0.92) 30%);
  padding-bottom: 0.35rem;
}
.site-maintenance-gate {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-offset) + 2rem) 1.25rem 3rem;
  min-height: 50vh;
}
.site-maintenance-bypass {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: var(--header-offset);
  padding: 0.55rem 1rem;
  background: rgba(120, 40, 20, 0.92);
  color: #ffe4e4;
  font-size: 0.85rem;
  text-align: center;
  border-bottom: 1px solid rgba(248, 113, 113, 0.35);
}
.site-maintenance-bypass span {
  max-width: 52rem;
}
.site-maintenance-gate__card {
  width: min(100%, 34rem);
  padding: 1.75rem 1.5rem;
  border-radius: 12px;
  border: 1px solid rgba(248, 113, 113, 0.3);
  background: rgba(40, 16, 18, 0.72);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.site-maintenance-gate__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fecaca;
  border: 1px solid rgba(248, 113, 113, 0.35);
}
.site-maintenance-gate__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.site-maintenance-gate__note {
  margin-top: 1rem;
  font-size: 0.8rem;
}
@media (max-width: 860px) {
  .admin-announce-layout {
    grid-template-columns: 1fr;
  }
  .admin-announce-side {
    position: static;
  }
  .admin-announce-grid-2 {
    grid-template-columns: 1fr;
  }
}
.admin-announce-editor__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.55rem 0.75rem;
  align-items: end;
}
.admin-announce-editor__fields label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
}
.admin-announce-editor__check {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0.45rem !important;
  margin: 0.35rem 0;
}
.site-announce {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  /* Must stay below .site-header so Games / account menus aren’t covered. */
  z-index: var(--z-announce);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(24, 24, 27, 0.95);
  backdrop-filter: blur(12px);
}
.site-announce--info {
  background: rgba(39, 60, 90, 0.92);
  border-bottom-color: rgba(125, 180, 255, 0.25);
}
.site-announce--warning {
  background: rgba(72, 52, 20, 0.94);
  border-bottom-color: rgba(245, 158, 11, 0.35);
}
.site-announce--critical {
  background: rgba(72, 24, 28, 0.96);
  border-bottom-color: rgba(248, 113, 113, 0.4);
}
.site-announce__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.65rem 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.site-announce__copy {
  min-width: 0;
}
.site-announce__title {
  display: block;
  font-size: 0.95rem;
}
.site-announce__body {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.4;
}
.site-announce__link {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-announce__dismiss {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 0.75;
  cursor: pointer;
  padding: 0.15rem;
}
.site-announce__dismiss:hover {
  opacity: 1;
}
.admin-nav-editor__list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: var(--space-3) 0;
}
.admin-nav-row {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}
.admin-nav-row__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.admin-nav-row__fields {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(10rem, 1.4fr) auto auto;
  gap: 0.5rem 0.75rem;
  align-items: end;
}
.admin-nav-row__fields label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
}
.admin-nav-row__meta {
  align-self: center;
  font-size: var(--text-sm);
}
.admin-nav-row__tag {
  align-self: center;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 0.15rem 0.45rem;
}
.admin-nav-row__tag.is-hidden {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.35);
}
.admin-nav-editor__add {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.admin-nav-editor__add-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.75rem;
  margin: 0.75rem 0;
}
@media (max-width: 720px) {
  .admin-nav-row__fields {
    grid-template-columns: 1fr;
  }
}
.admin-hub-shop__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.admin-hub-planned__list {
  margin: var(--space-2) 0 0;
  padding-left: 1.2rem;
}
@media (max-width: 860px) {
  .admin-hub {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .admin-hub__main {
    padding: var(--space-4) var(--space-3);
  }
  .admin-page__bar {
    padding-inline: var(--space-3);
  }
  .admin-hub__content {
    max-width: 100%;
  }
  .admin-hub-modal__panel--mega {
    width: min(100%, 100%);
    max-height: 96vh;
  }
  .admin-page {
    height: auto;
    min-height: calc(100vh - var(--header-offset, 4.5rem));
  }
  .admin-section-layout,
  .shop-manage-modal {
    grid-template-columns: 1fr;
  }
  .admin-catalog__nav {
    max-height: none;
  }
}
.admin-manage__subtitle {
  margin: var(--space-3) 0 var(--space-2);
  font-weight: 600;
}
.admin-manage__stack {
  display: grid;
  gap: var(--space-2);
}
.admin-manage__pager {
  margin-top: var(--space-3);
}
.admin-review-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.admin-review-card {
  padding: var(--space-3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
.admin-review-card.is-open {
  border-color: rgba(212, 175, 55, 0.35);
}
.admin-review-card__head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.admin-review-card__summary {
  margin: var(--space-2) 0;
}
.admin-review-card__notes {
  margin: 0 0 var(--space-2);
  white-space: pre-wrap;
}
.admin-review-card__form {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.admin-review-card__form textarea {
  width: 100%;
  min-height: 3.5rem;
  resize: vertical;
}
.admin-review-card__media {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}
.admin-review-card__preview {
  max-width: min(100%, 420px);
  max-height: 240px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.25);
}
.admin-review-card__context--banner img {
  display: block;
  width: min(100%, 640px);
  aspect-ratio: 4 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.25);
}
.admin-review-card__media-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.admin-review-card__revisions ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.admin-review-card__revisions li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.admin-review-card__revisions img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
}
.admin-review-card__check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
}
.shop-assets {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: var(--space-4);
  min-height: 24rem;
}
.shop-assets__nav {
  display: grid;
  gap: var(--space-1);
  align-content: start;
}
.shop-assets__nav button {
  padding: var(--space-2) var(--space-3);
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
}
.shop-assets__nav button.is-active {
  color: var(--color-text);
  border-color: rgba(182, 255, 42, 0.35);
}
.shop-assets__main { display: grid; gap: var(--space-3); align-content: start; }
.shop-assets__main > input[type="search"] {
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
}
.shop-assets__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--space-3);
}
.shop-asset-card {
  display: grid;
  gap: 0.35rem;
  padding: var(--space-2);
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
.shop-asset-card.is-selected { border-color: var(--color-accent); }
.shop-asset-card__preview {
  height: 5.5rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-accent);
  cursor: pointer;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 0;
}
.shop-asset-card__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shop-asset-card strong {
  font-size: var(--text-xs);
  word-break: break-word;
}
.shop-asset-card__actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.shop-item-form { display: grid; gap: var(--space-4); }
.shop-item-form__asset {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
.shop-item-form__preview {
  height: 6rem;
  border-radius: var(--radius-sm);
  border: none;
  box-shadow: var(--shadow-float-sm);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.25);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}
.shop-item-form__preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.shop-item-form__preview .avatar-ring,
.shop-item-form__preview [class*="frame-"] {
  width: 4.5rem;
  height: 4.5rem;
}
.shop-item-form__preview .shop-theme-preview,
.shop-item-form__theme-preview {
  width: 100%;
  height: 100%;
}
.shop-item-form__theme-preview .shop-theme-preview {
  transform: scale(0.85);
  transform-origin: center;
}
.shop-item-form__asset-actions,
.shop-item-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.shop-item-form__actions { justify-content: flex-end; }
.shop-border-editor {
  display: grid;
  gap: 0.85rem;
}
.shop-border-editor__preview {
  overflow: visible;
  padding: 1.25rem 0.85rem;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.28);
}
.shop-border-editor__stage {
  position: relative;
  overflow: visible;
}
.shop-border-editor__stage .profile-border-preview {
  margin: 0;
  width: 100%;
}
.shop-border-editor__stage .profile-border-preview .profile-hero {
  width: 100%;
}
.profile-hero > .profile-hero__outline-guide {
  position: absolute;
  inset: 0;
  border: 2px dotted rgba(255, 255, 255, 0.48);
  border-radius: inherit;
  pointer-events: none;
  z-index: 30;
  box-sizing: border-box;
}
.shop-border-editor__guides {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  border-right: 1px solid rgba(255, 255, 255, 0.35);
  z-index: 9;
  border-radius: inherit;
}
.shop-border-editor__sliders {
  display: grid;
  gap: 0.75rem;
}
.shop-border-editor__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.shop-border-editor__slider {
  display: grid;
  gap: 0.35rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.shop-border-editor__slider strong {
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.shop-border-editor__slider input[type="range"] {
  width: 100%;
  accent-color: var(--color-accent);
}
.admin-games__note {
  grid-column: 1 / -1;
  margin: 0;
}
@media (max-width: 860px) {
  .shop-manage-modal,
  .shop-assets {
    grid-template-columns: 1fr;
  }
}
.shop-links, .shop-cats {
  display: none;
}
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--space-4);
}
.shop-list {
  display: grid;
  gap: var(--space-4);
}
.shop-list-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  color: inherit;
  text-decoration: none;
}
.shop-list-row:has(.shop-card__visual--shop-art),
.shop-list-row:has(.shop-card__visual--border),
.shop-list-row:has(.shop-card__visual--banner) {
  grid-template-columns: 9rem minmax(0, 1fr) auto auto;
}
.shop-list-row__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.1rem;
  text-align: right;
  min-width: 4.5rem;
}
.shop-price-block {
  display: flex;
  flex-direction: column;
  align-items: inherit;
  gap: 0.1rem;
}
.shop-list-row__body .shop-level-req {
  margin-top: 0.2rem;
}
.shop-list-row:has(.shop-card__visual--shop-art) .shop-list-row__visual,
.shop-list-row:has(.shop-card__visual--border) .shop-list-row__visual,
.shop-list-row:has(.shop-card__visual--banner) .shop-list-row__visual {
  width: 9rem;
  height: 3.25rem;
}
.shop-list-row:hover {
  border-color: rgba(182, 255, 42, 0.35);
}
.shop-list-row.is-locked { opacity: 0.72; }
.shop-list-row__visual {
  width: 4.5rem;
  height: 4.5rem;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  position: relative;
}
.shop-list-row__visual .shop-card__visual {
  min-height: 4.5rem;
  margin: 0;
  padding: 0.35rem;
  border-bottom: 0;
}
.shop-list-row__visual .shop-card__visual--banner {
  position: absolute;
  inset: 0;
  padding: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  height: 100%;
  width: 100%;
  aspect-ratio: auto;
  border-radius: inherit;
}
.shop-list-row__visual .shop-card__visual--banner .banner-fit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.shop-list-row__body { min-width: 0; }
.shop-list-row__body .h3 { margin: 0; font-size: var(--text-md); }
.shop-list-row__desc {
  margin: 0.15rem 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shop-section { margin-bottom: var(--space-10); }
.shop-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-float);
  transition: box-shadow var(--ease);
}
.shop-card:has(.shop-card__visual--border) {
  overflow: visible;
}
.shop-list-row:has(.shop-card__visual--border) {
  overflow: visible;
}
.shop-card.is-locked { opacity: 0.72; }
.shop-card--legendary {
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(245, 197, 66, 0.25);
}
.shop-card--mythic {
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(248, 113, 113, 0.28);
}
.shop-card__price { color: var(--color-accent); font-weight: 600; }
.shop-card__visual {
  min-height: 5.5rem;
  display: grid;
  place-items: center;
  margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) 0.55rem;
  padding: 1.1rem var(--space-4);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
@media (max-width: 1024px) {
  main.section.section--shop,
  #content.section.section--shop,
  main#content.section.section--shop {
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: visible;
    padding-bottom: var(--space-8);
    --shop-sticky-top: calc(var(--header-offset) + var(--space-2));
  }
  .shop-page {
    overflow: visible;
    flex: none;
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .shop-shell {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    height: auto;
    flex: none;
    gap: var(--space-3);
    width: min(100% - var(--space-6), var(--container));
    margin-inline: auto;
    padding-inline: 0;
  }
  .shop-float-nav::before,
  .shop-main__top::before {
    display: none;
  }
  .shop-float-nav {
    position: static;
    top: auto;
    z-index: auto;
    width: 100%;
    max-height: none;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: 0;
    padding: var(--space-1);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-float-sm);
  }
  .shop-float-nav::-webkit-scrollbar {
    display: none;
  }
  .shop-float-nav a {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: var(--space-2) var(--space-3);
    font-size: 0.8125rem;
    min-height: 2.25rem;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.04);
  }
  .shop-float-nav__filter {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: var(--space-2) var(--space-3);
    font-size: 0.8125rem;
    min-height: 2.25rem;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.04);
  }
  .shop-float-nav a.is-active {
    background: rgba(255, 255, 255, 0.12);
  }
  .shop-float-nav__filter.is-active {
    background: rgba(255, 255, 255, 0.12);
  }
  .shop-float-nav__rule {
    display: none;
  }
  .shop-main {
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: none;
    overflow: visible;
    min-width: 0;
  }
  .shop-main__top {
    position: static;
    top: auto;
    z-index: auto;
    padding-top: 0;
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-2);
    box-shadow: none;
    border-bottom: 1px solid var(--color-border);
  }
  .shop-head {
    margin-bottom: var(--space-2);
  }
  .shop-balance strong {
    font-size: 1.15rem;
  }
  .shop-toolbar {
    gap: var(--space-2);
    margin-bottom: 0;
  }
  .shop-toolbar__search,
  .shop-toolbar__sort {
    flex: 1 1 calc(50% - var(--space-1));
    min-width: 0;
  }
  .shop-toolbar__views {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
  .shop-toolbar__filters-panel > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.25rem;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated);
    box-shadow: var(--shadow-float-sm);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    list-style: none;
  }
  .shop-toolbar__filters-panel > summary::-webkit-details-marker {
    display: none;
  }
  .shop-toolbar__filters-panel > summary::after {
    content: "▾";
    font-size: 0.75rem;
    opacity: 0.7;
    transition: transform var(--ease);
  }
  .shop-toolbar__filters-panel[open] > summary::after {
    transform: rotate(180deg);
  }
  .shop-toolbar__filters-panel .shop-toolbar__filters {
    margin-top: var(--space-2);
  }
  .shop-catalog {
    overflow: visible;
    overflow-y: visible;
    padding-top: var(--space-1);
  }
  .shop-catalog:has(.shop-live-preview-layout) {
    display: block;
    overflow: visible;
    padding-bottom: var(--space-8);
  }
  .shop-list-row {
    grid-template-columns: 3.5rem minmax(0, 1fr);
  }
  .shop-list-row .shop-rarity,
  .shop-list-row .shop-card__price,
  .shop-list-row .shop-lock,
  .shop-list-row .shop-list-row__meta,
  .shop-list-row .btn {
    grid-column: 2;
  }

  /* Shared mobile toolbar pattern (leaderboards, roster, history, players, etc.) */
  .lb-toolbar {
    gap: var(--space-2);
    margin-bottom: var(--space-4);
  }

  .lb-toolbar__controls,
  .lb-toolbar__bar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .lb-toolbar__bar {
    padding: 0.65rem;
  }

  .lb-toolbar__cluster,
  .lb-toolbar__cluster--start,
  .lb-toolbar__cluster--end {
    width: 100%;
    margin-left: 0;
  }

  .lb-toolbar__controls > .lb-search,
  .lb-toolbar__controls > .lb-toolbar__search-group,
  .lb-toolbar__cluster > .lb-search {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
  }

  .members-sort {
    width: 100%;
    flex-wrap: wrap;
    white-space: normal;
  }

  .members-sort__buttons.lb-seg {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }

  .members-sort__buttons.lb-seg::-webkit-scrollbar {
    display: none;
  }

  .lb-toolbar__options-panel > summary,
  .shop-toolbar__filters-panel > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.25rem;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated);
    box-shadow: var(--shadow-float-sm);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    list-style: none;
  }

  .lb-toolbar__options-panel > summary::-webkit-details-marker,
  .shop-toolbar__filters-panel > summary::-webkit-details-marker {
    display: none;
  }

  .lb-toolbar__options-panel > summary::after,
  .shop-toolbar__filters-panel > summary::after {
    content: "▾";
    font-size: 0.75rem;
    opacity: 0.7;
    transition: transform var(--ease);
  }

  .lb-toolbar__options-panel[open] > summary::after,
  .shop-toolbar__filters-panel[open] > summary::after {
    transform: rotate(180deg);
  }

  .lb-toolbar__options-panel .lb-toolbar__options {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-2);
  }

  .lb-toolbar__options-panel .shop-toolbar__filters {
    margin-top: var(--space-2);
  }

  .lb-seg {
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .lb-seg::-webkit-scrollbar {
    display: none;
  }

  .lb-seg button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .lb-season {
    width: 100%;
    min-width: 0;
  }

  .profile-nav__realms {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .profile-nav__realms::-webkit-scrollbar {
    display: none;
  }

  .profile-nav__realm {
    flex-shrink: 0;
  }

  .profile-nav__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .profile-nav__tabs::-webkit-scrollbar {
    display: none;
  }

  .profile-nav__tab {
    flex-shrink: 0;
  }

  .ticket-nav__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--space-1);
  }

  .ticket-nav__tabs::-webkit-scrollbar {
    display: none;
  }

  .ticket-nav__tab {
    flex-shrink: 0;
  }

  .profile-achieve-filters__tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    gap: var(--space-2);
    padding-bottom: 0;
  }

  .profile-achieve-filters__tabs::-webkit-scrollbar {
    display: none;
  }

  .profile-achieve-filters__tabs .profile-tab,
  .profile-achieve-filters__tabs .btn {
    width: 100%;
    min-width: 0;
  }

  .profile-achieve-filters__tabs .profile-tab {
    padding-inline: 0.35rem;
    font-size: 0.75rem;
    white-space: nowrap;
  }

  .profile-achieve-filters__tabs .profile-claim-all {
    grid-column: 1 / -1;
  }

  .profile-achieve-filters__tabs > .profile-achieve-season {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  #members-app {
    overflow-x: clip;
  }
}

@media (min-width: 1025px) {
  .shop-toolbar__filters-panel > summary {
    display: none;
  }
  .shop-toolbar__filters-panel .shop-toolbar__filters {
    display: flex;
  }
  .lb-toolbar__options-panel > summary {
    display: none;
  }
  .lb-toolbar__options-panel .lb-toolbar__options {
    display: contents;
  }
  .profile-inventory__toolbar .shop-toolbar__filters-panel > summary {
    display: none;
  }
  .profile-inventory__toolbar .shop-toolbar__filters-panel .shop-toolbar__filters {
    display: flex;
  }
}
.shop-card__visual--banner {
  /* Banner assets are ~4:1 — match that frame so the full art shows edge-to-edge. */
  position: relative;
  aspect-ratio: 4 / 1;
  width: auto;
  align-self: stretch;
  min-height: 0 !important;
  height: auto;
  margin-inline: calc(var(--space-4) * -1);
  margin-top: calc(var(--space-4) * -1);
  margin-bottom: 0.55rem;
  padding: 0 !important;
  display: block;
  overflow: hidden;
  background: #0a0a0c;
  place-items: unset;
  border-radius: 0;
}
.shop-card__visual--banner .banner-fit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.shop-card--banner .shop-card__visual--banner {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.shop-card__visual--title {
  position: relative;
  min-height: 6rem;
  background: #000;
  background-image: none;
  overflow: hidden;
}
.shop-card__visual--title::before {
  content: none;
}
.shop-card__visual--title::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  pointer-events: none;
}
.shop-card__title-sample {
  position: relative;
  z-index: 1;
  font-size: 1.05rem;
  text-align: center;
  color: var(--shop-title-color, #c9b896);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85), 0 0 14px rgba(0, 0, 0, 0.45);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}
.shop-card .irg-title,
.shop-list-row .irg-title {
  color: var(--shop-title-color, #c9b896);
}
/* Legacy theme classes — keep selectors but force black panels. */
.title-bg-rift,
.title-bg-ranked,
.title-bg-prestige,
.title-bg-custom,
.title-bg-void,
.title-bg-darkin,
.title-bg-shadow,
.title-bg-blood,
.title-bg-demacia,
.title-bg-noxus,
.title-bg-freljord,
.title-bg-shurima,
.title-bg-ionia,
.title-bg-bilgewater,
.title-bg-targon,
.title-bg-zaun,
.title-bg-dragon,
.title-bg-baron,
.title-bg-lane,
.title-bg-highlight,
.title-bg-lobby {
  background: #000 !important;
  background-image: none !important;
  box-shadow: none !important;
}
.shop-section--custom-title,
.shop-section--custom-border {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
.shop-grid--lead {
  grid-template-columns: minmax(0, 22rem);
}
.shop-catalog:has(.shop-live-preview-layout) {
  display: block;
  overflow: visible;
  padding-bottom: var(--space-12);
}
.shop-live-preview-layout {
  --shop-live-preview-hero-h: clamp(6rem, 14svh, 9rem);
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  margin-bottom: 0;
}
.shop-live-preview-layout__desc {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
}
.shop-preview-dock .shop-preview.shop-preview--banner:not(.irg-border),
.shop-preview-dock .profile-border-preview > .profile-hero.irg-border--image,
.shop-preview-dock .profile-border-preview > .profile-hero.irg-border {
  width: 100%;
  max-height: var(--shop-live-preview-hero-h);
  aspect-ratio: 4 / 1;
  height: auto;
  min-height: 0;
  margin-inline: 0;
}
.shop-preview-dock .shop-banner-live-preview {
  overflow: visible;
  padding-block: clamp(0.65rem, 2vw, 1.1rem);
}
.shop-preview-dock .shop-banner-live-preview:not(:has(.irg-border)) {
  overflow: hidden;
  padding-block: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(182, 255, 42, 0.12);
}
.shop-preview-dock .shop-preview.shop-preview--banner.irg-border--image,
.shop-preview-dock .shop-preview.shop-preview--banner.irg-border {
  overflow: visible !important;
  max-height: var(--shop-live-preview-hero-h);
  aspect-ratio: 4 / 1;
  background-color: #050506;
  box-shadow: none;
  border-radius: 0;
  margin-block: 0;
}
.shop-preview-dock .profile-border-preview.has-cosmetic-banner:has(.profile-hero.irg-border--image) {
  overflow: visible !important;
  padding-block: clamp(0.55rem, 1.4vw, 0.85rem);
}
.shop-preview-dock .profile-border-preview > .profile-hero.irg-border--image {
  overflow: visible !important;
}
.shop-preview-dock .shop-border-live-preview {
  overflow: visible;
  padding: clamp(0.35rem, 1vw, 0.55rem) 0;
}
.shop-detail:has(.profile-border-preview) {
  overflow: visible;
}
.shop-detail .profile-border-preview {
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-4);
  width: auto;
  max-width: none;
}
.shop-detail .profile-border-preview .profile-hero {
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  border: 0;
}
.shop-list-row--text-only {
  grid-template-columns: minmax(0, 1fr) auto auto;
}
.shop-list-row--text-only .shop-list-row__body {
  grid-column: 1;
}
.shop-card--text-only {
  display: grid;
  gap: var(--space-2);
}
.shop-preview--border-plate .shop-preview__banner.irg-border-plate,
.shop-preview--border-plate .irg-border-plate {
  position: absolute;
  inset: 0;
}
.shop-list-row--button,
.shop-card--button {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.shop-list-row--button.is-previewing,
.shop-card--button.is-previewing {
  border-color: rgba(232, 201, 122, 0.55);
  box-shadow: inset 0 0 0 1px rgba(232, 201, 122, 0.25);
}
.shop-card__visual--border {
  position: relative;
  aspect-ratio: 4 / 1;
  width: auto;
  align-self: stretch;
  min-height: 0 !important;
  height: auto;
  margin-inline: calc(var(--space-4) * -1);
  margin-top: calc(var(--space-4) * -1);
  margin-bottom: 0.55rem;
  padding: 0 !important;
  display: block;
  overflow: visible;
  background: transparent;
  place-items: unset;
  border-radius: 0;
}
.shop-border-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.profile-inventory .shop-card:has(.shop-card__visual--border) {
  overflow: hidden;
}
.shop-border-preview__banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.shop-card__visual--name .irg-name { font-size: 1.15rem; }
.shop-card__visual--theme { min-height: 4.5rem; width: 100%; }
.shop-card__theme-swatch,
.shop-card__fx-label,
.shop-card__collectible {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--color-accent);
}
.shop-card__collectible {
  width: 4.2rem;
  height: 4.2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  background: radial-gradient(circle at 30% 30%, rgba(182, 255, 42, 0.25), #09090b);
}
.section-head--shop {
  max-width: none;
  margin: 0 auto var(--space-8);
}
.shop-hero-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: min(52rem, 100%);
  margin: 0 auto;
}
.shop-hero-title h1 {
  margin: 0;
  flex: 0 0 auto;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-shadow: 0 0 18px rgba(182, 255, 42, 0.28);
  white-space: nowrap;
}
.shop-hero-title__rule {
  flex: 1 1 0;
  height: 2px;
  min-width: 2.5rem;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, transparent, var(--color-accent-deep), var(--color-accent), var(--color-accent-deep), transparent);
  box-shadow: 0 0 12px rgba(182, 255, 42, 0.35);
}
.shop-level-req {
  font-size: var(--text-xs);
  margin: 0.1rem 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-level-req--ok { color: var(--color-text-muted); }
.shop-level-req--locked { color: #f87171; }
.shop-lock {
  color: #f87171;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}
.shop-price-block .shop-card__price {
  margin: 0;
}
.shop-rarity { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; color: var(--color-text-muted); }
.shop-rarity--rare { color: #60a5fa; }
.shop-rarity--epic { color: #c084fc; }
.shop-rarity--legendary { color: #f5c542; }
.shop-rarity--mythic { color: #f87171; }
.shop-detail, .shop-custom, .shop-preview {
  padding: var(--space-5);
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  margin-bottom: var(--space-4);
}
.shop-detail:has(.irg-border--image) {
  overflow: visible;
}
.shop-preview {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  position: relative;
  overflow: hidden;
  min-height: 7rem;
}
.shop-preview.shop-preview--banner {
  display: block;
  aspect-ratio: 4 / 1;
  width: 100%;
  min-height: 0;
  height: auto;
  padding: 0;
  background: #050506;
  overflow: hidden;
}
.shop-preview.shop-preview--banner.irg-border--image {
  overflow: visible;
  margin-block: clamp(0.5rem, 2vw, 0.85rem);
}
.shop-preview--border-plate .shop-preview__banner.irg-border-plate,
.shop-preview--border-plate .irg-border-plate {
  position: absolute;
  inset: 0;
}
.shop-preview--irg-sample .shop-preview__banner.irg-border-sample,
.shop-preview--irg-sample .irg-border-sample {
  position: absolute;
  inset: 0;
}
.shop-detail .shop-preview.shop-preview--banner {
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-4);
  width: auto;
  max-width: none;
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  border: 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
.shop-preview__banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.shop-preview__content {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--space-4);
  align-items: center;
  height: 100%;
  padding: 0 var(--space-5);
  box-sizing: border-box;
}
.shop-preview.shop-preview--banner .shop-preview__id .subtle,
.shop-preview.shop-preview--banner .irg-name {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
}
.shop-preview.shop-preview--banner .irg-avatar,
.shop-preview.shop-preview--banner .profile-hero__avatar,
.shop-preview.shop-preview--banner img.irg-avatar {
  width: clamp(2.25rem, 10vw, 3.5rem);
  height: clamp(2.25rem, 10vw, 3.5rem);
}
.shop-detail__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.shop-custom { display: grid; gap: var(--space-3); max-width: 28rem; }
.admin-shop-workspace {
  display: grid;
  grid-template-columns: minmax(16.5rem, 18.75rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.admin-shop-add {
  position: sticky;
  top: calc(var(--header-offset) + 0.75rem);
  margin: 0;
}
.admin-shop-panel {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.85rem 0.9rem 1rem;
  border: none;
  border-radius: 1rem;
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-float), 0 0 28px rgba(182, 255, 42, 0.12);
}
.admin-shop-panel__head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.admin-shop-panel__icon {
  flex: 0 0 auto;
  color: var(--color-text-subtle);
}
.admin-shop-group {
  margin: 0;
  padding: 0.65rem 0.7rem 0.75rem;
  border: none;
  border-radius: 0.7rem;
  box-shadow: var(--shadow-float-sm);
  min-width: 0;
}
.admin-shop-group legend {
  padding: 0 0.35rem;
  font-size: 0.72rem;
  color: var(--color-text-muted);
}
.admin-shop-field {
  display: grid;
  gap: 0.28rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.admin-shop-field + .admin-shop-field { margin-top: 0.45rem; }
.admin-shop-field input,
.admin-shop-field select,
.admin-shop-field textarea {
  width: 100%;
  min-height: 2.15rem;
  padding: 0.4rem 0.65rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: 0.6rem;
  background: #0c0c0e;
  color: var(--color-text);
}
.admin-shop-field textarea {
  min-height: 4.2rem;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.8rem;
}
.admin-shop-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 1.8rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.admin-shop-switch + .admin-shop-switch { margin-top: 0.35rem; }
.admin-shop-switch input {
  appearance: none;
  -webkit-appearance: none;
  width: 2.55rem;
  height: 1.4rem;
  margin: 0;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: #3f3f46;
  position: relative;
  cursor: pointer;
  transition: background 160ms ease;
}
.admin-shop-switch input::after {
  content: "";
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: #fff;
  transition: transform 160ms ease;
}
.admin-shop-switch input:checked { background: var(--color-accent); }
.admin-shop-switch input:checked::after { transform: translateX(1.15rem); }
.admin-shop-switch input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.admin-shop-panel__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.admin-shop-panel__actions .btn,
.admin-shop-submit {
  border-radius: var(--radius-full);
}
.admin-shop-panel__actions .btn {
  border-color: rgba(255, 255, 255, 0.28);
  background: #0a0a0a;
}
.admin-shop-submit {
  width: 100%;
  min-height: 2.55rem;
  background: #3f6212;
  color: #fff;
  border: 0;
}
.admin-shop-submit:hover { background: #4d7c16; }
.admin-shop-browse {
  display: grid;
  gap: 0.7rem;
  min-width: 0;
}
.admin-shop-browse__viewport {
  min-width: 0;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
}
.admin-shop-browse__page {
  display: grid;
  grid-template-columns: repeat(var(--shop-cols, 2), minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}
.admin-shop-browse__page.is-in {
  animation: admin-shop-slide 280ms ease;
}
@keyframes admin-shop-slide {
  from { opacity: 0.45; transform: translateX(var(--shop-slide, 18px)); }
  to { opacity: 1; transform: none; }
}
.admin-shop-empty {
  display: grid;
  place-items: center;
  min-height: 14rem;
  margin: 0;
  border: 1px dashed var(--color-border);
  border-radius: 1rem;
  color: var(--color-text-muted);
}
.admin-empty {
  margin: 0;
  padding: var(--space-5) var(--space-3);
  text-align: center;
  color: var(--color-text-muted);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  font-size: var(--text-sm);
}
.admin-busy {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.admin-mode-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.admin-mode-banner--test {
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.28);
}
.admin-mode-banner--live {
  background: rgba(182, 255, 42, 0.08);
  border: 1px solid rgba(182, 255, 42, 0.22);
}
.admin-mode-banner--warn {
  background: rgba(220, 60, 60, 0.1);
  border: 1px solid rgba(220, 60, 60, 0.28);
}
.admin-mode-banner__text {
  flex: 1 1 12rem;
  min-width: 0;
}
.admin-mode-banner__action {
  flex: 0 0 auto;
}
.admin-shop-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.admin-shop-pager .admin-slider__dots { padding: 0; }
.admin-shop-pager button[data-page] {
  width: 2rem;
  height: 2rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: 999px;
  background: rgba(18, 18, 20, 0.86);
  color: var(--color-text);
  cursor: pointer;
}
.admin-shop-pager button[data-page]:disabled {
  opacity: 0.35;
  cursor: default;
}
@media (prefers-reduced-motion: reduce) {
  .admin-shop-browse__page.is-in { animation: none; }
}
@media (max-width: 900px) {
  .admin-shop-workspace { grid-template-columns: 1fr; }
  .admin-shop-add { position: static; }
}
.admin-manage { display: grid; gap: var(--space-4); }
.admin-form.admin-manage__row {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  align-items: end;
}
.admin-shop-danger {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.45);
  color: #fecaca;
}
.admin-shop-danger:hover { background: rgba(239, 68, 68, 0.24); }
.admin-shop-backup {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  gap: var(--space-3);
}
.admin-shop-backup__title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 650;
}
.shop-item-form__missing {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0.5rem;
  color: #fecaca;
  font-size: var(--text-sm);
  font-weight: 650;
  text-align: center;
}
.admin-confirm {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(4, 8, 6, 0.72);
}
.admin-confirm__dialog {
  width: min(28rem, 100%);
  display: grid;
  gap: 0.65rem;
  padding: 1.1rem 1.15rem 1rem;
  border: none;
  border-radius: 0.9rem;
  background: var(--color-bg-elevated, #121814);
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(239, 68, 68, 0.45);
}
.admin-confirm__kicker {
  margin: 0;
  color: #fecaca;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.admin-confirm__body { margin: 0; color: var(--color-text-muted, #c7d2cc); }
.admin-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.35rem;
}
.admin-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  table-layout: fixed;
}
.admin-table th,
.admin-table td {
  text-align: left;
  padding: 0.45rem 0.5rem;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  vertical-align: middle;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.admin-table th { color: var(--color-text-subtle); font-weight: var(--weight-medium); }
.admin-member-list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.admin-member-list__btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: baseline;
  text-align: left;
  padding: 0.55rem 0.7rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  cursor: pointer;
}
.admin-member-list__btn.is-on,
.admin-member-list__btn:hover {
  border-color: rgba(182, 255, 42, 0.35);
}
.admin-member-editor {
  margin-top: 1rem;
  display: grid;
  gap: 0.7rem;
  padding-top: 0.8rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.flash { padding: 0.6rem 0.8rem; border-radius: var(--radius-sm); background: var(--color-accent-dim); color: var(--color-accent); }
.flash--bad { background: rgba(248, 113, 113, 0.12); color: #fca5a5; }

/* Frames, banners, titles: see cosmetics.css */
.profile-achieve-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}
.profile-achieve-rewards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-3);
  width: 100%;
}
.reward-meter {
  position: relative;
  padding: 0.85rem 1rem;
  border: none;
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  box-shadow: var(--shadow-float-sm);
  display: grid;
  gap: 0.55rem;
  overflow: hidden;
}
.reward-meter--activity {
  box-shadow: var(--shadow-float-sm), inset 0 0 0 1px rgba(182, 255, 42, 0.22);
}
.reward-meter--games {
  box-shadow: var(--shadow-float-sm), inset 0 0 0 1px rgba(96, 165, 250, 0.28);
}
.reward-meter__head {
  display: flex;
  justify-content: space-between;
  gap: 0.65rem;
  align-items: flex-start;
}
.reward-meter__title-wrap {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  min-width: 0;
}
.reward-meter__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.reward-meter__icon {
  font-size: 1.35rem;
  line-height: 1;
  flex-shrink: 0;
}
.reward-meter__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}
.reward-meter__caption,
.reward-meter__rate {
  margin: 0.12rem 0 0;
  font-size: 0.78rem;
}
.reward-meter__bar {
  height: 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.reward-meter__bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(182, 255, 42, 0.35), var(--color-accent));
  transition: width 0.25s ease;
}
.reward-meter--games .reward-meter__bar-fill {
  background: linear-gradient(90deg, rgba(96, 165, 250, 0.35), #60a5fa);
}
.reward-meter__stat {
  margin: 0;
  font-size: 0.78rem;
}
.reward-meter__preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.reward-meter__total-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.reward-meter__total-label::after {
  content: ":";
}
.reward-meter__pill {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
}
.reward-meter__pill--pts {
  background: rgba(182, 255, 42, 0.14);
  color: var(--color-accent);
}
.reward-meter__pill--xp {
  background: rgba(139, 92, 246, 0.18);
  color: #c4b5fd;
}
.reward-meter__note {
  font-size: 0.72rem;
}
.reward-meter__buckets {
  display: grid;
  gap: 0.45rem;
}
.reward-meter__bucket {
  padding: 0.5rem 0.6rem;
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.reward-meter__bucket--plus {
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.reward-meter--plus-active .reward-meter__bucket--plus {
  background: linear-gradient(135deg, rgba(255, 94, 20, 0.12), rgba(255, 196, 0, 0.08));
  box-shadow: inset 0 0 0 1px rgba(255, 140, 40, 0.35);
}
.reward-meter__bucket-head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: baseline;
}
.reward-meter__bucket-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.reward-meter__bucket--plus .reward-meter__bucket-label {
  color: rgba(255, 255, 255, 0.72);
}
.reward-meter--plus-active .reward-meter__bucket--plus .reward-meter__bucket-label {
  color: #ffb347;
}
.reward-meter__bucket-stat {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.78);
}
.reward-meter__bucket-rate {
  margin: 0.18rem 0 0.28rem;
  font-size: 0.72rem;
}
.reward-meter__bucket-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.reward-meter__plus-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a0a00;
  background: linear-gradient(90deg, #ff6a00, #ffd000, #ff3d00);
  background-size: 200% 100%;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  animation: reward-meter-badge-flow 1.6s linear infinite;
}
.reward-meter--plus-active {
  background:
    radial-gradient(120% 90% at 10% 0%, rgba(255, 90, 0, 0.28), transparent 55%),
    radial-gradient(90% 80% at 100% 100%, rgba(255, 200, 0, 0.16), transparent 50%),
    linear-gradient(145deg, rgba(40, 14, 4, 0.92), rgba(18, 10, 8, 0.95));
  box-shadow:
    var(--shadow-float-sm),
    inset 0 0 0 1px rgba(255, 140, 40, 0.55),
    0 0 22px rgba(255, 100, 0, 0.22);
  animation: reward-meter-pulse 2.4s ease-in-out infinite;
}
.reward-meter--plus-active .reward-meter__bar {
  background: rgba(255, 120, 0, 0.18);
}
.reward-meter--plus-active .reward-meter__bar-fill {
  background: linear-gradient(90deg, #ff3d00, #ffb000, #ff6a00);
  background-size: 200% 100%;
  animation: reward-meter-bar-flow 1.4s linear infinite;
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.55);
}
.reward-meter--plus-active .reward-meter__title {
  text-shadow: 0 0 12px rgba(255, 140, 40, 0.45);
}
.reward-meter--plus-active .reward-meter__icon {
  color: #ffb347;
  filter: drop-shadow(0 0 8px rgba(255, 120, 0, 0.65));
  animation: reward-meter-icon-flicker 1.8s ease-in-out infinite;
}
.reward-meter__heat {
  pointer-events: none;
  position: absolute;
  inset: -20% -10% auto;
  height: 70%;
  background: radial-gradient(ellipse at center, rgba(255, 120, 0, 0.22), transparent 70%);
  animation: reward-meter-heat 2.8s ease-in-out infinite;
}
.reward-meter__ember {
  pointer-events: none;
  position: absolute;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 999px;
  background: #ffb000;
  box-shadow: 0 0 10px rgba(255, 140, 0, 0.9);
  opacity: 0.7;
  animation: reward-meter-ember 2.6s ease-in-out infinite;
}
.reward-meter__ember--1 {
  left: 12%;
  bottom: 18%;
  animation-delay: 0s;
}
.reward-meter__ember--2 {
  left: 58%;
  bottom: 12%;
  width: 0.28rem;
  height: 0.28rem;
  animation-delay: 0.7s;
}
.reward-meter__ember--3 {
  right: 16%;
  bottom: 28%;
  width: 0.22rem;
  height: 0.22rem;
  animation-delay: 1.3s;
}
@keyframes reward-meter-pulse {
  0%,
  100% {
    box-shadow:
      var(--shadow-float-sm),
      inset 0 0 0 1px rgba(255, 140, 40, 0.45),
      0 0 16px rgba(255, 100, 0, 0.16);
  }
  50% {
    box-shadow:
      var(--shadow-float-sm),
      inset 0 0 0 1px rgba(255, 180, 60, 0.75),
      0 0 28px rgba(255, 110, 0, 0.35);
  }
}
@keyframes reward-meter-bar-flow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}
@keyframes reward-meter-badge-flow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}
@keyframes reward-meter-icon-flicker {
  0%,
  100% {
    filter: drop-shadow(0 0 6px rgba(255, 120, 0, 0.45));
  }
  40% {
    filter: drop-shadow(0 0 12px rgba(255, 180, 0, 0.85));
  }
  60% {
    filter: drop-shadow(0 0 8px rgba(255, 80, 0, 0.7));
  }
}
@keyframes reward-meter-heat {
  0%,
  100% {
    opacity: 0.45;
    transform: translateY(0);
  }
  50% {
    opacity: 0.85;
    transform: translateY(-6%);
  }
}
@keyframes reward-meter-ember {
  0%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.35;
  }
  50% {
    transform: translateY(-18px) scale(1.15);
    opacity: 0.9;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reward-meter--plus-active,
  .reward-meter--plus-active .reward-meter__bar-fill,
  .reward-meter--plus-active .reward-meter__icon,
  .reward-meter__plus-badge,
  .reward-meter__heat,
  .reward-meter__ember {
    animation: none !important;
  }
}
.shop-customization {
  display: grid;
  gap: var(--space-8);
  width: 100%;
  max-width: 72rem;
}
.shop-customization__intro {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
  gap: var(--space-6);
  padding: clamp(1.25rem, 3vw, 2rem);
  overflow: hidden;
  border: 1px solid rgba(182, 255, 42, 0.16);
  border-radius: 1.35rem;
  background:
    radial-gradient(circle at 92% 8%, rgba(182, 255, 42, 0.13), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018) 52%, rgba(182, 255, 42, 0.035));
  box-shadow: var(--shadow-float), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.shop-customization__intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 2rem 2rem;
  mask-image: linear-gradient(110deg, rgba(0, 0, 0, 0.8), transparent 70%);
  pointer-events: none;
}
.shop-customization__intro-main,
.shop-customization__intro-metrics,
.shop-customization__intro > .shop-level-req {
  position: relative;
  z-index: 1;
}
.shop-customization__intro-main {
  display: grid;
  gap: var(--space-3);
  align-content: center;
}
.shop-customization__intro-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.shop-customization__intro-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.shop-customization__history-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.22);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.shop-customization__history-btn:hover {
  border-color: rgba(182, 255, 42, 0.35);
  background: rgba(182, 255, 42, 0.08);
  color: var(--color-accent);
}
.shop-customization__history-btn--panel {
  align-self: start;
  margin-top: 0.15rem;
}
.shop-customization__history-badge {
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.28rem;
  border-radius: var(--radius-full);
  background: #b6ff2a;
  color: #0b1008;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.15rem;
  text-align: center;
}
.shop-customization__block-head--split {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.shop-customization__block-head--split > div {
  min-width: 0;
}
.shop-customization__card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.shop-customization__card-top .h3,
.shop-customization__card-top .shop-customization__card-title {
  margin: 0;
}
.shop-customization__panel-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.shop-customization__history-btn--card {
  padding: 0.38rem 0.7rem;
  background: rgba(255, 255, 255, 0.04);
}
.shop-customization__history-btn--card.has-alert {
  border-color: rgba(182, 255, 42, 0.4);
  color: var(--color-accent);
}
.shop-customization__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  padding: 0.28rem 0.55rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.68rem;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.shop-customization__chip--pending {
  border-color: rgba(245, 197, 66, 0.35);
  color: #f5c542;
}
.shop-customization__chip--needs_change {
  border-color: rgba(251, 146, 60, 0.4);
  color: #fb923c;
}
.shop-customization__card-note {
  margin: var(--space-3) 0 0;
  padding: 0.75rem 0.85rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  line-height: 1.45;
}
.shop-custom-history-modal {
  z-index: 95;
}
.shop-custom-history {
  width: min(100%, 38rem);
  max-height: min(90vh, 52rem);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at 100% 0%, rgba(182, 255, 42, 0.07), transparent 40%),
    var(--color-bg-elevated);
}
.shop-custom-history__head {
  align-items: flex-start;
  padding: var(--space-4) var(--space-4) var(--space-3);
}
.shop-custom-history__head .h3 {
  margin: 0.15rem 0 0.35rem;
}
.shop-custom-history__head .muted {
  margin: 0;
  font-size: var(--text-sm);
  max-width: 28rem;
}
.shop-custom-history__body {
  overflow: auto;
  padding: 0 var(--space-4) var(--space-4);
}
.shop-custom-history__empty {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--color-text-muted);
}
.shop-custom-history__empty p {
  margin: 0;
}
.shop-custom-history__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.shop-custom-history__item {
  padding: 0;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.025);
  display: grid;
  gap: 0;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.shop-custom-history__item.is-unread {
  border-color: rgba(182, 255, 42, 0.28);
  box-shadow: inset 0 0 0 1px rgba(182, 255, 42, 0.08);
}
.shop-custom-history__item.is-focused {
  box-shadow: 0 0 0 1px rgba(182, 255, 42, 0.45), 0 10px 28px rgba(0, 0, 0, 0.28);
}
.shop-custom-history__item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.95rem 1rem 0.85rem;
  background: rgba(0, 0, 0, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.shop-custom-history__item-title {
  min-width: 0;
}
.shop-custom-history__kind {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--color-text-muted);
  font-size: 0.65rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.shop-custom-history__name {
  display: block;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.shop-custom-history__status {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 0.28rem 0.6rem;
  border-radius: var(--radius-full);
  font-size: 0.65rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--color-text-muted);
}
.shop-custom-history__status--pending {
  color: #f5c542;
  border-color: rgba(245, 197, 66, 0.35);
  background: rgba(245, 197, 66, 0.08);
}
.shop-custom-history__status--needs_change {
  color: #fb923c;
  border-color: rgba(251, 146, 60, 0.4);
  background: rgba(251, 146, 60, 0.08);
}
.shop-custom-history__status--approved {
  color: var(--color-accent);
  border-color: rgba(182, 255, 42, 0.35);
  background: rgba(182, 255, 42, 0.08);
}
.shop-custom-history__status--rejected {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.08);
}
.shop-custom-history__timeline {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.015);
}
.shop-custom-history__time-row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: baseline;
}
.shop-custom-history__time-row.is-pending .shop-custom-history__time-rel {
  color: var(--color-text-muted);
  font-style: italic;
}
.shop-custom-history__time-label {
  color: var(--color-text-muted);
  font-size: 0.68rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.shop-custom-history__time-row time,
.shop-custom-history__time-row > span.shop-custom-history__time-rel {
  display: grid;
  gap: 0.1rem;
}
.shop-custom-history__time-rel {
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.shop-custom-history__time-exact {
  color: var(--color-text-muted);
  font-size: 0.72rem;
}
.shop-custom-history__section {
  display: grid;
  gap: 0.65rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.shop-custom-history__section:last-child {
  border-bottom: none;
}
.shop-custom-history__section-title {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.68rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.shop-custom-history__facts {
  margin: 0;
  display: grid;
  gap: 0.55rem;
}
.shop-custom-history__facts > div {
  display: grid;
  gap: 0.2rem;
}
.shop-custom-history__facts dt {
  color: var(--color-text-muted);
  font-size: 0.72rem;
}
.shop-custom-history__facts dd {
  margin: 0;
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: 1.45;
  white-space: pre-wrap;
}
.shop-custom-history__asset {
  display: grid;
  gap: 0.45rem;
}
.shop-custom-history__section--desk {
  background: rgba(0, 0, 0, 0.16);
}
.shop-custom-history__section--rejected {
  background: rgba(248, 113, 113, 0.05);
}
.shop-custom-history__section--approved {
  background: rgba(182, 255, 42, 0.04);
}
.shop-custom-history__section--needs_change {
  background: rgba(251, 146, 60, 0.05);
}
.shop-custom-history__decision {
  margin: 0;
  font-size: var(--text-sm);
}
.shop-custom-history__staff {
  margin: 0;
  padding: 0.75rem 0.85rem;
  border-radius: 0.7rem;
  background: rgba(0, 0, 0, 0.28);
  border-left: 3px solid rgba(182, 255, 42, 0.5);
}
.shop-custom-history__section--rejected .shop-custom-history__staff {
  border-left-color: rgba(248, 113, 113, 0.65);
}
.shop-custom-history__section--needs_change .shop-custom-history__staff {
  border-left-color: rgba(251, 146, 60, 0.7);
}
.shop-custom-history__staff-label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
}
.shop-custom-history__section--rejected .shop-custom-history__staff-label {
  color: #f87171;
}
.shop-custom-history__section--needs_change .shop-custom-history__staff-label {
  color: #fb923c;
}
.shop-custom-history__staff p {
  margin: 0;
  line-height: 1.5;
  font-size: var(--text-sm);
  white-space: pre-wrap;
}
.shop-custom-history__staff-empty,
.shop-custom-history__action-copy {
  margin: 0;
  font-size: var(--text-sm);
}
.shop-custom-history__section--action {
  background: rgba(251, 146, 60, 0.04);
}
.shop-custom-history__revise {
  display: grid;
  gap: 0.65rem;
}
.shop-custom-history__revise label {
  display: grid;
  gap: 0.35rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.shop-custom-history__revise input,
.shop-custom-history__revise textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.2);
  color: var(--color-text);
  padding: 0.55rem 0.65rem;
}
.shop-custom-history__revise .btn {
  justify-self: start;
}
@media (max-width: 800px) {
  .shop-customization__card-top {
    flex-direction: column;
  }
  .shop-customization__panel-actions {
    justify-content: flex-start;
  }
  .shop-custom-history__item-head {
    flex-direction: column;
  }
  .shop-custom-history__time-row {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

.shop-customization__eyebrow,
.shop-customization__section-label {
  color: var(--color-accent);
  font-size: 0.68rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.shop-customization__eyebrow span {
  color: var(--color-text-muted);
}
.shop-customization__intro-title {
  display: grid;
  gap: var(--space-2);
}
.shop-customization__intro-title .h3 {
  margin: 0;
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  letter-spacing: -0.035em;
}
.shop-customization__intro-title .muted {
  margin: var(--space-2) 0 0;
  max-width: 37rem;
  font-size: var(--text-md);
  line-height: 1.55;
}
.shop-customization__access {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.45rem;
  padding: 0.38rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.16);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.shop-customization__access.is-active {
  border-color: rgba(182, 255, 42, 0.25);
  color: var(--color-accent);
}
.shop-customization__access-dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #f87171;
  box-shadow: 0 0 0 0.2rem rgba(248, 113, 113, 0.12);
}
.shop-customization__access.is-active .shop-customization__access-dot {
  background: var(--color-accent);
  box-shadow: 0 0 0 0.2rem rgba(182, 255, 42, 0.12);
}
.shop-customization__intro-metrics {
  display: grid;
  align-self: stretch;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 0;
  min-width: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.shop-customization__intro-metrics div {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  padding-left: var(--space-4);
}
.shop-customization__intro-metrics div + div {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.shop-customization__intro-metrics span {
  color: var(--color-text-muted);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.shop-customization__intro-metrics strong {
  overflow: hidden;
  color: var(--color-text);
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  letter-spacing: -0.03em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shop-customization__intro .h3 {
  margin: 0;
}
.shop-customization__intro > .shop-level-req { grid-column: 1 / -1; }
.shop-customization__block {
  display: grid;
  gap: var(--space-4);
}
.shop-customization__block-head {
  display: grid;
  gap: 0.45rem;
  padding-inline: 0.2rem;
}
.shop-customization__section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.shop-customization__section-label span {
  display: inline-grid;
  width: 1.45rem;
  height: 1.45rem;
  place-items: center;
  border: 1px solid rgba(182, 255, 42, 0.35);
  border-radius: 50%;
  background: rgba(182, 255, 42, 0.08);
  font-size: 0.62rem;
}
.shop-customization__block-head .h3 {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
}
.shop-customization__block-head .muted {
  margin: 0;
  max-width: 40rem;
  line-height: 1.5;
}
.shop-customization__name-grid,
.shop-customization__review-grid {
  display: grid;
  gap: var(--space-4);
}
.shop-customization__name-grid {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.shop-customization__review-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.shop-customization__card {
  position: relative;
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.35rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 1rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018));
  box-shadow: var(--shadow-float-sm), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform var(--ease-out), border-color var(--ease-out), box-shadow var(--ease-out);
}
.shop-customization__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.25rem;
  width: 3.5rem;
  height: 2px;
  background: var(--color-accent);
  box-shadow: 0 0 16px rgba(182, 255, 42, 0.42);
}
.shop-customization__card:hover {
  transform: translateY(-2px);
  border-color: rgba(182, 255, 42, 0.2);
  box-shadow: var(--shadow-float-hover), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.shop-customization__card--review::before {
  background: #8b5cf6;
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.42);
}
.shop-customization__card-title,
.shop-customization__card .h3 {
  margin: 0;
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
}
.shop-customization__card > .muted {
  margin: 0;
  line-height: 1.45;
}
.shop-customization__card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.shop-customization__price {
  margin: 0;
  color: var(--color-text);
  font-size: var(--text-sm);
}
.shop-customization__price .muted {
  display: block;
  margin-bottom: 0.12rem;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.shop-customization__price strong {
  color: var(--color-accent);
}
.shop-customization__preview {
  display: grid;
  gap: 0.35rem;
  min-height: 5.25rem;
  align-content: center;
  padding: var(--space-4);
  border: 1px solid rgba(182, 255, 42, 0.12);
  border-radius: 0.8rem;
  background: radial-gradient(circle at 20% 0%, rgba(182, 255, 42, 0.12), transparent 45%), var(--color-surface);
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.15);
}
.shop-customization__preview .subtle {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.shop-customization__swatch-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.shop-customization__swatch {
  display: grid;
  grid-template-columns: auto 2.6rem minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.45rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.7rem;
  background: rgba(0, 0, 0, 0.16);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.shop-customization__swatch::first-letter {
  color: var(--color-text);
}
.shop-customization__swatch input[type="color"] {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 0.55rem;
  background: transparent;
  cursor: pointer;
}
.shop-customization__hex {
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shop-custom.shop-custom--embedded {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
  max-width: none;
}
.shop-customization__card .shop-custom--embedded > label {
  display: grid;
  gap: 0.4rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.shop-customization__card .shop-custom--embedded input,
.shop-customization__card .shop-custom--embedded textarea {
  width: 100%;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.17);
}
.shop-customization__requests {
  margin: var(--space-2) 0 0;
}
.shop-customization__status {
  position: relative;
  margin: 0;
  padding: 0.7rem 0.8rem 0.7rem 1rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.035);
}
.shop-customization__status::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--color-text-muted);
}
.shop-customization__status--pending::before { background: #f5c542; }
.shop-customization__status--needs_change::before { background: #fb923c; }
.shop-customization__status--approved::before { background: var(--color-accent); }
.shop-customization__status--rejected::before { background: #f87171; }
.shop-customization__status p {
  line-height: 1.45;
}
.shop-customization__status p {
  margin: 0 0 var(--space-1);
}
.shop-customization__status p:last-child {
  margin-bottom: 0;
}
.shop-customization__dropzone {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
}
.shop-customization__dropzone-title {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}
.shop-customization__limits {
  list-style: none;
  margin: 0.15rem 0 0.35rem;
  padding: 0.55rem 0.65rem;
  display: grid;
  gap: 0.35rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.18);
}
.shop-customization__limits li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.72rem;
  line-height: 1.35;
}
.shop-customization__limits span {
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
}
.shop-customization__limits strong {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
  text-align: right;
}
.shop-customization__dropzone.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}
.shop-customization__dropzone input[type="file"] {
  max-width: 100%;
}
.shop-customization__thumb {
  display: block;
  max-width: min(100%, 320px);
  max-height: 160px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  margin-top: var(--space-2);
  background: rgba(0, 0, 0, 0.2);
}
@media (max-width: 800px) {
  .shop-customization__intro {
    grid-template-columns: 1fr;
  }
  .shop-customization__intro-metrics {
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 0;
  }
  .shop-customization__intro-metrics div {
    padding-left: var(--space-3);
  }
  .shop-customization__intro-metrics div:first-child {
    padding-left: 0;
  }
  .shop-customization__review-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px) {
  .shop-customization {
    gap: var(--space-6);
  }
  .shop-customization__intro {
    padding: 1rem;
    border-radius: 1rem;
  }
  .shop-customization__intro-title {
    display: grid;
  }
  .shop-customization__access {
    justify-self: start;
  }
  .shop-customization__intro-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .shop-customization__intro-metrics div:last-child {
    grid-column: 1 / -1;
    padding-top: var(--space-3);
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 0;
  }
  .shop-customization__swatch-row {
    grid-template-columns: 1fr;
  }
  .shop-customization__card-foot {
    align-items: stretch;
  }
  .shop-customization__card-foot > * {
    width: 100%;
  }
  .shop-customization__card-foot .btn {
    justify-content: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .shop-customization__card {
    transition: none;
  }
  .shop-customization__card:hover {
    transform: none;
  }
}
.shop-customization__rows {
  display: grid;
  gap: 0.55rem;
}
.shop-customization__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-float-sm);
}
.shop-customization__visual {
  width: 3.5rem;
  flex-shrink: 0;
}
.shop-customization__body {
  flex: 1;
  min-width: 8rem;
}
.activity-reward {
  min-width: 14rem;
  padding: 0.55rem 0.8rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.activity-reward__top { display: flex; justify-content: space-between; gap: 0.5rem; align-items: center; }
.badge-origin { font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.badge-origin--SHOP { color: var(--color-accent); }
.member-card__avatar { margin: 0.35rem 0 0.5rem; }
.member-card__avatar .irg-frame { transform: scale(0.92); transform-origin: left center; }
#member-identity { display: grid; gap: 0.4rem; }

.player-suggests {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.35rem;
}
.player-suggest {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  text-align: left;
  padding: 0.4rem 0.55rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: inherit;
  cursor: pointer;
}
.player-suggest img { border-radius: 50%; }
.player-suggest:hover { border-color: rgba(182, 255, 42, 0.4); }
.player-picked { margin: 0.35rem 0 0; }

/* ── Ticket system (compact list + heavy nav) ── */
.ticket-app,
.ticket-admin,
.ticket-detail-page,
.ticket-create-page {
  display: grid;
  gap: 0.85rem;
}

.ticket-app--profile {
  margin-top: 0;
}

.ticket-nav {
  display: grid;
  gap: 0.75rem;
  padding: 0.75rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.02);
}
.ticket-nav__top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: stretch;
}
.ticket-nav__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
  flex: 1;
}
.ticket-nav__tab {
  display: grid;
  gap: 0.1rem;
  justify-items: start;
  padding: 0.55rem 0.8rem;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  font: inherit;
  text-align: left;
  box-shadow: var(--shadow-float-xs);
  transition: box-shadow var(--ease), background var(--ease), color var(--ease);
}
.ticket-nav__tab:hover {
  color: var(--color-text);
  background: var(--color-surface-hover);
  box-shadow: var(--shadow-float-sm);
}
.ticket-nav__tab.is-active {
  color: var(--color-text);
  background: rgba(182, 255, 42, 0.08);
  box-shadow: var(--shadow-float-sm), inset 0 0 0 1px rgba(182, 255, 42, 0.4);
}
.ticket-nav__tab-label {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ticket-nav__tab-hint {
  font-size: 0.68rem;
  color: var(--color-text-subtle);
}
.ticket-nav__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.ticket-nav__search {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: end;
}
.ticket-nav__search-field {
  display: grid;
  gap: 0.3rem;
  min-width: 12rem;
}
.ticket-nav__search-field--grow {
  flex: 1;
  min-width: 16rem;
}
.ticket-nav__search-label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.ticket-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.ticket-subnav__sep { opacity: 0.45; margin: 0 0.15rem; }
.ticket-subnav__link {
  color: var(--color-text-muted);
  text-decoration: none;
}
.ticket-subnav__link:hover { color: var(--color-accent); }
.ticket-subnav__current { color: var(--color-text); font-weight: 600; }

.ticket-input,
.ticket-select,
.ticket-textarea {
  width: 100%;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.35);
  color: var(--color-text);
  font: inherit;
  padding: 0.55rem 0.7rem;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ticket-input:focus,
.ticket-select:focus,
.ticket-textarea:focus {
  border-color: rgba(182, 255, 42, 0.45);
  background: rgba(0, 0, 0, 0.45);
}
.ticket-select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 2px),
    calc(100% - 11px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}
.ticket-textarea { resize: vertical; min-height: 6rem; }

.ticket-app__meta,
.ticket-admin__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: center;
}
.ticket-app__counts {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.ticket-app__empty {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
  padding: 1.25rem 0;
}
.support-guest {
  width: min(100%, 44rem);
  margin-inline: auto;
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.025);
}
.support-guest h2,
.support-guest p {
  margin: 0;
}
.support-guest p {
  max-width: 62ch;
  color: var(--color-text-muted);
}
.support-guest__auth {
  margin-top: 0.25rem;
}

.ticket-list-shell {
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.015);
}
.ticket-list-head {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  gap: 0.75rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}
.ticket-table {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ticket-table--compact .ticket-row {
  border-radius: 0;
  border: 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  background: transparent;
  padding: 0.65rem 0.85rem;
}
.ticket-table--compact .ticket-row:last-child {
  border-bottom: 0;
}
.ticket-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  gap: 0.75rem;
  align-items: center;
  width: 100%;
  text-align: left;
  color: inherit;
  text-decoration: none;
  transition: background 0.12s ease;
}
.ticket-row:hover,
.ticket-row.is-active {
  background: rgba(182, 255, 42, 0.05);
}
.ticket-row--button {
  cursor: pointer;
  font: inherit;
}
.ticket-row__id {
  font-size: 0.72rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--color-text-subtle);
}
.ticket-row__main {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}
.ticket-row__title {
  font-size: var(--text-sm);
  font-weight: 650;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ticket-row__meta {
  margin: 0;
  font-size: 0.72rem;
  color: var(--color-text-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ticket-row__archived { color: var(--color-text-muted); }
.ticket-row__aside {
  display: grid;
  gap: 0.25rem;
  justify-items: end;
}
.ticket-row__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: flex-end;
}
.ticket-row__time {
  font-size: 0.68rem;
  color: var(--color-text-subtle);
}

.ticket-row__closer {
  max-width: 15rem;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 0.68rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-status,
.ticket-priority,
.ticket-chip {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-full);
  border: none;
  box-shadow: var(--shadow-float-sm);
  line-height: 1.2;
}

.ticket-priority--irg-plus {
  color: #07111f;
  background: #62c7ff;
  border-color: #62c7ff;
  font-weight: 800;
}
.ticket-status--open {
  color: var(--color-accent);
  box-shadow: var(--shadow-float-xs), inset 0 0 0 1px rgba(182, 255, 42, 0.45);
}
.ticket-status--in_progress {
  color: #f5c542;
  box-shadow: var(--shadow-float-xs), inset 0 0 0 1px rgba(245, 197, 66, 0.45);
}
.ticket-status--closed { color: var(--color-text-muted); }
.ticket-priority--low { color: var(--color-text-muted); }
.ticket-priority--medium {
  color: #93c5fd;
  box-shadow: var(--shadow-float-xs), inset 0 0 0 1px rgba(147, 197, 253, 0.4);
}
.ticket-priority--high {
  color: #fb923c;
  box-shadow: var(--shadow-float-xs), inset 0 0 0 1px rgba(251, 146, 60, 0.45);
}
.ticket-priority--urgent {
  color: #f87171;
  box-shadow: var(--shadow-float-xs), inset 0 0 0 1px rgba(248, 113, 113, 0.5);
}
.ticket-chip {
  color: var(--color-text-muted);
  box-shadow: var(--shadow-float-xs), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.ticket-pager {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.35rem;
}
.ticket-pager__meta {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.ticket-pager__total { color: var(--color-text-subtle); }

.ticket-detail {
  display: grid;
  gap: 0.85rem;
  padding: 1rem 1.05rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.02);
}
.ticket-detail__head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
}
.ticket-detail__titles { display: grid; gap: 0.25rem; min-width: 0; }
.ticket-detail__eyebrow {
  display: flex;
  gap: 0.45rem;
  align-items: center;
}
.ticket-detail__id {
  font-size: 0.72rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--color-text-subtle);
}
.ticket-detail__title { margin: 0; font-size: var(--text-lg); }
.ticket-detail__meta,
.ticket-detail__times {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.ticket-detail__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}
.ticket-detail-page__toolbar,
.ticket-detail-page__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}

.ticket-section { display: grid; gap: 0.65rem; }
.ticket-section__bar {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: baseline;
}
.ticket-section__label {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.ticket-section__count {
  font-size: 0.72rem;
  color: var(--color-text-subtle);
}

.ticket-thread {
  display: grid;
  gap: 0.65rem;
}
.ticket-bubble {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.65rem;
  align-items: start;
}
.ticket-bubble__avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  border: none;
  box-shadow: var(--shadow-float-sm);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-muted);
}
.ticket-bubble--staff .ticket-bubble__avatar {
  border-color: rgba(124, 58, 237, 0.45);
  background: rgba(124, 58, 237, 0.18);
  color: #ddd6fe;
}
.ticket-bubble--user .ticket-bubble__avatar {
  border-color: rgba(182, 255, 42, 0.35);
  background: rgba(182, 255, 42, 0.12);
  color: var(--color-accent);
}
.ticket-bubble__body {
  padding: 0.65rem 0.8rem;
  border-radius: 0.85rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  background: rgba(255, 255, 255, 0.03);
}
.ticket-bubble--staff .ticket-bubble__body {
  border-color: rgba(124, 58, 237, 0.28);
  background: rgba(124, 58, 237, 0.08);
  border-top-left-radius: 0.25rem;
}
.ticket-bubble--user .ticket-bubble__body {
  border-color: rgba(182, 255, 42, 0.18);
  background: rgba(182, 255, 42, 0.05);
  border-top-left-radius: 0.25rem;
}
.ticket-bubble__meta {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}
.ticket-bubble__author { font-weight: 600; color: var(--color-text-muted); }
.ticket-bubble p {
  margin: 0.35rem 0 0;
  font-size: var(--text-sm);
  line-height: 1.45;
  white-space: pre-wrap;
}

.ticket-attachments {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.ticket-attachment--image img {
  display: block;
  max-width: min(100%, 28rem);
  max-height: 18rem;
  border-radius: 0.5rem;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.25);
}
.ticket-attachment--video {
  display: block;
  max-width: min(100%, 28rem);
  max-height: 18rem;
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.35);
}
.ticket-attachment--file {
  font-size: var(--text-sm);
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.ticket-chip--discord {
  border-color: rgba(88, 101, 242, 0.45);
  background: rgba(88, 101, 242, 0.15);
  color: #c7d0ff;
}

.ticket-reply,
.ticket-staff-form {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.25rem;
  padding-top: 0.75rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.ticket-reply--detail { grid-template-columns: 1fr; }
.ticket-staff-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.ticket-staff-form__actions {
  display: flex;
  justify-content: flex-end;
}
.ticket-staff-form label,
.ticket-reply label,
.ticket-create label {
  display: grid;
  gap: 0.35rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.ticket-create {
  max-width: 72rem;
  width: 100%;
  margin-inline: auto;
  display: grid;
  gap: 0.85rem;
}
.ticket-create-page {
  max-width: 72rem;
  width: 100%;
  margin-inline: auto;
}
.ticket-detail-page {
  max-width: 52rem;
}
.container--wide { max-width: 72rem; }

.ticket-admin__title { margin: 0; }
.ticket-admin-detail { display: grid; gap: 0.75rem; }
.ticket-admin__hint { font-size: var(--text-sm); }

.admin-filter {
  display: grid;
  gap: 0.35rem;
  max-width: 14rem;
  margin: 0.75rem 0 1rem;
}

@media (max-width: 900px) {
  .lb-podium {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .lb-podium__card--silver,
  .lb-podium__card--gold,
  .lb-podium__card--bronze {
    grid-column: auto;
  }

  .lb-podium__card--gold {
    order: -1;
  }
}

@media (max-width: 720px) {
  .ticket-list-head { display: none; }
  .ticket-row {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  .ticket-row__aside,
  .ticket-row__badges {
    justify-items: start;
    justify-content: flex-start;
  }
  .ticket-nav__tab-hint { display: none; }
  .ticket-staff-form__row { grid-template-columns: 1fr; }
  .ticket-bubble { grid-template-columns: 1.75rem 1fr; }
  .ticket-nav__search-field,
  .ticket-nav__search-field--grow {
    min-width: 0;
    flex: 1 1 100%;
  }
}

/* ── Page editor (Craft.js) ── */
.craft-selected {
  outline: 2px solid var(--color-accent, #5b8def);
  outline-offset: 2px;
}
.page-editor {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem 1rem 2rem;
}
.page-editor__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-bg, #0f1115);
  padding: 0.75rem 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}
.page-editor__toolbar-left,
.page-editor__toolbar-right {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.page-editor__workspace {
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr) minmax(12rem, 16rem);
  gap: 0.75rem;
  align-items: start;
}
@media (max-width: 960px) {
  .page-editor__workspace { grid-template-columns: 1fr; }
}
.page-editor__panel {
  border: none;
  box-shadow: var(--shadow-float-xs);
  border-radius: 8px;
  padding: 0.75rem;
  background: rgba(0,0,0,0.2);
}
.page-editor__group { margin-top: 0.75rem; }
.page-editor__palette {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.page-editor__chip {
  font-size: 0.8rem;
  padding: 0.35rem 0.55rem;
  cursor: grab;
}
.page-editor__canvas {
  min-height: 60vh;
  border: 1px dashed rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 0.5rem;
  background: rgba(0,0,0,0.15);
}
.page-editor__fields { display: grid; gap: 0.65rem; }
.page-editor__field { display: grid; gap: 0.25rem; }
.page-editor__field .input {
  width: 100%;
  padding: 0.4rem 0.5rem;
}
.page-editor__status,
.page-editor__flash,
.page-editor__error {
  width: 100%;
  margin: 0;
  font-size: 0.9rem;
}
.page-editor__flash { color: var(--color-success, #6dca8a); }
.page-editor__error { color: var(--color-danger, #e57373); }
.page-editor__list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  display: grid;
  gap: 0.5rem;
}
.page-editor__list a {
  display: grid;
  gap: 0.15rem;
  padding: 0.75rem 1rem;
  border: none;
  box-shadow: var(--shadow-float-xs);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
}
.page-editor__list a:hover {
  border-color: rgba(255,255,255,0.2);
}

/* Advanced page editor */
.editor-bare-root {
  min-height: 100vh;
  height: 100vh;
  background: #0b0d11;
  overflow: hidden;
}
.page-editor--pro {
  min-height: 100vh;
  height: 100%;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #0b0d11;
  color: var(--color-text, #e8eaed);
  overflow: hidden;
  padding: 0;
  gap: 0;
}
.page-editor__topbar {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1rem;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1);
  background: #12151c;
  position: sticky;
  top: 0;
  z-index: 40;
  overflow-x: auto;
}
.page-editor__topbar-left,
.page-editor__topbar-primary,
.page-editor__topbar-right {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  align-items: center;
  flex-shrink: 0;
}
.page-editor__topbar-primary {
  margin-left: auto;
}
.page-editor__topbar-right {
  margin-left: 0;
}
.page-editor__title { font-size: 1rem; }
.page-editor__badge {
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: none;
  box-shadow: var(--shadow-float-sm);
  color: var(--color-text-muted, #9aa0a6);
}
.page-editor__badge.is-live {
  border-color: rgba(109, 202, 138, 0.5);
  color: #6dca8a;
}
.page-editor__badge.is-unsaved {
  border-color: rgba(240, 180, 80, 0.55);
  color: #f0b450;
}
.page-editor__publish {
  background: #3d6df2 !important;
  border-color: #3d6df2 !important;
  color: #fff !important;
  font-weight: 600;
}
.page-editor__devices {
  display: inline-flex;
  border: none;
  box-shadow: var(--shadow-float-xs);
  border-radius: 8px;
  overflow: hidden;
}
.page-editor__devices button {
  background: transparent;
  border: 0;
  color: inherit;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  text-transform: capitalize;
}
.page-editor__devices button.is-active { background: rgba(61,109,242,0.35); }
.page-editor__meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  padding: 0.35rem 1rem;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  font-size: 0.85rem;
}
.page-editor__body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr) minmax(15rem, 19rem);
  min-height: 0;
}
@media (max-width: 1100px) {
  .page-editor__body { grid-template-columns: 1fr; }
}
.page-editor__left,
.page-editor__right {
  border-right: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  max-height: calc(100vh - 6rem);
  background: #0f1218;
  display: flex;
  flex-direction: column;
  position: relative;
}
.page-editor__right { border-right: 0; border-left: 1px solid rgba(255,255,255,0.08); }
.page-editor__rail-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.page-editor__left-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr));
  gap: 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}
.page-editor__left-tabs button,
.page-editor__tabs button {
  background: transparent;
  border: 0;
  color: var(--color-text-muted, #9aa0a6);
  padding: 0.55rem 0.25rem;
  cursor: pointer;
  text-transform: capitalize;
  font-size: 0.78rem;
}
.page-editor__left-tabs button.is-active,
.page-editor__tabs button.is-active {
  color: #fff;
  box-shadow: inset 0 -2px 0 #3d6df2;
}
.page-editor__center {
  overflow: auto;
  padding: 0.5rem;
  max-height: calc(100vh - 6rem);
}
.page-editor__canvas-frame {
  margin: 0 auto;
  border: none;
  box-shadow: var(--shadow-float-xs);
  border-radius: 10px;
  background: #0b0d11;
  min-height: 70vh;
  /* overflow controlled below (.is-editing needs visible handles) */
  overflow: hidden;
}
.page-editor__crumbs { margin: 0 0 0.5rem; font-size: 0.85rem; }
.page-editor__crumb {
  background: none;
  border: 0;
  color: #9ec1ff;
  cursor: pointer;
  padding: 0;
}
.page-editor__layer {
  display: flex;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: inherit;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  border-radius: 4px;
}
.page-editor__layer.is-active,
.page-editor__layer:hover { background: rgba(255,255,255,0.06); }
.page-editor__tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}
.page-editor__inspector-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 1rem;
}
.page-editor__image-field { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem; }
.page-editor__search { margin: 0.5rem 0.75rem; width: calc(100% - 1.5rem); }
.page-editor__pages-rail,
.page-editor__revisions {
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  display: grid;
  gap: 0.35rem;
}
.page-editor__pages-rail a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45rem 0.55rem;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
}
.page-editor__pages-rail a.is-active,
.page-editor__pages-rail a:hover { background: rgba(255,255,255,0.06); }
.page-editor__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #555;
}
.page-editor__dot.is-live { background: #6dca8a; }
.page-editor__revisions li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem;
  border: none;
  box-shadow: var(--shadow-float-xs);
  border-radius: 6px;
}
.page-editor__modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: grid;
  place-items: center;
  z-index: 100;
  padding: 1rem;
}
.page-editor__modal-card {
  background: #151922;
  border: none;
  box-shadow: var(--shadow-float-xs);
  border-radius: 12px;
  padding: 1.25rem;
  width: min(420px, 100%);
}
.page-editor__modal-card--wide { width: min(960px, 100%); max-height: 90vh; overflow: auto; }
.page-editor__modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
.page-editor--index .page-editor__index-body { padding: 1.5rem; max-width: 52rem; }
.file-manager { padding: 0.5rem; }
.file-manager__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.file-manager__nav { display: flex; flex-wrap: wrap; gap: 0.15rem; margin-bottom: 0.5rem; }
.file-manager__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}
.file-manager__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 0.5rem;
}
.file-manager__item {
  display: grid;
  gap: 0.25rem;
  padding: 0.45rem;
  border: none;
  box-shadow: var(--shadow-float-xs);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.file-manager__item.is-selected { border-color: #3d6df2; }
.file-manager__thumb {
  width: 100%;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
  background: #000;
}
.file-manager__icon { font-size: 1.5rem; }
.file-manager__name {
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-manager__footer {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  display: grid;
  gap: 0.5rem;
}
.file-manager__footer-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* �� Editor audit fixes �� */
.page-editor--preview .page-editor__body {
  grid-template-columns: 1fr;
}
.page-editor--left-collapsed:not(.page-editor--preview):not(.page-editor--right-collapsed) .page-editor__body {
  grid-template-columns: 1.25rem minmax(0, 1fr) minmax(15rem, 19rem);
}
.page-editor--right-collapsed:not(.page-editor--preview):not(.page-editor--left-collapsed) .page-editor__body {
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr) 1.25rem;
}
.page-editor--left-collapsed.page-editor--right-collapsed:not(.page-editor--preview) .page-editor__body {
  grid-template-columns: 1.25rem minmax(0, 1fr) 1.25rem;
}
.page-editor__left.is-collapsed,
.page-editor__right.is-collapsed {
  overflow: visible;
  min-width: 1.25rem;
  width: 1.25rem;
  padding: 0;
  border: 0;
}
.page-editor__rail-toggle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 12;
  width: 1.75rem;
  min-width: 28px;
  height: 2.75rem;
  min-height: 28px;
  padding: 0;
  border: none;
  box-shadow: var(--shadow-float-xs);
  background: #1a1f2a;
  color: #c5cad3;
  cursor: pointer;
  border-radius: 4px;
  line-height: 1;
  flex-shrink: 0;
}
.page-editor__rail-toggle--left { right: -0.85rem; }
.page-editor__rail-toggle--right { left: -0.85rem; }
.page-editor__left.is-collapsed .page-editor__rail-toggle--left {
  right: auto;
  left: 0;
}
.page-editor__right.is-collapsed .page-editor__rail-toggle--right {
  left: 0;
}
.page-editor__canvas-stage {
  min-height: 70vh;
  padding: 0.75rem;
  border-radius: 12px;
  background: rgba(18, 21, 28, 0.55);
  display: flex;
  justify-content: center;
}
.page-editor__canvas-frame {
  position: relative;
  min-height: 70vh;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}
.page-editor__canvas-frame.is-editing {
  overflow: visible;
}
.page-editor__canvas-frame.is-editing a,
.page-editor__canvas-frame.is-editing button,
.page-editor__canvas-frame.is-editing input,
.page-editor__canvas-frame.is-editing select,
.page-editor__canvas-frame.is-editing textarea,
.page-editor__canvas-frame.is-editing [role='button'],
.page-editor__canvas-frame.is-editing [data-discord-invite] {
  pointer-events: none !important;
}
.page-editor__canvas-frame.is-editing [data-craft-node-id] {
  pointer-events: auto;
  min-height: 1.25rem;
}
.page-editor__canvas-frame.is-editing .page-editor__resize-handle,
.page-editor__canvas-frame.is-editing .page-editor__resize-layer,
.page-editor__canvas-frame.is-editing .page-editor__resize-box {
  pointer-events: none;
}
.page-editor__canvas-frame.is-editing .page-editor__resize-handle {
  pointer-events: auto !important;
}
.page-editor__canvas-frame.is-editing .craft-selected {
  outline: none;
  box-shadow: none;
}
.page-editor__canvas-frame.is-editing [data-craft-node-id][style*="display: none"],
.page-editor__canvas-frame.is-editing [data-craft-node-id][style*="display:none"] {
  display: block !important;
  opacity: 0.35 !important;
  outline: 1px dashed rgba(255, 255, 255, 0.28);
  pointer-events: none !important;
}
.page-editor__resize-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
}
.page-editor__resize-box {
  position: absolute;
  border: 1.5px solid rgba(61, 109, 242, 0.95);
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35);
}
.page-editor__resize-handle {
  pointer-events: auto !important;
  position: absolute;
  border: 0;
  background: #3d6df2;
  padding: 0;
  z-index: 41;
  box-sizing: border-box;
}
/* Full-edge hit targets so hovering the blue border works */
.page-editor__resize-handle--n,
.page-editor__resize-handle--s {
  left: 12px;
  right: 12px;
  width: auto;
  height: 12px;
  transform: none;
  border-radius: 2px;
  cursor: ns-resize;
  background: transparent;
}
.page-editor__resize-handle--n::after,
.page-editor__resize-handle--s::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 4px;
  transform: translate(-50%, -50%);
  background: #3d6df2;
  border-radius: 2px;
}
.page-editor__resize-handle--e,
.page-editor__resize-handle--w {
  top: 12px;
  bottom: 12px;
  height: auto;
  width: 12px;
  transform: none;
  border-radius: 2px;
  cursor: ew-resize;
  background: transparent;
}
.page-editor__resize-handle--e::after,
.page-editor__resize-handle--w::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 36px;
  transform: translate(-50%, -50%);
  background: #3d6df2;
  border-radius: 2px;
}
.page-editor__resize-handle--n { top: -6px; }
.page-editor__resize-handle--s { bottom: -6px; }
.page-editor__resize-handle--e { right: -6px; }
.page-editor__resize-handle--w { left: -6px; }
.page-editor__resize-handle--ne,
.page-editor__resize-handle--nw,
.page-editor__resize-handle--se,
.page-editor__resize-handle--sw {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  background: #3d6df2;
  border: 2px solid #0b0d11;
}
.page-editor__resize-handle--ne { top: -7px; right: -7px; cursor: nesw-resize; }
.page-editor__resize-handle--nw { top: -7px; left: -7px; cursor: nwse-resize; }
.page-editor__resize-handle--se { bottom: -7px; right: -7px; cursor: nwse-resize; }
.page-editor__resize-handle--sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.page-editor__layer {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
}
.page-editor__layer-select {
  flex: 1;
  text-align: left;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 0.35rem 0.25rem;
}
.page-editor__layer-hide {
  font-size: 0.7rem;
  padding: 0.15rem 0.35rem;
}
.page-editor__template-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.page-editor__template-row a {
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.page-editor__template-row a:hover {
  text-decoration: underline;
}

/* Grid section editor */
.irg-grid-section {
  display: grid;
  position: relative;
  width: 100%;
  min-height: 10rem;
  box-sizing: border-box;
  border: 1px dashed rgba(61, 109, 242, 0.35);
  border-radius: 8px;
}
.irg-grid-section.is-empty {
  background: rgba(61, 109, 242, 0.06);
}
.irg-grid-section.is-editing {
  background-image:
    linear-gradient(to right, rgba(61, 109, 242, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(61, 109, 242, 0.12) 1px, transparent 1px);
  background-size: calc(100% / var(--irg-grid-cols, 12)) var(--irg-grid-row, 48px);
}
.irg-grid-section__handle {
  grid-column: 1 / -1;
  justify-self: stretch;
  align-self: start;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: #9ec1ff;
  background: rgba(26, 31, 42, 0.92);
  border: none;
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  cursor: grab;
  user-select: none;
  margin-bottom: 0.35rem;
  z-index: 2;
  box-shadow: var(--shadow-float-xs), inset 0 0 0 1px rgba(61, 109, 242, 0.45);
}
.irg-grid-section__handle:active {
  cursor: grabbing;
}
.irg-grid-section__placeholder {
  grid-column: 1 / -1;
  pointer-events: none;
  min-height: 6rem;
  display: grid;
  place-items: center;
  color: #8b93a7;
  font-size: 0.9rem;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  padding: 1rem;
}
.irg-grid-section__snap-ghost {
  pointer-events: none;
  position: absolute;
  background: rgba(61, 109, 242, 0.28);
  border: none;
  border-radius: 4px;
  z-index: 1;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 1px rgba(61, 109, 242, 0.85);
}
.irg-grid-pad {
  margin: 0.5rem 0.75rem 0.75rem;
  padding: 0.65rem;
  border: none;
  box-shadow: var(--shadow-float-xs);
  border-radius: 8px;
  background: #12151c;
}
.irg-grid-pad__label {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
}
.irg-grid-pad__hint {
  margin: 0.4rem 0;
  font-size: 0.75rem;
}
.irg-grid-pad__keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem;
  max-width: 9rem;
}
.irg-grid-pad__keys--span {
  grid-template-columns: 1fr 1fr;
  max-width: none;
  margin-top: 0.35rem;
}
.irg-grid-pad__keys .btn {
  min-height: 2rem;
  padding: 0.25rem;
}
.irg-grid-section > [data-craft-node-id] {
  min-width: 0;
  min-height: 1.5rem;
}
@media (max-width: 720px) {
  .irg-grid-section.stack-mobile {
    display: flex;
    flex-direction: column;
  }
  .irg-grid-section.stack-mobile > * {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

/* Site theme tokens (fallbacks; overridden by ThemeProvider) */
:root {
  --irg-color-bg: var(--color-bg, #101014);
  --irg-color-surface: var(--color-surface, #18181b);
  --irg-color-text: var(--color-text, #fafafa);
  --irg-color-muted: var(--color-text-muted, #a1a1aa);
  --irg-color-accent: var(--color-accent, #b6ff2a);
  --irg-color-accent-hover: var(--color-accent-deep, #6ea810);
  --irg-btn-radius: 8px;
  --irg-btn-padding-y: 0.55rem;
  --irg-btn-padding-x: 1rem;
  --irg-btn-primary-bg: var(--color-accent, #b6ff2a);
  --irg-btn-primary-text: #111111;
}

/* GrapesJS editor shell */
.page-editor--gjs .page-editor__devices button.is-active,
.page-editor--gjs .page-editor__left-tabs button.is-active,
.page-editor--gjs .page-editor__tabs button.is-active {
  box-shadow: inset 0 -2px 0 var(--color-accent, #b6ff2a);
}
.page-editor--gjs .page-editor__devices button.is-active {
  background: rgba(182, 255, 42, 0.2);
}
.page-editor__body--gjs {
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr) minmax(15rem, 19rem);
  min-height: 0;
  flex: 1;
  height: auto;
  overflow: hidden;
}
.page-editor--left-collapsed:not(.page-editor--preview):not(.page-editor--right-collapsed) .page-editor__body--gjs {
  grid-template-columns: 1.25rem minmax(0, 1fr) minmax(15rem, 19rem);
}
.page-editor--right-collapsed:not(.page-editor--preview):not(.page-editor--left-collapsed) .page-editor__body--gjs {
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr) 1.25rem;
}
.page-editor--left-collapsed.page-editor--right-collapsed:not(.page-editor--preview) .page-editor__body--gjs {
  grid-template-columns: 1.25rem minmax(0, 1fr) 1.25rem;
}
.page-editor__center--gjs {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  max-height: none;
  height: auto;
  position: relative;
  background: #09090b;
}
.page-editor__wysiwyg {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #09090b;
}
.page-editor__wysiwyg--canvas-only {
  overflow: hidden;
}
.page-editor__wysiwyg-canvas {
  flex: 1;
  min-height: 0;
  height: auto;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ── Floating surfaces (site-wide refinements) ── */
.table-wrap,
.admin-card,
.admin-section,
.match-card,
.lb-podium__card,
.lb-podium__stat,
.roster-panel,
.admin-game-card,
.ticket-list-shell,
.ticket-section,
.shop-detail,
.shop-custom,
.shop-preview,
.admin-slider,
.shop-float-nav,
.shop-list-row {
  box-shadow: var(--shadow-float);
}

.lb-search input,
.lb-season select,
.form input,
.form select,
.form textarea,
.admin-form input:not([type="checkbox"]):not([type="radio"]),
.admin-form select,
.admin-form textarea,
.admin-inline input:not([type="checkbox"]):not([type="radio"]),
.admin-inline select,
.account-form__field input,
.account-form__field select,
.shop-assets__main > input[type="search"],
.ticket-input,
.ticket-select,
.ticket-textarea,
.admin-cmd select,
.shop-admin-dd__btn,
.admin-shop-filters input,
.admin-shop-filters select {
  box-shadow: var(--shadow-input);
}

.lb-seg,
.lb-status,
.pill,
.admin-chip,
.discord-role,
.account-dropdown__level,
.account-trigger,
.header-status-chip {
  box-shadow: var(--shadow-float-xs);
}

.lb-seg button.is-active,
.lb-seg button[aria-pressed="true"] {
  box-shadow: var(--shadow-float-xs);
}

.queue-section,
.queue-card__footer,
.roster-row,
.profile-link-row,
.activity-list li,
.shop-card__visual {
  border: none;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}

.gjs-editor-host {
  flex: 1;
  min-height: 0;
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 1;
}
.gjs-editor-host > .gjs-editor,
.gjs-editor-host .gjs-editor {
  height: 100% !important;
  width: 100% !important;
  position: absolute !important;
  inset: 0 !important;
}
.page-editor--gjs .gjs-cv-canvas,
.page-editor--gjs .gjs-cv-canvas__frames,
.page-editor--gjs .gjs-frame-wrapper {
  height: 100% !important;
  min-height: 0;
}

/* Site CSS blows up Grapes SVG carets — pin them */
.page-editor--gjs .gjs-sm-sector-caret,
.page-editor--gjs .gjs-layer-caret,
.page-editor--gjs .gjs-caret-icon,
.page-editor--gjs .gjs-sm-sector-caret svg,
.page-editor--gjs .gjs-layer-caret svg,
.page-editor--gjs .gjs-caret-icon svg,
.page-editor--gjs .gjs-field-arrows,
.page-editor--gjs .gjs-field-arrow-u,
.page-editor--gjs .gjs-field-arrow-d {
  width: 14px !important;
  height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  min-width: 14px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}
.page-editor--gjs .gjs-field-arrow-u,
.page-editor--gjs .gjs-field-arrow-d {
  width: 0 !important;
  height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  border-left-width: 3px !important;
  border-right-width: 4px !important;
}
.page-editor--gjs .gjs-sm-sector .gjs-sm-title {
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem;
  min-height: 2rem;
  max-height: 2.5rem;
  overflow: hidden;
}
.page-editor--gjs .gjs-sm-sector-label {
  flex: 1;
  min-width: 0;
}
.page-editor--gjs #gjs-styles,
.page-editor--gjs #gjs-traits,
.page-editor--gjs #gjs-layers,
.page-editor--gjs #gjs-blocks,
.page-editor--gjs #gjs-selectors {
  max-width: 100%;
  overflow-x: hidden;
}
.page-editor--gjs .gjs-sm-properties {
  max-width: 100%;
}
.page-editor--gjs .gjs-field input,
.page-editor--gjs .gjs-field select {
  max-width: 100%;
}
.page-editor--gjs .gjs-one-bg { background-color: #0f1218; }
.page-editor--gjs .gjs-two-color { color: #e8eaed; }
.page-editor--gjs .gjs-three-bg { background-color: #151922; }
.page-editor--gjs .gjs-four-color,
.page-editor--gjs .gjs-four-color-h:hover {
  color: var(--color-accent, #b6ff2a);
}
.page-editor--gjs .gjs-pn-panel,
.page-editor--gjs .gjs-blocks-c,
.page-editor--gjs .gjs-block {
  background: transparent;
  color: inherit;
}
.page-editor--gjs .gjs-block {
  border: none;
  box-shadow: var(--shadow-float-xs);
  border-radius: 8px;
  min-height: 2.75rem;
}
.page-editor--gjs .gjs-block:hover {
  border-color: rgba(182, 255, 42, 0.45);
}
.page-editor--gjs .gjs-cv-canvas {
  background: #09090b;
  width: 100%;
  height: 100%;
  top: 0;
}
.page-editor--gjs .gjs-frame-wrapper {
  background: #09090b;
}
.page-editor--gjs .gjs-editor {
  height: 100%;
  background: #0b0d11 !important;
}
.page-editor--gjs .gjs-cv-canvas,
.page-editor--gjs .gjs-cv-canvas__frames,
.page-editor--gjs .gjs-frame-wrapper,
.page-editor--gjs .gjs-frames {
  background: #09090b !important;
}
.page-editor--gjs .gjs-frame {
  background: #09090b !important;
}
/* Grapes default chrome is light — force IRG dark shell */
.page-editor--gjs .gjs-one-bg,
.page-editor--gjs .gjs-two-color,
.page-editor--gjs .gjs-three-bg,
.page-editor--gjs .gjs-four-color,
.page-editor--gjs .gjs-pn-panel,
.page-editor--gjs .gjs-blocks-c,
.page-editor--gjs .gjs-block,
.page-editor--gjs .gjs-sm-sector,
.page-editor--gjs .gjs-trt-traits,
.page-editor--gjs .gjs-layer,
.page-editor--gjs .gjs-clm-tags,
.page-editor--gjs .gjs-sm-properties,
.page-editor--gjs .gjs-field,
.page-editor--gjs .gjs-field input,
.page-editor--gjs .gjs-field select,
.page-editor--gjs .gjs-select option,
.page-editor--gjs .gjs-sm-sector .gjs-sm-title,
.page-editor--gjs .gjs-category-title,
.page-editor--gjs .gjs-block-category .gjs-title {
  background-color: #0f1218 !important;
  color: #e8eaed !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.page-editor--gjs .gjs-four-color,
.page-editor--gjs .gjs-four-color-h:hover {
  color: var(--color-accent, #b6ff2a) !important;
}
.page-editor--gjs .gjs-block {
  border: none !important;
  box-shadow: var(--shadow-float-xs) !important;
  border-radius: 8px;
  min-height: 2.75rem;
  box-shadow: none !important;
}
.page-editor--gjs .gjs-block:hover {
  border-color: rgba(182, 255, 42, 0.45) !important;
}
.page-editor--gjs .gjs-mdl-dialog,
.page-editor--gjs .gjs-mdl-container {
  background: #151922 !important;
  color: #e8eaed !important;
  border: none;
  box-shadow: var(--shadow-float-xs);
}
.page-editor--gjs .gjs-am-assets {
  background: #0f1218 !important;
}
.page-editor__gjs-tools {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
  align-items: center;
}
.page-editor__gjs-tools .btn.is-active,
.page-editor--gjs .page-editor__devices button.is-active {
  background: rgba(182, 255, 42, 0.2);
  box-shadow: inset 0 -2px 0 var(--color-accent, #b6ff2a);
}
.gjs-editor-host .gjs-cv-canvas {
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.page-editor__live-view {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  background: #09090b;
  overflow: hidden;
}
.page-editor__live-view-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  box-shadow: inset 0 -1px 0 rgba(182, 255, 42, 0.3);
  background: #12151c;
}
.page-editor__live-view-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.page-editor__live-view .irg-grapes-page {
  min-height: 100%;
}
.irg-grapes-page .irg-island {
  min-height: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
}

.irg-draft-preview-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1rem;
  background: #12151c;
  box-shadow: inset 0 -1px 0 rgba(182, 255, 42, 0.35);
  color: #e8eaed;
  font-size: 0.9rem;
}
.irg-draft-preview-bar__actions {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

/* ── Grapes native shell (full-viewport editor) ── */
.gjs-shell {
  /* High-contrast dark chrome — tools must stay readable */
  --gjs-main-color: #1c2330;
  --gjs-primary-color: #252d3b;
  --gjs-secondary-color: #f3f4f6;
  --gjs-tertiary-color: #d4ff5a;
  --gjs-quaternary-color: #ffffff;
  --gjs-font-color: #f3f4f6;
  --gjs-font-color-active: #ffffff;
  --gjs-main-dark-color: #0f131a;
  --gjs-secondary-dark-color: #161b24;
  --gjs-main-light-color: rgba(255, 255, 255, 0.14);
  --gjs-secondary-light-color: #e5e7eb;
  --gjs-soft-light-color: rgba(255, 255, 255, 0.06);
  --gjs-color-blue: #6b9aff;
  --gjs-color-highlight: #d4ff5a;
  --gjs-color-green: #7ddea0;
  --gjs-arrow-color: #d1d5db;
  --gjs-light-border: rgba(255, 255, 255, 0.18);
  --gjs-left-width: 280px;
  --gjs-canvas-top: 44px;
  --gjs-font-size: 0.8125rem;
  height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #0b0d11;
  color: #f3f4f6;
  overflow: hidden;
}
.gjs-shell__bar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.75rem;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.16);
  background: #171c26;
  z-index: 20;
  color: #f3f4f6;
}
.gjs-shell__bar .btn,
.gjs-shell__bar .btn-ghost,
.gjs-shell__bar a.btn {
  color: #f3f4f6 !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: #252d3b !important;
}
.gjs-shell__bar .btn:hover,
.gjs-shell__bar .btn-ghost:hover,
.gjs-shell__bar a.btn:hover {
  background: #323b4d !important;
  border-color: rgba(212, 255, 90, 0.45) !important;
  color: #fff !important;
}
.gjs-shell__bar .page-editor__publish {
  background: #3d6df2 !important;
  border-color: #5b8def !important;
  color: #fff !important;
}
.gjs-shell__bar .page-editor__devices {
  border-color: rgba(255, 255, 255, 0.28);
  background: #1c2330;
}
.gjs-shell__bar .page-editor__devices button {
  color: #e5e7eb !important;
  background: transparent;
}
.gjs-shell__bar .page-editor__devices button.is-active {
  background: rgba(107, 154, 255, 0.35) !important;
  color: #fff !important;
}
.gjs-shell__bar .muted,
.gjs-shell__meta {
  color: #c5cad3 !important;
}
.gjs-shell__bar-left,
.gjs-shell__bar-center,
.gjs-shell__bar-right {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.gjs-shell__title { font-size: 0.95rem; color: #fff; }
.gjs-shell__meta { font-size: 0.8rem; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gjs-shell__main {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  background: #09090b;
}
.gjs-shell__mount {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.gjs-shell__mount.gjs-editor,
.gjs-shell__mount > .gjs-editor {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
}

/* Grapes panels / fields — force readable contrast */
.gjs-shell .gjs-one-bg { background-color: #252d3b !important; }
.gjs-shell .gjs-two-color,
.gjs-shell .gjs-four-color,
.gjs-shell .gjs-pn-btn,
.gjs-shell .gjs-title,
.gjs-shell .gjs-label,
.gjs-shell .gjs-category-title,
.gjs-shell .gjs-sm-sector .gjs-sm-title,
.gjs-shell .gjs-sm-label,
.gjs-shell .gjs-layer-name,
.gjs-shell .gjs-trt-trait__label,
.gjs-shell .gjs-clm-tag,
.gjs-shell .gjs-block-label,
.gjs-shell .gjs-block-category .gjs-title {
  color: #f3f4f6 !important;
}
.gjs-shell .gjs-four-color-h:hover,
.gjs-shell .gjs-pn-btn:hover {
  color: #d4ff5a !important;
}
.gjs-shell .gjs-pn-panel,
.gjs-shell .gjs-pn-views,
.gjs-shell .gjs-pn-views-container,
.gjs-shell .gjs-pn-options,
.gjs-shell .gjs-pn-devices-c,
.gjs-shell .gjs-blocks-c,
.gjs-shell .gjs-sm-sectors,
.gjs-shell .gjs-sm-sector,
.gjs-shell .gjs-layers,
.gjs-shell .gjs-layer,
.gjs-shell .gjs-trt-traits,
.gjs-shell .gjs-clm-tags {
  background-color: #1c2330 !important;
  color: #f3f4f6 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}
.gjs-shell .gjs-block {
  background: #2a3344 !important;
  border: none !important;
  box-shadow: var(--shadow-float-sm) !important;
  color: #fff !important;
  box-shadow: none !important;
  border-radius: 8px;
  min-height: 2.75rem;
}
.gjs-shell .gjs-block:hover {
  border-color: rgba(212, 255, 90, 0.55) !important;
  background: #323c50 !important;
}
.gjs-shell .gjs-field,
.gjs-shell .gjs-field input,
.gjs-shell .gjs-field select,
.gjs-shell .gjs-field textarea,
.gjs-shell .gjs-select,
.gjs-shell .gjs-clm-field {
  background: #0f131a !important;
  color: #f9fafb !important;
  border: none !important;
  box-shadow: var(--shadow-float-sm) !important;
}
.gjs-shell .gjs-field input::placeholder {
  color: #9ca3af !important;
}
.gjs-shell .gjs-sm-properties,
.gjs-shell .gjs-trt-trait {
  color: #f3f4f6 !important;
}
.gjs-shell .gjs-cv-canvas {
  background: #12151c !important;
}
.gjs-shell .gjs-frame-wrapper {
  background: #09090b !important;
}

/* Site CSS leaves Grapes SVGs at intrinsic ~300px — pin every chrome icon */
.gjs-shell .gjs-toolbar,
.gjs-shell .gjs-toolbar-item {
  max-width: none;
  line-height: 1;
}
.gjs-shell .gjs-toolbar {
  background: #3d6df2 !important;
}
.gjs-shell .gjs-toolbar-item {
  width: 26px !important;
  height: 26px !important;
  padding: 4px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  color: #fff !important;
}
.gjs-shell .gjs-toolbar-item svg,
.gjs-shell .gjs-pn-btn svg,
.gjs-shell .gjs-pn-buttons svg,
.gjs-shell .gjs-block svg,
.gjs-shell .gjs-layer-caret svg,
.gjs-shell .gjs-sm-sector-caret svg,
.gjs-shell .gjs-caret-icon svg,
.gjs-shell .gjs-fields svg,
.gjs-shell .gjs-clm-tags svg,
.gjs-shell .gjs-trt-trait svg {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  display: block !important;
  fill: currentColor !important;
}
.gjs-shell .gjs-pn-btn {
  min-width: 30px;
  min-height: 30px;
  color: #f3f4f6 !important;
}
.gjs-shell .gjs-sm-sector-caret,
.gjs-shell .gjs-layer-caret,
.gjs-shell .gjs-caret-icon {
  width: 14px !important;
  height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  flex-shrink: 0 !important;
  color: #e5e7eb !important;
}
.gjs-shell img {
  max-width: 100%;
  height: auto;
}
.gjs-shell .gjs-toolbar img,
.gjs-shell .gjs-pn-btn img {
  max-width: 16px !important;
  max-height: 16px !important;
  width: 16px !important;
  height: 16px !important;
}

/* Grapes modals viewport-fixed — never force display:flex (locks grey overlay forever) */
.gjs-shell .gjs-mdl-container {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10050 !important;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65) !important;
  pointer-events: auto;
}
.gjs-shell .gjs-mdl-container:not(:has(.gjs-mdl-dialog)),
.gjs-shell .gjs-mdl-container:empty {
  display: none !important;
  pointer-events: none !important;
  background: transparent !important;
}
.gjs-shell .gjs-mdl-dialog {
  position: relative !important;
  max-width: min(920px, 94vw) !important;
  max-height: 86vh !important;
  overflow: auto !important;
  margin: auto !important;
  background: #151922 !important;
  color: #e8eaed !important;
  border: none;
  box-shadow: var(--shadow-float-xs);
  border-radius: 10px;
}
.gjs-shell__live {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  background: #09090b;
}
.gjs-shell__live-bar {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  box-shadow: inset 0 -1px 0 rgba(182, 255, 42, 0.3);
  background: #12151c;
}
.gjs-shell__live-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.gjs-shell__drawer {
  position: fixed;
  inset: 0;
  z-index: 10040;
  display: flex;
  justify-content: flex-end;
}
.gjs-shell__drawer-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0,0,0,0.45);
  cursor: pointer;
}
.gjs-shell__drawer-panel {
  position: relative;
  width: min(26rem, 92vw);
  height: 100%;
  background: #0f1218;
  border-left: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  z-index: 1;
}
.gjs-shell__drawer-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  text-transform: capitalize;
}
.gjs-shell__drawer-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0.75rem 1rem 1.5rem;
}
.gjs-shell__code { display: grid; gap: 0.5rem; }
.gjs-shell__code-area {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  min-height: 8rem;
}

.gjs-shell__panels-toggle {
  display: none;
}

@media (max-width: 1023px) {
  .gjs-shell__panels-toggle {
    display: inline-flex;
  }
}

/* Premium public motion + density */
.irg-icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}

.btn .irg-icon {
  margin-inline: 0;
}

@keyframes irg-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@keyframes irg-reveal {
  from {
    opacity: 0;
    transform: translateY(var(--motion-distance));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.reveal {
  opacity: 0;
  transform: translateY(var(--motion-distance));
  transition: opacity var(--ease-out), transform var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(var(--motion-distance));
  transition: opacity var(--ease-out), transform var(--ease-out);
}

.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: none;
}

.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: calc(var(--motion-stagger) * 1); }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: calc(var(--motion-stagger) * 2); }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: calc(var(--motion-stagger) * 3); }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: calc(var(--motion-stagger) * 4); }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: calc(var(--motion-stagger) * 5); }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: calc(var(--motion-stagger) * 6); }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: calc(var(--motion-stagger) * 7); }

.reveal-stagger.is-settled > * {
  transition-delay: 0ms !important;
}

.member-card,
.shop-card,
.achieve-card,
.queue-card,
.ongoing-games {
  transition: transform var(--ease-out), box-shadow var(--ease-out);
}

.member-card:hover,
.shop-card:hover,
.achieve-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-float-hover);
}

@media (max-width: 767px) {
  .container,
  .site-header__inner {
    width: min(100% - var(--space-6), var(--container));
    overflow-x: clip;
  }

  .site-header__inner {
    gap: 0.4rem;
  }

  .site-header__inner .header-actions.is-authed {
    display: flex;
    margin-left: auto;
    gap: 0.3rem;
  }

  .site-header__inner .header-actions.is-authed .header-status,
  .site-header__inner .header-actions.is-authed .notif-bell {
    display: none;
  }

  .site-header__inner .header-hud__stat {
    gap: 0.3rem;
    padding-inline: 0.45rem;
    font-size: var(--text-xs);
  }

  .site-header__inner .header-hud__label {
    font-size: 0.6rem;
  }

  .site-header__inner .account-trigger {
    gap: 0.25rem;
    padding-right: 0.35rem;
  }

  .site-header__inner .account-trigger__level {
    min-width: 2.9rem;
    padding-inline: 0.4rem;
  }

  .h2 {
    font-size: clamp(1.375rem, 4vw, var(--text-3xl));
  }

  .lede {
    font-size: clamp(1rem, 2.5vw, var(--text-lg));
  }

  .site-footer {
    padding: var(--space-8) var(--space-4) var(--space-6);
  }

  .discord-widget {
    width: 100%;
    height: auto;
    aspect-ratio: 7 / 10;
    max-height: min(500px, 70svh);
  }

  .announcement-card__body {
    overflow-wrap: anywhere;
  }

  .admin-kpis {
    grid-template-columns: 1fr;
  }

  .admin-kpis dt {
    font-size: 0.72rem;
  }

  .admin-section-layout,
  .shop-manage-modal {
    grid-template-columns: 1fr;
  }

  .admin-hub-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-form-card {
    padding: var(--space-6) var(--space-4);
  }

  .profile-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .profile {
    overflow-x: clip;
  }

  .lb-search,
  .lb-season {
    min-width: 0;
    flex: 1 1 100%;
  }

  #roster-app,
  #leaderboard-app.lb {
    padding: var(--space-3);
    overflow-x: clip;
  }

  #roster-app {
    overflow: visible;
  }

  #roster-app .lb-toolbar,
  #leaderboard-app.lb .lb-toolbar,
  #members-app .lb-toolbar {
    gap: var(--space-3);
    margin-bottom: var(--space-4);
  }

  #roster-app .lb-toolbar__row .subtle,
  #leaderboard-app.lb .lb-toolbar__row .subtle,
  #members-app .lb-toolbar__row .subtle {
    font-size: 0.75rem;
    overflow-wrap: anywhere;
  }

  .lb-toolbar__search-group {
    max-width: none;
    flex-direction: column;
    align-items: stretch;
  }

  .lb-seg button {
    min-height: 1.9rem;
    padding: 0 var(--space-3);
    font-size: 0.8125rem;
  }

  .lb-pager {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
  }

  .lb-pager .subtle {
    flex: 1 1 100%;
    text-align: center;
    font-size: 0.75rem;
  }

  .table-wrap {
    -webkit-overflow-scrolling: touch;
  }

  th,
  td {
    padding: var(--space-2) var(--space-3);
    font-size: 0.8125rem;
  }

  .lb-th {
    font-size: 0.75rem;
    white-space: normal;
    line-height: 1.2;
  }

  .lb-name__badges {
    flex-wrap: wrap;
    max-width: 100%;
  }

  .lb-name__identity .irg-name,
  .lb-solo {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .member-grid,
  .achieve-grid {
    grid-template-columns: 1fr;
  }

  .member-card {
    overflow-x: clip;
    padding: var(--space-4);
    font-size: 0.875rem;
  }

  .member-card .h3,
  .member-card strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .match-card__head {
    padding: var(--space-3);
    margin-inline: calc(-1 * var(--space-4));
    margin-top: calc(-1 * var(--space-4));
  }

  .match-card__code,
  .match-card__meta {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .match-card__code {
    font-size: var(--text-md);
  }

  .match-roster__name {
    overflow: visible;
    white-space: normal;
    min-width: 0;
  }

  .match-report__header,
  .match-report__section {
    padding: var(--space-3) var(--space-4);
  }

  .match-report__player-name,
  .match-report__rank-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 8rem;
  }

  .ticket-nav__search-field,
  .ticket-nav__search-field--grow {
    min-width: 0;
    flex: 1 1 100%;
  }

  .ticket-detail-page__toolbar {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .ticket-detail__head {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .hero {
    min-height: min(28rem, 72svh);
    padding: calc(var(--header-offset) + var(--space-8)) var(--space-4) var(--space-8);
  }

  .section-head {
    margin-bottom: var(--space-5);
  }

  .section-head .h2 {
    font-size: clamp(1.25rem, 5vw, var(--text-2xl));
  }

  .section-head p,
  .section-head .lede {
    font-size: 0.875rem;
  }

  .lb-podium__card--bronze,
  .lb-podium__card--silver {
    min-height: 7rem;
  }

  .lb-podium__card--gold {
    min-height: 7.5rem;
  }

  .section--shop .section-head--shop,
  .section--shop .section-head.section-head--shop {
    margin-bottom: var(--space-3);
  }

  .section--shop .section-head .h2 {
    font-size: clamp(1.25rem, 5vw, var(--text-2xl));
  }

  .shop-toolbar__filter,
  .shop-toolbar__sort {
    flex: 1 1 calc(50% - var(--space-2));
  }

  .shop-list-row,
  .shop-list-row:has(.shop-card__visual--shop-art),
  .shop-list-row:has(.shop-card__visual--border),
  .shop-list-row:has(.shop-card__visual--banner) {
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: 0.8125rem;
  }

  .shop-list-row__visual {
    width: 3rem;
    height: 3rem;
  }

  .shop-list-row:has(.shop-card__visual--shop-art) .shop-list-row__visual,
  .shop-list-row:has(.shop-card__visual--border) .shop-list-row__visual,
  .shop-list-row:has(.shop-card__visual--banner) .shop-list-row__visual {
    width: 3rem;
    height: 3rem;
  }

  .shop-list-row__body .h3 {
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .shop-list-row__desc,
  .shop-list-row__body .shop-level-req {
    font-size: 0.75rem;
    overflow-wrap: anywhere;
  }

  .shop-list-row .shop-rarity,
  .shop-list-row .shop-card__price,
  .shop-list-row .shop-lock,
  .shop-list-row .shop-list-row__meta,
  .shop-list-row .btn {
    grid-column: 2;
    font-size: 0.75rem;
  }

  .shop-list-row__meta {
    min-width: 0;
    align-items: flex-start;
    text-align: left;
  }

  .shop-grid {
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: var(--space-3);
  }

  .shop-card {
    font-size: 0.8125rem;
  }

  .queue-card__header,
  .queue-section {
    padding: var(--space-3);
  }

  .queue-card__meta,
  .queue-section .subtle {
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
  }

  .tournament-card {
    padding: var(--space-4);
    font-size: 0.875rem;
  }

  .tournament-card__confirm-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .tournament-card__confirm-actions .btn {
    width: 100%;
  }

  .game-block__head {
    gap: var(--space-2);
    margin-bottom: var(--space-4);
  }

  .activity-card {
    padding: var(--space-4);
    font-size: 0.875rem;
  }

  .member-card .subtle,
  .member-card .muted {
    font-size: 0.75rem;
    overflow-wrap: anywhere;
  }

  .member-card .discord-roles {
    max-width: 100%;
  }

  .achieve-card {
    padding: var(--space-4);
    font-size: 0.875rem;
  }

  .lb-table {
    table-layout: fixed;
    min-width: 36rem;
  }

  .lb-table .lb-name {
    max-width: 0;
    width: 38%;
    overflow: hidden;
  }

  .lb-table .lb-name__content,
  .lb-table .lb-name__text,
  .lb-table .lb-name__identity {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .lb-table .lb-ign {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 6rem;
  }

  .tournament-draft-board {
    grid-template-columns: 1fr;
  }

  .tournament-draft-board__name,
  .tournament-draft-board__slot-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .section {
    padding: var(--space-section-y-mobile) var(--space-4);
  }

  main.section,
  #content.section,
  main#content.section {
    padding-top: calc(var(--header-offset) + var(--space-10));
  }

  .section-head {
    margin-bottom: var(--space-6);
  }

  .home-split {
    gap: var(--space-6);
  }

  #announcements .container.home-split {
    max-width: var(--container);
    justify-content: center;
  }

  #announcements .home-split > :first-child,
  #announcements .home-split > .discord-widget,
  #announcements .home-split > aside.discord-widget {
    flex: 1 1 100%;
    max-width: 100%;
    margin-left: 0;
  }

  .home-split > .discord-widget,
  .home-split > aside.discord-widget {
    max-width: 100%;
    position: static;
  }

  .profile:not(.has-cosmetic-banner) > .profile-hero,
  .profile-overview:not(.has-cosmetic-banner) > .profile-hero {
    min-height: 10rem;
    padding: var(--space-12) var(--space-4) var(--space-4);
  }

  .hero--home {
    min-height: min(24rem, 56svh);
    padding: calc(var(--header-offset) + var(--space-8)) 0 var(--space-10);
  }

  .hero--home .hero__brand {
    width: clamp(6rem, 22vw, 10rem);
  }

  .hero--home .hero__content {
    padding: 0;
  }

  .btn,
  .btn-lg,
  .mobile-panel .nav-link {
    min-height: 2.75rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .container,
  .site-header__inner {
    width: min(100% - var(--space-6), var(--container));
  }

  .tournament-draft-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lb-podium {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-2);
  }

  .lb-podium__card {
    padding: var(--space-4) var(--space-2);
    font-size: 0.875rem;
  }

  .roster-row {
    padding: 0.45rem 0.55rem;
    font-size: 0.8125rem;
    gap: var(--space-2);
  }

  .roster-panels {
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--space-3);
  }

  .lb-toolbar__controls {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .lb-seg button {
    min-height: 1.95rem;
    padding: 0 var(--space-3);
    font-size: 0.8125rem;
  }

  #roster-app,
  #leaderboard-app.lb {
    padding: var(--space-3);
    overflow-x: clip;
  }

  .section {
    padding: var(--space-12) var(--space-4);
  }

  main.section,
  #content.section,
  main#content.section {
    padding-top: calc(var(--header-offset) + var(--space-12));
  }
}

@media (max-width: 1023px) {
  .account-trigger {
    min-width: 0;
    max-width: 100%;
  }

  .account-trigger__name {
    display: none;
  }

  .admin-page .admin-hub,
  .admin-hub {
    grid-template-columns: 1fr;
    position: relative;
  }

  .admin-page__nav-toggle {
    display: inline-flex;
  }

  .admin-hub__nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-header) + 5);
    border: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--ease-out), visibility var(--ease-out);
  }

  .admin-hub__nav-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .admin-hub__nav {
    position: fixed;
    top: var(--header-offset);
    left: 0;
    bottom: 0;
    z-index: calc(var(--z-header) + 10);
    width: min(18.5rem, 90vw);
    max-height: none;
    padding: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--color-bg);
    box-shadow: var(--shadow-nav);
    transform: translateX(-100%);
    transition: transform var(--ease-out);
  }

  .admin-hub__nav.is-open {
    transform: translateX(0);
  }

  .admin-catalog {
    grid-template-columns: 1fr;
  }

  .admin-catalog__nav {
    position: static;
    max-height: none;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .admin-catalog__rule {
    display: none;
  }

  .gjs-shell {
    --gjs-left-width: 0px;
  }

  .gjs-shell__bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .gjs-shell__bar-left,
  .gjs-shell__bar-center,
  .gjs-shell__bar-right {
    width: 100%;
    justify-content: flex-start;
  }

  .gjs-shell__meta {
    display: none;
  }

  .gjs-shell .gjs-pn-views-container {
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(280px, 88vw) !important;
    max-width: 88vw !important;
    height: min(70svh, 32rem) !important;
    z-index: 10050 !important;
    transform: translateX(-105%);
    transition: transform var(--ease-out);
    box-shadow: var(--shadow-nav);
  }

  .gjs-shell.gjs-shell--panels-open .gjs-pn-views-container {
    transform: translateX(0);
  }

  .gjs-shell__panels-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10045;
    border: 0;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
  }

  .gjs-shell.gjs-shell--panels-open .gjs-shell__panels-backdrop {
    display: block;
  }
}

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

@media (max-width: 400px) {

  .profile-nav__realm {
    padding-inline: var(--space-4);
  }
}

@media (max-width: 767px) {
  .admin-table-wrap {
    -webkit-overflow-scrolling: touch;
  }

  .match-report__table-wrap {
    -webkit-overflow-scrolling: touch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > *,
  .reveal.is-visible,
  .reveal-stagger.is-visible > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .lb-status[data-state="live"]::before {
    animation: none !important;
  }

  .activity-card:hover,
  .announcement-card:hover,
  .member-card:hover,
  .shop-card:hover,
  .achieve-card:hover,
  .btn-accent:hover,
  .btn-discord:hover {
    transform: none;
  }

  .mobile-panel {
    transition: none;
  }
}

/* —— Inhouse champion select (/draft/[token]) —— */
.champ-select-page {
  max-width: 1400px;
  padding-bottom: 3rem;
}

.champ-select-shell {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: var(--color-text);
}

.champ-select-card {
  max-width: 28rem;
  margin: 4rem auto;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface, rgba(0, 0, 0, 0.35));
}

.champ-select-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.champ-select-header h1 {
  margin: 0;
  font-size: 1.6rem;
}

.champ-select-header-actions {
  display: flex;
  gap: 0.5rem;
}

.champ-select-error {
  color: #ff6b6b;
  margin: 0;
}

.champ-select-board {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr minmax(160px, 220px);
  gap: 0.75rem;
  align-items: start;
}

.champ-select-team {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: rgba(0, 0, 0, 0.25);
  min-height: 28rem;
}

.champ-select-team h2 {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.champ-select-team--blue {
  border-color: rgba(59, 130, 246, 0.45);
}

.champ-select-team--red {
  border-color: rgba(239, 68, 68, 0.45);
}

.champ-select-picks {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.champ-select-slot {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0.5rem;
  align-items: center;
  padding: 0.35rem;
  border-radius: 8px;
  border: 1px solid transparent;
}

.champ-select-slot.is-active {
  border-color: var(--irg-green, #b6ff2a);
  box-shadow: 0 0 0 1px rgba(182, 255, 42, 0.25);
}

.champ-select-slot.is-you {
  background: rgba(182, 255, 42, 0.06);
}

.champ-select-slot.is-actor:not(.is-active) {
  border-color: rgba(182, 255, 42, 0.35);
}

.champ-select-slot img,
.champ-select-slot-empty {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.06);
}

.champ-select-slot strong {
  display: block;
  font-size: 0.7rem;
  opacity: 0.7;
}

.champ-select-slot span {
  font-size: 0.85rem;
}

.champ-select-bans {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.25rem;
  margin-top: auto;
}

.champ-select-ban {
  aspect-ratio: 1;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
}

.champ-select-ban.is-active {
  border-color: var(--irg-green, #b6ff2a);
}

.champ-select-ban img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.4) brightness(0.75);
}

.champ-select-ban-id {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0.55rem;
  opacity: 0.7;
}

.champ-select-grid-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.champ-select-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.champ-select-filters button {
  border: 1px solid var(--color-border);
  background: rgba(0, 0, 0, 0.3);
  color: inherit;
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font-size: 0.75rem;
  cursor: pointer;
}

.champ-select-filters button.is-active {
  border-color: var(--irg-green, #b6ff2a);
  color: var(--irg-green, #b6ff2a);
}

.champ-select-filters input {
  flex: 1 1 10rem;
  min-width: 8rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: rgba(0, 0, 0, 0.35);
  color: inherit;
  padding: 0.45rem 0.7rem;
}

.champ-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 0.4rem;
  max-height: min(70vh, 640px);
  overflow: auto;
  padding: 0.35rem;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: rgba(0, 0, 0, 0.2);
}

.champ-select-champ {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  align-items: center;
  padding: 0.25rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.champ-select-champ img {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
}

.champ-select-champ span {
  font-size: 0.65rem;
  text-align: center;
  line-height: 1.1;
  max-width: 4.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.champ-select-champ.is-selected {
  border-color: var(--irg-green, #b6ff2a);
  background: rgba(182, 255, 42, 0.08);
}

.champ-select-champ.is-taken,
.champ-select-champ:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.champ-select-done {
  text-align: center;
  margin: 0.5rem 0 0;
}

.champ-select-role-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
}

.champ-select-role-picker button {
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  color: var(--text);
  padding: 0.35rem 0.7rem;
  border-radius: 0.35rem;
  cursor: pointer;
  font: inherit;
}

.champ-select-role-picker button.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

.champ-select-review-hint,
.champ-select-review-panel {
  margin: 0 0 0.75rem;
}

.champ-select-seat-id {
  display: block;
  font-size: 0.75rem;
  opacity: 0.7;
}

button.champ-select-slot {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

@media (max-width: 900px) {
  .champ-select-board {
    display: flex;
    flex-direction: column;
  }

  .champ-select-team--blue {
    order: 1;
  }

  .champ-select-team--red {
    order: 2;
  }

  .champ-select-grid-wrap {
    order: 3;
  }

  .champ-select-team {
    min-height: 0;
  }

  .champ-select-picks {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* —— Drafter.lol-inspired board (/draft/[token]) —— */
.drafter-page {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: #0a0a0a;
  color: #e8e8ea;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Draft route: header + CS + footer locked to one viewport. */
html:has(.drafter-site-root),
body:has(.drafter-site-root) {
  height: 100%;
  max-height: 100svh;
  max-height: 100dvh;
  overflow: hidden;
}

.drafter-site-root {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100svh;
  height: 100dvh;
  max-height: 100svh;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background: #0a0a0a;
}

/* Match mirror: same random LoL skin splash as tournament / players / leaderboards. */
.drafter-site-root--match-splash {
  position: relative;
  isolation: isolate;
  background: transparent;
}

.drafter-site-root--match-splash > .tournament-splash {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.drafter-site-root--match-splash > .site-announce,
.drafter-site-root--match-splash > .drafter-site-frame {
  position: relative;
  z-index: 1;
}

.drafter-site-root--match-splash > .site-header {
  background: rgba(16, 16, 20, 0.94);
}

.drafter-site-root--match-splash .site-footer {
  background: rgba(12, 12, 16, 0.94);
}

.drafter-site-frame {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: var(--header-offset);
  overflow: hidden;
}

/* Match mirror: board fills the frame; footer only after scrolling down. */
.drafter-site-frame--reveal-footer {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

.drafter-site-main {
  /* Exactly one scrollport tall so the board uses space the footer used to occupy. */
  flex: 0 0 100%;
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.drafter-site-main .match-flow-page,
.drafter-site-main .drafter-page {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.drafter-site-root .site-announce {
  flex-shrink: 0;
}

.drafter-site-root .site-footer {
  flex-shrink: 0;
  margin-top: 0;
  padding: 0.35rem 1rem 0.45rem;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.28);
}

.drafter-site-frame--reveal-footer > #site-footer {
  flex: 0 0 auto;
}

.drafter-site-frame--reveal-footer .site-footer {
  /* Compact match-flow footer; only visible after scrolling past the board. */
  margin-top: 0;
}

.drafter-site-root .site-footer__inner {
  gap: 0.25rem;
}

.drafter-site-root .site-footer nav {
  gap: 0.35rem 0.85rem;
}

.drafter-site-root .site-footer a {
  font-size: 0.72rem;
}

.drafter-site-root .site-footer__meta,
.drafter-site-root .site-footer__legal {
  margin-top: 0.15rem;
  font-size: 0.65rem;
  line-height: 1.25;
}

.drafter-viewport {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.drafter-scale-frame {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}

.drafter-scale-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Apply CSS zoom only when scaled — idle zoom:1 still promotes compositor layers. */
.drafter-scale-stage.is-zoomed {
  zoom: var(--drafter-zoom, 1);
}

@supports not (zoom: 1) {
  .drafter-scale-stage.is-zoomed {
    transform: scale(var(--drafter-zoom, 1));
    transform-origin: top center;
    width: calc(100% / var(--drafter-zoom, 1));
    height: calc(100% / var(--drafter-zoom, 1));
  }
}

.drafter-shell {
  --drafter-bg: #0a0a0a;
  --drafter-surface: #121214;
  --drafter-surface-2: #222222;
  --drafter-center: #0c0c0e;
  --drafter-border: #3a3a3a;
  --drafter-border-soft: #2a2a2a;
  --drafter-text: #e8e8ea;
  --drafter-muted: #8a8a94;
  --drafter-muted-2: #6e6e78;
  --drafter-gold: #c8aa6e;
  --drafter-gold-soft: rgba(200, 170, 110, 0.14);
  --drafter-blue: #1e82ff;
  --drafter-blue-text: #7eb6ff;
  --drafter-red: #e84057;
  --drafter-red-text: #ff8a8a;
  /* drafter.lol role accents (beam + slot fades) */
  --drafter-blue-role: #3e7bfa;
  --drafter-red-role: #f52547;
  --drafter-radius: 2px;
  --drafter-radius-lg: 4px;
  --drafter-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --drafter-champ-size: 64px;
  --drafter-grid-gap: 12px;
  --drafter-pick-gap: 0.5rem;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.35rem 0.55rem 0.45rem;
  box-sizing: border-box;
  position: relative;
  color: var(--drafter-text);
  overflow: hidden;
}

.drafter-meta {
  display: grid;
  grid-template-columns: minmax(13rem, 0.34fr) minmax(0, 1fr) minmax(13rem, 0.34fr);
  gap: 0.35rem;
  align-items: center;
  padding: 0.28rem 0.15rem;
  border: 1px solid var(--drafter-border-soft);
  border-radius: var(--drafter-radius);
  background: rgba(16, 16, 18, 0.72);
  flex-shrink: 0;
}

.drafter-meta__side {
  display: flex;
  align-items: center;
  min-width: 0;
}

.drafter-meta__side--blue {
  justify-content: flex-start;
  padding-left: 0.2rem;
}

.drafter-meta__side--red {
  justify-content: flex-end;
  padding-right: 0.2rem;
}

.drafter-meta__center {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.5rem;
  min-width: 0;
  padding: 0 0.25rem;
}

.drafter-meta--simple {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0.28rem 0.5rem;
}

.drafter-meta--simple .drafter-zoom {
  margin-left: 0;
  padding-left: 0;
  border-left: none;
}

.drafter-controller-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  max-width: 100%;
  min-width: 0;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem;
  border-radius: var(--drafter-radius);
  border: 1px solid var(--drafter-border);
  background: var(--drafter-surface);
  color: var(--drafter-muted);
}

.drafter-controller-pill__label {
  flex: 0 0 auto;
  opacity: 0.75;
}

.drafter-controller-pill__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--drafter-text);
}

.drafter-controller-pill--blue {
  border-color: rgba(77, 163, 255, 0.45);
  background: rgba(77, 163, 255, 0.1);
}

.drafter-controller-pill--blue .drafter-controller-pill__name {
  color: var(--drafter-blue-text);
}

.drafter-controller-pill--red {
  border-color: rgba(255, 92, 92, 0.45);
  background: rgba(255, 92, 92, 0.1);
}

.drafter-controller-pill--red .drafter-controller-pill__name {
  color: var(--drafter-red-text);
}

.drafter-controller-pill.is-empty .drafter-controller-pill__name {
  color: var(--drafter-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.62rem;
}

.drafter-controller-pill.is-you {
  box-shadow: inset 0 0 0 1px rgba(200, 170, 110, 0.45);
}

.drafter-zoom {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: 0.15rem;
  padding-left: 0.45rem;
  border-left: 1px solid var(--drafter-border-soft);
}

.drafter-zoom__btn {
  width: 1.55rem;
  height: 1.55rem;
  padding: 0;
  border: 1px solid var(--drafter-border);
  border-radius: var(--drafter-radius);
  background: var(--drafter-surface);
  color: var(--drafter-text);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.drafter-zoom__btn:hover {
  border-color: rgba(200, 170, 110, 0.5);
  color: var(--drafter-gold);
}

.drafter-zoom__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.drafter-zoom__label {
  min-width: 2.6rem;
  padding: 0.15rem 0.25rem;
  border: none;
  background: transparent;
  text-align: center;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--drafter-muted);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.drafter-zoom__label:hover {
  color: var(--drafter-gold);
}

.drafter-mode {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--drafter-muted);
}

.drafter-side-pill {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem;
  border-radius: var(--drafter-radius);
  border: 1px solid var(--drafter-border);
}

.drafter-side-pill--blue {
  color: var(--drafter-blue-text);
  border-color: rgba(77, 163, 255, 0.45);
  background: rgba(77, 163, 255, 0.1);
}

.drafter-side-pill--red {
  color: var(--drafter-red-text);
  border-color: rgba(255, 92, 92, 0.45);
  background: rgba(255, 92, 92, 0.1);
}

.drafter-badge {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.18rem 0.45rem;
  border-radius: var(--drafter-radius);
  background: var(--drafter-gold-soft);
  border: 1px solid rgba(200, 170, 110, 0.4);
  color: var(--drafter-gold);
}

.drafter-badge--muted {
  background: var(--drafter-surface);
  border-color: var(--drafter-border);
  color: var(--drafter-muted);
}

.drafter-badge--warn {
  background: rgba(220, 120, 40, 0.15);
  border-color: rgba(220, 120, 40, 0.45);
  color: #f0a060;
}

.drafter-ready-pills {
  display: inline-flex;
  gap: 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--drafter-muted-2);
}

.drafter-ready-pills .is-ready {
  color: #7dcea0;
}

.drafter-status {
  margin: 2rem auto;
  text-align: center;
  font-size: 1rem;
  color: #a0a0a8;
}

.drafter-error {
  color: #ff6b6b;
  text-align: center;
  margin: 0;
  flex-shrink: 0;
}

.drafter-hint {
  text-align: center;
  margin: 0;
  color: var(--drafter-muted);
  font-size: 0.82rem;
  flex-shrink: 0;
}

.drafter-hint a {
  color: var(--drafter-blue-text);
}

/* Takeover prompt — overlay; must not consume flex space in the shell. */
.drafter-change-modal {
  position: absolute;
  z-index: 85;
  top: 0.45rem;
  left: 0.55rem;
  width: min(18rem, calc(100% - 1.1rem));
  max-width: 18rem;
  pointer-events: none !important;
}

.drafter-change-modal__panel {
  pointer-events: auto !important;
  border: 1px solid rgba(200, 170, 110, 0.35);
  border-radius: var(--drafter-radius-lg);
  background: rgba(16, 16, 18, 0.96);
  padding: 0.75rem 0.9rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.drafter-change-modal__panel p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--drafter-muted);
}

.drafter-change-modal__title {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--drafter-gold);
}

.drafter-change-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.6rem;
}

/* Pre-draft roles gate — CS rails stay as a dim backdrop; ChampGrid is not mounted. */
.drafter-shell.is-roles-gate {
  position: relative;
  min-height: min(70vh, 640px);
}

.drafter-shell.is-roles-gate .drafter-meta {
  opacity: 0.55;
  pointer-events: none;
}

.drafter-shell.is-roles-gate .drafter-board.is-roles-backdrop {
  pointer-events: none;
  user-select: none;
  filter: brightness(0.52) saturate(0.65);
  content-visibility: auto;
  contain: layout paint;
}

.drafter-shell.is-roles-gate .drafter-roles-gate {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(6, 6, 8, 0.42);
  pointer-events: auto;
  animation: drafter-fade-in 0.18s var(--drafter-ease) both;
}

/* After-mode provisional: roles panel in-grid; champs wrap tightly around it.
   Edge/Chromium classic scrollbars shrink the content box vs Firefox overlay
   scrollbars — percent panel width then leaves a fat leftover gutter. Use a
   fixed panel width + stable scrollbar gutter so both pack the same. */
.drafter-grid.is-roles-inline {
  display: block;
  line-height: 0;
  padding: 0;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  /* Keep the inline flow from changing width when classic scrollbars appear. */
  scrollbar-gutter: stable;
}

.drafter-grid.is-roles-inline::after {
  content: "";
  display: table;
  clear: both;
}

.drafter-roles-gate--inline {
  float: right;
  /* Fixed width avoids scrollbar-dependent percentage rounding across browsers. */
  width: 300px;
  max-width: calc(100% - 4px);
  margin: 0 0 var(--drafter-grid-gap, 12px) var(--drafter-grid-gap, 12px);
  position: relative;
  z-index: 2;
  line-height: normal;
  pointer-events: auto;
}

.drafter-roles-gate--inline .drafter-roles-gate__panel.is-inline {
  width: 100%;
  margin: 0;
  pointer-events: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
}

.drafter-grid.is-roles-inline .drafter-champ {
  display: inline-flex;
  vertical-align: top;
  width: var(--drafter-champ-size, 64px);
  max-width: calc(100% - 4px);
  min-width: 0;
  box-sizing: border-box;
  margin: 0 var(--drafter-grid-gap, 12px) var(--drafter-grid-gap, 12px) 0;
  padding: 0.12rem;
  gap: 0.12rem;
  line-height: 1.1;
  font-size: 0.58rem;
  content-visibility: visible;
  contain-intrinsic-size: none;
}

.drafter-grid.is-roles-inline .drafter-champ img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  display: block;
}

.drafter-champ > span {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.1;
}


.drafter-nav-tool.is-active {
  border-color: rgba(200, 170, 110, 0.65);
  background: rgba(200, 170, 110, 0.12);
  color: #e8d5a3;
}

/* Correction-window floating RolesGate (roles_when=after) — board stays interactive. */
.drafter-roles-gate--floating {
  position: static;
  inset: auto;
  background: transparent;
  padding: 0;
  pointer-events: none;
  z-index: 40;
}

.drafter-roles-gate--floating.is-correction-dock {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  /* No dim overlay — CS board stays fully interactive behind the panel. */
  background: transparent;
  pointer-events: none;
}

.drafter-roles-gate--floating .drafter-roles-gate__panel.is-floating {
  pointer-events: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

/* Compact PIP during draft — content-sized, no scroll, no dead flex space. */
.drafter-roles-gate__panel.is-pip-compact {
  width: min(318px, calc(100vw - 16px));
  height: auto;
  max-height: none;
  padding: 0.45rem 0.5rem 0.5rem;
  font-size: 0.78rem;
  gap: 0;
}

.drafter-roles-gate__panel.is-pip-compact .drafter-roles-gate__head {
  margin-bottom: 0.3rem;
  gap: 0.2rem 0.35rem;
  flex-wrap: nowrap;
  align-items: center;
}

.drafter-roles-gate__panel.is-pip-compact .drafter-roles-gate__head > div {
  min-width: 0;
  flex: 1 1 auto;
}

.drafter-roles-gate__panel.is-pip-compact .drafter-roles-gate__head h2 {
  font-size: 0.88rem;
  margin: 0;
  line-height: 1.15;
}

.drafter-roles-gate__panel.is-pip-compact .drafter-roles-gate__head p {
  font-size: 0.62rem;
  line-height: 1.2;
  margin: 0.1rem 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.drafter-roles-gate__panel.is-pip-compact .drafter-roles-gate__list {
  flex: 0 0 auto;
  min-height: 0;
  margin: 0;
  gap: 0.18rem;
}

.drafter-roles-gate__panel.is-pip-compact .match-flow-role-assign-row {
  gap: 0.28rem;
  padding: 0.14rem 0.22rem;
  align-items: center;
}

.drafter-roles-gate__panel.is-pip-compact .drafter-roles-gate__player-number {
  display: none;
}

.drafter-roles-gate__panel.is-pip-compact .match-flow-role-assign-row__body {
  gap: 0;
  min-width: 0;
  flex: 0 1 5.5rem;
}

.drafter-roles-gate__panel.is-pip-compact .match-flow-role-assign-row__body strong {
  font-size: 0.7rem;
  line-height: 1.15;
}

.drafter-roles-gate__panel.is-pip-compact .match-flow-role-assign-row__name {
  flex-wrap: wrap;
  gap: 0.12rem 0.22rem;
}

.drafter-roles-gate__panel.is-pip-compact .match-flow-role-assign-row__pref-label {
  display: none;
}

.drafter-roles-gate__panel.is-pip-compact .match-flow-role-assign-row__pref .match-flow-role-icons img,
.drafter-roles-gate__panel.is-pip-compact .match-flow-role-assign-row__pref .tournament-role-badge img {
  width: 11px !important;
  height: 11px !important;
}

.drafter-roles-gate__panel.is-pip-compact .drafter-roles-gate__tip,
.drafter-roles-gate__panel.is-pip-compact .drafter-roles-gate__ctrl {
  font-size: 0.58rem;
  line-height: 1.1;
}

.drafter-roles-gate__panel.is-pip-compact .match-flow-role-picker {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: 0.12rem;
  max-width: none;
  justify-content: flex-end;
  transform: none;
}

.drafter-roles-gate__panel.is-pip-compact .match-flow-role-picker__btn {
  padding: 0.14rem;
  font-size: 0;
  gap: 0;
  border-radius: 3px;
  transform: none;
  min-width: 1.55rem;
  min-height: 1.55rem;
  justify-content: center;
}

.drafter-roles-gate__panel.is-pip-compact .match-flow-role-picker__btn span {
  display: none;
}

.drafter-roles-gate__panel.is-pip-compact .match-flow-role-picker__btn img {
  width: 15px;
  height: 15px;
}

.drafter-roles-gate__panel.is-pip-compact .match-flow-role-picker__btn:hover:not(:disabled) {
  transform: none;
}

.drafter-roles-gate__panel.is-pip-compact .drafter-roles-gate__actions {
  margin-top: 0.3rem;
  padding-top: 0.3rem;
  gap: 0.3rem;
  flex: 0 0 auto;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.drafter-roles-gate__panel.is-pip-compact .drafter-btn-ready {
  font-size: 0.72rem;
  padding: 0.32rem 0.55rem;
  min-height: 0;
  line-height: 1.2;
}

.drafter-roles-gate__panel.is-pip-compact .drafter-roles-gate__waiting {
  font-size: 0.62rem;
  margin: 0;
  line-height: 1.25;
}

.drafter-roles-gate__panel.is-pip-compact .drafter-roles-gate__suggest-row {
  gap: 0.2rem;
  font-size: 0.62rem;
  margin: 0;
}

.drafter-roles-gate__panel.is-pip-compact .drafter-roles-gate__suggest-select {
  font-size: 0.68rem;
  padding: 0.2rem 0.3rem;
}

.drafter-roles-gate__panel.is-pip-compact .drafter-roles-gate__minimize {
  font-size: 1rem;
  padding: 0 0.25rem;
  flex-shrink: 0;
}

.drafter-roles-gate__panel.is-pip-compact .drafter-roles-gate__timer,
.drafter-roles-gate__panel.is-pip-compact .drafter-roles-gate__tally {
  font-size: 0.68rem;
}

.drafter-roles-gate__panel.is-pip-compact.is-save-open {
  padding-bottom: 0;
}

.drafter-roles-gate__panel.is-pip-compact.is-save-open .drafter-roles-gate__actions {
  padding: 0.4rem 0 0.5rem;
}

.drafter-roles-gate__panel.is-pip-compact .drafter-roles-gate__save {
  flex: 1 1 100%;
  width: 100%;
  min-height: 2.15rem;
  box-sizing: border-box;
}

/* Inline sticky panel fills its floated slot (overrides compact fixed width). */
.drafter-roles-gate--inline .drafter-roles-gate__panel.is-inline.is-pip-compact {
  width: 100%;
}

/* Correction: large focused panel; board remains clickable around it.
   Footer (Save / Agree) stays pinned and fully visible — list scrolls if needed. */
.drafter-roles-gate__panel.is-floating.is-correction {
  position: relative;
  left: auto;
  top: auto;
  width: min(36rem, calc(100vw - 2.5rem));
  height: auto;
  max-height: min(88vh, 42rem);
  padding: 1.1rem 1.2rem 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 0 0 2px rgba(255, 107, 107, 0.55),
    0 24px 64px rgba(0, 0, 0, 0.65),
    0 0 80px rgba(255, 80, 80, 0.18);
}

.drafter-roles-gate__panel.is-floating.is-correction .drafter-roles-gate__head {
  margin-bottom: 0.65rem;
  flex: 0 0 auto;
}

.drafter-roles-gate__panel.is-floating.is-correction .drafter-roles-gate__head h2 {
  font-size: 1.35rem;
}

.drafter-roles-gate__panel.is-floating.is-correction .drafter-roles-gate__head p {
  font-size: 0.88rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.drafter-roles-gate__panel.is-floating.is-correction .drafter-roles-gate__notice {
  flex: 0 0 auto;
}

.drafter-roles-gate__panel.is-floating.is-correction .drafter-roles-gate__list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  gap: 0.4rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.drafter-roles-gate__panel.is-floating.is-correction .match-flow-role-assign-row {
  padding: 0.4rem 0.5rem;
}

.drafter-roles-gate__panel.is-floating.is-correction .drafter-roles-gate__actions {
  flex: 0 0 auto;
  width: 100%;
  margin: 0;
  padding: 0.75rem 0 1.05rem;
  gap: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: inherit;
  position: relative;
  z-index: 2;
}

.drafter-roles-gate__panel.is-floating.is-correction .drafter-roles-gate__save,
.drafter-roles-gate__panel.is-floating.is-save-open .drafter-roles-gate__save {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  padding: 0.65rem 1rem;
  white-space: nowrap;
}

.drafter-roles-gate__panel.is-floating.is-correction .drafter-btn-ready {
  font-size: 0.95rem;
  padding: 0.55rem 1rem;
}

.drafter-roles-gate__panel.is-floating.is-correction .match-flow-role-picker {
  max-width: none;
  gap: 0.35rem;
}

.drafter-roles-gate__panel.is-floating.is-correction .match-flow-role-picker__btn {
  font-size: 0.8rem;
  padding: 0.35rem 0.5rem;
}

.drafter-roles-gate__head.is-draggable {
  cursor: grab;
  user-select: none;
}

.drafter-roles-gate__head.is-draggable:active {
  cursor: grabbing;
}

.drafter-roles-gate__minimize {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
  padding: 0.15rem 0.4rem;
}

.drafter-roles-gate__minimize:hover {
  opacity: 1;
}

.drafter-roles-gate-orb {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 22, 28, 0.94);
  color: #f2f2f4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  cursor: grab;
  gap: 0.1rem;
  font-size: 0.7rem;
  font-weight: 650;
  touch-action: none;
  overflow: visible;
}

.drafter-roles-gate-orb:active {
  cursor: grabbing;
}

.drafter-roles-gate-orb--blue {
  outline: 2px solid rgba(74, 144, 226, 0.95);
}

.drafter-roles-gate-orb--red {
  outline: 2px solid rgba(226, 74, 90, 0.95);
}

.drafter-roles-gate-orb__pulse {
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  pointer-events: none;
  border: 2px solid currentColor;
  opacity: 0;
}

.drafter-roles-gate-orb.is-attention {
  animation: roles-pip-nudge 1.6s ease-in-out infinite;
}

.drafter-roles-gate-orb.is-attention .drafter-roles-gate-orb__pulse {
  animation: roles-pip-ring 1.6s ease-out infinite;
  color: #f5c542;
}

.drafter-roles-gate-orb.is-attention-urgent {
  animation: roles-pip-nudge 0.9s ease-in-out infinite;
}

.drafter-roles-gate-orb.is-attention-urgent .drafter-roles-gate-orb__pulse {
  animation: roles-pip-ring 0.85s ease-out infinite;
  color: #ff6b6b;
}

/* Panel attention: border pulse only — no zoom/scale. */
.drafter-roles-gate__panel.is-floating.is-attention {
  box-shadow:
    0 0 0 1px rgba(245, 197, 66, 0.55),
    0 12px 40px rgba(0, 0, 0, 0.45);
}

.drafter-roles-gate__panel.is-floating.is-attention-urgent {
  animation: roles-pip-glow 1.1s ease-in-out infinite;
}

@keyframes roles-pip-nudge {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

@keyframes roles-pip-glow {
  0%,
  100% {
    box-shadow:
      0 0 0 2px rgba(255, 107, 107, 0.45),
      0 24px 64px rgba(0, 0, 0, 0.65),
      0 0 48px rgba(255, 80, 80, 0.12);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(255, 107, 107, 0.9),
      0 24px 64px rgba(0, 0, 0, 0.7),
      0 0 72px rgba(255, 80, 80, 0.28);
  }
}

@keyframes roles-pip-ring {
  0% {
    transform: scale(0.92);
    opacity: 0.85;
  }
  100% {
    transform: scale(1.55);
    opacity: 0;
  }
}

.drafter-roles-gate-orb__badge {
  font-size: 0.62rem;
  opacity: 0.9;
}

.drafter-roles-backdrop-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex: 1;
  min-height: 12rem;
  opacity: 0.85;
  text-align: center;
  pointer-events: none;
}

.drafter-roles-gate {
  position: relative;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 1rem;
  background: rgba(6, 6, 8, 0.35);
  pointer-events: auto;
  animation: drafter-fade-in 0.18s var(--drafter-ease) both;
}

.drafter-roles-gate__panel {
  width: min(36rem, 100%);
  max-height: min(78vh, 40rem);
  overflow: auto;
  border: 1px solid rgba(200, 170, 110, 0.32);
  border-radius: var(--drafter-radius-lg);
  background: rgba(14, 14, 16, 0.97);
  box-shadow:
    0 20px 56px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  padding: 1rem 1.05rem 1.1rem;
}

.drafter-roles-gate__panel.is-vote-modal {
  width: min(28rem, 100%);
  border-color: rgba(88, 101, 242, 0.35);
  background: #2b2d31;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.72);
}

.drafter-roles-gate__panel--blue {
  border-color: rgba(30, 130, 255, 0.4);
}

.drafter-roles-gate__panel--red {
  border-color: rgba(232, 64, 87, 0.4);
}

.drafter-roles-gate__notice {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  margin: 0 0 0.85rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(250, 168, 26, 0.55);
  border-radius: 8px;
  background: rgba(250, 168, 26, 0.08);
  color: #e8e8ea;
  font-size: 0.82rem;
  line-height: 1.4;
}

.drafter-roles-gate__notice p {
  margin: 0;
}

.drafter-roles-gate__notice-icon {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.75rem;
  color: #1a1a1a;
  background: #faa81a;
}

.drafter-roles-gate__list.is-vote-roster .match-flow-role-assign-row {
  padding: 0.45rem 0.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.drafter-roles-gate__actions.is-vote-footer {
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.drafter-roles-gate__actions.is-vote-footer .drafter-btn-ready {
  min-width: 6.5rem;
}

.drafter-roles-gate__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.55rem 0.85rem;
  margin-bottom: 0.85rem;
}

.drafter-roles-gate__head h2 {
  margin: 0 0 0.25rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--drafter-gold);
}

.drafter-roles-gate__head p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--drafter-muted);
}

.drafter-roles-gate__panel.is-role-locked:not(.is-pip-compact) {
  border-color: rgba(221, 182, 93, 0.34);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(220, 174, 76, 0.08), transparent 58%),
    linear-gradient(155deg, rgba(19, 19, 21, 0.98), rgba(11, 11, 13, 0.98));
}

.drafter-roles-gate__panel.is-role-locked .drafter-roles-gate__head {
  align-items: center;
  padding: 0.85rem 1rem;
  margin: -0.15rem -0.15rem 0.9rem;
  border: 1px solid rgba(221, 182, 93, 0.18);
  border-radius: 0.7rem;
  background: rgba(221, 182, 93, 0.045);
}

.drafter-roles-gate__panel.is-role-locked .drafter-roles-gate__head h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.drafter-roles-gate__panel.is-role-locked .drafter-roles-gate__head h2::before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid rgba(221, 182, 93, 0.4);
  border-radius: 50%;
  color: var(--drafter-gold);
  font-size: 0.75rem;
}

.drafter-roles-gate__panel.is-role-locked .drafter-roles-gate__timer {
  padding: 0.32rem 0.58rem;
  border: 1px solid rgba(221, 182, 93, 0.24);
  border-radius: 999px;
  background: rgba(221, 182, 93, 0.08);
  font-size: 0.82rem;
}

.drafter-roles-gate__undo-save {
  border-color: rgba(221, 182, 93, 0.3) !important;
  color: var(--drafter-gold) !important;
}

.drafter-roles-gate__timer,
.drafter-roles-gate__tally {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--drafter-gold);
  font-variant-numeric: tabular-nums;
}

.drafter-roles-gate__tally {
  margin-left: 0;
  color: var(--drafter-muted);
}

.drafter-roles-gate__list {
  margin-bottom: 0.9rem;
}

/* Captain assignment: keep player rows fixed while giving each one a full lane bar. */
.drafter-roles-gate__panel.is-role-editing:not(.is-pip-compact) {
  width: min(56rem, calc(100vw - 2rem));
  max-height: min(88vh, 48rem);
}

.drafter-roles-gate__panel.is-role-editing:not(.is-pip-compact)
  .drafter-roles-gate__player-row {
  display: grid;
  grid-template-columns: 4.5rem 2.5rem minmax(9rem, 1fr) minmax(25rem, 2.5fr);
  align-items: center;
  gap: 0.6rem;
  padding: 0.48rem 0.6rem;
  min-height: 3.7rem;
}

.drafter-roles-gate__player-number {
  color: var(--drafter-gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.drafter-roles-gate__panel.is-role-editing:not(.is-pip-compact)
  .match-flow-role-assign-row__body {
  grid-column: 3;
}

.drafter-roles-gate__panel.is-role-editing:not(.is-pip-compact)
  .match-flow-role-picker {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-column: 4;
  width: 100%;
  max-width: none;
  margin: 0;
  gap: 0.28rem;
}

.drafter-roles-gate__panel.is-role-editing:not(.is-pip-compact)
  .match-flow-role-picker__btn {
  width: 100%;
  min-width: 0;
  justify-content: center;
  gap: 0.22rem;
  padding: 0.38rem 0.28rem;
  font-size: 0.68rem;
}

.drafter-roles-gate__panel.is-role-editing:not(.is-pip-compact)
  .match-flow-role-picker__btn img {
  width: 17px;
  height: 17px;
}

@media (max-width: 880px) {
  .drafter-roles-gate__panel.is-role-editing:not(.is-pip-compact)
    .drafter-roles-gate__player-row {
    grid-template-columns: 4.4rem 2.4rem minmax(0, 1fr);
    gap: 0.42rem;
  }

  .drafter-roles-gate__panel.is-role-editing:not(.is-pip-compact)
    .match-flow-role-picker {
    grid-column: 1 / -1;
  }
}

.drafter-roles-gate__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.06);
  color: var(--drafter-muted);
}

.drafter-roles-gate__mark--agree {
  color: #7dcea0;
  background: rgba(80, 160, 110, 0.18);
}

.drafter-roles-gate__mark--disagree {
  color: #f0a0a0;
  background: rgba(180, 60, 60, 0.2);
}

.drafter-roles-gate__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.drafter-roles-gate__tip {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(210, 70%, 70%);
  opacity: 0.9;
}

.drafter-roles-gate__ctrl {
  font-weight: 500;
  opacity: 0.65;
  font-size: 0.78em;
}

.drafter-roles-gate__suggest-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 12rem;
  font-size: 0.88rem;
  color: var(--drafter-muted);
}

.drafter-roles-gate__suggest-select {
  appearance: none;
  min-width: 8.5rem;
  padding: 0.4rem 1.75rem 0.4rem 0.65rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.12)),
    rgba(12, 12, 16, 0.92);
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.drafter-roles-gate__suggest-select:focus {
  outline: 2px solid rgba(120, 180, 255, 0.55);
  outline-offset: 1px;
}

.drafter-roles-gate__actions .drafter-btn-ready.is-selected {
  outline: 2px solid rgba(120, 180, 255, 0.85);
  outline-offset: 1px;
}

.drafter-roles-gate__waiting {
  margin: 0;
  font-size: 0.84rem;
  color: var(--drafter-muted);
}

.drafter-roles-gate__toast,
.match-flow-board__note.match-flow-board__toast {
  border: 1px solid rgba(232, 190, 103, 0.28);
  border-radius: 12px;
  padding: 0.55rem 0.75rem;
  color: var(--drafter-text);
  background: linear-gradient(135deg, rgba(232, 190, 103, 0.11), rgba(20, 24, 34, 0.72));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

.drafter-card {
  max-width: 28rem;
  margin: 3rem auto;
  padding: 1.5rem;
  border: 1px solid var(--drafter-border);
  border-radius: var(--drafter-radius-lg);
  background: var(--drafter-surface);
}

.drafter-board {
  --drafter-rail-col: clamp(13rem, 24vw, 20rem);
  --drafter-action-bar-height: 7.25rem;
  display: grid;
  grid-template-columns: minmax(13rem, 0.34fr) minmax(0, 1fr) minmax(13rem, 0.34fr);
  gap: 0.35rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.drafter-rail {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 0;
  overflow: hidden;
  padding: 0.2rem 0.25rem 0.3rem;
  border: none;
  border-radius: 0;
  background: transparent;
}

.drafter-rail--blue {
  border-left: none;
}

.drafter-rail--red {
  border-right: none;
}

.drafter-rail-undos {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.35rem;
  row-gap: 0.2rem;
  margin: 0 0 0.15rem;
  padding: 0.12rem 0.2rem;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--drafter-muted);
}

.drafter-rail--blue .drafter-rail-undos {
  flex-direction: row;
}

.drafter-rail--red .drafter-rail-undos {
  flex-direction: row-reverse;
}

.drafter-rail-undos__count {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
}

/* Blue: "Undos 3" — label left of number */
.drafter-rail--blue .drafter-rail-undos__count {
  flex-direction: row;
}

/* Red: "3 Undos" — label right of number */
.drafter-rail--red .drafter-rail-undos__count {
  flex-direction: row-reverse;
}

.drafter-rail-undos__value {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--drafter-gold);
}

.drafter-rail-undos__freebies {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--drafter-muted);
  white-space: nowrap;
}

.drafter-rail-undos__freebies .is-ready {
  color: var(--drafter-gold);
  font-weight: 700;
}

.drafter-rail-undos__freebies .is-used {
  color: var(--drafter-muted-2);
  opacity: 0.85;
}

/* Choice + large champ picker for Undo (Rewind) / Swap */
.drafter-champ-portrait {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border-radius: 5px;
  border: 1px solid rgba(200, 170, 110, 0.55);
  background: #101012;
  overflow: hidden;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.drafter-champ-portrait--sm {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
}

.drafter-champ-portrait--lg {
  width: 3.25rem;
  height: 3.25rem;
  min-width: 3.25rem;
  min-height: 3.25rem;
}

.drafter-champ-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  image-rendering: auto;
}

.drafter-champ-portrait.is-empty {
  border-style: dashed;
  border-color: rgba(138, 138, 148, 0.55);
  background: rgba(24, 24, 28, 0.9);
}

.drafter-champ-portrait__empty {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--drafter-muted, #8a8a94);
  line-height: 1;
}

.drafter-champ-swap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.45rem;
  margin: 0;
}

.drafter-champ-swap--solo {
  gap: 0.55rem;
}

.drafter-champ-swap__arrow {
  color: var(--drafter-gold, #c8aa6e);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
}

.drafter-champ-swap__slot {
  color: var(--drafter-muted, #8a8a94);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.drafter-champ-swap__text {
  color: #d0d0d6;
  font-size: 0.88rem;
  line-height: 1.35;
}

.drafter-change-request__body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.drafter-change-request__body > p {
  margin: 0;
}

.drafter-change-request__warning {
  border: 1px solid rgba(255, 130, 130, 0.7);
  border-left-width: 4px;
  border-radius: 8px;
  padding: 0.75rem 0.85rem;
  background: rgba(75, 24, 24, 0.42);
  color: #ffe2e2;
  line-height: 1.45;
}

.drafter-change-request__warning p {
  margin: 0.35rem 0 0;
}

.drafter-change-choice .drafter-modal-body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.drafter-change-choice__actions {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.drafter-change-choice__actions .drafter-btn-ready {
  width: 100%;
  justify-content: center;
}

.drafter-change-picker-root {
  z-index: 90;
  pointer-events: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 4, 6, 0.55);
}

.drafter-change-picker {
  position: relative;
  width: min(56rem, calc(100% - 1.4rem));
  max-height: min(88vh, 44rem);
  pointer-events: auto !important;
}

.drafter-change-picker__inner {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-height: inherit;
  padding: 0.85rem 0.95rem 0.9rem;
  border: 1px solid rgba(200, 170, 110, 0.28);
  border-radius: var(--drafter-radius-lg);
  background: rgba(14, 14, 16, 0.98);
  box-shadow:
    0 20px 56px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  animation: drafter-modal-in 0.2s var(--drafter-ease) both;
}

.drafter-change-picker__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.drafter-change-picker__header h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--drafter-gold);
}

.drafter-change-picker__subtitle {
  margin: 0.35rem 0 0;
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--drafter-muted);
}

.drafter-change-picker__subtitle .drafter-champ-swap__text {
  color: var(--drafter-muted);
  font-size: 0.84rem;
}

.drafter-change-picker__grid {
  flex: 1 1 auto;
  min-height: 12rem;
  max-height: min(52vh, 28rem);
  overflow: auto;
  padding: 0.15rem 0.1rem 0.35rem;
  border-top: 1px solid rgba(42, 42, 48, 0.9);
  border-bottom: 1px solid rgba(42, 42, 48, 0.9);
}

.drafter-change-picker__footer {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.drafter-change-picker__note {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--drafter-muted);
}

.drafter-change-picker__note--warning {
  padding: 0.6rem 0.7rem;
  border: 1px solid rgba(224, 91, 91, 0.55);
  border-radius: 6px;
  background: rgba(132, 28, 34, 0.2);
  color: #ffd1d1;
}

.drafter-change-picker__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
}

.drafter-change-picker__selection {
  flex: 1 1 12rem;
  min-width: 0;
  margin-right: auto;
}

.drafter-change-picker__selection .drafter-champ-swap {
  padding: 0.28rem 0.4rem;
  border: 1px solid rgba(200, 170, 110, 0.28);
  border-radius: 5px;
  background: rgba(200, 170, 110, 0.06);
}

.drafter-champ.is-current-slot:not(.is-selected) {
  outline: 1px dashed rgba(200, 170, 110, 0.45);
  outline-offset: -2px;
}

.drafter-modal-panel--disclaimer {
  /* same anchor as undo panel; caution chrome via inner */
}

.drafter-rail header h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.drafter-rail--blue header h2 {
  color: #4da3ff;
}

.drafter-rail--red header h2 {
  color: #ff6b7a;
  text-align: right;
}

.drafter-rail header span {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  color: var(--drafter-muted-2);
}

.drafter-rail--red header span {
  text-align: right;
}

.drafter-picks {
  display: flex;
  flex-direction: column;
  gap: var(--drafter-pick-gap, 0.5rem);
  flex: 1 1 auto;
  min-height: 0;
}

.drafter-roster {
  list-style: none;
  margin: 0.15rem 0 0;
  padding: 0.3rem 0.38rem;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  container-name: drafter-roster;
  container-type: inline-size;
  gap: 0.12rem;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--drafter-border-soft) 78%, #c8aa6e 22%);
  border-radius: var(--drafter-radius);
  background: linear-gradient(135deg, rgba(18, 19, 22, 0.92), rgba(5, 6, 8, 0.78));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035), 0 5px 14px rgba(0, 0, 0, 0.14);
}

.drafter-roster.is-locked {
  opacity: 0.88;
}

.drafter-roster__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  min-height: 1.28rem;
  min-width: 0;
  line-height: 1.15;
  text-align: left;
}

.drafter-roster__icon {
  flex: 0 0 auto;
  width: 0.86rem;
  height: 0.86rem;
  object-fit: contain;
  opacity: 0.96;
}

.drafter-roster__name {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.7rem;
  font-weight: 650;
  color: rgba(246, 246, 249, 0.96);
}

.drafter-roster__identity {
  display: grid;
  grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
  flex: 1 1 auto;
  direction: ltr;
  align-items: baseline;
  gap: 0.42rem;
  min-width: 0;
  overflow: hidden;
  line-height: 1.1;
  text-align: left;
}

.drafter-roster__name:only-child {
  grid-column: 1 / -1;
}

.drafter-roster__riot {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: rgba(195, 203, 216, 0.9);
  font-size: 0.66rem;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@container drafter-roster (max-width: 12.5rem) {
  .drafter-roster__identity {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.08rem;
    align-items: start;
  }

  .drafter-roster__riot {
    grid-column: 1;
    font-size: 0.6rem;
  }
}

.drafter-roster.is-locked .drafter-roster__name {
  color: var(--drafter-muted-2);
}

.drafter-pick {
  display: block;
  flex: 1 1 0;
  /* Let the five portraits share the rail height instead of clipping at high zoom. */
  min-height: 0;
  min-width: 0;
  max-height: none;
  padding: 0;
  border: 1px solid var(--drafter-border);
  border-radius: var(--drafter-radius);
  background: var(--drafter-surface-2);
  color: inherit;
  overflow: hidden;
  position: relative;
  transition:
    border-color 0.15s var(--drafter-ease),
    background 0.15s var(--drafter-ease),
    box-shadow 0.2s var(--drafter-ease),
    transform 0.15s var(--drafter-ease);
}

.drafter-rail--blue .drafter-pick {
  border-left: 2px solid rgba(30, 130, 255, 0.55);
}

.drafter-rail--red .drafter-pick {
  border-right: 2px solid rgba(232, 64, 87, 0.55);
}

.drafter-pick.is-active {
  border-color: rgba(200, 170, 110, 0.55);
  box-shadow: inset 0 0 0 1px rgba(200, 170, 110, 0.28);
  background: rgba(200, 170, 110, 0.05);
}

.drafter-rail--blue .drafter-pick.is-active {
  border-color: color-mix(in srgb, var(--drafter-blue-role) 72%, #fff 8%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--drafter-blue-role) 35%, transparent),
    0 0 18px color-mix(in srgb, var(--drafter-blue-role) 18%, transparent);
  background: color-mix(in srgb, var(--drafter-blue-role) 8%, var(--drafter-surface-2));
}

.drafter-rail--red .drafter-pick.is-active {
  border-color: color-mix(in srgb, var(--drafter-red-role) 72%, #fff 8%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--drafter-red-role) 35%, transparent),
    0 0 18px color-mix(in srgb, var(--drafter-red-role) 18%, transparent);
  background: color-mix(in srgb, var(--drafter-red-role) 8%, var(--drafter-surface-2));
}

/* Bottom team-color fade on the active pick slot (drafter.lol turn glow). */
.drafter-pick.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58%;
  pointer-events: none;
  z-index: 2;
  opacity: 0.92;
  animation: drafter-slot-glow 2.1s ease-in-out infinite alternate;
}

.drafter-rail--blue .drafter-pick.is-active::after {
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--drafter-blue-role) 62%, transparent) 0%,
    color-mix(in srgb, var(--drafter-blue-role) 22%, transparent) 42%,
    transparent 100%
  );
}

.drafter-rail--red .drafter-pick.is-active::after {
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--drafter-red-role) 62%, transparent) 0%,
    color-mix(in srgb, var(--drafter-red-role) 22%, transparent) 42%,
    transparent 100%
  );
}

.drafter-pick.is-hover {
  border-color: rgba(200, 170, 110, 0.65);
  box-shadow: inset 0 0 0 1px rgba(200, 170, 110, 0.28);
}

.drafter-pick-art.is-hover-art {
  opacity: 0.72;
  filter: saturate(0.92);
}

.drafter-pick.is-veiled-pick .drafter-pick-art,
.drafter-pick.is-veiled-pick img {
  filter: grayscale(1) brightness(0.62) contrast(1.08);
  opacity: 0.9;
}

.drafter-pick.is-veiled-pick.is-hover .drafter-pick-art.is-hover-art {
  filter: grayscale(1) brightness(0.7) contrast(1.05);
  opacity: 0.78;
}

/* Hidden blind picks: empty slot; turn glow comes from .is-active only. */
.drafter-pick.is-hidden-pick:not(.is-active) .drafter-helmet {
  opacity: 0.32;
}

button.drafter-pick {
  width: 100%;
  text-align: inherit;
  font: inherit;
  cursor: pointer;
  color: inherit;
}

.drafter-pick.is-editable:hover {
  border-color: rgba(200, 170, 110, 0.55);
  background: rgba(200, 170, 110, 0.06);
  transform: translateY(-1px);
}

.drafter-pick.is-undo-target,
.drafter-ban.is-undo-target {
  border-color: rgba(200, 170, 110, 0.85);
  box-shadow: 0 0 0 1px rgba(200, 170, 110, 0.35);
  background: rgba(200, 170, 110, 0.1);
  animation: drafter-ring-pulse 1.6s var(--drafter-ease) infinite;
}

button.drafter-ban {
  padding: 0;
  border: 1px solid var(--drafter-border-soft);
  border-radius: var(--drafter-radius);
  background: #0e0e10;
  cursor: pointer;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 1;
  color: inherit;
  font: inherit;
  transition:
    border-color 0.15s var(--drafter-ease),
    transform 0.15s var(--drafter-ease),
    box-shadow 0.2s var(--drafter-ease);
}

button.drafter-ban.is-editable:hover {
  border-color: rgba(200, 170, 110, 0.55);
  transform: translateY(-1px);
}

/* Change-request modal (propose + pending) — floating, bottom-right of board */
.drafter-modal-root {
  position: absolute;
  inset: 0;
  z-index: 80;
  pointer-events: none !important;
  animation: drafter-fade-in 0.18s var(--drafter-ease) both;
}

/* After first entrance, never replay fade/scale on re-render or brief remount. */
.drafter-modal-root.is-settled,
.drafter-modal-root.is-settled .drafter-modal-panel__inner {
  animation: none;
}

.drafter-modal-panel {
  position: absolute;
  left: auto;
  top: 45%;
  right: calc(var(--drafter-rail-col) + 0.55rem);
  bottom: auto;
  translate: 0 -50%;
  width: min(22rem, calc(100% - var(--drafter-rail-col) * 2 - 1.4rem));
  max-height: none;
  overflow: visible;
  pointer-events: auto !important;
}

.drafter-modal-panel--restart {
  left: calc(var(--drafter-rail-col) + 0.55rem);
  right: auto;
}

.drafter-modal-panel--ready-confirm {
  left: 50%;
  right: auto;
  top: 50%;
  bottom: auto;
  translate: none;
  width: min(32rem, calc(100% - 1.5rem));
  max-height: min(78vh, 36rem);
  overflow: auto;
  transform: translate(-50%, -50%);
}

/* Ready-confirm (2nd role confirm): blur rails/meta/center content; keep the
   bottom status+chat bar and confirm panel sharp. Scrim lives inside
   .drafter-board so it shares a stacking context with the action bar — a
   shell-level "bottom window" cut left rail bottoms unblurred (misaligned). */
.drafter-ready-confirm-root {
  pointer-events: none !important;
  background: rgba(4, 6, 10, 0.32);
}

.drafter-shell.is-ready-confirm .drafter-meta,
.drafter-shell.is-ready-confirm .drafter-rail,
.drafter-shell.is-ready-confirm .drafter-center > :not(.drafter-center-actions) {
  filter: blur(5px) brightness(0.58) saturate(0.75);
  pointer-events: none;
  user-select: none;
}

.drafter-shell.is-ready-confirm .drafter-ready-confirm-root {
  inset: 0;
  z-index: 80;
}

.drafter-shell.is-ready-confirm .drafter-center-actions {
  position: relative;
  z-index: 96;
  filter: none !important;
  pointer-events: auto;
  isolation: isolate;
}

.drafter-shell.is-ready-confirm .drafter-modal-panel--ready-confirm {
  z-index: 90;
  filter: none !important;
  pointer-events: auto !important;
}

.drafter-ready-confirm__panel {
  overflow: hidden;
}

.drafter-ready-confirm__panel > .drafter-modal-header {
  position: relative;
}

.drafter-ready-confirm__timer {
  margin-left: auto;
  min-width: 2.4rem;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(200, 170, 110, 0.4);
  background: rgba(200, 170, 110, 0.12);
  color: var(--drafter-gold, #d4b87a);
  font-size: 0.78rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-align: center;
}

.drafter-ready-confirm__body {
  display: grid;
  gap: 0.75rem;
  padding-bottom: 0.95rem;
}

.drafter-ready-confirm__status {
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.035);
  color: #c8c8d2;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
}

.drafter-ready-confirm__status.is-review {
  border-color: rgba(200, 170, 110, 0.22);
  background: rgba(200, 170, 110, 0.08);
  color: #e6d5b0;
}

.drafter-ready-confirm__status.is-waiting {
  border-color: rgba(110, 160, 220, 0.28);
  background: rgba(70, 120, 190, 0.12);
  color: #b8d4f0;
}

.drafter-ready-confirm__status.is-countdown {
  border-color: rgba(90, 180, 120, 0.32);
  background: rgba(50, 140, 90, 0.16);
  color: #c8f0d4;
}

.drafter-ready-confirm__roster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem 0.85rem;
}

.drafter-ready-confirm__side {
  padding: 0.55rem 0.55rem 0.5rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.22);
}

.drafter-ready-confirm__side--blue {
  border-color: rgba(90, 140, 220, 0.22);
  background: linear-gradient(
    180deg,
    rgba(50, 90, 160, 0.14) 0%,
    rgba(0, 0, 0, 0.18) 100%
  );
}

.drafter-ready-confirm__side--red {
  border-color: rgba(200, 90, 90, 0.22);
  background: linear-gradient(
    180deg,
    rgba(140, 50, 50, 0.14) 0%,
    rgba(0, 0, 0, 0.18) 100%
  );
}

.drafter-ready-confirm__side h3 {
  margin: 0 0 0.45rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--drafter-muted, #9a9aa3);
}

.drafter-ready-confirm__side--blue h3 {
  color: #8ec0ff;
}

.drafter-ready-confirm__side--red h3 {
  color: #f0a8a8;
}

.drafter-ready-confirm__agree {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--drafter-muted, #9a9aa3);
  padding: 0.14rem 0.42rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.drafter-ready-confirm__agree.is-on {
  color: #b8f0c8;
  background: rgba(60, 160, 90, 0.28);
}

.drafter-ready-confirm__side.is-agreed {
  box-shadow: inset 0 0 0 1px rgba(80, 180, 110, 0.22);
}

.drafter-ready-confirm__side ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.28rem;
}

.drafter-ready-confirm__side li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  padding: 0.32rem 0.4rem;
  border-radius: 0.4rem;
  background: rgba(255, 255, 255, 0.045);
}

.drafter-ready-confirm__name {
  font-size: 0.8rem;
  font-weight: 600;
  color: #e8e8ee;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drafter-ready-confirm__identity {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  gap: 0.08rem;
  line-height: 1.1;
}

.drafter-ready-confirm__riot {
  overflow: hidden;
  color: #a5a5af;
  font-size: 0.62rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drafter-ready-confirm__role {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 650;
  color: #c8c8d0;
}

.drafter-ready-confirm__role img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.drafter-ready-confirm__tip {
  display: grid;
  gap: 0.28rem;
  padding: 0.6rem 0.7rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(120, 160, 220, 0.28);
  background: rgba(60, 100, 170, 0.12);
}

.drafter-ready-confirm__tip-label {
  font-size: 0.65rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ec0ef;
}

.drafter-ready-confirm__tip p {
  margin: 0;
  color: #c8d8f0;
  font-size: 0.74rem;
  font-weight: 550;
  line-height: 1.45;
}

.drafter-ready-confirm__cmd {
  display: inline-block;
  margin: 0 0.05rem;
  padding: 0.08rem 0.38rem;
  border-radius: 0.3rem;
  border: 1px solid rgba(160, 190, 240, 0.35);
  background: rgba(10, 16, 28, 0.55);
  color: #e8f0ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.drafter-ready-confirm__warning {
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(220, 160, 70, 0.35);
  background: rgba(180, 110, 30, 0.14);
  color: #f0d6a8;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
}

@media (max-width: 520px) {
  .drafter-ready-confirm__roster {
    grid-template-columns: 1fr;
  }

  .drafter-modal-panel--ready-confirm {
    max-height: min(82vh, 40rem);
  }
}

.drafter-modal-panel__inner {
  border: 1px solid rgba(200, 170, 110, 0.28);
  border-radius: var(--drafter-radius-lg);
  background: rgba(16, 16, 18, 0.96);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  animation: drafter-modal-in 0.2s var(--drafter-ease) both;
}

.drafter-modal-panel__inner--caution {
  border-color: rgba(220, 90, 90, 0.45);
  background: rgba(28, 12, 12, 0.94);
  box-shadow:
    0 16px 48px rgba(40, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 140, 140, 0.06);
}

.drafter-modal-header--caution h2 {
  color: #f0a0a0;
}

.drafter-modal-grip--caution {
  background:
    linear-gradient(
      to bottom,
      rgba(240, 120, 120, 0.7) 0 2px,
      transparent 2px 4px,
      rgba(240, 120, 120, 0.7) 4px 6px,
      transparent 6px 8px,
      rgba(240, 120, 120, 0.7) 8px 10px
    );
}

.drafter-modal-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid rgba(42, 42, 48, 0.9);
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.drafter-modal-header:active {
  cursor: grabbing;
}

.drafter-modal-grip {
  width: 14px;
  height: 10px;
  flex-shrink: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(200, 170, 110, 0.55) 0 2px,
      transparent 2px 4px,
      rgba(200, 170, 110, 0.55) 4px 6px,
      transparent 6px 8px,
      rgba(200, 170, 110, 0.55) 8px 10px
    );
  opacity: 0.75;
}

.drafter-modal-header h2 {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--drafter-gold);
}

.drafter-modal-body {
  padding: 0.85rem 1rem 0.35rem;
}

.drafter-modal-body p {
  margin: 0;
  color: #d0d0d6;
  font-size: 0.88rem;
  line-height: 1.45;
}

.drafter-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  align-items: center;
  padding: 0.75rem 1rem 1rem;
}

.drafter-modal__waiting {
  width: 100%;
  text-align: center;
  color: var(--drafter-muted);
  font-size: 0.85rem;
}

.drafter-role-chip.is-swap {
  border-color: rgba(126, 182, 255, 0.55);
  color: #9ec4ff;
}

.drafter-role-edit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
}

.drafter-assign-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.45rem;
  padding: 0.25rem 0 0.5rem;
}

.drafter-assign-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.45rem 0.35rem;
  border: 1px solid var(--drafter-border);
  border-radius: var(--drafter-radius);
  background: var(--drafter-surface);
  color: var(--drafter-text);
  font: inherit;
  cursor: pointer;
  transition:
    border-color 0.15s var(--drafter-ease),
    background 0.15s var(--drafter-ease),
    transform 0.15s var(--drafter-ease);
}

.drafter-assign-slot:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(200, 170, 110, 0.45);
}

.drafter-assign-slot img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--drafter-radius);
  border: 1px solid var(--drafter-border-soft);
}

.drafter-assign-slot__name {
  font-size: 0.7rem;
  color: #c4c4cc;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drafter-assign-slot__role {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--drafter-gold);
}

.drafter-assign-slot.is-selected {
  border-color: var(--drafter-gold);
  background: rgba(200, 170, 110, 0.1);
}

.drafter-assign-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: center;
}

.match-chat {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 7.2rem;
  max-height: 10.5rem;
  border: 1px solid var(--drafter-border-soft, #2a2a2a);
  border-radius: var(--drafter-radius, 2px);
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.match-chat--bar {
  flex: 1 1 0;
  min-width: 12rem;
  min-height: 0;
  max-height: none;
  height: 100%;
  align-self: stretch;
}

.match-chat__tabs {
  display: flex;
  flex: 0 0 auto;
  gap: 0;
  border-bottom: 1px solid var(--drafter-border-soft, #2a2a2a);
}

.match-chat__tab {
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--drafter-muted, #8a8a94);
  font: inherit;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.22rem 0.3rem;
  cursor: pointer;
}

.match-chat__tab.is-active {
  color: var(--drafter-gold, #c8aa6e);
  background: rgba(200, 170, 110, 0.08);
}

.match-chat__tab--blue.is-active {
  color: var(--drafter-blue-text, #7eb6ff);
  background: rgba(30, 130, 255, 0.1);
}

.match-chat__tab--red.is-active {
  color: var(--drafter-red-text, #ff8a8a);
  background: rgba(232, 64, 87, 0.1);
}

.match-chat__tab:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.match-chat__list {
  flex: 1 1 0;
  min-height: 0;
  height: 0;
  overflow-y: auto;
  padding: 0.28rem 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.match-chat__empty,
.match-chat__readonly {
  margin: 0;
  padding: 0.2rem 0.4rem 0.28rem;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--drafter-muted, #8a8a94);
}

.match-chat__row {
  display: flex;
  align-items: baseline;
  gap: 0.32rem;
  min-width: 0;
  line-height: 1.25;
}

.match-chat__chip {
  flex: 0 0 auto;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--drafter-muted, #8a8a94);
}

.match-chat__chip--blue {
  color: var(--drafter-blue-text, #7eb6ff);
}

.match-chat__chip--red {
  color: var(--drafter-red-text, #ff8a8a);
}

.match-chat__chip--lobby {
  color: var(--drafter-gold, #c8aa6e);
}

.match-chat__name {
  flex: 0 0 auto;
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--drafter-gold, #c8aa6e);
}

.match-chat__text {
  min-width: 0;
  font-size: 0.68rem;
  color: var(--drafter-text, #e8e8ea);
  overflow-wrap: anywhere;
}

.match-chat__form {
  display: flex;
  align-items: stretch;
  gap: 0.3rem;
  padding: 0.22rem 0.28rem;
  border-top: 1px solid var(--drafter-border-soft, #2a2a2a);
}

.match-chat__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  border-radius: var(--drafter-radius, 2px);
  background: rgba(0, 0, 0, 0.28);
  color: var(--drafter-text, #e8e8ea);
  font: inherit;
  font-size: 0.68rem;
  padding: 0.28rem 0.4rem;
}

.match-chat__input:focus {
  outline: 1px solid rgba(200, 170, 110, 0.35);
}

.match-chat__send {
  flex: 0 0 auto;
  border: 1px solid var(--drafter-border-soft, #2a2a2a);
  border-radius: var(--drafter-radius, 2px);
  background: transparent;
  color: var(--drafter-gold, #c8aa6e);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.22rem 0.5rem;
  cursor: pointer;
}

.match-chat__send:disabled {
  opacity: 0.45;
  cursor: default;
}

.match-chat--bar .match-chat__list {
  padding: 0.12rem 0.28rem;
  gap: 0.08rem;
}

.match-chat--bar .match-chat__form {
  padding: 0.1rem 0.18rem;
}

.match-chat--bar .match-chat__empty,
.match-chat--bar .match-chat__readonly {
  padding: 0.1rem 0.22rem 0.12rem;
}

.drafter-btn-ready--ghost {
  background: transparent;
  color: #c8c8d0;
  border-color: #3a3a42;
}

.drafter-btn-ready--ghost:hover:not(:disabled) {
  background: #18181c;
  color: #e8e8ea;
  border-color: #5a5a64;
}

.drafter-phase--assign .drafter-phase-label {
  color: var(--drafter-gold);
}

.drafter-pick img,
.drafter-pick-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  min-width: 0;
  aspect-ratio: auto;
  object-fit: cover;
  /* Centered splash is 16:9 with faces in the upper band — bias up so heads stay in frame. */
  object-position: center 20%;
  border-radius: 0;
  border: none;
  pointer-events: none;
}

.drafter-pick-body {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.drafter-pick .drafter-helmet {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(2.75rem, 28%, 4rem);
  height: clamp(2.75rem, 28%, 4rem);
  margin: 0;
  transform: translate(-50%, -50%);
  opacity: 0.55;
}

.drafter-pick-body:not(:has(img)) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.drafter-pick strong,
.drafter-pick-role {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  color: var(--drafter-gold);
}

.drafter-pick-meta {
  display: none;
}

.drafter-pick.is-final .drafter-pick-meta {
  display: flex;
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.35rem 0.45rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82), transparent);
  pointer-events: none;
}

.drafter-rail--red .drafter-pick.is-final .drafter-pick-meta {
  justify-content: flex-end;
  text-align: right;
}

.drafter-pick-champ {
  font-size: 0.65rem;
  color: var(--drafter-muted-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.drafter-pick.is-final .drafter-pick-name {
  color: var(--drafter-text);
  font-weight: 650;
}

.drafter-pick.is-final .drafter-pick-role {
  flex-shrink: 0;
  margin: 0 0.15rem;
}

.drafter-final-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  text-align: center;
  padding: 1.25rem 0.75rem;
  border: 1px solid var(--drafter-border-soft);
  border-radius: var(--drafter-radius);
  background: rgba(14, 14, 16, 0.55);
}

.drafter-rail--red .drafter-pick-meta {
  flex-direction: row-reverse;
}

.drafter-rail--red .drafter-pick.is-final .drafter-pick-meta {
  flex-direction: column;
}

.drafter-pick-name {
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--drafter-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drafter-pick-role {
  flex-shrink: 0;
}

.drafter-helmet {
  width: 42px;
  height: 42px;
  border-radius: var(--drafter-radius);
  border: 1px solid var(--drafter-border-soft);
  background: #161618
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%234a4a52'%3E%3Cpath d='M24 6c-8 0-14 6-14 14v6c0 4 2 8 6 10l2 8h12l2-8c4-2 6-6 6-10v-6c0-8-6-14-14-14zm0 8c3 0 5 2 5 5s-2 5-5 5-5-2-5-5 2-5 5-5z'/%3E%3C/svg%3E")
    center/70% no-repeat;
  flex-shrink: 0;
}

.drafter-bans {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.35rem;
  flex: 0 0 auto;
  margin-top: auto;
}

.drafter-ban {
  aspect-ratio: 1;
  min-height: 3.25rem;
  border: 1px solid var(--drafter-border);
  border-radius: var(--drafter-radius);
  background: var(--drafter-surface-2);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  transition:
    border-color 0.15s var(--drafter-ease),
    box-shadow 0.2s var(--drafter-ease);
}

.drafter-ban.is-active {
  border-color: rgba(200, 170, 110, 0.55);
  box-shadow: inset 0 0 0 1px rgba(200, 170, 110, 0.28);
  position: relative;
}

.drafter-rail--blue .drafter-ban.is-active {
  border-color: color-mix(in srgb, var(--drafter-blue-role) 70%, #fff 10%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--drafter-blue-role) 32%, transparent),
    0 0 12px color-mix(in srgb, var(--drafter-blue-role) 22%, transparent);
}

.drafter-rail--red .drafter-ban.is-active {
  border-color: color-mix(in srgb, var(--drafter-red-role) 70%, #fff 10%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--drafter-red-role) 32%, transparent),
    0 0 12px color-mix(in srgb, var(--drafter-red-role) 22%, transparent);
}

.drafter-ban.is-active::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  pointer-events: none;
  z-index: 2;
  animation: drafter-slot-glow 2.1s ease-in-out infinite alternate;
}

.drafter-ban.is-locked-ban > img {
  filter: grayscale(0.62) brightness(0.76);
}

.drafter-ban__mark {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.drafter-ban__mark::before,
.drafter-champ__ban-mark::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 142%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(213, 218, 226, 0.94) 9%,
    rgba(250, 251, 253, 0.98) 50%,
    rgba(213, 218, 226, 0.94) 91%,
    transparent 100%
  );
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.96), 0 0 5px rgba(225, 234, 255, 0.4);
  transform: translate(-50%, -50%) rotate(45deg) scaleX(0);
  transform-origin: center;
  animation: drafter-ban-mark-in 0.42s cubic-bezier(0.18, 0.82, 0.28, 1) both;
}

.drafter-rail--blue .drafter-ban.is-active::after {
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--drafter-blue-role) 70%, transparent),
    transparent
  );
}

.drafter-rail--red .drafter-ban.is-active::after {
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--drafter-red-role) 70%, transparent),
    transparent
  );
}

.drafter-ban.is-hover {
  border-color: rgba(200, 170, 110, 0.65);
  box-shadow: inset 0 0 0 1px rgba(200, 170, 110, 0.28);
}

.drafter-ban img.is-hover-art {
  opacity: 0.72;
  filter: saturate(0.92);
}

.drafter-ban img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.drafter-ban .drafter-helmet {
  width: 70%;
  height: 70%;
  background-size: contain;
  border: none;
}

.drafter-center {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--drafter-center);
  border: 1px solid var(--drafter-border);
  border-radius: var(--drafter-radius-lg);
  padding: 0.4rem 0.55rem 0.45rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.drafter-phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.45rem 0.4rem;
  text-align: center;
  border: 1px solid var(--drafter-border-soft);
  border-radius: var(--drafter-radius);
  background: rgba(14, 14, 16, 0.65);
  flex-shrink: 0;
  position: relative;
}

.drafter-audio {
  position: absolute;
  top: 0.28rem;
  right: 0.32rem;
  display: flex;
  align-items: center;
  gap: 0.18rem;
  height: 1.7rem;
  padding: 0 0.22rem 0 0.12rem;
  border: 1px solid var(--drafter-border-soft);
  border-radius: 3px;
  background: rgba(10, 10, 12, 0.78);
}

.drafter-audio__mute,
.drafter-audio__nudge {
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #c8aa6e;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 0.92rem;
  line-height: 1;
}

.drafter-audio__mute svg {
  width: 0.9rem;
  height: 0.9rem;
}

.drafter-audio__music {
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #c8aa6e;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.drafter-audio__music svg {
  width: 0.9rem;
  height: 0.9rem;
}

.drafter-audio__music:hover {
  color: #e8d09a;
  background: rgba(200, 170, 110, 0.1);
}

.drafter-audio__music.is-muted {
  color: #8a8a94;
}

.drafter-audio__mute:hover,
.drafter-audio__nudge:hover:not(:disabled) {
  color: #e8d09a;
  background: rgba(200, 170, 110, 0.1);
}

.drafter-audio__mute.is-muted,
.drafter-audio__nudge:disabled {
  color: #8a8a94;
}

.drafter-audio__nudge:disabled {
  cursor: default;
}

.drafter-audio__slider {
  width: 5.2rem;
  height: 0.28rem;
  margin: 0;
  accent-color: #c8aa6e;
  cursor: pointer;
}

.drafter-audio__level {
  min-width: 1.35rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #8a8a94;
  text-align: right;
}

.drafter-phase-bar {
  display: flex;
  gap: 0.35rem;
  width: min(100%, 320px);
  height: 5px;
}

.drafter-phase-bar--idle {
  opacity: 0.4;
}

.drafter-phase-bar__track {
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: #1a1a1e;
  border-radius: 2px;
}

.drafter-phase-bar__fill {
  display: block;
  height: 100%;
}

.drafter-phase-bar__track--blue .drafter-phase-bar__fill {
  background: var(--drafter-blue);
  margin-left: auto;
}

.drafter-phase-bar__track--red .drafter-phase-bar__fill {
  background: var(--drafter-red);
}

.drafter-controller-dock {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 0.55rem;
  width: min(10.5rem, 34%);
  transform: translateY(-50%);
  text-align: left;
}

.drafter-controller-dock__actions {
  display: grid;
  gap: 0.28rem;
  padding: 0.42rem;
  border: 1px solid var(--drafter-border-soft);
  border-left: 2px solid var(--drafter-gold);
  border-radius: 5px;
  background: linear-gradient(145deg, rgba(19, 21, 27, 0.96), rgba(9, 10, 14, 0.94));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.drafter-controller-dock--blue .drafter-controller-dock__actions {
  border-left-color: var(--drafter-blue);
}

.drafter-controller-dock--red .drafter-controller-dock__actions {
  border-left-color: var(--drafter-red);
}

.drafter-controller-dock__eyebrow,
.drafter-controller-overlay__kicker {
  color: var(--drafter-gold);
  font-size: 0.53rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.2;
}

.drafter-controller-dock__holder,
.drafter-controller-dock__captain {
  overflow: hidden;
  color: #b9b9c4;
  font-size: 0.58rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drafter-controller-dock__captain {
  color: #f0d58f;
}

.drafter-controller-dock--blue .drafter-controller-dock__eyebrow {
  color: #92c5ff;
}

.drafter-controller-dock--red .drafter-controller-dock__eyebrow {
  color: #ff9aa5;
}

.drafter-controller-button {
  min-height: 1.72rem;
  padding: 0.3rem 0.44rem;
  border: 1px solid rgba(200, 170, 110, 0.35);
  border-radius: 4px;
  background: rgba(200, 170, 110, 0.08);
  color: #ead7ae;
  cursor: pointer;
  font: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: left;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.drafter-controller-button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(232, 208, 154, 0.72);
  background: rgba(200, 170, 110, 0.16);
}

.drafter-controller-button:focus-visible,
.drafter-controller-overlay button:focus-visible,
.drafter-controller-notice button:focus-visible {
  outline: 2px solid #f0d58f;
  outline-offset: 2px;
}

.drafter-controller-button:disabled,
.drafter-controller-overlay button:disabled {
  opacity: 0.58;
  cursor: progress;
}

.drafter-controller-button--primary {
  border-color: rgba(200, 170, 110, 0.62);
  background: linear-gradient(135deg, rgba(200, 170, 110, 0.22), rgba(117, 85, 33, 0.24));
  color: #fff0c8;
}

.drafter-controller-button--captain {
  border-color: rgba(240, 213, 143, 0.72);
  background: linear-gradient(135deg, rgba(240, 213, 143, 0.24), rgba(132, 96, 35, 0.26));
  color: #ffe9ad;
}

.drafter-controller-button--quiet {
  color: #d4d4dc;
}

.drafter-controller-overlay {
  position: absolute;
  top: calc(100% + 0.38rem);
  left: 0;
  z-index: 6;
  display: grid;
  gap: 0.3rem;
  width: min(17rem, 52vw);
  padding: 0.7rem 0.78rem;
  border: 1px solid rgba(200, 170, 110, 0.56);
  border-radius: 7px;
  background: linear-gradient(145deg, rgba(24, 24, 29, 0.98), rgba(9, 10, 14, 0.98));
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: #f4f2ed;
  text-align: left;
  animation: drafter-modal-in 0.18s var(--drafter-ease) both;
}

.drafter-controller-overlay--request {
  border-color: rgba(240, 213, 143, 0.72);
}

.drafter-controller-overlay--waiting {
  border-color: rgba(121, 165, 224, 0.6);
}

.drafter-controller-overlay strong {
  font-size: 0.75rem;
  line-height: 1.25;
}

.drafter-controller-overlay p {
  margin: 0;
  color: #b8b8c2;
  font-size: 0.63rem;
  line-height: 1.4;
}

.drafter-controller-overlay button {
  min-height: 1.8rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(240, 213, 143, 0.74);
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(200, 170, 110, 0.3), rgba(117, 85, 33, 0.28));
  color: #fff0c8;
  cursor: pointer;
  font: inherit;
  font-size: 0.66rem;
  font-weight: 800;
  text-align: center;
}

.drafter-controller-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  margin-top: 0.32rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--drafter-border-soft);
  border-radius: 4px;
  background: rgba(10, 12, 16, 0.92);
  color: #c8c8d0;
  font-size: 0.58rem;
  line-height: 1.3;
}

.drafter-controller-notice button {
  flex: 0 0 auto;
  padding: 0 0.15rem;
  border: 0;
  background: transparent;
  color: #a8a8b2;
  cursor: pointer;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1;
}

.drafter-phase-label {
  margin: 0.15rem 0 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f2f2f4;
}

.drafter-phase--blue .drafter-phase-label {
  color: var(--drafter-blue-text);
}

.drafter-phase--red .drafter-phase-label {
  color: #ff8a96;
}

.drafter-phase-timer {
  margin: 0;
  font-size: clamp(1.35rem, 3.2vh, 2.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
}

.drafter-spam-protection {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  width: max-content;
  max-width: 100%;
  margin-top: 0.12rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid rgba(200, 170, 110, 0.5);
  border-radius: 4px;
  background: rgba(8, 10, 14, 0.92);
  color: #c8aa6e;
  font-size: 0.52rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.07em;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
}

.drafter-spam-protection--blue {
  border-color: rgba(68, 158, 255, 0.55);
  color: #91c7ff;
}

.drafter-spam-protection--red {
  border-color: rgba(255, 84, 100, 0.55);
  color: #ff9ca5;
}

.drafter-spam-protection strong {
  color: #f3f4f6;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.drafter-phase-timer--soft {
  font-size: 1.65rem;
  color: #c8c8d0;
}

.drafter-phase.is-urgent .drafter-phase-timer {
  color: var(--drafter-red-text);
  animation: drafter-pulse 1s ease-in-out infinite;
}

.drafter-phase-wait {
  position: relative;
  margin-top: 0.35rem;
  min-width: 11rem;
  padding: 0.55rem 1.15rem 0.7rem;
  border: 1px solid var(--drafter-border);
  border-radius: var(--drafter-radius);
  background: var(--drafter-surface);
  color: var(--drafter-gold);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.drafter-phase-wait::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 42%;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(200, 220, 255, 0.95),
    transparent
  );
  animation: drafter-wait-shimmer 1.8s ease-in-out infinite;
}

.drafter-phase-wait.is-blue {
  color: #9ec4ff;
}

.drafter-phase-wait.is-blue::after {
  background: linear-gradient(90deg, transparent, #7eb6ff, transparent);
}

.drafter-phase-wait.is-red {
  color: #ff9aa4;
}

.drafter-phase-wait.is-red::after {
  background: linear-gradient(90deg, transparent, #ff7a88, transparent);
}

.drafter-phase-hint {
  margin: 0.1rem 0 0;
  max-width: 28rem;
  font-size: 0.7rem;
  line-height: 1.3;
  color: var(--drafter-muted-2);
}

.drafter-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
  min-width: 0;
  padding: 0.15rem 0;
  position: relative;
  z-index: 3;
}

.drafter-filters__roles {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
}

.drafter-filters button,
.drafter-nav-tool {
  border: 1px solid var(--drafter-border);
  background: #141416;
  color: #c0c0c8;
  border-radius: var(--drafter-radius);
  padding: 0;
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    border-color 0.12s var(--drafter-ease),
    background 0.12s var(--drafter-ease),
    color 0.12s var(--drafter-ease);
}

.drafter-filters__roles button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 2.5rem;
  padding: 0 0.65rem;
  white-space: nowrap;
}

.drafter-filters__roles button img {
  width: 1rem;
  height: 1rem;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.92;
}

.drafter-filters button:hover,
.drafter-nav-tool:hover {
  border-color: #4a4a52;
  color: #fff;
  background: #1a1a1e;
}

.drafter-filters button.is-active {
  border-color: #5a5a64;
  background: #1c1c20;
  color: #fff;
}

.drafter-filters.is-searching .drafter-filters__roles button {
  opacity: 0.55;
}

.drafter-filters.is-searching .drafter-filters__roles button:hover {
  opacity: 1;
}

.drafter-filters__search {
  position: relative;
  flex: 1 1 10rem;
  min-width: 8rem;
  max-width: 18rem;
  height: 2.5rem;
}

.drafter-filters__search input {
  width: 100%;
  height: 100%;
  border: 1px solid var(--drafter-border);
  background: #0e0e10;
  color: var(--drafter-text);
  border-radius: var(--drafter-radius);
  padding: 0 0.75rem 0 2.1rem;
  font: inherit;
  font-size: 0.85rem;
  box-sizing: border-box;
}

.drafter-filters__search input::placeholder {
  color: var(--drafter-muted-2);
  text-transform: lowercase;
}

.drafter-filters__search input:focus {
  outline: none;
  border-color: rgba(200, 170, 110, 0.55);
}

.drafter-filters__search-icon {
  position: absolute;
  left: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.95rem;
  height: 0.95rem;
  opacity: 0.45;
  pointer-events: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--drafter-muted);
}

.drafter-filters__tools {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  flex: 0 0 auto;
  margin-left: auto;
}

.drafter-nav-tool {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}

.drafter-nav-tool:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.drafter-nav-tool svg {
  width: 1.15rem;
  height: 1.15rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.drafter-filters input {
  flex: 1;
  min-width: 140px;
  border: 1px solid var(--drafter-border);
  background: #0e0e10;
  color: var(--drafter-text);
  border-radius: var(--drafter-radius);
  padding: 0.35rem 0.55rem;
  font: inherit;
}

.drafter-filters input:focus {
  outline: none;
  border-color: rgba(200, 170, 110, 0.55);
}

.drafter-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(100%, calc(var(--drafter-champ-size, 64px) + 0.75rem)), 1fr)
  );
  grid-auto-rows: max-content;
  gap: var(--drafter-grid-gap, 12px);
  overflow: auto;
  /* Keep the scroll viewport sized by the board, not by the full pool's content. */
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  max-height: none;
  padding: 0.15rem 0.2rem 0.15rem 0.15rem;
  box-sizing: border-box;
  scrollbar-gutter: stable;
  grid-auto-flow: row;
  align-content: start;
  align-items: start;
  justify-items: stretch;
}

.drafter-champ {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem;
  border: 1px solid var(--drafter-border-soft);
  border-radius: var(--drafter-radius);
  background: rgba(16, 16, 18, 0.55);
  color: #c0c0c8;
  font: inherit;
  font-size: 0.62rem;
  cursor: pointer;
  height: auto;
  align-self: start;
  transition:
    border-color 0.12s var(--drafter-ease),
    background 0.12s var(--drafter-ease);
}

.drafter-champ:hover:not(:disabled):not(.is-taken) {
  border-color: rgba(200, 170, 110, 0.45);
  background: rgba(200, 170, 110, 0.06);
}

.drafter-champ img {
  width: var(--drafter-champ-size, 64px);
  height: var(--drafter-champ-size, 64px);
  max-width: 100%;
  flex: 0 0 auto;
  display: block;
  object-fit: cover;
  border-radius: var(--drafter-radius);
  border: 1px solid rgba(42, 42, 48, 0.9);
}

.drafter-champ.is-banned img {
  filter: grayscale(0.72) brightness(0.68);
}

.drafter-champ__ban-mark {
  position: absolute;
  top: 0.18rem;
  left: 50%;
  width: var(--drafter-champ-size, 64px);
  max-width: calc(100% - 0.4rem);
  aspect-ratio: 1;
  z-index: 2;
  pointer-events: none;
  transform: translateX(-50%);
}

.drafter-champ.is-selected {
  border-color: var(--drafter-gold);
  background: rgba(200, 170, 110, 0.12);
  box-shadow:
    inset 0 0 0 1px rgba(200, 170, 110, 0.4),
    inset 0 0 12px rgba(200, 170, 110, 0.12);
}

.drafter-champ:focus-visible {
  outline: 2px solid rgba(200, 170, 110, 0.85);
  outline-offset: -2px;
}

.drafter-champ.is-taken,
.drafter-champ:disabled {
  opacity: 0.32;
  cursor: not-allowed;
  transform: none;
}

.drafter-champ:disabled:not(.is-taken) {
  opacity: 1;
  cursor: not-allowed;
}

.drafter-champ.is-taken.is-banned {
  opacity: 0.62;
}

.drafter-center-actions {
  --drafter-action-bar-height: 7.25rem;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  margin-top: auto;
  flex-shrink: 0;
  width: 100%;
  min-height: var(--drafter-action-bar-height);
  height: var(--drafter-action-bar-height);
  max-height: var(--drafter-action-bar-height);
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--drafter-border) 80%, var(--drafter-gold) 20%);
  border-radius: var(--drafter-radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 40%),
    rgba(14, 14, 16, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 28px rgba(0, 0, 0, 0.32);
  position: relative;
  z-index: 6;
  isolation: isolate;
  overflow: visible;
}

.drafter-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.4rem;
  flex: 0 1 54%;
  min-width: 16rem;
  max-width: 54%;
  min-height: 0;
  padding: 0.4rem 0.48rem;
  overflow: hidden;
  border-right: 1px solid var(--drafter-border);
  background: rgba(10, 10, 12, 0.45);
}

.drafter-toolbar__top {
  display: grid;
  grid-template-columns: 5.8rem minmax(0, 1fr);
  gap: 0.4rem;
  flex: 0 0 2.85rem;
  min-height: 2.85rem;
  height: 2.85rem;
}

.drafter-toolbar__restart-slot,
.drafter-toolbar__primary-slot {
  min-width: 0;
  min-height: 2.85rem;
  height: 2.85rem;
}

.drafter-toolbar__restart-slot {
  display: flex;
  align-items: stretch;
}

.drafter-toolbar__restart-slot .drafter-btn-restart {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  align-self: stretch;
}

.drafter-toolbar__primary-slot {
  overflow: hidden;
}

.drafter-toolbar__primary-slot > .drafter-cta {
  flex: 0 0 auto !important;
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 2.85rem;
  height: 2.85rem;
}

.drafter-toolbar__secondary {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.drafter-toolbar__main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  align-content: flex-start;
  justify-content: stretch;
  gap: 0.38rem;
  overflow: auto;
}

.drafter-toolbar__main > .drafter-btn-restart {
  flex: 0 1 auto;
  align-self: auto;
  min-height: 2.35rem;
}

.drafter-center-actions .drafter-btn-ready,
.drafter-center-actions .drafter-btn-restart {
  min-width: 0;
  height: auto;
  min-height: 2.7rem;
  padding: 0.45rem 0.8rem;
  font-size: clamp(0.74rem, 1.15vw, 0.9rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 4px;
  white-space: nowrap;
  line-height: 1.1;
}

.drafter-center-actions .drafter-btn-restart {
  flex: 0 0 5.8rem;
  align-self: stretch;
  padding: 0.4rem 0.55rem;
}

.drafter-toolbar__main > .drafter-btn-ready,
.drafter-toolbar__assign-actions > .drafter-btn-ready {
  flex: 1 1 7rem;
}

.drafter-toolbar__primary {
  flex: 1.45 1 8.5rem !important;
  font-size: clamp(0.82rem, 1.35vw, 1.02rem) !important;
}

.drafter-toolbar.is-ready .drafter-toolbar__main > .drafter-btn-ready,
.drafter-toolbar.is-wait .drafter-toolbar__main > .drafter-btn-ready {
  flex: 1 1 100%;
  min-height: 3.2rem;
  font-size: clamp(0.86rem, 1.4vw, 1.05rem);
}

.drafter-toolbar.is-done .drafter-toolbar__status,
.drafter-toolbar.is-wait .drafter-toolbar__status {
  flex: 1 1 100%;
  min-height: 3.1rem;
  font-size: 0.8rem;
}

.drafter-toolbar__pick,
.drafter-toolbar__tip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: auto;
  min-height: 2.7rem;
  min-width: 0;
  max-width: none;
  padding: 0.28rem 0.5rem 0.28rem 0.28rem;
  border: 1px solid rgba(200, 170, 110, 0.42);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(200, 170, 110, 0.12), rgba(200, 170, 110, 0.04)),
    rgba(18, 18, 20, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  flex: 1 1 8.5rem;
}

.drafter-toolbar__tip {
  flex: 1 1 100%;
  min-height: 2.45rem;
  order: 5;
}

.drafter-toolbar__pick,
.drafter-toolbar__placeholder {
  order: 1;
}

.drafter-toolbar__main > .drafter-cta--primary {
  order: 2;
  flex: 1.6 1 10rem;
  flex-shrink: 0;
}

.drafter-toolbar__main > .drafter-cta--side,
.drafter-toolbar__main > .drafter-btn-ready--ghost {
  order: 3;
}

.drafter-toolbar__main > .drafter-role-row {
  order: 4;
  flex: 1 1 100%;
}

.drafter-toolbar__tip .drafter-btn-ready {
  flex: 0 0 auto;
  min-height: 2.1rem;
  padding: 0.3rem 0.65rem;
  font-size: 0.7rem;
}

.drafter-toolbar__pick img,
.drafter-toolbar__tip img {
  width: 34px;
  height: 34px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
}

.drafter-toolbar__pick span,
.drafter-toolbar__tip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 650;
  color: #e8d09a;
}

.drafter-toolbar__placeholder,
.drafter-toolbar__status {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 2.7rem;
  padding: 0 0.35rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--drafter-muted);
  flex: 1 1 8rem;
}

.drafter-toolbar__assign-actions {
  display: flex;
  flex: 1 1 100%;
  align-items: stretch;
  gap: 0.38rem;
  min-height: 2.55rem;
}

.drafter-center-actions .drafter-role-row {
  flex: 1 1 100%;
  flex-wrap: nowrap;
  justify-content: stretch;
  align-items: stretch;
  gap: 0.28rem;
}

.drafter-center-actions .drafter-role-chip {
  flex: 1 1 0;
  min-width: 0;
  min-height: 2.35rem;
  height: auto;
  padding: 0 0.35rem;
  font-size: 0.68rem;
}

.drafter-center-actions .drafter-waiting-turn {
  margin: 0;
  text-align: left;
  font-size: 0.76rem;
  max-width: none;
}

.drafter-center-actions .drafter-toolbar__main > .drafter-btn-restart {
  flex: 0 1 auto;
  align-self: auto;
}

.drafter-center-actions .match-chat {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  height: 100%;
  position: relative;
  z-index: 2;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.drafter-btn-restart {
  min-width: 0;
  padding: 0.55rem 0.85rem;
  border: 1px solid rgba(220, 90, 90, 0.65);
  border-radius: var(--drafter-radius);
  background: rgba(48, 16, 16, 0.92);
  color: #f0a0a0;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.12s var(--drafter-ease),
    color 0.12s var(--drafter-ease),
    border-color 0.12s var(--drafter-ease),
    transform 0.1s var(--drafter-ease);
}

.drafter-btn-restart:hover:not(:disabled) {
  background: rgba(72, 22, 22, 0.95);
  color: #ffc4c4;
  border-color: rgba(255, 120, 120, 0.85);
}

.drafter-btn-restart:active:not(:disabled) {
  transform: scale(0.98);
}

.drafter-btn-restart.has-pending {
  border-color: rgba(200, 170, 110, 0.62);
  background: rgba(54, 42, 20, 0.9);
  color: #e9d5a7;
}

.drafter-btn-restart.has-pending:hover:not(:disabled) {
  border-color: var(--drafter-gold, #d4b87a);
  background: rgba(74, 56, 24, 0.96);
  color: #ffe6ae;
}

.drafter-btn-restart:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.drafter-btn-ready--danger {
  border-color: rgba(220, 90, 90, 0.75);
  background: rgba(56, 18, 18, 0.95);
  color: #ffb0b0;
}

.drafter-btn-ready--danger:hover:not(:disabled) {
  background: rgba(78, 24, 24, 0.98);
  color: #ffd0d0;
  border-color: rgba(255, 130, 130, 0.9);
}

.drafter-opgg-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: stretch;
  gap: 0.28rem;
  width: 100%;
  margin: 0.15rem 0 0.35rem;
}

.drafter-rail--red .drafter-opgg-links {
  justify-content: flex-end;
}

.drafter-opgg-btn {
  min-width: 0;
  flex: 1 1 auto;
  padding: 0.32rem 0.55rem;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-align: center;
  line-height: 1.2;
}

.drafter-btn-ready {
  min-width: 9.5rem;
  padding: 0.65rem 1.6rem;
  border: 1px solid var(--drafter-gold);
  border-radius: var(--drafter-radius);
  background: #151515;
  color: var(--drafter-gold);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition:
    background 0.12s var(--drafter-ease),
    color 0.12s var(--drafter-ease),
    border-color 0.12s var(--drafter-ease),
    transform 0.1s var(--drafter-ease),
    box-shadow 0.18s var(--drafter-ease);
}

.drafter-btn-ready:hover:not(:disabled) {
  background: #1c1a16;
  color: #e0c48a;
  border-color: #e0c48a;
  box-shadow: 0 0 0 1px rgba(200, 170, 110, 0.18), 0 6px 18px rgba(0, 0, 0, 0.35);
}

.drafter-btn-ready:active:not(:disabled) {
  transform: scale(0.98);
}

.drafter-btn-ready.is-armed {
  background: rgba(200, 170, 110, 0.14);
  color: #e8d09a;
}

.drafter-btn-ready:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.drafter-modal-actions > .drafter-btn-ready {
  flex: 1 1 8rem;
  min-width: 0;
  min-height: 2.45rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.78rem;
  letter-spacing: 0.035em;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
}

.drafter-modal-actions > .drafter-btn-ready--request-main {
  flex-basis: 100%;
}

.drafter-modal-actions > .drafter-modal__waiting {
  flex: 1 1 100%;
}

.drafter-change-picker__actions > .drafter-btn-ready {
  flex: 1 1 9rem;
  min-width: 0;
  min-height: 2.55rem;
  padding: 0.5rem 0.8rem;
  font-size: 0.8rem;
  letter-spacing: 0.035em;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
}

.drafter-modal-actions > .drafter-btn-ready--ghost,
.drafter-change-picker__actions > .drafter-btn-ready--ghost {
  border-color: #4a4a54;
  background: rgba(255, 255, 255, 0.025);
  color: #d0d0d8;
}

.drafter-modal-actions > .drafter-btn-ready--ghost:hover:not(:disabled),
.drafter-change-picker__actions > .drafter-btn-ready--ghost:hover:not(:disabled) {
  border-color: #777782;
  background: rgba(255, 255, 255, 0.08);
  color: #f0f0f2;
}

.drafter-modal-actions > .drafter-btn-ready--danger,
.drafter-change-picker__actions > .drafter-btn-ready--danger {
  border-color: rgba(220, 90, 90, 0.75);
  background: rgba(56, 18, 18, 0.95);
  color: #ffb0b0;
}

.drafter-modal-actions > .drafter-btn-ready--danger:hover:not(:disabled),
.drafter-change-picker__actions > .drafter-btn-ready--danger:hover:not(:disabled) {
  border-color: rgba(255, 130, 130, 0.9);
  background: rgba(78, 24, 24, 0.98);
  color: #ffd0d0;
}

.drafter-modal-actions > .drafter-btn-ready--request-rewind,
.drafter-change-picker__actions > .drafter-btn-ready--request-rewind {
  border-color: rgba(220, 130, 110, 0.46);
  color: #e7b4a8;
}

.drafter-modal-actions > .drafter-btn-ready--request-decline {
  border-color: rgba(220, 100, 100, 0.38);
  background: rgba(75, 24, 24, 0.18);
  color: #e8b0b0;
}

.drafter-modal-actions > .drafter-btn-ready--request-decline:hover:not(:disabled) {
  border-color: rgba(255, 130, 130, 0.72);
  background: rgba(100, 30, 30, 0.38);
  color: #ffd0d0;
}

.drafter-modal-actions > .drafter-btn-ready--request-quiet {
  border-color: transparent;
  background: transparent;
  color: var(--drafter-muted, #9a9aa3);
  font-size: 0.72rem;
}

.drafter-modal-actions > .drafter-btn-ready--request-quiet:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #eee;
}

.drafter-modal-actions > .drafter-btn-ready:focus-visible,
.drafter-change-picker__actions > .drafter-btn-ready:focus-visible,
.drafter-request-reopen:focus-visible {
  outline: 2px solid var(--drafter-gold, #d4b87a);
  outline-offset: 2px;
}

.drafter-hidden-request-actions {
  position: absolute;
  top: 45%;
  right: calc(var(--drafter-rail-col) + 0.55rem);
  z-index: 82;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: min(22rem, calc(100% - var(--drafter-rail-col) * 2 - 1.4rem));
  transform: translateY(-50%);
  pointer-events: none;
}

.drafter-request-reopen {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 2.8rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(200, 170, 110, 0.62);
  border-radius: var(--drafter-radius-lg);
  background: rgba(18, 17, 15, 0.98);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), inset 0 1px rgba(255, 255, 255, 0.05);
  color: #e9d5a7;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  transition:
    border-color 0.14s var(--drafter-ease),
    background 0.14s var(--drafter-ease),
    transform 0.14s var(--drafter-ease),
    box-shadow 0.14s var(--drafter-ease);
}

.drafter-request-reopen:hover {
  border-color: var(--drafter-gold, #d4b87a);
  background: rgba(32, 28, 20, 0.99);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(200, 170, 110, 0.16);
  transform: translateY(-1px);
}

.drafter-request-reopen--undo {
  border-color: rgba(220, 120, 105, 0.62);
  color: #f0c0b8;
}

.drafter-request-reopen__icon {
  display: grid;
  width: 1.45rem;
  height: 1.45rem;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.88rem;
}

.drafter-request-reopen strong {
  padding: 0.28rem 0.5rem;
  border: 1px solid rgba(200, 170, 110, 0.32);
  border-radius: 4px;
  color: var(--drafter-gold, #d4b87a);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* —— Rotating border CTA (drafter.lol draft-button) —— */
.drafter-cta {
  --drafter-cta-pad: 2px;
  position: relative;
  isolation: isolate;
  display: flex;
  flex: 1 1 10rem;
  min-width: 8rem;
  min-height: 2.85rem;
  height: 2.85rem;
  border-radius: 6px;
  padding: var(--drafter-cta-pad);
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  z-index: 1;
}

.drafter-cta--primary {
  flex: 1.6 1 11rem;
  min-width: 9.5rem;
}

.drafter-cta--side {
  flex: 0 1 8.5rem;
  min-width: 7rem;
}

.drafter-cta--fill,
.drafter-cta--grow {
  flex: 1 1 10rem;
}

.drafter-cta__beam {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 220%;
  height: 220%;
  margin: 0;
  transform: translate(-50%, -50%);
  filter: blur(1.25px);
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    var(--drafter-blue-role, #3e7bfa) 22%,
    var(--drafter-red-role, #f52547) 48%,
    var(--drafter-blue-role, #3e7bfa) 74%,
    transparent 100%
  );
  animation: drafter-cta-spin 2s linear infinite;
  pointer-events: none;
  will-change: transform;
}

.drafter-cta--dual .drafter-cta__beam {
  animation-duration: 2s;
}

.drafter-cta--waiting .drafter-cta__beam {
  filter: blur(1px);
  background: conic-gradient(
    from 0deg,
    #1a1a1e 0%,
    #ececf0 12%,
    #1a1a1e 24%,
    #1a1a1e 100%
  );
  animation-duration: 3s;
}

.drafter-cta--select .drafter-cta__beam {
  filter: blur(1.1px);
  background: conic-gradient(
    from 0deg,
    #1a1a1e 0%,
    #dbc6a7 28%,
    #1a1a1e 48%,
    #1a1a1e 100%
  );
  animation-duration: 5s;
}

.drafter-cta--blue .drafter-cta__beam {
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    var(--drafter-blue-role, #3e7bfa) 18%,
    color-mix(in srgb, var(--drafter-blue-role, #3e7bfa) 55%, #fff) 40%,
    var(--drafter-blue-role, #3e7bfa) 62%,
    transparent 100%
  );
  animation-duration: 2.2s;
}

.drafter-cta--red .drafter-cta__beam {
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    var(--drafter-red-role, #f52547) 18%,
    color-mix(in srgb, var(--drafter-red-role, #f52547) 55%, #fff) 40%,
    var(--drafter-red-role, #f52547) 62%,
    transparent 100%
  );
  animation-duration: 2.2s;
}

.drafter-cta--idle .drafter-cta__beam {
  opacity: 0.45;
  animation-duration: 6s;
}

.drafter-cta__inner {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 42%),
    #121214;
  overflow: hidden;
}

.drafter-cta__inner > .drafter-btn-ready--beam,
.drafter-cta__inner > .drafter-cta__status {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  height: 100%;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.drafter-btn-ready--beam {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.35rem 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--drafter-gold, #c8aa6e);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drafter-btn-ready--beam:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #f0e2c0;
}

.drafter-btn-ready--beam:disabled {
  opacity: 0.55;
  color: #a8a8b0;
}

.drafter-cta__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.35rem 0.7rem;
  font: inherit;
  font-size: clamp(0.72rem, 1.15vw, 0.9rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: #e8e8ea;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drafter-cta--blue .drafter-cta__status,
.drafter-cta--blue .drafter-btn-ready--beam:disabled {
  color: var(--drafter-blue-text, #7eb6ff);
}

.drafter-cta--red .drafter-cta__status,
.drafter-cta--red .drafter-btn-ready--beam:disabled {
  color: var(--drafter-red-text, #ff8a8a);
}

.drafter-cta--waiting .drafter-cta__status,
.drafter-cta--waiting .drafter-btn-ready--beam {
  color: #c8c8d0;
}

.drafter-cta--select .drafter-btn-ready--beam:not(:disabled) {
  color: #e8d09a;
}

.drafter-toolbar__main > .drafter-cta,
.drafter-toolbar__assign-actions > .drafter-cta {
  align-self: stretch;
}

.drafter-toolbar.is-ready .drafter-toolbar__main > .drafter-cta,
.drafter-toolbar.is-wait .drafter-toolbar__main > .drafter-cta,
.drafter-toolbar.is-done .drafter-toolbar__main > .drafter-cta,
.drafter-toolbar.is-lock .drafter-toolbar__main > .drafter-cta--primary,
.drafter-toolbar.is-suggest .drafter-toolbar__main > .drafter-cta--primary,
.drafter-toolbar.is-assign .drafter-toolbar__main > .drafter-cta--primary {
  flex: 1 1 100%;
  min-height: 2.85rem;
}

.drafter-toolbar.is-lock .drafter-toolbar__main > .drafter-cta--primary,
.drafter-toolbar.is-suggest .drafter-toolbar__main > .drafter-cta--primary {
  flex: 1.6 1 10rem;
}

.drafter-toolbar.is-ready .drafter-toolbar__main > .drafter-cta .drafter-btn-ready--beam,
.drafter-toolbar.is-wait .drafter-toolbar__main > .drafter-cta .drafter-cta__status,
.drafter-toolbar.is-done .drafter-toolbar__main > .drafter-cta .drafter-cta__status {
  font-size: clamp(0.82rem, 1.3vw, 1.02rem);
}

.drafter-role-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
}

.drafter-role-chip {
  min-width: 4.4rem;
  border: 1px solid #2e2e34;
  background: #141416;
  color: #e0e0e6;
  border-radius: var(--drafter-radius);
  padding: 0.4rem 0.55rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition:
    border-color 0.12s var(--drafter-ease),
    background 0.12s var(--drafter-ease),
    color 0.12s var(--drafter-ease),
    transform 0.1s var(--drafter-ease);
}

.drafter-role-chip:hover:not(:disabled) {
  border-color: rgba(200, 170, 110, 0.45);
}

.drafter-role-chip:active:not(:disabled) {
  transform: scale(0.97);
}

.drafter-role-chip.is-selected {
  border-color: var(--drafter-gold);
  background: var(--drafter-gold-soft);
  color: #e8d09a;
}

.drafter-role-chip.is-used,
.drafter-role-chip:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}

.drafter-lock-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
}

.drafter-team-tip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin-bottom: 0.15rem;
}

.drafter-team-tip-chip {
  border-color: rgba(200, 170, 110, 0.45);
  background: rgba(200, 170, 110, 0.07);
}

.drafter-tip-toast {
  position: absolute;
  top: 0.45rem;
  /* Sit just left of the red rail, floating over the center panel. */
  right: calc(var(--drafter-rail-col) + 0.55rem);
  z-index: 24;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: max-content;
  max-width: min(17.5rem, calc(100% - var(--drafter-rail-col) - 1.4rem));
  padding: 0.5rem 0.6rem;
  border-radius: var(--drafter-radius-lg);
  border: 1px solid rgba(200, 170, 110, 0.55);
  background: rgba(14, 14, 16, 0.96);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.25);
  animation: drafter-tip-toast-in 0.28s var(--drafter-ease) both;
  pointer-events: auto;
}

@keyframes drafter-tip-toast-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.drafter-tip-toast__body {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.drafter-tip-toast__body img {
  width: 36px;
  height: 36px;
  border-radius: var(--drafter-radius);
  object-fit: cover;
  border: 1px solid rgba(200, 170, 110, 0.5);
  flex-shrink: 0;
}

.drafter-tip-toast__body strong {
  display: block;
  font-size: 0.86rem;
  color: #f0e2c0;
}

.drafter-tip-toast__body span {
  display: block;
  font-size: 0.72rem;
  color: var(--drafter-muted);
}

.drafter-tip-toast__actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.drafter-tip-toast__actions .drafter-btn-ready {
  min-width: 0;
  padding: 0.35rem 0.7rem;
  font-size: 0.72rem;
}

.drafter-tip-toast__close {
  width: 1.6rem;
  height: 1.6rem;
  border: none;
  border-radius: var(--drafter-radius);
  background: transparent;
  color: var(--drafter-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.drafter-tip-toast__close:hover {
  color: #eee;
  background: rgba(255, 255, 255, 0.06);
}

.drafter-btn-suggest {
  background: rgba(200, 170, 110, 0.16);
  color: #e8d09a;
  border-color: rgba(200, 170, 110, 0.55);
}

.drafter-btn-suggest:hover:not(:disabled) {
  background: rgba(200, 170, 110, 0.28);
  color: #f2e4c0;
  border-color: rgba(200, 170, 110, 0.75);
}

.drafter-suggest-hint {
  flex: 1 0 100%;
  margin: 0;
  text-align: center;
  color: var(--drafter-muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.drafter-selection {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 10rem;
  padding: 0.4rem 0.65rem;
  border-radius: var(--drafter-radius);
  border: 1px solid var(--drafter-border);
  background: var(--drafter-surface-2);
  animation: drafter-fade-in 0.18s var(--drafter-ease) both;
}

.drafter-selection.is-armed {
  border-color: rgba(200, 170, 110, 0.65);
  box-shadow: inset 0 0 0 1px rgba(200, 170, 110, 0.2);
  background: rgba(200, 170, 110, 0.08);
}

.drafter-selection.is-armed img {
  border-color: var(--drafter-gold);
}

.drafter-selection img {
  width: 38px;
  height: 38px;
  border-radius: var(--drafter-radius);
  object-fit: cover;
  border: 1px solid var(--drafter-border);
}

.drafter-selection strong {
  display: block;
  font-size: 0.88rem;
}

.drafter-selection span {
  font-size: 0.72rem;
  color: var(--drafter-muted);
}

.drafter-selection--empty {
  color: var(--drafter-muted);
  font-size: 0.82rem;
  justify-content: center;
  min-height: 3rem;
}

.drafter-waiting-turn {
  margin: 0;
  text-align: center;
  color: var(--drafter-muted);
  font-size: 0.85rem;
}

@keyframes drafter-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.72;
  }
}

@keyframes drafter-rotating {
  0% {
    --drafter-r: 0deg;
  }
  100% {
    --drafter-r: 360deg;
  }
}

@keyframes drafter-cta-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes drafter-slot-glow {
  0% {
    opacity: 0.72;
  }
  100% {
    opacity: 1;
  }
}

@keyframes drafter-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes drafter-modal-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes drafter-ring-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(200, 170, 110, 0.35);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(200, 170, 110, 0.55);
  }
}

@keyframes drafter-ban-mark-in {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(45deg) scaleX(0);
  }
  72% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(45deg) scaleX(1.06);
  }
  100% {
    opacity: 0.96;
    transform: translate(-50%, -50%) rotate(45deg) scaleX(1);
  }
}

@keyframes drafter-wait-shimmer {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .drafter-modal-root,
  .drafter-modal-panel__inner,
  .drafter-selection,
  .drafter-champ,
  .drafter-pick,
  .drafter-ban,
  .drafter-ban__mark::before,
  .drafter-champ__ban-mark::before,
  .drafter-btn-ready,
  .drafter-role-chip,
  .drafter-assign-slot {
    animation: none !important;
    transition: none !important;
  }

  .drafter-phase.is-urgent .drafter-phase-timer,
  .drafter-pick.is-undo-target,
  .drafter-ban.is-undo-target,
  .drafter-phase-wait::after {
    animation: none !important;
  }

  .drafter-cta__beam {
    animation: none !important;
  }

  .drafter-pick.is-active::after,
  .drafter-ban.is-active::after {
    animation: none !important;
    opacity: 0.9;
  }

  .drafter-champ:hover:not(:disabled):not(.is-taken),
  .drafter-pick.is-editable:hover,
  button.drafter-ban.is-editable:hover {
    transform: none;
  }
}

@media (max-width: 900px) {
  .drafter-site-root {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .drafter-site-frame {
    overflow: visible;
  }

  .drafter-page {
    overflow: visible;
    min-height: calc(100svh - var(--header-offset));
  }

  .drafter-viewport,
  .drafter-scale-frame,
  .drafter-scale-stage,
  .drafter-shell {
    overflow: visible;
    height: auto;
    min-height: 0;
  }

  /* Draft + match mirror stay viewport-tall; frame scrolls only to reveal footer. */
  .drafter-site-root:has(.drafter-page),
  .drafter-site-root:has(.match-flow-page) {
    height: 100svh;
    height: 100dvh;
    max-height: 100svh;
    max-height: 100dvh;
    overflow: hidden;
  }

  .drafter-site-root:has(.drafter-page) .drafter-site-frame--reveal-footer,
  .drafter-site-root:has(.match-flow-page) .drafter-site-frame--reveal-footer {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .drafter-site-root:has(.drafter-page) .drafter-site-main,
  .drafter-site-root:has(.match-flow-page) .drafter-site-main {
    min-height: 100%;
  }

  .drafter-page,
  .drafter-page .drafter-viewport,
  .drafter-page .drafter-scale-frame,
  .drafter-page .drafter-scale-stage,
  .drafter-page .drafter-shell,
  .match-flow-page,
  .match-flow-page .drafter-viewport,
  .match-flow-page .drafter-scale-frame,
  .match-flow-page .drafter-scale-stage,
  .match-flow-page .drafter-shell {
    overflow: hidden;
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
  }

  .drafter-board {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .drafter-meta {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "blue red"
      "center center";
    row-gap: 0.35rem;
  }

  .drafter-meta__side--blue {
    grid-area: blue;
  }

  .drafter-meta__side--red {
    grid-area: red;
  }

  .drafter-meta__center {
    grid-area: center;
  }

  .drafter-tip-toast {
    top: 0.35rem;
    right: 0.45rem;
    max-width: min(17rem, calc(100% - 0.9rem));
  }

  .drafter-rail--blue {
    order: 1;
    border-left: 1px solid var(--drafter-border-soft);
    border-top: 3px solid var(--drafter-blue);
  }

  .drafter-rail--red {
    order: 2;
    border-right: 1px solid var(--drafter-border-soft);
    border-top: 3px solid var(--drafter-red);
  }

  .drafter-rail--red header h2,
  .drafter-rail--red header span {
    text-align: left;
  }

  .drafter-rail--red .drafter-opgg-links {
    justify-content: stretch;
  }

  .drafter-rail--red .drafter-pick {
    border-right: none;
    border-left: 2px solid rgba(232, 64, 87, 0.35);
  }

  .drafter-center {
    order: 3;
    overflow: visible;
  }

  .drafter-picks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
  }

  .drafter-pick {
    max-height: none;
    min-height: 4.75rem;
  }

  .drafter-filters {
    flex-wrap: wrap;
  }

  .drafter-filters__roles {
    flex-wrap: wrap;
    width: 100%;
  }

  .drafter-filters__search {
    max-width: none;
    flex: 1 1 100%;
  }

  .drafter-filters__tools {
    margin-left: 0;
  }

  .drafter-grid {
    max-height: min(42vh, 420px);
  }

  .drafter-phase-timer {
    font-size: 2rem;
  }

  .drafter-controller-dock {
    position: relative;
    top: auto;
    left: auto;
    width: min(100%, 25rem);
    transform: none;
    margin: 0.25rem auto 0;
  }

  .drafter-controller-dock__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    text-align: center;
  }

  .drafter-controller-dock__eyebrow {
    flex: 0 0 100%;
  }

  .drafter-controller-overlay {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    margin-top: 0.35rem;
  }

  .drafter-audio__slider {
    width: 3.6rem;
  }

  .drafter-modal-panel {
    width: min(20rem, calc(100% - 1rem));
    right: 0.5rem;
  }

  .drafter-modal-panel--restart {
    left: 0.5rem;
    right: auto;
  }

  .drafter-hidden-request-actions {
    right: 0.5rem;
    width: min(22rem, calc(100% - 1rem));
  }

  .drafter-change-picker {
    width: min(100% - 0.8rem, 56rem);
    max-height: min(92vh, 44rem);
  }

  .drafter-change-picker__grid {
    max-height: min(46vh, 22rem);
  }

  .drafter-center-actions {
    flex-wrap: nowrap;
  }

  .drafter-toolbar {
    max-width: 56%;
    min-width: 12.5rem;
  }

  .drafter-center-actions .drafter-btn-ready,
  .drafter-center-actions .drafter-btn-restart {
    min-height: 2.35rem;
    font-size: 0.7rem;
    padding: 0.32rem 0.55rem;
  }

  .drafter-cta {
    min-height: 2.45rem;
  }

  .drafter-cta--fill {
    min-height: 2.65rem;
  }

  .drafter-cta__status {
    font-size: 0.72rem;
    padding: 0.35rem 0.55rem;
  }

  .drafter-toolbar__pick img,
  .drafter-toolbar__tip img {
    width: 28px;
    height: 28px;
  }

  .match-chat--bar {
    min-width: 8.5rem;
  }
}

/* —— Website Match Flow Mirror (/match/[token]) —— */
.match-flow-page {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: transparent;
  color: #e8e8ea;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.match-flow-viewport {
  flex: 1 1 auto;
  min-height: 0;
}

.match-flow-shell {
  --drafter-bg: #0a0a0a;
  --drafter-surface: rgba(18, 18, 20, 0.94);
  --drafter-surface-2: rgba(16, 16, 18, 0.96);
  --drafter-border: #2a2a30;
  --drafter-border-soft: #1c1c20;
  --drafter-text: #e8e8ea;
  --drafter-muted: #8a8a94;
  --drafter-gold: #c8aa6e;
  --drafter-gold-soft: rgba(200, 170, 110, 0.14);
  --drafter-blue: #1e82ff;
  --drafter-blue-text: #7eb6ff;
  --drafter-red: #e84057;
  --drafter-red-text: #ff8a8a;
  --drafter-radius: 4px;
  --drafter-ease: cubic-bezier(0.22, 1, 0.36, 1);
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.55rem 0.85rem 0.7rem;
  box-sizing: border-box;
  color: var(--drafter-text);
  overflow: hidden;
  background: transparent;
}

/* CS inside match: identical fill to /draft (no outer padding/zoom/chrome). */
.match-flow-shell--cs {
  padding: 0;
  gap: 0;
  background: #0a0a0a;
}

.match-flow-cs-fill {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.match-flow-cs-fill > .drafter-viewport {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

.match-flow-banner--cs {
  flex-shrink: 0;
  margin: 0.45rem 0.75rem 0;
}

.match-flow-phase {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}

.match-flow-phase > .match-flow-board:not(.match-flow-board--draft) {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* Match draft: skip expensive live-board hover scale (feels laggy while polling). */
@media (hover: hover) {
  .match-flow-board .tournament-draft-board.is-live .tournament-draft-board__team:hover {
    transform: none;
    z-index: 2;
    box-shadow: none;
  }

  .match-flow-board .tournament-draft-board.is-live .tournament-draft-board__team:hover .tournament-draft-board__slot {
    background: inherit;
    border-color: inherit;
  }

  .match-flow-pool-panel .tournament-draft-pool__player.is-pickable:hover {
    transform: none;
  }
}

.match-flow-board .tournament-draft-board.is-live .tournament-draft-board__team {
  transition: border-color 0.15s ease, background 0.15s ease;
}

.match-flow-pool-panel .tournament-draft-pool__player {
  contain: layout paint style;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.match-flow-header {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--drafter-border-soft);
  border-radius: var(--drafter-radius);
  background: rgba(16, 16, 18, 0.94);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.match-flow-header__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.65rem;
}

.match-flow-header__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.match-flow-header__phase {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--drafter-gold);
  padding: 0.2rem 0.45rem;
  border: 1px solid rgba(200, 170, 110, 0.35);
  border-radius: var(--drafter-radius);
  background: var(--drafter-gold-soft);
}

.match-flow-header__staff {
  font-size: 0.72rem;
  font-weight: 600;
  color: #d4d4d8;
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--drafter-border);
  border-radius: var(--drafter-radius);
}

.match-flow-spectate {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--drafter-muted);
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--drafter-border);
  border-radius: var(--drafter-radius);
}

.match-flow-header__timer {
  margin: 0;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: var(--drafter-blue-text);
  transition: color 0.35s var(--drafter-ease);
}

.match-flow-header__timer--urgent {
  color: var(--drafter-red-text);
  animation: match-flow-timer-pulse 1s ease-in-out infinite;
}

@keyframes match-flow-timer-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.72;
  }
}

@keyframes match-flow-phase-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.match-flow-board {
  padding: 0.9rem 1rem;
  border: 1px solid var(--drafter-border);
  border-radius: var(--drafter-radius);
  background: var(--drafter-surface);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.match-flow-board--draft {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0.2rem 0.25rem 0.25rem;
  border: none;
  background: transparent;
}

.match-flow-draft-layout {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  overflow: hidden;
}

.match-flow-board__lead {
  margin: 0 0 0.85rem;
  color: var(--drafter-text);
  line-height: 1.45;
}

.match-flow-board__note {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  color: var(--drafter-muted);
  line-height: 1.4;
}

.match-flow-board__warn {
  margin: 0.65rem 0 0;
  font-size: 0.85rem;
  color: var(--drafter-red-text);
}

.match-flow-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.match-flow-cta {
  appearance: none;
  border: 1px solid rgba(200, 170, 110, 0.45);
  border-radius: var(--drafter-radius);
  background: linear-gradient(180deg, #3a3224 0%, #2a241a 100%);
  color: #f0e6d2;
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  transition:
    border-color 0.2s var(--drafter-ease),
    background 0.2s var(--drafter-ease),
    transform 0.15s var(--drafter-ease);
}

.match-flow-cta:hover:not(:disabled) {
  border-color: var(--drafter-gold);
  transform: translateY(-1px);
}

.match-flow-cta:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.match-flow-cta--gold {
  background: linear-gradient(180deg, #4a3f28 0%, #2e281c 100%);
  color: var(--drafter-gold);
}

.match-flow-cta--muted {
  border-color: var(--drafter-border);
  background: var(--drafter-surface-2);
  color: var(--drafter-text);
}

.match-flow-cta--blue {
  border-color: rgba(30, 130, 255, 0.55);
  background: linear-gradient(180deg, rgba(30, 80, 160, 0.95) 0%, rgba(18, 40, 90, 0.98) 100%);
  color: #cfe4ff;
}

.match-flow-cta--red {
  border-color: rgba(232, 64, 87, 0.55);
  background: linear-gradient(180deg, rgba(140, 40, 55, 0.95) 0%, rgba(70, 18, 28, 0.98) 100%);
  color: #ffd0d6;
}

.match-flow-cta--active {
  box-shadow: inset 0 0 0 1px currentColor;
}

.match-flow-cta--sm {
  font-size: 0.78rem;
  padding: 0.35rem 0.65rem;
}

.match-flow-draft-grid,
.match-flow-roles-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 0.75rem;
}

.match-flow-roles-grid {
  grid-template-columns: 1fr 1fr;
}

.match-flow-team {
  padding: 0.65rem 0.7rem;
  border-radius: var(--drafter-radius);
  border: 1px solid var(--drafter-border-soft);
  background: var(--drafter-surface-2);
  min-height: 8rem;
}

.match-flow-team--blue {
  border-color: rgba(30, 130, 255, 0.35);
  background: linear-gradient(160deg, rgba(30, 130, 255, 0.1), transparent 55%),
    var(--drafter-surface-2);
}

.match-flow-team--red {
  border-color: rgba(232, 64, 87, 0.35);
  background: linear-gradient(160deg, rgba(232, 64, 87, 0.1), transparent 55%),
    var(--drafter-surface-2);
}

.match-flow-team__title {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.match-flow-team--blue .match-flow-team__title {
  color: var(--drafter-blue-text);
}

.match-flow-team--red .match-flow-team__title {
  color: var(--drafter-red-text);
}

.match-flow-team__list,
.match-flow-role-list,
.match-flow-pool__list,
.match-flow-staff__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.match-flow-team__player,
.match-flow-team__empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.35rem 0.45rem;
  border-radius: var(--drafter-radius);
  background: rgba(0, 0, 0, 0.22);
  font-size: 0.88rem;
}

.match-flow-team__empty {
  color: var(--drafter-muted);
  font-style: italic;
}

.match-flow-team__player--captain {
  border: 1px solid rgba(200, 170, 110, 0.4);
}

.match-flow-team__player--turn {
  outline: 1px solid var(--drafter-gold);
}

.match-flow-team__player--flash,
.match-flow-pool__btn--flash {
  animation: match-flow-pick-flash 0.65s var(--drafter-ease);
}

@keyframes match-flow-pick-flash {
  0% {
    background: rgba(200, 170, 110, 0.45);
  }
  100% {
    background: rgba(0, 0, 0, 0.22);
  }
}

.match-flow-role-tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--drafter-gold);
}

.match-flow-pool {
  padding: 0.65rem 0.7rem;
  border: 1px solid var(--drafter-border);
  border-radius: var(--drafter-radius);
  background: #0e0e10;
}

.match-flow-pool__title {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--drafter-muted);
}

.match-flow-pool__turn {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--drafter-gold);
}

.match-flow-pool__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  text-align: left;
  appearance: none;
  border: 1px solid var(--drafter-border-soft);
  border-radius: var(--drafter-radius);
  background: var(--drafter-surface);
  color: var(--drafter-text);
  font: inherit;
  font-size: 0.86rem;
  padding: 0.4rem 0.5rem;
  cursor: pointer;
  transition:
    border-color 0.2s var(--drafter-ease),
    background 0.2s var(--drafter-ease);
}

.match-flow-pool__btn:hover:not(:disabled) {
  border-color: var(--drafter-gold);
  background: var(--drafter-gold-soft);
}

.match-flow-pool__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.match-flow-pool__btn small {
  color: var(--drafter-muted);
  font-size: 0.72rem;
}

.match-flow-pool__btn--sm {
  font-size: 0.78rem;
  padding: 0.28rem 0.4rem;
}

.match-flow-role-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.match-flow-role-row__name {
  font-size: 0.88rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-flow-role-select {
  font: inherit;
  font-size: 0.8rem;
  color: var(--drafter-text);
  background: #0c0c0e;
  border: 1px solid var(--drafter-border);
  border-radius: var(--drafter-radius);
  padding: 0.28rem 0.4rem;
}

.match-flow-vote-tallies {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}

.match-flow-vote-tally {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem;
  border-radius: var(--drafter-radius);
  border: 1px solid var(--drafter-border);
}

.match-flow-vote-tally--blue {
  border-color: rgba(30, 130, 255, 0.4);
  color: var(--drafter-blue-text);
}

.match-flow-vote-tally--red {
  border-color: rgba(232, 64, 87, 0.4);
  color: var(--drafter-red-text);
}

.match-flow-vote-tally strong {
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
}

.match-flow-status {
  margin: 1.5rem auto;
  max-width: min(28rem, 92%);
  padding: 0.75rem 1rem;
  text-align: center;
  color: var(--drafter-text);
  border: 1px solid var(--drafter-border-soft);
  border-radius: var(--drafter-radius);
  background: rgba(16, 16, 18, 0.94);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.match-flow-status--error,
.match-flow-banner {
  color: var(--drafter-red-text);
}

.match-flow-banner {
  margin: 0;
  padding: 0.45rem 0.65rem;
  border: 1px solid rgba(232, 64, 87, 0.45);
  border-radius: var(--drafter-radius);
  background: rgba(40, 12, 16, 0.94);
  font-size: 0.85rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.match-flow-champ-embed {
  /* Legacy nested embed — unused when CS is full-bleed via match-flow-shell--cs. */
  margin-top: 0.65rem;
  min-height: 0;
  flex: 1 1 auto;
  border: 1px solid var(--drafter-border-soft);
  border-radius: var(--drafter-radius);
  overflow: hidden;
  background: #0a0a0a;
}

.match-flow-staff {
  position: sticky;
  bottom: 0.5rem;
  margin-top: auto;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(200, 170, 110, 0.3);
  border-radius: var(--drafter-radius);
  background: rgba(18, 18, 20, 0.94);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.35);
}

.match-flow-staff__title {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--drafter-gold);
}

.match-flow-staff__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.match-flow-staff__hint {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.75rem;
  color: var(--drafter-muted);
}

.match-flow-staff__list {
  max-height: 7.5rem;
  overflow: auto;
}

/* —— Match flow tournament-parity layout —— */
.match-flow-header--hero {
  gap: 0.45rem;
  padding: 0.65rem 0.85rem;
  background: rgba(16, 16, 18, 0.96);
  border-color: rgba(200, 170, 110, 0.22);
}

/* Side pick and role assign stay centered; the snake draft uses the full board
   so the player pool can expand into the available width. */
.match-flow-shell {
  --match-flow-panel-max: 100%;
}

.match-flow-shell:has(.match-flow-board--side) {
  --match-flow-panel-max: 44rem;
}

.match-flow-shell:has(.match-flow-board--roles) {
  --match-flow-panel-max: 50rem;
}

.match-flow-shell:has(.match-flow-board--draft) {
  --match-flow-panel-max: 100%;
}

.match-flow-shell:has(.match-flow-teams-top.is-mega) {
  --match-flow-panel-max: 100%;
}

.match-flow-shell:has(.match-flow-board--side) > .match-flow-header,
.match-flow-shell:has(.match-flow-board--side) > .match-flow-banner,
.match-flow-shell:has(.match-flow-board--side) > .match-flow-phase,
.match-flow-shell:has(.match-flow-board--side) > .match-chat,
.match-flow-shell:has(.match-flow-board--side) > .match-flow-staff-dock,
.match-flow-shell:has(.match-flow-board--roles) > .match-flow-header,
.match-flow-shell:has(.match-flow-board--roles) > .match-flow-banner,
.match-flow-shell:has(.match-flow-board--roles) > .match-flow-phase,
.match-flow-shell:has(.match-flow-board--roles) > .match-chat,
.match-flow-shell:has(.match-flow-board--draft) > .match-flow-header,
.match-flow-shell:has(.match-flow-board--draft) > .match-flow-banner,
.match-flow-shell:has(.match-flow-board--draft) > .match-flow-phase,
.match-flow-shell:has(.match-flow-board--draft) > .match-chat,
.match-flow-shell:has(.match-flow-board--draft) > .match-flow-staff-dock {
  width: min(100%, var(--match-flow-panel-max));
  max-width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
}

.match-flow-shell:has(.match-flow-board--side) > .match-flow-staff-dock,
.match-flow-shell:has(.match-flow-board--draft) > .match-flow-staff-dock {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Drafting: slim header so the pool owns the viewport. */
.match-flow-shell:has(.match-flow-board--draft) {
  gap: 0.35rem;
  padding: 0.35rem 0.55rem 0.45rem;
}

.match-flow-shell:has(.match-flow-board--draft) .match-flow-header--hero {
  gap: 0.2rem;
  padding: 0.4rem 0.65rem;
}

.match-flow-shell:has(.match-flow-board--draft) .match-flow-eyebrow {
  display: none;
}

.match-flow-shell:has(.match-flow-board--draft) .match-flow-header__title {
  font-size: 0.92rem;
}

.match-flow-shell:has(.match-flow-board--draft) .match-flow-header__timer {
  margin: 0;
  font-size: 0.78rem;
}

.match-flow-eyebrow {
  margin: 0 0 0.2rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--drafter-gold);
}

.match-flow-header__brand {
  min-width: 0;
}

.match-flow-avatar {
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  background: #1a1a1e;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.match-flow-avatar.is-captain,
.tournament-draft-board__avatar.is-captain {
  border-color: var(--drafter-gold);
  box-shadow: 0 0 0 1px rgba(200, 170, 110, 0.45);
}

.match-flow-avatar.is-empty {
  background: linear-gradient(145deg, #2a2a30, #16161a);
}

.match-flow-cta--lg {
  font-size: 1rem;
  padding: 0.75rem 1.35rem;
  min-width: 11rem;
}

.match-flow-draft-live.tournament-draft-board,
.match-flow-reveal-grid.tournament-draft-board,
.match-flow-teams-top.tournament-draft-board {
  grid-template-columns: 1fr 1fr;
  margin-top: 0;
}

/* Team rosters above the pool; slots stack top→bottom within each team. */
.match-flow-teams-top {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 5;
  margin-bottom: 0;
  padding-bottom: 0;
  gap: 0.45rem;
  background: rgba(12, 12, 14, 0.94);
  border-radius: var(--drafter-radius);
  padding: 0.35rem 0.35rem 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.match-flow-teams-top .tournament-draft-board__team {
  padding: 0.4rem 0.45rem 0.45rem;
  gap: 0.3rem;
  box-shadow: none;
}

.match-flow-teams-top .tournament-draft-board__team-head {
  margin: 0;
  flex-shrink: 0;
}

.match-flow-teams-top .tournament-draft-board__team-head strong {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.match-flow-teams-top .tournament-draft-board__count {
  font-size: 0.68rem;
}

.match-flow-teams-top .tournament-draft-board__slots {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.match-flow-teams-top .tournament-draft-board__team .tournament-draft-board__slot {
  min-height: 2rem;
  padding: 0.28rem 0.35rem;
  gap: 0.3rem;
  align-items: center;
  grid-template-columns: 0.7rem 1.45rem minmax(0, 1fr);
}

.match-flow-teams-top .tournament-draft-board__slot-num {
  font-size: 0.62rem;
  opacity: 0.7;
}

.match-flow-teams-top .tournament-draft-board__slot-name {
  font-size: 0.72rem;
  line-height: 1.15;
}

.match-flow-teams-top .tournament-draft-board__slot-meta {
  display: none;
}

.match-flow-teams-top .tournament-draft-board__avatar,
.match-flow-teams-top .match-flow-rail .tournament-draft-board__avatar {
  width: 1.45rem;
  height: 1.45rem;
}

.match-flow-teams-top.is-mega {
  gap: 0.4rem;
}

.match-flow-reveal-grid.tournament-draft-board {
  grid-template-columns: 1fr 1fr;
}

.match-flow-two-rail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.match-flow-rail--blue {
  border-color: rgba(30, 130, 255, 0.42) !important;
  background: rgba(30, 130, 255, 0.1) !important;
}

.match-flow-rail--red {
  border-color: rgba(232, 64, 87, 0.42) !important;
  background: rgba(232, 64, 87, 0.1) !important;
}

.match-flow-rail--blue .tournament-draft-board__team-head strong {
  color: var(--drafter-blue-text);
}

.match-flow-rail--red .tournament-draft-board__team-head strong {
  color: var(--drafter-red-text);
}

.match-flow-rail .tournament-draft-board__avatar {
  width: 1.75rem;
  height: 1.75rem;
}

.match-flow-rail .tournament-draft-board__slot {
  min-height: 2.35rem;
  gap: 0.4rem;
}

.match-flow-slot--turn {
  outline: 1px solid rgba(200, 170, 110, 0.7);
  box-shadow: 0 0 12px rgba(200, 170, 110, 0.18);
}

.match-flow-slot--flash,
.match-flow-pool-flash {
  animation: match-flow-pick-flash 0.7s var(--drafter-ease);
}

.match-flow-cap-mark {
  font-style: normal;
  font-weight: 800;
  color: var(--drafter-gold);
  margin-left: 0.15rem;
}

.match-flow-rank-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.12rem 0.35rem;
  border-radius: 3px;
  border: 1px solid rgba(200, 170, 110, 0.35);
  color: var(--drafter-gold);
  background: rgba(200, 170, 110, 0.1);
  white-space: nowrap;
}

.match-flow-rank-chip.is-muted {
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--drafter-muted);
  background: rgba(255, 255, 255, 0.04);
}

.match-flow-pool-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-top: 0;
  padding: 0.45rem 0.55rem 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--drafter-radius);
  background: rgba(12, 12, 14, 0.96);
}

.match-flow-pool-panel__chrome {
  flex-shrink: 0;
}

.match-flow-pool-panel__chrome .tournament-draft-pool__head {
  gap: 0.15rem;
}

.match-flow-pool-panel__chrome .tournament-draft-pool__head .muted {
  font-size: 0.72rem;
  margin: 0;
}

.match-flow-pool-panel__chrome .tournament-draft-pool__filters {
  margin-top: 0.35rem;
  gap: 0.35rem 0.5rem;
}

.match-flow-pool-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 0.1rem;
  margin-top: 0.35rem;
}

.match-flow-pool-panel__note {
  flex-shrink: 0;
  margin: 0.3rem 0 0;
  font-size: 0.75rem;
}

.match-flow-pool-panel .tournament-draft-pool__head {
  align-items: flex-end;
}

.match-flow-pool-panel .tournament-card__panel-title {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Denser pool cards — more rows visible in the taller scroll area. */
.match-flow-pool-panel .tournament-draft-pool__roles {
  gap: 0.55rem;
}

.match-flow-pool-panel .tournament-draft-pool__role h4 {
  margin: 0 0 0.28rem;
  font-size: 0.75rem;
}

.match-flow-pool-panel .tournament-draft-pool__list {
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 0.3rem;
}

.match-flow-pool-panel .tournament-draft-pool__player {
  padding: 0.35rem 0.45rem;
  gap: 0.35rem;
  grid-template-columns: 1.65rem minmax(0, 1fr);
}

.match-flow-pool-panel .tournament-draft-pool__avatar {
  width: 1.65rem;
  height: 1.65rem;
}

.match-flow-pool-panel .tournament-draft-pool__name {
  font-size: 0.78rem;
  line-height: 1.2;
}

.match-flow-pool-panel .tournament-draft-pool__meta {
  font-size: 0.65rem;
  gap: 0.25rem 0.35rem;
}

.match-flow-pool-panel .tournament-draft-pool__player-opgg {
  font-size: 0.65rem;
  padding: 0.05rem 0.3rem;
}

.match-flow-pool-panel .tournament-draft-pool__player.is-recommended {
  border-color: rgba(229, 191, 104, 0.72);
  background: linear-gradient(110deg, rgba(229, 191, 104, 0.13), rgba(229, 191, 104, 0.035));
  box-shadow:
    inset 0 0 0 1px rgba(229, 191, 104, 0.16),
    0 0 13px rgba(229, 191, 104, 0.12);
  animation: match-flow-recommended-pulse 2.8s ease-in-out infinite;
}

.match-flow-pool-panel .tournament-draft-pool__player.is-recommended.is-pickable:hover {
  border-color: rgba(248, 215, 137, 0.9);
  background: linear-gradient(110deg, rgba(229, 191, 104, 0.2), rgba(229, 191, 104, 0.07));
}

.match-flow-pool-player-title {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.match-flow-pool-player-title .tournament-draft-pool__name {
  flex: 1 1 min(5rem, 100%);
  min-width: min(5rem, 100%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-flow-pool-recommended {
  flex: 0 0 auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.12rem 0.34rem;
  border: 1px solid rgba(239, 204, 125, 0.34);
  border-radius: 999px;
  background: rgba(229, 191, 104, 0.12);
  color: #f2d58e;
  font-size: 0.59rem;
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0.025em;
  white-space: nowrap;
}

.match-flow-pool-recommended > span {
  font-size: 0.74rem;
  line-height: 0.8;
}

@keyframes match-flow-recommended-pulse {
  0%,
  100% {
    box-shadow:
      inset 0 0 0 1px rgba(229, 191, 104, 0.13),
      0 0 8px rgba(229, 191, 104, 0.08);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px rgba(239, 204, 125, 0.34),
      0 0 17px rgba(229, 191, 104, 0.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .match-flow-pool-panel .tournament-draft-pool__player.is-recommended {
    animation: none;
  }
}

.match-flow-pool-role-icon {
  display: inline-block;
  vertical-align: -3px;
  margin-right: 0.35rem;
}

.match-flow-role-icons {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.match-flow-role-icons.is-empty {
  opacity: 0.45;
}

.match-flow-pool-panel .tournament-draft-pool__meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.match-flow-role-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: flex-end;
  max-width: 18rem;
}

.match-flow-role-picker__btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.28rem 0.42rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.28);
  color: var(--drafter-text);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 650;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.12s ease;
}

.match-flow-role-picker__btn:hover:not(:disabled) {
  border-color: rgba(200, 170, 110, 0.45);
  transform: translateY(-1px);
}

.match-flow-role-picker__btn.is-active {
  border-color: rgba(200, 170, 110, 0.65);
  background: rgba(200, 170, 110, 0.16);
  color: var(--drafter-gold);
}

.match-flow-role-picker__btn.is-tip-flash {
  /* Base btn transitions fight keyframes on the same props and can freeze the loop. */
  transition: none;
  animation: match-role-tip-flash 1.1s ease-in-out infinite;
}

.match-flow-role-picker__btn.is-tip-flash:hover,
.match-flow-role-picker__btn.is-tip-flash:focus-visible {
  animation-play-state: paused;
}

@keyframes match-role-tip-flash {
  0%,
  100% {
    border-color: rgba(90, 180, 255, 0.25);
    background: rgba(90, 180, 255, 0.06);
    box-shadow: 0 0 0 0 rgba(90, 180, 255, 0);
  }
  50% {
    border-color: rgba(90, 180, 255, 0.85);
    background: rgba(90, 180, 255, 0.28);
    box-shadow: 0 0 10px rgba(90, 180, 255, 0.35);
    color: #d7ecff;
  }
}

.match-flow-role-picker__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.match-flow-role-assign-row {
  flex-wrap: wrap;
}

.match-flow-role-assign-row .match-flow-role-picker {
  flex: 1 1 100%;
  justify-content: flex-start;
  max-width: none;
  margin-top: 0.15rem;
}

.match-flow-staff-dock {
  position: sticky;
  bottom: 0.65rem;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.45rem;
  z-index: 20;
  pointer-events: none;
}

.match-flow-staff-dock > * {
  pointer-events: auto;
}

.match-flow-staff-toggle {
  appearance: none;
  border: 1px solid rgba(200, 170, 110, 0.4);
  border-radius: 999px;
  background: rgba(18, 18, 20, 0.94);
  color: var(--drafter-gold);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.match-flow-staff-toggle.is-open,
.match-flow-staff-toggle:hover {
  border-color: var(--drafter-gold);
  background: rgba(200, 170, 110, 0.12);
}

.match-flow-staff {
  width: min(100%, 28rem);
  position: static;
  margin-top: 0;
}

.match-flow-vote-role {
  margin-left: auto;
  flex: 0 0 auto;
}

.match-flow-rail--mega-0 { border-color: rgba(30, 130, 255, 0.42) !important; }
.match-flow-rail--mega-1 { border-color: rgba(232, 64, 87, 0.42) !important; }
.match-flow-rail--mega-2 { border-color: rgba(80, 200, 120, 0.42) !important; }
.match-flow-rail--mega-3 { border-color: rgba(200, 170, 110, 0.42) !important; }
.match-flow-rail--mega-4 { border-color: rgba(170, 110, 220, 0.42) !important; }
.match-flow-rail--mega-5 { border-color: rgba(230, 140, 60, 0.42) !important; }
.match-flow-rail--mega-6 { border-color: rgba(220, 220, 230, 0.35) !important; }
.match-flow-rail--mega-7 { border-color: rgba(90, 90, 100, 0.5) !important; }

.match-flow-board--draft .tournament-draft-pool__list {
  max-height: none;
  overflow: visible;
}

.match-flow-side-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  padding: 0.5rem 0 0.25rem;
}

.match-flow-side-roster {
  margin-top: 1rem;
  text-align: left;
}

.match-flow-side-roster__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: 0.45rem;
}

.match-flow-side-hero .rank-pair,
.match-flow-side-roster .rank-pair,
.match-flow-pool-panel .tournament-draft-pool__meta .rank-pair {
  gap: 0.24rem;
  font-size: 0.68rem;
  white-space: normal;
}

.match-flow-pool-panel .tournament-draft-pool__meta .rank-pair {
  display: grid;
  grid-template-columns: max-content;
  justify-items: start;
  gap: 0;
}

.match-flow-pool-panel .tournament-draft-pool__meta .rank-pair__separator {
  display: none;
}

.match-flow-side-hero .rank-pair__part,
.match-flow-side-roster .rank-pair__part,
.match-flow-pool-panel .tournament-draft-pool__meta .rank-pair__part {
  gap: 0.1rem;
  white-space: nowrap;
}

.match-flow-side-hero .rank-pair__crest,
.match-flow-side-roster .rank-pair__crest,
.match-flow-pool-panel .tournament-draft-pool__meta .rank-pair__crest {
  width: 0.95rem;
  height: 0.95rem;
}

.match-flow-side-hero .rank-pair__tier,
.match-flow-side-roster .rank-pair__tier,
.match-flow-pool-panel .tournament-draft-pool__meta .rank-pair__tier {
  font-size: 0.68rem;
}

.match-flow-side-hero .rank-pair__label,
.match-flow-side-roster .rank-pair__label,
.match-flow-pool-panel .tournament-draft-pool__meta .rank-pair__label {
  color: var(--drafter-gold);
  font-size: 0.88em;
  font-weight: 700;
}

.match-flow-captain-card .rank-pair {
  margin-top: 0.18rem;
}

.match-flow-side-roster__captain {
  border-color: rgba(200, 170, 110, 0.45) !important;
  background: rgba(200, 170, 110, 0.08) !important;
}

.match-flow-side-roster__captain.is-high {
  border-color: rgba(200, 170, 110, 0.55) !important;
}

.match-flow-side-roster__captain.is-chooser {
  border-color: rgba(30, 130, 255, 0.5) !important;
  background: rgba(30, 130, 255, 0.08) !important;
}

.match-flow-captain-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  width: 100%;
}

.match-flow-captain-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: min(100%, 16rem);
  padding: 0.75rem 0.9rem;
  border-radius: var(--drafter-radius);
  border: 1px solid var(--drafter-border);
  background: rgba(12, 12, 14, 0.92);
  text-align: left;
}

.match-flow-captain-card > div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.match-flow-captain-card strong {
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-flow-captain-card__role {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--drafter-muted);
}

.match-flow-captain-card--gold {
  border-color: rgba(200, 170, 110, 0.45);
  background: rgba(42, 34, 18, 0.96);
}

.match-flow-captain-card--blue {
  border-color: rgba(30, 130, 255, 0.45);
  background: rgba(18, 32, 56, 0.96);
}

.match-flow-role-assign-list {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.match-flow-role-assign-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.45rem;
  border-radius: var(--drafter-radius);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.match-flow-role-assign-row__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.match-flow-role-assign-row__name {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  max-width: 100%;
}

.match-flow-role-assign-row__body strong {
  font-size: 0.88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.match-flow-role-assign-row__pref {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
}

.match-flow-role-assign-row__pref-label {
  opacity: 0.85;
}

.match-flow-role-assign-row__pref .match-flow-role-icons {
  gap: 0.12rem;
}

.match-flow-vote-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.match-flow-vote-card {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.85rem 0.9rem;
  border-radius: var(--drafter-radius);
  border: 1px solid var(--drafter-border);
  background: rgba(12, 12, 14, 0.92);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.2s var(--drafter-ease),
    transform 0.15s var(--drafter-ease),
    box-shadow 0.2s var(--drafter-ease);
}

.match-flow-vote-card:hover:not(:disabled) {
  transform: translateY(-2px);
}

.match-flow-vote-card:disabled {
  cursor: default;
  opacity: 0.85;
}

.match-flow-vote-card header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.match-flow-vote-card header span {
  font-size: 1.55rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.match-flow-vote-card--blue {
  border-color: rgba(30, 130, 255, 0.5);
  background: rgba(14, 28, 52, 0.96);
}

.match-flow-vote-card--red {
  border-color: rgba(232, 64, 87, 0.5);
  background: rgba(48, 14, 22, 0.96);
}

.match-flow-vote-card.is-selected {
  box-shadow: 0 0 0 1px currentColor, 0 10px 28px rgba(0, 0, 0, 0.35);
}

.match-flow-vote-card__roster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.match-flow-vote-card__roster li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  min-width: 0;
}

.match-flow-vote-card__roster li span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-flow-vote-card__cta {
  margin-top: auto;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--drafter-muted);
}

.match-flow-staff__pick {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  appearance: none;
  border: 1px solid var(--drafter-border-soft);
  border-radius: var(--drafter-radius);
  background: var(--drafter-surface);
  color: var(--drafter-text);
  font: inherit;
  font-size: 0.8rem;
  padding: 0.28rem 0.45rem;
  cursor: pointer;
  text-align: left;
}

.match-flow-staff__pick:hover:not(:disabled) {
  border-color: var(--drafter-gold);
  background: var(--drafter-gold-soft);
}

.match-flow-staff__pick:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.match-flow-staff__pick span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-flow-staff__pick small {
  color: var(--drafter-muted);
  font-size: 0.68rem;
}

@media (max-width: 860px) {
  .match-flow-draft-grid,
  .match-flow-roles-grid,
  .match-flow-two-rail,
  .match-flow-vote-grid,
  .match-flow-draft-live.tournament-draft-board,
  .match-flow-reveal-grid.tournament-draft-board,
  .match-flow-teams-top.tournament-draft-board {
    grid-template-columns: 1fr;
  }

  .match-flow-shell {
    padding: 0.55rem 0.55rem 0.75rem;
  }

  .match-flow-shell:has(.match-flow-board--draft) {
    padding: 0.3rem 0.4rem 0.4rem;
  }

  .match-flow-shell--cs {
    padding: 0;
  }

  .match-flow-team {
    min-height: 0;
  }

  .match-flow-board--draft .tournament-draft-pool__list {
    max-height: none;
  }

  .match-flow-pool-panel .tournament-draft-pool__list {
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  }

  .match-flow-staff-dock {
    align-items: stretch;
  }

  .match-flow-staff {
    width: 100%;
  }
}

/* Give the live player pool the full board height on desktop; keep match chat
   beside the draft so the list no longer competes with it for vertical space. */
@media (min-width: 1100px) {
  .match-flow-shell:has(.match-flow-board--draft) {
    --match-flow-panel-max: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 19rem);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 0.55rem 0.75rem;
    padding: 0.45rem 0.65rem 0.65rem;
  }

  .match-flow-shell:has(.match-flow-board--draft) > .match-flow-header {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .match-flow-shell:has(.match-flow-board--draft) > .match-flow-banner {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .match-flow-shell:has(.match-flow-board--draft) > .match-flow-phase {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .match-flow-shell:has(.match-flow-board--draft) > .match-chat {
    grid-column: 2;
    grid-row: 1 / 4;
    width: 100%;
    min-width: 0;
    min-height: 0;
    max-height: none;
    height: auto;
    margin: 0;
    align-self: stretch;
    border-color: rgba(200, 170, 110, 0.2);
    border-radius: 0.55rem;
    background: linear-gradient(180deg, rgba(18, 18, 21, 0.98), rgba(9, 9, 11, 0.98));
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
  }

  .match-flow-shell:has(.match-flow-board--draft) > .match-chat .match-chat__tab {
    padding: 0.48rem 0.4rem;
    font-size: 0.66rem;
  }

  .match-flow-shell:has(.match-flow-board--draft) > .match-chat .match-chat__list {
    gap: 0.35rem;
    padding: 0.65rem 0.55rem;
  }

  .match-flow-shell:has(.match-flow-board--draft) > .match-chat .match-chat__chip {
    font-size: 0.58rem;
  }

  .match-flow-shell:has(.match-flow-board--draft) > .match-chat .match-chat__name {
    font-size: 0.7rem;
  }

  .match-flow-shell:has(.match-flow-board--draft) > .match-chat .match-chat__text {
    font-size: 0.76rem;
    line-height: 1.4;
  }

  .match-flow-shell:has(.match-flow-board--draft) > .match-chat .match-chat__form {
    gap: 0.4rem;
    padding: 0.4rem;
  }

  .match-flow-shell:has(.match-flow-board--draft) > .match-chat .match-chat__input {
    font-size: 0.76rem;
    padding: 0.45rem 0.5rem;
  }

  .match-flow-shell:has(.match-flow-board--draft) > .match-chat .match-chat__send {
    font-size: 0.64rem;
  }

  .match-flow-shell:has(.match-flow-board--draft) > .match-flow-staff-dock {
    grid-column: 1;
    grid-row: 4;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .match-flow-shell:has(.match-flow-board--draft) .match-flow-teams-top:not(.is-mega) .tournament-draft-board__slots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  }

  .match-flow-shell:has(.match-flow-board--draft) .match-flow-teams-top.is-mega .tournament-draft-board__slots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Fixed, non-scrolling draft action row: primary CTA stays above while the
   selected champion and team suggestion share the compact line underneath. */
.drafter-toolbar__secondary .drafter-toolbar__main {
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  overflow-x: auto;
  overflow-y: hidden;
}

.drafter-toolbar__secondary .drafter-toolbar__pick {
  flex: 0 1 10.5rem;
  max-width: 10.5rem;
  min-height: 2.45rem;
  height: 2.45rem;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.drafter-toolbar__secondary .drafter-toolbar__pick img,
.drafter-toolbar__secondary .drafter-toolbar__tip img {
  width: 26px;
  height: 26px;
}

.drafter-toolbar__secondary .drafter-toolbar__pick span,
.drafter-toolbar__secondary .drafter-toolbar__tip span {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drafter-toolbar__secondary .drafter-toolbar__tip {
  order: 2;
  flex: 1 1 12rem;
  min-width: 0;
  min-height: 2.45rem;
  height: 2.45rem;
  max-width: none;
  justify-content: center;
  overflow: hidden;
}

.drafter-toolbar__secondary .drafter-toolbar__tip .drafter-btn-ready {
  flex: 0 1 auto;
  min-width: 2.75rem;
  min-height: 2rem;
  padding: 0.22rem 0.42rem;
  font-size: 0.62rem;
}

.drafter-toolbar__secondary .drafter-toolbar__main > .drafter-btn-ready,
.drafter-toolbar__secondary .drafter-toolbar__main .drafter-cta .drafter-btn-ready {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 2.35rem;
  padding: 0.22rem 0.42rem;
  font-size: 0.62rem;
}

.drafter-toolbar__secondary .drafter-toolbar__main > .drafter-role-row {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  min-height: 2.35rem;
  flex-wrap: nowrap;
}

.drafter-toolbar__secondary .drafter-cta--side {
  flex: 0 1 8.5rem;
  min-width: 0;
  min-height: 2.45rem;
  height: 2.45rem;
}

@media (max-width: 900px) {
  .drafter-toolbar__secondary .drafter-toolbar__pick {
    flex-basis: 7.5rem;
    max-width: 7.5rem;
  }

  .drafter-toolbar__secondary .drafter-toolbar__tip {
    flex: 1 1 8rem;
    min-width: 6rem;
    flex-basis: auto;
  }
}

/* When Restart is unavailable (spectators and completed matches), let the
   status CTA use the entire top row instead of leaving an empty left slot. */
.drafter-toolbar__top.is-full {
  grid-template-columns: minmax(0, 1fr);
}

.drafter-toolbar__top.is-full .drafter-toolbar__restart-slot {
  display: none;
}

.drafter-toolbar__top.is-full .drafter-toolbar__primary-slot {
  grid-column: 1;
}

.drafter-toolbar__primary-slot {
  display: flex;
  min-width: 0;
}

.drafter-toolbar__primary-slot > .drafter-cta {
  flex: 1 1 auto !important;
}

.drafter-toolbar__primary-slot .drafter-cta__inner {
  container-type: inline-size;
}

.drafter-toolbar__primary-slot .drafter-cta__status,
.drafter-toolbar__primary-slot .drafter-btn-ready--beam {
  max-width: 100%;
  font-size: clamp(0.56rem, 3.6cqw, 1.02rem);
  line-height: 1.08;
  white-space: normal;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: clip;
  text-wrap: balance;
}

/* ── Support workspace refresh ─────────────────────────────────────────────
   Presentation-only: the existing ticket data, controls, and flows stay intact. */
#support-app,
#support-ticket-app,
#support-new-app {
  --support-line: rgba(218, 228, 239, 0.18);
  --support-line-strong: rgba(224, 234, 245, 0.3);
  --support-panel: #171d25;
  --support-panel-raised: #1d2530;
  --support-panel-inset: #0e131a;
  --support-accent-soft: rgba(174, 232, 44, 0.12);
  --support-blue-soft: rgba(91, 151, 222, 0.14);
}

#support-app {
  max-width: 82rem;
}

#support-app .ticket-app,
#support-ticket-app .ticket-detail-page,
#support-new-app .ticket-create-page {
  gap: 1.1rem;
}

#support-app .ticket-nav {
  position: relative;
  gap: 1rem;
  padding: 1.15rem;
  overflow: hidden;
  border: 1px solid var(--support-line-strong);
  border-radius: 1.15rem;
  background:
    radial-gradient(circle at 8% -30%, rgba(174, 232, 44, 0.09), transparent 32%),
    linear-gradient(180deg, #1d2530 0%, #171d25 100%);
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

#support-app .ticket-nav::after {
  position: absolute;
  right: -4rem;
  bottom: -6rem;
  width: 16rem;
  height: 12rem;
  border-radius: 50%;
  background: rgba(72, 137, 214, 0.09);
  filter: blur(44px);
  content: "";
  pointer-events: none;
}

#support-app .ticket-nav__top,
#support-app .ticket-nav__search {
  position: relative;
  z-index: 1;
}

#support-app .ticket-nav__tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(7.25rem, 1fr));
  gap: 0.45rem;
}

#support-app .ticket-nav__tab {
  min-height: 3.7rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(218, 228, 239, 0.16);
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.045);
  color: #c7d0da;
  box-shadow: none;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

#support-app .ticket-nav__tab:hover {
  border-color: rgba(174, 232, 44, 0.34);
  background: rgba(255, 255, 255, 0.075);
  color: #f4f7f9;
  box-shadow: none;
  transform: translateY(-1px);
}

#support-app .ticket-nav__tab.is-active {
  border-color: rgba(174, 232, 44, 0.58);
  background: linear-gradient(145deg, rgba(174, 232, 44, 0.18), rgba(104, 139, 29, 0.09));
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 8px 24px rgba(70, 99, 18, 0.12);
}

#support-app .ticket-nav__tab-label {
  font-size: 0.84rem;
  letter-spacing: 0.01em;
}

#support-app .ticket-nav__tab-hint {
  color: #a8b5c3;
  font-size: 0.66rem;
}

#support-app .ticket-nav__actions {
  position: relative;
  z-index: 2;
}

#support-app .ticket-nav__new,
#support-new-app .ticket-create > .btn,
#support-ticket-app .ticket-reply--detail > .btn {
  min-height: 2.85rem;
  border: 1px solid rgba(190, 239, 76, 0.7);
  border-radius: 0.75rem;
  background: linear-gradient(145deg, #b4ed2d, #8bc50f);
  box-shadow:
    0 10px 28px rgba(111, 166, 10, 0.19),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
  color: #091000;
  font-weight: 750;
}

#support-app .ticket-nav__new:hover,
#support-new-app .ticket-create > .btn:hover,
#support-ticket-app .ticket-reply--detail > .btn:hover {
  background: linear-gradient(145deg, #c0f442, #98d51b);
  box-shadow:
    0 13px 32px rgba(111, 166, 10, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
  transform: translateY(-1px);
}

#support-app .ticket-nav__search {
  padding-top: 1rem;
  border-top: 1px solid var(--support-line);
}

#support-app .ticket-nav__search-label,
#support-ticket-app .ticket-staff-form label,
#support-ticket-app .ticket-reply label,
#support-new-app .ticket-create label {
  color: #c1ccd7;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

#support-app .ticket-input,
#support-ticket-app .ticket-input,
#support-ticket-app .ticket-select,
#support-ticket-app .ticket-textarea,
#support-new-app .ticket-input,
#support-new-app .ticket-select,
#support-new-app .ticket-textarea {
  min-height: 3rem;
  border: 1px solid rgba(218, 228, 239, 0.24);
  border-radius: 0.75rem;
  background-color: #0d1218;
  color: #f0f3f6;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 8px 18px rgba(0, 0, 0, 0.08);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

#support-app .ticket-input:focus,
#support-ticket-app .ticket-input:focus,
#support-ticket-app .ticket-select:focus,
#support-ticket-app .ticket-textarea:focus,
#support-new-app .ticket-input:focus,
#support-new-app .ticket-select:focus,
#support-new-app .ticket-textarea:focus {
  border-color: rgba(174, 232, 44, 0.58);
  background-color: #10161e;
  box-shadow:
    0 0 0 3px rgba(174, 232, 44, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

#support-app .ticket-input::placeholder,
#support-ticket-app .ticket-input::placeholder,
#support-ticket-app .ticket-textarea::placeholder,
#support-new-app .ticket-input::placeholder,
#support-new-app .ticket-textarea::placeholder {
  color: #8392a2;
  opacity: 1;
}

#support-app .ticket-nav__search-btn,
#support-app .ticket-nav__actions .btn:not(.ticket-nav__new),
#support-ticket-app .ticket-detail-page__toolbar .btn,
#support-ticket-app .ticket-staff-form > .btn,
#support-new-app .player-picked .btn {
  min-height: 2.8rem;
  border: 1px solid rgba(218, 228, 239, 0.28);
  border-radius: 0.72rem;
  background: linear-gradient(180deg, #252e39, #1c242e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: #edf1f5;
}

#support-app .ticket-nav__search-btn:hover,
#support-app .ticket-nav__actions .btn:not(.ticket-nav__new):hover,
#support-ticket-app .ticket-detail-page__toolbar .btn:hover,
#support-ticket-app .ticket-staff-form > .btn:hover,
#support-new-app .player-picked .btn:hover {
  border-color: rgba(174, 232, 44, 0.46);
  background: #2b3527;
  color: #ffffff;
}

#support-app .ticket-app__meta {
  padding: 0 0.25rem;
}

#support-app .ticket-app__counts {
  color: #b7c2ce;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

#support-app .ticket-list-shell {
  overflow: hidden;
  border: 1px solid var(--support-line-strong);
  border-radius: 1.1rem;
  background: #171d25;
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#support-app .ticket-list-head {
  grid-template-columns: 6.5rem minmax(0, 1fr) 15rem;
  padding: 0.75rem 1.1rem;
  border-bottom: 1px solid var(--support-line);
  background: #202832;
  box-shadow: none;
  color: #aab7c4;
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.12em;
}

#support-app .ticket-table--compact .ticket-row {
  position: relative;
  grid-template-columns: 6.5rem minmax(0, 1fr) 15rem;
  min-height: 5.15rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid rgba(218, 228, 239, 0.12);
  background: rgba(255, 255, 255, 0.012);
  box-shadow: none;
  transition: background 160ms ease, transform 160ms ease;
}

#support-app .ticket-table--compact .ticket-row::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: transparent;
  content: "";
  transition: background 160ms ease, box-shadow 160ms ease;
}

#support-app .ticket-table--compact .ticket-row:hover,
#support-app .ticket-table--compact .ticket-row.is-active {
  background: linear-gradient(90deg, rgba(174, 232, 44, 0.1), rgba(91, 151, 222, 0.055) 70%, rgba(255, 255, 255, 0.02));
}

#support-app .ticket-table--compact .ticket-row:hover::before,
#support-app .ticket-table--compact .ticket-row.is-active::before {
  background: #b6ff2a;
  box-shadow: 0 0 14px rgba(182, 255, 42, 0.42);
}

#support-app .ticket-row__id,
#support-ticket-app .ticket-detail__id {
  width: fit-content;
  padding: 0.3rem 0.5rem;
  border: 1px solid rgba(218, 228, 239, 0.2);
  border-radius: 0.45rem;
  background: #0d1218;
  color: #b7c4d2;
  font-size: 0.67rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

#support-app .ticket-row__main {
  gap: 0.3rem;
}

#support-app .ticket-row__title {
  color: #f7f9fb;
  font-size: 0.96rem;
  font-weight: 680;
  letter-spacing: -0.01em;
}

#support-app .ticket-row__meta {
  color: #aab6c3;
  font-size: 0.75rem;
}

#support-app .ticket-row__aside {
  gap: 0.45rem;
}

#support-app .ticket-row__time {
  color: #99a8b8;
  font-size: 0.7rem;
}

#support-app .ticket-status,
#support-app .ticket-priority,
#support-ticket-app .ticket-status,
#support-ticket-app .ticket-priority,
#support-ticket-app .ticket-chip {
  padding: 0.28rem 0.58rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #11171e;
  box-shadow: none;
  font-size: 0.61rem;
  letter-spacing: 0.085em;
}

#support-app .ticket-status--open,
#support-ticket-app .ticket-status--open {
  border-color: rgba(182, 255, 42, 0.35);
  background: rgba(182, 255, 42, 0.08);
}

#support-app .ticket-status--in_progress,
#support-ticket-app .ticket-status--in_progress {
  border-color: rgba(245, 197, 66, 0.34);
  background: rgba(245, 197, 66, 0.08);
}

#support-app .ticket-priority--medium,
#support-ticket-app .ticket-priority--medium {
  border-color: rgba(147, 197, 253, 0.27);
  background: rgba(147, 197, 253, 0.07);
}

#support-app .ticket-priority--high,
#support-ticket-app .ticket-priority--high {
  border-color: rgba(251, 146, 60, 0.3);
  background: rgba(251, 146, 60, 0.08);
}

#support-app .ticket-priority--urgent,
#support-ticket-app .ticket-priority--urgent {
  border-color: rgba(248, 113, 113, 0.34);
  background: rgba(248, 113, 113, 0.08);
}

#support-app .ticket-status--closed,
#support-app .ticket-priority--low,
#support-ticket-app .ticket-status--closed,
#support-ticket-app .ticket-priority--low {
  border-color: rgba(218, 228, 239, 0.2);
  color: #bdc8d3;
}

#support-app .ticket-pager {
  padding: 0.4rem 0.25rem 0;
}

#support-app .ticket-app__empty {
  min-height: 15rem;
  place-content: center;
  justify-items: center;
  padding: 2rem;
  border: 1px dashed rgba(218, 228, 239, 0.28);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.03);
  text-align: center;
}

/* Opened ticket */
#support-ticket-app {
  max-width: 74rem;
}

#support-ticket-app .ticket-detail-page {
  max-width: none;
  margin-inline: auto;
}

#support-ticket-app .ticket-subnav,
#support-new-app .ticket-subnav {
  width: fit-content;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--support-line);
  border-radius: 0.7rem;
  background: #181f28;
  color: #b2bfcc;
  font-size: 0.76rem;
}

#support-ticket-app .ticket-subnav__sep,
#support-new-app .ticket-subnav__sep {
  color: #788797;
}

#support-ticket-app .ticket-subnav__link,
#support-new-app .ticket-subnav__link {
  color: #b8c4d0;
}

#support-ticket-app .ticket-subnav__current,
#support-new-app .ticket-subnav__current {
  color: #ffffff;
}

#support-ticket-app .ticket-detail-page__toolbar {
  min-height: 3.8rem;
  padding: 0.65rem;
  border: 1px solid var(--support-line);
  border-radius: 0.9rem;
  background: #181f28;
}

#support-ticket-app .ticket-detail-page__toolbar .btn,
#support-ticket-app .ticket-detail-page__links .btn {
  min-height: 2.5rem;
}

#support-ticket-app .ticket-detail {
  gap: 1.25rem;
  padding: clamp(1.1rem, 2vw, 1.65rem);
  overflow: hidden;
  border: 1px solid var(--support-line-strong);
  border-radius: 1.2rem;
  background:
    radial-gradient(circle at 100% 0%, rgba(91, 151, 222, 0.12), transparent 28%),
    linear-gradient(180deg, #1d2530 0%, #171d25 100%);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

#support-ticket-app .ticket-detail__head {
  padding-bottom: 1.15rem;
  border-bottom: 1px solid var(--support-line);
}

#support-ticket-app .ticket-detail__titles {
  gap: 0.45rem;
}

#support-ticket-app .ticket-detail__eyebrow {
  gap: 0.55rem;
}

#support-ticket-app .ticket-detail__title {
  color: #f2f5f8;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 720;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

#support-ticket-app .ticket-detail__meta {
  color: #b6c1cd;
  font-size: 0.8rem;
}

#support-ticket-app .ticket-detail__times {
  margin-top: -0.65rem;
  color: #9cabb9;
  font-size: 0.72rem;
}

#support-ticket-app .ticket-section {
  gap: 0.9rem;
  padding: 1.1rem;
  border: 1px solid rgba(218, 228, 239, 0.18);
  border-radius: 1rem;
  background: #0f151c;
  box-shadow: inset 0 1px 12px rgba(0, 0, 0, 0.14);
}

#support-ticket-app .ticket-section__bar {
  align-items: center;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(218, 228, 239, 0.14);
}

#support-ticket-app .ticket-section__label {
  color: #e2e8ee;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.11em;
}

#support-ticket-app .ticket-section__count {
  padding: 0.25rem 0.55rem;
  border: 1px solid rgba(218, 228, 239, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  color: #aebbc8;
}

#support-ticket-app .ticket-thread {
  gap: 1rem;
  padding: 0.25rem 0;
}

#support-ticket-app .ticket-bubble {
  grid-template-columns: 2.45rem minmax(0, 1fr);
  gap: 0.7rem;
}

#support-ticket-app .ticket-bubble__avatar {
  width: 2.45rem;
  height: 2.45rem;
  border: 1px solid rgba(218, 228, 239, 0.24);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  font-size: 0.8rem;
}

#support-ticket-app .ticket-bubble__body {
  width: min(100%, 46rem);
  padding: 0.8rem 0.95rem;
  border: 1px solid rgba(218, 228, 239, 0.2);
  border-radius: 0.9rem;
  background: linear-gradient(145deg, #242e3a, #1a222c);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
}

#support-ticket-app .ticket-bubble--staff .ticket-bubble__avatar {
  border-color: rgba(105, 154, 226, 0.4);
  background: linear-gradient(145deg, rgba(67, 126, 207, 0.28), rgba(34, 66, 119, 0.2));
  color: #d9e9ff;
}

#support-ticket-app .ticket-bubble--staff .ticket-bubble__body {
  border-color: rgba(111, 169, 235, 0.4);
  border-top-left-radius: 0.25rem;
  background: linear-gradient(145deg, #223a56, #192b40);
}

#support-ticket-app .ticket-bubble--user {
  grid-template-columns: minmax(0, 1fr) 2.45rem;
}

#support-ticket-app .ticket-bubble--user .ticket-bubble__avatar {
  grid-column: 2;
  grid-row: 1;
  border-color: rgba(182, 255, 42, 0.35);
  background: linear-gradient(145deg, rgba(182, 255, 42, 0.18), rgba(86, 125, 18, 0.12));
}

#support-ticket-app .ticket-bubble--user .ticket-bubble__body {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  border-color: rgba(174, 232, 44, 0.34);
  border-top-right-radius: 0.25rem;
  border-top-left-radius: 0.9rem;
  background: linear-gradient(145deg, #29391f, #1d2b18);
}

#support-ticket-app .ticket-bubble__meta {
  align-items: center;
  color: #a5b3c1;
  font-size: 0.69rem;
}

#support-ticket-app .ticket-bubble__author {
  color: #f0f3f6;
  font-weight: 700;
}

#support-ticket-app .ticket-bubble p {
  margin-top: 0.5rem;
  color: #f0f3f6;
  font-size: 0.88rem;
  line-height: 1.6;
}

#support-ticket-app .ticket-staff-form,
#support-ticket-app .ticket-reply {
  gap: 0.85rem;
  margin-top: 0;
  padding: 1rem;
  border: 1px solid var(--support-line);
  border-radius: 1rem;
  background: #11171e;
  box-shadow: none;
}

#support-ticket-app .ticket-staff-form__row {
  gap: 0.85rem;
}

#support-ticket-app .ticket-staff-form > .btn {
  justify-self: end;
}

#support-ticket-app .ticket-textarea {
  min-height: 9rem;
  padding: 0.85rem 0.95rem;
  line-height: 1.55;
}

#support-ticket-app .ticket-reply--detail > .btn {
  min-width: 9.5rem;
  justify-self: end;
}

/* New ticket */
#support-new-app {
  max-width: 74rem;
}

#support-new-app .ticket-create-page {
  max-width: none;
}

#support-new-app .ticket-create {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: none;
  padding: clamp(1.15rem, 2.2vw, 1.75rem);
  border: 1px solid var(--support-line-strong);
  border-radius: 1.2rem;
  background:
    radial-gradient(circle at 100% 0%, rgba(91, 151, 222, 0.11), transparent 30%),
    linear-gradient(180deg, #1d2530 0%, #171d25 100%);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#support-new-app .ticket-create > label:nth-of-type(n + 3),
#support-new-app .ticket-create > .flash,
#support-new-app .ticket-create > .player-picked,
#support-new-app .ticket-create > .player-suggests,
#support-new-app .ticket-create > .btn {
  grid-column: 1 / -1;
}

#support-new-app .ticket-create > label {
  gap: 0.45rem;
}

#support-new-app .ticket-textarea {
  min-height: 11rem;
  padding: 0.85rem 0.95rem;
  line-height: 1.55;
}

#support-new-app .ticket-create > .btn {
  min-width: 10rem;
  justify-self: end;
}

#support-new-app .player-picked {
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(182, 255, 42, 0.2);
  border-radius: 0.75rem;
  background: rgba(174, 232, 44, 0.09);
  color: #d5dde5;
}

#support-new-app .player-picked .btn {
  min-height: 2rem;
}

#support-new-app .player-suggests {
  padding: 0.45rem;
  border: 1px solid var(--support-line);
  border-radius: 0.8rem;
  background: #0d1218;
}

#support-new-app .player-suggest {
  min-height: 3rem;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
}

#support-new-app .player-suggest:hover {
  border-color: rgba(182, 255, 42, 0.24);
  background: rgba(182, 255, 42, 0.05);
}

@media (max-width: 1100px) {
  #support-app .ticket-nav__top {
    align-items: stretch;
  }

  #support-app .ticket-nav__tabs {
    grid-template-columns: repeat(5, minmax(6.5rem, 1fr));
    overflow-x: auto;
    padding-bottom: 0.2rem;
    scrollbar-width: thin;
  }

  #support-app .ticket-nav__actions {
    flex: 1 1 100%;
    justify-content: flex-end;
  }

  #support-app .ticket-list-head,
  #support-app .ticket-table--compact .ticket-row {
    grid-template-columns: 5.75rem minmax(0, 1fr) 12rem;
  }
}

@media (max-width: 720px) {
  #support-app .ticket-nav {
    padding: 0.85rem;
    border-radius: 0.95rem;
  }

  #support-app .ticket-nav__tabs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-inline: 0;
    overflow: visible;
  }

  #support-app .ticket-nav__tab {
    min-width: 0;
    min-height: 2.85rem;
    padding: 0.58rem 0.45rem;
    justify-items: center;
    text-align: center;
  }

  #support-app .ticket-nav__tab:nth-last-child(-n + 2) {
    grid-column: span 3;
  }

  #support-app .ticket-nav__tab-hint {
    display: none;
  }

  #support-app .ticket-nav__actions,
  #support-app .ticket-nav__actions .btn,
  #support-app .ticket-nav__new,
  #support-app .ticket-nav__search-btn {
    width: 100%;
  }

  #support-app .ticket-list-head {
    display: none;
  }

  #support-app .ticket-table--compact .ticket-row {
    grid-template-columns: 1fr;
    gap: 0.55rem;
    min-height: 0;
    padding: 0.95rem;
  }

  #support-app .ticket-row__aside,
  #support-app .ticket-row__badges {
    justify-items: start;
    justify-content: flex-start;
  }

  #support-app .ticket-row__aside {
    grid-template-columns: 1fr auto;
    width: 100%;
    align-items: center;
  }

  #support-ticket-app .ticket-subnav,
  #support-new-app .ticket-subnav {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }

  #support-ticket-app .ticket-detail-page__toolbar,
  #support-ticket-app .ticket-detail-page__links {
    align-items: stretch;
  }

  #support-ticket-app .ticket-detail-page__toolbar > .btn,
  #support-ticket-app .ticket-detail-page__links,
  #support-ticket-app .ticket-detail-page__links .btn {
    width: 100%;
  }

  #support-ticket-app .ticket-detail__head {
    flex-direction: column;
  }

  #support-ticket-app .ticket-detail__badges {
    justify-content: flex-start;
  }

  #support-ticket-app .ticket-section {
    padding: 0.8rem;
  }

  #support-ticket-app .ticket-bubble,
  #support-ticket-app .ticket-bubble--user {
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.55rem;
  }

  #support-ticket-app .ticket-bubble__avatar,
  #support-ticket-app .ticket-bubble--user .ticket-bubble__avatar {
    grid-column: 1;
    grid-row: 1;
    width: 2rem;
    height: 2rem;
  }

  #support-ticket-app .ticket-bubble__body,
  #support-ticket-app .ticket-bubble--user .ticket-bubble__body {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    justify-self: stretch;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.9rem;
  }

  #support-ticket-app .ticket-bubble__meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.15rem;
  }

  #support-ticket-app .ticket-staff-form__row,
  #support-new-app .ticket-create {
    grid-template-columns: minmax(0, 1fr);
  }

  #support-new-app .ticket-create > label,
  #support-new-app .ticket-create > .flash,
  #support-new-app .ticket-create > .player-picked,
  #support-new-app .ticket-create > .player-suggests,
  #support-new-app .ticket-create > .btn {
    grid-column: 1;
  }

  #support-ticket-app .ticket-staff-form > .btn,
  #support-ticket-app .ticket-reply--detail > .btn,
  #support-new-app .ticket-create > .btn {
    width: 100%;
    justify-self: stretch;
  }
}

/* These overrides intentionally sit after legacy profile rules. */
.featured-slot {
  border-color: rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.1), transparent 42%),
    linear-gradient(155deg, #242a34 0%, #171b22 58%, #101319 100%);
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55);
}

.featured-slot--empty {
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.06), transparent 46%),
    linear-gradient(155deg, #1d222b, #12161c);
  box-shadow: 0 9px 20px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.featured-slot.is-locked {
  opacity: 0.72;
  border-color: rgba(255, 255, 255, 0.08);
  background: linear-gradient(155deg, #1b2028, #11151b);
  box-shadow: 0 7px 16px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.045), inset 0 -8px 18px rgba(0, 0, 0, 0.18);
}

.featured-badge-picker__trigger {
  border-color: rgba(255, 255, 255, 0.18);
  background: linear-gradient(180deg, #11151b, #090b0f);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.achieve-claim:disabled,
.reward-meter__claim:disabled,
.profile-claim-all:disabled {
  opacity: 0.7;
  background: rgba(255, 255, 255, 0.065);
  color: rgba(255, 255, 255, 0.7);
}

.reward-meter__pill--pts {
  color: #b6ff2a;
  background: rgba(182, 255, 42, 0.15);
  box-shadow: inset 0 0 0 1px rgba(182, 255, 42, 0.18);
}

.activity-list li {
  gap: 0.28rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.075), transparent 48%), rgba(255, 255, 255, 0.025);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.lvl-tint--base {
  --lvl-tint-color: #e5e7eb;
  --lvl-tint-bg: rgba(229, 231, 235, 0.14);
  --lvl-tint-ring: rgba(229, 231, 235, 0.38);
}
.lvl-tint--green {
  --lvl-tint-color: #4ade80;
  --lvl-tint-bg: rgba(34, 197, 94, 0.18);
  --lvl-tint-ring: rgba(74, 222, 128, 0.48);
}
.lvl-tint--teal {
  --lvl-tint-color: #facc15;
  --lvl-tint-bg: rgba(234, 179, 8, 0.18);
  --lvl-tint-ring: rgba(250, 204, 21, 0.5);
}
.lvl-tint--blue {
  --lvl-tint-color: #fb923c;
  --lvl-tint-bg: rgba(249, 115, 22, 0.2);
  --lvl-tint-ring: rgba(251, 146, 60, 0.54);
}
.lvl-tint--violet {
  --lvl-tint-color: #fb7185;
  --lvl-tint-bg: rgba(225, 29, 72, 0.2);
  --lvl-tint-ring: rgba(251, 113, 133, 0.56);
}
.lvl-tint--gold {
  --lvl-tint-color: #f472b6;
  --lvl-tint-bg: rgba(219, 39, 119, 0.21);
  --lvl-tint-ring: rgba(244, 114, 182, 0.58);
}
.lvl-tint--orange {
  --lvl-tint-color: #a78bfa;
  --lvl-tint-bg: rgba(124, 58, 237, 0.22);
  --lvl-tint-ring: rgba(167, 139, 250, 0.62);
}
.lvl-tint--mythic {
  --lvl-tint-color: #fde68a;
  --lvl-tint-bg: linear-gradient(135deg, rgba(234, 179, 8, 0.28), rgba(190, 24, 93, 0.22));
  --lvl-tint-ring: rgba(253, 230, 138, 0.72);
}

/* Short landscape laptop view: retain the compact desktop chrome without
   changing full-size monitor or resize-safe stacked hero layouts. */
@media (min-width: 1024px) and (max-width: 1439px) and (max-height: 850px) and (hover: hover) and (pointer: fine) {
  .site-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    width: min(100% - var(--space-4), 90rem);
    gap: 0.4rem;
  }

  .site-header__inner > .brand {
    justify-self: start;
    min-width: 0;
  }

  .site-header__inner .brand__name {
    display: inline;
    max-width: none;
  }

  .site-header__inner .nav {
    display: flex;
    justify-content: center;
    justify-self: center;
    min-width: 0;
    gap: 0;
  }

  .site-header__inner .nav a,
  .site-header__inner .nav-trigger {
    gap: 0.15rem;
    padding-inline: 0.28rem;
    font-size: 0.72rem;
    white-space: nowrap;
  }

  .site-header__inner .nav .irg-icon,
  .site-header__inner .nav-trigger .irg-icon {
    display: none;
  }

  .site-header__inner .header-actions.is-authed {
    display: flex;
    justify-self: end;
    margin-left: 0;
    gap: 0.3rem;
  }

  .site-header__inner .header-actions.is-authed .notif-bell {
    display: block;
  }

  .site-header__inner .nav-toggle {
    display: none;
  }
}

/* Keep the hero centered on the full laptop viewport. The smaller Discord
   overlay ends before the centered action row begins at this width. */
@media (min-width: 1200px) and (max-width: 1439px) and (max-height: 850px) and (hover: hover) and (pointer: fine) {
  .hero--esports.hero--home {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: min(56vh, 34rem);
    padding: 0;
  }

  .hero--esports .hero-discord {
    position: absolute;
    left: clamp(1rem, 2vw, 1.5rem);
    top: 50%;
    transform: translateY(-50%);
    width: min(240px, 20vw);
    max-width: 240px;
    margin: 0;
    order: initial;
  }

  .hero--esports .hero__content {
    width: 100%;
    max-width: 42rem;
    margin-inline: auto;
    padding: 0;
    order: initial;
  }

  .hero--esports .hero__actions-row {
    flex-wrap: nowrap;
  }

  .hero--esports .hero__actions-row .btn {
    flex: 1 1 auto;
    max-width: 22rem;
    white-space: nowrap;
  }
}
.admin-discord-automations__layout {
  display: grid;
  grid-template-columns: minmax(15rem, 0.8fr) minmax(0, 1.5fr);
  gap: 1rem;
  align-items: start;
}

.admin-discord-automations__rows {
  display: grid;
  gap: 0.45rem;
}

.admin-discord-automations__row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.025);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.admin-discord-automations__row:hover,
.admin-discord-automations__row.is-selected {
  border-color: color-mix(in srgb, var(--color-gold, #d4af37) 48%, transparent);
  background: color-mix(in srgb, var(--color-gold, #d4af37) 7%, transparent);
}

.admin-discord-automations__row.is-draft {
  border-style: dashed;
}

.admin-discord-automations__row-main {
  min-width: 0;
  display: grid;
  gap: 0.2rem;
}

.admin-discord-automations__row-main strong,
.admin-discord-automations__row-main .muted {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-discord-automations__preview {
  display: grid;
  gap: 0.45rem;
  padding-top: 0.15rem;
}

.admin-discord-automations__eyebrow {
  color: var(--color-text-muted);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-discord-automations__message {
  display: grid;
  gap: 0.15rem;
  padding: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.7rem;
  background: rgba(10, 12, 18, 0.52);
}

.admin-discord-automations__message p {
  margin: 0.45rem 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 860px) {
  .admin-discord-automations__layout {
    grid-template-columns: 1fr;
  }
}

/* Match draft chrome + IRG+ captain opt-out */
.match-draft-chrome {
  display: grid;
  gap: 0.65rem;
  margin: 0 0 0.95rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(200, 170, 110, 0.18);
  border-radius: 0.85rem;
  background:
    linear-gradient(180deg, rgba(28, 24, 18, 0.92), rgba(12, 12, 14, 0.88));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}
.match-draft-chrome__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.match-draft-chrome__row--tools {
  padding-bottom: 0.15rem;
}
.match-draft-chrome__row--actions {
  padding-top: 0.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.match-draft-chrome__group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  padding: 0.2rem 0.35rem 0.2rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.match-draft-chrome__group[data-side="blue"] {
  border-color: rgba(90, 150, 220, 0.28);
  background: rgba(50, 90, 150, 0.12);
}
.match-draft-chrome__group[data-side="red"] {
  border-color: rgba(210, 90, 90, 0.28);
  background: rgba(120, 40, 40, 0.14);
}
.match-draft-chrome__group-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
  padding: 0 0.2rem;
}
.match-draft-chrome__btn,
.match-draft-chrome__link {
  appearance: none;
  border: 1px solid rgba(200, 170, 110, 0.28);
  background: rgba(21, 21, 21, 0.95);
  color: #e0c48a;
  border-radius: 0.55rem;
  padding: 0.42rem 0.8rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease,
    box-shadow 0.12s ease,
    transform 0.1s ease;
}
.match-draft-chrome__link--blue {
  border-color: rgba(110, 170, 235, 0.35);
  color: #b7d4f5;
}
.match-draft-chrome__link--red {
  border-color: rgba(230, 120, 120, 0.35);
  color: #f0b4b4;
}
.match-draft-chrome__btn:hover:not(:disabled),
.match-draft-chrome__link:hover {
  border-color: #e0c48a;
  color: #f0ddb0;
  background: #1c1a16;
  box-shadow: 0 0 0 1px rgba(200, 170, 110, 0.14), 0 6px 16px rgba(0, 0, 0, 0.28);
}
.match-draft-chrome__btn:active:not(:disabled) {
  transform: scale(0.98);
}
.match-draft-chrome__btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  box-shadow: none;
}
.match-draft-chrome__btn--primary {
  border-color: rgba(200, 170, 110, 0.55);
  background: rgba(200, 170, 110, 0.12);
}
.match-draft-chrome__btn--info.is-active,
.match-draft-chrome__btn--info:hover:not(:disabled) {
  border-color: rgba(150, 190, 240, 0.5);
  color: #d5e6fb;
  background: rgba(70, 110, 170, 0.22);
}
.match-draft-chrome__btn--yes {
  border-color: rgba(90, 200, 130, 0.55);
  background: rgba(50, 130, 80, 0.22);
  color: #b8efc8;
}
.match-draft-chrome__btn--danger {
  border-color: rgba(220, 90, 90, 0.55);
  background: rgba(120, 35, 35, 0.28);
  color: #f3b4b4;
}
.match-draft-chrome__btn--ghost {
  border-color: rgba(255, 255, 255, 0.12);
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
}
.match-draft-chrome__btn--compact {
  padding: 0.28rem 0.55rem;
  font-size: 0.75rem;
}
.match-draft-chrome__vote {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
  align-items: center;
  padding: 0.35rem 0.55rem;
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.match-draft-chrome__vote-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.match-draft-chrome__meta {
  font-size: 0.8rem;
  opacity: 0.86;
}
.match-draft-chrome__meta strong {
  color: #e8d09a;
  font-weight: 700;
}
.match-draft-chrome__why {
  margin-top: 0.15rem;
  padding: 0.85rem 0.9rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(200, 170, 110, 0.22);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(200, 170, 110, 0.08), transparent 55%),
    rgba(8, 8, 10, 0.72);
  display: grid;
  gap: 0.7rem;
  outline: none;
  max-height: min(28rem, 55vh);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(200, 170, 110, 0.45) rgba(255, 255, 255, 0.06);
}
.match-draft-chrome__why::-webkit-scrollbar {
  width: 0.55rem;
}
.match-draft-chrome__why::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
}
.match-draft-chrome__why::-webkit-scrollbar-thumb {
  background: rgba(200, 170, 110, 0.45);
  border-radius: 999px;
}
.match-draft-chrome__why::-webkit-scrollbar-thumb:hover {
  background: rgba(224, 196, 138, 0.65);
}
.match-draft-chrome__why-head {
  position: sticky;
  top: -0.85rem;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin: -0.85rem -0.9rem 0;
  padding: 0.85rem 0.9rem 0.55rem;
  background: linear-gradient(
    180deg,
    rgba(14, 12, 10, 0.98) 70%,
    rgba(14, 12, 10, 0.72)
  );
}
.match-draft-chrome__why-head strong {
  display: block;
  font-size: 1rem;
  letter-spacing: 0.01em;
  color: #f0ddb0;
}
.match-draft-chrome__why-mode {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
}
.match-draft-chrome__why-blurb {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.86);
}
.match-draft-chrome__why-blurb strong {
  color: #f0ddb0;
}
.match-draft-chrome__why-sections {
  display: grid;
  gap: 0.65rem;
}
.match-draft-chrome__why-section {
  padding: 0.55rem 0.65rem;
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.match-draft-chrome__why-section.is-emphasis {
  border-color: rgba(230, 190, 90, 0.35);
  background: rgba(120, 90, 20, 0.16);
}
.match-draft-chrome__why-section h4 {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(224, 196, 138, 0.92);
}
.match-draft-chrome__why-section p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.4;
  opacity: 0.9;
}
.match-draft-chrome__why-section ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.3rem;
}
.match-draft-chrome__why-section li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.45rem;
  align-items: baseline;
  font-size: 0.86rem;
  line-height: 1.35;
}
.match-draft-chrome__why-name {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.94);
}
.match-draft-chrome__why-rating,
.match-draft-chrome__why-note,
.match-draft-chrome__why-reason {
  opacity: 0.78;
  font-size: 0.8rem;
}
.match-draft-chrome__why-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.08rem 0.4rem;
  border-radius: 999px;
  border: 1px solid rgba(90, 200, 130, 0.4);
  background: rgba(40, 110, 70, 0.28);
  color: #b8efc8;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.match-draft-chrome__why-footer {
  margin: 0;
  font-size: 0.75rem;
  opacity: 0.65;
  line-height: 1.35;
}
.captain-opt-out-orb,
.captain-opt-out-panel {
  position: fixed;
  z-index: 80;
}
.captain-opt-out-orb {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 200, 80, 0.45);
  background: rgba(30, 24, 10, 0.92);
  color: #f6d889;
  font-weight: 700;
  cursor: grab;
}
.captain-opt-out-panel {
  width: min(20rem, calc(100vw - 1.5rem));
  border: 1px solid rgba(255, 200, 80, 0.35);
  border-radius: 0.75rem;
  background: rgba(16, 14, 10, 0.96);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  padding: 0.75rem;
  display: grid;
  gap: 0.55rem;
}
.captain-opt-out-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: grab;
}
.captain-opt-out-panel__actions {
  display: flex;
  gap: 0.4rem;
}
.captain-opt-out-panel__actions button {
  flex: 1;
  border-radius: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  padding: 0.45rem 0.5rem;
  cursor: pointer;
}
.queue-follower__irg-plus-offer {
  margin: 0.5rem 0;
  padding: 0.65rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 200, 80, 0.35);
  background: rgba(40, 30, 8, 0.45);
  display: grid;
  gap: 0.45rem;
}

/* Donations ? Benefits CRM */
.admin-benefits-crm__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
  padding: 0.85rem 1rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  position: sticky;
  top: 0.5rem;
  z-index: 5;
}
.admin-benefits-crm__toolbar.is-dirty {
  border-color: rgba(212, 175, 55, 0.45);
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.12);
}
.admin-benefits-crm__toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem;
}
.admin-benefits-crm__reason {
  min-width: 12rem;
  margin: 0;
}
.admin-benefits-crm__jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.admin-benefits-crm__jump button {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  font: inherit;
  font-size: 0.8125rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
}
.admin-benefits-crm__jump button.is-active {
  border-color: rgba(212, 175, 55, 0.5);
  background: rgba(212, 175, 55, 0.12);
}
.admin-benefits-crm__filters {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.admin-benefits-crm__perk {
  display: grid;
  gap: 0.75rem;
  padding: 0.85rem 0.95rem;
  border-radius: 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.18);
}
.admin-benefits-crm__perk-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  align-items: flex-start;
}
.admin-benefits-crm__perk-title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 650;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}
.admin-benefits-crm__perk-blurb {
  margin: 0 0 0.35rem;
  max-width: 52rem;
  font-size: 0.875rem;
}
.admin-benefits-crm__perk-id {
  font-size: 0.75rem;
  opacity: 0.75;
}
.admin-benefits-crm__state {
  min-width: 9rem;
  margin: 0;
}
.admin-benefits-crm__knobs {
  padding-top: 0.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.admin-benefits-crm__role-status {
  font-size: 0.8125rem;
}
@media (max-width: 720px) {
  .admin-benefits-crm__toolbar {
    position: static;
  }
}

/* Queue companion v2 pilot: shared visual language for orb, panel, and PiP. */
.queue-follower--orb:not(.is-character) {
  animation: qc-v2-orb-enter 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.queue-follower--orb.is-character {
  border-radius: 43%;
  background:
    radial-gradient(circle at 48% 28%, rgba(37, 117, 146, 0.26), transparent 52%),
    linear-gradient(155deg, rgba(11, 33, 57, 0.97), rgba(5, 17, 35, 0.97));
  box-shadow:
    0 11px 26px rgba(1, 7, 19, 0.46),
    inset 0 0 0 1px rgba(93, 198, 224, 0.28);
  animation: qc-v2-orb-enter 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.queue-follower--orb:not(.is-character) .queue-follower__orb-core {
  background:
    radial-gradient(circle at 34% 24%, rgba(235, 253, 255, 0.78), transparent 17%),
    radial-gradient(circle at 50% 48%, rgba(35, 201, 236, 0.65), transparent 58%),
    linear-gradient(145deg, #274e7d 4%, #0c213c 58%, #071324 100%);
  box-shadow:
    0 12px 30px rgba(2, 8, 24, 0.52),
    0 0 25px rgba(30, 190, 232, 0.28),
    inset 0 0 0 1px rgba(186, 237, 249, 0.48),
    inset 0 -8px 15px rgba(1, 12, 36, 0.42);
}
.queue-follower--orb:not(.is-character) .queue-follower__orb-core::after {
  content: "";
  position: absolute;
  inset: 0.34rem;
  border-radius: 50%;
  border: 1px solid rgba(167, 227, 238, 0.2);
  box-shadow: 0 0 9px rgba(40, 211, 236, 0.13);
  pointer-events: none;
}
.queue-follower--orb:not(.is-character) .queue-follower__orb-ring {
  border-color: rgba(91, 214, 235, 0.44);
  box-shadow: 0 0 10px rgba(43, 183, 224, 0.16);
}
.queue-follower--orb .queue-follower__orb-badge {
  color: #edfaff;
  background: linear-gradient(135deg, #1593b4, #163c6c);
  border: 1px solid rgba(188, 244, 250, 0.42);
  box-shadow: 0 3px 10px rgba(2, 13, 33, 0.46);
}
.queue-follower--orb .queue-follower__orb-badge.is-match {
  background: linear-gradient(135deg, #2ba990, #15586b);
}
.queue-follower--panel {
  background:
    radial-gradient(circle at 93% 0%, rgba(33, 182, 207, 0.14), transparent 39%),
    linear-gradient(155deg, #172b45 0%, #101d32 46%, #0a1425 100%);
  border: 1px solid rgba(121, 195, 220, 0.29);
  box-shadow:
    0 19px 45px rgba(2, 7, 19, 0.52),
    0 0 27px rgba(24, 170, 204, 0.1),
    inset 0 1px 0 rgba(205, 242, 251, 0.13);
  animation: qc-v2-panel-enter 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.queue-follower--panel .queue-follower__head {
  background: linear-gradient(90deg, rgba(23, 81, 109, 0.4), rgba(14, 31, 53, 0.26));
  border-bottom: 1px solid rgba(117, 193, 217, 0.19);
}
.queue-follower--panel .queue-follower__scroll {
  background: transparent;
}
.queue-follower--panel .queue-follower__foot {
  background: linear-gradient(0deg, rgba(7, 19, 36, 0.52), transparent);
  border-top: 1px solid rgba(117, 193, 217, 0.13);
}
.queue-follower--panel.is-document-pip {
  width: 100%;
  height: 100%;
  border-radius: 0;
}
.queue-companion__emote,
.queue-companion__name {
  border: 1px solid rgba(128, 210, 224, 0.28);
  box-shadow: 0 7px 19px rgba(4, 12, 27, 0.35);
}
.queue-pet__raster-stage--strip .queue-pet__strip {
  transition: opacity 145ms ease-out;
}
.queue-pet__raster-stage--strip .queue-pet__strip.is-front {
  z-index: 3;
}
.queue-pet__raster-stage--strip .queue-pet__strip--previous {
  z-index: 2;
}
.queue-pet__raster-stage--strip .queue-pet__strip.is-hidden {
  opacity: 0;
}
@keyframes qc-v2-orb-enter {
  from { opacity: 0; scale: 0.88; }
  to { opacity: 1; scale: 1; }
}
@keyframes qc-v2-panel-enter {
  from { opacity: 0; scale: 0.96; }
  to { opacity: 1; scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .queue-follower--orb:not(.is-character),
  .queue-follower--orb.is-character,
  .queue-follower--panel {
    animation: none;
  }
  .queue-pet__raster-stage--strip .queue-pet__strip {
    transition: none;
  }
  .queue-pet__rig-canvas,
  .queue-pet__model-canvas,
  .queue-pet.is-rig .queue-pet__raster-stage,
  .queue-pet.is-model .queue-pet__raster-stage {
    transition: none;
  }
}

/* Admin hub redesign: clearer hierarchy, denser workspaces, and calmer surfaces. */
[data-chrome="admin"] {
  --color-text: #edf2fb;
  --color-text-muted: #9ba9c1;
  --color-text-subtle: #71809a;
  --color-bg: #0b111d;
  --color-bg-elevated: #121b2b;
  --color-surface: #101a2a;
  --color-surface-hover: #17243a;
  --color-border: rgba(148, 163, 184, 0.16);
  --admin-canvas: #0b111d;
  --admin-panel: #111b2b;
  --admin-panel-raised: #152137;
  --admin-line: rgba(148, 163, 184, 0.16);
  --admin-accent: #4b83ff;
  --admin-accent-soft: rgba(75, 131, 255, 0.13);
  --admin-control-h: 2.55rem;
  --admin-control-radius: 0.65rem;
  --admin-panel-pad: 1.15rem;
}

[data-chrome="admin"] .admin-page {
  background: var(--admin-canvas);
  color: var(--color-text);
  --admin-content-max: 58rem;
  --admin-content-max-wide: 88rem;
}

[data-chrome="admin"] .admin-page__bar {
  position: relative;
  z-index: 2;
  min-height: 3.5rem;
  padding: 0.55rem 1.25rem;
  background: #0e1929;
  border-bottom-color: rgba(115, 153, 222, 0.2);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.18);
}

[data-chrome="admin"] .admin-page__crumb-root {
  color: #92a1bb;
}

[data-chrome="admin"] .admin-page__crumb .is-current {
  color: #f4f7ff;
}

[data-chrome="admin"] .admin-page__exit,
[data-chrome="admin"] .admin-page__nav-toggle {
  min-height: 2.2rem;
  border-color: var(--admin-line);
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.035);
  color: #dce6f7;
}

[data-chrome="admin"] .admin-page__exit:hover,
[data-chrome="admin"] .admin-page__nav-toggle:hover {
  border-color: rgba(95, 148, 255, 0.52);
  background: var(--admin-accent-soft);
}

[data-chrome="admin"] .admin-hub {
  grid-template-columns: 17.5rem minmax(0, 1fr);
  background: var(--admin-canvas);
}

[data-chrome="admin"] .admin-hub__nav {
  border-right-color: rgba(115, 153, 222, 0.18);
  background: #0e1929;
}

[data-chrome="admin"] .admin-hub__nav-brand {
  padding: 1.1rem 1rem 0.9rem;
  border-bottom-color: var(--admin-line);
}

[data-chrome="admin"] .admin-hub__nav-brand-mark {
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
}

[data-chrome="admin"] .admin-hub__nav-brand-copy strong {
  font-size: 0.96rem;
}

[data-chrome="admin"] .admin-hub__nav-kicker {
  padding-inline: 0.65rem;
  color: #8293af;
  font-size: 0.64rem;
  letter-spacing: 0.12em;
}

[data-chrome="admin"] .admin-hub__guild-picker {
  padding: 0.85rem 0.75rem;
  border-bottom-color: var(--admin-line);
}

[data-chrome="admin"] .admin-hub__guild-trigger {
  min-height: 3.15rem;
  border-color: var(--admin-line);
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.035);
}

[data-chrome="admin"] .admin-hub__guild-trigger:hover,
[data-chrome="admin"] .admin-hub__guild-trigger.is-open {
  border-color: rgba(95, 148, 255, 0.5);
  background: rgba(75, 131, 255, 0.1);
  box-shadow: none;
}

[data-chrome="admin"] .admin-hub__nav-scroll {
  gap: 1.15rem;
  padding: 0.9rem 0.7rem 1.25rem;
}

[data-chrome="admin"] .admin-hub__nav-btn {
  min-height: 2.55rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 0.7rem;
  color: #b4c0d4;
  font-size: 0.84rem;
}

[data-chrome="admin"] .admin-hub__nav-btn:hover:not(.is-disabled) {
  background: rgba(255, 255, 255, 0.045);
  color: #f2f6ff;
}

[data-chrome="admin"] .admin-hub__nav-item.is-active > .admin-hub__nav-row > .admin-hub__nav-btn,
[data-chrome="admin"] .admin-hub__nav-btn.is-active {
  border-color: rgba(91, 145, 255, 0.26);
  background: rgba(75, 131, 255, 0.15);
  color: #f5f8ff;
  box-shadow: inset 3px 0 0 #5a8fff;
}

[data-chrome="admin"] .admin-hub__nav-tag {
  background: rgba(75, 131, 255, 0.14);
  color: #a9c7ff;
}

[data-chrome="admin"] .admin-hub__nav-children-panel {
  margin-left: 0.75rem;
  padding-left: 0.55rem;
  border-left-color: rgba(115, 153, 222, 0.24);
}

[data-chrome="admin"] .admin-hub__nav-child {
  min-height: 2.25rem;
  color: #9dabc1;
}

[data-chrome="admin"] .admin-hub__nav-child.is-active {
  background: rgba(75, 131, 255, 0.12);
  color: #eaf1ff;
}

[data-chrome="admin"] .admin-hub__main {
  padding: clamp(1rem, 2.3vw, 1.75rem);
  background:
    radial-gradient(ellipse 68% 26% at 50% 0%, rgba(71, 117, 201, 0.09), transparent 70%),
    #0b111d;
}

[data-chrome="admin"] .admin-hub__content {
  max-width: var(--admin-content-max-wide);
}

[data-chrome="admin"] .admin-section-shell,
[data-chrome="admin"] .admin-console,
[data-chrome="admin"] .admin-donations,
[data-chrome="admin"] .admin-health-panel,
[data-chrome="admin"] .admin-hub-home {
  gap: 1.15rem;
}

[data-chrome="admin"] .admin-section-header {
  align-items: center;
  gap: 0.85rem 1.25rem;
  margin-bottom: 0.15rem;
  padding: 0 0 1rem;
  border-bottom-color: var(--admin-line);
}

[data-chrome="admin"] .admin-section-header__title {
  color: #f2f6ff;
  font-size: clamp(1.2rem, 1.5vw, 1.45rem);
  font-weight: 680;
  letter-spacing: -0.035em;
}

[data-chrome="admin"] .admin-section-header__desc {
  max-width: 58rem;
  color: #a6b2c6;
  font-size: 0.84rem;
  line-height: 1.55;
}

[data-chrome="admin"] .admin-subnav__track {
  gap: 0.4rem;
  padding: 0 0 0.7rem;
  box-shadow: inset 0 -1px 0 var(--admin-line);
}

[data-chrome="admin"] .admin-subnav__tab {
  min-height: 2.4rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid transparent;
  border-radius: 0.7rem;
  color: #aab7cb;
}

[data-chrome="admin"] .admin-subnav__tab.is-active,
[data-chrome="admin"] .admin-subnav__tab:hover:not(:disabled) {
  border-color: rgba(95, 148, 255, 0.27);
  background: rgba(75, 131, 255, 0.13);
  color: #f0f5ff;
}

[data-chrome="admin"] .admin-content-body {
  gap: 1rem;
}

[data-chrome="admin"] .admin-panel,
[data-chrome="admin"] .admin-card,
[data-chrome="admin"] .admin-section,
[data-chrome="admin"] .admin-check-card {
  border-color: var(--admin-line);
  border-radius: 0.85rem;
  background: linear-gradient(155deg, #121d2f 0%, #101827 100%);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.16);
}

[data-chrome="admin"] .admin-panel {
  gap: 1rem;
  padding: var(--admin-panel-pad);
}

[data-chrome="admin"] .admin-panel__head {
  align-items: center;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

[data-chrome="admin"] .admin-panel__title {
  color: #f1f5fd;
  font-size: 0.98rem;
  font-weight: 680;
}

[data-chrome="admin"] .admin-panel__desc {
  max-width: 55rem;
  color: #a4b1c6;
  line-height: 1.55;
}

[data-chrome="admin"] .admin-card:hover:not(.is-disabled) {
  border-color: rgba(95, 148, 255, 0.34);
}

[data-chrome="admin"] .admin-card-grid {
  gap: 0.8rem;
}

[data-chrome="admin"] .admin-stat {
  min-height: 5.4rem;
  padding: 0.95rem 1rem;
  border-color: var(--admin-line);
  border-radius: 0.8rem;
  background: linear-gradient(145deg, rgba(21, 34, 54, 0.92), rgba(15, 24, 39, 0.92));
}

[data-chrome="admin"] .admin-page .admin-table-wrap,
[data-chrome="admin"] .admin-page .admin-table-scroll,
[data-chrome="admin"] .admin-page .table-scroll {
  border-color: var(--admin-line);
  border-radius: 0.8rem;
  background: rgba(7, 12, 21, 0.45);
}

[data-chrome="admin"] .admin-page .admin-table {
  border-color: var(--admin-line);
  color: #e7edf8;
}

[data-chrome="admin"] .admin-page .admin-table thead th {
  background: #152238;
  color: #a9b9d3;
  border-bottom-color: rgba(148, 163, 184, 0.18);
}

[data-chrome="admin"] .admin-page .admin-table tbody tr:hover td {
  background: rgba(75, 131, 255, 0.055);
}

[data-chrome="admin"] .admin-page input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
[data-chrome="admin"] .admin-page select,
[data-chrome="admin"] .admin-page textarea {
  min-height: var(--admin-control-h);
  border-color: rgba(148, 163, 184, 0.23);
  border-radius: var(--admin-control-radius);
  background-color: #0c1422;
  color: #eff4ff;
}

[data-chrome="admin"] .admin-page input::placeholder,
[data-chrome="admin"] .admin-page textarea::placeholder {
  color: #71809a;
}

[data-chrome="admin"] .admin-page input:focus-visible:not([type="checkbox"]):not([type="radio"]),
[data-chrome="admin"] .admin-page select:focus-visible,
[data-chrome="admin"] .admin-page textarea:focus-visible {
  border-color: rgba(97, 151, 255, 0.8);
  box-shadow: 0 0 0 3px rgba(75, 131, 255, 0.2);
}

[data-chrome="admin"] .admin-page .btn:not(.btn-ghost):not(.btn--ghost):not(.btn-discord),
[data-chrome="admin"] .admin-page .rift-btn:not(.rift-btn--ghost) {
  border-radius: 0.65rem;
  background: #326ff0;
  box-shadow: none;
  font-weight: 650;
}

[data-chrome="admin"] .admin-page .btn:not(.btn-ghost):not(.btn--ghost):not(.btn-discord):hover:not(:disabled),
[data-chrome="admin"] .admin-page .rift-btn:not(.rift-btn--ghost):hover:not(:disabled) {
  background: #467fff;
  box-shadow: 0 5px 14px rgba(35, 94, 221, 0.2);
  filter: none;
}

[data-chrome="admin"] .admin-page .btn-ghost {
  border-radius: 0.65rem;
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: none;
  color: #d4deed;
}

[data-chrome="admin"] .admin-page button:focus-visible,
[data-chrome="admin"] .admin-page a:focus-visible,
[data-chrome="admin"] .admin-page summary:focus-visible {
  outline: 2px solid #80aaff;
  outline-offset: 2px;
}

[data-chrome="admin"] .admin-page .admin-flash,
[data-chrome="admin"] .admin-page .admin-banner {
  border-radius: 0.75rem;
}

/* Analytics traffic and access complete the same card-based review experience. */
[data-chrome="admin"] .wa-dashboard {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

[data-chrome="admin"] .wa-dashboard__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.15rem;
  border: 1px solid rgba(95, 148, 255, 0.22);
  border-radius: 0.9rem;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(75, 131, 255, 0.16), transparent 46%),
    linear-gradient(150deg, #14223a, #111a2a);
}

[data-chrome="admin"] .wa-dashboard__eyebrow {
  display: block;
  margin-bottom: 0.3rem;
  color: #94b8ff;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

[data-chrome="admin"] .wa-dashboard__head h2 {
  margin: 0;
  color: #f4f7ff;
  font-size: 1.35rem;
  letter-spacing: -0.035em;
}

[data-chrome="admin"] .wa-dashboard__head p {
  max-width: 45rem;
  margin: 0.35rem 0 0;
  color: #aab8ce;
  font-size: 0.82rem;
  line-height: 1.5;
}

[data-chrome="admin"] .wa-dashboard__scope {
  flex: 0 0 auto;
  padding: 0.38rem 0.65rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  background: rgba(6, 12, 22, 0.36);
  color: #c0cce0;
  font-size: 0.72rem;
}

[data-chrome="admin"] .wa-analytics-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.4rem;
  border: 1px solid var(--admin-line);
  border-radius: 0.85rem;
  background: rgba(13, 22, 36, 0.8);
}

[data-chrome="admin"] .wa-analytics-tabs .btn {
  min-height: 2.4rem;
  padding: 0.48rem 0.85rem;
  border: 1px solid transparent;
  border-radius: 0.65rem;
  background: transparent;
  color: #aab7cb;
  box-shadow: none;
  font-size: 0.79rem;
  white-space: nowrap;
}

[data-chrome="admin"] .wa-analytics-tabs .btn.btn--primary,
[data-chrome="admin"] .wa-analytics-tabs .btn[aria-pressed="true"] {
  border-color: rgba(91, 145, 255, 0.32);
  background: rgba(75, 131, 255, 0.18);
  color: #f2f6ff;
}

[data-chrome="admin"] .wa-analytics-tabs .btn:hover:not(:disabled) {
  border-color: rgba(91, 145, 255, 0.3);
  background: rgba(75, 131, 255, 0.12);
  color: #fff;
}

[data-chrome="admin"] .wa-traffic-panel,
[data-chrome="admin"] .wa-access {
  align-content: start;
  gap: 1rem;
  padding: 1.15rem;
}

[data-chrome="admin"] .wa-head {
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

[data-chrome="admin"] .wa-head__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.55rem;
}

[data-chrome="admin"] .wa-live {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  min-height: 2rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid rgba(52, 211, 153, 0.22);
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.08);
  color: #a7f3d0;
  font-size: 0.71rem;
  white-space: nowrap;
}

[data-chrome="admin"] .wa-live i {
  width: 0.43rem;
  height: 0.43rem;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.1);
}

[data-chrome="admin"] .wa-live strong {
  color: #f0fdf7;
  font-variant-numeric: tabular-nums;
}

[data-chrome="admin"] .wa-live.is-muted {
  border-color: var(--admin-line);
  background: rgba(255, 255, 255, 0.03);
  color: #9ba9c1;
}

[data-chrome="admin"] .wa-live.is-muted i {
  background: #71809a;
  box-shadow: none;
}

[data-chrome="admin"] .wa-period {
  padding: 0.18rem;
  border: 1px solid var(--admin-line);
  border-radius: 0.7rem;
  background: rgba(6, 12, 22, 0.5);
}

[data-chrome="admin"] .wa-period__btn {
  min-height: 1.95rem;
  padding: 0.35rem 0.6rem;
  border-radius: 0.5rem;
  color: #9eacc1;
  font-size: 0.73rem;
}

[data-chrome="admin"] .wa-period__btn.is-active {
  background: #253d64;
  color: #f3f7ff;
}

[data-chrome="admin"] .wa-body {
  gap: 0.9rem;
}

[data-chrome="admin"] .wa-metrics {
  grid-template-columns: repeat(auto-fit, minmax(9.8rem, 1fr));
  gap: 0.65rem;
}

[data-chrome="admin"] .wa-metric {
  min-height: 6rem;
  padding: 0.8rem 0.9rem;
  border-color: var(--admin-line);
  border-radius: 0.78rem;
  background: linear-gradient(150deg, #17243a, #121c2c);
}

[data-chrome="admin"] .wa-metric__label {
  color: #9eacc1;
  font-size: 0.69rem;
  letter-spacing: 0.055em;
}

[data-chrome="admin"] .wa-metric__value {
  color: #f3f7ff;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-variant-numeric: tabular-nums;
}

[data-chrome="admin"] .wa-metric__meta {
  gap: 0.35rem;
  color: #8f9eb5;
  font-size: 0.69rem;
}

[data-chrome="admin"] .wa-chart-card,
[data-chrome="admin"] .wa-rank {
  min-width: 0;
  border-color: var(--admin-line);
  border-radius: 0.82rem;
  background: rgba(9, 15, 25, 0.46);
}

[data-chrome="admin"] .wa-chart-card {
  padding: 0.9rem 1rem;
}

[data-chrome="admin"] .wa-chart-card__head {
  margin-bottom: 0.3rem;
}

[data-chrome="admin"] .wa-ranks {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

[data-chrome="admin"] .wa-rank {
  overflow: hidden;
  padding: 0.8rem 0.9rem 0.45rem;
}

[data-chrome="admin"] .wa-rank__title {
  margin: 0 0 0.55rem;
  color: #ecf2fc;
  font-size: 0.86rem;
  font-weight: 680;
}

[data-chrome="admin"] .wa-rank__table {
  width: 100%;
  min-width: 0;
}

[data-chrome="admin"] .wa-rank__table th {
  padding: 0.45rem 0.4rem;
  color: #8293ad;
  font-size: 0.61rem;
}

[data-chrome="admin"] .wa-rank__table td {
  padding: 0.48rem 0.4rem;
  font-size: 0.75rem;
}

[data-chrome="admin"] .wa-rank__num {
  color: #d7e3f7;
  font-variant-numeric: tabular-nums;
}

[data-chrome="admin"] .wa-notice {
  margin: 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--admin-line);
  border-radius: 0.7rem;
  font-size: 0.78rem;
  line-height: 1.5;
}

[data-chrome="admin"] .wa-notice--info {
  border-color: rgba(75, 131, 255, 0.27);
  background: rgba(75, 131, 255, 0.08);
  color: #ccdcfb;
}

[data-chrome="admin"] .wa-notice--error {
  border-color: rgba(248, 113, 113, 0.28);
  background: rgba(248, 113, 113, 0.08);
  color: #fecaca;
}

[data-chrome="admin"] .wa-access__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

[data-chrome="admin"] .wa-access__section-head h3,
[data-chrome="admin"] .wa-access__add h3 {
  margin: 0;
  color: #edf3ff;
  font-size: 0.86rem;
}

[data-chrome="admin"] .wa-access__section-head > span {
  color: #97a8c3;
  font-size: 0.72rem;
}

[data-chrome="admin"] .wa-access__list {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-chrome="admin"] .wa-access__person {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  min-width: 0;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--admin-line);
  border-radius: 0.75rem;
  background: rgba(6, 12, 22, 0.34);
}

[data-chrome="admin"] .wa-access__identity {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

[data-chrome="admin"] .wa-access__identity strong {
  overflow: hidden;
  color: #eff4ff;
  font-size: 0.84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-chrome="admin"] .wa-access__identity span {
  overflow: hidden;
  color: #91a0b8;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-chrome="admin"] .wa-access__add {
  display: grid;
  gap: 0.85rem;
  padding-top: 1rem;
  border-top: 1px solid var(--admin-line);
}

[data-chrome="admin"] .wa-access__add > div:first-child p {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
}

[data-chrome="admin"] .wa-access__state,
[data-chrome="admin"] .wa-access__owner-note {
  margin: 0;
  padding: 0.8rem 0.9rem;
  border: 1px dashed rgba(148, 163, 184, 0.21);
  border-radius: 0.75rem;
  color: #aab7cb;
  font-size: 0.77rem;
}

[data-chrome="admin"] .wa-access__add .admin-form {
  align-items: end;
}

[data-chrome="admin"] .wa-access__add .admin-form > button {
  min-height: var(--admin-control-h);
}

@media (max-width: 1023px) {
  [data-chrome="admin"] .admin-hub {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-chrome="admin"] .admin-hub__nav {
    position: fixed;
    top: var(--header-offset);
    left: 0;
    bottom: 0;
    z-index: calc(var(--z-header) + 10);
    width: min(19rem, 90vw);
    max-height: none;
    transform: translateX(-100%);
    transition: transform var(--ease-out);
  }

  [data-chrome="admin"] .admin-hub__nav.is-open {
    transform: translateX(0);
  }

  [data-chrome="admin"] .admin-page__nav-toggle {
    display: inline-flex;
  }
}

@media (max-width: 720px) {
  [data-chrome="admin"] .admin-page__bar {
    padding-inline: 0.75rem;
  }

  [data-chrome="admin"] .admin-hub__main {
    padding: 0.85rem 0.65rem 1.25rem;
  }

  [data-chrome="admin"] .admin-panel {
    padding: 0.85rem;
  }

  [data-chrome="admin"] .wa-dashboard__head {
    display: grid;
    padding: 0.9rem;
  }

  [data-chrome="admin"] .wa-dashboard__scope {
    justify-self: start;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  [data-chrome="admin"] .wa-analytics-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  [data-chrome="admin"] .wa-ranks {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-chrome="admin"] .wa-head__actions {
    justify-content: flex-start;
    width: 100%;
  }

  [data-chrome="admin"] .wa-access__person {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-chrome="admin"] *,
  [data-chrome="admin"] *::before,
  [data-chrome="admin"] *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

[data-chrome="admin"] .admin-section-layout {
  grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr);
  gap: 1rem;
}

[data-chrome="admin"] .admin-section-layout__nav {
  align-content: start;
  gap: 0.35rem;
  padding: 0.65rem;
  border: 1px solid var(--admin-line);
  border-radius: 0.8rem;
  background: rgba(10, 17, 29, 0.55);
}

[data-chrome="admin"] .admin-section-layout__nav > button,
[data-chrome="admin"] .admin-section-layout__nav > a {
  min-height: 2.35rem;
  padding: 0.48rem 0.65rem;
  border: 1px solid transparent;
  border-radius: 0.58rem;
  background: transparent;
  color: #aab7cb;
  font: inherit;
  text-align: left;
  text-decoration: none;
}

[data-chrome="admin"] .admin-section-layout__nav > button:hover,
[data-chrome="admin"] .admin-section-layout__nav > a:hover,
[data-chrome="admin"] .admin-section-layout__nav > .is-active {
  border-color: rgba(91, 145, 255, 0.26);
  background: rgba(75, 131, 255, 0.13);
  color: #eff4ff;
}

[data-chrome="admin"] .admin-section-layout__body {
  display: grid;
  align-content: start;
  gap: 0.9rem;
}

[data-chrome="admin"] .admin-subnav--grouped .admin-subnav__groups {
  gap: 0.5rem;
  padding-bottom: 0.75rem;
  box-shadow: inset 0 -1px 0 var(--admin-line);
}

[data-chrome="admin"] .admin-subnav__group-label {
  color: #8293ad;
  letter-spacing: 0.1em;
}

[data-chrome="admin"] .admin-subnav--grouped .admin-subnav__tab {
  min-height: 2.2rem;
}

[data-chrome="admin"] .admin-subnav__dropdown-row {
  gap: 0.55rem;
}

[data-chrome="admin"] .admin-subnav__dd-trigger {
  min-height: 3.3rem;
  border-color: var(--admin-line);
  border-radius: 0.75rem;
  background: #111c2d;
}

[data-chrome="admin"] .admin-subnav__dd-trigger:hover,
[data-chrome="admin"] .admin-subnav__dd.is-open .admin-subnav__dd-trigger,
[data-chrome="admin"] .admin-subnav__dd.is-active .admin-subnav__dd-trigger {
  border-color: rgba(91, 145, 255, 0.38);
  background: #15243c;
  box-shadow: inset 3px 0 0 #5a8fff;
}

[data-chrome="admin"] .admin-subnav__dd-menu {
  border-color: rgba(148, 163, 184, 0.2);
  border-radius: 0.75rem;
  background: #101a2a;
}

[data-chrome="admin"] .admin-subnav__dd-option:hover,
[data-chrome="admin"] .admin-subnav__dd-option.is-selected {
  background: rgba(75, 131, 255, 0.13);
  color: #eff4ff;
}

[data-chrome="admin"] .admin-subnav__badge,
[data-chrome="admin"] .admin-nav-badge {
  background: rgba(75, 131, 255, 0.2);
  color: #bfd4ff;
  font-variant-numeric: tabular-nums;
}

[data-chrome="admin"] .admin-check-card:has(input:checked) {
  border-color: rgba(91, 145, 255, 0.4);
  background: rgba(75, 131, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(91, 145, 255, 0.16);
}

[data-chrome="admin"] .admin-check-card:has(input:disabled) {
  opacity: 0.62;
}

[data-chrome="admin"] .admin-banner,
[data-chrome="admin"] .admin-status,
[data-chrome="admin"] .admin-flash {
  line-height: 1.45;
}

@media (max-width: 720px) {
  [data-chrome="admin"] .admin-section-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-chrome="admin"] .admin-section-layout__nav {
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  }

  [data-chrome="admin"] .admin-subnav__group-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Identity & alts refresh */
.admin-hub-website #wa-id-panel .wa-id-head {
  align-items: center;
  gap: 1rem 1.5rem;
  padding-bottom: 1rem;
}

.admin-hub-website #wa-id-panel .wa-id-head > div:first-child {
  flex: 1 1 35rem;
  min-width: 0;
}

.admin-hub-website #wa-id-panel .wa-id-head .admin-panel__desc {
  max-width: 68rem;
  margin-top: 0.35rem;
  line-height: 1.5;
}

.admin-hub-website #wa-id-panel .wa-id-guide {
  display: block;
  grid-template-columns: none;
  gap: 0;
  width: fit-content;
  max-width: 100%;
  margin-top: 0.65rem;
  padding: 0.42rem 0.65rem;
  border: 1px solid var(--admin-line, rgba(148, 163, 184, 0.18));
  border-radius: 0.65rem;
  background: rgba(8, 15, 27, 0.5);
}

.admin-hub-website #wa-id-panel .wa-id-guide > summary {
  color: #cad7eb;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 700;
  list-style-position: inside;
}

.admin-hub-website #wa-id-panel .wa-id-guide__items {
  display: grid;
  grid-template-columns: repeat(3, minmax(12rem, 1fr));
  gap: 0.55rem;
  margin-top: 0.65rem;
}

.admin-hub-website #wa-id-panel .wa-id-guide__items > div {
  display: grid;
  align-content: start;
  gap: 0.22rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.025);
}

.admin-hub-website #wa-id-panel .wa-id-guide__items strong {
  color: #e5edfb;
  font-size: 0.77rem;
}

.admin-hub-website #wa-id-panel .wa-id-guide__items span,
.admin-hub-website #wa-id-panel .wa-id-guide__note {
  color: #9baac0;
  font-size: 0.72rem;
  line-height: 1.45;
}

.admin-hub-website #wa-id-panel .wa-id-guide__note {
  margin: 0.55rem 0 0;
}

.admin-hub-website #wa-id-panel .wa-id-jump {
  justify-content: flex-end;
}

.admin-hub-website #wa-id-panel .wa-id-jump .btn {
  min-height: 2.25rem;
  border-radius: 0.6rem;
}

.admin-hub-website #wa-id-panel .wa-id-body {
  gap: 0.9rem;
}

.admin-hub-website #wa-id-panel .wa-id-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.admin-hub-website #wa-id-panel .wa-id-overview > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.2rem 0.75rem;
  min-width: 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 0.7rem;
  background: linear-gradient(125deg, rgba(49, 91, 158, 0.12), rgba(255, 255, 255, 0.025));
}

.admin-hub-website #wa-id-panel .wa-id-overview span {
  color: #a5b3c8;
  font-size: 0.73rem;
}

.admin-hub-website #wa-id-panel .wa-id-overview strong {
  color: #eff5ff;
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}

.admin-hub-website #wa-id-panel .wa-id-layout {
  grid-template-columns: minmax(17rem, 0.34fr) minmax(0, 1fr);
  gap: 0.9rem;
  scroll-margin-top: 1rem;
}

.admin-hub-website #wa-id-panel .wa-id-rail {
  gap: 0.7rem;
  padding: 0.9rem;
  border-color: rgba(128, 155, 198, 0.22);
  border-radius: 0.85rem;
  background: linear-gradient(165deg, rgba(17, 28, 45, 0.9), rgba(10, 16, 27, 0.88));
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.14);
}

.admin-hub-website #wa-id-panel .wa-id-rail__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
}

.admin-hub-website #wa-id-panel .wa-id-rail__heading h3 {
  margin: 0;
  color: #e9f0fc;
  font-size: 0.95rem;
}

.admin-hub-website #wa-id-panel .wa-id-rail__heading p {
  margin: 0.2rem 0 0;
  font-size: 0.72rem;
  line-height: 1.4;
}

.admin-hub-website #wa-id-panel .wa-id-rail__count {
  flex: 0 0 auto;
  padding: 0.2rem 0.5rem;
  border: 1px solid rgba(110, 157, 245, 0.22);
  border-radius: 999px;
  background: rgba(60, 112, 222, 0.12);
  color: #c6d9ff;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.admin-hub-website #wa-id-panel .wa-id-search__control {
  position: relative;
  display: block;
}

.admin-hub-website #wa-id-panel .wa-id-search__control input {
  min-height: 2.6rem;
  padding-right: 2.5rem;
  border-color: rgba(146, 166, 197, 0.22);
  border-radius: 0.65rem;
  background: rgba(4, 10, 19, 0.7);
}

.admin-hub-website #wa-id-panel .wa-id-search__clear {
  position: absolute;
  top: 50%;
  right: 0.45rem;
  width: 1.8rem;
  height: 1.8rem;
  transform: translateY(-50%);
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: #aebbd0;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
}

.admin-hub-website #wa-id-panel .wa-id-search__clear:hover {
  background: rgba(255, 255, 255, 0.08);
  color: white;
}

.admin-hub-website #wa-id-panel .wa-id-source {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-hub-website #wa-id-panel .wa-id-source .btn {
  min-height: 2.15rem;
  padding-inline: 0.35rem;
  border-radius: 0.55rem;
  line-height: 1.15;
  white-space: normal;
}

.admin-hub-website #wa-id-panel .wa-id-check {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.55rem 0.6rem;
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.025);
}

.admin-hub-website #wa-id-panel .wa-id-check label {
  flex: 1 1 auto;
  color: #b2bfd2;
  cursor: pointer;
  font-size: 0.77rem;
  line-height: 1.35;
}

.admin-hub-website #wa-id-panel .wa-id-list {
  max-height: min(48vh, 37rem);
  gap: 0.4rem;
  padding: 0.15rem 0.2rem 0.15rem 0;
  scrollbar-color: rgba(133, 157, 195, 0.36) transparent;
}

.admin-hub-website #wa-id-panel .wa-id-member {
  gap: 0.27rem;
  padding: 0.65rem 0.7rem;
  border-color: rgba(148, 163, 184, 0.13);
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.025);
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}

.admin-hub-website #wa-id-panel .wa-id-member:hover {
  transform: translateY(-1px);
  border-color: rgba(100, 151, 248, 0.4);
  background: rgba(67, 111, 190, 0.08);
}

.admin-hub-website #wa-id-panel .wa-id-member.is-active {
  border-color: rgba(104, 155, 255, 0.58);
  background: linear-gradient(100deg, rgba(58, 112, 220, 0.18), rgba(58, 112, 220, 0.07));
  box-shadow: inset 3px 0 0 #6a9bff;
}

.admin-hub-website #wa-id-panel .wa-id-member__identity {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.5rem;
  min-width: 0;
}

.admin-hub-website #wa-id-panel .wa-id-member__name {
  color: #edf3ff;
}

.admin-hub-website #wa-id-panel .wa-id-member__id,
.admin-hub-website #wa-id-panel .wa-id-dossier__id {
  overflow-wrap: anywhere;
  color: #899bb7;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
}

.admin-hub-website #wa-id-panel .wa-id-member__meta {
  font-size: 0.7rem;
}

.admin-hub-website #wa-id-panel .wa-id-member__flags {
  gap: 0.25rem;
}

.admin-hub-website #wa-id-panel .wa-id-member__flags .admin-status {
  padding: 0.14rem 0.38rem;
  font-size: 0.64rem;
}

.admin-hub-website #wa-id-panel .wa-id-list__empty,
.admin-hub-website #wa-id-panel .wa-id-loading {
  margin: 0;
  padding: 1.1rem 0.75rem;
  border: 1px dashed rgba(148, 163, 184, 0.2);
  border-radius: 0.65rem;
  color: #a9b6ca;
  font-size: 0.78rem;
  line-height: 1.45;
  text-align: center;
}

.admin-hub-website #wa-id-panel .wa-id-inline-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(251, 146, 60, 0.28);
  border-radius: 0.65rem;
  background: rgba(154, 76, 24, 0.1);
  color: #ffd1a8;
  font-size: 0.77rem;
}

.admin-hub-website #wa-id-panel .wa-id-detail {
  gap: 0.65rem;
  scroll-margin-top: 1rem;
}

.admin-hub-website #wa-id-panel .wa-id-empty {
  display: grid;
  place-items: center;
  min-height: 20rem;
  padding: 2rem;
  border-color: rgba(128, 155, 198, 0.2);
  background: radial-gradient(ellipse at top, rgba(50, 91, 155, 0.1), transparent 60%);
  text-align: center;
}

.admin-hub-website #wa-id-panel .wa-id-empty p {
  max-width: 34rem;
  line-height: 1.55;
}

.admin-hub-website #wa-id-panel .wa-id-detail__toolbar {
  padding: 0.15rem 0;
}

.admin-hub-website #wa-id-panel .wa-id-crumb {
  color: #96a6be;
  font-size: 0.7rem;
}

.admin-hub-website #wa-id-panel .wa-id-dossier {
  gap: 0.75rem;
}

.admin-hub-website #wa-id-panel .wa-id-dossier__head {
  padding: 0.9rem 1rem;
  border: 1px solid rgba(123, 156, 211, 0.22);
  border-radius: 0.8rem;
  background: linear-gradient(115deg, rgba(31, 56, 93, 0.44), rgba(15, 24, 39, 0.72));
}

.admin-hub-website #wa-id-panel .wa-id-dossier__head > div:first-child {
  display: grid;
  gap: 0.24rem;
}

.admin-hub-website #wa-id-panel .wa-id-dossier__head p {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.45;
}

.admin-hub-website #wa-id-panel .wa-id-dossier__actions {
  gap: 0.35rem;
}

.admin-hub-website #wa-id-panel .wa-id-grid {
  gap: 0.65rem;
}

.admin-hub-website #wa-id-panel .wa-id-card {
  padding: 0.85rem;
  border-color: rgba(128, 155, 198, 0.18);
  border-radius: 0.8rem;
  background: linear-gradient(150deg, rgba(19, 29, 45, 0.68), rgba(12, 18, 29, 0.76));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
  scroll-margin-top: 1rem;
}

.admin-hub-website #wa-id-panel .wa-id-card > .wa-rank__title,
.admin-hub-website #wa-id-panel .wa-id-card > h3 {
  margin: 0 0 0.55rem;
  color: #e7effd;
  font-size: 0.9rem;
  line-height: 1.35;
}

.admin-hub-website #wa-id-panel .wa-id-section-note {
  max-width: 70rem;
  line-height: 1.5;
}

.admin-hub-website #wa-id-panel .wa-id-table-scroll {
  max-height: 32rem;
  border-color: rgba(148, 163, 184, 0.13);
  border-radius: 0.65rem;
  scrollbar-color: rgba(133, 157, 195, 0.36) transparent;
}

.admin-hub-website #wa-id-panel .wa-id-table {
  min-width: 34rem;
}

.admin-hub-website #wa-id-panel .wa-id-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #121d2d;
  color: #aebdd4;
  font-size: 0.66rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.admin-hub-website #wa-id-panel .wa-id-ipfocus__head {
  align-items: flex-start;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.13);
}

.admin-hub-website #wa-id-panel .wa-id-ipfocus__head h4 {
  color: #ecf3ff;
}

.admin-hub-website #wa-id-panel .wa-id-cluster-names {
  max-height: 10rem;
  padding: 0.15rem 0;
}

.admin-hub-website #wa-id-panel .wa-id-cluster-names__btn {
  border-color: rgba(121, 151, 197, 0.17);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.03);
}

.admin-hub-website #wa-id-panel #wa-id-clusters,
.admin-hub-website #wa-id-panel #wa-id-suspicious {
  scroll-margin-top: 1rem;
}

@media (max-width: 900px) {
  .admin-hub-website #wa-id-panel .wa-id-guide {
    width: 100%;
  }

  .admin-hub-website #wa-id-panel .wa-id-guide__items {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  }

  .admin-hub-website #wa-id-panel .wa-id-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-hub-website #wa-id-panel .wa-id-rail {
    position: static;
    max-height: none;
  }

  .admin-hub-website #wa-id-panel .wa-id-list {
    max-height: 24rem;
  }
}

@media (max-width: 720px) {
  .admin-hub-website #wa-id-panel .wa-id-overview {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.45rem;
  }

  .admin-hub-website #wa-id-panel .wa-id-overview > div {
    padding: 0.55rem 0.7rem;
  }

  .admin-hub-website #wa-id-panel .wa-id-overview strong {
    font-size: 1rem;
  }

  .admin-hub-website #wa-id-panel .wa-id-guide__items {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-hub-website #wa-id-panel .wa-id-head {
    align-items: stretch;
  }

  .admin-hub-website #wa-id-panel .wa-id-jump {
    justify-content: flex-start;
    width: 100%;
  }

  .admin-hub-website #wa-id-panel .wa-id-dossier__head {
    padding: 0.75rem;
  }

  .admin-hub-website #wa-id-panel .wa-id-table {
    min-width: 32rem;
  }
}

/* Admin suite follow-through: one clear workspace style across every tool. */
[data-chrome="admin"] {
  --admin-line: rgba(145, 166, 199, 0.17);
  --admin-panel: #111b2b;
  --admin-panel-raised: #17243a;
  --admin-accent: #5a8fff;
  --admin-accent-soft: rgba(75, 131, 255, 0.13);
}

[data-chrome="admin"] .admin-hub__content,
[data-chrome="admin"] .admin-section-shell,
[data-chrome="admin"] .admin-content-body,
[data-chrome="admin"] .admin-console,
[data-chrome="admin"] .admin-donations,
[data-chrome="admin"] .admin-health-panel,
[data-chrome="admin"] .admin-logging,
[data-chrome="admin"] .game-shows-admin {
  min-width: 0;
}

[data-chrome="admin"] .admin-section-shell,
[data-chrome="admin"] .admin-content-body {
  align-content: start;
}

[data-chrome="admin"] .admin-section-header {
  position: relative;
  align-items: flex-start;
  padding: 0 0 1rem 0.9rem;
  border-bottom-color: transparent;
}

[data-chrome="admin"] .admin-section-header::before {
  position: absolute;
  top: 0.1rem;
  bottom: 1.05rem;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #78a5ff, rgba(75, 131, 255, 0.16));
  content: "";
}

[data-chrome="admin"] .admin-section-header__text {
  min-width: 0;
}

[data-chrome="admin"] .admin-section-header__desc {
  margin-top: 0.35rem;
}

[data-chrome="admin"] .admin-section-header__actions,
[data-chrome="admin"] .admin-actions,
[data-chrome="admin"] .admin-actions--compact,
[data-chrome="admin"] .admin-hub-inline-actions,
[data-chrome="admin"] .admin-hub-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
}

[data-chrome="admin"] .admin-toolbar {
  align-items: end;
  gap: 0.65rem;
  padding: 0.8rem;
  border: 1px solid var(--admin-line);
  border-radius: 0.8rem;
  background: rgba(10, 17, 29, 0.62);
}

[data-chrome="admin"] .admin-toolbar__search,
[data-chrome="admin"] .admin-hub-toolbar__search {
  flex: 1 1 15rem;
  min-width: min(100%, 12rem);
}

[data-chrome="admin"] .admin-panel,
[data-chrome="admin"] .admin-section,
[data-chrome="admin"] .admin-check-card,
[data-chrome="admin"] .admin-lol-card,
[data-chrome="admin"] .admin-shop-panel,
[data-chrome="admin"] .ticket-admin-detail {
  min-width: 0;
  border: 1px solid var(--admin-line);
  border-radius: 0.9rem;
  background: linear-gradient(150deg, rgba(19, 30, 48, 0.96), rgba(13, 21, 34, 0.98));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
}

[data-chrome="admin"] .admin-panel--flat {
  background: rgba(13, 21, 34, 0.72);
}

[data-chrome="admin"] .admin-panel > h3:first-child,
[data-chrome="admin"] .admin-panel > .admin-panel__title:first-child,
[data-chrome="admin"] .admin-panel__head,
[data-chrome="admin"] .admin-hub-quicklinks__title {
  color: #eff4ff;
}

[data-chrome="admin"] .admin-hub-quicklinks__title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 680;
  letter-spacing: -0.01em;
}

[data-chrome="admin"] .admin-panel__body {
  min-width: 0;
}

[data-chrome="admin"] .admin-card {
  position: relative;
  min-width: 0;
  color: #e8effb;
  text-decoration: none;
  transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

[data-chrome="admin"] .admin-card:hover:not(.is-disabled) {
  transform: translateY(-1px);
  background: linear-gradient(150deg, #172842, #121e30);
}

[data-chrome="admin"] .admin-card:focus-visible,
[data-chrome="admin"] .admin-members-quicklink:focus-visible,
[data-chrome="admin"] .admin-subnav__dd-trigger:focus-visible,
[data-chrome="admin"] .admin-subnav__dd-option:focus-visible {
  outline: 2px solid #8bb2ff;
  outline-offset: 2px;
}

[data-chrome="admin"] .admin-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  align-items: stretch;
}

[data-chrome="admin"] .admin-hub-link-grid > .admin-card {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.6rem;
  min-height: 8.2rem;
  padding: 1rem;
}

[data-chrome="admin"] .admin-hub-link-grid > .admin-card p {
  margin: 0;
  color: #9eacc1;
  font-size: 0.78rem;
  line-height: 1.5;
}

[data-chrome="admin"] .admin-hub-link-card__action {
  align-self: end;
  margin-top: 0.35rem;
  color: #9fc0ff;
  font-size: 0.76rem;
  font-weight: 650;
}

[data-chrome="admin"] .admin-games {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0.7rem;
}

[data-chrome="admin"] .admin-game-card {
  min-width: 0;
  min-height: 7.5rem;
  padding: 0.9rem;
  border: 1px solid var(--admin-line);
  border-radius: 0.8rem;
  background: linear-gradient(145deg, #172741, #111b2c);
  text-align: left;
}

[data-chrome="admin"] .admin-game-card:not(:disabled):hover {
  border-color: rgba(112, 160, 255, 0.5);
  background: #1a2b46;
}

[data-chrome="admin"] .admin-game-card__kicker {
  color: #9fbfff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

[data-chrome="admin"] .admin-stat-grid,
[data-chrome="admin"] .admin-hub-stats {
  gap: 0.65rem;
}

[data-chrome="admin"] .admin-stat__label,
[data-chrome="admin"] .admin-hub-stat__label {
  color: #9baac0;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

[data-chrome="admin"] .admin-stat__value,
[data-chrome="admin"] .admin-hub-stat strong {
  color: #f3f7ff;
  font-variant-numeric: tabular-nums;
}

[data-chrome="admin"] .admin-form,
[data-chrome="admin"] .admin-form--grid,
[data-chrome="admin"] .admin-hub-form-stack,
[data-chrome="admin"] .admin-hub-form-grid {
  min-width: 0;
  gap: 0.85rem;
}

[data-chrome="admin"] .admin-form--grid,
[data-chrome="admin"] .admin-hub-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

[data-chrome="admin"] .admin-field,
[data-chrome="admin"] .admin-shop-field {
  min-width: 0;
  gap: 0.4rem;
  color: #dbe5f5;
}

[data-chrome="admin"] .admin-field__label,
[data-chrome="admin"] .admin-field__head,
[data-chrome="admin"] .admin-help-tip__mark {
  color: #aab9cf;
  font-size: 0.73rem;
  font-weight: 650;
}

[data-chrome="admin"] .admin-check,
[data-chrome="admin"] .admin-check-card,
[data-chrome="admin"] .admin-check-list {
  min-width: 0;
}

[data-chrome="admin"] .admin-check-card {
  padding: 0.75rem 0.85rem;
  color: #dce6f6;
}

[data-chrome="admin"] .admin-check-list {
  gap: 0.55rem;
}

[data-chrome="admin"] .admin-page input[type="checkbox"],
[data-chrome="admin"] .admin-page input[type="radio"] {
  accent-color: #6a9cff;
}

[data-chrome="admin"] .admin-page :disabled {
  cursor: not-allowed;
}

[data-chrome="admin"] .admin-page .admin-table-wrap,
[data-chrome="admin"] .admin-page .admin-table-scroll,
[data-chrome="admin"] .admin-page .table-scroll,
[data-chrome="admin"] .admin-page .show-table-wrap,
[data-chrome="admin"] .admin-page .admin-logging__table-wrap {
  max-width: 100%;
  overflow: auto;
  scrollbar-color: rgba(120, 150, 196, 0.35) transparent;
}

[data-chrome="admin"] .admin-page .admin-table,
[data-chrome="admin"] .admin-page .show-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

[data-chrome="admin"] .admin-page .admin-table th,
[data-chrome="admin"] .admin-page .show-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  white-space: nowrap;
}

[data-chrome="admin"] .admin-page .admin-table td,
[data-chrome="admin"] .admin-page .show-table td {
  line-height: 1.45;
  vertical-align: middle;
}

[data-chrome="admin"] .admin-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--admin-line);
}

[data-chrome="admin"] .admin-status,
[data-chrome="admin"] .admin-chip,
[data-chrome="admin"] .admin-nav-badge {
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

[data-chrome="admin"] .admin-flash,
[data-chrome="admin"] .admin-banner,
[data-chrome="admin"] .flash {
  overflow-wrap: anywhere;
}

[data-chrome="admin"] .admin-empty,
[data-chrome="admin"] .admin-empty-state,
[data-chrome="admin"] .placeholder,
[data-chrome="admin"] .ticket-app__empty {
  padding: 1.2rem;
  border: 1px dashed rgba(148, 163, 184, 0.22);
  border-radius: 0.8rem;
  background: rgba(8, 14, 23, 0.32);
  color: #9eacc1;
  text-align: center;
}

[data-chrome="admin"] details {
  border-color: var(--admin-line);
  border-radius: 0.7rem;
}

[data-chrome="admin"] details > summary {
  color: #dce7f8;
  cursor: pointer;
}

[data-chrome="admin"] .admin-confirm__dialog {
  border: 1px solid rgba(133, 158, 196, 0.22);
  border-radius: 1rem;
  background: linear-gradient(155deg, #19263a, #101827);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

[data-chrome="admin"] .admin-confirm__kicker {
  color: #ffbd80;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* League tools */
[data-chrome="admin"] .admin-console__top {
  padding: 1rem 1.1rem;
  border: 1px solid var(--admin-line);
  border-radius: 0.9rem;
  background: linear-gradient(120deg, rgba(24, 42, 68, 0.9), rgba(15, 24, 39, 0.88));
}

[data-chrome="admin"] .admin-console__panel {
  min-width: 0;
  border-color: var(--admin-line);
  border-radius: 0.9rem;
  background: rgba(12, 19, 31, 0.38);
}

[data-chrome="admin"] .admin-lol-stack,
[data-chrome="admin"] .admin-lol-stack--commands {
  gap: 0.85rem;
}

[data-chrome="admin"] .admin-lol-card__lead,
[data-chrome="admin"] .admin-lol-card__note {
  max-width: 70rem;
  color: #aab7cb;
  line-height: 1.5;
}

[data-chrome="admin"] .admin-lol-block__title,
[data-chrome="admin"] .admin-lol-reward-group__title {
  color: #edf3ff;
}

[data-chrome="admin"] .admin-lol-channel-row {
  border-color: var(--admin-line);
  border-radius: 0.7rem;
  background: rgba(9, 15, 25, 0.38);
}

/* Support inbox, game shows, and Discord automation */
[data-chrome="admin"] .ticket-admin__bar,
[data-chrome="admin"] .ticket-nav,
[data-chrome="admin"] .admin-discord-automations__layout {
  min-width: 0;
}

[data-chrome="admin"] .ticket-row,
[data-chrome="admin"] .ticket-admin-detail,
[data-chrome="admin"] .admin-discord-automations__row,
[data-chrome="admin"] .admin-discord-automations__preview,
[data-chrome="admin"] .game-shows-admin .admin-card {
  border-color: var(--admin-line);
  border-radius: 0.82rem;
  background: linear-gradient(150deg, rgba(20, 31, 49, 0.94), rgba(13, 21, 34, 0.94));
}

[data-chrome="admin"] .admin-discord-automations__row {
  padding: 0.85rem 0.95rem;
}

[data-chrome="admin"] .admin-discord-automations__row.is-selected {
  border-color: rgba(102, 154, 255, 0.56);
  background: linear-gradient(135deg, rgba(34, 61, 100, 0.82), rgba(15, 25, 41, 0.96));
  box-shadow: inset 3px 0 0 #78a5ff;
}

[data-chrome="admin"] .admin-discord-automations__preview {
  padding: 1rem;
}

[data-chrome="admin"] .show-admin-form {
  gap: 0.8rem;
  padding: 0.9rem;
  border: 1px solid var(--admin-line);
  border-radius: 0.8rem;
  background: rgba(8, 14, 23, 0.34);
}

[data-chrome="admin"] .show-admin-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

[data-chrome="admin"] .show-table {
  min-width: 58rem;
}

/* Tournament, shop, and donations workspaces */
[data-chrome="admin"] .admin-hub-tournament,
[data-chrome="admin"] .admin-hub-shop,
[data-chrome="admin"] .admin-donations {
  gap: 1rem;
}

[data-chrome="admin"] .tour-settings-jump,
[data-chrome="admin"] .admin-hub-segment,
[data-chrome="admin"] .shop-subnav,
[data-chrome="admin"] .admin-donations__tabs {
  border-color: var(--admin-line);
  border-radius: 0.8rem;
  background: rgba(10, 17, 29, 0.7);
}

[data-chrome="admin"] .tour-settings-jump button,
[data-chrome="admin"] .admin-hub-segment button {
  min-height: 2.25rem;
  border-radius: 0.55rem;
}

[data-chrome="admin"] .tour-settings-jump button.is-active,
[data-chrome="admin"] .admin-hub-segment button.is-active {
  background: rgba(75, 131, 255, 0.18);
  color: #f1f6ff;
}

[data-chrome="admin"] .admin-hub-form-stack > section,
[data-chrome="admin"] .tour-bracket-workspace,
[data-chrome="admin"] .tour-bracket-rail,
[data-chrome="admin"] .admin-shop-workspace > *,
[data-chrome="admin"] .admin-catalog-card,
[data-chrome="admin"] .shop-asset-card,
[data-chrome="admin"] .shop-assets__nav,
[data-chrome="admin"] .admin-donations__section {
  min-width: 0;
  border-color: var(--admin-line);
  border-radius: 0.88rem;
  background: linear-gradient(150deg, rgba(18, 29, 46, 0.94), rgba(12, 20, 33, 0.96));
}

[data-chrome="admin"] .admin-donations__section {
  padding: 1rem;
}

[data-chrome="admin"] .admin-donations__section h3 {
  margin-top: 0;
  color: #eff4ff;
}

[data-chrome="admin"] .admin-hub-tournament__body,
[data-chrome="admin"] .admin-hub-shop-panel,
[data-chrome="admin"] .admin-catalog__main,
[data-chrome="admin"] .shop-assets__main {
  display: grid;
  align-content: start;
  gap: 0.85rem;
  min-width: 0;
}

[data-chrome="admin"] .admin-hub-tournament .tour-panel-live-banner {
  border-color: rgba(91, 145, 255, 0.26);
  border-radius: 0.75rem;
  background: rgba(75, 131, 255, 0.09);
}

[data-chrome="admin"] .admin-hub-shop .admin-shop-workspace {
  gap: 0.9rem;
}

[data-chrome="admin"] .admin-hub-shop .admin-catalog__nav,
[data-chrome="admin"] .admin-hub-shop .shop-assets__nav {
  border-color: var(--admin-line);
  border-radius: 0.8rem;
  background: rgba(10, 17, 29, 0.7);
}

[data-chrome="admin"] .admin-hub-shop .admin-catalog-list > li,
[data-chrome="admin"] .admin-hub-shop .admin-catalog-card,
[data-chrome="admin"] .admin-hub-shop .shop-asset-card {
  border-color: var(--admin-line);
  border-radius: 0.8rem;
  background: linear-gradient(150deg, rgba(20, 31, 49, 0.95), rgba(13, 21, 34, 0.96));
}

[data-chrome="admin"] .admin-hub-shop .admin-shop-empty,
[data-chrome="admin"] .admin-hub-shop .shop-assets__hint {
  color: #9eacc1;
}

[data-chrome="admin"] .admin-benefits-crm__toolbar {
  border-color: var(--admin-line);
  border-radius: 0.85rem;
  background: #111c2d;
}

[data-chrome="admin"] .admin-role-perms__layout {
  align-items: start;
  gap: 0.9rem;
}

[data-chrome="admin"] .admin-role-perms__guild,
[data-chrome="admin"] .admin-role-perms__editor,
[data-chrome="admin"] .admin-role-perms__group {
  min-width: 0;
  border-color: var(--admin-line);
  border-radius: 0.8rem;
  background: rgba(10, 17, 29, 0.5);
}

[data-chrome="admin"] .admin-role-perms__acc-head {
  min-height: 2.8rem;
  border-radius: 0.65rem;
  color: #e8effb;
}

[data-chrome="admin"] .admin-role-perms__acc-head:hover,
[data-chrome="admin"] .admin-role-perms__acc-head[aria-expanded="true"] {
  background: rgba(75, 131, 255, 0.11);
}

[data-chrome="admin"] .admin-role-perms__empty,
[data-chrome="admin"] .admin-role-perms__empty-state {
  padding: 0.85rem;
  border: 1px dashed var(--admin-line);
  border-radius: 0.7rem;
}

[data-chrome="admin"] .admin-nav-editor__list {
  align-content: start;
  gap: 0.65rem;
}

[data-chrome="admin"] .admin-nav-row {
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--admin-line);
  border-radius: 0.82rem;
  background: rgba(12, 20, 33, 0.72);
}

[data-chrome="admin"] .admin-nav-row__fields {
  min-width: 0;
}

[data-chrome="admin"] .admin-announce-layout {
  align-items: start;
  gap: 0.9rem;
}

[data-chrome="admin"] .admin-announce-side,
[data-chrome="admin"] .admin-announce-main,
[data-chrome="admin"] .admin-announce-card {
  min-width: 0;
  border-color: var(--admin-line);
  border-radius: 0.85rem;
  background: linear-gradient(150deg, rgba(18, 29, 46, 0.94), rgba(12, 20, 33, 0.96));
}

[data-chrome="admin"] .admin-announce-banner-nav__item {
  border-radius: 0.65rem;
}

[data-chrome="admin"] .admin-announce-editor__footer {
  padding-top: 0.75rem;
  border-top: 1px solid var(--admin-line);
}

/* Website, role access, logs, and system tools */
[data-chrome="admin"] .admin-members-quicklinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0.65rem;
  padding: 0.75rem;
}

[data-chrome="admin"] .admin-members-quicklink {
  display: grid;
  align-content: center;
  gap: 0.25rem;
  min-height: 4.2rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--admin-line);
  border-radius: 0.7rem;
  background: rgba(12, 20, 33, 0.72);
  color: #eff4ff;
  text-align: left;
  text-decoration: none;
}

[data-chrome="admin"] .admin-members-quicklink:hover {
  border-color: rgba(95, 148, 255, 0.4);
  background: #172741;
}

[data-chrome="admin"] .admin-logging__layout {
  grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr);
  gap: 0.9rem;
}

[data-chrome="admin"] .admin-logging__rail {
  padding: 0.7rem;
  border: 1px solid var(--admin-line);
  border-radius: 0.85rem;
  background: rgba(10, 17, 29, 0.68);
}

[data-chrome="admin"] .admin-logging__source {
  border-radius: 0.65rem;
}

[data-chrome="admin"] .admin-logging__source.is-active {
  border-color: rgba(91, 145, 255, 0.32);
  background: rgba(75, 131, 255, 0.14);
  box-shadow: inset 3px 0 0 #5a8fff;
}

[data-chrome="admin"] .admin-logging__main {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--admin-line);
  border-radius: 0.9rem;
  background: rgba(12, 19, 31, 0.54);
}

[data-chrome="admin"] .admin-logging__filters {
  padding: 0.8rem;
  border: 1px solid var(--admin-line);
  border-radius: 0.75rem;
  background: rgba(7, 12, 21, 0.35);
}

[data-chrome="admin"] .admin-health-panel > .admin-panel,
[data-chrome="admin"] .admin-health-panel > section {
  min-width: 0;
}

[data-chrome="admin"] .admin-health-panel .admin-panel__head {
  align-items: flex-start;
}

[data-chrome="admin"] .admin-hub-section--soon {
  min-height: 13rem;
  align-content: start;
  padding: 1.2rem;
  border: 1px dashed rgba(124, 153, 196, 0.3);
  border-radius: 0.95rem;
  background: rgba(16, 26, 42, 0.55);
}

@media (max-width: 900px) {
  [data-chrome="admin"] .admin-form--grid,
  [data-chrome="admin"] .admin-hub-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-chrome="admin"] .admin-logging__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-chrome="admin"] .admin-logging__rail {
    display: flex;
    overflow-x: auto;
    gap: 0.45rem;
  }

  [data-chrome="admin"] .admin-logging__source {
    flex: 0 0 auto;
    min-width: 9rem;
  }
}

@media (max-width: 640px) {
  [data-chrome="admin"] .admin-section-header {
    padding-left: 0.7rem;
  }

  [data-chrome="admin"] .admin-section-header__actions,
  [data-chrome="admin"] .admin-section-header__actions > *,
  [data-chrome="admin"] .admin-hub-inline-actions > .btn {
    max-width: 100%;
  }

  [data-chrome="admin"] .admin-panel,
  [data-chrome="admin"] .admin-logging__main {
    padding: 0.8rem;
  }

  [data-chrome="admin"] .admin-stat-grid,
  [data-chrome="admin"] .admin-hub-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [data-chrome="admin"] .admin-pager {
    align-items: stretch;
  }

  [data-chrome="admin"] .admin-pager > * {
    max-width: 100%;
  }

  [data-chrome="admin"] .show-table {
    min-width: 52rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-chrome="admin"] .admin-card {
    transition: none;
  }
}

/* Website analytics: account level signal review */
[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-head > div:first-child {
  min-width: min(100%, 36rem);
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-eyebrow,
[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal-kicker {
  display: block;
  margin-bottom: 0.28rem;
  color: #8fb2f4;
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  line-height: 1.35;
  text-transform: uppercase;
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-head .admin-panel__title {
  color: #f1f5fc;
  font-size: 1.16rem;
  letter-spacing: -0.025em;
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-head .admin-panel__desc {
  max-width: 52rem;
  margin-top: 0.3rem;
  line-height: 1.55;
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-overview > div:last-child {
  align-content: center;
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-overview__note {
  grid-column: 1 / -1;
  margin-top: -0.12rem;
  color: #8698b3;
  font-size: 0.66rem;
  line-height: 1.35;
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal-review {
  display: grid;
  gap: 0.72rem;
  padding: 1rem;
  border-color: rgba(105, 145, 210, 0.24);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(67, 112, 188, 0.08), transparent 42%),
    linear-gradient(155deg, rgba(17, 28, 45, 0.88), rgba(10, 16, 27, 0.94));
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  min-width: 0;
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal-section-head h3 {
  margin: 0;
  color: #edf3ff;
  font-size: 1rem;
  letter-spacing: -0.015em;
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal-section-head__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
  color: #a7b6cc;
  font-size: 0.69rem;
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal-section-head__stats span {
  padding: 0.3rem 0.5rem;
  border: 1px solid rgba(138, 163, 202, 0.16);
  border-radius: 999px;
  background: rgba(5, 11, 20, 0.35);
  white-space: nowrap;
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal-section-head__stats strong {
  color: #eaf1ff;
  font-variant-numeric: tabular-nums;
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal-review > .wa-id-section-note {
  margin: 0;
  max-width: 76rem;
  line-height: 1.5;
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal-groups {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
  transition: opacity 160ms ease;
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal-groups.is-loading {
  opacity: 0.66;
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal-group {
  display: grid;
  gap: 0.7rem;
  min-width: 0;
  padding: 0.8rem;
  border: 1px solid rgba(128, 155, 198, 0.18);
  border-radius: 0.78rem;
  background: linear-gradient(145deg, rgba(25, 38, 58, 0.74), rgba(14, 22, 35, 0.76));
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.09);
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem 1rem;
  min-width: 0;
  padding: 0 0 0.6rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal-group__title {
  min-width: 0;
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal-group__title .wa-id-signal-kicker {
  margin-bottom: 0.15rem;
  font-size: 0.58rem;
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal-group__title h4 {
  margin: 0;
  color: #eaf1fb;
  font-size: 0.86rem;
  font-weight: 680;
  line-height: 1.35;
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal-group__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem 0.55rem;
  flex: 0 0 auto;
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal-count {
  padding: 0.25rem 0.48rem;
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.09);
  color: #bcd5ff;
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal-group__latest {
  display: inline-flex;
  gap: 0.3rem;
  align-items: baseline;
  color: #8293ad;
  font-size: 0.66rem;
  white-space: nowrap;
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal-group__latest time {
  color: #c5d1e4;
  font-variant-numeric: tabular-nums;
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal-group__content {
  display: grid;
  grid-template-columns: minmax(12rem, 0.72fr) minmax(0, 1.9fr);
  gap: 0.65rem;
  min-width: 0;
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal-group__accounts,
[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal-group__evidence {
  min-width: 0;
  padding: 0.6rem 0.65rem;
  border: 1px solid rgba(128, 155, 198, 0.12);
  border-radius: 0.62rem;
  background: rgba(5, 11, 20, 0.22);
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal-group__accounts h5,
[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal-group__evidence h5 {
  margin: 0 0 0.45rem;
  color: #899bb6;
  font-size: 0.6rem;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal-group__accounts .wa-id-cluster-names {
  max-height: none;
  gap: 0.28rem;
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal-group__accounts .wa-id-cluster-names__btn {
  max-width: 100%;
  border-color: rgba(127, 153, 193, 0.2);
  background: rgba(255, 255, 255, 0.035);
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal-group__accounts .wa-id-cluster-names__btn:hover {
  border-color: rgba(122, 167, 244, 0.44);
  background: rgba(82, 132, 210, 0.11);
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal-list {
  display: grid;
  gap: 0.36rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal {
  display: grid;
  grid-template-columns: minmax(8.7rem, 0.72fr) minmax(0, 1.5fr) auto;
  align-items: center;
  gap: 0.35rem 0.6rem;
  min-width: 0;
  padding: 0.48rem 0.55rem;
  border: 1px solid rgba(130, 154, 191, 0.12);
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.025);
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal__label {
  width: fit-content;
  max-width: 100%;
  padding: 0.22rem 0.42rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  color: #d7e2f3;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.25;
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal--device .wa-id-signal__label {
  border-color: rgba(96, 165, 250, 0.26);
  background: rgba(59, 130, 246, 0.08);
  color: #bfd6ff;
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal--fingerprint .wa-id-signal__label {
  border-color: rgba(251, 191, 36, 0.24);
  background: rgba(245, 158, 11, 0.07);
  color: #f4d58f;
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal--network .wa-id-signal__label {
  border-color: rgba(94, 234, 212, 0.21);
  background: rgba(20, 184, 166, 0.06);
  color: #a9e4da;
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal__description {
  min-width: 0;
  margin: 0;
  color: #aab8ce;
  font-size: 0.7rem;
  line-height: 1.4;
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem 0.5rem;
  min-width: 0;
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal__ip {
  max-width: 14rem;
  overflow: hidden;
  border-color: rgba(128, 155, 198, 0.14);
  background: rgba(255, 255, 255, 0.025);
  color: #b7c8e1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.64rem;
  text-overflow: ellipsis;
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal__time {
  display: grid;
  color: #7f91ac;
  font-size: 0.59rem;
  line-height: 1.25;
  text-align: right;
  white-space: nowrap;
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal__time time {
  color: #c5d1e4;
  font-size: 0.65rem;
  font-variant-numeric: tabular-nums;
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal-empty {
  padding: 1.2rem 0.8rem;
  border: 1px dashed rgba(128, 155, 198, 0.2);
  border-radius: 0.7rem;
  color: #a3b0c3;
  font-size: 0.78rem;
  line-height: 1.5;
  text-align: center;
}

[data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal-pager {
  margin-top: 0;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
}

@media (max-width: 1000px) {
  [data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal-group__content {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  [data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal-section-head,
  [data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal-group__head {
    align-items: flex-start;
    flex-direction: column;
  }

  [data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal-section-head__stats,
  [data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal-group__summary {
    justify-content: flex-start;
  }

  [data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal__meta {
    justify-content: flex-start;
  }

  [data-chrome="admin"] .admin-hub-website #wa-id-panel .wa-id-signal__time {
    text-align: left;
  }
}