/* Crews (crews/crews.js): the crew's HQ in its colour, level and XP, members and roles, the vault, the log, top crews. */
.crewx { width: min(1100px, 100%); margin: 14px 0 110px; text-align: left; --gold: #ffd23f; }
.crewx .empty-line { color: var(--muted); font-size: 13px; padding: 14px 4px; text-align: center; grid-column: 1 / -1; list-style: none; }
.crewx .empty-line a, .cx-back a { color: #ff9ad5; }
.cx-hero, .cx-panel { border: 1px solid rgba(255, 120, 200, .22); border-radius: 18px; background: linear-gradient(180deg, rgba(30, 12, 52, .92), rgba(16, 8, 32, .92)); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.cx-hero { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 20px; align-items: center; padding: 14px 20px 14px 14px; border-color: color-mix(in srgb, var(--crew) 45%, transparent); }
.cx-hq { border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, #0d0618, #1a0d2e); }
.cx-hq svg { display: block; width: 100%; height: auto; }
.cx-lit { filter: drop-shadow(0 0 3px rgba(255, 220, 140, .8)); }
.cx-neon { filter: drop-shadow(0 0 4px currentColor); animation: cx-flicker 6s infinite; }
@keyframes cx-flicker { 0%, 92%, 96%, 100% { opacity: 1; } 94% { opacity: .45; } }
.cx-flag path { transform-origin: left center; animation: cx-wave 2.6s ease-in-out infinite; transform-box: fill-box; }
@keyframes cx-wave { 50% { transform: skewY(4deg) scaleX(.94); } }
.cx-name { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 700 26px var(--head, Oswald), sans-serif; letter-spacing: 1px; color: #fff; }
.cx-tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font: 700 13px var(--head, Oswald), sans-serif; letter-spacing: 1.5px; color: #14081f; background: var(--crew, #b45cff); box-shadow: 0 0 12px color-mix(in srgb, var(--crew, #b45cff) 55%, transparent); }
.cx-sub { margin: 6px 0 10px; color: var(--muted); font-size: 14px; }
.cx-sub b { color: #fff; }
.cx-xp { position: relative; height: 18px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.cx-xp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, color-mix(in srgb, var(--crew) 70%, #fff 0%), var(--gold)); }
.cx-xp span { position: relative; display: block; text-align: center; font: 700 11px/18px Inter, sans-serif; color: #fff; text-shadow: 0 1px 2px #000; }
.cx-hint { margin: 8px 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.cx-tabs { margin: 14px 0 10px; }
.cx-panel { padding: 14px; margin-top: 12px; }
.cx-panel h3 { margin: 0 0 10px; font: 600 14px var(--head, Oswald), sans-serif; letter-spacing: 1.6px; text-transform: uppercase; color: #ff9ad5; }
.cx-panel h4 { margin: 14px 0 8px; font: 600 13px var(--head, Oswald), sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: #fff; }
.cx-members, .cx-log, .cx-top, .cx-invites { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cx-members li, .cx-invites li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, .22); font-size: 14px; }
.cx-members li.me { box-shadow: inset 0 0 0 1px var(--gold); }
.cx-members b, .cx-invites b { color: #fff; }
.cx-members em, .cx-invites em { font-style: normal; color: var(--muted); font-size: 12.5px; }
.cx-role { padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: var(--muted); background: rgba(255, 255, 255, .06); }
.cx-role.r-boss { color: var(--gold); background: rgba(255, 210, 63, .14); } .cx-role.r-officer { color: #9fe8ff; background: rgba(80, 200, 255, .12); }
.cx-acts { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.cx-acts .sure, .cx-leave.sure { background: linear-gradient(90deg, #ff5c8a, #ff3a3a); color: #fff; }
.cx-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cx-own { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; color: var(--muted); font-size: 13px; }
.cx-leave { margin-left: auto; }
.cx-colors { display: flex; gap: 6px; }
.cx-colors button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .15); background: var(--c); cursor: pointer; }
.cx-colors button.on { border-color: #fff; box-shadow: 0 0 0 2px var(--c), 0 0 12px var(--c); }
.cx-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cx-form input, .cx-scrap input { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, .35); color: #fff; font: 600 14px Inter, sans-serif; }
#cxName { flex: 1 1 200px; } #cxTag { width: 90px; text-transform: uppercase; letter-spacing: 2px; }
.cx-scrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .28); color: var(--muted); font-size: 13px; }
.cx-scrap > span { margin-right: auto; color: #fff; } .cx-scrap b { color: var(--gold); font-size: 18px; }
.cx-scrap input { width: 90px; padding: 7px 10px; margin-left: 4px; }
.cx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.cx-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); color: #fff; cursor: pointer; font: 600 12px Inter, sans-serif; text-align: center; }
.cx-item:disabled { cursor: default; opacity: 1; }
.cx-item.on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(255, 210, 63, .4); }
.cx-item small { color: var(--muted); font-size: 11px; } .cx-item em { font-style: normal; color: var(--gold); }
.cx-art { display: grid; place-items: center; width: 56px; height: 56px; } .cx-art svg { width: 100%; height: 100%; }
.cx-bar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(12, 4, 22, .95); box-shadow: 0 0 0 1px var(--line); }
.cx-bar span { margin-right: auto; color: #fff; font-weight: 700; }
.cx-bar .btn-ghost:first-child { margin-right: auto; } .cx-bar .btn-ghost:first-child + span { margin-right: auto; margin-left: 0; }
.cx-log li { display: flex; gap: 8px; padding: 7px 10px; border-radius: 8px; background: rgba(0, 0, 0, .2); font-size: 13.5px; color: var(--muted); }
.cx-log b { color: #fff; } .cx-log time { margin-left: auto; font-size: 12px; white-space: nowrap; }
.cx-top a { display: grid; grid-template-columns: 54px 1fr auto 56px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, .22); color: #fff; text-decoration: none; font-size: 14px; }
.cx-top a:hover { background: rgba(255, 255, 255, .06); }
.cx-top em { font-style: normal; color: var(--muted); font-size: 12.5px; } .cx-top strong { text-align: right; color: var(--gold); }
.cx-top .cx-tag { text-align: center; }
.cx-msg { text-align: center; color: var(--muted); font-size: 13px; min-height: 1em; }
.cx-back { margin-top: 12px; }
@media (max-width: 680px) {
  .cx-hero { grid-template-columns: 1fr; padding: 12px; }
  .cx-top a { grid-template-columns: 48px 1fr 48px; } .cx-top em { display: none; }
  .cx-acts { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .cx-neon, .cx-flag path { animation: none; } }

/* The crew's picture, recruiting, the crew list, crew chat and asks (2026-11-02) */
.cx-name .crewpic { margin: 0; box-shadow: 0 0 0 2px var(--crew), 0 0 18px color-mix(in srgb, var(--crew) 45%, transparent); }
.cx-about { margin: 8px 0 0; color: #f1e8ff; font-size: 14px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.cx-top a { grid-template-columns: 34px 1fr auto 56px; }
.cx-top .crewpic { margin: 0; }
.cx-tabs [data-badge] { position: relative; }
.cx-tabs [data-badge]::after { content: attr(data-badge); position: absolute; top: -6px; right: -4px; min-width: 18px; padding: 1px 5px; border-radius: 9px; background: var(--pink, #ff3ea5); color: #fff; font: 800 11px/16px Inter, sans-serif; }
.cx-tabs small { color: var(--gold); font-weight: 800; }
.cx-settings textarea, .cx-form select { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, .35); color: #fff; font: 600 14px Inter, sans-serif; }
.cx-settings textarea { display: block; width: 100%; margin-bottom: 8px; resize: vertical; }
.cx-form label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.cx-pic { display: flex; align-items: center; gap: 14px; }
.cx-pic > .crewpic { margin: 0; }
.cx-pic .btn-ghost { cursor: pointer; }
.cx-found-list, .cx-asks { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cx-found-list > li:not(.empty-line) { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .22); }
.cx-found-list .crewpic { margin: 0; }
.cx-found-list > li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cx-found-list a { color: #fff; text-decoration: none; } .cx-found-list a:hover b { text-decoration: underline; }
.cx-found-list em { font-style: normal; color: var(--muted); font-size: 12.5px; }
.cx-found-list p { margin: 2px 0 0; color: #e6dcf5; font-size: 13px; overflow-wrap: anywhere; }
.cx-only { color: var(--muted); font-size: 12px; font-weight: 700; }
.cx-joinbar { display: flex; justify-content: flex-end; margin: 10px 0 0; }
.cx-chat { display: flex; flex-direction: column; gap: 10px; }
.cx-chatlog { display: flex; flex-direction: column; gap: 8px; max-height: 420px; min-height: 220px; overflow-y: auto; padding: 4px 2px; }
.cx-msg-row { display: flex; align-items: flex-start; gap: 8px; max-width: 86%; }
.cx-msg-row .pfp { margin: 2px 0 0; }
.cx-msg-row > div { padding: 7px 11px; border-radius: 12px 12px 12px 4px; background: rgba(255, 255, 255, .07); min-width: 0; }
.cx-msg-row.mine { align-self: flex-end; flex-direction: row-reverse; }
.cx-msg-row.mine > div { border-radius: 12px 12px 4px 12px; background: color-mix(in srgb, var(--gold) 14%, transparent); }
.cx-msg-row b { color: #fff; font-size: 13px; } .cx-msg-row time { margin-left: 8px; color: var(--muted); font-size: 11px; }
.cx-msg-row p { margin: 2px 0 0; color: #f1e8ff; font-size: 14px; overflow-wrap: anywhere; }
.cx-chat .cx-form input { flex: 1 1 200px; }
.cx-myask { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .28); color: var(--muted); font-size: 13px; }
.cx-myask b { color: #fff; } .cx-myask .btn-ghost { margin-left: auto; }
.cx-asks > li:not(.empty-line) { padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .22); }
.cx-ask-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.cx-ask-head .pfp { margin: 0; } .cx-ask-head b { color: #fff; } .cx-ask-head time { margin-left: auto; font-size: 12px; }
.cx-ask-head .cx-art, .cx-myask .cx-art { width: 34px; height: 34px; }
.cx-any { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: rgba(255, 255, 255, .08); color: #fff; font: 800 18px Oswald, sans-serif; }
.cx-ask-give { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-top: 8px; }
.cx-ask-give .cx-item small { color: var(--gold); font-weight: 800; }
.cx-ask-give .cx-item.sure { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
@media (max-width: 680px) {
  .cx-top a { grid-template-columns: 34px 1fr 48px; }
  .cx-found-list > li:not(.empty-line) { flex-wrap: wrap; }
  .cx-msg-row { max-width: 100%; }
}

/* One screen on a computer (styles.css) like a clan screen in a game. Your HQ: the crew's building, name and level on
   the left, the tabs and their content on the right down to the dock (the content scrolls inside, the chat keeps its
   message box at the bottom). Another crew's HQ: the same with its members. No crew yet: finding and founding one on
   the left, the top crews on the right. */
@media (min-width: 1041px) and (min-height: 560px) {
  .room.fit .crewx { flex: 1 1 auto; min-height: 0; margin: 10px 0 0; display: grid; gap: 10px 14px; }
  .room.fit .crewx > .cx-msg { grid-area: msg; margin: 0; }
  .room.fit .crewx > .cx-msg:empty { display: none; }
  .room.fit .crewx .cx-panel { margin: 0; }
  .room.fit .crewx[data-view="hq"] { grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "hero tabs" "hero body" "msg msg"; }
  .room.fit .crewx[data-view="visit"] { grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-areas: "hero join" "hero body" "hero back" "msg msg"; }
  .room.fit .crewx .cx-hero { grid-area: hero; align-self: start; max-height: 100%; overflow: auto; grid-template-columns: 1fr; gap: 10px; padding: 12px; scrollbar-width: thin; }
  .room.fit .crewx .cx-name { font-size: 21px; gap: 8px; }
  .room.fit .crewx .cx-sub { margin: 4px 0 8px; font-size: 13px; }
  .room.fit .crewx .cx-hint { font-size: 12px; margin: 6px 0 0; }
  .room.fit .crewx .cx-tabs { grid-area: tabs; margin: 0; }
  .room.fit .crewx .cx-joinbar { grid-area: join; margin: 0; }
  .room.fit .crewx .cx-back { grid-area: back; margin: 0; }
  .room.fit .crewx .cx-body { grid-area: body; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; }
  .room.fit .crewx .cx-body > .cx-chat { flex: 1 1 auto; min-height: 0; }
  .room.fit .crewx .cx-chatlog { flex: 1 1 auto; min-height: 0; max-height: none; }
  .room.fit .crewx .cx-body:has(> .cx-chat) { overflow: hidden; }
  .room.fit .crewx[data-view="join"] { display: flex; flex-direction: column; gap: 10px; }
  .room.fit .crewx .cx-jbody { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; }
}

/* Without a gang (the user, 2026-11-04: clearer, like a clan screen in a mobile game): big tabs on top; the gang list in
   rows with the badge, the name and tag, how to get in, members and level side by side; creating a gang as a form with
   its badge previewed on top and a stepper for each choice. */
.cx-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 6px; border-radius: 18px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(255, 120, 200, .18); }
.cx-seg button { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 6px 10px; border: 0; border-radius: 13px; cursor: pointer;
  background: transparent; color: var(--muted); font: 700 16px var(--head, Oswald), sans-serif; letter-spacing: 1px; text-transform: uppercase; transition: background .15s, color .15s; }
.cx-seg button i { font-style: normal; font-size: 20px; }
.cx-seg button:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.cx-seg button[aria-selected="true"] { color: #1c0a2e; background: linear-gradient(180deg, #fff3b0, var(--gold)); box-shadow: 0 4px 0 #b88a12, 0 8px 18px rgba(255, 210, 63, .25); }
.cx-seg small { min-width: 20px; padding: 1px 6px; border-radius: 10px; background: #ff3ea5; color: #fff; font: 800 12px/18px Inter, sans-serif; }
.cx-jbody { margin-top: 10px; } .cx-jbody > .cx-panel { margin-top: 0; }
.cx-search { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 14px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px var(--line); }
.cx-search input { flex: 1; min-width: 0; padding: 10px 0; border: 0; background: none; color: #fff; font: 600 15px Inter, sans-serif; outline: none; }
.cx-search .btn-primary { height: 42px; padding: 0 20px; }
.cx-found-list > li.cx-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto auto; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 14px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--crew) 16%, rgba(0, 0, 0, .3)), rgba(0, 0, 0, .25) 40%); box-shadow: inset 3px 0 0 var(--crew); flex-wrap: nowrap; }
.cx-row .crewpic { margin: 0; box-shadow: 0 0 0 2px var(--crew); }
.cx-row-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cx-row-main > a, .cx-row-main > b { display: flex; align-items: center; gap: 8px; min-width: 0; color: #fff; text-decoration: none; }
.cx-row-main b { font: 700 18px var(--head, Oswald), sans-serif; letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-row-main .cx-tag { flex: none; }
.cx-row-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cx-row-meta em { font-style: normal; color: var(--muted); font-size: 12.5px; }
.cx-type, .cx-req { padding: 2px 9px; border-radius: 999px; font: 800 11.5px Inter, sans-serif; background: rgba(255, 255, 255, .07); color: #e6dcf5; }
.cx-type.t-open { color: #7dff6a; background: rgba(125, 255, 106, .1); } .cx-type.t-request { color: #ffd23f; background: rgba(255, 210, 63, .1); } .cx-type.t-invite { color: #ff8aa8; background: rgba(255, 92, 138, .1); }
.cx-row-main p { margin: 0; color: #d9cdea; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-stat, .cx-lv { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 64px; }
.cx-stat b { font: 700 18px var(--head, Oswald), sans-serif; color: #fff; } .cx-stat small { color: var(--muted); font-size: 13px; }
.cx-stat span, .cx-lv span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.cx-lv b { display: grid; place-items: center; width: 40px; height: 44px; font: 700 18px var(--head, Oswald), sans-serif; color: #1c0a2e;
  background: linear-gradient(180deg, #fff3b0, var(--gold)); clip-path: polygon(50% 0, 100% 18%, 100% 66%, 50% 100%, 0 66%, 0 18%); }
.cx-row .cx-acts { margin: 0; min-width: 104px; justify-content: flex-end; }
.cx-row .cx-acts .pl-mini { height: 38px; padding: 0 16px; font-size: 14px; }
.cx-create { --crew: #ff3ea5; padding: 18px; }
.cx-create-head { display: flex; align-items: center; gap: 18px; padding: 14px; border-radius: 16px; background: radial-gradient(circle at 15% 50%, color-mix(in srgb, var(--crew) 30%, transparent), rgba(0, 0, 0, .25) 60%); }
.cx-badge .crewpic { margin: 0; box-shadow: 0 0 0 3px var(--crew), 0 0 28px color-mix(in srgb, var(--crew) 55%, transparent); object-fit: cover; }
.cx-create-name { margin: 0; font: 700 28px var(--head, Oswald), sans-serif; letter-spacing: 1px; color: #fff; overflow-wrap: anywhere; }
.cx-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 16px 0; }
.cx-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cx-field.wide { grid-column: 1 / -1; }
.cx-field > span { font: 600 13px var(--head, Oswald), sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: #ff9ad5; }
.cx-field > span small { margin-left: 6px; color: var(--muted); font: 600 11.5px Inter, sans-serif; letter-spacing: 0; text-transform: none; }
.cx-field input, .cx-field textarea { width: 100%; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, .35); color: #fff; font: 600 15px Inter, sans-serif; resize: vertical; }
.cx-field input, .cx-field #cxName { flex: none; }
.cx-field #cxTag { width: 100%; text-transform: uppercase; letter-spacing: 3px; }
.cx-field .cx-colors button { width: 34px; height: 34px; }
.cx-step { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; height: 46px; border-radius: 12px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.cx-step button { height: 100%; border: 0; background: rgba(255, 255, 255, .06); color: var(--gold); font-size: 15px; cursor: pointer; }
.cx-step button:hover { background: rgba(255, 210, 63, .16); }
.cx-step b { text-align: center; color: #fff; font: 700 15px Inter, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; }
.cx-create-go { display: block; width: 100%; height: 58px; font-size: 20px; letter-spacing: 2px; border-radius: 16px; }
@media (max-width: 680px) {
  .cx-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-seg button { min-height: 46px; font-size: 14px; }
  .cx-found-list > li.cx-row { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; }
  .cx-row .cx-stat { display: none; }
  .cx-row .cx-acts { grid-column: 1 / -1; min-width: 0; }
  .cx-fields { grid-template-columns: 1fr; }
}