.pyramid-shell { width: min(100%, 48rem); height: var(--game-visible-height, 100dvh); min-height: 0; grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden; }
.pyramid-stage { min-height: 0; height: 100%; grid-template-rows: auto minmax(0, 1fr); align-content: stretch; place-items: stretch; overflow: hidden; }
.play-options { min-height: 2rem; margin: 0 0 .35rem; display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.pass-count, .game-help { margin: 0; color: var(--muted); font-size: .78rem; font-weight: 800; }
.pass-count { flex: none; text-transform: uppercase; letter-spacing: .04em; }
.game-help { text-align: right; }
.game-help.hint-pop { animation: hint-pop .35s ease; }
.pyramid-board { width: 100%; max-width: min(100%, 155cqh); height: 100%; min-height: 0; justify-self: center; padding: clamp(.35rem, 1.4vw, .7rem); display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; border: 2px solid #17324d; border-radius: 1rem; background: #277565; box-shadow: inset 0 0 0 4px rgba(255,255,255,.09), 5px 5px 0 rgba(23,50,77,.13); }
.pyramid { --card-width: min(12.2%, 5.2rem); position: relative; min-height: 0; width: 100%; }
.playing-card, .empty-pile { width: 100%; }
.playing-card { font-size: clamp(.66rem, 2.2vw, 1.12rem); }
.empty-pile { aspect-ratio: 1 / 1.42; padding: 0; border-radius: clamp(.28rem, .75vw, .5rem); cursor: pointer; }
.empty-pile:focus-visible { z-index: 90 !important; outline: 3px solid #ffd65a; outline-offset: 2px; }
.playing-card.covered { cursor: default; filter: saturate(.82) brightness(.96); }
.pyramid-card { position: absolute; width: var(--card-width); left: calc(50% + (var(--column) - var(--row) / 2) * 12.3% - var(--card-width) / 2); top: calc(var(--row) * 11.7%); }
.stock-row { min-height: 0; display: flex; justify-content: center; align-items: end; gap: clamp(1rem, 6vw, 3rem); padding: .25rem 0 0; }
.pile-wrap { width: min(12.2%, 5.2rem); display: grid; gap: .15rem; }
.pile-wrap > span { color: rgba(255,255,255,.78); font-size: .62rem; font-weight: 900; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.pile-zone { width: 100%; }
.empty-pile { display: grid; place-items: center; border: 2px dashed rgba(255,255,255,.38); background: rgba(8,49,44,.15); color: rgba(255,255,255,.7); font-size: clamp(1.4rem, 4vw, 2.3rem); font-weight: 900; }
.empty-pile:disabled { cursor: default; opacity: .55; }
.action-button:disabled { cursor: default; opacity: .42; transform: none; box-shadow: none; }
@keyframes hint-pop { 50% { color: #17324d; transform: scale(1.025); } }
@keyframes deal-card { 0% { opacity: 0; transform: translate(-8rem,-4rem) rotate(-12deg) scale(.75); } 100% { opacity: 1; transform: none; } }
@keyframes draw-card { 0% { opacity: .25; transform: translateX(-100%) rotate(-8deg); } 100% { opacity: 1; transform: none; } }
@keyframes expose-card { 50% { box-shadow: 0 0 0 5px rgba(255,214,90,.5), 0 0 1.4rem #ffd65a; transform: translateY(-3px); } }
.deal-arrival { animation: deal-card .38s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--deal-order) * 18ms); }
.draw-arrival { animation: draw-card .32s cubic-bezier(.2,.8,.2,1) both; }
.expose-arrival { animation: expose-card .42s ease both; }

@media (max-width: 560px) {
  .pyramid-shell { padding-left: .4rem; padding-right: .4rem; gap: .55rem; }
  .pyramid-board { border-radius: .7rem; padding: .3rem; }
  .play-options { align-items: center; }
  .pass-count, .game-help { font-size: .66rem; line-height: 1.2; }
  .game-help { max-width: 64%; }
  .scorebar { padding: .55rem .7rem; }
  .metric-value { font-size: 1rem; }
  .game-actions { gap: .35rem; }
  .game-actions .action-button { min-width: 0; padding: .55rem .75rem; font-size: .85rem; }
}

@media (max-height: 650px) and (orientation: landscape) {
  .pyramid-shell { width: min(100%, 68rem); grid-template-columns: 13rem 1fr; }
  .pyramid-stage { grid-column: 2; grid-row: 1 / span 3; grid-template-rows: minmax(0, 1fr); }
  .play-options { display: none; }
  .pyramid { --card-width: min(10%, 4.5rem); }
  .pyramid-card { left: calc(50% + (var(--column) - var(--row) / 2) * 10.1% - var(--card-width) / 2); top: calc(var(--row) * 11.3%); }
  .pile-wrap { width: min(10%, 4.5rem); }
  .game-actions .action-button { padding: .35rem .25rem; font-size: .72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .deal-arrival, .draw-arrival, .expose-arrival { animation: none; }
}