/* Clan Page Styles */
body.clan-page { padding-top: 72px; }
.clan-main { padding: 24px 16px 40px; max-width: 1240px; margin: 0 auto; }
.clan-panel { background: linear-gradient(180deg,#eef2f6 0%,#e3e8ee 70%,#d9e0e7 100%); border-radius: 32px; box-shadow: 0 8px 30px -8px rgba(0,0,0,0.28),0 0 0 1px rgba(255,255,255,0.35) inset; border: 2px solid #c1cad3; padding: 34px 38px 44px; position: relative; z-index: 2; max-width: 1220px; margin: 0 auto 40px; }
.clan-page-title { font-family:'ClashBold',Arial,sans-serif; margin:0 0 6px 0; font-size:2.2rem; color:#111; }
.clan-page-desc { margin:0 0 18px 0; font-size:1rem; color:#333; }
.clan-search-bar { display:flex; flex-direction:row; gap:40px; align-items:flex-start; flex-wrap:wrap; margin-bottom:10px; }
.clan-search-left { flex:1; min-width:260px; }
.clan-search-right { display:flex; align-items:center; gap:10px; }
.clan-search-right label { font-size:14px; color:#444; white-space:nowrap; }
.clan-search-right select { width:auto; min-width:180px; }

/* Clan search input styling (match home/search look) */
body.clan-page .main-search.clan-search {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 32px;
  border: 1px solid #c2d0e2;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 8px 18px;
  width: min(520px, 100%);
  max-width: 90%;
  margin-bottom: 0;
}

body.clan-page .main-search.clan-search .search-input {
  border: none;
  outline: none;
  flex: 1;
  background: transparent;
  font-family: 'ClashRegular', Arial, sans-serif;
  font-size: 1rem;
  padding: 10px 6px;
  min-width: 0;
}

body.clan-page .main-search.clan-search .search-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

body.clan-page .main-search.clan-search .search-btn:hover { background: rgba(0,0,0,0.04); }

body.clan-page .main-search.clan-search .search-btn svg {
  width: 26px;
  height: 26px;
}

/* Clan sort select styling */
body.clan-page #clanSort {
  background: #fff;
  border: 1px solid #c2d0e2;
  border-radius: 32px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 10px 14px;
  font-family: 'ClashRegular', Arial, sans-serif;
  font-size: 0.95rem;
  color: #0b1a2b;
  outline: none;
  margin-top: 0;
}

body.clan-page #clanSort:focus {
  border-color: #8fb1d8;
  box-shadow: 0 0 0 3px rgba(143, 177, 216, 0.25), 0 2px 12px rgba(0,0,0,0.08);
}

.clan-summary { display:flex; flex-direction:column; gap:18px; margin-top:24px; background:linear-gradient(145deg,#ffffff,#e8edf3); padding:20px 22px 22px; border-radius:24px; position:relative; box-shadow:0 4px 18px -6px rgba(0,0,0,0.18),0 0 0 1px rgba(0,0,0,0.05); border:1px solid #c9d2dc; }
.clan-summary-main { display:flex; align-items:center; gap:18px; }
.clan-badge { width:86px; height:86px; border-radius:24px; background:linear-gradient(135deg,#ffed9a,#ffc13d); box-shadow:0 4px 14px -4px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.6) inset,0 2px 0 rgba(0,0,0,.18); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:'ClashBold'; font-size:1.2rem; color:#7a4d00; position:relative; overflow:hidden; }
.clan-badge.has-icon { background:linear-gradient(180deg,#f8fbff,#e8eef5); }
.clan-badge[data-badge]:not([data-badge=""])::after { content:attr(data-badge); position:absolute; bottom:6px; right:10px; font-size:.65rem; background:rgba(0,0,0,.15); padding:2px 5px; border-radius:6px; color:#222; font-family:'ClashRegular'; }
.clan-badge-icon { width:100%; height:100%; object-fit:contain; display:block; padding:8px; }
.clan-summary-titles { display:flex; flex-direction:column; gap:4px; }
.clan-name { font-family:'ClashBold',Arial,sans-serif; font-size:2.1rem; margin:0; color:#111; line-height:1; }
.clan-tag-line { font-size:1rem; color:#444; font-family:'ClashRegular'; }
.clan-tag { background:#111; color:#ffd34f; padding:3px 9px; border-radius:8px; font-family:'ClashBold'; letter-spacing:1px; display:inline-block; font-size:.95rem; }
.clan-stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:14px; margin-top:6px; }
.clan-stat { background:#fff; border:1px solid #d3dbe3; border-radius:14px; padding:10px 12px; display:flex; flex-direction:column; gap:4px; box-shadow:0 2px 6px rgba(0,0,0,0.06); }
.clan-stat b { font-family:'ClashBold'; font-size:1.05rem; color:#0d1b28; }
.clan-stat-label { font-size:.7rem; letter-spacing:1px; text-transform:uppercase; color:#42566a; font-family:'ClashBold'; }
.clan-desc { margin:18px 4px 10px; font-size:.95rem; line-height:1.4; color:#222; white-space:pre-wrap; }
.clan-members-title { margin:28px 4px 12px; font-family:'ClashBold'; font-size:1.4rem; color:#111; }
.clan-header-row { display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap; }
.clan-desc-inline { margin:0; font-size:.9rem; line-height:1.3; color:#333; max-width:640px; white-space:pre-wrap; }
.clan-desc-inline:empty { display:none; }
.clan-result { width: 100%; margin: 0; padding: 0; }

.clan-members-grid { display:block; }
.clan-member-card { position:relative; display:block; width:100%; margin:0 0 14px; padding:16px 16px 14px; border:1px solid #c9d2dc; border-radius:18px; background:linear-gradient(180deg,#ffffff 0%,#f2f5f8 85%); box-shadow:0 4px 14px -6px rgba(0,0,0,0.18),0 0 0 1px rgba(255,255,255,0.5) inset; cursor:pointer; text-align:left; transition:transform .2s,box-shadow .2s,border-color .2s; }
.clan-member-card:hover { transform:translateY(-4px); box-shadow:0 10px 24px -8px rgba(0,0,0,0.28),0 0 0 1px rgba(255,255,255,0.5) inset; border-color:#b4c2cf; }
.clan-member-card:active { transform:translateY(-1px); }
.cm-top-row { display:grid; grid-template-columns:1fr 46px minmax(90px,140px); align-items:center; gap:18px; margin-top:6px; }
.cm-level-badge { justify-self:start; width:46px; height:46px; padding:0; background:url('/assets/images/experience.webp') center/contain no-repeat; box-shadow:none; border:none; display:flex; align-items:center; justify-content:center; font-family:'ClashBold'; font-size:1.05rem; color:#fff; position:relative; letter-spacing:.5px; text-shadow:0 1px 2px rgba(0,0,0,.4); }
.cm-trophy-big { justify-self:end; display:flex; align-items:center; gap:6px; font-family:'ClashBold'; font-size:1.2rem; color:#0d1b28; letter-spacing:.5px; }
.cm-trophy-big img { width:26px; height:26px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.cm-bottom-stats { display:flex; flex-wrap:wrap; gap:24px; font-size:.72rem; margin-top:12px; color:#203445; font-family:'ClashRegular'; }
.cm-bottom-stats span { display:inline-flex; align-items:center; gap:6px; }
.cm-rank { position:absolute; top:-10px; left:-10px; background:#ffb347; color:#111; font-family:'ClashBold'; padding:6px 10px; border-radius:14px; box-shadow:0 4px 10px -4px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.7) inset; font-size:.9rem; }
.cm-header { display:flex; flex-direction:column; gap:2px; }
.cm-name { font-family:'ClashBold'; font-size:1.25rem; color:#0d1b28; word-break:break-word; }
.cm-role { font-size:.65rem; letter-spacing:1px; text-transform:uppercase; font-family:'ClashBold'; background:#d9e2ec; color:#2c445a; padding:3px 6px; border-radius:6px; display:inline-block; align-self:flex-start; }
.cm-role-leader { background:#ff9800; color:#111; }
.cm-role-co_leader { background:#ffd700; color:#111; }
.cm-role-elder { background:#93c5fd; color:#0d1b28; }
.cm-role-member { background:#d9e2ec; color:#2c445a; }
.cm-meta { display:flex; flex-wrap:wrap; gap:14px; font-size:.8rem; color:#1e2935; font-family:'ClashRegular'; margin-top:6px; }
.cm-meta span { display:inline-flex; align-items:center; gap:4px; }
.cm-don { display:flex; flex-wrap:wrap; gap:20px; font-size:.75rem; font-family:'ClashRegular'; color:#37485a; margin-top:6px; }
.cm-arena { margin-top:10px; font-size:.7rem; color:#4b5c6b; font-family:'ClashRegular'; letter-spacing:.5px; }

@media (max-width:780px){
  .clan-member-card { margin-bottom:12px; padding:14px 14px; }
  .clan-page-title { font-size:1.9rem; }
  .clan-summary { padding:18px 18px 20px; }
  .clan-stats-grid { gap:10px; }
}
@media (max-width:520px){
  .clan-summary-main { flex-direction:column; align-items:flex-start; }
  .clan-badge { width:74px; height:74px; border-radius:20px; }
  .clan-badge-icon { padding:6px; }
  .clan-name { font-size:1.7rem; }
  .clan-member-card { padding:12px 12px; }
}
@media (max-width: 900px) {
  body.clan-page { padding-top: 52px; padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .clan-main { padding: 12px 12px 24px; }
  .clan-panel { border-radius: 16px; padding: 16px 14px 24px; margin-bottom: 20px; }
  .clan-page-title { font-size: 1.5rem; margin-bottom: 8px; }
  .clan-page-desc { font-size: 0.9rem; margin-bottom: 12px; line-height: 1.4; }
  .clan-search-bar { flex-direction: column; gap: 16px; }
  .clan-search-left { width: 100%; min-width: 0; }
  .clan-search-right { width: 100%; flex-direction: row; align-items: center; }
  .clan-search-right select { flex: 1; }
  .clan-search-bar input { width: 100%; box-sizing: border-box; }
  .main-search.clan-search { width: min(360px, 100%); max-width: 100%; padding: 6px 12px; margin-left: auto; margin-right: auto; }
  body.clan-page #clanSort { margin-top: 0; }
  .clan-summary { padding: 14px; gap: 12px; border-radius: 16px; }
  .clan-badge { width: 60px; height: 60px; border-radius: 14px; }
  .clan-badge-icon { padding:5px; }
  .clan-name { font-size: 1.4rem; word-break: break-word; }
  .clan-tag { font-size: 0.85rem; }
  .clan-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .clan-stat { padding: 8px 10px; border-radius: 10px; }
  .clan-stat b { font-size: 0.95rem; }
  .clan-members-title { font-size: 1.2rem; margin: 20px 4px 10px; }
  .clan-member-card { padding: 12px; margin-bottom: 10px; border-radius: 14px; }
  .cm-name { font-size: 1.1rem; }
  .cm-trophy-big { font-size: 1rem; }
  .cm-level-badge { width: 40px; height: 40px; font-size: 0.9rem; }
  .cm-rank { padding: 4px 8px; font-size: 0.8rem; top: -8px; left: -8px; }
  .main-footer { margin-bottom: 0; }
}