/* 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: #1d0f15; /* 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 panorama sits behind everything, fixed to the screen. It is shown whole at
   its true proportions: full width, never stretched or cropped. The photo is 571x175
   (3.263:1), so it is 30.65vw tall (100 / 3.263). Its lower part fades into the dark colour
   of its own bottom edge, and that colour fills the rest of the screen. If the photo ever
   fails to load, the page is simply that dark colour. Keep the vw numbers below in step
   with the photo if it is ever swapped for one with a different shape. */
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(29 15 21 / 0) 0, rgb(29 15 21 / 0) 23vw, var(--night) 30.65vw),
    url("backgrounds/los-santos-panorama.jpg") center top / 100% auto no-repeat;
  pointer-events: none;
}

/* 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;
}

.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;
  image-rendering: pixelated;
}

.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;
  font-weight: bold;
}

.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;
}