/* BRPLAYX_UI_R10_SAFE_20260929_R9_COMPAT: approved aurora artwork; R8 code and checkout intact. */
:root, html, body, body.bpx-h2 {
  background-color:#08182e!important;
  background-image:linear-gradient(180deg,rgba(3,12,30,.39),rgba(3,13,26,.65)),url('/bearplayx-r12-preview/media/r10-night-bg.png')!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-attachment:fixed!important;
}
/* Product sheet is part of the top layer and MUST be anchored to the viewport.
   R6 had position:relative, which placed it at page origin when opening below fold. */
dialog#bpx-dialog.bpx-product-dialog[open] {
  position:fixed!important;
  inset:0!important;
  margin:auto!important;
  transform:none!important;
  max-width:calc(100vw - 22px)!important;
  max-height:min(86dvh,850px)!important;
  overflow:visible!important;
  background:linear-gradient(145deg,rgba(5,29,64,.95),rgba(2,21,43,.95)),url('/bearplayx-r12-preview/media/r10-night-bg.png') center / cover no-repeat!important;
  background-clip:padding-box!important;
  border:1px solid #77caff!important;
}
dialog#bpx-dialog.bpx-product-dialog[open] .bpx-modal-content {
  max-height:min(86dvh,850px)!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
/* The original R6 mascot image contains a UI stripe; replace that image rather
   than attempting to paint a strip across the real product information. */
dialog#bpx-dialog.bpx-product-dialog>.bpx-peek-mascot { display:none!important; }
dialog#bpx-dialog.bpx-product-dialog>.bpx-r9-mascot {
  display:block!important;
  position:absolute!important;
  right:48px!important;
  top:-103px!important;
  width:clamp(180px,19vw,238px)!important;
  max-width:none!important;
  height:auto!important;
  z-index:4!important;
  pointer-events:none!important;
  user-select:none!important;
  filter:drop-shadow(0 9px 13px rgba(0,10,32,.45));
}
dialog#bpx-dialog.bpx-product-dialog .bpx-modal-head {
  padding-right:clamp(160px,18vw,215px)!important;
  border-bottom:0!important; /* remove the distracting horizontal stripe */
  box-shadow:none!important;
}
dialog#bpx-dialog.bpx-product-dialog .bpx-modal-close {z-index:9!important;position:relative;}
/* Hide the unused avatar selection, but do NOT imply that demo registration is
   a real email or Telegram authentication flow. */
#bpx-dialog[data-view="profile"] .bpx-avatar-label,
#bpx-dialog[data-view="profile"] .bpx-avatar-grid {display:none!important;}
@media(max-width:800px) {
  dialog#bpx-dialog.bpx-product-dialog>.bpx-r9-mascot{width:150px!important;right:39px!important;top:-60px!important;}
  dialog#bpx-dialog.bpx-product-dialog .bpx-modal-head{padding-right:132px!important;}
}
@media(max-width:600px) {
  :root,html,body,body.bpx-h2{background-attachment:scroll!important;}
  dialog#bpx-dialog.bpx-product-dialog[open]{max-height:90dvh!important;max-width:calc(100vw - 14px)!important;}
  dialog#bpx-dialog.bpx-product-dialog[open] .bpx-modal-content{max-height:90dvh!important;}
  dialog#bpx-dialog.bpx-product-dialog>.bpx-r9-mascot{width:106px!important;right:38px!important;top:-36px!important;}
  dialog#bpx-dialog.bpx-product-dialog .bpx-modal-head{padding-right:95px!important;}
}