/* ROXXEN QR parity — copied from the proven Cards/UNO QR behavior.
   Scope: invitation QR only. No lobby/game logic or unrelated layout is changed. */

:where(.rx-invite-card,.invite-panel,.join-sidebar,.lobby-rail) :where(.roxxen-qr-wrap,.qr-frame,.qr-box){
  display:grid!important;
  place-items:center!important;
  box-sizing:border-box!important;
  margin-left:auto!important;
  margin-right:auto!important;
  overflow:hidden!important;
}

/* qrcode.js often inserts its own inner DIV/CANVAS. Keep that inner renderer
   exactly centered instead of letting its intrinsic 360/720px size offset it. */
:where(.rx-invite-card,.invite-panel,.join-sidebar,.lobby-rail) :where(.roxxen-qr-wrap,.qr-frame,.qr-box) > div{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}

:where(.rx-invite-card,.invite-panel,.join-sidebar,.lobby-rail) :where(.roxxen-qr-wrap,.qr-frame,.qr-box) img,
:where(.rx-invite-card,.invite-panel,.join-sidebar,.lobby-rail) :where(.roxxen-qr-wrap,.qr-frame,.qr-box) canvas,
:where(.rx-invite-card,.invite-panel,.join-sidebar,.lobby-rail) :where(.roxxen-qr-wrap,.qr-frame,.qr-box) table{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:center center!important;
  box-sizing:border-box!important;
}

/* Desktop: same centering rule as Cards, including the running-game/lobby rail. */
@media (min-width:981px){
  :where(.rx-invite-card,.invite-panel,.join-sidebar,.lobby-rail) :where(.roxxen-qr-wrap,.qr-frame,.qr-box){
    width:min(100%,clamp(205px,13vw,360px))!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:1/1!important;
  }
}

/* Phone: same compact square used by Cards. The QR never inherits a desktop
   min-height and therefore cannot be vertically offset/cropped. */
@media (max-width:700px){
  :where(.rx-invite-card,.invite-panel,.join-sidebar,.lobby-rail) :where(.roxxen-qr-wrap,.qr-frame,.qr-box){
    width:clamp(138px,44vw,172px)!important;
    max-width:calc(100vw - 64px)!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:1/1!important;
    padding:7px!important;
    cursor:zoom-in!important;
    touch-action:manipulation!important;
  }
  :where(.rx-invite-card,.invite-panel,.join-sidebar,.lobby-rail) :where(.roxxen-qr-wrap,.qr-frame,.qr-box) > div{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    aspect-ratio:1/1!important;
    border:0!important;
    box-shadow:none!important;
  }

  .rx-qr-zoom{
    position:fixed;
    inset:0;
    z-index:100000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(0,0,0,.88);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }
  .rx-qr-zoom[hidden]{display:none!important}
  .rx-qr-zoom-dialog{
    width:min(88vw,430px);
    max-width:430px;
    position:relative;
    padding:14px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:20px;
    background:#fff;
    box-shadow:0 28px 90px rgba(0,0,0,.62),0 0 0 4px rgba(227,19,44,.11);
  }
  .rx-qr-zoom-dialog img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:1/1!important;
    object-fit:contain!important;
    border-radius:10px;
    margin:0!important;
    padding:0!important;
  }
  .rx-qr-zoom-close{
    position:absolute;
    top:-14px;
    right:-10px;
    width:44px;
    height:44px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.28);
    background:#111318;
    color:#fff;
    font:800 22px/1 system-ui,sans-serif;
    display:grid;
    place-items:center;
    box-shadow:0 10px 30px rgba(0,0,0,.45);
    cursor:pointer;
  }
  .rx-qr-zoom-hint{
    margin:12px 4px 2px;
    color:#20242a;
    text-align:center;
    font:700 12px/1.35 system-ui,sans-serif;
    letter-spacing:.04em;
  }
}

@media (max-width:420px){
  :where(.rx-invite-card,.invite-panel,.join-sidebar,.lobby-rail) :where(.roxxen-qr-wrap,.qr-frame,.qr-box){
    width:min(44vw,154px)!important;
    max-width:154px!important;
  }
}

@media (min-width:701px){.rx-qr-zoom{display:none!important}}