/* ABCPLAY · 31/multiplayer/multi.css
 * 31: multiplayerens layout, kort, knapper og skærmstørrelser. Regler længere nede kan overstyre tidligere regler.
 * .navn vælger en CSS-klasse; #navn vælger et HTML-id.
 * @media tilpasser udseendet til bestemte skærmstørrelser.
 */

[hidden] {
  display: none !important;
}
body {
  overflow-x: hidden;
}
main {
  max-width: 1050px;
}
.lobby {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 15px;
  margin-top: 20px;
}
.lobby-panel {
  background: #ffffff16;
  border: 1px solid #ffffff26;
  border-radius: 18px;
  padding: 20px;
}
.lobby-panel h2 {
  margin: 0 0 15px;
}
.lobby-panel label {
  display: block;
  margin: 12px 0 6px;
}
.lobby-panel input {
  display: block;
  width: min(100%, 320px);
  font: inherit;
  padding: 13px;
  border-radius: 10px;
  border: 1px solid #b8b8b8;
  background: white;
  color: #172d23;
}
.lobby-panel button {
  margin-top: 14px;
}
.room-top {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: 15px 0;
}
.room-code {
  font-size: clamp(28px, 7vw, 46px);
  font-weight: 900;
  letter-spacing: 0.15em;
  color: #f4d38d;
}
.muted {
  color: #d1e3d6;
}
.secondary {
  background: #ffffff22;
  color: #fff;
  border: 1px solid #ffffff55;
}
.waiting {
  background: #ffffff16;
  border-radius: 14px;
  padding: 18px;
  margin: 15px 0;
}
.opponent.active {
  border-color: #f4d38d;
}
.opponent.me {
  background: #ffffff24;
}
.opponent small {
  display: block;
  margin-top: 8px;
}
#error {
  color: #ffcfca;
  font-weight: 700;
  min-height: 24px;
}
.result-player {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.result-cards {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.result-cards .card {
  width: 58px;
  height: 82px;
  font-size: 15px;
}
.result-cards .card .suit {
  font-size: 26px;
}
.result-cards .card .bottom {
  font-size: 12px;
}
.opponent .backs {
  gap: 5px;
}
.opponent .back {
  margin-left: 0;
}
.pile:disabled {
  opacity: 0.55;
}
.card.selectable:hover {
  transform: translateY(-5px);
}
.your-area {
  margin-top: 20px;
} /* Tilpasning til skærmstørrelse eller skærmretning. */
@media (max-width: 600px) {
  .lobby-panel {
    padding: 14px;
  }
  .room-top {
    gap: 8px;
  }
  .room-top button {
    padding: 10px;
  }
  .result-cards .card {
    width: 45px;
    height: 65px;
  }
}