:root{ --gold:#e8b869; --gold2:#c8922f; --text:#f3ead8; --dim:#9aa6b8; --panel:#12151b; --panel2:#171b23;
    --brd:rgba(232,184,105,.22); --bg:#0a0c10; --teal:#3fe0c8; --purple:#a24cff; --gold-dim:#a67c3d;
    --side:276px; --top:60px; }
  *{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent;}
  html,body{height:100%;background:#05070a;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;overflow:hidden;}
  .gold{background:linear-gradient(180deg,#f4d79a,#c8922f);-webkit-background-clip:text;background-clip:text;color:transparent;}

  /* ===== Каркас: карта на весь экран, панели — плавающие оверлеи ===== */
  #root{height:100vh;}
  #stage{position:fixed;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;background:#05070a;touch-action:pan-x pan-y;z-index:1;}

  /* ===== Верхняя навигация (плавающая, поверх карты) ===== */
  #topbar{position:fixed;top:0;left:0;right:0;height:var(--top);display:flex;align-items:center;gap:12px;padding:0 18px;z-index:30;
    pointer-events:none;background:none;}
  /* затемнение хедера только над картой (справа от меню) — не заходит на логотип */
  #topbar::before{content:'';position:absolute;left:var(--side);right:0;top:0;height:200%;pointer-events:none;z-index:-1;
    background:linear-gradient(180deg,rgba(5,7,10,.92) 0%,rgba(5,7,10,.4) 45%,rgba(5,7,10,0) 100%);}
  #topbar>*{pointer-events:auto;}
  #topnav{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:30px;align-items:center;}
  #topnav a{font-size:12.5px;font-weight:800;letter-spacing:1.6px;color:var(--dim);cursor:pointer;text-transform:uppercase;
    position:relative;padding:8px 2px;opacity:.55;transition:.15s;white-space:nowrap;}
  #topnav a:hover{opacity:.95;}
  #topnav a.act{color:var(--text);opacity:1;}
  #topnav a.act::after{content:'';position:absolute;left:-4px;right:-4px;bottom:2px;height:2px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);box-shadow:0 0 8px rgba(232,184,105,.6);}
  #topnav .sep{opacity:.28;color:var(--gold-dim);font-weight:400;pointer-events:none;letter-spacing:0;}
  #curr{margin-left:auto;display:flex;gap:7px;align-items:center;}
  .pill{display:flex;align-items:center;gap:6px;background:rgba(14,17,22,.9);border:1px solid var(--brd);
    border-radius:22px;padding:4px 11px 4px 4px;font-size:14px;font-weight:700;white-space:nowrap;backdrop-filter:blur(6px);box-shadow:0 4px 14px rgba(0,0,0,.35);}
  .pill .ic{width:26px;height:20px;background-size:contain;background-repeat:no-repeat;background-position:center;}
  .pill b{color:var(--gold);font-variant-numeric:tabular-nums;}
  .pill.btn{cursor:pointer;padding:6px 12px;} .pill.btn:hover{border-color:var(--gold2);}
  .iconbtn{width:38px;height:38px;flex:0 0 38px;border-radius:11px;border:1px solid var(--brd);background:rgba(23,27,35,.9);
    display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;backdrop-filter:blur(6px);box-shadow:0 4px 14px rgba(0,0,0,.35);}
  .iconbtn:hover{border-color:var(--gold2);}

  /* ===== Левая плавающая панель ===== */
  #sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--side);padding:16px 15px 26px;z-index:20;
    display:flex;flex-direction:column;gap:13px;overflow-y:auto;overflow-x:hidden;
    background:linear-gradient(180deg,rgba(28,19,11,.98) 0%,rgba(19,13,8,.97) 55%,rgba(13,9,6,.96) 100%);
    border-right:1px solid rgba(232,184,105,.16);
    box-shadow:inset -22px 0 40px -26px rgba(0,0,0,.72), 3px 0 22px rgba(0,0,0,.42);}
  #sidebar::-webkit-scrollbar{width:0;}
  .brand{padding:2px 4px 4px;}
  .brand-logo{display:block;width:100%;max-width:240px;height:auto;margin:-2px 0 2px;filter:drop-shadow(0 4px 14px rgba(0,0,0,.5));user-select:none;-webkit-user-drag:none;}
  .brand .rule{height:1px;margin:11px 0 9px;background:linear-gradient(90deg,var(--gold-dim),rgba(166,124,61,0));opacity:.7;}
  .brand .act{font-size:12px;color:var(--dim);}
  .brand .act b{color:var(--gold);}
  .brand .active-pill{display:inline-block;margin-top:9px;font-size:10.5px;font-weight:900;letter-spacing:1.4px;color:#052018;
    background:linear-gradient(180deg,#8af3e1,#2bb39c);padding:4px 13px;border-radius:20px;box-shadow:0 0 14px rgba(63,224,200,.35);}

  /* Карточка наград (компактный ряд иконок как в Crownfall) */
  /* L2-рамка окна (winbg 9-slice) вместо CSS-бордера — как у модалок */
  .rcard{position:relative;border:15px solid transparent;border-image:url(../assets/ui/frame/winbg.png) 26 fill / 15px / 0 stretch;border-radius:4px;padding:4px 8px 10px;background:none;}
  .rcard h3{font-size:11px;letter-spacing:2px;color:var(--dim);text-transform:uppercase;margin:2px 0 13px;}
  .rcard.pack{box-shadow:0 0 0 1px rgba(160,90,255,.22),0 0 22px rgba(160,80,255,.14);}
  .rcard.pack h3{color:#d9a8ff;}
  .rw-row{display:flex;gap:5px;justify-content:space-between;position:relative;}
  .rw-row::before{content:'';position:absolute;left:20px;right:20px;top:19px;height:2px;border-radius:2px;
    background:linear-gradient(90deg,var(--gold-dim),rgba(166,124,61,.15));opacity:.45;}
  .rcard.pack .rw-row::before{background:linear-gradient(90deg,#8a5cff,rgba(138,92,255,.15));}
  .rwi{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;position:relative;z-index:1;}
  .rwi .rwic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;
    background:linear-gradient(135deg,#2a2f3a,#14171d);border:1px solid var(--brd);transition:.15s;}
  .rwi .rwic.img{background-size:78%;background-position:center;background-repeat:no-repeat;background-color:#14171d;}
  .rwi.done .rwic.img{background-size:82%;}
  .rwi.done .rwic{border-color:var(--gold);box-shadow:0 0 13px rgba(232,184,105,.4);background:linear-gradient(135deg,#3b3120,#221a0d);cursor:pointer;}
  .rcard.pack .rwi.done .rwic{border-color:#b98cff;box-shadow:0 0 13px rgba(160,90,255,.4);}
  .rwi .rwcnt{font-size:12px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:.3px;}
  .rwi .rwcnt span{color:var(--dim);font-weight:600;}
  .pack-btn{margin-top:13px;}

  /* Меню-кнопки */
  .sbtns{display:flex;flex-direction:column;gap:8px;margin-top:6px;}
  /* L2 bronze buttons (Button_DF_Calculator_Long) — 9-slice, 3 состояния */
  .btn{border:6px solid transparent;border-image:url(../assets/ui/frame/btn.png?v2) 6 fill / 6px / 0 stretch;background:none;border-radius:0;color:var(--text);padding:8px 12px;
    font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:11px;width:100%;text-align:left;text-shadow:0 1px 2px rgba(0,0,0,.65);transition:filter .12s;}
  .btn:hover{border-image-source:url(../assets/ui/frame/btn_over.png?v2);}
  .btn:active{border-image-source:url(../assets/ui/frame/btn_down.png?v2);transform:translateY(1px);}
  .btn .i{font-size:18px;width:22px;text-align:center;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));}
  .btn .i.img{width:26px;height:26px;flex:0 0 26px;background-size:contain;background-repeat:no-repeat;background-position:center;}
  .btn.primary{justify-content:center;color:var(--gold);filter:saturate(1.15) brightness(1.06);}
  .btn.primary:hover{filter:saturate(1.2) brightness(1.14);}
  /* чипы (pill) не трогаем L2-скином */
  .pill.btn{border:1px solid var(--brd);border-image:none;border-radius:22px;background:rgba(14,17,22,.9);color:var(--text);text-shadow:none;width:auto;padding:6px 12px;filter:none;}
  .pill.btn:hover{border-color:var(--gold2);filter:none;} .pill.btn:active{transform:none;}

  /* ===== Карта ===== */
  #mapwrap{position:relative;margin:0 auto;width:100%;}
  #map{position:relative;width:100%;aspect-ratio:2752/1536;background:url('../map.jpeg') center top/cover no-repeat,#0b0d10;}
  #psvg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
  .edge{fill:none;vector-effect:non-scaling-stroke;}
  .edge-base{stroke:#0a1020;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;opacity:.82;}
  .edge-core{stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
  .gnode{position:absolute;transform:translate(-50%,-50%);border-radius:50%;display:flex;align-items:center;justify-content:center;
    border:2px solid var(--gold-dim,#a67c3d);background:radial-gradient(circle at 50% 35%,#20242c,#0c0f14);box-shadow:0 3px 10px rgba(0,0,0,.55);width:30px;height:30px;font-size:15px;}
  .gnode.bare{border-color:transparent;background:none;box-shadow:none;}
  .gnode .nodelabel{white-space:nowrap;letter-spacing:1.5px;font-weight:800;color:#f4e3b6;
    text-shadow:0 1px 2px #000,0 0 4px rgba(0,0,0,.7);pointer-events:none;text-transform:uppercase;}
  /* оживление иконок-узлов */
  .pxanim-flag{transform-origin:22% 100%;animation:flagWave 1.7s ease-in-out infinite;}
  @keyframes flagWave{0%,100%{transform:rotate(-2deg) skewX(0) scaleX(1);}
    30%{transform:rotate(1deg) skewX(-5deg) scaleX(.97);}
    55%{transform:rotate(2deg) skewX(2deg) scaleX(1.02);}
    80%{transform:rotate(0deg) skewX(4deg) scaleX(.98);}}
  .pxanim-die{transform-origin:50% 100%;animation:dieBounce 1.15s cubic-bezier(.3,.7,.4,1) infinite;}
  @keyframes dieBounce{0%{transform:translateY(0) scale(1,1) rotate(0);}
    12%{transform:translateY(6%) scale(1.12,.86);}
    40%{transform:translateY(-32%) scale(.9,1.12) rotate(-8deg);}
    58%{transform:translateY(-32%) scale(.94,1.08) rotate(6deg);}
    80%{transform:translateY(0) scale(1.12,.88) rotate(0);}
    100%{transform:translateY(0) scale(1,1);}}
  .gnode .idx{position:absolute;background:#12151a;color:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid rgba(232,184,105,.5);}
  .gnode .tb{position:absolute;border-radius:50%;background-size:cover;border:1px solid currentColor;display:flex;align-items:center;justify-content:center;}
  .gnode.avail{cursor:pointer;animation:pulse 1.6s ease-in-out infinite;}
  .gnode.locked{filter:grayscale(.9) brightness(.5);opacity:.72;cursor:not-allowed;}
  /* узел за неоплаченным входом в ветвь — виден, но с фиолетовым замком */
  .gnode.gated{cursor:pointer;filter:grayscale(.35) brightness(.72);opacity:.9;box-shadow:0 0 0 1px rgba(162,76,255,.5),0 0 12px rgba(162,76,255,.35);}
  .gnode.gated::after{content:'🔒';position:absolute;right:-9px;bottom:-8px;font-size:11px;filter:drop-shadow(0 1px 2px #000);}
  /* локация, ещё не открытая по прогрессу карты. Фильтр — ТОЛЬКО на спрайт,
     иначе он гасит и замок поверх него (замок становится не виден). */
  .gobj.locked .spr{filter:grayscale(1) brightness(.34) contrast(.9);opacity:.9;}
  .gobj.locked .objlock{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);
    display:flex;align-items:center;justify-content:center;line-height:1;
    text-shadow:0 2px 6px #000,0 0 14px rgba(0,0,0,.9);pointer-events:none;z-index:4;}
  .gobj.just-unlocked .spr{animation:objUnlock 1.5s ease;}
  @keyframes objUnlock{0%{filter:grayscale(1) brightness(.34);}
    22%{filter:grayscale(0) brightness(2.1) drop-shadow(0 0 18px rgba(232,184,105,.95));}
    100%{filter:none;}}
  .gate-note{margin-top:10px;font-size:12px;line-height:1.5;color:var(--dim);}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(232,184,105,.5),0 3px 10px rgba(0,0,0,.55);}50%{box-shadow:0 0 0 6px rgba(232,184,105,0),0 3px 10px rgba(0,0,0,.55);}}
  .gnode .check{position:absolute;inset:0;border-radius:50%;}
  .gnode.done .check::after{content:'✓';color:#6ee7a0;font-weight:900;font-size:15px;text-shadow:0 1px 3px #000;position:absolute;top:-10px;right:-8px;}
  .gobj{position:absolute;transform:translate(-50%,-100%);z-index:6;filter:drop-shadow(0 5px 5px rgba(0,0,0,.5));}
  .gobj.clk{cursor:pointer;} .gobj .spr{background-repeat:no-repeat;z-index:1;position:relative;}
  @keyframes objPlay{from{background-position-x:0;}to{background-position-x:var(--end);}}
  .flame{position:absolute;pointer-events:none;mix-blend-mode:screen;border-radius:50% 50% 48% 52%/62% 62% 40% 40%;
    background:radial-gradient(ellipse at 50% 72%,#fff6c4 0%,#ffd24d 24%,#ff8a1e 52%,#e0451a 78%,rgba(224,69,26,0) 100%);transform:translate(-50%,-50%);animation:flameFlick .42s ease-in-out infinite;}
  .flame.glow{filter:blur(6px);opacity:.55;background:radial-gradient(circle,#ff9a2e 0%,rgba(255,120,20,0) 70%);animation:flameGlow .9s ease-in-out infinite;}
  @keyframes flameFlick{0%{transform:translate(-50%,-50%) scaleY(1) scaleX(1);opacity:.9;}20%{transform:translate(-50%,-53%) scaleY(1.22) scaleX(.9);opacity:1;}40%{transform:translate(-51%,-49%) scaleY(.94) scaleX(1.08);opacity:.82;}60%{transform:translate(-49%,-54%) scaleY(1.16) scaleX(.94);opacity:1;}80%{transform:translate(-50%,-50%) scaleY(1.02) scaleX(1.02);opacity:.88;}100%{transform:translate(-50%,-50%) scaleY(1) scaleX(1);opacity:.9;}}
  @keyframes flameGlow{0%,100%{opacity:.45;}50%{opacity:.7;}}
  .objfx{position:absolute;pointer-events:none;} .fx-back{z-index:0;} .fx-front{z-index:2;}
  .fx-aura{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:100%;height:82%;border-radius:50%;filter:blur(8px);
    background:radial-gradient(ellipse at 50% 50%,rgba(255,196,96,.5) 0%,rgba(214,124,42,.26) 34%,rgba(150,80,190,.16) 60%,rgba(0,0,0,0) 76%);animation:fxAura 3.4s ease-in-out infinite;}
  @keyframes fxAura{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1);}50%{opacity:.92;transform:translate(-50%,-50%) scale(1.09);}}
  .fx-ember{position:absolute;border-radius:50%;opacity:0;background:radial-gradient(circle,#fff0b8 0%,#ffb347 55%,rgba(255,154,46,0) 100%);animation:fxEmber var(--dur,3s) linear infinite;}
  @keyframes fxEmber{0%{opacity:0;transform:translate(0,0) scale(.5);}12%{opacity:1;}75%{opacity:.7;}100%{opacity:0;transform:translate(var(--dx,0),calc(-1 * var(--rise,80px))) scale(1.1);}}
  .veil{position:absolute;left:0;right:0;bottom:0;z-index:12;pointer-events:none;overflow:hidden;
    background:linear-gradient(180deg,rgba(6,9,12,0) 0%,rgba(5,8,11,.72) 15%,rgba(3,6,9,.93) 38%,rgba(2,5,8,.98) 62%);
    -webkit-backdrop-filter:blur(4px) grayscale(.55) brightness(.5);backdrop-filter:blur(4px) grayscale(.55) brightness(.5);}
  .veil::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(140,92,255,.75),rgba(63,224,200,.6),transparent);box-shadow:0 0 16px rgba(140,92,255,.55);}
  .veil-txt{position:absolute;left:50%;top:15%;transform:translateX(-50%);width:88%;max-width:440px;text-align:center;}
  .veil-lock{font-size:30px;filter:drop-shadow(0 2px 6px #000);}
  .veil-t1{margin-top:8px;font-size:17px;font-weight:800;letter-spacing:.4px;text-shadow:0 2px 10px #000;background:linear-gradient(180deg,#f0e2c2,#c9a862);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .veil-t2{margin-top:6px;font-size:13px;line-height:1.45;color:#a7b0c8;text-shadow:0 1px 5px #000;}

  #zoombar{position:fixed;right:18px;bottom:112px;display:flex;flex-direction:column;gap:6px;z-index:22;}
  #zoombar .zb{width:40px;height:40px;border-radius:11px;background:rgba(18,21,27,.92);border:1px solid var(--brd);color:var(--text);font-size:19px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.5);backdrop-filter:blur(6px);}
  #zoombar .zb:hover{border-color:var(--gold2);}

  /* ===== Виджет кота (плавающая нижняя панель) ===== */
  #botbar{position:fixed;left:calc(var(--side) + 14px);right:18px;bottom:16px;height:78px;display:flex;align-items:center;gap:14px;
    padding:0 12px 0 14px;z-index:20;border:1px solid var(--brd);border-radius:16px;
    background:linear-gradient(90deg,rgba(11,13,18,.94),rgba(11,13,18,.8));box-shadow:0 12px 34px rgba(0,0,0,.55);backdrop-filter:blur(8px);}
  .cat{display:flex;align-items:center;gap:13px;min-width:0;}
  .cat .ava{width:56px;height:56px;flex:0 0 56px;border-radius:13px;background:radial-gradient(circle at 50% 35%,#3a2f22,#140f0a);border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:0 0 14px rgba(232,184,105,.25);}
  .cat .lv{font-size:13px;} .cat .xp{width:min(300px,32vw);height:12px;border-radius:2px;background:#0a0c11;overflow:hidden;margin-top:5px;border:1px solid rgba(0,0,0,.65);box-shadow:inset 0 0 4px rgba(0,0,0,.8);}
  .cat .xp i{display:block;height:100%;background:url(../assets/ui/hud/exp.png) left center/100% 100% no-repeat;box-shadow:0 0 8px rgba(150,120,220,.55);}
  .cat .sub{font-size:11px;color:var(--dim);margin-top:3px;}
  #botbar .go{margin-left:auto;width:auto;flex:0 0 auto;padding-left:20px;padding-right:20px;}
  #tabbar{display:none;}

  /* ===== Модалки/шторки ===== */
  .overlay{position:fixed;inset:0;background:rgba(5,7,10,.72);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:60;padding:20px;}
  .overlay.show{display:flex;}
  .modal{position:relative;width:min(400px,94vw);max-height:88vh;overflow:visible;border:17px solid transparent;border-image:url(../assets/ui/frame/winbg.png) 26 fill / 17px / 0 stretch;border-radius:4px;padding:2px 8px 10px;box-shadow:0 20px 60px rgba(0,0,0,.7);animation:pop .2s ease;}
  @keyframes pop{from{transform:scale(.94);opacity:0;}to{transform:scale(1);opacity:1;}}
  .modal .head{padding:0 0 6px;text-align:center;position:static;}
  .modal .head::before{content:'';display:block;height:32px;margin:-38px -23px 8px;pointer-events:none;
    background:
      url(../assets/ui/frame/left.png) left center/auto 100% no-repeat,
      url(../assets/ui/frame/right.png) right center/auto 100% no-repeat,
      url(../assets/ui/frame/center.png) center center/auto 100% no-repeat,
      url(../assets/ui/frame/tile.png) center center/auto 100% repeat-x;}
  .modal h2{margin:4px 0;font-size:18px;color:var(--gold);}
  .modal .body{padding:8px 8px;color:var(--dim);font-size:13px;line-height:1.55;}
  .modal .x{position:absolute;top:3px;right:13px;cursor:pointer;color:var(--text);font-size:18px;line-height:1;z-index:4;text-shadow:0 1px 3px rgba(0,0,0,.95);}
  .modal .x:hover{color:var(--gold);}

  /* ===== Декоративная планка-заголовок (окна награды/результата боя) ===== */
  .win-modal::before,
  #bossbattle .bb-rcard::before{
    content:'';display:block;height:var(--dfh,40px);pointer-events:none;
    background:
      url(../assets/ui/frame/left.png) left center/auto 100% no-repeat,
      url(../assets/ui/frame/right.png) right center/auto 100% no-repeat,
      url(../assets/ui/frame/center.png) center center/auto 100% no-repeat,
      url(../assets/ui/frame/tile.png) center center/auto 100% repeat-x;
  }
  .win-modal::before{margin:-1px -1px 4px;border-radius:16px 16px 0 0;}
  #bossbattle .bb-rcard::before{margin:-26px -22px 16px;border-radius:18px 18px 0 0;}
  .reqline{display:flex;gap:10px;justify-content:center;align-items:center;margin:12px 0;flex-wrap:wrap;}
  .reqline .r{display:flex;align-items:center;gap:5px;background:#0d1016;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:5px 9px;}
  .reqline .r .ic{width:30px;height:22px;background-size:contain;background-repeat:no-repeat;background-position:center;}
  .reqline .r.bad{border-color:rgba(224,85,75,.6);} .reqline .r.ok{border-color:rgba(110,231,160,.5);}
  .cta{display:block;margin:10px auto 0;border:1px solid var(--gold2);background:linear-gradient(180deg,#f4d79a,#d29a34);color:#1a1204;font-weight:700;border-radius:10px;padding:12px 22px;font-size:14px;cursor:pointer;width:calc(100% - 36px);}
  .cta.disabled{background:#2a2e36;color:#6b7280;border-color:#333;cursor:not-allowed;}
  /* билеты прямо на узле карты: крупные, читаемые, со свечением под ними */
  .gnode .nreq{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:9px;display:flex;gap:14px;pointer-events:none;white-space:nowrap;}
  .gnode .nreqb{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;}
  .gnode .nreqb::before{content:'';position:absolute;top:-5px;left:50%;transform:translateX(-50%);width:52px;height:42px;z-index:0;
    background:radial-gradient(ellipse at 50% 45%,rgba(255,212,124,.95),rgba(255,192,84,.45) 48%,transparent 72%);}
  .gnode .nreqb .tk{position:relative;z-index:1;width:42px;height:31px;background-size:contain;background-repeat:no-repeat;background-position:center;
    font-size:22px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.65));}
  .gnode .nreqb .cc{position:relative;z-index:1;background:#241a0c;color:#ffe6ac;border:1px solid #c68a2f;border-radius:9px;
    font-size:11px;font-weight:900;padding:1px 9px;box-shadow:0 1px 3px rgba(0,0,0,.6);letter-spacing:.5px;}
  .gnode .nreqb.bad::before{display:none;}
  .gnode .nreqb.bad .tk{filter:grayscale(1) brightness(.62) drop-shadow(0 2px 3px rgba(0,0,0,.65));}
  .gnode .nreqb.bad .cc{background:#171009;color:#9a8258;}
  /* надпись «ОТКРЫТЬ» — светящийся золотой текст, как UNLOCK в рефе */
  .gnode .nopen{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:64px;
    font-weight:900;font-size:15px;letter-spacing:3px;text-transform:uppercase;white-space:nowrap;pointer-events:none;color:#ffe7b0;
    text-shadow:0 0 7px rgba(255,205,110,.95),0 0 15px rgba(255,180,70,.6),0 2px 3px rgba(0,0,0,.8);
    animation:openPulse 1.4s ease-in-out infinite;}
  @keyframes openPulse{0%,100%{opacity:.85;}50%{opacity:1;text-shadow:0 0 12px rgba(255,216,124,1),0 0 22px rgba(255,190,80,.75),0 2px 3px rgba(0,0,0,.8);}}
  /* готовность = золотое свечение вокруг узла */
  .gnode.ready{z-index:40;}
  .gnode.ready::before{content:'';position:absolute;inset:-10px;border-radius:50%;z-index:-1;
    background:radial-gradient(circle,rgba(255,208,112,.65),rgba(255,190,74,.22) 55%,transparent 72%);
    animation:readyGlow 1.5s ease-in-out infinite;}
  @keyframes readyGlow{0%,100%{opacity:.55;transform:scale(1);}50%{opacity:1;transform:scale(1.16);}}
  .gnode.ready::after{content:'✓';position:absolute;top:-9px;right:-9px;width:20px;height:20px;background:#2b8a58;color:#eaffef;
    border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;border:2px solid #12151a;z-index:3;}
  .wallet-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:4px 16px;}
  .wallet-grid .w{display:flex;align-items:center;gap:8px;background:#0d1016;border:1px solid var(--brd);border-radius:10px;padding:7px 9px;font-size:12px;}
  .wallet-grid .w .ic{width:30px;height:22px;background-size:contain;background-repeat:no-repeat;background-position:center;flex:0 0 30px;}
  .wallet-grid .w b{color:var(--gold);margin-left:auto;}
  .wallet-grid .w.paid{border-color:rgba(196,107,255,.45);}

  /* ===== ВЫБОР БОССА ===== */
  .modal.boss-modal{width:min(500px,96vw);}

  /* ===== Профиль: карточка персонажа ===== */
  .modal.prof-modal{width:min(560px,96vw);}
  .modal.prof-modal .body{padding:6px 10px 4px;color:var(--text);}
  .pf-head{display:flex;gap:13px;align-items:center;padding:2px 2px 12px;border-bottom:1px solid var(--brd);}
  .pf-ava{width:72px;height:72px;flex:0 0 72px;border-radius:14px;overflow:hidden;border:1px solid var(--gold2);background:#0d1016;box-shadow:0 0 0 1px rgba(0,0,0,.5);}
  .pf-ava canvas{width:100%;height:100%;display:block;}
  .pf-hinfo{min-width:0;}
  .pf-name{font-size:16px;font-weight:800;}
  .pf-arch{font-size:11px;color:var(--gold);text-transform:uppercase;letter-spacing:.5px;margin-top:2px;}
  .pf-perk{margin-top:7px;font-size:12px;color:var(--teal);cursor:help;}
  /* L2-худ: уровень-квадрат + полоски CP/HP/MP/EXP */
  .pf-status{display:flex;gap:11px;align-items:stretch;padding:12px 2px;border-bottom:1px solid var(--brd);}
  .pf-lvbox{flex:0 0 58px;display:flex;flex-direction:column;align-items:center;justify-content:center;
    border:11px solid transparent;border-image:url(../assets/ui/frame/winbg.png) 26 fill / 11px / 0 stretch;border-radius:3px;}
  .pf-lvbox span{font-size:8.5px;letter-spacing:1.5px;color:var(--dim);line-height:1;}
  .pf-lvbox b{font-size:23px;line-height:1.05;color:var(--gold);font-variant-numeric:tabular-nums;}
  .pf-gauges{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;justify-content:center;}
  /* Чистые L2-текстуры полосок (assets/ui/hud/*.png), без насечек — глянец уже в текстуре */
  .pf-gauge{position:relative;height:15px;border-radius:5px;background:linear-gradient(180deg,#05070a,#0d1016);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.7),inset 0 1px 2px rgba(0,0,0,.6);overflow:hidden;}
  .pf-gauge>i{position:absolute;left:0;top:0;bottom:0;background-position:left center;background-size:100% 100%;background-repeat:no-repeat;transition:width .3s cubic-bezier(.3,1,.4,1);}
  .pf-gauge.cp>i{background-image:url(../assets/ui/hud/cp.png);}
  .pf-gauge.hp>i{background-image:url(../assets/ui/hud/hp.png);}
  .pf-gauge.mp>i{background-image:url(../assets/ui/hud/mp.png);}
  .pf-gauge.exp{height:9px;} .pf-gauge.exp>i{background-image:url(../assets/ui/hud/exp.png);}
  .pf-gauge .pf-gt{position:absolute;left:8px;top:0;bottom:0;z-index:3;display:flex;align-items:center;font-size:9.5px;font-weight:900;letter-spacing:.8px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.95);pointer-events:none;}
  .pf-gauge .pf-gv{position:absolute;right:8px;top:0;bottom:0;z-index:3;display:flex;align-items:center;font-size:9.5px;font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.95);font-variant-numeric:tabular-nums;pointer-events:none;}
  .pf-gauge.exp .pf-gt,.pf-gauge.exp .pf-gv{font-size:8px;}

  .pf-cols{display:flex;gap:14px;padding:13px 2px;border-bottom:1px solid var(--brd);}
  .pf-doll{flex:0 0 118px;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:54px;gap:7px;}
  .pf-slot{position:relative;border:1px solid var(--brd);border-radius:10px;background:linear-gradient(180deg,#14171d,#0d1016);display:flex;align-items:center;justify-content:center;cursor:default;overflow:hidden;transition:.14s;}
  .pf-slot.has{border-color:var(--rc,var(--gold));box-shadow:0 0 10px -2px var(--rc,transparent);cursor:pointer;}
  .pf-slot.has:hover{filter:brightness(1.12);}
  .pf-slot .pf-si{width:80%;height:80%;background-size:contain;background-repeat:no-repeat;background-position:center;}
  .pf-slot .pf-sl{font-size:9.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.4px;opacity:.7;text-align:center;}
  .pf-stats{flex:1;display:flex;flex-direction:column;justify-content:center;gap:8px;}
  .pf-st{display:flex;align-items:center;gap:9px;font-size:12px;}
  .pf-st .pf-stl{flex:0 0 66px;color:var(--dim);}
  .pf-st .pf-stbar{flex:1;height:7px;border-radius:5px;background:#0c0f14;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(232,184,105,.2);}
  .pf-st .pf-stbar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--gold));transition:width .2s;}
  .pf-st .pf-stv{flex:0 0 auto;min-width:30px;text-align:right;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text);}
  .pf-st .pf-stbon{color:var(--teal);font-weight:700;}
  .pf-invsec{padding:12px 2px 4px;}
  .pf-h{font-size:11px;letter-spacing:1.5px;color:var(--dim);text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:8px;}
  .pf-h .pf-cnt{color:var(--gold);font-weight:700;letter-spacing:0;}
  .pf-empty{font-size:12.5px;color:var(--dim);text-align:center;padding:14px 8px;border:1px dashed var(--brd);border-radius:12px;background:rgba(13,16,22,.5);}
  .pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px;}
  .pf-item{position:relative;aspect-ratio:1;border:1px solid var(--rc,var(--brd));border-radius:11px;background:radial-gradient(120% 100% at 50% 0,color-mix(in srgb,var(--rc,#2a2f3a) 22%,transparent),#0f1218 70%);cursor:pointer;transition:.14s;box-shadow:0 0 0 1px rgba(0,0,0,.35);}
  .pf-item:hover{transform:translateY(-2px);box-shadow:0 6px 16px -6px var(--rc,transparent);}
  .pf-item .pf-ii{position:absolute;inset:14%;background-size:contain;background-repeat:no-repeat;background-position:center;}
  .pf-item .pf-q{position:absolute;right:4px;bottom:2px;font-size:11px;font-weight:800;color:var(--text);text-shadow:0 1px 3px #000;}
  .pf-foot{padding:12px 2px 6px;}
  .pf-reset{width:100%;border:1px solid var(--brd);background:rgba(20,17,17,.6);color:var(--dim);border-radius:10px;padding:10px;font-size:12.5px;cursor:pointer;transition:.14s;}
  .pf-reset:hover{border-color:#c0555a;color:#f0b4b8;background:rgba(40,18,18,.7);}
  .boss-pick{display:flex;flex-direction:column;gap:11px;padding:10px 18px 4px;}
  .boss-card{display:flex;gap:14px;align-items:center;background:#0d1016;border:1.5px solid var(--brd);border-radius:16px;padding:12px;cursor:pointer;transition:.15s;position:relative;overflow:hidden;}
  .boss-card:hover{border-color:var(--gold2);transform:translateY(-1px);}
  .boss-card.sel{border-color:var(--bc,#e8b869);box-shadow:0 0 0 1px var(--bc,#e8b869),0 8px 22px rgba(0,0,0,.5);background:linear-gradient(100deg,color-mix(in srgb,var(--bc,#e8b869) 12%,#0d1016),#0d1016 62%);}
  .boss-card .avwrap{width:96px;height:96px;flex:0 0 96px;border-radius:14px;overflow:hidden;background:radial-gradient(circle at 50% 42%,#39404e,#0c1015 72%);border:1px solid rgba(255,255,255,.08);}
  .boss-card .ava{width:96px;height:96px;background-repeat:no-repeat;background-position:center;filter:brightness(1.45) contrast(1.1) saturate(1.15) drop-shadow(0 2px 4px rgba(0,0,0,.6));}
  .boss-card .info{flex:1;min-width:0;}
  .boss-card .bn{font-size:16.5px;font-weight:800;color:var(--text);}
  .boss-card .bd{font-size:12px;color:var(--dim);margin-top:3px;line-height:1.45;}
  .boss-card .brw{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-size:12px;color:var(--gold);font-weight:700;background:rgba(232,184,105,.08);border:1px solid rgba(232,184,105,.25);border-radius:8px;padding:4px 8px;}
  .boss-card .brw .ic{width:24px;height:17px;background-size:contain;background-repeat:no-repeat;background-position:center;}
  .boss-card .tick{position:absolute;top:10px;right:12px;width:22px;height:22px;border-radius:50%;border:2px solid var(--bc,#e8b869);display:none;align-items:center;justify-content:center;color:var(--bc,#e8b869);font-size:12px;font-weight:900;background:#0d1016;}
  .boss-card.sel .tick{display:flex;}

  /* ===== ПОЛНОЭКРАННЫЙ ВЫБОР БОССА ===== */
  #bossselect{position:fixed;inset:0;z-index:78;display:none;flex-direction:column;
    background:linear-gradient(180deg,rgba(6,7,14,.78) 0%,rgba(6,7,14,.40) 28%,rgba(6,7,14,.42) 66%,rgba(6,7,14,.86) 100%),url('../assets/bg/arena.jpg') center 42%/cover no-repeat,#07080c;}
  #bossselect.show{display:flex;animation:pop .22s ease;}
  #bossselect .bs-top{position:relative;text-align:center;padding:26px 20px 2px;flex:0 0 auto;}
  #bossselect .bs-top h2{margin:0;font-size:clamp(20px,2.6vw,30px);color:var(--gold);letter-spacing:1.5px;font-weight:900;text-transform:uppercase;text-shadow:0 2px 14px rgba(232,184,105,.25);}
  #bossselect .bs-sub{color:var(--dim);font-size:13px;margin-top:5px;}
  #bossselect .bs-close{position:absolute;top:18px;right:24px;font-size:26px;line-height:1;color:var(--dim);cursor:pointer;transition:.15s;}
  #bossselect .bs-close:hover{color:#fff;}
  #bossselect .bs-row{flex:1;display:flex;align-items:stretch;justify-content:center;gap:clamp(4px,2.5vw,40px);padding:4px clamp(8px,4vw,64px) 0;min-height:0;}
  #bossselect .bs-col{position:relative;flex:1 1 0;max-width:440px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;cursor:pointer;min-height:0;transition:opacity .2s;}
  #bossselect .bs-col .stage{position:relative;flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;min-height:0;overflow:visible;}
  #bossselect .bs-col .floor{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:62%;height:30px;border-radius:50%;background:radial-gradient(ellipse,var(--bc,#e8b869),transparent 70%);opacity:.22;filter:blur(5px);transition:.2s;}
  /* Яркость запечена в фильмстрип; НИКАКИХ CSS-фильтров на живом canvas (Safari пересчитывает их каждый кадр → лаги). Отдельный слой (translateZ) — перерисовка не трогает фон. */
  #bossselect .bs-col canvas{position:absolute;inset:0;width:100%;height:100%;display:block;transform:translateZ(0);backface-visibility:hidden;transition:transform .18s ease;}
  #bossselect .bs-col:hover{opacity:1;}
  #bossselect .bs-col:hover canvas{transform:translateY(-6px) scale(1.04) translateZ(0);}
  #bossselect .bs-col:hover .floor{opacity:.4;width:70%;}
  #bossselect.has-sel .bs-col:not(.sel){opacity:.45;}
  #bossselect .bs-col.sel .floor{opacity:.5;width:72%;}
  #bossselect .bs-col .plate{text-align:center;padding:8px 6px 2px;flex:0 0 auto;}
  #bossselect .bs-col .plate .role{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--bc,#e8b869);opacity:.85;font-weight:700;}
  #bossselect .bs-col .plate .nm{font-size:clamp(16px,1.9vw,23px);font-weight:900;color:#fff;margin-top:2px;text-shadow:0 2px 10px rgba(0,0,0,.6);}
  #bossselect .bs-col.sel .plate .nm{color:var(--bc,#e8b869);}
  #bossselect .bs-col .rewards{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:8px;min-height:26px;font-size:12px;color:var(--gold);font-weight:700;}
  #bossselect .bs-col .rewards .ic{width:26px;height:19px;background-size:contain;background-repeat:no-repeat;background-position:center;}
  #bossselect .bs-bottom{flex:0 0 auto;display:flex;justify-content:center;padding:6px 20px 30px;}
  #bossselect .bs-cta{min-width:min(420px,80vw);border:1px solid var(--gold2);background:linear-gradient(180deg,#f4d79a,#d29a34);color:#1a1204;font-weight:900;border-radius:13px;padding:15px 26px;font-size:15px;letter-spacing:.5px;cursor:pointer;transition:.15s;box-shadow:0 10px 30px rgba(210,154,52,.28);}
  #bossselect .bs-cta:hover{filter:brightness(1.05);transform:translateY(-1px);}
  #bossselect .bs-cta.disabled{background:#22262e;color:#6b7280;border-color:#333;cursor:not-allowed;box-shadow:none;transform:none;filter:none;}
  #bossselect .bs-spin{position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:var(--bc,#e8b869);animation:bsspin .8s linear infinite;}
  @keyframes bsspin{to{transform:rotate(360deg);}}
  #bossselect .bs-dots{display:none;justify-content:center;gap:10px;padding:2px 0 4px;flex:0 0 auto;}
  #bossselect .bs-dots .d{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22);cursor:pointer;transition:.2s;}
  #bossselect .bs-dots .d.on{background:var(--bc,#e8b869);transform:scale(1.35);box-shadow:0 0 10px var(--bc,#e8b869);}
  @media (max-width:720px){
    /* Мобилка: горизонтальная свайп-карусель, один босс на экран */
    #bossselect .bs-top{padding-top:18px;}
    #bossselect .bs-row{gap:0;padding:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
    #bossselect .bs-row::-webkit-scrollbar{display:none;}
    #bossselect .bs-col{flex:0 0 100%;max-width:100%;scroll-snap-align:center;padding:0 12px;opacity:1 !important;}
    #bossselect .bs-col canvas{transform:translateZ(0) !important;}
    #bossselect .bs-col:active canvas{transform:scale(1.03) translateZ(0) !important;}
    #bossselect .bs-col .plate .role{display:block;}
    #bossselect .bs-dots{display:flex;}
    #bossselect .bs-cta{min-width:0;width:calc(100% - 24px);}
  }

  /* ===== Окно битвы с боссом ===== */
  #bossbattle{position:fixed;inset:0;z-index:79;display:none;flex-direction:column;color:var(--text);overflow:hidden;
    background:linear-gradient(180deg,rgba(6,8,13,.80) 0%,rgba(6,8,13,.30) 20%,rgba(6,8,13,.26) 52%,rgba(6,8,13,.74) 100%),url('../assets/bg/arena.jpg') center 46%/cover no-repeat,#07080c;}
  #bossbattle.show{display:flex;animation:pop .22s ease;}
  #bossbattle.shake{animation:bbShake .32s cubic-bezier(.36,.07,.19,.97);}
  @keyframes bbShake{10%,90%{transform:translate(-1px,0);}20%,80%{transform:translate(3px,-1px);}30%,50%,70%{transform:translate(-5px,1px);}40%,60%{transform:translate(5px,-1px);}}
  #bossbattle .bb-top{position:relative;flex:0 0 auto;padding:18px clamp(14px,4vw,42px) 10px;display:flex;flex-direction:column;align-items:center;gap:11px;
    background:linear-gradient(180deg,rgba(5,7,12,.66),transparent);}
  #bossbattle .bb-close{position:absolute;top:14px;right:clamp(14px,4vw,26px);width:36px;height:36px;display:flex;align-items:center;justify-content:center;
    font-size:17px;line-height:1;color:var(--dim);cursor:pointer;transition:.15s;z-index:5;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(14,16,22,.72);}
  #bossbattle .bb-close:hover{color:#fff;border-color:var(--gold2);background:rgba(24,18,8,.75);}
  #bossbattle .bb-bhead{text-align:center;max-width:min(640px,88vw);}
  #bossbattle .bb-bname{font-size:clamp(21px,2.7vw,32px);font-weight:900;color:#fff;line-height:1.04;letter-spacing:.5px;text-shadow:0 2px 5px #000,0 0 20px rgba(0,0,0,.75);}
  #bossbattle .bb-brole{font-size:12px;letter-spacing:.2px;color:#c6cdda;font-weight:600;margin-top:5px;line-height:1.35;text-shadow:0 1px 4px rgba(0,0,0,.85);}
  /* полосы HP */
  #bossbattle .hpbar{position:relative;border-radius:11px;overflow:hidden;
    background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.32));border:1px solid rgba(232,184,105,.32);
    box-shadow:inset 0 2px 6px rgba(0,0,0,.65),0 2px 10px rgba(0,0,0,.4);}
  #bossbattle .bb-bosshp.hpbar{width:min(720px,86vw);height:23px;}
  #bossbattle .hpbar::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
    background:repeating-linear-gradient(90deg,transparent 0 44px,rgba(0,0,0,.30) 44px 46px);}
  #bossbattle .hpbar .fill{position:absolute;left:0;top:0;bottom:0;width:100%;transition:width .5s cubic-bezier(.3,1,.4,1);}
  #bossbattle .hpbar .fill::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,.05) 46%,rgba(0,0,0,.18));}
  #bossbattle .hpbar.boss .fill{background:linear-gradient(90deg,#e23b3b,#ff6a3a 68%,#ffab4d);box-shadow:0 0 18px rgba(255,84,58,.55);}
  #bossbattle .hpbar.cat .fill{background:linear-gradient(90deg,#37b866,#7fe36a);box-shadow:0 0 14px rgba(72,209,122,.5);}
  #bossbattle .hpbar .flash{position:absolute;inset:0;background:#fff;opacity:0;z-index:2;}
  #bossbattle .hpbar.hurt .flash{animation:bbHpFlash .3s ease;}
  @keyframes bbHpFlash{0%{opacity:.7;}100%{opacity:0;}}
  #bossbattle .hpbar .num{position:absolute;top:50%;right:12px;transform:translateY(-50%);z-index:3;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;color:#fff;letter-spacing:.4px;text-shadow:0 1px 3px rgba(0,0,0,.95);}
  #bossbattle .bb-arena{position:relative;flex:1;min-height:0;display:flex;align-items:flex-end;justify-content:center;}
  #bossbattle .bb-stage{position:relative;width:min(560px,86vw);height:100%;display:flex;align-items:flex-end;justify-content:center;overflow:visible;}
  #bossbattle .bb-stage .floor{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:56%;height:30px;border-radius:50%;background:radial-gradient(ellipse,var(--bc,#e8b869),transparent 70%);opacity:.22;filter:blur(5px);}
  #bossbattle .bb-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;transform:translateZ(0);backface-visibility:hidden;}
  #bossbattle .bb-stage.bhit canvas{animation:bbBossHit .3s ease;}
  @keyframes bbBossHit{0%{filter:none;}30%{filter:brightness(2.4) saturate(.4);transform:translateZ(0) translateX(-6px);}60%{transform:translateZ(0) translateX(4px);}100%{filter:none;}}
  #bossbattle .bb-fx{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:2;}
  #bossbattle .bb-redflash{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 100% at 50% 60%,rgba(255,40,40,.42),transparent 70%);opacity:0;z-index:4;}
  #bossbattle .bb-redflash.on{animation:bbRed .42s ease;}
  @keyframes bbRed{0%{opacity:0;}20%{opacity:1;}100%{opacity:0;}}
  #bossbattle .dmg{position:absolute;font-weight:900;font-size:clamp(26px,4vw,42px);pointer-events:none;z-index:6;
    text-shadow:0 2px 6px rgba(0,0,0,.8);animation:bbDmg 1s cubic-bezier(.2,.8,.3,1) forwards;white-space:nowrap;}
  #bossbattle .dmg.boss{color:#ffd15a;} #bossbattle .dmg.cat{color:#ff6a5a;} #bossbattle .dmg.miss{color:#cfd6e2;font-size:clamp(18px,2.6vw,26px);} #bossbattle .dmg.heal{color:#6ee7a0;}
  @keyframes bbDmg{0%{transform:translate(-50%,0) scale(.5);opacity:0;}18%{transform:translate(-50%,-10px) scale(1.15);opacity:1;}40%{transform:translate(-50%,-24px) scale(1);}100%{transform:translate(-50%,-72px) scale(.92);opacity:0;}}
  #bossbattle .slash{position:absolute;left:50%;top:44%;width:min(300px,60vw);height:6px;pointer-events:none;z-index:5;
    background:linear-gradient(90deg,transparent,#fff,transparent);border-radius:6px;transform:translate(-50%,-50%) rotate(-24deg) scaleX(0);
    filter:drop-shadow(0 0 8px #fff) drop-shadow(0 0 16px var(--bc,#e8b869));animation:bbSlash .38s ease-out forwards;}
  @keyframes bbSlash{0%{transform:translate(-50%,-50%) rotate(-24deg) scaleX(0);opacity:0;}30%{opacity:1;}55%{transform:translate(-50%,-50%) rotate(-24deg) scaleX(1);opacity:1;}100%{transform:translate(-50%,-50%) rotate(-24deg) scaleX(1);opacity:0;}}
  #bossbattle .cast{position:absolute;left:50%;top:46%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;pointer-events:none;z-index:5;
    border:3px solid var(--bc,#a24cff);box-shadow:0 0 30px var(--bc,#a24cff),inset 0 0 24px var(--bc,#a24cff);transform:scale(.2);opacity:0;animation:bbCast .5s ease-out forwards;}
  @keyframes bbCast{0%{transform:scale(.2);opacity:0;}40%{opacity:1;}100%{transform:scale(1.9);opacity:0;}}
  /* лог-плашка над доком */
  #bossbattle .bb-log{flex:0 0 auto;align-self:center;max-width:min(560px,90vw);margin:0 auto 10px;padding:7px 18px;min-height:16px;
    text-align:center;font-size:13.5px;color:#e4e9f2;font-weight:600;line-height:1.35;border-radius:999px;
    background:rgba(9,11,16,.82);border:1px solid rgba(255,255,255,.08);
    box-shadow:0 4px 16px rgba(0,0,0,.4);text-shadow:0 1px 3px rgba(0,0,0,.8);transition:.2s;}
  #bossbattle .bb-log b{color:var(--gold);}
  /* нижний док */
  #bossbattle .bb-dock{position:relative;flex:0 0 auto;align-self:center;width:min(860px,94vw);margin-bottom:calc(16px + env(safe-area-inset-bottom));
    padding:13px 16px 15px;border-radius:18px;display:flex;flex-direction:column;gap:12px;
    background:linear-gradient(180deg,rgba(17,19,27,.95),rgba(9,11,16,.98));
    border:1px solid rgba(232,184,105,.24);box-shadow:0 16px 46px rgba(0,0,0,.62);}
  #bossbattle .bb-dock::before{content:'';position:absolute;left:20px;right:20px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(232,184,105,.7),transparent);}
  #bossbattle .bb-cathp{display:flex;flex-direction:column;gap:6px;}
  #bossbattle .cat-hprow{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
  #bossbattle .cat-hprow .lab{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;font-weight:800;color:var(--gold);opacity:.92;}
  #bossbattle .cat-hprow .num{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;color:#fff;}
  #bossbattle .bb-cathp .hpbar.cat{height:13px;}
  #bossbattle .bb-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;}
  #bossbattle .act-btn{position:relative;border:1px solid rgba(255,255,255,.09);border-radius:13px;padding:12px 8px 10px;overflow:hidden;
    background:linear-gradient(180deg,rgba(38,44,56,.92),rgba(20,24,31,.94));color:var(--text);cursor:pointer;transition:.14s;
    display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.35);}
  #bossbattle .act-btn::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);}
  #bossbattle .act-btn .ic{font-size:23px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.55));}
  #bossbattle .act-btn .t{font-size:14px;font-weight:800;letter-spacing:.3px;}
  #bossbattle .act-btn .s{font-size:10.5px;color:var(--dim);font-weight:600;}
  #bossbattle .act-btn:hover{transform:translateY(-2px);border-color:var(--gold2);
    background:linear-gradient(180deg,rgba(50,56,70,.96),rgba(26,30,39,.96));box-shadow:0 7px 20px rgba(0,0,0,.5);}
  #bossbattle .act-btn:active{transform:translateY(0);}
  #bossbattle .act-btn.atk .ic{color:#ffd98a;}
  #bossbattle .act-btn.strong .ic{color:#ff8a6a;}
  #bossbattle .act-btn.guard .ic{color:#6ec8ff;}
  #bossbattle .act-btn.strong:hover{border-color:#ff8a6a;box-shadow:0 7px 20px rgba(0,0,0,.5),0 0 0 1px rgba(255,138,106,.28);}
  #bossbattle .act-btn.guard:hover{border-color:#6ec8ff;box-shadow:0 7px 20px rgba(0,0,0,.5),0 0 0 1px rgba(110,200,255,.28);}
  #bossbattle.busy .act-btn{opacity:.45;pointer-events:none;filter:grayscale(.4);}
  #bossbattle .bb-result{position:absolute;inset:0;z-index:10;display:none;align-items:center;justify-content:center;padding:24px;
    background:rgba(5,7,11,.72);backdrop-filter:blur(3px);}
  #bossbattle .bb-result.show{display:flex;animation:pop .3s ease;}
  #bossbattle .bb-rcard{width:min(360px,92vw);border-radius:20px;padding:26px 22px 20px;text-align:center;
    background:linear-gradient(180deg,#14131c,#0c0e13);border:1px solid var(--rc,#8b93a3);box-shadow:0 0 44px var(--rg,rgba(139,147,163,.4)),0 24px 60px rgba(0,0,0,.7);animation:winpop .34s cubic-bezier(.2,1.3,.4,1);}
  #bossbattle .bb-rcard .rbanner{font-size:12px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:var(--rc,#8b93a3);}
  #bossbattle .bb-rcard h2{margin:6px 0 4px;font-size:28px;font-weight:900;color:#fff;}
  #bossbattle .bb-rcard .rdesc{font-size:13px;color:var(--dim);margin-bottom:14px;line-height:1.5;}
  #bossbattle .bb-rcard .rreward{display:inline-flex;align-items:center;gap:8px;background:rgba(232,184,105,.1);border:1px solid var(--brd);border-radius:12px;padding:9px 15px;font-size:15px;font-weight:800;color:var(--gold);margin-bottom:16px;}
  #bossbattle .bb-rcard .rreward .ic{width:26px;height:20px;background-size:contain;background-repeat:no-repeat;background-position:center;}
  #bossbattle .bb-rcard .rbtns{display:flex;gap:10px;}
  #bossbattle .bb-rcard .rbtns button{flex:1;border-radius:12px;padding:13px;font-size:13.5px;font-weight:800;cursor:pointer;border:1px solid var(--brd);transition:.15s;background:rgba(23,27,35,.7);color:var(--text);}
  #bossbattle .bb-rcard .rbtns button:hover{border-color:var(--gold2);}
  #bossbattle .bb-rcard .rbtns .primary{background:linear-gradient(180deg,#f4d79a,#d29a34);color:#1a1204;border-color:transparent;}
  #bossbattle .bb-rcard .rbtns .primary:hover{filter:brightness(1.06);}
  #bossbattle .bb-rcard .rbtns button.disabled{opacity:.4;pointer-events:none;}
  @media (max-width:720px){
    #bossbattle .act-btn .s{display:none;}
    #bossbattle .act-btn{padding:11px 6px 9px;}
    #bossbattle .bb-stage{width:100vw;}
    #bossbattle .bb-dock{width:calc(100% - 18px);border-radius:15px;margin-bottom:calc(12px + env(safe-area-inset-bottom));}
    #bossbattle .bb-bname{font-size:21px;}
    #bossbattle .bb-brole{font-size:11.5px;}
  }

  /* ===== Тактический бой: мана, магия, предметы, статусы ===== */
  #bossbattle .bb-bstatus,#bossbattle .bb-cstatus{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;align-content:center;min-height:22px;}
  #bossbattle .bb-cstatus{min-height:0;}
  #bossbattle .stchip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px;letter-spacing:.2px;
    background:rgba(9,11,16,.72);border:1px solid rgba(255,255,255,.14);color:#e7ecf5;text-shadow:0 1px 2px rgba(0,0,0,.8);}
  #bossbattle .stchip .ic{font-size:12px;line-height:1;}
  #bossbattle .stchip.burn{border-color:rgba(255,122,58,.55);color:#ffb98a;background:rgba(40,18,8,.7);}
  #bossbattle .stchip.freeze{border-color:rgba(110,200,255,.55);color:#bfe6ff;background:rgba(8,24,40,.7);}
  #bossbattle .stchip.shield{border-color:rgba(201,166,255,.55);color:#dcc9ff;background:rgba(26,16,44,.7);}
  #bossbattle .stchip.defend{border-color:rgba(110,200,255,.5);color:#bfe6ff;}
  #bossbattle .stchip.dodge{border-color:rgba(141,232,141,.55);color:#c6f5c6;background:rgba(12,34,18,.7);}
  /* полоса маны */
  #bossbattle .hpbar.mp{height:10px;border-color:rgba(90,140,255,.4);}
  #bossbattle .hpbar.mp .fill{background:linear-gradient(90deg,#3f6dff,#7cc0ff);box-shadow:0 0 12px rgba(90,150,255,.5);}
  #bossbattle .cat-hprow .lab.mp{color:#8fb6ff;}
  /* SVG-иконки на кнопках действий */
  #bossbattle .act-btn .ic{display:flex;align-items:center;justify-content:center;height:28px;}
  #bossbattle .act-btn .ic .svgic{width:28px;height:28px;display:block;}
  #bossbattle .act-btn.atk .svgic{color:#ffd98a;filter:drop-shadow(0 2px 4px rgba(0,0,0,.55));}
  #bossbattle .act-btn.strong .svgic{color:#ff8a6a;filter:drop-shadow(0 2px 4px rgba(0,0,0,.55));}
  #bossbattle .act-btn.guard .svgic{color:#6ec8ff;filter:drop-shadow(0 2px 4px rgba(0,0,0,.55));}
  /* вкладки дока */
  #bossbattle .bb-tabs{display:flex;gap:6px;padding:4px;border-radius:13px;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.07);}
  #bossbattle .bb-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 6px;border-radius:10px;font-size:12.5px;font-weight:800;
    color:var(--dim);cursor:pointer;border:1px solid transparent;transition:.14s;background:transparent;letter-spacing:.3px;}
  #bossbattle .bb-tab:hover{color:#fff;}
  #bossbattle .bb-tab.on{color:#fff;background:linear-gradient(180deg,rgba(50,56,70,.96),rgba(26,30,39,.96));border-color:var(--gold2);box-shadow:0 2px 10px rgba(0,0,0,.42);}
  #bossbattle .bb-tab .bdg{font-size:10px;font-weight:800;background:rgba(232,184,105,.2);color:var(--gold);border-radius:999px;padding:1px 6px;}
  #bossbattle .bb-panel{min-height:104px;}
  /* списки магии/предметов */
  #bossbattle .bb-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  #bossbattle .listbtn{position:relative;display:flex;align-items:center;gap:10px;text-align:left;padding:9px 11px;border-radius:12px;cursor:pointer;
    border:1px solid rgba(255,255,255,.09);background:linear-gradient(180deg,rgba(34,39,50,.94),rgba(18,22,29,.96));color:var(--text);transition:.13s;box-shadow:0 2px 7px rgba(0,0,0,.32);}
  #bossbattle .listbtn::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);border-radius:inherit;}
  #bossbattle .listbtn:hover{transform:translateY(-2px);border-color:var(--sc,var(--gold2));box-shadow:0 7px 18px rgba(0,0,0,.5),0 0 0 1px var(--sc,rgba(232,184,105,.3));}
  #bossbattle .listbtn:active{transform:translateY(0);}
  #bossbattle .listbtn .lic{width:32px;height:32px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:21px;line-height:1;border-radius:9px;
    background:rgba(0,0,0,.32);background-size:76%;background-repeat:no-repeat;background-position:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);}
  #bossbattle .listbtn .lbody{min-width:0;flex:1;}
  #bossbattle .listbtn .lt{font-size:12.5px;font-weight:800;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  #bossbattle .listbtn .ls{font-size:10.5px;color:var(--dim);font-weight:600;margin-top:2px;line-height:1.2;}
  #bossbattle .listbtn .lcost{font-size:11px;font-weight:800;color:#8fb6ff;flex:0 0 auto;white-space:nowrap;}
  #bossbattle .listbtn .lqty{font-size:12px;font-weight:800;color:var(--gold);flex:0 0 auto;}
  #bossbattle .listbtn.disabled{opacity:.42;pointer-events:none;filter:grayscale(.5);}
  #bossbattle .bb-empty{grid-column:1/-1;text-align:center;color:var(--dim);font-size:12.5px;padding:22px 8px;line-height:1.5;}
  #bossbattle.busy .bb-tab{pointer-events:none;opacity:.6;}
  #bossbattle .bb-bname.enrage{animation:bbEnrage 1s ease infinite;}
  @keyframes bbEnrage{0%,100%{color:#fff;text-shadow:0 2px 5px #000,0 0 20px rgba(0,0,0,.75);}50%{color:#ff6a5a;text-shadow:0 0 20px rgba(255,80,60,.85);}}
  @media (max-width:720px){
    #bossbattle .bb-list{grid-template-columns:1fr;}
    #bossbattle .listbtn .ls{display:none;}
    #bossbattle .bb-tab{font-size:12px;padding:9px 4px;}
  }

  /* ===== L2-худ битвы: статус-окно (портрет+CP/HP/MP+баффы) + скилл-бар ===== */
  #bossbattle .bb-dock{width:min(940px,96vw);padding:14px 16px 16px;gap:12px;}
  #bossbattle .dmg.cp{color:#ffd15a;} #bossbattle .dmg.curse{color:#c98bff;}
  /* статус-окно */
  #bossbattle .bb-hud{display:flex;align-items:center;gap:14px;}
  #bossbattle .portrait{position:relative;flex:0 0 auto;width:66px;height:66px;border-radius:12px;
    background:radial-gradient(120% 120% at 50% 20%,rgba(60,52,30,.9),rgba(12,14,20,.96));
    border:1px solid rgba(232,184,105,.5);box-shadow:inset 0 0 12px rgba(0,0,0,.7),0 2px 10px rgba(0,0,0,.5);
    display:flex;align-items:center;justify-content:center;}
  #bossbattle .portrait::after{content:'';position:absolute;inset:3px;border-radius:9px;border:1px solid rgba(255,255,255,.06);pointer-events:none;}
  #bossbattle .portrait .pic{width:44px;height:44px;color:#f4d79a;filter:drop-shadow(0 1px 3px rgba(0,0,0,.7));}
  #bossbattle .portrait .pic .svgic{width:44px;height:44px;display:block;}
  #bossbattle .portrait .plv{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);white-space:nowrap;
    font-size:10px;font-weight:800;letter-spacing:.3px;color:#1a1204;background:linear-gradient(180deg,#f4d79a,#d29a34);
    border-radius:999px;padding:1px 8px;box-shadow:0 1px 4px rgba(0,0,0,.6);}
  #bossbattle .portrait .pname{position:absolute;top:-8px;left:50%;transform:translateX(-50%);white-space:nowrap;
    font-size:8px;font-weight:800;letter-spacing:.8px;color:var(--gold);opacity:.85;text-shadow:0 1px 3px rgba(0,0,0,.8);}
  /* когда внутри живой портрет — рамку рисует сам .catpf, своя отключается (иначе двойная) */
  #bossbattle .portrait.has-face{background:none;border:0;box-shadow:none;}
  #bossbattle .portrait.has-face::after{display:none;}
  /* размер строго 66 = cssSize, с которым renderCatFace завёл канвас (он пишет ширину инлайном,
     растянуть его через inset:0 нельзя — на узком экране морду обрезало бы) */
  #bossbattle .portrait .catpf{--pfs:66px;}
  /* бары CP/HP/MP */
  #bossbattle .bars{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
  #bossbattle .statbar{display:grid;grid-template-columns:16px 26px 1fr auto;align-items:center;gap:8px;}
  #bossbattle .statbar .sbi{width:16px;height:16px;display:block;opacity:.9;}
  #bossbattle .statbar .sbi .svgic{width:16px;height:16px;display:block;}
  #bossbattle .statbar .sblab{font-size:10.5px;font-weight:900;letter-spacing:1px;color:var(--dim);}
  #bossbattle .statbar .sbtrack{position:relative;height:12px;border-radius:7px;overflow:hidden;
    background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.34));border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 4px rgba(0,0,0,.7);}
  #bossbattle .statbar .sbtrack::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 30px,rgba(0,0,0,.28) 30px 31px);}
  #bossbattle .statbar .fill{position:absolute;left:0;top:0;bottom:0;width:100%;transition:width .45s cubic-bezier(.3,1,.4,1);}
  #bossbattle .statbar .fill::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,.05) 48%,rgba(0,0,0,.2));}
  #bossbattle .statbar .sbnum{font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;color:#fff;min-width:64px;text-align:right;text-shadow:0 1px 2px rgba(0,0,0,.9);}
  #bossbattle .statbar.cp .sbi{color:#f4c65a;} #bossbattle .statbar.cp .fill{background:linear-gradient(90deg,#c9962e,#ffd964 70%,#ffe9a8);box-shadow:0 0 12px rgba(244,198,90,.55);}
  #bossbattle .statbar.hp .sbi{color:#ff6a5a;} #bossbattle .statbar.hp .fill{background:linear-gradient(90deg,#b3222a,#ff5a4d 78%,#ff8a6a);box-shadow:0 0 12px rgba(255,70,58,.55);}
  #bossbattle .statbar.mp .sbi{color:#7cc0ff;} #bossbattle .statbar.mp .fill{background:linear-gradient(90deg,#3f6dff,#7cc0ff);box-shadow:0 0 12px rgba(90,150,255,.5);}
  #bossbattle .statbar.hurt .fill{animation:bbStatHit .34s ease;}
  @keyframes bbStatHit{0%{filter:brightness(2.5) saturate(.55);}100%{filter:brightness(1);}}
  /* баффы кота (квадратные иконки как в L2) */
  #bossbattle .buffs{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:5px;align-content:center;justify-content:flex-end;max-width:130px;}
  #bossbattle .buff{position:relative;width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;
    background:rgba(10,12,18,.85);border:1px solid rgba(255,255,255,.16);box-shadow:0 1px 4px rgba(0,0,0,.5);}
  #bossbattle .buff .bi{font-size:15px;line-height:1;}
  #bossbattle .buff .bc{position:absolute;right:-3px;bottom:-4px;font-size:9px;font-weight:900;color:#fff;background:#1a1d26;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:0 4px;min-width:13px;text-align:center;line-height:14px;font-variant-numeric:tabular-nums;}
  /* кольцо-таймер длительности (обратный отсчёт по ходам) */
  #bossbattle .buff .ring{position:absolute;inset:0;border-radius:7px;padding:2px;pointer-events:none;
    background:conic-gradient(from -90deg,var(--rc,#ffd15a) calc(var(--p,100)*1%),rgba(255,255,255,.12) 0);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;transition:background .3s;}
  #bossbattle .buff.shield{border-color:rgba(201,166,255,.6);--rc:#c9a6ff;} #bossbattle .buff.defend{border-color:rgba(110,200,255,.55);--rc:#6ec8ff;}
  #bossbattle .buff.dodge{border-color:rgba(141,232,141,.6);--rc:#8de88d;} #bossbattle .buff.curse{border-color:rgba(201,90,255,.6);background:rgba(30,10,40,.85);--rc:#c98bff;}
  #bossbattle .buff.burn{--rc:#ff7a3a;} #bossbattle .buff.freeze{--rc:#6ec8ff;}
  /* подсказка по наведению */
  #bossbattle .bb-hint{min-height:16px;text-align:center;font-size:12px;font-weight:600;color:var(--dim);opacity:0;transition:opacity .15s;line-height:1.3;}
  #bossbattle .bb-hint.on{opacity:1;}
  #bossbattle .bb-hint b{color:var(--gold);}
  /* скилл-бар */
  #bossbattle .bb-skills{display:flex;flex-direction:column;gap:8px;}
  #bossbattle .skillrow{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
  #bossbattle .skill{position:relative;width:60px;height:60px;flex:0 0 auto;border-radius:11px;cursor:pointer;
    background:linear-gradient(180deg,rgba(40,45,57,.95),rgba(17,20,27,.97));border:1px solid rgba(255,255,255,.1);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 8px rgba(0,0,0,.45);transition:.13s;
    display:flex;align-items:center;justify-content:center;}
  #bossbattle .skill:hover{transform:translateY(-2px);border-color:var(--gold2);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 8px 18px rgba(0,0,0,.55);}
  #bossbattle .skill:active{transform:translateY(0);}
  #bossbattle .skill .sic{width:34px;height:34px;color:#f0d9a8;display:flex;align-items:center;justify-content:center;
    background-size:78%;background-repeat:no-repeat;background-position:center;filter:drop-shadow(0 1px 3px rgba(0,0,0,.55));}
  #bossbattle .skill .sic .svgic{width:34px;height:34px;display:block;}
  #bossbattle .skill.atk .sic{color:#ffd98a;} #bossbattle .skill.strong .sic{color:#ff8a6a;} #bossbattle .skill.guard .sic{color:#6ec8ff;}
  #bossbattle .skill .kbd{position:absolute;top:-6px;left:-6px;width:18px;height:18px;border-radius:6px;font-size:10px;font-weight:900;
    display:flex;align-items:center;justify-content:center;color:#e8ecf5;background:#1a1d26;border:1px solid rgba(255,255,255,.22);box-shadow:0 1px 3px rgba(0,0,0,.5);}
  #bossbattle .skill .cost{position:absolute;right:-4px;bottom:-5px;font-size:10px;font-weight:800;color:#bcd6ff;background:#12233a;border:1px solid rgba(124,192,255,.4);border-radius:999px;padding:0 5px;line-height:15px;}
  #bossbattle .skill .qty{position:absolute;right:-4px;bottom:-5px;font-size:10px;font-weight:800;color:#1a1204;background:linear-gradient(180deg,#f4d79a,#d29a34);border-radius:999px;padding:0 5px;line-height:15px;}
  #bossbattle .skill.dis{filter:grayscale(.65);opacity:.5;pointer-events:none;}
  #bossbattle .skill.dis::after{content:'';position:absolute;inset:0;border-radius:inherit;background:rgba(0,0,0,.28);}
  #bossbattle .skill.item .sic{background-color:rgba(0,0,0,.28);border-radius:8px;}
  #bossbattle .skillrow.items{padding-top:8px;border-top:1px solid rgba(255,255,255,.06);margin-top:1px;}
  #bossbattle.busy .skill{pointer-events:none;}
  #bossbattle.busy .skill:not(.dis){opacity:.6;}
  @media (max-width:720px){
    #bossbattle .bb-hud{gap:10px;}
    #bossbattle .buffs{max-width:96px;}
    #bossbattle .statbar .sbnum{min-width:52px;font-size:10px;}
    #bossbattle .skill{width:52px;height:52px;}
    #bossbattle .skill .sic{width:29px;height:29px;} #bossbattle .skill .sic .svgic{width:29px;height:29px;}
    #bossbattle .portrait:not(.has-face){width:56px;height:56px;} #bossbattle .portrait .pic,#bossbattle .portrait .pic .svgic{width:36px;height:36px;}
  }

  .toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:rgba(10,12,16,.96);border:1px solid var(--brd);border-radius:12px;padding:10px 16px;font-size:14px;opacity:0;transition:opacity .25s;z-index:70;pointer-events:none;max-width:80vw;text-align:center;}
  .toast.show{opacity:1;}
  #dbg{position:fixed;left:calc(var(--side) + 14px);bottom:104px;z-index:22;display:flex;gap:6px;}
  #dbg button{background:rgba(18,21,27,.85);border:1px solid rgba(255,255,255,.14);color:var(--dim);border-radius:9px;padding:6px 9px;font-size:11px;cursor:pointer;backdrop-filter:blur(4px);}
  #loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:15px;z-index:80;}

  /* ===== МОБАЙЛ ===== */
  @media (max-width:899px){
    :root{--top:52px;}
    #topbar{height:var(--top);padding:0 12px;background:linear-gradient(180deg,rgba(5,7,10,.95),rgba(5,7,10,0));}
    #topbar::before{display:none;}
    #topnav{display:none;}
    #curr{margin-left:auto;}
    #sidebar{display:none;}
    #stage{padding-bottom:64px;}
    #botbar{display:none;}
    #tabbar{position:fixed;left:0;right:0;bottom:0;height:64px;display:flex;background:linear-gradient(0deg,#0c0f14,#0e1219);border-top:1px solid var(--brd);z-index:40;}
    #tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;color:var(--dim);cursor:pointer;}
    #tabbar a.act{color:var(--gold);}
    #tabbar a .n{font-size:20px;line-height:1;}
    #zoombar{bottom:80px;right:12px;}
    #dbg{left:12px;bottom:76px;}
    /* шторка снизу на мобилке */
    .overlay.sheet{align-items:flex-end;padding:0;}
    .overlay.sheet .modal{width:100%;max-width:100%;border-radius:18px 18px 0 0;max-height:80vh;}
  }

/* ===== Портрет кота (WarCraft/L2-рамка) ===== */
.catpf{position:relative;width:var(--pfs,56px);height:var(--pfs,56px);flex:0 0 var(--pfs,56px);
  border-radius:16%;overflow:hidden;
  background:radial-gradient(circle at 50% 30%,#2a2f3a,#0a0d12 78%);
  border:2px solid var(--gold2);
  box-shadow:0 2px 10px rgba(0,0,0,.6), inset 0 0 0 1px rgba(232,184,105,.35), inset 0 -8px 16px rgba(0,0,0,.55);}
.catpf::after{content:"";position:absolute;inset:0;border-radius:14%;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,240,205,.28), inset 0 0 12px rgba(0,0,0,.5);
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 30%);}
.catpf-cv{position:absolute;inset:0;width:100%;height:100%;display:block;}
.catpf.round{border-radius:50%;} .catpf.round::after{border-radius:50%;}
.catpf.hero{border-width:3px;box-shadow:0 4px 18px rgba(0,0,0,.7), inset 0 0 0 1px rgba(232,184,105,.5), 0 0 22px rgba(232,184,105,.25);}
.cat .ava.has-face{overflow:hidden;font-size:0;padding:0;}
.prof-cat{display:flex;gap:14px;align-items:center;margin:4px 0 6px;}
.prof-info{flex:1;min-width:0;} .prof-lv{font-size:15px;margin-bottom:7px;}
.prof-info .xp{height:8px;border-radius:5px;background:#0c0f14;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(232,184,105,.25);}
.prof-info .xp i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--gold));}
.prof-xp{font-size:12px;color:var(--dim);margin-top:5px;}

/* ===== Экран выбора героя ===== */
#catselect{position:fixed;inset:0;z-index:400;display:none;flex-direction:column;align-items:center;overflow:auto;
  background:linear-gradient(180deg,rgba(10,8,6,.42),rgba(7,6,10,.72) 70%,rgba(7,6,10,.86)), url(../assets/bg/select.jpg) center/cover no-repeat fixed;}
#catselect.show{display:flex;}
.cs-window{position:relative;margin:32px auto 8px;max-width:1240px;width:calc(100% - 44px);
  border:17px solid transparent;border-image:url(../assets/ui/frame/winbg.png?b=5) 26 fill / 17px / 0 stretch;border-radius:4px;
  overflow:visible;padding:2px 12px 14px;box-shadow:0 22px 60px rgba(0,0,0,.6);}
.cs-head{padding:0 0 6px;text-align:center;position:static;}
.cs-head::before{content:'';display:block;height:32px;margin:-38px -25px 12px;pointer-events:none;
  background:
    url(../assets/ui/frame/left.png) left center/auto 100% no-repeat,
    url(../assets/ui/frame/right.png) right center/auto 100% no-repeat,
    url(../assets/ui/frame/center.png) center center/auto 100% no-repeat,
    url(../assets/ui/frame/tile.png) center center/auto 100% repeat-x;}
.cs-head h2{margin:2px 0 0;font-size:24px;color:var(--gold);letter-spacing:.5px;}
.cs-sub{color:var(--dim);font-size:13px;margin-top:5px;}
.cs-close{position:absolute;right:6px;top:2px;width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;color:var(--text);cursor:pointer;font-size:18px;line-height:1;z-index:6;text-shadow:0 1px 3px #000;}
.cs-close:hover{color:var(--gold);}
#catselect.forced .cs-close{display:none;}
.cs-row{display:flex;gap:13px;align-items:stretch;justify-content:center;flex-wrap:nowrap;
  width:100%;padding:8px 2px 2px;overflow-x:auto;}
.cs-card{width:206px;flex:0 0 206px;background:linear-gradient(180deg,#161b26,#0d1017);border:1px solid var(--brd);border-radius:12px;
  padding:15px 13px 14px;display:flex;flex-direction:column;align-items:center;cursor:pointer;position:relative;
  transition:transform .12s,box-shadow .12s,filter .12s,border-color .12s;}
.cs-card:hover{transform:translateY(-5px);border-color:var(--cc);box-shadow:0 12px 30px rgba(0,0,0,.55);}
.cs-card.sel{border-color:var(--cc);box-shadow:0 0 0 2px var(--cc), 0 0 20px -4px var(--cc);}
.cs-card.locked{opacity:.5;filter:grayscale(.55);cursor:not-allowed;}
.cs-card.locked:hover{transform:none;filter:grayscale(.55);box-shadow:none;border-color:var(--brd);}
.cs-stage{position:relative;margin-bottom:10px;}
.cs-stage .catpf{--pfs:150px;border-width:3px;box-shadow:0 6px 18px rgba(0,0,0,.6), inset 0 0 0 1px rgba(232,184,105,.4);}
.cs-lock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:44px;}
.cs-nm{font-size:16px;font-weight:700;color:var(--text);}
.cs-arch{font-size:12px;color:var(--cc);margin:2px 0 10px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;}
.cs-stats{width:100%;display:flex;flex-direction:column;gap:4px;margin-bottom:9px;}
.cs-strow{display:flex;align-items:center;gap:7px;}
.cs-stk{width:30px;font-size:10px;color:var(--dim);font-weight:700;letter-spacing:.3px;}
.cs-stbar{flex:1;height:6px;background:#0a0d12;border-radius:4px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);}
.cs-stbar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--cc));}
.cs-stv{width:20px;text-align:right;font-size:11px;color:var(--text);font-variant-numeric:tabular-nums;}
.cs-perk{display:flex;align-items:center;gap:8px;width:100%;margin:1px 0 9px;padding:7px 9px;border-radius:9px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.18));border:1px solid var(--cc);box-shadow:0 0 10px -4px var(--cc);}
.cs-perk-ic{flex:0 0 auto;color:var(--cc);display:flex;align-items:center;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--cc) 55%,transparent));}
.cs-ico{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.cs-perk-tx{display:flex;flex-direction:column;line-height:1.22;min-width:0;text-align:left;}
.cs-perk-tx b{font-size:12px;color:var(--cc);}
.cs-perk-tx span{font-size:10.5px;color:var(--dim);}
.cs-story{font-size:11px;color:var(--dim);text-align:center;line-height:1.45;}
.cs-bottom{padding:12px 16px 24px;}
.cs-cta{border:1px solid var(--gold2);background:linear-gradient(180deg,#f4d79a,#d29a34);color:#1a1204;font-weight:800;
  border-radius:12px;padding:15px 40px;font-size:16px;cursor:pointer;min-width:280px;box-shadow:0 8px 22px rgba(0,0,0,.5);}
.cs-cta.disabled{background:#1a1e26;color:var(--dim);border-color:var(--brd);cursor:default;box-shadow:none;}
.prof-arch{font-size:12px;color:var(--gold);text-transform:uppercase;letter-spacing:.4px;margin-top:3px;}
@media(max-width:720px){ .cs-row{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;} .cs-card{flex:0 0 168px;width:168px;} .cs-stage .catpf{--pfs:128px;} }

/* ===== Перф на телефонах (Telegram WebView, iOS) — 26.09 =====
   Покадровые спрайты карты (background-position + steps) не ускоряются GPU: без своего слоя каждый шаг
   перерисовывает тайлы карты под спрайтом. Со своим слоем перерисовывается только сам спрайт. */
.tspr,.gobj .spr{will-change:transform;}
.flame{will-change:transform,opacity;}
/* под открытым плинко игра не рисуется */
html.lavka-on body>*:not(#lavka){visibility:hidden;}
@media (hover:none){
  /* drop-shadow пересчитывается на каждом кадре анимации объекта */
  .gobj{filter:none;}
  /* backdrop-filter поверх анимированной карты пересчитывается на каждый её кадр; фон у этих элементов и так плотный */
  .pill,.iconbtn,#zoombar .zb,#dbg button,.overlay,.sheet,.veil{-webkit-backdrop-filter:none;backdrop-filter:none;}
  .flame{mix-blend-mode:normal;}
  .flame.glow,.fx-aura{filter:none;}
}

/* ===== Safe-area: Telegram на весь экран (часы, чёлка, кнопки «Закрыть»/«⋯» поверх) — 26.09 =====
   --tg-safe-* ставит js/tg.js (устройство + шапка Telegram); вне Telegram — env() */
:root{--sat:max(env(safe-area-inset-top),var(--tg-safe-top,0px));--sab:max(env(safe-area-inset-bottom),var(--tg-safe-bottom,0px));}
#topbar{height:calc(var(--top) + var(--sat));padding-top:var(--sat);}
@media (max-width:899px){
  #tabbar{height:calc(64px + var(--sab));padding-bottom:var(--sab);}
  #stage{padding-bottom:calc(64px + var(--sab));}
  #zoombar{bottom:calc(80px + var(--sab));}
  #dbg{bottom:calc(76px + var(--sab));}
}