/* The bar, and the way one page hands over to the next.

   This is a stylesheet rather than rules injected by nav.js because both
   things it does have to be true before the page first paints: the bar cannot
   flash in the wrong place, and a cross-document view transition is only
   offered if the opt-in was parsed on the way in. */

/* The bar itself, not each page's idea of it. Three pages had three different
   rules for the same strip -- one capped at 1500px, one at 1760, one not at
   all -- so the brand sat at three different distances from the edge and the
   links moved under the pointer as you went from page to page. These are
   written as `header .nav` rather than `.nav` so they win over whatever the
   page's own stylesheet says, without any page having to be edited. */
/* A short page has no scrollbar and a long one does, so the centred bar sat
   eight pixels further right on the store than on the news. Reserve the gutter
   on every page and the bar is in the same place on all of them. */
html { scrollbar-gutter: stable; }

/* -------------------------------------------------------------- the site's look
   Plain and clear, as the owner asked (2026-09-25): flat colours, 4-6px
   corners, a 1px border where two things need telling apart, no gradients,
   glows or sheen. The game's green is the colour that means "press this"
   (Play, Buy, Open, Create, Send), with dark words on it; gold is kept for
   money -- prices, coins and the sale tag -- and nothing else. (Gold was the
   main action for one pass; the owner asked for the green back.) Words and
   figures in Rubik, the game's face. Named once here so every page of the
   site wears the same. */
:root {
  --sw-face: "Rubik", "Heebo", "Segoe UI", system-ui, sans-serif;
  --sw-panel: #111a2b;
  --sw-panel2: #16223a;
  --sw-edge: #1f2c43;
  --sw-edge2: #2c3d5c;
  --sw-well: #0b1220;
  --sw-block: #1a2640;
  --sw-gold: #f5c451;          /* money: prices, coins, the sale */
  /* The game's menu dress (2026-09-26): its PLAY card is #2fbf77 and lightens
     under the pointer, and every other choice is a card -- #111b2e, a #26354f
     hairline, 6px -- that lightens too; what is chosen wears the card's green,
     a green hairline and green words on a dark green, never the solid fill.
     The site's controls wear the same, so the two read as one product. */
  --sw-go: #2fbf77;            /* the main action */
  --sw-go2: #3ad98a;           /* the main action, pointed at */
  --sw-go-ink: #05241a;        /* the words on it: 6.9:1 on --sw-go, 9:1 on --sw-go2 */
  --sw-card: #111b2e;          /* a choice, a tab, a plain button, a fold's head */
  --sw-card-edge: #26354f;
  --sw-card-hi: #15223a;       /* ... pointed at */
  --sw-card-edge-hi: #3a4f73;
  --sw-card-ink: #b9c6da;
  --sw-chosen: #12261f;        /* the chosen one: the card's green */
  --sw-chosen-hi: #163026;
  --sw-chosen-edge: #2fbf77;
  --sw-chosen-ink: #8df0bb;
  --sw-word: #5fd12a;          /* WARS in the wordmark, as on the game's menu */
  --sw-focus: #e9effc;         /* the ring round whatever the keyboard is on */
}
/* the page's scrollbar in the page's navy rather than the system's grey */
html { scrollbar-color: #2a3a58 #0a111d; }

/* ------------------------------------------------------------- waiting, drawn
   Where something is on its way -- the store's shelves, a wallet, the
   lobbies -- a plain block the size of what is coming stands in its place,
   breathing gently, so the page neither sits empty nor jumps when the
   answer lands. */
.skel { display: block; border-radius: 4px; background: var(--sw-block); animation: swpulse 1.6s ease-in-out infinite; }
@keyframes swpulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(8, 13, 22, .9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
/* One step heavier than a page's own `header` rule, so every page gets it:
   one flat colour and a line under it, and the site's own face and ink for
   anything in the bar that inherits them (the store's body face and the
   desk's ink had reached the bar). */
body > header { background: #0a111d; border-bottom: 1px solid var(--sw-edge); font-family: var(--sw-face); color: #e9effc; }
header .nav {
  max-width: min(1760px, 96vw); margin: 0 auto; padding: 0 28px; height: 64px;
  display: flex; align-items: center; gap: 22px;
}
header .nav .sp { flex: 1; }
/* The wordmark: SEED in white and WARS in the green of the game's menu, the
   same in the bar and in the footer of every page, in its own Latin type in
   both languages.

   Every page carried a .brand rule of its own, and they had drifted: WARS
   was var(--green) on most pages -- a duller green than the menu's -- and on
   the store, which names no --green, the colour fell away and WARS came out
   white. So it is written here once, a step heavier than any page's .brand
   or its Hebrew rule (html:root outranks html.he), with the colours spelled
   out rather than borrowed from a page. */
html:root :is(header, footer) a.brand {
  display: flex; align-items: center; gap: 9px; flex: none; direction: ltr; unicode-bidi: isolate;
  color: #fff; text-decoration: none; text-transform: uppercase;
  font: 800 17px/1 "Segoe UI Variable Display", "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
  letter-spacing: .04em;
}
html:root :is(header, footer) a.brand img { width: 30px; height: 30px; flex: none; }
html:root :is(header, footer) a.brand span { font: inherit; letter-spacing: inherit; color: #fff; }
html:root :is(header, footer) a.brand em { font-style: normal; color: var(--sw-word); }
/* And the bar's type is its own, not the page's: a page whose body text is
   a size smaller pulled every control in the bar down a pixel with it, and
   the bar moved from page to page. */
header { font-size: 16px; line-height: 1.6; }
header .nav a.l { line-height: 1.6; }
header .nav a.l { font-size: 14px; font-weight: 500; color: var(--body); text-decoration: none; font-family: var(--sw-face); }
/* Beside the wordmark: the release label and the way to the live streams.
   One small tag, drawn alike for both -- the same height, face, size, border,
   corner and spacing on every page and in both languages. They had been two
   looks (a spaced capital LIVE at 12px, the label at 11px, the Hebrew LIVE at
   13px), and the store's own face made its LIVE wider again. Written as
   html:root so no page's type reaches them. Live is grey until somebody is
   on air, then red. */
html:root header a.brand .beta-mark,
html:root header a.onair {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box;
  height: 24px; margin: 0; padding: 0 8px;
  border: 1px solid var(--sw-edge2); border-radius: 4px; background: transparent;
  font: 600 12px/1 var(--sw-face); letter-spacing: 0; text-transform: none; white-space: nowrap;
  color: #a3b2cc; text-decoration: none;
}
html:root header a.brand .beta-mark { margin-left: 3px; }
html:root header a.onair i { width: 7px; height: 7px; border-radius: 50%; background: #7788a6; flex: none; }
html:root header a.onair:hover, html:root header a.onair.on { color: #e9effc; border-color: #3a4f75; }
html:root header a.onair.live { color: #ff8f9a; border-color: #7a2a35; background: #1c0f16; }
html:root header a.onair.live i { background: #e6394a; animation: navblink 1.6s ease-in-out infinite; }
@keyframes navblink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { html:root header a.onair.live i { animation: none; } }
header .nav a.l:hover { color: var(--ink); }

/* Hebrew turns the page round, as it should. The bar does not: a navigation
   bar that swaps ends when you change language is not a translation, it is a
   different bar, and you have to find everything again. The words change and
   nothing moves. */
header .nav { direction: ltr; }

/* Where you are.

   One bar for the whole navigation rather than one inside each link. It used
   to be a child of the active link with a view-transition name on it, and no
   page on the site declares @view-transition -- so the transition it was named
   for never ran and the bar simply appeared under a different word on the next
   page. A single bar can be measured to a link and moved to another, which is
   what it does the moment one is pressed: it travels while the next page is
   still loading instead of teleporting when it arrives. */
.nav { position: relative; }
.nav a.l { position: relative; padding: 7px 1px; }
.nav a.l.on { color: #e9effc; font-weight: 600; }
/* the house's own page, in its own colour, so it is never mistaken for one of the others */
.nav a.l.house { color: #d9b354; font-weight: 600; }
.nav a.l.house.on { color: #ffe38a; }
.navmark {
  position: absolute; left: 0; bottom: 0; width: 0;
  height: 2px; border-radius: 1px; background: #e9effc;
  opacity: 0; pointer-events: none;
  transition: transform .26s cubic-bezier(.4,0,.2,1),
              width .26s cubic-bezier(.4,0,.2,1), opacity .18s ease;
}
/* Placed for the first time without a slide: a bar that flies in from the left
   edge on every page load is a worse greeting than one that is simply there. */
.navmark.set { opacity: 1; }
.navmark.warm { transition: none; }
@media (prefers-reduced-motion: reduce) { .navmark { transition: none; } }

/* The mark beside a name: an early supporter, or one of the builders.

   Sized to the line it sits on rather than to a pixel count, so it stays with
   the name at any interface scale, and it is the only thing in the header that
   is allowed to be a picture. */
.tierpip { display: inline-flex; vertical-align: -2px; margin-inline-end: 5px;
  flex: none; cursor: help; }
.tierpip svg { width: 1.05em; height: 1.05em; display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }

/* -------------------------------------------------------------- buttons

   One definition for the whole site. Six pages carried six copies of these,
   four identical and two that had drifted -- the store and the profile had
   lost the transition, the press and the large size. Every page loads this
   sheet, so this is where they belong.

   Sized to be pressed rather than read: 15px, and 17 on the large ones. They
   were 14 everywhere, which is body text with a border round it.

   Flat, one colour each: the game's green, with dark words, for the main
   thing on the page (Play, Create, Send), navy with a border for everything
   else. A hover deepens it; a press sinks it a pixel. That is all a button
   needs to say. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 6px;
  font: 600 15px/1 var(--sw-face); letter-spacing: 0;
  background: var(--sw-go); color: var(--sw-go-ink); border: 1px solid var(--sw-go);
  cursor: pointer; text-decoration: none;
  transition: filter .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { filter: none; }
/* The deeper green under the pointer, at no weight at all (:where), so it
   only ever reaches the plain green button: any page's own button rule -- the
   navy .btn.sec, the Discord blue, the desk's buttons -- still has the last
   word on its own hover. */
:where(.btn):hover { background: var(--sw-go2); border-color: var(--sw-go2); }
.btn:focus-visible { outline: 1px solid rgba(233,239,252,.55); outline-offset: 2px; }

.btn.sec { background: var(--sw-card); color: #dfe7f5; border-color: var(--sw-card-edge); }
.btn.sec:hover { background: var(--sw-card-hi); border-color: var(--sw-card-edge-hi); color: #fff; filter: none; }

.btn.lg { padding: 14px 28px; font-size: 16.5px; border-radius: 6px; }

/* The one that has to argue for itself.

   Play now is obvious and Find a lobby is for people who already know what a
   lobby is; this is the button for somebody who has read two paragraphs and is
   deciding whether to read more. An arrow that walks a step when you point at
   it, and nothing else: no picture, no gradient. */
.btn.lead .arw { display: inline-flex; margin-inline-start: 2px;
  transition: transform .18s cubic-bezier(.34,1.3,.64,1); }
.btn.lead .arw svg { width: 17px; height: 17px; display: block; }
.btn.lead:hover .arw { transform: translateX(4px); }
html.he .btn.lead .arw { transform: scaleX(-1); }
html.he .btn.lead:hover .arw { transform: scaleX(-1) translateX(4px); }

/* The account chip.

   These rules lived in the landing page's own stylesheet, because that was the
   only page with a chip on it. Putting the chip on all six pages without them
   meant the profile and the store rendered a raw 128px avatar with the name
   and SIGN OUT stacked underneath it, which is the mess at the top right. */
header #acct { display: flex; align-items: center; gap: 9px; }
header .acct-in {
  display: flex; align-items: center; gap: 9px; padding: 5px 12px 5px 6px;
  border: 1px solid var(--sw-card-edge); border-radius: 6px; background: var(--sw-card);
}
/* the chip's place, kept while the account is being asked for: a name
   arriving late pushed every link in the bar sideways */
header .acct-in.acct-wait { width: 124px; height: 38px; padding: 0; border-color: var(--sw-edge);
  background: var(--sw-block); animation: swpulse 1.6s ease-in-out infinite; }
header .acct-in img {
  width: 26px; height: 26px; border-radius: 50%; flex: none; background: #1a2536;
  object-fit: cover;
}
header .acct-in b {
  font: 600 13.5px/1.2 var(--sw-face); max-width: 150px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
header .acct-in .tag {
  font: 700 11px/1 var(--sw-face); letter-spacing: .04em;
  padding: 3px 6px; border-radius: 4px;
}
header .tag.yes { background: rgba(63,191,106,.18); color: #8df0bb; border: 1px solid rgba(63,191,106,.45); }
header .tag.no  { background: rgba(230,57,74,.14); color: #ff9aa2; border: 1px solid rgba(230,57,74,.4); }
header .tag.streamer { background: rgba(155,89,255,.16); color: #d2b8ff; border: 1px solid rgba(155,89,255,.45); cursor: pointer; }
header .tag.streamer:hover, header .tag.streamer:focus-visible { background: rgba(155,89,255,.32); color: #fff; outline: none; }
/* the monospace tag has no Hebrew: a Hebrew tag takes the site's own face */
html.he header .acct-in .tag { font: 700 11px/1 "Rubik", "Heebo", system-ui, sans-serif; letter-spacing: 0; padding: 3px 7px; }
header .acct-out {
  color: var(--dim); font-size: 13px; cursor: pointer; background: none; border: 0;
  padding: 4px 2px; font-family: inherit; white-space: nowrap;
}
header .acct-out:hover { color: var(--ink); }
@media (max-width: 900px) { header .acct-in b { display: none; } header .acct-in.acct-wait { width: 40px; } }

/* Both words fit, so pressing it does not shuffle everything beside it. */
.langsw { min-width: 84px; text-align: center; }
/* The two ends of the bar stay where they are in every language (the owner,
   2026-09-30): the mark on the left never moves, and Play on the right holds
   the width of its longest word (Играть), so its edge does not either; the
   language button holds its longest name (Français) beside it. Set here
   rather than measured, so nothing shifts after the page has drawn. The
   words between them may move a little when the language changes. */
@media (min-width: 901px) {
  header .nav a#playbtn { min-width: 108px; }
  header .nav button#langsw.swlangbtn { min-width: 128px; }
}
/* A narrower bar still has to hold the longest language (French and Russian
   run widest) without spilling: closer together, the language as its flag
   and code (the full names are in its list), the Beta mark folded, then the
   account's name shortened and folded, and Live as its dot. */
@media (max-width: 1599px) and (min-width: 901px) {
  header .nav { gap: 14px; }
  html:root header a.brand .beta-mark { display: none; }
  header .nav button#langsw.swlangbtn { min-width: 64px; }
  header .nav button#langsw.swlangbtn span { display: none; }
  header .nav button#langsw.swlangbtn::after { content: attr(data-short); font: 600 12.5px/1 var(--sw-face); }
}
@media (max-width: 1439px) and (min-width: 901px) { header .acct-in b { max-width: 80px; } }
@media (max-width: 1365px) and (min-width: 901px) {
  header .nav { gap: 11px; }
  header .acct-in b { display: none; }
  html:root header a.onair span { display: none; }
}
/* The bar's own two buttons, sized here and nowhere else. Every page has a
   .btn rule of its own for its own buttons, and each one restyled the bar's
   Play button a little differently, so the whole row of links stood a few
   pixels to one side on the store and a few to the other on the desk, and
   the bar jumped between pages. These outrank a page's single class. */
/* With fallbacks for every variable: a page that names its green --go and
   not --green made the shorthand invalid, the border fell away, and the
   button was two pixels narrower there than anywhere else. */
header .nav a#playbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: auto; padding: 11px 20px; border-radius: 6px; box-sizing: border-box;
  font: 700 15px/1 var(--sw-face); letter-spacing: 0;
  background: var(--sw-go); color: var(--sw-go-ink); border: 1px solid var(--sw-go); white-space: nowrap;
}
header .nav a#playbtn:hover { background: var(--sw-go2); border-color: var(--sw-go2); color: var(--sw-go-ink); filter: none; }
header .nav button#langsw {
  flex: none; background: var(--sw-card); border: 1px solid var(--sw-card-edge); color: var(--sw-card-ink);
  font: 600 13px/1.2 var(--sw-face); padding: 7px 12px; border-radius: 6px; box-sizing: border-box;
  cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
header .nav button#langsw:hover { color: #e9effc; border-color: var(--sw-card-edge-hi); background: var(--sw-card-hi); }

@media (max-width: 900px) { .nav a.l { display: none; } }
/* The named bot's switch (the store's "Your name" card, the profile's
   inventory; prefs.js draws it): the settings page's switch, and its words. */
.nbrow { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line2, #27364d); text-align: start; }
.nbrow .sw { position: relative; flex: none; width: 52px; height: 30px; margin: 0; padding: 0; cursor: pointer;
  border: 1px solid #3a4a66; border-radius: 6px; background: #1b2740; transition: background .16s, border-color .16s; }
.nbrow .sw i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 4px; background: #c9d4e6; transition: transform .16s, background .16s; }
.nbrow .sw:hover { border-color: #4a5f86; }
.nbrow .sw.on { background: #3ad98a; border-color: #3ad98a; }
.nbrow .sw.on i { transform: translateX(22px); background: #fff; }
.nbrow .sw:focus-visible { outline: 2px solid #8df0bb; outline-offset: 2px; }
.nbrow .sw[aria-busy="true"] { opacity: .6; cursor: progress; }
.nbrow .nbt { min-width: 0; }
/* a card's own title rule (one line, cut short) is not the switch's */
.nbrow #nbl { white-space: normal; overflow: visible; text-overflow: clip; }
.nbrow .nbt b { display: block; font-size: 14.5px; line-height: 1.35; font-weight: 600; color: var(--ink, #e9effc); }
.nbrow .nbt small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--dim, #8a9bb9); }
@media (prefers-reduced-motion: reduce) { .nbrow .sw, .nbrow .sw i { transition: none; } }
/* An unread release (nav.js): a small solid dot in the site's green, set
   beside the word rather than in its line, so nothing moves when it comes or
   goes. The bar is left to right in either language, so it is the right. */
header .nav a.l.hasnew, header .navmenu.hasnew { position: relative; }
.newsdot { display: block; width: 7px; height: 7px; border-radius: 50%; background: #3ad98a; pointer-events: none; flex: none; }
header .nav a.l .newsdot { position: absolute; top: 3px; right: -9px; }
header .navmenu .newsdot { position: absolute; top: 5px; right: 5px; }
.navsheet a.ns .newsdot { margin-inline-start: 10px; }
/* the phone's menu: one button in the bar, a sheet of pages under it */
.navmenu { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 6px;
  border: 1px solid var(--line2); background: transparent; color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; flex: none; }
.navsheet { display: none; position: absolute; left: 0; right: 0; top: 64px; z-index: 60; flex-direction: column; padding: 8px 14px 12px;
  background: var(--bg2, #0f1726); border-bottom: 1px solid var(--line2); box-shadow: 0 12px 24px rgba(0,0,0,.4); }
.navsheet a.ns { display: flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: 6px; color: var(--body);
  font-size: 16px; font-weight: 600; text-decoration: none; }
.navsheet a.ns.on { color: var(--ink); background: var(--sw-panel2); }
.navsheet a.ns:active { background: rgba(255,255,255,.06); }
html.he .navsheet a.ns { font-family: "Rubik", "Heebo", system-ui, sans-serif; }
@media (max-width: 900px) {
  .navmenu { display: inline-flex; }
  .navsheet.on { display: flex; }
  header { position: relative; }
  header .nav { gap: 10px; padding: 0 14px; }
}
/* a narrow phone: the mark alone, the account as its avatar, the language as
   two letters, so the bar never runs past the edge */
@media (max-width: 520px) {
  header .nav { gap: 7px; padding: 0 10px; }
  html:root header a.brand span { display: none; }
  header .acct-out, header .acct-in .tag { display: none; }
  header .acct-in { gap: 0; }
  header .langsw { padding: 0 8px; min-width: 0; font-size: 12px; }
  header #playbtn { padding: 0 12px; }
  /* Live is its dot alone, in the same 24px tag */
  html:root header a.onair span { display: none; }
  html:root header a.onair { width: 24px; padding: 0; gap: 0; }
  html:root header a.onair i { width: 9px; height: 9px; }
  /* The row ran 12px past a 390px phone: the language was cut to "Engli" in
     Hebrew and to "רית" in English, and Play went off the edge. The language
     is its short name here, and everything in the row is a little tighter. */
  header .nav { gap: 5px; }
  header .navmenu { width: 36px; height: 36px; }
  header .acct-in { padding: 5px 6px; }
  header .nav button#langsw[data-short] { font-size: 0; padding: 0 7px; height: 34px; }
  header .nav button#langsw[data-short]::after { content: attr(data-short); font: 600 12.5px/1 var(--sw-face); }
  header .nav a#playbtn { padding: 10px 11px; font-size: 14px; }
}
/* the narrowest phones: Live is the first row of the menu sheet anyway */
@media (max-width: 380px) { html:root header a.onair { display: none; } }

/* One short cross-fade between pages, and nothing else.

   The header was a named transition element to begin with, which sounded
   right: the same bar carried across the navigation. What it actually did was
   hold the outgoing bar and the incoming bar on screen at once and blend them,
   so for a fifth of a second you got both sets of words on top of each other,
   the account chip half-drawn twice, and links you could not read. The bar is
   identical on every page now and painted in the right language before the
   page is shown, so a plain fade of the whole page leaves it looking still --
   which is what was wanted -- with nothing doubled. */
@view-transition { navigation: none; }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: .14s; }

/* The bar out of the fade (the owner: moving between pages looked like the
   whole bar reloading). Named on its own, but never blended: the old bar is
   dropped and the new one stands at once, still, while the page under it
   fades -- the doubled words the first named bar made came from blending
   the two, which this does not do. */
header { view-transition-name: swbar; }
::view-transition-group(swbar) { animation: none; }
::view-transition-old(swbar) { display: none; }
::view-transition-new(swbar) { animation: none; }

/* And the same softness for browsers that have no view transitions. */
@keyframes navin { from { opacity: 0; transform: translateY(5px); } }
html.novt main { animation: none; }
@media (prefers-reduced-motion: reduce) {
  html.novt main { animation: none; }
}

/* Quicker to the hand, on every page.

   A tap on a phone used to wait to see whether it was the first half of a
   double-tap, and then flash grey; a button gives nothing under the finger
   until the page had answered. The wait is refused up front, the flash is
   gone, and a pressed button sinks a pixel the moment it is pressed. */
a, button, input, select, textarea, label, .btn, [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button:active, .btn:active, [role="button"]:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) {
  button:active, .btn:active, [role="button"]:active { transform: none; }
}

/* The release label beside the wordmark ("Beta version", also in Hebrew) is
   drawn with Live, above: one tag for both. */

/* ---------------------------------------------------------------- the site, calmer
   Tabs are the game's cards in a row, the current one in the card's green
   (they were words with a line under them until 2026-09-26, when the game's
   war room and settings put on the menu's cards); a section head is a heading
   with a hairline, not a green gradient bar; sliders wear the site's green.
   Here, a step heavier than each page's own rule (body ...), so one place
   sets the look of every page. */
body .setnav,body .helpnav .wrap{gap:6px}
body .setnav{padding:8px 0 10px}
body .helpnav .wrap{padding-top:8px;padding-bottom:10px}
body .setnav a,body .helpnav a{padding:0 13px;border:1px solid var(--sw-card-edge);border-radius:6px;
  background:var(--sw-card);color:var(--sw-card-ink);font-weight:600;box-shadow:none;
  transition:background .12s,border-color .12s,color .12s}
body .setnav a:hover,body .helpnav a:hover{background:var(--sw-card-hi);color:#e9effc;border-color:var(--sw-card-edge-hi)}
body .setnav a.on,body .helpnav a.on{background:var(--sw-chosen);color:var(--sw-chosen-ink);border-color:var(--sw-chosen-edge)}
body .setnav a.on:hover,body .helpnav a.on:hover{background:var(--sw-chosen-hi)}
body .setsec{margin:36px 0 12px;padding:0 0 10px;background:none;border:0;border-bottom:1px solid var(--line,rgba(255,255,255,.08));
  border-radius:0;font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--ink,#e9effc)}
body .setsec:first-child{margin-top:12px}
body input[type=range]{accent-color:var(--sw-go)}

/* A fold's head is a card too: the head of the profile's war log, and any
   <details> a page adds later. */
body details > summary { background: var(--sw-card); transition: background .12s, color .12s; }
body details > summary:hover { background: var(--sw-card-hi); }

/* ------------------------------------------------------ where the keyboard is
   Every control on the site shows a plain light ring when it is reached by
   the keyboard (and only then: a mouse click draws nothing). Some pages had
   none at all, and a few had a gold one. */
:is(a, button, summary, [role="button"], [role="switch"], [role="radio"], [tabindex]):focus-visible {
  outline: 1px solid rgba(233,239,252,.55); outline-offset: 2px;
}
/* a field being typed in: its own border a shade lighter, no ring */
:is(input, select, textarea):focus, :is(input, select, textarea):focus-visible { outline: none; }
:is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea):focus { border-color: #4d6388 !important; }

/* ---------------------------------------------------- a reading page's head
   Settings, Help and News open the same way: the page's name, large, and a
   line or two on what is on it, kept to a readable width. */
.pagehead { padding: 48px 0 26px; }
.pagehead h1 { margin: 0 0 10px; font: 700 clamp(30px, 4vw, 40px)/1.15 var(--sw-face); letter-spacing: -.01em; color: #e9effc; }
.pagehead p { margin: 0; max-width: 62ch; font-size: 16.5px; line-height: 1.6; color: #a3b2cc; }
@media (max-width: 560px) { .pagehead { padding: 28px 0 18px; } .pagehead p { font-size: 15.5px; } }

/* The tabs under a reading page's head (Settings' groups, Help's topics),
   stuck under the bar. On a phone they are one row that scrolls sideways,
   each tab a thumb's height, rather than three wrapped rows eating the top
   of the screen. */
body .setnav a, body .helpnav a { display: inline-flex; align-items: center; min-height: 36px; }
@media (max-width: 760px) {
  body .setnav, body .helpnav .wrap { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  body .setnav::-webkit-scrollbar, body .helpnav .wrap::-webkit-scrollbar { display: none; }
  body .setnav a, body .helpnav a { min-height: 44px; white-space: nowrap; }
}