/* Server 1606 global field-guide skin. Loaded last across the copied webroot. */
:root {
  --bg: #11120f !important;
  --panel: #191914 !important;
  --panel2: #252216 !important;
  --accent: #d5532f !important;
  --accent2: #f0b75d !important;
  --blue: #5a9cb5 !important;
  --green: #6d8c5b !important;
  --red: #cf4d42 !important;
  --text: #eee2c8 !important;
  --muted: #a89b80 !important;
  --border: rgba(238, 226, 200, .15) !important;
  --border2: rgba(238, 226, 200, .24) !important;
  --glow: 0 0 20px rgba(240, 183, 93, .22) !important;
  --s3-col: #d5bd55 !important;
  --s3-bg: rgba(213, 189, 85, .10) !important;
  --s4-col: #7a8cc4 !important;
  --s4-bg: rgba(122, 140, 196, .10) !important;
  --s5-col: #c86a37 !important;
  --s5-bg: rgba(200, 106, 55, .10) !important;
  --font-head: 'DIN Condensed', 'Avenir Next Condensed', 'Arial Narrow', sans-serif !important;
  --font-body: 'Avenir Next', 'Segoe UI', system-ui, sans-serif !important;
  --font-mono: 'Menlo', 'SFMono-Regular', 'Courier New', monospace !important;
}

html {
  background: var(--bg) !important;
}

body {
  color: var(--text) !important;
  font-family: var(--font-body) !important;
  background:
    radial-gradient(ellipse 85% 60% at 12% 0%, rgba(213, 83, 47, .12), transparent 58%),
    radial-gradient(ellipse 62% 48% at 88% 12%, rgba(90, 156, 181, .08), transparent 55%),
    radial-gradient(ellipse 52% 38% at 50% 100%, rgba(109, 140, 91, .07), transparent 60%),
    var(--bg) !important;
  background-attachment: fixed !important;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .14;
  background: linear-gradient(115deg, transparent 0 42%, rgba(238, 226, 200, .06) 42% 42.4%, transparent 42.4%);
  mix-blend-mode: screen;
}

body > * {
  position: relative;
}

body:not(:has(.hero)):not(:has(.site-nav)) {
  padding: clamp(22px, 4vw, 58px) clamp(16px, 4vw, 72px) 80px !important;
}

body:not(:has(.hero)):not(:has(.site-nav)) > h1,
body:not(:has(.hero)):not(:has(.site-nav)) > h2,
body:not(:has(.hero)):not(:has(.site-nav)) > p,
body:not(:has(.hero)):not(:has(.site-nav)) > section,
body:not(:has(.hero)):not(:has(.site-nav)) > div,
body:not(:has(.hero)):not(:has(.site-nav)) > table,
body:not(:has(.hero)):not(:has(.site-nav)) > ul,
body:not(:has(.hero)):not(:has(.site-nav)) > ol {
  max-width: 1180px;
  margin-left: auto !important;
  margin-right: auto !important;
}

body:not(:has(.hero)):not(:has(.site-nav)) > h1:first-of-type,
body:not(:has(.hero)):not(:has(.site-nav)) > h2:first-of-type {
  margin-top: 26px !important;
  margin-bottom: 28px !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid rgba(240, 183, 93, .34) !important;
}

body:not(:has(.hero)):not(:has(.site-nav)) > p {
  color: rgba(238, 226, 200, .82) !important;
  line-height: 1.7 !important;
  margin-bottom: 16px !important;
}

body:not(:has(.hero)):not(:has(.site-nav)) > div:not([id='intro']):not([id='ambient']):not([id='radar']):not([id='dunes']) {
  background: rgba(25, 25, 20, .62) !important;
  border: 1px solid rgba(238, 226, 200, .10) !important;
  padding: clamp(18px, 2.2vw, 30px) !important;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

body:not(:has(.hero)):not(:has(.site-nav)) > div:empty {
  display: none !important;
}

body:not(:has(.hero)):not(:has(.site-nav)) a {
  color: var(--accent2) !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
}

h1, h2, h3, h4,
.hero-title, .hero-sub, .page-title, .section-title,
.card-title, .s-name, .t-name, .e-name,
.stat-val, .rank-num, .section-header h2,
.nav-logo-text strong {
  font-family: var(--font-head) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
}

p, li, td, input, select, textarea, button {
  font-family: var(--font-body) !important;
}

.sub-label, .sec-label-text, .stat-label, .t-label,
.pill, .badge, .tag, .s-tag, .t-tag,
.footer-copy, .footer-live-text,
.nav-link, .lang-current, .lang-opt,
.server-badge, .visit-badge {
  font-family: var(--font-mono) !important;
  letter-spacing: 1.2px !important;
}

.site-nav {
  background: rgba(17, 18, 15, .94) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .28) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.site-nav::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(240, 183, 93, .45), transparent) !important;
}

.nav-link,
.lang-current,
.nav-hamburger,
.btn,
button,
.hero-cta-primary,
.hero-cta-secondary {
  border-radius: 0 !important;
}

.card,
.toc,
.story-box,
.method,
.zone-card,
.reward-item,
.item-card,
.ability-card,
.rank-info,
.alert,
.tip,
.warn,
.warning,
.danger,
.tool-panel,
.stat-card,
.table-wrap,
.sync-box,
.domains-card,
.e-card,
.t-card,
.s-card,
.archive-grid > a {
  border-radius: 0 !important;
  border-color: var(--border) !important;
  background-color: rgba(25, 25, 20, .82) !important;
  box-shadow: none !important;
}

.card,
.toc,
.method,
.zone-card,
.reward-item,
.item-card,
.ability-card,
.rank-info,
.alert,
.tip,
.warn,
.warning,
.danger {
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

.tip,
.warn,
.danger,
.alert,
.warning {
  border-left-width: 1px !important;
}

.pill,
.badge,
.tag,
.s-tag,
.t-tag,
.server-badge,
.visit-badge,
.domain-badge,
.role-badge,
.badge-evt {
  border-radius: 0 !important;
  background: rgba(238, 226, 200, .055) !important;
  border: 1px solid rgba(238, 226, 200, .18) !important;
}

table,
.dtable,
.table-wrap {
  border-color: var(--border) !important;
}

th,
.dtable th {
  font-family: var(--font-mono) !important;
  color: var(--accent2) !important;
  background: rgba(238, 226, 200, .045) !important;
  border-color: var(--border) !important;
}

a {
  color: inherit;
}

.section-icon,
.t-icon-box,
.e-icon,
.item-icon {
  border-radius: 0 !important;
}

.card-mini-art,
.event-mini-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-deco {
  font-family: var(--font-mono) !important;
  font-size: .62rem !important;
  letter-spacing: 2px !important;
  color: var(--accent2) !important;
  border: 1px solid rgba(240, 183, 93, .28) !important;
  background: rgba(17, 18, 15, .62) !important;
  padding: 8px 12px !important;
}

.app-card {
  border-radius: 0 !important;
  overflow: hidden !important;
  background: rgba(25, 25, 20, .82) !important;
  border-color: var(--border) !important;
}

.app-banner {
  position: relative !important;
  height: 132px !important;
  overflow: hidden !important;
  font-size: 0 !important;
  border-bottom: 1px solid rgba(238, 226, 200, .16) !important;
  background: rgba(17, 18, 15, .68) !important;
}

.app-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.95) contrast(1.08);
}

.app-banner::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(0deg, rgba(17, 18, 15, .88), rgba(17, 18, 15, .08)) !important;
}

.event-mini-art {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(238, 226, 200, .18);
  margin-bottom: 10px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}

.t-card,
.e-card {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
}

.t-card > *,
.e-card > * {
  position: relative;
  z-index: 2;
}

.t-card::before,
.e-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .32;
  background-position: center;
  background-size: cover;
  filter: saturate(.9) contrast(1.05);
}

.t-card::after,
.e-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(17, 18, 15, .94), rgba(17, 18, 15, .56));
}

.t-card[href*='map']::before,
.tools a[href*='apps/map']::before {
  background-image: url('/assets/generated/tactical-board-tile.png');
}

.t-card[href*='desert']::before,
.tools a[href*='apps/desert']::before {
  background-image: url('/assets/generated/tool-desert-storm.png');
}

.t-card[href*='canyon']::before,
.tools a[href*='apps/canyon']::before {
  background-image: url('/assets/generated/tool-canyon-storm.png');
}

.t-card[href*='train']::before,
.tools a[href*='apps/train']::before {
  background-image: url('/assets/generated/tool-train-conductor.png');
}

.e-card[href*='meteorite']::before,
.events a[href*='event-meteorite']::before {
  background-image: url('/assets/generated/event-meteor-iron-war.png');
}

.e-card[href*='code-bosses']::before,
.events a[href*='code-bosses']::before {
  background-image: url('/assets/generated/event-code-bosses.png');
}

.e-card[href*='ghost-ops']::before,
.events a[href*='ghost-ops']::before {
  background-image: url('/assets/generated/event-ghost-ops.png');
}

.e-card[href*='champion-duel']::before,
.events a[href*='champion-duel']::before {
  background-image: url('/assets/generated/event-champion-duel.png');
}

.e-card[href*='overlord']::before,
.events a[href*='overlord-gorilla']::before {
  background-image: url('/assets/generated/event-overlord-training.png');
}

.page-hero {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  border-radius: 0 !important;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .5;
  background-position: center;
  background-size: cover;
  filter: saturate(.95) contrast(1.08);
}

.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, var(--bg) 0%, rgba(17, 18, 15, .72) 45%, rgba(17, 18, 15, .18) 100%),
    linear-gradient(90deg, rgba(17, 18, 15, .82) 0%, rgba(17, 18, 15, .38) 55%, transparent 100%);
}

.page-hero-deco {
  display: none !important;
}

.season-hero-s3::before {
  background-image: url('/assets/generated/season-3-golden-kingdom.png');
}

.season-hero-s4::before {
  background-image: url('/assets/generated/season-4-evernight-hero.png');
}

.season-hero-s5::before {
  background-image: url('/assets/generated/season-5-wild-west-hero.png');
}

.tools a[href*='apps/desert']::before,
.t-card[href*='desert']::before {
  background-image: url('/assets/generated/tool-desert-storm-hero.png');
}

/* ── buildings / events index pages ─────────────────────── */
.hero h1 {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
  color: var(--text) !important;
  filter: none !important;
}

.hero-deco {
  display: none !important;
}

.ev-card {
  border-radius: 0 !important;
  border-top: 1px solid var(--accent) !important;
  border-left: 1px solid rgba(238, 226, 200, .10) !important;
  border-right: 1px solid rgba(238, 226, 200, .10) !important;
  border-bottom: 1px solid rgba(238, 226, 200, .10) !important;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%) !important;
  background: rgba(25, 25, 20, .82) !important;
}

.ev-banner {
  height: 90px !important;
  font-size: 3rem !important;
  background: linear-gradient(135deg, rgba(17, 18, 15, .92), rgba(30, 28, 20, .88)) !important;
  border-bottom: 1px solid rgba(238, 226, 200, .08) !important;
}

.ev-title {
  font-family: var(--font-head) !important;
  color: var(--text) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

.ev-footer .read-btn {
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%) !important;
}

/* ─────────────────────────────────────────────────────── */

@media (max-width: 700px) {
  body {
    background-attachment: scroll !important;
  }

  h1, .hero-sub {
    line-height: .9 !important;
  }
}