:root {
  --text-color: #222222;
  --text-color-two: #3c3c3c;
  --bg-color: #ffffff;
  --bg-color-two: #f9f9f9;
  --panel-color: #f2f2f7;
  --panel-color-two: #e5e5ea;
  --panel-color-three: #d1d1d6;
  --grey-dark: #666666;
  --link-color-blue: #0275d8;
  --accent: #e4572e;
  --win: rgba(27, 235, 106, 0.1);
}

/* Dark theme: the class is set in base.html from the visitor's saved choice, else their device setting. */
:root.dark {
  --text-color: #e6e6e6;
  --text-color-two: #aaaaaa;
  --bg-color: #121212;
  --bg-color-two: #1c1c1e;
  --panel-color: #2c2c2e;
  --panel-color-two: #3a3a3c;
  --panel-color-three: #48484a;
  --grey-dark: #999999;
  --link-color-blue: #108ffd;
  color-scheme: dark;
}
:root.dark header { border-bottom: 2px solid #4d4d4d; }
:root.dark footer { border-top: 2px solid #4d4d4d; }
:root.dark button, :root.dark a.button { background-color: var(--accent); }
:root.dark button.secondary { background-color: var(--panel-color-three); }
:root.dark button.danger { background-color: #cc0000; }
:root.dark button.chosen { background-color: #1beb6a; }

* { box-sizing: border-box; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-color);
  background: var(--bg-color);
}

a { text-decoration: none; color: inherit; }
h1 { font-size: 1.8em; margin: 5px 0 15px; }
h2 { font-size: 1.3em; margin: 25px 0 10px; }
ul.nav { margin: 0; padding: 0; list-style: none; display: flex; flex-flow: row nowrap; }

.container { max-width: 1280px; margin: 0 auto; }

/* Header */
header, footer { background: #000; color: #fff; }
.header { display: flex; align-items: center; padding: 10px; }
.brand {
  display: flex; align-items: center; gap: 8px; margin-right: 20px;
  font-family: Anton, sans-serif; font-size: 30px; letter-spacing: 0.06em; line-height: 45px;
}
.brand svg { width: 26px; height: 26px; fill: var(--accent); }
.header nav { flex: 1; }
.header .nav li {
  margin-right: 5px; border-top: 3px solid transparent;
  font-family: Anton, sans-serif; font-size: 20px;
}
.header .nav li a { display: block; padding: 15px; }
.header .nav li:hover, .header .nav li.active { border-top-color: #f0f0f0; background-color: rgba(94, 94, 94, 0.2); }
.header .account { display: flex; align-items: center; gap: 10px; }
.header .account .user-link {
  display: flex; align-items: center; align-self: stretch; padding: 15px 5px;
  font-weight: 700; font-size: 20px; border-top: 3px solid transparent;
  max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.header .account .user-link:hover, .header .account .user-link.active { border-top-color: #f0f0f0; }
.header .account-menu { position: relative; }
.header .account-menu summary { list-style: none; cursor: pointer; }
.header .account-menu summary::-webkit-details-marker { display: none; }
.header .avatar { display: flex; padding: 13px; border-radius: 50%; background-color: #fff; }
.header .avatar svg { width: 22px; height: 22px; fill: #000; }
/* Account menu: a black panel hanging from the header's bottom edge, as on Limitless. */
.account-options {
  position: absolute; right: -10px; top: calc(100% + 10px); z-index: 20; min-width: 200px;
  padding: 10px 15px; color: #fff; background-color: #000; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}
:root.dark .account-options { top: calc(100% + 12px); border: 1px solid #4d4d4d; border-top: 0; }
.account-options .user { font-weight: 700; padding: 5px 0 10px; }
.account-options .user.guest { font-style: italic; font-weight: 400; }
.account-options .group { padding: 5px 0; border-top: 1px solid grey; }
.account-options .group:last-of-type { padding-bottom: 0; }
.account-options form { margin: 0; }
:root.dark .account-options button, .account-options a, .account-options button {
  display: flex; align-items: center; width: calc(100% + 10px); margin: 0 -5px; padding: 8px;
  text-align: left; white-space: nowrap; font: inherit; font-weight: 400; letter-spacing: 0;
  color: #fff; background: transparent; border: 0; border-radius: 5px; cursor: pointer;
}
:root.dark .account-options button:hover, .account-options a:hover, .account-options button:hover {
  background-color: #fff; color: #000;
}
.account-options .icon { width: 16px; height: 16px; margin-right: 8px; flex: none; fill: currentColor; }
.account-options .theme .status { margin-left: 6px; font-size: 0.875rem; }
.account-options .theme .status.on { font-weight: 700; }

/* Grey strip under the header: section menu or tournament header */
.pre-content { background-color: var(--panel-color); }
.secondary-menu { padding: 10px; overflow-x: auto; }
.secondary-menu .nav, .tournament-header .nav { font-size: 16px; font-weight: 700; }
.secondary-menu .nav li, .tournament-header .nav li { white-space: nowrap; margin-right: 5px; }
.secondary-menu .nav li a, .tournament-header .nav li a { display: block; padding: 15px; border-radius: 5px; }
.secondary-menu .nav li.active a, .secondary-menu .nav li:hover a,
.tournament-header .nav li.active a, .tournament-header .nav li:hover a { background-color: var(--bg-color); }

.tournament-header { display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; padding: 0 10px; }
.tournament-header .row { padding: 15px 0; margin-right: 20px; }
.tournament-header .name { font-size: 25px; font-weight: 700; }
.tournament-header .info { margin-top: 4px; color: var(--text-color-two); font-size: 14px; }
.tournament-header .info span:not(:last-child)::after { content: "•"; margin: 0 8px; color: var(--grey-dark); }
.tournament-header .nav { padding: 10px 0; overflow-x: auto; }

.main { flex: 1; padding-top: 20px; }
.content { padding: 0 10px 30px; }

footer .container { padding: 20px 10px; font-size: 14px; }
footer a { text-decoration: underline; }

/* Buttons and forms */
button, a.button {
  display: inline-block; padding: 10px 25px; border: 0; border-radius: 5px; cursor: pointer;
  font: inherit; font-weight: 700; letter-spacing: 1px; text-align: center;
  color: #fff; background-color: #000;
}
table a.button { display: inline-block; height: auto; }
table a.button:hover { color: #fff; }
button.small, a.button.small { padding: 5px 10px; font-size: 13px; letter-spacing: 0; }
button.secondary { color: var(--text-color); background-color: var(--panel-color-two); }
button.chosen { color: #222; background-color: #1beb6a; }
button.danger { background-color: #cc0000; }
button:disabled { opacity: 0.4; cursor: not-allowed; }
form.inline { display: inline-flex; gap: 6px; margin: 0; }

.form { margin: 0 auto 20px; max-width: 500px; display: flex; flex-flow: column nowrap; }
.form.wide { max-width: 640px; }
.form .heading, .form-heading { font-size: 28px; margin-bottom: 20px; }
.form-heading { max-width: 640px; margin-left: auto; margin-right: auto; }
.form-heading.narrow { max-width: 500px; }
.form .row { position: relative; padding: 10px 0; margin-bottom: 5px; }
.form .row label, .form .radio-group .legend {
  position: absolute; top: 0; left: 10px; z-index: 1; padding: 0 5px;
  color: var(--text-color); background-color: var(--bg-color);
}
.form .row input, .form .row select {
  width: 100%; padding: 12px; font: inherit; color: var(--text-color);
  background-color: var(--bg-color); border: 1px solid var(--text-color); border-radius: 5px;
}
.form .split-row { display: flex; gap: 10px; }
.form .split-row .split { position: relative; flex: 1; min-width: 0; }
.form .split-row .split label { top: -10px; }
.form .radio-group {
  position: relative; padding: 14px 12px 10px; margin: 10px 0 5px;
  border: 1px solid var(--text-color); border-radius: 5px;
}
.form .radio-group .legend { top: -12px; }
.form .radio { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.form .radio label { cursor: pointer; }
.form .hint { font-size: 13px; color: var(--grey-dark); margin: 2px 2px 8px; }
.form > button { margin-top: 5px; font-size: 16px; padding: 12px; }

.response { margin-bottom: 15px; padding: 10px 12px; border-radius: 5px; }
.response.narrow { max-width: 640px; margin-left: auto; margin-right: auto; }
.response.slim { max-width: 500px; margin-left: auto; margin-right: auto; }
.response.error { background-color: rgba(231, 96, 96, 0.25); }
.response.ok { background-color: rgba(27, 235, 106, 0.2); }
.form-extension { max-width: 500px; margin: 0 auto 25px; text-align: center; }
.form-extension a { color: var(--link-color-blue); }

.infobox.step { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }

/* Tables */
.x-container { overflow-x: auto; }
table { width: 100%; margin-bottom: 25px; border-spacing: 0; }
table th { padding: 8px 6px; text-align: left; border-bottom: 2px solid var(--text-color); white-space: nowrap; }
table td { height: 40px; padding: 1px 5px; }
table th:first-child, table td:first-child { padding-left: 10px; }
table a:hover { color: var(--link-color-blue); }
table img { vertical-align: middle; }
table.striped tr:nth-of-type(odd) td { background-color: var(--bg-color-two); }
/* The logged-in player's own row or pairing */
table tr.me td, table.striped tr.me td, .pairings td.player.me, .bracket .player.me { background-color: #ffc966; color: #222; }
.nowrap { white-space: nowrap; }
.grey { color: var(--grey-dark); }
.drop { font-style: italic; color: gray; margin-left: 8px; }
.bold { font-weight: 700; }

img.flag { height: 20px; width: auto; border-radius: 2px; box-shadow: 0 0 0 1px var(--panel-color-two); }
.flag-cell { width: 1%; }
.winner { display: inline-flex; align-items: center; gap: 6px; }
.infobox .heading img.flag { height: 22px; margin-left: 6px; vertical-align: -3px; }
.team-sheet { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 12px 0; }
.team-sheet figure { margin: 0; width: 96px; text-align: center; font-size: 13px; }
.team-sheet img { display: block; width: 96px; height: 96px; margin: -8px 0 -6px; image-rendering: pixelated; }
.usage img.mon { width: 40px; height: 40px; margin: -6px 6px -2px -4px; image-rendering: pixelated; }
.usage .bar {
  display: inline-block; width: 90px; height: 8px; margin-right: 8px; vertical-align: middle;
  border-radius: 4px; background-color: var(--panel-color-two); overflow: hidden;
}
.usage .bar span { display: block; height: 100%; background-color: var(--accent); }
.won-text { color: #12964c; }
.lost-text { color: var(--grey-dark); }
.live-note { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--grey-dark); }
.live-note .dot { width: 8px; height: 8px; border-radius: 50%; background-color: #1beb6a; }
.team { display: inline-flex; white-space: nowrap; }
.team img { width: 40px; height: 40px; margin: -6px -3px -2px; image-rendering: pixelated; }

.tag {
  display: inline-block; padding: 4px 9px; border-radius: 5px; white-space: nowrap;
  font-size: 14px; font-weight: 700; border: 1px solid transparent;
}
.tag.open { color: #222; background-color: #1beb6a; }
.tag.live { background-color: var(--panel-color); border-color: var(--panel-color-three); }

.note { color: var(--grey-dark); font-size: 14px; margin: -10px 0 25px; }
.empty { color: var(--grey-dark); padding: 20px 0; }
.empty a, .infobox a { color: var(--link-color-blue); }

.infobox { padding: 15px; margin-bottom: 15px; background-color: var(--panel-color); border-radius: 5px; }
.infobox .heading { font-size: 22px; font-weight: 700; margin-bottom: 5px; }
.infobox .stats { display: flex; flex-wrap: wrap; gap: 6px 28px; margin-top: 10px; }
.infobox .stats b { font-size: 18px; margin-right: 6px; }

/* Round selector */
.mini-nav { display: flex; flex-flow: row nowrap; margin-bottom: 10px; overflow-x: auto; }
.mini-nav .label { font-weight: 700; align-self: center; margin-right: 10px; }
.mini-nav ul { margin: 0; padding: 0; list-style: none; display: flex; flex-flow: row nowrap; }
.mini-nav li { font-weight: 700; font-size: 14px; margin-right: 2px; white-space: nowrap; }
.mini-nav li a { display: block; padding: 10px 15px; }
.mini-nav li.active, .mini-nav li:hover { background-color: var(--panel-color); border-radius: 5px; }

/* Pairings */
.pairings th, .pairings td { padding-left: 14px; padding-right: 14px; }
.pairings td { height: auto; border-bottom: 1px solid var(--panel-color-two); }
.pairings td.player { padding: 0; width: 40%; text-align: center; }
.pairings td.player a, .pairings td.player .bye { display: block; padding: 6px 15px; }
.pairings td.player .score { font-size: 14px; margin-top: 3px; }
.pairings td.player .bye { color: var(--grey-dark); font-style: italic; }
.pairings td.winner { background-color: var(--win); }
.pairings td.games { font-weight: 700; }
.pairings td.games.zero { color: gray; }
.pairings td.games.p1 { text-align: right; }
.pairings th.center { text-align: center; }

/* Top cut bracket */
.bracket { display: flex; flex-flow: row nowrap; overflow: auto; padding-bottom: 10px; margin: 15px 0 25px; }
.bracket .round { display: flex; flex-flow: column nowrap; }
.bracket .round:not(:last-of-type) { margin-right: 20px; }
.bracket .round-name { font-weight: 700; padding: 5px; border-bottom: 1px solid var(--panel-color-three); margin-bottom: 15px; }
.bracket .bracket-matches { flex: 1; display: flex; flex-flow: column nowrap; justify-content: space-around; }
.bracket .bracket-match { width: 280px; border: 1px solid var(--panel-color-two); border-radius: 5px; overflow: hidden; }
.bracket .bracket-match:not(:last-of-type) { margin-bottom: 15px; }
.bracket .player { display: flex; align-items: center; height: 40px; }
.bracket .player:first-of-type { border-bottom: 1px solid var(--panel-color-two); }
.bracket .player.winner { font-weight: 700; background-color: var(--panel-color); }
.bracket .player .seed { width: 34px; text-align: center; color: gray; font-weight: 400; }
.bracket .player .name { flex: 1; padding: 10px 10px 10px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bracket .player .name:hover { color: var(--link-color-blue); }
.bracket .player .score {
  width: 15%; height: 100%; display: flex; justify-content: center; align-items: center;
  border-left: 1px solid var(--panel-color-two);
}

@media (max-width: 700px) {
  .brand { font-size: 24px; margin-right: 8px; }
  .header .nav li { font-size: 17px; }
  .header .nav li a { padding: 12px 10px; }
  .tournament-header .name { font-size: 21px; }
  .tournament-header .row { margin-right: 0; padding-bottom: 5px; }
  .landscape-only { display: none; }
  .header .account .user-link { font-size: 16px; max-width: 110px; }
  .header .avatar { padding: 9px; }
}