/* ROXXEN CARDS alpha28 — mobile QR centering / zoom + prior mobile fixes.
   Loaded AFTER the shared ROXXEN design system so only Cards-specific mobile
   behaviour wins without changing the common desktop look. */

:root{--rx-symbol-medium-size:22px;--rx-symbol-long-size:18px}

/* Long action text can never escape the physical card. */
.card strong,
.hand-card strong,
.opponent-hand-card.face strong,
.draw-flight-face b,
.zero-pending-card strong,
.zero-slot.face strong,
.opp-zero-card.face b{
  max-width:calc(100% - 12px)!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.card strong.symbol-medium,
.hand-card strong.symbol-medium,
.opponent-hand-card.face strong.symbol-medium,
.draw-flight-face b.symbol-medium,
.zero-pending-card strong.symbol-medium,
.zero-slot.face strong.symbol-medium,
.opp-zero-card.face b.symbol-medium{
  font-size:var(--rx-symbol-medium-size,22px)!important;
  letter-spacing:-.06em!important;
}
.card strong.symbol-long,
.hand-card strong.symbol-long,
.opponent-hand-card.face strong.symbol-long,
.draw-flight-face b.symbol-long,
.zero-pending-card strong.symbol-long,
.zero-slot.face strong.symbol-long,
.opp-zero-card.face b.symbol-long{
  font-size:var(--rx-symbol-long-size,18px)!important;
  letter-spacing:-.075em!important;
}
.big-card .corner.tl,
.hand-card .hc-top,
.opponent-hand-card.face .hc-top,
.draw-flight-face small,
.zero-slot.face .hc-top,
.opp-zero-card.face small,
.zero-pending-card small{
  max-width:calc(100% - 14px)!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

/* Cards has a qr-frame containing qr-box. The shared system styles both as
   standalone QR cards; normalize the inner box so mobile never doubles size. */
.qr-frame > .qr-box{
  width:100%!important;
  height:100%!important;
  aspect-ratio:1!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:clamp(8px,2vw,14px)!important;
  box-shadow:none!important;
  background:#fff!important;
}
.qr-frame > .qr-box img,
.qr-frame > .qr-box canvas{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
}

@media(max-width:700px){
  /* Keep text legible but proportional to the smaller mobile card. */
  :root{
    --rx-symbol-size:19px;
    --rx-symbol-medium-size:16px;
    --rx-symbol-long-size:13px;
    --rx-label-size:7px;
    --rx-points-size:6px;
  }
  .qr-frame{
    width:clamp(132px,42vw,190px)!important;
    max-width:calc(100vw - 72px)!important;
    padding:8px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .scan-label{max-width:240px;margin-left:auto!important;margin-right:auto!important;line-height:1.35!important}
  .rx-invite-player-id{max-width:100%!important}

  /* Re-enable the app's exact visualViewport fit after shared system CSS.
     This removes the blank scroll tail below a running match. */
  html.cards-match-active,
  html.cards-match-active body{
    width:100%!important;
    height:var(--rx-app-height,100dvh)!important;
    min-height:0!important;
    max-height:var(--rx-app-height,100dvh)!important;
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }
  html.cards-match-active body.match-active main{
    height:calc(var(--rx-app-height,100dvh) - 50px)!important;
    min-height:0!important;
    max-height:calc(var(--rx-app-height,100dvh) - 50px)!important;
    overflow:hidden!important;
  }
  html.cards-match-active body.match-active .game-shell,
  html.cards-match-active body.match-active .main-stage,
  html.cards-match-active body.match-active .game-view{
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    overflow:hidden!important;
  }
  html.cards-match-active body.match-active .lobby-rail{
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
  }
  html.cards-match-active body.match-active .lobby-rail.open-mobile .rail-inner{
    max-height:100%!important;
    overflow:auto!important;
    overscroll-behavior:contain!important;
  }
}

@media(max-width:420px){
  :root{
    --rx-symbol-size:18px;
    --rx-symbol-medium-size:15px;
    --rx-symbol-long-size:12px;
    --rx-label-size:7px;
    --rx-points-size:6px;
  }
  .qr-frame{
    width:clamp(120px,39vw,158px)!important;
    max-width:calc(100vw - 64px)!important;
    padding:7px!important;
  }
}

/* Short landscape phones: preserve card proportions rather than increasing
   the type while the physical card is being reduced for vertical fit. */
@media(max-height:620px) and (max-width:900px){
  :root{
    --rx-symbol-size:17px;
    --rx-symbol-medium-size:14px;
    --rx-symbol-long-size:11px;
    --rx-label-size:6px;
    --rx-points-size:6px;
  }
}


/* alpha27 — mobile layout recovery
   The lobby and a running match are deliberately different page modes:
   - lobby: natural document flow, invitation card visible below the host area;
   - match: viewport-sized minimum, but NEVER clip real game content.
   This removes both the hidden QR rail and the empty/half-rendered mobile page. */
@media(max-width:700px){
  /* ---- LOBBY: QR/invitation is a real second card in the document flow. ---- */
  html.cards-lobby-active,
  html.cards-lobby-active body,
  body.cards-lobby-active{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:auto!important;
  }
  body.cards-lobby-active main{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }
  body.cards-lobby-active #lobbyView.game-shell:not(.hidden){
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    gap:14px!important;
    overflow:visible!important;
  }
  body.cards-lobby-active #lobbyView.game-shell>.main-stage{
    order:1!important;
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    padding:14px 11px 0!important;
    overflow:visible!important;
  }
  body.cards-lobby-active #lobbyView.game-shell>.lobby-rail,
  body.cards-lobby-active #lobbyView.game-shell>.lobby-rail.open-mobile{
    order:2!important;
    position:static!important;
    inset:auto!important;
    display:block!important;
    width:calc(100% - 22px)!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0 11px 24px!important;
    border:0!important;
    background:transparent!important;
    overflow:visible!important;
    transform:none!important;
  }
  body.cards-lobby-active #lobbyView .lobby-rail .rail-toggle{display:none!important}
  body.cards-lobby-active #lobbyView .lobby-rail .rail-inner,
  body.cards-lobby-active #lobbyView .lobby-rail.open-mobile .rail-inner{
    position:static!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:18px!important;
    opacity:1!important;
    pointer-events:auto!important;
    overflow:visible!important;
    transform:none!important;
  }
  body.cards-lobby-active #lobbyView .qr-frame{
    width:min(46vw,168px)!important;
    max-width:168px!important;
    aspect-ratio:1/1!important;
    margin:14px auto 0!important;
    padding:7px!important;
  }
  body.cards-lobby-active #lobbyView .scan-label{
    max-width:270px!important;
    margin:10px auto 0!important;
    font-size:9px!important;
    line-height:1.4!important;
    letter-spacing:.11em!important;
  }

  /* ---- MATCH: use the viewport as a minimum, never as a clipping mask. ---- */
  html.cards-match-active,
  html.cards-match-active body.match-active{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:auto!important;
  }
  html.cards-match-active body.match-active main{
    height:auto!important;
    min-height:calc(var(--rx-app-height,100dvh) - 50px)!important;
    max-height:none!important;
    overflow:visible!important;
  }
  html.cards-match-active body.match-active #lobbyView.game-shell:not(.hidden){
    height:auto!important;
    min-height:calc(var(--rx-app-height,100dvh) - 50px)!important;
    max-height:none!important;
    overflow:visible!important;
  }
  html.cards-match-active body.match-active #lobbyView>.main-stage{
    height:auto!important;
    min-height:calc(var(--rx-app-height,100dvh) - 50px)!important;
    max-height:none!important;
    overflow:visible!important;
    padding:5px 5px 3px!important;
  }
  html.cards-match-active body.match-active .game-view{
    height:auto!important;
    min-height:calc(var(--rx-app-height,100dvh) - 58px)!important;
    max-height:none!important;
    overflow:visible!important;
    display:flex!important;
    flex-direction:column!important;
  }
  html.cards-match-active body.match-active .table-area{
    flex:1 1 120px!important;
    min-height:clamp(96px,19dvh,160px)!important;
    overflow:visible!important;
  }
  html.cards-match-active body.match-active .self-zone,
  html.cards-match-active body.match-active .hand{
    overflow:visible!important;
  }
  html.cards-match-active body.match-active .lobby-rail{
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
  }
}

@media(max-width:420px){
  body.cards-lobby-active #lobbyView .qr-frame{
    width:min(44vw,154px)!important;
    max-width:154px!important;
  }
  html.cards-match-active body.match-active .table-area{
    min-height:92px!important;
  }
}

/* alpha27.1 — the invitation rail is lobby-only on phones. Shared responsive
   rules were putting its empty 38px card underneath the running match, which
   created the blank scroll tail and made the game look vertically incomplete. */
@media(max-width:700px){
  html.cards-match-active body.match-active #lobbyView.game-shell>.lobby-rail{
    display:none!important;
  }
}


/* alpha28 — QR-only mobile correction.
   The inner .qr-box inherited min-height:260px from the desktop stylesheet.
   Inside a ~154px mobile .qr-frame that made the QR image overflow and appear
   vertically misplaced/cropped. Normalize the inner box completely and add a
   phone-only tap-to-zoom overlay. Desktop QR layout is intentionally unchanged. */
@media(max-width:700px){
  body.cards-lobby-active #lobbyView .qr-frame{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:clamp(138px,44vw,172px)!important;
    max-width:calc(100vw - 64px)!important;
    height:auto!important;
    aspect-ratio:1/1!important;
    padding:7px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
    cursor:zoom-in!important;
    touch-action:manipulation!important;
  }
  body.cards-lobby-active #lobbyView .qr-frame>.qr-box{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    max-width:100%!important;
    max-height:100%!important;
    aspect-ratio:1/1!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    border:0!important;
    border-radius:10px!important;
    box-shadow:none!important;
  }
  body.cards-lobby-active #lobbyView .qr-frame>.qr-box>img,
  body.cards-lobby-active #lobbyView .qr-frame>.qr-box>canvas{
    display:block!important;
    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;
  }

  .cards-qr-zoom{
    position:fixed;
    inset:0;
    z-index:10000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(0,0,0,.88);
    backdrop-filter:blur(10px);
  }
  .cards-qr-zoom.hidden{display:none!important}
  .cards-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);
  }
  .cards-qr-zoom-dialog img{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:1/1;
    object-fit:contain;
    border-radius:10px;
  }
  .cards-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);
  }
  .cards-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(min-width:701px){
  .cards-qr-zoom{display:none!important}
}

/* alpha35: +4 nutzt mobil dieselbe Geometrie wie Hand/Flug/Ablage.
   Keine separate vertikale Mittelstapel-Darstellung mehr. */

/* alpha37 — desktop QR centering in lobby AND running game.
   On PC the nested #qrBox inherits standalone QR-card dimensions. Normalize the
   inner box for the complete game shell, not only while the waiting room is
   active. Mobile/tablet rules and every other element remain untouched. */
@media (min-width:981px){
  #lobbyView .qr-frame > .qr-box{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    aspect-ratio:1/1!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:clamp(8px,.55vw,14px)!important;
    box-shadow:none!important;
    background:#fff!important;
    display:grid!important;
    place-items:center!important;
  }
  #lobbyView .qr-frame > .qr-box > img,
  #lobbyView .qr-frame > .qr-box > canvas{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    margin:0!important;
    object-fit:contain!important;
  }
}