/* ═══════════════════════════════════════════════════════
   CZ KENO 12/66 — Cyber/Ice Visual Identity
   ═══════════════════════════════════════════════════════ */

/* ─── PALETTE ─── */
:root {
  --cz-bg-primary: #060a14;
  --cz-bg-secondary: #0a1020;
  --cz-bg-card: #0d1528;
  --cz-bg-card-hover: #111d35;
  --cz-accent: #00BFFF;
  --cz-accent-bright: #00E5FF;
  --cz-accent-dim: #007799;
  --cz-accent-glow: rgba(0, 191, 255, 0.3);
  --cz-text-primary: #E0F0FF;
  --cz-text-secondary: #7899BB;
  --cz-text-muted: #3D5570;
  --cz-border: rgba(0, 191, 255, 0.15);
  --cz-border-hover: rgba(0, 191, 255, 0.35);
  --cz-success: #00FFB0;
  --cz-warning: #FFB800;
  --cz-danger: #FF3355;
  --cz-grid-line: rgba(0, 191, 255, 0.05);

  --cz-tier-bronze: #CD7F32;
  --cz-tier-silver: #C0C0C0;
  --cz-tier-gold: #E8D5A0;
  --cz-tier-platinum: #A0D4E4;
  --cz-tier-diamond: #7BD4FF;
  --cz-tier-obsidian: #00FFCC;
  --cz-tier-legendary: #00E5FF;
  --cz-tier-mythic: #8B5CF6;
  --cz-tier-celestial: #FFFFFF;
}

/* ─── BUTTONS ─── */
.cz-btn {
  background: transparent;
  border: 1px solid var(--cz-accent);
  color: var(--cz-accent);
  font-family: 'Orbitron', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 8px 20px;
  cursor: pointer;
  transition: all 0.3s;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.cz-btn:hover {
  background: var(--cz-accent);
  color: var(--cz-bg-primary);
  box-shadow: 0 0 20px var(--cz-accent-glow);
}

/* ─── CARDS ─── */
.cz-card {
  background: var(--cz-bg-card);
  border: 1px solid var(--cz-border);
  border-radius: 4px;
  padding: 16px;
  position: relative;
}
.cz-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40px; height: 2px;
  background: var(--cz-accent);
}
.cz-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 2px; height: 40px;
  background: var(--cz-accent);
}

/* ─── TABS ─── */
.cz-tab {
  font-family: 'Orbitron', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--cz-text-secondary);
  border-bottom: 2px solid transparent;
  padding: 10px 16px;
  cursor: pointer;
  transition: all 0.3s;
  background: none;
  text-transform: uppercase;
}
.cz-tab.active {
  color: var(--cz-accent);
  border-bottom-color: var(--cz-accent);
  text-shadow: 0 0 10px var(--cz-accent-glow);
}

/* ─── SCANLINE OVERLAY ─── */
.cz-scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 191, 255, 0.015) 2px,
    rgba(0, 191, 255, 0.015) 4px
  );
  pointer-events: none;
  z-index: 1;
}

/* ─── DIVIDER ─── */
.cz-divider {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cz-accent-dim), transparent);
  margin: 20px 0;
}

/* ─── DODECAGON ANIMATIONS ─── */
@keyframes cz-ball-pop {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(3deg); opacity: 1; }
  80%  { transform: scale(0.95); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes cz-glow-pulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(0,191,255,0.4)); }
  50%      { filter: drop-shadow(0 0 14px rgba(0,191,255,0.8)) drop-shadow(0 0 28px rgba(0,191,255,0.3)); }
}

.cz-dodecagon {
  transition: transform 0.2s ease;
}
.cz-dodecagon:hover {
  transform: scale(1.15);
}
.cz-ball-anim {
  animation: cz-ball-pop 0.44s cubic-bezier(.34,1.56,.64,1) both;
}
.cz-ball-glow {
  animation: cz-glow-pulse 2s ease-in-out infinite;
}