/* Final gameplay responsive pass. Visual/layout only; JS-facing IDs/classes stay intact. */

.device.is-playing {
  --game-space-xs: clamp(4px, 0.35vw, 7px);
  --game-space-sm: clamp(7px, 0.55vw, 11px);
  --game-space-md: clamp(10px, 0.8vw, 16px);
  --game-space-lg: clamp(14px, 1.1vw, 22px);
  --game-left-col: clamp(220px, 19vw, 330px);
  --game-right-col: clamp(300px, 24vw, 390px);
  --game-gap-final: clamp(12px, 1.4vw, 24px);
  display: grid;
  grid-template-columns: var(--game-left-col) minmax(0, 1fr) var(--game-right-col);
  grid-template-rows: clamp(58px, 8vh, 92px) minmax(0, 1fr) clamp(72px, 10vh, 118px);
  grid-template-areas:
    "top top top"
    "hist play dock"
    "fun fun fun";
  gap: 0 var(--game-gap-final);
  width: 100vw;
  height: var(--app-h, 100dvh);
  min-width: 0;
  overflow: hidden;
  padding:
    max(var(--game-space-xs), var(--safe-t))
    max(var(--game-space-md), var(--safe-r))
    max(var(--game-space-xs), var(--safe-b))
    max(var(--game-space-md), var(--safe-l));
}

.device.is-playing .scene {
  margin:
    calc(max(var(--game-space-xs), var(--safe-t)) * -1)
    calc(max(var(--game-space-md), var(--safe-r)) * -1)
    calc(max(var(--game-space-xs), var(--safe-b)) * -1)
    calc(max(var(--game-space-md), var(--safe-l)) * -1);
}

.device.is-playing .hud-top {
  grid-area: top;
  align-self: start;
  min-width: 0;
  min-height: 0;
  padding: 0;
  background: linear-gradient(180deg, rgba(5, 3, 2, 0.46), rgba(5, 3, 2, 0));
}

.device.is-playing .history,
.device.is-playing .bet-dock {
  align-self: center;
  justify-self: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  transform: none !important;
}

.device.is-playing .history {
  height: min(100%, clamp(440px, 68vh, 650px));
}

.device.is-playing .bet-dock {
  height: min(100%, clamp(500px, 72vh, 700px));
}

.device.is-playing .playfield {
  grid-area: play;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  align-content: center;
  justify-items: center;
  min-width: 0;
  min-height: 0;
  gap: var(--game-space-xs);
  padding: 0;
  overflow: visible;
  transform: none !important;
}

.game-brand {
  width: min(100%, 620px);
  max-height: 100%;
  margin: 0 auto;
}

.game-brand img {
  width: min(48%, 270px);
  max-height: clamp(42px, 7vh, 82px);
  margin: 0 0 -5px;
}

.game-brand strong {
  font-size: clamp(2.6rem, 8vh, 5rem);
  line-height: 0.9;
}

.game-brand span {
  margin-top: clamp(2px, 0.8vh, 8px);
  font-size: clamp(0.78rem, 2vh, 1.15rem);
}

.device.is-playing .playfield .apong-stage {
  --stage-surface: 15%;
  --plate-anchor-bottom: calc(var(--stage-surface) - 13%);
  --die-seat-offset: clamp(56px, 9vw, 132px);
  --die-seat-offset: clamp(56px, 17cqw, 132px);
  width: min(100%, 820px);
  height: min(48vh, 480px);
  min-height: 0;
  align-self: end;
  overflow: visible;
  container-type: inline-size;
}

.device.is-playing .apong-stage-layers {
  transform: none;
}

.home-history-slot.is-empty::before {
  content: "-";
}

.device.is-playing .stone-plat {
  width: min(90%, 700px);
  bottom: calc(var(--stage-surface) - 32%);
  object-fit: contain;
  object-position: center;
}

.device.is-playing .plate {
  top: auto;
  bottom: var(--plate-anchor-bottom);
  width: var(--plate-w, min(74%, 575px));
}

.device.is-playing .cover {
  top: auto;
  bottom: calc(var(--stage-surface) + 13%);
  width: var(--cover-w, min(48%, 375px));
}

.device.is-playing .axis,
.device.is-playing .die-wrap {
  top: auto;
  bottom: calc(var(--plate-anchor-bottom) + var(--die-seat-offset));
}

.device.is-playing .game-status {
  min-height: clamp(18px, 2.8vh, 28px);
  margin: 0;
  font-size: clamp(0.72rem, 1.9vh, 1rem);
  line-height: 1.15;
}

.device.is-playing .spin-zone {
  width: clamp(340px, 62%, 620px);
  max-width: 92%;
  gap: var(--game-space-xs);
  padding: 0;
}

.device.is-playing .btn-spin {
  width: 100%;
  min-height: clamp(64px, 9vh, 106px);
  aspect-ratio: 420 / 110;
}

.device.is-playing .btn-spin-text b {
  font-size: clamp(1.55rem, 5.4vh, 3rem);
}

.device.is-playing .bet-dock {
  --bet-pad: clamp(14px, 1.15vw, 22px);
  --bet-section-gap: clamp(8px, 0.8vw, 14px);
  --bet-card-gap: clamp(8px, 0.7vw, 12px);
}

.device.is-playing .bet-inner {
  height: calc(100% - clamp(12px, 1.3vw, 20px));
  margin: clamp(6px, 0.65vw, 10px);
  padding: var(--bet-pad);
  gap: var(--bet-section-gap);
}

.device.is-playing .faces-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  flex: 0 0 auto;
  width: 100%;
  min-height: 0;
  max-height: none;
  gap: var(--bet-card-gap);
}

.device.is-playing .face-bet {
  width: 100%;
  aspect-ratio: 1 / 0.82;
  height: auto;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  gap: 2px;
  padding: clamp(5px, 0.7vh, 8px) 4px;
}

.device.is-playing .face-bet .face-die {
  width: clamp(34px, 3vw, 54px);
  height: auto;
  max-height: 54px;
  object-fit: contain;
  object-position: center;
}

.device.is-playing .face-meta {
  width: 100%;
  text-align: center;
  line-height: 1.02;
}

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

.device.is-playing .face-meta i {
  font-size: clamp(0.64rem, 1.4vh, 0.78rem);
}

.device.is-playing .amounts {
  flex: 0 0 auto;
  width: 100%;
  gap: clamp(6px, 0.65vw, 10px) clamp(10px, 0.9vw, 14px);
}

.device.is-playing .amounts button {
  min-height: clamp(36px, 5vh, 48px);
}

.device.is-playing .bet-total {
  min-height: clamp(28px, 4vh, 36px);
  justify-content: center;
  gap: clamp(12px, 1vw, 18px);
}

.device.is-playing .actions {
  width: 100%;
  display: grid;
  gap: clamp(8px, 0.6vw, 12px);
}

.device.is-playing .btn-place,
.device.is-playing .btn-clear {
  width: 100%;
  margin: 0;
}

.device.is-playing .btn-place {
  min-height: clamp(52px, 6vh, 68px);
}

.device.is-playing .btn-clear {
  min-height: clamp(44px, 5vh, 56px);
}

.device.is-playing .history {
  --hist-pad-x: clamp(12px, 1vw, 18px);
  --hist-pad-y: clamp(12px, 1.25vh, 18px);
}

.device.is-playing .history-slot .hist-die {
  width: clamp(34px, 4.6vh, 48px);
  height: clamp(34px, 4.6vh, 48px);
}

.device.is-playing .game-fun {
  grid-area: fun;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto minmax(160px, 1fr);
  align-items: end;
  min-height: 0;
  gap: var(--game-space-md);
  padding: 0;
}

.device.is-playing .game-controls {
  justify-self: center;
  flex-wrap: nowrap;
  gap: clamp(8px, 0.9vw, 14px);
}

.device.is-playing .game-disclaimer {
  justify-self: start;
  max-width: min(300px, 100%);
}

.device.is-playing .game-social {
  justify-self: end;
}

@media (max-height: 760px) and (orientation: landscape) {
  .device.is-playing {
    --game-left-col: clamp(194px, 18vw, 280px);
    --game-right-col: clamp(300px, 25vw, 380px);
    --game-gap-final: clamp(10px, 1.2vw, 18px);
    --plate-w: min(66%, 480px);
    --cover-w: min(48%, 360px);
    grid-template-rows: clamp(46px, 7vh, 62px) minmax(0, 1fr) clamp(58px, 8.5vh, 76px);
  }

  .game-brand img {
    max-height: 42px;
    width: min(46%, 210px);
  }

  .game-brand strong {
    font-size: clamp(2.1rem, 7vh, 3.45rem);
  }

  .game-brand span {
    font-size: clamp(0.66rem, 1.7vh, 0.86rem);
  }

  .device.is-playing .playfield .apong-stage {
    --die-seat-offset: clamp(50px, 8vw, 110px);
    --die-seat-offset: clamp(50px, 15cqw, 110px);
    height: min(41vh, 315px);
  }

  .device.is-playing .stone-plat {
    width: min(82%, 600px);
    bottom: calc(var(--stage-surface) - 28%);
  }

  .device.is-playing .plate {
    bottom: var(--plate-anchor-bottom);
  }

  .device.is-playing .cover {
    bottom: calc(var(--stage-surface) + 12%);
  }

  .device.is-playing .spin-zone {
    width: clamp(320px, 58%, 520px);
  }

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

  .device.is-playing .history {
    height: min(100%, 560px);
  }

  .device.is-playing .bet-dock {
    height: min(100%, 610px);
  }

  .device.is-playing .bet-dock {
    --bet-pad: clamp(12px, 1vw, 17px);
    --bet-section-gap: clamp(5px, 0.7vh, 9px);
    --bet-card-gap: clamp(6px, 0.65vw, 9px);
  }

  .device.is-playing .btn-place {
    min-height: clamp(42px, 5.8vh, 54px);
  }

  .device.is-playing .btn-clear {
    min-height: clamp(38px, 5vh, 46px);
  }

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

@media (min-width: 933px) and (max-width: 1100px) and (min-height: 700px) {
  .device.is-playing .playfield .apong-stage {
    --stage-surface: 15%;
    height: min(43vh, 335px);
  }

  .device.is-playing .stone-plat {
    width: min(88%, 610px);
    bottom: calc(var(--stage-surface) - 27%);
  }

  .device.is-playing .plate {
    bottom: var(--plate-anchor-bottom);
    width: min(76%, 535px);
  }

  .device.is-playing .cover {
    bottom: calc(var(--stage-surface) + 12%);
    width: min(50%, 350px);
  }

  .device.is-playing .axis,
  .device.is-playing .die-wrap {
    bottom: calc(var(--plate-anchor-bottom) + var(--die-seat-offset));
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .device.is-playing .axis,
  .device.is-playing .die-wrap {
    bottom: calc(var(--plate-anchor-bottom) + var(--die-seat-offset));
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .device.is-playing {
    --game-left-col: clamp(150px, 17vw, 220px);
    --game-right-col: clamp(240px, 29vw, 330px);
    --game-gap-final: clamp(6px, 1vw, 12px);
    --game-space-md: clamp(6px, 0.8vw, 10px);
    --plate-w: min(60%, 390px);
    --cover-w: min(44%, 290px);
    grid-template-rows: clamp(42px, 8vh, 52px) minmax(0, 1fr) clamp(48px, 9vh, 58px);
  }

  .device.is-playing .btn-exit,
  .device.is-playing .hud-icon {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }

  .device.is-playing .hud-icon.js-lang {
    min-width: 76px;
  }

  .device.is-playing .bank-chip {
    padding: 5px 10px;
  }

  .device.is-playing .result-scroll {
    width: 42px;
    height: 42px;
  }

  .game-brand img {
    max-height: 26px;
    margin-bottom: -2px;
  }

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

  .game-brand span {
    margin-top: 1px;
    font-size: 0.54rem;
  }

  .device.is-playing .playfield .apong-stage {
    --stage-surface: 14%;
    --die-seat-offset: clamp(44px, 7vw, 92px);
    --die-seat-offset: clamp(44px, 14cqw, 92px);
    height: min(37vh, 190px);
  }

  .device.is-playing .game-status {
    min-height: 16px;
    font-size: clamp(0.55rem, 2vh, 0.68rem);
  }

  .device.is-playing .spin-zone {
    width: min(80%, 360px);
  }

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

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

  .device.is-playing .history-slot:nth-child(n + 5) {
    display: none;
  }

  .device.is-playing .bet-dock {
    --bet-pad: clamp(7px, 1.5vh, 10px);
    --bet-section-gap: clamp(3px, 0.8vh, 5px);
    --bet-card-gap: 4px;
  }

  .device.is-playing .faces-row {
    gap: var(--bet-card-gap);
  }

  .device.is-playing .face-bet .face-die {
    width: clamp(24px, 6vh, 34px);
    max-height: 34px;
  }

  .device.is-playing .face-meta b {
    font-size: clamp(0.75rem, 2.8vh, 0.95rem);
  }

  .device.is-playing .face-meta i {
    font-size: clamp(0.48rem, 1.9vh, 0.58rem);
  }

  .device.is-playing .amounts {
    gap: 3px 6px;
  }

  .device.is-playing .amounts button {
    min-height: clamp(26px, 6vh, 34px);
  }

  .device.is-playing .btn-place {
    min-height: clamp(32px, 7.2vh, 42px);
  }

  .device.is-playing .btn-clear {
    min-height: clamp(29px, 6.2vh, 38px);
  }

  .device.is-playing .game-fun {
    grid-template-columns: minmax(130px, 1fr) auto minmax(112px, 1fr);
    gap: 5px;
  }

  .device.is-playing .game-disclaimer {
    max-width: 170px;
    padding: 5px 7px;
  }

  .device.is-playing .game-disclaimer img {
    width: 28px;
    height: 28px;
  }

  .device.is-playing .game-social > span,
  .device.is-playing .game-disclaimer small {
    display: none;
  }

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

  .device.is-playing .game-social button {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 932px) and (orientation: landscape) {
  .device.is-playing {
    --game-left-col: clamp(112px, 17vw, 150px);
    --game-right-col: clamp(186px, 28vw, 252px);
    --game-gap-final: clamp(5px, 0.9vw, 8px);
    --plate-w: min(58%, 300px);
    --cover-w: min(42%, 225px);
    grid-template-rows: 42px minmax(0, 1fr) 46px;
    padding:
      max(3px, env(safe-area-inset-top))
      max(6px, env(safe-area-inset-right))
      max(3px, env(safe-area-inset-bottom))
      max(6px, env(safe-area-inset-left));
  }

  .device.is-playing .playfield .apong-stage {
    --stage-surface: 14%;
    --die-seat-offset: clamp(42px, 7vw, 69px);
    --die-seat-offset: clamp(42px, 13cqw, 69px);
    --face-w: clamp(32px, 9cqw, 42px);
    --face-h: calc(var(--face-w) * 1.62);
    height: min(36vh, 150px);
  }

  .device.is-playing .stone-plat {
    width: min(76%, 330px);
    bottom: calc(var(--stage-surface) - 25%);
  }

  .device.is-playing .plate {
    bottom: var(--plate-anchor-bottom);
  }

  .device.is-playing .cover {
    bottom: calc(var(--stage-surface) + 12%);
  }

  .device.is-playing .spin-zone {
    width: min(82%, 300px);
  }

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

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

  .device.is-playing .hist-title {
    min-height: 18px;
  }

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

  .device.is-playing .bet-inner {
    margin: 4px;
    height: calc(100% - 8px);
    padding: clamp(4px, 1.3vh, 7px);
    gap: clamp(1px, 0.45vh, 3px);
  }

  .device.is-playing .bet-title,
  .device.is-playing .amount-title {
    font-size: clamp(0.48rem, 2vh, 0.58rem);
    line-height: 1.05;
  }

  .device.is-playing .timer-bar {
    flex-basis: 1px;
  }

  .device.is-playing .faces-row {
    flex: 0 0 auto;
    gap: 3px;
  }

  .device.is-playing .face-bet {
    aspect-ratio: 1 / 0.82;
    padding: 1px 2px;
  }

  .device.is-playing .face-bet .face-die {
    width: clamp(20px, 5.4vh, 26px);
    max-height: 26px;
  }

  .device.is-playing .face-meta b {
    font-size: clamp(0.72rem, 2.5vh, 0.88rem);
  }

  .device.is-playing .face-meta i {
    font-size: clamp(0.46rem, 1.65vh, 0.54rem);
  }

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

  .device.is-playing .amounts button {
    min-height: clamp(23px, 6vh, 28px);
  }

  .device.is-playing .bet-total {
    min-height: clamp(18px, 4.8vh, 22px);
    padding-block: 1px;
  }

  .device.is-playing .actions {
    gap: 3px;
  }

  .device.is-playing .btn-place {
    min-height: clamp(25px, 6.4vh, 30px);
  }

  .device.is-playing .btn-clear {
    min-height: clamp(23px, 5.6vh, 27px);
  }

  .device.is-playing .action-text b {
    font-size: clamp(0.54rem, 2.35vh, 0.68rem);
  }

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

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

@media (max-width: 740px) and (max-height: 380px) and (orientation: landscape) {
  .device.is-playing {
    --game-left-col: 106px;
    --game-right-col: clamp(178px, 27vw, 198px);
    grid-template-rows: 39px minmax(0, 1fr) 42px;
  }

  .device.is-playing .playfield .apong-stage {
    --stage-surface: 13%;
    --face-w: clamp(28px, 9cqw, 36px);
    --face-h: calc(var(--face-w) * 1.62);
    height: min(34vh, 126px);
  }

  .device.is-playing .spin-zone {
    width: min(78%, 270px);
  }

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

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

  .device.is-playing .game-disclaimer b {
    display: none;
  }

  .device.is-playing .game-social button {
    width: 27px;
    height: 27px;
  }
}