:root {
  --bg: #060504;
  --bg-soft: #110d09;
  --panel: rgba(20, 14, 9, 0.82);
  --panel-strong: rgba(28, 18, 10, 0.94);
  --gold: #d9a441;
  --gold-bright: #ffd277;
  --gold-dark: #7a4d13;
  --cream: #f7ead1;
  --muted: #b8a88d;
  --line: rgba(217, 164, 65, 0.34);
  --shadow: rgba(217, 164, 65, 0.18);
  --danger: #6d1515;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--cream);
  background:
    radial-gradient(circle at 20% 10%, rgba(122, 77, 19, 0.28), transparent 34rem),
    radial-gradient(circle at 82% 4%, rgba(109, 21, 21, 0.22), transparent 30rem),
    linear-gradient(135deg, #030202 0%, var(--bg) 42%, #120b07 100%);
  font-family: "Exo 2", system-ui, sans-serif;
  overflow-x: hidden;
}

body::before,
body::after {
  position: fixed;
  inset: 0;
  pointer-events: none;
  content: "";
  z-index: -2;
}

body::before {
  background-image:
    linear-gradient(rgba(217, 164, 65, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 164, 65, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at center, black, transparent 72%);
}

body::after {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.82), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.82));
  z-index: 4;
}

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  z-index: 6;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
}

.cursor-glow {
  position: fixed;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: 28rem;
  height: 28rem;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(217, 164, 65, 0.14), transparent 62%);
  filter: blur(6px);
  z-index: 1;
}

.site-header {
  position: fixed;
  top: 22px;
  left: 22px;
  z-index: 20;
  display: grid;
  width: 238px;
  height: calc(100vh - 44px);
  padding: 16px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(8, 6, 4, 0.76);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35), inset 0 0 20px rgba(217, 164, 65, 0.06);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: max-content;
}

.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-bright);
  background: radial-gradient(circle, rgba(255, 210, 119, 0.2), rgba(0, 0, 0, 0.1));
  font-family: "Exo 2", system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  box-shadow: 0 0 30px var(--shadow);
}

.brand strong,
.brand small,
h1,
h2,
h3,
.eyebrow,
.doc-tab,
.rule-item span {
  font-family: "Exo 2", system-ui, sans-serif;
  letter-spacing: 0.025em;
}

.brand strong,
.brand small {
  display: block;
  line-height: 1;
}

.brand strong {
  font-size: 1.05rem;
}

.brand small {
  margin-top: 3px;
  color: var(--gold);
  font-size: 0.68rem;
  text-transform: uppercase;
}

.main-nav {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.main-nav a {
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 16px;
  color: var(--muted);
  font-size: 0.9rem;
  transition: 220ms ease;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--gold-bright);
  border-color: rgba(217, 164, 65, 0.22);
  background: rgba(217, 164, 65, 0.1);
}

.main-nav .nav-cta {
  color: #120b07;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  font-weight: 800;
  text-align: center;
}

.nav-toggle {
  display: none;
  border: 0;
  background: transparent;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px 0;
  background: var(--gold-bright);
}

.sidebar-socials {
  display: grid;
  gap: 9px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(217, 164, 65, 0.2);
}

.sidebar-socials a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid rgba(217, 164, 65, 0.16);
  border-radius: 15px;
  color: var(--muted);
  background: rgba(217, 164, 65, 0.05);
  font-size: 0.86rem;
  font-weight: 700;
  transition: transform 220ms ease, color 220ms ease, border-color 220ms ease, background 220ms ease;
}

.sidebar-socials a:hover,
.sidebar-socials a:focus-visible {
  color: var(--gold-bright);
  border-color: rgba(255, 210, 119, 0.62);
  background: rgba(217, 164, 65, 0.12);
  transform: translateX(4px);
}

.sidebar-socials svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: currentColor;
  filter: drop-shadow(0 0 10px rgba(217, 164, 65, 0.18));
}

main {
  position: relative;
  z-index: 2;
}

.content-section,
.hero,
.join-section {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 42px;
  min-height: 100vh;
  padding: 176px 44px 70px;
  align-items: center;
  overflow: hidden;
}

.section-frame {
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(217, 164, 65, 0.11), transparent 28%),
    linear-gradient(180deg, rgba(20, 14, 9, 0.78), rgba(6, 5, 4, 0.64));
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(255, 210, 119, 0.07);
}

.section-frame::before,
.section-frame::after {
  position: absolute;
  width: 52px;
  height: 52px;
  border-color: var(--gold);
  opacity: 0.75;
  content: "";
}

.section-frame::before {
  top: 16px;
  left: 16px;
  border-top: 1px solid;
  border-left: 1px solid;
}

.section-frame::after {
  right: 16px;
  bottom: 16px;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.moon {
  position: absolute;
  top: 120px;
  right: 16%;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 32%, #fff0c4, var(--gold-bright) 42%, #7f571e 72%);
  box-shadow: 0 0 90px rgba(255, 210, 119, 0.24);
  animation: floatMoon 8s ease-in-out infinite;
}

.spire {
  position: absolute;
  bottom: 0;
  width: 130px;
  background: linear-gradient(180deg, transparent, #050302 36%, #0c0704);
  clip-path: polygon(50% 0, 60% 22%, 76% 22%, 70% 38%, 100% 100%, 0 100%, 30% 38%, 24% 22%, 40% 22%);
  opacity: 0.64;
}

.spire-one {
  right: 8%;
  height: 440px;
}

.spire-two {
  right: 24%;
  height: 310px;
  opacity: 0.44;
}

.spire-three {
  left: 4%;
  height: 250px;
  opacity: 0.32;
}

.eyebrow {
  margin: 0 0 16px;
  color: var(--gold-bright);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 760px;
  margin-bottom: 22px;
  font-size: clamp(3.3rem, 8vw, 7.8rem);
  line-height: 0.91;
  text-wrap: balance;
  text-shadow: 0 0 38px rgba(217, 164, 65, 0.18);
}

h2 {
  margin-bottom: 18px;
  font-size: clamp(2.1rem, 4vw, 4.2rem);
  line-height: 1;
}

h3 {
  margin-bottom: 12px;
  color: var(--gold-bright);
  font-size: 1.18rem;
}

p,
li {
  color: var(--muted);
  line-height: 1.8;
}

.hero-copy {
  max-width: 680px;
  font-size: 1.08rem;
}

.hero-actions,
.join-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  font: 800 0.92rem "Exo 2", system-ui, sans-serif;
  letter-spacing: 0.02em;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.btn::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: translateX(-120%);
  transition: transform 700ms ease;
  content: "";
}

.register-primary {
  min-height: 58px;
  padding: 0 32px;
  border-color: rgba(255, 205, 138, 0.55);
  box-shadow: 0 0 36px rgba(217, 164, 65, 0.28), 0 16px 42px rgba(156, 29, 52, 0.22);
  text-transform: uppercase;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 44px rgba(217, 164, 65, 0.18);
}

.btn:hover::before {
  transform: translateX(120%);
}

.btn.primary {
  color: #160f07;
  border-color: rgba(255, 210, 119, 0.64);
  background: linear-gradient(135deg, var(--gold-bright), var(--gold) 48%, #9b6318);
}

.btn.ghost {
  color: var(--gold-bright);
  background: rgba(217, 164, 65, 0.08);
}

.server-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 620px;
  margin-top: 48px;
}

.server-stats div,
.hero-card,
.feature-card,
.doc-card,
.character-card,
.rule-item {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: inset 0 0 30px rgba(217, 164, 65, 0.05);
  backdrop-filter: blur(14px);
}

.server-stats div {
  padding: 17px;
  border-radius: 18px;
}

.server-stats strong,
.server-stats span {
  display: block;
}

.server-stats strong {
  color: var(--gold-bright);
  font-family: "Exo 2", system-ui, sans-serif;
}

.server-stats span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.8rem;
}

.hero-card {
  position: relative;
  padding: 34px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(28, 18, 10, 0.92), rgba(9, 7, 5, 0.84));
}

.hero-card::before {
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(217, 164, 65, 0.24);
  border-radius: 20px;
  content: "";
}

.card-crown {
  display: grid;
  width: 62px;
  height: 62px;
  margin-bottom: 28px;
  place-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-bright);
  font-size: 1.6rem;
  animation: pulseGold 2.8s ease-in-out infinite;
}

.hero-card a {
  position: relative;
  z-index: 1;
  color: var(--gold-bright);
  font-weight: 800;
}

.content-section {
  padding: 110px 0;
}

.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 34px;
}

.section-heading {
  max-width: 760px;
}

.section-heading.centered {
  margin: 0 auto 44px;
  text-align: center;
}

.about-panel {
  align-self: end;
  padding: 28px;
  border-left: 1px solid var(--line);
}

.feature-grid,
.character-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-column: 1 / -1;
  gap: 18px;
}

.feature-card,
.character-card,
.rule-item {
  position: relative;
  padding: 28px;
  overflow: hidden;
  border-radius: 24px;
  transition: transform 260ms ease, border-color 260ms ease, background 260ms ease;
}

.feature-card::after,
.character-card::after,
.rule-item::after {
  position: absolute;
  inset: auto -30% -42% auto;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(217, 164, 65, 0.12);
  filter: blur(16px);
  content: "";
}

.feature-card:hover,
.character-card:hover,
.rule-item:hover {
  transform: translateY(-7px);
  border-color: rgba(255, 210, 119, 0.72);
  background: var(--panel-strong);
}

.feature-card span {
  display: inline-block;
  margin-bottom: 32px;
  color: var(--gold);
  font-family: "Exo 2", system-ui, sans-serif;
  font-size: 2.4rem;
  opacity: 0.55;
}

.story-section,
.character-section,
.join-section {
  position: relative;
  padding: 80px 42px;
}

.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.timeline::before {
  position: absolute;
  top: 34px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  content: "";
}

.timeline-item {
  position: relative;
  padding: 76px 24px 24px;
}

.timeline-item::before {
  position: absolute;
  top: 20px;
  left: 24px;
  width: 28px;
  height: 28px;
  border: 1px solid var(--gold-bright);
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 26px var(--shadow);
  content: "";
}

.timeline-item time {
  color: var(--gold);
  font-family: "Exo 2", system-ui, sans-serif;
  font-weight: 800;
}

.doc-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 22px;
}

.doc-tabs {
  display: grid;
  gap: 12px;
  align-content: start;
}

.doc-tab {
  padding: 17px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--muted);
  background: rgba(217, 164, 65, 0.05);
  cursor: pointer;
  text-align: left;
  transition: 220ms ease;
}

.doc-tab.active,
.doc-tab:hover {
  color: #160f07;
  border-color: var(--gold-bright);
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
}

.doc-card {
  min-height: 370px;
  padding: 34px;
  border-radius: 28px;
}

.doc-content {
  display: none;
  animation: fadeSlide 360ms ease both;
}

.doc-content.active {
  display: block;
}

.doc-content ul {
  padding-left: 20px;
}

.doc-content li::marker {
  color: var(--gold);
}

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

.portrait {
  height: 220px;
  margin: -8px -8px 24px;
  border: 1px solid rgba(217, 164, 65, 0.24);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 26%, rgba(255, 210, 119, 0.58), transparent 12%),
    linear-gradient(150deg, rgba(217, 164, 65, 0.22), rgba(109, 21, 21, 0.18)),
    linear-gradient(180deg, #211407, #050302);
  clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%);
}

.portrait.noble {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 210, 119, 0.62), transparent 13%),
    linear-gradient(135deg, #32200c, #080504 72%);
}

.portrait.outlaw {
  background:
    radial-gradient(circle at 50% 18%, rgba(217, 164, 65, 0.5), transparent 13%),
    linear-gradient(135deg, #250707, #050302 72%);
}

.portrait.medic {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 228, 167, 0.58), transparent 13%),
    linear-gradient(135deg, #232018, #060504 72%);
}

.portrait.detective {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 210, 119, 0.45), transparent 13%),
    linear-gradient(135deg, #101721, #050302 72%);
}

.rules-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.rule-item {
  display: grid;
  gap: 16px;
  align-content: start;
  padding: 18px 18px 22px;
}

.rule-visual {
  position: relative;
  min-height: 220px;
  margin: 0 0 6px;
  overflow: hidden;
  border: 1px solid rgba(245, 198, 108, 0.14);
  border-radius: 16px;
  background-position: center;
  background-size: cover;
}

.rule-visual::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 7, 6, 0.02), rgba(6, 7, 6, 0.72)),
    radial-gradient(circle at 72% 18%, rgba(245, 198, 108, 0.16), transparent 9rem);
  content: "";
}

.rule-visual.temperature {
  background-image: url("/images/rule-temperature.webp");
}

.rule-visual.night {
  background-image: url("/images/rule-night.webp");
}

.rule-visual.condition {
  background-image: url("/images/rule-condition.webp");
}

.rule-visual.community {
  background-image: url("/images/rule-community.webp");
}

.rule-item span {
  color: var(--gold-bright);
  font-size: 1.25rem;
}

.rule-item p {
  margin-bottom: 0;
}

.join-section {
  margin-bottom: 84px;
  text-align: center;
}

.join-section p {
  max-width: 650px;
  margin-right: auto;
  margin-left: auto;
}

.join-actions {
  justify-content: center;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 42px;
  border-top: 1px solid var(--line);
}

@media (min-width: 981px) and (max-width: 1500px) {
  .hero-content,
  .about-grid > .section-heading,
  .about-panel {
    padding-left: 250px;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}

.site-footer p,
.site-footer a {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.site-footer a {
  color: var(--gold-bright);
}

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 700ms ease, transform 700ms ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.delay-1 {
  transition-delay: 120ms;
}

.delay-2 {
  transition-delay: 220ms;
}

.delay-3 {
  transition-delay: 320ms;
}

@keyframes floatMoon {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-18px);
  }
}

@keyframes pulseGold {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(217, 164, 65, 0);
  }
  50% {
    box-shadow: 0 0 34px rgba(217, 164, 65, 0.36);
  }
}

@keyframes fadeSlide {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 980px) {
  .site-header {
    top: 18px;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(1180px, calc(100% - 32px));
    height: auto;
    padding: 12px 14px;
    transform: translateX(-50%);
    border-radius: 28px;
  }

  .nav-toggle {
    display: block;
  }

  .sidebar-socials {
    display: none;
  }

  .main-nav {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    display: grid;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgba(8, 6, 4, 0.94);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: 220ms ease;
  }

  .content-section,
  .hero,
  .join-section,
  .site-footer {
    width: min(1180px, calc(100% - 32px));
    margin-right: auto;
    margin-left: auto;
  }

  .main-nav.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .hero,
  .about-grid,
  .doc-layout,
  .donate-section {
    grid-template-columns: 1fr;
  }

  .hero {
    padding: 154px 24px 54px;
  }

  .hero-card {
    max-width: 520px;
  }

  .feature-grid,
  .timeline,
  .character-grid,
  .rules-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .donate-section {
    grid-template-columns: 1fr;
    padding: 54px 24px;
  }

  .donate-tier-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .content-section {
    padding: 78px 0;
  }

  .hero {
    width: 100%;
    min-height: auto;
    padding: 142px 18px 44px;
    border-right: 0;
    border-left: 0;
  }

  .moon {
    top: 118px;
    right: -24px;
    width: 108px;
    height: 108px;
  }

  h1 {
    font-size: clamp(3rem, 18vw, 4.7rem);
  }

  .server-stats,
  .feature-grid,
  .timeline,
  .character-grid,
  .rules-list,
  .rule-item {
    grid-template-columns: 1fr;
  }

  .story-section,
  .character-section,
  .join-section {
    padding: 58px 20px;
  }

  .timeline::before {
    display: none;
  }

  .doc-card {
    padding: 24px;
  }

  .site-footer {
    display: grid;
    gap: 12px;
  }
}

/* Taste refresh: cinematic survival city language for the public landing page. */
:root {
  --bg: #060706;
  --bg-soft: #10110f;
  --panel: rgba(18, 19, 16, 0.78);
  --panel-strong: rgba(28, 27, 22, 0.94);
  --gold: #d6a554;
  --gold-bright: #f5c66c;
  --gold-dark: #70501f;
  --cream: #f6efe4;
  --muted: #b9ad9b;
  --line: rgba(245, 198, 108, 0.22);
  --shadow: rgba(214, 165, 84, 0.16);
  --danger: #7d2530;
  --forest: #20352b;
  --rust: #9b4f35;
}

body {
  background:
    linear-gradient(180deg, rgba(6, 7, 6, 0.16), rgba(6, 7, 6, 0.92) 70%),
    radial-gradient(circle at 72% 10%, rgba(155, 79, 53, 0.24), transparent 26rem),
    radial-gradient(circle at 18% 18%, rgba(32, 53, 43, 0.34), transparent 30rem),
    linear-gradient(135deg, #050605 0%, #11120f 52%, #080705 100%);
  font-family: "Exo 2", system-ui, sans-serif;
}

body::before {
  background-image:
    linear-gradient(rgba(245, 198, 108, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 198, 108, 0.035) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: linear-gradient(90deg, transparent, black 16%, black 84%, transparent);
}

body::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.68), transparent 13%, transparent 87%, rgba(0, 0, 0, 0.68)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.36), transparent 22%, rgba(0, 0, 0, 0.2));
}

.noise {
  opacity: 0.11;
  mix-blend-mode: soft-light;
}

.cursor-glow {
  background: radial-gradient(circle, rgba(245, 198, 108, 0.1), transparent 64%);
}

.site-header {
  width: 252px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(13, 14, 12, 0.86), rgba(8, 8, 7, 0.7));
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.brand-mark {
  border-radius: 14px;
  color: #17110a;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  box-shadow: 0 14px 32px rgba(214, 165, 84, 0.2);
}

.brand small,
.eyebrow {
  letter-spacing: 0.12em;
}

.main-nav a,
.sidebar-socials a,
.doc-tab {
  border-radius: 12px;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.sidebar-socials a:hover,
.sidebar-socials a:focus-visible {
  border-color: rgba(245, 198, 108, 0.34);
  background: rgba(245, 198, 108, 0.09);
}

.content-section,
.hero,
.join-section,
.site-footer {
  width: min(1240px, calc(100% - 40px));
}

@media (min-width: 1181px) {
  .content-section,
  .hero,
  .join-section,
  .site-footer {
    margin-right: clamp(24px, 5vw, 96px);
    margin-left: max(292px, clamp(24px, 5vw, 96px));
    width: auto;
  }
}

.hero {
  grid-template-columns: minmax(0, 820px) minmax(320px, 430px);
  gap: 34px;
  justify-content: space-between;
  min-height: 100dvh;
  padding: 142px 44px 54px;
  border-radius: 0 0 34px 34px;
  isolation: isolate;
}

.section-frame {
  border-color: rgba(245, 198, 108, 0.18);
  background:
    linear-gradient(135deg, rgba(245, 198, 108, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(20, 22, 18, 0.8), rgba(7, 8, 7, 0.68));
  box-shadow: 0 34px 120px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.section-frame::before,
.section-frame::after {
  display: none;
}

.hero-bg {
  background:
    linear-gradient(90deg, rgba(6, 7, 6, 0.94), rgba(6, 7, 6, 0.68) 42%, rgba(6, 7, 6, 0.34) 70%, rgba(6, 7, 6, 0.72)),
    linear-gradient(180deg, rgba(6, 7, 6, 0.22), rgba(6, 7, 6, 0.92) 88%),
    radial-gradient(circle at 74% 24%, rgba(245, 198, 108, 0.2), transparent 18rem),
    url("/images/eastiny-gothic-hero.webp") center / cover no-repeat;
}

.hero-bg::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
    repeating-linear-gradient(90deg, transparent 0 76px, rgba(245, 198, 108, 0.04) 77px 78px),
    linear-gradient(135deg, rgba(32, 53, 43, 0.36), transparent 44%);
  content: "";
}

.world-map {
  position: absolute;
  inset: 4% 3% 0 auto;
  width: min(720px, 58vw);
  opacity: 0.12;
  aspect-ratio: 1.2;
  border: 1px solid rgba(245, 198, 108, 0.16);
  border-radius: 26px;
  background:
    radial-gradient(circle at 18% 62%, rgba(245, 198, 108, 0.24) 0 2px, transparent 3px),
    radial-gradient(circle at 46% 34%, rgba(245, 198, 108, 0.2) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 52%, rgba(245, 198, 108, 0.22) 0 2px, transparent 3px),
    linear-gradient(120deg, transparent 9%, rgba(245, 198, 108, 0.11) 10%, transparent 11% 30%, rgba(245, 198, 108, 0.08) 31%, transparent 32% 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent);
  filter: blur(0.2px);
  transform: rotate(-4deg);
}

.moon {
  top: 90px;
  right: 13%;
  width: 118px;
  height: 118px;
  background:
    radial-gradient(circle at 32% 32%, #fff2d0, var(--gold-bright) 38%, #9c6b28 70%);
  opacity: 0.36;
  box-shadow: 0 0 84px rgba(245, 198, 108, 0.22);
}

.spire {
  background: linear-gradient(180deg, transparent, rgba(7, 8, 7, 0.82) 32%, #050504);
  opacity: 0.42;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-visual-panel {
  position: absolute;
  right: clamp(28px, 4vw, 64px);
  bottom: clamp(46px, 6vw, 86px);
  z-index: 3;
  display: grid;
  align-content: end;
  width: clamp(280px, 22vw, 420px);
  min-height: clamp(360px, 38vw, 540px);
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(245, 198, 108, 0.22);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(11, 12, 10, 0.12), rgba(6, 7, 6, 0.92) 66%),
    radial-gradient(circle at 50% 18%, rgba(245, 198, 108, 0.22), transparent 18rem),
    rgba(11, 12, 10, 0.72);
  box-shadow: 0 34px 110px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.hero-visual-panel img {
  position: absolute;
  top: -52px;
  left: 50%;
  width: 118%;
  max-width: none;
  opacity: 0.82;
  transform: translateX(-50%);
  filter: drop-shadow(0 34px 70px rgba(0, 0, 0, 0.42));
}

.hero-visual-panel span,
.hero-visual-panel strong {
  position: relative;
  z-index: 1;
}

.hero-visual-panel span {
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 11px;
  border: 1px solid rgba(245, 198, 108, 0.22);
  border-radius: 999px;
  color: var(--gold-bright);
  background: rgba(245, 198, 108, 0.09);
  font-size: 0.73rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-visual-panel strong {
  color: var(--cream);
  font-size: clamp(2rem, 2.7vw, 3.35rem);
  line-height: 0.96;
}

h1 {
  max-width: 820px;
  margin-bottom: 24px;
  font-size: clamp(3.9rem, 8.2vw, 8.6rem);
  line-height: 0.88;
  letter-spacing: 0;
  text-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
}

h2 {
  letter-spacing: 0;
}

.hero-copy {
  max-width: 620px;
  color: #d8cdbb;
  font-size: clamp(1rem, 1.3vw, 1.17rem);
}

.btn {
  min-height: 52px;
  border-radius: 12px;
  letter-spacing: 0.01em;
}

.btn.primary {
  color: #15100a;
  background: linear-gradient(135deg, #f8d27d, #d6a554 52%, #a9692e);
}

.btn.ghost {
  color: var(--cream);
  background: rgba(255, 255, 255, 0.055);
}

.server-stats {
  max-width: 670px;
  margin-top: 42px;
}

.server-stats div,
.feature-card,
.doc-card,
.character-card,
.rule-item,
.register-steps article {
  border-color: rgba(245, 198, 108, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    rgba(16, 17, 14, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
}

.server-stats div {
  border-radius: 14px;
}

.server-stats strong {
  font-size: 1.15rem;
}

.hero-card {
  z-index: 2;
  display: grid;
  align-content: end;
  justify-self: end;
  width: min(430px, 100%);
  min-height: 560px;
  padding: 28px;
  overflow: hidden;
  border-radius: 26px;
  border-color: rgba(245, 198, 108, 0.24);
  background:
    linear-gradient(180deg, rgba(13, 15, 13, 0.2), rgba(7, 8, 7, 0.9) 64%),
    radial-gradient(circle at 50% 18%, rgba(245, 198, 108, 0.24), transparent 24rem),
    rgba(10, 11, 10, 0.86);
}

@media (min-width: 981px) {
  .hero-card {
    display: none;
  }
}

.hero-card::before {
  inset: auto 18px 18px;
  height: 46%;
  border: 1px solid rgba(245, 198, 108, 0.16);
  border-radius: 18px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.2));
}

.crest-orbit {
  position: absolute;
  top: -42px;
  left: 50%;
  display: grid;
  width: min(400px, 92%);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  transform: translateX(-50%);
  background:
    radial-gradient(circle, rgba(245, 198, 108, 0.13), transparent 64%),
    conic-gradient(from 90deg, transparent, rgba(245, 198, 108, 0.2), transparent 48%);
}

.crest-orbit img {
  width: 118%;
  max-width: none;
  opacity: 0.82;
  filter: drop-shadow(0 34px 70px rgba(0, 0, 0, 0.42));
  mix-blend-mode: screen;
}

.card-crown {
  z-index: 1;
  width: fit-content;
  height: auto;
  margin-bottom: 18px;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--gold-bright);
  background: rgba(245, 198, 108, 0.09);
  font-size: 0.73rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  animation: none;
}

.hero-card-title {
  position: relative;
  z-index: 1;
  max-width: 100%;
  font-size: clamp(2.25rem, 3vw, 3.65rem) !important;
  overflow-wrap: anywhere;
}

.hero-card p,
.hero-card a {
  z-index: 1;
}

.about-grid {
  grid-template-columns: minmax(0, 0.85fr) minmax(420px, 1.15fr);
  gap: 44px;
}

.about-panel {
  display: grid;
  gap: 24px;
  align-self: stretch;
  padding: 0;
  border-left: 0;
}

.about-panel p {
  padding: 0 4px;
  font-size: 1.02rem;
}

.about-image {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  border: 1px solid rgba(245, 198, 108, 0.16);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(6, 7, 6, 0.02), rgba(6, 7, 6, 0.76)),
    linear-gradient(90deg, rgba(6, 7, 6, 0.18), transparent 52%),
    url("/images/eastiny-gothic-chronicle.webp") center / cover no-repeat;
  box-shadow: 0 24px 84px rgba(0, 0, 0, 0.28);
}

.about-image::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(140deg, transparent 0 12%, rgba(255, 255, 255, 0.08) 13% 14%, transparent 15% 100%),
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(245, 198, 108, 0.045) 27px 28px),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(245, 198, 108, 0.04) 39px 40px);
  content: "";
}

.about-image span {
  position: absolute;
  display: none;
  right: 8%;
  bottom: -1px;
  width: 52%;
  height: 68%;
  border-radius: 16px 16px 0 0;
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(245, 198, 108, 0.28) 19% 21%, transparent 22% 44%, rgba(245, 198, 108, 0.18) 45% 47%, transparent 48%),
    linear-gradient(180deg, #22231d, #080908);
  clip-path: polygon(0 100%, 0 34%, 12% 34%, 12% 18%, 26% 18%, 26% 0, 39% 0, 39% 26%, 56% 26%, 56% 12%, 74% 12%, 74% 44%, 100% 44%, 100% 100%);
}

.feature-grid {
  gap: 16px;
}

.feature-card,
.character-card,
.rule-item,
.register-steps article,
.doc-card {
  border-radius: 18px;
}

.register-steps article {
  overflow: hidden;
  padding: 0 18px 20px;
}

.register-step-visual {
  position: relative;
  height: 168px;
  margin: 0 -18px 18px;
  overflow: hidden;
  border-bottom: 1px solid rgba(245, 198, 108, 0.14);
  background-position: center;
  background-size: cover;
}

.register-step-visual::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 7, 6, 0.04), rgba(6, 7, 6, 0.74)),
    radial-gradient(circle at 72% 20%, rgba(245, 198, 108, 0.16), transparent 9rem);
  content: "";
}

.register-step-visual.account {
  background-image: url("/images/register-step-account.webp");
}

.register-step-visual.discord {
  background-image: url("/images/register-step-discord.webp");
}

.register-step-visual.launcher {
  background-image: url("/images/register-step-launcher.webp");
}

.feature-card {
  min-height: 260px;
}

.feature-card span {
  margin-bottom: 42px;
  color: rgba(245, 198, 108, 0.42);
  font-size: 3rem;
}

.story-section,
.character-section,
.join-section,
.register-section {
  border-radius: 28px;
}

.story-section {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(6, 7, 6, 0.74), rgba(6, 7, 6, 0.92)),
    linear-gradient(90deg, rgba(6, 7, 6, 0.92), rgba(6, 7, 6, 0.38) 52%, rgba(6, 7, 6, 0.9)),
    url("/images/eastiny-gothic-chronicle.webp") center / cover no-repeat;
}

.story-section > * {
  position: relative;
  z-index: 1;
}

.timeline {
  align-items: stretch;
}

.timeline::before {
  top: 42px;
  background: linear-gradient(90deg, transparent, rgba(245, 198, 108, 0.44), transparent);
}

.timeline-item {
  min-height: 250px;
  border: 1px solid rgba(245, 198, 108, 0.14);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
}

.doc-layout {
  grid-template-columns: minmax(220px, 0.32fr) minmax(0, 1fr);
}

.doc-card {
  background:
    linear-gradient(135deg, rgba(245, 198, 108, 0.08), transparent 32%),
    linear-gradient(180deg, rgba(17, 18, 15, 0.84), rgba(8, 9, 8, 0.76));
}

.doc-visual {
  position: relative;
  min-height: 260px;
  margin: -10px -10px 28px;
  overflow: hidden;
  border: 1px solid rgba(245, 198, 108, 0.16);
  border-radius: 16px;
  background-position: center;
  background-size: cover;
}

.doc-visual::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 7, 6, 0.02), rgba(6, 7, 6, 0.68)),
    radial-gradient(circle at 74% 16%, rgba(245, 198, 108, 0.14), transparent 12rem);
  content: "";
}

.doc-visual.newbie {
  background-image: url("/images/guide-register-account.webp");
}

.doc-visual.launcher {
  background-image: url("/images/guide-launcher.webp");
}

.doc-visual.terms {
  background-image: url("/images/guide-terms.webp");
}

.doc-visual.copyright {
  background-image: url("/images/guide-copyright.webp");
}

.doc-cta {
  width: fit-content;
  margin-top: 18px;
}

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

.portrait {
  position: relative;
  height: 278px;
  margin: -10px -10px 24px;
  overflow: hidden;
  border-color: rgba(245, 198, 108, 0.18);
  border-radius: 16px;
  clip-path: none;
  background:
    linear-gradient(180deg, rgba(5, 6, 5, 0.02), rgba(5, 6, 5, 0.82)),
    radial-gradient(circle at 50% 24%, rgba(245, 198, 108, 0.28), transparent 7rem),
    linear-gradient(135deg, #24392f, #0b0d0b 62%, #623322);
  background-position: center;
  background-size: cover;
}

.portrait::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 6, 5, 0.02), transparent 34%, rgba(5, 6, 5, 0.74)),
    radial-gradient(circle at 50% 24%, rgba(245, 198, 108, 0.12), transparent 9rem);
  content: "";
}

.portrait::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(245, 198, 108, 0.12);
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 18% 82%, rgba(245, 198, 108, 0.08));
  content: "";
  pointer-events: none;
}

.portrait span {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  color: rgba(246, 239, 228, 0.72);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.portrait.noble {
  background:
    linear-gradient(180deg, rgba(5, 6, 5, 0.04), rgba(5, 6, 5, 0.76)),
    url("/images/character-merchant.webp") center 34% / cover no-repeat;
}

.portrait.outlaw {
  background:
    linear-gradient(180deg, rgba(5, 6, 5, 0.02), rgba(5, 6, 5, 0.78)),
    url("/images/character-protector.webp") center 30% / cover no-repeat;
}

.portrait.medic {
  background:
    linear-gradient(180deg, rgba(5, 6, 5, 0.02), rgba(5, 6, 5, 0.78)),
    url("/images/character-medic.webp") center 30% / cover no-repeat;
}

.portrait.detective {
  background:
    linear-gradient(180deg, rgba(5, 6, 5, 0.02), rgba(5, 6, 5, 0.78)),
    url("/images/character-alchemist.webp") center 32% / cover no-repeat;
}

.rule-item {
  grid-template-columns: 1fr;
}

.donate-page {
  min-height: calc(100dvh - 120px);
  padding-top: 120px;
}

.donate-section {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);
  gap: 34px;
  align-items: stretch;
  padding: 64px 42px;
  overflow: hidden;
}

.donate-section::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 7, 6, 0.94), rgba(6, 7, 6, 0.78) 45%, rgba(6, 7, 6, 0.48)),
    linear-gradient(180deg, rgba(6, 7, 6, 0.34), rgba(6, 7, 6, 0.88)),
    radial-gradient(circle at 82% 20%, rgba(245, 198, 108, 0.22), transparent 20rem),
    radial-gradient(circle at 12% 80%, rgba(155, 79, 53, 0.18), transparent 18rem),
    url("/images/eastiny-gothic-donate.webp") center / cover no-repeat;
  content: "";
  pointer-events: none;
}

.donate-copy,
.payment-card {
  position: relative;
  z-index: 1;
}

.donate-copy h2 {
  max-width: 780px;
}

.donate-copy > p {
  max-width: 720px;
}

.donate-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 34px;
}

.donate-tier {
  appearance: none;
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  min-height: 190px;
  padding: 20px;
  border: 1px solid rgba(245, 198, 108, 0.15);
  border-radius: 18px;
  background: rgba(7, 8, 7, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}

.donate-tier:hover,
.donate-tier.featured {
  border-color: rgba(245, 198, 108, 0.46);
  background:
    linear-gradient(180deg, rgba(245, 198, 108, 0.14), rgba(245, 198, 108, 0.04)),
    rgba(7, 8, 7, 0.5);
}

.donate-tier:hover {
  transform: translateY(-3px);
}

.donate-tier.selected {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(245, 198, 108, 0.24);
}

.donate-tier span,
.payment-card-head span,
.payment-summary span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.donate-tier strong {
  display: block;
  margin-top: 18px;
  color: var(--gold-bright);
  font-size: clamp(1.65rem, 2.3vw, 2.4rem);
  line-height: 1;
}

.donate-tier em {
  display: inline-flex;
  width: fit-content;
  margin-top: 10px;
  padding: 6px 9px;
  border: 1px solid rgba(157, 255, 191, 0.26);
  border-radius: 999px;
  color: #9dffbf;
  background: rgba(157, 255, 191, 0.07);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.donate-tier p {
  margin: 16px 0 0;
  line-height: 1.55;
}

.payment-card {
  display: grid;
  gap: 18px;
  padding: 24px;
  border: 1px solid rgba(245, 198, 108, 0.28);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)),
    radial-gradient(circle at 78% 10%, rgba(245, 198, 108, 0.16), transparent 14rem),
    rgba(8, 9, 8, 0.86);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.payment-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.payment-card-head strong {
  color: var(--cream);
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1;
}

.payment-live-status {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid rgba(245, 198, 108, 0.16);
  border-radius: 14px;
  background: rgba(245, 198, 108, 0.08);
}

.payment-live-status span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.payment-live-status strong {
  color: var(--gold-bright);
  overflow-wrap: anywhere;
}

.payment-live-status.paid {
  border-color: rgba(124, 211, 155, 0.36);
  background: rgba(38, 135, 86, 0.14);
}

.payment-qr {
  position: relative;
  display: grid;
  min-height: 250px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(245, 198, 108, 0.18);
  border-radius: 18px;
  background:
    repeating-linear-gradient(90deg, rgba(245, 198, 108, 0.18) 0 10px, transparent 10px 20px),
    repeating-linear-gradient(0deg, rgba(245, 198, 108, 0.14) 0 10px, transparent 10px 20px),
    rgba(0, 0, 0, 0.34);
  background-blend-mode: screen;
}

.payment-qr.real-qr {
  min-height: 310px;
  padding: 18px;
  background: #f7f2e6;
}

.payment-qr.real-qr img {
  width: min(100%, 290px);
  opacity: 1;
  filter: none;
}

.payment-qr:not(.real-qr)::before {
  position: absolute;
  inset: 28px;
  border: 10px solid rgba(6, 7, 6, 0.88);
  border-radius: 14px;
  content: "";
}

.payment-qr span {
  position: absolute;
  width: 52px;
  height: 52px;
  border: 8px solid var(--gold-bright);
  border-radius: 8px;
}

.payment-qr span:nth-child(1) {
  top: 30px;
  left: 30px;
}

.payment-qr span:nth-child(2) {
  top: 30px;
  right: 30px;
}

.payment-qr span:nth-child(3) {
  bottom: 30px;
  left: 30px;
}

.payment-qr img {
  position: relative;
  z-index: 1;
  width: min(170px, 58%);
  opacity: 0.9;
  filter: drop-shadow(0 16px 34px rgba(0, 0, 0, 0.36));
}

.payment-summary {
  display: grid;
  gap: 10px;
}

.payment-summary div {
  display: grid;
  grid-template-columns: 0.82fr 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(245, 198, 108, 0.11);
}

.payment-summary strong,
.payment-summary code {
  color: var(--cream);
  font-weight: 900;
}

.payment-summary code {
  padding: 7px 9px;
  border: 1px solid rgba(245, 198, 108, 0.18);
  border-radius: 10px;
  background: rgba(245, 198, 108, 0.08);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.payment-message {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(245, 198, 108, 0.16);
  border-radius: 12px;
  color: var(--cream);
  background: rgba(0, 0, 0, 0.22);
  line-height: 1.45;
}

.payment-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.payment-methods span {
  padding: 8px 10px;
  border: 1px solid rgba(245, 198, 108, 0.2);
  border-radius: 999px;
  color: var(--gold-bright);
  background: rgba(245, 198, 108, 0.08);
  font-size: 0.78rem;
  font-weight: 900;
}

.payment-included {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.payment-included li {
  color: var(--muted);
  line-height: 1.45;
}

.payment-included li::before {
  color: var(--gold-bright);
  content: "✓ ";
  font-weight: 900;
}

.payment-primary {
  width: 100%;
}

.payment-secondary {
  color: var(--gold-bright);
  font-weight: 900;
  text-align: center;
}

.join-section {
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(6, 7, 6, 0.82), rgba(6, 7, 6, 0.64)),
    radial-gradient(circle at 50% 0%, rgba(245, 198, 108, 0.16), transparent 28rem),
    linear-gradient(135deg, rgba(32, 53, 43, 0.4), rgba(155, 79, 53, 0.22));
}

.site-footer {
  border-color: rgba(245, 198, 108, 0.14);
}

@media (min-width: 981px) and (max-width: 1500px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(310px, 0.58fr);
  }
}

@media (max-width: 980px) {
  .site-header {
    width: min(1180px, calc(100% - 32px));
    border-radius: 18px;
  }

  .content-section,
  .hero,
  .join-section,
  .site-footer {
    width: min(1180px, calc(100% - 32px));
  }

  .hero,
  .about-grid,
  .doc-layout {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: 100dvh;
    padding: 138px 24px 46px;
  }

  .hero-card {
    min-height: 440px;
    max-width: none;
  }

  .hero-visual-panel {
    display: none;
  }

  .about-grid > .section-heading,
  .about-panel,
  .hero-content {
    padding-left: 0;
  }

  .about-image {
    min-height: 280px;
  }

  .feature-grid,
  .timeline,
  .character-grid,
  .rules-list,
  .donate-tier-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .site-header {
    left: 12px;
    right: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    width: auto;
    transform: none;
  }

  .site-header::after {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 22px;
    height: 16px;
    background:
      linear-gradient(var(--gold-bright), var(--gold-bright)) 0 0 / 22px 2px no-repeat,
      linear-gradient(var(--gold-bright), var(--gold-bright)) 0 7px / 22px 2px no-repeat,
      linear-gradient(var(--gold-bright), var(--gold-bright)) 0 14px / 22px 2px no-repeat;
    content: "";
    pointer-events: none;
  }

  .brand {
    min-width: 0;
  }

  .nav-toggle {
    display: grid !important;
    position: relative;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(245, 198, 108, 0.18);
    border-radius: 12px;
    background: rgba(245, 198, 108, 0.08);
  }

  .nav-toggle span {
    position: absolute;
    left: 10px;
    width: 20px;
    height: 2px;
    margin: 0;
    border-radius: 999px;
    background: var(--gold-bright);
  }

  .nav-toggle span:nth-child(1) {
    top: 13px;
  }

  .nav-toggle span:nth-child(2) {
    top: 20px;
  }

  .nav-toggle span:nth-child(3) {
    top: 27px;
  }

  .content-section,
  .hero,
  .join-section,
  .site-footer {
    width: min(100%, calc(100% - 24px));
    max-width: 100%;
  }

  .hero {
    width: calc(100% - 24px);
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
    min-height: auto;
    padding: 132px 18px 34px;
    border-radius: 24px;
  }

  .hero-content,
  .hero-copy {
    width: 100%;
    max-width: 320px;
  }

  .hero-actions,
  .server-stats {
    width: 100%;
    max-width: 320px;
  }

  h1 {
    font-size: clamp(3rem, 17vw, 4.8rem);
  }

  .hero-copy {
    font-size: 1rem;
  }

  .hero-actions,
  .join-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .btn {
    width: 100%;
  }

  .server-stats,
  .feature-grid,
  .timeline,
  .character-grid,
  .rules-list,
  .donate-tier-grid,
  .rule-item {
    grid-template-columns: 1fr;
  }

  .hero-card {
    min-height: 0;
    padding: 22px;
    align-content: start;
    gap: 12px;
  }

  .crest-orbit {
    top: auto;
    right: -54px;
    bottom: -74px;
    left: auto;
    width: min(250px, 76%);
    opacity: 0.28;
    transform: none;
  }

  .crest-orbit img {
    width: 112%;
    opacity: 0.64;
  }

  .hero-card::before {
    inset: 12px;
    height: auto;
  }

  .hero-card-title {
    margin-bottom: 8px;
    font-size: clamp(2rem, 13vw, 3.25rem) !important;
  }

  .about-image {
    min-height: 230px;
  }

  .story-section,
  .character-section,
  .join-section,
  .register-section {
    padding: 52px 18px;
    border-radius: 22px;
  }

  .donate-section {
    padding: 52px 18px;
    border-radius: 22px;
  }

  .donate-page {
    padding-top: 108px;
  }

  .donate-tier {
    min-height: 0;
  }

  .payment-card {
    padding: 18px;
  }

  .payment-qr {
    min-height: 220px;
  }

  .payment-summary div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

@media (max-width: 980px) {
  .donate-section {
    grid-template-columns: 1fr !important;
  }

  .donate-tier-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .donate-section {
    padding: 34px 18px;
  }

  .donate-tier-grid {
    grid-template-columns: 1fr;
  }

  .donate-tier {
    min-height: 0;
  }
}

/* Final navigation pass: convert the old left rail into a true topbar. */
.site-header {
  position: fixed !important;
  top: 18px !important;
  left: 50% !important;
  right: auto !important;
  z-index: 40;
  display: grid !important;
  grid-template-columns: minmax(190px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  width: min(1240px, calc(100% - 32px)) !important;
  height: auto !important;
  min-height: 72px;
  padding: 10px 12px 10px 14px !important;
  transform: translateX(-50%) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(13, 14, 12, 0.92), rgba(8, 8, 7, 0.78)) !important;
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.brand {
  min-width: 0;
}

.brand-mark {
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 14px !important;
  background: rgba(245, 198, 108, 0.08) !important;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
}

.main-nav {
  display: flex !important;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin-top: 0 !important;
}

.main-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  white-space: nowrap;
}

.main-nav a.active {
  color: var(--gold-bright);
  border-color: rgba(245, 198, 108, 0.28);
  background: rgba(245, 198, 108, 0.1);
}

.main-nav .nav-donate {
  min-width: 104px;
  color: #120b07;
  border-color: rgba(255, 210, 119, 0.72);
  background:
    linear-gradient(135deg, var(--gold-bright), var(--gold));
  box-shadow: 0 0 30px rgba(217, 164, 65, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.26);
  font-weight: 900;
}

.main-nav .nav-donate:hover,
.main-nav .nav-donate:focus-visible,
.main-nav .nav-donate.active {
  color: #120b07;
  background: linear-gradient(135deg, #ffe3a0, #d9a441);
  transform: translateY(-1px);
}

.sidebar-socials {
  display: flex !important;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

.sidebar-socials a {
  width: 42px;
  min-height: 42px;
  justify-content: center;
  padding: 0 !important;
}

.sidebar-socials a span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.content-section,
.hero,
.join-section,
.site-footer {
  width: min(1240px, calc(100% - 40px)) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.hero {
  padding-top: 126px !important;
}

.panel-page,
.admin-page {
  padding-top: 118px !important;
}

@media (min-width: 981px) and (max-width: 1500px) {
  .hero-content,
  .about-grid > .section-heading,
  .about-panel {
    padding-left: 0 !important;
  }
}

@media (max-width: 1060px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .nav-toggle {
    display: grid !important;
    position: relative;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(245, 198, 108, 0.18);
    border-radius: 12px;
    background: rgba(245, 198, 108, 0.08);
  }

  .site-header::after {
    display: none !important;
  }

  .main-nav {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(8, 6, 4, 0.96);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: 220ms ease;
  }

  .main-nav.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .sidebar-socials {
    display: none !important;
  }
}

@media (max-width: 680px) {
  .site-header {
    top: 12px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    transform: none !important;
  }

  .brand strong {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .main-nav {
    grid-template-columns: 1fr;
  }

  .hero {
    padding-top: 118px !important;
  }
}

/* Corrected shell: keep the left sidebar, add a separate account topbar. */
.account-topbar {
  position: fixed;
  top: 18px;
  right: clamp(18px, 4vw, 64px);
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 56px;
  padding: 8px;
  border: 1px solid rgba(245, 198, 108, 0.2);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(13, 14, 12, 0.92), rgba(8, 8, 7, 0.78));
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px);
}

.community-page {
  position: relative;
  z-index: auto;
  padding-top: 120px;
}

@media (min-width: 981px) {
  .content-section,
  .hero,
  .join-section,
  .site-footer {
    width: min(1040px, calc(100% - 340px)) !important;
    margin-left: clamp(292px, 22vw, 320px) !important;
    margin-right: clamp(20px, 4vw, 64px) !important;
  }

  .donate-page,
  .community-page {
    width: auto;
  }
}

.community-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.36fr);
  gap: 24px;
  align-items: end;
  min-height: 520px;
  padding: 64px 44px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(6, 7, 6, 0.88), rgba(6, 7, 6, 0.62)),
    radial-gradient(circle at 82% 8%, rgba(217, 164, 65, 0.2), transparent 22rem),
    url("/images/eastiny-gothic-chronicle.webp") center / cover no-repeat;
}

.community-hero h1 {
  max-width: 760px;
  font-size: clamp(3.4rem, 8vw, 7rem);
}

.community-hero p {
  max-width: 760px;
  color: var(--cream);
  font-size: 1.12rem;
  line-height: 1.75;
}

.community-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.community-brief,
.community-guide-grid article,
.community-panel,
.community-post,
.community-empty {
  border: 1px solid rgba(245, 198, 108, 0.18);
  border-radius: 22px;
  background: rgba(7, 8, 7, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.community-brief {
  display: grid;
  gap: 10px;
  padding: 24px;
}

.community-brief span,
.community-guide-grid span,
.community-post-head span {
  color: var(--gold-bright);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.community-brief strong {
  color: var(--gold-bright);
  font-size: 4rem;
  line-height: 1;
}

.community-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 34px 0 0;
}

.community-guide-grid article {
  padding: 20px;
}

.community-guide-grid p,
.community-brief p,
.community-manager-message p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.community-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.78fr);
  gap: 18px;
  padding-top: 34px;
}

.community-panel {
  display: grid;
  gap: 14px;
  padding: 28px;
}

.community-panel h2 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
}

.community-compose.compact {
  gap: 0;
  justify-self: start;
  align-self: start;
  width: min(374px, 100%);
  padding: 14px;
  overflow: hidden;
  transition:
    width 360ms cubic-bezier(0.2, 0.82, 0.2, 1),
    box-shadow 260ms ease,
    border-color 260ms ease;
}

.community-compose.compact.open {
  width: 100%;
  border-color: rgba(245, 198, 108, 0.28);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.community-composer-prompt {
  display: grid;
  grid-template-columns: auto minmax(0, max-content);
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: 100%;
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid rgba(245, 198, 108, 0.18);
  border-radius: 18px;
  color: var(--cream);
  background: rgba(0, 0, 0, 0.24);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition:
    width 360ms cubic-bezier(0.2, 0.82, 0.2, 1),
    border-color 240ms ease,
    background 240ms ease,
    transform 240ms ease;
}

.community-composer-prompt:hover {
  border-color: rgba(245, 198, 108, 0.34);
  background: rgba(245, 198, 108, 0.07);
}

.community-compose.compact.open .community-composer-prompt {
  grid-template-columns: auto 1fr;
  width: 100%;
  transform: translateY(-1px);
}

.community-composer-prompt span,
.messenger-friends button span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(245, 198, 108, 0.3);
  border-radius: 14px;
  color: var(--gold-bright);
  background: rgba(217, 164, 65, 0.1);
  font-weight: 900;
}

.community-composer-prompt strong {
  color: var(--muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-composer-reveal {
  display: block;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition:
    height 520ms cubic-bezier(0.24, 0.08, 0.18, 1),
    opacity 260ms ease,
    transform 360ms cubic-bezier(0.2, 0.82, 0.2, 1),
    margin-top 360ms ease;
}

.community-compose.compact.open .community-composer-reveal {
  margin-top: 14px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.community-composer-expanded {
  display: grid;
  gap: 14px;
  min-height: 0;
  overflow: hidden;
}

.community-compose-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.community-compose-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.community-manager-compact {
  align-content: space-between;
}

.community-manager-compact h2 {
  margin-top: 4px;
}

.community-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(12px);
}

.community-manager-message {
  position: relative;
  width: min(620px, 100%);
}

.community-panel label {
  display: grid;
  gap: 8px;
  color: var(--gold-bright);
  font-weight: 900;
}

.community-panel input,
.community-panel textarea,
.community-panel select,
.community-comment-box input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(245, 198, 108, 0.2);
  border-radius: 14px;
  color: var(--cream);
  background: rgba(0, 0, 0, 0.28);
  font: inherit;
  outline: none;
}

.community-panel textarea {
  min-height: 150px;
  resize: vertical;
}

.community-feed {
  display: grid;
  gap: 16px;
  padding-top: 48px;
}

.community-empty,
.community-post {
  padding: 22px;
}

.community-post {
  display: grid;
  gap: 16px;
  background:
    radial-gradient(circle at 12% 0%, rgba(217, 164, 65, 0.12), transparent 34%),
    rgba(7, 8, 7, 0.72);
}

.community-post-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.community-post-head h3 {
  margin: 5px 0 0;
  color: var(--cream);
  font-size: 1.45rem;
}

.community-post-head small {
  color: var(--muted);
  font-weight: 800;
  text-align: right;
}

.community-post > p {
  margin: 0;
  color: var(--cream);
  line-height: 1.7;
}

.community-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.community-reactions button {
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid rgba(245, 198, 108, 0.18);
  border-radius: 999px;
  color: var(--gold-bright);
  background: rgba(217, 164, 65, 0.08);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
}

.community-reactions strong {
  color: #9dffbf;
}

.community-comments {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(245, 198, 108, 0.14);
}

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

.community-comments strong {
  color: var(--gold-bright);
}

.community-comment-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.floating-messenger {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 70;
  display: grid;
  justify-items: end;
  gap: 12px;
}

.messenger-fab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  min-height: 56px;
  padding: 12px 18px;
  border: 1px solid rgba(255, 210, 119, 0.72);
  border-radius: 18px;
  color: #120b07;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  box-shadow: 0 18px 60px rgba(217, 164, 65, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.26);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
}

.messenger-fab strong {
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  color: #071107;
  background: #9dffbf;
  font-size: 0.72rem;
}

.messenger-panel {
  width: min(720px, calc(100vw - 32px));
  height: min(620px, calc(100vh - 120px));
  overflow: hidden;
  border: 1px solid rgba(245, 198, 108, 0.24);
  border-radius: 24px;
  background:
    radial-gradient(circle at 10% 0%, rgba(217, 164, 65, 0.16), transparent 35%),
    rgba(8, 9, 8, 0.96);
  box-shadow: 0 28px 110px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(18px);
}

.messenger-panel header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-bottom: 1px solid rgba(245, 198, 108, 0.14);
}

.messenger-panel header span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.messenger-panel header strong {
  display: block;
  margin-top: 3px;
  color: var(--gold-bright);
  font-size: 1.08rem;
}

.messenger-panel header button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(245, 198, 108, 0.18);
  border-radius: 12px;
  color: var(--gold-bright);
  background: rgba(0, 0, 0, 0.22);
  cursor: pointer;
  font-size: 1.35rem;
}

.messenger-body {
  display: grid;
  grid-template-columns: minmax(190px, 0.42fr) minmax(0, 1fr);
  height: calc(100% - 71px);
}

.messenger-friends {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
  overflow-y: auto;
  border-right: 1px solid rgba(245, 198, 108, 0.12);
}

.messenger-friends button {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 9px;
  border: 1px solid transparent;
  border-radius: 16px;
  color: var(--cream);
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.messenger-friends button:hover,
.messenger-friends button.active {
  border-color: rgba(245, 198, 108, 0.22);
  background: rgba(217, 164, 65, 0.08);
}

.messenger-friends strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messenger-friends em {
  display: grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  color: #071107;
  background: #9dffbf;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
}

.messenger-chat {
  display: grid;
  min-width: 0;
  grid-template-rows: 1fr auto;
}

.messenger-thread {
  display: grid;
  align-content: end;
  gap: 8px;
  overflow-y: auto;
  padding: 16px;
}

.messenger-thread p {
  width: fit-content;
  max-width: min(82%, 360px);
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(245, 198, 108, 0.14);
  border-radius: 16px 16px 16px 5px;
  color: var(--cream);
  background: rgba(0, 0, 0, 0.26);
}

.messenger-thread p.mine {
  justify-self: end;
  border-color: rgba(255, 210, 119, 0.36);
  border-radius: 16px 16px 5px 16px;
  color: #120b07;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  font-weight: 800;
}

.messenger-empty,
.messenger-login,
.messenger-notice,
.messenger-friends p {
  padding: 14px;
  color: var(--muted);
}

.messenger-login {
  display: grid;
  gap: 14px;
}

.messenger-input {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid rgba(245, 198, 108, 0.12);
}

.messenger-input input {
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid rgba(245, 198, 108, 0.2);
  border-radius: 14px;
  color: var(--cream);
  background: rgba(0, 0, 0, 0.26);
  font: inherit;
}

.messenger-input button {
  min-width: 58px;
  border: 1px solid rgba(255, 210, 119, 0.5);
  border-radius: 14px;
  color: #120b07;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  cursor: pointer;
  font: inherit;
  font-weight: 900;
}

.messenger-friends button strong small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.messenger-friend-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(245, 198, 108, 0.12);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.messenger-friend-actions button,
.admin-row-actions button,
.admin-feedback-actions button {
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid rgba(245, 198, 108, 0.22);
  border-radius: 10px;
  color: var(--gold-bright);
  background: rgba(245, 198, 108, 0.08);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
}

.messenger-friend-actions button:disabled,
.admin-row-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.notification-topbar {
  position: relative;
}

.notification-topbar > button {
  min-height: 40px;
  padding: 10px 14px;
  border: 0;
  border-radius: 12px;
  color: var(--cream);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
}

.notification-topbar > button.has-unread {
  color: #120b07;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
}

.notification-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 60;
  display: grid;
  gap: 8px;
  width: min(520px, calc(100vw - 28px));
  min-width: 0;
  padding: 12px;
  box-sizing: border-box;
  border: 1px solid rgba(245, 198, 108, 0.2);
  border-radius: 16px;
  background: rgba(8, 7, 6, 0.96);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.notification-menu > div {
  display: flex;
  min-width: 0;
  justify-content: space-between;
  gap: 12px;
  color: var(--gold-bright);
}

.notification-menu button {
  border: 0;
  color: var(--gold-bright);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
}

.notification-menu a,
.notification-menu p {
  display: grid;
  gap: 4px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid rgba(245, 198, 108, 0.12);
  border-radius: 12px;
  color: var(--cream);
  background: rgba(255, 255, 255, 0.03);
  text-decoration: none;
}

.notification-menu a.unread {
  border-color: rgba(255, 210, 119, 0.35);
  background: rgba(245, 198, 108, 0.08);
}

.notification-menu small {
  color: var(--muted);
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.notification-menu a span {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.player-overview-panel,
.account-settings-panel,
.donation-history-section {
  display: grid;
  gap: 18px;
  margin: 24px 0;
  padding: 24px;
  border: 1px solid rgba(245, 198, 108, 0.18);
  border-radius: 24px;
  background: rgba(7, 8, 7, 0.72);
}

.player-overview-head,
.admin-panel-headline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.player-overview-head span,
.player-overview-grid span,
.donation-history-summary span,
.admin-community-row span,
.admin-feedback-row span,
.admin-donation-row span {
  color: var(--gold-bright);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.player-overview-head strong {
  display: block;
  margin-top: 4px;
  color: var(--cream);
  font-size: clamp(1.7rem, 4vw, 2.5rem);
}

.player-overview-head p,
.muted-line {
  color: var(--muted);
}

.account-settings-panel span,
.admin-user-card-head span {
  color: var(--gold-bright);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.account-settings-panel strong,
.admin-user-card-head strong {
  display: block;
  margin-top: 4px;
  color: var(--cream);
  font-size: 1.35rem;
}

.account-settings-panel p,
.admin-user-card-head small {
  color: var(--muted);
}

.account-settings-form,
.admin-user-form,
.admin-password-reset {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 12px;
  align-items: end;
}

.account-settings-form label,
.admin-user-form label,
.admin-password-reset label {
  display: grid;
  gap: 7px;
  color: var(--gold-bright);
  font-weight: 800;
}

.account-settings-form input,
.account-settings-form select,
.admin-user-form input,
.admin-user-form select,
.admin-password-reset input {
  min-height: 44px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(245, 198, 108, 0.18);
  border-radius: 13px;
  color: var(--cream);
  background: rgba(0, 0, 0, 0.25);
  font: inherit;
}

.account-settings-form input:disabled {
  opacity: 0.68;
}

.player-overview-grid,
.donation-history-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.donation-history-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.player-overview-grid article,
.donation-history-summary article {
  display: grid;
  gap: 5px;
  padding: 16px;
  border: 1px solid rgba(245, 198, 108, 0.14);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.22);
}

.player-overview-grid strong,
.donation-history-summary strong {
  color: var(--cream);
  font-size: 1.45rem;
}

.player-overview-grid small,
.activity-row small,
.donation-history-row small {
  color: var(--muted);
}

.player-activity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.player-activity-grid > div,
.admin-community-row,
.admin-feedback-row,
.admin-donation-row,
.donation-history-row {
  padding: 16px;
  border: 1px solid rgba(245, 198, 108, 0.14);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.2);
}

.activity-row,
.donation-history-row,
.admin-community-row,
.admin-donation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--cream);
  text-decoration: none;
}

.activity-row {
  margin-top: 8px;
}

.activity-row.unread {
  border-color: rgba(255, 210, 119, 0.32);
}

.donation-history-list,
.admin-card-list {
  display: grid;
  gap: 10px;
}

.admin-feedback-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
  gap: 14px;
}

.admin-feedback-copy p {
  color: var(--cream);
  line-height: 1.55;
}

.admin-feedback-copy blockquote {
  margin: 12px 0 0;
  padding: 12px;
  border-left: 3px solid var(--gold);
  color: var(--muted);
  background: rgba(245, 198, 108, 0.06);
}

.admin-feedback-actions {
  display: grid;
  gap: 10px;
}

.admin-feedback-actions textarea {
  min-height: 120px;
  padding: 12px;
  border: 1px solid rgba(245, 198, 108, 0.18);
  border-radius: 14px;
  color: var(--cream);
  background: rgba(0, 0, 0, 0.26);
  font: inherit;
}

.admin-feedback-actions div,
.admin-row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.admin-users-grid {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.admin-user-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(245, 198, 108, 0.14);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.2);
}

.admin-user-actions,
.admin-password-reset {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-password-reset label {
  flex: 1 1 280px;
}

.admin-user-actions button,
.admin-password-reset button {
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(245, 198, 108, 0.22);
  border-radius: 12px;
  color: var(--gold-bright);
  background: rgba(245, 198, 108, 0.08);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
}

.account-topbar a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
  white-space: nowrap;
  transition: 220ms ease;
}

.account-topbar a:hover,
.account-topbar a:focus-visible,
.account-topbar a.active {
  color: var(--gold-bright);
  border-color: rgba(245, 198, 108, 0.28);
  background: rgba(245, 198, 108, 0.1);
}

.account-topbar .topbar-donate {
  min-width: 110px;
  color: #120b07;
  border-color: rgba(255, 210, 119, 0.72);
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  box-shadow: 0 0 30px rgba(217, 164, 65, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.26);
  font-weight: 900;
}

.account-topbar .topbar-donate:hover,
.account-topbar .topbar-donate:focus-visible,
.account-topbar .topbar-donate.active {
  color: #120b07;
  background: linear-gradient(135deg, #ffe3a0, #d9a441);
  transform: translateY(-1px);
}

.site-header {
  position: fixed !important;
  top: 22px !important;
  left: 22px !important;
  right: auto !important;
  z-index: 40;
  display: grid !important;
  grid-template-columns: 1fr;
  align-items: start;
  align-content: start;
  gap: 0;
  width: 252px !important;
  height: calc(100vh - 44px) !important;
  min-height: 0;
  padding: 16px !important;
  transform: none !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(13, 14, 12, 0.86), rgba(8, 8, 7, 0.7)) !important;
}

.site-header .brand,
.site-header .main-nav,
.site-header .sidebar-socials {
  width: 100%;
}

.site-header .main-nav {
  display: grid !important;
  grid-template-columns: 1fr;
  justify-content: stretch;
  align-items: stretch;
  gap: 8px;
  margin-top: 18px !important;
  position: static;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.site-header .main-nav a {
  justify-content: flex-start;
  width: 100%;
  min-height: 44px;
  padding: 12px 14px !important;
}

.site-header .sidebar-socials {
  display: grid !important;
  gap: 9px;
  justify-content: stretch !important;
  align-items: stretch;
  margin-top: auto !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(217, 164, 65, 0.2) !important;
}

.site-header .sidebar-socials a {
  width: 100%;
  min-height: 42px;
  justify-content: flex-start;
  padding: 10px 12px !important;
}

.site-header .sidebar-socials a span {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
}

@media (min-width: 981px) {
  .content-section,
  .hero,
  .join-section,
  .site-footer {
    width: auto !important;
    margin-right: clamp(24px, 5vw, 96px) !important;
    margin-left: max(292px, clamp(24px, 5vw, 96px)) !important;
  }

  .hero {
    padding-top: 142px !important;
  }
}

@media (max-width: 980px) {
  .account-topbar {
    top: 12px;
    right: 12px;
    left: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }

  .account-topbar a {
    padding-right: 10px;
    padding-left: 10px;
  }

  .account-topbar .topbar-donate {
    min-width: 0;
  }

  .site-header {
    top: 84px !important;
    left: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: min(1180px, calc(100% - 32px)) !important;
    height: auto !important;
    padding: 12px 14px !important;
    transform: translateX(-50%) !important;
    border-radius: 18px !important;
  }

  .site-header .main-nav {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    display: grid !important;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(8, 6, 4, 0.96);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
  }

  .site-header .main-nav.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .site-header .sidebar-socials {
    display: none !important;
  }

  .hero {
    padding-top: 184px !important;
  }

  .panel-page,
  .admin-page,
  .donate-page,
  .community-page {
    padding-top: 172px !important;
  }

  .community-hero,
  .community-layout {
    grid-template-columns: 1fr;
  }

  .community-guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .community-compose-row,
  .player-overview-grid,
  .player-activity-grid,
  .donation-history-summary,
  .admin-feedback-row,
  .account-settings-form,
  .admin-user-form,
  .messenger-body {
    grid-template-columns: 1fr;
  }

  .messenger-friends {
    grid-auto-flow: column;
    grid-auto-columns: minmax(160px, 1fr);
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(245, 198, 108, 0.12);
  }
}

@media (max-width: 680px) {
  .account-topbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .account-topbar a {
    min-height: 38px;
    padding-right: 6px;
    padding-left: 6px;
    font-size: 0.82rem;
  }

  .site-header {
    top: 120px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    transform: none !important;
  }

  .hero {
    padding-top: 220px !important;
  }

  .panel-page,
  .admin-page,
  .donate-page,
  .community-page {
    padding-top: 208px !important;
  }

  .hero {
    padding-top: 168px !important;
  }

  .panel-page,
  .admin-page,
  .donate-page,
  .community-page {
    padding-top: 152px !important;
  }

  .community-hero {
    min-height: auto;
    padding: 44px 18px;
  }

  .community-guide-grid,
  .community-comment-box,
  .messenger-input {
    grid-template-columns: 1fr;
  }

  .community-layout {
    padding-top: 20px;
  }

  .community-post-head {
    display: grid;
  }

  .community-post-head small {
    text-align: left;
  }

  .floating-messenger {
    right: 12px;
    bottom: 12px;
  }

  .messenger-panel {
    width: calc(100vw - 24px);
    height: min(620px, calc(100vh - 96px));
  }
}

/* Material archive v2: matte, tactile vintage luxury shared with the launcher. */
:root {
  --bg: #0b0704;
  --bg-soft: #15100b;
  --panel: rgba(19, 12, 8, 0.92);
  --panel-strong: rgba(25, 15, 9, 0.97);
  --gold: #b88b42;
  --gold-bright: #d5b16d;
  --gold-dark: #6b4824;
  --cream: #e9d8b8;
  --muted: #aa9677;
  --line: rgba(194, 151, 76, 0.34);
  --shadow: rgba(0, 0, 0, 0.28);
  --danger: #7d302a;
  --material-walnut: url('/images/materials-v2/texture-walnut-v2.webp');
  --material-leather: url('/images/materials-v2/texture-leather-v2.webp');
  --material-parchment: url('/images/materials-v2/texture-parchment-v2.webp');
  --material-brass: url('/images/materials-v2/texture-brass-v2.webp');
}

body {
  background-color: #0b0704;
  background-image: var(--material-walnut);
  background-position: center top;
  background-size: 1024px;
  background-attachment: fixed;
  color: var(--cream);
}

body::before {
  background: rgba(5, 3, 2, 0.56);
  mask-image: none;
}

body::after {
  background: transparent;
}

.noise {
  opacity: 0.035;
  mix-blend-mode: normal;
}

.cursor-glow {
  display: none;
}

.site-header,
.account-topbar,
.notification-menu {
  border-color: var(--line) !important;
  border-radius: 4px !important;
  background-color: #100a06 !important;
  background-image: var(--material-walnut) !important;
  background-position: center !important;
  background-size: 620px !important;
  background-blend-mode: multiply !important;
  box-shadow: inset 0 0 0 3px rgba(3, 2, 1, 0.66), inset 0 0 0 4px rgba(194, 151, 76, 0.1), 0 10px 24px rgba(0, 0, 0, 0.32) !important;
  backdrop-filter: none !important;
}

.brand-mark {
  border-color: rgba(214, 179, 108, 0.58) !important;
  border-radius: 3px !important;
  background-color: #8e6b32 !important;
  background-image: var(--material-brass) !important;
  background-position: center !important;
  background-size: 170px !important;
  background-blend-mode: multiply !important;
  box-shadow: inset 0 0 0 2px rgba(48, 29, 12, 0.34) !important;
}

.brand-mark img {
  filter: sepia(1) saturate(0.72) brightness(0.45) contrast(1.35);
}

.main-nav a,
.sidebar-socials a,
.account-topbar a,
.account-topbar button {
  border-radius: 2px !important;
  box-shadow: none !important;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a.active,
.sidebar-socials a:hover,
.sidebar-socials a:focus-visible,
.account-topbar a:hover,
.account-topbar a:focus-visible,
.account-topbar a.active,
.account-topbar button:hover,
.account-topbar button:focus-visible {
  border-color: rgba(213, 177, 109, 0.46) !important;
  background: rgba(194, 151, 76, 0.08) !important;
  color: var(--gold-bright) !important;
  transform: none;
}

.account-topbar .topbar-donate,
.account-topbar .topbar-donate:hover,
.account-topbar .topbar-donate:focus-visible,
.account-topbar .topbar-donate.active {
  color: #251608 !important;
  border-color: rgba(225, 193, 129, 0.68) !important;
  background-color: #a47b37 !important;
  background-image: var(--material-brass) !important;
  background-position: center !important;
  background-size: 260px !important;
  background-blend-mode: normal !important;
  box-shadow: inset 0 0 0 2px rgba(65, 39, 13, 0.22) !important;
}

.hero {
  border-color: rgba(194, 151, 76, 0.34) !important;
  border-radius: 4px !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34) !important;
}

.hero-bg {
  background-color: rgba(8, 5, 3, 0.48);
  background-image: url('/images/materials-v2/eastiny-archive-city-v2.webp');
  background-position: center;
  background-size: cover;
  background-blend-mode: multiply;
}

.hero-bg::before {
  background: rgba(6, 4, 2, 0.18);
}

.world-map,
.moon,
.spire {
  display: none;
}

.hero h1 {
  color: #eee1c7;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.38), 0 10px 26px rgba(0, 0, 0, 0.38);
}

.hero-copy {
  color: #d1c1a4;
}

.hero-visual-panel,
.hero-card {
  border-color: rgba(194, 151, 76, 0.38);
  border-radius: 4px;
  background-color: #160d09;
  background-image: var(--material-leather);
  background-position: center;
  background-size: cover;
  background-blend-mode: multiply;
  box-shadow: inset 0 0 0 4px rgba(4, 2, 1, 0.7), inset 0 0 0 5px rgba(194, 151, 76, 0.1), 0 14px 30px rgba(0, 0, 0, 0.38);
}

.hero-visual-panel img,
.crest-orbit img {
  opacity: 0.78;
  filter: sepia(1) saturate(0.92) brightness(0.9) contrast(1.08) drop-shadow(0 10px 16px rgba(0, 0, 0, 0.54));
  mix-blend-mode: normal;
}

.hero-visual-panel span,
.card-crown {
  border-radius: 2px;
  background: rgba(194, 151, 76, 0.08);
}

.section-frame,
.about-panel,
.doc-card,
.join-section,
.auth-panel,
.dashboard-panel,
.admin-panel,
.character-modal,
.payment-card,
.community-compose,
.community-post,
.messenger-panel {
  border-color: rgba(194, 151, 76, 0.3) !important;
  border-radius: 4px !important;
  background-color: #160d09 !important;
  background-image: var(--material-leather) !important;
  background-position: center !important;
  background-size: cover !important;
  background-blend-mode: multiply !important;
  box-shadow: inset 0 0 0 3px rgba(4, 2, 1, 0.66), inset 0 0 0 4px rgba(194, 151, 76, 0.09), 0 12px 28px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: none !important;
}

.section-frame::before,
.section-frame::after {
  display: none !important;
}

.server-stats div,
.feature-card,
.timeline-item,
.character-card,
.rule-item,
.register-steps article,
.donate-tier,
.social-account-card,
.fivem-card,
.fivem-info-group,
.activity-row,
.checkin-day-card,
.admin-section-menu,
.guide-list-editor,
.guide-detail-editor,
.user-row {
  border-color: rgba(194, 151, 76, 0.24) !important;
  border-radius: 3px !important;
  background-color: #140d08 !important;
  background-image: var(--material-walnut) !important;
  background-position: center !important;
  background-size: 520px !important;
  background-blend-mode: multiply !important;
  box-shadow: inset 0 0 0 2px rgba(3, 2, 1, 0.58) !important;
  backdrop-filter: none !important;
}

.feature-card:hover,
.character-card:hover,
.rule-item:hover,
.register-steps article:hover,
.donate-tier:hover {
  border-color: rgba(213, 177, 109, 0.5) !important;
  box-shadow: inset 0 0 0 2px rgba(3, 2, 1, 0.58), 0 8px 16px rgba(0, 0, 0, 0.22) !important;
}

.btn,
.doc-tab,
button,
input,
select,
textarea {
  border-radius: 3px !important;
}

.btn.primary,
.btn.primary:hover,
.btn.primary:focus-visible,
.save-btn,
.payment-primary {
  color: #251608 !important;
  border-color: rgba(225, 193, 129, 0.68) !important;
  background-color: #a47b37 !important;
  background-image: var(--material-brass) !important;
  background-position: center !important;
  background-size: 320px !important;
  background-blend-mode: normal !important;
  box-shadow: inset 0 0 0 2px rgba(65, 39, 13, 0.22), 0 5px 10px rgba(0, 0, 0, 0.26) !important;
  transform: none;
}

.btn.ghost,
.btn.ghost:hover,
.btn.ghost:focus-visible,
.auth-switch {
  color: var(--cream) !important;
  border-color: rgba(194, 151, 76, 0.32) !important;
  background-color: #160f09 !important;
  background-image: var(--material-walnut) !important;
  background-position: center !important;
  background-size: 320px !important;
  background-blend-mode: multiply !important;
  box-shadow: none !important;
}

input,
select,
textarea {
  border-color: rgba(194, 151, 76, 0.28) !important;
  background-color: rgba(14, 9, 5, 0.9) !important;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.28) !important;
  color: var(--cream) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(213, 177, 109, 0.62) !important;
  box-shadow: 0 0 0 2px rgba(194, 151, 76, 0.1) !important;
}

.eyebrow,
.panel-kicker,
.brand small {
  color: var(--gold-bright);
  text-shadow: none;
}

.floating-messenger .messenger-fab {
  border-radius: 3px !important;
  background-color: #9a7336 !important;
  background-image: var(--material-brass) !important;
  background-position: center !important;
  background-size: 190px !important;
  background-blend-mode: normal !important;
  box-shadow: 0 7px 14px rgba(0, 0, 0, 0.3) !important;
}

@media (max-width: 1060px) {
  .main-nav {
    border-radius: 4px !important;
    background-color: #100a06 !important;
    background-image: var(--material-walnut) !important;
    background-position: center !important;
    background-size: 620px !important;
    background-blend-mode: multiply !important;
  }
}

@media (max-width: 680px) {
  .site-header {
    top: 120px !important;
  }

  .hero {
    padding-top: 220px !important;
    border-radius: 3px !important;
  }

  .panel-page,
  .admin-page,
  .donate-page,
  .community-page {
    padding-top: 210px !important;
  }

  .hero-visual-panel {
    border-radius: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Signed regional content replication in the administration workspace. */
.admin-content-sync-panel { display: grid; gap: 26px; }
.admin-content-sync-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 20px; border-bottom: 1px solid rgba(213, 177, 109, .18); }
.admin-content-sync-head h2 { margin: 7px 0 8px; }
.admin-content-sync-head p:last-child { max-width: 680px; margin: 0; color: var(--muted); line-height: 1.65; }
.admin-sync-security { display: inline-flex; flex: 0 0 auto; gap: 8px; align-items: center; min-height: 38px; padding: 8px 11px; border: 1px solid rgba(187, 100, 91, .34); border-radius: 3px; color: #d69b94; background: rgba(130, 53, 47, .1); font-size: .72rem; font-weight: 800; }
.admin-sync-security.ready { border-color: rgba(102, 160, 147, .38); color: #a7d0c7; background: rgba(74, 125, 115, .12); }
.admin-content-sync-route { display: grid; grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr); align-items: stretch; border: 1px solid rgba(213, 177, 109, .2); background: rgba(5, 4, 3, .28); }
.admin-content-sync-route article { display: grid; align-content: center; min-height: 190px; padding: 28px; background: rgba(19, 13, 9, .55); }
.admin-content-sync-route article.target { background: rgba(44, 31, 19, .42); }
.admin-content-sync-route article small { color: #7ca99f; font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.admin-content-sync-route article strong { margin-top: 10px; color: var(--cream); font-size: 1.7rem; line-height: 1.1; }
.admin-content-sync-route article span { margin-top: 7px; color: var(--gold-bright); font-size: .82rem; }
.admin-content-sync-route article em { margin-top: 24px; color: var(--muted); font-size: .72rem; font-style: normal; line-height: 1.5; }
.admin-content-sync-route > div { display: grid; place-content: center; justify-items: center; gap: 7px; border-right: 1px solid rgba(213, 177, 109, .16); border-left: 1px solid rgba(213, 177, 109, .16); color: var(--gold-bright); background: rgba(213, 177, 109, .05); }
.admin-content-sync-route > div span { color: var(--muted); font-size: .64rem; font-weight: 800; text-transform: uppercase; }
.admin-content-sync-scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(213, 177, 109, .16); border-left: 1px solid rgba(213, 177, 109, .16); }
.admin-content-sync-scope > div { min-height: 112px; padding: 20px; border-right: 1px solid rgba(213, 177, 109, .16); border-bottom: 1px solid rgba(213, 177, 109, .16); background: rgba(0, 0, 0, .12); }
.admin-content-sync-scope strong { color: var(--cream); font-size: .86rem; }
.admin-content-sync-scope p { margin: 8px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.65; }
.admin-content-sync-result { margin: 0; color: #a8cbc4; font-size: .78rem; }
.admin-content-sync-action { width: fit-content; min-width: 250px; justify-content: center; }

@media (max-width: 720px) {
  .admin-content-sync-head { align-items: stretch; flex-direction: column; }
  .admin-sync-security { align-self: flex-start; }
  .admin-content-sync-route { grid-template-columns: 1fr; }
  .admin-content-sync-route > div { min-height: 70px; border: 0; border-top: 1px solid rgba(213, 177, 109, .16); border-bottom: 1px solid rgba(213, 177, 109, .16); }
  .admin-content-sync-route > div svg { transform: rotate(90deg); }
  .admin-content-sync-scope { grid-template-columns: 1fr; }
  .admin-content-sync-action { width: 100%; min-width: 0; }
}

/* Player documentation: GitBook-like reading layout with Eastiny archive materials. */
.knowledge-page,
.epic-page {
  position: relative;
  z-index: 4;
  min-height: 100vh;
  color: #e8dfcd;
}

.docs-knowledge-page {
  display: flex;
  height: 100dvh;
  min-height: 0;
  flex-direction: column;
  padding-top: 96px;
  overflow: hidden;
  animation: none;
  transform: none;
}

body.documentation-open > #root > .site-footer,
body.documentation-open .site-footer {
  display: none;
}

.knowledge-shell {
  display: grid;
  grid-template-columns: clamp(230px, 18vw, 288px) minmax(0, 1fr) clamp(170px, 13vw, 210px);
  justify-content: center;
  flex: 1 1 auto;
  width: 80vw;
  min-height: 0;
  margin-right: 10vw;
  margin-left: 10vw;
  padding: 0 22px 0 12px;
  overflow: hidden;
  background: rgba(8, 9, 8, .74);
}

.knowledge-navigation {
  position: sticky;
  top: 96px;
  align-self: start;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 26px 20px 18px;
  border-right: 1px solid rgba(92, 148, 139, .25);
  background: rgba(12, 15, 14, .92);
  backdrop-filter: blur(22px) saturate(.74);
  -webkit-backdrop-filter: blur(22px) saturate(.74);
}

.knowledge-home-link {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  color: #eee3ce;
  text-decoration: none;
}

.knowledge-home-link img { width: 42px; height: 42px; object-fit: contain; filter: sepia(.25) saturate(.75); }
.knowledge-home-link span { display: grid; gap: 2px; min-width: 0; }
.knowledge-home-link small { color: #78a89f; font-size: .62rem; font-weight: 800; text-transform: uppercase; }
.knowledge-home-link strong { overflow: hidden; font-size: .93rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }

.knowledge-search {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  margin: 24px 0 20px;
  padding: 0 10px;
  border: 1px solid rgba(127, 164, 156, .24);
  border-radius: 4px;
  background: rgba(255, 255, 255, .035);
  color: #7fa49d;
}

.knowledge-search:focus-within { border-color: rgba(125, 177, 167, .66); box-shadow: 0 0 0 3px rgba(85, 139, 129, .1); }
.knowledge-search input { min-width: 0; height: 38px; border: 0; outline: 0; background: transparent; color: #e8dfcd; font: inherit; font-size: .78rem; }
.knowledge-search input::placeholder { color: #7d827b; }
.knowledge-navigation nav { overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: rgba(108, 151, 143, .35) transparent; }
.knowledge-navigation nav section + section { margin-top: 24px; }
.knowledge-navigation nav h2 { margin: 0 0 7px 10px; color: #7faaa2; font-size: .66rem; font-weight: 800; text-transform: uppercase; }
.knowledge-navigation nav a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 36px; padding: 7px 9px; border-left: 2px solid transparent; color: #aeb2aa; font-size: .76rem; line-height: 1.35; text-decoration: none; }
.knowledge-navigation nav a i { color: transparent; font-style: normal; }
.knowledge-navigation nav a:hover { color: #efe7d7; background: rgba(103, 154, 144, .07); }
.knowledge-navigation nav a.active { border-left-color: #6eaaa0; background: rgba(88, 145, 134, .12); color: #f0e7d4; }
.knowledge-navigation nav a.active i { color: #8ebbb3; }
.knowledge-navigation footer { display: flex; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(127, 164, 156, .15); color: #727b75; font-size: .65rem; }
.knowledge-navigation footer a { color: #8fb4ad; text-decoration: none; }
.knowledge-empty { padding: 14px 10px; color: #858a84; font-size: .75rem; }

.knowledge-article {
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 100px clamp(36px, 4vw, 72px) 72px;
  overflow-x: hidden;
  overflow-y: auto;
  border-right: 1px solid rgba(127, 164, 156, .1);
  background: rgba(13, 14, 13, .78);
  overscroll-behavior-y: contain;
  scrollbar-color: rgba(108, 151, 143, .48) transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.knowledge-article::-webkit-scrollbar { width: 8px; }
.knowledge-article::-webkit-scrollbar-track { background: transparent; }
.knowledge-article::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 4px; background: rgba(108, 151, 143, .48); background-clip: padding-box; }

.knowledge-breadcrumb { display: flex; gap: 8px; margin-bottom: 30px; color: #7e8e88; font-size: .7rem; }
.knowledge-breadcrumb a { color: #79aca3; text-decoration: none; }
.knowledge-article > header > p { margin: 0 0 10px; color: #75a9a0; font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.knowledge-article h1 { max-width: 680px; margin: 0; color: #f0e7d5; font-size: 2.35rem; line-height: 1.12; }
.knowledge-lead { max-width: 650px; margin-top: 19px; color: #aeb5ae; font-size: 1rem; line-height: 1.75; }
.knowledge-divider { width: 100%; height: 1px; margin: 34px 0 38px; background: linear-gradient(90deg, rgba(111, 169, 158, .5), rgba(111, 169, 158, .04)); }
.knowledge-content-block { scroll-margin-top: 36px; }
.knowledge-content-block + .knowledge-content-block { margin-top: 42px; }
.knowledge-content-block h2 { display: flex; gap: 10px; align-items: baseline; margin: 0 0 14px; color: #eee4d2; font-size: 1.35rem; line-height: 1.25; }
.knowledge-content-block h2 a { opacity: 0; color: #70a59b; font-size: .9rem; text-decoration: none; transition: opacity 160ms ease; }
.knowledge-content-block h2:hover a { opacity: 1; }
.knowledge-content-block p { margin: 0; color: #b8bbb4; font-size: .9rem; line-height: 1.85; }
.knowledge-content-block p + p { margin-top: 12px; }
.knowledge-content-block ul { display: grid; gap: 9px; margin: 18px 0 0; padding: 17px 20px 17px 42px; border-left: 3px solid #668f88; border-radius: 0 4px 4px 0; background: rgba(83, 130, 121, .08); color: #c5c8c0; font-size: .84rem; line-height: 1.65; }
.knowledge-content-block li::marker { color: #79aaa1; }
.knowledge-rich-content { display: flow-root; }
.knowledge-rich-content h2, .knowledge-rich-content h3 { margin: 30px 0 12px; color: #e9dfcc; line-height: 1.3; }
.knowledge-rich-content h2 { font-size: 1.18rem; }
.knowledge-rich-content h3 { font-size: 1rem; }
.knowledge-rich-content ol, .knowledge-rich-content ul { display: grid; gap: 9px; margin: 18px 0 0; padding: 17px 20px 17px 42px; border-left: 3px solid #668f88; border-radius: 0 4px 4px 0; background: rgba(83, 130, 121, .08); color: #c5c8c0; font-size: .84rem; line-height: 1.65; }
.knowledge-rich-content li > p { display: inline; }
.knowledge-rich-content blockquote { margin: 24px 0; padding: 17px 22px; border-left: 3px solid #b3925c; background: rgba(179, 146, 92, .08); color: #d8ccb6; }
.knowledge-rich-content blockquote p { color: inherit; font-size: .95rem; }
.knowledge-rich-content a { color: #8fc8be; text-decoration-color: rgba(143, 200, 190, .4); text-underline-offset: 3px; }
.knowledge-rich-content code { padding: 2px 5px; border: 1px solid rgba(127, 164, 156, .18); border-radius: 3px; background: rgba(0, 0, 0, .3); color: #b7ded6; font: 700 .82em/1.5 Consolas, monospace; }
.knowledge-rich-content pre { margin: 22px 0; padding: 19px 21px; overflow-x: auto; border: 1px solid rgba(127, 164, 156, .18); border-radius: 4px; background: rgba(3, 5, 4, .74); }
.knowledge-rich-content pre code { padding: 0; border: 0; background: transparent; color: #c7d6d1; font-size: .78rem; white-space: pre-wrap; }
.knowledge-rich-content hr { height: 1px; margin: 34px 0; border: 0; background: linear-gradient(90deg, rgba(111, 169, 158, .5), transparent); }
.knowledge-rich-image { margin: 26px 0; }
.knowledge-rich-image img { display: block; width: 100%; max-height: 620px; border: 1px solid rgba(127, 164, 156, .22); border-radius: 4px; object-fit: contain; background: rgba(3, 4, 3, .48); }
.knowledge-rich-image figcaption { margin-top: 8px; color: #818b85; font-size: .7rem; text-align: center; }
.knowledge-rich-video { position: relative; width: 100%; margin: 26px 0; overflow: hidden; border: 1px solid rgba(127, 164, 156, .22); border-radius: 4px; background: #050605; aspect-ratio: 16 / 9; }
.knowledge-rich-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.knowledge-cta { display: inline-flex; gap: 16px; align-items: center; justify-content: space-between; min-width: 210px; margin-top: 38px; padding: 12px 15px; border: 1px solid rgba(115, 169, 159, .44); border-radius: 4px; background: rgba(76, 124, 115, .14); color: #dce6df; font-size: .78rem; font-weight: 800; text-decoration: none; }
.knowledge-cta:hover { border-color: #7db2a8; background: rgba(76, 124, 115, .23); }
.knowledge-pagination { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 58px; padding-top: 22px; border-top: 1px solid rgba(127, 164, 156, .14); }
.knowledge-pagination a { display: grid; gap: 4px; min-width: 0; color: #d9dfd8; text-decoration: none; }
.knowledge-pagination a.next { text-align: right; }
.knowledge-pagination small { color: #77827c; font-size: .65rem; text-transform: uppercase; }
.knowledge-pagination strong { overflow: hidden; font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }

.knowledge-toc { align-self: stretch; display: grid; gap: 11px; min-height: 0; align-content: start; padding: 104px 0 20px 28px; overflow: hidden; color: #7f8882; font-size: .68rem; }
.knowledge-toc strong { margin-bottom: 5px; color: #b7bcb5; font-size: .67rem; text-transform: uppercase; }
.knowledge-toc a { color: #858f89; line-height: 1.4; text-decoration: none; }
.knowledge-toc a:hover { color: #91bdb4; }
.knowledge-toc > span { width: 100%; height: 1px; margin: 10px 0; background: rgba(127, 164, 156, .14); }
.knowledge-toc > a:last-child { color: #83ada5; }
.knowledge-mobile-header { display: none; }
.knowledge-empty-state { display: grid; place-content: center; min-height: 60vh; padding: 60px; text-align: center; }
.knowledge-empty-state h1 { color: #ece2cf; }
.knowledge-empty-state p { color: #9ea69f; }

@media (min-width: 821px) {
  .knowledge-navigation {
    position: relative;
    top: auto;
    left: auto;
  }

  .knowledge-article { grid-column: 2; }
  .knowledge-toc { grid-column: 3; }
}

/* Epic archive */
.epic-page { padding-bottom: 110px; overflow: hidden; color: #e8ddc9; background: rgba(6, 5, 4, .7); }
.epic-hero { position: relative; display: grid; grid-template-columns: minmax(0, 760px) minmax(220px, 1fr); grid-template-rows: auto 1fr auto; gap: 30px 64px; width: 100%; height: min(760px, 86dvh); min-height: 560px; padding: 104px max(36px, calc((100vw - 1280px) / 2)) 52px; overflow: hidden; border-bottom: 1px solid rgba(194, 151, 76, .34); isolation: isolate; }
.epic-hero::before { position: absolute; inset: 0; z-index: -2; background-image: var(--epic-image); background-position: center 42%; background-size: cover; content: ''; filter: saturate(.78) contrast(1.08) brightness(.84); transform: scale(1.01); }
.epic-hero::after { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6, 4, 3, .96) 0%, rgba(6, 4, 3, .8) 43%, rgba(6, 4, 3, .25) 78%, rgba(6, 4, 3, .46) 100%), linear-gradient(0deg, rgba(6, 4, 3, .95) 0%, transparent 52%, rgba(6, 4, 3, .48) 100%); content: ''; }
.epic-village-index { grid-column: 1 / -1; display: flex; gap: 18px; align-items: center; min-width: 0; padding-bottom: 15px; border-bottom: 1px solid rgba(225, 193, 129, .24); }
.epic-village-index > small { flex: 0 0 auto; color: #a88d61; font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.epic-village-index > div { display: flex; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.epic-village-index a { display: grid; grid-template-columns: 28px auto auto; gap: 8px; align-items: center; min-height: 34px; padding: 5px 10px; border: 1px solid transparent; color: #aaa397; text-decoration: none; white-space: nowrap; }
.epic-village-index a.active { border-color: rgba(225, 193, 129, .32); color: #f0e3ca; background: rgba(225, 193, 129, .08); }
.epic-village-index a span { color: #b06a6c; font-size: .65rem; font-weight: 900; }
.epic-village-index a strong { font-size: .78rem; }
.epic-village-index a em { color: #8f968d; font-size: .62rem; font-style: normal; }
.epic-hero-copy { grid-column: 1; align-self: end; max-width: 760px; }
.epic-hero-copy > p { margin: 0 0 15px; color: #c17a7c; font-size: .74rem; font-weight: 900; text-transform: uppercase; }
.epic-hero-copy h1 { max-width: 740px; margin: 0; color: #f1e5cf; font-size: 3.9rem; line-height: 1.02; }
.epic-hero-copy > span { display: block; max-width: 650px; margin-top: 22px; color: #c3baac; font-size: 1rem; line-height: 1.72; }
.epic-hero-copy > a { display: inline-flex; gap: 12px; align-items: center; margin-top: 28px; padding-bottom: 8px; border-bottom: 1px solid rgba(225, 193, 129, .5); color: #e5c88f; font-size: .78rem; font-weight: 900; text-decoration: none; }
.epic-hero-record { grid-column: 2; align-self: end; display: grid; gap: 7px; padding: 4px 0 4px 24px; border-left: 1px solid rgba(225, 193, 129, .38); }
.epic-hero-record small { color: #a88d61; font-size: .66rem; font-weight: 900; text-transform: uppercase; }
.epic-hero-record strong { color: #f0e3ca; font-size: 1.45rem; }
.epic-hero-record span { color: #aaa397; font-size: .75rem; }
.epic-content { width: min(1280px, calc(100% - 48px)); margin: 0 auto; }
.epic-village-heading { display: grid; grid-template-columns: 100px minmax(0, 1fr) 300px; gap: 34px; align-items: start; padding: 78px 0; border-bottom: 1px solid rgba(194, 151, 76, .2); }
.epic-village-number { color: rgba(194, 151, 76, .62); font-size: 4.8rem; font-weight: 900; line-height: .86; }
.epic-village-heading > div > p { margin: 0 0 9px; color: #b76f72; font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.epic-village-heading h2 { margin: 0; color: #f0e3ca; font-size: 2.8rem; line-height: 1.08; }
.epic-village-heading > div > span { display: block; max-width: 760px; margin-top: 20px; color: #bdb5a8; font-size: .95rem; line-height: 1.82; }
.epic-village-heading dl { display: grid; margin: 0; border-top: 1px solid rgba(194, 151, 76, .2); }
.epic-village-heading dl div { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 14px 2px; border-bottom: 1px solid rgba(194, 151, 76, .16); }
.epic-village-heading dt { color: #8f887c; font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.epic-village-heading dd { margin: 0; color: #dfc184; font-size: .86rem; font-weight: 900; }
.epic-chronicles, .epic-npcs { padding: 78px 0; border-bottom: 1px solid rgba(194, 151, 76, .18); }
.epic-section-title { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 18px; max-width: 720px; margin-bottom: 38px; }
.epic-section-title > span { color: #af676b; font-size: 1.15rem; font-weight: 900; }
.epic-section-title p { margin: 0 0 7px; color: #987873; font-size: .66rem; font-weight: 900; text-transform: uppercase; }
.epic-section-title h2 { margin: 0; color: #eadbc1; font-size: 1.8rem; line-height: 1.2; }
.epic-section-title small { display: block; margin-top: 9px; color: #918c83; font-size: .78rem; line-height: 1.55; }
.epic-chapter-list { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(194, 151, 76, .2); border-left: 1px solid rgba(194, 151, 76, .2); }
.epic-chapter-list article { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 22px; min-height: 280px; padding: 34px; border-right: 1px solid rgba(194, 151, 76, .2); border-bottom: 1px solid rgba(194, 151, 76, .2); background: rgba(13, 10, 8, .52); }
.epic-chapter-list article > span { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgba(176, 100, 105, .52); color: #ce8589; font-size: .76rem; font-weight: 900; }
.epic-chapter-list article small { color: #9d7c76; font-size: .64rem; font-weight: 900; text-transform: uppercase; }
.epic-chapter-list h3 { margin: 7px 0 14px; color: #eadbc1; font-size: 1.35rem; line-height: 1.25; }
.epic-chapter-list p { margin: 0; color: #aaa69d; font-size: .86rem; line-height: 1.78; }
.epic-npc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border: 1px solid rgba(194, 151, 76, .22); background: rgba(194, 151, 76, .22); }
.epic-npc-grid button { display: grid; grid-template-rows: 190px minmax(230px, 1fr); min-width: 0; padding: 0; overflow: hidden; border: 0; color: inherit; background: #0e0c0a; text-align: left; cursor: pointer; transition: background-color 220ms ease, box-shadow 220ms ease; }
.epic-npc-grid button:hover, .epic-npc-grid button:focus-visible { z-index: 1; background: #15110d; box-shadow: inset 0 0 0 1px rgba(225, 193, 129, .5); }
.epic-npc-visual { position: relative; display: block; overflow: hidden; background: #080706; }
.epic-npc-visual::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(8, 6, 5, .72)); content: ''; pointer-events: none; }
.epic-npc-grid img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.05); transition: filter 260ms ease; }
.epic-npc-grid button:hover img { filter: saturate(.9) contrast(1.05) brightness(1.04); }
.epic-npc-visual i { position: absolute; top: 14px; left: 14px; z-index: 1; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(225, 193, 129, .5); color: #e3c688; background: rgba(7, 5, 3, .82); font-size: .65rem; font-style: normal; font-weight: 900; }
.epic-npc-copy { display: flex; min-width: 0; padding: 25px 24px 22px; flex-direction: column; align-items: flex-start; }
.epic-npc-copy small { color: #b66d72; font-size: .65rem; font-weight: 900; line-height: 1.4; text-transform: uppercase; }
.epic-npc-copy strong { margin-top: 8px; color: #eddfc6; font-size: 1.25rem; }
.epic-npc-copy p { display: -webkit-box; overflow: hidden; margin: 13px 0 0; color: #a9a49b; font-size: .8rem; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.epic-npc-copy em { display: inline-flex; gap: 8px; align-items: center; margin-top: auto; padding-top: 18px; color: #d09699; font-size: .7rem; font-style: normal; font-weight: 900; }
.epic-modal-backdrop { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 28px; background: rgba(4, 3, 3, .86); backdrop-filter: blur(14px); animation: eastiny-backdrop-in 220ms ease both; }
.epic-modal { position: relative; display: grid; grid-template-columns: minmax(340px, .86fr) minmax(420px, 1.14fr); width: min(1040px, 100%); height: min(690px, calc(100dvh - 56px)); overflow: hidden; border: 1px solid rgba(194, 151, 76, .5); border-radius: 4px; background: #0e0c0a; box-shadow: 0 34px 100px rgba(0, 0, 0, .72), inset 0 0 0 3px rgba(3, 2, 1, .7); animation: eastiny-modal-in 440ms cubic-bezier(.16, 1, .3, 1) both; }
.epic-modal-image { min-width: 0; min-height: 0; overflow: hidden; border-right: 1px solid rgba(194, 151, 76, .22); }
.epic-modal-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.74) contrast(1.04); }
.epic-modal-copy { display: flex; min-width: 0; min-height: 0; padding: 66px 54px 44px; overflow-y: auto; flex-direction: column; align-items: flex-start; }
.epic-modal-copy > p:first-child { margin: 0 0 10px; color: #be7479; font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.epic-modal h2 { margin: 0; color: #eee0c6; font-size: 2.65rem; line-height: 1.05; }
.epic-modal blockquote { margin: 28px 0 22px; padding: 17px 0 17px 22px; border-left: 2px solid #a55c62; color: #d2c3ad; font-size: 1.02rem; font-weight: 650; line-height: 1.65; }
.epic-modal-summary, .epic-modal-copy > p:not(:first-child) { margin: 0; color: #aaa69d; font-size: .9rem; line-height: 1.85; }
.epic-modal-copy > p + p { margin-top: 14px; }
.epic-modal-copy .btn { margin-top: auto; }
.epic-modal-close { position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; width: 40px; height: 40px; place-items: center; padding: 0; border: 1px solid rgba(225, 211, 185, .3); border-radius: 2px; color: #eee1c9; background: rgba(10, 8, 7, .86); cursor: pointer; }

/* Structured editors for Documentation and Epic. */
.knowledge-editor { display: grid; gap: 18px; }
.documentation-admin-panel { display: grid; gap: 22px; }
.documentation-admin-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding-bottom: 20px; border-bottom: 1px solid rgba(217, 164, 65, .16); }
.documentation-admin-head h2 { margin: 7px 0 8px; }
.documentation-admin-head p:last-child { max-width: 720px; margin: 0; color: var(--muted); line-height: 1.6; }
.documentation-admin-head > div:last-child { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 9px; }
.documentation-admin-head .btn { gap: 8px; }
.knowledge-editor-meta { margin-top: 0; padding: 16px; border: 1px solid rgba(217, 164, 65, .14); border-radius: 6px; background: rgba(0, 0, 0, .18); }
.knowledge-editor-workspace { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 14px; align-items: start; }
.knowledge-editor-rail { display: grid; gap: 5px; padding: 10px; border: 1px solid rgba(217, 164, 65, .15); border-radius: 6px; background: rgba(0, 0, 0, .2); }
.knowledge-editor-rail header, .knowledge-block-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 4px 10px; }
.knowledge-editor-rail header button, .knowledge-block-toolbar button, .knowledge-page-picker > button { padding: 7px 9px; border: 1px solid rgba(217, 164, 65, .32); border-radius: 3px; background: rgba(217, 164, 65, .08); color: var(--gold-bright); font: inherit; font-size: .7rem; font-weight: 800; cursor: pointer; }
.knowledge-editor-rail > button { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 7px; align-items: center; padding: 10px 8px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--muted); text-align: left; cursor: pointer; }
.knowledge-editor-rail > button.active { border-color: rgba(104, 162, 151, .35); background: rgba(88, 145, 134, .12); color: var(--cream); }
.knowledge-editor-rail small { color: #72a69c; }
.knowledge-editor-rail > button span, .knowledge-editor-rail > button strong, .knowledge-editor-rail > button i { display: block; min-width: 0; }
.knowledge-editor-rail > button strong { overflow: hidden; color: inherit; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-editor-rail > button i { margin-top: 3px; color: #777d77; font-size: .62rem; font-style: normal; }
.knowledge-editor-stage { min-width: 0; padding: 16px; border: 1px solid rgba(217, 164, 65, .15); border-radius: 6px; background: rgba(0, 0, 0, .16); }
.knowledge-editor-stage .admin-form-grid { margin-top: 0; }
.knowledge-editor-section-head, .knowledge-page-editor-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: end; }
.knowledge-page-editor-head { align-items: center; padding: 13px 15px; border: 1px solid rgba(217, 164, 65, .14); background: rgba(217, 164, 65, .04); }
.knowledge-page-editor-head > div:first-child { display: grid; gap: 4px; }
.knowledge-page-editor-head small { color: var(--gold); font-size: .62rem; font-weight: 900; text-transform: uppercase; }
.knowledge-page-editor-head strong { color: var(--cream); }
.knowledge-order-actions { display: flex; gap: 5px; }
.knowledge-order-actions button { display: grid; width: 32px; height: 32px; place-items: center; padding: 0; border: 1px solid rgba(217, 164, 65, .2); border-radius: 3px; color: var(--gold-bright); background: rgba(217, 164, 65, .06); cursor: pointer; }
.knowledge-order-actions button:hover:not(:disabled), .knowledge-order-actions button.active { border-color: rgba(217, 164, 65, .48); background: rgba(217, 164, 65, .14); }
.knowledge-order-actions button:disabled { opacity: .32; cursor: not-allowed; }
.knowledge-page-picker { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0 14px; padding: 8px; border: 1px solid rgba(217, 164, 65, .12); border-radius: 4px; }
.knowledge-page-picker > div { display: flex; flex-wrap: wrap; gap: 5px; }
.knowledge-page-picker > div button { padding: 7px 9px; border: 0; border-radius: 3px; background: transparent; color: var(--muted); font: inherit; font-size: .72rem; cursor: pointer; }
.knowledge-page-picker > div button.active { background: rgba(104, 162, 151, .14); color: #b9d8d2; }
.knowledge-page-editor { display: grid; gap: 16px; }
.knowledge-block-toolbar { margin-top: 6px; padding: 10px 0 0; border-top: 1px solid rgba(217, 164, 65, .12); }
.knowledge-block-list { display: grid; gap: 12px; }
.knowledge-block-list article { overflow: hidden; border: 1px solid rgba(217, 164, 65, .14); border-radius: 5px; background: rgba(0, 0, 0, .16); }
.knowledge-block-list article > header { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid rgba(217, 164, 65, .12); color: var(--gold-bright); font-size: .72rem; font-weight: 800; }
.knowledge-block-list article > header .knowledge-order-actions button:last-child { color: #d98f89; }
.knowledge-block-list article .admin-form-grid { padding: 14px; }
.knowledge-block-editor { display: grid; gap: 14px; padding: 14px; }
.documentation-rich-editor { overflow: hidden; border: 1px solid rgba(217, 164, 65, .18); border-radius: 4px; background: rgba(5, 5, 4, .36); }
.documentation-editor-toolbar { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 7px; padding: 9px; border-bottom: 1px solid rgba(217, 164, 65, .16); background: rgba(16, 11, 7, .94); backdrop-filter: blur(12px); }
.documentation-editor-toolbar > div { display: flex; gap: 3px; padding-right: 7px; border-right: 1px solid rgba(217, 164, 65, .14); }
.documentation-editor-toolbar > div:last-of-type { border-right: 0; }
.documentation-editor-toolbar button { display: inline-flex; min-width: 32px; height: 32px; align-items: center; justify-content: center; gap: 5px; padding: 0 8px; border: 1px solid transparent; border-radius: 3px; color: #aaa294; background: transparent; font: inherit; font-size: .68rem; cursor: pointer; }
.documentation-editor-toolbar button:hover:not(:disabled), .documentation-editor-toolbar button.active { border-color: rgba(116, 169, 159, .32); color: #d6e8e3; background: rgba(82, 136, 126, .14); }
.documentation-editor-toolbar button:disabled { opacity: .3; cursor: not-allowed; }
.documentation-rich-editor .tiptap { min-height: 260px; padding: 24px; outline: 0; color: #d5d0c5; font-size: .88rem; line-height: 1.78; }
.documentation-rich-editor .tiptap p { margin: 0 0 12px; }
.documentation-rich-editor .tiptap h2, .documentation-rich-editor .tiptap h3 { margin: 24px 0 10px; color: #f0e2c9; }
.documentation-rich-editor .tiptap h2 { font-size: 1.25rem; }
.documentation-rich-editor .tiptap h3 { font-size: 1.05rem; }
.documentation-rich-editor .tiptap ul, .documentation-rich-editor .tiptap ol { padding-left: 25px; }
.documentation-rich-editor .tiptap blockquote { margin: 18px 0; padding: 12px 16px; border-left: 3px solid #7baaa1; background: rgba(91, 145, 135, .08); }
.documentation-rich-editor .tiptap pre { padding: 14px; overflow-x: auto; background: rgba(0, 0, 0, .42); }
.documentation-rich-editor .tiptap img { display: block; max-width: 100%; max-height: 520px; margin: 20px auto; object-fit: contain; }
.documentation-rich-editor .tiptap div[data-youtube-video] { margin: 20px 0; aspect-ratio: 16 / 9; }
.documentation-rich-editor .tiptap div[data-youtube-video] iframe { width: 100%; height: 100%; }
.documentation-rich-editor .tiptap p.is-editor-empty:first-child::before { height: 0; color: #777168; content: attr(data-placeholder); float: left; pointer-events: none; }
.documentation-rich-editor > footer { display: flex; justify-content: space-between; gap: 16px; min-height: 38px; padding: 9px 12px; border-top: 1px solid rgba(217, 164, 65, .12); color: #777168; font-size: .65rem; }
.documentation-rich-editor > footer.visible span { color: #94beb6; }
.documentation-editor-loading { min-height: 220px; padding: 28px; color: var(--muted); }
.documentation-insert-dialog { position: fixed; inset: 0; z-index: 520; display: grid; place-items: center; padding: 24px; background: rgba(3, 3, 2, .76); backdrop-filter: blur(12px); }
.documentation-insert-dialog form { display: grid; gap: 20px; width: min(520px, 100%); padding: 24px; border: 1px solid rgba(217, 164, 65, .34); border-radius: 4px; background: #120d09; box-shadow: 0 28px 80px rgba(0, 0, 0, .62), inset 0 0 0 3px rgba(4, 2, 1, .62); }
.documentation-insert-dialog header { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: center; }
.documentation-insert-dialog header > span { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(115, 169, 159, .32); color: #a9d0c8; background: rgba(82, 136, 126, .1); }
.documentation-insert-dialog header div { display: grid; gap: 3px; }
.documentation-insert-dialog header small { color: var(--gold); font-size: .62rem; font-weight: 900; text-transform: uppercase; }
.documentation-insert-dialog header strong { color: var(--cream); font-size: 1.05rem; }
.documentation-insert-dialog label { display: grid; gap: 8px; }
.documentation-insert-dialog label span { color: var(--gold-bright); font-size: .72rem; font-weight: 800; }
.documentation-insert-dialog input { width: 100%; min-width: 0; height: 48px; padding: 0 13px; border: 1px solid rgba(217, 164, 65, .22); border-radius: 3px; outline: 0; color: var(--cream); background: rgba(0, 0, 0, .3); font: inherit; }
.documentation-insert-dialog input:focus { border-color: rgba(115, 169, 159, .66); box-shadow: 0 0 0 3px rgba(82, 136, 126, .12); }
.documentation-insert-dialog form > div:last-child { display: flex; justify-content: flex-end; gap: 9px; }
.knowledge-editor-danger { display: flex; justify-content: flex-end; margin-top: 14px; }
.knowledge-editor-empty { display: grid; justify-items: start; gap: 12px; padding: 26px; color: var(--muted); }
.epic-npc-editor-workspace { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 560px; overflow: hidden; border: 1px solid rgba(217, 164, 65, .16); background: rgba(0, 0, 0, .14); }
.epic-npc-editor-list { display: grid; align-content: start; max-height: 680px; overflow-y: auto; border-right: 1px solid rgba(217, 164, 65, .15); scrollbar-color: rgba(217, 164, 65, .38) transparent; scrollbar-width: thin; }
.epic-npc-editor-list > button { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 10px; min-height: 68px; align-items: center; padding: 8px 10px; border: 0; border-bottom: 1px solid rgba(217, 164, 65, .1); color: var(--cream); background: transparent; text-align: left; cursor: pointer; }
.epic-npc-editor-list > button:hover, .epic-npc-editor-list > button.active { background: rgba(217, 164, 65, .08); box-shadow: inset 3px 0 0 var(--gold-bright); }
.epic-npc-editor-list img { width: 50px; height: 50px; border: 1px solid rgba(217, 164, 65, .22); object-fit: cover; }
.epic-npc-editor-list span, .epic-npc-editor-list small, .epic-npc-editor-list strong, .epic-npc-editor-list i { display: block; min-width: 0; }
.epic-npc-editor-list small { color: var(--gold-bright); font-size: .62rem; }
.epic-npc-editor-list strong, .epic-npc-editor-list i { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.epic-npc-editor-list strong { margin-top: 2px; font-size: .82rem; }
.epic-npc-editor-list i { margin-top: 3px; color: var(--muted); font-size: .65rem; font-style: normal; }
.epic-npc-editor-detail { min-width: 0; }
.epic-npc-editor-detail > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 70px; padding: 12px 16px; border-bottom: 1px solid rgba(217, 164, 65, .14); }
.epic-npc-editor-detail > header small { color: var(--gold-bright); font-size: .65rem; font-weight: 900; text-transform: uppercase; }
.epic-npc-editor-detail > header h3 { margin: 4px 0 0; color: var(--cream); font-size: 1.1rem; }
.epic-npc-editor-detail > header button { display: grid; width: 34px; height: 34px; place-items: center; padding: 0; border: 1px solid rgba(202, 102, 95, .34); color: #d9938d; background: rgba(152, 56, 48, .08); cursor: pointer; }
.epic-npc-editor-detail > .admin-form-grid { margin: 0; padding: 18px; }

@media (max-width: 1180px) {
  .knowledge-shell { grid-template-columns: 260px minmax(0, 1fr); padding-right: 0; }
  .knowledge-navigation { width: 260px; }
  .knowledge-toc { display: none; }
  .knowledge-article { border-right: 0; }
  .epic-hero { grid-template-columns: minmax(0, 1fr) 230px; gap: 28px 42px; }
  .epic-village-heading { grid-template-columns: 80px minmax(0, 1fr) 260px; }
  .epic-npc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .docs-knowledge-page { padding-top: 164px; }
  .knowledge-mobile-header { position: relative; top: auto; z-index: 25; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 13px; min-height: 58px; flex: 0 0 58px; align-items: center; padding: 8px 16px; border-bottom: 1px solid rgba(111, 169, 158, .25); background: rgba(11, 14, 13, .95); backdrop-filter: blur(16px); }
  .knowledge-mobile-header button { display: flex; gap: 7px; align-items: center; padding: 7px 9px; border: 1px solid rgba(111, 169, 158, .25); border-radius: 3px; background: transparent; color: #aacbc5; font: inherit; font-size: .72rem; }
  .knowledge-mobile-header strong { overflow: hidden; color: #eee4d2; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
  .knowledge-shell { display: block; width: 100%; height: auto; min-height: 0; margin: 0; padding: 0; }
  .knowledge-navigation { position: fixed; top: 222px; bottom: auto; left: 0; z-index: 24; width: min(330px, 90vw); height: calc(100dvh - 222px); transform: translateX(-102%); transition: transform 260ms ease; }
  .knowledge-navigation.open { transform: translateX(0); }
  .knowledge-article { height: 100%; min-height: 0; padding: 60px max(24px, 7vw); }
  .knowledge-article h1 { font-size: 2rem; }
  .epic-hero { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; gap: 28px; height: auto; min-height: 680px; padding: 120px 28px 48px; }
  .epic-hero-copy { grid-column: 1; }
  .epic-hero-copy h1 { font-size: 3.2rem; }
  .epic-hero-record { grid-column: 1; }
  .epic-village-index { align-items: flex-start; flex-direction: column; }
  .epic-village-index > div { width: 100%; }
  .epic-village-heading { grid-template-columns: 72px minmax(0, 1fr); gap: 26px; }
  .epic-village-heading dl { grid-column: 1 / -1; }
  .epic-chapter-list { grid-template-columns: 1fr; }
  .epic-modal { grid-template-columns: 1fr; height: min(760px, calc(100dvh - 48px)); overflow-y: auto; }
  .epic-modal-image { min-height: 280px; max-height: 320px; border-right: 0; border-bottom: 1px solid rgba(194, 151, 76, .22); }
  .epic-modal-copy { min-height: 390px; padding: 42px 28px 30px; overflow: visible; }
  .knowledge-editor-workspace { grid-template-columns: 1fr; }
  .knowledge-editor-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .knowledge-editor-rail header { grid-column: 1 / -1; }
  .documentation-admin-head { align-items: stretch; flex-direction: column; }
  .documentation-admin-head > div:last-child { flex-direction: column; }
  .documentation-admin-head .btn { width: 100%; justify-content: center; }
  .knowledge-editor-section-head { grid-template-columns: 1fr; }
  .epic-npc-editor-workspace { grid-template-columns: 1fr; }
  .epic-npc-editor-list { grid-auto-columns: minmax(210px, 72vw); grid-auto-flow: column; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid rgba(217, 164, 65, .15); }
  .epic-npc-editor-list > button { border-right: 1px solid rgba(217, 164, 65, .1); border-bottom: 0; }
  .epic-npc-editor-list > button:hover, .epic-npc-editor-list > button.active { box-shadow: inset 0 -3px 0 var(--gold-bright); }
}

@media (max-width: 560px) {
  .docs-knowledge-page { padding-top: 200px; }
  .knowledge-navigation { top: 258px; height: calc(100dvh - 258px); }
  .knowledge-article { padding: 46px 22px; }
  .knowledge-article h1 { font-size: 1.75rem; }
  .knowledge-pagination { grid-template-columns: 1fr; }
  .knowledge-pagination a.next { text-align: left; }
  .epic-hero { min-height: 650px; padding: 110px 20px 42px; }
  .epic-hero-copy h1 { font-size: 2.55rem; }
  .epic-hero-copy > span { font-size: .9rem; }
  .epic-content { width: min(100% - 28px, 1280px); }
  .epic-village-heading { grid-template-columns: 1fr; padding: 58px 0; }
  .epic-village-number { font-size: 3.5rem; }
  .epic-village-heading h2 { font-size: 2.3rem; }
  .epic-chronicles, .epic-npcs { padding: 58px 0; }
  .epic-chapter-list article { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; min-height: 0; padding: 24px 20px; }
  .epic-chapter-list article > span { width: 40px; height: 40px; }
  .epic-npc-grid { grid-template-columns: 1fr; }
  .knowledge-editor-rail { grid-template-columns: 1fr; }
  .knowledge-page-picker { align-items: stretch; flex-direction: column; }
  .knowledge-page-editor-head { grid-template-columns: 1fr; }
  .documentation-editor-toolbar { position: static; }
  .documentation-rich-editor .tiptap { min-height: 220px; padding: 18px; }
  .documentation-rich-editor > footer { align-items: flex-start; flex-direction: column; }
}

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

/* Dynamic archive v3: cinematic world layer, deliberate motion and shared dialogs. */
body {
  background: #050403;
}

.dynamic-world-background {
  --world-opacity: 1;
  --world-shade: .2;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #050403;
}

.dynamic-world-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: var(--world-opacity);
  transform: translateZ(0) scale(1.02);
  transition: opacity 180ms linear;
  will-change: opacity;
}

.dynamic-world-media.still {
  z-index: 0;
}

.dynamic-world-media.motion {
  z-index: 1;
}

.dynamic-world-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(4, 3, 2, .9) 0%, rgba(4, 3, 2, .54) 23%, rgba(4, 3, 2, .5) 76%, rgba(4, 3, 2, .88) 100%),
    linear-gradient(180deg, rgba(4, 3, 2, .46), rgba(4, 3, 2, .76));
  opacity: var(--world-shade);
  transition: opacity 180ms linear;
  will-change: opacity;
}

main,
.site-footer {
  position: relative;
  z-index: 2;
}

main {
  animation: eastiny-page-enter 560ms cubic-bezier(.22, 1, .36, 1) both;
}

.hero-bg {
  background: transparent !important;
}

/* Keep the opening scene continuous with the shared animated world background. */
#home > .hero.section-frame {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(213, 177, 109, .08),
    0 18px 42px rgba(0, 0, 0, .18) !important;
}

#home > .hero .hero-bg {
  background:
    linear-gradient(90deg, rgba(5, 3, 2, .46) 0%, rgba(5, 3, 2, .2) 48%, rgba(5, 3, 2, .04) 78%),
    linear-gradient(180deg, rgba(5, 3, 2, .02) 48%, rgba(5, 3, 2, .28) 100%) !important;
}

/* Archive display card: restrained pointer-driven depth and moving brass reflection. */
.archive-tilt-card {
  --archive-tilt-x: 0deg;
  --archive-tilt-y: 0deg;
  --archive-glare-x: 50%;
  --archive-glare-y: 50%;
  isolation: isolate;
  pointer-events: auto;
  transform: perspective(1100px) rotateX(var(--archive-tilt-x)) rotateY(var(--archive-tilt-y)) translateZ(0);
  transform-style: preserve-3d;
  transform-origin: center;
  transition:
    transform 520ms cubic-bezier(.16, 1, .3, 1),
    border-color 300ms ease,
    box-shadow 420ms ease;
  will-change: transform;
}

.archive-tilt-card::after {
  position: absolute;
  inset: 1px;
  z-index: 4;
  border-radius: 3px;
  background:
    radial-gradient(circle at var(--archive-glare-x) var(--archive-glare-y), rgba(255, 228, 166, .2), transparent 23%),
    linear-gradient(115deg, transparent 34%, rgba(255, 228, 166, .06) 48%, transparent 62%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translateZ(42px);
  transition: opacity 280ms ease;
}

.archive-tilt-card img {
  transform: translate3d(-50%, 0, 48px);
  transition: filter 420ms ease, opacity 420ms ease;
}

.archive-tilt-card span {
  transform: translateZ(58px);
}

.archive-tilt-card strong {
  transform: translateZ(74px);
  text-shadow: 0 14px 28px rgba(0, 0, 0, .56);
}

/* Player account: a translucent two-column registry over the shared world scene. */
.checkin-page-shell.section-frame {
  min-height: calc(100dvh - 210px);
  background-color: rgba(13, 8, 5, .66) !important;
  background-image:
    linear-gradient(140deg, rgba(225, 193, 129, .08), transparent 30%),
    linear-gradient(180deg, rgba(18, 11, 7, .54), rgba(7, 5, 3, .5)) !important;
  background-blend-mode: normal !important;
  box-shadow:
    inset 0 0 0 3px rgba(4, 2, 1, .48),
    inset 0 0 0 4px rgba(194, 151, 76, .12),
    0 22px 54px rgba(0, 0, 0, .3) !important;
  backdrop-filter: blur(16px) saturate(.78) !important;
  -webkit-backdrop-filter: blur(16px) saturate(.78) !important;
}

.checkin-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(225, 193, 129, .2);
}

.checkin-page-header h1 {
  margin: 5px 0 8px;
  color: var(--cream);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1;
}

.checkin-page-header p:last-child {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
}

.checkin-page .checkin-panel {
  margin: 22px 0 0;
  border-color: rgba(225, 193, 129, .24);
  background-color: rgba(10, 7, 5, .6);
  backdrop-filter: blur(10px) saturate(.78);
  -webkit-backdrop-filter: blur(10px) saturate(.78);
}

.player-account-dashboard.section-frame {
  min-height: 100dvh;
  background-color: rgba(13, 8, 5, .54) !important;
  background-image:
    linear-gradient(135deg, rgba(225, 193, 129, .07), transparent 24%),
    linear-gradient(180deg, rgba(18, 11, 7, .5), rgba(7, 5, 3, .42)) !important;
  background-blend-mode: normal !important;
  box-shadow:
    inset 0 0 0 3px rgba(4, 2, 1, .42),
    inset 0 0 0 4px rgba(194, 151, 76, .1),
    0 22px 54px rgba(0, 0, 0, .28) !important;
  backdrop-filter: blur(16px) saturate(.78) !important;
  -webkit-backdrop-filter: blur(16px) saturate(.78) !important;
}

.player-account-page {
  animation: none !important;
  transform: none !important;
}

.player-account-main {
  width: 100%;
  min-width: 0;
}

.player-account-workspace {
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.player-account-section-nav {
  position: sticky;
  top: 126px;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 6px 18px 18px 0;
  border-right: 1px solid rgba(225, 193, 129, .2);
}

.player-account-section-label {
  margin: 0 10px 10px;
  color: rgba(225, 193, 129, .58);
  font-size: .64rem;
  font-weight: 900;
  text-transform: uppercase;
}

.player-account-section-nav button {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 46px;
  width: 100%;
  padding: 10px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0;
  color: rgba(219, 202, 169, .62);
  background: transparent;
  font: inherit;
  font-size: .76rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.player-account-section-nav button svg {
  width: 19px;
  height: 19px;
}

.player-account-section-nav button:hover,
.player-account-section-nav button.active {
  border-left-color: var(--gold-bright);
  color: #f6e5c3;
  background: rgba(225, 193, 129, .075);
}

.character-profile-panel {
  min-width: 0;
  padding: 4px 0 16px;
}

.character-profile-panel h1 {
  margin: 7px 0 10px;
  color: var(--cream);
  font-size: clamp(2rem, 5vw, 3.3rem);
  line-height: 1.05;
}

.character-profile-panel > p:not(.eyebrow) {
  max-width: 760px;
  color: var(--muted);
}

.character-profile-panel .character-form {
  padding-top: 22px;
  border-top: 1px solid rgba(225, 193, 129, .2);
}

.account-links-panel {
  display: grid;
  gap: 18px;
  min-width: 0;
  padding: 4px 0 20px;
}

.account-links-heading {
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(225, 193, 129, .2);
}

.account-links-heading h1 {
  margin: 7px 0 10px;
  color: var(--cream);
  font-size: clamp(2rem, 5vw, 3.3rem);
  line-height: 1.05;
}

.account-links-heading > p:last-child {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
}

.account-links-panel > .social-link-panel {
  margin: 0;
  padding: 0 0 18px;
  border: 0;
  border-bottom: 1px solid rgba(225, 193, 129, .16);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.account-links-panel > .social-link-panel .social-link-heading strong {
  font-size: 1.35rem;
  line-height: 1.08;
}

.account-links-panel > .social-link-panel .social-link-grid {
  margin-top: 4px;
}

.account-links-panel > .launcher-link-card,
.account-links-panel > .link-status-card {
  margin: 0;
  border-color: rgba(225, 193, 129, .2);
  border-radius: 6px;
  background-color: rgba(10, 7, 5, .5);
  background-image: linear-gradient(145deg, rgba(225, 193, 129, .055), transparent 42%);
  box-shadow: inset 0 1px 0 rgba(255, 244, 214, .035), 0 12px 26px rgba(0, 0, 0, .16);
}

.player-dashboard-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.player-server-overview {
  display: grid;
  gap: 16px;
  margin: 4px 0 22px;
}

.player-server-overview > .server-identities-panel {
  margin: 0;
  border-color: rgba(225, 193, 129, .22);
  background-color: rgba(10, 7, 5, .5);
  background-image: linear-gradient(145deg, rgba(225, 193, 129, .055), transparent 42%);
  box-shadow: inset 0 1px 0 rgba(255, 244, 214, .035), 0 12px 26px rgba(0, 0, 0, .16);
  backdrop-filter: blur(10px) saturate(.74);
  -webkit-backdrop-filter: blur(10px) saturate(.74);
}

.server-identity-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.server-default-action {
  min-height: 38px;
  padding: 9px 10px;
  border: 1px solid rgba(225, 193, 129, .38);
  border-radius: 6px;
  color: #140d07;
  background: var(--gold-bright);
  font: inherit;
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.server-default-action.current,
.server-default-action:disabled {
  border-color: rgba(225, 193, 129, .16);
  color: rgba(219, 202, 169, .56);
  background: rgba(255, 255, 255, .025);
  cursor: default;
}

.player-dashboard-column {
  container: player-column / inline-size;
  display: grid;
  gap: 16px;
  min-width: 0;
}

.player-dashboard-column-heading {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 64px;
  padding: 10px 2px 14px;
  border-bottom: 1px solid rgba(225, 193, 129, .2);
}

.player-dashboard-column-heading > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(225, 193, 129, .32);
  color: var(--gold-bright);
  background: rgba(194, 151, 76, .08);
  font-size: .76rem;
  font-weight: 900;
}

.player-dashboard-column-heading small {
  color: var(--muted);
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
}

.player-dashboard-column-heading h2 {
  margin: 3px 0 0;
  color: var(--cream);
  font-size: 1.15rem;
  line-height: 1.2;
}

.player-dashboard-column > .account-settings-panel,
.player-dashboard-column > .social-link-panel,
.player-dashboard-column > .launcher-link-card,
.player-dashboard-column > .server-identities-panel,
.player-dashboard-column > .link-status-card,
.player-dashboard-column > .checkin-panel,
.player-dashboard-column > .fivem-card {
  min-width: 0;
  margin: 0;
  border-color: rgba(225, 193, 129, .2) !important;
  background-color: rgba(12, 8, 5, .5) !important;
  background-image: linear-gradient(145deg, rgba(225, 193, 129, .055), transparent 42%) !important;
  background-blend-mode: normal !important;
  box-shadow: inset 0 1px 0 rgba(255, 244, 214, .035), 0 12px 26px rgba(0, 0, 0, .16) !important;
  backdrop-filter: blur(10px) saturate(.74) !important;
  -webkit-backdrop-filter: blur(10px) saturate(.74) !important;
}

.player-account-floating-rail {
  --account-follow-y: 0px;
  position: fixed;
  top: 50dvh;
  right: max(16px, calc((100vw - 1600px) / 2));
  z-index: 32;
  width: 324px;
  max-width: calc(100vw - 32px);
  transform: translate3d(0, calc(-50% + var(--account-follow-y)), 0);
  will-change: transform;
}

.player-account-card-arrival {
  animation: account-card-arrive 880ms cubic-bezier(.16, 1, .3, 1) 180ms both;
}

.player-account-float-card {
  --account-tilt-x: 0deg;
  --account-tilt-y: 0deg;
  --account-glare-x: 50%;
  --account-glare-y: 28%;
  position: relative;
  isolation: isolate;
  transform: perspective(1200px) rotateX(var(--account-tilt-x)) rotateY(var(--account-tilt-y));
  transform-style: preserve-3d;
  transition: transform 540ms cubic-bezier(.16, 1, .3, 1), filter 360ms ease;
  will-change: transform;
}

.player-account-float-card::before,
.player-account-float-card::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.player-account-float-card::before {
  inset: -8px;
  z-index: -1;
  border: 1px solid rgba(225, 193, 129, .24);
  clip-path: polygon(0 18px, 18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px));
  background: rgba(4, 2, 1, .52);
  box-shadow: 18px 26px 60px rgba(0, 0, 0, .54), -8px -6px 28px rgba(225, 193, 129, .045);
  transform: translateZ(-24px);
}

.player-account-float-card::after {
  inset: 1px;
  z-index: 5;
  background:
    radial-gradient(circle at var(--account-glare-x) var(--account-glare-y), rgba(255, 232, 181, .2), transparent 24%),
    linear-gradient(118deg, transparent 34%, rgba(255, 232, 181, .055) 49%, transparent 64%);
  opacity: .18;
  transform: translateZ(38px);
  transition: opacity 260ms ease;
}

.player-account-float-card > .character-warrior-card {
  position: relative;
  z-index: 1;
  display: grid;
  max-height: calc(100dvh - 230px);
  margin: 0;
  padding: 24px 22px 22px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(225, 193, 129, .52);
  border-radius: 2px;
  clip-path: polygon(0 15px, 15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px));
  background-color: rgba(10, 7, 5, .9);
  background-image:
    linear-gradient(145deg, rgba(225, 193, 129, .14), transparent 28%),
    linear-gradient(180deg, rgba(5, 4, 3, .08), rgba(5, 3, 2, .64)),
    var(--material-leather);
  background-position: center;
  background-size: auto, auto, cover;
  background-blend-mode: normal, normal, multiply;
  box-shadow:
    inset 0 0 0 3px rgba(3, 2, 1, .72),
    inset 0 0 0 4px rgba(225, 193, 129, .12),
    inset 0 22px 42px rgba(225, 193, 129, .035);
  scrollbar-color: rgba(194, 151, 76, .52) rgba(4, 2, 1, .2);
}

.character-warrior-profile {
  position: relative;
  display: grid;
  justify-items: center;
  padding: 5px 0 17px;
  text-align: center;
}

.character-warrior-profile::after {
  width: 76%;
  height: 1px;
  margin-top: 16px;
  background: linear-gradient(90deg, transparent, rgba(225, 193, 129, .62), transparent);
  content: "";
}

.character-warrior-avatar-frame {
  position: relative;
  display: grid;
  width: 110px;
  height: 110px;
  margin-bottom: 18px;
  place-items: center;
  border-radius: 50%;
  background: rgba(3, 2, 1, .88);
  box-shadow:
    0 18px 32px rgba(0, 0, 0, .52),
    inset 0 0 0 1px rgba(255, 242, 207, .1);
  transform: translateZ(44px);
}

.character-warrior-avatar-ring {
  position: absolute;
  inset: -9px;
  border: 1px solid rgba(225, 193, 129, .72);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 4px rgba(5, 3, 2, .82),
    inset 0 0 0 5px rgba(225, 193, 129, .2),
    0 0 24px rgba(194, 151, 76, .13);
}

.character-warrior-avatar-ring::before,
.character-warrior-avatar-ring::after {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  border: solid rgba(225, 193, 129, .55);
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

.character-warrior-avatar-ring::before {
  left: -18px;
  border-width: 0 0 1px 1px;
}

.character-warrior-avatar-ring::after {
  right: -18px;
  border-width: 1px 1px 0 0;
}

.character-warrior-avatar {
  width: 96px;
  height: 96px;
  border: 2px solid rgba(225, 193, 129, .38);
  border-radius: 50%;
  background: rgba(8, 6, 4, .94);
  object-fit: cover;
}

.character-warrior-status-dot {
  position: absolute;
  right: 3px;
  bottom: 6px;
  width: 13px;
  height: 13px;
  border: 3px solid #0a0705;
  border-radius: 50%;
  background: #d6b05d;
  box-shadow: 0 0 12px rgba(214, 176, 93, .46);
}

.character-warrior-card.verified .character-warrior-status-dot {
  background: #9dffbf;
  box-shadow: 0 0 12px rgba(157, 255, 191, .42);
}

.character-warrior-card.unlinked .character-warrior-status-dot {
  background: #8f8066;
  box-shadow: none;
}

.character-warrior-profile .character-warrior-rank {
  margin: 0 0 5px;
  color: rgba(225, 193, 129, .78);
  font-size: .66rem;
  letter-spacing: .12em;
}

.character-warrior-profile strong {
  max-width: 100%;
  margin: 0;
  color: #fff0cf;
  font-size: 1.5rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
  text-shadow: 0 8px 20px rgba(0, 0, 0, .62);
}

.character-warrior-profile small {
  max-width: 100%;
  margin-top: 7px;
  color: rgba(219, 202, 169, .64);
  font-size: .72rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.player-account-float-card .character-warrior-note {
  margin: -4px 0 2px;
  color: rgba(219, 202, 169, .7);
  font-size: .76rem;
  line-height: 1.55;
  text-align: center;
}

.player-account-float-card .character-warrior-profile,
.player-account-float-card .character-warrior-note,
.player-account-float-card .character-warrior-details,
.player-account-float-card .character-warrior-finances {
  position: relative;
  z-index: 2;
}

.player-account-float-card .character-warrior-profile {
  transform: translateZ(24px);
}

.player-account-float-card .character-warrior-details {
  display: grid;
  gap: 0;
  margin: 6px 0 0;
  border-top: 1px solid rgba(225, 193, 129, .2);
  transform: translateZ(34px);
}

.player-account-float-card .character-warrior-details > div {
  display: grid;
  grid-template-columns: minmax(92px, .8fr) minmax(0, 1.2fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px 0;
  border-bottom: 1px solid rgba(225, 193, 129, .14);
}

.player-account-float-card .character-warrior-details dt {
  color: rgba(225, 193, 129, .72);
  font-size: .64rem;
  font-weight: 900;
  line-height: 1.25;
  text-transform: uppercase;
}

.player-account-float-card .character-warrior-details dd {
  min-width: 0;
  margin: 0;
  color: #f6e5c3;
  font-size: .79rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: right;
  overflow-wrap: anywhere;
}

.player-account-float-card .character-warrior-finances {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(225, 193, 129, .22);
  transform: translateZ(38px);
}

.character-warrior-finances article {
  display: grid;
  min-width: 0;
  padding: 2px 6px;
  place-items: center;
  text-align: center;
}

.character-warrior-finances article + article {
  border-left: 1px solid rgba(225, 193, 129, .16);
}

.character-warrior-finances svg {
  width: 19px;
  height: 19px;
  margin-bottom: 7px;
  color: rgba(225, 193, 129, .88);
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, .42));
}

.character-warrior-finances span {
  color: rgba(225, 193, 129, .6);
  font-size: .55rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.character-warrior-finances strong {
  max-width: 100%;
  margin-top: 5px;
  color: #f6e5c3;
  font-size: .68rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

@keyframes account-card-arrive {
  from { opacity: 0; transform: translate3d(72px, 12px, 0) scale(.96); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

.player-account-dashboard > .player-overview-panel {
  background: rgba(9, 7, 5, .48);
  box-shadow: inset 0 1px 0 rgba(255, 244, 214, .035);
  backdrop-filter: blur(10px) saturate(.76);
  -webkit-backdrop-filter: blur(10px) saturate(.76);
}

.player-dashboard-column .account-settings-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.player-dashboard-column .account-settings-form > .btn {
  grid-column: 1 / -1;
  justify-self: start;
}

.player-account-actions {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(225, 193, 129, .18);
}

@container player-column (max-width: 520px) {
  .player-dashboard-column .account-settings-form,
  .player-dashboard-column .checkin-summary-grid,
  .player-dashboard-column .server-identity-grid,
  .player-dashboard-column .profile-group .fivem-stat-list,
  .player-dashboard-column .progress-group .fivem-stat-list,
  .player-dashboard-column .finance-group .fivem-stat-list {
    grid-template-columns: 1fr;
  }

  .player-dashboard-column .social-account-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .player-dashboard-column .social-account-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .player-dashboard-column .checkin-claim-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .player-dashboard-column .checkin-claim-card > .btn {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .player-dashboard-column .checkin-reward-grid {
    grid-template-columns: 1fr;
  }

  .player-dashboard-column .checkin-calendar-grid {
    grid-auto-columns: minmax(148px, 56%);
  }

  .player-dashboard-column .fivem-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 981px) {
  .checkin-page.panel-page {
    width: min(1240px, calc(100% - 40px)) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .player-account-page.panel-page {
    width: min(1600px, calc(100% - 32px)) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }
}

@media (min-width: 1181px) {
  .player-account-dashboard.section-frame {
    width: calc(100% - 380px);
    margin-right: auto;
    margin-left: 0;
  }
}

@media (max-width: 1120px) {
  .player-dashboard-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .player-account-workspace {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .player-account-section-nav {
    position: static;
    grid-auto-flow: column;
    grid-auto-columns: minmax(150px, 1fr);
    overflow-x: auto;
    padding: 0 0 12px;
    border-right: 0;
    border-bottom: 1px solid rgba(225, 193, 129, .2);
  }

  .player-account-section-label {
    display: none;
  }

  .player-account-section-nav button {
    border-bottom: 2px solid transparent;
    border-left: 0;
  }

  .player-account-section-nav button:hover,
  .player-account-section-nav button.active {
    border-bottom-color: var(--gold-bright);
    border-left-color: transparent;
  }
}

@media (max-width: 1180px) {
  .player-account-main {
    width: 100%;
  }

  .player-account-floating-rail {
    position: relative;
    top: auto;
    right: auto;
    z-index: 1;
    width: 100%;
    max-width: none;
    margin-top: 22px;
    transform: none;
  }

  .player-account-dashboard.section-frame {
    width: 100%;
  }

  .player-account-float-card > .character-warrior-card {
    max-height: none;
  }
}

@media (max-width: 680px) {
  .checkin-page-header {
    align-items: stretch;
    flex-direction: column;
  }

  .checkin-page-header .btn {
    width: 100%;
  }

  .server-identity-controls {
    grid-template-columns: 1fr;
  }

  .character-warrior-avatar-frame {
    width: 100px;
    height: 100px;
  }

  .character-warrior-avatar {
    width: 86px;
    height: 86px;
  }

  .player-account-float-card .character-warrior-details > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .player-account-float-card .character-warrior-details dd {
    text-align: left;
  }
}

@media (hover: hover) and (pointer: fine) {
  .archive-tilt-card:hover {
    border-color: rgba(225, 193, 129, .72);
    box-shadow:
      inset 0 0 0 4px rgba(4, 2, 1, .68),
      inset 0 0 0 5px rgba(225, 193, 129, .18),
      0 34px 60px rgba(0, 0, 0, .52) !important;
  }

  .archive-tilt-card:hover::after {
    opacity: 1;
  }

  .archive-tilt-card:hover img {
    opacity: .9;
    filter: sepia(1) saturate(.98) brightness(.98) contrast(1.08) drop-shadow(0 18px 24px rgba(0, 0, 0, .62));
  }

  .player-account-float-card:hover {
    filter: brightness(1.045);
  }

  .player-account-float-card:hover::after {
    opacity: .8;
  }
}

.hero-actions .btn {
  text-transform: uppercase;
}

.reveal {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition:
    opacity 640ms cubic-bezier(.22, 1, .36, 1),
    transform 700ms cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.interactive-card {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 280ms cubic-bezier(.22, 1, .36, 1), border-color 280ms ease, box-shadow 280ms ease !important;
}

.interactive-card.reveal {
  transition:
    opacity 640ms cubic-bezier(.22, 1, .36, 1),
    transform 700ms cubic-bezier(.22, 1, .36, 1),
    border-color 280ms ease,
    box-shadow 280ms ease !important;
  transition-delay:
    var(--reveal-delay, 0ms),
    var(--reveal-delay, 0ms),
    0ms,
    0ms !important;
}

.reveal.reveal-complete {
  will-change: auto;
}

.interactive-card.reveal.reveal-complete {
  transition: transform 280ms cubic-bezier(.22, 1, .36, 1), border-color 280ms ease, box-shadow 280ms ease !important;
  transition-delay: 0ms !important;
}

.reveal.reveal-leaving,
.interactive-card.reveal.reveal-leaving {
  transition:
    opacity 300ms ease,
    transform 380ms cubic-bezier(.4, 0, 1, 1) !important;
  transition-delay: 0ms !important;
}

@media (max-width: 980px) {
  .account-topbar {
    background: rgba(10, 8, 6, .92) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

.interactive-card:hover,
.interactive-card:focus-visible {
  transform: translateY(-6px) !important;
  border-color: rgba(225, 193, 129, .64) !important;
  outline: none;
}

.feature-card i {
  display: block;
  margin-top: 18px;
  color: var(--gold-bright);
  font-size: .72rem;
  font-style: normal;
  text-transform: uppercase;
}

.archive-text-button {
  padding: 0;
  border: 0;
  color: var(--gold-bright);
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.eastiny-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 28px;
  overflow-y: auto;
  background: rgba(3, 2, 1, .78);
  backdrop-filter: blur(12px);
  animation: eastiny-backdrop-in 220ms ease both;
}

.eastiny-modal {
  position: relative;
  width: min(880px, 100%);
  max-height: min(820px, calc(100vh - 56px));
  overflow: auto;
  border: 1px solid rgba(213, 177, 109, .5);
  border-radius: 6px;
  color: var(--cream);
  background-color: #120b07;
  background-image: var(--material-leather);
  background-size: cover;
  background-blend-mode: multiply;
  box-shadow: inset 0 0 0 4px rgba(3, 2, 1, .74), inset 0 0 0 5px rgba(213, 177, 109, .11), 0 30px 90px rgba(0, 0, 0, .72);
  animation: eastiny-modal-in 460ms cubic-bezier(.16, 1, .3, 1) both;
}

.eastiny-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(213, 177, 109, .44);
  border-radius: 3px;
  color: var(--cream);
  background: rgba(9, 6, 4, .88);
  font: 300 1.55rem/1 "Exo 2", system-ui, sans-serif;
  cursor: pointer;
}

.auth-book-backdrop {
  z-index: 120;
  perspective: 1800px;
}

.auth-book {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(280px, .82fr) minmax(420px, 1.18fr);
  width: min(980px, 100%);
  max-width: 980px !important;
  min-height: 640px;
  max-height: calc(100dvh - 56px);
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(225, 193, 129, .62) !important;
  border-radius: 6px !important;
  background: #100905 !important;
  box-shadow: 0 42px 120px rgba(0, 0, 0, .82), inset 0 0 0 4px rgba(3, 2, 1, .72) !important;
  transform-style: preserve-3d;
  animation: eastiny-book-arrive 840ms cubic-bezier(.16, 1, .3, 1) both;
}

.auth-book-left-page,
.auth-book-form-page {
  position: relative;
  min-width: 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.auth-book-left-page {
  display: flex;
  padding: 58px 44px 42px;
  overflow: hidden;
  border-right: 1px solid rgba(225, 193, 129, .24);
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(145deg, rgba(205, 161, 82, .12), transparent 38%), var(--material-leather), #160d08;
  background-position: center;
  background-size: auto, cover, auto;
  background-blend-mode: normal, multiply, normal;
  transform-origin: right center;
  animation: eastiny-book-open-left 920ms cubic-bezier(.2, .75, .2, 1) both;
}

.auth-book-left-page::after {
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(225, 193, 129, .18);
  box-shadow: inset 0 0 0 5px rgba(3, 2, 1, .26);
  content: "";
  pointer-events: none;
}

.auth-book-emblem {
  position: relative;
  z-index: 1;
  display: grid;
  width: 112px;
  height: 112px;
  margin-bottom: 32px;
  place-items: center;
  border: 1px solid rgba(225, 193, 129, .34);
  background: rgba(5, 3, 2, .38);
  box-shadow: inset 0 0 0 4px rgba(205, 161, 82, .06);
}

.auth-book-emblem img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  filter: sepia(1) saturate(.85) brightness(1.12);
}

.auth-book-left-page .eyebrow,
.auth-book-left-page h2,
.auth-book-left-page p,
.auth-book-region {
  position: relative;
  z-index: 1;
}

.auth-book-left-page h2 {
  max-width: 9ch;
  margin-bottom: 24px;
  color: var(--cream);
  font-size: 3rem;
  line-height: 1.02;
  overflow-wrap: anywhere;
}

.auth-book-left-page > p:not(.eyebrow) {
  max-width: 33ch;
  margin-bottom: 30px;
  color: #cdbb9c;
  line-height: 1.7;
}

.auth-book-region {
  width: fit-content;
  padding-top: 15px;
  border-top: 1px solid rgba(225, 193, 129, .24);
  color: var(--gold-bright);
  font-size: .76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.auth-book-form-page {
  padding: 58px 54px 46px;
  overflow-y: auto;
  background: linear-gradient(110deg, rgba(225, 193, 129, .08), transparent 18%), var(--material-walnut), #120b07;
  background-position: center;
  background-size: auto, 620px, auto;
  background-blend-mode: normal, multiply, normal;
  transform-origin: left center;
  animation: eastiny-book-open-right 920ms cubic-bezier(.2, .75, .2, 1) both;
}

.auth-book-form-page h1 {
  max-width: 12ch;
  margin: 6px 0 16px;
  font-size: 3rem;
  line-height: 1;
  overflow-wrap: anywhere;
}

.auth-book-form-page > p:not(.eyebrow):not(.form-message) {
  margin-bottom: 0;
  color: #c9b99d;
}

.auth-book-form-page .auth-form {
  margin-top: 22px;
}

.auth-book-form-page .auth-switch,
.auth-book-form-page .auth-link {
  min-height: 40px;
}

.auth-book-close {
  top: 16px;
  right: 16px;
  z-index: 8;
}

.auth-book-spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 41.8%;
  z-index: 6;
  width: 18px;
  pointer-events: none;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(0, 0, 0, .52), rgba(225, 193, 129, .1) 48%, rgba(0, 0, 0, .58));
  box-shadow: 10px 0 24px rgba(0, 0, 0, .28), -10px 0 24px rgba(0, 0, 0, .24);
}

.archive-modal {
  display: grid;
  grid-template-columns: minmax(280px, .92fr) minmax(340px, 1.08fr);
  overflow: hidden;
}

.archive-modal-media {
  min-height: 530px;
  overflow: hidden;
  border-right: 1px solid rgba(213, 177, 109, .24);
}

.archive-modal-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 9s ease-out;
}

.archive-modal:hover .archive-modal-media img {
  transform: scale(1.055);
}

.archive-modal-body {
  display: flex;
  min-width: 0;
  padding: 64px 46px 44px;
  flex-direction: column;
  justify-content: center;
}

.archive-modal-body h2,
.launcher-download-head h2 {
  margin: 6px 0 18px;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  line-height: 1.04;
  overflow-wrap: anywhere;
}

.archive-modal-body > p:not(.eyebrow) {
  color: #c9b99d;
  line-height: 1.75;
}

.archive-modal-body ul {
  display: grid;
  gap: 10px;
  margin: 20px 0 28px;
  padding-left: 20px;
  color: #c9b99d;
}

.archive-modal-body .btn {
  align-self: flex-start;
  margin-top: 18px;
}

.character-path-modal {
  grid-template-columns: minmax(360px, .88fr) minmax(430px, 1.12fr);
  width: min(1100px, calc(100vw - 56px));
  height: min(720px, calc(100dvh - 56px));
  max-height: min(760px, calc(100dvh - 56px));
  overflow: hidden;
  background-color: #0d0805;
  animation: character-path-card-open 560ms cubic-bezier(.16, 1, .3, 1) both;
  transform-origin: center;
}

.character-path-modal .archive-modal-media {
  position: relative;
  min-height: 0;
  height: 100%;
  background: #060403;
}

.character-path-modal .archive-modal-media::after {
  position: absolute;
  inset: 0;
  border: 10px solid rgba(4, 3, 2, .78);
  box-shadow: inset 0 0 0 1px rgba(225, 193, 129, .24), inset 0 -110px 100px rgba(4, 2, 1, .34);
  content: "";
  pointer-events: none;
}

.character-path-modal .archive-modal-media img {
  object-position: center 32%;
  transform: none;
}

.character-path-modal:hover .archive-modal-media img {
  transform: none;
}

.character-path-modal-number {
  position: absolute;
  top: 26px;
  left: 26px;
  z-index: 2;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid rgba(244, 211, 139, .72);
  color: var(--gold-bright);
  background: rgba(7, 4, 2, .88);
  box-shadow: 0 0 24px rgba(213, 177, 109, .2);
  font-size: .85rem;
  font-weight: 900;
}

.character-path-modal .archive-modal-body {
  position: relative;
  padding: 60px 58px 38px;
  overflow-y: auto;
  background: linear-gradient(90deg, rgba(213, 177, 109, .055), transparent 20%), var(--material-leather), #110a06;
  background-position: center;
  background-size: auto, cover, auto;
  background-blend-mode: normal, multiply, normal;
}

.character-path-modal .archive-modal-body::before {
  display: block;
  width: 54px;
  height: 1px;
  margin-bottom: 24px;
  background: var(--gold-bright);
  box-shadow: 0 0 14px rgba(225, 193, 129, .42);
  content: "";
}

.character-path-modal .archive-modal-body .eyebrow {
  margin: 0 0 9px;
  font-size: .78rem;
}

.character-path-modal-role {
  margin: 0;
  color: #aa9470 !important;
  font-size: .9rem;
  font-weight: 800;
  line-height: 1.35 !important;
  text-transform: uppercase;
}

.character-path-modal .archive-modal-body h2 {
  margin: 8px 0 22px;
  color: var(--cream);
  font-size: 2.85rem;
  line-height: 1.02;
}

.character-path-modal .archive-modal-body > p:not(.eyebrow):not(.character-path-modal-role) {
  margin: 0;
  color: #d6c7ad;
  font-size: 1.05rem;
  line-height: 1.75;
}

.character-path-modal-traits {
  margin-top: 30px;
}

.character-path-modal-traits > strong {
  display: block;
  margin-bottom: 10px;
  color: var(--gold-bright);
  font-size: .75rem;
  text-transform: uppercase;
}

.character-path-modal .character-path-modal-traits ul {
  gap: 0;
  margin: 0 0 30px;
  padding: 0;
  border-top: 1px solid rgba(213, 177, 109, .18);
  list-style: none;
}

.character-path-modal-traits li {
  position: relative;
  min-height: 44px;
  padding: 11px 12px 11px 28px;
  border-bottom: 1px solid rgba(213, 177, 109, .14);
  color: #e1d1b4;
  font-size: .95rem;
}

.character-path-modal-traits li::before {
  position: absolute;
  top: 18px;
  left: 7px;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(225, 193, 129, .76);
  content: "";
  transform: rotate(45deg);
}

@keyframes character-path-card-open {
  from {
    opacity: 0;
    transform: translateY(34px) scale(.76) rotateX(7deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0);
  }
}

.launcher-download-modal {
  width: min(940px, 100%);
  padding: 46px;
}

.launcher-download-head {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding-right: 36px;
}

.launcher-download-head img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  filter: sepia(1) saturate(.8) brightness(1.08);
}

.launcher-download-head p {
  margin: 0;
  color: var(--muted);
}

.launcher-download-list {
  display: grid;
  gap: 12px;
  margin-top: 30px;
}

.launcher-download-option {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px 22px;
  align-items: center;
  padding: 22px;
  border: 1px solid rgba(194, 151, 76, .26);
  border-radius: 4px;
  background: rgba(7, 5, 3, .58);
}

.launcher-download-option.featured {
  border-color: rgba(225, 193, 129, .58);
  box-shadow: inset 3px 0 0 var(--gold);
}

.launcher-download-option span,
.launcher-download-option small {
  color: var(--gold-bright);
  font-size: .72rem;
  text-transform: uppercase;
}

.launcher-download-option h3 {
  margin: 5px 0 4px;
  font-size: 1.15rem;
}

.launcher-download-option p {
  margin: 0 0 8px;
  color: var(--muted);
}

.launcher-download-option code {
  grid-column: 1 / -1;
  overflow: hidden;
  color: #927f63;
  font-size: .7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.launcher-download-state {
  display: grid;
  min-height: 170px;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 28px;
  border: 1px dashed rgba(194, 151, 76, .32);
  color: var(--muted);
  text-align: center;
}

.launcher-download-state p {
  max-width: 540px;
  margin: 0;
}

.archive-loader {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(213, 177, 109, .25);
  border-top-color: var(--gold-bright);
  border-radius: 50% !important;
  animation: eastiny-spin 800ms linear infinite;
}

.launcher-download-foot {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(194, 151, 76, .22);
  color: var(--muted);
  font-size: .82rem;
}

.launcher-download-foot a {
  color: var(--gold-bright);
}

.launcher-links-editor {
  display: block;
  padding-top: 22px;
  border-top: 1px solid rgba(194, 151, 76, .24);
}

.launcher-links-editor-head,
.launcher-link-editor-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.launcher-links-editor-head p {
  max-width: 620px;
  margin: 6px 0 0;
  color: var(--muted);
}

.launcher-links-editor-list {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.launcher-links-empty,
.launcher-link-editor {
  padding: 18px;
  border: 1px solid rgba(194, 151, 76, .24);
  border-radius: 4px;
  background: rgba(7, 5, 3, .42);
}

.launcher-links-empty {
  color: var(--muted);
}

.launcher-link-editor-title {
  margin-bottom: 16px;
}

.launcher-link-editor-title button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(190, 73, 63, .42);
  color: #e0a09a;
  background: rgba(91, 25, 21, .28);
  cursor: pointer;
}

.launcher-link-flags {
  display: flex;
  gap: 20px;
  align-items: center;
  padding-top: 26px;
}

.launcher-link-flags label {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
}

.launcher-link-flags input {
  width: 18px;
  height: 18px;
}

@keyframes eastiny-page-enter {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes eastiny-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes eastiny-modal-in {
  from { opacity: 0; transform: translateY(24px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes eastiny-book-arrive {
  0% { opacity: 0; transform: translateY(28px) scale(.72) rotateX(5deg); }
  28% { opacity: 1; transform: translateY(8px) scale(.76) rotateX(2deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0); }
}

@keyframes eastiny-book-open-left {
  0%, 24% { opacity: 0; transform: rotateY(82deg); }
  100% { opacity: 1; transform: rotateY(0); }
}

@keyframes eastiny-book-open-right {
  0%, 24% { opacity: 0; transform: rotateY(-82deg); }
  100% { opacity: 1; transform: rotateY(0); }
}

@keyframes eastiny-hero-breathe {
  from { background-position: 48% center; }
  to { background-position: 52% center; }
}

@keyframes eastiny-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 720px) {
  .eastiny-modal-backdrop {
    padding: 12px;
  }

  .eastiny-modal {
    max-height: calc(100vh - 24px);
  }

  .archive-modal {
    display: block;
    overflow: auto;
  }

  .archive-modal-media {
    min-height: 210px;
    height: 32vh;
    border-right: 0;
    border-bottom: 1px solid rgba(213, 177, 109, .24);
  }

  .archive-modal-body,
  .launcher-download-modal {
    padding: 54px 22px 24px;
  }

  .launcher-download-head {
    display: block;
    padding-right: 24px;
  }

  .launcher-download-head img {
    width: 68px;
    height: 68px;
    margin-bottom: 12px;
  }

  .launcher-download-option {
    grid-template-columns: 1fr;
  }

  .launcher-download-option .btn {
    width: 100%;
  }

  .launcher-links-editor-head,
  .launcher-link-editor-title,
  .launcher-link-flags {
    align-items: stretch;
    flex-direction: column;
  }

  .auth-book {
    display: block !important;
    min-height: 0;
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
  }

  .auth-book-left-page {
    min-height: 190px;
    padding: 32px 26px 28px;
    border-right: 0;
    border-bottom: 1px solid rgba(225, 193, 129, .24);
    justify-content: flex-end;
  }

  .auth-book-emblem {
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
  }

  .auth-book-emblem img {
    width: 52px;
    height: 52px;
  }

  .auth-book-left-page .eyebrow,
  .auth-book-left-page > p:not(.eyebrow),
  .auth-book-region {
    display: none;
  }

  .auth-book-left-page h2 {
    max-width: 18ch;
    margin: 0;
    padding-right: 44px;
    font-size: 2rem;
  }

  .auth-book-form-page {
    padding: 34px 22px 26px;
    overflow: visible;
  }

  .auth-book-form-page h1 {
    font-size: 2.25rem;
  }

  .auth-book-spine {
    display: none;
  }
}

@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  .site-header {
    top: 0 !important;
    left: 0 !important;
    width: 252px !important;
    height: 100dvh !important;
    padding: 22px 16px !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    background-color: rgba(10, 7, 4, .7) !important;
    background-image: linear-gradient(180deg, rgba(20, 14, 9, .7), rgba(7, 5, 3, .54)) !important;
    background-blend-mode: normal !important;
    box-shadow: inset -1px 0 0 rgba(225, 193, 129, .12), 18px 0 46px rgba(0, 0, 0, .34) !important;
    backdrop-filter: blur(20px) saturate(.72) !important;
    -webkit-backdrop-filter: blur(20px) saturate(.72) !important;
    transform: translate3d(calc(-100% + 8px), 0, 0) !important;
    transition: transform 440ms cubic-bezier(.22, 1, .36, 1) 160ms !important;
    will-change: transform;
  }

  .site-header::after {
    position: absolute;
    top: 0;
    right: -30px;
    width: 38px;
    height: 100%;
    content: "";
  }

  .site-header::before {
    position: absolute;
    top: 50%;
    right: -26px;
    z-index: 2;
    width: 26px;
    height: 82px;
    border: 1px solid rgba(213, 177, 109, .38);
    border-left: 0;
    background: rgba(16, 10, 6, .88);
    box-shadow: 5px 0 18px rgba(0, 0, 0, .34), inset 2px 0 0 rgba(213, 177, 109, .08);
    content: "›";
    color: var(--gold-bright);
    font: 700 1.4rem/80px "Exo 2", system-ui, sans-serif;
    text-align: center;
    transform: translateY(-50%);
    transition: opacity 220ms ease;
  }

  .site-header:hover,
  .site-header:focus-within,
  .site-header.proximity-open {
    transform: translate3d(0, 0, 0) !important;
    transition-delay: 0ms !important;
  }

  .site-header:hover::before,
  .site-header:focus-within::before,
  .site-header.proximity-open::before {
    opacity: 0;
  }

  .content-section,
  .hero,
  .join-section,
  .site-footer {
    width: min(1240px, calc(100% - 40px)) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  #home > .content-section,
  #home > .hero,
  #home > .join-section {
    width: min(1440px, calc(100% - 32px)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dynamic-world-media.motion {
    display: none;
  }

  .hero-bg {
    background: transparent !important;
  }

  .dynamic-world-media,
  .dynamic-world-shade {
    transform: none;
    transition: none;
  }

  .archive-tilt-card {
    transform: none !important;
    transition: none !important;
  }

  .archive-tilt-card::after {
    display: none;
  }

  .player-account-floating-rail {
    --account-follow-y: 0px;
  }

  .player-account-card-arrival {
    animation: none !important;
  }

  .player-account-float-card {
    transform: none !important;
    transition: none !important;
  }

  .player-account-float-card::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 1181px) {
  .player-account-floating-rail {
    transform: translateY(-50%) !important;
  }
}

/* Prevent accidental text highlighting while preserving editable controls. */
body,
body * {
  -webkit-user-select: none;
  user-select: none;
}

input,
textarea,
select,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

/* Character paths: a cohesive gothic card deck with an accessible detail layer. */
.character-path-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.character-path-card {
  position: relative;
  display: flex;
  min-width: 0;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(213, 177, 109, .34) !important;
  border-radius: 4px !important;
  flex-direction: column;
  background: #0b0704 !important;
  box-shadow: inset 0 0 0 3px rgba(3, 2, 1, .7), 0 14px 28px rgba(0, 0, 0, .28) !important;
  isolation: isolate;
}

.character-path-card::after {
  display: none !important;
}

.character-path-art {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-bottom: 1px solid rgba(213, 177, 109, .28);
  background: #080503;
}

.character-path-art::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(4, 3, 2, .82));
  content: "";
  pointer-events: none;
}

.character-path-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 680ms cubic-bezier(.16, 1, .3, 1), filter 420ms ease;
}

.character-path-number {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(225, 193, 129, .5);
  color: var(--gold-bright);
  background: rgba(8, 5, 3, .82);
  font-size: .72rem;
  font-weight: 900;
}

.character-path-caption {
  display: flex;
  min-height: 98px;
  padding: 14px 16px 16px;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.character-path-caption small {
  color: #a99168;
  font-size: .8rem;
  font-weight: 800;
  line-height: 1.35;
  text-transform: uppercase;
}

.character-path-caption strong {
  display: block;
  margin-top: 7px;
  color: var(--cream);
  font-size: 1.25rem;
  line-height: 1.18;
}

@media (hover: hover) and (pointer: fine) {
.character-path-card:hover,
  .character-path-card:focus-visible {
    z-index: 3;
    border-color: rgba(244, 211, 139, .92) !important;
    box-shadow: inset 0 0 0 3px rgba(3, 2, 1, .72), inset 0 0 24px rgba(225, 193, 129, .1), 0 0 0 1px rgba(244, 211, 139, .24), 0 0 28px rgba(213, 177, 109, .36), 0 18px 36px rgba(0, 0, 0, .46) !important;
    transform: none !important;
  }

  .character-path-card:hover .character-path-art img,
  .character-path-card:focus-visible .character-path-art img {
    filter: brightness(1.05) saturate(1.04);
    transform: none;
  }
}

.character-path-card:active {
  transform: scale(.985) !important;
}

@media (max-width: 760px) {
  .eastiny-modal-backdrop:has(.character-path-modal) {
    padding: 12px;
  }

  .character-path-modal {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
  }

  .character-path-modal .archive-modal-media {
    min-height: 280px;
    height: min(43vh, 410px);
    border-right: 0;
    border-bottom: 1px solid rgba(213, 177, 109, .24);
  }

  .character-path-modal .archive-modal-body {
    padding: 38px 24px 28px;
    overflow: visible;
  }

  .character-path-modal .archive-modal-body h2 {
    font-size: 2.3rem;
  }

  .character-path-modal .archive-modal-body > p:not(.eyebrow):not(.character-path-modal-role) {
    font-size: 1rem;
  }

  .character-path-modal .archive-modal-body .btn {
    width: 100%;
  }
}

.character-paths-editor {
  display: block;
  padding-top: 18px;
  border-top: 1px solid rgba(213, 177, 109, .2);
}

.character-paths-editor-head,
.character-path-editor-detail > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.character-paths-editor-head p {
  max-width: 680px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: .86rem;
}

.character-paths-editor-head .btn {
  flex: 0 0 auto;
}

.character-paths-workspace {
  display: grid;
  grid-template-columns: 276px minmax(0, 1fr);
  min-height: 650px;
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid rgba(213, 177, 109, .24);
  background: rgba(5, 3, 2, .32);
}

.character-paths-editor-list {
  display: grid;
  align-content: start;
  max-height: 760px;
  overflow-y: auto;
  border-right: 1px solid rgba(213, 177, 109, .2);
  background: rgba(4, 3, 2, .42);
  scrollbar-color: rgba(213, 177, 109, .42) transparent;
  scrollbar-width: thin;
}

.character-path-editor-tab {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  min-height: 78px;
  align-items: center;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid rgba(213, 177, 109, .11);
  color: var(--cream);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color 180ms ease, box-shadow 180ms ease;
}

.character-path-editor-tab:hover,
.character-path-editor-tab:focus-visible {
  background: rgba(213, 177, 109, .06);
}

.character-path-editor-tab.active {
  background: rgba(213, 177, 109, .1);
  box-shadow: inset 3px 0 0 var(--gold-bright);
}

.character-path-editor-tab > img {
  width: 58px;
  height: 58px;
  border: 1px solid rgba(213, 177, 109, .28);
  object-fit: cover;
}

.character-path-editor-tab span,
.character-path-editor-tab small,
.character-path-editor-tab strong,
.character-path-editor-tab i {
  display: block;
  min-width: 0;
}

.character-path-editor-tab small,
.character-path-editor-detail > header small {
  color: var(--gold-bright);
  font-size: .65rem;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.character-path-editor-tab strong {
  overflow: hidden;
  margin-top: 3px;
  color: var(--cream);
  font-size: .88rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.character-path-editor-tab i {
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  font-size: .68rem;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.character-path-editor-detail {
  min-width: 0;
  background: rgba(8, 5, 3, .26);
}

.character-path-editor-detail > header {
  min-height: 76px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(213, 177, 109, .17);
  background: rgba(213, 177, 109, .035);
}

.character-path-editor-detail > header h3 {
  margin: 4px 0 0;
  color: var(--cream);
  font-size: 1.2rem;
}

.character-path-editor-body {
  display: grid;
  grid-template-columns: 214px minmax(0, 1fr);
  gap: 22px;
  padding: 22px;
}

.character-path-editor-preview {
  align-self: start;
  overflow: hidden;
  border: 1px solid rgba(213, 177, 109, .3);
  background: #090603;
  box-shadow: inset 0 0 0 3px rgba(2, 1, 1, .7);
  text-align: center;
}

.character-path-editor-preview > div {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-bottom: 1px solid rgba(213, 177, 109, .2);
}

.character-path-editor-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.character-path-editor-preview div > span {
  position: absolute;
  top: 12px;
  left: 12px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(225, 193, 129, .55);
  color: var(--gold-bright);
  background: rgba(6, 4, 2, .86);
  font-size: .68rem;
  font-weight: 900;
}

.character-path-editor-preview > small,
.character-path-editor-preview > strong {
  display: block;
  padding-inline: 14px;
}

.character-path-editor-preview > small {
  margin-top: 14px;
  color: #a99168;
  font-size: .67rem;
  font-weight: 800;
  text-transform: uppercase;
}

.character-path-editor-preview > strong {
  margin: 6px 0 16px;
  color: var(--cream);
  font-size: 1rem;
}

.character-path-editor-form {
  align-content: start;
  min-width: 0;
}

.character-path-editor-form textarea {
  min-height: 122px;
}

.character-path-editor-actions {
  display: flex;
  gap: 6px;
}

.character-path-editor-actions button {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(213, 177, 109, .25);
  color: var(--gold-bright);
  background: rgba(213, 177, 109, .06);
  cursor: pointer;
}

.character-path-editor-actions button.danger {
  border-color: rgba(190, 73, 63, .38);
  color: #d99b95;
}

.character-path-editor-actions button:disabled {
  cursor: not-allowed;
  opacity: .3;
}

.character-paths-editor-empty {
  display: grid;
  min-height: 260px;
  margin-top: 18px;
  place-items: center;
  align-content: center;
  gap: 18px;
  border: 1px dashed rgba(213, 177, 109, .28);
  color: var(--muted);
}

@media (max-width: 1199px) {
  .character-path-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .character-paths-workspace {
    grid-template-columns: 238px minmax(0, 1fr);
  }

  .character-path-editor-body {
    grid-template-columns: 180px minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .character-path-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .character-paths-editor-head {
    align-items: stretch;
    flex-direction: column;
  }

  .character-paths-editor-head .btn {
    width: 100%;
  }

  .character-paths-workspace {
    display: block;
    min-height: 0;
  }

  .character-paths-editor-list {
    grid-auto-columns: minmax(220px, 76vw);
    grid-auto-flow: column;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid rgba(213, 177, 109, .2);
  }

  .character-path-editor-tab {
    border-right: 1px solid rgba(213, 177, 109, .11);
    border-bottom: 0;
  }

  .character-path-editor-tab.active {
    box-shadow: inset 0 -3px 0 var(--gold-bright);
  }

  .character-path-editor-detail > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .character-path-editor-body {
    grid-template-columns: 1fr;
  }

  .character-path-editor-preview {
    width: min(240px, 100%);
    margin-inline: auto;
  }

  .character-path-editor-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .character-path-grid {
    grid-template-columns: 1fr;
  }

  .character-path-editor-actions {
    justify-content: flex-end;
  }

  .character-path-editor-body {
    padding: 16px;
  }
}

/* Community workspace v2: social-first layout with a translucent utility bar. */
.account-topbar {
  border-color: rgba(226, 190, 120, .24) !important;
  background: rgba(10, 8, 6, .56) !important;
  background-image: none !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .07) !important;
  backdrop-filter: blur(20px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.16) !important;
}

.community-hub {
  padding-bottom: 120px;
}

.community-masthead {
  position: relative;
  display: flex;
  min-height: 286px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding: 38px 40px;
  overflow: hidden;
  border: 1px solid rgba(213, 177, 109, .28);
  border-radius: 4px;
  background:
    linear-gradient(90deg, rgba(8, 6, 5, .94) 0%, rgba(8, 6, 5, .76) 48%, rgba(8, 6, 5, .3) 100%),
    linear-gradient(0deg, rgba(6, 4, 3, .64), transparent 70%),
    url('/images/epic/epic-tyn-part8-journey-home.webp') center 55% / cover no-repeat;
  box-shadow: inset 0 0 0 3px rgba(3, 2, 1, .5), 0 16px 38px rgba(0, 0, 0, .28);
}

.community-masthead::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  content: '';
  background: linear-gradient(90deg, transparent, rgba(226, 190, 120, .65), transparent);
}

.community-masthead-copy {
  position: relative;
  z-index: 1;
  max-width: 610px;
}

.community-masthead-copy h1 {
  margin: 6px 0 10px;
  color: #f0e2c7;
  font-size: 3.6rem;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 8px 22px rgba(0, 0, 0, .52);
}

.community-masthead-copy > p:last-child {
  max-width: 48ch;
  margin: 0;
  color: #d1c1a5;
  font-size: 1.02rem;
  line-height: 1.65;
}

.community-masthead-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(78px, 1fr));
  min-width: 292px;
  margin: 0;
  border: 1px solid rgba(213, 177, 109, .2);
  background: rgba(8, 6, 4, .58);
  backdrop-filter: blur(14px);
}

.community-masthead-stats div {
  display: grid;
  gap: 5px;
  padding: 17px 16px;
  border-right: 1px solid rgba(213, 177, 109, .16);
}

.community-masthead-stats div:last-child {
  border-right: 0;
}

.community-masthead-stats dt {
  color: var(--muted);
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.community-masthead-stats dd {
  margin: 0;
  color: var(--gold-bright);
  font-size: 1.65rem;
  font-weight: 900;
  line-height: 1;
}

.community-workspace {
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr) 226px;
  align-items: start;
  gap: 18px;
  padding-top: 22px;
}

.community-topic-rail,
.community-right-rail {
  position: sticky;
  top: 96px;
}

.community-topic-rail {
  display: grid;
  padding: 8px;
  border: 1px solid rgba(213, 177, 109, .2);
  background: rgba(12, 9, 6, .64);
  backdrop-filter: blur(12px);
}

.community-topic-rail header {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 10px 12px;
  color: var(--gold-bright);
  border-bottom: 1px solid rgba(213, 177, 109, .14);
}

.community-topic-rail button {
  display: flex;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border: 0;
  border-left: 2px solid transparent;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.community-topic-rail button span,
.community-quick-links a span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.community-topic-rail button strong {
  overflow: hidden;
  font-size: .82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-topic-rail button em {
  color: #806f58;
  font-size: .72rem;
  font-style: normal;
  font-weight: 800;
}

.community-topic-rail button:hover,
.community-topic-rail button.active {
  border-left-color: var(--gold-bright);
  color: var(--cream);
  background: rgba(213, 177, 109, .08);
}

.community-stream {
  display: grid;
  min-width: 0;
  gap: 14px;
}

.community-compose.compact {
  width: min(430px, 100%) !important;
  justify-self: start;
  padding: 10px !important;
  border-color: rgba(213, 177, 109, .25) !important;
  background: rgba(14, 10, 7, .82) !important;
  background-image: none !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .18) !important;
  backdrop-filter: blur(14px) !important;
}

.community-compose.compact.open {
  width: 100% !important;
}

.community-composer-prompt {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  width: 100% !important;
  min-height: 52px;
  padding: 5px 7px;
  border: 0;
  background: transparent;
}

.community-composer-prompt:hover {
  background: rgba(213, 177, 109, .06);
}

.community-composer-prompt > span {
  width: 38px;
  height: 38px;
  border-radius: 50% !important;
}

.community-composer-prompt > svg {
  color: var(--gold-bright);
}

.community-compose.compact.open .community-composer-prompt > svg {
  transform: rotate(45deg);
}

.community-stream-heading {
  display: flex;
  min-height: 66px;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 2px 12px;
  border-bottom: 1px solid rgba(213, 177, 109, .2);
}

.community-stream-heading h2 {
  margin: 0;
  color: var(--cream);
  font-size: 1.45rem;
  letter-spacing: 0;
}

.community-stream-heading span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: .78rem;
}

.community-stream-heading .form-message {
  max-width: 50%;
  margin: 0;
}

.community-post,
.community-empty {
  border: 1px solid rgba(213, 177, 109, .2) !important;
  border-radius: 4px !important;
  background: rgba(13, 9, 6, .78) !important;
  background-image: none !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18) !important;
  backdrop-filter: blur(12px);
}

.community-post {
  display: grid;
  gap: 15px;
  padding: 20px;
  animation: community-reveal 420ms cubic-bezier(.2, .82, .2, 1) both;
}

.community-post-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-content: initial;
  gap: 11px;
}

.community-post-avatar {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(213, 177, 109, .35);
  border-radius: 50%;
  color: #241608;
  background: var(--gold-bright);
  font-weight: 900;
}

.community-post-head strong {
  display: block;
  color: var(--cream);
  font-size: .94rem;
}

.community-post-head small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 700;
  text-align: left;
}

.community-post-content h3 {
  margin: 0 0 9px;
  color: #ead9b9;
  font-size: 1.28rem;
  letter-spacing: 0;
}

.community-post-content > div,
.community-post-content p {
  margin: 0;
  color: #c7b79c;
  line-height: 1.7;
}

.community-reactions {
  padding-top: 12px;
  border-top: 1px solid rgba(213, 177, 109, .13);
}

.community-reactions button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border-radius: 3px !important;
  color: #b9a88e;
  background: transparent;
}

.community-reactions button:hover {
  color: var(--gold-bright);
  border-color: rgba(213, 177, 109, .36);
  background: rgba(213, 177, 109, .07);
}

.community-reactions button strong {
  color: var(--gold-bright);
  font-size: .75rem;
}

.community-comments {
  padding-top: 13px;
}

.community-comments > p {
  padding: 9px 11px;
  border-left: 2px solid rgba(213, 177, 109, .3);
  background: rgba(255, 255, 255, .02);
  line-height: 1.55;
}

.community-comment-box {
  grid-template-columns: minmax(0, 1fr) 42px;
}

.community-comment-box input {
  min-height: 42px;
  border-radius: 3px !important;
}

.community-comment-box button {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(213, 177, 109, .36);
  color: #241608;
  background: var(--gold-bright);
  cursor: pointer;
}

.community-empty {
  display: grid;
  min-height: 260px;
  place-items: center;
  align-content: center;
  gap: 9px;
  padding: 34px;
  color: var(--muted);
  text-align: center;
}

.community-empty h3,
.community-empty p {
  margin: 0;
}

.community-empty h3,
.community-empty > svg {
  color: var(--gold-bright);
}

.community-feed-loading {
  display: grid;
  gap: 12px;
}

.community-feed-loading span {
  height: 168px;
  border: 1px solid rgba(213, 177, 109, .12);
  background: linear-gradient(100deg, rgba(15, 11, 8, .72) 20%, rgba(213, 177, 109, .09) 45%, rgba(15, 11, 8, .72) 70%);
  background-size: 220% 100%;
  animation: community-loading 1.4s linear infinite;
}

.community-right-rail {
  display: grid;
  gap: 12px;
}

.community-manager-compact,
.community-quick-links {
  border: 1px solid rgba(213, 177, 109, .2);
  background: rgba(12, 9, 6, .7);
  backdrop-filter: blur(12px);
}

.community-manager-compact {
  display: grid;
  gap: 11px;
  padding: 18px;
}

.community-side-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(213, 177, 109, .3);
  color: var(--gold-bright);
  background: rgba(213, 177, 109, .08);
}

.community-manager-compact h2 {
  margin: 2px 0 0;
  color: var(--cream);
  font-size: 1.12rem;
  letter-spacing: 0;
}

.community-manager-compact p {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.55;
}

.community-manager-compact .btn {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  white-space: nowrap;
}

.community-quick-links {
  display: grid;
  padding: 7px;
}

.community-quick-links a {
  display: flex;
  min-height: 43px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 8px;
  color: var(--muted);
  font-size: .81rem;
  font-weight: 800;
}

.community-quick-links a:hover {
  color: var(--gold-bright);
  background: rgba(213, 177, 109, .07);
}

.community-manager-message {
  max-height: calc(100dvh - 44px);
  overflow-y: auto;
  background: rgba(14, 10, 7, .96) !important;
  background-image: none !important;
}

.community-manager-message .modal-close {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
}

@keyframes community-reveal {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes community-loading {
  to { background-position: -220% 0; }
}

.donate-page > .section-frame {
  border-color: rgba(213, 177, 109, 0.28) !important;
  background-color: rgba(12, 8, 5, 0.54) !important;
  background-image:
    linear-gradient(135deg, rgba(225, 193, 129, 0.08), transparent 32%),
    linear-gradient(180deg, rgba(18, 11, 7, 0.42), rgba(7, 5, 3, 0.5)) !important;
  background-blend-mode: normal !important;
  box-shadow:
    inset 0 0 0 3px rgba(4, 2, 1, 0.42),
    inset 0 0 0 4px rgba(213, 177, 109, 0.08),
    0 18px 46px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(14px) saturate(0.78) !important;
  -webkit-backdrop-filter: blur(14px) saturate(0.78) !important;
}

.donate-page .payment-card {
  background-color: rgba(11, 7, 5, 0.66) !important;
  background-image:
    linear-gradient(145deg, rgba(225, 193, 129, 0.09), transparent 34%),
    linear-gradient(180deg, rgba(19, 12, 8, 0.5), rgba(7, 5, 3, 0.58)) !important;
  background-blend-mode: normal !important;
  backdrop-filter: blur(18px) saturate(0.82) !important;
  -webkit-backdrop-filter: blur(18px) saturate(0.82) !important;
}

@media (min-width: 981px) {
  .donate-page > .content-section {
    width: 80vw !important;
    max-width: none !important;
    margin-right: 10vw !important;
    margin-left: 10vw !important;
  }

  .community-hub {
    padding-top: 104px !important;
  }

  .community-hub > .content-section {
    width: 80vw !important;
    max-width: none !important;
    margin-right: 10vw !important;
    margin-left: 10vw !important;
  }
}

@media (max-width: 1180px) and (min-width: 981px) {
  .community-workspace {
    grid-template-columns: 172px minmax(0, 1fr);
  }

  .community-stream {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .community-right-rail {
    position: static;
    grid-column: 1;
    grid-row: 2;
  }

  .community-masthead {
    align-items: end;
  }

  .community-masthead-stats {
    min-width: 250px;
  }
}

@media (max-width: 980px) {
  .community-masthead {
    min-height: 250px;
    padding: 30px;
  }

  .community-masthead-copy h1 {
    font-size: 3rem;
  }

  .community-workspace {
    grid-template-columns: 1fr;
  }

  .community-topic-rail,
  .community-right-rail {
    position: static;
  }

  .community-topic-rail {
    grid-auto-columns: minmax(138px, 1fr);
    grid-auto-flow: column;
    overflow-x: auto;
  }

  .community-topic-rail header {
    display: none;
  }

  .community-topic-rail button {
    border-bottom: 2px solid transparent;
    border-left: 0;
  }

  .community-topic-rail button:hover,
  .community-topic-rail button.active {
    border-bottom-color: var(--gold-bright);
    border-left-color: transparent;
  }

  .community-right-rail {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 680px) {
  .community-masthead {
    display: grid;
    min-height: 300px;
    padding: 24px 18px 18px;
    background-position: 62% center;
  }

  .community-masthead-copy h1 {
    font-size: 2.35rem;
  }

  .community-masthead-copy > p:last-child {
    max-width: 31ch;
    font-size: .92rem;
  }

  .community-masthead-stats {
    width: 100%;
    min-width: 0;
  }

  .community-masthead-stats div {
    padding: 13px 10px;
  }

  .community-masthead-stats dd {
    font-size: 1.35rem;
  }

  .community-workspace {
    padding-top: 14px;
  }

  .community-compose.compact {
    width: 100% !important;
  }

  .community-composer-prompt strong {
    font-size: .83rem;
  }

  .community-stream-heading {
    display: grid;
  }

  .community-stream-heading .form-message {
    max-width: none;
  }

  .community-post {
    padding: 16px;
  }

  .community-reactions button span {
    display: none;
  }

  .community-right-rail {
    grid-template-columns: 1fr;
  }
}

/* One type system across every public, account and administration surface. */
html,
body,
#root,
#root *,
button,
input,
select,
textarea,
option,
optgroup {
  font-family: "Exo 2", system-ui, sans-serif !important;
}

/* Hanging navigation sign: the utility topbar becomes a vertical wooden sign. */
@media (min-width: 981px) {
  :root {
    --hanging-sign-width: 202px;
    --hanging-sign-gap: 22px;
    --hanging-sign-clearance: calc(var(--hanging-sign-width) + var(--hanging-sign-gap));
  }

  .account-topbar {
    top: 76px !important;
    right: 16px !important;
    left: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 0 !important;
    width: var(--hanging-sign-width) !important;
    min-height: 0 !important;
    padding: 22px 14px 14px !important;
    overflow: visible !important;
    border: 5px solid #6f4928 !important;
    border-radius: 3px !important;
    outline: 1px solid rgba(231, 194, 126, .38);
    background-color: #241308 !important;
    background-image:
      linear-gradient(90deg, rgba(255, 227, 164, .04), transparent 22%, rgba(0, 0, 0, .18) 78%),
      linear-gradient(180deg, rgba(255, 220, 144, .08), rgba(4, 2, 1, .28)),
      var(--material-walnut) !important;
    background-position: center !important;
    background-size: auto, auto, 520px !important;
    background-blend-mode: screen, multiply, multiply !important;
    box-shadow:
      inset 0 0 0 2px rgba(4, 2, 1, .72),
      inset 0 0 24px rgba(0, 0, 0, .76),
      0 20px 34px rgba(0, 0, 0, .46) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: rotate(.35deg);
    transform-origin: 50% -68px;
    transition: transform 360ms cubic-bezier(.22, 1, .36, 1), box-shadow 360ms ease !important;
    animation: hanging-sign-arrive 680ms cubic-bezier(.22, 1, .36, 1) backwards;
  }

  .account-topbar::before {
    position: absolute;
    top: -78px;
    left: 50%;
    z-index: -1;
    width: 154px;
    height: 78px;
    pointer-events: none;
    content: "";
    background:
      linear-gradient(117deg, transparent 45%, #51351d 47%, #b0824d 50%, #51351d 53%, transparent 55%) left bottom / 50% 100% no-repeat,
      linear-gradient(63deg, transparent 45%, #51351d 47%, #b0824d 50%, #51351d 53%, transparent 55%) right bottom / 50% 100% no-repeat;
    filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .52));
    transform: translateX(-50%);
  }

  .account-topbar::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    background:
      radial-gradient(circle at 13px 13px, #efd395 0 2px, #85602e 3px, #251408 5px, transparent 6px),
      radial-gradient(circle at calc(100% - 13px) 13px, #efd395 0 2px, #85602e 3px, #251408 5px, transparent 6px),
      radial-gradient(circle at 13px calc(100% - 13px), #b98945 0 2px, #513217 3px, transparent 5px),
      radial-gradient(circle at calc(100% - 13px) calc(100% - 13px), #b98945 0 2px, #513217 3px, transparent 5px);
  }

  .account-topbar:hover,
  .account-topbar:focus-within {
    transform: translateY(-3px) rotate(-.25deg);
    box-shadow:
      inset 0 0 0 2px rgba(4, 2, 1, .72),
      inset 0 0 24px rgba(0, 0, 0, .72),
      0 26px 44px rgba(0, 0, 0, .52) !important;
  }

  .hanging-sign-title {
    display: block;
    margin: 0 8px 8px;
    padding: 0 0 12px;
    border-bottom: 1px solid rgba(226, 190, 120, .28);
    color: #e6c88d;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 2px 5px rgba(0, 0, 0, .9);
  }

  .account-topbar > a,
  .account-topbar .notification-topbar > button {
    position: relative;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 11px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(226, 190, 120, .14) !important;
    border-radius: 0 !important;
    color: #d7c5a5 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: .84rem !important;
    font-weight: 800 !important;
    line-height: 1.2;
    text-align: left;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .8);
    transform: none !important;
    transition: color 180ms ease, background-color 180ms ease, padding-left 220ms ease !important;
  }

  .account-topbar .notification-topbar {
    width: 100%;
  }

  .account-topbar > a:hover,
  .account-topbar > a:focus-visible,
  .account-topbar > a.active,
  .account-topbar .notification-topbar > button:hover,
  .account-topbar .notification-topbar > button:focus-visible {
    padding-left: 18px !important;
    color: #ffe2a1 !important;
    background: linear-gradient(90deg, rgba(215, 164, 69, .2), rgba(215, 164, 69, .02)) !important;
    box-shadow: inset 3px 0 0 #c6913d !important;
  }

  .account-topbar .notification-topbar > button.has-unread {
    color: #ffe2a1 !important;
    background: linear-gradient(90deg, rgba(154, 34, 27, .36), rgba(154, 34, 27, .05)) !important;
    box-shadow: inset 3px 0 0 #c25a43 !important;
  }

  .account-topbar .topbar-donate,
  .account-topbar .topbar-donate:hover,
  .account-topbar .topbar-donate:focus-visible,
  .account-topbar .topbar-donate.active {
    justify-content: center !important;
    margin-top: 10px;
    padding: 12px 10px !important;
    border: 1px solid rgba(245, 210, 143, .62) !important;
    color: #211206 !important;
    background-color: #a97a34 !important;
    background-image: var(--material-brass) !important;
    background-position: center !important;
    background-size: 240px !important;
    box-shadow: inset 0 0 0 2px rgba(75, 43, 14, .24), 0 7px 14px rgba(0, 0, 0, .32) !important;
    text-align: center;
    text-shadow: 0 1px rgba(255, 232, 181, .22);
  }

  .account-topbar .topbar-donate:hover,
  .account-topbar .topbar-donate:focus-visible {
    filter: brightness(1.12);
  }

  .account-topbar .notification-menu {
    top: 0;
    right: calc(100% + 18px);
    width: min(500px, calc(100vw - var(--hanging-sign-clearance) - 32px));
    transform: rotate(-.35deg);
    transform-origin: top right;
  }

  .docs-knowledge-page {
    padding-top: 22px;
  }

  .knowledge-shell,
  .donate-page > .content-section,
  .community-hub > .content-section,
  .admin-page {
    width: min(80vw, calc(100vw - var(--hanging-sign-clearance) - var(--hanging-sign-clearance))) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .panel-page,
  .epic-page {
    max-width: calc(100vw - var(--hanging-sign-clearance) - var(--hanging-sign-clearance)) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .panel-page,
  .admin-page,
  .donate-page,
  .community-page {
    padding-top: 54px !important;
  }

  #home > .content-section,
  #home > .hero,
  #home > .join-section,
  #root > .site-footer {
    width: min(1440px, calc(100% - var(--hanging-sign-clearance) - var(--hanging-sign-clearance))) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .hero {
    padding-top: 64px !important;
  }
}

@keyframes hanging-sign-arrive {
  from {
    opacity: 0;
    transform: translateY(-34px) rotate(-2deg);
  }
  to {
    opacity: 1;
    transform: rotate(.35deg);
  }
}

@media (max-width: 1180px) {
  .hanging-sign-title {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-topbar {
    animation: none !important;
    transition: none !important;
  }
}
.hero-card-title { font-size: 55px; }
.panel-page, .admin-page { position: relative; z-index: 2; width: min(1180px, calc(100% - 32px)); margin: 0 auto; min-height: 100vh; padding: 130px 0 80px; }
.auth-panel, .dashboard-panel, .admin-panel { position: relative; padding: 42px; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 30px 100px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,210,119,.07); }
.auth-panel { max-width: 620px; margin: 0 auto; border-radius: 30px; }
.dashboard-panel, .admin-panel { border-radius: 30px; margin-bottom: 28px; }
.auth-form, .admin-form-grid { display: grid; gap: 16px; margin-top: 26px; }
.auth-form label, .admin-field { display: grid; gap: 8px; color: var(--gold-bright); font-weight: 800; }
.auth-form input, .auth-form select, .auth-form textarea, .admin-field input, .admin-field textarea, .admin-field select, .user-row select, .reward-admin-toolbar input, .reward-admin-toolbar select, .admin-checkin-day select, .bulk-item-table input, .bulk-item-table textarea, .bulk-item-table select { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 15px; color: var(--cream); background: rgba(0,0,0,.28); font: inherit; outline: none; }
.auth-form textarea { min-height: 110px; resize: vertical; }
.admin-field textarea { min-height: 120px; resize: vertical; }
.admin-field.wide textarea { min-height: 220px; font-family: "Exo 2", system-ui, sans-serif; font-size: .86rem; }
.auth-switch { border: 0; color: var(--gold-bright); background: transparent; cursor: pointer; font: inherit; font-weight: 800; }
.auth-link { color: var(--gold-bright); font-weight: 800; text-align: center; }
.form-message { color: #ff9d9d; font-weight: 800; }
.form-message.success { color: #9dffbf; }
.country-routing-hint { display: block; color: var(--muted); font-size: .8rem; font-weight: 650; line-height: 1.45; }
.country-routing-hint.server-vn { color: #d9c58e; }
.country-routing-hint.server-us { color: #cab995; }
.reset-result { display: grid; gap: 12px; margin-top: 20px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: rgba(217,164,65,.07); }
.reset-result code { display: block; overflow-wrap: anywhere; padding: 10px 12px; border: 1px solid rgba(217,164,65,.24); border-radius: 12px; color: var(--gold-bright); background: rgba(0,0,0,.28); }
.dashboard-greeting { font-size: clamp(1.8rem, 4vw, 3.2rem); }
.dashboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.compact-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.social-link-panel { display: grid; gap: 16px; margin-top: 22px; padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: radial-gradient(circle at top left, rgba(217,164,65,.16), rgba(0,0,0,.26) 44%); }
.social-link-heading span { color: var(--muted); font-size: .86rem; text-transform: uppercase; letter-spacing: .08em; }
.social-link-heading strong { display: block; margin-top: 6px; color: var(--gold-bright); font-size: 1.3rem; }
.social-link-heading p { margin: 8px 0 0; }
.social-link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.social-account-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 16px; border: 1px solid rgba(217,164,65,.18); border-radius: 20px; background: rgba(0,0,0,.24); }
.social-account-card.linked { border-color: rgba(157,255,191,.26); }
.social-account-card img, .social-account-mark { width: 54px; height: 54px; border: 1px solid var(--line); border-radius: 18px; }
.social-account-card img { object-fit: cover; }
.social-account-mark { display: grid; place-items: center; color: var(--gold-bright); background: rgba(217,164,65,.12); font-size: 1.4rem; font-weight: 900; }
.social-account-card h3, .social-account-card p { margin: 0; }
.social-account-card strong, .social-account-card small, .social-account-card a { display: block; margin-top: 4px; }
.social-account-card small { color: var(--muted); overflow-wrap: anywhere; }
.social-account-card a { color: var(--gold-bright); font-weight: 800; }
.social-account-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.social-account-actions .btn { min-height: 42px; padding: 11px 14px; }
.launcher-link-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; margin-top: 22px; padding: 20px; border: 1px solid rgba(255,205,138,.2); border-radius: 22px; background: radial-gradient(circle at 15% 20%, rgba(156,29,52,.24), transparent 42%), linear-gradient(135deg, rgba(217,164,65,.1), rgba(0,0,0,.3)); }
.launcher-link-card.linked { border-color: rgba(157,255,191,.28); box-shadow: inset 0 0 0 1px rgba(157,255,191,.07), 0 20px 60px rgba(0,0,0,.22); }
.launcher-link-icon { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid var(--line); border-radius: 20px; color: var(--gold-bright); background: rgba(217,164,65,.12); font-size: 1.5rem; }
.launcher-link-card span { color: var(--muted); font-size: .86rem; text-transform: uppercase; letter-spacing: .08em; }
.launcher-link-card strong { display: block; margin-top: 6px; color: var(--gold-bright); font-size: 1.2rem; }
.launcher-link-card p { margin: 8px 0 0; }
.checkin-panel { display: grid; gap: 16px; margin-top: 22px; padding: 20px; border: 1px solid rgba(217,164,65,.22); border-radius: 24px; background: radial-gradient(circle at 14% 0%, rgba(217,164,65,.2), transparent 34%), linear-gradient(135deg, rgba(156,29,52,.18), rgba(0,0,0,.3)); box-shadow: inset 0 0 0 1px rgba(255,210,119,.05); }
.checkin-heading span, .checkin-claim-card span, .checkin-summary-grid span { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; }
.checkin-heading strong { display: block; margin-top: 6px; color: var(--gold-bright); font-size: 1.35rem; }
.checkin-heading p { margin: 8px 0 0; }
.checkin-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.checkin-summary-grid article { padding: 14px; border: 1px solid rgba(217,164,65,.16); border-radius: 18px; background: rgba(0,0,0,.2); }
.checkin-summary-grid strong { display: block; margin-top: 4px; color: var(--cream); font-size: 1.1rem; }
.checkin-claim-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 18px; border: 1px solid rgba(157,255,191,.22); border-radius: 22px; background: linear-gradient(135deg, rgba(157,255,191,.08), rgba(0,0,0,.24)); }
.checkin-claim-card.claimed { border-color: rgba(217,164,65,.2); background: rgba(0,0,0,.22); }
.checkin-gift-icon, .checkin-reward-card > span { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid var(--line); border-radius: 18px; color: var(--gold-bright); background: rgba(217,164,65,.12); font-size: 1.35rem; }
.checkin-claim-card strong { display: block; margin-top: 5px; color: var(--gold-bright); font-size: 1.18rem; }
.checkin-claim-card p { margin: 6px 0 0; }
.mailbox-status-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; padding: 16px; border: 1px solid rgba(217,164,65,.18); border-radius: 20px; background: rgba(0,0,0,.2); }
.mailbox-status-card.delivered, .mailbox-status-card.claimed { border-color: rgba(157,255,191,.28); background: linear-gradient(135deg, rgba(157,255,191,.08), rgba(0,0,0,.22)); }
.mailbox-status-card.failed { border-color: rgba(255,157,157,.32); background: linear-gradient(135deg, rgba(255,157,157,.08), rgba(0,0,0,.22)); }
.mailbox-status-card span { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.mailbox-status-card strong { display: block; margin-top: 5px; color: var(--gold-bright); }
.mailbox-status-card p { margin: 6px 0 0; }
.mailbox-status-card code, .mailbox-guide-card code { display: block; width: fit-content; max-width: 100%; margin-top: 8px; padding: 5px 9px; border: 1px solid rgba(217,164,65,.16); border-radius: 999px; color: #9dffbf; background: rgba(157,255,191,.06); overflow-wrap: anywhere; }
.mailbox-guide-card { display: grid; gap: 6px; padding: 15px; border: 1px solid rgba(217,164,65,.16); border-radius: 18px; background: radial-gradient(circle at 10% 0%, rgba(217,164,65,.14), rgba(0,0,0,.2)); }
.mailbox-guide-card strong { color: var(--gold-bright); }
.mailbox-guide-card p { margin: 0; }
.checkin-reward-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.checkin-reward-card { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 14px; border: 1px solid rgba(217,164,65,.14); border-radius: 18px; background: rgba(0,0,0,.2); }
.checkin-reward-card strong, .checkin-reward-card small { display: block; }
.checkin-reward-card strong { color: var(--gold-bright); }
.checkin-reward-card small { margin-top: 3px; color: var(--cream); font-weight: 900; }
.checkin-reward-card p { margin: 6px 0 0; font-size: .92rem; }
.checkin-milestone-strip { display: flex; flex-wrap: wrap; gap: 10px; }
.checkin-milestone-strip span { padding: 8px 12px; border: 1px solid rgba(255,205,138,.24); border-radius: 999px; color: var(--gold-bright); background: rgba(217,164,65,.1); font-size: .82rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; transition: border-color .2s ease, box-shadow .2s ease, color .2s ease, background .2s ease; }
.checkin-milestone-strip span.pending { border-color: rgba(160,160,160,.22); color: rgba(210,210,210,.62); background: rgba(120,120,120,.1); box-shadow: none; }
.checkin-milestone-strip span.achieved { border-color: rgba(255,205,138,.58); color: var(--gold-bright); background: radial-gradient(circle at 30% 0%, rgba(255,205,138,.28), rgba(217,164,65,.13)); box-shadow: 0 0 18px rgba(217,164,65,.35), inset 0 0 0 1px rgba(255,210,119,.12); }
.checkin-calendar-grid { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 50px) / 6); gap: 10px; overflow-x: auto; padding: 2px 2px 12px; scroll-snap-type: x mandatory; scrollbar-color: rgba(217,164,65,.55) rgba(0,0,0,.24); }
.checkin-calendar-grid::-webkit-scrollbar { height: 10px; }
.checkin-calendar-grid::-webkit-scrollbar-track { border-radius: 999px; background: rgba(0,0,0,.24); }
.checkin-calendar-grid::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(217,164,65,.55); }
.checkin-day-card { position: relative; display: grid; gap: 8px; min-height: 186px; padding: 13px; border: 1px solid rgba(217,164,65,.14); border-radius: 18px; background: rgba(0,0,0,.2); overflow: hidden; scroll-snap-align: start; }
.checkin-day-card::after { content: ""; position: absolute; right: -32px; bottom: -42px; width: 92px; height: 92px; border-radius: 50%; background: rgba(217,164,65,.1); filter: blur(8px); }
.checkin-day-card.today { border-color: rgba(157,255,191,.32); box-shadow: inset 0 0 0 1px rgba(157,255,191,.08); }
.checkin-day-card.unclaimed { opacity: .48; }
.checkin-day-card.today { opacity: 1; }
.checkin-day-card.claimed { opacity: 1; border-color: rgba(157,255,191,.32); background: rgba(157,255,191,.07); box-shadow: inset 0 0 0 1px rgba(157,255,191,.08); }
.checkin-day-card.missed { filter: grayscale(.9); }
.checkin-day-card.missed::before { content: ""; position: absolute; inset: 0; z-index: 2; background: rgba(86,86,86,.46); }
.checkin-day-card.milestone { border-color: rgba(255,205,138,.34); background: radial-gradient(circle at 15% 0%, rgba(217,164,65,.18), rgba(0,0,0,.24)); }
.checkin-claimed-badge { position: absolute; top: 10px; right: 10px; z-index: 3; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(157,255,191,.55); border-radius: 50%; color: #9dffbf; background: rgba(18,80,45,.9); font-weight: 900; box-shadow: 0 8px 22px rgba(0,0,0,.28); }
.checkin-day-top { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.checkin-day-top strong { color: var(--gold-bright); }
.checkin-day-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 14px; background: rgba(217,164,65,.1); font-size: 1.2rem; }
.checkin-day-card h3, .checkin-day-card p, .checkin-day-card small { position: relative; z-index: 1; margin: 0; }
.checkin-day-card h3 { color: var(--cream); font-size: .95rem; }
.checkin-day-card p { color: var(--gold-bright); font-weight: 900; }
.checkin-day-card small { align-self: end; color: var(--muted); font-weight: 800; }
.checkin-day-card.claimed small { color: #9dffbf; }
.fivem-card { display: grid; gap: 14px; margin-top: 22px; padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(135deg, rgba(217,164,65,.1), rgba(0,0,0,.28)); }
.fivem-card > span { color: var(--muted); font-size: .86rem; text-transform: uppercase; letter-spacing: .08em; }
.fivem-card > strong { color: var(--gold-bright); font-size: clamp(1.35rem, 3vw, 2.2rem); }
.server-identities-panel { display: grid; gap: 16px; margin-top: 22px; padding: 20px; border: 1px solid rgba(217,164,65,.22); border-radius: 22px; background: rgba(10,7,4,.38); box-shadow: inset 0 0 0 1px rgba(255,210,119,.04); }
.server-identities-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.server-identities-heading span { color: var(--muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.server-identities-heading strong { display: block; margin-top: 5px; color: var(--gold-bright); font-size: 1.35rem; }
.server-identities-heading p { max-width: 720px; margin: 8px 0 0; }
.server-identities-heading > small { flex: 0 0 auto; padding: 7px 10px; border: 1px solid rgba(217,164,65,.28); border-radius: 7px; color: var(--gold-bright); background: rgba(217,164,65,.08); font-weight: 900; text-transform: uppercase; }
.server-identity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.server-identity-card { display: grid; gap: 15px; min-width: 0; padding: 17px; border: 1px solid rgba(217,164,65,.16); border-radius: 8px; background: rgba(0,0,0,.24); }
.server-identity-card.linked { border-color: rgba(157,255,191,.28); box-shadow: inset 3px 0 0 rgba(157,255,191,.48); }
.server-identity-card-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-width: 0; }
.server-identity-seal { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(217,164,65,.32); border-radius: 50%; color: var(--gold-bright); background: rgba(217,164,65,.1); font-weight: 950; }
.server-identity-card-head small, .server-identity-card-head strong { display: block; overflow-wrap: anywhere; }
.server-identity-card-head small { color: var(--muted); font-size: .72rem; text-transform: uppercase; }
.server-identity-card-head strong { margin-top: 3px; color: var(--cream); font-size: 1.08rem; }
.server-identity-card-head > i { padding: 5px 8px; border: 1px solid rgba(217,164,65,.3); border-radius: 5px; color: var(--gold-bright); font-size: .68rem; font-style: normal; font-weight: 900; text-transform: uppercase; }
.server-identity-status { padding: 12px 0; border-top: 1px solid rgba(217,164,65,.12); border-bottom: 1px solid rgba(217,164,65,.12); }
.server-identity-status span, .server-identity-status strong { display: block; }
.server-identity-status span { color: var(--muted); font-size: .76rem; font-weight: 850; text-transform: uppercase; }
.server-identity-status span i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #8d795d; }
.server-identity-card.linked .server-identity-status span i { background: #79c45a; box-shadow: 0 0 10px rgba(121,196,90,.55); }
.server-identity-status strong { margin-top: 6px; color: var(--gold-bright); font-size: 1.05rem; overflow-wrap: anywhere; }
.server-identity-card dl { display: grid; gap: 8px; margin: 0; }
.server-identity-card dl > div { display: grid; grid-template-columns: minmax(110px, .8fr) minmax(0, 1.2fr); gap: 10px; }
.server-identity-card dt { color: var(--muted); font-size: .78rem; }
.server-identity-card dd { margin: 0; color: var(--cream); font-size: .78rem; font-weight: 800; text-align: right; overflow-wrap: anywhere; }
.server-identity-action { display: block; min-height: 38px; padding: 9px 12px; border: 1px solid rgba(217,164,65,.26); border-radius: 6px; color: var(--gold-bright); background: rgba(217,164,65,.08); font-size: .76rem; font-weight: 900; text-align: center; text-transform: uppercase; }
.server-identity-action.current { color: var(--muted); background: rgba(255,255,255,.025); }
.fivem-info-groups { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 16px; border: 1px solid rgba(217,164,65,.18); border-radius: 24px; background: radial-gradient(circle at 8% 0%, rgba(156,29,52,.18), transparent 34%), rgba(0,0,0,.18); }
.fivem-info-group { display: grid; gap: 12px; padding: 16px; border: 1px solid rgba(217,164,65,.22); border-radius: 20px; background: linear-gradient(135deg, rgba(217,164,65,.08), rgba(0,0,0,.28)); box-shadow: inset 0 0 0 1px rgba(255,210,119,.04); }
.fivem-info-group-title { display: flex; align-items: center; gap: 10px; color: var(--gold-bright); font-size: .86rem; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; }
.fivem-info-group-title span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 12px; color: var(--gold-bright); background: rgba(217,164,65,.12); font-size: 1rem; }
.fivem-stat-list { display: grid; gap: 10px; }
.profile-group .fivem-stat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.progress-group .fivem-stat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.finance-group .fivem-stat-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fivem-stat-row { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid rgba(217,164,65,.14); border-radius: 16px; background: rgba(0,0,0,.22); }
.fivem-stat-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(217,164,65,.18); border-radius: 14px; color: var(--gold-bright); background: rgba(217,164,65,.09); font-size: 1.05rem; }
.fivem-stat-row h3, .fivem-stat-row p { margin: 0; }
.fivem-stat-row h3 { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; }
.fivem-stat-row p { margin-top: 3px; color: var(--cream); font-size: 1.03rem; font-weight: 800; overflow-wrap: anywhere; }
.fivem-info-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.fivem-info-grid .feature-card { min-height: auto; padding: 16px; }
.fivem-info-grid .feature-card h3 { font-size: .92rem; }
.fivem-info-grid .feature-card p { overflow-wrap: anywhere; }
.link-status-card { margin-top: 22px; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: rgba(217,164,65,.07); }
.link-status-card span, .link-status-card strong { display: block; }
.link-status-card span { color: var(--muted); font-size: .86rem; text-transform: uppercase; letter-spacing: .08em; }
.link-status-card strong { margin-top: 6px; color: var(--gold-bright); font-size: 1.2rem; }
.link-status-card a { color: var(--gold-bright); font-weight: 800; }
.link-success { color: #9dffbf; }
.link-warning { color: #ffcd8a; }
.modal-backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; background: rgba(0,0,0,.72); backdrop-filter: blur(12px); }
.character-modal { position: relative; width: min(960px, 100%); max-height: min(92vh, 980px); overflow-y: auto; padding: 34px; border-radius: 30px; background: linear-gradient(180deg, rgba(28,18,10,.96), rgba(8,6,4,.96)); box-shadow: 0 30px 120px rgba(0,0,0,.62); }
.modal-close { position: absolute; top: 16px; right: 16px; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--gold-bright); background: rgba(0,0,0,.24); cursor: pointer; font-size: 1.6rem; }
.character-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.character-form label { display: grid; gap: 8px; color: var(--gold-bright); font-weight: 800; }
.character-form input, .character-form textarea, .character-form select { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 15px; color: var(--cream); background: rgba(0,0,0,.3); font: inherit; outline: none; }
.character-form textarea { min-height: 120px; resize: vertical; }
.wide-field { grid-column: 1 / -1; }
.declaration-check { display: flex !important; align-items: flex-start; gap: 12px !important; color: var(--muted) !important; font-weight: 600 !important; }
.declaration-check input { width: 18px; min-height: 18px; margin-top: 4px; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.password-modal { width: min(640px, 100%); overflow: hidden; }
.password-form { grid-template-columns: 1fr; }
.password-confirm-popover { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 24px; border-radius: 30px; background: rgba(0,0,0,.74); backdrop-filter: blur(10px); }
.password-confirm-card { display: grid; gap: 12px; width: min(430px, 100%); padding: 24px; border: 1px solid rgba(217,164,65,.26); border-radius: 24px; background: radial-gradient(circle at top left, rgba(156,29,52,.24), transparent 45%), linear-gradient(180deg, rgba(35,20,11,.98), rgba(8,6,4,.98)); box-shadow: 0 24px 90px rgba(0,0,0,.5); }
.password-confirm-card > span { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 16px; color: var(--gold-bright); background: rgba(217,164,65,.12); font-size: 1.3rem; }
.password-confirm-card h3, .password-confirm-card p { margin: 0; }
.password-confirm-card h3 { color: var(--gold-bright); font-size: 1.35rem; }
.password-confirm-card p { color: var(--muted); }
.btn:disabled { opacity: .62; cursor: not-allowed; }
.discord-link-hint { display: grid; gap: 6px; padding: 16px; border: 1px solid rgba(217,164,65,.18); border-radius: 18px; background: rgba(217,164,65,.07); }
.discord-link-hint span { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; }
.discord-link-hint strong { color: var(--gold-bright); overflow-wrap: anywhere; }
.discord-link-hint p { margin: 0; }
.locked-identifier-card { display: grid; gap: 7px; padding: 16px; border: 1px solid rgba(217,164,65,.18); border-radius: 18px; background: linear-gradient(135deg, rgba(217,164,65,.08), rgba(0,0,0,.24)); box-shadow: inset 0 0 0 1px rgba(255,210,119,.04); }
.locked-identifier-card span { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; }
.locked-identifier-card strong { color: var(--gold-bright); font-family: "Exo 2", system-ui, sans-serif; overflow-wrap: anywhere; }
.locked-identifier-card p { margin: 0; color: var(--muted); font-size: .9rem; }
.admin-page { display: grid; gap: 24px; }
.admin-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-field.wide { grid-column: 1 / -1; }
.save-btn { margin-top: 22px; }
.dev-docs-admin-card { display: grid; gap: 12px; background: radial-gradient(circle at 12% 0%, rgba(217,164,65,.17), transparent 38%), var(--panel); }
.dev-docs-admin-card .btn { width: fit-content; }
.upload-admin-panel { display: grid; gap: 16px; }
.upload-admin-layout { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); gap: 18px; align-items: start; }
.upload-admin-form, .upload-file-list { display: grid; gap: 12px; padding: 18px; border: 1px solid rgba(217,164,65,.16); border-radius: 22px; background: rgba(0,0,0,.2); }
.upload-hint { display: grid; gap: 6px; padding: 14px; border: 1px solid rgba(217,164,65,.16); border-radius: 18px; background: rgba(217,164,65,.07); }
.upload-hint strong { color: var(--gold-bright); }
.upload-hint p, .upload-selected { margin: 0; color: var(--muted); }
.upload-selected strong { color: var(--gold-bright); }
.upload-progress { display: grid; gap: 7px; }
.upload-progress div { height: 12px; overflow: hidden; border: 1px solid rgba(255,205,138,.24); border-radius: 999px; background: rgba(0,0,0,.28); }
.upload-progress span { display: block; min-width: 4%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); box-shadow: 0 0 18px rgba(217,164,65,.38); transition: width .18s ease; }
.upload-progress small { color: var(--gold-bright); font-weight: 900; }
.upload-file-list { max-height: 620px; overflow-y: auto; }
.upload-file-empty, .upload-file-row { padding: 14px; border: 1px solid rgba(217,164,65,.13); border-radius: 18px; background: rgba(0,0,0,.22); }
.upload-file-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.upload-file-row.active-launcher { border-color: rgba(157,255,191,.3); background: linear-gradient(135deg, rgba(157,255,191,.07), rgba(0,0,0,.22)); }
.upload-file-row span, .upload-file-row strong, .upload-file-row small, .upload-file-row code { display: block; }
.upload-file-row span { color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; }
.upload-file-row strong { margin-top: 4px; color: var(--gold-bright); overflow-wrap: anywhere; }
.upload-file-row small { margin-top: 4px; color: var(--muted); }
.upload-file-row code { margin-top: 8px; width: fit-content; max-width: 100%; padding: 5px 8px; border: 1px solid rgba(217,164,65,.18); border-radius: 10px; color: #9dffbf; background: rgba(157,255,191,.06); font-size: .78rem; overflow-wrap: anywhere; }
.upload-file-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.upload-file-actions .btn { min-height: 40px; padding: 0 13px; font-size: .8rem; }
.active-launcher-pill { display: inline-flex !important; align-items: center; width: fit-content; padding: 8px 10px; border: 1px solid rgba(157,255,191,.34); border-radius: 999px; color: #9dffbf !important; background: rgba(157,255,191,.08); font-size: .72rem !important; font-weight: 900; }
.admin-mail-panel { display: grid; gap: 16px; }
.admin-mail-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: 18px; align-items: start; }
.admin-mail-form { display: grid; gap: 14px; padding: 18px; border: 1px solid rgba(217,164,65,.16); border-radius: 22px; background: rgba(0,0,0,.2); }
.admin-mail-preview { display: grid; gap: 12px; min-height: 260px; padding: 22px; border: 1px solid rgba(217,164,65,.18); border-radius: 24px; background: radial-gradient(circle at 18% 0%, rgba(217,164,65,.16), transparent 42%), rgba(0,0,0,.26); }
.admin-mail-preview h3, .admin-mail-preview p { margin: 0; }
.admin-mail-preview h3 { color: var(--gold-bright); font-size: 1.45rem; }
.admin-mail-preview small { color: var(--muted); font-weight: 800; overflow-wrap: anywhere; }
.admin-mail-preview p { color: var(--cream); white-space: normal; }
.admin-mail-type-preview, .admin-mail-count { display: inline-flex; width: fit-content; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid rgba(217,164,65,.22); border-radius: 999px; color: var(--gold-bright); background: rgba(217,164,65,.09); font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; }
.admin-mail-type-preview.notification { border-color: rgba(157,255,191,.34); color: #9dffbf; background: rgba(157,255,191,.08); }
.admin-mail-type-preview.update { border-color: rgba(128,190,255,.34); color: #b9d7f1; background: rgba(111,144,168,.15); }
.admin-mail-type-preview.event { border-color: rgba(255,188,122,.38); color: #ffcd8a; background: rgba(156,85,29,.15); }
.admin-mail-result { display: grid; gap: 6px; padding: 14px; border: 1px solid rgba(157,255,191,.24); border-radius: 18px; background: rgba(157,255,191,.06); }
.admin-mail-result strong { color: #9dffbf; }
.admin-mail-result p { margin: 0; color: var(--muted); }
.admin-mail-failures { display: grid; gap: 6px; margin-top: 6px; }
.admin-mail-failures code { padding: 7px 9px; border: 1px solid rgba(255,157,157,.26); border-radius: 10px; color: #ffb8b8; background: rgba(255,157,157,.07); overflow-wrap: anywhere; }
.mail-log-panel { display: grid; gap: 16px; }
.mail-log-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.mail-log-heading h2, .mail-log-heading p { margin: 0; }
.mail-log-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mail-log-summary article { padding: 14px; border: 1px solid rgba(217,164,65,.16); border-radius: 18px; background: rgba(0,0,0,.2); }
.mail-log-summary span { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.mail-log-summary strong { display: block; margin-top: 4px; color: var(--gold-bright); font-size: 1.2rem; }
.mail-log-list { display: grid; gap: 10px; max-height: 580px; overflow-y: auto; padding-right: 4px; }
.mail-log-row, .mail-log-empty { padding: 14px; border: 1px solid rgba(217,164,65,.13); border-radius: 18px; background: rgba(0,0,0,.2); }
.mail-log-row { display: grid; grid-template-columns: 1.1fr 1.1fr .75fr 1fr; gap: 12px; align-items: center; }
.mail-log-row.delivered, .mail-log-row.claimed { border-color: rgba(157,255,191,.24); }
.mail-log-row.failed { border-color: rgba(255,157,157,.3); }
.mail-log-row strong, .mail-log-row small, .mail-log-row code { display: block; }
.mail-log-row strong { color: var(--gold-bright); }
.mail-log-row small { margin-top: 4px; color: var(--muted); }
.mail-log-row code { margin-top: 6px; padding: 5px 8px; border: 1px solid rgba(217,164,65,.16); border-radius: 10px; color: var(--cream); background: rgba(0,0,0,.24); font-size: .78rem; overflow-wrap: anywhere; }
.mail-status-pill { display: inline-block; width: fit-content; padding: 7px 10px; border: 1px solid rgba(217,164,65,.22); border-radius: 999px; color: var(--gold-bright); background: rgba(217,164,65,.08); font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.mail-status-pill.delivered, .mail-status-pill.claimed { border-color: rgba(157,255,191,.35); color: #9dffbf; background: rgba(157,255,191,.08); }
.mail-status-pill.failed { border-color: rgba(255,157,157,.38); color: #ffb8b8; background: rgba(255,157,157,.08); }
.user-table { display: grid; gap: 12px; margin-top: 22px; }
.user-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: rgba(0,0,0,.2); }
.user-row strong, .user-row small { display: block; }
.user-row small { color: var(--muted); margin-top: 4px; }
.user-row select { width: 150px; }
.reward-admin-toolbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 22px 0 16px; }
.reward-admin-toolbar label, .reward-admin-toolbar article { display: grid; gap: 8px; padding: 14px; border: 1px solid rgba(217,164,65,.16); border-radius: 18px; background: rgba(0,0,0,.2); color: var(--gold-bright); font-weight: 800; }
.reward-admin-toolbar span { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; }
.reward-admin-toolbar strong { color: var(--cream); font-size: 1.1rem; }
.admin-checkin-calendar { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 16px; }
.admin-checkin-day { display: grid; gap: 10px; padding: 14px; border: 1px solid rgba(217,164,65,.14); border-radius: 18px; background: rgba(0,0,0,.2); }
.admin-checkin-day.milestone { border-color: rgba(255,205,138,.34); background: radial-gradient(circle at 15% 0%, rgba(217,164,65,.18), rgba(0,0,0,.24)); }
.admin-checkin-day.custom { box-shadow: inset 0 0 0 1px rgba(157,255,191,.1); }
.admin-checkin-day h3 { margin: 0; color: var(--cream); font-size: .96rem; min-height: 38px; }
.reward-manager-grid { display: grid; grid-template-columns: minmax(320px, .9fr) 1.1fr; gap: 18px; margin-top: 24px; }
.admin-reward-form, .reward-list-admin { display: grid; gap: 12px; padding: 18px; border: 1px solid rgba(217,164,65,.16); border-radius: 22px; background: rgba(0,0,0,.2); }
.admin-form-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.admin-reward-form h3 { margin: 0; color: var(--gold-bright); }
.admin-check-field { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; color: var(--gold-bright); font-weight: 800; }
.admin-check-field input { width: 18px; min-height: 18px; }
.reward-list-admin { max-height: 720px; overflow-y: auto; }
.reward-row-admin { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding: 12px; border: 1px solid rgba(217,164,65,.13); border-radius: 16px; background: rgba(0,0,0,.2); }
.reward-row-admin > span { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 14px; background: rgba(217,164,65,.1); }
.reward-row-admin strong, .reward-row-admin small, .reward-row-admin code { display: block; }
.reward-row-admin strong { color: var(--gold-bright); }
.reward-row-admin small { margin-top: 3px; color: var(--muted); }
.reward-row-admin code { margin-top: 6px; width: fit-content; max-width: 100%; padding: 4px 8px; border: 1px solid rgba(217,164,65,.18); border-radius: 999px; color: #9dffbf; background: rgba(157,255,191,.07); font-size: .78rem; overflow-wrap: anywhere; }
.reward-list-admin-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px; border: 1px solid rgba(217,164,65,.18); border-radius: 18px; background: linear-gradient(135deg, rgba(217,164,65,.13), rgba(0,0,0,.42)); }
.reward-list-admin-head h3, .reward-list-admin-head p { margin: 0; }
.reward-list-admin-head h3 { color: var(--gold-bright); }
.reward-list-admin-head p { margin-top: 4px; color: var(--muted); font-size: .9rem; }
.bulk-item-modal { width: min(1180px, 100%); }
.bulk-field-toggles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.bulk-field-toggles label { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid rgba(217,164,65,.18); border-radius: 999px; color: var(--gold-bright); background: rgba(217,164,65,.07); font-weight: 900; }
.bulk-field-toggles input { width: 18px; min-height: 18px; }
.bulk-item-table-wrap { margin-top: 18px; max-height: min(58vh, 620px); overflow: auto; border: 1px solid rgba(217,164,65,.16); border-radius: 22px; background: rgba(0,0,0,.2); }
.bulk-item-table { width: 100%; min-width: 820px; border-collapse: separate; border-spacing: 0; }
.bulk-item-table th, .bulk-item-table td { padding: 12px; border-bottom: 1px solid rgba(217,164,65,.12); vertical-align: middle; }
.bulk-item-table thead th { position: sticky; top: 0; z-index: 1; color: var(--gold-bright); background: rgba(22,14,8,.98); text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.bulk-item-table tbody th { min-width: 210px; text-align: left; }
.bulk-item-table tbody th span, .bulk-item-table tbody th strong, .bulk-item-table tbody th small { display: block; }
.bulk-item-table tbody th span { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 13px; background: rgba(217,164,65,.1); }
.bulk-item-table tbody th strong { color: var(--gold-bright); }
.bulk-item-table tbody th small { margin-top: 4px; color: var(--muted); overflow-wrap: anywhere; }
.bulk-item-table tbody tr.dirty th, .bulk-item-table tbody tr.dirty td { background: rgba(157,255,191,.05); box-shadow: inset 0 1px 0 rgba(157,255,191,.12), inset 0 -1px 0 rgba(157,255,191,.08); }
.bulk-item-table textarea { min-width: 260px; min-height: 86px; resize: vertical; font-family: "Exo 2", system-ui, sans-serif; font-size: .84rem; }
.bulk-item-table input.bulk-item-check { display: block; width: 22px; min-height: 22px; margin: 0 auto; padding: 0; }
.bulk-item-modal-actions { align-items: center; margin-top: 18px; }
.bulk-item-modal-actions span { padding: 9px 12px; border: 1px solid rgba(255,205,138,.2); border-radius: 999px; color: var(--gold-bright); background: rgba(217,164,65,.08); font-size: .84rem; font-weight: 900; }
.btn.danger { border-color: rgba(255,157,157,.34); color: #ffb8b8; }
.loading-screen { min-height: 100vh; display: grid; place-items: center; color: var(--gold-bright); font-size: 3rem; font-weight: 900; letter-spacing: .08em; }
.register-section { position: relative; padding: 80px 42px; margin-top: 36px; overflow: hidden; text-align: center; }
.register-section::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(217,164,65,.18); border-radius: 22px; pointer-events: none; }
.register-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 34px; text-align: left; }
.register-steps article { position: relative; padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: rgba(0,0,0,.22); overflow: hidden; }
.register-steps article::after { content: ""; position: absolute; right: -34px; bottom: -44px; width: 130px; height: 130px; border-radius: 50%; background: rgba(217,164,65,.12); filter: blur(10px); }
.register-steps span { display: inline-block; margin-bottom: 18px; color: var(--gold); font-size: 2rem; font-weight: 900; opacity: .72; }
.register-actions { justify-content: center; }
@media (min-width: 981px) {
  .panel-page {
    width: min(1040px, calc(100% - 340px));
    margin-right: clamp(20px, 4vw, 64px);
    margin-left: clamp(292px, 22vw, 320px);
  }

  .admin-page {
    width: 80vw;
    max-width: none;
    margin-right: auto;
    margin-left: auto;
  }
}
@media (max-width: 980px) { .panel-page, .admin-page { padding-top: 150px; } .dashboard-grid, .admin-form-grid, .fivem-info-grid, .fivem-info-groups, .social-link-grid, .reward-admin-toolbar, .reward-manager-grid, .upload-admin-layout, .upload-file-row, .admin-mail-layout, .mail-log-summary, .mail-log-row { grid-template-columns: 1fr; } .reward-list-admin-head, .mail-log-heading, .mailbox-status-card { grid-template-columns: 1fr; flex-direction: column; align-items: stretch; } .upload-file-actions { justify-content: flex-start; } .checkin-claim-card { grid-template-columns: 1fr; } .checkin-calendar-grid { grid-auto-columns: minmax(150px, 32vw); } }
@media (max-width: 680px) { .auth-panel, .dashboard-panel, .admin-panel, .character-modal { padding: 24px; } .user-row, .social-account-card, .reward-row-admin { display: grid; grid-template-columns: 1fr; } .user-row select { width: 100%; } .social-account-actions { justify-content: stretch; } .social-account-actions .btn, .upload-file-actions .btn { width: 100%; } .register-section { padding: 58px 20px; } .register-steps, .character-form, .checkin-summary-grid, .profile-group .fivem-stat-list, .progress-group .fivem-stat-list, .finance-group .fivem-stat-list, .admin-form-grid.compact { grid-template-columns: 1fr; } .checkin-calendar-grid { grid-auto-columns: minmax(150px, 74vw); } }

.admin-shell {
  display: grid;
  grid-template-columns: minmax(250px, 0.34fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.admin-section-menu {
  position: sticky;
  top: 106px;
  display: grid;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: radial-gradient(circle at 12% 0%, rgba(217,164,65,.16), transparent 38%), rgba(8,6,4,.82);
  box-shadow: 0 24px 90px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.04);
}

.admin-section-menu h1 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.admin-section-buttons {
  display: grid;
  gap: 8px;
}

.admin-section-buttons button,
.content-editor-tabs button,
.guide-list-editor button {
  border: 1px solid rgba(217,164,65,.14);
  color: var(--muted);
  background: rgba(0,0,0,.22);
  font: inherit;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}

.admin-section-buttons button {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border-radius: 16px;
  text-align: left;
}

.admin-section-buttons button span {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.admin-section-buttons button strong {
  color: var(--cream);
}

.admin-section-buttons button:hover,
.admin-section-buttons button.active,
.content-editor-tabs button:hover,
.content-editor-tabs button.active,
.guide-list-editor button:hover,
.guide-list-editor button.active {
  color: var(--gold-bright);
  border-color: rgba(255,210,119,.38);
  background: rgba(217,164,65,.1);
  transform: translateY(-1px);
}

.admin-section-stage {
  min-width: 0;
}

.admin-global-message {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(157,255,191,.24);
  border-radius: 16px;
  background: rgba(157,255,191,.06);
}

.operations-panel { display: grid; gap: 28px; }
.operations-heading, .operations-section-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.operations-heading h2, .operations-heading p, .operations-section-title h3 { margin: 0; }
.operations-heading p { margin-top: 8px; color: var(--muted); }
.operations-heading p strong { color: var(--gold-bright); }
.operations-settings, .operations-diagnostics, .configuration-declarations { display: grid; gap: 18px; padding-top: 24px; border-top: 1px solid rgba(217,164,65,.2); }
.operations-section-title > div { display: grid; gap: 4px; }
.operations-section-title > div > span { color: var(--gold); font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.operations-section-title h3 { color: var(--cream); font-size: 1.18rem; }
.operations-section-title small { color: var(--muted); }
.operations-status { display: inline-flex; align-items: center; width: fit-content; min-height: 28px; padding: 5px 9px; border: 1px solid rgba(217,164,65,.22); border-radius: 6px; color: var(--muted); background: rgba(255,255,255,.03); font-size: .74rem; font-weight: 900; overflow-wrap: anywhere; }
.operations-status.ok { border-color: rgba(118,220,158,.4); color: #9dffbf; background: rgba(73,155,105,.1); }
.operations-status.warning { border-color: rgba(255,190,104,.44); color: #ffd29a; background: rgba(181,111,35,.1); }
.operations-status.failed { border-color: rgba(255,132,132,.46); color: #ffb8b8; background: rgba(176,54,54,.1); }
.operations-status.neutral { color: var(--cream); }
.operations-toggle { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 14px; border: 1px solid rgba(217,164,65,.18); border-radius: 8px; background: rgba(0,0,0,.2); cursor: pointer; }
.operations-toggle input { width: 20px; height: 20px; accent-color: var(--gold); }
.operations-toggle span { display: grid; gap: 3px; }
.operations-toggle strong { color: var(--cream); }
.operations-toggle small { color: var(--muted); }
.operations-settings > .btn { width: fit-content; }
.diagnostic-search { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 10px; align-items: end; }
.diagnostic-search label { display: grid; gap: 7px; color: var(--gold-bright); font-size: .82rem; font-weight: 900; }
.diagnostic-search input { width: 100%; min-height: 46px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 8px; color: var(--cream); background: rgba(0,0,0,.28); font: inherit; outline: none; }
.diagnostic-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid rgba(217,164,65,.18); border-radius: 8px; overflow: hidden; }
.diagnostic-metrics article { display: grid; gap: 8px; min-width: 0; padding: 14px; background: rgba(0,0,0,.18); }
.diagnostic-metrics article + article { border-left: 1px solid rgba(217,164,65,.16); }
.diagnostic-metrics span { color: var(--muted); font-size: .73rem; font-weight: 800; text-transform: uppercase; }
.diagnostic-metrics strong { color: var(--cream); font-size: 1.45rem; }
.diagnostic-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.diagnostic-checks article { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 62px; padding: 11px; border: 1px solid rgba(217,164,65,.16); border-radius: 8px; background: rgba(0,0,0,.18); }
.diagnostic-checks article > span { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid currentColor; border-radius: 50%; color: #ffb8b8; font-weight: 900; }
.diagnostic-checks article.ok > span { color: #9dffbf; }
.diagnostic-checks article div { display: grid; min-width: 0; gap: 3px; }
.diagnostic-checks strong { color: var(--cream); }
.diagnostic-checks small { color: var(--muted); overflow-wrap: anywhere; }
.diagnostic-issues { display: grid; gap: 7px; padding: 14px; border-left: 3px solid #d28b42; background: rgba(181,111,35,.08); }
.diagnostic-issues strong { color: #ffd29a; }
.diagnostic-issues p { margin: 0; color: var(--cream); }
.regional-admin-links { display: flex; flex-wrap: wrap; gap: 10px; }
.regional-admin-links a { color: var(--gold-bright); font-weight: 900; text-decoration: underline; text-underline-offset: 4px; }
.declaration-list { display: grid; border: 1px solid rgba(217,164,65,.18); border-radius: 8px; overflow: hidden; }
.declaration-list article { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(180px, 1.3fr); gap: 8px 16px; align-items: center; min-width: 0; padding: 12px 14px; background: rgba(0,0,0,.16); }
.declaration-list article + article { border-top: 1px solid rgba(217,164,65,.12); }
.declaration-list code { color: var(--gold-bright); font-weight: 800; overflow-wrap: anywhere; }
.declaration-list small { grid-column: 1 / -1; color: var(--muted); }

.content-editor {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}

.content-editor-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(217,164,65,.14);
  border-radius: 18px;
  background: rgba(0,0,0,.2);
}

.content-editor-tabs button {
  min-height: 40px;
  padding: 9px 12px;
  border-radius: 12px;
  font-weight: 900;
}

.guide-editor {
  display: grid;
  gap: 16px;
}

.guide-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(217,164,65,.14);
  border-radius: 20px;
  background: rgba(0,0,0,.2);
}

.guide-editor-head strong {
  color: var(--gold-bright);
  font-size: 1.1rem;
}

.guide-editor-head p {
  margin: 5px 0 0;
  color: var(--muted);
}

.guide-editor-layout {
  display: grid;
  grid-template-columns: minmax(220px, .35fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.guide-list-editor {
  display: grid;
  gap: 8px;
  max-height: 620px;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid rgba(217,164,65,.14);
  border-radius: 20px;
  background: rgba(0,0,0,.2);
}

.guide-list-editor button {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  text-align: left;
}

.guide-list-editor span {
  color: var(--gold-bright);
  font-size: .78rem;
  font-weight: 900;
}

.guide-list-editor strong {
  color: var(--cream);
}

.guide-detail-editor {
  margin-top: 0;
  padding: 16px;
  border: 1px solid rgba(217,164,65,.14);
  border-radius: 20px;
  background: rgba(0,0,0,.18);
}

.guide-danger {
  align-content: start;
}

@media (max-width: 980px) {
  .admin-shell,
  .guide-editor-layout {
    grid-template-columns: 1fr;
  }

  .admin-section-menu {
    position: static;
  }

  .admin-section-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guide-editor-head {
    display: grid;
  }

  .diagnostic-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diagnostic-metrics article:nth-child(3) { border-left: 0; border-top: 1px solid rgba(217,164,65,.16); }
  .diagnostic-metrics article:nth-child(4) { border-top: 1px solid rgba(217,164,65,.16); }
}

@media (max-width: 680px) {
  .admin-section-buttons,
  .content-editor-tabs {
    grid-template-columns: 1fr;
  }

  .content-editor-tabs {
    display: grid;
  }

  .operations-heading, .operations-section-title { display: grid; }
  .diagnostic-search, .diagnostic-checks, .declaration-list article { grid-template-columns: 1fr; }
  .diagnostic-search .btn { width: 100%; }
  .declaration-list small { grid-column: auto; }
}

/* Regional gateway */
.hub-gateway {
  position: relative;
  z-index: 7;
  display: grid;
  min-height: 100vh;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  color: #ead9b9;
  background-color: #090704;
  isolation: isolate;
}

.hub-gateway-backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: #0b0805;
  background-image: url('/images/materials-v2/texture-walnut-v2.webp'), url('/images/eastiny-gothic-hero.webp');
  background-position: center, center;
  background-size: 720px auto, cover;
  background-blend-mode: multiply, normal;
  filter: saturate(.7) contrast(1.1);
  transform: scale(1.02);
}

.hub-gateway::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: '';
  background: rgba(6, 4, 3, .76);
}

.hub-gateway::after {
  position: absolute;
  inset: 10px;
  z-index: 3;
  border: 1px solid rgba(184, 133, 57, .28);
  content: '';
  pointer-events: none;
}

.hub-gateway-header,
.hub-gateway-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 18px 34px;
  border-color: rgba(184, 133, 57, .28);
  background-color: rgba(9, 7, 4, .9);
  background-image: url('/images/materials-v2/texture-leather-v2.webp');
  background-size: 600px auto;
  background-blend-mode: multiply;
}

.hub-gateway-header { border-bottom: 1px solid rgba(184, 133, 57, .28); }
.hub-gateway-footer { border-top: 1px solid rgba(184, 133, 57, .28); color: #9b8b73; font-size: .78rem; }

.hub-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 13px;
}

.hub-wordmark img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: sepia(.18) drop-shadow(0 4px 10px rgba(0, 0, 0, .52));
}

.hub-wordmark strong,
.hub-wordmark small { display: block; }
.hub-wordmark strong { color: #d5ae68; font-size: .98rem; text-transform: uppercase; }
.hub-wordmark small { margin-top: 3px; color: #8d7d66; font-size: .68rem; text-transform: uppercase; }

.hub-system-state {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #aa9a80;
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
}

.hub-system-state i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #77a643;
  box-shadow: 0 0 12px rgba(119, 166, 67, .62);
}

.hub-gateway-content {
  display: grid;
  width: min(1040px, calc(100% - 48px));
  margin: auto;
  padding: 54px 0 46px;
  animation: hub-enter .75s cubic-bezier(.2, .75, .25, 1) both;
}

.hub-intro {
  width: min(760px, 100%);
  margin: 0 auto 32px;
  text-align: center;
}

.hub-intro-logo {
  width: 104px;
  height: 82px;
  margin-bottom: 8px;
  object-fit: contain;
  filter: sepia(.16) drop-shadow(0 12px 18px rgba(0, 0, 0, .55));
}

.hub-kicker {
  margin: 0 0 12px;
  color: #b88b49;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.hub-intro h1 {
  margin: 0;
  color: #ead2a4;
  font-size: 3rem;
  line-height: 1.08;
  text-wrap: balance;
}

.hub-intro > p:last-child {
  width: min(680px, 100%);
  margin: 18px auto 0;
  color: #ad9b80;
  line-height: 1.75;
}

.hub-region-ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.hub-region-ticket {
  position: relative;
  display: grid;
  min-height: 202px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(179, 131, 62, .34);
  border-radius: 6px;
  color: #d9c5a3;
  text-align: left;
  background-color: #16110c;
  background-image: url('/images/materials-v2/texture-leather-v2.webp');
  background-size: 520px auto;
  background-blend-mode: multiply;
  cursor: pointer;
  transition: transform .22s ease, border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
}

.hub-region-ticket::before {
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(187, 140, 72, .16);
  content: '';
  pointer-events: none;
}

.hub-region-ticket:hover,
.hub-region-ticket:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(220, 173, 99, .66);
  outline: none;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .35);
}

.hub-region-ticket.selected {
  border-color: #b98c4c;
  background-color: #25190e;
  box-shadow: inset 0 0 0 1px rgba(235, 195, 126, .1), 0 18px 46px rgba(0, 0, 0, .38);
}

.hub-region-seal {
  display: grid;
  width: 70px;
  height: 70px;
  place-items: center;
  border: 1px solid #9d7139;
  border-radius: 50%;
  color: #e5c187;
  background-color: #20160d;
  background-image: url('/images/materials-v2/texture-brass-v2.webp');
  background-size: cover;
  background-blend-mode: multiply;
  font-size: 1.15rem;
  font-weight: 900;
  box-shadow: inset 0 0 0 5px rgba(24, 15, 8, .48);
}

.hub-region-copy small,
.hub-region-copy strong,
.hub-region-copy span { display: block; }
.hub-region-copy small { color: #947e5e; font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.hub-region-copy strong { margin-top: 6px; color: #e0c08c; font-size: 1.35rem; }
.hub-region-copy > span { margin-top: 3px; color: #c39a5c; font-size: .82rem; font-weight: 700; }
.hub-region-copy p { margin: 13px 0 0; color: #9f8d74; font-size: .85rem; line-height: 1.55; }

.hub-region-latency {
  display: inline-block !important;
  margin-top: 12px;
  color: #8f806a !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.hub-region-latency.available { color: #b9d875 !important; }

.hub-region-check {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(184, 140, 75, .42);
  border-radius: 50%;
  color: #f0d095;
  font-weight: 900;
}

.hub-region-ticket.selected .hub-region-check { background: #6f4f26; }

.hub-gateway-actions {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 12px;
  width: min(700px, 100%);
  margin: 24px auto 0;
}

.hub-action {
  display: grid;
  min-height: 54px;
  place-items: center;
  padding: 14px 20px;
  border: 1px solid rgba(184, 134, 62, .54);
  border-radius: 4px;
  font-weight: 800;
  text-align: center;
  transition: transform .2s ease, border-color .2s ease, filter .2s ease;
}

.hub-action:hover,
.hub-action:focus-visible { transform: translateY(-2px); border-color: #dfb873; outline: none; filter: brightness(1.1); }
.hub-action.primary { color: #1c1208; background-color: #b98b48; background-image: url('/images/materials-v2/texture-brass-v2.webp'); background-size: cover; background-blend-mode: soft-light; }
.hub-action.secondary { color: #d6ba8a; background-color: #3c1916; background-image: url('/images/materials-v2/texture-leather-v2.webp'); background-size: 500px auto; background-blend-mode: multiply; }

.hub-region-disclosure {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 19px;
  padding-top: 16px;
  border-top: 1px solid rgba(184, 133, 57, .2);
  color: #887963;
  font-size: .78rem;
}

.hub-region-disclosure span { flex: 0 0 auto; }
.hub-region-disclosure strong { color: #c8a56f; }
.hub-region-disclosure p { max-width: 570px; margin: 0; text-align: right; line-height: 1.55; }

.hub-gateway.launcher-flow .hub-gateway-content {
  padding-block: 26px 22px;
}

.hub-gateway.launcher-flow .hub-intro {
  margin-bottom: 20px;
}

.hub-gateway.launcher-flow .hub-intro-logo {
  width: 76px;
  height: 56px;
  margin-bottom: 2px;
}

.hub-gateway.launcher-flow .hub-intro h1 {
  font-size: 2.35rem;
}

.hub-gateway.launcher-flow .hub-intro > p:last-child {
  margin-top: 12px;
  line-height: 1.55;
}

.hub-gateway.launcher-flow .hub-region-ticket {
  min-height: 156px;
  padding: 18px 22px;
}

.hub-gateway.launcher-flow .hub-region-copy p {
  margin-top: 8px;
}

.hub-gateway.launcher-flow .hub-gateway-actions {
  margin-top: 18px;
}

.hub-gateway.launcher-flow .hub-region-disclosure {
  margin-top: 14px;
  padding-top: 12px;
}

.auth-page .auth-panel {
  width: min(680px, 100%);
  padding: 38px 42px 42px;
  border-radius: 6px;
  background-color: #17110b;
  background-image: url('/images/materials-v2/texture-leather-v2.webp');
  background-size: 620px auto;
  background-blend-mode: multiply;
}

.auth-page .auth-panel h1 {
  max-width: none;
  margin: 14px 0 14px;
  font-size: 2.75rem;
  line-height: 1.08;
  letter-spacing: 0;
  text-wrap: balance;
}

.auth-page .auth-panel > p:not(.eyebrow):not(.form-message) {
  max-width: 520px;
  margin-bottom: 0;
  line-height: 1.65;
}

.auth-page .auth-form {
  margin-top: 24px;
}

.auth-region-mark {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin: -20px -20px 30px;
  padding: 13px 16px;
  border: 1px solid rgba(184, 133, 57, .28);
  background: rgba(4, 3, 2, .3);
}

.auth-region-mark > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #956b35;
  border-radius: 50%;
  color: #dfbd82;
  font-weight: 900;
}

.auth-region-mark small,
.auth-region-mark strong { display: block; }
.auth-region-mark small { color: #8f806a; font-size: .68rem; text-transform: uppercase; }
.auth-region-mark strong { margin-top: 3px; color: #d4b47e; font-size: .88rem; }
.auth-region-mark a { color: #b99359; font-size: .76rem; font-weight: 800; }

.auth-page .auth-form input,
.auth-page .auth-form select {
  border-radius: 4px;
  background-color: rgba(5, 4, 3, .58);
}

.launcher-authorization-page {
  min-height: calc(100dvh - 120px);
}

.launcher-auth-panel {
  width: min(760px, 100%) !important;
  padding: 24px 30px 28px !important;
}

.auth-page .launcher-auth-panel h1 {
  margin-block: 10px;
  font-size: 2rem;
}

.auth-page .launcher-auth-panel > p:not(.eyebrow):not(.form-message) {
  line-height: 1.5;
}

.launcher-region-lock {
  margin: -12px -14px 18px;
  padding-block: 9px;
}

.launcher-region-lock i {
  color: #b58d50;
  font-size: .68rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.launcher-auth-ledger {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 18px;
  border-block: 1px solid rgba(184, 133, 57, .3);
}

.launcher-auth-ledger > div {
  min-width: 0;
  padding: 13px 14px 15px;
}

.launcher-auth-ledger > div + div {
  border-left: 1px solid rgba(184, 133, 57, .22);
}

.launcher-auth-ledger span,
.launcher-auth-ledger strong,
.launcher-auth-ledger small {
  display: block;
  overflow-wrap: anywhere;
}

.launcher-auth-ledger span {
  color: #8f7c5f;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.launcher-auth-ledger strong {
  margin-top: 7px;
  color: #dfbf88;
  font-size: .98rem;
}

.launcher-auth-ledger small {
  margin-top: 4px;
  color: #9f8f76;
  font-size: .74rem;
}

.launcher-auth-security {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.launcher-auth-security li {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: start;
  gap: 10px;
  padding: 10px 12px;
}

.launcher-auth-security li + li {
  border-left: 1px solid rgba(184, 133, 57, .18);
}

.launcher-auth-security li > span {
  color: #b58a4b;
  font-family: "Exo 2", system-ui, sans-serif;
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
}

.launcher-auth-security p,
.launcher-auth-security strong,
.launcher-auth-security small {
  display: block;
  margin: 0;
}

.launcher-auth-security strong {
  color: #d8be91;
  font-size: .86rem;
}

.launcher-auth-security small {
  margin-top: 3px;
  color: #8f806a;
  font-size: .72rem;
  line-height: 1.35;
}

.launcher-auth-actions {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

.launcher-auth-actions .btn,
.launcher-auth-actions .auth-switch {
  width: 100%;
  min-height: 52px;
}

.launcher-auth-actions button:disabled {
  cursor: wait;
  filter: saturate(.45);
  opacity: .7;
}

.launcher-auth-panel > .form-message {
  margin: 18px 0 0;
  text-align: center;
}

@media (max-width: 680px) {
  .auth-page .auth-panel {
    padding: 26px 22px 30px;
  }

  .auth-page .auth-panel h1 {
    font-size: 2.08rem;
    line-height: 1.12;
  }

  .launcher-auth-ledger {
    grid-template-columns: 1fr;
  }

  .launcher-auth-ledger > div {
    padding-inline: 4px;
  }

  .launcher-auth-ledger > div + div {
    border-top: 1px solid rgba(184, 133, 57, .22);
    border-left: 0;
  }

  .launcher-auth-actions {
    grid-template-columns: 1fr;
  }

  .launcher-auth-security {
    grid-template-columns: 1fr;
  }

  .launcher-auth-security li {
    padding-inline: 4px;
    border-bottom: 1px solid rgba(184, 133, 57, .16);
  }

  .launcher-auth-security li + li {
    border-left: 0;
  }

  .launcher-region-lock i {
    grid-column: 2;
  }
}

@keyframes hub-enter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  .hub-gateway-header,
  .hub-gateway-footer { padding: 16px 22px; }
  .hub-system-state { display: none; }
  .hub-gateway-content { width: min(100% - 32px, 560px); margin: 0 auto; padding: 36px 0; }
  .hub-intro h1 { font-size: 2.25rem; }
  .hub-region-ledger { grid-template-columns: 1fr; }
  .hub-region-ticket { min-height: 170px; padding: 20px; }
  .hub-gateway-actions { grid-template-columns: 1fr; }
  .hub-region-disclosure { display: grid; gap: 7px; }
  .hub-region-disclosure p { text-align: left; }
  .hub-gateway-footer span:last-child { display: none; }
  .server-identities-heading { display: grid; gap: 12px; }
  .server-identities-heading > small { width: fit-content; }
  .server-identity-grid { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .hub-gateway::after { inset: 5px; }
  .hub-wordmark img { width: 40px; height: 40px; }
  .hub-intro h1 { font-size: 1.9rem; }
  .hub-region-ticket { grid-template-columns: auto 1fr; gap: 14px; }
  .hub-region-seal { width: 56px; height: 56px; font-size: .95rem; }
  .hub-region-check { position: absolute; top: 16px; right: 16px; }
  .auth-region-mark { grid-template-columns: auto 1fr; }
  .auth-region-mark a { grid-column: 2; }
  .server-identity-card-head { grid-template-columns: auto 1fr; }
  .server-identity-card-head > i { grid-column: 2; width: fit-content; }
  .server-identity-card dl > div { grid-template-columns: 1fr; gap: 3px; }
  .server-identity-card dd { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .hub-gateway-content { animation: none; }
  .hub-region-ticket,
  .hub-action { transition: none; }
}