:root{
    --bg:#0c0a07; --panel:#15120c; --line:#2c261a;
    --ink:#cfc4a6; --dim:#7d7358; --amber:#e0972f; --gold:#f0b445;
    --bad:#cf4f38; --art:#6fc3c9; --good:#8fbf6e; --pda:#63cf4e; --pyl:#b98fe0;
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{height:100%;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    display:flex; flex-direction:column; height:100dvh; overflow:hidden;
    user-select:none; -webkit-user-select:none;
  }
  #statbar{
    display:flex; justify-content:center; gap:12px; flex-wrap:wrap;
    padding:7px 8px; background:#100d09; border-bottom:1px solid var(--line);
    font-size:12px; color:var(--gold);
  }
  #statbar b{color:var(--gold);}
  #statbar .pyl b{color:var(--pyl);}
  #statbar .ic{opacity:.9; margin-right:2px;}
  #statbar .hot{animation:blink 1s steps(2) infinite; color:var(--bad);}
  @keyframes blink{50%{opacity:.3;}}
  #locbar{
    display:flex; justify-content:space-between; align-items:center;
    padding:5px 12px; font-size:12px; letter-spacing:.5px;
    background:linear-gradient(180deg,#1a150d,#120f0a);
    border-bottom:2px solid #3a2c14; color:var(--gold);
  }
  #locbar .clk::before{content:"\2600  ";}
  #mapwrap{
    flex:1; position:relative; display:flex; align-items:center; justify-content:center;
    min-height:0; background:#080704; padding:4px;
  }
  #map{border:1px solid #34301f; border-radius:6px; max-width:100%; max-height:100%;}
  body.hit #map{box-shadow:inset 0 0 40px 4px rgba(207,79,56,.55), 0 0 0 1px var(--bad);}
  .arr{
    position:absolute; z-index:5; width:50px; height:50px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(10,14,6,.45); border:1px solid rgba(120,200,90,.5); border-radius:10px;
    color:#8fe07a; font-size:24px; cursor:pointer;
    text-shadow:0 0 6px rgba(120,220,90,.8);
  }
  .arr:active{transform:scale(.9); background:rgba(30,50,18,.6);}
  #aU{top:10px; left:50%; transform:translateX(-50%);}
  #aD{bottom:10px; left:50%; transform:translateX(-50%);}
  #aL{left:8px; top:50%; transform:translateY(-50%);}
  #aR{right:8px; top:50%; transform:translateY(-50%);}
  body.enc .arr{display:none;}
  #actions{
    background:var(--panel); border-top:1px solid var(--line);
    padding:8px 10px; display:flex; gap:8px; justify-content:center;
  }
  .ibtn{
    flex:1; max-width:120px; font-family:inherit; cursor:pointer;
    background:#0f0c08; color:var(--amber); border:1px solid #4a3a1a; border-radius:8px;
    padding:8px 4px; font-size:11px; text-align:center; letter-spacing:.5px;
  }
  .ibtn .big{display:block; font-size:18px; margin-bottom:2px;}
  .ibtn:active{transform:scale(.96);}
  #actions.stack{flex-direction:column;}
  #actions.stack button.act{max-width:none;}
  button.act{
    width:100%; text-align:left; font-family:inherit; font-size:12px;
    background:#0f0c08; color:var(--ink); border:1px solid var(--line);
    border-radius:8px; padding:10px 12px; cursor:pointer;
  }
  button.act:active{transform:scale(.985);}
  button.act.warn{border-color:#5c4716; color:var(--amber);}
  button.act.bad{border-color:#5c2a1e; color:var(--bad);}
  button.act.art{border-color:#2c5558; color:var(--art);}
  button.act.good{border-color:#3c5c2e; color:var(--good);}
  button.act.pyl{border-color:#4a3560; color:var(--pyl);}
  button.act small{color:var(--dim); float:right;}
  input.nick{
    width:100%; font-family:inherit; font-size:14px; padding:10px 12px;
    background:#0f0c08; color:var(--gold); border:1px solid #4a3a1a; border-radius:8px;
  }
  .avagrid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; width:100%;}
  .avagrid .ibtn{max-width:none; font-size:22px; padding:10px 0;}
  #screen{
    height:64px; overflow-y:auto; padding:5px 10px;
    border-top:1px solid var(--line); font-size:12px; line-height:1.4;
    background:#0a0806;
  }
  .msg{display:flex; gap:8px; margin-bottom:7px; animation:burn .2s ease-out;}
  @keyframes burn{from{opacity:0;transform:translateY(2px);}to{opacity:1;transform:none;}}
  .ava{
    flex:0 0 26px; height:26px; border-radius:6px; border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700;
    background:#141009;
  }
  .mb{min-width:0;}
  .mh{color:var(--dim); font-size:10px;}
  .mh b{color:var(--gold); font-size:11px;}
  .mh .ch{color:#c9a23a;}
  .mt{color:var(--ink);}
  .msg.sys .mt{color:var(--dim); font-style:italic;}
  .msg.bad .mt{color:var(--bad);}
  .msg.good .mt{color:var(--good);}
  .msg.art .mt{color:var(--art);}
  .msg.amber .mt{color:var(--amber);}
  .msg.pyl .mt{color:var(--pyl);}
  #pda{position:fixed; inset:0; z-index:30; display:none; flex-direction:column; background:rgba(6,7,4,.96); padding:14px;}
  #pda.show{display:flex;}
  #menu{position:fixed; inset:0; z-index:30; display:none; flex-direction:column; background:rgba(6,7,4,.96); padding:14px;}
  #menu.show{display:flex;}
  #topbar{display:flex; gap:6px; padding:4px 8px 0;}
  #topbar .navb{flex:1; padding:7px; font-size:12px; background:#141810; color:#cbb978; border:1px solid #2e3a1c; border-radius:7px; font-family:inherit; cursor:pointer;}
  #topbar .navb:active{background:#1c2212;}
  #botbar{display:flex; gap:6px; padding:5px 8px calc(6px + env(safe-area-inset-bottom)); background:#0a0806; border-top:1px solid var(--line);}
  #botbar .botb{flex:1; padding:9px 4px; font-size:12px; background:#141810; color:#cbb978; border:1px solid #2e3a1c; border-radius:7px; font-family:inherit; cursor:pointer;}
  #botbar .botb:active{background:#1c2212;}
  .pdabox{flex:1; display:flex; flex-direction:column; min-height:0; background:#0d110a; border:1px solid #24301c; border-radius:12px; overflow:hidden;}
  .pdahead{display:flex; justify-content:space-between; padding:10px 14px; color:#9aa88e; font-size:12px; letter-spacing:3px; border-bottom:1px solid #1d2717;}
  .pdahead .bt{color:var(--pda);}
  #pdabody{flex:1; overflow-y:auto; padding:6px 14px;}
  .pmenu{list-style:none;}
  .pmenu li{padding:13px 2px; border-bottom:1px solid #1d3315; color:var(--pda); font-size:15px; cursor:pointer; letter-spacing:.5px;}
  .pmenu li::before{content:"\25CF  "; font-size:10px; vertical-align:2px;}
  .pmenu li:active{background:#101a0c;}
  .prow{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed #1d2717; font-size:13px; gap:8px;}
  .prow b{color:var(--gold);}
  .ptitle{color:#9aa88e; letter-spacing:2px; font-size:11px; margin:12px 0 6px;}
  .qbox{border:1px solid #24301c; border-radius:10px; padding:10px; margin:8px 0; font-size:13px;}
  .qbox .qt{color:var(--gold); margin-bottom:4px;}
  .qbox .qd{color:var(--ink); font-size:12px; line-height:1.4;}
  .qbox .qp{color:var(--pda); margin-top:6px; font-size:12px;}
  #pdafoot{padding:10px 14px; border-top:1px solid #1d2717; font-size:13px; color:var(--gold); cursor:pointer;}
  #pdafoot span{color:var(--pda);}
  textarea.code{width:100%; height:84px; background:#0a0d07; color:#8fb87e; border:1px solid #24301c; border-radius:8px; font-family:inherit; font-size:10px; padding:8px; margin:6px 0;}
  .pbtn{display:inline-block; font-family:inherit; font-size:12px; cursor:pointer; background:#101a0c; color:var(--pda); border:1px solid #2c4420; border-radius:8px; padding:8px 12px; margin:4px 6px 4px 0;}
  .pbtn.warn{color:var(--bad); border-color:#4a241a; background:#170e0a;}
  .pbtn.gold{color:var(--gold); border-color:#4a3a1a; background:#14100a;}
  #minimap{border:1px solid #24301c; border-radius:8px; display:block; margin:8px auto;}
  #ad,#pay{position:fixed; inset:0; z-index:40; display:none; background:rgba(5,7,4,.93); align-items:center; justify-content:center; text-align:center; padding:30px;}
  #ad.show,#pay.show{display:flex;}
  .frame{border:1px dashed var(--amber); border-radius:12px; padding:30px 22px; max-width:320px; color:var(--amber); letter-spacing:2px; font-size:12px; line-height:1.8;}
  #pay .frame{border-color:var(--pyl); color:var(--pyl);}
  .cnt{font-size:28px; color:var(--ink);}
  @media (prefers-reduced-motion: reduce){
    .msg{animation:none;} #statbar .hot{animation:none;} body.hit #map{box-shadow:none;}
  }

#onlinebar{display:flex;align-items:center;gap:6px;padding:3px 12px;background:#0a0806;border-top:1px solid var(--line);color:#8fbf6e;font-size:11px;cursor:pointer;user-select:none;}
#onlinebar:active{background:#12100a;}
#onlinebar .ic{font-size:10px;color:#7fd06a;}
#chatrow{display:flex;gap:6px;padding:6px 10px calc(8px + env(safe-area-inset-bottom));background:#0a0806;border-top:1px solid var(--line);}
#chatI{flex:1;font-family:inherit;font-size:12px;padding:9px 11px;background:#0f0c08;color:var(--ink);border:1px solid var(--line);border-radius:8px;}
#chatB{font-family:inherit;font-size:14px;background:#14100a;color:var(--amber);border:1px solid #4a3a1a;border-radius:8px;padding:0 14px;cursor:pointer;}

#dlg{position:fixed;inset:0;z-index:32;display:none;flex-direction:column;background:rgba(6,7,4,.96);padding:14px;}
#dlg.show{display:flex;}
.dlgbox{flex:1;display:flex;flex-direction:column;min-height:0;background:#100d09;border:1px solid #3a2c14;border-radius:12px;overflow:hidden;}
.dlghead{display:flex;gap:12px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);background:#14100a;}
.dlghead span#dlgava{font-size:34px;}
#dlgname{color:var(--gold);font-size:14px;letter-spacing:1px;}
.dlgsay{color:var(--dim);font-size:11px;margin-top:2px;font-style:italic;}
#dlgbody{flex:1;overflow-y:auto;padding:10px 12px;}
#dlgfoot{padding:12px 14px;border-top:1px solid var(--line);color:var(--amber);cursor:pointer;text-align:center;letter-spacing:2px;}
.card{display:flex;gap:10px;align-items:center;background:#0f0c08;border:1px solid var(--line);border-radius:10px;padding:8px;margin-bottom:8px;}
.cico{flex:0 0 44px;height:44px;border:2px solid #555;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:24px;background:#0a0806;overflow:hidden;}
.cico img{width:40px;height:40px;object-fit:contain;image-rendering:pixelated;}
.cinf{flex:1;min-width:0;}
.cname{font-size:12px;}
.cnote{font-size:10px;color:var(--dim);margin-top:2px;}
.cbtn{flex:0 0 auto;font-family:inherit;font-size:12px;background:#14100a;color:var(--gold);border:1px solid #4a3a1a;border-radius:8px;padding:9px 10px;cursor:pointer;white-space:nowrap;}
.cbtn:active{transform:scale(.95);}
.cbtn.pyl{color:var(--pyl);border-color:#4a3560;}
.cbtn.art{color:var(--art);border-color:#2c5558;}
.cbtn.good{color:var(--good);border-color:#3c5c2e;}

#xpwrap{height:4px;background:#0a0806;border-bottom:1px solid var(--line);}
#xpbar{height:100%;width:0;background:var(--gold);transition:width .3s;}
@keyframes glowp{0%,100%{box-shadow:0 0 4px rgba(240,180,69,.35);}50%{box-shadow:0 0 14px rgba(240,180,69,.9);}}
.ibtn.glow{border-color:var(--gold);color:var(--gold);animation:glowp 1.2s infinite;}
#fight{position:fixed;inset:0;z-index:34;display:none;flex-direction:column;background:rgba(6,7,4,.97);padding:12px;}
#fight.show{display:flex;}
.fbox{flex:1;display:flex;flex-direction:column;min-height:0;background:#100d09;border:1px solid #4a2c1a;border-radius:12px;overflow:hidden;}
.fhead{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);align-items:center;}
.fcol{flex:1;min-width:0;}
.fcol.r{text-align:right;}
#fpn,#fen{font-size:12px;color:var(--gold);margin-bottom:4px;white-space:nowrap;overflow:hidden;}
.bar{height:8px;background:#0a0806;border:1px solid var(--line);border-radius:4px;overflow:hidden;}
.bar i{display:block;height:100%;width:100%;background:var(--good);transition:width .25s;}
.bar.red i{background:var(--bad);}
.bart{font-size:9px;color:var(--dim);margin-top:2px;}
#fdist{flex:0 0 auto;color:var(--amber);font-size:13px;text-align:center;min-width:74px;}
.fwpn{padding:7px 12px;font-size:11px;border-bottom:1px solid var(--line);background:#0d0a07;}
#flog{flex:1;overflow-y:auto;padding:8px 12px;font-size:12px;line-height:1.4;}
.fl{margin-bottom:5px;}
.fl.bad{color:var(--bad);}.fl.good{color:var(--good);}.fl.amber{color:var(--amber);}.fl.sys{color:var(--dim);font-style:italic;}
#fbtns{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px;border-top:1px solid var(--line);}
.fb{font-family:inherit;font-size:12px;text-align:left;background:#0f0c08;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:9px 10px;cursor:pointer;}
.fb small{display:block;color:var(--dim);font-size:9px;margin-top:2px;}
.fb.bad{border-color:#5c2a1e;color:var(--bad);}
.fb.good{border-color:#3c5c2e;color:var(--good);}
.fb.warn{border-color:#5c4716;color:var(--amber);}
.fb.dis{opacity:.35;cursor:default;}
.fb:active{transform:scale(.97);}
.erow{padding:7px 4px;border-bottom:1px solid #1a1712;line-height:1.35;}
.erow b{font-size:14px;}

/* Личка: подсветка кнопки ПДА при непрочитанных сообщениях */
#topbar .navb.pda-alert{
  background:#1a2e14;
  color:#8fe36e;
  border-color:#4a7a2c;
  box-shadow:0 0 8px rgba(120,220,110,.55), inset 0 0 4px rgba(120,220,110,.3);
  animation:pdaPulse 1.4s ease-in-out infinite;
}
@keyframes pdaPulse{
  0%,100%{box-shadow:0 0 6px rgba(120,220,110,.4), inset 0 0 3px rgba(120,220,110,.25);}
  50%{box-shadow:0 0 12px rgba(120,220,110,.75), inset 0 0 6px rgba(120,220,110,.4);}
}

/* Новая боёвка: кнопки движения (Подойти/Отойти) */
.fb.app{border-color:#3c5c2e;color:#9fd08a;}   /* подойти — зелёноватый (ближе=точнее, но риск) */
.fb.ret{border-color:#2e4a5c;color:#8ab8d0;}   /* отойти — синеватый (кайт) */