/* Almanac Solitaire — Manu Arcade No. VI
   Game-specific styling only; shared chrome lives in ../_shared/palette.css.
   DOM cards (absolutely positioned, CSS-transitioned) plus a felt fx canvas.
   No em dashes in on-screen copy by house style. */

:root {
  --card-w: 78px;
  --card-h: 110px;
  --gap-x: 14px;
  --card-radius: 7px;
}

/* ---- HUD tweaks ---------------------------------------------------------- */
.hud { max-width: 760px; }
#undo {
  display: inline-flex; align-items: center; gap: 5px;
}
#undo[disabled] { opacity: .4; cursor: default; }
#undo[disabled]:hover { color: var(--ink-light); border-color: rgba(122,104,80,.35); }
#undo span[aria-hidden] { font-size: 15px; }

.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: 760px; }
.felt {
  position: relative;
  width: 100%;
  /* Faint baize over the parchment frame: warm felt, gentle inner glow. */
  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: 12px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.row-top {
  display: grid;
  grid-template-columns: repeat(7, var(--card-w));
  gap: var(--gap-x);
  justify-content: space-between;
  margin-bottom: 18px;
}
.row-tableau {
  display: grid;
  grid-template-columns: repeat(7, var(--card-w));
  gap: var(--gap-x);
  justify-content: space-between;
}

/* 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;
}
.tab-slot { box-shadow: inset 0 0 0 1.5px rgba(122,104,80,.22); background: rgba(58,46,34,.035); }
.spacer { width: var(--card-w); }

/* Foundation slots carry a ghost suit watermark. */
.foundation::after {
  content: "";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--display);
  font-size: calc(var(--card-w) * .5);
  color: rgba(122,104,80,.22);
  pointer-events: none;
}
#f0::after { content: "\2660"; } /* spade */
#f1::after { content: "\2665"; } /* heart */
#f2::after { content: "\2666"; } /* diamond */
#f3::after { content: "\2663"; } /* club */

/* Stock slot glyphs: a recycle hint when empty-but-recyclable. */
.stock::after {
  content: "";
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: calc(var(--card-w) * .42); color: rgba(122,104,80,.3);
  pointer-events: none;
}
.stock.recycle::after { content: "\21BB"; color: var(--gold-deep); }
.stock { cursor: pointer; }
.stock:hover { box-shadow: inset 0 0 0 1.5px rgba(200,156,58,.55), inset 0 2px 6px rgba(58,46,34,.12); }

/* A pile lit up as a legal drop target while dragging. */
.pile.drop-target {
  box-shadow:
    inset 0 0 0 2px rgba(200,156,58,.85),
    inset 0 0 14px rgba(227,183,84,.4),
    0 0 0 1px rgba(200,156,58,.4);
  background: rgba(227,183,84,.10);
}

/* ---- Cards --------------------------------------------------------------- */
.card {
  position: absolute;
  top: 0; left: 0;
  width: var(--card-w);
  height: var(--card-h);
  will-change: transform;
  transition: transform .26s var(--ease);
  transform-style: preserve-3d;
  cursor: default;
}
.card.no-anim { transition: none !important; }
.card.grabbable { cursor: grab; }
.card.dragging { cursor: grabbing; }
.card.dragging .card-inner { box-shadow: 0 18px 34px rgba(26,20,16,.4), 0 4px 10px rgba(26,20,16,.3); }

.card-inner {
  position: absolute; inset: 0;
  border-radius: var(--card-radius);
  transform-style: preserve-3d;
  transition: transform .3s var(--ease);
  box-shadow: 0 3px 7px rgba(58,46,34,.30), 0 1px 2px rgba(58,46,34,.25);
}
.card.face-down .card-inner { transform: rotateY(180deg); }
.card.flipping .card-inner { transition: transform .32s var(--ease); }

.card-face, .card-back {
  position: absolute; inset: 0;
  border-radius: var(--card-radius);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

/* 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; }

.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) * .26); 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) * .08); }
.corner.br { bottom: calc(var(--card-w) * .07); right: calc(var(--card-w) * .08); 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, gilt border. */
.card-back {
  transform: rotateY(180deg);
  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);
}

/* Selected (tap-to-move) glow. */
.card.selected .card-inner {
  box-shadow:
    0 0 0 2px rgba(200,156,58,.9),
    0 0 16px rgba(227,183,84,.55),
    0 6px 14px rgba(26,20,16,.35);
}

/* Refused-move wobble. Animates the inner (the outer .card holds the position
   translate), so the card jitters in place without snapping to the origin. */
.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); }
}

/* Win dissolve: the card fades and lifts as motes spray from its center. */
.card.dissolve {
  transition: opacity .5s var(--ease), filter .5s var(--ease);
  opacity: 0;
  filter: brightness(1.6) 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: 600px; margin: 2px 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 12px; }
  .row-top { margin-bottom: 12px; }
}

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