/* ============================================================
   Hypersomnia — terminal / pixel style.
   Palette taken from the old newspaper (teamhypersomnia.github.io):
   black background, VS-style syntax colors, [bracketed] links.
   Rule: no transitions, no rounded corners. Hover = instant glow.
   ============================================================ */

:root {
  --bg: #000;
  --panel: #070707;
  --row: #0b0b0b;
  --line: rgb(60, 60, 60);
  --line-dim: rgb(35, 35, 35);
  --table-line: rgba(255, 255, 255, 0.1);
  --table-line-dim: rgba(255, 255, 255, 0.05);

  --text: rgb(170, 170, 170);
  --bright: rgb(220, 220, 220);
  --white: #fff;
  --dim: rgb(127, 127, 127);
  --faint: rgb(90, 90, 90);

  --teal: rgb(78, 201, 176);      /* vskeyword / vstype */
  --blue: rgb(86, 156, 214);      /* vsstring */
  --magenta: rgb(189, 99, 197);   /* vsmacro */
  --enum: rgb(184, 215, 163);     /* vsenum */
  --number: rgb(181, 206, 168);   /* vsnumber */
  --comment: rgb(87, 166, 74);    /* vscomment */
  --online: rgb(34, 197, 76);     /* onlinegreen */
  --yellow: rgb(220, 220, 170);
  --orange: rgb(214, 157, 133);
  --red: rgb(244, 71, 71);
  --gold: rgb(255, 215, 0);

  --mono: Consolas, monaco, monospace;

  font-family: var(--mono);
  font-size: 14.4px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  border-radius: 0 !important;
}

html {
  background: var(--bg);
  scrollbar-color: var(--line) var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: var(--bg);
  font-family: Consolas, monaco, monospace !important;
  font-size: 14.4px;
  line-height: 1.5;
}

img {
  image-rendering: pixelated;
  max-width: 100%;
}

::selection {
  background: var(--teal);
  color: #000;
}

/* ---------- headings ---------- */

h1,
h2,
h3 {
  font-family: var(--mono);
  font-weight: bold;
  line-height: 1.5;
}

/* page titles look like any other section heading */
h1,
h2 {
  font-size: 1.17em;
  color: var(--teal);
  margin: 1.5em 0 0.6em;
}

.tagline {
  /* shrink-wrapped so the dotted separator is as wide as the text */
  display: table;
  margin: 1.2em auto 0.8em;
  padding: 0 0.5em 0.4em;
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
  color: var(--white);
  border-bottom: 1px dotted var(--line);
}

.subtagline {
  text-align: center;
  font-size: 18px;
  color: var(--text);
  margin: 0 0 2em;
}

/* right under the downloads table */
.subtagline.free-note {
  margin: 2em 0 0;
}

.free-note a {
  font-weight: bold;
  color: var(--teal);
}

.free-note a:hover {
  color: var(--white);
}

.free-note .fa-github {
  padding-right: 0.35em;
}

h3 {
  font-size: 1em;
  color: var(--white);
  margin: 0 0 0.3em;
}

/* ---------- text ---------- */

p,
li {
  margin: 0;
  line-height: 1.5;
  color: var(--text);
}

p {
  margin-bottom: 1em;
}

p {
  word-break: break-word;
}

em {
  font-style: normal;
  color: var(--blue);
}

ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

ul > li::before {
  content: "- ";
  color: var(--faint);
}

a {
  color: #1e6bb8;
  text-decoration: none;
}

a:hover {
  color: var(--white);
  text-decoration: underline;
}

code,
li > b {
  font-family: var(--mono);
  font-size: 1em;
  font-weight: 400;
  color: var(--orange);
  background: none;
  padding: 0;
}

abbr {
  text-decoration: none;
  cursor: help;
  border-bottom: 1px dotted var(--dim);
}

strong,
b,
label,
dt {
  font-weight: 400;
  color: var(--bright);
}

strong {
  color: var(--teal);
}

hr {
  border: none;
  border-top: 1px dotted var(--line);
}

/* ---------- semantic colors ---------- */

.u {
  color: var(--online);
}

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

.extra {
  font-size: 1em;
}

.flame {
  color: var(--orange);
}

.flame > i {
  margin: 0 0.15em 0 0.4em;
}

.rank {
  height: 16px;
  margin-right: 6px;
  vertical-align: -2px;
  image-rendering: pixelated;
}

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

.ranked {
  color: var(--yellow);
}

.spectator {
  color: var(--text);
}

.metropolis {
  color: var(--magenta);
}

.atlantis {
  color: var(--comment);
}

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

.online {
  color: var(--online);
}

.dimmed {
  color: var(--faint);
}

.strong {
  display: none;
}

.responsive {
  overflow-x: auto;
  margin-bottom: 0.75em;
}

/* ---------- top line / logo / nav ---------- */

.mininav {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}

.mininav a {
  color: var(--dim);
}

.mininav a:hover {
  color: var(--white);
}

.mininav .fa-solid,
.mininav .fa-brands,
nav .fa-solid,
nav .fa-brands {
  display: none;
}

footer i {
  padding-right: 0.35em;
  font-size: 0.85em;
}

footer > a:hover > i {
  color: var(--teal);
}

.logo-center {
  display: flex;
  align-items: center;
  justify-content: center;
  /* show ~700px of the 1240px-tall library hero across the full width */
  min-height: calc(100vw * 778 / 3840 * 0.9);
  margin: 0 auto;
  padding: 1.5rem 0 1rem;
}

/* top bar + logo band + menu share one library hero background;
   the bars get a black overlay */
.hero {
  background: #000 url("/assets/images/logo_bg.jpg") center top / cover no-repeat;
  image-rendering: pixelated;
}

.topbar,
.footer-band {
  background: rgba(0, 0, 0, 0.6);
}

/* sticky footer: on short pages the content area grows so the footer
   screenshot's bottom edge touches the bottom of the viewport */
body#top {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

body#top > .container {
  flex: 1 0 auto;
}

/* footer links + dove quote share the footer screenshot background */
.footer-hero {
  /* ---- CALIBRATION (desktop; mobile overrides are in the <=600px block) ----
     The rocket launcher guy spans ~40%..51.6% of the screenshot horizontally
     and sits at ~50% of its height. */
  --fw: max(100vw, 480px); /* rendered width of the 1920x1080 screenshot */
  --bg-x: 50%;             /* horizontal background-position */
  --bg-y: 46.5%;           /* vertical background-position: lower % = character lower on the page */
  --quote-x: 0.04;         /* quote box left edge = page center + this * --fw */

  margin-top: 3em;
  /* screenshot baked at 20% brightness */
  background: #000 url("/assets/images/footer_bg.jpg") var(--bg-x) var(--bg-y) / var(--fw) auto no-repeat;
  image-rendering: pixelated;
}

.logo-center > a {
  display: inline-block;
  padding: 0.5em 1em;
}

.logo-center > a > .responsive {
  margin-bottom: 0;
  image-rendering: pixelated;
}

.logo-center > a:hover > .responsive {
  filter: drop-shadow(0 0 6px rgba(0, 255, 0, 0.4));
}

nav {
  background: rgba(0, 0, 0, 0.6);
  border-top: 1px dotted var(--line);
  border-bottom: 1px dotted var(--line);
}

nav > .flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25em 1.25em;
  padding: 8px 0;
}

nav a {
  font-size: 18px;
}

nav a,
.mininav a,
footer > a {
  display: inline-flex;
  align-items: baseline;
  text-transform: uppercase;
  color: var(--enum);
}

nav a::before,
.mininav a::before,
footer > a::before {
  content: "[";
  color: var(--dim);
}

nav a::after,
.mininav a::after,
footer > a::after {
  content: "]";
  color: var(--dim);
}

.mininav a {
  text-transform: none;
}

nav a.active {
  color: var(--teal);
}

nav a:hover {
  color: var(--white);
}

/* ---------- index ---------- */

table.downloads {
  width: auto;
  margin: 0 auto;
  font-size: 18px;
}

.downloads-note {
  text-align: center;
  margin-top: 1em;
}

.downloads td {
  white-space: nowrap;
}

.downloads th,
.downloads td {
  padding: 10px 18px;
}

.downloads td > i {
  width: 1.6em;
  padding-right: 0;
  color: var(--enum);
}

.downloads tbody > tr:hover > td > i {
  color: var(--teal);
}

/* ---------- arenas ---------- */

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
}

/* small List / Grid switch, same look as the tab buttons */
.view-switch {
  display: flex;
}

.view-switch button {
  position: relative;
  margin-left: -1px;
  padding: 2px 10px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  color: var(--dim);
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--table-line);
  cursor: pointer;
}

.view-switch button:hover {
  z-index: 1;
  color: var(--white);
  border-color: var(--white);
}

.view-switch button.active {
  z-index: 1;
  color: var(--teal);
  border-color: var(--teal);
  pointer-events: none;
}

[hidden] {
  display: none !important;
}

/* list view: every row is exactly as tall as the miniature */
.arena-table td {
  vertical-align: middle;
}

/* more visible row separators than in other tables */
.arena-table tbody td {
  border-top: 1px dotted rgba(255, 255, 255, 0.18);
}

.arena-table td.arena-thumb {
  width: 1%;
  padding: 8px 10px;
}

.arena-thumb a {
  display: block;
}

.arena-thumb img {
  display: block;
  max-width: none;
  width: 120px;
  height: 80px;
  object-fit: contain;
  background: #000;
}

.arena-title {
  font-size: 18px;
}

.arena-desc {
  color: var(--dim);
  min-width: 220px;
  max-width: 360px;
}

.arenas > a {
  display: block;
  padding: 10px;
  text-align: center;
  border: 1px solid var(--table-line-dim);
}

.arenas > a:hover {
  border-color: var(--table-line);
}

.arenas > a > img {
  max-height: 150px;
  max-width: 200px;
}

.arena_name {
  display: block;
  margin-top: 0.5em;
  color: var(--enum);
}

.arena_author {
  display: block;
  color: var(--dim);
  font-size: 0.9em;
}

.arenas > a:hover > .arena_name {
  color: var(--white);
}

.arena {
  padding-top: 0.5em;
}

.arena > .responsive {
  margin: 0 auto;
}

.miniature {
  text-align: center;
  overflow: auto;
}

.miniature img {
  border: 1px solid var(--line);
}

dl {
  margin: 0;
}

dt {
  display: block;
  color: var(--teal);
  margin-bottom: 0.15em;
}

dt::after {
  content: ":";
  color: var(--dim);
}

dd {
  margin: 0 0 1em;
  color: var(--text);
}

.info-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.info-list > div {
  width: 33.33%;
}

.info-list > div:nth-child(2) {
  text-align: center;
}

.info-list > div:nth-child(3) {
  text-align: right;
}

/* ---------- servers ---------- */

.sv-tag {
  color: var(--faint);
}

.sv-tag.ranked-tag {
  color: var(--teal);
}

.sv-actions {
  white-space: nowrap;
}

.sv-actions > a + a {
  margin-left: 0.6em;
}

.sv-actions i {
  display: none;
}

/* ---------- forms ---------- */

.form {
  display: flex;
  gap: 8px;
  flex-direction: column;
}

.form-inline {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.form-group > label {
  color: var(--teal);
  display: block;
  margin-bottom: 4px;
}

.form-hint {
  margin-bottom: 6px;
  display: block;
  color: var(--dim);
}

.checkbox {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  align-items: flex-start;
}

.checkbox > label,
.checkbox > input {
  cursor: pointer;
}

input[type='text'],
input[type='submit'],
textarea,
select {
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--bright);
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 6px 8px;
  outline: none;
  margin-bottom: 8px;
  width: 100%;
}

input[type='text']:focus,
textarea:focus,
select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 8px rgba(78, 201, 176, 0.4);
}

input[type='submit'] {
  width: auto;
  cursor: pointer;
  color: var(--enum);
  text-transform: uppercase;
}

input[type='submit']:hover {
  color: var(--white);
  border-color: var(--white);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.25);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--bright);
  -webkit-box-shadow: 0 0 0 100px var(--bg) inset;
}

/* ---------- buttons (rendered as [TOGGLES]) ---------- */

/* tab buttons look like table column headers, glued together */
.btn-group {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0.75em;
  padding: 1px 0 0 1px;
}

.btn {
  margin: -1px 0 0 -1px;
}

.btn a,
.btn button {
  display: inline-flex;
  justify-content: center;
  gap: 0.4em;
  width: 100%;
  padding: 6px 10px;
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--dim);
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--table-line);
  cursor: pointer;
  outline: none;
  position: relative;
}

/* hover and active only differ by color + a border drawn over the neighbors */
.btn a:hover,
.btn button:not([disabled]):hover {
  z-index: 1;
  color: var(--white);
  border-color: var(--white);
}

.btn > a.active,
button.active {
  z-index: 1;
  color: var(--teal) !important;
  border-color: var(--teal) !important;
  pointer-events: none;
}

.btn i {
  font-size: 0.8em;
  align-self: center;
}

/* ---------- tables ---------- */

table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--table-line);
}

thead {
  border-bottom: 1px solid var(--table-line);
}

th {
  padding: 6px 10px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--dim);
  background: rgba(255, 255, 255, 0.015);
}

td {
  padding: 4px 10px;
  color: var(--text);
  border-top: 1px dotted var(--table-line-dim);
}

td + td,
th + th {
  border-left: 1px dotted var(--table-line-dim);
}

tbody > tr > td:first-child {
  color: var(--bright);
}

tbody > tr:hover > td {
  background: var(--row);
  color: var(--white);
}

tbody > tr:hover > td:first-child {
}

/* links inside tables use the menu link color */
td a {
  color: var(--enum);
}

td a.sv-name {
  color: var(--bright);
}

td img {
  vertical-align: middle;
  image-rendering: pixelated;
}

.maxwidth > tbody > tr > td {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#leaderboard > table > thead > tr > th:nth-child(1) {
  min-width: 38px;
}

.sortable th {
  cursor: pointer;
  user-select: none;
}

.sortable th:hover {
  color: var(--white);
}

.sortable th::after {
  content: " ▸";
  color: transparent;
}

.sortable th:hover::after {
  color: inherit;
}

/* only the column currently sorted by is colored */
.sortable th.dir-d,
.sortable th.dir-u {
  color: var(--teal);
}

.sortable th.dir-d::after {
  content: " ▾";
  color: inherit;
}

.sortable th.dir-u::after {
  content: " ▴";
  color: inherit;
}

.sortable th.no-sort {
  pointer-events: none;
}

.empty-row > td {
  color: var(--faint) !important;
  text-align: center;
}

/* ---------- footer ---------- */

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25em 1em;
  padding: 1.2em 0;
}

.footer-band {
  border-top: 1px dotted var(--line);
}

footer > a {
  color: var(--dim);
  text-transform: none;
}

footer > a:hover {
  color: var(--white);
}

.fa-check {
  color: var(--online);
}

.fa-solid,
.fa-brands {
  padding-right: 3px;
}

.fa-arrow-right {
  padding-left: 3px;
}

.dove {
  /* quote box sits right of the character, see --quote-x */
  text-align: left;
  padding: 2em 16px 2em calc(50% + var(--quote-x) * var(--fw));
  border-top: 1px dotted var(--line);
}

.dove a {
  display: inline-block;
  text-align: left;
  padding: 0.8em 1.4em;
  background: rgba(0, 0, 0, 0.75);
  border: 1px dotted var(--line);
  color: var(--dim);
  font-size: 12px;
  font-style: italic;
}

@media (max-width: 600px) {
  .footer-hero {
    /* ---- CALIBRATION (mobile) ---- */
    --fw: 700px;
    --bg-x: calc(150px - 0.516 * var(--fw)); /* character's right edge ~150px from the left */
    --bg-y: 20%;
  }

  .dove {
    padding-left: calc(100% - 212px);
    padding-right: 8px;
  }

  .dove a {
    padding: 0.8em 1em;
  }
}

.dove a:hover {
  color: var(--dim);
  text-decoration: underline;
}

.dove img {
  display: block;
  margin: 0 auto 0.3em;
  border: 0;
}

.dove-sep {
  display: block;
  margin: 0 0.6em 0.5em;
  border-top: 1px dotted var(--line);
}

/* ---------- scrollbar ---------- */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
  border-left: 1px solid var(--line-dim);
}

::-webkit-scrollbar-thumb {
  background: var(--line);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--teal);
}

/* ============================================================
   Desktop (≥ 1100px)
   ============================================================ */
@media (min-width: 1100px) {
  .container {
    width: 1080px;
    margin: 0 auto;
  }

  main {
    margin-top: 1em;
  }


  .btn,
  button {
    flex: 1 0 10%;
  }

  .btn a {
    min-width: 100px;
  }

  .box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75em;
  }

  th {
    min-width: 70px;
  }

  .arenas {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
  }

  .arenas > a {
    width: calc(25% - 12px);
  }

  .arena {
    display: flex;
    gap: 1em;
  }

  .miniature,
  .details {
    width: 50%;
  }
}

/* ============================================================
   Mobile (< 1100px)
   ============================================================ */
@media (max-width: 1100px) {
  main {
    display: block;
    padding: 0 16px;
  }

  .mininav {
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 6px 16px;
  }

  nav > .flex {
    padding: 8px 16px;
    gap: 0.2em 0.9em;
  }





  .btn,
  button {
    flex: 1 0 25%;
  }

  .box {
    display: grid;
  }

  .alert {
    margin: 0 1em;
  }

  .logo-center > a > .responsive {
    width: 100%;
    height: auto;
    max-width: 400px;
  }

  .arenas {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  th,
  td {
    padding: 4px 6px;
  }

  footer {
    padding: 1.2em 16px;
  }

  .sv-hide-mobile {
    display: none;
  }

  .arena-thumb img {
    width: 72px;
    height: 48px;
  }

  table.downloads,
  .subtagline {
    font-size: 14.4px;
  }

  .downloads th,
  .downloads td {
    padding: 8px 6px;
  }

  .sv-actions > a {
    display: block;
  }

  .sv-actions > a + a {
    margin-left: 0;
  }
}

/* ============================================================
   Tournament (LAN visualizer)
   ============================================================ */

.tournament-page {
  font-size: 20px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 3em 1.5em 4em;
}

.tournament-empty {
  text-align: center;
  margin: 4em 0;
  font-size: 1.4em;
  color: var(--dim);
}

.tournament-winner {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1em 0 2em;
  gap: 1em;
}

.tournament-winner-label {
  font-size: clamp(1.5em, 5vw, 3em);
  margin: 0;
  color: var(--gold);
  border: none;
  animation: blink 1s steps(1, end) infinite;
}

.tournament-winner-label::before {
  content: none;
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

.tournament-winner .team-card.won {
  min-width: 260px;
  font-size: 1.6em;
  padding: 0.8em 1.6em;
  color: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 0 24px rgba(255, 215, 0, 0.35);
}

.tournament-winner .team-card::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px dotted var(--gold);
  pointer-events: none;
  animation: blink-show 1s steps(1, end) infinite;
}

.tournament-separator {
  border: none;
  border-top: 1px dotted var(--line);
  margin: 2em 0 2.5em;
}

.bracket-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5em 0;
}

.stage-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0.5em 0;
}

.stage-separator {
  margin: 1.2em 0;
  width: min(80%, 480px);
}

.stage-label {
  position: relative;
  align-self: center;
  font-family: var(--mono);
  font-size: 0.6em;
  text-transform: uppercase;
  color: var(--teal);
  padding: 0.6em 1em;
  border: 1px solid var(--teal);
  margin-bottom: 0.4em;
}

.stage-label::before {
  content: "[ ";
  color: var(--dim);
}

.stage-label::after {
  content: " ]";
  color: var(--dim);
}

.match-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 8px;
}

.match-connector {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  width: 110px;
}

.match-score {
  font-family: var(--mono);
  font-size: 1.8em;
  color: var(--number);
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 0 0;
  line-height: 1.2;
  white-space: pre;
  width: 100%;
  text-align: center;
}

.match-line {
  display: block;
  width: 100%;
  height: 0;
  border-top: 2px dotted var(--line);
}

.team-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5em 1em;
  min-width: 200px;
  text-align: center;
  font-size: 1.3em;
  word-break: break-word;
  color: var(--bright);
  background: var(--bg);
  border: 1px solid var(--line);
}

.team-card:hover {
  border-color: var(--white);
}

.team-card.won {
  color: var(--online);
  border-color: var(--online);
  box-shadow: 0 0 10px rgba(34, 197, 76, 0.25);
}

.team-card.lost {
  color: var(--red);
  border-color: rgba(244, 71, 71, 0.5);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  opacity: 0.8;
}

.team-card.bye {
  color: var(--faint);
  border-color: var(--line-dim);
  border-style: dotted;
}

.team-card.bye:hover {
  border-color: var(--line);
}

@keyframes blink-show {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

.team-card.pulse::after,
.stage-label.pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px dotted var(--white);
  pointer-events: none;
  animation: blink-show 1s steps(1, end) infinite;
}

.stage-label.pulse::after {
  color: transparent;
}

.team-card .bye-tag {
  display: inline-block;
  margin-left: 0.5em;
  font-size: 0.75em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--faint);
}

.team-card .bye-tag::before {
  content: "[";
}

.team-card .bye-tag::after {
  content: "]";
}

@media (max-width: 700px) {
  .tournament-page {
    padding: 1.5em 0.75em 2em;
  }

  .stage-section {
    gap: 8px;
  }

  .match-pair {
    gap: 4px;
  }

  .match-connector {
    width: 80px;
    gap: 7px;
  }

  .match-score {
    font-size: 1.3em;
  }

  .team-card {
    min-width: 120px;
    padding: 0.4em 0.6em;
    font-size: 1em;
  }

  .tournament-winner .team-card {
    min-width: 200px;
    font-size: 1.3em;
  }
}

.maxwidth > tbody > tr > td.sv-actions {
  max-width: none;
  overflow: visible;
}