/* Quick match and the walkthrough lobby (owner, 2026-10-21): the search, its
   offer, the friend sheet, the «كمّل صكتك» card, and the table's partner lines.
   On the majlis system's tokens and components (styles/majlis-v16.css), in a
   file of its own so that sheet stays byte-identical. Its path names its version:
   v2 is the owner's 2026-10-22 polish (the search in the lobby's own room), and a
   change after it is quick-v3.css (docs/majlis/README.md, "The files name their
   version"). */

/* --- 1 · The lobby's ways in ------------------------------------------------ */

html[data-majlis~="lobby"] #lobbyPanel .pt-solo-controls[data-ways="1"] {
  grid-auto-columns: minmax(0, 1fr);
}
html[data-majlis~="lobby"] #lobbyPanel .panel #soloButton:not(:has(> .tkb-s)) {
  font-size: var(--mj-fs-control);
}
html[data-majlis~="lobby"] #lobbyPanel .panel #friendButton {
  font-size: var(--mj-fs-control);
}
html[data-majlis~="lobby"] #lobbyPanel .pt-solo-controls > :is(#soloButton, #friendButton) {
  padding-inline: 8px;
  white-space: nowrap;
}
/* A game to finish takes the light: the gold العب quiets until it is done. */
html[data-majlis~="lobby"] #lobbyPanel#lobbyPanel[data-resume] .panel .tkbite > #duoButton#duoButton:not(:disabled):not(.is-busy) {
  --mj-btn-face: var(--mj-slate-glass);
  --mj-btn-ink: var(--mj-ivory);
  --mj-btn-sub: var(--mj-ivory-2);
  --mj-btn-edge: rgba(242, 236, 221, .14);
  --mj-btn-shadow: inset 0 1px 0 rgba(255, 246, 222, .18), inset 0 -1px 0 rgba(0, 0, 0, .18);
  --mj-btn-lift: 0 2px 3px rgba(0, 0, 0, .34), 0 10px 20px -8px rgba(0, 0, 0, .55);
  --mj-btn-light: rgba(255, 250, 235, .16);
  font-weight: 800;
  text-shadow: none;
}
html[data-majlis~="lobby"] #lobbyPanel#lobbyPanel#lobbyPanel[data-resume] .panel .tkbite:has(> #duoButton#duoButton) {
  filter: none;
}

/* --- 2 · The «كمّل صكتك» card ------------------------------------------------- */

#resumeCard {
  box-sizing: border-box;
  inline-size: 100%;
  margin: 0 0 var(--mj-lobby-gap, 14px);
  padding: 10px 14px;
  border-radius: var(--mj-r-sheet, 18px);
  background: linear-gradient(180deg, rgba(var(--mj-gold-rgb, 224, 168, 60), .16), rgba(var(--mj-gold-rgb, 224, 168, 60), .05));
  box-shadow: inset 0 0 0 1.5px rgba(var(--mj-gold-rgb, 224, 168, 60), .72), 0 0 30px rgba(var(--mj-gold-rgb, 224, 168, 60), .14);
  color: var(--mj-ivory, #F2ECDD);
  text-align: start;
}
#resumeCard.is-taken {
  background: rgba(233, 163, 91, .08);
  box-shadow: inset 0 0 0 1.5px rgba(233, 163, 91, .6);
}
#resumeCard.is-ended {
  background: rgba(127, 199, 154, .08);
  box-shadow: inset 0 0 0 1.5px rgba(127, 199, 154, .55);
}
#resumeCard .qm-card-kicker {
  margin: 0 0 2px;
  color: var(--mj-gold-300, #FBD549);
  font: 700 .875rem / 1.4 var(--mj-font-ui, Zain, sans-serif);
}
#resumeCard.is-taken .qm-card-kicker { color: #E9A35B; }
#resumeCard.is-ended .qm-card-kicker { color: #7FC79A; }
#resumeCard .qm-card-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
#resumeCard .qm-card-text {
  flex: 1;
  min-inline-size: 0;
  font: 700 var(--mj-fs-body, 1rem) / 1.35 var(--mj-font-ui, Zain, sans-serif);
}
#resumeCard .qm-card-text > span {
  display: block;
}
#resumeCard .qm-card-score {
  color: var(--mj-gold-300, #FBD549);
  font-weight: 800;
  font-size: .9375rem;
}
#resumeCard .qm-card-note {
  color: var(--mj-ivory-2, #B9B2A2);
  font-weight: 400;
  font-size: .875rem;
}
#resumeCard .qm-card-go {
  flex: none;
  min-inline-size: 92px;
  min-block-size: 46px;
  padding: 6px 16px;
}
/* The smallest phones (320x568) keep the lobby on one screen with the card on it. */
@media (max-height: 600px) {
  #resumeCard { padding-block: 8px; margin-block-end: 10px;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: center; }
  /* كمّل stands beside the heading and the line together. */
  #resumeCard .qm-card-row { display: contents; }
  #resumeCard .qm-card-kicker { grid-column: 1; grid-row: 1; margin: 0; }
  #resumeCard .qm-card-text { grid-column: 1; grid-row: 2; }
  #resumeCard .qm-card-go { grid-column: 2; grid-row: 1 / span 2; }
}
/* A 320-wide phone keeps the card's line on one row: the narrower كمّل gives it room. */
@media (max-width: 360px) {
  #resumeCard { padding-inline: 12px; }
  #resumeCard .qm-card-row { gap: 8px; }
  #resumeCard .qm-card-go { min-inline-size: 72px; padding-inline: 12px; }
  #resumeCard .qm-card-text { font-size: .8333rem; }
}

/* --- 3 · The search, found, the offer ------------------------------------------ */

/* The search happens in the lobby's own room (owner, 2026-10-22: "match the
   background of our game"): the dialog is clear, so the cloth, the lamp and the
   mark behind it are the lobby's own layers, and only the controls under the
   mark dissolve into these words (quick_lobby.js `fadeLobby`). Every colour,
   face and type below is a majlis token. */
html[data-quick] body { overflow: hidden; }
.qm-dialog {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  inline-size: 100%;
  max-inline-size: none;
  block-size: 100%;
  max-block-size: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mj-ivory, #F2ECDD);
  font-family: var(--mj-font-ui, Zain, sans-serif);
  overflow: hidden;
}
.qm-dialog::backdrop { background: transparent; }
/* Without the majlis layer there is no lamp room behind: a plain night. */
html:not([data-majlis~="system"]) .qm-dialog { background: #10111B; }
.qm-screen,
.qm-was {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-block-size: 100%;
  padding: var(--qm-top, max(56px, calc(env(safe-area-inset-top, 0px) + 40px))) var(--mj-gutter, 16px)
    max(24px, calc(env(safe-area-inset-bottom, 0px) + 16px));
}
/* The words a state change replaces, fading where they stood. */
.qm-was {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.qm-screen > *,
.qm-was > * {
  inline-size: 100%;
  max-inline-size: 358px;
  margin-inline: auto;
}
.qm-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* The count sits in a well cut into the cloth, as the name field is. */
.qm-ring {
  position: relative;
  inline-size: 168px;
  block-size: 168px;
  margin-block-start: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(var(--mj-lamp-rgb, 255, 214, 150), .06), rgba(var(--mj-lamp-rgb, 255, 214, 150), 0) 64%),
    var(--mj-well, linear-gradient(180deg, #0E0F18, #10111B));
  box-shadow: var(--mj-sunk, inset 0 2px 7px rgba(0, 0, 0, .45)), 0 0 0 1px rgba(242, 236, 221, .06),
    0 18px 40px -18px rgba(0, 0, 0, .7);
}
.qm-ring svg {
  position: absolute;
  inset: -6px;
  inline-size: calc(100% + 12px);
  block-size: calc(100% + 12px);
  transform: rotate(-90deg);
  overflow: visible;
}
.qm-ring circle { fill: none; stroke-width: 4.5; }
.qm-ring-track { stroke: rgba(242, 236, 221, .10); }
.qm-ring-bar {
  stroke: var(--mj-gold-300, #FBD549);
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(var(--mj-lamp-rgb, 255, 214, 150), .55));
  transition: stroke-dashoffset 1s linear;
}
.qm-ring.is-stopped .qm-ring-bar { stroke: rgba(242, 236, 221, .28); filter: none; transition: none; }
.qm-count {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}
.qm-sec {
  color: var(--mj-ivory, #F2ECDD);
  font: 800 3.5rem / 1 var(--mj-font-ui, Zain, sans-serif);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .55);
}
.qm-count small {
  display: block;
  margin-top: 2px;
  color: var(--mj-ivory-4, rgba(242, 236, 221, .46));
  font: 400 .9375rem / 1.2 var(--mj-font-ui, Zain, sans-serif);
}
.qm-title {
  margin: 20px 0 2px;
  color: var(--mj-ivory, #F2ECDD);
  font: 800 var(--mj-fs-title, 1.5rem) / 1.4 var(--mj-font-ui, Zain, sans-serif);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .55), 0 0 24px rgba(var(--mj-lamp-rgb, 255, 214, 150), .18);
}
.qm-sub {
  margin: 8px 12px 0;
  color: var(--mj-ivory-2, rgba(242, 236, 221, .8));
  font: 400 var(--mj-fs-body, 1rem) / 1.6 var(--mj-font-ui, Zain, sans-serif);
}
.qm-faint { color: var(--mj-ivory-4, rgba(242, 236, 221, .46)); font-size: .9375rem; }
.qm-dots { display: inline-flex; gap: 6px; margin-top: 4px; }
.qm-dots span {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--mj-gold-300, #FBD549);
  opacity: .3;
  animation: qm-dot 1.4s ease-in-out infinite;
}
.qm-dots span:nth-child(2) { animation-delay: .2s; }
.qm-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes qm-dot { 50% { opacity: .95; } }
@media (prefers-reduced-motion: reduce) {
  .qm-dots span { animation: none; opacity: .7; }
  .qm-ring-bar { transition: none; }
}
.qm-pair {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  margin: 26px 0 18px;
}
.qm-who {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  inline-size: 112px;
}
.qm-who b { font: 800 var(--mj-fs-control, 1.0625rem) / 1.3 var(--mj-font-ui, Zain, sans-serif); overflow-wrap: anywhere; }
.qm-who em { color: var(--mj-ivory-4, rgba(242, 236, 221, .46)); font: 400 .875rem / 1.3 var(--mj-font-ui, Zain, sans-serif); font-style: normal; }
/* A seat badge is a slate tile, lit from the lamp, as the lobby's controls are. */
.qm-av {
  display: grid;
  place-items: center;
  inline-size: 72px;
  block-size: 72px;
  border-radius: 50%;
  background: var(--mj-slate-glass, linear-gradient(#363C4D, #282D3D));
  box-shadow: inset 0 0 0 1.5px rgba(var(--mj-gold-rgb, 224, 168, 60), .7), var(--mj-e2, 0 10px 20px -8px rgba(0, 0, 0, .55));
  color: var(--mj-ivory, #F2ECDD);
  font: 800 1.75rem / 1 var(--mj-font-ui, Zain, sans-serif);
}
.qm-av.is-ai {
  box-shadow: inset 0 0 0 1.5px var(--mj-agent-hi, #7E71F4), var(--mj-e2, 0 10px 20px -8px rgba(0, 0, 0, .55)),
    0 0 22px -6px var(--mj-agent-glow, rgba(92, 76, 238, .34));
}
/* Saikal's badge wears the lobby's own drawing of the mark (styles/majlis-v16.css
   --mj-mark-cards, byte for byte): no SVG filter, so no lamp glow between its lines. */
.qm-av-mark {
  inline-size: 44px;
  block-size: 42.3px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 707.97 681.23' preserveAspectRatio='none'><defs><clipPath id='c'><path d='M158.59 535.52L98.73 201.96A48 47.4-10.175 0 1 137.6 146.82L405.4 98.76A48 47.4-10.175 0 1 461.02 136.93L466.96 170.06L441.92 166.4L437.39 141.17A24 24.6-10.175 0 0 409.43 121.2L141.63 169.26A24 24.6-10.175 0 0 122.35 197.72L182.46 532.66A1545.4 1545.4 0 0 0 158.59 535.52ZM137.67 560.57A1523.4 1523.4 0 0 1 571.32 560.57A11.4 11.4 0 0 1 568.07 583.13A1500.6 1500.6 0 0 0 140.92 583.13A11.4 11.4 0 0 1 137.67 560.57Z M215.75 529.3L263.08 204.98A48 48 0 0 1 317.5 164.42L568.96 201.11A48 48 0 0 1 609.52 255.54L568.31 537.92A1545.4 1545.4 0 0 0 215.75 529.3Z M209.13 198.75A15 15 0 1 0 239.13 198.75A15 15 0 1 0 209.13 198.75Z M163.1 264.92A15 15 0 1 0 193.1 264.92A15 15 0 1 0 163.1 264.92Z M194.12 198.55L177.88 201.46A16.5 16.5 0 0 0 164.56 220.62L167.47 236.86A5.5 5.5 0 0 0 178.3 234.92L175.39 218.68A5.5 5.5 0 0 1 179.83 212.29L196.07 209.38A5.5 5.5 0 0 0 194.12 198.55Z'/></clipPath><linearGradient id='g1' gradientUnits='userSpaceOnUse' x1='327.75' y1='98' x2='327.75' y2='583.2'><stop offset='0' stop-color='%23fbf3df'/><stop offset='0.05' stop-color='%23f4e3be'/><stop offset='0.5' stop-color='%23e3cd9c'/><stop offset='1' stop-color='%23d9be86'/></linearGradient><linearGradient id='g2' gradientUnits='userSpaceOnUse' x1='413' y1='98' x2='413' y2='583.2'><stop offset='0' stop-color='%23fbf3df'/><stop offset='0.05' stop-color='%23f4e3be'/><stop offset='0.5' stop-color='%23e3cd9c'/><stop offset='1' stop-color='%23d9be86'/></linearGradient><linearGradient id='g3' gradientUnits='userSpaceOnUse' x1='353.98' y1='98' x2='353.99' y2='583.2'><stop offset='0' stop-color='%23eedcb0'/><stop offset='1' stop-color='%23d9be86'/></linearGradient></defs><g clip-path='url(%23c)'><rect x='0' y='0' width='707.97' height='681.23' fill='url(%23g3)'/><rect x='215' y='171' width='396' height='367.5' fill='url(%23g2)'/><rect x='215' y='163' width='225.5' height='18' fill='url(%23g1)'/><rect x='162.5' y='183.5' width='77' height='97' fill='%237e71f4'/></g></svg>") center / contain no-repeat;
}
/* Between the two seats, the woven rule's diamond (the opening's own pip): an
   isolated و in this face reads as a 9. */
.qm-amp {
  align-self: center;
  flex: none;
  inline-size: 8px;
  block-size: 8px;
  margin-block-end: 30px;
  rotate: 45deg;
  background: var(--mj-gold-300, #FBD549);
  box-shadow: 0 0 10px rgba(var(--mj-lamp-rgb, 255, 214, 150), .55);
}
/* The line under a pair is a slate plate, as the notebook is. */
.qm-vs {
  margin: 0;
  padding: 10px 16px;
  border-radius: var(--mj-r-control, 14px);
  background: var(--mj-slate-glass, rgba(40, 45, 61, .9));
  box-shadow: inset 0 0 0 1px var(--mj-slate-edge, rgba(242, 236, 221, .14)), var(--mj-e1, 0 1px 2px rgba(0, 0, 0, .42));
  color: var(--mj-ivory-2, rgba(242, 236, 221, .8));
  font: 400 var(--mj-fs-body, 1rem) / 1.55 var(--mj-font-ui, Zain, sans-serif);
}
.qm-vs b { color: var(--mj-ivory, #F2ECDD); font-weight: 800; }
.qm-vs .qm-keep { white-space: nowrap; }
.qm-line {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: var(--mj-r-control, 14px);
  background: var(--mj-slate-glass, rgba(40, 45, 61, .9));
  box-shadow: inset 0 0 0 1px var(--mj-slate-edge, rgba(242, 236, 221, .14)), var(--mj-e1, 0 1px 2px rgba(0, 0, 0, .42));
  color: var(--mj-ivory, #F2ECDD);
  font: 400 .9375rem / 1.55 var(--mj-font-ui, Zain, sans-serif);
  text-align: start;
}
.qm-line::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  inline-size: 18px;
  block-size: 18px;
  margin-inline-end: 8px;
  border-radius: 50%;
  background: var(--mj-aqeeq-lit, #C4402C);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
}
.qm-actions {
  display: grid;
  gap: 10px;
}
.qm-actions .mj-btn { inline-size: 100%; }
.qm-dealing {
  justify-items: center;
  color: var(--mj-ivory-2, rgba(242, 236, 221, .8));
  font: 400 var(--mj-fs-body, 1rem) / 1.5 var(--mj-font-ui, Zain, sans-serif);
}
/* Short glass (320x568): the ring and the gaps come down, nothing scrolls. */
@media (max-height: 640px) {
  .qm-ring { inline-size: 136px; block-size: 136px; margin-block-start: 8px; }
  .qm-sec { font-size: 2.75rem; }
  .qm-title { margin-block-start: 12px; font-size: 1.3125rem; }
  .qm-pair { margin: 14px 0 12px; }
  .qm-av { inline-size: 60px; block-size: 60px; font-size: 1.5rem; }
  .qm-av-mark { inline-size: 36px; block-size: 34.6px; }
}
html[data-majlis~="system"] .qm-dialog .mj-btn.qm-ai {
  --mj-btn-face: linear-gradient(180deg, var(--mj-agent-hi, #7E71F4), var(--mj-agent, #5C4CEE));
  --mj-btn-ink: #fff;
  --mj-btn-edge: rgba(58, 47, 168, .9);
  --mj-btn-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(40, 30, 120, .5);
  --mj-btn-lift: 0 2px 3px rgba(0, 0, 0, .34), 0 14px 26px -12px var(--mj-agent-glow, rgba(92, 76, 238, .34));
  min-block-size: 56px;
  font-size: var(--mj-fs-lead, 1.3125rem);
}
html[data-majlis~="system"] .qm-dialog .mj-btn.qm-ghost {
  --mj-btn-face: rgba(16, 17, 27, .35);
  --mj-btn-ink: var(--mj-ivory-2, rgba(242, 236, 221, .8));
  --mj-btn-edge: rgba(242, 236, 221, .18);
  --mj-btn-shadow: none;
  --mj-btn-lift: none;
}
/* main's .tkb display rule would show it: hidden means hidden, with the layer or without. */
#friendButton[hidden] { display: none; }
/* Without the majlis layer the sheets are plain dark sheets, never a browser's white box. */
html:not([data-majlis~="system"]) .qm-sheet {
  box-sizing: border-box;
  inline-size: min(100% - 24px, 460px);
  max-block-size: calc(100dvh - 24px);
  margin: auto auto 12px;
  padding: 20px 18px;
  border: 1px solid #4f5669;
  border-radius: 18px;
  background: #1d2130;
  color: #F2ECDD;
  font: 400 1.0625rem / 1.45 Zain, sans-serif;
}
html:not([data-majlis~="system"]) .qm-sheet::backdrop { background: rgba(8, 9, 14, .72); }
html:not([data-majlis~="system"]) .qm-sheet h2 { margin: 0 0 8px; font-size: 1.375rem; text-align: center; }
html:not([data-majlis~="system"]) .qm-sheet :is(.mj-btn, .qm-link) { display: block; inline-size: 100%; margin-block-start: 10px; }
html:not([data-majlis~="system"]) .qm-sheet .qm-coderow { display: flex; gap: 8px; }
html:not([data-majlis~="system"]) .qm-sheet .qm-coderow .mj-btn { inline-size: auto; margin: 0; }
/* Without the majlis layer the screen keeps plain, readable buttons. */
html:not([data-majlis~="system"]) .qm-dialog button,
html:not([data-majlis~="system"]) .qm-sheet button {
  min-block-size: 48px;
  border-radius: 14px;
  border: 1px solid #4f5669;
  background: #323849;
  color: #F2ECDD;
  font: 800 1.0625rem / 1.3 Zain, sans-serif;
}

/* --- 4 · The sheets: عندك خوي, a guest's العب ----------------------------------- */

/* Clear of the home bar as the lobby's own controls are (quick_lobby.js passes the
   lobby's --sa-b in as --qm-sa-b). */
html[data-majlis~="system"] .hx-dialog.qm-sheet,
html:not([data-majlis~="system"]) .qm-sheet {
  margin-block-end: max(12px, env(safe-area-inset-bottom), var(--qm-sa-b, 0px));
}

.qm-sheet .hx-report { text-align: center; }
.qm-sheet .hx-moment { font-weight: 400; color: var(--mj-ivory-2, #B9B2A2); }
.qm-or {
  margin: 4px 0 0;
  color: rgba(242, 236, 221, .55);
  font: 400 .9375rem / 1.4 var(--mj-font-ui, Zain, sans-serif);
}
.qm-coderow {
  display: flex;
  gap: 8px;
}
.qm-sheet .qm-code {
  flex: 1;
  min-inline-size: 0;
  min-block-size: 48px;
  box-sizing: border-box;
  padding: 0 14px;
  border: 1px solid #4f5669;
  border-radius: 12px;
  background: #0d0e16;
  color: var(--mj-ivory, #F2ECDD);
  font: 700 1.0625rem / 1 var(--mj-font-ui, Zain, sans-serif);
  letter-spacing: 3px;
  text-align: center;
}
.qm-sheet .qm-code:placeholder-shown { direction: rtl; letter-spacing: 0; }
.qm-sheet .qm-code:focus-visible {
  outline: var(--mj-focus-width, 2px) solid var(--mj-focus-color, #FBD549);
  outline-offset: var(--mj-focus-gap, 3px);
}
.qm-sheet .qm-enter { flex: none; min-inline-size: 84px; }
.qm-sheet .qm-error:not(:empty) {
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(10, 11, 18, .5);
  color: var(--mj-ivory, #F2ECDD);
  text-align: start;
}
.qm-sheet .qm-error:not(:empty)::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  inline-size: 18px;
  block-size: 18px;
  margin-inline-end: 6px;
  border-radius: 50%;
  background: #d8473b;
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
}
.qm-link {
  justify-self: center;
  min-block-size: 44px;
  padding: 0 12px;
  border: 0;
  background: none;
  color: var(--mj-ivory-2, #B9B2A2);
  font: 400 1rem / 1.4 var(--mj-font-ui, Zain, sans-serif);
  text-decoration: underline;
  text-underline-offset: 5px;
  cursor: pointer;
}
.qm-link:focus-visible {
  outline: var(--mj-focus-width, 2px) solid var(--mj-focus-color, #FBD549);
  outline-offset: var(--mj-focus-gap, 3px);
}

/* --- 5 · The table: the partner's lines and the leave (game/game.js) ------------- */

.qm-banner {
  position: fixed;
  z-index: 40;
  inset-inline: 12px;
  inset-block-start: max(64px, calc(env(safe-area-inset-top, 0px) + 56px));
  margin: 0 auto;
  max-inline-size: 28rem;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(20, 22, 34, .94);
  box-shadow: inset 0 0 0 1px rgba(233, 163, 91, .55), 0 10px 30px rgba(0, 0, 0, .5);
  color: var(--mj-ivory, #F2ECDD);
  font: 400 .9375rem / 1.45 var(--mj-font-ui, Zain, sans-serif);
  text-align: center;
  pointer-events: none;
}
.qm-banner b { display: block; font-weight: 800; font-size: 1.0625rem; }
.qm-banner.is-left { box-shadow: inset 0 0 0 1px rgba(126, 113, 244, .7), 0 10px 30px rgba(0, 0, 0, .5); }