/* Стили Pages/Shared/_AreaStyles.cshtml (Д74). */
.cl-areas{display:grid;gap:10px;container-type:inline-size;min-width:0}
/* Верх справки: метки слева, «Выйти» — всегда у правого края (не бегает). */
/* Состояние места (подтвердил, зашёл в лобби) — ✅/⏳ справа в строке, ячейка не меняет размер. */
.cl-seat{position:relative}
.cl-st{flex:none;margin-left:auto;font-style:normal;font-size:13px;line-height:1}
.cl-pos{display:grid;gap:5px}
.cl-row{display:grid;grid-template-columns:30px 1fr;gap:6px;align-items:center}
.cl-row.cl-row--plain{grid-template-columns:1fr}
.cl-role{display:flex;align-items:center;justify-content:center}
.cl-role img{width:24px;height:24px;object-fit:contain;opacity:.9}
.cl-seats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.cl-seat{display:flex;align-items:center;gap:8px;min-height:40px;padding:3px 8px 3px 4px;border:1px solid var(--border-hairline);border-radius:var(--radius-sm);background:var(--ink-800);min-width:0}
.cl-seat[data-profile]{cursor:pointer}
.cl-seat__av{flex:none}
/* Ник и MMR — в пределах места: длинный ник — многоточием (ранг на аватаре — снаружи этого блока, его не режем). */
.cl-seat__who{flex:1;display:flex;align-items:baseline;gap:6px;min-width:0;overflow:hidden}
.cl-seat__who>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.cl-seat .cl-seat__who small{margin-left:auto;font-variant-numeric:tabular-nums}
.cl-seat .cl-st{margin-left:0}
/* Узко (телефон) — места роли друг под другом: ник и MMR всё так же в одну строку. */
@container (max-width:400px){.cl-seats{grid-template-columns:1fr}}
.cl-seat img.av{width:28px;height:28px;border-radius:var(--av-r);flex:none}
.cl-seat img.rk{width:24px;height:24px;object-fit:contain;flex:none}
.cl-seat__av b{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--av-r);background:var(--ink-600);color:var(--text-heading);font-size:12px}
.cl-seat small{color:var(--text-muted);font-size:12px;margin-left:auto;white-space:nowrap}
/* Привилегия игрока — цвет рамки, лёгкая заливка его цвета (--look) и мягкое свечение; ServerBoost — переливом рамки.
   Без значков: место в ячейке — на имя и MMR. Своё место — толстой рамкой акцента. */
.cl-seat.has-look{border-color:var(--look);background:linear-gradient(90deg,color-mix(in srgb,var(--look) 18%,transparent),transparent 70%);animation:cl-glow 2.6s ease-in-out infinite}
.cl-seat.look-boost{border-color:transparent;background:linear-gradient(var(--ink-800),var(--ink-800)) padding-box,linear-gradient(90deg,#ff73fa,#7aa2ff,#ff73fa) border-box;background-size:auto,200% 100%;animation:cl-glow 2.6s ease-in-out infinite,cl-shift 3s linear infinite}
@keyframes cl-glow{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 12px -2px var(--look)}}
@keyframes cl-shift{to{background-position:0 0,200% 0}}
@media (prefers-reduced-motion:reduce){.cl-seat.has-look{animation:none}}
.cl-seat.is-me{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
/* Своё место с оформлением: рамка — цвета оформления, «своё» — пунктиром акцента поверх. */
.cl-seat.is-me.has-look{outline:1px dashed var(--accent);outline-offset:2px}
.cl-seat.is-free{border-style:dashed;color:var(--text-muted)}
/* Гибкие роли: у места (состав набран) — другие роли игрока иконками. */
.cl-seat.is-free span{font-size:13px}
.cl-qwho{position:relative;display:inline-flex;border-radius:var(--av-r)}
.cl-qwho img.av,.cl-qwho b{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--av-r);object-fit:cover;background:var(--ink-600);box-shadow:0 0 0 2px var(--look,transparent);font-size:12px}
.cl-qwho img.rk{position:absolute;right:-6px;bottom:-4px;width:17px;height:17px;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.8))}
.cl-qwho.is-me{box-shadow:0 0 0 2px var(--accent)}
.cl-queue{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cl-queue__head{display:flex;align-items:center;gap:6px;color:var(--text-muted);font-size:13px;font-weight:600}
.cl-need{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;font-size:14px}
.cl-need b{color:var(--accent)}
.cl-plan{position:relative;outline:none}
.cl-plan__btn{color:var(--accent);font-size:13px;font-weight:600;cursor:help;border-bottom:1px dashed currentColor}
.cl-plan__pop{position:absolute;left:0;bottom:calc(100% + 6px);z-index:30;display:none;width:min(360px,calc(100vw - 40px));padding:10px 12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--ink-800);box-shadow:0 14px 30px rgba(0,0,0,.55);font-size:13px}
.cl-plan:hover .cl-plan__pop,.cl-plan:focus .cl-plan__pop,.cl-plan:focus-within .cl-plan__pop{display:grid;gap:4px}
.cl-plan__pop strong{color:var(--text-heading)}
/* «Могут свапнуться»: ник, роль сейчас → другие его роли; где есть место — ярко. */
.cl-swap{display:flex;align-items:center;gap:5px;font-size:13px}
.cl-swap b{min-width:0;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-heading);font-weight:600}
.cl-swap.is-me b{color:var(--accent)}
.cl-swap img{width:18px;height:18px;object-fit:contain;opacity:.45}
.cl-swap img:first-of-type{opacity:.9}
.cl-swap img.is-free{opacity:1;border-radius:4px;box-shadow:0 0 0 1px color-mix(in srgb,#3fb950 70%,transparent)}
.cl-swap i{font-style:normal;color:var(--text-muted)}
.cl-plan__pop small{color:var(--text-muted)}
/* «Выйти» — заметна, но не кричит, как «Покинуть комнату»: красноватый контур. */
/* Команды — отдельными блоками своего цвета; своя — обведена, с кнопкой «🎧 Голос команды». */
.cl-teams{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@container (max-width:430px){.cl-teams{grid-template-columns:1fr}}
.cl-team{--team:#57e08a;display:grid;gap:4px;align-content:start;padding:6px;border:1px solid color-mix(in srgb,var(--team) 30%,transparent);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--team) 6%,transparent)}
.cl-team--1{--team:#f0685a}
.cl-team.is-mine{border-color:color-mix(in srgb,var(--team) 70%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--team) 40%,transparent)}
.cl-team h4{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;min-height:24px;margin:0 0 2px;padding:0 2px;color:var(--team);font-size:14px}
.cl-team h4 small{color:var(--text-muted);font-size:12px;font-weight:400}
.cl-area{display:grid;gap:8px;min-width:0}
.cl-info{gap:8px}
/* Этапы: Запись → Подтверждение → Лобби → Матч; пройденные — зелёным, текущий — акцентом. */
.cl-steps{display:flex;gap:4px;margin:0;padding:0;list-style:none}
.cl-steps li{flex:1;min-width:0;padding-top:4px;border-top:3px solid var(--ink-600);color:var(--text-muted);font-size:11px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-steps li.is-done{border-color:color-mix(in srgb,#3fb950 60%,transparent);color:var(--text-body)}
.cl-steps li.is-now{border-color:var(--accent);color:var(--accent);font-weight:700}
.cl-facts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:13px}
.cl-facts b{color:var(--text-heading)}
.cl-avg{display:inline-flex;align-items:center;gap:5px}
.cl-avg img{width:24px;height:24px;object-fit:contain}
/* Какие ранги в составе: медаль и сколько человек — цифрой в уголке. */
.cl-spread{display:inline-flex;align-items:center;gap:3px}
.cl-spread i{position:relative;display:inline-flex;font-style:normal}
.cl-spread img{width:22px;height:22px;object-fit:contain}
.cl-spread em{position:absolute;right:-4px;bottom:-4px;min-width:13px;padding:0 3px;border-radius:7px;background:var(--ink-700);color:var(--text-heading);font-size:10px;font-style:normal;line-height:13px;text-align:center}
/* Разовая область — своей рамкой: заголовок, текст, справа таймер, полоса времени, кнопки. Отработала — тихая (без рамки акцента). */
.cl-task{padding:10px 12px;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--accent) 7%,transparent);scroll-margin:12px}
.cl-task.is-ok{border-color:color-mix(in srgb,#3fb950 50%,transparent);background:color-mix(in srgb,#3fb950 6%,transparent)}
.cl-task.is-quiet{border-color:var(--border-hairline);background:rgba(255,255,255,.02)}
.cl-task__top{display:flex;align-items:flex-start;gap:12px}
.cl-task__text{flex:1;min-width:0}
.cl-task h4{margin:0;color:var(--text-heading);font-size:15px}
.cl-task p{margin:2px 0 0;color:var(--text-muted);font-size:12px;line-height:1.4}
.cl-task__cap{color:var(--text-muted);font-size:12px;font-weight:600}
.cl-task__cap small{font-weight:400}
.cl-task__btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cl-timer{flex:none;display:grid;justify-items:end;line-height:1}
.cl-timer b{color:var(--accent);font:700 22px/1 ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}
.cl-timer small{margin-top:3px;color:var(--text-muted);font-size:11px}
.cl-task.is-ok .cl-timer b{color:#3fb950}
.cl-bar{height:4px;border-radius:2px;background:var(--ink-600);overflow:hidden}
.cl-bar i{display:block;height:100%;width:100%;background:var(--accent);transition:width 1s linear}
.cl-task.is-ok .cl-bar i{background:#3fb950}
/* Название и пароль лобби — кнопками: нажал — скопировано. */
.cl-creds{display:flex;flex-wrap:wrap;gap:6px}
.cl-cred{display:inline-flex;align-items:center;gap:6px;padding:5px 8px 5px 10px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--ink-800);color:var(--text-body);font:inherit;font-size:13px;cursor:pointer}
.cl-cred:hover{border-color:var(--accent)}
.cl-cred span{color:var(--text-muted);font-size:11px}
.cl-cred b{color:var(--text-heading);font-family:ui-monospace,Consolas,monospace;font-size:14px;user-select:all}
.cl-cred i{font-style:normal;font-size:12px;opacity:.75}
/* В звонке команды (group-call.js): в звонке — зелёное кольцо у аватара, говорит — ярче, заглушён тобой — тусклее. */
.cl-seat.in-call .cl-seat__av{border-radius:var(--av-r);box-shadow:0 0 0 2px #3fb950}
.cl-seat.is-talking .cl-seat__av{box-shadow:0 0 0 2px #3fb950,0 0 10px 2px rgba(63,185,80,.7)}
.cl-seat.is-quiet{opacity:.6}
.cl-seat__av .tn-av{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--av-r);background:var(--ink-600);color:var(--text-heading);font-size:12px}
/* Участники до сбора команд — кружками; подтвердил — зелёная галочка в уголке. */
.cl-qwho.is-ok::after{content:"✓";position:absolute;left:-3px;top:-4px;width:13px;height:13px;border-radius:50%;background:#3fb950;color:#0b0f19;font-size:9px;font-weight:800;line-height:13px;text-align:center}
/* Готовность команды в лобби матча: «готовы 3/5 · тег ⏳» или «✅ команда готова». */
.cl-team__state{margin-left:auto;color:var(--text-muted);font-size:12px;font-weight:600;text-transform:none;letter-spacing:0}
.cl-team__state.is-ok{color:#3fb950}
/* Шкала-счётчик (сколько подтвердили) — зелёная, без анимации времени. */
.cl-bar--count i{background:#3fb950;transition:width .4s ease}
/* Итог матча сбора (_MatchResult, Д88): вердикт строкой; сторона-победитель в составе — ярче и с золотой рамкой. */
.cl-result__verdict{font-size:16px}
.cl-result__verdict.is-win{color:#3fb950}
.cl-result__verdict.is-loss{color:#f85149}
.cl-team.is-win{border-color:#e3b341;box-shadow:0 0 0 1px color-mix(in srgb,#e3b341 45%,transparent);background:color-mix(in srgb,#e3b341 8%,transparent)}

/* Состав компактно (SeatLine, с этапа лобби: закрытое лобби, окно команды турнира): команды рядом, место — строкой: роль значком,
   аватар с оформлением Plus, ник, состояние; сила и ранг — в подсказке. */
.cl-teams--compact{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.cl-teams--compact .cl-team{gap:2px;padding:5px}
.cl-teams--compact .cl-team h4{flex-wrap:nowrap;min-height:0;font-size:12px;margin-bottom:2px}
.cl-teams--compact .cl-team h4>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-teams--compact .cl-team__state{flex:none;margin-left:auto;font-size:11px}
.cl-teams--compact .cl-row{grid-template-columns:18px minmax(0,1fr);gap:4px}
.cl-teams--compact .cl-row--plain{grid-template-columns:minmax(0,1fr)}   /* без ролей (Deadlock) — место на всю ширину */
.cl-teams--compact .cl-role img{width:16px;height:16px}
.cl-teams--compact .cl-seat{min-height:28px;gap:6px;padding:2px 6px 2px 3px}
.cl-teams--compact .cl-seat img.av,.cl-teams--compact .cl-seat__av b{width:22px;height:22px;font-size:11px}
.cl-teams--compact .cl-seat__who>span{font-size:13px}
.cl-teams--compact .cl-seat.is-me .cl-seat__who>span{color:var(--accent);font-weight:600}
.cl-st svg{display:block}
.cl-st{color:var(--text-muted)}
.cl-st.is-ok{color:#3fb950}
/* Памятка запуска лобби (_LaunchMemo): все на местах, теги, монетка. */
.cl-launch{display:grid;gap:4px;padding:8px 10px;border:1px solid var(--border-hairline);border-radius:var(--radius-xs);background:var(--ink-700);font-size:13px}
.cl-launch b{color:var(--text-heading);font-size:12px}
.cl-launch ul{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.cl-launch li{display:flex;gap:6px;align-items:center;color:var(--text-body)}
.cl-launch li i{display:inline-grid;color:var(--text-muted)}
.cl-launch li.is-ok i{color:#3fb950}
.cl-launch>span{color:var(--text-muted);font-size:12px}
.cl-launch>span.is-ok{color:#3fb950}
@container (max-width:430px){.cl-teams.cl-teams--compact{grid-template-columns:repeat(2,minmax(0,1fr))}}