/* PRIME -- esports.playprimetanki.com, Prime Tanki Esports (rebuilt 2026-10-05).

   The look is the official Tanki tournament site of 2017 (tournament.tankionline.com,
   measured from the owner's saved copy): a battle picture at the top of a near-black
   page, a dark glass menu bar whose tabs are the tournaments themselves, one 1040px
   column of near-black panels with a 2px grey frame, lime #87d704 for what is active,
   and Inter for every word, as the main site and the game (the 2017 site's PT Sans read cheap). The tournaments' own art (Blitz, Masters
   of the Sword) carries the colour; the page around it stays quiet.

   What this file does NOT do, on purpose (owner, 2026-10-05: "looks too AI"): no boxes
   inside panels, no numbered cards, no rounded tags, no icons that are not the game's.
   Lists are rows, facts are plain columns, a format is one line of words.

   House rules (CLAUDE.md, Speed rules): only transform and opacity animate; no filter or
   backdrop-filter anywhere; no !important. Every name on the page is typed by players and
   is written by esports-site.js as text, never as HTML.

   Contents
     1  Fonts and tokens          8  Lists, ratings and tables
     2  Base                      9  One tournament: head, facts, teams
     3  Menu bar                 10  Brackets and matches
     4  Hero and tournament art  11  My team and forms
     5  Panels and titles        12  Profiles (12b: the player)
        (11c: the join page, 11d: the other pages of the way in)
     6  Buttons and tabs         13  Footer
     7  Status, countdown,       14  Tablets and phones
        format line, next up */

/* 1  Fonts and tokens ------------------------------------------------------- */
/* Inter, the main site's face and the game client's own (owner 2026-10-12: PT Sans "feels cheap").
   size-adjust sets it at PT Sans's letter height, so the sizes below still hold. */
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-v20-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  size-adjust: 94%;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-v20-cyrillic-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  size-adjust: 94%;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* The main site's wordmark face: lower case only, used for "prime tanki esports". */
@font-face {
  font-family: "Quadrat Grotesk";
  src: url("assets/fonts/quadrat-grotesk-new-bold.woff2") format("woff2");
  font-display: swap;
}
/* The game client's button face: capitals and digits, used on the green button only. */
@font-face {
  font-family: "Tanki Quadrat";
  src: url("assets/fonts/quadrat-game.woff2") format("woff2");
  font-display: swap;
}

:root {
  --page: #0e0904;
  --panel: rgba(13, 13, 13, 0.94);
  --line: #8f8f8f;
  --rule: rgba(255, 255, 255, 0.1);
  --zebra: rgba(255, 255, 255, 0.04);
  --text: #ffffff;
  --muted: #c9c9c9;
  --dim: #8c8c8c;
  --lime: #87d704;
  --lime-glow: #e9ff83;
  --red: #ff5a4f;
  --blue: #49a6ff;
  --gold: #ffcf3f;
  --silver: #cfd6dd;
  --bronze: #d9925a;
  --warn: #ffb03b;
  --live: #ff4d3d;
  --wrap: 1040px;
  --radius: 5px;
  --sans: "Inter", Arial, Helvetica, sans-serif;
  --logo: "Quadrat Grotesk", "Inter", Arial, sans-serif;
  --quadrat: "Tanki Quadrat", "Inter", Arial, sans-serif;
  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* The arena picture is shaded at the top and fades into the page colour at the bottom by
   itself (see tools/esports-art.py), so nothing here needs a filter. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  --art-w: max(1200px, 100vw);
  background: var(--page) url("assets/bg-arena-1920-v6.webp") center calc(59px + var(--art-w) * 9 / 16 * 0.03) / var(--art-w) auto no-repeat;
  background-image: image-set(url("assets/bg-arena-1920-v6.webp") 1x, url("assets/bg-arena-2560-v6.webp") 2x);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
}

/* A screen wider than the 1920 file gets the 2560 one even at 1x (image-set only looks at the
   pixel ratio, so a 2560 wide monitor was being served the 1920 picture stretched). */
@media (min-width: 1921px) {
  body {
    background-image: url("assets/bg-arena-2560-v6.webp");
  }
}

a {
  color: inherit;
}

img {
  max-width: 100%;
}

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

h1,
h2 {
  letter-spacing: -0.012em;
}

button,
input,
select {
  font: inherit;
}

:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 50;
  padding: 8px 14px;
  border-radius: var(--radius);
  background: var(--lime);
  color: #000;
  font-weight: 700;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: none;
}

.es-wrap {
  width: min(var(--wrap), calc(100% - 32px));
  margin-inline: auto;
}

.es-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding-block: 28px 64px;
}

.es-hero + .es-main {
  padding-top: 0;
}

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

.es-dim {
  color: var(--dim);
}

.es-lime {
  color: var(--lime);
}

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

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

.es-num {
  font-variant-numeric: tabular-nums;
}

.es-small {
  color: var(--dim);
  font-size: 15px;
}

.es-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The small capital labels of a sports table: column heads, states, fact names. */
.es-table th,
.es-status,
.es-count small,
.es-facts dt,
.es-tile small,
.es-role,
.es-round h3,
.es-match-foot,
.es-champ small,
.es-subhead {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* 3  Menu bar --------------------------------------------------------------- */
/* Dark glass, as the 2017 tournament site: the tabs are the tournaments themselves. */
.es-top {
  position: relative;
  z-index: 5;
  border-bottom: 1px solid #000;
  background: linear-gradient(rgba(62, 62, 62, 0.94), rgba(34, 34, 34, 0.95) 48%, rgba(19, 19, 19, 0.96) 52%, rgba(27, 27, 27, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 14px rgba(0, 0, 0, 0.55);
}

.es-top-in {
  display: flex;
  align-items: center;
  gap: 8px 30px;
  min-height: 58px;
}

.es-brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
}

.es-brand img {
  width: 34px;
  height: 34px;
}

.es-wordmark {
  font-family: var(--logo);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1;
  text-transform: lowercase;
  white-space: nowrap;
}

.es-wordmark b {
  color: var(--lime);
  font-weight: 400;
}

.es-nav {
  display: flex;
  min-width: 0;
}

.es-nav a {
  display: block;
  padding: 0 14px;
  color: var(--text);
  font-size: 19px;
  line-height: 58px;
  text-decoration: none;
  white-space: nowrap;
}

.es-nav a:hover,
.es-nav a[aria-current] {
  color: var(--lime);
}

.es-nav a[aria-current] {
  box-shadow: inset 0 -3px 0 var(--lime);
}

.es-account {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  margin-left: auto;
  font-size: 16px;
}

.es-account a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
}

.es-account a:hover {
  color: var(--lime);
}

/* 4  Hero and tournament art -------------------------------------------------- */
/* The home page's top is the arena picture itself (the page background, which starts right
   under the menu): the words sit on the plain banner in its middle, and the first panel starts
   where the tanks fade out. The heights follow the picture's width, var(--art-w), at 16:9. */
.es-hero {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 10px;
  min-height: calc(var(--art-w) * 9 / 16 * 0.273);
  box-sizing: border-box;
  padding: calc(var(--art-w) * 9 / 16 * 0.175 - 50px) 16px 28px;
  text-align: center;
}

.es-hero img {
  display: none;
}

.es-wordmark--hero {
  font-size: clamp(40px, 6.2vw, 68px);
  letter-spacing: -0.018em;
  line-height: 0.95;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.7);
}

.es-hero p {
  max-width: none;
  color: var(--muted);
  font-size: 19px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
  text-wrap: balance;
}

/* Nothing announced (owner 2026-10-12): no empty panel under the hero, its words take the room. */
.es-hero-big .es-hero {
  padding-bottom: 56px;
}

.es-hero-big .es-wordmark--hero {
  font-size: clamp(44px, 6.6vw, 80px);
}

.es-hero-big .es-hero p {
  font-size: 23px;
}

/* A tournament on the home page: its own banner, and one bar of words under it. The
   whole tile is the link. */
.es-tours {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.es-title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
}

.es-tour {
  display: block;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: #0d0d0d;
  color: var(--text);
  text-decoration: none;
}

/* Pointing at a tile makes its picture grow a little inside its own frame, slowly. Nothing
   changes colour (owner, 2026-10-05: the coloured edge looked cheap), and only the picture
   moves: the frame and the words under it stay still. */
.es-tour-pic {
  display: block;
  overflow: hidden;
  aspect-ratio: 1006 / 300;
}

.es-tour-pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (hover: hover) and (pointer: fine) {
  .es-tour:hover .es-tour-pic img {
    transform: scale(1.04);
  }
}

.es-tour:focus-visible .es-tour-pic img {
  transform: scale(1.04);
}

.es-tourhead img,
.es-group img {
  display: block;
  width: 100%;
  height: auto;
}

/* Seasons and clan leagues on the Blitz page (the approved mockup, 2026-10-09) */
.es-season-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 18px;
}

.es-season-week {
  color: var(--lime);
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 700;
}

.es-leagues {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.es-league {
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.4);
}

.es-league.is-mine {
  border-color: var(--lime);
  box-shadow: 0 0 0 1px var(--lime);
}

.es-league h3 {
  margin: 0 0 2px;
  font-size: 19px;
}

.es-league p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

.es-you {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 3px;
  background: var(--lime);
  color: #111;
  font-size: 12px;
  font-weight: 700;
  vertical-align: 2px;
}

.es-season-tabs button[aria-pressed="true"] {
  color: var(--text);
  box-shadow: inset 0 -3px 0 var(--lime);
}

.es-season-table tr.is-up td:first-child {
  box-shadow: inset 4px 0 0 var(--lime);
}

.es-season-table tr.is-down td:first-child {
  box-shadow: inset 4px 0 0 #ffb03b;
}

.es-season-table tr.is-me td {
  background: rgba(135, 215, 4, 0.08);
}

.es-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 15px;
}

.es-key li::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 7px;
  vertical-align: -1px;
}

.es-key .k-up::before {
  background: var(--lime);
}

.es-key .k-down::before {
  background: #ffb03b;
}

.es-cal {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 26px;
}

.es-cal h3 {
  margin: 0 0 6px;
  font-size: 18px;
}

.es-cal ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.es-cal li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
}

.es-cal li span:last-child {
  color: var(--muted);
  white-space: nowrap;
}

.es-cal li.is-done,
.es-cal li.is-done span:last-child {
  color: var(--dim);
}

.es-cal li.is-next {
  color: var(--lime);
  font-weight: 700;
}

.es-cal li.is-big {
  font-weight: 700;
}

.es-cal li.is-big span:first-child {
  color: #ffb03b;
}

@media (max-width: 760px) {
  .es-leagues,
  .es-cal {
    grid-template-columns: 1fr;
  }
}

/* Report a problem on a match (the approved mockup, 2026-10-09) */
.es-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.es-detail-head h3 {
  margin: 0;
}

.es-report-btn {
  min-height: 34px;
  padding: 4px 12px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.5);
  color: var(--muted);
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
}

.es-report-btn:hover,
.es-report-btn[aria-expanded="true"] {
  border-color: #ffb03b;
  color: var(--text);
}

.es-report {
  margin-top: 18px;
  padding: 16px 18px;
  border: 2px solid #ffb03b;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.55);
}

.es-report h4 {
  margin: 0 0 4px;
  font-size: 20px;
}

.es-report .es-note {
  margin: 0 0 14px;
}

.es-report-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px 22px;
}

.es-report-wide {
  grid-column: 1 / -1;
}

.es-report-label {
  font-size: 16px;
  font-weight: 700;
}

.es-reasons {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.es-reasons label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 16px;
}

.es-reasons input {
  accent-color: var(--lime);
}

.es-report textarea.es-input {
  min-height: 92px;
  resize: vertical;
  font: inherit;
}

.es-report-line {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-left: 4px solid var(--lime);
  background: rgba(135, 215, 4, 0.07);
  color: var(--muted);
}

.es-report-line b {
  color: var(--text);
}

@media (max-width: 760px) {
  .es-report-grid {
    grid-template-columns: 1fr;
  }
}

/* Masters of the Sword Clans: the groups, each its table and matches (the approved 2017 mockup) */
.es-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 26px;
}

.es-group-box h3 {
  margin: 0 0 8px;
  font-size: 19px;
}

.es-group-box tr.is-up td:first-child {
  box-shadow: inset 3px 0 0 var(--lime);
}

.es-group-matches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 760px) {
  .es-groups,
  .es-group-matches {
    grid-template-columns: 1fr;
  }
}

.es-tour-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 28px;
  padding: 14px 22px 16px;
}

.es-tour-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.es-tour-text strong {
  font-size: 23px;
  line-height: 1.2;
}

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

.es-tour-next {
  display: flex;
  flex: none;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}

.es-tour-when {
  display: grid;
  justify-items: end;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.3;
  text-align: right;
}

/* The banner at the top of a tournament's own page. */
.es-tourhead {
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: #0d0d0d;
}

.es-group + .es-group {
  margin-top: 34px;
}

.es-group img {
  margin-bottom: 16px;
}

/* Masters of the Sword opens with its logo, as its 2017 page did. */
.es-tourlogo {
  margin: 8px 0 18px;
  line-height: 0;
  text-align: center;
}

.es-tourlogo img {
  width: min(482px, 100%);
  height: auto;
}

.es-lead--center {
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
}

.es-group img {
  border-radius: 3px;
}

/* Where a tournament belongs, above its page: the series logo and its name. */
.es-crumb {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  margin-bottom: -6px;
}

.es-crumb a {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  text-decoration: none;
}

.es-crumb a:hover {
  color: var(--lime);
}

.es-crumb img {
  width: auto;
  height: 40px;
}

/* 5  Panels and titles ---------------------------------------------------------- */
.es-panel {
  min-width: 0;
  padding: 22px 26px 26px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.es-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 18px;
  margin-bottom: 16px;
}

.es-panel-head h1 {
  font-size: 30px;
  line-height: 1.15;
}

.es-panel-head h2 {
  font-size: 24px;
  line-height: 1.2;
}

.es-panel-head p {
  color: var(--muted);
  font-size: 16px;
}

.es-lead {
  max-width: 68ch;
  margin-bottom: 24px;
  font-size: 19px;
}

.es-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 24px;
}

.es-empty {
  padding: 18px 0 6px;
  color: var(--muted);
  text-align: center;
}

.es-empty h1 {
  margin-bottom: 6px;
  color: var(--text);
  font-size: 30px;
}

.es-wait {
  padding: 22px 0;
  color: var(--dim);
  text-align: center;
}

.es-note {
  margin-top: 14px;
  color: var(--dim);
  font-size: 15px;
}

/* A small heading inside a list: "Past". */
.es-subhead {
  margin: 22px 0 2px;
  color: var(--dim);
  font-size: 14px;
}

/* How it works: five plain columns, a bold word and a line under it. */
.es-how {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px 26px;
}

.es-how dt {
  font-size: 19px;
  font-weight: 700;
}

.es-how dd {
  margin-top: 3px;
  color: var(--muted);
  font-size: 16px;
}

/* 6  Buttons and tabs ------------------------------------------------------------ */
/* The original 2014 green button (the main site's .fight-button, same art). */
.es-fight {
  --fb-h: 54px;
  --fb-cap: calc(var(--fb-h) * 20 / 86);
  position: relative;
  display: inline-grid;
  place-items: center;
  min-height: var(--fb-h);
  padding: 6px calc(var(--fb-cap) + 16px) 7px;
  isolation: isolate;
  border: 0;
  background: none;
  color: var(--lime-glow);
  cursor: pointer;
  font-family: var(--quadrat);
  font-size: 19px;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 0 7px rgba(214, 255, 110, 0.5), 0 1px 1px rgba(30, 70, 0, 0.45);
  text-transform: uppercase;
  transition: transform 90ms ease;
}

.es-fight::before,
.es-fight::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  border-style: solid;
  border-width: 0 var(--fb-cap);
  border-image: url("assets/fight-button-v1.webp") 0 20 fill / 0 var(--fb-cap) / 0 round stretch;
  pointer-events: none;
}

.es-fight::after {
  border-image-source: url("assets/fight-button-hover-v1.webp");
  opacity: 0;
  transition: opacity 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .es-fight:hover::after {
    opacity: 1;
  }
}

.es-fight:active {
  transform: translateY(1px);
}

.es-fight[disabled] {
  cursor: default;
  opacity: 0.55;
}

/* The glossy grey button of the old Tanki sites: lit above the middle, dark below. */
.es-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 6px 18px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(rgba(117, 117, 117, 0.81), rgba(80, 80, 80, 0.78) 45%, rgba(29, 29, 29, 0.72) 52%, rgba(22, 22, 22, 0.72) 82%, rgba(71, 71, 71, 0.77));
  color: var(--text);
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 120ms ease, transform 90ms ease;
}

.es-btn:hover {
  opacity: 0.86;
}

.es-btn:active {
  transform: translateY(1px);
}

.es-btn[disabled] {
  cursor: default;
  opacity: 0.5;
}

.es-btn--small {
  min-height: 32px;
  padding: 3px 12px;
  font-size: 15px;
}

.es-btn--lime {
  border-color: rgba(135, 215, 4, 0.8);
  color: var(--lime-glow);
}

.es-btn--discord {
  border-color: #5865f2;
  background: #5865f2;
}

.es-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--lime);
  cursor: pointer;
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.es-tap {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 4px;
}

.es-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.es-actions--center {
  justify-content: center;
  margin-top: 14px;
}

/* Tabs: words in a row, the chosen one lime with a lime line under it. Links on the
   rating page, buttons where they switch something on the page itself. */
.es-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  margin-bottom: 16px;
  box-shadow: inset 0 -1px 0 var(--rule);
}

.es-tabs a,
.es-tabs button {
  min-height: 40px;
  padding: 6px 12px 8px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}

.es-tabs a:hover,
.es-tabs button:hover {
  color: var(--text);
}

.es-tabs a[aria-current],
.es-tabs button[aria-pressed="true"] {
  box-shadow: inset 0 -3px 0 var(--lime);
  color: var(--lime);
}

/* 7  Status, countdown, format line, next up ---------------------------------------- */
.es-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--dim);
  font-size: 14px;
  white-space: nowrap;
}

.es-status::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.es-status--running,
.es-status--live {
  color: var(--live);
}

.es-status--running::before,
.es-status--live::before,
.es-status--ready::before {
  animation: es-blink 1.2s ease-in-out infinite;
}

.es-status--ready,
.es-status--registration {
  color: var(--lime);
}

.es-status--checkin {
  color: var(--warn);
}

.es-status--upcoming {
  color: var(--muted);
}

@keyframes es-blink {
  50% {
    opacity: 0.25;
  }
}

.es-count {
  display: grid;
  gap: 1px;
}

.es-count small {
  color: var(--dim);
  font-size: 14px;
}

.es-count strong {
  font-size: 34px;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  white-space: nowrap;
}

/* A format, said in one line: 2v2 · XP/BP · CTF 10 min · first to 5 flags. */
.es-format {
  display: flex;
  flex-wrap: wrap;
  gap: 0 7px;
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 15px;
  list-style: none;
}

.es-format li + li::before {
  margin-right: 7px;
  color: var(--dim);
  content: "\00b7";
}

.es-format b {
  color: var(--text);
}

/* The next tournament, or the live one: whose it is, what and when, and the way in. */
.es-next {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px 30px;
}

/* On a tournament's own page the logo is left out: the banner above says whose it is. */
.es-next--own {
  grid-template-columns: minmax(0, 1fr) auto;
}

.es-next-logo {
  display: block;
  width: 190px;
}

.es-next-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.es-next h3 {
  margin: 4px 0 2px;
  font-size: 30px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.es-next h3 a {
  text-decoration: none;
}

.es-next h3 a:hover {
  color: var(--lime);
}

.es-next-when {
  margin-bottom: 8px;
  color: var(--muted);
}

.es-next-side {
  display: grid;
  justify-items: end;
  gap: 12px;
  text-align: right;
}

.es-next-side:empty {
  display: none;
}

/* 8  Lists, ratings and tables ------------------------------------------------------ */
.es-rank {
  display: inline-block;
  flex: none;
  width: 22px;
  height: 22px;
  object-fit: contain;
  vertical-align: -5px;
}

.es-player {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
  color: var(--text);
  text-decoration: none;
}

a.es-player:hover .es-nick {
  color: var(--lime);
}

.es-nick {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.es-tag {
  color: var(--dim);
  font-size: 0.88em;
}

/* The 2014 top 100: place, badge, name, a dotted leader, the number. */
.es-top10 {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.es-top10 li {
  display: grid;
  grid-template-columns: 26px auto minmax(20px, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 28px;
}

.es-top10 .es-place {
  color: var(--muted);
  font-weight: 700;
  text-align: right;
}

.es-top10 li::after {
  grid-column: 3;
  grid-row: 1;
  align-self: end;
  height: 1px;
  margin-bottom: 8px;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.4) 1px, transparent 1.4px);
  background-size: 6px 3px;
  content: "";
}

.es-top10 .es-score {
  grid-column: 4;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.es-place-1,
.es-top10 .es-place-1 {
  color: var(--gold);
}

.es-place-2,
.es-top10 .es-place-2 {
  color: var(--silver);
}

.es-place-3,
.es-top10 .es-place-3 {
  color: var(--bronze);
}

/* position: the words kept for screen readers inside a table are absolute, and must stay
   inside this box or they widen the page on a small phone. */
.es-table-wrap {
  position: relative;
  overflow-x: auto;
}

.es-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.es-table th {
  padding: 6px 10px 8px;
  color: var(--dim);
  font-size: 14px;
  text-align: right;
  white-space: nowrap;
}

.es-table td {
  padding: 8px 10px;
  text-align: right;
  white-space: nowrap;
}

.es-table th:first-child,
.es-table td:first-child {
  width: 48px;
  color: var(--muted);
  font-weight: 700;
}

.es-table .es-left {
  text-align: left;
}

.es-table tbody tr:nth-child(odd) {
  background: var(--zebra);
}

.es-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.08);
}

.es-table tbody tr.is-me {
  background: rgba(135, 215, 4, 0.14);
}

.es-table .es-points {
  color: var(--lime);
  font-weight: 700;
}

.es-table td.es-place-1 {
  color: var(--gold);
}

.es-table td.es-place-2 {
  color: var(--silver);
}

.es-table td.es-place-3 {
  color: var(--bronze);
}

.es-table .es-player {
  vertical-align: middle;
}

.es-table td.es-side-a {
  box-shadow: inset 3px 0 0 var(--red);
}

.es-table td.es-side-b {
  box-shadow: inset 3px 0 0 var(--blue);
}

.es-table td.es-cupcell {
  white-space: normal;
}

.es-table td.es-cupcell a {
  text-decoration: none;
  text-wrap: balance;
}

.es-table td.es-cupcell a:hover {
  color: var(--lime);
}

.es-table--lines td:first-child,
.es-table--lines th:first-child,
.es-table--series td:first-child,
.es-table--series th:first-child,
.es-table--match td:first-child,
.es-table--match th:first-child {
  width: auto;
  color: inherit;
  font-weight: inherit;
}

.es-table--series td:first-child {
  white-space: normal;
}

.es-table--series td:first-child a {
  font-weight: 700;
  text-decoration: none;
}

.es-table--series td:first-child a:hover {
  color: var(--lime);
}

.es-phone-only {
  display: none;
}

.es-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

.es-result-win,
.es-result-forfeit_win {
  color: var(--lime);
  font-weight: 700;
}

.es-result-loss,
.es-result-forfeit_loss {
  color: var(--red);
  font-weight: 700;
}

.es-result-draw {
  color: var(--muted);
  font-weight: 700;
}

/* Tournaments in a list: rows, one rule between them. */
.es-cups {
  margin: 0;
  padding: 0;
  list-style: none;
}

.es-cup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 24px;
  padding: 14px 0;
}

.es-cup + .es-cup {
  border-top: 1px solid var(--rule);
}

.es-cup:first-child {
  padding-top: 2px;
}

.es-cup:last-child {
  padding-bottom: 0;
}

.es-cup h3 {
  margin: 2px 0;
  font-size: 21px;
  line-height: 1.25;
}

.es-cup h3 a {
  text-decoration: none;
}

.es-cup h3 a:hover {
  color: var(--lime);
}

.es-cup-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px 18px;
  text-align: right;
}

.es-cup .es-count {
  justify-items: end;
}

.es-cup .es-count strong {
  font-size: 22px;
}

.es-cup-side a:not(.es-btn):not(.es-fight) {
  font-weight: 700;
  text-decoration: none;
}

.es-cup-side a:not(.es-btn):not(.es-fight):hover {
  color: var(--lime);
}

/* Champions and trophies: a gold bar down the left, silver for a finalist. */
.es-champs,
.es-trophies {
  display: grid;
  gap: 14px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.es-champs--many,
.es-trophies {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.es-champ,
.es-trophies li {
  display: grid;
  gap: 0;
  min-width: 0;
  padding: 1px 0 2px 14px;
  border-left: 3px solid var(--gold);
}

.es-trophies li.is-silver {
  border-left-color: var(--silver);
}

.es-champ small {
  color: var(--gold);
  font-size: 13.5px;
}

.es-champ a,
.es-trophies a {
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
}

.es-champ a:hover,
.es-trophies a:hover {
  color: var(--lime);
}

.es-champ .es-dim,
.es-trophies small {
  color: var(--dim);
  font-size: 15px;
}

.es-champ-cup {
  margin: 18px 0 8px;
  color: var(--muted);
  font-size: 16px;
}

.es-champ-cup:first-child {
  margin-top: 0;
}

.es-champ-cup a {
  text-decoration: none;
}

.es-champ-cup a:hover {
  color: var(--lime);
}

/* 9  One tournament: head, facts, teams ---------------------------------------------- */
.es-cup-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px 30px;
}

.es-cup-head h1 {
  margin: 4px 0 2px;
  font-size: 34px;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

/* What, when and how, in plain columns. */
.es-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 30px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

.es-facts dt {
  color: var(--dim);
  font-size: 14px;
}

.es-facts dd {
  margin-top: 1px;
}

.es-rules {
  display: grid;
  gap: 6px;
  max-width: 82ch;
  margin: 24px 0 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 16px;
}

.es-rules li::marker {
  color: var(--lime);
}

.es-teams {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.es-teams li {
  display: grid;
  align-content: start;
  gap: 3px;
  min-width: 0;
}

.es-teams a.es-team-name {
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
}

.es-teams a.es-team-name:hover {
  color: var(--lime);
}

.es-teams .es-checked.is-out {
  color: var(--dim);
}

.es-teams .es-checked {
  color: var(--lime);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.es-roster {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 16px;
}

.es-teams .es-roster {
  flex-direction: column;
  gap: 3px;
}

.es-roster > .es-member {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
}

.es-vs .es-player,
.es-roster > .es-member,
.es-roster .es-player {
  min-width: 0;
  max-width: 100%;
}

.es-vs-team > a,
.es-team-name,
.es-cup h3,
.es-myteam-head h3,
.es-entry h3,
.es-champ a {
  overflow-wrap: anywhere;
}

/* 10  Brackets and matches ------------------------------------------------------------ */
.es-bracket-scroll {
  margin-inline: -4px;
  padding: 4px 4px 6px;
  overflow-x: auto;
}

.es-bracket {
  display: grid;
  grid-template-columns: repeat(3, minmax(230px, 1fr));
  gap: 0 34px;
  min-width: 760px;
}

.es-round {
  display: grid;
  grid-template-rows: auto 1fr;
}

.es-round h3 {
  margin-bottom: 8px;
  color: var(--dim);
  font-size: 14px;
}

.es-round ol {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Every match of a round gets an equal share of the height and sits in its middle, so
   each match of the next round lines up with the pair that feeds it. */
.es-round li {
  position: relative;
  display: flex;
  flex: 1 1 0;
  align-items: center;
  padding: 7px 0;
}

/* the line out of each match towards the next round */
.es-round:not(:last-child) li::after {
  position: absolute;
  top: 50%;
  right: -18px;
  width: 18px;
  height: 2px;
  background: #4a4a4a;
  content: "";
}

/* the upright that joins a pair of matches */
.es-join {
  position: absolute;
  right: -18px;
  width: 2px;
  background: #4a4a4a;
}

.es-round li:nth-child(odd) .es-join {
  top: 50%;
  bottom: 0;
}

.es-round li:nth-child(even) .es-join {
  top: 0;
  bottom: 50%;
}

/* the line into a match from the pair before it */
.es-round:not(:first-child) li::before {
  position: absolute;
  top: 50%;
  left: -16px;
  width: 16px;
  height: 2px;
  background: #4a4a4a;
  content: "";
}

.es-match {
  display: grid;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid #4a4a4a;
  border-radius: 4px;
  background: #1a1a1a;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.es-match:hover {
  border-color: var(--line);
}

.es-match.is-mine {
  border-color: rgba(135, 215, 4, 0.85);
}

.es-match.is-open {
  border-color: var(--lime);
  background: #1f2414;
}

.es-side {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding-right: 10px;
}

.es-side + .es-side {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.es-side::before {
  align-self: stretch;
  background: var(--red);
  content: "";
}

.es-side--b::before {
  background: var(--blue);
}

.es-side .es-team {
  overflow: hidden;
  font-size: 16px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.es-side.is-tbd .es-team,
.es-side.is-bye .es-team {
  color: var(--dim);
  font-weight: 400;
}

.es-side.is-lost .es-team,
.es-side.is-lost .es-score {
  color: var(--dim);
}

.es-side.is-won .es-score {
  color: var(--lime);
}

.es-side .es-score {
  min-width: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.es-match-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 10px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.35);
  color: var(--dim);
  font-size: 13px;
}

.es-match-foot .es-status {
  font-size: 13px;
}

.es-match-detail {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

.es-match-detail h3 {
  margin-bottom: 2px;
  font-size: 21px;
}

.es-vs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  margin: 14px 0 18px;
}

.es-vs-team {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.es-vs-team--b {
  text-align: right;
}

.es-vs .es-roster {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.es-vs-team--b .es-roster {
  align-items: flex-end;
}

.es-vs-team > a {
  font-size: 21px;
  font-weight: 700;
  text-decoration: none;
}

.es-vs-team > a:hover {
  color: var(--lime);
}

.es-vs-score {
  font-size: 38px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  white-space: nowrap;
}

.es-room {
  display: inline;
  padding: 1px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  font-weight: 700;
}

/* 11  My team and forms ------------------------------------------------------------------ */
.es-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  max-width: 460px;
  margin-inline: auto;
}

.es-form h2 {
  font-size: 24px;
}

.es-form-lead {
  color: var(--muted);
}

.es-field {
  display: grid;
  gap: 5px;
}

.es-field label {
  font-size: 16px;
  font-weight: 700;
}

.es-input {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.75);
  color: var(--muted);
  font-size: 17px;
}

.es-input:focus {
  border-color: var(--lime);
  outline: none;
  color: var(--text);
}

.es-input[aria-invalid="true"] {
  border-color: var(--red);
}

.es-select {
  width: auto;
}

.es-field-status {
  min-height: 0;
  font-size: 15px;
}

.es-field-status.is-err {
  color: var(--red);
}

.es-field-status.is-ok {
  color: var(--lime);
}

.es-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
}

.es-inline .es-input {
  flex: 1 1 200px;
  width: auto;
}

.es-inline .es-btn {
  min-height: 44px;
}

/* What the player has to do now: a lime bar down the left, orange when time is short. */
.es-alerts {
  display: grid;
  gap: 18px;
}

.es-alert {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 24px;
  padding: 2px 0 4px 16px;
  border-left: 4px solid var(--lime);
}

.es-alert--warn {
  border-left-color: var(--warn);
}

.es-alert h2 {
  font-size: 21px;
  line-height: 1.25;
}

.es-alert p {
  color: var(--muted);
}

.es-myteam + .es-myteam,
.es-entry + .es-entry {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

.es-myteam-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 14px;
  margin-bottom: 8px;
}

.es-myteam-head h3 {
  font-size: 21px;
}

.es-myteam-head h3 a {
  text-decoration: none;
}

.es-myteam-head h3 a:hover {
  color: var(--lime);
}

.es-size {
  margin-left: 6px;
  color: var(--dim);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
}

.es-members {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.es-members li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 112px;
  align-items: center;
  gap: 6px 14px;
  min-height: 36px;
}

.es-members li > :last-child {
  justify-self: end;
}

.es-members li > .es-player {
  justify-self: start;
}

.es-role {
  color: var(--dim);
  font-size: 14px;
}

.es-role.is-invited {
  color: var(--warn);
}

.es-invite {
  margin: 10px 0 0;
}

.es-create {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

.es-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 20px;
}

.es-entry h3 {
  font-size: 20px;
}

.es-entry h3 a {
  text-decoration: none;
}

.es-entry h3 a:hover {
  color: var(--lime);
}

.es-entry p {
  color: var(--muted);
  font-size: 16px;
}

.es-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px 8px;
  font-size: 16px;
}

.es-who > * {
  flex: none;
}

.es-main--flush {
  padding-block: 0;
}

/* 11b  Create a tournament (staff; owner 2026-10-12, the approved mockup `_mockup-organize`): the
   tournament as picture tiles, the day as one line, maps as pictures to tick, the rules folded to one
   line, and on the right the tournament as players will see it with the one green button. */
.es-org {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 312px;
  align-items: start;
  gap: 30px;
}

.es-org-main {
  min-width: 0;
}

.es-org-sec {
  padding: 22px 0 24px;
  border-top: 1px solid var(--rule);
}

.es-org-sec:first-child {
  padding-top: 2px;
  border-top: 0;
}

.es-org-h,
.es-org-label {
  margin: 0 0 12px;
  color: var(--dim);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.es-org-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.es-org-h .es-link,
.es-org-h .es-org-sub {
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

.es-org-label {
  margin-top: 18px;
}

/* The tournament, then its kind: picture tiles. */
.es-pick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.es-pick + .es-pick {
  margin-top: 12px;
}

.es-pick-tile {
  display: grid;
  grid-template-rows: 86px auto;
  padding: 0;
  overflow: hidden;
  border: 2px solid #2c2c2c;
  border-radius: var(--radius);
  background: #111;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.es-pick--kinds .es-pick-tile {
  grid-template-rows: 64px auto;
}

.es-pick-tile[aria-pressed="true"] {
  border-color: var(--lime);
}

.es-pick-tile[aria-pressed="true"] b {
  color: var(--lime);
}

.es-pick-tile:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

.es-pick-art {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #090909;
}

.es-pick-logo {
  width: auto;
  max-width: 82%;
  height: auto;
  max-height: 58px;
}

.es-pick-hull {
  width: auto;
  height: 54px;
}

.es-pick-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 8%;
}

.es-pick-tanks {
  display: flex;
  justify-content: center;
  gap: 2px;
}

.es-pick-tanks img {
  width: 23%;
  height: auto;
}

.es-pick-opts {
  grid-template-columns: repeat(3, 27px);
  place-content: center;
  gap: 5px;
}

.es-pick-text {
  padding: 8px 10px 10px;
}

.es-pick-text b {
  display: block;
  font-size: 15px;
  line-height: 1.25;
}

.es-pick-text span {
  display: block;
  color: var(--dim);
  font-size: 13px;
  line-height: 1.35;
}

/* A few choices: one row of buttons over the select that keeps the value (esports-site.js segs). */
.es-seg {
  display: inline-flex;
  flex-wrap: wrap;
  justify-self: start;
  overflow: hidden;
  border: 1px solid #3a3a3a;
  border-radius: var(--radius);
}

.es-seg button {
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-left: 1px solid #3a3a3a;
  background: #151515;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
}

.es-seg button:first-child {
  border-left: 0;
}

.es-seg button[aria-pressed="true"] {
  background: #263612;
  color: #c8f26a;
}

.es-seg button:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: -2px;
}

/* The bracket: cards, a title and one line; a card the entry rules out says why. */
.es-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.es-cards button {
  position: relative;
  padding: 10px 12px 11px;
  border: 2px solid #2c2c2c;
  border-radius: var(--radius);
  background: #111;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.es-cards b {
  display: block;
  font-size: 15px;
}

.es-cards span {
  display: block;
  color: var(--dim);
  font-size: 13px;
}

.es-cards em {
  position: absolute;
  top: 9px;
  right: 10px;
  color: var(--warn);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.es-cards button[aria-pressed="true"] {
  border-color: var(--lime);
}

.es-cards button[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
}

.es-cards button[aria-pressed="true"][disabled] {
  border-color: var(--red);
  opacity: 1;
}

select[aria-invalid="true"] + .es-seg,
select[aria-invalid="true"] + .es-cards {
  outline: 1px solid var(--red);
  outline-offset: 3px;
}

/* Label left, control right, its line under the control. */
.es-org-rows {
  display: grid;
  gap: 12px;
}

.es-org-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 6px 18px;
}

.es-org-row > label,
.es-org-name {
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
}

.es-org-row > .es-field-status,
.es-org-row > .es-org-gear {
  grid-column: 2;
}

.es-org-row > .es-field-status:empty {
  display: none;
}

.es-org-row--top {
  align-items: start;
}

.es-org-row--top > .es-org-name {
  padding-top: 8px;
}

.es-org-row .es-input {
  width: auto;
  min-width: 0;
}

.es-org-row > .es-input:not(.es-org-narrow) {
  width: 100%;
}

.es-org-narrow {
  max-width: 280px;
}

.es-org-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.es-org-sub {
  color: var(--dim);
  font-size: 14px;
}

.es-org-row .es-org-num {
  width: 84px;
  text-align: center;
}

.es-org-gear {
  color: var(--dim);
  font-size: 14px;
}

.es-org-group + .es-org-group {
  margin-top: 22px;
  padding-top: 4px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.es-org-after {
  margin-top: 14px;
}

/* The game's option tiles (CreateBattleForm.drawTile), three a row. */
.es-org-checks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px 14px;
}

.es-org-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
}

.es-org-check input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.es-org-tile {
  --tint: #8a8a86;
  --icon-alpha: 0.7;
  position: relative;
  flex: none;
  box-sizing: border-box;
  width: 27px;
  height: 27px;
  border-radius: 5px;
  border: 1px solid #1a1a18;
  border-right-color: #5c5c55;
  border-bottom-color: #5c5c55;
  background: #282826;
}

/* The icon, white in the file, tinted like the game's ColorTransform: its dark shadow stays dark. */
.es-org-tile::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: var(--icon) center / 27px 27px no-repeat, var(--tint);
  background-blend-mode: multiply;
  -webkit-mask: var(--icon) center / 27px 27px no-repeat;
  mask: var(--icon) center / 27px 27px no-repeat;
  opacity: var(--icon-alpha);
}

.es-org-tile::after {
  content: '';
  position: absolute;
  inset: 0.5px;
  border: 1px solid transparent;
  border-radius: 4px;
}

.es-org-check input:checked + .es-org-tile {
  --tint: var(--accent);
  --icon-alpha: 1;
  background: #323230;
}

.es-org-check input:checked + .es-org-tile::after {
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
}

.es-org-check input:focus-visible + .es-org-tile {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

.es-org-tile--supplies { --icon: url(/assets/settings/supplies-v1.png); --accent: #74be3c; }
.es-org-tile--smart { --icon: url(/assets/settings/smart-v1.png); --accent: #74be3c; }
.es-org-tile--overdrive { --icon: url(/assets/settings/overdrive-v1.png); --accent: #74be3c; }
.es-org-tile--bonus { --icon: url(/assets/settings/bonus-v1.png); --accent: #74be3c; }
.es-org-tile--micro { --icon: url(/assets/settings/micro-v1.png); --accent: #d95e2b; }
.es-org-tile--augments { --icon: url(/assets/settings/augments-v1.png); --accent: #d95e2b; }
.es-org-tile--mouse { --icon: url(/assets/settings/mouse-v1.png); --accent: #4e9bd6; }
.es-org-tile--friendlyfire { --icon: url(/assets/settings/friendlyfire-v1.png); --accent: #74be3c; }
/* Gold stays gold, on or off (the game's GOLD_YELLOW, 0.4 off). */
.es-org-tile--gold { --icon: url(/assets/settings/gold-v1.png); --accent: #f2c230; --tint: #f2c230; --icon-alpha: 0.4; }

.es-org-check.is-off {
  opacity: 0.45;
  cursor: not-allowed;
}

/* The tournament's day as a line: registration, check-in, start. */
.es-org-when {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.es-org-when::before {
  content: "";
  position: absolute;
  top: 6px;
  right: 7px;
  left: 7px;
  height: 2px;
  background: #3a3a3a;
}

.es-org-when.is-open::before {
  background: linear-gradient(90deg, var(--lime) 0 18%, #3a3a3a 18%);
}

.es-org-when li {
  position: relative;
  padding-top: 24px;
}

.es-org-when li:nth-child(2) {
  text-align: center;
}

.es-org-when li:nth-child(3) {
  text-align: right;
}

.es-org-when li::before {
  content: "";
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  border: 2px solid #0d0d0d;
  border-radius: 50%;
  background: #5a5a5a;
}

.es-org-when li:nth-child(1)::before {
  left: 0;
}

.es-org-when.is-open li:nth-child(1)::before {
  background: var(--lime);
}

.es-org-when li:nth-child(2)::before {
  left: calc(50% - 7px);
}

.es-org-when li:nth-child(3)::before {
  right: 0;
}

.es-org-when small {
  display: block;
  color: var(--dim);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.es-org-when b {
  font-size: 17px;
}

/* Maps: pictures to tick, or the three slots of brackets of 8. */
.es-org-maps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.es-map-pick {
  position: relative;
  display: block;
  overflow: hidden;
  border: 2px solid #2c2c2c;
  border-radius: var(--radius);
  background: #111;
  cursor: pointer;
}

.es-map-pick input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.es-map-pick img,
.es-org-slot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 410 / 250;
  object-fit: cover;
  background: #1a1a1a;
}

.es-map-pick img.is-missing,
.es-org-slot img.is-missing {
  visibility: hidden;
}

.es-map-pick span {
  display: block;
  padding: 5px 8px 6px;
  color: var(--dim);
  font-size: 14px;
  font-weight: 600;
}

.es-map-pick img {
  opacity: 0.3;
}

.es-map-pick:has(input:checked) {
  border-color: var(--lime);
}

.es-map-pick:has(input:checked) img {
  opacity: 1;
}

.es-map-pick:has(input:checked) span {
  color: var(--text);
}

.es-map-pick:has(input:checked)::after {
  content: "\2713";
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lime);
  color: #0b0b0b;
  font-size: 13px;
  font-weight: 800;
}

.es-map-pick:has(input:focus-visible) {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

.es-org-add {
  align-self: center;
}

.es-org-fhead {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}

.es-org-fhead img {
  width: 48px;
  height: auto;
}

.es-org-fhead span {
  color: var(--dim);
  letter-spacing: 0;
  text-transform: none;
}

.es-org-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.es-org-slot {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.es-org-slot .es-select {
  width: 100%;
  min-width: 0;
}

.es-org-slot img {
  border: 2px solid #2c2c2c;
  border-radius: var(--radius);
}

.es-org-slot label {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

/* The preview: the tournament as players will see it, and the one button. */
.es-org-preview {
  position: sticky;
  top: 16px;
  overflow: hidden;
  border: 2px solid #2c2c2c;
  border-radius: var(--radius);
  background: #0e0e0e;
}

.es-org-preview > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1006 / 300;
  object-fit: cover;
}

.es-org-preview-body {
  display: grid;
  gap: 14px;
  padding: 14px 16px 18px;
}

.es-org-preview-body > small {
  color: var(--dim);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.es-org-preview-body > h3 {
  margin: -8px 0 0;
  font-size: 20px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.es-org-preview .es-format {
  gap: 0 6px;
  font-size: 14px;
}

.es-org-preview .es-format li + li::before {
  margin-right: 6px;
}

.es-org-facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px 12px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
}

.es-org-facts dt {
  align-self: center;
  color: var(--dim);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.es-org-facts dd {
  margin: 0;
}

.es-org-preview .es-fight {
  width: 100%;
  padding-inline: 8px;
  font-size: 17px;
  white-space: nowrap;
}

.es-org-ready {
  margin: -4px 0 0;
  color: var(--lime);
  font-size: 14px;
  text-align: center;
}

.es-org-ready:empty,
.es-org-said:empty {
  display: none;
}

.es-org-said {
  text-align: center;
}

/* The tournaments: a table a tab. */
.es-org-list td {
  white-space: nowrap;
}

.es-org-markcell {
  width: 76px;
  padding-right: 0;
}

.es-org-mark {
  display: block;
  width: 64px;
  height: auto;
}

.es-org-mark--blitz {
  width: 48px;
}

.es-org-by {
  margin-left: 10px;
  font-size: 13px;
}

.es-org-actcell {
  text-align: right;
}

.es-org-acts {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.es-org-actcell .es-field-status {
  display: block;
  max-width: 320px;
  margin-left: auto;
  white-space: normal;
}

/* The season: its weeks as a strip with its tournaments on it, its leagues; the planner. */
.es-season-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
}

.es-season-top h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 22px;
}

.es-season-top p {
  color: var(--muted);
}

.es-season-strip {
  --weeks: 14;
  display: grid;
  grid-template-columns: repeat(calc(var(--weeks) - 1), minmax(0, 1fr)) minmax(0, 1.6fr);
  gap: 4px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.es-season-strip li {
  display: grid;
  grid-template-rows: 30px 34px auto;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  text-align: center;
}

.es-season-ev {
  display: grid;
  align-content: end;
  justify-items: center;
  gap: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.es-season-ev img {
  width: 44px;
  height: auto;
}

.es-season-night {
  display: grid;
  place-items: center;
  width: 100%;
  border-radius: 4px;
  background: #1c1c1c;
  color: var(--dim);
  font-size: 13px;
  font-weight: 700;
}

.es-season-strip .is-done .es-season-night {
  background: #263612;
  color: #c8f26a;
}

.es-season-strip .is-now .es-season-night {
  outline: 2px solid var(--lime);
  outline-offset: -2px;
  background: #182208;
  color: var(--lime);
}

.es-season-po .es-season-night {
  background: #2b2412;
  color: var(--gold);
}

.es-season-strip small {
  color: var(--dim);
  font-size: 11px;
  white-space: nowrap;
}

.es-season-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 14px 0 0;
  padding: 0;
  color: var(--muted);
  font-size: 14px;
  list-style: none;
}

.es-season-key li::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 7px;
  border-radius: 3px;
  background: #263612;
  vertical-align: -1px;
}

.es-season-key .es-season-k-po::before {
  background: #2b2412;
}

.es-season-key .es-season-k-mots::before {
  width: 26px;
  height: 7px;
  border-radius: 0;
  background: url(/assets/sword-mark-white-v1.svg) center / contain no-repeat;
  vertical-align: 1px;
}

.es-season-leagues {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
}

.es-season-leagues b {
  display: block;
  font-size: 16px;
}

.es-season-leagues span {
  color: var(--dim);
  font-size: 14px;
}

.es-season-plan {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}

.es-season-how {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--rule);
  list-style: none;
}

.es-season-how li {
  display: grid;
  align-content: start;
  gap: 4px;
}

.es-season-how-art {
  display: grid;
  place-items: center start;
  height: 40px;
  margin-bottom: 6px;
}

.es-season-how-art img {
  width: auto;
  max-width: 150px;
  height: auto;
  max-height: 34px;
}

.es-season-how-po {
  color: var(--gold);
  font-family: var(--quadrat);
  font-size: 20px;
  text-transform: uppercase;
}

.es-season-how b {
  font-size: 16px;
}

.es-season-how li > span:not(.es-season-how-art) {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.es-season-mots {
  display: grid;
  gap: 8px;
}

.es-season-mots-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.es-season-mots-row img {
  display: block;
  width: 132px;
  height: 40px;
  border-radius: 4px;
  object-fit: cover;
  object-position: 100% 12%;
}

.es-season-mots-row .es-input {
  width: auto;
}

.es-season-will {
  margin: 0;
  padding: 0;
  list-style: none;
}

.es-season-will li {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--rule);
  font-size: 14px;
}

.es-season-will li:first-child {
  border-top: 0;
}

.es-season-will time {
  color: var(--dim);
  font-weight: 600;
}

.es-season-will b {
  display: block;
}

.es-season-will span {
  color: var(--dim);
}

@media (max-width: 900px) {
  .es-org {
    grid-template-columns: minmax(0, 1fr);
  }

  .es-org-preview {
    position: static;
  }
}

@media (max-width: 760px) {
  .es-pick,
  .es-org-maps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .es-org-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .es-org-row > .es-field-status,
  .es-org-row > .es-org-gear {
    grid-column: 1;
  }

  .es-org-row--top > .es-org-name {
    padding-top: 0;
  }

  .es-org-checks,
  .es-cards,
  .es-season-leagues,
  .es-season-how {
    grid-template-columns: minmax(0, 1fr);
  }

  .es-org-when b {
    font-size: 15px;
  }

  .es-org-slots {
    grid-template-columns: minmax(0, 1fr);
  }

  .es-season-strip {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .es-season-mots-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .es-org-actcell {
    text-align: left;
  }
}

/* 11c  The join page: the guided way into a tournament (owner 2026-10-12, spec
   docs/design/esports-guided-entry.md section 5). Nothing here is a new skin: the same
   tokens, the same panel, rows with a hairline between them, the step names on one line
   with a rule under them, the green button once a panel. No box inside a panel, no plate,
   no circle, no icon: the done mark is the text tick. Hover tints a row, nothing changes
   colour. Only transform and opacity move. */

/* The band under the menu bar, on every page while a check-in or a room waits: one line of
   words with one link, a rule under it, no box. */
.es-band {
  border-bottom: 1px solid var(--rule);
  color: var(--lime);
  font-weight: 700;
}

.es-band p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  min-height: 44px;
  padding: 6px 0;
}

.es-band a {
  color: var(--text);
  font-weight: 400;
}

/* Where the page sits: words only, 14px, muted. */
.es-crumbs {
  margin-bottom: -8px;
  color: var(--dim);
  font-size: 14px;
}

.es-crumbs a {
  color: var(--muted);
  text-decoration: none;
}

.es-crumbs a:hover {
  text-decoration: underline;
}

/* The head: the title and the series on the left, the status at the right. */
.es-guide-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px 30px;
}

.es-guide-head h1 {
  font-size: 30px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

/* The title and the series on one line, the series muted. */
.es-guide-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
}

.es-guide-series {
  color: var(--muted);
  font-size: 16px;
}

.es-guide-head .es-status {
  margin-top: 10px;
}

/* The tanks of this tournament, one line of words in bold; the lines that follow it plain. */
.es-loadout {
  margin-top: 10px;
  font-weight: 700;
}

.es-guide-line {
  color: var(--muted);
}

.es-guide-head + .es-format,
.es-guide-line + .es-format,
.es-loadout + .es-format {
  margin-top: 12px;
}

/* Two plain lines of facts under a rule. */
.es-guide-facts {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 16px;
}

.es-guide-facts p + p {
  margin-top: 2px;
}

/* Can the reader play: one line, lime or orange. */
.es-elig {
  max-width: 68ch;
  margin-top: 10px;
  color: var(--lime);
  font-weight: 700;
}

.es-elig--no {
  color: var(--warn);
}

.es-elig-alt {
  display: block;
  max-width: 68ch;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 400;
}

.es-guide-facts .es-elig {
  margin: 0;
  font-size: 16px;
}

/* "Could not refresh just now": a line above the step line. */
.es-guide-note {
  min-height: 0;
  margin-top: 10px;
}

.es-guide-note:empty {
  display: none;
}

/* The step line sits at the foot of the head panel. */
.es-guide-steps {
  margin-top: 12px;
}

/* The step line: the step names on one row in the small capital face, the done ones with the
   text tick in white, the current one lime, the later ones dim, a rule under the row. No
   plates, no circles, no digits. */
.es-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--rule);
  color: var(--dim);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  list-style: none;
  text-transform: uppercase;
}

.es-steps li {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.es-steps li.is-done {
  color: var(--text);
}

.es-steps li.is-done::before {
  color: var(--lime);
  content: "\2713";
}

.es-steps li.is-now {
  color: var(--lime);
}


/* Register versus check in, said under the step line on every join page. */

/* The step and "How it goes" side by side; one column on phones. */
.es-guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  gap: 24px;
}

.es-guide-aside {
  position: sticky;
  top: 16px;
}

/* "STEP 2 OF 6", the one place a step number appears: the small capital line, lime. */
.es-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--lime);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.es-step-panel .es-panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 24px;
}

.es-step-panel .es-panel-head h2 {
  overflow-wrap: anywhere;
}

/* The one main action of a step, at the right of its title: the green button, the time under it.
   A refusal under the button wraps inside 320px, so the title keeps its column. */
.es-step-side {
  display: grid;
  max-width: 320px;
  justify-items: end;
  gap: 8px;
  text-align: right;
}

.es-step-side .es-field-status {
  max-width: 100%;
}

.es-step-side .es-fight {
  min-width: 180px;
}

.es-step-side .es-small {
  margin: 0;
}

.es-step-side .es-count {
  justify-items: end;
}

/* The step's words: paragraphs at most 68 characters wide, 16px between the parts, the help
   small and muted. */
.es-step-body {
  display: grid;
  gap: 14px;
}

.es-step-body p {
  max-width: 68ch;
}

.es-step-body .es-small {
  display: block;
  max-width: 68ch;
  margin-top: -8px;
}

.es-step-body .es-small + .es-small,
.es-step-body form .es-small + .es-small {
  margin-top: 2px;
}

/* A rule between two parts of one step (the team rows, then the make form). */
.es-rule {
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--rule);
}

/* Rows: a hairline between them, nothing around the list. A row tints on hover. */
.es-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.es-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  min-height: 36px;
  padding: 6px 0;
  border-top: 1px solid var(--rule);
}

.es-rows > .es-row:first-child {
  border-top: 0;
}

.es-row > .es-player {
  flex: none;
}

.es-row .es-dim,
.es-row .es-muted {
  font-size: 16px;
}

/* A row that says one thing after the name: the state at the right end. */
.es-row-state {
  margin-left: auto;
  color: var(--dim);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: right;
  text-transform: uppercase;
}

.es-row-state.is-ok {
  color: var(--lime);
}

.es-row-state.is-warn {
  color: var(--warn);
}

/* A line under a row's name that belongs to it: a player's problem, a seat's words. */
.es-row-note {
  flex: 1 0 100%;
  padding-left: 32px;
  color: var(--warn);
  font-size: 15px;
}

.es-row-note.is-dim {
  color: var(--dim);
}

/* Offline: the name dims, no words (owner 2026-10-12). */
.is-away {
  color: var(--dim);
}

/* A team to pick (step 2): a native radio, the name, the players, the state. The radio marks the
   picked row: no tint (owner rulings, no filled sub-panels). */
.es-row--team {
  align-items: start;
  padding: 12px 0 14px;
}

.es-row--team > input[type="radio"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--lime);
  cursor: pointer;
}

.es-row-body {
  display: grid;
  flex: 1 1 260px;
  min-width: 0;
  gap: 6px;
}

.es-row-body h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 18px;
  line-height: 1.25;
}

.es-row-body h3 label {
  cursor: pointer;
}

.es-row-body h3 .es-dim {
  font-size: 15px;
  font-weight: 400;
}

.es-row-body .es-rows {
  margin-left: 0;
}

.es-row-body .es-row {
  min-height: 32px;
  padding: 3px 0;
  border-top: 0;
}

.es-row-body .es-row:hover {
  background: none;
}

.es-row--team .es-row-state {
  flex: none;
  align-self: start;
  margin-top: 4px;
}

/* The tick before an accepted teammate, text in lime. */
.es-tick {
  flex: none;
  width: 18px;
  color: var(--lime);
  font-weight: 700;
  text-align: center;
}

/* Check-in rows: who is in, who is not yet. */
.es-row-when {
  color: var(--lime);
  font-size: 16px;
}

.es-row-when.is-warn {
  color: var(--warn);
}

.es-row.is-urgent .es-row-when,
.es-row.is-urgent .es-nick {
  color: var(--warn);
  font-weight: 700;
}

/* The countdown figure of the step: the site's narrow figure, lime, orange under 15 minutes,
   red under 2. No background, no border. */
.es-step-body .es-count strong {
  color: var(--lime);
  font-family: var(--sans);
  font-size: 23px;
}

.es-count.is-warn strong {
  color: var(--warn);
}

.es-count.is-live strong {
  color: var(--live);
}

/* The alarm time on the waiting panel: the same figure, "Set an alarm for" as its label. */
.es-step-body .es-count--alarm strong {
  color: var(--text);
}

/* A message to copy: the site's input, read only, full width, the button under it. */
.es-copy {
  display: grid;
  gap: 10px;
}

.es-copy textarea {
  display: block;
  width: 100%;
  min-height: 84px;
  resize: vertical;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
}

.es-copy textarea:focus {
  color: var(--text);
}

.es-copy .es-field-status.is-ok {
  color: var(--lime);
}

/* The one main action of a step. */
.es-step-body .es-actions {
  gap: 12px 18px;
}

.es-step-body .es-actions .es-fight {
  min-width: 180px;
}

/* A quiet action's confirm line: the words and two grey buttons, no red. */
.es-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.es-confirm p {
  flex: 1 1 100%;
  color: var(--muted);
}

/* "what is this?" after a word: the answer opens in place under the sentence. */


/* How it goes: plain lines with the hours, the one that is now in lime. */
.es-timeline {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.es-timeline li {
  display: grid;
  gap: 1px;
  padding-left: 16px;
  border-left: 2px solid var(--rule);
  color: var(--muted);
  font-size: 16px;
}

.es-timeline li b {
  color: var(--text);
}

.es-timeline li.is-done {
  color: var(--dim);
}

.es-timeline li.is-done b {
  color: var(--dim);
}

.es-timeline li.is-now {
  border-left-color: var(--lime);
}

.es-timeline li.is-now b {
  color: var(--lime);
}

.es-guide-aside .es-small {
  display: block;
  margin-top: 16px;
}

.es-guide-aside .es-small + .es-small {
  margin-top: 6px;
}

/* A folded panel part: the summary is a row with the panel's own heading size. */
.es-fold > summary {
  cursor: pointer;
  list-style: none;
}

.es-fold > summary::-webkit-details-marker {
  display: none;
}

.es-fold > summary h2 {
  display: inline;
  font-size: 24px;
}

.es-fold > summary .es-small {
  margin-left: 10px;
}

.es-fold[open] > summary {
  margin-bottom: 16px;
}

/* A folded line inside a step: the words as the summary, the paragraph under it. */
.es-fold--line > summary {
  min-height: 36px;
  padding: 4px 0;
}

.es-fold--line > summary b {
  font-size: 17px;
}

.es-fold--line[open] > summary {
  margin-bottom: 6px;
}

/* The questions: each one a row, the question in bold, the answer under it. */





/* The two states the status tag did not have: done and registered, dim and lime, no blink. */
.es-status--done {
  color: var(--dim);
}

.es-status--registered {
  color: var(--lime);
}

/* Tablets and phones: one column, the step line keeps the done and the current step only,
   rows 44px, the button full width. */
@media (max-width: 900px) {
  .es-guide {
    grid-template-columns: minmax(0, 1fr);
  }

  .es-guide-aside {
    position: static;
  }
}

@media (max-width: 760px) {
  .es-guide-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .es-guide-head h1 {
    font-size: 26px;
  }

  .es-guide-head .es-status {
    margin-top: 0;
  }



  .es-row {
    min-height: 44px;
  }

  .es-row-note {
    padding-left: 0;
  }

  .es-row-state {
    flex: 1 0 100%;
    margin-left: 0;
    text-align: left;
  }

  .es-row--team .es-row-state {
    flex: 1 0 100%;
    margin-top: 0;
  }

  .es-row--team > input[type="radio"] {
    width: 24px;
    height: 24px;
  }

  .es-step-body .es-actions .es-fight,
  .es-step-side .es-fight {
    width: 100%;
  }

  .es-step-panel .es-panel-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .es-step-side {
    max-width: none;
    justify-items: start;
    text-align: left;
  }

  /* The past tables: the winners' names wrap on a phone instead of sliding out of view. */
  .es-past td.es-left {
    white-space: normal;
  }

  .es-step-side .es-count {
    justify-items: start;
  }

  .es-fold > summary h2 {
    font-size: 22px;
  }
}

/* 11d  The other pages of the guided way in (owner 2026-10-12, spec sections 3.2 to 3.6): the
   next-step block on the home page and My team (the .es-alert bar block the owner already saw),
   the "also open" and "latest result" rows, the series pages' past tables, the tournament page's
   "You:" line and folded rules, the profile's trophy shelf and rows. The same tokens and pieces as
   11c: rows with a hairline, no box inside a panel, nothing changes colour on hover. */

/* The next-step block: the kicker, the title, the line, the one button at the right. The bar turns
   orange under 15 minutes of check-in and red under 2 (data-tone, as the join page's countdown). */
.es-next-step {
  display: grid;
  gap: 14px;
}

.es-next-step .es-alert {
  align-items: start;
}

.es-next-step .es-alert > div:first-child {
  display: grid;
  gap: 4px;
}

.es-next-step .es-alert .es-kicker {
  margin-bottom: 0;
  color: var(--dim);
}

.es-next-step .es-alert p {
  max-width: 68ch;
}

.es-next-step .es-alert .es-field-status {
  color: var(--red);
  font-size: 15px;
}

.es-next-step .es-alert .es-field-status:empty {
  display: none;
}

.es-alert.is-warn,
.es-alert.is-live {
  border-left-color: var(--warn);
}

.es-alert.is-live {
  border-left-color: var(--live);
}

.es-alert-side {
  display: grid;
  justify-items: end;
  gap: 8px;
  align-self: center;
  text-align: right;
}

.es-alert-side .es-fight {
  min-width: 180px;
}

.es-alert-side:empty {
  display: none;
}

/* The copyable message under the block (when the button copies), and the quiet row. */
.es-next-step .es-copy {
  padding-left: 20px;
}

.es-next-step .es-copy .es-actions {
  min-height: 0;
}

.es-next-step > .es-small {
  margin: 0;
  padding-left: 20px;
}

.es-next-times {
  color: var(--dim);
}

/* The other open tournaments and the last results: plain rows, a hairline between them. */
.es-also {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--rule);
}

.es-also .es-row {
  gap: 4px 16px;
  padding: 8px 0;
}

.es-also .es-row > span:first-child {
  flex: 1 1 320px;
  min-width: 0;
}

.es-also .es-row-state {
  margin-left: 0;
}

/* "Live now" on the home page: a tournament's live matches, the brackets link under them. */
.es-live-cup + .es-live-cup {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

.es-live-cup h3 {
  margin-bottom: 4px;
  font-size: 20px;
}

.es-live-cup h3 a {
  text-decoration: none;
}

.es-live-cup .es-small {
  margin-top: 8px;
}

/* The words a tournament row says to the reader: "You are in with Night Rails...". */
.es-cup-you {
  max-width: 34ch;
  color: var(--muted);
  font-size: 15px;
}

/* The past tournaments as a short table, the reader's rows marked, "Show all N" under it. */
.es-past td.es-left a {
  font-weight: 700;
  text-decoration: none;
}

.es-past td.es-left a:hover {
  text-decoration: underline;
}

.es-past .es-dim {
  font-size: 15px;
}

.es-show-all {
  margin-top: 12px;
}

.es-group .es-table-wrap {
  margin-top: 8px;
}

/* The tournament page: the reader's own line under the head, and the rules folded on a phone. */
.es-cup-you-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  margin: -8px 0 0;
  padding: 0 4px;
  color: var(--lime);
  font-weight: 700;
}

.es-cup-you-line[hidden] {
  display: none;
}

.es-rules-fold > summary {
  display: none;
  margin-top: 20px;
  cursor: pointer;
  list-style: none;
}

.es-rules-fold > summary::-webkit-details-marker {
  display: none;
}

.es-rules-fold[open] > summary {
  margin-bottom: -8px;
}

/* My team: a team's rows (the join page's rows), what it plays, the invite link beside the box. */
.es-myteam .es-rows {
  margin-bottom: 8px;
}

.es-myteam .es-row .es-row-note {
  flex: none;
  padding-left: 0;
}

.es-myteam .es-row .es-row-note .es-small {
  margin: 0;
}

.es-myteam-plays {
  margin-top: 4px;
  color: var(--muted);
  font-size: 16px;
}

.es-myteam .es-confirm {
  margin-top: 6px;
}

.es-invite .es-small .es-link {
  overflow-wrap: anywhere;
}

/* The profile's trophies: the shelf, three narrow figures in a row, then one row a trophy with the
   series logo, the place in narrow caps, the tournament and the date. */
.es-shelf {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin: 0 0 16px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--rule);
  list-style: none;
}

.es-shelf li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--win-text);
  font-size: 15px;
}

.es-shelf strong {
  color: var(--text);
  font-family: var(--sans);
  font-size: 23px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.es-trophy-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.es-trophy-rows li {
  display: grid;
  grid-template-columns: 92px auto minmax(0, 1fr);
  align-items: center;
  gap: 2px 16px;
  min-height: 56px;
  padding: 6px 0;
  border-top: 1px solid var(--rule);
}

.es-trophy-rows li:first-child {
  border-top: 0;
}

.es-trophy-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 48px;
}

.es-trophy-logo img {
  display: block;
  max-width: 92px;
  max-height: 48px;
  width: auto;
  height: auto;
}

.es-trophy-place {
  min-width: 78px;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.es-trophy-rows li.is-silver .es-trophy-place {
  color: var(--silver);
}

.es-trophy-what {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.es-trophy-what a {
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.es-trophy-what a:hover {
  text-decoration: underline;
}

.es-trophy-what .es-dim {
  font-size: 14px;
}

.es-trophy-block .es-pro-more {
  text-align: left;
}

@media (max-width: 760px) {
  .es-alert-side {
    justify-items: start;
    text-align: left;
  }

  .es-alert-side .es-fight {
    width: 100%;
  }

  .es-next-step .es-copy,
  .es-next-step > .es-small {
    padding-left: 0;
  }

  .es-also .es-row {
    min-height: 44px;
  }

  .es-rules-fold > summary {
    display: block;
  }

  .es-trophy-rows li {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .es-trophy-logo {
    width: 64px;
    height: 34px;
  }

  .es-trophy-logo img {
    max-width: 64px;
    max-height: 34px;
  }

  .es-trophy-what {
    grid-column: 2;
  }
}

/* 12  Profiles ---------------------------------------------------------------------------- */
.es-profile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px 22px;
}

/* A team has no picture: its first letter stands in. */
.es-team-mark {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: #1a1a1a;
  color: var(--lime);
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
}

.es-profile-badge {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.es-profile h1 {
  font-size: 34px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.es-profile-sub {
  color: var(--muted);
}

.es-profile-place {
  display: grid;
  justify-items: end;
  text-align: right;
}

.es-profile-place strong {
  color: var(--lime);
  font-size: 38px;
  line-height: 1;
}

.es-profile-place small {
  color: var(--muted);
  font-size: 15px;
}

/* The numbers under a name: plain, no boxes. */
.es-tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px 20px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

.es-tile strong {
  display: block;
  font-size: 30px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  white-space: nowrap;
}

.es-tile small {
  color: var(--dim);
  font-size: 14px;
}

/* A clan: its mark is its tag, its players are rows in columns. */
.es-team-mark--tag {
  width: auto;
  min-width: 72px;
  padding: 0 12px;
  font-family: var(--sans);
  font-size: 23px;
  letter-spacing: 0.02em;
}

.es-clanlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 4px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.es-clanlist li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 34px;
}

/* On the clan's own page its tag beside every name says nothing. */
.es-clanlist .es-tag {
  display: none;
}

/* 12b  The player profile (owner, 2026-10-06) -------------------------------------------------
   "Make it look more serious, like an esports site. I don't think outlines make it look serious":
   the old StarLadder Tanki profile he showed (tanki.starladder.tv, June 2015, archived), measured
   from the page itself. Windows with no frame and corners rounded 3px; the window #1f1f1f (his
   pick: "copy the colour of the window"), its title strip #191919, the boxes inside it #1a1a1a;
   grey words, white numbers; a dark green circle for the win rate and a small square sign before
   each number. Left column, who the player is; right column, what he has played. Only the player
   page and the rating page use these windows (owner, 2026-10-06); the other pages keep their framed
  panels for now. */
.es-pro,
.es-board {
  --win: #1f1f1f;
  --win-head: #191919;
  --win-bar: #232323;
  --box: #1a1a1a;
  --win-radius: 3px;
  --win-text: #a3a3a3;
  --won: #7fb24a;
  --lost: #d35a50;
}

.es-main.es-pro {
  grid-template-columns: 320px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.es-pro-side,
.es-pro-body {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.es-win {
  min-width: 0;
  border-radius: var(--win-radius);
  background: var(--win);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.es-win-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  min-height: 60px;
  padding: 12px 20px;
  border-radius: var(--win-radius) var(--win-radius) 0 0;
  background: var(--win-head);
}

.es-win-head h2 {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.25;
}

.es-win-body {
  padding: 16px 20px 20px;
}

.es-pro-none {
  color: var(--win-text);
}

/* Who he is: the flag of the country he chose, the nickname, the rank, the one picture. */
.es-pro-name {
  display: grid;
  justify-content: stretch;
  gap: 4px;
  padding: 16px 20px 14px;
}

.es-pro-name h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 24px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.es-flag {
  flex: none;
  border-radius: 2px;
}

.es-pro-rank {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--win-text);
  font-size: 15px;
}

.es-pro-rank img {
  width: 22px;
  height: 22px;
}

.es-pro-pic {
  padding: 20px;
}

.es-pro-pic img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

/* The lines he fills in himself. */
.es-pro-about {
  padding: 14px 20px 16px;
}

.es-pro-facts {
  display: grid;
  gap: 7px;
}

.es-pro-facts div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.es-pro-facts dt {
  flex: none;
  color: var(--win-text);
  font-size: 15px;
}

.es-pro-facts dd {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

.es-pro-facts dd.is-empty {
  color: #5f5f5f;
}

/* His tournaments: the title strip, the tabs, four boxes. */
.es-pro-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.es-pro-title img {
  flex: none;
  width: 30px;
  height: 30px;
}

.es-pro-title small {
  overflow: hidden;
  color: var(--win-text);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.es-pro-place {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--win-text);
  font-size: 15px;
}

.es-pro-place strong {
  color: var(--text);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.es-win-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  padding: 0 20px;
  background: var(--win-bar);
}

.es-win-tabs[hidden] {
  display: none;
}

.es-win-tabs button {
  position: relative;
  padding: 13px 0 12px;
  border: 0;
  background: none;
  color: var(--win-text);
  cursor: pointer;
  font-size: 15px;
  white-space: nowrap;
}

.es-win-tabs button::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  content: "";
  background: var(--lime);
  opacity: 0;
  transition: opacity 160ms ease;
}

.es-win-tabs button[aria-pressed="true"] {
  color: var(--text);
}

.es-win-tabs button[aria-pressed="true"]::after {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .es-win-tabs button:hover {
    color: var(--text);
  }
}

.es-pro-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 20px;
}

.es-box {
  min-width: 0;
  padding: 16px 18px 18px;
  border-radius: 2px;
  background: var(--box);
}

.es-box-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--win-text);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* His clan: its tag stands where the old site had the team's logo. */
.es-pro-clan {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-content: start;
  gap: 0 16px;
}

.es-pro-clan .es-box-label,
.es-pro-clan > .es-pro-none {
  grid-column: 1 / -1;
}

.es-clan-mark {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  overflow: hidden;
  border-radius: 2px;
  background: #141414;
  color: var(--text);
  font-family: var(--sans);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
}

.es-pro-clan h3 {
  font-size: 18px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.es-pro-clan h3 a {
  text-decoration: none;
}

.es-pro-clan h3 a:hover {
  color: var(--lime);
}

.es-pro-lines {
  margin: 6px 0 0;
  padding: 0;
  color: var(--win-text);
  font-size: 15px;
  line-height: 1.6;
  list-style: none;
}

.es-pro-lines b {
  color: var(--text);
  font-weight: 400;
}

/* His latest matches: his side, the score, the other side, as the old site listed them. */
.es-pro-recent ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.es-pro-recent a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-radius: 2px;
  font-size: 15px;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .es-pro-recent a:hover {
    background: rgba(255, 255, 255, 0.04);
  }
}

.es-pro-recent .es-pro-us,
.es-pro-recent .es-pro-them {
  min-width: 0;
  overflow-wrap: anywhere;
}

.es-pro-recent .es-pro-us {
  text-align: right;
}

.es-pro-score {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.es-won {
  color: var(--won);
}

.es-lost {
  color: var(--lost);
}

.es-pro-more {
  margin-top: 10px;
  font-size: 15px;
  text-align: right;
}

.es-pro-more a {
  color: var(--win-text);
}

.es-pro-more a:hover {
  color: var(--text);
}

/* The win circle. */
.es-pro-ring {
  display: grid;
  justify-items: center;
  align-content: start;
  text-align: center;
}

.es-pro-ring h3 {
  color: var(--win-text);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
}

.es-pro-ring > strong {
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.es-ring {
  position: relative;
  width: 176px;
  height: 176px;
  margin: 12px 0;
}

.es-ring svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.es-ring circle {
  fill: none;
  stroke-width: 22;
}

.es-ring-track {
  stroke: #262626;
}

.es-ring-won {
  stroke: #3f7d24;
}

.es-ring-draw {
  stroke: #525252;
}

.es-ring-lost {
  stroke: #7a3030;
}

.es-ring-mid {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
}

.es-ring-mid strong {
  font-size: 32px;
  line-height: 1;
}

.es-ring-mid small {
  margin-top: 4px;
  color: var(--win-text);
  font-size: 14px;
}

.es-ring-key {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
  margin: 0;
  padding: 0;
  color: var(--win-text);
  font-size: 15px;
  list-style: none;
}

.es-ring-key li::before {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 7px;
  border-radius: 2px;
  content: "";
}

.es-ring-key .is-won::before {
  background: #3f7d24;
}

.es-ring-key .is-draw::before {
  background: #525252;
}

.es-ring-key .is-lost::before {
  background: #7a3030;
}

/* His numbers, a sign before each. */
.es-pro-numbers table {
  width: 100%;
  border-collapse: collapse;
}

.es-pro-numbers th {
  padding: 0 0 8px;
  color: var(--win-text);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
}

.es-pro-numbers td {
  padding: 5px 0;
  font-size: 15px;
}

.es-pro-numbers th:last-child,
.es-pro-numbers td:last-child {
  text-align: right;
}

.es-pro-numbers td:last-child {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.es-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d2d2d2;
}

.es-stat-icon {
  flex: none;
  width: 22px;
  height: 22px;
}

/* Match history in the narrower column: the round under the tournament's name. */
.es-table--compact td.es-cupcell {
  min-width: 11em;
}

.es-cupcell-round {
  display: block;
  color: var(--dim);
  font-size: 14px;
}

/* Match history: his side and the other side in full, the score between them. */
.es-table td.es-matchcell {
  min-width: 12em;
  white-space: normal;
}

/* Where a player has not chosen a country: the flag's place stays, so the names line up. */
.es-flag-gap {
  flex: none;
  width: 20px;
}

.es-podium-name .es-flag-gap {
  width: 22px;
}

.es-matchcell .es-pro-score {
  display: inline-block;
  margin: 0 8px;
}

/* His place in the header: gold, silver or bronze for the first three. */
.es-pro-place .es-place-1 {
  color: var(--gold);
}

.es-pro-place .es-place-2 {
  color: var(--silver);
}

.es-pro-place .es-place-3 {
  color: var(--bronze);
}

/* "Edit" on his own page, and the form it opens (also on My team). */
.es-pro-edit-row {
  margin-top: 14px;
  text-align: right;
}

.es-pro-form {
  max-width: none;
  margin: 0;
  gap: 12px;
}

/* On My team (still the framed panels) the form keeps a readable width. */
.es-panel .es-pro-form {
  max-width: 520px;
}

.es-pro-form .es-field label {
  color: var(--win-text);
  font-size: 15px;
  font-weight: 400;
}

.es-win .es-input {
  min-height: 40px;
  border: 1px solid #383838;
  border-radius: 3px;
  background: #141414;
  color: var(--text);
  font-size: 16px;
}

.es-win .es-input:focus {
  border-color: var(--lime);
}

.es-win .es-input[aria-invalid="true"] {
  border-color: var(--red);
}

.es-pro-form .es-actions {
  justify-content: flex-end;
}

/* A win rate as a thin bar and its number. */
.es-rate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.es-rate-bar {
  position: relative;
  width: 64px;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: #2b2b2b;
}

.es-rate-bar i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 3px;
  background: var(--lime);
}

.es-rate-num {
  min-width: 3.2em;
  color: #d2d2d2;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* The rating page (2026-10-06, owner: "improve ours, more competitive, modern"): one window, the
   tables as tabs, the first three on a podium, everyone else in the standings below. */
.es-win-head h1 {
  font-size: 28px;
  line-height: 1.2;
}

.es-board-updated {
  color: var(--win-text);
  font-size: 15px;
}

/* Find a player (owner 2026-10-12): a search box in the window's head, the names under it. */
.es-find {
  position: relative;
  width: 260px;
  margin-left: auto;
}

.es-find .es-input {
  min-height: 38px;
  padding: 6px 12px;
  font-size: 16px;
}

.es-find .es-field-status:empty {
  display: none;
}

.es-find .es-field-status {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  color: var(--warn);
  font-size: 14px;
  white-space: nowrap;
}

.es-find-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  margin: 0;
  padding: 4px 0;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: #0b0b0b;
  list-style: none;
}

.es-find-list a {
  display: flex;
  padding: 7px 12px;
}

.es-find-list a:hover,
.es-find-list a:focus {
  outline: none;
  background: var(--zebra);
}

.es-find-list a:focus .es-nick {
  color: var(--lime);
}

.es-win-tabs a {
  position: relative;
  padding: 13px 0 12px;
  color: var(--win-text);
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}

.es-win-tabs a::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  content: "";
  background: var(--lime);
  opacity: 0;
  transition: opacity 160ms ease;
}

.es-win-tabs a[aria-current] {
  color: var(--text);
}

.es-win-tabs a[aria-current]::after {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .es-win-tabs a:hover {
    color: var(--text);
  }
}

.es-podiums {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
  padding: 20px 20px 0;
}

.es-podiums[hidden] {
  display: none;
}

.es-podium {
  --medal: var(--gold);
  --medal-glow: rgba(255, 207, 63, 0.15);
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 18px 18px 16px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--medal-glow), rgba(26, 26, 26, 0) 75%), var(--box);
  box-shadow: inset 0 3px 0 var(--medal);
  color: var(--text);
  text-decoration: none;
  transition: transform 160ms ease;
}

.es-podium--1 {
  order: 2;
  padding-block: 28px 22px;
}

.es-podium--2 {
  --medal: var(--silver);
  --medal-glow: rgba(207, 214, 221, 0.1);
  order: 1;
}

.es-podium--3 {
  --medal: var(--bronze);
  --medal-glow: rgba(217, 146, 90, 0.12);
  order: 3;
}

@media (hover: hover) and (pointer: fine) {
  .es-podium:hover {
    transform: translateY(-3px);
  }
}

.es-podium-place {
  color: var(--medal);
  font-family: var(--sans);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}

.es-podium--1 .es-podium-place {
  font-size: 56px;
}

.es-podium-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.es-podium-name img {
  flex: none;
}

.es-podium-name .es-tag {
  color: var(--win-text);
  font-weight: 400;
}

.es-podium-points {
  color: var(--win-text);
  font-size: 15px;
}

.es-podium-points b {
  margin-right: 4px;
  color: var(--text);
  font-size: 30px;
  font-variant-numeric: tabular-nums;
}

.es-podium-record {
  color: var(--win-text);
  font-size: 15px;
}

.es-podium .es-rate {
  display: flex;
}

.es-podium .es-rate-bar {
  flex: 1;
  width: auto;
}

.es-podium.is-me {
  box-shadow: inset 0 3px 0 var(--medal), inset 3px 0 0 var(--lime);
}

.es-board-body {
  padding-top: 14px;
}

.es-board-body > .es-empty {
  padding-bottom: 14px;
}

.es-table--board td {
  padding-block: 11px;
}

.es-table--board tbody tr:nth-child(odd) {
  background: rgba(255, 255, 255, 0.025);
}

.es-table--board tbody tr:hover {
  background: rgba(255, 255, 255, 0.06);
}

.es-table--board tbody tr.is-me {
  background: rgba(135, 215, 4, 0.12);
  box-shadow: inset 3px 0 0 var(--lime);
}

.es-table--board .es-board-place {
  color: var(--win-text);
  font-family: var(--sans);
  font-size: 15px;
}

.es-board-who {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.es-board-rule {
  padding: 0 20px 18px;
  color: var(--win-text);
  font-size: 14px;
}

@media (max-width: 700px) {
  .es-win-head h1 {
    font-size: 24px;
  }

  .es-podiums {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 12px 12px 0;
  }

  .es-podium,
  .es-podium--1 {
    grid-template-columns: 52px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 4px;
    padding: 14px 14px 14px 10px;
  }

  .es-podium--1,
  .es-podium--2,
  .es-podium--3 {
    order: 0;
  }

  .es-podium-place,
  .es-podium--1 .es-podium-place {
    grid-row: 1 / span 4;
    align-self: center;
    font-size: 38px;
    text-align: center;
  }

  .es-podium-name {
    font-size: 18px;
  }

  .es-podium-points b {
    font-size: 24px;
  }

  .es-board-rule {
    padding: 0 14px 14px;
  }
}

/* The standings lose their less important columns as the screen narrows: matches and
   tournaments first, then draws, K/D and accuracy (es-wide, section 14), then wins and losses. */
@media (max-width: 980px) {
  .es-table--board .es-board-more {
    display: none;
  }
}

@media (max-width: 480px) {
  .es-table--board .es-board-wl {
    display: none;
  }

  .es-board-rate .es-rate-bar {
    display: none;
  }
}

/* The smallest phones: the place, the flag, the name and the points. */
@media (max-width: 375px) {
  .es-table--board .es-board-rate,
  .es-table--board .es-rank {
    display: none;
  }

  .es-table--board th:first-child,
  .es-table--board td:first-child {
    width: 34px;
  }

  .es-table--board td .es-player {
    max-width: 7em;
  }
}

/* Match history on a phone: the match under the tournament's name. */
.es-table--compact .es-phone-match {
  margin-top: 2px;
  color: #d2d2d2;
  font-size: 15px;
}

@media (max-width: 760px) {
  .es-table--compact td.es-cupcell {
    min-width: 0;
  }
}

.es-pro-missing {
  grid-column: 1 / -1;
  padding: 28px 20px;
}

/* Tablets: one column; the picture shrinks beside the name. */
@media (max-width: 980px) {
  .es-main.es-pro {
    grid-template-columns: minmax(0, 1fr);
  }

  .es-pro-card {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    align-items: center;
  }

  .es-pro-card .es-pro-name {
    order: 2;
    padding: 14px 20px 14px 4px;
    background: none;
  }

  .es-pro-pic {
    order: 1;
    padding: 16px;
  }
}

/* Phones: the boxes one under the other. */
@media (max-width: 700px) {
  .es-main.es-pro {
    gap: 10px;
  }

  .es-pro-card {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .es-pro-pic {
    padding: 12px;
  }

  .es-pro-card .es-pro-name {
    padding: 12px 14px 12px 2px;
  }

  .es-pro-name h1 {
    font-size: 21px;
  }

  .es-win-head {
    min-height: 52px;
    padding: 10px 14px;
  }

  .es-find {
    width: 100%;
  }

  .es-win-head h2 {
    font-size: 20px;
  }

  .es-pro-title small {
    display: none;
  }

  .es-win-tabs {
    flex-wrap: nowrap;
    gap: 0 18px;
    padding: 0 14px;
    overflow-x: auto;
  }

  .es-pro-grid {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
  }

  .es-pro-about,
  .es-win-body {
    padding: 12px 14px 16px;
  }
}

/* 13  Footer ------------------------------------------------------------------------------- */
.es-footer {
  margin-top: auto;
  padding: 12px 0;
  border-top: 1px solid #000;
  background: #171717;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--dim);
  font-size: 14px;
}

.es-footer-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

.es-footer p {
  margin: 0;
}

.es-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.es-footer a {
  color: var(--muted);
  text-decoration: none;
}

.es-footer a:hover {
  color: var(--lime);
}

/* 14  Tablets and phones --------------------------------------------------------------------- */
@media (max-width: 980px) {
  .es-how {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .es-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .es-grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .es-top-in {
    gap: 8px 14px;
  }

  .es-nav a {
    padding: 0 10px;
    font-size: 18px;
  }
}

/* Where the menu is still one row but "Masters of the Sword" no longer fits beside the
   nickname (it ran into it at 768): "Masters", as on a small phone. */
@media (min-width: 761px) and (max-width: 900px) {
  .es-nav-more {
    display: none;
  }
}

@media (max-width: 760px) {
  body {
    --art-w: max(760px, 100vw);
    background-image: url("assets/bg-arena-1920-v6.webp");
    background-position: center 92px;
    font-size: 16px;
  }

  /* Two rows: the name and who is logged in, then the tabs, which slide sideways if
     they ever outgrow the screen. */
  .es-top-in {
    flex-wrap: wrap;
    gap: 0 10px;
    padding-top: 6px;
  }

  .es-nav {
    order: 3;
    flex: 1 0 100%;
    margin-inline: -16px;
    padding-inline: 8px;
    overflow-x: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    scrollbar-width: none;
  }

  .es-nav a {
    padding: 0 9px;
    font-size: 16px;
    line-height: 44px;
  }

  /* On a phone the words come first and the picture under them, in the page's flow. */
  body:has(.es-hero) {
    background-image: none;
  }

  .es-hero {
    min-height: 0;
    padding: 26px 16px 0;
  }

  .es-hero::after {
    content: "";
    display: block;
    width: calc(100% + 32px);
    margin: 4px -16px -4px;
    aspect-ratio: 16 / 9;
    margin-bottom: -18%;
    background: url("assets/bg-arena-phone-1280-v6.webp") center / cover no-repeat;
  }

  /* Two lines on a phone: the name, then ESPORTS under it. */
  .es-wordmark--hero {
    font-size: clamp(30px, 10.4vw, 52px);
    line-height: 1;
    white-space: normal;
  }

  .es-wordmark--hero b {
    display: block;
  }

  .es-hero p {
    font-size: 17px;
  }

  .es-hero-big .es-hero {
    padding-bottom: 0;
  }

  .es-hero-big .es-wordmark--hero {
    font-size: clamp(34px, 11.6vw, 58px);
  }

  .es-hero-big .es-hero p {
    font-size: 19px;
  }

  .es-main {
    gap: 18px;
    padding-block: 18px 44px;
  }

  .es-panel {
    padding: 16px 16px 20px;
  }

  .es-panel-head h1 {
    font-size: 26px;
  }

  .es-panel-head h2,
  .es-title {
    font-size: 22px;
  }

  .es-lead {
    margin-bottom: 20px;
    font-size: 17px;
  }

  .es-tour-bar {
    padding: 12px 16px 14px;
  }

  .es-tour-text strong {
    font-size: 20px;
  }

  .es-tour-next {
    width: 100%;
    justify-content: space-between;
    margin-left: 0;
  }

  .es-tour-when {
    justify-items: start;
    text-align: left;
  }

  .es-next,
  .es-next--own,
  .es-cup-head,
  .es-cup,
  .es-entry {
    grid-template-columns: minmax(0, 1fr);
  }

  .es-next-logo {
    width: 150px;
  }

  .es-next h3 {
    font-size: 25px;
  }

  .es-cup-head h1 {
    font-size: 27px;
  }

  .es-next-side,
  .es-cup .es-count {
    justify-items: start;
    text-align: left;
  }

  .es-cup-side {
    justify-content: flex-start;
    text-align: left;
  }

  .es-count strong {
    font-size: 30px;
  }

  .es-format {
    font-size: 15px;
  }

  .es-how {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .es-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
  }

  .es-alert {
    grid-template-columns: minmax(0, 1fr);
  }

  .es-profile {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .es-profile-place {
    grid-column: 1 / -1;
    justify-items: start;
    text-align: left;
  }

  .es-profile h1 {
    font-size: 27px;
  }

  .es-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .es-table .es-wide {
    display: none;
  }

  .es-phone-only {
    display: block;
    color: var(--dim);
    font-size: 14px;
  }

  .es-vs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .es-vs-score {
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: 30px;
    text-align: center;
  }

  .es-btn {
    min-height: 44px;
  }

  .es-btn--small,
  .es-tap {
    min-height: 40px;
  }

  /* One row of tabs, in the narrow face; it slides sideways if a screen is too small. */
  .es-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .es-tabs a,
  .es-tabs button {
    flex: none;
    min-height: 44px;
    padding-inline: 9px;
    font-family: var(--sans);
    font-size: 15px;
    white-space: nowrap;
  }

  .es-footer a,
  .es-panel-head .es-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  .es-footer ul {
    gap: 0 18px;
  }

  .es-members li {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .es-members li > :last-child {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .es-members li > span:last-child:empty {
    display: none;
  }
}

@media (max-width: 420px) {
  .es-brand .es-wordmark {
    font-size: 16px;
  }

  .es-nav-more {
    display: none;
  }

  .es-bracket {
    grid-template-columns: repeat(3, 200px);
    gap: 0 28px;
    min-width: 0;
  }

  .es-round:not(:last-child) li::after,
  .es-join {
    right: -16px;
  }

  .es-round:not(:last-child) li::after {
    width: 16px;
  }

  .es-round:not(:first-child) li::before {
    left: -14px;
    width: 14px;
  }

  .es-table th,
  .es-table td {
    padding-inline: 6px;
  }

  .es-table td .es-player {
    max-width: 8.5em;
  }

  .es-table .es-tag {
    display: none;
  }

  .es-fight {
    --fb-h: 48px;
    padding-inline: calc(var(--fb-cap) + 10px);
    font-size: 16px;
    white-space: nowrap;
  }

  /* "Continue with <team>" on the smallest phones: smaller words, never wider than the panel
     (a wider button stretches the page sideways). */
  @media (max-width: 360px) {
    .es-fight {
      max-width: 100%;
      overflow: hidden;
      font-size: 14px;
      letter-spacing: 0;
    }
  }

  .es-account a {
    min-height: 40px;
  }

  .es-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .es-tabs a,
  .es-tabs button {
    padding-inline: 7px;
    font-size: 16px;
  }
}

/* 10b  The 2017 bracket (owner 2026-10-09, the approved mockup): knockout rounds, then the upper and
   lower brackets and the grand final; and the map bans of a match from the last 16. */
.es-de h4 {
  margin: 18px 0 8px;
  color: var(--lime);
  font-family: var(--sans);
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.es-de h4:first-child {
  margin-top: 0;
}

.es-bracket--cols {
  grid-template-columns: repeat(var(--cols), minmax(210px, 1fr));
  min-width: calc(var(--cols) * 244px);
}

.es-bracket--one {
  grid-template-columns: minmax(230px, 340px);
  min-width: 0;
}

.es-ban-sub {
  margin: 0 0 14px;
  color: var(--muted);
}

.es-ban-turn {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 18px;
  margin-bottom: 14px;
  padding: 10px 14px;
  border-left: 4px solid var(--lime);
  background: rgba(135, 215, 4, 0.07);
}

.es-ban-turn b {
  color: var(--lime);
  font-size: 20px;
}

.es-ban-clock {
  color: var(--text);
  font-family: var(--sans);
  font-size: 23px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.es-ban-maps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.es-ban-maps--small {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 620px;
}

.es-ban-map {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: #000;
  color: var(--text);
  font: inherit;
  text-align: left;
}

button.es-ban-map {
  cursor: pointer;
}

.es-ban-map img {
  display: block;
  width: 100%;
  aspect-ratio: 820 / 544;
  object-fit: cover;
}

.es-ban-map .es-ban-name {
  display: block;
  padding: 6px 10px 7px;
  font-size: 16px;
  font-weight: 700;
}

.es-ban-map.is-banned img {
  filter: grayscale(1) brightness(0.35);
}

.es-ban-map.is-banned .es-ban-name {
  color: var(--dim);
  text-decoration: line-through;
}

.es-ban-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 700;
}

.es-ban-map.is-banned .es-ban-tag {
  background: rgba(0, 0, 0, 0.75);
  color: #ff8a80;
}

.es-ban-map.is-pick {
  border-color: var(--lime);
  box-shadow: 0 0 0 1px var(--lime);
}

.es-ban-map.is-pick .es-ban-tag {
  background: var(--lime);
  color: #111;
}

.es-ban-map.is-chosen,
button.es-ban-map:hover,
button.es-ban-map:focus-visible {
  border-color: #ffb03b;
}

.es-ban-map.is-chosen .es-ban-tag {
  background: #ffb03b;
  color: #111;
}

/* The Clan Championship: a format tile is a garage hull picture (the approved mockup A) */
.es-ban-map.es-format img {
  aspect-ratio: 160 / 103;
  padding: 12px 10px 2px;
  object-fit: contain;
  background: radial-gradient(ellipse at 50% 60%, #2a2f22 0%, #0b0c0a 75%);
}

.es-ban-map.es-format .es-format-gear {
  display: block;
  padding: 0 10px 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.es-ban-map.is-banned .es-format-gear {
  color: var(--dim);
}

.es-battles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin: 16px 0;
  padding: 0;
  list-style: none;
}

.es-battle {
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.35);
}

.es-battle.is-now {
  border-color: var(--lime);
}

.es-battle b {
  display: block;
  font-size: 17px;
}

.es-battle span {
  display: block;
  color: var(--muted);
  font-size: 14px;
}

.es-battle em {
  display: block;
  margin-top: 4px;
  color: var(--lime);
  font-style: normal;
  font-size: 14px;
  font-weight: 700;
}

.es-battle.is-later em {
  color: var(--dim);
}

.es-battle.is-set em {
  color: var(--text);
}

/* The roster (the approved mockup D) */
.es-roster-count {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 18px;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-left: 4px solid var(--lime);
  background: rgba(135, 215, 4, 0.07);
}

.es-roster-count b {
  color: var(--lime);
  font-size: 19px;
}

.es-roster-table {
  width: 100%;
  border-collapse: collapse;
}

.es-roster-table td {
  padding: 7px 10px;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}

.es-roster-table td:last-child {
  text-align: right;
}

.es-roster-table .es-rank {
  width: 26px;
  height: 26px;
  margin-right: 8px;
  vertical-align: middle;
}

.es-roster-in {
  color: var(--lime);
  font-weight: 700;
}

.es-roster-btn {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.4);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.es-roster-btn--out {
  color: #ff8a80;
}

.es-roster-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.es-prize-ok {
  color: var(--lime);
  font-weight: 700;
}

.es-prize-no {
  color: var(--dim);
}

.es-ban-log {
  margin: 14px 0 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 15px;
  columns: 2;
}

.es-ban-h {
  margin: 22px 0 10px;
  font-size: 19px;
}

.es-ban-note {
  margin-top: 12px;
  color: var(--dim);
  font-size: 14px;
}

.es-places {
  margin: 0;
  padding: 0;
  list-style: none;
}

.es-places li {
  display: flex;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}

.es-places b {
  min-width: 64px;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .es-ban-maps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .es-ban-log {
    columns: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none;
    transition: none;
  }
}

/* Last, so it beats every one-class display rule above (0,2,0 against 0,1,0): an element
   with the hidden attribute is never shown, whatever else it is. */
:root [hidden] {
  display: none;
}

/* An open fold does not need its count of steps. */
.es-fold[open] > summary .es-small {
  display: none;
}

/* Home on a phone with a step waiting (owner 2026-10-12: show what to do next, less scrolling): the
   wordmark alone, the picture and the line under it give their room to the step. */
@media (max-width: 760px) {
  .es-has-step .es-hero {
    padding-bottom: 6px;
  }

  .es-has-step .es-hero::after,
  .es-has-step .es-hero p {
    display: none;
  }
}

/* ---- My team, compact (owner 2026-10-12: "repetitive text, long scroll, useless information") ----
   The top panel holds the name, the next step and the invites; teams on the left, the clan and the
   profile as short lines on the right; a phone stacks them. */
.es-my-top .es-panel-head {
  margin-bottom: 4px;
}

.es-my .es-next-step .es-kicker,
.es-my .es-next-times {
  display: none;
}

.es-my .es-next-step {
  margin-top: 6px;
}

.es-my-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}

.es-my-side {
  display: grid;
  gap: 18px;
}

.es-my-line {
  margin: 0 0 6px;
  color: var(--muted);
}

.es-my-line a {
  color: var(--text);
}

.es-my-fold > summary {
  margin-top: 6px;
  color: var(--lime);
  font-size: 15px;
}

.es-my-fold > summary::before {
  content: "\25B8\00a0";
}

.es-my-fold[open] > summary::before {
  content: "\25BE\00a0";
}

.es-my-invite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 0;
  border-top: 1px solid var(--rule);
}

.es-my-invite .es-actions {
  display: flex;
  gap: 8px;
}

.es-myteam .es-invite {
  margin: 8px 0 0;
}

.es-myteam .es-invite .es-input {
  flex: 1 1 220px;
}

.es-myteam-head .es-small {
  margin: 0;
}

@media (max-width: 860px) {
  .es-my-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- The join page without the aside and the questions (owner 2026-10-12: "too much dumb text"):
   one column, the times as plain labelled columns, the room name large. */
.es-guide {
  grid-template-columns: minmax(0, 1fr);
}

.es-guide-times {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 36px;
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
}

.es-guide-times li {
  display: grid;
  gap: 2px;
}

.es-guide-times small {
  color: var(--dim);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.es-guide-times strong {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.es-room-line {
  display: grid;
  gap: 2px;
  margin: 0 0 10px;
}

.es-room-line small {
  color: var(--dim);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.es-room-line .es-room {
  font-size: 22px;
}

.es-rows--tight > .es-row {
  padding-top: 4px;
  padding-bottom: 4px;
}

.es-row--invite {
  flex-wrap: wrap;
  justify-content: space-between;
}

.es-make {
  margin: 10px 0 0;
}

.es-step-side .es-small {
  margin: 4px 0 0;
  text-align: right;
}

.es-new-team > summary {
  margin-top: 12px;
  color: var(--lime);
  font-weight: 700;
}

/* 27  Watch and News (owner 2026-10-13, the approved mockup `_mockup-news`; "more modern with round tile corners
   similar to main website"): open sections like Tournaments, the Kick stream big in the middle and the newest
   news under it as picture tiles with the main site's rounded, lifted look; every post on /news, staff write
   them on Organize with a picture of the site's own or an upload. */
.es-feature {
  display: grid;
  gap: 16px;
}

.es-feature-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 18px;
}

.es-watch {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: #000;
  box-shadow: 0 17px 32px rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  font: inherit;
  text-align: left;
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.es-watch > img,
.es-watch > iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (hover: hover) and (pointer: fine) {
  .es-watch:not(.is-playing):hover {
    transform: translateY(-3px);
    border-color: rgba(135, 215, 4, 0.75);
    box-shadow: 0 22px 38px rgba(0, 0, 0, 0.54), 0 0 22px rgba(135, 215, 4, 0.1);
  }

  .es-watch:not(.is-playing):hover > img {
    transform: scale(1.03);
  }
}

.es-watch:focus-visible {
  border-color: var(--lime);
}

.es-watch.is-playing {
  cursor: auto;
}

.es-watch-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.82));
}

.es-watch-live,
.es-watch-viewers {
  position: absolute;
  top: 16px;
  padding: 5px 11px;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.32);
  font-size: 15px;
  line-height: 1.3;
}

.es-watch-live {
  left: 16px;
  background: #e5322b;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.es-watch-viewers {
  right: 16px;
  background: rgba(0, 0, 0, 0.72);
}

.es-watch-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  transition: transform 180ms ease, border-color 180ms ease;
}

.es-watch-play::before {
  content: "";
  position: absolute;
  left: 31px;
  top: 22px;
  border-style: solid;
  border-width: 17px 0 17px 28px;
  border-color: transparent transparent transparent #fff;
}

.es-watch:hover .es-watch-play {
  transform: scale(1.06);
  border-color: var(--lime);
}

.es-watch-title {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 15px;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.25;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}

.es-watch-name {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--lime);
  font-family: var(--quadrat);
  font-size: 28px;
}

.es-news-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.es-news-tiles a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.es-news-art,
.es-news-thumb {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #090909;
}

.es-news-art {
  aspect-ratio: 2 / 1;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  box-shadow: 0 17px 32px rgba(0, 0, 0, 0.45);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.es-news-art img,
.es-news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 30%;
}

.es-news-tiles .es-news-art img {
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .es-news-tiles a:hover .es-news-art {
    transform: translateY(-3px);
    border-color: rgba(135, 215, 4, 0.75);
    box-shadow: 0 22px 38px rgba(0, 0, 0, 0.54), 0 0 22px rgba(135, 215, 4, 0.1);
  }

  .es-news-tiles a:hover .es-news-art img {
    transform: scale(1.04);
  }
}

.es-news-tiles a:focus-visible .es-news-art {
  border-color: var(--lime);
}

.es-news-art img.is-mid,
.es-news-thumb img.is-mid,
.es-news-pick img.is-mid {
  object-position: 50% 40%;
}

.es-news-art.is-empty img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.es-news-tiles .es-news-text {
  display: block;
  padding: 14px 2px 0;
}

.es-news-date {
  display: block;
  color: var(--dim);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.es-news-tiles b {
  display: block;
  margin-top: 4px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-transform: uppercase;
}

.es-news-line {
  display: -webkit-box;
  margin-top: 5px;
  overflow: hidden;
  color: var(--muted);
  font-size: 15px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.es-news-page {
  display: grid;
  gap: 24px;
}

.es-news-head {
  margin-bottom: 0;
}

.es-news-article {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  align-items: start;
  gap: 26px;
}

.es-news-article .es-news-art {
  border-radius: 12px;
}

.es-news-article h2 {
  margin: 4px 0 10px;
  font-size: 26px;
  line-height: 1.2;
}

.es-news-article p {
  max-width: 62ch;
  color: var(--muted);
  font-size: 17px;
}

.es-news-article p + p {
  margin-top: 10px;
}

.es-news-article .es-btn {
  margin-top: 16px;
}

.es-news-post {
  scroll-margin-top: 20px;
}

.es-news-more {
  text-align: center;
}

.es-news-form {
  display: grid;
  gap: 14px;
  max-width: 760px;
  margin-bottom: 8px;
}

.es-news-label {
  display: block;
  font-size: 16px;
  font-weight: 700;
}

.es-news-up-art {
  border-bottom: 2px dashed #3a3a3a;
  color: var(--lime);
  font-size: 30px;
  font-weight: 700;
}

.es-news-form textarea.es-input {
  min-height: 120px;
  resize: vertical;
}

.es-news-button {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 10px;
}

.es-news-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.es-news-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.es-news-list li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--rule);
}

.es-news-thumb {
  width: 96px;
  height: 48px;
  border-radius: 8px;
}

.es-news-thumb.is-empty img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.es-news-list a {
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}

.es-news-list a:hover {
  color: var(--lime);
}

.es-news-acts {
  display: flex;
  gap: 12px;
}

@media (max-width: 760px) {
  .es-news-tiles,
  .es-news-article,
  .es-news-button {
    grid-template-columns: minmax(0, 1fr);
  }

  .es-news-list li {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .es-news-thumb {
    width: 72px;
    height: 36px;
  }

  .es-news-acts {
    grid-column: 2;
  }

  .es-watch-title {
    font-size: 16px;
  }

  .es-watch-play {
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
  }

  .es-watch-play::before {
    left: 23px;
    top: 16px;
    border-width: 13px 0 13px 21px;
  }
}

/* 28  The tournament's page and the next-step card (owner 2026-10-13, the approved mockup `_mockup-cup`):
   its picture on top, register, check in and withdraw in the head's side, the Organizer box for staff. */
.es-cup-banner {
  margin: 0;
  line-height: 0;
}

.es-cup-act .es-fight {
  min-width: 170px;
}

.es-cup-done {
  color: var(--lime);
  font-size: 18px;
  font-weight: 700;
}

.es-count.is-warn strong {
  color: var(--warn);
}

.es-cup-quiet {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 14px;
}

.es-cup-act .es-field-status:empty {
  display: none;
}

.es-org-word {
  color: #f5c518;
}

.es-org-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 28px;
}

.es-org-tool {
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

.es-org-tool h3 {
  margin: 0 0 4px;
  font-size: 17px;
}

.es-org-tool > p:not(.es-field-status) {
  margin: 0 0 10px;
  color: var(--dim);
  font-size: 15px;
}

.es-org-tool-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.es-org-tool-row + .es-org-tool-row {
  margin-top: 8px;
}

.es-org-tool-row .es-input {
  flex: 1 1 140px;
  width: auto;
  min-height: 40px;
  font-size: 16px;
}

.es-org-tool-row .es-input.es-org-n {
  flex: none;
  width: 76px;
}

.es-org-tool-row .es-btn {
  flex: none;
}

.es-btn--danger {
  border-color: var(--red);
  color: #ff8a8a;
}

.es-step-card .es-tour-pic {
  position: relative;
}

.es-step-badge {
  position: absolute;
  left: 16px;
  top: 14px;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.72);
  line-height: 1.3;
}

.es-step-card .es-tour-text {
  flex: 1 1 0;
}

.es-step-card .es-tour-text strong {
  font-size: 24px;
}

.es-step-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
}

.es-step-meta .es-format {
  margin: 2px 0 0;
}

.es-step-side {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

@media (max-width: 760px) {
  .es-org-tools {
    grid-template-columns: minmax(0, 1fr);
  }

  .es-step-side {
    width: 100%;
  }

  .es-step-side .es-fight {
    width: 100%;
  }
}