/*
 * YouCare Game — Composant "tuile de jeu" (.v2-tile + .gb-*).
 *
 * Extrait de css/home.css le 2026-06-11 pour réutilisation hors home :
 * la page /alphatest.html présente ses jeux en cours de développement avec
 * exactement le même format de carte que le catalogue de la home.
 *
 * Chargé par : public/index.html (catalogue) ET public/alphatest.html.
 * La grille de layout (.v2-games-grid côté home, .at-tiles côté alphatest)
 * reste propre à chaque page ; seule la tuile elle-même est partagée ici.
 *
 * Variables : design-system.css (--yc-*). À charger après design-system.
 */

/* Modern Game Boy pixel tile */
.v2-tile {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 5/6;
  display: flex;
  flex-direction: column;
  padding: 0;
  color: #fff;
  transition: transform 240ms ease, box-shadow 240ms ease;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, #2a1950 0%, #1a0f38 100%);
  box-shadow:
    0 24px 48px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.08);
  text-decoration: none;
}
.v2-tile:hover {
  transform: translateY(-6px);
  box-shadow:
    0 32px 60px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.12);
}
.v2-tile:hover .gb-screen .pixel-art { animation-play-state: running; }

.v2-tile .gb-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  gap: 10px;
}
.v2-tile .tile-partner {
  font-family: var(--yc-font-display);
  font-weight: 800;
  font-size: 10px;
  color: #fff;
  letter-spacing: 0.02em;
  padding: 4px 8px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
}
.v2-tile .gb-leds {
  display: flex;
  gap: 6px;
  align-items: center;
}
.v2-tile .gb-led {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.4);
}
.v2-tile .gb-led.on {
  background: var(--yc-neon);
  box-shadow: 0 0 6px var(--yc-neon), inset 0 1px 1px rgba(255,255,255,0.4);
}
.v2-tile .gb-led.red.on { background: var(--yc-pink); box-shadow: 0 0 6px var(--yc-pink); }
.v2-tile .gb-led.amber.on { background: var(--yc-amber); box-shadow: 0 0 6px var(--yc-amber); }

.v2-tile .gb-screen {
  position: relative;
  margin: 12px 14px 10px;
  aspect-ratio: 1/1;
  border-radius: 10px;
  overflow: hidden;
  padding: 10px;
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,0.5),
    inset 0 2px 6px rgba(0,0,0,0.55),
    0 1px 0 rgba(255,255,255,0.06);
}
.v2-tile.paw .gb-screen { background: #2a1205; }
.v2-tile.forest .gb-screen { background: #051a0e; }
.v2-tile.biodiv .gb-screen { background: #051626; }
.v2-tile.food .gb-screen { background: #2a1c05; }

.v2-tile .gb-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0 1px, transparent 1px 3px);
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: multiply;
}
.v2-tile .gb-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.08), transparent 50%);
  pointer-events: none;
  z-index: 2;
}

.v2-tile .pixel-art {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  animation: gbIdle 1.8s steps(2, end) infinite;
  animation-play-state: paused;
}
@keyframes gbIdle {
  0%, 50% { transform: translateY(0); }
  51%, 100% { transform: translateY(-2px); }
}

.v2-tile .gb-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 16px 10px;
  font-family: var(--yc-font-mono);
  font-size: 10px;
  color: var(--yc-white-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.v2-tile .gb-label .gb-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  white-space: nowrap;
}
.v2-tile .gb-label .gb-state-ico {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--yc-neon);
  filter: drop-shadow(0 0 5px var(--yc-neon));
  /* cale optiquement le centre de l'icone sur les capitales d'EN DEV */
  transform: translateY(-1px);
}
.v2-tile.soon .gb-label .dot { background: var(--yc-amber); box-shadow: 0 0 6px var(--yc-amber); }

/* ============================================================
   Tiles "locked" : jeux pas encore lancés. Pixel-art mystère
   (coin/glitch/key/hourglass), titre "???" + cadenas, dot LED
   désaturée qui clignote, animation flottante. Le tableau est
   ajouté en complément (pas en remplacement) des règles
   .v2-tile.paw|forest|biodiv|food existantes : le `gb-screen`
   et le titre `h3` viennent de plus haut, les overrides ci-dessous
   ne s'appliquent qu'aux jeux dont le SVG porte `.locked-art`.
   ============================================================ */
.v2-tile .pixel-art.locked-art {
  animation: lockFloat 2.6s ease-in-out infinite;
}
.v2-tile .pixel-art.proposal-key {
  animation: lockFloat 3.2s ease-in-out infinite, keySpin 6s ease-in-out infinite;
  transform-origin: 50% 50%;
}
.v2-tile .pixel-art.proposal-glitch {
  animation: lockFloat 2.6s ease-in-out infinite, glitchShift 1.4s steps(2) infinite;
}
@keyframes lockFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3%); }
}
@keyframes keySpin {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50%      { transform: rotate(4deg) translateY(-3%); }
}
@keyframes glitchShift {
  0%, 100% { transform: translateX(0); }
  33%      { transform: translateX(-1.5%); }
  66%      { transform: translateX(1.5%); }
}

/* Dot LED désaturée + clignotement lent quand tile en mode locked.
   Placée après .v2-tile.soon pour gagner sur égalité de spécificité
   (les 4 tiles sont toutes "locked" en phase démo). */
.v2-tile.paw .gb-label .dot,
.v2-tile.forest .gb-label .dot,
.v2-tile.biodiv .gb-label .dot,
.v2-tile.food .gb-label .dot {
  background: #6b6b80;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.25);
  animation: lockBlink 1.8s ease-in-out infinite;
}
@keyframes lockBlink {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

.v2-tile .locked-tag {
  font-size: 0.7em;
  vertical-align: middle;
  margin-left: 6px;
  opacity: 0.85;
  filter: grayscale(0.2);
}
.v2-tile.paw .gb-body h3,
.v2-tile.forest .gb-body h3,
.v2-tile.biodiv .gb-body h3,
.v2-tile.food   .gb-body h3 {
  letter-spacing: 0.04em;
}

/* Scanline screen overlay légèrement adoucie sur les tiles locked
   (cohérence avec l'effet "TV cassée" / mystère). */
.v2-tile.paw .gb-screen::after,
.v2-tile.forest .gb-screen::after,
.v2-tile.biodiv .gb-screen::after,
.v2-tile.food   .gb-screen::after {
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .v2-tile .pixel-art.locked-art,
  .v2-tile .pixel-art.proposal-key,
  .v2-tile .pixel-art.proposal-glitch,
  .v2-tile.paw .gb-label .dot,
  .v2-tile.forest .gb-label .dot,
  .v2-tile.biodiv .gb-label .dot,
  .v2-tile.food .gb-label .dot {
    animation: none !important;
  }
}

.v2-tile .gb-body {
  padding: 2px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.v2-tile .tile-cause {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yc-white-dim);
  margin: 0;
}
.v2-tile h3 {
  font-family: var(--yc-font-display);
  font-size: 26px;
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
}
.v2-tile .gb-controls {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.v2-tile .gb-dpad {
  position: relative;
  width: 28px;
  height: 28px;
}
.v2-tile .gb-dpad::before, .v2-tile .gb-dpad::after {
  content: '';
  position: absolute;
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
}
.v2-tile .gb-dpad::before {
  top: 0; bottom: 0; left: 10px; right: 10px;
}
.v2-tile .gb-dpad::after {
  left: 0; right: 0; top: 10px; bottom: 10px;
}
.v2-tile .gb-ab {
  display: flex;
  gap: 6px;
}
.v2-tile .gb-ab span {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--yc-pink);
  box-shadow: 0 2px 0 #8a1866, inset 0 1px 0 rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--yc-font-display);
  font-weight: 900;
  font-size: 10px;
  color: #fff;
}
.v2-tile .gb-ab span.b { background: var(--yc-violet); box-shadow: 0 2px 0 #4a2a9e, inset 0 1px 0 rgba(255,255,255,0.25); }

.v2-tile .gb-plays {
  font-family: var(--yc-font-mono);
  font-size: 11px;
  color: var(--yc-white-dim);
}
.v2-tile .gb-plays strong { color: #fff; font-weight: 700; }

/* Respect reduced motion (animations de tuiles + hover). */
@media (prefers-reduced-motion: reduce) {
  .v2-tile { transition: none; }
  .v2-tile:hover { transform: none; }
  .v2-tile .pixel-art { animation: none !important; }
}