/* ============================================================================= APT terminal aesthetic. Theme-driven; the active palette is set by a class on . Three tiers ship: junkyard (amber CRT), professional (green phosphor), top-shelf (cool cyan). main.js applies the right class based on deck_tier so upgrading your deck literally changes the UI. ============================================================================= */ /* -------- Junkyard (deck_tier 1, default) -------- Warm amber phosphor. The cheap salvaged deck. */ body.theme-junkyard { --bg: #0a0805; --bg-glow: #120e08; --fg: #e6d8b8; --fg-dim: #8a7758; --accent: #ffb000; --accent-rgb: 255, 176, 0; --accent-dim: #b07000; --warn: #ff5050; --rule: #2a1f10; } /* -------- Professional (deck_tier 2) -------- Classic terminal green phosphor. The clean working deck. */ body.theme-professional { --bg: #0a0d0a; --bg-glow: #0d130d; --fg: #d8e8df; --fg-dim: #6e8479; --accent: #66ffaa; --accent-rgb: 102, 255, 170; --accent-dim: #2a8055; --warn: #ff7a59; --rule: #173021; } /* -------- Top-Shelf (deck_tier 3) -------- Cool cyan, sharp, modern. The serious gear. */ body.theme-topshelf { --bg: #050810; --bg-glow: #08101a; --fg: #d8e0e8; --fg-dim: #5e708a; --accent: #66ddff; --accent-rgb: 102, 221, 255; --accent-dim: #2080aa; --warn: #ffaa00; --rule: #102030; } /* ============================================================================= Base layout ============================================================================= */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; background: var(--bg); color: var(--fg); font-family: "IBM Plex Mono", "JetBrains Mono", "Menlo", "Consolas", monospace; font-size: 16px; line-height: 1.55; } body { background: radial-gradient(ellipse at top, rgba(var(--accent-rgb), 0.04), transparent 60%), var(--bg); } #terminal { max-width: 760px; margin: 40px auto; padding: 24px 28px 36px; background: var(--bg-glow); border: 1px solid var(--rule); box-shadow: 0 0 60px rgba(var(--accent-rgb), 0.04); min-height: calc(100vh - 80px); display: flex; flex-direction: column; } #terminal[hidden] { display: none; } header { display: flex; gap: 14px; align-items: baseline; border-bottom: 1px solid var(--rule); padding-bottom: 10px; margin-bottom: 22px; font-size: 13px; letter-spacing: 0.06em; text-transform: lowercase; } header .prompt { color: var(--accent); } header .title { color: var(--fg-dim); flex: 1; } header .time { color: var(--fg-dim); } main { flex: 1; } /* ============================================================================= Story content ============================================================================= */ #story .line { margin: 0 0 14px 0; white-space: pre-wrap; } #story .line:last-child { margin-bottom: 6px; } #story .choice-echo { color: var(--accent-dim); font-style: italic; } #story .end { color: var(--fg-dim); font-size: 12px; letter-spacing: 0.18em; margin-top: 24px; text-transform: uppercase; } /* Lore link inside narrative text. Subtle dotted underline. */ .lore-link { color: var(--accent); border-bottom: 1px dotted var(--accent-dim); cursor: pointer; transition: color 120ms, border-color 120ms; } .lore-link:hover { color: var(--fg); border-bottom-color: var(--accent); } /* ============================================================================= Choices and input ============================================================================= */ #choices { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; } button.choice { background: transparent; border: 1px solid var(--accent-dim); color: var(--accent); font: inherit; text-align: left; padding: 10px 14px; cursor: pointer; transition: background 120ms, border-color 120ms; } button.choice:hover { background: rgba(var(--accent-rgb), 0.08); border-color: var(--accent); } button.choice:active { background: rgba(var(--accent-rgb), 0.16); } button.choice:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; } .input-form { display: flex; flex-direction: column; gap: 8px; } .text-input { background: rgba(var(--accent-rgb), 0.04); border: 1px solid var(--accent-dim); color: var(--fg); font: inherit; padding: 10px 14px; caret-color: var(--accent); } .text-input:focus { outline: none; border-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); } .text-input::placeholder { color: var(--fg-dim); font-style: italic; } #error { color: var(--warn); white-space: pre-wrap; border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 14px; font-size: 13px; } #error:empty { display: none; } /* ============================================================================= Popups. Generic chrome shared by the lore window and the state window. Both inherit the active theme automatically through CSS variables. ============================================================================= */ .popup-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0); pointer-events: none; z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 60px 20px 20px; transition: background 180ms ease-out; } .popup-overlay.is-open { background: rgba(0, 0, 0, 0.55); pointer-events: auto; } .popup-window { width: min(620px, 100%); max-height: 80vh; overflow-y: auto; background: var(--bg-glow); border: 1px solid var(--accent-dim); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 80px rgba(var(--accent-rgb), 0.08); padding: 0; opacity: 0; transform: translateY(-12px) scale(0.985); transition: opacity 220ms ease-out, transform 220ms ease-out; } .popup-overlay.is-open .popup-window { opacity: 1; transform: translateY(0) scale(1); } .popup-header { display: flex; align-items: baseline; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--rule); background: rgba(var(--accent-rgb), 0.04); font-size: 12px; letter-spacing: 0.1em; text-transform: lowercase; } .popup-header .lh-prompt { color: var(--accent); } .popup-header .lh-title { color: var(--fg-dim); flex: 1; } .popup-header .lh-close { background: transparent; border: 1px solid var(--accent-dim); color: var(--accent); font: inherit; font-size: 12px; padding: 2px 10px; cursor: pointer; letter-spacing: 0.1em; } .popup-header .lh-close:hover { background: rgba(var(--accent-rgb), 0.1); border-color: var(--accent); } .popup-body { padding: 18px 22px 22px; } .popup-body h2 { margin: 0 0 4px 0; font-size: 18px; font-weight: 600; color: var(--accent); letter-spacing: 0.02em; } /* Reveal lines one at a time after the window appears. */ .popup-overlay.is-open .popup-body .reveal { animation: popup-reveal 320ms ease-out backwards; } @keyframes popup-reveal { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* -------- Lore-specific blocks inside the popup body -------- */ .popup-body .lore-category { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 14px; } .popup-body .lore-text { margin: 0 0 14px 0; white-space: pre-wrap; } .popup-body .lore-mechanical { border: 1px dashed var(--accent-dim); padding: 10px 14px; margin: 14px 0; font-size: 14px; background: rgba(var(--accent-rgb), 0.03); } .popup-body .lore-mechanical-title { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } .popup-body .lore-related { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--fg-dim); } .popup-body .lore-related .lore-link { margin-right: 12px; display: inline-block; } /* ============================================================================= State window blocks ============================================================================= */ .popup-body .state-section { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--rule); } .popup-body .state-section:first-child { margin-top: 0; padding-top: 0; border-top: none; } .popup-body .state-section-title { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; } .popup-body .state-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px 18px; font-size: 14px; } .popup-body .state-row { display: flex; justify-content: space-between; border-bottom: 1px dotted var(--rule); padding: 4px 0; } .popup-body .state-row .state-label { color: var(--fg-dim); } .popup-body .state-row .state-value { color: var(--fg); font-variant-numeric: tabular-nums; } .popup-body .state-row .state-value.warn { color: var(--warn); } .popup-body .state-row .state-value.dim { color: var(--fg-dim); } .popup-body .state-bar { height: 6px; background: var(--rule); border-radius: 1px; overflow: hidden; margin: 4px 0 10px 0; } .popup-body .state-bar-fill { height: 100%; background: var(--accent); transition: width 200ms ease-out; } .popup-body .state-bar-fill.warn { background: var(--warn); } .popup-body .state-effect { border: 1px dashed var(--accent-dim); padding: 8px 12px; margin-bottom: 8px; background: rgba(var(--accent-rgb), 0.03); } .popup-body .state-effect-title { font-weight: 600; color: var(--accent); margin-bottom: 2px; } .popup-body .state-effect-impact { font-size: 13px; color: var(--fg-dim); margin-top: 4px; } .popup-body .state-empty { color: var(--fg-dim); font-style: italic; } /* ============================================================================= Game controls (status + menu buttons, fixed bottom-right) ============================================================================= */ #game-controls { position: fixed; bottom: 18px; right: 18px; display: flex; gap: 8px; z-index: 900; } #game-controls[hidden] { display: none; } #status-toggle, #menu-toggle { background: var(--bg-glow); border: 1px solid var(--accent-dim); color: var(--accent); font: inherit; font-size: 12px; padding: 8px 14px; cursor: pointer; letter-spacing: 0.1em; text-transform: lowercase; transition: background 120ms, border-color 120ms; } #status-toggle:hover, #menu-toggle:hover { background: rgba(var(--accent-rgb), 0.08); border-color: var(--accent); } #status-toggle:focus-visible, #menu-toggle:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; } /* ============================================================================= Main menu (full-screen takeover at game start and on quit-to-main-menu) ============================================================================= */ .menu-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; background: radial-gradient(ellipse at top, rgba(var(--accent-rgb), 0.06), transparent 60%), var(--bg); } .menu-screen[hidden] { display: none; } .menu-content { width: min(420px, 100%); text-align: center; } .menu-title { font-size: 56px; letter-spacing: 0.4em; font-weight: 700; color: var(--accent); margin: 0 0 8px 0; text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.35); } .menu-subtitle { font-size: 13px; letter-spacing: 0.32em; color: var(--fg-dim); margin-bottom: 56px; text-transform: lowercase; } .menu-buttons { display: flex; flex-direction: column; gap: 10px; margin: 0 auto; max-width: 280px; } .menu-action { background: transparent; border: 1px solid var(--accent-dim); color: var(--accent); font: inherit; font-size: 14px; padding: 12px 16px; cursor: pointer; letter-spacing: 0.18em; text-transform: lowercase; text-align: center; transition: background 120ms, border-color 120ms, color 120ms; } .menu-action:hover:not(:disabled) { background: rgba(var(--accent-rgb), 0.08); border-color: var(--accent); } .menu-action:disabled { border-color: var(--rule); color: var(--fg-dim); cursor: not-allowed; } .menu-action:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; } .menu-footer { margin-top: 56px; font-size: 11px; letter-spacing: 0.32em; color: var(--fg-dim); text-transform: lowercase; } /* ============================================================================= Ending screen (retirement or death) ============================================================================= */ #ending-screen[hidden] { display: none; } .ending-content { width: min(620px, 100%); text-align: left; padding: 40px 0; } .ending-type { font-size: 11px; letter-spacing: 0.32em; color: var(--fg-dim); text-transform: lowercase; margin-bottom: 8px; } .ending-title { font-size: 28px; letter-spacing: 0.04em; font-weight: 600; color: var(--accent); margin: 0 0 6px 0; text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.25); } .ending-subtitle { font-size: 13px; letter-spacing: 0.18em; color: var(--fg-dim); margin-bottom: 28px; text-transform: lowercase; } .ending-body { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; } .ending-body p { margin: 0; white-space: pre-wrap; line-height: 1.6; } .ending-body p.reveal { animation: ending-reveal 480ms ease-out backwards; } @keyframes ending-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .ending-actions { display: flex; gap: 10px; margin-top: 12px; } .ending-actions .menu-action { flex: 1; text-align: center; } /* ============================================================================= Pause menu actions and save slot list ============================================================================= */ .popup-body .pause-actions { display: flex; flex-direction: column; gap: 8px; } .popup-body .pause-actions .menu-action { text-align: left; padding: 10px 14px; letter-spacing: 0.12em; } .popup-body .save-slots { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; } .popup-body .save-slot { display: flex; flex-direction: column; align-items: stretch; gap: 4px; border: 1px solid var(--accent-dim); background: transparent; color: inherit; font: inherit; text-align: left; padding: 10px 14px; cursor: pointer; transition: background 120ms, border-color 120ms; } .popup-body .save-slot:hover:not(:disabled) { background: rgba(var(--accent-rgb), 0.06); border-color: var(--accent); } .popup-body .save-slot:disabled { cursor: not-allowed; border-color: var(--rule); color: var(--fg-dim); } .popup-body .save-slot-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; } .popup-body .save-slot-name { color: var(--accent); letter-spacing: 0.14em; text-transform: lowercase; } .popup-body .save-slot:disabled .save-slot-name { color: var(--fg-dim); } .popup-body .save-slot-stamp { color: var(--fg-dim); font-size: 11px; } .popup-body .save-slot-meta { color: var(--fg-dim); font-size: 12px; } .popup-body .pause-back { margin-top: 14px; } .popup-body .pause-note { margin-top: 14px; font-size: 12px; color: var(--fg-dim); font-style: italic; }