/* One fixed control-strip location on every multiplayer screen. */
#siteNav.page-nav,
#startDialog #lobbyNav.page-nav {
  position: fixed;
  top: 18px;
  right: calc(28px - (100vw - 100%));
  z-index: 100;
}

@media (max-width: 1050px) {
  #siteNav.page-nav,
  #startDialog #lobbyNav.page-nav { width: auto; order: initial; }
}

@media (max-width: 620px) {
  #siteNav.page-nav,
  #startDialog #lobbyNav.page-nav {
    top: 8px;
    right: 9px;
    left: 9px;
    justify-content: center;
  }
}

/* Device comfort: board-first layout without scaling interface text. */

/* The hand fits the width it is given, always.  It used to be a strip that
   scrolled sideways: on a phone six of the thirteen cards were off the screen
   and had to be swiped to, and on a desktop the fan still hung a finger's
   width past both ends of its own band.  A card a player cannot see is a card
   they cannot choose, so the fan tightens instead of running off. */
body .hand{justify-content:center;overflow:visible;max-width:100%;min-width:0;padding:20px 14px 12px}
body .hand .card{
  --card-width:86px;
  /* Never looser than the fan has always been, so a hand down to its last few
     cards keeps its shape instead of spreading across the whole zone. */
  --least-overlap:20px;
  flex:0 0 var(--card-width);
  width:var(--card-width);
  min-width:var(--card-width);
  height:calc(var(--card-width) * 1.419);
  transform:none;
  /* n cards of width w, each lying over the one before by m, are n*w-(n-1)*m
     across.  Solved for the m that lands that on the width this row actually
     has -- which is what a percentage margin is measured against -- and taken
     no smaller than the overlap above.  --cards is set by the renderer, which
     is the one place that knows how many are left. */
  margin:0 calc(-1 * max(var(--least-overlap), (var(--cards, 1) * var(--card-width) - 100%) / max(1, var(--cards, 1) - 1))) 0 0;
}
body .hand .card:last-child{margin-right:0}
body .hand .card:hover,body .hand .card:focus-visible{transform:translateY(-9px);z-index:10}
body .hand .card .corner{font-size:calc(var(--card-width) * .221)}
body .hand-zone{min-width:0;padding-bottom:max(12px,env(safe-area-inset-bottom))}
/* The line that told the player to swipe is gone with the swiping; what is
   left, "tap a card to play", the title already says beside it. */
body .hand-title{flex-wrap:wrap;gap:8px}
body :is(.rules-button,.new-game,.site-nav a,.modal button){min-height:44px}
body :is(dialog,.modal-content){max-width:calc(100vw - 24px);max-height:calc(100svh - 24px);overflow:auto}
@media(min-width:1200px) and (min-height:850px){
 html:has(.game-stage),body:has(.game-stage){height:auto;min-height:100svh;overflow-y:auto}
 body .arcade-shell{height:auto;min-height:100svh;overflow:visible}
 body .hand{justify-content:center}
}
@media(max-width:900px){
 body .game-stage{gap:10px}
 /* Only the card's own size changes here; how far they lie over each other is
    still worked out from the width the row has. */
 body .hand .card{--card-width:82px;--least-overlap:32px}
 body .hand-zone{margin-top:8px}
}
@media(max-height:600px) and (orientation:landscape){
 body .game-table{min-height:250px}
 body .arcade-shell{padding-top:6px}
 body .marquee{display:none}
}

body #newGame{min-height:44px}
@media(max-width:620px){
 body:has(.game-stage) .topbar{padding-top:48px}
 body:has(.game-stage) #siteNav.page-nav{position:absolute;top:8px}
}