:root {
  --bg: #080a0d;
  --panel: #11151b;
  --panel-2: #171c23;
  --text: #f7f7f2;
  --muted: #aab0bb;
  --line: rgba(255,255,255,.12);
  --yellow: #f7dd00;
  --green: #42f7a6;
  --usa: #ef3e52;
  --eu: #2454d8;
  --eu-flag-blue: #003399;
  --discord: #5865f2;
  --shadow: 0 24px 80px rgba(0,0,0,.42);
  --radius: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 18% 10%, rgba(66,247,166,.08), transparent 28%),
    radial-gradient(circle at 80% 16%, rgba(45,124,255,.08), transparent 25%),
    linear-gradient(180deg, #080a0d 0%, #0b0e12 55%, #080a0d 100%);
  font-family: Inter, Arial, sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, transparent 1px 6px);
  z-index: -1;
}

button, input, select { font: inherit; }
a { color: inherit; }
img { max-width: 100%; display: block; }

.section-shell {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 10px max(20px, calc((100vw - 1180px)/2));
  border-bottom: 1px solid var(--line);
  background: rgba(8,10,13,.85);
  backdrop-filter: blur(16px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 23px;
  font-weight: 900;
  letter-spacing: .08em;
}
.brand img { width: 46px; height: 38px; object-fit: contain; }

.site-header nav { display: flex; align-items: center; gap: 26px; }
.site-header nav a {
  color: #d7dbe2;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: color .2s ease;
}
.site-header nav a:hover { color: white; }
.site-header .nav-live {
  padding: 10px 15px;
  color: #07110c;
  border-radius: 999px;
  background: var(--green);
}

.hero {
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  gap: 46px;
  align-items: center;
  min-height: calc(100vh - 72px);
  padding-top: 72px;
  padding-bottom: 72px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .16em;
}
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--usa);
  box-shadow: 0 0 0 5px rgba(239,62,82,.14);
  animation: pulse 1.7s infinite;
}
@keyframes pulse { 50% { transform: scale(.78); opacity: .65; } }

h1, h2, h3 {
  margin: 0;
  font-family: "Barlow Condensed", Impact, sans-serif;
  line-height: .92;
  text-transform: uppercase;
}
h1 {
  max-width: 690px;
  margin-top: 16px;
  font-size: clamp(54px, 6.3vw, 96px);
  font-weight: 900;
  letter-spacing: -.025em;
}
.usa-text { color: var(--usa); }
.eu-text {
  color: #315fff;
  text-shadow: 0 0 24px rgba(0,51,153,.72);
}
h2 { font-size: clamp(42px, 5vw, 70px); font-weight: 900; }
h3 { font-size: 34px; font-weight: 800; }

.hero-intro {
  max-width: 680px;
  margin: 24px 0 0;
  color: #c2c7d0;
  font-size: 17px;
}

.event-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 30px;
}
.fact-card {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
}
.fact-card.wide { grid-column: 1 / -1; }
.fact-card span, .fact-card small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.fact-card strong { display: block; margin-top: 4px; font-size: 15px; }
.fact-card small { margin-top: 5px; letter-spacing: .03em; text-transform: none; }

.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 20px;
}
.countdown > div {
  padding: 11px 8px 9px;
  text-align: center;
  border-top: 2px solid var(--yellow);
  background: #11151a;
}
.countdown strong {
  display: block;
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 34px;
  line-height: 1;
}
.countdown span { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 50px;
  padding: 0 24px;
  border: 0;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}
.button:hover { transform: translateY(-2px); filter: brightness(1.08); }
.button:disabled { cursor: not-allowed; opacity: .55; transform: none; }
.button-usa { background: linear-gradient(135deg, #c62439, var(--usa)); }
.button-eu { background: linear-gradient(135deg, #145fc9, var(--eu)); }
.signup-state { margin: 12px 0 0; color: var(--muted); font-size: 12px; }

.hero-art { position: relative; }
.hero-art::before {
  content: "";
  position: absolute;
  inset: 8% -5% -3% 5%;
  z-index: -1;
  background: radial-gradient(circle, rgba(247,221,0,.13), transparent 65%);
  filter: blur(12px);
}
.banner-frame {
  position: relative;
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  background: #0b0d10;
  box-shadow: var(--shadow);
}
.banner-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(247,221,0,.15);
}
.banner-frame img { width: 100%; border-radius: calc(var(--radius) - 8px); }
.banner-label {
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 2;
  padding: 6px 10px;
  color: #101000;
  background: var(--yellow);
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .1em;
}

.main-event { padding-top: 70px; padding-bottom: 95px; }
.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 30px;
}
.section-heading.compact { align-items: center; }
.section-heading p { max-width: 490px; margin: 0; color: var(--muted); }
.main-event .section-heading > div { flex: 1 1 690px; }
.main-event .section-heading p { flex: 0 1 390px; }
.main-event h2 { font-size: clamp(38px, 4.6vw, 66px); line-height: .94; }
.main-event .banner-frame { max-width: 1050px; margin-inline: auto; border-bottom: 4px solid var(--yellow); }

.signup-section, .players-section { padding: 95px 0; border-top: 1px solid var(--line); }
.signup-grid { display: grid; grid-template-columns: 1.45fr .75fr; gap: 24px; }
.form-panel, .signup-rules, .team-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(24,29,37,.98), rgba(13,16,21,.98));
  box-shadow: 0 20px 55px rgba(0,0,0,.24);
}
.form-panel { padding: 28px; }
.form-panel-art {
  position: absolute;
  right: -110px;
  top: -35px;
  width: 520px;
  opacity: .065;
  filter: grayscale(.3);
  pointer-events: none;
}
.form-panel form { position: relative; z-index: 1; }
.region-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 22px; }
.region-option {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: #d9dde4;
  background: rgba(255,255,255,.035);
  cursor: pointer;
  font-weight: 800;
}
.region-option[data-region="USA"].active { border-color: rgba(239,62,82,.8); background: rgba(239,62,82,.14); color: white; }
.region-option[data-region="EU"].active { border-color: rgba(45,124,255,.8); background: rgba(45,124,255,.14); color: white; }

label { display: block; margin-bottom: 17px; }
label > span {
  display: block;
  margin-bottom: 7px;
  color: #d9dde4;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
input, select {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 9px;
  outline: none;
  color: white;
  background: #0b0e12;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(66,247,166,.1); }
select option { color: white; background: #11151a; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.honeypot { position: absolute !important; left: -9999px !important; opacity: 0 !important; }
.form-notice { margin: 2px 0 18px; padding: 12px 14px; border-left: 3px solid var(--yellow); color: var(--muted); background: rgba(247,221,0,.055); font-size: 12px; }
.submit-cta { margin-top: 4px; }
.submit-button {
  position: relative;
  width: 100%;
  min-height: 84px;
  padding: 26px 24px 18px;
  overflow: hidden;
  justify-content: space-between;
  color: #f7fbff;
  background: linear-gradient(135deg, rgba(16, 27, 46, .96), rgba(10, 18, 31, .98));
  border: 2px solid rgba(247,221,0,.45);
  box-shadow: 0 14px 30px rgba(0,0,0,.24);
  isolation: isolate;
}
.submit-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    rgba(33, 210, 255, .18) 0%,
    rgba(66, 247, 166, .18) 26%,
    rgba(255, 70, 70, .18) 52%,
    rgba(42, 102, 255, .18) 78%,
    rgba(255, 216, 55, .14) 100%);
  background-size: 240% 240%;
  opacity: .6;
  z-index: -2;
}
.submit-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  z-index: -1;
}
.submit-strip {
  position: absolute;
  z-index: 3;
  inset: 0 0 auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 24px;
  padding: 5px 16px 4px;
  border-bottom: 1px solid rgba(247,221,0,.18);
  background: linear-gradient(90deg, rgba(247,221,0,.08), rgba(255,255,255,.02));
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.submit-strip-label {
  color: rgba(255, 226, 86, .9);
  font-weight: 900;
}
.submit-strip-copy {
  color: rgba(231, 237, 244, .72);
  font-weight: 700;
  letter-spacing: .08em;
  text-align: right;
}
.submit-copy {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  line-height: 1;
  text-align: left;
}
.submit-copy > span { font-size: 24px; }
.submit-arrow {
  position: relative;
  z-index: 3;
  font-size: 30px;
  line-height: 1;
  transition: transform .2s ease;
}

.submit-button.submit-ready {
  background: #101827;
  border-color: rgba(247,221,0,.98);
  box-shadow:
    0 0 0 2px rgba(247,221,0,.24),
    0 0 26px rgba(247,221,0,.14),
    0 16px 34px rgba(0,0,0,.34);
  animation: submitAttentionPulse 1.9s ease-in-out infinite !important;
}

.submit-button.submit-ready::before,
.submit-button.submit-ready::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.submit-button.submit-ready::before {
  background: linear-gradient(105deg, #b91f35 0%, #ef3e52 48%, #b91f35 100%);
}

.submit-button.submit-ready::after {
  background: linear-gradient(110deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 18%, rgba(255,255,255,0) 34%, rgba(255,255,255,.12) 100%);
  mix-blend-mode: screen;
  animation: submitHighlightSweep 2.2s linear infinite !important;
}

.submit-cta.team-usa .submit-button.submit-ready::before {
  animation: submitUsaFlash 3.0s step-end infinite !important;
}

.submit-cta.team-eu .submit-button.submit-ready::before {
  animation: submitEuFlash 3.0s step-end infinite !important;
}

.submit-button.submit-ready .submit-arrow {
  animation: submitArrowNudge .8s ease-in-out infinite !important;
}

.submit-cta.ready .submit-strip {
  border-bottom-color: rgba(247,221,0,.55);
  background: rgba(5,8,13,.36);
}

.submit-cta.ready .submit-strip-copy {
  color: rgba(255,247,210,.96);
}

.submit-cta.team-usa.ready .submit-strip {
  background: linear-gradient(90deg, rgba(148, 22, 42, .40), rgba(255,255,255,.02));
}

.submit-cta.team-eu.ready .submit-strip {
  background: linear-gradient(90deg, rgba(29, 78, 216, .34), rgba(255,255,255,.02));
}

@keyframes submitUsaFlash {
  0%, 6.66%    { background: linear-gradient(105deg, #3e0710 0%, #640b18 52%, #3e0710 100%); }
  6.67%, 13.32% { background: linear-gradient(105deg, #520916 0%, #7a0d20 52%, #520916 100%); }
  13.33%, 19.99% { background: linear-gradient(105deg, #690b1d 0%, #921126 52%, #690b1d 100%); }
  20%, 26.65%  { background: linear-gradient(105deg, #7f1024 0%, #aa1630 52%, #7f1024 100%); }
  26.66%, 33.32% { background: linear-gradient(105deg, #94122d 0%, #c21b3a 52%, #94122d 100%); }
  33.33%, 39.99% { background: linear-gradient(105deg, #a91435 0%, #d82446 52%, #a91435 100%); }
  40%, 46.65%  { background: linear-gradient(105deg, #bc183b 0%, #e93650 52%, #bc183b 100%); }
  46.66%, 53.32% { background: linear-gradient(105deg, #c91d42 0%, #ef485d 52%, #c91d42 100%); }
  53.33%, 59.99% { background: linear-gradient(105deg, #d12648 0%, #f2586b 52%, #d12648 100%); }
  60%, 66.65%  { background: linear-gradient(105deg, #d9364f 0%, #f66b79 52%, #d9364f 100%); }
  66.66%, 73.32% { background: linear-gradient(105deg, #df4658 0%, #fa7c88 52%, #df4658 100%); }
  73.33%, 79.99% { background: linear-gradient(105deg, #e45763 0%, #fb8d97 52%, #e45763 100%); }
  80%, 86.65%  { background: linear-gradient(105deg, #d83f66 0%, #f9788f 52%, #d83f66 100%); }
  86.66%, 93.32% { background: linear-gradient(105deg, #bd2d72 0%, #ef6596 52%, #bd2d72 100%); }
  93.33%, 100% { background: linear-gradient(105deg, #9d246e 0%, #df5ca1 52%, #9d246e 100%); }
}

@keyframes submitEuFlash {
  0%, 6.66%    { background: linear-gradient(105deg, #07172f 0%, #0a2550 52%, #07172f 100%); }
  6.67%, 13.32% { background: linear-gradient(105deg, #0a2046 0%, #0d3270 52%, #0a2046 100%); }
  13.33%, 19.99% { background: linear-gradient(105deg, #0d285a 0%, #123e8f 52%, #0d285a 100%); }
  20%, 26.65%  { background: linear-gradient(105deg, #12306c 0%, #174bb0 52%, #12306c 100%); }
  26.66%, 33.32% { background: linear-gradient(105deg, #17377d 0%, #1d56cb 52%, #17377d 100%); }
  33.33%, 39.99% { background: linear-gradient(105deg, #1a3f8f 0%, #2362e0 52%, #1a3f8f 100%); }
  40%, 46.65%  { background: linear-gradient(105deg, #1e47a1 0%, #2d6ff0 52%, #1e47a1 100%); }
  46.66%, 53.32% { background: linear-gradient(105deg, #2350b0 0%, #397bf6 52%, #2350b0 100%); }
  53.33%, 59.99% { background: linear-gradient(105deg, #2758ba 0%, #4687fa 52%, #2758ba 100%); }
  60%, 66.65%  { background: linear-gradient(105deg, #2465b8 0%, #3e97f7 52%, #2465b8 100%); }
  66.66%, 73.32% { background: linear-gradient(105deg, #1e70b1 0%, #35a6ee 52%, #1e70b1 100%); }
  73.33%, 79.99% { background: linear-gradient(105deg, #177ba6 0%, #2bb5e2 52%, #177ba6 100%); }
  80%, 86.65%  { background: linear-gradient(105deg, #176d9a 0%, #409bd9 52%, #176d9a 100%); }
  86.66%, 93.32% { background: linear-gradient(105deg, #214f94 0%, #567fd9 52%, #214f94 100%); }
  93.33%, 100% { background: linear-gradient(105deg, #2b3b84 0%, #6c6fd6 52%, #2b3b84 100%); }
}

@keyframes submitAttentionPulse {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
    box-shadow:
      0 0 0 2px rgba(247,221,0,.24),
      0 0 24px rgba(247,221,0,.18),
      0 16px 34px rgba(0,0,0,.34);
  }
  50% {
    transform: translateY(-2px) scale(1.015);
    filter: brightness(1.14);
    box-shadow:
      0 0 0 4px rgba(247,221,0,.18),
      0 0 42px rgba(247,221,0,.28),
      0 18px 38px rgba(0,0,0,.38);
  }
}

@keyframes submitHighlightSweep {
  0% { opacity: .28; transform: translateX(-8%); }
  50% { opacity: .48; transform: translateX(2%); }
  100% { opacity: .28; transform: translateX(8%); }
}

@keyframes submitArrowNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(9px); }
}

/* User explicitly requested an attention animation, so keep this CTA animated
   even on systems that advertise reduced motion. The cycle is slow and obvious,
   not a high-frequency strobe. */
@media (prefers-reduced-motion: reduce) {
  .submit-button.submit-ready {
    animation: submitAttentionPulse 1.9s ease-in-out infinite !important;
  }
  .submit-cta.team-usa .submit-button.submit-ready::before {
    animation: submitUsaFlash 3.0s step-end infinite !important;
  }
  .submit-cta.team-eu .submit-button.submit-ready::before {
    animation: submitEuFlash 3.0s step-end infinite !important;
  }
  .submit-button.submit-ready::after {
    animation: submitHighlightSweep 2.2s linear infinite !important;
  }
  .submit-button.submit-ready .submit-arrow {
    animation: submitArrowNudge .8s ease-in-out infinite !important;
  }
}
.form-message { min-height: 22px; margin-top: 12px; font-size: 13px; font-weight: 600; }
.form-message.error { color: #ff8794; }
.form-message.success { color: var(--green); }

.signup-rules { padding: 30px; }
.signup-rules h3 { margin-top: 8px; }
.signup-rules ol { margin: 28px 0 0; padding: 0; list-style: none; counter-reset: rules; }
.signup-rules li { position: relative; padding: 0 0 22px 46px; counter-increment: rules; }
.signup-rules li::before {
  content: counter(rules);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(66,247,166,.5);
  border-radius: 50%;
  color: var(--green);
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-weight: 900;
}
.signup-rules li strong, .signup-rules li span { display: block; }
.signup-rules li span { margin-top: 3px; color: var(--muted); font-size: 13px; }
.event-link-cards { display: grid; gap: 10px; margin-top: 12px; }
.stream-card {
  display: block;
  margin-top: 0;
  padding: 18px;
  border: 1px solid rgba(66,247,166,.26);
  border-radius: 12px;
  text-decoration: none;
  background: rgba(66,247,166,.06);
}
.stream-card span { display: block; color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.stream-card strong { display: block; margin-top: 3px; font-size: 16px; }
.discord-card {
  border-color: rgba(88,101,242,.42);
  background: rgba(88,101,242,.10);
}
.discord-card span { color: #8f98ff; }
.discord-card:hover { border-color: rgba(143,152,255,.72); }

.teams-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.team-panel { min-height: 330px; overflow: hidden; }
.team-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
}
.team-panel > header > div { display: flex; align-items: center; gap: 11px; }
.team-panel > header span { font-size: 30px; }
.team-panel > header h3 { font-size: 30px; }
.team-panel > header > strong { color: var(--muted); font-size: 12px; }
.team-usa { border-top: 3px solid var(--usa); }
.team-eu { border-top: 3px solid var(--eu); }
.player-list { padding: 12px; }
.player-row {
  display: grid;
  grid-template-columns: minmax(110px, 1.4fr) .8fr 1fr .8fr;
  gap: 10px;
  align-items: center;
  min-height: 56px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.player-row:last-child { border-bottom: 0; }
.player-name { overflow: hidden; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.player-meta { color: #c5cad2; font-size: 12px; }
.rank-badge {
  display: inline-flex;
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  color: white;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.rank-blue { background: #2259d7; }
.rank-green { background: #168c55; }
.rank-yellow { color: #171500; background: #e7cb14; }
.rank-orange { background: #dd6c10; }
.rank-pink { background: #d43b9e; }
.status-badge { display: inline-flex; margin-left: 6px; padding: 2px 6px; border: 1px solid rgba(66,247,166,.3); border-radius: 999px; color: var(--green); font-size: 9px; text-transform: uppercase; }
.empty-state { padding: 70px 20px; color: var(--muted); text-align: center; }

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 34px;
  padding-bottom: 34px;
  border-top: 1px solid var(--line);
}
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand img { width: 54px; height: 44px; object-fit: contain; }
.footer-brand strong, .footer-brand span { display: block; }
.footer-brand strong { font-family: "Barlow Condensed", Impact, sans-serif; font-size: 20px; letter-spacing: .08em; }
.footer-brand span { color: var(--muted); font-size: 11px; }
.footer-links { display: flex; gap: 18px; }
.footer-links a { color: var(--muted); font-size: 13px; font-weight: 700; text-decoration: none; }
.footer-links a:hover { color: white; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .18s ease, visibility .18s ease;
}
.modal.open { visibility: visible; opacity: 1; }
.modal-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(0,0,0,.76); backdrop-filter: blur(8px); }
.modal-card { position: relative; z-index: 1; width: min(470px, 100%); padding: 34px; border: 1px solid var(--line); border-radius: 18px; background: #12161c; box-shadow: var(--shadow); }

.modal-flag-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 116px;
  height: 76px;
  margin: 0 auto 22px;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  box-shadow: 0 13px 32px rgba(0,0,0,.36);
}
.modal-flag {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  object-fit: cover;
}

.modal-card h2 { margin-top: 8px; font-size: 52px; }
.modal-card p { color: var(--muted); }
.modal-close { position: absolute; top: 12px; right: 14px; border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: 32px; }
.modal-jump { margin-top: 8px; }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .site-header nav a:not(.nav-live) { display: none; }
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 55px; }
  .hero-art { order: -1; }
  .signup-grid { grid-template-columns: 1fr; }
  .signup-rules { order: -1; }
}

@media (max-width: 720px) {
  .section-shell { width: min(100% - 24px, 1180px); }
  .site-header { min-height: 62px; padding-inline: 12px; }
  .brand span { display: none; }
  .brand img { width: 42px; }
  .hero { padding-top: 34px; padding-bottom: 60px; gap: 30px; }
  h1 { font-size: clamp(49px, 15vw, 68px); }
  h2 { font-size: 46px; }
  .event-facts { grid-template-columns: 1fr; }
  .fact-card.wide { grid-column: auto; }
  .hero-actions .button { width: 100%; }
  .submit-copy > span { font-size: 20px; }
  .submit-button { min-height: 78px; padding: 28px 18px 16px; }
  .submit-strip { flex-direction: column; align-items: flex-start; gap: 2px; padding-inline: 12px; }
  .submit-strip-copy { text-align: left; }
  .section-heading { display: block; }
  .section-heading p { margin-top: 14px; }
  .main-event, .signup-section, .players-section { padding-top: 65px; padding-bottom: 65px; }
  .form-panel, .signup-rules { padding: 20px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .teams-grid { grid-template-columns: 1fr; }
  .team-heading h3 { font-size: 26px; }
  .team-usa > header { background-size: auto, 200px auto; }
  .team-eu > header { background-size: auto, 190px auto; }
  .player-row {
    grid-template-columns: minmax(110px, 1.25fr) 28px 46px 1fr;
    gap: 10px;
    min-height: 72px;
  }
  .rank-swatch { width: 20px; height: 20px; border-radius: 6px; }
  .character-portrait-wrap { width: 40px; height: 62px; }
  .player-time { font-size: 11px; text-align: left; }
  .site-footer { align-items: flex-start; }
}



/* ===== Koji Dojo v5.2: public player-list presentation ===== */

.team-panel {
  min-height: 330px;
  overflow: hidden;
}

.team-panel > header {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 88px;
  padding: 22px 24px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background-color: rgba(18, 23, 31, .92);
}

.team-panel > header::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0 0 0 38%;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  opacity: .58;
}

.team-panel > header::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(18, 23, 31, 1) 0%,
    rgba(18, 23, 31, 1) 39%,
    rgba(18, 23, 31, .88) 57%,
    rgba(18, 23, 31, .34) 100%
  );
}

.team-usa > header::before {
  background-image: url("flag-usa.svg");
}

.team-eu > header::before {
  background-image: url("flag-eu.svg");
}

.team-heading {
  position: relative;
  z-index: 1;
}

.team-heading h3 {
  margin: 0;
  font-size: 30px;
  letter-spacing: .015em;
}

.team-panel > header > strong {
  position: relative;
  z-index: 1;
  color: #eef2f8;
  font-size: 12px;
  font-weight: 800;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .72);
}

.player-list {
  padding: 10px 12px;
}

.player-row {
  display: grid;
  grid-template-columns: minmax(145px, 1.55fr) 48px 62px minmax(68px, .7fr);
  gap: 14px;
  align-items: center;
  min-height: 136px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.player-row:last-child {
  border-bottom: 0;
}

.player-name {
  overflow: hidden;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-rank-cell,
.player-character-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rank-swatch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -5px 10px rgba(0, 0, 0, .14),
    0 7px 16px rgba(0, 0, 0, .28);
}

.rank-swatch::after {
  content: "";
  position: absolute;
  inset: 3px 4px auto;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .27);
}

.rank-blue {
  background: linear-gradient(180deg, #4d8fff 0%, #2259d7 100%);
}

.rank-green {
  background: linear-gradient(180deg, #2fd588 0%, #168c55 100%);
}

.rank-yellow {
  background: linear-gradient(180deg, #ffed68 0%, #e7cb14 100%);
}

.rank-orange {
  background: linear-gradient(180deg, #ffa342 0%, #dd6c10 100%);
}

.rank-pink {
  background: linear-gradient(180deg, #ff76d0 0%, #d43b9e 100%);
}

.character-portrait-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 78px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
}

.character-portrait {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.character-name-fallback {
  max-width: 86px;
  color: #c5cad2;
  font-size: 12px;
  line-height: 1.15;
  text-align: center;
}

.player-time {
  color: #c5cad2;
  font-size: 12px;
  text-align: right;
}

@media (max-width: 760px) {
  .team-panel > header {
    min-height: 78px;
    padding: 18px;
  }

  .team-panel > header::before {
    left: 45%;
    opacity: .48;
  }

  .team-heading h3 {
    font-size: 25px;
  }

  .player-row {
    grid-template-columns: minmax(104px, 1.25fr) 36px 48px minmax(54px, .8fr);
    gap: 9px;
    min-height: 78px;
    padding: 7px 5px;
  }

  .rank-swatch {
    width: 30px;
    height: 19px;
    border-radius: 5px;
  }

  .character-portrait-wrap {
    width: 40px;
    height: 63px;
  }

  .player-time {
    font-size: 11px;
    text-align: left;
  }
}

@media (max-width: 430px) {
  .player-row {
    grid-template-columns: minmax(90px, 1.2fr) 31px 43px 52px;
    gap: 7px;
  }

  .rank-swatch {
    width: 27px;
    height: 18px;
  }

  .character-portrait-wrap {
    width: 37px;
    height: 58px;
  }
}


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}


.backend-status {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .45rem;
  padding: .38rem .68rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.backend-status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.backend-status.checking { color: #f0c85a; }
.backend-status.connected { color: #69e096; }
.backend-status.error { color: #ff7b7b; }


/* ===== Koji Dojo v5.3: table headings + vertical rank bars ===== */

.team-panel {
  --player-columns: minmax(145px, 1.35fr) 116px 128px minmax(105px, .85fr);
}

.player-column-header,
.player-row {
  grid-template-columns: var(--player-columns) !important;
}

.player-column-header {
  display: grid;
  gap: 14px;
  align-items: center;
  min-height: 50px;
  padding: 11px 22px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(8, 12, 18, .52);
  color: #9ea7b5;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .10em;
  line-height: 1.2;
  text-transform: uppercase;
}

.player-column-header span:nth-child(2),
.player-column-header span:nth-child(3) {
  text-align: center;
}

.player-column-header span:last-child {
  text-align: right;
}

.player-list {
  padding-top: 0;
}

.player-row {
  min-height: 164px;
  padding: 12px 10px;
}

.player-name {
  font-size: 16px;
}

.player-rank-cell,
.player-character-cell {
  align-self: stretch;
}

.rank-swatch {
  width: 58px !important;
  height: 132px !important;
  border: 0 !important;
  border-radius: 1px !important;
  box-shadow: none !important;
}

.rank-swatch::after {
  display: none !important;
}

.rank-blue {
  background: #1565ff !important;
}

.rank-green {
  background: #16a85d !important;
}

.rank-yellow {
  background: #f2d316 !important;
}

.rank-orange {
  background: #ff6500 !important;
}

.rank-pink {
  background: #e13aaa !important;
}

.character-portrait-wrap {
  width: 88px !important;
  height: 138px !important;
  border-radius: 8px !important;
}

.player-time {
  font-size: 14px;
  text-align: right;
}

@media (max-width: 1100px) {
  .team-panel {
    --player-columns: minmax(125px, 1.25fr) 92px 104px minmax(84px, .8fr);
  }

  .player-column-header {
    padding-inline: 16px;
    font-size: 9px;
  }

  .player-row {
    min-height: 142px;
  }

  .rank-swatch {
    width: 48px !important;
    height: 112px !important;
  }

  .character-portrait-wrap {
    width: 72px !important;
    height: 114px !important;
  }
}

@media (max-width: 760px) {
  .team-panel {
    --player-columns: minmax(100px, 1.2fr) 72px 76px minmax(68px, .8fr);
  }

  .player-column-header {
    gap: 8px;
    min-height: 46px;
    padding: 9px 10px;
    font-size: 8px;
    letter-spacing: .055em;
  }

  .player-row {
    gap: 8px;
    min-height: 106px;
    padding: 8px 5px;
  }

  .player-name {
    font-size: 13px;
  }

  .rank-swatch {
    width: 35px !important;
    height: 80px !important;
  }

  .character-portrait-wrap {
    width: 50px !important;
    height: 80px !important;
  }

  .player-time {
    font-size: 11px;
  }
}

@media (max-width: 430px) {
  .team-panel {
    --player-columns: minmax(82px, 1.15fr) 54px 58px 62px;
  }

  .player-column-header {
    gap: 6px;
    padding-inline: 7px;
    font-size: 7px;
    letter-spacing: .02em;
  }

  .player-row {
    gap: 6px;
    min-height: 92px;
  }

  .rank-swatch {
    width: 28px !important;
    height: 68px !important;
  }

  .character-portrait-wrap {
    width: 42px !important;
    height: 68px !important;
  }
}


/* ===== Koji Dojo v5.4: countdown above the signup banner ===== */

.hero-art {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.countdown-banner {
  width: 100%;
  margin: 0 0 16px;
  gap: 10px;
}

.countdown-banner > div {
  min-height: 84px;
  padding: 15px 10px 12px;
  border-top-width: 3px;
  border-right: 1px solid rgba(255,255,255,.035);
  border-bottom: 1px solid rgba(255,255,255,.055);
  border-left: 1px solid rgba(255,255,255,.035);
  background:
    linear-gradient(180deg, rgba(24,29,36,.98), rgba(13,17,22,.98));
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}

.countdown-banner strong {
  font-size: 43px;
  letter-spacing: .015em;
}

.countdown-banner span {
  margin-top: 7px;
  font-size: 10px;
}

@media (max-width: 980px) {
  .hero-art {
    order: -1;
  }

  .countdown-banner {
    order: -1;
    margin-bottom: 12px;
  }
}

@media (max-width: 720px) {
  .countdown-banner {
    gap: 6px;
  }

  .countdown-banner > div {
    min-height: 70px;
    padding: 12px 5px 10px;
  }

  .countdown-banner strong {
    font-size: 34px;
  }

  .countdown-banner span {
    font-size: 8px;
    letter-spacing: .08em;
  }
}

@media (max-width: 420px) {
  .countdown-banner strong {
    font-size: 30px;
  }

  .countdown-banner span {
    font-size: 7px;
  }
}


/* ===== Koji Dojo v5.6: team-select flags + tab title ===== */

.region-picker {
  gap: 10px;
  margin-bottom: 22px;
}

.region-option {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  min-height: 150px;
  padding: 10px;
  overflow: hidden;
  text-align: center;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.region-option:hover {
  transform: translateY(-1px);
}

.region-flag {
  display: block;
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  filter: grayscale(1) brightness(.78) contrast(1.05);
  opacity: .92;
  transition: filter .18s ease, opacity .18s ease, box-shadow .18s ease;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.region-name {
  display: block;
  width: 100%;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.1;
}

.region-option.active .region-flag {
  filter: none;
  opacity: 1;
  box-shadow: 0 10px 22px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.08);
}

.region-option[data-region="USA"].active {
  border-color: rgba(239,62,82,.85);
  background: rgba(239,62,82,.14);
  color: white;
}

.region-option[data-region="EU"].active {
  border-color: rgba(45,124,255,.85);
  background: rgba(45,124,255,.14);
  color: white;
}

@media (max-width: 760px) {
  .region-option {
    min-height: 142px;
    padding: 8px;
    gap: 7px;
  }

  .region-flag {
    height: 80px;
    border-radius: 7px;
  }

  .region-name {
    font-size: 14px;
  }
}

@media (max-width: 430px) {
  .region-picker {
    grid-template-columns: 1fr;
  }

  .region-option {
    min-height: 132px;
  }
}


/* Koji Dojo v6: temporarily hide the featured main-event section. */
.main-event-hidden {
  display: none !important;
}


/* Koji Dojo v6.1: live poster + today's schedule */
.schedule-section {
  padding-top: 26px;
  padding-bottom: 70px;
}

.schedule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 26px;
}

.schedule-card {
  padding: 18px 18px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
    rgba(17,21,27,.86);
  box-shadow: var(--shadow);
}

.schedule-set {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(247,221,0,.12);
  color: var(--yellow);
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.schedule-players {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: center;
  margin-top: 14px;
}

.schedule-player {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
}

.schedule-player strong {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.15;
}

.schedule-flag {
  font-size: 24px;
  line-height: 1;
}

.usa-side {
  box-shadow: inset 3px 0 0 var(--usa);
}

.eu-side {
  box-shadow: inset 3px 0 0 var(--eu);
}

.schedule-vs {
  color: #eef2f8;
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .schedule-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .schedule-card {
    padding: 16px;
  }

  .schedule-players {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .schedule-vs {
    justify-self: center;
    font-size: 28px;
  }

  .schedule-player {
    min-height: 52px;
  }

  .schedule-player strong {
    font-size: 16px;
  }
}

/* Koji Dojo v6.2: final winner banner + set results */
.winner-section {
  padding-top: 18px;
  padding-bottom: 40px;
}

.winner-banner {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 145px 145px;
  gap: 24px;
  align-items: center;
  min-height: 180px;
  padding: 22px 28px;
  overflow: hidden;
  border: 1px solid rgba(239,62,82,.62);
  border-top: 4px solid var(--usa);
  border-radius: 20px;
  background: linear-gradient(100deg, rgba(35,12,17,.98) 0%, rgba(19,22,29,.98) 52%, rgba(14,18,24,.98) 100%);
  box-shadow: 0 28px 80px rgba(0,0,0,.40), 0 0 45px rgba(239,62,82,.10);
}

.winner-banner::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8,10,13,.12), rgba(8,10,13,.58)),
    repeating-linear-gradient(-22deg, rgba(255,255,255,.025) 0 2px, transparent 2px 10px);
  pointer-events: none;
}

.winner-flag {
  display: flex;
  align-items: center;
  justify-content: center;
}

.winner-flag img {
  width: 138px;
  height: 92px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 16px 32px rgba(0,0,0,.38);
}

.winner-copy h2 {
  margin-top: 8px;
  color: #fff;
  font-size: clamp(48px, 6vw, 82px);
}

.winner-copy p {
  margin: 12px 0 0;
  color: #d5dae2;
  font-size: 17px;
}

.winner-copy p strong {
  color: #fff;
}

.winner-score,
.winner-games {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 112px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px;
  background: rgba(255,255,255,.045);
}

.winner-score {
  border-color: rgba(239,62,82,.40);
  background: rgba(239,62,82,.10);
}

.winner-score strong,
.winner-games strong {
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 46px;
  font-weight: 900;
  line-height: 1;
}

.winner-score span,
.winner-games span {
  margin-top: 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.results-section {
  padding-top: 42px;
}

.result-card {
  position: relative;
}

.result-card.usa-win {
  border-color: rgba(239,62,82,.27);
}

.result-card.eu-win {
  border-color: rgba(45,124,255,.30);
}

.result-row {
  grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr);
}

.result-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.result-score strong {
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 38px;
  font-weight: 900;
  line-height: 1;
}

.result-score span {
  margin-top: 5px;
  color: var(--green);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.winner-player {
  background: rgba(66,247,166,.07);
  border-color: rgba(66,247,166,.24);
}

@media (max-width: 980px) {
  .winner-banner {
    grid-template-columns: 120px minmax(0, 1fr) 120px;
  }

  .winner-games {
    grid-column: 2 / 4;
    min-height: 82px;
  }
}

@media (max-width: 700px) {
  .winner-banner {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 20px;
    text-align: center;
  }

  .winner-flag,
  .winner-copy {
    grid-column: 1 / -1;
  }

  .winner-score,
  .winner-games {
    grid-column: auto;
    min-height: 92px;
  }

  .result-row {
    grid-template-columns: 1fr;
  }

  .result-score {
    min-height: 68px;
  }
}


/* Koji Dojo v6.3: finished-event state and Results layout */
.winner-section-inline {
  width: 100%;
  padding: 0 0 38px;
}

.finished-dot {
  animation: none;
  background: var(--muted);
  box-shadow: 0 0 0 5px rgba(170,176,187,.13);
}

.finished-countdown {
  grid-column: 1 / -1;
  min-height: 94px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-top-color: var(--green) !important;
  background:
    linear-gradient(180deg, rgba(18,28,25,.98), rgba(12,18,17,.98)) !important;
}

.finished-countdown strong {
  font-size: 38px !important;
}

.finished-countdown span {
  margin-top: 9px;
  color: var(--green) !important;
  font-size: 11px !important;
}

.results-section > .winner-section + .section-heading {
  margin-top: 0;
}

@media (max-width: 700px) {
  .winner-section-inline {
    padding-bottom: 28px;
  }

  .finished-countdown strong {
    font-size: 30px !important;
  }
}


/* ===== Koji Dojo v7: archive + next-event reset ===== */

.archive-section {
  padding: 92px 0 105px;
  border-top: 1px solid var(--line);
}

.archive-event {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(24,29,37,.98), rgba(13,16,21,.98));
  box-shadow: var(--shadow);
}

.archive-event-top {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr);
  gap: 0;
  border-bottom: 1px solid var(--line);
}

.archive-poster {
  position: relative;
  min-width: 0;
  background: #07090c;
}

.archive-poster img {
  width: 100%;
  height: 100%;
  min-height: 370px;
  object-fit: cover;
}

.archive-summary {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px;
  background:
    radial-gradient(circle at 80% 25%, rgba(239,62,82,.10), transparent 32%),
    linear-gradient(160deg, rgba(24,29,37,.98), rgba(13,16,21,.98));
}

.archive-summary h3 {
  margin-top: 10px;
  font-size: clamp(42px, 4vw, 60px);
}

.archive-summary p {
  margin: 16px 0 0;
  color: var(--muted);
}

.archive-summary-score {
  display: grid;
  grid-template-columns: 76px auto 1fr;
  gap: 16px;
  align-items: center;
  margin-top: 28px;
  padding: 16px;
  border: 1px solid rgba(239,62,82,.28);
  border-radius: 15px;
  background: rgba(239,62,82,.07);
}

.archive-summary-score img {
  width: 76px;
  height: 50px;
  object-fit: cover;
  border-radius: 7px;
}

.archive-summary-score strong {
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 44px;
  line-height: 1;
}

.archive-summary-score span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
}

.archive-results {
  padding: 12px 22px 22px;
}

.archive-result-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 90px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 66px;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.archive-result-row:last-child {
  border-bottom: 0;
}

.archive-set {
  color: var(--yellow);
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 19px;
  font-weight: 900;
  text-align: center;
}

.archive-player {
  font-size: 14px;
}

.archive-score {
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 29px;
  font-weight: 900;
  text-align: center;
}

.usa-result {
  color: #ff7282;
}

.eu-result {
  color: #6e8fff;
}

[hidden] {
  display: none !important;
}

@media (max-width: 900px) {
  .archive-event-top {
    grid-template-columns: 1fr;
  }

  .archive-poster img {
    min-height: 0;
  }

  .archive-summary {
    padding: 26px;
  }
}

@media (max-width: 620px) {
  .archive-section {
    padding-top: 70px;
  }

  .archive-results {
    padding-inline: 14px;
  }

  .archive-result-row {
    grid-template-columns: 30px minmax(0, 1fr) 64px minmax(0, 1fr);
    gap: 8px;
  }

  .archive-player {
    font-size: 11px;
  }

  .archive-score {
    font-size: 24px;
  }

  .archive-summary-score {
    grid-template-columns: 58px auto 1fr;
  }

  .archive-summary-score img {
    width: 58px;
    height: 40px;
  }
}


/* ===== Koji Dojo v7.1: hero countdown header + poster links ===== */

.countdown-kicker {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: 1px solid rgba(247,221,0,.52);
  border-bottom: 0;
  background:
    linear-gradient(180deg, rgba(247,221,0,.98), rgba(226,195,0,.98));
  color: #090b0e;
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 23px;
  font-weight: 900;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.countdown-banner {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  gap: 8px !important;
  border-right: 1px solid rgba(247,221,0,.32);
  border-bottom: 1px solid rgba(247,221,0,.32);
  border-left: 1px solid rgba(247,221,0,.32);
}

.countdown-banner > div {
  border-top: 0 !important;
}

.hero-link-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin-top: 12px;
}

.hero-link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 58px;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px;
  text-decoration: none;
  background: rgba(255,255,255,.035);
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}

.hero-link-card:hover {
  transform: translateY(-1px);
}

.hero-link-card span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.hero-link-card strong {
  font-size: 14px;
  line-height: 1.15;
  text-align: right;
}

.hero-twitch {
  border-color: rgba(66,247,166,.30);
  background: rgba(66,247,166,.055);
}

.hero-twitch span {
  color: var(--green);
}

.hero-twitch:hover {
  border-color: rgba(66,247,166,.62);
  background: rgba(66,247,166,.085);
}

.hero-discord {
  border-color: rgba(88,101,242,.38);
  background: rgba(88,101,242,.075);
}

.hero-discord span {
  color: #919aff;
}

.hero-discord:hover {
  border-color: rgba(143,152,255,.70);
  background: rgba(88,101,242,.11);
}

/* The poster itself should be clean: no floating signup badge. */
.banner-frame-signup > .banner-label {
  display: none !important;
}

@media (max-width: 720px) {
  .countdown-kicker {
    min-height: 40px;
    font-size: 19px;
  }

  .hero-link-cards {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .hero-link-card {
    min-height: 54px;
  }
}


/* ===== Koji Dojo v7.2: archive flag icons ===== */
.inline-flag-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 18px;
  margin-right: 9px;
  vertical-align: -3px;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
}

.inline-flag {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.archive-player {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

@media (max-width: 620px) {
  .inline-flag-wrap {
    width: 20px;
    height: 14px;
    margin-right: 7px;
  }
}


/* ===== Koji Dojo v7.3: Frankfurt connection check ===== */

.hero-latency {
  grid-column: 1 / -1;
  border-color: rgba(247,221,0,.34);
  background: rgba(247,221,0,.055);
}

.hero-latency span {
  color: var(--yellow);
}

.hero-latency:hover {
  border-color: rgba(247,221,0,.65);
  background: rgba(247,221,0,.085);
}

.connection-check-box {
  margin: 4px 0 18px;
  padding: 16px;
  border: 1px solid rgba(247,221,0,.30);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(247,221,0,.07), rgba(255,255,255,.025));
}

.connection-check-copy {
  min-width: 0;
}

.connection-check-label {
  display: block;
  margin-bottom: 5px;
  color: var(--yellow);
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .13em;
}

.connection-check-copy strong {
  display: block;
  color: #f5f6f8;
  font-size: 14px;
}

.connection-check-copy p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.connection-test-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  margin-top: 13px;
  padding: 0 14px;
  border: 1px solid rgba(247,221,0,.46);
  border-radius: 8px;
  color: #0c0e10;
  background: var(--yellow);
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .035em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .16s ease, filter .16s ease;
}

.connection-test-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.connection-confirm {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 14px 0 0;
  cursor: pointer;
}

.connection-confirm input {
  width: 19px;
  height: 19px;
  min-height: 0;
  margin: 2px 0 0;
  accent-color: var(--green);
}

.connection-confirm > span {
  margin: 0;
  color: #d7dce4;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
}

@media (max-width: 720px) {
  .hero-latency {
    grid-column: auto;
  }

  .connection-check-box {
    padding: 14px;
  }
}


/* ===== Koji Dojo v7.4: embedded TestMy latency widget ===== */

.testmy-embed-shell {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: rgba(5,8,11,.72);
}

.testmy-embed-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
}

.testmy-embed-heading span {
  color: var(--green);
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .11em;
}

.testmy-embed-heading small {
  color: var(--muted);
  font-size: 10px;
}

.testmy-widget-host {
  min-height: 120px;
  padding: 10px;
}

.connection-fallback {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
}

.connection-fallback > span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.connection-fallback .connection-test-button {
  min-height: 42px;
  margin-top: 0;
  padding-inline: 12px;
  white-space: nowrap;
}

@media (max-width: 680px) {
  .testmy-widget-host {
    min-height: 150px;
    padding: 8px;
  }

  .connection-fallback {
    grid-template-columns: 1fr;
  }

  .connection-fallback .connection-test-button {
    width: 100%;
  }
}


/* ===== Koji Dojo v8 staging: regional latency tester ===== */

.testmy-embed-shell {
  display: none !important;
}

.latency-run-button {
  width: 100%;
  justify-content: space-between;
  margin-top: 14px;
}

.latency-progress {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(66,247,166,.20);
  border-radius: 10px;
  background: rgba(5,10,9,.52);
}

.latency-progress-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #e9edf3;
  font-size: 12px;
}

.latency-progress-top span {
  color: var(--muted);
  font-size: 11px;
}

.latency-progress-bar {
  height: 8px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}

.latency-progress-bar > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
  transition: width .25s ease;
}

.latency-testing-location {
  margin-top: 9px;
  color: var(--muted);
  font-size: 11px;
}

.latency-results {
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  background: rgba(7,10,14,.52);
}

.latency-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 48px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.latency-result-row:last-child {
  border-bottom: 0;
}

.latency-result-row > div {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
}

.latency-result-row strong {
  font-size: 13px;
}

.latency-result-row small {
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
}

.latency-location-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--muted);
}

.latency-result-good .latency-location-dot {
  background: var(--green);
}

.latency-result-slow .latency-location-dot {
  background: var(--usa);
}

.latency-result-error .latency-location-dot {
  background: var(--muted);
}

.latency-result-good > strong {
  color: var(--green);
}

.latency-result-slow > strong {
  color: #ff7d8b;
}

.latency-error-text {
  color: var(--muted);
  font-size: 11px !important;
}

.latency-verdict {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-top: 13px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
}

.latency-verdict-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 900;
  background: rgba(255,255,255,.06);
}

.latency-verdict strong,
.latency-verdict span {
  display: block;
}

.latency-verdict strong {
  font-size: 12px;
  letter-spacing: .025em;
}

.latency-verdict div > span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.latency-pass {
  border-color: rgba(66,247,166,.34);
  background: rgba(66,247,166,.065);
}

.latency-pass .latency-verdict-icon,
.latency-pass strong {
  color: var(--green);
}

.latency-fail {
  border-color: rgba(239,62,82,.38);
  background: rgba(239,62,82,.065);
}

.latency-fail .latency-verdict-icon,
.latency-fail strong {
  color: #ff687a;
}

.latency-testing {
  border-color: rgba(247,221,0,.28);
}

.connection-confirm-auto {
  cursor: default;
}

.connection-confirm-auto input {
  pointer-events: none;
}

.connection-fallback {
  margin-top: 12px;
}

.connection-fallback a {
  color: #d6dbe4;
  font-size: 11px;
  font-weight: 700;
}

/* ======================================================================
   KOJI DOJO v11 STABLE VISUAL LAYER
   Clean layer built on the known-stable v9 site CSS. No historical premium
   overrides are carried forward.
   ====================================================================== */
:root { --kd-stage-canvas: 1500px; }

body { background:#07090d !important; }
.site-header {
  background:rgba(6,9,13,.86) !important;
  backdrop-filter:blur(18px) saturate(1.12);
  -webkit-backdrop-filter:blur(18px) saturate(1.12);
  border-bottom-color:rgba(255,255,255,.08) !important;
}

.premium-section {
  position:relative !important;
  isolation:isolate;
  overflow:visible !important;
  background:transparent !important;
}
.premium-section::before {
  content:"";
  position:absolute;
  inset:0 calc(50% - 50vw);
  z-index:0;
  background:#07090d;
  pointer-events:none;
}

/* The wallpaper deliberately lives in a centered 1500px cinematic canvas.
   On ultra-wide displays the excess sides are simply black rather than
   stretching the stage art across the whole monitor. */
.premium-stage {
  position:absolute !important;
  left:50% !important;
  top:0 !important;
  bottom:0 !important;
  width:min(var(--kd-stage-canvas),100vw) !important;
  height:100% !important;
  transform:translateX(-50%) !important;
  z-index:1 !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  pointer-events:none;
  overflow:hidden;
}
.premium-stage::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.premium-stage-hero {
  background-image:url("event-wallpaper-01-temple.jpg");
  filter:saturate(1.16) contrast(1.09) brightness(.82);
}
.premium-stage-hero::after {
  background:
    linear-gradient(90deg,rgba(7,9,13,.34) 0%,rgba(7,9,13,.12) 20%,rgba(7,9,13,.08) 50%,rgba(7,9,13,.16) 78%,rgba(7,9,13,.42) 100%),
    linear-gradient(180deg,rgba(7,9,13,.06),rgba(7,9,13,.12) 45%,rgba(7,9,13,.68) 100%);
}
.premium-stage-signup {
  background-image:url("stage-floating-ruins.jpg");
  filter:saturate(.80) contrast(1.07) brightness(.55);
}
.premium-stage-signup::after {
  background:
    linear-gradient(90deg,rgba(7,9,13,.84),rgba(7,9,13,.48) 28%,rgba(7,9,13,.46) 72%,rgba(7,9,13,.86)),
    linear-gradient(180deg,rgba(7,9,13,.52),rgba(7,9,13,.80));
}
.premium-stage-players {
  background-image:url("stage-interior-hall.jpg");
  background-position:63% center !important;
  filter:saturate(.70) contrast(1.08) brightness(.43);
}
.premium-stage-players::after {
  background:linear-gradient(180deg,rgba(7,9,13,.76),rgba(7,9,13,.55) 45%,rgba(7,9,13,.90));
}
.premium-stage-archive {
  background-image:url("stage-ruined-hall.jpg");
  filter:saturate(.64) contrast(1.10) brightness(.42);
}
.premium-stage-archive::after {
  background:
    linear-gradient(90deg,rgba(7,9,13,.78),rgba(7,9,13,.52) 30%,rgba(7,9,13,.54) 70%,rgba(7,9,13,.84)),
    linear-gradient(180deg,rgba(7,9,13,.48),rgba(7,9,13,.88));
}

.premium-section > :not(.premium-stage):not(.premium-fighter) { position:relative; z-index:3; }
.premium-hero::after,.premium-signup::after,.premium-players::after,.premium-archive::after {
  content:"";
  position:absolute;
  left:calc(50% - 50vw);
  bottom:-1px;
  width:100vw;
  height:170px;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(7,9,13,0),rgba(7,9,13,.22) 25%,rgba(7,9,13,.64) 65%,#07090d 100%);
}

.premium-hero {
  min-height:820px;
  padding-top:76px;
  padding-bottom:88px;
  width:min(1320px,calc(100% - 40px));
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:54px;
}
.premium-hero .hero-copy { padding-left:clamp(78px,7vw,132px); }
.premium-hero .hero-art { transform:translateX(14px); }
.premium-signup { padding-top:95px; padding-bottom:100px; }
.premium-players { padding-top:95px; padding-bottom:100px; }
.premium-archive { padding-top:100px; padding-bottom:110px; }
.signup-section,.players-section,.archive-section,.site-footer { border-top-color:transparent !important; }

.premium-hero h1 { text-shadow:0 5px 30px rgba(0,0,0,.88); }
.premium-hero .hero-intro { color:#d8dde5; text-shadow:0 2px 16px rgba(0,0,0,.82); }
.premium-hero .fact-card,.premium-hero .countdown,.premium-hero .banner-frame,.premium-hero .hero-link-card,
.premium-signup .form-panel,.premium-signup .signup-rules,.premium-players .team-panel,.premium-archive .archive-event {
  backdrop-filter:blur(12px) saturate(1.06);
  -webkit-backdrop-filter:blur(12px) saturate(1.06);
}
.premium-signup .form-panel,.premium-signup .signup-rules,.premium-players .team-panel,.premium-archive .archive-event {
  background:linear-gradient(150deg,rgba(17,23,29,.90),rgba(8,12,17,.93));
  border-color:rgba(255,255,255,.12);
  box-shadow:0 26px 66px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.04);
}

/* One-shot fighter entry. These rules are deliberately independent of the
   operating system's reduced-motion preference because the user explicitly
   wants these specific entrance animations. */
.premium-fighter {
  position:absolute !important;
  z-index:2 !important;
  opacity:0 !important;
  pointer-events:none;
  user-select:none;
  will-change:transform,opacity;
  transition:transform 1.05s cubic-bezier(.16,1,.3,1),opacity .78s ease-out !important;
}
.premium-fighter-sol-hero {
  left:-360px !important;
  right:auto !important;
  bottom:-34px !important;
  width:720px !important;
  max-width:none !important;
  --fighter-opacity:.94;
  transform:translate3d(-520px,0,0) !important;
  filter:drop-shadow(0 30px 62px rgba(0,0,0,.76)) saturate(1.08) contrast(1.08);
}
.premium-fighter-ky-hero {
  right:-360px !important;
  left:auto !important;
  bottom:-34px !important;
  width:720px !important;
  max-width:none !important;
  --fighter-opacity:.90;
  transform:translate3d(520px,0,0) !important;
  filter:drop-shadow(0 30px 62px rgba(0,0,0,.76)) saturate(1.08) contrast(1.08);
}
.premium-fighter-johnny-signup {
  left:-245px !important;
  right:auto !important;
  top:52% !important;
  bottom:auto !important;
  width:590px !important;
  max-width:none !important;
  --fighter-opacity:.31;
  transform:translate3d(-560px,-50%,0) !important;
  filter:drop-shadow(0 24px 50px rgba(0,0,0,.80)) saturate(.98) contrast(1.04);
}
.premium-fighter-baiken-signup {
  right:-235px !important;
  left:auto !important;
  top:53% !important;
  bottom:auto !important;
  width:500px !important;
  max-width:none !important;
  --fighter-opacity:.32;
  transform:translate3d(560px,-50%,0) !important;
  filter:drop-shadow(0 24px 50px rgba(0,0,0,.80)) saturate(.98) contrast(1.04);
}
.premium-fighter-dizzy-archive {
  left:-295px !important;
  right:auto !important;
  top:53% !important;
  bottom:auto !important;
  width:650px !important;
  max-width:none !important;
  --fighter-opacity:.32;
  transform:translate3d(-600px,-50%,0) !important;
  filter:drop-shadow(0 24px 54px rgba(0,0,0,.82)) saturate(1.02) contrast(1.04);
}
.premium-fighter-zato-archive {
  right:-275px !important;
  left:auto !important;
  top:54% !important;
  bottom:auto !important;
  width:520px !important;
  max-width:none !important;
  --fighter-opacity:.34;
  transform:translate3d(600px,-50%,0) !important;
  filter:drop-shadow(0 24px 54px rgba(0,0,0,.82)) saturate(1.02) contrast(1.04);
}
.premium-section.in-view .premium-fighter-sol-hero,
.premium-section.in-view .premium-fighter-ky-hero { transform:translate3d(0,0,0) !important; opacity:var(--fighter-opacity) !important; }
.premium-section.in-view .premium-fighter-johnny-signup,
.premium-section.in-view .premium-fighter-baiken-signup,
.premium-section.in-view .premium-fighter-dizzy-archive,
.premium-section.in-view .premium-fighter-zato-archive { transform:translate3d(0,-50%,0) !important; opacity:var(--fighter-opacity) !important; }
.premium-players .premium-fighter { display:none !important; }

.premium-archive .archive-poster img { filter:grayscale(1) contrast(1.08) brightness(.89) !important; }

/* Countdown header: restrained breathing glow + occasional sweep. */
.countdown-kicker {
  position:relative; isolation:isolate; overflow:hidden;
  box-shadow:0 8px 26px rgba(247,221,0,.15),0 0 0 1px rgba(255,232,82,.08);
  animation:kdKickerBreath 3.8s ease-in-out infinite !important;
}
.countdown-kicker::after {
  content:""; position:absolute; top:-35%; bottom:-35%; left:-30%; width:18%; pointer-events:none;
  transform:skewX(-20deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);
  animation:kdKickerSweep 5.8s cubic-bezier(.22,.65,.35,1) infinite !important;
}
@keyframes kdKickerBreath { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.055)} }
@keyframes kdKickerSweep { 0%,64%{left:-30%;opacity:0} 68%{opacity:.42} 84%{left:112%;opacity:.30} 88%,100%{left:112%;opacity:0} }

/* Compact esports rank badge. */
.player-rank-cell { align-self:center !important; min-height:100%; }
.rank-swatch {
  --rank-accent:#97a2b2; position:relative !important; display:grid !important;
  grid-template-columns:16px 1fr; align-items:center; gap:7px;
  width:84px !important; height:48px !important; padding:0 9px !important;
  overflow:hidden; border:1px solid rgba(255,255,255,.14) !important; border-radius:7px !important;
  background:linear-gradient(135deg,rgba(255,255,255,.075),transparent 34%),linear-gradient(180deg,rgba(24,30,39,.98),rgba(8,12,18,.98)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 9px 20px rgba(0,0,0,.28) !important;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
}
.rank-swatch::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--rank-accent); box-shadow:0 0 13px var(--rank-accent); }
.rank-swatch::after { content:""; position:absolute; inset:0; background:linear-gradient(118deg,transparent 0 58%,rgba(255,255,255,.05) 59% 62%,transparent 63%); pointer-events:none; }
.rank-mark { position:relative; z-index:2; width:13px; height:13px; transform:rotate(45deg); border:2px solid var(--rank-accent); border-radius:2px; background:#0b1017; box-shadow:0 0 9px var(--rank-accent); }
.rank-mark::after { content:""; position:absolute; inset:3px; background:var(--rank-accent); border-radius:1px; }
.rank-label { position:relative; z-index:2; color:#edf1f7; font-family:"Barlow Condensed",Impact,sans-serif; font-size:11px; font-weight:900; line-height:1; letter-spacing:.05em; text-transform:uppercase; }
.rank-blue{--rank-accent:#4285ff}.rank-green{--rank-accent:#25d77f}.rank-yellow{--rank-accent:#f2d93b}.rank-orange{--rank-accent:#ff7a25}.rank-pink{--rank-accent:#f34fbc}.rank-unranked,.rank-{--rank-accent:#8d98a8}

@media (max-width:1500px) { :root{--kd-stage-canvas:100vw;} }
@media (max-width:1100px) {
  .premium-fighter-johnny-signup { left:-31vw !important; width:52vw !important; }
  .premium-fighter-baiken-signup { right:-27vw !important; width:45vw !important; }
  .premium-fighter-dizzy-archive,.premium-fighter-zato-archive { opacity:0 !important; }
}
@media (max-width:980px) {
  .premium-hero{min-height:auto;width:min(100% - 24px,1180px);grid-template-columns:1fr;gap:30px;}
  .premium-hero .hero-copy{padding-left:0;}
  .premium-hero .hero-art{transform:none;}
  .premium-fighter-johnny-signup,.premium-fighter-baiken-signup,.premium-fighter-dizzy-archive,.premium-fighter-zato-archive{display:none !important;}
  .premium-fighter-sol-hero{left:-24vw !important;width:60vw !important;--fighter-opacity:.30;}
  .premium-fighter-ky-hero{right:-24vw !important;width:60vw !important;--fighter-opacity:.28;}
}
@media (max-width:720px) {
  .premium-fighter-sol-hero,.premium-fighter-ky-hero{display:none !important;}
  .premium-signup,.premium-players,.premium-archive{padding-top:70px;padding-bottom:75px;}
  .rank-swatch{width:60px !important;height:44px !important;grid-template-columns:12px 1fr;gap:5px;padding-inline:6px !important;}
  .rank-mark{width:11px;height:11px;border-width:1px}.rank-label{font-size:9px;letter-spacing:.02em}
}


/* ======================================================================
   v11.0.3 FULL-BLEED CROP ONLY
   Keep the cinematic crop, but make the wallpaper canvas wider than the
   viewport so the browser sees the cropped centre slice with NO black bars.
   No layout, backend, fighter, animation, or content rules are changed.
   ====================================================================== */
.premium-stage {
  width: 116vw !important;
  max-width: none !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

@media (max-width: 1500px) {
  .premium-stage {
    width: 100vw !important;
  }
}


/* ======================================================================
   KOJI DOJO v11.2 — EVENT SECTION POLISH ONLY
   ====================================================================== */

/* Center the functional Event content while fighters frame the viewport. */
.premium-hero {
  width: min(1320px, calc(100% - 40px)) !important;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
  gap: 54px !important;
  margin-inline: auto !important;
}
.premium-hero .hero-copy {
  padding-left: 0 !important;
}
.premium-hero .hero-art {
  transform: none !important;
}

/* Sol and Ky touch the left/right browser edges, independent of content width. */
.premium-fighter-sol-hero {
  left: calc(50% - 50vw - 12px) !important;
  right: auto !important;
}
.premium-fighter-ky-hero {
  right: calc(50% - 50vw - 12px) !important;
  left: auto !important;
}

/* Hero wallpaper rotation uses these local assets; JS selects one per reload. */
.premium-stage-hero {
  background-image: url("event-wallpaper-01-temple.jpg");
  filter: saturate(1.18) contrast(1.09) brightness(.82) !important;
}

/* Cinematic section-to-section wallpaper transitions. */
.premium-stage-hero {
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%, #000 76%, rgba(0,0,0,.96) 81%, rgba(0,0,0,.68) 90%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    #000 0%, #000 76%, rgba(0,0,0,.96) 81%, rgba(0,0,0,.68) 90%, transparent 100%);
}
.premium-stage-signup,
.premium-stage-players {
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,.56) 7%, #000 16%, #000 83%, rgba(0,0,0,.60) 93%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,.56) 7%, #000 16%, #000 83%, rgba(0,0,0,.60) 93%, transparent 100%);
}
.premium-stage-archive {
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,.56) 8%, #000 18%, #000 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,.56) 8%, #000 18%, #000 100%);
}
.premium-archive::after {
  display: none !important;
}

/* Gold-coin glow: warm pulse plus a controlled specular sweep. */
.countdown-kicker {
  color: #171000 !important;
  border-color: rgba(255, 234, 90, .92) !important;
  background:
    radial-gradient(circle at 50% -90%, rgba(255,255,255,.95), transparent 46%),
    linear-gradient(180deg, #fff17a 0%, #ffd900 38%, #e0ad00 100%) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.52), 0 0 14px rgba(255,234,83,.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -2px 0 rgba(125,78,0,.24),
    0 0 16px rgba(255,210,0,.32),
    0 8px 26px rgba(0,0,0,.30) !important;
  animation: kdGoldCoinGlow 2.7s ease-in-out infinite !important;
}
.countdown-kicker::before {
  content: "";
  position: absolute;
  inset: -50% -8%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255,226,64,.48), transparent 58%);
  opacity: .38;
  animation: kdGoldCoinAura 2.7s ease-in-out infinite !important;
}
.countdown-kicker::after {
  width: 14% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent) !important;
  animation: kdGoldCoinSweep 4.9s cubic-bezier(.22,.65,.35,1) infinite !important;
}
@keyframes kdGoldCoinGlow {
  0%,100% { filter: brightness(1) saturate(1); box-shadow: inset 0 1px 0 rgba(255,255,255,.72), inset 0 -2px 0 rgba(125,78,0,.24), 0 0 14px rgba(255,210,0,.28), 0 8px 26px rgba(0,0,0,.30); }
  50% { filter: brightness(1.12) saturate(1.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.88), inset 0 -2px 0 rgba(125,78,0,.20), 0 0 28px rgba(255,218,0,.62), 0 8px 30px rgba(0,0,0,.34); }
}
@keyframes kdGoldCoinAura { 0%,100%{opacity:.24;transform:scale(.96)} 50%{opacity:.54;transform:scale(1.04)} }
@keyframes kdGoldCoinSweep { 0%,56%{left:-28%;opacity:0} 61%{opacity:.72} 80%{left:116%;opacity:.40} 84%,100%{left:116%;opacity:0} }

/* High-visibility esports link cards — deliberately opaque, not glassy. */
.hero-link-card {
  --card-accent: #d7e0ee;
  position: relative !important;
  isolation: isolate;
  min-height: 66px !important;
  padding: 11px 17px 11px 20px !important;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--card-accent) 72%, transparent) !important;
  border-left: 5px solid var(--card-accent) !important;
  border-radius: 7px !important;
  background:
    linear-gradient(112deg, color-mix(in srgb, var(--card-accent) 15%, #0b1017) 0%, #0a0f16 46%, #111925 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 12px 26px rgba(0,0,0,.34),
    0 0 18px color-mix(in srgb, var(--card-accent) 18%, transparent) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.hero-link-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 0 57%, rgba(255,255,255,.055) 58% 61%, transparent 62%),
    linear-gradient(90deg, color-mix(in srgb, var(--card-accent) 13%, transparent), transparent 45%);
}
.hero-link-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 14px;
  width: 44px;
  height: 3px;
  background: var(--card-accent);
  box-shadow: 0 0 12px var(--card-accent);
}
.hero-link-card span {
  color: var(--card-accent) !important;
  font-size: 11px !important;
  text-shadow: 0 0 10px color-mix(in srgb, var(--card-accent) 55%, transparent);
}
.hero-link-card strong {
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 9px rgba(0,0,0,.82);
}
.hero-link-card:hover {
  transform: translateY(-2px) scale(1.008) !important;
  filter: brightness(1.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 15px 32px rgba(0,0,0,.40),
    0 0 25px color-mix(in srgb, var(--card-accent) 28%, transparent) !important;
}
.hero-twitch { --card-accent: #42f7a6; }
.hero-discord { --card-accent: #8f98ff; }
.hero-latency { --card-accent: #f7dd00; }

/* Keep the gold title above the countdown on mobile. */
@media (max-width: 980px) {
  .countdown-kicker { order: -2 !important; }
  .countdown-banner { order: -1 !important; }
  .premium-hero {
    width: min(100% - 24px, 1180px) !important;
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
}

/* Preserve the requested glow even on OS-level reduced-motion settings. */
@media (prefers-reduced-motion: reduce) {
  .countdown-kicker { animation-duration: 2.7s !important; animation-iteration-count: infinite !important; }
  .countdown-kicker::before { animation-duration: 2.7s !important; animation-iteration-count: infinite !important; }
  .countdown-kicker::after { animation-duration: 4.9s !important; animation-iteration-count: infinite !important; }
}


/* ======================================================================
   KOJI DOJO v11.3 — EVENT CONTENT POLISH ONLY
   The backend, wallpaper rotation, links, countdown logic and later sections
   are intentionally unchanged.
   ====================================================================== */

/* Align the complete left content stack with the top of the countdown block. */
.premium-hero {
  align-items: start !important;
}
.premium-hero .hero-copy,
.premium-hero .hero-art {
  align-self: start !important;
}

/* The uploaded cropped Sol has no unused belt-side canvas, so it can sit
   directly against the viewport edge while preserving the approved height. */
.premium-fighter-sol-hero {
  left: calc(50% - 50vw - 3px) !important;
  right: auto !important;
  bottom: -34px !important;
  width: 610px !important;
  max-width: none !important;
}

/* Give the long event explanation a subtle dark readability plate without
   turning it into another heavy card. */
.premium-hero .hero-intro {
  position: relative;
  max-width: 100%;
  margin-top: 20px;
  padding: 14px 17px 15px 19px;
  border: 1px solid rgba(255,255,255,.11);
  border-left: 3px solid rgba(66,247,166,.72);
  border-radius: 8px;
  color: #f0f3f7 !important;
  background:
    linear-gradient(105deg, rgba(5,9,13,.79), rgba(8,13,19,.62) 72%, rgba(8,13,19,.50));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 12px 28px rgba(0,0,0,.24),
    0 0 20px rgba(0,0,0,.10);
  backdrop-filter: blur(8px) saturate(1.04);
  -webkit-backdrop-filter: blur(8px) saturate(1.04);
  text-shadow: 0 2px 11px rgba(0,0,0,.96) !important;
}

/* Keep the attractive glass idea, but add sharper esports structure and
   stronger typography for Date / Format / Start time. */
.premium-hero .event-facts {
  gap: 12px;
  margin-top: 17px;
}
.premium-hero .fact-card {
  --fact-accent: #42f7a6;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 78px;
  padding: 15px 17px 14px 19px;
  border: 1px solid rgba(255,255,255,.17);
  border-left: 4px solid var(--fact-accent);
  border-radius: 8px;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--fact-accent) 10%, rgba(10,15,22,.84)), rgba(7,11,17,.78) 56%, rgba(12,18,26,.70));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 13px 28px rgba(0,0,0,.27),
    0 0 18px color-mix(in srgb, var(--fact-accent) 12%, transparent);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.premium-hero .fact-card:nth-child(1) { --fact-accent: #ff5265; }
.premium-hero .fact-card:nth-child(2) { --fact-accent: #4b72ff; }
.premium-hero .fact-card:nth-child(3) { --fact-accent: #f7dd00; }
.premium-hero .fact-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 14px;
  width: 46px;
  height: 3px;
  z-index: -1;
  background: var(--fact-accent);
  box-shadow: 0 0 12px var(--fact-accent);
}
.premium-hero .fact-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(118deg, transparent 0 61%, rgba(255,255,255,.045) 62% 65%, transparent 66%);
}
.premium-hero .fact-card span {
  color: color-mix(in srgb, var(--fact-accent) 84%, #fff) !important;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-shadow: 0 0 11px color-mix(in srgb, var(--fact-accent) 42%, transparent);
}
.premium-hero .fact-card strong {
  margin-top: 5px;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(0,0,0,.92);
}
.premium-hero .fact-card small {
  margin-top: 6px;
  color: #d5dbe4 !important;
  font-size: 11px;
  font-weight: 650;
  text-shadow: 0 2px 9px rgba(0,0,0,.90);
}

/* Larger, longer region CTAs with opaque esports framing. */
.premium-hero .hero-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}
.premium-hero .hero-actions .button {
  --team-accent: #ef3e52;
  position: relative;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  min-height: 62px;
  padding: 0 24px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--team-accent) 76%, white 8%);
  border-left: 5px solid var(--team-accent);
  border-radius: 7px;
  color: #fff;
  font-size: 23px;
  letter-spacing: .045em;
  background:
    linear-gradient(125deg, color-mix(in srgb, var(--team-accent) 82%, #10151d), color-mix(in srgb, var(--team-accent) 42%, #090e15) 60%, #0b1119);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 14px 30px rgba(0,0,0,.32),
    0 0 20px color-mix(in srgb, var(--team-accent) 22%, transparent);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  text-shadow: 0 2px 10px rgba(0,0,0,.84);
}
.premium-hero .hero-actions .button-eu { --team-accent: #3568ff; }
.premium-hero .hero-actions .button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255,255,255,.13), transparent 31%),
    linear-gradient(115deg, transparent 0 58%, rgba(255,255,255,.07) 59% 62%, transparent 63%);
}
.premium-hero .hero-actions .button::after {
  content: "";
  position: absolute;
  top: 0;
  right: 14px;
  width: 52px;
  height: 3px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 0 12px var(--team-accent);
}
.premium-hero .hero-actions .button:hover {
  transform: translateY(-3px) scale(1.008);
  filter: brightness(1.13) saturate(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 18px 34px rgba(0,0,0,.37),
    0 0 28px color-mix(in srgb, var(--team-accent) 34%, transparent);
}

/* Keep the open-signup sentence and connection badge compact after enlarging
   the CTAs, so the aligned Event block remains balanced. */
.premium-hero .signup-state {
  margin-top: 11px;
  color: #d0d6df;
  font-size: 12px;
  text-shadow: 0 2px 9px rgba(0,0,0,.92);
}
.premium-hero .backend-status {
  margin-top: 8px;
}

@media (max-width: 1180px) {
  .premium-fighter-sol-hero {
    left: -12vw !important;
    width: 54vw !important;
  }
}

@media (max-width: 980px) {
  .premium-hero {
    align-items: stretch !important;
  }
  .premium-hero .hero-intro {
    padding: 13px 14px 14px 16px;
  }
  .premium-hero .hero-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .premium-hero .hero-actions .button {
    min-height: 58px;
    font-size: 21px;
  }
}

@media (max-width: 720px) {
  .premium-hero .hero-actions {
    grid-template-columns: 1fr;
  }
  .premium-hero .hero-actions .button {
    min-height: 58px;
  }
  .premium-hero .fact-card strong {
    font-size: 16px;
  }
}


/* ======================================================================
   KOJI DOJO v11.4 — QUALIFIER CTA + USER-OPTIMIZED ASSETS
   Only the Event connection-test CTA is visually changed here.
   ====================================================================== */

/* Turn the qualifier link into the clearest click target in the Event links. */
.hero-latency {
  --card-accent: #f7dd00;
  min-height: 82px !important;
  padding: 13px 22px 13px 24px !important;
  border: 2px solid rgba(247,221,0,.92) !important;
  border-left-width: 7px !important;
  background:
    linear-gradient(110deg, #1d1903 0%, #10130c 38%, #121927 70%, #171105 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(247,221,0,.16),
    0 15px 32px rgba(0,0,0,.42),
    0 0 0 1px rgba(247,221,0,.14),
    0 0 24px rgba(247,221,0,.24) !important;
  cursor: pointer;
  animation: kdQualifierPulse 2.15s ease-in-out infinite !important;
}

.hero-latency::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(118deg,
      transparent 0 38%,
      rgba(255,239,116,0) 44%,
      rgba(255,239,116,.30) 49%,
      rgba(255,255,255,.56) 51%,
      rgba(255,239,116,.30) 53%,
      rgba(255,239,116,0) 58%,
      transparent 64% 100%),
    radial-gradient(circle at 84% 50%, rgba(247,221,0,.16), transparent 30%),
    linear-gradient(90deg, rgba(247,221,0,.13), transparent 45%) !important;
  background-size: 230% 100%, 100% 100%, 100% 100% !important;
  background-position: 145% 0, 0 0, 0 0 !important;
  animation: kdQualifierSweep 3.15s cubic-bezier(.22,.68,.3,1) infinite !important;
}

.hero-latency::after {
  content: "CLICK" !important;
  top: 8px !important;
  right: 16px !important;
  width: auto !important;
  height: auto !important;
  padding: 2px 7px 3px !important;
  border: 1px solid rgba(247,221,0,.56);
  border-radius: 3px;
  color: #fff5a6;
  background: rgba(247,221,0,.10) !important;
  box-shadow: 0 0 13px rgba(247,221,0,.28) !important;
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
  line-height: 1.2;
  text-shadow: 0 0 9px rgba(247,221,0,.62);
}

.hero-latency span {
  min-width: 142px;
  color: #ffe85a !important;
  font-size: 12px !important;
  letter-spacing: .15em !important;
  text-shadow:
    0 0 10px rgba(247,221,0,.70),
    0 2px 8px rgba(0,0,0,.88) !important;
}

.hero-latency strong {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding-right: 2px;
  color: #fff !important;
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: clamp(20px, 1.45vw, 24px) !important;
  font-weight: 900 !important;
  letter-spacing: .025em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow:
    0 0 14px rgba(247,221,0,.30),
    0 3px 12px rgba(0,0,0,.92) !important;
}

.hero-latency strong em {
  display: inline-block;
  color: #ffe224;
  font-style: normal;
  font-size: 1.35em;
  line-height: .7;
  text-shadow: 0 0 14px rgba(247,221,0,.72);
  animation: kdQualifierArrow .82s ease-in-out infinite !important;
}

.hero-latency:hover,
.hero-latency:focus-visible {
  transform: translateY(-3px) scale(1.012) !important;
  filter: brightness(1.18) saturate(1.08) !important;
  border-color: #fff07a !important;
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 18px 38px rgba(0,0,0,.48),
    0 0 0 2px rgba(247,221,0,.18),
    0 0 34px rgba(247,221,0,.50) !important;
}

@keyframes kdQualifierPulse {
  0%,100% {
    filter: brightness(1) saturate(1);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.16),
      inset 0 -1px 0 rgba(247,221,0,.16),
      0 15px 32px rgba(0,0,0,.42),
      0 0 0 1px rgba(247,221,0,.14),
      0 0 22px rgba(247,221,0,.22);
  }
  50% {
    filter: brightness(1.13) saturate(1.08);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.22),
      inset 0 -1px 0 rgba(247,221,0,.23),
      0 17px 36px rgba(0,0,0,.46),
      0 0 0 2px rgba(247,221,0,.22),
      0 0 34px rgba(247,221,0,.47);
  }
}

@keyframes kdQualifierSweep {
  0%,48% { background-position: 145% 0, 0 0, 0 0; }
  76%,100% { background-position: -65% 0, 0 0, 0 0; }
}

@keyframes kdQualifierArrow {
  0%,100% { transform: translateX(0); }
  50% { transform: translateX(7px); }
}

@media (max-width: 720px) {
  .hero-latency {
    min-height: 86px !important;
    align-items: flex-start !important;
    flex-direction: column;
    justify-content: center !important;
    gap: 5px !important;
    padding: 13px 18px 12px 20px !important;
  }
  .hero-latency span {
    min-width: 0;
  }
  .hero-latency strong {
    width: 100%;
    justify-content: space-between;
    font-size: 21px !important;
  }
}

/* Keep this explicit user-requested CTA animation active even when the OS
   advertises reduced motion. It is a slow pulse/sweep, not a strobe. */
@media (prefers-reduced-motion: reduce) {
  .hero-latency { animation: kdQualifierPulse 2.15s ease-in-out infinite !important; }
  .hero-latency::before { animation: kdQualifierSweep 3.15s cubic-bezier(.22,.68,.3,1) infinite !important; }
  .hero-latency strong em { animation: kdQualifierArrow .82s ease-in-out infinite !important; }
}


/* ======================================================================
   KOJI DOJO v11.5 — SIGNUP PROCESS + BIDIRECTIONAL FIGHTER HAND-OFF
   Event, backend, player roster, connection-test logic and later-section
   styling remain unchanged.
   ====================================================================== */

/* Longer section explanation: keep it readable without adding another card. */
.premium-signup .section-heading > p {
  max-width: 520px;
  color: #d9dee7;
  font-size: 15px;
  line-height: 1.55;
  text-shadow: 0 2px 12px rgba(0,0,0,.88);
}

/* Johnny and Baiken use the new full portraits and finish at the same visual
   height, centered vertically around the signup composition. */
.premium-fighter-johnny-signup,
.premium-fighter-baiken-signup {
  top: 52% !important;
  bottom: auto !important;
  width: auto !important;
  height: 900px !important;
  max-width: none !important;
  --fighter-opacity: .58;
  filter:
    drop-shadow(0 31px 66px rgba(0,0,0,.82))
    saturate(1.06)
    contrast(1.06) !important;
  transition:
    transform 1.12s cubic-bezier(.16,1,.3,1),
    opacity .82s ease-out !important;
}

.premium-fighter-johnny-signup {
  left: calc(50% - 50vw - 390px) !important;
  right: auto !important;
  transform: translate3d(-650px,-50%,0) !important;
}

.premium-fighter-baiken-signup {
  right: calc(50% - 50vw - 300px) !important;
  left: auto !important;
  transform: translate3d(650px,-50%,0) !important;
}

.premium-signup.in-view .premium-fighter-johnny-signup,
.premium-signup.in-view .premium-fighter-baiken-signup {
  transform: translate3d(0,-50%,0) !important;
  opacity: var(--fighter-opacity) !important;
}

/* The process card now has four steps plus a compact operational note. */
.premium-signup .signup-rules h3 {
  margin-top: 8px;
  font-size: 42px;
  letter-spacing: .01em;
}

.premium-signup .signup-rules ol {
  margin-top: 24px;
}

.premium-signup .signup-rules li {
  padding-bottom: 18px;
}

.premium-signup .signup-rules li strong {
  font-size: 15px;
}

.premium-signup .signup-rules li span {
  font-size: 12.5px;
  line-height: 1.45;
}

.process-note {
  margin: -2px 0 17px;
  padding: 10px 12px;
  border-left: 3px solid var(--yellow);
  color: #d2d8e1;
  background: linear-gradient(90deg, rgba(247,221,0,.085), rgba(247,221,0,.025));
  font-size: 11px;
  font-weight: 650;
  line-height: 1.45;
}

@media (max-width: 1500px) {
  .premium-fighter-johnny-signup,
  .premium-fighter-baiken-signup {
    height: 790px !important;
  }
  .premium-fighter-johnny-signup {
    left: calc(50% - 50vw - 345px) !important;
  }
  .premium-fighter-baiken-signup {
    right: calc(50% - 50vw - 265px) !important;
  }
}

@media (max-width: 1180px) {
  .premium-fighter-johnny-signup,
  .premium-fighter-baiken-signup {
    height: 700px !important;
    --fighter-opacity: .40;
  }
  .premium-fighter-johnny-signup {
    left: -320px !important;
  }
  .premium-fighter-baiken-signup {
    right: -245px !important;
  }
}

@media (max-width: 980px) {
  .premium-signup .section-heading > p {
    max-width: none;
  }
  .premium-fighter-johnny-signup,
  .premium-fighter-baiken-signup {
    display: none !important;
  }
}


/* ======================================================================
   KOJI DOJO v11.6 — SIGNUP CTA ENERGY + CHARACTER OVERLAP
   Only the two signup CTA states and Johnny/Baiken final positions change.
   ====================================================================== */

/* Move both full-height fighters inward. Their z-index remains below the
   form/process panels, so roughly the inner fifth disappears behind the UI. */
.premium-fighter-johnny-signup {
  left: calc(50% - 50vw - 170px) !important;
}

.premium-fighter-baiken-signup {
  right: calc(50% - 50vw - 75px) !important;
}

/* Base connection-test control: harder esports silhouette and stronger depth. */
.latency-run-button {
  position: relative;
  isolation: isolate;
  min-height: 54px !important;
  padding: 0 18px !important;
  overflow: hidden;
  border: 2px solid rgba(255,230,37,.94) !important;
  border-radius: 5px !important;
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px));
  background:
    linear-gradient(105deg, rgba(255,255,255,.24) 0 5%, transparent 14% 72%, rgba(255,255,255,.15) 82% 88%, transparent 96%),
    linear-gradient(180deg, #ffe812 0%, #f2c900 100%) !important;
  background-size: 220% 100%, 100% 100% !important;
  color: #090b0e !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -2px 0 rgba(111,78,0,.30),
    0 10px 22px rgba(0,0,0,.34),
    0 0 0 1px rgba(247,221,0,.12) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.30);
  transform: translateZ(0);
}

.latency-run-button > span:first-child {
  position: relative;
  z-index: 3;
  font-size: 18px;
  letter-spacing: .045em;
}

.latency-run-button > span:last-child {
  position: relative;
  z-index: 3;
  font-size: 24px;
  line-height: 1;
}

.latency-run-button::before,
.latency-run-button::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.latency-run-button::before {
  z-index: 1;
  inset: 4px;
  border: 1px solid rgba(9,11,14,.20);
  clip-path: inherit;
}

.latency-run-button::after {
  z-index: 2;
  top: -40%;
  bottom: -40%;
  left: -28%;
  width: 17%;
  opacity: 0;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.90), transparent);
}

.latency-run-button:hover,
.latency-run-button:focus-visible {
  transform: translateY(-2px) scale(1.008) !important;
  filter: brightness(1.10) saturate(1.06) !important;
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    inset 0 -2px 0 rgba(111,78,0,.28),
    0 14px 28px rgba(0,0,0,.42),
    0 0 0 2px rgba(247,221,0,.20),
    0 0 26px rgba(247,221,0,.36) !important;
}

/* Once one test has completed, this becomes a flashing rerun CTA. */
.latency-run-button.latency-repeat-ready {
  animation: kdLatencyRepeatPulse 1.65s ease-in-out infinite !important;
}

.latency-run-button.latency-repeat-ready::after {
  animation: kdLatencyRepeatSweep 2.45s cubic-bezier(.18,.65,.32,1) infinite !important;
}

.latency-run-button.latency-repeat-ready > span:last-child {
  animation: kdLatencyRepeatArrow .72s ease-in-out infinite !important;
}

@keyframes kdLatencyRepeatPulse {
  0%,100% {
    filter: brightness(1) saturate(1);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.72),
      inset 0 -2px 0 rgba(111,78,0,.30),
      0 10px 22px rgba(0,0,0,.34),
      0 0 0 1px rgba(247,221,0,.14),
      0 0 13px rgba(247,221,0,.18);
  }
  50% {
    filter: brightness(1.16) saturate(1.12);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.90),
      inset 0 -2px 0 rgba(111,78,0,.24),
      0 14px 30px rgba(0,0,0,.43),
      0 0 0 3px rgba(247,221,0,.22),
      0 0 34px rgba(247,221,0,.56);
  }
}

@keyframes kdLatencyRepeatSweep {
  0%,42% { left:-28%; opacity:0; }
  48% { opacity:.82; }
  72% { left:112%; opacity:.55; }
  78%,100% { left:112%; opacity:0; }
}

@keyframes kdLatencyRepeatArrow {
  0%,100% { transform:translateX(0); }
  50% { transform:translateX(8px); }
}

/* Ready-to-register CTA: stronger team energy, illuminated frame, sweep and
   readable copy. It only activates after the latency test passes. */
.submit-button.submit-ready {
  min-height: 92px !important;
  border: 2px solid #ffe329 !important;
  border-radius: 5px !important;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  animation: kdRegisterEnergyPulse 1.55s ease-in-out infinite !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 15px 34px rgba(0,0,0,.42),
    0 0 0 2px rgba(247,221,0,.20),
    0 0 28px rgba(247,221,0,.30) !important;
}

.submit-button.submit-ready::after {
  background:
    linear-gradient(108deg, transparent 0 38%, rgba(255,255,255,.46) 47%, rgba(255,255,255,.08) 55%, transparent 66%) !important;
  background-size: 240% 100% !important;
  mix-blend-mode: screen;
  animation: kdRegisterEnergySweep 2.05s linear infinite !important;
}

.submit-button.submit-ready .submit-copy > span {
  color: #fff !important;
  font-size: 27px !important;
  letter-spacing: .035em;
  text-shadow:
    0 0 13px rgba(255,255,255,.22),
    0 3px 12px rgba(0,0,0,.82);
}

.submit-button.submit-ready .submit-strip {
  background: rgba(5,8,13,.48) !important;
  border-bottom-color: rgba(255,227,41,.68) !important;
}

.submit-button.submit-ready .submit-strip-label {
  color: #ffe64b !important;
  text-shadow: 0 0 9px rgba(247,221,0,.60);
}

.submit-button.submit-ready .submit-strip-copy {
  color: #fff8d0 !important;
}

.submit-button.submit-ready .submit-arrow {
  color: #ffe739;
  text-shadow: 0 0 13px rgba(247,221,0,.72);
  animation: kdRegisterEnergyArrow .68s ease-in-out infinite !important;
}

@keyframes kdRegisterEnergyPulse {
  0%,100% {
    transform:translateY(0) scale(1);
    filter:brightness(1) saturate(1);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.20),
      0 15px 34px rgba(0,0,0,.42),
      0 0 0 2px rgba(247,221,0,.18),
      0 0 23px rgba(247,221,0,.28);
  }
  50% {
    transform:translateY(-2px) scale(1.012);
    filter:brightness(1.17) saturate(1.10);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.30),
      0 18px 39px rgba(0,0,0,.48),
      0 0 0 4px rgba(247,221,0,.23),
      0 0 43px rgba(247,221,0,.52);
  }
}

@keyframes kdRegisterEnergySweep {
  from { background-position: 145% 0; }
  to { background-position: -80% 0; }
}

@keyframes kdRegisterEnergyArrow {
  0%,100% { transform:translateX(0); }
  50% { transform:translateX(10px); }
}

@media (max-width:1500px) {
  .premium-fighter-johnny-signup {
    left: calc(50% - 50vw - 190px) !important;
  }
  .premium-fighter-baiken-signup {
    right: calc(50% - 50vw - 105px) !important;
  }
}

@media (max-width:1180px) {
  .premium-fighter-johnny-signup {
    left:-180px !important;
  }
  .premium-fighter-baiken-signup {
    right:-120px !important;
  }
}

@media (max-width:720px) {
  .latency-run-button > span:first-child { font-size:16px; }
  .submit-button.submit-ready .submit-copy > span { font-size:22px !important; }
}

/* These are explicit, slow user-requested CTA animations. Keep them active
   even where the OS requests reduced motion. */
@media (prefers-reduced-motion:reduce) {
  .latency-run-button.latency-repeat-ready { animation:kdLatencyRepeatPulse 1.65s ease-in-out infinite !important; }
  .latency-run-button.latency-repeat-ready::after { animation:kdLatencyRepeatSweep 2.45s cubic-bezier(.18,.65,.32,1) infinite !important; }
  .latency-run-button.latency-repeat-ready > span:last-child { animation:kdLatencyRepeatArrow .72s ease-in-out infinite !important; }
  .submit-button.submit-ready { animation:kdRegisterEnergyPulse 1.55s ease-in-out infinite !important; }
  .submit-button.submit-ready::after { animation:kdRegisterEnergySweep 2.05s linear infinite !important; }
  .submit-button.submit-ready .submit-arrow { animation:kdRegisterEnergyArrow .68s ease-in-out infinite !important; }
}

/* ======================================================================
   KOJI DOJO v11.8 — ARCHIVE HERO EDGE POSITION ONLY
   Move Dizzy and Zato outward toward the viewport edges while preserving
   their approved size, vertical alignment, opacity, and entrance motion.
   ====================================================================== */
.premium-fighter-dizzy-archive {
  left: calc(50% - 50vw - 20px) !important;
}

.premium-fighter-zato-archive {
  right: calc(50% - 50vw - 20px) !important;
}


/* ======================================================================
   KOJI DOJO v11.9 — PERMANENT SEVEN-SET FIGHT CARD
   ====================================================================== */

.matches-section {
  padding: 100px 0 110px;
  border-top: 0 !important;
}

.premium-stage-matches {
  background-image: url("event-wallpaper-04-arena.jpg");
  background-position: center center !important;
  filter: saturate(.82) contrast(1.10) brightness(.48);
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,.56) 7%, #000 16%, #000 83%, rgba(0,0,0,.60) 93%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,.56) 7%, #000 16%, #000 83%, rgba(0,0,0,.60) 93%, transparent 100%);
}

.premium-stage-matches::after {
  background:
    radial-gradient(circle at 50% 40%, rgba(247,221,0,.09), transparent 34%),
    linear-gradient(90deg, rgba(7,9,13,.86), rgba(7,9,13,.52) 25%, rgba(7,9,13,.48) 75%, rgba(7,9,13,.88)),
    linear-gradient(180deg, rgba(7,9,13,.50), rgba(7,9,13,.78));
}

.premium-matches::after {
  content:"";
  position:absolute;
  left:calc(50% - 50vw);
  bottom:-1px;
  width:100vw;
  height:170px;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(7,9,13,0),rgba(7,9,13,.22) 25%,rgba(7,9,13,.64) 65%,#07090d 100%);
}

.fight-card-shell {
  position: relative;
  width: min(1040px, 100%);
  margin: 0 auto;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.14);
  border-top: 3px solid #f7dd00;
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(19,24,32,.94), rgba(6,9,14,.96));
  box-shadow:
    0 34px 90px rgba(0,0,0,.48),
    0 0 0 1px rgba(247,221,0,.08),
    inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden;
}

.fight-card-shell::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(125deg, rgba(255,255,255,.014) 0 1px, transparent 1px 14px),
    linear-gradient(90deg, rgba(239,62,82,.055), transparent 28%, transparent 72%, rgba(36,84,216,.065));
}

.fight-card-shell > * { position:relative; z-index:1; }

.fight-card-header {
  display:grid;
  grid-template-columns: 1fr 1.35fr 1fr;
  align-items:center;
  gap:16px;
  min-height:106px;
  padding:15px 22px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px 12px 5px 5px;
  background:linear-gradient(90deg, rgba(118,14,28,.35), rgba(9,13,19,.90) 35%, rgba(9,13,19,.90) 65%, rgba(20,55,135,.38));
}

.fight-card-region {
  display:flex;
  align-items:center;
  gap:12px;
  color:#f5f7fb;
  font-family:"Barlow Condensed", Impact, sans-serif;
  font-size:22px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.fight-card-region-eu { justify-content:flex-end; }
.fight-card-region img { width:52px; height:34px; object-fit:cover; border-radius:4px; box-shadow:0 8px 18px rgba(0,0,0,.35); }

.fight-card-title { text-align:center; }
.fight-card-title span,
.fight-card-title strong,
.fight-card-title small { display:block; }
.fight-card-title span { color:#f7dd00; font-size:10px; font-weight:900; letter-spacing:.20em; }
.fight-card-title strong { margin-top:3px; font-family:"Barlow Condensed", Impact, sans-serif; font-size:30px; line-height:1; letter-spacing:.04em; }
.fight-card-title small { margin-top:8px; color:#b8c0cc; font-size:10px; font-weight:800; letter-spacing:.10em; }

.fight-card-list { display:grid; gap:8px; margin-top:10px; }

.fight-card-match {
  display:grid;
  grid-template-columns: 68px minmax(0,1fr) 58px minmax(0,1fr) 94px;
  align-items:center;
  gap:12px;
  min-height:108px;
  padding:8px 13px 8px 8px;
  border:1px solid rgba(255,255,255,.09);
  border-left:3px solid rgba(239,62,82,.70);
  border-right:3px solid rgba(36,84,216,.74);
  clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  background:linear-gradient(90deg, rgba(60,14,24,.30), rgba(13,18,25,.92) 28%, rgba(13,18,25,.92) 72%, rgba(17,39,91,.32));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025), 0 8px 18px rgba(0,0,0,.20);
  transition:transform .20s ease, border-color .20s ease, box-shadow .20s ease, filter .20s ease;
}

.fight-card-match.is-revealed {
  border-top-color:rgba(247,221,0,.24);
  border-bottom-color:rgba(247,221,0,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 10px 24px rgba(0,0,0,.28), 0 0 16px rgba(247,221,0,.035);
}
.fight-card-match.is-revealed:hover { transform:translateY(-2px); filter:brightness(1.06); }
.fight-card-match.is-tba { filter:saturate(.58); }

.fight-set-number {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:78px;
  border-right:1px solid rgba(247,221,0,.22);
  color:#f7dd00;
}
.fight-set-number span { font-size:9px; font-weight:900; letter-spacing:.15em; }
.fight-set-number strong { font-family:"Barlow Condensed", Impact, sans-serif; font-size:31px; line-height:1; }

.fight-player { display:flex; align-items:center; gap:13px; min-width:0; }
.fight-player-eu { justify-content:flex-end; text-align:right; }
.fight-player-copy { min-width:0; }
.fight-player-copy > strong { display:block; overflow:hidden; color:#fff; font-family:"Barlow Condensed", Impact, sans-serif; font-size:23px; line-height:1.05; text-overflow:ellipsis; white-space:nowrap; }
.fight-player-copy > small { display:flex; align-items:center; gap:7px; margin-top:5px; color:#bdc5d0; font-size:10px; font-weight:700; text-transform:uppercase; }
.fight-player-eu .fight-player-copy > small { justify-content:flex-end; }
.fight-region { display:flex; align-items:center; gap:6px; margin-bottom:5px; color:#8f98a7; font-size:8px; font-weight:900; letter-spacing:.13em; }
.fight-player-eu .fight-region { justify-content:flex-end; }
.fight-region img { width:22px; height:14px; object-fit:cover; border-radius:2px; }

.fight-character-frame,
.fight-character-placeholder {
  display:grid;
  width:66px;
  height:88px;
  flex:0 0 66px;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:7px;
  background:linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.018));
  box-shadow:0 10px 24px rgba(0,0,0,.30);
}
.fight-character-frame img { width:100%; height:100%; object-fit:cover; }
.fight-character-placeholder { color:rgba(255,255,255,.30); font-family:"Barlow Condensed", Impact, sans-serif; font-size:47px; font-weight:900; text-shadow:0 0 20px rgba(247,221,0,.12); }

.fight-versus { color:#f7dd00; font-family:"Barlow Condensed", Impact, sans-serif; font-size:28px; font-weight:900; text-align:center; text-shadow:0 0 13px rgba(247,221,0,.38); }

.fight-match-status {
  justify-self:end;
  min-width:78px;
  padding:7px 8px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:4px;
  color:#aab2bf;
  background:rgba(4,7,11,.58);
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
  text-align:center;
}
.is-revealed .fight-match-status { border-color:rgba(66,247,166,.38); color:#67efaa; background:rgba(25,104,72,.16); box-shadow:0 0 14px rgba(66,247,166,.08); }

.fight-rank { display:inline-flex; padding:2px 5px; border:1px solid rgba(255,255,255,.13); border-radius:3px; color:#fff; font-style:normal; font-size:8px; line-height:1; }
.fight-rank-blue { background:#175dcc; }
.fight-rank-green { background:#168c55; }
.fight-rank-yellow { color:#161300; background:#e7cb14; }
.fight-rank-orange { background:#dd6c10; }
.fight-rank-pink { background:#cf3798; }

.fight-card-note { margin:13px 4px 2px; color:#8f98a7; font-size:10px; font-weight:700; letter-spacing:.035em; text-align:center; }

@media (max-width:900px) {
  .fight-card-shell { padding:11px; }
  .fight-card-header { grid-template-columns:1fr 1.3fr 1fr; padding-inline:13px; }
  .fight-card-region { font-size:16px; }
  .fight-card-region img { width:39px; height:26px; }
  .fight-card-title strong { font-size:24px; }
  .fight-card-match { grid-template-columns:51px minmax(0,1fr) 42px minmax(0,1fr); gap:8px; padding-right:9px; }
  .fight-match-status { display:none; }
  .fight-character-frame,.fight-character-placeholder { width:50px; height:70px; flex-basis:50px; }
  .fight-player { gap:8px; }
  .fight-player-copy > strong { font-size:18px; }
  .fight-player-copy > small { font-size:8px; }
  .fight-set-number { min-height:66px; }
  .fight-set-number strong { font-size:25px; }
}

@media (max-width:620px) {
  .matches-section { padding-top:74px; padding-bottom:80px; }
  .fight-card-header { grid-template-columns:1fr; gap:7px; text-align:center; }
  .fight-card-region { display:none; }
  .fight-card-title strong { font-size:26px; }
  .fight-card-match { grid-template-columns:41px minmax(0,1fr) 31px minmax(0,1fr); min-height:92px; padding:7px 7px 7px 4px; }
  .fight-character-frame,.fight-character-placeholder { width:40px; height:58px; flex-basis:40px; }
  .fight-player-copy > strong { font-size:15px; }
  .fight-player-copy > small { display:block; overflow:hidden; max-width:105px; font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
  .fight-region { display:none; }
  .fight-versus { font-size:21px; }
  .fight-set-number strong { font-size:22px; }
  .fight-set-number span { font-size:7px; }
}

/* ======================================================================
   KOJI DOJO v12.0 — AUTO TEST + SHARP BAIKEN + CAMPFIRE FIGHT CARD
   ====================================================================== */

/* The optimized indexed-color Baiken asset made the artwork read soft.
   v12 ships a true-color RGBA portrait and gives it a cleaner final render. */
.premium-fighter-baiken-signup {
  --fighter-opacity: .82 !important;
  image-rendering: auto;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  filter:
    drop-shadow(0 31px 66px rgba(0,0,0,.84))
    saturate(1.13)
    contrast(1.14)
    brightness(1.045) !important;
}

/* Ambient layer is behind the fight-card box but above the stage wallpaper. */
.premium-matches {
  isolation: isolate;
}

.premium-matches .section-heading,
.premium-matches .fight-card-shell {
  position: relative;
  z-index: 4 !important;
}

.match-campfire-ambience {
  position: absolute !important;
  z-index: 2 !important;
  top: 125px;
  bottom: 55px;
  left: 50%;
  width: min(1320px, 100vw);
  transform: translateX(-50%);
  overflow: visible;
  pointer-events: none;
  user-select: none;
}

.match-campfire-glow {
  position: absolute;
  left: 50%;
  bottom: 1%;
  width: min(1180px, 91vw);
  height: 84%;
  transform: translateX(-50%);
  border-radius: 42% 42% 28% 28%;
  opacity: .48;
  mix-blend-mode: screen;
  filter: blur(52px) saturate(1.2);
  background:
    radial-gradient(ellipse at 50% 93%, rgba(255,235,116,.66) 0 5%, rgba(255,155,35,.54) 12%, rgba(229,66,12,.40) 25%, transparent 54%),
    radial-gradient(ellipse at 23% 83%, rgba(255,168,34,.38), rgba(185,25,10,.26) 34%, transparent 62%),
    radial-gradient(ellipse at 77% 83%, rgba(255,168,34,.38), rgba(185,25,10,.26) 34%, transparent 62%),
    radial-gradient(ellipse at 50% 54%, rgba(164,26,11,.22), transparent 69%);
  animation: kdCampfireGlow 2.85s ease-in-out infinite alternate;
}

.match-campfire-glow::before,
.match-campfire-glow::after {
  content: "";
  position: absolute;
  inset: 8% 5% 2%;
  border-radius: inherit;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse at 37% 88%, rgba(255,214,84,.30), rgba(255,92,14,.20) 31%, transparent 58%),
    radial-gradient(ellipse at 63% 88%, rgba(255,214,84,.28), rgba(255,92,14,.18) 31%, transparent 58%);
  animation: kdCampfireLobe 2.1s ease-in-out infinite alternate;
}

.match-campfire-glow::after {
  transform: scaleX(.94) translateY(-5%);
  opacity: .74;
  animation-duration: 3.35s;
  animation-direction: alternate-reverse;
}

.match-ember-layer {
  position: absolute;
  inset: 0;
  overflow: visible;
  mix-blend-mode: screen;
  pointer-events: none;
}

.match-ember {
  position: absolute;
  left: var(--ember-x);
  bottom: var(--ember-bottom);
  width: var(--ember-size);
  height: calc(var(--ember-size) * 1.35);
  border-radius: 50% 50% 45% 45%;
  opacity: 0;
  background:
    radial-gradient(circle at 45% 38%, #fff8bf 0 12%, hsl(var(--ember-hue) 100% 68%) 28%, hsl(calc(var(--ember-hue) - 12) 100% 49%) 62%, transparent 78%);
  box-shadow:
    0 0 calc(var(--ember-size) * 1.8) hsl(var(--ember-hue) 100% 58%),
    0 0 calc(var(--ember-size) * 4.2) hsla(var(--ember-hue),100%,55%,.46);
  animation: kdEmberRise var(--ember-duration) linear var(--ember-delay) infinite;
  will-change: transform, opacity;
}

@keyframes kdCampfireGlow {
  0% {
    opacity: .38;
    transform: translateX(-50%) scale(.965,.94);
    filter: blur(55px) saturate(1.12) brightness(.90);
  }
  34% {
    opacity: .52;
    transform: translateX(-50%) scale(1.018,1.03);
    filter: blur(49px) saturate(1.28) brightness(1.08);
  }
  68% {
    opacity: .43;
    transform: translateX(-50%) scale(.99,1.015);
    filter: blur(53px) saturate(1.19) brightness(.97);
  }
  100% {
    opacity: .57;
    transform: translateX(-50%) scale(1.03,.985);
    filter: blur(47px) saturate(1.31) brightness(1.12);
  }
}

@keyframes kdCampfireLobe {
  from { transform: translate3d(-1.4%,1.2%,0) scale(.96,.92); opacity:.52; }
  to { transform: translate3d(1.8%,-2%,0) scale(1.045,1.08); opacity:.88; }
}

@keyframes kdEmberRise {
  0% {
    opacity: 0;
    transform: translate3d(0,18px,0) scale(.45) rotate(0deg);
  }
  9% { opacity: .98; }
  38% { opacity: .84; }
  72% { opacity: .48; }
  100% {
    opacity: 0;
    transform: translate3d(var(--ember-drift),var(--ember-rise),0) scale(.12) rotate(190deg);
  }
}

/* The glow remains ambient on smaller screens; particle count is reduced in JS. */
@media (max-width: 720px) {
  .match-campfire-ambience {
    top: 105px;
    bottom: 45px;
    width: 100vw;
    overflow: hidden;
  }
  .match-campfire-glow {
    width: 106vw;
    height: 78%;
    opacity: .36;
    filter: blur(40px) saturate(1.1);
  }
}


/* ======================================================================
   KOJI DOJO v12.1 — FIGHT CARD TITLE + BIGGER CAMPFIRE + MAIN EVENT
   ====================================================================== */

.match-campfire-ambience {
  top: 108px;
  bottom: 28px;
  width: min(1640px, 100vw);
}

.match-campfire-ambience::before,
.match-campfire-ambience::after {
  content: "";
  position: absolute;
  top: 8%;
  bottom: 2%;
  width: min(30vw, 330px);
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(44px) saturate(1.25);
  opacity: .70;
  background:
    radial-gradient(ellipse at 50% 82%, rgba(255,231,138,.52) 0 10%, rgba(255,161,35,.42) 22%, rgba(236,71,18,.28) 44%, rgba(128,17,10,.12) 62%, transparent 78%),
    radial-gradient(ellipse at 50% 34%, rgba(255,172,46,.16), transparent 54%);
  animation: kdCampfireSidePulse 3.8s ease-in-out infinite alternate;
}

.match-campfire-ambience::before {
  left: 3.5%;
  transform-origin: left bottom;
}

.match-campfire-ambience::after {
  right: 3.5%;
  transform-origin: right bottom;
  animation-delay: -1.9s;
}

.match-campfire-glow {
  bottom: 0;
  width: min(1460px, 96vw);
  height: 94%;
  opacity: .62;
  filter: blur(60px) saturate(1.28);
  background:
    radial-gradient(ellipse at 50% 93%, rgba(255,239,129,.72) 0 5%, rgba(255,165,42,.62) 13%, rgba(229,66,12,.46) 28%, transparent 58%),
    radial-gradient(ellipse at 14% 77%, rgba(255,173,35,.40), rgba(185,25,10,.24) 34%, transparent 68%),
    radial-gradient(ellipse at 86% 77%, rgba(255,173,35,.40), rgba(185,25,10,.24) 34%, transparent 68%),
    radial-gradient(ellipse at 32% 86%, rgba(255,195,52,.20), transparent 42%),
    radial-gradient(ellipse at 68% 86%, rgba(255,195,52,.20), transparent 42%),
    radial-gradient(ellipse at 50% 55%, rgba(176,28,11,.28), transparent 72%);
}

.match-campfire-glow::before,
.match-campfire-glow::after {
  inset: 6% 1% 0;
}

.match-ember-layer {
  inset: -2% -1% 0;
}

.match-ember {
  border-radius: 50% 50% 44% 44%;
  filter: blur(.1px) saturate(1.18);
}

@keyframes kdCampfireSidePulse {
  from { opacity:.44; transform:scale(.94, .95) translateY(3%); }
  to   { opacity:.82; transform:scale(1.09, 1.05) translateY(-2%); }
}

.fight-card-match.fight-card-main-event {
  position: relative;
  min-height: 122px;
  border-top: 1px solid rgba(247,221,0,.34);
  border-bottom: 1px solid rgba(247,221,0,.26);
  border-left: 4px solid #ffcf33;
  border-right: 4px solid #ffcf33;
  background:
    linear-gradient(90deg, rgba(111,19,27,.42), rgba(18,21,30,.95) 28%, rgba(18,21,30,.95) 72%, rgba(23,47,112,.42)),
    linear-gradient(180deg, rgba(255,216,82,.05), transparent 52%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 14px 30px rgba(0,0,0,.32),
    0 0 26px rgba(247,221,0,.10),
    0 0 44px rgba(247,130,35,.07);
  overflow: visible;
}

.fight-card-match.fight-card-main-event::before {
  content: "MAIN EVENT";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px 5px;
  border: 1px solid rgba(255,232,118,.55);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(253,232,89,.98), rgba(226,165,19,.92));
  color: #1b1200;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .22em;
  text-transform: uppercase;
  box-shadow: 0 0 0 2px rgba(10,12,18,.78), 0 12px 26px rgba(0,0,0,.36), 0 0 22px rgba(247,221,0,.30);
}

.fight-card-match.fight-card-main-event::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  border-radius: 12px;
  background:
    linear-gradient(115deg, rgba(255,222,79,.16), transparent 28%, transparent 72%, rgba(255,222,79,.18)),
    radial-gradient(circle at 50% 50%, rgba(255,214,51,.07), transparent 58%);
  z-index: 0;
}

.fight-card-main-event .fight-set-number {
  min-height: 88px;
  border-right-color: rgba(255,220,84,.42);
  text-shadow: 0 0 18px rgba(247,221,0,.22);
}

.fight-card-main-event .fight-set-number span {
  color: #ffe46b;
}

.fight-card-main-event .fight-set-number strong {
  font-size: 39px;
  color: #fff2a5;
}

.fight-card-main-event .fight-versus {
  font-size: 34px;
  color: #fff06b;
  text-shadow: 0 0 20px rgba(255,236,106,.52), 0 0 34px rgba(255,166,21,.28);
}

.fight-card-main-event .fight-player-copy > strong {
  font-size: 25px;
}

.fight-card-main-event .fight-match-status {
  min-width: 96px;
  border-color: rgba(255,222,95,.30);
  color: #ffe27d;
  background: linear-gradient(180deg, rgba(58,39,4,.58), rgba(14,11,7,.72));
  box-shadow: 0 0 18px rgba(247,221,0,.10);
}

@media (max-width: 900px) {
  .match-campfire-ambience { width: 100vw; }
  .match-campfire-ambience::before,
  .match-campfire-ambience::after { width: 30vw; filter: blur(34px) saturate(1.15); }
  .fight-card-match.fight-card-main-event { min-height: 110px; }
  .fight-card-main-event .fight-set-number strong { font-size: 31px; }
  .fight-card-main-event .fight-versus { font-size: 28px; }
}

@media (max-width: 620px) {
  .match-campfire-ambience::before,
  .match-campfire-ambience::after { display:none; }
  .fight-card-match.fight-card-main-event::before { top: -10px; font-size: 8px; letter-spacing: .16em; }
  .fight-card-match.fight-card-main-event { min-height: 96px; }
  .fight-card-main-event .fight-versus { font-size: 24px; }
}


/* ======================================================================
   KOJI DOJO v12.2 — RANK LABELS + VISIBLE ANIME EMBER STREAKS
   ====================================================================== */

/* All colour-coded fight-card rank badges use the same neutral text. The
   actual rank remains available in the badge title/aria-label. */
.fight-rank {
  min-width: 42px;
  min-height: 18px;
  align-items: center;
  justify-content: center;
  padding: 3px 7px 2px;
  border-color: rgba(255,255,255,.25);
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  text-shadow: 0 1px 2px rgba(0,0,0,.65);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 10px rgba(0,0,0,.24);
}
.fight-rank-yellow { color:#171100; text-shadow:none; }

/* Make the particle canvas explicitly visible between wallpaper and card. */
.match-campfire-ambience {
  z-index: 2 !important;
  overflow: visible !important;
}
.match-ember-layer {
  z-index: 3 !important;
  overflow: visible !important;
  opacity: 1 !important;
  filter: saturate(1.18) brightness(1.12);
}

/* Shared particle body. */
.match-ember {
  position: absolute;
  z-index: 1;
  left: var(--ember-x);
  bottom: var(--ember-bottom);
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 100%;
  will-change: transform, opacity, filter;
  animation: kdAnimeEmberRise var(--ember-duration) cubic-bezier(.16,.46,.22,.98) var(--ember-delay) infinite !important;
}

/* Long hand-drawn-looking anime sparks. */
.match-ember-spark {
  width: max(1px, var(--ember-size));
  height: var(--ember-trail);
  border-radius: 999px 999px 82% 82%;
  background: linear-gradient(
    180deg,
    rgba(255,251,224,.96) 0 7%,
    hsl(var(--ember-hue) 100% 72%) 16%,
    hsla(calc(var(--ember-hue) - 7),100%,56%,.82) 42%,
    hsla(calc(var(--ember-hue) - 16),100%,44%,.42) 70%,
    transparent 100%
  );
  box-shadow:
    0 0 2px rgba(255,245,174,.72),
    0 0 7px hsla(var(--ember-hue),100%,60%,.48),
    0 0 14px hsla(var(--ember-hue),100%,54%,.26);
  mix-blend-mode: screen;
}
.match-ember-spark::before {
  content:"";
  position:absolute;
  top:-1px;
  left:50%;
  width:calc(var(--ember-size) * 1.05);
  height:calc(var(--ember-size) * 1.05);
  transform:translateX(-50%);
  border-radius:50%;
  background:rgba(255,249,214,.88);
  box-shadow:0 0 4px rgba(255,235,154,.48), 0 0 10px hsla(var(--ember-hue),100%,57%,.26);
}
.match-ember-spark::after {
  content:"";
  position:absolute;
  inset:16% -55% 26%;
  border-radius:50%;
  background:hsla(var(--ember-hue),100%,58%,.22);
  filter:blur(3px);
}

/* A smaller population of round coals gives the streaks depth. */
.match-ember-coal {
  width:calc(var(--ember-size) * .92);
  height:calc(var(--ember-size) * 1.05);
  border-radius:50% 50% 44% 44%;
  background:radial-gradient(circle at 42% 35%, #fffbd1 0 13%, hsl(var(--ember-hue) 100% 67%) 28%, hsl(calc(var(--ember-hue) - 12) 100% 48%) 63%, transparent 80%);
  box-shadow:
    0 0 calc(var(--ember-size) * 1.4) hsla(var(--ember-hue),100%,58%,.42),
    0 0 calc(var(--ember-size) * 3.1) hsla(var(--ember-hue),100%,55%,.18);
  mix-blend-mode:screen;
}

@keyframes kdAnimeEmberRise {
  0% {
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(.55) rotate(var(--ember-rotate-start));
    filter: brightness(.92);
  }
  10% { opacity: .48; }
  24% {
    opacity: .74;
    transform: translate3d(calc(var(--ember-drift-mid) * .22), calc(var(--ember-rise) * .20), 0) scale(.88) rotate(calc(var(--ember-rotate-start) + 4deg));
    filter: brightness(1.04);
  }
  52% {
    opacity: .62;
    transform: translate3d(calc(var(--ember-drift-mid) * .72), calc(var(--ember-rise) * .52), 0) scale(.96) rotate(calc((var(--ember-rotate-start) + var(--ember-rotate-end)) / 2));
    filter: brightness(1);
  }
  78% {
    opacity: .34;
    transform: translate3d(calc(var(--ember-drift-end) * .82), calc(var(--ember-rise) * .80), 0) scale(.72) rotate(calc(var(--ember-rotate-end) - 3deg));
    filter: brightness(.94);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--ember-drift-end), var(--ember-rise), 0) scale(.42) rotate(var(--ember-rotate-end));
    filter: brightness(.88);
  }
}

/* The site has a global reduced-motion rule. These are explicitly requested,
   slow ambient effects, so keep them active even when that rule is present. */
@media (prefers-reduced-motion: reduce) {
  .match-campfire-glow {
    animation:kdCampfireGlow 2.85s ease-in-out infinite alternate !important;
  }
  .match-campfire-glow::before,
  .match-campfire-glow::after {
    animation:kdCampfireLobe 2.1s ease-in-out infinite alternate !important;
  }
  .match-campfire-ambience::before,
  .match-campfire-ambience::after {
    animation:kdCampfireSidePulse 3.8s ease-in-out infinite alternate !important;
  }
  .match-ember {
    animation:kdAnimeEmberRise var(--ember-duration) cubic-bezier(.16,.46,.22,.98) var(--ember-delay) infinite !important;
  }
}

@media (max-width:720px) {
  .match-ember-spark { height:calc(var(--ember-trail) * .68); }
  .match-ember-layer { filter:saturate(1.10) brightness(1.04); }
}


/* ======================================================================
   KOJI DOJO v12.4 — REAL EMBER FOOTAGE
   Uses the supplied real-world ember GIF instead of procedural particles.
   Black pixels disappear with screen blending, leaving only natural sparks.
   ====================================================================== */

.match-campfire-glow {
  z-index: 1;
}

.match-real-ember-layer {
  position: absolute;
  z-index: 2;
  inset: 4% -1% 0;
  overflow: visible;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: screen;
}

.match-real-embers {
  position: absolute;
  bottom: 2%;
  width: min(43vw, 680px);
  height: auto;
  opacity: .60;
  mix-blend-mode: screen;
  filter: saturate(1.12) contrast(1.10) brightness(1.18);
  -webkit-mask-image: radial-gradient(ellipse at 50% 64%, #000 0 62%, rgba(0,0,0,.82) 75%, transparent 96%);
  mask-image: radial-gradient(ellipse at 50% 64%, #000 0 62%, rgba(0,0,0,.82) 75%, transparent 96%);
}

.match-real-embers-left {
  left: -1.5%;
  transform: scale(1.12);
  transform-origin: left bottom;
}

.match-real-embers-right {
  right: -1.5%;
  transform: scale(1.12);
  transform-origin: right bottom;
}

/* Ensure no legacy procedural particles can appear in this build. */
.match-ember-layer,
.match-ember {
  display: none !important;
}

@media (max-width: 900px) {
  .match-real-embers {
    width: min(57vw, 560px);
    opacity: .48;
  }
  .match-real-embers-left { left: -13%; }
  .match-real-embers-right { right: -13%; }
}

@media (max-width: 620px) {
  .match-real-ember-layer {
    inset: 8% -18% 0;
    overflow: hidden;
  }
  .match-real-embers {
    bottom: 7%;
    width: 78vw;
    opacity: .34;
    filter: saturate(1.08) contrast(1.06) brightness(1.10);
  }
  .match-real-embers-left { left: -31%; }
  .match-real-embers-right { right: -31%; }
}

/* ======================================================================
   KOJI DOJO v12.5 — EVENT ACTION CLEANUP
   - Twitch promoted into the sticky header, replacing Watch Live.
   - Event hero now has only two compact utility actions side-by-side.
   - No backend, signup, fight-card, archive, or ember changes.
   ====================================================================== */

/* Header Twitch CTA: angular broadcast-button silhouette rather than a pill. */
.site-header .nav-live.nav-twitch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 108px;
  min-height: 38px;
  padding: 8px 16px 8px 14px;
  overflow: hidden;
  border: 1px solid rgba(164, 116, 255, .92);
  border-left: 4px solid #a970ff;
  border-radius: 0;
  color: #fff;
  background:
    linear-gradient(120deg, rgba(145,70,255,.28), rgba(18,12,30,.98) 48%, rgba(10,12,18,.98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 0 1px rgba(145,70,255,.08),
    0 0 18px rgba(145,70,255,.20),
    0 8px 20px rgba(0,0,0,.28);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
  transition: transform .16s ease, filter .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.site-header .nav-live.nav-twitch::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 0 57%, rgba(255,255,255,.10) 58% 61%, transparent 62%),
    linear-gradient(90deg, rgba(169,112,255,.15), transparent 48%);
}

.site-header .nav-live.nav-twitch::after {
  content: "";
  position: absolute;
  top: 0;
  right: 12px;
  width: 30px;
  height: 2px;
  background: #a970ff;
  box-shadow: 0 0 12px rgba(169,112,255,.95);
}

.nav-twitch-live {
  position: relative;
  z-index: 1;
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #bf94ff;
  box-shadow: 0 0 0 3px rgba(169,112,255,.13), 0 0 10px rgba(169,112,255,.92);
}

.site-header .nav-live.nav-twitch > span:last-child {
  position: relative;
  z-index: 1;
}

.site-header .nav-live.nav-twitch:hover,
.site-header .nav-live.nav-twitch:focus-visible {
  color: #fff;
  border-color: #c6a7ff;
  transform: translateY(-1px);
  filter: brightness(1.14) saturate(1.08);
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 0 1px rgba(145,70,255,.14),
    0 0 26px rgba(145,70,255,.38),
    0 10px 24px rgba(0,0,0,.34);
}

/* Two utility controls only: visually balanced and permanently adjacent on
   normal desktop/tablet widths. */
.hero-link-cards.hero-utility-actions {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 10px !important;
  margin-top: 12px !important;
}

.hero-utility-actions .hero-link-card {
  min-width: 0;
  min-height: 64px !important;
  padding: 10px 15px 10px 17px !important;
  gap: 10px !important;
}

/* Undo the old oversized qualifier treatment now that Connection Test is one
   half of a compact action pair. Keep the yellow esports identity. */
.hero-utility-actions .hero-latency {
  --card-accent: #f7dd00;
  min-height: 64px !important;
  padding: 10px 15px 10px 17px !important;
  border: 1px solid rgba(247,221,0,.76) !important;
  border-left: 5px solid #f7dd00 !important;
  background:
    linear-gradient(112deg, rgba(247,221,0,.14) 0%, #0b0f13 44%, #121724 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 24px rgba(0,0,0,.32),
    0 0 17px rgba(247,221,0,.14) !important;
  animation: none !important;
}

.hero-utility-actions .hero-latency::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(120deg, transparent 0 57%, rgba(255,255,255,.055) 58% 61%, transparent 62%),
    linear-gradient(90deg, rgba(247,221,0,.10), transparent 45%) !important;
  background-size: auto !important;
  background-position: 0 0 !important;
  animation: none !important;
}

.hero-utility-actions .hero-latency::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 14px !important;
  width: 38px !important;
  height: 3px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f7dd00 !important;
  box-shadow: 0 0 12px rgba(247,221,0,.75) !important;
}

.hero-utility-actions .hero-link-card span,
.hero-utility-actions .hero-latency span {
  min-width: 0 !important;
  color: var(--card-accent) !important;
  font-size: 10px !important;
  letter-spacing: .12em !important;
  line-height: 1.1 !important;
  text-shadow: 0 0 10px color-mix(in srgb, var(--card-accent) 45%, transparent) !important;
}

.hero-utility-actions .hero-link-card strong,
.hero-utility-actions .hero-latency strong {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  width: auto !important;
  padding: 0 !important;
  color: #fff !important;
  font-family: "Barlow Condensed", Impact, sans-serif !important;
  font-size: clamp(14px, 1.1vw, 17px) !important;
  font-weight: 900 !important;
  letter-spacing: .035em !important;
  line-height: 1 !important;
  text-align: right !important;
  text-transform: uppercase !important;
  white-space: nowrap;
}

.hero-utility-actions .hero-link-card strong em,
.hero-utility-actions .hero-latency strong em {
  display: inline-block;
  color: var(--card-accent);
  font-style: normal;
  font-size: 1.18em;
  line-height: 1;
  text-shadow: 0 0 10px color-mix(in srgb, var(--card-accent) 60%, transparent);
  animation: none !important;
}

.hero-utility-actions .hero-latency:hover,
.hero-utility-actions .hero-latency:focus-visible,
.hero-utility-actions .hero-discord:hover,
.hero-utility-actions .hero-discord:focus-visible {
  transform: translateY(-2px) scale(1.006) !important;
  filter: brightness(1.13) saturate(1.05) !important;
  outline: none;
}

.hero-utility-actions .hero-discord {
  --card-accent: #8f98ff;
  border-color: rgba(143,152,255,.68) !important;
  border-left-color: #8f98ff !important;
  background:
    linear-gradient(112deg, rgba(88,101,242,.15) 0%, #0b0f17 45%, #121724 100%) !important;
}

/* Keep the pair side-by-side on phones where there is enough room, but make
   the typography compact rather than stacking each card vertically. */
@media (max-width: 720px) {
  .site-header .nav-live.nav-twitch {
    min-width: 101px;
    min-height: 36px;
    padding: 7px 13px 7px 12px;
    font-size: 14px;
  }

  .hero-link-cards.hero-utility-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  .hero-utility-actions .hero-link-card,
  .hero-utility-actions .hero-latency {
    min-height: 66px !important;
    padding: 9px 10px 9px 12px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 5px !important;
  }

  .hero-utility-actions .hero-link-card strong,
  .hero-utility-actions .hero-latency strong {
    width: 100% !important;
    justify-content: space-between !important;
    font-size: clamp(12px, 3.4vw, 15px) !important;
    white-space: normal;
    text-align: left !important;
  }
}

@media (max-width: 390px) {
  .hero-utility-actions .hero-link-card strong,
  .hero-utility-actions .hero-latency strong {
    font-size: 11.5px !important;
    letter-spacing: .015em !important;
  }
}

/* Prevent the old reduced-motion exception from re-enabling the removed
   qualifier pulse/sweep inside the compact hero action pair. */
@media (prefers-reduced-motion: reduce) {
  .hero-utility-actions .hero-latency,
  .hero-utility-actions .hero-latency::before,
  .hero-utility-actions .hero-latency strong em {
    animation: none !important;
  }
}

/* ======================================================================
   KOJI DOJO v12.6 — TRUE EQUAL EVENT ACTIONS
   Fixes the inherited `.hero-latency { grid-column: 1 / -1; }` rule that
   forced Connection Test onto its own row. Both utilities are now one-line,
   equal-width, equal-height buttons in the same grid row.
   ====================================================================== */

.hero-link-cards.hero-utility-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-flow: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
}

.hero-utility-actions > .hero-link-card,
.hero-utility-actions > .hero-latency,
.hero-utility-actions > .hero-discord {
  grid-column: auto !important;
  grid-row: 1 !important;
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding: 0 16px 0 18px !important;
  gap: 12px !important;
  overflow: hidden !important;
}

.hero-utility-actions > .hero-link-card > strong,
.hero-utility-actions > .hero-latency > strong,
.hero-utility-actions > .hero-discord > strong {
  display: inline-flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 0 !important;
  color: #fff !important;
  font-family: "Barlow Condensed", Impact, sans-serif !important;
  font-size: clamp(15px, 1.08vw, 18px) !important;
  font-weight: 900 !important;
  letter-spacing: .065em !important;
  line-height: 1 !important;
  text-align: left !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.hero-utility-actions > .hero-link-card > strong > span,
.hero-utility-actions > .hero-latency > strong > span,
.hero-utility-actions > .hero-discord > strong > span {
  display: block !important;
  min-width: 0 !important;
  color: #fff !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.72) !important;
}

.hero-utility-actions .utility-action-icon {
  display: block !important;
  width: 19px !important;
  height: 19px !important;
  flex: 0 0 19px !important;
  color: var(--card-accent) !important;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--card-accent) 62%, transparent));
}

.hero-utility-actions .utility-action-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--card-accent) !important;
  font-family: "Barlow Condensed", Impact, sans-serif !important;
  font-size: 24px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: 0 0 11px color-mix(in srgb, var(--card-accent) 68%, transparent) !important;
  animation: none !important;
}

/* Remove leftover large-qualifier pseudo-element geometry. */
.hero-utility-actions > .hero-latency::after,
.hero-utility-actions > .hero-discord::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 14px !important;
  width: 34px !important;
  height: 3px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--card-accent) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--card-accent) 70%, transparent) !important;
  pointer-events: none !important;
}

@media (max-width: 720px) {
  .hero-link-cards.hero-utility-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .hero-utility-actions > .hero-link-card,
  .hero-utility-actions > .hero-latency,
  .hero-utility-actions > .hero-discord {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    padding: 0 10px 0 11px !important;
    gap: 6px !important;
  }

  .hero-utility-actions > .hero-link-card > strong,
  .hero-utility-actions > .hero-latency > strong,
  .hero-utility-actions > .hero-discord > strong {
    gap: 6px !important;
    font-size: clamp(11.5px, 3.25vw, 14px) !important;
    letter-spacing: .035em !important;
  }

  .hero-utility-actions .utility-action-icon {
    width: 15px !important;
    height: 15px !important;
    flex-basis: 15px !important;
  }

  .hero-utility-actions .utility-action-arrow {
    font-size: 19px !important;
  }
}

@media (max-width: 390px) {
  .hero-utility-actions > .hero-link-card > strong,
  .hero-utility-actions > .hero-latency > strong,
  .hero-utility-actions > .hero-discord > strong {
    font-size: 10.5px !important;
    letter-spacing: .015em !important;
  }

  .hero-utility-actions .utility-action-icon {
    width: 13px !important;
    height: 13px !important;
    flex-basis: 13px !important;
  }
}


/* ======================================================================
   KOJI DOJO v12.7 — DISCORD INVITE + COMPACT FIGHT-CARD FIRE
   - Compact two-line utility copy keeps both hero actions equal.
   - Fire/ember ambience is anchored to the fight-card box, narrowed, and
     clipped exactly at the card bottom so nothing burns beneath the roster.
   ====================================================================== */

/* Two-line copy inside the existing equal-height hero action pair. */
.hero-utility-actions > .hero-link-card,
.hero-utility-actions > .hero-latency,
.hero-utility-actions > .hero-discord {
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
}

.hero-utility-actions .utility-action-copy {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 2px !important;
  min-width: 0 !important;
  width: auto !important;
  color: #fff !important;
  font: inherit !important;
  line-height: 1 !important;
  text-align: left !important;
}

.hero-utility-actions .utility-action-title {
  display: block !important;
  min-width: 0 !important;
  color: #fff !important;
  font: inherit !important;
  font-size: 1em !important;
  letter-spacing: .055em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.hero-utility-actions .utility-action-copy small {
  display: block !important;
  overflow: hidden !important;
  max-width: 100% !important;
  color: var(--card-accent) !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 8.5px !important;
  font-weight: 800 !important;
  letter-spacing: .095em !important;
  line-height: 1.05 !important;
  text-overflow: ellipsis !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  opacity: .88 !important;
}

/* The stage now takes the fight card's exact width and height. */
.fight-card-stage {
  position: relative;
  width: min(1040px, 100%);
  margin: 0 auto;
  isolation: isolate;
}

.fight-card-stage > .fight-card-shell {
  position: relative;
  z-index: 4 !important;
  width: 100%;
  margin: 0;
}

/* Start below the card header, stay only moderately wider than the roster,
   and stop at the card's bottom edge. */
.fight-card-stage > .match-campfire-ambience {
  position: absolute !important;
  z-index: 2 !important;
  top: 126px !important;
  right: auto !important;
  bottom: 0 !important;
  left: 50% !important;
  width: calc(100% + clamp(210px, 20vw, 360px)) !important;
  height: auto !important;
  transform: translateX(-50%) !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Smaller side warmth; no giant full-section flame field. */
.fight-card-stage > .match-campfire-ambience::before,
.fight-card-stage > .match-campfire-ambience::after {
  top: 18% !important;
  bottom: 0 !important;
  width: 23% !important;
  opacity: .42 !important;
  filter: blur(30px) saturate(1.12) !important;
}

.fight-card-stage > .match-campfire-ambience::before { left: 0 !important; }
.fight-card-stage > .match-campfire-ambience::after { right: 0 !important; }

.fight-card-stage .match-campfire-glow {
  right: auto !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 96% !important;
  height: 88% !important;
  opacity: .38 !important;
  transform: translateX(-50%) !important;
  filter: blur(38px) saturate(1.14) !important;
  background:
    radial-gradient(ellipse at 13% 91%, rgba(255,235,116,.56) 0 5%, rgba(255,153,31,.44) 13%, rgba(218,58,11,.28) 27%, transparent 49%),
    radial-gradient(ellipse at 87% 91%, rgba(255,235,116,.56) 0 5%, rgba(255,153,31,.44) 13%, rgba(218,58,11,.28) 27%, transparent 49%),
    radial-gradient(ellipse at 50% 61%, rgba(158,29,11,.12), transparent 66%) !important;
}

.fight-card-stage .match-campfire-glow::before,
.fight-card-stage .match-campfire-glow::after {
  display: none !important;
}

.fight-card-stage .match-real-ember-layer {
  inset: 0 !important;
  overflow: hidden !important;
}

.fight-card-stage .match-real-embers {
  bottom: 0 !important;
  width: min(37%, 500px) !important;
  opacity: .43 !important;
  transform: none !important;
  filter: saturate(1.08) contrast(1.06) brightness(1.10) !important;
  -webkit-mask-image: radial-gradient(ellipse at 50% 64%, #000 0 56%, rgba(0,0,0,.76) 72%, transparent 94%) !important;
  mask-image: radial-gradient(ellipse at 50% 64%, #000 0 56%, rgba(0,0,0,.76) 72%, transparent 94%) !important;
}

.fight-card-stage .match-real-embers-left {
  left: 0 !important;
  transform-origin: left bottom !important;
}

.fight-card-stage .match-real-embers-right {
  right: 0 !important;
  transform-origin: right bottom !important;
}

@media (max-width: 900px) {
  .fight-card-stage > .match-campfire-ambience {
    top: 116px !important;
    width: calc(100% + clamp(120px, 18vw, 210px)) !important;
  }

  .fight-card-stage .match-real-embers {
    width: min(42%, 390px) !important;
    opacity: .36 !important;
  }
}

@media (max-width: 720px) {
  .hero-utility-actions > .hero-link-card,
  .hero-utility-actions > .hero-latency,
  .hero-utility-actions > .hero-discord {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
  }

  .hero-utility-actions .utility-action-copy {
    gap: 1px !important;
  }

  .hero-utility-actions .utility-action-title {
    font-size: 1em !important;
    letter-spacing: .025em !important;
  }

  .hero-utility-actions .utility-action-copy small {
    font-size: 6.8px !important;
    letter-spacing: .045em !important;
  }
}

@media (max-width: 620px) {
  .fight-card-stage > .match-campfire-ambience {
    top: 104px !important;
    width: calc(100% + 70px) !important;
  }

  .fight-card-stage > .match-campfire-ambience::before,
  .fight-card-stage > .match-campfire-ambience::after {
    display: none !important;
  }

  .fight-card-stage .match-campfire-glow {
    width: 100% !important;
    height: 82% !important;
    opacity: .30 !important;
    filter: blur(28px) saturate(1.08) !important;
  }

  .fight-card-stage .match-real-embers {
    width: 56% !important;
    opacity: .27 !important;
  }

  .fight-card-stage .match-real-embers-left { left: -7% !important; }
  .fight-card-stage .match-real-embers-right { right: -7% !important; }
}

@media (max-width: 390px) {
  .hero-utility-actions .utility-action-copy small {
    font-size: 6.2px !important;
    letter-spacing: .02em !important;
  }
}


/* Wider fight-card ambience may extend beyond the content rail, but must never
   create horizontal page scrolling. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}


/* v12.8 — Larger, clearer hero utility buttons */
.hero-utility-actions .utility-action-copy {
  justify-content: center !important;
  gap: 0 !important;
}

.hero-utility-actions .utility-action-title {
  font-size: clamp(14px, 1.15vw, 18px) !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
}

.hero-utility-actions .utility-action-copy small {
  display: none !important;
}

@media (max-width: 900px) {
  .hero-utility-actions .utility-action-title {
    font-size: clamp(13px, 3.3vw, 16px) !important;
    letter-spacing: .03em !important;
  }
}


/* v12.9 — Bigger text, slightly taller buttons, larger icons */
.hero-utility-actions > .hero-link-card,
.hero-utility-actions > .hero-latency,
.hero-utility-actions > .hero-discord {
  height: 68px !important;
  min-height: 68px !important;
  max-height: 68px !important;
  padding: 0 18px 0 20px !important;
  gap: 14px !important;
}

.hero-utility-actions > .hero-link-card > strong,
.hero-utility-actions > .hero-latency > strong,
.hero-utility-actions > .hero-discord > strong {
  gap: 12px !important;
}

.hero-utility-actions .utility-action-icon {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
}

.hero-utility-actions .utility-action-arrow {
  font-size: 28px !important;
}

.hero-utility-actions .utility-action-title {
  font-size: clamp(18px, 1.38vw, 22px) !important;
  font-weight: 900 !important;
  letter-spacing: .025em !important;
  line-height: .94 !important;
  white-space: normal !important;
  text-wrap: balance !important;
}

@media (max-width: 900px) {
  .hero-utility-actions > .hero-link-card,
  .hero-utility-actions > .hero-latency,
  .hero-utility-actions > .hero-discord {
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    padding: 0 14px 0 14px !important;
    gap: 10px !important;
  }

  .hero-utility-actions > .hero-link-card > strong,
  .hero-utility-actions > .hero-latency > strong,
  .hero-utility-actions > .hero-discord > strong {
    gap: 10px !important;
  }

  .hero-utility-actions .utility-action-icon {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
  }

  .hero-utility-actions .utility-action-arrow {
    font-size: 24px !important;
  }

  .hero-utility-actions .utility-action-title {
    font-size: clamp(15px, 2.35vw, 18px) !important;
    letter-spacing: .018em !important;
    line-height: .96 !important;
  }
}

@media (max-width: 620px) {
  .hero-utility-actions > .hero-link-card,
  .hero-utility-actions > .hero-latency,
  .hero-utility-actions > .hero-discord {
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;
    padding: 0 12px !important;
    gap: 8px !important;
  }

  .hero-utility-actions .utility-action-icon {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
  }

  .hero-utility-actions .utility-action-arrow {
    font-size: 21px !important;
  }

  .hero-utility-actions .utility-action-title {
    font-size: clamp(13px, 3.7vw, 16px) !important;
    line-height: .95 !important;
  }
}


/* ======================================================================
   KOJI DOJO v12.10 — LARGE, IMMEDIATELY READABLE ACTION LABELS
   ====================================================================== */
.hero-utility-actions > .hero-link-card,
.hero-utility-actions > .hero-latency,
.hero-utility-actions > .hero-discord {
  height: 76px !important;
  min-height: 76px !important;
  max-height: 76px !important;
  padding: 0 20px 0 22px !important;
}

.hero-utility-actions > .hero-link-card > strong,
.hero-utility-actions > .hero-latency > strong,
.hero-utility-actions > .hero-discord > strong {
  gap: 14px !important;
  overflow: visible !important;
}

.hero-utility-actions .utility-action-copy {
  overflow: visible !important;
}

.hero-utility-actions .utility-action-title {
  font-family: "Barlow Condensed", Impact, sans-serif !important;
  font-size: clamp(27px, 2vw, 34px) !important;
  font-weight: 900 !important;
  letter-spacing: .005em !important;
  line-height: .92 !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.88) !important;
}

.hero-utility-actions .utility-action-icon {
  width: 29px !important;
  height: 29px !important;
  flex: 0 0 29px !important;
}

.hero-utility-actions .utility-action-arrow {
  font-size: 34px !important;
}

@media (max-width: 1100px) {
  .hero-utility-actions > .hero-link-card,
  .hero-utility-actions > .hero-latency,
  .hero-utility-actions > .hero-discord {
    height: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;
    padding: 0 15px !important;
  }

  .hero-utility-actions > .hero-link-card > strong,
  .hero-utility-actions > .hero-latency > strong,
  .hero-utility-actions > .hero-discord > strong {
    gap: 10px !important;
  }

  .hero-utility-actions .utility-action-title {
    font-size: clamp(23px, 2.55vw, 29px) !important;
  }

  .hero-utility-actions .utility-action-icon {
    width: 25px !important;
    height: 25px !important;
    flex: 0 0 25px !important;
  }

  .hero-utility-actions .utility-action-arrow {
    font-size: 29px !important;
  }
}

@media (max-width: 760px) {
  .hero-utility-actions > .hero-link-card,
  .hero-utility-actions > .hero-latency,
  .hero-utility-actions > .hero-discord {
    height: 84px !important;
    min-height: 84px !important;
    max-height: 84px !important;
    padding: 0 11px !important;
  }

  .hero-utility-actions .utility-action-title {
    font-size: clamp(20px, 5vw, 26px) !important;
    line-height: .9 !important;
    white-space: normal !important;
    text-wrap: balance !important;
  }

  .hero-utility-actions .utility-action-icon {
    width: 23px !important;
    height: 23px !important;
    flex: 0 0 23px !important;
  }

  .hero-utility-actions .utility-action-arrow {
    font-size: 25px !important;
  }
}

@media (max-width: 460px) {
  .hero-utility-actions .utility-action-title {
    font-size: clamp(17px, 5.2vw, 22px) !important;
  }

  .hero-utility-actions .utility-action-arrow {
    display: none !important;
  }
}


/* v12.11 — Stronger Fight Card main-event treatment */
.fight-card-match.fight-card-main-event {
  min-height: 132px;
  border-top: 1px solid rgba(255,229,117,.58);
  border-bottom: 1px solid rgba(255,210,76,.44);
  border-left: 5px solid #ffd24b;
  border-right: 5px solid #ffd24b;
  background:
    radial-gradient(circle at 50% 46%, rgba(255,220,90,.22), rgba(255,220,90,0) 26%),
    linear-gradient(90deg, rgba(140,70,10,.42) 0%, rgba(25,28,40,.96) 19%, rgba(31,27,12,.96) 50%, rgba(25,28,40,.96) 81%, rgba(140,70,10,.42) 100%),
    linear-gradient(180deg, rgba(255,226,112,.12), rgba(255,184,51,.03) 38%, rgba(0,0,0,0) 74%);
  box-shadow:
    inset 0 1px 0 rgba(255,250,218,.20),
    inset 0 0 26px rgba(255,212,75,.08),
    0 16px 34px rgba(0,0,0,.34),
    0 0 34px rgba(247,221,0,.18),
    0 0 64px rgba(255,140,35,.12);
}

.fight-card-match.fight-card-main-event::before {
  content: "MAIN EVENT";
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 172px;
  padding: 8px 22px 7px;
  text-align: center;
  line-height: 1;
  border: 1px solid rgba(255,236,136,.72);
  background: linear-gradient(180deg, rgba(255,235,107,1), rgba(232,173,26,.98));
  box-shadow:
    0 0 0 3px rgba(10,12,18,.82),
    0 12px 28px rgba(0,0,0,.40),
    0 0 26px rgba(247,221,0,.42);
}

.fight-card-match.fight-card-main-event::after {
  background:
    linear-gradient(115deg, rgba(255,222,79,.20), transparent 26%, transparent 74%, rgba(255,222,79,.24)),
    radial-gradient(circle at 50% 50%, rgba(255,214,51,.13), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 30%);
}

.fight-card-main-event .fight-set-number {
  min-height: 96px;
  background: linear-gradient(180deg, rgba(255,217,77,.10), rgba(145,69,17,.16));
}

.fight-card-main-event .fight-set-number span {
  color: #ffef9f;
}

.fight-card-main-event .fight-set-number strong {
  font-size: 42px;
}

.fight-card-main-event .fight-versus {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fff06b;
}

.fight-card-main-event .fight-versus span {
  display: block;
  font-size: 38px;
  line-height: .92;
  text-shadow: 0 0 22px rgba(255,236,106,.56), 0 0 36px rgba(255,166,21,.30);
}

.fight-card-main-event .fight-versus small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px 3px;
  border: 1px solid rgba(255,221,94,.42);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,216,79,.16), rgba(84,52,6,.48));
  color: #ffe784;
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 0 18px rgba(247,221,0,.16);
}

.fight-card-main-event .fight-player-copy > strong {
  font-size: 27px;
}

.fight-card-main-event .fight-match-status {
  min-width: 118px;
  border-color: rgba(255,228,120,.44);
  color: #fff1a4;
  background: linear-gradient(180deg, rgba(92,67,15,.72), rgba(28,22,9,.84));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 20px rgba(247,221,0,.14);
}

@media (max-width: 900px) {
  .fight-card-match.fight-card-main-event { min-height: 120px; }
  .fight-card-match.fight-card-main-event::before { min-width: 152px; }
  .fight-card-main-event .fight-set-number strong { font-size: 34px; }
  .fight-card-main-event .fight-versus span { font-size: 30px; }
  .fight-card-main-event .fight-versus small { font-size: 9px; letter-spacing: .11em; }
}

@media (max-width: 620px) {
  .fight-card-match.fight-card-main-event::before {
    top: -12px;
    min-width: 134px;
    padding: 7px 16px 6px;
    font-size: 8px;
    letter-spacing: .16em;
  }
  .fight-card-match.fight-card-main-event { min-height: 104px; }
  .fight-card-main-event .fight-versus { gap: 4px; }
  .fight-card-main-event .fight-versus span { font-size: 25px; }
  .fight-card-main-event .fight-versus small { padding: 3px 8px; font-size: 8px; }
}


/* v12.12 — Center visible MAIN EVENT badge + larger FT10 */
.fight-card-match.fight-card-main-event {
  min-height: 148px;
  padding-top: 26px;
}

.fight-card-match.fight-card-main-event::before {
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  padding: 9px 26px 8px;
  z-index: 3;
}

.fight-card-main-event .fight-versus {
  gap: 8px;
}

.fight-card-main-event .fight-versus small {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 94px;
  padding: 8px 12px 7px;
  border-radius: 22px;
  line-height: 1;
}

.fight-card-main-event .fight-versus small b {
  display: block;
  color: #fff2a6;
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 26px;
  font-weight: 1000;
  line-height: .9;
  letter-spacing: .04em;
}

.fight-card-main-event .fight-versus small span {
  display: block;
  color: #ffe784;
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
  line-height: 1;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .fight-card-match.fight-card-main-event {
    min-height: 132px;
    padding-top: 24px;
  }
  .fight-card-match.fight-card-main-event::before {
    top: 7px;
    min-width: 170px;
    padding: 8px 22px 7px;
  }
  .fight-card-main-event .fight-versus small {
    min-width: 84px;
    padding: 7px 10px 6px;
  }
  .fight-card-main-event .fight-versus small b {
    font-size: 22px;
  }
  .fight-card-main-event .fight-versus small span {
    font-size: 9px;
    letter-spacing: .14em;
  }
}

@media (max-width: 620px) {
  .fight-card-match.fight-card-main-event {
    min-height: 114px;
    padding-top: 18px;
  }
  .fight-card-match.fight-card-main-event::before {
    top: 5px;
    min-width: 142px;
    padding: 7px 16px 6px;
    font-size: 8px;
    letter-spacing: .16em;
  }
  .fight-card-main-event .fight-versus {
    gap: 5px;
  }
  .fight-card-main-event .fight-versus small {
    min-width: 66px;
    padding: 5px 8px 5px;
  }
  .fight-card-main-event .fight-versus small b {
    font-size: 17px;
  }
  .fight-card-main-event .fight-versus small span {
    font-size: 7px;
    letter-spacing: .12em;
  }
}


/* v12.13 — Remove top MAIN EVENT pill from fight-card headliner */
.fight-card-match.fight-card-main-event {
  min-height: 132px !important;
  padding-top: 10px !important;
}

.fight-card-match.fight-card-main-event::before {
  content: none !important;
  display: none !important;
}

@media (max-width: 900px) {
  .fight-card-match.fight-card-main-event {
    min-height: 120px !important;
    padding-top: 10px !important;
  }
}

@media (max-width: 620px) {
  .fight-card-match.fight-card-main-event {
    min-height: 104px !important;
    padding-top: 8px !important;
  }
}


/* ======================================================================
   KOJI DOJO v12.14 — ESPORTS ARCHIVE MATCHUP CARDS
   ====================================================================== */
.archive-results {
  padding: 16px 18px 22px !important;
  background:
    linear-gradient(90deg, rgba(239,62,82,.025), transparent 34%, transparent 66%, rgba(36,84,216,.035)),
    #0a0e14;
}

.archive-results-head {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) 104px minmax(0,1fr);
  gap: 12px;
  align-items: center;
  min-height: 38px;
  padding: 0 8px 7px;
  color: #69717f;
  font-family: Inter, system-ui, sans-serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.archive-results-head > span { text-align: center; }
.archive-results-head strong { font-size: 11px; letter-spacing: .16em; }
.archive-head-usa { color: #ff7182; text-align: left; }
.archive-head-eu { color: #7997ff; text-align: right; }

.archive-result-row {
  position: relative;
  display: grid !important;
  grid-template-columns: 52px minmax(0,1fr) 104px minmax(0,1fr) !important;
  gap: 12px !important;
  align-items: center;
  min-height: 86px !important;
  margin-bottom: 8px;
  padding: 8px !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  border-bottom: 1px solid rgba(255,255,255,.075) !important;
  clip-path: polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  background:
    linear-gradient(90deg,rgba(239,62,82,.055),rgba(12,16,23,.96) 31%,rgba(12,16,23,.96) 69%,rgba(36,84,216,.07)),
    #0c1017;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018),0 8px 18px rgba(0,0,0,.18);
  transition: filter .18s ease,transform .18s ease,border-color .18s ease;
}
.archive-result-row:last-child {
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255,255,255,.075) !important;
}
.archive-result-row:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  border-color: rgba(247,221,0,.14) !important;
}

.archive-set {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  border-right: 1px solid rgba(247,221,0,.18);
  color: var(--yellow) !important;
  font-size: 23px !important;
  line-height: 1 !important;
  text-shadow: 0 0 12px rgba(247,221,0,.20);
}
.archive-set::before {
  content: "SET";
  margin-bottom: 4px;
  color: #777f8e;
  font-family: Inter,system-ui,sans-serif;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .16em;
}

.archive-player {
  position: relative;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 64px;
  padding: 9px 16px 10px;
  border: 1px solid rgba(255,255,255,.10);
  color: #f7f7f2 !important;
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035),0 7px 18px rgba(0,0,0,.16);
}
.archive-player::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .95;
}
.archive-player-usa {
  align-items: flex-start !important;
  text-align: left;
  border-left: 4px solid #ef3e52;
  clip-path: polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);
}
.archive-player-usa::before {
  background:
    linear-gradient(90deg,rgba(239,62,82,.28),rgba(239,62,82,.075) 47%,rgba(10,14,20,.78) 100%),
    linear-gradient(180deg,rgba(255,255,255,.025),transparent);
}
.archive-player-eu {
  align-items: flex-end !important;
  text-align: right;
  border-right: 4px solid #3c68ff;
  clip-path: polygon(10px 0,100% 0,100% 100%,0 100%);
}
.archive-player-eu::before {
  background:
    linear-gradient(270deg,rgba(48,91,244,.31),rgba(48,91,244,.08) 47%,rgba(10,14,20,.78) 100%),
    linear-gradient(180deg,rgba(255,255,255,.025),transparent);
}
.archive-team-line {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin-bottom: 4px;
}
.archive-player-eu .archive-team-line { flex-direction: row-reverse; }
.archive-team-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 17px;
  padding: 0 7px;
  border-radius: 2px;
  font-family: Inter,system-ui,sans-serif;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .13em;
  line-height: 1;
}
.archive-player-usa .archive-team-code {
  border: 1px solid rgba(255,112,130,.44);
  color: #ff9aa7;
  background: rgba(239,62,82,.13);
}
.archive-player-eu .archive-team-code {
  border: 1px solid rgba(112,145,255,.48);
  color: #a8b9ff;
  background: rgba(36,84,216,.17);
}
.archive-player .inline-flag-wrap {
  width: 29px;
  height: 19px;
  margin: 0 !important;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12),0 3px 8px rgba(0,0,0,.24);
}
.archive-player-name {
  display: block;
  overflow: hidden;
  width: 100%;
  color: #f7f7f2;
  font-family: "Barlow Condensed",Impact,sans-serif;
  font-size: clamp(18px,1.35vw,22px);
  font-weight: 800;
  letter-spacing: .012em;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 9px rgba(0,0,0,.70);
}
.archive-player-eu .archive-player-name { text-align: right; }
.archive-player.usa-result,
.archive-player.eu-result {
  border-top-color: rgba(255,225,104,.26);
  border-bottom-color: rgba(255,225,104,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055),0 0 0 1px rgba(247,221,0,.06),0 8px 20px rgba(0,0,0,.20),0 0 18px rgba(247,221,0,.055);
}
.archive-player.usa-result .archive-player-name { color: #ff8795; }
.archive-player.eu-result .archive-player-name { color: #8fa8ff; }
.archive-player.usa-result::after,
.archive-player.eu-result::after {
  content: "WIN";
  position: absolute;
  top: 7px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 16px;
  padding: 0 6px;
  border: 1px solid rgba(255,231,122,.44);
  border-radius: 2px;
  color: #fff0a2;
  background: rgba(93,66,5,.76);
  font-family: Inter,system-ui,sans-serif;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .13em;
  box-shadow: 0 0 12px rgba(247,221,0,.12);
}
.archive-player.usa-result::after { right: 13px; }
.archive-player.eu-result::after { left: 13px; }

.archive-score {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding-top: 10px;
  border: 1px solid rgba(247,221,0,.24);
  clip-path: polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);
  color: #fff !important;
  background:
    radial-gradient(circle at 50% 35%,rgba(247,221,0,.12),transparent 58%),
    linear-gradient(180deg,rgba(32,35,41,.96),rgba(9,12,17,.98));
  font-size: 34px !important;
  line-height: 1 !important;
  text-shadow: 0 0 13px rgba(247,221,0,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045),0 6px 16px rgba(0,0,0,.22);
}
.archive-score::before {
  content: "FT5";
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--yellow);
  font-family: Inter,system-ui,sans-serif;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .16em;
  line-height: 1;
}

@media (max-width: 900px) {
  .archive-results-head,
  .archive-result-row {
    grid-template-columns: 42px minmax(0,1fr) 86px minmax(0,1fr) !important;
    gap: 8px !important;
  }
  .archive-results-head { padding-inline: 6px; }
  .archive-result-row { min-height: 80px !important; padding: 7px !important; }
  .archive-player { min-height: 60px; padding-inline: 12px; }
  .archive-player-name { font-size: clamp(15px,2vw,19px); }
  .archive-score { min-height: 56px; font-size: 29px !important; }
}

@media (max-width: 620px) {
  .archive-results { padding: 10px 8px 14px !important; }
  .archive-results-head {
    grid-template-columns: 28px minmax(0,1fr) 54px minmax(0,1fr) !important;
    gap: 5px !important;
    min-height: 30px;
    padding: 0 3px 5px;
    font-size: 6px;
    letter-spacing: .10em;
  }
  .archive-results-head strong { font-size: 7px; letter-spacing: .08em; }
  .archive-result-row {
    grid-template-columns: 28px minmax(0,1fr) 54px minmax(0,1fr) !important;
    gap: 5px !important;
    min-height: 72px !important;
    margin-bottom: 6px;
    padding: 5px !important;
  }
  .archive-set { min-height: 54px; font-size: 17px !important; }
  .archive-set::before { font-size: 5px; }
  .archive-player {
    min-height: 54px;
    padding: 7px 8px;
    border-left-width: 3px;
    border-right-width: 3px;
  }
  .archive-team-line { gap: 4px; margin-bottom: 3px; }
  .archive-team-code {
    min-width: 25px;
    height: 13px;
    padding: 0 4px;
    font-size: 6px;
    letter-spacing: .07em;
  }
  .archive-player .inline-flag-wrap { width: 20px; height: 13px; }
  .archive-player-name { font-size: clamp(11px,3vw,14px); }
  .archive-player.usa-result::after,
  .archive-player.eu-result::after { display: none; }
  .archive-score { min-height: 52px; padding-top: 8px; font-size: 22px !important; }
  .archive-score::before { top: 6px; font-size: 5px; }
}


/* v12.15 — Archive winners get a much clearer shiny border treatment */
.archive-player.usa-result,
.archive-player.eu-result {
  border-top: 1px solid rgba(255,231,122,.56) !important;
  border-bottom: 1px solid rgba(255,231,122,.44) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.085),
    inset 0 0 0 1px rgba(255,225,104,.42),
    inset 0 0 26px rgba(255,212,70,.10),
    0 0 0 1px rgba(255,221,86,.24),
    0 0 18px rgba(247,221,0,.16),
    0 0 34px rgba(255,180,50,.12),
    0 10px 22px rgba(0,0,0,.24) !important;
}

.archive-player.usa-result {
  border-left: 4px solid #ffd34e !important;
}

.archive-player.eu-result {
  border-right: 4px solid #ffd34e !important;
}

.archive-player.usa-result::before,
.archive-player.eu-result::before {
  background:
    linear-gradient(180deg, rgba(255,246,180,.11), rgba(255,246,180,0) 26%),
    linear-gradient(90deg, rgba(255,213,74,.15), rgba(255,213,74,.04) 18%, rgba(10,14,20,.72) 50%, rgba(255,213,74,.04) 82%, rgba(255,213,74,.15));
  opacity: 1 !important;
}

.archive-player.usa-result .archive-team-code,
.archive-player.eu-result .archive-team-code {
  border-color: rgba(255,231,122,.72) !important;
  color: #fff0a6 !important;
  background: rgba(110,83,12,.30) !important;
  box-shadow: 0 0 12px rgba(247,221,0,.12);
}

.archive-player.usa-result .inline-flag-wrap,
.archive-player.eu-result .inline-flag-wrap {
  box-shadow:
    0 0 0 1px rgba(255,231,122,.34),
    0 0 12px rgba(247,221,0,.12),
    0 3px 8px rgba(0,0,0,.24) !important;
}

.archive-player.usa-result::after,
.archive-player.eu-result::after {
  border-color: rgba(255,231,122,.66) !important;
  color: #fff4b7 !important;
  background: linear-gradient(180deg, rgba(121,92,16,.92), rgba(72,49,6,.92)) !important;
  box-shadow:
    0 0 16px rgba(247,221,0,.20),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}


/* ======================================================================
   KOJI DOJO v12.16 — SIGNUP-FIRST LANDING ACTIONS
   The landing-page CTA no longer launches a latency test before region is
   known. It moves the player to the team selector; the form then runs the
   correct cross-region test after USA/EU has been chosen.
   ====================================================================== */
#event .hero-action-deck {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
  margin-top: 16px !important;
}

#event .hero-action-card {
  --action-accent: #f7dd00;
  --action-rgb: 247, 221, 0;
  position: relative !important;
  isolation: isolate !important;
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) 34px !important;
  align-items: center !important;
  gap: 15px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 94px !important;
  padding: 0 19px 0 13px !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--action-accent) 74%, white 8%) !important;
  border-left: 6px solid var(--action-accent) !important;
  border-radius: 7px !important;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)) !important;
  color: #fff !important;
  text-decoration: none !important;
  background:
    linear-gradient(126deg, rgba(var(--action-rgb), .24), rgba(var(--action-rgb), .075) 42%, rgba(9, 14, 22, .96) 43% 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    0 14px 30px rgba(0,0,0,.31),
    0 0 24px rgba(var(--action-rgb), .12) !important;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease !important;
}

#event .hero-action-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(117deg, rgba(255,255,255,.14), transparent 27%),
    linear-gradient(112deg, transparent 0 61%, rgba(255,255,255,.065) 62% 65%, transparent 66%);
}

#event .hero-action-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 15px;
  width: 58px;
  height: 4px;
  background: var(--action-accent);
  box-shadow: 0 0 14px rgba(var(--action-rgb), .58);
}

#event .hero-action-card:hover,
#event .hero-action-card:focus-visible {
  transform: translateY(-3px) scale(1.006) !important;
  filter: brightness(1.12) saturate(1.05) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.17),
    0 18px 34px rgba(0,0,0,.38),
    0 0 32px rgba(var(--action-rgb), .22) !important;
}

#event .hero-action-signup {
  --action-accent: #f7dd00;
  --action-rgb: 247, 221, 0;
}

#event .hero-action-discord {
  --action-accent: #8d95ff;
  --action-rgb: 141, 149, 255;
}

#event .hero-action-icon-box {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  height: 52px !important;
  border: 1px solid rgba(var(--action-rgb), .38) !important;
  border-radius: 5px !important;
  color: var(--action-accent) !important;
  background: rgba(var(--action-rgb), .10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 0 18px rgba(var(--action-rgb), .08) !important;
}

#event .hero-action-icon-box svg {
  display: block !important;
  width: 31px !important;
  height: 31px !important;
}

#event .hero-action-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 5px !important;
  min-width: 0 !important;
  text-align: left !important;
}

#event .hero-action-title {
  display: block !important;
  margin: 0 !important;
  color: #fff !important;
  font-family: "Barlow Condensed", Impact, sans-serif !important;
  font-size: clamp(27px, 1.75vw, 32px) !important;
  font-weight: 900 !important;
  letter-spacing: .025em !important;
  line-height: .92 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.88), 0 0 14px rgba(var(--action-rgb), .08) !important;
}

#event .hero-action-subtitle {
  display: block !important;
  overflow: hidden !important;
  max-width: 100% !important;
  color: color-mix(in srgb, var(--action-accent) 64%, white 36%) !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .035em !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#event .hero-action-chevron {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--action-accent) !important;
  font-family: "Barlow Condensed", Impact, sans-serif !important;
  font-size: 34px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: 0 0 14px rgba(var(--action-rgb), .52) !important;
}

.signup-choice-highlight {
  animation: kdSignupChoiceHighlight 1.05s ease-in-out 2 !important;
}

@keyframes kdSignupChoiceHighlight {
  0%, 100% { filter: none; }
  50% {
    filter: brightness(1.16);
    box-shadow: 0 0 0 2px rgba(247,221,0,.38), 0 0 28px rgba(247,221,0,.22);
  }
}

@media (max-width: 1100px) {
  #event .hero-action-card {
    grid-template-columns: 48px minmax(0, 1fr) 26px !important;
    gap: 11px !important;
    min-height: 88px !important;
    padding: 0 14px 0 11px !important;
  }
  #event .hero-action-icon-box {
    width: 44px !important;
    height: 44px !important;
  }
  #event .hero-action-icon-box svg {
    width: 27px !important;
    height: 27px !important;
  }
  #event .hero-action-title {
    font-size: clamp(23px, 2.25vw, 28px) !important;
  }
  #event .hero-action-subtitle {
    font-size: 10px !important;
  }
  #event .hero-action-chevron {
    font-size: 29px !important;
  }
}

@media (max-width: 760px) {
  #event .hero-action-deck {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }
  #event .hero-action-card {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    min-height: 92px !important;
    padding: 0 11px 0 9px !important;
  }
  #event .hero-action-icon-box {
    width: 36px !important;
    height: 36px !important;
  }
  #event .hero-action-icon-box svg {
    width: 22px !important;
    height: 22px !important;
  }
  #event .hero-action-title {
    font-size: clamp(19px, 4.5vw, 24px) !important;
    white-space: normal !important;
  }
  #event .hero-action-subtitle {
    font-size: 8.5px !important;
    white-space: normal !important;
  }
  #event .hero-action-chevron {
    display: none !important;
  }
}

@media (max-width: 430px) {
  #event .hero-action-card {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 6px !important;
    min-height: 104px !important;
    padding: 10px 8px !important;
  }
  #event .hero-action-copy {
    align-items: center !important;
    text-align: center !important;
  }
  #event .hero-action-title {
    font-size: clamp(18px, 5.2vw, 22px) !important;
  }
  #event .hero-action-subtitle {
    display: none !important;
  }
}

/* ======================================================================
   KOJI DOJO v12.18 — EXPANDED LATENCY + UPDATED PROCESS FLOW
   ====================================================================== */

.latency-result-row > div > strong {
  color: #f7f8fb;
  font-size: 14px;
  letter-spacing: .015em;
}

.latency-result-row > div > small {
  color: #9299a6;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .09em;
}

.latency-result-conditional .latency-location-dot {
  background: #ffad32;
  box-shadow: 0 0 9px rgba(255,173,50,.36);
}

.latency-result-conditional > strong {
  color: #ffb84d;
}

.latency-conditional {
  border-color: rgba(255,173,50,.46);
  background: linear-gradient(135deg, rgba(255,173,50,.105), rgba(255,132,36,.045));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 0 18px rgba(255,173,50,.055);
}

.latency-conditional .latency-verdict-icon,
.latency-conditional strong {
  color: #ffb84d;
}

.latency-conditional .latency-verdict-icon {
  background: rgba(255,173,50,.10);
}


/* ======================================================================
   KOJI DOJO v12.20 — READABLE ESPORTS ROSTER NAMES
   - Preserve the 5-column roster-board design.
   - Give player handles a dedicated two-line nameplate instead of ellipsis.
   - Long handles step down automatically while card heights remain uniform.
   ====================================================================== */

.premium-players .teams-grid {
  align-items: start;
}

.premium-players .team-panel {
  min-height: 0 !important;
  overflow: hidden;
}

/* The old table headings are intentionally gone in v12.19. */
.premium-players .player-column-header {
  display: none !important;
}

.premium-players .player-list {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-auto-flow: row;
  align-content: start;
  gap: 10px !important;
  padding: 14px !important;
}

.roster-player-card {
  --roster-accent: #96a1b2;
  --roster-glow: rgba(150,161,178,.16);
  position: relative;
  isolation: isolate;
  display: block;
  min-width: 0;
  height: 184px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-top: 2px solid var(--roster-accent);
  clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  background:
    linear-gradient(145deg,rgba(255,255,255,.055),transparent 34%),
    linear-gradient(180deg,rgba(20,25,33,.98),rgba(7,11,17,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 9px 20px rgba(0,0,0,.24),
    0 0 17px var(--roster-glow);
  transition: transform .18s ease, filter .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.roster-player-usa {
  --roster-accent: #ef3e52;
  --roster-glow: rgba(239,62,82,.14);
}

.roster-player-eu {
  --roster-accent: #3f70ff;
  --roster-glow: rgba(63,112,255,.15);
}

.roster-player-card::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,var(--roster-accent),transparent 4px),
    linear-gradient(135deg,rgba(255,255,255,.045),transparent 25%);
  opacity: .86;
}

.roster-player-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 84px;
  pointer-events: none;
  background: linear-gradient(180deg,transparent,rgba(5,8,13,.84) 28%,rgba(5,8,13,.99) 70%);
}

.roster-player-card:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  border-color: color-mix(in srgb,var(--roster-accent) 62%,white 10%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 12px 25px rgba(0,0,0,.30),
    0 0 23px var(--roster-glow);
}

.roster-player-visual {
  position: absolute;
  inset: 0 0 62px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 44%,color-mix(in srgb,var(--roster-accent) 14%,transparent),transparent 58%),
    linear-gradient(180deg,rgba(255,255,255,.018),transparent);
}

.roster-character-portrait {
  display: block;
  width: auto;
  height: 122px;
  max-width: 96%;
  margin-top: 4px;
  object-fit: contain;
  object-position: center top;
  filter: drop-shadow(0 8px 13px rgba(0,0,0,.48)) saturate(1.06) contrast(1.03);
  transform: scale(1.03);
  transform-origin: center top;
}

.roster-character-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 16px);
  height: 100px;
  margin-top: 12px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.08);
  color: #aeb6c3;
  font-family: "Barlow Condensed",Impact,sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.roster-player-copy {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  min-height: 62px;
  padding: 7px 8px 9px 10px;
}

/* Player handles get a real nameplate instead of a single-line headline. */
.roster-player-name {
  display: flex;
  align-items: flex-end;
  width: 100%;
  min-height: 30px;
  overflow: visible;
  color: #fff;
  font-family: "Barlow Condensed",Impact,sans-serif;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .005em;
  line-height: .94;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  text-shadow: 0 2px 9px rgba(0,0,0,.82);
}

/* JS assigns these only when a handle needs extra room. */
.roster-player-name.roster-name-medium { font-size: 13.5px; }
.roster-player-name.roster-name-long { font-size: 12px; letter-spacing: 0; }
.roster-player-name.roster-name-xlong { font-size: 10.8px; letter-spacing: 0; }

.roster-character-name {
  display: block;
  overflow: hidden;
  margin-top: 5px;
  color: #abb4c2;
  font-family: Inter,system-ui,sans-serif;
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: .055em;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Keep the rank badge design the user already liked, but resize it for a tile. */
.roster-player-card .rank-swatch {
  position: absolute !important;
  z-index: 4 !important;
  top: 8px !important;
  right: 7px !important;
  display: grid !important;
  grid-template-columns: 8px auto !important;
  align-items: center !important;
  gap: 4px !important;
  width: auto !important;
  min-width: 46px !important;
  height: 25px !important;
  min-height: 25px !important;
  padding: 0 6px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 5px !important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.075),transparent 34%),
    linear-gradient(180deg,rgba(24,30,39,.96),rgba(8,12,18,.96)) !important;
  box-shadow: 0 5px 12px rgba(0,0,0,.34),0 0 10px color-mix(in srgb,var(--rank-accent) 35%,transparent) !important;
  clip-path: polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px) !important;
}

.roster-player-card .rank-swatch::before {
  width: 3px !important;
}

.roster-player-card .rank-mark {
  width: 7px !important;
  height: 7px !important;
  border-width: 1px !important;
}

.roster-player-card .rank-mark::after {
  inset: 2px !important;
}

.roster-player-card .rank-label {
  font-size: 8px !important;
  letter-spacing: .025em !important;
}

.roster-status-badge {
  position: absolute;
  z-index: 4;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 6px;
  border: 1px solid rgba(66,247,166,.30);
  border-radius: 3px;
  color: var(--green);
  background: rgba(7,13,15,.78);
  font-family: Inter,system-ui,sans-serif;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.roster-empty-state {
  grid-column: 1 / -1;
  min-height: 174px;
  display: grid;
  place-items: center;
  padding: 28px 20px !important;
  border: 1px dashed rgba(255,255,255,.10);
  color: #98a2b1;
  background: rgba(5,9,14,.34);
}

/* Keep the boards readable before shrinking the cards too far. */
@media (max-width: 1180px) {
  .premium-players .teams-grid {
    grid-template-columns: 1fr !important;
  }

  .premium-players .player-list {
    grid-template-columns: repeat(5,minmax(0,1fr)) !important;
  }

  .roster-player-card {
    height: 190px;
  }

  .roster-character-portrait {
    height: 128px;
  }

  .roster-player-name { font-size: 16px; }
  .roster-player-name.roster-name-medium { font-size: 14.5px; }
  .roster-player-name.roster-name-long { font-size: 13px; }
  .roster-player-name.roster-name-xlong { font-size: 11.5px; }
}

@media (max-width: 760px) {
  .premium-players .player-list {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 9px !important;
    padding: 11px !important;
  }

  .roster-player-card {
    height: 184px;
  }

  .roster-character-portrait {
    height: 121px;
  }

  .roster-player-name { font-size: 15px; }
  .roster-player-name.roster-name-medium { font-size: 13.5px; }
  .roster-player-name.roster-name-long { font-size: 12px; }
  .roster-player-name.roster-name-xlong { font-size: 10.8px; }
}

@media (max-width: 500px) {
  .premium-players .player-list {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 8px !important;
    padding: 9px !important;
  }

  .roster-player-card {
    height: 178px;
  }

  .roster-character-portrait {
    height: 115px;
  }

  .roster-player-name { font-size: 14.5px; }
  .roster-player-name.roster-name-medium { font-size: 13px; }
  .roster-player-name.roster-name-long { font-size: 11.5px; }
  .roster-player-name.roster-name-xlong { font-size: 10.2px; }
}


/* ======================================================================
   KOJI DOJO v12.21 — SMART SINGLE-LINE PLAYER HANDLES
   Handles now stay intact. JS measures each rendered name and shrinks only
   the names that actually need it, instead of splitting usernames mid-word.
   ====================================================================== */
.roster-player-name {
  display: block !important;
  min-height: 0 !important;
  overflow: hidden !important;
  color: #fff !important;
  font-size: 13.5px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  text-overflow: clip !important;
}

/* Old length classes are intentionally neutralized; exact fitting is now
   based on the real rendered width of each handle. */
.roster-player-name.roster-name-medium,
.roster-player-name.roster-name-long,
.roster-player-name.roster-name-xlong {
  font-size: 13.5px !important;
  letter-spacing: .005em !important;
}

.roster-player-copy {
  min-height: 54px !important;
  padding: 7px 7px 9px 9px !important;
}

@media (max-width: 1180px) {
  .roster-player-name,
  .roster-player-name.roster-name-medium,
  .roster-player-name.roster-name-long,
  .roster-player-name.roster-name-xlong {
    font-size: 15px !important;
  }
}

@media (max-width: 760px) {
  .roster-player-name,
  .roster-player-name.roster-name-medium,
  .roster-player-name.roster-name-long,
  .roster-player-name.roster-name-xlong {
    font-size: 14px !important;
  }
}

@media (max-width: 500px) {
  .roster-player-name,
  .roster-player-name.roster-name-medium,
  .roster-player-name.roster-name-long,
  .roster-player-name.roster-name-xlong {
    font-size: 13px !important;
  }
}