/* ========================================================================== KEPLAR TERMINAL — CRT skin Layers, back to front: .crt-cabinet plastic housing + ambient room glow .crt-screen the glass tube (rounded, bowed edges, inner shadow) .crt-content the actual UI (scaled slightly, phosphor bloom) .crt-glass scanlines, aperture grille, sweep, glare, vignette FX intensity is driven by data-fx="full|soft|off" on . ========================================================================== */ :root { /* phosphor palette */ --phos: #3dfba4; --phos-bright: #b8ffdd; --phos-dim: #1f8f5c; --phos-faint: #0d5c3b; --cyan: #5fd8ff; --cyan-dim: #2d7f9d; --amber: #ffb000; --alert: #ff4d5e; --violet: #b07cff; --ink: #04070a; --ink-soft: #08120e; --panel: rgba(10, 32, 24, 0.42); --panel-solid: #061410; --rule: rgba(61, 251, 164, 0.28); --rule-soft: rgba(61, 251, 164, 0.14); --glow-sm: 0 0 2px rgba(61, 251, 164, 0.75); --glow-md: 0 0 6px rgba(61, 251, 164, 0.55), 0 0 14px rgba(61, 251, 164, 0.22); --glow-lg: 0 0 10px rgba(61, 251, 164, 0.6), 0 0 28px rgba(61, 251, 164, 0.3); --mono: 'Share Tech Mono', 'DejaVu Sans Mono', 'Consolas', 'Courier New', ui-monospace, monospace; --tap: 44px; /* minimum touch target */ --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* Several components below set display:flex, which would otherwise beat the user-agent [hidden] rule and leave hidden chrome on screen. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; height: 100%; background: #01030a; color: var(--phos); font-family: var(--mono); font-size: 15px; line-height: 1.45; overscroll-behavior: none; } body { /* room ambience: the tube lights the wall behind it */ background: radial-gradient(120% 90% at 50% 45%, #071a16 0%, #03080b 55%, #000205 100%); } /* ------------------------------------------------------------- cabinet -- */ .crt-cabinet { position: fixed; inset: 0; display: flex; align-items: stretch; justify-content: center; padding: 0; } .crt-screen { position: relative; flex: 1; /* without these the topbar's intrinsic min-width stretches the tube wider than the phone viewport, and tall content stretches it past the bottom */ min-width: 0; min-height: 0; overflow: hidden; overflow: clip; background: #020604; border-radius: 22px; box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.95), inset 0 0 140px rgba(0, 30, 20, 0.55), 0 0 60px rgba(28, 120, 84, 0.16); } /* Bowed glass: elliptical shadows pinch the four edges so the picture reads as if it is wrapped around a tube rather than printed on a flat panel. */ .crt-screen::before, .crt-screen::after { content: ''; position: absolute; left: -8%; right: -8%; height: 14%; pointer-events: none; z-index: 6; } .crt-screen::before { top: -7%; border-radius: 0 0 50% 50% / 0 0 100% 100%; background: radial-gradient(80% 100% at 50% 0%, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0) 72%); } .crt-screen::after { bottom: -7%; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: radial-gradient(80% 100% at 50% 100%, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0) 72%); } /* ------------------------------------------------------------- content -- */ .crt-content { position: relative; z-index: 2; height: 100%; width: 100%; min-width: 0; min-height: 0; display: flex; flex-direction: column; /* slight horizontal stretch + phosphor bloom */ transform: scale(1.006); transform-origin: center; text-shadow: var(--glow-sm); animation: flicker 7.3s infinite steps(60); } @keyframes flicker { 0%, 96% { opacity: 1; } 96.5% { opacity: 0.93; } 97% { opacity: 1; } 98.2% { opacity: 0.96; } 98.6% { opacity: 1; } } /* --------------------------------------------------------------- glass -- */ .crt-glass { position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: 22px; } /* horizontal scanlines + RGB aperture grille */ .crt-glass::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( to bottom, rgba(0, 0, 0, 0.34) 0px, rgba(0, 0, 0, 0.34) 1px, rgba(0, 0, 0, 0.04) 1px, rgba(0, 0, 0, 0.04) 3px ), repeating-linear-gradient( to right, rgba(255, 40, 40, 0.055) 0px, rgba(40, 255, 120, 0.045) 1px, rgba(60, 90, 255, 0.055) 2px, rgba(0, 0, 0, 0.05) 3px ); mix-blend-mode: multiply; opacity: 0.9; } /* vignette + corner falloff + specular glare off the curved glass */ .crt-glass::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 100% at 50% 50%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.55) 88%, rgba(0, 0, 0, 0.85) 100%), radial-gradient(60% 40% at 22% 8%, rgba(190, 255, 235, 0.09), rgba(255, 255, 255, 0) 70%), radial-gradient(40% 24% at 82% 92%, rgba(120, 220, 255, 0.05), rgba(255, 255, 255, 0) 70%); } /* the slow refresh bar rolling down the tube */ .crt-sweep { position: absolute; left: 0; right: 0; height: 38%; z-index: 5; pointer-events: none; background: linear-gradient( to bottom, rgba(120, 255, 200, 0) 0%, rgba(120, 255, 200, 0.035) 45%, rgba(180, 255, 225, 0.07) 50%, rgba(120, 255, 200, 0.035) 55%, rgba(120, 255, 200, 0) 100% ); animation: sweep 7.5s linear infinite; } @keyframes sweep { 0% { transform: translateY(-40%); } 100% { transform: translateY(280%); } } /* power-on: the tube strikes, blooms wide, then settles */ .crt-boot { position: absolute; inset: 0; z-index: 8; pointer-events: none; background: #dffff2; animation: powerOn 900ms ease-out forwards; } @keyframes powerOn { 0% { transform: scale(1, 0.004); opacity: 1; } 35% { transform: scale(1, 0.006); opacity: 1; } 55% { transform: scale(1, 0.5); opacity: 0.55; } 100% { transform: scale(1, 1); opacity: 0; } } /* FX levels ------------------------------------------------------------- */ html[data-fx='soft'] .crt-glass::before { opacity: 0.42; } html[data-fx='soft'] .crt-sweep { display: none; } html[data-fx='soft'] .crt-content { animation: none; text-shadow: 0 0 1px rgba(61,251,164,.5); } html[data-fx='off'] .crt-glass, html[data-fx='off'] .crt-sweep, html[data-fx='off'] .crt-screen::before, html[data-fx='off'] .crt-screen::after { display: none; } html[data-fx='off'] .crt-content { animation: none; text-shadow: none; transform: none; } html[data-fx='off'] .crt-screen { box-shadow: none; border-radius: 0; } @media (prefers-reduced-motion: reduce) { .crt-content { animation: none; } .crt-sweep { animation: none; opacity: 0.4; } .crt-boot { animation: none; display: none; } } /* ====================================================== structural chrome */ .topbar { flex: 0 0 auto; padding: calc(6px + var(--safe-t)) 12px 6px; border-bottom: 1px solid var(--rule); display: flex; align-items: center; gap: 8px; background: linear-gradient(to bottom, rgba(10, 40, 30, 0.5), rgba(4, 10, 8, 0)); } .brand { font-size: 15px; letter-spacing: 2px; color: var(--phos-bright); text-shadow: var(--glow-md); white-space: nowrap; min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; } .brand small { color: var(--cyan); letter-spacing: 1px; font-size: 11px; } .topbar-spacer { flex: 1; } .statuschip { font-size: 11px; letter-spacing: 1px; color: var(--cyan); border: 1px solid var(--cyan-dim); padding: 2px 6px; white-space: nowrap; flex: 0 1 auto; min-width: 0; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; } .statuschip.warden { color: var(--amber); border-color: rgba(255, 176, 0, 0.5); text-shadow: 0 0 4px rgba(255,176,0,.5); } .view { position: relative; /* the absolutely-placed map stage anchors to this */ flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 10px 12px 16px; } .view.no-pad { padding: 0; } .view[hidden] { display: none; } /* bottom tab bar ------------------------------------------------------- */ .tabbar { flex: 0 0 auto; display: flex; border-top: 1px solid var(--rule); background: linear-gradient(to top, rgba(8, 30, 22, 0.75), rgba(4, 10, 8, 0.1)); padding-bottom: var(--safe-b); } .tabbar button { flex: 1; min-height: var(--tap); background: none; border: 0; border-right: 1px solid var(--rule-soft); color: var(--phos-dim); font-family: var(--mono); font-size: 12px; letter-spacing: 1.5px; padding: 8px 2px; cursor: pointer; } .tabbar button:last-child { border-right: 0; } .tabbar button .glyph { display: block; font-size: 15px; line-height: 1.1; } .tabbar button[aria-selected='true'] { color: var(--phos-bright); text-shadow: var(--glow-md); background: rgba(61, 251, 164, 0.09); box-shadow: inset 0 2px 0 var(--phos); } /* ============================================================== elements */ h1, h2, h3 { font-weight: normal; margin: 0; letter-spacing: 2px; } h2 { font-size: 14px; color: var(--cyan); text-transform: uppercase; } h3 { font-size: 13px; color: var(--phos-bright); } p { margin: 0 0 8px; } a { color: var(--cyan); } .rule { border: 0; border-top: 1px dashed var(--rule); margin: 10px 0; } .section-head { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 8px; } .section-head .count { color: var(--phos-dim); font-size: 11px; } .muted { color: var(--phos-dim); } .dim { opacity: 0.7; } .warn { color: var(--amber); } .alert { color: var(--alert); } .center { text-align: center; } .nowrap { white-space: nowrap; } pre.ascii { margin: 0; font-family: var(--mono); font-size: 11px; line-height: 1.05; white-space: pre; color: var(--phos); text-shadow: var(--glow-sm); overflow: hidden; } /* panels ---------------------------------------------------------------- */ .panel { border: 1px solid var(--rule); background: var(--panel); padding: 10px; margin-bottom: 10px; position: relative; } .panel > .panel-title { position: absolute; top: -9px; left: 8px; background: var(--panel-solid); padding: 0 6px; font-size: 11px; letter-spacing: 2px; color: var(--cyan); } /* buttons --------------------------------------------------------------- */ button, .btn { font-family: var(--mono); font-size: 13px; letter-spacing: 1px; color: var(--phos); background: rgba(61, 251, 164, 0.06); border: 1px solid var(--rule); padding: 9px 12px; min-height: var(--tap); cursor: pointer; transition: background 120ms linear, color 120ms linear; } button:hover, .btn:hover { background: rgba(61, 251, 164, 0.16); color: var(--phos-bright); } button:active { background: rgba(61, 251, 164, 0.3); } button:disabled { opacity: 0.4; cursor: not-allowed; } button.small { min-height: 32px; padding: 4px 8px; font-size: 12px; } button.primary { border-color: var(--phos); color: var(--phos-bright); text-shadow: var(--glow-sm); box-shadow: 0 0 8px rgba(61, 251, 164, 0.18); } button.danger { color: var(--alert); border-color: rgba(255, 77, 94, 0.5); } button.danger:hover { background: rgba(255, 77, 94, 0.15); } button.ghost { background: none; border-color: var(--rule-soft); color: var(--phos-dim); } button[aria-pressed='true'] { background: rgba(255, 176, 0, 0.16); border-color: var(--amber); color: var(--amber); } .btn-row { display: flex; flex-wrap: wrap; gap: 8px; } .btn-row > * { flex: 1 1 auto; } /* compact rows inside cards and list items hug their labels instead */ .faction-card .btn-row, .body-item .btn-row { justify-content: flex-end; gap: 6px; } .faction-card .btn-row > *, .body-item .btn-row > * { flex: 0 0 auto; } /* forms ----------------------------------------------------------------- */ label { display: block; font-size: 11px; letter-spacing: 1.5px; color: var(--cyan); margin: 10px 0 3px; } input, select, textarea { width: 100%; font-family: var(--mono); font-size: 16px; /* >=16px stops iOS Safari zooming on focus */ color: var(--phos-bright); background: rgba(0, 0, 0, 0.55); border: 1px solid var(--rule); padding: 9px 10px; min-height: var(--tap); } textarea { min-height: 90px; resize: vertical; line-height: 1.4; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--phos); box-shadow: 0 0 0 1px rgba(61, 251, 164, 0.35), inset 0 0 12px rgba(61, 251, 164, 0.08); } input[type='color'] { padding: 2px; height: var(--tap); } input[type='range'] { accent-color: var(--phos); padding: 0; } input[type='checkbox'] { width: auto; min-height: 0; accent-color: var(--phos); } .field-inline { display: flex; align-items: center; gap: 8px; } .field-inline label { margin: 0; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; } /* blinking cursor + typed prompt ---------------------------------------- */ .cursor::after { content: '\2588'; color: var(--phos-bright); animation: blink 1.05s steps(2, start) infinite; } @keyframes blink { 50% { opacity: 0; } } .prompt::before { content: '> '; color: var(--phos-dim); } /* ============================================================= login view */ .login-wrap { height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 18px; max-width: 460px; margin: 0 auto; } .login-art { overflow-x: auto; font-size: 10px; line-height: 1.05; color: var(--phos); text-shadow: var(--glow-md); margin-bottom: 6px; text-align: center; white-space: pre; overflow: hidden; } .boot-log { font-size: 12px; color: var(--phos-dim); margin: 10px 0; min-height: 84px; } .boot-log div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .boot-log .ok { color: var(--phos); } .login-hint { font-size: 11px; color: var(--phos-dim); margin-top: 14px; line-height: 1.6; } .login-hint code { color: var(--cyan); } /* ================================================================ map tab */ .map-stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; background: radial-gradient(60% 60% at 50% 40%, rgba(20, 70, 55, 0.25), rgba(0, 0, 0, 0) 70%); } /* Absolute, so the SVG's own viewBox aspect ratio can never drive the height of the flex layout around it. */ #starmap { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .map-hud { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; gap: 6px; align-items: flex-start; pointer-events: none; z-index: 3; } .map-hud > * { pointer-events: auto; } .map-hud .hud-label { font-size: 10px; letter-spacing: 2px; color: var(--cyan); background: rgba(2, 10, 8, 0.72); border: 1px solid var(--rule-soft); padding: 3px 6px; } .map-tools { position: absolute; right: 8px; bottom: 8px; left: 8px; display: flex; flex-direction: row; justify-content: flex-end; flex-wrap: wrap; gap: 6px; z-index: 3; } .map-tools button { min-width: 38px; min-height: 38px; padding: 0 6px; font-size: 11px; letter-spacing: 0.5px; background: rgba(2, 12, 9, 0.85); backdrop-filter: blur(2px); } .map-mode-banner { position: absolute; left: 8px; top: 40px; z-index: 3; font-size: 11px; letter-spacing: 1px; color: var(--amber); border: 1px solid rgba(255, 176, 0, 0.5); background: rgba(30, 18, 0, 0.8); padding: 6px 8px; max-width: calc(100% - 16px); } /* svg map primitives */ .lane { stroke: var(--phos-dim); stroke-width: calc(1.1px * var(--z, 1)); opacity: 0.5; } .lane.hidden-lane { stroke-dasharray: calc(4px * var(--z,1)) calc(5px * var(--z,1)); stroke: var(--amber); opacity: 0.55; } .lane-label { fill: var(--phos-dim); font-size: calc(8px * var(--z, 1)); letter-spacing: 0; opacity: 0.75; } .sysnode { cursor: pointer; } .sysnode .halo { fill: rgba(61, 251, 164, 0.08); } .sysnode .glyph { fill: var(--phos); font-size: 5px; text-anchor: middle; dominant-baseline: central; } .sysnode .label { fill: var(--phos-bright); font-size: 3.1px; text-anchor: middle; letter-spacing: 0.15px; paint-order: stroke; stroke: rgba(2,8,6,.85); stroke-width: 0.7px; } .sysnode .ring { fill: none; stroke: var(--phos-dim); stroke-width: 0.35px; } .sysnode.is-hidden .glyph, .sysnode.is-hidden .label { fill: var(--amber); opacity: 0.85; } .sysnode.is-hidden .ring { stroke: var(--amber); stroke-dasharray: 1.2px 1.2px; } .sysnode.selected .ring { stroke: var(--phos-bright); stroke-width: 0.7px; } .sysnode.selected .halo { fill: rgba(61, 251, 164, 0.2); } .sysnode.link-source .ring { stroke: var(--cyan); stroke-width: 0.8px; } .faction-arc { stroke-width: 1.1px; fill: none; opacity: 0.95; } /* ============================================================ detail sheet */ .sheet-backdrop { position: absolute; inset: 0; z-index: 20; background: rgba(0, 6, 4, 0.72); display: flex; align-items: flex-end; justify-content: center; } .sheet-backdrop[hidden] { display: none; } .sheet { width: 100%; max-width: 680px; max-height: 88%; overflow-y: auto; -webkit-overflow-scrolling: touch; background: linear-gradient(to bottom, #072018, #030b08); border: 1px solid var(--phos-dim); border-bottom: 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(61, 251, 164, 0.12); padding: 0 12px calc(16px + var(--safe-b)); animation: sheetUp 180ms ease-out; } @keyframes sheetUp { from { transform: translateY(14%); opacity: 0.4; } to { transform: none; opacity: 1; } } .sheet-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 10px 0 8px; background: linear-gradient(to bottom, #072018 70%, rgba(7, 32, 24, 0)); border-bottom: 1px solid var(--rule); } .sheet-head h2 { flex: 1; color: var(--phos-bright); font-size: 15px; text-shadow: var(--glow-md); } .sheet-close { min-width: var(--tap); padding: 4px 10px; } .kv { display: grid; grid-template-columns: 92px 1fr; gap: 2px 8px; font-size: 12.5px; margin: 8px 0; } .kv dt { color: var(--cyan); letter-spacing: 1px; } .kv dd { margin: 0; color: var(--phos-bright); } .body-item { border-left: 2px solid var(--rule); padding: 4px 0 6px 8px; margin-bottom: 6px; font-size: 12.5px; } .body-item .kind { font-size: 10px; letter-spacing: 1.5px; color: var(--ink); background: var(--phos-dim); padding: 0 4px; margin-right: 5px; } .body-item.is-hidden { border-left-color: var(--amber); } .body-item.is-hidden .kind { background: var(--amber); } /* ============================================================ factions tab */ .faction-card { border: 1px solid var(--rule); border-left: 3px solid var(--fc, var(--phos)); background: linear-gradient(100deg, rgba(0,0,0,.25), var(--panel)); padding: 10px; margin-bottom: 10px; } .faction-top { display: flex; gap: 10px; align-items: flex-start; } .faction-emblem { flex: 0 0 auto; border: 1px solid var(--rule-soft); padding: 4px 6px; background: rgba(0, 0, 0, 0.45); color: var(--fc, var(--phos)); text-shadow: 0 0 4px currentColor; font-size: 9px; line-height: 1.05; } .faction-id { flex: 1; min-width: 0; } .faction-name { color: var(--fc, var(--phos-bright)); text-shadow: 0 0 6px currentColor; font-size: 14px; letter-spacing: 1.5px; word-break: break-word; } .faction-motto { font-size: 11px; color: var(--phos-dim); font-style: italic; } .power-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; } .power-bar { flex: 1; height: 12px; border: 1px solid var(--rule-soft); background: rgba(0, 0, 0, 0.5); position: relative; overflow: hidden; } .power-bar span { position: absolute; inset: 0 auto 0 0; background: var(--fc, var(--phos)); opacity: 0.75; box-shadow: 0 0 10px currentColor; transition: width 400ms ease-out; } .power-num { color: var(--fc, var(--phos)); min-width: 42px; text-align: right; } .faction-desc { font-size: 12.5px; margin-top: 8px; color: var(--phos); } .faction-presence { font-size: 11px; color: var(--phos-dim); margin-top: 6px; } .faction-presence b { color: var(--cyan); font-weight: normal; } .influence-bar { display: flex; height: 10px; border: 1px solid var(--rule-soft); margin: 6px 0; } .influence-bar i { display: block; height: 100%; box-shadow: inset 0 0 6px rgba(0,0,0,.5); } .influence-key { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; } .influence-key span::before { content: '\25A0'; margin-right: 4px; color: var(--k, var(--phos)); text-shadow: 0 0 5px currentColor; } /* ================================================================ log tab */ .note { border: 1px solid var(--rule-soft); border-left: 2px solid var(--phos-dim); padding: 8px; margin-bottom: 8px; background: rgba(0, 0, 0, 0.25); } .note.by-warden { border-left-color: var(--amber); } .note-meta { display: flex; gap: 8px; align-items: baseline; font-size: 10.5px; letter-spacing: 1px; color: var(--cyan); margin-bottom: 4px; flex-wrap: wrap; } .note.by-warden .note-meta .who { color: var(--amber); } .note-meta .when { color: var(--phos-dim); margin-left: auto; } .note-body { font-size: 13px; white-space: pre-wrap; word-break: break-word; } .note-sys { color: var(--phos-dim); } /* =============================================================== toasts -- */ .toast-stack { position: absolute; left: 0; right: 0; bottom: calc(var(--tap) + 12px + var(--safe-b)); z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; padding: 0 12px; } .toast { max-width: 100%; font-size: 12px; letter-spacing: 1px; padding: 8px 12px; border: 1px solid var(--phos); background: rgba(2, 18, 12, 0.95); color: var(--phos-bright); box-shadow: var(--glow-md); animation: toastIn 160ms ease-out; } .toast.err { border-color: var(--alert); color: var(--alert); box-shadow: 0 0 10px rgba(255,77,94,.4); } @keyframes toastIn { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } } .empty { text-align: center; color: var(--phos-dim); font-size: 12px; padding: 24px 12px; letter-spacing: 1px; } /* ================================================== larger screens / desk */ @media (min-width: 720px) { html, body { font-size: 16px; } .crt-cabinet { padding: 18px; } .crt-screen { border-radius: 30px; max-width: 1200px; margin: 0 auto; } .view { padding: 14px 20px 20px; } .grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; } .grid-cards > * { margin-bottom: 0; } } @media (max-width: 430px) { .brand small { display: none; } .login-art { font-size: 8px; } } @media (max-width: 360px) { .tabbar button { font-size: 10px; letter-spacing: 1px; } .brand { font-size: 13px; } .topbar { gap: 6px; padding-left: 8px; padding-right: 8px; } }