/* DROPX battles.css — финальная версия (только внутри .bx). Подключать после style.css */
.bx{position:relative;max-width:1180px;margin:0 auto;padding:24px 16px 56px;color:#e8e9f1}
.bx-head{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px;padding:28px 30px;border:1px solid #232d3d;border-radius:24px;overflow:hidden;background:radial-gradient(70% 140% at 100% 0,#7c68ff30,transparent 62%),radial-gradient(40% 100% at 0 100%,#3fd2ff14,transparent 70%),linear-gradient(120deg,#131a26,#0a0f16)}
.bx-head h1{font:800 clamp(28px,4vw,46px)/1.05 'Space Grotesk',sans-serif;letter-spacing:-.05em;margin:6px 0 10px}
.bx-head p{color:#8d99ad;max-width:640px;margin:0;line-height:1.6}
.bx-filters{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.bx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}

/* карточка лобби */
.bx-card{position:relative;display:flex;flex-direction:column;gap:12px;overflow:hidden;padding:16px;border:1px solid #1f2836;border-radius:22px;
  background:radial-gradient(120% 55% at 50% 0,hsl(var(--h,260) 65% 26%/.5),transparent 66%),linear-gradient(180deg,#10151f,#090d13);box-shadow:0 14px 40px #0006,inset 0 1px #ffffff0a;transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.bx-card:hover{transform:translateY(-5px);border-color:hsl(var(--h,260) 55% 40%);box-shadow:0 26px 60px #000a,0 0 50px hsl(var(--h,260) 80% 50%/.14)}
.bx-card h3{margin:0;font:700 18px 'Space Grotesk',sans-serif;letter-spacing:-.03em}
.bx-top{display:flex;align-items:center;gap:8px}
.bx-n{margin-left:auto;color:#8d99ad;font-size:12px}
.bx-pill{padding:5px 9px;border-radius:999px;background:#ffffff14;font-size:10px;font-weight:800;letter-spacing:.1em}
.bx-pill--waiting{color:#b4a4ff;background:#8b5cf62e}
.bx-pill--live{color:#34d399;background:#34d39926}
.bx-pill--done{color:#9aa0b4}
.bx-pill--crazy{color:#fbbf24;background:#fbbf2426}
.bx-ctiles{display:grid;grid-template-columns:repeat(var(--n,1),minmax(0,190px));justify-content:center;gap:8px}
.bx-ct{position:relative;min-width:0}
.bx-ct small{display:block;margin-top:4px;overflow:hidden;color:#8d99ad;font-size:11px;text-align:center;white-space:nowrap;text-overflow:ellipsis}
.bx-ct>i{position:absolute;right:6px;top:6px;z-index:9;padding:3px 8px;border:1px solid #ffffff26;border-radius:999px;background:#080b10d9;font:800 11px Inter,sans-serif;font-style:normal}
.bx-players{display:flex;gap:6px;flex-wrap:wrap}
.bx-pl{display:flex;align-items:center;gap:7px;min-width:0;padding:5px 10px 5px 5px;border:1px solid transparent;border-radius:12px;background:#1b1b26}
.bx-pl .avatar{margin:0}
.bx-pl b{font-size:12px}
.bx-pl small{color:#8d99ad;font-size:9px;letter-spacing:.08em}
.bx-pl.is-me{border-color:#8b5cf699}
.bx-pl--open{opacity:.5;border:1px dashed #ffffff33;background:transparent}
.bx-fill{height:4px;overflow:hidden;border-radius:4px;background:#ffffff14}
.bx-fill i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#6d5ce0,#b39bff);transition:width .4s}
.bx-foot{display:flex;align-items:flex-end;gap:14px;margin-top:auto}
.bx-foot span{display:block;color:#8d99ad;font-size:11px}
.bx-foot b{font:800 19px 'Space Grotesk',sans-serif;white-space:nowrap}
.bx-pool b{color:#b3a5ff;font-size:15px}
.bx-foot .btn{margin-left:auto}
.bx-empty,.bx-off{grid-column:1/-1;padding:44px;text-align:center;color:#8d99ad;background:#12121a;border:1px dashed #ffffff1f;border-radius:20px}
.bx-off b{display:block;margin-bottom:6px;color:#fff;font-size:20px}

/* создание */
.bx-create{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.bx-cases{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;align-content:start;max-height:74vh;overflow:auto;padding:2px 4px 2px 2px}
.bx-case{position:relative;display:flex;flex-direction:column;gap:8px;padding:8px 8px 12px;border:1px solid #1f2836;border-radius:16px;background:linear-gradient(180deg,#10151f,#0a0e14);color:#e8e9f1;font:inherit;cursor:pointer;transition:transform .18s,border-color .18s,box-shadow .18s}
.bx-case:hover{transform:translateY(-3px);border-color:#8b5cf6;box-shadow:0 14px 30px #0008}
.bx-case.is-sel{border-color:#8b5cf6;box-shadow:0 0 0 1px #8b5cf6 inset,0 0 26px #8b5cf62e}
.bx-case .cx-art{width:100%}
.bx-case b{padding:0 4px;font-size:13px;text-align:center}
.bx-case small{color:#b4a4ff;font-weight:800}
.bx-badge{position:absolute;right:12px;top:12px;z-index:9;padding:3px 9px;border-radius:999px;background:#8b5cf6;color:#fff;font:800 11px Inter,sans-serif;font-style:normal;box-shadow:0 4px 14px #8b5cf666}
.bx-side{position:sticky;top:12px;display:flex;flex-direction:column;gap:14px}
.bx-side h3{margin:0}
.bx-opt{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bx-opt>span{width:60px;color:#8d99ad;font-size:12px}
.bx-sel{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow:auto}
.bx-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:#1b1b26;font-size:13px}
.bx-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bx-row button{border:0;background:transparent;color:#8d99ad;font-size:18px;line-height:1;cursor:pointer}
.bx-row button:hover{color:#f87171}
.bx-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:8px;border-top:1px solid #ffffff14}
.bx-total b{font-size:24px}

/* арена */
.bx-wait{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;padding:16px 18px}
.bx-actions{display:flex;gap:10px;flex-wrap:wrap}
.bx-rounds{display:flex;gap:10px;overflow-x:auto;margin:0 0 16px;padding:6px 4px 10px;scrollbar-width:thin}
.bx-rt{flex:0 0 118px;opacity:.6;transition:opacity .35s,transform .35s,filter .35s}
.bx-rt small{display:block;margin-top:4px;color:#8d99ad;font-size:10px;font-weight:800;letter-spacing:.1em;text-align:center}
.bx-rt.is-cur{opacity:1;transform:translateY(-4px);filter:drop-shadow(0 0 16px hsl(var(--h) 85% 55%/.55))}
.bx-rt.is-cur small{color:#fff}
.bx-rt.is-done{position:relative;opacity:.35}
.bx-rt.is-done:after{content:"✓";position:absolute;left:50%;top:38%;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#34d399;color:#04140d;font-weight:900;transform:translate(-50%,-50%)}
.bx-arena{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:14px}
.bx-col{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid #ffffff14;border-radius:20px;background:linear-gradient(180deg,#12161f,#0a0e14);transition:.3s}
.bx-col--open{opacity:.45;border-style:dashed}
.bx-col.is-win{border-color:#fbbf24;box-shadow:0 0 0 1px #fbbf2466,0 16px 44px #fbbf2420}
.bx-ph{display:flex;align-items:center;gap:10px}
.bx-ph small{display:block;color:#8d99ad;font-size:10px;letter-spacing:.08em}
.bx-ph em{margin-left:auto;padding:4px 8px;border-radius:999px;background:#fbbf24;color:#1b1400;font-size:10px;font-style:normal;font-weight:800;letter-spacing:.1em}
.bx-sum{font:800 26px 'Space Grotesk',sans-serif;letter-spacing:-.02em}
.bx-items{display:flex;flex-direction:column;gap:8px}
.bx-it{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px;border-left:3px solid var(--c,#8b5cf6);border-radius:12px;background:#1b1b26;animation:bxin .4s ease both}
.bx-it img{width:56px;height:42px;object-fit:contain}
.bx-it b{display:block;font-size:12px;line-height:1.3}
.bx-it small{color:#b4a4ff;font-weight:700}
.bx-it--wait{justify-content:center;border-left-color:#ffffff1f;color:#5b6177;font-size:20px;font-weight:800;animation:none}
.bx-it--wait.is-spin{color:#b4a4ff;animation:bxpulse .9s ease-in-out infinite}
@keyframes bxin{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes bxpulse{50%{background:#8b5cf62e}}
.bx-result{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:16px;padding:22px;border:1px solid #ffffff1a;border-radius:20px;background:#12121a}
.bx-result.is-me{border-color:#34d399;background:linear-gradient(135deg,#34d3991f,#12121a)}
.bx-result b{font-size:22px}
.bx-result span{color:#8d99ad}
@media(max-width:860px){.bx-create{grid-template-columns:1fr}.bx-side{position:static}.bx-arena{grid-template-columns:repeat(2,minmax(0,1fr))}.bx-head{padding:20px}}
@media(max-width:520px){.bx-grid{grid-template-columns:1fr}.bx-arena{grid-template-columns:1fr}.bx-rt{flex-basis:96px}}
@media(prefers-reduced-motion:reduce){.bx-card,.bx-case,.bx-rt,.bx-it{transition:none;animation:none}}