/* ==========================================================================
   TOURNAMENTS

   One component, two homes: the «Турниры» tab inside Player and the public
   /tournaments page. Inside Player every token below resolves to the cabinet's
   own --reset-* / --pl-* values, so the screen follows the arcade palette and
   both themes. The public page has no cabinet around it, so each token carries
   the dark cabinet value as its fallback.

   The event itself is always a poster: a dark plate with the squad art, one
   ember light and a live clock. Everything around it — tickets, panels, the
   application — is ordinary cabinet surface.
   ========================================================================== */

/* ===== Standalone page shell ===== */
.tournaments-page {
  --heading-font-family: Rubik, "Segoe UI", system-ui, sans-serif;
  margin: 0;
  min-height: 100vh;
  color: #fff;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  background-color: #07080c;
  background-image:
    radial-gradient(80rem 32rem at 68% -10rem, rgba(255, 106, 31, .16), transparent 70%),
    radial-gradient(rgba(255, 255, 255, .05) 1.5px, transparent 1.5px);
  background-size: auto, 22px 22px;
}
.tournaments-page *, .tournaments-page *::before, .tournaments-page *::after { box-sizing: border-box; }
.tn-site-header, .tournaments-page > main, .tn-site-footer { max-width: 1180px; margin: 0 auto; }
.tn-site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; }
.tn-brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.tn-brand img { width: 42px; height: 42px; border-radius: 12px; box-shadow: 0 0 24px -6px rgba(255, 106, 31, .7); }
.tn-brand b { display: block; font: 900 1.15rem/1 var(--heading-font-family); letter-spacing: .08em; }
.tn-brand small { display: block; margin-top: 5px; font: 600 .66rem/1 "JetBrains Mono", monospace; letter-spacing: .2em; text-transform: uppercase; color: #ff9d3d; }
.tn-site-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); color: #fff; font: 800 .82rem/1 var(--heading-font-family); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; transition: border-color .15s, color .15s; }
.tn-site-link:hover { border-color: #ff6a1f; color: #ff9d3d; }
.tn-site-link:focus-visible, .tn-brand:focus-visible, .tn-site-footer a:focus-visible { outline: 3px solid #ff6a1f; outline-offset: 3px; }
.tournaments-page > main { padding: 4px 24px 72px; }
.tn-site-footer { display: flex; flex-wrap: wrap; gap: 24px; padding: 24px; border-top: 1px solid rgba(255, 255, 255, .09); color: #949cab; font-size: .9rem; }
.tn-site-footer a { color: inherit; }

/* ===== Tokens ===== */
.tn {
  --tn-bg: var(--reset-bg, #07080c);
  --tn-panel: var(--reset-panel, #101319);
  --tn-raised: var(--reset-panel-raised, #171b24);
  --tn-groove: var(--pl-groove, #0f1117);
  --tn-text: var(--reset-cream, #fff);
  --tn-muted: var(--reset-muted, #949cab);
  --tn-line: var(--reset-line, rgba(255, 255, 255, .09));
  --tn-line-strong: var(--reset-line-strong, rgba(255, 255, 255, .22));
  --tn-ember: var(--pl-ember, #ff6a1f);
  --tn-ember-ink: var(--pl-ember-ink, #2a1201);
  --tn-flare: var(--pl-flare, #ffb32b);
  --tn-ramp: var(--pl-ember-ramp, linear-gradient(135deg, #ffb32b 0%, #ff6a1f 52%, #e8410a 100%));
  --tn-accent-ink: var(--reset-ink-coral, #ff9d3d);
  --tn-radius: var(--pl-radius, 20px);
  --tn-radius-sm: var(--pl-radius-sm, 14px);
  --tn-border: var(--pl-border, 2px solid rgba(255, 255, 255, .08));
  --tn-edge: var(--pl-edge, 2px solid rgba(255, 106, 31, .42));
  --tn-lift-sm: var(--pl-lift-sm, 0 6px 18px -10px #000);
  --tn-lift: var(--pl-lift, 0 22px 44px -26px #000, inset 0 1px 0 rgba(255, 255, 255, .05));
  --tn-lift-hi: var(--pl-lift-hi, 0 30px 60px -28px #000, inset 0 1px 0 rgba(255, 255, 255, .07));
  --tn-glow: var(--pl-glow, 0 0 0 1px rgba(255, 106, 31, .45), 0 0 32px -6px rgba(255, 106, 31, .55));
  --tn-glow-soft: var(--pl-glow-soft, 0 0 26px -10px rgba(255, 106, 31, .65));
  --tn-hatch: var(--pl-hatch, repeating-linear-gradient(115deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 9px));
  --tn-control: var(--pl-control, #212633);
  --tn-control-ink: var(--pl-control-ink, #fff);
  --tn-heading: var(--heading-font-family, Rubik, "Segoe UI", system-ui, sans-serif);
  --tn-mono: "JetBrains Mono", ui-monospace, monospace;
  --tn-ok: #3ddc84;
  --tn-bad: #ff5a67;
  --tn-warn: #ffb32b;
  --tn-live: #ff3b4e;
  container-type: inline-size;
  display: grid;
  gap: clamp(18px, 2.4vw, 28px);
  color: var(--tn-text);
}
/* Status colours have to be read as text on the cream page too. */
.pl-body .tn { --tn-ok: #0b8a43; --tn-bad: #d42a3a; --tn-warn: #b25e00; --tn-live: #e0102a; }
:root[data-home-theme="dark"] .pl-body .tn { --tn-ok: #3ddc84; --tn-bad: #ff5a67; --tn-warn: #ffb32b; --tn-live: #ff3b4e; }
.tn > * { min-width: 0; }
.tn [hidden] { display: none !important; }
.tn :focus-visible { outline: 3px solid var(--tn-ember); outline-offset: 3px; }
.tn .tn-hud { font: 600 .72rem/1.2 var(--tn-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--tn-muted); }
.tn .tn-muted { margin: 0; color: var(--tn-muted); line-height: 1.6; }
.tn .tn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== Buttons ===== */
.tn .tn-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 44px; padding: .62rem 1.2rem;
  border: var(--tn-border); border-radius: 999px;
  background: var(--tn-control); color: var(--tn-control-ink);
  font: 900 .84rem/1.2 var(--tn-heading); letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; box-shadow: var(--tn-lift-sm);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
}
.tn .tn-button:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: var(--tn-lift); }
.tn .tn-button:active:not(:disabled) { transform: translate(1px, 1px); }
.tn .tn-button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.tn .tn-primary { border-color: transparent; background: var(--tn-ramp); color: var(--tn-ember-ink); box-shadow: var(--tn-lift-sm), var(--tn-glow-soft); }
.tn .tn-primary:hover:not(:disabled) { box-shadow: var(--tn-lift), var(--tn-glow); }
.tn .tn-button--ghost, .tn .tn-button--quiet { background: transparent; color: var(--tn-text); border: 2px solid var(--tn-line-strong); box-shadow: none; }
.tn .tn-button--ghost:hover:not(:disabled), .tn .tn-button--quiet:hover:not(:disabled) { transform: none; box-shadow: none; border-color: var(--tn-ember); color: var(--tn-accent-ink); }
.tn .tn-button--big { min-height: 54px; padding: .85rem 1.7rem; font-size: 1rem; }
.tn .tn-button--glass { background: rgba(255, 255, 255, .1); color: #fff; border: 2px solid rgba(255, 255, 255, .3); box-shadow: none; }
.tn .tn-button--glass:hover:not(:disabled) { box-shadow: none; border-color: #ff9d3d; }
.tn.is-loading .tn-refresh i { animation: tn-spin .8s linear infinite; }
@keyframes tn-spin { to { transform: rotate(360deg); } }

/* ===== Bar and intro ===== */
.tn-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tn-bar__label { display: inline-flex; align-items: center; gap: 10px; }
.tn-bar__label i { color: var(--tn-ember); font-size: .9rem; }
.tn-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tn-intro { display: grid; gap: 10px; }
.tn .tn-intro .tn-hud { color: var(--tn-accent-ink); }
.tn .tn-intro__title {
  margin: 0; font: 900 clamp(2.8rem, 1.6rem + 5cqi, 5rem)/.92 var(--tn-heading); letter-spacing: -.01em; text-transform: uppercase;
  transform: skewX(-7deg); transform-origin: left bottom;
  background: linear-gradient(180deg, #fff 35%, #ffc49a); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tn-intro p { margin: 0; max-width: 44ch; color: var(--tn-muted); font-size: 1.08rem; line-height: 1.55; }
.tn-notice { margin: 0; padding: 12px 16px; border-radius: var(--tn-radius-sm); border: 2px solid color-mix(in srgb, var(--tn-bad) 55%, transparent); background: color-mix(in srgb, var(--tn-bad) 12%, transparent); font-weight: 800; }
.tn-notice:empty { display: none; }

/* ===== Loading ===== */
.tn-skeleton { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tn-skeleton i { position: relative; overflow: hidden; height: 150px; border-radius: var(--tn-radius); background: var(--tn-panel); border: var(--tn-border); }
.tn-skeleton i:first-child { grid-column: 1 / -1; height: clamp(300px, 38cqi, 400px); }
.tn-skeleton i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--tn-text) 7%, transparent) 50%, transparent 70%); transform: translateX(-100%); animation: tn-sweep 1.4s ease-in-out infinite; }
@keyframes tn-sweep { to { transform: translateX(100%); } }

/* ===== Phase chip ===== */
.tn-phase {
  --c: var(--tn-muted);
  display: inline-flex; align-items: center; gap: 8px; justify-self: start;
  padding: 6px 12px 6px 10px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: color-mix(in srgb, var(--c) 72%, var(--tn-text));
  font: 800 .7rem/1 var(--tn-mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.tn-phase > i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.tn-phase.is-open { --c: var(--tn-ember); }
.tn-phase.is-live { --c: var(--tn-live); }
.tn-phase.is-soon { --c: var(--tn-warn); }
.tn-phase.is-cancelled > span { text-decoration: line-through; }
.tn-phase.is-open > i::after, .tn-phase.is-live > i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--c); animation: tn-ping 1.6s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes tn-ping { 75%, 100% { transform: scale(2.8); opacity: 0; } }

/* ===== Poster ===== */
.tn-hero {
  --tn-text: #fff; --tn-muted: rgba(255, 255, 255, .66); --tn-accent-ink: #ff9d3d;
  --tn-ok: #3ddc84; --tn-bad: #ff5a67; --tn-warn: #ffb32b; --tn-live: #ff3b4e;
  position: relative; isolation: isolate; overflow: hidden; display: flex;
  min-height: clamp(360px, 44cqi, 460px);
  border-radius: calc(var(--tn-radius) + 4px); border: var(--tn-edge);
  background: #0b0d12; color: #fff; box-shadow: var(--tn-lift), var(--tn-glow-soft);
}
.tn-hero__art {
  position: absolute; z-index: -2; inset: 0 0 0 auto; width: min(66%, 720px);
  background: url("/resources/marketing/landing-teamdeathmatch.webp") center 28% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%); mask-image: linear-gradient(90deg, transparent 0, #000 42%);
}
.tn-hero::before {
  content: ''; position: absolute; z-index: -1; inset: 0;
  background:
    radial-gradient(60% 90% at 0 0, rgba(255, 106, 31, .34), transparent 62%),
    linear-gradient(90deg, #0b0d12 28%, rgba(11, 13, 18, .55) 58%, rgba(11, 13, 18, 0) 82%),
    linear-gradient(0deg, rgba(11, 13, 18, .8), transparent 45%);
}
.tn-hero::after { content: ''; position: absolute; z-index: -1; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 9px); pointer-events: none; }
.tn-hero.is-done .tn-hero__art, .tn-hero.is-cancelled .tn-hero__art { filter: grayscale(.85) brightness(.7); }
.tn-hero__body { display: flex; flex-direction: column; gap: 14px; width: min(100%, 660px); padding: clamp(22px, 3.6cqi, 42px); }
.tn-hero__top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.tn-hero .tn-phase { background: rgba(8, 9, 13, .6); }
.tn .tn-hero__kicker { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .72); }
.tn .tn-hero__kicker::before { content: ''; width: 22px; height: 3px; border-radius: 2px; background: var(--tn-ramp); }
.tn .tn-hero__title {
  margin: 0; color: #fff; font: 900 clamp(2.1rem, 1.2rem + 3.6cqi, 3.9rem)/.96 var(--tn-heading); letter-spacing: -.01em; text-transform: uppercase;
  transform: skewX(-7deg); transform-origin: left bottom; overflow-wrap: anywhere; text-shadow: 0 6px 34px rgba(0, 0, 0, .55);
}
.tn-hero__lead { margin: 0; max-width: 54ch; color: rgba(255, 255, 255, .8); font-size: 1.02rem; line-height: 1.55; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; white-space: pre-line; }
.tn-hero--full .tn-hero__lead { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; white-space: pre-wrap; }
.tn-hero__reason { display: flex; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 12px; background: rgba(255, 90, 103, .14); border: 1px solid rgba(255, 90, 103, .5); line-height: 1.5; overflow-wrap: anywhere; }
.tn-hero__reason i { color: var(--tn-bad); margin-top: 3px; }
.tn-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tn-tags li { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); font-size: .86rem; font-weight: 700; overflow-wrap: anywhere; }
.tn-tags i { color: var(--tn-flare); }
/* The prize chip is the one tag that does something: it leads down to the podium. */
.tn-tags li.tn-tags__prize { padding: 0; background: rgba(255, 179, 43, .16); border-color: rgba(255, 179, 43, .6); transition: background-color .15s ease; }
.tn-tags li.tn-tags__prize:hover { background: rgba(255, 179, 43, .26); }
.tn-tags__prize button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 7px 14px 7px 12px; border: 0; border-radius: inherit; background: none; color: #ffd27a; font: inherit; font-weight: 800; cursor: pointer; }
.tn-tags__prize .fa-arrow-down { font-size: .72rem; transition: transform .15s ease; }
.tn-tags__prize button:hover .fa-arrow-down { transform: translateY(2px); }
.tn-hero__stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.tn-hero__stats > * { flex: 1 1 auto; padding: 14px 16px; border-radius: var(--tn-radius-sm); background: rgba(8, 9, 13, .66); border: 1px solid rgba(255, 255, 255, .12); }
.tn-hero__stats > .tn-clock { flex-grow: 0; }
.tn-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.tn-mine { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(8, 9, 13, .6); border: 1px solid rgba(255, 255, 255, .24); font: 800 .76rem/1 var(--tn-heading); letter-spacing: .05em; text-transform: uppercase; }
.tn-mine.is-approved { border-color: var(--tn-ok); color: var(--tn-ok); }
.tn-mine.is-rejected { border-color: var(--tn-bad); color: var(--tn-bad); }
.tn-mine.is-pending, .tn-mine.is-needs_confirmation { border-color: var(--tn-warn); color: var(--tn-warn); }

/* ===== Countdown ===== */
.tn-clock { display: grid; gap: 8px; align-content: start; }
.tn-clock > small, .tn-slots__head small { font: 600 .68rem/1.2 var(--tn-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--tn-muted); }
.tn-clock__cells { display: flex; gap: 6px; }
.tn-clock__cells > span { display: grid; justify-items: center; gap: 4px; min-width: 3.3rem; padding: 9px 6px 7px; border-radius: 12px; background: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .14); }
.tn-clock b { font: 800 1.75rem/1 var(--tn-mono); font-variant-numeric: tabular-nums; color: #fff; }
.tn-hero.is-open .tn-clock b { color: var(--tn-flare); text-shadow: 0 0 18px rgba(255, 106, 31, .55); }
.tn-hero.is-live .tn-clock b { color: #ff8a95; }
.tn-clock__cells i { font: 600 .6rem/1.2 var(--tn-mono); letter-spacing: .12em; text-transform: uppercase; font-style: normal; color: rgba(255, 255, 255, .56); }
.tn-clock.is-done b { opacity: .45; text-shadow: none; }

/* ===== Places ===== */
.tn-slots { display: grid; gap: 8px; align-content: start; min-width: min(100%, 200px); }
.tn-slots__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tn-slots__head b { font: 900 1.4rem/1 var(--tn-heading); }
.tn-slots__head b span { font-size: .72em; color: var(--tn-muted); }
.tn-slots__pips { display: flex; gap: 3px; }
.tn-slots__pips i { flex: 1; height: 10px; border-radius: 2px; background: color-mix(in srgb, var(--tn-text) 13%, transparent); transform: skewX(-16deg); }
.tn-slots__pips i.is-on { background: var(--tn-ember); box-shadow: 0 0 10px -2px color-mix(in srgb, var(--tn-ember) 70%, transparent); }
.tn-slots__bar { display: block; height: 10px; border-radius: 99px; background: color-mix(in srgb, var(--tn-text) 13%, transparent); overflow: hidden; }
.tn-slots__bar i { display: block; width: var(--tn-fill); height: 100%; border-radius: inherit; background: var(--tn-ramp); }
.tn-slots__note { font-size: .8rem; font-weight: 700; color: var(--tn-muted); }
.tn-slots.is-full .tn-slots__note { color: var(--tn-accent-ink); }

/* ===== Tickets ===== */
.tn-group { display: grid; gap: 14px; }
.tn-group__head { display: flex; align-items: center; gap: 12px; }
.tn-group__head::after { content: ''; flex: 1; height: 2px; background: linear-gradient(90deg, var(--tn-line-strong), transparent); }
.tn .tn-group__title { margin: 0; font: 900 clamp(1.3rem, 1rem + 1.2cqi, 1.75rem)/1.1 var(--tn-heading); text-transform: uppercase; transform: skewX(-7deg); transform-origin: left bottom; }
.tn .tn-group__head .tn-hud { padding: 4px 10px; border-radius: 999px; background: var(--tn-raised); border: 1px solid var(--tn-line); color: var(--tn-text); }
.tn-tickets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.tn-ticket {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; overflow: hidden;
  border-radius: var(--tn-radius); background: var(--tn-panel); border: var(--tn-border); box-shadow: var(--tn-lift);
  transition: transform .18s ease, box-shadow .18s ease;
}
.tn-ticket:hover { transform: translate(-2px, -2px); box-shadow: var(--tn-lift-hi), var(--tn-glow-soft); }
.tn-ticket:has(.tn-ticket__link:focus-visible) { outline: 3px solid var(--tn-ember); outline-offset: 3px; }
.tn-ticket__stub {
  position: relative; display: grid; align-content: center; justify-items: center; gap: 3px; min-width: 88px; padding: 18px 12px;
  border-right: 2px dashed var(--tn-line-strong);
  background: var(--tn-hatch), color-mix(in srgb, var(--tn-ember) 11%, var(--tn-panel));
}
.tn-ticket__stub b { font: 900 2.3rem/1 var(--tn-heading); color: var(--tn-accent-ink); }
.tn-ticket__stub span { font: 900 .82rem/1 var(--tn-heading); letter-spacing: .08em; text-transform: uppercase; }
.tn-ticket__stub small { margin-top: 6px; font: 600 .72rem/1 var(--tn-mono); color: var(--tn-muted); }
.tn-ticket.is-done .tn-ticket__stub, .tn-ticket.is-cancelled .tn-ticket__stub { background: var(--tn-hatch), var(--tn-raised); }
.tn-ticket.is-done .tn-ticket__stub b, .tn-ticket.is-cancelled .tn-ticket__stub b { color: var(--tn-muted); }
.tn-ticket__body { display: grid; align-content: start; gap: 10px; min-width: 0; padding: 16px 6px 16px 20px; }
.tn .tn-ticket__title { margin: 0; font: 900 1.2rem/1.15 var(--tn-heading); text-transform: uppercase; overflow-wrap: anywhere; }
.tn-ticket__link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-transform: inherit; cursor: pointer; }
.tn-ticket__link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.tn .tn-ticket__link:focus-visible { outline: none; }
.tn-ticket__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; color: var(--tn-muted); font-size: .86rem; font-weight: 600; }
.tn-ticket__meta i { margin-right: 6px; color: var(--tn-accent-ink); }
.tn-ticket__go { display: grid; place-items: center; padding: 0 16px 0 8px; color: var(--tn-muted); transition: transform .18s ease, color .18s ease; }
.tn-ticket:hover .tn-ticket__go { color: var(--tn-ember); transform: translateX(3px); }
.tn-pager { display: flex; justify-content: center; gap: 10px; }
.tn-pager:empty { display: none; }

/* ===== Empty and messages ===== */
.tn-empty {
  display: grid; justify-items: center; gap: 12px; padding: clamp(28px, 5cqi, 56px) 24px; text-align: center;
  border-radius: var(--tn-radius); border: var(--tn-border); box-shadow: var(--tn-lift); overflow: hidden;
  background: radial-gradient(40rem 18rem at 50% 0, color-mix(in srgb, var(--tn-ember) 18%, transparent), transparent 70%), var(--tn-hatch), var(--tn-panel);
}
.tn-empty__art { width: min(240px, 58cqi); height: auto; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .35)); animation: tn-float 5s ease-in-out infinite; }
@keyframes tn-float { 50% { transform: translateY(-8px); } }
.tn .tn-empty__title { margin: 0; font: 900 clamp(1.4rem, 1rem + 1.8cqi, 2.1rem)/1.1 var(--tn-heading); text-transform: uppercase; transform: skewX(-7deg); }
.tn-empty p { margin: 0 0 6px; max-width: 46ch; color: var(--tn-muted); line-height: 1.6; }
.tn-empty__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--tn-ramp); color: var(--tn-ember-ink); font-size: 1.6rem; box-shadow: var(--tn-glow-soft); transform: rotate(-5deg); }

/* ===== Detail ===== */
.tn-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tn-fact { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 16px; border-radius: var(--tn-radius-sm); background: var(--tn-panel); border: var(--tn-border); box-shadow: var(--tn-lift-sm); }
.tn-fact__icon { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 6px; border-radius: 11px; background: color-mix(in srgb, var(--tn-ember) 15%, transparent); color: var(--tn-accent-ink); }
.tn-fact small { font: 600 .68rem/1.2 var(--tn-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tn-muted); }
.tn-fact strong { font: 800 1.02rem/1.3 var(--tn-heading); overflow-wrap: anywhere; }
.tn-fact > span:not(.tn-fact__icon) { font-size: .8rem; color: var(--tn-muted); }
.tn-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(18px, 2.4vw, 28px); align-items: start; }
.tn-panel { display: grid; gap: 16px; min-width: 0; padding: clamp(18px, 2.6cqi, 28px); border-radius: var(--tn-radius); background: var(--tn-panel); border: var(--tn-border); box-shadow: var(--tn-lift); }
.tn-panel__head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.tn-panel__icon { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 13px; background: var(--tn-ramp); color: var(--tn-ember-ink); box-shadow: var(--tn-glow-soft); transform: rotate(-5deg); }
.tn .tn-panel__title { margin: 0; font: 900 1.3rem/1.1 var(--tn-heading); letter-spacing: .01em; text-transform: uppercase; }
.tn-panel__aside { margin-left: auto; padding: 6px 11px; border-radius: 999px; background: var(--tn-raised); border: 1px solid var(--tn-line); font: 700 .72rem/1 var(--tn-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tn-muted); overflow-wrap: anywhere; }

/* ===== Prize pool =====
   The first thing on the event screen, and a podium rather than a list: each
   place is a card with its medal, first place lit brighter, and whatever every
   team gets runs full width under it. On a phone the cards turn into rows. */
.tn-prizes {
  scroll-margin-top: calc(var(--pl-top-h, 0px) + var(--pl-subnav-h, 0px) + 16px);
  border: var(--tn-edge);
  background: radial-gradient(46rem 18rem at 50% -5rem, color-mix(in srgb, var(--tn-flare) 17%, transparent), transparent 70%), var(--tn-panel);
}
.tn-prizes__grid { display: grid; grid-template-columns: repeat(var(--tn-places, 3), minmax(0, 1fr)); gap: 14px; }
.tn-prize {
  --medal: var(--tn-ember); --medal-hi: var(--tn-flare); --medal-ink: var(--tn-ember-ink);
  position: relative; isolation: isolate; display: grid; align-content: start; gap: 14px; min-width: 0; padding: 18px;
  border-radius: var(--tn-radius-sm); overflow: hidden; overflow-wrap: anywhere;
  background: linear-gradient(180deg, color-mix(in srgb, var(--medal) 14%, transparent), transparent 75%), var(--tn-groove);
  border: 2px solid color-mix(in srgb, var(--medal) 50%, var(--tn-line));
}
.tn-prize.is-p1 { --medal: #f5a623; --medal-hi: #ffe27a; --medal-ink: #3a2400; box-shadow: 0 0 36px -14px var(--medal), var(--tn-lift-sm); }
.tn-prize.is-p2 { --medal: #a3adbf; --medal-hi: #f4f6fa; --medal-ink: #1b2130; }
.tn-prize.is-p3 { --medal: #c7743a; --medal-hi: #f6b582; --medal-ink: #2d1404; }
/* The place number, huge and faint, behind the card. */
.tn-prize.is-place::before {
  content: attr(data-place); position: absolute; z-index: -1; top: -.2em; right: .06em;
  font: italic 900 7.5rem/1 var(--tn-heading); color: color-mix(in srgb, var(--medal) 13%, transparent); pointer-events: none;
}
.tn-prize__medal {
  display: grid; place-items: center; flex: none; width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--medal-hi), var(--medal) 62%, color-mix(in srgb, var(--medal) 72%, #000));
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--medal-hi) 55%, transparent), 0 10px 22px -10px color-mix(in srgb, var(--medal) 85%, #000);
  color: var(--medal-ink); font: 900 1.75rem/1 var(--tn-heading);
}
.tn-prize__medal b { transform: skewX(-7deg); }
.tn-prize__body { display: grid; gap: 10px; min-width: 0; }
.tn .tn-prize__title { margin: 0; color: var(--tn-text); font: 900 1.3rem/1.1 var(--tn-heading); letter-spacing: .01em; text-transform: uppercase; }
.tn-prize ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tn-prize li { position: relative; padding-left: 20px; font-size: .95rem; line-height: 1.45; }
.tn-prize li::before { content: ''; position: absolute; left: 2px; top: .52em; width: 7px; height: 7px; border-radius: 2px; background: var(--medal); transform: rotate(45deg); }
.tn-prize li b { font: 900 1.04em/1 var(--tn-heading); color: var(--tn-accent-ink); }
.tn-prize--bonus {
  grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px;
  border-style: dashed; background: var(--tn-hatch), color-mix(in srgb, var(--tn-ember) 8%, var(--tn-groove));
}
.tn-prize--bonus .tn-prize__medal { width: 54px; height: 54px; border-radius: 16px; background: var(--tn-ramp); box-shadow: var(--tn-glow-soft); font-size: 1.35rem; transform: rotate(-5deg); }
.tn-prize--bonus .tn-prize__body { gap: 6px; }
.tn-prize--bonus li { padding-left: 0; font-weight: 700; }
.tn-prize--bonus li::before { content: none; }
.tn-prize--bonus li + li { color: var(--tn-muted); font-size: .86rem; font-weight: 500; }
@container (max-width: 680px) {
  .tn-prizes__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .tn-prize { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px; padding: 14px 14px 16px; }
  .tn-prize__medal { width: 50px; height: 50px; font-size: 1.45rem; }
  .tn-prize--bonus { align-items: start; }
  .tn-prize--bonus .tn-prize__medal { width: 46px; height: 46px; font-size: 1.15rem; }
  .tn .tn-prize__title { font-size: 1.12rem; }
  .tn-prize.is-place::before { font-size: 5.5rem; }
  .tn-prize li { font-size: .9rem; }
}

.tn-timeline { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.tn-stage { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 8px 0; }
.tn-stage:not(:last-child)::before { content: ''; position: absolute; left: 21px; top: 52px; bottom: -12px; width: 2px; background: repeating-linear-gradient(180deg, var(--tn-line-strong) 0 6px, transparent 6px 11px); }
.tn-stage.is-past:not(:last-child)::before { background: var(--tn-ember); }
.tn-stage__node { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--tn-panel); border: 2px solid var(--tn-line-strong); color: var(--tn-muted); font: 800 .82rem/1 var(--tn-mono); }
.tn-stage__node i { display: none; }
.tn-stage.is-past .tn-stage__node { background: var(--tn-ember); border-color: var(--tn-ember); color: var(--tn-ember-ink); }
.tn-stage.is-past .tn-stage__node b { display: none; }
.tn-stage.is-past .tn-stage__node i { display: block; }
.tn-stage.is-live .tn-stage__node { background: var(--tn-ramp); border-color: transparent; color: var(--tn-ember-ink); box-shadow: 0 0 0 5px color-mix(in srgb, var(--tn-ember) 24%, transparent), var(--tn-glow-soft); }
.tn-stage__body { display: grid; align-content: center; gap: 4px; min-width: 0; }
.tn-stage__body time { font: 600 .76rem/1.35 var(--tn-mono); color: var(--tn-muted); }
.tn-stage__body strong { font: 800 1.06rem/1.25 var(--tn-heading); overflow-wrap: anywhere; }
.tn-stage.is-past .tn-stage__body strong { color: var(--tn-muted); }
.tn-stage__body em { display: none; justify-self: start; padding: 4px 9px; border-radius: 999px; background: var(--tn-live); color: #fff; font: 800 .64rem/1 var(--tn-mono); font-style: normal; letter-spacing: .14em; text-transform: uppercase; }
.tn-stage.is-live .tn-stage__body em { display: inline-block; }

.tn-org { display: grid; gap: 10px; margin: 0; }
.tn-org > div { display: grid; gap: 5px; padding: 12px 14px; border-radius: var(--tn-radius-sm); background: var(--tn-groove); border: 1px solid var(--tn-line); }
.tn-org dt { display: flex; align-items: center; gap: 8px; font: 600 .68rem/1.2 var(--tn-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tn-muted); }
.tn-org dt i { color: var(--tn-accent-ink); }
.tn-org dd { margin: 0; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-line; }

.tn-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.tn-team { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px 12px 12px; border-radius: var(--tn-radius-sm); background: var(--tn-groove); border: 1px solid var(--tn-line); }
.tn-team__seed { position: absolute; z-index: 1; top: 6px; left: 6px; padding: 3px 5px; border-radius: 6px; background: var(--tn-raised); border: 1px solid var(--tn-line-strong); font: 800 .6rem/1 var(--tn-mono); color: var(--tn-text); }
.tn-team__logo { display: grid; place-items: center; flex: none; width: 52px; height: 52px; overflow: hidden; border-radius: 14px; background: linear-gradient(145deg, #232938, #0d0f14); border: 2px solid color-mix(in srgb, var(--tn-ember) 55%, transparent); color: #fff; }
.tn-team__logo img { width: 100%; height: 100%; object-fit: contain; }
.tn-team__logo b { font: 900 1.05rem/1 var(--tn-heading); letter-spacing: .04em; background: var(--tn-ramp); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tn-team__name { display: grid; gap: 3px; min-width: 0; }
.tn-team__name strong { font: 900 1rem/1.15 var(--tn-heading); text-transform: uppercase; overflow-wrap: anywhere; }
.tn-team__name small { font-size: .8rem; font-weight: 600; color: var(--tn-muted); }
.tn-team--free { padding: 0; border: 2px dashed color-mix(in srgb, var(--tn-ember) 55%, transparent); background: color-mix(in srgb, var(--tn-ember) 6%, transparent); transition: background-color .15s; }
.tn-team--free:hover { background: color-mix(in srgb, var(--tn-ember) 13%, transparent); }
.tn-team--free button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 0; border-radius: inherit; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tn-team--free .tn-team__logo { background: transparent; border-style: dashed; color: var(--tn-accent-ink); }

.tn-rules { margin: 0; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.tn-terms { border-radius: var(--tn-radius-sm); background: var(--tn-groove); border: 1px solid var(--tn-line); }
.tn-terms summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; font-weight: 800; line-height: 1.4; list-style: none; }
.tn-terms summary::-webkit-details-marker { display: none; }
.tn-terms summary::after { content: ''; flex: none; width: 8px; height: 8px; margin: 0 4px 4px auto; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s ease; }
.tn-terms[open] summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
.tn-terms summary i { color: var(--tn-accent-ink); }
.tn-terms > div { max-height: 420px; overflow: auto; padding: 0 16px 12px; color: var(--tn-muted); font-size: .88rem; line-height: 1.6; }

/* ===== Application ===== */
.tn-apply {
  border: var(--tn-edge); scroll-margin-top: calc(var(--pl-top-h, 0px) + var(--pl-subnav-h, 0px) + 16px);
  background: radial-gradient(48rem 20rem at 100% 0, color-mix(in srgb, var(--tn-ember) 12%, transparent), transparent 70%), var(--tn-panel);
}
.tn-gate, .tn-closed { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 18px; border-radius: var(--tn-radius-sm); background: var(--tn-groove); border: 2px dashed var(--tn-line-strong); }
.tn-gate__icon { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 15px; background: color-mix(in srgb, var(--tn-ember) 16%, transparent); color: var(--tn-accent-ink); font-size: 1.25rem; }
.tn-gate > div, .tn-closed > div { flex: 1; display: grid; gap: 4px; min-width: min(100%, 200px); }
.tn-gate strong, .tn-closed strong { font: 900 1.05rem/1.2 var(--tn-heading); text-transform: uppercase; }
.tn-gate p, .tn-closed p { margin: 0; color: var(--tn-muted); line-height: 1.5; }
.tn-closed { border-style: solid; border-width: 1px; }
.tn-closed > i { font-size: 1.4rem; color: var(--tn-muted); }

.tn-status { --c: var(--tn-warn); --c-ink: var(--tn-ember-ink); display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 16px 18px; border-radius: var(--tn-radius-sm); background: color-mix(in srgb, var(--c) 11%, var(--tn-panel)); border: 2px solid color-mix(in srgb, var(--c) 55%, transparent); }
.tn-status.is-approved { --c: var(--tn-ok); --c-ink: #fff; }
.tn-status.is-rejected { --c: var(--tn-bad); --c-ink: #fff; }
.tn-status.is-withdrawn { --c: var(--tn-muted); --c-ink: var(--tn-panel); }
.tn-status__icon { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 50%; background: var(--c); color: var(--c-ink); font-size: 1.35rem; box-shadow: 0 0 24px -6px var(--c); }
.tn-status__text { flex: 1; display: grid; gap: 2px; min-width: min(100%, 200px); }
.tn-status__text small { font: 600 .68rem/1.2 var(--tn-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tn-muted); }
.tn-status__text strong { font: 900 1.35rem/1.15 var(--tn-heading); text-transform: uppercase; color: color-mix(in srgb, var(--c) 78%, var(--tn-text)); }
.tn-status__text p { margin: 2px 0 0; color: var(--tn-muted); line-height: 1.5; overflow-wrap: anywhere; }

.tn-form { display: grid; gap: 16px; }
.tn-form__lead { margin: 0; color: var(--tn-muted); line-height: 1.55; }
.tn-step { display: grid; gap: 14px; min-width: 0; margin: 0; padding: 18px; border-radius: var(--tn-radius-sm); background: var(--tn-groove); border: 1px solid var(--tn-line); }
.tn-step__legend { float: left; display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; font: 900 1.02rem/1 var(--tn-heading); letter-spacing: .02em; text-transform: uppercase; }
.tn-step__num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--tn-ramp); color: var(--tn-ember-ink); font: 900 .95rem/1 var(--tn-heading); transform: skewX(-7deg); }
.tn-step__hint { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--tn-muted); font-size: .92rem; font-weight: 600; }
.tn-counter { flex: none; padding: 6px 11px; border-radius: 999px; background: var(--tn-raised); border: 1px solid var(--tn-line-strong); color: var(--tn-text); font: 800 .9rem/1 var(--tn-mono); }
.tn-counter.is-ok { border-color: color-mix(in srgb, var(--tn-ok) 60%, transparent); background: color-mix(in srgb, var(--tn-ok) 16%, transparent); color: color-mix(in srgb, var(--tn-ok) 75%, var(--tn-text)); }
.tn-counter.is-over { border-color: color-mix(in srgb, var(--tn-bad) 60%, transparent); background: color-mix(in srgb, var(--tn-bad) 16%, transparent); color: color-mix(in srgb, var(--tn-bad) 75%, var(--tn-text)); }
.tn-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 10px; }
.tn-member { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px; border-radius: var(--tn-radius-sm); background: var(--tn-panel); border: 2px solid var(--tn-line-strong); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.tn-member input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tn-member:hover { border-color: color-mix(in srgb, var(--tn-ember) 60%, transparent); }
.tn-member:has(input:checked) { border-color: var(--tn-ember); background: color-mix(in srgb, var(--tn-ember) 9%, var(--tn-panel)); box-shadow: var(--tn-glow-soft); }
.tn-member:has(input:focus-visible) { outline: 3px solid var(--tn-ember); outline-offset: 3px; }
.tn-member__avatar { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(145deg, #232938, #0d0f14); color: #fff; font: 900 .95rem/1 var(--tn-heading); transition: background .15s ease; }
.tn-member input:checked ~ .tn-member__avatar { background: var(--tn-ramp); color: var(--tn-ember-ink); }
.tn-member__name { flex: 1; display: grid; gap: 3px; min-width: 0; }
.tn-member__name strong { font: 800 .98rem/1.2 var(--tn-heading); overflow-wrap: anywhere; }
.tn-member__name small { font: 700 .64rem/1 var(--tn-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tn-accent-ink); }
.tn-member__tick { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--tn-line-strong); color: transparent; font-size: .68rem; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.tn-member input:checked ~ .tn-member__tick { background: var(--tn-ember); border-color: var(--tn-ember); color: var(--tn-ember-ink); }

.tn-field { display: grid; gap: 8px; min-width: 0; font-size: .88rem; font-weight: 700; }
.tn-field :is(input, textarea) { width: 100%; min-width: 0; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--tn-line-strong); background: var(--tn-panel); color: var(--tn-text); font: inherit; font-size: 1rem; font-weight: 500; transition: border-color .15s ease, box-shadow .15s ease; }
.tn-field textarea { min-height: 112px; resize: vertical; }
.tn-field :is(input, textarea)::placeholder { color: color-mix(in srgb, var(--tn-muted) 75%, transparent); }
.tn .tn-field :is(input, textarea):focus-visible { outline: none; border-color: var(--tn-ember); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tn-ember) 22%, transparent); }
.tn-field :is(input, textarea):user-invalid { border-color: var(--tn-bad); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tn-bad) 18%, transparent); }
.tn-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tn-private { display: flex; align-items: center; gap: 8px; font-size: .86rem; }
.tn-check { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--tn-panel); border: 1px solid var(--tn-line); font-size: .9rem; line-height: 1.5; cursor: pointer; transition: border-color .15s ease; }
.tn-check:has(input:checked) { border-color: color-mix(in srgb, var(--tn-ember) 55%, transparent); }
.tn-check input { appearance: none; -webkit-appearance: none; display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin: 1px 0 0; border-radius: 7px; border: 2px solid var(--tn-line-strong); background: var(--tn-bg); cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.tn-check input::after { content: ''; width: 6px; height: 11px; margin-top: -2px; border: solid var(--tn-ember-ink); border-width: 0 3px 3px 0; transform: rotate(45deg) scale(0); transition: transform .15s ease; }
.tn-check input:checked { border-color: transparent; background: var(--tn-ramp); }
.tn-check input:checked::after { transform: rotate(45deg) scale(1); }
.tn-check input:user-invalid { border-color: var(--tn-bad); }
.tn-check a { color: var(--tn-accent-ink); font-weight: 700; }
.tn-submit { display: grid; justify-items: start; gap: 12px; }
.tn-form-notice { margin: 0; padding: 10px 14px; border-left: 4px solid var(--tn-ember); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--tn-ember) 12%, transparent); font-weight: 800; }
.tn-form-notice:empty { display: none; }
.tn-demo-note { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border-radius: 999px; background: var(--tn-raised); border: 1px solid var(--tn-line); color: var(--tn-muted); font-size: .86rem; font-weight: 700; }
.tn-demo-note i { color: var(--tn-accent-ink); }

/* ===== Banner art =====
   An event can carry its own banner uploaded in the ACP. It replaces the squad
   art behind the poster and lines the ticket, always under the same scrim so
   the title and the clock keep their contrast. */
.tn-hero__photo { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tn-hero--photo::before {
  background:
    radial-gradient(60% 90% at 0 0, rgba(255, 106, 31, .3), transparent 64%),
    linear-gradient(90deg, rgba(11, 13, 18, .96) 22%, rgba(11, 13, 18, .72) 58%, rgba(11, 13, 18, .3) 100%),
    linear-gradient(0deg, rgba(11, 13, 18, .85), transparent 52%);
}
.tn-hero--photo.is-done .tn-hero__photo, .tn-hero--photo.is-cancelled .tn-hero__photo { filter: grayscale(.85) brightness(.7); }
.tn-ticket__art { position: absolute; z-index: 0; inset: 0 0 0 auto; width: min(64%, 340px); pointer-events: none; }
.tn-ticket__art img { width: 100%; height: 100%; object-fit: cover; }
.tn-ticket__art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--tn-panel) 14%, color-mix(in srgb, var(--tn-panel) 62%, transparent) 58%, color-mix(in srgb, var(--tn-panel) 28%, transparent));
}
.tn-ticket--photo .tn-ticket__stub, .tn-ticket--photo .tn-ticket__body, .tn-ticket--photo .tn-ticket__go { position: relative; z-index: 1; }
.tn-ticket--photo.is-done .tn-ticket__art img, .tn-ticket--photo.is-cancelled .tn-ticket__art img { filter: grayscale(.8) brightness(.75); }

/* ===== Event screens =====
   The event, its board and the entry form are three screens, not one scroll. */
.tn-tabs { display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: var(--tn-panel); border: var(--tn-border); box-shadow: var(--tn-lift-sm); overflow-x: auto; scrollbar-width: none; }
.tn-tabs::-webkit-scrollbar { display: none; }
.tn .tn-tabs__item {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: .6rem 1.2rem;
  border: 0; border-radius: 999px; background: transparent; color: var(--tn-muted); cursor: pointer;
  font: 800 .88rem/1 var(--tn-heading); letter-spacing: .04em; text-transform: uppercase;
  transition: color .15s ease, background-color .15s ease;
}
.tn .tn-tabs__item:hover { color: var(--tn-accent-ink); }
.tn .tn-tabs__item.is-active { background: var(--tn-ramp); color: var(--tn-ember-ink); box-shadow: var(--tn-glow-soft); }
.tn-tabs__badge { padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--tn-text) 12%, transparent); font: 700 .7rem/1 var(--tn-mono); }
.tn .tn-tabs__item.is-active .tn-tabs__badge { background: rgba(0, 0, 0, .18); }
.tn-screen { display: grid; gap: clamp(16px, 2.2vw, 24px); }
.tn-about { display: grid; gap: 10px; }
.tn-about p { margin: 0; line-height: 1.65; overflow-wrap: anywhere; }
.tn-group--more .tn-group__head { margin-top: 8px; }
.tn-more__all { display: inline-flex; align-items: center; gap: 8px; color: var(--tn-accent-ink); font: 800 .8rem/1 var(--tn-heading); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }

/* ===== Board: pairings, results and the table ===== */
.tn-panel--board { gap: 18px; }
.tn-champion { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--tn-radius-sm); background: color-mix(in srgb, var(--tn-ember) 14%, var(--tn-groove)); border: var(--tn-edge); }
.tn-champion__cup { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; background: var(--tn-ramp); color: var(--tn-ember-ink); font-size: 1.2rem; box-shadow: var(--tn-glow-soft); }
.tn-champion small { display: block; font: 600 .72rem/1.2 var(--tn-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--tn-muted); }
.tn-champion strong { font: 900 1.25rem/1.15 var(--tn-heading); text-transform: uppercase; overflow-wrap: anywhere; }
.tn-await { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 18px; border-radius: var(--tn-radius-sm); background: var(--tn-groove); border: 2px dashed var(--tn-line-strong); }
.tn-await__icon { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 15px; background: color-mix(in srgb, var(--tn-ember) 16%, transparent); color: var(--tn-accent-ink); font-size: 1.25rem; }
.tn-await > div { flex: 1; display: grid; gap: 4px; min-width: min(100%, 220px); }
.tn-await strong { font: 900 1.05rem/1.2 var(--tn-heading); text-transform: uppercase; }
.tn-await p { margin: 0; color: var(--tn-muted); line-height: 1.5; }
/* ===== Bracket tree =====
   Every match holds the two it grew from, so a round is a column of subtrees of
   equal height: the elbow from a pair to its parent is always half a card plus
   half a gap, which CSS can draw exactly. The two halves face each other and
   meet at the final, the way a printed bracket does — the right half is the same
   markup flipped, with the cards flipped back so their text reads normally. */
.tn-bracket { --tn-elbow: 16px; --tn-kid-gap: 10px; --tn-card: clamp(196px, 20cqi, 252px); display: flex; overflow-x: auto; padding-bottom: 10px; }
.tn-tree { display: flex; align-items: center; gap: var(--tn-elbow); margin: 0 auto; }
.tn-tree--single { justify-content: center; }
.tn-tree__side { display: flex; }
.tn-tree__side--right { transform: scaleX(-1); }
.tn-tree__side--right .tn-match { transform: scaleX(-1); }
.tn-node { display: flex; flex-direction: row-reverse; align-items: center; }
.tn-node__self { position: relative; width: var(--tn-card); flex: none; }
/* Equal rows keep a pair the same height whatever its cards hold, which is what
   makes the elbow — half a card plus half a gap — meet the parent exactly. */
.tn-node__kids { display: grid; grid-auto-rows: 1fr; gap: var(--tn-kid-gap); margin-right: calc(var(--tn-elbow) * 2); }
/* Stub out of each child, the vertical that joins the pair, and the lead-in to the parent. */
.tn-node__kids > .tn-node { position: relative; }
.tn-node__kids > .tn-node::after { content: ""; position: absolute; left: 100%; top: 50%; width: var(--tn-elbow); height: 2px; background: var(--tn-line-strong); }
.tn-node__kids > .tn-node:first-child::before { content: ""; position: absolute; left: calc(100% + var(--tn-elbow)); top: 50%; height: calc(50% + var(--tn-kid-gap) / 2); width: 2px; background: var(--tn-line-strong); }
.tn-node__kids > .tn-node:last-child::before { content: ""; position: absolute; left: calc(100% + var(--tn-elbow)); bottom: 50%; height: calc(50% + var(--tn-kid-gap) / 2); width: 2px; background: var(--tn-line-strong); }
.tn-node:has(> .tn-node__kids) > .tn-node__self::before { content: ""; position: absolute; right: 100%; top: 50%; width: var(--tn-elbow); height: 2px; background: var(--tn-line-strong); }
/* The final sits in the middle under the cup, with a lead-in from each half. */
.tn-tree__final { display: grid; justify-items: center; gap: 12px; width: var(--tn-card); flex: none; }
.tn-tree__final .tn-node__self { width: 100%; }
.tn-tree:not(.tn-tree--single) .tn-tree__final .tn-node__self::before,
.tn-tree:not(.tn-tree--single) .tn-tree__final .tn-node__self::after { content: ""; position: absolute; top: 50%; width: var(--tn-elbow); height: 2px; background: var(--tn-line-strong); }
.tn-tree:not(.tn-tree--single) .tn-tree__final .tn-node__self::before { right: 100%; }
.tn-tree:not(.tn-tree--single) .tn-tree__final .tn-node__self::after { left: 100%; }
.tn-tree__crown { display: grid; justify-items: center; gap: 6px; text-align: center; }
.tn-tree__crown i { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--tn-ramp); color: var(--tn-ember-ink); font-size: 1.4rem; box-shadow: var(--tn-glow); }
.tn-tree__crown span { max-width: var(--tn-card); font: 900 1rem/1.15 var(--tn-heading); letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere; }
.tn-tree__final .tn-match { border-color: color-mix(in srgb, var(--tn-ember) 55%, transparent); }
.tn-rounds { display: grid; gap: 18px; }
.tn-round { display: grid; gap: 10px; }
.tn-round__head { display: flex; align-items: center; gap: 12px; }
.tn-round__head::after { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, var(--tn-line-strong), transparent); }
.tn .tn-round__head h3 { margin: 0; font: 900 .9rem/1 var(--tn-heading); letter-spacing: .12em; text-transform: uppercase; }
.tn-round__matches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.tn-match { display: grid; gap: 8px; padding: 12px; border-radius: var(--tn-radius-sm); background: var(--tn-groove); border: 1px solid var(--tn-line); }
.tn-match.is-live { border-color: color-mix(in srgb, var(--tn-live) 65%, transparent); box-shadow: 0 0 22px -12px var(--tn-live); }
.tn-match.is-cancelled { opacity: .6; }
.tn-match__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.tn-match__head time { font: 600 .74rem/1 var(--tn-mono); color: var(--tn-muted); }
.tn-match__state { margin-left: auto; padding: 4px 9px; border-radius: 999px; background: var(--tn-raised); border: 1px solid var(--tn-line); font: 700 .68rem/1 var(--tn-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tn-muted); }
.tn-match.is-live .tn-match__state { border-color: color-mix(in srgb, var(--tn-live) 60%, transparent); color: var(--tn-live); }
.tn-match.is-done .tn-match__state, .tn-match.is-walkover .tn-match__state { border-color: color-mix(in srgb, var(--tn-ok) 55%, transparent); color: color-mix(in srgb, var(--tn-ok) 80%, var(--tn-text)); }
.tn-match__note { display: flex; gap: 8px; margin: 0; color: var(--tn-muted); font-size: .84rem; line-height: 1.45; overflow-wrap: anywhere; }
.tn-match__note i { margin-top: 2px; color: var(--tn-accent-ink); }
.tn-side { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--tn-panel); border: 1px solid transparent; }
.tn-side.is-win { border-color: var(--tn-ember); background: color-mix(in srgb, var(--tn-ember) 11%, var(--tn-panel)); }
.tn-side.is-lost { opacity: .6; }
.tn-side.is-empty { border: 1px dashed var(--tn-line-strong); background: transparent; color: var(--tn-muted); }
.tn-side__logo { display: grid; place-items: center; overflow: hidden; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--tn-raised); border: 1px solid var(--tn-line); font: 900 .76rem/1 var(--tn-heading); }
.tn-side__logo img { width: 100%; height: 100%; object-fit: cover; }
.tn-side__name { min-width: 0; overflow: hidden; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.tn-tree .tn-side__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; overflow: hidden; line-height: 1.2; }
.tn-side.is-empty .tn-side__name { white-space: normal; overflow: visible; font-size: .86rem; font-weight: 700; line-height: 1.25; }
.tn-side__score { font: 900 1.1rem/1 var(--tn-mono); }
.tn-side__flag { color: var(--tn-flare); }
.tn-table-wrap { overflow-x: auto; border-radius: var(--tn-radius-sm); border: 1px solid var(--tn-line); }
.tn-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tn-table th { padding: 10px 8px; background: var(--tn-groove); font: 700 .7rem/1 var(--tn-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tn-muted); text-align: center; }
.tn-table th:nth-child(2) { text-align: left; }
.tn-table td { padding: 10px 8px; border-top: 1px solid var(--tn-line); text-align: center; }
.tn-table td:first-child { color: var(--tn-muted); font: 700 .86rem/1 var(--tn-mono); }
.tn-table__team { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 800; text-align: left; overflow-wrap: anywhere; }
.tn-table tr.is-lead td { background: color-mix(in srgb, var(--tn-ember) 10%, transparent); }

/* ===== Entry guide ===== */
.tn-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tn-steps__item { display: flex; gap: 14px; padding: 14px; border-radius: var(--tn-radius-sm); background: var(--tn-groove); border: 1px solid var(--tn-line); }
.tn-steps__num { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 11px; background: var(--tn-ramp); color: var(--tn-ember-ink); font: 900 .9rem/1 var(--tn-heading); transform: skewX(-7deg); }
.tn-steps__item strong { display: flex; align-items: center; gap: 9px; font: 900 1rem/1.2 var(--tn-heading); text-transform: uppercase; }
.tn-steps__item strong i { color: var(--tn-accent-ink); }
.tn-steps__item p { margin: 5px 0 0; color: var(--tn-muted); line-height: 1.5; overflow-wrap: anywhere; }
.tn-guide__note { display: flex; gap: 10px; margin: 0; padding: 12px 14px; border-radius: var(--tn-radius-sm); background: color-mix(in srgb, var(--tn-ember) 12%, transparent); border: 1px solid color-mix(in srgb, var(--tn-ember) 40%, transparent); line-height: 1.5; overflow-wrap: anywhere; }
.tn-guide__note i { margin-top: 3px; color: var(--tn-accent-ink); }
.tn-guide__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.tn-fold { border-radius: var(--tn-radius-sm); border: 1px solid var(--tn-line); background: var(--tn-panel); }
.tn-fold > summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; font: 800 .92rem/1 var(--tn-heading); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.tn-fold > summary i { color: var(--tn-accent-ink); }
.tn-fold[open] > summary { border-bottom: 1px solid var(--tn-line); }
.tn-fold .tn-panel { border: 0; box-shadow: none; background: transparent; }
.tn-step__legend > span { display: grid; gap: 3px; }
.tn-step__legend small { font: 600 .72rem/1.2 var(--tn-mono); letter-spacing: .05em; text-transform: none; color: var(--tn-muted); }

/* ===== Share =====
   Lives in the poster, so it keeps the poster's dark plate in both themes. */
.tn-share { display: grid; gap: 12px; width: min(100%, 520px); padding: 16px; border-radius: var(--tn-radius-sm); background: rgba(8, 9, 13, .78); border: 1px solid rgba(255, 255, 255, .16); box-shadow: var(--tn-lift-sm); }
.tn .tn-share__title { margin: 0; font: 900 .95rem/1.2 var(--tn-heading); letter-spacing: .03em; text-transform: uppercase; color: #fff; }
.tn-share__row { display: flex; gap: 8px; }
.tn-share__url { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); color: #fff; font: 600 .86rem/1 var(--tn-mono); text-overflow: ellipsis; }
.tn-share__url:focus-visible { outline: 3px solid var(--tn-ember); outline-offset: 2px; }
.tn .tn-share .tn-button.is-done { background: var(--tn-ok); color: #06210f; }
.tn-share__apps { display: flex; flex-wrap: wrap; gap: 8px; }
.tn-share__app { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); color: #fff; font: 800 .82rem/1 var(--tn-heading); letter-spacing: .03em; text-decoration: none; transition: border-color .15s ease, background-color .15s ease; }
.tn-share__app i { font-size: 1.05rem; }
.tn-share__app:hover { border-color: var(--tn-ember); background: rgba(255, 106, 31, .14); }
.tn-share__app:focus-visible { outline: 3px solid var(--tn-ember); outline-offset: 2px; }
.tn-share__app .fa-telegram { color: #2aabee; }
.tn-share__app .fa-whatsapp { color: #25d366; }
.tn-share__app .fa-vk { color: #4c8bf5; }

/* ===== Narrow containers ===== */
@container (max-width: 900px) {
  .tn-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tn-layout { grid-template-columns: minmax(0, 1fr); }
  .tn-fields { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 640px) {
  .tn-hero { flex-direction: column; min-height: 0; }
  .tn-hero__art { inset: 0 0 auto; width: 100%; height: 280px; background-position: center 22%; -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent); mask-image: linear-gradient(180deg, #000 40%, transparent); }
  .tn-hero::before { background: radial-gradient(90% 60% at 0 0, rgba(255, 106, 31, .3), transparent 62%), linear-gradient(180deg, rgba(11, 13, 18, 0) 60px, rgba(11, 13, 18, .75) 170px, #0b0d12 270px); }
  .tn-hero__body { padding-top: 150px; }
  .tn-hero__stats > * { flex-basis: 100%; }
  .tn-clock__cells > span { flex: 1; min-width: 0; }
  .tn-skeleton { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 520px) {
  .tn-facts { gap: 10px; }
  .tn-fact { padding: 12px; }
  .tn-fact__icon { width: 30px; height: 30px; margin-bottom: 2px; border-radius: 9px; font-size: .85rem; }
  .tn-fact strong { font-size: .92rem; }
  .tn-hero__cta .tn-button, .tn-submit .tn-button { width: 100%; }
  .tn-submit { justify-items: stretch; }
  .tn-ticket__stub { min-width: 74px; padding: 14px 8px; }
  .tn-ticket__stub b { font-size: 1.9rem; }
  .tn-ticket__body { padding-left: 16px; }
  .tn-ticket__go { padding-right: 10px; }
  .tn-step { padding: 14px; }
  .tn-panel__aside { margin-left: 0; }
  .tn-bar .tn-button span { display: none; }
  .tn-bar .tn-button[data-tn="list"] span { display: inline; }
}
@media (max-width: 700px) {
  .tournaments-page > main { padding: 0 16px 48px; }
  .tn-site-header { padding: 14px 16px; }
  .tn-site-footer { padding: 20px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .tn *, .tn *::before, .tn *::after { animation: none !important; transition: none !important; }
}
@container (max-width: 520px) {
  .tn .tn-tabs__item { padding: .6rem .9rem; font-size: .8rem; }
  .tn .tn-tabs__item span { display: none; }
  .tn .tn-tabs__item.is-active span { display: inline; }
  .tn-bracket { --tn-elbow: 14px; --tn-card: min(70vw, 230px); }
  .tn-steps__item { padding: 12px; }
  .tn-ticket__art { width: 52%; }
  .tn-share { padding: 12px; }
  .tn-share__row { flex-direction: column; }
}

/* The overall qualification table keeps the server's order across every group. */
.tn-table--groups{font-variant-numeric:tabular-nums}.tn-table--groups td:nth-child(2){text-align:left;min-width:150px;max-width:320px;overflow-wrap:anywhere}.tn-table--groups td:not(:nth-child(2)){white-space:nowrap}.tn-table--groups small{display:block;margin-top:5px;color:var(--tn-muted);font-size:.72rem;font-weight:500}.tn-table--groups .is-qualified td{background:color-mix(in srgb,var(--tn-ember) 9%,transparent)}.tn-table--groups .is-qualified td:first-child{border-left:3px solid var(--tn-ember)}.tn-table--groups .is-ineligible{color:var(--tn-muted)}.tn-group-matches{margin-top:12px}.tn-group-matches>summary{flex-wrap:wrap;line-height:1.4}.tn-group-matches>summary small{margin-left:auto;color:var(--tn-muted);font-size:.75rem;font-weight:500}.tn-group-matches>.tn-rounds{padding:0 14px 14px}.tn-group-matches .tn-round__head{margin-top:14px}