:root {
  --bg: #080505;
  --bg-2: #110a09;
  --card: #170e0c;
  --line: #3a1d18;
  --text: #ece0cc;
  --muted: #a3907f;
  --gold: #c4161c;
  --gold-2: #ff6a2b;
  --red: #e0322a;
  --green: #4caf50;
  --radius: 10px;
  --font-title: 'Cinzel', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.6 var(--font-body);
}
a { color: var(--gold-2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--font-title); letter-spacing: .02em; margin: 0 0 .5em; }
code { background: var(--bg-2); padding: 1px 6px; border-radius: 4px; font-size: .9em; }
.wrap { max-width: 1140px; margin: 0 auto; padding-inline: 20px; }
.narrow { max-width: 640px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .85em; }

/* Top bar */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: rgba(8, 5, 5, .88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { font: 900 24px var(--font-title); color: var(--text); letter-spacing: .04em; }
.logo span { color: var(--gold); }
.logo:hover { text-decoration: none; }
.nav { display: flex; align-items: center; gap: 22px; }
.nav a { color: var(--muted); font-weight: 500; }
.nav a:hover, .nav a.active { color: var(--text); text-decoration: none; }
.nav a.btn { color: #fff1e0; }
.nav-toggle { display: none; background: none; border: 0; color: var(--text); font-size: 24px; cursor: pointer; }
.demo-bar { background: #3a0c0a; color: var(--gold-2); text-align: center; padding: 8px 16px; font-size: 13px; }

/* Buttons */
.btn {
  display: inline-block; cursor: pointer; border: 0;
  padding: 12px 26px; border-radius: 6px;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: #fff1e0; font: 700 14px var(--font-body); text-transform: uppercase; letter-spacing: .06em;
  box-shadow: 0 4px 20px rgba(196, 22, 28, .25);
  transition: transform .15s, box-shadow .15s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 26px rgba(196, 22, 28, .4); text-decoration: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-ghost { background: transparent; color: var(--gold-2); border: 1px solid var(--gold); box-shadow: none; }
.btn-small { padding: 8px 16px; font-size: 12px; }

/* Hero */
.hero {
  position: relative; text-align: center; padding: 110px 0 90px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(196, 22, 28, .18), transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(120, 30, 40, .35), transparent 60%),
    linear-gradient(180deg, #16121e, var(--bg));
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0; opacity: .08; pointer-events: none;
  background-image: repeating-linear-gradient(45deg, var(--gold) 0 1px, transparent 1px 24px);
}
.hero-inner { position: relative; }
.eyebrow { text-transform: uppercase; letter-spacing: .3em; color: var(--gold); font-size: 13px; margin: 0; }
.hero h1 { font-size: clamp(56px, 11vw, 120px); font-weight: 900; line-height: 1; margin: 12px 0; text-shadow: 0 4px 40px rgba(196, 22, 28, .3); }
.hero h1 span { color: var(--gold); }
.tagline { font-size: 19px; color: var(--muted); margin: 0 0 32px; }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.countdown { display: flex; gap: 12px; justify-content: center; margin-top: 44px; }
.countdown div { background: rgba(23, 14, 12, .85); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 18px; min-width: 78px; }
.countdown strong { display: block; font: 700 30px var(--font-title); color: var(--gold-2); }
.countdown span { font-size: 11px; text-transform: uppercase; letter-spacing: .15em; color: var(--muted); }

/* Layout */
main { min-height: 60vh; }
.grid-main { display: grid; grid-template-columns: 1fr 320px; gap: 32px; padding-block: 56px; }
.section-title { font-size: 24px; margin-bottom: 20px; }
.page-head { padding-block: 56px 24px; }
.page-head h1 { font-size: clamp(32px, 5vw, 46px); }

/* Cards */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin-bottom: 20px; }
.card-title { font-size: 16px; color: var(--gold-2); text-transform: uppercase; letter-spacing: .08em; }
.news h3 { font-size: 20px; }
.news p { margin: 0; color: #d6c8b4; }
.news-meta { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.tag { background: rgba(196, 22, 28, .15); color: var(--gold-2); padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }

.status, .rates, .mini-rank { list-style: none; margin: 0; padding: 0; }
.status li, .rates li, .mini-rank li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); }
.status li:last-child, .rates li:last-child, .mini-rank li:last-child { border-bottom: 0; }
.mini-rank { counter-reset: rank; }
.mini-rank li span::before { counter-increment: rank; content: counter(rank) '. '; color: var(--muted); }
.more { display: inline-block; margin-top: 12px; font-size: 13px; }
.up { color: var(--green); }
.down { color: var(--red); }

/* Features */
.rate-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 32px; }
.rate-strip div { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; text-align: center; }
.rate-strip strong { display: block; font: 700 28px var(--font-title); color: var(--gold-2); }
.rate-strip span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; padding-bottom: 56px; }
.feature { margin: 0; transition: border-color .2s, transform .2s; }
.feature:hover { border-color: var(--gold); transform: translateY(-2px); }
.feature-icon { font-size: 30px; margin-bottom: 8px; }
.feature h3 { font-size: 18px; }
.feature p { margin: 0; color: var(--muted); }

/* Download */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-bottom: 20px; }
.step { position: relative; margin: 0; display: flex; flex-direction: column; align-items: flex-start; }
.step p { flex: 1; color: var(--muted); }
.step-num { font: 900 42px var(--font-title); color: var(--gold); opacity: .5; line-height: 1; margin-bottom: 8px; }

/* Rules */
.rules { padding-left: 22px; padding-bottom: 56px; }
.rules li { margin-bottom: 16px; color: #d6c8b4; }
.rules strong { color: var(--text); }

/* Rankings */
.tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.tabs a { padding: 8px 18px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
.tabs a.active, .tabs a:hover { border-color: var(--gold); color: var(--gold-2); text-decoration: none; }
.table-wrap { overflow-x: auto; margin-bottom: 56px; border: 1px solid var(--line); border-radius: var(--radius); }
.rank-table { width: 100%; border-collapse: collapse; background: var(--card); white-space: nowrap; }
.rank-table th, .rank-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.rank-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); background: var(--bg-2); }
.rank-table tr:last-child td { border-bottom: 0; }
.rank-table tbody tr:hover { background: rgba(196, 22, 28, .05); }
.rank-table .name { font-weight: 600; }
.podium-1 td:first-child { color: #ffd700; font-weight: 700; }
.podium-2 td:first-child { color: #c0c0c0; font-weight: 700; }
.podium-3 td:first-child { color: #cd7f32; font-weight: 700; }

/* Forms */
.form { display: flex; flex-direction: column; gap: 16px; margin-bottom: 56px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-weight: 500; }
.form input:not([type=checkbox]) {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px;
  padding: 11px 14px; color: var(--text); font: inherit;
}
.form input:focus { outline: none; border-color: var(--gold); }
.form .check { flex-direction: row; align-items: center; gap: 10px; font-weight: 400; }
.form .hp { position: absolute; left: -9999px; }
.alert { border-radius: var(--radius); padding: 14px 18px; margin-bottom: 20px; }
.alert ul { margin: 0; padding-left: 18px; }
.alert-error { background: rgba(192, 57, 43, .15); border: 1px solid var(--red); }
.alert-success { background: rgba(76, 175, 80, .12); border: 1px solid var(--green); }

.alert-info { background: rgba(196, 22, 28, .1); border: 1px solid var(--gold); }

/* Account dashboard */
.dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.dash-head h1 { margin: 0; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat { margin: 0; text-align: center; }
.stat strong { display: block; font: 700 32px var(--font-title); color: var(--gold-2); }
.stat span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.section-title { scroll-margin-top: 80px; margin-top: 36px; }
.dash .table-wrap { margin-bottom: 20px; }

.donate-form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 6px; font-weight: 500; max-width: 360px; }
.field select {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px;
  padding: 11px 14px; color: var(--text); font: inherit;
}
.packages { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.package { cursor: pointer; }
.package input { position: absolute; opacity: 0; }
.package-body {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 18px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2);
  transition: border-color .15s, box-shadow .15s;
}
.package-body strong { font: 700 30px var(--font-title); color: var(--gold-2); }
.package-body em { font-style: normal; font-weight: 600; margin-top: 6px; }
.package:hover .package-body { border-color: var(--muted); }
.package input:checked + .package-body { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 6px 24px rgba(196, 22, 28, .2); }
.package input:focus-visible + .package-body { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.pay-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.pay { color: #fff; box-shadow: none; }
.pay-stripe { background: #635bff; }
.pay-paypal { background: #ffc439; color: #111; }
.pay-revolut { background: #fff; color: #111; }
.pay:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }

.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pill-delivered { background: rgba(76, 175, 80, .15); color: var(--green); }
.pill-paid, .pill-delivering, .pill-pending { background: rgba(196, 22, 28, .15); color: var(--gold-2); }
.pill-failed { background: rgba(192, 57, 43, .15); color: #e57368; }

/* Footer */
.footer { border-top: 1px solid var(--line); background: var(--bg-2); padding-block: 32px; }
.footer-inner { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; }
.footer p { margin: 4px 0 0; max-width: 460px; }

@media (max-width: 860px) {
  .grid-main { grid-template-columns: 1fr; }
  .nav-toggle { display: block; }
  .nav {
    display: none; position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-2); border-bottom: 1px solid var(--line); padding: 8px 20px 16px;
  }
  .nav.open { display: flex; }
  .nav a { padding: 10px 0; }
  .nav a.btn { text-align: center; margin-top: 8px; }
  .hero { padding: 70px 0 60px; }
  .countdown div { min-width: 64px; padding: 10px; }
  .countdown strong { font-size: 22px; }
}

.social { display: flex; gap: 14px; margin-top: 8px; }
.social:empty { display: none; }
.form .check a { display: inline; }

/* Donate page */
.cta { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.cta h3 { margin-bottom: 4px; }
.cta p { margin: 0; max-width: 620px; }
.step-title { display: flex; align-items: center; gap: 10px; font-size: 18px; margin-bottom: 16px; }
.step-title span {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--gold); color: #fff1e0; font: 700 14px var(--font-body);
}
.char-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.char-option { cursor: pointer; }
.char-option input { position: absolute; opacity: 0; }
.char-body {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2);
  transition: border-color .15s, box-shadow .15s;
}
.char-body strong { font-size: 16px; }
.char-option:hover .char-body { border-color: var(--muted); }
.char-option input:checked + .char-body { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 6px 24px rgba(196, 22, 28, .2); }
.char-option input:focus-visible + .char-body { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.online-note { margin: 12px 0 0; color: var(--gold-2); }
.summary { font-size: 16px; margin: 0 0 16px; }
.summary b { color: var(--gold-2); }
.packages-preview { margin-bottom: 20px; }
.pay-test { background: var(--bg-2); color: var(--text); border: 1px dashed var(--muted); }
.donate-form .card { margin-bottom: 0; }
.rate-note { margin: -8px 0 14px; }
.package-custom .package-body { justify-content: center; gap: 8px; }
.custom-input { display: flex; align-items: center; gap: 6px; }
.custom-input input {
  width: 90px; background: var(--card); border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 10px; color: var(--text); font: 600 18px var(--font-body); text-align: center;
}
.custom-input input:focus { outline: none; border-color: var(--gold); }
.custom-input b { color: var(--muted); font-size: 13px; }

/* Logo image */
.logo { display: inline-flex; align-items: center; }
.logo-img { display: block; height: 46px; width: auto; filter: drop-shadow(0 2px 10px rgba(200, 30, 30, .35)); transition: filter .2s, transform .2s; }
.logo:hover .logo-img { filter: drop-shadow(0 2px 14px rgba(230, 50, 40, .6)); transform: scale(1.03); }
.logo-footer .logo-img { height: 64px; }

.hero-title-img { margin: 8px 0 4px; line-height: 0; }
.hero-logo {
  display: block; width: min(640px, 92%); height: auto; margin: 0 auto;
  filter: drop-shadow(0 10px 40px rgba(210, 30, 30, .45)) drop-shadow(0 0 60px rgba(196, 22, 28, .18));
  animation: logo-glow 6s ease-in-out infinite;
}
@keyframes logo-glow {
  50% { filter: drop-shadow(0 10px 50px rgba(230, 40, 40, .6)) drop-shadow(0 0 80px rgba(196, 22, 28, .28)); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-logo { animation: none; }
}

.page-logo { margin-bottom: 8px; }
.page-logo-img { display: inline-block; height: 110px; width: auto; filter: drop-shadow(0 6px 24px rgba(210, 30, 30, .4)); }
.auth-head p.muted { margin-inline: auto; }

@media (max-width: 860px) {
  .logo-img { height: 38px; }
  .page-logo-img { height: 84px; }
}
.char-option.is-disabled { cursor: not-allowed; }
.char-option.is-disabled .char-body { opacity: .45; border-style: dashed; }
.char-option.is-disabled:hover .char-body { border-color: var(--line); }

/* Live server status */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); margin-right: 8px; vertical-align: middle; }
.dot-up { background: var(--green); box-shadow: 0 0 0 0 rgba(76, 175, 80, .6); animation: dot-pulse 2s infinite; }
.dot-down { background: var(--red); }
@keyframes dot-pulse { 70% { box-shadow: 0 0 0 7px rgba(76, 175, 80, 0); } 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); } }
@media (prefers-reduced-motion: reduce) { .dot-up { animation: none; } }
.status b small { font-weight: 500; font-size: 12px; }
.status-updated { margin: 10px 0 0; }
.live-badge {
  float: right; font: 600 10px var(--font-body); letter-spacing: .12em; color: var(--green);
  border: 1px solid rgba(76, 175, 80, .4); border-radius: 999px; padding: 2px 8px; margin-top: 2px;
}
.status-pill {
  display: inline-flex; align-items: center; margin-left: auto; margin-right: 20px;
  padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
  color: var(--text); background: rgba(76, 175, 80, .08); border: 1px solid rgba(76, 175, 80, .3);
}
.status-pill:hover { text-decoration: none; border-color: var(--green); }
.status-pill .dot { width: 7px; height: 7px; margin-right: 7px; }
.status-pill.is-down { background: rgba(192, 57, 43, .1); border-color: rgba(192, 57, 43, .4); }
@media (max-width: 1100px) and (min-width: 861px) { .status-pill { display: none; } }
@media (max-width: 860px) { .status-pill { margin-right: 12px; } }
.mini-rank .dot { width: 7px; height: 7px; margin-right: 6px; }
.mini-rank li span::before { margin-right: 2px; }

/* Social links & voting */
.social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.social-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 38px; height: 38px; border-radius: 50%; color: var(--muted);
  background: var(--bg-2); border: 1px solid var(--line); transition: color .15s, border-color .15s, background .15s, transform .15s;
}
.social-link:hover { color: #fff; transform: translateY(-2px); text-decoration: none; }
.social-discord:hover { background: #5865f2; border-color: #5865f2; }
.social-instagram:hover { background: linear-gradient(45deg, #f09433, #dc2743 50%, #bc1888); border-color: #dc2743; }
.social-tiktok:hover { background: #111; border-color: #25f4ee; box-shadow: 2px 2px 0 #fe2c55; }
.social-youtube:hover { background: #ff0000; border-color: #ff0000; }
.social-facebook:hover { background: #1877f2; border-color: #1877f2; }
.social-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 0; }
.social-list .social-link { width: auto; height: auto; border-radius: 8px; padding: 9px 12px; justify-content: flex-start; font-weight: 500; font-size: 14px; }
.vote-title { margin: 16px 0 8px; }
.vote-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.vote-buttons .btn { flex: 1; text-align: center; }
.vote-buttons { flex-direction: column; }
.vote-buttons .btn { width: 100%; }

/* Features page: settings + commands */
.info-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 20px; padding-bottom: 56px; margin-top: -24px; }
.info-grid .card { margin: 0; }
.commands { list-style: none; margin: 0; padding: 0; }
.commands li { display: flex; gap: 16px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); }
.commands li:last-child { border-bottom: 0; }
.command-names { display: flex; flex-wrap: wrap; gap: 6px; min-width: 150px; }
.commands code { color: var(--gold-2); background: var(--bg-2); border: 1px solid var(--line); font-size: 13px; }
@media (max-width: 860px) {
  .info-grid { grid-template-columns: 1fr; }
  .commands li { flex-direction: column; gap: 4px; }
}
.bonus-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #fff1e0;
  background: linear-gradient(180deg, var(--gold-2), var(--gold)); border-radius: 999px; padding: 1px 8px; margin-bottom: 2px;
}
.bonus-text { color: var(--green); font-weight: 600; }
.package-body { position: relative; }

/* Donate: free amount */
.amount-box { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.amount-field {
  display: flex; align-items: center; gap: 6px; padding: 6px 16px; flex: 0 1 240px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .15s, box-shadow .15s;
}
.amount-field:focus-within { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.amount-symbol { font: 700 26px var(--font-title); color: var(--gold-2); }
.amount-field input {
  width: 100%; min-width: 0; background: none; border: 0; outline: none; color: var(--text);
  font: 700 32px var(--font-title); padding: 6px 0;
}
.amount-arrow { color: var(--muted); font-size: 22px; }
.amount-result { display: flex; flex-direction: column; }
.amount-result strong { font: 700 34px var(--font-title); color: var(--gold-2); line-height: 1.1; }
.amount-result span { color: var(--muted); }
.amount-result .bonus-text { color: var(--green); }
.amount-error { color: #e57368; margin: 10px 0 0; font-size: 14px; }
.amount-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 18px; }
.amount-chip {
  display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer;
  padding: 10px 8px; background: var(--bg-2); color: var(--text); font: inherit;
  border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .15s, box-shadow .15s;
}
.amount-chip b { font: 700 18px var(--font-title); color: var(--gold-2); }
.amount-chip span { font-size: 12px; color: var(--muted); }
.amount-chip:hover { border-color: var(--muted); }
.amount-chip.active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.pay-buttons .btn:disabled { opacity: .4; cursor: not-allowed; }
@media (max-width: 560px) { .amount-arrow { display: none; } .amount-field { flex-basis: 100%; } }
.live-badge.is-down { color: #e57368; border-color: rgba(192, 57, 43, .5); }

/* Admin panel */
.nav-admin { color: var(--gold-2) !important; font-weight: 600; }
.admin-head { padding-bottom: 8px; }
.admin-tabs { margin: 18px 0 0; }
.admin-stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.admin-stats .stat strong { font-size: 26px; }
.admin-grid { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; }
.admin-grid .section-title:first-child { margin-top: 12px; }
.admin-table { font-size: 14px; }
.admin-table td, .admin-table th { padding: 10px 12px; }
.row-actions { white-space: nowrap; }
.row-actions form { display: inline; }
.btn-xs { padding: 4px 10px; font-size: 11px; letter-spacing: .03em; }
.btn-danger { background: var(--red); color: #fff; box-shadow: none; }
.admin-filters { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.admin-filters label { display: flex; flex-direction: column; gap: 6px; font-weight: 500; font-size: 13px; }
.admin-filters input, .admin-filters select, .admin-search input, .admin-action select {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 9px 12px; color: var(--text); font: inherit; min-width: 180px;
}
.admin-filters input { min-width: 260px; }
.admin-search input { width: 100%; }
.admin-action { gap: 12px; margin-bottom: 20px; }
.admin-action .card-title { margin: 0; }
.admin-action p { margin: 0; }
.admin-account-head { display: flex; align-items: center; gap: 10px; }
.admin-account-head h3 { margin: 0; font-size: 22px; }
.admin-big { font: 700 26px var(--font-title); color: var(--gold-2); margin: 0; }
.admin-attention { border-color: rgba(196, 22, 28, .5); }
.pill-pending { background: rgba(163, 144, 127, .15); color: var(--muted); }
.pill-cancelled { background: rgba(163, 144, 127, .1); color: var(--muted); }
.char-chip { display: inline-block; margin: 2px 6px 2px 0; padding: 2px 8px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); font-size: 13px; }
.char-chip.is-online { border-color: var(--green); }
.pager { display: flex; gap: 10px; justify-content: center; margin: 20px 0 40px; }
@media (max-width: 960px) { .admin-grid { grid-template-columns: 1fr; } }
.char-chip.is-match { border-color: var(--gold); color: var(--gold-2); }
.admin-queue { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.admin-queue .card-title { margin-bottom: 4px; }
.admin-queue p { margin: 0; max-width: 760px; }
.admin-queue.is-stale { border-color: rgba(196, 22, 28, .6); }

/* Donate: fixed-price reward picker */
a.char-option { color: inherit; text-decoration: none; }
.char-option.is-selected .char-body { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 6px 24px rgba(196, 22, 28, .2); }
.reward-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.reward-preview { margin-bottom: 20px; }
.reward-option { cursor: pointer; }
.reward-option input { position: absolute; opacity: 0; }
.reward-body {
  display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2);
  transition: border-color .15s, box-shadow .15s;
}
.reward-icon { font-size: 26px; line-height: 1; margin-bottom: 4px; }
.reward-body strong { font-size: 16px; }
.reward-body em { font-style: normal; font-weight: 700; color: var(--gold-2); margin-top: auto; padding-top: 8px; font-size: 18px; }
.reward-option:hover .reward-body { border-color: var(--muted); }
.reward-option input:checked + .reward-body { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 6px 24px rgba(196, 22, 28, .2); }
.reward-option input:focus-visible + .reward-body { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.reward-option.is-disabled { cursor: not-allowed; }
.reward-option.is-disabled .reward-body { opacity: .45; border-style: dashed; }
.reward-panel { display: flex; flex-direction: column; gap: 14px; }
.reward-panel[hidden] { display: none; }
.reward-panel .field { max-width: 100%; }
.reward-items { margin: 0; padding-left: 20px; }

/* ==========================================================================
   L2Diablo skin: hellfire, forged iron and old bone
   ========================================================================== */
:root {
  --bone: #e8d9bf;
  --ember: #ff6a2b;
  --blood: #8e0e12;
  --glow: 0 0 24px rgba(255, 70, 30, .35);
}
body {
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(140, 14, 18, .22), transparent 60%),
    radial-gradient(ellipse 80% 50% at 50% 110%, rgba(255, 90, 30, .06), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
::selection { background: var(--blood); color: #fff; }
a { color: var(--ember); }
h1, h2, h3 { color: var(--bone); text-shadow: 0 2px 0 #000, 0 0 18px rgba(196, 22, 28, .25); }

/* Top bar: dark iron with a smouldering edge */
.topbar {
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--blood) 20%, var(--ember) 50%, var(--blood) 80%, transparent) 1;
  box-shadow: 0 6px 30px rgba(0, 0, 0, .6);
}
.topbar-inner { height: 72px; }
.logo-img { height: 54px; filter: drop-shadow(0 0 10px rgba(255, 50, 20, .35)); }
.logo:hover .logo-img { filter: drop-shadow(0 0 16px rgba(255, 80, 30, .7)); }
.logo-footer .logo-img { height: 80px; }
.nav a { font-family: var(--font-title); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; position: relative; }
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ember), transparent);
  transform: scaleX(0); transition: transform .25s;
}
.nav a:not(.btn):hover::after, .nav a.active:not(.btn)::after { transform: scaleX(1); }
.nav a:hover, .nav a.active { color: var(--bone); text-shadow: 0 0 12px rgba(255, 90, 40, .5); }

/* Buttons: molten metal */
.btn {
  background: linear-gradient(180deg, #e2381f 0%, #a8121a 55%, #6a080c 100%);
  color: #fff1e0; border: 1px solid #ff7a40;
  font-family: var(--font-title); font-weight: 700; letter-spacing: .1em;
  border-radius: 3px; text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  box-shadow: inset 0 1px 0 rgba(255, 200, 150, .35), inset 0 -2px 6px rgba(0, 0, 0, .4), 0 0 18px rgba(220, 40, 20, .35);
}
.btn:hover {
  background: linear-gradient(180deg, #ff5a2a 0%, #c4161c 55%, #7c0a0e 100%);
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, .45), inset 0 -2px 6px rgba(0, 0, 0, .4), 0 0 30px rgba(255, 70, 30, .6);
}
.btn-ghost {
  background: rgba(10, 4, 4, .6); color: var(--bone); border: 1px solid var(--blood);
  box-shadow: inset 0 0 12px rgba(196, 22, 28, .25);
}
.btn-ghost:hover { background: rgba(60, 8, 8, .6); border-color: var(--ember); color: #fff; }
.nav a.btn { color: #fff1e0; }
.pay { font-family: var(--font-body); text-shadow: none; border: 0; }
.pay-stripe { background: #635bff; color: #fff; }
.pay-paypal { background: #ffc439; color: #111; }
.pay-revolut { background: #fff; color: #111; }
.pay-test { background: var(--bg-2); color: var(--text); border: 1px dashed var(--muted); }
.btn-danger { background: linear-gradient(180deg, #e0322a, #8e0e12); }

/* Hero: a rift into the burning hells */
.hero {
  padding: 70px 0 90px;
  background:
    radial-gradient(ellipse 50% 60% at 50% 45%, rgba(255, 60, 20, .20), transparent 70%),
    radial-gradient(ellipse 90% 50% at 50% 100%, rgba(150, 14, 14, .55), transparent 70%),
    linear-gradient(180deg, #0d0606 0%, #160807 60%, var(--bg) 100%);
  border-bottom: 1px solid var(--blood);
}
.hero::before {
  opacity: 1;
  background-image:
    radial-gradient(2px 2px at 12% 80%, #ff8a3a, transparent),
    radial-gradient(1.5px 1.5px at 28% 92%, #ffb15a, transparent),
    radial-gradient(2px 2px at 44% 86%, #ff6a2b, transparent),
    radial-gradient(1.5px 1.5px at 61% 95%, #ffa040, transparent),
    radial-gradient(2.5px 2.5px at 77% 84%, #ff5a20, transparent),
    radial-gradient(1.5px 1.5px at 90% 90%, #ffb15a, transparent),
    radial-gradient(2px 2px at 5% 97%, #ff7a30, transparent),
    radial-gradient(1.5px 1.5px at 53% 99%, #ffc070, transparent);
  animation: embers 9s linear infinite;
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; pointer-events: none;
  background: linear-gradient(0deg, rgba(255, 70, 20, .16), transparent);
  animation: flicker 3.2s ease-in-out infinite alternate;
}
@keyframes embers {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(-75%); opacity: 0; }
}
@keyframes flicker { 0% { opacity: .55; } 40% { opacity: .9; } 70% { opacity: .65; } 100% { opacity: 1; } }
.eyebrow { color: var(--ember); font-family: var(--font-title); font-weight: 700; text-shadow: 0 0 10px rgba(255, 90, 30, .5); }
.hero h1 { text-shadow: none; }
.hero h1 span, .logo span {
  background: linear-gradient(180deg, #ffcc80 0%, #ff6a2b 45%, #b3121b 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-logo {
  width: min(540px, 88%);
  filter: drop-shadow(0 0 30px rgba(255, 40, 20, .45));
  animation: hell-glow 5s ease-in-out infinite;
}
@keyframes hell-glow { 50% { filter: drop-shadow(0 0 55px rgba(255, 60, 20, .7)); } }
.tagline { color: var(--bone); opacity: .85; font-family: var(--font-title); letter-spacing: .04em; }
.countdown div {
  border-color: var(--blood); border-radius: 3px;
  box-shadow: inset 0 0 16px rgba(196, 22, 28, .25), 0 0 14px rgba(0, 0, 0, .6);
}
.countdown strong { color: var(--ember); text-shadow: 0 0 12px rgba(255, 90, 30, .6); }

/* Cards: carved stone with forged iron corners */
.card, .rate-strip div, .table-wrap {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 120, 60, .035), transparent 40%), var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 180, 120, .05), inset 0 0 40px rgba(0, 0, 0, .45), 0 8px 24px rgba(0, 0, 0, .45);
}
.card::before {
  content: ""; position: absolute; inset: -1px; pointer-events: none; border-radius: 4px;
  background:
    linear-gradient(var(--gold), var(--gold)) top left / 14px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) top left / 2px 14px no-repeat,
    linear-gradient(var(--gold), var(--gold)) top right / 14px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) top right / 2px 14px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom left / 14px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom left / 2px 14px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom right / 14px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom right / 2px 14px no-repeat;
}
.card-title { color: var(--ember); font-family: var(--font-title); font-weight: 700; }
.section-title { display: flex; align-items: center; gap: 14px; }
.section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--blood), transparent); }
.feature:hover { border-color: var(--ember); box-shadow: var(--glow), inset 0 0 40px rgba(0, 0, 0, .45); }
.tag { background: rgba(196, 22, 28, .2); color: var(--ember); border: 1px solid rgba(196, 22, 28, .5); border-radius: 2px; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.step-num { color: var(--ember); opacity: .6; text-shadow: 0 0 16px rgba(255, 70, 20, .5); }

/* Tables */
.rank-table th { background: #0d0706; color: var(--ember); font-family: var(--font-title); }
.rank-table tbody tr:nth-child(even) { background: rgba(0, 0, 0, .18); }
.rank-table tbody tr:hover { background: rgba(196, 22, 28, .1); }
.podium-1 td:first-child { color: #ff9a3c; text-shadow: 0 0 10px rgba(255, 140, 40, .6); }
.tabs a { border-radius: 3px; font-family: var(--font-title); font-weight: 700; font-size: 13px; letter-spacing: .06em; }
.tabs a.active { background: rgba(196, 22, 28, .15); box-shadow: inset 0 0 12px rgba(196, 22, 28, .3); }

/* Forms */
.form input:not([type=checkbox]), .field select, .admin-filters input, .admin-filters select, .admin-search input, .admin-action select {
  background: #0c0605; border-radius: 3px; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6);
}
.form input:focus, .field select:focus { border-color: var(--ember); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6), 0 0 0 1px var(--blood), 0 0 14px rgba(255, 70, 20, .25); }
input[type=checkbox] { accent-color: var(--gold); }
.alert-info { background: rgba(196, 22, 28, .1); border-color: var(--blood); }

/* Selection tiles (donate) */
.package-body, .char-body, .reward-body, .amount-chip, .amount-field { border-radius: 4px; background: #0e0706; }
.package input:checked + .package-body,
.char-option input:checked + .char-body,
.char-option.is-selected .char-body,
.reward-option input:checked + .reward-body,
.amount-chip.active { border-color: var(--ember); box-shadow: 0 0 0 1px var(--blood), 0 0 22px rgba(255, 70, 20, .3); }
.step-title span { background: linear-gradient(180deg, #e2381f, #8e0e12); color: #fff1e0; box-shadow: 0 0 12px rgba(255, 60, 20, .4); }
.bonus-tag { color: #fff1e0; background: linear-gradient(180deg, #e2381f, #8e0e12); }

/* Footer */
.footer {
  background: linear-gradient(180deg, #0c0606, #060303);
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--blood), transparent) 1;
}
.social-link { background: #0e0706; }

html { scrollbar-color: var(--blood) #0c0605; }

@media (max-width: 860px) {
  .topbar-inner { height: 64px; }
  .nav { top: 64px; }
  .logo-img { height: 42px; }
  .hero { padding: 48px 0 60px; }
  .nav a:not(.btn)::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after { animation: none; }
}

/* ==========================================================================
   L2Diablo modern layer: glass, motion and light
   ========================================================================== */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }

:root { --ease-out: cubic-bezier(.2, .7, .2, 1); }

/* Film grain over everything for a gritty, cinematic texture */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Mouse-following glow */
.cursor-glow {
  position: fixed; top: 0; left: 0; z-index: -1; pointer-events: none;
  width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 70, 25, .09), rgba(196, 22, 28, .04) 35%, transparent 65%);
  opacity: 0; transition: opacity .6s;
}
.cursor-glow.is-on { opacity: 1; }

/* Scroll progress */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 30; pointer-events: none;
  background: linear-gradient(90deg, var(--blood), var(--ember), #ffcc80);
  box-shadow: 0 0 10px rgba(255, 90, 30, .8);
  transform: scaleX(0); transform-origin: left;
}

/* Glass top bar that tightens on scroll */
.topbar {
  background: rgba(10, 5, 5, .62);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  transition: background .35s, box-shadow .35s;
}
.topbar-inner { transition: height .35s var(--ease-out); }
.topbar.is-scrolled { background: rgba(8, 4, 4, .82); box-shadow: 0 10px 40px rgba(0, 0, 0, .7); }
.topbar.is-scrolled .topbar-inner { height: 60px; }
.topbar.is-scrolled .logo-img { height: 44px; }
.logo-img { transition: height .35s var(--ease-out), filter .2s, transform .2s; }
.is-home .topbar { position: fixed; left: 0; right: 0; }
.is-home .topbar:not(.is-scrolled) {
  background: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-image: none; border-bottom-color: transparent;
}
.is-home .demo-bar { margin-top: 72px; }
.status-pill { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* Buttons: light sweep + press */
.btn { position: relative; overflow: hidden; isolation: isolate; transition: transform .15s, box-shadow .25s, background .25s, border-color .25s; }
.btn::after {
  content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent, rgba(255, 230, 200, .35), transparent);
  transform: skewX(-20deg); transition: left .7s var(--ease-out);
}
.btn:hover::after { left: 130%; }
.btn:active { transform: translateY(0) scale(.97); }

/* Hero: full-screen rift with live embers and drifting smoke */
.hero {
  min-height: min(100svh, 980px);
  display: flex; align-items: center; justify-content: center;
  padding: 120px 0 110px;
  isolation: isolate;
}
.fx .hero::before { display: none; }
.hero-embers { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-fog { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-fog i {
  position: absolute; width: 70vw; height: 50vh; border-radius: 50%; filter: blur(70px); opacity: .5;
  background: radial-gradient(closest-side, rgba(170, 20, 20, .55), transparent);
  animation: fog-drift 22s ease-in-out infinite alternate;
}
.hero-fog i:nth-child(1) { left: -20vw; bottom: -10vh; }
.hero-fog i:nth-child(2) { right: -25vw; bottom: 5vh; animation-duration: 28s; animation-delay: -8s; background: radial-gradient(closest-side, rgba(255, 80, 20, .28), transparent); }
.hero-fog i:nth-child(3) { left: 20vw; top: -15vh; width: 60vw; animation-duration: 34s; animation-delay: -14s; background: radial-gradient(closest-side, rgba(90, 10, 10, .6), transparent); }
@keyframes fog-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(8vw, -3vh, 0) scale(1.15); }
  100% { transform: translate3d(-6vw, 2vh, 0) scale(.95); }
}
.hero::after { z-index: 1; }
.hero-inner { z-index: 2; width: 100%; }
.hero h1[data-parallax] { transition: transform .4s var(--ease-out); will-change: transform; }
.hero-logo { animation: hell-glow 5s ease-in-out infinite, logo-float 7s ease-in-out infinite; }
@keyframes logo-float { 50% { transform: translateY(-10px); } }

/* Staged entrance */
.fx .hero-inner > * { animation: hero-in 1s var(--ease-out) both; }
.fx .hero-inner > :nth-child(1) { animation-delay: .1s; }
.fx .hero-inner > :nth-child(2) { animation-delay: .25s; animation-name: hero-in-logo; animation-duration: 1.4s; }
.fx .hero-inner > :nth-child(3) { animation-delay: .55s; }
.fx .hero-inner > :nth-child(4) { animation-delay: .7s; }
.fx .hero-inner > :nth-child(5) { animation-delay: .85s; }
.fx .hero-inner > :nth-child(6) { animation-delay: 1s; }
@keyframes hero-in { from { opacity: 0; transform: translateY(26px); filter: blur(8px); } }
@keyframes hero-in-logo { from { opacity: 0; transform: scale(.88); filter: blur(14px) brightness(2.2); } }

.eyebrow { display: inline-flex; align-items: center; gap: 12px; }
.eyebrow::before, .eyebrow::after { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--ember)); }
.eyebrow::after { transform: scaleX(-1); }

.hero-stats {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
  max-width: 820px; margin: 48px auto 0;
}
.hero-stat { flex: 0 1 180px; }
.hero-stat small, .rate-strip small { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); opacity: .8; }
.hero-stat {
  position: relative; padding: 16px 12px; border-radius: 10px; text-align: center; overflow: hidden;
  background: linear-gradient(180deg, rgba(40, 12, 10, .55), rgba(12, 5, 5, .55));
  border: 1px solid rgba(255, 106, 43, .18);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 200, 150, .08), 0 10px 30px rgba(0, 0, 0, .4);
  transition: transform .25s var(--ease-out), border-color .25s, box-shadow .25s;
}
.hero-stat strong { display: block; font: 900 26px var(--font-title); color: #fff1e0; text-shadow: 0 0 18px rgba(255, 90, 30, .6); font-variant-numeric: tabular-nums; }
.hero-stat span { font-size: 11px; text-transform: uppercase; letter-spacing: .18em; color: var(--muted); }
.hero-stat:hover { border-color: rgba(255, 106, 43, .55); box-shadow: 0 0 30px rgba(255, 70, 20, .25), 0 10px 30px rgba(0, 0, 0, .4); }

.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; z-index: 2; translate: -50% 0;
  width: 26px; height: 42px; border: 2px solid rgba(232, 217, 191, .45); border-radius: 14px;
  transition: border-color .2s;
}
.scroll-cue:hover { border-color: var(--ember); }
.scroll-cue span {
  position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px;
  background: var(--ember); box-shadow: 0 0 8px var(--ember); animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
#main-content { scroll-margin-top: 60px; }

/* Page headings */
.page-head { position: relative; padding-block: 72px 28px; }
.page-head h1 {
  background: linear-gradient(180deg, #fff3e2 10%, var(--bone) 45%, var(--ember) 120%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 4px 18px rgba(196, 22, 28, .35));
  display: inline-block;
}
.page-head::after {
  content: ""; position: absolute; left: 50%; top: 0; width: 70%; height: 220px; translate: -50% -40%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(196, 22, 28, .18), transparent);
}

/* Scroll reveal */
.fx .reveal { opacity: 0; }
.fx .reveal.is-in { opacity: 1; animation: reveal-in .9s var(--ease-out) var(--reveal-delay, 0ms) backwards; }
@keyframes reveal-in { from { opacity: 0; transform: translateY(28px) scale(.985); filter: blur(6px); } }
.fx .section-title.reveal::after { transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease-out) .25s; }
.fx .section-title.reveal.is-in::after { transform: scaleX(1); }

/* Cards: cursor spotlight, lift and glowing edge */
.card, .rate-strip div, .table-wrap { border-radius: 10px; transition: transform .3s var(--ease-out), border-color .3s, box-shadow .3s; }
.card::before { border-radius: 10px; }
.card::after, .rate-strip > div::after, .hero-stat::after, .package-body::after, .char-body::after, .reward-body::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 100, 40, .11), transparent 45%);
}
.rate-strip > div, .char-body, .reward-body { position: relative; }
.card:hover::after, .rate-strip > div:hover::after, .hero-stat:hover::after,
.package-body:hover::after, .char-body:hover::after, .reward-body:hover::after { opacity: 1; }
.card:hover { border-color: rgba(255, 106, 43, .35); box-shadow: inset 0 1px 0 rgba(255, 180, 120, .06), inset 0 0 40px rgba(0, 0, 0, .45), 0 18px 40px rgba(0, 0, 0, .55), 0 0 26px rgba(196, 22, 28, .15); }
.feature { transition: transform .2s var(--ease-out), border-color .3s, box-shadow .3s; }
.feature-icon {
  display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; font-size: 28px;
  background: radial-gradient(circle at 30% 25%, rgba(255, 106, 43, .3), rgba(142, 14, 18, .25) 60%, rgba(0, 0, 0, .2));
  border: 1px solid rgba(255, 106, 43, .25); box-shadow: 0 0 20px rgba(196, 22, 28, .2);
  transition: transform .4s var(--ease-out), box-shadow .4s;
}
.feature:hover .feature-icon { transform: scale(1.08) rotate(-4deg); box-shadow: 0 0 30px rgba(255, 70, 20, .45); }
.news { overflow: hidden; }
.news h3 { transition: color .2s; }
.news:hover h3 { color: #fff3e2; }

/* Lists & tables */
.status li, .rates li, .mini-rank li { transition: background .2s, padding .2s; border-radius: 4px; }
.rates li:hover, .mini-rank li:hover { background: rgba(196, 22, 28, .08); padding-inline: 8px; }
.rank-table tbody tr { transition: background .2s, box-shadow .2s; }
.rank-table tbody tr:hover { box-shadow: inset 3px 0 0 var(--ember); }
.table-wrap { overflow: auto; }
.tabs a { transition: color .2s, border-color .2s, background .2s, box-shadow .2s; }
.tabs a:hover { box-shadow: 0 0 16px rgba(255, 70, 20, .2); }

/* Forms */
.form input:not([type=checkbox]), .field select, .amount-field { transition: border-color .2s, box-shadow .25s; border-radius: 8px; }
.package-body, .char-body, .reward-body, .amount-chip { transition: border-color .2s, box-shadow .25s, transform .2s var(--ease-out); }
.char-option:hover .char-body, .reward-option:hover .reward-body, .package:hover .package-body { transform: translateY(-2px); }

/* Social icons */
.social-link { transition: color .15s, border-color .15s, background .15s, transform .25s var(--ease-out), box-shadow .25s; }
.social-link:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 8px 20px rgba(0, 0, 0, .5); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0a0505; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--ember), var(--blood)); border-radius: 10px; border: 2px solid #0a0505; }

@media (max-width: 860px) {
  .hero { min-height: 92svh; padding: 100px 0 90px; }
  .hero-stats { gap: 10px; margin-top: 36px; }
  .hero-stat { flex: 1 1 130px; }
  .hero-stat strong { font-size: 22px; }
  .is-home .demo-bar { margin-top: 64px; }
  .topbar.is-scrolled .topbar-inner { height: 56px; }
  .topbar.is-scrolled .logo-img { height: 38px; }
  .is-home .topbar:not(.is-scrolled) .nav.open { background: rgba(10, 5, 5, .96); }
  .scroll-cue { display: none; }
  .page-head { padding-block: 48px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-fog i, .hero-logo, .scroll-cue span { animation: none; }
  .btn::after { display: none; }
}

/* ==========================================================================
   2026 refresh: launch / beta status, ambient light, ticker, highlights,
   animated borders and shine. Everything animated stops for reduced motion.
   ========================================================================== */
:root {
  --beta: #ffb347;
  --beta-2: #ff7a1a;
  --glass: rgba(24, 12, 10, .55);
}

/* Ambient drifting light behind every page */
.ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ambient i {
  position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 22, 28, .16), transparent 62%);
  filter: blur(20px); opacity: .8;
}
.ambient i:nth-child(1) { top: -25vmax; left: -15vmax; }
.ambient i:nth-child(2) { bottom: -30vmax; right: -20vmax; background: radial-gradient(circle, rgba(255, 106, 43, .10), transparent 62%); }
.ambient i:nth-child(3) { top: 30%; left: 40%; width: 40vmax; height: 40vmax; background: radial-gradient(circle, rgba(120, 10, 20, .12), transparent 60%); }
html.fx .ambient i:nth-child(1) { animation: drift-a 26s ease-in-out infinite alternate; }
html.fx .ambient i:nth-child(2) { animation: drift-b 32s ease-in-out infinite alternate; }
html.fx .ambient i:nth-child(3) { animation: drift-a 40s ease-in-out infinite alternate-reverse; }
@keyframes drift-a { to { transform: translate(12vmax, 8vmax) scale(1.15); } }
@keyframes drift-b { to { transform: translate(-10vmax, -12vmax) scale(1.1); } }

/* Launch bar under the menu (beta / opening countdown) */
.launch-bar {
  position: relative; overflow: hidden;
  background: linear-gradient(90deg, rgba(90, 8, 10, .85), rgba(30, 8, 6, .9) 40%, rgba(30, 8, 6, .9) 60%, rgba(90, 8, 10, .85));
  border-bottom: 1px solid rgba(255, 106, 43, .25);
  font-size: 13px;
}
.launch-bar.is-beta { background: linear-gradient(90deg, rgba(120, 50, 0, .75), rgba(30, 12, 4, .92) 40%, rgba(30, 12, 4, .92) 60%, rgba(120, 50, 0, .75)); border-bottom-color: rgba(255, 179, 71, .3); }
.launch-bar::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 220, 180, .10) 50%, transparent 70%);
  transform: translateX(-100%);
}
html.fx .launch-bar::after { animation: sweep 6s ease-in-out infinite; }
.launch-bar-inner { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding-block: 8px; text-align: center; }
.launch-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px; border-radius: 999px;
  font: 700 11px var(--font-title); letter-spacing: .14em; text-transform: uppercase;
  color: #fff1e0; background: linear-gradient(180deg, #e2381f, #8e0e12); border: 1px solid rgba(255, 122, 64, .7);
}
.is-beta .launch-chip { color: #1a0d02; background: linear-gradient(180deg, var(--beta), var(--beta-2)); border-color: #ffd08a; }
.launch-chip i, .phase-badge i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; }
html.fx .launch-chip i, html.fx .phase-badge i { animation: ping 1.8s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.launch-text { color: var(--bone); }
.launch-clock { font-variant-numeric: tabular-nums; color: var(--muted); }
.launch-clock b { color: var(--ember); font-family: var(--font-title); letter-spacing: .04em; margin-left: 4px; }
.is-beta .launch-clock b { color: var(--beta); }
@keyframes sweep { 0%, 35% { transform: translateX(-100%); } 70%, 100% { transform: translateX(100%); } }

/* Hero: phase badge, light rays, glass stats */
.phase-badge {
  display: flex; width: fit-content; align-items: center; gap: 10px; margin: 0 auto 18px; padding: 6px 16px 6px 12px;
  border-radius: 999px; background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 106, 43, .35);
  font: 700 12px var(--font-title); letter-spacing: .16em; text-transform: uppercase; color: var(--ember);
  box-shadow: 0 0 30px rgba(196, 22, 28, .25);
}
.phase-badge span { font: 500 13px var(--font-body); letter-spacing: 0; text-transform: none; color: var(--bone); padding-left: 10px; border-left: 1px solid rgba(255, 106, 43, .3); }
.phase-badge.is-beta { color: var(--beta); border-color: rgba(255, 179, 71, .45); box-shadow: 0 0 30px rgba(255, 140, 30, .25); }
.phase-badge.is-live { color: var(--green); border-color: rgba(76, 175, 80, .4); box-shadow: 0 0 30px rgba(76, 175, 80, .15); }
.hero-rays {
  position: absolute; inset: -20% -10% auto; height: 120%; pointer-events: none; opacity: .35;
  background: conic-gradient(from 180deg at 50% 0%, transparent 0deg, rgba(255, 90, 30, .18) 12deg, transparent 24deg, transparent 40deg, rgba(196, 22, 28, .16) 52deg, transparent 64deg, transparent 300deg, rgba(196, 22, 28, .16) 308deg, transparent 320deg, rgba(255, 90, 30, .18) 336deg, transparent 348deg);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
}
html.fx .hero-rays { animation: rays 14s ease-in-out infinite alternate; transform-origin: 50% 0; }
@keyframes rays { from { transform: rotate(-4deg); opacity: .25; } to { transform: rotate(4deg); opacity: .45; } }
.countdown-label { margin: 40px 0 -28px; font: 700 12px var(--font-title); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.hero-stat, .countdown div { background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* Ticker of server facts */
.ticker {
  position: relative; overflow: hidden; border-block: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(23, 14, 12, .9), rgba(12, 6, 5, .9));
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track { display: flex; width: max-content; }
html.fx .ticker-track { animation: ticker 60s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-group { display: flex; }
.ticker-item { padding: 14px 28px; white-space: nowrap; color: var(--muted); font-size: 14px; position: relative; }
.ticker-item::after { content: "\2726"; position: absolute; right: -6px; color: var(--blood); }
.ticker-item b { font-family: var(--font-title); color: var(--ember); letter-spacing: .03em; margin-right: 4px; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Big section titles with a fire gradient word */
.display-title { font-size: clamp(30px, 4.4vw, 48px); line-height: 1.1; }
.text-fire {
  background: linear-gradient(90deg, #ffb070, var(--ember) 30%, #ff2a1a 60%, #ffb070);
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
}
html.fx .text-fire { animation: fire-text 6s linear infinite; }
@keyframes fire-text { to { background-position: 200% center; } }

/* Home highlights */
.highlights { padding-block: 72px 24px; }
.highlights-head { text-align: center; margin-bottom: 40px; }
.highlights-head .eyebrow { margin-bottom: 10px; }
.highlight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 32px; }
.highlight, .feature {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, rgba(30, 16, 13, .92), rgba(16, 9, 8, .96));
  border: 1px solid var(--line); border-radius: 14px;
}
.highlight { padding: 28px 24px 24px; transition: transform .3s, box-shadow .3s; }
.highlight::before, .feature::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--angle, 0deg), transparent 0 60%, var(--ember) 75%, #ffd08a 80%, var(--blood) 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .3s;
}
.highlight:hover::before, .feature:hover::before { opacity: 1; }
html.fx .highlight:hover::before, html.fx .feature:hover::before { animation: spin-border 3s linear infinite; }
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes spin-border { to { --angle: 360deg; } }
.highlight:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, .5), 0 0 40px rgba(196, 22, 28, .18); }
.highlight-num { position: absolute; top: 14px; right: 18px; font: 900 44px var(--font-title); color: rgba(196, 22, 28, .14); line-height: 1; }
.highlight-icon {
  width: 54px; height: 54px; display: grid; place-items: center; font-size: 28px; margin-bottom: 16px; border-radius: 12px;
  background: radial-gradient(circle at 30% 25%, rgba(255, 106, 43, .35), rgba(90, 10, 12, .6));
  border: 1px solid rgba(255, 106, 43, .35); box-shadow: 0 0 22px rgba(196, 22, 28, .3);
}
.highlight h3 { font-size: 19px; margin-bottom: 8px; }
.highlight p { margin: 0; color: var(--muted); }

/* Launch card in the home sidebar */
.launch-card { border-color: rgba(255, 106, 43, .35); background: linear-gradient(160deg, rgba(90, 10, 12, .35), var(--card) 60%); }
.launch-card.is-beta { border-color: rgba(255, 179, 71, .45); background: linear-gradient(160deg, rgba(140, 70, 0, .35), var(--card) 60%); }
.live-badge.is-beta { color: var(--beta); border-color: rgba(255, 179, 71, .5); }
.launch-card-headline { margin: 4px 0 6px; color: var(--bone); font-weight: 600; }
.launch-card-clock { margin: 12px 0 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.launch-card-clock b { display: block; margin-top: 2px; font: 700 26px var(--font-title); color: var(--ember); letter-spacing: .03em; }
.launch-card.is-beta .launch-card-clock b { color: var(--beta); }

/* Shine sweep on buttons */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 240, 220, .35), transparent); transform: skewX(-20deg);
}
html.fx .btn:hover::after { animation: btn-shine .8s ease; }
@keyframes btn-shine { to { left: 130%; } }

/* Glass cards */
.card { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

@media (max-width: 960px) { .highlight-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .highlight-grid { grid-template-columns: 1fr; }
  .launch-sep { display: none; }
  .launch-text { display: flex; flex-direction: column; }
  .phase-badge { flex-direction: column; gap: 4px; border-radius: 14px; }
  .phase-badge span { border-left: 0; padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { flex-wrap: wrap; width: auto; }
  .ticker-group[aria-hidden] { display: none; }
}

/* Nothing may widen the page on phones (the hero rays reach past its sides). */
body { overflow-x: clip; }
.hero { overflow: hidden; }
.launch-text { min-width: 0; }
.page-head .eyebrow { display: flex; width: fit-content; margin-bottom: 10px; }
.nav .btn { white-space: nowrap; }
/* Admin > Backups */
.admin-grid { grid-template-columns: minmax(0, 1fr) 320px; }
.backup-file { white-space: normal; word-break: break-all; min-width: 160px; }
.row-actions form { display: inline-block; vertical-align: middle; }
.row-actions .btn { margin: 0; vertical-align: middle; }

/* ==========================================================================
   Responsive: phones and tablets
   ========================================================================== */
/* The home banner starts below the fixed menu, whatever its height (launch bar, wrapped lines). */
body.is-home .hero { padding-top: calc(var(--topbar-h, 112px) + 40px); }

@media (max-width: 620px) {
  /* Launch bar: one compact row (badge + countdown); the home banner shows the full date. */
  .launch-bar-inner { flex-wrap: nowrap; gap: 10px; padding-block: 6px; font-size: 12px; }
  .launch-text { display: none; }
  .launch-bar-inner:not(:has(.launch-clock)) .launch-text { display: block; }
  .launch-bar-inner:not(:has(.launch-clock)) .launch-text .muted { display: none; }
  .launch-clock { white-space: nowrap; }
  body.is-home .hero { padding-top: calc(var(--topbar-h, 100px) + 24px); }

  /* Rankings: only the columns that matter on a phone. Players: #, Name, PvP, PK, Status. Clans: #, Clan, Level, Members, Reputation. */
  .rank-table:has(tbody[data-mode="table"]) th:nth-child(3), .rank-table:has(tbody[data-mode="table"]) td:nth-child(3),
  .rank-table:has(tbody[data-mode="table"]) th:nth-child(4), .rank-table:has(tbody[data-mode="table"]) td:nth-child(4),
  .rank-table:has(tbody[data-mode="table"]) th:nth-child(5), .rank-table:has(tbody[data-mode="table"]) td:nth-child(5),
  .rank-table:has(tbody[data-mode="clan"]) th:nth-child(4), .rank-table:has(tbody[data-mode="clan"]) td:nth-child(4),
  .rank-table:has(tbody[data-mode="clan"]) th:nth-child(6), .rank-table:has(tbody[data-mode="clan"]) td:nth-child(6) { display: none; }
  .rank-table th, .rank-table td { padding: 10px 8px; }
  .tabs a { flex: 1 1 auto; text-align: center; }

  /* Bigger touch targets and readable text. */
  .nav a { padding-block: 6px; }
  .hero-actions .btn { width: 100%; max-width: 320px; }
  .tagline { font-size: 16px; }
  .display-title { font-size: 28px; }
  .card { padding: 18px; }
  .countdown { gap: 8px; }
  .countdown div { min-width: 0; flex: 1; }
  .ticker-item { padding: 12px 18px; font-size: 13px; }
}
@media (max-width: 620px) { .eyebrow { letter-spacing: .16em; font-size: 12px; } .eyebrow::before, .eyebrow::after { width: 20px; } }

/* ==========================================================================
   Choose your race: animated SVG characters (views/partials/races.php)
   ========================================================================== */
.races { padding-block: 40px 24px; }
.races-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.race-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.race {
  position: relative; overflow: hidden; text-align: center; padding: 10px 14px 20px; border-radius: 14px;
  background: radial-gradient(ellipse 90% 60% at 50% 35%, color-mix(in srgb, var(--race) 14%, transparent), transparent 70%),
              linear-gradient(180deg, rgba(30, 16, 13, .92), rgba(12, 7, 6, .96));
  border: 1px solid var(--line); transition: transform .35s, border-color .35s, box-shadow .35s;
}
.race:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--race) 60%, transparent); box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 0 36px color-mix(in srgb, var(--race) 25%, transparent); }
.race h3 { font-size: 19px; margin: 4px 0 6px; color: var(--bone); }
.race p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.race-art { display: block; width: 100%; max-width: 190px; height: auto; margin: 0 auto; overflow: visible; }

/* Drawing: dark bodies with a glowing rim in the race colour */
.race-art .ch-aura { fill: var(--race); opacity: .10; filter: blur(14px); transition: opacity .35s; }
.race-art .ch-shadow { fill: #000; opacity: .55; }
.race-art .ch-fill, .race-art .ch-cape { fill: url(#ch-dark); stroke: color-mix(in srgb, var(--race) 70%, #000); stroke-width: 1.1; stroke-linejoin: round; }
.race-art .ch-cape { fill: url(#ch-dark-2); opacity: .95; }
.race-art .ch-trim, .race-art .ch-rune { fill: none; stroke: color-mix(in srgb, var(--race) 55%, #000); stroke-width: 1.4; stroke-linecap: round; }
.race-art .ch-rune { stroke: var(--race); stroke-width: 1.2; opacity: .8; }
.race-art .ch-eye { fill: var(--race); filter: drop-shadow(0 0 3px var(--race)); }
.race-art .ch-blade { fill: color-mix(in srgb, var(--race) 35%, #e9e2d6); stroke: var(--race); stroke-width: .8; filter: drop-shadow(0 0 4px var(--race)); }
.race-art .ch-shield { fill: url(#ch-dark-2); stroke: var(--race); stroke-width: 1.4; }
.race-art .ch-plume, .race-art .ch-hair { fill: color-mix(in srgb, var(--race) 45%, #2a1410); }
.race-art .ch-face { fill: #050304; }
.race-art .ch-tusk { fill: #efe6d2; }
.race-art .ch-horn { fill: #d9cbb0; stroke: #6e5a45; stroke-width: .8; }
.race-art .ch-beard { fill: color-mix(in srgb, var(--race) 40%, #3a2416); stroke: color-mix(in srgb, var(--race) 70%, #000); stroke-width: .8; }
.race-art .ch-bow { fill: none; stroke: color-mix(in srgb, var(--race) 50%, #6b4a2c); stroke-width: 3.2; stroke-linecap: round; }
.race-art .ch-string { fill: none; stroke: #e8e0cf; stroke-width: .7; opacity: .7; }
.race-art .ch-haft { fill: none; stroke: #4a2e1c; stroke-width: 4; stroke-linecap: round; }
.race-art .ch-sparks circle { fill: var(--race); opacity: 0; }

/* Motion (only when the visitor allows animations) */
.race-art .ch-body, .race-art .ch-cape, .race-art .ch-weapon { transform-box: fill-box; }
.race-art .ch-body { transform-origin: 50% 100%; }
.race-art .ch-cape { transform-origin: 50% 0%; }
.race-art .ch-weapon { transform-origin: 50% 100%; }
html.fx .race-art .ch-body { animation: ch-breathe 3.2s ease-in-out infinite; }
html.fx .race-art .ch-cape { animation: ch-sway 4.6s ease-in-out infinite; }
html.fx .race-art .ch-weapon { animation: ch-bob 3.2s ease-in-out infinite; }
html.fx .race-art .ch-eye { animation: ch-glow 2.4s ease-in-out infinite; }
html.fx .race-art .ch-blade { animation: ch-glow 2.8s ease-in-out infinite; }
html.fx .race-art .ch-sparks circle { animation: ch-spark 4s ease-in infinite; }
html.fx .race-art .ch-sparks circle:nth-child(2) { animation-delay: .7s; }
html.fx .race-art .ch-sparks circle:nth-child(3) { animation-delay: 1.4s; }
html.fx .race-art .ch-sparks circle:nth-child(4) { animation-delay: 2.1s; }
html.fx .race-art .ch-sparks circle:nth-child(5) { animation-delay: 2.8s; }
html.fx .race-art .ch-sparks circle:nth-child(6) { animation-delay: 3.4s; }
.race:nth-child(2) .race-art * { animation-delay: -.6s; }
.race:nth-child(3) .race-art * { animation-delay: -1.2s; }
.race:nth-child(4) .race-art * { animation-delay: -1.8s; }
.race:nth-child(5) .race-art * { animation-delay: -2.4s; }
.race:hover .ch-aura { opacity: .28; }
html.fx .race:hover .ch-weapon { animation: ch-strike .9s ease-in-out infinite alternate; }
html.fx .race:hover .ch-eye { animation-duration: .8s; }
@keyframes ch-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.015) translateY(-1px); } }
@keyframes ch-sway { 0%, 100% { transform: skewX(0deg); } 50% { transform: skewX(-3deg); } }
@keyframes ch-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-2px) rotate(-1.5deg); } }
@keyframes ch-strike { from { transform: rotate(0deg); } to { transform: rotate(-7deg) translateY(-3px); } }
@keyframes ch-glow { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes ch-spark { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .9; } 100% { opacity: 0; transform: translateY(-120px); } }

@media (max-width: 1000px) { .race-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) {
  .race-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .race:last-child { grid-column: 1 / -1; }
  .race:last-child .race-art { max-width: 150px; }
  .race p { font-size: 12.5px; }
}

/* ==========================================================================
   Hero background: original Dark Elf illustration behind the logo
   ========================================================================== */
.hero-darkelf {
  position: absolute; left: 50%; bottom: 0; z-index: 0; pointer-events: none;
  width: min(820px, 120vw); height: auto; max-height: 100%;
  --de-x: -50%; transform: translateX(var(--de-x)); opacity: .5;
  mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000 40%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000 40%, transparent 78%);
}
.hero-darkelf .de-cloak { fill: url(#de-cloak); }
.hero-darkelf .de-hood { fill: url(#de-hood); stroke: rgba(180, 108, 255, .35); stroke-width: 2; }
.hero-darkelf .de-hood-edge { fill: none; stroke: rgba(200, 140, 255, .55); stroke-width: 2.5; filter: url(#de-glow); }
.hero-darkelf .de-ear { fill: #1d0d2a; stroke: rgba(180, 108, 255, .4); stroke-width: 2; }
.hero-darkelf .de-face { fill: url(#de-face); }
.hero-darkelf .de-hair { fill: none; stroke: url(#de-hair); stroke-width: 6; stroke-linecap: round; opacity: .35; }
.hero-darkelf .de-eye { fill: #e0c2ff; filter: url(#de-glow); }
.hero-darkelf .de-mark { stroke: #b46cff; stroke-width: 3; stroke-linecap: round; opacity: .7; filter: url(#de-glow); }
.hero-darkelf .de-rune { fill: none; stroke: #b46cff; stroke-width: 3; stroke-linecap: round; opacity: .35; filter: url(#de-glow); }
.hero-darkelf .de-blade { fill: url(#de-blade); opacity: .85; filter: url(#de-glow); }
.hero-darkelf .de-guard, .hero-darkelf .de-grip { fill: #241032; stroke: rgba(180, 108, 255, .6); stroke-width: 2; }
.hero-darkelf .de-figure, .hero-darkelf .de-dagger { transform-box: view-box; transform-origin: 50% 100%; }
html.fx .hero-darkelf { animation: de-hover 9s ease-in-out infinite; }
html.fx .hero-darkelf .de-eye { animation: de-eyes 3.6s ease-in-out infinite; }
html.fx .hero-darkelf .de-rune { animation: de-runes 5s ease-in-out infinite; }
html.fx .hero-darkelf .de-dagger { animation: de-dagger 7s ease-in-out infinite; }
@keyframes de-hover { 0%, 100% { transform: translateX(var(--de-x)) translateY(0); } 50% { transform: translateX(var(--de-x)) translateY(-12px); } }
/* Wide screens: the Dark Elf stands at the right of the banner, full height, next to the logo. */
@media (min-width: 1000px) {
  .hero-darkelf {
    left: auto; right: -6vw; --de-x: 0px; width: auto; height: 80%; max-height: none; opacity: .5;
    mask-image: linear-gradient(90deg, transparent 0%, #000 48%), linear-gradient(0deg, transparent 0%, #000 25%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 48%), linear-gradient(0deg, transparent 0%, #000 25%);
    mask-composite: intersect; -webkit-mask-composite: source-in;
  }
}
@keyframes de-eyes { 0%, 100% { opacity: 1; } 45% { opacity: .55; } 50% { opacity: .1; } 55% { opacity: .9; } }
@keyframes de-runes { 0%, 100% { opacity: .2; } 50% { opacity: .55; } }
@keyframes de-dagger { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@media (max-width: 620px) { .hero-darkelf { opacity: .32; width: 140vw; bottom: 8%; } }

/* Character images in the banner (THEME_HERO_CHARACTER = left, THEME_HERO_CHARACTER_RIGHT = right; the drawn Dark Elf
   stands on the right when no right image is set). Transparent images, faded at the bottom, hovering slowly. */
.hero-character {
  position: absolute; bottom: 0; z-index: 0; pointer-events: none;
  height: 78%; width: auto; max-width: 48vw; object-fit: contain; object-position: bottom;
  opacity: .78; filter: brightness(.9) contrast(1.05) drop-shadow(0 0 34px rgba(140, 70, 220, .35));
  mask-image: linear-gradient(0deg, transparent 0%, #000 26%);
  -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 26%);
}
.hero-left { left: max(-40px, calc(50% - 760px)); }
.hero-right { right: max(-40px, calc(50% - 760px)); }
html.fx .hero-character { animation: char-hover 9s ease-in-out infinite; }
html.fx .hero-right { animation-delay: -4.5s; }
@keyframes char-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
/* Tablets and phones: no room beside the logo, so only the left character, faint and centered behind the text. */
@media (max-width: 999px) {
  .hero-right, .hero-character.hero-right ~ .hero-darkelf { display: none; }
  .hero-left { left: 50%; height: 62%; max-width: none; opacity: .3; translate: -50% 0; bottom: 8%; }
  .hero-left ~ .hero-darkelf { display: none; }
}
/* Side characters: small enough to stay in the margins beside the logo (logo ~530px wide in the middle). */
@media (min-width: 1100px) {
  .hero-character { height: auto; width: min(380px, calc(50vw - 300px)); max-width: none; bottom: 10%; }
  .hero-left { left: max(10px, calc(50% - 690px)); }
  .hero-right { right: max(10px, calc(50% - 690px)); }
  .hero-darkelf:not(.hero-character) { width: min(380px, calc(50vw - 300px)); height: auto; right: max(10px, calc(50% - 690px)); bottom: 10%; }
}
@media (min-width: 1000px) and (max-width: 1099px) { .hero-character, .hero-darkelf { display: none; } }
/* Side characters at the height of the logo, not at the bottom of the banner. */
@media (min-width: 1100px) {
  .hero-character, .hero-darkelf:not(.hero-character) { bottom: auto; top: calc(var(--topbar-h, 112px) + 110px); }
}
/* No mask beside the logo: a mask would cut the glow off at the image's box (a visible rectangle). */
@media (min-width: 1100px) { .hero-character { mask-image: none; -webkit-mask-image: none; } }

/* ==========================================================================
   Fire: flames along the bottom of the home banner (canvas, main.js), heat glow, burning logo
   ========================================================================== */
.hero-fire {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none;
  mask-image: linear-gradient(0deg, #000 0%, #000 20%, transparent 45%);
  -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 20%, transparent 45%);
}
.hero-heat {
  position: absolute; left: -10%; right: -10%; bottom: -40px; height: 42%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 45% 70% at 20% 100%, rgba(255, 90, 20, .35), transparent 70%),
    radial-gradient(ellipse 50% 80% at 55% 100%, rgba(255, 60, 10, .4), transparent 70%),
    radial-gradient(ellipse 40% 70% at 85% 100%, rgba(255, 110, 30, .3), transparent 70%);
  filter: blur(18px);
}
html.fx .hero-heat { animation: heat-breathe 3.4s ease-in-out infinite alternate; }
@keyframes heat-breathe { from { opacity: .7; transform: scaleY(.92); } to { opacity: 1; transform: scaleY(1.08); } }
.hero-inner { z-index: 2; }

/* The logo burns: a flickering fire glow behind it. */
.hero-title-img { position: relative; }
.hero-title-img::before {
  content: ""; position: absolute; left: 50%; top: 55%; width: 70%; height: 70%; z-index: -1; pointer-events: none;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 120, 30, .45), rgba(200, 30, 10, .2) 45%, transparent 70%);
  filter: blur(30px);
}
html.fx .hero-title-img::before { animation: logo-fire 2.6s infinite; }
@keyframes logo-fire {
  0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(1); }
  12% { opacity: 1; transform: translate(-50%, -52%) scale(1.06); }
  24% { opacity: .8; }
  37% { opacity: .95; transform: translate(-50%, -49%) scale(1.03); }
  61% { opacity: .7; }
  78% { opacity: 1; transform: translate(-50%, -51%) scale(1.08); }
}

/* Fire line running along the top of the ticker. */
.ticker::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; z-index: 1;
  background: linear-gradient(90deg, transparent, #ff2a1a, #ffb347, #ff2a1a, transparent);
  background-size: 50% 100%; background-repeat: no-repeat;
}
html.fx .ticker::before { animation: fire-run 4s linear infinite; }
@keyframes fire-run { from { background-position: -60% 0; } to { background-position: 160% 0; } }

/* Buttons catch fire on hover. */
.btn:not(.btn-ghost):hover { box-shadow: inset 0 1px 0 rgba(255, 220, 170, .45), 0 0 18px rgba(255, 90, 30, .7), 0 0 42px rgba(255, 50, 10, .45); }
html.fx .btn:not(.btn-ghost):hover { animation: btn-burn 1.2s ease-in-out infinite alternate; }
@keyframes btn-burn { from { filter: brightness(1); } to { filter: brightness(1.15) saturate(1.2); } }

/* HopZone vote banner (views/layout.php): fixed in the bottom-right corner, smaller on phones. */
.vote-banner { position: fixed; z-index: 99999; right: 0; bottom: 0; line-height: 0; }
.vote-banner img { display: block; width: 140px; height: 120px; border: 0; }
@media (max-width: 620px) { .vote-banner img { width: 84px; height: 72px; } }
.vote-count { color: var(--ember); }
/* Vote banners stacked in the bottom-right corner (L2Network above HopZone). */
.vote-banners { position: fixed; z-index: 99999; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.vote-banners .vote-banner { position: static; }
.vote-banner-l2network { line-height: 0; }
.vote-banner-l2network img { display: block; max-width: 140px; height: auto; border: 0; }
@media (max-width: 620px) { .vote-banner-l2network img { max-width: 84px; } }
/* L2JBrasil vote banner: top-right corner, below the menu so it never covers its buttons. */
.vote-l2jbrasil { position: fixed; top: var(--topbar-h, 112px); right: 0; z-index: 9999; width: 235px; line-height: 0; }
.vote-l2jbrasil img { max-width: 100%; height: auto; border: 0; }
@media (max-width: 620px) { .vote-l2jbrasil { width: 120px; } }
.vote-banner-top100 { line-height: 0; }
.vote-banner-top100 img { display: block; max-width: 140px; height: auto; border: 0; }
@media (max-width: 620px) { .vote-banner-top100 img { max-width: 84px; } }