/* The MU Online website: one dark page. Hero, classes, events, treasures, world, rankings, join. */

@font-face {
  font-family: "Cinzel";
  src: url("/static/fonts/cinzel-latin-wght.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: "Cinzel Decorative";
  src: url("/static/fonts/cinzel-decorative-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #0a080b;
  --bg-2: #120e13;
  --panel-top: rgba(30, 23, 30, 0.86);
  --panel-bottom: rgba(14, 11, 15, 0.92);
  --line: rgba(227, 191, 110, 0.18);
  --line-strong: rgba(227, 191, 110, 0.45);
  --ink: #efe7d6;
  --ink-2: #d2c7b2;
  --muted: #a99e89;
  --gold: #e3bf6e;
  --gold-hi: #fbe7b0;
  --gold-lo: #a2742a;
  --gold-deep: #6e4c17;
  --ember: #ff7a32;
  --ember-hi: #ffb15c;
  --blood: #c4312a;
  --ok: #86e09b;
  --bad: #ff9486;
  --radius: 16px;
  --radius-sm: 10px;
  --display: "Cinzel", "Trajan Pro", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --deco: "Cinzel Decorative", "Cinzel", "Palatino Linotype", Palatino, Georgia, serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --nav-h: 64px;
  --gutter: clamp(16px, 4vw, 40px);
  --gold-text: linear-gradient(180deg, #fff6d8 0%, #f3d283 40%, #c8902f 64%, #f6dc9a 82%, #b07c2c 100%);
}

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

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 var(--body);
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, svg, canvas { display: block; max-width: 100%; }

a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: var(--gold-hi); }

:focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 3px;
  border-radius: 6px;
}

h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.15; margin: 0; }

p { margin: 0 0 1em; }

code {
  font-family: var(--mono);
  font-size: 0.9em;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(227, 191, 110, 0.1);
  border: 1px solid var(--line);
  color: var(--gold-hi);
  overflow-wrap: anywhere;
}

.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon { width: 1.15em; height: 1.15em; flex: none; }

.skip {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--gold);
  color: #1b1206;
  font-weight: 700;
  transform: translateY(-200%);
  opacity: 0;
  pointer-events: none;
}
.skip:focus { transform: none; opacity: 1; pointer-events: auto; }

/* ------------------------------------------------------------------ buttons */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0.7em 1.45em;
  border: 0;
  border-radius: 10px;
  font: 700 1rem/1.1 var(--display);
  letter-spacing: 0.05em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.2s ease, background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn-gold {
  color: #1d1206;
  background: linear-gradient(180deg, #fff0c4 0%, #ecc775 42%, #c2913a 78%, #a8792b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -2px 0 rgba(95, 58, 12, 0.55),
    0 0 0 1px #5d3f12,
    0 10px 28px -10px rgba(255, 128, 40, 0.75);
  text-shadow: 0 1px 0 rgba(255, 245, 210, 0.45);
}

.btn-gold::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.65) 48%, transparent 66%);
  transform: translateX(-120%);
}

.btn-gold:hover { color: #1d1206; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -2px 0 rgba(95, 58, 12, 0.55), 0 0 0 1px #5d3f12, 0 14px 34px -10px rgba(255, 128, 40, 0.95); }
.btn-gold:hover::after { transform: translateX(120%); transition: transform 0.7s ease; }
.btn-gold:active { transform: translateY(1px); filter: brightness(0.96); }

.btn-ghost {
  color: var(--gold-hi);
  background: rgba(12, 9, 12, 0.5);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { color: #fff; background: rgba(60, 40, 18, 0.5); box-shadow: inset 0 0 0 1px var(--gold); }
/* In the hero, over the moving painting, no blur either (see .glance li). */
.hero .btn-ghost { background: rgba(12, 9, 12, 0.68); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hero .btn-ghost:hover { background: rgba(60, 40, 18, 0.72); }

.btn-sm { min-height: 44px; padding: 0.55em 1.05em; font-size: 0.88rem; border-radius: 9px; }
.btn-lg { min-height: 54px; padding: 0.85em 1.7em; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.65; cursor: wait; transform: none; }

/* ------------------------------------------------------------------ top bar */

.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--nav-h);
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
  background: linear-gradient(180deg, rgba(6, 4, 7, 0.7), rgba(6, 4, 7, 0));
}

/* Solid and without a backdrop blur: blurring the moving hero under the bar made every frame
   of scrolling slow on computers without a fast graphics card, and text scrolling under a
   see-through bar showed as a ghost behind the brand. */
.topbar.solid, .topbar.menu-open {
  background: #0b080c;
  box-shadow: 0 1px 0 var(--line), 0 12px 30px -18px rgba(0, 0, 0, 0.9);
}

.topbar-inner {
  height: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  min-width: 0;
  color: var(--gold-hi);
  text-decoration: none;
  margin-right: auto;
}
.brand img { width: 36px; height: 36px; flex: none; }
.brand-name {
  font: 700 1.08rem/1.1 var(--display);
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-links { list-style: none; margin: 0; padding: 0; }
.menu-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
  text-decoration: none;
  font: 600 0.92rem/1 var(--display);
  letter-spacing: 0.08em;
}
.menu-links a:hover, .menu-links a[aria-current="true"] { color: var(--gold-hi); }

.menu-toggle {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: var(--gold-hi);
  background: rgba(12, 9, 12, 0.55);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  cursor: pointer;
}
.menu-toggle .icon { width: 22px; height: 22px; grid-area: 1 / 1; }
.menu-toggle .icon-close, .menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

.topbar-join { flex: none; white-space: nowrap; padding-inline: 1em; }

/* Phone menu: a panel under the bar */
@media (max-width: 959px) {
  .menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 8px max(var(--gutter), env(safe-area-inset-right)) 20px max(var(--gutter), env(safe-area-inset-left));
    background: #0b080c;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 30px 40px -20px rgba(0, 0, 0, 0.9);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .menu.open { visibility: visible; opacity: 1; transform: none; transition: opacity 0.2s ease, transform 0.2s ease; }
  .menu-links a { min-height: 52px; font-size: 1.05rem; border-bottom: 1px solid rgba(227, 191, 110, 0.1); }
  .menu-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
  .menu-cta .btn { flex: 1 1 auto; white-space: nowrap; }
}

@media (max-width: 359px) {
  .topbar-join { display: none; }
}

@media (min-width: 960px) {
  .menu-toggle, .topbar-join { display: none; }
  .menu { display: flex; flex: none; align-items: center; gap: 28px; }
  .menu-links { display: flex; gap: 24px; }
  .menu-links a { position: relative; }
  .menu-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    transform: scaleX(0);
    transition: transform 0.3s ease;
  }
  .menu-links a:hover::after, .menu-links a[aria-current="true"]::after { transform: scaleX(1); }
  .menu-cta { display: flex; gap: 10px; }
}

@media (min-width: 960px) and (max-width: 1199px) {
  .menu { gap: 18px; }
  .menu-links { gap: 16px; }
  .menu-cta .btn-ghost { display: none; }
}

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
  background: #0b0709;
}

.hero-scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; }

.layer { position: absolute; inset: 0; }
/* Only while the hero is on screen: each layer is a big texture on the graphics card. */
.hero.in-view .layer[data-speed] { will-change: transform; }

.sky {
  --moon-x: 68%;
  --moon-y: 50%;
  inset: -6% -4%;
  background:
    radial-gradient(38% 30% at var(--moon-x) calc(var(--moon-y) + 12%), rgba(255, 150, 70, 0.55), rgba(255, 90, 40, 0.12) 55%, transparent 75%),
    radial-gradient(9% 9% at var(--moon-x) var(--moon-y), rgba(255, 214, 160, 0.85), rgba(255, 140, 60, 0.35) 60%, transparent 100%),
    linear-gradient(180deg, #0c070c 0%, #1d0b10 34%, #4a1610 62%, #8a2c12 82%, #2a0f0c 100%);
}

.art {
  inset: -5% -5%;
  opacity: 0;
  transition: opacity 1.8s ease;
}
.has-hero-art .art { opacity: 1; }
.kenburns { position: absolute; inset: 0; transform-origin: 70% 30%; }
.art canvas { width: 100%; height: 100%; object-fit: cover; object-position: 70% 22%; }

.ridge { top: auto; height: 46%; }
.ridge img {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: max(110%, 1000px);
  max-width: none;
  height: auto;
  transform: translateX(-50%);
}
.ridge-far { bottom: 8%; }
.ridge-near { bottom: -2%; height: 30%; }

.castle {
  top: auto;
  left: auto;
  right: 4%;
  bottom: 6%;
  width: min(64vw, 620px);
  height: auto;
}
.castle img { width: 100%; height: auto; }

.has-hero-art .sky { opacity: 0.6; }
.has-hero-art .ridge-near { opacity: 0; }
/* The drawn castle stands in only when the server has no painting for the hero. Until the
   page knows, the red sky alone shows, so the painting fades in over the same mood. */
.fallback { transition: opacity 1.2s ease; }
.js body:not(.no-hero-art) .fallback { opacity: 0; }

.fog { top: auto; height: 34%; overflow: hidden; pointer-events: none; }
.fog-back { bottom: 14%; opacity: 0.45; }
.fog-strip {
  position: absolute;
  inset: 0;
  background: url("/static/art/fog.svg") repeat-x 0 0 / 50% 100%;
}
.has-hero-art .fog-back { opacity: 0.3; }

.embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* The vignette darkens the edges and blends the hero into the page below. The shade only
   keeps the text readable, so it fades out with the text and the painting shows whole. */
.vignette, .shade { position: absolute; inset: 0; pointer-events: none; }
.vignette {
  background:
    linear-gradient(0deg, var(--bg) 0%, rgba(10, 8, 11, 0.6) 9%, rgba(10, 8, 11, 0) 24%),
    linear-gradient(180deg, rgba(8, 6, 9, 0.55) 0%, rgba(8, 6, 9, 0) 20%),
    radial-gradient(130% 95% at 60% 40%, transparent 52%, rgba(4, 3, 5, 0.7) 100%);
}
.shade {
  background: linear-gradient(0deg, rgba(10, 8, 11, 0.9) 0%, rgba(10, 8, 11, 0.62) 30%, rgba(10, 8, 11, 0.12) 56%, rgba(10, 8, 11, 0) 70%);
}

/* Film grain over the paintings and the drawn maps: it hides the softness of the enlarged
   pictures and makes both look like the same world. */
.grain, .banner-art::after, .band-art::after, .map-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 180px 180px;
  mix-blend-mode: overlay;
  opacity: 0.07;
}

.hero-content {
  position: relative;
  padding-top: calc(var(--nav-h) + 24px);
  padding-bottom: clamp(84px, 13vh, 140px);
  text-align: center;
}
.hero.in-view .hero-content { will-change: transform, opacity; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  max-width: 100%;
  margin: 0 0 18px;
  padding: 0.45em 1.05em 0.45em 1.15em;
  border-radius: 999px;
  background: rgba(8, 6, 9, 0.74);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 0.9rem;
  color: var(--ink-2);
  text-align: left;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.85);
}

.dot {
  position: relative;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #8a8478;
}
.status.on .dot { background: #4fdc6f; box-shadow: 0 0 10px #4fdc6f; }
.status.on .dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid #4fdc6f;
  opacity: 0;
  animation: ping 2.2s ease-out infinite;
}
.status.off .dot { background: #ff5f4f; box-shadow: 0 0 8px rgba(255, 95, 79, 0.7); }
.status b { color: var(--ink); font-weight: 700; }

@keyframes ping {
  0% { transform: scale(0.65); opacity: 0.9; }
  100% { transform: scale(1.5); opacity: 0; }
}

.eyebrow {
  margin: 0 0 10px;
  font: 600 0.78rem/1.4 var(--display);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--ember-hi);
}

.hero-eyebrow { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9); }

.title {
  margin: 0 0 0.25em;
  font: 700 max(1.75rem, calc(clamp(2.7rem, 1.4rem + 6.6vw, 6.4rem) * var(--title-scale, 1)))/1.04 var(--deco);
  letter-spacing: 0.01em;
  color: #f6dc9a;
  background: var(--gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(30, 14, 2, 0.95)) drop-shadow(0 0 24px rgba(255, 128, 40, 0.35));
  text-wrap: balance;
  overflow-wrap: break-word;
}

.tagline {
  max-width: 36em;
  margin: 0 auto 26px;
  font-size: clamp(1rem, 0.94rem + 0.35vw, 1.2rem);
  color: var(--ink-2);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 24px rgba(0, 0, 0, 0.85);
  text-wrap: pretty;
}

.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* The server at a glance: season, rates, levels, party size, heroes */
.glance {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}
.glance li {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 92px;
  padding: 8px 14px 9px;
  border-radius: 12px;
  /* Dark enough without a backdrop blur, which slowed down scrolling over the moving hero. */
  background: rgba(8, 6, 9, 0.74);
  box-shadow: inset 0 0 0 1px var(--line);
}
.glance b {
  font: 700 1.3rem/1.15 var(--display);
  color: var(--gold-hi);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(255, 170, 80, 0.3);
}
/* Rates ("1×") in the body font: Cinzel's 1 looks like an I, so "x1" read as XI. */
.glance b.rate { font-family: var(--body); font-weight: 700; letter-spacing: 0.01em; }
.glance span { font: 600 0.7rem/1.3 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
@media (max-width: 599px) {
  .glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 20px; }
  .glance li { min-width: 0; padding: 7px 4px 8px; }
  .glance b { font-size: 1.15rem; }
  .glance span { font-size: 0.64rem; letter-spacing: 0.08em; }
}

.scroll-cue {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 22px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 52px;
  margin-left: -22px;
}
.mouse {
  width: 24px;
  height: 38px;
  border-radius: 14px;
  box-shadow: inset 0 0 0 2px rgba(251, 231, 176, 0.7);
  position: relative;
}
.mouse::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--gold-hi);
  animation: wheel 1.8s ease-in-out infinite;
}
.cue-chevron { display: none; width: 30px; height: 30px; color: var(--gold-hi); }
@media (hover: none) {
  .mouse { display: none; }
  .cue-chevron { display: block; }
}
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .cue-chevron { animation: nudge 1.8s ease-in-out infinite; }
}
@keyframes nudge { 50% { transform: translateY(6px); } }
@keyframes wheel {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

@media (max-width: 599px) {
  .hero-content { padding-bottom: 84px; }
  .cta-row .btn { flex: 1 1 auto; white-space: nowrap; padding-inline: 1.1em; }
  .art canvas { object-position: 79% 14%; }
  .shade { background: linear-gradient(0deg, rgba(10, 8, 11, 0.92) 0%, rgba(10, 8, 11, 0.7) 34%, rgba(10, 8, 11, 0.15) 62%, rgba(10, 8, 11, 0) 76%); }
  .sky { --moon-x: 50%; --moon-y: 24%; }
  .castle {
    left: 50%;
    right: auto;
    top: calc(var(--nav-h) + 2vh);
    bottom: auto;
    width: min(84vw, 380px);
    margin-left: max(-42vw, -190px);
    -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 88%);
    mask-image: linear-gradient(180deg, #000 52%, transparent 88%);
  }
  .scroll-cue { bottom: 18px; }
  .tagline { margin-bottom: 22px; }
}

@media (min-width: 960px) {
  .hero-content { text-align: left; padding-bottom: clamp(72px, 11vh, 120px); }
  .hero-content > * { max-width: 680px; }
  .hero-content > .title { max-width: 820px; }
  .tagline { margin-left: 0; }
  .cta-row, .glance { justify-content: flex-start; }
  /* Light enough on the left that the flaming sword of the painting stays in sight. */
  .shade {
    background:
      linear-gradient(90deg, rgba(6, 4, 7, 0.72) 0%, rgba(6, 4, 7, 0.2) 30%, rgba(6, 4, 7, 0) 52%),
      linear-gradient(0deg, rgba(10, 8, 11, 0.7) 0%, rgba(10, 8, 11, 0.25) 26%, rgba(10, 8, 11, 0) 44%);
  }
  .castle { right: 6%; }
}

/* An entrance for the hero text */
@media (prefers-reduced-motion: no-preference) {
  .hero-content > * { animation: rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero-content > :nth-child(2) { animation-delay: 0.1s; }
  .hero-content > :nth-child(3) { animation-delay: 0.2s; }
  .hero-content > :nth-child(4) { animation-delay: 0.32s; }
  .hero-content > :nth-child(5) { animation-delay: 0.44s; }
  .hero-content > :nth-child(6) { animation-delay: 0.56s; }
  .kenburns { animation: kenburns 34s ease-in-out infinite alternate; }
}
/* The painting is 1280 pixels wide: on big screens it zooms less, so it stays sharp. */
@media (prefers-reduced-motion: no-preference) and (min-width: 1600px) {
  .kenburns { animation-name: kenburns-wide; }
}

@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes kenburns {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.15) translate3d(-2.5%, 1.5%, 0); }
}
@keyframes kenburns-wide {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to { transform: scale(1.08) translate3d(-1.5%, 1%, 0); }
}

/* ------------------------------------------------------------------ sections */

.section {
  --banner-h: clamp(300px, 38vw, 540px);
  position: relative;
  padding: clamp(48px, 7vw, 104px) 0;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
}
@media (max-width: 699px) {
  .section { --banner-h: 62vw; }
}

/* A thin gold rule between sections */
.section + .section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(760px, 86%);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(227, 191, 110, 0.35), transparent);
}

/* A section's painting: once, wide and sharp, behind its head. The page shows it when the
   server has it (has-banner), and the head then sits on its lower, fading part. */
.banner {
  position: absolute;
  inset: 0 0 auto;
  height: var(--banner-h);
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 38%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 38%, transparent 100%);
}
.banner-art {
  position: absolute;
  inset: -9% 0;
  /* Never more than about 1.8 times the painting's own width: wider screens get soft sides. */
  max-width: 1440px;
  margin: 0 auto;
}
.banner canvas, .band canvas { position: relative; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
.banner.ready canvas { opacity: 0.9; }
.banner.soft.ready canvas { opacity: 0.7; }
/* The red sky is square: it shows its band of fire and the rocks, behind the head and solid
   further down than the other paintings, and a little larger than the box, so its softened
   edges stay outside. */
.banner.soft {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 58%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 58%, transparent 100%);
}
.banner.soft canvas { object-position: 50% 90%; transform: scale(1.04); }
.banner[data-art="demon"] canvas { object-position: 50% 30%; }
.banner[data-art="army"] canvas { object-position: 40% 35%; }
.banner[data-art="ember"] canvas { object-position: 70% 40%; }
.banner[data-art="melee"] canvas { object-position: 50% 30%; }
@media (min-width: 1441px) {
  .banner-art, .band-art {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  }
}
.section.has-banner { padding-top: 0; }
.has-banner > .wrap > .section-head:first-child { padding-top: calc(var(--banner-h) * 0.5); }
.has-banner .section-head h2, .has-banner .section-head .eyebrow { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.9); }
.has-banner .section-head .lede { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 20px rgba(0, 0, 0, 0.85); }

/* A painting at full strength across the whole width, with one line, between two sections. */
.band {
  position: relative;
  display: grid;
  align-items: end;
  height: clamp(320px, 70vh, 680px);
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 80%, transparent 100%);
}
.band-art {
  position: absolute;
  inset: -12% 0;
  max-width: 1600px;
  margin: 0 auto;
  z-index: -1;
}
.band.ready canvas { opacity: 1; }
.band[data-art="dark-lord"] canvas { object-position: 50% 30%; }
.band[data-art="red-knight"] canvas { object-position: 78% 35%; }
.band-line {
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(56px, 12vh, 110px);
  max-width: 22em;
  text-align: center;
  font: 700 clamp(1.5rem, 1.1rem + 2vw, 2.6rem)/1.2 var(--display);
  letter-spacing: 0.03em;
  color: var(--gold-hi);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 40px rgba(0, 0, 0, 0.9);
  text-wrap: balance;
}
.band::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(10, 8, 11, 0.75), transparent);
}
@media (max-width: 699px) {
  .band { height: clamp(240px, 40vh, 320px); }
  .band-line { padding-bottom: 40px; }
}

.section-head {
  max-width: 760px;
  margin: 0 auto clamp(36px, 5vw, 60px);
  text-align: center;
}

.section-head h2 {
  font-size: clamp(2.1rem, 1.3rem + 3vw, 3.5rem);
  letter-spacing: 0.04em;
  color: var(--gold);
  background: var(--gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(30, 14, 2, 0.9));
}

.divider { width: min(320px, 78%); height: auto; margin: 16px auto 18px; }
@media (max-width: 599px) {
  .divider { display: none; }
  .section-head h2 { margin-bottom: 12px; }
}

/* Events and rankings: the head on the left, beside the painting, on wide screens. */
@media (min-width: 960px) {
  .section-head.side { max-width: 620px; margin-left: 0; text-align: left; }
  /* Only the right part of the divider: the ornament starts at the text edge and its line
     runs out to the right (the picture is 320 wide, the ornament starts at 122). */
  .section-head.side .divider { width: 198px; height: 28px; margin-left: 0; object-fit: cover; object-position: -122px 50%; }
  .section-head.side .lede { margin-left: 0; }
}

.lede {
  margin: 0 auto;
  max-width: 40em;
  color: var(--ink-2);
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.12rem);
  text-wrap: pretty;
}

.tz-note { margin: 12px 0 0; font-size: 0.88rem; color: var(--muted); }

.sub-head {
  margin: 0 0 18px;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-hi);
  display: flex;
  align-items: center;
  gap: 14px;
}
.sub-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}

.panel {
  position: relative;
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bottom));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -32px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 236, 190, 0.06);
}

.panel::before, .panel::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid var(--gold);
  opacity: 0.6;
  pointer-events: none;
}
.panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: var(--radius); }
.panel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: var(--radius); }

/* Reveal on scroll (only with script and motion) */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: var(--d, 0s);
  }
  .js .reveal:not(.in) { opacity: 0; transform: translate3d(0, 18px, 0); }
}

/* ------------------------------------------------------------------ classes */

.class-picker { max-width: 1080px; margin: 0 auto; }

.class-tabs {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 22px;
}

.class-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 2px 10px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  font: 600 0.84rem/1.2 var(--display);
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: color 0.25s ease, background-color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.class-tab img {
  width: 100%;
  max-width: 72px;
  height: auto;
  aspect-ratio: 1;
  filter: grayscale(0.55) brightness(0.7);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.35s ease;
}
.class-tab:hover { color: var(--ink); }
.class-tab:hover img { filter: grayscale(0.1) brightness(0.95); transform: translateY(-2px); }
.class-tab[aria-selected="true"] { color: var(--gold-hi); background: radial-gradient(70% 60% at 50% 40%, rgba(255, 150, 60, 0.18), transparent 75%); }
.class-tab[aria-selected="true"] img { filter: drop-shadow(0 0 14px rgba(255, 150, 60, 0.55)); transform: scale(1.06); }
.tab-abbr { display: none; font-size: 0.78rem; letter-spacing: 0.08em; }

@media (max-width: 719px) {
  .class-tab .tab-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .tab-abbr { display: block; }
  .class-tabs { gap: 2px; margin-bottom: 16px; }
  .class-tab { padding: 6px 0 8px; gap: 6px; border-radius: 10px; }
}

.class-panel {
  --accent: #e3bf6e;
  display: grid;
  gap: 8px 40px;
  align-items: center;
  padding: clamp(22px, 4vw, 44px);
  overflow: hidden;
}
.class-panel[data-class="dk"] { --accent: #e0453a; }
.class-panel[data-class="dw"] { --accent: #4da3ff; }
.class-panel[data-class="elf"] { --accent: #4fd394; }
.class-panel[data-class="sum"] { --accent: #ff5fae; }
.class-panel[data-class="mg"] { --accent: #a77bff; }
.class-panel[data-class="dl"] { --accent: #ffb23f; }
.class-panel[data-class="rf"] { --accent: #ff7a3d; }

.class-panel + .class-panel { margin-top: 18px; }
/* All panels in one grid cell: the box keeps the height of the tallest, so nothing below
   jumps when the tab changes. */
.js .class-panels { display: grid; }
.js .class-panel { grid-area: 1 / 1; margin: 0; }
.js .class-panel:not(.current) { visibility: hidden; }

/* Every class has the same arched frame: the painting of the class when the server has
   one, otherwise the class colour with rays, and the emblem large inside. */
.class-art {
  position: relative;
  width: min(250px, 54vw);
  aspect-ratio: 1;
  margin: 0 auto;
}
.arch {
  position: absolute;
  inset: 2% 9% 9%;
  border-radius: 999px 999px 18px 18px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--accent) 62%, #120e13) 0, #120e13 70%);
  box-shadow: 0 24px 40px -18px rgba(0, 0, 0, 0.9);
}
.arch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(251, 231, 176, 0.55), inset 0 0 0 5px rgba(10, 8, 11, 0.55), inset 0 -60px 50px -30px rgba(10, 8, 11, 0.85);
}
.portrait { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.portrait canvas { width: 100%; height: 100%; object-fit: cover; }
.portrait.ready { opacity: 1; }
.portrait[data-art="red-knight"] canvas { object-position: 96% 30%; }
.portrait[data-art="fairy"] canvas { object-position: 32% 30%; }
.portrait[data-art="blue-knight"] canvas { object-position: 44% 50%; }
.portrait[data-art="dark-lord"] canvas { object-position: 50% 40%; }
.emblem {
  position: absolute;
  left: 50%;
  top: 45.5%;
  width: 56%;
  height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.7));
  transition: top 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), width 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* With a portrait the emblem becomes a medallion on its foot. */
.class-art.has-portrait .emblem { top: 66%; width: 34%; transform: translate(-50%, 0); }
.rays {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 220, 150, 0.18) 0deg 4deg, transparent 4deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 62%);
  mask-image: radial-gradient(circle, #000 18%, transparent 62%);
}

.class-body h3 {
  font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem);
  color: var(--gold-hi);
  margin-bottom: 12px;
  letter-spacing: 0.03em;
}
.class-body > p:not(.class-role) { color: var(--ink-2); }

.class-role {
  margin: 0 0 6px;
  font: 600 0.78rem/1.4 var(--display);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  filter: brightness(1.25);
}

.evolution {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 6px;
  list-style: none;
  margin: 18px 0 20px;
  padding: 0;
}
.evolution li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 0.88rem/1.2 var(--display);
  color: var(--ink);
}
/* The arrow goes with the class after it (order: -1), so a wrapped line never ends in one. */
.evolution li:not(:first-child)::after {
  content: "";
  order: -1;
  width: 22px;
  height: 10px;
  margin-left: 2px;
  background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi));
  clip-path: polygon(0 40%, 70% 40%, 70% 0, 100% 50%, 70% 100%, 70% 60%, 0 60%);
}
.evolution li::before {
  content: "";
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.evolution .master { color: var(--gold-hi); }

@media (max-width: 599px) {
  .evolution { flex-direction: column; align-items: flex-start; gap: 20px; }
  .evolution li { position: relative; }
  .evolution li:not(:first-child)::after {
    position: absolute;
    left: -1px;
    bottom: calc(100% + 4px);
    width: 10px;
    height: 12px;
    margin: 0;
    background: linear-gradient(180deg, var(--gold-lo), var(--gold-hi));
    clip-path: polygon(35% 0, 65% 0, 65% 55%, 100% 55%, 50% 100%, 0 55%, 35% 55%);
  }
}

.class-facts { display: grid; gap: 10px; margin: 0; }
.class-facts div {
  display: grid;
  grid-template-columns: 7.2em 1fr;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(227, 191, 110, 0.12);
}
.class-facts dt { font: 600 0.74rem/1.7 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.class-facts dd { margin: 0; color: var(--ink); }

@media (min-width: 760px) {
  .class-panel { grid-template-columns: minmax(220px, 300px) 1fr; }
  .class-art { width: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  .class-panel.current .rays { animation: spin 60s linear infinite; }
  .class-panel.enter .class-art { animation: pop 0.6s cubic-bezier(0.2, 0.8, 0.2, 1.2); }
  .class-panel.enter .class-body { animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { from { transform: scale(0.9); opacity: 0; } to { transform: none; opacity: 1; } }

/* ------------------------------------------------------------------ events */

/* Next up: one countdown for everything that starts next, with those events listed. */
.ev-next {
  --accent: #e3bf6e;
  display: grid;
  gap: 18px 36px;
  margin-bottom: 18px;
  padding: clamp(20px, 3.5vw, 32px);
  border-radius: var(--radius);
  background:
    radial-gradient(70% 120% at 0% 0%, rgba(255, 140, 60, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(34, 24, 30, 0.94), rgba(13, 10, 14, 0.96));
  border: 1px solid var(--line-strong);
  box-shadow: 0 30px 60px -32px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 236, 190, 0.08);
}
.ev-next-label { margin: 0 0 4px; font: 600 0.78rem/1.4 var(--display); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ember-hi); }
.ev-next-label b { color: var(--gold-hi); }
.ev-next-time {
  display: block;
  font: 700 clamp(2.4rem, 1.8rem + 2.8vw, 3.8rem)/1.05 var(--display);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  color: var(--gold-hi);
  text-shadow: 0 0 28px rgba(255, 170, 80, 0.4);
}
.ev-next-sub { margin: 6px 0 0; color: var(--ink-2); font-size: 0.92rem; }
.ev-next-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) {
  .ev-next-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev-next-list > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1060px) {
  .ev-next { grid-template-columns: 280px minmax(0, 1fr); align-items: start; }
  .ev-next-time { font-size: 3.2rem; }
  .ev-next-when { position: sticky; top: calc(var(--nav-h) + 24px); padding: 8px 32px 8px 0; border-right: 1px solid var(--line); }
}
.ev-next-list .ev-desc { font-size: 0.88rem; }

/* Open now: green while gates or the tower are open, ember red when only an invasion runs. */
.ev-open {
  --open: #7be39a;
  --open-hi: #d6ffe0;
  --open-glow: rgba(80, 230, 120, 0.16);
  border-color: color-mix(in srgb, var(--open) 50%, transparent);
  background:
    radial-gradient(70% 120% at 0% 0%, var(--open-glow), transparent 60%),
    linear-gradient(180deg, rgba(30, 26, 28, 0.95), rgba(12, 10, 13, 0.96));
}
.ev-open[data-state="live"] { --open: #ff7a3d; --open-hi: #ffd2c8; --open-glow: rgba(255, 90, 50, 0.18); }
.ev-open .ev-next-label { display: flex; align-items: center; gap: 8px; color: var(--open); }
.ev-open-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--open); box-shadow: 0 0 10px var(--open); }
@media (prefers-reduced-motion: no-preference) {
  .ev-open-dot { animation: blink 1.2s ease-in-out infinite; }
}
.ev-open-what { margin: 2px 0 2px; color: var(--ink-2); font-size: 0.95rem; }
.ev-open .ev-next-time { color: var(--open-hi); text-shadow: 0 0 28px color-mix(in srgb, var(--open) 45%, transparent); }

/* The next 24 hours from now: the names on the left, a row per event on the right, the
   hours above. Now is the left edge of the rows. */
.ribbon {
  margin-bottom: 18px;
  padding: 16px clamp(12px, 2.5vw, 22px) 14px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(24, 18, 23, 0.9), rgba(12, 9, 13, 0.94));
  border: 1px solid var(--line);
}
.ribbon-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-bottom: 10px; }
.ribbon-head h3 { font-size: 1rem; letter-spacing: 0.06em; color: var(--gold-hi); }
.ribbon-head p { margin: 0; font-size: 0.82rem; color: var(--muted); }
/* The names column is as wide as the longest name, up to 40% of the box. */
.ribbon-grid { display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr); }
.ribbon-names, .ribbon-tracks { padding: 20px 0 6px; }
.ribbon-tracks { position: relative; }
/* Over the rows; drawn last, so the now line lies on top. */
.ribbon-axis { position: absolute; inset: 0; pointer-events: none; }
.ribbon-hour { position: absolute; top: 0; bottom: 0; left: calc(var(--at) * 100%); width: 1px; background: rgba(227, 191, 110, 0.07); }
.ribbon-hour.mid { background: rgba(227, 191, 110, 0.11); }
.ribbon-hour.major { background: rgba(227, 191, 110, 0.18); }
.ribbon-hour.midnight { background: rgba(227, 191, 110, 0.4); }
.ribbon-hour span, .ribbon-now span {
  position: absolute;
  top: 3px;
  left: 0;
  transform: translateX(-50%);
  font: 600 0.66rem/1 var(--body);
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
}
/* "Now" and "Tomorrow" mark where something begins: their labels start at their line. */
.ribbon-hour.midnight span { left: 5px; transform: none; color: var(--gold-hi); letter-spacing: 0.1em; text-transform: uppercase; }
.ribbon-now { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--ember); box-shadow: 0 0 10px var(--ember); }
.ribbon-now span { left: 6px; transform: none; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ember-hi); }
.lane-label { display: flex; align-items: center; gap: 8px; min-width: 0; height: 26px; padding-right: 14px; font-size: 0.82rem; color: var(--ink-2); }
.lane-label svg { flex: none; width: 18px; height: 18px; color: var(--accent); }
.lane-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lane-track { position: relative; height: 26px; border-top: 1px solid rgba(227, 191, 110, 0.06); }
.lane-mark {
  position: absolute;
  top: 50%;
  left: calc(var(--at) * 100%);
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  transform: rotate(45deg);
  background: var(--accent);
  box-shadow: 0 0 8px -1px var(--accent);
}
.lane-mark.soon { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; background: var(--gold-hi); box-shadow: 0 0 0 2px #0c090c, 0 0 14px var(--gold); }
/* An event under way: a bar from now to its end. */
.lane-busy {
  position: absolute;
  top: 50%;
  left: 0;
  width: calc(var(--to) * 100%);
  min-width: 6px;
  height: 8px;
  margin-top: -4px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, transparent));
  box-shadow: 0 0 12px -2px var(--accent);
}
.lane-label, .lane-track, .event-card { --accent: #e3bf6e; }
.kind-minigame { --accent: #e3bf6e; }
.kind-invasion { --accent: #ff7a3d; }
.kind-bonus { --accent: #6fe0a6; }
.kind-boss { --accent: #c77dff; }
@media (max-width: 699px) {
  .ribbon-grid { grid-template-columns: 30px minmax(0, 1fr); }
  .lane-label { padding-right: 8px; }
  .lane-label span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ribbon-hour:not(.major):not(.midnight) span { display: none; }
  .lane-mark { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; }
  .lane-mark.soon { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
}

.events-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
}
/* No card alone at the end of the grid: an odd last card takes the whole row; with three
   columns (six halves) two last cards share it, and a lone one lies wide across it. */
@media (min-width: 700px) {
  .events-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 700px) and (max-width: 1059px) {
  .events-grid > .event-card:nth-child(odd):last-child { grid-column: 1 / -1; }
}
@media (min-width: 1060px) {
  .events-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .events-grid > * { grid-column: span 2; }
  .events-grid > .event-card:nth-child(3n+1):nth-last-child(2),
  .events-grid > .event-card:nth-child(3n+2):last-child { grid-column: span 3; }
  .events-grid > .event-card:nth-child(3n+1):last-child { grid-column: 1 / -1; }
}

.more-btn { display: none; width: fit-content; margin: 18px auto 0; }
.rank-panel .more-btn { margin: 8px auto 12px; }
@media (max-width: 699px) {
  .rank-panel:not(.expanded) .extra { display: none; }
  .rank-panel .more-btn { display: flex; }
}
.expanded > .more-btn { display: none; }

.event-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(30, 22, 28, 0.88), rgba(13, 10, 14, 0.94));
  border: 1px solid var(--line);
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.95);
  overflow: hidden;
  transition: border-color 0.3s ease;
}
.event-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.8;
}
.event-card:hover { border-color: var(--line-strong); }
.ev-next-list .event-card { padding: 12px 14px; gap: 8px; background: rgba(255, 255, 255, 0.025); box-shadow: none; }
.ev-next-list .event-card::before { inset: 0 auto 0 0; width: 3px; height: auto; background: var(--accent); }

.event-card.skeleton { min-height: 150px; background: linear-gradient(100deg, rgba(30, 22, 28, 0.7) 30%, rgba(60, 44, 40, 0.7) 50%, rgba(30, 22, 28, 0.7) 70%) 0 0 / 300% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .event-card.skeleton { animation: shimmer 1.6s linear infinite; }
}
@keyframes shimmer { to { background-position: -150% 0; } }

.ev-h { margin: 0; font: inherit; }
.ev-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
}
/* Cards side by side: a name on two lines doesn't push its icon and countdown below the others'. */
@media (min-width: 700px) {
  .ev-head { align-items: start; }
}
button.ev-head { grid-template-columns: auto minmax(0, 1fr) auto auto; cursor: pointer; min-height: 44px; }
button.ev-head:focus-visible { outline-offset: 4px; }
.ev-chev { width: 20px; height: 20px; color: var(--gold); transition: transform 0.2s ease; }
.open .ev-chev { transform: rotate(180deg); }
.ev-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: var(--accent);
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.35)), #140f14;
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 0 20px -6px var(--accent);
}
.ev-icon svg { width: 28px; height: 28px; }
.ev-title { display: grid; min-width: 0; }
.ev-name { font: 700 1.08rem/1.2 var(--display); letter-spacing: 0.02em; color: var(--ink); }
/* The kind and the length on one line: "Mini-game · 20 min". */
.ev-kind { margin-top: 2px; font-size: 0.8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-kind b { color: var(--accent); font-weight: 600; }
.ev-when { display: grid; justify-items: end; gap: 2px; text-align: right; }
.ev-count { display: grid; justify-items: end; gap: 2px; }
.ev-label { font: 600 0.66rem/1.3 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.ev-time {
  font: 700 1.1rem/1.15 var(--display);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  color: var(--gold-hi);
  white-space: nowrap;
}
.no-time .ev-label, .no-time .ev-time { display: none; }
.event-card[data-state="live"] .ev-time { color: #ffd2c8; }
.event-card:is([data-state="gates"], [data-state="tower"]) .ev-time { color: #d6ffe0; }
.event-card:is([data-state="gates"], [data-state="tower"]) { border-color: rgba(120, 230, 150, 0.4); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font: 700 0.64rem/1.3 var(--body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  background: linear-gradient(180deg, #e2392d, #9c1a12);
  box-shadow: 0 0 0 1px rgba(255, 140, 120, 0.5), 0 0 18px -2px rgba(255, 60, 40, 0.8);
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .badge::before { animation: blink 1.2s ease-in-out infinite; }
  .badge.calm::before { animation: none; }
}
/* Gates or the tower open: players can go in now. */
.badge.open { color: #0d1a10; background: linear-gradient(180deg, #a6f5b8, #3fbf68); box-shadow: 0 0 0 1px rgba(170, 255, 190, 0.5), 0 0 18px -2px rgba(80, 230, 120, 0.7); }
.badge.open::before { background: #0d1a10; }
/* A mini-game whose gates have closed: the fight goes on inside. */
.badge.calm { color: var(--ink-2); background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--line-strong); }
.badge.calm::before { background: var(--gold); }
@keyframes blink { 50% { opacity: 0.25; } }

.ev-body { display: grid; gap: 10px; }
.ev-state { margin: 0; font-size: 0.86rem; color: var(--ink-2); }
.ev-state b { color: var(--gold-hi); font-weight: 600; }
.ev-progress { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.event-card[data-state="gates"] .ev-progress span { background: linear-gradient(90deg, #a6f5b8, #3fbf68); }
.ev-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ff9a52, #ff3d2e);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  transition: transform 1s linear;
}
.ev-desc { margin: 0; color: var(--ink-2); font-size: 0.92rem; }
.ev-times { margin: 0; padding-top: 10px; border-top: 1px solid rgba(227, 191, 110, 0.12); font-size: 0.86rem; color: var(--muted); }
.in-group .ev-times { padding-top: 0; border-top: 0; }
.ev-every { color: var(--ink); font-weight: 600; }
.ev-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ev-chips time {
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(227, 191, 110, 0.08);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.ev-chips time.next { color: #1d1206; background: var(--gold); box-shadow: none; font-weight: 700; }

@supports (grid-template-rows: subgrid) {
  @media (min-width: 700px) {
    .events-grid > .event-card:not(.skeleton) { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
    .events-grid > .event-card > .ev-body { grid-template-rows: auto auto 1fr auto; }
  }
}
.events-grid .ev-body { align-content: start; }
.events-grid .ev-times { align-self: end; }
/* The lone last card across the whole row: the head on the left, the rest on the right. */
@media (min-width: 1060px) {
  .events-grid > .event-card:not(.skeleton):nth-child(3n+1):last-child {
    grid-template-rows: none;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 36px;
    align-items: start;
  }
  .events-grid > .event-card:nth-child(3n+1):last-child > .ev-body { grid-template-rows: none; }
  .events-grid > .event-card:nth-child(3n+1):last-child .ev-times { align-self: auto; }
}

/* Phones: a row per event; a tap shows what it is and when it comes again. */
@media (max-width: 699px) {
  .event-card { padding: 12px 14px; gap: 10px; }
  .ev-icon { width: 40px; height: 40px; }
  .ev-icon svg { width: 24px; height: 24px; }
  .ev-name { font-size: 1rem; }
  .event-card:not(.open) :is(.ev-desc, .ev-times) { display: none; }
  .event-card:not(.open) .ev-body:not(:has(> :not([hidden]):is(.ev-state, .ev-progress))) { display: none; }
  .ev-next { gap: 14px; }
  /* In "Next up" an event has no countdown of its own: its state goes under its name. */
  .no-time .ev-head { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 4px; }
  .no-time .ev-icon { grid-row: 1 / span 2; }
  .no-time .ev-when { grid-column: 2; grid-row: 2; justify-items: start; }
  .no-time .ev-when:not(:has(.badge:not([hidden]))) { display: none; }
  .no-time .ev-chev { grid-column: 3; grid-row: 1 / span 2; }
}
/* Narrow phones: the countdown goes on a row of its own under the name, so the name keeps
   the width and wraps less. */
@media (max-width: 399px) {
  .event-card:not(.no-time) .ev-head { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 6px; }
  .event-card:not(.no-time) .ev-icon { grid-row: 1 / span 2; align-self: start; }
  .event-card:not(.no-time) .ev-chev { grid-column: 3; grid-row: 1 / span 2; }
  .event-card:not(.no-time) .ev-when { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; text-align: left; }
  .event-card:not(.no-time) .ev-count { display: flex; align-items: baseline; gap: 8px; }
}

.events-grid > .empty { grid-column: 1 / -1; }

.empty {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 44px);
  text-align: center;
}
.empty h3 { font-size: 1.35rem; color: var(--gold-hi); margin-bottom: 10px; }
.empty p { color: var(--ink-2); }
.empty .btn { margin-top: 6px; }

.dormant-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); text-align: left; }
.dormant-list li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px rgba(227, 191, 110, 0.1); }
.dormant-list svg { width: 26px; height: 26px; flex: none; color: var(--gold); }
.dormant-list span { font: 600 0.92rem/1.3 var(--display); }

/* ------------------------------------------------------------------ treasures */

.jewels {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  margin-bottom: 26px;
}

.jewel {
  --glow: #e3bf6e;
  position: relative;
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(28, 21, 27, 0.72), rgba(12, 9, 13, 0.82));
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow 0.3s ease;
}
.jewel:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.jewel[data-gem="bless"] { --glow: #8f86ff; }
.jewel[data-gem="soul"] { --glow: #ffbf3a; }
.jewel[data-gem="life"] { --glow: #ff4d5e; }
.jewel[data-gem="chaos"] { --glow: #5fc24a; }
.jewel[data-gem="creation"] { --glow: #ff8fca; }
.jewel h3 { font-size: 1.08rem; color: var(--gold-hi); margin-bottom: 6px; }
.jewel p { margin: 0; color: var(--ink-2); font-size: 0.93rem; }
.jewel-short, .jewel-toggle { display: none; }
.jewel-text { min-width: 0; }
.jewel-art, .relic-art {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  /* On the box, not the picture: the round clip for the glint doesn't cut the shadow. */
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.6));
}
.jewel-art img, .relic-art img { position: relative; width: 100%; height: auto; }
/* A glint runs across the medallion when you point at it (no idle motion). */
.jewel-art::after, .relic-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 246, 220, 0.38) 50%, transparent 65%);
  transform: translateX(-130%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .jewel:is(:hover, :focus-within) .jewel-art::after, .relic:is(:hover, :focus-within) .relic-art::after {
    transform: translateX(130%);
    transition: transform 0.6s ease;
  }
}

@media (min-width: 700px) {
  .jewels { grid-template-columns: repeat(6, 1fr); }
  .jewel { grid-column: span 2; grid-template-columns: 1fr; padding: 22px 18px 24px; align-content: start; }
  .jewel:nth-child(4) { grid-column: 2 / span 2; }
  .jewel-art { width: 120px; margin: 0 auto 4px; }
  .jewel h3 { text-align: center; }
  .jewel p { max-width: 28ch; margin-inline: auto; }
}

@media (min-width: 1100px) {
  .jewels { grid-template-columns: repeat(5, 1fr); }
  .jewel, .jewel:nth-child(4) { grid-column: auto; }
}

/* Phones: two columns, one line each; a tap shows the whole text. */
@media (max-width: 699px) {
  .jewels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* An opened jewel grows alone; the one beside it keeps its size. */
  .jewels:has(.jewel.open) { align-items: start; }
  .jewel { grid-template-columns: 1fr; gap: 6px; padding: 14px 12px; text-align: center; align-content: start; }
  .jewel:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .jewel-art { width: 72px; margin: 0 auto; }
  .jewel h3 { font-size: 0.98rem; margin-bottom: 2px; }
  .js .jewel-name { display: none; }
  .js .jewel-toggle {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    cursor: pointer;
  }
  .js .jewel-toggle::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
  .js .jewel-toggle:focus-visible { outline: none; }
  .js .jewel:has(.jewel-toggle:focus-visible) { box-shadow: inset 0 0 0 2px var(--gold-hi); }
  .js .jewel-short { display: block; font-size: 0.82rem; line-height: 1.35; color: var(--muted); text-align: center; text-wrap: balance; }
  .js .jewel:not(.open) .jewel-long { display: none; }
  .js .jewel.open .jewel-short { display: none; }
  .jewel p { text-align: left; font-size: 0.86rem; }
}

.ladder { padding: clamp(20px, 3.5vw, 32px); margin-bottom: 26px; }
.ladder-title { font-size: 1.25rem; color: var(--gold-hi); margin-bottom: 18px; text-align: center; letter-spacing: 0.06em; }
.ladder-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ladder-steps li {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 14px 16px 14px 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(227, 191, 110, 0.12);
  overflow: hidden;
}
.ladder-steps li::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--c);
  box-shadow: 0 0 14px var(--c);
}
.ladder-steps .step-bless { --c: #8f86ff; }
.ladder-steps .step-soul { --c: #ffbf3a; }
.ladder-steps .step-chaos { --c: #8fd83f; }
.ladder-range { font: 700 1.5rem/1.1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.ladder-steps strong { font: 600 0.95rem/1.3 var(--display); color: var(--gold-hi); }
.ladder-steps span:last-child { color: var(--muted); font-size: 0.9rem; }
.ladder-note { margin: 16px 0 0; text-align: center; color: var(--muted); font-size: 0.9rem; }

/* Phones: the range on the left, what it takes on the right. */
@media (max-width: 759px) {
  .ladder-steps li { grid-template-columns: 5.4em minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 10px 12px 10px 16px; }
  .ladder-range { grid-row: 1 / span 2; font-size: 1.15rem; }
  .ladder-title { margin-bottom: 12px; }
}
@media (min-width: 760px) {
  .ladder-steps { grid-template-columns: repeat(3, 1fr); }
  .ladder-steps li::before { inset: 0 0 auto 0; width: auto; height: 3px; }
  .ladder-steps li { padding: 18px 18px 16px; text-align: center; }
}

.relics { display: grid; gap: 14px; grid-template-columns: 1fr; }
.relic { padding: 18px; display: grid; grid-template-columns: 84px 1fr; gap: 4px 16px; align-items: center; }
.relic h3 { font-size: 1.12rem; color: var(--gold-hi); align-self: end; }
.relic p { margin: 0; grid-column: 2; color: var(--ink-2); font-size: 0.93rem; }
.relic-art { grid-row: 1 / span 2; }
@media (max-width: 639px) {
  .relic { grid-template-columns: 64px 1fr; gap: 2px 14px; padding: 14px; }
  .relic p { font-size: 0.86rem; }
}

@media (min-width: 640px) {
  .relics { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
  .relics { grid-template-columns: repeat(4, 1fr); }
  .relic { grid-template-columns: 1fr; padding: 24px 20px; align-content: start; }
  .relic-art { grid-row: auto; width: 116px; margin: 0 auto; }
  .relic p { grid-column: auto; max-width: 28ch; margin-inline: auto; }
  .relic h3 { margin: 8px 0 6px; text-align: center; }
}

/* ------------------------------------------------------------------ world */

.towns, .maps { display: grid; gap: 14px; }
.towns { grid-template-columns: 1fr; margin-bottom: 40px; }
.maps { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 680px) {
  .towns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .maps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .maps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
}

.map-card {
  --sky1: #2a1a2e;
  --sky2: #9a4a2a;
  --sun: rgba(255, 200, 120, 0.85);
  --sun-x: 70%;
  --sun-y: 60%;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(26, 20, 26, 0.92), rgba(12, 9, 13, 0.96));
  box-shadow: inset 0 0 0 1px var(--line), 0 20px 40px -28px rgba(0, 0, 0, 0.9);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease;
}
.map-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line-strong), 0 28px 50px -28px rgba(0, 0, 0, 0.95); }

.map-scene {
  position: relative;
  aspect-ratio: 16 / 8;
  color: #0e0a10;
  background:
    radial-gradient(14% 26% at var(--sun-x) var(--sun-y), var(--sun), transparent 100%),
    linear-gradient(180deg, var(--sky1), var(--sky2));
  overflow: hidden;
}
.map-scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* One warm grade over every map, so the cold ones sit in the same world as the paintings;
   the grain comes from .map-scene::before (see .grain). */
.map-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(14, 10, 16, 1) 0%, rgba(14, 10, 16, 0) 30%),
    linear-gradient(180deg, rgba(40, 20, 30, 0.3), rgba(255, 120, 60, 0.1)),
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(10, 6, 10, 0.45) 100%);
}
.map-scene::before { opacity: 0.09; }

.map-info { padding: 12px 14px 16px; }
.map-info h4 { font-size: 1.05rem; color: var(--gold-hi); letter-spacing: 0.03em; margin-bottom: 4px; }
.map-info p { margin: 0; font-size: 0.88rem; color: var(--ink-2); line-height: 1.45; }

.map-level {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 4px 10px;
  border-radius: 8px;
  font: 700 1rem/1.2 var(--display);
  color: var(--gold-hi);
  background: rgba(8, 6, 9, 0.72);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.map-level small { font: 600 0.64rem/1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.map-level.home { font: 600 0.66rem/1.3 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-hi); background: rgba(8, 6, 9, 0.6); box-shadow: inset 0 0 0 1px var(--line-strong); }

.town .map-scene { aspect-ratio: 16 / 7; }
/* Phones: each town as a short row, the picture beside the text. */
@media (max-width: 679px) {
  .towns { gap: 10px; margin-bottom: 30px; }
  .town { display: grid; grid-template-columns: 40% minmax(0, 1fr); align-items: center; }
  .town .map-scene { aspect-ratio: auto; height: 100%; min-height: 104px; }
  .town .map-info { padding: 10px 12px; }
  .town .map-info h4 { font-size: 1.05rem; }
  .town .map-info p { font-size: 0.82rem; }
  .town .map-level { top: 6px; right: auto; left: 6px; padding: 2px 6px; font-size: 0.58rem; }
}
.town .map-info h4 { font-size: 1.25rem; }

@media (max-width: 479px) {
  .maps { gap: 10px; }
  .maps .map-info { padding: 10px 10px 12px; }
  .maps .map-info h4 { font-size: 0.95rem; }
  .maps .map-info p { font-size: 0.82rem; }
  .maps .map-level { top: 6px; right: 6px; padding: 3px 7px; font-size: 0.88rem; }
}

[data-map="lorencia"] { --sky1: #2b2340; --sky2: #c9783a; --sun: rgba(255, 210, 140, 0.9); --sun-x: 78%; --sun-y: 70%; }
[data-map="noria"] { --sky1: #12302a; --sky2: #6fae6a; --sun: rgba(230, 255, 190, 0.8); --sun-x: 30%; --sun-y: 40%; }
[data-map="elvenland"] { --sky1: #1a2c3a; --sky2: #8fd1b0; --sun: rgba(220, 255, 240, 0.85); --sun-x: 50%; --sun-y: 30%; }
[data-map="devias"] { --sky1: #1b2a44; --sky2: #9cc0e0; --sun: rgba(240, 250, 255, 0.85); --sun-x: 22%; --sun-y: 32%; }
[data-map="dungeon"] { --sky1: #2a1a14; --sky2: #6a3a1c; --sun: rgba(255, 160, 70, 0.75); --sun-x: 50%; --sun-y: 70%; }
[data-map="losttower"] { --sky1: #160f2a; --sky2: #5a3a8a; --sun: rgba(210, 170, 255, 0.8); --sun-x: 50%; --sun-y: 30%; }
[data-map="atlans"] { --sky1: #062038; --sky2: #1d6f8f; --sun: rgba(160, 230, 255, 0.7); --sun-x: 60%; --sun-y: 10%; }
[data-map="tarkan"] { --sky1: #3a1a10; --sky2: #e0a050; --sun: rgba(255, 230, 160, 0.95); --sun-x: 30%; --sun-y: 40%; }
[data-map="aida"] { --sky1: #1a0f2a; --sky2: #7a3a7a; --sun: rgba(255, 170, 230, 0.7); --sun-x: 80%; --sun-y: 34%; }
[data-map="kanturu"] { --sky1: #1a1a22; --sky2: #6a6a5a; --sun: rgba(140, 240, 255, 0.7); --sun-x: 50%; --sun-y: 56%; }
[data-map="icarus"] { --sky1: #1c3a6a; --sky2: #9fc8f0; --sun: rgba(255, 250, 220, 0.95); --sun-x: 36%; --sun-y: 34%; }
[data-map="karutan"] { --sky1: #3a1410; --sky2: #c0603a; --sun: rgba(255, 200, 140, 0.85); --sun-x: 50%; --sun-y: 46%; }
[data-map="crywolf"] { --sky1: #0d1426; --sky2: #3a4a7a; --sun: rgba(240, 240, 255, 0.95); --sun-x: 50%; --sun-y: 30%; }
[data-map="raklion"] { --sky1: #0f2034; --sky2: #7ab8d8; --sun: rgba(220, 245, 255, 0.85); --sun-x: 70%; --sun-y: 26%; }
[data-map="swamp"] { --sky1: #0c1a16; --sky2: #46785a; --sun: rgba(210, 255, 200, 0.7); --sun-x: 52%; --sun-y: 48%; }

.world-note { margin: 22px auto 0; text-align: center; color: var(--muted); font-size: 0.9rem; max-width: 46em; }
.road-note { margin: -8px 0 16px; color: var(--muted); font-size: 0.9rem; }

/* The road from level 0 to 400: a gold line with a mark at each map's level. */
.road { position: relative; height: 64px; margin: 0 12px 26px; }
.road-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 24px;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi) 55%, var(--ember));
  box-shadow: 0 0 12px rgba(255, 170, 80, 0.4);
}
.road-end {
  position: absolute;
  top: 40px;
  font: 600 0.7rem/1 var(--body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.road-end.start { top: 2px; left: 0; transform: translateX(-12px); }
.road-end.end { right: 0; transform: translateX(30%); }
.road-stop {
  position: absolute;
  top: 25px;
  left: calc(var(--at) * 100%);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  color: inherit;
  text-decoration: none;
}
.road-stop::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  background: #120e13;
  box-shadow: inset 0 0 0 2px var(--gold), 0 0 10px rgba(255, 170, 80, 0.5);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.road-stop:is(:hover, :focus-visible)::before { transform: rotate(45deg) scale(1.4); background: var(--gold); }
.road-stop:focus-visible { outline-offset: 0; }
.road-tip {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 9px;
  border-radius: 7px;
  white-space: nowrap;
  font: 600 0.8rem/1.3 var(--body);
  color: var(--ink);
  background: #0b080c;
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 8px 18px -8px #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.road-tip b { color: var(--gold-hi); font-family: var(--display); }
.road-stop:is(:hover, :focus-visible) .road-tip { opacity: 1; }
.road-stop:first-of-type .road-tip { left: 0; transform: none; }
.road-stop:last-of-type .road-tip { left: auto; right: 0; transform: none; }
.road-label {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  font: 700 0.78rem/1 var(--display);
  color: var(--gold-hi);
  pointer-events: none;
}
.road-label.quiet { display: none; }
/* On touch screens the stops are no links (site.js): only a picture of the road. */
span.road-stop { pointer-events: none; }
@media (max-width: 699px) {
  .road { margin-inline: 6px; }
  .road-stop { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
  .road-stop::before { width: 8px; height: 8px; }
  .road-label.minor { display: none; }
}

/* ------------------------------------------------------------------ rankings */

.rankings-body { display: grid; gap: 22px; }
.loading-line { text-align: center; color: var(--muted); }

.counts { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 10px; max-width: calc(var(--n, 3) * 280px); width: 100%; margin: 0 auto; }
.count {
  padding: 14px 10px;
  border-radius: 12px;
  text-align: center;
  background: rgba(14, 10, 15, 0.7);
  box-shadow: inset 0 0 0 1px var(--line);
}
.count b {
  display: block;
  font: 700 clamp(1.4rem, 1.1rem + 1.6vw, 2.3rem)/1.1 var(--display);
  color: var(--gold-hi);
  font-variant-numeric: tabular-nums;
}
.count span { font: 600 0.74rem/1.4 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

.podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
  list-style: none;
  margin: 46px 0 0;
  padding: 0;
}
/* Gold, silver and bronze: a metal rim and a glow from the top; the winner stands highest. */
.champ {
  --rim: #c07a3e;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 26px 8px 16px;
  border-radius: var(--radius) var(--radius) 10px 10px;
  background:
    radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--rim) 26%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(40, 30, 30, 0.9), rgba(14, 10, 14, 0.96));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rim) 70%, transparent), inset 0 2px 0 color-mix(in srgb, var(--rim) 60%, transparent), 0 -12px 40px -22px var(--rim);
  min-width: 0;
}
.champ img { width: clamp(52px, 12vw, 92px); height: auto; margin-bottom: 8px; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.6)); }
.champ .rank-medal {
  position: absolute;
  top: -20px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font: 700 1.1rem/1 var(--display);
  color: #1d1206;
  background: var(--m);
  box-shadow: 0 0 0 3px #0c090c, 0 0 0 4px var(--rim), 0 0 20px -2px var(--rim);
}
.champ .crown { position: absolute; top: -50px; width: 30px; height: 30px; color: #f3cf74; filter: drop-shadow(0 0 10px rgba(255, 200, 90, 0.7)); }
.champ-name { display: block; font: 700 clamp(0.92rem, 0.82rem + 0.5vw, 1.15rem)/1.25 var(--body); color: var(--ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.champ p { margin: 2px 0 0; font-size: 0.8rem; color: var(--muted); }
.champ .lv { margin-top: 8px; font: 700 1rem/1.25 var(--display); color: var(--gold-hi); }
.champ .lv span { display: block; margin-top: 2px; font: 600 0.7rem/1.4 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.champ.r1 { --rim: #e9bd55; --m: linear-gradient(180deg, #fff2c0, #e2b04a); order: 2; padding-top: 34px; padding-bottom: 56px; }
.champ.r2 { --rim: #b9c2ce; --m: linear-gradient(180deg, #ffffff, #a8b0bc); order: 1; padding-bottom: 32px; }
.champ.r3 { --rim: #c4824a; --m: linear-gradient(180deg, #ffd2a8, #b8723a); order: 3; }
.champ.r1 img { width: clamp(64px, 15vw, 116px); }
@media (max-width: 479px) {
  .champ.r1 { padding-bottom: 40px; }
  .champ.r2 { padding-bottom: 24px; }
}
.tie-note { margin: -8px 0 0; text-align: center; font-size: 0.85rem; color: var(--muted); }

.rank-grid { display: grid; gap: 18px; }
@media (min-width: 900px) {
  .rank-grid { grid-template-columns: 1.4fr 1fr; align-items: start; }
  .rank-grid > .rank-panel:nth-child(2) { position: sticky; top: calc(var(--nav-h) + 20px); }
}

@media (min-width: 900px) {
  .rank-grid.single { grid-template-columns: minmax(0, 1fr); }
  /* Two columns that read top to bottom: 4, 5, 6 ... down the left, then on in the right. */
  .rank-grid.single .rank-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--rows, 1), auto);
    grid-auto-flow: column;
    column-gap: 36px;
  }
  .rank-grid.single .rank-row.col-top { border-top: 0; }
}

.rank-panel { padding: 18px clamp(12px, 2.5vw, 22px) 10px; }
.rank-panel h3 { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; color: var(--gold-hi); margin: 0 4px 10px; }
.rank-panel h3 .icon { color: var(--gold); }

.rank-list { list-style: none; margin: 0; padding: 0; }
.rank-row {
  display: grid;
  grid-template-columns: 30px 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 4px;
  border-top: 1px solid rgba(227, 191, 110, 0.09);
}
.rank-row:first-child { border-top: 0; }
.rank-no { font: 700 0.95rem/1 var(--display); color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.rank-row img, .crest { width: 38px; height: 38px; }
.rank-who { min-width: 0; }
.rank-who strong { display: block; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-who span { display: block; font-size: 0.8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-score { text-align: right; font: 700 0.95rem/1.2 var(--display); color: var(--gold-hi); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rank-score small { display: block; font: 500 0.74rem/1.3 var(--body); color: var(--muted); }

.crest {
  --h: 30;
  display: grid;
  place-items: center;
  font: 700 1rem/1 var(--display);
  color: #fff6dc;
  background: linear-gradient(160deg, hsl(var(--h) 70% 46%), hsl(var(--h) 60% 22%));
  clip-path: polygon(50% 0, 100% 14%, 96% 60%, 50% 100%, 4% 60%, 0 14%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.updated { margin: 0; text-align: center; font-size: 0.85rem; color: var(--muted); }

/* ------------------------------------------------------------------ join */

.stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  list-style: none;
  max-width: 760px;
  margin: 0 auto 28px;
  padding: 0;
  counter-reset: step;
}
.stepper li { position: relative; }
.stepper li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 22px;
  left: calc(50% + 30px);
  right: calc(-50% + 30px);
  height: 1px;
  background: linear-gradient(90deg, var(--gold), rgba(227, 191, 110, 0.2));
}
.stepper a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  text-align: center;
  text-decoration: none;
  color: var(--ink-2);
  font: 600 0.88rem/1.25 var(--display);
}
.stepper a:hover { color: var(--gold-hi); }
/* On phones the cards' titles carry the numbers. */
@media (max-width: 699px) {
  .stepper { display: none; }
}
.stepper b, .step-title b {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font: 700 1.1rem/1 var(--display);
  color: #1d1206;
  background: linear-gradient(180deg, #fff0c4, #c2913a);
  box-shadow: 0 0 0 3px #0c090c, 0 0 0 4px var(--gold-lo), 0 0 22px -4px rgba(255, 150, 50, 0.8);
}

.join-grid { display: grid; gap: 18px; align-items: start; }
.join-side { display: grid; gap: 18px; }
@media (min-width: 980px) {
  .join-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; }
  .join-side { gap: 24px; }
}
@media (min-width: 980px) and (min-height: 860px) {
  .join-grid > #register { position: sticky; top: calc(var(--nav-h) + 20px); }
}

.step-card { padding: clamp(20px, 3.5vw, 32px); }
.step-title { display: flex; align-items: center; gap: 14px; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); color: var(--gold-hi); margin-bottom: 20px; }
.step-title b { width: 38px; height: 38px; font-size: 1rem; flex: none; }

/* Form */
.field { margin-bottom: 14px; }
label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.optional { font-weight: 400; color: var(--muted); }

input {
  width: 100%;
  min-height: 48px;
  font: inherit;
  font-size: 1rem;
  padding: 11px 14px;
  border: 1px solid rgba(227, 191, 110, 0.24);
  border-radius: 10px;
  background: rgba(6, 4, 7, 0.75);
  color: var(--ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:hover { border-color: rgba(227, 191, 110, 0.4); }
input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(227, 191, 110, 0.25); }
input:focus-visible { outline: none; }
input[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(255, 120, 100, 0.15); }

.input-wrap { position: relative; }
.input-wrap input { padding-right: 52px; }
.reveal-pass {
  position: absolute;
  top: 2px;
  right: 2px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.reveal-pass:hover { color: var(--gold-hi); }
.reveal-pass .icon { width: 20px; height: 20px; }
.reveal-pass .icon-hide, .reveal-pass[aria-pressed="true"] .icon-show { display: none; }
.reveal-pass[aria-pressed="true"] .icon-hide { display: block; }

.hint { margin: 5px 0 0; font-size: 0.86rem; color: var(--muted); min-height: 1.2em; }
.hint:empty { min-height: 0; margin: 0; }
.hint.error { color: var(--bad); }

.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.message { margin: 14px 0 0; min-height: 1.4em; font-weight: 600; }

/* After the sign-up: the account and the next step, in place of the form. */
.signup-done { display: grid; justify-items: center; gap: 6px; padding: 8px 0 4px; text-align: center; }
.signup-done:focus { outline: none; }
.done-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 6px;
  border-radius: 50%;
  color: #0d1a10;
  background: linear-gradient(180deg, #b8f7c6, #3fbf68);
  box-shadow: 0 0 0 4px #0c090c, 0 0 0 5px rgba(120, 230, 150, 0.6), 0 0 30px -4px rgba(80, 230, 120, 0.7);
}
.done-icon .icon { width: 34px; height: 34px; }
.done-label { margin: 0; font: 600 0.74rem/1.4 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ok); }
.done-name { margin: 0; }
.done-name code { display: inline-block; padding: 6px 16px; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); border-radius: 10px; }
.done-text { margin: 4px 0 14px; color: var(--ink-2); }
.signup-done .btn { padding-inline: 1em; font-size: clamp(0.92rem, 0.86rem + 0.4vw, 1.05rem); white-space: nowrap; }
.link-btn {
  min-height: 44px;
  margin-top: 6px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--gold);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link-btn:hover { color: var(--gold-hi); }
.message.success { color: var(--ok); }
.message.error { color: var(--bad); }

/* Downloads */
.downloads { display: grid; gap: 12px; margin-bottom: 12px; }
.download {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 4px 14px;
  align-items: center;
  min-height: 72px;
  padding: 14px 16px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(50, 36, 24, 0.55), rgba(20, 14, 14, 0.75));
  box-shadow: inset 0 0 0 1px var(--line-strong);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.download:hover { color: var(--ink); transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--gold), 0 16px 30px -18px rgba(255, 140, 50, 0.7); }
.download .device { grid-row: 1 / span 2; width: 52px; height: 52px; color: var(--gold-hi); }
.download .platform { font: 700 1.15rem/1.2 var(--display); color: var(--gold-hi); }
.download .detail { grid-column: 2; font-size: 0.86rem; color: var(--muted); }
.download .get {
  grid-row: 1 / span 2;
  grid-column: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #1d1206;
  background: linear-gradient(180deg, #fff0c4, #c2913a);
  box-shadow: 0 6px 18px -6px rgba(255, 140, 50, 0.8);
}
.download .get .icon { width: 22px; height: 22px; }
.download.primary { background: linear-gradient(180deg, rgba(90, 60, 24, 0.6), rgba(30, 18, 12, 0.8)); box-shadow: inset 0 0 0 1px var(--gold), 0 14px 30px -20px rgba(255, 140, 50, 0.8); }
.for-you {
  display: inline-block;
  white-space: nowrap;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  vertical-align: 2px;
  font: 700 0.66rem/1.4 var(--body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1d1206;
  background: var(--gold);
}
.device-note {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--ink);
  background: rgba(227, 191, 110, 0.08);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.muted { color: var(--muted); margin: 0; }

/* How to play: on Windows, and on Android or a Mac. The way for this device comes first. */
.play-ways { display: grid; gap: 12px; margin-bottom: 14px; }
.play-way { border-radius: 12px; background: rgba(227, 191, 110, 0.05); box-shadow: inset 0 0 0 1px var(--line); }
.play-way summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 8px 16px;
  cursor: pointer;
  list-style: none;
}
.play-way summary::-webkit-details-marker { display: none; }
.play-way summary h4 { font-size: 1.02rem; color: var(--gold-hi); letter-spacing: 0.04em; }
.play-way summary .icon { color: var(--gold); transition: transform 0.2s ease; }
.play-way[open] summary .icon { transform: rotate(180deg); }
.play-way summary:focus-visible { outline-offset: -2px; border-radius: 12px; }

.how { margin: 0; padding: 4px 16px 6px; list-style: none; counter-reset: how; }
.how li {
  position: relative;
  padding: 0 0 14px 44px;
  counter-increment: how;
  color: var(--ink-2);
}
.how li::before {
  content: counter(how);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font: 700 0.9rem/1 var(--display);
  color: var(--gold-hi);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  background: rgba(227, 191, 110, 0.08);
}
.how li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 34px;
  bottom: 4px;
  width: 1px;
  background: linear-gradient(180deg, var(--line-strong), transparent);
}
.how strong { color: var(--ink); }
.address-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 4px; }
.copy-btn { min-height: 40px; }
.server-address { font-size: 0.9rem; }

/* ------------------------------------------------------------------ footer */

.footer {
  position: relative;
  padding: 48px 0 calc(40px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, #0d0a0e, #070507);
}
.footer-inner { display: grid; gap: 18px; justify-items: center; text-align: center; }
.footer .brand { margin: 0; max-width: 100%; }
.footer .brand-name { white-space: normal; text-align: left; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 18px; list-style: none; margin: 0; padding: 0; }
.footer-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 4px; color: var(--ink-2); text-decoration: none; font: 600 0.88rem/1 var(--display); letter-spacing: 0.08em; }
.footer-links a:hover { color: var(--gold-hi); }
.fineprint { max-width: 46em; margin: 0; font-size: 0.84rem; color: var(--muted); }

/* ------------------------------------------------------------------ names */

/* Names players type: no ligatures or contextual alternates (Inter draws "1x1" as "1×1"),
   and where the font has them, an l with a tail and an I with serifs. Last in the file,
   because the font shorthand above resets these. */
.name, input, code, .message, .rank-who, .champ-name {
  font-variant-ligatures: none;
  font-feature-settings: "calt" 0, "liga" 0, "cv05" 1, "cv08" 1;
}

/* ------------------------------------------------------------------ motion off */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
  .hero.in-view :is(.layer, .hero-content) { will-change: auto; }
}