#stage{isolation:isolate}
#ui{position:absolute;inset:0;top:0!important;left:0;right:0;bottom:0;box-sizing:border-box;display:grid;grid-template-rows:6% 54% 26% 14%;align-items:stretch;justify-items:center;gap:0;background:linear-gradient(90deg,rgba(4,3,10,.06),rgba(9,7,20,.30) 32%,rgba(9,7,20,.30) 68%,rgba(4,3,10,.06)),url('assets/menu_backdrop.jpg') center / cover no-repeat;color:#f8eac9;font-family:var(--wow-font);overflow:hidden;z-index:10;}
#ui.hidden{display:none!important}
#ui *{box-sizing:border-box}
.menu-heading{grid-row:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25em;align-self:stretch;text-align:center;pointer-events:none;text-shadow:0 3px 5px #000,0 0 20px #220d00}
.menu-kicker{font-size:.62em;letter-spacing:.35em;color:#d7b681;font-family:var(--wow-font);font-weight:700}
.menu-logo{font-size:2.72em;font-weight:900;letter-spacing:.06em;line-height:1.05;color:#ffe39a;-webkit-text-stroke:.45px #6c3718;text-shadow:0 2px #63360f,0 5px #100b10,0 0 22px #ca6322}
.menu-logo em{font-size:.65em;color:#ffbb54;font-style:normal}
.menu-divider{font-size:1em;color:#f5ab42;letter-spacing:.8em;text-shadow:0 0 16px orange}
.menu-modes{grid-row:2;width:30%;min-width:18em;max-width:23em;display:flex;flex-direction:column;justify-content:center;gap:.38em;align-self:center;padding:.65em 1em;background:linear-gradient(150deg,rgba(18,11,24,.93),rgba(18,14,28,.93));border:2px ridge #9d6b3c;box-shadow:0 0 0 3px #130c15,0 9px 28px #000b,0 0 30px #ed8e231a;clip-path:polygon(5% 0,95% 0,100% 9%,100% 91%,95% 100%,5% 100%,0 91%,0 9%);}
#ui .menu-button{width:100%;height:2.23em;position:relative;display:flex;align-items:center;justify-content:center;gap:.65em;background:linear-gradient(180deg,#3b343f,#17131f 45%,#271a20);border:2px solid #b88a4a;border-radius:.3em;box-shadow:inset 0 1px #ffe4a85c,0 3px 2px #0009;color:#fbe6af;font:900 .93em var(--wow-font);letter-spacing:.05em;text-shadow:0 1px 3px #000;cursor:pointer;transition:filter .12s,transform .12s}
#ui .menu-button.primary,#ui .menu-button:hover{background:linear-gradient(180deg,#bf4c15,#7b190d 48%,#3e0a0a);border-color:#ffd277;box-shadow:inset 0 1px #fff5c2,0 0 14px #ff8c2677,0 3px 3px #000b;color:#fff4cf}
#ui .menu-button:active,#ui .menu-start:active{transform:translateY(2px)}
.menu-symbol{font-size:1.25em;color:#ffd188}
.menu-config{grid-row:3;align-self:stretch;width:94%;margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1.15fr .95fr;gap:12px;align-items:start}
.config-section{position:relative;padding:18px 7px 7px;background:linear-gradient(180deg,#0f0c14e6,#0a0810f0);border:1px solid #6e5233;border-radius:4px;box-shadow:0 0 0 1px #000,inset 0 0 0 1px #2a2018,0 6px 18px #000a;min-width:0}
.config-section h2{position:absolute;left:50%;top:-9px;transform:translateX(-50%);margin:0;padding:1px 12px;background:linear-gradient(#2b1f17,#140e0b);border:1px solid #8b6437;border-radius:3px;color:#f3cf86;font:700 10px var(--wow-font);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;text-shadow:0 1px 2px #000}
.config-cards{display:flex;height:calc(100% - 1.7em);gap:.35em}
#ui .option-card{flex:1;display:flex;min-width:0;align-items:center;justify-content:flex-end;flex-direction:column;gap:.22em;padding:.3em .15em;background:#17131edb;border:2px solid #66513b;border-radius:.35em;color:#efdbb5;font:bold .7em var(--wow-font);cursor:pointer;box-shadow:inset 0 0 9px #0009}
#ui .option-card.selected,#ui .option-card:hover{border-color:#ffc65c;background:linear-gradient(#5b3021,#21141d);box-shadow:0 0 13px #faab486b,inset 0 0 13px #ed862236;color:#fff1ba}
.option-card img{max-width:85%;height:65%;object-fit:contain;min-height:0;flex:1}
.option-card.arena-card img{width:95%;height:67%;object-fit:cover;border-radius:.2em}
.option-card .keycaps{margin:auto;font-family:var(--wow-font);font-weight:900;font-size:1.8em;line-height:1.2;text-shadow:0 0 5px #9b681d}
.difficulty-choices{display:flex;flex-direction:column;height:calc(100% - 1.75em);gap:.32em}
#ui .difficulty-btn{flex:1;padding:0 .1em;border:1px solid #8b6437;background:#1b1820;color:#e0c38e;border-radius:.3em;font:900 .78em var(--wow-font);cursor:pointer;white-space:nowrap}
#ui .difficulty-btn.selected,#ui .difficulty-btn:hover{background:linear-gradient(#68311f,#2c1716);border-color:#ffc95f;color:#fff0b6;box-shadow:inset 0 0 8px #fb9a3050}
.menu-footer{grid-row:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25em;align-self:stretch}
#ui .menu-start{height:2.12em;min-width:30%;padding:0 1.45em;background:linear-gradient(180deg,#f87820,#9a190d 45%,#460607);border:3px ridge #ffd071;border-radius:.3em;box-shadow:0 0 17px #ff79297f,inset 0 2px #ffe4ab,0 3px 5px #000;color:#fff4bf;text-shadow:0 2px 3px #491009;font:900 1.2em var(--wow-font);letter-spacing:.06em;cursor:pointer}
#ui .menu-start:hover{filter:brightness(1.2)}
.menu-hint{font:600 .54em var(--wow-font);color:#e5d5b4;text-shadow:0 2px 3px #000}
#ui #status{position:absolute;bottom:.2em;right:1em;left:1em;font:.8em var(--wow-font);pointer-events:none;color:#ffe7a8;text-shadow:0 2px 4px #000}
.compat-selects{display:none!important}
#ui .menu-dialog{position:absolute;inset:0;background:rgba(2,2,9,.86);display:flex;align-items:center;justify-content:center;z-index:5;backdrop-filter:blur(5px)}
#ui .menu-dialog.hidden{display:none!important}
.dialog-body{width:42%;padding:1.4em;display:flex;flex-direction:column;gap:.7em;background:linear-gradient(135deg,#211622,#100d16);border:3px ridge #c49b57;box-shadow:0 0 32px #000;border-radius:.7em;text-align:center}
.dialog-body h2{margin:0;color:#ffdb90;font-size:1.6em}
.dialog-body p{margin:0;color:#e8d5b9;font: .9em/1.4 var(--wow-font)}
.join-row{display:flex;align-items:stretch;gap:.5em}
#ui .join-row input{min-width:0;width:32%;font:900 1.1em var(--wow-font);letter-spacing:.2em;text-transform:uppercase;text-align:center;border:2px solid #c99a58;background:#100f19;color:white;border-radius:.3em}
#ui .join-row .menu-button{flex:1;height:auto}
#ui .dialog-close{align-self:center;border:1px solid #b28e55;background:#211b25;color:#edca94;border-radius:.2em;padding:.45em 1.1em;cursor:pointer;font:700 .9em var(--wow-font)}
#ui button:focus-visible{outline:3px solid #fceca7;outline-offset:2px}


/* версия игры */
#ui .menu-version{position:absolute;right:1.1em;bottom:.7em;background:#120f19c4;border:1px solid #8b6437;border-radius:.3em;color:#e0c38e;font:bold .62em var(--wow-font);letter-spacing:.04em;padding:.25em .6em;cursor:pointer;z-index:2}
#ui .menu-version:hover{border-color:#ffc95f;color:#fff0b6}
#ui .version-list{max-height:46vh;overflow:auto;text-align:left;font-size:.78em;line-height:1.4;padding-right:.4em}
#ui .version-list h3{margin:.7em 0 .2em;color:#ffd277;font-size:1.05em}
#ui .version-list h3 small{color:#b9a27a;font-weight:normal;margin-left:.4em}
#ui .version-list ul{margin:0;padding-left:1.2em}
.ver-toast{position:fixed;left:50%;top:14px;transform:translate(-50%,-150%);background:#2a1414ee;border:2px solid #ffb35c;color:#ffe9c2;font:14px/1.4 var(--wow-font);padding:10px 16px;border-radius:6px;z-index:99;transition:transform .3s;text-align:center}
.ver-toast.show{transform:translate(-50%,0)}
/* громкость звуков и музыки в настройках */
.sound-settings{display:flex;flex-direction:column;gap:.55em;margin:.3em auto;padding:.7em 1em;border:1px solid #c49b5766;border-radius:.5em;background:#0007;width:85%}
.sound-settings label{display:flex;align-items:center;gap:.7em;justify-content:space-between;color:#f0dcae;font-weight:700}
.sound-settings input[type=range]{flex:1;accent-color:#c49b57}
.sound-settings span{min-width:3em;text-align:right;color:#fff}
.sound-settings .sound-mute{justify-content:center;font-weight:600}
.sound-settings small{color:#b9a98a;font-weight:400}
/* меню паузы во время боя */
#pauseMenu{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:12;font-family:var(--wow-font);color:#f8eac9}
#pauseMenu.hidden{display:none}
.pause-panel{width:430px;padding:20px 24px;display:flex;flex-direction:column;gap:11px;background:linear-gradient(135deg,#211622f2,#100d16f2);border:3px ridge #c49b57;border-radius:10px;box-shadow:0 0 40px #000;text-align:center}
.pause-panel h2{margin:0 0 4px;color:#ffe39a;letter-spacing:.12em;text-shadow:0 2px #63360f,0 0 16px #ca6322}
.pause-panel .sound-settings{width:100%;margin:0}
.pause-button{height:40px;background:linear-gradient(180deg,#3b343f,#17131f 45%,#271a20);border:2px solid #b88a4a;border-radius:5px;color:#fbe6af;font:900 15px var(--wow-font);letter-spacing:.05em;cursor:pointer}
.pause-button.primary,.pause-button:hover{background:linear-gradient(180deg,#bf4c15,#7b190d 48%,#3e0a0a);border-color:#ffd277;color:#fff4cf}
.pause-hint{margin:0;font-size:12px;color:#b9a98a;font-family:var(--wow-font)}

/* строки выбора в духе экрана выбора персонажа MMO: маленький значок, имя, подпись */
.pick-list{display:flex;flex-direction:column;gap:4px}
#ui .pick-row{position:relative;display:flex;align-items:center;gap:9px;width:100%;height:34px;padding:0 10px 0 5px;background:linear-gradient(90deg,#1c1620cc,#120e16cc);border:1px solid #3b2e22;border-radius:3px;color:#d8c39b;text-align:left;cursor:pointer;transition:background .12s,border-color .12s}
#ui .pick-row:hover{border-color:#8b6437;background:linear-gradient(90deg,#2a1e1ccc,#16101acc);color:#f4dfb0}
#ui .pick-row.selected{border-color:#d9a550;background:linear-gradient(90deg,#4a2a16e6,#1c1218e6 75%);color:#fff0c4;box-shadow:inset 3px 0 0 #ffc65c,0 0 10px #f0a04833}
.pick-row .pick-pic{flex:none;width:26px;height:26px;object-fit:cover;border:1px solid #8b6437;box-shadow:0 0 0 1px #000;background:#000}
.pick-row .pick-pic.round{border-radius:50%;background-size:160%;background-repeat:no-repeat}
.pick-row .pick-pic.wide{width:44px;height:24px;border-radius:2px}
.pick-row .pick-pic.pips{width:44px;display:flex;align-items:center;justify-content:center;font-size:11px;letter-spacing:1px;color:#c9a46a;background:#0b090e}
.pick-row.selected .pick-pic{border-color:#ffd277}
.pick-row.selected .pick-pic.pips{color:#ffd277}
.pick-text{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.pick-text b{font:700 11px var(--wow-font);letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick-text small{font:500 9.5px var(--wow-font);color:#9d8c72;white-space:nowrap}
.pick-row.selected .pick-text small{color:#d6b98a}

/* арены: кнопка целиком заполнена картинкой локации, текст на затемнении слева */
#ui .pick-row.arena-row{padding-left:12px;background:linear-gradient(90deg,rgba(6,4,8,.88) 0%,rgba(6,4,8,.55) 45%,rgba(6,4,8,.05) 100%),var(--arena-img) var(--arena-pos,center)/cover no-repeat;border-color:#4a3826;filter:saturate(.8) brightness(.85)}
#ui .pick-row.arena-row:hover{border-color:#a07a45;filter:none}
#ui .pick-row.arena-row.selected{background:linear-gradient(90deg,rgba(40,20,6,.85) 0%,rgba(20,10,4,.45) 45%,rgba(0,0,0,0) 100%),var(--arena-img) var(--arena-pos,center)/cover no-repeat;border-color:#ffc65c;filter:none;box-shadow:inset 3px 0 0 #ffc65c,0 0 12px #f0a04855}
#ui .pick-row.arena-row .pick-text b,#ui .pick-row.arena-row .pick-text small{text-shadow:0 1px 2px #000,0 0 6px #000}
#ui .pick-row.arena-row .pick-text small{color:#d9c7a4}
.pick-row .pick-pic.hero-rogue{background-color:#2a2416}

/* ===================== титульный экран WARFIGHT ===================== */
#ui[data-screen="title"]{background:url('assets/menu_title.jpg') center/cover no-repeat}
#ui[data-screen="title"] > :not(#titleScreen):not(.menu-dialog):not(#status){display:none!important}
#ui:not([data-screen="title"]) #titleScreen{display:none}
#titleScreen{position:absolute;left:50%;top:262px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:16px;padding:22px 34px;
  background:radial-gradient(ellipse at center,rgba(10,4,24,.62) 0%,rgba(10,4,24,.38) 55%,rgba(10,4,24,0) 75%)}
/* кнопка: тёмный обсидиан в серебряной гранёной рамке, как вывеска WARFIGHT; по краям розовые кристаллы */
#ui .war-btn{position:relative;width:318px;height:54px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.85)) drop-shadow(0 0 6px rgba(186,90,255,.25));transition:filter .15s,transform .08s}
#ui .war-btn::before,#ui .war-btn::after{content:'';position:absolute;inset:0;clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,18px 100%,0 50%)}
#ui .war-btn::before{background:linear-gradient(180deg,#f3eefc 0%,#a99cc4 18%,#4c4166 48%,#b9acd6 70%,#5a4d78 100%)}            /* серебряная рамка */
#ui .war-btn::after{inset:3px;clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,16px 100%,0 50%);
  background:radial-gradient(ellipse at 50% 120%,rgba(214,60,255,.45),rgba(214,60,255,0) 60%),linear-gradient(180deg,#2b1747 0%,#140a26 50%,#0b0616 100%);
  box-shadow:inset 0 0 0 1px rgba(255,120,240,.35)}
#ui .war-btn span{position:relative;z-index:2;font:700 19px var(--wow-font);letter-spacing:.16em;padding-left:.16em;
  background:linear-gradient(180deg,#ffffff 10%,#e6d9ff 45%,#a78fe0 75%,#d7c6ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 #1a0b2e) drop-shadow(0 0 6px rgba(205,120,255,.55))}
/* при наведении по нижней грани пробегает магента-подсветка, как у вывески */
#ui .war-btn span::before{content:'';position:absolute;left:-70px;right:-70px;bottom:-14px;height:2px;z-index:-1;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,90,230,.9),transparent);transition:opacity .15s}
#ui .war-btn .gem{position:absolute;z-index:3;top:50%;width:14px;height:14px;margin-top:-7px;transform:rotate(45deg);
  background:linear-gradient(135deg,#ffd0e6 0%,#e2407f 40%,#7c0f3a 100%);border:1px solid #f5e9ff;box-shadow:0 0 6px rgba(255,70,140,.7)}
#ui .war-btn .gem:first-child{left:-4px}
#ui .war-btn .gem:last-child{right:-4px}
#ui .war-btn:hover,#ui .war-btn:focus-visible{outline:none;background:none;border:0;filter:drop-shadow(0 4px 6px rgba(0,0,0,.85)) drop-shadow(0 0 14px rgba(226,80,255,.85))}
#ui .war-btn:hover::after,#ui .war-btn:focus-visible::after{background:radial-gradient(ellipse at 50% 120%,rgba(240,90,255,.7),rgba(214,60,255,0) 65%),linear-gradient(180deg,#3a1d60 0%,#1c0d34 50%,#0f0720 100%)}
#ui .war-btn:hover span::before,#ui .war-btn:focus-visible span::before{opacity:1}
#ui .war-btn:hover .gem,#ui .war-btn:focus-visible .gem{box-shadow:0 0 12px rgba(255,90,170,1),0 0 3px #fff}
#ui .war-btn:active{transform:translateY(2px)}

/* ===================== экран подготовки к бою ===================== */
#ui .menu-modes{display:none!important}
.setup-title{grid-row:1/3;align-self:start;margin-top:22px;padding:6px 34px;font:700 26px var(--wow-font);letter-spacing:.2em;color:#f1e6ff;
  background:linear-gradient(90deg,rgba(20,10,36,0),rgba(20,10,36,.82) 20%,rgba(20,10,36,.82) 80%,rgba(20,10,36,0));
  text-shadow:0 2px 3px #000,0 0 14px rgba(200,110,255,.8);border-top:1px solid rgba(220,190,255,.35);border-bottom:1px solid rgba(220,190,255,.35);pointer-events:none}
#ui .setup-back{position:absolute;left:18px;top:18px;z-index:3;height:32px;padding:0 16px;border:1px solid #a99cc4;border-radius:3px;cursor:pointer;
  background:linear-gradient(180deg,#2b1747,#120a22);color:#e6d9ff;font:700 13px var(--wow-font);letter-spacing:.1em;box-shadow:0 2px 6px #000a}
#ui .setup-back:hover{border-color:#f0b8ff;color:#fff;box-shadow:0 0 10px rgba(226,80,255,.7)}
.start-row{display:flex;gap:14px;justify-content:center}
#ui[data-screen="bot"] .for-friend,#ui[data-screen="friend"] .for-bot{display:none}
#ui[data-screen="friend"] .config-section[aria-label="Сложность"]{display:none}
#ui[data-screen="friend"] .menu-config{grid-template-columns:1fr 1fr 1.15fr;width:76%}

/* ===================== экран подготовки в стиле WARFIGHT ===================== */
#ui[data-screen="bot"],#ui[data-screen="friend"]{
  background:radial-gradient(ellipse at 50% 65%,rgba(10,4,22,.2) 0%,rgba(6,2,14,.62) 78%),linear-gradient(rgba(8,3,18,.1),rgba(8,3,18,.45)),url('assets/menu_title.jpg') center/cover no-repeat;
  grid-template-rows:205px 44px 156px 1fr}
#ui[data-screen="bot"] .setup-title,#ui[data-screen="friend"] .setup-title{grid-row:1;align-self:end;margin:0 0 4px;padding:4px 46px;font-size:20px;letter-spacing:.28em;color:#efe4ff;
  background:linear-gradient(90deg,rgba(26,12,46,0),rgba(26,12,46,.9) 22%,rgba(26,12,46,.9) 78%,rgba(26,12,46,0));
  border-top:1px solid rgba(230,210,255,.45);border-bottom:1px solid rgba(230,210,255,.45);text-shadow:0 2px 3px #000,0 0 12px rgba(220,110,255,.85)}
#ui[data-screen="bot"] .menu-config,#ui[data-screen="friend"] .menu-config{grid-row:3}
/* панели: тёмный фиолетовый с серебряной кромкой */
#ui .config-section{background:linear-gradient(180deg,rgba(28,14,48,.92),rgba(12,6,24,.95));border:1px solid #8f82b4;
  box-shadow:0 0 0 1px #07030f,inset 0 0 0 1px rgba(214,150,255,.18),0 6px 18px rgba(0,0,0,.7),0 0 16px rgba(170,80,255,.18)}
#ui .config-section h2{background:linear-gradient(180deg,#f1ecfb 0%,#a99cc4 30%,#4c4166 60%,#8d80ad 100%);border:1px solid #f3edff;color:#1a0b2e;
  text-shadow:0 1px 0 rgba(255,255,255,.45);font-weight:900;letter-spacing:.18em;box-shadow:0 0 8px rgba(214,110,255,.45)}
#ui .pick-row{background:linear-gradient(90deg,rgba(40,22,66,.85),rgba(18,10,32,.85));border-color:#3d2d5c;color:#d9cdf2}
#ui .pick-row:hover{border-color:#b49ce0;background:linear-gradient(90deg,rgba(62,32,96,.9),rgba(26,12,44,.9));color:#fff}
#ui .pick-row.selected{border-color:#f0c8ff;background:linear-gradient(90deg,rgba(132,40,160,.75),rgba(40,16,66,.9) 75%);color:#fff;
  box-shadow:inset 3px 0 0 #ff6fd8,0 0 12px rgba(230,90,255,.45)}
.pick-row .pick-pic{border-color:#a99cc4}
.pick-row.selected .pick-pic{border-color:#ffd6f5}
.pick-text small{color:#a497c4}
.pick-row.selected .pick-text small{color:#f0dcff}
.pick-row .pick-pic.pips{color:#c9a8f0;background:#0d0619}
.pick-row.selected .pick-pic.pips{color:#ff9fe6}
#ui .pick-row.arena-row{border-color:#4a3870}
#ui .pick-row.arena-row:hover{border-color:#b49ce0}
#ui .pick-row.arena-row{background:linear-gradient(90deg,rgba(12,5,26,.9) 0%,rgba(12,5,26,.55) 45%,rgba(12,5,26,.05) 100%),var(--arena-img) var(--arena-pos,center)/cover no-repeat}
#ui .pick-row.arena-row.selected{border-color:#f0c8ff;background:linear-gradient(90deg,rgba(90,24,120,.85) 0%,rgba(40,10,60,.45) 45%,rgba(0,0,0,0) 100%),var(--arena-img) var(--arena-pos,center)/cover no-repeat;
  box-shadow:inset 3px 0 0 #ff6fd8,0 0 12px rgba(230,90,255,.5)}
#ui .pick-row.arena-row .pick-text small{color:#e2d6f7}
/* кнопки старта — те же, что в главном меню */
.menu-footer{gap:6px}
.start-row{gap:22px}
#ui .war-btn.wide{width:372px}
#ui .menu-hint{color:#cbbde6;font-size:11px;text-shadow:0 1px 2px #000,0 0 8px rgba(0,0,0,.9)}
#ui .setup-back{background:linear-gradient(180deg,#3a2160,#160b2a);border-color:#cfc3ea}
#ui .menu-version{background:linear-gradient(180deg,#3a2160,#160b2a)!important;border-color:#cfc3ea!important;color:#efe4ff!important}
/* окна меню (настройки, по сети, версии) — в том же фиолетово-серебряном стиле */
#ui .menu-dialog{background:rgba(6,2,16,.82)}
#ui .dialog-body{background:linear-gradient(160deg,#2a1546,#0f0820);border:2px solid #b9acd6;box-shadow:0 0 0 1px #07030f,0 0 30px rgba(190,90,255,.35),0 10px 30px #000}
#ui .dialog-body h2{color:#f1e6ff;letter-spacing:.14em;text-shadow:0 2px 3px #000,0 0 12px rgba(220,110,255,.8)}
#ui .dialog-body p{color:#d9cdf2}
#ui .dialog-body .menu-button{background:linear-gradient(180deg,#3a2160,#160b2a);border:1px solid #b9acd6;color:#efe4ff;box-shadow:0 2px 6px #000a}
#ui .dialog-body .menu-button.primary,#ui .dialog-body .menu-button:hover{background:linear-gradient(180deg,#7a2c9e,#3a1460);border-color:#f0c8ff;color:#fff;box-shadow:0 0 12px rgba(230,90,255,.55)}
#ui .join-row input{border-color:#b9acd6;background:#0d0619;color:#fff}
#ui .sound-settings{border-color:rgba(185,172,214,.45);background:rgba(10,4,22,.6)}
#ui .sound-settings label{color:#e6d9ff}
#ui .sound-settings input[type=range]{accent-color:#d46cff}
#ui .dialog-body .dialog-close{background:linear-gradient(180deg,#3a2160,#160b2a);border:1px solid #b9acd6;color:#efe4ff}
#ui .dialog-body .dialog-close:hover{border-color:#f0c8ff;box-shadow:0 0 10px rgba(230,90,255,.6);color:#fff}
/* выбор геймпадом: подсвеченная кнопка */
#ui .pad-focus,#pauseMenu .pad-focus{outline:2px solid #ffd6f5!important;outline-offset:2px;box-shadow:0 0 16px rgba(230,90,255,.85)!important}
#ui .war-btn.pad-focus{outline:none!important;filter:drop-shadow(0 4px 6px rgba(0,0,0,.85)) drop-shadow(0 0 14px rgba(226,80,255,.95))}
/* выбор управления в настройках */
.control-choice{display:flex;align-items:center;justify-content:center;gap:10px;margin:.2em auto .4em}
.control-choice span{color:#e6d9ff;font-weight:700;letter-spacing:.06em;margin-right:4px}
#ui .control-choice button{height:34px;padding:0 16px;border:1px solid #6f5f96;border-radius:4px;background:linear-gradient(180deg,#26153f,#120a22);color:#cbbde6;font:700 13px var(--wow-font);letter-spacing:.06em;cursor:pointer}
#ui .control-choice button:hover{border-color:#cfc3ea;color:#fff}
#ui .control-choice button.selected{border-color:#f0c8ff;background:linear-gradient(180deg,#7a2c9e,#3a1460);color:#fff;box-shadow:0 0 12px rgba(230,90,255,.55)}
.control-help{min-height:3.2em}
/* подсказка про звук */
#soundHint{position:absolute;left:50%;top:94px;transform:translateX(-50%);z-index:30;max-width:92%;padding:6px 16px;border:1px solid #cfc3ea;border-radius:16px;
  background:rgba(22,10,40,.9);color:#f1e6ff;font:700 13px var(--wow-font);letter-spacing:.03em;cursor:pointer;box-shadow:0 0 14px rgba(200,100,255,.5);white-space:nowrap}
#soundHint:hover{border-color:#fff;box-shadow:0 0 18px rgba(230,120,255,.8)}
#soundHint.hidden{display:none}
#soundHint.menu-pos{top:auto;bottom:14px}

/* ---------- комната ожидания онлайн-боя (v5.8) ---------- */
#ui .lobby-body{width:min(860px,80%);position:relative;gap:.65em;padding:1.2em 1.4em 1em}
.lobby-code{display:flex;align-items:center;justify-content:center;gap:.7em;color:#d9cdf2;font:.85em var(--wow-font)}
.lobby-code b{font-size:1.9em;letter-spacing:.32em;color:#fff3d0;text-shadow:0 0 12px rgba(220,110,255,.8),0 2px 2px #000;padding-left:.32em}
#ui .lobby-mini,#ui .lobby-leave{background:rgba(20,10,36,.8);border:1px solid #7d6aa6;border-radius:4px;color:#e9dcff;font:.8em var(--wow-font);padding:.35em .8em;cursor:pointer}
#ui .lobby-mini:hover,#ui .lobby-leave:hover{border-color:#e2c6ff;color:#fff;background:rgba(60,26,96,.9)}
.lobby-cards{display:flex;align-items:stretch;gap:.8em}
.lobby-card{flex:1;display:flex;flex-direction:column;gap:.5em;padding:.7em .8em;border:1px solid #5e4c86;border-radius:6px;background:linear-gradient(160deg,rgba(40,20,66,.75),rgba(12,6,24,.85));transition:border-color .2s,box-shadow .2s;min-height:15.5em}
.lobby-card.ready{border-color:#7dff9a;box-shadow:0 0 0 1px #0a2a12,0 0 16px rgba(110,255,150,.35)}
.lobby-card h3{margin:0;color:#f1e6ff;font:bold .95em var(--wow-font);letter-spacing:.14em;text-align:left}
.lobby-card h3 small{color:#a593c9;font-weight:normal;letter-spacing:0}
.lobby-hero{display:flex;align-items:center;gap:.7em;text-align:left}
.lobby-hero b{display:block;color:#fff0c4;font:bold 1.05em var(--wow-font);letter-spacing:.06em}
.lobby-hero small{color:#bfb0dd;font:.8em var(--wow-font)}
.lobby-pic{flex:none;width:58px;height:58px;border-radius:50%;border:2px solid #d8b56a;box-shadow:0 0 0 2px #000,0 0 12px rgba(220,110,255,.35);background:#0b0910 no-repeat;background-size:160%}
.lobby-card.empty .lobby-pic{border-color:#4a3d63;box-shadow:none}
.lobby-heroes{gap:4px}
.lobby-ctrl{margin:0!important;justify-content:flex-start}
.lobby-state{margin-top:auto;font:bold .9em var(--wow-font);letter-spacing:.12em;color:#bfb0dd}
.lobby-card.ready .lobby-state{color:#8dffa6;text-shadow:0 0 8px rgba(110,255,150,.6)}
.lobby-wait{flex:1;display:flex;flex-direction:column;justify-content:center;color:#d9cdf2;font:.95em/1.5 var(--wow-font)}
.lobby-wait small{color:#9d8cc0}
.lobby-card.empty .lobby-wait{animation:lobbyPulse 1.6s ease-in-out infinite}
@keyframes lobbyPulse{50%{opacity:.45}}
.lobby-vs{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4em;min-width:4.2em}
.lobby-vs span{font:bold 1.7em var(--wow-font);color:#ffdb90;text-shadow:0 0 12px rgba(255,140,60,.7),0 2px 2px #000}
.lobby-vs small{color:#d9cdf2;font:.75em var(--wow-font);white-space:nowrap}
.lobby-vs small i{font-style:normal}
.lobby-arenas{display:flex;align-items:center;gap:.7em}
.lobby-arenas>span{flex:none;width:9.5em;text-align:left;color:#bfb0dd;font:.78em/1.3 var(--wow-font)}
.lobby-arenas>div{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
#ui .lobby-arena{position:relative;height:40px;border:1px solid #4a3d63;border-radius:4px;background:#000 var(--arena-img) var(--arena-pos)/cover no-repeat;cursor:pointer;overflow:hidden;padding:0}
#ui .lobby-arena span{position:absolute;inset:auto 0 0 0;padding:2px 4px;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);color:#fff0c4;font:.72em var(--wow-font);text-align:left}
#ui .lobby-arena.selected{border-color:#ffd277;box-shadow:0 0 0 1px #000,0 0 10px rgba(255,200,100,.5)}
#ui .lobby-arena:disabled{cursor:default;filter:saturate(.55) brightness(.75)}
#ui .lobby-arena.selected:disabled{filter:none}
.lobby-status{min-height:1.4em}
.lobby-actions{display:flex;justify-content:center}
#ui .lobby-actions .war-btn{min-width:15em}
#ui .lobby-actions .war-btn:disabled{opacity:.45;cursor:default}
#ui .lobby-actions .war-btn.on span{color:#9dffb0}
#ui .lobby-leave{align-self:center}
.lobby-count{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(6,2,16,.55);border-radius:.7em;font:bold 7em var(--wow-font);color:#fff3b0;text-shadow:0 0 30px rgba(255,150,60,.9),0 6px 6px #000;pointer-events:none}
.lobby-count.hidden{display:none}