/* ==========================================================
   Level UP Fly – base stylesheet
   Hero only for now: background + centred logo.
   ========================================================== */

:root {
  --yellow: #ffd21f;      /* accent, taken from the old logo */
  --ink:    #12162b;      /* deep navy text/outline colour   */
  --deep:   #031137;      /* section navy / shadow colour    */
  --sky:    #5ba5fa;      /* fallback behind the background  */
  --night:  #060e23;      /* top/bottom colour of About.png  */
  --orange:       #ff9a1f;  /* text accents, button fills, navbar hover */
  --orange-light: #ffc46b;  /* highlight of the metallic sweep          */
  --orange-deep:  #c85f06;  /* readable orange on white                 */
}

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

html { height: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--sky);
  color: #fff;
  font-family: system-ui, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

/* <picture> only carries the WebP source; the <img> stays the layout box
   (without this the wrapper would become an extra grid/flex item) */
picture { display: contents; }

/* ...but display:contents lifts <source> into that grid/flex too, and the HTML
   spec never gives it display:none, so browsers lay it out as a block. It then
   claims its own grid row (or a gap in a flex column) and shoves the real
   content off centre — this is what pushed the hero logo down. It renders
   nothing either way; the <picture> source selection is a DOM algorithm and
   does not care about CSS display. */
source { display: none; }

/* ---------- navbar ----------
   Two floating stickers instead of a bar: a white brush plate holding the links
   (same SVG slices as the CTA buttons) and an orange Register button beside it.
   Nothing spans the full width, so the artwork stays visible.               */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 18px;
  background: var(--night);
  color: var(--orange);
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  letter-spacing: .08em;
  text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; }

.navbar {
  position: fixed;
  top: clamp(12px, 2.2vh, 26px);
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.2vw, 16px);
  padding: 0 12px;
  /* the bar itself must not swallow clicks meant for the artwork */
  pointer-events: none;
}
.navbar > * { pointer-events: auto; }

/* the white brush plate */
.nav-plate {
  --h: 62px;
  --cap: calc(var(--h) * 1.445);
  display: inline-flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 26px);
  height: var(--h);
  padding: 0 calc(var(--cap) * .52);
  background:
    url("btn-left.svg")  left  center / var(--cap) 100% no-repeat,
    url("btn-mid.svg")   center       / calc(100% - var(--cap) * 2 + 2px) 100% no-repeat,
    url("btn-right.svg") right center / var(--cap) 100% no-repeat;
  filter: drop-shadow(0 8px 20px rgba(3, 17, 55, .45));
}

.nav-plate a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding-top: .12em;               /* Bebas sits high — optical centre */
  color: var(--ink);
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  font-size: clamp(17px, 1.5vw, 21px);
  letter-spacing: .08em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s;
}

/* orange bar marks the section that is currently in view */
.nav-plate a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--orange-deep), var(--orange) 50%, var(--orange-deep));
  transform: scaleX(0);
  transition: transform .25s ease;
}

/* Hover is the word turning orange and nothing else — no pill, no ring, no
   underline. The underline below is the "you are here" marker, not a hover. */
.nav-plate a:hover,
.nav-plate a:focus-visible,
.nav-plate a[aria-current] { color: var(--orange-deep); }

/* matches both: "true" from the scroll-spy and the static "page" that marks
   the ranking page in its own navbar */
.nav-plate a[aria-current]::after { transform: scaleX(1); }

.nav-plate a:focus-visible {
  outline: 2px solid var(--orange-deep);
  outline-offset: 5px;
  border-radius: 3px;
}

.nav-plate__sep {
  width: 2px;
  height: 1.1em;
  border-radius: 1px;
  background: rgba(18, 22, 43, .22);
}

.nav-plate__icon {
  width: 1.05em;
  height: 1.05em;
  margin-top: -.14em;
}

/* compact button next to the plate (double class: .btn-hex is defined later) */
.btn-hex.btn-hex--sm {
  --h: 62px;
  min-width: 0;
  padding: 0 34px;
  font-size: clamp(17px, 1.5vw, 21px);
  filter: drop-shadow(0 8px 20px rgba(3, 17, 55, .45));
}

/* the navbar Register button wears the orange fill already at rest */
.btn-hex.btn-hex--orange::after { opacity: 1; }
.btn-hex.btn-hex--orange:hover,
.btn-hex.btn-hex--orange:focus-visible { filter:
    drop-shadow(0 12px 22px rgba(3, 17, 55, .45))
    drop-shadow(0 0 20px rgba(255, 154, 31, .55))
    brightness(1.08); }

@media (max-width: 560px) {
  .nav-plate {
    --h: 52px;
    gap: 10px;
    padding: 0 calc(var(--cap) * .45);
  }
  .nav-plate a { font-size: 16px; }
  .btn-hex.btn-hex--sm { --h: 52px; padding: 0 26px; font-size: 16px; }
}

/* The plate cannot wrap inside itself, so with five entries it runs off a
   320px screen. Keep plate and Register on the same --h (they must match). */
@media (max-width: 400px) {
  .nav-plate {
    --h: 48px;
    gap: 7px;
    padding: 0 calc(var(--cap) * .40);
  }
  .nav-plate a { font-size: 15px; }
  .nav-plate a { gap: .28em; }
  .nav-plate__sep { height: 1em; }
  .btn-hex.btn-hex--sm { --h: 48px; padding: 0 22px; font-size: 15px; }
}

/* anchors must not hide behind the floating navbar */
[id] { scroll-margin-top: 100px; }

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

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(24px, 6vw, 80px);
}

/* full-bleed background image */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  pointer-events: none;
}

/* soft fade at the bottom of the hero into the night section below */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 22%;
  background: linear-gradient(to bottom, rgba(6, 14, 35, 0), var(--night));
  pointer-events: none;
}

/* logo + buttons stacked in the centre */
.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 5vh, 56px);
}

/* centred logo with a light, soft shadow */
.hero__logo {
  display: block;
  width: min(72vw, 900px);
  height: auto;
  filter:
    drop-shadow(0 2px 6px rgba(3, 17, 55, .42))     /* tight halo, separates the letters from the sky */
    drop-shadow(0 8px 18px rgba(3, 17, 55, .38))    /* close, soft */
    drop-shadow(0 18px 40px rgba(3, 17, 55, .38));  /* wide, soft  */
  user-select: none;
  -webkit-user-drag: none;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__logo {
    will-change: transform;
    /* fade/slide in once, then float forever (float starts after the entrance) */
    animation:
      logo-in    .9s cubic-bezier(.2, .7, .2, 1) both,
      logo-float 5.5s ease-in-out .9s infinite;
  }
  @keyframes logo-in {
    from { opacity: 0; transform: translateY(16px) scale(.97); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes logo-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
  }
}

@media (max-width: 600px) {
  .hero__logo { width: min(88vw, 520px); }
}

/* ---------- hex buttons (modelled on the Ubisoft "Jetzt kaufen" CTA) ----------
   Three SVG slices: left cap / stretchable middle / right cap holding the
   brush-stroke fill (frame lines switched off, see tools/make-btn-svg.py).
   ::before paints the hover gradient through that shape (mask), ::after paints
   the white version on top and gets wiped away diagonally on hover.           */

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

.btn-hex {
  --h: 69px;
  --cap: calc(var(--h) * 1.445);                 /* 100 / 69.2 -> cap width follows height */
  --fill-hover: linear-gradient(90deg, var(--orange), var(--yellow));
  --shape:
    url("btn-left.svg")  left  center / var(--cap) 100% no-repeat,
    url("btn-mid.svg")   center       / calc(100% - var(--cap) * 2 + 2px) 100% no-repeat,
    url("btn-right.svg") right center / var(--cap) 100% no-repeat;

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* the class is used on <a> and on <button>, so drop the native button chrome */
  -webkit-appearance: none;
          appearance: none;
  background: transparent;
  border: 0;
  min-width: 285px;
  height: var(--h);
  padding: 0 46px;
  color: var(--ink);
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  font-size: 25px;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  filter: drop-shadow(0 8px 18px rgba(3, 17, 55, .35));
  transition: transform .2s ease, filter .28s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn-hex > span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .42em;
  padding-top: .1em;                /* Bebas sits high — optical centre */
}

.btn-hex__icon {
  flex: none;
  width: 1.05em;
  height: 1.05em;
  margin-top: -.12em;               /* undo the Bebas offset for the icon */
}

.btn-hex::before,
.btn-hex::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* white sticker — masked exactly like the colour layer, otherwise its
   anti-aliased edge peeks out as a pale fringe around the fill */
.btn-hex::before {
  background: #fff;
  -webkit-mask: var(--shape);
          mask: var(--shape);
}

/* colour layer on top, fades in on hover — no wipe, just a calm cross-fade */
.btn-hex::after {
  background: var(--fill-hover);
  -webkit-mask: var(--shape);
          mask: var(--shape);
  opacity: 0;
  transition: opacity .28s ease;
}

.btn-hex:hover::after,
.btn-hex:focus-visible::after { opacity: 1; }

/* the button itself lifts a little and its shadow deepens */
.btn-hex:hover,
.btn-hex:focus-visible {
  transform: translateY(-2px);
  filter:
    drop-shadow(0 12px 22px rgba(3, 17, 55, .45))
    drop-shadow(0 0 18px rgba(255, 196, 107, .38));
}

.btn-hex:active { transform: translateY(0); }

/* the class sets display, which would otherwise beat the browser's
   [hidden] { display: none } — without this the "Older news" button
   stays visible even when app.js hides it */
.btn-hex[hidden] { display: none; }


.btn-hex:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 6px;
}

@media (max-width: 600px) {
  .btn-hex {
    --h: 56px;
    min-width: 220px;
    padding: 0 36px;
    font-size: 21px;
  }
  .cta-row { gap: 14px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-hex,
  .btn-hex::after { transition: none; }
  .btn-hex:hover,
  .btn-hex:focus-visible { transform: none; }
}

/* ---------- About section ---------- */

.about {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(72px, 12vh, 140px) clamp(20px, 6vw, 80px);
  background: var(--night);
  color: #fff;
}

.about__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  pointer-events: none;
}

/* soft shade behind the text so it stays readable over the village */
.about::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 48% 62% at 50% 50%,
              rgba(6, 14, 35, .72), rgba(6, 14, 35, .38) 60%, rgba(6, 14, 35, 0) 100%);
  pointer-events: none;
}

/* the artwork's last rows are nearly --night but not quite; a short fade
   hides the edge where the picture stops and the DX11 block begins */
.about::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(6, 14, 35, 0), var(--night));
  pointer-events: none;
}

.about__inner {
  max-width: 720px;
  text-align: center;
}

.section-title {
  margin: 0 0 .4em;
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  font-weight: 400;
  font-size: clamp(56px, 8vw, 104px);
  line-height: .95;
  letter-spacing: .04em;
  text-shadow: 0 6px 24px rgba(0, 0, 0, .55);
}


.about__inner p {
  margin: 0 0 1.1em;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.7;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}

.about__inner a {
  color: var(--orange);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
  transition: color .2s;
}
.about__inner a:hover { color: var(--orange-light); }

/* the Discord word in the copy is replaced by its logo, sized to the text */
.about__inner .discord-inline {
  display: inline-flex;
  align-items: center;
  vertical-align: -.22em;
  padding: 0 .12em;
  border: 0;
  text-decoration: none;
  transition: transform .2s ease, color .2s ease, filter .2s ease;
}
.about__inner .discord-inline svg {
  width: 1.5em;
  height: 1.5em;
}
.about__inner .discord-inline:hover,
.about__inner .discord-inline:focus-visible {
  transform: translateY(-2px);
  color: var(--orange-light);
  filter: drop-shadow(0 3px 8px rgba(255, 154, 31, .5));
}
.about__inner .discord-inline:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

.nowrap { white-space: nowrap; }

/* Ornamental divider (user asset, white line art like the logo).
   The artwork fills the canvas edge to edge but only 69% of its height, so it
   carries a fair bit of transparent padding — the margins below are trimmed to
   account for that, and it runs wider than the old arrow to hold its own next
   to the section title. */
.divider {
  display: block;
  width: min(560px, 84%);
  height: auto;
  margin: 0 auto 16px;
  opacity: .9;
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, .55));
  user-select: none;
  pointer-events: none;
}

.divider--flip {
  width: min(440px, 70%);
  margin: 22px auto 12px;
  transform: rotate(180deg);
  opacity: .75;
}

/* ---------- rates ---------- */

.rates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 2vw, 28px);
  margin: 30px auto 34px;
  padding: 0;
  max-width: 620px;
  list-style: none;
}

.rate {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
}

/* hairline between the three columns */
.rate + .rate::before {
  content: "";
  position: absolute;
  left: calc(clamp(8px, 2vw, 28px) / -2);
  top: 14%;
  bottom: 14%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .22), transparent);
}

.rate__icon {
  width: clamp(58px, 9vw, 96px);
  height: auto;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .6));
  transition: transform .3s cubic-bezier(.2, .8, .3, 1.1), filter .3s ease;
}

/* faint glow behind the icon so it sits in the night scene */
.rate::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  width: clamp(80px, 12vw, 130px);
  height: clamp(80px, 12vw, 130px);
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 154, 31, .2), rgba(255, 154, 31, 0) 68%);
  pointer-events: none;
  z-index: -1;
}

.rate:hover .rate__icon {
  transform: translateY(-4px) scale(1.04);
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .65)) drop-shadow(0 0 14px rgba(255, 196, 107, .5));
}

.rate__value {
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1;
  letter-spacing: .05em;
  color: var(--orange);
  background: linear-gradient(110deg,
      var(--orange-deep) 0%,
      var(--orange) 18%,
      var(--orange-deep) 30%,
      var(--orange) 40%,
      var(--orange-light) 46%,
      #fff3dc 50%,
      var(--orange-light) 54%,
      var(--orange) 60%,
      var(--orange-deep) 72%,
      var(--orange) 86%,
      var(--orange-deep) 100%);
  background-size: 220% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .6));
}

.rate__label {
  font-family: "Nunito", system-ui, sans-serif;
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

@media (prefers-reduced-motion: no-preference) {
  .rate__value { animation: metal-sheen 4.5s ease-in-out infinite alternate; }
  .rate:nth-child(2) .rate__value { animation-delay: .5s; }
  .rate:nth-child(3) .rate__value { animation-delay: 1s; }

  /* the bright band travels across the glyphs */
  @keyframes metal-sheen {
    from { background-position: 100% 0; }
    to   { background-position: 0% 0; }
  }
}

@media (max-width: 420px) {
  .rates { gap: 4px; }
  .rate__label { letter-spacing: .1em; }
}

.about__inner .about__signoff {
  margin-top: 1.6em;
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.1;
  letter-spacing: .06em;
}
.about__signoff strong { font-weight: 400; }

/* the DirectX mention in the About copy */
.about__inner .hl {
  color: var(--orange);
  font-weight: 700;
}

/* ---------- DX11 showcase ----------
   Between About and News, on its own artwork: dx11-bg.png (user-supplied,
   1672x941, night sky with floating islands framing an empty centre). The
   picture starts dark teal and ends in bright clouds, so both edges are faded
   into --night to meet About above and the News gradient below.
   A bento grid: one text tile, two looping clips and a screenshot. The clips
   are raw in-game captures, so each video box is zoomed a little (--zoom /
   --shift) to keep the HUD outside the visible frame.                        */

.dx {
  position: relative;
  isolation: isolate;
  padding: clamp(64px, 10vh, 120px) clamp(18px, 5vw, 60px) clamp(90px, 13vh, 150px);
  background: var(--night);
  color: #fff;
}

.dx__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  pointer-events: none;
}

/* night at both edges of the artwork */
.dx::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(to bottom,
              var(--night) 0%, rgba(6, 14, 35, 0) 12%,
              rgba(6, 14, 35, 0) 62%, rgba(6, 14, 35, .6) 86%, var(--night) 100%);
  pointer-events: none;
}

/* a faint warm glow behind the grid */
.dx::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 46% 40% at 50% 34%, rgba(255, 154, 31, .09), rgba(255, 154, 31, 0) 100%);
  pointer-events: none;
}

.dx__inner {
  max-width: 1120px;
  margin: 0 auto;
  /* the query container for the grid below: an element cannot measure itself,
     so cqw inside .bento resolves against this box (otherwise it silently
     falls back to the viewport and the rows come out far too tall) */
  container-type: inline-size;
}

.dx__head {
  max-width: 720px;
  margin: 0 auto 32px;
  text-align: center;
}

.dx__eyebrow {
  margin: 0 0 10px;
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  font-size: clamp(15px, 1.2vw, 18px);
  letter-spacing: .26em;
  color: var(--orange);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}

.dx__title {
  margin: 0 0 14px;
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  font-weight: 400;
  font-size: clamp(46px, 5.8vw, 74px);
  line-height: .95;
  letter-spacing: .04em;
  text-shadow: 0 6px 24px rgba(0, 0, 0, .55);
}

.dx__lead {
  margin: 0;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.65;
  color: rgba(255, 255, 255, .82);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}

/* ----- the grid -----
   Six columns; the clips take four, the text tile and the screenshot two.
   The row height is derived from the clip width (16:9 of four columns) so a
   row never depends on the intrinsic size of an absolutely positioned video;
   minmax lets it grow if the text tile ever needs more room.                 */

.bento {
  --gap: clamp(12px, 1.6vw, 18px);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(300px, auto);
  grid-auto-rows: minmax(calc(((100cqw - 5 * var(--gap)) * 4 / 6 + 3 * var(--gap)) * 9 / 16), auto);
  gap: var(--gap);
}

.bento__tile {
  position: relative;
  margin: 0;                       /* <figure> reset */
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(14, 26, 58, .72), rgba(6, 14, 35, .84));
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .10),
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 24px 50px rgba(0, 0, 0, .35);
  --zoom: 1;
  --shift: 0, 0;
  --hover: 1;
}

.bento__tile--intro   { grid-column: 1 / 3; grid-row: 1; }
.bento__tile--water   { grid-column: 3 / 7; grid-row: 1; }
.bento__tile--shadows { grid-column: 1 / 5; grid-row: 2; }
.bento__tile--lights  { grid-column: 5 / 7; grid-row: 2; }

/* ----- text tile ----- */

.bento__tile--intro {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.4vw, 30px);
}

/* big DX11 mark, same metallic orange as the rate values */
.bento__mark {
  margin: -.06em 0 auto;
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  font-size: clamp(60px, 5.6vw, 82px);
  line-height: .9;
  letter-spacing: .02em;
  color: var(--orange);
  background: linear-gradient(110deg,
      var(--orange-deep) 0%,
      var(--orange) 18%,
      var(--orange-deep) 30%,
      var(--orange) 40%,
      var(--orange-light) 46%,
      #fff3dc 50%,
      var(--orange-light) 54%,
      var(--orange) 60%,
      var(--orange-deep) 72%,
      var(--orange) 86%,
      var(--orange-deep) 100%);
  background-size: 220% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .6));
}

@media (prefers-reduced-motion: no-preference) {
  .bento__mark { animation: metal-sheen 4.5s ease-in-out infinite alternate; animation-delay: 1.5s; }
}

.bento__title {
  margin: 0 0 8px;
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  font-weight: 400;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1;
  letter-spacing: .03em;
}

.bento__tile--intro .bento__title { margin-top: 18px; }

.bento__text {
  margin: 0;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: clamp(13.5px, 1vw, 15px);
  line-height: 1.6;
  color: rgba(255, 255, 255, .84);
}

.bento__note {
  margin: 14px 0 0;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 12.5px;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .5);
}

/* ----- media tiles -----
   .bento__media is the picture box: it fills the tile on wide screens and
   becomes a 16:9 block above the caption on phones, where an overlaid
   caption would hide most of a small clip.                                   */

.bento__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.bento__video,
.bento__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(calc(var(--zoom) * var(--hover))) translate(var(--shift));
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
  user-select: none;
  pointer-events: none;
}

/* the captures still carry the game HUD along the edges; the zoom keeps the
   hotbar, orbs and minimap outside the tile (the poster gets the same crop) */
.bento__tile--water   { --zoom: 1.36; --shift: -12%, 0; }   /* pushes the chat panel out on the left */
.bento__tile--shadows { --zoom: 1.28; --shift: 0, 4%; }
.bento__tile--lights .bento__img { object-position: 56% 45%; }

.bento__tile--media:hover { --hover: 1.035; }

.bento__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 72px 22px 20px;
  background: linear-gradient(to top,
              rgba(6, 14, 35, .94) 0%, rgba(6, 14, 35, .74) 42%, rgba(6, 14, 35, 0) 100%);
}

/* the water clip has its subject at the bottom of the frame, so its caption
   sits along the top edge (over sky and roofs) and the button moves down */
.bento__caption--top {
  top: 0;
  bottom: auto;
  padding: 20px 22px 72px;
  background: linear-gradient(to bottom,
              rgba(6, 14, 35, .94) 0%, rgba(6, 14, 35, .74) 42%, rgba(6, 14, 35, 0) 100%);
}
.bento__tile--water .bento__play { top: auto; bottom: 14px; }

.bento__tile--media .bento__text { max-width: 48ch; }

.bento__tag {
  display: block;
  margin-bottom: 6px;
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .24em;
  color: var(--orange);
}

/* play / pause, revealed by app.js (without it the clips do not run at all) */
.bento__play {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(6, 14, 35, .58);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease, background .2s ease;
}
.bento__play[hidden] { display: none; }        /* the grid display above would beat the UA rule */

.bento__tile:hover .bento__play,
.bento__play:focus-visible,
.bento__play[data-state="paused"] { opacity: 1; }
.bento__play:hover { background: rgba(200, 95, 6, .88); }
.bento__play:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.bento__play-icon { width: 18px; height: 18px; }
.bento__play[data-state="playing"] .bento__play-icon--play  { display: none; }
.bento__play[data-state="paused"]  .bento__play-icon--pause { display: none; }

@media (hover: none) {
  .bento__play { opacity: 1; }                 /* nothing to hover on touch screens */
}

@media (prefers-reduced-motion: reduce) {
  .bento__video, .bento__img { transition: none; }
  .bento__tile--media:hover { --hover: 1; }
}

/* ----- party tile: full width, screenshot beside the text ----- */

.bento__tile--party {
  grid-column: 1 / 7;
  grid-row: 3;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}

.bento__tile--party .bento__media {
  position: relative;
  inset: auto;
}

.bento__tile--party .bento__img { object-position: 50% 0; }   /* keep the title bar and tabs */
.bento__tile--party:hover { --hover: 1.03; }

.bento__tile--party .bento__caption {
  position: static;
  padding: clamp(22px, 2.6vw, 34px);
  background: none;
}

.bento__tile--party .bento__text { max-width: 60ch; }

.bento__list {
  display: grid;
  gap: 9px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.bento__list li {
  position: relative;
  padding-left: 18px;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: clamp(13px, .95vw, 14.5px);
  line-height: 1.5;
  color: rgba(255, 255, 255, .8);
}

/* short orange dash as the bullet */
.bento__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--orange-deep), var(--orange));
}

.bento__list strong {
  color: #fff;
  font-weight: 700;
}

/* ----- tablet: two columns, text and screenshot side by side, clips full width ----- */
@media (max-width: 880px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(calc((50cqw - var(--gap) / 2) * 3 / 4), auto);
  }
  .bento__tile--intro   { grid-column: 1 / 2; grid-row: 1; }
  .bento__tile--lights  { grid-column: 2 / 3; grid-row: 1; align-self: stretch; }
  .bento__tile--water   { grid-column: 1 / 3; grid-row: 2; aspect-ratio: 16 / 9; }
  .bento__tile--shadows { grid-column: 1 / 3; grid-row: 3; aspect-ratio: 16 / 9; }
  .bento__tile--party   { grid-column: 1 / 3; grid-row: 4; grid-template-columns: minmax(0, 1fr); }
  .bento__tile--party .bento__media { aspect-ratio: 830 / 692; }
  .bento__tile { border-radius: 18px; }
}

/* ----- phone: one column, caption under the picture instead of over it ----- */
@media (max-width: 560px) {
  .bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .bento__tile--intro   { grid-column: 1; grid-row: 1; }
  .bento__tile--water   { grid-column: 1; grid-row: 2; aspect-ratio: auto; }
  .bento__tile--shadows { grid-column: 1; grid-row: 3; aspect-ratio: auto; }
  .bento__tile--lights  { grid-column: 1; grid-row: 4; align-self: auto; }
  .bento__tile--party   { grid-column: 1; grid-row: 5; }
  .bento__tile--party .bento__caption { padding: 16px 18px 20px; }
  .bento__media { position: relative; aspect-ratio: 16 / 9; }
  .bento__tile--lights .bento__media { aspect-ratio: 4 / 3; }
  .bento__caption {
    position: static;
    padding: 14px 18px 18px;
    background: none;
  }
  .bento__tile--intro .bento__title { margin-top: 14px; }
}

/* ---------- news ----------
   Bright daytime artwork behind white cards; the seam to the dark About
   section is a gradient, the same trick the hero uses.                     */

.news {
  position: relative;
  isolation: isolate;
  padding: clamp(80px, 12vh, 150px) clamp(18px, 5vw, 60px) clamp(90px, 14vh, 160px);
  background: var(--night);
  color: #fff;
}

.news__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  pointer-events: none;
}

/* dark seams top and bottom so the heading and the section edges stay calm */
.news::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, var(--night) 0%, rgba(6, 14, 35, .45) 16%, rgba(6, 14, 35, .12) 34%,
                    rgba(6, 14, 35, .12) 66%, rgba(6, 14, 35, .55) 88%, var(--night) 100%);
  pointer-events: none;
}

.news__inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.news__intro {
  margin: 0 0 34px;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: clamp(15px, 1.2vw, 17px);
  color: rgba(255, 255, 255, .88);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .65);
}

.news__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(16px, 2vw, 26px);
  text-align: left;
}

.news__empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 30px 0;
  font-family: "Nunito", system-ui, sans-serif;
  color: rgba(255, 255, 255, .8);
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}

/* ----- one card ----- */

/* the card is a brush patch: card-brush.svg as a 9-slice border-image, so the
   ragged edge keeps its shape at any card size (tools/make-card-svg.py).
   The shadow has to be a filter — box-shadow would trace the rectangle.       */
.news-card {
  display: flex;
  flex-direction: column;
  padding: 0 2px 2px;
  border: 26px solid transparent;
  border-image-source: url("card-brush.svg");
  border-image-slice: 30 fill;
  border-image-repeat: round;
  color: var(--ink);
  filter: drop-shadow(0 14px 26px rgba(3, 17, 55, .42));
  transition: transform .22s ease, filter .22s ease;
}

.news-card:hover {
  transform: translateY(-4px);
  filter: drop-shadow(0 20px 34px rgba(3, 17, 55, .5));
}

.news-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.news-card__type {
  padding: .34em .7em .22em;
  border-radius: 5px;
  background: var(--ink);
  color: #fff;
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  font-size: 14px;
  letter-spacing: .1em;
  line-height: 1;
}
.news-card--patch .news-card__type { background: linear-gradient(90deg, var(--orange-deep), var(--orange)); }
.news-card--event .news-card__type { background: linear-gradient(90deg, #1b4dc8, #3f86ff); }

.news-card__date {
  margin-left: auto;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 12.5px;
  color: rgba(18, 22, 43, .55);
  white-space: nowrap;
}

.news-card__title {
  margin: 0 0 10px;
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  font-weight: 400;
  font-size: clamp(24px, 2.2vw, 30px);
  letter-spacing: .03em;
  line-height: 1.05;
}

.news-card__version {
  display: block;
  margin-top: 2px;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--orange-deep);
}

.news-card__text {
  margin: 0;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(18, 22, 43, .82);
}
.news-card__text + .news-card__text { margin-top: .8em; }

/* thin orange rule, always pinned to the bottom of the card */
.news-card__text:last-of-type { margin-bottom: 16px; }

.news-card::after {
  content: "";
  height: 3px;
  margin-top: auto;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--orange-deep), var(--orange) 45%, transparent);
}

.btn-hex.news__more { margin-top: 34px; }

/* ---------- register modal ----------
   Two panels: a lit artwork column with the logo and the selling points, and
   the form itself. Same orange / night language as the navbar.              */

.reg {
  width: min(94vw, 760px);
  max-height: 92svh;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: #fff;
  overflow: visible;
}

.reg::backdrop {
  background: rgba(3, 10, 28, .74);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

@media (prefers-reduced-motion: no-preference) {
  .reg[open] { animation: reg-in .26s cubic-bezier(.2, .8, .3, 1.05) both; }
  @keyframes reg-in {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to   { opacity: 1; transform: none; }
  }
}

.reg__card {
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 18px;
  background: linear-gradient(180deg, #0d1b3d, var(--night));
  box-shadow:
    0 0 0 3px rgba(255, 154, 31, .55),
    0 0 60px rgba(255, 154, 31, .12),
    0 34px 70px rgba(0, 0, 0, .6);
  /* the card, not the dialog, carries the cap: .reg keeps overflow visible so
     the orange glow is not clipped, while the form scrolls on short viewports
     (phone in landscape) instead of running out of the dialog unreachably */
  max-height: 92svh;
  overflow: auto;
  overscroll-behavior: contain;
}

/* ----- artwork column ----- */

.reg__art {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  min-height: 146px;
  padding: 22px 24px;
  overflow: hidden;
}

.reg__art-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 28% 42%;   /* the lit village sits on the left of the artwork */
}

/* darkens the art and blends it into the card */
.reg__art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(6, 14, 35, .22), rgba(6, 14, 35, .8)),
    linear-gradient(90deg, rgba(6, 14, 35, 0), rgba(13, 27, 61, .55));
}

.reg__art-logo,
.reg__art-claim,
.reg__art-list { position: relative; z-index: 2; }

.reg__art-logo {
  width: min(210px, 70%);
  margin: 0 auto;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .6));
}

.reg__art-claim {
  margin: 0;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  color: rgba(255, 255, 255, .78);
}

.reg__art-list {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reg__art-list li {
  position: relative;
  padding-left: 22px;
  margin-top: 9px;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, .8);
}

/* small orange check in front of every point */
.reg__art-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .35em;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(-45deg);
}

/* ----- form column ----- */

.reg__body {
  position: relative;
  padding: 28px clamp(20px, 4vw, 32px) 24px;
}

.reg__title {
  margin: 0 0 .2em;
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 5vw, 40px);
  letter-spacing: .05em;
  line-height: 1;
}

/* short orange rule under the heading */
.reg__title::after {
  content: "";
  display: block;
  width: 54px;
  height: 4px;
  margin-top: 10px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--orange-deep), var(--orange) 60%, transparent);
}

.reg__lead {
  margin: 14px 0 20px;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .68);
}

.reg__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, .55);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: color .2s, background .2s;
}
.reg__close:hover,
.reg__close:focus-visible {
  color: var(--orange);
  background: rgba(255, 154, 31, .14);
}

.reg__field { margin-bottom: 15px; }

.reg__field label {
  display: block;
  margin-bottom: 6px;
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  font-size: 18px;
  letter-spacing: .07em;
  color: var(--orange);
}

/* input shell carries the icon, the field and the eye button */
.reg__input {
  position: relative;
  display: flex;
  align-items: center;
  border: 2px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.reg__input:focus-within {
  border-color: var(--orange);
  background: rgba(255, 255, 255, .1);
  box-shadow: 0 0 0 4px rgba(255, 154, 31, .16);
}
.reg__input:has(input[aria-invalid="true"]) { border-color: #ff6b5e; }

.reg__icon {
  flex: none;
  width: 19px;
  height: 19px;
  margin: 0 2px 0 12px;
  color: rgba(255, 255, 255, .45);
  transition: color .2s;
}
.reg__input:focus-within .reg__icon { color: var(--orange); }

.reg__input input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 15.5px;
}
.reg__input input:focus { outline: none; }
.reg__input input::placeholder { color: rgba(255, 255, 255, .28); }

.reg__peek {
  flex: none;
  width: 40px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, .45);
  cursor: pointer;
  transition: color .2s;
}
.reg__peek svg { width: 19px; height: 19px; }
.reg__peek:hover,
.reg__peek:focus-visible,
.reg__peek[aria-pressed="true"] { color: var(--orange); }

.reg__field small {
  display: block;
  margin-top: 6px;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, .45);
}

/* password strength bar, filled from app.js */
.reg__meter {
  height: 4px;
  margin-top: 8px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
}
.reg__meter span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--orange-deep), var(--orange));
  transition: width .25s ease, background .25s ease;
}
.reg__meter[data-level="3"] span { background: linear-gradient(90deg, var(--orange), #8fe07a); }

.reg__msg {
  margin: 0 0 14px;
  padding: 11px 14px;
  border-radius: 9px;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
}
.reg__msg--error {
  border: 1px solid rgba(255, 107, 94, .5);
  background: rgba(255, 107, 94, .14);
  color: #ffc9c3;
}
.reg__msg--ok {
  border: 1px solid rgba(120, 220, 150, .5);
  background: rgba(120, 220, 150, .14);
  color: #c6f2d4;
}

.reg__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}

.btn-hex.reg__submit { flex: 1; }
.btn-hex.reg__submit[disabled] { opacity: .6; pointer-events: none; }

.reg__cancel {
  flex: none;
  padding: 8px 4px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .55);
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  font-size: 18px;
  letter-spacing: .07em;
  cursor: pointer;
  transition: color .2s;
}
.reg__cancel:hover,
.reg__cancel:focus-visible { color: #fff; }

.reg__foot {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, .55);
}
.reg__foot a {
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 154, 31, .45);
}
.reg__foot a:hover { color: #fff; border-color: #fff; }

/* side by side once there is room */
@media (min-width: 720px) {
  .reg__card { grid-template-columns: 258px 1fr; }
  .reg__art { min-height: 100%; padding: 30px 24px; }
  .reg__art-logo { width: 100%; margin-bottom: 4px; }
  .reg__art-list { display: block; margin-top: 6px; }
  .reg__art::after {
    background:
      linear-gradient(180deg, rgba(6, 14, 35, .18), rgba(6, 14, 35, .62)),
      linear-gradient(90deg, rgba(6, 14, 35, 0), rgba(13, 27, 61, .78));
  }
}

@media (max-width: 420px) {
  .reg__actions { flex-direction: column; align-items: stretch; }
  /* flex: 1 would eat the height in a column, so pin the button back */
  .btn-hex.reg__submit { flex: none; width: 100%; }
  .reg__art { min-height: 118px; }
}

/* ---------- ranking page ----------
   Short artwork banner, then a quiet dark table. A ladder is read, not
   admired, so the artwork stops where the data starts.                     */

/* The artwork runs behind everything down to the list — banner, tabs, summary
   and podium — and only then fades into the night the table sits on. */
.rank-stage {
  position: relative;
  isolation: isolate;
  background: var(--night);
  /* the scrim behind the tabs reaches past the block on purpose; clip, not
     hidden, so the stage does not turn into a scroll container */
  overflow-x: clip;
}

.rank-stage__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  user-select: none;
  pointer-events: none;
}

/* The fade sits in the last stretch of the stage, so the picture stays clear
   behind the podium and is fully night by the time the list starts. */
.rank-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom,
              rgba(6, 14, 35, .2) 0%, rgba(6, 14, 35, .05) 18%,
              rgba(6, 14, 35, .18) 55%, rgba(6, 14, 35, .58) 86%, var(--night) 100%);
  pointer-events: none;
}

.rank-stage__lead {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 clamp(14px, 5vw, 60px) clamp(26px, 4.5vh, 48px);
}

/* Tabs, search, class bar and summary sit on bright sky — a soft scrim keeps
   them readable without dulling the whole picture the way a full overlay
   would. It is a pseudo-element larger than the block and fades to nothing at
   its own edges (closest-side), so it never shows a hard rectangle however
   tall the block gets. */
.rank-stage__head {
  position: relative;
  z-index: 0;
}

.rank-stage__head::before {
  content: "";
  position: absolute;
  inset: -70px -14% -34px;
  z-index: -1;
  background: radial-gradient(ellipse closest-side at 50% 50%,
              rgba(6, 14, 35, .66), rgba(6, 14, 35, .42) 55%, rgba(6, 14, 35, 0) 100%);
  pointer-events: none;
}

.rank-hero {
  min-height: clamp(280px, 40svh, 400px);
  display: grid;
  place-items: end center;
  padding: clamp(90px, 14vh, 140px) clamp(20px, 6vw, 60px) clamp(26px, 5vh, 46px);
}

.rank-hero__inner { text-align: center; }
.rank-hero__inner .divider { margin-bottom: 0; }

.rank {
  padding: clamp(24px, 4vh, 40px) clamp(14px, 5vw, 60px) clamp(70px, 11vh, 120px);
  background: var(--night);
}

.rank__inner {
  max-width: 980px;
  margin: 0 auto;
}

/* ----- tabs ----- */

.rank__tabs {
  display: flex;
  justify-content: center;
  gap: clamp(6px, 2vw, 18px);
  margin-bottom: 14px;
}

.rank__tab {
  position: relative;
  padding: 10px 22px 12px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .78);
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: .08em;
  line-height: 1;
  white-space: nowrap;           /* "This Week" must not break onto two lines */
  cursor: pointer;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
  transition: color .2s;
}

/* three tabs at 320-390px: less air around each label */
@media (max-width: 460px) {
  .rank__tab { padding: 10px 12px 12px; }
  .rank__tab::after { left: 8px; right: 8px; }
}

.rank__tab::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--orange-deep), var(--orange) 50%, var(--orange-deep));
  transform: scaleX(0);
  transition: transform .25s ease;
}

.rank__tab:hover,
.rank__tab:focus-visible { color: #fff; }
.rank__tab[aria-selected="true"] { color: var(--orange); }
.rank__tab[aria-selected="true"]::after { transform: scaleX(1); }

.rank__tab:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 6px;
}

.rank__meta {
  margin: 0 0 22px;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .82);
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .75);
}
.rank__meta--warn { color: var(--orange-light); }

.rank__panel:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 6px;
  border-radius: 12px;
}

/* a narrow screen scrolls the table sideways instead of squeezing the page.
   The panel keeps the list from floating on flat dark nothing.             */
.rank__scroller {
  overflow-x: auto;
  padding: 8px clamp(8px, 1.6vw, 18px) 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .022);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

.rank__empty {
  margin: 0;
  padding: 46px 16px;
  font-family: "Nunito", system-ui, sans-serif;
  color: rgba(255, 255, 255, .55);
  text-align: center;
}

/* ----- podium -----
   The top three leave the table and become brush stickers, the same white
   patch the news cards use (card-brush.svg as a 9-slice border-image). That
   is the one element on this page that speaks the site's own language, and it
   gives the ladder the focal point a plain table never had.                */

.rank-podium {
  display: grid;
  grid-template-columns: 1fr 1.12fr 1fr;
  align-items: end;
  gap: clamp(10px, 1.8vw, 22px);
  max-width: 860px;
  margin: 4px auto 0;
  padding: 0;
  list-style: none;
}

/* DOM order stays 1-2-3 for screen readers; first place sits in the middle */
.rank-podium > :nth-child(1) { order: 2; }
.rank-podium > :nth-child(2) { order: 1; }
.rank-podium > :nth-child(3) { order: 3; }

.podium__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px 6px 10px;
  border: 26px solid transparent;
  border-image-source: url("card-brush.svg");
  border-image-slice: 30 fill;
  border-image-repeat: round;
  color: var(--ink);
  text-align: center;
  /* box-shadow would trace the rectangle, not the torn edge */
  filter: drop-shadow(0 14px 28px rgba(3, 17, 55, .5));
  transition: transform .22s ease, filter .22s ease;
}

.podium:hover .podium__card {
  transform: translateY(-4px);
  filter: drop-shadow(0 20px 36px rgba(3, 17, 55, .58));
}

.podium__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 4px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(18, 22, 43, .3);
  color: var(--ink);
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  font-size: 19px;
  letter-spacing: .04em;
  line-height: 1;
  padding-top: .12em;
}

/* only the winner gets the orange fill */
.podium--1 .podium__badge {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, var(--orange-deep), var(--orange));
  box-shadow: 0 4px 12px rgba(200, 95, 6, .45);
  color: #fff;
  font-size: 23px;
}

/* the class icons are white line art — on a white sticker they have to flip */
.podium__icon {
  width: 62px;
  height: 62px;
  object-fit: contain;
  filter: brightness(0) opacity(.82);
}

.podium__name {
  margin: 8px 0 0;
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  font-size: 25px;
  letter-spacing: .04em;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.podium__sub {
  margin: 1px 0 0;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(18, 22, 43, .5);
}

.podium__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 100%;
  margin: 10px 0 0;
  padding-top: 9px;
  border-top: 2px solid rgba(200, 95, 6, .22);
}

.podium__value {
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  font-size: 36px;
  line-height: 1;
  letter-spacing: .03em;
  color: var(--orange-deep);
}

.podium__label {
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(18, 22, 43, .42);
}

.podium__guild {
  margin: 7px 0 0;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 12px;
  color: rgba(18, 22, 43, .55);
}

/* first place is simply bigger everywhere */
.podium--1 .podium__card { padding-bottom: 14px; }
.podium--1 .podium__icon { width: 78px; height: 78px; }
.podium--1 .podium__name { font-size: 31px; margin-top: 10px; }
.podium--1 .podium__value { font-size: 46px; }

/* Stacked, three tall cards push the actual list a full screen down. Below
   720px the card turns on its side: badge, icon, name/class/guild, level. */
@media (max-width: 720px) {
  .rank-podium {
    grid-template-columns: 1fr;
    max-width: 400px;
    gap: 10px;
    align-items: stretch;
  }
  /* stacked, the natural 1-2-3 order is the readable one */
  .rank-podium > :nth-child(1),
  .rank-podium > :nth-child(2),
  .rank-podium > :nth-child(3) { order: 0; }

  .podium__card,
  .podium--1 .podium__card {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    grid-template-rows: auto auto auto;
    align-items: center;
    column-gap: 12px;
    padding: 6px 8px;
    text-align: left;
  }

  .podium__badge,
  .podium--1 .podium__badge {
    grid-area: 1 / 1 / 4 / 2;
    width: 30px;
    height: 30px;
    margin-bottom: 0;
    font-size: 18px;
  }

  .podium__icon,
  .podium--1 .podium__icon {
    grid-area: 1 / 2 / 4 / 3;
    width: 46px;
    min-width: 46px;          /* at 320px the auto column otherwise squeezes it to a sliver */
    height: 46px;
  }

  .podium__name,
  .podium--1 .podium__name {
    grid-area: 1 / 3 / 2 / 4;
    margin: 0;
    font-size: 23px;
  }

  .podium__sub { grid-area: 2 / 3 / 3 / 4; }
  .podium__guild { grid-area: 3 / 3 / 4 / 4; margin: 1px 0 0; }

  .podium__stat {
    grid-area: 1 / 4 / 4 / 5;
    width: auto;
    margin: 0;
    padding: 2px 4px 2px 12px;
    border-top: 0;
    border-left: 2px solid rgba(200, 95, 6, .22);
  }

  .podium__value,
  .podium--1 .podium__value { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .podium__card { transition: none; }
  .podium:hover .podium__card { transform: none; }
}

/* ----- table ----- */

.rank-table {
  width: 100%;
  /* fixed, or the browser sizes columns by content and drops a 400px hole
     between the class name and the level */
  table-layout: fixed;
  border-collapse: collapse;
  text-align: left;
}

.rank-table th {
  padding: 0 14px 10px;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
  white-space: nowrap;
}

.rank-table td {
  padding: 11px 14px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .03);
  vertical-align: middle;
  transition: background .18s ease;
}

.rank-table tbody tr:hover td { background: rgba(255, 154, 31, .09); }

.rank-table td:first-child { border-radius: 8px 0 0 8px; }
.rank-table td:last-child  { border-radius: 0 8px 8px 0; }

.rank-table__pos {
  width: 7%;
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  font-size: 20px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .42);
  text-align: center;
  white-space: nowrap;
}

/* the podium gets an accent, everything below stays deliberately quiet */
.rank-table__pos.is-top { font-size: 24px; }
.rank-table__pos.is-top-1 { color: var(--orange); }
.rank-table__pos.is-top-2 { color: var(--orange-light); }
.rank-table__pos.is-top-3 { color: rgba(255, 196, 107, .72); }

/* 7 + 32 + 26 + 15 + 20 = 100; anything less and the browser spreads the
   remainder across the columns, which is what opened the hole in the middle.
   The EXP width lives on the .rank-table__exp rule further down — it shares a
   cell with .rank-table__num, which is declared later and would win here. */
.rank-table__name { width: 32%; }

.rank-table__player {
  display: block;
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  font-size: 21px;
  letter-spacing: .04em;
  line-height: 1.1;
  color: #fff;
}

.rank-table__guild {
  display: block;
  margin-top: 2px;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, .42);
}

/* class cell: the user's white silhouette icon next to its name. No pill —
   the icons are bold enough to anchor the column on their own.             */
/* centred: left-aligned it pushed all its slack into one visible hole between
   the name and the icon */
.rank-table__class {
  width: 26%;
  text-align: center;
}

.rank-class {
  display: inline-flex;
  align-items: center;
  gap: .55em;
}

.rank-class__icon {
  flex: none;
  /* 30px, not less: several icons are thin diagonal staves that stop reading
     below that, while the chunky ones (knight, billposter) still fit the row */
  width: 30px;
  height: 30px;
  object-fit: contain;
  opacity: .88;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .55));
  transition: opacity .18s ease, transform .18s ease;
}

.rank-table tbody tr:hover .rank-class__icon {
  opacity: 1;
  transform: scale(1.07);
}

.rank-class__label {
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  white-space: nowrap;
}

.rank-table__num {
  width: 15%;
  text-align: right;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .78);
  white-space: nowrap;
}

.rank-table__level {
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  font-size: 23px;
  letter-spacing: .04em;
  color: var(--orange);
}

/* The guild board has no class column, so the player split would only add up
   to 89% and the browser would spread the missing 11% across the columns —
   the same hole, one tab over. 7 + 33 + 20 + 20 + 20 = 100. */
.rank-table--guilds .rank-table__name { width: 33%; }
.rank-table--guilds .rank-table__num { width: 20%; }
.rank-table--guilds .rank-table__exp { width: 20%; }

/* secondary: it breaks ties, it does not decide the rank */
.rank-table__exp {
  width: 20%;
  font-size: 13px;
  color: rgba(255, 255, 255, .45);
}

@media (max-width: 640px) {
  .rank-table__exp { display: none; }
  .rank-table td { padding: 10px 10px; }
  .rank-table th { padding: 0 10px 10px; }
}

@media (max-width: 460px) {
  .rank-table__class { display: none; }
  .rank-table__player { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .rank__tab::after,
  .rank-class__icon,
  .rank-table td { transition: none; }
  .rank-table tbody tr:hover .rank-class__icon { transform: none; }
}

/* ----- search + class filter (player board only) -----
   They sit on the artwork like the tabs, so they get the same dark glass and
   text shadows the scrim-over-sky lesson asked for.                         */

.rank-tools {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 4px 0 16px;
}
/* author display beats the UA [hidden] rule — same trap as #news-more */
.rank-tools[hidden],
.rank-me[hidden],
.rank-podium[hidden],
.char-card__stats[hidden] { display: none; }

.rank-search {
  width: min(420px, 100%);
  margin: 0;
}

/* visible to screen readers only; the placeholder shows the same words */
.rank-search__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.rank-search__input {
  background: rgba(6, 14, 35, .58);
  border-color: rgba(255, 255, 255, .16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.rank-search__input:focus-within { background: rgba(6, 14, 35, .7); }
.rank-search__input input { height: 42px; }

.rank-classes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 720px;
}

.rank-classes__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: rgba(6, 14, 35, .52);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.rank-classes__btn--all {
  width: auto;
  padding: .12em 15px 0;
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  font-size: 19px;
  letter-spacing: .08em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}

.rank-classes__btn:hover { background: rgba(255, 154, 31, .16); transform: translateY(-1px); }

.rank-classes__btn[aria-pressed="true"] {
  background: rgba(255, 154, 31, .22);
  box-shadow: inset 0 0 0 2px var(--orange), 0 4px 14px rgba(200, 95, 6, .35);
  color: var(--orange);
}

.rank-classes__btn:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.rank-classes__icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  opacity: .78;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .55));
  transition: opacity .18s ease;
}
.rank-classes__btn:hover .rank-classes__icon,
.rank-classes__btn[aria-pressed="true"] .rank-classes__icon { opacity: 1; }

/* ----- "your best character" ----- */

.rank-me {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 2px .55em;
  margin: -12px 0 22px;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .82);
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .75);
}

.rank-me__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}

.rank-me__pos,
.rank-me__name {
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  font-size: 21px;
  letter-spacing: .05em;
  line-height: 1;
}
.rank-me__pos { color: var(--orange); }

.rank-me__name {
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  text-shadow: inherit;
  cursor: pointer;
}
.rank-me__name:hover { color: var(--orange); }
.rank-me__name:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ----- clickable names, "you" marker ----- */

.rank-table tbody tr[data-player],
.podium[data-player] .podium__card { cursor: pointer; }

.rank-table__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px .5em;
  min-width: 0;
}

/* the name is a button for keyboards; it still looks like the plain name */
button.rank-table__player,
.podium__open {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  overflow-wrap: anywhere;
  cursor: pointer;
}
/* the reset above sets font: inherit and outranks .rank-table__player, so the
   table name states its type again */
button.rank-table__player {
  display: inline;
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  font-size: 21px;
  letter-spacing: .04em;
  line-height: 1.1;
  color: #fff;
}

/* orange on the dark table, the deeper orange on the white podium sticker */
.rank-table tbody tr[data-player]:hover button.rank-table__player,
button.rank-table__player:focus-visible { color: var(--orange); }
.podium[data-player]:hover .podium__open,
.podium__open:focus-visible { color: var(--orange-deep); }

button.rank-table__player:focus-visible,
.podium__open:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

.rank-you {
  display: inline-block;
  padding: 3px 7px 2px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--orange-deep), var(--orange));
  color: #fff;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
  text-shadow: none;
  vertical-align: middle;
}
.podium__name .rank-you,
.char-card__name .rank-you { margin-left: .45em; vertical-align: .35em; }

.rank-table tr.is-mine td { background: rgba(255, 154, 31, .08); }
.rank-table tr.is-mine td:first-child { box-shadow: inset 3px 0 0 var(--orange); }

/* ----- weekly board: 7 + 32 + 26 + 17.5 + 17.5 = 100 (see the note above) ----- */

.rank-table--weekly .rank-table__num { width: 17.5%; }

.rank-table__span {
  font-size: 13px;
  color: rgba(255, 255, 255, .55);
}

/* ----- profile card ----- */

.reg.char-modal { width: min(94vw, 480px); }

/* .reg__card turns into the register dialog's two-column grid above 720px;
   the profile is one column at every width */
.reg__card.char-card {
  display: block;
  position: relative;
  padding: 26px clamp(20px, 5vw, 30px) 24px;
}

.char-card__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-right: 34px;         /* keeps a long name clear of the close button */
}

.char-card__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: 20px;
  background: radial-gradient(circle, rgba(255, 154, 31, .24), rgba(255, 154, 31, .04) 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 154, 31, .3);
}

.char-card__img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .55));
}

.char-card__who { min-width: 0; }

.char-card__class {
  margin: 0;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange-light);
}

.char-card__name {
  margin: 3px 0 0;
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  font-weight: 400;
  font-size: clamp(32px, 7vw, 42px);
  letter-spacing: .04em;
  line-height: 1;
  overflow-wrap: anywhere;
}

.char-card__guild {
  margin: 5px 0 0;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
}

.char-card__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 22px 0 0;
}

.char-card__stat {
  padding: 11px 14px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}

.char-card__stat dt {
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}

.char-card__stat dd {
  margin: 4px 0 0;
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  font-size: 23px;
  letter-spacing: .03em;
  line-height: 1.05;
  color: #fff;
}
.char-card__stat.is-accent dd { color: var(--orange); }

.char-card__msg {
  margin: 24px 0 6px;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, .65);
  text-align: center;
}

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

@media (max-width: 460px) {
  .rank-classes__btn { width: 40px; height: 40px; border-radius: 11px; }
  .rank-classes__btn--all { width: auto; }
  .rank-classes__icon { width: 25px; height: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  .rank-classes__btn,
  .rank-classes__icon { transition: none; }
  .rank-classes__btn:hover { transform: none; }
}

/* ---------- account page ----------
   Reuses the .reg__* field styling from the dialogs for the password form, so
   the inputs look the same everywhere. Only the page frame is new.        */

.acc-stage {
  position: relative;
  isolation: isolate;
  background: var(--night);
}

.acc-stage__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  user-select: none;
  pointer-events: none;
}

.acc-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom,
              rgba(6, 14, 35, .35) 0%, rgba(6, 14, 35, .2) 30%,
              rgba(6, 14, 35, .62) 78%, var(--night) 100%);
  pointer-events: none;
}

.acc-hero {
  min-height: clamp(260px, 34svh, 360px);
  display: grid;
  place-items: end center;
  padding: clamp(90px, 14vh, 140px) clamp(20px, 6vw, 60px) clamp(20px, 4vh, 36px);
}

.acc-hero__inner { text-align: center; }
.acc-hero__inner .divider { margin-bottom: 10px; }

.acc-hero__who {
  margin: 0;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, .82);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .75);
}

.acc {
  padding: clamp(30px, 5vh, 52px) clamp(14px, 5vw, 60px) clamp(70px, 11vh, 120px);
  background: var(--night);
}

.acc__inner {
  display: grid;
  gap: clamp(34px, 6vh, 60px);
  max-width: 980px;
  margin: 0 auto;
}

.acc-block--narrow { max-width: 460px; }

.acc-block__title {
  margin: 0 0 6px;
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 34px);
  letter-spacing: .05em;
  color: #fff;
}

.acc-block__hint {
  margin: 0 0 20px;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .55);
}
.acc-block__hint strong { color: rgba(255, 255, 255, .8); }

.acc-empty {
  margin: 0;
  padding: 34px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .022);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  font-family: "Nunito", system-ui, sans-serif;
  color: rgba(255, 255, 255, .55);
  text-align: center;
}

/* ----- character cards ----- */

.acc-chars {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}

.acc-char {
  padding: 16px 18px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  transition: background .2s ease, box-shadow .2s ease;
}

.acc-char:hover {
  background: rgba(255, 154, 31, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 154, 31, .22);
}

.acc-char__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.acc-char__icon {
  flex: none;
  width: 46px;
  height: 46px;
  object-fit: contain;
  opacity: .9;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .55));
}

.acc-char__name {
  margin: 0;
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  font-size: 24px;
  letter-spacing: .04em;
  line-height: 1.05;
  color: #fff;
  overflow-wrap: anywhere;
}

.acc-char__job {
  margin: 2px 0 0;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--orange);
}

.acc-char__fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 13px;
}

.acc-char__fact-label {
  color: rgba(255, 255, 255, .45);
  white-space: nowrap;
}

.acc-char__fact-value {
  color: rgba(255, 255, 255, .85);
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: anywhere;
}

/* ----- password form ----- */

.acc-form {
  padding: 20px 20px 22px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}

.acc-form .btn-hex { width: 100%; margin-top: 4px; }
.acc-form .btn-hex[disabled] { opacity: .6; pointer-events: none; }

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