/* The original poker cutout supplies the far rail, cloth, near rail and pedestal.
   Stretch the cloth independently so the live objects stay inside its edges. */
:root {
  --dealer-art: url('/tabletop/dealer-room.webp');
  --dealer-room: #10130e var(--dealer-art);
}
body.isn-salon-classic main#game > .felt,
body.isn-salon-classic main#game > .felt.has-seated-guests,
body[data-isn-room] #gameDialog .game-room-started .table-stage:has(.isn-seated-group),
body[data-isn-room] #gameDialog.poker-fit .table-stage:has(.isn-seated-group) {
  isolation:isolate; position:relative; background:var(--dealer-room) center top / cover no-repeat;
  border:0; outline:none; border-radius:8px;
}
body.isn-salon-classic main#game > .felt::before,
body[data-isn-room] #gameDialog .game-room-started .table-stage:has(.isn-seated-group)::before,
body[data-isn-room] #gameDialog.poker-fit .table-stage:has(.isn-seated-group)::before,
body.isn-salon-friends #table:has(.table-seats)::before,
.board-stage:has([data-salon-game])::before,
.cf-scene::before,
body:has(.felt-table #gameBoard) .felt-table::before {
  content:"";position:absolute;inset:0;width:auto;height:auto;
  background:none;border-style:solid;border-color:transparent;
  border-width:var(--rail-top,clamp(42px,13dvh,132px)) 0 var(--rail-bottom,clamp(36px,10dvh,98px));
  border-image-source:var(--dealer-art);border-image-slice:299 0 342 0 fill;border-image-repeat:stretch;
  border-radius:0;opacity:1;transform:none;pointer-events:none;z-index:-1;
}
body.isn-salon-classic:not(.kings-table) main#game > .felt,
body.isn-salon-classic:not(.kings-table) main#game > .felt.has-seated-guests {
  --rail-top:clamp(88px,22dvh,190px);--rail-bottom:clamp(45px,11dvh,95px);
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"seats" "status" "board" "hand" "moves" "help";
  grid-template-rows:auto auto minmax(min-content,1fr) auto auto auto;
  padding:1% 13% clamp(45px,12dvh,106px);row-gap:4px;
}
body.isn-salon-classic:not(.kings-table) #opponents .seated-figure {
  height:clamp(54px,14.5dvh,146px);
}
body.isn-salon-classic:not(.kings-table) #opponents .opponent > strong,
body.isn-salon-classic:not(.kings-table) #opponents .opponent > small {position:relative}
body.isn-salon-classic:not(.kings-table) #opponents .opponent > p {background:#102419d9;border-radius:4px;padding-inline:4px}
body.isn-salon-classic:not(.kings-table) #opponents .opponent:is(:first-child,:last-child):not(:only-child){
  transform:translateY(5px)
}
body.isn-salon-classic:not(.kings-table) #status {width:fit-content;max-width:100%;justify-self:center;background:#0b281de8}
body.isn-salon-classic:not(.kings-table) .your-hand {padding:0;background:none;border:0}
body.isn-salon-classic:not(.kings-table) main#game > .felt:has(.solitaire-board){
  --table-inset:0;--rail-top:40px;grid-template-areas:"status" "board" "moves" "help";
  grid-template-rows:auto 1fr auto auto;padding-top:38px;
}
body.isn-salon-classic .card:not(.back,.empty),
body.isn-salon-friends .hand .card:not(.back,.empty),
body.public-card-room #gameDialog .room-card-row .playing-card {
  box-shadow:0 1px 0 #b49c68,1px 3px 3px #03140eb8;
}

/* Kings Corner is seen from the near seat. The other players sit across the
   curved rail; the common piles and the near hand occupy two strips of felt. */
body.kings-table main#game{max-width:2000px}
body.kings-table main#game>.felt{--table-inset:10% 0 -1%;--rail-top:30cqh;--rail-bottom:17cqh}
body.kings-table #opponents,body.kings-table #opponents.isn-seated-group{inset:0 12% auto!important;height:28%;gap:clamp(3px,2vw,32px)}
body.kings-table #opponents .opponent{max-width:260px;justify-content:flex-end}
body.kings-table #opponents .opponent:is(:first-child,:last-child):not(:only-child){transform:translateY(4%)!important}
body.kings-table #opponents .seated-figure{height:calc(100% - 23px);width:100%}
body.kings-table #opponents .opponent>small{top:auto;bottom:14%;right:0}
body.kings-table #opponents .opponent>strong{max-width:95%;z-index:1}
body.kings-table #status{top:29%;left:3%;right:auto;width:21%;font-size:clamp(12px,2.5cqh,20px);padding:4px!important}
body.kings-table #board{top:28.5%;left:24%;width:52%;height:35.5%}
body.kings-table .king-layout{max-width:620px;gap:2px}
body.kings-table .king-stack{height:calc(100% - 15px)}
body.kings-table .king-pile,body.kings-table .king-stock{gap:3px}
body.kings-table #kingsPanel{display:contents}
body.kings-table #kingsPanel .your-hand{position:absolute;left:12%;width:76%;top:65%;height:17.5%;align-items:center}
body.kings-table #kingsPanel .your-hand h2{margin:0 0 2px;font-size:clamp(10px,1.9cqh,15px)}
body.kings-table #kingsPanel #hand{
  display:grid;grid-template-columns:repeat(var(--rail-columns),minmax(0,1fr));grid-template-rows:repeat(var(--rail-rows),minmax(0,1fr));
  width:min(100%,calc(var(--rail-columns)*clamp(27px,7.5cqh,60px)));gap:3px 4px;padding:1px;align-items:center
}
body.kings-table #kingsPanel #hand .card{max-height:100%;max-width:100%;width:auto;height:100%;aspect-ratio:5/7}
body.kings-table #kingsPanel #actions{position:absolute;top:43%;right:10%;width:15%;min-height:36px}
body.kings-table #kingsPanel #actions button{font-size:clamp(13px,2.8cqh,20px);padding:6px 4px}
body.kings-table #kingsComment{top:85.5%;left:8%;right:8%;font-size:clamp(11px,2cqh,16px);background:#10180feb;width:fit-content;max-width:84%;margin:0 auto;padding:2px 10px;border-radius:4px}
body.kings-table main#game>.felt::after{top:91.5%!important;bottom:auto!important;font:600 clamp(9px,1.8cqh,17px) Georgia!important}
body.kings-table .kings-large-hand #kingsPanel .your-hand{top:63.5%;height:21%}
body.kings-table .kings-large-hand #board{height:34.5%}

/* The public poker engine uses a fitted stage. Keep the chip readouts in
   their own left/right lanes and settle the cards between them on the cloth. */
body.public-card-room[data-isn-room] #gameDialog.poker-fit .table-stage:has(.isn-seated-group){
  --table-inset:13% 0 0;--rail-top:35cqh;--rail-bottom:18cqh
}
body.public-card-room[data-isn-room] #gameDialog.poker-fit .table-center,
body.public-card-room[data-isn-room] #gameDialog.poker-fit .table-center:not(:has(.showdown-result)),
body.public-card-room[data-isn-room] #gameDialog.poker-fit .table-center:has(.showdown-result){
  inset:39% 5% 12%;width:auto;justify-content:flex-start;align-content:start;gap:3px
}
body.public-card-room[data-isn-room] #gameDialog.poker-fit .table-brand{top:93%;padding:0;font-size:clamp(8px,1.8cqh,15px)}
body.public-card-room[data-isn-room] #gameDialog.poker-fit .room-card-row{
  box-sizing:border-box;width:100%;padding:0 calc(var(--chip-size) + 5px);gap:clamp(10px,3vw,48px);margin:0;
}
body.public-card-room[data-isn-room] #gameDialog.poker-fit .table-betting-chips{
  inset:0;align-items:flex-start;transform:none!important;
}
body.public-card-room[data-isn-room] #gameDialog.poker-fit .room-card-row .playing-card,
body.public-card-room[data-isn-room] #gameDialog.poker-fit .room-card-row .card-back{
  width:clamp(26px,min(5.7vw,10.5cqh),75px);height:auto;aspect-ratio:5/7;min-height:0;
}
body.public-card-room[data-isn-room] #gameDialog.poker-fit .showdown-result{width:fit-content;max-width:calc(100% - 2 * var(--chip-size) - 8px)}
body[data-isn-room] #gameDialog {--chip-size:clamp(88px,min(10vw,17dvh),146px)}
body.public-card-room[data-isn-room] #gameDialog .table-stage .table-betting-chip,
body[data-isn-room] #gameDialog .table-stage .table-betting-chip{
  box-sizing:border-box;container-type:inline-size;width:var(--chip-size);min-width:var(--chip-size);height:var(--chip-size);
  aspect-ratio:1;min-height:0;padding:0;border-width:clamp(3px,.4vw,6px);text-align:center
}
body.public-card-room[data-isn-room] #gameDialog .table-stage .table-betting-chip strong,
body[data-isn-room] #gameDialog .table-stage .table-betting-chip strong{font:800 min(28cqw,var(--amount-fit,28cqw))/1 Arial,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.045em;margin:1px 0}
body[data-isn-room] #gameDialog .table-stage .table-betting-chip span,
body[data-isn-room] #gameDialog .table-stage .table-betting-chip small{font:700 clamp(8px,9cqw,14px)/1.05 Arial,sans-serif;color:#fff2c2;margin:0;letter-spacing:.02em}
body[data-isn-room] #gameDialog .table-stage .table-betting-chip span{max-width:80%}
body.isn-salon-friends #table:has(>.table-seats),
.board-stage:has([data-salon-game]),
body:has(.felt-table #gameBoard) .felt-table{
  isolation:isolate;position:relative;background:var(--dealer-room) center/cover no-repeat!important;--rail-top:55px;--rail-bottom:55px;--table-inset:0;
}
body.isn-salon-friends #table:has(>.table-seats){padding:12px 8% 50px}
.board-stage:has([data-salon-game]){padding:22px 9% 34px}
body:has(.felt-table #gameBoard) .felt-table{padding:22px 9% 40px}
.cf-scene{--rail-top:11dvh;--rail-bottom:10dvh;--table-inset:34% 0 -4%}
.cf-scene::before{z-index:0;border-image:none;border:0;background:var(--dealer-art) center / 100% 100% no-repeat}
body[data-isn-room] #gameDialog:not(.poker-fit) .game-room-started .table-stage:has(.isn-seated-group){--table-inset:0;--rail-top:clamp(40px,8dvh,80px);--rail-bottom:clamp(40px,8dvh,80px);padding-bottom:clamp(40px,9dvh,80px)}
@media(max-width:650px){
  body.isn-salon-classic:not(.kings-table) main#game > .felt,
  body.isn-salon-classic:not(.kings-table) main#game > .felt.has-seated-guests {padding:3px 5% 42px;--rail-top:95px;--rail-bottom:45px}
  body.isn-salon-classic:not(.kings-table) #opponents .seated-figure{height:clamp(45px,10dvh,82px)}
  body.kings-table main#game>.felt{--table-inset:8% -8% 0;--rail-top:26cqh;--rail-bottom:14cqh}
  body.kings-table #opponents,body.kings-table #opponents.isn-seated-group{inset:0 4% auto!important;height:24%;gap:1px}
  body.kings-table #opponents .opponent>small{bottom:18%}
  body.kings-table #opponents .seated-figure{height:calc(100% - 18px)}
  body.kings-table #status{top:25%;left:6%;right:6%;width:auto;padding:0!important}
  body.kings-table #board{top:30%;left:11%;width:78%;height:33%}
  body.kings-table #kingsPanel .your-hand{top:64%;height:14%;left:6%;width:88%}
  body.kings-table #kingsPanel #hand{gap:1px 2px}
  body.kings-table #kingsPanel #actions{top:79.5%;left:30%;right:30%;width:auto;min-height:32px}
  body.kings-table #kingsComment{top:88%!important;font-size:10px!important}
  body.kings-table main#game>.felt::after{top:95%!important}
  body.kings-table .kings-large-hand #board{top:29%;height:28%}
  body.kings-table .kings-large-hand #kingsPanel .your-hand{top:58%;height:20%}
  body[data-isn-room] #gameDialog{--chip-size:clamp(54px,15vw,76px)}
  body.public-card-room[data-isn-room] #gameDialog.poker-fit .table-center,
  body.public-card-room[data-isn-room] #gameDialog.poker-fit .table-center:not(:has(.showdown-result)),
  body.public-card-room[data-isn-room] #gameDialog.poker-fit .table-center:has(.showdown-result){inset:38% 1.5% 4%}
  body.public-card-room[data-isn-room] #gameDialog.poker-fit .room-card-row{padding:0 calc(var(--chip-size) + 1px);gap:5px}
  body.public-card-room[data-isn-room] #gameDialog.poker-fit .room-card-row .playing-card,
  body.public-card-room[data-isn-room] #gameDialog.poker-fit .room-card-row .card-back{width:clamp(17px,7.4vw,38px);height:auto}
  body.public-card-room[data-isn-room] #gameDialog.poker-fit .card-group{width:auto!important;gap:1px}
  body.public-card-room[data-isn-room] #gameDialog.poker-fit .showdown-result{max-width:95%}
}
@media(max-height:500px) and (min-width:651px){
  body.kings-table #kingsPanel #actions{min-height:26px}
  body.kings-table .king-pile small,body.kings-table .king-stock small{font-size:7px}
  body.kings-table .king-stack{height:calc(100% - 9px)}
  body.kings-table .king-pile,body.kings-table .king-stock{gap:1px}
  body.kings-table #kingsPanel .your-hand h2{font-size:9px}
  body.kings-table #kingsComment{font-size:9px}
  body[data-isn-room] #gameDialog{--chip-size:clamp(50px,11dvh,64px)}
  body.public-card-room[data-isn-room] #gameDialog.poker-fit .table-brand{display:none}
  body.public-card-room[data-isn-room] #gameDialog.poker-fit .showdown-result{display:flex;align-items:center;flex-wrap:wrap;justify-content:center}
  body.public-card-room[data-isn-room] #gameDialog.poker-fit .showdown-winning-cards .playing-card{width:16px;height:22px}
}

body.public-card-room[data-isn-room] #gameDialog .table-stage:has(.table-betting-chip) .table-betting-chip :is(span,small){
  font:700 clamp(8px,9cqw,14px)/1.04 Arial,sans-serif;color:#ffefb8;letter-spacing:.025em}
body.public-card-room[data-isn-room] #gameDialog.poker-fit .table-brand{top:90%;font-size:clamp(8px,1.9cqh,15px)}
body.public-card-room[data-isn-room] #gameDialog.poker-fit .table-center:not(:has(.showdown-result,.tournament-card-reveal)) {top:48%}

.draw-bank{display:flex;justify-content:center;gap:clamp(18px,5vw,80px);flex:1 0 100%}
.draw-chip{border:4px double #dfbd71;border-radius:50%;width:clamp(54px,11dvh,112px);aspect-ratio:1;display:grid;place-content:center;text-align:center;background:radial-gradient(#6d5935,#3e3120 65%,#d8b765 67%,#7a653c 73%);color:#fff3cb;text-shadow:0 1px 1px #221a10}
.draw-chip b{font:700 clamp(18px,3.8dvh,34px) Arial}.draw-chip small{font:700 clamp(8px,1.4dvh,12px) Arial}

body[data-isn-room] #gameDialog .game-room-started .table-stage:has(.follow-queen-table){background:var(--dealer-art) center/100% 100% no-repeat;border-radius:8px}
body[data-isn-room] #gameDialog .follow-queen-table .stud-player-row{background:transparent;border:0;box-shadow:none}
body[data-isn-room] #gameDialog .follow-queen-table .stud-player-heading{background:#122b1edc;color:#fff1c5;border-radius:8px;padding:3px}
body[data-isn-room] #gameDialog .follow-queen-table .stud-player-cards{background:none;border:0}
body.isn-salon-friends .table-seats .seat:is(:first-child,:last-child):not(:only-child){transform:translateY(5px)}
body.isn-salon-friends #table .chip-readout{font:700 clamp(16px,2.8dvh,23px) Georgia,serif;color:#ffe2a0}

/* Compact styles must not expose a closed native game dialog over the lobby. */
body.public-card-room #gameDialog.game-dialog:not([open]):not(.fallback-open){display:none!important}