/* The launcher's palette: forest, parchment, gold. */ :root { --forest: #0e1b15; --forest-light: #162920; --parchment: #e8e3c9; --muted: #9cab96; --gold: #d4a340; --gold-dark: #2e210b; --danger: #b5533c; /* sc-537: the admin console needs a "this is healthy" colour, which a page about downloads and passwords never did. It is the same muted, slightly desaturated family as the rest of the palette so a screen full of dots still looks like this site and not like a monitoring tool. */ --ok: #6fbf7b; --line: rgba(255, 255, 255, 0.09); } * { box-sizing: border-box; } body { margin: 0; font: 16px/1.55 "Segoe UI", system-ui, -apple-system, sans-serif; color: var(--parchment); background: linear-gradient(180deg, var(--forest-light), var(--forest) 60%); min-height: 100vh; } a { color: var(--gold); } code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; } .digest { word-break: break-all; } .muted { color: var(--muted); } .card dd.version { color: var(--muted); font-size: 0.85rem; } .site-header { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .brand { display: inline-flex; align-items: center; text-decoration: none; } .brand img { display: block; height: 44px; width: auto; } .site-header nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center; } .site-header nav a { text-decoration: none; color: var(--parchment); } .site-header nav a.accent { color: var(--gold); } .site-header nav form { display: inline; } .link-button { background: none; border: 0; color: var(--parchment); font: inherit; cursor: pointer; padding: 0; } main { max-width: 960px; margin: 0 auto; padding: 1.5rem; } .site-footer { max-width: 960px; margin: 2rem auto; padding: 0 1.5rem 2rem; color: var(--muted); font-size: 0.85rem; } .hero { padding: 2.5rem 0 1.5rem; } /* sc-2410: the vertical logo heads the home page. */ .hero-logo { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 0 1rem -0.5rem; } .hero h1 { font-size: 2.6rem; margin: 0 0 0.5rem; } .hero p { max-width: 42rem; } .hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; } .button { display: inline-block; background: var(--gold); color: var(--gold-dark); border: 0; border-radius: 8px; padding: 0.65rem 1.2rem; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; } .button.secondary { background: transparent; color: var(--parchment); border: 1px solid rgba(255, 255, 255, 0.25); } .button.danger { background: var(--danger); color: var(--parchment); } .cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); } .card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 1.25rem; } .card h3 { margin-top: 0; } .card dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 0.75rem; margin: 1rem 0; } .card dt { color: var(--muted); } .card dd { margin: 0; } .card ol { padding-left: 1.2rem; } .panel { max-width: 34rem; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 1.5rem; margin: 1rem auto; } .panel h1 { margin-top: 0; } .panel h2 { margin-top: 2rem; font-size: 1.15rem; } label { display: block; margin: 0.9rem 0; } input[type="text"], input[type="password"] { display: block; width: 100%; margin-top: 0.3rem; padding: 0.6rem 0.7rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.25); color: var(--parchment); font: inherit; } .flash { border-radius: 10px; padding: 0.75rem 1rem; margin: 0 0 1rem; } .flash.notice { background: rgba(212, 163, 64, 0.15); border: 1px solid rgba(212, 163, 64, 0.5); } .flash.alert { background: rgba(181, 83, 60, 0.18); border: 1px solid rgba(181, 83, 60, 0.6); } /* ── The admin console (sc-537) ───────────────────────────────────────────────────────────────── Dense by intention: an operator is reading a whole cluster at a glance, so the type is smaller than the player-facing pages, the tables are tight, and colour carries the state. Three rules keep it honest on a phone, which is where it will be read when something is wrong on a weekend: every table sits in a `.scroll` box and scrolls sideways rather than wrapping into an unreadable stack, the slot pair collapses to one column, and nothing depends on hover — a `title` is a nicety, never the only place a fact appears. */ main.wide { max-width: 1200px; } /* The footer is a sibling of main, so it needs the same measure or it sits off-centre under the wider column. */ main.wide ~ .site-footer { max-width: 1200px; } .admin-head { margin: 1.5rem 0 1rem; } .admin-head h1 { margin: 0 0 0.25rem; font-size: 1.9rem; } .admin-head p { margin: 0; font-size: 0.9rem; max-width: 46rem; } .banner { border-radius: 10px; padding: 0.7rem 0.9rem; margin: 0 0 1rem; font-size: 0.9rem; background: rgba(181, 83, 60, 0.18); border: 1px solid rgba(181, 83, 60, 0.65); } .banner.warn { background: rgba(212, 163, 64, 0.14); border-color: rgba(212, 163, 64, 0.55); } .banner.neutral { background: rgba(255, 255, 255, 0.05); border-color: var(--line); color: var(--parchment); } .banner code, .banner .reason { color: var(--parchment); } .region { margin: 0 0 2.75rem; } .region-head { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 0.4rem; margin-bottom: 0.9rem; } .region-head h2 { margin: 0; font-size: 1.45rem; } .region-head h2 .server { color: var(--gold); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; margin-left: 0.6rem; } .region h3 { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 1.4rem 0 0.5rem; } .meta { margin: 0; color: var(--muted); font-size: 0.85rem; } .attention { color: var(--danger); } .scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.grid { width: 100%; border-collapse: collapse; font-size: 0.88rem; } table.grid th { text-align: left; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 0.3rem 0.6rem 0.35rem; border-bottom: 1px solid var(--line); white-space: nowrap; } table.grid td { padding: 0.38rem 0.6rem; border-bottom: 1px solid rgba(255, 255, 255, 0.045); white-space: nowrap; vertical-align: top; } table.grid tr:last-child td { border-bottom: 0; } table.grid td.name code { margin-left: 0.5rem; font-size: 0.8em; } table.grid .right { text-align: right; } table.grid.layers { margin-top: 0.4rem; } .dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; margin-right: 0.45rem; vertical-align: 0.05rem; } .dot.ok { background: var(--ok); } .dot.partial { background: var(--gold); } .dot.down { background: var(--danger); } .dot.idle { background: var(--muted); } .dot.unknown { background: transparent; border: 1px solid var(--muted); } .badge { display: inline-block; font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.05rem 0.42rem 0.1rem; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; } .badge.ok { color: var(--ok); } .badge.warn { color: var(--gold); } .badge.off { color: var(--danger); } .badge.muted, .badge.unknown { color: var(--muted); } .badge.neutral { color: var(--parchment); border-color: var(--line); background: rgba(255, 255, 255, 0.05); } .badge.pinned { color: var(--gold); border-style: dashed; } .zone { background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line); border-radius: 14px; padding: 0.85rem 1rem 0.9rem; margin: 0 0 0.9rem; } .zone-head { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: flex-start; justify-content: space-between; } .zone-head h4 { margin: 0 0 0.15rem; font-size: 1.15rem; } .zone-head h4 code { font-size: 0.7em; color: var(--muted); margin-left: 0.5rem; } .zone-command { text-align: right; } .zone-command .reason { margin: 0.3rem 0 0; font-size: 0.78rem; max-width: 18rem; } .zone .notes { margin: 0.5rem 0 0; display: flex; gap: 0.35rem; flex-wrap: wrap; } .slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin: 0.7rem 0 0.2rem; } .slot { background: rgba(0, 0, 0, 0.22); border: 1px solid transparent; border-radius: 10px; padding: 0.6rem 0.75rem; } .slot.is-serving { border-color: rgba(111, 191, 123, 0.35); } .slot h5 { margin: 0 0 0.4rem; font-size: 0.95rem; display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; } /* Not a badge: it is a sentence about the zone, next to badges that are about the slot — or, in a declared zone's table, about the version. */ .routed { font-size: 0.72rem; color: var(--gold); letter-spacing: 0.04em; font-weight: 400; } .no-layers { margin: 0.7rem 0 0; font-size: 0.85rem; } /* sc-568: a zone rolled by world version. The line above the table says which version arrivals enter; the rows of that version carry the same gold accent, so the sentence and the rows it is about are one reading rather than two. */ .arrivals-line { margin: 0.7rem 0 0.1rem; } .arrivals-line .routed { margin-left: 0.4rem; } .wv { white-space: nowrap; font-variant-numeric: tabular-nums; } table.layers td.version .routed { margin-left: 0.45rem; } table.layers tr.arrivals td:first-child { box-shadow: inset 0.15rem 0 0 var(--gold); } table.layers tr.arrivals td.version .wv { color: var(--gold); } .kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.12rem 0.7rem; margin: 0; font-size: 0.83rem; } .kv dt { color: var(--muted); } .kv dd { margin: 0; overflow-wrap: anywhere; } .tick { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0 1.5rem; } .commands { list-style: none; margin: 0; padding: 0; font-size: 0.86rem; } .commands li { padding: 0.35rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.045); display: flex; flex-wrap: wrap; gap: 0.15rem 0.55rem; align-items: baseline; } .commands li ul.actions { flex-basis: 100%; padding-left: 0.9rem; } .commands .who { font-weight: 600; } .commands .what { color: var(--gold); } .commands .reason, .banner .reason { color: var(--muted); } .commands li.refused .who { color: var(--danger); } ul.actions { list-style: none; margin: 0.25rem 0 0; padding: 0; } ul.actions li { padding: 0.1rem 0; overflow-wrap: anywhere; } ul.actions code { color: var(--parchment); font-size: 0.8rem; } .button.small { padding: 0.32rem 0.7rem; font-size: 0.82rem; border-radius: 6px; } .button[disabled] { opacity: 0.4; cursor: not-allowed; } .panel form .button.secondary { margin-left: 0.5rem; } /* Player search. The region selector and search box are one line on a desktop and stack on a phone, same as the rest of the console's forms; the grant/revoke button lives in its own table cell so no JavaScript is needed to submit it. */ .gm-search { display: flex; flex-wrap: wrap; gap: 0.9rem 1.2rem; align-items: flex-end; margin: 0 0 1.2rem; } .gm-search label { margin: 0; font-size: 0.85rem; color: var(--muted); } .gm-search select, .gm-search input[type="text"] { display: block; margin-top: 0.3rem; padding: 0.5rem 0.6rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.25); color: var(--parchment); font: inherit; } .gm-toggle { display: inline-flex; align-items: center; gap: 0.5rem; } /* The GM table's own class, so this rule cannot touch the cluster page's `table.grid` — that table already uses `td.name code` for a revision hash inline, and this one needs the account id on its own line below the username instead. */ table.gm-accounts td.name code { display: block; font-size: 0.75em; color: var(--muted); margin: 0.15rem 0 0; } /* sc-752: one player result per account, with one role control and its characters beneath it. */ .player-results { display: grid; gap: 1rem; } .player-account { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: 12px; padding: 1rem; } .player-account-head, .player-account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem 1rem; } .player-account-head { justify-content: space-between; } .player-account-head h2 { margin: 0; font-size: 1.15rem; overflow-wrap: anywhere; } .player-account-head code { color: var(--muted); font-size: 0.75rem; overflow-wrap: anywhere; } .player-account-actions { justify-content: flex-end; } .player-characters { list-style: none; margin: 0.8rem 0 0; padding: 0; border-top: 1px solid var(--line); } .player-characters li { padding: 0.85rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .player-characters li:last-child { border-bottom: 0; padding-bottom: 0; } .player-character { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(22rem, 2fr); gap: 0.85rem 1.2rem; align-items: start; } .player-character.is-deleted { background: rgba(0, 0, 0, 0.12); margin: 0 -0.55rem; padding-left: 0.55rem; padding-right: 0.55rem; border-radius: 8px; } .player-character-identity strong { min-width: 0; overflow-wrap: anywhere; } .player-character-identity .badge { margin-left: 0.45rem; } .player-character-identity code { display: block; margin-top: 0.25rem; color: var(--muted); font-size: 0.7rem; overflow-wrap: anywhere; } .player-character-identity p { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.8rem; } .player-character-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-end; gap: 0.5rem; } .player-character-controls form { margin: 0; } .character-name-action { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; } .character-name-action label { margin: 0; color: var(--muted); font-size: 0.72rem; } .character-name-action input[type="text"] { width: 12rem; margin-top: 0.2rem; padding: 0.38rem 0.5rem; font-size: 0.82rem; } .player-no-characters { margin: 0.8rem 0 0; } /* sc-779: explicit confirmation and immutable-retry receipts for character lifecycle actions. */ .character-change-head .eyebrow, .character-change-receipt .eyebrow { margin-bottom: 0.25rem; color: var(--gold); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .character-change-head code { overflow-wrap: anywhere; } .character-change-review, .character-change-receipt { padding: 1.2rem 1.35rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.04); } .character-change-review dl, .character-change-receipt dl { margin: 0; } .character-change-review dl div, .character-change-receipt dl div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.7rem; padding: 0.55rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .character-change-review dl div:last-child, .character-change-receipt dl div:last-child { border-bottom: 0; } .character-change-review dt, .character-change-receipt dt { color: var(--muted); } .character-change-review dd, .character-change-receipt dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; } .character-change-review code, .character-change-receipt code { font-size: 0.78em; color: var(--muted); } .character-change-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; margin-top: 1rem; } .character-change-actions form, .character-change-actions .button { margin: 0; } .character-change-uncertain { border-color: rgba(214, 165, 92, 0.55); } .character-change-receipt { max-width: 44rem; margin: 2rem auto; text-align: center; } .character-change-receipt h1 { margin: 0.3rem 0 0.7rem; } .character-change-receipt > p { max-width: 37rem; margin-left: auto; margin-right: auto; } .character-change-receipt dl { text-align: left; margin-top: 1.2rem; } .character-change-receipt .character-change-actions { justify-content: center; } /* sc-732: authoritative lost-item candidates and deliberate mail restoration. Cards preserve the item/quantity/reason relationship at phone width, where a dense history table would separate the action from the loss it affects. */ .restoration-head .eyebrow, .restoration-receipt .eyebrow { margin-bottom: 0.25rem; color: var(--gold); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .restoration-nav { margin: -0.25rem 0 1.2rem; font-size: 0.88rem; } .restoration-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; } .restoration-item { display: flex; flex-direction: column; justify-content: space-between; min-height: 9rem; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.04); } .restoration-item.is-unavailable { background: rgba(255, 255, 255, 0.022); } .restoration-item-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; } .restoration-item h2 { margin: 0; font-size: 1.05rem; } .restoration-quantity { color: var(--gold); white-space: nowrap; } .restoration-item-main p, .restoration-item-foot p { margin: 0.35rem 0 0; font-size: 0.84rem; color: var(--muted); } .restoration-item-foot { margin-top: 1rem; } .restoration-item-foot form { margin: 0; } .restoration-item-foot p + form { margin-top: 0.6rem; } .restoration-pager { display: flex; flex-wrap: wrap; gap: 0.5rem; } .restoration-empty, .restoration-review, .restoration-receipt { padding: 1.2rem 1.35rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.04); } .restoration-empty h2 { margin-top: 0; } .restoration-review dl, .restoration-receipt dl { margin: 0; } .restoration-review dl div, .restoration-receipt dl div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.7rem; padding: 0.55rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .restoration-review dl div:last-child, .restoration-receipt dl div:last-child { border-bottom: 0; } .restoration-review dt, .restoration-receipt dt { color: var(--muted); } .restoration-review dd, .restoration-receipt dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; } .restoration-confirm-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; margin-top: 1rem; } .restoration-confirm-actions form { margin: 0; } .restoration-confirm-actions .button { margin: 0; } .restoration-uncertain { border-color: rgba(214, 165, 92, 0.45); } .restoration-shortfall { border-color: var(--danger); } .restoration-review dl div.restoration-short dd { color: var(--danger); } .restoration-receipt { max-width: 39rem; margin: 2rem auto; text-align: center; } .restoration-receipt h1 { margin: 0.3rem 0 0.7rem; } .restoration-receipt > p { max-width: 34rem; margin-left: auto; margin-right: auto; } .restoration-receipt dl { text-align: left; margin-top: 1.2rem; } .restoration-receipt .restoration-confirm-actions { justify-content: center; } .restoration-check { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 999px; background: rgba(111, 191, 123, 0.15); border: 1px solid var(--ok); color: var(--ok); font-size: 1.7rem; } @media (max-width: 52rem) { .tick { grid-template-columns: minmax(0, 1fr); gap: 0; } } @media (max-width: 40rem) { .player-account-actions { justify-content: flex-start; } .player-account-head, .player-account-head > div, .player-account-actions { width: 100%; } .player-character { grid-template-columns: minmax(0, 1fr); } .player-character-controls { width: 100%; justify-content: flex-start; } .character-name-action { width: 100%; } .character-name-action label { flex: 1; } .character-name-action input[type="text"] { width: 100%; } .character-change-review dl div, .character-change-receipt dl div { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; } .restoration-list { grid-template-columns: minmax(0, 1fr); } .restoration-review dl div, .restoration-receipt dl div { grid-template-columns: 5.5rem minmax(0, 1fr); } /* The columns worth dropping on a phone: Kind is "Deployment" for almost every row, the world version repeats the revision's build for the zones and is blank for everything else, and age is the least-asked question. Workload, ready, restarts and revision fit a 390px screen without sideways scrolling; the wide table keeps its scroll only for narrower screens. */ table.grid .kind, table.grid .world, table.grid .age { display: none; } /* Tighter cells and a slightly smaller face at phone width: with the three columns above gone, the remaining four are text a swipe should not be needed to read. */ table.grid { font-size: 0.78rem; } table.grid th { padding-left: 0.3rem; padding-right: 0.3rem; letter-spacing: 0.04em; } table.grid td { padding-left: 0.3rem; padding-right: 0.3rem; } table.grid td.name code { margin-left: 0.3rem; } /* The name is the one cell allowed to wrap, so the table shrinks to the screen by folding the longest workload names (a layer's) instead of pushing the revision off the edge. */ table.grid td.name { white-space: normal; overflow-wrap: anywhere; } /* Except a declared zone's layer names (sc-568). A layer's pod is called `zone-