/* Clans (#/clans) — «КЛАНЫ», drawn from the Claude Design console mock.
   Every number below is copied from the mock's inline styles, not eyeballed:
   the mock writes exact pixels, so a port that guesses is a port that drifts.
   Scoped under .cl-host / .cl-* so the file is inert elsewhere.

   THE LADDER, and why it is not the mock's. The mock has two readings — a wide
   one (four panels) and a compact one (a single scrolling column) — and it
   never drew the width this console actually has at a 1280 window. The mock's
   laptop gives the scene 900px because its context column is 300; ours is 344
   at 1280, so the scene is 858. The thresholds below are therefore the shell's
   own documented budget (shell.css, «WINDOW CLASSES»): three or more columns
   need >= 900 scene pixels, two need >= 620. Four columns at 858 would be
   204px each, which clips the roster's names and the board's clan names.

   Read narrow-first: the base rules are the one-column phone reading and the
   two @container blocks add the wide ones. */

#view.cl-host,
#scene.shell-scene #view.cl-host {
  max-width: none;
  padding: 12px 12px 16px;
  overflow-x: hidden;
}
.cl-screen { display: grid; grid-template-rows: auto auto; gap: 11px; min-width: 0; }

/* === head strip ===
   mock: padding 16px 20px, r18, 1px rgba(167,139,250,.26), a 115deg gradient
   and an 80px sheen that crosses it every 7s. */
.cl-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 18px;
  border: 1px solid rgba(167, 139, 250, 0.26);
  background: linear-gradient(115deg, rgba(40, 24, 74, 0.8), rgba(18, 12, 34, 0.6));
}
.cl-paid-banner { position:absolute; inset:0 auto 0 0; width:118px; height:100%; object-fit:cover; opacity:.24; mix-blend-mode:screen; pointer-events:none; }
.cl-paid-hall { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 58%; opacity:.2; mix-blend-mode:screen; pointer-events:none; }
.cl-paid-monument { position:absolute; right:-16px; bottom:-28px; width:145px; height:145px; object-fit:contain; opacity:.38; mix-blend-mode:screen; pointer-events:none; filter:drop-shadow(0 0 16px #76ffe355); }
.cl-paid-ritual-art { position:absolute; right:0; bottom:-34px; width:150px; height:150px; object-fit:cover; border-radius:50%; opacity:.28; mix-blend-mode:screen; pointer-events:none; filter:drop-shadow(0 0 18px #71ffe055); }
.cl-paid-motto { position:absolute; left:14px; bottom:5px; z-index:2; max-width:52%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#efd487; font:900 7px/1 var(--font-mono); letter-spacing:.12em; text-shadow:0 0 10px #d5a84d; }
.cl-paid-ritual { position:absolute; right:12px; top:5px; z-index:2; max-width:40%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:3px 7px; border:1px solid #75ffe066; border-radius:999px; color:#baffeb; background:#101d1dcc; font:900 7px/1 var(--font-mono); letter-spacing:.06em; animation:cl-ritual-pulse 2.8s ease-in-out infinite; }
.cl-paid-broadcast-art { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 58%;opacity:.18;mix-blend-mode:screen;pointer-events:none; }
.cl-paid-broadcast { position:absolute;right:12px;bottom:5px;z-index:2;max-width:43%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 8px;border:1px solid #d6b65f88;border-radius:999px;color:#ffe6a2;background:#261e12dd;font:900 7px/1 var(--font-mono);letter-spacing:.09em;animation:cl-broadcast-tune 3.2s ease-in-out infinite; }
.cl-paid-decree { position:absolute;left:50%;bottom:5px;z-index:3;max-width:42%;transform:translateX(-50%) rotate(-1deg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 9px;border:2px double #d3b15d;border-radius:4px;color:#f8dfa0;background:#11170fee;font:900 7px/1 var(--font-mono);letter-spacing:.08em;box-shadow:0 0 13px #9a63e044; }
.cl-hero.has-clan-hall-house-root { border-color:#cba95f;background:linear-gradient(120deg,#08150f,#1a1022 62%,#080907);box-shadow:inset 0 0 30px #4ad39522,0 0 20px #9960dd22; }
.cl-hero:is(.has-clan-hall-last-human-datacenter,.has-clan-hall-bot-farm-boardroom,.has-clan-hall-rss-archive,.has-clan-hall-dead-internet-society) { border-color:#52ddea;background:linear-gradient(120deg,#040b10,#11190a 62%,#040607);box-shadow:inset 0 0 34px #b7ff2822,0 0 22px #52ddea22; }
.cl-hero:is([class*="has-clan-decree-humans-"],[class*="has-clan-decree-bots-"],[class*="has-clan-decree-rss-"],[class*="has-clan-decree-comments-"],[class*="has-clan-decree-no-algorithm"],[class*="has-clan-decree-organic-"],[class*="has-clan-decree-one-soul"],[class*="has-clan-decree-dead-internet"]) .cl-hero-tag { color:#eaffff;border-color:#52ddea;text-shadow:0 0 8px #b7ff28; }
.cl-hero:is([class*="has-clan-broadcast-human-"],[class*="has-clan-broadcast-bot-"],[class*="has-clan-broadcast-rss-"],[class*="has-clan-broadcast-irc-"],[class*="has-clan-broadcast-comment-"],[class*="has-clan-broadcast-organic-"],[class*="has-clan-broadcast-last-users"],[class*="has-clan-broadcast-dead-internet"]) { background-image:repeating-linear-gradient(90deg,#52ddea18 0 1px,transparent 1px 15px); }
.cl-hero[class*="has-clan-decree-"] .cl-hero-name { color:#f6db93;text-shadow:0 0 10px #9965df55; }
.cl-hero[class*="has-clan-banner-"] { border-color:rgba(104,255,218,.4); background:radial-gradient(circle at 8% 50%,rgba(59,236,190,.18),transparent 34%),linear-gradient(115deg,rgba(40,24,74,.9),rgba(8,13,24,.76)); }
.cl-hero.has-clan-banner-kernel { border-color:rgba(255,112,92,.5); }
.cl-hero.has-clan-banner-ramen { border-color:rgba(255,190,86,.52); }
.cl-hero.has-clan-banner-ai { border-color:rgba(90,255,218,.55); }
.cl-hero.has-clan-banner-void { border-color:rgba(123,83,255,.55); }
.cl-hero.has-clan-banner-oss { border-style:dashed; }
.cl-hero.has-clan-banner-daemon,.cl-hero.has-clan-banner-incident { border-color:#ff746a99; }
.cl-hero.has-clan-banner-uptime,.cl-hero.has-clan-banner-rfc { border-color:#edc65faa; }
.cl-hero.has-clan-banner-local,.cl-hero.has-clan-banner-human { border-color:#78eeb499; }
.cl-hero.has-clan-banner-p99 { border-style:dotted; }
.cl-hero.has-clan-banner-myth { border-color:#d47cffaa; }
.cl-hero.has-clan-banner-dead-letter,.cl-hero.has-clan-banner-legacy { border-color:#d8bb7299; border-style:dashed; }
.cl-hero.has-clan-banner-404,.cl-hero.has-clan-banner-deprecated { border-color:#9effe399; }
.cl-hero.has-clan-banner-ghost-ops,.cl-hero.has-clan-banner-afterlife { border-color:#74ffe0aa; box-shadow:inset 0 0 24px #61ffd51c; }
.cl-hero.has-clan-banner-dns,.cl-hero.has-clan-banner-oauth { border-color:#a692ff99; }
.cl-hero.has-clan-aura-grid { box-shadow:0 0 0 1px rgba(85,255,210,.22),0 0 28px rgba(85,255,210,.16); }
.cl-hero.has-clan-aura-rgb { animation:cl-rgb-aura 4s linear infinite; }
.cl-hero.has-clan-aura-hologram { box-shadow:0 0 34px rgba(91,255,226,.25),inset 0 0 28px rgba(155,80,255,.12); animation:cl-holo-aura 2.6s ease-in-out infinite; }
.cl-hero.has-clan-aura-founder { border-color:rgba(241,193,82,.75); box-shadow:0 0 32px rgba(241,193,82,.24); }
.cl-hero.has-clan-aura-observability { box-shadow:0 0 0 1px #62ffd744,0 0 25px #2a87ff33; }
.cl-hero.has-clan-aura-quantum { animation:cl-quantum-aura 3.4s ease-in-out infinite; }
.cl-hero.has-clan-aura-daemon { box-shadow:0 0 31px #ff403d44,inset 0 0 20px #8f1b2444; }
.cl-hero.has-clan-aura-p99 { animation:cl-p99-aura 1.8s steps(2) infinite; }
.cl-hero.has-clan-aura-human { box-shadow:0 0 27px #ec779a44,inset 0 0 24px #4ad88e22; }
.cl-hero.has-clan-aura-myth { box-shadow:0 0 38px #b665ff66,inset 0 0 27px #5affd733; animation:cl-myth-aura 4.2s linear infinite; }
.cl-hero.has-clan-aura-ectoplasm,.cl-hero.has-clan-aura-ghost-ops { box-shadow:0 0 38px #72ffe266,inset 0 0 28px #5dffdb22; animation:cl-afterlife-aura 3.7s ease-in-out infinite; }
.cl-hero.has-clan-aura-404 { animation:cl-404-aura 2.4s steps(2,end) infinite; }
.cl-hero.has-clan-aura-dns { box-shadow:0 0 32px #9f8cff55,inset 0 0 24px #edcf6b22; }
.cl-hero.has-clan-aura-legacy { box-shadow:0 0 29px #d3b85a4d,inset 0 0 23px #7bffca1f; }
.cl-hero.has-clan-aura-afterlife { border-color:#e8c974aa; box-shadow:0 0 42px #70ffe275,inset 0 0 31px #9a5cff36; animation:cl-afterlife-aura 3.2s ease-in-out infinite; }
.cl-hero.has-clan-hall-rack { background:repeating-linear-gradient(90deg,#111827e8 0 18px,#1e3c43e8 18px 20px); }
.cl-hero.has-clan-hall-observatory { background:radial-gradient(circle at 12% 35%,#78fff055 0 3%,transparent 20%),linear-gradient(115deg,#141b38ee,#281740ee); }
.cl-hero.has-clan-hall-duck { background:radial-gradient(circle at 12% 45%,#ffdc6f55,transparent 28%),linear-gradient(115deg,#473515ee,#181324ee); }
.cl-hero.has-clan-hall-myth { background:linear-gradient(115deg,#481d59ee,#0f3939ee); }
.cl-hero.has-clan-hall-dead-letter { background:repeating-linear-gradient(45deg,#2a2119ee 0 16px,#11141bee 17px 18px); }
.cl-hero.has-clan-hall-404 { background:radial-gradient(circle at 15% 45%,#7effdd44,transparent 22%),linear-gradient(115deg,#20142eee,#071714ee); }
.cl-hero.has-clan-hall-ghost-ops { background:radial-gradient(circle at 12% 40%,#7dffe84a,transparent 25%),linear-gradient(115deg,#121b2cee,#28152eee); }
.cl-hero.has-clan-hall-afterlife { background:linear-gradient(115deg,#2a1735ee,#08221fee); }
.cl-hero.has-clan-hall-benchmark,.cl-hero.has-clan-hall-model-council { background:linear-gradient(115deg,#241536ee,#09211fee); border-color:#d6b75b99; }
.cl-hero.has-clan-hall-prompt-archive { background:repeating-linear-gradient(0deg,#2c2318ee 0 12px,#10131bee 13px 14px); }
.cl-hero.has-clan-hall-synthetic-salon { background:radial-gradient(circle at 15% 45%,#ff8ecd44,transparent 24%),linear-gradient(115deg,#3d2056ee,#0b2623ee); }
.cl-hero.has-clan-hall-broadcast-cathedral,.cl-hero.has-clan-hall-spectrum-vault { background:radial-gradient(circle at 15% 44%,#63ffe044,transparent 24%),linear-gradient(115deg,#241638ee,#07241fee);border-color:#d7b65f99; }
.cl-hero[class*="has-clan-broadcast-"] { box-shadow:0 0 29px #66ffe044,inset 0 0 23px #a467ff22; }
.cl-hero.has-clan-broadcast-signal-noise .cl-paid-broadcast { color:#fff;border-color:#66ffe099;background:linear-gradient(105deg,#2b1838dd,#092a24dd); }
.cl-hero.has-clan-ritual-tune-in,.cl-hero.has-clan-ritual-dead-air { box-shadow:0 0 34px #67ffe044,inset 0 0 24px #d8b55b22; }
@keyframes cl-broadcast-tune { 50% { border-color:#67ffe0bb;box-shadow:0 0 13px #67ffe055; } }
.cl-hero.has-clan-ritual-alignment,.cl-hero.has-clan-ritual-context { box-shadow:0 0 34px #6affe044,inset 0 0 24px #d7b35b22; }
.cl-hero.has-clan-ritual-eval,.cl-hero.has-clan-ritual-collapse { box-shadow:0 0 38px #9a6cff55,inset 0 0 25px #ff8d6b22; }
.cl-hero[class*="has-clan-monument-"] { padding-right:112px; }
.cl-hero.has-clan-monument-tombstone { box-shadow:inset -80px -35px 80px #d9c67a12; }
.cl-hero.has-clan-monument-404 { box-shadow:inset -80px -35px 80px #78ffe21c; }
.cl-hero.has-clan-monument-last-server { box-shadow:inset -80px -35px 80px #8ca6ff1f; }
.cl-hero.has-clan-monument-afterlife { box-shadow:inset -80px -35px 80px #c177ff20,0 0 32px #73ffe23d; }
@keyframes cl-rgb-aura { 0% { box-shadow:0 0 30px rgba(81,255,211,.24); } 33% { box-shadow:0 0 30px rgba(87,130,255,.3); } 66% { box-shadow:0 0 30px rgba(240,72,255,.27); } 100% { box-shadow:0 0 30px rgba(81,255,211,.24); } }
@keyframes cl-holo-aura { 50% { filter:hue-rotate(34deg); } }
@keyframes cl-quantum-aura { 50% { box-shadow:0 0 34px #6dffe266,inset 0 0 22px #925cff44; filter:hue-rotate(28deg); } }
@keyframes cl-p99-aura { 50% { box-shadow:0 0 26px #ffd05d55; } }
@keyframes cl-myth-aura { 50% { filter:hue-rotate(35deg); } }
@keyframes cl-afterlife-aura { 50% { filter:hue-rotate(23deg) brightness(1.08); box-shadow:0 0 46px #6fffe477,inset 0 0 30px #935eff2e; } }
@keyframes cl-ritual-pulse { 50% { border-color:#e1bd6499; color:#ffe7a5; box-shadow:0 0 14px #70ffe044; } }
@keyframes cl-404-aura { 50% { filter:contrast(1.12) hue-rotate(14deg); transform:translateX(1px); } }
@media (prefers-reduced-motion:reduce) { .cl-hero.has-clan-aura-rgb,.cl-hero.has-clan-aura-hologram,.cl-hero.has-clan-aura-quantum,.cl-hero.has-clan-aura-p99,.cl-hero.has-clan-aura-myth,.cl-hero.has-clan-aura-ectoplasm,.cl-hero.has-clan-aura-ghost-ops,.cl-hero.has-clan-aura-404,.cl-hero.has-clan-aura-afterlife,.cl-paid-ritual,.cl-paid-broadcast { animation:none; } }
/* No clan yet: the mock swaps the violet rim for a dashed gold one — the strip
   is an invitation, not a status. */
.cl-hero.is-none {
  border-style: dashed;
  border-color: rgba(241, 193, 82, 0.34);
  background: linear-gradient(115deg, rgba(40, 28, 12, 0.6), rgba(18, 12, 34, 0.6));
}
.cl-hero-skel { width: 100%; height: 62px; margin: 0; }
.cl-hero-sheen {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  animation: cl-sheen 7s ease-in-out infinite;
}
@keyframes cl-sheen {
  from { transform: translateX(-120%) skewX(-18deg); }
  to { transform: translateX(320%) skewX(-18deg); }
}
.cl-hero-tag {
  position: relative;
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--gold);
  text-shadow: 0 0 26px rgba(241, 193, 82, 0.5);
}
.cl-none-glyph { position: relative; flex: 0 0 auto; font-size: 30px; line-height: 1; }
/* On a phone the head is two rows and not four: the tag and the name share the
   first, the two numbers and the invite share the second. `flex: 1 1 60%` on
   the name column is what forces that break — the mock's phone head is the
   same shape at 86px tall, and a 236px one costs the roster three rows. */
.cl-hero-col { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 55%; }
.cl-hero-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cl-hero.is-none .cl-hero-name { font-size: 19px; font-weight: 800; }
.cl-hero-sub { font-size: 11px; color: var(--text-soft); }
.cl-gap { flex: 1 1 auto; }

/* stat tiles — mock: 9px 15px, r11, mono 19/700 over a 9px .1em uppercase label */
.cl-hero-stats { position: relative; display: flex; gap: 9px; flex: 1 1 auto; }
.cl-stat {
  flex: 1 1 auto;
  padding: 9px 12px;
  border-radius: var(--r-md);
  text-align: center;
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.24);
}
.cl-stat.is-gold { background: rgba(241, 193, 82, 0.1); border-color: rgba(241, 193, 82, 0.3); }
.cl-stat-num { font-size: 19px; font-weight: 700; line-height: 1.15; }
.cl-stat.is-gold .cl-stat-num { color: var(--gold); }
.cl-stat-lbl {
  margin-top: 2px;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
.cl-hero-act {
  position: relative;
  flex: 0 0 auto;
  white-space: nowrap;
  cursor: pointer;
  padding: 9px 17px;
  border-radius: var(--r-md);
  border: 1px solid var(--stroke-strong);
  background: rgba(20, 13, 38, 0.6);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  transition: border-color var(--dur-fast), transform var(--dur-fast);
}
@media (hover: hover) {
  .cl-hero-act:hover { border-color: rgba(167, 139, 250, 0.6); }
}
.cl-hero-act:active { transform: scale(0.96); }

/* === the board of panels ===
   One column and a scrolling scene until 620; the frame readings arrive below. */
.cl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 11px; min-width: 0; }

.cl-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  border-radius: 16px;
  border: 1px solid rgba(167, 139, 250, 0.18);
  background: rgba(18, 12, 34, 0.56);
  overflow: hidden;
}
.cl-panel-war { border-color: rgba(255, 93, 108, 0.26); background: rgba(30, 14, 26, 0.5); }
.cl-panel-chat { border-color: rgba(241, 193, 82, 0.24); }
.cl-join-glow { border-color: rgba(241, 193, 82, 0.5); box-shadow: 0 0 34px rgba(241, 193, 82, 0.14); }

.cl-panel-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--hairline);
}
.cl-panel-war .cl-panel-head { border-bottom-color: rgba(255, 93, 108, 0.2); }
.cl-panel-title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cl-panel-war .cl-panel-title { color: #ff8a94; }
.cl-panel-chat .cl-panel-title { color: var(--gold); }
.cl-panel-note { font-size: 9px; color: var(--text-faint); white-space: nowrap; }
/* The body sizes to its content; the scene scrolls the page. Inner scroll
   was the anti-pattern that stranded the «Создать клан» button below the
   fold of a box whose scroller is invisible on macOS. */
.cl-panel-body { flex: 1 1 auto; min-height: 0; padding: 7px 8px; }
.cl-panel-foot {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 9px 11px;
  border-top: 1px solid var(--hairline);
}
.cl-panel-foot .btn { flex: 1 1 auto; padding: 8px 10px; font-size: 12px; }
.cl-list { display: flex; flex-direction: column; gap: 3px; }

/* === war panel ===
   A LEAGUE week, not a duel: `chess_clan_war_points` scores every clan against
   the same week and there is no pairing table, so the two sides are this clan
   and the clan directly above it in the table. */
.cl-war-body { padding: 14px; display: flex; flex-direction: column; gap: 13px; }
.cl-war-clock { font-size: 11px; font-weight: 700; color: var(--danger); white-space: nowrap; }
.cl-war-score { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cl-war-side { text-align: center; min-width: 0; }
.cl-war-tag {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  color: #67e8f9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cl-war-tag.is-us { color: var(--gold); }
.cl-war-pts { font-size: 27px; font-weight: 700; line-height: 1.1; }
.cl-war-vs { font-family: var(--font-display); font-size: 12px; color: var(--text-faint); }
.cl-war-bar { height: 7px; border-radius: 4px; background: rgba(103, 232, 249, 0.22); overflow: hidden; }
.cl-war-fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--gold), #e0a23a);
  box-shadow: 0 0 14px rgba(241, 193, 82, 0.5);
  transition: width var(--dur-slow) var(--ease-out);
}
.cl-war-rule { font-size: 10px; line-height: 1.5; color: var(--text-soft); }
.cl-war-tiles { display: flex; gap: 9px; }
.cl-war-tile {
  flex: 1 1 0;
  padding: 9px 6px;
  border-radius: 10px;
  text-align: center;
  background: rgba(255, 93, 108, 0.09);
}
.cl-war-tile-num { font-size: 19px; font-weight: 700; line-height: 1.1; }
.cl-war-tile-lbl { margin-top: 2px; font-size: 9px; color: var(--text-faint); }
.cl-war-cta {
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  padding: 10px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff5d6c, #c2334a);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  transition: transform var(--dur-fast);
}
@media (hover: hover) {
  .cl-war-cta:hover { transform: translateY(-2px); }
}
.cl-war-cta:active { transform: scale(0.97); }
.cl-war-sub {
  margin-top: 3px;
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* === «Кто тянет войну» + «Твой вклад» ===
   The war panel's own roster, so it borrows the roster row's geometry (7px 9px,
   r9, 8px gap) rather than inventing a second one. Own row in gold, the same
   marker the member list uses, because it is the same claim. */
.cl-fighters { display: flex; flex-direction: column; gap: 4px; }
.cl-fighter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: rgba(255, 93, 108, 0.07);
  min-width: 0;
}
.cl-fighter.is-me { background: rgba(241, 193, 82, 0.11); border-color: rgba(241, 193, 82, 0.28); }
.cl-fighter-rank {
  flex: 0 0 auto;
  width: 16px;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  color: var(--text-faint);
}
.cl-fighter-name {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cl-fighter-pts { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--gold); }
/* The roll-call's quiet rows — a proven zero («ещё не приносил») or the
   honest «вне тройки» the top-three slice allows. The fighters' geometry
   with the fight colours stripped: a zero is a fact about the week, never a
   shame line. */
.cl-fighter-none { background: transparent; }
.cl-fighter-none .cl-fighter-name { color: var(--text-dim); font-weight: 600; }
.cl-fighter-note { flex: 0 0 auto; font-size: 10px; color: var(--text-faint); }
/* A fighter who left the clan mid-week: the membership row is gone, the
   points they earned are not. */
.cl-ex {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-soft);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* The player's own line, pulled out of the list so it is readable even when
   they are nowhere near the top three. */
.cl-mine {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
  padding: 7px 9px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(241, 193, 82, 0.24);
  background: rgba(241, 193, 82, 0.07);
}
.cl-mine-lbl { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }
.cl-mine-rank { font-size: 10px; color: var(--text-faint); }
.cl-mine-pts { font-size: 15px; font-weight: 700; color: var(--gold); }

/* === «сервер этого ещё не отдаёт» ===
   Not «не удалось загрузить»: the request succeeded and the field does not
   exist. The mock's own taxonomy calls this shape `wait` — it does not depend
   on the player — so it wears the violet, never the gold. */
.cl-absent {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px 15px;
  border-radius: var(--r-lg);
  border: 1px dashed rgba(167, 139, 250, 0.36);
  background: rgba(167, 139, 250, 0.05);
}
.cl-absent-title { font-family: var(--font-display); font-size: 13px; font-weight: 800; line-height: 1.25; }
.cl-absent-sub { font-size: 11px; line-height: 1.55; color: var(--text-dim); }

/* === roster ===
   mock: 7px 9px, r9, 8px gap; the caller's own row is the gold one. */
.cl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  min-width: 0;
}
.cl-row.is-me { background: rgba(241, 193, 82, 0.11); border-color: rgba(241, 193, 82, 0.28); }
.cl-row-role { flex: 0 0 auto; width: 16px; font-size: 12px; text-align: center; }
.cl-row-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cl-you {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: rgba(241, 193, 82, 0.16);
  color: var(--gold);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cl-row-pts { flex: 0 0 auto; font-size: 10px; color: var(--text-faint); }
.cl-kick {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: 7px;
  border: 1px solid rgba(255, 93, 108, 0.28);
  background: rgba(255, 93, 108, 0.08);
  color: var(--danger);
  font-size: 11px;
  line-height: 1;
  transition: background var(--dur-fast);
}
/* base.css gives every button a 44px min-HEIGHT below 904px; a 22px-wide one
   would become a tall sliver rather than a target, so the width follows.
   STAYS AN @media, AND GAINS THE HEIGHT CLAUSE — for the same reason the twin
   in views/chat.css does. This is the width half of base.css's touch floor,
   which is `@media (max-width: 904px), (max-height: 500px)`: a question about
   the device, not about the scene. Converted to `@container scene` it would be
   true at a 1280px window (scene 858) and grow a header-row kick button to
   44px on a desktop that base.css leaves at 22.
   Without the height clause the sliver this comment describes was REAL, on the
   exact device base.css added its own clause for: measured at 932x430, the
   landscape size of an iPhone 14/15/16 Pro Max, `.cl-kick` rendered 22x44 —
   past 904 on width, so only the floor's height half applied. 500px is
   base.css's constant. */
@media (max-width: 904px), (max-height: 500px) {
  .cl-kick { width: 44px; height: auto; font-size: 13px; }
}
@media (hover: hover) {
  .cl-kick:hover { background: rgba(255, 93, 108, 0.2); }
}
.cl-kick:disabled { opacity: 0.4; cursor: not-allowed; }

/* === clan table === */
.cl-brow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  min-width: 0;
}
.cl-brow.is-me { background: rgba(241, 193, 82, 0.11); border-color: rgba(241, 193, 82, 0.3); }
.cl-brank { flex: 0 0 auto; width: 20px; font-size: 11px; color: var(--text-faint); text-align: center; }
.cl-brank.is-top { font-size: 12px; }
.cl-btag {
  flex: 0 0 auto;
  width: 56px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  color: var(--gold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cl-bname {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 10px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cl-bpts { flex: 0 0 auto; font-size: 11px; font-weight: 700; }

/* === clan chat: the war room panel ===
   The room's look (clc-*) comes from shell.css via the `.l3-wall` wrapper —
   `:is(#ctx, .l3-wall)` was minted for exactly this second mount point. This
   block only owns the panel-side layout: the wrapper's flex column and the
   lines' scroller. The panel-scrolls-the-page law (see .cl-panel-body) is
   about ACTIONS stranded under an invisible fold; here the composer is
   pinned OUTSIDE the scroller, so only the lines fold. */
.cl-chat { display: flex; flex-direction: column; gap: 11px; padding: 14px; }
.cl-chat > .l3-wall {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  flex: 1 1 auto;
}
.cl-chat .clc-list {
  max-height: 264px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* === no clan: create, join, and what a clan changes === */
.cl-none-col { display: flex; flex-direction: column; gap: 11px; min-height: 0; }
.cl-form { display: flex; flex-direction: column; gap: 12px; padding: 14px; overflow: visible; }
.cl-card-sub { color: var(--text-dim); font-size: 12px; line-height: 1.5; }
.cl-field { display: flex; flex-direction: column; gap: 6px; }
.cl-field-lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; color: var(--text-dim); text-transform: uppercase; }
.cl-input {
  width: 100%;
  padding: 11px 13px;
  border-radius: var(--r-md);
  border: 1px solid var(--stroke);
  background: var(--panel-soft);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.4px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
.cl-input::placeholder { color: var(--text-faint); font-weight: 500; }
.cl-input:focus { border-color: rgba(241, 193, 82, 0.55); box-shadow: var(--shadow-glow-gold); background: var(--panel); }
/* 16px on touch or iOS zooms the page into the field on focus (chat.css states
   the full argument); desktop keeps the 14px above. */
@media (pointer: coarse) {
  .cl-input { font-size: 16px; }
}
.cl-tag-input { text-transform: uppercase; letter-spacing: 2.5px; }
.cl-hint { font-size: 11px; color: var(--text-faint); }
.cl-form-err {
  padding: 9px 11px;
  border-radius: var(--r-sm);
  background: rgba(255, 93, 108, 0.1);
  border: 1px solid rgba(255, 93, 108, 0.4);
  color: var(--danger);
  font-size: 12px;
  font-weight: 600;
}
.cl-join-note { align-self: flex-start; }
.cl-explain { flex: 0 0 auto; }
.cl-explain-body { margin: 0; font-size: 11px; line-height: 1.6; color: var(--text-dim); text-wrap: pretty; }

/* === confirm modal === */
.cl-modal { text-align: center; }
.cl-modal-emoji { font-size: 44px; line-height: 1; display: inline-block; }
.cl-modal-title { font-size: 20px; font-weight: 800; margin: 12px 0 8px; }
.cl-modal-sub { color: var(--text-dim); font-size: 14px; margin-bottom: 18px; }
.cl-modal-actions { display: flex; flex-direction: column; gap: 10px; }

/* === Gold clan-tag chip (also: chess leaderboard rows, profile head) ===
   Not this screen's any more, but four other views set the class, so the rule
   stays here rather than becoming markup that reads as styled and is not. */
.clan-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(241, 193, 82, 0.45);
  background: rgba(241, 193, 82, 0.08);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  line-height: 1.7;
  white-space: nowrap;
  flex: 0 0 auto;
}
button.clan-tag-chip { cursor: pointer; transition: transform var(--dur-med) var(--spring), box-shadow var(--dur-fast); }
@media (hover: hover) {
  button.clan-tag-chip:hover { box-shadow: var(--shadow-glow-gold); transform: translateY(-1px); }
}

/* ---------- two columns: the scene can hold a pair, not a board ---------- */
@container scene (min-width: 620px) {
  .cl-hero { flex-wrap: nowrap; gap: 20px; padding: 16px 20px; }
  .cl-hero-tag { font-size: 32px; }
  /* Measured, not guessed: at a 858px scene the three tiles want 273px and the
     row leaves them 256, so a wrapping stats block made the head 157px tall —
     two rows of chrome above a board that has no spare height. They stay on
     one line and the clan NAME gives up the width instead; it already
     ellipsizes and the tag beside it carries the identity. */
  .cl-hero-stats { flex: 0 0 auto; }
  .cl-hero-col { flex: 0 1 auto; }
  .cl-stat { flex: 0 0 auto; padding: 9px 15px; }
  .cl-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .cl-grid.is-none { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}

/* ---------- the mock's frame: four columns, the page scrolls ----------
   `three columns need >= 900` (shell.css). At 1018 — a 1440 window, which is
   the width the mock itself was drawn at — that is four columns of 237px, the
   design's own arithmetic. The view grows to content and the scene scrolls:
   the old height-lock (height:100% + overflow:hidden on the host and screen,
   align-items:stretch on the grid) was the prison that stranded content below
   the fold of a box whose scroller is invisible on macOS. */
@container scene (min-width: 900px) {
  #view.cl-host,
  #scene.shell-scene #view.cl-host { padding: 16px 18px; }
  .cl-screen { gap: 13px; }
  .cl-grid {
    grid-template-columns:
      minmax(0, 1fr) minmax(0, 0.94fr) minmax(0, 1.05fr) minmax(0, 0.92fr);
    align-items: start;
  }
  .cl-grid.is-none { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}

/* ── Каталог кланов (волна 1 «Двери») ──────────────────────────────────────
   Панель, из-за которой всё это существует: 4 клана и 4 участника — по одному
   человеку в каждом, потому что найти чужой клан было негде. Строка каталога
   читается в одном порядке важности: кто это → можно ли войти → насколько
   полон. Кнопка справа, потому что взгляд идёт к ней последней. */
.cl-dir-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cl-dir-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  background: rgba(20, 13, 38, 0.5);
  border: 1px solid transparent;
  transition: border-color 0.16s, background 0.16s;
}
.cl-dir-row.is-mine { border-color: rgba(var(--t-gold, 241, 193, 82), 0.35); }
@media (hover: hover) {
  .cl-dir-row:hover { border-color: rgba(var(--t-violet), 0.34); background: rgba(40, 26, 70, 0.55); }
}
/* Эмблема — пресет и два цвета, а не загруженная картинка: загрузка это
   модерация и мусор, а конструктор не может сломать вёрстку в принципе. */
.cl-dir-emblem {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font-size: 15px;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.cl-dir-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cl-dir-name {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cl-dir-tag { color: var(--gold); font-size: 11px; }
.cl-dir-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
  font-size: 9px;
  color: rgba(var(--t-mute), 0.5);
}
.cl-dir-sep { color: rgba(var(--t-mute), 0.25); }
.cl-dir-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch; }
.cl-dir-act { flex: 0 0 auto; padding: 6px 12px; font-size: 10px; font-weight: 700; }
.cl-dir-act.is-pending { opacity: 0.7; }
/* Не кнопка — значит и не выглядит кнопкой. «Клан полон» и «только по ссылке»
   это состояния, а не действия, и предлагать их нажать — вранье интерфейса. */
.cl-dir-flat {
  flex: 0 0 auto;
  font-size: 9px;
  color: rgba(var(--t-mute), 0.4);
  white-space: nowrap;
}
.cl-dir-flat.is-mine { color: var(--gold); }
/* «Показать ещё» — во всю ширину списка, потому что это не действие над
   строкой, а продолжение самого списка. */
.cl-more {
  flex: 0 0 auto;
  margin-top: 2px;
  padding: 8px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(var(--t-violet), 0.2);
  background: rgba(20, 13, 38, 0.5);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-soft);
}
@media (hover: hover) {
  .cl-more:hover { border-color: rgba(var(--t-violet), 0.42); color: var(--text); }
}
.cl-dir-empty {
  padding: 14px 10px;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(var(--t-mute), 0.5);
  text-align: center;
}
.cl-dir-tools {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--stroke);
}
.cl-dir-search { flex: 1 1 180px; min-width: 0; }
.cl-dir-modes { flex: 0 0 auto; padding: 2px; }
.cl-dir-modes button { padding: 4px 10px; font-size: 10px; }

/* ── Очередь заявок ───────────────────────────────────────────────────────── */
.cl-req-body { display: flex; flex-direction: column; gap: 6px; }
.cl-req-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  background: rgba(20, 13, 38, 0.5);
}
.cl-req-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cl-req-name { font-size: 12px; font-weight: 700; }
.cl-req-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
  font-size: 9px;
  color: rgba(var(--t-mute), 0.5);
}
.cl-req-msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 20ch; }
.cl-req-act { flex: 0 0 auto; padding: 5px 10px; font-size: 10px; }
.cl-req-badge {
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--gold-grad);
  color: var(--gold-ink);
  font-weight: 800;
}

/* ── Переключатель дверей ─────────────────────────────────────────────────── */
.cl-mode-switch { display: flex; align-items: center; gap: 8px; }
.cl-mode-label {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--t-mute), 0.45);
}
.cl-mode-switch .segmented { padding: 2px; }
.cl-mode-switch .segmented button { padding: 3px 8px; font-size: 9px; }

@media (pointer: coarse) {
  .cl-dir-act, .cl-req-act { min-height: 44px; }
}

/* ── Мой вклад недели ──────────────────────────────────────────────────────
   Полоса потолка стоит ВСЕГДА, а не появляется при приближении: правило, о
   котором узнают, только упёршись в него, воспринимается как поломка. */
.cl-mine-body { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.cl-cap { display: flex; flex-direction: column; gap: 6px; }
.cl-cap-head { display: flex; align-items: baseline; gap: 8px; }
.cl-cap-value { font-size: 17px; font-weight: 800; }
.cl-cap-label {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--t-mute), 0.45);
}
.cl-cap-bar {
  height: 6px;
  border-radius: var(--r-pill);
  background: rgba(var(--t-violet), 0.16);
  overflow: hidden;
}
.cl-cap-fill {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--gold-grad);
  transition: width 0.4s var(--ease-out);
}
.cl-cap-bar.is-over .cl-cap-fill { background: linear-gradient(90deg, var(--gold), rgba(var(--t-violet), 0.9)); }
.cl-cap-note { font-size: 10px; line-height: 1.45; color: rgba(var(--t-mute), 0.45); text-wrap: pretty; }

.cl-feed { display: flex; flex-direction: column; gap: 4px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.cl-feed-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  background: rgba(20, 13, 38, 0.4);
  font-size: 10px;
}
/* Ноль не прячется и не кричит: он приглушён, но читается — «сыграл и не
   засчитано» это факт, а не отсутствие события. */
.cl-feed-row.is-zero { opacity: 0.66; }
.cl-feed-pts { flex: 0 0 auto; min-width: 34px; font-weight: 800; color: var(--gold); }
.cl-feed-row.is-zero .cl-feed-pts { color: rgba(var(--t-mute), 0.4); }
.cl-feed-what { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 5px; overflow: hidden; }
.cl-feed-tag {
  flex: 0 0 auto;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: rgba(var(--t-violet), 0.2);
  font-size: 8px;
  font-weight: 700;
  color: rgba(var(--t-mute), 0.7);
}
.cl-feed-why { flex: 0 0 auto; font-size: 9px; color: rgba(var(--t-mute), 0.4); white-space: nowrap; }

/* ── Сезон, лиги, эмблема ─────────────────────────────────────────────────── */
.cl-season-body { display: flex; flex-direction: column; gap: 10px; }
.cl-season-head { display: flex; align-items: baseline; gap: 8px; }
.cl-season-pts { font-size: 20px; font-weight: 800; color: var(--gold); }
.cl-season-label { font-size: 10px; color: rgba(var(--t-mute), 0.5); }
.cl-season-weeks { display: flex; gap: 6px; flex-wrap: wrap; }
/* Незачтённая неделя не прячется: «лучшие три из четырёх» без списка выглядит
   как произвол, а с ним — как правило. */
.cl-season-week {
  flex: 1 1 60px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  background: rgba(20, 13, 38, 0.4);
  border: 1px solid transparent;
  opacity: 0.5;
}
.cl-season-week.is-counted { opacity: 1; border-color: rgba(var(--t-gold, 241, 193, 82), 0.3); }
.cl-season-wk { font-size: 9px; color: rgba(var(--t-mute), 0.45); }
.cl-season-wpts { font-size: 13px; font-weight: 800; }
.cl-div-off { font-size: 10px; line-height: 1.45; color: rgba(var(--t-mute), 0.4); text-wrap: pretty; }
.cl-div-on { display: flex; flex-wrap: wrap; gap: 5px; }
.cl-div-chip {
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: rgba(var(--t-violet), 0.18);
  font-size: 9px;
  font-weight: 700;
}
.cl-emblem-door {
  padding: 4px 10px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(var(--t-violet), 0.24);
  font-size: 9px;
  font-weight: 700;
  color: var(--text-soft);
}
@media (hover: hover) { .cl-emblem-door:hover { border-color: rgba(var(--t-violet), 0.5); color: var(--text); } }
.cl-emblem-card {
  display: flex;
  flex-direction: column;
  width: min(420px, 100%);
  max-height: 100%;
  min-height: 0;
  border-radius: var(--r-lg, 16px);
  border: 1px solid var(--stroke);
  background: var(--panel, #14102a);
  overflow: hidden;
}
.cl-emblem-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--stroke);
}
.cl-emblem-x {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--text-soft);
  font-size: 12px;
}
@media (hover: hover) { .cl-emblem-x:hover { background: var(--stroke); color: var(--text); } }
.cl-emblem-title { flex: 1; font-family: var(--font-display); font-size: 14px; font-weight: 800; }
.cl-emblem-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.cl-emblem-preview {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  font-size: 32px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.cl-emblem-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; width: 100%; }
.cl-emblem-opt {
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: rgba(20, 13, 38, 0.5);
  font-size: 17px;
}
.cl-emblem-opt.is-on { border-color: var(--gold); background: rgba(var(--t-violet), 0.22); }
.cl-swatches { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; width: 100%; }
.cl-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
}
.cl-swatch.is-on { border-color: var(--text); }
@media (pointer: coarse) {
  .cl-emblem-opt, .cl-swatch { min-height: 44px; }
  .cl-swatch { min-width: 44px; border-radius: 12px; }
}

/* ── Телефон: три вкладки ──────────────────────────────────────────────────
   «Одна страница-хаб на телефоне не работает»: двенадцать панелей десктопа
   раскладываются по трём вкладкам. Панели при этом НЕ переезжают в другой
   DOM — они несут ярлык `data-tab`, а прячет их этот блок. Иначе экран
   разъехался бы в две сборки, и правка в одной однажды не доехала бы до
   другой.

   Порог — сцена, а не окно (правило проекта): консоль забирает рельс и
   контекстную колонку раньше, чем начинается вёрстка. */
.cl-tabs { display: none; }
.cl-dock { display: none; }

@container scene (max-width: 619px) {
  .cl-tabs {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 3px;
    margin-bottom: 2px;
  }
  /* Кнопки вкладок — единственное исключение из 44px: они широкие, промах по
     ним стоит одного тапа назад, а 44px здесь съели бы шапку. */
  .cl-tabs button { flex: 1; min-height: 38px; font-size: 12px; font-weight: 700; }

  .cl-host[data-clan-tab="week"] .cl-grid > [data-tab]:not([data-tab="week"]),
  .cl-host[data-clan-tab="clan"] .cl-grid > [data-tab]:not([data-tab="clan"]),
  .cl-host[data-clan-tab="all"]  .cl-grid > [data-tab]:not([data-tab="all"]) {
    display: none;
  }

  /* Главное действие прибито к низу: «до главного действия не должно быть
     скролла». Подложка гасит контент под собой, а не обрезает его. */
  .cl-dock {
    display: block;
    z-index: 4;
    margin: 0 -2px;
    padding: 10px 12px calc(16px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(8, 6, 15, 0), rgba(8, 6, 15, 0.92) 34%, #08060f);
  }
  .cl-dock:empty { display: none; }
  .cl-dock-cta {
    width: 100%;
    min-height: 52px;
    border-radius: var(--r-md);
    background: var(--gold-grad);
    color: var(--gold-ink);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 800;
  }
  .cl-dock-cta.is-ghost {
    background: rgba(20, 13, 38, 0.7);
    border: 1px solid var(--stroke-strong);
    color: var(--text);
  }

  /* Строки становятся двухстрочными: четыре колонки в 366px не встают — тот
     же дефект, что ловился на десктопе, только гарантированный. */
  .cl-dir-row { flex-wrap: wrap; }
  .cl-dir-id { flex: 1 1 100%; }
  .cl-dir-act, .cl-dir-flat { margin-left: auto; }
  .cl-req-row { flex-wrap: wrap; }
  .cl-req-id { flex: 1 1 100%; }

  /* Панели идут одной колонкой и не жмутся. */
  .cl-grid { grid-template-columns: 1fr; }
}


/* Подвал прибивается к экрану ТОЛЬКО на настоящем телефоне, и это не тот же
   порог, что у вкладок. Вкладки — вопрос вёрстки, поэтому меряют СЦЕНУ. А
   прибитая полоса — вопрос экрана: на планшете сцена это колонка внутри
   широкого окна, и полоса во всю ширину окна была бы враньём про то, где
   заканчивается приложение.

   Почему не sticky: `.cl-screen` — грид, а sticky у грид-элемента ограничен
   его собственной ячейкой, то есть ходить ему негде. Это ровно тот случай,
   когда «липкое не липнет» — не баг браузера, а неверный контейнер. */
@media (max-width: 619px) {
  .cl-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 10px 12px calc(16px + env(safe-area-inset-bottom));
  }
  /* Место под полосу, иначе она накроет последнюю панель. */
  .cl-host { padding-bottom: 84px; }
  .cl-host[data-clan-tab="clan"] { padding-bottom: 0; }
}

/* Вербовка. Строка кандидата повторяет геометрию заявки намеренно: это два
   вида одного и того же вопроса «взять ли этого человека», и разная вёрстка
   заставила бы читать их по-разному. */
.cl-rec-body { display: flex; flex-direction: column; gap: 6px; }
.cl-rec-quota { font-size: 10px; color: rgba(var(--t-mute), 0.5); padding: 0 2px 6px; }
.cl-rec-row { display: flex; align-items: center; gap: 8px; padding: 7px 2px; border-bottom: 1px solid rgba(var(--t-mute), 0.08); }
.cl-rec-row:last-child { border-bottom: 0; }
/* Позванный не исчезает — он гаснет. Исчезновение читалось бы как «сорвалось». */
.cl-rec-row.is-done { opacity: 0.55; }
.cl-rec-act { flex: 0 0 auto; font-size: 10px; padding: 5px 10px; }
.cl-rec-note { display: block; font-size: 9px; line-height: 1.5; color: rgba(var(--t-mute), 0.5); }
.cl-rec-note.is-ok { color: var(--ok); }
.cl-rec-note.is-bad { color: var(--danger); }

/* ── Вызов клана ──────────────────────────────────────────────────────────
   Табло дуэли: два герба, два числа, полоса перевеса. Тон — «война»
   (красная рамка панели уже задана cl-panel-war: вызов живёт в ней).
   Все числа — моно: очки, ставки, отсчёты. */
.cl-ch-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.cl-ch-crest {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.cl-ch-chip {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 93, 108, 0.4);
  background: rgba(255, 93, 108, 0.1);
  color: #ff8a94;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: middle;
}
.cl-ch-rule { font-size: 11px; line-height: 1.55; color: var(--text-soft); }
.cl-ch-note { font-size: 10px; line-height: 1.5; color: var(--text-soft); }
.cl-ch-open { align-self: flex-start; }
.cl-ch-stakes { display: flex; gap: 8px; }
.cl-ch-stake {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 6px;
  border-radius: 11px;
  background: rgba(255, 93, 108, 0.09);
}
.cl-ch-stake.is-take { background: rgba(var(--t-mute), 0.06); }
.cl-ch-stake-num { font-size: 16px; font-weight: 800; }
.cl-ch-stake.is-us .cl-ch-stake-num { color: var(--gold); }
.cl-ch-stake.is-them .cl-ch-stake-num { color: var(--cyan); }
.cl-ch-stake-lbl { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(var(--t-mute), 0.4); text-align: center; }
.cl-ch-incoming { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cl-ch-incoming-text { flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 700; }
.cl-ch-countdown { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--danger); }
.cl-ch-fronts-title { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(var(--t-mute), 0.4); }
.cl-ch-fronts { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-ch-front {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(var(--t-violet), 0.24);
  background: transparent;
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .cl-ch-front:hover { border-color: rgba(var(--t-violet), 0.5); }
}
.cl-ch-front.is-on {
  background: var(--gold-grad);
  border-color: transparent;
  color: var(--gold-ink);
}
.cl-ch-front-glyph { font-size: 12px; }
.cl-ch-warn {
  font-size: 10px;
  line-height: 1.5;
  color: var(--danger-soft);
  border: 1px dashed rgba(255, 93, 108, 0.4);
  border-radius: 9px;
  padding: 7px 9px;
}
.cl-ch-score { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cl-ch-side { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; flex: 1 1 0; }
.cl-ch-tag {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  color: #67e8f9;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cl-ch-tag.is-us { color: var(--gold); }
.cl-ch-pts { font-size: 26px; font-weight: 800; line-height: 1.05; }
.cl-ch-vs { font-family: var(--font-display); font-size: 12px; color: var(--text-faint); flex: 0 0 auto; }
.cl-ch-bar { height: 8px; border-radius: 4px; background: rgba(103, 232, 249, 0.22); overflow: hidden; }
.cl-ch-fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--gold), #e0a23a);
  box-shadow: 0 0 14px rgba(241, 193, 82, 0.5);
  transition: width var(--dur-slow) var(--ease-out);
}
.cl-ch-verdict { font-size: 12px; font-weight: 700; }
.cl-ch-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-soft); }
.cl-ch-rivalry { font-size: 11px; font-weight: 800; color: var(--danger-soft); }
.cl-ch-result {
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cl-ch-result.is-won { border: 1px solid rgba(241, 193, 82, 0.4); background: linear-gradient(160deg, rgba(58, 40, 12, 0.55), rgba(18, 12, 34, 0.6)); }
.cl-ch-result.is-lost, .cl-ch-result.is-forfeit { border: 1px solid rgba(255, 93, 108, 0.3); background: rgba(255, 93, 108, 0.07); }
.cl-ch-result.is-draw { border: 1px solid rgba(var(--t-violet), 0.3); background: rgba(var(--t-violet), 0.06); }
.cl-ch-result-title { font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.cl-ch-result.is-won .cl-ch-result-title { color: var(--gold); }
.cl-ch-result.is-lost .cl-ch-result-title, .cl-ch-result.is-forfeit .cl-ch-result-title { color: var(--danger-soft); }
.cl-ch-result-score { font-size: 15px; font-weight: 800; }
.cl-ch-result-sub { font-size: 10px; line-height: 1.5; color: var(--text-soft); }
.cl-ch-act { flex: 1 1 auto; }
.cl-ch-fight { background: linear-gradient(135deg, #ff5d6c, #c2334a); color: #fff; font-family: var(--font-display); font-weight: 800; }
.cl-ch-sheet { max-width: 560px; display: flex; flex-direction: column; gap: 8px; }
.cl-ch-stakeRule { font-size: 10px; line-height: 1.5; color: var(--text-soft); padding: 0 2px 4px; }
.cl-ch-rematch-chip {
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid rgba(241, 193, 82, 0.45);
  color: var(--gold);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Фронты недели ────────────────────────────────────────────────────────
   Двухстрочная колонка игры (имя, под ним статус-чип): «мы» и «лидер» —
   фиксированные колонки, и в узкой панели имя не должно сжиматься в «Ш…». */
.cl-panel-front { border-color: rgba(var(--t-violet), 0.24); }
.cl-panel-front .cl-panel-title { color: var(--violet-300); }
.cl-front-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.cl-front-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  border-radius: 10px;
  border: 1px solid transparent;
}
.cl-front-row.is-ours { border-color: rgba(241, 193, 82, 0.3); background: rgba(241, 193, 82, 0.1); }
.cl-front-row.is-contested { border-color: rgba(var(--t-violet), 0.2); background: rgba(var(--t-violet), 0.06); }
.cl-front-row.is-lost { opacity: 0.6; }
.cl-front-row.is-idle { opacity: 0.6; }
.cl-front-game { display: flex; align-items: center; gap: 9px; flex: 1 1 auto; min-width: 0; }
.cl-front-ico { width: 22px; height: 22px; flex: 0 0 auto; }
.cl-front-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cl-front-name { font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-front-chip {
  align-self: flex-start;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--t-mute), 0.45);
}
.cl-front-chip.is-ours { color: var(--gold); background: rgba(241, 193, 82, 0.18); padding: 0 6px; border-radius: 999px; }
.cl-front-chip.is-contested { color: var(--violet-300); background: rgba(var(--t-violet), 0.2); padding: 0 6px; border-radius: 999px; }
.cl-front-us { flex: 0 0 52px; text-align: right; font-size: 13px; font-weight: 700; }
.cl-front-row.is-ours .cl-front-us { color: var(--gold); }
.cl-front-leader { flex: 0 0 88px; text-align: right; font-size: 11px; white-space: nowrap; }
.cl-front-leader.is-none { color: rgba(var(--t-mute), 0.35); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }
.cl-front-foot { padding: 10px 12px; border-top: 1px solid var(--hairline); }
.cl-front-rule {
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-soft);
  background: rgba(20, 13, 38, 0.45);
  border-radius: 9px;
  padding: 7px 9px;
}

/* ── цель и ночь (clans v3, волна A) ─────────────────────────────────────
   Две панели вкладки «неделя»: цель-контракт (§4) и клановая ночь (§3).
   Пустые состояния сидят на .cl-dir-empty, ошибки чтения — на load-fail;
   здесь только своё. Панели не скроллятся внутри: тело растёт по контенту,
   страницу скроллит сцена. */

/* --- цель недели --- */
.cl-panel-goal { border-color: rgba(241, 193, 82, 0.22); }
.cl-panel-goal .cl-panel-title { color: var(--gold); }
.cl-goal-body { display: flex; flex-direction: column; gap: 9px; padding: 10px 12px; }
.cl-goal-set { align-self: stretch; }
.cl-goal-now { display: flex; flex-direction: column; gap: 7px; }
.cl-goal-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cl-goal-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}
.cl-goal-state {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cl-goal-state.is-open { color: var(--violet-300); background: rgba(var(--t-violet), 0.2); }
.cl-goal-state.is-closed { color: var(--gold); background: rgba(241, 193, 82, 0.18); }
.cl-goal-state.is-failed { color: rgba(var(--t-mute), 0.5); background: rgba(var(--t-mute), 0.12); }
.cl-goal-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(var(--t-violet), 0.12);
  overflow: hidden;
}
.cl-goal-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--gold-grad);
  transition: width var(--dur-slow) var(--ease-out);
}
.cl-goal-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 10px;
  font-size: 11px;
  color: var(--text-soft);
}
.cl-goal-left { color: var(--text); font-weight: 700; }
.cl-goal-setby { color: var(--text-faint); }
.cl-goal-reward {
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-soft);
  background: rgba(20, 13, 38, 0.45);
  border-radius: 9px;
  padding: 7px 9px;
}
.cl-goal-acts { display: flex; }
.cl-goal-change { padding: 6px 12px; font-size: 11px; }
.cl-goal-past-title {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cl-goal-past { display: flex; flex-direction: column; gap: 3px; }
.cl-goal-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 9px;
  border-radius: 9px;
  border: 1px solid transparent;
}
.cl-goal-row.is-closed { border-color: rgba(241, 193, 82, 0.24); background: rgba(241, 193, 82, 0.07); }
.cl-goal-row.is-failed { opacity: 0.65; }
.cl-goal-row-line { font-size: 11px; font-weight: 700; }
.cl-goal-row.is-closed .cl-goal-row-line { color: var(--gold); }
.cl-goal-row-what { font-size: 10px; color: var(--text-dim); }

/* --- шит выбора цели --- */
.cl-goal-sheet { max-width: 560px; display: flex; flex-direction: column; gap: 10px; }
.cl-goal-kinds { display: flex; flex-direction: column; gap: 6px; }
.cl-goal-kind {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(var(--t-violet), 0.22);
  background: rgba(var(--t-violet), 0.05);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .cl-goal-kind:hover { border-color: rgba(var(--t-violet), 0.5); background: rgba(var(--t-violet), 0.1); }
}
.cl-goal-kind-name { font-size: 13px; font-weight: 800; }
.cl-goal-kind-sub { font-size: 11px; color: var(--text-soft); }
.cl-goal-gamesel { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-goal-game {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(var(--t-violet), 0.24);
  background: transparent;
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .cl-goal-game:hover { border-color: rgba(var(--t-violet), 0.5); }
}
.cl-goal-game.is-on { background: var(--gold-grad); border-color: transparent; color: var(--gold-ink); }
.cl-goal-ninput { width: 100%; }
.cl-goal-rivals { display: flex; flex-direction: column; gap: 6px; }
.cl-goal-rival {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 11px;
  border: 1px solid rgba(var(--t-violet), 0.2);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .cl-goal-rival:hover { border-color: rgba(var(--t-violet), 0.5); }
}
.cl-goal-rival.is-on { border-color: rgba(241, 193, 82, 0.55); background: rgba(241, 193, 82, 0.1); }
.cl-goal-rival-tag { flex: 0 0 auto; font-weight: 800; color: var(--gold); }
.cl-goal-rival-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cl-goal-rival-pts { flex: 0 0 auto; font-size: 12px; font-weight: 700; }

/* --- клановая ночь --- */
.cl-panel-night { border-color: rgba(103, 232, 249, 0.22); }
.cl-panel-night .cl-panel-title { color: #67e8f9; }
.cl-night-body { display: flex; flex-direction: column; gap: 9px; padding: 10px 12px; }
.cl-night-notes { display: inline-flex; align-items: center; gap: 7px; }
.cl-night-mult {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #67e8f9;
  background: rgba(103, 232, 249, 0.14);
  white-space: nowrap;
}
.cl-night-live {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-ink);
  background: var(--gold-grad);
  white-space: nowrap;
}
.cl-night-move {
  padding: 4px 10px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(103, 232, 249, 0.3);
  font-size: 9px;
  font-weight: 700;
  color: var(--text-soft);
  cursor: pointer;
  white-space: nowrap;
}
@media (hover: hover) {
  .cl-night-move:hover { border-color: rgba(103, 232, 249, 0.6); color: var(--text); }
}
.cl-night-window {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 10px;
}
.cl-night-window-time { font-size: 14px; font-weight: 800; }
.cl-night-movedby { font-size: 10px; color: var(--text-faint); }
.cl-night-in { font-size: 11px; font-weight: 700; color: #67e8f9; }
.cl-night-every { font-size: 10px; color: var(--text-faint); }
.cl-night-coming { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; }
.cl-night-coming-line { font-weight: 700; }
.cl-night-hint {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--gold);
  background: rgba(241, 193, 82, 0.14);
}
.cl-night-acts { display: flex; gap: 7px; }
.cl-night-act {
  flex: 1 1 auto;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(var(--t-violet), 0.24);
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .cl-night-act:hover { border-color: rgba(var(--t-violet), 0.5); }
}
.cl-night-act.is-yes.is-on { background: rgba(74, 222, 128, 0.16); border-color: rgba(74, 222, 128, 0.5); color: #4ade80; }
.cl-night-act.is-no.is-on { background: rgba(255, 93, 108, 0.14); border-color: rgba(255, 93, 108, 0.45); color: #ff8a94; }
.cl-night-note { width: 100%; }
.cl-night-list { display: flex; flex-direction: column; gap: 3px; }
.cl-night-member {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 6px 9px;
  border-radius: 9px;
}
.cl-night-member.is-me { border: 1px solid rgba(241, 193, 82, 0.3); background: rgba(241, 193, 82, 0.07); }
.cl-night-member-mark { flex: 0 0 auto; font-size: 11px; font-weight: 800; }
.cl-night-member.is-yes .cl-night-member-mark { color: #4ade80; }
.cl-night-member.is-no .cl-night-member-mark { color: rgba(var(--t-mute), 0.45); }
.cl-night-member-name {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cl-night-member-note { flex: 1 1 auto; min-width: 0; font-size: 10px; color: var(--text-dim); }
.cl-night-hist { display: flex; flex-direction: column; gap: 2px; }
.cl-night-last { font-size: 11px; color: var(--text-soft); }
.cl-night-best { font-size: 10px; color: var(--text-faint); }
.cl-night-rule {
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-soft);
  background: rgba(20, 13, 38, 0.45);
  border-radius: 9px;
  padding: 7px 9px;
}

/* --- шит переноса ночи --- */
.cl-night-sheet { max-width: 420px; display: flex; flex-direction: column; gap: 10px; }
.cl-night-move-input { width: 100%; }

/* ── маяк и зал записей (clans v3, волна B) ────────────────────────────────
   Маяк — врезка наверху тела панели войны: золото на красной панели, как
   сигнал. Зал — золотая панель после состава: это память клана. Ни одна из
   этих построек не скроллится внутри панели — тело растёт по контенту,
   скроллит сцена (см. .cl-panel-body). */

/* === маяк: врезка в панель войны === */
.cl-bc {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(241, 193, 82, 0.22);
  background: rgba(241, 193, 82, 0.05);
}
.cl-bc-head { display: flex; align-items: center; gap: 8px; }
.cl-bc-title {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
.cl-bc-raise {
  flex: 0 0 auto;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(241, 193, 82, 0.34);
  background: rgba(241, 193, 82, 0.12);
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.cl-bc-list { display: flex; flex-direction: column; gap: 5px; }
.cl-bc-skel { min-height: 44px; border-radius: 10px; }
.cl-bc-empty {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 12px;
  border-radius: var(--r-lg);
  border: 1px dashed rgba(241, 193, 82, 0.3);
  background: rgba(241, 193, 82, 0.04);
}
.cl-bc-empty-title { font-family: var(--font-display); font-size: 12px; font-weight: 800; line-height: 1.25; }
.cl-bc-empty-sub { font-size: 10px; line-height: 1.55; color: var(--text-dim); }
.cl-bc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: rgba(20, 13, 38, 0.35);
}
.cl-bc-row.is-mine { border-color: rgba(241, 193, 82, 0.32); background: rgba(241, 193, 82, 0.09); }
.cl-bc-row.is-joined { border-color: rgba(var(--t-violet), 0.3); background: rgba(var(--t-violet), 0.07); }
.cl-bc-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cl-bc-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cl-bc-label {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cl-bc-left { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--danger-soft); }
.cl-bc-call { font-size: 11px; line-height: 1.45; color: var(--text-soft); }
.cl-bc-act {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.cl-bc-join {
  padding: 6px 14px;
  border: none;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, #f1c152, #d99a2b);
  color: #1a1128;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.cl-bc-join:disabled { opacity: 0.55; }
.cl-bc-going { font-size: 10px; color: var(--text-faint); white-space: nowrap; }
.cl-bc-joined {
  padding: 3px 9px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(var(--t-violet), 0.4);
  color: var(--violet-300);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cl-bc-mine { font-size: 10px; font-weight: 800; color: var(--gold); white-space: nowrap; }
@media (hover: hover) {
  .cl-bc-raise:hover { border-color: rgba(241, 193, 82, 0.6); background: rgba(241, 193, 82, 0.18); }
  .cl-bc-join:hover { filter: brightness(1.1); }
}

/* === маяк: шит «Поднять маяк» === */
.cl-bc-sheet { max-width: 520px; display: flex; flex-direction: column; gap: 10px; }
.cl-bc-rule {
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-soft);
  background: rgba(20, 13, 38, 0.45);
  border-radius: 9px;
  padding: 7px 9px;
}
.cl-bc-group-lbl {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cl-bc-kinds { display: flex; gap: 6px; }
.cl-bc-kind {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 9px 6px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}
.cl-bc-kind-glyph { font-size: 18px; }
.cl-bc-kind.is-on { border-color: rgba(241, 193, 82, 0.5); background: rgba(241, 193, 82, 0.12); color: var(--text); }
.cl-bc-games { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cl-bc-game {
  padding: 7px 4px;
  border-radius: 9px;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
}
.cl-bc-game.is-on { border-color: rgba(241, 193, 82, 0.5); background: rgba(241, 193, 82, 0.12); color: var(--text); }
.cl-bc-err {
  font-size: 11px;
  line-height: 1.45;
  color: var(--danger-soft);
  background: rgba(255, 93, 108, 0.08);
  border: 1px solid rgba(255, 93, 108, 0.25);
  border-radius: 9px;
  padding: 7px 9px;
}
.cl-bc-cta { margin-top: 2px; }
@media (hover: hover) {
  .cl-bc-kind:hover, .cl-bc-game:hover { border-color: rgba(241, 193, 82, 0.4); color: var(--text); }
}

/* === зал записей === */
.cl-panel-hall { border-color: rgba(241, 193, 82, 0.24); }
.cl-panel-hall .cl-panel-title { color: var(--gold); }
.cl-hall-body { padding: 10px 12px; display: flex; flex-direction: column; }
.cl-hall-load { display: flex; flex-direction: column; gap: 8px; }
.cl-hall { display: flex; flex-direction: column; gap: 9px; }
.cl-hall-sec {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 9px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: rgba(20, 13, 38, 0.3);
}
.cl-hall-sec-title {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.cl-hall-row { display: flex; align-items: center; gap: 7px; font-size: 12px; min-width: 0; }
.cl-hall-name {
  flex: 0 1 auto;
  min-width: 0;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cl-hall-week { flex: 0 0 auto; font-size: 10px; color: var(--text-faint); }
.cl-hall-pts { flex: 0 0 auto; font-weight: 800; color: var(--gold); white-space: nowrap; }
.cl-hall-empty { font-size: 11px; color: var(--text-faint); padding: 2px 0; }
.cl-hall-pick {
  align-self: flex-start;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(var(--t-violet), 0.36);
  background: rgba(var(--t-violet), 0.09);
  color: var(--violet-300);
  font-size: 10px;
  font-weight: 700;
}
.cl-hall-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cl-hall-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 9px;
  border-radius: 10px;
  border: 1px solid rgba(241, 193, 82, 0.2);
  background: rgba(241, 193, 82, 0.05);
}
.cl-hall-tile-num { font-size: 16px; font-weight: 800; color: var(--gold); }
.cl-hall-tile-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
  line-height: 1.35;
}
.cl-hall-list { display: flex; flex-direction: column; gap: 3px; }
.cl-hall-tag { flex: 0 0 auto; font-size: 11px; font-weight: 800; }
.cl-hall-front {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 11px;
  color: var(--text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cl-hall-rname {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 11px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cl-hall-score { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--text-soft); white-space: nowrap; }
.cl-hall-since { flex: 0 0 auto; font-size: 10px; color: var(--text-faint); white-space: nowrap; }
@media (hover: hover) {
  .cl-hall-pick:hover { border-color: rgba(var(--t-violet), 0.6); color: var(--text); }
}

/* === зал: шит выбора бойца недели === */
.cl-hall-sheet { max-width: 520px; display: flex; flex-direction: column; gap: 8px; }
.cl-hall-pick-note { font-size: 10px; line-height: 1.5; color: var(--text-soft); }
.cl-hall-pick-list { display: flex; flex-direction: column; gap: 4px; }
.cl-hall-pick-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 9px;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
}
.cl-hall-pick-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (hover: hover) {
  .cl-hall-pick-row:hover { border-color: rgba(241, 193, 82, 0.4); background: rgba(241, 193, 82, 0.07); }
}
.cl-paid-hall-sudo{opacity:.3;filter:saturate(1.08) contrast(1.04)}.cl-paid-terminal{position:absolute;left:50%;top:6px;z-index:4;max-width:42%;transform:translateX(-50%);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 7px;border:1px solid #5bffa56b;border-radius:5px;color:#8affbc;background:#020805e8;font:700 7px/1 var(--font-mono);box-shadow:0 0 14px #42f58b1d}.cl-paid-terminal::after{content:" ▮";animation:clSudoCursor .9s steps(1) 4}@keyframes clSudoCursor{50%{opacity:0}}@media(prefers-reduced-motion:reduce){.cl-paid-terminal::after{animation:none}}
.cl-paid-hall-fork{filter:saturate(1.08) contrast(1.04);opacity:.7}.cl-paid-roster-mark{position:absolute;right:12px;bottom:10px;z-index:3;padding:5px 8px;border:1px solid #57dfff77;border-radius:8px;color:#f3e8ff;background:#080612cc;font:800 8px/1 var(--font-mono);letter-spacing:.08em;text-shadow:1px 0 #ff2acb}
.cl-paid-press-office{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 56%;opacity:.34;filter:saturate(1.08) contrast(1.04);mix-blend-mode:screen;pointer-events:none}.cl-paid-press-copy{position:absolute;left:50%;top:7px;z-index:4;max-width:54%;transform:translateX(-50%);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px 9px;border:1px solid #e3c16f8c;border-radius:6px;color:#ffe8aa;background:#08090ce8;font:900 7px/1 var(--font-mono);letter-spacing:.09em;box-shadow:0 0 17px #8b62ff36}.cl-paid-roster-context{border-color:#e4c16e88;color:#ffe8a9;background:#0b0911d9;text-shadow:1px 0 #55e9db}
.cl-roster-fork{position:relative;border:1px solid #55dfff66;background:radial-gradient(circle at 90% 8%,#ff2acb22,transparent 28%),linear-gradient(145deg,#061019bb,#160821bb);box-shadow:inset 4px 0 #2bdfff66,inset -4px 0 #ff2bcb55}
.cl-roster-fork .cl-row{border-color:#765ba655}.cl-roster-fork .cl-row-name{color:#f4eaff;text-shadow:0 0 7px #cf38ff55}

/* The clan's public description editor, beside the door switch. */
.cl-desc-edit { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.cl-desc-edit .pnl-input { flex: 1; min-width: 0; }