/* Война картелей — итоги сезона (13.10.2026). Фон — «Командный центр над мегаполисом» владельца. Холст 1600×900 (--vs). */
.app > main:has(> .cs-screen) { padding:0; background:#02070d; }
.app.desktop > main:has(> .cs-screen) { height:calc(100vh - 86 * var(--u)); overflow:hidden; }
.cs-screen { width:100%; max-width:none; margin:0; color:#eef4fb; }
.cs-screen :is(h1,h2,h3,p,ol,ul,li) { margin:0; padding:0; list-style:none; }
.cs-desktop { height:100%; container:csroot / size; }
.cs-scene { --vs:min(calc((100vw - 228 * var(--u)) / 1600),calc((100vh - 86 * var(--u)) / 900)); position:relative; display:flex; flex-direction:column; gap:calc(14 * var(--vs)); height:100%; padding:calc(24 * var(--vs)) calc(48 * var(--vs)) calc(20 * var(--vs)); background:#02070d var(--bg) 50% 40% / cover no-repeat; overflow:auto; scrollbar-width:thin; }
.cs-scene::before { content:""; position:fixed; inset:0; pointer-events:none; background:linear-gradient(180deg,#02070ddd,#02070d88 30%,#02070daa 60%,#02070df0); }
.cs-scene > * { position:relative; }
.cs-head { display:flex; align-items:flex-end; justify-content:space-between; gap:calc(20 * var(--vs)); }
.cs-heading { padding:calc(2 * var(--vs)) calc(14 * var(--vs)); border-left:2px solid #ffc23d; text-shadow:0 2px 8px #000; }
.cs-heading p { color:#ffd77a; font-size:calc(12.5 * var(--vs)); font-weight:800; letter-spacing:.22em; }
.cs-heading h1 { margin-top:calc(4 * var(--vs)) !important; font-size:calc(40 * var(--vs)); font-weight:900; letter-spacing:.04em; text-transform:uppercase; }
.cs-heading span { display:block; margin-top:calc(4 * var(--vs)); color:#c6d2dc; font-size:calc(14.5 * var(--vs)); }
.cs-head-actions { display:flex; gap:calc(12 * var(--vs)); }
.cs-body { display:flex; flex-direction:column; gap:calc(16 * var(--vs)); }

/* пьедестал: 2 — 1 — 3 */
.cs-podium { display:grid; grid-template-columns:repeat(3,calc(330 * var(--vs))); justify-content:center; align-items:end; gap:calc(22 * var(--vs)); }
.cs-step, .cs-blade-card { --c:calc(16 * var(--vs)); --g:calc(5 * var(--vs)); --ac2:color-mix(in srgb,var(--ac) 55%,#fff); position:relative; isolation:isolate; }
:is(.cs-step,.cs-blade-card) > i { position:absolute; z-index:-1; pointer-events:none; }
.cs-l1 { inset:0; clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c)); background:linear-gradient(160deg,var(--ac2),var(--ac) 20%,color-mix(in srgb,var(--ac) 30%,#000) 55%,var(--ac)); opacity:.85; }
.cs-l2 { inset:1.5px; --k:calc(var(--c) - .6px); clip-path:polygon(var(--k) 0,100% 0,100% calc(100% - var(--k)),calc(100% - var(--k)) 100%,0 100%,0 var(--k)); background:#04060c; }
.cs-l3 { inset:var(--g); --k:calc(var(--c) - var(--g) * .41); clip-path:polygon(var(--k) 0,100% 0,100% calc(100% - var(--k)),calc(100% - var(--k)) 100%,0 100%,0 var(--k)); background:color-mix(in srgb,var(--ac) 22%,transparent); }
.cs-l4 { inset:calc(var(--g) + 1px); --k:calc(var(--c) - var(--g) * .41 - .4px); clip-path:polygon(var(--k) 0,100% 0,100% calc(100% - var(--k)),calc(100% - var(--k)) 100%,0 100%,0 var(--k)); background:radial-gradient(ellipse 70% 45% at 50% 25%,color-mix(in srgb,var(--ac) 28%,transparent),transparent 70%),linear-gradient(180deg,rgba(10,10,20,.9),rgba(3,5,10,.97)); }
.cs-step { display:flex; flex-direction:column; align-items:center; gap:calc(6 * var(--vs)); padding:calc(18 * var(--vs)) calc(18 * var(--vs)) calc(16 * var(--vs)); text-align:center; }
.cs-place-1 { min-height:calc(400 * var(--vs)); filter:drop-shadow(0 0 calc(20 * var(--vs)) color-mix(in srgb,var(--ac) 45%,transparent)); }
.cs-place-2 { min-height:calc(350 * var(--vs)); }
.cs-place-3 { min-height:calc(320 * var(--vs)); }
.cs-medal { position:absolute; top:calc(-26 * var(--vs)); right:calc(-14 * var(--vs)); width:calc(84 * var(--vs)); height:auto; filter:drop-shadow(0 4px 10px #000c); }
.cs-place-1 .cs-medal { width:calc(104 * var(--vs)); top:calc(-34 * var(--vs)); }
.cs-emblem { width:calc(150 * var(--vs)); height:calc(150 * var(--vs)); object-fit:contain; filter:drop-shadow(0 0 calc(16 * var(--vs)) color-mix(in srgb,var(--ac) 60%,transparent)); }
.cs-place-1 .cs-emblem { width:calc(190 * var(--vs)); height:calc(190 * var(--vs)); }
.cs-step small { color:#ffd77a; font-size:calc(12 * var(--vs)); font-weight:900; letter-spacing:.2em; text-transform:uppercase; }
.cs-step h2 { color:var(--ac2); font-size:calc(24 * var(--vs)); font-weight:900; letter-spacing:.04em; text-transform:uppercase; text-shadow:0 0 calc(12 * var(--vs)) var(--ac); }
.cs-champion { display:flex; flex-direction:column; gap:calc(2 * var(--vs)); color:#ffe08a; font-size:calc(19 * var(--vs)); font-weight:900; text-shadow:0 0 calc(10 * var(--vs)) #ffb21f; }
.cs-champion span { color:#b9a77a; font-size:calc(11 * var(--vs)); letter-spacing:.16em; text-transform:uppercase; text-shadow:none; }
.cs-stats { margin-top:auto !important; color:#b7c5d1; font-size:calc(13 * var(--vs)); }
.cs-rest { display:flex; justify-content:center; gap:calc(14 * var(--vs)); }
.cs-rest li { display:flex; align-items:center; gap:calc(10 * var(--vs)); padding:calc(6 * var(--vs)) calc(14 * var(--vs)); border-left:3px solid var(--ac); background:#04070ccc; }
.cs-rest img { width:calc(40 * var(--vs)); height:calc(40 * var(--vs)); object-fit:contain; }
.cs-rest b { color:color-mix(in srgb,var(--ac) 60%,#fff); }
.cs-rest small { color:#8ea3b4; font-size:calc(12 * var(--vs)); }
.cs-mine, .cs-blades { display:flex; flex-direction:column; gap:calc(10 * var(--vs)); }
:is(.cs-mine,.cs-blades) h3 { color:#ffd77a; font-size:calc(14 * var(--vs)); font-weight:900; letter-spacing:.2em; text-transform:uppercase; }
.cs-mine ul { display:flex; flex-wrap:wrap; gap:calc(10 * var(--vs)); }
.cs-mine li { display:flex; align-items:center; gap:calc(8 * var(--vs)); padding:calc(6 * var(--vs)) calc(14 * var(--vs)) calc(6 * var(--vs)) calc(8 * var(--vs)); border:1px solid #8a6a2a; background:#1a1206cc; font-weight:800; }
.cs-mine img { width:calc(36 * var(--vs)); height:calc(36 * var(--vs)); object-fit:contain; }
.cs-blade-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:calc(14 * var(--vs)); }
.cs-blade-card { display:flex; flex-direction:column; gap:calc(8 * var(--vs)); padding:calc(14 * var(--vs)) calc(16 * var(--vs)); }
.cs-blade-card header { display:flex; align-items:center; gap:calc(8 * var(--vs)); }
.cs-blade-card header img { width:calc(34 * var(--vs)); height:calc(34 * var(--vs)); object-fit:contain; }
.cs-blade-card header b { color:var(--ac2); font-size:calc(15 * var(--vs)); text-transform:uppercase; letter-spacing:.06em; }
.cs-blade-card ol { display:flex; flex-direction:column; gap:calc(6 * var(--vs)); }
.cs-blade-card li { display:flex; align-items:center; gap:calc(8 * var(--vs)); }
.cs-blade-card li img { width:calc(30 * var(--vs)); height:calc(40 * var(--vs)); object-fit:contain; }
.cs-blade-card li b { display:block; font-size:calc(14 * var(--vs)); }
.cs-blade-card li b small { color:#8ea3b4; }
.cs-blade-card li span > small { color:#b7c5d1; font-size:calc(12 * var(--vs)); }
.cs-blade-card p { color:#7d93a4; font-size:calc(13 * var(--vs)); }
.cs-screen button.cs-btn { --c:calc(9 * var(--vs)); min-height:calc(46 * var(--vs)); padding:0 calc(18 * var(--vs)); border:0; clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c)); background:linear-gradient(180deg,#0a1c28,#06111a); box-shadow:inset 0 0 0 1px #2a7aa0; color:#cfe6f2; font-size:calc(14 * var(--vs)); font-weight:850; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; }
.cs-screen button.cs-stand { box-shadow:inset 0 0 0 1px #8a6a2a; color:#e8d3a0; }
.cs-screen button.cs-btn:hover { filter:brightness(1.15); }
.cs-message { flex:1; display:grid; place-content:center; gap:calc(12 * var(--vs)); text-align:center; font-size:calc(17 * var(--vs)); }

@container csroot (aspect-ratio < 5/4) {
  .cs-desktop .cs-scene { --vs:calc(100cqw / 900); }
  .cs-desktop .cs-head { flex-direction:column; align-items:stretch; }
  .cs-desktop .cs-podium { grid-template-columns:repeat(3,1fr); }
  .cs-desktop .cs-blade-grid { grid-template-columns:repeat(2,1fr); }
}
.cs-mobile .cs-scene { --vs:1px; height:auto; min-height:100%; overflow:visible; padding:16px 12px 24px; }
.cs-mobile .cs-head { flex-direction:column; align-items:stretch; gap:12px; }
.cs-mobile .cs-heading h1 { font-size:28px; }
.cs-mobile .cs-head-actions { flex-direction:column; }
.cs-mobile .cs-podium { grid-template-columns:1fr; gap:30px; }
.cs-mobile .cs-podium .cs-place-1 { order:-1; }
.cs-mobile .cs-step { min-height:0; }
.cs-mobile .cs-rest { flex-direction:column; }
.cs-mobile .cs-blade-grid { grid-template-columns:1fr; }