/* Final cross-device balance pass. Keeps Home/game regions readable and contained. */

.device.is-playing .game-control {
  width: clamp(56px, 8.4vh, 86px);
}

.device.is-playing .bet-dock {
  aspect-ratio: auto;
}

.device.is-playing .btn-spin {
  min-height: clamp(56px, 8vh, 96px);
}

.device.is-playing .game-control span {
  min-width: 0;
  max-width: 96%;
  font-size: clamp(8px, 1.05vh, 11px);
  line-height: 1;
  overflow-wrap: normal;
}

.device.is-playing .game-fun {
  align-items: end;
}

@media (min-width: 933px) and (max-height: 860px) and (orientation: landscape) {
  .home-brand {
    transform: translateY(-38px);
  }

  .home-title-km {
    font-size: clamp(2.65rem, 8.2vh, 3.75rem);
  }

  .home-crest {
    max-height: 46px;
  }

  .home-bowl {
    width: min(56vw, 690px);
  }

  .home-pedestal {
    width: min(90%, 650px);
  }

  .home-plate {
    bottom: 11%;
    width: min(64%, 470px);
  }

  .home-cover {
    bottom: 25%;
    width: min(42%, 320px);
  }
}

@media (min-width: 933px) and (max-height: 780px) and (orientation: landscape) {
  .device.is-playing .playfield {
    gap: clamp(8px, 1.15vh, 13px);
  }

  .game-brand {
    transform: translateY(-8px);
  }

  .game-brand img {
    max-height: 34px;
  }

  .game-brand strong {
    font-size: clamp(1.85rem, 6.2vh, 3.05rem);
  }

  .device.is-playing .playfield .apong-stage {
    height: min(38vh, 292px);
    align-self: center;
  }
}

@media (min-width: 933px) and (max-height: 620px) and (orientation: landscape) {
  .device.is-playing {
    --game-left-col: clamp(190px, 17vw, 220px);
    --game-right-col: clamp(310px, 28vw, 340px);
    --game-gap-final: clamp(8px, 1vw, 12px);
    --plate-w: min(42%, 280px);
    --cover-w: min(34%, 210px);
    grid-template-rows: 42px minmax(0, 1fr) 48px;
  }

  .device.is-playing .game-brand {
    z-index: 4;
    height: 42px;
    transform: translateY(-10px);
  }

  .device.is-playing .game-brand img {
    max-height: 22px;
    margin-bottom: -2px;
  }

  .device.is-playing .game-brand strong {
    font-size: clamp(1.35rem, 5.8vh, 2rem);
    line-height: 0.86;
  }

  .device.is-playing .game-brand span {
    margin-top: 0;
    font-size: 0.5rem;
    line-height: 1;
  }

  .device.is-playing .playfield {
    grid-template-rows: 42px minmax(0, 1fr) 17px 68px;
    gap: 2px;
  }

  .device.is-playing .playfield .apong-stage {
    --stage-surface: 12%;
    --die-seat-offset: clamp(44px, 10cqw, 66px);
    --face-w: clamp(34px, 7cqw, 48px);
    --face-h: calc(var(--face-w) * 1.58);
    z-index: 2;
    height: 100%;
    align-self: stretch;
  }

  .device.is-playing .stone-plat {
    width: min(64%, 410px);
    bottom: calc(var(--stage-surface) - 21%);
  }

  .device.is-playing .plate {
    bottom: calc(var(--stage-surface) - 8%);
    width: min(40%, 260px);
  }

  .device.is-playing .cover {
    bottom: calc(var(--stage-surface) + 10%);
    width: min(32%, 200px);
  }

  .device.is-playing .game-status {
    min-height: 15px;
    font-size: clamp(0.58rem, 2.1vh, 0.72rem);
    line-height: 1;
  }

  .device.is-playing .spin-zone {
    width: min(46%, 250px);
    gap: 2px;
  }

  .device.is-playing .btn-spin {
    min-height: 48px;
    aspect-ratio: 420 / 100;
  }

  .device.is-playing .spin-hint {
    display: none;
  }

  .device.is-playing .history,
  .device.is-playing .bet-dock {
    align-self: stretch;
    height: calc(100% - 8px);
  }

  .device.is-playing .bet-dock {
    --bet-panel-gap: 3px;
    --bet-panel-pad: 8px;
  }

  .device.is-playing .bet-inner {
    align-content: center;
    grid-template-rows: 14px 2px 104px 14px 54px 20px 58px;
    gap: 3px;
    padding: 8px 10px;
  }

  .device.is-playing .bet-title,
  .device.is-playing .amount-title {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 14px;
    height: 14px;
    overflow: visible;
    font-size: clamp(0.58rem, 2.15vh, 0.72rem);
    line-height: 14px;
  }

  .device.is-playing .faces-row {
    height: 104px;
    min-height: 104px;
    max-height: 104px;
    aspect-ratio: auto;
    gap: 4px;
  }

  .device.is-playing .face-bet {
    padding: 2px;
    border-radius: 5px;
  }

  .device.is-playing .face-bet .face-die {
    width: clamp(24px, 5.2vh, 32px);
    max-width: 58%;
    max-height: 32px;
  }

  .device.is-playing .face-meta b {
    font-size: clamp(0.8rem, 2.7vh, 1rem);
  }

  .device.is-playing .face-meta i {
    font-size: clamp(0.45rem, 1.55vh, 0.56rem);
  }

  .device.is-playing .amounts {
    height: 54px;
    gap: 4px 8px;
  }

  .device.is-playing .amounts button {
    min-height: 26px;
    height: 26px;
  }

  .device.is-playing .amounts button .chip-bg {
    width: 26px;
    height: 26px;
  }

  .device.is-playing .bet-total {
    min-height: 20px;
    height: 20px;
    font-size: 0.62rem;
  }

  .device.is-playing .actions {
    height: 58px;
    gap: 4px;
  }

  .device.is-playing .btn-place {
    min-height: 29px;
  }

  .device.is-playing .btn-clear {
    min-height: 25px;
  }

  .device.is-playing .action-text b {
    font-size: 0.72rem;
  }

  .device.is-playing .action-text small {
    display: none;
  }

  .device.is-playing .game-fun {
    height: 44px;
  }
}

@media (orientation: portrait) {
  .device.is-home,
  .device.is-playing {
    visibility: hidden;
    pointer-events: none;
  }

  .device.is-home + .orientation-lock,
  .device.is-playing + .orientation-lock {
    display: flex;
  }
}

@media (max-height: 760px) and (orientation: landscape) {
  .device.is-playing .btn-spin {
    min-height: 48px;
  }

  .device.is-playing .game-control {
    width: clamp(50px, 7.2vh, 66px);
  }

  .device.is-playing .game-control span {
    font-size: 8px;
  }
}

@media (max-width: 932px) and (orientation: landscape) {
  .home-menu .menu-row small {
    font-size: clamp(6.5px, 1.5vh, 7.5px);
  }

  .home-menu .menu-row em {
    font-size: 7px;
  }

  .home-control > span {
    max-width: 96%;
    font-size: clamp(6px, 1.5vh, 6.5px);
    line-height: 1;
    overflow-wrap: normal;
    white-space: nowrap;
  }

  .fun-only b {
    font-size: clamp(6.5px, 1.7vh, 8px);
  }

  .device.is-playing .btn-spin {
    min-height: 44px;
  }

  .device.is-playing .game-control {
    width: 40px;
  }

  .device.is-playing .game-control span {
    font-size: clamp(6px, 1.5vh, 7px);
    white-space: nowrap;
  }

  .home-center {
    gap: 0;
  }

  .home-bowl {
    width: min(54vw, 360px);
  }

  .home-play {
    margin-top: 0;
  }

  .device.is-playing .playfield {
    gap: 2px;
  }

  .device.is-playing .game-status {
    min-height: 14px;
  }
}

@media (max-width: 740px) and (max-height: 380px) and (orientation: landscape) {
  .home-control {
    width: 36px;
    min-height: 35px;
  }

  .home-social button {
    width: 27px;
    height: 27px;
  }

  .device.is-playing .hist-foot {
    justify-content: center;
    gap: 4px;
    padding-inline: 3px;
  }

  .device.is-playing .hist-foot span {
    display: none;
  }

  .device.is-playing .hist-foot b {
    min-width: 18px;
    margin-left: 0;
    padding-inline: 4px;
  }

  .device.is-playing .game-control {
    width: 36px;
  }

  .device.is-playing .btn-spin {
    min-height: 40px;
  }

  .device.is-playing .game-control span {
    font-size: 6px;
  }
}

@media (max-width: 620px) and (max-height: 340px) and (orientation: landscape) {
  .home-control > span,
  .device.is-playing .game-control span {
    font-size: 6px;
  }

  .fun-only b {
    font-size: 6px;
  }

  .device.is-playing .amounts {
    height: 24px;
  }

  .device.is-playing .bet-inner {
    grid-template-rows: auto 1px 74px auto 24px 17px 27px;
  }

  .device.is-playing .faces-row {
    height: 74px;
    min-height: 74px;
    max-height: 74px;
  }

  .device.is-playing .amounts button {
    min-height: 24px;
    height: 24px;
  }

  .device.is-playing .history {
    --hist-pad-x: 4px;
    --hist-pad-y: 5px;
  }

  .device.is-playing .hist-inner {
    gap: 1px;
  }

  .device.is-playing .hist-title {
    min-height: 16px;
    padding-bottom: 2px;
  }

  .device.is-playing .history-slot {
    padding-block: 1px;
  }

  .device.is-playing .hist-foot {
    min-height: 27px;
  }
}

@media (max-width: 566px) and (max-height: 320px) and (orientation: landscape) {
  .device.is-playing {
    --game-left-col: 90px;
    --game-right-col: 165px;
  }
}