/* Card Flash */
.cf-board { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 10px; width: min(100%, calc(var(--cols, 3) * 88px)); perspective: 800px; transition: transform .3s; }
.cf-board.win { transform: scale(1.03); }
.cf-card { aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 16px; }
.cf-card:disabled { cursor: default; }
.cf-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .35s cubic-bezier(.3, .8, .3, 1.2); }
.cf-card.up .cf-inner { transform: rotateY(180deg); }
.cf-back, .cf-front { position: absolute; inset: 0; border-radius: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; align-items: center; justify-content: center; }
.cf-back { background: var(--tile-top); box-shadow: var(--lift); border: 1px solid var(--glass-edge); }
.cf-back::after { content: ''; width: 34%; height: 34%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(140, 155, 255, .55), rgba(75, 71, 201, .25)); }
.cf-card:not(:disabled):hover .cf-back { transform: translateY(-2px); }
.cf-front { transform: rotateY(180deg); color: #fff; background: linear-gradient(160deg, #8C9BFF, #4B47C9); box-shadow: inset 0 2px 1px rgba(255, 255, 255, .5), 0 8px 18px rgba(75, 71, 201, .35); }
.cf-front svg { width: 46%; height: 46%; }
.cf-card.ok .cf-front { background: linear-gradient(160deg, #6BE3B5, #1B8A5E); }
.cf-card.bad .cf-front { background: linear-gradient(160deg, #FF9A9D, #E5484D); }
.cf-card.bad .cf-front svg { opacity: 0; }
.cf-card.show:not(.ok) .cf-front { background: linear-gradient(160deg, #FFD964, #E2A713); }
.bt-stage .cf-card.ok, .bt-stage .cf-card.bad { box-shadow: none !important; animation: none; }