/* ===== Clans (js/clans-ui.js) ===== */
/* Dunkle Flaeche wie Rangliste und Shop: Gold, Clan Bits und Wappen wirken nur auf Dunkel. */
.clans-side-btn { border-color: rgba(96,165,250,.85); background: linear-gradient(155deg, #1e4fbf, #172a5c 62%, #18212d); }
.clans-side-btn .side-ico3d { filter: drop-shadow(0 2px 4px rgba(96,165,250,.5)); }
.clans-side-btn.is-locked .side-ico3d { filter: saturate(.45) brightness(.85); }
.clans-side-btn .badge.is-new { min-width: 28px; padding: 0 4px; font-size: 7px; background: #ffd447; color: #3a2a00; }
.clans-side-btn .badge.is-lock { min-width: 18px; padding: 0 2px; font-size: 9px; background: #0d1522; border: 1px solid rgba(255,255,255,.35); }
.clans-side-btn .badge:not(.is-new):not(.is-lock) { min-width: 12px; height: 12px; top: -3px; right: -3px; padding: 0; font-size: 0; box-shadow: 0 0 0 2px #1b2430; }
.side-btn .badge[hidden] { display: none; }

.clan {
  --c-bg: #0a0f17; --c-card: #111925; --c-card2: #162131; --c-line: rgba(255,255,255,.08);
  --c-text: #e9eef5; --c-dim: #8594a8; --c-gold: #f6c453; --c-blue: #46c8ff; --c-bit: #38d6ff;
  display: flex; flex-direction: column; gap: 10px;
  margin: -12px; padding: 14px 12px 18px; min-height: calc(100% + 24px);
  color: var(--c-text); background: radial-gradient(120% 60% at 50% 0%, #152a4a 0%, var(--c-bg) 62%);
  font-variant-numeric: tabular-nums;
}
.clan h2, .clan h3 { color: #fff; }
.clan-card { padding: 12px; border: 1px solid var(--c-line); border-radius: 14px; background: var(--c-card); }
.clan-link { align-self: center; padding: 4px 6px; border: 0; background: none; color: var(--c-blue); font: inherit; font-size: 12px; font-weight: 800; text-decoration: underline; cursor: pointer; }
.clan-flash { padding: 9px 12px; border-radius: 11px; font-size: 12.5px; font-weight: 700; color: #bff3d4; background: rgba(40,190,110,.14); border: 1px solid rgba(40,190,110,.35); }
.clan-flash.is-error { color: #ffd0cb; background: rgba(231,76,60,.14); border-color: rgba(231,76,60,.4); }
.clan-status { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 12px; text-align: center; border: 1px dashed var(--c-line); border-radius: 14px; }
.clan-status b { font-size: 14px; }
.clan-status small { color: var(--c-dim); font-size: 12px; }
.clan-status .lb-btn { margin-top: 6px; }
.clan-spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(70,200,255,.2); border-top-color: var(--c-blue); animation: clan-spin .8s linear infinite; }
@keyframes clan-spin { to { transform: rotate(360deg); } }
.clan-footnote { margin: 2px 0 0; color: var(--c-dim); font-size: 11px; text-align: center; line-height: 1.4; }
.clan .lb-btn { border: 1px solid var(--c-line); border-radius: 10px; color: var(--c-text); background: var(--c-card2); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.clan .lb-btn.primary { border-color: transparent; color: #04111d; background: linear-gradient(180deg, #6fd8ff, #2f9dff); box-shadow: 0 4px 12px rgba(47,157,255,.3); }
.clan .lb-btn:disabled { opacity: .45; cursor: default; }
.clan .lb-btn.danger { color: #ffb4ab; border-color: rgba(231,76,60,.45); background: rgba(231,76,60,.1); }
.clan .lb-btn.is-armed { color: #fff; background: #d9432f; border-color: #ff8d7a; animation: pulse 1s ease-in-out infinite; }
.clan .btn.danger-ghost { background: transparent; border-color: rgba(231,76,60,.5); color: #ff9d90; }

/* Wappen: gerendertes Schild, darauf die Initialen */
.clan-emblem { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; }
.clan-emblem img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)); }
.clan-emblem b { position: relative; margin-top: -4%; color: #fff; font-size: 13px; font-weight: 900; letter-spacing: .5px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.clan-emblem.is-sm { width: 34px; height: 34px; }
.clan-emblem.is-sm b { font-size: 10px; }
.clan-emblem.is-lg { width: 64px; height: 64px; }
.clan-emblem.is-lg b { font-size: 19px; }
.clan-bits { display: inline-flex; align-items: center; gap: 3px; color: var(--c-bit); font-size: 12.5px; font-weight: 900; white-space: nowrap; }
.clan-bits img { width: 18px; height: 18px; object-fit: contain; }

/* Gesperrt: Vorschau */
.clan-hero { position: relative; overflow: hidden; flex: 0 0 auto; border-radius: 16px; aspect-ratio: 16 / 10; box-shadow: 0 10px 26px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.1); }
.clan-hero-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.clan-hero-tag { position: absolute; left: 10px; bottom: 10px; padding: 4px 9px; border-radius: 99px; background: rgba(10,15,23,.82); color: #fff; font-size: 10px; font-weight: 900; letter-spacing: 1.2px; }
.clan-lock-head { display: flex; align-items: center; gap: 10px; }
.clan-lock-head img { width: 46px; height: 46px; object-fit: contain; }
.clan-lock-head b { display: block; margin-top: 2px; font-size: 15px; line-height: 1.25; }
.clan-star-row { display: flex; justify-content: center; gap: 8px; margin: 12px 0 8px; }
.clan-star { position: relative; width: 30px; height: 30px; }
.clan-star img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) brightness(.45); }
.clan-star.on img { filter: none; }
.clan-star.goal::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px dashed var(--c-gold); animation: clan-spin 6s linear infinite; }
.clan-level-row { display: flex; justify-content: space-between; align-items: center; margin: 12px 0 8px; }
.clan-level-goal { padding: 3px 9px; border: 2px dashed var(--c-gold); border-radius: 99px; color: var(--c-gold); font-size: 11px; font-weight: 900; letter-spacing: .6px; }
.clan-progress { height: 10px; border-radius: 99px; overflow: hidden; background: #1c2838; }
.clan-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f6c453, #ffe39a); box-shadow: 0 0 10px rgba(246,196,83,.5); }
.clan-lock p { margin: 8px 0 0; color: #b8c4d4; font-size: 12.5px; line-height: 1.45; }
.clan-lock p b { color: #fff; }
.clan-features { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.clan-features li { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--c-card); border: 1px solid var(--c-line); font-size: 12.5px; line-height: 1.4; color: #b8c4d4; }
.clan-features img { width: 38px; height: 38px; object-fit: contain; }
.clan-features b { color: #fff; }

/* Hinweis vor dem ersten Beitritt */
.clan-consent { text-align: center; }
.clan-consent-ico { width: 84px; height: 84px; object-fit: contain; }
.clan-consent h2 { margin: 4px 0 8px; font-size: 20px; }
.clan-consent p { margin: 0 0 8px; color: #b8c4d4; font-size: 13px; line-height: 1.5; }
.clan-consent p b { color: #fff; }
.clan-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.clan-actions.row { flex-direction: row; }
.clan-actions .btn { flex: 1; width: 100%; margin-top: 0; }

/* Kopf ohne Clan */
.clan-intro-card { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: center; padding: 10px 40px 10px 8px; overflow: hidden;
  border: 1px solid rgba(96,165,250,.3); border-radius: 16px; background: radial-gradient(90% 140% at 10% 50%, rgba(59,130,246,.3), transparent 60%), linear-gradient(135deg, #14203a, #0f1724 70%); }
.clan-intro-card img { width: 96px; height: 84px; object-fit: contain; }
.clan-intro-card h2 { margin: 2px 0 3px; font-size: 19px; }
.clan-intro-card p { margin: 0; color: #b8c4d4; font-size: 12px; line-height: 1.4; }
.clan-help, .clan-icon-btn { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--c-line); border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: 14px; font-weight: 900; cursor: pointer; }
.clan-help { position: absolute; top: 8px; right: 8px; }
.clan-icon-btn svg { width: 15px; height: 15px; }

.clan-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: #0d141f; border: 1px solid var(--c-line); }
.clan-tabs button { position: relative; flex: 1; padding: 8px 4px; border: 0; border-radius: 9px; background: transparent; color: var(--c-dim); font: inherit; font-size: 11.5px; font-weight: 900; letter-spacing: .8px; cursor: pointer; }
.clan-tabs button.is-active { color: #fff; background: linear-gradient(180deg, #24406e, #1a2c4c); box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.clan-dot { position: absolute; top: 6px; margin-left: 4px; width: 7px; height: 7px; border-radius: 50%; background: #ff5a4a; box-shadow: 0 0 6px #ff5a4a; }

/* Clan finden */
.clan-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-card); color: var(--c-dim); }
.clan-search svg { width: 17px; height: 17px; flex: 0 0 auto; }
.clan-search input { flex: 1; min-width: 0; height: 40px; border: 0; outline: 0; background: transparent; color: #fff; font: inherit; font-size: 14px; }
.clan-list { display: flex; flex-direction: column; gap: 7px; }
.clan-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--c-line); border-radius: 13px; background: var(--c-card); }
.clan-row-main { flex: 1; min-width: 0; }
.clan-row-top { display: flex; align-items: center; gap: 6px; }
.clan-row-top b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.clan-rank { color: var(--c-dim); font-size: 11px; font-weight: 800; }
.clan-row p { margin: 2px 0 0; color: #9fb0c5; font-size: 11.5px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clan-row-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 5px; }
.clan-row-meta small { color: var(--c-dim); font-size: 11px; }
.clan-cap { position: relative; flex: 1; max-width: 120px; height: 16px; border-radius: 99px; overflow: hidden; background: #1c2838; }
.clan-cap i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #2563eb, #46c8ff); }
.clan-cap.is-full i { background: linear-gradient(90deg, #7a8699, #9aa6b3); }
.clan-cap em { position: relative; display: block; text-align: center; color: #fff; font-size: 10px; font-style: normal; font-weight: 900; line-height: 16px; }
.clan-row .lb-btn { flex: 0 0 auto; min-width: 58px; min-height: 34px; }

/* Formulare */
.clan-form { display: flex; flex-direction: column; gap: 6px; }
.clan-form-preview { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.clan-form-preview b { display: block; font-size: 17px; overflow-wrap: anywhere; }
.clan-label { color: #9fb0c5; font-size: 11px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
.clan-label small { text-transform: none; letter-spacing: 0; font-weight: 700; color: var(--c-dim); }
.clan-field { position: relative; }
.clan-form input, .clan-form textarea, .clan-myname input {
  width: 100%; padding: 10px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 11px; outline: 0;
  background: #0b111b; color: #fff; font: inherit; font-size: 14px; resize: none;
}
.clan-form input:focus, .clan-form textarea:focus, .clan-myname input:focus { border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(70,200,255,.15); }
.clan-count { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--c-dim); font-size: 11px; }
.clan-field input { padding-right: 52px; }
.clan-hint { margin: 0; min-height: 15px; color: var(--c-dim); font-size: 11.5px; }
.clan-hint.is-error { color: #ff9d90; }
.clan-emblems { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.clan-emblems button { aspect-ratio: 1; padding: 3px; border: 2px solid transparent; border-radius: 10px; background: #0b111b; cursor: pointer; }
.clan-emblems button img { width: 100%; height: 100%; object-fit: contain; }
.clan-emblems button.is-picked { border-color: var(--c-gold); box-shadow: 0 0 0 3px rgba(246,196,83,.2); }
.clan-form .btn { margin-top: 6px; }
@media (max-width: 380px) { .clan-emblems { grid-template-columns: repeat(4, 1fr); } }

/* Im Clan: Kopf */
.clan-head { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(96,165,250,.3); background: radial-gradient(90% 120% at 0% 0%, rgba(59,130,246,.28), transparent 60%), linear-gradient(135deg, #14203a, #0f1724 70%);
  box-shadow: 0 10px 26px rgba(0,0,0,.35); }
.clan-head-top { display: flex; align-items: flex-start; gap: 10px; }
.clan-head-copy { flex: 1; min-width: 0; }
.clan-head-copy h2 { margin: 2px 0 2px; font-size: 20px; line-height: 1.15; overflow-wrap: anywhere; }
.clan-head-copy p { margin: 0; color: #b8c4d4; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.clan-head-btns { display: flex; flex-direction: column; gap: 6px; }
.clan-stats { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 6px; }
.clan-stat { position: relative; padding: 7px 8px; border: 1px solid var(--c-line); border-radius: 11px; background: rgba(0,0,0,.28); min-width: 0; }
.clan-stat b { display: block; font-size: 17px; line-height: 1.15; white-space: nowrap; }
.clan-stat small { display: block; color: var(--c-dim); font-size: 8.5px; font-weight: 800; letter-spacing: 1px; white-space: nowrap; }
.clan-stat.is-bits { padding-left: 42px; border-color: rgba(56,214,255,.35); background: linear-gradient(135deg, rgba(56,214,255,.14), rgba(0,0,0,.28)); }
.clan-stat.is-bits img { position: absolute; left: 4px; top: 50%; width: 36px; height: 36px; transform: translateY(-50%); animation: clan-bit-float 3.2s ease-in-out infinite; }
.clan-stat.is-bits b { color: var(--c-bit); }
@keyframes clan-bit-float { 0%,100% { transform: translateY(-50%) rotate(-6deg); } 50% { transform: translateY(-62%) rotate(6deg); } }
.clan-today { display: flex; flex-direction: column; gap: 5px; }
.clan-today-pips { display: flex; gap: 3px; }
.clan-today-pips i { flex: 1; height: 7px; border-radius: 4px; background: #1f2b3c; }
.clan-today-pips i.on { background: linear-gradient(90deg, #38d6ff, #7c5cff); box-shadow: 0 0 6px rgba(56,214,255,.45); }
.clan-today span { color: #b8c4d4; font-size: 11.5px; }
.clan-today b { color: #fff; }
.clan-mybit { display: flex; align-items: center; gap: 6px; margin: 0; padding: 7px 10px; border-radius: 10px; background: rgba(255,255,255,.05); color: #b8c4d4; font-size: 11.5px; line-height: 1.35; }
.clan-mybit img { width: 22px; height: 22px; flex: 0 0 auto; }
.clan-mybit.is-in { color: #bff3ff; background: rgba(56,214,255,.1); }

/* Mitglieder */
.clan-members { display: flex; flex-direction: column; gap: 6px; }
.clan-member { border: 1px solid var(--c-line); border-radius: 13px; background: var(--c-card); overflow: hidden; }
.clan-member.is-me { border-color: rgba(70,200,255,.5); background: linear-gradient(90deg, rgba(70,200,255,.12), var(--c-card) 70%); }
.clan-member.is-open { border-color: rgba(246,196,83,.45); }
.clan-member-main { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.clan-member-main:disabled { cursor: default; opacity: 1; }
.clan-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 900;
  background: linear-gradient(160deg, #3b82f6, #1e3a8a); box-shadow: 0 0 0 2px #1f2b3c; }
.clan-avatar.sm { width: 28px; height: 28px; font-size: 10px; }
.clan-avatar.r-ceo { background: linear-gradient(160deg, #fcd34d, #b45309); box-shadow: 0 0 0 2px #f6c453; color: #3a2a00; }
.clan-avatar.r-cfo { background: linear-gradient(160deg, #4ade80, #166534); box-shadow: 0 0 0 2px #22c55e; }
.clan-avatar.r-manager { background: linear-gradient(160deg, #fdba74, #c2410c); box-shadow: 0 0 0 2px #fb923c; }
.clan-member-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.clan-member-copy > b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.clan-member-copy em { padding: 1px 4px; border-radius: 4px; background: var(--c-blue); color: #04111d; font-size: 8.5px; font-style: normal; font-weight: 900; letter-spacing: .6px; vertical-align: 2px; }
.clan-member-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.clan-member-tags .lvl-chip { padding: 1px 7px; font-size: 9.5px; }
.clan-member-rank { flex: 0 0 18px; color: var(--c-gold); font-size: 12px; font-weight: 900; text-align: center; font-variant-numeric: tabular-nums; }
.clan-rank-note { margin: 0 2px 8px; color: #9fb2c9; font-size: 11px; }
.clan-role { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 2px; border-radius: 99px; background: #1c2838; color: #b8c4d4; font-size: 10px; font-weight: 900; letter-spacing: .6px; }
.clan-role img { width: 17px; height: 17px; object-fit: contain; }
.clan-role.r-ceo { background: rgba(246,196,83,.18); color: #ffe39a; }
.clan-role.r-cfo { background: rgba(34,197,94,.16); color: #9ff0bd; }
.clan-role.r-manager { background: rgba(251,146,60,.16); color: #ffc79a; }
.clan-member-bits { display: flex; align-items: center; gap: 4px; color: var(--c-dim); font-size: 12px; }
.clan-member-bits img { width: 22px; height: 22px; filter: grayscale(1) brightness(.6); }
.clan-member-bits.is-today { color: var(--c-bit); }
.clan-member-bits.is-today img { filter: drop-shadow(0 0 5px rgba(56,214,255,.6)); }
.clan-member-acts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 10px 56px; }
.clan-member-acts small { flex-basis: 100%; color: var(--c-dim); font-size: 11px; }
.clan-member-acts .lb-btn { min-height: 32px; padding: 0 10px; font-size: 11px; }
.clan-legend { padding: 8px 12px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-card); font-size: 12px; }
.clan-legend summary { color: #9fb0c5; font-weight: 800; cursor: pointer; }
.clan-legend ul { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 2px; padding: 0; list-style: none; }
.clan-legend li { display: grid; grid-template-columns: 92px 1fr; gap: 8px; align-items: center; color: #b8c4d4; }
.clan-myname { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; color: #b8c4d4; font-size: 12px; }
.clan-myname b { color: #fff; }
.clan-myname.is-editing input { flex: 1 1 140px; width: auto; }
.clan-myname .clan-hint { flex-basis: 100%; }
.clan-leave { display: flex; flex-direction: column; gap: 5px; align-items: stretch; text-align: center; }
.clan-leave small { color: #ff9d90; font-size: 11.5px; }

/* Chat */
.clan-chat-list { display: flex; flex-direction: column; gap: 6px; height: min(46vh, 380px); flex: 0 0 auto; overflow-y: auto; padding: 8px; border: 1px solid var(--c-line); border-radius: 14px; background: #0b111b; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.clan-chat-empty { margin: auto; color: var(--c-dim); font-size: 12.5px; }
.clan-msg { position: relative; display: flex; align-items: flex-end; gap: 6px; max-width: 88%; flex: 0 0 auto; }
.clan-msg.is-me { align-self: flex-end; }
.clan-msg.is-system { align-self: center; max-width: 94%; }
.clan-msg.is-system span { padding: 3px 10px; border-radius: 99px; background: rgba(255,255,255,.06); color: #8fa3bb; font-size: 11px; text-align: center; }
.clan-bubble { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px 5px; border-radius: 14px 14px 14px 4px; background: #1a2536; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; cursor: pointer; }
.clan-msg.is-me .clan-bubble { border-radius: 14px 14px 4px 14px; background: linear-gradient(160deg, #2563eb, #1d4ed8); cursor: default; }
.clan-bubble b { color: #9fd3ff; font-size: 11px; }
.clan-bubble b small { color: var(--c-dim); font-size: 9.5px; font-weight: 800; }
.clan-bubble time { align-self: flex-end; color: rgba(255,255,255,.45); font-size: 9.5px; }
.clan-msg-menu { position: absolute; left: 34px; top: 100%; z-index: 2; display: flex; gap: 4px; margin-top: 3px; padding: 4px; border-radius: 10px; background: #243247; box-shadow: 0 6px 16px rgba(0,0,0,.5); }
.clan-msg-menu button { padding: 6px 9px; border: 0; border-radius: 7px; background: #2f415c; color: #fff; font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.clan-msg-menu button[data-act=report] { color: #ffb4ab; }
.clan-msg.has-menu { margin-bottom: 38px; }
.clan-chat-form { display: flex; gap: 6px; }
.clan-chat-form input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; outline: 0; background: #0b111b; color: #fff; font: inherit; font-size: 14px; }
.clan-chat-form input:focus { border-color: var(--c-blue); }
.clan-chat-form .lb-btn { width: 46px; min-height: 42px; padding: 0; }
.clan-chat-form .lb-btn svg { width: 18px; height: 18px; }
.clan-muted { margin: 0; color: var(--c-dim); font-size: 11.5px; text-align: center; }
.clan-muted .clan-link { font-size: 11.5px; }

/* Clan-Rangliste */
.clan-rule { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 11px; background: rgba(56,214,255,.08); border: 1px solid rgba(56,214,255,.22); color: #b8c4d4; font-size: 11.5px; line-height: 1.4; }
.clan-rule img { width: 30px; height: 30px; flex: 0 0 auto; }
.clan-rule b { color: #fff; }
.clan-row.is-board { gap: 8px; }
.clan-row.is-mine { border-color: rgba(70,200,255,.55); background: linear-gradient(90deg, rgba(70,200,255,.13), var(--c-card) 70%); }
.clan-row.place-1 { border-color: rgba(246,196,83,.5); background: linear-gradient(90deg, rgba(246,196,83,.14), var(--c-card) 70%); }
.clan-place { display: grid; place-items: center; width: 30px; flex: 0 0 auto; color: var(--c-dim); font-size: 14px; font-weight: 900; }
.clan-place img { width: 34px; height: 34px; object-fit: contain; }
.clan-row-top .clan-bits { margin-left: auto; }
.clan-board-bar { height: 5px; margin-top: 5px; border-radius: 3px; background: #1c2838; overflow: hidden; }
.clan-board-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #38d6ff, #7c5cff); }

.clan-fly-bit { position: fixed; z-index: 400; width: 32px; height: 32px; pointer-events: none; }

/* ----- Erklaerbilder: einmalig, animiert ----- */
.clan-intro {
  position: absolute; inset: 0; z-index: 300; display: grid; place-items: center;
  padding: calc(12px + var(--sat)) calc(12px + var(--sar)) calc(12px + var(--sab)) calc(12px + var(--sal));
  background: rgba(4,8,16,.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: ci-fade .25s ease-out;
}
.clan-intro.is-leaving { animation: ci-fade .22s ease-in reverse forwards; }
@keyframes ci-fade { from { opacity: 0; } to { opacity: 1; } }
.ci-card { width: min(440px, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 22px;
  background: linear-gradient(180deg, #111c30, #0a0f17); border: 1px solid rgba(96,165,250,.3); box-shadow: 0 20px 60px rgba(0,0,0,.6);
  animation: ci-pop .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes ci-pop { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.ci-track { display: flex; transition: transform .45s cubic-bezier(.22,.8,.3,1); touch-action: pan-y; }
.ci-slide { flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; }
.ci-stage { position: relative; aspect-ratio: 4 / 3; overflow: hidden; container-type: inline-size; }
.ci-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ci-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 72%, #111c30); }
.ci-copy { padding: 12px 18px 4px; color: #e9eef5; text-align: center; min-height: 128px; }
.ci-kicker { display: inline-block; padding: 3px 9px; border-radius: 99px; background: #2563eb; color: #fff; font-size: 9.5px; font-weight: 900; letter-spacing: 1.6px; }
.ci-copy h2 { margin: 7px 0 5px; color: #fff; font-size: 21px; font-weight: 900; }
.ci-copy p { margin: 0; color: #b8c4d4; font-size: 13px; line-height: 1.5; }
.ci-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px 14px; }
.ci-skip { padding: 8px 6px; border: 0; background: none; color: #8594a8; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.ci-dots { display: flex; gap: 6px; }
.ci-dots i { width: 8px; height: 8px; border-radius: 99px; background: #2a3a52; cursor: pointer; transition: width .25s, background .25s; }
.ci-dots i.on { width: 22px; background: #46c8ff; }
.ci-next { min-width: 104px; padding: 10px 16px; border: 0; border-radius: 12px; background: linear-gradient(180deg, #6fd8ff, #2f9dff); color: #04111d; font: inherit; font-size: 14px; font-weight: 900; cursor: pointer; box-shadow: 0 4px 14px rgba(47,157,255,.35); }
.ci-next:active { transform: scale(.97); }

/* Bild 1: Wappen, Strahlen, zwei Max beim High-Five, Mitgliederzaehler */
.ci-rays { position: absolute; left: 50%; top: 30%; width: 120%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(120,190,255,.16) 0 9deg, transparent 9deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 62%); mask: radial-gradient(circle, #000 20%, transparent 62%); }
.ci-emblem { position: absolute; left: 50%; top: 1%; width: 30%; transform: translateX(-50%); opacity: 0; filter: drop-shadow(0 0 24px rgba(96,165,250,.55)); }
.ci-duo { position: absolute; left: 50%; bottom: 0; width: 80%; transform: translate(-50%, 30%); opacity: 0; filter: drop-shadow(0 12px 18px rgba(0,0,0,.5)); }
.ci-clap { position: absolute; left: 51%; top: 33%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(0); border-radius: 50%;
  background: radial-gradient(circle, #fff 0 8%, rgba(255,236,160,.95) 14%, rgba(255,210,90,.5) 30%, transparent 62%); }
.ci-clap::before { content: ''; position: absolute; inset: -30%; background: repeating-conic-gradient(rgba(255,236,160,.9) 0 5deg, transparent 5deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 22%, #000 26%, transparent 60%); mask: radial-gradient(circle, transparent 22%, #000 26%, transparent 60%); border-radius: 50%; }
.ci-members { position: absolute; left: 4%; top: 5%; display: grid; grid-template-columns: auto auto auto; align-items: center; gap: 2px 5px; padding: 6px 9px 7px 6px;
  border-radius: 12px; background: rgba(8,14,26,.78); border: 1px solid rgba(255,255,255,.12); color: #fff; opacity: 0; }
.ci-members img { width: 26px; height: 26px; object-fit: contain; grid-row: span 2; }
.ci-count { font-size: 20px; font-weight: 900; line-height: 1; min-width: 26px; text-align: right; }
.ci-count.bump, .ci-vault-n.bump { animation: ci-bump .25s ease-out; }
@keyframes ci-bump { 50% { transform: scale(1.25); color: #ffe39a; } }
.ci-members small { color: #8fa3bb; font-size: 11px; font-weight: 800; }
.ci-pips { grid-column: 2 / span 2; display: grid; grid-template-columns: repeat(10, 5px); gap: 2px; }
.ci-pips i { width: 5px; height: 5px; border-radius: 2px; background: #2a3a52; }
.is-playing .ci-rays { animation: ci-in .6s .1s ease-out forwards, ci-rays 14s linear infinite; }
.is-playing .ci-emblem { animation: ci-emblem .7s .1s cubic-bezier(.34,1.56,.64,1) forwards, ci-float 3.6s 1s ease-in-out infinite; }
.is-playing .ci-duo { animation: ci-rise .75s .35s cubic-bezier(.22,1.2,.36,1) forwards, ci-bob 2.4s 1.2s ease-in-out infinite; }
.is-playing .ci-clap { animation: ci-clap 2.4s 1.05s ease-out infinite; }
.is-playing .ci-members { animation: ci-in .4s .55s ease-out forwards; }
.is-playing .ci-pips i { animation: ci-pip .2s calc(.7s + var(--i) * 70ms) ease-out forwards; }
@keyframes ci-in { to { opacity: 1; } }
@keyframes ci-rays { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes ci-emblem { from { opacity: 0; transform: translateX(-50%) scale(.3) rotate(-12deg); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes ci-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes ci-rise { to { opacity: 1; transform: translate(-50%, 13%); } }
@keyframes ci-bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes ci-clap { 0% { transform: translate(-50%, -50%) scale(0); opacity: 1; } 18% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 45%,100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } }
@keyframes ci-pip { to { background: linear-gradient(135deg, #38d6ff, #2563eb); box-shadow: 0 0 4px rgba(56,214,255,.8); } }

/* Bild 2: Organigramm der Rollen */
.ci-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.ci-lines path { fill: none; stroke: rgba(127,196,255,.75); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 700; stroke-dashoffset: 700; vector-effect: non-scaling-stroke; }
.is-playing .ci-lines path { animation: ci-draw .8s .45s ease-out forwards; }
.is-playing .ci-lines path.l2 { animation-delay: 1.15s; }
@keyframes ci-draw { to { stroke-dashoffset: 0; } }
.ci-node { position: absolute; left: var(--x); top: var(--y); display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -50%) scale(0); opacity: 0; text-align: center; }
.ci-node img { width: 15cqw; height: 15cqw; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.ci-node b { margin-top: -2px; padding: 2px 8px; border-radius: 99px; background: rgba(8,14,26,.85); border: 1px solid rgba(255,255,255,.15); color: #fff; font-size: 9.5px; font-weight: 900; letter-spacing: 1px; white-space: nowrap; }
.ci-node small { margin-top: 2px; color: #cfe3ff; font-size: 9.5px; font-weight: 700; white-space: nowrap; text-shadow: 0 1px 3px #000; }
.ci-node.n-ceo img { width: 21cqw; height: 21cqw; filter: drop-shadow(0 0 16px rgba(246,196,83,.65)); }
.ci-node.n-ceo b { background: linear-gradient(180deg, #f6c453, #c9962b); color: #3a2a00; border-color: #ffe39a; }
.ci-node.n-cfo b { border-color: #22c55e; }
.ci-node.n-manager b { border-color: #fb923c; }
.ci-node.n-member img { width: 12cqw; height: 13cqw; }
.ci-node.n-member b { font-size: 8px; padding: 1px 6px; }
.is-playing .ci-node { animation: ci-node .5s var(--d) cubic-bezier(.34,1.56,.64,1) forwards; }
.is-playing .ci-node.n-ceo img { animation: ci-float 3s 1s ease-in-out infinite; }
@keyframes ci-node { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* Bild 3: jedes aktive Mitglied bringt ein Clan Bit auf das Siegerpodest */
.ci-trophy { position: absolute; left: 50%; top: 3%; width: 17%; transform: translateX(-50%); opacity: 0; filter: drop-shadow(0 0 18px rgba(255,210,90,.7)); }
.ci-podium { position: absolute; left: 50%; bottom: -2%; width: 96%; transform: translate(-50%, 20%); opacity: 0; }
.ci-crew { position: absolute; inset: 0; pointer-events: none; }
.ci-mate { position: absolute; left: calc(12% + var(--i) * 19%); top: 29%; width: 11%; transform: translate(-50%, -50%); opacity: 0; }
.ci-mate img { display: block; width: 100%; filter: grayscale(1) brightness(.55); }
.ci-mate i { position: absolute; right: -10%; bottom: 0; display: grid; place-items: center; width: 44%; aspect-ratio: 1; border-radius: 50%; background: #22c55e; color: #fff; font-size: 9px; font-style: normal; font-weight: 900; transform: scale(0); }
.ci-drop { position: absolute; left: calc(12% + var(--i) * 19%); top: 31%; width: 9%; transform: translate(-50%, -50%); opacity: 0; filter: drop-shadow(0 0 8px rgba(56,214,255,.8)); }
.ci-vault { position: absolute; left: 4%; top: 4%; display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 6px; padding: 5px 10px 6px 6px; border-radius: 12px;
  background: rgba(8,14,26,.8); border: 1px solid rgba(56,214,255,.4); opacity: 0; }
.ci-vault img { width: 30px; height: 30px; grid-row: span 2; }
.ci-vault b { color: #38d6ff; font-size: 19px; font-weight: 900; line-height: 1; }
.ci-vault small { color: #8fa3bb; font-size: 8.5px; font-weight: 900; letter-spacing: 1px; }
.is-playing .ci-trophy { animation: ci-in .5s .2s ease-out forwards, ci-trophy 2.8s 1s ease-in-out infinite; }
.is-playing .ci-podium { animation: ci-podium .7s .1s cubic-bezier(.22,1.2,.36,1) forwards; }
.is-playing .ci-vault { animation: ci-in .4s .5s ease-out forwards; }
.is-playing .ci-mate { animation: ci-in .3s calc(.35s + var(--i) * 80ms) ease-out forwards; }
.is-playing .ci-mate img { animation: ci-light .3s calc(.9s + var(--i) * 560ms) ease-out forwards; }
.is-playing .ci-mate i { animation: ci-check .35s calc(.9s + var(--i) * 560ms) cubic-bezier(.34,1.56,.64,1) forwards; }
.is-playing .ci-drop { animation: ci-drop .62s calc(.9s + var(--i) * 560ms) cubic-bezier(.5,0,.75,.4) forwards; }
@keyframes ci-podium { to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes ci-trophy { 0%,100% { translate: 0 0; filter: drop-shadow(0 0 14px rgba(255,210,90,.55)); } 50% { translate: 0 -4px; filter: drop-shadow(0 0 26px rgba(255,210,90,.95)); } }
@keyframes ci-light { to { filter: none; } }
@keyframes ci-check { to { transform: scale(1); } }
@keyframes ci-drop {
  0% { left: calc(12% + var(--i) * 19%); top: 31%; opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  20% { opacity: 1; transform: translate(-50%, -80%) scale(1.15); }
  100% { left: 50%; top: 62%; opacity: 0; transform: translate(-50%, -50%) scale(.55) rotate(200deg); }
}
@media (prefers-reduced-motion: reduce) {
  .clan-intro *, .clan-intro { animation: none !important; transition: none !important; }
  .ci-rays, .ci-emblem, .ci-duo, .ci-members, .ci-node, .ci-trophy, .ci-podium, .ci-vault, .ci-mate { opacity: 1 !important; }
  .ci-duo { transform: translate(-50%, 13%) !important; }
  .ci-node { transform: translate(-50%, -50%) !important; }
  .ci-podium { transform: translate(-50%, 0) !important; }
  .ci-lines path { stroke-dashoffset: 0; }
  .ci-mate img { filter: none; }
  .clan-stat.is-bits img, .clan-star.goal::after { animation: none; }
}

/* Querformat mit wenig Hoehe (PC-Browser, Handy quer): Bild links, Text rechts */
@media (orientation: landscape) and (max-height: 620px) {
  .ci-card { width: min(780px, 100%); }
  .ci-slide { flex-direction: row; align-items: center; }
  .ci-stage { flex: 0 0 56%; }
  .ci-stage::after { background: linear-gradient(90deg, transparent 80%, #111c30); }
  .ci-copy { flex: 1; min-height: 0; padding: 12px 18px; text-align: left; }
  .ci-foot { padding-top: 6px; }
}
@media (orientation: landscape) and (max-height: 420px) {
  .ci-stage { flex-basis: 50%; }
  .ci-copy h2 { font-size: 18px; }
  .ci-copy p { font-size: 12px; }
}
/* ===== Clans in den Ranglisten + Einladungen (supabase/clan-invites.sql) ===== */
.lb-clan { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; margin-top: 2px; color: #ffd98a;
  font-size: 10.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-clan img { width: 15px; height: 15px; flex: 0 0 auto; object-fit: contain; }
.lb-clan i { font-style: normal; color: #f6c453; font-size: 8.5px; letter-spacing: .6px; }
.lb-clan.is-none { color: #7f8ea3; font-weight: 700; }
.lb-step .lb-clan { justify-content: center; font-size: 9.5px; }
.lb-invite { border-color: #4ade80; color: #dcfce7; background: linear-gradient(180deg, #1d6b3c, #134a2a); }
.lb-invite.is-sent { border-color: #64748b; color: #cbd5e1; background: #1e293b; opacity: .85; cursor: default; }
.lb-step .lb-invite { margin-top: 2px; }
.lb-invites { margin: 8px 0 10px; padding: 10px 12px; border: 1px solid rgba(74,222,128,.45); border-radius: 12px; background: rgba(22,51,31,.75); }
.lb-invites-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lb-invites-head b { color: #fff; font-size: 13px; }
.lb-invites-head span { color: #86efac; font-size: 11px; font-weight: 900; }
.lb-invites > small { display: block; margin-top: 3px; color: #a7c4b3; font-size: 11px; line-height: 1.35; }
.lb-invites-row { display: flex; align-items: center; gap: 8px; margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.08); font-size: 11px; color: #cbd5e1; }
.lb-invites-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-invites-row b { color: #fff; }
.lb-invites-row button { flex: 0 0 auto; padding: 4px 9px; border: 1px solid #94a3b8; border-radius: 8px; background: transparent; color: #e2e8f0; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
.lb-compose { display: flex; flex-direction: column; gap: 8px; }
.lb-compose p { margin: 0; color: #e2e8f0; font-size: 13px; line-height: 1.45; }
.lb-compose textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #3b4a60; border-radius: 12px; background: #0f1724; color: #fff;
  font: inherit; font-size: 14px; resize: vertical; }
.lb-compose-foot { text-align: right; color: #7f8ea3; font-size: 11px; }
.clan-invite { border-color: rgba(246,196,83,.6); box-shadow: 0 0 0 3px rgba(246,196,83,.1); margin-bottom: 10px; }
.clan-invite-head { display: flex; align-items: center; gap: 10px; }
.clan-invite-head b { display: block; color: #fff; font-size: 15px; }
.clan-invite-head small { display: flex; align-items: center; gap: 6px; color: #9fb0c5; font-size: 11px; }
.clan-invite-msg { margin: 10px 0 6px; padding: 9px 12px; border-left: 3px solid #f6c453; border-radius: 0 10px 10px 0; background: rgba(246,196,83,.08); }
.clan-invite-msg p { margin: 0; color: #fff; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.clan-invite-msg cite { display: block; margin-top: 4px; color: #f6c453; font-size: 10.5px; font-style: normal; font-weight: 800; }
.clan-invite-note { display: block; color: #8594a8; font-size: 10.5px; line-height: 1.4; margin-bottom: 8px; }

/* ===== Fremde Clans ansehen (js/clans-ui.js openClanProfile, supabase/clan-view.sql) ===== */
.clan-row.is-link { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.clan-row.is-link:hover { box-shadow: 0 0 0 2px rgba(110,231,255,.35); }
.clan-row.is-link:active { transform: scale(.985); }
.clan-row.is-link:focus-visible { outline: 2px solid #37b6ff; outline-offset: 2px; }
.clan-profile-join { width: 100%; margin: 4px 0 10px; }
/* Level + Clan unter dem Namen in den Spieler-Ranglisten */
.lb-tags { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 2px; }
.lb-step .lb-tags { justify-content: center; flex-wrap: wrap; }
.lb-tags .lb-clan { margin-top: 0; }
.lb-lvl { flex: 0 0 auto; padding: 1px 7px; font-size: 9.5px; }
button.lb-clan { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; text-decoration: underline dotted rgba(255,217,138,.5); text-underline-offset: 2px; }
button.lb-clan:focus-visible { outline: 2px solid #37b6ff; outline-offset: 2px; border-radius: 4px; }