/* Война картелей — карта Вардема (13.10.2026). Карта владельца; районы, рамки и панели — кодом. Холст 1600×900 (--vs). */
.app > main:has(> .cw-screen) { padding:0; background:#02070d; }
.app.desktop > main:has(> .cw-screen) { height:calc(100vh - 86 * var(--u)); overflow:hidden; }
.cw-screen { width:100%; max-width:none; margin:0; color:#eef4fb; }
.cw-screen :is(h1,h2,h3,p,ol,li) { margin:0; padding:0; list-style:none; }
.cw-desktop { height:100%; container:cwroot / size; }
.cw-scene { --vs:min(calc((100vw - 228 * var(--u)) / 1600),calc((100vh - 86 * var(--u)) / 900)); position:relative; display:flex; flex-direction:column; gap:calc(12 * var(--vs)); height:100%; padding:calc(22 * var(--vs)) calc(40 * var(--vs)) calc(18 * var(--vs)); background:radial-gradient(ellipse at 40% 50%,#08202c,#02070d 70%); overflow:hidden; }
.cw-head { display:flex; align-items:flex-end; justify-content:space-between; gap:calc(20 * var(--vs)); }
.cw-heading { padding:calc(2 * var(--vs)) calc(14 * var(--vs)); border-left:2px solid #ff7a1a; }
.cw-heading p { color:#ffb070; font-size:calc(12.5 * var(--vs)); font-weight:800; letter-spacing:.22em; }
.cw-heading h1 { margin-top:calc(4 * var(--vs)) !important; font-size:calc(36 * var(--vs)); font-weight:900; letter-spacing:.04em; text-transform:uppercase; }
.cw-phase { display:flex; flex-direction:column; align-items:flex-end; gap:calc(2 * var(--vs)); padding:calc(8 * var(--vs)) calc(16 * var(--vs)); border:1px solid #ff7a1a88; background:linear-gradient(90deg,transparent,#2a140699); }
.cw-phase b { color:#ffd2ad; font-size:calc(17 * var(--vs)); font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.cw-phase small { color:#c9b7a8; font-size:calc(12.5 * var(--vs)); }
.cw-error { align-self:flex-start; padding:calc(6 * var(--vs)) calc(12 * var(--vs)); border:1px solid #ff4d5e; background:#2a0910cc; color:#ffb8bf; font-size:calc(13.5 * var(--vs)); }

.cw-body { flex:1; min-height:0; display:grid; grid-template-columns:1fr calc(400 * var(--vs)); gap:calc(16 * var(--vs)); }
.cw-mapwrap { position:relative; min-width:0; display:flex; align-items:flex-start; }
.cw-map { position:relative; width:100%; aspect-ratio:1672 / 941; max-height:100%; border:1px solid #1f5d78; box-shadow:0 0 calc(30 * var(--vs)) #000c,inset 0 0 calc(40 * var(--vs)) #000a; overflow:hidden; }
.cw-map > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.75) brightness(.8); }
.cw-map > svg { position:absolute; inset:0; width:100%; height:100%; }
.cw-district { fill:color-mix(in srgb,var(--hc) 24%,transparent); stroke:var(--hc); stroke-width:3; stroke-linejoin:round; cursor:pointer; transition:fill .2s,stroke-width .2s; filter:drop-shadow(0 0 6px var(--hc)); }
.cw-garrison { fill:rgba(160,180,195,.06); stroke:rgba(160,180,195,.45); stroke-width:2; filter:none; }
.cw-district:hover { fill:color-mix(in srgb,var(--hc) 36%,transparent); stroke-width:4; }
.cw-garrison:hover { fill:rgba(200,220,235,.14); }
.cw-selected { stroke:#fff; stroke-width:5; fill:color-mix(in srgb,var(--hc) 34%,transparent); filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 4px var(--hc)); }
.cw-target { stroke-dasharray:14 8; }
.cw-label { position:absolute; z-index:2; display:flex; flex-direction:column; align-items:center; gap:calc(2 * var(--vs)); transform:translate(-50%,-50%); pointer-events:none; text-align:center; text-shadow:0 1px 3px #000,0 0 8px #000; }
.cw-label b { color:#fff; font-size:calc(14 * var(--vs)); font-weight:900; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; }
.cw-label span { display:flex; align-items:center; gap:calc(4 * var(--vs)); padding:calc(1 * var(--vs)) calc(8 * var(--vs)); background:#02070dcc; border:1px solid color-mix(in srgb,var(--hc) 60%,transparent); color:color-mix(in srgb,var(--hc) 55%,#fff); font-size:calc(11 * var(--vs)); font-weight:750; white-space:nowrap; }
.cw-label span img { width:calc(18 * var(--vs)); height:calc(18 * var(--vs)); object-fit:contain; }
.cw-label .cw-tag { color:#ffb070; font-style:normal; font-size:calc(16 * var(--vs)); text-shadow:0 0 8px #ff7a1a; }
.cw-label-selected b { color:#ffe6cf; }

/* панели в премиальной рамке */
.cw-panel, .cw-card { --ac:#2fa8ff; --c:calc(14 * var(--vs)); --g:calc(4 * var(--vs)); --ac2:color-mix(in srgb,var(--ac) 55%,#fff); position:relative; isolation:isolate; padding:calc(14 * var(--vs)) calc(18 * var(--vs)); }
:is(.cw-panel,.cw-card) > i { position:absolute; z-index:-1; pointer-events:none; }
.cw-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(120deg,var(--ac2),var(--ac) 18%,color-mix(in srgb,var(--ac) 30%,#000) 50%,var(--ac) 85%); opacity:.8; }
.cw-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; }
.cw-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) 20%,transparent); }
.cw-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% 80% at 0 0,color-mix(in srgb,var(--ac) 14%,transparent),transparent 60%),linear-gradient(180deg,rgba(8,12,20,.95),rgba(3,6,11,.97)); }

.cw-panel { display:flex; flex-direction:column; gap:calc(8 * var(--vs)); }
.cw-panel h2 { color:var(--ac2); font-size:calc(22 * var(--vs)); font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.cw-holder { display:flex; align-items:center; gap:calc(10 * var(--vs)); font-size:calc(15 * var(--vs)); font-weight:800; }
.cw-holder img { width:calc(40 * var(--vs)); height:calc(40 * var(--vs)); object-fit:contain; }
.cw-holder small, .cw-wins > small { display:block; color:#8ea3b4; font-size:calc(11 * var(--vs)); font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.cw-meta, .cw-threshold, .cw-note { color:#a9bccb; font-size:calc(12.5 * var(--vs)); line-height:1.4; }
.cw-note { color:#ffd2ad; }
.cw-wins { display:flex; flex-direction:column; gap:calc(5 * var(--vs)); }
.cw-win { display:grid; grid-template-columns:calc(140 * var(--vs)) 1fr calc(26 * var(--vs)); align-items:center; gap:calc(8 * var(--vs)); font-size:calc(12.5 * var(--vs)); }
.cw-win span { color:color-mix(in srgb,var(--wc) 60%,#fff); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cw-win i { height:calc(8 * var(--vs)); background:#ffffff12; }
.cw-win i b { display:block; height:100%; background:var(--wc); box-shadow:0 0 calc(8 * var(--vs)) var(--wc); }
.cw-win em { font-style:normal; font-weight:900; text-align:right; }
.cw-panel-hint p { color:#cfdbe5; font-size:calc(15 * var(--vs)); }

.cw-side { min-height:0; display:flex; flex-direction:column; gap:calc(12 * var(--vs)); overflow-y:auto; scrollbar-width:thin; }
.cw-card { display:flex; flex-direction:column; gap:calc(8 * var(--vs)); font-size:calc(14 * var(--vs)); }
.cw-clan-head { display:flex; align-items:center; gap:calc(12 * var(--vs)); }
.cw-clan-head img { width:calc(56 * var(--vs)); height:calc(56 * var(--vs)); object-fit:contain; filter:drop-shadow(0 0 calc(8 * var(--vs)) var(--ac)); }
.cw-clan-head small { display:block; color:var(--ac2); font-size:calc(12 * var(--vs)); font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.cw-clan-head b { font-size:calc(18 * var(--vs)); font-weight:900; }
.cw-clan p { color:#cfdbe5; line-height:1.35; }
.cw-attacks { font-weight:850; color:#fff !important; }
.cw-attacks span { color:#9fb6c6; font-weight:700; }
.cw-clan-empty { --ac:#ff7a1a; }
.cw-standings { --ac:#7f95a6; }
.cw-standings h3 { color:#cfe0ea; font-size:calc(13 * var(--vs)); font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
.cw-standings ol { display:flex; flex-direction:column; gap:calc(6 * var(--vs)); }
.cw-standings li { display:grid; grid-template-columns:calc(18 * var(--vs)) calc(34 * var(--vs)) 1fr; align-items:center; gap:calc(8 * var(--vs)); padding:calc(4 * var(--vs)) calc(6 * var(--vs)); border-left:3px solid var(--rc); background:linear-gradient(90deg,color-mix(in srgb,var(--rc) 12%,transparent),transparent); }
.cw-standings li.cw-mine { background:linear-gradient(90deg,color-mix(in srgb,var(--rc) 26%,transparent),transparent); }
.cw-standings em { font-style:normal; font-weight:900; color:#cfdbe5; }
.cw-standings img { width:calc(34 * var(--vs)); height:calc(34 * var(--vs)); object-fit:contain; }
.cw-standings b { display:block; color:color-mix(in srgb,var(--rc) 60%,#fff); font-size:calc(14 * var(--vs)); }
.cw-standings small { color:#8ea3b4; font-size:calc(11.5 * var(--vs)); }

.cw-screen button.cw-btn { --c:calc(9 * var(--vs)); min-height:calc(42 * var(--vs)); padding:0 calc(16 * 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; }
.cw-screen button.cw-primary { background:linear-gradient(180deg,rgba(255,255,255,.2),transparent 46%,rgba(0,0,0,.3)),linear-gradient(180deg,#ffb070,#ff7a1a 50%,#7a3008); box-shadow:inset 0 2px 0 rgba(255,255,255,.45); color:#fff; text-shadow:0 1px 3px #000a; }
.cw-screen button.cw-attack { min-height:calc(52 * var(--vs)); font-size:calc(18 * var(--vs)); background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 46%,rgba(0,0,0,.3)),linear-gradient(180deg,var(--ac2),var(--ac) 50%,color-mix(in srgb,var(--ac) 35%,#000)); box-shadow:inset 0 2px 0 rgba(255,255,255,.45); color:#fff; text-shadow:0 1px 4px #000c; }
.cw-screen button.cw-btn:hover:not(:disabled) { filter:brightness(1.15); }
.cw-screen button.cw-btn:disabled { cursor:default; filter:grayscale(.7) brightness(.6); }
.cw-screen button.cw-stand { align-self:flex-start; box-shadow:inset 0 0 0 1px #8a6a2a; color:#e8d3a0; font-size:calc(12 * var(--vs)); }
.cw-message { flex:1; display:grid; place-content:center; gap:calc(12 * var(--vs)); color:#cfe0ea; font-size:calc(17 * var(--vs)); text-align:center; }

@container cwroot (aspect-ratio < 5/4) {
  .cw-desktop .cw-scene { --vs:calc(100cqw / 900); overflow:auto; }
  .cw-desktop .cw-body { flex:none; grid-template-columns:1fr; }
  .cw-desktop .cw-mapwrap { flex-direction:column; }
  .cw-desktop .cw-side { overflow:visible; }
}
.cw-mobile .cw-scene { --vs:1px; height:auto; min-height:100%; overflow:visible; padding:16px 10px 24px; }
.cw-mobile .cw-head { flex-direction:column; align-items:stretch; gap:10px; }
.cw-mobile .cw-phase { align-items:flex-start; }
.cw-mobile .cw-body { grid-template-columns:1fr; }
.cw-mobile .cw-label b { font-size:8.5px; letter-spacing:.03em; }
.cw-mobile .cw-label span { display:none; }
.cw-mobile .cw-side { overflow:visible; }
.cw-garrison.cw-selected { fill:rgba(255,255,255,.07); stroke:#fff; }
.cw-head-right { display:flex; align-items:center; gap:calc(14 * var(--vs)); }
.cw-screen button.cw-back { min-height:calc(46 * var(--vs)); }
.cw-mobile .cw-head-right { flex-direction:column-reverse; align-items:stretch; }
.cw-screen button.cw-season { box-shadow:inset 0 0 0 1px #8a6a2a; color:#ffe08a; }