/* Tournament card (lobby) — weekly «Arena Sunday» blitz arena. Glass + gold,
   fire streak glow, medal podium rows, spring pop on points change.
   Also home to the СОБЫТИЯ screen (`.view-events`, `ev-*`) at the foot of this
   file: `/events` has no stylesheet of its own, index.html is frozen for this
   round so one cannot be linked, and the two screens are the same subject —
   the arena's calendar. */

.tn-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(241, 193, 82, 0.24);
}

.tn-card::before {
  content: "";
  position: absolute;
  inset: -40% 30% auto -10%;
  height: 220px;
  background: radial-gradient(closest-side, rgba(241, 193, 82, 0.16), transparent);
  pointer-events: none;
}

.tn-card.tn-active::before {
  background: radial-gradient(closest-side, rgba(241, 193, 82, 0.22), transparent);
}

.tn-title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.2px;
}

.tn-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--gold);
  border: 1px solid rgba(241, 193, 82, 0.35);
  border-radius: var(--r-pill);
  padding: 3px 10px;
}

.tn-badge-live {
  color: #ff8a5d;
  border-color: rgba(255, 138, 93, 0.45);
  animation: tnLivePulse 1.6s var(--ease-out) infinite;
}

.tn-badge-done {
  color: var(--text-dim);
  border-color: var(--stroke-strong);
}

@keyframes tnLivePulse {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(255, 138, 93, 0);
  }
  50% {
    box-shadow: 0 0 16px rgba(255, 138, 93, 0.45);
  }
}

/* --- countdown --- */
.tn-cd-wrap {
  margin-top: 12px;
  text-align: center;
}

.tn-cd-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-faint);
  margin-bottom: 8px;
}

.tn-cd {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.tn-cd-unit {
  min-width: 62px;
  padding: 10px 12px 8px;
  border-radius: var(--r-md);
  background: var(--panel-soft);
  border: 1px solid var(--stroke);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.tn-cd-val {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  color: var(--gold);
  text-shadow: 0 0 14px rgba(241, 193, 82, 0.4);
  font-variant-numeric: tabular-nums;
}

.tn-cd-lbl {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-faint);
}

.tn-format {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
}

/* --- scheduled registration --- */
.tn-register {
  margin-top: 14px;
}

.tn-reg-row {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.tn-reg-count {
  margin-top: 10px;
  text-align: center;
  font-size: 12.5px;
}

/* --- active: my score + clock --- */
.tn-live-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: center;
}

.tn-my {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px;
  border-radius: var(--r-md);
  background: var(--panel-soft);
  border: 1px solid rgba(241, 193, 82, 0.18);
}

.tn-points {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 46px;
  line-height: 1;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(241, 193, 82, 0.35));
  font-variant-numeric: tabular-nums;
}

.tn-pop {
  animation: tnPop var(--dur-slow) var(--spring);
}

@keyframes tnPop {
  0% {
    transform: scale(0.55);
    filter: drop-shadow(0 0 26px rgba(241, 193, 82, 0.8));
  }
  60% {
    transform: scale(1.18);
  }
  100% {
    transform: scale(1);
  }
}

.tn-my-label {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-faint);
}

.tn-streak {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  border: 1px solid var(--stroke);
  border-radius: var(--r-pill);
  padding: 3px 10px;
}

.tn-streak.hot {
  color: #ffb020;
  border-color: rgba(255, 176, 32, 0.5);
  box-shadow: 0 0 16px rgba(255, 138, 43, 0.4);
  animation: tnFire 1.2s ease-in-out infinite;
}

@keyframes tnFire {
  0%,
  100% {
    box-shadow: 0 0 10px rgba(255, 138, 43, 0.35);
  }
  50% {
    box-shadow: 0 0 22px rgba(255, 138, 43, 0.65);
  }
}

.tn-wdl {
  font-size: 12.5px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.tn-play {
  margin-top: 14px;
}

.tn-waiting {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* --- standings board --- */
.tn-board-wrap {
  margin-top: 14px;
}

.tn-board-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-faint);
  margin-bottom: 8px;
}

.tn-row .tn-pts {
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tn-streak-sm {
  font-size: 13px;
}

.tn-streak-sm.hot {
  filter: drop-shadow(0 0 6px rgba(255, 138, 43, 0.8));
}

.tn-top1 {
  background: linear-gradient(90deg, rgba(241, 193, 82, 0.12), transparent 70%);
  border-color: rgba(241, 193, 82, 0.4);
}

.tn-top2 {
  background: linear-gradient(90deg, rgba(192, 202, 214, 0.1), transparent 70%);
}

.tn-top3 {
  background: linear-gradient(90deg, rgba(205, 127, 50, 0.1), transparent 70%);
}

/* --- finished: champion --- */
.tn-champion {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  border-radius: var(--r-md);
  border: 1px solid rgba(241, 193, 82, 0.4);
  background: linear-gradient(135deg, rgba(241, 193, 82, 0.14), rgba(224, 162, 58, 0.05));
  box-shadow: var(--shadow-glow-gold);
}

.tn-crown {
  font-size: 26px;
}

.tn-champion-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
}

/* THE ONE CONVERSION IN THIS SWEEP THAT MOVES PIXELS, and it moves them
   because the window query was firing at the wrong time. `@container scene`
   (shell.css «WINDOW CLASSES»): the box this grid lives in is the scene, and
   between a 905 and a 936px window the scene is 529–560 — narrower than the
   560 this rule asks about, while the WINDOW is wider than it. Measured on
   /dashboard at a 905px window: `.tn-live-grid` resolved to two 221.5px
   columns inside a 527px scene, i.e. the two-column reading of a rule that had
   already decided two columns do not fit. After: one 527px column, which is
   what the same 560 means when it is asked of the right box.
   And again, larger, on a phone held sideways: a notched landscape phone
   spends 47px of window on each ear plus 61–77 on the rail, so 844x390 leaves
   a 436px scene and 932x430 leaves 460 — a 472px gap between the two units at
   the widest. Measured at 844x390: two 176px columns before, one 366px column
   after, with `.tn-points` 46px -> 38px, `.tn-cd-val` 26 -> 22 and
   `.tn-cd-unit` min-width 62 -> 56 following it.
   The number is unchanged on purpose — below 800px the shell is one column and
   scene width == window width, so every upright phone reads exactly as before,
   and 390 measures byte-identical. */
@container scene (max-width: 560px) {
  .tn-live-grid {
    grid-template-columns: 1fr;
  }

  .tn-cd-unit {
    min-width: 56px;
    padding: 8px 10px 6px;
  }

  .tn-cd-val {
    font-size: 22px;
  }

  .tn-points {
    font-size: 38px;
  }
}


/* ==========================================================================
   СОБЫТИЯ — the /events screen (js/views/events.js)

   /events has no stylesheet of its own: index.html is frozen for this round so
   one cannot be linked, and the two screens are the same subject — the arena's
   calendar. Every number below is copied from the Claude Design console mock's
   inline styles rather than eyeballed.

   THE LADDER is the shell's documented budget (shell.css, «WINDOW CLASSES»),
   not the mock's device list: three columns need >= 900 SCENE pixels and two
   need >= 620. This matters here more than anywhere, because the two-column
   reading is exactly what was broken — at a 1280 window the old grid put the
   week and the recent list in the left track and the Battle Royale alone in
   the right, so the right column ended at y=636 while the left ran on, leaving
   roughly 407×590 of dead scene. A three-panel screen has no two-column
   reading that balances, so 620–899 stacks the Battle Royale UNDER the pair
   and 900+ is the mock's three tracks.
   ========================================================================== */

#view.ev-host,
#scene.shell-scene #view.ev-host {
  max-width: none;
  padding: 12px 12px 16px;
  overflow-x: hidden;
}
.ev-screen { display: grid; grid-template-rows: auto auto; gap: 11px; min-width: 0; }
.ev-gap { flex: 1 1 auto; }

/* --- hero: the tournament of the week ---
   mock: 18px 22px, r18, 1px rgba(241,193,82,.34) over a 115deg gradient, with
   a 90px sheen every 6s. */
.ev-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(241, 193, 82, 0.34);
  background: linear-gradient(115deg, rgba(60, 34, 10, 0.62), rgba(30, 18, 52, 0.72));
}
.ev-hero.is-live { border-color: rgba(255, 93, 108, 0.4); box-shadow: 0 0 34px rgba(255, 93, 108, 0.14); }
.ev-hero-skel { width: 100%; height: 66px; margin: 0; }
.ev-hero-sheen {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 90px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: ev-sheen 6s ease-in-out infinite;
}
@keyframes ev-sheen {
  from { transform: translateX(-120%) skewX(-18deg); }
  to { transform: translateX(320%) skewX(-18deg); }
}
.ev-hero-glyph { position: relative; flex: 0 0 auto; font-size: 34px; line-height: 1; }
.ev-hero-col { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ev-hero-kicker {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.ev-hero-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
}
.ev-hero-sub { font-size: 12px; line-height: 1.45; color: var(--text-soft); }
.ev-hero-clockcol {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.ev-hero-clock {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--gold);
  text-shadow: 0 0 20px rgba(241, 193, 82, 0.45);
}
.ev-hero.is-live .ev-hero-clock { color: var(--danger); text-shadow: 0 0 20px rgba(255, 93, 108, 0.45); }
.ev-hero-clocklbl {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
/* the gold primary — mock: 14px 26px / r12 / Unbounded 14/800 */
.ev-hero-act {
  position: relative;
  flex: 0 0 auto;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  padding: 13px 22px;
  border-radius: 12px;
  background: var(--gold-grad);
  color: var(--gold-ink);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 10px 28px rgba(241, 193, 82, 0.34);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
@media (hover: hover) {
  .ev-hero-act:hover { transform: translateY(-2px); }
}
.ev-hero-act:active { transform: scale(0.96); }
.ev-hero-act:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
/* Already registered: the button stops shouting and becomes the door to the
   standings, which is the only thing left to do with it. */
.ev-hero-act.is-done {
  background: none;
  border: 1px solid var(--stroke-strong);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  padding: 11px 16px;
  box-shadow: none;
}

/* --- the board of panels --- */
.ev-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 11px; min-width: 0; }
.ev-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  border-radius: 16px;
  border: 1px solid rgba(167, 139, 250, 0.18);
  background: rgba(18, 12, 34, 0.56);
  overflow: hidden;
}
.ev-panel-br { border-color: rgba(255, 93, 108, 0.24); background: rgba(28, 14, 26, 0.5); }
.ev-panel-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--hairline);
}
.ev-panel-br .ev-panel-head {
  border-bottom-color: rgba(255, 93, 108, 0.2);
  /* The weekly-cup banner sits behind the header copy as atmosphere, not as a
     competing foreground: a left-weighted dark scrim keeps the pink title and
     the week note readable at 390 and 1280 alike. Absolute path matches the
     font url() convention — this stylesheet is two dirs deep under css/views. */
  background-image:
    linear-gradient(90deg, rgba(18, 7, 14, 0.94) 0%, rgba(18, 7, 14, 0.78) 55%, rgba(18, 7, 14, 0.52) 100%),
    url("/chess/arena/assets/season/cup_weekly_banner.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* The month theme's header wears the season backdrop exactly the way the cup
   banner above does: a left-weighted dark scrim (amethyst-tinted to the art)
   keeps the week title and the season note legible at 390 and 1280 alike while
   the court reads as atmosphere behind them, never a competing foreground.
   events.js sets the season tone only when a theme is present. */
.ev-panel-season .ev-panel-head {
  border-bottom-color: rgba(167, 139, 250, 0.2);
  background-image:
    linear-gradient(90deg, rgba(13, 9, 24, 0.94) 0%, rgba(13, 9, 24, 0.78) 55%, rgba(13, 9, 24, 0.52) 100%),
    url("/chess/arena/assets/season/season_amethyst_court.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.ev-panel-title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ev-panel-br .ev-panel-title { color: #ff8a94; }
.ev-panel-note {
  font-size: 10px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The body sizes to its content; the scene scrolls the page. */
.ev-panel-body { flex: 1 1 auto; min-height: 0; padding: 9px; }

/* --- «сервер этого ещё не отдаёт» ---
   Not «не удалось загрузить»: the request succeeded and the field is missing.
   The mock's taxonomy calls this shape `wait` — it does not depend on the
   player — so it wears the violet and never the gold. */
.ev-absent {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px 15px;
  border-radius: var(--r-lg);
  border: 1px dashed rgba(167, 139, 250, 0.36);
  background: rgba(167, 139, 250, 0.05);
}
.ev-absent-title { font-family: var(--font-display); font-size: 13px; font-weight: 800; line-height: 1.25; }
.ev-absent-sub { font-size: 11px; line-height: 1.55; color: var(--text-dim); }

/* --- the week ---
   mock row: 9px 10px, r10, 9px gap; today keeps the gold rim. */
.ev-week { display: flex; flex-direction: column; gap: 6px; }
.ev-day {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(167, 139, 250, 0.1);
  background: rgba(26, 17, 48, 0.4);
  min-width: 0;
}
.ev-day.is-today { border-color: rgba(241, 193, 82, 0.36); background: rgba(241, 193, 82, 0.09); }
.ev-day-name {
  flex: 0 0 auto;
  width: 30px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft);
}
.ev-day.is-today .ev-day-name { font-weight: 800; color: var(--gold); }
.ev-day-icon { flex: 0 0 auto; width: 22px; font-size: 15px; text-align: center; }
.ev-day-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ev-day-title { font-size: 11px; font-weight: 500; color: var(--text-soft); }
.ev-day.is-today .ev-day-title { font-weight: 700; color: var(--text); }
.ev-day-sub { font-size: 9px; line-height: 1.3; color: var(--text-faint); }
.ev-week-note {
  margin-top: auto;
  padding: 11px;
  border-radius: 11px;
  background: rgba(124, 58, 237, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.24);
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-soft);
}

/* --- battle royale --- */
.ev-br-body { display: flex; flex-direction: column; gap: 11px; padding: 13px 14px; }
.ev-br-tiles { display: flex; gap: 9px; }
.ev-br-tile {
  flex: 1 1 0;
  padding: 10px;
  border-radius: 10px;
  text-align: center;
  background: rgba(255, 93, 108, 0.09);
}
.ev-br-tile.is-gold { background: rgba(241, 193, 82, 0.09); }
.ev-br-num { font-size: 19px; font-weight: 700; line-height: 1.1; }
.ev-br-tile.is-gold .ev-br-num { color: var(--gold); }
.ev-br-lbl { margin-top: 2px; font-size: 9px; color: var(--text-faint); }

/* --- replay theatre ---
   mock row: a 44px thumbnail, a title and one line of meta, r11 with a rim
   that only appears on hover — an openable row and a stated one look the same
   until the pointer says otherwise. */
.ev-rc-list { display: flex; flex-direction: column; gap: 7px; }
.ev-rc {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px;
  border-radius: 11px;
  border: 1px solid transparent;
  background: rgba(30, 20, 54, 0.5);
  text-align: left;
  color: inherit;
  min-width: 0;
}
.ev-rc.is-open { cursor: pointer; transition: border-color var(--dur-fast), transform var(--dur-fast); }
@media (hover: hover) {
  .ev-rc.is-open:hover { border-color: rgba(167, 139, 250, 0.38); }
}
.ev-rc.is-open:active { transform: scale(0.985); }
.ev-rc-thumb {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font-size: 18px;
  background: rgba(124, 58, 237, 0.16);
  border: 1px solid rgba(167, 139, 250, 0.22);
}
.ev-rc-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ev-rc-name {
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ev-rc-meta {
  font-size: 9px;
  line-height: 1.35;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ev-rc-cta {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(241, 193, 82, 0.4);
  color: var(--gold);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- two columns: the pair that balances ----------
   The week and the replays are both long lists; the Battle Royale is three
   lines. Pairing the two lists and running the Battle Royale full width under
   them is the reading that leaves no hole — which is precisely what the old
   two-column grid did not do. */
@container scene (min-width: 620px) {
  .ev-hero { flex-wrap: nowrap; gap: 22px; padding: 18px 22px; }
  .ev-hero-glyph { font-size: 42px; }
  .ev-hero-name { font-size: 23px; }
  .ev-hero-clock { font-size: 30px; }
  /* 12px, not the 11 the clan board uses: the mock gives this screen's grid
     `gap:12px` and the clan board's `gap:11px`, and they are copied. */
  .ev-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
  /* `order`, not just a column span: the panel is second in the DOM (which is
     the phone's reading), so auto-placement would give it row 2 and push the
     replays to row 3 — a full-width strip with a 412×387 hole beside it, which
     is the exact defect this screen was reported for. Ordering it last makes
     row 1 the two long lists and row 2 the strip. */
  .ev-grid > .ev-panel-br { order: 3; grid-column: 1 / -1; max-height: none; }
}

/* ---------- the mock's frame: three tracks, the page scrolls ----------
   Three tracks side by side; the view grows to content and the scene scrolls.
   `align-items: start` keeps the density law (emptiness costs <=120px): rows
   size by content, the leftover air sits BELOW the panels, never inside them.
   The old height-lock (height:100% + overflow:hidden on the host and screen,
   minmax(0,1fr) grid rows, max-height:100% on panels) was the prison that
   stranded content below the fold of a box whose scroller is invisible on
   macOS — the same anti-pattern the clans screen had. */
@container scene (min-width: 900px) {
  #view.ev-host,
  #scene.shell-scene #view.ev-host { padding: 16px 18px; }
  .ev-screen { gap: 13px; }
  .ev-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: start;
  }
  .ev-grid > .ev-panel-br { order: 0; grid-column: auto; }
}

/* The stands door on the replay panel's head. `data-tight` opts it out of the
   44px touch floor: it is a header link, not a control the screen is for. */
.ev-panel-act {
  flex: 0 0 auto;
  margin-left: auto;
  cursor: pointer;
  border: 0;
  background: none;
  padding: 2px 0 2px 8px;
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--dur-fast);
}
@media (hover: hover) {
  .ev-panel-act:hover { color: var(--gold); }
}
.ev-br-hint { font-size: 11px; line-height: 1.5; color: var(--text-soft); }