/* ===================== ЛОББИ v3 ===================== */
/* Единица u = 1/100 высоты экрана (но не шире, чем позволяет ширина). Все размеры — от неё, всё на одной сетке. */
.lobby.bs{--u:min(1vh,.5vw);--pad:calc(var(--u)*3);--padL:max(var(--pad),calc(env(safe-area-inset-left) + var(--u)*1.5));--padR:max(var(--pad),calc(env(safe-area-inset-right) + var(--u)*1.5));
  font-family:B,G,'Arial Black',sans-serif}
.bs .lbl{font-family:B,G,sans-serif;font-weight:900;color:#fff;line-height:1;letter-spacing:.01em;text-transform:uppercase;
  -webkit-text-stroke:calc(var(--u)*.6) #120c24;paint-order:stroke fill;text-shadow:0 calc(var(--u)*.45) 0 #120c24}
.bs img.ic{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 calc(var(--u)*.5) calc(var(--u)*.3) rgba(0,0,0,.45))}

/* --- объёмная плитка: тёмный корпус, светлая верхняя кромка, глянец, «губа» снизу --- */
.bs .t{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;
  border-radius:calc(var(--u)*1.6);border:calc(var(--u)*.45) solid #120c24;
  background:linear-gradient(180deg,#56609a 0%,#3a426e 12%,#2c3358 55%,#252b4c 100%);
  box-shadow:0 calc(var(--u)*.9) 0 #120c24,inset 0 calc(var(--u)*.45) 0 rgba(255,255,255,.28),inset 0 calc(var(--u)*-.8) 0 rgba(0,0,0,.28);
  transition:transform .12s cubic-bezier(.3,1.8,.5,1),filter .15s}
.bs .t::before{content:'';position:absolute;left:calc(var(--u)*.8);right:calc(var(--u)*.8);top:calc(var(--u)*.6);height:38%;border-radius:calc(var(--u)*1.1) calc(var(--u)*1.1) 40% 40%/calc(var(--u)*1.1) calc(var(--u)*1.1) 30% 30%;
  background:linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.02));pointer-events:none}
.bs .t:hover{filter:brightness(1.08)}
.bs .t:active{transform:translateY(calc(var(--u)*.6)) scale(.96);box-shadow:0 calc(var(--u)*.3) 0 #120c24,inset 0 calc(var(--u)*.45) 0 rgba(255,255,255,.28),inset 0 calc(var(--u)*-.8) 0 rgba(0,0,0,.28)}
.bs .t.blue{background:linear-gradient(180deg,#7ac4ff 0%,#3a8cf0 14%,#2a6ad8 60%,#2258b8 100%)}
.bs .t.purple{background:linear-gradient(180deg,#b88aff 0%,#8a52e8 14%,#6a38c8 60%,#5a2cae 100%)}

/* --- верх слева: профиль и кубки --- */
.bs .prof{left:var(--padL);top:var(--pad);width:calc(var(--u)*13);height:calc(var(--u)*13);padding:0}
.bs .prof .ava{width:calc(var(--u)*10.6);height:calc(var(--u)*10.6);border-radius:calc(var(--u)*1.1);background:#3a3166 center/cover;border:calc(var(--u)*.4) solid #120c24;box-shadow:inset 0 0 0 calc(var(--u)*.3) rgba(255,255,255,.15)}
.bs .lvl{position:absolute;left:calc(var(--u)*-1.6);top:calc(var(--u)*-1.6);width:calc(var(--u)*5.4);height:calc(var(--u)*6);display:grid;place-items:center;font-size:calc(var(--u)*2.6);font-style:normal;
  background:linear-gradient(#6aa8ff,#2f62e0);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);z-index:2}
.bs .pname{position:absolute;left:var(--padL);top:calc(var(--pad) + var(--u)*14.6);width:calc(var(--u)*13);text-align:center;font-size:calc(var(--u)*2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.bs .tro{left:calc(var(--padL) + var(--u)*15);top:var(--pad);width:calc(var(--u)*30);height:calc(var(--u)*13);flex-direction:row;justify-content:flex-start;gap:calc(var(--u)*1.2);padding:0 calc(var(--u)*1.8) 0 calc(var(--u)*1.2)}
.bs .tro .ti{width:calc(var(--u)*10);height:calc(var(--u)*10);flex:none;margin-top:calc(var(--u)*-1)}
.bs .tro .col{flex:1;display:flex;flex-direction:column;align-items:stretch;gap:calc(var(--u)*1.1)}
.bs .tro .num{font-size:calc(var(--u)*5.2);text-align:left}
.bs .bar{position:relative;height:calc(var(--u)*2.6);border-radius:calc(var(--u)*1.3);background:#120c24;border:calc(var(--u)*.35) solid #120c24;overflow:hidden}
.bs .bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(#ffd27a,#ff9a1e 55%,#e87a10);box-shadow:inset 0 calc(var(--u)*.4) 0 rgba(255,255,255,.4)}

/* --- верх справа: монеты, кристаллы, меню --- */
.bs .cur{position:absolute;top:calc(var(--pad) + var(--u)*.8);right:calc(var(--padR) + var(--u)*13);display:flex;gap:calc(var(--u)*6)}
.bs .pill{position:relative;display:flex;align-items:center;justify-content:flex-end;width:calc(var(--u)*17);height:calc(var(--u)*5.6);padding-right:calc(var(--u)*1.6);
  background:linear-gradient(#120c24cc,#120c24ee);border-radius:calc(var(--u)*2.8);border:calc(var(--u)*.35) solid #120c24;box-shadow:inset 0 calc(var(--u)*.3) 0 rgba(255,255,255,.12)}
.bs .pill .ci{position:absolute;left:calc(var(--u)*-3);top:50%;width:calc(var(--u)*8.4);height:calc(var(--u)*8.4);transform:translateY(-50%)}
.bs .pill .lbl{font-size:calc(var(--u)*3.2)}
.bs .menu{right:var(--padR);top:var(--pad);width:calc(var(--u)*10);height:calc(var(--u)*8);gap:calc(var(--u)*1)}
.bs .menu i{display:block;width:calc(var(--u)*4.8);height:calc(var(--u)*.95);background:#fff;border-radius:calc(var(--u)*.5);box-shadow:0 0 0 calc(var(--u)*.35) #120c24;position:relative}

/* --- боковые кнопки: иконка «выпрыгивает» за верхний край --- */
.bs .side{width:calc(var(--u)*15);height:calc(var(--u)*13);justify-content:flex-end;padding-bottom:calc(var(--u)*1.4)}
.bs .side.l{left:var(--padL)}.bs .side.r{right:var(--padR)}
.bs .side .si{position:absolute;left:50%;top:calc(var(--u)*-3);width:calc(var(--u)*11.5);height:calc(var(--u)*11.5);transform:translateX(-50%);transition:transform .25s cubic-bezier(.3,1.8,.5,1)}
.bs .side:hover .si{transform:translateX(-50%) translateY(calc(var(--u)*-.6)) rotate(-4deg)}
.bs .side .lbl{font-size:calc(var(--u)*2.5);position:relative}
.bs .badge{position:absolute;top:calc(var(--u)*-1.4);right:calc(var(--u)*-1.4);min-width:calc(var(--u)*4.6);height:calc(var(--u)*4.6);padding:0 calc(var(--u)*.8);border-radius:calc(var(--u)*2.3);font-style:normal;
  display:grid;place-items:center;background:linear-gradient(#ff6a6a,#e8203a);border:calc(var(--u)*.4) solid #120c24;font-size:calc(var(--u)*2.4);z-index:2;animation:bob 2s ease-in-out infinite}
.bs .badge.green{background:linear-gradient(#6aff9a,#1ab84a)}
@keyframes bob{50%{transform:translateY(calc(var(--u)*-.6))}}
.bs .soon{position:absolute;left:50%;bottom:calc(var(--u)*-2);transform:translateX(-50%) rotate(-4deg);padding:calc(var(--u)*.55) calc(var(--u)*1.3);border-radius:calc(var(--u)*.8);
  background:linear-gradient(#ffe45a,#ffb400);border:calc(var(--u)*.35) solid #120c24;font-size:calc(var(--u)*1.8);color:#3a2000;-webkit-text-stroke:0;text-shadow:none;white-space:nowrap}

/* --- центр: плашка бойца и слоты друзей --- */
.bs .bplate{left:50%;top:calc(var(--pad) + var(--u)*2);transform:translateX(-50%);height:calc(var(--u)*7);flex-direction:row;gap:calc(var(--u)*1.2);padding:0 calc(var(--u)*1.6) 0 calc(var(--u)*1)}
.bs .bplate:active{transform:translateX(-50%) translateY(calc(var(--u)*.6)) scale(.96)}
.bs .bplate .ti{width:calc(var(--u)*6.4);height:calc(var(--u)*6.4);margin-top:calc(var(--u)*-.6)}
.bs .bplate .lbl{font-size:calc(var(--u)*3.4)}
.bs .bplate .nm{font-size:calc(var(--u)*2.6);color:#ffe27a;margin-left:calc(var(--u)*.6)}
.bs .pslot{position:absolute;top:calc(50% - var(--u)*2);width:calc(var(--u)*10);height:calc(var(--u)*9);transform:none}
.bs .pslot.l{left:calc(50% - var(--u)*36);right:auto}.bs .pslot.r{left:calc(50% + var(--u)*26);right:auto}
.bs .pslot .invite{position:relative;width:100%;height:100%;border-radius:calc(var(--u)*1.4);border:calc(var(--u)*.45) solid rgba(255,255,255,.85);background:linear-gradient(rgba(255,255,255,.32),rgba(255,255,255,.12));
  box-shadow:0 calc(var(--u)*.8) 0 rgba(10,6,30,.5);display:grid;place-items:center;backdrop-filter:none;-webkit-backdrop-filter:none;transition:transform .15s cubic-bezier(.3,1.8,.5,1);animation:none}
.bs .pslot .invite:active{transform:scale(.92)}
.bs .pslot .invite i{position:absolute;left:50%;top:50%;width:calc(var(--u)*4.6);height:calc(var(--u)*1.1);margin:calc(var(--u)*-.55) 0 0 calc(var(--u)*-2.3);background:#fff;border-radius:calc(var(--u)*.6);box-shadow:0 calc(var(--u)*.3) 0 rgba(10,6,30,.4)}
.bs .pslot .invite i+i{transform:rotate(90deg)}
.bs .pslot.filled{top:calc(50% - var(--u)*22);width:calc(var(--u)*22);height:calc(var(--u)*40)}
.bs .pslot.l.filled{left:calc(50% - var(--u)*48)}.bs .pslot.r.filled{left:calc(50% + var(--u)*26)}

/* --- низ: режим + ИГРАТЬ --- */
.bs .mode{right:calc(var(--padR) + var(--u)*44);bottom:var(--pad);width:calc(var(--u)*56);height:calc(var(--u)*12);flex-direction:row;justify-content:flex-start;gap:calc(var(--u)*1.6);padding:0 calc(var(--u)*2) 0 calc(var(--u)*1.2)}
.bs .mode .mi{width:calc(var(--u)*11);height:calc(var(--u)*11);flex:none;margin-top:calc(var(--u)*-2)}
.bs .mode .mt{display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--u)*.8);min-width:0}
.bs .mode .lbl{font-size:calc(var(--u)*3.8);white-space:nowrap}
.bs .mode .sub{font-size:calc(var(--u)*2.4);color:#ffb04a}
.bs .mtop{position:absolute;right:calc(var(--padR) + var(--u)*51);bottom:calc(var(--pad) + var(--u)*13.6);font-family:T,sans-serif;font-weight:800;font-size:calc(var(--u)*2.1);color:#d8d2ff;text-shadow:0 1px 2px #000;pointer-events:none}
.bs .minfo{position:absolute;right:calc(var(--padR) + var(--u)*43);bottom:calc(var(--pad) + var(--u)*9.8);width:calc(var(--u)*5);height:calc(var(--u)*5);border-radius:50%;
  background:linear-gradient(#7ac4ff,#2a6ad8);border:calc(var(--u)*.4) solid #120c24;box-shadow:0 calc(var(--u)*.4) 0 #120c24;display:grid;place-items:center;font:900 calc(var(--u)*3) B,G,serif;color:#fff;z-index:2}
.bs .play{right:var(--padR);bottom:var(--pad);width:calc(var(--u)*41);height:calc(var(--u)*14.5);border-radius:calc(var(--u)*1.6);
  background:linear-gradient(180deg,#fffbb0 0%,#ffe94a 10%,#ffd21a 50%,#ffbc00 51%,#ffa800 100%);
  box-shadow:0 calc(var(--u)*1) 0 #120c24,inset 0 calc(var(--u)*-1.1) 0 #e08400,inset 0 calc(var(--u)*.5) 0 #fffde0;overflow:hidden}
.bs .play::before{display:none}
.bs .play::after{content:'';position:absolute;top:0;left:-40%;width:22%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-20deg);animation:playshine 3.4s ease-in-out infinite;pointer-events:none}
@keyframes playshine{0%,65%{left:-40%}100%{left:130%}}
.bs .play .lbl{font-size:calc(var(--u)*6.4);-webkit-text-stroke:calc(var(--u)*.8) #120c24;text-shadow:0 calc(var(--u)*.6) 0 #120c24}
.bs .play small{font-family:T,sans-serif;font-weight:800;font-size:calc(var(--u)*1.8);color:#5a3600;margin-top:calc(var(--u)*.6)}
.bs .play.searching{background:linear-gradient(180deg,#a08aff,#6a4ad8 50%,#5232b8)}.bs .play.searching .lbl{font-size:calc(var(--u)*4)}.bs .play.searching small{color:#e8e0ff}
.bs .play .spin{display:inline-block;width:calc(var(--u)*3.2);height:calc(var(--u)*3.2);border-radius:50%;border:calc(var(--u)*.6) solid rgba(255,255,255,.3);border-top-color:#ffd23d;animation:sp .8s linear infinite;vertical-align:middle;margin-right:calc(var(--u)*1)}
.bs .onl{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--u)*1);top:auto;right:auto;width:auto;height:auto;padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  font-family:T,sans-serif;font-weight:800;font-size:calc(var(--u)*2);color:#d8d2ff;display:flex;align-items:center;gap:6px;text-shadow:0 1px 2px #000;pointer-events:none;white-space:nowrap}
.bs .menu2{top:calc(var(--pad) + var(--u)*10);right:var(--padR);background:#262c4c;border:calc(var(--u)*.4) solid #120c24;box-shadow:0 calc(var(--u)*.8) 0 #120c24;backdrop-filter:none;-webkit-backdrop-filter:none}
.bs .menu2 button{font-family:B,G,sans-serif;font-weight:900}
.bs .leavep{left:50%;right:auto;transform:translateX(-50%);bottom:calc(var(--pad) + var(--u)*17)}
/* узкие экраны (портрет): режим над кнопкой, валюты под шапкой */
@media (max-aspect-ratio:4/3){.bs .mode{right:var(--padR);bottom:calc(var(--pad) + var(--u)*17);width:calc(var(--u)*41)}.bs .mtop,.bs .minfo{display:none}.bs .cur{top:calc(var(--pad) + var(--u)*16);right:var(--padR)}}
/* боковые кнопки: явная раскладка (перекрывает старые правила .side из index.html) */
.lobby.bs .t.side{width:calc(var(--u)*15);height:calc(var(--u)*15);padding:0;gap:0;display:block}
.lobby.bs .t.side>.si{position:absolute;left:50%;top:calc(var(--u)*-1.6);width:calc(var(--u)*11);height:calc(var(--u)*11);transform:translateX(-50%);z-index:1}
.lobby.bs .t.side:hover>.si{transform:translateX(-50%) translateY(calc(var(--u)*-.6)) rotate(-4deg)}
.lobby.bs .t.side>.lbl{position:absolute;left:0;right:0;bottom:calc(var(--u)*1.6);text-align:center;font-size:calc(var(--u)*2.4);z-index:2;display:block}
.lobby.bs .t.side>.badge{position:absolute;top:calc(var(--u)*-1.6);right:calc(var(--u)*-1.6);left:auto;bottom:auto;z-index:3}
.lobby.bs .t.side>.soon{position:absolute;left:50%;bottom:calc(var(--u)*-2.2);top:auto;z-index:3}
.lobby.bs .t.side>.soon{width:max-content}

/* ===================== карточка бойца на весь экран ===================== */
.page.det{background:none!important}.page.det::before{display:none}.page.det>*:not(.bd3){display:none!important}
body.bd #lbg .img{filter:blur(3px) brightness(.5) saturate(1.2)}body.bd #lbg .gl,body.bd #lbg .castle,body.bd #lbg .moon{opacity:.5}
.bd3{position:absolute;inset:0;--u:min(1vh,.5vw);--pad:calc(var(--u)*3);--padL:max(var(--pad),calc(env(safe-area-inset-left) + var(--u)*1.5));--padR:max(var(--pad),calc(env(safe-area-inset-right) + var(--u)*1.5));pointer-events:none;
  background:radial-gradient(ellipse at 50% 70%,transparent 30%,rgba(8,4,24,.55) 80%)}
.bd3>*{pointer-events:auto}
.bd3 .back{left:var(--padL);top:var(--pad);width:calc(var(--u)*10);height:calc(var(--u)*8)}
.bd3 .back .lbl,.bd3 .arr .lbl{font-size:calc(var(--u)*6);margin-top:calc(var(--u)*-.8)}
.bd3 .arr{top:calc(50% - var(--u)*5);width:calc(var(--u)*7);height:calc(var(--u)*10)}
.bd3 .arr.l{left:calc(50% - var(--u)*30)}.bd3 .arr.r{left:calc(50% + var(--u)*23)}
.bd3 .bl{position:absolute;left:var(--padL);top:calc(var(--pad) + var(--u)*11);width:min(calc(var(--u)*46),30vw);display:flex;flex-direction:column;gap:calc(var(--u)*1.2);color:#fff}
.bd3 h2{margin:0;font-size:calc(var(--u)*8.5)}
.bd3 .rar3{align-self:flex-start;padding:calc(var(--u)*.6) calc(var(--u)*1.6);border-radius:calc(var(--u)*.8);border:calc(var(--u)*.35) solid #120c24;font:900 calc(var(--u)*1.9) B,G,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:#fff;
  -webkit-text-stroke:calc(var(--u)*.35) #120c24;paint-order:stroke fill;box-shadow:0 calc(var(--u)*.4) 0 #120c24}
.bd3 .rar3.rare{background:linear-gradient(#7aff8a,#22b14c)}.bd3 .rar3.mythic{background:linear-gradient(#ff7a8a,#d0203a)}.bd3 .rar3.epic{background:linear-gradient(#d88aff,#8a2ad8)}.bd3 .rar3.super{background:linear-gradient(#7ac4ff,#1f6ae0)}
.bd3 .role{font:900 calc(var(--u)*2.4) B,G,sans-serif;color:#ffd27a;text-shadow:0 2px 0 #120c24}
.bd3 .blurb{margin:0;font:800 calc(var(--u)*2.3)/1.35 T,sans-serif;color:#efeaff;text-shadow:0 2px 3px #000;
  background:linear-gradient(90deg,rgba(18,12,36,.75),rgba(18,12,36,.35));padding:calc(var(--u)*1.4) calc(var(--u)*1.6);border-radius:calc(var(--u)*1.4);border-left:calc(var(--u)*.7) solid #ffd23d}
.bd3 .ab3{background:rgba(18,12,36,.65);border-radius:calc(var(--u)*1.2);padding:calc(var(--u)*.9) calc(var(--u)*1.4);border-left:calc(var(--u)*.6) solid var(--c)}
.bd3 .ab3 em{display:block;font-style:normal;font-size:calc(var(--u)*1.5);color:var(--c);-webkit-text-stroke:calc(var(--u)*.3) #120c24}
.bd3 .ab3 b{font:900 calc(var(--u)*2.2) B,G,sans-serif;color:#fff}.bd3 .ab3 p{margin:calc(var(--u)*.3) 0 0;font:700 calc(var(--u)*1.8)/1.3 T,sans-serif;color:#cfc8ee}
.bd3 .br{position:absolute;right:var(--padR);top:calc(var(--pad) + var(--u)*11);width:min(calc(var(--u)*42),28vw);display:flex;flex-direction:column;gap:calc(var(--u)*1.6)}
.bd3 .st{position:relative;width:100%;height:calc(var(--u)*11);flex-direction:row;justify-content:flex-start;gap:calc(var(--u)*1.4);padding:0 calc(var(--u)*2) 0 calc(var(--u)*1.4)}
.bd3 .st.open{background:linear-gradient(180deg,#7a88d8 0%,#4a56a0 14%,#38407a 55%,#2c3264 100%)}
.bd3 .si3{width:calc(var(--u)*7);height:calc(var(--u)*7);border-radius:50%;display:grid;place-items:center;background:linear-gradient(#ffcf5a,#ff8a1e);border:calc(var(--u)*.4) solid #120c24;flex:none}
.bd3 [data-st="ult"] .si3{background:linear-gradient(#ffe45a,#e8a400)}.bd3 [data-st="hp"] .si3{background:linear-gradient(#7aff9a,#1ab84a)}
.bd3 .si3 svg{width:65%;height:65%}
.bd3 .st .nm{font:900 calc(var(--u)*2.4) B,G,sans-serif;color:#c9c4ff;text-transform:uppercase}
.bd3 .st b{margin-left:auto;font-size:calc(var(--u)*5)}
.bd3 .st .more{font:900 calc(var(--u)*4) B,G,sans-serif;color:#8a84c8;margin-left:calc(var(--u)*1);transition:transform .2s}.bd3 .st.open .more{transform:rotate(90deg);color:#fff}
.bd3 .sx{background:rgba(14,10,30,.85);border:calc(var(--u)*.35) solid #120c24;border-radius:calc(var(--u)*1.4);padding:calc(var(--u)*1) calc(var(--u)*1.6);margin-top:calc(var(--u)*-.8);animation:sxin .25s cubic-bezier(.2,1.3,.4,1)}
@keyframes sxin{from{opacity:0;transform:translateY(calc(var(--u)*-1.5))}}
.bd3 .sx div{display:flex;justify-content:space-between;gap:calc(var(--u)*2);padding:calc(var(--u)*.7) 0;border-bottom:1px solid rgba(255,255,255,.08);font:800 calc(var(--u)*2) T,sans-serif;color:#c9c4ee}
.bd3 .sx div:last-child{border:0}.bd3 .sx b{color:#fff;text-align:right;font-family:B,G,sans-serif;font-weight:900}
.bd3 .pick{right:var(--padR);bottom:var(--pad)}
.bd3 .pick.on{background:linear-gradient(180deg,#d8f0ff,#8aa8c8 50%,#6a88a8);box-shadow:0 calc(var(--u)*1) 0 #120c24}
.bd3 .br{bottom:calc(var(--pad) + var(--u)*17);overflow-y:auto;scrollbar-width:none}.bd3 .br::-webkit-scrollbar{display:none}

/* ===================== итоги боя ===================== */
.res3{--u:min(1vh,.5vw);--pad:calc(var(--u)*3);--padL:max(var(--pad),calc(env(safe-area-inset-left) + var(--u)*1.5));--padR:max(var(--pad),calc(env(safe-area-inset-right) + var(--u)*1.5));
  background:radial-gradient(ellipse at 50% 30%,#3a2a8a,#160e38 70%)!important;overflow:hidden;font-family:B,G,sans-serif}
.res3 .rays{position:absolute;left:50%;top:22%;width:220vmax;height:220vmax;transform:translate(-50%,-50%);border-radius:50%;opacity:.5;animation:rays 40s linear infinite;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.1) 0 8deg,transparent 8deg 20deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 45%);mask:radial-gradient(circle,#000 0,transparent 45%)}
.res3 .rays.win{background-color:transparent;filter:drop-shadow(0 0 0 #ffd23d)}
.res3 .rays.win::after,.res3 .rays.lose::after,.res3 .rays.draw::after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(255,200,60,.35),transparent 30%)}
.res3 .rays.lose::after{background:radial-gradient(circle,rgba(255,60,90,.35),transparent 30%)}.res3 .rays.draw::after{background:radial-gradient(circle,rgba(160,180,255,.3),transparent 30%)}
@keyframes rays{to{transform:translate(-50%,-50%) rotate(360deg)}}
.res3 .head{position:absolute;left:0;right:0;top:calc(var(--pad) + var(--u)*1);display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*1)}
.res3 h1{margin:0;font-size:calc(var(--u)*13);-webkit-text-stroke:calc(var(--u)*1.1) #120c24;text-shadow:0 calc(var(--u)*1) 0 #120c24;animation:respop .55s cubic-bezier(.2,1.6,.4,1) both;letter-spacing:.02em}
.res3 h1.win{color:#ffe25a}.res3 h1.lose{color:#ff6a7a}.res3 h1.draw{color:#d8e0ff}
@keyframes respop{from{transform:scale(.3) rotate(-6deg);opacity:0}}
.res3 .sub{font-size:calc(var(--u)*3.4);padding:calc(var(--u)*.6) calc(var(--u)*2.6);border-radius:calc(var(--u)*3);background:rgba(10,6,30,.6);border:calc(var(--u)*.35) solid #120c24}
.res3 .tro3{position:absolute;right:var(--padR);top:0;display:flex;align-items:center;gap:calc(var(--u)*1);padding:calc(var(--u)*.6) calc(var(--u)*2.4) calc(var(--u)*.6) calc(var(--u)*.6);border-radius:calc(var(--u)*3);
  background:linear-gradient(#3a426e,#262c4c);border:calc(var(--u)*.4) solid #120c24;box-shadow:0 calc(var(--u)*.7) 0 #120c24;animation:respop .5s .35s cubic-bezier(.2,1.6,.4,1) both}
.res3 .tro3 .ic{width:calc(var(--u)*7);height:calc(var(--u)*7)}.res3 .tro3 b{font-size:calc(var(--u)*4.4)}
.res3 .tro3.up b{color:#7aff8a}.res3 .tro3.down b{color:#ff7a8a}
.res3 .row3{position:absolute;left:var(--padL);right:var(--padR);top:calc(var(--u)*33);bottom:calc(var(--u)*21);display:flex;align-items:stretch;justify-content:center;gap:calc(var(--u)*2)}
.res3 .tm{display:flex;gap:calc(var(--u)*1.4);flex:1;justify-content:center}
.res3 .vs{align-self:center;font-size:calc(var(--u)*6);color:#fff;font-style:normal}
.res3 .pc3{position:relative;flex:1;max-width:calc(var(--u)*24);display:flex;flex-direction:column;border-radius:calc(var(--u)*1.6);border:calc(var(--u)*.45) solid #120c24;overflow:hidden;
  box-shadow:0 calc(var(--u)*.9) 0 #120c24;animation:resin .45s cubic-bezier(.2,1.3,.4,1) both}
.res3 .pc3:nth-child(2){animation-delay:.08s}.res3 .pc3:nth-child(3){animation-delay:.16s}.res3 .pc3:nth-child(4){animation-delay:.24s}.res3 .pc3:nth-child(5){animation-delay:.32s}
@keyframes resin{from{transform:translateY(calc(var(--u)*8));opacity:0}}
.res3 .pc3.blue{background:linear-gradient(180deg,#6ab4ff,#2a5ad8 60%,#1c3a9a)}.res3 .pc3.red{background:linear-gradient(180deg,#ff7a7a,#d02a4a 60%,#8a1a3a)}.res3 .pc3.ffa{background:linear-gradient(180deg,#a88aff,#5a3ac8 60%,#3a2488)}
.res3 .pc3.me{outline:calc(var(--u)*.6) solid #ffe25a;outline-offset:calc(var(--u)*.2)}
.res3 .pc3 .fig{flex:1;position:relative;min-height:0}
.res3 .pc3 .fig img{position:absolute;left:50%;bottom:0;height:115%;transform:translateX(-50%);filter:drop-shadow(0 calc(var(--u)*.6) 0 rgba(0,0,0,.35))}
.res3 .pc3 .nm{background:rgba(10,6,30,.75);padding:calc(var(--u)*.7) calc(var(--u)*1);display:flex;flex-direction:column;gap:calc(var(--u)*.2)}
.res3 .pc3 .nm b{font-size:calc(var(--u)*2.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.res3 .pc3 .nm span{font:800 calc(var(--u)*1.6) T,sans-serif;color:#c9c4ee}
.res3 .pc3 .ks{display:flex;gap:calc(var(--u)*1.4);padding:calc(var(--u)*.6) calc(var(--u)*1);background:rgba(10,6,30,.9)}
.res3 .pc3 .ks span{display:flex;align-items:center;gap:calc(var(--u)*.5);font:900 calc(var(--u)*2) B,G,sans-serif;color:#fff}.res3 .pc3 .ks svg{width:calc(var(--u)*2.4);height:calc(var(--u)*2.4)}
.res3 .mvp{position:absolute;top:calc(var(--u)*.8);left:calc(var(--u)*.8);z-index:2;padding:calc(var(--u)*.4) calc(var(--u)*1.2);border-radius:calc(var(--u)*.8);background:linear-gradient(#ffe45a,#ffb400);border:calc(var(--u)*.35) solid #120c24;font-size:calc(var(--u)*1.9);color:#fff}
.res3 .pl{position:absolute;top:calc(var(--u)*.8);right:calc(var(--u)*.8);z-index:2;font-style:normal;font-size:calc(var(--u)*4)}
.res3 .back3{left:var(--padL);bottom:var(--pad);width:calc(var(--u)*30);height:calc(var(--u)*12)}
.res3 .back3 .lbl{font-size:calc(var(--u)*3.6)}
.res3 h1{position:static!important;transform:none;left:auto;top:auto}
@keyframes respop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
.res3 .sub{position:static}
.res3 .pc3 .fig img{height:100%;max-width:100%;object-fit:contain;bottom:2%}