/* TIPS Royale v30.8.28 - bigger player HUDs on phones held upright (additive; loads last).
   Owner's feedback: the HUDs and their numbers are too small on phones, and the back
   players should sit on the table edge like your own seat. With 3 players the two others
   sit on the top edge so the cards are played in the middle.
   - Only phones in portrait (max-width 600px). Tablets, desktops and landscape: unchanged.
   - Size: scale() is added to the seat's transform (the deal, bubble and hit-testing code
     use the rendered rect, so they follow). 3p x1.5, 4p x1.35, 5p x1.3 on tall phones,
     less on short phones and the old size at 320 px.
   - Opponents are placed by their centre (left/top + translate(-50%,-50%)); your own seat
     keeps its anchors and grows upwards from its bottom edge.
   - The value pills are drawn taller than the painted slots, so the numbers grow more
     than the art. */
@media (orientation:portrait) and (max-width:600px){
  /* size per player count; smaller on lower screens (see the height bands below) */
  body.game-scroll-locked .poker-stage.count-3{--seat-scale:1.5}
  body.game-scroll-locked .poker-stage.count-4{--seat-scale:1.35}
  body.game-scroll-locked .poker-stage.count-5{--seat-scale:1.3}
  body.game-scroll-locked .poker-stage .players > .player{--s:var(--seat-scale,1)}

  /* your own seat: same anchors as before, grows upwards from its bottom edge */
  body.game-scroll-locked .poker-stage .players > .player.seat-r0{
    transform:translateX(-50%) scale(var(--seat-scale))!important;
    transform-origin:50% 100%!important;
  }

  /* opponents: placed by their centre */
  body.game-scroll-locked .poker-stage.count-3 .players > .player:not(.seat-r0),
  body.game-scroll-locked .poker-stage.count-4 .players > .player:not(.seat-r0),
  body.game-scroll-locked .poker-stage.count-5 .players > .player:not(.seat-r0){
    right:auto!important;bottom:auto!important;
    left:var(--seat-x)!important;top:var(--seat-y)!important;
    transform:translate(-50%,-50%) scale(var(--seat-scale))!important;
    transform-origin:50% 50%!important;
  }
  /* 3 players: both on the top edge, the cards in the middle */
  body.game-scroll-locked .poker-stage.count-3 .players > .seat-r1{--seat-x:27%;--seat-y:var(--top-y)}
  body.game-scroll-locked .poker-stage.count-3 .players > .seat-r2{--seat-x:73%;--seat-y:var(--top-y)}
  /* 4 players: left, top middle, right */
  body.game-scroll-locked .poker-stage.count-4 .players > .seat-r1{--seat-x:var(--side-x);--seat-y:var(--side-y)}
  body.game-scroll-locked .poker-stage.count-4 .players > .seat-r2{--seat-x:50%;--seat-y:var(--top-y)}
  body.game-scroll-locked .poker-stage.count-4 .players > .seat-r3{--seat-x:calc(100% - var(--side-x));--seat-y:var(--side-y)}
  /* 5 players: left, two on the top edge, right */
  body.game-scroll-locked .poker-stage.count-5 .players > .seat-r1{--seat-x:var(--side-x);--seat-y:var(--side-y)}
  body.game-scroll-locked .poker-stage.count-5 .players > .seat-r2{--seat-x:29%;--seat-y:var(--top-y)}
  body.game-scroll-locked .poker-stage.count-5 .players > .seat-r3{--seat-x:71%;--seat-y:var(--top-y)}
  body.game-scroll-locked .poker-stage.count-5 .players > .seat-r4{--seat-x:calc(100% - var(--side-x));--seat-y:var(--side-y)}

  /* Vertical plan (v30.8.29). Everything below the back seats is measured from them, so the
     gaps stay the same on every screen height:
       --top-y   the back seats; their HUD art is centred on the top edge of the table
       --lane-y  the middle of the played cards: 12px under the back seats' art
       --side-y  the side seats: their name plates 12px under the played cards
     The px factors are the HUD art and name plate offsets measured at scale 1. The max()
     keeps the back seats' name plates under the trump pill (its bottom is about 7.4% + 32px). */
  body.game-scroll-locked .poker-stage.count-3{
    --top-y:max(calc(24.5% + var(--seat-scale) * 25px + 8px), calc(7.4% + 38px + var(--seat-scale) * 100px));
    /* the cards in the middle between the back seats and your own name plate */
    --lane-y:calc((var(--top-y) + 84.25% - var(--seat-scale) * 82px) / 2);
  }
  body.game-scroll-locked .poker-stage.count-4{
    --side-x:17.2%;
    --top-y:max(calc(23.7% + var(--seat-scale) * 24.4px), calc(7.4% + 38px + var(--seat-scale) * 97px));
    --lane-y:calc(var(--top-y) + var(--seat-scale) * 32px + 12px + var(--half-cards,38px));
    --side-y:calc(var(--lane-y) + var(--half-cards,38px) + 12px + var(--seat-scale) * 97px);
  }
  body.game-scroll-locked .poker-stage.count-5{
    --side-x:18.5%;
    --top-y:max(calc(23.2% + var(--seat-scale) * 23px), calc(7.4% + 38px + var(--seat-scale) * 94px));
    --lane-y:calc(var(--top-y) + var(--seat-scale) * 31px + 12px + var(--half-cards,34px));
    --side-y:calc(var(--lane-y) + var(--half-cards,34px) + 12px + var(--seat-scale) * 93px);
  }

  /* While you bid / choose trump / pinde, and between rounds, no cards lie on the table and
     your own seat is lifted above the panel: the side seats move up into the empty lane. */
  body.game-scroll-locked.decision-dock-open .poker-stage.count-4,
  body.game-scroll-locked.decision-dock-open .poker-stage.count-5,
  body.game-scroll-locked:has(.decision-dock.ready-active) .poker-stage.count-4,
  body.game-scroll-locked:has(.decision-dock.ready-active) .poker-stage.count-5{--side-lift:48px}
  body.game-scroll-locked .poker-stage.count-4 .players > .seat-r1,
  body.game-scroll-locked .poker-stage.count-4 .players > .seat-r3,
  body.game-scroll-locked .poker-stage.count-5 .players > .seat-r1,
  body.game-scroll-locked .poker-stage.count-5 .players > .seat-r4{--seat-y:calc(var(--side-y) - var(--side-lift,0px))}

  /* the played cards */
  body.game-scroll-locked .poker-stage.count-3 .trick-center-layer,
  body.game-scroll-locked .poker-stage.count-4 .trick-center-layer,
  body.game-scroll-locked .poker-stage.count-5 .trick-center-layer{top:var(--lane-y)!important}

  /* bigger value pills: 45% taller than the painted slot, centred on it, a bit wider */
  body.game-scroll-locked .poker-stage .player.hud-skin .player-static-stats > span{
    height:calc(var(--hud-value-height,6.5%) * 1.45)!important;
    translate:0 -15.5%!important;
    left:calc(var(--hud-value-left,60%) - var(--hud-value-width,25%) * .12)!important;
    width:calc(var(--hud-value-width,25%) * 1.12)!important;
  }
  body.game-scroll-locked .poker-stage .player.hud-skin .player-static-stats strong{
    font-size:8px!important;
  }

  /* the left seat is close to the screen edge: its dealer chip goes on its inner side */
  body.game-scroll-locked .poker-stage.count-4 .players > .seat-r1 .dealer-chip,
  body.game-scroll-locked .poker-stage.count-5 .players > .seat-r1 .dealer-chip{left:auto!important;right:-18px!important;top:2%!important}
}

/* Lower screens (a phone browser shows less than the screen: address bar and toolbar). */
@media (orientation:portrait) and (max-width:600px) and (max-height:799px){
  body.game-scroll-locked .poker-stage.count-3{--seat-scale:1.4}
  body.game-scroll-locked .poker-stage.count-4{--seat-scale:1.25}
  body.game-scroll-locked .poker-stage.count-5{--seat-scale:1.2}
}
@media (orientation:portrait) and (max-width:600px) and (max-height:699px){
  body.game-scroll-locked .poker-stage.count-3{--seat-scale:1.3}
  body.game-scroll-locked .poker-stage.count-4{--seat-scale:1.12}
  body.game-scroll-locked .poker-stage.count-5{--seat-scale:1.08}
}
@media (orientation:portrait) and (max-width:600px) and (max-height:620px){
  body.game-scroll-locked .poker-stage.count-3{--seat-scale:1.15}
  body.game-scroll-locked .poker-stage.count-4{--seat-scale:1}
  body.game-scroll-locked .poker-stage.count-5{--seat-scale:1}
}
/* The smallest phones (320 px wide): the new places, about the old sizes. */
@media (orientation:portrait) and (max-width:340px){
  body.game-scroll-locked .poker-stage.count-3{--seat-scale:1.15}
  body.game-scroll-locked .poker-stage.count-4{--seat-scale:1}
  body.game-scroll-locked .poker-stage.count-5{--seat-scale:1}
}

/* v30.8.33: the trick piles of the back seats. In the old layout they sat on the inner side
   of the seat; with the back seats next to each other on the top edge (3 players, and the
   two back seats with 5 players) the two piles met in the middle and covered each other
   and the neighbour's HUD. With 3 players they now sit under their own HUD (the cards are
   far below); with 5 players on the outer side (under the HUD they would touch the cards). */
@media (orientation:portrait) and (max-width:600px){
  /* v30.8.34: under the outer half of the HUD (centred, the count badge touched the labels
     of a full trick of 3 cards on some phones) */
  body.game-scroll-locked .poker-stage.count-3 .players > .seat-r1 .trick-pile,
  body.game-scroll-locked .poker-stage.count-3 .players > .seat-r2 .trick-pile{
    right:auto!important;
    top:calc(100% + 3px)!important;bottom:auto!important;
    transform:translateX(-50%)!important;
  }
  body.game-scroll-locked .poker-stage.count-3 .players > .seat-r1 .trick-pile{left:24%!important}
  body.game-scroll-locked .poker-stage.count-3 .players > .seat-r2 .trick-pile{left:76%!important}
  body.game-scroll-locked .poker-stage.count-5 .players > .seat-r2 .trick-pile{
    right:auto!important;left:-30px!important;
  }
  body.game-scroll-locked .poker-stage.count-5 .players > .seat-r3 .trick-pile{
    left:auto!important;right:-30px!important;
  }
}

/* v30.8.33: "BILLIG RUNDE · 3/7 · 4 fri" was cut to "BILLIG RUNDE · 3/7 · ..." on phones (the pill
   is about 90 px wide): two lines instead. */
@media (orientation:portrait) and (max-width:600px){
  body.game-scroll-locked .hud-mainline > .economy{
    white-space:normal!important;
    text-overflow:clip!important;
    overflow:visible!important;
    line-height:1.18!important;
    padding-top:4px!important;padding-bottom:4px!important;
    text-align:center!important;
  }
  body.game-scroll-locked .hud-mainline > .economy .econ-a,
  body.game-scroll-locked .hud-mainline > .economy .econ-b{display:block;white-space:nowrap}
  body.game-scroll-locked .hud-mainline > .economy .econ-sep{display:none}
}