@font-face {
  font-family: 'VI Display';
  src: url('../fonts/GTAArtDecoMedium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'VI Display';
  src: url('../fonts/GTAArtDecoBold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  --sm-accent: #ff3d8b;
  --sm-accent-rgb: 255, 61, 139;
  --sm-accent-hover: #ff6aa8;
  --sm-on-accent: #1a0a10;
  --sm-accent-soft: #ffad6b;
  --sm-gold: #ffd27a;
  --sm-gold-rgb: 255, 210, 122;
  --sm-ease: cubic-bezier(0.22, 0.8, 0.18, 1);
  --mono: 'VI Display', Gilroy, system-ui, sans-serif;
}

html, body, button, input, textarea {
  font-family: 'VI Display', Gilroy, system-ui, sans-serif;
}

.brand__logo {
  width: auto;
  height: calc(var(--u) * 54);
  max-width: min(34vw, calc(var(--u) * 280));
}

.splash__logo {
  width: auto;
  height: calc(var(--u) * 96);
  max-width: min(70vw, calc(var(--u) * 520));
}

.brand__name,
.splash__name,
.loading__title {
  color: #fbf7ff;
  -webkit-text-fill-color: #fbf7ff;
  background: none;
}

.cta,
.act--pri,
.nav--save,
.loading__retry {
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 18);
  background: rgba(4, 3, 6, 0.82) !important;
  color: #fbf7ff !important;
  -webkit-text-fill-color: #fbf7ff !important;
  border-radius: 999px !important;
  letter-spacing: 0.26em;
  box-shadow: inset 0 0 0 1px rgba(255, 61, 139, 0.75) !important;
}

.cta:hover:not(:disabled),
.act--pri:hover,
.nav--save:hover:not(:disabled),
.loading__retry:hover {
  background: #ff3d8b !important;
  color: #1a0a10 !important;
  -webkit-text-fill-color: #1a0a10 !important;
}

.cta kbd,
.cta .icon {
  color: #fbf7ff !important;
  -webkit-text-fill-color: #fbf7ff !important;
}

.cta:hover:not(:disabled) kbd,
.cta:hover:not(:disabled) .icon {
  color: #1a0a10 !important;
  -webkit-text-fill-color: #1a0a10 !important;
}

.cta kbd {
  background: rgba(255, 61, 139, 0.28) !important;
  border-radius: 999px !important;
}

/* Logo, server name and clock: top-left, under the letterbox. */
.brand {
  top: calc(var(--bar) + calc(var(--u) * 20));
  bottom: auto;
  left: var(--gutter);
  height: auto;
  align-items: center;
}

.brand__sc {
  letter-spacing: 0.28em;
  color: rgba(251, 247, 255, 0.62);
}

/* Tools leave the top edge and run down the right, labels beside the mark. */
.tools {
  top: calc(var(--bar) + calc(var(--u) * 28));
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 18);
}

.tool {
  align-items: center;
  gap: calc(var(--u) * 12);
}

.tool__btn {
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  background: rgba(4, 3, 6, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.tool__cap {
  position: static;
  transform: none;
  margin: 0;
  order: -1;
  letter-spacing: 0.22em;
  color: rgba(251, 247, 255, 0.62);
}

.lower {
  bottom: calc(var(--bar) + calc(var(--u) * 64));
  gap: calc(var(--u) * 8);
  padding-left: calc(var(--u) * 20);
}

.lower::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: calc(var(--u) * 4);
  width: calc(var(--u) * 2);
  background: #ff3d8b;
  box-shadow: 0 0 calc(var(--u) * 14) rgba(255, 61, 139, 0.7);
  pointer-events: none;
}

.lower__rule {
  display: none;
}

.lower__caps {
  letter-spacing: 0.48em;
  color: rgba(251, 247, 255, 0.5);
}

.lower__name {
  letter-spacing: 0.02em;
  text-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 28) rgba(0, 0, 0, 0.55);
}

.lower__name .thin {
  letter-spacing: 0.18em;
  color: rgba(251, 247, 255, 0.62);
  -webkit-text-fill-color: rgba(251, 247, 255, 0.62);
  background: none;
}

.lower__meta {
  letter-spacing: 0.22em;
  color: rgba(251, 247, 255, 0.58);
}

.lower__meta .mono {
  color: #ffd27a !important;
  -webkit-text-fill-color: #ffd27a !important;
}

.lower__pair em {
  border-radius: 999px;
  color: #ffd27a;
  -webkit-text-fill-color: #ffd27a;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 210, 122, 0.5);
}

.lower__acts {
  gap: calc(var(--u) * 10);
  margin-top: calc(var(--u) * 18);
}

.lower .link,
.lower .link.blured-10 {
  height: calc(var(--u) * 48);
  border-radius: 999px;
  background: rgba(4, 3, 6, 0.62) !important;
  color: #fbf7ff !important;
  -webkit-text-fill-color: #fbf7ff !important;
  letter-spacing: 0.22em;
  box-shadow: inset 0 0 0 1px rgba(251, 247, 255, 0.16) !important;
}

.lower .link:hover:not(:disabled) {
  background: rgba(255, 61, 139, 0.14) !important;
  box-shadow: inset 0 0 0 1px #ff3d8b !important;
}

.lower .link--icon {
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 48);
  padding: 0;
  border-radius: 50%;
}

.lower .link--danger,
.lower .link--danger .icon {
  color: #ff3d8b !important;
  -webkit-text-fill-color: #ff3d8b !important;
}