body.intro-loading {
  overflow: hidden;
}

.intro-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  transition: opacity 0.6s ease;
}
.intro-loader.intro-loader-hide {
  opacity: 0;
  pointer-events: none;
}
.intro-loader-logo-wrap {
  position: relative;
  display: inline-block;
}
.intro-loader-logo {
  display: block;
  height: 220px;
  width: auto;
  opacity: 0;
  animation: intro-fade-in 0.6s ease-out forwards;
}
.intro-loader-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.9) 49%, rgba(157, 178, 79, 0.9) 53%, transparent 68%);
  background-size: 300% 300%;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  -webkit-mask-image: url(/images/logo.png);
  mask-image: url(/images/logo.png);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  opacity: 0;
  animation: intro-shine-sweep 2.4s ease-in-out infinite;
}
@keyframes intro-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes intro-shine-sweep {
  0%, 20% { background-position: 200% 0%; opacity: 0; }
  40% { opacity: 1; }
  55% { background-position: -50% 0%; opacity: 1; }
  75%, 100% { background-position: -100% 0%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-loader-logo {
    animation: none;
    opacity: 1;
  }
  .intro-loader-shine {
    animation: none;
    opacity: 0;
  }
}

@media (max-width: 520px) {
  .intro-loader-logo { height: 130px; }
}

.home-topbar {
  justify-content: flex-end;
  /* The topbar holds more than one thing now, and flex-end alone would butt
     them together. */
  gap: 14px;
}

.home-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.home-login-btn-icon {
  width: 18px;
  height: 18px;
}

.webshop-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 6px 16px 6px 6px;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: border-color 0.15s, transform 0.15s;
}
.webshop-pill:hover {
  border-color: var(--olive-bright);
  transform: translateY(-1px);
}

.webshop-pill-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.webshop-pill-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-alt);
  font-size: 14px;
}

.webshop-pill-balance {
  color: var(--amber);
}

.webshop-pill-label {
  color: var(--text-dim);
  padding-left: 8px;
  border-left: 1px solid var(--panel-border);
}

.hero {
  position: relative;
  min-height: calc(100vh - 65px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 30%, rgba(157, 178, 79, 0.08), transparent 55%),
    radial-gradient(circle at top, var(--bg-alt), var(--bg) 75%);
}

/* A faint repeating grid, like a topo/tactical map — pure CSS, no image asset. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 50% 40%, black 0%, transparent 75%);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 35%, var(--bg) 95%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 40px 20px;
  max-width: 640px;
}

.hero-logo {
  display: block;
  height: 170px;
  width: auto;
  margin: 0 auto 12px;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.4));
  will-change: transform;
}

.hero-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  line-height: 1;
  user-select: none;
  margin-bottom: 8px;
}
.hero-mark-primary {
  font-size: 96px;
  font-weight: 800;
  letter-spacing: 10px;
  color: var(--olive-bright);
  opacity: 0.16;
}
.hero-mark-secondary {
  margin-top: -40px;
  font-size: 52px;
  font-weight: 700;
  letter-spacing: 6px;
  color: var(--text-dim);
}

.hero-title {
  margin: 0 0 10px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
}

.hero-detail {
  margin: 0 0 28px;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.6;
}

.hero-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.online-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
}
.online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(95, 163, 90, 0.2);
}
.online-badge-offline .online-dot {
  background: var(--red);
  box-shadow: 0 0 0 3px rgba(194, 75, 75, 0.2);
}
.online-badge-offline {
  color: var(--text-dim);
}

.uptime-text {
  color: var(--text-dim);
  font-size: 13px;
}

.hero-characters {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin-top: 12px;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.45));
}

@media (max-width: 520px) {
  .hero-logo { height: 110px; }
  .hero-mark-primary { font-size: 56px; letter-spacing: 6px; }
  .hero-mark-secondary { margin-top: -22px; font-size: 32px; letter-spacing: 4px; }
  .hero-title { font-size: 24px; }
  .hero-characters { max-width: 320px; }
  .webshop-pill-label { display: none; }
}

/* The two info buttons under the hero.
   Layout only — the look comes from .btn in theme.css, so they cannot drift
   away from every other button on the site. Translucent because the hero has
   artwork behind it and theme.css's solid panel would look pasted on. */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

/* Shape and text applies to every button here. `text-decoration: none` in
   particular: these are <a> elements, so the browser underlines them unless
   told otherwise — and scoping this rule to non-primary buttons once was enough
   to put an underline back under the primary one. */
.hero-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  padding: 10px 20px;
}

/* The translucent treatment is only for the secondary button. The primary one
   carries a solid fill from theme.css, and washing it out here would remove the
   only thing marking it as the main action. */
.hero-actions .btn:not(.btn-primary) {
  background: rgba(32, 33, 26, 0.72);
  backdrop-filter: blur(8px);
}

/* Join Discord, beside the sign-in button.
   Discord's own blurple rather than the site olive: it is a link off to another
   service, and dressing it as a site button would suggest it does something
   here. It stays visually second to Login with Steam, which is the action this
   page exists to get. */
.home-discord-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  background: rgba(88, 101, 242, 0.16);
  border-color: rgba(88, 101, 242, 0.55);
  color: #c7cdfb;
}

.home-discord-btn:hover {
  background: rgba(88, 101, 242, 0.28);
  border-color: #5865f2;
  color: #fff;
}

.home-discord-icon {
  width: 16px;
  height: 16px;
  /* The mark is wider than it is tall inside a square viewBox, so a fixed box
     would stretch it. */
  object-fit: contain;
  flex: none;
  /* The source SVG is a solid dark mark; recolouring it here keeps one file
     working on both the tinted button and its brighter hover state. */
  filter: brightness(0) saturate(100%) invert(78%) sepia(35%) saturate(1200%) hue-rotate(202deg) brightness(101%) contrast(96%);
}

.home-discord-btn:hover .home-discord-icon {
  filter: brightness(0) invert(1);
}