/* Helbreath Chain Lords — design tokens + layout */
:root {
  --cl-gold: #c4a050;
  --cl-gold-bright: #f0d890;
  --cl-gold-soft: #e0c878;
  --cl-ink: #1a0e04;
  --cl-panel-light: #2c2c2c;
  --cl-panel-dark: #1a1a1a;
  --cl-text: #b7b7b7;
  --cl-text-warm: rgb(200, 170, 130);
  --cl-green: #2b2;
  --cl-green-bright: #4dff4d;
  --cl-font-display: 'Cinzel', Georgia, serif;
  --cl-font-ui: Verdana, Arial, Helvetica, sans-serif;
  /* Was 240px; +50% more → 360px gray side bands */
  --cl-side-w: 360px;
  --cl-shell-max: 1200px;
  --cl-discord: https://discord.gg/P4tBdGRC3q;
}

html {
  width: 100%;
  min-height: 100%;
}

/* Wallpaper only — edge to edge */
body {
  color: #b7b7b7;
  width: 100% !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: #0a0806 !important;
  background-image: url(img/wallpaper.jpg) !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

/* ----- Header wordmark ----- */
#header.cl-header,
#header.cl-header a {
  height: auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 auto !important;
  display: block !important;
}

.cl-header {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: 20px 12px 12px;
}

.cl-seal {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none !important;
  min-height: 132px;
  padding: 20px 40px 22px;
  border: 1px solid rgba(196, 154, 72, 0.45);
  border-radius: 4px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(120, 72, 28, 0.45) 0%, transparent 62%),
    linear-gradient(180deg, rgba(28, 16, 8, 0.92) 0%, rgba(10, 8, 6, 0.88) 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.8),
    0 12px 36px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 220, 150, 0.12);
}

.cl-seal:hover {
  border-color: rgba(232, 200, 120, 0.7);
}

.cl-seal-kicker {
  display: block;
  font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: 0.28em;
  line-height: 1.15;
  text-transform: uppercase;
  color: #e0c878;
  text-shadow: 0 1px 2px #000, 0 0 18px rgba(196, 154, 72, 0.25);
}

.cl-seal-title {
  display: block;
  font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(26px, 3.8vw, 40px);
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1.05;
  text-transform: uppercase;
  color: #f4e4b0;
  text-shadow:
    0 2px 0 #1a0e04,
    0 4px 18px rgba(0, 0, 0, 0.75),
    0 0 24px rgba(196, 154, 72, 0.25);
}

.cl-seal-line {
  display: block;
  width: min(300px, 72vw);
  height: 1px;
  margin: 4px 0 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(196, 154, 72, 0.15) 12%,
    rgba(240, 216, 144, 0.85) 50%,
    rgba(196, 154, 72, 0.15) 88%,
    transparent 100%
  );
}

.cl-seal-tag {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(200, 170, 130, 0.85);
}

/* ----- Stage: three columns only (banners merged into gray sides) ----- */
.landing-stage {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 12px 12px;
  box-sizing: border-box;
}

/*
 * Gray sides: 360px each (240 × 1.5).
 * Center expands. Outer World/Arena rails removed — content lives in gray panels.
 */
.landing-stage #container {
  flex: 0 1 100% !important;
  width: min(1480px, 100%) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
  box-sizing: border-box;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  display: grid !important;
  grid-template-columns: var(--cl-side-w) minmax(0, 1fr) var(--cl-side-w);
  grid-template-rows: auto auto auto;
  column-gap: 0;
  row-gap: 0;
}

.landing-stage #container .shell-frame-top,
.landing-stage #container .shell-frame-bottom {
  grid-column: 1 / -1;
  height: 10px;
  background: linear-gradient(180deg, #5a3a18 0%, #3a2410 40%, #1a1008 100%);
  border-top: 1px solid rgba(196, 154, 72, 0.35);
  border-bottom: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.12);
}

.landing-stage #container .shell-frame-top {
  grid-row: 1;
}

.landing-stage #container .shell-frame-bottom {
  grid-row: 3;
}

.landing-stage #topborder {
  display: none !important;
}

#footer #bottomborder {
  display: none !important;
}

/* ----- Light-gray side bands (World left / Arena right) ----- */
.landing-stage #menuleft,
.landing-stage #menuright {
  float: none !important;
  position: relative !important;
  top: 0 !important;
  width: auto !important;
  min-height: 680px;
  box-sizing: border-box;
  text-align: center;
  padding: 28px 20px 36px;
  background-repeat: repeat-y !important;
  background-position: top center !important;
  background-size: 100% auto !important;
  border-left: 1px solid #3a2814;
  border-right: 1px solid #3a2814;
  display: flex !important;
  flex-direction: column;
  align-items: center;
}

.landing-stage #menuleft {
  grid-column: 1;
  grid-row: 2;
  background-image: url(img/panel-left.png) !important;
  background-color: var(--cl-panel-light);
}

.landing-stage #menuright {
  grid-column: 3;
  grid-row: 2;
  background-image: url(img/panel-right.png) !important;
  background-color: var(--cl-panel-light);
}

/* Darker center band */
.landing-stage #content {
  grid-column: 2;
  grid-row: 2;
  float: none !important;
  position: relative !important;
  top: 0 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 16px 28px 32px !important;
  box-sizing: border-box;
  background-image: url(img/panel-center.png) !important;
  background-repeat: repeat-y !important;
  background-position: top center !important;
  background-size: 100% auto !important;
  background-color: var(--cl-panel-dark);
}

.landing-stage .clear {
  display: none !important;
}

/* ----- Realm entry (merged outer banners) ----- */
.realm-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 320px;
  gap: 10px;
}

.realm-kicker {
  margin: 0;
  font-family: var(--cl-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #a88850;
  text-shadow: 0 1px 2px #000;
}

.realm-title {
  margin: 0 0 6px;
  font-family: var(--cl-font-display);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.15;
  color: #f0d890;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75), 0 1px 0 #1a0e04;
}

.realm-lead {
  margin: 0 0 8px;
  font-family: var(--cl-font-ui);
  font-size: 11px;
  line-height: 1.4;
  color: rgba(200, 180, 150, 0.9);
}

/* Large yellow Play Now — classic art, scaled for 360px band */
.play-now-btn {
  display: block;
  width: 240px;
  max-width: 100%;
  height: 115px;
  margin: 8px auto 4px;
  padding: 0;
  border: none;
  cursor: pointer;
  background-color: transparent;
  background-image: url(img/playnow.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.65),
    0 8px 22px rgba(0, 0, 0, 0.45),
    0 0 28px rgba(240, 200, 60, 0.18);
  transition: filter 0.15s ease, transform 0.15s ease;
  position: relative;
}

.play-now-btn:hover:not(:disabled) {
  background-image: url(img/playover.png);
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.play-now-btn:disabled {
  opacity: 0.65;
  cursor: wait;
  filter: grayscale(0.25);
}

/* Accessible label (art already says PLAY NOW; keep text for a11y / fallback) */
.play-now-btn-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.play-now-status {
  min-height: 1.2em;
  margin: 2px 0 6px;
  font-family: var(--cl-font-ui);
  font-size: 11px;
  font-weight: bold;
  line-height: 1.35;
  color: #c8a878;
  text-align: center;
}

.play-now-status.is-error {
  color: #e07070;
}

.play-now-status.is-ok {
  color: var(--cl-green-bright);
}

/* ----- Live realm stats (green, under Play Now) ----- */
.landing-stage #menuleft .realm-stats {
  width: 100%;
  margin-top: 14px;
  padding: 14px 8px 10px;
  text-align: center;
  border-top: 1px solid rgba(90, 50, 20, 0.55);
}

.landing-stage #menuleft .online-count,
.landing-stage #menuleft .realm-stat {
  position: static !important;
  margin: 6px 0;
  font-family: var(--cl-font-ui);
  font-weight: bold;
  font-size: 12px;
  line-height: 1.4;
  color: var(--cl-green) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.landing-stage #menuleft .online-count span,
.landing-stage #menuleft .realm-stat span {
  color: var(--cl-green-bright) !important;
  font-variant-numeric: tabular-nums;
}

/* Center nav strip */
.center-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 8px;
  margin: 0 0 16px;
}

.center-nav .menuhead {
  width: auto !important;
  min-width: 90px;
  padding: 0 10px;
  background-size: 100% 28px;
  background-position: center center;
}

/* Primary CTA in content */
.cta-row {
  margin: 14px 0 8px !important;
  text-align: center;
}

.cta-primary {
  display: inline-block;
  padding: 12px 22px;
  font-family: var(--cl-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none !important;
  color: #1a0e04 !important;
  background: linear-gradient(180deg, #f0d890 0%, #c4a050 100%);
  border: 1px solid #8a6820;
  border-radius: 2px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.cta-primary:hover {
  filter: brightness(1.06);
  color: #000 !important;
}

.cta-primary:disabled {
  opacity: 0.7;
  cursor: wait;
}

.cta-note {
  margin-top: 10px !important;
  font-size: 11px !important;
  color: #888 !important;
  text-align: center;
  line-height: 1.4;
}

.hero-blurb {
  margin-bottom: 12px;
}

.brand-tag {
  display: none;
}

.chain-note {
  display: block;
  margin-top: 8px;
  color: rgb(150, 120, 90);
  font-size: 11px;
}

.right-stub {
  margin: 6px 4px;
  color: rgb(150, 130, 100);
  font-size: 11px;
  text-align: center;
  line-height: 1.4;
}

.right-stub a {
  color: rgb(240, 190, 150);
}

/* Video in dark center */
.landing-stage #content .teaser-wrap {
  text-align: center;
  width: 100%;
  margin: 0 auto;
}

.landing-stage #content video#gameplay-teaser {
  width: min(520px, 100%) !important;
  max-width: 100% !important;
  height: auto !important;
  display: inline-block;
  vertical-align: top;
  border: 1px solid #321717;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
}

/* Footer */
#footer {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 0 12px 20px;
  position: relative;
  top: 0;
}

#footer #bottomborder,
#footer #bottomborder img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

#footer .footer-disclaimer,
#footer .footer-meta {
  margin: 8px auto;
  max-width: 920px;
  color: #888;
  font-size: 11px;
  line-height: 1.45;
}

#footer a {
  color: rgb(240, 190, 150);
}

/* EK gallery */
.ek-rarity-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 10px 0 8px;
}

.ek-badge {
  font-size: 11px;
  font-weight: bold;
  color: #b7b7b7;
  border-bottom: 1px dotted #5d5d5d;
  padding-bottom: 2px;
}

.ek-badge-legendary {
  color: #ddca44;
  border-color: #ddca44;
}

.ek-badge-rare {
  color: #7aa0d4;
  border-color: #7aa0d4;
}

.ek-badge-common {
  color: #b7b7b7;
}

.ek-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.ek-filter {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: rgb(218, 178, 138);
  background: #181818;
  border: 1px solid #5d5d5d;
  padding: 4px 10px;
  cursor: pointer;
}

.ek-filter.is-active,
.ek-filter:hover {
  color: #ddca44;
  border-color: #ddca44;
  background: #2e2d2b;
}

.ek-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.ek-card {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #181818;
  border: 1px solid #321717;
  overflow: hidden;
}

.ek-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ek-card-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px 7px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.92));
  font-size: 11px;
  line-height: 1.25;
  color: #ddd;
}

.ek-card-meta strong {
  display: block;
  color: #ddca44;
  font-size: 11px;
}

.ek-card[data-rarity='legendary'] {
  box-shadow: inset 0 0 0 1px rgba(221, 202, 68, 0.55);
}

.ek-card[data-rarity='rare'] {
  box-shadow: inset 0 0 0 1px rgba(122, 160, 212, 0.45);
}

.ek-gallery-status {
  margin-top: 10px;
  color: #888;
  font-size: 11px;
}

.ek-card-empty {
  grid-column: 1 / -1;
  padding: 18px 10px;
  text-align: center;
  border: 1px dashed #5d5d5d;
  color: #888;
  font-size: 11px;
  background: #141414;
}

/* Responsive */
@media screen and (max-width: 1100px) {
  :root {
    --cl-side-w: 280px;
  }

  .play-now-btn {
    width: 200px;
    height: 96px;
  }
}

@media screen and (max-width: 800px) {
  .landing-stage #container {
    grid-template-columns: 1fr;
  }

  .landing-stage #menuleft,
  .landing-stage #menuright,
  .landing-stage #content {
    grid-column: 1 !important;
    grid-row: auto !important;
    min-height: 0;
    width: 100% !important;
  }

  .landing-stage #menuleft {
    order: 1;
  }

  .landing-stage #content {
    order: 2;
  }

  .landing-stage #menuright {
    order: 3;
  }

  .landing-stage #content video#gameplay-teaser {
    width: 100% !important;
  }

  .cl-seal {
    min-height: 110px;
    padding: 16px 24px 18px;
  }

  .cl-seal-kicker {
    font-size: 16px;
    letter-spacing: 0.2em;
  }

  .cl-seal-title {
    font-size: 24px;
  }
}