/* Westside '95: Windows 95 colours and bevels on a normal website.
   Layout: logo banner, a toolbar row, and one big content window. */

:root {
  --teal: #008080;
  --face: #c0c0c0;
  --light: #dfdfdf;
  --white: #ffffff;
  --shadow: #808080;
  --black: #000000;
  --navy: #000080;
  --visited: #800080;
  --note: #ffffe1;
  --night: #020207; /* the colour along the bottom edge of the background photo */
  --crimson: #880015; /* the home page title and the Factions box */
  --orange: #ff7f27; /* the Showcase box */

  --ui-font: Tahoma, "MS Sans Serif", "Microsoft Sans Serif", Geneva, Verdana, sans-serif;

  /* The bevels everything is built from. */
  --raised: inset -1px -1px var(--black), inset 1px 1px var(--light), inset -2px -2px var(--shadow), inset 2px 2px var(--white);
  --button: inset -1px -1px var(--black), inset 1px 1px var(--white), inset -2px -2px var(--shadow), inset 2px 2px var(--light);
  --pressed: inset -1px -1px var(--white), inset 1px 1px var(--black), inset -2px -2px var(--light), inset 2px 2px var(--shadow);
  --sunken: inset -1px -1px var(--white), inset 1px 1px var(--shadow), inset -2px -2px var(--light), inset 2px 2px var(--black);
  --etched: inset -1px -1px var(--white), inset 1px 1px var(--shadow);

  color-scheme: light;
}

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

[hidden] {
  display: none !important;
}

/* The Los Santos sunset sits behind everything, fixed to the screen. The source art is a
   739x415 (16:9) picture upscaled to 3840x2156 with a little grain added (so the sky
   gradient does not band), so it is shown at full width, top-aligned, 56.25vw tall
   (100 / 1.7807 = 56.15vw). Its lower part fades into the near-black of its own bottom edge,
   and that colour fills the rest of the screen. On phones and other tall screens it switches
   to "cover" with the 1920px copy. If the picture fails to load the page is just that dark
   colour. Replace both jpgs with true high-res originals (same names) when they exist. If the
   shape changes, redo the 56vw numbers below. */html {
  background: var(--night);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: transparent;
  color: var(--black);
  font: 16px/1.55 var(--ui-font);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgb(2 2 7 / 0) 0, rgb(2 2 7 / 0) 44vw, var(--night) 56.15vw),
    url("backgrounds/los-santos-sunset-3840.jpg") center top / 100% auto no-repeat;
  pointer-events: none;
}

@media (max-aspect-ratio: 1/1) {
  body::before {
    background:
      linear-gradient(to bottom, rgb(2 2 7 / 0) 0, rgb(2 2 7 / 0) 70%, var(--night) 100%),
      url("backgrounds/los-santos-sunset-1920.jpg") 58% top / cover no-repeat;
  }
}

/* The small Windows-style icons stay crisp; the logos are normal artwork. */
.button img,
.note img {
  image-rendering: pixelated;
}

a {
  color: var(--navy);
}

a:visited {
  color: var(--visited);
}

:focus-visible {
  outline: 1px dotted var(--black);
  outline-offset: 2px;
}

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

.skip-link {
  position: absolute;
  top: -60px;
  left: 8px;
  z-index: 100;
}

.skip-link:focus {
  top: 8px;
}

/* ---------- The window: banner, toolbar, content ---------- */

.page {
  flex: 1;
  width: 100%;
  max-width: 1112px;
  margin: 0 auto;
  padding: 24px 16px 40px;
}

.page.page-wide {
  max-width: 1400px;
}

.window {
  display: grid;
  gap: 4px;
  padding: 4px;
  background: var(--face);
  box-shadow: var(--raised);
}

.banner {
  display: flex;
  align-items: center;
  padding: 18px 28px;
  background: var(--teal);
  box-shadow: var(--sunken);
}

.banner a {
  display: block;
  width: min(100%, 420px);
  line-height: 0;
}

.banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Toolbar: tagline, today's date, buttons ---------- */

.toolbar {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  gap: 4px;
}

.cell {
  display: flex;
  align-items: center;
  min-height: 48px;
  margin: 0;
  padding: 6px 12px;
  box-shadow: var(--etched);
  font-size: 15px;
  line-height: 1.3;
}

.tagline {
  font-weight: bold;
}

/* The Discord cell. Before anyone links, the whole cell is one big link (the invite, or the
   Discord login once that is switched on). After linking, site.js swaps in the avatar and
   @username with a small Discord-server link and a Log out button. */
.cell.join {
  position: relative;
  gap: 12px;
}

.cell.join img {
  flex: none;
  width: 32px;
  height: 32px;
}

.cell.join .join-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.cell.join .join-link:focus-visible {
  outline: none;
}

.cell.join:has(.join-link:focus-visible) {
  outline: 1px dotted var(--black);
  outline-offset: -4px;
}

.cell.join img.avatar {
  object-fit: cover;
  image-rendering: auto;
  background: var(--face);
  box-shadow: var(--sunken);
}

.cell.join .who {
  display: grid;
  gap: 1px;
  min-width: 0;
  line-height: 1.25;
}

.cell.join .who strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell.join .who small {
  font-size: 12px;
  white-space: nowrap;
}

.cell.join .who .linklike {
  padding: 0;
  border: 0;
  background: none;
  color: var(--navy);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- Home intro ---------- */

.document .home-title {
  margin: 0 0 8px;
  color: var(--crimson);
  font-size: 46px;
  line-height: 1.1;
  text-align: center;
}

.keywords {
  margin: 0 0 18px;
  font-size: 17px;
  text-align: center;
}

.keywords a,
.keywords a:visited {
  color: var(--black);
}

.pitch {
  margin: 0;
  font-size: 17px;
  font-weight: bold;
  line-height: 1.6;
  text-align: center;
}

.site-nav ul {
  display: flex;
  gap: 4px;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav li {
  display: flex;
}

.site-nav .button {
  min-width: 0;
  padding: 6px 14px;
}

.site-nav .button[aria-current="page"],
.rulebook-tabs .button[aria-current="true"] {
  background: var(--white) repeating-conic-gradient(var(--face) 0 25%, var(--white) 0 50%) 0 0 / 2px 2px;
  box-shadow: var(--pressed);
}

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

  .cell {
    min-height: 40px;
  }

  .site-nav ul {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }

  .site-nav .button {
    width: 100%;
    min-height: 44px;
    padding: 6px 8px;
  }
}

@media (max-width: 560px) {
  .site-nav .button {
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
  }
}

/* ---------- The big content window ---------- */

.document {
  min-height: 360px;
  padding: 32px 36px 40px;
  background: var(--white);
  box-shadow: var(--sunken);
}

.document > :first-child {
  margin-top: 0;
}

.document > :last-child {
  margin-bottom: 0;
}

@media (max-width: 560px) {
  .page {
    padding: 12px 8px 28px;
  }

  .banner {
    padding: 14px 16px;
  }

  .document {
    padding: 20px 16px 24px;
  }
}

.document h1 {
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1.15;
}

.document h2 {
  margin: 30px 0 8px;
  font-size: 20px;
  line-height: 1.3;
}

.document p,
.document ul,
.document ol {
  margin: 0 0 14px;
}

.prose p,
.prose ul,
.prose ol {
  max-width: 68ch;
}

.document li + li {
  margin-top: 6px;
}

.lead {
  max-width: 62ch;
  font-size: 18px;
}

.note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 22px;
  padding: 10px 12px;
  background: var(--note);
  border: 1px solid var(--black);
  font-size: 15px;
}

.note img {
  flex: none;
  width: 32px;
  height: 32px;
}

.note p {
  margin: 0;
}

/* ---------- Groups: small windows with a navy title bar ---------- */

.grid {
  display: grid;
  gap: 20px;
  margin: 26px 0;
}

@media (min-width: 760px) {
  .grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.group {
  padding: 3px;
  background: var(--face);
  box-shadow: var(--raised);
}

.document > .group {
  margin-top: 30px;
}

.group > h2 {
  margin: 0;
  padding: 4px 10px;
  background: var(--navy);
  color: var(--white);
  font-size: 15px;
  font-weight: bold;
  line-height: 1.35;
}

.group-body {
  padding: 14px 16px 16px;
}

.group-body > :first-child {
  margin-top: 0;
}

.group-body > :last-child {
  margin-bottom: 0;
}

.group-body p,
.group-body ul,
.group-body ol {
  margin: 0 0 10px;
}

.group.sunk .group-body {
  background: var(--white);
  box-shadow: var(--sunken);
}

/* ---------- Buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 110px;
  min-height: 36px;
  padding: 7px 18px;
  border: 0;
  background: var(--face);
  box-shadow: var(--button);
  color: var(--black);
  font: inherit;
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.button:visited {
  color: var(--black);
}

.button:active {
  box-shadow: var(--pressed);
  transform: translate(1px, 1px);
}

.button:focus-visible {
  outline: 1px dotted var(--black);
  outline-offset: -5px;
}

.button.default {
  box-shadow: 0 0 0 1px var(--black), var(--button);
  font-weight: bold;
}

.button.default:active {
  box-shadow: 0 0 0 1px var(--black), var(--pressed);
}

.button img {
  width: 16px;
  height: 16px;
}

.button.large {
  min-height: 44px;
  padding: 10px 24px;
  font-size: 17px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

/* ---------- Home: steps ---------- */

.steps {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

@media (min-width: 760px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.steps li {
  margin: 0;
  padding: 16px 18px 18px;
  background: var(--white);
  box-shadow: var(--sunken);
  counter-increment: step;
}

.steps li + li {
  margin-top: 0;
}

.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 10px;
  background: var(--navy);
  color: var(--white);
  font-weight: bold;
}

.steps h3 {
  margin: 0 0 4px;
  font-size: 17px;
}

.steps p {
  margin: 0;
}

.requirements-title {
  margin: 0 0 6px;
  font-size: 17px;
}

.group-body .requirements {
  margin: 0 0 18px;
}

/* ---------- Home: Factions and Showcase ---------- */

.feature-grid {
  display: grid;
  gap: 20px;
  margin-top: 30px;
}

@media (min-width: 760px) {
  .feature-grid {
    grid-template-columns: minmax(0, 9fr) minmax(0, 16fr);
  }
}

.feature-grid .group {
  display: flex;
  flex-direction: column;
}

.feature-grid .group-body {
  flex: 1;
}

.group.crimson > h2 {
  background: var(--crimson);
}

.group.orange > h2 {
  background: var(--orange);
  color: var(--black);
  text-decoration: underline;
}

/* A box body split into a main area and a footer row. Both boxes use the same footer height,
   so the line across the Showcase box lines up with the bottom of the picture frame. */
.group-body.split {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.split-main {
  flex: 1;
  padding: 14px 16px 10px;
}

.split-main.empty {
  display: grid;
  place-content: center;
  min-height: 200px;
  color: #444444;
  text-align: center;
}

.split-main.empty p {
  margin: 0;
}

.split-foot {
  display: flex;
  align-items: center;
  min-height: 48px;
  margin: 0;
  padding: 0 16px;
}

.group.orange .split-foot {
  border-top: 2px solid var(--black);
}

.split-foot a {
  font-weight: bold;
}

/* The cycling pictures: stacked on top of each other and faded in turn by site.js. */
.slideshow {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 443 / 372;
  margin: 0 auto;
  overflow: hidden;
  background: var(--black);
  border: 2px solid var(--black);
}

.slideshow .slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.slideshow .slide.is-on {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .slideshow .slide {
    transition: none;
  }
}

/* Pause / play: shows when the frame is hovered or focused, and always on touch screens. */
.slide-toggle {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: var(--face);
  box-shadow: var(--button);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.slideshow:hover .slide-toggle,
.slideshow:focus-within .slide-toggle,
.slide-toggle:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .slide-toggle {
    opacity: 0.9;
  }
}

.slide-toggle:active {
  box-shadow: var(--pressed);
}

.slide-toggle::before {
  content: "";
  width: 10px;
  height: 12px;
  background: linear-gradient(to right, var(--black) 0 3px, transparent 3px 7px, var(--black) 7px 10px);
}

.slide-toggle[aria-pressed="true"]::before {
  background: var(--black);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ---------- Rulebooks ---------- */

.rulebook-tabs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.rulebook-tabs li {
  display: flex;
  margin: 0;
}

.rulebook-tabs .button {
  min-width: 0;
  padding: 9px 20px;
  font-weight: bold;
}

/* Without JavaScript the rulebooks are all visible, so keep them apart. */
.rulebook + .rulebook {
  margin-top: 24px;
}

/* The empty space where a rulebook goes. */
.drop-slot {
  display: grid;
  place-content: center;
  min-height: 260px;
  padding: 28px;
  background: var(--white);
  box-shadow: var(--sunken);
  color: #555555;
  font-size: 17px;
  text-align: center;
}

.drop-slot > :last-child {
  margin-bottom: 0;
}

@media (max-width: 560px) {
  .rulebook-tabs ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rulebook-tabs .button {
    width: 100%;
    padding: 9px 8px;
  }
}

/* ---------- Rules ---------- */

.rules {
  padding-left: 0;
  list-style: none;
  counter-reset: rule;
}

.rules li {
  position: relative;
  padding-left: 42px;
  counter-increment: rule;
}

.rules li + li {
  margin-top: 16px;
}

.rules li::before {
  content: counter(rule) ".";
  position: absolute;
  left: 0;
  width: 30px;
  font-weight: bold;
  text-align: right;
}

.rules strong {
  display: block;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--face);
  box-shadow: inset 0 1px var(--white), inset 0 2px var(--light);
  font-size: 14px;
}

.site-footer .inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  max-width: 1112px;
  margin: 0 auto;
  padding: 18px 16px;
}

.site-footer .badge {
  flex: none;
  width: 40px;
  height: 40px;
}

.site-footer p {
  flex: 1 1 320px;
  max-width: 62ch;
  margin: 0;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Original nav look (restored 2026-10-03): the buttons sit on their own row under the tagline and Discord cells. */
.site-nav { grid-column: 1 / -1; }
.site-nav ul { height: auto; }
.site-nav li { flex: 1 1 0; }
.site-nav .button { width: 100%; min-height: 40px; }

/* Discord account slot in the nav bar: the "Authorize Discord User" button, or picture + name once linked. */
.site-nav .discord-auth img,
.site-nav .discord-user img {
  image-rendering: auto;
}

.site-nav .discord-auth img {
  width: 20px;
  height: 20px;
}

.site-nav .discord-user {
  gap: 8px;
  padding: 3px 10px;
  cursor: default;
}

.discord-user .avatar {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.discord-user .who {
  display: grid;
  min-width: 0;
  line-height: 1.15;
  text-align: left;
}

.discord-user .who strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discord-user .linklike {
  padding: 0;
  border: 0;
  background: none;
  color: var(--navy);
  font: inherit;
  font-size: 12px;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}
/* Theme crimson (the maroon-red of the Westside 95 heading) on the tagline and the points cell; the middle cell stays silver. */
.cell.tagline,
.cell.points {
  background: var(--crimson);
  color: var(--white);
  box-shadow: var(--raised);
}

.cell.points {
  gap: 10px;
  white-space: nowrap;
}

.cell.points strong {
  min-width: 2ch;
  padding: 1px 8px;
  background: var(--black);
  color: #fff;
  box-shadow: var(--sunken);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.cell.join .avatar {
  flex: none;
  border-radius: 50%;
}

@media (max-width: 900px) {
  .cell.points {
    justify-content: space-between;
  }
}
/* Discord logo at the far right of the account cell, with a small badge at its bottom right corner:
   red X while the visitor has not linked their Discord, green check once they have. */
.cell.join .dlogo {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  margin-left: auto;
}

.cell.join .dlogo img {
  display: block;
  width: 32px;
  height: 32px;
}

.dlogo .mark {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 15px;
  height: 15px;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.5); /* sits on top of the logo, no cut-out ring */
  background-position: center;
  background-repeat: no-repeat;
  background-size: 9px 9px;
}

.dlogo.is-on .mark {
  background-color: #1a8f3a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.6 5.3l2.3 2.3 4.5-4.8' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.dlogo.is-off .mark {
  background-color: #c0262d;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.3 2.3l5.4 5.4M7.7 2.3L2.3 7.7' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Linked account cell: big name on the left, Refresh / Log out stacked to its right, Discord logo last. */
.cell.join.is-linked .who {
  display: contents;
}

.cell.join.is-linked .who strong {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 19px;
  line-height: 1.2;
}

.cell.join.is-linked .who small {
  display: grid;
  gap: 1px;
  flex: none;
  margin-left: auto;
  font-size: 12px;
  line-height: 1.25;
  text-align: right;
  white-space: nowrap;
}

.cell.join.is-linked .who small .linklike {
  text-align: right;
}

.cell.join.is-linked .dlogo {
  margin-left: 4px;
}
/* Refresh and Log out side by side again, pushed to the right edge next to the logo. */
.cell.join.is-linked .who small {
  display: flex;
  align-items: center;
  gap: 6px;
  text-align: right;
}

.cell.join.is-linked .who small .linklike::before {
  content: "\00B7";
  display: inline-block;
  margin-right: 6px;
  text-decoration: none;
}
/* The whitelist button gets more room than the others (its label is long). The Store page is empty on purpose for now. */
.site-nav li.apply-item { flex: 2.2 1 0; }
.store-page { min-height: 320px; }

/* Tebex logo mark on the Tebex button: its own proportions, not the 16px square the other icons use. */
.site-nav .button img.tebex-mark { width: 10px; height: 22px; image-rendering: auto; }

/* Nav button widths: short labels stay narrow, the long ones get room so they stay on one line. */
.site-nav li.nav-home { flex: 0.8 1 0; }
.site-nav li.nav-rules { flex: 2.4 1 0; }
.site-nav li.apply-item { flex: 2.2 1 0; }
.site-nav li.nav-staff { flex: 1.25 1 0; }
.site-nav .button { white-space: normal; }

.site-nav li.auth-slot { flex: 1.7 1 0; }

.site-nav li.nav-staff { flex: 1.6 1 0; }
.site-nav li.auth-slot { flex: 1.9 1 0; }
.site-nav li.nav-rules { flex: 2.2 1 0; }
.site-nav li.apply-item { flex: 2 1 0; }
.site-nav .nav-staff .button, .site-nav .discord-auth { white-space: nowrap; }

.site-nav .button { padding-left: 8px; padding-right: 8px; }
.site-nav li.apply-item { flex: 2.5 1 0; }
.site-nav li.nav-home { flex: 0.75 1 0; }
.site-nav li.nav-staff { flex: 1.45 1 0; }

/* Background (2026-10-04): a drawn vector sunset over Los Santos (assets/backgrounds/los-santos-skyline.svg), so it is
   sharp at every screen size instead of an upscaled photo. Fills the screen, anchored to the bottom, fixed in place. */
body::before {
  background: url("backgrounds/los-santos-skyline.svg?v=1") center bottom / cover no-repeat var(--night);
}

@media (max-aspect-ratio: 1/1) {
  body::before {
    background: url("backgrounds/los-santos-skyline.svg?v=1") 30% bottom / cover no-repeat var(--night);
  }
}
@media (max-width: 1000px) {
  .site-nav .nav-staff .button, .site-nav .discord-auth { white-space: normal; }
}


/* Return buttons (2026-10-05): "Back to Home" above each inner page's heading and again under its content, "Back to
   rulebooks" on the Rules page, and "Back to top" in the footer, so nobody has to scroll up to the toolbar to get around. */
.page-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 0 0 22px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--shadow);
  box-shadow: 0 1px var(--white);
}

.page-nav.page-nav-end {
  margin: 30px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--shadow);
  border-bottom: 0;
  box-shadow: inset 0 1px var(--white);
}

.site-footer .to-top {
  margin-left: auto;
  min-width: 0;
  min-height: 32px;
  padding: 5px 14px;
  font-size: 14px;
}

@media (max-width: 560px) {
  .page-nav .button {
    flex: 1 1 100%;
  }

  .site-footer .to-top {
    flex: 1 1 100%;
    margin-left: 0;
  }
}
/* Linked Discord has the '95 | Roleplayer role: no join steps, no whitelist button */
.is-roleplayer .apply-item,
.is-roleplayer [data-new-player] { display: none; }