/* Approved world: Citadel in peace, Front in war. Art never contains UI/data. */
@font-face { font-family: ClanDisplay; src: url('assets/clans/syne-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: ClanText; src: url('assets/clans/golos-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: ClanText; src: url('assets/clans/golos-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
#tab-clan.clan-shell { container-type:inline-size; --clan-ground:#080c0e; --clan-surface:#111619; --clan-line:#343b3d; --clan-ink:#f5f1e8; --clan-muted:#b9bcb9; --clan-gold:#f3b653; color:var(--clan-ink); font-family:ClanText, sans-serif; background:var(--clan-ground) !important; padding:0 0 28px !important; max-width:820px; margin-inline:auto; }
#tab-clan::before, #tab-clan .clan-home-glow, #tab-clan .clan-home-hero::after { display:none !important; }
#tab-clan [hidden] { display:none !important; }
#tab-clan * { box-sizing:border-box; }
#tab-clan ::selection { background:#f3b653; color:#14100b; }
#tab-clan :is(button,input,textarea,select):focus-visible { outline:2px solid var(--clan-gold); outline-offset:3px; }
#tab-clan :is(input,textarea) { caret-color:var(--clan-gold); }
#tab-clan :is(input,textarea)::placeholder { color:var(--clan-muted); opacity:1; }
#tab-clan :is(button,input,textarea,select) { font-family:inherit; }
#tab-clan button { cursor:pointer; }
#tab-clan button:disabled { cursor:default; }
#tab-clan .clan-subnav { display:flex !important; gap:2px !important; padding:4px !important; margin:0 0 10px; background:var(--clan-surface) !important; border:1px solid var(--clan-line) !important; border-radius:12px; overflow:visible; }
#tab-clan .clan-tab-btn { flex:1; min-width:0; min-height:42px; padding:8px 3px !important; color:var(--clan-muted) !important; background:transparent !important; border:0 !important; border-radius:8px !important; font-size:12px !important; }
#tab-clan .clan-tab-btn.active { background:#eaa338 !important; color:#171007 !important; }
#tab-clan .clan-panel.active { animation:none !important; }
#tab-clan .clan-home-hero { padding:108px 12px 16px !important; overflow:visible; position:relative; isolation:isolate; border:0 !important; border-radius:0 !important; box-shadow:none !important; background:linear-gradient(0deg,var(--clan-ground) 4%,#080c0e25 70%),var(--clan-hero-art,none) center top/cover no-repeat,var(--clan-ground) !important; }
#tab-clan .clan-home-top { flex-direction:column; gap:0; text-align:center; }
#tab-clan .clan-home-emblem { width:116px; height:116px; padding:0; background:transparent !important; border:0 !important; border-radius:50%; flex:none; margin-bottom:-6px; z-index:1; filter:drop-shadow(0 8px 12px #0009); box-shadow:none !important; }
#tab-clan .clan-home-emblem img { width:100%; height:100%; object-fit:contain; border-radius:50%; }
#tab-clan .clan-home-meta { width:94%; padding:12px 8px 14px; background:#090d10ed; border:1px solid #8b693a; border-radius:12px; }
#tab-clan .clan-home-name { font:800 clamp(24px,6.8vw,42px)/1.08 ClanDisplay,ClanText,sans-serif !important; letter-spacing:-.025em !important; color:var(--clan-ink) !important; overflow-wrap:anywhere; }
#tab-clan .clan-home-sub { display:none; }
#tab-clan .clan-home-details { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 20px; color:var(--clan-muted); margin-top:9px; font-size:12px; }
#tab-clan #clan-hero-level { color:var(--clan-gold); }
#tab-clan .clan-home-xp { margin-top:16px; }
#tab-clan .clan-home-xp-row { font-size:11px; color:var(--clan-muted); margin-bottom:7px; }
#tab-clan .clan-hero-xp-bar { height:5px; background:#222a2e; border:0; }
#tab-clan .clan-hero-xp-fill { background:#edac46 !important; box-shadow:none; }
#tab-clan .clan-home-actions { display:grid; gap:10px; padding:15px; margin:0 0 12px; background:var(--clan-surface); border:1px solid #665135; border-radius:12px; }
#tab-clan .clan-peace-copy b { font-size:17px; color:var(--clan-gold); }
#tab-clan .clan-peace-copy p { font-size:12px; line-height:1.55; color:var(--clan-muted); margin:6px 0 0; max-width:65ch; }
#tab-clan .clan-cta, #tab-clan .war-primary-btn { min-height:44px; padding:11px 14px; border-radius:9px !important; border:0 !important; background:#eaa338 !important; color:#171007 !important; box-shadow:none !important; font-size:13px; font-weight:700; }
#tab-clan .clan-cta.ghost { background:var(--clan-surface) !important; color:var(--clan-ink) !important; border:1px solid var(--clan-line) !important; }
#tab-clan .clan-services { display:grid; gap:7px; margin-bottom:20px; }
#tab-clan .clan-service-icon { width:29px; height:29px; flex:none; color:#ca984c; margin-right:3px; }
#tab-clan [data-war-phase]:not([data-war-phase="active"]) #clan-war-services { display:none; }
#tab-clan .av-fallback { display:grid; place-items:center; width:100%; height:100%; background:#283035; color:#e9cc96; font-weight:700; }
#tab-clan .clan-sec-title, #tab-clan .section-heading, #tab-clan .empty-state { text-transform:none !important; }
#tab-clan :is(.bet-input-row,.clan-chat-input,.treasury-input) { background:#0b1013 !important; color:var(--clan-ink) !important; border:1px solid var(--clan-line) !important; border-radius:8px !important; }
#tab-clan :is(.action-pill,.action-btn-large,.qb-btn) { border-radius:8px !important; }
#tab-clan .qb-btn { min-height:40px; background:var(--clan-surface) !important; }
#tab-clan .clan-panel { scrollbar-color:#806137 var(--clan-ground); }
body:has(#tab-clan.active) #nav-arena { transform:none !important; }
body:has(#tab-clan.active) #nav-arena .arena-center-ring { width:24px !important; height:24px !important; margin:0 !important; padding:0 !important; background:none !important; box-shadow:none !important; border:0 !important; transform:none !important; }
body:has(#tab-clan.active) #nav-arena .arena-center-ring::before, body:has(#tab-clan.active) #nav-arena .arena-center-ring::after { display:none !important; }
body:has(#tab-clan.active) #nav-arena svg { stroke:#929a9f !important; width:24px !important; height:24px !important; }
body:has(#tab-clan.active) #nav-arena .arena-label { color:#929a9f !important; margin:0 !important; font-size:10px !important; }
#tab-clan .clan-service { display:flex; align-items:center; gap:8px; width:100%; min-height:72px; padding:13px; border:1px solid var(--clan-line); border-radius:12px; background:var(--clan-surface); text-align:left; color:var(--clan-ink); }
#tab-clan .clan-service-copy { display:grid; gap:5px; min-width:0; }
#tab-clan .clan-service-copy b { font-size:15px; }
#tab-clan .clan-service-copy small { font-size:11px; color:var(--clan-muted); }
#tab-clan .clan-service-copy strong { color:var(--clan-gold); font-size:14px; }
#tab-clan .clan-service-link { margin-left:auto; white-space:nowrap; font-size:11px; color:var(--clan-muted); }
#tab-clan .clan-service-link > span { color:var(--clan-gold); margin-left:6px; }
#tab-clan .clan-avatar-strip { display:flex; margin-left:auto; padding-left:5px; }
#tab-clan .clan-avatar-strip > span { width:25px; height:25px; border-radius:50%; overflow:hidden; margin-left:-5px; border:1px solid var(--clan-ground); background:#263036; display:grid; place-items:center; }
#tab-clan .clan-avatar-strip img { width:100%; height:100%; object-fit:cover; }
#tab-clan .clan-service-shortcuts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--clan-line); border-radius:12px; padding:7px 0; background:var(--clan-surface); }
#tab-clan .clan-service-shortcuts button { min-height:40px; color:var(--clan-ink); background:none; border:0; font-size:11px; padding:6px; }
#tab-clan .clan-service-shortcuts button + button { border-left:1px solid var(--clan-line); }
#tab-clan .clan-service-shortcuts span { color:var(--clan-gold); padding-left:4px; }
#tab-clan .clan-sec-head { margin:22px 0 10px; gap:8px; }
#tab-clan .clan-sec-title, #tab-clan .section-heading { color:var(--clan-ink) !important; font:700 18px/1.3 ClanText,sans-serif; letter-spacing:-.02em; }
#tab-clan .clan-sec-line { display:none; }
#tab-clan .clan-activity { border:0 !important; border-radius:0; background:transparent !important; padding:0 10px; }
#tab-clan .clan-log-item { padding:12px 0; gap:10px; border-bottom:1px solid #293034; color:var(--clan-ink); font-size:12px; line-height:1.5; }
#tab-clan .clan-log-item time { color:var(--clan-muted); font-size:10px; }
#tab-clan .clan-log-item p { margin:3px 0 0; }
#tab-clan .clan-log-dot { background:var(--clan-gold); box-shadow:none; }
#tab-clan .clan-compact-identity { display:flex; align-items:center; gap:12px; padding:6px 2px 14px; }
#tab-clan .clan-compact-identity > span:last-child { display:grid; gap:6px; min-width:0; }
#tab-clan .clan-compact-identity b { font:800 23px/1.1 ClanDisplay,ClanText,sans-serif; overflow-wrap:anywhere; }
#tab-clan .clan-compact-identity small { color:var(--clan-muted); font-size:11px; }
#tab-clan .clan-compact-emblem { width:54px; height:54px; flex:none; }
#tab-clan .clan-compact-emblem img { width:100%; height:100%; object-fit:contain; border-radius:50%; }
#tab-clan .clan-member-search { width:100%; min-height:46px; padding:12px; border:1px solid var(--clan-line); border-radius:10px; background:var(--clan-surface); color:var(--clan-ink); margin-bottom:12px; font-size:14px; }
#tab-clan .clan-members { display:grid; gap:0; }
#tab-clan .clan-member { display:block; width:100%; padding:12px 8px; color:var(--clan-ink); border:0 !important; border-bottom:1px solid var(--clan-line) !important; border-radius:0 !important; background:transparent !important; text-align:left; animation:none; }
#tab-clan .cm-fg { display:flex; align-items:center; gap:10px; min-width:0; }
#tab-clan .cm-body { min-width:0; display:grid; gap:4px; flex:1; }
#tab-clan .cm-name { color:var(--clan-ink); font-size:13px; }
#tab-clan .cm-role { color:var(--clan-muted); font-size:11px; }
#tab-clan .cm-avatar { width:40px; height:40px; flex:none; }
#tab-clan .cm-pts { font:700 12px ClanText,sans-serif; color:var(--clan-gold) !important; white-space:nowrap; }
#tab-clan .cm-pts small { display:block; text-align:right; color:var(--clan-muted); font-size:9px; margin-top:3px; }
#tab-clan #clan-member-count { margin-left:auto; color:var(--clan-muted); font-size:12px; }
/* Front: paired rosters belong to one battlefield, not a dashboard grid. */
#tab-clan [data-war-phase="active"] #clan-war-hero { display:none; }
#tab-clan #cpanel-wars.active { display:flex; flex-direction:column; }
#tab-clan .clan-kpi-wars { order:5; margin:18px 0 0; }
#tab-clan #cpanel-wars > .clan-sec-head { order:6; }
#tab-clan #clan-war-history { order:7; }
#tab-clan .war-stage { border:1px solid var(--clan-line) !important; border-radius:12px !important; overflow:hidden; padding:0 0 12px !important; background:var(--clan-surface) !important; box-shadow:none !important; }
#tab-clan .war-scoreboard { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:8px; align-items:center; padding:70px 12px 22px; min-height:196px; background:linear-gradient(0deg,#090d10c7,transparent 80%),url('assets/clans/front.webp') center/cover; }
#tab-clan .war-scoreline { display:grid; gap:5px; width:142px; color:var(--clan-gold); font:700 46px/1.1 ClanText,sans-serif; background:#0b1012ed; padding:12px 10px 14px; border-radius:0; clip-path:polygon(0 0,96% 3%,100% 91%,5% 100%); font-variant-numeric:tabular-nums; }
#tab-clan #war-opp-score { color:#f35e69; }
#tab-clan .war-score-values { display:flex; justify-content:center; align-items:center; gap:6px; } #tab-clan .war-colon { color:#e4d4b7; font-size:30px; }
#tab-clan #war-my-name { text-align:right; }
#tab-clan #war-opp-name { text-align:left; }
#tab-clan .war-score-side, #tab-clan .war-score-side.right { display:flex; flex-direction:column; align-items:center; text-align:center; min-width:0; }
#tab-clan .war-name { max-width:100%; overflow-wrap:anywhere; font:700 13px/1.3 ClanText,sans-serif; color:var(--clan-ink); text-shadow:0 2px 6px #000; }
#tab-clan .war-score-side .war-score { color:var(--clan-gold) !important; font:800 52px/1.1 ClanText,sans-serif !important; letter-spacing:-.03em; }
#tab-clan .war-score-side.right .war-score { color:#f35e69 !important; }
#tab-clan .war-score-mid { grid-column:1/-1; display:flex; justify-content:center; align-items:center; gap:5px; padding:0; color:var(--clan-muted); font-size:11px; }
#tab-clan .war-score-mid strong { color:var(--clan-gold); font-size:12px; }
#tab-clan .war-stage-live { color:var(--clan-muted); font-size:9px; letter-spacing:0; }
#tab-clan .war-stage-live span { display:none; }
#tab-clan .war-time-left { margin-top:5px; color:var(--clan-gold); font-size:12px; white-space:nowrap; }
#tab-clan .war-progress-wrap { padding:0; }
#tab-clan .war-progress-bar { height:3px; border-radius:0; background:#aa3948; }
#tab-clan .war-progress-fill { background:#eaa338; }
#tab-clan .war-lists { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:10px 6px; }
#tab-clan .war-list-col { min-width:0; padding:0; border:0; background:none; }
#tab-clan .war-list-title { display:flex; justify-content:space-between; padding:7px 5px; color:var(--clan-muted); font-size:11px; }
#tab-clan .war-list-title b { color:var(--clan-gold); }
#tab-clan .war-fighter { position:relative; display:flex; align-items:center; gap:7px; width:100%; min-height:72px; padding:8px 6px; margin-bottom:5px; border:1px solid #454039 !important; border-radius:9px !important; background:#181a1b !important; color:var(--clan-ink); text-align:left; opacity:1 !important; box-shadow:none !important; }
#tab-clan .war-fighter.enemy { border-color:#51363b !important; background:#20171b !important; }
#tab-clan .war-fighter.enemy.selected { border:2px solid var(--clan-gold) !important; padding:7px 5px; background:#302319 !important; box-shadow:none !important; }
#tab-clan .war-f-avatar { width:34px; height:44px; flex:none; border:0; border-radius:6px; overflow:hidden; }
#tab-clan .war-f-avatar img { width:100%; height:100%; object-fit:cover; }
#tab-clan .war-f-body { min-width:0; flex:1; }
#tab-clan .war-f-name { font-size:11px; font-weight:700; color:var(--clan-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#tab-clan .war-f-meta { font-size:9px; color:var(--clan-muted); margin-top:5px; line-height:1.35; }
#tab-clan .war-f-health { display:flex; align-items:center; gap:5px; margin-top:5px; font-size:9px; color:var(--clan-muted); white-space:nowrap; } #tab-clan .war-f-health .war-f-hp { flex:1; margin-top:0; } #tab-clan .war-f-hp { height:4px; background:#393538; margin-top:6px; border-radius:2px; }
#tab-clan .war-f-hp i { background:#eaaa41; }
#tab-clan .enemy .war-f-hp i { background:#df5666; }
#tab-clan .war-fighter.defeated .war-f-avatar { filter:grayscale(1); }
#tab-clan .war-fighter.defeated .war-f-meta { color:#f6a2aa; }
#tab-clan .war-stage > button { width:calc(100% - 24px); margin:8px 12px 0; }
#tab-clan .war-hint { color:var(--clan-muted); font-size:11px; line-height:1.5; margin:10px 14px; }
#tab-clan .war-secondary-btn { min-height:40px; border:1px solid var(--clan-line); color:var(--clan-muted); background:transparent; box-shadow:none; }
#tab-clan .war-attacks-list { margin:0 12px; }
#tab-clan .war-attack-row { color:var(--clan-muted); font-size:11px; }
#tab-clan .clan-war-defense { margin-bottom:12px; }
#tab-clan .clan-defense-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
#tab-clan .clan-defense-card { min-width:0; position:relative; display:flex; flex-direction:column; justify-content:flex-end; aspect-ratio:.66; padding:7px; overflow:hidden; border:1px solid #77603e; border-radius:10px; background:#192025; }
#tab-clan .clan-defense-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#tab-clan .clan-defense-card::after { content:''; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,#090c0f 65%); }
#tab-clan .clan-defense-card b, #tab-clan .clan-defense-card small { z-index:1; position:relative; font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#tab-clan .clan-defense-card small { color:var(--clan-gold); margin-top:5px; }
#tab-clan .clan-defense-slot { position:absolute; top:5px; left:5px; border-radius:4px; padding:3px 5px; background:#090d10df; z-index:1; color:var(--clan-gold); font-size:10px; }
#tab-clan .clan-defense-card.defeated img { filter:grayscale(1); opacity:.45; }
#tab-clan .clan-defense-note { color:var(--clan-muted); font-size:11px; line-height:1.5; }
/* Secondary rooms share the same restrained metal/amber materials. */
#tab-clan .clan-war-banner, #tab-clan .clan-treasury-hero { border:0 !important; border-radius:12px !important; background:linear-gradient(90deg,#0a0e11ee,#0a0e1166),url('assets/clans/citadel.webp') center/cover !important; box-shadow:none !important; padding:24px 18px; }
#tab-clan .war-banner-icon, #tab-clan .war-banner-mark, #tab-clan .war-banner-kicker, #tab-clan .treasury-glow, #tab-clan .clan-home-kicker { display:none !important; }
#tab-clan .war-banner-title { font-size:24px; color:var(--clan-ink); }
#tab-clan .war-banner-sub { color:var(--clan-muted); font-size:12px; line-height:1.5; margin-top:7px; }
#tab-clan .war-idle { margin:12px 0; padding:16px; border:1px solid var(--clan-line) !important; border-radius:12px; background:var(--clan-surface) !important; box-shadow:none !important; }
#tab-clan .war-idle-title { font:700 20px ClanText,sans-serif; color:var(--clan-ink); }
#tab-clan .war-setup-steps small, #tab-clan .war-idle-text { color:var(--clan-muted); line-height:1.5; }
#tab-clan .clan-kpi { border:0 !important; border-radius:0 !important; background:transparent !important; padding:12px 5px; }
#tab-clan .clan-kpi-val { font:700 20px ClanText,sans-serif; color:var(--clan-gold); }
#tab-clan .clan-kpi-lbl { color:var(--clan-muted); font-size:10px; }
#tab-clan .treasury-kicker { font:700 20px ClanText,sans-serif; color:var(--clan-ink) !important; letter-spacing:0; text-transform:none; }
#tab-clan .treasury-balance { font:700 42px ClanText,sans-serif; color:var(--clan-gold) !important; }
#tab-clan .treasury-label { color:var(--clan-muted); }
#tab-clan .bento-card, #tab-clan .clan-more-card, #tab-clan .clan-chat-wrap { border:1px solid var(--clan-line) !important; background:var(--clan-surface) !important; border-radius:12px !important; box-shadow:none !important; }
#tab-clan .clan-more-grid { display:grid; grid-template-columns:1fr; gap:8px; }
#tab-clan .clan-more-card { min-height:78px; }
#tab-clan .clan-more-ico { display:none; }
#tab-clan .clan-more-name { color:var(--clan-ink); font-size:16px; }
#tab-clan .clan-more-desc { color:var(--clan-muted); font-size:12px; }
#tab-clan .clan-chat-wrap { min-height:340px; }
#tab-clan .clan-chat-input-row { background:var(--clan-surface); }
#tab-clan .clan-chat-input { color:var(--clan-ink); background:#0a0e11; border:1px solid var(--clan-line); min-height:44px; }
#tab-clan .clan-chat-send { background:#eaa338 !important; color:#171007 !important; min-width:44px; min-height:44px; }
#tab-clan .empty-state { color:var(--clan-muted) !important; letter-spacing:normal !important; opacity:1 !important; font-size:13px; line-height:1.6; padding:24px 12px; }
#tab-clan .section-label { color:var(--clan-muted); letter-spacing:0; font-size:12px; }
#tab-clan .clan-member, #tab-clan .clan-service, #tab-clan .war-fighter { transition:background-color 160ms ease-out; }
@media (hover:hover) { #tab-clan :is(.clan-service,.clan-member,.clan-more-card):hover { background:#242b2d !important; } #tab-clan .war-fighter.enemy:not(:disabled):hover { background:#39292b !important; } }
@container (min-width:620px) { #tab-clan .clan-home-hero { padding-top:150px !important; background-size:100% auto !important; } #tab-clan .clan-home-emblem { width:148px; height:148px; } #tab-clan .clan-home-meta { width:78%; } #tab-clan .clan-home-actions { grid-template-columns:1fr auto; align-items:center; padding:20px; } #tab-clan .clan-service { padding:16px 20px; } #tab-clan .clan-service-link, #tab-clan .clan-service-shortcuts button { font-size:13px; } #tab-clan .war-scoreboard { min-height:270px; padding-top:120px; } #tab-clan .war-f-avatar { width:50px; height:54px; } #tab-clan .war-f-name { font-size:14px; } #tab-clan .war-f-meta { font-size:11px; } #tab-clan .war-fighter { min-height:82px; padding:10px; } #tab-clan .war-fighter.enemy.selected { padding:9px; } #tab-clan .clan-defense-card { aspect-ratio:.85; } }
@media (max-width:360px) { #tab-clan .clan-avatar-strip { display:none; } #tab-clan .war-f-avatar { width:26px; height:36px; } #tab-clan .war-fighter { gap:5px; } }
@media (prefers-reduced-motion:reduce) { #tab-clan *, #tab-clan *::before, #tab-clan *::after { animation:none !important; transition:none !important; } }