/* =====================================================================
   v30.22.0: THE TABLE ON A PHONE IN LANDSCAPE (landscape step 2)
   One layout for phones held sideways (height <= 540px, width < 1180px):
   - the table scene a bit smaller so its rails show; opponents sit ON the rail
     (left / right / far side), never on the felt;
   - your own HUD stands bottom-centre on the near rail, above a dark card tray;
   - your cards live in the tray (never confused with the played cards on the felt);
   - meld / trump / pinde / READY live in a box at the bottom right, beside the tray;
   - the played trick sits in the open middle of the felt.
   Everything is scoped to this media query and to #app.shell, so tablets,
   desktops and phones in portrait are untouched. Portrait phones at the table get
   the "Vend telefonen" screen (fullscreen-v30.21.0.css / table-landscape js).
   ===================================================================== */
@media (orientation:landscape){
  /* Android/iPhone landscape: the page has padding for the camera cut-out (layout-v30.5.css);
     a 100vw table plus that padding was pushed off the right edge (owner's phone, v30.22.0).
     The table now sits exactly between the safe-area insets. */
  html body.game-scroll-locked{padding-left:0!important;padding-right:0!important}
  html body.game-scroll-locked #app.shell{
    /* v30.24.0: one layout for every screen held sideways - phones, iPads, desktops. The phone design
       (412px high) is scaled up by --px on taller screens. */
    --px:max(1px,min(2.8px,calc(100vh / 412)));
    position:fixed!important;top:0!important;bottom:0!important;
    left:env(safe-area-inset-left,0px)!important;right:env(safe-area-inset-right,0px)!important;margin:0!important;
    --lt-w:calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));
    --lt-tray-h:clamp(calc(64 * var(--px)),17.5vh,calc(82 * var(--px)));
    --lt-card-h:calc(var(--lt-tray-h) - calc(18 * var(--px)));
    --lt-box-w:clamp(calc(168 * var(--px)),23vw,calc(236 * var(--px)));
    --lt-tray-max:calc(var(--lt-w) - 2 * var(--lt-box-w) - calc(24 * var(--px)));
    --lt-card-w:min(calc(var(--lt-card-h) * .70),calc((var(--lt-tray-max) - calc(64 * var(--px))) / 7));
    --lt-hud:clamp(calc(80 * var(--px)),23vh,calc(104 * var(--px)));    /* every HUD has the same size (owner) */
    --lt-side:var(--lt-hud);
    --lt-far:var(--lt-hud);
    --lt-me:var(--lt-hud);
    width:auto!important;height:auto!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;
    background:
      var(--table-bg,url('/royale-cinematic-clean-v30.8.4.png')) 50% calc(-4vh) / 94% auto no-repeat,
      linear-gradient(rgba(1,7,12,.74),rgba(1,7,12,.74)),
      var(--table-bg,url('/royale-cinematic-clean-v30.8.4.png')) 50% 0 / cover no-repeat,
      #04101b!important;
  }
  html body.game-scroll-locked #app.shell::before,
  html body.game-scroll-locked #app.shell::after{display:none!important}

  /* ---- top: logo centre, tools left, Afslut right ---------------------- */
  html body.game-scroll-locked #app.shell > .top{left:calc(8 * var(--px))!important;right:calc(8 * var(--px))!important;top:calc(4 * var(--px))!important;height:calc(30 * var(--px))!important}
  /* v30.22.2: no logo at the table (owner); the connection notice inside it stays usable */
  html body.game-scroll-locked #app.shell > .top .mini-logo{display:none!important}
  html body.game-scroll-locked #app.shell > .top .ingame-brand{position:absolute!important;left:50%!important;top:calc(4 * var(--px))!important;transform:translateX(-50%)!important;margin:0!important;width:auto!important}
  html body.game-scroll-locked #app.shell > .top .top-right-action{position:absolute!important;right:0!important;top:0!important;min-width:0!important;min-height:calc(26 * var(--px))!important;padding:calc(5 * var(--px)) calc(10 * var(--px))!important;font-size:calc(11 * var(--px))!important}
  html body.game-scroll-locked #app.shell .hud-mainline > .hud-utility-cluster{left:calc(8 * var(--px))!important;right:auto!important;top:calc(6 * var(--px))!important;transform:none!important}
  html body.game-scroll-locked #app.shell .hud-mainline > .hud-utility-cluster .hud-utility-btn{width:calc(26 * var(--px))!important;height:calc(26 * var(--px))!important;font-size:calc(11 * var(--px))!important}
  /* round and economy: the free corner bottom-left, beside the tray */
  /* round and trump side by side, bottom-left beside the tray; economy below them */
  html body.game-scroll-locked #app.shell .table[data-table-theme="royale-3d"] .hud-status{left:calc(8 * var(--px))!important;right:auto!important;top:auto!important;bottom:calc(40 * var(--px))!important;width:calc(94 * var(--px))!important;max-width:none!important;min-height:calc(32 * var(--px))!important;padding:0 calc(6 * var(--px))!important;display:grid!important;place-items:center!important;transform:none!important}
  html body.game-scroll-locked #app.shell .hud-status h3{font-size:calc(12 * var(--px))!important;white-space:nowrap!important}
  html body.game-scroll-locked #app.shell #liveTrump{left:calc(108 * var(--px))!important;right:auto!important;top:auto!important;bottom:calc(40 * var(--px))!important;transform:none!important;margin:0!important;min-height:calc(32 * var(--px))!important}
  html body.game-scroll-locked #app.shell #liveTrump .trump-suit{font-size:calc(20 * var(--px))!important}
  html body.game-scroll-locked #app.shell .hud-mainline > .economy{left:calc(8 * var(--px))!important;right:auto!important;top:auto!important;bottom:calc(8 * var(--px))!important;transform:scale(.8)!important;transform-origin:0 100%!important;max-width:calc(((var(--lt-w) - var(--lt-tray-max)) / 2 - calc(16 * var(--px))) / .8)!important}

  /* ---- the stage covers the screen; seats on the rails ----------------- */
  html body.game-scroll-locked #app.shell .poker-stage{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
  html body.game-scroll-locked #app.shell .poker-stage .player{
    width:var(--lt-side)!important;min-width:var(--lt-side)!important;max-width:var(--lt-side)!important;
    height:calc(var(--lt-side) * .72)!important;min-height:calc(var(--lt-side) * .72)!important;max-height:calc(var(--lt-side) * .72)!important;
  }
  html body.game-scroll-locked #app.shell .poker-stage .player.seat-r0{
    width:var(--lt-me)!important;min-width:var(--lt-me)!important;max-width:var(--lt-me)!important;
    height:calc(var(--lt-me) * .72)!important;min-height:calc(var(--lt-me) * .72)!important;max-height:calc(var(--lt-me) * .72)!important;
    left:50%!important;right:auto!important;top:auto!important;bottom:calc(var(--lt-tray-h) + calc(4 * var(--px)))!important;transform:translateX(-50%)!important;
  }
  /* sides: on the side rails, a little above the middle */
  html body.game-scroll-locked #app.shell .poker-stage .seat-r1{left:2.2%!important;right:auto!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important}
  html body.game-scroll-locked #app.shell .poker-stage.count-3 .seat-r2,
  html body.game-scroll-locked #app.shell .poker-stage.count-4 .seat-r3,
  html body.game-scroll-locked #app.shell .poker-stage.count-5 .seat-r4{left:auto!important;right:2.2%!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important}
  /* your own name plate is not needed down here (you know it is you) - it frees the felt for the trick */
  html body.game-scroll-locked #app.shell .poker-stage .seat-r0 .pname{display:none!important}
  /* far rail */
  html body.game-scroll-locked #app.shell .poker-stage.count-4 .seat-r2,
  html body.game-scroll-locked #app.shell .poker-stage.count-5 .seat-r2,
  html body.game-scroll-locked #app.shell .poker-stage.count-5 .seat-r3{
    width:var(--lt-far)!important;min-width:var(--lt-far)!important;max-width:var(--lt-far)!important;
    height:calc(var(--lt-far) * .72)!important;min-height:calc(var(--lt-far) * .72)!important;max-height:calc(var(--lt-far) * .72)!important;
    top:calc(19vh + var(--lt-far) * .30)!important;bottom:auto!important;transform:translateX(-50%)!important;right:auto!important;
  }
  html body.game-scroll-locked #app.shell .poker-stage.count-4 .seat-r2{left:50%!important;top:calc(calc(26 * var(--px)) + var(--lt-far) * .55)!important}
  html body.game-scroll-locked #app.shell .poker-stage.count-4 .trick-center-layer{top:37%!important;--rq-hand-card-w:clamp(calc(36 * var(--px)),10vh,calc(48 * var(--px)))!important;--rq-hand-card-h:clamp(calc(50 * var(--px)),14vh,calc(66 * var(--px)))!important}
  html body.game-scroll-locked #app.shell .poker-stage.count-5 .seat-r2{left:31%!important}
  html body.game-scroll-locked #app.shell .poker-stage.count-5 .seat-r3{left:69%!important}

  /* v30.24.0: text inside the HUDs follows the HUD size (tablets and desktops have much bigger HUDs) */
  html body.game-scroll-locked #app.shell .poker-stage .player .pname,
  html body.game-scroll-locked #app.shell .poker-stage .player .pname-text{font-size:calc(var(--lt-hud) * .086)!important;line-height:1.15!important}
  html body.game-scroll-locked #app.shell .poker-stage .player .pname{height:auto!important;min-height:0!important;padding:calc(2 * var(--px)) calc(6 * var(--px))!important}
  html body.game-scroll-locked #app.shell .poker-stage .player .player-static-stats strong{font-size:calc(var(--lt-hud) * .094)!important;line-height:1!important}
  html body.game-scroll-locked #app.shell > .top .top-right-action{white-space:nowrap!important}
  html body.game-scroll-locked #app.shell #decisionDock .number-confirm,
  html body.game-scroll-locked #app.shell #decisionDock .trump-confirm,
  html body.game-scroll-locked #app.shell #decisionDock .ready-flow-actions .btn{font-size:calc(14 * var(--px))!important}
  html body.game-scroll-locked #app.shell #decisionDock{overflow:hidden!important}
  html body.game-scroll-locked #app.shell #decisionDock .decision-dock-title,
  html body.game-scroll-locked #app.shell #decisionDock #actions .decision-dock-title{font-size:calc(9 * var(--px))!important}

  /* v30.24.0: the trump pill on every landscape screen (desktops hid it before) */
  html body.game-scroll-locked #app.shell .hud-mainline > #liveTrump.cinematic-trump:not(.hidden){
    display:flex!important;visibility:visible!important;position:absolute!important;align-items:center!important;justify-content:center!important;
    gap:calc(6 * var(--px))!important;padding:calc(4 * var(--px)) calc(9 * var(--px))!important;min-width:calc(104 * var(--px))!important;min-height:calc(32 * var(--px))!important;
    border:1px solid rgba(215,173,69,.78)!important;border-radius:999px!important;background:linear-gradient(180deg,rgba(7,38,66,.94),rgba(3,22,40,.96))!important;
    color:#f9dc88!important;font-size:calc(9 * var(--px))!important;font-weight:1000!important;white-space:nowrap!important}
  html body.game-scroll-locked #app.shell .hud-mainline > #liveTrump.cinematic-trump .trump-suit{width:calc(23 * var(--px))!important;height:calc(23 * var(--px))!important;font-size:calc(17 * var(--px))!important;border-radius:calc(7 * var(--px))!important}
  html body.game-scroll-locked #app.shell .hud-mainline > #liveTrump.cinematic-trump small{color:#d9e5ee!important;font-size:calc(7 * var(--px))!important}
  html body.game-scroll-locked #app.shell > .top .top-right-action{width:auto!important;max-width:none!important}
  html body.game-scroll-locked #app.shell #decisionDock .ready-flow *{font-size:calc(10 * var(--px))}
  html body.game-scroll-locked #app.shell #decisionDock .ready-flow-title{font-size:calc(14 * var(--px))!important}
  html body.game-scroll-locked #app.shell #decisionDock .ready-flow-names *{font-size:calc(8 * var(--px))!important}

  /* ---- the trick in the open middle of the felt ---------------------- */
  html body.game-scroll-locked #app.shell .poker-stage .trick-center-layer{
    left:50%!important;top:35%!important;width:46%!important;height:auto!important;transform:translateX(-50%)!important;
    --rq-hand-card-w:clamp(calc(40 * var(--px)),11.5vh,calc(54 * var(--px)))!important;--rq-hand-card-h:clamp(calc(56 * var(--px)),16vh,calc(76 * var(--px)))!important;
  }

  /* ---- the card tray --------------------------------------------------- */
  html body.game-scroll-locked #app.shell .player-controls{position:absolute!important;inset:0!important;pointer-events:none!important;background:none!important;border:0!important;margin:0!important;padding:0!important}
  html body.game-scroll-locked #app.shell .player-controls > *{pointer-events:auto}
  html body.game-scroll-locked #app.shell #hand{
    position:absolute!important;left:50%!important;bottom:calc(4 * var(--px))!important;top:auto!important;transform:translateX(-50%)!important;
    width:max-content!important;min-width:min(calc(200 * var(--px)),var(--lt-tray-max))!important;max-width:var(--lt-tray-max)!important;height:var(--lt-tray-h)!important;
    margin:0!important;padding:calc(8 * var(--px)) calc(12 * var(--px))!important;gap:calc(6 * var(--px))!important;display:flex!important;justify-content:center!important;align-items:center!important;
    border:calc(2 * var(--px)) solid #c9a24a!important;border-radius:calc(18 * var(--px))!important;background:linear-gradient(180deg,rgba(14,22,36,.97),rgba(8,13,22,.98))!important;
    box-shadow:0 -6px calc(22 * var(--px)) rgba(0,0,0,.55),inset 0 calc(1 * var(--px)) 0 rgba(255,236,170,.18)!important;overflow:visible!important;
  }
  html body.game-scroll-locked #app.shell #hand:not(:has(.handcard)){display:none!important}
  html body.game-scroll-locked #app.shell #hand .handcard{
    flex:0 0 var(--lt-card-w)!important;width:var(--lt-card-w)!important;min-width:var(--lt-card-w)!important;max-width:var(--lt-card-w)!important;
    height:var(--lt-card-h)!important;min-height:var(--lt-card-h)!important;max-height:var(--lt-card-h)!important;margin:0!important;transform:none!important;
  }

  /* the card face follows the card size (rank over suit, like everywhere else) */
  html body.game-scroll-locked #app.shell #hand .handcard{justify-content:center!important;gap:0!important;padding:0!important;overflow:hidden!important}
  html body.game-scroll-locked #app.shell #hand .handcard .card-rank{font-size:calc(var(--lt-card-h) * .27)!important;line-height:1!important;margin:0!important}
  html body.game-scroll-locked #app.shell #hand .handcard .card-suit{font-size:calc(var(--lt-card-h) * .46)!important;line-height:.95!important;margin:0!important}

  /* ---- the decision box, bottom right ---------------------------------- */
  html body.game-scroll-locked #app.shell #decisionDock{
    position:absolute!important;left:auto!important;right:calc(8 * var(--px))!important;top:auto!important;bottom:calc(4 * var(--px))!important;transform:none!important;
    width:var(--lt-box-w)!important;max-width:var(--lt-box-w)!important;min-height:0!important;height:auto!important;max-height:calc(100svh - calc(120 * var(--px)))!important;
    padding:calc(8 * var(--px))!important;margin:0!important;border:calc(2 * var(--px)) solid #ffd766!important;border-radius:calc(16 * var(--px))!important;
    background:linear-gradient(180deg,rgba(13,27,44,.97),rgba(8,17,29,.98))!important;box-shadow:0 calc(10 * var(--px)) calc(28 * var(--px)) rgba(0,0,0,.6)!important;
  }
  html body.game-scroll-locked #app.shell #decisionDock:not(.decision-active):not(.ready-active){display:none!important}
  html body.game-scroll-locked #app.shell #decisionDock .decision-dock-title{font-size:calc(9 * var(--px))!important;line-height:1.15!important;margin:0 0 calc(5 * var(--px))!important;text-align:center!important;white-space:normal!important}
  html body.game-scroll-locked #app.shell #decisionDock .number-selection-row,
  html body.game-scroll-locked #app.shell #decisionDock .trump-selection-row{display:grid!important;grid-template-columns:1fr!important;gap:calc(6 * var(--px))!important;width:100%!important}
  html body.game-scroll-locked #app.shell #decisionDock .decision-dock-buttons,
  html body.game-scroll-locked #app.shell #decisionDock .number-decision-buttons{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:calc(5 * var(--px))!important;width:100%!important;max-width:none!important}
  html body.game-scroll-locked #app.shell #decisionDock .decision-dock-buttons .btn,
  html body.game-scroll-locked #app.shell #decisionDock .number-decision-buttons .btn{flex:none!important;min-width:0!important;max-width:none!important;width:100%!important;height:calc(30 * var(--px))!important;min-height:calc(30 * var(--px))!important;max-height:calc(30 * var(--px))!important;padding:0!important;font-size:calc(13 * var(--px))!important;line-height:1!important}
  html body.game-scroll-locked #app.shell #decisionDock .number-confirm,
  html body.game-scroll-locked #app.shell #decisionDock .trump-confirm{width:100%!important;max-width:none!important;height:calc(32 * var(--px))!important;min-height:calc(32 * var(--px))!important;max-height:calc(32 * var(--px))!important}
  html body.game-scroll-locked #app.shell #decisionDock #actions .btn.number-choice{flex:none!important;width:100%!important;min-width:0!important;max-width:none!important;height:calc(28 * var(--px))!important;min-height:calc(28 * var(--px))!important;max-height:calc(28 * var(--px))!important;padding:0!important;font-size:calc(13 * var(--px))!important}
  html body.game-scroll-locked #app.shell #decisionDock #actions .decision-dock-title{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;font-size:calc(9 * var(--px))!important}
  html body.game-scroll-locked #app.shell #decisionDock #actions,
  html body.game-scroll-locked #app.shell #decisionDock #actions .number-selection-row,
  html body.game-scroll-locked #app.shell #decisionDock #actions .trump-selection-row,
  html body.game-scroll-locked #app.shell #decisionDock #actions .decision-dock-buttons,
  html body.game-scroll-locked #app.shell #decisionDock #actions .number-decision-buttons{height:auto!important;min-height:0!important;max-height:none!important;grid-template-rows:none!important;grid-auto-rows:auto!important;align-content:start!important;margin:0!important}
  html body.game-scroll-locked #app.shell #decisionDock #actions{display:block!important;padding:0!important}
  html body.game-scroll-locked #app.shell #decisionDock .trump-choice .suit-name{display:none!important}
  html body.game-scroll-locked #app.shell #decisionDock .trump-choice{height:calc(40 * var(--px))!important;min-height:calc(40 * var(--px))!important;max-height:calc(40 * var(--px))!important}
  html body.game-scroll-locked #app.shell #decisionDock .trump-choice .suit-symbol{font-size:calc(22 * var(--px))!important;line-height:1!important}
  html body.game-scroll-locked #app.shell #follow{position:absolute!important;left:50%!important;bottom:calc(var(--lt-tray-h) + calc(10 * var(--px)))!important;transform:translateX(-50%)!important;width:auto!important;font-size:calc(11 * var(--px))!important;pointer-events:none!important}
}

/* ---- "Vend telefonen": a phone held upright at the table ---------------- */
.rotate-hint{display:none}
@media (orientation:portrait) and (max-width:1180px){
  body.game-scroll-locked:has(#game:not(.hidden)) #rotateHint{
    position:fixed;inset:0;z-index:13900;display:grid;place-content:center;justify-items:center;gap:10px;padding:24px;text-align:center;
    background:radial-gradient(70% 60% at 50% 45%,rgba(20,44,72,.96),rgba(3,9,16,.98));color:#cbdceb;font-size:14px
  }
  body.game-scroll-locked:has(#game:not(.hidden)) #rotateHint strong{font-size:24px;color:#ffe591;letter-spacing:.5px}
}
.rotate-phone{width:64px;height:104px;border:4px solid #ffd766;border-radius:14px;display:grid;place-items:center;font-size:34px;color:#fff;
  box-shadow:0 0 24px rgba(255,214,102,.45);animation:rotatePhone 2.4s ease-in-out infinite}
@keyframes rotatePhone{0%,20%{transform:rotate(0)}45%,75%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.rotate-phone{animation:none;transform:rotate(-90deg)}}

/* small phones: trump above the round pill instead of beside it */
@media (orientation:landscape) and (max-height:540px) and (max-width:760px){
  html body.game-scroll-locked #app.shell #liveTrump{left:8px!important;bottom:78px!important}
}

/* v30.24.0: the economy pill and the small extras keep their phone proportions on big screens */
@media (orientation:landscape) and (min-height:600px){html body.game-scroll-locked #app.shell .hud-mainline > .economy{zoom:1.5}}
@media (orientation:landscape) and (min-height:900px){html body.game-scroll-locked #app.shell .hud-mainline > .economy{zoom:2.1}}
@media (orientation:landscape) and (min-height:1300px){html body.game-scroll-locked #app.shell .hud-mainline > .economy{zoom:2.8}}
/* v30.24.0: on squarer screens (iPads) the tray is wider - trump goes just above the round pill */
@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(78 * var(--px))!important}
}