/* ==========================================================================
   UMBRA — светлая тема «Небесная арена» (патч 129)
   ==========================================================================
   Подключается после css/style.css и перекрашивает всё, что вне боя:
   вход, вкладки нижней навигации (Магазин · Герой · Данжи · PvP · Сюжет),
   окна и списки. Экран боя (#screen-battle), новелла (#novel) и обучение
   в бою остаются в прежнем тёмном стиле — для них ниже возвращаются
   старые цвета.
   ========================================================================== */
#app{
  --void:#EAF4FF; --void-2:#DDEBFA; --panel:#FFF9EE; --panel-2:#F5E8CC; --line:#E3CFA5;
  --violet:#3B8BFF; --violet-2:#2468D8; --violet-bright:#8FC2FF; --magenta:#FF8A3D;
  --accent2:#2FB6E8; --gold:#F5B52A; --gold-2:#D9921A;
  --text:#3A2E22; --text-dim:#7A6853;
  --ink:#3A2E22; --ink-2:#7A6853; --cream:#FFF9EE; --cream-2:#F6EAD0; --edge:#E3CFA5;
  --slate:#2F3D58; --slate-2:#212D45; --blue:#3B8BFF; --blue-2:#1F63D6; --green:#3DBE5A;
  --nav-h:74px;
  background:linear-gradient(180deg,#7EC3FF 0%,#BFE2FF 38%,#EAF4FF 70%,#F7FBFF 100%);
  font-family:'Rubik','Inter',sans-serif;
}
/* бой, новелла и обучение в бою — прежняя тёмная палитра */
#screen-battle,#screen-result,#screen-dialogue,#novel,.tutOverlay,#cutsceneOverlay{
  --void:#0A0714; --void-2:#161029; --panel:#1E1836; --panel-2:#2A2247; --line:#4A3E7A;
  --violet:#9D5CFF; --violet-2:#7C3AED; --violet-bright:#C4A0FF; --magenta:#D946EF;
  --accent2:#5EE1FF; --gold:#FFD666; --gold-2:#D4AF37; --text:#F3F0FF; --text-dim:#B3A9D4;
  font-family:'Inter',sans-serif;
}
#screen-battle,#screen-result,#screen-dialogue{background:radial-gradient(ellipse at 50% 0%,#191333 0%,#0A0912 70%);}
#app h1,#app h2,#app h3{font-family:'Rubik','Inter',sans-serif;font-weight:800;letter-spacing:.2px;}
#screen-battle h2,#screen-result h2,#novel h2{font-family:'Cinzel',serif;}

/* ---------------------------------------------------------------- кнопки */
#app .btn:not(:is(#screen-battle,#screen-result,#screen-dialogue) *){font-family:'Rubik','Inter',sans-serif;font-weight:700;color:#fff;clip-path:none;border-radius:14px;
  background:linear-gradient(180deg,#4F6A92,#34486A);border:2px solid #22324F;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.25),0 3px 0 #1A2740,0 6px 12px rgba(30,50,90,.25);text-shadow:0 1px 0 rgba(0,0,0,.35);}
#app .btn:active:not(:is(#screen-battle,#screen-result,#screen-dialogue) *){transform:translateY(2px);box-shadow:inset 0 2px 0 rgba(255,255,255,.2),0 1px 0 #1A2740;}
#app .btn.primary:not(:is(#screen-battle,#screen-result,#screen-dialogue) *){animation:none;background:linear-gradient(180deg,#FFCF4A,#F29A12);border-color:#B86A06;color:#4A2A00;text-shadow:0 1px 0 rgba(255,255,255,.45);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 3px 0 #A35A00,0 8px 16px rgba(200,120,10,.35);}
#app .btn.ghost:not(:is(#screen-battle,#screen-result,#screen-dialogue) *){background:transparent;border-color:transparent;box-shadow:none;color:var(--ink-2);text-shadow:none;}
#app .btn:disabled:not(:is(#screen-battle,#screen-result,#screen-dialogue) *),#app .btn[disabled]:not(:is(#screen-battle,#screen-result,#screen-dialogue) *){filter:grayscale(.7);opacity:.6;}

/* -------------------------------------------------------- нижняя навигация */
.navBar{position:absolute;left:0;right:0;bottom:0;z-index:25;display:none;grid-template-columns:repeat(5,1fr);align-items:end;
  height:calc(var(--nav-h) + max(env(safe-area-inset-bottom, 0px), var(--safe-bottom, 0px)));
  padding:0 6px max(env(safe-area-inset-bottom, 0px), var(--safe-bottom, 0px));
  background:linear-gradient(180deg,#3A4A68 0%,#253350 100%);border-top:2px solid #5D7299;
  box-shadow:0 -6px 18px rgba(20,35,70,.28),inset 0 1px 0 rgba(255,255,255,.18);border-radius:18px 18px 0 0;}
#app[data-nav="hero"] .navBar,#app[data-nav="shop"] .navBar,#app[data-nav="dungeons"] .navBar,#app[data-nav="pvp"] .navBar,#app[data-nav="story"] .navBar{display:grid;}
.navBtn{position:relative;height:var(--nav-h);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 2px 6px;
  background:none;border:0;cursor:pointer;color:#DCE6F7;font:700 12px 'Rubik','Inter',sans-serif;transition:transform .15s;}
.navBtn .navIco{width:40px;height:40px;background-size:contain;background-repeat:no-repeat;background-position:center;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35));transition:transform .18s;}
.navBtn .navLbl{text-shadow:0 1px 0 rgba(0,0,0,.4);white-space:nowrap;}
.navBtn::before{content:'';position:absolute;inset:6px 3px 4px;border-radius:14px;opacity:0;transition:opacity .15s;
  background:linear-gradient(180deg,#5AA7FF,#2A6BD9);border:2px solid #9ED0FF;box-shadow:0 0 14px rgba(90,170,255,.7),inset 0 2px 0 rgba(255,255,255,.35);}
.navBtn > *{position:relative;}
.navBtn.active{color:#fff;transform:translateY(-8px);}
.navBtn.active::before{opacity:1;inset:-2px 2px 10px;}
.navBtn.active .navIco{transform:scale(1.12);}
.navBtn.navCenter .navIco{width:46px;height:46px;}
.navBtn .navDot{position:absolute;top:8px;right:16%;width:11px;height:11px;border-radius:50%;background:#FF4D4D;border:2px solid #fff;}
/* иконки навигации — объёмные SVG в стиле карточек */
.ico-shop{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FF7A59'/%3E%3Cstop offset='1' stop-color='%23D9412B'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23C98A55'/%3E%3Cstop offset='1' stop-color='%238A5A32'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='10' y='30' width='44' height='24' rx='3' fill='url(%23b)' stroke='%235A3618' stroke-width='2'/%3E%3Crect x='24' y='38' width='16' height='16' rx='2' fill='%23F7E3C0' stroke='%235A3618' stroke-width='2'/%3E%3Cpath d='M6 30 14 12h36l8 18z' fill='url(%23a)' stroke='%237A1E12' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M17 12 14 30M26 12l-2 18M38 12l2 18M47 12l3 18' stroke='%23FFF1DD' stroke-width='3.5'/%3E%3Cpath d='M6 30q5 6 10 0 5 6 10 0 6 6 12 0 5 6 10 0 5 6 10 0' fill='%23FFF1DD' stroke='%237A1E12' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='32' cy='9' r='3' fill='%23FFD44D' stroke='%23A06A00' stroke-width='1.5'/%3E%3C/svg%3E");}
.ico-hero{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F3F7FF'/%3E%3Cstop offset='1' stop-color='%238FA3C2'/%3E%3C/linearGradient%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FFE27A'/%3E%3Cstop offset='1' stop-color='%23D99211'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M32 5c13 0 22 10 22 24v15c0 5-4 9-9 11l-13 5-13-5c-5-2-9-6-9-11V29C10 15 19 5 32 5z' fill='url(%23a)' stroke='%23384A68' stroke-width='2.5'/%3E%3Cpath d='M30 4h4v26h-4z' fill='url(%23g)' stroke='%237A5000' stroke-width='1.5'/%3E%3Cpath d='M16 32h32v6c0 2-2 3-4 3H34l-2 8-2-8H20c-2 0-4-1-4-3z' fill='%23263552' stroke='%23384A68' stroke-width='2'/%3E%3Cpath d='M12 40c3 6 9 9 20 9s17-3 20-9' fill='none' stroke='url(%23g)' stroke-width='3'/%3E%3C/svg%3E");}
.ico-dungeon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CradialGradient id='p' cx='.5' cy='.55' r='.5'%3E%3Cstop offset='0' stop-color='%23FFFFFF'/%3E%3Cstop offset='.35' stop-color='%23B98CFF'/%3E%3Cstop offset='1' stop-color='%234B23B8'/%3E%3C/radialGradient%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23C9D1DE'/%3E%3Cstop offset='1' stop-color='%236E7A8F'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M8 58V28C8 14 19 4 32 4s24 10 24 24v30z' fill='url(%23s)' stroke='%23384356' stroke-width='2.5'/%3E%3Cpath d='M15 58V29c0-10 8-18 17-18s17 8 17 18v29z' fill='url(%23p)' stroke='%23312058' stroke-width='2'/%3E%3Cpath d='M25 26c4-6 12-6 15 0M22 36c6-9 17-9 21 0' fill='none' stroke='%23F4EBFF' stroke-width='2' stroke-linecap='round' opacity='.8'/%3E%3Cpath d='M27 4h10l-2 5h-6z' fill='%235CD3FF' stroke='%23215E8A' stroke-width='1.5'/%3E%3Crect x='4' y='56' width='56' height='5' rx='2' fill='%23596579'/%3E%3C/svg%3E");}
.ico-pvp{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FFFFFF'/%3E%3Cstop offset='1' stop-color='%23A9B6CC'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='%23303C55' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M8 6l8 0 30 30-6 6L8 14z' fill='url(%23b)'/%3E%3Cpath d='M56 6l-8 0-30 30 6 6 32-28z' fill='url(%23b)'/%3E%3Cpath d='M14 40l10 10-4 4-3-3-6 6-4-4 6-6-3-3z' fill='%23E0A93A'/%3E%3Cpath d='M50 40 40 50l4 4 3-3 6 6 4-4-6-6 3-3z' fill='%23E0A93A'/%3E%3C/g%3E%3C/svg%3E");}
.ico-story{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%234A9BFF'/%3E%3Cstop offset='1' stop-color='%231E57C2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M6 12c9-4 18-4 26 2v42c-8-6-17-6-26-2z' fill='%23FFF7E6' stroke='%23463626' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cpath d='M58 12c-9-4-18-4-26 2v42c8-6 17-6 26-2z' fill='%23FFF0D0' stroke='%23463626' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cpath d='M12 22c5-2 10-2 14 1M12 30c5-2 10-2 14 1M12 38c5-2 10-2 14 1M38 23c4-3 9-3 14-1M38 31c4-3 9-3 14-1' stroke='%23B9A07A' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M42 4h10v22l-5-4-5 4z' fill='url(%23c)' stroke='%23153E8A' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");}

/* экраны с нижней навигацией — место под неё */
#app[data-nav]:not([data-nav=""]) > .screen:not(.hidden){padding-bottom:calc(var(--nav-h) + 4px);}
#app[data-nav]:not([data-nav=""]) > .screen:not(.hidden) .contractFooter{bottom:calc(var(--nav-h) + max(env(safe-area-inset-bottom, 0px), var(--safe-bottom, 0px)));}

/* -------------------------------------------------------------- шапки экранов */
#app .subScreenHeader,.hubHeader{background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,248,236,.92));border-bottom:2px solid var(--edge);box-shadow:0 4px 12px rgba(80,110,160,.12);}
#app .subScreenHeader h2,.hubHeader h2{color:var(--ink);font-size:20px;}
.hubHeader{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;}
#screen-shop #btnShopBack,#screen-dungeons #btnDungeonsBack{display:none;}
#app .subScreenBody,.hubBody{color:var(--ink);}
#app .sectionTitle{color:var(--ink);font:800 15px 'Rubik','Inter',sans-serif;letter-spacing:.3px;text-transform:none;display:flex;align-items:center;gap:8px;}
#app .sectionTitle::before{content:'';width:6px;height:18px;border-radius:3px;background:linear-gradient(180deg,#FFCF4A,#F29A12);}
#app .title-tagline,#app .dungeonIntro{color:var(--ink-2);}

/* валюта */
#app .curBadge{background:linear-gradient(180deg,#3B4C6E,#283752);border:2px solid #1C2942;border-radius:20px;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 6px rgba(20,40,80,.25);padding:2px 12px 2px 4px;}
#app .curBadge b{color:#fff;font:700 14px 'Rubik','Inter',sans-serif;}

/* -------------------------------------------------------------- вкладка «Герой» */
.heroScreen{background:linear-gradient(180deg,#78BEFF 0%,#CDE8FF 50%,#F3E6CB 100%);}
.heroScreen .heroScroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;}
.heroScene{position:relative;width:100%;aspect-ratio:1159/1358;flex-shrink:0;}
.heroSceneBg{position:absolute;inset:0;background:url('../assets/ui/hero_arena.webp?v=129') center/100% 100% no-repeat;}
.heroSceneBg::after{content:'';position:absolute;left:0;right:0;bottom:0;height:16%;background:linear-gradient(180deg,rgba(243,230,203,0),#F3E6CB);}
.heroTopBar{position:absolute;top:6px;left:8px;right:8px;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:6px;}
#app .heroTopBar .nickBadge{background:linear-gradient(180deg,#FFFFFF,#F1E6D0);border:2px solid #CDB383;color:var(--ink);border-radius:14px;font:700 13px 'Rubik','Inter',sans-serif;padding:5px 10px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-shadow:0 2px 6px rgba(60,80,120,.2);}
#app .heroTopBar .helpBtn{background:linear-gradient(180deg,#FFFFFF,#E9DDC4);border:2px solid #CDB383;color:#6B5536;box-shadow:0 2px 6px rgba(60,80,120,.2);}
#app .heroTopBar .helpBtn svg{fill:#6B5536;}
.heroTopBar .currencyRow{gap:6px;}
.heroMightRow{position:absolute;top:44px;left:50%;transform:translateX(-50%);z-index:6;}
#app .mightRow{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(244,233,210,.92));border:2px solid #D9BE86;color:var(--ink);border-radius:20px;box-shadow:0 2px 8px rgba(60,80,120,.2);}
#app .mightRow b{color:#B5680A;text-shadow:none;}
#app .mightRow .mightLabel{color:var(--ink-2);}
#app .mightRow .mightIcon{background:linear-gradient(180deg,#FFCF4A,#F29A12);border-color:#B86A06;}
#app .mightRow .mightIcon svg{fill:#fff;}
/* боковые иконки */
.sideIcons{position:absolute;top:84px;z-index:6;display:flex;flex-direction:column;gap:8px;}
.sideIcons.left{left:6px;} .sideIcons.right{right:6px;}
#app .sideIcons .railBtn{position:relative;width:48px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:0;background:none;border:0;cursor:pointer;text-decoration:none;}
#app .sideIcons .railIcon{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,#FFFFFF,#E9DCC0 70%);border:2.5px solid #C9AE78;box-shadow:0 3px 0 #A88B55,0 5px 10px rgba(40,60,100,.25);}
#app .sideIcons .railIcon svg{width:22px;height:22px;}
#app .sideIcons .quests .railIcon svg{fill:#D9822B;} #app .sideIcons .clan .railIcon svg{fill:#3B7BE0;} #app .sideIcons .friends .railIcon svg{fill:#37A65A;}
#app .sideIcons .top .railIcon svg{fill:#E0A21C;} #app .sideIcons .tg .railIcon svg{fill:#2AA3E0;} #app .sideIcons .sup .railIcon svg{fill:#C2453A;}
#app .sideIcons .railLabel{font:700 10px 'Rubik','Inter',sans-serif;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.65),0 0 3px rgba(0,0,0,.4);white-space:nowrap;}
#app .sideIcons .railBadge{position:absolute;top:-2px;right:0;min-width:16px;height:16px;border-radius:8px;background:#FF4D4D;border:2px solid #fff;color:#fff;font:800 9px 'Rubik',sans-serif;display:flex;align-items:center;justify-content:center;}
/* сцена: охотник на пьедестале, снаряжение по бокам */
#heroStage.heroStage{position:absolute;inset:0;margin:0;padding:0;border-radius:0;background:none;box-shadow:none;border:0;overflow:visible;z-index:4;pointer-events:none;}
#heroStage.heroStage::before,#heroStage.heroStage::after{display:none;}
#heroStage > *{pointer-events:auto;}
#heroStage .heroBody{display:block;margin:0;position:absolute;inset:0;pointer-events:none;}
#heroStage .heroCol{position:absolute;top:27%;display:flex;flex-direction:column;gap:9px;pointer-events:auto;}
#heroStage .heroCol:first-child{left:60px;}
#heroStage .heroCol:last-child{right:60px;}
#heroStage .heroSlot{width:58px;height:58px;border-radius:12px;border:2.5px solid #C9AE78;background:linear-gradient(180deg,#FFFFFF,#EADDC2);
  box-shadow:0 3px 0 #A88B55,0 6px 10px rgba(40,60,100,.25);}
#heroStage .heroSlot:not(.empty){border-color:var(--rc,#C9AE78);background:linear-gradient(160deg,var(--rg,#fff),var(--rc,#ddd));box-shadow:0 3px 0 rgba(0,0,0,.25),0 0 10px var(--rg,transparent);}
#heroStage .heroSlot .hsIcon{width:46px;height:46px;}
#heroStage .heroSlot.empty .hsGlyph{stroke:#A8885A;width:24px;height:24px;}
#heroStage .heroSlot.empty .hsName{color:#7A6347;font:700 8.5px 'Rubik','Inter',sans-serif;}
#heroStage .heroSlot.empty .hsPlus{color:#3DBE5A;}
#heroStage .heroSlot .hsLvl{background:#2F3D58;}
#heroStage .heroCenter{position:absolute;left:50.04%;top:64.95%;width:56%;height:auto;display:block;transform:translate(-50%,-93%);pointer-events:none;}
#heroStage .heroCanvas{display:block;width:100%;max-width:none;height:auto;aspect-ratio:360/420;}
#heroStage .heroAura{display:none;}
#heroStage .heroPedestal{display:block;left:50%;bottom:4.5%;width:46%;height:5%;transform:translate(-50%,50%);border:0;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(40,50,70,.42),rgba(40,50,70,0) 70%);box-shadow:none;animation:none;}
#heroStage .heroSkill{right:-8%;top:auto;bottom:38%;pointer-events:auto;}
#heroStage .heroSkill span{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7);}
#heroStage .heroHead{position:absolute;left:50%;top:71.5%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:1px;
  min-width:170px;max-width:78%;padding:6px 18px 7px;border-radius:16px 16px 20px 20px;text-align:center;
  background:linear-gradient(180deg,rgba(47,61,88,.94),rgba(33,45,69,.96));border:2px solid #6A80A8;box-shadow:0 4px 12px rgba(20,35,70,.35);}
#heroStage .hhName{font:800 16px 'Rubik','Inter',sans-serif;color:#fff;justify-content:center;text-shadow:none;}
#heroStage .hhSub{color:#C9D6EE;font:500 11px 'Rubik','Inter',sans-serif;margin:0;}
#heroStage .hhMight{display:none;}
#heroStage .heroStats{position:absolute;left:8px;right:8px;top:82%;margin:0;gap:5px;}
#heroStage .hsStat.buff{padding:3px 8px;font-size:10.5px;line-height:1.25;}
#heroStage .hsStat{background:rgba(255,255,255,.88);border:2px solid #D9BE86;box-shadow:0 2px 6px rgba(60,80,120,.18);}
#heroStage .hsStat small{color:var(--ink-2);} #heroStage .hsStat b{color:var(--ink);}
#heroStage .hsStat.buff small{color:#5A49A8;}
/* панель под сценой */
.heroPanel{position:relative;margin-top:0;padding:6px 12px 14px;background:linear-gradient(180deg,#F3E6CB,#FBF4E6 40px);min-height:300px;}
#app .heroTabs{grid-template-columns:repeat(5,1fr);gap:5px;margin:0 0 10px;padding:6px;border-radius:16px;background:linear-gradient(180deg,#34446A,#24314D);
  border:2px solid #4D6290;box-shadow:0 4px 10px rgba(30,45,80,.3);position:sticky;top:0;z-index:5;}
#app .heroTab{flex-direction:column;gap:2px;padding:7px 2px;border-radius:11px;border:1.5px solid #4A5D86;background:linear-gradient(180deg,#3F5179,#2D3B5C);
  color:#DCE6F7;font:700 11px 'Rubik','Inter',sans-serif;}
#app .heroTab .htIco svg{width:18px;height:18px;}
#app .heroTab.active{color:#fff;background:linear-gradient(180deg,#5AA7FF,#2A6BD9);border-color:#9ED0FF;box-shadow:0 0 12px rgba(90,170,255,.6);}
#app .heroTab.soon i{top:-6px;right:2px;}
.heroAccount{margin-top:12px;}

/* -------------------------------------------------------- карточки и сетки */
#app .heroPanel,#app .subScreenBody,#app .hubBody{--card-bg:#FFFDF8;}
#app .gridCard,#app .card:not(#cardsRow .card){color:var(--ink);}
.hubScreen{background:linear-gradient(180deg,#9BD1FF 0%,#E3F1FF 45%,#F7EEDC 100%);}
.hubBody{flex:1;overflow-y:auto;padding:14px 14px 20px;display:flex;flex-direction:column;gap:12px;}
.hubNote{margin:0;text-align:center;font:500 12px 'Rubik','Inter',sans-serif;color:var(--ink-2);}

/* PvP */
.pvpCard{position:relative;border-radius:22px;padding:16px 16px 14px;text-align:center;overflow:hidden;
  background:linear-gradient(180deg,#FFFFFF,#F4E7CC);border:2.5px solid #D9BE86;box-shadow:0 6px 16px rgba(60,80,120,.18);}
.pvpCard::before{content:'';position:absolute;left:-30%;right:-30%;top:-60%;height:120%;background:radial-gradient(ellipse at 50% 70%,rgba(90,167,255,.35),transparent 65%);}
.pvpArt{position:relative;width:118px;height:118px;margin:2px auto 6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FFFFFF'/%3E%3Cstop offset='1' stop-color='%23A9B6CC'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='32' cy='32' r='29' fill='%23FFE7A6' stroke='%23D59B20' stroke-width='2'/%3E%3Cg stroke='%23303C55' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M13 11h7l26 26-5 5-28-25z' fill='url(%23b)'/%3E%3Cpath d='M51 11h-7L18 37l5 5 28-25z' fill='url(%23b)'/%3E%3Cpath d='M18 40l8 8-3 3-3-2-5 5-3-3 5-5-2-3z' fill='%23E0A93A'/%3E%3Cpath d='M46 40l-8 8 3 3 3-2 5 5 3-3-5-5 2-3z' fill='%23E0A93A'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;}
.pvpTitle{position:relative;font:800 22px 'Rubik','Inter',sans-serif;color:var(--ink);}
.pvpSub{position:relative;font:500 13px 'Rubik','Inter',sans-serif;color:var(--ink-2);margin-top:2px;}
.pvpRankWrap{position:relative;display:flex;justify-content:center;gap:8px;margin-top:12px;flex-wrap:wrap;}
.pvpRankWrap .pvpRankChip{position:static;}
.pvpMight{display:flex;align-items:center;gap:6px;padding:4px 12px;border-radius:14px;background:#2F3D58;color:#fff;font:600 12px 'Rubik',sans-serif;}
.pvpMight b{color:#FFD45A;font-size:15px;}
#app .pvpStats{position:relative;display:flex;justify-content:center;gap:12px;margin-top:12px;color:var(--ink-2);font:500 13px 'Rubik',sans-serif;}
#app .pvpStats b{color:var(--ink);}
#app .pvpGo{width:100%;padding:16px;font-size:20px;}
#app .pvpRating{width:100%;}

/* Сюжет */
.storyList{display:flex;flex-direction:column;gap:10px;}
.stCard{position:relative;display:flex;align-items:center;gap:12px;padding:8px;border-radius:18px;background:linear-gradient(180deg,#FFFFFF,#F6EAD0);
  border:2.5px solid #D9BE86;box-shadow:0 4px 10px rgba(60,80,120,.15);}
.stCard .stArt{width:74px;height:96px;flex-shrink:0;border-radius:12px;background:#BFD8F2 center/cover no-repeat;border:2px solid rgba(0,0,0,.12);}
.stCard .stInfo{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.stCard small{font:700 12px 'Rubik',sans-serif;color:var(--ink-2);text-transform:uppercase;letter-spacing:.6px;}
.stCard b{font:800 17px 'Rubik',sans-serif;color:var(--ink);}
.stCard .stState{font:800 11px 'Rubik',sans-serif;padding:4px 10px;border-radius:10px;color:#fff;background:#8A9AB5;white-space:nowrap;}
.stCard.done .stState{background:linear-gradient(180deg,#5CD279,#2F9F4E);}
.stCard.cur{border-color:#5AA7FF;box-shadow:0 0 0 3px rgba(90,167,255,.35),0 4px 12px rgba(60,80,120,.2);}
.stCard.cur .stState{background:linear-gradient(180deg,#5AA7FF,#2A6BD9);}
.stCard.lock,.stCard.soon{opacity:.75;}
.stCard.lock .stArt{filter:grayscale(1) brightness(.85);}
.stCard.soon .stArt{background:linear-gradient(160deg,#C8D6EA,#9DB1CF);}
.stCard.soon .stState{background:linear-gradient(180deg,#FFCF4A,#F29A12);color:#4A2A00;}
#app .storyGo{width:100%;padding:16px;font-size:20px;position:sticky;bottom:6px;z-index:2;}
#app .storyGo.allDone{filter:grayscale(.4);}

/* чат открывается иконкой «Чат» слева; старая полоска чата скрыта */
#app .heroScreen .chatStrip{display:none;}
#app .sideIcons .chat .railIcon svg{fill:#7A5BD6;}

/* ------------------------------------------------------- карточки в сетках */
#app .gridCard{background:linear-gradient(180deg,#FFFFFF,#F6EBD3);border:2px solid #DCC394;box-shadow:0 3px 8px rgba(70,90,130,.16);border-radius:14px;}
#app .gridCard.locked{opacity:.62;}
#app .gridCard.selected{border-color:#F29A12;box-shadow:0 0 0 2px rgba(242,154,18,.45),0 3px 10px rgba(70,90,130,.2);}
#app .gcName{color:var(--ink);font:700 11px 'Rubik','Inter',sans-serif;}
#app .gcTitle{color:var(--ink-2);opacity:1;}
#app .gcClass{color:#4B6FB0;}
#app .gcClassBonus{color:#B5680A;}
#app .gcLock{color:#B5680A;}
#app .gcSkill{color:#5E5140;}
#app .gcSkill b{color:#C2600A;}
#app .gcSetLine{color:#7A6853;} #app .gcSetLine.on{color:#1F9A57;text-shadow:none;}
#app .gcAbility{color:#1F9A57;} #app .gcEqPts{color:#5A49A8;}
#app .eqStats{color:#5E5140;}
#app .gcBtn{background:linear-gradient(180deg,#FFFFFF,#EEF3FB);border:1.5px solid #8FA8D0;color:#2F4570;font:600 9.5px 'Rubik','Inter',sans-serif;border-radius:8px;}
#app .gcBtn.ghost{background:transparent;border-color:#D7C29A;color:var(--ink-2);}
#app .gcBtn.upgradeBtn{background:linear-gradient(180deg,#5CD279,#2F9F4E);border-color:#1E7A3A;color:#fff;box-shadow:0 2px 0 #1E6A34;}
#app .gcProgress{background:rgba(60,50,40,.18);}
#app .gcProgressLabel{color:var(--ink);}
#app .classTab{font-family:'Rubik','Inter',sans-serif;background:#fff;border:2px solid #D9C49C;color:var(--ink-2);}
#app .classTab.active{background:linear-gradient(180deg,#5AA7FF,#2A6BD9);border-color:#2A6BD9;color:#fff;box-shadow:0 2px 8px rgba(42,107,217,.35);}
#app .classTab.special{border-color:#E9C26A;color:#B5680A;}
#app .classTab.special.active{background:linear-gradient(180deg,#FFCF4A,#F29A12);border-color:#B86A06;color:#4A2A00;}
#app .contractFooter{background:linear-gradient(180deg,rgba(247,238,220,0),#F7EEDC 40%);}
#app .chestCard{background:linear-gradient(180deg,#FFFFFF,#F6EBD3);border:2px solid #DCC394;box-shadow:0 4px 10px rgba(70,90,130,.15);border-radius:16px;}
#app .chestCard .chName{font:800 15px 'Rubik','Inter',sans-serif;color:var(--ink);}
#app .chestCard .chDesc{color:var(--ink-2);}
#app .chestCard .chCost{color:var(--ink);font-weight:700;}
#app .keyCard{background:linear-gradient(180deg,#FFFFFF,#E9F1FC);border:2px solid #C5D5EC;box-shadow:0 3px 8px rgba(70,90,130,.15);}
#app .keyCard .keyCount{color:var(--ink);text-shadow:none;font-family:'Rubik',sans-serif;}
#app .keyCard.empty .keyArt{filter:grayscale(1) brightness(.9) opacity(.55);}
#app .keyCard.empty .keyCount{color:var(--ink-2);}
#app .sectionHead{color:var(--ink);font-family:'Rubik','Inter',sans-serif;font-weight:800;}

/* ------------------------------------------------------------ экран входа */
#app > #screen-login{justify-content:flex-start;padding:0 0 24px;overflow-y:auto;background:#BFE2FF;}
#app > #screen-login::before{background:url('../assets/ui/hero_arena.webp?v=129') 50% 0/cover no-repeat;animation:none;opacity:1;}
#app > #screen-login::after{content:'';position:fixed;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(191,226,255,0) 30%,rgba(247,238,220,.92) 70%,#F7EEDC);}
.loginHero{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding-top:calc(13vh + max(env(safe-area-inset-top, 0px), var(--safe-top, 0px)));}
#app #screen-login .loginGlyph{display:none;}
#app #screen-login h1{font:900 54px 'Rubik','Inter',sans-serif;letter-spacing:4px;color:#fff;background:none;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-stroke:3px #2A4E8C;paint-order:stroke fill;text-shadow:0 5px 0 #1C3767,0 10px 20px rgba(20,50,110,.35);}
#app #screen-login .sub{display:inline-block;margin:6px 0 0;padding:4px 14px;border-radius:12px;background:rgba(47,61,88,.85);color:#FFE27A;font:700 11px 'Rubik',sans-serif;letter-spacing:2.5px;}
.loginCard{position:relative;z-index:1;width:calc(100% - 40px);max-width:330px;margin:auto auto 0;display:flex;flex-direction:column;align-items:center;padding:18px 18px 14px;border-radius:22px;
  background:linear-gradient(180deg,#FFFDF8,#F6EAD0);border:2.5px solid #D9BE86;box-shadow:0 10px 30px rgba(40,60,100,.25),inset 0 2px 0 #fff;}
#app .loginCard > *{max-width:none;}
#app .authTabs{background:#E7EEF8;border:2px solid #C5D5EC;border-radius:14px;}
#app .authTab{font-family:'Rubik','Inter',sans-serif;color:#5C6E8F;border-radius:10px;}
#app .authTab.active{background:linear-gradient(180deg,#5AA7FF,#2A6BD9);box-shadow:0 2px 6px rgba(42,107,217,.4);color:#fff;}
#app .authInput{background:#fff;border:2px solid #DCC394;color:var(--ink);border-radius:12px;font-family:'Rubik','Inter',sans-serif;}
#app .authInput::placeholder{color:#A8977F;}
#app .authInput:focus{border-color:#5AA7FF;box-shadow:0 0 0 3px rgba(90,167,255,.25);}
#app .rememberRow{color:var(--ink-2);}
#app .rememberRow input{accent-color:#2A6BD9;}
#app #screen-login .btn{width:100%;max-width:none;}
#app #screen-login .btn.ghost{color:#2A6BD9;border-color:transparent;font-size:13px;}
#app .authDivider{color:var(--ink-2);max-width:none;}
#app .authError{color:#D23A2E;}

/* ------------------------------------------------------------- загрузка */
#app #screen-loading .loadingScrim{background:linear-gradient(180deg,rgba(126,195,255,.15),rgba(234,244,255,.25) 50%,rgba(247,238,220,.9) 85%);}
#app #screen-loading h1{font:900 50px 'Rubik','Inter',sans-serif;letter-spacing:4px;color:#fff;background:none;-webkit-text-stroke:3px #2A4E8C;paint-order:stroke fill;text-shadow:0 5px 0 #1C3767;}
#app #screen-loading .sub{color:#2F3D58;font:700 12px 'Rubik',sans-serif;letter-spacing:3px;}
#app #screen-loading .loadingGlyph{display:none;}
#app .loadingBarTrack{height:14px;border-radius:8px;background:#fff;border:2px solid #2F3D58;box-shadow:inset 0 2px 3px rgba(0,0,0,.15);}
#app .loadingBarFill{background:linear-gradient(180deg,#FFD45A,#F29A12);box-shadow:none;}
#app .loadingFlavor{color:#2F3D58;font:700 13px 'Rubik',sans-serif;text-shadow:0 0 6px #fff,0 0 2px #fff;}

/* ------------------------------------------------ окна: задания, клан, чат… */
#app .metaOverlay,#app .umbraModal,#app .coInviteOv{background:rgba(40,70,120,.42);}
#app .metaSheet{background:linear-gradient(180deg,#FFFDF8 0%,#F6EAD0 100%);border:2.5px solid #D9BE86;border-bottom:0;box-shadow:0 -10px 40px rgba(30,50,90,.3);color:var(--ink);}
#app .metaHead{border-bottom:2px solid #E8D6B0;background:linear-gradient(180deg,#3A4A68,#2A3856);border-radius:19px 19px 0 0;}
#app .metaHeadIcon{background:linear-gradient(180deg,#FFCF4A,#F29A12);border:2px solid #fff;}
#app .metaHeadIcon svg{fill:#5A3300;}
#app .metaTitle{color:#fff;text-shadow:none;font:800 20px 'Rubik','Inter',sans-serif;}
#app .metaClose{background:#E04A3C;border:2px solid #fff;}
#app .metaClose svg{fill:#fff;}
#app .metaTabs{border-top:2px solid #E8D6B0;background:#F1E3C4;}
#app .metaTab{font-family:'Rubik','Inter',sans-serif;background:#fff;border:2px solid #D9C49C;color:var(--ink-2);}
#app .metaTab.active{background:linear-gradient(180deg,#5AA7FF,#2A6BD9);border-color:#2A6BD9;color:#fff;box-shadow:0 2px 8px rgba(42,107,217,.35);}
#app .metaEmpty{color:var(--ink-2);} #app .metaEmpty svg{fill:#C9B48A;}
#app .metaBack{color:#2A6BD9;}
#app .qBanner{box-shadow:0 4px 12px rgba(40,70,130,.25);}
#app .qBanner,#app .qBanner.login{background:linear-gradient(135deg,#5AA7FF 0%,#2A6BD9 100%);border:2px solid #fff;}
#app .qBanner.weekly{background:linear-gradient(135deg,#B28CFF 0%,#6A49D8 100%);}
#app .qBannerTitle{font-family:'Rubik','Inter',sans-serif;font-weight:800;}
#app .qTrack{background:rgba(255,255,255,.35);box-shadow:none;}
#app .qRow{background:linear-gradient(180deg,#FFFFFF,#F7EDD8);border:2px solid #E1CDA2;box-shadow:0 2px 6px rgba(70,90,130,.12);}
#app .qRow.done{background:linear-gradient(180deg,#F2FFF5,#DDF4E2);border-color:#9ED9AE;}
#app .qTitle{color:var(--ink);}
#app .qBar{background:#E7DCC6;box-shadow:inset 0 1px 2px rgba(0,0,0,.15);}
#app .qFill{background:linear-gradient(90deg,#5AA7FF,#2A6BD9);}
#app .loginCell{background:linear-gradient(180deg,#FFFFFF,#F2E6CC);border:2px solid #DCC394;color:var(--ink);}
#app .loginCell.main{background:linear-gradient(180deg,#FFF8E1,#FBE3A8);border-color:#F2B233;box-shadow:0 0 12px rgba(242,178,51,.45);}
#app .lcHead{font-family:'Rubik',sans-serif;}
#app .lcAmt{color:var(--ink);text-shadow:none;font-family:'Rubik',sans-serif;font-weight:800;}
#app .lcAmt.small{color:var(--ink-2);}
#app .loginCell.ready{background:linear-gradient(180deg,#E9FFEF,#BDECC9);border-color:#3DBE5A;}
#app .loginCell.claimed{filter:saturate(.4) brightness(.92);opacity:.8;}
#app .clanSearch,#app .chatInput{background:#fff;border:2px solid #DCC394;color:var(--ink);}
#app .clanSearch input{color:var(--ink);}
#app .clanRow,#app .topRow,#app .memberRow,#app .reqRow,#app .manageRow{background:linear-gradient(180deg,#FFFFFF,#F7EDD8);border:2px solid #E1CDA2;color:var(--ink);}
#app .memberRow.me,#app .topRow.place1{background:linear-gradient(180deg,#FFF8E1,#FBE8B8);border-color:#F2B233;}
#app .clanRowName,#app .topRow b,#app .memberRow b{color:var(--ink);}
#app .topInfo{background:#FFF3D6;color:var(--ink-2);border:1.5px solid #EED39A;}
#app .heroStat{background:#2F3D58;color:#fff;}
#app .roleSeg{background:#E7EEF8;}
#app .roleSeg button{color:#5C6E8F;}
#app .roleSeg button.on{background:linear-gradient(180deg,#5AA7FF,#2A6BD9);color:#fff;}
#app .chatTab{background:#fff;border:2px solid #D9C49C;color:var(--ink-2);font-family:'Rubik',sans-serif;}
#app .chatTab.active{background:linear-gradient(180deg,#5AA7FF,#2A6BD9);border-color:#2A6BD9;color:#fff;}
#app .msg{background:#fff;border:1.5px solid #E1CDA2;color:var(--ink);}
#app .msg.mine{background:linear-gradient(180deg,#5AA7FF,#2A6BD9);border-color:#2A6BD9;color:#fff;}
#app .msg.system{background:#E7F1FF;color:#2F4570;border:0;}
#app .chatSend{background:linear-gradient(180deg,#5AA7FF,#2A6BD9);border:2px solid #fff;}
#app .sectionHead b{color:var(--ink-2);}
/* модальные окна (почта, оплата, выход, приглашение, режимы PvP, награда) */
#app .umbraModalCard,#app .coInvite,#app .pvpModes,#app .rewardReveal{background:linear-gradient(180deg,#FFFDF8,#F6EAD0);border:2.5px solid #D9BE86;box-shadow:0 14px 40px rgba(30,50,90,.35);color:var(--ink);}
#app .umbraModalCard h2,#app .coInvite h2,#app .coInvite h3,#app .pvpModes h2,#app .pvpModes h3,#app .rewardReveal h2,#app .rewardReveal h3{color:var(--ink);text-shadow:none;}
#app .umbraModalText{color:var(--ink-2);}
#app .rewardRevealOv{background:rgba(40,70,120,.5);}
#app .umbraModal .btn.ghost{color:#2A6BD9;}
/* всплывающее уведомление */
#app #toast{background:linear-gradient(180deg,#3A4A68,#283752);color:#fff;border:2px solid #6A80A8;border-radius:14px;font-family:'Rubik','Inter',sans-serif;box-shadow:0 6px 18px rgba(20,35,70,.3);}


#app .rrTitle{color:#C2600A;text-shadow:none;font-family:'Rubik',sans-serif;font-weight:800;}
#app .rrLabel{color:var(--ink);} #app .rrSub{color:var(--ink-2);}
#app .pmTitle,#app .coHead{color:var(--ink);font-family:'Rubik',sans-serif;}
#app .coHint,#app .coEmpty,#app .coClose,#app .coNoKey{color:var(--ink-2);}
#app .coRow{background:#fff;border:1.5px solid #E1CDA2;}
#app .coName,#app .ciText,#app .coWait{color:var(--ink);}
#app .coPow{color:#B5680A;} #app .coKey{color:#1F9A57;}
#app .chPity{color:#B5680A;opacity:1;} #app .chPity b{color:var(--ink);}

/* единый шрифт во всём меню (бой/новелла не затрагиваются) */
#app > .screen:not(#screen-battle):not(#screen-result):not(#screen-dialogue) :is(div,span,b,small,h1,h2,h3,button,label,em,p,input),
#app > :is(.metaOverlay,.umbraModal,.eqPickOv,.coInviteOv,.pvpModeOv,.rewardRevealOv,.chestPrevOv,.logoutOv) :is(div,span,b,small,h2,h3,button,label,em,p,input){font-family:'Rubik','Inter',sans-serif;}

/* старый класс .portrait рисовал «глаза» и фиолетовое свечение у иконок снаряжения */
#app :is(.eqIcon,.hsIcon).portrait{box-shadow:none;border:0;}
#app :is(.eqIcon,.hsIcon).portrait::before,#app :is(.eqIcon,.hsIcon).portrait::after{display:none;}
#app .eqIcon:not(.portrait){background:linear-gradient(180deg,#EDE3CF,#D9C9A8) !important;border:2px dashed #C2A979;box-shadow:none;}

/* искры у ларцов — светлые вместо тёмного пламени */
#app .chShadowWisp{background:linear-gradient(0deg,rgba(255,255,255,0) 0%,rgba(120,180,255,.7) 35%,rgba(200,230,255,.5) 65%,transparent 100%);filter:blur(.8px) drop-shadow(0 0 6px rgba(120,180,255,.6));}

/* загрузка — та же небесная арена */
#app #screen-loading .loadingBg{background-image:url('../assets/ui/hero_arena.webp?v=129');background-position:50% 0;}

/* вкладка «Снаряжение» */
#app .equipHeader{color:var(--ink);font-weight:800;font-size:15px;}
#app .equipClass{color:var(--ink-2);}
#app .equipSlot{background:linear-gradient(180deg,#FFFFFF,#F6EBD3);border:2px solid #DCC394;border-radius:14px;box-shadow:0 3px 8px rgba(70,90,130,.14);}
#app .eqSlotLabel{color:var(--ink-2);font-weight:700;}
#app .eqItemName{color:var(--ink);font-weight:600;}
#app .setBonus{color:#9A8A72;} #app .setBonus.on{color:#1F9A57;}

/* выбор предмета */
#app .eqPickOv{background:rgba(40,70,120,.42);}
#app .eqPick{background:linear-gradient(180deg,#FFFDF8,#F6EAD0);border:2.5px solid #D9BE86;border-bottom:0;box-shadow:0 -10px 30px rgba(30,50,90,.3);}
#app .epTitle{color:var(--ink);} #app .epSub{color:var(--ink-2);}
#app .epGlyph{fill:#2A6BD9;background:#E7F1FF;border-color:#9EC5F5;}
#app .epItem{background:#fff;border:2px solid color-mix(in srgb,var(--rc) 55%,#E1CDA2);}
#app .epName{color:var(--ink);}
#app .epWear{background:linear-gradient(180deg,#5AA7FF,#2A6BD9);}
#app .epOn{color:#1F9A57;border-color:#7FD39A;}
#app .eqPick .metaEmpty,#app .eqPick p{color:var(--ink-2);}
#app .eqPick .epClose,#app .eqPick [class*=Close]{color:#fff;background:#E04A3C;border:2px solid #fff;}

/* выбор режима данжа */
#app .dungeonModes{background:linear-gradient(180deg,#FFFFFF,#F6EBD3);border:2.5px solid #D9BE86;border-radius:18px;box-shadow:0 4px 12px rgba(70,90,130,.15);}
#app .dungeonModes .dmTitle{color:var(--ink);font-weight:800;}
#app .dungeonModes .dmNote,#app .dmInfo{color:var(--ink-2);}
#app .dmPower{background:#EFE4CC;color:var(--ink-2);}
#app .dmPower b{color:var(--ink);font-family:'Rubik',sans-serif;}
#app .dmPower.ok b{color:#1F9A57;} #app .dmPower.mid b{color:#C2780A;} #app .dmPower.low b{color:#D23A2E;}

/* просмотр ларца и закрывающий крестик */
#app .chestPrevOv{background:rgba(40,70,120,.45);}
#app .chestPrev{background:linear-gradient(180deg,color-mix(in srgb,var(--ch-col) 18%,#FFFDF8),#F6EAD0 55%);border:2.5px solid #D9BE86;box-shadow:0 10px 30px rgba(30,50,90,.3);}
#app .cpClose{background:#E04A3C;border:2px solid #fff;color:#fff;}
#app .cpTitle{color:var(--ink);} #app .cpDesc,#app .cpNote{color:var(--ink-2);}
#app .cpSub{color:#2A6BD9;}
#app .cpGroup{background:#fff;border:1.5px solid #E1CDA2;}
#app .cpGHead{color:var(--ink);} #app .cpGHead b{color:#C2780A;}
#app .cpRank{color:var(--ink);background:#F6EFE0;}
#app .cpItem{background:#F2EADB;}
#app .cpMore{color:var(--ink-2);background:#EFE4CC;}
#app .cpPity{color:#B5680A;}

/* обучение в меню — светлые подсказки (в бою остаются прежними) */
#app[data-nav]:not([data-nav=""]) .tutCard{background:linear-gradient(180deg,#FFFDF8,#F6EAD0);border:2.5px solid #D9BE86;box-shadow:0 10px 30px rgba(30,50,90,.35);color:var(--ink);}
#app[data-nav]:not([data-nav=""]) .tutCard::before,#app[data-nav]:not([data-nav=""]) .tutCard::after{border-color:#D9BE86;}
#app[data-nav]:not([data-nav=""]) .tutIcon{background:linear-gradient(180deg,#5AA7FF,#2A6BD9);border:2px solid #fff;box-shadow:0 2px 6px rgba(42,107,217,.4);}
#app[data-nav]:not([data-nav=""]) .tutTitle{color:var(--ink);font:800 17px 'Rubik','Inter',sans-serif;}
#app[data-nav]:not([data-nav=""]) .tutText{color:#5E5140;font-family:'Rubik','Inter',sans-serif;}
#app[data-nav]:not([data-nav=""]) .tutChip{background:#E7F1FF;border-color:#9EC5F5;color:#2F4570;}
#app[data-nav]:not([data-nav=""]) .tutChip svg{fill:#2A6BD9;}
#app[data-nav]:not([data-nav=""]) .tutDots i{background:#D9C9A8;}
#app[data-nav]:not([data-nav=""]) .tutDots i.past{background:#B9A27A;}
#app[data-nav]:not([data-nav=""]) .tutDots i.on{background:#2A6BD9;box-shadow:none;}
#app[data-nav]:not([data-nav=""]) .tutSkip{color:var(--ink-2);border-color:#D9C49C;background:#fff;}
#app[data-nav]:not([data-nav=""]) .tutNext{background:linear-gradient(180deg,#FFCF4A,#F29A12);border-color:#B86A06;color:#4A2A00;box-shadow:0 3px 0 #A35A00;}
#app[data-nav]:not([data-nav=""]) .tutOverlay.center .tutShade{background:rgba(30,55,100,.5);}
#app[data-nav]:not([data-nav=""]) .tutSpot{box-shadow:0 0 0 9999px rgba(30,55,100,.55),0 0 0 3px #FFD45A,0 0 22px 6px rgba(255,212,90,.7);}
#app[data-nav]:not([data-nav=""]) .tutSpot::after{border-color:rgba(255,212,90,.9);}
#app[data-nav]:not([data-nav=""]) .tutCard.arrowUp::before{background:#FFFDF8;}
#app[data-nav]:not([data-nav=""]) .tutCard.arrowDown::before{background:#F6EAD0;}
.hubBody > *{flex-shrink:0;}
/* поиск соперника */
#app #screen-online{background:linear-gradient(180deg,#7EC3FF 0%,#CDE8FF 50%,#F7EEDC 100%);}
#app #screen-online h2{color:var(--ink);text-shadow:none;background:none;-webkit-text-fill-color:currentColor;}
#app #screen-online .title-tagline{color:var(--ink-2);}
#app #screen-online .pulseGlyph{background:radial-gradient(circle at 50% 45%,#FFFFFF 0%,#9ED0FF 30%,#3B8BFF 70%,#1F4FA8 100%);border:3px solid #fff;box-shadow:0 0 30px rgba(59,139,255,.6);}
.payMethodIco.cmus{font-weight:800;color:#fff;background:radial-gradient(circle,#3D5AFE,#1E2A8A);font-size:18px;}
#app #payGets{color:var(--ink);text-shadow:none;}
.payMethodIco.hlk{font-weight:800;color:#fff;background:radial-gradient(circle,#2BC48A,#137A55);font-size:18px;}
/* Патч 134: донат на паузе — размытая заглушка */
.donatePaused{position:relative;border-radius:18px;overflow:hidden;}
.donatePaused .dpBlur{display:flex;flex-direction:column;gap:8px;filter:blur(7px) saturate(.8);opacity:.75;pointer-events:none;user-select:none;}
.donatePaused .dpCard{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(86%,300px);display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  padding:16px 16px 14px;border-radius:18px;background:linear-gradient(180deg,rgba(255,253,248,.96),rgba(246,234,208,.96));border:2.5px solid #D9BE86;box-shadow:0 8px 24px rgba(30,50,90,.25);}
.donatePaused .dpIco{font-size:26px;line-height:1;}
.donatePaused .dpCard b{font:800 15px 'Rubik','Inter',sans-serif;color:var(--ink);}
.donatePaused .dpCard span{font:500 12px 'Rubik','Inter',sans-serif;color:var(--ink-2);}
/* Патч 134: игровой ID рядом с ником */
#app .heroTopBar .nickBadge{display:flex;align-items:center;gap:6px;max-width:190px;cursor:pointer;}
#app .nickBadge .nickName{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#app .nickBadge .clanTag{flex:none;}
#app .nickBadge .nickId{flex:none;font:700 10.5px 'Rubik','Inter',sans-serif;color:#fff;background:#2F3D58;border-radius:8px;padding:2px 6px;letter-spacing:.2px;}
#app .donateTitle{justify-content:flex-start;} #app .donateTitle span{margin-left:auto;}
/* Патч 134: субтитры роликов (поверх видео в новелле и катсцене) */
.umbraSubs{position:absolute;left:12px;right:12px;bottom:calc(13% + max(env(safe-area-inset-bottom,0px),var(--safe-bottom,0px)));z-index:5;display:flex;justify-content:center;pointer-events:none;opacity:0;transition:opacity .18s;}
.umbraSubs.on{opacity:1;}
.umbraSubs span{max-width:560px;padding:6px 12px 7px;border-radius:10px;background:rgba(0,0,0,.62);color:#fff;text-align:center;
  font:600 15px/1.35 'Rubik','Inter',sans-serif;text-shadow:0 1px 2px #000;white-space:pre-line;}
/* Патч 136: плашки имён поверх поля боя — без размытия фона (размытие
   пересчитывалось каждый кадр и сильно грузило видеокарту телефона) */
#screen-battle .nameplate{backdrop-filter:none;-webkit-backdrop-filter:none;}