/* ===============================================
   FLIP CARDS - the pool numbers on Home and Pool.
   Components/Card-Flip.js wraps each card in two faces. The front shows only the name of the number; the back shows
   the number in its own bright colour. The cards turn one by one from the first to the last, stay open, turn back
   together, and the show starts again. Click or tap a card to turn it by hand.
   Loaded after Home-Pool.css / Pool.css. For visitors who asked for less motion nothing turns: the numbers just show.
   =============================================== */

.kd-flip {
  --kd-c: #00ff92;
  --kd-r: 4px;
  --kd-pad: 9px 12px;
  padding: 0;
  border: 0;
  border-radius: var(--kd-r);
  background: none;
  overflow: visible;
  perspective: 1500px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ph-row > .ph-card.kd-flip { --kd-r: 4px; --kd-pad: 9px 12px; }
.pool-row > .pool-card.kd-flip { --kd-r: 12px; --kd-pad: 16px; }

.kd-flip::after { display: none; }

.kd-in {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.4, 0.1, 0.2, 1);
}

.kd-flip.kd-open .kd-in { transform: rotateY(180deg); }

.kd-face {
  box-sizing: border-box;
  padding: var(--kd-pad);
  border: 1px solid rgba(205, 205, 205, 0.14);
  border-radius: var(--kd-r);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ---- front: the name of the number, on a quiet patterned card ---- */
.kd-front {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  overflow: hidden;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.035) 0 6px, rgba(255, 255, 255, 0) 6px 12px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
}

.kd-front::before {
  content: '\2726';
  font-size: 15px;
  line-height: 1;
  color: var(--kd-c);
  text-shadow: 0 0 12px var(--kd-c);
  animation: kd-twinkle 2.4s ease-in-out infinite;
}

.kd-front-k {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.35;
  color: rgba(235, 235, 235, 0.9);
}

/* a light that crosses the closed card now and then */
.kd-front::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  transform: skewX(-18deg);
  animation: kd-shine 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes kd-shine {
  0% { left: -60%; }
  40%, 100% { left: 130%; }
}

@keyframes kd-twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}

/* ---- back: the number, in its own colour ---- */
.kd-back {
  position: relative;
  transform: rotateY(180deg);
  border-color: var(--kd-c);
  border-color: color-mix(in srgb, var(--kd-c) 60%, transparent);
  background: linear-gradient(180deg, #131615, #0a0b0b);
  background:
    radial-gradient(ellipse 90% 140% at 50% 0%, color-mix(in srgb, var(--kd-c) 22%, transparent), transparent 75%),
    linear-gradient(180deg, #131615, #0a0b0b);
  box-shadow: 0 0 20px -8px var(--kd-c);
}

.kd-back .ph-v,
.kd-back .v {
  color: var(--kd-c);
  text-shadow: 0 0 14px var(--kd-c);
  animation: none;
  /* the glow must not be cut at the edge of the number box (Home sets overflow:hidden for long numbers) */
  overflow: visible;
  text-overflow: clip;
}

.kd-back .ph-k,
.kd-back .k {
  color: rgba(235, 235, 235, 0.75);
}

/* a flip card that is also a link (the pool wallet) keeps its own colour on the border */
a.ph-fwallet.kd-flip {
  border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .kd-in { transform: none !important; transition: none; }
  .kd-front { display: none; }
  .kd-back { position: relative; transform: none; }
  .kd-flip { cursor: default; }
}

/* ---- phone: every card of the board has the same size and sits in the same two columns ----
   The rows are dissolved into one grid with equal rows, so a card with a longer text does not make its row
   taller than the others, and the single last card of a row takes the full width. */
.kd-flip .kd-in { display: block; }

@media (max-width: 768px) {
  .ph-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 8px;
  }

  .ph-row { display: contents; }

  .ph-row:last-child > .ph-card:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .ph-row > .ph-card.kd-flip { --kd-pad: 8px 10px; }
}

@media (max-width: 860px) {
  .pool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
  }

  .pool-row { display: contents; }

  .pool-row.r3 > :last-child { grid-column: 1 / -1; }

  .pool-row > .pool-card.kd-flip { --kd-pad: 12px; }

  .pool-row > .pool-card .v { font-size: 18px; }
}

@media (max-width: 860px) {
  .ph-row > .ph-card.kd-flip,
  .pool-row > .pool-card.kd-flip {
    display: flex;
    flex-direction: column;
  }

  .ph-row > .ph-card.kd-flip .kd-in,
  .pool-row > .pool-card.kd-flip .kd-in {
    flex: 1 1 auto;
    display: flex;
  }

  .ph-row > .ph-card.kd-flip .kd-back,
  .pool-row > .pool-card.kd-flip .kd-back {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}