/* Cards and pile slots. Size comes from --cw / --ch set by the renderer. */

.slot {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: var(--cw);
  height: var(--ch);
  display: grid;
  place-items: center;
  border-radius: calc(var(--cw) * 0.08);
  /* mockup: light-blue rim, thin navy outline, deep navy inside */
  border: max(2px, calc(var(--cw) * 0.028)) solid #97c4fb;
  background: linear-gradient(180deg, rgba(1, 44, 100, 0.92), rgba(1, 34, 88, 0.92));
  box-shadow: 0 0 0 1px rgba(0, 10, 50, 0.85), inset 0 0 0 1px rgba(0, 10, 50, 0.7), inset 0 1px 0 2px rgba(210, 226, 255, 0.25);
  color: #b9cdf0;
  outline: none;
}

.slot-foundation::after {
  content: "A";
  font-family: var(--font-serif);
  font-size: calc(var(--cw) * 0.46);
  font-weight: 700;
  color: #a9bfe6;
  text-shadow: 0 2px 0 rgba(0, 10, 50, 0.7);
}

.slot-waste { border-color: transparent; background: transparent; box-shadow: none; }

.slot-stock { cursor: pointer; }
.slot-stock svg {
  width: 42%;
  opacity: 0;
  transition: opacity 200ms ease;
  fill: none;
  stroke: currentColor;
}
.slot-stock.can-recycle { color: var(--card-face); border-color: rgba(255, 250, 230, 0.4); }
.slot-stock.can-recycle svg { opacity: 0.9; }

/* ---- card ---- */
.card {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--cw);
  height: var(--ch);
  will-change: transform;
  /* User-triggered moves respond instantly and settle softly. */
  transition: transform var(--t-move) var(--ease-out);
  touch-action: none;
}

.card-lift {
  position: relative;
  width: 100%;
  height: 100%;
  isolation: isolate;
  perspective: calc(var(--cw) * 6);
  transition: transform 160ms var(--ease-out);
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--t-flip) var(--ease-in-out);
}
.card.down .card-inner { transform: rotateY(180deg); }

.face {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--cw) * 0.08);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

.front {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.3);
}
.front svg { display: block; width: 100%; height: 100%; }

.back {
  transform: rotateY(180deg);
  background-color: var(--terracotta);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.5 17.5 10 10 17.5 2.5 10Z' fill='none' stroke='%23E0A526' stroke-width='1.3' opacity='.85'/%3E%3Ccircle cx='10' cy='10' r='1.8' fill='%23F4ECDC' opacity='.9'/%3E%3Cg fill='%23F4ECDC' opacity='.45'%3E%3Ccircle cx='0' cy='0' r='1.4'/%3E%3Ccircle cx='20' cy='0' r='1.4'/%3E%3Ccircle cx='0' cy='20' r='1.4'/%3E%3Ccircle cx='20' cy='20' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
  background-size: calc(var(--cw) * 0.27) calc(var(--cw) * 0.27);
  background-position: center;
  box-shadow:
    inset 0 0 0 calc(var(--cw) * 0.045) var(--card-face),
    inset 0 0 0 calc(var(--cw) * 0.062) var(--mustard),
    0 0 0 1px rgba(0, 0, 0, 0.22),
    0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Lift shadow lives on a pseudo-element so we only ever animate opacity. */
.card-lift::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: calc(var(--cw) * 0.08);
  box-shadow: 0 14px 30px rgba(42, 30, 26, 0.28), 0 4px 10px rgba(42, 30, 26, 0.16);
  opacity: 0;
  transition: opacity 160ms var(--ease-out);
  pointer-events: none;
}

/* Highlight ring (hint / keyboard "held") — also opacity-only. */
.card-lift::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: 2;
  border-radius: calc(var(--cw) * 0.1);
  box-shadow: 0 0 0 3px var(--mustard), 0 0 16px 2px rgba(224, 165, 38, 0.55);
  opacity: 0;
  pointer-events: none;
}

.card.dragging .card-lift { transform: scale(1.04); }
.card.dragging .card-lift::after { opacity: 1; }
.card.dragging { cursor: grabbing; }

.card.held .card-lift::before { opacity: 1; }
.card.hinted .card-lift::before { animation: hint-pulse 700ms ease-in-out 2; }

@media (hover: hover) and (pointer: fine) {
  .card:not(.down) { cursor: grab; }
}

@keyframes hint-pulse {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.hint-target {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2500;
  width: var(--cw);
  height: var(--ch);
  border-radius: calc(var(--cw) * 0.1);
  box-shadow: 0 0 0 3px var(--mustard), 0 0 18px 3px rgba(224, 165, 38, 0.5);
  opacity: 0;
  pointer-events: none;
}
.hint-target.on { animation: hint-pulse 700ms ease-in-out 2; }

/* Keyboard focus ring — instant, no transition (keyboard actions never animate). */
.kbd-ring {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3000;
  border-radius: calc(var(--cw) * 0.1);
  box-shadow: 0 0 0 2px var(--card-face), 0 0 0 5px var(--espresso);
  opacity: 0;
  pointer-events: none;
}
.table.kbd .kbd-ring.on { opacity: 1; }

/* Used for resize, keyboard moves, and the first paint. */
.table.no-anim .card,
.table.no-anim .card-inner,
.table.no-anim .card-lift {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .card.hinted .card-lift::before,
  .hint-target.on { animation-duration: 1ms; animation-iteration-count: 1; opacity: 1; }
  .card.dragging .card-lift { transform: none; }
}