:root {
  --bg: #1b1b1d;
  --panel: #232326;
  --panel-2: #2a2a2e;
  --line: #34343a;
  --text: #ececf0;
  --muted: #a3a3ad;
  --peach: #ffc072;      /* buttons and labels */
  --peach-2: #ffad47;
  --gold: #f5b301;
  --navy: #14203a;
  --navy-2: #1d2c4f;
  --navy-line: #31477a;
  --ok: #6cc04a;
  --no: #6b6b74;
  --vip: #55ff55;
  --mvp: #55ffff;
  --elite: #ff77ff;
  --legend: #ffaa00;
  --max: 1080px;
  --serif: "Merriweather", Georgia, serif;
  --pixel: "VT323", ui-monospace, monospace;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.6 "Raleway", system-ui, sans-serif; font-variant-numeric: lining-nums; }
a { color: var(--peach); text-decoration: none; }
a:hover { color: var(--peach-2); }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.2; margin: 0 0 .6em; }
h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.15rem; }
code, .mono { font-family: var(--pixel); font-size: 1.15em; color: var(--peach); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); }
.center { text-align: center; }

/* ornate frame: navy box with gold corner studs */
.frame { position: relative; background: var(--navy); border: 2px solid var(--navy-line); box-shadow: 0 0 0 1px #0b1222; }
.frame::before { content: ""; position: absolute; inset: -5px; pointer-events: none;
  background: linear-gradient(var(--gold), var(--gold)) left top / 7px 7px no-repeat, linear-gradient(var(--gold), var(--gold)) right top / 7px 7px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left bottom / 7px 7px no-repeat, linear-gradient(var(--gold), var(--gold)) right bottom / 7px 7px no-repeat; }

/* header */
.top { background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.6)), url("stone.svg") center / 64px repeat, #2a2420; border-bottom: 1px solid #000; }
.top .wrap { display: flex; align-items: center; gap: 16px; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); }
.brand img { width: 44px; height: 44px; image-rendering: auto; border-radius: 4px; }
.brand b { font-family: var(--serif); font-size: 1.3rem; letter-spacing: .04em; color: var(--gold); text-shadow: 0 2px 0 #4a2c00; }
.nav { display: flex; margin: 0 auto; }
.nav a { color: #e6e9f2; padding: 7px 14px; font-weight: 600; border-right: 1px solid var(--navy-line); }
.nav a:last-child { border-right: 0; }
.nav a:hover { background: var(--navy-2); color: #fff; }
.nav a[aria-current="page"] { background: linear-gradient(180deg, #ff9d2e, #d86f00); color: #fff; box-shadow: inset 0 0 0 1px #ffd08a; }
.side { display: flex; align-items: center; }
.side span, .side a { padding: 7px 12px; color: #e6e9f2; font-weight: 600; }
.side span { border-right: 1px solid var(--navy-line); font-family: var(--pixel); font-size: 1.25rem; line-height: 1.2; color: var(--peach); cursor: pointer; }
.side a:hover { background: var(--navy-2); color: #fff; }
@media (max-width: 860px) {
  .nav { order: 3; width: 100%; }
  .nav a { flex: 1; text-align: center; padding: 7px 4px; white-space: nowrap; }
  .side { margin-left: auto; }
}

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 22px; border-radius: 999px; background: var(--peach); color: #2a1a00; font-weight: 700; border: 0; cursor: pointer; font: 700 .95rem "Raleway", sans-serif; text-transform: uppercase; letter-spacing: .03em; }
.btn:hover { background: var(--peach-2); color: #2a1a00; }
.btn.ghost { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.btn.ghost:hover { background: var(--line); }
.btn.discord { background: #5865f2; color: #fff; }
.btn svg { width: 14px; height: 14px; }

/* banner */
.banner { margin: 28px 0 32px; }
.banner .inner { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; padding: 28px 32px; background: radial-gradient(ellipse at 20% 50%, rgba(245,179,1,.22), transparent 55%), linear-gradient(180deg, #1a2440, #101830); }
.banner img { width: 170px; height: 170px; border-radius: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.banner h1 { color: #fff; margin-bottom: .3em; }
.banner p { color: #c9d2e8; margin: 0 0 16px; max-width: 40em; }
.banner .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ipbox { display: inline-flex; align-items: center; gap: 10px; background: rgba(0,0,0,.35); border: 1px solid var(--navy-line); padding: 4px 6px 4px 14px; border-radius: 999px; }
.ipbox .mono { font-size: 1.4rem; line-height: 1; color: #fff; }
.status { display: inline-flex; align-items: center; gap: 8px; color: #c9d2e8; font-weight: 600; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--no); }
.dot.on { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.dot.off { background: #d24a4a; }
@media (max-width: 700px) {
  .banner .inner { grid-template-columns: 1fr; text-align: center; padding: 24px 18px; }
  .banner img { margin: 0 auto; width: 120px; height: 120px; }
  .banner .row { justify-content: center; }
}

/* category tiles */
.tiles { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 170px; padding: 24px 12px; background: var(--panel); border: 1px solid var(--line); color: var(--peach); font-size: 1.1rem; font-weight: 600; transition: border-color .15s, background .15s; }
.tile:hover { background: var(--panel-2); border-color: #4a4a52; color: var(--peach-2); }
.tile img { width: 72px; height: 72px; image-rendering: pixelated; transition: transform .15s; }
.tile:hover img { transform: translateY(-3px) scale(1.05); }
.tile small { color: var(--muted); font-weight: 500; font-size: .85rem; margin-top: -10px; }
.tile.wide { grid-column: 1 / -1; }
@media (max-width: 700px) { .tiles { grid-template-columns: 1fr 1fr; } .tile { min-height: 140px; } }

.prose { max-width: 680px; margin: 36px auto 48px; }
.prose h3 { font-family: "Raleway", sans-serif; font-weight: 700; }
.prose p { margin: 0 0 .8em; color: #d5d5dc; }

.panel { background: var(--panel); border: 1px solid var(--line); padding: 22px; }
.page { padding: 28px 0 48px; }
.page > .wrap > h1 { margin-bottom: .4em; }
.lead { color: var(--muted); max-width: 46em; margin: 0 0 24px; }
.section-title { margin: 44px 0 16px; }

/* comparison table */
.compare-wrap { overflow-x: auto; }
.compare { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 4px; }
.compare th, .compare td { background: var(--panel); border: 1px solid var(--line); padding: 10px 12px; text-align: center; vertical-align: middle; }
.compare thead th { vertical-align: top; padding: 22px 12px 18px; width: 19%; }
.compare thead th:first-child, .compare td:first-child { background: transparent; border: 0; }
.compare tbody td:first-child { background: var(--panel); border: 1px solid var(--line); text-align: left; font-weight: 700; width: 24%; }
.compare thead img { width: 72px; height: 72px; margin: 0 auto 12px; image-rendering: pixelated; }
.compare thead h3 { color: var(--peach); margin-bottom: .4em; }
.compare thead p { font: 400 .85rem/1.4 "Raleway", sans-serif; color: #cfcfd6; margin: 0 0 12px; min-height: 4.2em; }
.compare .price { display: block; font-size: 1.15rem; font-weight: 700; margin-bottom: 10px; }
.compare .prefix { font-family: var(--pixel); font-size: 1.35rem; background: #111; display: inline-block; padding: 0 8px; }
.ico { width: 20px; height: 20px; display: inline-block; vertical-align: middle; }

/* product cards */
.products { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.product { background: var(--panel); border: 1px solid var(--line); padding: 22px 18px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.product img { width: 56px; height: 56px; image-rendering: pixelated; margin-bottom: 10px; }
.product h3 { color: var(--peach); margin-bottom: .3em; }
.product p { color: #cfcfd6; font-size: .9rem; margin: 0 0 12px; flex: 1; }
.product .price { font-weight: 700; font-size: 1.1rem; margin-bottom: 10px; }

/* vote + rules */
.list { display: grid; gap: 8px; }
.list a, .list li { display: flex; align-items: center; gap: 14px; background: var(--panel); border: 1px solid var(--line); padding: 14px 18px; color: var(--text); font-weight: 600; }
.list a:hover { background: var(--panel-2); border-color: #4a4a52; color: var(--text); }
.list a .btn { margin-left: auto; }
.list .num { font-family: var(--serif); color: var(--peach); font-size: 1.4rem; width: 28px; text-align: center; flex: none; }
.list li span.muted { display: block; font-weight: 500; }
ol.list { list-style: none; padding: 0; margin: 0; }

/* footer */
.legal { background: var(--navy); border-top: 1px solid var(--navy-line); border-bottom: 1px solid var(--navy-line); padding: 30px 0; font-size: .85rem; }
.legal .wrap { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; }
.legal h4 { font-family: var(--serif); text-transform: uppercase; color: #fff; margin: 0 0 10px; font-size: .95rem; }
.legal p { color: #6f8ac0; margin: 0 0 6px; }
.legal .links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 14px; color: #c3cde3; }
.legal .links a { color: #9fb2d8; }
.legal .links b { color: #fff; }
.legal .pay { text-align: right; }
@media (max-width: 700px) { .legal .wrap { grid-template-columns: 1fr; } .legal .pay { text-align: left; } }
.foot { background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.75)), url("stone.svg") center / 64px repeat, #2a2420; padding: 26px 0; color: var(--muted); font-size: .9rem; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 18px 48px; align-items: flex-start; }
.foot .brand img { width: 36px; height: 36px; }
.foot nav { display: grid; grid-template-columns: repeat(2, auto); gap: 4px 40px; }
.foot nav a { color: var(--muted); }
.foot nav a:hover { color: var(--text); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--peach); color: #2a1a00; font-weight: 800; padding: 9px 18px; border-radius: 999px; transition: transform .2s, opacity .2s; z-index: 50; opacity: 0; visibility: hidden; }
.toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }