/* chobotsblog.net - the Chobots "Cosmic Stage", the language of profile.chobots.net and the
   finances page: a navy-to-royal starfield in Space and a daytime sky in Light; bank
   glass panels (radius 22, a 3px rim, an inset ring) with a coloured head band and an icon disc;
   glossy 3D buttons with a hard lip; frosted chips that go gold when chosen.

   Type: LT Crow ("ChoUiDisplay") for names, headings, buttons; LT Wave ("ChoUiText") for body text.
   Both ship from /static/fonts (SIL OFL, notices beside them).

   Tokens are Space-first on :root, Light under :root[data-theme="light"]. That choice is the
   READER's (the theme dock, a cookie). What a WRITER chooses for their blog sits on top of it and
   reads in both:
     <html data-accent>   the band colour, and --accent (on the dark page) / --accent-ink (on white)
     <html data-top>      banner | plain | poster | split
     <html data-cards>    classic | flat | paper | neon | sticker
     .hero-art.art-<key>  the picture behind the blog's name
   Every value is a key from src/design.mjs. Nothing a writer types reaches this file. */

@font-face { font-family: "ChoUiDisplay"; src: url("../fonts/LTCrow-ExtraBold.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "ChoUiText"; src: url("../fonts/LTWave-Medium.woff2") format("woff2"); font-weight: 100 500; font-style: normal; font-display: swap; }
@font-face { font-family: "ChoUiText"; src: url("../fonts/LTWave-Bold.woff2") format("woff2"); font-weight: 600 900; font-style: normal; font-display: swap; }

/* ==== Tokens: Space (default) ================================================================ */
:root {
  color-scheme: dark;
  --display: "ChoUiDisplay", "Arial Black", "Trebuchet MS", sans-serif;
  --font-text: "ChoUiText", "Century Gothic", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;

  --accent: #24bdff;
  --accent-ink: #0b6fb0;
  --accent-text: var(--accent);

  --stars:
    radial-gradient(1px 1px at 23px 41px, #ffffff 50%, transparent 100%) 0 0 / 233px 241px,
    radial-gradient(1px 1px at 131px 17px, #bfe6ff 50%, transparent 100%) 0 0 / 233px 241px,
    radial-gradient(1px 1px at 77px 152px, #ffe9b8 50%, transparent 100%) 0 0 / 233px 241px,
    radial-gradient(1px 1px at 189px 98px, #ffffff 50%, transparent 100%) 0 0 / 233px 241px,
    radial-gradient(1px 1px at 52px 211px, #bfe6ff 50%, transparent 100%) 0 0 / 233px 241px,
    radial-gradient(1.6px 1.6px at 61px 83px, #ffffff 50%, transparent 100%) 0 0 / 373px 389px,
    radial-gradient(2px 2px at 287px 41px, #ffe9b8 50%, transparent 100%) 0 0 / 373px 389px,
    radial-gradient(1.4px 1.4px at 179px 259px, #bfe6ff 50%, transparent 100%) 0 0 / 373px 389px,
    radial-gradient(2.2px 2.2px at 331px 301px, #ffffff 50%, transparent 100%) 0 0 / 373px 389px;
  --sky: linear-gradient(180deg, #04071c 0%, #0b1d45 55%, #164a9a 100%);
  --page-bg: var(--stars), var(--sky);

  --text: #f8fbff;
  --heading: #ffffff;
  --muted: #a9ccec;
  --heading-shadow: 0 3px 0 rgba(6, 36, 94, 0.85), 0 0 22px rgba(95, 190, 254, 0.45);

  --panel-bg:
    radial-gradient(circle at 18% 0%, rgba(32, 180, 255, 0.15), transparent 34%),
    radial-gradient(circle at 88% 6%, rgba(255, 136, 0, 0.09), transparent 30%),
    rgba(4, 19, 45, 0.88);
  --panel-rim: rgba(92, 204, 255, 0.5);
  --panel-ring: rgba(255, 255, 255, 0.06);
  --panel-line: rgba(92, 204, 255, 0.22);
  --panel-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
  --band-top: #1454b6;
  --band-bottom: #082d79;
  --band-ink: #ffffff;
  --band-shadow: rgba(6, 36, 94, 0.9);
  --disc: radial-gradient(circle at 35% 28%, #2f78dc 0%, #0d3780 62%, #082a66 100%);
  --disc-edge: rgba(121, 192, 255, 0.75);
  --tile-bg: rgba(9, 35, 69, 0.76);
  --tile-bg-hi: rgba(16, 52, 98, 0.88);
  --tile-edge: rgba(92, 204, 255, 0.22);
  --plate-bg: rgba(4, 16, 44, 0.72);
  --plate-edge: rgba(255, 255, 255, 0.2);
  --hero-rim: rgba(92, 204, 255, 0.55);

  --chip-bg: rgba(6, 16, 48, 0.62);
  --chip-bg-hi: rgba(20, 40, 90, 0.82);
  --chip-edge: rgba(255, 255, 255, 0.24);
  --chip-ink: #ffffff;
  --grad-gold: linear-gradient(180deg, #ffe27a 0%, #ffb300 55%, #e08a00 100%);
  --gold-lip: #9c5a00;
  --field-bg: rgba(4, 16, 44, 0.7);

  --green: #55dd82;
  --warn: #ffb35c;
  --danger: #ff8f7d;
  --focus-ring: #ffffff;
  --focus-halo: #ffd84d;
  --stage-ray: rgba(255, 222, 130, 0.26);

  /* Paint on a post's words: eight colours a writer picks by name (story.mjs, INKS). Each has two
     shades, said once, here: -d reads on a panel with light ink, -l on a panel with dark ink.
     --ink-<name> is the one a word wears where it is. This stage has light ink, so here it is
     -d; every other block that gives a panel its own --text as a colour says its side on one
     line of eight. A panel of a writer's own colour gets its eight from /look.css (design.mjs,
     paintRoles). test/units.test.mjs holds every block to 4.5:1 on its own panels and tiles. */
  --ink-red-d: #ff8478;    --ink-red-l: #ba241c;
  --ink-orange-d: #ffa53d; --ink-orange-l: #9c4800;
  --ink-gold-d: #ffd23f;   --ink-gold-l: #845700;
  --ink-green-d: #5fdc7c;  --ink-green-l: #126f35;
  --ink-teal-d: #4fded6;   --ink-teal-l: #0a6b6b;
  --ink-blue-d: #4fb8ff;   --ink-blue-l: #0a62ac;
  --ink-purple-d: #be9bff; --ink-purple-l: #6a35c9;
  --ink-pink-d: #ff85c4;   --ink-pink-l: #af2872;
  --ink-red: var(--ink-red-d); --ink-orange: var(--ink-orange-d); --ink-gold: var(--ink-gold-d); --ink-green: var(--ink-green-d); --ink-teal: var(--ink-teal-d); --ink-blue: var(--ink-blue-d); --ink-purple: var(--ink-purple-d); --ink-pink: var(--ink-pink-d);
  /* The tone of the see-through "No panels" wash, for an edge round a painted word there. */
  --ink-halo: #040a20;

  --radius: 14px;
  --radius-lg: 22px;
  /* Our own faces come in one upright cut each. A bold that is not there is not faked (a smeared
     letter), but a slant is: without it *italic* in a post, and every "font-style: italic" of
     ours, showed as nothing at all (a tester: "italics doesn't seem to work for me"). */
  font-synthesis: style;
}

/* ==== Tokens: Light (the same stage on a daytime sky, white glass) =========================== */
:root[data-theme="light"] {
  color-scheme: light;
  --accent-text: var(--accent-ink);
  --sky: linear-gradient(180deg, #3f97e4 0%, #6cb9f2 28%, #a6dbff 62%, #def3ff 100%);
  --page-bg: var(--sky);

  --text: #0b1d45;
  --heading: #0b1d45;
  --muted: #3b4f7a;
  --heading-shadow: 0 2px 0 rgba(255, 255, 255, 0.8);

  --panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(244, 249, 255, 0.97) 100%);
  --panel-rim: #2a62c9;
  --panel-ring: #a9d8ff;
  --panel-line: rgba(31, 63, 143, 0.16);
  --panel-shadow: 0 16px 36px rgba(12, 60, 140, 0.22);
  --band-top: #3477c8;
  --band-bottom: #1a55b8;
  --band-shadow: rgba(23, 64, 143, 0.9);
  --disc: radial-gradient(circle at 35% 28%, #6fb6ff 0%, #2a74de 60%, #1f5bb8 100%);
  --disc-edge: #ffffff;
  --tile-bg: #f1f6ff;
  --tile-bg-hi: #e4efff;
  --tile-edge: rgba(31, 63, 143, 0.16);
  --plate-bg: rgba(255, 255, 255, 0.92);
  --plate-edge: rgba(42, 98, 201, 0.35);
  --hero-rim: #2a62c9;

  --chip-bg: rgba(255, 255, 255, 0.86);
  --chip-bg-hi: #ffffff;
  --chip-edge: rgba(31, 63, 143, 0.24);
  --chip-ink: #17377f;
  --field-bg: #ffffff;

  --green: #137a3c;
  --warn: #9a4a00;
  --danger: #b3261e;
  --focus-ring: #0b1d45;
  --stage-ray: rgba(255, 255, 255, 0.5);

  --ink-red: var(--ink-red-l); --ink-orange: var(--ink-orange-l); --ink-gold: var(--ink-gold-l); --ink-green: var(--ink-green-l); --ink-teal: var(--ink-teal-l); --ink-blue: var(--ink-blue-l); --ink-purple: var(--ink-purple-l); --ink-pink: var(--ink-pink-l);
  --ink-halo: #ffffff;
}

/* ==== The writer's accent: the band, and the same hue as text on each page ===================
   Blue is the tokens above. Every other accent paints one band for both themes and sets
   --accent / --accent-ink for links and chosen things. Small words sit on a band (a free blog's
   top line, the foot of every blog), so its ink clears 4.5:1 from the band's top to its bottom:
   white on most, a dark ink on gold and orange. test/units.test.mjs holds them to it. */
:root[data-accent="green"]  { --accent: #6fe38a; --accent-ink: #137a3c; --band-top: #22883c; --band-bottom: #116a29; --band-shadow: rgba(8, 58, 22, 0.9);  --disc: radial-gradient(circle at 35% 28%, #5fd67c 0%, #1c8a39 62%, #0f5f25 100%); }
:root[data-accent="orange"] { --accent: #ffb35c; --accent-ink: #a34b00; --band-top: #f08a1c; --band-bottom: #cd680a; --band-ink: #2e1600; --band-shadow: rgba(255, 255, 255, 0.45); --disc: radial-gradient(circle at 35% 28%, #ffb866 0%, #dc7410 62%, #a34b00 100%); }
:root[data-accent="pink"]   { --accent: #ff9ccf; --accent-ink: #a8266d; --band-top: #c24a89; --band-bottom: #a52a6c; --band-shadow: rgba(96, 16, 58, 0.9);  --disc: radial-gradient(circle at 35% 28%, #ff9ccf 0%, #cf3f8b 62%, #8f1f5c 100%); }
:root[data-accent="purple"] { --accent: #c9a8ff; --accent-ink: #5b2bb5; --band-top: #8a55e0; --band-bottom: #5226a8; --band-shadow: rgba(44, 16, 100, 0.9); --disc: radial-gradient(circle at 35% 28%, #b792ff 0%, #6f3bd0 62%, #46209a 100%); }
:root[data-accent="red"]    { --accent: #ff9a8c; --accent-ink: #b3261e; --band-top: #ce4939; --band-bottom: #a3231a; --band-shadow: rgba(96, 14, 8, 0.9);   --disc: radial-gradient(circle at 35% 28%, #ff8f7d 0%, #cf3a2a 62%, #8f1c13 100%); }
:root[data-accent="gold"]   { --accent: #ffd65a; --accent-ink: #8a5a00; --band-top: #ffd24a; --band-bottom: #e09a00; --band-ink: #3a2500; --band-shadow: rgba(255, 255, 255, 0.5); --disc: radial-gradient(circle at 35% 28%, #fff0a8 0%, #f0b21a 62%, #b97a00 100%); }
:root[data-accent="teal"]   { --accent: #6fe6e0; --accent-ink: #0a6f6f; --band-top: #128484; --band-bottom: #0b6b6b; --band-shadow: rgba(4, 60, 60, 0.9);   --disc: radial-gradient(circle at 35% 28%, #6fe6e0 0%, #129090 62%, #086060 100%); }

/* ==== Base =================================================================================== */
/* The first thing a keyboard meets on every page: past the header and the menus, to the page
   itself. Out of sight until it is reached. */
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: #ffffff; color: #0b1d45; font: 800 16px/1.2 var(--display); text-decoration: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); }
.skip-link:focus { top: 12px; outline: 3px solid #ffc640; outline-offset: 2px; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  background: var(--page-bg); background-attachment: fixed; color: var(--text);
  font-family: var(--font-text); font-weight: 500; font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
a { color: var(--accent-text); }
p { margin: 0 0 12px; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 7px var(--focus-halo); }
[hidden] { display: none !important; }

/* The sky's extra rides a fixed layer under the content: a nebula in Space. Light is its gradient
   alone (the second layer is kept for a blog's pattern, looks.css). */
/* Clipped, not scrolled ("clip"; "hidden" for a browser without it): a shell that could scroll
   would be what the look studio's preview sticks to, and it never does, so the preview slid
   away with the page instead of staying beside the controls. */
.site-shell { position: relative; min-height: 100vh; overflow: hidden; overflow: clip; padding-bottom: 24px; }
.site-shell > * { position: relative; z-index: 1; }
.site-shell::before, .site-shell::after { content: ""; position: fixed; z-index: 0; pointer-events: none; }
.site-shell::before {
  inset: -10%; mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 36% 28% at 22% 30%, rgba(43, 208, 255, 0.16), transparent 70%),
    radial-gradient(ellipse 40% 30% at 78% 22%, rgba(122, 92, 255, 0.16), transparent 70%),
    radial-gradient(ellipse 60% 24% at 50% 80%, rgba(43, 208, 255, 0.12), transparent 70%);
  animation: nebula 120s ease-in-out infinite alternate;
}
.site-shell::after { inset: 0; display: none; }
:root[data-theme="light"] .site-shell::before { display: none; }
@keyframes nebula { to { transform: translate3d(3%, -2%, 0) scale(1.06); } }
@keyframes spin { to { transform: translate(-50%, 40%) rotate(360deg); } }

.wrap { width: min(100% - 24px, 1135px); margin: 0 auto; }
.narrow { max-width: 760px; margin: 0 auto; }
.columns { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; margin-top: 20px; }
.meta { color: var(--muted); font-size: 0.92rem; font-weight: 700; }
.empty { margin: 0; color: var(--muted); font-style: italic; }
small { display: block; margin-top: 6px; color: var(--muted); font-size: 0.88rem; font-weight: 500; }

/* ==== Header: the glass pill of tabs, Play Now, the account ================================== */
.site-header { width: min(100% - 24px, 1135px); margin: 0 auto 16px; padding: 12px 0 0; }
.header-inner {
  display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 7px 8px;
  background: rgba(7, 34, 82, 0.88); border: 1px solid rgba(126, 218, 255, 0.2); border-radius: 17px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 34px rgba(0, 0, 0, 0.32);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
:root[data-theme="light"] .header-inner {
  background: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 12px 30px rgba(0, 70, 145, 0.18);
}
.main-nav { display: flex; flex: 0 1 520px; gap: 2px; min-width: 0; }
.main-nav a {
  display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; min-height: 44px;
  padding: 13px 17px 12px; color: #d8f5ff; font: 800 16px/1 var(--display); letter-spacing: 0.01em;
  white-space: nowrap; text-decoration: none; border: 1px solid transparent; border-radius: 11px;
  transition: background 140ms ease, color 140ms ease;
}
.main-nav a:hover { color: #ffffff; background: rgba(28, 102, 184, 0.62); }
.main-nav a.active { color: #093166; background: linear-gradient(180deg, #cbf2ff, #7cd2ff); }
:root[data-theme="light"] .main-nav a { color: #0b5cad; }
:root[data-theme="light"] .main-nav a:hover { color: #0a4f96; background: rgba(221, 242, 255, 0.82); }
:root[data-theme="light"] .main-nav a.active {
  color: #093166; text-shadow: none;
  background: linear-gradient(180deg, #b6e5ff 0%, #82c7ef 42%, #5faee4 100%); border-color: rgba(255, 255, 255, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 4px 10px rgba(25, 119, 190, 0.18);
}
.header-side { display: inline-flex; flex: 0 0 auto; gap: 8px; align-items: center; }
.play-cta {
  display: inline-flex; align-items: center; min-height: 38px; padding: 9px 22px 8px; color: #06390f;
  font: 800 16px/1 var(--display); white-space: nowrap; text-decoration: none; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 45%), linear-gradient(180deg, #69f94a 0%, #20df54 58%, #09b94d 100%);
  border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 3px 0 rgba(0, 123, 57, 0.2), 0 8px 14px rgba(0, 86, 158, 0.15);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.play-cta:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 3px 0 rgba(0, 123, 57, 0.2), 0 12px 20px rgba(0, 86, 158, 0.22); }
.account { display: inline-flex; gap: 8px; align-items: center; margin: 0; }
.account-name { font: 800 15px/1 var(--display); color: var(--heading); padding-left: 6px; }


/* The Light / Space switch: a frosted pill at the end of every page. It used to float in the
   bottom right corner of the screen, and lay on whatever reached that corner: the studio's Save
   button on a tablet, the last of the tips beside a post being written, the end of a row on the
   desk. It is chosen once; it does not need to be in the way to be found. */
.theme-dock {
  position: relative; z-index: 2; display: flex; width: fit-content; margin: 18px auto 0; gap: 2px; padding: 4px;
  border-radius: 999px; background: var(--chip-bg); border: 1.5px solid var(--chip-edge);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.theme-dock a, .theme-dock .on { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; font: 800 13px/1 var(--display); text-decoration: none; color: var(--chip-ink); }
.theme-dock a:hover { background: var(--chip-bg-hi); }
.theme-dock .on { background: var(--grad-gold); color: #3a2500; box-shadow: 0 2px 0 var(--gold-lip); }

/* ==== Buttons, chips, fields ================================================================= */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.45em;
  min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  background: var(--chip-bg); border: 1.5px solid var(--chip-edge); color: var(--chip-ink);
  font: 800 15px/1 var(--display); letter-spacing: 0.02em; text-decoration: none; white-space: nowrap;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform 0.15s, background 0.15s, box-shadow 0.15s, filter 0.15s;
}
:root[data-theme="light"] .btn { box-shadow: 0 5px 12px rgba(12, 60, 140, 0.18), inset 0 1px 0 #ffffff; }
.btn:hover { transform: translateY(-2px); background: var(--chip-bg-hi); }
.btn.primary, .btn.danger {
  border: 0; color: #ffffff; padding: 0 22px;
  --b-hi: #6ad23d; --b-mid: #23861a; --b-lo: #1b6e14; --b-sh: #124a0b;
  background: linear-gradient(180deg, var(--b-hi) 0%, var(--b-mid) 52%, var(--b-lo) 100%);
  text-shadow: 0 2px 0 var(--b-sh), 0 -1px 0 var(--b-sh), 1px 0 0 var(--b-sh), -1px 0 0 var(--b-sh);
  box-shadow: 0 4px 0 var(--b-sh), 0 9px 16px rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.btn.danger { --b-hi: #ff8a6b; --b-mid: #cf3d24; --b-lo: #ad2b18; --b-sh: #6e1608; }
.btn.primary::before, .btn.danger::before {
  content: ""; position: absolute; left: 7%; right: 7%; top: 8%; height: 40%;
  border-radius: 999px 999px 40% 40% / 999px 999px 60% 60%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.04)); pointer-events: none;
}
.btn.primary > *, .btn.danger > * { position: relative; }
.btn.primary:hover, .btn.danger:hover { background: linear-gradient(180deg, var(--b-hi) 0%, var(--b-mid) 52%, var(--b-lo) 100%); filter: brightness(1.06); }
.btn.primary:active, .btn.danger:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--b-sh), 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.55); }
.btn.chosen { background: var(--grad-gold); border-color: rgba(255, 255, 255, 0.8); color: #3a2500; box-shadow: 0 4px 0 var(--gold-lip), 0 9px 16px rgba(0, 0, 0, 0.3); -webkit-backdrop-filter: none; backdrop-filter: none; }
.btn.ghost { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.btn.ghost:hover { background: var(--chip-bg); }
.btn.small { min-height: 36px; padding: 0 14px; font-size: 13px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; }
.back { margin: 0 0 12px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.chip {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 13px; border-radius: 999px;
  background: var(--chip-bg); border: 1.5px solid var(--chip-edge); color: var(--chip-ink);
  font: 800 13px/1 var(--display); letter-spacing: 0.02em; text-decoration: none; white-space: nowrap;
}
a.chip:hover { background: var(--chip-bg-hi); }
.chip.gold { background: var(--grad-gold); border-color: rgba(255, 255, 255, 0.8); color: #3a2500; box-shadow: 0 2px 0 var(--gold-lip); }
.chip.warn { color: var(--warn); border-color: currentColor; }

.field {
  display: block; width: 100%; margin-top: 6px; padding: 11px 14px; border: 1.5px solid var(--chip-edge); border-radius: 14px;
  background: var(--field-bg); color: var(--text); font: 500 16px/1.45 var(--font-text);
}
.field::placeholder { color: var(--muted); opacity: 1; }
textarea.field { min-height: 110px; resize: vertical; }
.field:focus-visible { border-color: var(--accent-text); }
.form { margin: 0; }
.form label { display: block; margin-bottom: 16px; font: 800 15px/1.3 var(--display); color: var(--heading); }
.form select { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; border-radius: 14px; border: 1.5px solid var(--chip-edge); background: var(--field-bg); color: var(--text); font: 500 16px/1.3 var(--font-text); }
.form .address { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 700 16px/1.2 var(--font-text); color: var(--muted); }
.form .address .field { flex: 1 1 8em; min-width: 0; margin-top: 6px; border-radius: 999px; padding-left: 18px; }
.form .address > span { min-width: 0; overflow-wrap: anywhere; }
.form label.check { display: flex; gap: 10px; align-items: center; font: 700 16px/1.3 var(--font-text); color: var(--text); }
.form label.check input { width: 20px; height: 20px; accent-color: var(--accent-text); }
.help { margin-bottom: 16px; color: var(--muted); }
.help summary { cursor: pointer; font-weight: 800; color: var(--accent-text); }
.help code { padding: 1px 6px; border-radius: 6px; background: var(--tile-bg); border: 1px solid var(--tile-edge); color: var(--text); }

.notice { margin: 0 0 16px; padding: 12px 16px; border-radius: var(--radius); background: var(--tile-bg-hi); border: 1.5px solid var(--tile-edge); font-weight: 700; }
.notice.error { border-color: var(--danger); color: var(--danger); }
/* A refusal's way to Help (render.mjs, helpLink): the notice's own colour, underlined. */
.notice .notice-help { color: inherit; text-decoration: underline; white-space: nowrap; }
.notice.ok { border-color: var(--green); color: var(--green); }

/* ==== Panels: bank glass with a head band and an icon disc ==================================== */
.panel {
  position: relative; overflow: hidden; border-radius: var(--radius-lg); margin: 0 0 20px;
  background: var(--panel-bg); border: 3px solid var(--panel-rim);
  box-shadow: var(--panel-shadow), inset 0 0 0 2px var(--panel-ring);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.band {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  min-height: 58px; padding: 8px 16px 8px 9px; color: var(--band-ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, var(--band-top) 0%, var(--band-bottom) 100%);
  border-bottom: 1px solid var(--panel-line);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18), inset 0 -2px 0 rgba(0, 0, 0, 0.14);
}
.band h1, .band h2 { margin: 0; flex: 1 1 4em; min-width: 0; font: 800 clamp(19px, 2vw, 23px)/1.15 var(--display); letter-spacing: 0.01em; color: inherit; text-shadow: 0 2px 0 var(--band-shadow); overflow-wrap: anywhere; }
/* (At full strength: it is small, and at 88% it fell under 4.5:1 on the lighter bands.) */
.band-note { font: 700 15px/1.2 var(--font-text); white-space: nowrap; }
.disc { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--disc); box-shadow: inset 0 0 0 2px var(--disc-edge), 0 3px 8px rgba(0, 0, 0, 0.35); }
.disc svg { width: 22px; height: 22px; color: #ffffff; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.panel-body { padding: clamp(14px, 2vw, 22px); }
.panel-body > :last-child { margin-bottom: 0; }

.tile { display: block; padding: 14px 16px; margin: 0 0 12px; border-radius: var(--radius); background: var(--tile-bg); border: 1.5px solid var(--tile-edge); color: var(--text); text-decoration: none; }
.tile > :last-child { margin-bottom: 0; }
a.tile { transition: transform 0.15s, background 0.15s; }
a.tile:hover { background: var(--tile-bg-hi); transform: translateY(-2px); }
/* (A title that is one long word breaks where it must: it ran out of its tile and over the next.) */
.post-tile h3 { margin: 0 0 4px; font: 800 20px/1.2 var(--display); overflow-wrap: anywhere; }
.post-tile h3 a { color: var(--heading); text-decoration: none; }
.post-tile h3 a:hover { color: var(--accent-text); }
.post-tile .meta { margin-bottom: 8px; }
.excerpt { margin: 0; overflow-wrap: anywhere; }
.blog-tile strong { display: block; font: 800 18px/1.2 var(--display); color: var(--heading); }
.blog-tile .meta, .blog-tile .excerpt { display: block; margin-top: 4px; }
.tile.row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.row-title { font: 800 18px/1.2 var(--display); color: var(--heading); text-decoration: none; overflow-wrap: anywhere; }
.tile.row .chips { margin: 8px 0 0; }

/* ==== The front door: a Chobot on its stage beside the invitation ============================ */
.landing-card { display: grid; grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr); min-height: 420px; }
.landing-scene {
  position: relative; display: grid; place-items: end center; overflow: hidden; min-height: 420px;
  background: var(--stars), radial-gradient(ellipse 60% 50% at 50% 30%, rgba(95, 190, 254, 0.35), transparent 70%), linear-gradient(180deg, #071233 0%, #0e2a63 60%, #1a54a8 100%);
}
:root[data-theme="light"] .landing-scene {
  background:
    radial-gradient(ellipse 30% 12% at 20% 20%, rgba(255, 255, 255, 0.9), transparent 70%),
    radial-gradient(ellipse 30% 12% at 76% 34%, rgba(255, 255, 255, 0.85), transparent 70%),
    linear-gradient(180deg, #3f97e4 0%, #6cb9f2 50%, #b4e0ff 100%);
}
.landing-scene::before {
  content: ""; position: absolute; left: 50%; bottom: 40px; width: 520px; aspect-ratio: 1; transform: translate(-50%, 40%); border-radius: 50%;
  background: repeating-conic-gradient(from 4deg, transparent 0deg 9deg, var(--stage-ray) 9deg 15deg, transparent 15deg 21deg, var(--stage-ray) 21deg 24deg, transparent 24deg 30deg);
  -webkit-mask-image: radial-gradient(circle closest-side, #000000 0, #000000 24%, rgba(0, 0, 0, 0.55) 52%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000000 0, #000000 24%, rgba(0, 0, 0, 0.55) 52%, transparent 100%);
  animation: spin 90s linear infinite;
}
.landing-character { position: relative; z-index: 1; width: min(64%, 250px); margin-bottom: 56px; filter: drop-shadow(0 20px 16px rgba(0, 31, 85, 0.4)); }
.landing-sticker {
  position: absolute; right: 24px; bottom: 24px; z-index: 2; padding: 9px 16px; color: #0b1d45;
  border: 2px solid rgba(255, 255, 255, 0.8); border-radius: 16px; background: var(--grad-gold);
  box-shadow: 0 4px 0 var(--gold-lip), 0 10px 20px rgba(0, 0, 0, 0.3); font: 800 16px/1.2 var(--display); transform: rotate(-2deg);
}
.landing { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 6vw, 64px); }
.landing h1 { margin: 0 0 0.6rem; font: 800 clamp(36px, 5vw, 56px)/1.04 var(--display); color: var(--heading); text-shadow: var(--heading-shadow); }
.landing p { margin: 0 0 24px; max-width: 46ch; color: var(--muted); font-size: 1.05rem; }
.landing .btn { min-height: 48px; }

/* ==== A blog: its name on a plate over its picture =========================================== */
.hero {
  position: relative; display: flex; align-items: flex-end; min-height: 300px; margin: 0 0 20px; padding: 20px; overflow: hidden;
  border-radius: var(--radius-lg); border: 3px solid var(--hero-rim); box-shadow: var(--panel-shadow), inset 0 0 0 2px var(--panel-ring);
}
.hero-art { position: absolute; inset: 0; background-size: cover; background-position: center; }
/* Text never sits straight on a scene: the name rides a plate. */
.plate {
  position: relative; max-width: min(100%, 640px); padding: 16px 20px; border-radius: 18px;
  background: var(--plate-bg); border: 1.5px solid var(--plate-edge);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.plate h1 { margin: 0; font: 800 clamp(30px, 4.6vw, 48px)/1.05 var(--display); color: var(--heading); text-shadow: var(--heading-shadow); overflow-wrap: anywhere; }
.plate h1 a { color: inherit; text-decoration: none; }
/* On the smallest phones a word of eleven letters did not fit the plate at 30px, and was cut in two. */
@media (max-width: 400px) { :root:root .blog-zone .plate h1 { font-size: 26px; } }
/* (A newspaper's name is its masthead: narrow lettering, and nothing beside it. It stays larger than its own headlines.) */
@media (max-width: 400px) { :root:root[data-layout="newspaper"] .blog-zone .hero:not(.with-self, .with-mascot, .with-crew) .plate h1 { font-size: 34px; } }
/* A name with a very long word in it (render.mjs, nameClass) is written smaller, so the word fits a
   line and is not cut in two. The size is set on the words inside the heading, as a part of
   whatever size the look gives the heading itself. */
/* (The heading keeps its own size, so its lines would stand as far apart as before: they are drawn in to match.) */
.plate h1.name-long { line-height: 0.92; }
.plate h1.name-longer { line-height: 0.74; }
.plate h1.name-longest { line-height: 0.62; }
.plate h1.name-long a { font-size: 0.82em; }       /* a word of 13 to 15 letters */
.plate h1.name-longer a { font-size: 0.64em; }     /* 16 to 19 */
.plate h1.name-longest a { font-size: 0.5em; }     /* 20 and more */
@media (max-width: 720px) {
  .plate h1.name-long a { font-size: 0.74em; }
  .plate h1.name-longer a { font-size: 0.52em; }
}
/* Half and half, the name has half the header to itself. */
@media (min-width: 861px) {
  :root[data-top="split"] .plate h1.name-long a { font-size: 0.7em; }
  :root[data-top="split"] .plate h1.name-longer a { font-size: 0.54em; }
  :root[data-top="split"] .plate h1.name-longest a { font-size: 0.42em; }
}
.tagline { margin: 8px 0 0; color: var(--muted); font-size: 1.05rem; font-weight: 700; overflow-wrap: anywhere; }
.plate .chips { margin: 14px 0 0; }

:root[data-top="plain"] .hero { min-height: 0; padding: 0; border: 0; box-shadow: none; overflow: visible; }
:root[data-top="plain"] .hero-art { display: none; }
:root[data-top="plain"] .plate { max-width: none; width: 100%; }
:root[data-top="poster"] .hero { min-height: 440px; align-items: center; justify-content: center; text-align: center; }
:root[data-top="poster"] .plate .chips { justify-content: center; }
:root[data-top="split"] .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; padding: 0; min-height: 320px; }
/* (Where the name stands is a banner's to say. Half and half, each half fills its side whatever that
   setting was left at: "in the middle" used to shrink the picture's half to nothing.) */
:root:root[data-top="split"] .hero { align-items: stretch; justify-content: normal; }
:root[data-top="split"] .hero-art { position: relative; inset: auto; order: 2; }
:root[data-top="split"] .plate { display: flex; flex-direction: column; justify-content: center; max-width: none; border: 0; border-radius: 0; padding: clamp(20px, 4vw, 40px); }

/* The pictures. Drawn skies are free; rooms of the game come with a Cosmonaut Pass. The picker's
   swatches (.swatch.art-<key>) reuse the same rules. */
.art-stars  { background: var(--stars), radial-gradient(ellipse 60% 60% at 70% 20%, rgba(122, 92, 255, 0.4), transparent 70%), linear-gradient(180deg, #04071c 0%, #0b1d45 55%, #164a9a 100%); }
.art-sky    { background: radial-gradient(ellipse 24% 12% at 18% 28%, rgba(255, 255, 255, 0.9), transparent 70%), radial-gradient(ellipse 30% 14% at 72% 44%, rgba(255, 255, 255, 0.85), transparent 70%), radial-gradient(circle at 88% 12%, #fff6c8 0, rgba(255, 244, 200, 0.4) 8%, transparent 18%), linear-gradient(180deg, #3f97e4 0%, #6cb9f2 50%, #b4e0ff 100%); }
.art-sunset { background: radial-gradient(circle at 50% 100%, #fff1a8 0, #ffb347 18%, transparent 46%), linear-gradient(180deg, #2a1a5e 0%, #8a2f7b 38%, #f0603c 72%, #ffb347 100%); }
.art-meadow { background: radial-gradient(ellipse 70% 46% at 22% 112%, #3fae48 0 62%, transparent 63%), radial-gradient(ellipse 80% 52% at 82% 118%, #2f9a3c 0 62%, transparent 63%), radial-gradient(ellipse 26% 12% at 70% 26%, rgba(255, 255, 255, 0.9), transparent 70%), linear-gradient(180deg, #58b4f2 0%, #bfe8ff 100%); }
.art-ocean  { background: repeating-radial-gradient(ellipse 120% 40% at 50% 130%, rgba(255, 255, 255, 0.16) 0 6px, transparent 6px 34px), linear-gradient(180deg, #7fd6f5 0%, #1aa3d8 42%, #0b5fa8 100%); }
.art-candy  { background: repeating-linear-gradient(135deg, #ff8cc0 0 26px, #ffd3e8 26px 52px, #8fe0ff 52px 78px, #fff3a8 78px 104px); }
.art-square  { background-image: url("../img/rooms2/loc0.webp"); }
.art-cafe    { background-image: url("../img/rooms2/locCafe.webp"); }
.art-academy { background-image: url("../img/rooms2/locAcademy.webp"); }
.art-stage   { background-image: url("../img/rooms2/locMusicStage.webp"); }
.art-cinema  { background-image: url("../img/rooms2/locCinema.webp"); }
.art-beach   { background-image: url("../img/rooms2/locBeach.webp"); }
.art-park    { background-image: url("../img/rooms2/locPark.webp"); }

.blog-body { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
.post .meta { margin-bottom: 16px; }
.story { font-size: 1.06rem; line-height: 1.65; overflow-wrap: anywhere; }
.story :is(h2, h3, h4, h5, h6) { margin: 1.4em 0 0.4em; font: 800 22px/1.2 var(--display); color: var(--heading); }
.story ul { padding-left: 1.3em; }
.story li::marker { color: var(--accent-text); }
/* An address of one of our own sites written in the words is a link (story.mjs, ownAddresses):
   the panel's link ink, underlined, so it is a link whatever its colour. In paint or under the
   highlighter it keeps the ink it is written in, which is made to be read there. In a table it
   may break anywhere, as the story's words do, so one long address does not widen its column. */
.story a.cho-link { text-decoration-line: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.16em; }
.story :is(.cho-ink, .cho-mark) a.cho-link { color: inherit; }
.story .cho-table a.cho-link { overflow-wrap: anywhere; }
/* A table in a post (story.mjs): in a box of its own, which slides sideways when the table is
   wider than the page, so the page never does. Its edges and its heading row are the panel's own
   tile colours, as a card's are, and its words the panel's ink: they are set with every --text
   a look gives a panel. Its words wrap at spaces and never inside a word (the story's own
   "anywhere" would squeeze a column to one letter rather than let the box slide). */
.story .cho-table { max-width: 100%; overflow-x: auto; margin: 6px 0 18px; border-radius: var(--radius); border: 1.5px solid var(--tile-edge); background: var(--tile-bg); }
.story .cho-table table { min-width: 100%; border-collapse: collapse; font-size: 0.96em; line-height: 1.45; overflow-wrap: normal; }
.story .cho-table :is(th, td) { min-width: 3em; height: calc(1.45em + 16px); padding: 8px 12px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--tile-edge); }
.story .cho-table :is(th, td) + :is(th, td) { border-inline-start: 1px solid var(--tile-edge); }
/* A cell of more than a few words keeps its column wide enough for a few a line (story.mjs, tableHtml). */
.story .cho-table .cho-long { min-width: 11em; }
.story .cho-table th { background: var(--tile-bg-hi); color: var(--heading); font-weight: 800; }
.story .cho-table tbody tr:last-child td { border-bottom: 0; }
/* Paint on words: a colour by its name, and the highlighter (story.mjs). A name is all a writer
   gives. The panel the word is in says which shade of it the word wears (--ink-<name>, set with
   every --text), so no painted word can be the colour of what it is written on. The post
   editor's dots wear the same classes (looks.css). */
:is(.story, .editor-bar) .cho-ink-red { color: var(--ink-red); }
:is(.story, .editor-bar) .cho-ink-orange { color: var(--ink-orange); }
:is(.story, .editor-bar) .cho-ink-gold { color: var(--ink-gold); }
:is(.story, .editor-bar) .cho-ink-green { color: var(--ink-green); }
:is(.story, .editor-bar) .cho-ink-teal { color: var(--ink-teal); }
:is(.story, .editor-bar) .cho-ink-blue { color: var(--ink-blue); }
:is(.story, .editor-bar) .cho-ink-purple { color: var(--ink-purple); }
:is(.story, .editor-bar) .cho-ink-pink { color: var(--ink-pink); }
/* The highlighter is the same yellow under the same dark ink on every panel (14 to 1), so it has
   no shades. Each line of a highlighted passage gets its own rounded ends. */
:is(.story, .editor-bar) .cho-mark { padding: 0.08em 0.22em; margin: 0 -0.04em; border-radius: 0.3em 0.18em 0.34em 0.2em; background: #ffe45c; color: #1c1300; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* A reader whose system chooses the colours gets every word in the system's ink: readable, and
   no longer coloured. The highlighter keeps a highlight, the system's own. */
@media (forced-colors: active) { .story .cho-mark { background: Mark; color: MarkText; forced-color-adjust: none; } }
.stat-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.stat { color: var(--muted); font-weight: 700; }
.stat strong { display: block; font: 800 34px/1 var(--display); color: var(--heading); }
.writer-name { margin: 0 0 10px; font: 800 22px/1.1 var(--display); color: var(--heading); }
.report { margin: 0 0 20px; color: var(--muted); font-size: 0.92rem; font-weight: 700; }
.report summary { cursor: pointer; }
.report form { margin-top: 10px; padding: 14px; border-radius: var(--radius); background: var(--tile-bg); border: 1.5px solid var(--tile-edge); }

/* A card in a post: a player, a room, an item, a mood. The game art for these comes later. */
.cho-card { display: inline-flex; gap: 10px; align-items: center; margin: 4px 0 14px; padding: 6px 16px 6px 8px; border-radius: 999px; background: var(--tile-bg-hi); border: 1.5px solid var(--tile-edge); }
.cho-card-kind { padding: 5px 10px; border-radius: 999px; background: linear-gradient(180deg, var(--band-top), var(--band-bottom)); color: var(--band-ink); font: 800 12px/1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; }
.cho-card-value { font: 800 16px/1 var(--display); color: var(--heading); }

/* ==== The writer's panel style =============================================================== */
:root[data-cards="flat"] .panel, :root[data-cards="flat"] .hero { border-width: 1.5px; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-cards="neon"] .panel, :root[data-cards="neon"] .hero {
  border-color: color-mix(in srgb, var(--accent-text) 80%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-text) 36%, transparent), 0 0 26px color-mix(in srgb, var(--accent-text) 34%, transparent), var(--panel-shadow);
}
:root[data-cards="sticker"] .panel, :root[data-cards="sticker"] .hero {
  border-width: 4px; border-radius: 26px; border-color: color-mix(in srgb, var(--accent-text) 66%, #ffffff);
  box-shadow: 8px 8px 0 color-mix(in srgb, var(--accent-text) 36%, transparent), var(--panel-shadow);
}
/* Paper turns every panel into a light scrapbook page in BOTH themes by re-declaring the surface
   tokens on the panel: everything inside already paints from them. */
:root[data-cards="paper"] .blog-body .panel, :root[data-cards="paper"] .plate, :root[data-cards="paper"] .blog-foot, :root[data-cards="paper"] .blog-body .pager {
  --panel-bg: #fffdf7; --panel-rim: rgba(18, 37, 80, 0.22); --panel-ring: rgba(255, 255, 255, 0.9); --panel-line: rgba(18, 37, 80, 0.14);
  --tile-bg: #f4ecdd; --tile-bg-hi: #efe3cd; --tile-edge: rgba(18, 37, 80, 0.16);
  --plate-bg: #fffdf7; --plate-edge: rgba(18, 37, 80, 0.22);
  --chip-bg: #ffffff; --chip-bg-hi: #fbf6ea; --chip-edge: rgba(18, 37, 80, 0.22); --chip-ink: #16305e;
  --field-bg: #ffffff; --text: #122550; --heading: #0d2450; --heading-shadow: none; --muted: #475e83;
  --accent-text: var(--accent-ink); --green: #167f45; --warn: #a34b00; --danger: #b3261e; --focus-ring: #0b1d45;
  --ink-red: var(--ink-red-l); --ink-orange: var(--ink-orange-l); --ink-gold: var(--ink-gold-l); --ink-green: var(--ink-green-l); --ink-teal: var(--ink-teal-l); --ink-blue: var(--ink-blue-l); --ink-purple: var(--ink-purple-l); --ink-pink: var(--ink-pink-l);
  color: #122550;
}

/* ==== The look pickers: chips with a preview that go gold when chosen ======================== */
.picker { margin: 0 0 18px; padding: 0; border: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.picker legend { padding: 0; margin-bottom: 10px; font: 800 15px/1.3 var(--display); color: var(--heading); }
.form .picker .choice {
  position: relative; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 8px; cursor: pointer;
  border-radius: var(--radius); background: var(--tile-bg); border: 2px solid var(--tile-edge);
  font: 800 13px/1.2 var(--display); color: var(--chip-ink);
}
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* (Said twice: the rule above names three classes, and would otherwise have the last word over
   these, which is how the chosen tile of every dial in the studio came to look like the rest.) */
.choice:hover, .form .picker .choice:hover { background: var(--tile-bg-hi); }
.choice:has(input:checked), .form .picker .choice:has(input:checked) { background: var(--grad-gold); border-color: rgba(255, 255, 255, 0.85); color: #3a2500; box-shadow: 0 3px 0 var(--gold-lip); }
.choice:has(input:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 7px var(--focus-halo); }
.choice.locked { cursor: default; opacity: 0.72; }
.lock { align-self: flex-start; padding: 3px 8px; border-radius: 999px; background: var(--grad-gold); color: #3a2500; font-size: 11px; }
.swatch { display: block; height: 54px; border-radius: 10px; background-size: cover; background-position: center; border: 1.5px solid rgba(255, 255, 255, 0.5); background-color: var(--tile-bg-hi); }
.swatch.accent-blue   { background: linear-gradient(180deg, #3477c8, #1a55b8); }
.swatch.accent-green  { background: linear-gradient(180deg, #22883c, #116a29); }
.swatch.accent-orange { background: linear-gradient(180deg, #f08a1c, #cd680a); }
.swatch.accent-pink   { background: linear-gradient(180deg, #c24a89, #a52a6c); }
.swatch.accent-purple { background: linear-gradient(180deg, #8a55e0, #5226a8); }
.swatch.accent-red    { background: linear-gradient(180deg, #ce4939, #a3231a); }
.swatch.accent-gold   { background: linear-gradient(180deg, #ffd24a, #e09a00); }
.swatch.accent-teal   { background: linear-gradient(180deg, #128484, #0b6b6b); }
.picker-accent .swatch, .picker-top .swatch, .picker-cards .swatch { height: 34px; }
.swatch.top-banner  { background: linear-gradient(0deg, var(--tile-bg-hi) 0 30%, transparent 30%), linear-gradient(180deg, #3d8ae8, #1a55b8); }
.swatch.top-plain   { background: linear-gradient(180deg, transparent 0 35%, var(--muted) 35% 65%, transparent 65%) center / 60% 100% no-repeat, var(--tile-bg-hi); }
.swatch.top-poster  { background: radial-gradient(ellipse 40% 34% at 50% 50%, var(--tile-bg-hi) 0 99%, transparent 100%), linear-gradient(180deg, #3d8ae8, #1a55b8); }
.swatch.top-split   { background: linear-gradient(90deg, var(--tile-bg-hi) 0 50%, #3d8ae8 50%); }
.swatch.cards-classic { background: #0b2a55; border: 3px solid #5cccff; }
.swatch.cards-flat    { background: #0b2a55; border: 1.5px solid #5cccff; }
.swatch.cards-paper   { background: #fffdf7; border: 2px solid rgba(18, 37, 80, 0.3); }
.swatch.cards-neon    { background: #0b2a55; border: 2px solid #24bdff; box-shadow: 0 0 12px #24bdff; }
.swatch.cards-sticker { background: #0b2a55; border: 4px solid #a8e1ff; box-shadow: 4px 4px 0 rgba(36, 189, 255, 0.5); }

/* ==== Responsive ============================================================================= */
@media (max-width: 860px) {
  .columns, .blog-body { grid-template-columns: minmax(0, 1fr); }
  .landing-card { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .landing-scene { min-height: 260px; }
  .landing-character { width: 170px; margin-bottom: 28px; }
  :root[data-top="split"] .hero { grid-template-columns: minmax(0, 1fr); }
  :root[data-top="split"] .hero-art { min-height: 180px; order: 0; }
}
@media (max-width: 720px) {
  /* The pill becomes two rows: the tabs scroll sideways under Play Now and the account. */
  .header-inner { flex-wrap: wrap; }
  .header-side { order: 1; width: 100%; justify-content: space-between; }
  .main-nav { order: 2; flex: 1 1 100%; overflow-x: auto; }
  .main-nav a { flex: 0 0 auto; padding: 12px 14px; font-size: 15px; }
  .hero { min-height: 220px; padding: 12px; }
  :root[data-top="poster"] .hero { min-height: 300px; }
}

/* ==== Motion: the visitor's reduced-motion setting always wins =============================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn:hover, a.tile:hover, .play-cta:hover { transform: none; }
}
@media print { .theme-dock, .site-header { display: none; } }

/* ==== The mark of Chobots Blogs: the quill on its blot of ink (public/img/site/quill.png) =====
   On a pale seal with a gold rim, so the ink reads in Space as well as in Light. */
.brand { display: inline-flex; flex: none; gap: 9px; align-items: center; padding: 2px 10px 2px 3px; border-radius: 13px; color: #ffffff; font: 800 18px/1 var(--display); letter-spacing: 0.01em; white-space: nowrap; text-decoration: none; }
.brand img { width: 40px; height: 40px; padding: 5px; object-fit: contain; border-radius: 50%; background: radial-gradient(circle at 38% 30%, #ffffff 0%, #dbe6ff 68%, #b6c9f2 100%); box-shadow: 0 0 0 2px #f2c14e, 0 3px 8px rgba(0, 0, 0, 0.3); transition: transform 160ms ease; }
.brand:hover img { transform: rotate(-10deg) scale(1.06); }
/* The badge beside the word, wherever "Journalist" is a chip: on a blog's name, a writer's card. */
.chip-badge { flex: none; width: 15px; height: 18px; margin: 0 6px 0 -3px; object-fit: contain; }
:root[data-theme="light"] .brand { color: #0b1d45; }
.brand + .main-nav { margin-right: auto; }
@media (max-width: 1020px) { .brand span { display: none; } .brand { padding-right: 3px; } }
@media (max-width: 720px) { .brand { order: 0; } .brand + .main-nav { margin-right: 0; } .header-side { width: auto; flex: 1 1 auto; justify-content: flex-end; } }

/* ==== Scrollbars ==============================================================================
   The main site's own: a glossy blue pill on the night sky, or on the daytime one in Light. A
   blog can match it or choose another (<html data-scroll>, themes.css), and every one is drawn
   from the same few variables. "plain" must match no ::-webkit-scrollbar rule at all, or the
   browser stops drawing its own. Firefox takes two colours and a width and nothing else. */
:root {
  --sb-size: 14px; --sb-gap: 3px; --sb-radius: 999px;
  --sb-thumb: linear-gradient(180deg, #8ad9ff 0%, #2f86e6 55%, #1f66c8 100%); --sb-track: #06173a;
  --sb-ff-thumb: #4aa8f0; --sb-ff-track: #06173a; --sb-ff-width: auto;
}
:root[data-theme="light"] { --sb-thumb: linear-gradient(180deg, #8fd0fb 0%, #3f8fe6 55%, #2a6fd0 100%); --sb-track: #cfe6fb; --sb-ff-thumb: #3f8fe0; --sb-ff-track: #cfe6fb; }
:root:not([data-scroll="plain"])::-webkit-scrollbar, :root:not([data-scroll="plain"]) ::-webkit-scrollbar { width: var(--sb-size); height: var(--sb-size); }
:root:not([data-scroll="plain"])::-webkit-scrollbar-track, :root:not([data-scroll="plain"]) ::-webkit-scrollbar-track,
:root:not([data-scroll="plain"])::-webkit-scrollbar-corner, :root:not([data-scroll="plain"]) ::-webkit-scrollbar-corner { background: var(--sb-track); }
:root:not([data-scroll="plain"])::-webkit-scrollbar-thumb, :root:not([data-scroll="plain"]) ::-webkit-scrollbar-thumb {
  background: var(--sb-thumb); background-clip: padding-box; border: var(--sb-gap) solid transparent; border-radius: var(--sb-radius); min-height: 44px;
}
@supports not selector(::-webkit-scrollbar) {
  :root:not([data-scroll="plain"]) { scrollbar-color: var(--sb-ff-thumb) var(--sb-ff-track); scrollbar-width: var(--sb-ff-width); }
}

/* ==== The foot of the main site ================================================================
   A glass panel like the rest: the mark and what this place is on one side, three short lists
   of pages on the other, and a few of the game's characters standing on its top edge. */
.site-foot { position: relative; width: min(100% - 24px, 1135px); margin: 96px auto 0; }
.foot-cast { position: absolute; z-index: 2; right: 34px; bottom: calc(100% - 9px); display: flex; gap: 2px; align-items: flex-end; pointer-events: none; }
.foot-cast img { display: block; width: auto; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.35)); }
.foot-cast-1 { height: 62px; }
.foot-cast-2 { height: 84px; }
.foot-cast-3 { height: 74px; }
.foot-cast-4 { height: 54px; }
.foot-panel {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 20px 40px; padding: 28px clamp(18px, 3vw, 34px) 26px; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--panel-bg); border: 3px solid var(--panel-rim); border-top: 6px solid var(--band-top);
  box-shadow: var(--panel-shadow), inset 0 0 0 2px var(--panel-ring); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.foot-panel::after { content: ""; position: absolute; right: -30px; bottom: -60px; width: 190px; height: 215px; pointer-events: none; background: url("../img/site/quill.png") center / contain no-repeat; opacity: 0.07; transform: rotate(14deg); }
:root[data-theme="light"] .foot-panel::after { opacity: 0.05; }
.foot-brand .brand { padding-left: 0; color: var(--heading); font-size: 22px; }
.foot-brand .brand span { display: inline; }
.foot-brand .brand img { width: 48px; height: 48px; padding: 6px; }
.foot-brand p { margin: 12px 0 0; max-width: 40ch; color: var(--muted); font-weight: 700; }
.foot-brand .actions { margin-top: 16px; }
.foot-nav { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 24px; align-content: start; }
.foot-col h2 { margin: 6px 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--panel-line); font: 800 13px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.foot-col a { color: var(--text); font-weight: 700; text-decoration: none; }
.foot-col a:hover { color: var(--accent-text); text-decoration: underline; }
.foot-line { margin: 14px 0 0; text-align: center; color: var(--muted); font-size: 0.88rem; font-weight: 700; }
.foot-line a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.foot-line a:hover { color: var(--accent-text); }
@media (max-width: 760px) {
  .site-foot { margin-top: 78px; }
  .foot-panel { grid-template-columns: minmax(0, 1fr); }
  .foot-cast { right: 18px; transform: scale(0.8); transform-origin: bottom right; }
}
@media (max-width: 460px) { .foot-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media print { .foot-cast { display: none; } }

/* ==== Closed to the public (server.js MAINTENANCE) ============================================
   The strip across the top of every page for those who are let in while the place is closed:
   the Chobots team and invited testers. Painted from literals, so no blog's look changes it. */
.closed-flag { margin: 0; padding: 7px 14px; background: repeating-linear-gradient(135deg, #ffd24a 0 18px, #f2b21a 18px 36px); color: #2b1c00; font: 800 13px/1.3 "ChoUiDisplay", "Arial Black", sans-serif; letter-spacing: 0.02em; text-align: center; }
:root[data-preview] .closed-flag { display: none; }
@media print { .closed-flag { display: none; } }

/* ==== "From the Chobots team" (render.mjs, toldFlag) ==========================================
   The line across the top of every page, the main site's and a blog's, for the one account the
   team has something new to tell: all of it is the way to their own page of it. Painted from
   literals, as the closed strip is, so no blog's look changes it. Tall enough for a thumb. */
.told-flag { margin: 0; background: #0d3f96; border-bottom: 2px solid #ffd24a; font: 800 14px/1.3 "ChoUiDisplay", "Arial Black", sans-serif; letter-spacing: 0.01em; text-align: center; }
.told-flag a { display: block; padding: 13px 14px; color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
.told-flag a:hover { background: #1250bb; }
.told-flag a:focus-visible { outline: 3px solid #ffd24a; outline-offset: -3px; }
/* (All that is new is good news, a post of theirs put in the spotlight: in the spotlight's gold.) */
.told-flag.good { background: linear-gradient(180deg, #fff1b0, #ffd24a 60%, #f2b21a); border-bottom-color: #c98d1b; }
.told-flag.good a { color: #2b1a00; }
.told-flag.good a:hover { background: rgba(255, 255, 255, 0.35); }
.told-flag.good a:focus-visible { outline-color: #0d3f96; }
:root[data-preview] .told-flag { display: none; }
@media print { .told-flag { display: none; } }

/* ==== A space banner: the Chobots blog's starfield, with its rider flying out of the frame ====
   .space-scene is the sky (public/img/site/space.webp) and clips what is in it: a sun, shooting
   stars, asteroids. .space-rider is its neighbour, not its child, so she can cross its edge;
   whatever holds the two places her. All of it is the Chobots blog's own banner art. */
.space-scene { position: relative; overflow: hidden; background: #061027 url("../img/site/space.webp") center 30% / cover; }
.space-scene::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--sun-x, 13%) var(--sun-y, 30%), rgba(255, 251, 220, 0.96) 0, rgba(255, 244, 190, 0.9) 3%, rgba(255, 228, 140, 0.4) 7%, rgba(255, 220, 120, 0.12) 15%, transparent 26%);
}
.space-rock { position: absolute; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.35)); }
.space-rock-1 { left: -24px; bottom: 10%; width: 108px; animation: space-drift 18s ease-in-out infinite; }
.space-rock-2 { left: 40%; top: 12%; width: 50px; animation: space-bob 9s ease-in-out infinite; }
.space-rock-3 { left: 30%; bottom: 14%; width: 38px; animation: space-bob 11s ease-in-out 600ms infinite reverse; }
.space-shoot { position: absolute; width: 110px; height: 2px; border-radius: 2px; opacity: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9)); filter: drop-shadow(0 0 4px rgba(180, 220, 255, 0.8)); }
.space-shoot-a { top: 14%; left: 64%; animation: space-shoot 13s linear 2s infinite; }
.space-shoot-b { top: 8%; left: 34%; width: 80px; animation: space-shoot 21s linear 9s infinite; }
.space-rider { position: absolute; z-index: 2; height: auto; max-width: none; pointer-events: none; filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.4)); animation: space-ride 7s ease-in-out infinite; }
@keyframes space-shoot { 0%, 94% { opacity: 0; transform: translate(0, 0) rotate(-26deg); } 95% { opacity: 1; } 100% { opacity: 0; transform: translate(-260px, 130px) rotate(-26deg); } }
@keyframes space-drift { 50% { transform: translate(14px, -10px) rotate(8deg); } }
@keyframes space-bob { 50% { transform: translateY(-9px) rotate(-6deg); } }
@keyframes space-ride { 0%, 100% { transform: translate(0, 0) rotate(-1.5deg); } 50% { transform: translate(-8px, -12px) rotate(1.5deg); } }

/* ==== Languages ================================================================================
   The menu in the foot of every page (src/i18n.mjs): each language by its own name. And a
   blog's own flag: on its name plate as a chip, on its card as a corner. Painted from literals,
   since the menu also sits on blogs, whatever their page colour. */
.flag { flex: none; display: inline-block; width: 21px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28); vertical-align: -2px; }
.lang-menu { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; justify-content: center; margin: 14px 0 0; }
.lang-menu a, .lang-menu .on { display: inline-flex; gap: 7px; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(4, 10, 32, 0.66); border: 1.5px solid rgba(255, 255, 255, 0.24); color: #ffffff; font: 800 13px/1 "ChoUiDisplay", "Arial Black", sans-serif; text-decoration: none; }
.lang-menu a:hover { background: rgba(20, 40, 90, 0.9); }
.lang-menu .on { background: linear-gradient(180deg, #ffe27a 0%, #ffb300 55%, #e08a00 100%); border-color: rgba(255, 255, 255, 0.8); color: #3a2500; }
.lang-chip { gap: 7px; }
.lang-chip .flag { margin-left: -3px; }
.card-flag { position: absolute; z-index: 1; top: 8px; left: 8px; display: block; line-height: 0; }
.card-flag .flag { width: 24px; height: 16px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85), 0 2px 5px rgba(0, 0, 0, 0.4); }
.lang-filter .chip { gap: 7px; }
@media print { .lang-menu { display: none; } }

/* The language to read in, at the top of every page: the one in use, the others behind it. */
.lang-pick { position: relative; flex: none; }
.lang-pick > summary { display: inline-flex; gap: 7px; align-items: center; min-height: 34px; padding: 0 11px; border-radius: 999px; cursor: pointer; list-style: none; background: rgba(4, 10, 32, 0.5); border: 1.5px solid rgba(255, 255, 255, 0.28); color: #ffffff; font: 800 13px/1 "ChoUiDisplay", "Arial Black", sans-serif; }
.lang-pick > summary::-webkit-details-marker { display: none; }
.lang-pick > summary::after { content: ""; width: 6px; height: 6px; margin-left: 1px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.lang-pick[open] > summary { background: rgba(20, 40, 90, 0.92); }
:root[data-theme="light"] .site-header .lang-pick > summary { background: rgba(255, 255, 255, 0.9); border-color: rgba(31, 63, 143, 0.28); color: #17377f; }
.lang-pick-list { position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; display: grid; gap: 4px; min-width: 210px; padding: 8px; border-radius: 14px; background: #061633; border: 1.5px solid rgba(126, 218, 255, 0.4); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5); }
.lang-pick-list a, .lang-pick-list .on { display: flex; gap: 9px; align-items: center; min-height: 36px; padding: 0 11px; border-radius: 9px; color: #ffffff; font: 800 14px/1 "ChoUiDisplay", "Arial Black", sans-serif; text-decoration: none; white-space: nowrap; }
.lang-pick-list a:hover { background: rgba(60, 130, 220, 0.4); }
.lang-pick-list .on { background: linear-gradient(180deg, #ffe27a 0%, #ffb300 55%, #e08a00 100%); color: #3a2500; }
/* A blog in a language that has no flag of its own shows the language's code on its card. */
.card-lang { padding: 3px 6px; border-radius: 4px; background: rgba(4, 10, 32, 0.78); border: 1.5px solid rgba(255, 255, 255, 0.85); color: #ffffff; font: 800 11px/1 "ChoUiDisplay", "Arial Black", sans-serif; letter-spacing: 0.04em; line-height: 1; }
/* A blog written right to left: each paragraph of its writer's words takes its own direction. */
.blog-zone:is(:lang(ar), :lang(he), :lang(fa), :lang(ur)) :is(.story p, .story li, .story h2, .story h3, .story h4, .excerpt, .comment-body, .tagline, .post-tile h3, .plate h1, .band h2) { unicode-bidi: plaintext; text-align: start; }
@media (max-width: 720px) { .lang-pick-list { right: auto; left: 0; } }
@media print { .lang-pick { display: none; } }
/* The top of the page sits above what follows it, so the language list opens over the page and
   not behind it (every child of .site-shell is otherwise on one level, and a later one wins). */
.site-shell > .site-header, .site-shell > .platform-bar { z-index: 30; }

/* With a language switch beside Play Now there is no room for the tabs on the same row long before
   a phone's width (they slid under it): from here down the header is two rows, the tabs under. */
@media (max-width: 940px) {
  .header-inner { flex-wrap: wrap; }
  .brand { order: 0; }
  .brand + .main-nav { margin-right: 0; }
  .header-side { order: 1; flex: 1 1 auto; width: auto; justify-content: flex-end; }
  .main-nav { order: 2; flex: 1 1 100%; overflow-x: auto; }
}
/* Wider than that it is one row while one row holds it. A fifth tab (the team's), a long name or
   a language of longer words can ask for more than there is: the tabs draw in first, and if that
   is not enough the language, Play Now and the account go to a row of their own. (They slid over
   the last tab.) */
@media (min-width: 941px) {
  .header-inner { flex-wrap: wrap; row-gap: 6px; }
  .main-nav { flex: 1 1 auto; max-width: 520px; min-width: min-content; }
  .header-side { margin-left: auto; }
}
@media (min-width: 941px) and (max-width: 1140px) { .main-nav a { padding-left: 10px; padding-right: 10px; } }
/* A name is as long as its Chobot made it: past a point it is cut short with three dots. */
.account { min-width: 0; max-width: 100%; }
.account-name { min-width: 0; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }
/* On a phone the row beside the mark holds the language, Play Now and, signed in, a name and
   Sign out: more than a phone is wide (Sign out ran off the edge, and further with a longer
   name). So that row folds: the language and Play Now stay beside the mark, the account goes
   under them at the right. And the tabs fold into two rows before one of them is out of sight. */
@media (max-width: 720px) {
  .header-side { flex: 1 1 0; min-width: 0; flex-wrap: wrap; gap: 6px 8px; justify-content: flex-start; }
  .header-side > :last-child { margin-left: auto; }
}
@media (max-width: 480px) {
  .main-nav { flex-wrap: wrap; overflow-x: visible; }
  .main-nav a { flex: 1 1 auto; padding: 11px 9px; font-size: 14px; }
}
/* A chip holds a name or an address, and some are longer than a phone is wide: it folds onto a
   second line before it runs out of the box it is in. */
.chip { max-width: 100%; padding-top: 4px; padding-bottom: 4px; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }
/* A number in a chip (how many posts wear a label) stands apart from the word: the chip is a row,
   and a row drops the space between its parts ("history3"). */
.chip > .meta { margin-left: 6px; }
/* A button that cannot be pressed looks it: "Up" on the first of a list was drawn like "Edit". */
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: default; box-shadow: none; filter: none; }
.btn:disabled:hover, .btn[aria-disabled="true"]:hover { transform: none; filter: none; }
.btn:not(.primary, .danger):disabled:hover { background: var(--chip-bg); }
/* So does a button: its words are longer in some languages than a small phone is wide ("Sieh dir
   an, was andere gemacht haben"), and it pushed the words above it out of the page with it. */
.btn { max-width: 100%; padding-top: 6px; padding-bottom: 6px; line-height: 1.15; white-space: normal; text-align: center; }
.account .btn { flex: none; }
/* The foot's three lists are narrow beside its words on a tablet, and a long word in one
   ("Datenschutzerklärung") ran out of the panel: the lists go under the words sooner, and a word
   too long for its list breaks. */
@media (max-width: 900px) { .foot-panel { grid-template-columns: minmax(0, 1fr); } }
.foot-col li { min-width: 0; }
/* The way to a note to the team, across the foot under its lists; and in the bar across the top
   while the place is closed. */
.foot-tell { position: relative; z-index: 1; grid-column: 1 / -1; margin: 0; padding-top: 14px; border-top: 2px solid var(--panel-line); font-weight: 700; }
.foot-tell a { color: var(--accent-text); }
.closed-flag a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* A line that holds a whole address: it breaks where it must, not only at a hyphen. */
.meta.long { overflow-wrap: anywhere; }
.foot-col a { overflow-wrap: anywhere; }