/* Table feel: card faces, materials, idle motion, pointer tilt and scoring feedback.
   Loaded last; motion is removed under .reduce-motion (settings or system preference). */

/* ---- Felt: a slow drifting swirl under everything, and a soft vignette over it. ---- */
body::before {
  content: '';
  position: fixed;
  inset: -40vmax;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 35%, #2a8a7033 0 12%, transparent 30%),
    radial-gradient(circle at 70% 65%, #0b3d3344 0 14%, transparent 34%),
    repeating-conic-gradient(from 0deg at 50% 50%, #ffffff05 0deg 9deg, transparent 9deg 18deg);
  animation: felt-drift 140s linear infinite;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 58%, #00170f70 100%);
}
@keyframes felt-drift {
  to {
    rotate: 360deg;
  }
}

/* ---- Playing card faces ---- */
.card {
  container-type: inline-size;
  background:
    radial-gradient(ellipse at 30% 0%, #fffdf6 0, transparent 60%),
    linear-gradient(165deg, #f8f3e6, #ece4cf);
  border-color: #fffaf0;
  box-shadow:
    0 calc(var(--card-width) * 0.05) 0 #10382f,
    0 calc(var(--card-width) * 0.1) calc(var(--card-width) * 0.16) #00140e55;
  transition:
    transform 0.28s cubic-bezier(0.34, 1.45, 0.64, 1),
    box-shadow 0.2s;
}
.card.red-suit {
  color: #d9434c;
}
.card:not(.red-suit) {
  color: #26363a;
}
.pips {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pips i {
  position: absolute;
  translate: -50% -50%;
  font-style: normal;
  font-size: calc(var(--card-width) * 0.18);
  line-height: 1;
}
.pips i.flip {
  rotate: 180deg;
}
.card:has(.pips) .center-suit,
.card.face .center-suit {
  display: none;
}
.card.ace .center-suit {
  font-size: calc(var(--card-width) * 0.72);
  text-shadow: 0 calc(var(--card-width) * 0.02) 0 #0000001f;
}
.face-art {
  position: absolute;
  inset: 17% 19%;
  display: grid;
  grid-template-rows: 1fr auto auto;
  place-items: center;
  border: calc(var(--card-width) * 0.018) solid currentColor;
  border-radius: calc(var(--card-width) * 0.04);
  background:
    radial-gradient(circle at 50% 38%, #fff8e0 0 22%, transparent 60%),
    repeating-linear-gradient(45deg, transparent 0 5px, #b5a88618 5px 8px),
    linear-gradient(180deg, #f4e3b8, #e7d3a2);
  box-shadow: inset 0 0 0 calc(var(--card-width) * 0.02) #fffaf0;
  overflow: hidden;
  padding-bottom: 6%;
}
.red-suit .face-art {
  background:
    radial-gradient(circle at 50% 38%, #fff3ea 0 22%, transparent 60%),
    repeating-linear-gradient(45deg, transparent 0 5px, #d9434c12 5px 8px),
    linear-gradient(180deg, #f6dccb, #ebc6b2);
}
.face-art b {
  align-self: end;
  font-size: calc(var(--card-width) * 0.42);
  line-height: 1;
  font-weight: 400;
  text-shadow: 0 calc(var(--card-width) * 0.025) 0 #0000002a;
}
.face-art em {
  font-style: normal;
  font-size: calc(var(--card-width) * 0.17);
  line-height: 1;
  letter-spacing: 0.08em;
}
.face-art small {
  font-size: calc(var(--card-width) * 0.13);
  line-height: 1;
}
/* Small cards (played row, phones) keep the single large suit. */
@container (max-width: 72px) {
  .pips,
  .face-art {
    display: none;
  }
  .card:has(.pips) .center-suit,
  .card.face .center-suit {
    display: grid;
  }
}

/* Face-down cards show the red deck back. */
.card.face-down {
  background:
    radial-gradient(circle at 50% 50%, #f8d6b3 0 9%, transparent 10%),
    repeating-linear-gradient(45deg, #ac413f 0 4px, #ce6657 4px 7px);
  border-color: #f4ead8;
}

/* ---- Enhancements: the card's material shows what it does. ---- */
.card.enh-bonus {
  background: linear-gradient(165deg, #eef5fd, #d4e5f6);
  box-shadow:
    inset 0 0 0 calc(var(--card-width) * 0.035) #4c9be0,
    0 calc(var(--card-width) * 0.05) 0 #10382f,
    0 calc(var(--card-width) * 0.1) calc(var(--card-width) * 0.16) #00140e55;
}
.card.enh-mult {
  background: linear-gradient(165deg, #fdf0ee, #f6d6d2);
  box-shadow:
    inset 0 0 0 calc(var(--card-width) * 0.035) #e0545b,
    0 calc(var(--card-width) * 0.05) 0 #10382f,
    0 calc(var(--card-width) * 0.1) calc(var(--card-width) * 0.16) #00140e55;
}
.card.enh-glass {
  background:
    linear-gradient(120deg, transparent 20%, #ffffffaa 28%, transparent 34%),
    linear-gradient(120deg, transparent 55%, #ffffff77 60%, transparent 64%),
    linear-gradient(165deg, #e9f6fbd9, #c8e4eecc);
  border-color: #f4fcff;
}
.card.enh-steel {
  background: linear-gradient(135deg, #e3e8ec, #a7b2bb 30%, #eef2f5 52%, #94a0aa 78%, #d2d9de);
  border-color: #f1f4f6;
}
.card.enh-gold {
  background: linear-gradient(135deg, #fbe7a4, #d9a743 32%, #fff2c0 52%, #c9932e 78%, #f2d27b);
  border-color: #fff4c9;
}
.card.enh-steel:not(.red-suit),
.card.enh-gold:not(.red-suit) {
  color: #1f2a2e;
}

/* ---- Shine follows the pointer; editions add a moving foil layer. ---- */
.card-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  opacity: var(--shine, 0);
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 0%),
    #ffffff70 0,
    #ffffff1a 30%,
    transparent 55%
  );
  transition: opacity 0.2s;
}
.ed-foil .card-shine,
.ed-holo .card-shine,
.ed-poly .card-shine {
  opacity: 1;
  background-size: 300% 300%;
  animation: foil-sweep 4.5s linear infinite;
}
.ed-foil .card-shine {
  background-image: linear-gradient(
    115deg,
    transparent 30%,
    #a8dcff55 42%,
    #ffffffaa 50%,
    #a8dcff55 58%,
    transparent 70%
  );
  mix-blend-mode: screen;
}
.ed-holo .card-shine {
  background-image: repeating-linear-gradient(
    120deg,
    #ff5f6d33 0 8%,
    #ffc37133 8% 16%,
    #6cf2c233 16% 24%,
    #5b9dff33 24% 32%,
    #c77dff33 32% 40%
  );
  mix-blend-mode: color-dodge;
}
.ed-poly .card-shine {
  background-image: conic-gradient(
    from 0deg,
    #ff5f6d55,
    #ffc37155,
    #6cf2c255,
    #5b9dff55,
    #c77dff55,
    #ff5f6d55
  );
  mix-blend-mode: hue;
  animation-name: poly-spin;
}
.ed-foil,
.ed-holo,
.ed-poly {
  outline: calc(var(--card-width) * 0.02) solid #ffffffaa;
  outline-offset: calc(var(--card-width) * -0.07);
}
@keyframes foil-sweep {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 300% 50%;
  }
}
@keyframes poly-spin {
  to {
    filter: hue-rotate(360deg);
  }
}

/* ---- Idle: hand and jokers breathe slightly out of phase. ---- */
.hand .card {
  animation: card-idle 3.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.47s);
}
.joker-slots .joker-card,
.consume-slots .joker-card {
  animation: card-idle 4.2s ease-in-out infinite;
}
.joker-slots .joker-card:nth-child(2n),
.consume-slots .joker-card:nth-child(2n) {
  animation-delay: -1.7s;
}
.joker-slots .joker-card:nth-child(3n) {
  animation-delay: -2.9s;
}
@keyframes card-idle {
  0%,
  100% {
    translate: 0 0;
    rotate: -0.6deg;
  }
  50% {
    translate: 0 -3px;
    rotate: 0.6deg;
  }
}
.drag-ghost,
.drag-source,
.sorting .card,
.pending-play {
  animation: none !important;
}

/* ---- Jokers and consumables look like collectible cards. ---- */
.joker-card {
  --card-width: 82px;
  transform: translateY(var(--lift, 0px)) perspective(600px) rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg));
  transition:
    transform 0.28s cubic-bezier(0.34, 1.45, 0.64, 1),
    box-shadow 0.2s;
  background:
    radial-gradient(circle at 50% 42%, #fff8e6 0 18%, transparent 55%),
    linear-gradient(170deg, #f6e2c0, #e4c79a);
  border-color: #f7ead6;
  box-shadow:
    0 4px #0d3028,
    0 8px 14px #00140e55,
    inset 0 0 0 2px #433b52;
}
.joker-card .j-symbol {
  text-shadow:
    0 0 14px #ffffffaa,
    2px 3px 0 #0000001f;
  filter: none;
}
.joker-card.uncommon {
  background:
    radial-gradient(circle at 50% 42%, #f3f9ff 0 18%, transparent 55%),
    linear-gradient(170deg, #cfe0f3, #9fbde0);
}
.joker-card.rare {
  background:
    radial-gradient(circle at 50% 42%, #fff1f6 0 18%, transparent 55%),
    linear-gradient(170deg, #f3c1d3, #dc8fae);
}
.joker-card.rare .card-shine {
  opacity: 1;
  background-image: linear-gradient(
    115deg,
    transparent 30%,
    #ffffff66 46%,
    #ffe8f8aa 50%,
    #ffffff66 54%,
    transparent 70%
  );
  background-size: 300% 300%;
  mix-blend-mode: screen;
  animation: foil-sweep 5s linear infinite;
}
.joker-card.planet {
  background:
    radial-gradient(circle at 50% 42%, #f2f3ff 0 16%, transparent 50%),
    radial-gradient(circle at 20% 20%, #ffffff55 0 1px, transparent 2px) 0 0 / 14px 14px,
    linear-gradient(170deg, #c9cdf1, #9aa0dc);
}
.joker-card.tarot {
  background:
    radial-gradient(circle at 50% 42%, #fff1f8 0 16%, transparent 50%),
    linear-gradient(170deg, #ecc4da, #c993b6);
}
.joker-card:hover:not(:disabled) {
  --lift: -4px;
}

/* Disabled by the boss for this hand. */
.joker-card.joker-disabled {
  filter: grayscale(1) brightness(0.7);
  animation: none;
}
.joker-card.joker-disabled::after {
  content: '禁用';
  position: absolute;
  inset: auto 0 38%;
  padding: 2px 0;
  background: #9c2f37e6;
  color: #fff3ea;
  font-size: 12px;
  letter-spacing: 0.2em;
  rotate: -12deg;
}

/* Amber Acorn: every joker shows the deck back until the blind ends. */
.joker-card.joker-back {
  background:
    radial-gradient(circle at 50% 50%, #f8d6b3 0 12%, transparent 13%),
    repeating-linear-gradient(45deg, #ac413f 0 5px, #ce6657 5px 9px);
}
.joker-card.joker-back .j-symbol {
  color: #fff3ea;
  text-shadow: 0 2px 0 #6d1f22;
}

/* Cerulean Bell: the forced card is locked into the selection. */
.card.forced {
  outline: 3px solid #5fb8ff;
  outline-offset: 2px;
  box-shadow:
    0 0 0 6px #5fb8ff40,
    0 0 18px 4px #5fb8ffaa;
}
.forced-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  translate: -50% 0;
  padding: 1px 6px;
  border-radius: 6px;
  background: #2f7fd0;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

/* ---- Scoring feedback ---- */
.calculation > div {
  position: relative;
  isolation: isolate;
  transition: box-shadow 0.25s;
  box-shadow:
    0 4px 0 #152a2b,
    0 0 calc(var(--heat, 0) * 28px) calc(var(--heat, 0) * 4px) var(--glow);
}
.calculation .chips {
  --glow: #53b5feaa;
}
.calculation .mult {
  --glow: #ff6a5caa;
}
.calculation > div::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 70%;
  height: calc(10px + var(--heat, 0) * 38px);
  z-index: -1;
  border-radius: 50% 50% 20% 20%;
  opacity: calc(var(--heat, 0) * 1.4 - 0.35);
  background: radial-gradient(ellipse at 50% 100%, var(--glow) 0, transparent 70%);
  filter: blur(3px);
  transform-origin: 50% 100%;
  animation: flame 0.5s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes flame {
  from {
    scale: 0.9 0.85;
  }
  to {
    scale: 1.08 1.15;
  }
}
.last-score {
  display: inline-block;
}
.hand-title {
  transform-origin: center;
}
.screen-shake {
  animation: screen-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes screen-shake {
  10%,
  90% {
    translate: -1px 0;
  }
  20%,
  80% {
    translate: 3px 1px;
  }
  30%,
  50%,
  70% {
    translate: calc(var(--shake, 4px) * -1) -1px;
  }
  40%,
  60% {
    translate: var(--shake, 4px) 1px;
  }
}
.blind-banner {
  position: fixed;
  left: 50%;
  top: 42%;
  z-index: 60;
  translate: -50% -50%;
  pointer-events: none;
  padding: 14px 36px;
  border-radius: 12px;
  background: linear-gradient(180deg, #f6c566, #d99a33);
  color: #3b2a12;
  font-size: clamp(28px, 6vw, 54px);
  letter-spacing: 0.12em;
  white-space: nowrap;
  box-shadow:
    0 6px 0 #8a5b16,
    0 18px 40px #00140e88;
  text-shadow: 0 2px 0 #fff3;
}

/* Tall desktops have room to show the played hand at a readable size. */
@media (min-width: 701px) and (min-height: 901px) {
  .played-cards .card {
    --card-width: 88px;
  }
}

/* ---- Shop: one shelf of cards (jokers, tarots and planets share two slots). ---- */
.shop-dialog .store-departments:has(> :only-child) {
  grid-template-columns: minmax(0, 1fr);
}
.shop-dialog .store-cards .store-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 240px));
}
@media (max-width: 600px) {
  .shop-dialog .store-cards .store-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- Settlement ---- */
.settlement .pay-row {
  display: block;
}
.settlement .pay-total {
  font-size: 1.25em;
}

/* ---- Reduced motion: keep materials, drop movement. ---- */
.reduce-motion::before,
.reduce-motion .hand .card,
.reduce-motion .joker-card,
.reduce-motion .card-shine,
.reduce-motion .calculation > div::after {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  body::before,
  .hand .card,
  .joker-card,
  .card-shine,
  .calculation > div::after {
    animation: none !important;
  }
}