/* Starport panel, "Plasma Console" theme (2026-10-30): the look of the game's own windows. Plasma navy with a soft glow,
   brushed-steel frames, cut corners instead of rounded ones, LED status, Chakra Petch titles, IBM Plex Sans text and the
   VT323 terminal face for logs. One dark look on purpose. Fonts are self-hosted (fonts.css). */
:root {
  --bg: #070b1f; --nav: rgba(4, 7, 22, .8);
  --panel: #101b4b; --panel-b: #0b1540;                 /* panel fill, top to bottom */
  --fill: linear-gradient(180deg, var(--panel), var(--panel-b));
  --panel2: #0a1336;                                     /* table heads, hovers, insets */
  --line: #24346a;                                       /* rules inside panels */
  --edge: rgba(150, 172, 214, .5);                       /* the steel frame */
  --text: #dfe8ff; --muted: #93a4cc; --title: #cfe0ff;
  --accent: #4cb4ff; --accent-hi: #8ad0ff; --accent-lo: #2a8fe6;
  --ok: #3ee07a; --warn: #f2b33d; --bad: #ff5a5a; --chip: #16245c;
  --ctl: 32px; --ctl-sm: 26px;                           /* one height for buttons, inputs and selects; chips */
  --cut: 12px; --cut-sm: 6px;
  --f-display: "Chakra Petch", "Segoe UI", sans-serif;
  --f-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", Consolas, monospace;
  --f-term: "VT323", "IBM Plex Mono", Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; scrollbar-color: #2c3f7c transparent; }
::selection { background: rgba(76, 180, 255, .35); }
body { margin: 0; color: var(--text); font: 14px/1.55 var(--f-body);
  background: radial-gradient(1200px 600px at 85% -10%, rgba(52, 96, 220, .28), transparent 70%),
              radial-gradient(900px 520px at 0% 110%, rgba(80, 52, 190, .2), transparent 70%), var(--bg);
  background-attachment: fixed; }
.hidden { display: none !important; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); }
h1 { font: 700 26px/1.2 var(--f-display); letter-spacing: .02em; color: #fff; margin: 0 0 18px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; text-wrap: balance; }
h2 { font: 600 13.5px/1.3 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--title); margin: 30px 0 12px; }
.muted { color: var(--muted); } .small { font-size: 12.5px; } .error { color: var(--bad); min-height: 1.2em; }
/* helper text inside uppercase titles stays normal reading text */
h2 a, h2 .muted, .card .title .muted { font: 400 12.5px/1.4 var(--f-body); letter-spacing: 0; text-transform: none; }
code { font: 12.5px/1.4 var(--f-mono); color: var(--title); background: rgba(76, 180, 255, .08); box-shadow: inset 0 0 0 1px rgba(76, 180, 255, .18); padding: 1px 5px; }

/* cut corners with a steel frame: the two corners are clipped, the straight edges are an inset line and the two cuts are
   diagonal lines in corner-sized squares; --c sets the cut, --edge the frame colour, --fill the face */
.card, .stat, .table-wrap, .login-card, .docs-guide, .docs-toc, .log, .modal-card, .toast, .news-stage, .gal-game-row, button {
  --c: var(--cut);
  border: 0; border-radius: 0;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  background:
    linear-gradient(to bottom right, transparent calc(50% - .8px), var(--edge) calc(50% - .8px) calc(50% + .8px), transparent calc(50% + .8px)) 0 0 / var(--c) var(--c) no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - .8px), var(--edge) calc(50% - .8px) calc(50% + .8px), transparent calc(50% + .8px)) 100% 100% / var(--c) var(--c) no-repeat,
    var(--fill);
  box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 1px rgba(206, 220, 246, .06);
}

input, select, textarea { background: rgba(5, 10, 32, .78); color: var(--text); border: 1px solid var(--line); border-radius: 0; padding: 5px 10px; font: inherit; line-height: 20px; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select { height: var(--ctl); }
input:hover, select:hover, textarea:hover { border-color: #3a4f8f; }
input[type=checkbox], input[type=radio] { width: 15px; height: 15px; margin: 0; padding: 0; accent-color: var(--accent); vertical-align: -2px; }
input[type=range] { padding: 0; accent-color: var(--accent); border: 0; background: none; }
input[type=file] { padding: 3px 4px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
button { --c: var(--cut-sm); --fill: rgba(9, 18, 52, .92); color: var(--text); font: 600 12.5px/20px var(--f-display); letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 14px; min-height: var(--ctl); cursor: pointer; white-space: nowrap; transition: color .12s, box-shadow .12s, filter .12s; }
button:hover { --edge: var(--accent); }
button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent-hi); }
button.primary { --fill: linear-gradient(180deg, var(--accent-hi), var(--accent) 55%, var(--accent-lo)); --edge: rgba(220, 240, 255, .7); color: #04122e; }
button.primary:hover { filter: brightness(1.08); }
button.danger { color: var(--bad); }
button.danger:hover { --edge: var(--bad); }
button.link { clip-path: none; background: none; box-shadow: none; color: var(--accent); padding: 0; min-height: 0; font: inherit; letter-spacing: 0; text-transform: none; }
button:disabled { opacity: .45; cursor: default; filter: none; }
button:disabled:hover { --edge: rgba(150, 172, 214, .5); }

.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card { --c: 16px; width: 100%; max-width: 360px; padding: 28px; display: grid; gap: 14px; }
.login-card label { display: grid; gap: 4px; color: var(--muted); font-size: 12.5px; }
.login-card p { margin: 0; }
.login-card .error:empty { display: none; }
.brand { font: 700 15px/1.2 var(--f-display); letter-spacing: .16em; color: #fff; }
.brand span { font: 500 11px var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-left: 6px; }

.app { display: grid; grid-template-columns: 210px 1fr; min-height: 100vh; }
.app > * { min-width: 0; }   /* wide content scrolls inside its own box instead of widening the page */
.nav { background: var(--nav); box-shadow: inset -1px 0 0 rgba(150, 172, 214, .22); padding: 20px 12px; display: flex; flex-direction: column; gap: 20px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.nav > .brand { padding: 0 10px; }
.nav nav { display: grid; gap: 16px; }
.nav-group { display: grid; gap: 1px; }
.nav-group > span { font: 600 10.5px var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: rgba(147, 164, 204, .6); padding: 0 10px 4px; }
.nav nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; color: var(--muted); font: 500 13.5px/20px var(--f-display); letter-spacing: .04em;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); transition: color .12s, background-color .12s; }
.nav nav a svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav nav a:hover { color: var(--text); background: rgba(76, 180, 255, .08); }
.nav nav a.active { color: #fff; background: linear-gradient(90deg, rgba(76, 180, 255, .32), rgba(76, 180, 255, .07)); }
.nav nav a.active svg { stroke: var(--accent-hi); }
.whoami { margin-top: auto; display: grid; gap: 4px; color: var(--muted); font-size: 12.5px; padding: 0 10px; }
/* full width: at 1080p a 1,200 px cap left a third of the screen empty; running text keeps a readable measure */
main { padding: 26px 32px 48px; width: 100%; }
main > p, .prose { max-width: 1100px; }
main > p.small { max-width: 1250px; }

.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.toolbar .grow { flex: 1; }
.toolbar input.grow { flex: 1 1 280px; max-width: 560px; }
/* cards are flex columns so a row of equal-height cards never stretches its buttons; actions sit at the bottom */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.card { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.card .title { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font: 600 12.5px/1.4 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--title); }
.card .meta { color: var(--muted); font-size: 13px; display: grid; gap: 3px; }
.card .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.card > .actions:last-child { margin-top: auto; padding-top: 2px; }
.big { font: 600 30px/1.15 var(--f-display); color: #fff; }
.fields { display: flex; flex-wrap: wrap; gap: 12px; }
.fields label { display: grid; gap: 4px; color: var(--muted); font-size: 12.5px; }
/* key figures at the top of a page */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 4px; }
.stat { padding: 14px 18px; display: grid; gap: 2px; align-content: start; min-width: 0; }
.stat .label { font: 600 11.5px/1.4 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.stat .value { font: 600 32px/1.15 var(--f-display); color: #fff; font-variant-numeric: tabular-nums; }
.stat .value .small { font-weight: 500; color: var(--muted); }
.stat .sub { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }

/* tags and LED states */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 1px 7px; font: 600 10.5px/16px var(--f-display); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(150, 172, 214, .3); white-space: nowrap; }
.badge.running, .badge.ok, .badge.stopped, .badge.bad, .badge.pending, .badge.warn { background: none; box-shadow: none; padding: 1px 2px; }
.badge.running::before, .badge.ok::before, .badge.stopped::before, .badge.bad::before, .badge.pending::before, .badge.warn::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 7px currentColor; flex: none; }
.badge.running, .badge.ok { color: var(--ok); }
.badge.stopped, .badge.bad { color: var(--bad); }
.badge.pending, .badge.warn { color: var(--warn); }
.badge.Admin { color: #d6b4ff; box-shadow: inset 0 0 0 1px rgba(214, 180, 255, .45); }
.badge.Moderator { color: var(--accent); box-shadow: inset 0 0 0 1px rgba(76, 180, 255, .45); }

.table-wrap { --c: 10px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font: 600 11.5px/1.4 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: rgba(5, 10, 32, .55); white-space: nowrap; }
tr:last-child td { border-bottom: none; }
tr.clickable { cursor: pointer; } tr.clickable:hover td { background: rgba(76, 180, 255, .07); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
td input { width: 100%; min-width: 80px; }
td code { display: inline-block; margin: 1px 0; }
table.top td { vertical-align: top; }
.more { display: flex; justify-content: center; gap: 8px; align-items: center; padding: 10px; border-top: 1px solid var(--line); }

.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.form { display: flex; flex-direction: column; gap: 12px; }
.form label { display: grid; gap: 4px; color: var(--muted); font-size: 12.5px; }
.form .row { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.form .row > * { flex: 1; }
.form .row > button { flex: 0 0 auto; white-space: nowrap; }
.form .check { display: flex; gap: 8px; align-items: center; color: var(--text); font-size: 14px; }
.setting-desc { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.tags { display: inline-flex; gap: 4px; flex-wrap: wrap; vertical-align: 1px; }
.settings td:first-child b { margin-right: 6px; }
.settings td:first-child .key { margin-right: 6px; }
.docs-guide { padding: 8px 26px 18px; }
.docs-guide p, .docs-guide li { max-width: 120ch; }
.docs-layout { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 24px; align-items: start; }
.docs-layout > div { min-width: 0; }
.docs-toc { --c: 10px; position: sticky; top: 16px; display: grid; gap: 1px; font-size: 13px; padding: 12px 8px; max-height: calc(100vh - 32px); overflow: auto; }
.docs-toc .head { font: 600 11px var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); padding: 4px 8px; }
.docs-toc a { color: var(--text); padding: 3px 8px; cursor: pointer; }
.docs-toc a:hover { background: rgba(76, 180, 255, .1); color: #fff; }
.docs-toc a.sub { padding-left: 20px; color: var(--muted); }
.docs-layout h2:first-child { margin-top: 0; }
.docs-guide table { margin: 10px 0; }
.docs-guide pre { background: rgba(5, 10, 32, .7); padding: 10px 12px; overflow-x: auto; box-shadow: inset 0 0 0 1px var(--line); }
.back { margin-bottom: 10px; display: inline-block; font: 500 13px var(--f-display); letter-spacing: .04em; }

.toast { --c: 10px; position: fixed; right: 16px; bottom: 16px; max-width: 420px; padding: 11px 16px 11px 18px; z-index: 10; --edge: var(--accent); }
.toast.bad { --edge: var(--bad); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { --c: 5px; padding: 2px 11px; min-height: var(--ctl-sm); line-height: 20px; font-size: 11.5px; letter-spacing: .07em; }
.chips > .muted { margin-right: 2px; }
.chip.on { --fill: linear-gradient(90deg, rgba(76, 180, 255, .34), rgba(76, 180, 255, .12)); --edge: var(--accent); color: #fff; }
.log { --c: 10px; --fill: rgba(4, 8, 26, .9); font: 18px/1.15 var(--f-term);
  height: calc(100vh - 236px); min-height: 300px; overflow: auto; padding: 8px 0; }
.log .row { display: grid; grid-template-columns: 74px 112px 1fr; gap: 12px; padding: 1px 14px; }
.log .row:hover { background: rgba(76, 180, 255, .07); }
.log .t { color: #7f93bd; }
.log .src { color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log .msg { white-space: pre-wrap; word-break: break-word; }
/* log categories: the line colour in a log window and the dot on its filter chip */
.c-players { --cat: #7ef0a6; } .c-chat { --cat: #f2e36a; } .c-command { --cat: #5ee6d8; }
.c-staff, .c-panel { --cat: #d6b4ff; } .c-anticheat { --cat: var(--warn); } .c-problem { --cat: var(--bad); }
.c-world { --cat: var(--text); } .c-system { --cat: var(--muted); }
.log .row .msg { color: var(--cat, var(--text)); }
.chip .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: 1px;
  background: var(--cat, var(--accent)); opacity: .4; }
.chip.on .dot { opacity: 1; box-shadow: 0 0 6px var(--cat, var(--accent)); }
.chip .n { margin-left: 7px; color: var(--muted); font-variant-numeric: tabular-nums; }
.chip.on .n { color: var(--title); }
.activity { display: grid; gap: 2px; font: 18px/1.15 var(--f-term); }
.activity div { display: grid; grid-template-columns: 76px 1fr; gap: 10px; }
.activity .t { color: #7f93bd; }
/* a player's log archive (profile): newest first, a sticky header per day */
.log.plog { height: calc(100vh - 150px); min-height: 360px; padding-top: 1px; }
.log.plog .row { grid-template-columns: 74px 128px 1fr; }
/* inside the frame: clear of its 1 px edges and the 10 px corner cuts */
.log .day { position: sticky; top: 1px; z-index: 1; margin: 0 10px; padding: 7px 4px 4px; font: 600 11.5px/1.4 var(--f-display); letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); background: rgba(6, 11, 34, .97); box-shadow: inset 0 -1px 0 var(--line); }
.log .empty { padding: 16px 14px; color: var(--muted); font: 14px var(--f-body); }
.plog-more { display: flex; justify-content: center; padding: 10px; }
/* a moment in a log (an anti-cheat event, an outlier, a report): its lines highlighted, and the banner above the archive */
.log .row.mark { background: rgba(242, 179, 61, .13); box-shadow: inset 3px 0 0 var(--warn); }
.around { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 8px 12px; margin-bottom: 10px; font-size: 13px;
  background: rgba(242, 179, 61, .08); box-shadow: inset 3px 0 0 var(--warn); }
.log.mini { height: auto; max-height: 360px; min-height: 0; margin: 4px 0 6px; }
tr.ctx > td { background: rgba(5, 10, 32, .55); }
button.on { --edge: var(--accent); color: #fff; }
.linked-ids code { margin: 0 2px; }

/* charts (Dashboard activity, World health): one accent series, hairline grid, text in text colours (dataviz) */
.charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.charts > .wide { grid-column: 1 / -1; }
@media (max-width: 1100px) { .charts { grid-template-columns: minmax(0, 1fr); } }
.chart { min-height: 170px; }
.chart svg { display: block; max-width: 100%; height: auto; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { fill: var(--muted); font: 11px var(--f-body); }
.chart .cap { fill: var(--text); font: 600 11px var(--f-body); }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { fill: var(--accent); fill-opacity: .1; }
.chart .bar { fill: var(--accent); }
.chart .bar.hover { fill: var(--accent-hi); }
.chart .cross { stroke: var(--muted); stroke-width: 1; }
.chart .dot { fill: var(--accent); stroke: var(--panel); stroke-width: 2; }
.chart .hit { fill: transparent; }
.loading > .charts, #insBody.loading { opacity: .55; transition: opacity .2s; }
.chart-tip { position: fixed; z-index: 20; display: none; pointer-events: none; padding: 7px 10px; font-size: 12.5px; color: var(--muted);
  background: var(--panel2); box-shadow: inset 0 0 0 1px var(--edge), 0 8px 22px rgba(0, 0, 0, .45); }
.chart-tip b { color: #fff; font-weight: 600; }
.chart-table { margin-top: 12px; }
.chart-table > summary { cursor: pointer; color: var(--accent); font-size: 13px; }
.hbars { display: grid; gap: 9px; padding: 4px 0 2px; }
.hbar { display: grid; grid-template-columns: minmax(84px, max-content) 1fr; align-items: center; gap: 12px; font-size: 12.5px; color: var(--muted); }
.hbar .track { display: flex; align-items: center; gap: 7px; min-width: 0; }
.hbar .fill { height: 12px; min-width: 2px; background: var(--accent); border-radius: 0 4px 4px 0; }
.hbar .val { color: var(--text); font-variant-numeric: tabular-nums; }
.inline-bar { display: inline-block; height: 8px; margin-right: 8px; vertical-align: 1px; background: var(--accent); border-radius: 0 3px 3px 0; }

/* a number's name after it in a log line or a list (humanize): system 5 ‹Zeta Eridani› */
.ann { color: #8fa3cf; margin-left: 5px; white-space: nowrap; }
.ann::before { content: "‹"; } .ann::after { content: "›"; }

/* insights pages */
details.problem > summary { cursor: pointer; list-style: none; }
details.problem > summary::-webkit-details-marker { display: none; }
details.problem > summary code { white-space: normal; overflow-wrap: anywhere; }
details.problem[open] > summary code { box-shadow: inset 0 0 0 1px var(--accent); }
code.sample { display: block; margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.problem-kind { margin-top: 10px; }
/* what is decided about a gap: a bug filed (accent) or ignored on purpose (muted) */
.plan { margin-top: 6px; padding: 3px 8px; font-size: 12px; color: var(--muted); box-shadow: inset 2px 0 0 var(--muted); }
.plan.filed { color: var(--title); box-shadow: inset 2px 0 0 var(--accent); }
.outlier-help { margin: -4px 0 12px; padding-left: 18px; }
.world-grid { align-items: start; grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); }
.world-grid h2:first-child { margin-top: 18px; }

.layouts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.card.layout { padding: 10px; gap: 6px; }
.card.layout.off { opacity: .55; }
.card.layout .title, .card.gal-card .title { font-size: 13px; gap: 6px; letter-spacing: .03em; text-transform: none; color: #fff; }
.card.layout .title > span:first-child, .card.gal-card .title > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card.layout .meta { min-height: 2.9em; }
.card.layout > .switch { margin-top: auto; }
/* picture buttons keep their own face */
.thumb, .gal-thumb, .gal-tile { clip-path: none; box-shadow: none; font: inherit; letter-spacing: 0; text-transform: none; min-height: 0; }
.thumb { padding: 0; background: var(--panel2); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: contain; }
.pixel { image-rendering: pixelated; }
.switch { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--text); cursor: pointer; }
.modal { position: fixed; inset: 0; background: rgba(2, 4, 14, .74); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 16px; z-index: 20; }
.modal-card { --c: 16px; padding: 18px 20px; display: grid; gap: 10px; width: min(1180px, 100%); max-height: calc(100vh - 32px); overflow: auto; }
.modal-card .meta { color: var(--muted); font-size: 12.5px; display: grid; gap: 2px; }
.layout-views { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 360px)); gap: 14px; }
.layout-views figure { margin: 0; display: grid; gap: 4px; }
.layout-views img, .layout-views canvas { width: 100%; height: auto; background: var(--panel2); }

/* art gallery */
.bg-space { background: #05070c; }
.bg-checker { background-color: #c7c9cc; background-image: conic-gradient(#9a9da2 25%, transparent 0 50%, #9a9da2 0 75%, transparent 0); background-size: 16px 16px; }
.bg-grey { background: #6e737a; }
.bg-light { background: #eef0f3; }
.gal-variants { margin-bottom: 16px; gap: 0; }
.gal-variants > .title { margin-bottom: 6px; }
.gal-var { display: grid; grid-template-columns: minmax(0, 1fr) 200px 270px; gap: 16px; align-items: center; padding: 7px 0; }
.gal-var + .gal-var { border-top: 1px solid var(--line); }
.gal-var > span:last-child { text-align: right; }
.gal-var-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.gal-var-text.open { display: block; }
.gal-bar { height: 8px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(150, 172, 214, .2); overflow: hidden; }
.gal-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-lo), var(--ok)); }
.gal-cats { margin-bottom: 8px; }
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--gsize), 100%), 1fr)); gap: 12px; margin-bottom: 8px; }
.card.gal-card { padding: 8px; gap: 6px; align-content: start; min-width: 0; }
.card.gal-card .title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gal-thumb { width: 100%; min-width: 0; padding: 8px; display: grid; place-items: center; overflow: hidden; }
.gal-thumb img, .gal-tile-pic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.modal-card.gal-modal { width: min(1280px, 100%); gap: 12px; }
.gal-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; }
.gal-stage { display: flex; overflow: auto; min-height: 180px; max-height: 64vh; padding: 16px; border: 1px solid var(--line); }
.gal-stage.game { max-height: none; padding: 8px; }
.gal-inner { margin: auto; display: grid; justify-items: center; gap: 8px; }
.gal-side { grid-auto-flow: column; gap: 16px; align-items: end; }
.gal-side figure { margin: 0; display: grid; justify-items: center; gap: 4px; }
.gal-side figcaption, .gal-swipe-ctl { color: #9aa4b2; font-size: 12px; text-shadow: 0 1px 2px #000; }
.gal-swipe, .gal-comp { position: relative; }
.gal-swipe img { position: absolute; left: 0; top: 0; }
.gal-swipe-line { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--accent); pointer-events: none; }
.gal-swipe-ctl { display: flex; gap: 8px; align-items: center; width: 100%; }
.gal-swipe-ctl input { flex: 1; min-width: 120px; }
.gal-comp img { position: absolute; }
.gal-info { color: var(--text); line-height: 1.6; word-break: break-word; }
.gal-sec h2 { margin: 12px 0 4px; }
.gal-sec p { margin: 0 0 6px; }
.gal-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.gal-tile { padding: 4px; display: grid; justify-items: center; gap: 4px; width: 92px; font-size: 11px; color: var(--muted);
  background: var(--panel2); box-shadow: inset 0 0 0 1px var(--line); }
.gal-tile > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gal-tile.on { box-shadow: inset 0 0 0 1px var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 14%, var(--panel2)); }
.gal-tile-pic { width: 80px; height: 80px; display: grid; place-items: center; overflow: hidden; }
.gal-client { margin: 0 0 6px; color: var(--text); }
.gal-inner.gal-game { width: 100%; justify-items: stretch; gap: 12px; }
.gal-game-row { --c: 10px; color: var(--text); padding: 10px 12px; min-width: 0; }
.gal-game-row h3 { margin: 0 0 4px; font: 600 14px var(--f-display); letter-spacing: .04em; display: flex; gap: 8px; align-items: center; }
.gal-game-row p { margin: 0 0 6px; }
.gal-game-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 12px; }
.gal-game-pair figure { margin: 0; display: grid; gap: 4px; min-width: 0; }
.gal-game-pair figcaption { color: var(--muted); font-size: 12px; }
.gal-globes { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: center; padding: 12px; }
.gal-surf canvas { width: 100%; height: auto; display: block; }
.gal-surf.one figure { overflow: auto; max-height: 60vh; }
.gal-surf.one canvas { width: auto; max-width: none; }
.gal-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px var(--ok); vertical-align: middle; }

/* news page (news.js): the editor beside the game's News window */
main.wide { max-width: none; }
.news-layout { display: grid; grid-template-columns: minmax(420px, 1fr) auto; gap: 16px; align-items: start; }
.news-view { min-width: 0; }
.news-view > p { max-width: 866px; }
.news-edit textarea { width: 100%; min-height: 300px; height: calc(100vh - 440px); resize: vertical; font: 13px/1.45 var(--f-mono);
  tab-size: 5; white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.news-palette > summary { cursor: pointer; color: var(--muted); font-size: 12.5px; padding: 2px 0; user-select: none; }
.news-palette[open] > summary { margin-bottom: 8px; }
.news-palette > .news-row + .news-row { margin-top: 8px; }
/* client page: published updates */
.file-list { display: grid; gap: 2px; max-height: 320px; overflow: auto; margin-top: 6px; font-size: 12.5px; }
details.files > summary { cursor: pointer; color: var(--accent); }
details.files > summary::marker { color: var(--muted); }
.news-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.news-row input { flex: 1; min-width: 180px; }
.news-swatch { display: inline-block; width: 12px; height: 12px; border: 1px solid rgba(255, 255, 255, .3); vertical-align: -1px; }
.news-remarks { margin: 0; padding-left: 18px; font-size: 12.5px; display: grid; gap: 3px; }
.news-remarks:empty { display: none; }
.news-remarks .warn { color: var(--warn); }
.news-remarks .note { color: var(--muted); }
.news-stage { --c: 14px; --fill: #000; overflow: auto; padding: 12px; }
.news-stage canvas { display: block; margin: 0 auto; image-rendering: pixelated; }
@media (max-width: 1400px) { .news-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1100px) { .docs-layout { grid-template-columns: minmax(0, 1fr); } .docs-toc { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

@media (max-width: 760px) {
  .gal-var { grid-template-columns: 1fr; gap: 4px; }
  .gal-side { grid-auto-flow: row; }
  .app { grid-template-columns: 1fr; }
  .nav { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 16px; }
  .nav nav { display: flex; flex-wrap: wrap; gap: 2px; }
  .nav-group { display: contents; }
  .nav-group > span { display: none; }
  .whoami { margin: 0 0 0 auto; }
  main { padding: 16px; }
  .gal-var > span:last-child { text-align: left; }
}

/* ---- anti-cheat events in plain words (acExplain): the title and summary on the row, the technical part on a click ---- */
.ac-cell { min-width: 320px; }
.ac-x > summary { cursor: pointer; list-style: none; line-height: 1.45; }
.ac-x > summary::-webkit-details-marker { display: none; }
.ac-title { font: 600 11px/16px var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-hi); margin-right: 4px; }
.ac-title.warn { color: var(--warn); }
.ac-title.bad { color: var(--bad); }
.ac-meaning { display: block; margin-top: 3px; color: var(--muted); font-size: 12.5px; }
.ac-more { display: inline-block; margin-top: 3px; color: var(--accent); font-size: 12px; }
.ac-more::before { content: "\25B8  "; }
.ac-x[open] .ac-more::before { content: "\25BE  "; }
.ac-x > summary:hover .ac-more, .ac-x > summary:focus-visible .ac-more { color: var(--accent-hi); text-decoration: underline; }
.ac-tech { margin: 8px 0 2px; padding: 8px 10px; background: var(--panel2); box-shadow: inset 3px 0 0 var(--line); font-size: 12.5px; }
.ac-tech dt { color: var(--title); font-weight: 600; margin-top: 6px; }
.ac-tech dt:first-child { margin-top: 0; }
.ac-tech dd { margin: 2px 0 0; color: var(--text); overflow-wrap: anywhere; }
.ac-tech code { white-space: normal; overflow-wrap: anywhere; }