/* ==========================================================================
   v30.25.2 — desktop and iPad proportions
   1. Bottom-left corner: "Runde x/14" and trump in the bottom row, the economy
      pill (BILLIG / DYR RUNDE) above them. Small phones and iPads (trump above
      the round pill): round at the bottom, trump above it, economy on top.
   2. Everything around a HUD keeps the phone proportions on every screen: the
      dealer chip, the emoji button, the turn timer, the status dot, the trick
      pile (cards and count), the bid-winner star. Sizes are the phone design
      measured in HUD widths (var(--lt-hud)), so a desktop HUD 2.6x bigger gets
      2.6x bigger extras - before, they stayed phone-sized on desktops.
   3. The trick cards and the "Venter på udspil" note follow the HUD size too.
   ========================================================================== */

@media (orientation:landscape){
  /* ---- 1. bottom-left corner ---- */
  html body.game-scroll-locked #app.shell .table[data-table-theme="royale-3d"] .hud-status{bottom:calc(8 * var(--px))!important}
  html body.game-scroll-locked #app.shell #liveTrump{bottom:calc(8 * var(--px))!important}
  html body.game-scroll-locked #app.shell .hud-mainline > .economy{bottom:calc(46 * var(--px))!important}

  /* ---- 2. HUD extras in HUD widths (phone design) ---- */
  html body.game-scroll-locked #app.shell .poker-stage .player.seat-r0 .dealer-chip{
    left:calc(var(--lt-hud) * -.2)!important;top:calc(var(--lt-hud) * .145)!important;right:auto!important;bottom:auto!important;
  }
  html body.game-scroll-locked #app.shell .poker-stage .player .dealer-chip{
    width:calc(var(--lt-hud) * .212)!important;height:calc(var(--lt-hud) * .212)!important;min-width:0!important;min-height:0!important;
    font-size:calc(var(--lt-hud) * .1)!important;line-height:1!important;display:grid!important;place-items:center!important;padding:0!important;transform:none!important;
  }
  html body.game-scroll-locked #app.shell .poker-stage .player .emoji-trigger{
    left:calc(var(--lt-hud) * -.2)!important;top:calc(var(--lt-hud) * .445)!important;right:auto!important;bottom:auto!important;
    width:calc(var(--lt-hud) * .233)!important;height:calc(var(--lt-hud) * .233)!important;min-width:0!important;min-height:0!important;
    font-size:calc(var(--lt-hud) * .137)!important;line-height:1!important;display:grid!important;place-items:center!important;padding:0!important;
  }
  html body.game-scroll-locked #app.shell .poker-stage .player .turn-countdown{
    width:calc(var(--lt-hud) * .233)!important;height:calc(var(--lt-hud) * .233)!important;min-width:0!important;min-height:0!important;
    font-size:calc(var(--lt-hud) * .096)!important;line-height:1!important;
  }
  html body.game-scroll-locked #app.shell .poker-stage .player .wait-status-dot{
    width:calc(var(--lt-hud) * .122)!important;height:calc(var(--lt-hud) * .122)!important;min-width:0!important;min-height:0!important;
  }
  html body.game-scroll-locked #app.shell .poker-stage .player .trick-pile{
    width:calc(var(--lt-hud) * .333)!important;height:calc(var(--lt-hud) * .4)!important;min-width:0!important;min-height:0!important;
  }
  html body.game-scroll-locked #app.shell .poker-stage .player .trick-pile .trick-pile-card{
    width:calc(var(--lt-hud) * .167)!important;height:calc(var(--lt-hud) * .233)!important;top:calc(var(--lt-hud) * .111)!important;
  }
  html body.game-scroll-locked #app.shell .poker-stage .player .trick-pile .trick-pile-card:nth-child(2){left:calc(var(--lt-hud) * .078)!important}
  html body.game-scroll-locked #app.shell .poker-stage .player .trick-pile .trick-pile-card:nth-child(3){left:calc(var(--lt-hud) * .122)!important}
  html body.game-scroll-locked #app.shell .poker-stage .player .trick-pile .trick-pile-card:nth-child(4){left:calc(var(--lt-hud) * .156)!important}
  html body.game-scroll-locked #app.shell .poker-stage .player .trick-pile .trick-pile-count{
    left:calc(var(--lt-hud) * .2)!important;top:calc(var(--lt-hud) * .278)!important;right:auto!important;bottom:auto!important;
    width:calc(var(--lt-hud) * .189)!important;height:calc(var(--lt-hud) * .189)!important;min-width:0!important;min-height:0!important;
    font-size:calc(var(--lt-hud) * .078)!important;line-height:1!important;display:grid!important;place-items:center!important;padding:0!important;
  }
  html body.game-scroll-locked #app.shell .poker-stage .player .inline-bid-star{
    width:calc(var(--lt-hud) * .111)!important;height:calc(var(--lt-hud) * .111)!important;min-width:0!important;min-height:0!important;
    font-size:calc(var(--lt-hud) * .052)!important;
  }
}

/* ---- 3. tablets and desktops: trick cards and the wait note follow the HUD size ---- */
@media (orientation:landscape) and (min-height:600px){
  html body.game-scroll-locked #app.shell .poker-stage.count-3 .trick-center-layer,
  html body.game-scroll-locked #app.shell .poker-stage.count-5 .trick-center-layer{
    --rq-hand-card-w:calc(var(--lt-hud) * .41)!important;--rq-hand-card-h:calc(var(--lt-hud) * .6)!important;
  }
  html body.game-scroll-locked #app.shell .poker-stage.count-4 .trick-center-layer{
    --rq-hand-card-w:calc(var(--lt-hud) * .38)!important;--rq-hand-card-h:calc(var(--lt-hud) * .55)!important;
  }
  html body.game-scroll-locked #app.shell .poker-stage.count-3 .trick,
  html body.game-scroll-locked #app.shell .poker-stage.count-5 .trick{--table-card-w:calc(var(--lt-hud) * .41)!important;--table-card-h:calc(var(--lt-hud) * .6)!important}
  html body.game-scroll-locked #app.shell .poker-stage.count-4 .trick{--table-card-w:calc(var(--lt-hud) * .38)!important;--table-card-h:calc(var(--lt-hud) * .55)!important}
  html body.game-scroll-locked #app.shell .poker-stage .trick .played-by{font-size:calc(var(--lt-hud) * .06)!important;line-height:1.3!important;height:calc(var(--lt-hud) * .08)!important;margin-bottom:calc(var(--lt-hud) * .02)!important}
  html body.game-scroll-locked #app.shell .poker-stage .trick .leadlabel{font-size:calc(var(--lt-hud) * .055)!important;top:calc(var(--lt-hud) * -.075)!important}
  html body.game-scroll-locked #app.shell .poker-stage .trick .playcard .card-rank{font-size:calc(var(--table-card-h) * .27)!important;line-height:1!important}
  html body.game-scroll-locked #app.shell .poker-stage .trick .playcard .card-suit{font-size:calc(var(--table-card-h) * .44)!important;line-height:.95!important}
  html body.game-scroll-locked #app.shell .poker-stage .trick-empty-state{font-size:calc(var(--lt-hud) * .07)!important;padding:.45em 1.1em!important}
  /* the economy pill is zoomed on big screens: its distance from the bottom is divided by the zoom */
  html body.game-scroll-locked #app.shell .hud-mainline > .economy{bottom:calc(46 * var(--px) / 1.5)!important;left:calc(8 * var(--px) / 1.5)!important}
}
@media (orientation:landscape) and (min-height:900px){
  html body.game-scroll-locked #app.shell .hud-mainline > .economy{bottom:calc(46 * var(--px) / 2.1)!important;left:calc(8 * var(--px) / 2.1)!important}
}
@media (orientation:landscape) and (min-height:1300px){
  html body.game-scroll-locked #app.shell .hud-mainline > .economy{bottom:calc(46 * var(--px) / 2.8)!important;left:calc(8 * var(--px) / 2.8)!important}
}

/* small phones and iPads: trump sits above the round pill - the economy goes above the trump */
@media (orientation:landscape) and (max-height:540px) and (max-width:760px){
  html body.game-scroll-locked #app.shell #liveTrump{left:8px!important;bottom:46px!important}
  html body.game-scroll-locked #app.shell .hud-mainline > .economy{bottom:84px!important}
}
@media (orientation:landscape) and (max-aspect-ratio:16/10){
  html body.game-scroll-locked #app.shell #liveTrump{left:calc(8 * var(--px))!important;bottom:calc(46 * var(--px))!important}
  html body.game-scroll-locked #app.shell .hud-mainline > .economy{bottom:calc(84 * var(--px))!important}
}
@media (orientation:landscape) and (max-aspect-ratio:16/10) and (min-height:600px){
  html body.game-scroll-locked #app.shell .hud-mainline > .economy{bottom:calc(84 * var(--px) / 1.5)!important}
}
@media (orientation:landscape) and (max-aspect-ratio:16/10) and (min-height:900px){
  html body.game-scroll-locked #app.shell .hud-mainline > .economy{bottom:calc(84 * var(--px) / 2.1)!important}
}
@media (orientation:landscape) and (max-aspect-ratio:16/10) and (min-height:1300px){
  html body.game-scroll-locked #app.shell .hud-mainline > .economy{bottom:calc(84 * var(--px) / 2.8)!important}
}

/* ---- 4. squarer screens (iPads): the table picture is shorter than the screen. It now spans the
   full width and fades softly into a plain dark floor (before: a hard edge and a second, darker,
   enlarged copy of the table below it) ---- */
@media (orientation:landscape) and (max-aspect-ratio:16/10){
  html body.game-scroll-locked #app.shell{
    background:
      linear-gradient(rgba(3,9,15,0),rgba(3,9,15,1) 85%) 50% calc(var(--lt-w) * .5628 - 4vh - 14vh) / 100% 14vh no-repeat,
      var(--table-bg,url('/royale-cinematic-clean-v30.8.4.png')) 50% calc(-4vh) / 100% auto no-repeat,
      linear-gradient(#03090f,#03090f)!important;
  }
}
/* iPads, 5 players: the trick a little lower and smaller, clear of the far seats */
@media (orientation:landscape) and (max-aspect-ratio:16/10) and (min-height:600px){
  html body.game-scroll-locked #app.shell .poker-stage.count-5 .trick-center-layer{top:39%!important}
  html body.game-scroll-locked #app.shell .poker-stage.count-5 .trick{--table-card-w:calc(var(--lt-hud) * .36)!important;--table-card-h:calc(var(--lt-hud) * .52)!important}
}