/* Pyramid — Manu Arcade No. XXXII
   Game-specific styling only; shared chrome lives in ../_shared/palette.css.
   DOM cards (absolutely positioned, transform-placed) over a felt fx canvas,
   reusing the Almanac Solitaire card look. No em dashes in copy by house style. */

:root {
  --card-w: 64px;
  --card-h: 90px;
  --card-radius: 7px;
}

/* ---- HUD tweaks ---------------------------------------------------------- */
.hud { max-width: 640px; }
#draw { display: inline-flex; align-items: center; gap: 6px; }
#draw[disabled] { opacity: .4; cursor: default; }
#draw[disabled]:hover { color: var(--ink-light); border-color: rgba(122,104,80,.35); }
#draw span[aria-hidden] { font-size: 15px; }
.redeals {
  font-size: 11px; min-width: 16px; height: 16px; padding: 0 4px;
  display: inline-grid; place-items: center; border-radius: 9px;
  background: rgba(90,26,31,.12); color: var(--oxblood); font-weight: 600;
}

.seal-face { line-height: 1; transition: transform .4s var(--ease); display: inline-block; }
.seal.win .seal-face { transform: rotate(360deg) scale(1.12); }

/* ---- Felt / table -------------------------------------------------------- */
.board-frame { width: 100%; max-width: 640px; }
.felt {
  position: relative;
  width: 100%;
  background:
    radial-gradient(130% 90% at 50% -10%, rgba(217,148,65,.12), rgba(217,148,65,0) 55%),
    radial-gradient(120% 120% at 50% 120%, rgba(90,26,31,.10), rgba(90,26,31,0) 60%);
  border-radius: 6px;
  padding: 14px 12px 12px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
}

/* The pyramid region: cards are absolutely placed via transform from JS, so
   this is a sized relative box whose height JS sets to fit the 7 rows. */
.pyramid {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

/* Stock + waste dock below the pyramid. */
.dock {
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: flex-start;
  margin-top: 14px;
}

/* Pile slots: a faint sunken frame where cards rest. */
.pile {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: var(--card-radius);
  box-shadow:
    inset 0 0 0 1.5px rgba(122,104,80,.30),
    inset 0 2px 6px rgba(58,46,34,.12);
  background: rgba(58,46,34,.05);
  position: relative;
}

/* Stock glyph: a draw hint, and a recycle hint when empty but recyclable. */
.stock { cursor: pointer; }
.stock::after {
  content: "\21A1"; /* downward double arrow: draw */
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: calc(var(--card-w) * .42); color: rgba(122,104,80,.32);
  pointer-events: none;
}
.stock.empty::after { content: "\21BB"; color: var(--gold-deep); } /* recycle */
.stock.spent::after { content: "\00D7"; color: rgba(122,104,80,.30); } /* no redeals left */
.stock:hover { box-shadow: inset 0 0 0 1.5px rgba(200,156,58,.55), inset 0 2px 6px rgba(58,46,34,.12); }

.waste::after {
  content: "";
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: calc(var(--card-w) * .32); color: rgba(122,104,80,.22);
  font-family: var(--caps);
  pointer-events: none;
}

/* ---- Cards --------------------------------------------------------------- */
.card {
  position: absolute;
  top: 0; left: 0;
  width: var(--card-w);
  height: var(--card-h);
  will-change: transform;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
  cursor: default;
}
.card.no-anim { transition: none !important; }
.card.exposed { cursor: pointer; }

.card-inner {
  position: absolute; inset: 0;
  border-radius: var(--card-radius);
  transition: transform .3s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
  box-shadow: 0 3px 7px rgba(58,46,34,.30), 0 1px 2px rgba(58,46,34,.25);
}

.card-face, .card-back {
  position: absolute; inset: 0;
  border-radius: var(--card-radius);
  overflow: hidden;
}
.card-back { display: none; }
.card.face-down .card-face { display: none; }
.card.face-down .card-back { display: block; }

/* Face: warm parchment, thin gold rule. */
.card-face {
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,.5), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #f8f0d8, #efe2bf);
  box-shadow: inset 0 0 0 1px rgba(200,156,58,.55), inset 0 0 0 2.5px rgba(246,238,214,.6);
  color: var(--ink);
  font-family: var(--display);
}
.card-face.red { color: var(--oxblood); }
.card-face.black { color: #241c14; }

/* Covered pyramid cards read slightly dimmed so exposed ones pop. */
.card.covered .card-inner { filter: brightness(.9) saturate(.92); }
.card.covered .card-face { box-shadow: inset 0 0 0 1px rgba(122,104,80,.35), inset 0 0 0 2.5px rgba(246,238,214,.4); }

.corner {
  position: absolute;
  display: flex; flex-direction: column; align-items: center;
  line-height: .92;
  font-weight: 600;
}
.corner .r { font-size: calc(var(--card-w) * .27); font-family: var(--display); font-weight: 600; }
.corner .s { font-size: calc(var(--card-w) * .2); margin-top: -1px; }
.corner.tl { top: calc(var(--card-w) * .07); left: calc(var(--card-w) * .09); }
.corner.br { bottom: calc(var(--card-w) * .07); right: calc(var(--card-w) * .09); transform: rotate(180deg); }

.pip-big {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: calc(var(--card-w) * .52);
  opacity: .9;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.card-face.red .pip-big { color: rgba(90,26,31,.85); }

/* Back: gold lattice on oxblood (used by face-down stock cards). */
.card-back {
  background:
    repeating-linear-gradient(45deg, rgba(227,183,84,.22) 0 3px, rgba(227,183,84,0) 3px 9px),
    repeating-linear-gradient(-45deg, rgba(227,183,84,.18) 0 3px, rgba(227,183,84,0) 3px 9px),
    radial-gradient(120% 110% at 50% 0%, var(--oxblood-bright), var(--oxblood) 55%, var(--oxblood-deep) 100%);
  box-shadow:
    inset 0 0 0 2px rgba(227,183,84,.55),
    inset 0 0 0 4px rgba(61,15,18,.5),
    inset 0 0 14px rgba(0,0,0,.3);
}
.card-back::after {
  content: "\2767"; /* rotated floral heart, a tidy almanac mark */
  position: absolute; inset: 0; display: grid; place-items: center;
  color: rgba(227,183,84,.78);
  font-size: calc(var(--card-w) * .42);
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
}

/* Exposed cards get a soft lift; the hovered exposed card a touch more. */
.card.exposed .card-inner {
  box-shadow: 0 5px 11px rgba(58,46,34,.34), 0 1px 3px rgba(58,46,34,.25),
              inset 0 0 0 1px rgba(200,156,58,.7);
}
.card.exposed:hover .card-inner { transform: translateY(-2px); }

/* Selected: lifts and glows gold. */
.card.selected .card-inner {
  transform: translateY(-6px) scale(1.04);
  box-shadow:
    0 0 0 2px rgba(200,156,58,.95),
    0 0 18px rgba(227,183,84,.6),
    0 10px 18px rgba(26,20,16,.4);
  filter: brightness(1.06);
}

/* A gentle pulse hint for the matching partner of the selected card. */
.card.match-hint .card-inner {
  box-shadow: 0 0 0 2px rgba(217,148,65,.7), 0 0 12px rgba(217,148,65,.4),
              0 5px 11px rgba(58,46,34,.3);
  animation: match-pulse 1.1s var(--ease) infinite;
}
@keyframes match-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(217,148,65,.55), 0 0 8px rgba(217,148,65,.3), 0 5px 11px rgba(58,46,34,.3); }
  50% { box-shadow: 0 0 0 2px rgba(227,183,84,.9), 0 0 16px rgba(227,183,84,.55), 0 5px 11px rgba(58,46,34,.3); }
}

/* Refused-move wobble (animates the inner so it jitters in place). */
.card.refuse .card-inner { animation: card-wobble .36s var(--ease); }
@keyframes card-wobble {
  0%, 100% { transform: translateX(0) rotate(0); }
  15% { transform: translateX(-5px) rotate(-3deg); }
  40% { transform: translateX(5px) rotate(3deg); }
  65% { transform: translateX(-3px) rotate(-1.5deg); }
  85% { transform: translateX(2px) rotate(1deg); }
}

/* A cleared card flies up and fades (JS sets the translate target). */
.card.clearing { pointer-events: none; }
.card.clearing .card-inner {
  box-shadow: 0 0 22px rgba(227,183,84,.7), 0 8px 18px rgba(26,20,16,.3);
  filter: brightness(1.5) saturate(.7);
}

/* Win dissolve. */
.card.dissolve {
  transition: opacity .5s var(--ease), filter .5s var(--ease), transform .5s var(--ease);
  opacity: 0;
  filter: brightness(1.7) saturate(.4);
  pointer-events: none;
}

/* ---- FX canvas overlay --------------------------------------------------- */
.fx {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1000;
}

/* ---- Hint --------------------------------------------------------------- */
.hint {
  text-align: center; color: var(--ink-light); font-size: 14px;
  padding: 2px 6px 0; line-height: 1.45; max-width: 560px; margin: 8px auto 0;
  transition: opacity .5s var(--ease);
}
.hint p { margin: 0; }
.hint strong { color: var(--oxblood); font-weight: 600; }
.hint.gone { opacity: 0; pointer-events: none; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 560px) {
  .hud { gap: 8px 10px; }
  .dock { gap: 14px; margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .card, .card-inner, .seal-face { transition-duration: .001ms !important; }
  .card.refuse, .card.match-hint { animation: none; }
  .card.exposed:hover .card-inner { transform: none; }
  .card.dissolve { transition-duration: .001ms !important; }
}