/* IGReveal — ecran de revelation Instant Gagnant (CDC §1.7).
   2 mecaniques (carte a gratter / bandit manchot), 5 VISUELS ILLUSTRES chacune
   (images /front/ig-reveal/visuals/, zones definies en % dans ig-reveal.js). */

.igr {
  font-family: var(--corner-font, "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin: 0 auto; text-align: center; user-select: none; width: 100%;
}

/* La carte / machine : l'image illustree (ratio + max-width poses par le JS). */
.igr__card {
  position: relative; width: 100%;
  background-size: 100% 100%; background-repeat: no-repeat;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .18));
}

/* --- Carte a gratter --- */
.igr__zone { position: absolute; container-type: size; /* cqw du resultat = largeur de zone */ }
.igr__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  cursor: crosshair; touch-action: none;
}
.igr__canvas:focus-visible { outline: 3px solid var(--corner-action, #FB6B4B); outline-offset: 3px; }

/* Couche resultat (sous le canvas) — 2 variantes par visuel : gagne / perdu. */
.igr__result {
  position: absolute; inset: 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; text-align: center; padding: 8%;
}
.igr__result small { font-size: clamp(10px, 4cqw, 14px); font-weight: 600; opacity: .92; display: block; }
.igr__result b { font-size: clamp(17px, 9cqw, 30px); font-weight: 800; letter-spacing: .02em; line-height: 1.1; }

/* Variantes assorties a l'univers du visuel (data-visual pose par le JS). */
.igr[data-visual="1"] .igr__result--win  { background: radial-gradient(circle at 50% 35%, #2b1b4d, #0d0a1f 78%); color: #7df9ff; text-shadow: 0 0 10px #e83e8c; }
.igr[data-visual="1"] .igr__result--lose { background: radial-gradient(circle at 50% 35%, #1c1430, #0d0a1f 78%); color: #b9a8e8; }
.igr[data-visual="2"] .igr__result--win  { background: radial-gradient(circle at 50% 35%, #f7ecc0, #caa64a 80%); color: #1d4428; }
.igr[data-visual="2"] .igr__result--lose { background: radial-gradient(circle at 50% 35%, #dfe8d8, #a8bba0 80%); color: #33523c; }
.igr[data-visual="3"] .igr__result--win  { background: radial-gradient(circle at 50% 35%, #ffe9a8, #e0b94f 80%); color: #6b4a00; }
.igr[data-visual="3"] .igr__result--lose { background: radial-gradient(circle at 50% 35%, #e8e2cf, #c4b890 80%); color: #5d4f33; }
.igr[data-visual="4"] .igr__result--win  { background: radial-gradient(circle at 50% 35%, #173a6b, #0b1c3a 78%); color: #7df9ff; text-shadow: 0 0 12px #2ee6f6; }
.igr[data-visual="4"] .igr__result--lose { background: radial-gradient(circle at 50% 35%, #14224a, #0b1c3a 78%); color: #9fb2d8; }
.igr[data-visual="5"] .igr__result--win  { background: radial-gradient(circle at 50% 35%, #2a2118, #14100b 80%); color: #e9c45f; text-shadow: 0 0 10px rgba(233, 196, 95, .5); }
.igr[data-visual="5"] .igr__result--lose { background: radial-gradient(circle at 50% 35%, #221d18, #14100b 80%); color: #9c8e76; }

.igr__hint { margin: 0; font-size: 13px; color: #6B5A66; }

/* --- Bandit manchot : chaque HUBLOT est pose a sa place (% de l'image). ---
   Pas de fond : les pictos defilent directement sur les rouleaux peints. */
.igr__reel { position: absolute; overflow: hidden; }
.igr__strip { height: 1200%; transition: transform 1.1s cubic-bezier(.18, .7, .25, 1.02); will-change: transform; }
.igr__symbol {
  height: calc(100% / 12); /* 12 entrees = 2 x 6 symboles */
  display: flex; align-items: center; justify-content: center;
  font-size: inherit; line-height: 1;
}
.igr__flash {
  position: absolute; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: clamp(15px, 5vw, 26px);
  opacity: 0; pointer-events: none; transition: opacity .3s; border-radius: 6px;
}
.igr__flash--show { opacity: 1; }
.igr__flash--win  { background: rgba(20, 60, 30, .74); color: #ffe9a8; text-shadow: 0 1px 0 #000; }
.igr__flash--lose { background: rgba(30, 36, 42, .68); color: #e8edf1; text-shadow: 0 1px 0 #000; }

.igr__lever {
  border: 0; border-radius: 100px; padding: 11px 26px; cursor: pointer;
  font: 700 15px var(--corner-font, "Hanken Grotesk", system-ui, sans-serif);
  background: var(--corner-action, #FB6B4B); color: var(--corner-text-on-action, #fff);
}
.igr__lever:disabled { opacity: .55; cursor: default; }
.igr__lever:focus-visible { outline: 3px solid var(--corner-accent, #FFB23C); }