@font-face {
  font-family: Hub Nunito;
  src: url('/assets/fonts/nunito.ttf') format('truetype');
  font-weight: 200 1000;
  font-display: swap;
}
body.drawing-session-active {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: #051a23;
}
body.drawing-session-active > :not(#drawing-session-root) {
  display: none !important;
}
#drawing-session-root {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
}
#drawing-session-root:not(.drawing-app) {
  background: #051a23;
}
/* Reference: the four approved individual mockups. The frame alone is expanded
   to the user's requested full viewport below the navigation. */
.section-overlay {
  --ui-ink: #fff0dc;
  --ui-muted: #b3d0df;
  --ui-cyan: #43deed;
  --ui-border: #456879;
  --ui-gold: #ffc070;
  font-family: 'Hub Nunito', 'Segoe UI', sans-serif;
  font-size: clamp(15px, 1.12vw, 20px);
  line-height: 1.45;
}
dialog.section-overlay,
#account-dialog.section-overlay {
  padding: clamp(24px, 2vw, 34px);
  border: 1px solid var(--ui-gold);
  border-radius: 26px;
  background:
    radial-gradient(ellipse at 32% 8%, #10394755, transparent 70%),
    linear-gradient(118deg, #092734, #05202d 78%);
  box-shadow: 0 24px 70px #0008;
  color: var(--ui-ink);
}
dialog.section-overlay[open] {
  gap: 20px;
}
.section-overlay h2,
.section-overlay h3,
.section-overlay strong {
  font-weight: 800;
  letter-spacing: -0.025em;
}
.section-overlay h3 {
  font-size: clamp(23px, 1.9vw, 32px);
  line-height: 1.15;
}
.section-overlay .overlay-heading h2,
#account-dialog.section-overlay .account-heading h2 {
  font-size: clamp(38px, 3.3vw, 56px);
  font-weight: 950;
  line-height: 1;
  gap: 22px;
  letter-spacing: -0.025em;
}
.section-overlay .overlay-heading h2 svg,
#account-dialog.section-overlay .account-heading h2 svg {
  width: 1em;
  height: 1em;
  color: var(--ui-cyan);
}
#lobby-dialog .overlay-heading h2 svg {
  color: var(--ui-gold);
}
.heading-copy {
  min-width: 0;
}
.overlay-subtitle {
  color: var(--ui-muted);
  font-size: clamp(18px, 1.4vw, 23px);
  margin: 8px 0 0 1px;
  padding-left: calc(clamp(38px, 3.3vw, 56px) + 22px);
  display: flex;
  align-items: center;
  gap: 12px;
}
.overlay-subtitle:empty {
  display: none;
}
.overlay-subtitle .icon-label {
  gap: 10px;
}
.overlay-close,
.section-overlay .overlay-close {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 8px;
  flex-shrink: 0;
  background: transparent;
  box-shadow: none;
  border: 1px solid transparent;
  color: #c8e1f0;
  border-radius: 8px;
  align-self: flex-start;
}
.overlay-close svg {
  width: 28px;
  height: 28px;
}
.section-overlay button {
  font-size: inherit;
  font-weight: 700;
  border-width: 1px;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 13px;
  box-shadow: none;
}
.section-overlay button:hover:not(:disabled) {
  filter: brightness(1.1);
}
.section-overlay .primary {
  background: linear-gradient(110deg, #ffc576, #ffad59);
  color: #12222b;
  border-color: #ffce97;
}
#confirm-join {
  color: #12222b;
}
.section-overlay .secondary {
  background: linear-gradient(110deg, #56e4ed, #29c8db);
  color: #03212e;
  border-color: #76f5fb;
}
.section-overlay .quiet {
  background: linear-gradient(110deg, #0b3345, #092838);
  color: #d9edf5;
  border-color: var(--ui-border);
}
.section-overlay input,
.section-overlay select {
  font: inherit;
  padding: 13px 18px;
  border-color: #5b8595;
  background: linear-gradient(110deg, #123543, #082432);
  color: #eef8fb;
  border-radius: 13px;
}
.section-overlay input::placeholder {
  color: #88a9bb;
  opacity: 1;
}
.section-overlay button:disabled {
  cursor: not-allowed;
}
.section-overlay .surface {
  background: #09283780;
  border-color: var(--ui-border);
}
.icon-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.icon-label > svg {
  width: 1.3em;
  height: 1.3em;
  flex-shrink: 0;
}
.section-overlay .tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px;
  border-radius: 18px;
  background: #173f50;
  color: #c0e6f3;
  font-size: 0.82em;
  font-weight: 700;
}
.cover-image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
}
.search-field {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}
.search-field > svg {
  position: absolute;
  left: 18px;
  width: 23px;
  height: 23px;
  color: #c9e8f6;
  pointer-events: none;
}
.search-field > input {
  width: 100%;
  padding-left: 54px;
}
.section-overlay .empty-state {
  color: var(--ui-muted);
  font-size: 0.95em;
  padding: 24px 4px;
}
.section-overlay .is-online {
  color: #3be1a0;
}
.muted {
  color: var(--ui-muted);
}
.portrait-wrap {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
}
.portrait-wrap .account-avatar {
  width: 58px;
  height: 58px;
  flex-basis: 58px;
  border: 1px solid #ffc070;
}
.presence-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid #103645;
  border-radius: 50%;
  right: -1px;
  bottom: 1px;
  background: #8ca2b1;
}
.presence-dot.online {
  background: #27db91;
}
.section-overlay .text-button {
  background: none;
  border-color: transparent;
  color: #b5d9e9;
  padding: 8px 0;
  justify-content: flex-start;
}
.section-overlay .text-button:hover {
  color: var(--ui-cyan);
}
.section-overlay .inline-copy {
  background: none;
  border: 0;
  padding: 2px;
  width: 26px;
  min-height: 26px;
  color: #bdd9e7;
}
.inline-copy svg {
  width: 20px;
  height: 20px;
}
.action-menu {
  position: relative;
  flex-shrink: 0;
}
.action-menu > summary {
  list-style: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #396678;
  border-radius: 10px;
  cursor: pointer;
  color: #86e1ef;
}
.action-menu > summary::-webkit-details-marker {
  display: none;
}
.action-menu svg {
  width: 23px;
  height: 23px;
}
.action-menu-body {
  position: fixed;
  z-index: 1000;
  visibility: hidden;
  min-width: 225px;
  max-width: calc(100vw - 24px);
  max-height: min(320px, calc(100dvh - 24px));
  overflow-y: auto;
  padding: 8px;
  background: #082632;
  border: 1px solid #7bb1c8;
  border-radius: 12px;
  box-shadow: 0 8px 30px #0008;
}
.section-overlay .menu-action {
  width: 100%;
  min-height: 40px;
  text-align: left;
  background: transparent;
  color: #d5ecf4;
  border: 0;
  padding: 8px 10px;
}
.section-overlay .menu-action:hover {
  background: #1a4655;
}
/* Collection: three covers, independent favorite controls and an unframed fiche. */
.collection-toolbar {
  gap: 14px;
  margin-bottom: 24px;
}
.collection-toolbar .search-field {
  flex: 1;
}
.collection-toolbar button {
  border-radius: 30px;
  min-width: 100px;
  padding: 12px 22px;
}
.collection-toolbar .quiet[aria-pressed='true'] {
  color: #0b2530;
  background: #ffbc68;
  border-color: #ffcb8a;
}
.collection-workspace {
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
  gap: 26px;
  overflow: auto;
  align-items: stretch;
}
.catalog-grid {
  gap: 18px;
  align-content: start;
  padding-top: 6px;
}
.catalog-tile {
  position: relative;
  min-width: 0;
}
.section-overlay .catalog-card {
  padding: 0;
  border: 1px solid #64808a;
  border-radius: 17px;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(#193747, #142c39);
  display: block;
}
.catalog-card .cover-image {
  height: clamp(180px, 28vh, 380px);
}
.section-overlay .catalog-card[aria-pressed='true'] {
  border: 2px solid #ffb252;
  box-shadow: 0 0 0 3px #ffc1701c;
}
.catalog-card strong {
  font-size: clamp(20px, 1.5vw, 26px);
  padding: 17px 15px 9px;
}
.game-availability {
  padding: 0 15px 20px;
  color: #bad6e6;
  font-size: 0.95em;
}
.section-overlay .card-star {
  position: absolute;
  right: 12px;
  top: 12px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-height: 40px;
  border-radius: 50%;
  background: #072c42;
  border: 0;
  padding: 8px;
  color: #d0e9f4;
}
.card-star[aria-pressed='true'] {
  color: #ffc170;
}
.card-star[aria-pressed='true'] svg {
  fill: #ffc170;
}
.game-detail.surface {
  background: none;
  border: 0;
  border-left: 1px solid #648392;
  border-radius: 0;
  padding: 0 0 0 26px;
  gap: 10px;
}
.game-detail .detail-cover {
  height: clamp(120px, 17vh, 220px);
  border-radius: 14px;
  flex-shrink: 0;
}
.game-detail h3 {
  margin: 0;
  font-size: clamp(26px, 2vw, 36px);
}
.game-detail .game-tagline {
  color: #c9e4ef;
  line-height: 1.35;
}
.game-metadata {
  display: flex;
  gap: 18px;
  align-items: center;
  color: #cee9f4;
  padding: 6px 0 18px;
  border-bottom: 1px solid #4f7181;
}
.game-metadata > .icon-label svg {
  color: var(--ui-cyan);
}
.game-description {
  font-size: 0.88em;
  color: #c6e0eb;
  line-height: 1.45;
  margin: 8px 0 4px;
}
.section-overlay .unavailable-game {
  background: #677b83;
  color: #193744;
  opacity: 0.8;
  border: 0;
  min-height: 44px;
}
.game-detail button:last-child {
  color: #6fe5f4;
  border-color: #4dcbdf;
  min-height: 44px;
}
.collection-footer,
.join-footer,
.room-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  border-top: 1px solid #476574;
  padding-top: 18px;
  margin: 0;
}
.room-actions {
  padding: 18px 4px 6px;
}
.collection-footer > button,
.join-footer > button:last-child {
  margin-left: auto;
}
.collection-footer {
  color: var(--ui-muted);
}
.collection-footer button {
  min-width: 140px;
  justify-content: center;
}
/* Lobby: no framed overview card; image/options left and roster/invitations right. */
#room-body {
  gap: 20px;
  width: min(1800px, 100%);
  margin-inline: auto;
}
.lobby-workspace {
  grid-template-columns: minmax(0, 1fr) minmax(430px, 560px);
  gap: 26px;
}
.lobby-overview {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 0;
  background: none;
  min-width: 0;
  min-height: 0;
}
.lobby-cover {
  height: clamp(130px, 21vh, 250px);
  min-height: 105px;
  max-height: 250px;
  flex: 1 1 auto;
  object-fit: cover;
  border-radius: 14px;
}
.lobby-game-title {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  flex: 0 0 auto;
  margin-top: 14px;
}
.lobby-overview .lobby-game-title h3 {
  margin: 0;
  font-size: clamp(26px, 2vw, 34px);
}
.lobby-game-title .tag {
  border: 1px solid #39788e;
  color: #9cdaee;
  background: #0d3545;
}
.lobby-overview > p {
  flex: 0 0 auto;
  margin: 6px 0 0;
  line-height: 1.5;
}
.lobby-options {
  flex: 0 0 auto;
  border-top: 1px solid #3d6575;
  margin-top: 20px;
  padding: 16px 1px 2px;
}
.lobby-options > h3 {
  margin: 0 0 16px;
  font-size: 25px;
}
.lobby-options h3 svg {
  color: #b8dcef;
}
.option-fields {
  border: 2px solid #4e7586;
  border-radius: 14px;
  padding: 0 14px;
  margin: 0 1px 1px;
  box-shadow: inset 0 0 0 1px #183f50;
}
.option-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  min-height: 58px;
}
.option-row + .option-row {
  border-top: 1px solid #315566;
}
.option-row > .icon-label {
  font-size: 0.9em;
  color: #c7e0ed;
}
.option-row > .icon-label svg {
  width: 24px;
  height: 24px;
  color: #a2c4dc;
  margin-right: 10px;
}
.option-row select,
.option-row button {
  width: 100%;
  padding: 8px 14px;
  min-height: 42px;
  font-size: 0.92em;
}
.code-copy .icon-label {
  flex-direction: row-reverse;
  justify-content: space-between;
  width: 100%;
  font-weight: 500;
}
.option-row .code-copy {
  border: 2px solid #527e91;
  background: #0d303e;
  box-shadow: inset 0 0 0 1px #234e5f;
}
.lobby-members {
  padding: 0 0 0 26px;
  border-left: 1px solid #325465;
  min-width: 0;
}
.lobby-members h3 {
  font-size: 25px;
  margin: 0 0 12px;
}
.lobby-members h3 svg {
  color: #74deeb;
}
.lobby-members .members {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(58px, auto);
  align-content: start;
  gap: 8px;
  margin: 0;
}
.lobby-members .members .lobby-member {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 14px;
  border: 1px solid #345d71;
  border-radius: 15px;
  background: #08293677;
  padding: 8px 12px;
  min-height: 58px;
  margin: 0;
}
.lobby-member .member-identity {
  flex: 0 1 auto;
  min-width: 0;
}
.lobby-members .members .member-identity {
  flex: 0 1 auto;
}
.lobby-member strong {
  display: block;
  overflow: hidden;
  font-size: clamp(16px, 1.25vw, 20px);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-state {
  display: grid;
  flex: 0 0 auto;
  gap: 1px;
  margin-left: auto;
  font-size: 0.72em;
  line-height: 1.15;
  text-align: right;
  min-width: 54px;
}
.member-role {
  gap: 4px;
  justify-content: flex-end;
  color: #ffbd68;
  font-size: 0.92em;
}
.member-role svg {
  width: 1.05em;
  height: 1.05em;
}
.member-readiness {
  color: #b3d0df;
}
.lobby-member .action-menu {
  margin-left: auto;
}
.host-status {
  color: #ffbd68;
}
.lobby-invite-picker {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #3a5e6e;
}
.lobby-invite-picker > h3 {
  margin-bottom: 10px;
}
.lobby-invite-picker .search-field input {
  height: 44px;
  font-size: 0.85em;
}
.invite-friend-list {
  display: grid;
  align-content: start;
  gap: 8px;
  margin-top: 8px;
  padding-right: 6px;
  scrollbar-color: #527e91 #082936;
  scrollbar-width: thin;
}
.invite-friend-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid #365d6e;
  border-radius: 12px;
  background: #0a2b3899;
}
.invite-friend-row .friend-identity {
  min-width: 0;
}
.invite-friend-row .account-avatar {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
}
.invite-friend-copy {
  min-width: 0;
}
.invite-friend-copy strong,
.invite-friend-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.invite-friend-copy small {
  margin-top: 2px;
  color: #91aebb;
  font-size: 0.72em;
}
.invite-friend-copy small.is-online {
  color: #5be2ba;
}
.invite-friend-row button {
  padding: 7px 12px;
  min-height: 40px;
  min-width: 112px;
}
.room-actions .danger {
  color: #ff8387;
  border: 2px solid #e76b73;
  background: #342b3b55;
  background-clip: padding-box;
  box-shadow: none;
  margin: 0 auto 0 0;
}
.room-actions .danger:hover:not(:disabled),
.room-actions .danger:focus-visible {
  border-color: #ff9296;
  box-shadow: none;
  filter: none;
}
.room-actions button:last-child {
  margin: 0;
  min-width: 190px;
  color: #102431;
}

.room-game-trigger {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  text-align: left;
}
.room-game-trigger-cover {
  width: 38px;
  height: 32px;
  border-radius: 7px;
}
.room-game-trigger > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.room-game-trigger > svg {
  width: 18px;
  height: 18px;
  color: #8dc6d8;
}

#room-game-dialog .overlay-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.room-game-picker-hint {
  margin: 0 auto 18px;
  width: min(1050px, 100%);
  font-size: 1.05em;
}
.room-game-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  width: min(1050px, 100%);
  margin: auto;
}
.section-overlay .room-game-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  padding: 10px;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  border: 1px solid #456879;
  background: #082936cc;
  color: var(--ui-ink);
  text-align: left;
}
.section-overlay .room-game-card:hover:not(:disabled) {
  border-color: #62dce8;
  filter: none;
  transform: translateY(-2px);
}
.section-overlay .room-game-card[aria-pressed='true'] {
  border-color: #ffc070;
  box-shadow: inset 0 0 0 2px #ffc070;
}
.room-game-card .cover-image {
  aspect-ratio: 4 / 3;
  height: auto;
  border-radius: 10px;
}
.room-game-card-copy {
  display: grid;
  gap: 3px;
  padding: 0 4px 4px;
}
.room-game-card-copy strong {
  font-size: clamp(19px, 1.6vw, 25px);
}
.room-game-card-copy > span {
  color: var(--ui-muted);
  font-size: 0.85em;
}
.selected-game {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #071d28e8;
  color: #ffc070;
  font-size: 0.72em;
}

.shop-workspace {
  display: grid;
  place-items: center;
  overflow: hidden;
}
.shop-preview {
  display: grid;
  place-items: center;
  width: min(780px, 100%);
  min-height: min(420px, 58vh);
  text-align: center;
  background:
    linear-gradient(#082936d9, #082936f2),
    url('/assets/covers/board.png') center / cover;
}
.shop-preview-copy {
  display: grid;
  justify-items: center;
  gap: 18px;
  max-width: 560px;
}
.shop-preview-copy h3 {
  margin: 0;
  font-size: clamp(28px, 3vw, 46px);
}
.shop-preview-copy p {
  margin: 0;
  font-size: 1.05em;
}
/* Join: framed inbox, inline verification, illustrated room preview and footer. */
.join-workspace {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 18px;
  align-content: start;
  align-items: start;
  grid-auto-rows: max-content;
}
.join-footer:has(#confirm-join[hidden]) {
  display: none;
}
.join-workspace > .surface {
  width: 100%;
  min-height: 0;
  padding: 24px;
}
.join-workspace h3 {
  font-size: 27px;
  margin-bottom: 24px;
}
.join-inbox h3 {
  display: flex;
  align-items: center;
  gap: 14px;
}
.join-inbox .count-badge {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #3ff1eb;
  color: #002a36;
  font-weight: 900;
}
.join-entry #join-form {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 0 0 22px;
}
.join-entry #join-form .input-shell {
  height: 64px;
  flex: 1;
  min-width: 0;
}
.join-entry #join-form .input-shell > svg,
.join-entry #join-form .input-shell::after {
  display: none;
}
.join-entry #join-form input {
  padding: 12px 22px;
  height: 64px;
  font-size: 24px;
  border-color: #5de0ed;
}
.join-entry #join-form > button {
  min-width: 140px;
  min-height: 64px;
  margin: 0;
  padding: 12px 22px;
}
.join-entry #join-form > button > svg {
  display: none;
}
.join-preview.surface {
  display: grid;
  grid-template-columns: minmax(220px, 0.82fr) minmax(0, 1fr);
  padding: 16px;
  gap: 22px;
  margin: 0;
  border-radius: 16px;
  align-items: start;
}
.join-preview-cover {
  border-radius: 14px;
  aspect-ratio: 3 / 2;
  min-height: 0;
  height: auto;
}
.join-preview-copy {
  padding: 10px 0;
}
.join-preview-copy h3 {
  font-size: 30px;
  margin: 14px 0 10px;
}
.join-preview-copy > p {
  font-size: 23px;
  color: #c3e0ec;
  margin-bottom: 10px;
}
.join-preview-copy > .room-switch-warning {
  margin: 18px 0 0;
  padding: 11px 13px;
  border: 1px solid rgba(255, 151, 92, 0.52);
  border-radius: 10px;
  background: rgba(136, 56, 25, 0.2);
  color: #ffd8c0;
  font-size: 15px;
  line-height: 1.45;
}
.join-preview-copy > .icon-label {
  color: #c8e5ee;
}
.join-preview-copy > .found-status {
  color: #39dc88;
  font-weight: 800;
}
.found-status > svg {
  background: #26d880;
  color: #062c22;
  border-radius: 50%;
  padding: 4px;
  width: 32px;
  height: 32px;
}
.preview-members {
  gap: 14px;
  margin: 22px 0 0;
}
.preview-person {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 0.8em;
  font-weight: 800;
}
.preview-person .account-avatar {
  width: 58px;
  height: 58px;
}
.join-entry .sharing-help {
  font-size: 0.8em;
  color: #89aabb;
  margin-top: 16px;
}
.section-overlay .room-invitation {
  display: grid;
  grid-template-columns: minmax(132px, 0.72fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  border: 1px solid #487083;
  border-radius: 17px;
  background: linear-gradient(120deg, #123b4a99, #08263288);
  padding: 16px;
  margin: 16px 0;
}
.invitation-cover {
  border-radius: 12px;
  aspect-ratio: 3 / 2;
  min-height: 0;
  height: auto;
  align-self: center;
}
.invitation-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  min-width: 0;
}
.invitation-content .friend-identity strong {
  font-size: 20px;
}
.invitation-content .account-avatar {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
}
.invitation-sender {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.invitation-sender small {
  color: #a9c9d8;
  line-height: 1.25;
}
.invitation-room-info {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #365d6e;
  border-radius: 11px;
  background: #061f2b88;
}
.invitation-room-info h4 {
  margin: 0 0 5px;
  color: #fff0dc;
  font-size: 1.05em;
  line-height: 1.2;
}
.invitation-room-info .icon-label {
  color: #b7d8e4;
  font-size: 0.84em;
}
.invitation-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 2px;
}
.section-overlay .invitation-actions button {
  min-height: 42px;
  padding: 9px 13px;
  font-size: 0.84em;
}
.section-overlay .invitation-view {
  flex: 1;
  min-width: 0;
}
.invitation-content .invitation-decline {
  color: #ffc5c7;
  border-color: #81555d;
}
#confirm-join {
  min-width: 320px;
  color: #12222b;
  font-size: 23px;
  min-height: 58px;
}
/* Friends: flat navigation, selected row, unframed public profile. */
#account-dialog.section-overlay .account-body {
  gap: 0;
}
.friends-workspace {
  grid-template-columns: minmax(150px, 0.65fr) minmax(0, 1.5fr) minmax(
      260px,
      1fr
    );
  gap: 22px;
  border-top: 1px solid #436576;
  padding-top: 16px;
}
#friend-navigation {
  gap: 6px;
  padding-right: 16px;
  border-right: 1px solid #64808e;
}
#friend-navigation button {
  background: transparent;
  border-color: transparent;
  border-radius: 13px;
  padding: 14px;
  gap: 16px;
  font-size: 20px;
  justify-content: flex-start;
}
#friend-navigation button > svg {
  width: 28px;
  height: 28px;
  color: #9fc8df;
}
#friend-navigation .count-badge {
  margin-left: auto;
  color: #d9edf6;
}
#friend-navigation button[aria-pressed='true'] {
  border-color: #62d6e4;
  background: linear-gradient(90deg, #154b60, #0b304055);
  box-shadow: inset 4px 0 #4df2f0;
}
.friend-search {
  margin: 0 0 16px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.friend-search > label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.friend-search input,
.friend-search button {
  min-height: 50px;
}
.friend-center .friend-list {
  margin: 0;
}
.section-overlay .friend-select {
  padding: 12px 14px;
  border-color: transparent;
  border-bottom-color: #577888;
  border-radius: 0;
  background: none;
  margin: 0;
  gap: 12px;
}
.section-overlay .friend-select[aria-pressed='true'] {
  border: 2px solid #ffc070;
  border-radius: 16px;
  background: #0f354488;
}
.friend-select > svg {
  margin-left: auto;
  width: 24px;
  color: #c7e4ef;
}
.friend-select .friend-row {
  flex: 1;
}
.friend-select .friend-identity {
  gap: 14px;
}
.friend-select .friend-identity strong {
  font-size: 22px;
}
.friend-select .friend-identity small.is-online::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #24dc91;
  margin-right: 8px;
}

/* Consistent controls: interaction states stay inside the original footprint. */
.section-overlay button,
#account-dialog button {
  border-width: 1px;
}
.section-overlay .catalog-card[aria-pressed='true'],
.section-overlay .friend-select[aria-pressed='true'] {
  border-width: 1px;
  box-shadow: inset 0 0 0 1px var(--ui-gold);
}
.section-overlay button:focus-visible,
#account-dialog button:focus-visible,
.action-menu > summary:focus-visible {
  outline: 2px solid var(--button-hover-edge, var(--ui-gold));
  outline-offset: -3px;
}
.section-overlay .icon-label,
.section-overlay button > svg,
.section-overlay .action-menu > summary > svg {
  line-height: 1;
  align-self: center;
}
.section-overlay .icon-label > svg,
.section-overlay button > svg {
  flex: 0 0 auto;
}
.section-overlay .card-star .icon-label {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  gap: 0;
}
.section-overlay .card-star .icon-label > span:empty {
  display: none;
}
.section-overlay .card-star svg {
  width: 21px;
  height: 21px;
  margin: 0;
}

/* Native select menus need their own palette; inherited light text is unreliable. */
.section-overlay select,
#account-dialog select {
  color: #eef8fb;
  -webkit-text-fill-color: #eef8fb;
  color-scheme: dark;
}
.section-overlay select option,
.section-overlay select optgroup,
#account-dialog select option,
#account-dialog select optgroup {
  color: #eef8fb;
  -webkit-text-fill-color: #eef8fb;
  background: #082432;
}
.section-overlay select:disabled {
  color: #c6dce5;
  -webkit-text-fill-color: #c6dce5;
  opacity: 1;
}

/* Creation: a compact, content-led mockup instead of an almost empty full page. */
#create-room-dialog.section-overlay {
  inset: calc(var(--nav-height) + 20px) 20px 20px;
  width: min(980px, calc(100vw - 40px));
  max-width: 980px;
  height: min(580px, calc(100dvh - var(--nav-height) - 40px));
  max-height: calc(100dvh - var(--nav-height) - 40px);
  margin: auto;
  padding: clamp(22px, 2vw, 30px);
  overflow: hidden;
}
#create-room-dialog.section-overlay[open] {
  display: block;
}
.create-overlay #create-room-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  height: 100%;
  max-width: none;
  min-height: 0;
  overflow: hidden;
}
.create-overlay #create-room-form::before {
  content: none;
  display: none;
}
.create-room-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
  padding-right: 52px;
}
.create-room-heading-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border: 1px solid #a36b45;
  border-radius: 16px;
  color: var(--ui-gold);
  background: #4c32263d;
}
.create-room-heading-icon svg {
  width: 30px;
  height: 30px;
}
.create-overlay .create-room-heading h2 {
  padding: 0;
  margin: 1px 0 3px;
  font-size: clamp(32px, 2.7vw, 42px);
  line-height: 1;
}
.create-overlay .create-room-eyebrow {
  margin: 0;
  color: var(--ui-gold);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.create-overlay .create-room-subtitle {
  margin: 0;
  color: var(--ui-muted);
  font-size: 16px;
}
.create-room-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.92fr);
  gap: 24px;
  flex: 1;
  min-height: 0;
}
.create-room-visual {
  min-height: 0;
  border: 1px solid #765e4d;
  border-radius: 18px;
  background:
    linear-gradient(180deg, transparent 55%, #04151fb3),
    url('/assets/create-art.png') center / cover;
  box-shadow: inset 0 1px #ffffff12;
}
.create-room-settings {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 4px 0 0;
}
.create-room-settings-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.create-room-step {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  color: #082432;
  background: var(--ui-cyan);
  font-weight: 950;
}
.create-room-settings-title h3 {
  margin: 0 0 2px;
  font-size: 22px;
}
.create-room-settings-title p,
.create-room-control .field-help {
  margin: 0;
  color: var(--ui-muted);
  font-size: 13px;
  line-height: 1.35;
}
.create-room-control {
  padding: 16px;
  border: 1px solid var(--ui-border);
  border-radius: 15px;
  background: #09283780;
}
.create-overlay .create-room-control label {
  grid-column: auto;
  margin: 0 0 8px;
  color: #e4f2f7;
  font-size: 14px;
  font-weight: 800;
}
.create-overlay .create-room-control select {
  grid-column: auto;
  width: 100%;
  height: 50px;
  margin: 0 0 8px;
}
.create-room-summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 3px solid var(--ui-gold);
  border-radius: 8px;
  background: #071f2b;
}
.create-room-summary > svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: var(--ui-gold);
}
.create-room-summary strong {
  display: block;
  font-size: 15px;
}
.create-overlay .create-room-summary .hint {
  grid-column: auto;
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.35;
}
.create-overlay .dialog-actions {
  grid-column: auto;
  display: grid;
  grid-template-columns: auto minmax(170px, 1fr);
  gap: 10px;
  width: 100%;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--ui-border);
}
.create-overlay .dialog-actions button {
  min-height: 48px;
  justify-content: center;
}
.create-overlay > .overlay-close {
  top: 22px;
  right: 22px;
}

@media (max-height: 760px) and (min-width: 701px) {
  #create-room-dialog.section-overlay {
    height: min(520px, calc(100dvh - var(--nav-height) - 28px));
    max-height: calc(100dvh - var(--nav-height) - 28px);
    padding: 20px 24px;
  }
  .create-overlay #create-room-form {
    gap: 12px;
  }
  .create-room-heading-icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }
  .create-overlay .create-room-heading h2 {
    font-size: 32px;
  }
  .create-room-layout {
    gap: 18px;
  }
  .create-room-settings-title {
    margin-bottom: 10px;
  }
  .create-room-control {
    padding: 12px;
  }
  .create-room-summary {
    margin-top: 10px;
    padding: 9px 12px;
  }
  .create-overlay .dialog-actions {
    padding-top: 10px;
  }
}

@media (max-width: 700px) {
  #create-room-dialog.section-overlay {
    inset: var(--nav-height) 0 0;
    width: 100vw;
    max-width: none;
    height: calc(100dvh - var(--nav-height));
    max-height: none;
    padding: 18px;
    border-radius: 0;
  }
  .create-room-heading {
    gap: 12px;
    padding-right: 40px;
  }
  .create-room-heading-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border-radius: 12px;
  }
  .create-room-heading-icon svg {
    width: 24px;
    height: 24px;
  }
  .create-overlay .create-room-heading h2 {
    font-size: 29px;
  }
  .create-room-layout {
    display: flex;
    flex-direction: column;
  }
  .create-room-visual {
    display: none;
  }
  .create-room-settings {
    flex: 1;
  }
  .create-overlay > .overlay-close {
    top: 16px;
    right: 16px;
  }
}

/* Settings use horizontal control rows so the complete form fits one viewport. */
@media (min-width: 651px) {
  #account-dialog[data-screen='settings'] .account-body form {
    display: grid;
    grid-template-columns: minmax(172px, 0.5fr) minmax(0, 1fr) 48px;
    align-items: center;
    gap: 10px 14px;
  }
  #account-dialog[data-screen='settings'] .account-body form > label {
    grid-column: 1;
    margin: 0;
  }
  #account-dialog[data-screen='settings'] #preferences-language {
    grid-column: 2 / 4;
    width: 100%;
  }
  #account-dialog[data-screen='settings'] input[type='range'] {
    grid-column: 2;
    height: 24px;
  }
  #account-dialog[data-screen='settings'] output {
    grid-column: 3;
    margin: 0;
    font-size: 13px;
    line-height: 1;
  }
  #account-dialog[data-screen='settings'] .check-setting,
  #account-dialog[data-screen='settings'] .settings-previews,
  #account-dialog[data-screen='settings'] .hint,
  #account-dialog[data-screen='settings'] button[type='submit'] {
    grid-column: 1 / -1;
  }
  #account-dialog[data-screen='settings'] .check-setting {
    min-height: 28px;
  }
  #account-dialog[data-screen='settings'] .settings-previews {
    margin-top: 2px;
  }
  #account-dialog[data-screen='settings'] .hint {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
  }
  #account-dialog[data-screen='settings'] button[type='submit'] {
    margin: 2px 0 0;
    min-height: 44px;
  }
}

@media (max-height: 620px) {
  .create-overlay #create-room-form {
    overflow: auto;
  }
}

@media (max-height: 800px) and (min-width: 651px) {
  #account-dialog:not(.section-overlay) {
    padding: 22px 28px;
  }
  #account-dialog:not(.section-overlay) .account-tabs {
    margin: 12px 0;
  }
  #account-dialog:not(.section-overlay) .account-body label {
    margin-top: 12px;
  }
  #account-dialog:not(.section-overlay) .settings-previews {
    margin-top: 14px;
  }
  #account-dialog:not(.section-overlay)
    .account-body
    form
    > button[type='submit'] {
    margin: 14px 0 0;
  }
}
.friend-detail.surface {
  border: 0;
  border-left: 1px solid #637f8f;
  border-radius: 0;
  background: none;
  padding: 20px 0 12px 24px;
}
.friend-detail > .friend-row {
  gap: 14px;
  padding: 0;
}
.friend-detail .account-avatar {
  width: clamp(125px, 12vw, 200px);
  height: clamp(125px, 12vw, 200px);
  flex-basis: clamp(125px, 12vw, 200px);
  border: 3px solid #55ddef;
  margin-bottom: 12px;
}
.friend-detail .friend-identity strong {
  font-size: 40px;
}
.friend-detail .friend-identity small {
  font-size: 19px;
}
.friend-detail .friend-identity small.is-online {
  margin-top: 12px;
}
.friend-detail .friend-identity small.is-online::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #2cdd96;
  margin-right: 10px;
}
.friend-detail .friend-identity {
  width: 100%;
  padding-bottom: 22px;
  border-bottom: 1px solid #426775;
}
.friend-detail .primary {
  min-height: 54px;
  margin-top: 10px;
}
.profile-actions {
  display: flex;
  gap: 14px;
  width: 100%;
}
.profile-actions > button {
  flex: 1;
  min-width: 0;
  color: #68e2f1;
  border-color: #65c9dc;
}
.profile-actions .action-menu > summary {
  height: 50px;
  width: 50px;
}
.friends-footer {
  border-top: 1px solid #486b7b;
  padding-top: 16px;
}
.friends-footer button {
  background: none;
  border: 0;
  color: #83dceb;
  font-weight: 500;
}
.friend-center .room-invitation {
  grid-template-columns: minmax(108px, 0.68fr) minmax(0, 1fr);
  padding: 13px;
  gap: 13px;
  font-size: 0.84em;
}
.friend-center .invitation-cover {
  min-height: 0;
  max-height: none;
}
.friend-center .invitation-content .portrait-wrap {
  display: none;
}
.friend-center .invitation-actions {
  grid-column: 1 / -1;
}
.friend-center #friends-list > h3 {
  padding-top: 14px;
  margin: 18px 0 8px;
  border-top: 1px solid #547381;
  font-size: 20px;
}
.public-profile-dialog {
  position: relative;
  width: min(480px, calc(100vw - 32px));
  text-align: center;
  background: #0c2d3a;
  overflow: visible;
}
.public-profile-dialog > *:not(.public-profile-close) {
  margin: 14px auto;
}
.public-profile-dialog .public-profile-close {
  min-height: 42px;
  margin-left: auto;
  margin-right: 0;
}
.public-profile-dialog .large-portrait {
  position: relative;
  display: block;
  width: 140px;
  height: 140px;
  flex: 0 0 140px;
}
.public-profile-dialog .account-avatar {
  width: 100%;
  height: 100%;
  min-width: 100%;
  flex: 0 0 100%;
  aspect-ratio: 1;
  border-width: 3px;
}
.public-profile-dialog .presence-dot {
  right: 7px;
  bottom: 8px;
  width: 20px;
  height: 20px;
}
.public-profile-dialog .public-player-id {
  color: #b6d4e1;
  font-variant-numeric: tabular-nums;
}

/* The guest choice is one coherent action row instead of two offset rows. */
#profile-dialog {
  width: min(720px, calc(100vw - 32px));
  max-width: 720px;
  overflow: hidden;
}
#profile-form {
  display: flex;
  flex-direction: column;
}
#profile-form .guest-dialog-actions {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  align-items: stretch;
  gap: 12px;
  margin-top: 28px;
}
#profile-form .guest-dialog-actions button {
  min-height: 54px;
  margin: 0;
  justify-content: center;
}
#guest-login {
  min-width: 0;
}
@media (max-width: 650px) {
  #profile-dialog {
    padding: 24px;
  }
  #profile-form .guest-dialog-actions {
    grid-template-columns: 1fr 1fr;
    margin-top: 22px;
  }
  #guest-login {
    grid-column: 1 / -1;
  }
}
@media (max-width: 850px) {
  #social-body > .social-alert {
    display: grid;
    min-height: 46px;
    margin-top: 4px;
    padding: 7px 10px;
  }
  #social-body > .social-alert .social-alert-copy small {
    display: none;
  }
  #social-body > .social-alert .request-count-badge {
    min-width: 22px;
    height: 22px;
  }
}
@media (max-height: 800px) and (min-width: 1000px) {
  dialog.section-overlay,
  #account-dialog.section-overlay {
    padding: 24px 30px;
  }
  dialog.section-overlay[open] {
    gap: 18px;
  }
  .section-overlay .overlay-heading h2,
  #account-dialog.section-overlay .account-heading h2 {
    font-size: 46px;
  }
  .overlay-subtitle {
    font-size: 20px;
    padding-left: 68px;
  }
  .lobby-cover {
    height: 145px;
  }
  .lobby-members .members .lobby-member {
    min-height: 58px;
    padding: 5px 10px;
  }
  .lobby-member .account-avatar {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }
  .lobby-options {
    margin-top: 14px;
    padding-top: 12px;
  }
  .option-row {
    min-height: 48px;
    padding: 5px 0;
  }
  .lobby-options > h3 {
    margin-bottom: 8px;
  }
  .invite-friend-row {
    padding: 6px 8px;
  }
  .lobby-invite-picker {
    margin-top: 12px;
    padding-top: 10px;
  }
  .game-detail .detail-cover {
    height: 135px;
  }
  .catalog-card .cover-image {
    height: 240px;
  }
  .game-detail {
    gap: 8px;
  }
  .collection-toolbar {
    margin-bottom: 16px;
  }
  .join-preview-cover {
    min-height: 0;
    max-height: none;
  }
  .join-workspace h3 {
    margin-bottom: 16px;
  }
}

/* Compact transient notices; the richer notification history has its own panel. */
#notice[popover] {
  pointer-events: none;
  max-width: min(430px, calc(100vw - 40px));
  padding: 14px 18px 14px 48px;
  color: #e9f8fb;
  text-align: left;
  line-height: 1.35;
  border: 1px solid #4d7a8d;
  border-radius: 14px;
  background:
    radial-gradient(circle at 12% 0%, #1b54636b, transparent 48%), #071f2bea;
  box-shadow: 0 16px 44px #00121bb8;
  animation: notice-enter 180ms ease-out;
}
#notice[popover]::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 50%;
  width: 12px;
  height: 12px;
  border: 3px solid #52e1ec;
  border-radius: 50%;
  box-shadow: 0 0 0 5px #52e1ec20;
  transform: translateY(-50%);
}
#notice[popover][data-tone='success'] {
  border-color: #397f70;
}
#notice[popover][data-tone='success']::before {
  border-color: #54dfb5;
  box-shadow: 0 0 0 5px #54dfb520;
}
#notice[popover][data-tone='error'] {
  border-color: #9a555d;
}
#notice[popover][data-tone='error']::before {
  border-color: #ff7f86;
  box-shadow: 0 0 0 5px #ff7f8620;
}
@keyframes notice-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
body:has(dialog[open]) #notice[popover] {
  bottom: 142px;
}
@media (max-width: 700px) {
  body:has(dialog[open]) #notice[popover] {
    right: 12px;
    bottom: 96px;
    left: 12px;
    max-width: none;
  }
}
@media (max-width: 999px) {
  .section-overlay {
    font-size: 15px;
  }
  .section-overlay .overlay-heading h2,
  #account-dialog.section-overlay .account-heading h2 {
    font-size: 38px;
  }
  .overlay-subtitle {
    font-size: 18px;
    padding-left: 60px;
  }
  .section-overlay h3 {
    font-size: 23px;
  }
  .friends-workspace {
    grid-template-columns: 170px 1fr;
  }
  .friend-detail.surface {
    grid-column: 2;
  }
  #friend-navigation {
    grid-row: 1 / 3;
  }
  .lobby-workspace {
    grid-template-columns: 1fr;
  }
  .lobby-members {
    padding: 20px 0 0;
    border: 0;
    border-top: 1px solid #436573;
  }
  .lobby-cover {
    height: 220px;
  }
  .collection-workspace {
    grid-template-columns: 1.4fr 1fr;
  }
  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .catalog-card .cover-image {
    height: 210px;
  }
  .join-workspace {
    grid-template-columns: 1fr;
  }
  .join-entry {
    order: -1;
  }
}
@media (max-width: 650px) {
  dialog.section-overlay,
  #account-dialog.section-overlay {
    padding: 18px;
    border-radius: 0;
  }
  .section-overlay .overlay-heading h2,
  #account-dialog.section-overlay .account-heading h2 {
    font-size: 30px;
    gap: 12px;
  }
  .overlay-subtitle {
    padding-left: 0;
    font-size: 16px;
    margin-top: 10px;
  }
  .lobby-members .members,
  .room-game-grid {
    grid-template-columns: 1fr;
  }
  .section-overlay .overlay-close {
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 4px;
  }
  .collection-toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }
  .collection-toolbar .search-field {
    flex-basis: 100%;
  }
  .collection-toolbar button {
    min-width: 0;
    font-size: 13px;
    padding: 8px 12px;
    min-height: 38px;
  }
  .collection-workspace {
    grid-template-columns: 1fr;
  }
  .catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .catalog-card .cover-image {
    height: 150px;
  }
  .catalog-card strong {
    font-size: 15px;
    padding: 10px 6px 6px;
  }
  .game-availability {
    font-size: 11px;
    padding: 0 6px 10px;
    gap: 4px;
  }
  .section-overlay .card-star {
    top: 6px;
    right: 6px;
    width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 6px;
  }
  .game-detail.surface {
    border: 0;
    padding: 20px 0;
  }
  .game-detail .detail-cover {
    height: 180px;
  }
  .collection-footer {
    padding-top: 10px;
  }
  .collection-footer button {
    min-height: 38px;
    padding: 8px 16px;
  }
  .join-workspace > .surface {
    padding: 14px;
  }
  .join-workspace h3 {
    font-size: 21px;
  }
  .join-entry #join-form {
    flex-wrap: wrap;
    gap: 10px;
  }
  .join-entry #join-form .input-shell {
    flex-basis: 100%;
  }
  .join-entry #join-form input {
    font-size: 18px;
  }
  .join-entry #join-form > button {
    min-height: 44px;
    margin-left: auto;
  }
  .join-preview.surface {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .join-preview-cover {
    min-height: 0;
    height: auto;
  }
  .join-preview-copy h3 {
    font-size: 26px;
  }
  .join-preview-copy > p {
    font-size: 19px;
  }
  #confirm-join {
    min-width: 0;
    min-height: 48px;
    font-size: 17px;
  }
  .join-footer {
    gap: 8px;
  }
  .section-overlay .room-invitation {
    grid-template-columns: minmax(110px, 32%) minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }
  .invitation-content .friend-identity strong {
    font-size: 18px;
  }
  .friends-workspace {
    display: flex;
    flex-direction: column;
    min-height: auto;
  }
  #friend-navigation {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0 0 12px;
    border: 0;
    border-bottom: 1px solid #4d7284;
  }
  #friend-navigation button {
    font-size: 13px;
    min-height: 40px;
    padding: 6px 8px;
    gap: 6px;
  }
  #friend-navigation button svg {
    width: 18px;
    height: 18px;
  }
  .friend-detail.surface {
    padding: 20px 0;
    border: 0;
  }
  .friend-select .friend-identity strong {
    font-size: 19px;
  }
  .lobby-cover {
    height: 180px;
  }
  .lobby-members .members .lobby-member {
    gap: 8px;
  }
  .lobby-member strong {
    font-size: 18px;
  }
  .lobby-member .account-avatar {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }
  .member-state {
    min-width: 0;
    font-size: 12px;
  }
  .lobby-member .action-menu > summary {
    width: 30px;
    height: 34px;
  }
  .option-row {
    grid-template-columns: 1fr;
    padding: 12px 0;
  }
  .invite-friend-row {
    gap: 8px;
  }
  .invite-friend-row button {
    font-size: 13px;
  }
  .room-actions {
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 12px;
  }
  .room-actions button {
    font-size: 13px;
    padding: 8px 10px;
    min-height: 40px;
  }
  .room-actions button:last-child {
    min-width: 0;
  }
}

/* Keep the compact desktop collection constraints after height breakpoints. */
@media (min-width: 1000px) and (min-height: 680px) {
  #collection-dialog .overlay-body,
  #collection-dialog .collection-workspace,
  #collection-dialog .game-detail {
    overflow: hidden;
  }
  #collection-dialog .catalog-card .cover-image {
    height: clamp(160px, 24vh, 300px);
  }
  #collection-dialog .game-detail .detail-cover {
    height: clamp(115px, 14vh, 180px);
  }
}

/* A one-player lobby must fit at the common 1280×720 resolution. */
@media (max-height: 800px) and (min-width: 1000px) {
  .section-overlay .overlay-heading h2,
  #account-dialog.section-overlay .account-heading h2 {
    font-size: 40px;
  }
  .overlay-subtitle {
    padding-left: 62px;
    font-size: 18px;
  }
  .lobby-cover {
    height: 105px;
  }
  .lobby-game-title {
    margin-top: 8px;
  }
  .lobby-overview .lobby-game-title h3 {
    font-size: 24px;
  }
  .lobby-options {
    margin-top: 10px;
    padding-top: 8px;
  }
  .lobby-options > h3,
  .lobby-members h3 {
    margin-bottom: 6px;
    font-size: 22px;
  }
  .option-row {
    min-height: 44px;
    padding: 3px 0;
  }
  .lobby-members .members .lobby-member {
    min-height: 52px;
    margin: 4px 0;
    padding: 4px 10px;
  }
  .lobby-invite-picker {
    margin-top: 8px;
    padding-top: 8px;
  }
  .lobby-invite-picker .empty-state {
    padding: 10px 4px;
  }
  .room-actions {
    padding: 14px 4px 6px;
  }
  .friends-workspace {
    padding-top: 10px;
  }
  #friend-navigation {
    gap: 4px;
    padding-right: 12px;
  }
  #friend-navigation button {
    min-height: 44px;
    padding: 9px 11px;
    gap: 10px;
    font-size: 16px;
    line-height: 1.15;
  }
  #friend-navigation button > svg {
    width: 22px;
    height: 22px;
  }
  .friend-search input,
  .friend-search button {
    min-height: 44px;
  }
  .friends-footer {
    padding-top: 10px;
  }
  #collection-dialog .game-detail {
    gap: 6px;
  }
  #collection-dialog .game-detail .detail-cover {
    height: 90px;
  }
  #collection-dialog .game-detail h3 {
    font-size: 26px;
  }
  #collection-dialog .game-metadata {
    gap: 10px;
    padding: 4px 0 8px;
  }
  #collection-dialog .game-description {
    margin: 2px 0;
    font-size: 13px;
    line-height: 1.35;
  }
  #collection-dialog .unavailable-game,
  #collection-dialog .game-detail button:last-child {
    min-height: 38px;
    padding-block: 7px;
  }
}

/* Desktop lobby: fluid columns with list scrolling and a workspace fallback. */
@media (min-width: 1000px) {
  #lobby-dialog .lobby-overview,
  #lobby-dialog .lobby-members {
    min-height: 0;
  }
  #lobby-dialog .lobby-workspace {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
  #lobby-dialog .lobby-members {
    overflow: hidden;
  }
  #lobby-dialog .lobby-members {
    display: grid;
    grid-template-rows: auto auto minmax(150px, 1fr);
  }
  #lobby-dialog .lobby-members .members,
  #lobby-dialog .invite-friend-list {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
  #lobby-dialog .lobby-members .members {
    padding-right: 4px;
    max-height: clamp(58px, 18vh, 142px);
  }
  #lobby-dialog .lobby-members .members .lobby-member {
    margin: 0;
  }
  #lobby-dialog .lobby-invite-picker {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }
  #lobby-dialog .lobby-overview {
    overflow: visible;
    padding: 1px;
  }
}

/* Very short desktop windows use one shared scroll area. This avoids nested
   scrollbars around the invitation list while keeping the footer available. */
@media (min-width: 1000px) and (max-height: 680px) {
  #lobby-dialog .lobby-members {
    display: block;
    overflow: visible;
  }
  #lobby-dialog .lobby-members .members,
  #lobby-dialog .invite-friend-list {
    max-height: none;
    overflow: visible;
  }
  #lobby-dialog .lobby-invite-picker {
    display: block;
    overflow: visible;
  }
}
/* Lobby controls share one footer row; the countdown and cancellation form one capsule. */
#lobby-dialog .room-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding-top: 10px;
}
#lobby-dialog .room-actions-left {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  gap: 8px;
  min-width: 0;
}
#lobby-dialog .room-actions-right {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}
#lobby-dialog .room-actions button {
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  font-size: 13px;
}
#lobby-dialog .room-share-icon {
  background: #143b47;
  color: #d0e8ee;
  border: 1px solid #47717a;
  width: 42px;
  flex: 0 0 42px;
  padding: 9px;
}
#lobby-dialog .room-actions-left .danger {
  color: #ff9298;
  background: transparent;
}
#lobby-dialog .room-share-icon .icon-label span:last-child {
  display: none;
}
#lobby-dialog .drawing-launch-area {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  flex: none;
  justify-content: center;
  width: auto;
  min-width: 190px;
  height: 50px;
  overflow: hidden;
  background: linear-gradient(145deg, #ffda9f, #ed9c59);
  border: 1px solid #ffd7a2;
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 #fff4d1,
    0 3px 10px #0004;
}
#lobby-dialog #drawing-launch-countdown {
  border: 0;
  box-shadow: none;
  background: transparent;
  margin: 0;
  min-height: 48px;
  gap: 10px;
  padding: 5px 15px;
  font-size: 14px;
}
#lobby-dialog .drawing-launch-number {
  width: 34px;
  height: 34px;
  font-size: 19px;
}
#lobby-dialog .drawing-cancel-launch {
  position: static;
  flex: 1 0 48px;
  width: 48px;
  align-self: stretch;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-left: 1px solid #825b3477;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(135deg, #de692f, #aa3028);
  color: #fff1dc;
  box-shadow: inset 0 1px 0 #ffcd8b66;
}
#lobby-dialog .drawing-cancel-launch:hover {
  transform: none;
  background: linear-gradient(135deg, #f47e3c, #c43a2a);
}
#lobby-dialog .drawing-cancel-launch .icon-label span:last-child {
  display: none;
}
#lobby-dialog .lobby-members .members .lobby-member {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px 28px;
  gap: 6px;
  padding: 7px;
  min-height: 56px;
}
#lobby-dialog .lobby-member:not(:has(.action-menu)) {
  grid-template-columns: minmax(0, 1fr) 22px;
}
#lobby-dialog .lobby-member .member-identity {
  min-width: 0;
  gap: 7px;
}
#lobby-dialog .lobby-member .member-identity strong {
  font-size: 14px;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.15;
}
#lobby-dialog .lobby-member .account-avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
}
#lobby-dialog .member-state {
  min-width: 0;
  margin: 0;
  display: grid;
  justify-content: center;
  gap: 3px;
}
#lobby-dialog .member-state svg {
  width: 18px;
  height: 18px;
}
#lobby-dialog .member-readiness {
  display: grid;
  place-items: center;
  color: #e2af6c;
}
#lobby-dialog .member-readiness[data-ready='yes'] {
  color: #61dbc2;
}
#lobby-dialog .lobby-member .action-menu {
  margin: 0;
  min-width: 0;
}
#lobby-dialog .lobby-member .action-menu > summary {
  width: 28px;
  min-width: 0;
  height: 30px;
  padding: 4px;
}
@media (min-width: 1000px) {
  #lobby-dialog .lobby-workspace {
    overflow: hidden;
    scrollbar-gutter: auto;
  }
  #lobby-dialog .lobby-overview {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  #lobby-dialog .lobby-overview .lobby-art {
    min-height: 35px;
    height: min(18vh, 180px);
    flex: 1 1 100px;
    max-height: 180px;
  }
  #lobby-dialog .lobby-overview h3 {
    margin-block: 8px;
  }
  #lobby-dialog .lobby-overview p {
    margin-block: 3px;
  }
  #lobby-dialog .lobby-overview .option-row {
    min-height: 42px;
    padding-block: 5px;
  }
  #lobby-dialog .lobby-members {
    display: grid;
    grid-template-rows: auto minmax(60px, 1fr) minmax(100px, 1fr);
    overflow: hidden;
  }
  #lobby-dialog .lobby-members .members {
    max-height: none;
    min-height: 0;
    overflow: auto;
  }
  #lobby-dialog .lobby-invite-picker {
    display: flex;
    min-height: 0;
    overflow: hidden;
  }
  #lobby-dialog .invite-friend-list {
    overflow: auto;
    min-height: 0;
  }
}
@media (max-width: 1200px) {
  #lobby-dialog .room-actions-left button {
    width: 42px;
    padding: 9px;
  }
  #lobby-dialog .room-actions-left .icon-label span:last-child {
    display: none;
  }
  #lobby-dialog .lobby-members .members {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  #lobby-dialog .room-actions {
    gap: 5px;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  #lobby-dialog .room-actions-right .room-share-icon {
    display: none;
  }
  #lobby-dialog .room-actions-right button {
    width: 40px;
    padding: 8px;
  }
  #lobby-dialog .room-actions-right .icon-label span:last-child {
    display: none;
  }
  #lobby-dialog .drawing-launch-area {
    min-width: 0;
    width: 100%;
  }
  #lobby-dialog #drawing-launch-countdown {
    font-size: 12px;
    padding-inline: 8px;
  }
}
@media (min-width: 600px) and (max-width: 999px) {
  #lobby-dialog .lobby-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 16px;
    overflow: hidden;
  }
  #lobby-dialog .lobby-overview {
    grid-area: 1 / 1;
    min-height: 0;
    overflow: hidden;
    margin: 0;
  }
  #lobby-dialog .lobby-members {
    grid-area: 1 / 2;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: 0;
    display: grid;
    grid-template-rows: auto minmax(56px, 1fr) minmax(110px, 1fr);
  }
  #lobby-dialog .lobby-members .members {
    overflow: auto;
    min-height: 0;
    align-content: start;
  }
  #lobby-dialog .lobby-invite-picker {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    margin-top: 8px;
    padding-top: 8px;
  }
  #lobby-dialog .invite-friend-list {
    overflow: auto;
    min-height: 0;
  }
  #lobby-dialog .lobby-art {
    height: 80px;
    min-height: 35px;
    flex: 1 1 80px;
    max-height: 100px;
  }
  #lobby-dialog .lobby-options {
    margin-top: 8px;
    padding-top: 8px;
  }
  #lobby-dialog h3 {
    font-size: 18px;
    margin-block: 6px;
  }
  #lobby-dialog .lobby-game-title {
    margin-top: 6px;
  }
  #lobby-dialog .lobby-overview > p {
    font-size: 12px;
    margin: 3px 0;
  }
  #lobby-dialog .option-row {
    grid-template-columns: 28px minmax(0, 1fr);
    padding: 4px;
    min-height: 42px;
    gap: 5px;
  }
  #lobby-dialog .option-row > .icon-label span:last-child {
    display: none;
  }
  #lobby-dialog .option-row select,
  #lobby-dialog .option-row button {
    height: 38px;
    min-height: 38px;
    font-size: 12px;
    padding-block: 3px;
  }
}
@media (max-width: 599px) {
  #lobby-dialog .lobby-workspace {
    display: flex;
    flex-direction: column;
    overflow: auto;
  }
  #lobby-dialog .lobby-overview,
  #lobby-dialog .lobby-members {
    flex: 0 0 auto;
    min-height: auto;
  }
}

#lobby-dialog .drawing-resume,
#lobby-dialog .drawing-resume .icon-label {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
}
#lobby-dialog .drawing-resume .icon-label {
  width: 100%;
}

/* Balance the play icon with an equal trailing slot: the label itself is centered. */
#lobby-dialog .room-actions-left .drawing-resume {
  min-width: 164px;
}
#lobby-dialog .drawing-resume .icon-label {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 18px;
  align-items: center;
  justify-items: center;
  gap: 8px;
  line-height: 1.25;
}
#lobby-dialog .drawing-resume .icon-label::after {
  content: '';
  width: 18px;
  grid-column: 3;
}
#lobby-dialog .drawing-resume .icon-label > svg {
  width: 18px;
  height: 18px;
  grid-column: 1;
  margin: 0;
}
#lobby-dialog .room-actions-left .drawing-resume .icon-label > span:last-child {
  display: block;
  grid-column: 2;
  text-align: center;
}