/* Delt av roster.js (forsidens "Spillerne"-kort) OG picker.js (spillsidens
   "Hvem er med?"-steg etter Start, som gjenbruker samme overskrift+Endre-rad
   og samme redigeringsliste for å legge til/fjerne spillere der òg). */

.player-roster-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-3);
  margin-bottom:var(--space-4);
}
.player-roster-head h2{ font-size:var(--text-md); }
.player-roster-toggle{
  flex-shrink:0;
  font-weight:700; color:var(--aksent); font-size:var(--text-sm);
  white-space:nowrap;
}

/* Visningsmodus: avatar-chip per spiller, som i designutkast 1, bilde 2a. */
.player-roster-chips{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:var(--space-2);
}
.player-chip{
  display:flex; align-items:center; gap:var(--space-2);
  background:var(--card-hover);
  border-radius:var(--radius-full);
  padding:var(--space-1) var(--space-3) var(--space-1) var(--space-1);
}
.player-avatar{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:28px; height:28px;
  border-radius:var(--radius-full);
  color:var(--bg);
  font-weight:700; font-size:var(--text-xs);
}

/* Får ikke alle navnene plass på én rad (roster.js sin `updateCompact`):
   fjern pillens bakgrunn/padding og skjul navneteksten — igjen bare
   fargede avatar-sirkler side ved side, tett i stedet for luftige piller. */
.player-roster-chips--compact .player-chip{
  background:transparent; padding:0;
}
.player-roster-chips--compact .player-chip > span:last-child{
  display:none;
}

.player-empty-text{ color:var(--text-dim); font-size:var(--text-sm); margin:0; }

/* Redigeringsmodus i roster.js: navn + fjernknapp. */
.player-list{
  list-style:none; margin:0 0 var(--space-4); padding:0;
  display:flex; flex-direction:column; gap:var(--space-2);
}
.player-row{
  display:flex; align-items:center; gap:var(--space-2);
  padding:var(--space-2) var(--space-3);
  background:var(--card-hover);
  border-radius:var(--radius-md);
}
.player-row-label{
  flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.player-remove{
  flex-shrink:0;
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  font-size:var(--text-md); line-height:1;
  color:var(--text-dim);
  border-radius:var(--radius-full);
}
.player-remove:hover{ color:var(--text); background:var(--card); }

.player-add-row{ display:flex; gap:var(--space-2); }
.player-add-input{
  flex:1; min-width:0;
  font:inherit; color:var(--text);
  background:var(--card-hover);
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius-md);
  padding:var(--space-2) var(--space-3);
}
.player-add-btn{
  flex-shrink:0;
  font-weight:700; color:var(--aksent);
  padding:var(--space-2) var(--space-3);
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius-md);
}

/* Spillerplukkeren (picker.js) — steget etter "Start spillet", i samme
   boks som resten av spillinfoen (se game-shell/page.js). Egen
   topp-/bunnmargin som `.safety`/`.player-start-btn`, siden dette kortet
   erstatter Start-knappen i samme plass — uten den ville avstanden ned mot
   "Slik spiller dere" forsvinne. Alle er valgt (fylt) fra før av; å trykke
   en spiller FJERNER dem fra runden (ramme, tom sirkel) i stedet for
   omvendt — vanligst at alle blir med. */
.player-picker{ margin:var(--space-5) 0; }
.player-toggle{
  display:flex; align-items:center; justify-content:space-between;
  width:100%;
  padding:var(--space-3) var(--space-4);
  background:transparent;
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius-md);
  font:inherit; font-weight:700; color:var(--text);
  text-align:left;
}
.player-toggle[aria-pressed="true"]{
  background:color-mix(in srgb, var(--aksent) 16%, var(--card));
  border-color:var(--aksent);
}
.player-toggle:disabled{ opacity:0.5; }
.player-toggle-check{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:24px; height:24px;
  margin-left:var(--space-3);
  border:1.5px solid var(--line);
  border-radius:var(--radius-full);
  font-size:var(--text-xs);
  color:var(--paa-aksent);
}
.player-toggle[aria-pressed="true"] .player-toggle-check{
  background:var(--aksent);
  border-color:var(--aksent);
}

/* Valgt, men utenfor spillets makstall (se picker.js) — rødt i stedet for
   den vanlige aksentfargen, så det er tydelig HVEM som må fjernes. Etter
   disse (høyere spesifisitet-rekkefølge) for å slå igjennom [aria-pressed]-
   fargen over. */
.player-toggle--over[aria-pressed="true"]{
  background:color-mix(in srgb, var(--rod) 16%, var(--card));
  border-color:var(--rod);
}
.player-toggle--over[aria-pressed="true"] .player-toggle-check{
  background:var(--rod);
  border-color:var(--rod);
}
.player-picker-hint{
  color:var(--text-dim); font-size:var(--text-xs);
  margin:0 0 var(--space-4);
}

/* Primærknapp: "Start spillet" (både øverst og nederst på åpningssiden,
   se game-shell/page.js) og plukkerens bekreft-knapp bruker denne — samme
   visuelle vekt alle steder. */
.player-start-btn{
  display:block;
  width:100%;
  margin:var(--space-5) 0;
  font-weight:700; font-size:var(--text-body);
  color:var(--paa-aksent);
  background:var(--aksent);
  padding:var(--space-3) var(--space-5);
  border-radius:var(--radius-md);
}
.player-start-btn:disabled{
  background:var(--card-hover);
  color:var(--text-dim);
  cursor:not-allowed;
}
/* Inni .player-picker er knappen siste element FØR kortets egen
   bunn-padding — uten dette la de to sammen og ga dobbelt så mye luft
   under knappen som over overskriften. */
.player-picker .player-start-btn{ margin-bottom:0; }