/* TIPS Royale v30.8.18 — FLOATING NAMES + SHARP DECISIONS + TRANSPARENT TRICK TABLE
   =====================================================================
   A clean 3D casino scene stays the master artwork. Desktop remains locked, while
   mobile/tablet layout is now fully CSS-owned and no longer scaled by the legacy JS fitter.
   The scene contains ZERO gameplay UI, HUDs, cards or text. Every changing
   game element stays live HTML above the scene.

   Device strategy:
   - Desktop keeps the large-landscape cinematic layout and desktop scene plate.
   - Tablet uses a separately rendered clean tablet plate and its own safe-zone anchors.
   - Mobile uses a separately rendered clean portrait plate and its own safe-zone anchors.
   - styles-v30.css and layout-v30.5.css remain untouched.
*/

@media all{
  html.game-scroll-locked,
  body.game-scroll-locked{
    background:#01070c!important;
    overflow:hidden!important;
  }

  /* ------------------------------------------------------------------
     MASTER SCENE — clean image only, no baked HUD/UI
     ------------------------------------------------------------------ */
  body.game-scroll-locked #app.shell{
    --scene-ratio:1.7768331562167907; /* 1672 / 941 */
    position:relative!important;
    isolation:isolate!important;
    container-type:inline-size!important;
    width:min(100vw,calc(100svh * var(--scene-ratio)))!important;
    height:auto!important;
    max-width:none!important;
    max-height:100svh!important;
    aspect-ratio:1672 / 941!important;
    margin:0 auto!important;
    padding:0!important;
    overflow:hidden!important;
    border:0!important;
    border-radius:0!important;
    background:#06131f var(--table-bg,url('/royale-cinematic-clean-v30.8.4.png')) center / 100% 100% no-repeat!important;
    box-shadow:0 0 86px rgba(0,0,0,.76)!important;
  }

  /* Ambient room glow and a slow reflection pass. These are visual-only. */
  body.game-scroll-locked #app.shell::before,
  body.game-scroll-locked #app.shell::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
  }

  body.game-scroll-locked #app.shell::before{
    z-index:2;
    background:
      radial-gradient(circle at 5.0% 27%,rgba(255,182,68,.16),transparent 14%),
      radial-gradient(circle at 95.0% 27%,rgba(255,182,68,.16),transparent 14%),
      radial-gradient(ellipse at 50% 5%,rgba(56,128,171,.055),transparent 40%);
    mix-blend-mode:screen;
    animation:tipsV3084RoomBreathe 7.2s ease-in-out infinite alternate;
  }

  body.game-scroll-locked #app.shell::after{
    z-index:3;
    clip-path:ellipse(43.7% 31.7% at 50% 52.2%);
    background:linear-gradient(
      108deg,
      transparent 0 31%,
      rgba(255,245,212,0) 38%,
      rgba(255,244,211,.075) 47%,
      rgba(255,226,151,.028) 55%,
      transparent 64% 100%
    );
    mix-blend-mode:screen;
    transform:translateX(-42%);
    opacity:.12;
    animation:tipsV3084TableSweep 16s ease-in-out infinite;
  }

  @keyframes tipsV3084RoomBreathe{
    from{opacity:.62}
    to{opacity:1}
  }

  @keyframes tipsV3084TableSweep{
    0%,12%{transform:translateX(-42%);opacity:.05}
    43%{opacity:.25}
    56%{opacity:.38}
    88%,100%{transform:translateX(42%);opacity:.05}
  }

  /* ------------------------------------------------------------------
     LIVE TOP ROW — buttons + transparent TIPS logo
     ------------------------------------------------------------------ */
  body.game-scroll-locked #app.shell > .top{
    position:absolute!important;
    z-index:95!important;
    left:7.55%!important;
    right:7.55%!important;
    top:1.7%!important;
    width:auto!important;
    height:8.4%!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:1fr auto 1fr!important;
    align-items:start!important;
    pointer-events:none!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  body.game-scroll-locked #app.shell > .top > *{pointer-events:auto}

  body.game-scroll-locked #app.shell > .top .ingame-brand{
    align-self:start!important;
    justify-self:center!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    padding:0!important;
  }

  body.game-scroll-locked #app.shell > .top .mini-logo{
    display:block!important;
    width:clamp(126px,9.4cqw,158px)!important;
    height:auto!important;
    max-height:none!important;
    object-fit:contain!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    filter:drop-shadow(0 7px 8px rgba(0,0,0,.42))!important;
  }

  body.game-scroll-locked #app.shell > .top .top-left-action,
  body.game-scroll-locked #app.shell > .top .top-right-action{
    margin-top:1.35%!important;
    width:clamp(118px,8.9cqw,150px)!important;
    min-height:34px!important;
    padding:8px 14px!important;
    border-radius:9px!important;
    font-size:clamp(9px,.72cqw,12px)!important;
    font-weight:900!important;
    box-shadow:0 5px 15px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.12)!important;
  }

  /* ------------------------------------------------------------------
     GAME ROOT — all live UI overlays the scene
     ------------------------------------------------------------------ */
  body.game-scroll-locked #game.gamegrid:not(.hidden){
    position:absolute!important;
    z-index:20!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    display:block!important;
    pointer-events:none!important;
  }

  body.game-scroll-locked #game > .table[data-table-theme="royale-3d"]{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:hidden!important;
    pointer-events:none!important;
  }

  body.game-scroll-locked #game > .side{display:none!important}

  /* ------------------------------------------------------------------
     FLOATING TOP CONTROLS (replaces the old blue bar)
     ------------------------------------------------------------------ */
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .game-hud{
    position:absolute!important;
    z-index:90!important;
    inset:0!important;
    margin:0!important;
    pointer-events:none!important;
  }

  body.game-scroll-locked .table[data-table-theme="royale-3d"] .hud-mainline{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    display:block!important;
    pointer-events:none!important;
  }

  body.game-scroll-locked .table[data-table-theme="royale-3d"] .hud-mainline > *{
    position:absolute!important;
    pointer-events:auto!important;
  }

  body.game-scroll-locked .table[data-table-theme="royale-3d"] .hud-status{
    left:7.7%!important;
    top:9.95%!important;
    width:auto!important;
    min-width:0!important;
    max-width:min(17.2cqw,260px)!important;
    padding:9px 14px!important;
    border:1px solid rgba(90,145,183,.88)!important;
    border-radius:16px!important;
    background:linear-gradient(180deg,rgba(6,28,44,.84),rgba(3,18,31,.88))!important;
    box-shadow:0 8px 20px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06)!important;
    backdrop-filter:blur(6px)!important;
  }

  body.game-scroll-locked .hud-status h3{
    margin:0!important;
    font-size:clamp(13px,1.08cqw,18px)!important;
    line-height:1.1!important;
    letter-spacing:0!important;
  }

  body.game-scroll-locked #liveTrump{
    display:none!important;
  }

  body.game-scroll-locked .hud-mainline > .hud-utility-cluster{
    right:16.9%!important;
    left:auto!important;
    top:2.05%!important;
    transform:none!important;
    gap:8px!important;
    padding:4px 8px!important;
    border-radius:16px!important;
    background:linear-gradient(180deg,rgba(6,28,44,.84),rgba(3,18,31,.88))!important;
    border:1px solid rgba(90,145,183,.78)!important;
    box-shadow:0 8px 20px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.04)!important;
    backdrop-filter:blur(6px)!important;
  }

  body.game-scroll-locked .hud-mainline > .economy{
    right:7.7%!important;
    top:9.95%!important;
    min-width:0!important;
    max-width:min(16.2cqw,230px)!important;
    padding:9px 14px!important;
    border-radius:16px!important;
    box-shadow:0 8px 20px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.04)!important;
    backdrop-filter:blur(6px)!important;
  }

  /* ------------------------------------------------------------------
     POKER STAGE = FULL-SCENE COORDINATE SURFACE
     No table art here; the clean scene lives on #app.shell.
     ------------------------------------------------------------------ */
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .poker-stage{
    position:absolute!important;
    z-index:30!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    aspect-ratio:auto!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    border:0!important;
    border-radius:0!important;
    background:none!important;
    box-shadow:none!important;
    filter:none!important;
    container-type:inline-size!important;
    pointer-events:none!important;
  }

  body.game-scroll-locked .table[data-table-theme="royale-3d"] .poker-stage::before{
    /* faint embossed TIPS watermark — decorative, never gameplay UI */
    content:""!important;
    position:absolute!important;
    z-index:1!important;
    left:39%!important;
    top:28.2%!important;
    width:22%!important;
    height:19%!important;
    background:url('/tips-royale-logo.png') center/contain no-repeat!important;
    opacity:.045!important;
    filter:grayscale(1) sepia(.55) hue-rotate(72deg) saturate(.65) brightness(1.5)!important;
    pointer-events:none!important;
  }

  body.game-scroll-locked .table[data-table-theme="royale-3d"] .poker-stage::after{content:none!important}

  body.game-scroll-locked .poker-stage .players{
    position:absolute!important;
    inset:0!important;
    z-index:50!important;
    pointer-events:none!important;
  }

  body.game-scroll-locked .poker-stage .players > .player{
    z-index:4!important;
    pointer-events:none!important;
  }

  /* Player artwork scale is intentionally the same for all 5 seats. */
  body.game-scroll-locked .poker-stage.count-5 .player{
    width:clamp(164px,11.25cqw,188px)!important;
    min-width:clamp(164px,11.25cqw,188px)!important;
    max-width:clamp(164px,11.25cqw,188px)!important;
    height:clamp(112px,7.55cqw,126px)!important;
    min-height:clamp(112px,7.55cqw,126px)!important;
    max-height:clamp(112px,7.55cqw,126px)!important;
  }

  body.game-scroll-locked .poker-stage.count-4 .player{
    width:clamp(170px,11.6cqw,194px)!important;
    min-width:clamp(170px,11.6cqw,194px)!important;
    max-width:clamp(170px,11.6cqw,194px)!important;
    height:clamp(116px,7.8cqw,131px)!important;
    min-height:clamp(116px,7.8cqw,131px)!important;
    max-height:clamp(116px,7.8cqw,131px)!important;
  }

  body.game-scroll-locked .poker-stage.count-3 .player{
    width:clamp(176px,12cqw,200px)!important;
    min-width:clamp(176px,12cqw,200px)!important;
    max-width:clamp(176px,12cqw,200px)!important;
    height:clamp(120px,8cqw,136px)!important;
    min-height:clamp(120px,8cqw,136px)!important;
    max-height:clamp(120px,8cqw,136px)!important;
  }

  body.game-scroll-locked .poker-stage .player .hud-full-frame,
  body.game-scroll-locked .poker-stage .player.hud-skin > .player-card-body{
    width:100%!important;
  }

  /* --------------------------- 5P anchors --------------------------- */
  body.game-scroll-locked .poker-stage.count-5 .seat-r0{
    left:50%!important;right:auto!important;top:auto!important;bottom:15.75%!important;
    transform:translateX(-50%)!important;
  }
  body.game-scroll-locked .poker-stage.count-5 .seat-r1{
    left:8.25%!important;right:auto!important;top:55.0%!important;bottom:auto!important;
    transform:translateY(-50%)!important;
  }
  body.game-scroll-locked .poker-stage.count-5 .seat-r2{
    left:30.55%!important;right:auto!important;top:24.15%!important;bottom:auto!important;
    transform:translateX(-50%)!important;
  }
  body.game-scroll-locked .poker-stage.count-5 .seat-r3{
    left:67.55%!important;right:auto!important;top:24.15%!important;bottom:auto!important;
    transform:translateX(-50%)!important;
  }
  body.game-scroll-locked .poker-stage.count-5 .seat-r4{
    left:auto!important;right:8.25%!important;top:55.0%!important;bottom:auto!important;
    transform:translateY(-50%)!important;
  }

  /* 4P: bottom + left + centered top + right. */
  body.game-scroll-locked .poker-stage.count-4 .seat-r0{
    left:50%!important;right:auto!important;top:auto!important;bottom:15.75%!important;
    transform:translateX(-50%)!important;
  }
  body.game-scroll-locked .poker-stage.count-4 .seat-r1{
    left:8.25%!important;right:auto!important;top:55.0%!important;bottom:auto!important;
    transform:translateY(-50%)!important;
  }
  body.game-scroll-locked .poker-stage.count-4 .seat-r2{
    left:50%!important;right:auto!important;top:24.15%!important;bottom:auto!important;
    transform:translateX(-50%)!important;
  }
  body.game-scroll-locked .poker-stage.count-4 .seat-r3{
    left:auto!important;right:8.25%!important;top:55.0%!important;bottom:auto!important;
    transform:translateY(-50%)!important;
  }

  /* 3P: bottom + left + right. */
  body.game-scroll-locked .poker-stage.count-3 .seat-r0{
    left:50%!important;right:auto!important;top:auto!important;bottom:15.75%!important;
    transform:translateX(-50%)!important;
  }
  body.game-scroll-locked .poker-stage.count-3 .seat-r1{
    left:9.0%!important;right:auto!important;top:55.0%!important;bottom:auto!important;
    transform:translateY(-50%)!important;
  }
  body.game-scroll-locked .poker-stage.count-3 .seat-r2{
    left:auto!important;right:9.0%!important;top:55.0%!important;bottom:auto!important;
    transform:translateY(-50%)!important;
  }

  /* During bidding/trump/pinde, make a dedicated lower decision lane instead
     of allowing it to cover the local HUD. */
  body.game-scroll-locked.decision-dock-open .poker-stage .seat-r0{
    bottom:23.0%!important;
  }

  /* ------------------------------------------------------------------
     LIVE TRICK / CENTER CARDS
     ------------------------------------------------------------------ */
  body.game-scroll-locked .poker-stage .trick-center-layer{
    position:absolute!important;
    z-index:44!important;
    left:50%!important;
    top:51.4%!important;
    width:41.5%!important;
    max-width:none!important;
    height:13.2%!important;
    transform:translate(-50%,-50%)!important;
    margin:0!important;
    pointer-events:none!important;
  }

  body.game-scroll-locked .poker-stage .trick{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    padding:1.4%!important;
    border:0!important;
    border-radius:12px!important;
    background:linear-gradient(180deg,rgba(1,59,43,.50),rgba(0,44,34,.58))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.02),0 8px 22px rgba(0,0,0,.08)!important;
    backdrop-filter:none!important;
  }

  body.game-scroll-locked .poker-stage .trick-empty-state{
    background:rgba(0,44,34,.58)!important;
    border:0!important;
    color:rgba(255,255,255,.78)!important;
  }

  /* ------------------------------------------------------------------
     Lower lane — live decisions and hand are on the foreground rail area
     ------------------------------------------------------------------ */
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .player-controls{
    position:absolute!important;
    z-index:76!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    overflow:visible!important;
    pointer-events:none!important;
  }

  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock{
    position:absolute!important;
    z-index:7!important;
    left:50%!important;
    top:78.6%!important;
    bottom:auto!important;
    width:min(58%,720px)!important;
    min-height:48px!important;
    max-height:58px!important;
    transform:translateX(-50%)!important;
    padding:6px 10px!important;
    background:linear-gradient(180deg,rgba(5,31,46,.94),rgba(2,18,29,.96))!important;
    border-color:rgba(78,142,182,.82)!important;
    box-shadow:0 8px 24px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.045)!important;
    pointer-events:auto!important;
  }

  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock:not(.decision-active):not(.ready-active){
    background:transparent!important;
    border-color:transparent!important;
    box-shadow:none!important;
    pointer-events:none!important;
  }

  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock #follow,
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .wait,
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .reveal-hint{
    display:none!important;
  }


  body.game-scroll-locked .table[data-table-theme="royale-3d"] .hand{
    position:absolute!important;
    z-index:8!important;
    left:50%!important;
    bottom:2.35%!important;
    width:100%!important;
    min-height:0!important;
    transform:translateX(-50%)!important;
    display:flex!important;
    align-items:flex-end!important;
    justify-content:center!important;
    flex-wrap:nowrap!important;
    pointer-events:auto!important;
    --rq-hand-gap:clamp(5px,.42cqw,8px)!important;
    --rq-hand-card-w:clamp(62px,4.55cqw,76px)!important;
    --rq-hand-card-h:clamp(89px,6.25cqw,105px)!important;
  }

  body.game-scroll-locked .table[data-table-theme="royale-3d"] .handcard{
    box-shadow:0 12px 22px rgba(0,0,0,.46),0 2px 3px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.90)!important;
  }

  /* HUD utility overlays remain live and outside the ornate frame. */
  body.game-scroll-locked .poker-stage .player.hud-skin .dealer-chip{z-index:85!important}
  body.game-scroll-locked .poker-stage .player.local.hud-skin .emoji-trigger{z-index:86!important;pointer-events:auto!important}
  body.game-scroll-locked .poker-stage .player .wait-status-dot{z-index:87!important}

  body.game-scroll-locked .table[data-table-theme="royale-3d"] .player.hud-skin .hud-full-frame{
    filter:drop-shadow(0 8px 9px rgba(0,0,0,.50))!important;
  }
}


/* ------------------------------------------------------------------
   TABLET CINEMATIC EDITION
   ------------------------------------------------------------------ */
@media (max-width:1179px){
  html.game-scroll-locked,
  body.game-scroll-locked{
    background:#01070c!important;
    overflow:hidden!important;
  }

  body.game-scroll-locked #app.shell{
    width:100vw!important;
    height:100svh!important;
    max-width:none!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    background:#07131f url('/royale-cinematic-tablet-v30.8.20.png') center top / 100% 100% no-repeat!important;
  }

  body.game-scroll-locked #app.shell::after{
    clip-path:ellipse(44% 23% at 50% 56%)!important;
    opacity:.13!important;
  }

  body.game-scroll-locked #app.shell > .top{
    left:2.6%!important;
    right:2.6%!important;
    top:1.0%!important;
    height:7.2%!important;
  }

  body.game-scroll-locked #app.shell > .top .mini-logo{
    width:clamp(82px,10.2vw,110px)!important;
  }

  body.game-scroll-locked #app.shell > .top .top-left-action,
  body.game-scroll-locked #app.shell > .top .top-right-action{
    width:auto!important;
    min-width:90px!important;
    min-height:29px!important;
    padding:7px 10px!important;
    font-size:clamp(8px,1.08vw,10px)!important;
    border-radius:11px!important;
  }

  body.game-scroll-locked .table[data-table-theme="royale-3d"] .hud-status{
    left:2.6%!important;
    top:9.4%!important;
    max-width:136px!important;
    padding:6px 9px!important;
    border-radius:13px!important;
  }

  body.game-scroll-locked .hud-status h3{
    font-size:clamp(9px,1.24vw,12px)!important;
    line-height:1.05!important;
  }

  body.game-scroll-locked .hud-mainline > .hud-utility-cluster{
    left:2.6%!important;
    right:auto!important;
    top:4.6%!important;
    padding:3px 6px!important;
    gap:5px!important;
    border-radius:13px!important;
  }

  body.game-scroll-locked .hud-mainline > .hud-utility-cluster .hud-utility-btn{
    width:27px!important;
    height:27px!important;
    font-size:11px!important;
  }

  body.game-scroll-locked .hud-mainline > .economy{
    right:2.6%!important;
    top:9.4%!important;
    max-width:138px!important;
    padding:6px 9px!important;
    border-radius:13px!important;
    font-size:9px!important;
  }

  body.game-scroll-locked .poker-stage.count-5 .player{
    width:116px!important;min-width:116px!important;max-width:116px!important;
    height:83px!important;min-height:83px!important;max-height:83px!important;
  }
  body.game-scroll-locked .poker-stage.count-4 .player{
    width:120px!important;min-width:120px!important;max-width:120px!important;
    height:86px!important;min-height:86px!important;max-height:86px!important;
  }
  body.game-scroll-locked .poker-stage.count-3 .player{
    width:124px!important;min-width:124px!important;max-width:124px!important;
    height:89px!important;min-height:89px!important;max-height:89px!important;
  }

  body.game-scroll-locked .poker-stage.count-5 .seat-r0,
  body.game-scroll-locked .poker-stage.count-4 .seat-r0,
  body.game-scroll-locked .poker-stage.count-3 .seat-r0{bottom:20.8%!important}

  body.game-scroll-locked .poker-stage.count-5 .seat-r1{left:4.2%!important;top:52.8%!important}
  body.game-scroll-locked .poker-stage.count-5 .seat-r2{left:31.0%!important;top:28.6%!important}
  body.game-scroll-locked .poker-stage.count-5 .seat-r3{left:69.0%!important;top:28.6%!important}
  body.game-scroll-locked .poker-stage.count-5 .seat-r4{right:4.2%!important;top:52.8%!important}

  body.game-scroll-locked .poker-stage.count-4 .seat-r1{left:4.5%!important;top:52.9%!important}
  body.game-scroll-locked .poker-stage.count-4 .seat-r2{left:50%!important;top:28.8%!important}
  body.game-scroll-locked .poker-stage.count-4 .seat-r3{right:4.5%!important;top:52.9%!important}

  body.game-scroll-locked .poker-stage.count-3 .seat-r1{left:6.4%!important;top:53.0%!important}
  body.game-scroll-locked .poker-stage.count-3 .seat-r2{right:6.4%!important;top:53.0%!important}

  body.game-scroll-locked.decision-dock-open .poker-stage .seat-r0{bottom:30.6%!important}

  body.game-scroll-locked .poker-stage .trick-center-layer{
    top:57.8%!important;
    width:48%!important;
    height:10.8%!important;
  }

  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock{
    top:auto!important;
    bottom:calc(1.1% + 88px)!important;
    width:min(90%,720px)!important;
    height:64px!important;
    min-height:64px!important;
    max-height:64px!important;
    overflow:visible!important;
  }

  body.game-scroll-locked .table[data-table-theme="royale-3d"] .hand{
    bottom:0.9%!important;
    --rq-hand-gap:clamp(4px,.68vw,7px)!important;
    --rq-hand-card-w:clamp(46px,6.2vw,58px)!important;
    --rq-hand-card-h:clamp(66px,9.0vw,82px)!important;
  }
}

/* ------------------------------------------------------------------
   MOBILE CINEMATIC EDITION
   ------------------------------------------------------------------ */
@media (max-width:680px){
  body.game-scroll-locked #app.shell{
    width:100vw!important;
    height:100svh!important;
    max-width:none!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    background:#07131f url('/royale-cinematic-mobile-v30.8.20.png') center top / 100% 100% no-repeat!important;
  }

  body.game-scroll-locked #app.shell::after{
    clip-path:ellipse(56% 15% at 50% 59%)!important;
    opacity:.09!important;
  }

  body.game-scroll-locked #app.shell > .top{
    left:1.7%!important;
    right:1.7%!important;
    top:0.9%!important;
    height:6.5%!important;
  }

  body.game-scroll-locked #app.shell > .top .mini-logo{
    width:62px!important;
    margin-top:1px!important;
  }

  body.game-scroll-locked #app.shell > .top .top-left-action,
  body.game-scroll-locked #app.shell > .top .top-right-action{
    min-width:74px!important;
    min-height:25px!important;
    padding:5px 6px!important;
    font-size:7.2px!important;
    border-radius:9px!important;
  }

  body.game-scroll-locked .table[data-table-theme="royale-3d"] .hud-status{
    left:2.2%!important;
    top:8.0%!important;
    max-width:88px!important;
    padding:4px 6px!important;
    border-radius:11px!important;
  }

  body.game-scroll-locked .hud-status h3{
    font-size:8.0px!important;
    line-height:1.0!important;
  }

  body.game-scroll-locked .hud-mainline > .hud-utility-cluster{
    left:2.2%!important;
    right:auto!important;
    top:4.7%!important;
    padding:2px 4px!important;
    gap:3px!important;
    border-radius:11px!important;
  }

  body.game-scroll-locked .hud-mainline > .hud-utility-cluster .hud-utility-btn{
    width:21px!important;
    height:21px!important;
    font-size:9px!important;
  }

  body.game-scroll-locked .hud-mainline > .economy{
    right:2.2%!important;
    top:8.1%!important;
    max-width:90px!important;
    padding:4px 6px!important;
    border-radius:11px!important;
    font-size:7.2px!important;
  }

  body.game-scroll-locked .poker-stage.count-5 .player{
    width:88px!important;min-width:88px!important;max-width:88px!important;
    height:63px!important;min-height:63px!important;max-height:63px!important;
  }
  body.game-scroll-locked .poker-stage.count-4 .player{
    width:92px!important;min-width:92px!important;max-width:92px!important;
    height:66px!important;min-height:66px!important;max-height:66px!important;
  }
  body.game-scroll-locked .poker-stage.count-3 .player{
    width:96px!important;min-width:96px!important;max-width:96px!important;
    height:69px!important;min-height:69px!important;max-height:69px!important;
  }

  body.game-scroll-locked .poker-stage.count-5 .seat-r0,
  body.game-scroll-locked .poker-stage.count-4 .seat-r0,
  body.game-scroll-locked .poker-stage.count-3 .seat-r0{bottom:12.4%!important}

  body.game-scroll-locked .poker-stage.count-5 .seat-r1{left:2.6%!important;top:55.6%!important}
  body.game-scroll-locked .poker-stage.count-5 .seat-r2{left:31.8%!important;top:34.0%!important}
  body.game-scroll-locked .poker-stage.count-5 .seat-r3{left:68.2%!important;top:34.0%!important}
  body.game-scroll-locked .poker-stage.count-5 .seat-r4{right:2.6%!important;top:55.6%!important}

  body.game-scroll-locked .poker-stage.count-4 .seat-r1{left:3.0%!important;top:55.8%!important}
  body.game-scroll-locked .poker-stage.count-4 .seat-r2{left:50%!important;top:34.2%!important}
  body.game-scroll-locked .poker-stage.count-4 .seat-r3{right:3.0%!important;top:55.8%!important}

  body.game-scroll-locked .poker-stage.count-3 .seat-r1{left:5.8%!important;top:56.0%!important}
  body.game-scroll-locked .poker-stage.count-3 .seat-r2{right:5.8%!important;top:56.0%!important}

  body.game-scroll-locked.decision-dock-open .poker-stage .seat-r0{bottom:18.4%!important}

  body.game-scroll-locked .poker-stage .trick-center-layer{
    top:49.8%!important;
    width:54%!important;
    height:8.4%!important;
  }

  body.game-scroll-locked .table[data-table-theme="royale-3d"] .trick{border-radius:10px!important}

  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock{
    top:auto!important;
    bottom:calc(0.9% + 72px)!important;
    width:min(96%,430px)!important;
    height:58px!important;
    min-height:58px!important;
    max-height:58px!important;
    padding:4px 5px!important;
    overflow:visible!important;
  }

  /* Phone hand is deliberately readable again. Seven cards still fit a 360px
     portrait viewport because width/gap are capped by viewport-relative clamp. */
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .hand{
    bottom:0.6%!important;
    --rq-hand-gap:3px!important;
    --rq-hand-card-w:clamp(40px,11.8vw,46px)!important;
    --rq-hand-card-h:clamp(58px,17.2vw,67px)!important;
  }

  /* Override the legacy portrait 2-row decision component. Melding and Pinde
     keep every numeric choice on one row; OK sits in its own narrow column. */
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .actions.decision-docked-actions{
    width:100%!important;
    height:100%!important;
    padding:2px 3px!important;
    gap:2px!important;
  }

  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .decision-dock-title{
    margin:0!important;
    min-height:9px!important;
    font-size:6px!important;
    line-height:1!important;
  }

  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .number-selection-row{
    width:100%!important;
    height:40px!important;
    grid-template-columns:minmax(0,1fr) 43px!important;
    gap:4px!important;
    align-items:center!important;
  }

  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .number-decision-buttons,
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .bidding-decisions,
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .sticks-decision-buttons{
    width:100%!important;
    max-width:none!important;
    grid-template-columns:repeat(var(--decision-count,8),minmax(0,1fr))!important;
    grid-auto-rows:38px!important;
    gap:3px!important;
  }

  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .number-choice,
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .number-choice.decision-pass,
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .bid-choice,
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .sticks-choice{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:38px!important;
    min-height:38px!important;
    max-height:38px!important;
    padding:0 1px!important;
    border-radius:7px!important;
    font-size:11px!important;
  }

  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .number-choice.decision-pass,
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .bid-choice.decision-pass{
    font-size:7px!important;
  }

  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .number-confirm,
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .bid-confirm,
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .sticks-confirm{
    width:43px!important;
    min-width:43px!important;
    max-width:43px!important;
    height:38px!important;
    min-height:38px!important;
    max-height:38px!important;
    padding:0 2px!important;
    font-size:7px!important;
    border-radius:7px!important;
  }

  /* Trump uses one compact row on portrait cinematic mobile. */
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .trump-decision-buttons{
    width:min(94%,320px)!important;
    height:40px!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:4px!important;
  }

  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .trump-decision-buttons .trump-choice{
    min-width:0!important;
    width:100%!important;
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
    padding:2px 3px!important;
  }

  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .trump-decision-buttons .trump-choice .suit-symbol{
    font-size:21px!important;
  }

  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .trump-decision-buttons .trump-choice .suit-name{
    font-size:5px!important;
    margin-top:0!important;
  }

  /* Name strip gets its own compact mobile calibration independent of artwork. */
  body.game-scroll-locked .poker-stage .player.hud-skin .pname{
    top:calc(var(--hud-name-top,51.5%) - 2.7%)!important;
    height:4.5%!important;
    padding:0 3%!important;
    font-size:clamp(4.8px,1.55vw,6.2px)!important;
  }
}

@media (prefers-reduced-motion:reduce){
  body.game-scroll-locked #app.shell::before,
  body.game-scroll-locked #app.shell::after{animation:none!important}
  body.game-scroll-locked #app.shell::after{opacity:.08!important;transform:none!important}
}






/* =====================================================================
   v30.8.20 — corrective rollback + surgical mobile polish
   ===================================================================== */

/* Player names are now independent floating labels ABOVE the entire HUD art.
   This guarantees the name can never occupy the Meldte row regardless of the
   artwork calibration used by a specific HUD skin. */
body.game-scroll-locked .table[data-table-theme="royale-3d"] .player.hud-skin .pname{
  top:0!important;
  left:5%!important;
  right:5%!important;
  width:auto!important;
  height:clamp(14px,1.15cqw,18px)!important;
  min-height:0!important;
  padding:0 clamp(5px,.55cqw,8px)!important;
  transform:translateY(-118%)!important;
  border:1px solid rgba(238,198,73,.88)!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(7,39,66,.97),rgba(3,21,38,.98))!important;
  box-shadow:0 3px 8px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.10)!important;
  color:#fff5cf!important;
  font-size:clamp(8px,.72cqw,11px)!important;
  line-height:1!important;
  letter-spacing:.02em!important;
  z-index:90!important;
}
body.game-scroll-locked .table[data-table-theme="royale-3d"] .player.hud-skin .pname.name-condensed{
  font-size:clamp(7.3px,.66cqw,9.8px)!important;
}
body.game-scroll-locked .table[data-table-theme="royale-3d"] .player.hud-skin .pname.name-super-condensed{
  font-size:clamp(6.6px,.60cqw,8.8px)!important;
}

/* Tablet/mobile keep the round indicator as a small one-line pill. Trump gets
   its own centered badge on the blue wall immediately under the logo. */
@media (max-width:1179px){
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .hud-status{
    width:auto!important;
    min-width:0!important;
    max-width:112px!important;
    padding:5px 9px!important;
    border-radius:999px!important;
  }
  body.game-scroll-locked .hud-status h3{
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:nowrap!important;
  }
  body.game-scroll-locked .hud-mainline > #liveTrump.cinematic-trump:not(.hidden){
    display:flex!important;
    visibility:visible!important;
    left:50%!important;
    right:auto!important;
    top:8.2%!important;
    transform:translateX(-50%)!important;
    min-width:104px!important;
    min-height:30px!important;
    padding:4px 9px!important;
    gap:6px!important;
    align-items:center!important;
    justify-content:center!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;
    box-shadow:0 6px 16px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.08)!important;
    color:#f9dc88!important;
    font-size:9px!important;
    font-weight:1000!important;
    white-space:nowrap!important;
    backdrop-filter:blur(4px)!important;
  }
  body.game-scroll-locked .hud-mainline > #liveTrump.cinematic-trump .trump-suit{
    width:23px!important;
    height:23px!important;
    font-size:17px!important;
    border-radius:7px!important;
  }
  body.game-scroll-locked .hud-mainline > #liveTrump.cinematic-trump small{
    color:#d9e5ee!important;
    font-size:7px!important;
    letter-spacing:.05em!important;
  }

  /* Put upper players on the visual upper table rail rather than floating deep
     inside the felt. Side players stay on their established stable anchors. */
  body.game-scroll-locked .poker-stage.count-5 .seat-r2{top:25.8%!important}
  body.game-scroll-locked .poker-stage.count-5 .seat-r3{top:25.8%!important}
  body.game-scroll-locked .poker-stage.count-4 .seat-r2{top:25.8%!important}

  body.game-scroll-locked .poker-stage .player.hud-skin .pname{
    left:4%!important;
    right:4%!important;
    height:14px!important;
    padding:0 5px!important;
    font-size:8px!important;
    transform:translateY(-122%)!important;
  }
  body.game-scroll-locked .poker-stage .player.hud-skin .pname.name-condensed{font-size:7.2px!important}
  body.game-scroll-locked .poker-stage .player.hud-skin .pname.name-super-condensed{font-size:6.5px!important}
}

@media (max-width:680px){
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .hud-status{
    left:2.2%!important;
    top:8.0%!important;
    max-width:82px!important;
    padding:4px 7px!important;
  }
  body.game-scroll-locked .hud-status h3{font-size:8px!important}

  body.game-scroll-locked .hud-mainline > #liveTrump.cinematic-trump:not(.hidden){
    top:7.8%!important;
    min-width:92px!important;
    min-height:27px!important;
    padding:3px 7px!important;
    gap:5px!important;
    font-size:8px!important;
  }
  body.game-scroll-locked .hud-mainline > #liveTrump.cinematic-trump .trump-suit{
    width:21px!important;
    height:21px!important;
    font-size:16px!important;
  }
  body.game-scroll-locked .hud-mainline > #liveTrump.cinematic-trump small{font-size:6px!important}

  /* Mobile portrait table-edge calibration from the 390×844 live screenshot. */
  body.game-scroll-locked .poker-stage.count-5 .seat-r2{top:29.7%!important}
  body.game-scroll-locked .poker-stage.count-5 .seat-r3{top:29.7%!important}
  body.game-scroll-locked .poker-stage.count-4 .seat-r2{top:29.9%!important}

  body.game-scroll-locked .poker-stage .player.hud-skin .pname{
    height:13px!important;
    left:1%!important;
    right:1%!important;
    padding:0 4px!important;
    font-size:7.4px!important;
    transform:translateY(-126%)!important;
  }
  body.game-scroll-locked .poker-stage .player.hud-skin .pname.name-condensed{font-size:6.8px!important}
  body.game-scroll-locked .poker-stage .player.hud-skin .pname.name-super-condensed{font-size:6.1px!important}
}


/* =====================================================================
   v30.8.20 — corrective rollback + surgical HUD cleanup
   ===================================================================== */

/* The old artwork name slot is baked into every HUD PNG. It is now covered by
   a decorative bridge because the live player name lives above the portrait.
   This makes all HUD characters consistent and removes the "second name box". */
body.game-scroll-locked .table[data-table-theme="royale-3d"] .player.hud-skin .hud-full-frame::after{
  content:""!important;
  position:absolute!important;
  z-index:4!important;
  left:10.5%!important;
  right:10.5%!important;
  top:min(calc(var(--hud-name-top,51.5%) - .5%),calc(var(--hud-bid-top,58.15%) - 6.0%))!important;
  height:5.35%!important;
  pointer-events:none!important;
  border-top:1px solid rgba(241,201,76,.76)!important;
  border-bottom:1px solid rgba(241,201,76,.52)!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(8,42,67,.985),rgba(4,23,41,.99))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)!important;
}

/* Keep the emoji away from the local trick pile. Dealer remains upper-left;
   emoji moves to the lower-left exterior of the HUD. */
body.game-scroll-locked .poker-stage .player.local.hud-skin .emoji-trigger{
  left:-22px!important;
  right:auto!important;
  top:62%!important;
  transform:none!important;
}

/* Played cards should look like physical cards lying directly on the felt.
   Remove the dynamic shadow/background panel around the complete trick. */
body.game-scroll-locked .table[data-table-theme="royale-3d"] .poker-stage .trick-center-layer{
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
body.game-scroll-locked .table[data-table-theme="royale-3d"] .poker-stage .trick{
  width:max-content!important;
  max-width:100%!important;
  height:auto!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
body.game-scroll-locked .table[data-table-theme="royale-3d"] .poker-stage .played-by{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:#fff!important;
  text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 4px rgba(0,0,0,.55)!important;
}
body.game-scroll-locked .table[data-table-theme="royale-3d"] .poker-stage .leadlabel{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 4px rgba(0,0,0,.55)!important;
}

/* Sharper decision language: blue = Meldte, magenta = Pinde, dark/gold = Trump.
   Selected values get a clear gold ring and OK uses one consistent confirmation
   treatment. */
body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock{
  border:1px solid rgba(91,157,202,.92)!important;
  background:linear-gradient(180deg,rgba(3,27,43,.97),rgba(2,16,28,.98))!important;
  box-shadow:0 8px 22px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .decision-dock-title{
  color:#f5e6aa!important;
  font-weight:1000!important;
  letter-spacing:.07em!important;
  text-shadow:0 1px 2px rgba(0,0,0,.72)!important;
}
body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .bidding-decisions .number-choice{
  border:1px solid #4b9bd0!important;
  background:linear-gradient(180deg,#163f5e,#0a273d)!important;
  color:#f2fbff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .sticks-decision-buttons .number-choice{
  border:1px solid #b36aaf!important;
  background:linear-gradient(180deg,#512552,#2d1433)!important;
  color:#fff0ff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .number-choice.selected,
body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .trump-choice.selected{
  border-color:#ffd96d!important;
  box-shadow:0 0 0 2px rgba(255,211,86,.42),inset 0 1px 0 rgba(255,255,255,.14)!important;
  filter:brightness(1.16)!important;
}
body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .number-confirm,
body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .trump-confirm{
  border:1px solid #70d49d!important;
  background:linear-gradient(180deg,#176743,#0d472f)!important;
  color:#fff!important;
  font-weight:1000!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 3px 8px rgba(0,0,0,.22)!important;
}
body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .number-confirm:disabled,
body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .trump-confirm:disabled{
  opacity:.42!important;
  filter:saturate(.55)!important;
}
body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .trump-decision-buttons .trump-choice{
  border:1px solid rgba(225,194,100,.64)!important;
  background:linear-gradient(180deg,#102f4a,#081d31)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .trump-selection-row{
  width:100%!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 54px!important;
  align-items:center!important;
  gap:6px!important;
}
body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .trump-confirm{
  width:54px!important;
  min-width:54px!important;
  max-width:54px!important;
  align-self:stretch!important;
}

@media (max-width:1179px){
  body.game-scroll-locked .poker-stage .player.local.hud-skin .emoji-trigger{
    left:-18px!important;
    top:64%!important;
  }

  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .trump-selection-row{
    grid-template-columns:minmax(0,1fr) 48px!important;
    gap:4px!important;
  }
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .trump-confirm{
    width:48px!important;
    min-width:48px!important;
    max-width:48px!important;
    padding:0 2px!important;
    font-size:7px!important;
    border-radius:7px!important;
  }
}

@media (max-width:680px){
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .decision-dock-title{
    font-size:7px!important;
    min-height:10px!important;
  }
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .trump-decision-buttons .trump-choice .suit-name{
    font-size:6.2px!important;
    font-weight:900!important;
  }
  body.game-scroll-locked .poker-stage .player.local.hud-skin .emoji-trigger{
    left:-15px!important;
    top:65%!important;
    width:20px!important;
    min-width:20px!important;
    height:20px!important;
    font-size:11px!important;
  }

  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .trump-selection-row{
    height:40px!important;
    grid-template-columns:minmax(0,1fr) 43px!important;
    gap:4px!important;
  }
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .trump-decision-buttons{
    width:100%!important;
    max-width:none!important;
  }
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .trump-confirm{
    width:43px!important;
    min-width:43px!important;
    max-width:43px!important;
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
  }
}


/* v30.8.20 corrective policy: decision-dock sizing, hand sizing, trick transparency
   and floating-name geometry intentionally remain identical to v30.8.18. */


/* ==================================================================
   v30.8.21 — LOWER-LANE CONTRACT FOR PHONES / TABLETS (+ READY panel)
   Appended on top of v30.8.20; every earlier rule stays untouched.
   To compare against plain v30.8.20, delete everything from this comment
   to the end of the file.
   Found with a geometry matrix (6 phones, 4 tablets, 4 desktops, 8 game
   states: overlaps, off-screen, controls outside their panel, text and
   tap size). v30.8.20 still had:
   - local HUD covered by the dock on short phones (320x568 .. 375x667);
   - READY ("Næste runde") buttons hanging out below their panel, over the
     hand; READY panel covering the local HUD (phones, tablets, desktop);
     on a 1366x768 laptop the cards covered "Start næste runde";
   - dock text 6-8px, OK buttons 43-48px wide with 7px text, buttons ~20px;
   - 3-player trick cards touching the side HUDs on narrow phones.
   Fix: dock and hand share CSS variables, the dock hugs its content and is
   anchored directly above the hand, and the local seat is lifted with
   max(<old %>, <px formula>) so overlap is impossible by construction.
   If a future release makes the dock content taller, adjust --l-dock-*-h.
   ================================================================== */
@media (max-width:1179px){
  body.game-scroll-locked .table[data-table-theme="royale-3d"]{
    --l-hand-w:clamp(46px,6.2vw,58px);
    --l-hand-h:clamp(66px,9vw,82px);
    --l-hand-bottom:calc(env(safe-area-inset-bottom,0px) + 0.9%);
    --l-dock-gap:10px;
    --l-dock-bid-h:86px;
    --l-dock-ready-h:118px;
    --l-seat-gap:12px;
    --l-seat-open-min:30.6%;
    --l-seat-ready-min:20.8%;
    --l-btn-h:44px;--l-btn-fs:16px;--l-pass-fs:12px;--l-ok-w:62px;--l-ok-fs:14px;
    --l-title-fs:11px;--l-trump-h:52px;--l-suit-fs:26px;--l-suitname-fs:10px;
    --l-ready-btn-h:38px;--l-ready-fs:13px;
  }

  body.game-scroll-locked .table[data-table-theme="royale-3d"] .hand{
    bottom:var(--l-hand-bottom)!important;
    --rq-hand-card-w:var(--l-hand-w)!important;
    --rq-hand-card-h:var(--l-hand-h)!important;
  }

  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock{
    top:auto!important;
    bottom:calc(var(--l-hand-bottom) + var(--l-hand-h) + var(--l-dock-gap))!important;
    height:auto!important;
    min-height:0!important;
    max-height:var(--l-dock-bid-h)!important;
    padding:0!important;
    overflow:visible!important;
  }
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock.ready-active{max-height:var(--l-dock-ready-h)!important}

  body.game-scroll-locked.decision-dock-open .poker-stage .seat-r0{
    bottom:max(var(--l-seat-open-min),calc(var(--l-hand-bottom) + var(--l-hand-h) + var(--l-dock-gap) + var(--l-dock-bid-h) + var(--l-seat-gap)))!important;
  }
  body.game-scroll-locked:has(.decision-dock.ready-active) .poker-stage .seat-r0{
    bottom:max(var(--l-seat-ready-min),calc(var(--l-hand-bottom) + var(--l-hand-h) + var(--l-dock-gap) + var(--l-dock-ready-h) + var(--l-seat-gap)))!important;
  }

  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .actions.decision-docked-actions{
    width:100%!important;
    height:auto!important;
    padding:5px 7px!important;
    gap:4px!important;
    grid-template-columns:minmax(0,1fr)!important;
    justify-items:stretch!important;
    align-content:center!important;
  }
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .decision-dock-title{
    margin:0!important;
    min-height:0!important;
    font-size:var(--l-title-fs)!important;
    line-height:1.15!important;
  }
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .number-selection-row,
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .trump-selection-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) var(--l-ok-w)!important;
    gap:5px!important;
    width:100%!important;
    height:auto!important;
    align-items:stretch!important;
  }
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .number-decision-buttons,
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .bidding-decisions,
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .sticks-decision-buttons{
    display:grid!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    grid-template-columns:repeat(var(--decision-count,8),minmax(0,1fr))!important;
    grid-auto-rows:var(--l-btn-h)!important;
    gap:4px!important;
    justify-items:stretch!important;
    align-items:stretch!important;
  }
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .number-choice,
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .number-choice.decision-pass,
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .bid-choice,
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .sticks-choice{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:var(--l-btn-h)!important;
    min-height:var(--l-btn-h)!important;
    max-height:var(--l-btn-h)!important;
    padding:0 1px!important;
    border-radius:8px!important;
    font-size:var(--l-btn-fs)!important;
  }
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .number-choice.decision-pass,
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .bid-choice.decision-pass{font-size:var(--l-pass-fs)!important}
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .number-confirm,
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .bid-confirm,
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .sticks-confirm,
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .trump-confirm{
    width:var(--l-ok-w)!important;
    min-width:var(--l-ok-w)!important;
    max-width:var(--l-ok-w)!important;
    height:var(--l-btn-h)!important;
    min-height:var(--l-btn-h)!important;
    max-height:var(--l-btn-h)!important;
    padding:0 2px!important;
    border-radius:8px!important;
    font-size:var(--l-ok-fs)!important;
  }

  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .trump-decision-buttons{
    display:grid!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:5px!important;
  }
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .trump-decision-buttons .trump-choice{
    min-width:0!important;
    width:100%!important;
    height:var(--l-trump-h)!important;
    min-height:var(--l-trump-h)!important;
    max-height:var(--l-trump-h)!important;
    padding:2px 3px!important;
  }
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .trump-selection-row .trump-confirm{
    height:var(--l-trump-h)!important;
    min-height:var(--l-trump-h)!important;
    max-height:var(--l-trump-h)!important;
  }
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .trump-decision-buttons .trump-choice .suit-symbol{font-size:var(--l-suit-fs)!important}
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .trump-decision-buttons .trump-choice .suit-name{font-size:var(--l-suitname-fs)!important;margin-top:0!important}

  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .ready-flow{
    display:grid!important;
    gap:4px!important;
    justify-items:center!important;
    align-content:center!important;
    width:100%!important;
  }
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .ready-flow-title{font-size:calc(var(--l-title-fs) + 3px)!important;line-height:1.1!important;margin:0!important}
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .ready-flow-names{display:flex!important;justify-content:center!important;flex-wrap:wrap!important;gap:6px!important;margin:0!important}
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .ready-flow-names .ready{font-size:calc(var(--l-title-fs) + 1px)!important;line-height:1.2!important;padding:2px 9px!important}
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .ready-flow-actions{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)!important;
    gap:6px!important;
    width:100%!important;
  }
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock .ready-flow-actions .btn{
    width:100%!important;
    min-width:0!important;
    height:var(--l-ready-btn-h)!important;
    min-height:var(--l-ready-btn-h)!important;
    max-height:var(--l-ready-btn-h)!important;
    padding:0 6px!important;
    font-size:var(--l-ready-fs)!important;
  }
}

@media (max-width:680px){
  body.game-scroll-locked .table[data-table-theme="royale-3d"]{
    --l-hand-w:clamp(40px,11.8vw,46px);
    --l-hand-h:clamp(58px,17.2vw,67px);
    --l-hand-bottom:calc(env(safe-area-inset-bottom,0px) + 6px);
    --l-dock-gap:8px;
    --l-dock-bid-h:74px;
    --l-dock-ready-h:108px;
    --l-seat-gap:10px;
    --l-seat-open-min:18.4%;
    --l-seat-ready-min:12.4%;
    --l-btn-h:38px;--l-btn-fs:14px;--l-pass-fs:11px;--l-ok-w:52px;--l-ok-fs:13px;
    --l-title-fs:9.5px;--l-trump-h:46px;--l-suit-fs:21px;--l-suitname-fs:9px;
    --l-ready-btn-h:34px;--l-ready-fs:12px;
  }
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock{width:min(96%,430px)!important}

  /* 3 players: no top seat, so lift the trick lane clear of the side HUDs */
  body.game-scroll-locked .poker-stage.count-3 .trick-center-layer{top:38%!important}
}

/* Desktop (>=1180px). READY ("Næste runde") is anchored above the hand and the
   local HUD is lifted above it (on a 1366x768 laptop the cards used to cover the
   "Start næste runde" button). Bidding / trump / pinde get the same treatment
   ONLY on short desktops (viewport <=900px high); taller desktops keep the
   v30.8.20 geometry untouched. Values mirror the desktop hand rule
   (card height clamp(89px,6.25cqw,105px), bottom 2.35%). */
@media (min-width:1180px){
  body.game-scroll-locked .table[data-table-theme="royale-3d"]{
    --l-hand-h:clamp(89px,6.25cqw,105px);
    --l-hand-bottom:2.35%;
    --l-dock-gap:10px;
    --l-dock-bid-h:124px;
    --l-dock-ready-h:134px;
    --l-seat-gap:12px;
    --l-seat-open-min:23%;
    --l-seat-ready-min:15.75%;
  }
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock.ready-active{
    top:auto!important;
    bottom:calc(var(--l-hand-bottom) + var(--l-hand-h) + var(--l-dock-gap))!important;
    height:auto!important;
    min-height:0!important;
    max-height:var(--l-dock-ready-h)!important;
  }
  body.game-scroll-locked:has(.decision-dock.ready-active) .poker-stage .seat-r0{
    bottom:max(var(--l-seat-ready-min),calc(var(--l-hand-bottom) + var(--l-hand-h) + var(--l-dock-gap) + var(--l-dock-ready-h) + var(--l-seat-gap)))!important;
  }
}

@media (min-width:1180px) and (max-height:900px){
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock.decision-active{
    top:auto!important;
    bottom:calc(var(--l-hand-bottom) + var(--l-hand-h) + var(--l-dock-gap))!important;
    height:auto!important;
    min-height:0!important;
    max-height:var(--l-dock-bid-h)!important;
  }
  body.game-scroll-locked.decision-dock-open .poker-stage .seat-r0{
    bottom:max(var(--l-seat-open-min),calc(var(--l-hand-bottom) + var(--l-hand-h) + var(--l-dock-gap) + var(--l-dock-bid-h) + var(--l-seat-gap)))!important;
  }
}


/* ==================================================================
   v30.8.22 — TOP CONTROLS + HUD DETAILS (phones / tablets only)
   From real-phone screenshots (Samsung, about 360x650 with the Chrome toolbar):
   1) The lobby button, the S/L/sound cluster and "Runde x/14" overlapped by
      2-9px on short phones: they were placed in % of the height while the
      buttons have a fixed px size. They are now stacked with px floors, and
      the S/L/sound cluster has no box (just the round buttons on the scene).
   2) The dark empty bar above "Meldte" is the v30.8.20 "decorative bridge"
      (.hud-full-frame::after). It hides the gold ornament of most HUD skins
      and overlaps the Meldte row; the original artwork is cleaner without it.
      Four skins (royal_gentleman, cheerful_king, knight, grand_queen) keep
      the painted empty plaque of the artwork.
   3) Value text (PAS / ? / points) was clipped at the bottom by its 5.6px pill.
   Desktop is untouched. To compare with v30.8.21, delete everything from this
   comment to the end of the file.
   ================================================================== */
@media (max-width:1179px){
  body.game-scroll-locked .hud-mainline > .hud-utility-cluster{
    top:max(4.6%,50px)!important;
    gap:6px!important;
    padding:0!important;
    background:none!important;
    border:0!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .hud-status{
    top:max(9.4%,calc(max(4.6%,50px) + 34px))!important;
  }
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .player.hud-skin .hud-full-frame::after{
    display:none!important;
  }
  body.game-scroll-locked .poker-stage .player .player-static-stats strong{
    overflow:visible!important;
    line-height:1!important;
  }
}

@media (max-width:680px){
  body.game-scroll-locked .hud-mainline > .hud-utility-cluster{top:max(4.7%,41px)!important}
  body.game-scroll-locked .table[data-table-theme="royale-3d"] .hud-status{
    top:max(8.0%,calc(max(4.7%,41px) + 27px))!important;
  }
}


/* ==================================================================
   v30.8.23 — DESKTOP POLISH (>=1180px only; phones/tablets untouched)
   Brings the v30.8.21/22 phone work to desktop and fixes what a
   name-aware geometry check found on desktop:
   1) S/L/sound cluster without a box, like on phones.
   2) The decorative bridge (.hud-full-frame::after) is hidden: it hid the
      gold HUD ornaments and put a dark bar above "Meldte".
   3) HUD value text (PAS / ? / points) no longer clipped.
   4) Bid / trump / pinde dock sits directly above the hand and the local
      HUD is lifted above it at EVERY desktop height (v30.8.21 did this only
      for viewports <=900px high).
   5) Played cards stay clear of your own name: the lane moves up by
      24px (5p), 32px (4p) or 48px (3p).
   6) 4 players: the top seat's name no longer hides behind the logo
      (logo 10% smaller, top seat 17px lower).
   To compare with v30.8.22, delete everything from this comment to the end.
   ================================================================== */
@media (min-width:1180px){
  body.game-scroll-locked .table[data-table-theme="royale-3d"]{
    --l-dock-bid-h:106px;
  }
  body.game-scroll-locked:has(.decision-dock .trump-selection-row) body.game-scroll-locked .table[data-table-theme="royale-3d"]{
    --l-dock-bid-h:124px;
  }

  body.game-scroll-locked .hud-mainline > .hud-utility-cluster{
    gap:10px!important;
    padding:0!important;
    background:none!important;
    border:0!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }

  body.game-scroll-locked .table[data-table-theme="royale-3d"] .player.hud-skin .hud-full-frame::after{
    display:none!important;
  }
  body.game-scroll-locked .poker-stage .player .player-static-stats strong{
    overflow:visible!important;
    line-height:1!important;
  }

  body.game-scroll-locked .table[data-table-theme="royale-3d"] .decision-dock.decision-active{
    top:auto!important;
    bottom:calc(var(--l-hand-bottom) + var(--l-hand-h) + var(--l-dock-gap))!important;
    height:auto!important;
    min-height:0!important;
    max-height:var(--l-dock-bid-h)!important;
  }
  body.game-scroll-locked.decision-dock-open .poker-stage .seat-r0{
    bottom:max(var(--l-seat-open-min),calc(var(--l-hand-bottom) + var(--l-hand-h) + var(--l-dock-gap) + var(--l-dock-bid-h) + var(--l-seat-gap)))!important;
  }

  body.game-scroll-locked .poker-stage.count-5 .trick-center-layer{top:calc(51.4% - 24px)!important}
  body.game-scroll-locked .poker-stage.count-4 .trick-center-layer{top:calc(51.4% - 32px)!important}
  body.game-scroll-locked .poker-stage.count-3 .trick-center-layer{top:calc(51.4% - 48px)!important}

  body.game-scroll-locked #app.shell > .top .mini-logo{
    width:clamp(113px,8.46cqw,142px)!important;
  }
  body.game-scroll-locked .poker-stage.count-4 .seat-r2{
    top:calc(24.15% + 17px)!important;
  }
}

/* Short desktops (laptops): there is simply less vertical room between the top
   seats, the played cards and your own name, so the played cards are scaled
   down a little. Taller desktops keep full-size cards. */
@media (min-width:1180px) and (max-height:900px){
  body.game-scroll-locked .poker-stage .trick{
    transform:scale(.95)!important;
    transform-origin:50% 50%!important;
  }
}
@media (min-width:1180px) and (max-height:800px){
  body.game-scroll-locked .poker-stage .trick{
    transform:scale(.88)!important;
  }
}

/* While it is YOUR turn to bid / pick trump / pinde, or between rounds, the centre
   message "Venter på udspil…" is not relevant, and once the local HUD is lifted above
   the dock it collided with your own name (up to 18px at 1920x1080). All sizes. */
body.game-scroll-locked.decision-dock-open .poker-stage .trick-empty-state,
body.game-scroll-locked:has(.decision-dock.ready-active) .poker-stage .trick-empty-state{
  display:none!important;
}

/* Very small phones (320px wide): the side seats' name pills touch the plates of the
   top seats, and the 3-player trick cards touch the side names. Small nudges only. */
@media (max-width:340px){
  body.game-scroll-locked .poker-stage.count-5 .seat-r1,
  body.game-scroll-locked .poker-stage.count-5 .seat-r4{margin-top:9px!important}
  body.game-scroll-locked .poker-stage.count-3 .trick{
    transform:scale(.85)!important;
    transform-origin:50% 50%!important;
  }
}

/* Tablets: landscape iPads (1024x768, 1133x744) leave less room between the played
   cards and your own name, so the lane moves up (3 players need the most);
   portrait tablets only need a small lift with 3-4 players. */
@media (min-width:681px) and (max-width:1179px) and (orientation:landscape){
  body.game-scroll-locked .poker-stage.count-5 .trick-center-layer{top:calc(57.8% - 56px)!important}
  body.game-scroll-locked .poker-stage.count-4 .trick-center-layer{top:calc(57.8% - 64px)!important}
  body.game-scroll-locked .poker-stage.count-3 .trick-center-layer{top:calc(57.8% - 74px)!important}
}
@media (min-width:681px) and (max-width:1179px) and (orientation:portrait){
  body.game-scroll-locked .poker-stage.count-4 .trick-center-layer{top:calc(57.8% - 12px)!important}
  body.game-scroll-locked .poker-stage.count-3 .trick-center-layer{top:calc(57.8% - 24px)!important}
}