:root{
  --bg:#07080d; --panel:rgba(11,13,21,.88); --line:rgba(255,255,255,.1); --txt:#e9ecf5; --mut:#8b93a7;
  --neon:#7dffb2; --mag:#ff3df2; --cyan:#2bd5ff; --warn:#ffb02e; --err:#ff5470;
  --head: Impact, "Haettenschweiler", "Arial Black", sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, Consolas, "SF Mono", monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font:14px/1.4 var(--body);overflow:hidden;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{opacity:.45;cursor:not-allowed}
a{color:var(--cyan)}
.hidden{display:none!important}
.muted{color:var(--mut)}
.mono{font-family:var(--mono)}
.small{font-size:11px}
kbd{font:600 10px var(--mono);background:rgba(255,255,255,.14);border-radius:4px;padding:1px 5px;margin-left:4px}

#map{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#map.warp{animation:warp .52s ease}
@keyframes warp{0%{filter:none}40%{filter:brightness(.1) blur(3px)}100%{filter:none}}
#vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%)}

/* ---------- шапка ---------- */
#top{position:fixed;top:0;left:0;right:0;height:56px;display:flex;align-items:center;gap:12px;padding:0 14px;background:linear-gradient(180deg,rgba(7,8,13,.95),rgba(7,8,13,0));z-index:10;pointer-events:none}
#top>*{pointer-events:auto}
.logo{font:26px/1 var(--head);letter-spacing:.06em;color:#fff;text-shadow:0 0 14px rgba(255,255,255,.25)}
.logo span{color:var(--mag);text-shadow:0 0 12px var(--mag),0 0 26px rgba(255,61,242,.5)}
.logo.big{font-size:84px}
.tagline{color:var(--mut);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.spacer{flex:1}
.chip{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:99px;border:1px solid color-mix(in srgb,var(--c,#888) 60%,transparent);background:color-mix(in srgb,var(--c,#888) 14%,transparent);font-size:11px;font-weight:600;letter-spacing:.02em;color:#fff}
.chip small{opacity:.7;font-weight:500}
.chip.mode{--c:#ffb02e}
.chip.mode.live{--c:#7dffb2}
.btn-chip{cursor:pointer;background:rgba(255,255,255,.05)}
.btn-chip.on{background:color-mix(in srgb,var(--c) 38%,transparent);box-shadow:0 0 0 1px var(--c) inset}
.chip.held{background:color-mix(in srgb,var(--c) 25%,transparent)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.07);font-weight:700;font-size:13px;letter-spacing:.02em;text-decoration:none;color:var(--txt);transition:transform .08s,box-shadow .15s,background .15s}
.btn:hover:not(:disabled){background:rgba(255,255,255,.13)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn.neon{background:linear-gradient(180deg,#8dffbd,#4fe39a);color:#04120b;border-color:#9dffc9;box-shadow:0 0 18px rgba(125,255,178,.35)}
.btn.neon:hover:not(:disabled){background:linear-gradient(180deg,#a6ffcb,#63efac);box-shadow:0 0 26px rgba(125,255,178,.55)}
.btn.ghost.on{border-color:var(--neon);color:var(--neon)}
.btn.small{padding:5px 10px;font-size:12px}
.btn.big{padding:14px 34px;font-size:18px;border-radius:14px}
.btn.wide{width:100%}
.only-mobile{display:none}
.only-touch{display:none}
@media (pointer:coarse){.only-touch{display:block}.only-desktop.fine{display:none}}
.mini-btn{border:1px solid var(--line);background:rgba(255,255,255,.06);border-radius:7px;padding:3px 8px;font-size:12px}
.mini-btn:hover{background:rgba(255,255,255,.14)}

/* ---------- панели ---------- */
.panel{position:fixed;background:var(--panel);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:16px;z-index:8;box-shadow:0 12px 40px rgba(0,0,0,.5)}
#left{left:12px;top:64px;bottom:176px;width:304px;display:flex;flex-direction:column;overflow:hidden}
.tabs{display:flex;border-bottom:1px solid var(--line)}
.tabs button{flex:1;background:none;border:0;padding:11px 4px;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);border-bottom:2px solid transparent}
.tabs button.on{color:#fff;border-bottom-color:var(--mag)}
#tabBody{flex:1;overflow:auto;padding:8px}
#tabBody::-webkit-scrollbar,#rightBody::-webkit-scrollbar,.modal-box::-webkit-scrollbar{width:6px}
#tabBody::-webkit-scrollbar-thumb,#rightBody::-webkit-scrollbar-thumb,.modal-box::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}
.row.gang{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px;border:1px solid transparent;border-radius:10px;background:none;text-align:left}
.row.gang:hover{background:rgba(255,255,255,.06)}
.row.gang.mine{border-color:color-mix(in srgb,var(--neon) 55%,transparent);background:rgba(125,255,178,.07)}
.row.gang.sel{background:rgba(255,255,255,.1)}
.rk{width:18px;text-align:center;color:var(--mut);font:12px var(--mono)}
.gn{flex:1;min-width:0;display:flex;flex-direction:column}
.gn b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.gn small,.gs small{color:var(--mut);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs{display:flex;flex-direction:column;align-items:flex-end;font-size:13px}
.pips{display:flex;gap:2px;width:0}
.pip{display:inline-block;width:6px;height:6px;border-radius:50%}
.logo-dot{position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--c,#555) 30%,#10131c);border:2px solid var(--c,#555);display:inline-flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 0 12px color-mix(in srgb,var(--c,#555) 55%,transparent)}
.logo-dot i{font:700 11px var(--head);font-style:normal;color:#fff;letter-spacing:.04em}
.logo-dot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.logo-dot.big{width:56px;height:56px}
.logo-dot.big i{font-size:20px}
.foot-note{margin:10px 4px 4px;color:var(--mut);font-size:11.5px}
.sec{margin:14px 2px 6px;font:700 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.card{display:block;width:100%;text-align:left;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04);padding:10px;margin-bottom:8px;border-left:3px solid var(--c,#555)}
button.card:hover{background:rgba(255,255,255,.08)}
.card.ev.live{box-shadow:0 0 18px color-mix(in srgb,var(--c) 30%,transparent)}
.dh{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.dh b{flex:1}
.tagc{font:700 9.5px var(--body);letter-spacing:.08em;padding:2px 7px;border-radius:99px;background:rgba(255,255,255,.12)}
.tagc.war{background:#ff5470;color:#fff}
.tagc.ev{background:var(--mag);color:#fff}
.downer{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:12.5px}
.downer.big{font-size:14px;margin:8px 0}
.warn{color:var(--warn)}
.bar{display:flex;align-items:center;gap:8px;margin:4px 0;font-size:11.5px}
.bl{width:84px;flex:none;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt{flex:1;height:7px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.bt i{display:block;height:100%;border-radius:4px;box-shadow:0 0 8px currentColor}
.bv{width:auto;min-width:44px;text-align:right;font:11px var(--mono);color:#cfd5e4}
.bar.slim{margin:8px 0 2px}
.bar.slim .bv{min-width:0}

/* ---------- правая панель ---------- */
#right{right:12px;top:64px;bottom:12px;width:376px;overflow:hidden;display:flex;flex-direction:column}
#rightBody{flex:1;overflow:auto;padding:16px 16px 20px}
.x{position:absolute;top:8px;right:10px;z-index:3;width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.08);font-size:14px;line-height:1}
.x:hover{background:rgba(255,255,255,.2)}
.gh{display:flex;align-items:center;gap:12px;margin:2px 28px 8px 0}
.gh h2{margin:0;font:24px/1.05 var(--head);letter-spacing:.03em}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.desc{color:#c3c9d9;margin:8px 0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:10px 0}
.stats>div{background:rgba(255,255,255,.05);border-radius:10px;padding:8px 4px;text-align:center}
.stats b{display:block;font:17px var(--head);letter-spacing:.03em}
.stats small{color:var(--mut);font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.actions .btn{flex:1 1 auto}
.row2{display:flex;gap:8px;margin-top:8px}
.row2 .btn{flex:1}
.coinbox{border:1px solid var(--line);border-radius:12px;padding:12px;background:rgba(255,255,255,.04)}
.curve{display:flex;gap:18px}
.curve small{display:block;color:var(--mut);font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.curve b{font:17px var(--head)}
.buyrow{display:flex;align-items:center;gap:6px;margin:10px 0}
.buyrow input{width:78px;background:#0a0c13;border:1px solid var(--line);border-radius:8px;color:#fff;padding:8px;font:14px var(--mono)}
.log{min-height:18px;margin-top:8px;font-size:12px;color:var(--mut);word-break:break-word}
.log.err{color:var(--err)}
.perks{list-style:none;margin:0;padding:0}
.perks li{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.05);opacity:.5}
.perks li.on{opacity:1}
.perks li b{width:18px;text-align:center;color:var(--neon)}
.perks li span{display:flex;flex-direction:column;font-weight:600}
.perks small{color:var(--mut);font-weight:400;font-size:11px}
.task{display:grid;grid-template-columns:1fr 70px auto;gap:8px;align-items:center;font-size:12px;margin:6px 0}
.task.done{color:var(--neon)}
.task b{font:11px var(--mono);min-width:44px;text-align:right}
.mission{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;margin:6px 0;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04)}
.mission b{display:block}
.mission small{display:block;color:var(--mut);font-size:11px}
.mission small em{color:var(--mag);font-style:normal;font-weight:700}
.mission.big{padding:12px 14px}
.mission .rw{color:#cfd5e4}
.mine-line{margin:10px 0;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.05);font-size:12.5px}
.mine-line .logo-dot{width:20px;height:20px;vertical-align:middle}
.mine-line.warn{border:1px solid color-mix(in srgb,var(--warn) 50%,transparent)}

/* ---------- нижний HUD ---------- */
#hudBottom{position:fixed;left:0;right:0;bottom:0;z-index:7;pointer-events:none;height:0}
#hudBottom>*{pointer-events:auto}
.mini{position:fixed;left:12px;bottom:12px;width:220px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--panel);box-shadow:0 8px 30px rgba(0,0,0,.5)}
.mini canvas{display:block;width:100%;height:auto;cursor:crosshair}
#where{padding:6px 10px;display:flex;flex-direction:column;font-size:12px;border-top:1px solid var(--line)}
#where small{color:var(--mut);font-size:11px}
.center{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:8px;border-radius:16px;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(12px);box-shadow:0 8px 30px rgba(0,0,0,.5)}
.mebtn{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;padding:5px 10px 5px 6px;text-align:left}
.mebtn:hover{background:rgba(255,255,255,.1)}
.mebtn span{display:flex;flex-direction:column;line-height:1.15}
.mebtn small{color:var(--mut);font-size:10.5px}
.mebtn .mm{align-items:flex-end;margin-left:6px;font-family:var(--mono)}
#zoomBox{position:fixed;right:12px;bottom:12px;display:flex;flex-direction:column;gap:6px}
body.right-open #zoomBox{right:402px}
#zoomBox button{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:var(--panel);font-size:18px}
#zoomBox button:hover{background:rgba(255,255,255,.14)}
#zoomBox #zQual{display:none;font-size:11px;font-weight:700;letter-spacing:.3px}
body.in3d #zoomBox #zQual{display:block}
#evbar{position:fixed;top:56px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:7;max-width:calc(100vw - 740px)}
.evpill{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:99px;border:1px solid color-mix(in srgb,var(--c) 70%,transparent);background:rgba(8,10,16,.82);font-size:11.5px;white-space:nowrap}
.evpill i{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c);animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.35}}
#prompt{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:7;padding:7px 14px;border-radius:99px;background:rgba(8,10,16,.9);border:1px solid color-mix(in srgb,var(--neon) 60%,transparent);font-weight:700;font-size:13px;pointer-events:none}
#prompt small{color:var(--mut);font-weight:500;margin-left:6px}
#tip{position:fixed;z-index:9;pointer-events:none;padding:5px 10px;border-radius:9px;background:rgba(8,10,16,.92);border:1px solid var(--line);font-size:12px;white-space:nowrap}
#tip small{color:var(--mut)}
#toasts{position:fixed;top:92px;left:50%;transform:translateX(-50%);z-index:30;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(560px,94vw)}
.toast{pointer-events:auto;padding:10px 16px;border-radius:12px;background:rgba(10,12,20,.95);border:1px solid var(--line);box-shadow:0 8px 30px rgba(0,0,0,.6);font-weight:600;font-size:13px;animation:tin .25s ease;text-align:center}
.toast.ok{border-color:color-mix(in srgb,var(--neon) 70%,transparent)}
.toast.err{border-color:color-mix(in srgb,var(--err) 70%,transparent);color:#ffd5dc}
.toast.out{opacity:0;transform:translateY(-8px);transition:.5s}
@keyframes tin{from{opacity:0;transform:translateY(-10px)}}
#joy{display:none;position:fixed;left:22px;bottom:150px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid var(--line);z-index:7;touch-action:none}
#joyKnob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(125,255,178,.5);box-shadow:0 0 18px rgba(125,255,178,.5)}
@media (pointer:coarse){#joy{display:block}}

/* ---------- модальное ---------- */
.modal{position:fixed;inset:0;z-index:20;background:rgba(3,4,8,.66);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:16px}
.modal-box{position:relative;width:min(480px,100%);max-height:92vh;overflow:auto;background:#0d101a;border:1px solid var(--line);border-radius:18px;padding:22px 22px 18px;box-shadow:0 20px 70px rgba(0,0,0,.7)}
.modal.wide .modal-box{width:min(780px,100%)}
.modal-box h2{margin:0 30px 8px 0;font:28px/1 var(--head);letter-spacing:.04em}
.fld{display:block;margin:10px 0;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.fld input{display:block;width:100%;margin-top:5px;background:#080a11;border:1px solid var(--line);border-radius:9px;padding:10px 11px;color:#fff;font:14px var(--body);letter-spacing:0;text-transform:none}
.fld input:focus{outline:none;border-color:var(--neon);box-shadow:0 0 0 2px rgba(125,255,178,.2)}
.fld input[type=file]{padding:8px;font-size:12px}
details{margin:10px 0;font-size:12px;color:var(--mut)}
summary{cursor:pointer;font-weight:700}
.lgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:10px}
.preview{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px;border-radius:14px;border:2px solid var(--c);background:color-mix(in srgb,var(--c) 16%,#0a0c13);box-shadow:0 0 28px color-mix(in srgb,var(--c) 40%,transparent)}
.preview b{font:22px var(--head);letter-spacing:.06em;text-align:center;text-shadow:0 0 12px var(--c)}
.preview small{color:#cfd5e4}
.cargrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin:12px 0}
.gear{display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 8px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04);text-align:center}
.gear:hover:not(:disabled){background:rgba(255,255,255,.1)}
.gear.sel{border-color:var(--neon);box-shadow:0 0 18px rgba(125,255,178,.3)}
.gear small{color:var(--mut);font-size:11px}
.gear .swatch{width:120px;height:56px}
.wlist{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.wbtn{justify-content:flex-start;padding:12px 14px;font-size:15px}
.wbtn img{width:26px;height:26px;border-radius:6px}

/* ---------- мини-игры ---------- */
.mg{position:fixed;inset:0;z-index:40;background:rgba(3,4,8,.9);display:flex;align-items:center;justify-content:center;padding:10px}
.mg-box{width:min(820px,100%)}
.mg-top{display:flex;align-items:center;gap:14px;padding:6px 4px;font-size:12px;color:var(--mut)}
.mg-top b{font:24px var(--head);letter-spacing:.06em;color:#fff}
.mg-top span:nth-of-type(1){flex:1}
.mg-top #mgTimer{font:18px var(--mono);color:var(--neon)}
.mg-top button{width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.1)}
.mg-stage{position:relative}
#mgc{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line);background:#000;touch-action:none}
.mg-result{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:rgba(3,4,8,.82);border-radius:14px;text-align:center}
.mg-rt{font:34px var(--head);letter-spacing:.06em}
.mg-rs{font:72px var(--head);color:var(--neon);text-shadow:0 0 24px rgba(125,255,178,.6)}
.mg-rd{color:var(--mut);margin-bottom:8px}
.mg-touch{display:none;gap:8px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.mg-tb{min-width:84px;padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.1);font:700 15px var(--body);touch-action:none;user-select:none}
@media (pointer:coarse){.mg-touch{display:flex}}

/* ---------- заставка ---------- */
#splash{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(ellipse at 50% 40%,rgba(255,61,242,.16),rgba(7,8,13,.92) 60%),rgba(7,8,13,.7);backdrop-filter:blur(2px);overflow:auto}
.splash-in{max-width:980px;text-align:center}
.sub{font-size:19px;color:#d6dbea;margin:10px 0 24px}
.sub b{color:var(--neon)}
.steps{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;text-align:left}
.steps li{padding:14px;border-radius:14px;border:1px solid var(--line);background:rgba(13,16,26,.8);font-size:12.5px;color:#b8bfd0}
.steps b{display:block;margin-bottom:5px;font:17px var(--head);letter-spacing:.05em;color:#fff}
.fine{margin-top:18px;color:var(--mut);font-size:12px}
.noscript{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#07080d;z-index:99}

/* ---------- телефон ---------- */
@media (max-width:860px){
  .tagline,.only-desktop{display:none!important}
  .only-mobile{display:inline-flex}
  .logo{font-size:21px}
  .logo.big{font-size:52px}
  #top{gap:6px;padding:0 8px}
  #top .btn{padding:7px 10px;font-size:12px}
  #modeChip{display:none}
  #left{display:none;left:8px;right:8px;width:auto;top:60px;bottom:96px}
  body.left-open #left{display:flex}
  #right{left:0;right:0;top:auto;bottom:0;width:auto;height:62vh;border-radius:18px 18px 0 0}
  .mini{left:8px;bottom:auto;top:128px;width:130px}
  body.right-open .mini{display:none}
  #evbar{top:54px;max-width:calc(100vw - 16px);flex-wrap:wrap;justify-content:center}
  .evpill{font-size:10.5px;padding:3px 9px}
  .center{bottom:10px;gap:5px;padding:5px;max-width:calc(100vw - 16px)}
  .center .btn{padding:8px 9px;font-size:12px}
  .center kbd{display:none}
  .mebtn .mm,.mebtn span:nth-child(2) small{display:none}
  #zoomBox{bottom:88px;right:8px}
  body.right-open #zoomBox{right:8px;bottom:calc(62vh + 8px)}
  #joy{left:14px;bottom:84px;width:104px;height:104px}
  body.right-open #joy,body.left-open #joy{display:none}
  .lgrid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  #prompt{bottom:70px}
  .modal-box{padding:18px 14px}
}
@media (max-width:860px) and (pointer:coarse){ #joy{display:block} }
.fine.risk{max-width:620px;margin:10px auto 0;font-size:11.5px;color:#8b93a7}

/* ---------- ссылки X / CA ---------- */
.linkbtn{padding:6px 12px;font-size:12px;text-decoration:none;white-space:nowrap}
.linkbtn.off{opacity:.55;cursor:default}
.linkbtn.ca{font-family:var(--mono);letter-spacing:.02em}
.social{display:flex;gap:8px;justify-content:center;margin-top:16px}
.only-touch-inline{display:none}
@media (pointer:coarse){.only-touch-inline{display:inline}.only-desktop{display:none}}

/* ---------- режимы: карта сверху / реальный мир ---------- */
#reticle{position:fixed;left:50%;top:50%;width:0;height:0;z-index:6;pointer-events:none}
#reticle i{position:absolute;left:-26px;top:-26px;width:52px;height:52px;border:2px solid var(--neon);border-radius:50%;box-shadow:0 0 22px rgba(125,255,178,.6),inset 0 0 14px rgba(125,255,178,.35);animation:ret 1.8s ease-in-out infinite}
#reticle i::before,#reticle i::after{content:"";position:absolute;background:var(--neon);box-shadow:0 0 8px var(--neon)}
#reticle i::before{left:50%;top:-12px;width:2px;height:76px;margin-left:-1px;clip-path:polygon(0 0,100% 0,100% 20%,0 20%,0 80%,100% 80%,100% 100%,0 100%)}
#reticle i::after{top:50%;left:-12px;height:2px;width:76px;margin-top:-1px;clip-path:polygon(0 0,20% 0,20% 100%,0 100%,80% 0,100% 0,100% 100%,80% 100%)}
@keyframes ret{50%{transform:scale(.88);opacity:.7}}
#reticle button{position:absolute;left:0;top:44px;transform:translateX(-50%);pointer-events:auto;white-space:nowrap}
#mapHint{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);z-index:6;pointer-events:none;padding:7px 16px;border-radius:99px;background:rgba(8,10,16,.9);border:1px solid var(--line);font-size:12.5px;color:#cfd5e4;white-space:nowrap}
body:not(.mode-map) #reticle,body:not(.mode-map) #mapHint,body:not(.mode-map) #btnDrop{display:none}
body:not(.playing) #reticle,body:not(.playing) #mapHint{display:none}
body.mode-map #btnTaxi,body.mode-map #zMe,body.mode-map #joy,body.mode-map #btnMap,body.mode-map #prompt{display:none!important}
#dropCap{position:fixed;left:50%;top:34%;transform:translateX(-50%);z-index:12;pointer-events:none;text-align:center;font:46px/1 var(--head);letter-spacing:.08em;color:#fff;text-shadow:0 0 18px var(--neon),0 0 40px rgba(125,255,178,.5);animation:cap 1.5s ease-out forwards}
#dropCap small{display:block;margin-top:8px;font:12px var(--body);letter-spacing:.3em;color:var(--neon)}
@keyframes cap{0%{opacity:0;transform:translateX(-50%) scale(1.18)}20%{opacity:1;transform:translateX(-50%) scale(1)}75%{opacity:1}100%{opacity:0}}
#map.dive{animation:dive .9s ease-out}
@keyframes dive{0%{filter:brightness(1.7) saturate(1.4) blur(2px)}60%{filter:brightness(1.1)}100%{filter:none}}
@media (max-width:860px){
  .hide-mobile{display:none!important}
  #mapHint{bottom:70px;white-space:normal;width:min(320px,90vw);text-align:center;border-radius:14px}
  #dropCap{font-size:32px}
}

@media (max-width:860px){
  #mapHint{bottom:82px;width:min(270px,calc(100vw - 112px))}
  .center .btn{white-space:nowrap}
}

/* ---------- 3D-мир ---------- */
#gl{position:fixed;inset:0;width:100%;height:100%;display:none;touch-action:none;opacity:0;transition:opacity .5s ease}
#gl.show{display:block}
#gl.on{opacity:1}
body.view3d #map{visibility:hidden}

/* ---------- HUD 3D ---------- */
#hud3d,#xhair,#hint3,#tctl,#hurt,#wasted{display:none}
body.in3d #hud3d{display:flex}
body.view3d #xhair{display:block}
body.view3d #hint3{display:block}
#xhair{position:fixed;left:50%;top:50%;width:0;height:0;z-index:5;pointer-events:none}
#xhair i{position:absolute;left:-10px;top:-10px;width:20px;height:20px;border:2px solid rgba(255,255,255,.9);border-radius:50%;box-shadow:0 0 6px #000;transition:transform .08s}
#xhair i::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;background:#ff5470;border-radius:50%}
#xhair.hit i{border-color:#ff5470;transform:scale(1.4)}
#hud3d{position:fixed;right:12px;bottom:12px;z-index:7;flex-direction:column;gap:7px;padding:10px 14px;min-width:200px;border-radius:14px;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(10px);pointer-events:none}
#hud3d .hrow{display:flex;justify-content:space-between;align-items:baseline;font:20px var(--head);letter-spacing:.06em}
#hud3d .hrow span:last-child{font-family:var(--mono);font-size:15px}
#hudStars{color:#556;letter-spacing:.2em;font-size:22px}
#hudStars.hot{color:#ffd23a;text-shadow:0 0 12px #ffb02e;animation:pulse .9s infinite}
#hud3d .hbar{height:9px;border-radius:5px;background:rgba(255,255,255,.12);overflow:hidden}
#hud3d .hbar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff5470,#7dffb2);transition:width .15s}
#hudWeap{font-size:15px;color:var(--neon)}
body.in3d #zoomBox{bottom:140px}
body.in3d #zMe{display:none}
body.in3d.right-open #zoomBox{right:402px}
body.in3d.right-open #hud3d{right:402px}
#hint3{position:fixed;left:50%;top:92px;transform:translateX(-50%);z-index:6;pointer-events:none;padding:6px 16px;border-radius:99px;background:rgba(8,10,16,.82);border:1px solid var(--line);font-size:12px;color:#cfd5e4;white-space:nowrap;animation:hint 12s forwards}
@keyframes hint{0%,80%{opacity:1}100%{opacity:0}}
#hurt{position:fixed;inset:0;z-index:9;pointer-events:none;background:radial-gradient(ellipse at center,transparent 45%,rgba(255,30,60,.55));opacity:0}
body.in3d #hurt{display:block}
#hurt.flash{animation:hurt .45s ease-out}
@keyframes hurt{0%{opacity:1}100%{opacity:0}}
#wasted{position:fixed;inset:0;z-index:30;pointer-events:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(40,0,10,.55);opacity:0;transition:opacity .5s}
body.in3d #wasted{display:flex}
#wasted.on{opacity:1}
#wasted b{font:96px var(--head);letter-spacing:.12em;color:#ff3050;text-shadow:0 0 30px rgba(255,48,80,.7)}
#wasted small{font-size:14px;color:#fff;letter-spacing:.12em;text-transform:uppercase}
#tctl{position:fixed;right:14px;bottom:92px;z-index:8;gap:10px;align-items:flex-end;touch-action:none}
#tctl button{width:54px;height:54px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.12);font:700 12px var(--body);color:#fff;touch-action:none;user-select:none}
#tctl #fireBtn{width:84px;height:84px;background:rgba(255,84,112,.55);font-size:15px}
#tctl #jumpBtn{width:64px;height:64px}
@media (pointer:coarse){
  body.view3d #tctl{display:block;width:190px;height:190px;right:10px;bottom:84px}
  #tctl button{position:absolute}
  #tctl #fireBtn{right:0;bottom:0}
  #tctl #jumpBtn{right:98px;bottom:4px}
  #tctl #reloadBtn{right:4px;bottom:98px}
  #tctl #weapBtn{right:66px;bottom:106px}
}
body.view3d:not(.left-open) #left{display:none}
body.view3d #evbar{display:none}
@media (max-width:860px){
  #hud3d{right:8px;bottom:auto;top:96px;min-width:150px;padding:8px 10px}
  #hud3d .hrow{font-size:16px}
  body.in3d #zoomBox{bottom:auto;top:230px}
  body.view3d .center{bottom:auto;top:56px;left:auto;right:8px;transform:none;padding:4px}
  body.view3d #meBox,body.view3d #btnGarage,body.view3d #btnTaxi,body.view3d #btnMissions{display:none}
  #hint3{top:auto;bottom:250px;white-space:normal;width:min(300px,86vw);text-align:center;border-radius:14px}
  #wasted b{font-size:60px}
  body.view3d .mini{display:none}
}
body.view3d #leftToggle{display:inline-flex}

/* ---------- онлайн, чат, голос ---------- */
.chip.online{--c:#2bd5ff;cursor:pointer}
.chip.online i{width:7px;height:7px;border-radius:50%;background:#7dffb2;box-shadow:0 0 6px #7dffb2}
.chip.online.off i{background:#ff5470;box-shadow:none}
#btnVoice svg{width:15px;height:15px}
#btnVoice.on{border-color:var(--neon);color:var(--neon)}
#btnVoice.talk{background:rgba(125,255,178,.3);box-shadow:0 0 14px rgba(125,255,178,.65)}
#chat{display:none;position:fixed;left:12px;bottom:150px;width:min(330px,calc(100vw - 24px));z-index:8;flex-direction:column;gap:6px}
body.mode-world #chat{display:flex}
.chat-box{display:flex;flex-direction:column;gap:6px}
#chatLog{max-height:140px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;font-size:13px;line-height:1.3;text-shadow:0 1px 3px #000;pointer-events:none}
#chatLog .cl{padding:2px 8px;border-radius:8px;background:rgba(8,10,16,.55);word-break:break-word}
#chatLog .cl b{margin-right:6px}
#chatLog .cl.sys{color:#9aa3b8;font-style:italic}
#chatLog .cl.old{opacity:.4}
#chatForm{display:flex;gap:6px}
#chatInput{flex:1;min-width:0;background:rgba(8,10,16,.6);border:1px solid var(--line);border-radius:10px;color:#fff;padding:8px 10px;font:13px var(--body)}
#chatInput:focus{outline:none;border-color:var(--neon);background:rgba(8,10,16,.92)}
.chat-toggle{display:none;align-items:center;gap:6px;align-self:flex-start;padding:6px 12px;border-radius:99px;border:1px solid var(--line);background:var(--panel);color:#fff;font:700 12px var(--body)}
.chat-toggle b{background:var(--err);border-radius:99px;padding:0 6px;font-size:11px}
body.in3d.right-open #chat{display:none}
#tags{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden;display:none}
body.view3d #tags{display:block}
.ntag{position:absolute;left:0;top:0;display:none;padding:2px 9px;border-radius:99px;background:rgba(8,10,16,.8);border:1px solid #fff;font:700 12px var(--body);color:#fff;white-space:nowrap;pointer-events:none;will-change:transform}
.ntag.talk{box-shadow:0 0 0 2px rgba(125,255,178,.85),0 0 14px rgba(125,255,178,.85)}
.plist{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:48vh;overflow:auto}
.plist li{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.04)}
.plist .pd{width:10px;height:10px;border-radius:50%;flex:none}
.plist .pn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.plist .pn small{color:var(--mut);font-weight:500;margin-left:6px}
.plist .pv{font-size:12px;color:var(--mut)}
.plist .pv.live{color:var(--neon)}
.vnotes{margin:10px 0;padding-left:18px;color:#cfd5e4;font-size:13px;line-height:1.5}
.vcheck{display:flex;gap:8px;align-items:center;margin:10px 0;font-size:13px}

/* ---------- машина, броня, оружейная ---------- */
#hud3d .hbar.armor{height:6px;background:rgba(255,255,255,.1)}
#hud3d .hbar.armor i{width:0;background:linear-gradient(90deg,#2bd5ff,#9ee8ff)}
#hud3d .hbar.car i{background:linear-gradient(90deg,#ff5470,#ffd23a)}
#hud3d .hbar.breath{height:6px;background:rgba(255,255,255,.1)}
#hud3d .hbar.breath i{background:linear-gradient(90deg,#2bd5ff,#7dffb2)}
#hud3d .hbar.breath.hidden{display:none}
#hud3d .hbar.breath.low i{background:linear-gradient(90deg,#ff3050,#ffb02e);animation:breathPulse .5s ease-in-out infinite alternate}
@keyframes breathPulse{from{opacity:.55}to{opacity:1}}
#hudCar{display:flex;flex-direction:column;gap:6px}
#hudCar.hidden{display:none}
#carBtn{display:none}
#carBtn.show{display:block}
@media (pointer:coarse){
  body.view3d #tctl #carBtn.show{right:130px;bottom:100px;background:rgba(43,213,255,.5)}
}
body.driving #weapBtn,body.driving #reloadBtn{opacity:.35}
.wcard{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04);margin-bottom:8px}
.wcard.eq{border-color:var(--neon);background:rgba(125,255,178,.07)}
.wcard .wn{flex:1;min-width:0}
.wcard .wn b{font:20px var(--head);letter-spacing:.06em}
.wcard .wn small{display:block;color:var(--mut);font-size:12px;margin-top:2px}
.wcard .ws{font:11px var(--mono);color:#aeb6cb;margin-top:3px}
.cashline{margin:6px 0 12px;padding:8px 12px;border-radius:10px;background:rgba(125,255,178,.08);border:1px solid rgba(125,255,178,.3);font-size:13px}
.cashline b{font:22px var(--head);color:var(--neon);margin:0 6px}
@media (max-width:860px){
  #chat{left:8px;bottom:auto;top:58px;width:min(300px,calc(100vw - 16px))}
  .chat-toggle{display:inline-flex}
  #chat:not(.open) .chat-box{display:none}
  #chatLog{max-height:30vh}
  #btnVoice .only-desktop,#onlineChip{font-size:11px}
}
@media (max-width:860px){
  #top{gap:4px;padding:0 6px}
  #top .btn{white-space:nowrap;padding:7px 8px}
  #top .logo{font-size:20px}
  .chip.online{padding:3px 7px}
  #btnVoice{padding:7px 7px}
}

/* ---------- помещения ---------- */
#fade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .24s ease;z-index:26}
#fade.on{opacity:1}
body.indoors #hint3{display:none}
body.indoors #tags{display:none}
body.indoors #fireBtn,body.indoors #weapBtn,body.indoors #reloadBtn{opacity:.3}

/* ---------- логотип: знак «T» + слово ---------- */
.logo{display:flex;align-items:center;gap:.3em}
.logo .lt{font:inherit;font-weight:400}
.logo-mark{width:1.2em;height:1.2em;flex:none}
.logo.big{gap:.22em}
@media (max-width:420px){ #top .logo .lt{display:none} #top .logo-mark{width:30px;height:30px} }
.logo.big{justify-content:center}
.logo.big .logo-mark{width:.95em;height:.95em}
.splash-in{margin:auto} /* высокое содержимое не обрезается сверху на низких экранах */
/* знак из наклонных плит: внутри плитки есть поля, поэтому он крупнее и ближе к слову */
.logo{gap:.1em}
.logo-mark{width:1.5em;height:1.5em}
.logo.big .logo-mark{width:1.25em;height:1.25em}
@media (max-width:420px){ #top .logo-mark{width:38px;height:38px} }

/* ---------- заставка игры ---------- */
#intro{position:fixed;inset:0;z-index:70;display:none;flex-direction:column;align-items:center;justify-content:center;gap:2.2vmin;overflow:hidden;background:radial-gradient(ellipse at 50% 42%,#1a0b2c 0%,#07080d 64%);transition:opacity .7s ease;user-select:none;cursor:pointer}
body.intro-on #intro,#intro.out{display:flex}
#intro.out{opacity:0;pointer-events:none}
.intro-mark{width:min(30vmin,240px);height:auto;overflow:visible;filter:drop-shadow(0 0 0 rgba(255,61,242,0));animation:introGlow 1.4s 1.55s ease-in-out 2}
.intro-mark polygon{opacity:0}
.intro-mark .s1{animation:slabL .85s .25s cubic-bezier(.2,.9,.25,1.12) forwards}
.intro-mark .s2{animation:slabT .8s .6s cubic-bezier(.2,.9,.25,1.12) forwards}
.intro-mark .s3{animation:slabR .8s .9s cubic-bezier(.2,.9,.25,1.12) forwards}
@keyframes slabL{from{opacity:0;transform:translateX(-90px)}to{opacity:1;transform:none}}
@keyframes slabT{from{opacity:0;transform:translateY(-70px)}to{opacity:1;transform:none}}
@keyframes slabR{from{opacity:0;transform:translateX(90px)}to{opacity:1;transform:none}}
@keyframes introGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(255,61,242,0))}50%{filter:drop-shadow(0 0 22px rgba(255,61,242,.75))}}
.intro-word{display:flex;font:clamp(44px,13vmin,120px)/1 var(--head);letter-spacing:.06em;color:#fff}
.intro-word span{display:inline-block;opacity:0;animation:letterIn .6s calc(1.7s + var(--i) * .08s) cubic-bezier(.2,.8,.2,1) forwards}
.intro-word .pad{color:var(--mag);text-shadow:0 0 14px var(--mag),0 0 34px rgba(255,61,242,.55)}
@keyframes letterIn{from{opacity:0;transform:translateY(28px);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
.intro-tag{font:600 clamp(11px,2.1vmin,16px) var(--body);letter-spacing:.2em;text-transform:uppercase;color:#aeb6cb;opacity:0;animation:tagIn .9s 2.75s ease forwards}
@keyframes tagIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.intro-beam{position:absolute;bottom:-12vmin;width:14vmin;height:140vmin;background:linear-gradient(to top,rgba(255,61,242,.0),rgba(255,61,242,.16) 40%,rgba(43,213,255,0));transform-origin:50% 100%;filter:blur(6px);opacity:0;animation:beamIn 1.2s .2s ease forwards,beamSway 6s .2s ease-in-out infinite}
.intro-beam.b1{left:24%;--r:-14deg;transform:rotate(-14deg)}
.intro-beam.b2{right:24%;--r:14deg;transform:rotate(14deg);background:linear-gradient(to top,rgba(43,213,255,0),rgba(43,213,255,.15) 40%,rgba(43,213,255,0));animation-delay:.4s,.4s}
@keyframes beamIn{to{opacity:1}}
@keyframes beamSway{0%,100%{transform:rotate(calc(var(--r) - 6deg))}50%{transform:rotate(calc(var(--r) + 6deg))}}
.intro-tag{max-width:88vw;text-align:center;line-height:1.5}
@media (max-width:480px){ .intro-tag{letter-spacing:.12em} }