* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 1rem;
  min-height: 100svh;
  display: grid;
  place-items: center;
  color: #fff2c5;
  background: #102e23 url('assets/interface/jade-texture.png') center / cover;
  font: 1rem/1.5 system-ui, sans-serif;
}
.friend-lobby {
  width: min(100%, 30rem);
  padding: clamp(1.2rem, 5vw, 2.5rem);
  border: 2px solid #e6c46e;
  border-radius: 1.5rem;
  background: #0b3023;
  box-shadow: 0 1rem 2.5rem #061c17a8;
  text-align: center;
}
.friend-lobby a { color: #fff2c5; }
.friend-lobby .friend-home { display: block; text-align: left; }
.friend-logo { display: block; width: 80%; margin: 1.3rem auto 0; }
.friend-lobby h1 { margin: 0; font: bold clamp(2rem, 8vw, 3rem) Georgia, serif; }
.friend-table-size {
  margin: 0 auto 1.1rem;
  padding: .4rem .65rem .65rem;
  border: 1px solid #caac61;
  border-radius: .8rem;
  color: #fff2c5;
}
.friend-table-size label {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: 44px;
  margin-inline: .4rem;
  cursor: pointer;
}
.friend-table-size input { accent-color: #e6c46e; }
.friend-lobby button {
  min-height: 48px;
  padding: .65rem 1.5rem;
  border: 2px solid #edca7d;
  border-radius: 2rem;
  color: #143f2e;
  background: #f9e9ba;
  font: bold 1.1rem Georgia, serif;
  cursor: pointer;
}
.friend-lobby button:disabled { opacity: .65; cursor: wait; }
.quick-match-actions { margin-bottom: .8rem; }
.lobby-count { margin: 0 0 .75rem; }
.quick-match-actions button + button { margin-left: .25rem; }
#cancelMatch, #friendAction { background: #103d2e; color: #fff2c5; }
#matchStatus { margin: .55rem 0 0; color: #ffe9a9; }
#matchStatus:empty { margin: 0; }
#friendError { color: #ffe9a9; }
#friendError:empty { margin: 0 0 1rem; }