/* Reference-matched gameplay composition. Table content shares one surface. */

.game-stage {
  --card-w-pile: 6.35cqi;
  --card-h-pile: calc(var(--card-w-pile) * 1.48);
  --card-w-hand: 6.65cqi;
  --card-h-hand: calc(var(--card-w-hand) * 1.48);
  --card-w-mini: 3.5cqi;
  --card-h-mini: calc(var(--card-w-mini) * 1.48);
  --fan-step: calc(var(--card-w-hand) * 0.49);
}

.player-hand { touch-action: none; }

.game-hud {
  top: 1.6%;
  left: 2%;
  right: 2%;
  height: 7%;
}

.game-hud__left { gap: 1.15cqi; }
.game-hud__right { gap: 0.75cqi; }

.hud-icon {
  width: 4cqi;
  height: 4cqi;
  border: 2px solid rgba(232, 192, 74, 0.58);
  border-radius: 0.8cqi;
  background: linear-gradient(180deg, rgba(57, 24, 91, 0.98), rgba(24, 8, 44, 0.98));
  font-size: 1.75cqi;
}

#music-toggle,
#sfx-toggle { font-size: 0; }
#music-toggle::before,
#sfx-toggle::before {
  content: '';
  display: block;
  width: 78%;
  height: 78%;
  margin: auto;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
#music-toggle::before { background-image: url('../assets/menu/menu-icon-music.webp'); }
#sfx-toggle::before { background-image: url('../assets/menu/menu-icon-sfx.webp'); }

#menu-btn { font-size: 0; }
#menu-btn::before {
  content: '';
  width: 1.7cqi;
  height: 1.15cqi;
  display: block;
  margin: auto;
  background: linear-gradient(#fff 0 0) top / 100% 0.16cqi no-repeat,
              linear-gradient(#fff 0 0) center / 100% 0.16cqi no-repeat,
              linear-gradient(#fff 0 0) bottom / 100% 0.16cqi no-repeat;
}

.hud-stats { gap: 2.25cqi; }
.hud-stat { font-size: 0.9cqi; gap: 0.15cqi; }
.hud-stat strong { font-size: 1.4cqi; }
.hud-coin { width: 1.45cqi; height: 1.45cqi; }

.game-note-btn {
  width: 4.7cqi;
  height: 4.7cqi;
  min-width: 48px;
  min-height: 48px;
}
.game-note { width: 4.45cqi; max-height: 4.7cqi; }

.game-table-wrap {
  top: 8.5%;
  width: 98%;
  height: 80%;
}

.game-table-img {
  object-fit: contain;
  filter:
    drop-shadow(0 0 12px rgba(116, 52, 176, 0.38))
    drop-shadow(0 14px 30px rgba(0, 0, 0, 0.58));
}

.game-table-surface {
  top: 13%;
  left: 6%;
  right: 6%;
  bottom: 14%;
}

.opponent-group {
  top: -19%;
  width: 48%;
  gap: 0.7cqi;
}

.opponent-hud { transform: none; }
.avatar-wrap { width: 5.65cqi; height: 5.65cqi; padding: 0.22cqi; }
.score-panel {
  min-width: 14cqi;
  padding: 0.65cqi 1.2cqi 0.62cqi 1.45cqi;
  border: 2px solid rgba(232, 192, 74, 0.62);
  border-radius: 0.8cqi;
}
.score-panel__pts { font-size: 1.2cqi; }
.score-panel__name { font-size: 0.92cqi; }

.ai-hand-wrap,
.ai-hand-wrap .hand { height: var(--card-h-mini); }
.ai-hand .card {
  margin-left: calc(var(--card-w-mini) * -0.43);
  margin-right: calc(var(--card-w-mini) * -0.43);
}

.play-zone {
  right: 3.2%;
  top: 36%;
  gap: 2.1cqi;
  padding: 0;
}

.play-zone::before,
.play-zone::after {
  top: -1.8cqi;
  font-size: 0.82cqi;
  color: #e1b93e;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.65);
}
.play-zone::before { left: 13%; }
.play-zone::after { right: 2%; }
.pile-slot { display: none; }

.game-timer {
  left: -4.5%;
  bottom: 18%;
  width: 7.15cqi;
}

.player-hud {
  left: -7%;
  bottom: 3%;
}

.player-zone {
  bottom: -8%;
  width: 58%;
}

.deadwood-capsule {
  margin-bottom: 1.1cqi;
  padding: 0.4cqi 1.25cqi;
  border-color: rgba(232, 192, 74, 0.78);
  font-size: 1.05cqi;
}

.player-hand-zone { height: calc(var(--card-h-hand) + 1.7cqi); }

.game-footer {
  bottom: 1.25%;
  left: 1.7%;
  right: 1.7%;
  height: 8.5%;
}

#game-screen .btn--knock,
#game-screen .btn--gin {
  width: 12.2cqi;
  height: 5.35cqi;
  background-size: contain;
}

.action-buttons { gap: 0.8cqi; }

.hint-wrap {
  position: relative;
  min-width: 29cqi;
  max-width: 34cqi;
  padding: 0.62cqi 2.2cqi;
  border: 2px solid rgba(232, 192, 74, 0.75);
  background: rgba(8, 3, 18, 0.9);
  overflow: visible;
}

.hint-wrap::before,
.hint-wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 4.4cqi;
  height: 1.2cqi;
  background: url('../assets/setup/setup-ornament.webp') center / contain no-repeat;
  transform: translateY(-50%);
  pointer-events: none;
}
.hint-wrap::before { right: calc(100% - 1.1cqi); }
.hint-wrap::after { left: calc(100% - 1.1cqi); transform: translateY(-50%) scaleX(-1); }
.hint-pill__icon { display: none; }
.hint-pill { font-size: 0.95cqi; }

.game-footer__utils { gap: 0.75cqi; }
.util-btn {
  width: 4.45cqi;
  height: 4.45cqi;
  border-color: rgba(162, 106, 218, 0.72);
  background: linear-gradient(180deg, rgba(66, 28, 100, 0.98), rgba(28, 10, 48, 0.98));
  font-size: 2.3cqi;
  cursor: pointer;
  touch-action: manipulation;
}
.util-btn__card {
  display: block;
  width: 1.35cqi;
  height: 2cqi;
  margin: auto;
  border-radius: 0.2cqi;
  background: url('../assets/card-front.webp') center / cover no-repeat;
}
.util-btn__badge { top: -0.1cqi; right: -0.1cqi; }

.flash-msg { top: 10%; }

#game-screen.dialogs-disabled .hint-wrap { visibility: hidden; }

#game-screen.is-left-handed .play-zone { left: 3.2%; right: auto; }
#game-screen.is-left-handed .player-hud { left: auto; right: -7%; flex-direction: row-reverse; }
#game-screen.is-left-handed .player-hud .score-panel { margin-left: 0; margin-right: -1.2cqi; padding-left: 1.2cqi; padding-right: 2cqi; text-align: right; }
#game-screen.is-left-handed .game-timer { left: auto; right: -4.5%; transform: scaleX(-1); }
#game-screen.is-left-handed .action-buttons { order: 3; }
#game-screen.is-left-handed .game-footer__utils { order: 1; }
#game-screen.is-left-handed .hint-wrap { order: 2; }

@media (max-width: 1100px) and (orientation: landscape) {
  .game-stage {
    --card-w-hand: 6.3cqi;
    --card-w-pile: 6.1cqi;
  }
  .game-table-wrap { width: 98%; }
  .hud-stats { gap: 1.6cqi; }
  .opponent-group { top: -18%; }
}

@media (max-width: 768px) and (orientation: portrait) {
  #game-screen { align-items: stretch; }
  .game-stage {
    width: 100vw;
    height: 100dvh;
    aspect-ratio: auto;
    --card-w-pile: clamp(46px, 12cqi, 54px);
    --card-h-pile: calc(var(--card-w-pile) * 1.48);
    --card-w-hand: clamp(54px, 15cqi, 66px);
    --card-h-hand: calc(var(--card-w-hand) * 1.48);
    --card-w-mini: clamp(26px, 7cqi, 32px);
    --card-h-mini: calc(var(--card-w-mini) * 1.48);
    --fan-step: calc(var(--card-w-hand) * 0.43);
  }

  .game-hud {
    top: max(10px, env(safe-area-inset-top));
    left: 10px;
    right: 10px;
    height: 100px;
    align-items: flex-start;
  }
  .game-hud__left { gap: 10px; }
  .game-hud__right { gap: 8px; }
  .hud-icon { width: 46px; height: 46px; min-width: 46px; min-height: 46px; border-radius: 9px; font-size: 21px; }
  #menu-btn::before {
    width: 21px;
    height: 15px;
    background-size: 100% 2px, 100% 2px, 100% 2px;
  }
  .game-note-btn { width: 48px; height: 48px; }
  .game-note { width: 46px; max-height: 48px; }
  .hud-stats {
    position: absolute;
    top: 56px;
    left: 0;
    gap: 18px;
  }
  .hud-stat { font-size: 9px; }
  .hud-stat strong { font-size: 14px; }
  .hud-coin { width: 14px; height: 14px; }

  .game-table-wrap {
    top: 19%;
    width: 100%;
    height: 46vw;
  }
  .game-table-surface { top: 13%; left: 6%; right: 6%; bottom: 14%; }
  .opponent-group { top: -42%; width: 78%; gap: 3px; }
  .avatar-wrap { width: 50px; height: 50px; padding: 2px; }
  .score-panel { min-width: 118px; padding: 6px 10px 6px 18px; margin-left: -10px; border-radius: 8px; }
  .score-panel__pts { font-size: 13px; }
  .score-panel__name { font-size: 10px; }

  .play-zone { right: 0; top: 30%; gap: 10px; }
  .play-zone::before,
  .play-zone::after { top: -14px; font-size: 8px; }
  .player-zone { width: 94%; bottom: -72%; }
  .deadwood-capsule { margin-bottom: 8px; padding: 4px 11px; font-size: 11px; }
  .player-hand-zone { height: calc(var(--card-h-hand) + 14px); }
  .player-hud { left: -2%; bottom: -118%; }
  .player-hud .avatar-wrap { width: 48px; height: 48px; }
  .player-hud .score-panel { min-width: 104px; }
  .game-timer { left: -1%; bottom: -37%; width: 58px; }

  .game-footer {
    left: 10px;
    right: 10px;
    bottom: max(12px, env(safe-area-inset-bottom));
    height: 116px;
    grid-template-columns: 1fr auto;
    align-items: end;
  }
  .hint-wrap {
    position: absolute;
    left: 50%;
    bottom: 72px;
    transform: translateX(-50%);
    min-width: 250px;
    max-width: calc(100vw - 72px);
    padding: 8px 14px;
  }
  .hint-wrap::before,
  .hint-wrap::after { width: 48px; height: 14px; }
  .hint-pill { font-size: 11px; white-space: normal; text-align: center; }
  #game-screen .btn--knock,
  #game-screen .btn--gin { width: 88px; height: 48px; min-width: 82px; }
  .action-buttons { gap: 6px; }
  .game-footer__utils { grid-column: 2; }
  .util-btn { width: 48px; height: 48px; min-width: 48px; min-height: 48px; font-size: 25px; }
  .util-btn__card { width: 15px; height: 22px; border-radius: 2px; }
  .util-btn__badge { width: 18px; height: 18px; font-size: 10px; }
  .flash-msg { top: 13%; max-width: calc(100vw - 32px); font-size: 12px; }

  #game-screen.is-left-handed .play-zone { left: 0; right: auto; }
  #game-screen.is-left-handed .player-hud { left: auto; right: -2%; }
  #game-screen.is-left-handed .game-timer { left: auto; right: -1%; }
  #game-screen.is-left-handed .game-footer { grid-template-columns: auto 1fr; }
  #game-screen.is-left-handed .action-buttons { grid-column: 2; justify-content: flex-end; }
  #game-screen.is-left-handed .game-footer__utils { grid-column: 1; grid-row: 1; }
}