:root{
  --void:#05070b; --hull:#10151d; --hull-line:#1c2530; --steel:#2a3744;
  --ink:#aeb9c4; --ink-dim:#5d6b78; --amber:#d98a3d; --amber-bright:#f0a850;
  --o2:#4fa3c7; --power:#c8b24a; --blood:#a3382f; --green:#5a8c5a;
  --psy:#7a5fb0; --fun:#4f9c8f; --fire:#d9542d; --glow:rgba(217,138,61,.15);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:radial-gradient(ellipse at 50% -10%, #0c121b 0%, var(--void) 60%), var(--void);
  color:var(--ink); font-family:"Courier New",ui-monospace,monospace;
  overflow:hidden; letter-spacing:.3px;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#app{display:flex;height:100vh;width:100vw}

/* ---- панель ---- */
aside{
  width:330px;min-width:330px;height:100%;
  background:linear-gradient(180deg,#0a0e14,#070a0f);
  border-right:1px solid var(--hull-line);display:flex;flex-direction:column;
  box-shadow:8px 0 24px rgba(0,0,0,.6);z-index:5;
}
.brand{padding:16px 18px 12px;border-bottom:1px solid var(--hull-line)}
.brand h1{font-size:21px;font-weight:bold;letter-spacing:4px;color:var(--amber-bright);text-shadow:0 0 12px var(--glow)}
.brand .sub{font-size:10px;color:var(--ink-dim);letter-spacing:2px;margin-top:4px}
.scroll{flex:1;overflow-y:auto}
.panel{padding:14px 18px;border-bottom:1px solid var(--hull-line)}
.panel h2{font-size:11px;letter-spacing:3px;color:var(--ink-dim);text-transform:uppercase;margin-bottom:11px;display:flex;justify-content:space-between}
.res{margin-bottom:11px}
.res-top{display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px}
.bar{height:7px;background:#0c1117;border:1px solid var(--hull-line);overflow:hidden;position:relative}
.bar i{display:block;height:100%;transition:width .25s linear}
.bar.power i{background:linear-gradient(90deg,#7a6c1f,var(--power))}
.bar.o2 i{background:linear-gradient(90deg,#1f5a72,var(--o2))}
.bar.hull i{background:linear-gradient(90deg,#3a4a3a,var(--green))}

/* ---- карточки экипажа ---- */
.cardc{display:flex;flex-direction:column;gap:8px}
.ccard{border:1px solid var(--hull-line);background:#0b0f15;padding:9px 10px;cursor:pointer;transition:.12s}
.ccard:hover{border-color:var(--steel)}
.ccard.sel{border-color:var(--amber);box-shadow:0 0 10px var(--glow);background:#0e1219}
.ccard.dead{opacity:.45;cursor:default}
.ccard-top{display:flex;align-items:center;gap:8px}
.dot{width:26px;height:26px;border:1px solid var(--steel);flex:none;display:flex;align-items:center;justify-content:center;font-size:14px;background:radial-gradient(circle at 50% 35%,#26303b,#10151d)}
.ccard .nm{font-size:12px;color:var(--ink);letter-spacing:1px}
.ccard .role{font-size:9px;color:var(--ink-dim);letter-spacing:1px}
.ccard .st{font-size:10px;text-align:right}
.ccard .task{font-size:9px;color:var(--amber);letter-spacing:.5px;margin-top:3px;min-height:11px}
.bars4{display:flex;gap:4px;margin-top:7px}
.bars4 .mini{flex:1}
.bars4 .lbl{font-size:7px;color:var(--ink-dim);letter-spacing:.3px}
.bars4 .bar{height:4px;margin-top:2px}
.bars4 .bar.hp i{background:var(--blood)}
.bars4 .bar.psy i{background:var(--psy)}
.bars4 .bar.nd i{background:var(--amber)}
.bars4 .bar.fun i{background:var(--fun)}

/* ---- приоритеты ---- */
.prio-row{display:flex;align-items:center;justify-content:space-between;font-size:11px;padding:4px 0}
.prio-row .pname{color:var(--ink-dim);letter-spacing:1px}
.prio-row .pname.on{color:var(--ink)}
.toggle{width:34px;height:16px;border:1px solid var(--steel);background:#0c1117;cursor:pointer;position:relative;transition:.15s}
.toggle i{position:absolute;top:1px;left:1px;width:12px;height:12px;background:var(--ink-dim);transition:.15s}
.toggle.on{border-color:var(--amber)}
.toggle.on i{left:19px;background:var(--amber)}

.hint{font-size:11px;color:var(--ink-dim);line-height:1.6}
.hint b{color:var(--amber)}

#log{padding:10px 18px;font-size:11px;line-height:1.7;max-height:190px;overflow-y:auto}
#log .e{margin-bottom:5px;color:var(--ink-dim)}
#log .e.warn{color:var(--amber)} #log .e.bad{color:var(--blood)} #log .e.good{color:var(--green)}
#log .e.psy{color:var(--psy)}
#log .e .t{color:#3a4650;margin-right:6px}

/* ---- сцена ---- */
main{flex:1;position:relative;display:flex;flex-direction:column}
.topbar{height:46px;display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid var(--hull-line);background:linear-gradient(180deg,#0a0e14,#080b10);flex-wrap:wrap}
.btn{background:#10161e;border:1px solid var(--steel);color:var(--ink);font-family:inherit;font-size:11px;letter-spacing:1px;padding:7px 12px;cursor:pointer;text-transform:uppercase;transition:.15s}
.btn:hover{border-color:var(--amber);color:var(--amber-bright);box-shadow:0 0 10px var(--glow)}
.btn.active{background:var(--amber);color:#0a0e14;border-color:var(--amber)}
.spacer{flex:1}
.clock{font-size:12px;color:var(--ink-dim);letter-spacing:2px}
.clock b{color:var(--amber)}
canvas{flex:1;display:block;width:100%;background:transparent;cursor:crosshair}
.legend{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--ink-dim);letter-spacing:1px;background:rgba(8,11,16,.7);padding:6px 14px;border:1px solid var(--hull-line);display:flex;gap:14px;flex-wrap:wrap;justify-content:center;max-width:92%}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;display:inline-block}

/* ---- модалка встречи ---- */
.enc-modal{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(5,7,11,.78);z-index:40;backdrop-filter:blur(2px)}
.enc-box{width:380px;max-width:90%;background:linear-gradient(180deg,#10151d,#0a0e14);border:1px solid var(--blood);box-shadow:0 0 40px rgba(163,56,47,.3),0 20px 60px rgba(0,0,0,.7);padding:22px}
.enc-title{font-size:18px;letter-spacing:3px;color:var(--blood);text-shadow:0 0 12px rgba(163,56,47,.5);margin-bottom:12px}
.enc-text{font-size:12px;color:var(--ink);line-height:1.7;margin-bottom:18px}
.enc-opts{display:flex;flex-direction:column;gap:8px}
.enc-opt{background:#141a22;border:1px solid var(--steel);color:var(--ink);font-family:inherit;font-size:12px;letter-spacing:1px;padding:11px 14px;cursor:pointer;text-align:left;transition:.15s}
.enc-opt:hover{border-color:var(--amber);color:var(--amber-bright);background:#1a212b;box-shadow:0 0 12px var(--glow)}

@media(max-width:820px){
  aside{width:250px;min-width:250px}
  .brand h1{font-size:16px;letter-spacing:2px}
}