.lobby-panel {
  padding: 14px;
  margin-block: 14px;
  border: 1px solid #6b5737;
  background: linear-gradient(#1b1713d9, #0d0c0be8);
  box-shadow:
    inset 0 0 0 2px #080706,
    inset 0 0 30px #0006;
}
.lobby-panel-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.lobby-panel-heading h3 {
  margin: 0;
  color: #cdb584;
  font: 19px var(--heading);
}
.lobby-panel-heading h3 small {
  color: #948363;
  font: 12px var(--body);
  margin-left: 8px;
}
.lobby-panel .lobby-destination {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 14px 0 0;
}
.lobby-destination label {
  grid-column: span 2;
}
.lobby-destination label:first-child {
  grid-column: span 2;
}
.lobby-destination label:nth-child(2) {
  grid-column: span 2;
}
.lobby-destination .lobby-ranked {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: end;
  gap: 8px;
  min-height: 42px;
  color: #cfb584;
}
.lobby-ranked input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: #b6975c;
}
.lobby-panel .lobby-details {
  margin: 0;
}
.lobby-settings-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  margin-bottom: 0;
}
.lobby-settings-summary dt {
  font-size: 11px;
  color: #9b8968;
}
.lobby-settings-summary dd {
  margin: 4px 0 0;
  color: #d3bd93;
  text-transform: capitalize;
}
.member-identity {
  display: flex;
  align-items: center;
  gap: 9px;
}
.member-role {
  width: 25px;
  height: 25px;
  flex: none;
  fill: #3b2e18;
  stroke: #c1a46b;
  stroke-width: 1.6;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px #000);
}
.lobby-dialog .room-members article.lobby-member {
  padding: 12px 10px;
  gap: 10px;
}
.lobby-dialog .room-members {
  max-height: min(43dvh, 480px);
  overflow-y: auto;
  scrollbar-color: #806741 #14100c;
  scrollbar-width: thin;
}
.risk-action-row {
  display: flex;
  justify-content: center;
  padding: 4px 0 15px;
}
.risk-action-row .risk-button {
  width: min(310px, 85%);
  min-height: 44px;
}
.risk-card-help {
  text-align: center;
  padding-inline: 10px;
  margin: 0 auto 12px;
}
.character-stat-scroll {
  scrollbar-width: thin;
  scrollbar-color: #967a4d #16110d;
}
.character-stat-scroll::-webkit-scrollbar {
  width: 10px;
}
.character-stat-scroll::-webkit-scrollbar-track {
  background: #16110d;
  box-shadow: inset 0 0 0 1px #493c27;
}
.character-stat-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #493822, #b69b67, #675037);
  border: 2px solid #1f1810;
  border-radius: 0;
}
body.identifying-item,
body.identifying-item * {
  cursor: var(--d2-cursor-identify, crosshair) !important;
}
.identifying-item.identify-valid .grid-item:hover {
  outline: 1px solid #d7bd85;
  outline-offset: -2px;
  filter: brightness(1.15);
}
.masthead .account-actions,
.masthead .header-actions {
  position: relative;
  padding-bottom: 80px;
}
.masthead .camp-companion {
  position: absolute;
  top: 39px;
  left: 0;
  width: 80px;
  height: 80px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-image: none;
  background: none;
  box-shadow: none;
  transform: none;
  filter: none;
}
.masthead .companion-tyrael {
  left: auto;
  right: -24px;
  width: 210px;
}
.camp-companion canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.masthead .camp-companion:hover canvas,
.masthead .camp-companion.npc-reacting canvas {
  filter: drop-shadow(0 0 5px #d4b27473);
}
.masthead .camp-companion:focus-visible {
  outline: 1px solid #c9ac76;
  outline-offset: 0;
}
@media (max-width: 650px) {
  .lobby-panel .lobby-destination {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lobby-destination label,
  .lobby-destination label:first-child,
  .lobby-destination label:nth-child(2) {
    grid-column: auto;
  }
  .lobby-panel {
    padding: 10px;
  }
  .masthead .companion-tyrael {
    width: 170px;
    right: -12px;
  }
}
@media (min-width: 2200px) and (min-height: 1200px) {
  .masthead .account-actions,
  .masthead .header-actions {
    padding-bottom: 104px;
  }
  .masthead .camp-companion {
    top: 48px;
    width: 100px;
    height: 100px;
  }
  .masthead .companion-tyrael {
    width: 260px;
    left: auto;
    right: -22px;
  }
  .lobby-dialog {
    width: min(1500px, 85vw);
  }
}

@media (min-width: 3200px) and (min-height: 1800px) {
  .masthead .account-actions,
  .masthead .header-actions {
    padding-bottom: 142px;
  }
  .masthead .camp-companion {
    top: 64px;
    width: 140px;
    height: 140px;
  }
  .masthead .companion-tyrael {
    width: 340px;
    right: -28px;
  }
}