/* Text terminal. One palette of five tones, no images. Themes are swapped by setting data-theme on ; every colour below is a variable, so a new theme is one more block. */ :root, [data-theme="ember"] { --bg: #16130f; --panel: #1c1813; --edge: #383026; --dim: #8a7c68; --mid: #c4baa6; --hot: #e6b872; --warn: #d7a445; --bad: #c4705c; --glow: rgba(230, 184, 114, 0.14); --tint: rgba(230, 184, 114, 0.09); --tint-bad: rgba(196, 112, 92, 0.12); } [data-theme="slate"] { --bg: #10151a; --panel: #161e25; --edge: #2a3945; --dim: #74899a; --mid: #b0bfca; --hot: #93cfe4; --warn: #d3b163; --bad: #cc7268; --glow: rgba(147, 207, 228, 0.13); --tint: rgba(147, 207, 228, 0.09); --tint-bad: rgba(204, 114, 104, 0.12); } [data-theme="phosphor"] { --bg: #060a06; --panel: #0a120a; --edge: #1c3a22; --dim: #2f6b3a; --mid: #57c46a; --hot: #a9ffb8; --warn: #e0c25a; --bad: #e06a5a; --glow: rgba(169, 255, 184, 0.22); --tint: rgba(87, 196, 106, 0.1); --tint-bad: rgba(224, 106, 90, 0.12); } :root { --font: "Cascadia Mono", "DejaVu Sans Mono", "Consolas", "Courier New", monospace; } * { box-sizing: border-box; } html, body { margin: 0; background: var(--bg); color: var(--mid); font-family: var(--font); font-size: 15px; line-height: 1.55; } #crt { min-height: 100vh; padding: 18px 12px 40px; background: radial-gradient(ellipse at 50% 0%, var(--glow), transparent 62%), var(--bg); } /* Scanlines, kept faint enough to forget about. */ #crt::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient( to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 3px, rgba(0, 0, 0, 0.10) 4px ); z-index: 50; } #screen { max-width: 900px; margin: 0 auto; } /* --- masthead ----------------------------------------------------------- */ #masthead { border-bottom: 1px solid var(--edge); padding-bottom: 10px; } #banner { margin: 0; font-size: clamp(20px, 5vw, 38px); letter-spacing: clamp(2px, 1.3vw, 11px); color: var(--hot); font-weight: 600; } #subtitle, #statusline { font-size: 12px; letter-spacing: 1.5px; color: var(--dim); text-transform: uppercase; } #statusline { margin-top: 8px; color: var(--mid); } #statusline .sep { color: var(--edge); margin: 0 8px; } #statusline b { color: var(--hot); font-weight: 600; } /* --- tabs --------------------------------------------------------------- */ #tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--edge); } #tabs button { background: transparent; border: 1px solid var(--edge); color: var(--dim); font: inherit; font-size: 12px; letter-spacing: 1.5px; padding: 5px 12px; cursor: pointer; } #tabs button:hover { color: var(--mid); border-color: var(--dim); } #tabs button.active { color: var(--bg); background: var(--mid); border-color: var(--mid); } /* --- generic ------------------------------------------------------------ */ main { padding: 18px 0; } h2 { font-size: 13px; letter-spacing: 3px; color: var(--dim); font-weight: 400; margin: 0 0 10px; text-transform: uppercase; } h2::after { content: ""; display: block; border-bottom: 1px dashed var(--edge); margin-top: 6px; } h3.sub { font-size: 12px; letter-spacing: 2px; color: var(--dim); font-weight: 400; margin: 16px 0 8px; text-transform: uppercase; } .panel { border: 1px solid var(--edge); background: var(--panel); padding: 14px 16px; margin-bottom: 14px; } .muted { color: var(--dim); } .hot { color: var(--hot); } .warn { color: var(--warn); } .bad { color: var(--bad); } .tiny { font-size: 12px; letter-spacing: 1px; } .code { word-break: break-all; margin: 6px 0 10px; } .stack > * + * { margin-top: 8px; } button.act { background: transparent; border: 1px solid var(--mid); color: var(--mid); font: inherit; font-size: 13px; letter-spacing: 2px; padding: 7px 16px; cursor: pointer; text-transform: uppercase; } button.act:hover:not(:disabled) { background: var(--mid); color: var(--bg); } button.act:disabled { border-color: var(--edge); color: var(--edge); cursor: not-allowed; } button.act.primary { border-color: var(--hot); color: var(--hot); } button.act.primary:hover:not(:disabled) { background: var(--hot); color: var(--bg); } button.act.danger { border-color: var(--bad); color: var(--bad); } button.act.danger:hover:not(:disabled) { background: var(--bad); color: var(--bg); } button.act.small { font-size: 11px; padding: 5px 10px; letter-spacing: 1.5px; } input[type="text"] { background: var(--bg); border: 1px solid var(--edge); color: var(--hot); font: inherit; font-size: 15px; padding: 7px 10px; flex: 1 1 220px; min-width: 0; } input[type="text"]:focus { outline: none; border-color: var(--mid); } .field { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; margin-bottom: 4px; } /* --- mission list ------------------------------------------------------- */ .mission { border: 1px solid var(--edge); background: var(--panel); padding: 12px 14px; margin-bottom: 10px; } .mission.done { opacity: 0.6; } .mission-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; } .mission-title { color: var(--hot); letter-spacing: 1.5px; font-weight: 600; } .mission-type { font-size: 11px; letter-spacing: 2px; color: var(--dim); } .mission-intro { color: var(--mid); margin: 8px 0; font-style: italic; opacity: 0.85; } .mission-meta { font-size: 12px; letter-spacing: 1px; color: var(--dim); margin-bottom: 10px; } .mission-meta span + span::before { content: " // "; color: var(--edge); } /* --- choices (deploy, founding) ----------------------------------------- */ .deploy { border-top: 1px dashed var(--edge); margin-top: 10px; padding-top: 10px; } .choice-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .choice { background: transparent; border: 1px solid var(--edge); color: var(--dim); font: inherit; font-size: 12px; padding: 6px 10px; cursor: pointer; text-align: left; } .choice:hover { border-color: var(--mid); color: var(--mid); } .choice.picked { border-color: var(--hot); color: var(--hot); background: var(--tint); } .choice small { display: block; color: var(--edge); font-size: 11px; } .choice.picked small { color: var(--dim); } /* Full-width whether or not it sits in a .choice-row. */ .choice.wide { flex: 1 1 100%; display: block; width: 100%; } .choice.wide + .choice.wide { margin-top: 6px; } .choice.wide strong { color: inherit; font-weight: 600; letter-spacing: 1px; } /* --- people ------------------------------------------------------------- */ .person { border-left: 2px solid var(--edge); padding: 4px 0 4px 10px; } .person + .person { margin-top: 10px; } .person.leader { border-left-color: var(--hot); } .person .who { color: var(--hot); } .person .vitals { color: var(--dim); font-size: 12px; letter-spacing: 1px; } .person .skill { font-size: 12px; } .person .quirk { color: var(--dim); font-size: 12px; font-style: italic; } /* --- live mission ------------------------------------------------------- */ .lives { letter-spacing: 4px; color: var(--hot); font-size: 18px; } .lives .spent { color: var(--edge); } .cz-prompt { color: var(--hot); font-size: 16px; margin: 6px 0 12px; } .cz-hint { font-size: 12px; letter-spacing: 1.5px; color: var(--dim); margin: 4px 0; text-transform: uppercase; } .cz-slots { list-style: none; margin: 10px 0; padding: 0; } .cz-slots .slot { display: flex; gap: 10px; padding: 3px 6px; border-left: 2px solid var(--edge); } .cz-slots .slot.filled { border-left-color: var(--mid); cursor: pointer; } .cz-slots .slot.filled:hover { background: var(--tint-bad); } .slot-num { color: var(--edge); } .slot.filled .slot-label { color: var(--hot); } .slot .slot-label { color: var(--edge); } .cz-pool { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; } .cz-pool.stacked { flex-direction: column; align-items: stretch; } .opt { background: transparent; border: 1px solid var(--edge); color: var(--mid); font: inherit; font-size: 14px; padding: 6px 12px; cursor: pointer; display: flex; gap: 8px; align-items: baseline; text-align: left; } .opt:hover { border-color: var(--hot); color: var(--hot); background: var(--tint); } .opt-key { color: var(--dim); font-size: 12px; } .cz-confirm, .cz-undo { background: transparent; border: 1px solid var(--edge); color: var(--edge); font: inherit; font-size: 13px; letter-spacing: 2px; padding: 7px 16px; margin-top: 8px; cursor: not-allowed; } .cz-confirm.ready, .cz-undo:not(:disabled) { border-color: var(--mid); color: var(--mid); cursor: pointer; } .cz-confirm.ready:hover, .cz-undo:not(:disabled):hover { background: var(--mid); color: var(--bg); } .cz-current { display: flex; flex-direction: column; gap: 2px; margin: 12px 0 6px; } .cz-token { color: var(--hot); font-size: 20px; letter-spacing: 2px; } .cz-buckets { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; } .cz-buckets .bucket { flex: 1 1 140px; border: 1px solid var(--edge); padding: 8px 10px; } .cz-buckets h4 { margin: 0 0 6px; font-size: 12px; letter-spacing: 2px; color: var(--dim); font-weight: 400; } .cz-buckets ul { margin: 0; padding-left: 16px; font-size: 13px; } .feedback { margin-top: 14px; border-top: 1px dashed var(--edge); padding-top: 10px; font-size: 13px; } .feedback div { margin: 2px 0; } .feedback .ok::before { content: "> "; color: var(--mid); } .feedback .no::before { content: "! "; color: var(--bad); } .feedback .no { color: var(--bad); } /* --- tables ------------------------------------------------------------- */ .rows { width: 100%; border-collapse: collapse; font-size: 13px; } .rows td { padding: 5px 8px 5px 0; vertical-align: top; } .rows tr + tr td { border-top: 1px solid var(--edge); } .rows .num { color: var(--hot); text-align: right; width: 80px; } .logline { font-size: 13px; padding: 2px 0; display: flex; gap: 10px; } .logline .d { color: var(--edge); flex: 0 0 62px; } .logline.death .t { color: var(--bad); } .logline.good .t { color: var(--hot); } .logline.upkeep .t { color: var(--dim); } /* --- footer ------------------------------------------------------------- */ #footer { border-top: 1px solid var(--edge); padding-top: 8px; display: flex; justify-content: space-between; gap: 12px; font-size: 11px; letter-spacing: 1.5px; color: var(--edge); text-transform: uppercase; } #toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--bad); color: var(--bg); padding: 8px 18px; font-size: 13px; letter-spacing: 1px; z-index: 60; } @media (max-width: 560px) { body { font-size: 14px; } .cz-pool .opt { width: 100%; } .rows .num { width: 60px; } } /* --- the shortlist board ------------------------------------------------- */ .sl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; margin: 12px 0; } .sl-opt { width: 100%; } .sl-box { color: var(--dim); } .sl-opt.selected { border-color: var(--hot); color: var(--hot); background: var(--tint); } .sl-opt.selected .sl-box { color: var(--hot); } /* Dimmed rather than disabled: still clickable to swap a pick out. */ .sl-opt.full { opacity: 0.5; } .sl-opt.revealed { cursor: default; } .sl-opt.revealed:hover { border-color: var(--edge); color: var(--mid); background: transparent; } .sl-opt.reveal-right { border-color: var(--hot); color: var(--hot); } .sl-opt.reveal-wrong { border-color: var(--bad); color: var(--bad); } .sl-opt .tiny { margin-left: auto; } .help-step + .help-step { margin-top: 14px; border-top: 1px dashed var(--edge); padding-top: 14px; } .help-step .tiny { letter-spacing: 2px; } /* --- morale, relationships, trader --------------------------------------- */ .morale { letter-spacing: 1px; font-size: 12px; margin-top: 2px; } .morale .morale-rest { color: var(--edge); } .morale.ok .morale-fill { color: var(--hot); } .morale.warn .morale-fill { color: var(--warn); } .morale.bad .morale-fill { color: var(--bad); } .alerts { border-color: var(--bad); } .alerts div + div { margin-top: 4px; } .ware { border-left: 2px solid var(--edge); padding: 4px 0 8px 10px; } .ware + .ware { margin-top: 12px; } .ware button { margin-top: 6px; } /* --- relationships ------------------------------------------------------- */ .bond { padding: 6px 0; } .bond + .bond { border-top: 1px solid var(--edge); } .bond-bar { letter-spacing: 1px; font-size: 12px; } .bond-fill { color: var(--mid); } .bond-rest { color: var(--edge); } button.linkish { background: none; border: none; padding: 0; font: inherit; color: var(--hot); cursor: pointer; text-decoration: underline dotted; } button.linkish:hover { color: var(--warn); } .bond-bar.hostile .bond-fill { color: var(--bad); }