/* Notus — one palette, two themes. * * Every colour in this file is a token declared below; the dark theme only * redefines tokens. `data-theme` is set on by overlays.js (light | dark; * absent means "follow the system"), and the media query keeps the page correct * before the scripts run. map.js reads the --sea-* / --land-* / --tiles tokens * out of the computed style, so the board follows the theme too. */ :root { color-scheme: light; /* surfaces */ --paper: #f4f1ea; /* the page */ --panel: #fbfaf7; /* sidebar, drawers, dialogs */ --card: #ffffff; /* raised cards, inputs, chips */ --hover: #efece4; /* hover wash, tab strip */ --track: #e5e1d6; /* progress tracks */ --line: #d8d2c4; /* borders */ --line-soft: #eee8dc; /* inner dashed separators */ --rule: #c9c2b3; /* faint marks */ --edge: #999999; /* the left edge of a card */ /* ink */ --ink: #14213d; --dim: #4b5563; /* secondary text */ --muted: #6b7280; --faint: #9ca3af; --slate: #4b5563; /* filled neutral badges (white text on top) */ --halo: #ffffff; /* text-shadow halo over the map */ --wipe: #111111; /* the decrypt wipe */ /* filled buttons */ --fill: #14213d; --fill-hover: #24365f; --on-fill: #ffffff; /* state */ --accent: #c0392b; --accent-wash: rgba(192,57,43,0.08); --accent-line: rgba(192,57,43,0.35); --accent-glow: rgba(192,57,43,0.4); --accent-glow-soft: rgba(192,57,43,0.25); --accent-glow-strong: rgba(192,57,43,0.6); --ok: #1f9d55; --ok-glow: rgba(31,157,85,0.7); --bad: #d23b3b; --warn: #e0a030; --veil: rgba(20,33,61,0.55); --veil-strong: rgba(20,33,61,0.7); /* chrome: the topbar and the control bar stay dark in both themes */ --chrome: #14213d; --chrome-2: #28324d; --chrome-3: #3c4a6b; --chrome-ink: #f4f1ea; --gold: #ffe9b0; --scrub-ink: #ffd9d9; /* intercepted cables (a terminal) */ --secret: #1e2430; --secret-2: #262e3d; --secret-ink: #cfe3b0; --secret-line: #4a5568; --secret-head: #ff9b9b; --communique: #fbf6e6; /* the Gazette's newsprint */ --news: #fbf7ee; --news-ink: #1e1e1e; --news-rule: #c9c2b3; --news-grain: rgba(0,0,0,0.015); --news-inset: rgba(255,255,255,0.5); /* decrypted strips */ --strip-aim: #fff4f2; --strip-aim-ink: #5a1e1e; --strip-aim-line: rgba(192,57,43,0.35); --strip-why: #f3f0ff; --strip-why-ink: #2c2358; --strip-why-accent: #4c3fa8; --strip-why-line: rgba(76,63,168,0.35); /* board: read by map.js, so keep the names */ --arrow-support: #7a7a7a; --arrow-convoy: #2b6cb0; --arrow-retreat: #e07b1f; --arrow-build: #3aa7e8; --sea: #cfe3f0; --sea-fill: #d6ebf5; --sea-line: #9fc6e0; --land-fill: #e7e3da; --land-line: #7f8c9b; --unit-ring: #ffffff; --tiles: light_nolabels; /* the CartoDB basemap flavour */ } /* The same tokens for viewers whose system asks for dark, unless they picked * light explicitly, and for anyone who flipped the switch. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --paper: #10141b; --panel: #161b23; --card: #1d232d; --hover: #232a35; --track: #2b333f; --line: #2f3743; --line-soft: #262d38; --rule: #3a4351; --edge: #56606e; --ink: #e9edf4; --dim: #b6c0cd; --muted: #94a0ae; --faint: #6e7986; --slate: #4a5666; --halo: #0b0e13; --wipe: #05070a; --fill: #3d5285; --fill-hover: #4a63a0; --on-fill: #f2f5fa; --accent: #e2624f; --accent-wash: rgba(226,98,79,0.12); --accent-line: rgba(226,98,79,0.4); --accent-glow: rgba(226,98,79,0.45); --accent-glow-soft: rgba(226,98,79,0.3); --accent-glow-strong: rgba(226,98,79,0.65); --ok: #3bbd7e; --ok-glow: rgba(59,189,126,0.7); --bad: #ef6a5c; --warn: #e8b455; --veil: rgba(4,7,12,0.66); --veil-strong: rgba(4,7,12,0.82); --chrome: #0c1017; --chrome-2: #1a222e; --chrome-3: #2b3646; --chrome-ink: #e9edf4; --gold: #ffe0a3; --scrub-ink: #f0b9b9; --secret: #0e1712; --secret-2: #14201a; --secret-ink: #a8dd88; --secret-line: #2c4a3a; --secret-head: #ff9b9b; --communique: #241f16; --news: #191510; --news-ink: #e7dcc8; --news-rule: #4a4235; --news-grain: rgba(255,255,255,0.02); --news-inset: rgba(255,255,255,0.05); --strip-aim: #2c1714; --strip-aim-ink: #ffc7bd; --strip-aim-line: rgba(226,98,79,0.42); --strip-why: #1b1930; --strip-why-ink: #cfc9ff; --strip-why-accent: #8f80f0; --strip-why-line: rgba(143,128,240,0.42); --arrow-support: #9aa3ad; --arrow-convoy: #4f9ae0; --arrow-retreat: #f0913a; --arrow-build: #4fc3f7; --sea: #0d1620; --sea-fill: #16293a; --sea-line: #2d5877; --land-fill: #262d36; --land-line: #5a6673; --unit-ring: #0f141b; --tiles: dark_nolabels; } } :root[data-theme="dark"] { color-scheme: dark; --paper: #10141b; --panel: #161b23; --card: #1d232d; --hover: #232a35; --track: #2b333f; --line: #2f3743; --line-soft: #262d38; --rule: #3a4351; --edge: #56606e; --ink: #e9edf4; --dim: #b6c0cd; --muted: #94a0ae; --faint: #6e7986; --slate: #4a5666; --halo: #0b0e13; --wipe: #05070a; --fill: #3d5285; --fill-hover: #4a63a0; --on-fill: #f2f5fa; --accent: #e2624f; --accent-wash: rgba(226,98,79,0.12); --accent-line: rgba(226,98,79,0.4); --accent-glow: rgba(226,98,79,0.45); --accent-glow-soft: rgba(226,98,79,0.3); --accent-glow-strong: rgba(226,98,79,0.65); --ok: #3bbd7e; --ok-glow: rgba(59,189,126,0.7); --bad: #ef6a5c; --warn: #e8b455; --veil: rgba(4,7,12,0.66); --veil-strong: rgba(4,7,12,0.82); --chrome: #0c1017; --chrome-2: #1a222e; --chrome-3: #2b3646; --chrome-ink: #e9edf4; --gold: #ffe0a3; --scrub-ink: #f0b9b9; --secret: #0e1712; --secret-2: #14201a; --secret-ink: #a8dd88; --secret-line: #2c4a3a; --secret-head: #ff9b9b; --communique: #241f16; --news: #191510; --news-ink: #e7dcc8; --news-rule: #4a4235; --news-grain: rgba(255,255,255,0.02); --news-inset: rgba(255,255,255,0.05); --strip-aim: #2c1714; --strip-aim-ink: #ffc7bd; --strip-aim-line: rgba(226,98,79,0.42); --strip-why: #1b1930; --strip-why-ink: #cfc9ff; --strip-why-accent: #8f80f0; --strip-why-line: rgba(143,128,240,0.42); --arrow-support: #9aa3ad; --arrow-convoy: #4f9ae0; --arrow-retreat: #f0913a; --arrow-build: #4fc3f7; --sea: #0d1620; --sea-fill: #16293a; --sea-line: #2d5877; --land-fill: #262d36; --land-line: #5a6673; --unit-ring: #0f141b; --tiles: dark_nolabels; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { font-family: "Segoe UI", system-ui, Arial, sans-serif; color: var(--ink); background: var(--paper); display: flex; flex-direction: column; } [hidden] { display: none !important; } .muted { color: var(--muted); } .small { font-size: 12px; } .mono { font-family: "Consolas", "Courier New", monospace; font-size: 11px; } .k { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); font-weight: 800; margin-right: 6px; } h3.play-h3, h3.ledger-h3 { margin: 12px 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); } button.mini { font: inherit; font-size: 10px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 3px; padding: 2px 7px; cursor: pointer; } button.mini:hover { border-color: var(--ink); } button.submit, button.ready { font: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; background: var(--fill); color: var(--on-fill); border: none; border-radius: 4px; padding: 6px 12px; cursor: pointer; } button.submit:hover, button.ready:hover { background: var(--fill-hover); } button.submit:disabled, button.ready:disabled { opacity: 0.45; cursor: not-allowed; } button.ready.on { background: var(--ok); } button.close { position: absolute; top: 8px; right: 10px; background: none; border: none; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; } button.close:hover { color: var(--accent); } .swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; border: 1px solid rgba(0,0,0,0.2); display: inline-block; vertical-align: -2px; margin-right: 4px; } .chips { display: flex; flex-wrap: wrap; gap: 4px; } .chip { font: inherit; font-size: 11px; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--c, var(--line)); border-radius: 3px; padding: 2px 7px; cursor: pointer; color: var(--ink); } .chip.on { background: var(--fill); color: var(--on-fill); } .pill { display: inline-block; font-size: 11px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1px 8px; margin: 2px 2px 0 0; } .pill.broken { border-color: var(--bad); color: var(--bad); } .pill.fulfilled { border-color: var(--ok); color: var(--ok); } .pill i { color: var(--muted); font-style: normal; font-size: 10px; } /* ---------------------------------------------------------------- topbar */ #topbar { display: flex; align-items: center; gap: 16px; background: var(--chrome); color: var(--chrome-ink); padding: 8px 16px; border-bottom: 3px solid var(--accent); } .brand { font-weight: 800; letter-spacing: 2px; font-size: 20px; white-space: nowrap; } .brand-mark { color: var(--accent); } .brand-sub { font-weight: 400; font-size: 11px; letter-spacing: 1px; opacity: 0.6; margin-left: 6px; text-transform: uppercase; } .ticker { flex: 1; overflow: hidden; white-space: nowrap; background: rgba(255,255,255,0.06); border-radius: 4px; padding: 6px 12px; font-family: "Georgia", serif; font-style: italic; font-size: 14px; color: var(--gold); border-left: 3px solid var(--accent); } .topbar-tools { display: flex; align-items: center; gap: 6px; } .top-btn { font: inherit; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; background: var(--chrome-2); color: var(--chrome-ink); border: 1px solid var(--chrome-3); border-radius: 4px; padding: 5px 10px; cursor: pointer; } .top-btn:hover { background: var(--chrome-3); } .top-btn.play { background: var(--accent); border-color: var(--accent); } .top-btn.play.seated { background: var(--ok); border-color: var(--ok); } .llm-badge { font: inherit; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; padding: 3px 8px; border-radius: 10px; font-weight: 700; border: none; cursor: pointer; } .llm-badge.online { background: var(--ok); color: #fff; } .llm-badge.offline { background: var(--slate); color: #fff; } .llm-badge.degraded { background: var(--warn); color: var(--secret); } /* ---------------------------------------------------------------- layout */ .layout { flex: 1; display: flex; min-height: 0; } .sidebar { width: 380px; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; } .panel { border-bottom: 1px solid var(--line); padding: 12px 14px; } .panel-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .panel h2 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); } .panel-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .phase-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .phase-label { font-size: 18px; font-weight: 700; } .go-badge { background: var(--accent); color: #fff; padding: 4px 8px; border-radius: 4px; font-weight: 700; font-size: 12px; } .go-badge.draw, .go-badge.stalemate { background: var(--slate); } /* standings */ .standings { display: flex; flex-direction: column; gap: 5px; } .standing { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; border-radius: 4px; padding: 1px 2px; } .standing:hover, .standing:focus-visible { background: var(--hover); outline: none; } .standing.dead { opacity: 0.4; text-decoration: line-through; } .pname { width: 118px; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bar { flex: 1; height: 9px; background: var(--track); border-radius: 5px; overflow: hidden; } .bar > span { display: block; height: 100%; border-radius: 5px; transition: width 0.6s ease; } .scnum { width: 20px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; } .model-chip { font-family: "Consolas", monospace; font-size: 9px; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .autopilot-pip { font-size: 11px; color: var(--warn); } .human-chip { font-size: 9px; font-weight: 800; letter-spacing: 0.5px; background: var(--card); border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; margin-left: 4px; vertical-align: 1px; } .human-chip.you { background: var(--ok); color: #fff; border-color: var(--ok); } .human-tag { font-size: 9px; font-weight: 800; letter-spacing: 0.5px; color: var(--ok); margin-left: 4px; } .power-graph-wrap { margin-top: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 4px; } #power-graph { width: 100%; height: 96px; display: block; } /* predictions */ .predict { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin: 0 0 8px; font-size: 11px; } .predict-label { font-size: 9px; letter-spacing: 1px; font-weight: 800; color: var(--accent); } .predict select { font: inherit; font-size: 11px; border: 1px solid var(--line); border-radius: 3px; background: var(--card); } .predict button { font: inherit; font-size: 10px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; background: var(--fill); color: var(--on-fill); border: none; border-radius: 3px; padding: 2px 7px; cursor: pointer; } .predict button:disabled { background: var(--ok); } .predict-score { color: var(--muted); } /* log */ .pane { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .pane > .log, .pane > .web-detail, .pane > .ledger-body, .pane > .diary-body, .pane > .play-body { overflow-y: auto; flex: 1; min-height: 0; } .toggle { font-size: 11px; color: var(--muted); cursor: pointer; user-select: none; white-space: nowrap; } .toggle input:disabled + span, .toggle:has(input:disabled) { opacity: 0.5; cursor: not-allowed; } .log { overflow-y: auto; flex: 1; margin-top: 8px; padding-right: 4px; } .log-empty { color: var(--faint); font-style: italic; font-size: 13px; padding: 8px 0; } .fog-note { font-size: 11px; color: var(--muted); background: var(--hover); border-radius: 3px; padding: 4px 8px; margin: 6px 0 0; } .cable { margin-bottom: 8px; padding: 7px 9px; border-radius: 4px; font-size: 13px; line-height: 1.35; } .cable.public { background: var(--card); border-left: 3px solid var(--edge); } .cable.private { background: var(--secret); color: var(--secret-ink); font-family: "Consolas", "Courier New", monospace; font-size: 12px; border: 1px dashed var(--secret-line); } .cable.compact { padding: 5px 8px; font-size: 12px; } .cable.compact.unseen { opacity: 0.75; background: repeating-linear-gradient(135deg, var(--secret) 0 8px, var(--secret-2) 8px 16px); } .cable.mine { border-left: 3px solid var(--ok) !important; } .cable-head { font-size: 11px; margin-bottom: 3px; opacity: 0.85; } .cable.private .cable-head { color: var(--secret-head); letter-spacing: 0.5px; } .cable-body { white-space: pre-wrap; } /* ---------------------------------------------------------------- stage */ .stage { flex: 1; position: relative; min-width: 0; display: flex; flex-direction: column; } #map { flex: 1; background: var(--sea); } /* unit markers */ .unit-wrap { background: none; border: none; } .unit { width: 20px; height: 20px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--unit-ring); box-shadow: 0 1px 3px rgba(0,0,0,0.5); } .unit.mine { border-color: var(--gold); box-shadow: 0 0 0 2px var(--ok-glow), 0 1px 3px rgba(0,0,0,0.5); } .unit.picked { transform: scale(1.25); box-shadow: 0 0 0 4px var(--accent-glow-strong); } .dislodged { color: var(--accent); font-weight: 900; font-size: 18px; text-shadow: 0 0 3px var(--halo), 0 0 3px var(--halo); } .sc-label { font-size: 9px; font-weight: 700; color: var(--dim); text-shadow: 0 0 2px var(--halo), 0 0 2px var(--halo); pointer-events: none; } .fx-disband { color: var(--dim); font-weight: 900; font-size: 20px; text-align: center; line-height: 22px; text-shadow: 0 0 3px var(--halo); animation: fadeOut 2.4s ease-in forwards; } .fx-build { font-weight: 900; font-size: 13px; text-align: center; text-shadow: 0 0 3px var(--halo), 0 0 3px var(--halo); animation: floatUp 1.6s ease-out forwards; } .fx-ring { animation: ringPulse 1.4s ease-out 3; } .fx-pulse { animation: ringPulse 0.9s ease-out infinite; } .leaflet-interactive.flash { animation: provinceFlash 0.9s ease-out; } @keyframes fadeOut { 70% { opacity: 1; } 100% { opacity: 0.35; } } @keyframes floatUp { from { transform: translateY(8px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(-6px); opacity: 1; } } @keyframes ringPulse { from { stroke-opacity: 1; stroke-width: 3; } to { stroke-opacity: 0.15; stroke-width: 9; } } @keyframes provinceFlash { 0% { fill-opacity: 1; } 100% { fill-opacity: 0.6; } } /* toasts */ .toasts { position: absolute; top: 12px; right: 12px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; } .toast { background: var(--accent); color: #fff; padding: 9px 12px; border-radius: 6px; max-width: 300px; box-shadow: 0 4px 14px rgba(0,0,0,0.35); transform: translateX(120%); transition: transform 0.35s ease; } .toast.stab { animation: pulse 1.2s ease 3; } .toast.press { background: var(--slate); } .toast.elim { background: var(--secret); } .toast.called { background: var(--ok); } .toast.show { transform: translateX(0); } .toast-title { font-weight: 800; font-size: 13px; letter-spacing: 0.5px; } .toast-body { font-size: 12px; opacity: 0.92; margin-top: 2px; } @keyframes pulse { 50% { box-shadow: 0 0 0 4px var(--accent-glow), 0 4px 14px rgba(0,0,0,0.35); } } /* controls */ .controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--chrome); color: var(--chrome-ink); padding: 8px 12px; } .controls button { background: var(--chrome-2); color: var(--chrome-ink); border: 1px solid var(--chrome-3); border-radius: 4px; padding: 5px 10px; cursor: pointer; font-size: 13px; } .controls button:hover { background: var(--chrome-3); } .controls .speed { min-width: 40px; } .controls .speed.on { background: var(--chrome-3); border-color: var(--gold); } .control-sep { width: 1px; height: 22px; background: var(--chrome-3); } .eta { font-size: 12px; color: var(--gold); min-width: 86px; } .timeline { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 220px; } #scrubber { flex: 1; } .scrub-label { font-size: 11px; color: var(--scrub-ink); min-width: 120px; } .live { background: var(--slate) !important; } .live.on { background: var(--accent) !important; } /* ---------------------------------------------------------------- live wire */ .phase-row .clock { margin-left: auto; } .clock { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 16px; letter-spacing: 0.5px; color: var(--ink); min-width: 48px; text-align: right; } .clock.due { color: var(--accent); animation: blink 1s steps(2) infinite; } .clock.paused { color: var(--muted); } .clock.thinking { color: var(--muted); animation: blink 1.4s steps(2) infinite; } .clock.over { color: var(--accent); } @keyframes blink { 50% { opacity: 0.35; } } .stepper { list-style: none; margin: 0 0 8px; padding: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: 10px; letter-spacing: 1px; font-weight: 700; color: var(--faint); } .stepper:empty { display: none; } .stepper .step { white-space: nowrap; } .stepper .step b { color: var(--ink); font-weight: 800; } .stepper .step.done { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); } .stepper .step.active { color: #fff; background: var(--accent); padding: 2px 6px; border-radius: 3px; animation: stepPulse 1.6s ease-in-out infinite; } .stepper .step.active b { color: var(--gold); } .stepper .sep { color: var(--rule); } @keyframes stepPulse { 50% { box-shadow: 0 0 0 3px var(--accent-glow-soft); } } .live-strip { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; min-height: 18px; } .typing { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--c, var(--dim)); background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--c, var(--dim)); border-radius: 3px; padding: 2px 7px; } .dots { display: inline-flex; gap: 2px; } .dots b { width: 4px; height: 4px; border-radius: 50%; background: var(--c, var(--dim)); animation: dot 1.2s infinite; } .dots b:nth-child(2) { animation-delay: 0.2s; } .dots b:nth-child(3) { animation-delay: 0.4s; } @keyframes dot { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } } .sealed-row { display: inline-flex; align-items: center; gap: 4px; } .sealed-label { font-size: 9px; letter-spacing: 1px; font-weight: 800; color: var(--muted); margin-right: 3px; } .sealed-dot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--c, var(--dim)); background: transparent; transition: background 0.3s ease, transform 0.3s ease; } .sealed-dot.on { background: var(--c, var(--dim)); transform: scale(1.1); } /* ---------------------------------------------------------------- tabs */ .tabs { display: flex; border-bottom: 1px solid var(--line); background: var(--hover); padding: 0 6px; } .tab { flex: 1; background: none; border: none; border-bottom: 3px solid transparent; padding: 8px 4px 6px; font: inherit; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); cursor: pointer; } .tab:hover { color: var(--ink); } .tab.on { color: var(--ink); border-bottom-color: var(--accent); } .tab.play-tab { color: var(--ok); } .tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .pane-empty { color: var(--muted); font-size: 13px; line-height: 1.45; padding: 8px 4px; text-align: center; } .pane-empty-mark { font-size: 34px; color: var(--rule); margin: 12px 0 4px; } /* ---------------------------------------------------------------- cables: streamed and decrypted */ .log-section:empty { display: none; } .cable { position: relative; } .cable.communique { background: var(--communique); border-left: 3px solid var(--edge); font-family: "Georgia", serif; } .cable-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .cable-head .who { flex: 1; min-width: 0; } .cable-head .meta { font-size: 10px; opacity: 0.7; letter-spacing: 0.5px; } .cable-head .lock { font-size: 11px; opacity: 0.8; } .decrypt { font: inherit; font-size: 9px; font-weight: 800; letter-spacing: 1px; background: transparent; color: var(--accent); border: 1px solid var(--accent); border-radius: 3px; padding: 1px 6px; cursor: pointer; opacity: 0.75; } .decrypt:hover, .decrypt:focus-visible { opacity: 1; background: var(--accent-wash); } .cable.private .decrypt { color: var(--secret-head); border-color: var(--secret-head); } .cable.decrypted .decrypt { background: var(--accent); color: #fff; opacity: 1; } .cable.private.decrypted .decrypt { background: var(--secret-head); color: var(--secret); } .promise-badge { font-size: 9px; font-weight: 800; letter-spacing: 0.5px; border-radius: 3px; padding: 1px 5px; background: var(--card); border: 1px solid var(--line); color: var(--muted); } .promise-badge.kept { color: var(--ok); border-color: var(--ok); } .promise-badge.broken { color: #fff; background: var(--bad); border-color: var(--bad); } body.fog .secret, body.fog .diary-secret { display: none !important; } .secret { display: none; margin-top: 7px; } .cable.decrypted .secret { display: block; } .strip { position: relative; display: flex; gap: 8px; align-items: flex-start; margin-top: 5px; padding: 6px 8px; border-radius: 3px; font-size: 12px; line-height: 1.35; background: var(--strip-aim); color: var(--strip-aim-ink); border: 1px solid var(--strip-aim-line); font-family: "Segoe UI", system-ui, Arial, sans-serif; font-style: normal; clip-path: inset(0 0 0 0); } .strip.why { background: var(--strip-why); color: var(--strip-why-ink); border-color: var(--strip-why-line); } .cable.decrypted .strip { animation: wipe 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both; } .cable.decrypted .strip.why { animation-delay: 0.18s; } @keyframes wipe { 0% { clip-path: inset(0 100% 0 0); background-color: var(--wipe); color: var(--wipe); } 60% { clip-path: inset(0 0 0 0); background-color: var(--wipe); color: var(--wipe); } 100% { clip-path: inset(0 0 0 0); } } .stamp { flex: none; font-size: 9px; font-weight: 900; letter-spacing: 1px; color: #fff; background: var(--accent); padding: 2px 5px; border-radius: 2px; transform: rotate(-2deg); border: 1px solid rgba(0,0,0,0.15); margin-top: 1px; } .strip.why .stamp { background: var(--strip-why-accent); } .strip-text { white-space: pre-wrap; } .live-divider { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0 8px; padding: 5px 8px; border-radius: 3px; background: var(--chrome); color: var(--gold); font-size: 10px; letter-spacing: 1px; font-weight: 800; } .live-pip { color: var(--accent); animation: blink 1.2s steps(2) infinite; } .sealed-badge { font-size: 9px; letter-spacing: 1px; font-weight: 800; color: #fff; background: var(--slate); padding: 2px 6px; border-radius: 3px; white-space: nowrap; } .live-divider .sealed-badge { margin-left: auto; background: rgba(255,255,255,0.15); } .round-divider { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); margin: 8px 0 6px; } .cable.arriving { animation: arrive 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; } @keyframes arrive { from { transform: translateX(-24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ---------------------------------------------------------------- dispatches (retreat / winter) */ .dispatches { margin-bottom: 8px; } .dispatch-group { background: var(--card); border-left: 3px solid var(--edge); border-radius: 4px; padding: 6px 9px; margin-bottom: 6px; } .dispatch-power { font-size: 11px; font-weight: 800; letter-spacing: 0.5px; margin-bottom: 3px; } .dispatch { display: flex; flex-direction: column; font-size: 12px; padding: 3px 0; border-top: 1px dashed var(--line-soft); } .dispatch:first-of-type { border-top: none; } .dispatch-desc { font-weight: 600; } .dispatch-reason { font-size: 11px; color: var(--muted); } .dispatch.ok .dispatch-desc::before { content: "✓ "; color: var(--ok); } .dispatch.bounced .dispatch-desc::before, .dispatch.invalid .dispatch-desc::before, .dispatch.void .dispatch-desc::before { content: "✕ "; color: var(--bad); } .dispatch.eliminate .dispatch-desc { color: var(--accent); } .dispatch.eliminate .dispatch-desc::before { content: "☠ "; } /* ---------------------------------------------------------------- web of trust */ .web-wrap { background: var(--card); border: 1px solid var(--line); border-radius: 4px; margin-top: 6px; } #web-ring { width: 100%; height: auto; display: block; } .web-node { cursor: pointer; } .web-node.dead { opacity: 0.3; } .web-node.on circle { stroke: var(--ink); stroke-width: 3; } .web-node:focus-visible { outline: none; } .web-node:focus-visible circle { stroke: var(--accent); stroke-width: 3; } .web-label { font-size: 11px; font-weight: 800; fill: #fff; pointer-events: none; } .web-sc { font-size: 9px; font-weight: 700; fill: var(--muted); pointer-events: none; } .web-hostile { animation: hostilePulse 1.2s ease-in-out infinite; } @keyframes hostilePulse { 50% { stroke-opacity: 0.35; } } .web-detail { padding-top: 8px; font-size: 12px; } .web-power { background: var(--card); border-left: 3px solid var(--edge); border-radius: 4px; padding: 8px 10px; } .web-power-name { font-weight: 800; margin-bottom: 4px; } .web-plan, .web-list { margin-top: 6px; } .web-journal { margin-top: 6px; font-family: "Georgia", serif; font-style: italic; color: var(--dim); } .stance-chip { display: inline-block; font-size: 11px; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--c, var(--edge)); border-radius: 3px; padding: 1px 6px; margin: 2px 2px 0 0; } /* ---------------------------------------------------------------- ledger */ .ledger-body { padding-top: 6px; } .award { background: var(--card); border-left: 3px solid var(--edge); border-radius: 4px; padding: 6px 9px; margin-bottom: 6px; } .award-title { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); font-weight: 800; } .award-who { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 4px; } .award-value { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--accent); } .award-blurb { font-size: 11px; color: var(--muted); } .stab-row { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 0; border-top: 1px dashed var(--line); } .stab-kind { font-size: 9px; font-weight: 900; letter-spacing: 1px; padding: 1px 5px; border-radius: 2px; background: var(--slate); color: #fff; } .stab-row.verified .stab-kind { background: var(--accent); } .stab-text { flex: 1; } /* ---------------------------------------------------------------- diary */ .diary-body { padding-top: 6px; font-size: 12px; } #diary-power { font: inherit; font-size: 11px; border: 1px solid var(--line); border-radius: 3px; background: var(--card); } .dossier { background: var(--card); border-left: 3px solid var(--edge); border-radius: 4px; padding: 8px 10px; } .dossier-name { font-weight: 800; font-size: 14px; } .dossier-creed { font-family: "Georgia", serif; font-style: italic; color: var(--dim); margin-top: 4px; } .diary-secret, .diary-mind { margin-top: 8px; } /* ---------------------------------------------------------------- player console */ .play-body { padding-top: 4px; font-size: 12px; } .play-status { margin-bottom: 8px; } .play-phase { font-weight: 800; font-size: 14px; } .play-state { font-size: 10px; letter-spacing: 1px; font-weight: 800; color: var(--muted); } .play-state.orders_open, .play-state.negotiating, .play-state.adjusting { color: var(--ok); } .play-state.resolving { color: var(--accent); } .play-clock { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); } .play-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; } .play-row select { font: inherit; font-size: 11px; } .order-desk { display: flex; flex-direction: column; gap: 4px; } .desk-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: var(--card); border-left: 3px solid var(--edge); border-radius: 4px; padding: 5px 8px; } .desk-row.check { cursor: pointer; } .desk-unit { font-weight: 800; min-width: 62px; } .desk-row select { font: inherit; font-size: 11px; max-width: 150px; border: 1px solid var(--line); border-radius: 3px; background: var(--card); } .desk-args { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; } .order-result { font-size: 11px; } .order-result .ok { color: var(--ok); font-weight: 700; } .order-result .bad, .order-result.bad { color: var(--bad); } .compose { background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; } .compose-row { display: flex; align-items: center; gap: 10px; margin: 5px 0; flex-wrap: wrap; } #compose-body { width: 100%; font: inherit; font-size: 12px; border: 1px solid var(--line); border-radius: 3px; padding: 5px; resize: vertical; } #compose-body:disabled { background: var(--hover); } .inbox { margin-top: 8px; } .cable.to-me { box-shadow: inset 3px 0 0 var(--ok); } /* ---------------------------------------------------------------- inspector */ .inspector { position: absolute; left: 12px; bottom: 60px; z-index: 900; width: 300px; max-height: 60%; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,0.25); padding: 10px 12px; font-size: 12px; } .insp-name { font-weight: 800; font-size: 14px; margin-bottom: 6px; padding-right: 20px; } .insp-row { margin-top: 5px; display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; } .insp-orders { display: flex; flex-direction: column; gap: 2px; width: 100%; } .insp-order.ok::before { content: "✓ "; color: var(--ok); } .insp-order.bounced::before, .insp-order.cut::before, .insp-order.dislodged::before, .insp-order.void::before { content: "✕ "; color: var(--bad); } .own-strip { display: inline-flex; gap: 1px; flex-wrap: wrap; } .own-strip i { width: 6px; height: 12px; display: inline-block; border-radius: 1px; } /* ---------------------------------------------------------------- overlays: stab cam, game over, gazette, reckoning */ .stabcam { position: absolute; inset: 0; z-index: 950; background: var(--veil); display: flex; align-items: center; justify-content: center; cursor: pointer; animation: fadeIn 0.3s ease; } .stabcam-card { position: relative; background: var(--paper); color: var(--ink); border-radius: 8px; padding: 18px 22px 26px; max-width: 460px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); border: 2px solid var(--accent); animation: cardIn 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); } .stabcam.press .stabcam-card { border-color: var(--muted); } .stabcam-title { font-weight: 900; font-size: 20px; letter-spacing: 0.5px; } .stabcam-quote { font-family: "Georgia", serif; font-style: italic; margin-top: 8px; color: var(--dim); } .stabcam-summary { margin-top: 8px; font-size: 13px; } .stamp-big { position: absolute; right: 14px; bottom: 10px; font-size: 40px; font-weight: 900; letter-spacing: 4px; color: var(--accent); border: 4px solid var(--accent); border-radius: 6px; padding: 0 10px; transform: rotate(-12deg); opacity: 0.85; animation: stampIn 0.5s cubic-bezier(0.3, 1.6, 0.4, 1) 0.35s both; } .stabcam.press .stamp-big { color: var(--muted); border-color: var(--muted); font-size: 26px; } .stabcam.press .stamp-big::after { content: " (press)"; font-size: 12px; letter-spacing: 0; } @keyframes fadeIn { from { opacity: 0; } } @keyframes cardIn { from { transform: scale(0.85); opacity: 0; } } @keyframes stampIn { from { transform: rotate(-12deg) scale(2.2); opacity: 0; } } .gameover-card { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 940; width: 360px; background: var(--paper); border: 2px solid var(--accent); border-radius: 8px; padding: 14px 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.4); } .go-head { font-weight: 900; font-size: 20px; letter-spacing: 1px; text-align: center; } .go-head.solo { color: var(--accent); } .go-reason { text-align: center; font-size: 12px; color: var(--muted); margin: 4px 0 8px; } .go-table { width: 100%; border-collapse: collapse; font-size: 13px; } .go-table td { padding: 3px 4px; border-top: 1px dashed var(--line); } .go-table tr.dead { opacity: 0.45; text-decoration: line-through; } .num { text-align: right; font-variant-numeric: tabular-nums; } .num.up { color: var(--ok); font-weight: 700; } .num.down { color: var(--bad); font-weight: 700; } .gameover-card button { font: inherit; font-size: 12px; font-weight: 800; background: var(--fill); color: var(--on-fill); border: none; border-radius: 4px; padding: 6px 12px; cursor: pointer; } .overlay { position: fixed; inset: 0; z-index: 2000; background: var(--veil-strong); overflow-y: auto; padding: 30px 16px; animation: fadeIn 0.25s ease; } .gazette-page, .reckoning-page { position: relative; max-width: 900px; margin: 0 auto; background: var(--news); color: var(--news-ink); padding: 28px 36px 24px; box-shadow: 0 12px 50px rgba(0,0,0,0.5); font-family: "Georgia", "Times New Roman", serif; background-image: repeating-linear-gradient(0deg, var(--news-grain) 0 2px, transparent 2px 4px); } .masthead { font-size: 38px; font-weight: 900; letter-spacing: 6px; text-align: center; border-bottom: 4px double var(--news-ink); padding-bottom: 6px; } .dateline { text-align: center; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; margin: 6px 0 14px; border-bottom: 1px solid var(--news-ink); padding-bottom: 6px; } .banner { font-size: 30px; line-height: 1.1; margin: 0 0 12px; font-weight: 900; } .lede { font-size: 15px; line-height: 1.5; } .lede::first-letter { font-size: 42px; float: left; line-height: 0.8; padding: 6px 6px 0 0; font-weight: 900; } .columns { column-count: 3; column-gap: 24px; column-rule: 1px solid var(--news-rule); font-size: 13px; line-height: 1.45; margin-top: 12px; } .columns section { break-inside: avoid; } .columns h3, .gazette-page > h3, .reckoning-page h3 { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; border-bottom: 1px solid var(--news-ink); margin: 10px 0 6px; } .columns p { margin: 0 0 6px; } .gz-stab { color: var(--accent); } .columns blockquote { margin: 0 0 8px; font-style: italic; } .columns cite { display: block; font-style: normal; font-size: 11px; color: var(--dim); } .gz-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; } .gz-table th { text-align: left; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; } .gz-table td, .gz-table th { padding: 3px 4px; border-top: 1px solid var(--news-rule); } .gz-table tr.dead { opacity: 0.45; text-decoration: line-through; } .gazette-auto { display: block; margin-top: 14px; text-align: right; font-family: "Segoe UI", system-ui, sans-serif; } .verdict { font-size: 17px; line-height: 1.5; } .arc { padding-left: 18px; line-height: 1.5; } .arc-jump { font: inherit; font-weight: 700; background: none; border: none; color: var(--accent); cursor: pointer; padding: 0; text-decoration: underline; } .obits { display: grid; gap: 6px; } .obit { border-left: 3px solid var(--edge); padding: 4px 8px; background: var(--news-inset); } /* ---------------------------------------------------------------- drawer / dialogs */ .drawer { position: fixed; top: 48px; right: 0; bottom: 0; z-index: 1900; width: 420px; max-width: 100%; background: var(--panel); border-left: 1px solid var(--line); box-shadow: -6px 0 24px rgba(0,0,0,0.25); padding: 12px 16px; overflow-y: auto; font-size: 12px; } .drawer-head { display: flex; align-items: center; justify-content: space-between; } .drawer-head h2 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); } .drawer .close { position: static; } .diag-grid { display: grid; grid-template-columns: 90px 1fr; gap: 4px 8px; margin: 10px 0; } .diag-status { font-weight: 800; text-transform: uppercase; } .diag-status.ok { color: var(--ok); } .diag-status.degraded { color: var(--warn); } .diag-status.stopped { color: var(--bad); } .diag-table { width: 100%; border-collapse: collapse; } .diag-table th { text-align: left; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); } .diag-table td, .diag-table th { padding: 3px 4px; border-top: 1px dashed var(--line); } dialog.dialog { border: 1px solid var(--line); border-radius: 8px; padding: 18px 22px; max-width: 640px; width: 92%; background: var(--panel); color: var(--ink); box-shadow: 0 12px 50px rgba(0,0,0,0.45); font-size: 13px; } dialog.dialog::backdrop { background: var(--veil-strong); } dialog h2 { margin: 0 0 8px; font-size: 15px; text-transform: uppercase; letter-spacing: 1px; } .form-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; } .form-row.right { justify-content: flex-end; } .form-row input[type="text"] { flex: 1; font: inherit; border: 1px solid var(--line); border-radius: 3px; padding: 5px 7px; } .form-grid { display: grid; grid-template-columns: 160px 1fr; gap: 6px 10px; align-items: center; } .form-grid input[type="number"], .form-grid input[type="text"], .form-grid select { font: inherit; font-size: 12px; border: 1px solid var(--line); border-radius: 3px; padding: 4px 6px; width: 100%; } .form-grid .inline { display: flex; align-items: center; gap: 6px; } .form-grid .inline input[type="number"] { flex: 1; } .form-error { color: var(--bad); font-size: 12px; min-height: 16px; margin-top: 6px; } .setup-models { margin-top: 10px; } .setup-models summary { cursor: pointer; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); } .setup-models .form-grid { margin-top: 6px; } .seat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-top: 8px; } .seat-card { display: flex; flex-direction: column; gap: 2px; background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--c, var(--edge)); border-radius: 5px; padding: 8px 10px; cursor: pointer; font-size: 12px; } .seat-card:has(input:checked) { outline: 2px solid var(--ink); } .seat-card.off { opacity: 0.5; cursor: not-allowed; } .seat-card.mine { outline: 2px solid var(--ok); } .seat-card input { position: absolute; opacity: 0; pointer-events: none; } .seat-name { font-weight: 800; font-size: 14px; } .seat-title { color: var(--muted); font-size: 11px; } .seat-meta { font-size: 11px; color: var(--muted); } .seat-creed { font-family: "Georgia", serif; font-style: italic; font-size: 11px; color: var(--dim); margin-top: 4px; } .legend { display: grid; gap: 6px; font-size: 13px; } .lg { display: inline-block; vertical-align: middle; margin-right: 6px; } .lg.arrow { width: 34px; height: 3px; } .lg.arrow.ok { background: var(--ok); } .lg.arrow.fail { background: var(--bad); } .lg.arrow.support { height: 0; border-top: 2px dashed var(--arrow-support); } .lg.arrow.convoy { height: 0; border-top: 2px dotted var(--arrow-convoy); } .lg.arrow.retreat { height: 0; border-top: 3px dashed var(--arrow-retreat); } .lg.ring { width: 14px; height: 14px; border: 3px solid var(--arrow-build); border-radius: 50%; } .lg.cross { color: var(--dim); font-weight: 900; } .lg.cable-private { width: 34px; height: 12px; background: var(--secret); border: 1px dashed var(--secret-line); } .lg.stab { font-size: 10px; font-weight: 900; letter-spacing: 1px; color: #fff; background: var(--accent); padding: 1px 5px; border-radius: 2px; } .lg.press { font-size: 10px; font-weight: 900; letter-spacing: 1px; color: #fff; background: var(--slate); padding: 1px 5px; border-radius: 2px; } .keys { line-height: 2; font-size: 12px; } kbd { font-family: "Consolas", monospace; font-size: 11px; background: var(--card); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 3px; padding: 1px 5px; margin: 0 3px 0 6px; } /* ---------------------------------------------------------------- motion preferences */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .toast { transform: none; } } @media (max-width: 900px) { .layout { flex-direction: column; } .sidebar { width: 100%; max-height: 45vh; } .brand-sub { display: none; } .columns { column-count: 1; } } /* ---------------------------------------------------------------- theme switch */ .top-btn.theme { min-width: 34px; font-size: 13px; line-height: 1; padding: 4px 8px; } /* Leaflet's own chrome is white by default: dress it in the tokens. */ .leaflet-container { background: var(--sea); } .leaflet-bar a, .leaflet-bar a:hover { background: var(--card); color: var(--ink); border-bottom-color: var(--line); } .leaflet-bar a:hover { background: var(--hover); } .leaflet-bar a.leaflet-disabled { background: var(--panel); color: var(--faint); } .leaflet-tooltip { background: var(--card); color: var(--ink); border-color: var(--line); box-shadow: 0 1px 4px rgba(0,0,0,0.3); } .leaflet-tooltip-top::before { border-top-color: var(--card); } .leaflet-tooltip-bottom::before { border-bottom-color: var(--card); } .leaflet-tooltip-left::before { border-left-color: var(--card); } .leaflet-tooltip-right::before { border-right-color: var(--card); } :root[data-theme="dark"] .leaflet-tile { filter: brightness(0.85); } /* SVG panels: presentation attributes cannot read tokens, so the shapes that * must follow the theme carry a class instead. */ .graph-line-18 { stroke: var(--accent); } .graph-cursor { stroke: var(--ink); } .web-hostile-edge { stroke: var(--bad); } .web-node circle { stroke: var(--card); }