.clans-theme {
    background:
        radial-gradient(circle at 76% 26%, #d5a54635, transparent 25%),
        linear-gradient(130deg, #121821 16%, #302815 68%, #11161d);
}

.clans-theme::before {
    background-color: #342b178f;
    clip-path: polygon(64% 18%, 88% 18%, 88% 36%, 98% 36%, 98% 100%, 55% 100%, 55% 42%);
}

.clan-panel {
    grid-column: 1 / -1;
    width: 100%;
    padding: 14px;
    border: 1px solid #d5a54642;
    border-radius: 15px;
    background: #0d1219;
    box-shadow: inset 0 1px #ffffff09, 0 16px 38px #0006;
}

.clan-loading,
.clan-message,
.clan-empty-card,
.clan-directory-empty {
    display: grid;
    place-items: center;
    gap: 9px;
    min-height: 150px;
    color: #9199a4;
    text-align: center;
}

.clan-empty-card > span {
    font-size: 42px;
}

.clan-empty-card > strong,
.clan-message > strong {
    color: #e8dfcd;
    font: 700 18px Georgia, serif;
}

.clan-empty-card p {
    margin: 0;
    font-size: 12px;
}

.clan-empty-card small {
    color: #d9b86f;
}

.clan-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin-top: 8px;
}

.clan-actions button,
.clan-message button,
.clan-directory-footer button,
.clan-primary-action {
    min-height: 42px;
    padding: 9px;
    border: 1px solid #d5a54655;
    border-radius: 10px;
    color: #eadbb9;
    background: #211d14;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.clan-primary-action:disabled {
    cursor: default;
    opacity: 0.55;
}

.clan-form-card form {
    display: grid;
    gap: 9px;
}

.clan-form-card label {
    color: #e6d8b9;
    font-size: 11px;
    font-weight: 800;
}

.clan-form-card input {
    width: 100%;
    padding: 12px;
    border: 1px solid #d5a54655;
    border-radius: 10px;
    outline: 0;
    color: #e7eaee;
    background: #080c12;
    font-size: 15px;
}

.clan-form-card input:focus {
    border-color: #d8ae58;
    box-shadow: 0 0 0 3px #d5a54618;
}

.clan-form-card small {
    min-height: 15px;
    color: #929aa4;
    font-size: 9px;
}

.clan-confirm-card {
    display: grid;
    place-items: center;
    gap: 8px;
    text-align: center;
}

.clan-confirm-card > span {
    font-size: 45px;
}

.clan-confirm-card > small {
    color: #d5aa57;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.clan-confirm-card h2 {
    margin: 2px 0;
    font: 700 24px Georgia, serif;
}

.clan-confirm-card p {
    margin: 0;
    color: #9ca4ae;
    font-size: 11px;
}

.clan-confirm-card > strong {
    color: #edc978;
    font-size: 14px;
}

.clan-actions-member button:last-child {
    grid-column: 1 / -1;
}

.clan-home-card header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ffffff0d;
}

.clan-home-card header > span {
    font-size: 40px;
}

.clan-home-card header small,
.clan-fund > small {
    color: #d4aa58;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.clan-home-card h2,
.clan-detail-card h2 {
    margin: 3px 0;
    font: 700 23px Georgia, serif;
}

.clan-home-card header p,
.clan-detail-card p {
    margin: 0;
    color: #aab1ba;
    font-size: 11px;
}

.clan-checkin-button {
    min-height: 30px;
    margin-top: 5px;
    padding: 5px 9px;
    border: 1px solid #66ad7044;
    border-radius: 8px;
    color: #aee5b5;
    background: #112018;
    font-size: 9px;
    font-weight: 800;
}

.clan-checkin-button:disabled {
    opacity: 0.6;
}

.clan-level-block,
.clan-fund {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    padding: 11px;
    border: 1px solid #ffffff0d;
    border-radius: 11px;
    background: #090e14;
}

.clan-level-block > div:first-child {
    display: flex;
    justify-content: space-between;
    color: #aeb5be;
    font-size: 10px;
}

.clan-level-block strong {
    color: #e5c27b;
}

.clan-progress {
    height: 6px;
    overflow: hidden;
    border-radius: 99px;
    background: #030609;
}

.clan-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #a7792f, #efd07f);
    box-shadow: 0 0 10px #d8ad57aa;
}

.clan-fund > div {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}

.clan-fund strong {
    padding: 7px 3px;
    border-radius: 8px;
    color: #d8dde4;
    background: #131a23;
    font-size: 10px;
    text-align: center;
}

.clan-personal-grid,
.clan-detail-values {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
    margin-top: 12px;
}

.clan-personal-grid > div,
.clan-detail-values > div {
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid #ffffff0d;
    border-radius: 10px;
    background: #121821;
}

.clan-personal-grid small,
.clan-detail-values small {
    color: #858e99;
    font-size: 9px;
}

.clan-personal-grid strong,
.clan-detail-values strong {
    color: #e6dcc8;
    font-size: 11px;
}

.clan-directory-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.clan-summary-card {
    display: flex;
    min-width: 0;
    gap: 9px;
    padding: 11px;
    border: 1px solid #d5a54638;
    border-radius: 12px;
    color: #dce0e5;
    background: radial-gradient(circle at 100% 0, #c49a4120, transparent 55%), #121821;
    text-align: left;
    cursor: pointer;
}

.clan-summary-icon {
    font-size: 25px;
}

.clan-summary-copy {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 5px;
}

.clan-summary-copy > strong {
    overflow: hidden;
    font: 700 14px Georgia, serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clan-summary-copy > small {
    overflow: hidden;
    color: #939ca7;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clan-summary-meta {
    display: flex;
    justify-content: space-between;
    color: #cab379;
    font-size: 9px;
}

.clan-directory-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #ffffff0d;
    color: #aeb4bc;
    font-size: 10px;
}

.clan-detail-card {
    display: grid;
    gap: 8px;
    text-align: center;
}

.clan-detail-icon {
    font-size: 46px;
}

.clan-primary-action {
    width: 100%;
    margin-top: 6px;
}

.clan-member-list,
.clan-request-list {
    display: grid;
    gap: 8px;
}

.clan-member-card,
.clan-request-card {
    padding: 11px;
    border: 1px solid #ffffff12;
    border-radius: 12px;
    background: radial-gradient(circle at 100% 0, #d5a54616, transparent 50%), #121821;
}

.clan-role-leader {
    border-color: #d5a54666;
}

.clan-role-officer {
    border-color: #718caa55;
}

.clan-member-main,
.clan-request-card > div:first-child {
    display: flex;
    align-items: center;
    gap: 9px;
}

.clan-member-main > span,
.clan-request-card > div:first-child > span {
    font-size: 24px;
}

.clan-member-main > div,
.clan-request-card > div:first-child > div {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 3px;
}

.clan-member-main strong,
.clan-request-card strong {
    overflow: hidden;
    color: #e8dfcd;
    font: 700 14px Georgia, serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clan-member-main small,
.clan-request-card small {
    color: #929aa4;
    font-size: 9px;
}

.clan-member-main b {
    color: #d8b768;
    font-size: 9px;
}

.clan-member-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid #ffffff0d;
    color: #89929d;
    font-size: 9px;
}

.clan-member-stats strong {
    color: #d9c79e;
}

.clan-request-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
    margin-top: 10px;
}

.clan-member-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
    margin-top: 9px;
}

.clan-member-actions button:last-child {
    grid-column: 1 / -1;
}

.clan-member-actions button {
    min-height: 36px;
    padding: 7px;
    border: 1px solid #d5a54638;
    border-radius: 9px;
    color: #ddd3be;
    background: #191710;
    font-size: 9px;
    font-weight: 800;
}

.clan-treasury-line,
.clan-confirm-resources {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 10px;
}

.clan-resource-caption {
    display: block;
    margin: 4px 0 6px;
    color: #d4aa58;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.clan-player-balance {
    margin-bottom: 12px;
}

.clan-treasury-line span,
.clan-confirm-resources strong {
    padding: 8px 3px;
    border: 1px solid #ffffff0d;
    border-radius: 8px;
    color: #dac68f;
    background: #090e14;
    font-size: 10px;
    text-align: center;
}

.clan-contribution-card form {
    display: grid;
    gap: 7px;
}

.clan-contribution-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px;
    border: 1px solid #ffffff0d;
    border-radius: 10px;
    background: #121821;
}

.clan-contribution-row > span {
    font-size: 22px;
}

.clan-contribution-row > div {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 3px;
}

.clan-contribution-row strong {
    color: #e5dcc9;
    font-size: 11px;
}

.clan-contribution-row small {
    color: #8f98a3;
    font-size: 8px;
}

.clan-contribution-row input {
    width: 70px;
    padding: 8px;
    border: 1px solid #d5a54644;
    border-radius: 8px;
    outline: 0;
    color: #f0d58e;
    background: #080c12;
    text-align: right;
}

.clan-research-list {
    display: grid;
    gap: 8px;
}

.clan-research-card {
    padding: 10px;
    border: 1px solid #ffffff0d;
    border-radius: 11px;
    background: #121821;
}

.clan-research-card.is-active {
    border-color: #d5a54666;
    box-shadow: inset 0 0 20px #d5a5460d;
}

.clan-research-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.clan-research-head > div {
    display: grid;
    flex: 1;
    gap: 4px;
}

.clan-research-head strong {
    color: #e8deca;
    font: 700 14px Georgia, serif;
}

.clan-research-head small {
    color: #929aa4;
    font-size: 9px;
    white-space: pre-line;
}

.clan-research-head b {
    color: #e1bf71;
    font-size: 11px;
}

.clan-research-value,
.clan-research-active,
.clan-research-max {
    margin-top: 8px;
    color: #aeb5be;
    font-size: 9px;
}

.clan-research-cost {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    color: #d9c58f;
    font-size: 9px;
}

.clan-research-cost small {
    margin-left: auto;
}

.clan-research-card button {
    width: 100%;
    min-height: 37px;
    margin-top: 8px;
    border: 1px solid #d5a54644;
    border-radius: 9px;
    color: #ead9b3;
    background: #211d14;
    font-size: 10px;
    font-weight: 800;
}

.clan-storage-summary,
.clan-storage-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
    margin-bottom: 9px;
}

.clan-storage-summary span {
    padding: 8px;
    border-radius: 8px;
    color: #aeb5be;
    background: #090e14;
    font-size: 9px;
    text-align: center;
}

.clan-storage-tabs button {
    min-height: 38px;
    border: 1px solid #ffffff12;
    border-radius: 9px;
    color: #9ba4ae;
    background: #121821;
    font-size: 10px;
    font-weight: 800;
}

.clan-storage-tabs button.is-active {
    border-color: #d5a54666;
    color: #edcf89;
    background: #211d14;
}

.clan-storage-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
}

.clan-storage-item {
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 92px;
    gap: 4px;
    padding: 5px;
    border: 1px solid #ffffff18;
    border-radius: 10px;
    color: #dce1e7;
    background: #121821;
}

.clan-storage-item > span {
    font-size: 23px;
}

.clan-storage-item > strong {
    width: 100%;
    overflow: hidden;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clan-storage-item > small {
    color: #c9ae6e;
    font-size: 8px;
}

.clan-storage-item:disabled {
    opacity: 0.4;
}

.clan-storage-item.rarity-green { border-color: #56b96a66; }
.clan-storage-item.rarity-blue { border-color: #469bea66; }
.clan-storage-item.rarity-violet { border-color: #a859df66; }
.clan-storage-item.rarity-orange { border-color: #e8953766; }
.clan-storage-item.rarity-mythical { border-color: #e64f5d77; }

.clan-storage-clear {
    width: 100%;
    min-height: 38px;
    margin-top: 10px;
    border: 1px solid #a9585844;
    border-radius: 9px;
    color: #d8b7b7;
    background: #251516;
    font-size: 9px;
    font-weight: 800;
}

.clan-storage-clear-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.clan-storage-clear-list button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 9px;
    border: 1px solid #ffffff12;
    border-radius: 9px;
    color: #ddd5c5;
    background: #121821;
    font-size: 10px;
}

.clan-request-actions button {
    min-height: 38px;
    border: 1px solid #d5a54642;
    border-radius: 9px;
    color: #e5dbc7;
    background: #211d14;
    font-size: 10px;
    font-weight: 800;
}

@media (max-width: 520px) {
    .clan-panel {
        padding: 10px;
    }

    .clan-directory-grid {
        grid-template-columns: 1fr;
    }
}