/* Ahram — pyramid solitaire. */
.ah-col { justify-content: space-evenly; --cw: min(12.2vw, 58px); }
.ah-pyr { display: flex; flex-direction: column; align-items: center; }
.ah-row { display: flex; gap: 3px; }
.ah-row + .ah-row { margin-top: calc(var(--cw) * -0.72); }
.ah-card {
  position: relative;
  flex: none;
  width: var(--cw);
  height: calc(var(--cw) * 1.4);
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: linear-gradient(180deg, #FFFBF0, #F1E6CC);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(160, 120, 60, 0.35);
  color: #142060;
  font-family: var(--font-text);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.15s var(--ease-out);
}
.ah-card.is-red { color: #C2304C; }
.ah-r { position: absolute; top: 3px; left: 5px; font-size: calc(var(--cw) * 0.3); font-weight: 800; line-height: 1; }
.ah-s { position: absolute; top: calc(var(--cw) * 0.33); left: 5px; font-size: calc(var(--cw) * 0.24); line-height: 1; }
.ah-big { position: absolute; right: 5px; bottom: 3px; font-size: calc(var(--cw) * 0.5); line-height: 1; opacity: 0.9; }
.ah-card.is-blocked { filter: brightness(0.72); }
.ah-card.is-sel { transform: translateY(-6px); box-shadow: 0 0 0 3px var(--gold), 0 10px 20px rgba(0, 0, 0, 0.4); z-index: 2; }
.ah-card.is-gone { visibility: hidden; }
.ah-card.is-back {
  background:
    radial-gradient(circle at 50% 50%, rgba(232, 182, 90, 0.45) 0 18%, transparent 19%),
    repeating-linear-gradient(45deg, rgba(232, 182, 90, 0.18) 0 3px, transparent 3px 9px),
    linear-gradient(180deg, #1B2C80, #0E1A52);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 0 0 2px rgba(232, 182, 90, 0.6);
}
.ah-card.is-empty { background: rgba(242, 234, 216, 0.05); box-shadow: inset 0 0 0 1px rgba(242, 234, 216, 0.2); color: var(--mist); font-size: 1.4rem; }
.ah-count { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-size: 0.75rem; font-weight: 800; color: var(--gold-soft); }
.ah-deck { display: flex; gap: 18px; align-items: center; }
.ah-deck .ah-card { --cw: min(15vw, 66px); width: var(--cw); height: calc(var(--cw) * 1.4); }
.ah-pyramids { position: absolute; bottom: 0; left: 0; right: 0; height: 70px; pointer-events: none; opacity: 0.25;
  background: linear-gradient(135deg, transparent 49%, #3A2E6A 50%) 10% 100% / 120px 60px no-repeat, linear-gradient(225deg, transparent 49%, #3A2E6A 50%) calc(10% + 120px) 100% / 120px 60px no-repeat; }