/* Clans (templates/lsx-clans.html.twig, lsx-clan.html.twig). */
.lsx-clans { max-width: 900px; margin: 0 auto; padding: 1.5rem; border-radius: 18px; background: linear-gradient(180deg, #1c1a4a, #0f1229); color: #e8ebff; }
.lsx-clans a:not(.btn) { color: #fff1b8; }
.lsx-clans h1 { margin: 0; font-weight: 900; color: #fff; overflow-wrap: anywhere; }
.lsx-clans h2 { margin: 0 0 0.6rem; font-size: 1.15rem; font-weight: 800; color: #fff1b8; }
.lsx-clans h2 small { color: #a5acd6; font-weight: 600; }
.lsx-clans__back { display: inline-block; margin-bottom: 0.75rem; }
.lsx-clans__hero { margin-bottom: 1rem; }
.lsx-clans__hero p { color: #c7cbff; }
.lsx-clans__head { display: flex; gap: 1rem; align-items: center; margin-bottom: 0.75rem; }
.lsx-clans__about { white-space: pre-wrap; overflow-wrap: anywhere; }
.lsx-clans__shops { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lsx-clans__shop { padding: 0.3rem 0.8rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-size: 0.85rem; }
.lsx-clans__shop.is-open { background: rgba(74, 222, 128, 0.2); color: #86efac; }
.lsx-clans__level { display: inline-grid; flex: none; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: linear-gradient(135deg, #facc15, #f97316); color: #1c1a4a; font-weight: 900; }
.lsx-clans__level.is-big { width: 4rem; height: 4rem; border-radius: 18px; font-size: 1.8rem; }
.lsx-clans__bar { height: 12px; overflow: hidden; border-radius: 6px; background: rgba(255, 255, 255, 0.12); }
.lsx-clans__bar span { display: block; height: 100%; background: linear-gradient(90deg, #22d3ee, #a855f7, #facc15); }
.lsx-clans__status { margin-bottom: 1rem; padding: 0.5rem 0.9rem; border-radius: 10px; font-weight: 700; }
.lsx-clans__status.is-ok { background: rgba(74, 222, 128, 0.15); color: #86efac; }
.lsx-clans__status.is-error { background: rgba(248, 113, 113, 0.15); color: #fca5a5; }
.lsx-clans__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.lsx-clans__panel { margin-bottom: 1rem; padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; background: rgba(255, 255, 255, 0.04); }
.lsx-clans__grid .lsx-clans__panel { margin-bottom: 0; }
.lsx-clans__panel.is-danger { border-color: rgba(248, 113, 113, 0.4); background: rgba(127, 29, 29, 0.25); }
.lsx-clans label, .lsx-clans .form-label { color: #fff; font-weight: 700; }
.lsx-clans .form-control, .lsx-clans .form-select { border-color: rgba(255, 255, 255, 0.18); background-color: rgba(255, 255, 255, 0.06); color: #fff; }
.lsx-clans .form-select option { color: #0b1026; }
.lsx-clans__tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 0.5rem; margin: 0 0 1rem; padding: 0; border: 0; }
.lsx-clans__tier { cursor: pointer; }
.lsx-clans__tier input { position: absolute; opacity: 0; }
.lsx-clans__tier span { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; height: 100%; padding: 0.6rem 0.4rem; border: 2px solid rgba(255, 255, 255, 0.15); border-radius: 12px; background: rgba(255, 255, 255, 0.04); text-align: center; }
.lsx-clans__tier span > i { font-size: 1.3rem; color: #fff1b8; }
.lsx-clans__tier small { color: #a5acd6; font-weight: 600; }
.lsx-clans__tier b { color: #facc15; }
.lsx-clans__tier input:checked + span { border-color: #facc15; background: rgba(250, 204, 21, 0.15); }
.lsx-clans__tier input:focus-visible + span { outline: 2px solid #facc15; outline-offset: 2px; }
.lsx-clans__list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.lsx-clans__entry { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.9rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; background: rgba(255, 255, 255, 0.04); color: #e8ebff !important; text-decoration: none; }
.lsx-clans__entry:hover { background: rgba(255, 255, 255, 0.08); }
.lsx-clans__entry.is-mine { border-color: #facc15; }
.lsx-clans__rank { width: 2.2rem; color: #a5acd6; font-weight: 800; }
.lsx-clans__body { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.lsx-clans__body strong { color: #fff; overflow-wrap: anywhere; }
.lsx-clans__body small { color: #a5acd6; }
.lsx-clans__empty { color: #a5acd6; }
.lsx-clans__members { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.lsx-clans__members li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.45rem 0.7rem; border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
.lsx-clans__members li.is-owner { background: rgba(250, 204, 21, 0.12); }
.lsx-clans__members li.is-second, .lsx-clans__members li.is-third { background: rgba(168, 85, 247, 0.12); }
.lsx-clans__role { width: 8.5rem; color: #fff1b8; font-size: 0.8rem; font-weight: 700; }
.lsx-clans__name { flex: 1; min-width: 6rem; font-weight: 800; color: #fff; overflow-wrap: anywhere; }
.lsx-clans__shields { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.lsx-clans__buy { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.lsx-clans__debunks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; }
.lsx-clans__debunk { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.75rem; border-radius: 12px; background: rgba(0, 0, 0, 0.25); }
.lsx-clans__debunk small { color: #fca5a5; }
.lsx-clans__log { display: flex; flex-direction: column; gap: 0.3rem; margin: 0; padding: 0; list-style: none; font-size: 0.9rem; }
.lsx-clans__log li { padding-left: 0.6rem; border-left: 3px solid #a5acd6; }
.lsx-clans__log li.is-good { border-left-color: #4ade80; }
.lsx-clans__log li.is-bad { border-left-color: #f87171; }
.lsx-clans__log time { color: #a5acd6; font-size: 0.8rem; }
@media (max-width: 576px) {
  .lsx-clans { padding: 1rem; }
  .lsx-clans__role { width: auto; }
}

/* Invites, giveaways, lottery and chat. */
.lsx-clans__panel.is-invite { border-color: #4ade80; background: rgba(74, 222, 128, 0.1); }
.lsx-clans__name small { color: #a5acd6; font-weight: 600; }
.lsx-clans__pshield { margin-left: 0.3rem; padding: 0 0.4rem; border-radius: 999px; background: rgba(34, 211, 238, 0.18); color: #67e8f9; font-size: 0.75rem; }
.lsx-clans__invite, .lsx-clans__chat-form, .lsx-clans__tickets { display: flex; gap: 0.5rem; }
.lsx-clans__invite input { max-width: 18rem; }
.lsx-clans__tickets input { max-width: 6rem; }
.lsx-clans__events { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.75rem; }
.lsx-clans__event { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; padding: 0.75rem; border: 1px solid rgba(250, 204, 21, 0.3); border-radius: 12px; background: rgba(250, 204, 21, 0.07); }
.lsx-clans__event strong { color: #fff; overflow-wrap: anywhere; }
.lsx-clans__event small { color: #c7cbff; }
.lsx-clans__event.is-lottery strong { font-size: 1.3rem; color: #facc15; }
.lsx-clans__lottery-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; }
.lsx-clans__lottery-form label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; }
.lsx-clans details summary { color: #fff1b8; font-weight: 700; cursor: pointer; }
.lsx-clans__giveaway-form { margin-top: 0.75rem; }
.lsx-clans__giveaway-form fieldset { padding: 0.75rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; }
.lsx-clans__giveaway-form legend { float: none; width: auto; padding: 0 0.3rem; font-size: 1rem; color: #fff1b8; }
.lsx-clans__giveaway-form .text-muted { color: #a5acd6 !important; }
.lsx-clans__giveaway-form select, .lsx-clans__giveaway-form input[type="number"] { width: 100%; max-width: 22rem; padding: 0.3rem 0.5rem; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 8px; background: rgba(255, 255, 255, 0.06); color: #fff; }
.lsx-clans__giveaway-form select option { color: #0b1026; }
.lsx-clans__giveaway-form .form-item { margin-bottom: 0.5rem; }
.lsx-clans__chat { height: 320px; margin-bottom: 0.6rem; padding: 0.6rem; overflow-y: auto; border-radius: 10px; background: rgba(0, 0, 0, 0.25); }
.lsx-clans__chat-empty { margin: 0; color: #a5acd6; }
.lsx-clans__msg { position: relative; padding: 0.3rem 0.4rem; border-radius: 8px; }
.lsx-clans__msg:hover { background: rgba(255, 255, 255, 0.04); }
.lsx-clans__msg-name { font-weight: 800; color: #fff; }
.lsx-clans__msg.is-owner .lsx-clans__msg-name { color: #facc15; }
.lsx-clans__msg.is-second .lsx-clans__msg-name, .lsx-clans__msg.is-third .lsx-clans__msg-name { color: #c4b5fd; }
.lsx-clans__msg.is-mine .lsx-clans__msg-name { color: #67e8f9; }
.lsx-clans__msg time { color: #8088b8; font-size: 0.75rem; }
.lsx-clans__msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.lsx-clans__msg-del { position: absolute; top: 0.2rem; right: 0.3rem; padding: 0 0.35rem; border: 0; border-radius: 6px; background: transparent; color: #a5acd6; opacity: 0; }
.lsx-clans__msg:hover .lsx-clans__msg-del, .lsx-clans__msg-del:focus { opacity: 1; }
.lsx-clans__msg-del:hover { background: rgba(248, 113, 113, 0.25); color: #fca5a5; }
.lsx-clans .form-control:focus, .lsx-clans .form-select:focus { border-color: #facc15; background-color: rgba(255, 255, 255, 0.1); color: #fff; box-shadow: 0 0 0 0.2rem rgba(250, 204, 21, 0.25); }
.lsx-clans .form-control::placeholder { color: #8088b8; }
.lsx-clans__tickets { align-items: center; }
.lsx-clans__tickets .btn, .lsx-clans__invite .btn { white-space: nowrap; }

/* Clan colors and badges, alliances and wars. */
.lsx-clans__badge { display: inline-grid; flex: none; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: var(--clan, #facc15); color: #0b1026; font-size: 1.1rem; vertical-align: middle; box-shadow: 0 0 12px color-mix(in srgb, var(--clan, #facc15) 45%, transparent); }
.lsx-clans__badge.is-small { width: 1.8rem; height: 1.8rem; border-radius: 9px; font-size: 0.85rem; }
h1 .lsx-clans__badge { width: 2.6rem; height: 2.6rem; }
.lsx-clans__war { border-color: rgba(248, 113, 113, 0.5); background: linear-gradient(135deg, rgba(127, 29, 29, 0.35), rgba(30, 27, 75, 0.35)); }
.lsx-clans__warbar { display: flex; overflow: hidden; border-radius: 12px; background: rgba(255, 255, 255, 0.08); font-size: 0.85rem; font-weight: 800; }
.lsx-clans__warbar span { padding: 0.5rem 0.7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lsx-clans__warbar .is-us { min-width: 6rem; background: var(--clan); color: #0b1026; }
.lsx-clans__warbar .is-them { flex: 1; min-width: 6rem; text-align: right; background: color-mix(in srgb, var(--clan) 35%, transparent); color: #fff; }
.lsx-clans__diplomacy { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; }
.lsx-clans__diplomacy form { display: flex; gap: 0.4rem; }
.lsx-clans__diplomacy select { max-width: 14rem; }
.lsx-clans__swatches { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; }
.lsx-clans__swatches input { position: absolute; opacity: 0; }
.lsx-clans__swatches span:not(.visually-hidden) { display: grid; place-items: center; width: 2rem; height: 2rem; border: 2px solid rgba(255, 255, 255, 0.15); border-radius: 8px; cursor: pointer; color: #fff; }
.lsx-clans__swatches input:checked + span { border-color: #fff; box-shadow: 0 0 0 2px #facc15; }
.lsx-clans__swatches input:focus-visible + span { outline: 2px solid #facc15; outline-offset: 2px; }
.lsx-clans__diplomacy .btn { white-space: nowrap; }