/* Original screen-first deck. Outer sizes and game-state styling stay unchanged. */
.card.playing-card {
  container-type:inline-size;
  background:#fff;
  color:#15171b;
  border-color:#d4d7dd;
  border-radius:4px;
}
.card.playing-card.red { color:#ce202d; }
html[data-four-colour=true] .card.playing-card.suit-2 { color:#087842; }
html[data-four-colour=true] .card.playing-card.suit-3 { color:#145bcb; }
.playing-card .card-readout {
  position:absolute;
  z-index:1;
  top:5%;
  left:7%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  color:inherit;
}
.playing-card .card-readout b {
  display:block;
  font:700 30px/.95 Arial,Helvetica,sans-serif;
  font-size:62cqw;
  letter-spacing:-.055em;
  transform:scaleX(.84);
  transform-origin:left top;
}
.playing-card.ten-card .card-readout b {
  font-size:25px;
  font-size:60cqw;
  letter-spacing:-.10em;
  transform:scaleX(.7);
}
.playing-card .card-readout i {
  display:block;
  margin-top:2px;
  font:normal 21px/.85 Georgia,"Times New Roman",serif;
  font-size:38cqw;
}
.playing-card .card-emblem {
  position:absolute;
  right:5%;
  bottom:5%;
  font:normal 37px/1 Georgia,"Times New Roman",serif;
  font-size:74cqw;
  color:inherit;
}
/* The rank remains dominant even on 22px opponent cards at showdown. */
html[data-large-index=false] body[data-screen] .playing-card:not(.mini) .card-readout b { font-size:52cqw; }
html[data-large-index=false] body[data-screen] .playing-card:not(.mini) .card-readout i { font-size:36cqw; }
html[data-large-index=false] body[data-screen] .playing-card:not(.mini) .card-emblem { font-size:70cqw; }
.playing-card.mini .card-readout { top:4%;left:6%; }
.playing-card.mini .card-readout b { font-size:13px;font-size:62cqw; }
.playing-card.mini.ten-card .card-readout b { font-size:12px;font-size:60cqw; }
.playing-card.mini .card-readout i { margin-top:1px;font-size:9px;font-size:38cqw; }
.playing-card.mini .card-emblem { font-size:17px;font-size:74cqw;right:3%;bottom:3%; }
/* Landscape tables use smaller shells; never shrink their key readouts below
   the existing table's legibility floor. Mini opponent cards stay proportional. */
body[data-screen=table] .playing-card:not(.mini) .card-readout b { font-size:max(20px,62cqw); }
body[data-screen=table] .playing-card.ten-card:not(.mini) .card-readout b { font-size:max(20px,60cqw); }
body[data-screen=table] .seat-0 .playing-card .card-readout b { font-size:max(25px,62cqw); }
body[data-screen=table] .seat-0 .playing-card.ten-card .card-readout b { font-size:max(25px,60cqw); }
body[data-screen=table] .seat-0 .playing-card .card-readout i { font-size:max(20px,38cqw); }
/* The two-row audio toolbar leaves less felt on short portrait screens.
   Keep the board above the lower bet lane without reducing rank size. */
@media(max-width:350px) and (max-height:600px) {
  body[data-screen=table] #table .room-playfield .community .card { height:44px; }
  body[data-screen=table] #table .room-playfield .seat-0 { bottom:0; }
}

/* Comfortable portrait phones: use the open centre lane for actual card size,
   rather than squeezing the rank. Short-screen and landscape layouts stay intact. */
@media(min-width:375px) and (max-width:600px) and (min-height:701px) {
  body[data-screen=table] #table .room-playfield .community { gap:5px; }
  body[data-screen=table] #table .room-playfield .community .card { width:46px;height:66px; }
  body[data-screen=table] #table:is([data-phase=finished],[data-phase=revealing]) .room-playfield .board-area { top:32%; }
  body[data-screen=table] #table .room-playfield .seat-0 { width:204px; }
  body[data-screen=table] #table .room-playfield .seat-0 .hole { height:74px;flex-shrink:0; }
  body[data-screen=table] #table .room-playfield .seat-0 .card { width:54px;height:74px; }
  body[data-screen=table] #table .playing-card:not(.mini) .card-readout { top:4%;left:7%; }
  body[data-screen=table] #table .playing-card:not(.mini) .card-readout b {
    font-size:29px;font-weight:800;letter-spacing:-.04em;transform:none;
  }
  body[data-screen=table] #table .seat-0 .playing-card .card-readout b { font-size:33px; }
  body[data-screen=table] #table .playing-card.ten-card:not(.mini) .card-readout b {
    transform:scaleX(.86);letter-spacing:-.085em;
  }
  body[data-screen=table] #table .playing-card:not(.mini) .card-emblem { font-size:64cqw;bottom:4%;right:5%; }
  html[data-large-index=false] body[data-screen=table] #table .playing-card:not(.mini) .card-readout b { font-size:25px; }
  html[data-large-index=false] body[data-screen=table] #table .seat-0 .playing-card .card-readout b { font-size:29px; }
}