/* Base commune à tous les jeux d'Eliza : fond « scène » violet, cartes crème, un seul accent jaune. */
:root {
  --ciel-1: #4B2FC9; --ciel-2: #8A3FD8;
  --carte: #FFF8EC; --carte-ombre: #E4D3B4;
  --encre: #2A1B5C; --doux: #7A6A9E; --clair: #FFFFFF;
  --or: #FFC83D; --or-ombre: #D99A00;
  --bon: #2EC27E; --bon-ombre: #1A8A56;
  --faux: #FF7A45;
}
[data-skin="licorne"] { --ciel-1: #D63FA0; --ciel-2: #FF8AC8; }
[data-skin="ocean"]   { --ciel-1: #0E5C9E; --ciel-2: #19B3C9; }
[data-skin="jungle"]  { --ciel-1: #1F6B3A; --ciel-2: #6CBF3A; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--ciel-1);
  background-image:
    radial-gradient(circle at 15% 12%, rgba(255,255,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 22%, rgba(255,255,255,.22) 0 2px, transparent 3px),
    radial-gradient(circle at 60% 6%, rgba(255,255,255,.15) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 30% 40%, rgba(255,255,255,.12) 0 1.5px, transparent 2.5px),
    linear-gradient(170deg, var(--ciel-1), var(--ciel-2));
  background-attachment: fixed;
  color: var(--encre);
  font-family: "Baloo 2", "Fredoka", ui-rounded, system-ui, sans-serif;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  -webkit-user-select: none; user-select: none;
}
button { font: inherit; color: inherit; border: 0; cursor: pointer; touch-action: manipulation; background: none; }
button:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; }

.ecran { max-width: 480px; margin: 0 auto; padding-inline: 16px; padding-block: 8px 32px; display: flex; flex-direction: column; gap: 16px; min-height: 100vh; min-height: 100dvh; }
h1 { font-weight: 800; font-size: 2.2rem; line-height: 1.05; margin: 0; color: var(--clair); text-wrap: balance; text-shadow: 0 3px 0 rgba(0,0,0,.18); }
h2 { font-size: 1.1rem; font-weight: 700; margin: 8px 0 0; color: rgba(255,255,255,.85); }
.sous { margin: 0; color: rgba(255,255,255,.85); font-weight: 500; }

/* Bouton « bonbon » : couleur pleine + tranche du dessous */
.bonbon { border-radius: 22px; font-weight: 800; box-shadow: 0 6px 0 var(--ombre, rgba(0,0,0,.25)); transition: transform .08s, box-shadow .08s; }
.bonbon:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ombre, rgba(0,0,0,.25)); }

/* En-tête */
.top { display: flex; align-items: center; gap: 8px; padding-top: 10px; }
.rond { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.18); font-size: 1.3rem; display: grid; place-items: center; }
.pieces, .album-mini { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 1.15rem; padding: 6px 14px; border-radius: 99px; font-variant-numeric: tabular-nums; }
.pieces { margin-left: auto; background: var(--or); color: var(--encre); box-shadow: 0 3px 0 var(--or-ombre); }
.album-mini { background: rgba(255,255,255,.18); color: var(--clair); }
.pieces.pop { animation: pop .45s; }
@keyframes pop { 50% { transform: scale(1.3) rotate(-4deg); } }

.fa-solid { line-height: 1; }
.rond { color: var(--clair); }
a.rond { text-decoration: none; }

/* Connexion */
.connexion h1 { font-size: 2.4rem; margin-top: 32px; }
.carte-connexion { background: var(--carte); border-radius: 24px; padding: 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 6px 0 var(--carte-ombre); }
.carte-connexion label { font-weight: 700; }
.carte-connexion input { font: inherit; font-size: 1.1rem; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--carte-ombre); background: #fff; color: var(--encre); -webkit-user-select: text; user-select: text; }
.carte-connexion input:focus { outline: none; border-color: var(--ciel-1); }
.message { margin: 0; color: var(--doux); font-weight: 600; min-height: 1.4em; }