:root{color-scheme:dark;--bg:#090d12;--text:#f2f1ed;--muted:#9ba5b0;--gold:#d8b966;--line:#ffffff14}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--text);background:radial-gradient(ellipse at 15% 15%,#aa82330b,transparent 45%),var(--bg);font-family:Inter,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid var(--gold);outline-offset:6px}img{max-width:100%;height:auto}.wrap{width:min(1120px,calc(100% - 64px));margin-inline:auto}.skip{position:absolute;top:-80px;padding:12px;background:var(--gold);color:var(--bg);z-index:5}.skip:focus{top:10px}.header{display:flex;align-items:center;gap:24px;min-height:112px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center}.brand img{width:112px;height:76px;object-fit:contain}.domain{color:#78838f;font:12px Consolas,monospace;letter-spacing:.04em}.header-link{margin-left:auto;font-size:13px;font-weight:600}.header-link span{margin-left:12px;color:var(--gold)}.intro{padding:76px 0 48px}.eyebrow{display:flex;align-items:center;gap:12px;color:var(--gold);font-size:10px;font-weight:750;letter-spacing:.2em;margin:0 0 24px}.eyebrow>span{width:26px;height:1px;background:var(--gold)}h1{font-size:clamp(36px,4.7vw,62px);font-weight:650;line-height:1.12;letter-spacing:-.055em;margin:0}h1 em{font-style:normal;color:#a6acb3}.lead{max-width:630px;line-height:1.8;font-size:16px;color:var(--muted);margin:24px 0 0}.databases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.database{--accent:#93cce4;position:relative;display:flex;flex-direction:column;min-height:420px;padding:30px 32px 0;border:1px solid #89bdd626;border-radius:14px;overflow:hidden;background:radial-gradient(ellipse at 85% 25%,#4c99bb18,transparent 65%),linear-gradient(140deg,#101a23,#0d131a);transition:border-color .2s,transform .2s}.database.legion{--accent:#acd17b;border-color:#9dc57526;background:radial-gradient(ellipse at 85% 25%,#80af3b16,transparent 65%),linear-gradient(140deg,#151c15,#0d1311)}.database:hover{transform:translateY(-4px);border-color:var(--accent)}.card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.number{font-size:10px;letter-spacing:.15em;color:#84919b}.version{font:11px Consolas,monospace;color:var(--accent);border:1px solid #ffffff16;border-radius:5px;padding:6px 9px}.sigil{position:absolute;right:38px;top:90px;font-size:130px;line-height:1;color:var(--accent);opacity:.13;pointer-events:none}.expansion{margin:58px 0 15px;font-size:10px;font-weight:700;letter-spacing:.18em;color:var(--accent);position:relative}.database h2{margin:0;font-size:clamp(25px,2.7vw,35px);font-weight:600;letter-spacing:-.035em;line-height:1.16;position:relative}.description{max-width:355px;margin:20px 0 30px;color:var(--muted);font-size:14px;line-height:1.75}.card-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:70px;border-top:1px solid #ffffff12;margin-top:auto;font-size:13px;font-weight:600}.arrow{font-size:24px;color:var(--accent);transition:transform .2s}.database:hover .arrow{transform:translate(3px,-3px)}.project{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:38px 0;margin-top:34px;border-bottom:1px solid var(--line)}.project .eyebrow{margin-bottom:12px}.project h2{margin:0;font-size:23px;font-weight:600;letter-spacing:-.025em}.project p:last-child{color:var(--muted);font-size:13px;line-height:1.7;margin:12px 0 0;max-width:560px}.button{display:inline-flex;align-items:center;justify-content:center;gap:24px;flex-shrink:0;border:1px solid #d8b96660;background:#d8b9660b;color:#e4c77d;padding:16px 22px;border-radius:7px;font-size:13px;font-weight:650;transition:background .2s}.button:hover{background:#d8b9661c}.footer{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;padding-block:26px 32px;font-size:11px;color:#85909a}.footer p{margin:0}.divider{margin-inline:10px;color:#414951}.footer>a{margin-left:auto}.footer small{flex-basis:100%;font-size:10px;color:#626e7a;line-height:1.6}
@media(max-width:700px){.wrap{width:calc(100% - 36px)}.header{min-height:88px;gap:12px}.brand img{width:86px;height:64px}.domain{display:none}.intro{padding:48px 0 32px}.lead{font-size:14px}.databases{grid-template-columns:1fr;gap:16px}.database{min-height:390px;padding:24px 24px 0}.expansion{margin-top:45px}.project{align-items:flex-start;flex-direction:column;gap:24px;margin-top:18px;padding-block:30px}.button{width:100%}.footer{gap:16px}.footer p{font-size:10px}.divider{margin-inline:5px}}
html, body {
  min-height: 100%;
  background: var(--bg);
}
body {
  min-height: 100vh;
  background-color: var(--bg);
  background-image: linear-gradient(180deg, #090d1259, #090d127a 65%, #090d12e6),
    url('assets/server-background.png');
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
@media(max-width:700px) {
  body {
    background-attachment: scroll;
    background-size: 100% 100%, auto 100vh;
  }
}
main.wrap { padding-top: 42px; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.project.project--compact { justify-content: center; margin-top: 0; padding-block: 24px; }
/* Artwork fades into the page rather than stopping at a visible frame */
.database,
.database.legion {
  isolation: isolate;
  border: 0;
  border-radius: 24px;
  background: transparent;
  min-height: 450px;
}
.database-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 62% center;
  opacity: .85;
  -webkit-mask-image: radial-gradient(ellipse at 58% 42%, #000 20%, #000b 55%, transparent 85%);
  mask-image: radial-gradient(ellipse at 58% 42%, #000 20%, #000b 55%, transparent 85%);
  transition: transform .6s ease, opacity .6s ease;
}
.database.legion .database-art { object-position: 55% center; }
.database::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, #090d12ed, #090d12b8 60%, #090d1259),
    linear-gradient(0deg, var(--bg) 0%, #090d12e0 22%, transparent 75%);
  box-shadow: inset 0 0 38px 16px var(--bg);
}
.database:hover { transform: none; border-color: transparent; }
.database:hover .database-art { transform: scale(1.035); opacity: 1; }
.database .number { color: #c6ced5; }
.database .description { color: #e0e6eb; text-shadow: 0 1px 8px #000; }
.database h2 { text-shadow: 0 2px 18px #0009; }
.card-bottom { border-top: 0; }
.version { background: #090d1270; border-color: #ffffff12; }
@media(max-width:700px) {
  .database, .database.legion { min-height: 420px; }
}
.card-top { justify-content: flex-end; }
.card-border {
  position: absolute;
  inset: 4px;
  z-index: 2;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  max-width: none;
  overflow: visible;
  pointer-events: none;
}
.card-border rect {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-dasharray: 16 84;
  animation: spell-orbit 3.5s linear infinite;
}
.card-border-glow { stroke-width: 9px; filter: blur(4px); opacity: .9; }
.card-border-beam { stroke-width: 3px; filter: drop-shadow(0 0 5px var(--accent)); }
.legion .card-border rect { animation-delay: -1.75s; }
.card-sheen {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 35%, #7be4fa08 43%,
    #dcc3ff16 48%, #fff2c520 50%, #b8f4d810 53%, transparent 62%);
  background-size: 300% 100%;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse, #000 20%, transparent 75%);
  animation: holographic-sweep 10s ease-in-out infinite;
}
.legion .card-sheen { animation-delay: -5s; }
.database > .card-top, .database > .expansion, .database > h2,
.database > .description, .database > .card-bottom { position: relative; z-index: 3; }
@keyframes spell-orbit { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@keyframes holographic-sweep {
  0%, 15% { background-position: 100% 50%; opacity: 0; }
  30% { opacity: .8; }
  65%, 100% { background-position: 0% 50%; opacity: 0; }
}
.trademark { font-size: .65em; line-height: 0; vertical-align: super; margin-left: 1px; }
.footer-links { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-left: auto; }
.footer-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.footer-links a:hover { color: var(--gold); }
.github-link svg { flex-shrink: 0; }
@media(max-width:540px) { .footer-links { flex-basis: 100%; margin-left: 0; gap: 24px; } }
:root { --muted: #c6cfd8; }
.domain { color: #c5cfd8; }
.header-link, .domain, .card-bottom { text-shadow: 0 1px 5px #000, 0 0 14px #000; }
.card-bottom { color: #f4f7fa; }
.expansion { font-weight: 800; text-shadow: 0 1px 8px #000; }
.version { color: #f0f5fa; background: #090d12e6; }
.button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 60px;
  gap: 16px;
  padding: 10px 20px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, #090d12b3 25% 75%, transparent);
  color: #e5edf2;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  box-shadow: none;
  transition: color .25s ease;
}
.button::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #93cce4 30%, #acd17b 70%, transparent);
  opacity: .5;
  transition: opacity .25s ease, box-shadow .25s ease;
}
.button:hover, .button:focus-visible {
  background: linear-gradient(90deg, transparent, #090d12cc 25% 75%, transparent);
  color: #fff;
  transform: none;
  box-shadow: none;
}
.button:hover::before, .button:focus-visible::before { opacity: 1; box-shadow: 0 3px 16px #93cce433; }
.button-icon { flex-shrink: 0; color: #93cce4; filter: drop-shadow(0 0 7px #93cce43b); }
.button-icon path { stroke: #acd17b; }
.button-arrow { margin-left: 12px; font-size: 18px; line-height: 1; color: #a8bac5; transition: transform .25s ease; }
.button:hover .button-arrow, .button:focus-visible .button-arrow { transform: translate(2px, -2px); }
.footer { position: relative; isolation: isolate; color: #c6cfd8; font-size: 12px; text-shadow: 0 1px 6px #000; }
.footer::before { content: ""; position: absolute; inset: -10px -16px; z-index: -1; pointer-events: none; background: #090d12b3; filter: blur(18px); border-radius: 30px; }
.footer small { color: #b5c0ca; font-size: 12px; line-height: 1.7; }
.footer-bottom { display: flex; flex-basis: 100%; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 24px; margin-top: 16px; }
.footer .footer-brand { margin: 0; text-align: center; font-size: 16px; font-weight: 650; color: var(--text); }
.footer-bottom .footer-links { flex-basis: auto; justify-content: center; margin: 0; }
.footer .divider { color: #9ba9b7; }
.effects-toggle { padding: 6px 0; border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.effects-toggle:hover { color: var(--text); }
.effects-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .card-sheen{display:none}
  /* The requested border effect can always be paused using the visible control */
  .card-border rect{animation:spell-orbit 3.5s linear infinite!important}
  .legion .card-border rect{animation-delay:-1.75s!important}
}
.effects-paused .card-border rect, .effects-paused .card-sheen { animation-play-state: paused !important; }
main.wrap { position: relative; }
.shared-trail { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.shared-trail path { fill: none; stroke: #c5e3cc; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 42 958; animation: shared-orbit 13s linear infinite !important; }
.shared-trail-glow { stroke-width: 8px; opacity: .65; filter: blur(5px); }
.shared-trail-beam { stroke-width: 2px; filter: drop-shadow(0 0 4px #a8dce5); }
.unified-effects .card-border, .unified-effects .card-sheen { display: none; }
.effects-paused .shared-trail path { animation-play-state: paused !important; }
@keyframes shared-orbit { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1000; } }

/* The game website is the primary destination, databases are secondary */
main.wrap { padding-top: 30px; padding-bottom: 22px; }
.database.main-destination {
  --accent: #e4c77d;
  min-height: 300px;
  margin-bottom: 22px;
  padding: 36px 40px 22px;
}
.main-destination .database-art {
  left: auto;
  width: 70%;
  object-fit: contain;
  object-position: right center;
  opacity: .95;
  -webkit-mask-image: linear-gradient(90deg, transparent, #0009 20%, #000 50%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #0009 20%, #000 50%, #000 96%, transparent);
}
.main-destination::after {
  background: linear-gradient(90deg, #090d12f5, #090d12b3 40%, #090d1226 75%, #090d121a);
  box-shadow: inset 0 0 24px 10px var(--bg);
}
.main-destination .expansion { margin: 10px 0 18px; }
.main-destination h1 { position: relative; z-index: 3; font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -.035em; }
.main-destination .description { max-width: 480px; margin: 18px 0 16px; font-size: 16px; }
.main-destination .card-bottom { min-height: 54px; }
.main-destination-cta { color: #f5dda6; font-size: 15px; font-weight: 750; }
.databases .database { min-height: 255px; padding: 22px 28px 0; }
.databases .expansion { margin: 16px 0 12px; font-size: 9px; }
.databases .database h2 { font-size: clamp(23px, 2.3vw, 28px); }
.databases .description { margin: 12px 0 16px; font-size: 13px; }
.databases .card-bottom { min-height: 52px; font-size: 12px; }
.databases .card-border { opacity: .6; }
.databases .database:hover .card-border { opacity: 1; }
@media(max-width:700px) {
  main.wrap { padding-top: 20px; }
  .database.main-destination { min-height: 280px; padding: 26px 24px 18px; margin-bottom: 16px; }
  .main-destination .description { font-size: 14px; }
  .main-destination .database-art { width: 100%; object-fit: cover; opacity: .55; }
  .databases .database { min-height: 245px; padding-inline: 24px; }
}