/* =========================================================
   Merv — Silkroad Private Server
   Theme: Wüste / Seidenstraße
   ========================================================= */

:root {
  --color-sand-100: #f6ecd9;
  --color-sand-200: #ecdcb8;
  --color-sand-300: #ddc290;
  --color-sand-400: #c9a463;
  --color-sand-500: #b98d49;
  --color-bronze: #a9762f;
  --color-brick: #a3401f;
  --color-brick-dark: #7c2f16;
  --color-ink: #3a2a1a;
  --color-ink-soft: #5c4630;
  --color-night: #23150c;
  --color-night-soft: #331f13;

  --font-display: "Cinzel", serif;
  --font-accent: "Ma Shan Zheng", cursive;
  --font-body: "EB Garamond", serif;

  --radius: 10px;
  --shadow-soft: 0 12px 30px rgba(58, 33, 12, 0.18);
  --container-width: 1140px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-sand-100);
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--color-night-soft);
  margin: 0 0 0.5em;
  letter-spacing: 0.02em;
}

p {
  margin: 0 0 1em;
}

a {
  color: inherit;
  text-decoration: none;
}

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

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75em 1.75em;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn-primary {
  background: linear-gradient(180deg, var(--color-sand-300) 0%, var(--color-sand-400) 100%);
  color: var(--color-night);
  box-shadow: var(--shadow-soft);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(169, 118, 47, 0.35);
}

.btn-outline {
  background: transparent;
  border-color: var(--color-sand-100);
  color: var(--color-sand-100);
}

.btn-outline:hover {
  background: rgba(246, 236, 217, 0.12);
  transform: translateY(-2px);
}

.btn-ghost {
  border-color: var(--color-bronze);
  color: var(--color-ink);
  font-size: 0.85rem;
  padding: 0.6em 1.4em;
}

.btn-ghost:hover {
  background: var(--color-sand-300);
}

.btn-donate {
  background: linear-gradient(180deg, #f6d76a 0%, #c9971f 100%);
  color: var(--color-night);
  font-size: 0.85rem;
  padding: 0.6em 1.3em;
  box-shadow: var(--shadow-soft);
}

.btn-donate:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(201, 151, 31, 0.35);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 236, 217, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-sand-300);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.9rem;
  gap: 1.5rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--color-brick-dark);
  flex-shrink: 0;
  white-space: nowrap;
}

.logo-text {
  line-height: 1;
  white-space: nowrap;
}

.logo-mark {
  font-family: var(--font-accent);
  font-size: 1.8rem;
  line-height: 1;
  color: var(--color-bronze);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex: 1;
  justify-content: center;
}

.main-nav a {
  display: inline-block;
  line-height: 1;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.main-nav a:hover {
  color: var(--color-brick);
  border-color: var(--color-brick);
}

.main-nav a.nav-support-open {
  color: var(--color-brick);
  animation: nav-support-glow 1.6s ease-in-out infinite;
}

.nav-support-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15em;
  height: 1.15em;
  padding: 0 0.32em;
  margin-left: 0.4em;
  border-radius: 999px;
  background: var(--color-brick);
  color: var(--color-sand-100);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  vertical-align: middle;
}

@keyframes nav-support-glow {
  0%, 100% { text-shadow: 0 0 0 rgba(163, 64, 31, 0); }
  50% { text-shadow: 0 0 9px rgba(163, 64, 31, 0.9); }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.server-clock {
  display: inline-block;
  width: 5.5em;
  text-align: center;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--color-ink-soft);
  padding: 0.3em 0.6em;
  border: 1px solid var(--color-sand-300);
  border-radius: 6px;
  box-sizing: content-box;
}

.ambient-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: color 0.15s ease;
}

.ambient-toggle:hover {
  color: var(--color-brick);
}

.ambient-toggle .icon-sound-off {
  display: none;
}

.ambient-toggle.is-muted .icon-sound-on {
  display: none;
}

.ambient-toggle.is-muted .icon-sound-off {
  display: inline-block;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-ink-soft);
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.btn-small {
  padding: 0.55em 1.2em;
  font-size: 0.8rem;
}

.btn-block {
  display: flex;
  width: 100%;
}

/* ---------- Page header (subpages) ---------- */

.page-header {
  background: linear-gradient(180deg, #f0c880 0%, #dfa25a 35%, #c9793f 65%, #a3401f 100%);
  padding: 4.5rem 0 3rem;
  text-align: center;
  color: var(--color-sand-100);
}

.page-header .section-kicker {
  color: var(--color-sand-100);
  opacity: 0.85;
}

.page-header h1 {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  color: var(--color-sand-100);
  text-shadow: 0 4px 16px rgba(58, 21, 8, 0.35);
  margin-bottom: 0.5rem;
}

.page-header p {
  max-width: 560px;
  margin: 0 auto;
  opacity: 0.95;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #f0c880 0%, #dfa25a 35%, #c9793f 65%, #a3401f 100%);
  padding-top: 5.5rem;
  padding-bottom: 6rem;
  color: var(--color-sand-100);
}

.hero-sun {
  position: absolute;
  top: 3rem;
  right: 8%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff3d6, #f4c664 55%, rgba(244, 198, 100, 0) 75%);
  filter: blur(1px);
  opacity: 0.9;
}

.sun-ray {
  position: absolute;
  top: calc(50% + 4px);
  left: calc(50% + 4px);
  width: 0;
  height: 0;
  pointer-events: none;
}

.sun-ray-bar {
  position: absolute;
  top: 108px;
  width: 39px; left: -19.5px;
  height: 180px;
  background: linear-gradient(to bottom, rgba(255, 244, 214, 0.55), rgba(255, 244, 214, 0) 100%);
  border-radius: 12px;
  filter: blur(18px);
  transform-origin: top center;
  animation: ray-shimmer 4.2s ease-in-out infinite;
}

@keyframes ray-shimmer {
  0%, 100% {
    opacity: 0.88;
    transform: scaleY(1);
  }
  50% {
    opacity: 1;
    transform: scaleY(1.02);
  }
}

.sun-ray:nth-child(3n) .sun-ray-bar {
  animation-duration: 5.1s;
  animation-delay: -1.6s;
}

.sun-ray:nth-child(3n+1) .sun-ray-bar {
  animation-duration: 3.6s;
  animation-delay: -0.8s;
}

.sun-ray:nth-child(3n+2) .sun-ray-bar {
  animation-duration: 4.7s;
  animation-delay: -2.4s;
}

.sun-ray:nth-child(1)  { transform: rotate(12deg); }
.sun-ray:nth-child(1) .sun-ray-bar  { width: 45px; left: -22px;  height: 290px; }

.sun-ray:nth-child(2)  { transform: rotate(34deg); }
.sun-ray:nth-child(2) .sun-ray-bar  { width: 61px; left: -30px;  height: 330px;
  background: linear-gradient(to bottom, rgba(255, 244, 214, 0.35), rgba(255, 244, 214, 0) 100%); }

.sun-ray:nth-child(3)  { transform: rotate(47deg); }
.sun-ray:nth-child(3) .sun-ray-bar  { width: 36px; left: -18px;  height: 260px; }

.sun-ray:nth-child(4)  { transform: rotate(68deg); }
.sun-ray:nth-child(4) .sun-ray-bar  { width: 69px; left: -34px;  height: 370px;
  background: linear-gradient(to bottom, rgba(255, 244, 214, 0.65), rgba(255, 244, 214, 0) 100%); }

.sun-ray:nth-child(5)  { transform: rotate(90deg); }
.sun-ray:nth-child(5) .sun-ray-bar  { width: 40px; left: -20px; height: 280px; }

.sun-ray:nth-child(6)  { transform: rotate(101deg); }
.sun-ray:nth-child(6) .sun-ray-bar  { width: 53px; left: -26px;  height: 250px;
  background: linear-gradient(to bottom, rgba(255, 244, 214, 0.35), rgba(255, 244, 214, 0) 100%); }

.sun-ray:nth-child(7)  { transform: rotate(130deg); }
.sun-ray:nth-child(7) .sun-ray-bar  { width: 65px; left: -32px; height: 320px; }

.sun-ray:nth-child(8)  { transform: rotate(155deg); }
.sun-ray:nth-child(8) .sun-ray-bar  { width: 36px; left: -18px;  height: 350px;
  background: linear-gradient(to bottom, rgba(255, 244, 214, 0.4), rgba(255, 244, 214, 0) 100%); }

.sun-ray:nth-child(9)  { transform: rotate(174deg); }
.sun-ray:nth-child(9) .sun-ray-bar  { width: 49px; left: -24px; height: 270px; }

.sun-ray:nth-child(10) { transform: rotate(198deg); }
.sun-ray:nth-child(10) .sun-ray-bar { width: 61px; left: -30px;  height: 300px;
  background: linear-gradient(to bottom, rgba(255, 244, 214, 0.35), rgba(255, 244, 214, 0) 100%); }

.sun-ray:nth-child(11) { transform: rotate(221deg); }
.sun-ray:nth-child(11) .sun-ray-bar { width: 40px; left: -20px; height: 340px; }

.sun-ray:nth-child(12) { transform: rotate(250deg); }
.sun-ray:nth-child(12) .sun-ray-bar { width: 69px; left: -34px;  height: 265px;
  background: linear-gradient(to bottom, rgba(255, 244, 214, 0.45), rgba(255, 244, 214, 0) 100%); }

.sun-ray:nth-child(13) { transform: rotate(278deg); }
.sun-ray:nth-child(13) .sun-ray-bar { width: 45px; left: -22px;  height: 360px;
  background: linear-gradient(to bottom, rgba(255, 244, 214, 0.65), rgba(255, 244, 214, 0) 100%); }

.sun-ray:nth-child(14) { transform: rotate(300deg); }
.sun-ray:nth-child(14) .sun-ray-bar { width: 57px; left: -28px; height: 285px; }

.sun-ray:nth-child(15) { transform: rotate(322deg); }
.sun-ray:nth-child(15) .sun-ray-bar { width: 36px; left: -18px;  height: 325px;
  background: linear-gradient(to bottom, rgba(255, 244, 214, 0.5), rgba(255, 244, 214, 0) 100%); }

.sun-ray:nth-child(16) { transform: rotate(344deg); }
.sun-ray:nth-child(16) .sun-ray-bar { width: 53px; left: -26px; height: 255px; }

.sun-ray:nth-child(17) { transform: rotate(23deg); }
.sun-ray:nth-child(17) .sun-ray-bar { width: 40px; left: -20px; height: 310px;
  background: linear-gradient(to bottom, rgba(255, 244, 214, 0.3), rgba(255, 244, 214, 0) 100%); }

.sun-ray:nth-child(18) { transform: rotate(41deg); }
.sun-ray:nth-child(18) .sun-ray-bar { width: 53px; left: -26px; height: 245px; }

.sun-ray:nth-child(19) { transform: rotate(57deg); }
.sun-ray:nth-child(19) .sun-ray-bar { width: 36px; left: -18px; height: 335px;
  background: linear-gradient(to bottom, rgba(255, 244, 214, 0.4), rgba(255, 244, 214, 0) 100%); }

.sun-ray:nth-child(20) { transform: rotate(79deg); }
.sun-ray:nth-child(20) .sun-ray-bar { width: 61px; left: -30px; height: 275px; }

.sun-ray:nth-child(21) { transform: rotate(96deg); }
.sun-ray:nth-child(21) .sun-ray-bar { width: 45px; left: -22px; height: 350px;
  background: linear-gradient(to bottom, rgba(255, 244, 214, 0.5), rgba(255, 244, 214, 0) 100%); }

.sun-ray:nth-child(22) { transform: rotate(115deg); }
.sun-ray:nth-child(22) .sun-ray-bar { width: 40px; left: -20px; height: 260px; }

.sun-ray:nth-child(23) { transform: rotate(142deg); }
.sun-ray:nth-child(23) .sun-ray-bar { width: 65px; left: -32px; height: 300px;
  background: linear-gradient(to bottom, rgba(255, 244, 214, 0.35), rgba(255, 244, 214, 0) 100%); }

.sun-ray:nth-child(24) { transform: rotate(165deg); }
.sun-ray:nth-child(24) .sun-ray-bar { width: 36px; left: -18px; height: 365px; }

.sun-ray:nth-child(25) { transform: rotate(186deg); }
.sun-ray:nth-child(25) .sun-ray-bar { width: 49px; left: -24px; height: 285px;
  background: linear-gradient(to bottom, rgba(255, 244, 214, 0.45), rgba(255, 244, 214, 0) 100%); }

.sun-ray:nth-child(26) { transform: rotate(209deg); }
.sun-ray:nth-child(26) .sun-ray-bar { width: 57px; left: -28px; height: 250px; }

.sun-ray:nth-child(27) { transform: rotate(235deg); }
.sun-ray:nth-child(27) .sun-ray-bar { width: 40px; left: -20px; height: 320px;
  background: linear-gradient(to bottom, rgba(255, 244, 214, 0.3), rgba(255, 244, 214, 0) 100%); }

.sun-ray:nth-child(28) { transform: rotate(264deg); }
.sun-ray:nth-child(28) .sun-ray-bar { width: 69px; left: -34px; height: 280px; }

.sun-ray:nth-child(29) { transform: rotate(289deg); }
.sun-ray:nth-child(29) .sun-ray-bar { width: 36px; left: -18px; height: 345px;
  background: linear-gradient(to bottom, rgba(255, 244, 214, 0.4), rgba(255, 244, 214, 0) 100%); }

.sun-ray:nth-child(30) { transform: rotate(311deg); }
.sun-ray:nth-child(30) .sun-ray-bar { width: 53px; left: -26px; height: 270px; }

.sun-ray:nth-child(31) { transform: rotate(333deg); }
.sun-ray:nth-child(31) .sun-ray-bar { width: 45px; left: -22px; height: 310px;
  background: linear-gradient(to bottom, rgba(255, 244, 214, 0.5), rgba(255, 244, 214, 0) 100%); }

.sun-ray:nth-child(32) { transform: rotate(358deg); }
.sun-ray:nth-child(32) .sun-ray-bar { width: 40px; left: -20px; height: 240px; }

.sun-ray:nth-child(33) { transform: rotate(122deg); }
.sun-ray:nth-child(33) .sun-ray-bar { width: 49px; left: -24px; height: 295px;
  background: linear-gradient(to bottom, rgba(255, 244, 214, 0.4), rgba(255, 244, 214, 0) 100%); }

.sun-ray:nth-child(34) { transform: rotate(242deg); }
.sun-ray:nth-child(34) .sun-ray-bar { width: 57px; left: -28px; height: 310px; }

/* ---------- Sandstorm ---------- */

.sandstorm {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.sandstorm-gust {
  position: absolute;
  right: -25%;
  width: 320px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(237, 214, 168, 0.4), rgba(237, 214, 168, 0) 70%);
  filter: blur(18px);
  opacity: 0;
  animation: sandstorm-drift linear infinite;
}

.sandstorm-gust:nth-child(1) {
  top: 6%;
  width: 300px;
  height: 120px;
  animation-duration: 20s;
  animation-delay: 0s;
}

.sandstorm-gust:nth-child(2) {
  top: 32%;
  width: 380px;
  height: 90px;
  animation-duration: 27s;
  animation-delay: -9s;
}

.sandstorm-gust:nth-child(3) {
  top: 58%;
  width: 340px;
  height: 150px;
  animation-duration: 34s;
  animation-delay: -20s;
}

.sandstorm-gust:nth-child(4) {
  top: 74%;
  width: 260px;
  height: 100px;
  animation-duration: 24s;
  animation-delay: -14s;
}

.sandstorm-gust:nth-child(5) {
  top: 18%;
  width: 320px;
  height: 130px;
  animation-duration: 31s;
  animation-delay: -6s;
}

.sandstorm-gust:nth-child(6) {
  top: 46%;
  width: 300px;
  height: 105px;
  animation-duration: 22s;
  animation-delay: -17s;
}

@keyframes sandstorm-drift {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  12% {
    opacity: 0.55;
  }
  88% {
    opacity: 0.55;
  }
  100% {
    transform: translateX(-140vw);
    opacity: 0;
  }
}

/* ---------- Birds ---------- */

.birds {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.bird {
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 17px;
  opacity: 0;
}

.wing-a,
.wing-b {
  animation-duration: var(--wing-duration, 0.5s);
  animation-delay: var(--wing-delay, 0s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.wing-a {
  animation-name: wing-flap-a;
}

.wing-b {
  animation-name: wing-flap-b;
}

@keyframes wing-flap-a {
  0%, 100% {
    transform: rotate(-18deg);
  }
  50% {
    transform: rotate(18deg);
  }
}

@keyframes wing-flap-b {
  0%, 100% {
    transform: rotate(18deg);
  }
  50% {
    transform: rotate(-18deg);
  }
}

.bird:nth-child(1) { animation: bird-fly-1 44s linear infinite; animation-delay: -3s; }
.bird:nth-child(2) { animation: bird-fly-2 56s linear infinite; animation-delay: -24s; }
.bird:nth-child(3) { animation: bird-fly-3 36s linear infinite; animation-delay: -10s; width: 26px; height: 13px; }
.bird:nth-child(4) { animation: bird-fly-4 65s linear infinite; animation-delay: -36s; }
.bird:nth-child(5) { animation: bird-fly-5 50s linear infinite; animation-delay: -15s; width: 28px; height: 14px; }

@keyframes bird-fly-1 {
  0%   { transform: translate(-10vw, 42vh) scale(0.9); opacity: 0; }
  8%   { opacity: 0.8; }
  45%  { transform: translate(40vw, 14vh) scale(1); }
  92%  { opacity: 0.8; }
  100% { transform: translate(112vw, 26vh) scale(0.85); opacity: 0; }
}

@keyframes bird-fly-2 {
  0%   { transform: translate(110vw, 10vh) scale(1) scaleX(-1); opacity: 0; }
  8%   { opacity: 0.7; }
  55%  { transform: translate(45vw, 28vh) scale(0.9) scaleX(-1); }
  92%  { opacity: 0.7; }
  100% { transform: translate(-15vw, 8vh) scale(0.8) scaleX(-1); opacity: 0; }
}

@keyframes bird-fly-3 {
  0%   { transform: translate(-10vw, 6vh) scale(0.7); opacity: 0; }
  10%  { opacity: 0.75; }
  50%  { transform: translate(50vw, 2vh) scale(0.75); }
  90%  { opacity: 0.75; }
  100% { transform: translate(115vw, 12vh) scale(0.7); opacity: 0; }
}

@keyframes bird-fly-4 {
  0%   { transform: translate(112vw, 22vh) scale(1.05) scaleX(-1); opacity: 0; }
  8%   { opacity: 0.65; }
  50%  { transform: translate(50vw, 5vh) scale(1) scaleX(-1); }
  92%  { opacity: 0.65; }
  100% { transform: translate(-12vw, 18vh) scale(0.95) scaleX(-1); opacity: 0; }
}

@keyframes bird-fly-5 {
  0%   { transform: translate(-10vw, 30vh) scale(0.85); opacity: 0; }
  10%  { opacity: 0.75; }
  50%  { transform: translate(48vw, 16vh) scale(0.95); }
  90%  { opacity: 0.75; }
  100% { transform: translate(114vw, 20vh) scale(0.8); opacity: 0; }
}

.skyline {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 4%;
  width: 100%;
  height: 260px;
  opacity: 0.05;
  z-index: 0;
  pointer-events: none;
}

.hero-dunes {
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background:
    radial-gradient(120% 100% at 15% 100%, rgba(163, 64, 31, 0.9) 0%, rgba(163, 64, 31, 0) 60%),
    radial-gradient(120% 100% at 55% 100%, rgba(124, 47, 22, 0.85) 0%, rgba(124, 47, 22, 0) 55%),
    radial-gradient(140% 100% at 90% 100%, rgba(163, 64, 31, 0.75) 0%, rgba(163, 64, 31, 0) 55%);
}

.hero-hills {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 55%;
  z-index: 0;
  pointer-events: none;
}

.hill-lines path {
  fill: none;
  stroke: #2a1a0e;
  stroke-width: 0.5;
  stroke-linecap: round;
}

.hill-lines-back path {
  opacity: 0.1;
}

.hill-lines-front path {
  opacity: 0.16;
}

.hill-lines .hill-crest {
  opacity: 0.22;
}

.hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 760px;
}

.online-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4em 1em;
  margin-bottom: 1.25rem;
  border-radius: 999px;
  background: rgba(35, 21, 12, 0.25);
  border: 1px solid rgba(246, 236, 217, 0.3);
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-sand-100);
}

.online-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3ecf6e;
  box-shadow: 0 0 0 rgba(62, 207, 110, 0.6);
  animation: online-pulse 2s ease-in-out infinite;
}

@keyframes online-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(62, 207, 110, 0.6);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(62, 207, 110, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(62, 207, 110, 0);
  }
}

.hero-kicker {
  font-family: var(--font-display);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--color-sand-100);
  opacity: 0.85;
  margin-bottom: 1rem;
}

.hero-title {
  font-size: clamp(3rem, 8vw, 5.5rem);
  color: var(--color-sand-100);
  text-shadow: 0 6px 24px rgba(58, 21, 8, 0.4);
  margin-bottom: 0.35em;
}

.mini-caravan {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: var(--container-width);
  height: 64px;
  overflow: hidden;
  opacity: 0.1;
  margin: 0.25rem 0 1rem;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 32%, black 68%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 32%, black 68%, transparent 100%);
}

.mini-caravan-scale {
  transform: scale(0.5);
  transform-origin: bottom left;
}

.hero-subtitle {
  font-size: 1.25rem;
  color: var(--color-sand-100);
  opacity: 0.95;
  max-width: 560px;
  margin-inline: auto;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  list-style: none;
  margin: 3rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid rgba(246, 236, 217, 0.35);
  flex-wrap: wrap;
}

.hero-stats li {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
}

.stat-label {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-top: 0.25rem;
}

.drink {
  animation-name: var(--drink-anim, drink-cycle-short);
  animation-duration: var(--drink-duration, 7s);
  animation-delay: var(--drink-delay, 0s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* both keep the same 1.75s movement time; only the hold time at each end differs */
@keyframes drink-cycle-short {
  0% {
    transform: rotate(55deg);
  }
  32.5% {
    transform: rotate(55deg);
  }
  50% {
    transform: rotate(0deg);
  }
  82.5% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(55deg);
  }
}

@keyframes drink-cycle-13hold {
  0% {
    transform: rotate(55deg);
  }
  44.1% {
    transform: rotate(55deg);
  }
  50% {
    transform: rotate(0deg);
  }
  94.1% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(55deg);
  }
}

@keyframes drink-cycle-17hold {
  0% {
    transform: rotate(55deg);
  }
  45.3% {
    transform: rotate(55deg);
  }
  50% {
    transform: rotate(0deg);
  }
  95.3% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(55deg);
  }
}

.oasis {
  display: none;
  position: absolute;
  left: 24%;
  top: 52%;
  width: 225px;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.caravan {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 72px;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 45%, black 55%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 45%, black 55%, transparent 100%);
}

.caravan-track {
  display: flex;
  align-items: flex-end;
  gap: 4rem;
  width: max-content;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
  animation: caravan-walk 175s linear infinite;
  will-change: transform;
}

/* The lower hero track must sit on the baseline, leaving headroom for its raised camel poses. */
.caravan > .caravan-track {
  position: absolute;
  bottom: 0;
}

.caravan-group {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  flex: none;
}

.caravan-group:nth-of-type(4n+1) { transform: translateY(-1px); }
.caravan-group:nth-of-type(4n+2) { transform: translateY(2px); }
.caravan-group:nth-of-type(4n+3) { transform: translateY(-2px); }
.caravan-group:nth-of-type(4n+4) { transform: translateY(1px); }

.cf {
  display: block;
  flex: none;
  transform: translateY(calc(var(--offset-y, 0px) + var(--person-shift, 0px)));
}

/* Refine the original vector camel without replacing its animated SVG legs. */
svg.cf[width="87"] {
  transform: translateY(calc(var(--offset-y, 0px) + var(--person-shift, 0px))) scaleX(0.92) scaleY(1.08);
  transform-origin: center bottom;
  overflow: visible;
}

#s-camel .leg-swing-a rect,
#s-camel .leg-swing-b rect {
  width: 3.8px;
  rx: 1.9px;
}

svg.cf[width="33"] {
  --person-shift: 9px;
}

/* Keep pedestrians on the same ground line as the camels in the lower hero caravan. */
.caravan svg.cf[width="33"] {
  --person-shift: 0px;
}

@keyframes caravan-walk {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

.leg-swing-a,
.leg-swing-b {
  animation-duration: var(--gait-duration, 1.3s);
  animation-delay: var(--gait-delay, 0s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.caravan-group > .cf:nth-child(1) {
  --gait-delay: -0.1s;
  --gait-duration: 1.3s;
  --offset-y: -3px;
}

.caravan-group > .cf:nth-child(2) {
  --gait-delay: -0.55s;
  --gait-duration: 1.15s;
  --offset-y: 2px;
}

.caravan-group > .cf:nth-child(3) {
  --gait-delay: -0.9s;
  --gait-duration: 1.4s;
  --offset-y: -2px;
}

.caravan-group > .cf:nth-child(4) {
  --gait-delay: -0.3s;
  --gait-duration: 1.2s;
  --offset-y: 3px;
}

.caravan-group > .cf:nth-child(5) {
  --gait-delay: -0.7s;
  --gait-duration: 1.35s;
  --offset-y: -2px;
}

.caravan-group:nth-of-type(3n) > .cf {
  --gait-delay: -1.05s;
}

.caravan-group:nth-of-type(3n+2) > .cf:nth-child(odd) {
  --gait-duration: 1.25s;
}

.leg-swing-a {
  animation-name: leg-swing-a;
}

.leg-swing-b {
  animation-name: leg-swing-b;
}

@keyframes leg-swing-a {
  0%, 100% {
    transform: rotate(-20deg);
  }
  50% {
    transform: rotate(20deg);
  }
}

.arm-a,
.arm-b {
  animation-duration: var(--gait-duration, 1.3s);
  animation-delay: var(--gait-delay, 0s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-name: arm-swing-a;
}

.arm-a {
  animation-name: arm-swing-b;
}

.arm-b {
  animation-name: arm-swing-a;
}

/* about a third of the figures keep their arms simply hanging still */
.caravan-group > .cf:nth-child(2) .arm-a,
.caravan-group > .cf:nth-child(2) .arm-b,
.caravan-group:nth-of-type(3n) > .cf:nth-child(4) .arm-a,
.caravan-group:nth-of-type(3n) > .cf:nth-child(4) .arm-b {
  animation: none;
}

@keyframes arm-swing-a {
  0%, 100% {
    transform: rotate(-14deg);
  }
  50% {
    transform: rotate(14deg);
  }
}

@keyframes arm-swing-b {
  0%, 100% {
    transform: rotate(14deg);
  }
  50% {
    transform: rotate(-14deg);
  }
}

@keyframes leg-swing-b {
  0%, 100% {
    transform: rotate(20deg);
  }
  50% {
    transform: rotate(-20deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .caravan-track,
  .leg-swing-a,
  .leg-swing-b,
  .arm-a,
  .arm-b,
  .sandstorm-gust,
  .bird,
  .wing-a,
  .wing-b,
  .sun-ray-bar,
  .drink,
  .online-dot {
    animation: none;
  }
}

.hero-divider {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12px;
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0 5px,
      rgba(255, 244, 214, 0.45) 5px 6px,
      transparent 6px 11px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0 5px,
      rgba(255, 244, 214, 0.45) 5px 6px,
      transparent 6px 11px
    ),
    linear-gradient(180deg, var(--color-bronze), var(--color-brick-dark));
  box-shadow:
    0 -1px 0 rgba(255, 244, 214, 0.5) inset,
    0 1px 0 rgba(35, 21, 12, 0.4) inset;
}

/* ---------- Sections ---------- */

.section {
  padding: 5rem 0;
}

.section-alt {
  background: var(--color-sand-200);
}

.section-kicker {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-brick);
  margin-bottom: 0.5rem;
}

.section-title {
  font-size: 2.2rem;
}

.section-lead {
  max-width: 620px;
  color: var(--color-ink-soft);
  font-size: 1.15rem;
}

/* ---------- Info grid ---------- */

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.server-features-kicker {
  margin-top: 2.5rem;
}

.server-features-title {
  margin-bottom: 0;
}

.info-card {
  background: var(--color-sand-100);
  border: 1px solid var(--color-sand-300);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-soft);
}

.info-icon {
  font-size: 1.8rem;
  margin-bottom: 0.75rem;
}

.info-card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.4em;
}

.info-card p {
  color: var(--color-ink-soft);
  font-size: 1rem;
  margin: 0;
}

/* ---------- Callout ---------- */

.callout {
  display: flex;
  gap: 0;
  align-items: stretch;
  margin-top: 2.5rem;
  background: linear-gradient(135deg, var(--color-sand-200) 0%, var(--color-sand-300) 100%);
  color: var(--color-ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.callout-text {
  width: 50%;
  padding: 2rem;
}

.callout-icon {
  font-size: 2rem;
  line-height: 1;
}

.callout-text h3 {
  color: var(--color-brick-dark);
  margin-bottom: 0.4em;
}

.callout-text p {
  margin: 0;
  opacity: 0.95;
}

.callout-visual {
  width: 50%;
  flex: 0 0 50%;
  align-self: stretch;
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
}

/* ---------- City grid ---------- */

.city-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.city-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
  .city-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .city-grid-4 {
    grid-template-columns: 1fr;
  }
}

.city-card {
  position: relative;
  overflow: hidden;
  background: var(--color-sand-100);
  border: 1px solid var(--color-sand-300);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow-soft);
  color: #fff;
  isolation: isolate;
}

.city-card-featured {
  border-color: var(--color-bronze);
}

.city-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, rgba(16, 20, 22, 0.72), rgba(16, 20, 22, 0.43));
}

.city-card-jangan { background: center / cover url("../images/cities/jangan.png"); }
.city-card-donwhang { background: center / cover url("../images/cities/donwhang.png"); }
.city-card-hotan { background: center / cover url("../images/cities/hotan.png"); }
.unique-card-tigergirl { background: right center / cover url("../images/cities/tigergirl-cerberus.png"); }
.unique-card-uruchi { background: right center / cover url("../images/cities/uruchi-captain-ivy.png"); }
.unique-card-isyutaru { background: center / cover url("../images/cities/isyutaru.png"); }
.unique-card-yarkan { background: center / cover url("../images/cities/lord-yarkan.png"); }

.city-card-jangan h3,
.city-card-donwhang h3,
.city-card-hotan h3,
.unique-card-tigergirl h3,
.unique-card-uruchi h3,
.unique-card-isyutaru h3,
.unique-card-yarkan h3 {
  margin-top: 0;
  font-size: 2rem;
  line-height: 1.05;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
}

.city-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(19, 27, 30, 0.72);
  padding: 0.3em 0.8em;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.city-card h3 {
  font-size: 1.4rem;
}

.city-card p {
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
}

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

.tabs {
  margin-top: 2.5rem;
}

.tab-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tab-labels {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--color-sand-300);
}

.tab-label {
  display: inline-block;
  padding: 0.85em 1.6em;
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.tab-label:hover {
  color: var(--color-brick);
}

.tab-panel {
  display: none;
}

#tab-players:checked ~ .tab-labels label[for="tab-players"],
#tab-guilds:checked ~ .tab-labels label[for="tab-guilds"] {
  color: var(--color-brick);
  border-color: var(--color-brick);
}

#tab-players:checked ~ .players-panel,
#tab-guilds:checked ~ .guilds-panel {
  display: block;
}

/* ---------- Leaderboard ---------- */

.table-wrap {
  margin-top: 2.5rem;
  overflow-x: auto;
  background: var(--color-sand-100);
  border: 1px solid var(--color-sand-300);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}

.leaderboard-table th,
.leaderboard-table td {
  text-align: left;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--color-sand-300);
}

.leaderboard-table th {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-brick-dark);
  background: var(--color-sand-200);
}

.leaderboard-table tbody tr:last-child td {
  border-bottom: none;
}

.leaderboard-table tbody tr:hover {
  background: var(--color-sand-200);
}

.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  background: var(--color-sand-300);
  color: var(--color-ink);
}

.rank-badge.rank-1 {
  background: linear-gradient(180deg, #f6d76a, #c9971f);
  color: var(--color-night);
}

.rank-badge.rank-2 {
  background: linear-gradient(180deg, #e2e2e2, #a8a8a8);
  color: var(--color-night);
}

.rank-badge.rank-3 {
  background: linear-gradient(180deg, #d6a06a, #9c6431);
  color: var(--color-sand-100);
}

/* ---------- Quick stats (mini leaderboard + Discord widget) ---------- */

.quick-stats-grid {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(0, var(--container-width)) minmax(160px, 1fr);
  gap: 2rem;
  align-items: start;
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.quick-leaderboard {
  justify-self: end;
  width: 100%;
  max-width: 240px;
}

.discord-widget {
  justify-self: start;
  width: 100%;
  max-width: 240px;
}

.quick-leaderboard,
.discord-widget {
  position: sticky;
  top: 6rem;
}

.mini-leaderboard {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.mini-leaderboard li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--color-sand-100);
  border: 1px solid var(--color-sand-300);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  font-size: 1.05rem;
}

.mini-level {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--color-ink-soft);
}

.mini-leaderboard-more {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--color-brick);
}

.mini-leaderboard-more:hover {
  text-decoration: underline;
}

.mini-news-date {
  display: block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-brick);
  margin-bottom: 0.4rem;
}

.discord-widget {
  background: #313338;
  color: #fff;
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow-soft);
  margin-top: 2rem;
}

.discord-widget-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin-bottom: 0.3rem;
}

.discord-widget-sub {
  opacity: 0.65;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

.discord-widget-avatars {
  display: flex;
  margin-bottom: 1.75rem;
}

.discord-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-sand-400);
  border: 3px solid #313338;
  margin-left: -12px;
  position: relative;
}

.discord-avatar:first-child {
  margin-left: 0;
}

.discord-avatar::after {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #23a55a;
  border: 2px solid #313338;
}

.discord-avatar:nth-child(2) { background: var(--color-bronze); }
.discord-avatar:nth-child(3) { background: var(--color-brick); }
.discord-avatar:nth-child(4) { background: var(--color-sand-300); }
.discord-avatar:nth-child(5) { background: var(--color-brick-dark); }
.discord-avatar:nth-child(6) { background: var(--color-sand-400); }

@media (max-width: 1600px) {
  .quick-stats-grid {
    grid-template-columns: 1fr;
  }

  .quick-leaderboard,
  .discord-widget {
    position: static;
    max-width: 420px;
    margin: 0 auto;
    width: 100%;
  }
}

/* ---------- Forms (account + support) ---------- */

.account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
  max-width: 760px;
}

.auth-page {
  max-width: 420px;
  margin: 2.5rem auto 0;
}

.auth-switch {
  text-align: center;
  margin-top: 1.25rem;
  color: var(--color-ink-soft);
}

.auth-switch a {
  color: var(--color-brick);
  text-decoration: underline;
}

.auth-card {
  background: var(--color-sand-100);
  border: 1px solid var(--color-sand-300);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow-soft);
}

.auth-card h3 {
  font-size: 1.3rem;
  margin-bottom: 1.25rem;
}

.form-group {
  margin-bottom: 1.1rem;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}

.form-group label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-bottom: 0.4rem;
}

.form-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.form-label-row label {
  margin-bottom: 0.4rem;
}

.form-hint-link {
  font-family: var(--font-body);
  font-size: 1.125rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-brick);
}

.form-hint-link:hover {
  text-decoration: underline;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.65em 0.85em;
  border: 1px solid var(--color-sand-300);
  border-radius: 6px;
  background: var(--color-sand-100);
  color: var(--color-ink);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-brick);
  box-shadow: 0 0 0 3px rgba(163, 64, 31, 0.15);
}

.form-group textarea {
  resize: vertical;
}

.form-message {
  margin-bottom: 1.1rem;
  padding: 0.75em 1em;
  border-radius: 6px;
  font-size: 0.95rem;
}

.form-message-success {
  background: rgba(47, 125, 79, 0.12);
  border: 1px solid rgba(47, 125, 79, 0.35);
  color: #2f7d4f;
}

.form-message-error {
  background: rgba(163, 64, 31, 0.1);
  border: 1px solid rgba(163, 64, 31, 0.35);
  color: var(--color-brick-dark);
}

.char-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--color-bronze);
}

.char-link:hover {
  color: var(--color-brick);
  border-bottom-color: var(--color-brick);
}

/* ---------- Character Equipment ---------- */
.auto-equip-toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 1.5rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
}

.auto-equip-toggle label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.auto-equip-toggle input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--color-brick);
  cursor: pointer;
}

.auto-equip-toggle .form-message {
  margin: 0;
  padding: 0.3em 0.7em;
  font-size: 0.8rem;
}

.account-char-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 640px;
  margin: 0 auto;
}

.account-char-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  background: var(--color-sand-100);
  border: 1px solid var(--color-sand-300);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}

.account-char-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.account-char-row .mini-level {
  margin-right: auto;
}

.account-char-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  cursor: pointer;
}

.account-char-toggle input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--color-brick);
  cursor: pointer;
}

.account-char-message {
  flex-basis: 100%;
  margin: 0;
  padding: 0.3em 0.7em;
  font-size: 0.8rem;
}

.info-tooltip {
  position: relative;
  display: inline-flex;
  color: var(--color-bronze);
  font-size: 1rem;
  line-height: 1;
  cursor: help;
}

.info-tooltip .info-tooltip-text {
  display: none;
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  background: var(--color-night);
  color: var(--color-sand-100);
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: normal;
  padding: 0.65em 0.85em;
  border-radius: 6px;
  box-shadow: var(--shadow-soft);
  z-index: 10;
}

.info-tooltip .info-tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--color-night);
}

.info-tooltip:hover .info-tooltip-text,
.info-tooltip:focus .info-tooltip-text {
  display: block;
}

.char-portrait {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.char-portrait img {
  width: 96px;
  height: 96px;
  border-radius: var(--radius);
  border: 2px solid var(--color-bronze);
  background: var(--color-sand-200);
  box-shadow: var(--shadow-soft);
  image-rendering: pixelated;
}

.equipment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 60px);
  gap: 0.7rem;
}

.equip-slot {
  position: relative;
  cursor: help;
}

.equip-slot:focus {
  outline: none;
}

.equip-icon-wrap {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 6px;
  border: 1px solid #3d5a73;
  box-shadow: inset 0 0 0 1px #060a0f, 0 0 8px rgba(95, 208, 255, 0.15);
  background: #060a0f;
}

.equip-slot:hover .equip-icon-wrap,
.equip-slot:focus .equip-icon-wrap {
  border-color: #5fd0ff;
}

.equip-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
  image-rendering: pixelated;
}

.equip-plus-badge {
  position: absolute;
  right: 2px;
  bottom: 2px;
  font-family: var(--font-display);
  font-size: 0.65rem;
  color: #5fd0ff;
  background: rgba(6, 10, 15, 0.85);
  padding: 0 0.25em;
  border-radius: 3px;
  text-shadow: 0 0 6px rgba(95, 208, 255, 0.6);
}

.equip-tooltip {
  display: none;
  position: absolute;
  z-index: 20;
  bottom: calc(100% + 0.6rem);
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  text-align: left;
  background: linear-gradient(180deg, #16222f 0%, #0b131c 100%);
  border: 1px solid #3d5a73;
  border-radius: 6px;
  padding: 1rem 1.15rem 1.1rem;
  box-shadow: 0 0 0 1px #060a0f, 0 10px 24px rgba(0, 0, 0, 0.55), inset 0 0 20px rgba(80, 140, 190, 0.06);
}

.equip-tooltip::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(122, 178, 214, 0.25);
  border-radius: 4px;
  pointer-events: none;
}

.equip-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: #3d5a73;
}

.equip-slot:hover .equip-tooltip,
.equip-slot:focus .equip-tooltip {
  display: block;
}

.tt-name {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  color: #f0e6cc;
}

.tt-seal {
  color: #5fd0ff !important;
  margin-top: 0.1rem !important;
}

.tt-group {
  margin-top: 0.55rem;
}

.tt-line {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #c7d0d8;
}

.tt-options {
  margin-top: 0.55rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(122, 178, 214, 0.25);
}

.tt-option {
  color: #5fd0ff !important;
}

.char-back-link {
  margin-top: 2rem;
}

.char-back-link a {
  color: var(--color-brick);
  text-decoration: underline;
}

.ticket-form {
  margin: 2.5rem auto 0;
  max-width: 700px;
  background: var(--color-sand-100);
  border: 1px solid var(--color-sand-300);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow-soft);
}

/* ---------- Support tickets ---------- */

.support-guest {
  max-width: 480px;
  margin: 2.5rem auto 0;
  text-align: center;
  background: var(--color-sand-100);
  border: 1px solid var(--color-sand-300);
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
  box-shadow: var(--shadow-soft);
}

.support-guest-actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

#support-app {
  max-width: 760px;
  margin: 2.5rem auto 0;
}

.ticket-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.ticket-list-title {
  margin: 0;
}

.ticket-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ticket-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  text-align: left;
  background: var(--color-sand-100);
  border: 1px solid var(--color-sand-300);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ticket-row:hover {
  border-color: var(--color-bronze);
  box-shadow: var(--shadow-soft);
}

.ticket-row-main {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.ticket-row-subject {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-row-meta {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}

.ticket-row-owner {
  font-weight: 600;
  margin: 0 0.35em;
}

.ticket-status-badge {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35em 0.8em;
  border-radius: 999px;
}

.ticket-status-open {
  background: rgba(47, 125, 79, 0.12);
  color: #2f7d4f;
}

.ticket-status-closed {
  background: var(--color-sand-300);
  color: var(--color-ink-soft);
}

.ticket-list-empty {
  color: var(--color-ink-soft);
  text-align: center;
  padding: 2rem 0;
}

.ticket-back {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 1.25rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--color-brick);
  cursor: pointer;
}

.ticket-back:hover {
  text-decoration: underline;
}

.ticket-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.ticket-detail-subject {
  margin: 0 0 0.3rem;
  font-size: 1.3rem;
}

.ticket-meta {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}

.ticket-detail-actions {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}

.chat-thread {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  background: var(--color-sand-200);
  border: 1px solid var(--color-sand-300);
  border-radius: var(--radius);
  padding: 1.25rem;
  max-height: 480px;
  overflow-y: auto;
}

.chat-bubble {
  display: flex;
  flex-direction: column;
  max-width: 78%;
  padding: 0.65em 0.9em;
  border-radius: 12px;
  background: var(--color-sand-100);
  border: 1px solid var(--color-sand-300);
}

.chat-bubble-mine {
  align-self: flex-end;
  background: linear-gradient(180deg, var(--color-sand-300) 0%, var(--color-sand-400) 100%);
  border-color: var(--color-sand-400);
}

.chat-bubble-theirs {
  align-self: flex-start;
}

.chat-bubble-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  color: var(--color-ink-soft);
  margin-bottom: 0.3rem;
}

.chat-bubble-staff-tag {
  background: var(--color-brick);
  color: var(--color-sand-100);
  border-radius: 999px;
  padding: 0.15em 0.6em;
  font-size: 0.65rem;
  text-transform: uppercase;
}

.chat-bubble-body {
  font-size: 0.98rem;
  line-height: 1.5;
  word-break: break-word;
}

.chat-input-row {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  margin-top: 1rem;
}

.chat-input-row textarea {
  flex: 1;
  resize: vertical;
  min-height: 44px;
  max-height: 160px;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.65em 0.85em;
  border: 1px solid var(--color-sand-300);
  border-radius: 6px;
  background: var(--color-sand-100);
  color: var(--color-ink);
}

.chat-input-row textarea:focus {
  outline: none;
  border-color: var(--color-brick);
  box-shadow: 0 0 0 3px rgba(163, 64, 31, 0.15);
}

.ticket-closed-note {
  text-align: center;
  color: var(--color-ink-soft);
  font-style: italic;
  margin: 1rem 0 0;
}

@media (max-width: 600px) {
  .ticket-list-header {
    flex-direction: column;
    align-items: stretch;
  }

  .chat-bubble {
    max-width: 92%;
  }
}

/* ---------- News grid ---------- */

.news-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 2.5rem auto 0;
  max-width: 700px;
}

.news-card {
  background: var(--color-sand-100);
  border: 1px solid var(--color-sand-300);
  border-left: 4px solid var(--color-brick);
  border-radius: var(--radius);
  padding: 1.75rem;
}

.news-date {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brick);
  margin-bottom: 0.6rem;
}

.news-card h3 {
  font-size: 1.15rem;
}

.news-card p {
  color: var(--color-ink-soft);
  font-size: 1rem;
  margin: 0;
}

/* ---------- Rules ---------- */

.rules-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 2.5rem auto 0;
  max-width: 820px;
}

.rule-card {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: var(--color-sand-100);
  border: 1px solid var(--color-sand-300);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  box-shadow: var(--shadow-soft);
}

.rule-number {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--color-sand-300) 0%, var(--color-sand-400) 100%);
  color: var(--color-night);
  font-family: var(--font-display);
  font-weight: 700;
}

.rule-card h3 {
  margin: 0 0 0.35em;
  font-size: 1.1rem;
}

.rule-card p {
  margin: 0;
  color: var(--color-ink-soft);
}

.rule-card p a {
  color: var(--color-brick);
  text-decoration: underline;
}

/* ---------- Community ---------- */

.community {
  background: linear-gradient(180deg, var(--color-night-soft) 0%, var(--color-night) 100%);
  color: var(--color-sand-100);
  padding: 5rem 0;
  text-align: center;
}

.community-inner {
  max-width: 640px;
  margin: 0 auto;
}

.community h2 {
  color: var(--color-sand-100);
  font-size: 2rem;
}

.community p {
  color: var(--color-sand-200);
  font-size: 1.15rem;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--color-night);
  color: var(--color-sand-200);
  padding: 3rem 0 2rem;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
}

.footer-brand .logo-mark {
  font-family: var(--font-accent);
  font-size: 1.6rem;
  color: var(--color-sand-400);
}

.footer-nav {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-nav a {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-sand-300);
}

.footer-nav a:hover {
  color: var(--color-sand-100);
}

.footer-disclaimer,
.footer-copy {
  font-size: 0.85rem;
  color: var(--color-sand-400);
  max-width: 560px;
  margin: 0;
}

.footer-copy {
  opacity: 0.7;
}

/* ---------- User Menu ---------- */

.user-menu {
  position: relative;
}

.user-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4em 0.9em 0.4em 0.4em;
  background: var(--color-sand-200);
  border: 1px solid var(--color-sand-300);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.user-menu-trigger:hover {
  background: var(--color-sand-300);
  border-color: var(--color-bronze);
}

.user-menu-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--color-sand-300) 0%, var(--color-sand-400) 100%);
  color: var(--color-night);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
}

.user-menu-name {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--color-ink);
}

.user-menu-caret {
  font-size: 0.7rem;
  color: var(--color-ink-soft);
}

.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  width: 280px;
  background: var(--color-sand-100);
  border: 1px solid var(--color-sand-300);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1rem;
  z-index: 60;
}

.user-menu-info {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 0.85rem;
}

.user-menu-info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 0.85rem;
}

.user-menu-info-row span {
  color: var(--color-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.72rem;
}

.user-menu-info-row strong {
  color: var(--color-ink);
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}

.user-menu-divider {
  border: none;
  border-top: 1px solid var(--color-sand-300);
  margin: 0 0 0.75rem;
}

.user-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0.55em 0.4em;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-ink);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.user-menu-item:hover {
  background: var(--color-sand-200);
}

.user-menu-item-danger {
  color: var(--color-brick-dark);
}

/* ---------- Responsive ---------- */

@media (max-width: 780px) {
  .header-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo toggle"
      "clock sound";
    align-items: center;
    row-gap: 0.6rem;
    column-gap: 1rem;
  }

  .logo {
    grid-area: logo;
  }

  .nav-toggle {
    grid-area: toggle;
    display: flex;
    justify-self: end;
  }

  .server-clock {
    grid-area: clock;
    justify-self: start;
  }

  .ambient-toggle {
    grid-area: sound;
    justify-self: end;
  }

  .main-nav,
  .header-actions {
    display: none;
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
  }

  .main-nav {
    padding-top: 0.75rem;
  }

  .header-actions {
    padding: 0.5rem 0 0.9rem;
  }

  .site-header.nav-open .main-nav,
  .site-header.nav-open .header-actions {
    display: flex;
  }

  .main-nav a {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-sand-300);
  }

  .quick-leaderboard {
    display: none;
  }

  .hero {
    padding-top: 4rem;
    padding-bottom: 4.5rem;
  }

  .section {
    padding: 3.5rem 0;
  }

  .callout {
    flex-direction: column;
  }

  .callout-text {
    width: 100%;
  }

  .callout-visual {
    width: 100%;
    flex-basis: auto;
  }

  .user-menu-name {
    display: none;
  }

  .user-menu-dropdown {
    width: 260px;
  }
}