:root {
  color-scheme: light;
  --encre: #3b2d6e;
  --doux: #7a6ea8;
  --carte: rgba(255, 255, 255, 0.78);
  --bord: rgba(255, 255, 255, 0.95);
  --ombre: 0 8px 28px rgba(120, 90, 200, 0.16);
  --rose: #ff8fc8;
  --lavande: #a98bff;
  --ciel: #8fd0ff;
  --or: #e8a520;
  --vert: #3fae6a;
  --rouge: #e5536b;
  --rayon: 22px;
}
* { box-sizing: border-box; }
html { background: #efe4ff; }
html, body { margin: 0; min-height: 100vh; }
body {
  font: 16px/1.5 ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, sans-serif;
  color: var(--encre);
  background: linear-gradient(180deg, #ffe1f1 0, #e8ddff 420px, #d8ecff 1100px, #e9f5ff 100%);
  background-color: #e9f5ff;
}
/* nuages qui passent en fond */
.ciel { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.ciel::before, .ciel::after { content: ""; position: absolute; width: 340px; height: 120px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.9), rgba(255,255,255,0)); animation: derive 70s linear infinite; }
.ciel::before { top: 12%; left: -360px; }
.ciel::after { top: 58%; left: -360px; animation-duration: 95s; animation-delay: -40s; transform: scale(1.4); }
@keyframes derive { to { translate: calc(100vw + 720px) 0; } }

header { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 1040px; margin: 0 auto; padding: 16px; }
.logo { font-size: 1.5rem; font-weight: 900; text-decoration: none; letter-spacing: .3px;
  background: linear-gradient(90deg, #ff6fb5, #8f6bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
nav a { color: var(--doux); text-decoration: none; margin-left: 14px; font-weight: 700; white-space: nowrap; }
nav a:hover { color: var(--encre); }
main { max-width: 1040px; margin: 0 auto; padding: 0 16px 48px; }

h1, h2, h3 { margin: .2em 0 .5em; line-height: 1.2; }
h1 { font-size: 1.8rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
p { margin: .4em 0; }
a { color: #7a55e0; }
.doux { color: var(--doux); }
.petit { font-size: .88rem; }
.erreur { color: var(--rouge); }

.carte { background: var(--carte); border: 2px solid var(--bord); border-radius: var(--rayon);
  padding: 18px; backdrop-filter: blur(8px); margin-bottom: 16px; box-shadow: var(--ombre); }
.centre { text-align: center; }
.etroite { max-width: 400px; margin: 6vh auto; }
.grille { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.ligne { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.pile > * + * { margin-top: 10px; }
.deux { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .deux { grid-template-columns: 1.4fr 1fr; align-items: start; } }

label { display: block; text-align: left; color: var(--doux); font-size: .92rem; margin: 10px 0; }
input[type=password], input[type=text], input:not([type]), select { width: 100%; margin-top: 6px; padding: 12px 14px; border-radius: 14px;
  border: 2px solid #e3d8ff; background: #fff; color: var(--encre); font-size: 1rem; }
input[type=range] { width: 100%; accent-color: var(--lavande); }

.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  border: 0; border-radius: 999px; padding: 12px 24px; font: inherit; font-weight: 800; font-size: 1rem;
  background: linear-gradient(135deg, #ff8fc8, #a98bff); color: #fff; text-shadow: 0 1px 2px rgba(80, 40, 140, .3);
  box-shadow: 0 6px 18px rgba(169, 139, 255, .45); transition: transform .1s, filter .2s; text-decoration: none; }
.bouton:hover { filter: brightness(1.06); }
.bouton:active { transform: scale(.97); }
.bouton[disabled] { filter: grayscale(.7) opacity(.6); cursor: not-allowed; box-shadow: none; }
.bouton.second { background: #fff; color: var(--encre); text-shadow: none; border: 2px solid #e3d8ff; box-shadow: none; }
.bouton.second:hover { border-color: var(--lavande); }
.bouton.petit { padding: 8px 16px; font-size: .9rem; }

/* portraits : bulles de rêve */
.portrait { width: 80px; height: 80px; image-rendering: pixelated; border-radius: 50%; object-fit: cover;
  background: #fff; border: 4px solid #fff; box-shadow: 0 4px 14px rgba(120, 90, 200, .25); flex: none; }
.portrait.grand { width: 112px; height: 112px; }
.portrait.mini { width: 54px; height: 54px; border-width: 3px; }
.puce { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: .8rem; font-weight: 800; background: #f1ebff; }
.puce.reve { background: linear-gradient(135deg, #ffb3dc, #c3adff); color: #fff; }
.puce.maison { background: #dcf6e5; color: var(--vert); }
.puce.attente { background: #fff1c9; color: #a77400; }
.shiny::after { content: " ✨"; }

.montre { display: flex; gap: 14px; align-items: center; cursor: pointer; transition: transform .15s; color: inherit; text-decoration: none; }
.montre:hover { transform: translateY(-3px); }

/* carte de l'île */
.ile { width: 100%; height: auto; display: block; border-radius: var(--rayon); }
.ile .lieu { cursor: pointer; outline: none; }
.ile .lieu .halo { opacity: 0; transition: opacity .2s; }
.ile .lieu:hover .halo, .ile .lieu:focus .halo { opacity: .35; }
.ile .lieu.choisi .halo { opacity: .55; animation: pulse 1.6s ease-in-out infinite; }
.ile .etiquette { fill: #fff; stroke: #e3d8ff; stroke-width: 1.5; }
.ile .lieu.choisi .etiquette { fill: #8f6bff; stroke: #fff; }
.ile text { font: 800 13.5px ui-rounded, "Nunito", system-ui, sans-serif; fill: var(--encre); pointer-events: none; }
.ile .lieu.choisi text { fill: #fff; }
.ile .arbre-reve { animation: flotte 5s ease-in-out infinite; transform-origin: 200px 140px; }
@keyframes pulse { 50% { opacity: .2; } }
@keyframes flotte { 50% { transform: translateY(-3px); } }
.eclat { animation: scintille 2.4s ease-in-out infinite alternate; }
.eclat:nth-of-type(2n) { animation-delay: -1.2s; }
@keyframes scintille { from { opacity: .25; } to { opacity: 1; } }
.fumee { animation: fumee 4s ease-in-out infinite; }
.fumee.f2 { animation-delay: -2s; }
@keyframes fumee { 50% { transform: translateY(-4px); opacity: .25; } }
.nuage { animation: nuage 9s ease-in-out infinite alternate; }
@keyframes nuage { to { transform: translateX(12px); } }
.flocon { animation: flocon 6s linear infinite; }
.flocon:nth-of-type(3n) { animation-duration: 8s; }
@keyframes flocon { from { transform: translateY(-20px); } to { transform: translateY(40px); opacity: 0; } }
.cristal { animation: scintille 3s ease-in-out infinite alternate; }

.fiche-zone { border-radius: var(--rayon); overflow: hidden; position: relative; min-height: 120px; margin-bottom: 14px; }
.fiche-zone .scene-fond { position: absolute; inset: 0; width: 100%; height: 100%; }
.fiche-zone .texte { position: relative; padding: 16px; background: linear-gradient(90deg, rgba(255,255,255,.85), rgba(255,255,255,.35)); }
.fiche-zone h3 { margin: 0 0 2px; }

/* scène d'expédition */
.scene { position: relative; border-radius: var(--rayon); overflow: hidden; height: clamp(210px, 48vw, 380px);
  box-shadow: var(--ombre); border: 3px solid #fff; margin-bottom: 16px; }
.scene .scene-fond { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene .titre { position: absolute; left: 12px; top: 10px; right: 12px; display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.scene .titre span { background: rgba(255,255,255,.85); border-radius: 999px; padding: 4px 12px; font-weight: 800; font-size: .9rem; }
.scene .heros, .scene .croise { position: absolute; transform: translate(-50%, -100%); transition: left 1s ease; }
.scene .heros { top: 86%; animation: marche 1.1s ease-in-out infinite; }
.scene .heros .portrait { width: 64px; height: 64px; }
.scene .croise { top: 80%; }
.scene .croise .portrait { width: 42px; height: 42px; border-width: 3px; }
.scene .croise.ami .portrait { border-color: #ff8fc8; }
.scene .croise.ami::after { content: "♥"; position: absolute; top: -12px; right: -6px; color: #ff6fb5; font-size: 1.1rem; }
.scene .zzz { position: absolute; top: -18px; right: -12px; font-weight: 900; color: #fff; text-shadow: 0 1px 3px rgba(60,40,120,.6); }
@keyframes marche { 50% { margin-top: -5px; } }
.scene.fini .heros { animation: none; }

.barre { height: 14px; border-radius: 999px; background: #efe8ff; overflow: hidden; }
.barre > div { height: 100%; background: linear-gradient(90deg, #ff8fc8, #a98bff); transition: width .8s; }

.choix { display: grid; gap: 10px; margin-top: 12px; }
.resultat { padding: 10px 14px; border-radius: 14px; background: #fff; margin-top: 8px; }
.resultat.ok { border-left: 5px solid #6fd39a; }
.resultat.ko { border-left: 5px solid #ffcf6b; }

.rencontre { display: flex; gap: 12px; align-items: center; }
.cachee { opacity: .55; font-style: italic; }
.recompense { font-size: 1.05rem; padding-left: 1.2em; }
.recompense li { margin: 4px 0; }
.rare { color: #c77d00; font-weight: 800; }
.bulle-cadeaux { text-align: center; }
.bulle-cadeaux .portrait { margin: 0 auto 8px; display: block; }
.bulle-cadeaux .recompense { display: inline-block; text-align: left; }

.modale { position: fixed; inset: 0; background: rgba(90, 70, 160, .35); backdrop-filter: blur(4px); display: grid; place-items: center; z-index: 10; padding: 16px; }
/* appli Android : pas de flou d'arrière-plan (lourd pour le téléphone, il redessine tout le ciel animé) */
.appli .carte { backdrop-filter: none; background: rgba(255, 255, 255, .9); }
.appli .modale { backdrop-filter: none; background: rgba(90, 70, 160, .45); }
.modale[hidden] { display: none; }
.modale .boite { position: relative; background: #fff; border-radius: var(--rayon); padding: 20px; width: min(430px, 100%); box-shadow: var(--ombre); }
.modale .fermer { position: absolute; top: 8px; right: 12px; background: none; border: 0; color: var(--doux); font-size: 1.2rem; cursor: pointer; }

/* mini-jeux */
canvas.jeu { width: 100%; max-width: 340px; height: auto; display: block; margin: 10px auto 0; border-radius: 16px; touch-action: none;
  user-select: none; -webkit-user-select: none; }
.compagnons { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 8px 0 12px; }
.compagnon { display: flex; gap: 8px; align-items: center; text-align: left; border: 0; border-radius: 16px; padding: 8px 10px;
  background: #fff; box-shadow: inset 0 0 0 2px #efe6ff; cursor: pointer; font: inherit; color: inherit; min-height: 54px; }
.compagnon .portrait.mini { width: 40px; height: 40px; }
.compagnon.choisi { box-shadow: inset 0 0 0 3px #c3adff; background: #faf6ff; }
.compagnon:disabled { opacity: .45; cursor: default; }
canvas.cueillette { width: 100%; max-width: 340px; display: block; margin: 10px auto 0; border-radius: 16px;
  background: linear-gradient(180deg, #ffe3f1, #d6f0ff 50%, #c8f2c2); touch-action: none; }

@media (max-width: 520px) {
  h1 { font-size: 1.5rem; }
  .portrait.grand { width: 92px; height: 92px; }
  .scene .heros .portrait { width: 52px; height: 52px; }
  .scene .croise .portrait { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* accueil : créature arrivée, en attente d'une destination */
.carte.appel { flex-wrap: wrap; border-color: #ffb3dc; animation: appel 2.4s ease-in-out infinite; }
.carte.appel h2 { margin: 0 0 4px; font-size: 1.15rem; }
@keyframes appel { 50% { box-shadow: 0 8px 30px rgba(255, 111, 181, .45); } }
@media (max-width: 520px) { .carte.appel .bouton { width: 100%; } }
.lien-ile { display: block; cursor: pointer; }

/* appli Android */
header nav { margin-left: auto; }
header .reglages-app { color: var(--doux); text-decoration: none; font-weight: 700; margin-left: 14px; white-space: nowrap; }
@media (max-width: 440px) {
  header { gap: 6px; padding: 14px 12px; }
  .logo { font-size: 1.25rem; }
  nav a, header .reglages-app { margin-left: 10px; font-size: .9rem; }
}

/* comptes */
.rencontre select { width: auto; min-width: 140px; margin-top: 0; padding: 8px 10px; }
#f-compte input { margin-top: 0; }
#nav a[hidden] { display: none; }

[hidden] { display: none !important; }