/* Dagstand-segment "Vandaag af": ruilkaarten op een speeltafel, zwaardere kaarten gloeien meer. */

.celebration[data-mode="show-cards"] { --c1: #06281d; --c2: #ffb000; --c3: #ffe7a8; --glow: rgb(255 176 0 / .7); }

.cel-show-cards-scene { position: absolute; inset: 0; overflow: hidden; }
.cel-show-cards-felt {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 55%, rgb(22 120 80 / .55), transparent 70%),
    repeating-linear-gradient(45deg, rgb(255 255 255 / .018) 0 .3vh, transparent .3vh .9vh),
    radial-gradient(ellipse at 50% 50%, #0b3b2a, #03130d 75%);
  box-shadow: inset 0 0 20vh rgb(0 0 0 / .85);
}
.cel-show-cards-lamp {
  position: absolute; left: 50%; top: -30vh; width: 140vh; height: 150vh; translate: -50% 0; opacity: 0;
  background: radial-gradient(ellipse 50% 45% at 50% 55%, rgb(255 236 180 / .16), transparent 70%);
  animation: cel-show-cards-sway 7s ease-in-out infinite alternate;
}
@keyframes cel-show-cards-sway { from { rotate: -3deg; } to { rotate: 3deg; } }

.cel-show-cards-head {
  position: absolute; left: 6vh; right: 6vh; top: 3vh; height: 12vh;
  display: flex; align-items: center; justify-content: space-between; gap: 4vh;
}
.cel-show-cards-title {
  font-family: var(--font-brand); font-size: 10vh; line-height: 1; color: #fff; white-space: nowrap;
  text-shadow: 0 .7vh 0 #6e1a00, 0 0 4vh rgb(255 176 0 / .7); rotate: -2deg; opacity: 0;
}
.cel-show-cards-tally {
  display: flex; align-items: baseline; gap: 1.2vh; padding: 1.2vh 3vh; border-radius: 999px; opacity: 0;
  background: rgb(0 0 0 / .55); border: .3vh solid rgb(255 216 77 / .5); box-shadow: 0 0 3vh rgb(255 176 0 / .25);
  font-variant-numeric: tabular-nums;
}
.cel-show-cards-tally-n, .cel-show-cards-tally-p { display: inline-block; font-size: 6vh; font-weight: 700; line-height: 1; color: #ffd84d; text-shadow: 0 0 2vh rgb(255 216 77 / .6); }
.cel-show-cards-tally-u { font-size: 2.8vh; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fde68a; }
.cel-show-cards-tally-sep { width: .9vh; height: .9vh; margin: 0 1.4vh; border-radius: 50%; background: #fde68a; align-self: center; }

.cel-show-cards-table {
  position: absolute; left: 50%; top: 18vh; height: 77vh; translate: -50% 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 3vh; perspective: 140vh;
}
.cel-show-cards-dots { position: absolute; left: 0; right: 0; bottom: 2vh; display: flex; justify-content: center; gap: 1.4vh; }
.cel-show-cards-dots i { width: 1.4vh; height: 1.4vh; border-radius: 50%; background: rgb(255 255 255 / .25); transition: background .3s, scale .3s; }
.cel-show-cards-dots i.is-on { background: #ffd84d; scale: 1.4; box-shadow: 0 0 1.4vh #ffd84d; }

/* --- Kaart ---------------------------------------------------------------- */

.cel-show-cards-card {
  position: relative; width: 32vh; height: 37vh; opacity: 0; transform-style: preserve-3d;
  transition: filter .35s, opacity .35s;
}
.cel-show-cards-flip { position: absolute; inset: 0; transform-style: preserve-3d; }
.cel-show-cards-front, .cel-show-cards-back {
  position: absolute; inset: 0; border-radius: 1.6vh; backface-visibility: hidden; overflow: hidden;
}
.cel-show-cards-back {
  transform: rotateY(180deg); display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(45deg, rgb(255 255 255 / .1) 0 1vh, transparent 1vh 2.2vh),
    linear-gradient(160deg, #ff9a3c, #ff7800 45%, #7a1f00);
  box-shadow: inset 0 0 0 .7vh #ffd84d, 0 1.5vh 3vh rgb(0 0 0 / .6);
}
.cel-show-cards-back img { width: 15vh; height: 15vh; object-fit: contain; filter: drop-shadow(0 .6vh .8vh rgb(0 0 0 / .4)); }

.cel-show-cards-front {
  display: flex; flex-direction: column; gap: 1.1vh; padding: 1.8vh 1.9vh 1.6vh;
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in oklab, var(--c3) 22%, transparent), transparent 60%),
    linear-gradient(170deg, color-mix(in oklab, var(--c2) 40%, #0b0f19), color-mix(in oklab, var(--c1) 70%, #05070d));
  border: .7vh solid var(--c2);
  box-shadow: inset 0 0 0 .25vh var(--c3), 0 1.5vh 3vh rgb(0 0 0 / .6);
}
.cel-show-cards-card.is-landed[data-tier="1"] .cel-show-cards-front { box-shadow: inset 0 0 0 .25vh var(--c3), 0 1.5vh 3vh rgb(0 0 0 / .6), 0 0 2vh rgb(205 222 255 / .35); }
.cel-show-cards-card.is-landed[data-tier="2"] .cel-show-cards-front { animation: cel-show-cards-glow 1.8s ease-in-out infinite; }
.cel-show-cards-card.is-landed[data-tier="3"] .cel-show-cards-front { animation: cel-show-cards-glow 1.3s ease-in-out infinite; }
.cel-show-cards-card.is-landed[data-tier="4"] .cel-show-cards-front { animation: cel-show-cards-glow 1s ease-in-out infinite, cel-show-cards-holo 3s linear infinite; }
@keyframes cel-show-cards-glow {
  0%, 100% { box-shadow: inset 0 0 0 .25vh var(--c3), 0 1.5vh 3vh rgb(0 0 0 / .6), 0 0 2.5vh var(--glow); }
  50% { box-shadow: inset 0 0 0 .25vh var(--c3), 0 1.5vh 3vh rgb(0 0 0 / .6), 0 0 6vh var(--glow), 0 0 1.5vh var(--c3); }
}
@keyframes cel-show-cards-holo { from { border-color: #ff7800; } 25% { border-color: #ffd400; } 50% { border-color: #00e0ff; } 75% { border-color: #ff3ea5; } to { border-color: #ff7800; } }

.cel-show-cards-sheen {
  position: absolute; inset: -50%; pointer-events: none; translate: -70% 0;
  background: linear-gradient(105deg, transparent 44%, rgb(255 255 255 / .4) 50%, transparent 56%);
}
.cel-show-cards-card.is-landed[data-tier="2"] .cel-show-cards-sheen,
.cel-show-cards-card.is-landed[data-tier="3"] .cel-show-cards-sheen,
.cel-show-cards-card.is-landed[data-tier="4"] .cel-show-cards-sheen { animation: cel-show-cards-sweep 3s ease-in-out infinite; }
@keyframes cel-show-cards-sweep { 0% { translate: -70% 0; } 45%, 100% { translate: 70% 0; } }

.cel-show-cards-top { display: flex; align-items: center; gap: 1.4vh; }
.cel-show-cards-gem {
  flex: 0 0 auto; width: 6vh; height: 6vh; margin: .6vh; rotate: 45deg; border-radius: .9vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c3), var(--c2) 55%, var(--c1));
  box-shadow: 0 0 0 .3vh rgb(255 255 255 / .7), 0 0 2vh var(--glow);
}
.cel-show-cards-gem-n { rotate: -45deg; font-size: 3.6vh; font-weight: 700; line-height: 1; color: #fff; text-shadow: 0 .3vh 0 var(--c1), 0 0 1vh var(--c1); }
.cel-show-cards-rarity { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: .3vh; line-height: 1.1; }
.cel-show-cards-tier { font-size: 1.9vh; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cel-show-cards-ref { font-size: 2.4vh; font-weight: 700; color: #fff; opacity: .8; font-variant-numeric: tabular-nums; }

.cel-show-cards-chips { display: flex; gap: .8vh; min-width: 0; }
.cel-show-cards-bug {
  flex: 0 0 auto; padding: .4vh 1.1vh; border-radius: 999px;
  font-size: 2vh; font-weight: 700; color: #052e16; background: #4ade80; box-shadow: 0 0 1.6vh rgb(74 222 128 / .7);
}
.cel-show-cards-project {
  min-width: 0; padding: .4vh 1.2vh; border-radius: 999px;
  font-size: 2vh; font-weight: 700; color: #0b0f19; background: var(--c3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cel-show-cards-ctitle {
  flex: 0 0 auto; font-size: 2.65vh; font-weight: 700; line-height: 1.2; color: #fff; text-shadow: 0 .2vh .4vh rgb(0 0 0 / .6);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.cel-show-cards-foot { margin-top: auto; display: flex; align-items: center; gap: 1.1vh; min-width: 0; }
.cel-show-cards-face { width: 5.6vh; height: 5.6vh; font-size: 2.2vh; box-shadow: 0 0 0 .3vh var(--c3); }
.cel-show-cards-name { min-width: 0; font-size: 2.8vh; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cel-show-cards-table.is-touring .cel-show-cards-card:not(.is-focus) { filter: brightness(.55) saturate(.7); }
.cel-show-cards-card.is-focus { z-index: 5; }
.cel-show-cards-card.is-focus .cel-show-cards-front { border-color: #fff; }

/* --- Eindstand ------------------------------------------------------------ */

.cel-show-cards-rays {
  position: absolute; left: 50%; top: 42%; width: 240vmax; height: 240vmax; translate: -50% -50%; opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgb(255 216 77 / .16) 0deg 6deg, transparent 6deg 15deg);
  mask: radial-gradient(circle, #000 0%, rgb(0 0 0 / .5) 15%, transparent 38%);
  animation: cel-show-cards-spin 30s linear infinite; transition: opacity .8s;
}
.cel-show-cards-rays.is-on { opacity: 1; }
@keyframes cel-show-cards-spin { to { rotate: 360deg; } }

.cel-show-cards-finale {
  position: absolute; inset: 0; visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6vh;
}
.cel-show-cards-sum { display: flex; align-items: center; gap: 5vh; opacity: 0; }
.cel-show-cards-sum-block { display: flex; flex-direction: column; align-items: center; }
.cel-show-cards-sum-n {
  font-size: 22vh; font-weight: 700; line-height: .95; font-variant-numeric: tabular-nums;
  color: #ffd84d; text-shadow: 0 1vh 0 #6e1a00, 0 0 5vh rgb(255 176 0 / .8);
}
.cel-show-cards-sum-n.is-tickets { color: #fff; text-shadow: 0 1vh 0 #06281d, 0 0 5vh rgb(74 222 128 / .7); }
.cel-show-cards-sum-u { font-size: 4vh; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #fde68a; }
.cel-show-cards-sum-dot { font-size: 14vh; color: rgb(255 255 255 / .5); line-height: 1; padding-bottom: 6vh; }

.cel-show-cards-crew { display: flex; align-items: flex-start; gap: 4vh; justify-content: center; flex-wrap: wrap; max-width: 160vh; }
.cel-show-cards-mate { display: flex; flex-direction: column; align-items: center; gap: .8vh; opacity: 0; width: 16vh; }
.cel-show-cards-mate-face { width: 11vh; height: 11vh; font-size: 4vh; box-shadow: 0 0 0 .4vh #fde68a, 0 1vh 2vh rgb(0 0 0 / .5); }
.cel-show-cards-mate-name { max-width: 100%; font-size: 3.2vh; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cel-show-cards-crew.is-crowd { gap: 2.4vh; }
.cel-show-cards-crew.is-crowd .cel-show-cards-mate { width: 13vh; }
.cel-show-cards-crew.is-crowd .cel-show-cards-mate-face { width: 8.5vh; height: 8.5vh; font-size: 3.2vh; }
.cel-show-cards-crew.is-crowd .cel-show-cards-mate-name { font-size: 2.6vh; }