/* Beyond The Horizon: the public site.
   A deep-sea night: near-black navy, aurora teal and brass gold, glass panels with hairline edges, big display type.
   Every page shares these classes (card, btn, form, table, flash...), so the whole site follows this file. */
:root {
  --bg: #03060b; --bg2: #07101b; --bg3: #0b1828;
  --glass: rgba(14, 24, 38, .62); --glass2: rgba(20, 34, 52, .72); --glass-hi: rgba(255, 255, 255, .045);
  --line: rgba(255, 255, 255, .08); --line2: rgba(255, 255, 255, .14);
  --text: #e9eef6; --text2: #b9c6d8; --muted: #7f90a8;
  --gold: #f3c871; --gold2: #d9992c; --gold3: #8a5a12; --teal: #45d6cf; --sea: #2a7fc0; --violet: #8f7cff;
  --ok: #3ddc91; --warn: #ffae42; --bad: #ff5e62;
  --r: 18px; --r2: 12px; --r3: 999px;
  --shadow: 0 30px 80px -30px rgba(0, 0, 0, .9), 0 0 0 1px var(--line);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --max: 1240px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 400 16px/1.65 var(--sans); letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
/* the sea at night behind every page: two slow aurora glows and a faint grain */
body::before {
  content: ""; position: fixed; inset: -20vh -20vw; z-index: -2; pointer-events: none;
  background:
    radial-gradient(40vw 40vw at 12% 8%, rgba(69, 214, 207, .10), transparent 60%),
    radial-gradient(46vw 40vw at 88% 18%, rgba(243, 200, 113, .08), transparent 60%),
    radial-gradient(60vw 50vw at 50% 110%, rgba(42, 127, 192, .16), transparent 60%),
    linear-gradient(180deg, #050a12 0%, var(--bg) 60%);
  animation: aurora 28s var(--ease) infinite alternate;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  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 baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes aurora { to { transform: translate3d(3vw, -2vh, 0) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

::selection { background: rgba(243, 200, 113, .35); color: #fff; }
a { color: var(--gold); text-decoration: none; transition: color .2s; }
a:hover { color: #ffe3a6; }
p a, li a, td a { text-decoration: underline; text-decoration-color: rgba(243, 200, 113, .35); text-underline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--display); color: #fff; letter-spacing: .01em; line-height: 1.15; margin: .2em 0 .55em; font-weight: 700; }
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
h3 { font-size: 1.18rem; }
h1 .grad, h2 .grad, .grad { background: linear-gradient(100deg, #fff 0%, var(--gold) 45%, var(--teal) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
p { margin: 0 0 1em; }
code, pre { font-family: var(--mono); font-size: .86em; }
code { background: rgba(255, 255, 255, .06); padding: .1em .4em; border-radius: 6px; border: 1px solid var(--line); }
hr { border: 0; height: 1px; background: var(--line); margin: 24px 0; }
img { max-width: 100%; }
.dim { color: var(--muted); }
.small { font-size: 14px; }
.ok { color: var(--ok); } .warn { color: var(--warn); }
.inline { display: inline; }
form.inline { display: inline; }
main { max-width: var(--max); margin: 0 auto; padding: 28px 22px 80px; min-height: 60vh; }
.eyebrow { font: 600 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--teal); }
.lead { font-size: 1.15rem; color: var(--text2); }

/* ---------------------------------------------------------------- top bar */
.topbar {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 18px;
  padding: 10px max(22px, calc((100vw - 1400px) / 2)); min-height: 68px;
  background: linear-gradient(180deg, rgba(3, 6, 11, .86), rgba(3, 6, 11, .62));
  backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--line);
}
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(243, 200, 113, .5), rgba(69, 214, 207, .4), transparent); opacity: .6; }
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand img { height: 44px; display: block; border-radius: 10px; box-shadow: 0 0 0 1px rgba(243, 200, 113, .3), 0 8px 24px -8px rgba(243, 200, 113, .45); }
.brand b { font: 700 15px/1.05 var(--display); color: #fff; letter-spacing: .06em; }
.brand b span { display: block; font: 600 10px var(--sans); letter-spacing: .28em; color: var(--gold); }
.topbar nav { display: flex; gap: 2px; flex: 1; justify-content: center; flex-wrap: wrap; }
.topbar nav a { position: relative; font: 500 14px var(--sans); color: var(--text2); padding: 8px 12px; border-radius: 10px; transition: color .2s, background .2s; }
.topbar nav a:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.topbar nav a.on { color: #fff; }
.topbar nav a.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--gold), var(--teal)); }
.who { display: flex; gap: 8px; align-items: center; flex: none; }
.who .btn.small.ico { padding: 8px; }
.who .btn.small.ico span { display: none; }
.menu-toggle { display: none; background: none; border: 1px solid var(--line2); color: #fff; border-radius: 10px; width: 42px; height: 42px; cursor: pointer; }
.menu-toggle i, .menu-toggle i::before, .menu-toggle i::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; margin: 0 auto; position: relative; transition: transform .3s var(--ease); }
.menu-toggle i::before, .menu-toggle i::after { content: ""; position: absolute; left: 0; }
.menu-toggle i::before { top: -6px; } .menu-toggle i::after { top: 6px; }
body.nav-open .menu-toggle i { background: transparent; }
body.nav-open .menu-toggle i::before { transform: translateY(6px) rotate(45deg); }
body.nav-open .menu-toggle i::after { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 1180px) {
  .topbar { flex-wrap: wrap; }
  .menu-toggle { display: block; order: 3; }
  .topbar nav { order: 4; flex-basis: 100%; display: none; flex-direction: column; gap: 4px; padding: 8px 0 14px; }
  .topbar nav a { padding: 12px 14px; font-size: 16px; }
  body.nav-open .topbar nav { display: flex; }
  .who { margin-left: auto; }
  .who .hide-m { display: none; }
}

/* ---------------------------------------------------------------- buttons */
.btn {
  --b1: #f6d488; --b2: #d9992c;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 14px/1 var(--sans); letter-spacing: .01em; color: #1a1103 !important; text-decoration: none !important;
  padding: 12px 20px; border-radius: 12px; border: 0; cursor: pointer; white-space: nowrap;
  background: linear-gradient(180deg, var(--b1), var(--b2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 0 rgba(0, 0, 0, .4), 0 10px 30px -10px rgba(243, 200, 113, .55);
  transition: transform .18s var(--ease), box-shadow .25s var(--ease), filter .2s;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 1px 0 rgba(0, 0, 0, .4), 0 16px 40px -12px rgba(243, 200, 113, .75); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled, .btn[disabled] { opacity: .45; pointer-events: none; }
.btn.ghost { background: rgba(255, 255, 255, .04); color: var(--text) !important; box-shadow: inset 0 0 0 1px var(--line2); }
.btn.ghost:hover { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(243, 200, 113, .5); }
.btn.small { padding: 8px 13px; font-size: 13px; border-radius: 10px; }
.btn.big { padding: 16px 28px; font-size: 16px; border-radius: 14px; }
.btn.danger { background: linear-gradient(180deg, #ff7b7e, #d93a3f); color: #fff !important; box-shadow: 0 10px 30px -12px rgba(255, 94, 98, .7); }
.btn.dc { background: linear-gradient(180deg, #7480ff, #4f5bdc); color: #fff !important; box-shadow: 0 10px 30px -12px rgba(88, 101, 242, .8); }
.btn.yt { background: linear-gradient(180deg, #ff4d63, #d4001f); color: #fff !important; box-shadow: 0 10px 30px -12px rgba(255, 0, 51, .7); }
.btn.bmc { background: linear-gradient(180deg, #ffe55c, #f2c200); color: #1b1b1b !important; box-shadow: 0 10px 30px -12px rgba(255, 221, 0, .6); }
.btn.yt .yt-ico rect { fill: #fff; } .btn.yt .yt-ico path { fill: #e0002a; }
.btn.social { width: 100%; margin: 8px 0; background: #fff; color: #222 !important; box-shadow: none; }
.btn.social.apple { background: #000; color: #fff !important; box-shadow: inset 0 0 0 1px #333; }
button.link, .linkbtn { background: none; border: 0; color: var(--gold); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.dc-ico, .bmc-ico, .steam-ico, .yt-ico { vertical-align: -3px; flex: none; }

/* ---------------------------------------------------------------- cards and panels */
.card {
  position: relative; background: linear-gradient(180deg, var(--glass2), var(--glass)); color: var(--text);
  border-radius: var(--r); padding: clamp(20px, 2.4vw, 34px); margin: 22px 0;
  box-shadow: var(--shadow); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .02) 40%, rgba(243, 200, 113, .12));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.card h1, .card h2, .card h3 { color: #fff; }
.card .dim { color: var(--muted); }
.card.narrow { max-width: 520px; margin: 40px auto; }
.card.two { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.card.notice { background: linear-gradient(180deg, rgba(243, 200, 113, .12), rgba(243, 200, 113, .04)); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 860px) { .card.two, .two-col { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- forms */
.form label { display: block; margin: 14px 0; font-weight: 500; font-size: 14px; color: var(--text2); }
.form input, .form select, .form textarea, input.filter, .inline-form input, .inline-form select {
  display: block; width: 100%; margin-top: 7px; padding: 12px 14px; font: 400 15px/1.4 var(--sans); color: var(--text);
  background: rgba(3, 7, 13, .6); border: 1px solid var(--line2); border-radius: 12px; outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.form textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.form input:focus, .form select:focus, .form textarea:focus, input.filter:focus {
  border-color: rgba(243, 200, 113, .7); box-shadow: 0 0 0 4px rgba(243, 200, 113, .14); background: rgba(3, 7, 13, .85); }
.form input::placeholder, .form textarea::placeholder { color: #5d6c82; }
.form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.form label.check, label.check { display: flex; gap: 10px; align-items: center; font-weight: 400; color: var(--text); cursor: pointer; }
.form label.check input, label.check input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--gold); }
label.check.big { font-size: 17px; }
.inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.inline-form input, .inline-form select { width: auto; flex: 1 1 220px; margin: 0; }
.quick .or { display: flex; align-items: center; gap: 12px; color: var(--muted); margin: 18px 0; font-size: 13px; }
.quick .or::before, .quick .or::after { content: ""; flex: 1; height: 1px; background: var(--line2); }
pre.code { background: #02050a; color: #ffe6b0; padding: 16px; border-radius: 12px; overflow: auto; border: 1px solid var(--line); }
.steps { padding-left: 1.2em; } .steps li { margin: .5em 0; }

/* ---------------------------------------------------------------- flash, badges, pills */
.flash { display: flex; gap: 10px; align-items: center; padding: 14px 18px; border-radius: 14px; margin: 14px 0; font-weight: 500;
  background: rgba(61, 220, 145, .12); color: #c8ffe2; box-shadow: inset 0 0 0 1px rgba(61, 220, 145, .35); animation: drop .5s var(--ease); }
.flash::before { content: "✓"; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ok); color: #03140b; font-weight: 800; font-size: 13px; flex: none; }
.flash.err { background: rgba(255, 94, 98, .12); color: #ffd5d6; box-shadow: inset 0 0 0 1px rgba(255, 94, 98, .4); }
.flash.err::before { content: "!"; background: var(--bad); color: #fff; }
.flash.warn { background: rgba(255, 174, 66, .12); color: #ffe3bd; box-shadow: inset 0 0 0 1px rgba(255, 174, 66, .4); }
.flash.warn::before { content: "!"; background: var(--warn); color: #241400; }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } }
.badge { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; padding: 8px 14px; border-radius: var(--r3);
  color: var(--gold); background: rgba(243, 200, 113, .08); box-shadow: inset 0 0 0 1px rgba(243, 200, 113, .35); }
.badge.warn { color: var(--warn); background: rgba(255, 174, 66, .08); box-shadow: inset 0 0 0 1px rgba(255, 174, 66, .4); }
.badge.ok { color: var(--ok); background: rgba(61, 220, 145, .08); box-shadow: inset 0 0 0 1px rgba(61, 220, 145, .4); }
.count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--bad); color: #fff; font: 700 11px var(--sans); }
.role-badge { font: 700 10px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 4px 7px; border-radius: 6px; background: var(--gold); color: #1a1103; vertical-align: 2px; }
.role-cm { background: #6fb6ff; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: var(--r3); font: 600 11px/1 var(--sans); letter-spacing: .08em;
  text-decoration: none !important; white-space: nowrap; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line2); color: var(--text2); }
.status-pill i { width: 8px; height: 8px; border-radius: 50%; position: relative; }
.status-pill i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: inherit; opacity: .35; animation: ping 2s ease-out infinite; }
@keyframes ping { 80%, 100% { transform: scale(2.2); opacity: 0; } }
.status-pill.on { color: #c4ffe0; box-shadow: inset 0 0 0 1px rgba(61, 220, 145, .45); } .status-pill.on i { background: var(--ok); }
.status-pill.off { color: #ffd2d3; box-shadow: inset 0 0 0 1px rgba(255, 94, 98, .45); } .status-pill.off i { background: var(--bad); }
.status-pill.invite { color: #ffdcab; box-shadow: inset 0 0 0 1px rgba(255, 174, 66, .55); } .status-pill.invite i { background: var(--warn); }

/* ---------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; border-radius: var(--r2); }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; }
.table th { text-align: left; font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 12px 12px; border-bottom: 1px solid var(--line2); }
.table td { padding: 12px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:hover td { background: rgba(255, 255, 255, .025); }
.table tr.needs td { background: rgba(255, 94, 98, .07); }
.table.highscores tr.top1 td { color: #ffd65a; font-weight: 700; }
.table.highscores tr.top2 td { color: #e4ecf5; font-weight: 700; }
.table.highscores tr.top3 td { color: #e9ad74; font-weight: 700; }

/* ---------------------------------------------------------------- the home page */
.hero { position: relative; margin: -28px calc(50% - 50vw) 0; min-height: min(88vh, 860px); display: grid; place-items: end center; overflow: hidden; isolation: isolate;
  background-size: cover; background-position: center 30%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(80% 60% at 50% 30%, transparent, rgba(3, 6, 11, .55) 70%), linear-gradient(180deg, rgba(3, 6, 11, .2) 0%, transparent 30%, rgba(3, 6, 11, .75) 72%, var(--bg) 100%); }
.hero::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -2px; height: 160px; z-index: -1;
  background: radial-gradient(60% 100% at 50% 100%, rgba(69, 214, 207, .18), transparent 70%); filter: blur(10px); }
.hero .hero-bg { position: absolute; inset: -6%; z-index: -2; background-size: cover; background-position: center 30%; transform: scale(1.04); animation: drift 30s ease-in-out infinite alternate; }
@keyframes drift { to { transform: scale(1.12) translate3d(-1.5%, -1%, 0); } }
.hero-inner { position: relative; text-align: center; padding: 40px 22px 70px; max-width: 920px; }
.hero-logo { display: block; width: min(560px, 82vw); margin: 0 auto 10px; filter: drop-shadow(0 20px 50px rgba(0, 0, 0, .8)); }
.hero h1 { font-size: clamp(2.4rem, 1.4rem + 4.6vw, 5rem); line-height: 1.02; margin: 0 0 14px; text-shadow: 0 10px 40px rgba(0, 0, 0, .7); }
.tag { font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); color: #dbe5f2; max-width: 720px; margin: 0 auto 26px; text-shadow: 0 2px 20px rgba(0, 0, 0, .9); }
.cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 18px 0; }
.cta-left { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .chips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.scroll-cue { position: absolute; left: 50%; bottom: 18px; width: 22px; height: 36px; margin-left: -11px; border-radius: 12px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); }
.scroll-cue::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 60% { transform: translateY(10px); opacity: 0; } 61% { transform: none; opacity: 0; } }
.hero-mini { text-align: center; padding: 30px 0 6px; }
.hero-mini p { font-size: 1.15em; color: var(--text2); }

.status-strip { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: center; width: fit-content; max-width: calc(100% - 20px);
  margin: -34px auto 30px; padding: 12px 14px 12px 22px; border-radius: var(--r3); position: relative; z-index: 2; font-size: 14.5px;
  background: rgba(8, 15, 25, .82); backdrop-filter: blur(16px); box-shadow: var(--shadow); }
.status-strip .dot { width: 10px; height: 10px; border-radius: 50%; position: relative; }
.status-strip .dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; background: inherit; opacity: .35; animation: ping 2s ease-out infinite; }
.status-strip.on .dot { background: var(--ok); } .status-strip.off .dot { background: var(--bad); } .status-strip.invite .dot { background: var(--warn); }
.status-strip .sep { opacity: .35; }
.status-strip .st-on { color: var(--ok); font-weight: 700; letter-spacing: .06em; }
.status-strip .st-invite { color: var(--warn); font-weight: 700; letter-spacing: .06em; }
.status-strip .st-off { color: var(--bad); font-weight: 700; letter-spacing: .06em; }
.status-card .bigstatus { font: 700 22px/1.3 var(--display); }
.status-card .bigstatus i { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 8px; }
.status-card.on .bigstatus i { background: var(--ok); box-shadow: 0 0 14px var(--ok); }
.status-card.off .bigstatus i { background: var(--bad); box-shadow: 0 0 14px var(--bad); }

.section { margin: 90px 0; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 34px; }
.section-head p { color: var(--text2); font-size: 1.08rem; }

.stats-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin: 30px 0; }
.stats-row div { position: relative; text-align: center; padding: 22px 8px; border-radius: var(--r); background: linear-gradient(180deg, var(--glass2), var(--glass)); box-shadow: var(--shadow); overflow: hidden; }
.stats-row div::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .5; }
.stats-row b { display: block; font: 700 clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem)/1 var(--display); background: linear-gradient(180deg, #fff, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 6px; }
.stats-row span { color: var(--muted); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 900px) { .stats-row { grid-template-columns: repeat(3, 1fr); } }

/* bento feature grid */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(220px, auto); gap: 16px; }
.tile { position: relative; grid-column: span 2; border-radius: 22px; overflow: hidden; padding: 26px; display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(180deg, var(--glass2), var(--glass)); box-shadow: var(--shadow); isolation: isolate; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.tile:hover { transform: translateY(-4px); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(243, 200, 113, .3); }
.tile.wide { grid-column: span 4; } .tile.tall { grid-row: span 2; } .tile.full { grid-column: span 6; }
.tile img.art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity: .8; transition: transform .8s var(--ease), opacity .4s; }
.tile:hover img.art { opacity: .95; }
.tile:hover img.art { transform: scale(1.06); }
.tile::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(3, 6, 11, .05) 20%, rgba(3, 6, 11, .55) 55%, rgba(3, 6, 11, .95) 100%); }
.tile > * { position: relative; z-index: 1; }
.tile > img.art { position: absolute; z-index: -1; }
.tile h3 { margin: 0 0 6px; font-size: 1.3rem; }
.tile p { margin: 0; color: var(--text2); font-size: 15px; }
.tile .eyebrow { margin-bottom: 10px; }
@media (max-width: 980px) { .bento { grid-template-columns: repeat(2, 1fr); } .tile, .tile.wide, .tile.full { grid-column: span 2; } .tile.tall { grid-row: span 1; } }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.feature { border-radius: var(--r); padding: 18px; background: linear-gradient(180deg, var(--glass2), var(--glass)); box-shadow: var(--shadow); }
.feature img { width: 100%; height: 170px; object-fit: contain; border-radius: 12px; background: radial-gradient(circle at 50% 40%, rgba(69, 214, 207, .14), transparent 70%); }

/* adverts and bands */
.advert { position: relative; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; margin: 26px 0; padding: 28px 32px; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); }
.advert h2 { margin: 0 0 4px; } .advert p { margin: 0; color: var(--text2); }
.advert > div { flex: 1 1 320px; }
.advert.steam { background: radial-gradient(70% 140% at 0% 0%, rgba(102, 192, 244, .25), transparent 60%), linear-gradient(110deg, #0e1520, #172a3f 60%, #1f4766); }
.advert.promo { background: radial-gradient(70% 140% at 100% 0%, rgba(243, 200, 113, .22), transparent 60%), linear-gradient(110deg, #120d07, #2a1d0c); }
.advert .soon { font: 700 14px var(--sans); letter-spacing: .24em; color: #8fd2ff; padding: 12px 18px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(143, 210, 255, .5); }
.band { position: relative; text-align: center; padding: clamp(40px, 6vw, 80px) 24px; border-radius: 28px; overflow: hidden; margin: 90px 0 20px; box-shadow: var(--shadow);
  background: radial-gradient(60% 120% at 50% 0%, rgba(243, 200, 113, .22), transparent 60%), radial-gradient(60% 120% at 50% 100%, rgba(69, 214, 207, .16), transparent 60%), #07101b; }
.band h2 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem); }

/* YouTube */
.card.youtube { display: grid; grid-template-columns: 1fr 1.25fr; gap: 30px; align-items: center; }
.card.youtube h2 { display: flex; align-items: center; gap: 12px; }
.yt-embed { position: relative; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 30px 70px -30px #000, 0 0 0 1px var(--line2); }
.yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 860px) { .card.youtube { grid-template-columns: 1fr; } }

/* Dev's Log */
.posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.post-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--r); background: linear-gradient(180deg, var(--glass2), var(--glass)); box-shadow: var(--shadow); color: var(--text); transition: transform .35s var(--ease); text-decoration: none !important; }
.post-card:hover { transform: translateY(-3px); color: var(--text); }
.post-card time { color: var(--teal); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.post-card h3 { margin: 0; font-size: 1.2rem; }
.post-card p { color: var(--text2); margin: 0; font-size: 15px; }
.post img { max-width: 100%; border-radius: 14px; }
.post h2, .post h3 { margin-top: 1.4em; }
.news { padding: 10px 0; border-bottom: 1px solid var(--line); }

/* shop */
.shop-group { margin: 34px 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.grid.small { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.product, .charcard { position: relative; display: flex; flex-direction: column; gap: 8px; text-align: center; padding: 20px; border-radius: var(--r);
  background: linear-gradient(180deg, var(--glass2), var(--glass)); box-shadow: var(--shadow); color: var(--text); transition: transform .3s var(--ease), box-shadow .3s; }
.product:hover, .charcard:hover { transform: translateY(-3px); box-shadow: 0 30px 70px -30px #000, 0 0 0 1px rgba(243, 200, 113, .35); }
.product img { width: 84px; height: 84px; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .6)); }
.product h3, .charcard h3 { color: #fff; font-size: 1rem; margin: 0; }
.product p { font-size: 14px; margin: 0; flex: 1; color: var(--text2); }
.charcard img { height: 160px; object-fit: contain; }
.levels span { display: inline-block; margin: 2px 3px; padding: 2px 9px; background: rgba(255, 255, 255, .06); border-radius: 10px; font-size: 13px; }

/* footer */
.foot { position: relative; margin-top: 60px; padding: 60px max(22px, calc((100vw - 1240px) / 2)) 34px; border-top: 1px solid var(--line); background: linear-gradient(180deg, transparent, rgba(7, 16, 27, .8)); color: var(--muted); font-size: 14px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 34px; }
.foot h4 { font: 600 12px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--text); margin: 0 0 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot ul a { color: var(--muted); text-decoration: none; } .foot ul a:hover { color: #fff; }
.foot .follow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.foot .disclaimer { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12.5px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.foot .brandline { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.foot .brandline img { height: 40px; border-radius: 10px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }

/* the WANTED board: parchment posters nailed to the dark */
.wanted-board { margin: 90px auto; text-align: center; }
.wanted-board h2 { font: 900 clamp(2rem, 1.4rem + 2vw, 3rem) var(--display); letter-spacing: .14em; margin: 0 0 4px; }
.wanted-board .posters { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 26px; margin-top: 30px; }
.poster { position: relative; padding: 26px 22px 22px; color: #3a2510; text-align: center;
  background: radial-gradient(ellipse at 30% 20%, #f6e6bf, #e2c58e 60%, #c49b5d); box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .95), inset 0 0 50px rgba(110, 70, 20, .38);
  transform: rotate(-.8deg); border-radius: 4px; transition: transform .45s var(--ease); }
.poster:nth-child(even) { transform: rotate(.9deg); }
.poster:hover { transform: rotate(0) translateY(-6px) scale(1.02); }
.poster::before { content: ""; position: absolute; top: 9px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ddd, #444); box-shadow: 0 2px 3px rgba(0, 0, 0, .6); }
.poster .poster-head { font: 900 42px/1 var(--display); letter-spacing: .14em; color: #2a1606; border-bottom: 3px double #6b4a22; padding: 8px 0 10px; margin-bottom: 12px; }
.poster h3 { font: 700 22px var(--display); margin: 6px 0 8px; color: #4a1f0a; }
.poster p { margin: 6px 0; font-size: 15px; color: #3a2510; }
.poster .skills span { display: inline-block; margin: 2px; padding: 2px 9px; border: 1px solid #8a6533; border-radius: 10px; font-size: 12.5px; }
.poster .reward { margin: 14px 0; font: 700 13px var(--display); letter-spacing: .14em; }
.poster .reward b { display: block; font-size: 17px; color: #7a1c0c; letter-spacing: .02em; }
.poster .btn { --b1: #7a2a12; --b2: #4a1206; color: #ffe9c9 !important; box-shadow: 0 10px 20px -10px #4a1206; }

/* about, highscores, forum, tickets, downloads */
.about details.spoiler summary { cursor: pointer; font: 700 17px var(--display); padding: 14px 18px; border-radius: 14px; background: rgba(255, 94, 98, .08); box-shadow: inset 0 0 0 1px rgba(255, 94, 98, .35); list-style: none; }
.about details.spoiler summary::-webkit-details-marker { display: none; }
.about .spoiler-body { padding-top: 14px; }
.about .cta { justify-content: flex-start; }
.boards, .filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.statline { display: flex; flex-wrap: wrap; gap: 20px; }
.pager { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0; }
.pager a, .pager b { display: inline-grid; place-items: center; min-width: 36px; height: 36px; border-radius: 10px; text-decoration: none; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line2); }
.pager b { background: var(--gold); color: #1a1103; box-shadow: none; }
.catrow { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 16px; }
.checks { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.fpost { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 20px 0; border-top: 1px solid var(--line); }
.fpost aside { font-size: 14px; }
.fpost .fbody p { margin: 0 0 .8em; word-wrap: anywhere; }
.quote { display: block; border-left: 3px solid var(--gold); padding: 4px 0 4px 12px; color: var(--text2); background: rgba(243, 200, 113, .04); border-radius: 0 8px 8px 0; }
.tmsg { border-radius: 14px; padding: 14px 18px; margin: 12px 0; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--line2); }
.tmsg.staff { background: rgba(243, 200, 113, .07); box-shadow: inset 0 0 0 1px rgba(243, 200, 113, .3); }
.tmsg.note { background: rgba(255, 230, 120, .06); box-shadow: inset 0 0 0 1px rgba(255, 230, 120, .3); }
.tmsg p { margin: .3em 0; }
.tstatus { display: inline-block; padding: 4px 10px; border-radius: var(--r3); font: 600 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; background: #3a4656; color: #fff; }
.tstatus.s-open { background: rgba(255, 94, 98, .2); color: #ffb8ba; } .tstatus.s-pending { background: rgba(255, 174, 66, .2); color: #ffd497; }
.tstatus.s-resolved { background: rgba(61, 220, 145, .18); color: #a6f5cc; } .tstatus.s-closed { background: rgba(255, 255, 255, .08); color: var(--muted); }
.prio { font-size: 12px; font-weight: 700; } .prio.p-urgent { color: var(--bad); } .prio.p-high { color: var(--warn); } .prio.p-low { color: var(--muted); }
.dlrow { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding: 18px 0; border-top: 1px solid var(--line); }
.dlrow:first-of-type { border-top: 0; }
.modbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.chat-preview, .bubble { background: rgba(255, 255, 255, .04); border-radius: 12px; padding: 10px 14px; }
@media (max-width: 760px) { .fpost { grid-template-columns: 1fr; gap: 6px; } main { padding: 20px 16px 60px; } .hero { margin-top: -20px; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* scroll reveal (site.js adds .in when a block scrolls into view) */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* Dev's Log posts and edited page copy */
.post blockquote, .about blockquote, .card blockquote { margin: 1em 0; padding: 12px 18px; border-left: 3px solid var(--gold); background: rgba(243, 200, 113, .05); border-radius: 0 12px 12px 0; color: var(--text2); }
.post ul, .about ul { padding-left: 1.2em; } .post li, .about li { margin: .35em 0; }
.post .yt-embed { margin: 1.2em 0; }
.about h2 { margin-top: 1.2em; } .about h3 { margin-top: 1.4em; color: var(--gold); }
.about p { color: var(--text2); } .about .lead { color: #fff; font-weight: 600; font-size: 1.25rem; }

/* phones: show the whole logo in the hero, and keep the header on one row */
@media (max-width: 760px) {
  .hero { min-height: 0; place-items: end center; }
  .hero .hero-bg { inset: 0; background-size: 210% auto; background-position: 50% 0; background-repeat: no-repeat; animation: none; transform: none; }
  .hero-inner { padding-top: 78vw; padding-bottom: 60px; }
  .status-strip { margin-top: -26px; border-radius: 22px; padding: 12px 16px; }
}
@media (max-width: 520px) {
  .brand b { display: none; }
  .topbar { gap: 10px; padding: 8px 14px; }
  .who { gap: 6px; }
  .status-pill { padding: 7px 10px; font-size: 10px; }
}
@media (max-width: 440px) { .who .status-pill { display: none; } }