/* The browser sign-in (sign-in-entrance.tsx). A computer: the three ways in as cards side by side,
 * the wallet first, Telegram and World App with their QR codes; a phone: rows. The type, colours
 * and button surfaces are the accounts screens' (accounts.module.css). */

.sign-in_entrance__pN7sJ {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: 100%;
}

.sign-in_head__9qkEv {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 920px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}

.sign-in_cards__KFgSN {
  --qr-size: 196px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 20px;
  width: 100%;
}

.sign-in_card__0HfKD {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 20px 22px 22px;
  border-radius: 18px;
  background: rgba(24, 21, 29, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(10px);
}

.sign-in_cardHead__WsYhh {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 30px;
}
.sign-in_headIcon__BhxAu {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  -o-object-fit: contain;
     object-fit: contain;
  color: #ece4cf;
}
.sign-in_cardTitle__xz52y {
  margin: 0;
  /* The method's name as its brand writes it: the interface font, not the heading face. */
  font-family: var(--font-exo2), 'Exo 2', system-ui, sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  color: #ece4cf;
  white-space: nowrap;
}

.sign-in_cardBody__qxU_w {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
}
.sign-in_caption__YFx4q {
  margin: 0;
  max-width: 320px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #c9c5cd;
  text-align: center;
  text-wrap: pretty;
}

/* The wallet card shows the brands where the others show their QR codes. */
.sign-in_brandList__SeK7G {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-height: var(--qr-size);
  align-items: center;
}
.sign-in_brand__lzX5n {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 84px;
}
.sign-in_brandMark__HGD78 {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.sign-in_brandMark__HGD78 img { display: block; width: 100%; height: 100%; }
.sign-in_brandName__7MNmu {
  font-size: 12.5px;
  font-weight: 600;
  color: #d9d5dd;
  white-space: nowrap;
}

.sign-in_qr__8ISgN {
  width: var(--qr-size);
  height: var(--qr-size);
}
.sign-in_qrBlank__j_F6y {
  width: var(--qr-size);
  height: var(--qr-size);
  flex: 0 0 auto;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
}
.sign-in_qrLoading__PY_X0 { animation: sign-in_mfSignInPulse__D_WF2 1.6s ease-in-out infinite; }
@keyframes sign-in_mfSignInPulse__D_WF2 {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sign-in_qrLoading__PY_X0 { animation: none; }
}
.sign-in_qrBlankText__vwVWR {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: #d9d5dd;
  text-align: center;
}

/* The bottom of each card: its button, or the line that explains why there is none. */
.sign-in_cardFoot__MRtyM {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  justify-content: center;
}
.sign-in_footButton__pGH8u {
  text-decoration: none;
}
.sign-in_footButton__pGH8u[aria-disabled] {
  opacity: 0.55;
  pointer-events: none;
}
.sign-in_footNote__RpuXN {
  margin: 0;
  font-size: 13px;
  color: #a5a1ab;
  text-align: center;
}

/* The code under the two QR codes (the bot and World App show the same one). */
.sign-in_codeLine__N8l6q {
  flex-wrap: wrap;
  row-gap: 4px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}
.sign-in_codeUnderQr___Raq9 {
  grid-column: 2 / 4;
}
.sign-in_codeChip__4lGZY {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 9px;
  background: rgba(19, 17, 23, 0.7);
  font-size: 13px;
  color: #b9b5be;
}
.sign-in_codeChip__4lGZY b {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: #ece4cf;
}

.sign-in_note__rEzIc {
  max-width: 640px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}

/* A phone's rows: the mark, the name and what it covers, a chevron. */
.sign-in_methodRow__V8O8S { min-height: 62px; }
.sign-in_methodText__juMWg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.sign-in_methodTitle__Itb1D { white-space: nowrap; }
.sign-in_methodDetail__ADu7a {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  opacity: 0.72;
  white-space: normal;
  max-width: 100%;
}
.sign-in_marks__mwxmo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.sign-in_marksOverlap__9JJ24 { gap: 0; }
.sign-in_marksOverlap__9JJ24 .sign-in_mark__ReLUQ + .sign-in_mark__ReLUQ { margin-inline-start: -4px; }
.sign-in_mark__ReLUQ {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 0 2px rgba(24, 21, 29, 0.9);
}
.sign-in_mark__ReLUQ img { display: block; width: 100%; height: 100%; }

/* Narrow computer windows: the cards stack, centred. */
@media (max-width: 899px) {
  .sign-in_cards__KFgSN {
    grid-template-columns: minmax(0, 420px);
    justify-content: center;
  }
  .sign-in_codeUnderQr___Raq9 { grid-column: auto; }
}

/* Short desktop windows (1280×800 and the like): the cards tighten so nothing needs scrolling. */
@media (min-width: 960px) and (min-height: 560px) and (max-height: 860px) {
  .sign-in_entrance__pN7sJ { gap: 14px; }
  .sign-in_cards__KFgSN { --qr-size: 172px; }
  .sign-in_card__0HfKD { gap: 10px; padding: 14px 18px 16px; }
}

/* Large screens: bigger codes and marks. */
@media (min-width: 1800px) and (min-height: 1000px) {
  .sign-in_cards__KFgSN { --qr-size: 224px; gap: 16px 24px; }
  .sign-in_card__0HfKD { padding: 24px 26px 26px; }
  .sign-in_cardTitle__xz52y { font-size: 21px; }
  .sign-in_caption__YFx4q { font-size: 14.5px; max-width: 340px; }
  .sign-in_brand__lzX5n { width: 96px; }
  .sign-in_brandMark__HGD78 { width: 64px; height: 64px; border-radius: 16px; }
}

/* Desktop dialogs: every game dialog in the desktop shell (GameModalContent's desktop branch,
 * ConfirmDialog, and dialogs with their own Radix root that use these classes).
 * The look follows the desktop item view (components/desktop/item-view.module.css): an L2
 * panel with a 14 px radius, a Cinzel title on the left, a 36 px close button, a comfortable
 * body and an action footer with content-sized buttons on the right. It is centred over the
 * page area (right of the sidebar, under the top bar, left of a docked chat) without any
 * transform, and appears by opacity only: Telegram Desktop rasterizes transformed layers at
 * 1x on HiDPI screens. The panel itself is opaque from its first frame and only its contents
 * fade in, so nothing below it (the page, a dialog it opens over) ever reads through it.
 * These classes are only rendered in the desktop shell; phones never see them. Sizes are steps
 * chosen by content: sm 440, md 560, lg 720, xl 960, full 1200. */

.desktop-dialog_overlay__EPCAU {
  position: fixed;
  inset: 0;
  z-index: 400;
  /* A choice to make (kind "decision", the default): a light dim (Alex, 2026-10-10). */
  background: rgba(10, 10, 13, .45);
  animation: desktop-dialog_ddFade__k4xy_ var(--dt-dur-panel, 180ms) var(--dt-ease, ease-out);
}
.desktop-dialog_overlay__EPCAU[data-priority="high"] { z-index: 500; }
/* The real dialog replacing a loading stand-in keeps the dim that is already there. */
.desktop-dialog_overlay__EPCAU[data-handoff] { animation: none; }
/* A dialog opened over another dims the one below a little more, not the page twice. */
.desktop-dialog_overlay__EPCAU[data-stacked] { background: rgba(10, 10, 13, .3); }
/* A view to look at (kind "info": an element, the jackpot, the Hall of Fame, statistics) opens
 * without a dim. The overlay stays, transparent, so a press outside the view closes it. */
.desktop-dialog_overlay__EPCAU[data-kind="info"] { background: transparent; animation: none; }

.desktop-dialog_dialog__Z4Y7A {
  --dd-w: 560px;
  /* The page area: right of the sidebar, left of a chat pinned right (or right of one pinned
   * left), under the top bar (frame tokens from styles/desktop-shell.css). */
  --dd-area-l: var(--dt-page-left, var(--dt-side, 72px));
  --dd-area-r: var(--dt-page-right, var(--dt-inset-right, 0px));
  --dd-area-t: var(--dt-top-total, 56px);
  --dd-area-b: var(--dt-inset-bottom, 0px);
  position: fixed;
  z-index: 401;
  top: var(--dd-area-t);
  bottom: var(--dd-area-b);
  left: var(--dd-area-l);
  right: var(--dd-area-r);
  margin: auto;
  width: min(var(--dd-w), calc(100vw - var(--dd-area-l) - var(--dd-area-r) - 48px));
  height: -moz-fit-content;
  height: fit-content;
  max-height: calc(100vh - var(--dd-area-t) - var(--dd-area-b) - 48px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--dt-l2, #2a2b31);
  color: var(--dt-text-2, #D4D1CB);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .05);
  font: 400 14px/1.5 var(--font-exo2), system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  text-align: left;
  outline: none;
}
/* The entrance: the panel (its surface, edge and shadow) is there at once and opaque; its
 * contents fade in. A panel that faded as a whole let the page or the dialog below read through
 * it for most of the entrance (2026-10-15: Settings text through the Sign out confirmation at
 * 36 ms, opacity .64). Zero specificity, so a child's own animation (a spinner) keeps it. */
:where(.desktop-dialog_dialog__Z4Y7A) > :where(*) { animation: desktop-dialog_ddFade__k4xy_ var(--dt-dur-panel, 180ms) var(--dt-ease, ease-out); }
.desktop-dialog_dialog__Z4Y7A[data-priority="high"] { z-index: 501; }
/* Without a dim, a view reads as a window above the page by a light edge and a deeper shadow.
 * Important: globals.css removes every shadow from [role="dialog"] (focus rings) with !important. */
.desktop-dialog_dialog__Z4Y7A[data-kind="info"] {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .13), 0 26px 72px rgba(0, 0, 0, .66), 0 6px 18px rgba(0, 0, 0, .42) !important;
}
/* A dialog above a full-window viewer (the overview video) centres over the whole window. */
.desktop-dialog_dialog__Z4Y7A[data-area="window"] {
  --dd-area-l: 0px;
  --dd-area-r: 0px;
  --dd-area-t: 0px;
  --dd-area-b: 0px;
}
.desktop-dialog_dialog__Z4Y7A[data-size="sm"] { --dd-w: 440px; }
.desktop-dialog_dialog__Z4Y7A[data-size="md"] { --dd-w: 560px; }
.desktop-dialog_dialog__Z4Y7A[data-size="lg"] { --dd-w: 720px; }
.desktop-dialog_dialog__Z4Y7A[data-size="xl"] { --dd-w: 960px; }
.desktop-dialog_dialog__Z4Y7A[data-size="full"] {
  --dd-w: 1200px;
  height: calc(100vh - var(--dd-area-t) - var(--dd-area-b) - 48px);
}
/* globals.css promotes Radix dialog children to their own layers in Telegram Desktop because the
 * phone dialog is centred by a transform; this one has none, so its text stays sharp. */
html.tdesktop .desktop-dialog_dialog__Z4Y7A > * { transform: none !important; }

@keyframes desktop-dialog_ddFade__k4xy_ {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .desktop-dialog_overlay__EPCAU, :where(.desktop-dialog_dialog__Z4Y7A) > :where(*) { animation: none; }
}

/* ---------------------------------------------------------------- header */
.desktop-dialog_head__OTNG_ {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 14px 14px 6px 24px;
}
.desktop-dialog_head__OTNG_[data-back] { padding-left: 14px; }
.desktop-dialog_title__c1T_Y {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font: 600 20px/1.3 var(--font-cinzel), serif;
  letter-spacing: .01em;
  color: var(--dt-ivory, #ECE4CF);
  font-variant-numeric: tabular-nums;
  /* One line, a little smaller when long (DesktopDialogTitle, fit-lines.ts). */
  --fit-min: 15px;
}
/* Phone titles are built centred, auto-shrunk and truncated for a narrow sheet: on the desktop
 * they read from the left at the title size and wrap instead of being cut. */
.desktop-dialog_title__c1T_Y :where(div, span, p, h1, h2, h3, h4, strong) {
  font-size: inherit !important;
  font-family: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit;
  justify-content: flex-start !important;
  text-align: left !important;
}
.desktop-dialog_title__c1T_Y :where(div, span, h1, h2, h3, h4) { max-width: none !important; }
.desktop-dialog_title__c1T_Y .truncate,
.desktop-dialog_title__c1T_Y [class*="truncate"] {
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
}
.desktop-dialog_title__c1T_Y .uppercase { text-transform: none !important; }
.desktop-dialog_title__c1T_Y :where(img, svg) { flex: none; }
.desktop-dialog_titleRow__zGPUy {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.desktop-dialog_headBtn__sUScW {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--dt-muted, #B9B5BE);
  cursor: pointer;
  transition: background-color var(--dt-dur-hover, 140ms) var(--dt-ease, ease-out), color var(--dt-dur-hover, 140ms) var(--dt-ease, ease-out);
}
.desktop-dialog_headBtn__sUScW:hover { background: rgba(255, 255, 255, .07); color: var(--dt-text, #E8E6E0); }
.desktop-dialog_headBtn__sUScW:active { background: rgba(255, 255, 255, .12); }
.desktop-dialog_headBtn__sUScW:focus-visible { outline: var(--dt-focus, 2px solid #c6ad70); outline-offset: 1px; }

/* ---------------------------------------------------------------- body */
.desktop-dialog_bodyWrap__xAU9r {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.desktop-dialog_bodyWrap__xAU9r::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28px;
  background: linear-gradient(rgba(42, 43, 49, 0), var(--dt-l2, #2a2b31));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dt-dur-hover, 140ms) var(--dt-ease, ease-out);
}
.desktop-dialog_bodyWrap__xAU9r[data-more]::after { opacity: 1; }
.desktop-dialog_body__KgOGF {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px 24px 24px;
}
.desktop-dialog_body__KgOGF[data-flush] { padding: 0; }
.desktop-dialog_dialog__Z4Y7A[data-footer] .desktop-dialog_body__KgOGF:not([data-flush]) { padding-bottom: 12px; }
.desktop-dialog_dialog__Z4Y7A[data-size="full"] .desktop-dialog_bodyInner__EFPuH { height: 100%; }

/* Phone labels drawn at 7-11 px are lifted for desktop viewing distance (11.5 px minimum). */
.desktop-dialog_body__KgOGF [style*="font-size: 7px"],
.desktop-dialog_body__KgOGF [style*="font-size: 8px"],
.desktop-dialog_body__KgOGF [style*="font-size: 9px"],
.desktop-dialog_body__KgOGF .text-\[7px\],
.desktop-dialog_body__KgOGF .text-\[8px\],
.desktop-dialog_body__KgOGF .text-\[9px\] { font-size: 11.5px !important; }
.desktop-dialog_body__KgOGF [style*="font-size: 10px"],
.desktop-dialog_body__KgOGF .text-\[10px\] { font-size: 12px !important; }
.desktop-dialog_body__KgOGF [style*="font-size: 11px"],
.desktop-dialog_body__KgOGF .text-\[11px\] { font-size: 12.5px !important; }
.desktop-dialog_body__KgOGF .text-xs { font-size: 12.5px; }

/* Form controls take the panel's tone or one step lighter, never a darker well. */
.desktop-dialog_body__KgOGF :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), textarea, select) {
  color: var(--dt-text, #E8E6E0);
  caret-color: var(--dt-gold-text, #DDBE62);
}
.desktop-dialog_body__KgOGF :where(input, textarea)::-moz-placeholder { color: var(--dt-faint, #A5A1AB); opacity: 1; }
.desktop-dialog_body__KgOGF :where(input, textarea)::placeholder { color: var(--dt-faint, #A5A1AB); opacity: 1; }
.desktop-dialog_field__w6a6_ {
  background: var(--dt-field, var(--dt-l2-raise, #31323a)) !important;
  border: 1px solid rgba(255, 255, 255, .11) !important;
  border-radius: 8px;
  color: var(--dt-text, #E8E6E0);
  transition: border-color var(--dt-dur-hover, 140ms) var(--dt-ease, ease-out);
}
.desktop-dialog_field__w6a6_:focus-within { border-color: rgba(212, 175, 55, .5) !important; }

/* Phone game buttons inside a desktop dialog keep their colours but take desktop geometry and
 * motion: 36 px, 8 px radius, Exo 2 13.5 px, colour/glow feedback only. */
.desktop-dialog_dialog__Z4Y7A [data-game-button] {
  border-radius: 8px;
  font-family: var(--font-exo2), system-ui, sans-serif;
  letter-spacing: .01em;
  transform: none !important;
  transition: background-color 130ms var(--dt-ease, ease-out), border-color 130ms var(--dt-ease, ease-out), box-shadow 130ms var(--dt-ease, ease-out), filter 130ms var(--dt-ease, ease-out);
}
.desktop-dialog_dialog__Z4Y7A [data-game-button]:not([class*="h-"]) { min-height: 36px; }
.desktop-dialog_dialog__Z4Y7A [data-game-button]:focus-visible { outline: var(--dt-focus, 2px solid #c6ad70); outline-offset: 2px; }

/* Phone full-width buttons inside the body take their content width (buttons are sized to
 * their text); the dialog's main actions sit in the footer. */
.desktop-dialog_body__KgOGF [data-game-button].w-full {
  width: auto !important;
  align-self: flex-start;
  padding-left: 18px;
  padding-right: 18px;
}

/* ---------------------------------------------------------------- footer */
.desktop-dialog_foot__QI0mI {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px 20px;
  box-shadow: 0 -1px 0 var(--dt-line, rgba(255, 255, 255, .055));
}
.desktop-dialog_foot__QI0mI[data-empty] { display: none; }
/* Text on the left of the actions (a total, a hint); the actions stay right. */
.desktop-dialog_footNote___Wzpg {
  flex: 1 1 200px;
  min-width: 0;
  margin-right: auto;
  font: 500 13px/1.4 var(--font-exo2), system-ui, sans-serif;
  color: var(--dt-muted, #B9B5BE);
}
/* A longer note (a shortfall message) takes its own line above the actions. */
.desktop-dialog_footNote___Wzpg[data-row] { flex-basis: 100%; }
.desktop-dialog_footSlot__jpPdb { display: contents; }
/* A dialog's own action row moved here: its wrappers (up to two levels) flatten into the
 * footer row and its buttons are content-sized. */
.desktop-dialog_footSlot__jpPdb > div,
.desktop-dialog_footSlot__jpPdb > div > div { display: contents; }
.desktop-dialog_foot__QI0mI [data-game-button] {
  flex: none !important;
  width: auto !important;
  min-width: 112px;
  height: 36px;
  padding: 0 16px;
  font-size: 13.5px;
  font-weight: 600;
  margin: 0 !important;
}
.desktop-dialog_foot__QI0mI [data-game-button][data-game-button="close"],
.desktop-dialog_foot__QI0mI [data-game-button][data-game-button="secondary"],
.desktop-dialog_foot__QI0mI [data-game-button][data-game-button="ghost"] { min-width: 96px; }
.desktop-dialog_foot__QI0mI :where(button) { white-space: nowrap; }
.desktop-dialog_foot__QI0mI [data-game-button] { text-transform: none; }
/* Other full-width phone buttons moved here (sticky footers) take their content width too. */
.desktop-dialog_foot__QI0mI > .w-full {
  width: auto !important;
  min-width: 112px;
  padding-left: 16px;
  padding-right: 16px;
}

/* ---------------------------------------------------------------- building blocks for bodies */
.desktop-dialog_stack__uSbMt { display: flex; flex-direction: column; gap: 16px; }
.desktop-dialog_cols__dNzHv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.desktop-dialog_section__YTHSh { min-width: 0; }
.desktop-dialog_sectionTitle___FOKD {
  margin: 0 0 8px;
  font: 600 12px/1.3 var(--font-exo2), system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dt-muted, #B9B5BE);
}
.desktop-dialog_lead__MIrg3 {
  margin: 0;
  font: 400 14px/1.55 var(--font-exo2), system-ui, sans-serif;
  color: var(--dt-text-2, #D4D1CB);
}
.desktop-dialog_muted__cVAVJ { color: var(--dt-muted, #B9B5BE); }
.desktop-dialog_facts__JGZdy {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.desktop-dialog_fact__J6BzV {
  min-width: 0;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--dt-l2-sunk, #222328);
}
.desktop-dialog_factLabel__zN6da {
  font: 500 12px/1.3 var(--font-exo2), system-ui, sans-serif;
  color: var(--dt-muted, #B9B5BE);
  overflow-wrap: anywhere;
}
.desktop-dialog_factValue__O6n8g {
  margin: 3px 0 0;
  font: 600 15px/1.25 var(--font-exo2), system-ui, sans-serif;
  color: var(--dt-text, #E8E6E0);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.desktop-dialog_rows__VgD9H { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.desktop-dialog_row__sh71M {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 8px 0;
  box-shadow: 0 1px 0 var(--dt-rule, rgba(255, 255, 255, .045));
}
.desktop-dialog_row__sh71M:last-child { box-shadow: none; }
.desktop-dialog_rowLabel__mK69E { flex: 1 1 auto; min-width: 0; color: var(--dt-text-2, #D4D1CB); overflow-wrap: anywhere; }
.desktop-dialog_rowValue__HsHz2 { flex: none; color: var(--dt-text, #E8E6E0); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.desktop-dialog_error__A0RcG { color: var(--dt-red, #E8837A); font-size: 13px; }
.desktop-dialog_kbd__I6WG_ {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  margin-left: 2px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .22);
  font: 600 11.5px/1 var(--font-exo2), system-ui, sans-serif;
  color: inherit;
  opacity: .8;
}

/* ---------------------------------------------------------------- popovers (PopoverContent) */
.desktop-dialog_popover__fWnUi {
  border-radius: 10px !important;
  background: var(--dt-l3, #37353d);
  color: var(--dt-text-2, #D4D1CB);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45), 0 0 0 1px var(--dt-line-2, rgba(255, 255, 255, .11));
  font: 400 13px/1.5 var(--font-exo2), system-ui, sans-serif;
}
/* As the dialog: the popover's surface is opaque at once, its contents fade in. */
:where(.desktop-dialog_popover__fWnUi) > :where(*) { animation: desktop-dialog_ddFade__k4xy_ 120ms var(--dt-ease, ease-out); }
@media (prefers-reduced-motion: reduce) {
  :where(.desktop-dialog_popover__fWnUi) > :where(*) { animation: none; }
}

/* ---------------------------------------------------------------- media (lightboxes, video) */
.desktop-dialog_mediaOverlay__XrnO1 {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(10, 10, 13, .9);
  animation: desktop-dialog_ddFade__k4xy_ var(--dt-dur-panel, 180ms) var(--dt-ease, ease-out);
}
.desktop-dialog_media__A2wSP {
  position: fixed;
  z-index: 401;
  top: var(--dd-area-t);
  bottom: var(--dd-area-b);
  left: var(--dd-area-l);
  right: var(--dd-area-r);
  --dd-area-l: var(--dt-page-left, var(--dt-side, 72px));
  --dd-area-r: var(--dt-page-right, var(--dt-inset-right, 0px));
  --dd-area-t: var(--dt-top-total, 56px);
  --dd-area-b: var(--dt-inset-bottom, 0px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 72px;
  outline: none;
  animation: desktop-dialog_ddFade__k4xy_ var(--dt-dur-panel, 180ms) var(--dt-ease, ease-out);
}
.desktop-dialog_mediaClose__9CwZk {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  color: var(--dt-ivory, #ECE4CF);
  cursor: pointer;
  transition: background-color var(--dt-dur-hover, 140ms) var(--dt-ease, ease-out);
}
.desktop-dialog_mediaClose__9CwZk:hover { background: rgba(255, 255, 255, .14); }
.desktop-dialog_mediaClose__9CwZk:focus-visible { outline: var(--dt-focus, 2px solid #c6ad70); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .desktop-dialog_mediaOverlay__XrnO1, .desktop-dialog_media__A2wSP { animation: none; }
}

/* ---------------------------------------------------------------- unstructured content (shadcn Dialog,
 * AlertDialog and Sheet primitives): the same panel with padding instead of header/body/footer. */
.desktop-dialog_plain__1M4Ly {
  display: grid;
  gap: 16px;
  padding: 22px 24px 20px;
  overflow-y: auto;
}
.desktop-dialog_plainClose__ORvED {
  position: absolute;
  top: 12px;
  right: 12px;
}

/* ---------------------------------------------------------------- more body blocks */
.desktop-dialog_subTitle__vDL8P {
  margin: 0 0 4px;
  font: 600 16px/1.35 var(--font-exo2), system-ui, sans-serif;
  color: var(--dt-ivory, #ECE4CF);
  overflow-wrap: anywhere;
}
.desktop-dialog_gold__Xli3H { color: var(--dt-gold-text, #DDBE62); }
.desktop-dialog_good__mUfBc { color: var(--dt-green, #45C285); }
.desktop-dialog_linkBtn__PQEVW {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  font: 500 13px/1.4 var(--font-exo2), system-ui, sans-serif;
  color: var(--dt-muted, #B9B5BE);
  cursor: pointer;
  transition: color var(--dt-dur-hover, 140ms) var(--dt-ease, ease-out);
}
.desktop-dialog_linkBtn__PQEVW:hover { color: var(--dt-gold-text, #DDBE62); }
.desktop-dialog_linkBtn__PQEVW:focus-visible { outline: var(--dt-focus, 2px solid #c6ad70); outline-offset: 2px; border-radius: 4px; }
.desktop-dialog_token__pNOLI {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.desktop-dialog_token__pNOLI img { flex: none; border-radius: 50%; }
.desktop-dialog_callout__0vMUx {
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--dt-l2-sunk, #222328);
}
.desktop-dialog_callout__0vMUx[data-tone="gold"] { box-shadow: inset 0 0 0 1px rgba(212, 175, 55, .28); }

/* ---------------------------------------------------------------- art in dialogs (avatars, packs) */
/* The art as it is: no ring or plate; an avatar is a circle, as everywhere in the desktop client. */
.desktop-dialog_avatarArt__majw3 {
  width: 256px;
  height: 256px;
  border-radius: 50%;
  overflow: hidden;
}
.desktop-dialog_artRow__9Pch1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.desktop-dialog_artBtn__IAGP1 {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  transition: background-color var(--dt-dur-hover, 140ms) var(--dt-ease, ease-out), border-color var(--dt-dur-hover, 140ms) var(--dt-ease, ease-out);
}
.desktop-dialog_artBtn__IAGP1:hover { background: rgba(255, 255, 255, .06); border-color: rgba(212, 175, 55, .35); }
.desktop-dialog_artBtn__IAGP1:focus-visible { outline: var(--dt-focus, 2px solid #c6ad70); outline-offset: 2px; }

/* ---------------------------------------------------------------- viewer chrome
 * Window controls over embedded content that brings its own header (the docs viewer): the
 * header buttons at the top right, on the content's header band. */
.desktop-dialog_viewerChrome__hcceW {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
}
.desktop-dialog_viewerFrame__UoSUj {
  position: relative;
  width: 100%;
  height: 100%;
}
.desktop-dialog_viewerFrame__UoSUj iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}