/* TIPS Royale v30.5 — Responsive Quality Foundation
   -------------------------------------------------
   AUTHORITATIVE GEOMETRY LAYER.

   This file owns responsive geometry only:
   - app/shell sizing
   - poker-table aspect and maximum scale
   - player HUD dimensions / seat safe-zones
   - center trick lane and played-card sizing
   - hand sizing
   - height-constrained landscape behaviour
   - safe-area handling

   Visual theme/color work remains in styles-v30.css.
   Future geometry changes should be made HERE, not appended as device patches
   to styles-v30.css.
*/

:root{
  --rq-game-max:1280px;
  --rq-board-ratio:1.12 / 1;
  --rq-page-gutter:clamp(6px,1.2vw,18px);
  --rq-height-reserve:clamp(80px,14dvh,140px);
  --rq-table-pad:clamp(5px,.8vw,9px);
}

html{
  min-width:280px;
  min-height:100%;
}

body{
  min-width:280px;
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
  padding-left:env(safe-area-inset-left,0px);
  padding-right:env(safe-area-inset-right,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  overflow-x:hidden;
}

/* Height as well as width constrains the game. This is why the same geometry
   works on phones, iPads, 1080p, 1440p, ultrawide and 4K without naming a
   device model. */
.shell{
  width:min(
    calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - (2 * var(--rq-page-gutter))),
    var(--rq-game-max),
    calc(100dvh - var(--rq-height-reserve))
  )!important;
  max-width:var(--rq-game-max)!important;
  min-width:0!important;
  margin:clamp(3px,1vh,10px) auto!important;
  padding:0!important;
}

/* Portrait/narrow screens should use their full safe width; height no longer
   needs to shrink an already narrow board. */
@media (max-aspect-ratio: 4/5){
  .shell{
    width:min(
      calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - (2 * var(--rq-page-gutter))),
      var(--rq-game-max)
    )!important;
  }
}

#game.gamegrid:not(.hidden){
  width:100%!important;
  min-width:0!important;
}

.table{
  width:100%!important;
  min-width:0!important;
  padding:var(--rq-table-pad)!important;
}

.game-hud{
  margin-bottom:clamp(4px,.75cqw,8px)!important;
}

/* -------------------------------------------------------------------------
   POKER TABLE: ONE COORDINATE SYSTEM
   ------------------------------------------------------------------------- */
.poker-stage{
  container-type:inline-size!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  aspect-ratio:var(--rq-board-ratio)!important;
  margin-inline:auto!important;
  overflow:visible!important;
}

/* Player HUD size is based on BOARD width, not viewport/device name. */
.poker-stage.count-3 .player{
  width:clamp(108px,21.5cqw,196px)!important;
  min-width:clamp(108px,21.5cqw,196px)!important;
  max-width:clamp(108px,21.5cqw,196px)!important;
  height:clamp(88px,15.2cqw,132px)!important;
  min-height:clamp(88px,15.2cqw,132px)!important;
  max-height:clamp(88px,15.2cqw,132px)!important;
}

.poker-stage.count-4 .player{
  width:clamp(86px,19.5cqw,186px)!important;
  min-width:clamp(86px,19.5cqw,186px)!important;
  max-width:clamp(86px,19.5cqw,186px)!important;
  height:clamp(84px,14.2cqw,126px)!important;
  min-height:clamp(84px,14.2cqw,126px)!important;
  max-height:clamp(84px,14.2cqw,126px)!important;
}

.poker-stage.count-5 .player{
  width:clamp(84px,18.5cqw,178px)!important;
  min-width:clamp(84px,18.5cqw,178px)!important;
  max-width:clamp(84px,18.5cqw,178px)!important;
  height:clamp(82px,13.8cqw,122px)!important;
  min-height:clamp(82px,13.8cqw,122px)!important;
  max-height:clamp(82px,13.8cqw,122px)!important;
}

/* Seat geometry never changes between phone/tablet/desktop. */
.poker-stage.count-3 .seat-r0,
.poker-stage.count-4 .seat-r0,
.poker-stage.count-5 .seat-r0{
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:.8%!important;
  transform:translateX(-50%)!important;
}

.poker-stage.count-3 .seat-r1{
  left:25%!important;right:auto!important;top:10.5%!important;bottom:auto!important;
  transform:translateX(-50%)!important;
}
.poker-stage.count-3 .seat-r2{
  left:75%!important;right:auto!important;top:10.5%!important;bottom:auto!important;
  transform:translateX(-50%)!important;
}

.poker-stage.count-4 .seat-r1{
  left:1%!important;right:auto!important;top:38%!important;bottom:auto!important;
  transform:none!important;
}
.poker-stage.count-4 .seat-r2{
  left:50%!important;right:auto!important;top:10%!important;bottom:auto!important;
  transform:translateX(-50%)!important;
}
.poker-stage.count-4 .seat-r3{
  left:auto!important;right:1%!important;top:38%!important;bottom:auto!important;
  transform:none!important;
}

.poker-stage.count-5 .seat-r1{
  left:.5%!important;right:auto!important;top:39%!important;bottom:auto!important;
  transform:none!important;
}
.poker-stage.count-5 .seat-r2{
  left:27%!important;right:auto!important;top:10%!important;bottom:auto!important;
  transform:translateX(-50%)!important;
}
.poker-stage.count-5 .seat-r3{
  left:73%!important;right:auto!important;top:10%!important;bottom:auto!important;
  transform:translateX(-50%)!important;
}
.poker-stage.count-5 .seat-r4{
  left:auto!important;right:.5%!important;top:39%!important;bottom:auto!important;
  transform:none!important;
}


/* v30.7.5 — top-seat Royale art clearance. Only top-seat anchors move;
   player dimensions, side seats, protected trick lane and hand reserve stay fixed. */
/* Readability scales with the board, with sane maxima on 1440p / 4K. */
.poker-stage .player-card-body .pname{
  font-size:clamp(9px,1.25cqw,13.5px)!important;
}
.poker-stage .player-static-stats small,
.poker-stage .player-static-stats strong{
  font-size:clamp(7.5px,1.05cqw,11.5px)!important;
  line-height:1!important;
}

/* -------------------------------------------------------------------------
   PROTECTED CENTER LANE

   These lane widths are intentionally derived from side-HUD geometry.
   4-player: side HUD min 94px => narrowest lane is 46cqw.
   5-player: side HUD min 90px => lane may use 48cqw.
   Cards then size INSIDE that lane. They never rely on overflow/scroll.
   ------------------------------------------------------------------------- */
.poker-stage.count-3 .trick-center-layer{
  width:64cqw!important;
  max-width:64cqw!important;
  height:34cqw!important;
}
.poker-stage.count-4 .trick-center-layer{
  width:46cqw!important;
  max-width:46cqw!important;
  height:32cqw!important;
}
.poker-stage.count-5 .trick-center-layer{
  width:48cqw!important;
  max-width:48cqw!important;
  height:32cqw!important;
}

.poker-stage .trick{
  display:flex!important;
  flex-flow:row nowrap!important;
  align-items:flex-start!important;
  justify-content:center!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  padding:2px!important;
  overflow:visible!important;
}

/* Formulas are percentages of the table container and include space for gaps.
   The max values prevent comically large cards on 4K. */
.poker-stage.count-3 .trick{
  --table-card-w:clamp(42px,calc(20cqw - 6px),76px)!important;
  --table-card-h:clamp(61px,calc(29cqw - 9px),110px)!important;
  --table-card-gap:clamp(3px,.65cqw,7px)!important;
}
.poker-stage.count-4 .trick{
  --table-card-w:clamp(32px,calc(11.5cqw - 4px),68px)!important;
  --table-card-h:clamp(47px,calc(16.7cqw - 6px),99px)!important;
  --table-card-gap:clamp(2px,.55cqw,5px)!important;
}
.poker-stage.count-5 .trick{
  --table-card-w:clamp(29px,calc(9.6cqw - 3px),58px)!important;
  --table-card-h:clamp(42px,calc(13.9cqw - 4px),84px)!important;
  --table-card-gap:clamp(2px,.45cqw,4px)!important;
}

.poker-stage .trick .slot{
  flex:0 0 var(--table-card-w)!important;
  width:var(--table-card-w)!important;
  min-width:var(--table-card-w)!important;
  max-width:var(--table-card-w)!important;
}
.poker-stage .trick .playcard{
  width:var(--table-card-w)!important;
  min-width:var(--table-card-w)!important;
  max-width:var(--table-card-w)!important;
  height:var(--table-card-h)!important;
  min-height:var(--table-card-h)!important;
  max-height:var(--table-card-h)!important;
}
.poker-stage .trick .card-rank{
  font-size:clamp(10px,1.45cqw,17px)!important;
}
.poker-stage .trick .card-suit{
  font-size:clamp(22px,3.7cqw,42px)!important;
}


/* Extremely constrained table containers (legacy 320px portrait or a very
   short phone in landscape) enter a compact mode. This is based on actual
   container space, not a phone model. It is the only place HUDs/cards shrink
   below the normal readability floor, because fitting without collisions wins. */
@container (max-width:310px){
  .poker-stage.count-4 .player{
    width:74px!important;min-width:74px!important;max-width:74px!important;
    height:72px!important;min-height:72px!important;max-height:72px!important;
  }
  .poker-stage.count-5 .player{
    width:72px!important;min-width:72px!important;max-width:72px!important;
    height:70px!important;min-height:70px!important;max-height:70px!important;
  }
  .poker-stage.count-4 .trick{
    --table-card-w:clamp(30px,calc(11.5cqw - 4px),68px)!important;
    --table-card-h:clamp(43px,calc(16.7cqw - 6px),99px)!important;
    --table-card-gap:2px!important;
  }
  .poker-stage.count-5 .trick{
    --table-card-w:clamp(25px,calc(9.6cqw - 3px),58px)!important;
    --table-card-h:clamp(37px,calc(13.9cqw - 4px),84px)!important;
    --table-card-gap:2px!important;
  }
  .poker-stage .player-card-body .pname{font-size:8px!important}
  .poker-stage .player-static-stats small,
  .poker-stage .player-static-stats strong{font-size:6.5px!important}
}

/* -------------------------------------------------------------------------
   HAND CONTRACT

   The controls become their own container. Seven cards are calculated from
   the space actually available. Horizontal scrolling is no longer part of the
   normal game layout.
   ------------------------------------------------------------------------- */
.player-controls{
  container-type:inline-size!important;
  width:auto!important;
  min-width:0!important;
  margin:clamp(6px,1.1vw,10px) calc(-1 * var(--rq-table-pad)) calc(-1 * var(--rq-table-pad))!important;
  padding:clamp(6px,1vw,9px) var(--rq-table-pad) clamp(7px,1.1vw,10px)!important;
}

.hand{
  --rq-hand-gap:clamp(2px,.7cqw,6px);
  --rq-hand-card-w:clamp(36px,calc(14.285cqw - 6px),62px);
  --rq-hand-card-h:clamp(52px,calc(20.714cqw - 9px),90px);

  display:flex!important;
  flex-flow:row nowrap!important;
  align-items:flex-end!important;
  justify-content:center!important;
  gap:var(--rq-hand-gap)!important;

  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:clamp(2px,.6cqw,5px) auto 0!important;
  padding:3px 1px!important;

  overflow:visible!important;
  scrollbar-width:none!important;
}

.handcard{
  flex:0 0 var(--rq-hand-card-w)!important;
  width:var(--rq-hand-card-w)!important;
  min-width:var(--rq-hand-card-w)!important;
  max-width:var(--rq-hand-card-w)!important;
  height:var(--rq-hand-card-h)!important;
  min-height:var(--rq-hand-card-h)!important;
  max-height:var(--rq-hand-card-h)!important;
}

/* -------------------------------------------------------------------------
   HEIGHT-CONSTRAINED LANDSCAPE
   This is based on available height, not on "iPad" or "Android" names.
   Seat geometry remains exactly the same.
   ------------------------------------------------------------------------- */
@media (orientation:landscape) and (max-height:600px){
  .shell{
    margin:2px auto!important;
  }
  .top-three-way{
    min-height:42px!important;
    margin-bottom:2px!important;
  }
  .mini-logo{width:104px!important}
  .top-three-way>.btn{
    padding:5px 6px!important;
    font-size:7.5px!important;
  }
  .hud-mainline{
    min-height:38px!important;
    padding:3px 6px!important;
  }
  .live-trump{min-height:31px!important;padding:3px 6px!important}
  .trump-suit{width:25px!important;min-width:25px!important;height:34px!important}
  .actions{margin:0 0 2px!important}
  .actions .btn{padding:4px 7px!important;font-size:9px!important}
  .wait{min-height:14px!important;font-size:8.5px!important}
  .player-controls{margin-top:4px!important;padding-top:4px!important;padding-bottom:5px!important}
  .hand{
    --rq-hand-card-w:clamp(32px,calc(14.285cqw - 7px),50px);
    --rq-hand-card-h:clamp(46px,calc(20.714cqw - 11px),72px);
  }
  .side{margin-top:3px!important}
}

/* A height-constrained tablet/desktop uses the same model; only chrome and
   hand density compress. This replaces the old iPad-specific style approach. */
@media (orientation:landscape) and (min-height:601px) and (max-height:900px){
  .top-three-way{
    min-height:50px!important;
    margin-bottom:3px!important;
  }
  .mini-logo{width:118px!important}
  .hud-mainline{min-height:42px!important;padding:4px 7px!important}
  .player-controls{margin-top:5px!important;padding-top:5px!important;padding-bottom:6px!important}
  .actions{margin:1px 0 3px!important}
  .actions .btn{padding:5px 8px!important;font-size:10px!important}
  .wait{min-height:15px!important;font-size:9px!important}
  .hand{
    --rq-hand-card-w:clamp(36px,calc(14.285cqw - 6px),56px);
    --rq-hand-card-h:clamp(52px,calc(20.714cqw - 9px),81px);
  }
}

/* Large monitors get more presence, but the table stops at a deliberate cap.
   This prevents a 32" 4K display from producing a comically huge UI. */
@media (min-width:1600px) and (min-height:1000px){
  .shell{--rq-game-max:1280px}
}

/* Browser fallback: cqw is available on our target browsers, but a readable
   fallback is retained for unusual embedded/old clients. */
@supports not (width:1cqw){
  .poker-stage.count-3 .player{width:160px!important;height:112px!important}
  .poker-stage.count-4 .player{width:148px!important;height:108px!important}
  .poker-stage.count-5 .player{width:142px!important;height:104px!important}
  .poker-stage.count-3 .trick-center-layer{width:64%!important;height:34%!important}
  .poker-stage.count-4 .trick-center-layer{width:46%!important;height:32%!important}
  .poker-stage.count-5 .trick-center-layer{width:48%!important;height:32%!important}
  .hand{gap:4px!important}
  .handcard{width:52px!important;min-width:52px!important;max-width:52px!important;height:75px!important;min-height:75px!important;max-height:75px!important}
}


/* ==========================================================================
   v30.5.1 — DESKTOP PRESENCE CONTRACT

   Real 2560×1440 testing exposed a v30.5 defect:
   the game used too little horizontal space while the near-square table used
   too much vertical space, pushing the hand below the fold.

   Desktop/tablet-landscape now gets a wider table aspect and a height-aware
   shell formula. Mobile remains on the established v30.5 geometry.
   ========================================================================== */

@media (min-width:1000px) and (orientation:landscape){
  .shell{
    --rq-game-max:1760px;
    width:min(
      calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - (2 * var(--rq-page-gutter))),
      var(--rq-game-max),
      calc(170dvh - 450px)
    )!important;
    max-width:var(--rq-game-max)!important;
    margin:clamp(3px,.65dvh,8px) auto!important;
  }

  .poker-stage{
    aspect-ratio:1.78 / 1!important;
  }

  .top-three-way{
    min-height:72px!important;
    margin-bottom:6px!important;
  }

  .mini-logo{
    width:clamp(176px,10vw,220px)!important;
  }

  .top-three-way>.btn{
    width:clamp(118px,8vw,142px)!important;
    padding:9px 11px!important;
    font-size:10.5px!important;
  }

  .hud-mainline{
    min-height:56px!important;
    padding:7px 11px!important;
    gap:9px!important;
  }

  .hud-status h3{
    font-size:clamp(13px,1vw,16px)!important;
  }

  .live-trump{
    min-width:165px!important;
    min-height:42px!important;
    padding:6px 10px!important;
    font-size:11px!important;
  }

  .economy{
    min-width:150px!important;
    padding:8px 10px!important;
    font-size:10.5px!important;
  }

  .poker-stage.count-3 .player{
    width:clamp(160px,16cqw,270px)!important;
    min-width:clamp(160px,16cqw,270px)!important;
    max-width:clamp(160px,16cqw,270px)!important;
    height:clamp(108px,9.8cqw,168px)!important;
    min-height:clamp(108px,9.8cqw,168px)!important;
    max-height:clamp(108px,9.8cqw,168px)!important;
  }

  .poker-stage.count-4 .player{
    width:clamp(150px,15cqw,255px)!important;
    min-width:clamp(150px,15cqw,255px)!important;
    max-width:clamp(150px,15cqw,255px)!important;
    height:clamp(104px,9.4cqw,160px)!important;
    min-height:clamp(104px,9.4cqw,160px)!important;
    max-height:clamp(104px,9.4cqw,160px)!important;
  }

  .poker-stage.count-5 .player{
    width:clamp(142px,14cqw,240px)!important;
    min-width:clamp(142px,14cqw,240px)!important;
    max-width:clamp(142px,14cqw,240px)!important;
    height:clamp(100px,9cqw,154px)!important;
    min-height:clamp(100px,9cqw,154px)!important;
    max-height:clamp(100px,9cqw,154px)!important;
  }

  .poker-stage .player-card-body .pname{
    font-size:clamp(11.5px,1.05cqw,15px)!important;
  }

  .poker-stage .player-static-stats small,
  .poker-stage .player-static-stats strong{
    font-size:clamp(9.5px,.86cqw,13px)!important;
  }

  .dealer-chip{
    width:25px!important;
    height:25px!important;
    font-size:12px!important;
  }

  .poker-stage.count-3 .trick{
    --table-card-w:clamp(58px,5.4cqw,92px)!important;
    --table-card-h:clamp(84px,7.85cqw,134px)!important;
    --table-card-gap:clamp(5px,.55cqw,9px)!important;
  }

  .poker-stage.count-4 .trick{
    --table-card-w:clamp(54px,4.85cqw,82px)!important;
    --table-card-h:clamp(78px,7.05cqw,119px)!important;
    --table-card-gap:clamp(4px,.48cqw,8px)!important;
  }

  .poker-stage.count-5 .trick{
    --table-card-w:clamp(48px,4.35cqw,74px)!important;
    --table-card-h:clamp(70px,6.32cqw,107px)!important;
    --table-card-gap:clamp(4px,.42cqw,7px)!important;
  }

  .poker-stage .trick .card-rank{
    font-size:clamp(14px,1.2cqw,20px)!important;
  }

  .poker-stage .trick .card-suit{
    font-size:clamp(30px,3cqw,48px)!important;
  }

  .player-controls{
    margin-top:7px!important;
    padding-top:6px!important;
    padding-bottom:7px!important;
  }

  .hand{
    --rq-hand-gap:clamp(5px,.45cqw,8px);
    --rq-hand-card-w:clamp(62px,5.1cqw,82px);
    --rq-hand-card-h:clamp(90px,7.4cqw,119px);
    margin-top:3px!important;
  }

  .actions{
    margin:1px 0 4px!important;
  }

  .actions .btn{
    padding:7px 10px!important;
    font-size:11px!important;
  }

  .wait{
    min-height:18px!important;
    font-size:10px!important;
  }

  .deal-deck{
    width:46px!important;
    height:64px!important;
  }

  .deal-deck span,
  .deal-card{
    width:40px!important;
    height:58px!important;
    border-radius:6px!important;
  }

  .trick-fly-card .card-rank{
    font-size:19px!important;
  }

  .trick-fly-card .card-suit{
    font-size:38px!important;
  }

  .poker-stage > .emoji-reaction-stage{
    font-size:34px!important;
  }


  .game-toast.trump-toast-flight{
    width:min(360px,70vw)!important;
    max-width:min(360px,70vw)!important;
    padding:17px 20px!important;
  }

  .toast-trump-card{
    width:58px!important;
    height:80px!important;
  }

  .toast-trump-card strong{
    font-size:41px!important;
  }

  .game-toast.trump-toast-flight .toast-title{
    font-size:15px!important;
  }
}

@media (min-width:2800px) and (min-height:1600px){
  .shell{
    --rq-game-max:2100px;
  }

  .poker-stage.count-3 .player{max-width:300px!important}
  .poker-stage.count-4 .player{max-width:282px!important}
  .poker-stage.count-5 .player{max-width:264px!important}

  .hand{
    --rq-hand-card-w:clamp(70px,4.3cqw,92px);
    --rq-hand-card-h:clamp(102px,6.25cqw,134px);
  }
}

/* ==========================================================================
   v30.5.2 — NO-SCROLL GAMEPLAY CONTRACT
   Runtime visual viewport height participates in shell width. This keeps the
   entire collapsed-log gameplay surface inside the screen.
   ========================================================================== */

body.game-scroll-locked .shell{
  width:min(
    calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - (2 * var(--rq-page-gutter))),
    var(--rq-game-max),
    calc((var(--tips-visual-vh,100dvh) - 232px) * 1.12)
  )!important;
  margin:2px auto!important;
}

@media (min-width:1000px) and (orientation:landscape){
  body.game-scroll-locked .shell{
    width:min(
      calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - (2 * var(--rq-page-gutter))),
      var(--rq-game-max),
      calc((var(--tips-visual-vh,100dvh) - 248px) * 1.78)
    )!important;
  }
}

@media (orientation:landscape) and (max-height:600px){
  body.game-scroll-locked .shell{
    width:min(
      calc(100vw - 8px),
      var(--rq-game-max),
      calc((var(--tips-visual-vh,100dvh) - 160px) * 1.78)
    )!important;
  }
}
/* ==========================================================================
   v30.5.3 — RUNTIME FULL-GAME FIT

   The browser now measures the complete rendered game and sets the largest
   shell width that fits inside visualViewport. The inline runtime width is
   authoritative while gameplay is locked. These rules only provide sane
   bounds/fallbacks before the measurement runs.
   ========================================================================== */

body.game-scroll-locked .shell{
  max-width:min(100%,var(--rq-game-max))!important;
}

body.game-scroll-locked #game,
body.game-scroll-locked .table,
body.game-scroll-locked .player-controls,
body.game-scroll-locked .hand{
  min-width:0!important;
}

body.game-scroll-locked .hand{
  overflow-x:hidden!important;
}


/* ==========================================================================
   v30.5.4 — STABLE SCALE + ACCESSORY SCALE CONTRACT
   ========================================================================== */

.poker-stage .dealer-chip{
  left:calc(-1 * clamp(8px,1.05cqw,16px))!important;
  top:calc(-1 * clamp(8px,1.05cqw,16px))!important;
  width:clamp(20px,2.25cqw,34px)!important;
  height:clamp(20px,2.25cqw,34px)!important;
  font-size:clamp(9px,.9cqw,14px)!important;
  border-width:clamp(1px,.12cqw,2px)!important;
}

.poker-stage .trick-pile{
  width:clamp(30px,4.35cqw,62px)!important;
  height:clamp(36px,5.1cqw,72px)!important;
  padding:clamp(1px,.22cqw,3px)!important;
}

.poker-stage .trick-pile-card{
  top:clamp(10px,1.35cqw,20px)!important;
  left:clamp(7px,1.05cqw,15px)!important;
  width:clamp(15px,2cqw,28px)!important;
  height:clamp(22px,2.9cqw,41px)!important;
  border-radius:clamp(2px,.25cqw,4px)!important;
}

.poker-stage .trick-pile-card:nth-of-type(3){
  left:clamp(10px,1.35cqw,19px)!important;
}
.poker-stage .trick-pile-card:nth-of-type(4){
  left:clamp(13px,1.65cqw,23px)!important;
}

.poker-stage .trick-pile-count{
  right:calc(-1 * clamp(5px,.65cqw,9px))!important;
  bottom:calc(-1 * clamp(5px,.65cqw,9px))!important;
  width:clamp(17px,1.9cqw,28px)!important;
  height:clamp(17px,1.9cqw,28px)!important;
  font-size:clamp(8px,.8cqw,12px)!important;
}

.poker-stage .seat-r0 .trick-pile,
.poker-stage .count-3 .seat-r1 .trick-pile,
.poker-stage .count-4 .seat-r2 .trick-pile,
.poker-stage .count-5 .seat-r2 .trick-pile{
  right:calc(-1 * clamp(27px,4.9cqw,70px))!important;
}

.poker-stage .count-3 .seat-r2 .trick-pile,
.poker-stage .count-5 .seat-r3 .trick-pile{
  left:calc(-1 * clamp(27px,4.9cqw,70px))!important;
}

.poker-stage .deal-deck{
  width:clamp(30px,4.3cqw,62px)!important;
  height:clamp(43px,6.25cqw,90px)!important;
}

.poker-stage .deal-deck span,
.poker-stage .deal-card{
  width:clamp(27px,3.8cqw,56px)!important;
  height:clamp(39px,5.55cqw,81px)!important;
  border-radius:clamp(4px,.5cqw,8px)!important;
}

.trick-fly-card .card-rank,
.played-card-flight .card-rank{
  font-size:clamp(11px,calc(var(--fx-card-w,48px) * .27),22px)!important;
}
.trick-fly-card .card-suit,
.played-card-flight .card-suit{
  font-size:clamp(23px,calc(var(--fx-card-w,48px) * .62),48px)!important;
}

.poker-stage .player.active > .active-pulse-ring{
  inset:calc(-1 * clamp(2px,.32cqw,5px))!important;
  border-width:clamp(1px,.15cqw,2px)!important;
}

.poker-stage .player.handover::after,
.poker-stage .player.played-landed::before{
  inset:calc(-1 * clamp(2px,.35cqw,6px))!important;
  border-width:clamp(1px,.16cqw,2px)!important;
}


/* ==========================================================================
   v30.5.6 — TABLET LANDSCAPE + 3-PLAYER CARD FACE SCALE
   ========================================================================== */

@media (min-width:700px) and (max-width:1199px) and (orientation:landscape){
  .shell{
    --rq-game-max:1160px!important;
    margin:2px auto!important;
  }

  .poker-stage{
    aspect-ratio:1.62 / 1!important;
  }

  .top-three-way{
    min-height:44px!important;
    margin-bottom:2px!important;
  }

  .mini-logo{width:108px!important}

  .top-three-way>.btn{
    width:104px!important;
    padding:5px 7px!important;
    font-size:8px!important;
  }

  .hud-mainline{
    min-height:38px!important;
    padding:3px 6px!important;
    gap:5px!important;
  }

  .hud-status h3{font-size:10px!important}
  .live-trump{min-width:118px!important;min-height:32px!important;padding:3px 6px!important;font-size:8px!important}
  .economy{min-width:112px!important;padding:5px 7px!important;font-size:8px!important}

  .poker-stage.count-3 .player{
    width:clamp(118px,17cqw,168px)!important;
    min-width:clamp(118px,17cqw,168px)!important;
    max-width:clamp(118px,17cqw,168px)!important;
    height:clamp(86px,11.5cqw,110px)!important;
    min-height:clamp(86px,11.5cqw,110px)!important;
    max-height:clamp(86px,11.5cqw,110px)!important;
  }

  .poker-stage.count-4 .player{
    width:clamp(110px,16cqw,156px)!important;
    min-width:clamp(110px,16cqw,156px)!important;
    max-width:clamp(110px,16cqw,156px)!important;
    height:clamp(82px,11cqw,104px)!important;
    min-height:clamp(82px,11cqw,104px)!important;
    max-height:clamp(82px,11cqw,104px)!important;
  }

  .poker-stage.count-5 .player{
    width:clamp(104px,15cqw,148px)!important;
    min-width:clamp(104px,15cqw,148px)!important;
    max-width:clamp(104px,15cqw,148px)!important;
    height:clamp(78px,10.5cqw,100px)!important;
    min-height:clamp(78px,10.5cqw,100px)!important;
    max-height:clamp(78px,10.5cqw,100px)!important;
  }

  .poker-stage .player-card-body .pname{font-size:clamp(9px,1.15cqw,11.5px)!important}
  .poker-stage .player-static-stats small,
  .poker-stage .player-static-stats strong{font-size:clamp(7.5px,.95cqw,9.5px)!important}

  .player-controls{
    margin-top:3px!important;
    padding-top:3px!important;
    padding-bottom:3px!important;
  }

  .actions{margin:0 0 2px!important}
  .actions .btn{padding:4px 7px!important;font-size:9px!important}
  .wait{min-height:13px!important;font-size:8px!important}

  .hand{
    --rq-hand-gap:clamp(3px,.38cqw,5px)!important;
    --rq-hand-card-w:clamp(38px,5.7cqw,58px)!important;
    --rq-hand-card-h:clamp(55px,8.25cqw,84px)!important;
    margin-top:2px!important;
    padding:1px!important;
  }

  .side{margin-top:2px!important}
}

.poker-stage.count-3 .trick .card-rank{
  font-size:clamp(14px,2.05cqw,22px)!important;
}

.poker-stage.count-3 .trick .card-suit{
  font-size:clamp(32px,5.8cqw,58px)!important;
  line-height:.88!important;
}


/* ==========================================================================
   v30.5.8 — DECISION OVERLAY + PHONE LANDSCAPE FIT
   ========================================================================== */

/*
  Bidding / trump / pinde controls are temporary decisions. They must NEVER
  participate in document height and therefore can never push the hand below
  the viewport. renderActions() moves this container inside #pokerStage.
*/
.poker-stage > .actions.floating-decision-actions{
  position:absolute!important;
  z-index:95!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;

  width:max-content!important;
  max-width:min(76cqw,680px)!important;
  margin:0!important;
  padding:clamp(6px,.85cqw,11px)!important;

  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  align-items:center!important;
  gap:clamp(4px,.55cqw,8px)!important;

  border:1px solid rgba(103,151,187,.70)!important;
  border-radius:clamp(10px,1.2cqw,16px)!important;
  background:rgba(5,24,37,.94)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.42)!important;
  backdrop-filter:blur(4px)!important;
}

.poker-stage > .actions.floating-decision-actions .btn{
  margin:0!important;
}

.poker-stage > .actions.floating-decision-actions.trump-actions{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(58px,1fr))!important;
}

.poker-stage > .actions.floating-decision-actions .trump-choice{
  min-width:0!important;
  width:clamp(58px,8.4cqw,104px)!important;
  min-height:clamp(58px,7.7cqw,94px)!important;
  padding:clamp(5px,.7cqw,9px)!important;
}

.poker-stage > .actions.floating-decision-actions .trump-choice .suit-symbol{
  font-size:clamp(25px,4cqw,44px)!important;
}

.poker-stage > .actions.floating-decision-actions .trump-choice .suit-name{
  font-size:clamp(7px,.9cqw,11px)!important;
}

/* Phone landscape needs a wide/short table. The old near-square table used
   precious vertical pixels and could force the hand below the viewport. */
@media (orientation:landscape) and (max-height:600px){
  .poker-stage{
    aspect-ratio:1.78 / 1!important;
  }

  .poker-stage > .actions.floating-decision-actions{
    max-width:min(70cqw,560px)!important;
    padding:4px!important;
    gap:3px!important;
  }

  .poker-stage > .actions.floating-decision-actions.trump-actions{
    grid-template-columns:repeat(4,minmax(48px,1fr))!important;
  }

  .poker-stage > .actions.floating-decision-actions .trump-choice{
    width:clamp(48px,8cqw,72px)!important;
    min-height:48px!important;
    padding:3px!important;
  }

  .poker-stage > .actions.floating-decision-actions .trump-choice .suit-symbol{
    font-size:clamp(21px,3.6cqw,30px)!important;
  }
}

/* Very narrow portrait boards use a compact 2×2 trump chooser without
   consuming any vertical layout space outside the poker table. */
@container (max-width:520px){
  .poker-stage > .actions.floating-decision-actions.trump-actions{
    grid-template-columns:repeat(2,minmax(62px,1fr))!important;
  }
}


/* ==========================================================================
   v30.5.9 — LOW-HEIGHT LANDSCAPE BOARD CONTRACT

   Low-height landscape gets a true wide-table composition with separate seat
   coordinates. This is driven by available height, not phone brand/model.
   ========================================================================== */

@media (orientation:landscape) and (max-height:600px){
  .shell{
    --rq-game-max:2200px!important;
    margin:1px auto!important;
  }

  .top-three-way{
    min-height:34px!important;
    height:34px!important;
    margin-bottom:1px!important;
  }

  .mini-logo{
    width:78px!important;
    max-height:48px!important;
  }

  .top-three-way>.btn{
    width:88px!important;
    min-height:25px!important;
    padding:3px 5px!important;
    font-size:6.8px!important;
  }

  .hud-mainline{
    min-height:31px!important;
    padding:2px 5px!important;
    gap:4px!important;
  }

  .hud-status h3{font-size:8.5px!important}

  .live-trump{
    min-width:94px!important;
    min-height:27px!important;
    padding:2px 5px!important;
    font-size:7px!important;
  }

  .trump-suit{
    width:22px!important;
    min-width:22px!important;
    height:29px!important;
    font-size:18px!important;
  }

  .economy{
    min-width:98px!important;
    padding:4px 6px!important;
    font-size:7px!important;
  }

  .poker-stage{
    aspect-ratio:2.35 / 1!important;
  }

  /* Three players: far top corners + local player bottom-centre. */
  .poker-stage.count-3 .player{
    width:clamp(92px,16cqw,138px)!important;
    min-width:clamp(92px,16cqw,138px)!important;
    max-width:clamp(92px,16cqw,138px)!important;
    height:clamp(66px,9.6cqw,84px)!important;
    min-height:clamp(66px,9.6cqw,84px)!important;
    max-height:clamp(66px,9.6cqw,84px)!important;
  }

  .poker-stage.count-3 .seat-r0{
    left:50%!important;right:auto!important;top:auto!important;bottom:1%!important;
    transform:translateX(-50%)!important;
  }
  .poker-stage.count-3 .seat-r1{
    left:14%!important;right:auto!important;top:4%!important;bottom:auto!important;
    transform:translateX(-50%)!important;
  }
  .poker-stage.count-3 .seat-r2{
    left:86%!important;right:auto!important;top:4%!important;bottom:auto!important;
    transform:translateX(-50%)!important;
  }

  /* Four players: true cardinal layout. */
  .poker-stage.count-4 .player{
    width:clamp(84px,14.2cqw,124px)!important;
    min-width:clamp(84px,14.2cqw,124px)!important;
    max-width:clamp(84px,14.2cqw,124px)!important;
    height:clamp(62px,8.9cqw,80px)!important;
    min-height:clamp(62px,8.9cqw,80px)!important;
    max-height:clamp(62px,8.9cqw,80px)!important;
  }

  .poker-stage.count-4 .seat-r0{
    left:50%!important;right:auto!important;top:auto!important;bottom:1%!important;
    transform:translateX(-50%)!important;
  }
  .poker-stage.count-4 .seat-r1{
    left:1%!important;right:auto!important;top:50%!important;bottom:auto!important;
    transform:translateY(-50%)!important;
  }
  .poker-stage.count-4 .seat-r2{
    left:50%!important;right:auto!important;top:3%!important;bottom:auto!important;
    transform:translateX(-50%)!important;
  }
  .poker-stage.count-4 .seat-r3{
    left:auto!important;right:1%!important;top:50%!important;bottom:auto!important;
    transform:translateY(-50%)!important;
  }

  /* Five players: side pair + spread top pair + local bottom. */
  .poker-stage.count-5 .player{
    width:clamp(80px,13.4cqw,116px)!important;
    min-width:clamp(80px,13.4cqw,116px)!important;
    max-width:clamp(80px,13.4cqw,116px)!important;
    height:clamp(60px,8.5cqw,76px)!important;
    min-height:clamp(60px,8.5cqw,76px)!important;
    max-height:clamp(60px,8.5cqw,76px)!important;
  }

  .poker-stage.count-5 .seat-r0{
    left:50%!important;right:auto!important;top:auto!important;bottom:1%!important;
    transform:translateX(-50%)!important;
  }
  .poker-stage.count-5 .seat-r1{
    left:1%!important;right:auto!important;top:51%!important;bottom:auto!important;
    transform:translateY(-50%)!important;
  }
  .poker-stage.count-5 .seat-r2{
    left:24%!important;right:auto!important;top:3%!important;bottom:auto!important;
    transform:translateX(-50%)!important;
  }
  .poker-stage.count-5 .seat-r3{
    left:76%!important;right:auto!important;top:3%!important;bottom:auto!important;
    transform:translateX(-50%)!important;
  }
  .poker-stage.count-5 .seat-r4{
    left:auto!important;right:1%!important;top:51%!important;bottom:auto!important;
    transform:translateY(-50%)!important;
  }

  .poker-stage .player-card-body{
    inset:3px!important;
    grid-template-rows:18px minmax(0,1fr)!important;
    gap:2px!important;
  }

  .poker-stage .player-card-body .pname{
    font-size:clamp(7px,.95cqw,9.5px)!important;
  }

  .poker-stage .player-static-stats{gap:1px!important}
  .poker-stage .player-static-stats>span{
    padding:0 4px!important;
    border-radius:4px!important;
  }

  .poker-stage .player-static-stats small,
  .poker-stage .player-static-stats strong{
    font-size:clamp(5.8px,.72cqw,7.5px)!important;
  }

  .dealer-chip{
    width:19px!important;
    height:19px!important;
    font-size:8px!important;
  }

  .poker-stage.count-3 .trick-center-layer{
    width:54cqw!important;max-width:54cqw!important;height:21cqw!important;
  }
  .poker-stage.count-4 .trick-center-layer{
    width:52cqw!important;max-width:52cqw!important;height:20cqw!important;
  }
  .poker-stage.count-5 .trick-center-layer{
    width:50cqw!important;max-width:50cqw!important;height:20cqw!important;
  }

  .poker-stage.count-3 .trick{
    --table-card-w:clamp(38px,8.7cqw,60px)!important;
    --table-card-h:clamp(55px,12.6cqw,87px)!important;
  }
  .poker-stage.count-4 .trick{
    --table-card-w:clamp(31px,6.4cqw,50px)!important;
    --table-card-h:clamp(45px,9.3cqw,73px)!important;
  }
  .poker-stage.count-5 .trick{
    --table-card-w:clamp(27px,5.2cqw,43px)!important;
    --table-card-h:clamp(39px,7.55cqw,63px)!important;
  }

  .player-controls{
    margin-top:2px!important;
    padding-top:2px!important;
    padding-bottom:2px!important;
  }

  .wait{
    min-height:10px!important;
    font-size:7px!important;
  }

  .hand{
    --rq-hand-gap:clamp(2px,.32cqw,4px)!important;
    --rq-hand-card-w:clamp(34px,5.2cqw,48px)!important;
    --rq-hand-card-h:clamp(49px,7.55cqw,70px)!important;
    margin-top:1px!important;
    padding:0!important;
  }

  .side{margin-top:1px!important}
  #logPanel{min-height:28px!important}

  .poker-stage > .actions.floating-decision-actions{
    max-width:46cqw!important;
    padding:4px!important;
    gap:3px!important;
  }

  .poker-stage > .actions.floating-decision-actions.trump-actions{
    grid-template-columns:repeat(4,minmax(42px,1fr))!important;
  }

  .poker-stage > .actions.floating-decision-actions .trump-choice{
    width:clamp(42px,6.5cqw,60px)!important;
    min-height:44px!important;
    padding:3px!important;
  }

  .poker-stage > .actions.floating-decision-actions .trump-choice .suit-symbol{
    font-size:clamp(19px,2.8cqw,26px)!important;
  }

  .poker-stage > .actions.floating-decision-actions .trump-choice .suit-name{
    font-size:clamp(5.5px,.65cqw,7px)!important;
  }
}


/* ==========================================================================
   v30.5.10 — UNIFIED LOW-HEIGHT LANDSCAPE SCALE
   ========================================================================== */

@media (orientation:landscape) and (max-height:600px){
  .top-three-way{
    min-height:clamp(20px,6.2dvh,27px)!important;
    height:clamp(20px,6.2dvh,27px)!important;
  }

  .mini-logo{
    width:clamp(48px,15dvh,64px)!important;
    max-height:clamp(32px,11dvh,46px)!important;
  }

  .top-three-way>.btn{
    width:clamp(60px,20dvh,82px)!important;
    min-height:clamp(19px,5.8dvh,24px)!important;
    padding:2px 4px!important;
    font-size:clamp(5.5px,1.8dvh,7px)!important;
  }

  .hud-mainline{
    min-height:clamp(22px,6.7dvh,28px)!important;
    padding:2px 4px!important;
  }

  .hud-status h3{font-size:clamp(7px,2.15dvh,9px)!important}

  .live-trump{
    min-width:clamp(78px,25dvh,104px)!important;
    min-height:clamp(22px,6.7dvh,28px)!important;
    padding:2px 4px!important;
    font-size:clamp(5.8px,1.8dvh,7.5px)!important;
  }

  .trump-suit{
    width:clamp(18px,5.6dvh,23px)!important;
    min-width:clamp(18px,5.6dvh,23px)!important;
    height:clamp(23px,7dvh,29px)!important;
    font-size:clamp(14px,4.6dvh,19px)!important;
  }

  .economy{
    min-width:clamp(78px,26dvh,106px)!important;
    padding:3px 5px!important;
    font-size:clamp(5.5px,1.75dvh,7.2px)!important;
  }

  .poker-stage{aspect-ratio:3.55 / 1!important}

  .poker-stage.count-3 .player{
    width:clamp(72px,24dvh,102px)!important;
    min-width:clamp(72px,24dvh,102px)!important;
    max-width:clamp(72px,24dvh,102px)!important;
    height:clamp(50px,16.2dvh,68px)!important;
    min-height:clamp(50px,16.2dvh,68px)!important;
    max-height:clamp(50px,16.2dvh,68px)!important;
  }

  .poker-stage.count-4 .player{
    width:clamp(68px,22dvh,94px)!important;
    min-width:clamp(68px,22dvh,94px)!important;
    max-width:clamp(68px,22dvh,94px)!important;
    height:clamp(48px,15.2dvh,64px)!important;
    min-height:clamp(48px,15.2dvh,64px)!important;
    max-height:clamp(48px,15.2dvh,64px)!important;
  }

  .poker-stage.count-5 .player{
    width:clamp(64px,20.8dvh,88px)!important;
    min-width:clamp(64px,20.8dvh,88px)!important;
    max-width:clamp(64px,20.8dvh,88px)!important;
    height:clamp(46px,14.6dvh,61px)!important;
    min-height:clamp(46px,14.6dvh,61px)!important;
    max-height:clamp(46px,14.6dvh,61px)!important;
  }

  .poker-stage .player-card-body{
    inset:clamp(2px,.7dvh,3px)!important;
    grid-template-rows:clamp(13px,4.3dvh,17px) minmax(0,1fr)!important;
    gap:1px!important;
  }

  .poker-stage .player-card-body .pname{
    font-size:clamp(6px,1.9dvh,8px)!important;
  }

  .poker-stage .player-static-stats small,
  .poker-stage .player-static-stats strong{
    font-size:clamp(5px,1.55dvh,6.7px)!important;
  }

  .poker-stage .dealer-chip{
    left:calc(-1 * clamp(6px,1.8dvh,8px))!important;
    top:calc(-1 * clamp(6px,1.8dvh,8px))!important;
    width:clamp(15px,4.7dvh,20px)!important;
    height:clamp(15px,4.7dvh,20px)!important;
    font-size:clamp(6px,1.9dvh,8px)!important;
  }

  .poker-stage .emoji-trigger{
    width:clamp(17px,5dvh,21px)!important;
    height:clamp(17px,5dvh,21px)!important;
    font-size:clamp(9px,2.8dvh,12px)!important;
  }

  .poker-stage .turn-countdown{
    min-width:clamp(18px,5.5dvh,23px)!important;
    height:clamp(18px,5.5dvh,23px)!important;
    font-size:clamp(7px,2.2dvh,9px)!important;
  }

  .poker-stage .trick-pile{
    width:clamp(24px,7.6dvh,32px)!important;
    height:clamp(29px,9.2dvh,38px)!important;
  }

  .poker-stage .trick-pile-card{
    top:clamp(8px,2.5dvh,10px)!important;
    left:clamp(6px,1.8dvh,8px)!important;
    width:clamp(12px,3.8dvh,16px)!important;
    height:clamp(17px,5.4dvh,23px)!important;
  }

  .poker-stage .trick-pile-count{
    width:clamp(14px,4.3dvh,18px)!important;
    height:clamp(14px,4.3dvh,18px)!important;
    font-size:clamp(6px,1.8dvh,8px)!important;
  }

  .poker-stage .seat-r0 .trick-pile,
  .poker-stage .count-3 .seat-r1 .trick-pile,
  .poker-stage .count-4 .seat-r2 .trick-pile,
  .poker-stage .count-5 .seat-r2 .trick-pile{
    right:calc(-1 * clamp(22px,7dvh,30px))!important;
  }

  .poker-stage .count-3 .seat-r2 .trick-pile,
  .poker-stage .count-5 .seat-r3 .trick-pile{
    left:calc(-1 * clamp(22px,7dvh,30px))!important;
  }

  .poker-stage.count-3 .seat-r1{left:11%!important;top:5%!important}
  .poker-stage.count-3 .seat-r2{left:89%!important;top:5%!important}

  .poker-stage.count-4 .seat-r1{left:.5%!important;top:50%!important}
  .poker-stage.count-4 .seat-r2{left:50%!important;top:3%!important}
  .poker-stage.count-4 .seat-r3{right:.5%!important;top:50%!important}

  .poker-stage.count-5 .seat-r1{left:.5%!important;top:51%!important}
  .poker-stage.count-5 .seat-r2{left:21%!important;top:3%!important}
  .poker-stage.count-5 .seat-r3{left:79%!important;top:3%!important}
  .poker-stage.count-5 .seat-r4{right:.5%!important;top:51%!important}

  .poker-stage.count-3 .trick-center-layer{
    width:58cqw!important;max-width:58cqw!important;height:18cqw!important;
  }
  .poker-stage.count-4 .trick-center-layer{
    width:60cqw!important;max-width:60cqw!important;height:17cqw!important;
  }
  .poker-stage.count-5 .trick-center-layer{
    width:58cqw!important;max-width:58cqw!important;height:17cqw!important;
  }

  .poker-stage.count-3 .trick{
    --table-card-w:clamp(34px,12dvh,48px)!important;
    --table-card-h:clamp(49px,17.4dvh,70px)!important;
  }
  .poker-stage.count-4 .trick{
    --table-card-w:clamp(30px,10.5dvh,43px)!important;
    --table-card-h:clamp(44px,15.2dvh,62px)!important;
  }
  .poker-stage.count-5 .trick{
    --table-card-w:clamp(27px,9.5dvh,39px)!important;
    --table-card-h:clamp(39px,13.8dvh,56px)!important;
  }

  .poker-stage .played-by{
    height:clamp(7px,2.2dvh,9px)!important;
    line-height:clamp(7px,2.2dvh,9px)!important;
    font-size:clamp(4.5px,1.4dvh,6px)!important;
  }

  .poker-stage .leadlabel{
    font-size:clamp(4px,1.25dvh,5px)!important;
  }

  .player-controls{
    margin-top:1px!important;
    padding:1px 3px 2px!important;
  }

  .wait{
    min-height:clamp(7px,2.2dvh,9px)!important;
    font-size:clamp(5px,1.5dvh,6.5px)!important;
  }

  .hand{
    --rq-hand-gap:clamp(2px,.8dvh,3px)!important;
    --rq-hand-card-w:clamp(34px,11.5dvh,46px)!important;
    --rq-hand-card-h:clamp(49px,16.7dvh,67px)!important;
    margin-top:0!important;
  }

  .side{margin-top:1px!important}
  #logPanel{min-height:clamp(19px,5.8dvh,24px)!important}

  #logPanel summary{
    padding:clamp(4px,1.2dvh,5px) 8px!important;
    font-size:clamp(6px,1.9dvh,8px)!important;
  }

  .poker-stage > .actions.floating-decision-actions{
    max-width:54cqw!important;
    padding:clamp(3px,1dvh,4px)!important;
    gap:clamp(2px,.8dvh,3px)!important;
  }

  .poker-stage > .actions.floating-decision-actions .btn{
    padding:clamp(3px,1dvh,4px) clamp(5px,1.7dvh,7px)!important;
    font-size:clamp(6px,1.9dvh,8px)!important;
  }

  .poker-stage > .actions.floating-decision-actions.trump-actions{
    grid-template-columns:repeat(4,minmax(38px,1fr))!important;
  }

  .poker-stage > .actions.floating-decision-actions .trump-choice{
    width:clamp(38px,12dvh,50px)!important;
    min-height:clamp(38px,12dvh,50px)!important;
  }

  .poker-stage > .actions.floating-decision-actions .trump-choice .suit-symbol{
    font-size:clamp(17px,5.4dvh,22px)!important;
  }
}


/* ========================================================================== 
   v30.5.11 — LANDSCAPE FULL-HAND BASELINE CANDIDATE
   ========================================================================== */

/* Reserve the full hand before any cards are rendered. The stable runtime fit
   therefore chooses a size for the worst-case 7-card round from the start. */
body.game-scroll-locked .hand{
  min-height:calc(var(--rq-hand-card-h) + 6px)!important;
}

/* Body is the scroll boundary. These children must expose natural height so
   the runtime fitter can SEE overflow instead of measuring a clipped box. */
body.game-scroll-locked #app,
body.game-scroll-locked #game{
  max-height:none!important;
  overflow:visible!important;
}

/* iPad / tablet / laptop landscape: wider table means more screen presence and
   enough vertical room for the complete hand at the same time. */
@media (orientation:landscape) and (min-height:601px) and (max-height:900px){
  .poker-stage{
    aspect-ratio:1.95 / 1!important;
  }

  .shell{
    --rq-game-max:1500px!important;
    margin:2px auto!important;
  }

  /* Larger landscape screens get appropriately larger accessories/animations
     without changing seat coordinates or the safe center lane. */
  .poker-stage .dealer-chip{
    width:clamp(23px,2.45cqw,31px)!important;
    height:clamp(23px,2.45cqw,31px)!important;
    font-size:clamp(10px,.95cqw,13px)!important;
  }

  .poker-stage .trick-pile{
    width:clamp(40px,4.8cqw,56px)!important;
    height:clamp(47px,5.7cqw,66px)!important;
  }

  .poker-stage .trick-pile-card{
    width:clamp(20px,2.2cqw,27px)!important;
    height:clamp(29px,3.2cqw,39px)!important;
  }

  .poker-stage .trick-pile-count{
    width:clamp(22px,2.15cqw,27px)!important;
    height:clamp(22px,2.15cqw,27px)!important;
    font-size:clamp(9px,.85cqw,11px)!important;
  }

  .poker-stage .deal-deck{
    width:clamp(41px,4.8cqw,55px)!important;
    height:clamp(58px,6.8cqw,78px)!important;
  }

  .poker-stage .deal-deck span,
  .poker-stage .deal-card{
    width:clamp(36px,4.25cqw,49px)!important;
    height:clamp(52px,6.1cqw,70px)!important;
  }

  .poker-stage .emoji-trigger{
    width:clamp(25px,2.8cqw,31px)!important;
    height:clamp(25px,2.8cqw,31px)!important;
    font-size:clamp(13px,1.45cqw,16px)!important;
  }

  .poker-stage .turn-countdown{
    min-width:clamp(27px,2.8cqw,33px)!important;
    height:clamp(27px,2.8cqw,33px)!important;
    font-size:clamp(11px,1.05cqw,13px)!important;
  }

  .poker-stage > .emoji-reaction-stage{
    font-size:clamp(30px,3.5cqw,40px)!important;
  }

  .poker-stage .played-by{
    font-size:clamp(7px,.8cqw,10px)!important;
    height:clamp(11px,1.15cqw,15px)!important;
    line-height:clamp(11px,1.15cqw,15px)!important;
  }
}

@media (orientation:landscape) and (max-height:600px){
  body.game-scroll-locked .hand{
    min-height:calc(var(--rq-hand-card-h) + 4px)!important;
  }
}

/* ==========================================================================
   v30.6.8 — DECISION HUD SAFE LANE

   Bidding / pinde / trump controls are centered inside a JS-measured lane
   between the actual left/right player HUD bounds. They may wrap, but may not
   expand underneath a side HUD.
   ========================================================================== */
.poker-stage > .actions.floating-decision-actions{
  left:var(--rq-decision-center-x,50%)!important;
  right:auto!important;
  width:max-content!important;
  max-width:var(--rq-decision-max-w,76cqw)!important;
  box-sizing:border-box!important;
  transform:translate(-50%,-50%)!important;
}


/* ==========================================================================
   v30.6.9 — PERMANENT DECISION DOCK
   ========================================================================== */

.decision-dock{
  position:relative!important;
  z-index:8200!important;
  display:grid!important;
  grid-template-areas:"dock"!important;
  place-items:center!important;
  width:100%!important;
  min-width:0!important;
  min-height:clamp(52px,8.2cqw,68px)!important;
  margin:0 auto!important;
  padding:clamp(3px,.45cqw,6px) 0!important;
  box-sizing:border-box!important;
  overflow:visible!important;
  isolation:isolate!important;
}

.decision-dock > .actions,
.decision-dock > .wait{
  grid-area:dock!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
}

.decision-dock > .wait{
  align-self:center!important;
  min-height:0!important;
}

.decision-dock.decision-active > .wait,
.decision-dock.ready-active > .wait{
  visibility:hidden!important;
  pointer-events:none!important;
}

.decision-dock .actions.decision-docked-actions{
  position:relative!important;
  inset:auto!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  transform:none!important;
  z-index:1!important;
  width:min(100%,720px)!important;
  max-width:720px!important;
  min-height:0!important;
  display:grid!important;
  grid-template-rows:auto auto!important;
  justify-items:center!important;
  align-items:center!important;
  gap:clamp(2px,.35cqw,4px)!important;
  padding:clamp(4px,.55cqw,7px) clamp(5px,.7cqw,9px)!important;
  border:1px solid rgba(104,151,186,.62)!important;
  border-radius:clamp(9px,1cqw,14px)!important;
  background:rgba(5,24,37,.97)!important;
  box-shadow:0 7px 20px rgba(0,0,0,.34)!important;
  backdrop-filter:blur(3px)!important;
  box-sizing:border-box!important;
}

.decision-dock-title{
  color:#bcd1e4!important;
  font-size:clamp(7px,.8cqw,10px)!important;
  font-weight:1000!important;
  line-height:1!important;
  letter-spacing:clamp(.45px,.07cqw,.9px)!important;
  text-align:center!important;
}

.decision-dock-buttons{
  display:flex!important;
  flex-flow:row nowrap!important;
  justify-content:center!important;
  align-items:center!important;
  gap:clamp(2px,.35cqw,5px)!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
}

.decision-dock-buttons.numeric-decisions{width:min(100%,600px)!important}

.decision-dock-buttons.numeric-decisions .btn{
  flex:1 1 0!important;
  min-width:26px!important;
  max-width:66px!important;
  min-height:clamp(28px,3.4cqw,38px)!important;
  margin:0!important;
  padding:clamp(3px,.42cqw,6px) 2px!important;
  font-size:clamp(8px,.95cqw,12px)!important;
  line-height:1!important;
}

.decision-dock-buttons .decision-pass{
  max-width:72px!important;
  font-size:clamp(7px,.8cqw,10px)!important;
}

.decision-dock .trump-decision-buttons{width:min(100%,460px)!important}

.decision-dock .trump-choice{
  flex:1 1 0!important;
  min-width:0!important;
  width:auto!important;
  max-width:100px!important;
  min-height:clamp(32px,4.4cqw,52px)!important;
  margin:0!important;
  padding:clamp(2px,.4cqw,5px)!important;
}

.decision-dock .trump-choice .suit-symbol{
  font-size:clamp(18px,2.6cqw,31px)!important;
  line-height:.85!important;
}

.decision-dock .trump-choice .suit-name{
  font-size:clamp(5px,.65cqw,8px)!important;
}

.decision-dock.ready-active{
  min-height:0!important;
  padding:2px 0!important;
}

.decision-dock.ready-active > .actions{
  position:relative!important;
  transform:none!important;
  width:100%!important;
}

/* Previous animations may finish internally, but cannot paint across the dock. */
body.decision-dock-open .deal-layer,
body.decision-dock-open .played-card-flight,
body.decision-dock-open .trick-fly-layer,
body.decision-dock-open .game-toast.trump-toast-flight,
body.decision-dock-open .emoji-reaction{
  visibility:hidden!important;
}

@media (orientation:landscape) and (max-height:600px){
  .decision-dock{
    min-height:clamp(38px,11.5dvh,46px)!important;
    padding:1px 0!important;
  }
  .decision-dock .actions.decision-docked-actions{
    width:min(100%,680px)!important;
    padding:2px 4px!important;
    gap:1px!important;
    border-radius:7px!important;
  }
  .decision-dock-title{font-size:clamp(5px,1.55dvh,7px)!important}
  .decision-dock-buttons{gap:2px!important}
  .decision-dock-buttons.numeric-decisions .btn{
    min-width:23px!important;
    min-height:clamp(22px,6.8dvh,28px)!important;
    padding:2px 1px!important;
    font-size:clamp(6px,1.9dvh,8px)!important;
  }
  .decision-dock .trump-choice{
    min-height:clamp(26px,8.2dvh,34px)!important;
    padding:1px 2px!important;
  }
  .decision-dock .trump-choice .suit-symbol{font-size:clamp(14px,4.4dvh,18px)!important}
  .decision-dock .trump-choice .suit-name{font-size:clamp(4px,1.25dvh,5.5px)!important}
}

@media (orientation:landscape) and (min-height:601px) and (max-height:900px){
  .decision-dock{min-height:clamp(54px,7.4dvh,64px)!important}
  .decision-dock .actions.decision-docked-actions{width:min(92%,760px)!important}
}


/* ==========================================================================
   v30.6.11 — TRUE TABLE-CENTER DEAL ORIGIN + NO BOTTOM LOG FLOW
   ========================================================================== */

/* The deck box itself is centered; every visible stacked card is centered
   inside that box. This makes visual pile center == animation origin. */
.poker-stage .deal-deck{
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
}

.poker-stage .deal-deck span{
  left:50%!important;
  top:50%!important;
}

.poker-stage .deal-deck span:nth-child(1){
  transform:translate(calc(-50% - 3px),calc(-50% - 2px)) rotate(-4deg)!important;
}

.poker-stage .deal-deck span:nth-child(2){
  transform:translate(-50%,-50%) rotate(1deg)!important;
}

.poker-stage .deal-deck span:nth-child(3){
  transform:translate(calc(-50% + 3px),calc(-50% + 2px)) rotate(4deg)!important;
}

.side{margin-top:0!important}


/* ==========================================================================
   v30.6.14 — INTEGRATED READY DOCK
   ========================================================================== */

.decision-dock .actions.ready-actions.decision-docked-actions{
  width:min(100%,720px)!important;
  max-width:720px!important;
  padding:clamp(5px,.65cqw,8px) clamp(6px,.8cqw,10px)!important;
}

.decision-dock .ready-flow{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;

  display:grid!important;
  grid-template-columns:1fr!important;
  justify-items:center!important;
  align-items:center!important;
  gap:clamp(4px,.55cqw,7px)!important;

  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

.decision-dock .ready-flow-title{
  margin:0!important;
  color:#fff!important;
  font-size:clamp(9px,1.05cqw,12px)!important;
  font-weight:1000!important;
  line-height:1!important;
}

.decision-dock .ready-flow-names{
  width:100%!important;
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  align-items:center!important;
  gap:clamp(3px,.4cqw,5px)!important;
}

.decision-dock .ready-flow-names span{
  max-width:min(150px,31%)!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  padding:clamp(3px,.38cqw,5px) clamp(5px,.55cqw,8px)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:999px!important;
  font-size:clamp(7px,.82cqw,9px)!important;
  font-weight:900!important;
}

.decision-dock .ready-flow-names .ready{
  background:#123b29!important;
  border-color:#34865c!important;
  color:#b1f4cb!important;
}

.decision-dock .ready-flow-names .waiting{
  background:#332713!important;
  border-color:#725b2c!important;
  color:#f1d297!important;
}

.decision-dock .ready-flow-actions{
  width:min(100%,430px)!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:clamp(4px,.55cqw,7px)!important;
}

.decision-dock .ready-flow-actions > .btn:only-child{
  grid-column:1 / -1!important;
  width:min(210px,100%)!important;
  justify-self:center!important;
}

.decision-dock .ready-flow-actions .btn{
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:clamp(5px,.65cqw,8px) clamp(7px,.8cqw,10px)!important;
  font-size:clamp(8px,.9cqw,10px)!important;
  line-height:1.05!important;
}

.decision-dock .ready-main.ready-done{
  opacity:.66!important;
}

@media (orientation:landscape) and (max-height:600px){
  .decision-dock .actions.ready-actions.decision-docked-actions{
    padding:2px 4px!important;
  }

  .decision-dock .ready-flow{
    gap:2px!important;
  }

  .decision-dock .ready-flow-title{
    font-size:clamp(6px,1.8dvh,8px)!important;
  }

  .decision-dock .ready-flow-names{
    gap:2px!important;
  }

  .decision-dock .ready-flow-names span{
    padding:2px 4px!important;
    font-size:clamp(5.5px,1.6dvh,7px)!important;
  }

  .decision-dock .ready-flow-actions{
    width:min(100%,360px)!important;
    gap:3px!important;
  }

  .decision-dock .ready-flow-actions .btn{
    padding:3px 5px!important;
    font-size:clamp(6px,1.8dvh,8px)!important;
  }
}

/* ==========================================================================
   v30.6.15 — PORTRAIT PRESENCE + HUD UTILITY LANE
   ========================================================================== */

/* Runde | Trumf | S/L/Lyd | DYR/BILLIG/GÅR OP
   Utilities have their own column and can never cover round text. */
.hud-mainline{
  grid-template-columns:minmax(0,1fr) auto auto minmax(0,1fr)!important;
  align-items:center!important;
}

.hud-status{
  min-width:0!important;
  display:block!important;
}

.hud-status h3{
  width:100%!important;
  min-width:0!important;
}

.hud-mainline > .hud-utility-cluster{
  grid-column:3!important;
  justify-self:center!important;
  min-width:0!important;
}

.hud-mainline > .economy{
  grid-column:4!important;
  justify-self:end!important;
  min-width:0!important;
}

/* Portrait phones now use almost the full available width. Keep the four HUD
   columns compact enough that the extra width goes to the board, not wrapping. */
@media (orientation:portrait) and (max-width:520px){
  .hud-mainline{
    grid-template-columns:minmax(58px,1fr) minmax(72px,auto) auto minmax(70px,1fr)!important;
    gap:clamp(2px,.75vw,4px)!important;
    padding:clamp(4px,1vw,6px)!important;
  }

  .hud-status h3{
    font-size:clamp(7.5px,2.15vw,9.5px)!important;
  }

  .live-trump{
    min-width:clamp(72px,20vw,88px)!important;
    min-height:30px!important;
    padding:3px 4px!important;
    gap:3px!important;
    font-size:clamp(6.2px,1.75vw,7.5px)!important;
  }

  .trump-suit{
    width:22px!important;
    min-width:22px!important;
    height:30px!important;
    font-size:18px!important;
  }

  .hud-utility-cluster{
    gap:2px!important;
  }

  .hud-utility-cluster .hud-utility-btn{
    width:clamp(20px,5.8vw,24px)!important;
    min-width:clamp(20px,5.8vw,24px)!important;
    height:clamp(20px,5.8vw,24px)!important;
    min-height:clamp(20px,5.8vw,24px)!important;
    font-size:clamp(7px,2.15vw,9px)!important;
  }

  .hud-utility-cluster .sound-hud-btn{
    font-size:clamp(7px,2vw,8.5px)!important;
  }

  .economy{
    min-width:clamp(70px,20vw,88px)!important;
    padding:4px 4px!important;
    font-size:clamp(6px,1.7vw,7.3px)!important;
  }
}


/* ==========================================================================
   v30.6.16 — SAFE TRUMP SELECTION + HUD BREATHING ROOM
   ========================================================================== */

/* Trump is one of the most consequential choices in TIPS.
   Each suit gets a clearly separated touch target rather than four buttons
   visually touching each other. */
.decision-dock .trump-decision-buttons{
  width:min(100%,540px)!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(72px,1fr))!important;
  gap:clamp(10px,1.25cqw,16px)!important;
  align-items:stretch!important;
  justify-content:center!important;
}

.decision-dock .trump-decision-buttons .trump-choice{
  width:100%!important;
  min-width:72px!important;
  max-width:none!important;
  min-height:clamp(60px,7.2cqw,78px)!important;
  margin:0!important;
  padding:clamp(7px,.85cqw,10px)!important;

  border-width:2px!important;
  border-radius:clamp(9px,1cqw,13px)!important;

  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
}

.decision-dock .trump-decision-buttons .trump-choice .suit-symbol{
  font-size:clamp(30px,4.1cqw,44px)!important;
  line-height:.9!important;
}

.decision-dock .trump-decision-buttons .trump-choice .suit-name{
  margin-top:4px!important;
  font-size:clamp(8px,.9cqw,11px)!important;
  line-height:1!important;
}

/* Portrait phones get two large columns. This deliberately uses a little more
   vertical space in exchange for much safer suit selection. */
@media (orientation:portrait) and (max-width:620px){
  .decision-dock .trump-decision-buttons{
    width:min(94%,340px)!important;
    grid-template-columns:repeat(2,minmax(112px,1fr))!important;
    gap:12px!important;
  }

  .decision-dock .trump-decision-buttons .trump-choice{
    min-width:112px!important;
    min-height:72px!important;
    padding:8px 10px!important;
  }

  .decision-dock .trump-decision-buttons .trump-choice .suit-symbol{
    font-size:38px!important;
  }

  .decision-dock .trump-decision-buttons .trump-choice .suit-name{
    font-size:9px!important;
  }
}

/* Low-height landscape keeps a single row, but preserves meaningful air
   between choices and a minimum touch target. */
@media (orientation:landscape) and (max-height:600px){
  .decision-dock .trump-decision-buttons{
    width:min(94%,430px)!important;
    grid-template-columns:repeat(4,minmax(58px,1fr))!important;
    gap:clamp(7px,2dvh,10px)!important;
  }

  .decision-dock .trump-decision-buttons .trump-choice{
    min-width:58px!important;
    min-height:clamp(42px,13dvh,54px)!important;
    padding:3px 5px!important;
  }

  .decision-dock .trump-decision-buttons .trump-choice .suit-symbol{
    font-size:clamp(21px,6.4dvh,27px)!important;
  }

  .decision-dock .trump-decision-buttons .trump-choice .suit-name{
    margin-top:2px!important;
    font-size:clamp(5px,1.55dvh,6.5px)!important;
  }
}

/* The utility group sits exactly between Trumf and economy. Equal margins on
   both sides give the top HUD the missing visual symmetry. */
.hud-mainline > .hud-utility-cluster{
  margin-left:clamp(8px,1.1vw,15px)!important;
  margin-right:clamp(8px,1.1vw,15px)!important;
}

@media (orientation:portrait) and (max-width:520px){
  .hud-mainline > .hud-utility-cluster{
    margin-left:clamp(5px,1.4vw,7px)!important;
    margin-right:clamp(5px,1.4vw,7px)!important;
  }
}


/* ==========================================================================
   v30.6.18 — COMPACT SAFE PINDE SELECTION
   ========================================================================== */
.decision-dock .actions.sticks-actions.decision-docked-actions{
  width:min(100%,720px)!important;
  max-width:720px!important;
  padding:3px 5px!important;
  gap:2px!important;
}
.decision-dock .sticks-selection-row{
  width:min(100%,600px)!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:stretch!important;
  gap:6px!important;
}
.decision-dock .sticks-decision-buttons{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:repeat(8,minmax(34px,1fr))!important;
  gap:5px!important;
}
.decision-dock .sticks-choice{
  width:100%!important;
  min-width:34px!important;
  min-height:40px!important;
  margin:0!important;
  padding:3px!important;
  border:2px solid #496983!important;
  border-radius:8px!important;
  background:#102b42!important;
  color:#fff!important;
  font-size:15px!important;
  font-weight:1000!important;
  line-height:1!important;
  touch-action:manipulation!important;
}
.decision-dock .sticks-choice.selected{
  border-color:#e3b842!important;
  background:#4d3a0c!important;
  box-shadow:0 0 0 2px rgba(227,184,66,.22)!important;
}
.decision-dock .sticks-confirm{
  width:60px!important;
  min-width:60px!important;
  min-height:40px!important;
  margin:0!important;
  padding:3px!important;
  border-radius:8px!important;
  font-size:10px!important;
  font-weight:1000!important;
  line-height:1!important;
}
@media (orientation:portrait) and (max-width:620px){
  .decision-dock .actions.sticks-actions.decision-docked-actions{
    width:100%!important;
    padding:2px 3px!important;
  }
  .decision-dock .sticks-actions .decision-dock-title{
    font-size:7px!important;
    letter-spacing:.25px!important;
  }
  .decision-dock .sticks-selection-row{
    width:100%!important;
    gap:4px!important;
  }
  .decision-dock .sticks-decision-buttons{
    grid-template-columns:repeat(8,minmax(0,1fr))!important;
    gap:3px!important;
  }
  .decision-dock .sticks-choice{
    min-width:0!important;
    min-height:36px!important;
    padding:1px 0!important;
    font-size:12px!important;
  }
  .decision-dock .sticks-confirm{
    width:46px!important;
    min-width:46px!important;
    min-height:36px!important;
    font-size:8.5px!important;
  }
}
@media (orientation:landscape) and (max-height:600px){
  .decision-dock .actions.sticks-actions.decision-docked-actions{padding:1px 3px!important}
  .decision-dock .sticks-actions .decision-dock-title{font-size:5.5px!important}
  .decision-dock .sticks-selection-row{width:min(96%,500px)!important;gap:4px!important}
  .decision-dock .sticks-decision-buttons{
    grid-template-columns:repeat(8,minmax(30px,1fr))!important;
    gap:3px!important;
  }
  .decision-dock .sticks-choice{
    min-width:30px!important;
    min-height:30px!important;
    padding:1px!important;
    font-size:9px!important;
  }
  .decision-dock .sticks-confirm{
    width:44px!important;
    min-width:44px!important;
    min-height:30px!important;
    font-size:7px!important;
  }
}


/* ==========================================================================
   v30.6.19 — FULL-WIDTH MELDING & PINDE CONTROLS
   ========================================================================== */

/* The decision box already owns the available safe width. Use it.
   Numeric choices expand evenly instead of clustering in the middle. */
.decision-dock .actions.decision-docked-actions{
  width:min(100%,760px)!important;
  max-width:760px!important;
}

.decision-dock .bidding-decisions{
  width:100%!important;
  max-width:none!important;
  display:grid!important;
  grid-template-columns:repeat(8,minmax(0,1fr))!important;
  gap:clamp(5px,.7cqw,9px)!important;
}

.decision-dock .bidding-decisions .btn{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  min-height:clamp(40px,5.1cqw,52px)!important;
  margin:0!important;
  padding:4px 3px!important;
  border-radius:9px!important;
  font-size:clamp(11px,1.4cqw,16px)!important;
  font-weight:1000!important;
}

.decision-dock .bidding-decisions .decision-pass{
  max-width:none!important;
  font-size:clamp(9px,1.15cqw,13px)!important;
}

/* Pinde uses the same full width, while OK stays clearly separate on the right. */
.decision-dock .sticks-selection-row{
  width:100%!important;
  max-width:none!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:clamp(7px,.85cqw,11px)!important;
}

.decision-dock .sticks-decision-buttons{
  width:100%!important;
  grid-template-columns:repeat(8,minmax(0,1fr))!important;
  gap:clamp(5px,.65cqw,8px)!important;
}

.decision-dock .sticks-choice{
  min-width:0!important;
  min-height:clamp(40px,5.1cqw,52px)!important;
  padding:3px 1px!important;
  border-radius:9px!important;
  font-size:clamp(13px,1.65cqw,18px)!important;
}

.decision-dock .sticks-confirm{
  width:clamp(58px,8cqw,76px)!important;
  min-width:58px!important;
  min-height:clamp(40px,5.1cqw,52px)!important;
  border-radius:9px!important;
  font-size:clamp(9px,1.05cqw,12px)!important;
}

/* Portrait: keep one row and let it occupy essentially the entire dock width.
   This preserves hand visibility while giving each number much more area. */
@media (orientation:portrait) and (max-width:620px){
  .decision-dock .actions.decision-docked-actions{
    width:100%!important;
    max-width:none!important;
  }

  .decision-dock .bidding-decisions{
    width:100%!important;
    grid-template-columns:repeat(8,minmax(0,1fr))!important;
    gap:4px!important;
  }

  .decision-dock .bidding-decisions .btn{
    min-height:40px!important;
    padding:2px 0!important;
    font-size:12px!important;
  }

  .decision-dock .bidding-decisions .decision-pass{
    font-size:9px!important;
  }

  .decision-dock .sticks-selection-row{
    width:100%!important;
    gap:5px!important;
  }

  .decision-dock .sticks-decision-buttons{
    width:100%!important;
    grid-template-columns:repeat(8,minmax(0,1fr))!important;
    gap:4px!important;
  }

  .decision-dock .sticks-choice{
    min-height:40px!important;
    font-size:13px!important;
  }

  .decision-dock .sticks-confirm{
    width:50px!important;
    min-width:50px!important;
    min-height:40px!important;
    font-size:9px!important;
  }
}

/* Short landscape: maximize horizontal use without adding vertical height. */
@media (orientation:landscape) and (max-height:600px){
  .decision-dock .bidding-decisions{
    width:min(100%,620px)!important;
    grid-template-columns:repeat(8,minmax(0,1fr))!important;
    gap:4px!important;
  }

  .decision-dock .bidding-decisions .btn{
    min-height:32px!important;
    padding:1px!important;
    font-size:9px!important;
  }

  .decision-dock .sticks-selection-row{
    width:min(100%,620px)!important;
    gap:5px!important;
  }

  .decision-dock .sticks-decision-buttons{
    grid-template-columns:repeat(8,minmax(0,1fr))!important;
    gap:4px!important;
  }

  .decision-dock .sticks-choice{
    min-height:32px!important;
    font-size:10px!important;
  }

  .decision-dock .sticks-confirm{
    width:46px!important;
    min-width:46px!important;
    min-height:32px!important;
    font-size:7px!important;
  }
}

/* ======================================================================
   v30.6.20 — FULL-WIDTH MELDING CONFIRM + LARGER MOBILE DECISION TARGETS
   ====================================================================== */
.decision-dock .bid-selection-row,
.decision-dock .sticks-selection-row{
  width:100%!important;
  max-width:none!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:stretch!important;
  gap:clamp(8px,.9cqw,12px)!important;
}

.decision-dock .bidding-decisions,
.decision-dock .sticks-decision-buttons{
  width:100%!important;
  max-width:none!important;
}

.decision-dock .bidding-decisions{
  grid-template-columns:repeat(8,minmax(0,1fr))!important;
  gap:clamp(6px,.75cqw,10px)!important;
}

.decision-dock .bid-choice,
.decision-dock .sticks-choice{
  min-width:0!important;
  width:100%!important;
  min-height:clamp(42px,5.4cqw,56px)!important;
  margin:0!important;
  padding:3px 2px!important;
  border-radius:10px!important;
  font-size:clamp(14px,1.75cqw,19px)!important;
  font-weight:1000!important;
  line-height:1!important;
}

.decision-dock .bid-choice.decision-pass{
  font-size:clamp(10px,1.15cqw,13px)!important;
  letter-spacing:.3px!important;
}

.decision-dock .bid-choice.selected,
.decision-dock .sticks-choice.selected{
  border-color:#e3b842!important;
  background:#4d3a0c!important;
  box-shadow:0 0 0 2px rgba(227,184,66,.22)!important;
}

.decision-dock .bid-confirm,
.decision-dock .sticks-confirm{
  width:clamp(64px,8.4cqw,88px)!important;
  min-width:64px!important;
  min-height:clamp(42px,5.4cqw,56px)!important;
  margin:0!important;
  border-radius:10px!important;
  padding:3px 4px!important;
  font-size:clamp(10px,1.15cqw,13px)!important;
  font-weight:1000!important;
  line-height:1!important;
}

/* Mobile portrait: maximize the full row and make the targets clearly tappable. */
@media (orientation:portrait) and (max-width:620px){
  .decision-dock .actions.decision-docked-actions{
    width:100%!important;
    max-width:none!important;
    padding:2px 4px!important;
  }

  .decision-dock .decision-dock-title{
    font-size:8.6px!important;
    letter-spacing:.28px!important;
  }

  .decision-dock .bid-selection-row,
  .decision-dock .sticks-selection-row{
    width:100%!important;
    gap:6px!important;
  }

  .decision-dock .bidding-decisions,
  .decision-dock .sticks-decision-buttons{
    grid-template-columns:repeat(8,minmax(0,1fr))!important;
    gap:4px!important;
  }

  .decision-dock .bid-choice,
  .decision-dock .sticks-choice{
    min-height:44px!important;
    padding:2px 0!important;
    font-size:15px!important;
  }

  .decision-dock .bid-choice.decision-pass{
    font-size:10px!important;
  }

  .decision-dock .bid-confirm,
  .decision-dock .sticks-confirm{
    width:58px!important;
    min-width:58px!important;
    min-height:44px!important;
    font-size:10px!important;
  }
}

/* Compact landscape: still keep confirmation, but stay within the stable dock. */
@media (orientation:landscape) and (max-height:600px){
  .decision-dock .bid-selection-row,
  .decision-dock .sticks-selection-row{
    width:min(100%,640px)!important;
    gap:5px!important;
  }

  .decision-dock .bidding-decisions,
  .decision-dock .sticks-decision-buttons{
    gap:4px!important;
  }

  .decision-dock .bid-choice,
  .decision-dock .sticks-choice{
    min-height:34px!important;
    font-size:10px!important;
    padding:1px!important;
  }

  .decision-dock .bid-choice.decision-pass{
    font-size:8px!important;
  }

  .decision-dock .bid-confirm,
  .decision-dock .sticks-confirm{
    width:48px!important;
    min-width:48px!important;
    min-height:34px!important;
    font-size:7px!important;
  }
}



/* ==========================================================================
   v30.6.21 — STABLE BID SLOTS + SQUARE PINDE + RESPONSIVE DEAL ORIGIN
   ========================================================================== */

/* Keep every bid slot in place. Invalid lower bids are greyed, never removed. */
.decision-dock .bidding-decisions{
  width:100%!important;
  max-width:none!important;
  display:grid!important;
  grid-template-columns:repeat(var(--bid-count,8),minmax(0,1fr))!important;
  gap:clamp(5px,.65cqw,8px)!important;
}
.decision-dock .bid-choice:disabled{
  opacity:.30!important;
  filter:grayscale(.9)!important;
  background:#27343e!important;
  border-color:#4a5964!important;
  color:#86939d!important;
  box-shadow:none!important;
  cursor:not-allowed!important;
}
.decision-dock .bid-choice.selected:not(:disabled){
  border-color:#e3b842!important;
  background:#4d3a0c!important;
  box-shadow:0 0 0 2px rgba(227,184,66,.22)!important;
}

/* Pinde uses the entire numeric area, with one square per number. */
.decision-dock .sticks-selection-row{
  width:100%!important;
  max-width:none!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:stretch!important;
  gap:clamp(8px,1cqw,12px)!important;
}
.decision-dock .sticks-decision-buttons{
  width:100%!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:repeat(8,minmax(0,1fr))!important;
  align-items:center!important;
  gap:clamp(6px,.8cqw,10px)!important;
}
.decision-dock .sticks-choice{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  aspect-ratio:1 / 1!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:10px!important;
  font-size:clamp(16px,2cqw,23px)!important;
  font-weight:1000!important;
  line-height:1!important;
}
.decision-dock .sticks-confirm{
  width:clamp(64px,8.5cqw,88px)!important;
  min-width:64px!important;
  margin:0!important;
  border-radius:10px!important;
  font-size:clamp(10px,1.15cqw,13px)!important;
}

/* Phone portrait: full-field 4×2 square keypad. OK spans both rows. */
@media (orientation:portrait) and (max-width:620px){
  .decision-dock .actions.decision-docked-actions{
    width:100%!important;
    max-width:none!important;
    padding:3px 5px!important;
  }
  .decision-dock .decision-dock-title{
    font-size:8px!important;
    letter-spacing:.25px!important;
  }
  .decision-dock .bidding-decisions{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-auto-rows:48px!important;
    gap:6px!important;
  }
  .decision-dock .bid-choice{
    min-height:48px!important;
    height:48px!important;
    font-size:15px!important;
  }
  .decision-dock .bid-choice.decision-pass{font-size:10px!important}
  .decision-dock .bid-confirm{
    width:58px!important;
    min-width:58px!important;
    min-height:102px!important;
    height:100%!important;
    align-self:stretch!important;
  }
  .decision-dock .sticks-decision-buttons{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-auto-rows:50px!important;
    gap:6px!important;
  }
  .decision-dock .sticks-choice{
    width:50px!important;
    height:50px!important;
    min-width:50px!important;
    max-width:50px!important;
    min-height:50px!important;
    justify-self:center!important;
    aspect-ratio:1 / 1!important;
    border-radius:9px!important;
    font-size:18px!important;
  }
  .decision-dock .sticks-confirm{
    width:58px!important;
    min-width:58px!important;
    min-height:106px!important;
    height:100%!important;
    align-self:stretch!important;
    font-size:10px!important;
  }
}

/* Desktop/tablet distribute square Pinde keys across the entire field. */
@media (min-width:621px){
  .decision-dock .sticks-choice{
    width:min(100%,64px)!important;
    max-width:64px!important;
    justify-self:center!important;
  }
}

/* Keep landscape shallow while preserving square-ish buttons. */
@media (orientation:landscape) and (max-height:600px){
  .decision-dock .bidding-decisions{
    grid-template-columns:repeat(var(--bid-count,8),minmax(0,1fr))!important;
    grid-auto-rows:auto!important;
  }
  .decision-dock .bid-choice{height:34px!important;min-height:34px!important;font-size:10px!important}
  .decision-dock .bid-confirm{height:auto!important;min-height:34px!important;width:48px!important;min-width:48px!important}
  .decision-dock .sticks-decision-buttons{
    grid-template-columns:repeat(8,minmax(0,1fr))!important;
    grid-auto-rows:auto!important;
    gap:4px!important;
  }
  .decision-dock .sticks-choice{
    width:min(100%,36px)!important;
    max-width:36px!important;
    min-width:30px!important;
    min-height:0!important;
    height:auto!important;
    aspect-ratio:1 / 1!important;
    font-size:10px!important;
  }
  .decision-dock .sticks-confirm{height:auto!important;min-height:34px!important;width:48px!important;min-width:48px!important}
}

/* ==========================================================================
   v30.6.22 — SYMMETRIC DESKTOP/TABLET PINDE KEYPAD
   ========================================================================== */

/* Phone portrait keeps the proven v30.6.21 4×2 keypad unchanged.
   From tablet width and up every Pinde number is an explicitly sized square,
   so generic .btn sizing can never turn individual numbers into pills/circles. */
@media (min-width:621px){
  .decision-dock .sticks-selection-row{
    width:100%!important;
    max-width:none!important;
    grid-template-columns:minmax(0,1fr) clamp(66px,8cqw,86px)!important;
    align-items:center!important;
    gap:clamp(10px,1.1cqw,14px)!important;
  }

  .decision-dock .sticks-decision-buttons{
    width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:repeat(8,minmax(0,1fr))!important;
    align-items:center!important;
    justify-items:center!important;
    gap:clamp(7px,.85cqw,11px)!important;
  }

  .decision-dock .sticks-choice{
    box-sizing:border-box!important;
    width:clamp(48px,5.1cqw,60px)!important;
    min-width:clamp(48px,5.1cqw,60px)!important;
    max-width:clamp(48px,5.1cqw,60px)!important;
    height:clamp(48px,5.1cqw,60px)!important;
    min-height:clamp(48px,5.1cqw,60px)!important;
    max-height:clamp(48px,5.1cqw,60px)!important;
    aspect-ratio:auto!important;

    margin:0!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    justify-self:center!important;
    align-self:center!important;

    border-width:2px!important;
    border-radius:8px!important;
    font-size:clamp(16px,1.8cqw,21px)!important;
    line-height:1!important;
  }

  .decision-dock .sticks-confirm{
    box-sizing:border-box!important;
    width:100%!important;
    min-width:66px!important;
    max-width:86px!important;
    height:clamp(48px,5.1cqw,60px)!important;
    min-height:clamp(48px,5.1cqw,60px)!important;
    max-height:clamp(48px,5.1cqw,60px)!important;
    align-self:center!important;
    border-radius:8px!important;
    margin:0!important;
  }
}

/* Low-height landscape still gets true squares, only scaled down uniformly. */
@media (min-width:621px) and (orientation:landscape) and (max-height:600px){
  .decision-dock .sticks-selection-row{
    grid-template-columns:minmax(0,1fr) 52px!important;
    gap:6px!important;
  }

  .decision-dock .sticks-decision-buttons{
    gap:4px!important;
  }

  .decision-dock .sticks-choice{
    width:34px!important;
    min-width:34px!important;
    max-width:34px!important;
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
    border-radius:6px!important;
    font-size:10px!important;
  }

  .decision-dock .sticks-confirm{
    width:52px!important;
    min-width:52px!important;
    max-width:52px!important;
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
    border-radius:6px!important;
  }
}

/* ==========================================================================
   v30.6.23 — IDENTICAL MELDING / PINDE DECISION COMPONENT
   ========================================================================== */

/* One shared geometry contract. Melding = PAS + 1..N, Pinde = 0..N. */
.decision-dock .number-selection-row{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) clamp(66px,8cqw,86px)!important;
  align-items:center!important;
  gap:clamp(10px,1.1cqw,14px)!important;
}

.decision-dock .number-decision-buttons{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  display:grid!important;
  grid-template-columns:repeat(var(--decision-count,8),minmax(0,1fr))!important;
  align-items:center!important;
  justify-items:center!important;
  gap:clamp(7px,.85cqw,11px)!important;
}

.decision-dock .number-choice{
  box-sizing:border-box!important;
  width:clamp(48px,5.1cqw,60px)!important;
  min-width:clamp(48px,5.1cqw,60px)!important;
  max-width:clamp(48px,5.1cqw,60px)!important;
  height:clamp(48px,5.1cqw,60px)!important;
  min-height:clamp(48px,5.1cqw,60px)!important;
  max-height:clamp(48px,5.1cqw,60px)!important;
  aspect-ratio:auto!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  justify-self:center!important;
  align-self:center!important;
  border-width:2px!important;
  border-radius:8px!important;
  font-size:clamp(16px,1.8cqw,21px)!important;
  font-weight:1000!important;
  line-height:1!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
}

.decision-dock .number-choice.decision-pass{
  width:clamp(48px,5.1cqw,60px)!important;
  min-width:clamp(48px,5.1cqw,60px)!important;
  max-width:clamp(48px,5.1cqw,60px)!important;
  font-size:clamp(9px,1cqw,12px)!important;
  letter-spacing:.15px!important;
}

.decision-dock .number-choice.selected:not(:disabled){
  border-color:#e3b842!important;
  background:#4d3a0c!important;
  box-shadow:0 0 0 2px rgba(227,184,66,.22)!important;
}

/* Bids never move. Values already beaten remain in-place, just disabled. */
.decision-dock .bid-choice:disabled{
  opacity:.30!important;
  filter:grayscale(.9)!important;
  background:#27343e!important;
  border-color:#4a5964!important;
  color:#86939d!important;
  box-shadow:none!important;
  cursor:not-allowed!important;
}

.decision-dock .number-confirm{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:66px!important;
  max-width:86px!important;
  height:clamp(48px,5.1cqw,60px)!important;
  min-height:clamp(48px,5.1cqw,60px)!important;
  max-height:clamp(48px,5.1cqw,60px)!important;
  margin:0!important;
  padding:0 5px!important;
  align-self:center!important;
  border-radius:8px!important;
  font-size:clamp(10px,1.15cqw,13px)!important;
  font-weight:1000!important;
  line-height:1!important;
}

/* The approved mobile Pinde layout is now also the Melding layout. */
@media (orientation:portrait) and (max-width:620px){
  .decision-dock .number-selection-row{
    width:100%!important;
    grid-template-columns:minmax(0,1fr) 58px!important;
    align-items:stretch!important;
    gap:6px!important;
  }

  .decision-dock .number-decision-buttons{
    width:100%!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-auto-rows:50px!important;
    gap:6px!important;
  }

  .decision-dock .number-choice,
  .decision-dock .number-choice.decision-pass{
    width:50px!important;
    min-width:50px!important;
    max-width:50px!important;
    height:50px!important;
    min-height:50px!important;
    max-height:50px!important;
    justify-self:center!important;
    border-radius:9px!important;
  }

  .decision-dock .number-choice{font-size:18px!important}
  .decision-dock .number-choice.decision-pass{font-size:10px!important}

  .decision-dock .number-confirm{
    width:58px!important;
    min-width:58px!important;
    max-width:58px!important;
    height:100%!important;
    min-height:106px!important;
    max-height:none!important;
    align-self:stretch!important;
    font-size:10px!important;
  }
}

@media (orientation:landscape) and (max-height:600px){
  .decision-dock .number-selection-row{
    grid-template-columns:minmax(0,1fr) 52px!important;
    gap:6px!important;
  }

  .decision-dock .number-decision-buttons{
    grid-template-columns:repeat(var(--decision-count,8),minmax(0,1fr))!important;
    grid-auto-rows:auto!important;
    gap:4px!important;
  }

  .decision-dock .number-choice,
  .decision-dock .number-choice.decision-pass{
    width:34px!important;
    min-width:34px!important;
    max-width:34px!important;
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
    border-radius:6px!important;
  }

  .decision-dock .number-choice{font-size:10px!important}
  .decision-dock .number-choice.decision-pass{font-size:7px!important}

  .decision-dock .number-confirm{
    width:52px!important;
    min-width:52px!important;
    max-width:52px!important;
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
    border-radius:6px!important;
    font-size:7px!important;
  }
}





/* ==========================================================================
   v30.7.1 — IMMUTABLE GAME SCALE / PERMANENT DECISION RESERVE
   ========================================================================== */
/* Decision content is allowed to change, geometry is not. Reserve the largest
   approved control set up front so Melding/Trumf/Pinde/READY never push the
   hand and never trigger a runtime board refit. */
.decision-dock{
  height:108px!important;
  min-height:108px!important;
  max-height:108px!important;
  overflow:visible!important;
}
.decision-dock.ready-active{
  height:108px!important;
  min-height:108px!important;
  max-height:108px!important;
}

@media (orientation:portrait) and (max-width:620px){
  .decision-dock,
  .decision-dock.ready-active{
    height:142px!important;
    min-height:142px!important;
    max-height:142px!important;
  }
}

@media (orientation:landscape) and (max-height:600px){
  .decision-dock,
  .decision-dock.ready-active{
    height:68px!important;
    min-height:68px!important;
    max-height:68px!important;
  }
}

/* Keep the approved 2×2 trump chooser, but fit it inside the permanent
   portrait reserve instead of expanding the page. Targets remain >44px. */
@media (orientation:portrait) and (max-width:620px){
  .decision-dock .trump-decision-buttons{
    width:min(94%,330px)!important;
    grid-template-columns:repeat(2,minmax(104px,1fr))!important;
    gap:8px!important;
  }
  .decision-dock .trump-decision-buttons .trump-choice{
    min-width:104px!important;
    min-height:54px!important;
    height:54px!important;
    padding:5px 8px!important;
  }
  .decision-dock .trump-decision-buttons .trump-choice .suit-symbol{font-size:31px!important}
  .decision-dock .trump-decision-buttons .trump-choice .suit-name{font-size:8px!important;margin-top:2px!important}
}