:root{--gold:#e9b64b;--gold2:#f7d98c;--bg:#0e0c09;--card:#181410;--card2:#1f1a14;--line:#332b1d;
--txt:#f0eadd;--muted:#a89d84;--green:#57c15f;--red:#e05b5b;--glow:rgba(233,182,75,.16)}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;margin:0;padding:0 0 48px;color:var(--txt);
background:radial-gradient(1100px 520px at 50% -160px,#2b2210 0%,var(--bg) 62%) fixed var(--bg)}
.top{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:10px;
padding:14px 20px;background:rgba(14,12,9,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border-bottom:1px solid var(--line)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.55}
/* The gradient and the row layout live on the <a>, not on the <h1>: the title
   is a link home, and background-clip:text only paints the element that holds
   the text. Left on the h1 it would clip nothing and the words would come out
   transparent. */
.top h1{margin:0;font-size:19px;letter-spacing:.3px}
.top h1 a{display:flex;align-items:center;gap:9px;text-decoration:none;
background:linear-gradient(92deg,var(--gold),var(--gold2) 60%,var(--gold));
-webkit-background-clip:text;background-clip:text;color:transparent;
transition:filter .2s}
.top h1 a:hover{filter:brightness(1.15)}
.top h1 img{width:24px;height:24px;border-radius:5px;flex:none;
box-shadow:0 0 8px rgba(233,182,75,.35);image-rendering:auto}
.wrap{max-width:780px;margin:0 auto;padding:18px 16px}
a{color:var(--gold);text-decoration:none;transition:color .15s}
a:hover{color:var(--gold2)}
.card{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:16px;
padding:18px;margin-bottom:16px;box-shadow:0 10px 28px rgba(0,0,0,.4);
animation:rise .5s cubic-bezier(.22,.7,.35,1) both;transition:border-color .25s}
.wrap>.card:nth-of-type(2){animation-delay:.06s}
.wrap>.card:nth-of-type(3){animation-delay:.12s}
.wrap>.card:nth-of-type(4){animation-delay:.18s}
.wrap>.card:nth-of-type(5){animation-delay:.24s}
.card:hover{border-color:#4a3d24}
.card h3{margin:0 0 10px;font-size:17px}
/* A heading that stands between groups of cards rather than inside one, so the
   settings that belong to the installation are visibly not the ones you use
   while running the server. Full-width rule above it: on a narrow screen the
   cards are the only structure there is, and without the line a heading just
   looks like a card that lost its box. */
.sect{margin:34px 0 12px;padding-top:20px;border-top:1px solid var(--line);
font-size:15px;letter-spacing:.4px;text-transform:uppercase;color:var(--gold)}
.sect+.sect-hint{margin:-6px 0 14px;font-size:13px}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
table{border-collapse:collapse;width:100%}
th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.5px}
th,td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left;font-size:15px}
tr{transition:background .15s}
tr:hover td{background:var(--glow)}
input,select{background:#131007;color:var(--txt);border:1px solid var(--line);padding:12px;border-radius:12px;
font-size:16px;width:100%;margin:4px 0;transition:border-color .18s,box-shadow .18s}
input:focus,select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--glow)}
input::placeholder{color:#6f6650}
button,.btn{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#241c0d;font-weight:700;border:none;
padding:12px 18px;border-radius:12px;font-size:16px;cursor:pointer;margin:4px 0;display:inline-block;
transition:transform .16s,box-shadow .16s,filter .16s;box-shadow:0 4px 14px rgba(0,0,0,.35)}
button:hover,.btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px var(--glow),0 4px 14px rgba(0,0,0,.35);filter:saturate(1.08)}
button:active,.btn:active{transform:translateY(0) scale(.985)}
.big{width:100%;padding:16px;font-size:17px}
.flash{background:#1c3d20;border:1px solid #3d7a42;padding:12px 14px;border-radius:12px;margin-bottom:12px;
font-size:15px;animation:rise .35s ease both;word-break:break-word}
.err{background:#47201f;border-color:#8a3f3a}
.muted{color:var(--muted);font-size:13px}
.badge{font-size:13px;padding:4px 12px;border-radius:999px;background:#241d12;border:1px solid var(--line);display:inline-block}
.row{display:flex;gap:8px;flex-wrap:wrap}.row>*{flex:1;min-width:130px}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;vertical-align:1px;margin-right:7px;background:var(--red)}
.dot.on{background:var(--green);animation:pulse 2.2s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(87,193,95,.45)}70%{box-shadow:0 0 0 9px rgba(87,193,95,0)}100%{box-shadow:0 0 0 0 rgba(87,193,95,0)}}

/* ---- first-run prompt ---------------------------------------------------
   Shown only while the server has no account at all. The point is to answer
   "what now?" for somebody who has just installed this and is looking at a
   page full of equally plausible buttons -- so the road is drawn as three
   short steps with the current one lit, and the one action that matters is
   the only thing that moves. Everything here stops under the
   prefers-reduced-motion rule further down.                              */
.onboard{border-color:rgba(233,182,75,.45);
  box-shadow:0 10px 28px rgba(0,0,0,.4),0 0 0 1px rgba(233,182,75,.10),0 0 26px -6px var(--glow);
  animation:rise .5s cubic-bezier(.22,.7,.35,1) both,breathe 4s ease-in-out 1.2s infinite}
@keyframes breathe{0%,100%{box-shadow:0 10px 28px rgba(0,0,0,.4),0 0 0 1px rgba(233,182,75,.10),0 0 26px -6px var(--glow)}
  50%{box-shadow:0 10px 28px rgba(0,0,0,.4),0 0 0 1px rgba(233,182,75,.22),0 0 34px -4px rgba(233,182,75,.30)}}

.steps3{display:flex;align-items:flex-start;justify-content:center;gap:0;margin:14px 0 10px}
.s3{display:flex;flex-direction:column;align-items:center;gap:5px;width:84px;flex:none}
.s3 b{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;background:var(--card);border:1px solid var(--line);color:var(--muted);
  transition:all .3s}
.s3 i{font-style:normal;font-size:11px;line-height:1.25;color:var(--muted);transition:color .3s}
.s3.now b{background:linear-gradient(180deg,var(--gold2),var(--gold));border-color:var(--gold);color:#2a1e08;
  animation:steppulse 2s ease-out infinite}
.s3.now i{color:var(--gold2);font-weight:600}
.s3.done b{border-color:var(--green);color:var(--green)}
.s3.done b::after{content:"✓";font-size:14px}
.s3.done b{font-size:0}
@keyframes steppulse{0%{box-shadow:0 0 0 0 rgba(233,182,75,.55)}70%{box-shadow:0 0 0 10px rgba(233,182,75,0)}
  100%{box-shadow:0 0 0 0 rgba(233,182,75,0)}}
/* the connector: a track with a highlight travelling along it, so the eye is
   pulled from step 1 towards the rest rather than sitting still */
.s3bar{flex:1;height:2px;background:var(--line);margin-top:13px;border-radius:2px;
  position:relative;overflow:hidden;min-width:14px}
.s3bar u{position:absolute;inset:0;display:block;text-decoration:none;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:translateX(-100%);animation:travel 2.4s ease-in-out .6s infinite}
@keyframes travel{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}

/* ---- the two ways into the game -----------------------------------------
   Framed together, and labelled, because that is the question a visitor
   actually has: not "which of these buttons is the download" but "how do I
   play". Inside the frame they are alternatives, so a rule with the word
   between the two lines separates them rather than more whitespace -- two
   cards under each other read as step one and step two.               */
.playways{max-width:460px;margin:0 auto 16px;padding:14px;border:1px solid var(--line);
  border-radius:16px;background:rgba(255,255,255,.02)}
.playways>.card{margin:0}
.playways-t{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:1.6px;
  color:var(--muted);text-align:center}
.orsep{display:flex;align-items:center;gap:12px;margin:14px 2px;
  font-size:18px;font-weight:800;letter-spacing:3px;color:#cdc5b0}
.orsep::before,.orsep::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---- the browser client, once it is ready to play ------------------------
   This card is the answer to "and now?" for somebody who has just made an
   account, so it is the one thing on the page that moves. Three layers, all
   cheap: a sheen that travels across the card, a ring that breathes, and a
   button that pulses. The global prefers-reduced-motion rule at the bottom of
   this stylesheet switches every one of them off.                         */
.playcard{position:relative;overflow:hidden;
  border-color:rgba(87,193,95,.45);
  animation:rise .5s cubic-bezier(.22,.7,.35,1) both,playbreathe 3.4s ease-in-out .8s infinite}
@keyframes playbreathe{
  0%,100%{box-shadow:0 10px 28px rgba(0,0,0,.4),0 0 0 1px rgba(87,193,95,.12),0 0 26px -6px rgba(87,193,95,.30)}
  50%    {box-shadow:0 10px 28px rgba(0,0,0,.4),0 0 0 1px rgba(87,193,95,.30),0 0 38px -2px rgba(87,193,95,.45)}}
/* the sheen: a wide, very faint diagonal band that crosses every few seconds */
.playcard::after{content:"";position:absolute;top:-60%;left:-60%;width:60%;height:220%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.13),transparent);
  transform:translateX(-60%) rotate(12deg);animation:sheen 4.5s ease-in-out 1.4s infinite}
@keyframes sheen{0%{transform:translateX(-60%) rotate(12deg)}
  45%,100%{transform:translateX(420%) rotate(12deg)}}
.playcard h3{animation:none}
/* the button: a green pulse rather than the panel's gold one, because this is
   "ready, go" and not "look here" -- and a small lift so it reads as pressable */
.btn.play{animation:playpulse 2.1s ease-out infinite;transition:transform .15s ease}
.btn.play:hover{transform:translateY(-2px)}
@keyframes playpulse{
  0%  {box-shadow:0 0 0 0 rgba(87,193,95,.50),0 2px 10px rgba(0,0,0,.35)}
  70% {box-shadow:0 0 0 12px rgba(87,193,95,0),0 2px 10px rgba(0,0,0,.35)}
  100%{box-shadow:0 0 0 0 rgba(87,193,95,0),0 2px 10px rgba(0,0,0,.35)}}
.btn.glow{animation:btnglow 2.6s ease-in-out infinite}
@keyframes btnglow{0%,100%{box-shadow:0 2px 10px rgba(233,182,75,.20)}
  50%{box-shadow:0 4px 20px rgba(233,182,75,.42)}}
.steps{margin:10px 0 4px;padding:0;list-style:none;counter-reset:s;text-align:left}
.steps li{counter-increment:s;margin:9px 0;padding-left:36px;position:relative;font-size:14px;color:#d8d0bd}
.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:24px;height:24px;border-radius:50%;
background:var(--glow);border:1px solid var(--gold);color:var(--gold);font-weight:700;font-size:13px;
display:flex;align-items:center;justify-content:center}
.hintline{font-size:13px;min-height:18px;margin:2px 0 6px}
.ok-t{color:var(--green)}.bad-t{color:var(--red)}
/* Anything carrying an explanation says so quietly: the cursor changes, and
   text you can hover gets a faint dotted underline. No popups, no scripting -
   the browser's own tooltip does the work. */
[title]{cursor:help}
button[title],.btn[title],a.btn[title],select[title]{cursor:pointer}
input[title]{cursor:text}
.help{border-bottom:1px dotted #6b6350}
.about p{margin:0 0 10px;line-height:1.6;font-size:14px;color:#cdc5b0}
.about p:last-child{margin-bottom:0}
/* ---- the rendered changelog --------------------------------------------
   Everything under .md was produced by md_to_html(): a fixed set of tags,
   built here, out of text that was HTML-escaped before a single one of them
   was added. It is styled as a document rather than as part of the panel,
   because that is what it is. */
.md{font-size:14px;line-height:1.65;color:#cdc5b0}
.md h2{font-size:17px;margin:20px 0 8px;color:var(--gold2)}
.md h2:first-child{margin-top:0}
.md h3{font-size:15px;margin:16px 0 6px;color:var(--txt)}
.md h4,.md h5{font-size:13px;margin:14px 0 6px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.md p{margin:0 0 10px}
.md ul,.md ol{margin:0 0 10px;padding-left:22px}
.md li{margin:5px 0}
.md hr{border:none;border-top:1px solid var(--line);margin:18px 0}
.md code,.cmd{background:#131007;border:1px solid var(--line);border-radius:6px;padding:1px 5px;
font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:13px}
.md pre,pre.cmd{background:#131007;border:1px solid var(--line);border-radius:10px;padding:12px;
overflow-x:auto;white-space:pre;margin:8px 0}
.md pre code,pre.cmd{border:none;background:none;padding:0}
pre.cmd{padding:12px;border:1px solid var(--line);background:#131007;color:#cdc5b0;line-height:1.5}
.md strong{color:var(--txt)}
.md a{text-decoration:underline}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}