:root { --bg:#0e0f12; --panel:#151820; --text:#e8e8e8; --muted:#a9b0bb; --accent:#6fb3ff; }
* { box-sizing: border-box; font-family: ui-sans-serif, system-ui, Segoe UI, Arial; }
body { margin:0; background: var(--bg); color: var(--text); }
header { display:flex; justify-content:space-between; align-items:flex-end; padding:14px 18px; border-bottom:1px solid #252a36; }
.logo { font-weight:800; letter-spacing:0.4px; }
.sub { color: var(--muted); font-size:12px; margin-top:4px; }
.meta { text-align:right; color: var(--muted); font-size:13px; }
main { display:grid; grid-template-columns: 460px 1fr 330px; gap:12px; padding:12px; }
.panel { background: var(--panel); border:1px solid #252a36; border-radius:10px; padding:12px; }
h2 { margin:0 0 10px; font-size:16px; }
h3 { margin:14px 0 8px; font-size:14px; color: var(--muted); }

#scene { width:100%; border:1px solid #252a36; border-radius:8px; background:#0b0c10; image-rendering: pixelated; }

.stats { margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.stat { display:grid; grid-template-columns: 72px 1fr 42px; gap:8px; align-items:center; font-size:12px; color: var(--muted); }
.bar { height:10px; border:1px solid #2a3040; border-radius:999px; overflow:hidden; background:#0b0c10; }
.fill { height:100%; width:50%; background: var(--accent); }
.fill.bad { background:#ff6f6f; }
.fill.rel { background:#ff6fb3; }
.val { text-align:right; color: var(--text); font-variant-numeric: tabular-nums; }

.actions .grid { display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
button { background:#1c2230; color:var(--text); border:1px solid #2a3040; padding:8px 10px; border-radius:10px; cursor:pointer; font-size:12px; }
button:hover { border-color:#3b4560; }
button:disabled { opacity:0.45; cursor:not-allowed; }

.workbox { border:1px solid #252a36; border-radius:10px; padding:10px; background:#10131a; }
.workbox .row { display:flex; justify-content:space-between; font-size:12px; color: var(--muted); margin-bottom:6px; }
.workbox .row strong { color: var(--text); font-weight:600; }

.list { display:flex; flex-direction:column; gap:8px; }
.card { border:1px solid #252a36; border-radius:10px; background:#10131a; padding:10px; }
.card .top { display:flex; justify-content:space-between; gap:10px; }
.card .name { font-weight:650; font-size:13px; }
.card .meta { color: var(--muted); font-size:12px; text-align:left; }
.card .mini { margin-top:6px; color: var(--muted); font-size:12px; display:flex; justify-content:space-between; }
.progress { height:8px; border:1px solid #2a3040; border-radius:999px; overflow:hidden; background:#0b0c10; margin-top:8px; }
.progress .pfill { height:100%; width:0%; background: var(--accent); }

.queue-header { display:flex; justify-content:space-between; align-items:center; }
.queue-header h3 { margin:14px 0 8px; }
.queue-header button { font-size:11px; padding:4px 10px; }

.tag { font-size:10px; font-weight:600; padding:1px 6px; border-radius:6px; margin-left:6px; }
.tag-done { background:#1a3a2a; color:#6fff9a; border:1px solid #2b5a3a; }
.tag-missed { background:#3a1a1a; color:#ff6f6f; border:1px solid #5a2b2b; }

.btn-clear { font-size:11px; padding:3px 8px; background:#1c2230; border:1px solid #3b4560; color:var(--muted); cursor:pointer; border-radius:6px; }
.btn-clear:hover { border-color:var(--accent); color:var(--text); }
.btn-decline { font-size:11px; padding:6px 10px; background:#1a1520; border:1px solid #3a2a2a; color:#a97070; cursor:pointer; border-radius:10px; }
.btn-decline:hover { border-color:#ff6f6f; color:#ff6f6f; }

.store-header { display:flex; justify-content:space-between; align-items:center; }
.store-header h2 { margin:0 0 10px; }
.store-header button { font-size:11px; padding:4px 10px; }
.store { display:flex; flex-direction:column; gap:10px; }
.store-item { border:1px solid #252a36; border-radius:10px; background:#10131a; padding:10px; }
.store-item.owned { opacity:0.6; }
.store-item .name { font-weight:700; font-size:13px; }
.store-item .desc { color: var(--muted); font-size:12px; margin:6px 0; }
.store-status { color: var(--muted); font-size:12px; padding:8px 0; text-align:center; }
.store-offline { color:#f2d98a; font-size:11px; margin-top:4px; }
/* Bitcoin trading */
.bitcoin-box { border:1px solid #252a36; border-radius:10px; background:#10131a; padding:12px; }
.bitcoin-info { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); }
.bitcoin-row { display:flex; justify-content:space-between; }
.bitcoin-row strong { color:var(--text); }
.btc-unit { font-size:10px; color:#555; }
.btc-updated { font-size:10px; color:#555; margin:6px 0; text-align:right; }
.bitcoin-actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.btc-profit { color:#6fff9a !important; }
.btc-loss { color:#ff6f6f !important; }

.rep { border:1px solid #252a36; border-radius:10px; background:#10131a; padding:10px; color: var(--muted); font-size:12px; }

/* Perk cards */
.perk-list { display:flex; flex-direction:column; gap:8px; }
.perk-card { border:1px solid #252a36; border-radius:10px; background:#10131a; padding:10px; opacity:0.7; }
.perk-card.unlocked { opacity:1; border-color:#2b5a3a; }
.perk-top { display:flex; justify-content:space-between; align-items:center; }
.perk-name { font-weight:650; font-size:13px; color: var(--muted); }
.perk-card.unlocked .perk-name { color:#6fff9a; }
.perk-desc { color: var(--muted); font-size:11px; margin-top:4px; }
.perk-req { color:#f2d98a; font-size:11px; margin-top:6px; }
.perk-progress-label { color: var(--muted); font-size:11px; margin-top:4px; text-align:right; }

/* Achievements */
.ach-header { display:flex; justify-content:space-between; align-items:center; }
.ach-header h2 { margin:0 0 10px; }
.ach-header button { font-size:11px; padding:4px 10px; }
.ach-count { font-size:12px; font-weight:400; color:var(--muted); }
.ach-list { display:flex; flex-direction:column; gap:4px; border:1px solid #252a36; border-radius:10px; background:#10131a; padding:10px; margin-bottom:10px; max-height:240px; overflow:auto; }
.ach-item { display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:5px 8px; border-radius:6px; font-size:11px; color:#555; border:1px solid transparent; }
.ach-item.earned { color:var(--text); background:#0d1210; border-color:#1a3a2a; }
.ach-name { font-weight:700; white-space:nowrap; }
.ach-item.earned .ach-name { color:#6fff9a; }
.ach-desc { text-align:right; color:var(--muted); font-size:10px; }
.ach-item:not(.earned) .ach-desc { color:#333; }

.log { border:1px solid #252a36; border-radius:10px; background:#0b0c10; padding:10px; height:180px; overflow:auto; font-size:12px; color: var(--muted); }
.log .entry { margin-bottom:6px; }

/* --- Arc Panels --- */
.arc-panel { margin-top:14px; }
.arc-panel h3 { margin:0 0 8px; color: var(--accent); font-size:14px; }
.arc-hint { color: var(--muted); font-size:11px; margin-bottom:8px; }

/* Junior management cards */
.junior-card { border:1px solid #252a36; border-radius:10px; background:#10131a; padding:10px; }
.junior-card .junior-top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.junior-card .junior-name { font-weight:650; font-size:13px; color:#6fff9a; }
.junior-card .junior-task { color: var(--muted); font-size:12px; margin-top:4px; }
.junior-card .junior-meta { color: var(--muted); font-size:11px; margin-top:4px; display:flex; justify-content:space-between; }
.btn-delegate { font-size:11px; padding:4px 10px; background:#1a3a2a; border:1px solid #2b5a3a; color:#6fff9a; cursor:pointer; border-radius:6px; }
.btn-delegate:hover { border-color:#6fff9a; }
.btn-delegate:disabled { opacity:0.45; cursor:not-allowed; }

/* Rival tug-of-war */
.rival-header { display:flex; justify-content:space-between; font-size:12px; font-weight:600; color: var(--muted); margin-bottom:4px; }
.tug-bar-wrap { padding:4px 0; }
.tug-bar { position:relative; height:18px; border:1px solid #2a3040; border-radius:999px; overflow:hidden; background:#0b0c10; }
.tug-fill { position:absolute; left:0; top:0; height:100%; width:50%; background: linear-gradient(90deg, #ff6f6f 0%, #6fb3ff 100%); transition: width 0.5s ease; }
.tug-center { position:absolute; left:50%; top:0; width:2px; height:100%; background:#e8e8e8; transform:translateX(-1px); opacity:0.4; }
.rival-scores { display:flex; justify-content:space-between; align-items:center; font-size:12px; color: var(--muted); margin-top:2px; }
.rival-vs { color:#555; font-size:10px; text-transform:uppercase; letter-spacing:1px; }
#rival-pscore { color:#6fb3ff; font-weight:700; }
#rival-rscore { color:#ff6f6f; font-weight:700; }

/* Breakaway */
.breakaway-box { border:1px solid #252a36; border-radius:10px; background:#10131a; padding:12px; }
.breakaway-info { display:flex; justify-content:space-between; font-size:12px; color: var(--muted); margin-bottom:8px; }
.breakaway-info strong { color: var(--text); }
.breakaway-desc { color: var(--muted); font-size:11px; margin-bottom:10px; line-height:1.4; }
.btn-breakaway { width:100%; padding:10px; background:linear-gradient(135deg, #1a0a2e 0%, #2a1040 50%, #3a1a1a 100%); border:1px solid #6f3aff; color:#cfa5ff; font-weight:700; font-size:13px; cursor:pointer; border-radius:10px; letter-spacing:0.5px; }
.btn-breakaway:hover { border-color:#a95cff; color:#e8d0ff; background:linear-gradient(135deg, #2a1040 0%, #3a1a50 50%, #4a2a2a 100%); }
.btn-breakaway:disabled { opacity:0.35; cursor:not-allowed; }

/* NPC cards */
.npc-card { border:1px solid #252a36; border-radius:10px; background:#10131a; padding:10px; }
.npc-top { display:flex; justify-content:space-between; align-items:center; }
.npc-name { font-weight:650; font-size:13px; }
.npc-desc { color: var(--muted); font-size:11px; margin-top:4px; line-height:1.3; }
.npc-actions { display:flex; gap:6px; margin-top:8px; }
.npc-btn { flex:1; font-size:11px; padding:6px 8px; }
.npc-done { color:#555; font-size:11px; margin-top:6px; font-style:italic; }

/* --- API Settings --- */
.settings-header { display:flex; justify-content:space-between; align-items:center; }
.settings-header h2 { margin:0 0 10px; }
.settings-header button { font-size:11px; padding:4px 10px; }
.settings-panel { border:1px solid #252a36; border-radius:10px; background:#10131a; padding:12px; margin-bottom:12px; }
.settings-field { margin-bottom:10px; }
.settings-field label { display:block; color: var(--muted); font-size:11px; margin-bottom:4px; text-transform:uppercase; letter-spacing:0.5px; }
.settings-field input { width:100%; background:#0b0c10; border:1px solid #2a3040; border-radius:6px; padding:7px 10px; color: var(--text); font-size:12px; font-family:ui-monospace, monospace; }
.settings-field input:focus { outline:none; border-color: var(--accent); }
.settings-field input::placeholder { color:#555; }
.api-key-wrap { display:flex; gap:6px; }
.api-key-wrap input { flex:1; }
.btn-key-vis { font-size:10px; padding:4px 8px; white-space:nowrap; }
.settings-actions { display:flex; gap:8px; margin-top:8px; }
.settings-actions button { flex:1; font-size:12px; padding:6px 10px; }
#btn-save-api { background:#1a3a2a; border-color:#2b5a3a; color:#6fff9a; }
#btn-save-api:hover { border-color:#6fff9a; }
#btn-clear-api { background:#3a1a1a; border-color:#5a2b2b; color:#ff6f6f; }
#btn-clear-api:hover { border-color:#ff6f6f; }
.api-status { font-size:11px; margin-top:8px; color: var(--muted); }
.api-status.connected { color:#6fff9a; }
.api-status.error { color:#ff6f6f; }
.api-status.disconnected { color: var(--muted); }

/* --- Cutscene overlay --- */
.cutscene-overlay { position:fixed; inset:0; z-index:120; background:#000; display:flex; flex-direction:column; align-items:center; justify-content:center; }
#cutscene-canvas { border:none; border-radius:0; background:#000; image-rendering:pixelated; display:block; }
.cutscene-text { color:#d9dbe6; font-size:16px; text-align:center; max-width:440px; line-height:1.6; margin-top:18px; opacity:0; transition:opacity 2s ease; }
.cutscene-text.visible { opacity:1; }
.btn-cutscene-close { margin-top:20px; padding:10px 32px; font-size:14px; font-weight:600; border-radius:10px; background:transparent; border:1px solid #2a3040; color:#a9b0bb; cursor:pointer; opacity:0; transition:opacity 1.5s ease; }
.btn-cutscene-close.visible { opacity:1; }
.btn-cutscene-close:hover { border-color:#6fb3ff; color:#e8e8e8; }

/* --- Character creation overlay --- */
.charcreate-overlay { position:fixed; inset:0; z-index:110; background:rgba(0,0,0,0.92); display:flex; align-items:center; justify-content:center; }
.charcreate-container { background:var(--panel); border:2px solid var(--accent); border-radius:14px; padding:24px; max-width:340px; width:100%; text-align:center; }
.charcreate-title { font-weight:800; font-size:18px; color:var(--text); margin-bottom:4px; }
.charcreate-sub { font-size:12px; color:var(--muted); margin-bottom:18px; }
.charcreate-field { text-align:left; margin-bottom:14px; }
.charcreate-field label { display:block; color:var(--muted); font-size:11px; margin-bottom:4px; text-transform:uppercase; letter-spacing:0.5px; }
.charcreate-field input { width:100%; background:#0b0c10; border:1px solid #2a3040; border-radius:6px; padding:8px 10px; color:var(--text); font-size:13px; }
.charcreate-field input:focus { outline:none; border-color:var(--accent); }
.charcreate-field input::placeholder { color:#555; }
.charcreate-gender { display:flex; gap:8px; }
.gender-btn { flex:1; padding:8px; font-size:13px; font-weight:600; border-radius:8px; background:#1c2230; border:1px solid #2a3040; color:var(--muted); cursor:pointer; }
.gender-btn.selected { background:#1a3a2a; border-color:#2b5a3a; color:#6fff9a; }
.gender-btn:hover { border-color:#3b4560; }
.charcreate-preview { margin:14px 0; display:flex; justify-content:center; }
#charcreate-canvas { border:1px solid #252a36; border-radius:8px; background:#0b0c10; image-rendering:pixelated; }
.btn-charcreate-start { width:100%; padding:10px; font-size:14px; font-weight:700; border-radius:10px; background:linear-gradient(135deg, #1a3a2a 0%, #2b5a3a 100%); border:1px solid #2b5a3a; color:#6fff9a; cursor:pointer; letter-spacing:0.5px; }
.btn-charcreate-start:hover { border-color:#6fff9a; background:linear-gradient(135deg, #2b5a3a 0%, #3a7a4a 100%); }

/* --- Specialization overlay --- */
.spec-options { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.spec-btn { background:#0b0c10; border:1px solid #2a3040; border-radius:10px; padding:14px 16px; text-align:left; cursor:pointer; transition:border-color 0.15s, background 0.15s; }
.spec-btn:hover { border-color:var(--accent); background:#151820; }
.spec-btn-title { font-weight:800; font-size:15px; color:var(--text); margin-bottom:3px; }
.spec-btn-desc { font-size:12px; color:var(--muted); margin-bottom:6px; line-height:1.4; }
.spec-btn-bonus { font-size:11px; color:var(--accent); letter-spacing:0.3px; }
.spec-btn[data-spec="lit"] .spec-btn-title { color:#ff6f6f; }
.spec-btn[data-spec="corp"] .spec-btn-title { color:#6fb3ff; }
.spec-btn[data-spec="reg"] .spec-btn-title { color:#f2d98a; }
.spec-btn[data-spec="lit"]:hover { border-color:#ff6f6f; }
.spec-btn[data-spec="corp"]:hover { border-color:#6fb3ff; }
.spec-btn[data-spec="reg"]:hover { border-color:#f2d98a; }

/* --- Minigame overlay --- */
.minigame-overlay { position:fixed; inset:0; z-index:100; background:rgba(0,0,0,0.85); display:flex; align-items:center; justify-content:center; }
.minigame-container { background:var(--panel); border:2px solid var(--accent); border-radius:14px; padding:16px; max-width:460px; width:100%; }
.minigame-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.minigame-title { font-weight:700; font-size:15px; color:var(--accent); }
.minigame-score { font-size:13px; color:#f2d98a; font-weight:600; font-variant-numeric:tabular-nums; }
#minigame-canvas { width:100%; border:1px solid #252a36; border-radius:8px; background:#0b0c10; image-rendering:pixelated; display:block; }
.minigame-prompt { text-align:center; padding:14px 0 6px; }
.minigame-prompt > div:first-child { color:var(--muted); font-size:13px; margin-bottom:10px; line-height:1.4; }
.minigame-prompt-actions { display:flex; gap:10px; justify-content:center; }
.minigame-prompt-actions button { padding:8px 24px; font-size:13px; font-weight:600; border-radius:8px; }
#btn-minigame-play { background:#1a3a2a; border-color:#2b5a3a; color:#6fff9a; }
#btn-minigame-play:hover { border-color:#6fff9a; }
#btn-minigame-skip { background:#1c2230; border-color:#3b4560; color:var(--muted); }
.minigame-result { text-align:center; padding:14px 0 6px; }
.minigame-result > div:first-child { color:var(--text); font-size:14px; margin-bottom:10px; line-height:1.5; }
#btn-minigame-close { padding:8px 24px; font-size:13px; font-weight:600; border-radius:8px; background:#1a3a2a; border-color:#2b5a3a; color:#6fff9a; }
#btn-minigame-close:hover { border-color:#6fff9a; }
.minigame-controls { text-align:center; color:#555; font-size:11px; margin-top:6px; }

footer { display:flex; gap:10px; align-items:center; padding:10px 12px; border-top:1px solid #252a36; color: var(--muted); font-size:12px; }
.hint { margin-left:auto; }