/* Co-op mode UI — mode-select "Co-op" card, and the Host/Join lobby screens.
   Kept separate from styles.css since co-op is its own self-contained feature
   (see js/oddbitnet.js for the underlying reusable networking engine, and
   js/coop-adapter.js for how this game specifically wires into it). */

.modeCardCoop{
  border-color:rgba(255,63,176,0.4);
}
.modeCardCoop:hover{
  border-color:var(--pink,#ff3fb0);
  box-shadow:0 0 16px rgba(255,63,176,0.3);
}

/* Co-op end-of-run results: host gets its own dedicated left column, every joining player stacks
   in a scrollable right column (see coopShowResults in coop-adapter.js) — explicit player feedback
   asked for the host to read as visually distinct from whoever joined, not just another slot in an
   even N-up grid. */
.coopResultsSplit{
  display:flex; gap:18px; margin-top:14px; align-items:flex-start; text-align:left;
}
.coopResultsSide{ flex:1; min-width:0; }
.coopResultsSideHost{ flex:1 1 42%; }
.coopResultsSideJoiners{ flex:1 1 58%; }
.coopResultsSideLabel{
  font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--text-dim);
  margin-bottom:8px; text-align:center;
}
#coopResultsJoinerCards{
  display:flex; flex-direction:column; gap:12px; max-height:52vh; overflow-y:auto;
  padding-right:4px; touch-action:pan-y;
}
@media (max-width:760px){
  .coopResultsSplit{ flex-direction:column; }
  .coopResultsSideHost, .coopResultsSideJoiners{ flex:1 1 auto; width:100%; }
}

.coopResultCard{
  display:flex; flex-direction:column; gap:6px; text-align:left;
  padding:14px 16px; background:rgba(63,240,255,0.06); border:1px solid var(--panel-line);
  border-radius:10px;
}
/* Each card embeds the same two-column kill/collectible breakdown solo results screens use (see
   .scoreBreakdownColumns/.scoreBreakdownColumn in styles.css) — cramped at a full card's width, so
   this stacks them instead of sitting side-by-side, and shrinks the row/icon sizing to fit a card
   instead of a full results panel. */
.coopResultCard .scoreBreakdownColumns{ flex-direction:column; gap:8px; margin-top:4px; }
.coopResultCard .scoreRow{ font-size:11px; }
.coopResultCard .scoreIcon{ width:20px; height:20px; }
.coopResultCard .coopResultStatRow{ margin-top:2px; padding-top:6px; border-top:1px solid var(--panel-line); }
.coopResultCardHost{ border-color:rgba(255,210,63,0.4); }
.coopResultCardYou{ box-shadow:0 0 0 1.5px var(--cyan) inset; }
.coopResultName{ font-weight:800; font-size:13.5px; color:#fff; }
.coopResultYouTag{
  font-size:9px; font-weight:800; color:#08131a; background:var(--cyan);
  border-radius:5px; padding:1px 5px; letter-spacing:0.5px; vertical-align:1px;
}
.coopResultDown{ color:#ff6b6b; font-size:10px; letter-spacing:0.5px; }
.coopResultBadges{ display:flex; flex-direction:column; gap:3px; margin:2px 0 4px; }
.coopMvpBadge{
  display:inline-block; font-size:10px; font-weight:700; color:var(--gold);
  background:rgba(255,210,63,0.12); border:1px solid rgba(255,210,63,0.35);
  border-radius:6px; padding:2px 7px; width:fit-content;
}
.coopResultStatRow{
  display:flex; justify-content:space-between; align-items:baseline; gap:8px;
  font-size:11.5px; color:var(--text-dim);
}
.coopResultStatRow b{ color:#fff; font-size:13px; }

.hofRowCoop .hofRoster{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:6px;
}
.hofRosterChip{
  font-size:10px; color:var(--text-dim); background:rgba(63,240,255,0.08);
  border:1px solid var(--panel-line); border-radius:6px; padding:2px 7px;
}
.hofRosterChip b{ color:#fff; }

.coopChoiceGrid{
  display:flex; gap:14px; margin-top:16px; flex-wrap:wrap; justify-content:center; align-items:stretch;
}
.coopChoiceBtn{
  display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  /* flex:1 instead of just min-width so Host and Join always split the row evenly and match height —
     Host's subtitle ("Start a game and get a code to share") is much longer than Join's ("Enter a
     friend's code"), so without this each button just sized to its own text and Host ended up
     visibly wider (239px vs 180px) than Join. */
  flex:1 1 180px; min-width:180px; padding:16px 20px; height:auto;
}
.coopChoiceBtn small{
  display:block; margin-top:4px; font-weight:400; opacity:0.75; font-size:11px;
}

.coopPanel{ max-width:420px; }

.coopCodeLabel{
  text-align:center; font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--text-dim); margin-top:8px;
}
.coopCodeDisplay{
  text-align:center; font-size:36px; font-weight:800; letter-spacing:8px;
  color:var(--gold); margin:8px 0 16px 0; user-select:text;
}

.coopPeerList{
  display:flex; flex-direction:column; gap:6px; min-height:44px; margin-bottom:6px;
}
.coopPeerListEmpty{
  text-align:center; font-size:12px; color:var(--text-dim); padding:10px;
}
.coopPeerItem{
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  background:rgba(63,240,255,0.08); border:1px solid var(--panel-line); border-radius:8px;
  font-size:12px;
}
.coopPeerItem .coopPeerDot{
  width:8px; height:8px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 6px var(--cyan); flex-shrink:0;
}

.coopCodeInput{
  background:rgba(8,11,26,0.85); border:1px solid var(--panel-line); border-radius:8px;
  color:#fff; font-size:22px; letter-spacing:8px; text-align:center; text-transform:uppercase;
  padding:12px; width:100%; box-sizing:border-box;
}
.coopCodeInput:focus{ outline:none; border-color:var(--cyan); }

.coopJoinStatusText{
  text-align:center; font-size:13px; color:var(--text-dim); margin:10px 0;
}
.coopJoinStatusText.error{ color:#ff6b6b; }
.coopJoinStatusText.ok{ color:#3fff9e; }