/* === GIRLY === */
:root{
  --surface:#ffe1f2;        /* blocs, inputs, badges, boutons */
  --on-surface:#4d004d;     /* texte sur surface */
  --card:#fff;
  --bg:linear-gradient(180deg, #ffe9f4 0%, #ffd6ec 100%);
  --text:#4d004d;
  --accent:#ff66b3;
  --ok:#ec5fb0; --ko:#cc3366;
}

/* Fond doux animé */
body{
  background:
    radial-gradient(1200px 600px at -10% -10%, #ffd6ec 0%, transparent 60%),
    radial-gradient(1000px 500px at 110% 10%, #ffe9f4 0%, transparent 60%),
    linear-gradient(180deg, #ffe9f4 0%, #ffd6ec 100%);
  background-size:120% 120%;
  animation: bgFloat 18s ease-in-out infinite alternate;
}
@keyframes bgFloat{ to{ background-position: 10% 5%, 90% 15%, center; } }

/* Titres “candy gloss” (uniquement dans le jeu pour éviter le doublon) */
.wrap h1{
  background: linear-gradient(90deg, var(--text), var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 1px 0 #fff6, 0 6px 16px rgba(255,102,179,.35);
}

/* Panneaux & badges */
.panel{ border:1px solid color-mix(in oklab, var(--accent) 25%, transparent);
        box-shadow:0 8px 18px rgba(255,102,179,.18); }
.badge{
  background: color-mix(in oklab, var(--surface) 85%, #fff 15%);
  color: var(--on-surface);
  border:1px solid color-mix(in oklab, var(--accent) 35%, transparent);
  backdrop-filter: saturate(140%) blur(6px);
}

/* Blocs “carte sucrée” */
.block{
  background:
    radial-gradient(160px 120px at 20% 20%, #fff 0%, transparent 60%),
    linear-gradient(145deg, var(--surface), #fff);
  border:2px solid color-mix(in oklab, var(--accent) 55%, #ffffff 45%);
  box-shadow:
    0 0 0 6px color-mix(in oklab, var(--accent) 12%, transparent),
    0 16px 32px rgba(255,102,179,.20);
  color:var(--on-surface);
  transition: transform .2s ease, box-shadow .2s ease;
}
.block:hover{ transform: translateY(-4px); }

/* Champs */
.answer input{
  background: var(--surface); color: var(--on-surface);
  border-color: color-mix(in oklab, var(--accent) 50%, #fff 50%);
}
.answer input:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 25%, transparent);
}

/* Feedback */
.ok{ animation: pop .35s ease }
.ko{ animation: shake .35s ease }