/* GameLike — CTA « J'aime ce jeu » (design system Zikof, Pop brutaliste) */
.zk-like {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 12px 0;
}
.zk-like-float {
  position: fixed;
  left: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  margin: 0;
}

.zk-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 11px 16px;
  border-radius: 999px;
  /* `--text-primary` et `--glass-border` ne sont PAS fournies par
     zikof-theme.css : seules leurs valeurs de repli, sombres, s'appliquaient.
     Comme `--bg-card` est bien définie et passe au blanc en thème clair, on
     obtenait du crème sur blanc — contraste 1,11:1, illisible.
     On s'appuie donc sur `--ink`, qui existe et suit le thème. */
  background: var(--bg-card, #241f33);
  color: var(--text-primary, var(--ink, #fbf2dd));
  border: 2px solid var(--glass-border, var(--ink, #fbf2dd));
  box-shadow: 4px 4px 0 var(--sh, #000);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
}
.zk-like-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--sh, #000); }
.zk-like-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--sh, #000); }
.zk-like-btn:disabled { opacity: 0.6; cursor: default; }

.zk-like-heart { color: #ff5da2; font-size: 18px; line-height: 1; }
.zk-like-btn.is-liked { background: #ff5da2; color: #17151f; }
.zk-like-btn.is-liked .zk-like-heart { color: #17151f; animation: zk-like-pop 0.4s ease; }

.zk-like-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: #ffd23f;
  color: #17151f;
  font-weight: 900;
  font-size: 12px;
  border: 2px solid #000;
  margin-left: 2px;
}

.zk-like-hint {
  font-family: "Hanken Grotesk", -apple-system, system-ui, sans-serif;
  font-size: 12px;
  color: var(--text-secondary, #b9b3c9);
  text-align: center;
}
.zk-like-hint a { color: #5a5aff; font-weight: 700; text-decoration: underline; }

@keyframes zk-like-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.4); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .zk-like-btn.is-liked .zk-like-heart { animation: none; }
}