/* DC88 lobby campaign carousel; deliberately scoped away from existing notice dialogs. */
dialog.dc88-lobby-popup {
  --popup-ink: #f1fbff;
  --popup-muted: #badbe8;
  --popup-edge: #5ab9d46b;
  --popup-panel: #0b2636;
  --popup-input: #153e52;
  --popup-active: #77e2f5;
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: min(570px, calc(100% - 24px));
  max-width: none;
  max-height: calc(100% - 22px);
  max-height: calc(100dvh - 22px);
  padding: 0;
  margin: auto;
  border: 0;
  border-radius: 20px;
  background: transparent;
  color: var(--popup-ink);
  color-scheme: dark;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  font: 500 15px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
dialog.dc88-lobby-popup[open] { animation: dc88-popup-in .23s ease-out both; }
dialog.dc88-lobby-popup::backdrop { background: #02111cbb; backdrop-filter: blur(5px); }
html:has(dialog.dc88-lobby-popup[open]) { overflow: hidden; }
.dc88-lobby-popup *, .dc88-lobby-popup *::before, .dc88-lobby-popup *::after { box-sizing: border-box; }
.dc88-lobby-popup [hidden] { display: none !important; }
.dc88-lobby-popup :is(button, a, input):focus-visible { outline: 2px solid #a5f0ff; outline-offset: 2px; }
.dc88-popup-inner { padding: 5px; }
.dc88-popup-panel {
  padding: 10px;
  border-radius: 20px;
  border: 1px solid var(--popup-edge);
  background: linear-gradient(155deg, #183e50, var(--popup-panel) 58%);
  box-shadow: 0 18px 44px #0007, inset 0 1px #d8f9ff18;
}
.dc88-popup-clear .dc88-popup-panel { background: none; border-color: transparent; box-shadow: none; }
.dc88-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  margin: 0 0 7px;
  padding: 0 0 0 4px;
}
.dc88-popup-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.dc88-popup-head h2 { margin: 0; color: var(--popup-ink); font-size: 14px; font-weight: 750; letter-spacing: .02em; }
.dc88-popup-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.dc88-popup-brand > .dc88-popup-icon { width: 30px; height: 30px; color: #baf5ff; border-radius: 50%; background: #21617a; }
.dc88-popup-brand > .dc88-popup-icon svg { width: 16px; height: 16px; }
.dc88-lobby-popup button, .dc88-popup-media, .dc88-popup-cta { font: inherit; -webkit-tap-highlight-color: transparent; }
.dc88-lobby-popup button { appearance: none; cursor: pointer; }
.dc88-lobby-popup :is(.dc88-popup-close, .dc88-popup-arrow) {
  display: grid;
  place-items: center;
  padding: 0;
  width: 44px;
  height: 44px;
  border: 1px solid #b8f1ff8c;
  border-radius: 50%;
  background: #102e40;
  color: #f7fcff;
  text-shadow: none;
  box-shadow: 0 4px 12px #00111b50;
}
.dc88-lobby-popup .dc88-popup-close { border-color: #c8f6ff; background: #e9f9fd; color: #17475a; }
.dc88-popup-frame { position: relative; }
.dc88-popup-stage {
  display: grid;
  align-items: center;
  overflow: hidden;
  border: 1px solid #5bb7d28c;
  border-radius: 13px;
  background: #092131;
  color: var(--popup-ink);
  touch-action: pan-y;
}
.dc88-popup-clear .dc88-popup-stage { background: transparent; border-color: transparent; }
.dc88-popup-media { display: grid; place-items: center; min-width: 0; padding: 0; color: inherit; text-decoration: none; }
.dc88-popup-media:focus-visible { outline-offset: -4px !important; }
.dc88-popup-media img {
  display: block;
  width: 100%;
  max-height: min(49vh, 430px);
  max-height: min(49dvh, 430px);
  object-fit: contain;
  aspect-ratio: auto 23 / 18;
  color: var(--popup-ink);
  text-align: center;
}
.dc88-popup-image-left { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.dc88-popup-image-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.dc88-popup-image-right .dc88-popup-media { grid-column: 2; grid-row: 1; }
.dc88-popup-image-right .dc88-popup-copy { grid-column: 1; grid-row: 1; }
.dc88-popup-copy { min-width: 0; padding: 16px 20px; overflow-wrap: anywhere; }
.dc88-popup-text .dc88-popup-copy {
  padding: clamp(28px, 7vw, 55px) clamp(20px, 7vw, 50px);
  text-align: center;
  background: radial-gradient(ellipse at center top, #164d65, #0b2638 80%);
}
.dc88-popup-image-only .dc88-popup-copy { padding: 12px 18px; text-align: center; }
.dc88-popup-copy h3 { color: var(--popup-ink); font-size: clamp(17px, 4vw, 24px); line-height: 1.25; margin: 0; }
.dc88-popup-copy p { color: var(--popup-muted); margin: 8px 0 0; font-size: 14px; white-space: pre-wrap; }
.dc88-lobby-popup .dc88-popup-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #041924d9;
}
.dc88-popup-prev { left: 8px; }
.dc88-popup-next { right: 8px; }
.dc88-popup-frame:has(.dc88-popup-text) .dc88-popup-copy { padding-inline: 52px; }
.dc88-popup-frame:has(.dc88-popup-image-left) .dc88-popup-copy { padding-inline-end: 55px; }
.dc88-popup-frame:has(.dc88-popup-image-right) .dc88-popup-copy { padding-inline-start: 55px; }
.dc88-popup-frame:has(.dc88-popup-arrow[hidden]) .dc88-popup-copy { padding-inline: 20px; }
.dc88-popup-tabs {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 7px;
  margin-top: 8px;
  padding: 5px 3px 3px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: #4e9db6 #0a2638;
}
.dc88-lobby-popup .dc88-popup-tab {
  display: flex;
  align-items: center;
  flex: 1 0 clamp(104px, 27vw, 155px);
  gap: 7px;
  min-width: 0;
  min-height: 46px;
  padding: 6px 9px;
  border: 1px solid #4387a0a6;
  border-radius: 8px;
  background: var(--popup-input);
  color: #d9f4fe;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  line-height: 1.25;
  text-shadow: none;
  box-shadow: none;
}
.dc88-lobby-popup .dc88-popup-tab[aria-selected="true"] {
  background: linear-gradient(140deg, #b5f3ff, var(--popup-active));
  border-color: #b1eeff;
  color: #073749;
}
.dc88-popup-tab .dc88-popup-icon { width: 17px; height: 17px; }
.dc88-popup-tab .dc88-popup-icon svg { width: 16px; height: 16px; }
.dc88-popup-tab-text { min-width: 0; overflow-wrap: anywhere; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dc88-popup-footer { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 12px; }
.dc88-popup-controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; width: 100%; }
.dc88-lobby-popup :is(.dc88-popup-advance, .dc88-popup-cta) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 112px;
  gap: 6px;
  padding: 7px 17px;
  border: 1px solid #a4f1ff;
  border-radius: 999px;
  background: linear-gradient(145deg, #bcf5ff, #6ce0f6);
  color: #053345;
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
  text-shadow: none;
  box-shadow: 0 5px 20px #00141f50;
}
.dc88-lobby-popup .dc88-popup-cta { background: #123447; color: #ecfaff; border-color: #63adc8; }
.dc88-popup-counter { margin: 0; color: #d9f4fe; font-size: 12px; font-variant-numeric: tabular-nums; }
.dc88-popup-snooze { display: inline-flex; align-items: center; gap: 9px; min-height: 39px; padding: 0 6px; color: #f0fbff; font-size: 13px; cursor: pointer; }
.dc88-popup-snooze input { appearance: auto; margin: 0; width: 18px; height: 18px; accent-color: #82e6fa; cursor: pointer; }
@media (hover: hover) {
  .dc88-lobby-popup :is(button, .dc88-popup-cta):hover { filter: brightness(1.14); }
}
@media (max-width: 460px) {
  .dc88-popup-panel { padding: 7px; border-radius: 16px; }
  .dc88-popup-head { margin-bottom: 5px; }
  .dc88-popup-prev { left: 5px; }
  .dc88-popup-next { right: 5px; }
  .dc88-popup-stage:is(.dc88-popup-image-left, .dc88-popup-image-right) { grid-template-columns: minmax(0, 1fr); }
  .dc88-popup-image-right .dc88-popup-media, .dc88-popup-image-right .dc88-popup-copy { grid-column: auto; grid-row: auto; }
  .dc88-popup-stage:is(.dc88-popup-image-left, .dc88-popup-image-right) .dc88-popup-media img { max-height: min(35dvh, 270px); }
  .dc88-popup-frame:has(:is(.dc88-popup-image-left, .dc88-popup-image-right)) .dc88-popup-copy { padding-inline: 16px; text-align: center; }
}
@media (max-height: 500px) {
  .dc88-popup-footer { padding-top: 8px; }
}
@media (max-height: 500px) and (min-width: 500px) {
  .dc88-popup-inner { padding: 3px; }
  .dc88-popup-panel { padding: 7px; }
  .dc88-popup-head { margin-bottom: 4px; }
  .dc88-popup-media img { max-height: min(34dvh, 230px); }
  .dc88-popup-footer { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 3px 10px; }
  .dc88-popup-controls { width: auto; }
}
@keyframes dc88-popup-in { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  dialog.dc88-lobby-popup[open] { animation: none; }
}

/* Presentation choice belongs to the active campaign; artwork layout is independent. */
.dc88-popup-sequence {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}
.dc88-lobby-popup[data-display-style="classic"] .dc88-popup-sequence { display: contents; }
.dc88-lobby-popup[data-display-style="classic"] .dc88-popup-counter {
  order: 1;
  flex-basis: 100%;
  text-align: center;
}
.dc88-lobby-popup[data-display-style="classic"] .dc88-popup-controls { row-gap: 4px; }
dialog.dc88-lobby-popup[data-display-style="compact"] { width: min(454px, calc(100% - 20px)); }
dialog.dc88-lobby-popup[data-display-style="tabs"] { width: min(530px, calc(100% - 20px)); }
.dc88-lobby-popup:is([data-display-style="compact"],[data-display-style="tabs"]) .dc88-popup-inner {
  padding: 18px 8px 5px;
}
.dc88-lobby-popup:is([data-display-style="compact"],[data-display-style="tabs"]) .dc88-popup-panel {
  position: relative;
}
.dc88-lobby-popup:is([data-display-style="compact"],[data-display-style="tabs"]) .dc88-popup-head {
  position: absolute;
  top: -15px;
  right: -6px;
  z-index: 2;
  display: block;
  min-height: 0;
  padding: 0;
  margin: 0;
}
.dc88-lobby-popup:is([data-display-style="compact"],[data-display-style="tabs"]) .dc88-popup-brand {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.dc88-lobby-popup:is([data-display-style="compact"],[data-display-style="tabs"]) .dc88-popup-close {
  border: 1px solid #e9faffbf;
  background: #0c2a3de8;
  color: #f7fcff;
}
.dc88-lobby-popup[data-display-style="compact"] .dc88-popup-panel {
  padding: 4px;
  border-radius: 15px;
}
.dc88-lobby-popup[data-display-style="compact"] .dc88-popup-stage { border-radius: 11px; }
.dc88-lobby-popup[data-display-style="compact"] .dc88-popup-footer { padding-top: 6px; gap: 2px; }
.dc88-lobby-popup[data-display-style="compact"] .dc88-popup-snooze { min-height: 36px; font-size: 12px; }
.dc88-lobby-popup[data-display-style="compact"] .dc88-popup-controls { column-gap: 8px; row-gap: 4px; }
.dc88-lobby-popup[data-display-style="compact"] .dc88-popup-counter {
  min-width: 36px;
  text-align: center;
  white-space: nowrap;
}
.dc88-lobby-popup[data-display-style="compact"] :is(.dc88-popup-step-back,.dc88-popup-advance) {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid #74b9ce;
  border-radius: 50%;
  background: #0b2d41;
  color: #f0fbff;
}
.dc88-lobby-popup[data-display-style="compact"] .dc88-popup-step-text { display: none; }
.dc88-lobby-popup[data-display-style="tabs"] {
  --popup-ink: #123b4e;
  --popup-muted: #31596a;
  --popup-edge: #d6eef6;
}
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-panel {
  padding: 8px;
  border-radius: 15px;
  background: linear-gradient(180deg, #ffffff, #eaf8fc);
  box-shadow: 0 16px 40px #01172480;
}
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-stage {
  border-color: #d8edf5;
  border-radius: 10px;
  background: #f4fcff;
}
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-text .dc88-popup-copy {
  background: radial-gradient(ellipse at center top, #f8fdff, #e0f3fb 90%);
}
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-tabs {
  gap: 5px;
  margin-top: 6px;
  padding: 4px 1px 1px;
  scrollbar-color: #70adc0 #e6f5fa;
}
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-tab {
  position: relative;
  flex: 1 0 clamp(88px, 24vw, 148px);
  gap: 4px;
  min-height: 44px;
  padding: 6px 7px;
  border-color: #b9dce8;
  background: #f8fdff;
  color: #315466;
}
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-tab[aria-selected="true"] {
  border-color: #007a9b;
  background: #007a9b;
  color: #fff;
}
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-tab[aria-selected="true"]::before {
  content: "";
  position: absolute;
  top: -4px;
  left: calc(50% - 4px);
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  border-radius: 1px;
  background: inherit;
}
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-tab .dc88-popup-icon { width: 14px; height: 14px; }
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-footer { gap: 3px; padding-top: 8px; }
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-controls { display: grid; justify-items: center; gap: 6px; }
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-sequence { width: min(350px,100%); }
.dc88-lobby-popup[data-display-style="tabs"] :is(.dc88-popup-step-back,.dc88-popup-advance) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  gap: 5px;
  min-width: 0;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid #a6e7f5;
  border-radius: 999px;
  background: #80e6fa;
  color: #04354a;
  font-size: 14px;
  font-weight: 750;
}
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-step-back {
  border-color: #a8dce9;
  background: #0e3348db;
  color: #effbff;
}
.dc88-lobby-popup :is(.dc88-popup-step-back,.dc88-popup-advance):disabled {
  border-color: #769cab;
  background: #17394b;
  color: #c1d5de;
  opacity: .72;
  cursor: default;
  filter: none;
}
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-snooze { min-height: 36px; }
.dc88-lobby-popup[data-display-style="tabs"].dc88-popup-clear {
  --popup-ink: #f1fbff;
  --popup-muted: #badbe8;
}
.dc88-lobby-popup[data-display-style="tabs"].dc88-popup-clear .dc88-popup-panel {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.dc88-lobby-popup[data-display-style="tabs"].dc88-popup-clear .dc88-popup-stage { background: transparent; border-color: transparent; }
.dc88-lobby-popup[data-display-style="tabs"].dc88-popup-clear .dc88-popup-text .dc88-popup-copy { background: #0b2638e8; }
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-tab:focus-visible { outline: 2px solid #005c79; outline-offset: -3px; }
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-tab[aria-selected="true"]:focus-visible { outline-color: #fff; }
@media (max-height: 500px) and (min-width: 500px) {
  .dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-controls { width: min(350px,100%); }
}


/* Keep both the popup and its dimmer inside the lobby's centered column. */
dialog.dc88-lobby-popup[open] {
  --lobby-popup-column: var(--ref-width, min(100vw, 526px));
  --lobby-popup-limit: 444px;
  --lobby-popup-gutter: clamp(10px, 3vw, 26px);
  --lobby-popup-safe-top: max(10px, env(safe-area-inset-top, 0px));
  --lobby-popup-safe-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  width: min(var(--lobby-popup-limit), calc(var(--lobby-popup-column) - var(--lobby-popup-gutter)));
  max-width: calc(100vw - 10px);
  max-height: calc(100vh - var(--lobby-popup-safe-top) - var(--lobby-popup-safe-bottom));
  max-height: calc(100dvh - var(--lobby-popup-safe-top) - var(--lobby-popup-safe-bottom));
}
dialog.dc88-lobby-popup[open][data-display-style="compact"] { --lobby-popup-limit: 396px; }
dialog.dc88-lobby-popup[open][data-display-style="tabs"] { --lobby-popup-limit: 470px; }
dialog.dc88-lobby-popup::backdrop {
  inset: 0;
  width: min(100vw, 526px);
  margin-inline: auto;
  background: #031725a6;
  backdrop-filter: blur(5px);
}
/* A backdrop does not rely on inherited variables; mirror the aquamarine shell's width. */
body.aquamarine dialog.dc88-lobby-popup::backdrop {
  width: min(100vw, calc(100vh * 750 / 1334));
  width: min(100vw, calc(100dvh * 750 / 1334));
}
.dc88-lobby-popup .dc88-popup-media img {
  max-height: min(43vh, 360px);
  max-height: min(43dvh, 360px);
}
.dc88-lobby-popup:is([data-display-style="compact"],[data-display-style="tabs"]) .dc88-popup-inner {
  padding: 15px 7px 4px;
}
.dc88-lobby-popup:is([data-display-style="compact"],[data-display-style="tabs"]) .dc88-popup-head {
  top: -10px;
  right: -4px;
}
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-panel {
  padding: clamp(6px, 1.5vw, 10px);
}
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-tab {
  flex-basis: clamp(75px, 25%, 132px);
}
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-sequence {
  width: min(320px, 92%);
  gap: clamp(8px, 4vw, 24px);
}
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-footer { padding-top: 9px; }
@media (max-width: 460px) {
  .dc88-lobby-popup .dc88-popup-stage:is(.dc88-popup-image-left,.dc88-popup-image-right) .dc88-popup-media img {
    max-height: min(34vh, 270px);
    max-height: min(34dvh, 270px);
  }
}
@media (max-height: 500px) {
  .dc88-lobby-popup .dc88-popup-media img {
    max-height: min(34vh, 190px);
    max-height: min(34dvh, 190px);
  }
  .dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-footer { padding-top: 6px; }
  .dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-controls { width: 100%; }
}


/* Tabs mode has a light card and free-standing navigation, like the lobby reference. */
dialog.dc88-lobby-popup[open][data-display-style="tabs"] {
  /* Overrides the higher-specificity .lounge-mode dialog:not(.brand-modal) skin. */
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color-scheme: light;
}
dialog.dc88-lobby-popup[open][data-display-style="tabs"]::backdrop {
  background: #0825368c;
  backdrop-filter: blur(5px);
}
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-inner {
  padding: 18px 13px 4px;
}
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-panel {
  padding: clamp(7px, 1.5vw, 10px);
  border: 1px solid #dceff5;
  border-radius: 13px;
  background: linear-gradient(180deg, #fff, #effaff);
  box-shadow: 0 9px 24px #02141d40;
}
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-head {
  top: -15px;
  right: -12px;
}
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-close {
  position: relative;
  border: 0;
  background: none;
  box-shadow: none;
  color: #fff;
}
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-close::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid #ffffffab;
  border-radius: 50%;
  background: #092632d9;
}
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-close .dc88-popup-icon { position: relative; }
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-close svg { width: 17px; height: 17px; }
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-frame {
  overflow: hidden;
  border-radius: 9px;
}
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-tabs { margin-top: 8px; }
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-tab { font-weight: 650; }

.dc88-lobby-popup[data-display-style="tabs"] :is(.dc88-popup-footer, .dc88-popup-controls, .dc88-popup-sequence) {
  background: none;
  border: 0;
  box-shadow: none;
}
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-footer { padding: 12px 0 1px; }
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  width: 100%;
  gap: 0;
}
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-sequence {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(300px, 84%);
  gap: clamp(10px, 5vw, 27px);
}
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-sequence:has(> .dc88-popup-step-back[hidden]) {
  grid-template-columns: minmax(0, 1fr);
  width: min(150px, 60%);
}
.dc88-lobby-popup[data-display-style="tabs"] :is(.dc88-popup-step-back,.dc88-popup-advance) {
  width: 100%;
  min-height: 44px;
  padding: 5px clamp(5px, 2vw, 12px);
  gap: 4px;
  white-space: nowrap;
  font-size: clamp(12px, 3.4vw, 15px);
  font-weight: 650;
  box-shadow: none;
}
.dc88-lobby-popup[data-display-style="tabs"] :is(.dc88-popup-step-back,.dc88-popup-advance) svg {
  width: 16px;
  height: 16px;
}
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-step-back {
  border-color: #f2fcff9e;
  background: #0b27383d;
  color: #fff;
  text-shadow: 0 1px 3px #00101699;
}
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-advance {
  border-color: #0080a2;
  background: #007c9e;
  color: #fff;
}
.dc88-lobby-popup[data-display-style="tabs"] :is(.dc88-popup-step-back,.dc88-popup-advance):disabled {
  opacity: .58;
}

.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 12px;
  margin-top: 5px;
  padding: 1px 0 0;
  border-top: 1px solid #dceef4;
}
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-inline .dc88-popup-cta {
  min-width: 0;
  min-height: 34px;
  padding: 3px 6px;
  gap: 4px;
  border: 0;
  background: none;
  box-shadow: none;
  color: #006582;
  font-size: 12px;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-inline .dc88-popup-cta svg { width: 14px; height: 14px; }
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-inline .dc88-popup-snooze {
  min-height: 34px;
  padding: 2px 4px;
  gap: 6px;
  color: #315466;
  font-size: 12px;
}
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-inline .dc88-popup-snooze input {
  width: 16px;
  height: 16px;
  accent-color: #007c9e;
}
.dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-inline :is(a,input):focus-visible {
  outline-color: #006582;
}
.dc88-lobby-popup[data-display-style="tabs"].dc88-popup-clear .dc88-popup-panel {
  border-color: transparent;
  background: none;
  box-shadow: none;
}
.dc88-lobby-popup[data-display-style="tabs"].dc88-popup-clear .dc88-popup-inline {
  border-color: #ddf5fd42;
}
.dc88-lobby-popup[data-display-style="tabs"].dc88-popup-clear .dc88-popup-inline :is(.dc88-popup-cta,.dc88-popup-snooze) {
  color: #f2fcff;
  text-shadow: 0 1px 3px #001016cc;
}
@media (max-height: 500px) {
  .dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-footer { padding-top: 7px; }
  .dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-sequence { width: min(250px, 100%); }
  .dc88-lobby-popup[data-display-style="tabs"] .dc88-popup-sequence:has(> .dc88-popup-step-back[hidden]) {
    width: min(130px, 70%);
  }
}

/* Use the light reference palette for every popup presentation, scoped to this dialog. */
dialog.dc88-lobby-popup[open][data-display-style] {
  --popup-ink: #123b4e;
  --popup-muted: #31596a;
  --popup-edge: #d6eef6;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--popup-ink);
  color-scheme: light;
}
dialog.dc88-lobby-popup[open][data-display-style]::backdrop {
  background: #0825368c;
}
.dc88-lobby-popup:not([data-display-style="tabs"], .dc88-popup-clear) .dc88-popup-panel {
  background: linear-gradient(180deg, #fff, #effaff);
  border-color: #dceff5;
  box-shadow: 0 9px 24px #02141d40;
}
.dc88-lobby-popup:not([data-display-style="tabs"], .dc88-popup-clear) .dc88-popup-stage {
  background: #f4fcff;
  border-color: #d8edf5;
}
.dc88-lobby-popup:not([data-display-style="tabs"]) .dc88-popup-text .dc88-popup-copy {
  background: radial-gradient(ellipse at center top, #f8fdff, #e0f3fb 90%);
}
.dc88-lobby-popup:not([data-display-style="tabs"]) .dc88-popup-brand > .dc88-popup-icon {
  background: #e0f4fb;
  color: #12647e;
}
.dc88-lobby-popup:not([data-display-style="tabs"]) .dc88-popup-tabs {
  scrollbar-color: #70adc0 #e6f5fa;
}
.dc88-lobby-popup:not([data-display-style="tabs"]) .dc88-popup-tab,
.dc88-lobby-popup:not([data-display-style="tabs"]) :is(.dc88-popup-cta,.dc88-popup-arrow) {
  background: #f8fdff;
  border-color: #b9dce8;
  color: #235064;
}
.dc88-lobby-popup:not([data-display-style="tabs"]) .dc88-popup-tab[aria-selected="true"],
.dc88-lobby-popup:not([data-display-style="tabs"]) .dc88-popup-advance {
  background: #007c9e;
  border-color: #007c9e;
  color: #fff;
}
.dc88-lobby-popup[data-display-style="compact"] .dc88-popup-step-back {
  background: #f8fdff;
  border-color: #b9dce8;
  color: #235064;
}
.dc88-lobby-popup:not([data-display-style="tabs"]) .dc88-popup-snooze input {
  accent-color: #007c9e;
}

/* Cover the whole viewport height even as a mobile browser's toolbar moves. */
dialog.dc88-lobby-popup[open]::backdrop {
  position: fixed;
  top: 0;
  bottom: auto;
  height: 100vh;
  min-height: 100vh;
}
@supports (height: 100lvh) {
  dialog.dc88-lobby-popup[open]::backdrop {
    height: 100lvh;
    min-height: 100lvh;
  }
}
/* Keep the rail's space while a popup is open, without painting any leaked tile. */
html:has(dialog.dc88-lobby-popup[open]) #app .shell #catalog > .categories {
  visibility: hidden;
}

/* Match the mobile lobby frame without changing the desktop dimmer. */
@media (max-width: 560px) {
  body.dc88-mobile-dock:not(.admin-mode) dialog.dc88-lobby-popup[open]::backdrop {
    width: auto;
    margin-inline: 0;
  }
}