/* =========================================================================
   ETERNAL WAR — Launcher UI (натянуто на app.js: хуки сохранены)
   Слои: images/hero-3.jpg (фон) + logo.webp + рамки-кнопки + медальоны соц.
   ========================================================================= */
:root{
  --font-0:Tahoma,"Segoe UI",Arial,sans-serif;
  --font-1:"Philosopher","Times New Roman",Times,serif;
  --accent:#dbaa54; --accent-hover:#eecb78; --accent-2:#d17c2a;
  --red:#ac0000; --red-h:#d30b0b; --status-on:#0af34b;
  --title:#fff8ed; --text:#bab2a8; --desc:#c1b9af; --muted:#8b8377;
  --panel:#201c1b; --panel-2:#2e2b29; --panel-3:#282524;
  --border:rgba(77,63,50,.6); --border-2:#433e3b;
  --r:.5cqw;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden}
body{font-family:var(--font-0);background:#0e0b09;color:var(--text);
  -webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;cursor:default}
.hidden{display:none !important}
img{-webkit-user-drag:none;user-drag:none}

/* ================= СЦЕНА (весь фрейм окна) ================= */
.stage{position:relative;width:100vw;height:100vh;container-type:inline-size;background:#0e0b09;overflow:hidden}
.ov{position:absolute;z-index:5}
::-webkit-scrollbar{width:.4cqw;height:.4cqw;background:rgba(0,0,0,.4)}
::-webkit-scrollbar-thumb{background:#6b4725;border-radius:1cqw}
::-webkit-scrollbar-thumb:hover{background:#9b6635}

/* ФОН-СЦЕНА — строго между шапкой и нижним баром */
/* hero-3.jpg шире (2.69) этой области (2.21) — cover режет только по бокам,
   по высоте картинка встаёт впритык и под блоки не уходит */
.scene{position:absolute;left:0;right:0;top:9%;bottom:13.5%;z-index:1;overflow:hidden;
  background:#0e0b09 url('images/hero-3.jpg') center/cover no-repeat}
.scene::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(0deg,rgba(12,10,9,.55),transparent 26%),
    radial-gradient(130% 115% at 50% 42%,transparent 55%,rgba(0,0,0,.45) 100%)}

/* ================= ЛОГО + INTERLUDE + ТАЙМЕР ================= */
.hero{left:0;right:0;top:9%;bottom:13.5%;z-index:4;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;gap:1.6cqw;pointer-events:none;padding-left:6cqw}
.logo-c{width:33%}
.logo-c img{width:100%;height:auto;display:block;filter:drop-shadow(0 .4cqw 1cqw rgba(0,0,0,.6))}
.info-c{text-align:left}
.info-c .il{font-family:var(--font-1);font-weight:700;font-size:2.3cqw;letter-spacing:.28cqw;line-height:1;
  background:linear-gradient(180deg,#fbe7c3,var(--accent) 58%,#96692f);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 .12cqw .35cqw rgba(0,0,0,.9));position:relative;display:inline-block;padding-bottom:.55cqw;margin-bottom:1.1cqw}
.info-c .il::after{content:"";position:absolute;left:0;bottom:0;width:80%;height:.16cqw;border-radius:1cqw;
  background:linear-gradient(90deg,var(--accent),transparent)}
/* таймер осады */
.cd .cd-cap{font-family:var(--font-1);font-weight:700;font-size:0.977cqw;letter-spacing:.16cqw;color:var(--accent);
  text-transform:uppercase;margin-bottom:.55cqw;text-shadow:0 .1cqw .4cqw rgba(0,0,0,.9)}
.cd .cd-cap i{color:var(--accent-2);margin-right:.25cqw}
.cd-row{display:flex;gap:.6cqw}
.cd-col{display:flex;flex-direction:column;align-items:center;min-width:3.4cqw;padding:.5cqw .3cqw .4cqw;border-radius:var(--r);
  background:linear-gradient(180deg,rgba(24,21,20,.82),rgba(14,12,11,.72));border:1px solid var(--border);
  box-shadow:0 .4cqw 1cqw -.4cqw rgba(0,0,0,.7)}
.cd-col b{font-family:var(--font-1);font-weight:700;font-size:1.955cqw;color:var(--title);line-height:1;
  text-shadow:0 0 .5cqw rgba(219,170,84,.25)}
.cd-col span{font-size:0.632cqw;letter-spacing:.05cqw;color:var(--muted);text-transform:uppercase;margin-top:.3cqw}

/* ================= ВЕРХНЕЕ МЕНЮ ================= */
.topbar{position:absolute;left:0;right:0;top:0;height:9%;z-index:8;display:flex;align-items:center;gap:1cqw;
  padding:0 1cqw 0 1.2cqw;
  background:linear-gradient(180deg,rgba(20,17,16,.99) 0%,rgba(20,17,16,.97) 64%,rgba(20,17,16,.55) 100%)}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(219,170,84,.45),transparent)}
.brand{display:flex;align-items:center;height:100%;flex:none;padding:0 .9cqw;margin-right:.4cqw;text-decoration:none}
.brand img{height:80%;width:auto;display:block;filter:drop-shadow(0 .15cqw .4cqw rgba(0,0,0,.6))}

nav{display:flex;align-items:center}
nav a{position:relative;font-size:1.092cqw;font-weight:500;letter-spacing:.05cqw;color:#aea599;
  text-decoration:none;padding:.7cqw .7cqw;text-transform:uppercase;transition:color .25s;white-space:nowrap;cursor:pointer}
nav a:hover,nav a.active{color:var(--title)}
nav .dot{width:1px;height:1.7cqw;flex:none;background:linear-gradient(180deg,rgba(194,179,170,.06) 50%,rgba(0,0,0,.3) 0)}

.sp{flex:1}
/* RU / EN */
.lang-sw{display:flex;gap:.25cqw;background:rgba(0,0,0,.35);border:1px solid var(--border);border-radius:var(--r);padding:.2cqw}
.lb{border:none;background:transparent;cursor:pointer;font-family:var(--font-1);font-weight:700;font-size:0.977cqw;
  letter-spacing:.06cqw;color:#9a927f;padding:.35cqw .7cqw;border-radius:calc(var(--r) - .1cqw);transition:.18s}
.lb:hover{color:var(--title)}
.lb.active{color:#241c10;background:linear-gradient(180deg,var(--accent),#b98a3e)}

.wctrl{display:flex;gap:.2cqw;margin-left:.3cqw}
.wbtn{width:2.3cqw;height:2.3cqw;border:none;background:transparent;color:#bdb3a2;cursor:pointer;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;transition:.16s;font-size:1.15cqw}
.wbtn:hover{background:rgba(255,255,255,.08);color:#fff}
.wbtn.cl:hover{background:var(--red);color:#fff}

/* ================= БОКОВОЙ САЙДБАР ================= */
.rail{position:absolute;right:1%;top:50%;transform:translateY(-50%);z-index:7;width:5.2cqw;
  display:flex;flex-direction:column;align-items:center;gap:.75cqw;padding:1cqw .45cqw;border-radius:var(--r);
  background:linear-gradient(180deg,rgba(32,28,27,.86),rgba(18,16,15,.86));border:1px solid var(--border);
  backdrop-filter:blur(6px);box-shadow:0 .8cqw 2cqw -.6cqw rgba(0,0,0,.75)}
.rail .srv{display:flex;flex-direction:column;align-items:center;gap:.18cqw;text-align:center}
.rail .srv .dot{width:.55cqw;height:.55cqw;border-radius:50%;background:var(--status-on);
  box-shadow:0 0 .5cqw var(--status-on);animation:pulse 2.2s ease-in-out infinite}
.rail .srv .dot.off{background:#7a2020;box-shadow:0 0 .5cqw #7a2020;animation:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.rail .srv .st{font-family:var(--font-1);font-size:0.667cqw;letter-spacing:.12cqw;color:var(--accent);text-transform:uppercase}
.rail .srv .cnt{font-family:var(--font-1);font-weight:700;font-size:1.438cqw;color:var(--title);line-height:1}
.rail .srv .cl{font-size:0.598cqw;letter-spacing:.04cqw;color:var(--muted);text-transform:uppercase}
.rail .srv .rate{font-family:var(--font-1);font-weight:700;font-size:1.15cqw;color:var(--accent);line-height:1;margin-top:.35cqw}
.rail .ln{width:72%;height:1px;background:var(--border);flex:none}
.rail a{width:3.4cqw;height:3.4cqw;display:block;position:relative;text-decoration:none;cursor:pointer;
  transition:transform .2s,filter .2s;filter:drop-shadow(0 .2cqw .35cqw rgba(0,0,0,.55))}
.rail a img{width:100%;height:100%;display:block;object-fit:contain;border-radius:50%}
.rail a:hover{transform:scale(1.1);filter:brightness(1.15) drop-shadow(0 0 .6cqw rgba(219,170,84,.55))}
/* поповер ВЛЕВО (сайдбар справа) */
.rail a::after,.rail a::before{opacity:0;pointer-events:none;transition:.18s ease}
.rail a:hover::after,.rail a:hover::before{opacity:1}
.rail a::after{content:attr(data-t);position:absolute;right:calc(100% + .9cqw);top:50%;transform:translateY(-50%);
  white-space:nowrap;font-family:var(--font-1);font-weight:700;font-size:0.92cqw;letter-spacing:.06cqw;text-transform:uppercase;
  color:#f5eee4;background:linear-gradient(180deg,#241f1c,#14100e);border:1px solid var(--border-2);border-radius:var(--r);
  padding:.42cqw .75cqw;box-shadow:0 .3cqw 1cqw -.3cqw rgba(0,0,0,.75)}
.rail a::before{content:"";position:absolute;right:calc(100% + .5cqw);top:50%;transform:translateY(-50%);
  border:.42cqw solid transparent;border-left-color:#241f1c}

/* ================= НИЖНЯЯ ПАНЕЛЬ ================= */
.bottom{position:absolute;left:0;right:0;bottom:0;height:13.5%;z-index:8;display:flex;align-items:center;gap:1.2cqw;padding:0 1.3cqw;
  background:linear-gradient(180deg,rgba(16,13,12,.94) 0%,rgba(16,13,12,.98) 45%,rgba(16,13,12,.99) 100%)}
.bottom::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(219,170,84,.5),transparent)}

.dl{display:flex;align-items:center;gap:1cqw;min-width:0;flex:1}
.dl-crest{flex:none;width:3.4cqw;height:3.4cqw;position:relative;color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:1.84cqw;filter:drop-shadow(0 0 .4cqw rgba(219,170,84,.3))}
.dl-crest .ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--border)}
.dl-crest .ring::before{content:"";position:absolute;inset:-.16cqw;border-radius:50%;border:1px solid transparent;border-top-color:rgba(209,124,42,.7);animation:spin 4.5s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.spin-ico{display:none}
.dl-main{flex:1;min-width:0}
.dl-top{display:flex;align-items:center;justify-content:space-between;gap:1cqw}
.dl-title{font-family:var(--font-1);font-weight:700;letter-spacing:.1cqw;font-size:1.15cqw;color:var(--accent);text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-actions{display:flex;gap:.4cqw;flex:none}
.btn-sm{border:1px solid var(--border);background:rgba(0,0,0,.3);color:#cabf9f;cursor:pointer;border-radius:var(--r);
  width:2cqw;height:1.7cqw;display:flex;align-items:center;justify-content:center;font-size:0.92cqw;transition:.16s}
.btn-sm:hover{color:var(--title);border-color:var(--accent)}
.btn-sm.red:hover{color:#fff;border-color:var(--red-h);background:rgba(172,0,0,.4)}

.pbar{position:relative;height:1.2cqw;margin:.5cqw 0 .4cqw;border-radius:1cqw;overflow:hidden;
  background:linear-gradient(180deg,#0e0b09,#1b1512);border:1px solid var(--border);box-shadow:inset 0 .12cqw .45cqw rgba(0,0,0,.9)}
.pfill{position:relative;height:100%;width:0%;border-radius:1cqw;overflow:hidden;
  background:linear-gradient(180deg,#e6b968 0%,#cf9440 45%,#ad6a2c 80%,#8a4e1f 100%);
  box-shadow:inset 0 .1cqw .05cqw rgba(255,240,205,.5),inset 0 -.18cqw .25cqw rgba(70,34,10,.55),0 0 .5cqw rgba(185,118,45,.35);
  transition:width .4s cubic-bezier(.3,.8,.4,1)}
.pfill::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,rgba(255,244,215,.15) 0 .75cqw,transparent .75cqw 1.6cqw);animation:pstripes 1s linear infinite}
@keyframes pstripes{to{background-position:1.6cqw 0}}
.pfill::after{content:"";position:absolute;top:0;bottom:0;right:0;width:2cqw;
  background:linear-gradient(90deg,transparent,rgba(255,246,220,.85));animation:ptip 1.5s ease-in-out infinite}
@keyframes ptip{0%,100%{opacity:.5}50%{opacity:1}}
.pshine{position:absolute;top:0;bottom:0;left:-45%;width:34%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-18deg);animation:psweep 2.6s ease-in-out infinite}
@keyframes psweep{0%{left:-45%}55%,100%{left:135%}}
.segs-row{display:none}

.dl-stats{display:flex;gap:1.4cqw;font-size:0.851cqw;letter-spacing:.02cqw}
.dl-stats .s{color:var(--muted);text-transform:uppercase;white-space:nowrap}
.dl-stats .s b{color:var(--title);font-weight:400;margin-left:.35cqw}
.dl-stats .s.pct b{color:var(--accent)}
.dl-stats .s.file{color:#8f8a7c;text-transform:none;overflow:hidden;text-overflow:ellipsis;max-width:22cqw}

/* КНОПКА НАСТРОЕК */
.btn-settings{flex:none;width:3.4cqw;height:3.4cqw;border:1px solid var(--border);border-radius:var(--r);cursor:pointer;
  background:linear-gradient(180deg,rgba(46,43,41,.9),rgba(24,21,20,.9));color:var(--accent);font-size:1.61cqw;
  display:flex;align-items:center;justify-content:center;transition:.2s}
.btn-settings:hover{color:var(--accent-hover);border-color:var(--accent);transform:rotate(35deg)}

/* КНОПКА ИГРАТЬ — на рамке btn-start.png */
.play{position:relative;flex:none;width:18cqw;aspect-ratio:600/214;border:none;cursor:pointer;
  background:url('images/btn-start.png') center/100% 100% no-repeat;display:flex;align-items:center;justify-content:center;
  transition:filter .22s ease,transform .2s ease;overflow:hidden}
.play-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15cqw;line-height:1}
.play-kicker{font-family:var(--font-1);font-weight:700;font-size:0.667cqw;letter-spacing:.24cqw;color:var(--accent);
  text-transform:uppercase;opacity:.85}
.play-main{display:flex;align-items:center;gap:.5cqw;font-family:var(--font-1);font-weight:700;font-size:1.552cqw;
  letter-spacing:.24cqw;text-transform:uppercase;color:#ffe6c0;text-shadow:0 .12cqw .3cqw rgba(0,0,0,.75)}
.play-main i{font-size:1.208cqw}
.play:hover{filter:brightness(1.14) saturate(1.08);transform:translateY(-.15cqw) scale(1.02)}
.play:active{transform:translateY(.05cqw) scale(.995);filter:brightness(1.05)}
.play.dis{filter:grayscale(.25) brightness(.72);cursor:default;pointer-events:none;transform:none}
.play.is-ready .play-kicker{color:#8fd07a}
.rpl{position:absolute;width:8px;height:8px;border-radius:50%;background:rgba(255,240,205,.6);
  transform:scale(0);animation:rpl .6s ease-out forwards;pointer-events:none}
@keyframes rpl{to{transform:scale(14);opacity:0}}

/* ================= НАСТРОЙКИ (модалка) ================= */
.modal{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center}
.modal-bg{position:absolute;inset:0;background:rgba(6,4,3,.72);backdrop-filter:blur(4px)}
.modal-box{position:relative;width:40cqw;max-width:92%;border-radius:.8cqw;overflow:hidden;
  background:linear-gradient(180deg,#241f1c,#151110);border:1px solid var(--border);
  box-shadow:0 2cqw 5cqw -1cqw rgba(0,0,0,.85);animation:mIn .25s ease}
@keyframes mIn{from{opacity:0;transform:translateY(1.5cqw) scale(.98)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:1.1cqw 1.4cqw;border-bottom:1px solid var(--border);
  font-family:var(--font-1);font-weight:700;font-size:1.322cqw;color:var(--title);text-transform:uppercase;letter-spacing:.08cqw}
.modal-head i{color:var(--accent);margin-right:.35cqw}
.modal-cls{border:none;background:transparent;color:#bdb3a2;cursor:pointer;font-size:1.265cqw;width:2cqw;height:2cqw;
  display:flex;align-items:center;justify-content:center;border-radius:var(--r);transition:.16s}
.modal-cls:hover{background:rgba(255,255,255,.08);color:#fff}
.modal-body{padding:1.4cqw;display:flex;flex-direction:column;gap:1.3cqw}
.set-row{display:flex;flex-direction:column;gap:.55cqw}
.set-lbl{font-family:var(--font-1);font-weight:700;font-size:1.035cqw;color:var(--accent);text-transform:uppercase;letter-spacing:.06cqw}
.set-path{display:flex;gap:.6cqw}
.set-inp{flex:1;min-width:0;background:#0e0b09;border:1px solid var(--border);border-radius:var(--r);color:var(--text);
  font-family:var(--font-0);font-size:1.035cqw;padding:.7cqw .9cqw;outline:none}
.set-inp:focus{border-color:var(--accent)}
.btn-browse{flex:none;border:1px solid var(--accent);background:linear-gradient(180deg,rgba(219,170,84,.16),rgba(219,170,84,.05));
  color:var(--accent-hover);cursor:pointer;font-family:var(--font-1);font-weight:700;font-size:0.977cqw;text-transform:uppercase;
  letter-spacing:.06cqw;padding:.7cqw 1.1cqw;border-radius:var(--r);transition:.18s}
.btn-browse:hover{background:rgba(219,170,84,.25);color:var(--title)}
.set-err{color:#e46a5a;font-size:0.943cqw}
.sel-w{position:relative}
.set-sel{width:100%;appearance:none;-webkit-appearance:none;background:#0e0b09;border:1px solid var(--border);border-radius:var(--r);
  color:var(--text);font-family:var(--font-0);font-size:1.035cqw;padding:.7cqw 2.4cqw .7cqw .9cqw;cursor:pointer;outline:none}
.set-sel:focus{border-color:var(--accent)}
.sel-arr{position:absolute;right:1cqw;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;font-size:0.977cqw}
.check-lbl{display:flex;align-items:center;gap:.75cqw;cursor:pointer;font-size:1.035cqw;color:var(--desc)}
.check-lbl input{position:absolute;opacity:0;width:0;height:0}
.chkbox{flex:none;width:1.5cqw;height:1.5cqw;border:1px solid var(--border);border-radius:calc(var(--r) - .1cqw);background:#0e0b09;
  position:relative;transition:.16s}
.check-lbl input:checked + .chkbox{background:linear-gradient(180deg,var(--accent),#b98a3e);border-color:var(--accent)}
.check-lbl input:checked + .chkbox::after{content:"";position:absolute;left:35%;top:14%;width:26%;height:52%;
  border:solid #241c10;border-width:0 .16cqw .16cqw 0;transform:rotate(45deg)}
.modal-foot{display:flex;justify-content:flex-end;gap:.7cqw;padding:1.1cqw 1.4cqw;border-top:1px solid var(--border);background:rgba(0,0,0,.2)}
.btn-cancel,.btn-save{border:1px solid var(--border);cursor:pointer;font-family:var(--font-1);font-weight:700;font-size:1.035cqw;
  text-transform:uppercase;letter-spacing:.06cqw;padding:.7cqw 1.5cqw;border-radius:var(--r);transition:.18s;color:#cabf9f;background:transparent}
.btn-cancel:hover{color:var(--title);border-color:#6a6155}
.btn-save{color:#241c10;border-color:var(--accent);background:linear-gradient(180deg,var(--accent),#b98a3e)}
.btn-save:hover{filter:brightness(1.08)}

/* ================= ТОСТЫ ================= */
.toast-wrap{position:absolute;right:1.2cqw;bottom:16cqw;z-index:30;display:flex;flex-direction:column;gap:.6cqw;max-width:24cqw}
.toast{background:linear-gradient(180deg,rgba(36,31,28,.97),rgba(20,16,14,.97));border:1px solid var(--border);
  border-left:.25cqw solid var(--accent);border-radius:var(--r);padding:.8cqw 1cqw;box-shadow:0 .6cqw 1.6cqw -.4cqw rgba(0,0,0,.7);
  animation:tIn .28s ease}
@keyframes tIn{from{opacity:0;transform:translateX(1cqw)}to{opacity:1;transform:none}}
.t-title{font-family:var(--font-1);font-weight:700;font-size:0.977cqw;color:var(--title)}
.t-title i{color:var(--accent);margin-right:.3cqw}
.t-body{font-size:0.897cqw;color:var(--muted);margin-top:.2cqw}

@media (max-width:820px){
  nav,.lang-sw{display:none}
  .hero{padding-left:4cqw}.logo-c{width:46%}
}