/* [crewpick] ELKÖTELEZŐDÉS – „Melyik oldalon állsz?” B · Műszak tokenekre (style.css :root), a Klán-menü (clanmenu.css) mintájára:
   teljes képernyő, élszéltől élszélig, fekete alap, hajszálvonal, nagy keskeny display-betű. Szín csak jelentéssel: a két crew
   színe (--cc) a jelvényen, a kiválasztott oldal keretén és halvány derengésén. Asztalon két oszlop (középen „vs”), telefonon
   egymás alatt, a lábléc (figyelmeztetés + Csatlakozom) mindig látszik. Natív érzet: nincs kijelölés, saját fókusz-keret. */
.cp-overlay { position: fixed; inset: 0; z-index: 74; display: grid; background: var(--bg); color: var(--ink); text-shadow: none; pointer-events: auto;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.cp-overlay button { font: inherit; color: inherit; }
.cp-dlg { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: 100%; height: 100%; min-width: 0; overflow: hidden; background: var(--bg); font-family: var(--f-body); }
.cp-dlg::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background-image: var(--grain); background-size: 160px 160px; opacity: .04; }

/* fejléc */
.cp-head { position: relative; display: flex; align-items: flex-end; gap: 24px; padding: clamp(16px, 3vh, 36px) var(--m-gutter, 48px) 16px; min-width: 0; border-bottom: 1px solid var(--line); }
.cp-ttl { flex: 1; min-width: 0; display: grid; gap: 10px; }
.cp-kick { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--light); }
.cp-head h2 { margin: 0; font-family: var(--f-disp); font-weight: 900; font-size: clamp(40px, 7vh, 96px); line-height: .82; text-transform: uppercase; padding-top: .12em; overflow-wrap: anywhere; }
.cp-lede { margin: 2px 0 0; max-width: 72ch; color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.cp-x { all: unset; box-sizing: border-box; cursor: var(--cur-ptr, pointer); position: absolute; top: 14px; right: calc(var(--m-gutter, 48px) - 10px); display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-sm); color: var(--muted); }
.cp-x .ic { width: 24px; height: 24px; }
.cp-x:hover { color: var(--ink); background: var(--fill-2); }
.cp-x:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

/* a két oldal */
.cp-body { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.cp-vs { display: grid; place-items: center; position: relative; }
.cp-vs::before { content: ""; position: absolute; top: 24px; bottom: 24px; left: 50%; width: 1px; background: var(--line); }
.cp-vs span { position: relative; padding: 8px 0; background: var(--bg); font-family: var(--f-disp); font-weight: 800; font-size: 22px; text-transform: uppercase; color: var(--dim); }
.cp-side { --cc: var(--ink); position: relative; display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: clamp(18px, 3vh, 32px) var(--m-gutter, 48px) 24px; cursor: var(--cur-ptr, pointer); outline: none;
  transition: background var(--t-slow) var(--ease); }
.cp-side.rozsa { padding-right: 24px; }
.cp-side.nefelejcs { padding-left: 24px; }
.cp-side::after { content: ""; position: absolute; inset: 10px; border-radius: var(--r-lg); pointer-events: none; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow var(--t) var(--ease); }
.cp-side:hover { background: var(--fill); }
.cp-side:focus-visible::after { box-shadow: inset 0 0 0 2px var(--ink); }
.cp-side.sel { background: linear-gradient(180deg, color-mix(in srgb, var(--cc) 13%, transparent), color-mix(in srgb, var(--cc) 4%, transparent) 60%); }
.cp-side.sel::after { box-shadow: inset 0 0 0 1.5px var(--cc); }
.cp-side.sel:focus-visible::after { box-shadow: inset 0 0 0 2px var(--cc), inset 0 0 0 4px var(--bg); }
.cp-side[aria-disabled="true"] { cursor: default; opacity: .62; }
.cp-side[aria-disabled="true"]:hover { background: none; }
.cp-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; }
.cp-emb { display: block; width: clamp(64px, 9vh, 104px); height: clamp(64px, 9vh, 104px); color: var(--cc); transition: transform var(--t-slow) var(--ease-film); }
.cp-emb svg { width: 100%; height: 100%; display: block; }
.cp-side.sel .cp-emb { transform: rotate(-8deg) scale(1.05); }
.cp-nm { min-width: 0; display: grid; gap: 6px; }
.cp-nm small { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cp-nm small b { color: var(--cc); font-weight: 500; }
.cp-nm h3 { margin: 0; font-family: var(--f-disp); font-weight: 900; font-size: clamp(38px, 6vh, 76px); line-height: .84; text-transform: uppercase; overflow-wrap: anywhere; }
.cp-nm em { font-style: normal; font-size: 16px; color: var(--ink); }
.cp-cnt { display: grid; justify-items: end; gap: 2px; text-align: right; }
.cp-cnt b { font-family: var(--f-mono); font-weight: 500; font-size: 22px; color: var(--ink); }
.cp-cnt small { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.cp-desc { margin: 0; max-width: 62ch; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.cp-blk { display: grid; gap: 8px; min-width: 0; }
.cp-blk h4 { margin: 0; font-family: var(--f-mono); font-weight: 400; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.cp-roles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
.cp-roles li { display: grid; gap: 1px; min-width: 0; align-content: start; }
.cp-roles b { font-family: var(--f-disp); font-weight: 800; font-size: 20px; line-height: 1; text-transform: uppercase; }
.cp-roles span { font-size: 13px; color: var(--muted); line-height: 1.35; }
.cp-clans { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 16px; }
.cp-clans li { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 9px; align-items: center; align-content: start; min-width: 0; padding: 3px 0; }
.cp-cic { grid-row: span 2; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; color: var(--cc); opacity: .9; }
.cp-clans b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-clans span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-pick { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-2);
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.cp-pick .ic { width: 16px; height: 16px; }
.cp-side.sel .cp-pick { background: var(--cc); color: #0B0B0C; box-shadow: none; }

.cp-jump { display: none; }
/* lábléc: figyelmeztetés + gombok */
.cp-foot { display: flex; align-items: center; gap: 12px; padding: 14px var(--m-gutter, 48px) calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--bg); min-width: 0; }
.cp-warn { flex: 1; min-width: 0; margin: 0; display: flex; align-items: flex-start; gap: 10px; color: var(--ink-2); font-size: 13.5px; line-height: 1.4; }
.cp-warn .ic { flex: none; width: 18px; height: 18px; color: var(--light); margin-top: 1px; }
.cp-foot .btn { flex: none; }
.cp-go { min-width: 240px; }
.cp-go:disabled { opacity: .45; cursor: default; }

/* fejléc-jelvény a profil-kártyán és a Fiók-kártya */
.me-crew { display: inline-block; width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; }
.me-crew svg { width: 100%; height: 100%; display: block; }
.cp-ac-row { display: flex; align-items: center; gap: 12px; margin: 4px 0 8px; }
.cp-ac-emb { display: block; width: 44px; height: 44px; flex: none; }
.cp-ac-emb svg { width: 100%; height: 100%; display: block; }
.cp-ac-row b { display: block; font-family: var(--f-disp); font-weight: 800; font-size: 24px; text-transform: uppercase; line-height: 1; }
.cp-ac-row small { color: var(--muted); }

/* keskeny: egymás alatt, a teljes oldal görög, a lábléc marad */
@media (max-width: 860px) {
  .cp-head { padding: 14px 16px 12px; gap: 12px; }
  .cp-head h2 { font-size: clamp(34px, 10.5vw, 56px); line-height: 1; padding-right: 44px; }
  .cp-lede { font-size: 13.5px; }
  .cp-x { top: 8px; right: 6px; }
  .cp-body { grid-template-columns: minmax(0, 1fr); }
  .cp-body { position: relative; }
  .cp-jump { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 16px; background: var(--bg); border-bottom: 1px solid var(--line); }
  .cp-jump button { all: unset; box-sizing: border-box; cursor: var(--cur-ptr, pointer); display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border-radius: var(--r-sm);
    box-shadow: inset 0 0 0 1px var(--line-2); font-family: var(--f-disp); font-weight: 800; font-size: 18px; text-transform: uppercase; color: var(--ink-2); }
  .cp-jump button i { display: block; width: 20px; height: 20px; color: var(--cc); }
  .cp-jump button i svg { width: 100%; height: 100%; display: block; }
  .cp-jump button.on { box-shadow: inset 0 0 0 1.5px var(--cc); color: var(--ink); background: color-mix(in srgb, var(--cc) 12%, transparent); }
  .cp-vs { height: 28px; }
  .cp-vs::before { top: 50%; bottom: auto; left: 16px; right: 16px; width: auto; height: 1px; }
  .cp-vs span { padding: 0 10px; font-size: 18px; }
  .cp-side, .cp-side.rozsa, .cp-side.nefelejcs { padding: 16px 16px 18px; gap: 14px; }
  .cp-side::after { inset: 4px; }
  .cp-top { gap: 12px; }
  .cp-emb { width: 56px; height: 56px; }
  .cp-nm h3 { font-size: clamp(30px, 9.5vw, 48px); }
  .cp-nm em { font-size: 14px; }
  .cp-cnt b { font-size: 18px; }
  .cp-desc { font-size: 14px; }
  .cp-roles b { font-size: 17px; }
  .cp-clans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
  .cp-foot { flex-wrap: wrap; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
  .cp-warn { flex-basis: 100%; font-size: 12.5px; }
  .cp-foot .btn.ghost { flex: 0 0 auto; }
  .cp-go { flex: 1 1 auto !important; min-width: 0; }
}
@media (max-width: 400px) {
  .cp-clans { grid-template-columns: minmax(0, 1fr); }
  .cp-roles { gap: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) { .cp-emb, .cp-side, .cp-side::after { transition: none; } }

/* [crewpick] „a kör végén beállsz” – kis, állandó sáv a képernyő tetején (a HUD fölött, a bemenetet nem veszi el) */
.cp-wait { position: fixed; top: max(14px, env(safe-area-inset-top, 0px)); left: 50%; translate: -50% 0; z-index: 60; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px);
  padding: 10px 16px; border-radius: var(--r); background: rgba(9, 9, 11, .9); box-shadow: inset 0 0 0 1px var(--line-2), var(--sh); color: var(--ink); pointer-events: none; font-family: var(--f-body);
  animation: cpWaitIn .32s var(--ease-film) both; }
.cp-wait .ic { flex: none; width: 20px; height: 20px; color: var(--light); }
.cp-wait span { display: grid; gap: 2px; min-width: 0; }
.cp-wait b { font-family: var(--f-disp); font-weight: 800; font-size: 20px; line-height: 1; text-transform: uppercase; }
.cp-wait small { font-size: 12.5px; color: var(--ink-2); }
@keyframes cpWaitIn { from { opacity: 0; translate: -50% -8px; } }
@media (prefers-reduced-motion: reduce) { .cp-wait { animation: none; } }