/* OldLands website. Palette, type and tone from the OldLands brandbook (oldlands_brand/Brandbook_OldLands.md):
   dark stone and wood, gold lettering, parchment map; Cinzel for headings, Alegreya for text,
   Pixelify Sans for numbers (Cinzel's "1" looks like "I"). Fonts are self-hosted (SIL OFL), no external requests. */
@font-face { font-family: "Cinzel"; src: url(../fonts/Cinzel.woff2) format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url(../fonts/Alegreya.woff2) format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url(../fonts/Alegreya-Italic.woff2) format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url(../fonts/PixelifySans.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --gold: #D9A441; --gold-light: #F6DC8E; --bronze: #8A5A1C;
  --stone-dark: #1E1914; --stone: #3A322A; --stone-mid: #2A231C; --parchment: #EAD9B0;
  --torch: #E0702A; --moss: #5E7344; --moss-light: #8FAA6B; --text: #F1E6CC; --ink: #2B2016; --outline: #140D07;
  --muted: #B8A888; --red: #E0533A; --line: rgba(217, 164, 65, .28);
  --radius: 6px; --wrap: 1200px;
  --f-head: "Cinzel", Georgia, serif; --f-text: "Alegreya", Georgia, serif; --f-num: "Pixelify Sans", "Alegreya", monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--stone-dark); color: var(--text); font: 18px/1.55 var(--f-text);
  background-image: radial-gradient(ellipse at 50% 0, rgba(217,164,65,.07), transparent 60%);
}
img { max-width: 100%; height: auto; }
a { color: var(--gold-light); text-decoration-color: rgba(246,220,142,.35); text-underline-offset: 3px; }
a:hover { color: #fff3c9; text-decoration-color: currentColor; }
h1, h2, h3 { font-family: var(--f-head); color: var(--gold); line-height: 1.2; letter-spacing: .02em; }
h1 { font-size: 30px; font-weight: 900; margin: 0 0 14px; text-shadow: 0 2px 0 var(--outline); }
h1 small { font-size: .6em; color: var(--muted); font-weight: 700; }
h2 { font-size: 21px; font-weight: 700; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
h3 { font-size: 17px; font-weight: 700; margin: 18px 0 6px; color: var(--gold-light); }
p { margin: 0 0 12px; }
code { font-family: var(--f-num); font-size: .9em; background: rgba(0,0,0,.35); color: var(--gold-light); padding: 1px 6px; border-radius: 4px; }
.num { font-family: var(--f-text); font-variant-numeric: lining-nums tabular-nums; font-weight: 700; }
/* Pixelify Sans only for the big counters: in small sizes its 1/7 and 5/S are too alike */
.numcard b { font-family: var(--f-num); font-weight: 500; }
.muted { color: var(--muted); }
.small { font-size: 15px; }
.gold { color: var(--gold); }
.ok { color: var(--moss-light); }
.bad { color: var(--red); }
.nowrap { white-space: nowrap; }
.r { text-align: right; }
.sr, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--gold); color: var(--ink); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }

/* ---------------------------------------------------------------- status bar (every page) */
.statusbar { background: #120e0a; border-bottom: 1px solid var(--line); font-size: 15px; }
.statusbar-in { display: flex; align-items: center; gap: 18px; min-height: 38px; flex-wrap: wrap; }
.statusbar a { color: var(--text); text-decoration: none; }
.statusbar .stat .n { font-family: var(--f-text); font-variant-numeric: lining-nums tabular-nums; font-weight: 700; color: var(--gold-light); font-size: 17px; }
.statusbar .bans .n { color: var(--red); }
.statusbar .bans { color: #f0b8a8; }
.srv { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }
.srv .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 6px var(--red); }
.srv.up .dot { background: #7fcf5a; box-shadow: 0 0 8px #7fcf5a; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.grow { flex: 1; }
.langs { display: flex; gap: 2px; }
.langs a { font-family: var(--f-num); font-size: 13px; padding: 2px 6px; border-radius: 4px; color: var(--muted); }
.langs a.on { color: var(--ink); background: var(--gold); }
.acc-link { font-family: var(--f-head); font-weight: 700; font-size: 14px; color: var(--gold) !important; }

/* ---------------------------------------------------------------- header */
.site-head {
  background: #17120d url(../img/hero_dark.webp) center 40% / cover no-repeat;
  border-bottom: 2px solid var(--bronze); position: relative;
}
.site-head::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,13,7,.25), rgba(20,13,7,.65)); pointer-events: none; }
.head-in { position: relative; z-index: 1; padding: 22px 16px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.logo img { display: block; width: 420px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); }
.is-home .head-in { padding: 34px 16px 40px; }
.is-home .logo img { width: 460px; }
.tagline { font-style: italic; font-size: 22px; color: var(--parchment); margin: 10px 0 2px; text-shadow: 0 2px 4px #000; }
.descline { font-family: var(--f-head); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: 0 0 18px; }
.descline span { color: var(--bronze); margin: 0 6px; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-block; font: 700 15px/1 var(--f-head); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  color: var(--gold-light); background: linear-gradient(180deg, #4a4035, var(--stone)); border: 1px solid var(--gold);
  box-shadow: inset 0 1px 0 rgba(246,220,142,.25), 0 2px 0 var(--outline); padding: 12px 20px; border-radius: var(--radius); cursor: pointer;
}
.btn:hover { color: #fff; background: linear-gradient(180deg, #5a4d3f, #433a30); }
.btn-torch { color: #fff7e8; background: linear-gradient(180deg, #ee8a45, var(--torch) 55%, #b9561c); border-color: #f6b27b; text-shadow: 0 1px 0 #6b2c06; }
.btn-torch:hover { background: linear-gradient(180deg, #f59a5a, #e87b37 55%, #c45f22); }
.btn-sm { font-size: 13px; padding: 8px 14px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------------------------------------------------------------- navigation */
.mainnav { background: linear-gradient(180deg, #3d342b, #2b241d); border-bottom: 1px solid var(--outline); box-shadow: 0 2px 0 rgba(217,164,65,.18); position: sticky; top: 0; z-index: 5; }
.menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.menu > li { position: relative; }
.menu > li > a { display: block; padding: 13px 16px; font: 700 15px var(--f-head); letter-spacing: .08em; text-transform: uppercase; color: var(--parchment); text-decoration: none; }
.menu > li.on > a, .menu > li > a:hover { color: var(--gold-light); background: rgba(0,0,0,.25); box-shadow: inset 0 -2px 0 var(--gold); }
.menu .sub { list-style: none; margin: 0; padding: 6px 0; position: absolute; left: 0; top: 100%; min-width: 200px; background: #241d17; border: 1px solid var(--line); box-shadow: 0 8px 20px rgba(0,0,0,.5); display: none; z-index: 6; }
.menu li:hover > .sub, .menu li:focus-within > .sub { display: block; }
.menu .sub a { display: block; padding: 7px 16px; color: var(--text); text-decoration: none; }
.menu .sub a:hover, .menu .sub a[aria-current] { background: var(--stone); color: var(--gold-light); }
.navtoggle { display: none; }

/* ---------------------------------------------------------------- top players ticker (moves all the time) */
.ticker { background: #120e0a; border-bottom: 1px solid var(--line); overflow: hidden; white-space: nowrap; font-size: 15px; }
.ticker-in { display: inline-flex; animation: ticker 60s linear infinite; }
.ticker:hover .ticker-in { animation-play-state: paused; }
.ticker ul { display: inline-flex; list-style: none; margin: 0; padding: 0; }
.ticker li { padding: 7px 26px 7px 0; }
.ticker li::before { content: "✦"; color: var(--bronze); margin-right: 12px; }
.tk-t { font-family: var(--f-head); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.tk-v { color: var(--muted); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- layout */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; padding-top: 24px; padding-bottom: 40px; }
.content { min-width: 0; }
.panel, .box {
  background: linear-gradient(180deg, rgba(58,50,42,.92), rgba(42,35,28,.92)); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 20px; box-shadow: 0 2px 0 var(--outline), inset 0 1px 0 rgba(246,220,142,.08);
}
.box h2 { font-size: 16px; letter-spacing: .1em; text-transform: uppercase; }
.sidebar .box { padding: 14px 16px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 16px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; text-align: right; }
.kv-wide { grid-template-columns: 200px 1fr; }
.kv-wide dd { text-align: left; }
.links { font-size: 15px; margin: 10px 0 0; }
.mini-login label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.mini-login input { margin-top: 3px; }
.coin { vertical-align: -2px; }

/* ---------------------------------------------------------------- top players carousel */
.tops { position: relative; }
.tops-track { position: relative; min-height: 176px; }
.top-card { position: absolute; inset: 0; opacity: 0; transform: translateX(14px); transition: opacity .6s, transform .6s; pointer-events: none; }
.top-card.on { opacity: 1; transform: none; pointer-events: auto; }
.top-title { font: 700 14px var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: var(--torch); margin: 0 0 8px; }
.top-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed rgba(217,164,65,.15); }
.top-row .place { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--stone-mid); border: 1px solid var(--bronze); font-size: 14px; }
.top-row.r1 .place { background: radial-gradient(circle at 35% 30%, var(--gold-light), var(--gold) 60%, var(--bronze)); color: var(--ink); border-color: var(--gold-light); }
.top-row.r1 .who a { font-size: 18px; font-weight: 700; }
.top-row .who { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.top-row .who a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-row small { color: var(--muted); font-size: 13px; font-family: var(--f-text); }
.top-row .val { text-align: right; line-height: 1.1; color: var(--gold-light); }
.top-row .val small { display: block; }
.tops-dots { display: flex; gap: 5px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.tops-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--stone); border: 1px solid var(--bronze); }
.tops-dots span.on { background: var(--gold); }

/* ---------------------------------------------------------------- front page */
.intro .lead { font-size: 20px; }
.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 16px 0 18px; }
.feature { background: rgba(0,0,0,.22); border-left: 3px solid var(--gold); padding: 10px 14px; border-radius: 0 var(--radius) var(--radius) 0; }
.feature h3 { margin-top: 0; }
.feature p { margin: 0; font-size: 16px; }
.numbers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 20px; }
.numcard { text-align: center; background: var(--stone-mid); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 6px; }
.numcard b { display: block; font-size: 30px; color: var(--gold-light); }
.numcard span { font-size: 14px; color: var(--muted); }
.numcard.bad b { color: var(--red); }
.news { border-bottom: 1px dashed var(--line); padding-bottom: 10px; margin-bottom: 12px; }
.news:last-child { border: 0; margin: 0; }
.news h3 { margin-top: 0; }
.news-date { color: var(--torch); font-size: 14px; margin: 0; }
.steps { padding-left: 22px; margin: 0; }
.steps li { margin-bottom: 6px; }
.deaths { list-style: none; padding: 0; margin: 0; }
.deaths li { padding: 6px 0; border-bottom: 1px dashed rgba(217,164,65,.14); }
.deaths .when { color: var(--muted); font-size: 14px; margin-right: 6px; }

/* ---------------------------------------------------------------- tables, filters */
.tablewrap { overflow-x: auto; margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--radius); }
.table { width: 100%; border-collapse: collapse; font-size: 16px; background: rgba(30,25,20,.6); }
.table th { font: 700 13px var(--f-head); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); background: var(--stone); text-align: left; padding: 9px 10px; }
.table th.r { text-align: right; }
.table th a { color: inherit; }
.table td { padding: 7px 10px; border-top: 1px solid rgba(217,164,65,.1); }
.table tbody tr:nth-child(even) td { background: rgba(255,255,255,.02); }
.table tbody tr:hover td { background: rgba(217,164,65,.07); }
.table tr.top1 td { background: rgba(217,164,65,.14); }
.table tr.top1 td:first-child { color: var(--gold-light); }
.table tr.top2 td, .table tr.top3 td { background: rgba(217,164,65,.06); }
.table tr.pvp td:last-child { border-left: 3px solid var(--red); }
.table.narrow { max-width: 420px; }
.filters, .search { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 12px; }
.filters label { display: flex; flex-direction: column; font-size: 14px; color: var(--muted); gap: 3px; }
.search input { flex: 1; min-width: 200px; }
input, select { font: 17px var(--f-text); color: var(--text); background: #15110d; border: 1px solid var(--bronze); border-radius: 4px; padding: 8px 10px; width: 100%; }
select { width: auto; }
input:focus, select:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 2px rgba(217,164,65,.25); }
input[type=radio], input[type=checkbox] { width: auto; accent-color: var(--gold); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chips a { font-size: 15px; padding: 4px 11px; border: 1px solid var(--line); border-radius: 16px; text-decoration: none; color: var(--parchment); background: rgba(0,0,0,.2); }
.chips a.on, .chips a:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.chips a small { color: inherit; opacity: .7; }
.chips-s a { font-size: 14px; }
.pager { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 16px; }
.pager a, .pager span { padding: 3px 10px; border: 1px solid var(--line); border-radius: 4px; text-decoration: none; }
.pager .on { background: var(--gold); color: var(--ink); }
.empty { padding: 26px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); }
.tag { display: inline-block; font: 700 11px/1 var(--f-head); letter-spacing: .08em; text-transform: uppercase; padding: 4px 7px 3px; border-radius: 3px; background: var(--stone); color: var(--parchment); vertical-align: 2px; }
.tag-green { background: var(--moss); color: #eef5e2; }
.tag-red { background: #8d2a19; color: #ffe1d8; }
.tag-torch { background: var(--torch); color: #fff; }
.crumbs { font-size: 15px; margin-bottom: 4px; }
.show-s { display: none; }
.lead-s { font-size: 19px; }

/* ---------------------------------------------------------------- notices, forms */
.notice { padding: 11px 14px; border-radius: var(--radius); margin: 0 0 16px; border: 1px solid; }
.notice-ok { background: rgba(94,115,68,.25); border-color: var(--moss-light); }
.notice-error { background: rgba(141,42,25,.3); border-color: var(--red); }
.notice-warn { background: rgba(224,112,42,.15); border-color: var(--torch); }
.notice-info { background: rgba(217,164,65,.1); border-color: var(--line); }
.form { max-width: 560px; }
.field { margin-bottom: 14px; border: 0; padding: 0; }
.field label, .field legend { display: block; font-weight: 700; margin-bottom: 4px; color: var(--parchment); }
.field small { display: block; color: var(--muted); font-size: 14px; margin-top: 4px; }
.field.check label, .radio { font-weight: 400; display: inline-flex; gap: 8px; align-items: center; margin-right: 16px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.cols > .panel { margin-bottom: 0; }
.cols + .panel, .cols + section { margin-top: 20px; }
.keybox { text-align: center; }
.bignum { font-size: 34px; color: var(--gold-light); background: #120e0a; border: 1px dashed var(--gold); border-radius: var(--radius); padding: 10px; margin: 0 auto 10px; max-width: 520px; word-break: break-all; }
.bignum.key { font-size: 26px; letter-spacing: .06em; }
.log { list-style: none; padding: 0; margin: 10px 0 0; }
.log li { padding: 3px 0; border-bottom: 1px dashed rgba(217,164,65,.12); }
.ticks { list-style: none; padding: 0; }
.ticks li { padding-left: 22px; position: relative; margin-bottom: 6px; }
.ticks li::before { content: "✦"; position: absolute; left: 0; color: var(--gold); }

/* ---------------------------------------------------------------- store */
.store-head { display: flex; gap: 18px; align-items: center; }
.store-cat h2 { margin-top: 10px; }
.offers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 18px; }
.offer { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: 1fr auto; gap: 4px 14px; background: linear-gradient(180deg, #3a322a, #2c251e); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.offer-ico { grid-row: 1 / 3; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; color: var(--gold); background: radial-gradient(circle at 40% 30%, #4b3f31, #1e1914); border: 1px solid var(--bronze); }
.offer h3 { margin: 0 0 4px; }
.offer p { font-size: 16px; margin-bottom: 6px; }
.offer-price { display: flex; align-items: center; gap: 6px; justify-self: end; font-size: 22px; color: var(--gold-light); }
.packs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0 24px; }
.pack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 18px 10px 14px; cursor: pointer;
  background: linear-gradient(180deg, #3a322a, #241e18); border: 1px solid var(--line); border-radius: var(--radius); transition: transform .15s, border-color .15s; }
.pack:hover { transform: translateY(-2px); border-color: var(--gold); }
.pack:has(input:checked) { border-color: var(--gold-light); box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(217,164,65,.3); }
.pack input { position: absolute; top: 10px; left: 10px; }
.pack .coins { font-size: 30px; color: var(--gold-light); }
.pack .unit { font-size: 14px; color: var(--muted); }
.pack .price { font-size: 20px; margin-top: 6px; color: var(--text); }
.pack .tag { position: absolute; top: 10px; right: 10px; }
.pack.best { background: linear-gradient(180deg, #4a3c26, #241e18); }
.packs-go { grid-column: 1 / -1; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------- library */
.prose h3 { margin-top: 22px; }
.prose ol, .prose ul { padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose .ticks, .prose .cmds { padding-left: 0; list-style: none; }
.questlist { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 10px; }
.quest { font: 700 14px var(--f-head); letter-spacing: .04em; padding: 7px 12px; background: var(--parchment); color: var(--ink); border-radius: 3px; box-shadow: 0 2px 0 var(--bronze); }
.rarity { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 12px; }
.rarity span { font: 700 14px var(--f-head); padding: 6px 12px; border-radius: 4px; background: rgba(0,0,0,.35); }
.r-uncommon { color: #7fdc6a; border: 1px solid #4f8c42; }
.r-rare { color: #6fb6ff; border: 1px solid #3b6f9e; }
.r-epic { color: #c78bff; border: 1px solid #7a4fa8; }
.r-legendary { color: #ffa23a; border: 1px solid #b06a1d; }
.rules li { margin-bottom: 10px; }
.price-line { font-size: 17px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.card { background: var(--stone-mid); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.card h3 { margin-top: 0; }
.streamer.is-live { border-color: var(--torch); box-shadow: 0 0 14px rgba(224,112,42,.3); }

/* ---------------------------------------------------------------- footer */
.site-foot { background: #120e0a; border-top: 2px solid var(--bronze); padding: 22px 0; color: var(--muted); }
.foot-in { display: flex; gap: 18px; align-items: center; }
.foot-name { font-family: var(--f-head); font-weight: 700; color: var(--gold); margin-bottom: 4px; }
.site-foot .small { margin: 2px 0; }

/* ---------------------------------------------------------------- tablet and phone */
@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 20px; }
  .numbers { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  h1 { font-size: 25px; }
  .statusbar-in { gap: 4px 10px; font-size: 13px; padding: 4px 16px; flex-wrap: nowrap; }
  .statusbar .stat .n { font-size: 15px; }
  .langs a { padding: 2px 4px; }
  .acc-link { font-size: 12px; white-space: nowrap; }
  .srv { display: none; }
  .logo img, .is-home .logo img { width: min(320px, 82vw); }
  .head-in { padding: 14px 16px; }
  .tagline { font-size: 18px; }
  .descline { font-size: 11px; letter-spacing: .12em; }
  .navtoggle { display: block; }
  .navtoggle summary { list-style: none; cursor: pointer; padding: 12px 0; font: 700 15px var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-light); display: flex; align-items: center; gap: 10px; }
  .navtoggle summary::-webkit-details-marker { display: none; }
  .burger, .burger::before, .burger::after { display: block; width: 22px; height: 2px; background: var(--gold); position: relative; }
  .burger::before, .burger::after { content: ""; position: absolute; }
  .burger::before { top: -7px; } .burger::after { top: 7px; }
  .menu { display: none; flex-direction: column; padding-bottom: 10px; }
  .navtoggle[open] + .menu { display: flex; }
  .menu > li > a { padding: 10px 4px; }
  .menu .sub { position: static; display: block; border: 0; box-shadow: none; background: transparent; padding: 0 0 6px 14px; }
  .menu .sub a { padding: 5px 4px; }
  .mainnav { position: static; }
  .features, .offers, .cols { grid-template-columns: 1fr; }
  .numbers { grid-template-columns: repeat(2, 1fr); }
  .numbers .numcard:first-child { grid-column: 1 / -1; }
  .packs { grid-template-columns: repeat(2, 1fr); }
  .kv-wide { grid-template-columns: 1fr; }
  .kv-wide dt { margin-top: 6px; }
  .hide-s { display: none; }
  .show-s { display: inline; }
  .panel { padding: 14px; }
  .store-head { flex-direction: column; text-align: center; }
  .table { font-size: 15px; }
  .table td, .table th { padding: 6px 7px; }
  .foot-in { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-in, .srv.up .dot { animation: none; }
  .ticker { overflow-x: auto; }
  .top-card { transition: none; }
}
.descline i { font-style: normal; text-transform: none; }
.stars { color: var(--gold); letter-spacing: 1px; font-size: .85em; }

/* Renown progress to the next rank */
.meter { height: 10px; background: rgba(0,0,0,.4); border: 1px solid var(--outline); border-radius: 6px; overflow: hidden; margin: 6px 0 4px; }
.meter > span { display: block; height: 100%; background: linear-gradient(90deg, var(--bronze), var(--gold)); }
.renown-rank { font-family: var(--f-head); font-size: 26px; color: var(--gold); margin: 0; }
.cols + .cols { margin-top: 20px; }

/* ---------------------------------------------------------------- v2 (29.10): screenshots, rates, quick links, FAQ */
.statusbar .ss { color: var(--muted); }
.statusbar .ss .n { font-size: 15px; }
.statusbar .dc { display: inline-flex; align-items: center; gap: 6px; color: #c9cdf6; }
.statusbar .dc:hover { color: #fff; }
.menu .caret { display: inline-block; width: 0; height: 0; margin-left: 7px; vertical-align: 3px; border: 4px solid transparent; border-top-color: var(--gold); border-bottom: 0; }
.menu .sub { min-width: 230px; }
.menu > li.nav-discord { margin-left: auto; }
.menu > li.nav-discord > a { display: flex; align-items: center; gap: 7px; color: #e3e6ff; }
.menu > li.nav-discord > a:hover { background: #5865F2; color: #fff; box-shadow: none; }

/* sidebar screenshots */
.shots { padding-bottom: 12px; }
.shots-track { position: relative; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; border: 1px solid var(--outline); box-shadow: 0 0 0 1px var(--line); background: #0d0a07; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s; pointer-events: none; }
.slide.on { opacity: 1; pointer-events: auto; }
.slide img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 6s ease-out; }
.slide.on img { transform: scale(1.06); }
.cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 7px; background: linear-gradient(180deg, transparent, rgba(10,7,4,.92)); display: flex; flex-direction: column; line-height: 1.15; text-decoration: none; }
.cap b { font: 700 14px var(--f-head); color: var(--gold-light); letter-spacing: .03em; text-shadow: 0 1px 2px #000; }
.cap small { font-size: 13px; color: var(--parchment); opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-prev, .sl-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 28px; height: 40px; border: 0; cursor: pointer;
  background: rgba(10,7,4,.55); color: var(--gold-light); font: 700 24px/1 var(--f-text); opacity: 0; transition: opacity .2s; }
.sl-prev { left: 0; border-radius: 0 4px 4px 0; } .sl-next { right: 0; border-radius: 4px 0 0 4px; }
.shots-track:hover .sl-prev, .shots-track:hover .sl-next, .sl-prev:focus-visible, .sl-next:focus-visible { opacity: 1; }
.sl-dots span { cursor: pointer; }
.shots .links { margin-top: 6px; }

/* sidebar rates */
.rate-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.rate-grid div { text-align: center; background: rgba(0,0,0,.28); border: 1px solid var(--line); border-radius: 4px; padding: 6px 2px 5px; }
.rate-grid b { display: block; font: 500 22px/1.1 var(--f-num); color: var(--gold-light); }
.rate-grid span { display: block; font-size: 12px; color: var(--muted); line-height: 1.2; }
.rates .kv { font-size: 15px; }

/* front page quick links */
.quick { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 20px; }
.qlink { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 14px 6px 12px; text-decoration: none;
  background: linear-gradient(180deg, #40372d, #2a231c); border: 1px solid var(--line); border-radius: var(--radius); color: var(--gold); transition: transform .15s, border-color .15s; }
.qlink:hover { transform: translateY(-2px); border-color: var(--gold); color: var(--gold-light); }
.qlink b { font: 700 13px/1.2 var(--f-head); letter-spacing: .05em; text-transform: uppercase; color: var(--parchment); }
.qlink small { font-size: 13px; color: var(--muted); line-height: 1.2; }
.qlink.hot { background: linear-gradient(180deg, #8a4a1f, #5b2f12); border-color: #f6b27b; color: #ffd9b8; }
.qlink.hot b { color: #fff3e3; }
.qlink.ext { color: #aab2ff; }

/* feature cards with a screenshot */
.features { grid-template-columns: repeat(3, 1fr); }
.feature { border-left: 0; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 0 12px; overflow: hidden; background: rgba(0,0,0,.25); }
.feature h3 { margin: 10px 12px 4px; }
.feature p { margin: 0 12px; font-size: 15px; }
.feat-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--line); }
.feat-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.feat-img:hover img { transform: scale(1.05); }

/* gallery page */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.gal-item { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: #0d0a07; }
.gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.gal-item:hover img { transform: scale(1.05); }
.gal-item:hover { border-color: var(--gold); }

/* lightbox */
.lightbox { border: 1px solid var(--gold); border-radius: var(--radius); padding: 0; background: #0d0a07; color: var(--text); max-width: min(1600px, 96vw); width: 96vw; overflow: visible; }
.lightbox::backdrop { background: rgba(5,3,2,.88); }
.lightbox figure { margin: 0; }
.lightbox img { display: block; width: 100%; height: auto; max-height: 82vh; object-fit: contain; background: #000; }
.lightbox figcaption { padding: 10px 16px; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.lightbox figcaption b { font: 700 18px var(--f-head); color: var(--gold); }
.lightbox figcaption span { color: var(--parchment); }
.lb-prev, .lb-next, .lb-close { position: absolute; border: 1px solid var(--line); background: rgba(20,13,7,.8); color: var(--gold-light); cursor: pointer; font: 700 28px/1 var(--f-text); border-radius: 50%; width: 44px; height: 44px; }
.lb-prev { left: 10px; top: 40%; } .lb-next { right: 10px; top: 40%; }
.lb-close { right: -14px; top: -14px; font-size: 26px; }
.lb-prev:hover, .lb-next:hover, .lb-close:hover { background: var(--gold); color: var(--ink); }

/* FAQ and server info */
.faq details { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(0,0,0,.2); margin-bottom: 8px; }
.faq summary { cursor: pointer; padding: 10px 14px; font-weight: 700; color: var(--parchment); list-style: none; position: relative; padding-right: 36px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 14px; top: 7px; font: 700 22px var(--f-text); color: var(--gold); }
.faq details[open] summary::after { content: "−"; }
.faq details[open] summary { color: var(--gold-light); border-bottom: 1px dashed var(--line); }
.faq-a { padding: 10px 14px 12px; font-size: 16px; }
.infogrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin-bottom: 8px; }
.infogrid section { background: rgba(0,0,0,.2); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 14px 12px; }
.infogrid h3 { margin-top: 10px; }
.infogrid .kv { font-size: 15px; }

@media (max-width: 980px) {
  .quick { grid-template-columns: repeat(3, 1fr); }
  .features { grid-template-columns: repeat(2, 1fr); }
  /* one column: the screenshots and the rates go above the page content, the other boxes below it */
  .layout { gap: 0; }
  .sidebar { display: contents; }
  .sidebar > .box { order: 1; }
  .sidebar > .shots, .sidebar > .rates { order: -1; }
  .sidebar > .shots .shots-track { max-height: 56vw; }
}
@media (max-width: 760px) {
  .statusbar .ss, .statusbar .dc { display: none; }
  .menu > li.nav-discord { margin-left: 0; }
  .quick { grid-template-columns: repeat(2, 1fr); }
  .features { grid-template-columns: 1fr; }
  .infogrid { grid-template-columns: 1fr; }
  .lb-prev, .lb-next { top: auto; bottom: 52px; }
  .lb-close { right: 4px; top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .slide, .slide img, .feat-img img, .gal-item img { transition: none; }
  .slide.on img { transform: none; }
}