/* ==========================================================================
   v2-community.css -- the community and the small account pages (confirm, unsubscribe,
   preferences) in the redesign: the game's city at night (direction D, docs/design-v2.md).
   Added by functions/_middleware.js after the page's own styles, only off the canonical host.

   An override layer: it restyles the markup of functions/community/*.js (css/community.css) and
   of htmlPage() in functions/api/_shared.js (an inline <style>) without touching either. The
   patterns are css/v2.css's -- night panels, Lilita One lettering, candy buttons, lit-window
   yellow for focus and highlights -- so the community reads as part of the game page.
   Logical properties throughout, so the Hebrew pages mirror without a second sheet.
   !important appears only where the base sheet itself uses it (Samsung force-dark) or where an
   inline style attribute has to be overruled (accent-color on the preferences radios).
   ========================================================================== */

:root {
  /* the night */
  --bg: #12122A;
  --bg-2: #17173A;
  --bg-deep: #0A0A1A;
  --panel: #1D1D3A;
  --panel-2: #25254A;
  --sunken: #101026;
  --line: #2E2E58;
  --line-hi: #4A4A78;
  --text: #F1ECE2;
  --text-soft: #BDB7AD;
  --text-dim: #8F8BA8;
  --moon: #F7F0D8;
  --win: #FFD84A;
  --win-off: #34345E;
  /* accents, one meaning each */
  --green: #4FB05C;
  --blue: #4B93DE;
  --purple: #8E63CC;
  --red: #E4483E;
  --orange: #F0914A;
  --gold: #FFC91E;
  /* light tints of the accents, for text on a tinted chip (the candy faces' top colours) */
  --green-t: #7ACB84;
  --blue-t: #7DB6EE;
  --red-t: #F2857C;
  /* the COLOR logo, letter by letter */
  --logo-c: #E84A3A;
  --logo-o1: #F5913F;
  --logo-l: #F7C843;
  --logo-o2: #57C24E;
  --logo-r: #3E9BE0;
  --stripe: linear-gradient(90deg, var(--logo-c) 0 20%, var(--logo-o1) 20% 40%, var(--logo-l) 40% 60%, var(--logo-o2) 60% 80%, var(--logo-r) 80%);

  --fd: 'Lilita One', 'Fredoka', 'Rubik', system-ui, sans-serif;
  --fb: 'DM Sans', 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hw: 400;                     /* heading weight: Lilita One has one; Fredoka (Hebrew) is variable */
  --hs: 1;                        /* heading scale: Hebrew looks smaller next to Latin, so it is raised */

  --r-card: 26px;
  --r-row: 20px;
  --shadow-card: 0 2px 0 rgba(0, 0, 0, .25), 0 14px 30px rgba(0, 0, 0, .28);
  --shadow-lift: 0 3px 0 rgba(0, 0, 0, .3), 0 22px 46px rgba(0, 0, 0, .38);
}
html[dir="rtl"] {
  --fd: 'Fredoka', 'Lilita One', 'Rubik', system-ui, sans-serif;
  --fb: 'Rubik', 'Heebo', 'DM Sans', system-ui, sans-serif;
  --hw: 600;
  --hs: 1.08;
}

/* ----------------------------------------------------------------------- the page */
html { color-scheme: dark; background: var(--bg); }
body { background: var(--bg); color: var(--text); font-family: var(--fb); font-size: 16px; line-height: 1.6; }
body.he { font-family: var(--fb); }
::selection { background: var(--win); color: #1A1A30; }
p { color: var(--text-soft); }
.dim { color: var(--text-dim); }
a { color: var(--moon); text-decoration-color: rgba(255, 216, 74, .5); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--win); text-decoration-color: currentColor; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--win); outline-offset: 3px; }
.skip { background: var(--win); color: #1A1A30; font-weight: 800; border-radius: 12px; padding: 12px 18px; text-decoration: none; }

/* the lettering: Lilita One has one weight, so nothing may ask the browser to fake a bold of it */
h1, h2, h3, .btn, .brand, .brand-sub, .cat b, .tcard-title, .stat b, .studio-label, .field > span, .field > label:not(.check) > span, .rules ol > li::before, .tabs a {
  font-synthesis-weight: none;
}

/* ----------------------------------------------------------------------- the night sky over the top of the page (js/v2-skin.js) */
/* copied from css/v2-skin.css (which these pages do not load); the community header is see-through
   enough for the stars to show behind it */
body { position: relative; isolation: isolate; }
.v2-sky { position: absolute; top: 0; inset-inline: 0; height: clamp(420px, 60vh, 640px); z-index: -1; pointer-events: none; overflow: hidden;
  background: linear-gradient(180deg, #1A1A30 0%, #1B1940 45%, rgba(18, 18, 42, 0) 100%); }
.v2-sky .stars, .v2-sky .stars::after { position: absolute; inset: 0; content: '';
  background-image: radial-gradient(#fff 1.4px, transparent 2px), radial-gradient(#cfd6ff 1.1px, transparent 1.7px), radial-gradient(#fff .9px, transparent 1.5px);
  background-size: 230px 210px, 330px 290px, 140px 170px; background-position: 20px 30px, 120px 160px, 70px 90px; opacity: .45;
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 100%); mask-image: linear-gradient(180deg, #000 40%, transparent 100%); }
.v2-sky .stars::after { background-size: 410px 380px, 270px 240px, 190px 230px; background-position: 200px 60px, 40px 200px, 150px 20px; opacity: .5; animation: v2twinkle 5.5s ease-in-out infinite alternate; }
@keyframes v2twinkle { from { opacity: .12; } to { opacity: .6; } }
.v2-sky .moon { position: absolute; top: clamp(84px, 10vw, 120px); inset-inline-end: clamp(18px, 8vw, 120px); width: clamp(44px, 5.4vw, 78px); aspect-ratio: 1; border-radius: 50%; background: var(--moon); box-shadow: inset -.18em -.07em 0 #E6DDB8, 0 0 70px rgba(247, 240, 216, .2); font-size: clamp(44px, 5.4vw, 78px); }
@media (max-width: 720px) { .v2-sky .moon { top: auto; bottom: 34%; opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .v2-sky .stars::after { animation: none; } }
html.motion-off .v2-sky .stars::after, html.lite .v2-sky .stars::after { animation: none !important; }
/* The community column (720 px) starts right under the header and the account card sits in the
   middle of the screen, so the moon rides in the margin beside them. Where there is no margin
   to ride in (a phone) it would sit behind a title or peek out from under a card, so it sets --
   except on the hub, whose short title leaves it a clear corner. */
@media (max-width: 1099px) {
  body.en .v2-sky .moon, body.he .v2-sky .moon { top: 82px; bottom: auto; inset-inline-end: 14px; width: 34px; font-size: 34px; opacity: .9; box-shadow: inset -.18em -.07em 0 #E6DDB8, 0 0 40px rgba(247, 240, 216, .18); }
}
@media (max-width: 799px) {
  .v2-sky .moon { display: none; }
  body:has(.cats) .v2-sky .moon { display: block; top: 76px; width: 30px; font-size: 30px; }
}

/* ----------------------------------------------------------------------- header */
.top { background: rgba(18, 18, 42, .92);  border-bottom: 1px solid rgba(255, 255, 255, .07); }
.top-in { min-height: 64px; gap: 14px; }
.brand { font-family: 'Lilita One', 'Fredoka', sans-serif; font-weight: 400; font-size: 1.3rem; letter-spacing: .07em; color: var(--moon); line-height: 40px; }
.brand:hover { color: #fff; }
.brand .r { color: var(--logo-c); } .brand .d1 { color: var(--logo-r); } .brand .d2 { color: var(--logo-o2); }
.brand-sub { font-family: var(--fd); font-weight: var(--hw); font-size: calc(1.02rem * var(--hs)); letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); margin-inline-start: 12px; padding-inline-start: 13px; }
.brand-sub:hover { color: var(--win); }
.brand-sub::before { border-inline-start-color: rgba(255, 255, 255, .2); height: 20px; margin-top: -10px; }
.top-nav { gap: 8px; }
.nav-a { border-radius: 999px; color: var(--text); font-weight: 700; padding: 6px 14px; }
.nav-a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav-a.nav-ic { width: 40px; padding: 0; justify-content: center; background: var(--panel); border: 1px solid var(--line); }
.nav-a.nav-ic:hover { border-color: var(--win); background: var(--panel); color: var(--win); }
.nav-a.nav-lang { min-height: 40px; padding: 0 14px; background: var(--panel); border: 1px solid var(--line); color: var(--text); font-size: .88rem; }
.nav-a.nav-lang:hover { border-color: var(--win); background: var(--panel); }
.nav-me, .top-nav a.nav-a[href*="/community/admin"] { background: var(--panel); border: 1px solid var(--line); }
.nav-me { padding-inline: 4px 14px; }
.nav-me:hover, .top-nav a.nav-a[href*="/community/admin"]:hover { border-color: var(--win); background: var(--panel); }
.nav-me .av { box-shadow: 0 0 0 2px var(--panel); }
/* "Sign in" and "New thread" are the header's call to action: the game's small green candy */
.top-nav a.nav-a:not(.nav-lang)[href*="/community/join"], .top-nav a.nav-a:not(.nav-lang)[href*="/community/new"] {
  min-height: 40px; padding: .4em 1.05em .35em; gap: .45em;
  font-family: var(--fd); font-weight: var(--hw); font-size: calc(.95rem * var(--hs)); letter-spacing: .05em; text-transform: uppercase; line-height: 1.1;
  color: #fff; text-shadow: 0 0 1.5px var(--base, #24592D), 1px 1px 0 var(--base, #24592D), -1px 1px 0 var(--base, #24592D), 1px -1px 0 var(--base, #24592D), -1px -1px 0 var(--base, #24592D), 0 2.5px 0 var(--base, #24592D);
  background: linear-gradient(180deg, #7ACB84 0%, var(--green) 60%);
  box-shadow: 0 4px 0 #24592D, 0 8px 16px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .45);
  margin-bottom: 4px; transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
.top-nav a.nav-a:not(.nav-lang)[href*="/community/join"]:hover, .top-nav a.nav-a:not(.nav-lang)[href*="/community/new"]:hover { background: linear-gradient(180deg, #7ACB84 0%, var(--green) 60%); color: #fff; filter: brightness(1.07); }
.top-nav a.nav-a:not(.nav-lang)[href*="/community/join"]:active, .top-nav a.nav-a:not(.nav-lang)[href*="/community/new"]:active { transform: translateY(3px); box-shadow: 0 1px 0 #24592D, 0 3px 6px rgba(0, 0, 0, .3); }
.top-nav a.nav-a:not(.nav-lang)[href*="/community/new"] .ic { width: 16px; height: 16px; }
.top-nav a.nav-a:not(.nav-lang)[href*="/community/new"] .ic svg { stroke-width: 3; }

/* ----------------------------------------------------------------------- headings */
h1, h2, h3 { font-family: var(--fd); font-weight: var(--hw); color: var(--moon); letter-spacing: .02em; line-height: 1.1; }
body.he h1, body.he h2, body.he h3 { font-family: var(--fd); }
h1 { font-size: calc(clamp(28px, 7.4vw, 44px) * var(--hs)); letter-spacing: .03em; line-height: 1.04; text-transform: uppercase; text-shadow: 0 .06em 0 rgba(0, 0, 0, .45); margin: 0 0 16px; }
h2 { font-size: calc(1.4rem * var(--hs)); letter-spacing: .04em; text-transform: uppercase; margin: 0 0 14px; }
h3 { font-size: calc(1.1rem * var(--hs)); }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 { text-transform: none; letter-spacing: 0; }
/* the page's title gets the 5-colour stripe of the logo, the game page's section accent */
main > h1:not(.thread-head)::after, .card > h1::after, form.card > h1::after { content: ''; display: block; width: 74px; height: 8px; margin-top: 14px; border-radius: 6px; background: var(--stripe); }
.card.center > h1::after { margin-inline: auto; }
/* the hub's tagline sits under its title (it is a span inside the h1) */
main > h1 > .dim { display: block; margin-top: 10px; font-family: var(--fb); text-transform: none; letter-spacing: 0; text-shadow: none; color: var(--text-soft); line-height: 1.5; }
main > h2 { margin-top: 34px; }
main > p { font-size: 1.05rem; }
/* a thread's title is what a member typed: the lettering, but never shouted */
h1.thread-head { font-size: calc(clamp(26px, 6vw, 38px) * var(--hs)); text-transform: none; letter-spacing: .01em; line-height: 1.12; margin-bottom: 12px; }
h1.thread-head:dir(rtl), .tcard-title:dir(rtl) { font-family: 'Fredoka', 'Lilita One', 'Rubik', sans-serif; font-weight: 600; letter-spacing: 0; }
/* the category page's icon becomes a coloured tile, as on the hub */
main > h1 > .ic { width: 44px; height: 44px; vertical-align: -6px; margin-inline-end: 4px; border-radius: 14px; background: var(--cat, var(--purple)); color: #fff; align-items: center; justify-content: center; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .22); }
main > h1 > .ic svg { width: 24px; height: 24px; stroke-width: 2; }

/* ----------------------------------------------------------------------- candy buttons */
.btn {
  --face-top: #7ACB84; --face: var(--green); --base: #24592D; --hi: .5;
  position: relative; gap: .55em; min-height: 52px; padding: .62em 1.6em .55em; margin-bottom: 6px;
  border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; text-align: center;
  font-family: var(--fd); font-weight: var(--hw); font-size: calc(1.08rem * var(--hs)); letter-spacing: .06em; text-transform: uppercase; line-height: 1.1;
  color: #fff; text-shadow: 0 0 1.5px var(--base, #24592D), 1px 1px 0 var(--base, #24592D), -1px 1px 0 var(--base, #24592D), 1px -1px 0 var(--base, #24592D), -1px -1px 0 var(--base, #24592D), 0 2.5px 0 var(--base, #24592D);
  box-shadow: 0 6px 0 var(--base), 0 14px 24px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, var(--hi));
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
.btn, .btn:hover, .btn.ghost, .btn.ghost:hover, .btn.danger, .btn.danger:hover { background: linear-gradient(180deg, var(--face-top) 0%, var(--face) 60%); border: 0; }
.btn:hover { color: #fff; filter: brightness(1.07); }
.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--base), 0 4px 8px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, calc(var(--hi) * .6)); }
.btn[disabled], .btn:disabled { opacity: .5; cursor: default; filter: saturate(.6); transform: none; }
html[dir="rtl"] .btn { letter-spacing: 0; text-transform: none; }
/* dark: the secondary action */
.btn.ghost { --face-top: #3A3A66; --face: #2E2E55; --base: #14142E; --hi: .16; color: var(--text); text-shadow: none; }
.btn.ghost:hover { color: #fff; }
/* red: the destructive action (suspend, delete) */
.btn.danger, .danger-box > summary.btn { --face-top: #EE7A70; --face: var(--red); --base: #7E2019; --hi: .4; color: #fff; }
.danger-box[open] > summary.btn { --face-top: #3A3A66; --face: #2E2E55; --base: #14142E; --hi: .16; background: linear-gradient(180deg, var(--face-top) 0%, var(--face) 60%); color: var(--text); text-shadow: none; border: 0; }
.btn.small { min-height: 42px; padding: .45em 1.15em .4em; font-size: calc(.95rem * var(--hs)); margin-bottom: 4px; box-shadow: 0 4px 0 var(--base), 0 8px 16px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, var(--hi)); }
.btn.small:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--base), 0 3px 6px rgba(0, 0, 0, .3); }
.btn .ic { width: 18px; height: 18px; }
.btns { gap: 14px 12px; align-items: center; }
/* Sign in with Google / Apple keep their makers' own look (dark Google, black Apple), in the pill
   shape both allow, and in the body face: their names are not ours to letter in Lilita One. */
.btn.ghost.apple, a.btn.ghost[href*="/community/auth/google"] {
  min-height: 52px; font-family: var(--fb); font-weight: 600; font-size: 1rem; letter-spacing: 0; text-transform: none; text-shadow: none;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .3), 0 10px 20px rgba(0, 0, 0, .3); margin-bottom: 0;
}
a.btn.ghost[href*="/community/auth/google"], a.btn.ghost[href*="/community/auth/google"]:hover { background: #131314; border: 1px solid #8E918F; color: #E3E3E3; }
a.btn.ghost[href*="/community/auth/google"]:hover { background: #1F1F21; }
.btn.ghost.apple, .btn.ghost.apple:hover { background: #000; border: 1px solid rgba(255, 255, 255, .28); color: #fff; }
.btn.ghost.apple:hover { background: #16161C; }
.btn.ghost.apple:active, a.btn.ghost[href*="/community/auth/google"]:active { transform: translateY(2px); }
.btn.block + .btn.block.apple { margin-top: 12px; }
.linkish { color: var(--moon); text-decoration-color: rgba(255, 216, 74, .5); text-underline-offset: 3px; font-weight: 600; }
.linkish:hover { color: var(--win); }
/* Samsung Internet's force-dark (RDDW-50): the base sheet draws filled buttons as outlines, in coral;
   here in the candy's green, and without the candy's base, which force-dark would smear. */
html.force-dark .btn:not(.ghost):not(.danger) { background: none !important; border: 2px solid var(--green) !important; color: var(--green-t) !important; box-shadow: none !important; text-shadow: none; }
html.force-dark .btn:not(.ghost):not(.danger):hover { background: rgba(79, 176, 92, .12) !important; }
html.force-dark .top-nav a.nav-a:not(.nav-lang)[href*="/community/join"], html.force-dark .top-nav a.nav-a:not(.nav-lang)[href*="/community/new"] { background: none !important; border: 2px solid var(--green); color: var(--green-t); box-shadow: none; text-shadow: none; }
html.force-dark .danger-box > summary.btn:not(.ghost):not(.danger) { border-color: var(--red) !important; color: var(--red-t) !important; }
html.force-dark .danger-box[open] > summary.btn:not(.ghost):not(.danger) { border-color: rgba(255, 255, 255, .3) !important; color: var(--text) !important; }

/* ----------------------------------------------------------------------- panels */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px 22px; margin: 0 0 18px; box-shadow: var(--shadow-card); }
.card.center { padding: 30px 24px 26px; }
.card.center .btn:not(.block) { margin-top: 6px; }
.ic-big { width: 64px; height: 64px; border-radius: 20px; margin: 0 auto 18px; background: var(--purple); color: #fff; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .22), 0 10px 24px rgba(0, 0, 0, .3); }
.ic-big svg { width: 30px; height: 30px; stroke-width: 2; }
/* the hub's welcome for visitors: a panel of evening sky */
.card.join { background: linear-gradient(165deg, #2C2350 0%, #221D48 42%, var(--panel) 100%); border-color: #3A3466; gap: 14px; padding: 26px 24px 22px; }
.card.join h2 { margin: 0; }
.card.join p { font-size: 1.02rem; }
/* the event banner: a lit window -- news from the studio */
.banner { gap: 12px; background: rgba(255, 216, 74, .07); border: 1px solid rgba(255, 216, 74, .3); border-radius: var(--r-row); padding: 14px 18px; margin: 0 0 20px; color: var(--text); font-weight: 700; }
.banner::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--win); box-shadow: 0 0 0 4px rgba(255, 216, 74, .2), 0 0 12px rgba(255, 216, 74, .7); animation: v2pulse 2.4s ease-in-out infinite; }
@keyframes v2pulse { 50% { box-shadow: 0 0 0 7px rgba(255, 216, 74, .06), 0 0 18px rgba(255, 216, 74, .9); } }
.banner:hover { border-color: var(--win); color: #fff; }
.banner .ic { color: var(--win); }
html[dir="rtl"] .banner .ic svg, html[dir="rtl"] .ic-chevron svg { transform: scaleX(-1); }
.notice { background: var(--panel); border: 1px dashed #3E3E6E; border-radius: var(--r-row); padding: 18px 20px; color: var(--text-soft); text-align: center; }
.notice a { font-weight: 700; }
.empty { color: var(--text-dim); background: rgba(29, 29, 58, .6); border: 1px dashed #3E3E6E; border-radius: var(--r-row); padding: 34px 16px; }
.err { color: var(--red-t); background: rgba(228, 72, 62, .12); border: 1px solid rgba(228, 72, 62, .42); border-radius: 16px; padding: 12px 16px; font-weight: 600; }
.ok { color: var(--green-t); background: rgba(79, 176, 92, .12); border: 1px solid rgba(79, 176, 92, .42); border-radius: 16px; padding: 12px 16px; font-weight: 600; }
.hr { background: var(--line); margin: 20px 0; }
.hint { font-size: 13.5px; color: var(--text-dim); line-height: 1.55; }
.or { color: var(--text-dim); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 18px 0; }
.or::before, .or::after { background: var(--line); }

/* ----------------------------------------------------------------------- the categories: the game's chapter tiles */
.cats { gap: 12px; margin-bottom: 8px; }
.cat { position: relative; padding: 16px 16px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-row); box-shadow: var(--shadow-card); color: var(--text); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.cat:hover { color: var(--text); border-color: var(--line-hi); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.cat .ic { display: flex; width: 44px; height: 44px; margin-bottom: 12px; border-radius: 14px; align-items: center; justify-content: center; background: var(--cat, var(--purple)); color: #fff; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .22); }
.cat .ic svg { width: 24px; height: 24px; stroke-width: 2; }
.cat b { font-family: var(--fd); font-weight: var(--hw); font-size: calc(1.14rem * var(--hs)); letter-spacing: .02em; line-height: 1.15; color: var(--moon); margin-bottom: 4px; }
.cat span { color: var(--text-dim); font-size: 13.5px; }
.cat .n { align-self: flex-start; margin-top: auto; padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: var(--text-soft); font-size: 12px; font-weight: 700; }
.cat > span:not(.n):not(.ic) { margin-bottom: 12px; }
/* one accent per category, the game's meanings: news, the test build, ideas, bugs, help, the rest */
.cat[href*="/c/announcements"], main:has(> .listbar form[action="/community/c/announcements"]) { --cat: var(--orange); }
.cat[href*="/c/closed-test"], main:has(> .listbar form[action="/community/c/closed-test"]) { --cat: var(--green); }
.cat[href*="/c/ideas"], main:has(> .listbar form[action="/community/c/ideas"]) { --cat: var(--gold); }
.cat[href*="/c/bugs"], main:has(> .listbar form[action="/community/c/bugs"]) { --cat: var(--red); }
.cat[href*="/c/support"], main:has(> .listbar form[action="/community/c/support"]) { --cat: var(--blue); }
.cat[href*="/c/corner"], main:has(> .listbar form[action="/community/c/corner"]) { --cat: var(--purple); }
.cat[href*="/c/ideas"] .ic, main:has(> .listbar form[action="/community/c/ideas"]) > h1 > .ic { color: #2A2208; }

/* ----------------------------------------------------------------------- thread lists */
.listbar { gap: 10px; margin: 34px 0 14px; }
main > p + .listbar { margin-top: 18px; }
.listbar select { min-width: 160px; min-height: 44px; border-radius: 14px; font-size: 15px; }
.listbar .btn.small { margin-bottom: 4px; }
.listbar > .btn.small { margin-bottom: 4px; }
.tlist { gap: 12px; }
.tcard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-row); box-shadow: var(--shadow-card); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.tcard:hover { border-color: var(--line-hi); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.tcard-a { padding: 16px 20px; }
.tcard-a:focus-visible { outline-offset: -3px; border-radius: var(--r-row); }
.tcard-top { gap: 6px 10px; }
.tcard-title { font-family: var(--fd); font-weight: var(--hw); font-size: calc(1.2rem * var(--hs)); letter-spacing: .01em; line-height: 1.2; color: var(--moon); }
.tcard-ex { color: var(--text-soft); font-size: 15px; margin: 6px 0 10px; }
.tcard-meta { color: var(--text-dim); font-size: 13.5px; gap: 6px 8px; }
.tcard-meta b { color: var(--text); font-weight: 700; }
.tcard-nums { gap: 5px; font-weight: 700; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.tcard-nums .ic { color: var(--text-dim); margin-inline-start: 6px; }
.tcard-nums .ic:first-child { margin-inline-start: 0; }
.pager { margin: 18px 0; color: var(--text-dim); }
.crumbs { font-size: 13.5px; color: var(--text-dim); margin-bottom: 10px; }
.crumbs a { color: var(--text-soft); font-weight: 700; text-decoration: none; }
.crumbs a:hover { color: var(--win); }

/* tags: tinted chips, each colour keeping its meaning */
.pill { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; padding: 2px 10px; border-radius: 999px; line-height: 1.5; border: 1px solid transparent; }
.pill-coral { background: rgba(228, 72, 62, .16); border-color: rgba(228, 72, 62, .38); color: var(--red-t); }
.pill-blue { background: rgba(75, 147, 222, .16); border-color: rgba(75, 147, 222, .4); color: var(--blue-t); }
.pill-green { background: rgba(79, 176, 92, .16); border-color: rgba(79, 176, 92, .4); color: var(--green-t); }
.pill-gold { background: rgba(255, 201, 30, .13); border-color: rgba(255, 201, 30, .4); color: var(--gold); }
.pill-dim { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); color: var(--text-soft); }
/* the studio's mark is the R of RDD, the tester's the blue of the test */
.pill-studio { background: rgba(232, 74, 58, .1); border-color: rgba(232, 74, 58, .7); color: var(--red-t); }
.pill-tester { background: rgba(75, 147, 222, .08); border-color: rgba(75, 147, 222, .7); color: var(--blue-t); }

/* quick links: each with the tile of its colour */
.quick { gap: 6px; }
.quick li { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.quick .ic { flex: none; width: 34px; height: 34px; border-radius: 11px; align-items: center; justify-content: center; color: #fff; background: var(--purple); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22); }
.quick .ic svg { width: 18px; height: 18px; stroke-width: 2; }
.quick li:nth-child(1) .ic { background: var(--blue); }
.quick li:nth-child(2) .ic { background: var(--green); }
.quick li:nth-child(3) .ic { background: var(--red); }
.quick li:nth-child(4) .ic { background: var(--purple); }
.quick a { color: var(--text); font-weight: 600; }
.quick a:hover { color: var(--win); }

/* ----------------------------------------------------------------------- a thread */
.meta { gap: 8px; color: var(--text-dim); font-size: 13.5px; margin-bottom: 18px; }
.meta b { color: var(--text); }
.meta a { color: var(--red-t); font-weight: 700; text-decoration: none; }
.meta a:hover { color: var(--win); }
.post { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-row); padding: 18px 20px; margin: 0 0 12px; box-shadow: var(--shadow-card); }
.post.op { border-color: #3A3A6A; padding: 20px 22px; box-shadow: var(--shadow-lift); }
.post.studio { border-inline-start: 4px solid var(--logo-c); }
.post.hidden { opacity: .55; }
.post-head { gap: 10px; font-size: 13.5px; color: var(--text-dim); margin-bottom: 10px; flex-wrap: wrap; }
.post-head b { color: var(--text); font-weight: 700; }
.post-head .pill-studio, .post-head .pill-tester { margin-inline-start: 6px; }
.post-body p { color: var(--text); font-size: 16px; line-height: 1.65; }
.post-body a { color: var(--moon); text-decoration: underline; text-decoration-color: rgba(255, 216, 74, .55); }
.post-body a:hover { color: var(--win); }
.post-foot { gap: 14px; margin-top: 14px; font-size: 13.5px; }
.post-foot a.dim { color: var(--text-dim); font-weight: 700; text-decoration: none; }
.post-foot a.dim:hover { color: var(--win); }
.post-foot .field { margin: 0; }
.post-foot .linkish { color: var(--text-soft); text-decoration: none; font-weight: 700; }
.post-foot .linkish:hover { color: var(--win); }
.vote { min-height: 38px; padding: 4px 14px; gap: 6px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.vote:hover { border-color: var(--line-hi); color: #fff; }
.vote.on { background: rgba(255, 216, 74, .14); border-color: rgba(255, 216, 74, .55); color: var(--win); }
.vote .ic svg { stroke-width: 2.4; }
.studio-label { font-family: 'Lilita One', 'Fredoka', sans-serif; font-weight: 400; color: var(--red-t); font-size: 12.5px; letter-spacing: .07em; }
html[dir="rtl"] .studio-label { font-family: var(--fd); font-weight: var(--hw); letter-spacing: 0; font-size: 13.5px; }
/* a poll: rows like the game's list screens, results as blue bars (blue = the poll's colour) */
.poll, .poll > form { gap: 10px; }
.poll > form { display: grid; }
.poll > form > .btn { justify-self: start; }
.poll label { min-height: 50px; padding: 8px 16px; border-radius: 16px; background: var(--sunken); border: 2px solid transparent; color: var(--text); font-weight: 600; transition: border-color .15s ease, background .15s ease; }
.poll label:hover { background: #0C0C20; }
.poll label:has(input:checked) { border-color: var(--win); }
.poll input { accent-color: var(--green); }
.bar { min-height: 50px; border-radius: 16px; background: var(--sunken); border: 1px solid var(--line); padding: 8px 16px; color: var(--text); font-weight: 600; }
.bar i { background: linear-gradient(90deg, rgba(75, 147, 222, .42), rgba(75, 147, 222, .26)); border-inline-end: 2px solid var(--blue); }
.bar b { font-family: 'Lilita One', 'Fredoka', sans-serif; font-weight: 400; font-size: 1.05rem; color: var(--moon); letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.bar .ic { display: inline-flex; flex: none; width: 18px; color: var(--green-t); }
.bar i[style="width:0%"] { border: 0; }
.bar > span > span { flex: 1 1 auto; width: auto; justify-content: flex-start; align-items: center; gap: 8px; min-width: 0; }
.bar > span > b { flex: none; }

/* ----------------------------------------------------------------------- forms */
.field { gap: 8px; margin: 0 0 18px; }
.field > span, .field > label:not(.check) > span { font-family: var(--fd); font-weight: var(--hw); font-size: calc(.92rem * var(--hs)); letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); }
html[dir="rtl"] .field > span, html[dir="rtl"] .field > label:not(.check) > span { letter-spacing: 0; text-transform: none; }
input[type=text], input[type=email], input[type=url], input[type=search], textarea, select {
  min-height: 52px; padding: 0 18px; border: 2px solid transparent; border-radius: 16px; background-color: var(--sunken); color: var(--text); font: inherit; font-size: 16px;
  transition: border-color .15s ease, background-color .15s ease;
}
textarea { min-height: 150px; padding: 14px 18px; line-height: 1.55; }
input::placeholder, textarea::placeholder { color: var(--text-dim); opacity: .9; }
input[type=text]:hover, input[type=email]:hover, input[type=url]:hover, input[type=search]:hover, textarea:hover, select:hover { border-color: rgba(255, 255, 255, .08); }
input[type=text]:focus, input[type=email]:focus, input[type=url]:focus, input[type=search]:focus, textarea:focus, select:focus,
input[type=text]:focus-visible, input[type=email]:focus-visible, input[type=url]:focus-visible, input[type=search]:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-color: var(--win); background-color: #0C0C20; }
/* a control that sits on the page itself rather than in a panel would sink into the night: it gets the panel */
main > form.row input[type=search], main > form.row input[type=text], .listbar select, table.t input[type=text], table.t select { background-color: var(--panel); border-color: var(--line); }
.card table.t input[type=text], .card table.t select { background-color: var(--sunken); border-color: transparent; }
main > form.row input[type=search]:hover, main > form.row input[type=text]:hover, .listbar select:hover { border-color: var(--line-hi); }
main > form.row input[type=search]:focus, main > form.row input[type=text]:focus, .listbar select:focus { border-color: var(--win); }
select { cursor: pointer; padding-inline-end: 46px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BDB7AD' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 18px 18px; background-position: right 16px center; }
html[dir="rtl"] select { background-position: left 16px center; }
select option { background: var(--bg-2); color: var(--text); }
.check { gap: 12px; color: var(--text); }
.check input, .radios input { accent-color: var(--green); }
.check span, .field > .check > span { color: var(--text); font-size: 15px; font-weight: 500; }
.radios { gap: 6px; }
.radios label { min-height: 48px; padding: 0 14px; gap: 12px; border-radius: 14px; color: var(--text-soft); border: 1px solid transparent; transition: background .15s ease, color .15s ease; }
.radios label:hover { background: rgba(255, 255, 255, .04); color: var(--text); }
.radios label:has(input:checked) { background: rgba(255, 255, 255, .06); border-color: var(--line); color: var(--text); }
/* two choices (the language) are the game's segmented control, as on the game page's sign-up card */
.radios:has(> label:nth-child(2):last-child) { display: flex; gap: 4px; padding: 4px; max-width: 420px; border-radius: 16px; background: var(--sunken); }
.radios:has(> label:nth-child(2):last-child) > label { position: relative; flex: 1 1 0; justify-content: center; min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px; font-weight: 800; color: var(--text-dim); text-align: center; }
.radios:has(> label:nth-child(2):last-child) > label > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.radios:has(> label:nth-child(2):last-child) > label:has(input:checked) { background: var(--panel-2); color: var(--text); box-shadow: 0 2px 0 rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .08); }
.radios:has(> label:nth-child(2):last-child) > label:has(input:focus-visible) { outline: 3px solid var(--win); outline-offset: 1px; }
/* avatars keep their colours; the chosen one is ringed in lit-window yellow */
.avatars { gap: 12px; }
.avatars input:checked + .av { outline: 3px solid var(--win); outline-offset: 3px; }
.avatars input:focus-visible + .av { box-shadow: 0 0 0 7px rgba(255, 216, 74, .3); }
.avatars label:hover .av { filter: brightness(1.15); }
/* the danger zone */
.danger-panel { margin-top: 16px; padding: 16px; border: 1px solid rgba(228, 72, 62, .45); border-radius: 18px; background: rgba(228, 72, 62, .08); }
.danger-warn { color: var(--text); }
.danger-warn b { color: var(--red-t); }
.danger-box > summary.btn { margin-bottom: 6px; }

/* ----------------------------------------------------------------------- rules: numbered like lit windows */
.rules ol, .card.rules ol { list-style: none; padding: 0; margin: 18px 0 20px; counter-reset: rule; color: var(--text-soft); }
.rules ol > li { counter-increment: rule; position: relative; min-height: 38px; padding-inline-start: 54px; margin: 0 0 16px; }
.rules ol > li::before { content: counter(rule); position: absolute; inset-inline-start: 0; top: 0; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 1.15rem; line-height: 1; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .2); background: var(--logo-c); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .22); }
.rules ol > li:nth-child(5n+2)::before { background: var(--logo-o1); }
.rules ol > li:nth-child(5n+3)::before { background: var(--logo-l); color: #2A2208; text-shadow: none; }
.rules ol > li:nth-child(5n+4)::before { background: var(--logo-o2); }
.rules ol > li:nth-child(5n)::before { background: var(--logo-r); }
.rules b { display: block; color: var(--moon); font-weight: 700; font-size: 1.04rem; margin-bottom: 2px; }
.rules .btn { margin-top: 4px; }
.rules .btn + .hint { margin-top: 10px; }

/* ----------------------------------------------------------------------- the admin panel */
.tabs { gap: 4px; padding: 4px; width: max-content; max-width: 100%; border-radius: 18px; background: var(--sunken); margin-bottom: 20px; }
.tabs a { min-height: 40px; padding: 6px 16px; border: 0; border-radius: 14px; background: transparent; color: var(--text-dim); font-weight: 800; font-size: 14px; }
.tabs a:hover { color: var(--text); }
.tabs a.on { background: var(--panel-2); border: 0; color: var(--text); box-shadow: 0 2px 0 rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .08); }
main > section:not(.card) > h2 { margin-top: 26px; }
table.t { font-size: 14.5px; }
table.t th, table.t td { padding: 12px 8px; border-bottom: 1px solid var(--line); }
table.t tr:last-child td { border-bottom: 0; }
table.t th { color: var(--win); font-family: var(--fd); font-weight: var(--hw); letter-spacing: .04em; }
table.t td .av { vertical-align: middle; }
table.t .btn.small, .row .btn.small { min-height: 36px; padding: .38em .95em .32em; font-size: calc(.85rem * var(--hs)); }
table.t input[type=text], table.t select, .card .row input[type=text][style] { min-height: 40px; border-radius: 12px; font-size: 14px; padding-inline: 12px; }
table.t select { width: auto; min-width: 8.5em; padding-inline-end: 38px; background-position: right 12px center; }
table.t input[type=text] { width: auto; }
/* a row of actions in a table cell stays one row (the table scrolls on a phone) */
table.t form.inline.row, table.t td > .row { flex-wrap: nowrap; }
table.t td:has(> .row) { width: 1%; }
.card ol a, table.t td > a { color: var(--text); text-decoration: none; font-weight: 600; }
.card ol a:hover, table.t td > a:hover { color: var(--win); }
html[dir="rtl"] table.t select { background-position: left 12px center; }
.row { gap: 10px; }
/* the profile card's head: the avatar and the name stay side by side */
.card > .row:first-child { flex-wrap: nowrap; align-items: center; gap: 14px; }
.card > .row:first-child > div { min-width: 0; line-height: 1.45; }
.card > .row:first-child > div > b { font-family: var(--fd); font-weight: var(--hw); font-size: calc(1.25rem * var(--hs)); color: var(--moon); letter-spacing: .02em; font-synthesis-weight: none; }
.card > .row:first-child > div > .dim { font-size: 13.5px; }
form.inline.row { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* the wide admin page: the header follows the column */
body:has(main.wide) .top-in { max-width: 980px; }
.stat { gap: 12px; margin-bottom: 18px; }
.stat div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-row); padding: 16px; box-shadow: var(--shadow-card); }
.stat b { font-family: 'Lilita One', 'Fredoka', sans-serif; font-weight: 400; font-size: 2.1rem; line-height: 1.05; color: var(--win); text-shadow: 0 0 18px rgba(255, 216, 74, .35); font-variant-numeric: tabular-nums; }
.stat span { color: var(--text-dim); font-size: 12.5px; font-weight: 700; }
.card ol { color: var(--text-soft); padding-inline-start: 22px; }
.card ol li { margin-bottom: 6px; }

/* ----------------------------------------------------------------------- the footer and the city above it */
.foot { position: relative; background: var(--bg-deep); border-top: 0; padding: 26px 0 40px; color: var(--text-dim); font-size: 13.5px; }
.foot::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 6px; background: var(--stripe); }
.foot a, .foot .linkish { color: var(--text-soft); text-decoration: none; font-weight: 500; }
.foot a:hover, .foot .linkish:hover { color: var(--win); }
.skyline { position: relative; height: clamp(120px, 15vw, 220px); overflow: hidden; margin: 0; }
.skyline .city { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; }
.skyline-foot { margin-top: clamp(24px, 4vw, 48px); }
.skyline-foot::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 16px; background: var(--bg-deep); }
.city .w { fill: var(--win-off); transition: fill .4s ease; }
.city .w.on { fill: var(--win); }
.city .w.flick { animation: flick .42s linear; }
@keyframes flick { 0% { fill: var(--win-off); } 14% { fill: var(--win); } 26% { fill: #5A5A80; } 40%, 100% { fill: var(--win); } }
.lite .city .w.on { fill: var(--win); }

/* ----------------------------------------------------------------------- the community column */
main#main { padding-top: clamp(24px, 4.5vw, 44px); padding-bottom: 8px; }

/* ==========================================================================
   The account pages: htmlPage() in functions/api/_shared.js -- confirm, unsubscribe, preferences,
   manage, delete. One centred card on the night sky, the city at the foot. These pages have no
   community body class, which is how they are told apart here.
   ========================================================================== */
body:not(.en):not(.he) { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 100vh; padding: 24px 0 0; box-sizing: border-box; background: var(--bg); color: var(--text); font-family: var(--fb); }
body:not(.en):not(.he) > main { width: calc(100% - 32px); max-width: 500px; margin-block: auto; padding: 30px 28px 28px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-lift); }
body:not(.en):not(.he) > .skyline-foot { align-self: stretch; flex: none; margin-top: 40px; }
body:not(.en):not(.he) .brand { font-family: 'Lilita One', 'Fredoka', sans-serif; font-weight: 400; font-size: 1.1rem; letter-spacing: .07em; line-height: 1; color: var(--moon); margin: 0 0 22px; }
body:not(.en):not(.he) .brand .r { color: var(--logo-c); } body:not(.en):not(.he) .brand .d1 { color: var(--logo-r); } body:not(.en):not(.he) .brand .d2 { color: var(--logo-o2); }
body:not(.en):not(.he) h1 { font-family: var(--fd); font-weight: var(--hw); font-size: calc(1.65rem * var(--hs)); line-height: 1.12; letter-spacing: .03em; text-transform: uppercase; color: var(--moon); text-shadow: 0 .06em 0 rgba(0, 0, 0, .45); font-synthesis-weight: none; }
html[dir="rtl"] body:not(.en):not(.he) h1 { text-transform: none; letter-spacing: 0; }
body:not(.en):not(.he) .head { gap: 16px; }
body:not(.en):not(.he) .icon { width: 56px; height: 56px; border-radius: 18px; background: var(--panel-2); border: 1px solid var(--line); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .22); }
body:not(.en):not(.he) main.center .icon { width: 72px; height: 72px; border-radius: 22px; }
body:not(.en):not(.he) main.center .icon svg { width: 32px; height: 32px; }
body:not(.en):not(.he) main.center h1 { margin-top: 2px; }
body:not(.en):not(.he) p { font-size: 16px; color: var(--text-soft); }
body:not(.en):not(.he) p strong { color: var(--text); font-weight: 700; }
body:not(.en):not(.he) a { color: var(--moon); text-decoration-color: rgba(255, 216, 74, .5); text-underline-offset: 3px; }
body:not(.en):not(.he) a:hover { color: var(--win); }
body:not(.en):not(.he) .addr { margin: 2px 0 20px; padding: 12px 16px; border-radius: 14px; background: var(--sunken); color: var(--moon); font-size: 16px; font-weight: 700; }
/* the buttons: green candy for the promoted action, dark candy for the quiet one -- the same
   arrangement htmlPage() explains (leaving is never the promoted action) */
body:not(.en):not(.he) button, body:not(.en):not(.he) a.btn {
  --face-top: #7ACB84; --face: var(--green); --base: #24592D; --hi: .5;
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; padding: .66em 1.4em .58em; margin-bottom: 6px;
  border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
  font-family: var(--fd); font-weight: var(--hw); font-size: calc(1.08rem * var(--hs)); letter-spacing: .06em; text-transform: uppercase; line-height: 1.15;
  color: #fff; text-shadow: 0 0 1.5px var(--base, #24592D), 1px 1px 0 var(--base, #24592D), -1px 1px 0 var(--base, #24592D), 1px -1px 0 var(--base, #24592D), -1px -1px 0 var(--base, #24592D), 0 2.5px 0 var(--base, #24592D); font-synthesis-weight: none;
  background: linear-gradient(180deg, var(--face-top) 0%, var(--face) 60%);
  box-shadow: 0 6px 0 var(--base), 0 14px 24px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, var(--hi));
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
body:not(.en):not(.he) button:hover, body:not(.en):not(.he) a.btn:hover { background: linear-gradient(180deg, var(--face-top) 0%, var(--face) 60%); color: #fff; filter: brightness(1.07); }
body:not(.en):not(.he) button:active, body:not(.en):not(.he) a.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--base), 0 4px 8px rgba(0, 0, 0, .3); }
body:not(.en):not(.he) button.ghost, body:not(.en):not(.he) a.btn.ghost, body:not(.en):not(.he) button.ghost:hover, body:not(.en):not(.he) a.btn.ghost:hover { --face-top: #3A3A66; --face: #2E2E55; --base: #14142E; --hi: .16; border: 0; color: var(--text); text-shadow: none; }
body:not(.en):not(.he) button[disabled] { opacity: .55; cursor: progress; transform: none; filter: saturate(.6); }
html[dir="rtl"] body:not(.en):not(.he) button, html[dir="rtl"] body:not(.en):not(.he) a.btn { letter-spacing: 0; text-transform: none; }
body:not(.en):not(.he) button:focus-visible, body:not(.en):not(.he) a:focus-visible, body:not(.en):not(.he) input:focus-visible { outline: 3px solid var(--win); outline-offset: 3px; }
body:not(.en):not(.he) .btns { gap: 14px; margin-top: 20px; align-items: stretch; }
body:not(.en):not(.he) h1::after { content: ''; display: block; width: 74px; height: 8px; margin-top: 14px; border-radius: 6px; background: var(--stripe); }
body:not(.en):not(.he) main.center h1::after { margin-inline: auto; }
body:not(.en):not(.he) .hr { background: var(--line); margin: 22px 0 18px; }
body:not(.en):not(.he) .q { color: var(--text); font-weight: 700; }
body:not(.en):not(.he) .reasons { margin-bottom: 18px; }
body:not(.en):not(.he) .reasons label, body:not(.en):not(.he) .langs label { min-height: 48px; padding: 0 12px; border-radius: 14px; color: var(--text-soft); border: 1px solid transparent; transition: background .15s ease, color .15s ease; }
body:not(.en):not(.he) .reasons label:hover, body:not(.en):not(.he) .langs label:hover { background: rgba(255, 255, 255, .04); color: var(--text); }
body:not(.en):not(.he) .reasons label:has(input:checked), body:not(.en):not(.he) .langs label:has(input:checked) { background: rgba(255, 255, 255, .06); border-color: var(--line); color: var(--text); }
/* the preferences radios carry their colour in a style attribute */
body:not(.en):not(.he) input[type=radio], body:not(.en):not(.he) input[type=checkbox] { accent-color: var(--green) !important; }
body:not(.en):not(.he) form > label[style] { min-height: 48px; padding: 0 12px; border-radius: 14px; }
body:not(.en):not(.he) form > label[style]:has(input:checked) { background: rgba(255, 255, 255, .06); }
body:not(.en):not(.he) form > label[style] + button { margin-top: 18px; }
body:not(.en):not(.he) .note { font-size: 13px; color: var(--text-dim); line-height: 1.55; }
body:not(.en):not(.he) .note a { color: var(--text-soft); text-decoration: underline; text-decoration-color: rgba(255, 216, 74, .45); }
body:not(.en):not(.he) .note a:hover { color: var(--win); }
/* manage: the facts, the sections, the status line */
body:not(.en):not(.he) h2 { font-family: var(--fd); font-weight: var(--hw); font-size: calc(1.1rem * var(--hs)); letter-spacing: .05em; text-transform: uppercase; color: var(--moon); font-synthesis-weight: none; }
html[dir="rtl"] body:not(.en):not(.he) h2 { text-transform: none; letter-spacing: 0; }
body:not(.en):not(.he) .facts div { border-top-color: var(--line); }
body:not(.en):not(.he) .facts dt { color: var(--text-dim); }
body:not(.en):not(.he) .facts dd { color: var(--text); font-weight: 600; }
body:not(.en):not(.he) .facts dd[data-state="subscribed"] { color: var(--green-t); }
body:not(.en):not(.he) .msg { border-radius: 16px; background: rgba(79, 176, 92, .12); border-color: rgba(79, 176, 92, .42); color: var(--text); }
body:not(.en):not(.he) .msg.bad { background: rgba(228, 72, 62, .12); border-color: rgba(228, 72, 62, .42); }

/* ----------------------------------------------------------------------- less motion */
@media (prefers-reduced-motion: reduce) {
  .banner::before, .city .w.flick { animation: none; }
  .cat, .tcard, .btn, .vote { transition: none; }
  .cat:hover, .tcard:hover { transform: none; }
}
html.motion-off .banner::before, html.motion-off .city .w.flick, html.lite .banner::before { animation: none !important; }

/* ----------------------------------------------------------------------- phones */
@media (max-width: 639px) {
  .card { padding: 20px 18px; border-radius: 22px; }
  .card.center { padding: 26px 18px 22px; }
  .tcard-a { padding: 14px 16px; }
  .post, .post.op { padding: 16px; }
  .cat { padding: 14px 14px 12px; }
  .cat .ic { width: 40px; height: 40px; border-radius: 12px; margin-bottom: 10px; }
  .btns .btn { flex: 1 1 auto; }
  /* sort on its own row, then the filter with Show beside it */
  .listbar form { flex: 1 1 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
  .listbar form select[name="sort"] { grid-column: 1 / -1; }
  .listbar select { width: 100%; min-width: 0; }
  .tabs { gap: 2px; }
  .tabs a { padding: 6px 8px; font-size: 13px; }
  /* the admin tables become stacked rows: a 358-px table squeezed the names one letter per line */
  table.t, table.t tbody, table.t tr, table.t td { display: block; }
  table.t tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  table.t tr:last-child { border-bottom: 0; }
  table.t td, table.t td:has(> form .btn), table.t td:has(> .btn), table.t td:has(> .row) { width: auto; padding: 3px 0; border: 0; }
  table.t td:empty { display: none; }
  table.t form.inline.row, table.t td > .row { flex-wrap: wrap; }
  .stat b { font-size: 1.7rem; }
  .stat div { padding: 12px; }
}
@media (max-width: 479px) {
  .top-in { gap: 8px; min-height: 58px; }
  .top-nav { gap: 6px; }
  .brand { font-size: 1rem; letter-spacing: .04em; }
  .brand-sub { font-size: calc(.82rem * var(--hs)); letter-spacing: .03em; margin-inline-start: 8px; padding-inline-start: 9px; }
  .brand-sub::before { height: 16px; margin-top: -8px; }
  .nav-a.nav-ic { width: 36px; min-height: 36px; }
  .nav-a.nav-lang { min-height: 36px; padding: 0 9px; font-size: .78rem; }
  .top-nav a.nav-a:not(.nav-lang)[href*="/community/join"] { min-height: 36px; padding: .38em .75em .32em; font-size: calc(.82rem * var(--hs)); letter-spacing: .03em; white-space: nowrap; }
  .top-nav a.nav-a:not(.nav-lang)[href*="/community/new"] { width: 38px; min-height: 38px; padding: 0; justify-content: center; }
  .nav-me { padding: 3px; }
  .nav-a:not(.nav-me):not(.nav-ic):not(.nav-lang):not([href*="/community/join"]):not([href*="/community/new"]) { width: 36px; min-height: 36px; padding: 0; justify-content: center; }
  main > h2 { margin-top: 28px; }
  .listbar { margin-top: 28px; }
  body:not(.en):not(.he) > main { padding: 26px 20px 22px; }
}
/* a 375-px phone still shows "Labs" (it goes under 375, css/community.css): the gaps give way */
@media (max-width: 389px) {
  .top-in { gap: 6px; }
  .top-nav { gap: 4px; }
  .brand { letter-spacing: .03em; }
  .brand-sub { margin-inline-start: 7px; padding-inline-start: 8px; }
}
@media (max-width: 359px) {
  .nav-a.nav-ic { width: 34px; min-height: 34px; }
  .nav-a.nav-lang { padding: 0 7px; font-size: .74rem; }
  .brand-sub { letter-spacing: .015em; }
  .top-nav a.nav-a:not(.nav-lang)[href*="/community/join"] { padding-inline: .6em; }
}

/* ----------------------------------------------------------------------- the moon gives light
   A lit face with a few soft craters, a warm bloom, and a wide halo (the ::before, four moons
   across, clear in the middle so it never washes over the face).
   The moon is alive (RDDW-165, Daniel 3 Oct 2026: "as if the moon is alive and shining"): the
   halo breathes, the rim swells a beat later (::after) and a faint crown of rays turns once every
   90 s -- each on its own slow beat, so the light never repeats the same way. Opacity and
   transform only, so it stays on in lite mode; reduced motion and motion-off hold it still. */
.v2-sky .moon {
  background:
    radial-gradient(circle at 63% 64%, rgba(196, 180, 128, .5) 0 8%, transparent 9.5%),
    radial-gradient(circle at 33% 60%, rgba(196, 180, 128, .38) 0 5.5%, transparent 7%),
    radial-gradient(circle at 56% 30%, rgba(196, 180, 128, .34) 0 4.5%, transparent 6%),
    radial-gradient(circle at 36% 34%, #FFFEF6 0 18%, #F7F0D8 55%, #EDE2BC 100%);
  box-shadow: inset -.16em -.06em 0 rgba(206, 190, 138, .5), 0 0 .25em rgba(255, 248, 220, .8), 0 0 .8em rgba(255, 234, 180, .55), 0 0 2em rgba(255, 222, 150, .3);
}
.v2-sky .moon::before {
  content: ''; position: absolute; inset: -150%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle closest-side, rgba(255, 236, 184, 0) 21%, rgba(255, 236, 184, .46) 25.5%, rgba(255, 222, 150, .2) 48%, rgba(255, 214, 140, .07) 74%, rgba(255, 210, 140, 0) 100%);
  animation: v2moon-halo 7.4s ease-in-out infinite;
}
.v2-sky .moon::after {
  content: ''; position: absolute; inset: -70%; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle closest-side, rgba(255, 250, 228, 0) 40%, rgba(255, 250, 228, .6) 43%, rgba(255, 238, 190, .24) 58%, rgba(255, 230, 170, 0) 100%),
    repeating-conic-gradient(from 13deg, rgba(255, 240, 205, 0) 0deg, rgba(255, 240, 205, .06) 9deg, rgba(255, 240, 205, 0) 18deg 41deg),
    repeating-conic-gradient(rgba(255, 240, 205, 0) 0deg, rgba(255, 240, 205, .09) 6deg, rgba(255, 240, 205, 0) 12deg 26deg);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 40%, #000 46%, rgba(0, 0, 0, .35) 68%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, transparent 40%, #000 46%, rgba(0, 0, 0, .35) 68%, transparent 100%);
  animation: v2moon-bloom 7.4s ease-in-out -2.2s infinite, v2moon-turn 90s linear infinite;
}
@keyframes v2moon-halo { 0%, 100% { opacity: .3; transform: scale(.92); } 38% { opacity: 1; transform: scale(1.1); } 56% { opacity: .7; transform: scale(1); } 72% { opacity: .92; transform: scale(1.07); } }
@keyframes v2moon-bloom { 0%, 100% { opacity: .2; } 40% { opacity: 1; } 60% { opacity: .6; } 75% { opacity: .85; } }
@keyframes v2moon-turn { to { transform: rotate(360deg); } }
/* lite mode stops every animation on the page (html.lite *, css/controls.css); the moon's are
   opacity and transform only -- no repaint, no layout -- so it keeps its light there */
html.lite .v2-sky .moon::before { animation-duration: 7.4s !important; animation-iteration-count: infinite !important; }
html.lite .v2-sky .moon::after { animation-duration: 7.4s, 90s !important; animation-delay: -2.2s, 0s !important; animation-iteration-count: infinite !important; }
@media (prefers-reduced-motion: reduce) { .v2-sky .moon::before, .v2-sky .moon::after { animation: none !important; opacity: .8; } }
html.motion-off .v2-sky .moon::before, html.motion-off .v2-sky .moon::after { animation: none !important; opacity: .8; }