:root {
  color-scheme: dark;
  --bg: #050812;
  --panel: #111827;
  --panel-2: #0a101c;
  --panel-3: #151e2d;
  --line: #27344a;
  --line-soft: #1c283b;
  --text: #f7f9fc;
  --muted: #9cabc0;
  --cyan: #61dff5;
  --violet: #b28cff;
  --amber: #f6c84e;
  --green: #58d6a2;
  --red: #ef7185;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 14% -8%, rgba(39, 98, 151, .24), transparent 31%),
    radial-gradient(circle at 86% 8%, rgba(111, 45, 162, .16), transparent 28%),
    linear-gradient(180deg, #050811, #02040a 52%, #070b15);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.modal-open { overflow: hidden; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
[hidden] { display: none !important; }

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  border-bottom: 1px solid #202a3d;
  background: rgba(2, 4, 10, .93);
  backdrop-filter: blur(16px);
}
.site-header-inner {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr);
  align-items: center;
  gap: 20px;
  min-height: 68px;
  padding: 0 18px;
}
.brand { display: flex; align-items: center; min-width: 0; }
.brand img { display: block; width: min(100%, 305px); height: auto; }
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a, .mobile-nav a {
  color: #b8c0cd;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.site-nav a:hover, .site-nav a.active, .mobile-nav a:hover, .mobile-nav a.active { color: #fff; }
.account { position: relative; justify-self: end; }
.login-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border: 0;
  border-radius: 9px;
  background: #5865f2;
  color: #fff;
  box-shadow: 0 1px 3px #0006;
  font-size: 14px;
  font-weight: 750;
  line-height: 1;
  text-decoration: none;
  transition: background .15s ease, box-shadow .15s ease;
}
.login-link:hover, .login-link:focus-visible { background: #4752c4; color: #fff; }
.login-link svg { width: 20px; height: 20px; flex: 0 0 auto; fill: currentColor; }
.account-button {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.account-button:hover { background: rgba(255,255,255,.05); }
.account-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #172238; }
.account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 110;
  width: 220px;
  padding: 6px;
  border: 1px solid #33415a;
  border-radius: 12px;
  background: #101827;
  box-shadow: 0 20px 45px rgba(0,0,0,.65);
}
.account-menu a, .account-menu button {
  display: block;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #e8edf5;
  font-size: 13px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.account-menu a:hover, .account-menu button:hover { background: #1b273b; }
.account-menu .logout { color: #ff9baa; }
.mobile-menu-button {
  display: none;
  width: 38px;
  height: 38px;
  border: 1px solid #34435d;
  border-radius: 9px;
  background: #111a2a;
  color: #fff;
  font-size: 20px;
}
.mobile-nav { display: none; padding: 0 14px 12px; }
.mobile-nav.open { display: block; }
.mobile-nav a { display: block; padding: 9px 10px; border-radius: 8px; }

.hub-shell { width: min(1220px, calc(100% - 36px)); margin: 0 auto; padding: 32px 0 76px; }
.eyebrow { color: var(--cyan); font-size: 11px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.hub-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  min-height: 270px;
  overflow: hidden;
  border: 1px solid #35506b;
  border-radius: 24px;
  background:
    linear-gradient(115deg, rgba(16, 43, 62, .96), rgba(10, 19, 35, .97) 47%, rgba(41, 19, 68, .95)),
    #0c1423;
  box-shadow: 0 26px 70px rgba(0,0,0,.42);
}
.hub-hero:before {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 38%, rgba(69, 220, 247, .05), rgba(186, 101, 255, .11));
  content: "";
  pointer-events: none;
}
.hero-copy { position: relative; z-index: 2; align-self: center; padding: 38px 42px; }
.hero-copy h1 { max-width: 760px; margin: 7px 0 17px; font-size: clamp(38px, 4vw, 50px); line-height: 1.02; letter-spacing: -.045em; white-space: nowrap; }
.hero-features { display: grid; width: max-content; max-width: 100%; grid-template-columns: max-content max-content; align-items: center; gap: 9px 24px; margin: 0; padding: 0; color: #d3deeb; font-size: 13px; font-weight: 750; list-style: none; }
.hero-features li { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.hero-features li > span { display: grid; width: 17px; height: 17px; flex: none; place-items: center; border: 1px solid rgba(88,214,162,.5); border-radius: 50%; background: rgba(88,214,162,.12); color: #8aebbd; box-shadow: 0 0 12px rgba(88,214,162,.24); font-size: 10px; font-weight: 950; line-height: 1; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.hero-atom-cta { position: relative; isolation: isolate; min-height: 48px; overflow: hidden; padding: 0 20px; box-shadow: 0 14px 34px rgba(49,204,237,.26); }
.hero-atom-cta::before { position: absolute; z-index: -1; top: -70%; bottom: -70%; left: -45%; width: 34%; background: rgba(255,255,255,.38); content: ""; transform: rotate(18deg) translateX(-180%); transition: transform .48s ease; }
.hero-cta-label { position: relative; }
.hero-cta-arrow { position: relative; font-size: 19px; line-height: 1; transition: transform .18s ease; }
.button {
  display: inline-flex;
  min-height: 41px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 15px;
  border: 1px solid #34445e;
  border-radius: 11px;
  background: #111b2b;
  color: #eef4fb;
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.button:hover { border-color: #55708f; background: #18253a; transform: translateY(-1px); }
.button.primary { border-color: #67e8f9; background: linear-gradient(135deg, #37d7ee, #56aeea); color: #021119; box-shadow: 0 12px 28px rgba(49, 204, 237, .2); }
.button.registration-cta { min-height: 44px; padding: 0 20px; border-color: #52d99a; background: linear-gradient(135deg, #22c978, #16a864); color: #02150d; font-weight: 950; box-shadow: 0 12px 28px rgba(34,201,120,.24); }
.button.registration-cta:hover { border-color: #8af0bd; box-shadow: 0 15px 34px rgba(34,201,120,.32); transform: translateY(-1px); }
.button.quiet { background: rgba(17, 27, 43, .84); }
.button.danger { border-color: rgba(248,113,113,.72); background: #dc3545; color: #fff; }
.button.compact { min-height: 31px; padding: 0 10px; border-radius: 9px; font-size: 10px; }
.button.danger-text { border-color: rgba(248,113,113,.34); color: #fca5a5; }
.button:disabled { opacity: .55; cursor: wait; transform: none; }
.button.hero-atom-cta:hover { border-color: #b6f5ff; background: linear-gradient(135deg, #58e4f4, #6bb8f0); box-shadow: 0 17px 38px rgba(49,204,237,.34), 0 0 0 3px rgba(97,223,245,.08); transform: translateY(-2px) scale(1.012); }
.discord-login-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border: 0; border-radius: 9px; background: #5865f2; color: #fff; box-shadow: 0 1px 3px #0006; font-size: 14px; font-weight: 750; line-height: 1; text-decoration: none; transition: background .15s ease,box-shadow .15s ease; }
.discord-login-button:hover, .discord-login-button:focus-visible { background: #4752c4; color: #fff; }
.discord-login-button svg { width: 20px; height: 20px; flex: 0 0 auto; fill: currentColor; }
.hero-atom-cta:hover::before { transform: rotate(18deg) translateX(520%); }
.hero-atom-cta:hover .hero-cta-arrow { transform: translateX(3px); }
.hero-atom-cta:active { transform: translateY(0) scale(.985); }
.hero-atom-cta:focus-visible { outline: 3px solid rgba(97,223,245,.38); outline-offset: 3px; }
.hero-visual { position: relative; display: grid; min-height: 270px; place-items: center; }
.hero-visual > img { position: relative; z-index: 2; width: 185px; max-width: 54%; transform: translateY(-9px); filter: drop-shadow(0 24px 28px rgba(0,0,0,.7)); }
.hero-orbit { position: absolute; border: 1px solid rgba(97, 223, 245, .22); border-radius: 50%; }
.orbit-one { width: 300px; height: 168px; transform: rotate(-20deg); }
.orbit-two { width: 215px; height: 290px; border-color: rgba(178, 140, 255, .22); transform: rotate(34deg); }
.hero-proof {
  position: absolute;
  right: 20px;
  bottom: 16px;
  z-index: 3;
  display: flex;
  min-width: 194px;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid rgba(130, 118, 211, .48);
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(14,19,39,.94), rgba(17,10,35,.9));
  box-shadow: 0 13px 32px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
}
.hero-proof-discord { display: grid; width: 31px; height: 31px; flex: none; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: #5865f2; box-shadow: 0 0 18px rgba(88,101,242,.28); }
.hero-proof-discord img { display: block; width: 19px; height: 19px; object-fit: contain; }
.hero-proof-copy { display: grid; gap: 2px; min-width: 0; }
.hero-proof strong { color: #f2f5fb; font-size: 10px; letter-spacing: .02em; text-transform: uppercase; }
.hero-proof small { color: #aeb9cc; font-size: 8px; white-space: nowrap; }

.tournaments-motion-ready .hub-hero {
  animation: hub-hero-enter .7s cubic-bezier(.22,1,.36,1) both;
}

.tournaments-motion-ready .hero-copy > * {
  animation: hub-copy-enter .68s cubic-bezier(.22,1,.36,1) both;
}

.tournaments-motion-ready .hero-copy > .eyebrow { animation-delay: .08s; }
.tournaments-motion-ready .hero-copy > h1 { animation-delay: .2s; }
.tournaments-motion-ready .hero-copy > .hero-features { animation-delay: .34s; }
.tournaments-motion-ready .hero-copy > .hero-actions { animation-delay: .48s; }
.tournaments-motion-ready .hero-visual > img { animation: hub-logo-enter .82s cubic-bezier(.22,1,.36,1) .24s both, hub-logo-float 4.8s ease-in-out 1.2s infinite alternate; }
.tournaments-motion-ready .orbit-one { animation: hub-orbit-one 18s linear infinite; }
.tournaments-motion-ready .orbit-two { animation: hub-orbit-two 22s linear infinite; }
.tournaments-motion-ready .hero-proof { animation: hub-proof-enter .72s cubic-bezier(.22,1,.36,1) .55s both; }
.tournaments-motion-ready .browse { animation: hub-browse-enter .72s cubic-bezier(.22,1,.36,1) .64s both; }

@keyframes hub-hero-enter {
  from { opacity: .35; filter: blur(5px); transform: translateY(18px) scale(.988); }
  to { opacity: 1; filter: blur(0); transform: none; }
}

@keyframes hub-copy-enter {
  from { opacity: 0; filter: blur(4px); transform: translateY(15px); }
  to { opacity: 1; filter: blur(0); transform: none; }
}

@keyframes hub-logo-enter {
  from { opacity: 0; filter: blur(8px) drop-shadow(0 24px 28px rgba(0,0,0,.7)); transform: translateY(12px) scale(.82) rotate(-5deg); }
  to { opacity: 1; filter: blur(0) drop-shadow(0 24px 28px rgba(0,0,0,.7)); transform: translateY(-9px) scale(1); }
}

@keyframes hub-logo-float {
  from { transform: translateY(-10px); }
  to { transform: translateY(-3px); }
}

@keyframes hub-orbit-one {
  from { transform: rotate(-20deg); }
  to { transform: rotate(340deg); }
}

@keyframes hub-orbit-two {
  from { transform: rotate(34deg); }
  to { transform: rotate(-326deg); }
}

@keyframes hub-proof-enter {
  from { opacity: 0; transform: translateY(13px) scale(.96); }
  to { opacity: 1; transform: none; }
}

@keyframes hub-browse-enter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

.browse { margin-top: 28px; padding: 22px; border: 1px solid #28364c; border-radius: 22px; background: rgba(12, 18, 31, .86); box-shadow: 0 24px 65px rgba(0,0,0,.32); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.section-heading h2 { margin: 4px 0 3px; font-size: 27px; }
.section-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.refresh-button span { font-size: 18px; line-height: 1; }
.tab-list { display: flex; gap: 7px; margin-top: 19px; padding-bottom: 14px; overflow-x: auto; border-bottom: 1px solid var(--line-soft); scrollbar-width: none; }
.tab-list::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #aeb9c9;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
}
.tab span { display: grid; min-width: 22px; height: 22px; place-items: center; padding: 0 5px; border-radius: 999px; background: #1a2638; color: #cbd5e1; font-size: 10px; }
.tab:hover { background: rgba(255,255,255,.035); color: #fff; }
.tab.active { border-color: rgba(97,223,245,.46); background: rgba(37, 129, 151, .15); color: #b9f6ff; }
.tab.active span { background: rgba(34,211,238,.18); color: #b9f6ff; }

.filters { display: grid; grid-template-columns: minmax(230px, 1.6fr) repeat(4, minmax(125px, .7fr)) auto; gap: 10px; align-items: end; margin: 16px 0 18px; }
.filters label { display: grid; min-width: 0; gap: 6px; color: #93a4ba; font-size: 9px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.filters input, .filters select {
  width: 100%;
  height: 42px;
  min-width: 0;
  padding: 0 12px;
  border: 1px solid #2c3a51;
  border-radius: 11px;
  outline: none;
  background: #111a2b;
  color: #edf2f8;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.filters input:focus, .filters select:focus { border-color: #51cde4; box-shadow: 0 0 0 3px rgba(81,205,228,.1); }
.input-shell { position: relative; display: block; }
.input-shell > span { position: absolute; top: 50%; left: 13px; color: #71839b; font-size: 18px; transform: translateY(-54%); }
.input-shell input { padding-left: 37px; }
.clear-filters { height: 42px; padding: 0 12px; border: 1px solid #2b394f; border-radius: 11px; background: #111925; color: #b8c4d4; font-size: 11px; font-weight: 850; cursor: pointer; }
.clear-filters:hover { border-color: #50647f; color: #fff; }

.notice { margin: 0 0 16px; padding: 13px 15px; border: 1px solid #316879; border-radius: 12px; background: #0d2631; color: #c9f5ff; font-size: 12px; }
.notice.error { border-color: #823447; background: #35131d; color: #ffd0d8; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tournament-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 320px;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid #26364c;
  border-radius: 17px;
  background: linear-gradient(160deg, #131d2c, #090f1b);
  box-shadow: 0 15px 35px rgba(0,0,0,.24);
  cursor: pointer;
  transition: transform .17s ease, border-color .17s ease, box-shadow .17s ease;
}
.tournament-card:hover, .tournament-card:focus-visible { border-color: rgba(97,223,245,.54); box-shadow: 0 20px 42px rgba(0,0,0,.36), 0 0 25px rgba(61,205,232,.07); transform: translateY(-2px); outline: none; }
.card-media { position: relative; height: 120px; overflow: hidden; isolation: isolate; background: #0b1321; }
.card-media-art { position: absolute; inset: -1px; z-index: 0; overflow: hidden; backface-visibility: hidden; transform: translateZ(0) scale(1); transform-origin: center; transition: transform .3s ease; will-change: transform; }
.card-media-art > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-media-art > img.logo-fallback { padding: 0; object-fit: cover; object-position: center; background: #080e18; }
.card-media-art:after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,6,12,.08), rgba(5,9,16,.15) 45%, rgba(8,14,24,.92)); content: ""; }
.tournament-card:hover .card-media-art { transform: translateZ(0) scale(1.035); }
.card-flags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.chip { display: inline-flex; min-height: 24px; align-items: center; padding: 0 8px; border: 1px solid rgba(148,163,184,.3); border-radius: 999px; background: rgba(5,10,20,.78); color: #dce7f5; font-size: 10px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; backdrop-filter: blur(8px); }
.card-flags .chip { min-height: 21px; padding: 0 7px; font-size: 9px; }
.chip.public { border-color: rgba(97,223,245,.47); color: #aaf4ff; }
.chip.community { border-color: rgba(88,214,162,.5); color: #a7f3d0; }
.chip.private { border-color: rgba(178,140,255,.52); color: #ddd0ff; }
.chip.live { border-color: rgba(97,223,245,.55); background: rgba(13,68,80,.82); color: #c4f8ff; }
.chip.complete { border-color: rgba(88,214,162,.48); color: #b3f5d8; }
.chip.cancelled { border-color: rgba(239,113,133,.5); color: #ffc0cb; }
.chip.mine { border-color: rgba(246,200,78,.5); color: #ffe596; }
.card-body { display: flex; flex: 1; flex-direction: column; padding: 11px 13px 12px; }
.card-identity { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 11px; align-items: center; min-width: 0; }
.card-identity-icon { width: 58px; height: 58px; overflow: hidden; border: 2px solid #1f3047; border-radius: 14px; background: #172238; box-shadow: 0 8px 20px rgba(0,0,0,.32); }
.card-identity-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-identity-copy { min-width: 0; }
.card-title { margin: 0; overflow: hidden; font-size: 17px; line-height: 1.22; text-overflow: ellipsis; white-space: nowrap; }
.card-host-name { margin-top: 4px; overflow: hidden; color: #91a2b9; font-size: 10px; font-weight: 850; letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.card-overview { display: grid; grid-template-columns: minmax(0, 1fr) 82px; gap: 8px; margin-top: 11px; }
.card-specs { min-width: 0; overflow: hidden; border: 1px solid #243248; border-radius: 11px; background: rgba(8,14,24,.72); }
.card-spec { display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 8px; align-items: baseline; min-width: 0; padding: 5px 8px; border-bottom: 1px solid rgba(148,163,184,.10); }
.card-spec:last-child { border-bottom: 0; }
.card-spec span,.card-player-stat span { color: #8395ad; font-size: 9px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.card-spec strong { min-width: 0; color: #e9eef6; font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.card-player-stat { display: grid; align-content: center; justify-items: center; min-width: 0; padding: 8px; border: 1px solid rgba(34,211,238,.25); border-radius: 11px; background: rgba(34,211,238,.07); text-align: center; }
.card-player-stat strong { margin-top: 4px; color: #a5f3fc; font-size: 23px; line-height: 1; }
.card-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-top: auto; padding-top: 8px; }
.card-times { display: grid; min-width: 0; gap: 4px; }
.card-time { min-width: 0; }
.card-time span { display: block; color: #91a2b8; font-size: 10px; }
.card-time strong { display: block; margin-top: 1px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.card-open { display: inline-flex; align-items: center; align-self: end; gap: 5px; color: #aef4ff; font-size: 12px; font-weight: 850; white-space: nowrap; }
.empty-state { grid-column: 1 / -1; display: grid; min-height: 245px; place-items: center; padding: 28px; border: 1px dashed #2e3d54; border-radius: 16px; background: rgba(7,12,22,.55); text-align: center; }
.empty-state img { width: 76px; opacity: .8; }
.empty-state h3 { margin: 13px 0 5px; font-size: 18px; }
.empty-state p { max-width: 480px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.skeleton { min-height: 320px; overflow: hidden; border: 1px solid #26364c; border-radius: 17px; background: #101827; }
.skeleton:after { display: block; width: 45%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); content: ""; animation: shimmer 1.25s infinite; }
@keyframes shimmer { from { transform: translateX(-120%); } to { transform: translateX(330%); } }
.pagination-row { display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; margin-top: 20px; }
.pagination-pages { display: flex; align-items: center; gap: 5px; }
.pagination-direction, .pagination-page {
  display: inline-grid;
  min-width: 38px;
  height: 38px;
  place-items: center;
  padding: 0 10px;
  border: 1px solid #2c3b52;
  border-radius: 10px;
  background: #101a2a;
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}
.pagination-direction:hover, .pagination-page:hover { border-color: #506a88; background: #17243a; color: #fff; }
.pagination-page.active { border-color: rgba(97,223,245,.58); background: rgba(34,211,238,.14); color: #b9f6ff; }
.pagination-direction:disabled { opacity: .42; cursor: default; }
.pagination-direction:disabled:hover { border-color: #2c3b52; background: #101a2a; color: #cbd5e1; }
.pagination-ellipsis { display: grid; width: 24px; height: 38px; place-items: center; color: #71839b; }
.pagination-status { flex-basis: 100%; color: var(--muted); font-size: 11px; text-align: center; }

.site-footer { padding: 24px; border-top: 1px solid #1f2937; background: #000; color: #6b7280; font-size: 14px; text-align: center; }
.site-footer-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.site-footer-links { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; font-size: 14px; }
.site-footer a { color: inherit; text-decoration: none; transition: color .15s ease; }
.site-footer a:hover { color: #67e8f9; }
.site-footer p { margin: 0; }

.modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 18px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0, 3, 9, .86); backdrop-filter: blur(10px); }
.modal-dialog { position: relative; z-index: 1; width: min(1360px, 100%); max-height: calc(100vh - 36px); overflow: hidden; border: 1px solid #34445e; border-radius: 22px; background: #0b1220; box-shadow: 0 35px 90px rgba(0,0,0,.75); }
.modal-close { position: absolute; top: 13px; right: 13px; z-index: 10; display: grid; width: 38px; height: 38px; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 11px; background: rgba(6,10,18,.7); color: #eef3fb; cursor: pointer; backdrop-filter: blur(8px); }
.modal-close svg { display: block; width: 16px; height: 16px; overflow: visible; }
.modal-close path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.modal-close:hover { background: #1d2a3d; }
.modal-loading { display: grid; min-height: 410px; place-items: center; align-content: center; gap: 12px; color: #cbd5e1; }
.spinner { width: 28px; height: 28px; border: 3px solid #34445d; border-top-color: var(--cyan); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.modal-hero { position: relative; min-height: 170px; background: #101827; }
.modal-hero[hidden] { display: none; }
.modal-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.modal-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,7,13,.04), rgba(5,9,17,.48)); }
.about-tournament { margin-top: 16px; padding: 0; overflow: hidden; }
.modal-identity { display: flex; align-items: center; gap: 14px; padding: 15px 17px; }
.modal-hero[hidden] + .modal-body .modal-identity { padding-right: 62px; }
.modal-identity > img { width: 56px; height: 56px; flex: none; border: 1px solid #364b68; border-radius: 15px; object-fit: cover; background: #111c2d; }
.modal-identity-copy { min-width: 0; }
.modal-identity-label { color: #85a5bf; font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.modal-identity h2 { margin: 3px 0; font-size: clamp(20px, 2.5vw, 29px); line-height: 1.2; letter-spacing: -.025em; overflow-wrap: anywhere; }
.modal-identity p { margin: 2px 0 0; color: #adbacb; font-size: 11px; overflow-wrap: anywhere; }
.modal-identity #modalClass { color: #c6d7e9; }
.about-tournament-details { border-top: 1px solid #26364c; }
.about-tournament-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 17px; list-style: none; cursor: pointer; }
.about-tournament-details > summary::-webkit-details-marker { display: none; }
.about-tournament-details > summary:hover { background: rgba(97,223,245,.04); }
.about-tournament-details > summary:focus-visible { outline: 2px solid #67e8f9; outline-offset: -3px; }
.about-tournament-details > summary strong, .about-tournament-details > summary small { display: block; }
.about-tournament-details > summary strong { font-size: 13px; }
.about-tournament-details > summary small { margin-top: 3px; color: #8498b0; font-size: 10px; }
.about-toggle-icon { display: grid; width: 28px; height: 28px; flex: none; place-items: center; border: 1px solid #34445e; border-radius: 8px; color: #b8f5ff; transition: transform .18s ease; }
.about-tournament-details[open] .about-toggle-icon { transform: rotate(180deg); }
.about-tournament-body { padding: 0 17px 17px; }
.about-tournament-body > p { margin: 0; color: #a9b6c8; font-size: 12px; line-height: 1.55; }
#modalContent { max-height: calc(100vh - 36px); overflow-y: auto; scrollbar-color: #317d91 transparent; scrollbar-width: thin; }
.modal-body { max-height: none; overflow: visible; padding: 0 22px 24px; }
.modal-tabs { position: sticky; top: 0; z-index: 8; display: flex; gap: 7px; padding: 13px 0; border-bottom: 1px solid #223047; background: #0b1220; }
.modal-tabs button { min-height: 36px; padding: 0 12px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #9cabc0; font-size: 11px; font-weight: 850; cursor: pointer; }
.modal-tabs button.active { border-color: rgba(97,223,245,.42); background: rgba(39,128,148,.16); color: #b8f5ff; }
.modal-panel { display: none; padding-top: 16px; }
.modal-panel.active { display: block; }
.tournament-overview-bracket { margin-top: 14px; }
.about-tournament + #modal-details > .tournament-overview-bracket:first-child { margin-top: 0; }
.detail-card { min-width: 0; padding: 16px; border: 1px solid #26364c; border-radius: 14px; background: #0e1726; }
.detail-card h3 { margin: 0 0 7px; font-size: 14px; }
.detail-card > p { margin: 0; color: #a9b6c8; font-size: 12px; line-height: 1.55; }
.detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 14px; }
.detail-stat { min-width: 0; padding: 10px; border: 1px solid #26364c; border-radius: 11px; background: #0a111d; }
.detail-stat span { display: block; color: #75869d; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.detail-stat strong { display: block; margin-top: 4px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.detail-stat.visibility-stat strong { display: flex; align-items: center; gap: 6px; overflow: visible; white-space: normal; }
.detail-stat.visibility-stat .chip { display: inline-flex; min-height: 20px; padding: 0 7px; color: #dce7f5; font-size: 9px; letter-spacing: .04em; }
.detail-stat.visibility-stat .chip.public { color: #aaf4ff; }
.detail-stat.visibility-stat .chip.community { color: #a7f3d0; }
.detail-stat.visibility-stat .chip.private { color: #ddd0ff; }
.detail-stat.visibility-stat .chip.mine { color: #ffe596; }
.detail-stat.visibility-stat .chip.live { color: #c4f8ff; }
.detail-stat.visibility-stat .chip.complete { color: #b3f5d8; }
.detail-stat.visibility-stat .chip.cancelled { color: #ffc0cb; }
.detail-actions { display: grid; gap: 8px; margin-top: 14px; }
.detail-actions .button { width: 100%; }
.about-actions { display: flex; justify-content: flex-start; }
.about-actions .button { width: auto; }
.participation-card { margin-bottom: 14px; border-color: rgba(34,211,238,.3); background: linear-gradient(135deg, rgba(13,35,50,.98), rgba(14,23,38,.98)); }
.participation-heading, .participation-status-row, .participation-member { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.participation-heading { margin-bottom: 13px; }
.participation-heading h3 { margin: 3px 0 0; font-size: 17px; }
.participation-card > p { margin: 0 0 12px; color: #a9b6c8; font-size: 12px; line-height: 1.55; }
.participation-card > .participation-team-note { margin: 10px 2px 12px; }
.participation-status-row { padding: 11px 12px; border: 1px solid rgba(148,163,184,.17); border-radius: 11px; background: rgba(3,10,19,.32); }
.participation-status-row strong, .participation-status-row span { display: block; }
.participation-status-row span:not(.chip) { margin-top: 3px; color: #8fa0b6; font-size: 10px; }
.participation-feedback { margin-bottom: 12px; padding: 10px 12px; border: 1px solid rgba(34,211,238,.28); border-radius: 10px; background: rgba(34,211,238,.08); color: #b8f5ff; font-size: 11px; font-weight: 750; }
.participation-feedback.success { border-color: rgba(52,211,153,.34); background: rgba(16,185,129,.09); color: #a7f3d0; }
.participation-feedback.error { border-color: rgba(248,113,113,.38); background: rgba(239,68,68,.09); color: #fecaca; }
.participation-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.participation-choice { min-width: 0; padding: 15px; border: 1px solid #34445e; border-radius: 12px; background: rgba(5,12,22,.46); color: #e8eef8; text-align: left; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.participation-choice:hover { transform: translateY(-1px); border-color: rgba(97,223,245,.58); background: rgba(34,211,238,.07); }
.participation-choice.selected { border-color: #67e8f9; background: rgba(34,211,238,.12); box-shadow: 0 0 0 3px rgba(34,211,238,.07); }
.participation-choice:disabled { opacity: .52; cursor: not-allowed; transform: none; }
.participation-choice strong, .participation-choice span { display: block; }
.participation-choice strong { font-size: 13px; }
.participation-choice span { margin-top: 5px; color: #91a2b8; font-size: 10px; line-height: 1.45; }
.participation-team-editor { margin-top: 12px; }
.participation-team-editor label > span:first-child { display: block; margin: 0 0 6px; color: #93a4ba; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.participation-choice-form { padding: 13px; border: 1px solid rgba(97,223,245,.22); border-radius: 11px; background: rgba(3,10,19,.3); }
.participation-choice-form > p { margin: 8px 1px 0; color: #8294aa; font-size: 10px; line-height: 1.45; }
.participation-input-row { display: flex; gap: 8px; }
.participation-input-row input { width: 100%; min-width: 0; min-height: 41px; padding: 0 12px; border: 1px solid #34445e; border-radius: 10px; outline: none; background: #09111e; color: #eef4fb; font: inherit; }
.participation-input-row input:focus { border-color: #67e8f9; box-shadow: 0 0 0 3px rgba(34,211,238,.1); }
.participation-input-row .participation-submit-button { min-width: 126px; min-height: 44px; flex: 0 0 auto; padding: 0 20px; border-width: 2px; border-radius: 11px; white-space: nowrap; box-shadow: 0 12px 26px rgba(49,204,237,.28), inset 0 1px rgba(255,255,255,.22); }
.participation-team-size-chip { min-height: 32px; padding: 0 13px; flex: 0 0 auto; font-size: 11px; }
.participation-code-input { letter-spacing: .13em; text-transform: uppercase; }
.participation-join-code { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 11px 12px; border: 1px solid rgba(97,223,245,.3); border-radius: 11px; background: rgba(34,211,238,.07); }
.participation-join-code span, .participation-join-code strong { display: block; }
.participation-join-code span { color: #8da0b8; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.participation-join-code strong { margin-top: 3px; color: #d7f9ff; font-size: 15px; letter-spacing: .12em; }
.participation-roster { display: grid; gap: 8px; margin-top: 12px; }
.participation-member { min-width: 0; padding: 9px 10px; border: 1px solid rgba(148,163,184,.14); border-radius: 10px; background: rgba(5,12,22,.38); }
.participation-member > img { width: 31px; height: 31px; flex: none; border-radius: 50%; object-fit: cover; background: #1a2639; }
.participation-member > div:nth-child(2) { min-width: 0; flex: 1; }
.participation-member strong, .participation-member span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.participation-member strong { font-size: 11px; }
.participation-member span { margin-top: 2px; color: #8495ab; font-size: 9px; }
.participation-member-actions, .participation-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.participation-actions { margin-top: 12px; }
.participation-confirm-layer { position: fixed; inset: 0; z-index: 600; display: grid; place-items: center; padding: 18px; background: rgba(0,3,9,.78); backdrop-filter: blur(8px); }
.participation-confirm { width: min(520px,100%); overflow: hidden; border: 1px solid #34445e; border-radius: 16px; background: #0b1220; box-shadow: 0 28px 80px rgba(0,0,0,.72); }
.participation-confirm-head { position: relative; display: flex; min-height: 66px; align-items: center; padding: 16px 64px 16px 18px; border-bottom: 1px solid #223047; }
.participation-confirm-head h3 { margin: 0; font-size: 17px; }
.participation-confirm .compact-close { top: 13px; right: 13px; width: 38px; height: 38px; }
.participation-confirm > p { margin: 0; padding: 17px 18px; color: #a9b6c8; font-size: 12px; line-height: 1.55; }
.participation-confirm-actions { display: flex; justify-content: flex-end; gap: 9px; padding: 14px 18px 18px; border-top: 1px solid #223047; }
.teams-disclosure { margin-top: 14px; overflow: hidden; border: 1px solid #26364c; border-radius: 14px; background: #0e1726; }
.teams-disclosure > summary { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 12px 14px; cursor: pointer; list-style: none; }
.teams-disclosure > summary::-webkit-details-marker { display: none; }
.teams-disclosure > summary:hover { background: rgba(34,211,238,.035); }
.teams-disclosure-copy { min-width: 0; flex: 1; }
.teams-disclosure-copy strong { display: block; color: #e8eef8; font-size: 14px; }
.teams-disclosure-copy span { display: block; margin-top: 3px; color: #8fa0b6; font-size: 11px; }
.teams-count { display: inline-flex; min-height: 24px; align-items: center; padding: 0 9px; border: 1px solid rgba(34,211,238,.28); border-radius: 999px; background: rgba(34,211,238,.08); color: #a5f3fc; font-size: 10px; font-weight: 850; white-space: nowrap; }
.teams-chevron { color: #8da0b8; font-size: 18px; transition: transform .16s ease; }
.teams-disclosure[open] .teams-chevron { transform: rotate(180deg); }
.teams-disclosure-body { padding: 0 14px 14px; border-top: 1px solid #223047; }
.teams-disclosure-body .teams-grid, .teams-disclosure-body .empty-state { margin-top: 14px; }
.teams-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.details-team-grid { align-items: stretch; }
.details-team-card { width: 100%; min-width: 0; min-height: 190px; cursor: default; }
.details-team-card .ab2-team-card-top { padding-right: 0; }
.without-team-logo .ab2-team-card-top { grid-template-columns: minmax(0,1fr); }
.details-team-card.has-team-status .ab2-team-card-top { padding-right: 5.5rem; }
.details-team-card.random-team-card .ab2-team-card-top { display: block; }
.public-team-division { display: flex; min-height: 35px; align-items: center; justify-content: space-between; gap: 12px; margin: -.75rem -.75rem .75rem; padding: 7px .75rem; border-bottom: 1px solid rgba(34,211,238,.22); border-radius: .95rem .95rem 0 0; background: linear-gradient(90deg, rgba(34,211,238,.12), rgba(59,130,246,.06)); }
.public-team-division > strong { overflow: hidden; color: #c9f7ff; font-size: 10px; font-weight: 900; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.public-team-division-mmr { display: inline-flex; flex: none; align-items: baseline; gap: 5px; color: #8295ad; font-size: 8px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.public-team-division-mmr strong { color: #f0f7ff; font-size: 10px; }
.public-team-card .ab2-team-badges, .details-team-card .ab2-team-badges { top: 3.45rem; right: .75rem; }
.public-team-roster-title { margin-top: 13px; padding-top: 10px; border-top: 1px solid rgba(148,163,184,.14); color: #71839b; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.public-team-roster-title + .ab2-roster { margin-top: 5px; }
.team-tile { min-width: 0; padding: 13px; border: 1px solid #26364c; border-radius: 13px; background: #0e1726; }
.team-tile h3 { margin: 0 0 10px; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.team-player { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 0; color: #c8d4e3; font-size: 11px; }
.team-player img { width: 25px; height: 25px; flex: none; border-radius: 50%; object-fit: cover; background: #1a2639; }
.team-player span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-empty { color: #7f8fa5; font-size: 10px; }
.bracket-panel .atom-bracket { min-width: 0; }
.bracket-panel .ab2-division { margin-top: 0; }
.bracket-panel .ab2-division + .ab2-division { margin-top: 24px; }
.bracket-panel .public-team-rail-shell { margin-bottom: 14px; }
.bracket-panel .ab2-division > .public-team-rail-shell { margin: 12px 12px 0; border-radius: 12px; }
.bracket-panel .public-team-card { flex-basis: 304px; min-height: 190px; }
.bracket-panel .public-team-card .ab2-team-card-top { padding-right: 0; }
.bracket-panel .public-team-card.has-team-status .ab2-team-card-top { padding-right: 5.5rem; }
.bracket-panel .public-team-card.random-team-card .ab2-team-card-top { display: block; }
.bracket-panel .public-team-rail { cursor: grab; touch-action: pan-y; }
.bracket-panel .public-team-rail.dragging { cursor: grabbing; }
.bracket-panel .public-team-rail.dragging .public-team-card { cursor: grabbing; }
.bracket-panel .public-team-rail img { -webkit-user-drag: none; user-select: none; }
.public-team-player { min-height: 27px; }
.public-team-player .ab2-player-copy small { color: #8fa0b6; }
.public-rank-tag { display: inline-flex; align-items: center; gap: 3px; padding: 1px 4px; border: 1px solid rgba(83,214,255,.25); border-radius: 5px; background: rgba(83,214,255,.08); color: #cceeff; font-weight: 750; vertical-align: middle; }
.public-rank-tag[style] { border-color: var(--rank-tone); background: color-mix(in srgb,var(--rank-tone) 14%,transparent); box-shadow: inset 2px 0 var(--rank-tone); color: color-mix(in srgb,var(--rank-tone) 48%,white); }
.public-rank-tag img { width: 13px; height: 13px; object-fit: contain; flex: none; }
.bracket-panel .ab2-team-inspector { display: none !important; }
.bracket-panel .atom-bracket.has-inspector .ab2-workspace { grid-template-columns: minmax(0, 1fr); }
.bracket-panel .ab2-rounds { gap: 44px; }
.bracket-panel .ab2-bracket-scroll { padding-top: 14px; }
.bracket-panel .ab2-round { width: var(--tournament-round-width, 320px); flex-basis: var(--tournament-round-width, 320px); }
.bracket-panel .ab2-match { height: calc(var(--ab2-match-height, 322px) + 8px); min-height: calc(var(--ab2-match-height, 322px) + 8px); }
.bracket-panel .ab2-side { height: calc(var(--ab2-side-height, 132px) + 4px); min-height: calc(var(--ab2-side-height, 132px) + 4px); grid-template-columns: minmax(82px, var(--tournament-team-column, 96px)) minmax(112px, 1fr) 58px; }
.bracket-panel .ab2-side-summary { display: flex; min-height: 100%; align-items: center; }
.bracket-panel .ab2-side-identity { width: 100%; }
.bracket-panel .ab2-side-team-stats { display: grid; grid-template-columns: max-content minmax(0, 1fr); justify-items: start; align-content: center; gap: 3px 0; margin-top: 4px; overflow: visible; white-space: normal; }
.bracket-panel .ab2-side-team-stats > span { display: block; max-width: 100%; line-height: 1.15; white-space: nowrap; }
.bracket-panel .ab2-side-team-stats > span:not(.ab2-place-badge) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bracket-panel .ab2-side-team-stats .ab2-place-badge { grid-column: 1 / -1; width: max-content; min-height: 15px; padding: 0 5px; margin: 0; font-size: 7px; line-height: 1; }
.bracket-panel .ab2-side-team-stats .ab2-place-badge::before { display: none; margin: 0; content: none; }
.bracket-panel .ab2-score.result-win { color: #6ee7b7; }
.bracket-panel .ab2-score.result-loss { color: #fda4af; }
.bracket-export-button { flex: none; min-height: 30px; padding: 0 10px; font-size: 9px; letter-spacing: 0; text-transform: none; }
.bracket-export-host { position: absolute; top: 0; left: -100000px; z-index: -1; pointer-events: none; }
.bracket-export-root { box-sizing: border-box; padding: 0; background: #060b15; color: #e5eefb; font-family: Arial, sans-serif; }
.bracket-export-root * { box-sizing: border-box; }
.bracket-export-root .ab2-division-head { min-height: 72px; }
.bracket-export-root .ab2-division-head > :first-child { min-width: 0; flex: 1 1 0; }
.bracket-export-root .ab2-section-title { font-size: 18px; white-space: nowrap; }
.bracket-export-root .ab2-division-meta { display: flex; min-width: 205px; flex: none; justify-content: flex-end; }
.bracket-export-root .ab2-match-head > span:first-child { min-width: 0; flex: 1 1 auto; }
.bracket-export-root.bracket-export-compact .ab2-rounds { width: 100%; justify-content: center; }
.bracket-export-brand { display: inline-flex; align-items: center; justify-content: flex-end; gap: 9px; color: #c7d2e2; font-size: 13px; font-weight: 850; white-space: nowrap; }
.bracket-export-brand span { display: inline-block; min-width: 138px; }
.bracket-export-brand img { display: block; width: 42px; height: 42px; object-fit: contain; image-rendering: auto; }
.bracket-export-root .ab2-bracket-scroll { overflow: visible !important; }
.bracket-export-root .ab2-match { box-shadow: none; }

@media (max-width: 1060px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters { grid-template-columns: minmax(240px, 1.6fr) repeat(2, minmax(130px, .7fr)); }
  .clear-filters { grid-column: auto; }
  .teams-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .site-header-inner { grid-template-columns: 1fr auto auto; min-height: 62px; gap: 9px; padding: 0 13px; }
  .brand img { width: min(100%, 250px); }
  .site-nav { display: none; }
  .mobile-menu-button { display: block; order: 2; }
  .account { order: 3; }
  .account-button span:not(:last-child) { display: none; }
  .account-avatar { width: 30px; height: 30px; }
  .mobile-nav { border-top: 1px solid #1e293b; }
  .hub-shell { width: min(100% - 24px, 1220px); padding-top: 18px; }
  .hub-hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { padding: 30px 26px; }
  .hero-copy h1 { white-space: normal; }
  .hero-visual { min-height: 190px; border-top: 1px solid rgba(148,163,184,.12); }
  .hero-visual > img { width: 130px; }
  .orbit-one { width: 230px; height: 125px; }
  .orbit-two { width: 155px; height: 215px; }
  .browse { padding: 17px; }
  .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .brand img { width: min(210px, 57vw); }
  .login-link { padding: 9px 11px; }
  .login-link span { display: none; }
  .hub-shell { width: min(100% - 16px, 1220px); }
  .hero-copy { padding: 25px 20px; }
  .hero-copy h1 { font-size: 37px; }
  .hero-features { grid-template-columns: 1fr; gap: 9px; font-size: 12px; }
  .hero-visual { min-height: 170px; }
  .hero-proof { right: 12px; bottom: 12px; }
  .section-heading { align-items: flex-start; }
  .refresh-button { width: 42px; min-height: 40px; overflow: hidden; padding: 0; font-size: 0; }
  .refresh-button span { font-size: 20px; }
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-field { grid-column: 1 / -1; }
  .clear-filters { width: 100%; }
  .card-grid { grid-template-columns: 1fr; }
  .tournament-card { min-height: 320px; }
  .pagination-pages { order: -1; width: 100%; justify-content: center; }
  .pagination-direction { min-width: 92px; }
  .modal { padding: 0; }
  .modal-dialog { width: 100%; max-height: 100vh; border-width: 0; border-radius: 0; }
  .modal-hero { min-height: 130px; }
  .modal-identity { gap: 11px; padding: 13px; }
  .modal-identity > img { width: 48px; height: 48px; border-radius: 12px; }
  .about-tournament-details > summary { padding: 11px 13px; }
  .about-tournament-body { padding: 0 13px 14px; }
  #modalContent { max-height: 100vh; }
  .modal-body { max-height: none; padding: 0 13px 20px; }
  .modal-tabs { overflow-x: auto; }
  .participation-member { align-items: flex-start; flex-wrap: wrap; }
  .participation-member-actions { width: 100%; padding-left: 39px; }
  .participation-choice-grid { grid-template-columns: 1fr; }
  .participation-join-code { align-items: flex-start; flex-direction: column; }
  .participation-confirm-actions { flex-wrap: wrap; }
  .bracket-panel .public-team-card { flex-basis: 280px; }
  .teams-grid { grid-template-columns: 1fr; }
  .atom-bracket.has-inspector .ab2-workspace { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 410px) {
  .brand img { width: 175px; }
  .filters { grid-template-columns: 1fr; }
  .search-field { grid-column: auto; }
  .card-overview { grid-template-columns: minmax(0,1fr) 72px; }
  .participation-input-row { flex-direction: column; }
  .participation-input-row .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .tournaments-motion-ready .hub-hero,
  .tournaments-motion-ready .hero-copy > *,
  .tournaments-motion-ready .hero-visual > img,
  .tournaments-motion-ready .hero-orbit,
  .tournaments-motion-ready .hero-proof,
  .tournaments-motion-ready .browse { opacity: 1; filter: none; transform: none; animation: none; }
  .tournaments-motion-ready .hero-visual > img { transform: translateY(-9px); }
  .tournaments-motion-ready .orbit-one { transform: rotate(-20deg); }
  .tournaments-motion-ready .orbit-two { transform: rotate(34deg); }
}