.cd-steps { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.cd-fair { font-size: 13.5px; line-height: 1.6; color: var(--text-2); background: var(--surface-2); border-radius: 12px; padding: 10px 12px; }
.cd-banner { min-height: 44px; }
.cd-info { margin: 0; text-align: center; font-weight: 700; color: var(--text-2); font-size: 14.5px; word-break: keep-all; }
.cd-actions .btn { flex: 1 1 auto; }

.cd-table { position: relative; border-radius: var(--radius-lg); padding: 14px 10px; background: radial-gradient(120% 100% at 50% 0%, #1f7a55, #0f4f37); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .08), inset 0 10px 30px rgba(0, 0, 0, .25); }
.cd-grid {
  display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 8px;
  max-width: calc(var(--cols, 4) * 112px); margin: 0 auto;
}
.cd-card {
  position: relative; aspect-ratio: 3 / 4; min-height: 64px; border: 0; padding: 0; background: none; cursor: pointer;
  perspective: 800px; -webkit-tap-highlight-color: transparent;
  animation: cd-deal .45s cubic-bezier(.2, 1.3, .4, 1) both; animation-delay: var(--d, 0ms);
}
.cd-card:disabled { cursor: default; }
.cd-card:focus-visible { outline: 3px solid #ffd66b; outline-offset: 3px; border-radius: 12px; }
.cd-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3, 1.25, .5, 1); }
.cd-card:hover:not(:disabled) .cd-inner { transform: translateY(-4px) rotate(-1.5deg); }
.cd-card.is-flipped .cd-inner { transform: rotateY(180deg); }
.cd-face {
  position: absolute; inset: 0; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; padding: 4px;
}
.cd-back {
  border: 3px solid #fff;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .14) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .14) 0 6px, transparent 6px 12px),
    linear-gradient(135deg, #5b6cff, #8b5cf6);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
}
.cd-back::after { content: ""; position: absolute; inset: 5px; border-radius: 7px; border: 2px dashed rgba(255, 255, 255, .45); pointer-events: none; }
.cd-num {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #5b6cff;
  font-family: var(--font-num); font-weight: 900; font-size: 16px; box-shadow: 0 2px 0 rgba(0, 0, 0, .2); position: relative; z-index: 1;
}
.cd-front {
  transform: rotateY(180deg); background: #fff; border: 3px solid #d9dde6; color: #1d2030; gap: 2px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
}
.cd-ico { font-size: clamp(22px, 6vw, 34px); line-height: 1.1; }
.cd-txt { font-weight: 900; font-size: clamp(12px, 3.2vw, 15px); text-align: center; line-height: 1.2; word-break: keep-all; overflow-wrap: anywhere; }
.cd-who { font-size: 11px; font-weight: 800; color: var(--who, #6b7185); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-who:empty { display: none; }
.cd-card.is-safe .cd-front { background: #e6f7ef; border-color: #17a673; color: #0f6b4a; }
.cd-card.is-bomb .cd-front { background: radial-gradient(circle at 50% 40%, #ffd66b, #ff5a36 55%, #b3261e); border-color: #7a1712; color: #fff; }
.cd-card.is-bomb .cd-who { color: #fff; }
.cd-card.is-boom { z-index: 2; animation: cd-boom .6s cubic-bezier(.2, 1.5, .4, 1); }
.cd-card.is-boom::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  border: 6px solid #ffb020; animation: cd-ring .7s ease-out forwards; pointer-events: none;
}
.cd-card.is-peek { opacity: .55; animation: none; }
.cd-card.is-peek .cd-inner { transition-duration: .3s; }

.cd-flash {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(255, 176, 32, .75) 40%, rgba(255, 90, 54, 0) 75%);
}
.cd-flash.is-on { animation: cd-flash .6s ease-out; }

@keyframes cd-deal { from { transform: translateY(-18px) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cd-boom { 0% { transform: scale(1); } 30% { transform: scale(1.25) rotate(-6deg); } 60% { transform: scale(.95) rotate(4deg); } 100% { transform: scale(1); } }
@keyframes cd-ring { from { transform: scale(.4); opacity: 1; } to { transform: scale(4); opacity: 0; } }
@keyframes cd-flash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
.cd-m-label { font-size: 24px; font-weight: 900; color: var(--text); margin: 0 0 4px; word-break: keep-all; }