/* ==========================================================================
   Eryon - theme layer (reworked from the Eryon theme; same markup, Eryon look)
   Sits on top of Bootstrap 5.3. Bootstrap is only used for the grid, navbar
   collapse, dropdown and responsive utilities; all visual styling lives here.
   Metrics and colors were measured from Website_Eryon.psd (1920x3030).
   ========================================================================== */

@font-face { font-family: "Solmoe KimDaeGeon"; src: url("../fonts/solmoe-kimdaegeon-light.woff2") format("woff2"); font-weight: 100 400; font-display: swap; }
@font-face { font-family: "Solmoe KimDaeGeon"; src: url("../fonts/solmoe-kimdaegeon-medium.woff2") format("woff2"); font-weight: 500 900; font-display: swap; }
@font-face { font-family: "Solmoe KimDaeGeon"; src: url("../fonts/solmoe-i18n-light.woff2") format("woff2"); font-weight: 100 400; font-display: swap; unicode-range: U+00A0-024F; }
@font-face { font-family: "Solmoe KimDaeGeon"; src: url("../fonts/solmoe-i18n-medium.woff2") format("woff2"); font-weight: 500 900; font-display: swap; unicode-range: U+00A0-024F; }
@font-face { font-family: "Onest"; src: url("../fonts/onest-var.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Onest"; src: url("../fonts/onest-i18n-latin-var.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+00A0-00FF, U+0131, U+2018-201E, U+2026; }
@font-face { font-family: "Onest"; src: url("../fonts/onest-ext-var.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0100-024F; }
@font-face { font-family: "Onest"; src: url("../fonts/onest-i18n-ext-var.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0100-017F, U+0218-021B; }

:root {
  /* ---- Eryon palette (from eryon-presentation/css/tokens.css) ---- */
  --bg-900: #140c09;  --bg-800: #1c110c;  --bg-700: #2a1712;  --bg-600: #3a221a;
  --bg-900-rgb: 20 12 9;
  --text-primary: #efe4cf;  --text-secondary: #b8a58b;
  --crimson-500: #9c1f1a;  --crimson-600: #7e1614;  --crimson-300: #d64a3f;  --crimson-200: #e05f50;
  --rust-250: #d06a44;  --rust-200: #cf7f5f;
  --brass-400: #c9a24a;  --brass-300: #e3c06a;  --brass-ink: #7d5f1c;
  --brass-400-rgb: 201 162 74;
  --parchment-100: #ddb67e;  --parchment-300: #a07f50;

  /* surfaces */
  --bg:          var(--bg-900);
  --panel:       rgb(28 17 12 / .92);
  --panel-alt:   rgb(28 17 12 / .88);
  --sunken:      rgb(20 12 9 / .78);
  --line:        var(--bg-600);
  --line-soft:   rgb(var(--brass-400-rgb) / .16);
  --line-warm:   rgb(var(--brass-400-rgb) / .30);

  /* gold -> brass */
  --gold-a:      var(--brass-300);
  --gold-b:      var(--brass-400);
  --gold-c:      var(--brass-ink);
  --gold-rule:   rgb(var(--brass-400-rgb) / .45);
  --gold-rule2:  rgb(var(--brass-400-rgb) / .45);
  --hatch: linear-gradient(transparent, transparent);

  /* text */
  --cream:       var(--text-primary);
  --cream-2:     var(--text-secondary);
  --cream-3:     var(--brass-300);
  --ink:         var(--text-primary);

  /* accents */
  --chip:        var(--bg-700);
  --row-alt:     rgb(42 23 18 / .65);

  /* fonts */
  --font:      "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-alt:  "Onest", system-ui, "Segoe UI", sans-serif;
  --font-disp: "Solmoe KimDaeGeon", Georgia, "Times New Roman", serif;

  /* metrics */
  --shell:       1235px;
  --nav-h:       76px;
  --radius:      8px;
  --cut:         12px;   /* cut-corner CTA, after the presentation's PLAY NOW */

  --cursor:       url("../img/cursor-eryon.png") 0 0, auto;
  --cursor-hover: url("../img/cursor-eryon-hover.png") 0 0, pointer;
}

/* ---------------------------------------------------------------- base */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 14px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a   { text-decoration: none; color: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 16px;
}

/* Match Bootstrap's container to the same width */
.container, .container-lg, .container-xl { max-width: var(--shell); }

/* -------------------------------------------------------------- buttons */

.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 26px;
  border-radius: 7px;
  background:
    var(--hatch),
    linear-gradient(90deg, var(--gold-a) 0%, var(--gold-b) 45%, var(--gold-c) 100%);
  color: var(--cream);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
  transition: filter .18s ease, transform .18s ease;
}
.btn-gold:hover  { filter: brightness(1.12); }
.btn-gold:active { transform: translateY(1px); }

.btn-gold--sm   { min-height: 35px; padding: 0 20px; font-size: 11px; border-radius: 5px; }
.btn-gold--lg   { min-height: 52px; padding: 0 44px; font-size: 19px; font-weight: 600; }
.btn-gold--icon { min-height: 52px; padding: 0 30px; font-size: 18.5px; font-weight: 600; }
.btn-gold--icon img { width: 26px; height: auto; }

.squarebtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 37px;
  height: 37px;
  border-radius: 6px;
  background: var(--hatch), linear-gradient(180deg, var(--gold-a), var(--gold-c));
  color: #1d0f07;
  transition: filter .18s ease;
}
.squarebtn:hover { filter: brightness(1.15); }

.link-muted { color: var(--cream-2); font-size: 12px; font-weight: 500; }
.link-muted:hover { color: var(--cream); }

/* ----------------------------------------------------------------- chip */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 5px;
  background: var(--chip);
  color: var(--cream);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.1;
}
.chip--lg   { font-size: 18px; font-weight: 600; padding: 8px 20px; }
.chip--icon { font-size: 12.5px; font-weight: 600; padding: 8px 14px; }
.chip--icon img { width: auto; height: 13px; }
.chip__q { font-weight: 700; }

/* ----------------------------------------------------------- navigation */

/* The PSD navbar is not flat black: it carries a heavily darkened crop of the
   hero artwork, slightly brighter around the logo. The strip is 1920x91, so it
   renders 1:1 at the design width and simply crops from the center below it. */
.topbar {
  position: relative;
  z-index: 20;
  height: var(--nav-h);
  background: #120a07;
  border-bottom: 2px solid var(--gold-rule);
}

/* 1fr auto 1fr -> the middle column always stays centered on the page,
   while the actions (Create Account + language) stick to the right. */
.topbar__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  height: 100%;
  max-width: 1586px;   /* PSD: puts the right edge at 1737px */
  margin-inline: auto;
  padding-inline: 16px;
}

.topbar__menu {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  white-space: nowrap;
}

.topbar__link {
  color: var(--cream);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .18s ease;
}
.topbar__link:hover,
.topbar__link.is-active { color: var(--gold-a); }

.topbar__logo img { width: 105px; height: auto; }

.topbar__actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 17px;
}
.topbar__cta { min-height: 43px; padding: 0 22px; font-size: 16px; border-radius: 6px; }

.topbar__lang-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 39px;
  padding: 0 12px;
  border-radius: 6px;
  background: #1c110c;
  border: 1px solid #3a221a;
  color: var(--cream);
  font-size: 12.5px;
  font-weight: 600;
  font-stretch: 75%;    /* PSD used Open Sans Condensed */
  letter-spacing: .05em;
}
.topbar__lang-btn img { width: 20px; height: 20px; border-radius: 50%; }

.topbar__lang-menu {
  --bs-dropdown-bg: #1a100b;
  --bs-dropdown-border-color: #3a221a;
  --bs-dropdown-link-color: var(--cream-2);
  --bs-dropdown-link-hover-bg: #2a1712;
  --bs-dropdown-link-hover-color: var(--gold-a);
  --bs-dropdown-min-width: 6rem;
  --bs-dropdown-font-size: 12px;
}

.topbar__burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 38px;
  padding: 0 9px;
  border-radius: 6px;
  border: 1px solid #3a221a;
}
.topbar__burger span { display: block; height: 2px; background: var(--gold-a); border-radius: 2px; }

/* ----------------------------------------------------------------- hero */

/* The hero is as tall as the video's native height (1920x810), so nothing
   is cropped at 1920px. The fallback image is the video tag's poster
   (inc/header.php); only the base color behind it lives here. */
.hero {
  position: relative;
  height: 810px;
  margin-top: calc(-1 * var(--nav-h) - 2px);
  background: #100906;
  overflow: hidden;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  pointer-events: none;
}

/* -------------------------------------------------------------- banners */

/* -115px: with an 810px hero the banners still land on the PSD's y=695
   (810 - 115 = 695), so everything below keeps its original position. */
.banners {
  position: relative;
  z-index: 3;
  margin-top: -115px;
}

.banners__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.banner {
  position: relative;
  display: block;
  border: 1px solid #3a221a;
  border-radius: 10px;
  background: #22150f;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
  transition: border-color .2s ease, transform .2s ease;
}
.banner:hover { border-color: var(--gold-b); transform: translateY(-2px); }

.banner__art {
  position: relative;
  display: block;
  aspect-ratio: 404 / 241;
  overflow: hidden;
}
.banner__art img { width: 100%; height: 100%; object-fit: cover; }

.banner__date {
  position: absolute;
  top: 11px;
  right: 11px;
  padding: 4px 9px;
  border-radius: 4px;
  background: rgba(8, 8, 8, .88);
  color: var(--cream);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
}

.banner__title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 59px;
  padding: 8px 14px;
  color: var(--cream);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .4px;
  text-align: center;
  text-transform: uppercase;
}

/* --------------------------------------------------------- page layout */

.page {
  padding-top: 46px;
  padding-bottom: 40px;
}

.layout {
  display: grid;
  grid-template-columns: 362px minmax(0, 1fr);   /* PSD: 362 + 11 + 830 */
  gap: 11px;
  align-items: start;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---------------------------------------------------------------- panel */

.panel {
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--line);
  overflow: hidden;
}

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 55px;
  padding: 0 20px;
  /* PSD header: seal/dragon artwork on the left plus the hatch texture,
     with a thin gold rule underneath. The image is pinned left and the rest
     continues as a matching gradient -> no stretching or tiling when wide. */
  background:
    linear-gradient(180deg, var(--gold-rule2), var(--gold-rule2)) bottom left / 100% 1px no-repeat,
    var(--hatch),
    linear-gradient(180deg, #9d8056 0%, #9e8155 55%, #9e8055 100%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}

.panel__title {
  color: var(--cream);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

.panel__aside {
  color: var(--cream-3);
  font-size: 14px;
  font-weight: 300;
}
.panel__aside:hover { color: var(--cream); }

.panel__icon { opacity: .95; }

.panel__body { padding: 16px 20px 20px; }

/* ------------------------------------------------------------ login box */

.field { display: block; margin-bottom: 18px; }

.field__label {
  display: block;
  margin-bottom: 8px;
  color: var(--cream-2);
  font-size: 15px;
  font-weight: 400;
}

.field__box {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 45px;
  padding: 0 18px;
  border: 1px solid var(--line-warm);
  border-radius: 8px;
  background: var(--sunken);
  transition: border-color .18s ease;
}
.field__box:focus-within { border-color: var(--gold-a); }
.field__icon { flex: none; opacity: .85; }

.field__box input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  color: var(--cream);
  font-size: 13.5px;
  outline: none;
}
.field__box input::placeholder { color: var(--cream); opacity: .85; }

.loginform__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 26px;
}
.loginform__foot .btn-gold { min-width: 160px; font-size: 14.5px; font-weight: 500; }

/* ----------------------------------------------------------- statistics */

.statlist { display: flex; flex-direction: column; gap: 4px; }

.statlist__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 50px;
  padding: 0 17px;
  border-radius: 6px;
  border: 1px solid var(--line-warm);
  background: var(--sunken);
  color: var(--cream);
  font-size: 15px;
  font-weight: 600;
}
.statlist__row b { font-weight: 600; }

/* "Buy Coins" shortcut under the account stats */
.sidebar__buy { margin-top: 10px; gap: 8px; }
.sidebar__buy i { font-size: 13px; }

/* --------------------------------------------------------------- events */

.events__cover {
  height: 93px;
  background: #1c110c url("../img/event-cover.jpg") center / cover no-repeat;
}

.events__day {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.events__date {
  color: var(--cream);
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

.events__list { display: flex; flex-direction: column; gap: 6px; }

/* Event type marker - colour comes from Event_model::$types */
.events__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  vertical-align: middle;
}
.events__empty {
  padding: 18px 4px;
  color: var(--cream-2);
  font-size: 12.5px;
  text-align: center;
}

.events__item {
  padding: 11px 16px;
  border: 1px solid var(--line-warm);
  border-radius: 6px;
  background: var(--sunken);
}
.events__item b {
  display: block;
  color: var(--cream);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .2px;
}
.events__item span {
  display: block;
  margin-top: 3px;
  color: var(--cream-2);
  font-size: 13px;
  font-weight: 300;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 3px solid rgba(255, 255, 255, .07);
}
.pager__count { color: var(--cream); font-size: 13.5px; font-weight: 300; }

/* --------------------------------------------------- ranking (sidebar) */

.ranklist { padding: 14px 0 18px; }

.ranklist__row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 43px;
  padding: 0 19px;
}
.ranklist__row:nth-child(even) { background: var(--row-alt); }

.ranklist__crown  { flex: none; width: 22px; }
.ranklist__avatar {
  flex: none;
  width: 31px;
  border: 1px solid #7d5f1c;
  border-radius: 6px;
  background: #1f130e;
}
.ranklist__empire { flex: none; width: 31px; }

.ranklist__name {
  flex: 1;
  min-width: 0;
  color: var(--cream);
  font-family: var(--font-alt);
  font-size: 13.5px;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranklist__sep {
  flex: none;
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background: var(--gold-b);
}

.ranklist__lvl {
  flex: none;
  color: var(--cream);
  font-family: var(--font-alt);
  font-size: 14px;
  font-weight: 400;
}

/* -------------------------------------------------------- right column */

.newsbox {
  padding: 30px 16px 40px;
  border-radius: var(--radius);
  background: var(--panel-alt);
  border: 1px solid var(--line);
}

.panelcard {
  padding: 22px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--line-soft);
}

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

.tabs {
  display: flex;
  justify-content: center;
  gap: 17px;
  margin-bottom: 30px;
}

.tab {
  flex: 0 1 130px;
  min-width: 0;
  height: 54px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--line-warm);
  background: var(--sunken);
  color: var(--cream);
  font-size: 16px;
  font-weight: 600;
  transition: filter .18s ease, border-color .18s ease;
}
/* PSD: tab label is Open Sans SemiBold */
.tab:hover { border-color: var(--gold-a); }
.tab.is-active {
  border-color: transparent;
  background: var(--hatch), linear-gradient(90deg, var(--gold-a), var(--gold-c));
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

.tabs--wide { justify-content: flex-start; gap: 8px; margin-bottom: 22px; }
.tabs--wide .tab { flex: 1 1 0; height: 51px; }

.tab--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 16px;
}
.tab--icon img { flex: none; width: 25px; height: 25px; }

/* ----------------------------------------------------------------- post */

.post {
  padding: 28px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--line-soft);
}
.post + .post { margin-top: 12px; }

.post__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.post__ago { color: var(--cream-2); font-size: 12.5px; font-weight: 300; white-space: nowrap; }

/* PSD: 14px body, 18.4px line spacing -> 1.31 */
.post__body { color: var(--cream); font-size: 14px; line-height: 1.31; }

.post__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 711 / 400;
  margin: 22px 0;
  border: 1px solid #3a221a;
  border-radius: 4px;
  background: #180f0b;
  color: var(--cream);
  font-size: 17px;
  font-weight: 700;
  overflow: hidden;
}
.post__media img { width: 100%; height: 100%; object-fit: cover; }

/* "Load More" under the news list */
.newsmore { display: flex; justify-content: center; margin-top: 22px; }
.newsmore .btn-gold { min-width: 170px; }

/* The media block used to provide this gap; the cards render content only now. */
.post__content + .btn-gold { margin-top: 22px; }

.post__cat {
  margin-bottom: 14px;
  color: var(--gold-a);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Post bodies are raw HTML written in the admin panel, so the elements an
   editor emits are styled here rather than in the markup. */
.post__content { line-height: 1.55; }
.post__content > * + * { margin-top: 14px; }
.post__content h2,
.post__content h3,
.post__content h4 {
  margin: 26px 0 0;
  font-family: var(--font-disp);
  font-size: 17px;
  font-weight: 700;
  color: var(--gold-a);
}
.post__content ul,
.post__content ol { padding-left: 20px; list-style: revert; }
.post__content li + li { margin-top: 6px; }
.post__content a { color: var(--gold-a); text-decoration: underline; }
.post__content a:hover { color: var(--gold-c); }
.post__content strong, .post__content b { font-weight: 700; }
.post__content blockquote {
  padding: 10px 16px;
  border-left: 3px solid var(--gold-b);
  background: var(--sunken);
  color: var(--cream-2);
}
.post__content code, .post__content pre {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  background: var(--sunken);
  border-radius: 4px;
}
.post__content code { padding: 2px 6px; }
.post__content pre { padding: 14px; overflow-x: auto; }
.post__content img,
.post__content video { max-width: 100%; height: auto; border-radius: 6px; }
.post__content iframe { max-width: 100%; border: 0; border-radius: 6px; }
/* A bare iframe with no wrapper still needs a sane box */
.post__content > iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; }
/* Wide tables scroll inside the card instead of stretching the page */
.post__content table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.post__content th,
.post__content td { padding: 8px 12px; border: 1px solid var(--line-soft); text-align: left; }
.post__content th { background: var(--sunken); font-weight: 600; }

/* ------------------------------------------------------- register form */

/* Small helper line under an optional field (promoter code). */
.regfield__hint {
  margin-top: 6px;
  color: var(--cream-2);
  font-size: 11.5px;
  line-height: 1.4;
}

/* Password rules under the password field. forms.js sets is-ok / is-bad on each
   item and on the box: neutral until typing, red for unmet, green once met. */
.pwreq {
  --pw-ok: #7fcf86;
  --pw-bad: #e8836f;
  margin-top: 10px;
  padding: 12px 14px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0)), var(--panel);
  transition: border-color .25s ease, background-color .25s ease;
}
.pwreq.is-bad {
  border-color: rgba(232, 131, 111, .35);
  background: linear-gradient(180deg, rgba(232, 131, 111, .10), rgba(232, 131, 111, .03)), var(--panel);
}
.pwreq.is-ok {
  border-color: rgba(127, 207, 134, .35);
  background: linear-gradient(180deg, rgba(127, 207, 134, .09), rgba(127, 207, 134, .02)), var(--panel);
}

.pwreq__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--cream);
  font-size: 12.5px;
  font-weight: 700;
}
.pwreq__title i { color: var(--gold-a); font-size: 12px; transition: color .25s ease; }
.pwreq.is-bad .pwreq__title i { color: var(--pw-bad); }
.pwreq.is-ok .pwreq__title i { color: var(--pw-ok); }

.pwreq__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pwreq__item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 6px;
  background: rgba(255, 255, 255, .04);
  color: var(--cream-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.pwreq__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--chip);
  color: var(--cream-2);
  font-size: 9px;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.pwreq__icon::before { content: "\f111"; font-family: "Font Awesome 6 Free"; font-weight: 400; font-size: 7px; }

.pwreq__item.is-bad {
  border-color: rgba(232, 131, 111, .22);
  background: rgba(232, 131, 111, .08);
  color: #f1b3a6;
}
.pwreq__item.is-bad .pwreq__icon { background: var(--pw-bad); color: #2a1410; }
.pwreq__item.is-bad .pwreq__icon::before { content: "\f00d"; font-weight: 900; font-size: 9px; }

.pwreq__item.is-ok {
  border-color: rgba(127, 207, 134, .25);
  background: rgba(127, 207, 134, .08);
  color: #b5e6b9;
}
.pwreq__item.is-ok .pwreq__icon { background: var(--pw-ok); color: #10240f; transform: scale(1.08); }
.pwreq__item.is-ok .pwreq__icon::before { content: "\f00c"; font-weight: 900; font-size: 9px; }

@media (max-width: 479.98px) {
  .pwreq__list { grid-template-columns: 1fr; }
}

.regform { margin-top: 22px; }
.regfield + .regfield { margin-top: 12px; }
.regfield .chip { margin-bottom: 7px; }

.input {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 20px;
  border: 1px solid var(--line-warm);
  border-radius: 6px;
  background: var(--sunken);
  color: var(--cream);
  font-size: 13px;
  outline: none;
  transition: border-color .18s ease;
}
.input:focus { border-color: var(--gold-a); }
.input::placeholder { color: var(--cream); opacity: .9; }

.input--select {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23fdefda' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 12px 8px;
}
.input--select option { background: #1a100b; color: var(--cream); }

.regform__foot { display: flex; justify-content: center; margin-top: 26px; }

/* ------------------------------------------------------- download tiles */

.dltiles { margin-top: 22px; }

.dltile {
  height: 100%;
  border: 1px solid var(--line-warm);
  border-radius: var(--radius);
  background: var(--sunken);
  overflow: hidden;
  transition: border-color .18s ease;
}
.dltile:hover { border-color: var(--gold-a); }

.dltile__head {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 89px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line-warm);
  background: #140c09 url("../img/dl-tile-head.jpg") center / cover no-repeat;
  color: var(--cream);
  font-size: 22px;
  font-weight: 600;
  text-align: center;
}

.dltile__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 83px;
  padding: 0 16px;
}

/* --------------------------------------------------------- rank table */

.table-wrap { overflow-x: auto; }

/* ------------------------------------------------------- partner cashback */

.ta-r { text-align: right; }

.refcard + .refcard { margin-top: 12px; }

.refcard__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.refcard__title {
  font-family: var(--font-disp);
  font-size: 21px;
  font-weight: 700;
  color: var(--cream);
}
.refcard__title--sm { font-size: 17px; color: var(--gold-a); }
.refcard__sub { margin-top: 4px; color: var(--cream-2); font-size: 12.5px; }

/* Sag ustteki Aktif / Pasif rozeti */
.refbadge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(64, 200, 120, .35);
  background: rgba(64, 200, 120, .12);
  color: #4fd18b;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.refbadge--off {
  border-color: rgba(220, 90, 90, .35);
  background: rgba(220, 90, 90, .12);
  color: #e07575;
}

/* Kod / karakter / oran / bekleyen kutulari */
.refgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 10px;
  margin-top: 22px;
}
.refbox {
  padding: 15px 18px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--sunken);
}
.refbox__label {
  display: block;
  margin-bottom: 8px;
  color: var(--cream-2);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.refbox__value { font-size: 19px; font-weight: 700; color: var(--cream); }
.refbox__value--code { color: var(--gold-a); letter-spacing: .04em; }
.refbox__value--good { color: #4fd18b; }

/* Referans linki + kopyala */
.reflink { margin-top: 18px; }
.reflink__row { display: flex; flex-wrap: wrap; gap: 10px; }
.reflink__input {
  flex: 1 1 260px;
  min-width: 0;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  cursor: text;
}
.reflink__btn { flex: 0 0 auto; gap: 8px; min-height: 44px; font-size: 13px; }

/* Altin butonun sade kardesi - ikincil eylemler icin */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 7px;
  border: 1px solid var(--gold-b);
  background: transparent;
  color: var(--gold-a);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.btn-ghost:hover { background: rgba(176, 142, 86, .15); }
.btn-ghost.is-copied { border-color: #4fd18b; color: #4fd18b; }

/* Ikonlu istatistik kutulari */
.statgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.statbox {
  padding: 16px 18px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--sunken);
}
.statbox__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
  border-radius: 8px;
  border: 1px solid var(--line-warm);
  background: #1c110c;
  color: var(--gold-a);
  font-size: 14px;
}
.statbox__value { display: block; font-size: 22px; font-weight: 700; color: var(--cream); }
.statbox__label { display: block; margin-top: 2px; color: var(--cream-2); font-size: 11.5px; }

.cbbalance__hint { margin-top: 14px; color: var(--cream-2); font-size: 11.5px; }

.cbsection { margin-top: 30px; }
.cbtable { min-width: 560px; }
.cbtable__gain { color: var(--gold-a); font-weight: 600; }

.refcard .panel__empty { margin: 18px 0; }
.refcard > .btn-gold { margin-top: 22px; }


.ranktable {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
}

.ranktable th {
  padding: 0 0 14px;
  color: var(--cream-2);
  font-size: 12px;
  font-weight: 400;
  text-align: left;
}

.ranktable td {
  height: 53px;
  padding: 0;
  color: var(--cream);
  font-size: 12.5px;
  font-weight: 600;
  vertical-align: middle;
}

.ranktable tbody tr:nth-child(even) { background: rgba(255, 255, 255, .035); }

.ranktable .c-rank   { width: 7%;  }
.ranktable .c-name   { width: 20%; }
.ranktable .c-empire { width: 17%; }
.ranktable .c-guild  { width: 19%; }
.ranktable .c-race   { width: 22%; }
.ranktable .c-level  { width: 15%; text-align: right; padding-right: 6px; }

.rankno {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2a1712;
  font-size: 11px;
  font-weight: 600;
}

.face {
  display: block;
  width: 42px;
  height: 41px;
  border-radius: 6px;
  border: 1px solid #5a3f22;
  background: #1f130e;
  overflow: hidden;
}
.face img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------- footer */

.footer {
  position: relative;
  padding: 40px 0 26px;
  background: #160d0a;
}

/* The brand sits in a 1fr track, so a wide middle column (the nav grows with
   longer localised labels) squeezed it -- and `img { max-width: 100% }` then
   scaled the logo down with it, differently in every language. The columns are
   pinned to 245px, the width the reference layout settles on, so the logo is
   the same size everywhere and the nav gets the remaining room. */
.footer__top {
  display: grid;
  grid-template-columns: 245px auto 245px;
  align-items: start;
  gap: 24px;
}

.footer__brand { min-width: 245px; }
.footer__logo img { width: 245px; }

.footer__copy {
  margin-top: 8px;
  color: var(--cream-2);
  font-size: 12px;
}

.footer__center { text-align: center; padding-top: 36px; }

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 34px;
  margin-bottom: 26px;
}
.footer__nav a {
  color: var(--cream);
  font-family: var(--font-disp);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: color .18s ease;
}
.footer__nav a:hover { color: var(--gold-a); }

.footer__social { display: flex; justify-content: center; gap: 15px; }
.footer__social img { width: 57px; height: 57px; transition: filter .18s ease, transform .18s ease; }
.footer__social a:hover img { filter: brightness(1.2); transform: translateY(-2px); }

/* Backlink ortaklari. Logolar cok farkli en-boy oranlarinda geldigi icin
   genislik degil YUKSEKLIK sabitleniyor - hepsi ayni optik agirlikta dursun. */
.footer__partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 26px;
  margin-top: 26px;
}
.partners__item {
  display: inline-flex;
  align-items: center;
  opacity: .78;
  transition: opacity .18s ease, transform .18s ease;
}
.partners__item:hover { opacity: 1; transform: translateY(-2px); }
.partners__item img {
  width: auto;
  height: auto;
  max-height: 30px;
  max-width: 190px;
}
/* Kare logolar ayni yukseklikte daha iri gorunur, biraz kisaliyorlar */
.partners__item .partners__logo--icon { max-height: 26px; }

/* ===================================================== responsive ===== */

/* The navbar uses a 1fr auto 1fr grid, so the actions column can never be
   wider than the empty column opposite it. Below ~1500px the full-size menu
   squeezes that column, so the nav is stepped down before it can break. */
@media (max-width: 1499.98px) {
  .topbar__menu { gap: 22px; }
  .topbar__link { font-size: 14px; }
  .topbar__logo img { width: 92px; }
  .topbar__cta { font-size: 14px; padding: 0 18px; }
}

@media (max-width: 1279.98px) {
  .topbar__menu { gap: 16px; }
  .topbar__link { font-size: 13px; }
  .topbar__logo img { width: 84px; }
  .topbar__actions { gap: 10px; }
  .topbar__cta { font-size: 13px; padding: 0 14px; }
}

@media (max-width: 1199.98px) {
  :root { --shell: 100%; }
  .layout { grid-template-columns: 320px minmax(0, 1fr); }
  .hero { height: 62vw; }
  .banners { margin-top: -15vw; }
}

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

  .topbar__inner { grid-template-columns: auto 1fr auto; gap: 12px; }
  .topbar__burger { grid-column: 1; }
  .topbar__logo   { grid-column: 2; justify-self: start; }
  .topbar__menu {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 30;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0;
    background: #120a07;
    border-bottom: 2px solid var(--gold-rule);
  }
  .topbar__menu .topbar__link { padding: 13px 22px; }
  .topbar__logo img { width: 78px; }
  .topbar__cta { padding: 0 16px; font-size: 14px; min-height: 38px; }

  .hero { height: 58vw; min-height: 300px; }
  .banners { margin-top: -14vw; }

  .layout { grid-template-columns: minmax(0, 1fr); }
  .page { padding-top: 34px; }

  .tabs { flex-wrap: wrap; gap: 10px; }
  .tabs--wide { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
  .tabs--wide .tab { flex: 0 0 150px; }

  .footer__top { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .footer__brand { min-width: 0; }
  .footer__center { padding-top: 0; order: -1; }
  .footer__logo img { width: 220px; }
}

@media (max-width: 767.98px) {
  .banners__row { grid-template-columns: 1fr; gap: 12px; }
  .banners { margin-top: -60px; }
  .hero { height: 300px; }

  .newsbox { padding: 18px 12px 26px; }
  .panelcard, .post { padding: 16px; }
  .post__body { font-size: 12px; }
  .post__media { margin: 16px 0; font-size: 15px; }

  .tab { flex: 1 1 calc(50% - 5px); height: 46px; }

  .topbar__lang span { display: none; }
  .footer__nav { gap: 18px; }
  .footer__nav a { font-size: 14px; }
}

@media (max-width: 479.98px) {
  .loginform__foot { flex-direction: column; align-items: stretch; }
  .loginform__foot .btn-gold { width: 100%; }
  .btn-gold--lg { width: 100%; font-size: 17px; }
  .ranklist__row { gap: 8px; padding: 0 12px; }
}

/* ==========================================================================
   CMS layer - components the CodeIgniter views need on top of the design
   system above (panel pages, forms, tables, alerts).
   ========================================================================== */

/* ---------------------------------------------------------------- sidebar */

.panel__body--tight { padding-top: 0; }
.panel__empty { color: var(--cream-2); font-size: 13px; text-align: center; }

.loginform__alt { margin-top: 12px; text-align: right; }

.ranklist__no {
  flex: none;
  width: 22px;
  color: var(--cream-2);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

/* Turnstile ships a fixed-size iframe; scale it down to the sidebar width */
.turnstile-slot { height: 32px; overflow: hidden; margin-bottom: 4px; }
.turnstile-slot > div { transform: scale(.42); transform-origin: 0 0; }

.w-100 { width: 100%; }

/* ------------------------------------------------------------ panel cards */

.panelcard + .panelcard { margin-top: 12px; }

.panelcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.section-title {
  margin: 26px 0 12px;
  color: var(--cream);
  font-size: 16px;
  font-weight: 600;
}

/* ------------------------------------------------------------ stat tiles */

.tilerow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid var(--line-warm);
  border-radius: 6px;
  background: var(--sunken);
}
.tile__label { color: var(--cream-2); font-size: 12px; }
.tile__value { color: var(--cream); font-size: 19px; font-weight: 700; line-height: 1; }
.tile__value--gold { color: var(--gold-a); }
.tile__value.is-ok  { color: #86c98a; }
.tile__value.is-bad { color: #e08585; }

/* -------------------------------------------------------- account details */

.datalist { display: flex; flex-direction: column; gap: 4px; }

.datalist__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 8px 17px;
  border-radius: 6px;
  background: var(--sunken);
}
.datalist__row:nth-child(even) { background: #1a100c; }

.datalist__label { color: var(--cream-2); font-size: 13px; }
.datalist__value {
  color: var(--cream);
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}

/* ----------------------------------------------------------- action cards */

.actiongrid { margin-top: 4px; }

.actioncard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  height: 100%;
  padding: 18px;
  border: 1px solid var(--line-warm);
  border-radius: var(--radius);
  background: var(--sunken);
  transition: border-color .18s ease;
}
.actioncard:hover { border-color: var(--gold-a); }

.actioncard__icon { color: var(--gold-a); font-size: 20px; }
.actioncard__desc {
  flex: 1;
  color: var(--cream-2);
  font-size: 12.5px;
  line-height: 1.45;
}
.actioncard__btn { align-self: stretch; }
.actioncard__btn--primary { min-height: 42px; font-size: 13px; }

/* ----------------------------------------------------------- form layout */

.formrow + .formrow { margin-top: 14px; }
.formrow__label {
  display: block;
  margin-bottom: 7px;
  color: var(--cream-2);
  font-size: 13px;
}
.formhint { margin-top: 8px; color: var(--cream-2); font-size: 12px; line-height: 1.5; }

.note {
  padding: 14px 16px;
  border-left: 3px solid var(--gold-b);
  border-radius: 4px;
  background: rgba(176, 142, 86, .10);
  color: var(--cream-2);
  font-size: 12.5px;
  line-height: 1.55;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 767.98px) {
  .tilerow { grid-template-columns: minmax(0, 1fr); }
  .datalist__row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .datalist__value { text-align: left; }
}

/* --------------------------------------------------------- home features */

.featurelist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
.featurelist li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--cream);
  font-size: 13px;
  line-height: 1.45;
}
.featurelist i { flex: none; margin-top: 3px; color: var(--gold-a); font-size: 11px; }

.post__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.post__cta p { color: var(--cream-2); font-size: 13px; }

@media (max-width: 767.98px) {
  .featurelist { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------- sub pages */

.pagehead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.backlink { display: inline-flex; align-items: center; gap: 7px; }

.formfoot { display: flex; justify-content: center; gap: 12px; margin-top: 24px; }
.formfoot .btn-gold { min-width: 200px; }

.input--upper { text-transform: uppercase; letter-spacing: .08em; }

/* Turnstile inside a page form (wider than the sidebar one) */
.turnstile-page { display: flex; justify-content: center; margin-top: 18px; }

/* empty / message states: 404, feature disabled, register success */
.emptystate { padding: 40px 20px; text-align: center; }
.emptystate__icon { margin-bottom: 16px; color: var(--gold-a); font-size: 46px; }
.emptystate__title { margin-bottom: 10px; color: var(--cream); font-size: 22px; font-weight: 700; }
.emptystate__text { max-width: 560px; margin: 0 auto 22px; color: var(--cream-2); font-size: 13.5px; line-height: 1.6; }

/* long legal text (terms) */
.longtext { color: var(--cream); font-size: 13px; line-height: 1.7; }
.longtext h1, .longtext h2, .longtext h3 { margin: 22px 0 10px; color: var(--cream); font-size: 16px; }
.longtext p { margin-bottom: 12px; }
.longtext ul, .longtext ol { margin: 0 0 12px 20px; list-style: disc; }
.longtext li { margin-bottom: 6px; }
.longtext a { color: var(--gold-a); text-decoration: underline; }

/* payment provider tiles (load_ep) */
.paygrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.paytile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px 18px;
  border: 1px solid var(--line-warm);
  border-radius: var(--radius);
  background: var(--sunken);
  text-align: center;
  transition: border-color .18s ease, transform .18s ease;
}
.paytile:hover { border-color: var(--gold-a); transform: translateY(-2px); }
.paytile img { max-height: 54px; width: auto; }
.paytile__name { color: var(--cream); font-size: 15px; font-weight: 600; }

/* ranking tabs reuse .tabs--wide; table reuses .ranktable */
.ranktable .c-guild-name { width: 34%; }
.rank-pager { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }

/* download page requirement list */
.reqlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
.reqlist li { display: flex; gap: 9px; color: var(--cream); font-size: 13px; line-height: 1.5; }
.reqlist i { flex: none; margin-top: 3px; color: var(--gold-a); font-size: 11px; }

/* event calendar */
.eventgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.eventcard {
  display: flex;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line-warm);
  border-radius: var(--radius);
  background: var(--sunken);
}
.eventcard img { flex: none; width: 46px; height: 46px; object-fit: contain; }
.eventcard__name { color: var(--cream); font-size: 14px; font-weight: 700; }
.eventcard__time { margin-top: 4px; color: var(--cream-2); font-size: 12px; }

@media (max-width: 767.98px) {
  .reqlist { grid-template-columns: minmax(0, 1fr); }
  .formfoot .btn-gold { width: 100%; min-width: 0; }
}

/* -------------------------------------------------------- ranking podium */

.podium { margin-top: 6px; }

.podiumcard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 22px 16px 18px;
  border: 1px solid var(--line-warm);
  border-radius: var(--radius);
  background: var(--hatch), linear-gradient(180deg, #22150f, var(--sunken));
}
.podiumcard--1 { border-color: var(--gold-a); }
.podiumcard__crown { width: 30px; height: auto; }
.podiumcard__job   { width: 76px; height: auto; }
.podiumcard__name  { color: var(--cream); font-size: 15px; font-weight: 700; }
.podiumcard__meta  { color: var(--cream-2); font-size: 12px; }
.podiumcard__coin  { width: 34px; height: auto; margin-top: 2px; }

/* Character ranking: no guild column, but exp is shown. Every column is left
   aligned so header and value line up in one vertical run - mixing left and
   right alignment made Level and EXP read as a single column. */
.ranktable--char .c-rank   { width: 7%;  }
.ranktable--char .c-name   { width: 25%; }
.ranktable--char .c-empire { width: 12%; }
.ranktable--char .c-race   { width: 14%; }
.ranktable--char .c-level  { width: 14%; text-align: left; padding-right: 0; }
.ranktable--char .c-exp    { width: 28%; text-align: left; padding-right: 6px; }

/* ==========================================================================
   Dragon Coin purchase page (panel/load_ep)
   ========================================================================== */

.paylayout {
  display: grid;
  grid-template-columns: 285px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

/* ------------------------------------------------- left: method selector */

.paymethods {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sunken);
}
.paymethods__title {
  margin-bottom: 12px;
  color: var(--cream);
  font-size: 15px;
  font-weight: 700;
}

.paymethod {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #180f0b;
  text-align: left;
  transition: border-color .18s ease, background .18s ease;
}
.paymethod + .paymethod { margin-top: 8px; }
.paymethod:hover { border-color: var(--line-warm); }
.paymethod.is-active { border-color: var(--gold-a); background: #2a1712; }

.paymethod__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 5px;
  background: #140c09;
  color: var(--cream-2);
  font-size: 15px;
}
.paymethod.is-active .paymethod__icon { color: var(--gold-a); }

.paymethod__text { flex: 1; min-width: 0; }
.paymethod__text b     { display: block; color: var(--cream); font-size: 13px; font-weight: 600; line-height: 1.3; }
.paymethod__text small { display: block; color: var(--cream-2); font-size: 12px; }

/* Rozet akista yer kaplarsa uzun yontem adlari kotu kiriliyor; ust sag koseye
   sabitleyip metne tam genislik biraktik. */
.paymethod__bonus {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  border-radius: 20px;
  background: #1f7a4d;
  color: var(--cream);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.5;
}
.paymethod:has(.paymethod__bonus) .paymethod__text b { padding-right: 44px; }

/* ---------------------------------------------------- right: the panels */

.paypanels {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sunken);
}

.paypanel { display: none; }
.paypanel.is-active { display: block; }

.paypanel__title { margin-bottom: 8px; color: var(--cream); font-size: 16px; font-weight: 700; }
.paypanel__desc  { margin-bottom: 18px; color: var(--cream-2); font-size: 13px; line-height: 1.5; }

/* ------------------------------------------------------------- packages */

.pkggrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 10px;
}

.pkg {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #180f0b;
  transition: border-color .18s ease;
}
.pkg:hover { border-color: var(--line-warm); }
.pkg--hot  { border-color: var(--gold-b); }

.pkg__hot {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 10px;
  border-radius: 20px;
  background: linear-gradient(90deg, #c8622f, #e08a3c);
  color: var(--cream);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
}

.pkg__head { display: flex; align-items: flex-start; gap: 10px; }
.pkg__icon { flex: none; margin-top: 3px; color: var(--gold-a); font-size: 17px; }
.pkg__dc    { display: block; color: var(--cream); font-size: 15px; font-weight: 700; line-height: 1.2; }
.pkg__split { display: block; color: var(--cream-2); font-size: 11.5px; }

.pkg__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.pkg__price { color: var(--cream); font-size: 13.5px; font-weight: 700; }
.pkg__buy   { color: var(--cream-2); font-size: 12px; }
.pkg__buy:hover { color: var(--gold-a); text-decoration: underline; }

/* --------------------------------------------------------- redeem block */

.redeem {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid var(--line-warm);
  border-radius: var(--radius);
  background: #180f0b;
}
.redeem__label { display: block; margin-bottom: 8px; color: var(--cream); font-size: 13.5px; font-weight: 600; }

.redeem__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.redeem__hint { color: var(--cream-2); font-size: 12.5px; }

@media (max-width: 991.98px) {
  .paylayout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
  .pkggrid { grid-template-columns: minmax(0, 1fr); }
  .redeem__foot { flex-direction: column; align-items: stretch; }
  .redeem__foot .btn-gold { width: 100%; }
}

/* ------------------------------------------------------- shop link banner */

.shopcard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--line-warm);
  border-radius: var(--radius);
  background: var(--hatch), linear-gradient(180deg, #22150f, #1a100c);
  transition: border-color .18s ease, transform .18s ease;
}
.shopcard:hover { border-color: var(--gold-a); transform: translateY(-1px); }

/* min-width:0 olmadan uzun baslik butonu asagi itiyor */
.shopcard__text       { min-width: 0; }
.shopcard__text b     { display: block; color: var(--gold-a); font-size: 15px; font-weight: 700; line-height: 1.3; }
.shopcard__text small { display: block; margin-top: 4px; color: var(--cream-2); font-size: 12.5px; }

/* Ic ice <a> olamaz; buton gorunumu span uzerinde */
.shopcard__btn { flex: none; pointer-events: none; white-space: nowrap; }

/* --------------------------------------------------- clickable package card */

.pkg__head { display: flex; align-items: flex-start; gap: 10px; }
.pkg__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.pkg--link { cursor: pointer; }
.pkg--link:hover { border-color: var(--gold-a); }
.pkg--link .pkg__buy { display: inline-flex; align-items: center; gap: 6px; }
.pkg--link:hover .pkg__buy { color: var(--gold-a); }
.pkg__buy i { font-size: 10px; }

@media (max-width: 575.98px) {
  .shopcard { flex-direction: column; align-items: stretch; }
  .shopcard__btn { justify-content: center; }
}

/* ==========================================================================
   ERYON SKIN
   Everything above is the Eryon layout re-pointed at Eryon tokens; the rules
   below give the pieces the presentation's own look (eryon-presentation/):
   the painted ink courtyard behind the page, Solmoe titles, crimson cut-corner
   CTAs, brass hairlines, the cloud pattern and the torn ink edge.
   ========================================================================== */

html { scrollbar-color: rgb(var(--brass-400-rgb) / .42) transparent; }
html, body { cursor: var(--cursor); }
:where(a[href], button, [role="button"], summary, label[for], select) { cursor: var(--cursor-hover); }
:where(input:not([type="button"], [type="submit"], [type="checkbox"], [type="radio"]), textarea) { cursor: text; }
::selection { background: rgb(var(--brass-400-rgb) / .45); color: var(--cream); }

body {
  background:
    linear-gradient(180deg, rgb(var(--bg-900-rgb) / .30), rgb(var(--bg-900-rgb) / .80) 70%, var(--bg-900)),
    url("../img/scene-courtyard-1920.webp") center top / cover no-repeat fixed,
    var(--bg-900);
  color: var(--cream);
  font: 400 14.5px/1.6 var(--font);
}

h1, h2, h3, .panel__title, .refcard__title, .emptystate__title, .paypanel__title, .paymethods__title {
  font-family: var(--font-disp);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------- buttons */

/* Primary CTA: the presentation's crimson cut-corner button. clip-path drops
   box-shadow, so the lift is a drop-shadow filter. */
.btn-gold {
  border-radius: 0;
  border: 1px solid var(--crimson-600);
  background:
    linear-gradient(180deg, rgb(255 255 255 / .08), transparent 55%),
    var(--crimson-500);
  color: var(--cream);
  font-family: var(--font-disp);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgb(0 0 0 / .45);
  box-shadow: inset 0 1px 0 rgb(227 192 106 / .25);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  filter: drop-shadow(0 6px 14px rgb(0 0 0 / .55));
  transition: background .16s ease, transform .16s ease;
}
.btn-gold:hover { filter: drop-shadow(0 6px 14px rgb(0 0 0 / .55)); background: var(--crimson-600); transform: translateY(-1px); }
.btn-gold--sm { --cut: 8px; font-size: 11.5px; letter-spacing: .12em; }
.btn-gold--lg, .btn-gold--icon { font-size: 16px; font-weight: 600; }

.btn-ghost {
  border-radius: var(--radius);
  border-color: var(--brass-400);
  color: var(--brass-300);
  font-family: var(--font-disp);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.btn-ghost:hover { background: rgb(var(--brass-400-rgb) / .14); border-color: var(--brass-300); }

.squarebtn {
  border: 1px solid var(--bg-600);
  background: var(--bg-800);
  color: var(--brass-300);
}
.squarebtn:hover { filter: none; border-color: var(--brass-400); background: var(--bg-700); }

.link-muted { color: var(--text-secondary); }
.link-muted:hover { color: var(--brass-300); }

.chip { background: var(--bg-700); border: 1px solid var(--bg-600); color: var(--cream); font-family: var(--font-disp); font-weight: 600; letter-spacing: .05em; }

/* ---------------------------------------------------------- topbar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgb(var(--bg-900-rgb) / .88);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bg-600);
  box-shadow: 0 1px 0 rgb(var(--brass-400-rgb) / .14), 0 10px 30px rgb(0 0 0 / .5);
}
.topbar__link {
  color: var(--text-secondary);
  font-family: var(--font-disp);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .12em;
}
.topbar__link:hover, .topbar__link.is-active { color: var(--brass-300); }
.topbar__link.is-active { text-shadow: 0 0 14px rgb(var(--brass-400-rgb) / .45); }
.topbar__logo img { width: auto; height: 46px; filter: drop-shadow(0 3px 8px rgb(0 0 0 / .6)); }
.topbar__cta { font-size: 13px; min-height: 42px; }

.topbar__lang-btn {
  border-radius: var(--radius);
  background: var(--bg-800);
  border: 1px solid var(--bg-600);
  color: var(--cream);
  font-family: var(--font-disp);
  font-stretch: normal;
}
.topbar__lang-btn:hover { border-color: var(--brass-400); }
.topbar__lang-menu {
  --bs-dropdown-bg: var(--bg-800);
  --bs-dropdown-border-color: var(--bg-600);
  --bs-dropdown-link-color: var(--text-secondary);
  --bs-dropdown-link-hover-bg: var(--bg-700);
  --bs-dropdown-link-hover-color: var(--brass-300);
  --bs-dropdown-link-active-bg: var(--crimson-500);
  --bs-dropdown-link-active-color: var(--cream);
}
.topbar__burger { border-color: var(--bg-600); background: var(--bg-800); }
.topbar__burger span { background: var(--brass-300); }

/* ------------------------------------------------------------ hero */

/* Key art + veil + wordmark, closed by the presentation's torn ink edge. */
.hero {
  height: auto;
  min-height: 640px;
  margin-top: calc(-1 * var(--nav-h) - 1px);
  display: grid;
  place-items: center;
  padding: calc(var(--nav-h) + 40px) 16px 190px;
  background: var(--bg-900);
  isolation: isolate;
}
.hero__bg {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
}
.hero__veil {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(58% 40% at 50% 47%, rgb(var(--bg-900-rgb) / .62) 0%, rgb(var(--bg-900-rgb) / .30) 56%, transparent 80%),
    linear-gradient(180deg, rgb(var(--bg-900-rgb) / .80) 0%, rgb(var(--bg-900-rgb) / .30) 30%, rgb(var(--bg-900-rgb) / .48) 62%, rgb(var(--bg-900-rgb) / .94) 100%),
    radial-gradient(120% 78% at 50% 50%, transparent 38%, rgb(var(--bg-900-rgb) / .58) 100%);
}
/* the ink edge: the hero's foot is cut away along the presentation's torn
   brush line (edge-ink-cut.png is edge-ink.png with its alpha inverted), so
   the page's own painted ground shows through the tear */
.hero {
  --edge-h: clamp(48px, 8vw, 128px);
  -webkit-mask:
    linear-gradient(#000, #000) top / 100% calc(100% - var(--edge-h) + 1px) no-repeat,
    url("../img/edge-ink-cut.png") bottom / 100% var(--edge-h) no-repeat;
          mask:
    linear-gradient(#000, #000) top / 100% calc(100% - var(--edge-h) + 1px) no-repeat,
    url("../img/edge-ink-cut.png") bottom / 100% var(--edge-h) no-repeat;
}
.hero__inner { text-align: center; }
.hero__title { margin: 0; font-size: 0; line-height: 0; }
.hero__logo {
  width: min(68vw, 500px); height: auto; margin-inline: auto;
  filter: drop-shadow(0 6px 18px rgb(0 0 0 / .7)) drop-shadow(0 2px 3px rgb(0 0 0 / .5));
}
.hero__eyebrow {
  margin-top: 26px;
  color: var(--rust-250);
  font-family: var(--font-disp);
  font-size: clamp(16px, 1.4vw, 22px);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-shadow: 0 3px 10px rgb(153 58 31 / .75);
}
.hero__eyebrow span { margin-right: .4em; letter-spacing: 0; }
.hero__rule {
  width: min(344px, 70vw); height: 1px; margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, var(--brass-400), transparent);
}
.hero__sub {
  max-width: 34rem; margin: 18px auto 0;
  color: var(--cream);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.6;
  text-shadow: 0 2px 8px rgb(0 0 0 / .7);
}
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 28px; }
.hero__cta .btn-ghost { min-height: 52px; padding: 0 30px; background: rgb(var(--bg-900-rgb) / .55); }

/* ---------------------------------------------------------- banners */

.banners { margin-top: -150px; }
.banner {
  border: 1px solid var(--bg-600);
  border-radius: var(--radius);
  background: var(--bg-800);
  box-shadow: 0 2px 4px rgb(0 0 0 / .4), 0 14px 34px rgb(0 0 0 / .6);
}
.banner:hover { border-color: var(--brass-400); }
.banner__date { background: rgb(var(--bg-900-rgb) / .88); color: var(--brass-300); border: 1px solid rgb(var(--brass-400-rgb) / .3); }
.banner__title { font-family: var(--font-disp); font-weight: 600; letter-spacing: .08em; color: var(--cream); border-top: 1px solid rgb(var(--brass-400-rgb) / .2); }

/* ---------------------------------------------------------- panels */

.panel, .newsbox, .panelcard, .post, .paymethods, .paypanels {
  background: var(--panel);
  border: 1px solid var(--bg-600);
  box-shadow: inset 0 1px 0 rgb(var(--brass-400-rgb) / .08), 0 2px 4px rgb(0 0 0 / .4), 0 14px 34px rgb(0 0 0 / .5);
}
.newsbox { background: var(--panel-alt); }
.newsbox .post { box-shadow: none; background: rgb(var(--bg-900-rgb) / .55); }

/* panel head: the drawer's cloud pattern fading out to the right, a rust
   title, a brass hairline under it */
.panel__head {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, var(--bg-700), var(--bg-800));
  border-bottom: 1px solid rgb(var(--brass-400-rgb) / .38);
  box-shadow: 0 1px 0 rgb(0 0 0 / .5);
}
.panel__head::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/pattern-clouds.webp") 0 0 / 200px auto repeat;
  opacity: .55;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 75%);
          mask-image: linear-gradient(90deg, #000, transparent 75%);
}
.panel__title {
  color: var(--rust-250);
  font-size: 17px;
  text-shadow: 0 2px 8px rgb(153 58 31 / .55);
}
.panel__aside { color: var(--brass-300); font-weight: 400; }
.panel__aside:hover { color: var(--cream); }

/* ---------------------------------------------------------- fields */

.field__label, .formrow__label { color: var(--text-secondary); }
.field__box, .input {
  border-color: var(--bg-600);
  background-color: rgb(var(--bg-900-rgb) / .7);
}
.field__box:focus-within, .input:focus {
  border-color: var(--brass-400);
  box-shadow: 0 0 0 3px rgb(var(--brass-400-rgb) / .14);
}
.field__box input, .input { color: var(--cream); }
.field__box input::placeholder, .input::placeholder { color: var(--text-secondary); opacity: .8; }
.input--select option { background: var(--bg-800); color: var(--cream); }

/* ---------------------------------------------------------- lists, rows */

.statlist__row, .events__item, .tile, .datalist__row, .refbox, .statbox, .actioncard, .paytile, .eventcard, .dltile, .pkg, .redeem, .shopcard, .paymethod, .podiumcard {
  border-color: var(--bg-600);
  background: rgb(var(--bg-900-rgb) / .62);
}
.statlist__row { color: var(--cream); }
.statlist__row b, .tile__value--gold, .refbox__value--code, .cbtable__gain { color: var(--brass-300); }
.datalist__row:nth-child(even) { background: rgb(42 23 18 / .5); }
.actioncard:hover, .paytile:hover, .dltile:hover, .pkg--link:hover, .shopcard:hover, .paymethod:hover { border-color: var(--brass-400); }
.paymethod.is-active, .podiumcard--1, .pkg--hot { border-color: var(--brass-400); background: rgb(42 23 18 / .75); }
.events__item b, .eventcard__name, .podiumcard__name { font-family: var(--font-disp); font-weight: 600; letter-spacing: .04em; }
.events__date { font-family: var(--font-disp); color: var(--brass-300); letter-spacing: .06em; }
.events__cover { border-bottom: 1px solid rgb(var(--brass-400-rgb) / .3); }
.pager { border-top-color: var(--bg-600); }

.ranklist__row:nth-child(even) { background: rgb(42 23 18 / .55); }
.ranklist__sep { background: var(--rust-250); width: 2px; }
.ranklist__avatar, .face { border-color: rgb(var(--brass-400-rgb) / .4); background: var(--bg-800); }
.ranklist__lvl { color: var(--brass-300); }
.rankno { background: var(--bg-700); border: 1px solid var(--bg-600); color: var(--brass-300); }
.ranktable th { color: var(--text-secondary); font-family: var(--font-disp); letter-spacing: .1em; text-transform: uppercase; font-size: 11px; }
.ranktable td { color: var(--cream); }
.ranktable tbody tr:nth-child(even) { background: rgb(42 23 18 / .45); }
.ranktable tbody tr:hover { background: rgb(var(--brass-400-rgb) / .08); }

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

.tab {
  border-color: var(--bg-600);
  background: rgb(var(--bg-900-rgb) / .7);
  color: var(--text-secondary);
  font-family: var(--font-disp);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 14px;
}
.tab:hover { border-color: var(--brass-400); color: var(--cream); }
.tab.is-active {
  border-color: var(--crimson-600);
  background: linear-gradient(180deg, rgb(255 255 255 / .08), transparent 55%), var(--crimson-500);
  color: var(--cream);
  box-shadow: inset 0 1px 0 rgb(227 192 106 / .25);
}

/* ---------------------------------------------------------- posts */

.post__cat { color: var(--rust-250); font-family: var(--font-disp); letter-spacing: .14em; }
.post__ago { color: var(--text-secondary); }
.post__body { color: var(--cream); line-height: 1.6; }
.post__content h2, .post__content h3, .post__content h4 { font-family: var(--font-disp); color: var(--brass-300); letter-spacing: .05em; text-transform: uppercase; }
.post__content a, .longtext a { color: var(--brass-300); }
.post__content a:hover { color: var(--parchment-100); }
.post__content blockquote, .note { border-left-color: var(--rust-250); background: rgb(var(--brass-400-rgb) / .07); }
.post__media { border-color: var(--bg-600); background: var(--bg-800); }
.post__cta, .pkg__foot, .redeem__foot { border-top-color: var(--bg-600); }
.section-title { font-family: var(--font-disp); color: var(--rust-250); letter-spacing: .08em; text-transform: uppercase; }
.featurelist i, .reqlist i, .actioncard__icon, .emptystate__icon, .pkg__icon, .statbox__icon, .pwreq__title i { color: var(--brass-300); }
.statbox__icon { border-color: var(--bg-600); background: var(--bg-800); }
.longtext { color: var(--cream); }
.longtext h1, .longtext h2, .longtext h3 { font-family: var(--font-disp); color: var(--brass-300); letter-spacing: .05em; }

.dltile__head { font-family: var(--font-disp); letter-spacing: .08em; text-transform: uppercase; border-bottom-color: rgb(var(--brass-400-rgb) / .3); text-shadow: 0 2px 8px rgb(0 0 0 / .8); }
.pkg__hot { background: var(--crimson-500); border: 1px solid var(--crimson-300); }
.pwreq { border-color: var(--bg-600); background: rgb(var(--bg-900-rgb) / .6); }

/* ---------------------------------------------------------- footer */

.footer {
  position: relative;
  isolation: isolate;
  margin-top: clamp(48px, 8vw, 128px);
  padding: 30px 0 28px;
  background:
    linear-gradient(180deg, rgb(var(--bg-900-rgb) / .35), rgb(var(--bg-900-rgb) / .85)),
    url("../img/scene-pagoda-1920.webp") center 20% / cover no-repeat,
    var(--bg-900);
}
/* torn top edge: the hero's ink edge turned upside down, in the footer's own
   ground, reaching up over the page */
.footer::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; z-index: -1;
  height: clamp(48px, 8vw, 128px);
  background: rgb(var(--bg-900-rgb) / .9);
  -webkit-mask: url("../img/edge-ink-flip.png") center top / 100% 100% no-repeat;
          mask: url("../img/edge-ink-flip.png") center top / 100% 100% no-repeat;
}
/* embers glowing up from the foot of the page */
.footer::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(75% 60% at 50% 108%, rgb(218 110 52 / .30), rgb(218 110 52 / .08) 50%, transparent 75%);
}
.footer__logo img { width: 245px; filter: drop-shadow(0 4px 14px rgb(0 0 0 / .55)); }
.footer__copy { color: var(--text-secondary); }
.footer__nav a { color: var(--text-secondary); font-family: var(--font-disp); font-weight: 500; letter-spacing: .14em; }
.footer__nav a:hover { color: var(--brass-300); }
.footer__social a {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border: 1px solid var(--bg-600);
  border-radius: var(--radius);
  background: rgb(var(--bg-900-rgb) / .7);
  color: var(--brass-300);
  font-size: 19px;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.footer__social a:hover { border-color: var(--crimson-600); background: var(--crimson-500); color: var(--cream); transform: translateY(-2px); }
.footer__partners { padding-top: 22px; border-top: 1px solid rgb(var(--brass-400-rgb) / .18); }
.partners__item { opacity: .6; filter: grayscale(.4) sepia(.25); }
.partners__item:hover { opacity: 1; filter: none; }

/* ---------------------------------------------------------- SweetAlert */

.swal2-popup {
  background: var(--bg-800) !important;
  color: var(--cream) !important;
  border: 1px solid var(--bg-600);
  border-radius: var(--radius) !important;
  box-shadow: inset 0 1px 0 rgb(var(--brass-400-rgb) / .1), 0 26px 60px rgb(0 0 0 / .66);
  font-family: var(--font);
}
.swal2-title { font-family: var(--font-disp); letter-spacing: .06em; text-transform: uppercase; color: var(--rust-250) !important; }
.swal2-html-container { color: var(--text-secondary) !important; }
.swal2-styled.swal2-confirm { background: var(--crimson-500) !important; border-radius: 0 !important; font-family: var(--font-disp); letter-spacing: .12em; text-transform: uppercase; }
.swal2-styled.swal2-cancel { background: var(--bg-700) !important; border: 1px solid var(--bg-600) !important; }
.swal2-timer-progress-bar { background: var(--brass-400) !important; }
div:where(.swal2-container).swal2-backdrop-show { background: rgb(var(--bg-900-rgb) / .7); }

/* ---------------------------------------------------------- responsive */

@media (max-width: 1499.98px) { .topbar__logo img { width: auto; height: 42px; } .topbar__link { font-size: 13.5px; } }
@media (max-width: 1279.98px) { .topbar__logo img { width: auto; height: 38px; } .topbar__link { font-size: 12.5px; letter-spacing: .08em; } }
@media (max-width: 1199.98px) { .hero { height: auto; } .banners { margin-top: -120px; } }
@media (max-width: 991.98px) {
  body { background-attachment: scroll, scroll, scroll; }
  .topbar__menu { background: var(--bg-900); border-bottom: 1px solid var(--bg-600); }
  .topbar__logo img { width: auto; height: 36px; }
  .hero { height: auto; min-height: 0; padding-bottom: 150px; }
  .banners { margin-top: -100px; }
}
@media (max-width: 767.98px) {
  .hero { min-height: 0; height: auto; padding: calc(var(--nav-h) + 24px) 16px 110px; }
  .hero__cta .btn-gold, .hero__cta .btn-ghost { flex: 1 1 100%; }
  .banners { margin-top: -60px; }
}

/* ==========================================================================
   Discord widget (footer.php -> .dcw, main.js -> initDiscordWidget)
   A tab pinned to the left edge of the page; it opens a card that slides out
   beside it. Under 768px the tab becomes a round button in the bottom-left
   corner and the card opens above it.
   ========================================================================== */

.dcw {
  --dc-blurple: #5865f2;
  --dc-blurple-600: #4752c4;
  --dc-green: #3ba55d;
  position: fixed;
  left: 0;
  top: 50%;
  z-index: 55;
  transform: translateY(-50%);
  font-family: var(--font);
}

/* ---- the tab ---- */
.dcw__tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 10px 18px;
  border: 1px solid var(--bg-600);
  border-left: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  background:
    linear-gradient(180deg, rgb(88 101 242 / .22), transparent 60%),
    var(--bg-800);
  color: var(--cream);
  box-shadow: inset -1px 0 0 rgb(var(--brass-400-rgb) / .18), 6px 10px 30px rgb(0 0 0 / .55);
  transition: background .2s ease, padding .2s ease, border-color .2s ease;
}
.dcw__tab:hover,
.dcw.is-open .dcw__tab {
  padding-left: 14px;
  border-color: rgb(88 101 242 / .7);
  background:
    linear-gradient(180deg, rgb(88 101 242 / .45), rgb(88 101 242 / .12) 70%),
    var(--bg-800);
}
.dcw__tab-icon { color: #fff; font-size: 22px; filter: drop-shadow(0 2px 6px rgb(88 101 242 / .8)); }
.dcw__tab-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-disp);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* green "people are here" dot */
.dcw__pulse {
  position: absolute;
  top: 9px;
  right: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dc-green);
  box-shadow: 0 0 0 0 rgb(59 165 93 / .6);
  animation: dcw-pulse 2s ease-out infinite;
}
@keyframes dcw-pulse {
  0%   { box-shadow: 0 0 0 0 rgb(59 165 93 / .6); }
  70%  { box-shadow: 0 0 0 8px rgb(59 165 93 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(59 165 93 / 0); }
}

/* ---- the card ---- */
.dcw__card {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  width: 320px;
  padding: 20px 20px 16px;
  border: 1px solid var(--bg-600);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 60% at 0% 0%, rgb(88 101 242 / .22), transparent 60%),
    linear-gradient(180deg, var(--bg-700), var(--bg-800) 45%);
  box-shadow: inset 0 1px 0 rgb(var(--brass-400-rgb) / .12), 0 26px 60px rgb(0 0 0 / .66);
  opacity: 0;
  visibility: hidden;
  transform: translate(-14px, -50%);
  transition: opacity .25s ease, transform .3s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .3s;
}
.dcw.is-open .dcw__card {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
  transition: opacity .25s ease, transform .3s cubic-bezier(.16, 1, .3, 1), visibility 0s;
}
/* brass hairline across the top, as on the panels */
.dcw__card::before {
  content: "";
  position: absolute;
  top: 0; left: 16px; right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass-400), transparent);
}

.dcw__close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--text-secondary);
  transition: color .16s ease, background .16s ease;
}
.dcw__close:hover { color: var(--cream); background: rgb(255 255 255 / .06); }

.dcw__head { display: flex; align-items: center; gap: 12px; padding-right: 24px; }
.dcw__icon {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: 1px solid rgb(var(--brass-400-rgb) / .35);
  background: var(--bg-900);
  object-fit: cover;
  box-shadow: 0 6px 16px rgb(0 0 0 / .5);
}
.dcw__eyebrow {
  display: block;
  color: var(--rust-250);
  font-family: var(--font-disp);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.dcw__name {
  display: block;
  color: var(--cream);
  font-family: var(--font-disp);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.25;
  text-transform: uppercase;
}

.dcw__stats { display: flex; gap: 16px; margin-top: 14px; color: var(--text-secondary); font-size: 12.5px; }
.dcw__stat b { margin-right: 4px; color: var(--cream); font-weight: 700; }
.dcw__stat--on i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--dc-green);
  vertical-align: 1px;
}

.dcw__text { margin-top: 14px; color: var(--text-secondary); font-size: 13px; line-height: 1.55; }

.dcw__perks { display: grid; gap: 7px; margin-top: 14px; }
.dcw__perks li { display: flex; align-items: center; gap: 10px; color: var(--cream); font-size: 13px; }
.dcw__perks i {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgb(88 101 242 / .16);
  color: #a5adff;
  font-size: 11px;
}

/* the CTA: Discord's own blurple, cut corners like the site's buttons */
.dcw__cta {
  --cut: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  margin-top: 18px;
  background: linear-gradient(180deg, rgb(255 255 255 / .12), transparent 55%), var(--dc-blurple);
  color: #fff;
  font-family: var(--font-disp);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  filter: drop-shadow(0 6px 14px rgb(88 101 242 / .35));
  transition: background .16s ease, transform .16s ease;
}
.dcw__cta i { font-size: 18px; }
.dcw__cta:hover { color: #fff; background: var(--dc-blurple-600); transform: translateY(-1px); }

.dcw__url {
  display: block;
  margin-top: 9px;
  color: var(--text-secondary);
  font-size: 11.5px;
  text-align: center;
  opacity: .75;
}

/* ---- phones: a round button bottom-left, the card opens above it ---- */
@media (max-width: 767.98px) {
  .dcw { top: auto; bottom: 16px; left: 16px; transform: none; }
  .dcw__tab {
    width: 54px;
    height: 54px;
    padding: 0;
    justify-content: center;
    border: 1px solid rgb(88 101 242 / .7);
    border-radius: 50%;
    background: var(--dc-blurple);
    box-shadow: 0 8px 24px rgb(0 0 0 / .55);
  }
  .dcw__tab:hover, .dcw.is-open .dcw__tab { padding: 0; background: var(--dc-blurple-600); }
  .dcw__tab-text { display: none; }
  .dcw__pulse { top: 3px; right: 3px; border: 2px solid var(--bg-900); width: 12px; height: 12px; }
  .dcw__card {
    left: 0;
    top: auto;
    bottom: calc(100% + 12px);
    width: min(320px, calc(100vw - 32px));
    transform: translateY(14px);
  }
  .dcw.is-open .dcw__card { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .dcw__pulse { animation: none; }
  .dcw__card, .dcw.is-open .dcw__card { transition: none; }
}