/*
Canadian Game Forces - website
Copyright (c) 2026 CGF (Canadian Game Forces). All rights reserved.
Proprietary work. No part of this file, its scripts, code or configuration may be used, copied, modified,
merged, published or distributed, in whole or in part, without prior written permission.
*/
/* Canadian Game Forces: ivory text on black, and a colour per section (the owner, 2026-10-01: "there's a lot of yellow
   and gold"). Gold stays for the shield, the Donate button and the "Join our Discord" button, the same on every page. */
:root {
  --bg: #0b0b0b; --panel: #141310; --line: #2a2618; --muted: #9a9482; --up: #7fbf6a; --down: #d0644c;
  --near: #f0a63a;                /* the countdown to a restart in its last 15 minutes: amber */
  --cool: #9db4c8;                /* Home's small things (step numbers, dates, dots): steel blue-grey */
  --panel-cool: #12161a;          /* Home's panels: a blue-black, so the warm copper sits on a cool surface */
  --line-cool: #2f3d49;           /* ... their hairlines */
  --soft-cool: #d3dbe2;           /* ... their long text */
  /* THE COLOURS: ONE LINE PER SECTION. Change a value here and rebuild; nothing else names a colour.
     A section may have a second line, --<name>-t: a lighter form for its links and small text (only the red needs one).
     The build refuses a colour that is too dark to read on the page's dark panel. */
  --text: #f2ede4;                /* body text, on every page: ivory */
  --text-soft: #d8d2c8;           /* long text: the FAQ's answers, the rules, the policies */
  --gold: #d4af37;                /* the shield's gold: the Donate button */
  --gold-hi: #e8c55a;
  --discord: #5865f2;             /* DISCORD'S OWN colour ("Blurple", from discord.com/branding): the two Discord buttons. Not ours to change. */
  --discord-hi: #4752c4;          /* ... under the pointer */
  --home: #d98a4e;                /* Home: copper */
  --play: #3fc1b8;                /* Play: its Servers page: air force teal */
  --join: #f28b72;                /* ... its How to join page: signal flare coral (the olive is DayZ's colour now) */
  --steam: #d8c08a;               /* ... its Link Steam page: desert tan */
  --news: #7cc4f0;                /* News (Our news; the News menu's own name): ice blue */
  --info: #c3ccd6;                /* Info (Rules, FAQ, About): steel silver */
  --appeals: #e5484d;             /* Appeals: Canadian red */
  --appeals-t: #f08a8d;           /* ... its lighter form for links and small text */
  --contact: #f2ede4;             /* Contact: ivory */
  --contact-titles: #e6cc96;      /* ... the titles of its blocks: warm sand */
  --support: #f2ede4;             /* the Support menu's own name: ivory */
  --donate: #d4af37;              /* the Donate page: gold */
  --legal: #f2ede4;               /* Privacy and Terms: ivory */
  --forum: #b39ddb;               /* the Forum entry: violet */
  --dayz: #93a62e;                /* DAYZ, wherever a page is DayZ's own (DayZ updates, how our DayZ servers play, its heading on Servers): deep olive */
  --rust: #e0763a;                /* RUST, the same way (Rust updates, how our Rust servers play, its heading on Servers): rust orange */
  --rules-discord: #8ea1ff;       /* the Rules page, the Discord rules' block: light blue-violet */
  --rules-dayz: #93a62e;          /* ... the DayZ server rules' block: deep olive */
  --rules-rust: #e0763a;          /* ... the Rust server rules' block: rust orange */
  --rules-hot: #f08a8d;           /* ... the words that carry a consequence ("Permanent ban."): light red */
  --rules-soft: #aab3bd;          /* ... its long text: a softer silver */
  --accent: var(--gold); --accent-text: var(--gold);      /* (a page without a section: as before) */
}
/* A page is in a section (the class on <body>); a card, a button or a menu entry that LEADS to another section carries
   that section's colour (to-<name>). Everything below takes --accent (titles, lines, outlines) and --accent-text (links). */
.sec-home, .to-home { --accent: var(--home); --accent-text: var(--home-t, var(--home)); }
.sec-play, .to-play { --accent: var(--play); --accent-text: var(--play-t, var(--play)); }
.sec-join, .to-join { --accent: var(--join); --accent-text: var(--join-t, var(--join)); }
.sec-steam, .to-steam { --accent: var(--steam); --accent-text: var(--steam-t, var(--steam)); }
.sec-news, .to-news { --accent: var(--news); --accent-text: var(--news-t, var(--news)); }
.sec-info, .to-info { --accent: var(--info); --accent-text: var(--info-t, var(--info)); }
.sec-appeals, .to-appeals { --accent: var(--appeals); --accent-text: var(--appeals-t, var(--appeals)); }
.sec-contact, .to-contact { --accent: var(--contact); --accent-text: var(--contact-t, var(--contact)); }
.sec-support, .to-support { --accent: var(--support); --accent-text: var(--support-t, var(--support)); }
.sec-donate, .to-donate { --accent: var(--donate); --accent-text: var(--donate-t, var(--donate)); }
.sec-legal, .to-legal { --accent: var(--legal); --accent-text: var(--legal-t, var(--legal)); }
.sec-forum, .to-forum { --accent: var(--forum); --accent-text: var(--forum-t, var(--forum)); }
.sec-dayz, .to-dayz { --accent: var(--dayz); --accent-text: var(--dayz-t, var(--dayz)); }
.sec-rust, .to-rust { --accent: var(--rust); --accent-text: var(--rust-t, var(--rust)); }
body { --page: var(--accent); --page-text: var(--accent-text); }      /* the page's own colour, kept for the menu */
/* A PAGE SHOWS ONLY ITS OWN SECTION'S COLOUR (the owner: "main page would be all copper ... the server page, then it's
   green"), the menu too. Without this one line each menu entry shows its own section's colour under the pointer. */
.menu li { --accent: var(--page); --accent-text: var(--page-text); }
/* The one exception: the Donate entry in the Support list is gold on every page, like its button and its page. */
.menu li.to-donate { --accent: var(--donate); --accent-text: var(--donate); }
.menu .to-donate a { color: var(--donate); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text);
       font-family: system-ui, "Segoe UI", sans-serif; line-height: 1.55; overflow-wrap: break-word; }
/* The picture that stays still behind the page (each page names its own; the dark layer over it is part of that line). */
body::before { content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
               background-color: var(--bg); background-size: cover; background-position: center; background-repeat: no-repeat; }
a { color: var(--accent-text); }
@supports (color: color-mix(in srgb, red, white)) {        /* a link under the pointer gets lighter (it stays underlined) */
  a:hover, a:focus-visible { color: color-mix(in srgb, var(--accent-text) 65%, #fff); }
}
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
img { max-width: 100%; height: auto; }

/* ---- the top: the name, the menu, the two buttons */
.notice { margin: 0; padding: .45rem 1rem; text-align: center; background: var(--gold); color: var(--bg); font-weight: 600; }
/* (job 103) the power outage banner, filled by site.js from live/status.json; hidden until there is one */
.notice.power.soon { background: #b45309; color: #fff; }
.notice.power.down { background: var(--down); color: #fff; }
.notice.power.back { background: var(--up); color: var(--bg); }
/* The bar (the owner, 2026-10-01): LEFT, against the window's left edge: Donate, the shield, the name. CENTRE: the
   menu, always on the window's true middle (three columns, the outer two of equal share). RIGHT, against the window's
   right edge: Discord. Under 80 rem the menu folds into the Menu button, so it never leaves the middle. */
header { position: relative; z-index: 5; border-bottom: 1px solid var(--line); background: rgba(11, 11, 11, .9); }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; padding: .6rem 1.25rem; }
.bar-left { display: flex; align-items: center; gap: .9rem; }
.bar nav { margin: 0 auto; }
@media (min-width: 80rem) {
  .bar { display: grid; grid-template-columns: 1fr auto 1fr; }
  .bar .actions { justify-self: end; }
}
@media (min-width: 80rem) and (max-width: 91.99rem) {      /* a laptop's width: everything a little tighter, so it fits */
  .bar { gap: .5rem .75rem; padding: .6rem .8rem; }
  .bar-left { gap: .6rem; }
  .brand { letter-spacing: .04em; gap: .45rem; }
  .menu { gap: .1rem 0; }
  .menu a, .menu .soon, .group-button { padding: .5rem .5rem; }
}
.brand { display: flex; align-items: center; gap: .6rem; color: var(--text); font-weight: 700; letter-spacing: .08em;
         text-decoration: none; white-space: nowrap; }       /* the name never breaks into two lines */
.menu, .sub { list-style: none; margin: 0; padding: 0; }
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .35rem; }
.menu > li { position: relative; margin: 0; }
.sub li { margin: 0; }
.menu a, .menu .soon, .group-button { display: block; padding: .5rem .7rem; color: var(--text); text-decoration: none;
         font: inherit; line-height: 1.3; background: none; border: 0; border-radius: 6px; cursor: pointer; }
.menu .soon { color: var(--muted); cursor: default; }
/* Each menu entry shows ITS section's colour under the pointer; the entry of the page you are on shows the page's. */
.menu a:hover, .menu a:focus-visible, .group-button:hover, .group.open > .group-button { color: var(--accent-text); }
.menu > li > a:hover, .group-button:hover, .group.open > .group-button { box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.menu > li > a.here, .group-button.here { color: var(--page-text); box-shadow: inset 0 -2px 0 var(--page); border-radius: 0; }
.sub a.here { color: var(--accent-text); }
.group-button::after, .group-label::after { content: ""; display: inline-block; margin-left: .4rem; vertical-align: .15em;
         border: .3em solid transparent; border-top-color: currentColor; border-bottom-width: 0; }
.group.open > .group-button::after { transform: rotate(180deg); }
.sub { display: none; position: absolute; top: 100%; left: 0; min-width: 11rem; padding: .35rem; background: var(--panel);
       border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 .6rem 1.4rem rgba(0, 0, 0, .6); }
.sub a { white-space: nowrap; }
.sub a:hover, .sub a.here { background: #000; box-shadow: inset 2px 0 0 var(--accent); }
.group.open > .sub { display: block; }
/* Without the script: a list opens under its name when the pointer or the keyboard is on it. */
html:not(.js) .group:hover > .sub, html:not(.js) .group:focus-within > .sub { display: block; }
.actions { display: flex; align-items: center; gap: .5rem; }
.bar-left .donate-button { margin: 0; padding: .4rem 1rem; }
.menu-button { display: none; padding: .45rem .9rem; font: inherit; font-weight: 700; color: var(--text); background: none;
               border: 2px solid var(--line); border-radius: 6px; cursor: pointer; }
.menu-button::before { content: "\2630\00a0"; }
.menu-button[aria-expanded="true"] { border-color: var(--page); color: var(--page-text); }

/* A filled button is gold and only for Donate. The two Discord buttons are filled in Discord's own colour, white text,
   Discord's mark to the left of the words. Every other button is an outline in its section's colour, filled under the
   pointer. */
.button { display: inline-block; margin: .35rem .35rem .35rem 0; padding: .7rem 1.4rem; border-radius: 6px; border: 2px solid var(--gold);
          background: var(--gold); color: var(--bg); font-weight: 700; text-decoration: none; cursor: pointer; }
.button:hover, .button:focus-visible { background: var(--gold-hi); border-color: var(--gold-hi); color: var(--bg); }
.button.discord { display: inline-flex; align-items: center; gap: .65em; background: var(--discord); border-color: var(--discord); color: #fff; }
.button.discord:hover, .button.discord:focus-visible { background: var(--discord-hi); border-color: var(--discord-hi); color: #fff; }
.button.discord svg { flex: none; width: 1.47em; height: 1.1em; }      /* Discord's mark, as they draw it: only its size is set */
.hero .button.discord { vertical-align: middle; }
.button.ghost { background: transparent; border-color: var(--accent); color: var(--accent-text); }
.button.ghost:hover, .button.ghost:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.actions .button { margin: 0; padding: .4rem 1rem; }

/* A small screen: one Menu button; the whole list opens DOWNWARD, and each group opens downward under its name. */
@media (max-width: 79.99rem) {
  .bar { padding: .6rem .9rem; }
  .bar-left { flex-basis: 100%; gap: .7rem; }
  .brand { font-size: .92rem; letter-spacing: .05em; gap: .45rem; }
  .brand img { width: 34px; height: 34px; }
  .brand img.logo-clear { width: 40px; height: 40px; margin: -3px 0; }
  html.js .menu-button { display: inline-block; order: 2; }
  .actions { order: 3; margin-left: auto; }
  .bar nav { order: 4; flex-basis: 100%; margin: 0; }
  html.js nav { display: none; }
  html.js header.menu-open nav { display: block; }
  .menu { display: block; border-top: 1px solid var(--line); margin-top: .25rem; padding-top: .25rem; }
  .menu a, .menu .soon, .group-button { width: 100%; text-align: left; padding: .7rem .5rem; }
  .menu > li > a.here, .group-button.here { box-shadow: inset 3px 0 0 var(--page); }
  .menu > li > a:hover, .group-button:hover, .group.open > .group-button { box-shadow: inset 3px 0 0 var(--accent); }
  .sub a:hover, .sub a.here { background: none; border-radius: 0; }
  .sub { position: static; min-width: 0; padding: 0 0 .25rem 1rem; background: none; border: 0; box-shadow: none; }
  html:not(.js) .sub { display: block; }
  .group-button::after { float: right; margin-top: .55em; }
}

main { flex: 1; width: 100%; max-width: 62rem; margin: 0 auto; padding: 1.5rem 1.25rem 2.5rem; }
h1, h2, h3 { color: var(--accent); line-height: 1.2; }
h1 { letter-spacing: .06em; font-size: clamp(1.6rem, 5vw, 2.3rem); margin: .5rem 0 1rem; }
h2 { font-size: 1.35rem; margin: 2rem 0 .75rem; }
h3 { font-size: 1.05rem; margin: 1.25rem 0 .4rem; }
section { margin-bottom: 1.5rem; }
li { margin: .25rem 0; }
/* Text that sits straight on the background picture (a title, an intro line, the footer) gets a soft dark edge, so it
   stays readable where the picture is bright (a lamp, a sunset). On a card's dark panel the edge is invisible; a gold
   button has dark text and takes none. */
main, footer { text-shadow: 0 1px 2px #000, 0 0 10px rgba(0, 0, 0, .85); }
main .button { text-shadow: none; }

.hero { text-align: center; padding: 1.5rem 0 1rem; }
.hero h1 { font-size: clamp(1.8rem, 7vw, 3rem); letter-spacing: .08em; margin-bottom: .25rem; }
.tagline { font-size: 1.2rem; margin: .25rem 0; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.card > h2:first-child, .card > h3:first-child { margin-top: .25rem; }

/* ---- the servers: one server per line */
/* Every fact of a row sits on ONE line (the owner: "I don't want any double stacked lines"): the columns are as wide
   as their longest fact ("Size 4500 · Seed 2147483647", "Fri 12:30 am (in 23 h 59 min)", "Thu, Nov 5" + Forced), the
   name takes the rest, and the Servers page's column is a little wider than the other pages'. */
.p-servers main { max-width: 72rem; }
/* THE TWO TABLES SHARE THEIR LINES (the owner, 2026-10-01: "the rust section status should be at the same position as
   the dayz one, next wipe can be after the map and next restart at the end"). Both end with the same three columns of
   the same widths, so, counted from the right edge: Next restart is on one line in both, Status on one line in both,
   and DayZ's Character on the line of Rust's Next wipe. Each width is what its longest fact needs, measured: "Thu, Nov
   26" with the Forced tag 9.6 rem, the "Coming soon" tag 6.2, "Wed 12:30 am in 23 h 59 min" 12.9, "Size 4500 · Seed
   2147483647" 12.8, "Hazard's Island | Biweekly" 12.8; the last column has 3 rem more, for the large time left. A Rust
   row is 63 rem at its narrowest: what the page gives it down to the width where rows stack. */
.servers { --columns: minmax(15rem, 1fr) 10rem 6.5rem 16.5rem; }
.servers.rust { --columns: minmax(13rem, 1fr) 13rem 10rem 6.5rem 16.5rem; }
.server h3, .server .cell, .server .about { white-space: nowrap; }
/* The last guard: a name or a fact that is too long for its column ends in "..." and never runs over its neighbour. */
.server h3, .server .cell, .server .about { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cell .badge.wait[data-live="forced"] { margin-left: .35rem; font-weight: 600; }
.server-head, .server { display: grid; grid-template-columns: var(--columns); column-gap: 1rem; align-items: center; }
/* The column heads (the owner: they "fade in the background"): their own dark strip across the table, bright ivory,
   bolder and a step larger, with a thin line in the page's colour under it. */
.server-head { margin-bottom: .6rem; padding: .55rem 1.25rem; font-size: .9rem; font-weight: 700; color: var(--text);
               text-transform: uppercase; letter-spacing: .06em; text-shadow: none; background: rgba(0, 0, 0, .8);
               border: 1px solid var(--line); border-bottom: 2px solid var(--accent); border-radius: 8px 8px 0 0; }
.server { margin-bottom: .6rem; padding: .7rem 1.25rem; }
.server h3 { margin: 0; font-size: 1.05rem; }
.server .about { grid-column: 1 / -1; margin: .35rem 0 0; }
.server .hold { grid-column: 1 / -1; margin: .3rem 0 0; color: var(--text-soft); white-space: normal; }   /* a held map's reason: always shown */
.badge { display: inline-block; font-size: .8rem; font-weight: 700; padding: .1rem .55rem; border-radius: 999px;
         border: 1px solid currentColor; white-space: nowrap; }
.badge.up { color: var(--up); }
.badge.down { color: var(--down); }
.badge.wait { color: var(--muted); }
code { background: #000; border: 1px solid var(--line); border-radius: 4px; padding: .05rem .35rem; }
@media (max-width: 69.99rem) {         /* too narrow for one line per fact: a row stacks, each fact with its name in front */
  .server h3, .server .cell, .server .about { white-space: normal; overflow: visible; }
  .server-head { display: none; }
  .server { display: block; padding: .9rem 1.1rem; }
  .server h3 { margin-bottom: .4rem; }
  .cell { display: grid; grid-template-columns: 7rem 1fr; gap: .5rem; margin: .2rem 0; }
  .cell::before { content: attr(data-label); color: var(--text); font-weight: 600; }      /* (the same bright ivory as the heads) */
  .cell.empty { display: none; }
}

.month .numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .75rem; text-align: center; }
.month .numbers strong { display: block; font-size: 1.8rem; color: var(--accent); line-height: 1.2; }
.month .numbers span { color: var(--muted); font-size: .9rem; }

.steps { padding-left: 1.3rem; }
.steps li { margin: .4rem 0; }
.steps.big li { margin: .8rem 0; }
.rule { margin: .45rem 0; }
/* The Rules page (the owner: "it's all pale and I have trouble differentiating the Discord rules apart from the DayZ
   server rules and the Rust server rules"): the text is silver, and each of the three sets of rules has its own colour
   (its heading on a tinted strip, a bar down its left side, its rule numbers). The words that carry a consequence are red. */
.p-rules main { --text: var(--info); --text-soft: var(--rules-soft); color: var(--text); }
.set-discord { --accent: var(--rules-discord); --accent-text: var(--rules-discord); }
.set-dayz { --accent: var(--rules-dayz); --accent-text: var(--rules-dayz); }
.set-rust { --accent: var(--rules-rust); --accent-text: var(--rules-rust); }
.jump { padding: .6rem 1.25rem; }
.jump a { font-weight: 700; }
.rules { border-left: 5px solid var(--accent); scroll-margin-top: 1rem; }
.card.rules > h2:first-child { margin: -1rem -1.25rem .9rem; padding: .75rem 1.25rem; border-bottom: 1px solid var(--accent);
                               border-radius: 0 7px 0 0; font-size: 1.5rem; letter-spacing: .04em; }
@supports (color: color-mix(in srgb, red, white)) {
  .card.rules > h2:first-child { background: color-mix(in srgb, var(--accent) 16%, transparent); }
}
.rule .num { color: var(--accent); }
.hot { color: var(--rules-hot); font-weight: 700; }
/* The game update pages (the owner: "I don't like the blue squares, it's too much"; his pick): no coloured box. An
   update is a plain dark panel with a blue bar down its left side (square corners there); its TITLE in the blue; its
   date and its text in the soft ivory, clearly quieter than the title; its buttons quiet outlines in that ivory. */
[data-updates] .latest, [data-updates] .ours { border-left: 4px solid var(--accent); border-radius: 0 8px 8px 0; }
[data-updates] .ours { border-color: var(--line); border-left-color: var(--accent); }
[data-updates] .updates li { margin: 0 0 .7rem; padding: .6rem .9rem .7rem; border: 0; border-left: 4px solid var(--accent);
                             border-radius: 0 6px 6px 0; background: rgba(0, 0, 0, .28); }
[data-updates] .updates li:last-child { margin-bottom: .5rem; }
[data-updates] .updates strong { display: block; color: var(--accent); font-size: 1.05rem; margin: .1rem 0; }
[data-updates] .latest .small, [data-updates] .updates .small, [data-updates] .latest p, [data-updates] .updates p,
[data-updates] .ours p { color: var(--text-soft); }
[data-updates] .button.ghost, [data-updates] .updates li a { border: 1px solid rgba(216, 210, 200, .5); color: var(--text-soft);
                             font-weight: 600; text-decoration: none; }
[data-updates] .updates li a { display: inline-block; margin-top: .35rem; padding: .2rem .7rem; border-radius: 6px; }
[data-updates] .button.ghost:hover, [data-updates] .button.ghost:focus-visible, [data-updates] .updates li a:hover,
[data-updates] .updates li a:focus-visible { background: var(--text-soft); border-color: var(--text-soft); color: var(--bg); }
/* A bold lead-in at the START of a list item or a paragraph ("Join our Discord.", "Rust:") takes the page's colour, so
   each line's beginning stands out; bold words inside a sentence stay bright ivory. The step numbers and the dots of
   every list take the page's colour too (the owner, on Appeals: "every dot from every point could be red"). */
strong.lead { color: var(--accent-text); }
main li::marker { color: var(--accent); }
/* Contact (the owner's pick): the titles of its blocks in warm sand and a step larger, the text under them in the soft
   ivory, so a title is easy to tell from its text. */
.p-contact .strip { color: var(--contact-titles); }
.p-contact main .card p, .p-contact main .card li { color: var(--text-soft); }
.p-contact main .card strong { color: var(--text); }
.small { font-size: .85rem; color: var(--muted); }
.draft { border: 1px dashed var(--accent); border-radius: 6px; padding: .5rem .75rem; color: var(--accent-text); font-size: .9rem; }

.updates { list-style: none; margin: 0; padding: 0; }
.updates li { margin: 0 0 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.updates li:last-child { border-bottom: 0; margin-bottom: .25rem; }
.updates p { margin: .3rem 0; }

.faq-search label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .25rem; }
.faq-search input { width: 100%; max-width: 28rem; padding: .6rem .8rem; font: inherit; color: var(--text); background: #000;
                    border: 2px solid var(--line); border-radius: 6px; }
.faq-search input:focus { border-color: var(--accent); outline: none; }
.faq-search input { vertical-align: middle; }
.faq-all { margin-left: .6rem; padding: .45rem .8rem; font: inherit; font-size: .85rem; font-weight: 600; color: var(--accent-text);
           background: none; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; vertical-align: middle; }
.faq-all:hover { border-color: var(--accent); }
/* The FAQ (the owner: every question looked like its answer; he left the design to us). Each group's name sits on a
   dark strip like the Servers table's heads. Each question is a row: the question in the page's colour, bold, a step
   larger, a small arrow at its left; the answer under it in the soft ivory, a little indented; a hairline between
   rows. A row folds (the browser's own details / summary: it works with the keyboard and without the script). */
.card.faq > h2:first-child, .card.feature > h2:first-child, .card.about > h2:first-child, .card.part > h2:first-child { margin: -1rem -1.25rem .2rem; padding: .7rem 1.25rem; font-size: 1.25rem; color: var(--text);
                             background: rgba(0, 0, 0, .6); border-bottom: 2px solid var(--accent); border-radius: 7px 7px 0 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary { display: flex; align-items: baseline; gap: .7rem; padding: .75rem 0; cursor: pointer; list-style: none;
               color: var(--accent); font-weight: 700; font-size: 1.08rem; line-height: 1.35; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: ""; flex: none; width: .45em; height: .45em; margin-left: .15em; border-right: 2px solid var(--accent);
                       border-bottom: 2px solid var(--accent); transform: translateY(-.1em) rotate(-45deg); }
.faq details[open] > summary::before { transform: translateY(-.25em) rotate(45deg); }
.faq summary:hover { color: var(--text); }
.faq .answer { padding: 0 0 .9rem 1.35rem; }
.faq .answer p { margin: 0 0 .4rem; }
/* Until the script has folded the questions, their answers are held shut, so the page does not jump when it does.
   If the script never comes, they show by themselves after three seconds. */
html.js .faq details:not([data-set]) > .answer { max-height: 0; overflow: hidden; padding-bottom: 0;
                                                animation: faq-late 0s linear 3s forwards; }
html.js section.faq:first-of-type details:first-of-type:not([data-set]) > .answer { max-height: none; overflow: visible;
                                                padding-bottom: .9rem; animation: none; }      /* (the first one stays open) */
@keyframes faq-late { to { max-height: none; overflow: visible; padding-bottom: .9rem; } }
.faq p, .rule, .legal p, .legal li { color: var(--text-soft); }          /* long text: the softer ivory */
.rule strong, .legal strong, .faq .answer strong { color: var(--text); }
.faq .answer strong.lead { color: var(--accent-text); }

/* Privacy and Terms: everything open, in full. A comfortable line; each numbered section on its own panel with the
   quiet head strip; a contents list at the top; "Back to top" under the long sections. Plain ivory, no other colour. */
.legal { max-width: 46rem; margin-left: auto; margin-right: auto; }
.legal .part { margin-bottom: 1.25rem; scroll-margin-top: 1rem; }
.legal .part > h2:first-child { font-size: 1.15rem; }
.legal ul { padding-left: 1.3rem; }
.contents h2 { margin: .25rem 0 .5rem; font-size: 1.15rem; }
.contents ol { columns: 2; column-gap: 2.5rem; margin: 0; padding-left: 1.6rem; }
.contents li { break-inside: avoid; }
.back { margin: .9rem 0 0; text-align: right; }
.print-only { display: none; }
@media (max-width: 40rem) { .contents ol { columns: 1; } }
/* ON PAPER (every page): one clean column, black on white, no picture, no bar; a policy ends with its address and its date. */
@media print {
  body::before, header, .foot-links, .back, .faq-search { display: none !important; }
  .banner { display: none; }
  body { background: #fff; color: #000; }
  main, footer { max-width: none; color: #000; text-shadow: none; }
  .card { padding: 0; background: none; border: 0; }
  .card.part > h2:first-child, .card.faq > h2:first-child, .card.feature > h2:first-child, .card.about > h2:first-child {
    margin: 1.2rem 0 .5rem; padding: 0 0 .2rem; background: none; border-bottom: 1px solid #000; border-radius: 0; }
  main *, footer * { color: #000 !important; }
  .short { background: none; border: 1px solid #000; border-radius: 0; }
  .contents ol { columns: 1; }
  .print-only { display: block; margin-top: 1.5rem; font-size: .8rem; }
}
.short { border-left: 3px solid var(--accent); background: #000; border-radius: 0 6px 6px 0; padding: .5rem 1rem; margin: 1rem 0; }
.short p { margin: .35rem 0; }

footer { max-width: 44rem; margin: 0 auto; padding: 1.5rem 1rem 1.25rem; font-size: .75rem; line-height: 1.5; color: var(--muted);
         text-align: center; }
footer p { margin: .4rem 0; }
.foot-links { font-size: .85rem; }

.latest h2 { font-size: clamp(1.4rem, 4vw, 2rem); margin: .2rem 0 .8rem; }
.media { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: .5rem 0; }
.media > div:has(img), .media > div:has(iframe) { flex-basis: 100%; }
.latest img { display: block; width: 100%; max-height: 24rem; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.latest [data-l="lead"] { font-size: 1.05rem; }
.video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 6px; }
.ours { border-color: var(--accent); }
.video a { display: inline-block; margin-top: .4rem; }
/* The shield on a black square (until the see-through copy exists): on our dark pages the black gives way to the page. */
.logo-blend { mix-blend-mode: lighten; }
/* The see-through shield leaves room round itself for its glow: it is shown a little larger and the bar keeps its height. */
.brand img.logo-clear { margin: -4px 0; }
.cell > .badge { justify-self: start; }
@media (max-width: 23.5rem) {            /* a very narrow phone: the name gets smaller, it never wraps */
  .bar-left .donate-button { padding: .35rem .7rem; }
  .brand { font-size: .8rem; letter-spacing: .03em; }
}
@media (max-width: 21.5rem) { .bar-left { flex-wrap: wrap; } }
@media (min-width: 80rem) and (max-width: 91.99rem) {      /* (repeated last, so it wins over the menu's base rule) */
  .menu { gap: .1rem 0; }
  .menu a, .menu .soon, .group-button { padding: .5rem .5rem; }
}
/* The Servers page (the owner: "name of map same color as the rest and restart times as well, the fine print leave it
   as is"): in a server's row the map, the next restart and the next wipe take the page's colour like the server's name.
   The status badge keeps its own colour; the small description line stays as it is. */
.server .cell[data-label="Map"], .server .cell[data-label="Character"], .server .cell[data-label="Next restart"],
.server .cell[data-label="Next wipe"] { color: var(--accent); }
.under { margin: -.1rem 0 1rem; }      /* the quiet lines under the tables */
.under + .under { margin-top: -.75rem; } /* a second line sits right under the first */
/* The "what's different" pages: a card per subject with the same head strip; each line's lead-in in the page's colour. */
.card.feature > h2:first-child, .card.about > h2:first-child, .card.part > h2:first-child { margin-bottom: .8rem; }
.feature ul { margin: 0; padding-left: 1.2rem; }
.feature li { margin: .45rem 0; color: var(--text-soft); }
/* Servers: each game's heading is ONE large button at the left, in the game's own colour (DayZ olive, Rust orange: the
   one place a page shows another section's colour, with the Discord and Donate buttons). The game's name is its largest
   word, so it still reads as the section's title; it leads to "how our ... servers play". A dark fill, so the outline
   reads on the picture; it never grows wider than the table under it. While those two pages are not published the
   heading is the game's name alone, in the same colour and size. */
.game-title { margin: 2.75rem 0 .9rem; font-size: 1.85rem; letter-spacing: .05em; color: var(--accent); }
.game-title .button { display: inline-block; max-width: 100%; margin: 0; padding: .35rem 1.2rem .45rem; font-size: 1.05rem;
                      letter-spacing: 0; background: rgba(0, 0, 0, .78); text-shadow: none; }
.game-title .button b { font-size: 1.85rem; letter-spacing: .05em; line-height: 1.25; vertical-align: -.08em; }
.more-link { font-weight: 700; white-space: nowrap; }
/* About (the owner: "optimize this one"): the opening line on its own, larger; then a card per part, two side by side on
   a wide window; "What we stand for" and "Our servers" as small tiles. */
.opening { max-width: 48rem; margin: 0 0 1.25rem; font-size: 1.25rem; line-height: 1.5; }
.about-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.about-grid .card { margin: 0; }
.about-grid .wide { grid-column: 1 / -1; }
.about .text, .tile > div { color: var(--text-soft); }
.about .text a { font-weight: 600; }
.about p { margin: .8rem 0 0; }
.tiles { display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile { padding: .8rem 1rem; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); border-radius: 6px; }
.tile h3 { margin: 0 0 .35rem; font-size: 1.15rem; }
.tile .small { margin: .6rem 0 0; }
@media (max-width: 46rem) {              /* a phone: one column */
  .about-grid, .tiles, .tiles.three { grid-template-columns: minmax(0, 1fr); }
}
/* The time left to a restart (the owner: "a different colour so that people realize, or even a countdown by the
   second"): the clock time keeps the page's colour, the time left is bright ivory and counts down, amber in the last 15
   minutes. Its digits keep one width, so the line does not shake. */
.server .left { color: var(--text); font-variant-numeric: tabular-nums; }
.server .left.near { color: var(--near); font-weight: 700; }
/* ---- HOME (the owner's pick of 2026-10-01 from three layouts): under the top, one full row per game with a large
   picture beside the text (alternating sides), the four steps to join in a row, three columns of news. A wide window
   gets a wide page (text pages stay at 62 rem); a phone gets one column. */
.p-index main { max-width: min(150rem, 90vw); }
/* HOME'S STYLE (the owner's pick of three, 2026-10-01): "warm and cool". Copper stays for the titles and the buttons; a
   cool steel blue-grey for the small things (the step numbers and their rings, the dates, the list dots, the cards'
   borders); the panels a blue-black instead of the brown-black. The section titles sit on a dark head strip, so no
   title passes over the picture's lamp. */
.p-index main { --panel: var(--panel-cool); --line: var(--line-cool); --muted: var(--cool); }
.p-index .card { border-color: rgba(157, 180, 200, .38); }
.p-index .step::before { color: var(--cool); border-color: var(--cool); }
.p-index main li::marker { color: var(--cool); }
.p-index .band-text ul, .p-index .step p { color: var(--soft-cool); }
.p-index .home-wide > section > h2, .p-index .three .card > h2:first-child { text-shadow: none; background: rgba(6, 9, 12, .78);
                                                                               border-bottom: 2px solid var(--accent); }
.p-index .home-wide > section > h2 { margin: 0 0 1rem; padding: .7rem 1.25rem; border: 1px solid rgba(157, 180, 200, .38);
                                     border-bottom: 2px solid var(--accent); border-radius: 8px 8px 0 0; }
.p-index .three .card > h2:first-child { margin: -1rem -1.25rem .9rem; padding: .7rem 1.25rem; border-radius: 7px 7px 0 0; }
.p-index .home-wide > * + * { margin-top: 2.5rem; }      /* a little more air between the sections */
.p-index .band { margin-bottom: 0; }
.p-index .band + .band { margin-top: 1.5rem; }
/* Everything under the top is one block; its text grows a little with the window (16 px on a laptop, about 19 px at
   2560, 21 px from 3440 up), so a wide page is not a page of small print. The top keeps its size. */
.home-wide { font-size: clamp(1rem, .3vw + .7rem, 1.3rem); }
.home-wide h2 { margin-top: .25rem; font-size: 1.35em; }
.home-wide h3 { font-size: 1.1em; }
.home-wide .small { font-size: .85em; }
.home-wide > section > h2 { margin-top: 1.5rem; }
.links { margin: .6rem 0 0; }
/* A game picture in its place on a page (the owner's picks of 2026-10-01): the WHOLE picture (17:6, nothing cut, its
   corner mark in view), centred, never taller than two fifths of the window: on a very wide page it is narrower than the
   page's column rather than cropped. */
.banner { display: block; width: 100%; max-width: min(80rem, calc(40vh * 17 / 6)); height: auto; aspect-ratio: 17 / 6;
          margin: 0 auto 1rem; border: 1px solid var(--line); border-radius: 8px; }
.rules .banner { margin: 1.5rem auto .25rem; }
/* The top of the two game pages and of the two update pages (the owner, 2026-10-01: "centering the text ... because of
   picture it looks weird ... text starting on side"): the title and the opening lines CENTRED over the page's picture
   and never wider than it, so the three read as one block. Lines of even length where the browser can (balance). */
.top-block { max-width: min(80rem, calc(40vh * 17 / 6)); margin: 0 auto 1.25rem; text-align: center; text-wrap: balance; }
.top-block .banner { max-width: none; margin: 1rem 0 0; }
.top-block .lede.on-picture { max-width: none; margin: 0; }
.top-block > p { margin: 0 0 .4rem; }
/* Home, the strip "New here? Four steps": the link to the full guide sits at the strip's right end, on the heading's
   line (the owner: no button, and nothing loose on the bare background). Too narrow for both: the link goes under the
   heading, still inside the strip. */
.p-index .home-wide > section > h2.with-link { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
                                               gap: .2rem 1.5rem; }
h2.with-link a { font-size: .72em; font-weight: 600; white-space: nowrap; }
.band { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: stretch; margin: 0 0 1.25rem; padding: 0; overflow: hidden; }
.band.flip { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.band > img { display: block; width: 100%; height: 100%; min-height: 15rem; object-fit: cover; }
.band.flip > img { order: 2; }
.band-text { align-self: center; padding: 1.25rem 2rem; }
.band-text .count { font-size: 1.1em; }
.band-text ul { margin: .5rem 0; padding-left: 1.2rem; color: var(--text-soft); }
.steps-row { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: step; }
.step { margin: 0; padding: 1.3rem 1.4rem 1.3rem 5.6rem; min-height: 6.4rem; position: relative; }       /* a clear tile, a big number */
.step::before { counter-increment: step; content: counter(step); position: absolute; left: 1.2rem; top: 1.15rem; width: 3.3rem;
                height: 3.3rem; line-height: 3.1rem; text-align: center; font-size: 1.9rem; font-weight: 700; color: var(--accent);
                border: 3px solid var(--accent); border-radius: 50%; }
.step h3 { margin: .2rem 0 .3rem; font-size: 1.25em; }
.step p { margin: 0; color: var(--text-soft); }
.three { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.three .card, .changes { margin: 0; }
.changes { margin-top: 1.25rem; }
.headlines { list-style: none; margin: 0; padding: 0; }
.headlines li { margin: 0 0 .7rem; font-weight: 600; }
.brief a, .headlines a { font-weight: 600; font-size: 1.05em; }
@media (max-width: 70rem) {              /* a narrower window: the page as wide as a text page, the steps two by two */
  .p-index main { max-width: 62rem; }
  .steps-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 60rem) {              /* a tablet and a phone: a game's picture above its text, whole */
  .band, .band.flip { grid-template-columns: minmax(0, 1fr); }
  .band.flip > img { order: 0; }
  .band > img { min-height: 0; height: auto; aspect-ratio: 17 / 6; }
}
@media (max-width: 46rem) {              /* a phone: one column */
  .three, .steps-row { grid-template-columns: minmax(0, 1fr); }
  .band-text { padding: 1rem 1.25rem; }
}
/* ---- HOW TO JOIN (the owner's pick of three, 2026-10-01): THE PATH. A line down the page with four numbered stops,
   each step on its own panel to the right of its stop, with its button; "What you need" as the last block. A little
   wider than a text page, the picture still visible at the sides. */
.p-join main { max-width: min(74rem, 88vw); }
.p-join main, .p-steam main { font-size: clamp(1rem, .25vw + .75rem, 1.2rem); }
.p-join main .small, .p-steam main .small { font-size: .85em; }
.act { margin: .8rem 0 0; }
.act .button { margin: 0; }
.path { position: relative; margin: 0; padding: 0 0 0 6rem; list-style: none; counter-reset: step; }
.path::before { content: ""; position: absolute; left: 2.05rem; top: 2rem; bottom: 2rem; width: 4px; border-radius: 2px; background: var(--accent); }
.stop { position: relative; margin: 0 0 1.25rem; padding: 1.1rem 1.5rem 1.2rem; }
.stop::before { counter-increment: step; content: counter(step); position: absolute; left: -6rem; top: .7rem; width: 4.2rem; height: 4.2rem;
                line-height: 3.85rem; text-align: center; font-size: 2rem; font-weight: 800; color: var(--accent); text-shadow: none;
                background: var(--bg); border: 3px solid var(--accent); border-radius: 50%; }
.stop h3 { margin: 0 0 .3rem; font-size: 1.3em; }
.stop p { margin: 0; color: var(--text-soft); }
.stop .act { margin-top: .8rem; }
.after-path { margin-left: 6rem; }
.after-path h3 { margin-top: .2rem; font-size: 1.3em; }
.after-path li { color: var(--text-soft); }
/* ---- LINK STEAM (the owner's pick of three): one card; the sentence and the LARGE button at the top; then a head strip
   per part and a numbered row per step. */
.p-steam main { max-width: min(92rem, 88vw); }
.button.big { margin: 0; padding: 1.05rem 2.2rem; font-size: 1.3rem; }
.lede { margin: 0 0 .7rem; font-size: 1.15em; }
.go { text-align: center; }
.top-action { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.25rem 3rem; padding: 1.5rem 0 1.25rem; }
.rowcard { padding-top: 0; padding-bottom: .5rem; }
.strip { margin: 0 -1.25rem; padding: .7rem 1.25rem; font-size: 1.25em; color: var(--text); background: rgba(0, 0, 0, .6);
         border-top: 1px solid var(--line); border-bottom: 2px solid var(--accent); counter-reset: step; }
.srow { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); align-items: center; column-gap: 1.25rem; padding: .9rem 0;
        border-bottom: 1px solid var(--line); }
.srow::before { counter-increment: step; content: counter(step); width: 3.4rem; height: 3.4rem; line-height: 3.1rem; text-align: center;
                font-size: 1.7rem; font-weight: 800; color: var(--accent); border: 3px solid var(--accent); border-radius: 50%; }
.srow p { margin: 0; color: var(--text-soft); }
.rowcard > p { margin: .9rem 0 .4rem; }
.rowlist { margin: .9rem 0; padding-left: 1.3rem; color: var(--text-soft); }
.rowlist li { margin: .5rem 0; }
@media (max-width: 70rem) { .p-join main, .p-steam main { max-width: 62rem; } }
@media (max-width: 60rem) {
  .top-action { grid-template-columns: minmax(0, 1fr); }
  .go { text-align: left; }
}
@media (max-width: 46rem) {              /* a phone: the line and its stops closer to the edge */
  .path { padding-left: 4rem; }
  .path::before { left: 1.3rem; }
  .stop::before { left: -4rem; width: 2.9rem; height: 2.9rem; line-height: 2.6rem; font-size: 1.4rem; }
  .after-path { margin-left: 0; }
}
/* ---- SERVERS: THE STATUS BOARD (the owner's pick of three, 2026-10-01). Each game's servers are one dark block with a
   bar in the game's colour down its side; slim rows; the status is a light with its word in small; the clock time of
   the next restart is small and grey and the TIME LEFT is the biggest thing in the row, at the right end. A row's fine
   print shows while the pointer is on the row or the row has the keyboard (always on a phone). */
.p-servers .servers { background: rgba(8, 8, 8, .86); border: 1px solid var(--line); border-left: 7px solid var(--bar); border-radius: 0 8px 8px 0; }
.p-servers .servers.dayz { --bar: var(--dayz); }
.p-servers .servers.rust { --bar: var(--rust); }
.p-servers .server-head { margin: 0; padding: .5rem 1.1rem; font-size: .8rem; background: #000; border: 0; border-bottom: 2px solid var(--bar); border-radius: 0 7px 0 0; }
.p-servers .server { margin: 0; padding: .5rem 1.1rem; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.p-servers .server:last-child { border-bottom: 0; }
.p-servers .server:hover, .p-servers .server:focus { background: rgba(255, 255, 255, .04); outline: none; }
.p-servers .server:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.p-servers .server h3 { font-size: 1rem; }
.p-servers .server .about { display: none; margin: .25rem 0 .1rem; }
.p-servers .server:hover .about, .p-servers .server:focus .about, .p-servers .server:focus-within .about { display: block; }
/* THE STATUS LIGHT. Its cell must not clip it: a cell cuts what is longer than its column (the "..." guard), and that
   cut the light's glow at the top and the bottom, because the glow is taller than a line of small text. The status
   cell is the one cell that shows everything. */
.p-servers .server .cell[data-label="Status"] { overflow: visible; }
.p-servers .server .badge[data-live="state"] { display: inline-flex; align-items: center; padding: 0; border: 0; font-size: .8rem; font-weight: 600; color: var(--muted); }
.p-servers .server .badge[data-live="state"]::before { content: ""; flex: none; width: .75rem; height: .75rem; margin-right: .5rem; border-radius: 50%; background: var(--muted); }
.p-servers .server .badge[data-live="state"].up::before { background: var(--up); box-shadow: 0 0 .5rem var(--up); }
.p-servers .server .badge[data-live="state"].down::before { background: var(--down); box-shadow: 0 0 .5rem var(--down); }
.p-servers .server time { color: var(--muted); font-size: .9rem; }
.p-servers .server .left { margin-left: .35rem; font-size: 1.2rem; font-weight: 800; }
@media (max-width: 69.99rem) {
  .p-servers .server { padding: .8rem 1.1rem; }
  .p-servers .server .about { display: block; }
}
/* ---- OUR NEWS (the owner's pick of three, 2026-10-01): A TIMELINE. A blue line down the page with a stop per item,
   its date in small capitals over its title; the newest at the top, larger, with a blue edge. */
.p-news main { max-width: min(80rem, 88vw); font-size: clamp(1rem, .25vw + .75rem, 1.2rem); }
.p-news main .small { font-size: .85em; }
.p-news main > .small { margin-top: 1.5rem; }
.timeline { position: relative; margin: 0; padding: 0 0 0 3.5rem; list-style: none; }
.timeline::before { content: ""; position: absolute; left: .95rem; top: 1.2rem; bottom: 1.5rem; width: 4px; border-radius: 2px; background: var(--accent); }
.when { position: relative; margin: 0 0 1.25rem; padding: 1rem 1.5rem 1.1rem; }
.when::before { content: ""; position: absolute; left: -3.2rem; top: 1.1rem; width: 1.5rem; height: 1.5rem; border-radius: 50%;
                background: var(--bg); border: 4px solid var(--accent); }
.when .date { font-size: .85em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.when h3 { margin: .2rem 0 .5rem; font-size: 1.25em; }
.when p { margin: 0 0 .6rem; color: var(--text-soft); }
.when.newest { padding: 1.4rem 1.8rem; border-color: var(--accent); }
.when.newest h3 { font-size: 1.8em; }
.when.newest p { font-size: 1.1em; color: var(--text); }
.when.newest::before { left: -3.45rem; top: 1.5rem; width: 2rem; height: 2rem; background: var(--accent); }
@media (max-width: 70rem) { .p-news main { max-width: 62rem; } }
/* ---- THE TWO GAME UPDATE PAGES (the owner's pick of three, 2026-10-01): "FEATURE", each in its game's colour. The
   latest update is a wide panel: its words at the left, at the right the video's STILL FRAME (a dark 16:9 box with a
   play mark, on the frame our own site saved (job 122); a press puts YouTube's player in its place; nothing is fetched
   from YouTube before that); then our own note at full
   width, then the earlier updates as a grid of cards. */
.p-dayz-updates main, .p-rust-updates main { max-width: min(120rem, 90vw); font-size: clamp(1rem, .25vw + .75rem, 1.2rem); }
.p-dayz-updates main .small, .p-rust-updates main .small { font-size: .85em; }
[data-updates] .latest { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2.5rem; align-items: start;
        grid-template-areas: "date media" "title media" "lead media" "link media"; grid-template-rows: auto auto auto 1fr; padding: 1.75rem 2rem; }
[data-updates] .latest > [data-l="date"] { grid-area: date; }
[data-updates] .latest > h2 { grid-area: title; font-size: clamp(1.7rem, 2.4vw, 2.9rem); }
[data-updates] .latest > [data-l="lead"] { grid-area: lead; font-size: 1.15em; }
[data-updates] .latest > .media { grid-area: media; display: block; margin: 0; }
[data-updates] .latest > .media > div + div { margin-top: .7rem; }
[data-updates] .latest > p:last-child { grid-area: link; align-self: end; margin: 1.2rem 0 0; }
/* (an update with no video and no picture: its words take the whole panel) */
[data-updates] .latest:not(:has(.media > div:not([hidden]))) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "date" "title" "lead" "link"; }
[data-updates] .latest:not(:has(.media > div:not([hidden]))) > .media { display: none; }
[data-updates] .video > button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem; width: 100%;
        aspect-ratio: 16 / 9; margin: 0; padding: 1rem; font-size: 1.05em; white-space: normal; background: #000; border-width: 2px; }
[data-updates] .video > button::before { content: "\25B6"; width: 5.2rem; height: 5.2rem; padding-left: .35rem; line-height: 4.9rem; font-size: 2.4rem;
        text-align: center; color: var(--accent); border: 3px solid var(--accent); border-radius: 50%; }
[data-updates] .video > button:hover::before, [data-updates] .video > button:focus-visible::before { color: var(--bg); border-color: var(--bg); }
/* (job 122) with the video's still frame (site.js puts it in as the box's background, from our own feed folder): the
   picture fills the box under a dark veil, the words in white, the play mark on a dark disc; a hover lifts the veil and
   fills the mark. The hover rules repeat the picture's settings (the ghost button's hover resets its background). */
[data-updates] .video > button.poster, [data-updates] .video > button.poster:hover, [data-updates] .video > button.poster:focus-visible {
        background-color: #000; background-size: cover; background-position: center; background-repeat: no-repeat; color: #fff;
        text-shadow: 0 1px 4px #000; box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .4); }
[data-updates] .video > button.poster:hover, [data-updates] .video > button.poster:focus-visible { box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .15); }
[data-updates] .video > button.poster::before { background: rgba(0, 0, 0, .55); }
[data-updates] .video > button.poster:hover::before, [data-updates] .video > button.poster:focus-visible::before {
        color: var(--bg); background: var(--accent); border-color: var(--accent); }
[data-updates] .latest > p:last-child .button { margin: 0; padding: .85rem 1.7rem; font-size: 1.1em; border: 2px solid var(--accent); color: var(--accent); }
[data-updates] .latest > p:last-child .button:hover, [data-updates] .latest > p:last-child .button:focus-visible { background: var(--accent); color: var(--bg); }
[data-updates] .updates { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-updates] .updates li, [data-updates] .updates li:last-child { margin: 0; }
@media (max-width: 80rem) { [data-updates] .updates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 70rem) {
  .p-dayz-updates main, .p-rust-updates main { max-width: 62rem; }
  [data-updates] .latest { grid-template-columns: minmax(0, 1fr); grid-template-areas: "date" "title" "lead" "media" "link"; }
  [data-updates] .latest > .media { margin-top: 1rem; }
}
@media (max-width: 46rem) {
  [data-updates] .updates { grid-template-columns: minmax(0, 1fr); }
  [data-updates] .latest { padding: 1.1rem 1.25rem; }
}
/* ---- THE PAGES PICKED LAST IN THE LOOK SESSION (2026-10-01): Appeals (the path), Donate (what it pays for), Contact (one
   card, a head strip per block), the two game pages (tiles and rows that open), About (a "who we are" top and three
   columns), Rules (three tabs). Each uses more of the width than a text page, the picture still visible at the sides,
   and its text grows a little on a wide window, as on Home. */
.p-appeals main { max-width: min(78rem, 88vw); }
.p-donate main { max-width: min(110rem, 90vw); }
.p-contact main { max-width: min(84rem, 88vw); }
.p-dayz-play main, .p-rust-play main { max-width: min(104rem, 90vw); }
.p-about main { max-width: min(112rem, 90vw); }
.p-rules main { max-width: min(72rem, 90vw); }
.p-appeals main, .p-donate main, .p-contact main, .p-dayz-play main, .p-rust-play main, .p-about main, .p-rules main {
  font-size: clamp(1rem, .25vw + .75rem, 1.2rem); }
.p-appeals main .small, .p-donate main .small, .p-contact main .small, .p-dayz-play main .small, .p-rust-play main .small,
.p-about main .small, .p-rules main .small { font-size: .85em; }
.p-donate main > .small { margin-top: 1.25rem; }
/* CENTRED on the page (the owner, 2026-10-01): the Servers title and the line under it ("right now it's to the side. It
   looks odd"); Donate's title and its last line (everything between them is centred already). */
.centred { text-align: center; text-wrap: balance; }
/* A panel with a head strip; a lead sentence that sits on the picture; three tiles in a row; two columns. */
.headed > h2:first-child { margin: -1rem -1.25rem .9rem; padding: .7rem 1.25rem; font-size: 1.25em; color: var(--text);
                           background: rgba(0, 0, 0, .6); border-bottom: 2px solid var(--accent); border-radius: 7px 7px 0 0; }
.headed p, .headed li { color: var(--text-soft); }
.headed strong { color: var(--text); }
.headed h3 { font-size: 1.1em; }
.headed ul { margin: .4rem 0; padding-left: 1.2rem; }
.headed li { margin: .45rem 0; }
.lede.on-picture { max-width: 72rem; margin: 0 0 1.5rem; font-size: 1.2em; }
.lede.on-picture p { margin: 0; }
.tiles3 { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.cols2 { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.tiles3 > .card, .cols2 > .card { margin: 0; }
.strip.first { border-top: 0; border-radius: 7px 7px 0 0; }
.rowcard > ul { margin: .9rem 0; padding-left: 1.3rem; color: var(--text-soft); }
/* Appeals: the bans that are not appealed stand out; a stop of the path may hold a list */
.never { display: block; margin: .2rem 0 .2rem -.4rem; padding: .5rem .8rem; background: rgba(229, 72, 77, .13); border-left: 4px solid var(--appeals); border-radius: 0 4px 4px 0; }
.stop ul { margin: .3rem 0 0; padding-left: 1.2rem; color: var(--text-soft); }
.stop li { margin: .35rem 0; }
.after-path.plain { margin-left: 6rem; }
/* Donate: the ask first, then what it pays for */
.ask { max-width: 62rem; margin: 0 auto 2rem; text-align: center; }
.ask .lede { font-size: 1.4em; }
.ask .go { margin: 1.5rem 0 0; text-align: center; }
.ask .button.big { padding: 1.2rem 2.8rem; font-size: 1.45rem; }
.pays { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 62rem; margin: 0 auto 1.5rem; }
.pay { margin: 0; padding: 1.1rem; text-align: center; font-size: 1.2em; font-weight: 700; color: var(--accent); border-top: 3px solid var(--accent); }
/* The two game pages: the rows that open */
.folds { margin-top: 1.25rem; padding: .2rem 1.25rem; }
.fold { border-bottom: 1px solid var(--line); }
.fold:last-child { border-bottom: 0; }
.fold summary { display: flex; align-items: baseline; gap: .7rem; padding: .8rem 0; cursor: pointer; list-style: none; font-size: 1.15em;
                font-weight: 700; color: var(--accent); }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::before { content: ""; flex: none; width: .45em; height: .45em; margin-left: .15em; border-right: 2px solid var(--accent);
                        border-bottom: 2px solid var(--accent); transform: translateY(-.1em) rotate(-45deg); }
.fold[open] > summary::before { transform: translateY(-.25em) rotate(45deg); }
.fold summary:hover { color: var(--text); }
.fold .answer { padding: 0 0 .9rem 1.35rem; }
.fold .answer ul { margin: 0; padding-left: 1.2rem; }
.fold .answer li, .fold .answer p { color: var(--text-soft); }
.fold .answer li { margin: .45rem 0; }
/* About: the "who we are" top */
.who { max-width: 72rem; margin: 0 auto 2rem; padding: 2.5rem 0 1rem; text-align: center; }
.who .opening { max-width: none; margin: 1rem 0 1.5rem; font-size: 1.55em; }
.p-about .headed .small { margin: .2rem 0 .6rem; }
/* Rules: the three tabs, each in its block's colour */
.tabs { display: flex; flex-wrap: wrap; gap: .6rem; padding: .7rem; }
.tabs a { padding: .6rem 1.3rem; font-weight: 700; text-decoration: none; color: var(--accent); border: 2px solid var(--accent); border-radius: 6px; }
.tabs a.here, .tabs a:hover, .tabs a:focus-visible { color: var(--bg); background: var(--accent); }
@media (max-width: 70rem) {
  .p-appeals main, .p-donate main, .p-contact main, .p-dayz-play main, .p-rust-play main, .p-about main, .p-rules main { max-width: 62rem; }
  .tiles3, .cols2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 46rem) {
  .pays { grid-template-columns: minmax(0, 1fr); }
  .after-path.plain { margin-left: 0; }
}

/* HOW TO JOIN (the owner, 2026-10-08), on Servers: next to each game's heading, at the other end of its line, a button in
   the game's colour, the same size as the heading's own button; it opens a pop-up with the lines to copy (by the NAME,
   never an address). The pop-up is the browser's own <dialog>: centred, Esc and a click outside close it, the keyboard
   stays inside while it is open. On a phone it takes the screen's width less a margin, and each line wraps. */
.game-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem;
             margin: 2.75rem 0 .9rem; }
.game-line .game-title { margin: 0; }
.game-line[data-game="dayz"], #join-dayz { --accent: var(--dayz); --accent-text: var(--dayz-t, var(--dayz)); }
.game-line[data-game="rust"], #join-rust { --accent: var(--rust); --accent-text: var(--rust-t, var(--rust)); }
.join-open { margin: 0; padding: .78rem 1.4rem; font: inherit; font-size: 1.05rem; font-weight: 700; line-height: 1.5;
             background: rgba(0, 0, 0, .78); text-shadow: none; cursor: pointer; }
.join-dialog { width: min(52rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; color: var(--text);
               background: #0d0d0d; border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 8px;
               box-shadow: 0 12px 48px rgba(0, 0, 0, .7); }
.join-dialog::backdrop { background: rgba(0, 0, 0, .72); }
.join-box { position: relative; padding: 1.4rem 1.5rem 1.1rem; }
.join-box h2 { margin: 0 3rem .5rem 0; font-size: 1.45rem; color: var(--accent); }
.join-close { position: absolute; top: .7rem; right: .7rem; width: 2.5rem; height: 2.5rem; padding: 0; font: inherit;
              font-size: 1.6rem; line-height: 1; color: var(--text); background: transparent; border: 1px solid var(--line);
              border-radius: 6px; cursor: pointer; }
.join-close:hover, .join-close:focus-visible { color: var(--accent); border-color: var(--accent); }
.join-steps { margin: 0 0 .4rem; padding-left: 1.5rem; }
.join-steps li { margin: .15rem 0; padding-left: .2rem; }
.join-steps li::marker { color: var(--accent); font-weight: 700; }
.join-note { margin: 0 0 1rem; color: var(--text-soft); }
.join-rows { margin: 0 0 .6rem; padding: 0; list-style: none; }
.join-rows li { display: grid; grid-template-columns: 7.5rem 1fr auto; align-items: center; gap: .45rem 1rem;
                padding: .65rem 0; border-top: 1px solid var(--line); }
.join-rows li:last-child { border-bottom: 1px solid var(--line); }
.join-rows li.join-only { grid-template-columns: 1fr auto; }
.join-name { font-weight: 700; color: var(--accent-text); }
.join-name .small { display: block; font-weight: 400; color: var(--text-soft); }
.join-name .badge { margin-left: .5rem; vertical-align: .1em; }
.join-rows code { font: .9rem/1.45 ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.join-acts { display: flex; gap: .5rem; justify-content: flex-end; }
.join-copy, .join-go { min-width: 5.5rem; margin: 0; padding: .4rem 1rem; font: inherit; font-weight: 700; text-align: center; cursor: pointer; }

.join-status { min-height: 1.4em; margin: .4rem 0 0; color: var(--text-soft); }
@media (max-width: 56rem) {           /* a phone or a narrow window: the name and Copy on one line, what is copied under them */
  .join-box { padding: 1.2rem 1rem 1rem; }
  .join-rows li { grid-template-columns: 1fr auto; }
  .join-rows code { grid-column: 1 / -1; grid-row: 2; }
}

/* THE MEDALS PAGE (the owner, 2026-10-08: "Show them"): a card per group (Both games, DayZ, Rust, On our Discord, the
   Hall of Valour), the medals in a grid: the picture of the highest level, the name, what earns it, the levels. */
.jump { text-align: center; }
.card.medals > h2:first-child { margin: -1rem -1.25rem .9rem; padding: .75rem 1.25rem; border-bottom: 1px solid var(--accent); }
.card.medals > h2 .small { font-weight: 400; color: var(--text-soft); }
.medal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .9rem 1.5rem; margin: 0;
              padding: 0; list-style: none; }
.medal { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.medal img { flex: none; width: 80px; height: 80px; }
.medal h3 { margin: 0; font-size: 1.05rem; color: var(--accent-text); }
.medal p { margin: .1rem 0 0; }
.medal .levels { color: var(--text-soft); }

/* A SERVER'S OWN JOIN PAGE (play-<name>.html, 2026-10-08): the pop-up's steps and its Join row, in a card. */
.card.join-page { max-width: 44rem; margin-left: auto; margin-right: auto; }