/* Война картелей: выбор картеля и значок на странице организации (13.10.2026). Фон — карта Вардема владельца. */
.app > main:has(> .ct-screen) { padding:0; background:#02070d; }
.app.desktop > main:has(> .ct-screen) { height:calc(100vh - 86 * var(--u)); overflow:hidden; }
.ct-screen { width:100%; max-width:none; margin:0; color:#eef4fb; }
.ct-screen :is(h1,h2,p,dl,dt,dd) { margin:0; }
.ct-screen.ct-desktop { height:100%; container:ctroot / size; }
.ct-screen .ct-scene { --vs:min(calc((100vw - 228 * var(--u)) / 1600),calc((100vh - 86 * var(--u)) / 900)); position:relative; display:flex; flex-direction:column; gap:calc(16 * var(--vs)); height:100%; padding:calc(28 * var(--vs)) calc(56 * var(--vs)) calc(22 * var(--vs)); background:#02070d url('/app/client/assets/ui/cartels/war-map.jpg') 50% 50% / cover no-repeat; overflow:hidden; }
.ct-screen .ct-scene::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 80% 70% at 50% 60%,#02070d99,#02070dee 90%),linear-gradient(180deg,#02070dcc,transparent 30%,transparent 70%,#02070dcc); }
.ct-screen .ct-scene > * { position:relative; }

.ct-screen .ct-head { display:flex; align-items:flex-end; justify-content:space-between; gap:calc(30 * var(--vs)); }
.ct-screen .ct-heading { padding:calc(4 * var(--vs)) calc(16 * var(--vs)); border-left:2px solid #ff7a1a; text-shadow:0 2px 8px #000; }
.ct-screen .ct-heading p { color:#ffb070; font-size:calc(13 * var(--vs)); font-weight:800; letter-spacing:.22em; }
.ct-screen .ct-heading h1 { margin-top:calc(6 * var(--vs)) !important; font-size:calc(40 * var(--vs)); font-weight:900; letter-spacing:.04em; text-transform:uppercase; }
.ct-screen .ct-heading span { display:block; margin-top:calc(6 * var(--vs)); max-width:calc(760 * var(--vs)); color:#b9c8d4; font-size:calc(15 * var(--vs)); line-height:1.4; }
.ct-screen .ct-note { max-width:calc(520 * var(--vs)); padding:calc(10 * var(--vs)) calc(16 * var(--vs)); border:1px solid #2a4a5c; background:#04101acc; color:#cfe0ea; font-size:calc(13.5 * var(--vs)); line-height:1.4; }
.ct-screen .ct-error { align-self:flex-start; padding:calc(8 * var(--vs)) calc(14 * var(--vs)); border:1px solid #ff4d5e; background:#2a0910cc; color:#ffb8bf; font-size:calc(14 * var(--vs)); }

.ct-screen .ct-grid { flex:1; min-height:0; display:grid; grid-template-columns:repeat(4,1fr); gap:calc(20 * var(--vs)); }
/* карточка картеля: премиальная рамка в цвет картеля */
.ct-screen .ct-card { --c:calc(18 * var(--vs)); --g:calc(5 * var(--vs)); --ac2:color-mix(in srgb,var(--ac) 55%,#fff); position:relative; isolation:isolate; display:flex; flex-direction:column; align-items:center; gap:calc(10 * var(--vs)); padding:calc(22 * var(--vs)) calc(22 * var(--vs)) calc(20 * var(--vs)); text-align:center; transition:transform .2s; }
.ct-screen .ct-card > i { position:absolute; z-index:-1; pointer-events:none; }
.ct-screen .ct-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) 18%,color-mix(in srgb,var(--ac) 30%,#000) 50%,var(--ac) 85%,var(--ac2)); opacity:.75; }
.ct-screen .ct-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; }
.ct-screen .ct-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); }
.ct-screen .ct-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% 40% at 50% 22%,color-mix(in srgb,var(--ac) 30%,transparent),transparent 70%),linear-gradient(115deg,transparent 30%,rgba(255,255,255,.035) 42%,transparent 54%),linear-gradient(180deg,rgba(10,10,20,.9),rgba(3,5,10,.96)); }
.ct-screen .ct-card::before { content:""; position:absolute; z-index:1; left:-1px; top:-1px; width:calc(var(--c) + 3px); height:calc(var(--c) + 3px); pointer-events:none; background:linear-gradient(135deg,transparent calc(50% - 1.5px),var(--ac2) calc(50% - 1.5px),#fff 50%,var(--ac2) calc(50% + 1.5px),transparent calc(50% + 1.5px)); filter:drop-shadow(0 0 calc(4 * var(--vs)) var(--ac)); }
.ct-screen .ct-card:hover { transform:translateY(calc(-4 * var(--vs))); }
.ct-screen .ct-mine .ct-l1 { opacity:1; }
.ct-screen .ct-mine { filter:drop-shadow(0 0 calc(16 * var(--vs)) color-mix(in srgb,var(--ac) 45%,transparent)); }
.ct-screen .ct-ribbon { position:absolute; top:calc(14 * var(--vs)); right:calc(14 * var(--vs)); padding:calc(3 * var(--vs)) calc(10 * var(--vs)); background:var(--ac); color:#05060a; font-size:calc(11 * var(--vs)); font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.ct-screen .ct-emblem { width:calc(190 * var(--vs)); height:calc(190 * var(--vs)); display:grid; place-items:center; }
.ct-screen .ct-emblem img { max-width:100%; max-height:100%; filter:drop-shadow(0 0 calc(18 * var(--vs)) color-mix(in srgb,var(--ac) 60%,transparent)); }
.ct-screen .ct-card h2 { color:var(--ac2); font-size:calc(25 * var(--vs)); font-weight:900; letter-spacing:.04em; line-height:1.1; text-transform:uppercase; text-shadow:0 0 calc(12 * var(--vs)) var(--ac); }
.ct-screen .ct-motto { color:#d7e2ec; font-size:calc(17 * var(--vs)); font-style:italic; }
.ct-screen .ct-special-note { color:#ffbf8a; font-size:calc(14.5 * var(--vs)); line-height:1.35; }
.ct-screen .ct-facts { width:100%; margin-top:auto !important; display:flex; flex-direction:column; gap:calc(6 * var(--vs)); padding-top:calc(10 * var(--vs)); border-top:1px solid color-mix(in srgb,var(--ac) 30%,transparent); }
.ct-screen .ct-facts div { display:flex; justify-content:space-between; gap:calc(10 * var(--vs)); font-size:calc(14.5 * var(--vs)); }
.ct-screen .ct-facts dt { color:#8ea3b4; letter-spacing:.06em; }
.ct-screen .ct-facts dd { color:var(--ac2); font-weight:800; text-align:right; }
.ct-screen .ct-facts .ct-clans { width:100%; color:#cfdbe5; text-align:center; }
.ct-screen button.ct-join { --c:calc(10 * var(--vs)); width:100%; min-height:calc(50 * 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,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) 40%,#000)); color:#fff; font-size:calc(17 * var(--vs)); font-weight:900; letter-spacing:.12em; text-transform:uppercase; text-shadow:0 1px 4px #000c; cursor:pointer; box-shadow:inset 0 2px 0 rgba(255,255,255,.45); }
.ct-screen button.ct-join:hover:not(:disabled) { filter:brightness(1.15); }
.ct-screen button.ct-join:disabled { cursor:default; filter:grayscale(.75) brightness(.6); }
.ct-screen .ct-foot { display:flex; }
.ct-screen button.ct-back { --c:calc(10 * var(--vs)); min-width:calc(240 * var(--vs)); min-height:calc(48 * 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(15 * var(--vs)); font-weight:850; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; }
.ct-screen .ct-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 ctroot (aspect-ratio < 5/4) {
  .ct-screen.ct-desktop .ct-scene { --vs:calc(100cqw / 900); overflow:auto; }
  .ct-screen.ct-desktop .ct-head { flex-direction:column; align-items:stretch; }
  .ct-screen.ct-desktop .ct-note { max-width:none; }
  .ct-screen.ct-desktop .ct-grid { flex:none; grid-template-columns:repeat(2,1fr); }
}
.ct-screen.ct-mobile .ct-scene { --vs:1px; height:auto; min-height:100%; overflow:visible; padding:18px 12px 24px; background-size:auto 100%; }
.ct-screen.ct-mobile .ct-head { flex-direction:column; align-items:stretch; gap:12px; }
.ct-screen.ct-mobile .ct-heading h1 { font-size:28px; }
.ct-screen.ct-mobile .ct-note { max-width:none; }
.ct-screen.ct-mobile .ct-grid { grid-template-columns:1fr; gap:14px; }
.ct-screen.ct-mobile .ct-card { display:grid; grid-template-columns:96px 1fr; grid-template-areas:"e n" "e m" "s s" "f f" "b b"; text-align:left; column-gap:14px; row-gap:6px; align-items:center; padding:18px 18px 16px; }
.ct-screen.ct-mobile .ct-emblem { grid-area:e; width:96px; height:96px; }
.ct-screen.ct-mobile .ct-card h2 { grid-area:n; font-size:21px; }
.ct-screen.ct-mobile .ct-motto { grid-area:m; font-size:14px; }
.ct-screen.ct-mobile .ct-special-note { grid-area:s; }
.ct-screen.ct-mobile .ct-facts { grid-area:f; }
.ct-screen.ct-mobile .ct-join { grid-area:b; }
.ct-screen.ct-mobile .ct-ribbon { top:10px; right:10px; font-size:10px; }

.org-cartel-badge .ocb-emblem { width:calc(62 * var(--oz)); height:calc(62 * var(--oz)); object-fit:contain; filter:drop-shadow(0 0 calc(8 * var(--oz)) var(--ac)); }
.org-cartel-badge .ocb-copy { display:flex; flex-direction:column; gap:calc(3 * var(--oz)); }
.org-cartel-badge small { color:#8ea3b4; font-size:calc(10 * var(--oz)); font-weight:800; letter-spacing:.18em; }
.org-cartel-badge b { color:color-mix(in srgb,var(--ac) 60%,#fff); font-size:calc(16 * var(--oz)); font-weight:900; letter-spacing:.04em; text-transform:uppercase; text-shadow:0 0 calc(8 * var(--oz)) var(--ac); }
.ocb-titles { display:flex; gap:calc(4 * var(--oz)); margin:0; padding:0; list-style:none; }
.ocb-titles img { width:calc(24 * var(--oz)); height:calc(24 * var(--oz)); object-fit:contain; }
.org-cartel-badge button.ocb-choose { padding:calc(4 * var(--oz)) calc(12 * var(--oz)); border:1px solid #ff7a1a; background:#2a1406; color:#ffd2ad; font-size:calc(11 * var(--oz)); font-weight:850; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; }
/* мобильная страница организации — строкой */
.organization-screen .org-cartel-badge { display:flex; align-items:center; gap:12px; width:100%; margin:10px 0; padding:10px 14px; border:1px solid color-mix(in srgb,var(--ac,#2a7aa0) 70%,transparent); background:#04070cdd; color:#eef4fb; text-align:left; font:inherit; cursor:pointer; --oz:1px; }
.organization-screen .ocb-empty { flex-wrap:wrap; }

/* Штаб организации: картель в центральном круге (13.10.2026) */
.organization-hub .org-core-cartel { cursor:pointer; }
.organization-hub .org-core-cartel:hover .org-scene-core-art { filter:saturate(1.15) brightness(1.12) drop-shadow(0 0 calc(18 * var(--oz)) rgba(22,204,255,.6)); }
.organization-hub .has-cartel::after { content:""; position:absolute; left:50%; top:50%; width:80%; height:80%; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle,#02060bf2 0 55%,#02060bc0 70%,transparent 100%); box-shadow:0 0 calc(22 * var(--oz)) color-mix(in srgb,var(--ac) 45%,transparent); pointer-events:none; }
.organization-hub .org-core-emblem { position:absolute; left:50%; top:50%; z-index:1; width:72%; height:72%; object-fit:contain; transform:translate(-50%,-50%); filter:drop-shadow(0 0 calc(14 * var(--oz)) color-mix(in srgb,var(--ac) 70%,transparent)); transition:transform .2s; }
.organization-hub .has-cartel:hover .org-core-emblem { transform:translate(-50%,-50%) scale(1.05); }
.organization-hub .org-core-cartel span { display:flex; flex-direction:column; align-items:center; gap:calc(4 * var(--oz)); }
.organization-hub .org-core-cartel span small { color:#8ea3b4; font-size:calc(10 * var(--oz)); font-weight:800; letter-spacing:.2em; }
.organization-hub .has-cartel span b { color:color-mix(in srgb,var(--ac) 60%,#fff); font-size:calc(15 * var(--oz)); font-weight:900; letter-spacing:.08em; text-transform:uppercase; text-shadow:0 0 calc(10 * var(--oz)) var(--ac); }
.organization-hub .no-cartel span b { color:#ffb070; font-size:calc(13 * var(--oz)); font-weight:900; letter-spacing:.16em; text-shadow:0 0 calc(10 * var(--oz)) #ff7a1a; animation:ocb-pulse 2.4s ease-in-out infinite; }
@keyframes ocb-pulse { 50% { opacity:.55; } }
@media (prefers-reduced-motion:reduce) { .organization-hub .no-cartel span b { animation:none; } }
.reduced-motion .organization-hub .no-cartel span b { animation:none; }
/* титулы под кругом штаба — крупнее (владелец 13.10.2026: «их практически не видно») */
.organization-hub .org-core-cartel .ocb-titles { gap:calc(10 * var(--oz)); margin-top:calc(4 * var(--oz)); pointer-events:auto; }
.organization-hub .org-core-cartel .ocb-titles img { width:calc(48 * var(--oz)); height:calc(48 * var(--oz)); filter:drop-shadow(0 0 calc(8 * var(--oz)) rgba(255,190,80,.55)) drop-shadow(0 2px 4px #000c); transition:transform .15s; }
.organization-hub .org-core-cartel .ocb-titles li:hover img { transform:scale(1.15); }
.organization-hub .org-core-cartel.has-cartel span { top:calc(300 * var(--oh)); }

/* Верхняя полоса (владелец 13.10.2026): ник и тег крупно, тег — плашкой в цвете картеля; уровень; «Профиль» — отдельной кнопкой справа */
/* 14.10 владелец: в верхней панели без рамок — тег клана просто цветом клана, «Профиль ›» — подписью; подсвечивается вся связка ник+аватар. */
.shell-identity .shell-clan-tag { padding:0; border:0; background:none; color:color-mix(in srgb,var(--tc,#54d7ff) 80%,#fff) !important; font-weight:800; letter-spacing:.06em; text-shadow:0 0 8px color-mix(in srgb,var(--tc,#54d7ff) 45%,transparent); }
.shell-identity .shell-profile-hint { display:flex; align-items:center; gap:4px; padding:0; border:0; background:none; color:#7fcbe6; font-size:9px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; transition:color .15s, text-shadow .15s; }
.shell-identity .shell-profile-hint::after { content:"›"; font-size:1.5em; line-height:.8; transition:transform .15s; }
.shell-identity:hover .shell-profile-hint, .shell-identity:focus-visible .shell-profile-hint { color:#fff; text-shadow:0 0 10px #54d7ffaa; }
.shell-identity:hover .shell-profile-hint::after { transform:translateX(3px); }
.shell-identity:hover strong { text-shadow:0 0 10px #54d7ff88; }
.desktop .shell-identity { max-width:calc(100% - 1400 * var(--u)); }
.desktop .shell-identity > span:nth-child(2) { min-width:0; }
.desktop .shell-identity .shell-clan-tag, .desktop .shell-identity em, .desktop .shell-identity .shell-profile-hint { flex:none; }
.desktop .shell-identity > span:nth-child(2) { display:flex; align-items:center; gap:calc(8 * var(--u)); }
.desktop .shell-identity strong { font-size:calc(18 * var(--u)); font-weight:800; }
.desktop .shell-identity .shell-clan-tag { font-size:calc(14 * var(--u)); line-height:calc(22 * var(--u)); }
.desktop .shell-identity em { margin-left:calc(4 * var(--u)); }
.desktop .shell-identity .shell-profile-hint { margin-left:calc(14 * var(--u)); padding:0; font-size:max(10px, calc(12 * var(--u))); }
.mobile .shell-identity .shell-profile-hint { display:none; }

/* Верхняя панель (этап 2 пропуска, 13.10.2026): портрет игрока. */
.shell-avatar img { object-fit:cover; object-position:50% 25%; }
/* 13.10 владелец: рамка аватара в верхней панели не нужна — там слишком мало места, она залезала на общую рамку панели.
   В панели только портрет; рамка — в профиле и в бою. */