/* ==========================================================================
   silver-polish.css : SilverMU sitewide polish layer (global chrome, materials, section art).
   Printed by includes/header.php AFTER the page's own stylesheet block (its links, or the page bundle the
   home page inlines), never through $pageStyles: the page bundle compares the exact sheet list.

   THE MECHANIC
   One layer, sv-polish, declared after the page layers (sv-inner, sv-account, sv-auth ...). For !important
   declarations those earlier layers WIN ties, so a page sheet can always override this file; every layered
   !important here beats every unlayered !important of the legacy sheets (style.css, citadel.css, silver.css,
   page sheets, inline styles). So every declaration carries !important (except the descriptors of
   @view-transition and the frames of @keyframes, where the flag is not allowed) and selectors stay low.

   HOME (main.sv-home, body[data-sv-sec="home"]) belongs to another team: only the chrome parts reach it
   (header, footer, the .sv-btn family). Mastheads, panels, grain and vignette are kept off it.

   NEVER (fx.js owns these): opacity, transform, transition or animation on section, .white-box, .news-card,
   .class-panel, .kpi, .info-block; nothing on elements a script toggles.

   CONTENTS
    0  Tokens                          5  Card hover (pointer devices, motion allowed)
    1  Masthead art per section        6  Page cross-fade (view transitions)
    2  Panels: one material            7  Buttons: fire face and states
    3  Vignette and film grain         8  Chrome: tap targets, scrollbar, tagline
    4  Type floor (12px)
   Undo: remove the silver-polish.css line in includes/header.php.
   ========================================================================== */
@layer sv-polish {

/* --------------------------------------------------------------------------
   0. Tokens
   -------------------------------------------------------------------------- */
:root {
  --pl-r: 14px !important;                               /* panel radius (legacy panels were 12px) */
  --pl-edge: rgba(206, 214, 230, 0.17) !important;       /* panel frame */
  --pl-ease: cubic-bezier(0.22, 1, 0.36, 1) !important;
  --pl-glow-ember: 0 0 36px -14px rgba(255, 138, 43, 0.55) !important;
  /* 180px film-grain tile (SVG feTurbulence, no network): body::after shows it at 12% */
  --pl-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .85 0 0 0 0 .9 0 0 0 0 1 0 0 0 .55 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") !important;
  /* Panel face: cool top light, top sheen, lifted navy (the Codex face plus the light) */
  --pl-face:
    radial-gradient(90% 40% at 50% 0%, rgba(124, 200, 255, 0.05), transparent 70%),
    linear-gradient(180deg, rgba(226, 233, 246, 0.05) 0, rgba(226, 233, 246, 0) 110px),
    linear-gradient(180deg, rgba(25, 33, 51, 0.95) 0, rgba(17, 24, 38, 0.95) 420px, rgba(14, 20, 32, 0.96) 100%) !important;
  /* Panel shadow: hard ring, lit top edge, shaded bottom edge, contact, ambient */
  --pl-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(238, 242, 248, 0.09),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 24px 48px -28px rgba(0, 0, 0, 0.85) !important;
  /* Masthead art: default = the citadel masthead. x/y = focal point, size = cover or "150% auto" */
  --pl-art: url("/assets/silver/brand/masthead-citadel.webp?v=8") !important;
  --pl-art-sm: url("/assets/silver/brand/masthead-citadel-sm.webp?v=8") !important;
  --pl-art-x: right !important;
  --pl-art-y: 34% !important;
  --pl-art-size: cover !important;
  --pl-art-sm-pos: 100% 0 !important;
  /* ONE fire face for public and account CTAs: the account system's deep band (silver-account.css
     --acct-fire-face). The cream label reads 4.6:1 or better on every row (the old ramp: 2.4-4.1:1). */
  --sv-fire-face: linear-gradient(180deg, #f9944c 0%, #ea652a 16%, #cb451d 33%, #c33c1b 67%, #a4241a 100%) !important;
  --sv-on-fire: #fff9ef !important;
}

/* --------------------------------------------------------------------------
   1. Masthead art per section. Hook: <body data-sv-sec="<section>"> (includes/header.php) or the Codex body
      class. Codex mastheads read it through --svp-art / --svp-art-pos / --svp-art-size (css/silver-inner.css
      section 3); legacy mastheads through the restated stack below.
   -------------------------------------------------------------------------- */
body:is([data-sv-sec="events"], .svp-inner--events, .svp-inner--eventdetail) {
  --pl-art: url("/assets/silver/art/mast-bloodcastle.webp") !important;   /* top 1792x700 of kundun/images/bloodcastle.webp */
  --pl-art-sm: url("/assets/silver/home/slide-events-640.webp") !important;
  --pl-art-y: 12% !important;                                               /* = 6% of the uncropped original */
}
body:is([data-sv-sec="items"], [data-sv-sec="itemhunt"], [data-sv-sec="rates"], .svp-inner--items) {
  --pl-art: url("/assets/silver/home/slide-events.webp") !important;
  --pl-art-sm: url("/assets/silver/home/slide-events-640.webp") !important;
}
body:is([data-sv-sec="ranking"], [data-sv-sec="character"], [data-sv-sec="guilds"], [data-sv-sec="icewind-ranking"], [data-sv-sec="guild-battle-ranking"]) {
  --pl-art: url("/assets/silver/brand/citadel-ice.webp") !important;
  --pl-art-sm: url("/assets/silver/home/slide-siege-640.webp") !important;
  --pl-art-y: 56% !important;
}
body[data-sv-sec="ranking"] .ranking-masthead {
  --pl-art-y: 66% !important;                                               /* the 105px strip shows the lit portal */
}
body[data-sv-sec="news"] {
  --pl-art: url("/images/bg-3.webp") !important;
  --pl-art-sm: url("/assets/silver/home/slide-season-640.webp") !important;
  --pl-art-y: 38% !important;
}
body:is([data-sv-sec="media"], [data-sv-sec="vote-rewards"]) {
  --pl-art: url("/assets/bg-download.webp") !important;
  --pl-art-sm: url("/assets/silver/home/slide-download-640.webp") !important;
  --pl-art-y: 4% !important;
}
body[data-sv-sec="classes"] {
  --pl-art: url("/assets/bg-classes.webp") !important;
  --pl-art-sm: url("/assets/silver/home/slide-classes-640.webp") !important;
  --pl-art-y: 14% !important;
}
body:is([data-sv-sec="skills"], .svp-inner--skills) {
  --pl-art: url("/assets/bg-classes.webp") !important;
  --pl-art-sm: url("/assets/silver/home/slide-classes-640.webp") !important;
  --pl-art-x: 86% !important;
  --pl-art-y: 20% !important;
  --pl-art-size: 150% auto !important;
}
body[data-sv-sec="guides"] {
  --pl-art: url("/assets/bg-classes.webp") !important;
  --pl-art-sm: url("/assets/silver/home/slide-classes-640.webp") !important;
  --pl-art-x: 20% !important;
  --pl-art-y: 22% !important;
  --pl-art-size: 150% auto !important;
}
body:is([data-sv-sec="maps"], .svp-inner--maps) {
  --pl-art: url("/images/media/silvermu-crystal-cavern.webp") !important;
  --pl-art-sm: url("/images/media/silvermu-crystal-cavern-thumb.webp") !important;
  --pl-art-y: 38% !important;
  --pl-art-size: 130% auto !important;
}
body.svp-inner--npcs {
  --pl-art: url("/images/media/silvermu-cathedral-hall.webp") !important;
  --pl-art-sm: url("/images/media/silvermu-cathedral-hall-thumb.webp") !important;
  --pl-art-x: center !important;
  --pl-art-y: 30% !important;
}
/* /servers, /community, the account area and the 63 guide bands keep the citadel art (the default) */

/* Each masthead composes its own art position from the focal point (one element, nothing inherited per frame) */
:where(.page-header-box, .ranking-heading-card) {
  --pl-pos: var(--pl-art-x) var(--pl-art-y) !important;
  --svp-art: var(--pl-art) !important;
  --svp-art-sm: var(--pl-art-sm) !important;
  --svp-art-pos: var(--pl-pos) !important;
  --svp-art-size: var(--pl-art-size) !important;
}

/* Legacy mastheads (pages without the Codex body class): silver.css's stack restated with the Codex scrim,
   the art from the tokens */
html[data-brand="silvermu"][data-site-template="citadel"] body:not(.svp-inner) :is(.page-header-box, .ranking-heading-card) {
  background-image:
    var(--sv-corner), var(--sv-corner-tr), var(--sv-corner-bl), var(--sv-corner-br),
    linear-gradient(90deg, rgba(5, 7, 13, 0.96) 0%, rgba(5, 7, 13, 0.9) 32%, rgba(5, 7, 13, 0.62) 50%, rgba(5, 7, 13, 0.32) 68%, rgba(5, 7, 13, 0.2) 100%),
    linear-gradient(180deg, rgba(5, 7, 13, 0.34) 0%, rgba(5, 7, 13, 0) 40%, rgba(5, 7, 13, 0.6) 100%),
    radial-gradient(26% 70% at 88% 122%, rgba(255, 122, 47, 0.16), transparent 70%),
    var(--pl-art) !important;
  background-position: left 8px top 8px, right 8px top 8px, left 8px bottom 8px, right 8px bottom 8px, 0 0, 0 0, 0 0, var(--pl-pos) !important;
  background-size: 24px 24px, 24px 24px, 24px 24px, 24px 24px, auto, auto, auto, var(--pl-art-size) !important;
  background-repeat: no-repeat !important;
}
/* Phones: the art is a band above the copy (silver.css 11.2), now per section */
@media (max-width: 760px) {
  html[data-brand="silvermu"][data-site-template="citadel"] body:not(.svp-inner) :is(.page-header-box, .ranking-heading-card) {
    background-image:
      var(--sv-corner), var(--sv-corner-tr), var(--sv-corner-bl), var(--sv-corner-br),
      linear-gradient(180deg, rgba(5, 7, 13, 0.3) 0, rgba(5, 7, 13, 0) 34px, rgba(5, 7, 13, 0) calc(var(--sv-mast-band) - 60px), rgba(8, 11, 19, 0.97) calc(var(--sv-mast-band) + 2px)),
      radial-gradient(60% 46% at 100% 100%, rgba(255, 122, 47, 0.12), transparent 70%),
      linear-gradient(180deg, #080b13, #070a11),
      var(--pl-art-sm) !important;
    background-size: 24px 24px, 24px 24px, 24px 24px, 24px 24px, 100% 100%, 100% 100%, 100% 100%, max(100%, calc(var(--sv-mast-band) * 4.52)) auto !important;
    background-position: left 8px top 8px, right 8px top 8px, left 8px bottom 8px, right 8px bottom 8px, 0 0, 0 0, 0 calc(var(--sv-mast-band) - 2px), var(--pl-art-sm-pos) !important;
  }
}
/* Legacy masthead copy: Codex geometry (desktop and tablet; phones keep the band layout) and the Codex kicker
   (an ember-diamond label, not a pill) */
@media (min-width: 761px) {
  html[data-brand="silvermu"][data-site-template="citadel"] body:not(.svp-inner) .page-header-box:not(.ranking-masthead) {
    min-height: 208px !important;
    padding: 34px 32px !important;
    border-color: rgba(214, 222, 236, 0.32) !important;
  }
}
@media (min-width: 761px) and (max-width: 1099px) {
  html[data-brand="silvermu"][data-site-template="citadel"] body:not(.svp-inner) .page-header-box:not(.ranking-masthead) {
    min-height: 196px !important;
    padding: 30px 24px !important;
  }
}
html[data-brand="silvermu"][data-site-template="citadel"] body:not(.svp-inner) .page-header-box .page-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: #ffc98a !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85) !important;
}
html[data-brand="silvermu"][data-site-template="citadel"] body:not(.svp-inner) .page-header-box .page-kicker::before {
  content: "" !important;
  flex: none !important;
  width: 7px !important;
  height: 7px !important;
  background: #ff8a2b !important;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) !important;
}

/* --------------------------------------------------------------------------
   2. Panels: one material. Codex pages take it through their tokens (sv-inner keeps every other tie);
      legacy panels are restated. Not the masthead, the 63 guide panels or the amber warning box.
   -------------------------------------------------------------------------- */
body.svp-inner {
  --svp-face: var(--pl-face) !important;
  --svp-shadow: var(--pl-shadow) !important;
}
html[data-brand="silvermu"][data-site-template="citadel"] main:not(.sv-home) :is(.white-box, .sv-panel):not(.page-header-box):not(.guide-article):not(.warning-box) {
  border-radius: var(--pl-r) !important;
  border-color: var(--pl-edge) !important;
  background: var(--pl-face) !important;
  box-shadow: var(--pl-shadow) !important;
}

/* --------------------------------------------------------------------------
   3. Vignette (::before) and film grain (::after): fixed, under the header (z 1000), never interactive.
      Every property is set: citadel.css draws a hairline texture on body::before (silver.css switched it off).
      Off on the home page, on phones (fill-rate), in print and in forced colours.
   -------------------------------------------------------------------------- */
body:not([data-sv-sec="home"])::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 989 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  background: radial-gradient(135% 115% at 50% 40%, transparent 60%, rgba(2, 4, 9, 0.34) 100%) !important;
}
body:not([data-sv-sec="home"])::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 990 !important;
  pointer-events: none !important;
  opacity: 0.12 !important;
  background: var(--pl-grain) 0 0 / 180px 180px !important;
}
@media print, (forced-colors: active), (max-width: 760px) {
  body:not([data-sv-sec="home"])::before,
  body:not([data-sv-sec="home"])::after {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   4. Type floor: nothing under 12px (labels people act on: 13px). Codex rules (sv-inner) keep winning.
   -------------------------------------------------------------------------- */
:is(.sv-brand__season, .sv-footer__kicker, .page-kicker, .sv-badge, .guides-featured-kicker, .hero-kicker, .rates-toc-count, .rates-legend-label, .sv-comm-soon__note, .ih-chip, .rift-trust li) {
  font-size: 12px !important;
}
:is(.guides-featured-open, .community-action) {
  font-size: 13px !important;
}
.rift-hero__kicker {
  font-size: max(12px, clamp(0.7rem, 0.6vw, 0.82rem)) !important;
}
/* Table header labels: /rates printed 11px (desktop) and 9px (phones, silver-data.css); data/rt-1, art/type-1.
   Codex and account tables set their own sizes in earlier layers and keep winning. */
main :where(table) th {
  font-size: 12px !important;
}
/* The wider caps keep their width: the tracking comes down as the size goes up */
.sv-brand__season {
  letter-spacing: 0.3em !important;
}
.sv-footer__kicker {
  letter-spacing: 0.24em !important;
}
.sv-badge {
  letter-spacing: 0.12em !important;
}
@media (max-width: 1199px) {
  .sv-brand__season {
    letter-spacing: 0.22em !important;
  }
}

/* --------------------------------------------------------------------------
   5. Card hover (pointer devices, motion allowed): cards fx.js does not reveal or tilt
   -------------------------------------------------------------------------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :is(.class-card, .guides-featured-card, .community-card) {
    transition: transform 0.24s var(--pl-ease), border-color 0.24s ease, box-shadow 0.24s ease !important;
  }
  :is(.class-card, .guides-featured-card, .community-card):hover {
    transform: translateY(-4px) !important;
    border-color: rgba(255, 178, 90, 0.42) !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 22px 40px -20px rgba(0, 0, 0, 0.9), var(--pl-glow-ember) !important;
  }
  .class-card__media {
    overflow: hidden !important;
  }
  .class-card__media img {
    transition: transform 0.6s var(--pl-ease), filter 0.3s ease !important;
  }
  .class-card:hover .class-card__media img {
    transform: scale(1.05) !important;
    filter: saturate(1.1) brightness(1.06) !important;
  }
}

/* --------------------------------------------------------------------------
   6. Page cross-fade: cross-document view transitions (Chromium 126+, Safari 18.2+; others ignore it).
      The header is captured on its own, so it holds still while the page fades.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 160ms !important;
    animation-timing-function: var(--pl-ease) !important;
  }
  .sv-header {
    view-transition-name: sv-header !important;
  }
}

/* --------------------------------------------------------------------------
   7. Buttons. The fire face (the label reaches 4.5:1), then the states: hover and keyboard focus keep the
      skin's lift, glow and sheen (no brightness lift on the fire face), pressed sinks, disabled goes quiet,
      [aria-busy="true"] shows a spinner. The home page's own .sv-home-btn is not touched.
   -------------------------------------------------------------------------- */
/* .sv-btn--fire, and the legacy fire family silver.css paints with the old ramp (it leaves every .sv-btn alone) */
:where(.sv-btn--fire),
:where(.button, .buy-gp-btn, button[type="submit"], .main-register-btn, .realm-chip.active, .guides-featured-card--primary .guides-featured-open):not(.sv-home-btn, .btn--ghost, .sv-btn, .sv-burger) {
  background: var(--sv-fire-face) !important;
  color: var(--sv-on-fire) !important;
}
/* Chips at most 40px tall (current page, step numbers): the numeral fills them, so the deep band, flat (5.0:1) */
:where(.pagination, .pagination-list) :where(.active, .current, [aria-current="page"]),
#windows-smartscreen .ss-step-badge {
  background: #c33c1b !important;
  color: var(--sv-on-fire) !important;
}
:where(.sv-btn--fire):is(:hover, :focus-visible):not(:active),
:where(.button, .buy-gp-btn, button[type="submit"], .main-register-btn):not(.sv-home-btn, .btn--ghost, .sv-btn, .sv-burger):is(:hover, :focus-visible):not(:active) {
  filter: saturate(1.05) !important;
}
/* A <button class="sv-btn"> renders like a.sv-btn: citadel's button[type=submit] rule would give it its own
   border, radius, crimson fill, flat shadow and 42px / 800 / .035em */
:where(button.sv-btn[type="submit"]) {
  min-height: 46px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
}
:where(button.sv-btn--sm[type="submit"]) {
  min-height: 38px !important;
  letter-spacing: 0.14em !important;
}
:where(button.sv-btn--lg[type="submit"]) {
  min-height: 56px !important;
}
:where(button.sv-btn--fire[type="submit"]) {
  border-color: rgba(255, 210, 122, 0.7) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 205, 0.7),
    inset 0 -2px 0 rgba(96, 18, 6, 0.6),
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 10px 26px -8px rgba(255, 90, 30, 0.6),
    0 0 26px -10px rgba(255, 138, 43, 0.75) !important;
}
:where(button.sv-btn--fire[type="submit"]):is(:hover, :focus-visible) {
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 205, 0.8),
    inset 0 -2px 0 rgba(96, 18, 6, 0.6),
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 14px 32px -8px rgba(255, 90, 30, 0.75),
    0 0 40px -6px rgba(255, 138, 43, 0.75) !important;
}
:where(button.sv-btn--steel[type="submit"]) {
  border-color: rgba(214, 222, 236, 0.42) !important;
  background: var(--sv-steel) !important;
  color: var(--sv-silver-100) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -2px 0 rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 10px 22px -10px rgba(0, 0, 0, 0.8) !important;
}
:where(button.sv-btn--steel[type="submit"]):is(:hover, :focus-visible) {
  border-color: rgba(124, 200, 255, 0.7) !important;
  background: var(--sv-steel-hover) !important;
}
/* Pressed: sinks 1px into an inner shadow, a shade darker (hover had lifted it and lit it) */
:is(.sv-btn, button.button):active:not([disabled], [aria-disabled="true"], [aria-busy="true"]) {
  transform: translateY(1px) !important;
  filter: brightness(0.9) saturate(1.05) !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.6) !important;
  transition-duration: 60ms !important;
}
/* Disabled: no lift, no glow, no sheen */
:is(.sv-btn, button.button):is([disabled], [aria-disabled="true"]) {
  transform: none !important;
  filter: grayscale(0.7) brightness(0.7) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.55) !important;
  cursor: not-allowed !important;
}
:is(.sv-btn, button.button):is([disabled], [aria-disabled="true"])::after {
  display: none !important;
}
/* Busy (a script sets aria-busy="true" on the button while a request runs): the label gives way to a ring */
:is(.sv-btn, button.button)[aria-busy="true"] {
  position: relative !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  cursor: progress !important;
}
:is(.sv-btn, button.button)[aria-busy="true"]::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 18px !important;
  height: 18px !important;
  margin: auto !important;
  border: 2px solid rgba(255, 249, 239, 0.32) !important;
  border-top-color: #fff9ef !important;
  border-radius: 50% !important;
  animation: pl-spin 0.7s linear infinite !important;
}
@keyframes pl-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.sv-force-motion) :is(.sv-btn, button.button):active {
    transition-duration: 0.01ms !important;
  }
  html:not(.sv-force-motion) :is(.sv-btn, button.button)[aria-busy="true"]::before {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   8. Chrome: tap targets (44px on phones and touch screens), the page scrollbar, the footer tagline
   -------------------------------------------------------------------------- */
/* Every pointer: the footer's small text links get a 32px row (the row is 38px tall: desktop does not move) */
:where(.sv-footer__legal a, .sv-footer__mail) {
  display: flex !important;
  align-items: center !important;
  min-height: 32px !important;
}
/* A long word breaks inside its footer column instead of running into the next one
   (de "Abstimmungsbelohnungen" touched "Gildenkämpfe" at 1200-1366px) */
:where(.sv-footer__col) {
  min-width: 0 !important;
}
:where(.sv-footer__col a) {
  overflow-wrap: anywhere !important;
  hyphens: auto !important;
}
@media (max-width: 760px), (pointer: coarse) {
  :where(.sv-footer__col ul) {
    gap: 0 !important;
  }
  :where(.sv-footer__col a, .sv-footer__legal a, .sv-footer__mail) {
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
    min-width: 44px !important;
  }
  :where(.sv-footer__legal) {
    gap: 0 1.25rem !important;
  }
  :where(.sv-footer__social-link) {
    width: 44px !important;
    height: 44px !important;
  }
  :where(.sv-footer__actions .sv-btn, .sv-header__cta .sv-btn) {
    min-height: 44px !important;
  }
  :where(.sv-lang) {
    height: 46px !important;                              /* 1px border each side: the select is 44px */
  }
  :where(.sv-brand) {
    min-height: 44px !important;
  }
  /* Legacy breadcrumbs: a 44px hit area that moves nothing (Codex pages have their own, silver-inner.css 2) */
  :where(body:not(.svp-inner) .breadcrumb-nav a, body:not(.svp-inner) .account-breadcrumb a) {
    padding: 12px 5px !important;
    margin: -12px -5px !important;
  }
}
/* The page scrollbar: the viewport reads the root element's pseudo-elements, which silver.css never matched
   (its rule is a descendant selector). Thumb #5b6578 on #05070d is 3.4:1. Do not set scrollbar-color on html:
   Chrome would then ignore these rules. */
html[data-brand="silvermu"]::-webkit-scrollbar {
  width: 12px !important;
  height: 12px !important;
  background: #05070d !important;
}
html[data-brand="silvermu"]::-webkit-scrollbar-thumb {
  border: 3px solid #05070d !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, #9aa4b6, #5b6578) !important;
}
html[data-brand="silvermu"]::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #c3cad8, #7a8499) !important;
}
/* EB Garamond ships no italic face: the tagline was a synthesised slant */
.sv-footer__tagline {
  font-style: normal !important;
  letter-spacing: 0.02em !important;
}
/* Footer: the Game data row (Items, Skills, Maps, NPCs), full width under the four columns (a fifth column
   would crowd the long locales); its heading sits inline, without the ornament */
.sv-footer__nav > .svp-footer-db {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 0.4rem 2.25rem !important;
  min-width: 0 !important;
  padding-top: 1.1rem !important;
  border-top: 1px solid rgba(195, 202, 216, 0.1) !important;
}
.sv-footer__nav > .svp-footer-db > .sv-footer__heading {
  margin: 0 !important;
  padding: 0 !important;
}
.sv-footer__nav > .svp-footer-db > .sv-footer__heading::before,
.sv-footer__nav > .svp-footer-db > .sv-footer__heading::after {
  display: none !important;
}
.sv-footer__nav > .svp-footer-db > ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.35rem 1.75rem !important;
}
@media (max-width: 760px), (pointer: coarse) {
  .sv-footer__nav > .svp-footer-db {
    align-items: center !important;
    row-gap: 0 !important;
  }
  .sv-footer__nav > .svp-footer-db > ul {
    gap: 0 1.5rem !important;
  }
}
/* Tablets and wider: the header bar carries the CTA pair, so the menu drawer does not repeat it */
@media (min-width: 761px) {
  .sv-nav__drawer-cta {
    display: none !important;
  }
}
/* Vietnamese (batch 2, content/x-2): Cinzel has no Vietnamese marks, so tone marks fell back glyph by glyph into Georgia in every
   legacy heading. As citadel (--font-display), the Codex (--svp-font-display) and the account area (--acct-font-display) already do,
   the skin's display face becomes EB Garamond. The two SilverMU wordmarks (plain ASCII) keep Cinzel; the home page is left as it is. */
html:lang(vi) {
  --sv-font-display: var(--sv-font-body) !important;
}
html:lang(vi) :where(.sv-brand__word, .sv-footer__wordmark, main.sv-home) {
  --sv-font-display: "Cinzel", "Cinzel Fallback", "Trajan Pro", Georgia, serif !important;
}

}