/* ============================================================
   GAMEPLAY — 1600×900 logical stage, table-composed layout
   ============================================================ */

#game-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #080312;
  overflow: hidden;
}

.game-stage {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  font-family: var(--font-body);
  container-type: size;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;

  /* card sizing — smaller hand, readable piles */
  --card-w-pile: 5.2cqi;
  --card-h-pile: calc(var(--card-w-pile) * 1.38);
  --card-w-hand: 5.1cqi;
  --card-h-hand: calc(var(--card-w-hand) * 1.38);
  --card-w-mini: 2.75cqi;
  --card-h-mini: calc(var(--card-w-mini) * 1.38);
  --fan-step: calc(var(--card-w-hand) * 0.38);
}

.game-stage.is-card-dragging .player-hand,
.game-stage.is-card-dragging { touch-action: none; }

.game-stage img {
  -webkit-user-drag: none;
  user-select: none;
}

.game-stage.input-locked .player-hand,
.game-stage.input-locked .pile { cursor: default; }

.game-stage.input-locked .card.is-interactive { cursor: default; }

/* ---------- Background ---------- */
.game-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}

#game-screen[data-environment="rookie"] .game-bg { filter: saturate(.86) brightness(.9); }
#game-screen[data-environment="lounge"] .game-bg { filter: saturate(1.06) hue-rotate(-4deg); }
#game-screen[data-environment="vip"] .game-bg { filter: saturate(1.22) brightness(1.03); }
#game-screen[data-environment="palace"] .game-bg { filter: saturate(1.12) hue-rotate(11deg) brightness(.96); }
#game-screen[data-environment="championship"] .game-bg { filter: saturate(1.28) contrast(1.08) brightness(.9); }
#game-screen[data-environment="lounge"] .game-stage { box-shadow: inset 0 0 5cqi rgba(160,35,145,.2); }
#game-screen[data-environment="vip"] .game-stage { box-shadow: inset 0 0 5cqi rgba(229,171,49,.18); }
#game-screen[data-environment="palace"] .game-stage { box-shadow: inset 0 0 5cqi rgba(70,80,185,.22); }
#game-screen[data-environment="championship"] .game-stage { box-shadow: inset 0 0 5cqi rgba(216,39,83,.2); }

/* ---------- Top HUD ---------- */
.game-hud {
  position: absolute;
  top: 1%;
  left: 1.2%;
  right: 1.2%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 20;
  pointer-events: none;
  height: 6%;
}

.game-hud > * { pointer-events: auto; }

.game-hud__left {
  display: flex;
  align-items: center;
  gap: 0.55cqi;
}

.game-hud__right {
  display: flex;
  align-items: center;
  gap: 0.45cqi;
}

.hud-icon {
  position: relative;
  width: 3cqi;
  height: 3cqi;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(255, 215, 64, 0.35);
  padding: 0;
  background: rgba(20, 8, 40, 0.88);
  border-radius: 0.45cqi;
  color: #fff;
  font-size: 1.3cqi;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  touch-action: manipulation;
  transition: transform 0.1s ease, filter 0.1s ease;
}

.hud-icon.is-pressed {
  transform: scale(0.94);
  filter: brightness(1.15);
}

.hud-icon.is-off { opacity: 0.35; }

.hud-stats {
  display: flex;
  gap: 0.9cqi;
  align-items: flex-end;
}

.hud-stat {
  display: flex;
  flex-direction: column;
  gap: 0.05cqi;
  font-size: 0.78cqi;
  font-weight: 700;
  color: #ffd740;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hud-stat strong {
  display: inline-flex;
  align-items: center;
  gap: 0.2cqi;
  color: #fff;
  font-size: 1.05cqi;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
}

.hud-coin {
  width: 1.15cqi;
  height: 1.15cqi;
  background: url('../assets/coin-icon.webp') center/contain no-repeat;
  display: inline-block;
}

.game-note-btn {
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-note-btn.is-pressed { transform: scale(0.94); }

.game-note {
  width: 3.8cqi;
  height: auto;
  max-height: 4.2cqi;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

/* ---------- Table (transparent PNG, no fill stretch) ---------- */
.game-table-wrap {
  position: absolute;
  top: 7.5%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 70%;
  z-index: 2;
  background: transparent;
}

.game-table-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.55));
}

/* Playable felt coordinate system (inset to green area) */
.game-table-surface {
  position: absolute;
  top: 11%;
  left: 7%;
  right: 7%;
  bottom: 12%;
  z-index: 1;
}

/* ---------- Opponent group (top center) ---------- */
.opponent-group {
  position: absolute;
  top: -2%;
  left: 50%;
  transform: translateX(-50%);
  width: 52%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25cqi;
  z-index: 6;
  pointer-events: none;
}

.opponent-hud {
  display: flex;
  align-items: center;
  transform: translateY(-20%);
}

.ai-hand-wrap {
  width: 100%;
  position: relative;
  height: var(--card-h-mini);
}

.ai-hand-wrap .hand {
  position: relative;
  height: var(--card-h-mini);
}

/* ---------- Avatars & score panels ---------- */
.avatar-wrap {
  position: relative;
  width: 4.8cqi;
  height: 4.8cqi;
  flex-shrink: 0;
  border-radius: 50%;
  padding: 0.18cqi;
  background: linear-gradient(145deg, #ffe082, #ffb300, #ff8f00);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(94, 53, 177, 0.7);
}

.avatar-wrap__photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(62, 39, 35, 0.65);
  display: block;
}

.score-panel {
  min-width: 10cqi;
  padding: 0.38cqi 0.9cqi 0.38cqi 1.2cqi;
  margin-left: -0.7cqi;
  background: linear-gradient(180deg, rgba(74, 35, 120, 0.96), rgba(45, 18, 75, 0.98));
  border: 1px solid rgba(255, 215, 64, 0.35);
  border-radius: 0.6cqi;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
}

.score-panel__pts {
  display: block;
  font-size: 0.92cqi;
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
}

.score-panel__name {
  display: block;
  font-size: 0.78cqi;
  font-weight: 700;
  color: #b39ddb;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- Timer ---------- */
.game-timer {
  position: absolute;
  left: -1%;
  bottom: 22%;
  width: 5.6cqi;
  height: auto;
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
  transform: none;
}

/* ---------- Stock + Discard play zone ---------- */
.play-zone {
  position: absolute;
  right: 8%;
  top: 38%;
  display: flex;
  align-items: flex-end;
  gap: 1.6cqi;
  z-index: 7;
  padding: 0.5cqi 0.7cqi;
  border-radius: 0.8cqi;
}

.pile {
  position: relative;
  width: var(--card-w-pile);
  height: var(--card-h-pile);
  touch-action: manipulation;
}

.pile-cue {
  position: absolute;
  left: 50%;
  top: calc(100% + 0.45cqi);
  z-index: 8;
  min-width: max-content;
  transform: translateX(-50%);
  padding: 0.2cqi 0.48cqi;
  border: 0;
  border-radius: 0.35cqi;
  background: rgba(23, 8, 38, 0.92);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  color: #ffe56f;
  font-size: 0.48cqi;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.pile.is-actionable .pile-cue {
  opacity: 1;
  transform: translate(-50%, -2px);
}

.pile.is-actionable {
  cursor: pointer;
  filter: brightness(1.04) drop-shadow(0 0 10px rgba(255, 215, 64, 0.5));
  transition: filter 0.16s ease, transform 0.16s ease;
}

@media (hover: hover) and (pointer: fine) {
  .pile.is-actionable:hover {
    filter: brightness(1.1) drop-shadow(0 7px 14px rgba(255, 215, 64, 0.62));
    transform: translateY(-3px) scale(1.025);
  }

  .discard.is-actionable:hover .discard-top {
    transform: translate(0, -4px) rotate(0deg);
  }
}

.pile::after {
  content: '';
  position: absolute;
  inset: -16px;
  z-index: -1;
}

.pile.is-pressed .stock-layer:last-child,
.pile.is-pressed .discard-top {
  transform: translate(0, -3px);
}

.pile-slot {
  position: absolute;
  inset: -0.45cqi -0.6cqi;
  border: 2px dashed rgba(0, 0, 0, 0.18);
  border-radius: 0.45cqi;
  background: rgba(0, 0, 0, 0.06);
  pointer-events: none;
  z-index: 0;
}

.discard .pile-slot { transform: rotate(-4deg); }

.player-hand.can-discard .card--hand.is-interactive {
  cursor: pointer;
}

.play-zone::before {
  content: 'DRAW';
  position: absolute;
  top: -1.1cqi;
  left: 18%;
  font-size: 0.65cqi;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: rgba(255, 215, 64, 0.55);
  pointer-events: none;
}

.play-zone::after {
  content: 'DISCARD';
  position: absolute;
  top: -1.1cqi;
  right: 8%;
  font-size: 0.65cqi;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: rgba(255, 215, 64, 0.55);
  pointer-events: none;
}

/* ---------- Player HUD (lower-left rail) ---------- */
.player-hud {
  position: absolute;
  bottom: 10%;
  left: -3.5%;
  display: flex;
  align-items: center;
  z-index: 9;
  pointer-events: none;
}

.avatar-wrap--player {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(76, 175, 80, 0.55);
}

/* ---------- Player zone: deadwood + hand ---------- */
.player-zone {
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translateX(-50%);
  width: 58%;
  z-index: 8;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.deadwood-capsule {
  margin-bottom: 0.5cqi;
  padding: 0.35cqi 1.2cqi;
  border-radius: 2cqi;
  background: linear-gradient(180deg, rgba(30, 12, 50, 0.94), rgba(15, 6, 28, 0.96));
  border: 2px solid rgba(255, 215, 64, 0.55);
  font-size: 0.92cqi;
  font-weight: 700;
  color: #ffd740;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.player-hand-zone {
  position: relative;
  width: 100%;
  height: calc(var(--card-h-hand) + 1.2cqi);
  pointer-events: none;
}

.player-hand {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  touch-action: manipulation;
}

/* ---------- Bottom action bar ---------- */
.game-footer {
  position: absolute;
  bottom: 0.6%;
  left: 1.2%;
  right: 1.2%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: 1cqi;
  z-index: 20;
  pointer-events: none;
  height: 7.5%;
}

.game-footer > * { pointer-events: auto; }

.action-buttons {
  display: flex;
  gap: 0.55cqi;
  align-items: flex-end;
}

#game-screen .btn--knock,
#game-screen .btn--gin {
  width: 10cqi;
  height: 3.8cqi;
  min-width: 88px;
  min-height: 44px;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-size: 0;
  color: transparent;
  cursor: pointer;
  touch-action: manipulation;
  transition: filter 0.12s, transform 0.12s, opacity 0.12s;
  background: center / 100% 100% no-repeat;
}

#game-screen .btn--knock.is-pressed:not(:disabled),
#game-screen .btn--gin.is-pressed:not(:disabled) {
  transform: scale(0.96);
  filter: brightness(1.1);
}

#game-screen .btn--knock { background-image: url('../assets/btn-knock.webp'); }
#game-screen .btn--gin { background-image: url('../assets/btn-gin.webp'); }

#game-screen .btn--knock:disabled,
#game-screen .btn--gin:disabled {
  opacity: 0.55;
  filter: grayscale(0.5) brightness(0.7);
  cursor: not-allowed;
}

@media (hover: hover) and (pointer: fine) {
  #game-screen .btn--knock:not(:disabled):hover,
  #game-screen .btn--gin:not(:disabled):hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
  }
}

.hint-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45cqi;
  padding: 0.45cqi 1cqi;
  border-radius: 2cqi;
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.12);
  justify-self: center;
  max-width: 36cqi;
}

.hint-pill__icon {
  font-size: 1.1cqi;
  line-height: 1;
  flex-shrink: 0;
}

.hint-pill {
  font-size: 0.88cqi;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.25;
  white-space: nowrap;
}

.game-footer__utils {
  display: flex;
  gap: 0.5cqi;
  align-items: center;
  justify-self: end;
}

.util-btn {
  width: 3.2cqi;
  height: 3.2cqi;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(126, 87, 194, 0.6);
  background: rgba(40, 15, 60, 0.85);
  color: #fff;
  font-size: 1.3cqi;
  cursor: default;
  position: relative;
}

.util-btn__badge {
  position: absolute;
  top: -0.2cqi;
  right: -0.2cqi;
  background: #ff5722;
  color: #fff;
  font-size: 0.6cqi;
  font-weight: 800;
  width: 1.1cqi;
  height: 1.1cqi;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flash-msg {
  position: absolute;
  top: 11%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5cqi 1.4cqi;
  border-radius: 1.2cqi;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-weight: 700;
  font-size: 0.95cqi;
  opacity: 0;
  pointer-events: none;
  z-index: 25;
  transition: opacity 0.3s;
}

.flash-msg.show { opacity: 1; }

.turn-indicator { display: none !important; }

.hidden { display: none !important; }

.game-stage img:not(.game-bg):not(.game-table-img),
.lobby-stage img:not(.lobby-bg) {
  background: transparent;
}

@media (max-width: 768px) {
  .game-stage {
    --card-w-hand: 5.2cqi;
    --card-w-pile: 4.8cqi;
    --fan-step: calc(var(--card-w-hand) * 0.35);
  }

  .game-table-wrap {
    width: 96%;
    height: 54%;
    top: 10%;
  }

  .game-table-surface {
    top: 10%;
    bottom: 10%;
  }

  .player-zone {
    width: 82%;
    bottom: 0;
  }

  .play-zone {
    right: 3%;
    top: 36%;
    gap: 0.9cqi;
  }

  .game-footer {
    grid-template-columns: auto 1fr auto;
    gap: 0.45cqi;
    height: 8%;
    bottom: 0.3%;
  }

  .action-buttons { justify-content: flex-start; }

  #game-screen .btn--knock,
  #game-screen .btn--gin {
    width: 8.5cqi;
    height: 3.2cqi;
  }

  .hint-wrap {
    max-width: 28cqi;
    padding: 0.35cqi 0.7cqi;
  }

  .hint-pill {
    font-size: 0.75cqi;
    white-space: normal;
    text-align: center;
  }

  .player-hud {
    bottom: 8%;
    left: -1%;
  }

  .game-timer {
    bottom: 18%;
    left: 0;
    width: 5cqi;
  }

  .opponent-group { width: 68%; }
}