/* Odměna po bossovi: karty rubem nahoru, klepnutím se otočí. Osobnosti září už na rubu zlatě. */
#reward { background: radial-gradient(ellipse 70% 55% at 50% 48%, #2e1450, #06030c 72%); }
.reward-inner { width: min(860px, 100%); margin: auto; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.reward-inner h2 { margin: 0; font: 900 clamp(34px, 9vw, 56px)/1.05 var(--font-display); text-transform: uppercase; color: var(--gold); text-shadow: 0 5px 0 #5a2a00, 0 0 30px rgba(255, 204, 77, .5); }
.reward-hint { margin: 0; color: var(--muted); max-width: 46ch; }
.reward-hint b { color: var(--paper); }
.reward-hint span { display: block; margin-top: 4px; color: #fff2cc; font-weight: 700; animation: hint 1.6s ease-in-out infinite; }
@keyframes hint { 50% { opacity: .45; } }
.reward-cards { --card-w: clamp(104px, 27vw, 200px); display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(12px, 3vw, 26px); padding: 10px 0; }
.reward-cards.count-4 { --card-w: clamp(104px, min(38vw, 26vh), 190px); }
@media (min-width: 760px) { .reward-cards.count-4 { --card-w: clamp(120px, 20vw, 190px); } }

.flip { position: relative; width: var(--card-w); aspect-ratio: 5 / 7; padding: 0; border: 0; background: none; cursor: pointer; perspective: 900px; }
.flip .card-back { width: 100%; transition: transform .2s, box-shadow .3s;
  box-shadow: inset 0 0 0 4cqw #c98a12, inset 0 0 0 6cqw #3a1460, 0 4cqw 10cqw rgba(0, 0, 0, .55), 0 0 6cqw rgba(255, 255, 255, .35);
  animation: back-glow 1.8s ease-in-out infinite; animation-delay: calc(var(--i) * -.4s); }
@keyframes back-glow { 50% { box-shadow: inset 0 0 0 4cqw #c98a12, inset 0 0 0 6cqw #3a1460, 0 4cqw 10cqw rgba(0, 0, 0, .55), 0 0 14cqw rgba(255, 255, 255, .6); } }
.flip.legend .card-back { animation-name: back-glow-legend; }
@keyframes back-glow-legend {
  0%, 100% { box-shadow: inset 0 0 0 4cqw #ffcc4d, inset 0 0 0 6cqw #3a1460, 0 4cqw 10cqw rgba(0, 0, 0, .55), 0 0 12cqw rgba(255, 176, 46, .7); }
  50% { box-shadow: inset 0 0 0 4cqw #fff1b0, inset 0 0 0 6cqw #3a1460, 0 4cqw 10cqw rgba(0, 0, 0, .55), 0 0 26cqw rgba(255, 176, 46, 1); }
}
@media (hover: hover) { .flip:not(.open):hover .card-back { transform: translateY(-4%) scale(1.05); } }
.flip:not(.open):active .card-back { transform: scale(.97); }
.flip.open { cursor: default; }
.flip .card { --card-w: 100%; width: 100%; }
.flip.legend.open .card-body { box-shadow: 0 0 0 1.4cqw #ffcc4d, 0 0 18cqw rgba(255, 176, 46, .75), 0 3cqw 8cqw rgba(0, 0, 0, .55); }
.new-badge { position: absolute; top: -3%; right: -6%; z-index: 6; padding: 5px 10px; border-radius: 999px; transform: rotate(8deg);
  font: 900 12px/1 var(--font-display); text-transform: uppercase; letter-spacing: .06em; color: #2a1400;
  background: linear-gradient(180deg, #fff1b0, var(--gold) 55%, var(--gold-deep)); box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
  animation: badge-in .45s .25s cubic-bezier(.3, 1.6, .5, 1) backwards; }
@keyframes badge-in { from { opacity: 0; transform: rotate(8deg) scale(0); } }

.reward-after { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.reward-after p { margin: 0; color: var(--muted); max-width: 46ch; }
.reward-inner .unlock { padding: 12px 16px; border-radius: 14px; background: rgba(125, 255, 178, .12); color: #d6ffe8; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .flip .card-back, .reward-hint span { animation: none; }
}