/* Responsive gameplay composition only. Game behavior stays in the engine. */

@media (max-width: 360px) and (orientation: portrait) {
  .brand h1 { font-size: 30px; }
  .hand-card { --hand-w: 64px; }
  .seat {
    --seat-avatar: 40px;
    --seat-name: 10px;
    --seat-mini: 19px;
    grid-template-columns: 40px minmax(38px, 50px);
    max-width: 98px;
  }
  #seat-ai-4,
  #seat-ai-5 { grid-template-columns: minmax(38px, 50px) 40px; }
  .action-bar .action-side { flex-basis: 88px; width: 88px; font-size: 10px; }
  .scroll-card,
  .panel-head { width: min(94%, 680px); }
}

@media (orientation: portrait) and (min-width: 390px) {
  .hand-card { --hand-w: 70px; }
}

@media (orientation: portrait) and (min-width: 430px) {
  .brand h1 { font-size: 36px; }
  .hand-card { --hand-w: 74px; }
  .app { width: min(100vw, 430px); }
}

@media (orientation: portrait) and (min-height: 800px) {
  .hand-wrap { height: clamp(142px, 19dvh, 170px); }
  .brand { padding-top: clamp(40px, 8vh, 72px); }
  .table-felt { bottom: -20%; }
}

@media (orientation: portrait) and (min-height: 900px) {
  .hand-card { --hand-w: 76px; }
  .hand-wrap { height: clamp(148px, 19dvh, 176px); }
  .table-felt { bottom: -22%; }
}

/* Mobile/tablet landscape: a wide, shallow table rather than a scaled phone. */
@media (orientation: landscape) {
  body[data-view="loading"],
  body[data-view="home"],
  body[data-view="howto"],
  body[data-view="settings"] {
    display: grid;
    place-items: center;
  }

  body[data-view="loading"] .app,
  body[data-view="home"] .app,
  body[data-view="howto"] .app,
  body[data-view="settings"] .app {
    width: min(96vw, 1200px);
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
  }

  body[data-view="game"] {
    display: grid;
    place-items: center;
  }

  body[data-view="game"] .app {
    width: min(96vw, 1200px);
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    transform: none;
    aspect-ratio: auto;
  }

  .screen[data-screen="game"] .bg-table {
    background-size: cover;
    background-position: center 62%;
  }

  .game-hud {
    min-height: clamp(42px, 12dvh, 58px);
    padding:
      calc(4px + env(safe-area-inset-top))
      clamp(12px, 2.4vw, 28px)
      2px;
    gap: clamp(10px, 2vw, 24px);
  }
  .game-hud .icon-btn {
    width: clamp(40px, min(5.2vw, 12dvh), 52px);
    height: clamp(40px, min(5.2vw, 12dvh), 52px);
  }
  .game-hud .chip {
    min-height: 38px;
    max-width: 180px;
    font-size: clamp(12px, 1.7vmin, 16px);
  }
  .game-hud .chip img {
    width: clamp(24px, 3.5vmin, 30px);
    height: clamp(24px, 3.5vmin, 30px);
  }
  #hud-round { font-size: clamp(11px, 1.75vmin, 16px); }
  #hud-status { font-size: clamp(12px, 1.9vmin, 17px); }

  .table-stage { margin-inline: clamp(10px, 2vw, 28px); }
  .table-felt {
    left: 1%;
    right: 1%;
    top: 1%;
    bottom: 1%;
    border-radius: 46% / 38%;
    transform: rotateX(8deg);
  }

  .seat {
    --seat-avatar: clamp(40px, min(5.6vw, 12dvh), 64px);
    --seat-name: clamp(10px, 1.7vmin, 15px);
    --seat-mini: clamp(20px, 3.2vmin, 34px);
    grid-template-columns: var(--seat-avatar) minmax(52px, 76px);
    column-gap: 7px;
    max-width: 148px;
  }
  #seat-ai-1 { left: 2%; top: 54%; }
  #seat-ai-2 { left: 7%; top: 2%; }
  #seat-ai-3 { left: 50%; top: 0; }
  #seat-ai-4 { right: 7%; top: 2%; }
  #seat-ai-5 { right: 2%; top: 54%; }
  #seat-ai-4,
  #seat-ai-5 { grid-template-columns: minmax(52px, 76px) var(--seat-avatar); }

  .pot {
    top: 28%;
    font-size: clamp(9px, 1.45vmin, 12px);
  }
  .pot img {
    width: clamp(15px, 2.5vmin, 22px);
    height: clamp(15px, 2.5vmin, 22px);
  }
  .pot b { font-size: clamp(10px, 1.6vmin, 14px); }
  .table-ornament,
  .deck-holder,
  #deal-deck { top: 55%; }
  .table-ornament { width: min(22%, 190px); }
  .deck-holder { width: clamp(50px, 8vmin, 76px); }
  #deal-deck { width: clamp(44px, 7vmin, 64px); }

  #play-area {
    left: 21%;
    right: 21%;
    top: 33%;
    height: 63%;
  }
  .played-card { width: clamp(46px, 7vmin, 72px); }
  .play-tag { font-size: clamp(8px, 1.25vmin, 11px); }

  .player-zone {
    gap: clamp(3px, 1dvh, 8px);
    padding:
      0
      clamp(12px, 3vw, 34px)
      calc(4px + env(safe-area-inset-bottom));
  }
  .hand-wrap { height: clamp(112px, 32dvh, 210px); }
  .you-chip {
    font-size: clamp(11px, 1.7vmin, 15px);
    margin-bottom: 0;
  }
  .you-chip img {
    width: clamp(20px, 3.4vmin, 30px);
    height: clamp(20px, 3.4vmin, 30px);
  }
  #hand-row {
    width: min(54vw, 760px);
    padding-bottom: 0;
  }
  .hand-card {
    --hand-w: clamp(68px, min(10vw, 19dvh), 126px);
    --overlap: -0.22 !important;
  }

  .action-bar {
    width: min(92vw, 760px);
    min-height: clamp(40px, 12dvh, 58px);
    margin-inline: auto;
    gap: clamp(8px, 2vw, 20px);
  }
  .action-bar .action-side {
    flex-basis: clamp(104px, 17vw, 154px);
    width: clamp(104px, 17vw, 154px);
    min-height: clamp(40px, 11dvh, 56px);
    font-size: clamp(10px, 1.65vmin, 14px);
  }
  .action-bar .action-center {
    max-width: min(36vw, 280px);
    min-height: clamp(40px, 11dvh, 56px);
    font-size: clamp(10px, 1.65vmin, 14px);
  }

  #toast { top: 20%; }
  .panel-screen { padding-top: calc(8px + env(safe-area-inset-top)); }
  .scroll-card {
    width: min(88%, 720px);
    border-width: 18px 22px;
    border-image-width: 18px 22px;
    padding: 5px;
  }
  .panel-head { width: min(88%, 720px); }
  .panel-content {
    padding:
      clamp(24px, 7dvh, 34px)
      clamp(24px, 4vw, 32px)
      clamp(26px, 7dvh, 36px);
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .table-stage {
    flex: 1 1 auto;
    margin-bottom: 0;
  }
  .player-zone {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  }

  #seat-ai-1 { top: 31%; }
  #seat-ai-2 { top: 4%; }
  #seat-ai-3 { top: 0; }
  #seat-ai-4 { top: 4%; }
  #seat-ai-5 { top: 31%; }

  .pot { top: 19%; }
  .table-ornament,
  .deck-holder,
  #deal-deck { top: 41%; }
  #play-area {
    left: 23%;
    right: 23%;
    top: 22%;
    height: 38%;
  }
  .seat-from-0 { top: 70%; }
  .seat-from-1,
  .seat-from-5 { top: 55%; }
  .seat-from-2,
  .seat-from-4 { top: 32%; }
  .seat-from-3 { top: 8%; }
}

/* Desktop and large landscape: preserve the wide ring with more breathing room. */
@media (orientation: landscape) and (min-width: 900px) and (min-height: 550px) {
  body[data-view="loading"] .app,
  body[data-view="home"] .app,
  body[data-view="howto"] .app,
  body[data-view="settings"] .app {
    width: min(94vw, 1800px);
    height: 94dvh;
    max-height: 1040px;
  }
  .scroll-card {
    border-width: 30px 34px;
    border-image-width: 30px 34px;
    padding: 6px;
  }

  body[data-view="game"] .app {
    width: min(94vw, 1800px);
    height: 94dvh;
    max-height: 1040px;
    box-shadow: 0 0 90px rgba(0, 0, 0, 0.76);
  }

  .game-hud {
    min-height: clamp(54px, 8dvh, 72px);
    padding-top: calc(8px + env(safe-area-inset-top));
  }
  .game-hud .chip { max-width: 210px; }

  .table-stage { margin-inline: clamp(24px, 3vw, 56px); }
  .table-felt { left: 2%; right: 2%; }
  .seat {
    --seat-avatar: clamp(54px, min(5.6vw, 10dvh), 78px);
    --seat-name: clamp(12px, 1.55vmin, 17px);
    --seat-mini: clamp(25px, 3vmin, 38px);
    grid-template-columns: var(--seat-avatar) minmax(68px, 96px);
    max-width: 184px;
  }
  #seat-ai-1 { left: 5%; top: 58%; }
  #seat-ai-2 { left: 13%; top: 8%; }
  #seat-ai-3 { top: 1%; }
  #seat-ai-4 { right: 13%; top: 8%; }
  #seat-ai-5 { right: 5%; top: 58%; }
  #seat-ai-4,
  #seat-ai-5 { grid-template-columns: minmax(68px, 96px) var(--seat-avatar); }

  .pot { top: 23%; }
  .table-ornament,
  .deck-holder,
  #deal-deck { top: 49%; }
  #play-area {
    left: 24%;
    right: 24%;
    top: 24%;
    height: 68%;
  }
  .played-card { width: clamp(58px, 7.2vmin, 90px); }

  .player-zone {
    gap: clamp(6px, 1dvh, 10px);
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
  .hand-wrap { height: clamp(168px, 29dvh, 230px); }
  #hand-row { width: min(58vw, 900px); }
  .action-bar { width: min(78vw, 820px); }
  .action-bar .action-side {
    flex-basis: clamp(126px, 14vw, 168px);
    width: clamp(126px, 14vw, 168px);
  }
  .action-bar .action-center { max-width: min(34vw, 320px); }
}

@media (orientation: landscape) and (min-width: 1400px) and (min-height: 800px) {
  .hand-card { --overlap: -0.12 !important; }
  #hand-row { width: min(62vw, 1040px); }
}

@media (min-width: 700px) {
  .scroll-card,
  .panel-head { width: min(86%, 680px); }
  .menu .menu-primary { width: min(72%, 340px); }
  .menu .menu-secondary { width: min(62%, 290px); }
}

/* Keep every view inside the same frame used by Home. */
@media (orientation: landscape) {
  body[data-view] .app {
    width: min(100vw, 430px);
    max-width: 430px;
    height: 100dvh;
    max-height: none;
    margin: 0 auto;
    transform: none;
  }

  .game-hud {
    min-height: 0;
    padding:
      calc(10px + env(safe-area-inset-top))
      var(--pad-inline, 14px)
      4px;
    gap: var(--gap-sm, 8px);
  }

  .game-hud .icon-btn {
    width: clamp(42px, 12vw, 50px);
    height: clamp(42px, 12vw, 50px);
  }

  .game-hud .chip {
    max-width: min(38vw, 132px);
    font-size: clamp(11px, 2.8vw, 13px);
  }

  #hud-round { font-size: clamp(11px, 2.8vw, 12px); }
  #hud-status { font-size: clamp(12px, 3vw, 13px); }

  .table-stage {
    margin-inline: clamp(4px, 1.5vw, 12px);
    margin-bottom: 0;
  }

  .table-felt {
    left: 4%;
    right: 4%;
    top: 3%;
    bottom: -18%;
    border-radius: 48% / 34%;
    transform: rotateX(12deg);
  }

  .seat {
    --seat-avatar: clamp(40px, 11vw, 50px);
    --seat-name: clamp(10px, 2.8vw, 12px);
    --seat-mini: clamp(20px, 5.5vw, 26px);
    grid-template-columns: var(--seat-avatar) minmax(42px, 58px);
    column-gap: 5px;
    max-width: 116px;
  }

  #seat-ai-1 { left: 5%; top: 56%; }
  #seat-ai-2 { left: 6%; top: 17%; }
  #seat-ai-3 { left: 50%; top: 5%; }
  #seat-ai-4 { right: 6%; top: 17%; }
  #seat-ai-5 { right: 5%; top: 56%; }
  #seat-ai-4,
  #seat-ai-5 {
    grid-template-columns: minmax(42px, 58px) var(--seat-avatar);
  }

  .pot { top: 21%; font-size: 9px; }
  .pot img { width: 16px; height: 16px; }
  .pot b { font-size: 10px; }

  .table-ornament,
  .deck-holder,
  #deal-deck { top: 43%; }
  .table-ornament { width: min(42%, 176px); }
  .deck-holder { width: clamp(48px, 14vw, 66px); }
  #deal-deck { width: clamp(42px, 12vw, 54px); }

  #play-area {
    left: 17%;
    right: 17%;
    top: 24%;
    height: 43%;
  }

  .played-card { width: clamp(42px, 10.5vw, 50px); }

  .player-zone {
    position: relative;
    gap: clamp(8px, 1dvh, 12px);
    padding:
      0
      var(--pad-inline, 14px)
      calc(8px + env(safe-area-inset-bottom));
  }

  .hand-wrap {
    height: clamp(136px, 19dvh, 170px);
  }

  #hand-row {
    width: 100%;
    padding-bottom: 4px;
  }

  .hand-card {
    --hand-w: clamp(60px, 16vw, 68px);
    --overlap: -0.3 !important;
  }

  .action-bar {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    gap: 8px;
  }

  .action-bar .action-side {
    flex: 0 0 98px;
    width: 98px;
    min-height: 46px;
    font-size: 11px;
  }

  .action-bar .action-center {
    flex: 0 1 180px;
    width: 180px;
    max-width: 180px;
    min-height: 46px;
    font-size: 11px;
  }

  .seat-from-0 { left: 50%; top: 82%; }
  .seat-from-1 { left: 30%; top: 47%; }
  .seat-from-2 { left: 36%; top: 25%; }
  .seat-from-3 { left: 50%; top: 8%; }
  .seat-from-4 { left: 64%; top: 25%; }
  .seat-from-5 { left: 70%; top: 47%; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .table-felt {
    left: 2%;
    right: 2%;
    top: 2%;
    bottom: 1%;
    border-radius: 46% / 38%;
    transform: rotateX(8deg);
  }

  #seat-ai-1 { top: 31%; }
  #seat-ai-2 { top: 4%; }
  #seat-ai-3 { top: 0; }
  #seat-ai-4 { top: 4%; }
  #seat-ai-5 { top: 31%; }

  .pot { top: 19%; }
  .table-ornament,
  .deck-holder,
  #deal-deck { top: 41%; }

  #play-area {
    left: 23%;
    right: 23%;
    top: 22%;
    height: 38%;
  }

  .player-zone {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .hand-wrap { height: 112px; }

  .seat-from-0 { left: 50%; top: 70%; }
  .seat-from-1 { left: 42%; top: 58%; }
  .seat-from-2 { left: 44%; top: 38%; }
  .seat-from-3 { left: 50%; top: 34%; }
  .seat-from-4 { left: 56%; top: 38%; }
  .seat-from-5 { left: 58%; top: 58%; }
}

/* Canonical gameplay table: every game element uses this 2:3 coordinate space. */
body[data-view="game"] .app {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0 auto;
}

.screen[data-screen="game"] {
  align-items: center;
  justify-content: center;
  background: #07090d;
}

.screen[data-screen="game"] .bg-table {
  background-size: cover;
  background-position: center;
  opacity: 0.22;
  filter: blur(16px) brightness(0.55);
  transform: scale(1.08);
}

.screen[data-screen="game"] .veil {
  background: rgba(3, 5, 8, 0.48);
}

.table-stage {
  container-type: size;
  position: relative;
  flex: 0 0 auto;
  width: min(100%, calc(100dvh * 2 / 3));
  height: auto;
  aspect-ratio: 2 / 3;
  margin: 0 auto;
  overflow: hidden;
  perspective: none;
  z-index: 3;
}

.table-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  z-index: 0;
}

.game-hud {
  position: absolute;
  left: 3.5%;
  right: 3.5%;
  top: 2.5%;
  z-index: 12;
  min-height: 0;
  padding: 0;
  gap: 2cqw;
  grid-template-columns: minmax(0, 1fr) minmax(112px, 1.55fr) minmax(0, 1fr);
}

.hud-center {
  min-height: clamp(34px, 9cqw, 40px);
  padding: clamp(3px, 1cqw, 5px) clamp(7px, 2.2cqw, 11px);
}

.game-hud .icon-btn {
  width: clamp(34px, 10cqw, 44px);
  height: clamp(34px, 10cqw, 44px);
  padding: 0;
}

.game-hud .chip {
  max-width: 24cqw;
  min-height: clamp(30px, 8cqw, 38px);
  padding: clamp(3px, 1cqw, 5px) clamp(7px, 2cqw, 10px) clamp(3px, 1cqw, 5px) clamp(4px, 1.2cqw, 6px);
  gap: clamp(3px, 1.2cqw, 6px);
  font-size: clamp(10px, 2.8cqw, 12px);
}

.game-hud .chip img {
  width: clamp(18px, 5cqw, 24px);
  height: clamp(18px, 5cqw, 24px);
}

#hud-round {
  font-size: clamp(9px, 2.8cqw, 12px);
  letter-spacing: 0.08em;
}

#hud-status {
  font-size: clamp(10px, 3cqw, 13px);
}

.table-felt {
  left: 5%;
  right: 5%;
  top: 9%;
  bottom: 6%;
  border-radius: 47% / 35%;
  transform: none;
  box-shadow: inset 0 0 10cqw rgba(0, 0, 0, 0.25);
}

.seat {
  --seat-avatar: clamp(36px, 10.5cqw, 48px);
  --seat-name: clamp(9px, 2.5cqw, 11px);
  --seat-mini: clamp(18px, 5cqw, 23px);
  grid-template-columns: var(--seat-avatar) minmax(40px, 13cqw);
  column-gap: 1.2cqw;
  row-gap: 2px;
  width: max-content;
  max-width: 28cqw;
  transform: translate(-50%, -50%);
  z-index: 7;
}

#seat-ai-1 { left: 20%; top: 50%; }
#seat-ai-2 { left: 20%; top: 27%; }
#seat-ai-3 { left: 50%; top: 16%; transform: translate(-50%, -50%); }
#seat-ai-4 { left: 80%; right: auto; top: 27%; }
#seat-ai-5 { left: 80%; right: auto; top: 50%; }

#seat-ai-4,
#seat-ai-5 {
  grid-template-columns: minmax(40px, 13cqw) var(--seat-avatar);
  grid-template-areas:
    "info avatar"
    "cards cards";
}

.seat-info {
  padding: 2px 5px;
  border-radius: 7px;
}

.seat-count {
  min-width: 17px;
  height: 17px;
  font-size: 9px;
}

.pot {
  left: 50%;
  top: 29.5%;
  font-size: clamp(8px, 2cqw, 9px);
  z-index: 4;
}

.pot img {
  width: clamp(13px, 3.5cqw, 16px);
  height: clamp(13px, 3.5cqw, 16px);
}

.pot b { font-size: clamp(9px, 2.5cqw, 10px); }

.table-ornament,
.deck-holder,
#deal-deck {
  top: 41%;
}

.table-ornament { width: 34%; }
.deck-holder { width: clamp(42px, 13cqw, 56px); }
#deal-deck { width: clamp(38px, 11cqw, 48px); }

#play-area {
  left: 28%;
  right: 28%;
  top: 30%;
  height: 25%;
  z-index: 6;
}

.played-card {
  width: clamp(38px, 11cqw, 48px);
}

.seat-from-0 { left: 50%; top: 82%; }
.seat-from-1 { left: 25%; top: 66%; }
.seat-from-2 { left: 24%; top: 36%; }
.seat-from-3 { left: 50%; top: 15%; }
.seat-from-4 { left: 76%; top: 36%; }
.seat-from-5 { left: 75%; top: 66%; }

.player-zone {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: block;
  padding: 0;
  background: none;
  pointer-events: none;
}

.you-chip {
  position: absolute;
  left: 50%;
  top: 70%;
  transform: translate(-50%, -50%);
  gap: 1.5cqw;
  margin: 0;
  font-size: clamp(10px, 2.8cqw, 12px);
  pointer-events: none;
}

.you-chip img {
  width: clamp(20px, 5.5cqw, 25px);
  height: clamp(20px, 5.5cqw, 25px);
}

.hand-wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 74%;
  height: 16%;
  padding: 0;
  z-index: 10;
  pointer-events: none;
}

#hand-row {
  width: 100%;
  height: 100%;
  padding: 0;
  align-items: flex-end;
}

.hand-card {
  --hand-w: clamp(64px, 16cqw, 78px);
  --overlap: -0.32;
  pointer-events: auto;
}

.action-bar {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: 1%;
  transform: translateX(-50%);
  z-index: 12;
  width: 96%;
  min-height: 0;
  justify-content: center;
  gap: 2cqw;
  pointer-events: auto;
}

.action-bar .action-side {
  flex: 0 0 26cqw;
  width: 26cqw;
  min-height: clamp(38px, 10cqw, 44px);
  padding: clamp(5px, 1.4cqw, 7px) clamp(9px, 2.5cqw, 12px);
  font-size: clamp(9px, 2.5cqw, 11px);
}

.action-bar .action-center {
  flex: 0 0 40cqw;
  width: 40cqw;
  max-width: 40cqw;
  min-height: clamp(38px, 10cqw, 44px);
  padding: clamp(5px, 1.4cqw, 7px) clamp(12px, 3cqw, 16px);
  font-size: clamp(8px, 2.5cqw, 11px);
}

.action-bar .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1.5cqw, 7px);
  line-height: 1;
  box-sizing: border-box;
}

.action-bar .btn img {
  width: clamp(14px, 4cqw, 18px);
  height: clamp(14px, 4cqw, 18px);
}

/* Two-role typography inside the table coordinate system. */
.game-hud,
.seat,
.pot,
.you-chip,
.play-tag,
.action-bar {
  font-family: var(--font-ui);
}

#hud-round {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

#hud-status {
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.seat-name {
  font-weight: 600;
  letter-spacing: 0.01em;
}

.seat-meta {
  font-weight: 400;
  line-height: 1.3;
}

.seat-count {
  font-weight: 600;
  line-height: 1;
}

.pot {
  font-weight: 500;
  letter-spacing: 0.05em;
}

.pot b { font-weight: 700; }

.you-chip {
  font-weight: 600;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.play-tag {
  font-weight: 600;
  letter-spacing: 0.08em;
}

.action-bar .btn {
  font-weight: 600;
  letter-spacing: 0.035em;
}

/* Home buttons only: preserve the native 1024 × 240 frame ratio. */
.screen[data-screen="home"] .menu {
  gap: clamp(7px, 1.25dvh, 11px);
  padding-top: clamp(14px, 2.5dvh, 24px);
}

.screen[data-screen="home"] .menu .menu-primary {
  width: min(82%, 350px, calc(100dvh * 0.66));
  margin: 0 auto 4px;
}

.screen[data-screen="home"] .menu .menu-secondary {
  width: min(72%, 310px, calc(100dvh * 0.57));
  margin-inline: auto;
}

.screen[data-screen="home"] .menu .btn {
  aspect-ratio: 64 / 15;
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background-size: contain;
  background-repeat: no-repeat;
  line-height: 1;
}

.home-btn-content {
  width: 68%;
  height: 52%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.8vw, 8px);
  margin: auto;
}

.home-btn-content img {
  position: static;
  width: clamp(14px, 4.2vw, 18px);
  height: clamp(14px, 4.2vw, 18px);
  transform: none;
  flex: 0 0 auto;
  object-fit: contain;
}

.home-btn-label {
  display: block;
  min-width: 0;
  max-width: calc(100% - 26px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  font-family: var(--font-ui);
  font-size: clamp(11px, 3.4vw, 14px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
}

.menu-primary .home-btn-label {
  font-size: clamp(12px, 3.7vw, 15px);
}

/* Home counters: keep labels inside the decorative frame's safe center. */
.screen[data-screen="home"] .home-top > .chip,
.screen[data-screen="home"] .home-record-wrap .chip {
  width: clamp(148px, 40vw, 172px);
  max-width: none;
  min-height: 0;
  aspect-ratio: 64 / 15;
  padding: 0 20px;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  background-size: contain;
  background-repeat: no-repeat;
}

.screen[data-screen="home"] .home-top > .chip img,
.screen[data-screen="home"] .home-record-wrap .chip img {
  width: clamp(19px, 5vw, 22px);
  height: clamp(19px, 5vw, 22px);
}

.screen[data-screen="home"] .home-top > .chip b,
.screen[data-screen="home"] .home-record-wrap .chip span {
  flex: 0 1 auto;
  max-width: calc(100% - 28px);
  text-align: center;
  font-size: clamp(12px, 3.2vw, 14px);
  font-weight: 700;
  line-height: 1;
}

/* Phone shell: always present portrait views inside a true 9:16 canvas.
   This also fixes mobile browsers that expose a desktop-sized CSS viewport. */
@media (orientation: portrait) {
  body {
    display: grid;
    place-items: center;
  }

  body .app,
  body[data-view] .app {
    width: min(100vw, calc(100vh * 9 / 16));
    height: auto;
    aspect-ratio: 9 / 16;
    max-width: none;
    max-height: 100vh;
    margin: 0;
    transform: none;
  }
}

@supports (height: 100dvh) {
  @media (orientation: portrait) {
    body .app,
    body[data-view] .app {
      width: min(100vw, calc(100dvh * 9 / 16));
      max-height: 100dvh;
    }
  }
}

/* Portrait phone scale polish: keep the 9:16 shell, but let touch targets and
   cards use more of the available canvas. */
@media (orientation: portrait) {
  .screen[data-screen="home"] .menu {
    gap: clamp(10px, 1.7dvh, 16px);
    padding-top: clamp(16px, 2.8dvh, 28px);
    padding-bottom: calc(clamp(18px, 3dvh, 30px) + env(safe-area-inset-bottom));
  }

  .screen[data-screen="home"] .menu .menu-primary {
    width: min(86%, 460px);
    margin-bottom: clamp(4px, 0.9dvh, 8px);
  }

  .screen[data-screen="home"] .menu .menu-secondary {
    width: min(76%, 400px);
  }

  .home-btn-content {
    width: 72%;
    height: 56%;
    gap: clamp(7px, 2vw, 11px);
  }

  .home-btn-content img {
    width: clamp(17px, 4.8vw, 24px);
    height: clamp(17px, 4.8vw, 24px);
  }

  .home-btn-label {
    max-width: calc(100% - 32px);
    font-size: clamp(12px, 3.7vw, 17px);
  }

  .menu-primary .home-btn-label {
    font-size: clamp(13px, 4vw, 18px);
  }

  .table-felt {
    left: 3.5%;
    right: 3.5%;
    top: 8%;
    bottom: 4%;
  }

  .deck-holder { width: clamp(50px, 14cqw, 64px); }
  #deal-deck { width: clamp(46px, 12.5cqw, 58px); }

  #play-area {
    left: 25%;
    right: 25%;
    top: 28.5%;
    height: 28%;
  }

  .played-card {
    width: clamp(52px, 15cqw, 68px);
  }

  .seat-from-0 { left: 50%; top: 80%; }
  .seat-from-1 { left: 23%; top: 66%; }
  .seat-from-2 { left: 23%; top: 34%; }
  .seat-from-3 { left: 50%; top: 12%; }
  .seat-from-4 { left: 77%; top: 34%; }
  .seat-from-5 { left: 77%; top: 66%; }

  .you-chip {
    top: 68.5%;
  }

  .hand-wrap {
    top: 70.5%;
    height: 18.5%;
  }

  .hand-card {
    --hand-w: clamp(76px, 21cqw, 92px);
    --overlap: -0.36 !important;
  }

  .action-bar {
    bottom: 1.4%;
  }

  .action-bar .action-side {
    flex-basis: 27cqw;
    width: 27cqw;
    min-height: clamp(40px, 10.8cqw, 48px);
  }

  .action-bar .action-center {
    flex-basis: 38cqw;
    width: 38cqw;
    max-width: 38cqw;
    min-height: clamp(40px, 10.8cqw, 48px);
  }
}