| |
| :root { |
| --bg: #050a18; |
| --bg2: #0b1530; |
| --panel: rgba(10, 22, 52, 0.88); |
| --panel-b: rgba(0, 200, 255, 0.18); |
| --panel-b2: rgba(0, 200, 255, 0.35); |
| --text: #e2f0ff; |
| --muted: #7aa5c8; |
| --accent: #00f5d4; |
| --accent2: #1bc0ff; |
| --gold: #ffd60a; |
| --danger: #ff4b4b; |
| --warn: #ff9e2c; |
| --good: #4ade80; |
| --pixel-font: 'Press Start 2P', monospace; |
| --mono-font: 'Share Tech Mono', monospace; |
| --ui-font: 'Inter', 'Segoe UI', system-ui, sans-serif; |
| --radius: 14px; |
| --shadow: 0 8px 32px rgba(0,0,0,0.55); |
| --glow-c: 0 0 12px rgba(0,245,212,0.45); |
| --glow-r: 0 0 12px rgba(255,75,75,0.55); |
| --transition: 180ms ease; |
| } |
|
|
| |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } |
|
|
| body { |
| font-family: var(--ui-font); |
| background: radial-gradient(ellipse 1400px 900px at 15% 0%, #1a3a70 0%, #0b1935 45%, #050a18 100%); |
| color: var(--text); |
| min-height: 100vh; |
| overflow-x: hidden; |
| } |
|
|
| |
| .layout { |
| max-width: 1440px; |
| margin: 0 auto; |
| padding: 14px 18px; |
| display: grid; |
| gap: 12px; |
| } |
|
|
| |
| .command-header { |
| display: grid; |
| grid-template-columns: auto 1fr auto; |
| align-items: center; |
| gap: 16px; |
| background: var(--panel); |
| border: 1px solid var(--panel-b2); |
| border-radius: var(--radius); |
| padding: 12px 20px; |
| backdrop-filter: blur(10px); |
| box-shadow: var(--shadow); |
| } |
|
|
| .brand { display: flex; flex-direction: column; gap: 4px; } |
|
|
| .pixel-logo { |
| font-family: var(--pixel-font); |
| font-size: 1.1rem; |
| color: var(--accent); |
| text-shadow: 0 0 18px var(--accent), 0 0 35px rgba(0,245,212,0.4); |
| letter-spacing: 0.04em; |
| line-height: 1; |
| } |
|
|
| .brand-sub { |
| font-size: 0.7rem; |
| color: var(--muted); |
| letter-spacing: 0.06em; |
| text-transform: uppercase; |
| } |
|
|
| .hud-stats { |
| display: flex; |
| gap: 8px; |
| flex-wrap: wrap; |
| justify-content: center; |
| } |
|
|
| .hud-chip { |
| background: rgba(0,0,0,0.38); |
| border: 1px solid rgba(100,200,255,0.22); |
| border-radius: 10px; |
| padding: 6px 12px; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| min-width: 80px; |
| } |
| .hud-chip.accent { border-color: var(--accent); box-shadow: var(--glow-c); } |
|
|
| .chip-label { |
| font-size: 0.6rem; |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| color: var(--muted); |
| font-family: var(--mono-font); |
| } |
| .chip-val { |
| font-size: 0.92rem; |
| font-weight: 700; |
| color: var(--text); |
| font-family: var(--mono-font); |
| margin-top: 2px; |
| } |
| .hud-chip.accent .chip-val { color: var(--accent); } |
|
|
| #chipEvent.shock .chip-val { color: var(--warn); animation: pulse-warn 1s infinite; } |
| @keyframes pulse-warn { 0%,100%{opacity:1} 50%{opacity:0.5} } |
|
|
| |
| .header-controls { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| } |
|
|
| |
| .fog-toggle { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| cursor: pointer; |
| user-select: none; |
| } |
| .fog-toggle input { display: none; } |
|
|
| .fog-track { |
| width: 52px; |
| height: 28px; |
| background: rgba(0,0,0,0.5); |
| border: 1px solid var(--panel-b2); |
| border-radius: 999px; |
| position: relative; |
| transition: background var(--transition); |
| } |
| .fog-toggle input:checked ~ .fog-track { background: rgba(0,245,212,0.15); } |
|
|
| .fog-thumb { |
| position: absolute; |
| top: 3px; left: 3px; |
| width: 22px; height: 22px; |
| border-radius: 50%; |
| background: var(--accent2); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| transition: transform var(--transition), background var(--transition); |
| box-shadow: 0 2px 8px rgba(0,0,0,0.5); |
| font-size: 0.75rem; |
| } |
| .fog-toggle input:not(:checked) ~ .fog-track .fog-thumb { |
| transform: translateX(24px); |
| background: var(--muted); |
| } |
| .fog-icon-bdo { display: none; } |
| .fog-toggle input:not(:checked) ~ .fog-track .fog-icon-god { display: none; } |
| .fog-toggle input:not(:checked) ~ .fog-track .fog-icon-bdo { display: inline; } |
|
|
| .fog-label { |
| font-family: var(--mono-font); |
| font-size: 0.78rem; |
| color: var(--accent); |
| letter-spacing: 0.04em; |
| min-width: 92px; |
| } |
|
|
| .simulate-btn { |
| border: none; |
| background: linear-gradient(135deg, #00f5d4, #1bc0ff); |
| color: #021824; |
| font-weight: 800; |
| font-family: var(--mono-font); |
| letter-spacing: 0.04em; |
| padding: 10px 22px; |
| border-radius: 999px; |
| cursor: pointer; |
| font-size: 0.88rem; |
| transition: transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease; |
| box-shadow: 0 6px 20px rgba(0,245,212,0.4); |
| } |
| .simulate-btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 28px rgba(0,245,212,0.55); } |
| .simulate-btn:disabled { opacity: 0.55; cursor: wait; transform: none; } |
|
|
| .reset-btn { |
| border: 1px solid var(--panel-b2); |
| background: rgba(255,255,255,0.05); |
| color: var(--muted); |
| font-family: var(--mono-font); |
| padding: 9px 16px; |
| border-radius: 999px; |
| cursor: pointer; |
| font-size: 0.82rem; |
| transition: var(--transition); |
| } |
| .reset-btn:hover { border-color: var(--accent); color: var(--accent); } |
|
|
| |
| .energy-strip { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| background: var(--panel); |
| border: 1px solid var(--panel-b); |
| border-radius: var(--radius); |
| padding: 10px 16px; |
| backdrop-filter: blur(6px); |
| } |
| .energy-icon { font-size: 1.2rem; flex-shrink: 0; } |
|
|
| .energy-track-wrap { flex: 1; display: flex; flex-direction: column; gap: 4px; } |
|
|
| .energy-track { |
| position: relative; |
| height: 10px; |
| background: rgba(0,0,0,0.5); |
| border-radius: 999px; |
| overflow: hidden; |
| border: 1px solid rgba(100,200,255,0.15); |
| } |
|
|
| .energy-fill { |
| height: 100%; |
| border-radius: 999px; |
| background: linear-gradient(90deg, #ffd60a 0%, #ff9e2c 40%, #ff4b4b 100%); |
| transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1); |
| box-shadow: 0 0 10px rgba(255,214,10,0.6); |
| } |
|
|
| .energy-fill.critical { background: linear-gradient(90deg, #ff4b4b, #ff2020); box-shadow: 0 0 14px rgba(255,50,50,0.7); } |
|
|
| .energy-ticks { |
| position: absolute; |
| inset: 0; |
| display: flex; |
| justify-content: space-around; |
| align-items: stretch; |
| pointer-events: none; |
| } |
| .energy-ticks span { |
| width: 1px; |
| background: rgba(255,255,255,0.12); |
| } |
|
|
| .energy-label-row { |
| display: flex; |
| justify-content: space-between; |
| font-size: 0.65rem; |
| font-family: var(--mono-font); |
| color: var(--muted); |
| letter-spacing: 0.04em; |
| } |
| #energyText { color: var(--gold); } |
|
|
| |
| .main-content { |
| display: grid; |
| grid-template-columns: 1fr 340px; |
| gap: 12px; |
| align-items: start; |
| } |
|
|
| |
| .map-wrap { |
| position: relative; |
| background: var(--panel); |
| border: 1px solid var(--panel-b2); |
| border-radius: var(--radius); |
| overflow: hidden; |
| box-shadow: var(--shadow); |
| } |
|
|
| canvas { |
| display: block; |
| width: 100%; |
| border-radius: var(--radius); |
| image-rendering: pixelated; |
| } |
|
|
| .map-badge { |
| position: absolute; |
| top: 14px; |
| right: 14px; |
| font-family: var(--pixel-font); |
| font-size: 0.55rem; |
| padding: 5px 10px; |
| border-radius: 6px; |
| background: rgba(0,245,212,0.15); |
| border: 1px solid var(--accent); |
| color: var(--accent); |
| letter-spacing: 0.06em; |
| backdrop-filter: blur(4px); |
| transition: var(--transition); |
| pointer-events: none; |
| } |
| .map-badge.bdo-mode { |
| background: rgba(100,100,200,0.18); |
| border-color: #a090ff; |
| color: #c0b0ff; |
| } |
|
|
| .map-summary { |
| position: absolute; |
| bottom: 12px; |
| left: 14px; |
| right: 14px; |
| font-size: 0.75rem; |
| color: var(--muted); |
| font-family: var(--mono-font); |
| background: rgba(5,10,24,0.75); |
| padding: 5px 10px; |
| border-radius: 8px; |
| border: 1px solid rgba(100,200,255,0.12); |
| pointer-events: none; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
|
|
| |
| .sidebar { |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| } |
|
|
| .panel { |
| background: var(--panel); |
| border: 1px solid var(--panel-b); |
| border-radius: var(--radius); |
| padding: 14px; |
| backdrop-filter: blur(8px); |
| box-shadow: var(--shadow); |
| } |
|
|
| .panel-title { |
| font-family: var(--mono-font); |
| font-size: 0.72rem; |
| letter-spacing: 0.06em; |
| text-transform: uppercase; |
| color: var(--accent2); |
| margin-bottom: 10px; |
| padding-bottom: 8px; |
| border-bottom: 1px solid var(--panel-b); |
| } |
|
|
| |
| .agent-mind-panel { flex-shrink: 0; } |
|
|
| .thought-bubble { |
| background: rgba(0,0,0,0.4); |
| border: 1px solid rgba(100,200,255,0.15); |
| border-radius: 10px; |
| padding: 10px 12px; |
| min-height: 72px; |
| max-height: 120px; |
| overflow-y: auto; |
| margin-bottom: 10px; |
| scrollbar-width: thin; |
| scrollbar-color: var(--panel-b2) transparent; |
| position: relative; |
| } |
| .thought-text { |
| font-family: var(--mono-font); |
| font-size: 0.75rem; |
| color: #c0e8ff; |
| line-height: 1.55; |
| } |
|
|
| .blink-cursor { font-size: 0.8rem; color: var(--accent); animation: blink 1s step-end infinite; } |
| @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} } |
|
|
| .belief-row { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| margin-bottom: 7px; |
| } |
| .belief-label { font-size: 0.65rem; font-family: var(--mono-font); color: var(--muted); min-width: 96px; } |
| .belief-track { |
| flex: 1; |
| height: 7px; |
| background: rgba(0,0,0,0.45); |
| border-radius: 999px; |
| overflow: hidden; |
| border: 1px solid rgba(100,200,255,0.15); |
| } |
| .belief-fill { |
| height: 100%; |
| background: linear-gradient(90deg, #ff4b4b 0%, #ffd60a 50%, #4ade80 100%); |
| border-radius: 999px; |
| transition: width 600ms ease; |
| } |
| .belief-pct { font-size: 0.7rem; font-family: var(--mono-font); color: var(--gold); min-width: 34px; text-align: right; } |
|
|
| .fraud-pred-row { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| background: rgba(0,0,0,0.3); |
| border-radius: 8px; |
| padding: 6px 10px; |
| font-family: var(--mono-font); |
| font-size: 0.7rem; |
| } |
| .fp-label { color: var(--muted); } |
| .fp-val { font-weight: 700; color: var(--gold); } |
| .fp-val.danger { color: var(--danger); } |
| .fp-divider { color: rgba(255,255,255,0.25); } |
|
|
| |
| .reward-bars { display: flex; flex-direction: column; gap: 7px; } |
|
|
| .rb-row { display: flex; align-items: center; gap: 8px; } |
| .rb-name { font-family: var(--mono-font); font-size: 0.62rem; color: var(--muted); min-width: 90px; text-transform: uppercase; letter-spacing: 0.04em; } |
| .rb-track { |
| flex: 1; |
| height: 6px; |
| background: rgba(0,0,0,0.45); |
| border-radius: 999px; |
| overflow: hidden; |
| border: 1px solid rgba(100,200,255,0.1); |
| } |
| .rb-fill { height: 100%; border-radius: 999px; transition: width 500ms ease; } |
| .rb-val { font-family: var(--mono-font); font-size: 0.65rem; min-width: 36px; text-align: right; } |
|
|
| |
| .log-panel { flex: 1; } |
|
|
| .action-feed { |
| max-height: 160px; |
| overflow-y: auto; |
| display: flex; |
| flex-direction: column; |
| gap: 5px; |
| scrollbar-width: thin; |
| scrollbar-color: var(--panel-b2) transparent; |
| } |
|
|
| .feed-item { |
| font-family: var(--mono-font); |
| font-size: 0.68rem; |
| padding: 5px 8px; |
| border-radius: 6px; |
| background: rgba(0,0,0,0.3); |
| color: #c0e0ff; |
| border-left: 2px solid var(--accent2); |
| line-height: 1.4; |
| word-break: break-word; |
| } |
| .feed-item.bad { border-left-color: var(--danger); color: #ffb0b0; } |
| .feed-item.warn { border-left-color: var(--warn); color: #ffe0a0; } |
| .feed-item.good { border-left-color: var(--good); color: #aaffcc; } |
| .feed-item.shock { border-left-color: #a090ff; color: #d0c0ff; } |
| .feed-item.action { border-left-color: var(--gold); } |
|
|
| |
| .villages-section { |
| background: var(--panel); |
| border: 1px solid var(--panel-b); |
| border-radius: var(--radius); |
| padding: 12px; |
| backdrop-filter: blur(6px); |
| } |
|
|
| .villages-row { |
| display: grid; |
| grid-template-columns: repeat(4, 1fr); |
| gap: 10px; |
| } |
|
|
| .village-card { |
| background: rgba(0,0,0,0.38); |
| border: 1px solid rgba(100,200,255,0.18); |
| border-radius: 12px; |
| padding: 11px 12px; |
| transition: border-color var(--transition), box-shadow var(--transition); |
| position: relative; |
| overflow: hidden; |
| } |
| .village-card:hover { border-color: var(--accent); box-shadow: var(--glow-c); } |
| .village-card.shock { border-color: #a090ff !important; box-shadow: 0 0 14px rgba(160,144,255,0.4); } |
| .village-card.critical { border-color: var(--danger) !important; box-shadow: var(--glow-r); } |
| .village-card.audit { border-color: var(--gold) !important; } |
|
|
| .vc-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| margin-bottom: 9px; |
| } |
|
|
| .vc-name { |
| font-family: var(--pixel-font); |
| font-size: 0.5rem; |
| color: var(--text); |
| letter-spacing: 0.04em; |
| } |
|
|
| .vc-badges { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; } |
|
|
| .badge { |
| font-family: var(--mono-font); |
| font-size: 0.58rem; |
| padding: 2px 6px; |
| border-radius: 4px; |
| letter-spacing: 0.04em; |
| font-weight: 600; |
| } |
| .badge-shock { background: rgba(160,144,255,0.2); color: #c0b0ff; border: 1px solid #a090ff; } |
| .badge-audit { background: rgba(255,214,10,0.15); color: var(--gold); border: 1px solid var(--gold); } |
| .badge-repair { background: rgba(255,158,44,0.15); color: var(--warn); border: 1px solid var(--warn); } |
| .badge-lag { background: rgba(100,100,100,0.25); color: var(--muted); border: 1px solid rgba(100,200,255,0.2); } |
| .badge-fraud { background: rgba(255,75,75,0.2); color: var(--danger); border: 1px solid var(--danger); } |
| .badge-regime { background: rgba(0,0,0,0.4); color: #d0a0ff; border: 1px solid rgba(160,144,255,0.4); } |
|
|
| .vc-metrics { display: flex; flex-direction: column; gap: 5px; } |
|
|
| .vc-metric-row { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| } |
| .vc-metric-label { |
| font-family: var(--mono-font); |
| font-size: 0.6rem; |
| color: var(--muted); |
| min-width: 70px; |
| text-transform: uppercase; |
| letter-spacing: 0.03em; |
| } |
| .vc-track { |
| flex: 1; |
| height: 5px; |
| background: rgba(0,0,0,0.5); |
| border-radius: 999px; |
| overflow: hidden; |
| } |
| .vc-fill { |
| height: 100%; |
| border-radius: 999px; |
| transition: width 500ms ease; |
| } |
| .vc-metric-val { |
| font-family: var(--mono-font); |
| font-size: 0.65rem; |
| min-width: 32px; |
| text-align: right; |
| color: var(--text); |
| } |
|
|
| .vc-demand-row { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| font-family: var(--mono-font); |
| font-size: 0.62rem; |
| margin-top: 4px; |
| padding-top: 4px; |
| border-top: 1px solid rgba(100,200,255,0.1); |
| } |
| .vc-demand-label { color: var(--muted); } |
| .vc-demand-val { color: var(--text); font-weight: 600; } |
| .vc-demand-actual { color: var(--danger); } |
|
|
| |
| .village-card::before { |
| content: ''; |
| position: absolute; |
| left: 0; top: 0; bottom: 0; |
| width: 3px; |
| border-radius: 12px 0 0 12px; |
| background: var(--accent2); |
| } |
| .village-card.fraud-high::before { background: var(--danger); } |
| .village-card.fraud-med::before { background: var(--warn); } |
|
|
| |
| .monologue-bar { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| background: rgba(0,0,0,0.6); |
| border: 1px solid rgba(0,245,212,0.25); |
| border-radius: var(--radius); |
| padding: 10px 18px; |
| min-height: 42px; |
| backdrop-filter: blur(6px); |
| overflow: hidden; |
| } |
|
|
| .mono-prefix { |
| font-family: var(--pixel-font); |
| font-size: 0.5rem; |
| color: var(--accent); |
| flex-shrink: 0; |
| text-shadow: var(--glow-c); |
| } |
|
|
| .mono-text { |
| font-family: var(--mono-font); |
| font-size: 0.78rem; |
| color: #c0e8ff; |
| flex: 1; |
| line-height: 1.4; |
| } |
|
|
| .mono-cursor { |
| color: var(--accent); |
| font-size: 0.9rem; |
| flex-shrink: 0; |
| } |
|
|
| |
| .god-only { display: inline; } |
| body.bdo-mode .god-only { display: none; } |
|
|
| |
| body.bdo-mode .map-wrap::after { |
| content: ''; |
| position: absolute; |
| inset: 0; |
| pointer-events: none; |
| background: repeating-linear-gradient( |
| 0deg, |
| transparent, |
| transparent 3px, |
| rgba(0, 20, 60, 0.04) 4px |
| ); |
| border-radius: var(--radius); |
| z-index: 2; |
| } |
|
|
| |
| ::-webkit-scrollbar { width: 5px; height: 5px; } |
| ::-webkit-scrollbar-track { background: transparent; } |
| ::-webkit-scrollbar-thumb { background: rgba(100,200,255,0.25); border-radius: 999px; } |
|
|
| |
| @media (max-width: 1100px) { |
| .main-content { grid-template-columns: 1fr; } |
| .sidebar { flex-direction: row; flex-wrap: wrap; } |
| .sidebar .panel { flex: 1; min-width: 260px; } |
| .villages-row { grid-template-columns: repeat(2, 1fr); } |
| } |
|
|
| @media (max-width: 720px) { |
| .command-header { grid-template-columns: 1fr; gap: 10px; } |
| .hud-stats { justify-content: flex-start; } |
| .villages-row { grid-template-columns: 1fr 1fr; } |
| } |
|
|
