/* Halflight — the game's own styles: its look (tokens), the dialog, the station, boards, colony and All hands (.wg-raid).
   Reads the host page's --jd-* design tokens; the standalone page defines them. */
@keyframes hl-drift { to { background-position: 113px 59px, -131px 71px, 149px -83px; } }
@keyframes hl-fall { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 10% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--sway, 0), 420px) rotate(650deg); } }
@keyframes hl-bloom { 0%, 100% { transform: scale(.6); opacity: .3; } 50% { transform: scale(1); opacity: .9; } }
@keyframes hl-edge { 50% { box-shadow: 0 0 26px hsl(var(--kc) 60% 60% / .22); } }
@keyframes vx-zoom { 0% { transform: scale(.04); opacity: 0; filter: blur(6px); } 55% { opacity: 1; filter: blur(0); } 100% { transform: scale(1); } }
html.wg-open { overflow: hidden; }
.wg { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  background: rgba(5, 3, 10, 0.82); backdrop-filter: blur(4px); padding: 12px; }
.wg[hidden] { display: none; }
.wg-box { width: min(700px, 100%); max-height: 100%; overflow: auto; background: var(--jd-bg-deep, var(--hl-ink));
  border: 1px solid var(--jd-border); border-radius: 14px; padding: 16px 18px 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.wg-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.wg-kick { margin: 0; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--jd-warning); }
.wg-title { margin: 2px 0 0; font-size: 1.25rem; }
.wg-x { background: transparent; border: 1px solid var(--jd-border); color: var(--jd-text); border-radius: 50%;
  width: 34px; height: 34px; cursor: pointer; flex: none; }
.wg-x:hover, .wg-x:focus-visible { border-color: var(--jd-warning); }
.wg-cv { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 8px; background: var(--hl-ink); touch-action: none; outline: none; }
.wg-cv:focus-visible { box-shadow: 0 0 0 2px var(--jd-warning); }
.wg-intro { margin: 0 0 12px; color: var(--jd-text-secondary); font-size: 0.9rem; }
.wg-act { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; margin: 0 0 10px; padding: 14px 16px;
  background: color-mix(in srgb, var(--jd-bg-deep) 70%, var(--hl-slate)); border: 1px solid var(--jd-border); border-radius: 12px;
  color: var(--jd-text); cursor: pointer; font: inherit; transition: border-color var(--t-quick) var(--e-out), transform var(--t-quick) var(--e-out); }
.wg-act:hover, .wg-act:focus-visible { border-color: var(--jd-warning); transform: translateY(-1px); outline: none; }
.wg-act b { font-size: 1.02rem; }
.wg-act span { color: var(--jd-text-secondary); font-size: 0.86rem; }
.wg-act .wg-act-k { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--jd-warning); }
.wg-book { margin: 6px 0 0; font-size: 0.78rem; color: var(--jd-text-muted); }
.wg-bar { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.wg-back { background: transparent; border: 1px solid var(--jd-border); color: var(--jd-text); border-radius: 999px; padding: 7px 14px; cursor: pointer; font: 600 0.82rem var(--font-body); flex: none; }
.wg-back:hover, .wg-back:focus-visible { border-color: var(--jd-warning); }
.wg-status { margin: 0; font-size: 0.84rem; color: var(--jd-text-secondary); }
.wg-status b { color: var(--jd-warning); }
.wg-fact { margin: 10px 0 0; font-size: 0.78rem; color: var(--jd-text-muted); line-height: 1.5; }
.wg-toast { margin: 0; max-height: 0; overflow: hidden; color: var(--jd-success, var(--hl-sage)); font-size: 0.85rem; font-weight: 600; transition: max-height 0.3s ease, margin 0.3s ease; }
.wg-toast.on { max-height: 60px; margin-top: 10px; }
@media (max-width: 760px) {
  .wg { padding: 0; align-items: stretch; }
  .wg-box { border-radius: 0; width: 100%; padding: 12px; }
}
/* the field board (js/halflight.js + arcade/field.php) */

.wg-priv { margin: 0 0 14px; padding: 10px 12px; border-left: 3px solid var(--jd-warning); background: color-mix(in srgb, var(--jd-bg-deep) 70%, var(--hl-slate));
  border-radius: 0 8px 8px 0; font-size: 0.82rem; color: var(--jd-text-secondary); line-height: 1.5; }
.wg-name { margin: 0 0 12px; }
.wg-name label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--jd-warning); margin-bottom: 6px; }
.wg-name-row { display: flex; gap: 8px; }
.wg-name input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--jd-border); background: var(--jd-bg-deep, var(--hl-ink));
  color: var(--jd-text); font: 500 1rem var(--font-body); }
.wg-name input:focus { outline: none; border-color: var(--jd-warning); }
.wg-go { padding: 10px 18px; border-radius: 10px; border: 1px solid var(--jd-warning); background: var(--jd-warning); color: var(--hl-ink); font: 700 0.92rem var(--font-body); cursor: pointer; }
.wg-go:disabled { opacity: 0.6; cursor: wait; }
.wg-err { margin: 6px 0 0; min-height: 1.2em; font-size: 0.8rem; color: var(--hl-hot); }
.wg-you { margin: 0 0 10px; font-size: 0.86rem; color: var(--jd-text); }
.wg-ranks { list-style: none; margin: 0 0 14px; padding: 0; border-top: 1px solid var(--jd-border-subtle); }
.wg-ranks li { display: grid; grid-template-columns: 3em 1fr auto auto; gap: 10px; align-items: baseline; padding: 8px 4px; border-bottom: 1px solid var(--jd-border-subtle); font-size: 0.88rem; }
.wg-ranks li.me { background: color-mix(in srgb, var(--hl-gild, #EFBA6A) 20%, transparent); box-shadow: inset 4px 0 0 var(--hl-gild, #EFBA6A); border-radius: 8px; border-bottom-color: transparent; }
.wg-ranks li.me .n b { color: var(--hl-gild, #EFBA6A); }
.wg-ranks li.me .r { color: var(--hl-gild, #EFBA6A); }
.wg-youtag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 99px; background: var(--hl-gild, #EFBA6A); color: var(--hl-ink);
  font: 700 .62rem/1.6 var(--font-body, system-ui, sans-serif); letter-spacing: .1em; text-transform: uppercase; font-style: normal; vertical-align: 2px; }
.wg-ranks li.wg-gap { display: block; text-align: center; color: var(--jd-text-muted); padding: 2px 0; letter-spacing: .3em; }
.wg-ranks .r { color: var(--jd-text-muted); font-weight: 700; }
.wg-ranks .n { color: var(--jd-text); font-weight: 600; overflow-wrap: anywhere; }
.wg-ranks .d { color: var(--jd-text-muted); font-size: 0.78rem; }
.wg-ranks .p { color: var(--jd-warning); font-weight: 700; }
.wg-ranks .wg-wait { display: block; color: var(--jd-text-muted); }
.wg-boardlink { background: none; border: 0; padding: 0; color: var(--jd-warning); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.wg-back2 { background: transparent; border: 1px solid var(--jd-border); color: var(--jd-text); border-radius: 999px; padding: 7px 14px; cursor: pointer; font: 600 0.82rem var(--font-body); }
@media (max-width: 760px) {
  .wg-ranks li { grid-template-columns: 2.4em 1fr auto; }
  .wg-ranks .d { display: none; }
}
/* the station log (js/halflight.js) */

.wg-logcard { border-color: color-mix(in srgb, var(--jd-warning) 55%, var(--jd-border)); }
.wg-shared .wg-act-k { color: var(--jd-success, var(--hl-sage)); }
.wg-status-card { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; align-items: center; padding: 14px 16px; margin: 0 0 14px;
  border: 1px solid var(--jd-border); border-radius: 12px; background: color-mix(in srgb, var(--jd-bg-deep) 70%, var(--hl-slate)); }
.wg-officer { display: flex; gap: 10px; align-items: center; }
.wg-officer b { display: block; font-size: 1rem; }
.wg-officer span { font-size: 0.8rem; color: var(--jd-text-muted); }
.wg-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--jd-warning); color: var(--hl-ink); font: 700 1.1rem var(--font-display, Georgia); }
.wg-level { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.wg-lv-name { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--jd-warning); }
.wg-lv-bar { height: 8px; border-radius: 99px; background: rgba(240,235,247,0.1); overflow: hidden; }
.wg-lv-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--jd-warning), var(--hl-sage)); border-radius: 99px; transition: width 0.6s ease; }
.wg-lv-sub { font-size: 0.78rem; color: var(--jd-text-secondary); }
.wg-status-card .wg-meta { grid-column: 1 / -1; margin: 0; }
.wg-meta { font-size: 0.78rem; color: var(--jd-text-muted); margin: 6px 0 12px; }
.wg-h { font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--jd-text-muted); margin: 14px 0 8px; font-family: var(--font-body); }
.wg-quest { padding: 12px 14px; margin: 0 0 8px; border-radius: 10px; border: 1px solid var(--jd-border-subtle); background: rgba(240,235,247,0.03); }
.wg-quest.ready { border-color: var(--hl-sage); background: rgba(127,196,201,0.08); }
.wg-q-text { margin: 0 0 8px; font-family: var(--font-display, Georgia); font-style: italic; font-size: 0.98rem; color: var(--jd-text); line-height: 1.45; }
.wg-q-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.wg-q-prog { font-size: 0.8rem; color: var(--jd-text-secondary); flex: 1; min-width: 12ch; }
.wg-quest.ready .wg-q-prog { color: var(--hl-sage); font-weight: 700; }
.wg-proof { margin-top: 10px; }
.wg-proof label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--jd-warning); }
.wg-proof textarea { display: block; width: 100%; margin-top: 6px; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--jd-border);
  background: var(--jd-bg-deep, var(--hl-ink)); color: var(--jd-text); font: 400 0.92rem var(--font-body); resize: vertical; box-sizing: border-box; }
.wg-proof textarea:focus { outline: none; border-color: var(--jd-warning); }
.wg-journal { list-style: none; margin: 0 0 14px; padding: 0; }
.wg-journal li { display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--jd-border-subtle); }
.wg-journal b { font-size: 0.9rem; }
.wg-when { margin-left: 8px; font-size: 0.74rem; color: var(--jd-text-muted); }
.wg-note { margin: 4px 0 0; font-style: italic; color: var(--jd-text); font-size: 0.88rem; overflow-wrap: anywhere; }
.wg-thanks { margin: 4px 0 0; font-size: 0.78rem; color: var(--jd-text-muted); }
.wg-stamp { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 1rem;
  border: 2px dashed var(--jd-warning); color: var(--jd-warning); transform: rotate(-8deg); }
.wg-qh { color: var(--jd-warning); }
.wg-stn { margin: 0 0 12px; }
.wg-mods { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.wg-mod { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(127,196,201,0.4); color: var(--hl-sage); }
.wg-mod.bad { border-color: var(--hl-hot); color: var(--hl-rose); background: rgba(242,102,95,0.12); }
/* things that need you, said calmly: warm amber, never alarm red (easy-going, 2026-10-03) */
.wg-alert { padding: 12px 14px; margin: 0 0 10px; border-radius: 12px; border: 1px solid rgba(234,132,67,.45); background: rgba(234,132,67,.08); }
.wg-alert b { color: var(--hl-ember); display: block; margin-bottom: 4px; }
.wg-alert p { margin: 0 0 10px; font-size: 0.86rem; color: var(--jd-text-secondary); }
.wg-roverline { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--jd-border-subtle); font-size: 0.84rem; color: var(--jd-text-secondary); margin: 0 0 10px; }
.wg-act.wg-blocked { border-color: rgba(242,102,95,0.6); }
.wg-act.wg-blocked .wg-act-k { color: var(--hl-rose); }
.wg-quest.wg-urgent { border-color: var(--hl-hot); background: rgba(242,102,95,0.08); }
.wg-quest.wg-urgent .wg-q-prog { color: var(--hl-rose); font-weight: 700; }
/* the endgame (js/halflight.js + arcade/firstlife.php) */

.wg-act.wg-deep { border-color: var(--hl-lilac); background: linear-gradient(135deg, rgba(80,56,130,0.35), rgba(20,16,36,0.6)); }
.wg-act.wg-deep .wg-act-k { color: var(--hl-veil); }
.wg-act.wg-boss { border-color: var(--hl-rose); background: linear-gradient(135deg, rgba(130,40,80,0.4), rgba(20,16,36,0.6)); }
.wg-act.wg-boss .wg-act-k { color: #F0A88A; }
.wg-act.wg-locked { opacity: 0.6; cursor: default; border-style: dashed; }
.wg-act.wg-locked:hover { transform: none; border-color: var(--jd-border); }
.wg-hard { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--hl-rose); color: #F0A88A; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; }
.wg-endhero { padding: 16px 18px; margin: 0 0 14px; border-radius: 12px; border: 1px solid var(--hl-lilac); background: linear-gradient(135deg, rgba(80,56,130,0.3), rgba(20,16,36,0.5)); }
.wg-endhero h3 { margin: 0 0 8px; font-size: 1.4rem; }
.wg-endhero p { margin: 0 0 8px; color: var(--jd-text-secondary); font-size: 0.92rem; line-height: 1.55; }
.wg-endboards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) {
  .wg-endboards { grid-template-columns: 1fr; }
}
/* reserves, difficulty, surveys, game over */

.wg-reserves { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin: 0 0 8px; font-size: 0.78rem; }
.wg-res { color: var(--jd-warning); font-weight: 700; letter-spacing: 0.06em; }
.wg-diff { color: var(--jd-text-muted); }
.wg-survey { border-color: var(--hl-rose); color: #F0A88A; }
.wg-over { border-color: var(--hl-hot); background: linear-gradient(135deg, rgba(140,40,40,0.35), rgba(20,16,36,0.6)); }
/* Halflight begins on Mercury — the opening callout and the outward route */

.wg-opening { padding: 14px 16px; margin: 0 0 14px; border-radius: 12px; border: 1px solid var(--hl-ember); background: linear-gradient(135deg, rgba(150,90,40,0.32), rgba(20,16,36,0.5)); }
.wg-opening b { display: block; font-size: 1.15rem; letter-spacing: 0.04em; margin: 0 0 6px; color: var(--hl-gild); }
.wg-opening b::before { content: '◑ '; }
.wg-opening p { margin: 0 0 6px; color: var(--jd-text-secondary); font-size: 0.9rem; line-height: 1.55; }
.wg-route { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; counter-reset: wgr; }
.wg-route li { counter-increment: wgr; font-size: 0.8rem; padding: 4px 10px; border-radius: 999px; border: 1px dashed rgba(255,255,255,0.22); color: var(--jd-text-secondary); opacity: 0.65; }
.wg-route li::before { content: counter(wgr) ' · '; opacity: 0.6; }
.wg-route li.on { border-style: solid; border-color: var(--hl-ember); color: var(--hl-gild); opacity: 1; }
.wg-route li.here { outline: 2px solid var(--hl-lilac); outline-offset: 1px; opacity: 1; }
/* ---------- Halflight's own look ----------
   Ryan (2026-10-02). Ink, bone and silver; copper gold for main
   quests, lilac for side quests, ice-teal for anything unanswered. Soft
   per-officer tinted boxes, a low horizon glow, falling stars when a reply goes
   out, and a slow 18-second breath. Voices in Cormorant Garamond, UI in Jost. */

/* The palette (ART.md, 2026-10-03: Ryan's reference art): burnt orange against slate blue on ink,
   warm lamps against a cold sky, and a printed grain over everything. The token names are the
   old ones so every rule below keeps working: gild is now the hot Signal orange, lilac the cool
   Dust blue, sage the muted green for "done", ember the Lamp glow. */
:root {
  --hl-ink: #17181B; --hl-raised: #222020; --hl-edge: #3D3734;
  --hl-bone: #EEE0CC; --hl-bone-dim: #CBBCA8; --hl-silver: #BDB3A9; --hl-silver-dim: #9A9088;
  --hl-lilac: #8E9AB0; --hl-sage: #A9B886; --hl-rose: #D98B6A; --hl-gild: #EA8443; --hl-hot: #E8604A;
  --hl-veil: #6E7787; --hl-ember: #F8C68F; --hl-hue: 218; --hl-breathe: 18s; --hl-sheen: rgba(248,198,143,.12);
  --hl-slate: #394251; --hl-rust: #9C5532; --hl-signal: #E07131;
  /* the film grain: warm speckle on a 160px tile; it moves (see .wg::after), never sits still on a surface */
  --hl-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .87 0 0 0 0 .78 1.4 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}
.wg {
  --jd-warning: var(--hl-gild); --jd-success: var(--hl-sage); --jd-heading: var(--hl-bone);
  --jd-text: var(--hl-bone); --jd-text-secondary: var(--hl-bone-dim); --jd-text-muted: var(--hl-silver-dim);
  --jd-border: var(--hl-edge); --jd-border-subtle: rgba(39,31,53,.75); --jd-bg-deep: var(--hl-ink);
  --font-body: "Jost", "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --hl-voice: "Cormorant Garamond", "Fraunces", Georgia, serif;
  color: var(--hl-bone); font-family: var(--font-body); font-weight: 400;
  background:
    radial-gradient(170% 62% at 50% 132%, transparent 62%, rgba(224,113,49,.26) 63%, rgba(156,85,50,.16) 68%, transparent 72%),
    radial-gradient(140% 34% at 50% 112%, hsl(var(--hl-hue) 20% 18% / .6), transparent 70%),
    radial-gradient(3px 3px at 14% 18%, rgba(239,186,106,.9), transparent),
    radial-gradient(3px 3px at 82% 12%, rgba(239,186,106,.7), transparent),
    radial-gradient(2px 2px at 64% 30%, rgba(237,231,244,.6), transparent),
    radial-gradient(2px 2px at 30% 8%, rgba(237,231,244,.5), transparent),
    rgba(10, 10, 12, 0.58);
}
/* Film grain that moves (Ryan, 2026-10-03: "I like the film grain … but it looks strange that it's
   stationary … all of those dots and have them so still"). One layer over the whole screen,
   jumping to a new spot about ten times a second like real film. Only its transform moves, so
   it's cheap. Nobody who asks for reduced motion sees it: still grain is what looked wrong. */
@keyframes hl-grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -10%); }
  20% { transform: translate(-15%, 5%); }
  30% { transform: translate(7%, -25%); }
  40% { transform: translate(-5%, 25%); }
  50% { transform: translate(-15%, 10%); }
  60% { transform: translate(15%, 0); }
  70% { transform: translate(0, 15%); }
  80% { transform: translate(3%, 35%); }
  90% { transform: translate(-10%, 10%); }
}
.wg::after {
  content: ""; position: fixed; inset: -100%; z-index: 3; pointer-events: none;
  background: var(--hl-grain); opacity: .55; mix-blend-mode: soft-light;
  animation: hl-grain 1s steps(10) infinite;
}
@media (prefers-reduced-motion: reduce) { .wg::after { display: none; } }
.wg h2, .wg h3 { font-family: var(--font-display); color: var(--hl-bone); }
.wg-box, .wg-act, .wg-status-card, .wg-quest, .wg-endhero, .wg-opening, .wg-signal, .wg-reply {
  --kc: var(--hl-hue);
}
/* The panel is frosted glass (Ryan: "I think the panel should be glass"): the world behind shows
   through, blurred, under a faint warm sheen. Where a browser can't blur, it falls back to solid. */
.wg-box {
  background:
    linear-gradient(160deg, rgba(255,236,210,.09), rgba(255,236,210,.02) 38%, transparent 60%),
    radial-gradient(120% 90% at 18% 0%, hsl(var(--kc) 32% 22% / .28), transparent 60%),
    radial-gradient(130% 100% at 85% 100%, hsl(var(--kc) 40% 16% / .24), transparent 55%),
    rgba(23, 24, 27, .6);
  -webkit-backdrop-filter: blur(28px) saturate(140%); backdrop-filter: blur(28px) saturate(140%);
  border-color: rgba(238, 224, 204, .16);
  box-shadow: 0 24px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255, 236, 210, .2), inset 0 0 0 1px rgba(255, 255, 255, .02);
  position: relative; z-index: 1;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .wg-box { background-color: rgba(23, 24, 27, .94); }
}
.wg-kick { color: var(--hl-gild); }
.wg-act, .wg-status-card, .wg-quest {
  background:
    linear-gradient(160deg, rgba(255,236,210,.07), rgba(255,236,210,.015) 50%),
    radial-gradient(120% 90% at 18% 0%, hsl(var(--kc) 32% 22% / .22), transparent 60%),
    rgba(34, 32, 32, .42);
  border-color: rgba(238, 224, 204, .13);
  box-shadow: inset 0 1px 0 rgba(255, 236, 210, .1);
}
.wg-act:hover, .wg-act:focus-visible { border-color: hsl(var(--kc) 44% 58% / .9); box-shadow: 0 0 18px hsl(var(--kc) 60% 60% / .18); }
.wg-quest.ready { border-color: var(--hl-sage); }
.wg-officer .wg-avatar, .wg-avatar { background: radial-gradient(circle at 35% 30%, hsl(var(--kc, 268) 60% 78%), hsl(var(--kc, 268) 45% 52%)); color: var(--hl-ink); font-family: var(--font-display); }
.wg-officer { --kc: var(--hl-hue); }
.wg-q-text, .wg-voice, .wg-note, .wg-opening p { font-family: var(--hl-voice); }
.wg-q-text { font-size: 1.12rem; line-height: 1.42; font-style: italic; }
.wg-note { font-size: 1rem; }
.wg-opening p { font-size: 1.06rem; line-height: 1.5; }
.wg-voice { margin: 0 0 14px; font-size: 1.14rem; font-style: italic; line-height: 1.5; color: var(--hl-bone); border-left: 2px solid var(--hl-gild); padding-left: 12px; }
.wg-endhero .wg-voice { margin-top: 10px; }
/* main quests gold, side quests lilac */

.wg-act.wg-main, .wg-quest.wg-mainq { border-color: color-mix(in srgb, var(--hl-gild) 70%, transparent); position: relative; overflow: hidden; }
.wg-act.wg-main .wg-act-k, .wg-quest.wg-mainq .wg-act-k { color: var(--hl-gild); }
.wg-act.wg-main::after, .wg-signal::after {            /* still stars, one slow drifting layer */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image:
    radial-gradient(1px 1px at 12px 18px, rgba(237,231,244,.8), transparent),
    radial-gradient(1px 1px at 61px 43px, rgba(239,186,106,.7), transparent),
    radial-gradient(1.5px 1.5px at 97px 9px, rgba(203,182,255,.8), transparent);
  background-size: 113px 59px, 131px 71px, 149px 83px;
  animation: hl-drift 80s linear infinite;
}
.wg-act.wg-logcard { border-color: color-mix(in srgb, var(--hl-lilac) 60%, transparent); }
.wg-act.wg-logcard .wg-act-k, .wg-quest .wg-act-k { color: var(--hl-lilac); }
.wg-quest .wg-act-k { display: block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; }
.wg-quest.wg-urgent .wg-act-k { color: var(--hl-rose); }
.wg-shared .wg-act-k { color: var(--hl-sage); }
/* the signal slip, the steps, the sent reply */

.wg-signal { position: relative; overflow: hidden; margin: 12px 0 14px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--hl-edge);
  background: linear-gradient(135deg, hsl(268 35% 16% / .8), var(--hl-raised)); }
.wg-signal.unanswered { border-color: var(--hl-sage); box-shadow: 0 0 22px rgba(127,196,201,.12); }
.wg-signal .wg-act-k, .wg-reply .wg-act-k { display: block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hl-sage); margin-bottom: 8px; }
.wg-signal .wg-q-text { margin: 0; font-size: 1.2rem; color: var(--hl-bone); }
.wg-steps { list-style: none; margin: 0 0 8px; padding: 0; }
.wg-steps li { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--jd-border-subtle); font-size: 0.9rem; color: var(--hl-bone-dim); }
.wg-steps li.done { color: var(--hl-bone); }
.wg-tick { color: var(--hl-silver-dim); flex: none; }
.wg-steps li.done .wg-tick { color: var(--hl-gild); }
.wg-reply { margin: 10px 0 14px; padding: 14px 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--hl-gild) 60%, transparent);
  background: linear-gradient(135deg, rgba(239,186,106,.12), var(--hl-raised)); }
.wg-reply .wg-act-k { color: var(--hl-gild); }
.wg-stamp-reply { border-color: var(--hl-gild); color: var(--hl-gild); }
.wg-stamp-curio { border-color: var(--hl-lilac); color: var(--hl-lilac); }
.wg-stamp-repair { border-color: var(--hl-ember); color: var(--hl-ember); }
.wg-go { background: linear-gradient(180deg, #F5CB86, var(--hl-gild)); border-color: var(--hl-gild); color: var(--hl-ink); }
.wg-lv-bar { background: var(--hl-edge); }
.wg-lv-bar i { background: linear-gradient(90deg, var(--hl-gild), var(--hl-lilac)); }
.wg-route li.on { border-color: var(--hl-gild); color: var(--hl-gild); }
.wg-route li.here { outline-color: var(--hl-sage); }
/* falling stars when a reply goes out */

.wg-starfall { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; border-radius: inherit; }
.wg-starfall i { position: absolute; top: -20px; clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  animation: hl-fall 1.8s cubic-bezier(.3,.1,.6,1) forwards; opacity: 0; }
/* the loader */

.wg-bloom { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--hl-gild); vertical-align: -2px; margin-right: 8px; animation: hl-bloom 1.6s ease-in-out infinite; }
/* the 18-second breath, on the box edges */

.wg-act.wg-main, .wg-signal.unanswered { animation: hl-edge calc(var(--hl-breathe) * 0.5) ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .wg-act.wg-main::after, .wg-signal::after, .wg-act.wg-main, .wg-signal.unanswered, .wg-bloom { animation: none; }
  .wg-starfall { display: none; }
}
/* the one clear next step at every base (and the "take me there" card) */

.wg-next { position: relative; overflow: hidden; margin: 0 0 14px; padding: 16px 18px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--hl-gild) 75%, transparent);
  background: radial-gradient(120% 90% at 18% 0%, rgba(239,186,106,.16), transparent 60%), var(--hl-raised);
  animation: hl-edge calc(var(--hl-breathe) * 0.5) ease-in-out infinite; --kc: 36; }
.wg-next .wg-act-k { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hl-gild); margin-bottom: 6px; }
.wg-next b { display: block; font-family: var(--font-display); font-size: 1.25rem; color: var(--hl-bone); margin-bottom: 4px; }
.wg-next p { margin: 0 0 12px; color: var(--hl-bone-dim); font-size: 0.92rem; line-height: 1.5; }
.wg-next .wg-go { font-size: 1rem; padding: 11px 22px; }
.wg-opening .wg-inline, .wg-inline { display: inline; font-family: inherit; font-size: inherit; color: var(--hl-gild); }
.wg-status-card { grid-template-columns: 1fr; }
@media (prefers-reduced-motion: reduce) {
  .wg-next { animation: none; }
}
/* ---------- Halflight on a phone first (Ryan, 2026-10-02: progressive disclosure,
   small and minimal, adaptive — desktop gets the extra lines, phones don't) ---------- */

.wg-next { display: flex; gap: 14px; align-items: flex-start; }
.wg-next-body { flex: 1; min-width: 0; }
.wg-next > .wg-ic { width: 46px; height: 46px; font-size: 1.35rem; }
.wg-unlock { margin: 0 0 12px !important; font-size: 0.82rem !important; color: var(--hl-sage) !important; }
.wg-ic { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 1.05rem; line-height: 1;
  color: var(--hl-gild); background: radial-gradient(circle at 35% 30%, rgba(239,186,106,.22), rgba(239,186,106,.06)); border: 1px solid rgba(239,186,106,.35); }
.wg-ic-garden { color: var(--hl-sage); border-color: rgba(159,211,155,.4); background: radial-gradient(circle at 35% 30%, rgba(159,211,155,.22), rgba(159,211,155,.05)); }
.wg-ic-gather { color: var(--hl-ember); border-color: rgba(236,154,112,.4); background: radial-gradient(circle at 35% 30%, rgba(236,154,112,.22), rgba(236,154,112,.05)); }
.wg-ic-stars { color: var(--hl-lilac); border-color: rgba(169,140,230,.45); background: radial-gradient(circle at 35% 30%, rgba(169,140,230,.24), rgba(169,140,230,.05)); }
.wg-ic-fish { color: var(--hl-sage); border-color: rgba(127,196,201,.45); background: radial-gradient(circle at 35% 30%, rgba(127,196,201,.22), rgba(127,196,201,.05)); }
.wg-ic-tend { color: var(--hl-rose); border-color: rgba(227,128,156,.45); background: radial-gradient(circle at 35% 30%, rgba(227,128,156,.22), rgba(227,128,156,.05)); }
.wg-ic.done { color: var(--hl-ink); background: var(--hl-sage); border-color: var(--hl-sage); font-weight: 700; }
/* compact rows: an icon, a title, one short line */

.wg-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; margin: 0 0 8px; padding: 10px 12px;
  background: var(--hl-raised); border: 1px solid var(--hl-edge); border-radius: 12px; color: var(--hl-bone); font: inherit; cursor: pointer; }
button.wg-row:hover, button.wg-row:focus-visible { border-color: hsl(268 44% 58% / .9); outline: none; }
div.wg-row { cursor: default; }
.wg-row-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wg-row-t b { font-size: 0.95rem; font-weight: 600; }
.wg-row-t span { font-size: 0.78rem; color: var(--hl-silver-dim); }
.wg-row.wg-blocked { border-color: rgba(242,102,95,.55); }
.wg-row.wg-favour { border-color: color-mix(in srgb, var(--hl-lilac) 45%, transparent); }
.wg-row.ready { border-color: var(--hl-sage); }
.wg-row .wg-proof { flex-basis: 100%; }
.wg-row:has(.wg-proof) { flex-wrap: wrap; }
.wg-sm { padding: 7px 14px !important; font-size: 0.82rem !important; flex: none; }
.wg-route li.more { border: 0; opacity: .6; }
.wg-reserves { gap: 4px 12px; }
.wg-status-card { padding: 12px 14px; }
.wg-lv-name { font-size: 0.7rem; }
/* adaptive: phones drop the extra lines entirely */

@media (max-width: 760px) {
  .wg-wide { display: none !important; }
  .wg-opening { padding: 12px 14px; }
  .wg-opening b { font-size: 1.05rem; }
  .wg-opening p { font-size: 0.98rem; }
  .wg-intro { font-size: 0.84rem; margin-bottom: 10px; }
  .wg-next { padding: 14px; gap: 12px; }
  .wg-next b { font-size: 1.1rem; }
  .wg-next > .wg-ic { width: 40px; height: 40px; font-size: 1.15rem; }
  .wg-title { font-size: 1.1rem; }
  .wg-h { margin: 12px 0 6px; }
  .wg-cv { aspect-ratio: 16 / 11; }
}
.wg-route li.more::before { content: none; }
.wg-alt { margin-left: 10px; font-size: 0.84rem; }
/* facts while you play (one at a time, rotating) */

.wg-tip { margin: 10px 0 0; min-height: 2.9em; font-size: 0.86rem; line-height: 1.45; color: var(--hl-bone-dim); opacity: 0; transition: opacity .25s ease; }
.wg-tip.on { opacity: 1; }
.wg-tip span { color: var(--hl-gild); font-weight: 600; font-size: 0.7rem; letter-spacing: .1em; text-transform: uppercase; margin-right: 4px; }
.wg-fact:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
  .wg-tip { transition: none; }
}
/* one leaderboard: rank · badge · name over title · points */

.wg-ranks li { grid-template-columns: 2.6em 2em 1fr auto; align-items: center; }
.wg-ranks .bd { width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center; font-size: 1rem; line-height: 1;
  color: var(--hl-gild); background: radial-gradient(circle at 35% 30%, rgba(239,186,106,.25), rgba(239,186,106,.05)); border: 1px solid rgba(239,186,106,.35); }
.wg-ranks .n b { display: block; font-weight: 600; color: var(--hl-bone); }
.wg-ranks .n em { display: block; font-style: normal; font-size: .74rem; color: var(--hl-silver-dim); }
@media (max-width: 760px) {
  .wg-ranks li { grid-template-columns: 2.2em 2em 1fr auto; }
}
/* the very end: humanity saved */

.wg-endhero.wg-humanity { border-color: var(--hl-sage); background: radial-gradient(120% 90% at 50% 0%, rgba(127,196,201,.22), transparent 60%), linear-gradient(135deg, rgba(60,90,70,.35), rgba(20,16,36,.6)); }
.wg-endhero.wg-humanity h3 { color: var(--hl-sage); }
/* your leaderboard icon: appears once you've put a name on the board (Ryan, 2026-10-02) */

.hl-me { position: absolute; top: 134px; right: 22px; z-index: 6; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px;
  border-radius: 999px; border: 1px solid rgba(239,186,106,.45); background: rgba(23,24,27,.82); color: var(--hl-bone); cursor: pointer;
  font: 600 .74rem "Inter", system-ui, sans-serif; letter-spacing: .02em; backdrop-filter: blur(4px); animation: vx-zoom .5s cubic-bezier(.18,.9,.25,1.15) both;
  transition: border-color .15s ease, transform .15s ease; }
.hl-me:hover, .hl-me:focus-visible { border-color: #EFBA6A; transform: translateY(-1px); outline: none; }
.hl-me-t { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.hl-me-n { font-weight: 700; color: var(--hl-gild); max-width: 12em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-me-s { font-size: .74em; opacity: .85; }
.hl-me-b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .95rem; color: var(--hl-gild);
  background: radial-gradient(circle at 35% 30%, rgba(239,186,106,.3), rgba(239,186,106,.06)); border: 1px solid rgba(239,186,106,.4); }
.vista-deck:not(.vista-on-moon) .hl-me { top: auto; bottom: 120px; }
@media (max-width: 760px) {
  .hl-me { top: 62px; right: 12px; }
  .vista-deck:not(.vista-on-moon) .hl-me { top: auto; bottom: 26px; }
}
/* your stats, at the top of the leaderboard */

.wg-mecard { display: flex; gap: 12px; align-items: center; padding: 12px 14px; margin: 0 0 12px; border-radius: 12px; border: 1px solid rgba(239,186,106,.5);
  background: radial-gradient(120% 90% at 18% 0%, rgba(239,186,106,.14), transparent 60%), var(--hl-raised); }
.wg-mecard .bd { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem; color: var(--hl-gild);
  background: radial-gradient(circle at 35% 30%, rgba(239,186,106,.3), rgba(239,186,106,.06)); border: 1px solid rgba(239,186,106,.45); }
.wg-mecard b { display: block; font-size: 1.02rem; }
.wg-mecard em { display: block; font-style: normal; color: var(--hl-gild); font-size: .84rem; }
.wg-mecard span:not(.bd) { display: block; font-size: .76rem; color: var(--hl-silver-dim); margin-top: 2px; }
.wg-mecard span.wg-me-k { margin: 0 0 1px; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hl-gild, #EFBA6A); }
.wg-boardbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wg-forget { font-size: .78rem; color: var(--hl-silver-dim); }
/* badges: the strip on your stats card, and the gallery */

.wg-badgestrip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; padding: 0; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.wg-badgestrip i { font-style: normal; min-width: 24px; height: 24px; padding: 0 3px; border-radius: 12px; display: grid; place-items: center; font-size: .78rem; color: var(--hl-gild);
  background: rgba(239,186,106,.12); border: 1px solid rgba(239,186,106,.35); }
.wg-badgestrip span { flex-basis: 100%; font-size: .74rem; color: var(--hl-lilac); margin-top: 2px; }
.wg-badgestrip:hover span, .wg-badgestrip:focus-visible span { text-decoration: underline; }
.wg-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0 0 6px; }
.wg-badge { display: grid; grid-template-columns: 34px 1fr; gap: 0 10px; align-items: center; padding: 9px 10px; border-radius: 12px; border: 1px dashed var(--hl-edge); background: var(--hl-raised); opacity: .7; }
.wg-badge .g { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 1.05rem; color: var(--hl-silver-dim); border: 1px dashed var(--hl-silver-dim); }
.wg-badge b { font-size: .8rem; line-height: 1.25; }
.wg-badge em { font-style: normal; font-size: .7rem; color: var(--hl-silver-dim); line-height: 1.3; }
.wg-badge.got { opacity: 1; border-style: solid; border-color: rgba(239,186,106,.45); }
.wg-badge.got .g { color: var(--hl-gild); border: 1px solid rgba(239,186,106,.5); background: radial-gradient(circle at 35% 30%, rgba(239,186,106,.3), rgba(239,186,106,.05)); }
.wg-badge.got em { color: var(--hl-bone-dim); }
.wg-badge.part { opacity: .9; border-style: solid; }
.wg-badge.part .g { color: var(--hl-bone-dim); border-style: solid; }
@media (max-width: 760px) {
  .wg-badges { grid-template-columns: 1fr 1fr; }
}
/* world events (Ryan, 2026-10-02): the place fights back for a while */

.wg-alert.wg-event { border-color: rgba(238,122,51,.55); background: linear-gradient(90deg, rgba(238,122,51,.16), rgba(238,122,51,.04)); }
.wg-alert.wg-event b { color: #F5A25A; }
.wg-evchip { display: inline-block; padding: 1px 8px; margin-right: 4px; border-radius: 999px; background: rgba(238,122,51,.2); border: 1px solid rgba(238,122,51,.5); color: #F5A25A; font-weight: 700; white-space: nowrap; }
.wg-support { margin: 4px 0 8px; font-style: italic; }
/* after life is found: restart harder now, or keep playing (Ryan, 2026-10-02) */

.wg-choice { display: grid; gap: 10px; margin: 12px 0 4px; text-align: left; }
.wg-choice-opt { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--hl-edge, rgba(196,178,232,.3)); background: var(--hl-raised, rgba(255,255,255,.04)); }
.wg-choice-opt b { display: block; margin-bottom: 4px; color: var(--hl-gild, #EFBA6A); }
.wg-choice-opt p { margin: 0 0 10px; font-size: .86rem; color: var(--jd-text-secondary, var(--hl-bone-dim)); }
/* the common goal: everyone's work at a base adds up (Ryan, 2026-10-03) */

.wg-colony { padding: 12px 14px; margin: 0 0 10px; border-radius: 12px; border: 1px solid rgba(155,211,155,.4); background: linear-gradient(90deg, rgba(155,211,155,.10), rgba(155,211,155,.02)); }
.wg-colony b { display: block; color: var(--hl-sage); margin-bottom: 4px; }
.wg-colony p { margin: 0 0 8px; font-size: .86rem; color: var(--jd-text-secondary, var(--hl-bone-dim)); }
.wg-colony-bar { height: 6px; border-radius: 3px; background: rgba(240,235,247,.1); overflow: hidden; margin: 2px 0 6px; }
.wg-colony-bar i { display: block; height: 100%; background: var(--hl-sage); border-radius: 3px; }
.wg-colony-perks { list-style: none; margin: 0; padding: 0; font-size: .8rem; color: var(--jd-text-muted, var(--hl-silver-dim)); }
.wg-colony-perks li.got { color: var(--hl-sage); }
.wg-colony .wg-here { margin: 8px 0 6px; color: var(--hl-sage); font-size: .84rem; }
.wg-colony .wg-rigor { margin: 0 0 6px; color: var(--hl-bone-dim); font-size: .82rem; }   /* information, not a caution: no amber */
.wg-raid { padding: 12px 14px; margin: 0 0 10px; border-radius: 12px; border: 1px solid rgba(234,132,67,.45); background: linear-gradient(90deg, rgba(234,132,67,.12), rgba(234,132,67,.02)); }
.wg-raid b { display: block; color: var(--hl-ember); margin-bottom: 4px; }
.wg-raid p { margin: 0 0 8px; font-size: .86rem; color: var(--jd-text-secondary, var(--hl-bone-dim)); }
.wg-raid .wg-colony-bar i { background: #F09080; }
.wg-raid.won { border-color: rgba(155,211,155,.5); background: linear-gradient(90deg, rgba(155,211,155,.12), rgba(155,211,155,.02)); }
.wg-raid.won b { color: var(--hl-sage); }
.wg-raid.won .wg-colony-bar i { background: var(--hl-sage); }
.wg-raid.lost { opacity: .8; }
.wg-team { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 6px; }
.wg-team li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(191,216,230,.04); border: 1px solid rgba(191,216,230,.2); font-size: .82rem; color: var(--jd-text-secondary, var(--hl-bone-dim)); }
.wg-team li .cw-code { font-size: .74rem; }
.cw-team-who { display: block; margin-top: 3px; }
.wg-team .wg-go { flex: none; padding: 6px 12px; font-size: .8rem; }
/* easy-going or Challenge, at the foot of every station */
.wg-mode { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin: 4px 0 12px; padding: 10px 14px;
  border-radius: 12px; border: 1px solid rgba(238,224,204,.1); background: rgba(255,236,210,.03); font-size: .84rem; color: var(--hl-bone-dim); }
.wg-mode .wg-boardlink { margin: 0; }
.wg-easy-why { margin: 0 0 10px; }
.wg-res.low { color: var(--hl-ember); background: rgba(234,132,67,.14); border-radius: 99px; padding: 1px 9px; }
.wg-res-why { margin: -2px 0 10px; font-size: .78rem; }
.wg-keep { margin: 8px 0 12px; padding-left: 1.1em; font-size: .9rem; line-height: 1.5; color: var(--hl-bone-dim); }
.wg-keep li { margin: 0 0 6px; }
/* ---------------- caution & warning (halflight.js: cwItems, cwPanel, cwMaster) ----------------
   Modelled on crewed-spacecraft C&W. Red and amber are reserved for it: red = WARNING (act now or
   something is lost), amber = CAUTION (needs you soon), cool white = ADVISORY. The decorative orange
   elsewhere is a different hue, and every message also names its class in words. Dark when nominal. */
:root { --cw-warning: #E5484D; --cw-caution: #F2C14E; --cw-advisory: #BFD8E6; --cw-nominal: #7FB89A;
  --cw-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; }
.cw { margin: 0 0 10px; border: 1px solid rgba(238,224,204,.12); border-radius: 12px; background: rgba(12,13,15,.55); overflow: hidden; }
.cw-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font: 600 .7rem/1.2 var(--cw-mono); letter-spacing: .12em; color: var(--hl-bone-dim); }
.cw-title { font-weight: 800; color: var(--hl-bone); }
.cw-sum { flex: 1; }
.cw-clock { font-variant-numeric: tabular-nums; opacity: .75; }
.cw.nominal .cw-sum { color: var(--cw-nominal); }
.cw.nominal .cw-sum::before { content: "● "; }
.cw-item { display: grid; grid-template-columns: 5px minmax(0, 1fr) auto; gap: 0 12px; padding: 10px 12px 10px 0; border-top: 1px solid rgba(238,224,204,.07); }
.cw-warning { color: var(--cw-warning); } .cw-caution { color: var(--cw-caution); } .cw-advisory { color: var(--cw-advisory); }
.cw-item.cw-warning { background: linear-gradient(90deg, rgba(229,72,77,.18), rgba(229,72,77,.04) 70%); }
.cw-item.cw-caution { background: linear-gradient(90deg, rgba(242,193,78,.1), rgba(242,193,78,.02) 70%); }
.cw-lamp { align-self: stretch; background: currentColor; border-radius: 0 3px 3px 0; }
.cw-item.acked .cw-lamp { opacity: .55; }
.cw-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.cw-tag { padding: 2px 6px; border-radius: 3px; font: 800 .64rem/1.2 var(--cw-mono); letter-spacing: .12em; }
.cw-warning .cw-tag { background: var(--cw-warning); color: #fff; }
.cw-caution .cw-tag { background: var(--cw-caution); color: #1A1305; }
.cw-advisory .cw-tag { background: transparent; color: var(--cw-advisory); box-shadow: inset 0 0 0 1px var(--cw-advisory); }
.cw-code { font: 700 .8rem/1.3 var(--cw-mono); letter-spacing: .04em; color: var(--hl-bone); }
.cw-code abbr { text-decoration: none; color: inherit; opacity: .7; }
.cw-t { margin-left: auto; font: .7rem var(--cw-mono); font-variant-numeric: tabular-nums; color: var(--hl-bone-dim); }
.cw-text { margin: 5px 0 3px; font-size: .86rem; line-height: 1.45; color: var(--hl-bone-dim); }
.cw-resp { margin: 0; font-size: .82rem; line-height: 1.4; color: var(--hl-bone); }
.cw-resp::before { content: "RESPOND  "; font: 800 .62rem var(--cw-mono); letter-spacing: .14em; color: var(--hl-bone-dim); }
.cw-acts { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.cw-ack { min-height: 40px; padding: 0 12px; border-radius: 6px; border: 1px solid currentColor; background: transparent; color: inherit; font: 800 .7rem var(--cw-mono); letter-spacing: .14em; cursor: pointer; }
.cw-do { min-height: 40px; padding: 0 14px; border-radius: 8px; border: 0; background: var(--hl-bone); color: var(--hl-ink); font: 600 .84rem var(--font-body); cursor: pointer; white-space: nowrap; }
.cw-ack:focus-visible, .cw-do:focus-visible, .cw-master:focus-visible { outline: 2px solid var(--hl-bone); outline-offset: 2px; }
/* the master lamp, in the header on every screen */
.cw-master { min-height: 36px; padding: 0 12px; border: 0; border-radius: 6px; font: 800 .66rem var(--cw-mono); letter-spacing: .14em; cursor: pointer; flex: none; }
.cw-master.cw-caution { background: var(--cw-caution); color: #1A1305; box-shadow: 0 0 16px rgba(242,193,78,.45); }
.cw-master.cw-warning { background: var(--cw-warning); color: #fff; box-shadow: 0 0 20px rgba(229,72,77,.6); animation: cw-flash 1s steps(2, jump-none) infinite; }
.cw-item.cw-warning:not(.acked) .cw-lamp { animation: cw-flash 1s steps(2, jump-none) infinite; }
@keyframes cw-flash { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .cw-master.cw-warning, .cw-item.cw-warning .cw-lamp { animation: none; } }
/* annunciators: each system, one lamp */
.cw-ann { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.cw-ann-l { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 5px; border: 1px solid rgba(238,224,204,.09); background: rgba(12,13,15,.45);
  font: 700 .64rem var(--cw-mono); letter-spacing: .12em; color: var(--hl-bone-dim); }
.cw-ann-l i { width: 7px; height: 7px; border-radius: 50%; background: var(--cw-nominal); }
.cw-ann-l.cw-caution, .cw-ann-l.cw-warning, .cw-ann-l.cw-advisory { color: currentColor; border-color: currentColor; }
.cw-ann-l.cw-caution i { background: var(--cw-caution); box-shadow: 0 0 8px var(--cw-caution); }
.cw-ann-l.cw-warning i { background: var(--cw-warning); box-shadow: 0 0 8px var(--cw-warning); }
.cw-ann-l.cw-advisory i { background: var(--cw-advisory); }
/* consumables gauge (Challenge) */
.cw-gauge { display: inline-flex; align-items: center; gap: 8px; font: 700 .7rem var(--cw-mono); letter-spacing: .1em; color: var(--hl-bone-dim); }
.cw-gauge abbr { text-decoration: none; }
.cw-segs { display: inline-flex; gap: 2px; }
.cw-segs i { width: 7px; height: 13px; border-radius: 1px; background: rgba(238,224,204,.12); }
.cw-segs i.on { background: var(--cw-nominal); }
.cw-gauge.cw-caution .cw-segs i.on { background: var(--cw-caution); } .cw-gauge.cw-warning .cw-segs i.on { background: var(--cw-warning); }
.cw-gauge.cw-caution .cw-gauge-n { color: var(--cw-caution); } .cw-gauge.cw-warning .cw-gauge-n { color: var(--cw-warning); }
/* toasts that are cautions or warnings */
.wg-toast.cw-toast { padding-left: 12px; border-left: 4px solid currentColor; font-family: var(--cw-mono); font-size: .8rem; letter-spacing: .02em; }
.wg-toast.cw-caution { color: var(--cw-caution); } .wg-toast.cw-warning { color: var(--cw-warning); }
@media (max-width: 760px) { .cw-item { grid-template-columns: 5px minmax(0, 1fr); } .cw-acts { grid-column: 2; flex-direction: row; margin-top: 8px; } .cw-t { margin-left: 0; } }
/* the alert-sound switch, beside the master lamp */
.cw-sound { min-height: 36px; padding: 0 10px; margin-right: 8px; border-radius: 6px; border: 1px solid rgba(238,224,204,.18); background: transparent;
  color: var(--hl-bone-dim); font: 700 .62rem var(--cw-mono); letter-spacing: .12em; cursor: pointer; flex: none; }
.cw-sound[aria-pressed="false"] { opacity: .6; text-decoration: line-through; }
.cw-sound:focus-visible { outline: 2px solid var(--hl-bone); outline-offset: 2px; }


/* each base's supplies: a habitat consumables page (ART.md, Caution and warning) */
.wg-sup { margin: 0 0 12px; padding: 10px 12px 8px; border-radius: 10px; border: 1px solid rgba(238,224,204,.09); background: rgba(12,13,15,.45); }
.wg-sup-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 8px; font: 600 .7rem/1.3 var(--cw-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--hl-bone-dim); }
.wg-sup-h b { color: var(--hl-bone); font-weight: 700; }
.wg-sup-r { display: grid; grid-template-columns: 3.4em minmax(60px, 30%) 1fr; align-items: center; gap: 4px 10px; margin: 0 0 6px; color: var(--hl-bone-dim); }
.wg-sup-k { font: 700 .66rem var(--cw-mono); letter-spacing: .1em; text-decoration: none; color: var(--hl-bone); }
.wg-sup-bar { position: relative; height: 6px; border-radius: 3px; background: rgba(240,235,247,.08); overflow: hidden; }
.wg-sup-bar i { display: block; height: 100%; border-radius: 3px; background: var(--cw-nominal); }
.wg-sup-bar b { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(238,224,204,.35); }
.wg-sup-r.cw-caution .wg-sup-bar i { background: var(--cw-caution); }
.wg-sup-r.cw-warning .wg-sup-bar i { background: var(--cw-warning); }
.wg-sup-r.cw-caution .wg-sup-k { color: var(--cw-caution); } .wg-sup-r.cw-warning .wg-sup-k { color: var(--cw-warning); }
.wg-sup-n { font: .7rem/1.3 var(--cw-mono); font-variant-numeric: tabular-nums; color: var(--hl-bone-dim); }
.wg-sup-why { margin: 6px 0 4px; font-size: .76rem; }
@media (max-width: 520px) { .wg-sup-r { grid-template-columns: 3.4em 1fr; } .wg-sup-n { grid-column: 1 / -1; text-align: left; margin-top: -2px; } }

/* ---- the bell: every message by urgency (Ryan, 2026-10-05) ---- */
.hl-i { width: 18px; height: 18px; display: block; flex: none; }
.wg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wg-top .wg-bell { margin-left: auto; }
.wg-bell { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; min-width: 40px; padding: 0 10px; margin-right: 8px; flex: none;
  border-radius: 6px; border: 1px solid rgba(238,224,204,.18); background: transparent; color: var(--hl-bone); cursor: pointer; }
.wg-bell .hl-i { width: 19px; height: 19px; }
.wg-bell-t { font: 800 .64rem var(--cw-mono); letter-spacing: .14em; }
.wg-bell.cw-caution { background: var(--cw-caution); border-color: var(--cw-caution); color: #1A1305; box-shadow: 0 0 16px rgba(242,193,78,.45); }
.wg-bell.cw-warning { background: var(--cw-warning); border-color: var(--cw-warning); color: #fff; box-shadow: 0 0 20px rgba(229,72,77,.6); animation: cw-flash 1s steps(2, jump-none) infinite; }
@media (prefers-reduced-motion: reduce) { .wg-bell.cw-warning { animation: none; } }
.wg-bell-n { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font: 800 .62rem/18px var(--cw-mono); text-align: center;
  background: var(--hl-bone); color: var(--hl-ink); box-shadow: 0 0 0 2px var(--hl-ink); }
.wg-bell-n.wg-n-caution { background: var(--cw-caution); color: #1A1305; } .wg-bell-n.wg-n-warning { background: var(--cw-warning); color: #fff; }
.wg-bell:focus-visible, .cw-adv:focus-visible { outline: 2px solid var(--hl-bone); outline-offset: 2px; }
@media (max-width: 520px) { .wg-bell-t { display: none; } }
.cw-sound { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; }
.cw-sound[aria-pressed="false"] { text-decoration: none; }
.wg-box { position: relative; }
.wg-inbox { position: absolute; z-index: 5; top: 64px; right: 16px; width: min(440px, calc(100% - 32px)); max-height: min(70vh, 620px); overflow: auto; padding: 12px 14px 14px;
  border-radius: 12px; border: 1px solid rgba(238,224,204,.16); background: rgba(16,17,20,.97); box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.wg-ib-h { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; }
.wg-ib-h b { font-size: 1rem; color: var(--hl-bone); }
.wg-ib-x { min-height: 32px; padding: 0 10px; border-radius: 6px; border: 1px solid rgba(238,224,204,.18); background: transparent; color: var(--hl-bone-dim); cursor: pointer; font: 600 .76rem var(--font-body, inherit); }
.wg-ib-s { margin: 4px 0 6px; font: 700 .64rem var(--cw-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--hl-bone-dim); }
.wg-ib-f { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
.wg-ib-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 10px; border-radius: 15px; border: 1px solid rgba(238,224,204,.16);
  background: transparent; color: var(--hl-bone-dim); font: 600 .74rem var(--font-body, inherit); cursor: pointer; }
.wg-ib-chip .hl-i { width: 14px; height: 14px; }
.wg-ib-chip[aria-pressed="true"] { background: rgba(238,224,204,.12); color: var(--hl-bone); border-color: rgba(238,224,204,.4); }
.wg-ib-l { list-style: none; margin: 0; padding: 0; }
.wg-ib-m { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 4px 10px; align-items: start; padding: 9px 4px 9px 10px; border-top: 1px solid rgba(238,224,204,.07); }
.wg-ib-m .wg-icw { padding-top: 1px; }
.wg-ib-m.unread::before { content: ""; position: absolute; left: 0; top: 15px; width: 5px; height: 5px; border-radius: 50%; background: var(--hl-bone); }
.wg-ib-b p { margin: 3px 0 0; font-size: .84rem; line-height: 1.45; color: var(--hl-bone); }
.wg-ib-meta { display: flex; align-items: center; gap: 8px; font: .66rem var(--cw-mono); color: var(--hl-bone-dim); }
.wg-ib-m .cw-tag { font-size: .58rem; padding: 1px 5px; }
.wg-ib-m .cw-do { min-height: 34px; align-self: center; font-size: .78rem; padding: 0 10px; }
.wg-n-warning .wg-icw, .wg-ib-chip.wg-n-warning .hl-i { color: var(--cw-warning); }
.wg-n-caution .wg-icw, .wg-ib-chip.wg-n-caution .hl-i { color: var(--cw-caution); }
.wg-n-advisory .wg-icw, .wg-ib-chip.wg-n-advisory .hl-i { color: var(--cw-advisory); }
.wg-n-info .wg-icw, .wg-ib-chip.wg-n-info .hl-i { color: var(--cw-nominal); }
.wg-ib-m.wg-n-warning .cw-tag { background: var(--cw-warning); color: #fff; }
.wg-ib-m.wg-n-caution .cw-tag { background: var(--cw-caution); color: #1A1305; }
.wg-ib-m.wg-n-advisory .cw-tag { color: var(--cw-advisory); box-shadow: inset 0 0 0 1px var(--cw-advisory); }
.wg-ib-m.wg-n-info .cw-tag { color: var(--cw-nominal); box-shadow: inset 0 0 0 1px rgba(127,184,154,.6); }
.wg-ib-empty { margin: 14px 0 4px; color: var(--hl-bone-dim); font-size: .86rem; }
.wg-ib-clear { margin-top: 10px; }
@media (max-width: 520px) { .wg-inbox { top: 56px; right: 8px; width: calc(100% - 16px); max-height: 76vh; } .wg-ib-m { grid-template-columns: 22px minmax(0, 1fr); } .wg-ib-m .cw-do { grid-column: 2; justify-self: start; } }

/* ---- a quieter base page (Ryan, 2026-10-05: "reducing the clutter on each base page") ---- */
.cw .cw-ann { padding: 0 12px 10px; margin: 0; }
.cw.nominal .cw-ann-l { padding: 3px 7px; }
.cw-adv { margin-left: 6px; padding: 2px 7px; border: 0; border-radius: 4px; background: transparent; box-shadow: inset 0 0 0 1px var(--cw-advisory);
  color: var(--cw-advisory); font: 700 .6rem var(--cw-mono); letter-spacing: .12em; cursor: pointer; }
.wg-fold > summary { list-style: none; cursor: pointer; }
.wg-fold > summary::-webkit-details-marker { display: none; }
.wg-fold > summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--hl-bone-dim); border-bottom: 1.5px solid var(--hl-bone-dim); transform: rotate(45deg); margin: -3px 2px 0 auto; flex: none; transition: transform .15s; }
.wg-fold[open] > summary::after { transform: rotate(225deg); margin-top: 3px; }
.wg-fold > summary:focus-visible { outline: 2px solid var(--hl-bone); outline-offset: 3px; border-radius: 6px; }
.wg-sup-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.wg-sup-t { font: 700 .7rem var(--cw-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--hl-bone); }
.wg-sup-chips { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.wg-sup-chip { display: inline-flex; align-items: center; gap: 4px; font: .68rem var(--cw-mono); font-variant-numeric: tabular-nums; color: var(--hl-bone-dim); white-space: nowrap; }
.wg-sup-chip abbr { text-decoration: none; font-weight: 700; color: var(--hl-bone); }
.wg-sup-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--cw-nominal); }
.wg-sup-chip.cw-caution i { background: var(--cw-caution); box-shadow: 0 0 6px var(--cw-caution); } .wg-sup-chip.cw-caution abbr { color: var(--cw-caution); }
.wg-sup-chip.cw-warning i { background: var(--cw-warning); box-shadow: 0 0 6px var(--cw-warning); } .wg-sup-chip.cw-warning abbr { color: var(--cw-warning); }
.wg-sup-days { font: .68rem var(--cw-mono); color: var(--hl-bone-dim); }
.wg-sup[open] .wg-sup-sum { margin-bottom: 8px; }
.wg-sup p.wg-sup-h { margin: 0 0 8px; text-transform: none; letter-spacing: .04em; }
.wg-sup .wg-support { margin: 4px 0 2px; font-style: italic; }
.wg-colony.wg-fold { padding: 10px 14px; }
.wg-col-sum { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px; }
.wg-col-sum b { display: inline; margin: 0; }
.wg-col-k { font-size: .8rem; color: var(--hl-bone-dim); }
.wg-col-sum .wg-colony-bar { grid-column: 1 / 3; margin: 2px 0 0; }
.wg-colony[open] .wg-col-sum { margin-bottom: 8px; }
@media (max-width: 520px) { .wg-col-sum { grid-template-columns: 1fr auto; } .wg-col-k { grid-column: 1; } .wg-col-sum .wg-colony-bar { grid-column: 1; } }
@media (max-width: 520px) { .wg-sup-chip .wg-u { display: none; } .wg-sup-chips { gap: 4px 9px; } }