/* Selected first concept: illustrated obsidian archive. Scoped to the roster. */
#rosterPage { --archive-serif:Georgia,'Noto Serif SC','Songti SC',SimSun,serif; background:#090810 url('data/materials/dossier-castle-v1.png') center top / 100% auto no-repeat; color:#eee6d8; overflow-x:hidden; font-family:var(--archive-serif); }
#rosterPage *,#rosterPage *::before,#rosterPage *::after { box-sizing:border-box; min-width:0; }
#rosterPage .roster-page-backdrop,#rosterPage .roster-page-grid,#rosterPage .dossier-identity-heading,#rosterPage .status-led { display:none; }
#rosterPage .roster-page-header { position:relative; width:min(100%,1000px); margin:auto; grid-template-columns:54px minmax(0,1fr) 54px; gap:10px; height:130px; padding:20px 24px; background:none; border:0; box-shadow:none; backdrop-filter:none; }
#rosterPage .roster-page-brand { justify-self:center; display:block; }
#rosterPage .roster-page-kicker { font:clamp(21px,4.8vw,46px)/1.2 var(--archive-serif); letter-spacing:.12em; color:#f2d492; white-space:nowrap; }
#rosterPage .roster-page-brand strong { font:11px/1.8 var(--archive-serif); letter-spacing:.25em; color:#d1bea1; }
#rosterPage .roster-page-brand small { display:none; }
#rosterPage .roster-header-status { position:absolute; right:24px; top:108px; display:block; font:9px/1.5 sans-serif; color:#bfb5c7; }
#rosterPage .roster-header-status small { display:none; }
#rosterPage .roster-back { width:46px; height:58px; background:#15131d; border:5px solid transparent; border-image:url('data/materials/dossier-frame-v1.png') 55 stretch; box-shadow:none; }
#rosterPage .roster-back:focus-visible { outline:2px solid #f4cc7a; outline-offset:4px; }
#rosterPage .roster-page-body { width:min(100%,1000px); padding:0 18px 36px; margin:auto; }
#rosterPage .clan-dossier-hero { min-height:240px; padding:0 20px 22px; border:0; background:none; box-shadow:none; overflow:visible; }
#rosterPage .clan-dossier-hero::before,#rosterPage .clan-dossier-hero::after,#rosterPage .clan-dossier-emblem::before { display:none; }
#rosterPage .clan-identity-main { display:grid; grid-template-columns:190px minmax(0,1fr) 150px; gap:28px; padding:10px 0; }
#rosterPage .clan-dossier-emblem { width:100%; aspect-ratio:1; }
#rosterPage .clan-dossier-title > p:first-child { display:none; }
#rosterPage .clan-dossier-title h2 { font:clamp(27px,5vw,53px)/1.2 var(--archive-serif); letter-spacing:0; color:#fff0c5; text-shadow:0 2px 6px #000; }
#rosterPage .clan-dossier-title h2 span { overflow-wrap:break-word; }
#rosterPage .clan-dossier-tag { font:16px/1.2 var(--archive-serif); color:#dbd5e7; border:1px solid #68616e; border-radius:16px; clip-path:none; padding:3px 12px; min-height:0; background:#11101b; margin-top:12px; }
#rosterPage .clan-dossier-motto { font:17px/1.8 var(--archive-serif); color:#ead092; letter-spacing:.14em; }
#rosterPage .clan-dossier-aside { display:grid; grid-column:auto; border:0; padding:20px 0 20px 16px; gap:22px; min-height:190px; }
#rosterPage .clan-dossier-aside strong,#rosterPage .clan-dossier-aside span,#rosterPage .clan-dossier-aside small { font:12px/1.7 var(--archive-serif); letter-spacing:.24em; color:#b9aacb; }
#rosterPage .clan-dossier-aside strong br,#rosterPage .clan-dossier-aside small br { display:block; }
#rosterPage .clan-dossier-aside strong,#rosterPage .clan-dossier-aside small { overflow-wrap:anywhere; margin:0; }
#rosterPage .dossier-card,#rosterPage .member-archive { margin:16px 0 0; padding:18px 22px 22px; border:9px solid transparent; border-image:url('data/materials/dossier-frame-v1.png') 55 fill stretch; background:#111019; box-shadow:none; overflow:visible; }
#rosterPage .dossier-card::before,#rosterPage .member-archive::before { display:none; }
#rosterPage .dossier-section-heading { padding:0 0 12px; gap:12px; border-bottom:1px solid #8f744c; align-items:center; }
#rosterPage .dossier-section-heading h3 { font:600 27px/1.25 var(--archive-serif); color:#f7e6b6; letter-spacing:.08em; }
#rosterPage .dossier-section-heading small,#rosterPage .live-section-code,#rosterPage .dossier-card-mark { font:11px/1.5 var(--archive-serif); letter-spacing:.12em; color:#bbada2; max-width:45%; white-space:normal; }
#rosterPage .clan-metrics-grid { grid-template-columns:repeat(5,minmax(0,1fr)); margin:18px 0 0; border:0; }
#rosterPage .clan-metric { padding:12px 6px; min-height:142px; border:0; border-right:1px solid #5d5054; background:none; align-content:center; }
#rosterPage .clan-metric:last-child { border:0; }
#rosterPage .clan-metric-label { font:18px/1.4 var(--archive-serif); color:#d0c9d8; }
#rosterPage .clan-metric strong { font:600 32px/1.3 var(--archive-serif); color:#fff8e9; margin-top:12px; }
#rosterPage .clan-metric small { display:block; grid-row:3; margin-top:4px; font:9px/1.4 var(--archive-serif); letter-spacing:.11em; color:#bcb6c8; }
#rosterPage .dossier-metric-icon { width:34px; height:34px; margin:0 0 9px; filter:invert(84%) sepia(40%) saturate(600%) hue-rotate(348deg); }
#rosterPage .clan-dossier-emblem img { transform:scale(1.25); }
#rosterPage .war-side-emblem img { transform:scale(1.6); }
#rosterPage .member-archive-heading::after { content:''; width:20px; height:20px; background:url('data/icons/chevron-right.svg') center/contain no-repeat; filter:invert(84%) sepia(40%) saturate(600%) hue-rotate(348deg); }
#rosterPage .member-archive[open] .member-archive-heading::after { transform:rotate(90deg); }
#rosterPage .clan-profile-grid,#rosterPage .roster-live-grid { display:block; }
#rosterPage .clan-profile-content { grid-template-columns:1fr 1fr; gap:26px; }
#rosterPage .clan-detail-row { min-height:46px; grid-template-columns:85px minmax(0,1fr); border:0; }
#rosterPage .clan-detail-row dt,#rosterPage .clan-detail-row dd { font:18px/1.5 var(--archive-serif); }
#rosterPage .clan-description-block { margin-top:18px; padding:6px 0 6px 24px; border-left:1px solid #7d6247; }
#rosterPage .clan-description-label { font:13px/1.5 var(--archive-serif); color:#eac781; }
#rosterPage .clan-description { font:17px/1.8 var(--archive-serif); }
#rosterPage .clan-profile-content { grid-template-columns:minmax(0,1.8fr) minmax(0,1fr); }
#rosterPage .clan-description-block { min-height:0; padding:5px 0 0; margin:0; border:0; }
#rosterPage .clan-dossier-title h2 { color:#fff0c5; }
#rosterPage .dossier-card,#rosterPage .member-archive { border-width:14px; border-image-slice:85 fill; padding:13px 16px 16px; }
#rosterPage .dossier-section-heading > div::before { content:''; width:30px; height:30px; flex:none; background:url('data/icons/shield-shaded.svg') center/contain no-repeat; filter:invert(84%) sepia(40%) saturate(600%) hue-rotate(348deg); }
#rosterPage .live-league-card .dossier-section-heading > div::before { background-image:url('data/icons/trophy-fill.svg'); }
#rosterPage .live-war-card .dossier-section-heading > div::before { background-image:url('data/icons/lightning-fill.svg'); }
#rosterPage .roster-page-brand strong::after { content:' · CLASH OF CLANS'; }
#rosterPage .clan-dossier-motto::after { content:'ONE CLAN ONE FAMILY'; display:block; color:#cbb394; font:11px/1.8 var(--archive-serif); letter-spacing:.3em; }
#rosterPage .war-side-emblem-placeholder { border:0; background:url('data/icons/shield-shaded.svg') center/70% no-repeat; filter:invert(65%) sepia(25%) saturate(700%); font-size:0; }
#rosterPage .league-banner-mark { border:0; background:url('data/icons/trophy-fill.svg') center/65% no-repeat; filter:invert(65%) sepia(25%) saturate(700%); font-size:0; }
#rosterPage .clan-profile-motto { align-self:center; padding:24px 12px; border-left:1px solid #91734b; color:#edcf8f; text-align:center; font:25px/1.8 var(--archive-serif); letter-spacing:.12em; }
#rosterPage .clan-profile-motto small { display:block; font:10px/1.6 var(--archive-serif); color:#a39aab; margin-top:16px; }
#rosterPage .war-matchup { padding:10px 0; }
#rosterPage .war-comparison { display:grid; grid-template-columns:1fr 1fr 1fr; text-align:center; align-items:center; }
#rosterPage .war-comparison > * { padding:7px; border-bottom:1px solid #473c43; font:18px/1.3 var(--archive-serif); }
#rosterPage .war-comparison b { color:#e7ca8a; font-weight:400; }
#rosterPage .war-side { display:flex; flex-direction:row; justify-content:center; }
#rosterPage .war-side strong { font-size:19px; }
#rosterPage .clan-detail-row { min-height:34px; }
#rosterPage .clan-description { font-size:15px; line-height:1.6; margin-top:8px; }
#rosterPage .clan-dossier-hero { min-height:215px; }
#rosterPage .war-side { gap:5px; }
#rosterPage .war-side-code { display:none; }
#rosterPage .war-progress { padding:10px 0 0; }
#rosterPage .league-banner { padding:8px; margin-top:8px; }
#rosterPage .league-facts { padding:10px 0; }
#rosterPage .clan-metric strong { font-weight:400; }
#rosterPage .war-matchup { grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr); padding:18px 0; gap:12px; }
#rosterPage .war-side { width:auto; }
#rosterPage .war-side strong { font:22px/1.4 var(--archive-serif); }
#rosterPage .war-side b { font:28px/1.4 var(--archive-serif); }
#rosterPage .war-side-emblem { width:70px; height:70px; }
#rosterPage .war-side-code { font:9px/1.5 var(--archive-serif); }
#rosterPage .war-versus { font:32px/1.5 var(--archive-serif); color:#e9c67a; }
#rosterPage .live-status-pill { background:#221c12; border-color:#a9883b; color:#edcf81; }
#rosterPage .league-banner { background:none; border:0; justify-content:center; }
#rosterPage .league-banner strong { font:30px/1.4 var(--archive-serif); }
#rosterPage .league-facts { justify-content:center; }
#rosterPage .member-archive-heading { cursor:pointer; display:flex; align-items:center; justify-content:space-between; padding:0; list-style:none; }
#rosterPage .member-archive-heading::-webkit-details-marker { display:none; }
#rosterPage .member-archive-heading h3 { font:600 26px/1.3 var(--archive-serif); color:#f7e6b6; }
#rosterPage .member-archive-heading p { font:11px/1.5 var(--archive-serif); letter-spacing:.16em; }
#rosterPage .member-archive-meta { font:12px/1.5 var(--archive-serif); }
#rosterPage .member-archive-meta span:first-child { font:22px/1.4 var(--archive-serif); color:#f4dfa9; }
#rosterPage .member-archive-meta span:last-child { font:9px/1.4 sans-serif; }
#rosterPage .member-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
#rosterPage .member-controls { grid-template-columns:repeat(4,minmax(0,1fr)); }
#rosterPage .member-search { grid-column:1/-1; }
#rosterPage .member-controls input,#rosterPage .member-controls select { width:100%; }
@media(max-width:650px) {
 #rosterPage .roster-page-header { height:90px; grid-template-columns:32px minmax(0,1fr) 16px; padding:14px 12px; gap:8px; }
 #rosterPage .roster-back { width:31px; height:42px; }
 #rosterPage .roster-page-brand strong { font-size:8px; letter-spacing:.15em; }
 #rosterPage .roster-header-status { top:82px; right:14px; font-size:8px; }
 #rosterPage .roster-page-body { padding:0 8px 28px; }
 #rosterPage .clan-dossier-hero { min-height:140px; padding:8px 8px 16px; }
 #rosterPage .clan-identity-main { grid-template-columns:88px minmax(0,1fr); padding:5px 0; gap:13px; }
 #rosterPage .clan-dossier-title h2 { font-size:29px; }
 #rosterPage .clan-dossier-tag { font-size:12px; margin-top:8px; }
 #rosterPage .clan-dossier-motto { font-size:11px; margin-top:9px; }
 #rosterPage .clan-dossier-aside { display:none; }
 #rosterPage .dossier-card,#rosterPage .member-archive { margin-top:10px; padding:10px 7px 12px; border-width:6px; }
 #rosterPage .dossier-section-heading { gap:8px; padding-bottom:9px; }
 #rosterPage .dossier-section-heading h3 { font-size:19px; }
 #rosterPage .dossier-section-heading > div::before { width:20px; height:20px; }
 #rosterPage .dossier-section-heading small,#rosterPage .live-section-code,#rosterPage .dossier-card-mark { font-size:8px; letter-spacing:.04em; }
 #rosterPage .clan-metrics-grid { margin-top:10px; }
 #rosterPage .clan-metric { min-height:93px; padding:8px 2px; border-top:0; border-right:1px solid #5d5054; }
 #rosterPage .clan-metric-label { font-size:11px; }
 #rosterPage .clan-metric strong { font-size:17px; margin-top:8px; }
 #rosterPage .clan-metric small { font-size:6px; letter-spacing:0; }
 #rosterPage .dossier-metric-icon { width:23px; height:23px; margin-bottom:5px; }
 #rosterPage .clan-profile-content { display:block; }
 #rosterPage .clan-profile-motto { display:none; }
 #rosterPage .clan-detail-list { margin-top:8px; }
 #rosterPage .clan-detail-row { min-height:28px; grid-template-columns:65px minmax(0,1fr); }
 #rosterPage .clan-detail-row dt,#rosterPage .clan-detail-row dd { font-size:13px; }
 #rosterPage .clan-description-block { margin:8px 0 0; padding:9px 0 0; border:0; border-top:1px solid #514438; }
 #rosterPage .clan-description-label { font-size:10px; }
 #rosterPage .clan-description { margin-top:4px; font-size:12px; line-height:1.6; }
 #rosterPage .war-matchup { grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr); gap:4px; }
 #rosterPage .war-side strong { font-size:15px; }
 #rosterPage .war-side { flex-direction:column; }
 #rosterPage .war-comparison > * { font-size:13px; padding:5px; }
 #rosterPage .war-side b { font-size:22px; }
 #rosterPage .war-side-emblem { width:48px; height:48px; }
 #rosterPage .war-side { gap:5px; }
 #rosterPage .war-side-code { display:none; }
 #rosterPage .war-matchup { padding:10px 0; }
 #rosterPage .war-progress { padding:10px 0 0; }
 #rosterPage .league-facts { padding:10px 0; }
 #rosterPage .league-banner { margin-top:6px; padding:6px; }
 #rosterPage .war-side>span { font-size:9px; }
 #rosterPage .war-progress { flex-wrap:wrap; gap:8px; font-size:9px; }
 #rosterPage .member-archive-heading h3 { font-size:20px; }
 #rosterPage .member-archive-heading p { font-size:8px; }
 #rosterPage .member-archive-meta span:first-child { font-size:16px; }
 #rosterPage .member-grid { grid-template-columns:1fr; }
 #rosterPage .member-controls { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Compact roster rows: consistent columns on desktop and mobile. */
#rosterPage .war-side-emblem img.official-clan-badge { transform:none; }
#rosterPage .league-match { display:grid; grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr); align-items:center; text-align:center; gap:8px; padding:12px 0; border-top:1px solid #49394d; }
#rosterPage .league-match > div { display:grid; justify-items:center; gap:6px; font-size:13px; overflow-wrap:anywhere; }
#rosterPage .clan-dossier-emblem img.is-api-badge { transform:none; }
#rosterPage .member-grid { display:block; }
#rosterPage .member-list-columns,
#rosterPage .member-card { display:grid; grid-template-columns:42px minmax(0,1fr) 70px 74px 16px; grid-template-rows:auto; align-items:center; gap:12px; font-family:'Noto Sans SC',sans-serif; }
#rosterPage .member-list-columns { padding:10px 12px; background:#30251e; color:#f0ce85; font-size:12px; font-weight:700; }
#rosterPage .member-card { min-height:66px; padding:12px; border:0; border-bottom:1px solid #403242; background:none; box-shadow:none; transform:none; cursor:pointer; }
#rosterPage .member-card::before { display:none; }
#rosterPage .member-card:hover { background:#24182d; transform:none; box-shadow:none; }
#rosterPage .member-card:focus-visible { outline:2px solid #efce87; outline-offset:-2px; background:#24182d; transform:none; }
#rosterPage .member-card-rank { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#352241; color:#ead19a; font:600 14px/1 sans-serif; letter-spacing:0; }
#rosterPage .member-card-identity { display:flex; align-items:center; gap:6px; overflow:hidden; }
#rosterPage .member-card-identity h4 { min-width:0; margin:0; color:#f6ecde; font:500 15px/1.5 'Noto Sans SC',sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#rosterPage .member-card-league { flex:none; margin:0; min-height:0; gap:0; font-size:0; }
#rosterPage .member-card-league .league-mark { width:24px; height:27px; }
#rosterPage .member-card-league .league-icon { width:24px; height:27px; }
#rosterPage .member-card-role { justify-self:center; padding:3px 5px; color:#ecd096; background:#34271f; border:0; border-radius:3px; font:600 12px/1.4 'Noto Sans SC',sans-serif; letter-spacing:0; white-space:nowrap; }
#rosterPage .member-row-trophies { text-align:right; color:#f3d590; font:600 16px/1.4 sans-serif; font-variant-numeric:tabular-nums; }
#rosterPage .member-card-open { font:20px/1 sans-serif; text-align:right; color:#af9eb4; }
#rosterPage .member-list-columns > :nth-child(3) { text-align:center; }
#rosterPage .member-list-columns > :nth-child(4) { text-align:right; }
@media(max-width:650px) {
 #rosterPage .member-list-columns,#rosterPage .member-card { grid-template-columns:28px minmax(0,1fr) 48px 44px 9px; gap:6px; padding:10px 2px; }
 #rosterPage .member-card { min-height:59px; }
 #rosterPage .member-card-rank { width:25px; height:25px; font-size:12px; }
 #rosterPage .member-card-identity h4 { font-size:13px; }
 #rosterPage .member-card-role { font-size:10px; padding:3px; }
 #rosterPage .member-row-trophies { font-size:13px; }
 #rosterPage .member-list-columns { font-size:11px; }
 #rosterPage .member-card-identity { gap:3px; }
 #rosterPage .member-card-league .league-mark,#rosterPage .member-card-league .league-icon { width:20px; height:23px; }
}