/* ===== v31 compact popups (all games, lobby + in-game) =====
   Loaded LAST on every lobby and play page. Shrinks every glass popup frame and centres every
   footer button exactly inside the frame's bottom green strip (equal gap above and below).
   Frame art regions (measured from the PNGs, % of the image height):
     panel-small  1040x585  bottom strip 78.5-95.5   -> centre 13.0% from the bottom
     panel-medium  960x780  bottom strip 85.2-96.8   -> centre  9.0% from the bottom
     panel-tall    880x990  bottom strip 89.4-97.6   -> centre  6.5% from the bottom
   --ft-c is that centre, --ft-h the strip height. Buttons (face + lip) take 68% of the strip height;
   their 3D lip (box-shadow under the face) is included, so the visible button is centred.
   The triple [data-theme] beats the older layout-final.css rules (incl. the mobile ones). */

html[data-theme][data-theme][data-theme] {
  --cp-lip: 4px;   /* height of the button's 3D lip under its face */
  --cp-rise: 1px;  /* face centre sits this far above the strip centre so face + lip look centred */
  --cp-small: min(370px, 78vw, calc((100vh - 40px) * 16 / 9));
  --cp-medium: min(345px, 78vw, calc((100vh - 40px) * 16 / 13));
  --cp-tall: min(350px, 84vw, calc((100vh - 30px) * 16 / 18));
  --cp-stack: min(290px, 78vw, calc((100vh - 30px) * 800 / 1235));
}

/* ---------- frame sizes ---------- */
html[data-theme][data-theme][data-theme] body :is(#leave-back .chal-card, #frame-card, #rematch-over .chal-card, #dc-card,
  #conn-box, #modal-wait:not([hidden]), #warn-back .drag-pop, .silver-notice, #req-back .drag-pop) {
  --pw: var(--cp-small) !important;
  --pad-y: calc(var(--pw) * .1202 + 4px) !important;
  --ft-b: 4.5% !important; --ft-h: 17% !important; --ft-c: 13% !important;
  --tt-t: 1.4% !important; --tt-h: 19.97% !important;
  background-image: url("/icons/panel-small-glass.png") !important;
  aspect-ratio: 1040 / 585 !important;
}
html[data-theme][data-theme][data-theme] body #modal-in:not([hidden]) {
  --pw: var(--cp-medium) !important;
  --pad-y: calc(var(--pw) * .1198 + 4px) !important;
  --ft-b: 3.2% !important; --ft-h: 11.6% !important; --ft-c: 9% !important;
  --tt-t: .9% !important; --tt-h: 13.84% !important;
  background-image: url("/icons/panel-medium-glass.png") !important;
  aspect-ratio: 960 / 780 !important;
}
/* Phones: the challenge request uses the small frame (as before), just smaller. */
html[data-theme][data-theme][data-theme] body.mobile #modal-in:not([hidden]) {
  --pw: var(--cp-small) !important;
  --pad-y: calc(var(--pw) * .1202 + 4px) !important;
  --ft-b: 4.5% !important; --ft-h: 17% !important; --ft-c: 13% !important;
  --tt-t: 1.4% !important; --tt-h: 19.97% !important;
  background-image: url("/icons/panel-small-glass.png") !important;
  aspect-ratio: 1040 / 585 !important;
}
html[data-theme][data-theme][data-theme] body :is(#profile-card, #gprofile-card, #set-back .set-panel, #modal-stake:not([hidden])),
html[data-theme][data-theme][data-theme] body #game-set-back#game-set-back .set-panel {
  --pw: var(--cp-tall) !important;
  --pad-y: calc(var(--pw) * .1205 + 4px) !important;
  --ft-b: 2.4% !important; --ft-h: 8.2% !important; --ft-c: 6.5% !important;
  --tt-t: .7% !important; --tt-h: 10% !important;
  --cp-rise: 2px !important;
  background-image: url("/icons/panel-tall-glass.png") !important;
  aspect-ratio: 880 / 990 !important;
}
html[data-theme][data-theme][data-theme] body :is(#leave-back .chal-card, #frame-card, #rematch-over .chal-card, #dc-card,
  #conn-box, #modal-wait:not([hidden]), #modal-in:not([hidden]), #warn-back .drag-pop, .silver-notice, #req-back .drag-pop,
  #profile-card, #gprofile-card, #set-back .set-panel, #modal-stake:not([hidden])),
html[data-theme][data-theme][data-theme] body #game-set-back#game-set-back .set-panel {
  position: relative !important;
  box-sizing: border-box !important;
  width: var(--pw) !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: var(--pad-y) calc(var(--pw) * .07 + 6px) !important;
  font-size: 12.5px !important;
  line-height: 1.3 !important;
  background-color: transparent !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
/* Titles: fitted to the smaller top strip. */
html[data-theme][data-theme][data-theme] body :is(#leave-back .chal-card, #frame-card, #rematch-over .chal-card, #dc-card,
  #conn-box, #modal-wait, #modal-in, #warn-back .drag-pop, .silver-notice, #req-back .drag-pop,
  #profile-card, #gprofile-card, #set-back .set-panel, #modal-stake, #game-set-back .set-panel) > h2 {
  position: absolute !important;
  top: var(--tt-t) !important;
  height: var(--tt-h) !important;
  left: 7% !important;
  right: 7% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  line-height: 1 !important;
  letter-spacing: .07em !important;
}
html[data-theme][data-theme][data-theme] body :is(#leave-back, #frame-card, #rematch-over, #dc-card, #conn-box, #modal-wait,
  #modal-in, #warn-back, .silver-notice, #req-back, #profile-card, #gprofile-card, #set-back, #modal-stake, #game-set-back) h2 .ttl {
  font-size: 13px !important;
  line-height: 1 !important;
}
html[data-theme][data-theme][data-theme] body :is(#profile-x) {
  width: 20px !important; height: 20px !important; min-width: 0 !important; font-size: 14px !important; line-height: 1 !important; padding: 0 !important;
}
/* Body text inside the dark well. */
html[data-theme][data-theme][data-theme] body :is(#leave-back .chal-card, #frame-card, #rematch-over .chal-card, #dc-card,
  #conn-box, #modal-wait, #modal-in, #warn-back .drag-pop, .silver-notice, #req-back .drag-pop) :is(p, .inner, .inner > div, #conn-msg, #warn-body) {
  font-size: 12.5px !important;
  line-height: 1.3 !important;
}
html[data-theme][data-theme][data-theme] body :is(#conn-reason, #conn-until) { margin-top: 3px !important; font-size: 12px !important; }
html[data-theme][data-theme][data-theme] body #dc-count { font-size: 28px !important; }
html[data-theme][data-theme][data-theme] body :is(#modal-in, #modal-wait) .wait-box { gap: 6px !important; margin: 4px 0 !important; padding: 0 !important; }
html[data-theme][data-theme][data-theme] body :is(#modal-in, #modal-wait, #modal-stake) .nm { font-size: 13px !important; }
html[data-theme][data-theme][data-theme] body :is(#in-ico, #wait-ico, #stake-ico) { transform: scale(.8); }
html[data-theme][data-theme][data-theme] body :is(#modal-in, #modal-wait) .inner {
  gap: 2px !important;
  justify-content: center !important;
}

/* ---------- footer button rows: one centred group in the bottom strip ---------- */
html[data-theme][data-theme][data-theme] body :is(#modal-in .acts, #modal-stake .stake-acts, #leave-back .chal-card > div,
  #frame-card > div, #rematch-over .chal-card > div) {
  position: absolute !important;
  left: 6% !important;
  right: 6% !important;
  top: auto !important;
  width: auto !important;
  bottom: calc(var(--ft-c) - var(--ft-h) / 2 + var(--cp-rise)) !important;
  height: var(--ft-h) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px !important;
  background: none !important;
  z-index: 3 !important;
}
html[data-theme][data-theme][data-theme] body :is(#modal-in .acts, #modal-stake .stake-acts, #leave-back .chal-card > div,
  #frame-card > div, #rematch-over .chal-card > div) > :is(button, .btn) {
  flex: 0 0 auto !important;
  align-self: center !important;
  width: auto !important;
  max-width: 48% !important;
  min-width: 84px !important;
  height: calc(68% - var(--cp-lip)) !important;
  min-height: 17px !important;
  max-height: 30px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  font-size: 11.5px !important;
  line-height: 1 !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}
html[data-theme][data-theme][data-theme] body #modal-stake #btn-stake-go { min-width: 112px !important; }

/* ---------- single footer buttons ---------- */
html[data-theme][data-theme][data-theme] body :is(#conn-go, #modal-wait .wait-only, #set-close, #warn-go, #req-go),
html[data-theme][data-theme][data-theme] body #game-set-back#game-set-back #game-set-close {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(var(--ft-c) + var(--cp-rise)) !important;
  transform: translate(-50%, 50%) !important;
  width: auto !important;
  min-width: 96px !important;
  max-width: 70% !important;
  height: calc(var(--ft-h) * .68 - var(--cp-lip)) !important;
  min-height: 17px !important;
  max-height: 30px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  font-size: 11.5px !important;
  line-height: 1 !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  z-index: 3 !important;
}
/* The in-game OK button has a thinner lip than the lobby buttons. */
html[data-theme][data-theme][data-theme] body #game-set-back#game-set-back .set-panel { --cp-rise: 1px !important; }
/* Keep the pressed look (the art moves down 2px) without losing the centring transform. */
html[data-theme][data-theme][data-theme] body :is(#conn-go, #modal-wait .wait-only, #set-close, #warn-go, #req-go):active,
html[data-theme][data-theme][data-theme] body #game-set-back#game-set-back #game-set-close:active {
  transform: translate(-50%, calc(50% + 2px)) !important;
}

/* ---------- Settings: smaller text so every option fits the smaller well ---------- */
html[data-theme][data-theme][data-theme] body :is(#set-back, #game-set-back#game-set-back) .set-body {
  flex: 0 1 auto !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  padding: 0 4% !important;
  justify-content: center !important;
}
html[data-theme][data-theme][data-theme] body :is(#set-back, #game-set-back#game-set-back) .set-sec {
  margin: 1px 0 2px !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
}
html[data-theme][data-theme][data-theme] body :is(#set-back, #game-set-back#game-set-back) .set-sec.eco-head { margin-top: 5px !important; }
html[data-theme][data-theme][data-theme] body :is(#set-back, #game-set-back#game-set-back) .set-opt {
  font-size: 12.5px !important;
  line-height: 1.2 !important;
  padding: 1px 2px !important;
  gap: 8px !important;
}
html[data-theme][data-theme][data-theme] body :is(#set-back, #game-set-back#game-set-back) .set-opt .mark {
  width: 13px !important; height: 13px !important; flex: 0 0 13px !important;
}
html[data-theme][data-theme][data-theme] body :is(#set-back, #game-set-back#game-set-back) .set-opt input:checked + .mark::after {
  left: 3.5px !important; top: 1px !important; width: 3px !important; height: 7px !important;
}

/* ---------- Profile cards: scroll inside the smaller well ---------- */
html[data-theme][data-theme][data-theme] body :is(#profile-card, #gprofile-card) { display: flex !important; flex-direction: column !important; }
html[data-theme][data-theme][data-theme] body :is(#profile-scroll, #gprofile-scroll) {
  flex: 1 1 auto !important; min-height: 0 !important; overflow: auto !important; font-size: 12px !important;
  zoom: .85;
}

/* ---------- Match stakes ---------- */
html[data-theme][data-theme][data-theme] body #modal-stake .inner { gap: 5px !important; font-size: 12px !important; }
html[data-theme][data-theme][data-theme] body #modal-stake .stake-grid { gap: 5px !important; }
html[data-theme][data-theme][data-theme] body #modal-stake .stake-opt { min-height: 26px !important; font-size: 11.5px !important; padding: 2px 4px !important; }

/* ---------- Lobby room chooser: smaller frame, no icon column ---------- */
html[data-theme][data-theme][data-theme] body #room-stack {
  width: var(--cp-stack) !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 800 / 1235 !important;
  max-height: none !important;
  box-sizing: border-box !important;
}
html[data-theme][data-theme][data-theme] body #room-stack > .pick:first-child > h2,
html[data-theme][data-theme][data-theme] body #room-stack > .pick:first-child > h2 .ttl { font-size: 13px !important; }
html[data-theme][data-theme][data-theme] body #room-stack .pick-game h2 { font-size: 10.5px !important; height: auto !important; }
html[data-theme][data-theme][data-theme] body #room-stack #room-rows { gap: 6px !important; padding: 4% 3% !important; }
html[data-theme][data-theme][data-theme] body #room-stack .pick-row {
  min-height: 30px !important;
  padding: 4px 12px !important;
  gap: 8px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
}
html[data-theme][data-theme][data-theme] body #room-stack .pick-row .ico { display: none !important; }
html[data-theme][data-theme][data-theme] body #room-stack .pick-row .nm { flex: 1 1 auto !important; min-width: 0 !important; text-align: left !important; }
html[data-theme][data-theme][data-theme] body #room-stack .pick-row .cnt { flex: 0 0 auto !important; margin-left: auto !important; font-size: 12px !important; }
html[data-theme][data-theme][data-theme] body #room-stack .games-row { gap: 4px !important; padding: 1.5% 2% !important; }
html[data-theme][data-theme][data-theme] body #room-stack .gbtn { min-height: 0 !important; font-size: 10px !important; padding: 0 !important; }
html[data-theme][data-theme][data-theme] body #room-stack .gbtn .ball { width: 40px !important; height: 40px !important; margin: 0 auto 4px !important; }
html[data-theme][data-theme][data-theme] body #room-stack .ball:is(.eight, .nine)::after { width: 20px !important; height: 20px !important; font-size: 10px !important; line-height: 20px !important; }
html[data-theme][data-theme][data-theme] body #room-stack .ball::before { width: 16px !important; height: 9px !important; left: 6px !important; top: 4px !important; }
html[data-theme][data-theme][data-theme] body #room-stack .pick-foot { font-size: 10.5px !important; }
html[data-theme][data-theme][data-theme] body #room-stack .pick-foot small { font-size: 10px !important; }

/* Room Requirements: the old rule forced display:flex, so its Close button could never hide it. */
html[data-theme][data-theme][data-theme] body #req-back[style*="display: none"] { display: none !important; }