/* underwend-web: night steel over the painting, red for what to press.
   No fonts or scripts fetched: the page loads nothing but itself and its
   picture. */

:root {
    color-scheme: dark;
    --bg: #090b0e;
    --bg-2: #10141a;
    --panel: rgba(12, 15, 20, 0.9);
    --line: #2a313b;
    --text: #e6eaef;
    --dim: #98a2ae;
    --steel: #c9d3de;
    --steel-light: #f2f5f8;
    --steel-dark: #6f7d8e;
    --blood: #9e2a22;
    --blood-light: #d9574b;
    --ok: #8fbf73;
    --serif: "Cinzel", "Trajan Pro", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --shadow: 0 1px 3px #000, 0 0 12px rgba(0, 0, 0, 0.85);
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font: 16px/1.55 var(--sans);
    display: flex;
    flex-direction: column;
}
/* The picture behind everything, held still, lit as the game lights a
   field: a circle of light in the middle, the dark closing in softly at
   the edges. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle farthest-corner at 50% 42%,
            rgba(8, 10, 13, 0.2) 0%, rgba(8, 10, 13, 0.4) 30%,
            rgba(8, 10, 13, 0.8) 58%, rgba(8, 10, 13, 0.97) 80%),
        url("/background.jpg") center 30% / cover no-repeat,
        var(--bg);
}

a { color: var(--steel-light); text-decoration: underline; text-decoration-color: var(--blood-light); text-underline-offset: 3px; }
a:hover { color: #fff; text-decoration-color: #fff; }
code { font-family: var(--mono); font-size: 0.92em; color: var(--steel-light); }

/* The bar */
.bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 24px;
    position: relative;
    z-index: 1;
    padding: 14px max(16px, calc((100% - 1080px) / 2));
    background: rgba(9, 11, 14, 0.88);
}
/* Its lower edge is cast iron: a vine hung from a rail. */
.bar::after {
    content: "";
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    right: 0;
    height: 24px;
    background: url("/rail.svg") center top repeat-x;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    pointer-events: none;
}
.bar a { text-decoration: none; }
.brand {
    font-family: var(--serif);
    font-size: 20px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--steel-light);
}
nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
nav a {
    color: var(--dim);
    font-family: var(--serif);
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
}
nav a:hover { color: var(--text); }
nav a.on { color: var(--steel-light); border-bottom-color: var(--blood-light); }

main {
    flex: 1;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    /* Room under the bar's iron. */
    padding: 40px 16px 48px;
}

h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--steel-light);
}
h1 { font-size: 30px; margin: 0 0 18px; }
h2 { font-size: 18px; margin: 0 0 14px; text-transform: uppercase; letter-spacing: 0.12em; }
h3 { font-size: 16px; margin: 18px 0 4px; }

/* The hero: the title at the top of the screen, the downloads at its
   bottom, the picture's figure left clear between them. */
.hero {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    min-height: calc(100svh - 61px - 32px);
    margin-top: -16px;
    padding: 24px 0 36px;
    text-align: center;
}
.eyebrow {
    margin: 0;
    font-family: var(--serif);
    font-size: 14px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--blood-light);
}
.title {
    margin: 4px 0 10px;
    font-size: clamp(36px, 11vw, 118px);
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: linear-gradient(to bottom, #ffffff 0%, var(--steel-light) 35%, var(--steel) 62%, var(--steel-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 24px rgba(0, 0, 0, 0.7));
}
.downloads {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}
.download {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 250px;
    margin: 10px;
    padding: 16px 32px;
    border: 1px solid transparent;
    /* Oxblood gone dark with age, a patina over it. */
    background: url("/grain.svg") 0 0 / 160px, linear-gradient(to bottom, #573532, #3a2321 55%, #281816);
    box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 235, 225, 0.08), 0 6px 22px rgba(0, 0, 0, 0.6);
    color: #eadcd5;
    text-decoration: none;
    transition: transform 0.12s, filter 0.12s;
}
/* Lit, as the lamp it's drawn from. */
.download:hover { color: #fff; filter: brightness(1.15) drop-shadow(0 0 8px rgba(255, 190, 150, 0.25)); transform: translateY(-1px); }
.download .os {
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.06em;
}
.download .os { text-shadow: 0 1px 0 #000; }
.download .meta { font-size: 13px; color: rgba(234, 220, 213, 0.6); }
.fine { color: var(--dim); font-size: 14px; }
.hero .fine { margin: 16px 0 0; color: var(--text); }

/* Text straight on the picture, not on a card. */
.eyebrow, .hero .fine, main > h1, main > .fine, main > .lede { text-shadow: var(--shadow); }
main > .fine, main > .lede { color: var(--text); }

/* The cards */
.card {
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--panel);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    padding: 20px;
    overflow-x: auto;
}
.card.narrow { max-width: 560px; margin: 0 auto; }
.card p { margin: 0 0 10px; }
.stack { display: flex; flex-direction: column; gap: 20px; max-width: 720px; }
.steps { margin: 0 0 18px; padding-left: 22px; }
.steps li { margin: 4px 0; }
.logins { max-width: 480px; }
.logins code { font-size: 1em; }
.more { display: inline-block; margin-top: 14px; font-size: 14px; }
.cta {
    margin-top: 28px;
    padding: 28px 20px 32px;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--panel);
}
.cta h2 { margin-bottom: 18px; }
.lede { color: var(--dim); margin-top: -8px; }

.button {
    display: inline-block;
    padding: 10px 22px;
    border: 1px solid transparent;
    background: linear-gradient(to bottom, #1d232b, #12161c);
    color: var(--steel-light);
    font: 600 14px var(--serif);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}
.button:hover { background: linear-gradient(to bottom, #2a323d, #1a1f27); color: #fff; filter: drop-shadow(0 0 8px rgba(255, 190, 150, 0.2)); }
/* A call to action: as big as the downloads. */
.button.big {
    padding: 18px 40px;
    font-size: clamp(18px, 4.5vw, 26px);
    font-weight: 700;
    letter-spacing: 0.08em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 6px 22px rgba(0, 0, 0, 0.6);
}

/* The iron round a download or a button: frame.svg in two halves, the
   right one the left mirrored, so the scrolls along the top and the foot
   run in from both corners to meet in the middle. Each half reaches 8 px
   past the edge, under the text. */
.download, .button { position: relative; isolation: isolate; }
.download::before, .download::after, .button::before, .button::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -9px;
    bottom: -9px;
    left: -9px;
    width: calc(50% + 9px);
    box-sizing: border-box;
    border: solid transparent;
    border-width: 24px 0 24px 24px;
    border-image: url("/frame.svg") 24 round;
    pointer-events: none;
}
.download::after, .button::after { left: auto; right: -9px; transform: scaleX(-1); }

/* Tables */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th {
    text-align: left;
    font: 600 12px var(--serif);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dim);
    padding: 6px 10px;
    border-bottom: 1px solid var(--steel-dark);
}
td { padding: 7px 10px; border-bottom: 1px solid rgba(42, 49, 59, 0.7); white-space: nowrap; }
tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
tbody tr:hover { background: rgba(201, 211, 222, 0.06); }
.num { text-align: right; }
.rank { width: 2.5em; color: var(--dim); }
tbody tr:nth-child(1) .rank { color: #f4cf6a; font-weight: 700; }
tbody tr:nth-child(2) .rank { color: #cfd3d8; font-weight: 700; }
tbody tr:nth-child(3) .rank { color: #d08a52; font-weight: 700; }
.name { color: var(--steel-light); font-weight: 600; }
.anonymous { color: var(--dim); font-style: italic; }
.dim { color: var(--dim); }

.tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.tab {
    padding: 6px 16px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: rgba(9, 11, 14, 0.8);
    color: var(--dim);
    font: 13px var(--serif);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
}
.tab.on { border-color: var(--blood-light); color: var(--steel-light); }

/* The name form */
.ask { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; margin: 18px 0 6px; }
.ask label { flex-basis: 100%; color: var(--dim); font-size: 14px; }
.ask input {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--bg-2);
    color: var(--text);
    font: 16px var(--sans);
}
.ask input:focus { outline: none; border-color: var(--steel); }
.ok { color: var(--ok); }
.error { color: var(--blood-light); }

/* The client in the browser: the window under the bar's iron is its,
   edge to edge; the footer gives way. */
main:has(> .play) { max-width: none; padding: 0; display: flex; }
body:has(.play) footer { display: none; }
.play { flex: 1; position: relative; min-height: 480px; margin-top: 20px; background: #000; }
.play canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
.play .status {
    position: absolute;
    inset: 40% 16px auto;
    margin: 0;
    text-align: center;
    color: var(--dim);
    font-family: var(--serif);
    letter-spacing: 0.08em;
}
/* While the program and the pack come: a thin iron track, filled in
   oxblood; it sweeps, unmeasured, while the client starts. */
.play .loading {
    position: absolute;
    inset: 40% 16px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.play .loading .status { position: static; }
.play progress {
    appearance: none;
    width: min(420px, 100%);
    height: 8px;
    border: 1px solid var(--steel-dark);
    border-radius: 2px;
    background: var(--bg-2);
    box-shadow: inset 0 1px 3px #000;
}
.play progress::-webkit-progress-bar { background: var(--bg-2); border-radius: 1px; }
.play progress::-webkit-progress-value {
    background: linear-gradient(to bottom, var(--blood-light), var(--blood) 60%, #5e1914);
    border-radius: 1px;
    transition: width 0.2s;
}
.play progress:indeterminate {
    background: linear-gradient(90deg, var(--bg-2) 30%, var(--blood) 50%, var(--bg-2) 70%) 0 0 / 300% 100%;
    animation: sweep 1.6s linear infinite;
}
.play progress:indeterminate::-webkit-progress-bar { background: transparent; }
@keyframes sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }

footer {
    padding: 22px 16px;
    border-top: 1px solid var(--line);
    background: rgba(9, 11, 14, 0.88);
    text-align: center;
    color: var(--dim);
    font-size: 13px;
}
footer p { margin: 0; }

@media (max-width: 520px) {
    .download { min-width: 0; width: calc(100% - 12px); margin: 8px 6px; padding: 16px 20px; }
    .button.big { width: calc(100% - 12px); padding: 18px 20px; }
    .hero { min-height: calc(100svh - 110px - 32px); padding-top: 8px; }
    td, th { padding: 6px 6px; }
}