/* La maison des licornes : une seule app plein écran, thème clair unique, voulu (univers enfant).
   Refonte Claude Design : accueil « ascenseur » (un étage à la fois), gabarit de jeu commun
   (Maison, Écouter, scène, trois cartes, bannière arc-en-ciel), jetons de la planche Jetons. */
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/baloo-2-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/baloo-2-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/baloo-2-latin-800-normal.woff2) format("woff2"); }

:root {
  --sky: #EEE8FF; --sky2: #FFE9F4; --ink: #3B2C5F; --ink-soft: #6F5F96;
  --roof: #E0569D; --pink: #FF8CC0; --lav: #B8A4F4; --mint: #7DDCC3; --sun: #FFC94A;
  --card: #FFFFFF; --wall: #FFFBFE;
  /* jetons de la refonte Claude Design (planche Jetons) */
  --lav-deep: #7B61D9; --btn-edge: #5A44B0; --card-edge: #DDD2EE; --lav-pale: #E9E1FF; --pink-pale: #FFE0EF;
  --sun-pale: #FFF1CF; --mint-pale: #DDF5EE; --mint-deep: #2E9C85; --house-edge: #F2C6DE;
  --red: #EA3A50; --orange: #FF8A22; --yellow: #FFC92B; --green: #36B865; --blue: #2F7FE0;
  --f1-wall: #FFF1CF; --f1-floor: #FFD97A; --f1-light: #FFC94A;
  --f2-wall: #FFE0EF; --f2-floor: #FFB3D4; --f2-light: #FF8CC0;
  --f3-wall: #DDF5EE; --f3-floor: #9CE3CF; --f3-light: #7DDCC3;
  --r-chip: 20px; --r-card: 32px; --r-stage: 44px; --r-room: 38px 38px 20px 20px / 60px 60px 20px 20px; --r-pill: 999px;
  --sh-step: 0 6px 0 #DDD2EE; --sh-step-down: 0 2px 0 #DDD2EE; --sh-amb: 0 14px 24px rgba(110, 84, 204, .16); --sh-house: 0 10px 0 #F2C6DE;
  --fs-digit: 88px; --fs-title: 40px; --fs-brand: 30px; --fs-body: 20px; --fs-caption: 16px;
  --target: 88px; --gap: 16px;
  --font: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
body {
  background: linear-gradient(180deg, var(--sky) 0%, var(--sky2) 100%);
  color: var(--ink); font-family: var(--font); font-size: 18px; font-weight: 600;
  overflow: hidden; overscroll-behavior: none;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
button { font: inherit; color: inherit; border: 0; padding: 0; margin: 0; background: none; cursor: pointer; touch-action: manipulation; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible { outline: 4px solid var(--lav); outline-offset: 3px; }
svg.art, svg.ico { display: block; }

.app {
  height: 100%; max-width: 1180px; margin: 0 auto;
  padding: max(clamp(10px, 3vmin, 24px), env(safe-area-inset-top, 0px)) max(clamp(16px, 3vw, 32px), env(safe-area-inset-right, 0px))
           max(clamp(10px, 2vmin, 16px), env(safe-area-inset-bottom, 0px)) max(clamp(16px, 3vw, 32px), env(safe-area-inset-left, 0px));
}
.screen { height: 100%; min-height: 0; }

/* ---------- licorne (dessin des films Claude Motion, planche Licorne) ---------- */
svg.uni { display: block; overflow: visible; }
.uni .snow { fill: #FFFFFF; stroke: #E3D9F7; stroke-width: 3; stroke-linejoin: round; }
.uni .blush { fill: #FFB3D4; } .uni .snout { fill: #FFD9EA; } .uni .nose { fill: #C96B94; }
.uni .mouthf { fill: #C45C8B; stroke: #C45C8B; stroke-width: 2; stroke-linejoin: round; }
.uni .mane1 { fill: #FF8CC0; } .uni .mane2 { fill: #B8A4F4; } .uni .mane3 { fill: #7DDCC3; }
.uni .horn { fill: #F7B733; } .uni .hornline { fill: none; stroke: #D9941A; stroke-width: 2.8; stroke-linecap: round; }
.uni .inkf { fill: #3B2C5F; } .uni .arc { fill: none; stroke: #3B2C5F; stroke-width: 3.6; stroke-linecap: round; }
.uni .smile { fill: none; stroke: #C96B94; stroke-width: 2.6; stroke-linecap: round; }
.uni .cheekJ { fill: #FF8CC0; opacity: .6; }
.uni .shadow { fill: rgba(59, 44, 95, .10); }
.uni .u-z { font-family: var(--font); font-weight: 800; fill: #7B61D9; }
.brand .uni .shadow, .say .uni .shadow { display: none; }

/* ---------- arc-en-ciel (liseré blanc, rail, bandes) ---------- */
.rainbow { display: block; overflow: visible; }
.rainbow path { fill: none; stroke-linecap: round; }
.rainbow .re { stroke: #FFFFFF; stroke-width: 19; }
.rainbow .rr { stroke: #E4DDF5; stroke-width: 15; }
.rainbow .rb { stroke-width: 15; stroke-dasharray: 1 2; }

/* ---------- boutons ronds (planche Bouton) ---------- */
.rbtn { width: var(--target); height: var(--target); flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--lav-deep); box-shadow: 0 6px 0 var(--btn-edge), var(--sh-amb); transition: transform .08s, box-shadow .08s, opacity .2s; }
.rbtn svg { width: 56%; height: 56%; }
.rbtn.white { background: var(--card); box-shadow: 0 6px 0 var(--card-edge), var(--sh-amb); }
.rbtn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 var(--btn-edge), var(--sh-amb); }
.rbtn.white:active { box-shadow: 0 2px 0 var(--card-edge), var(--sh-amb); }
.rbtn:disabled { opacity: .3; cursor: default; box-shadow: 0 6px 0 var(--btn-edge); }
.plink { height: 56px; padding: 0 22px 0 16px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .75);
  display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.plink .ico { width: 20px; height: 20px; }

/* ---------- accueil : l'ascenseur (variante C) ---------- */
.home { display: flex; flex-direction: column; gap: clamp(4px, 1.2vh, 10px); }
.hhead { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; }
.brand { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 16px); min-width: 0; }
.brand .uni { width: clamp(44px, 8vh, 68px); height: clamp(44px, 8vh, 68px); flex: none; }
.brand h1 { margin: 0; font-size: clamp(20px, 3.3vw, 34px); font-weight: 800; line-height: 1; }
.hright { display: flex; align-items: center; gap: 12px; flex: none; }
.chip { display: flex; align-items: center; gap: 6px; padding: 4px 18px 4px 8px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .7); }
.chip .ico { width: clamp(34px, 5.5vh, 48px); height: clamp(34px, 5.5vh, 48px); }
.chip b { font-size: clamp(18px, 3.2vh, 26px); font-weight: 700; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.plink.inhead { display: none; }
.plink.foot { align-self: center; flex: none; }

.house { flex: 1; min-height: 0; width: min(100%, 860px); margin: 0 auto; display: flex; flex-direction: column; }
.roof { position: relative; flex: none; height: clamp(36px, 10vh, 98px); margin: 0 -2%; }
.roof svg { width: 100%; height: 100%; display: block; }
.oculus { position: absolute; left: 50%; top: 65%; height: 49%; aspect-ratio: 1; transform: translate(-50%, -50%); background: #FFFFFF; border-radius: 50%; display: grid; place-items: center; }
.oculus .ico { width: 72%; height: 72%; }
.wall { flex: 1; min-height: 0; display: flex; gap: clamp(14px, 2.6vmin, 24px); padding: clamp(14px, 2.6vmin, 28px);
  background: var(--wall); border-radius: 0 0 var(--r-stage) var(--r-stage); box-shadow: var(--sh-house); }
.lift { flex: none; width: 132px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.lights { flex: 1; width: 100px; border-radius: 48px; background: var(--lav-pale); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.light { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, .6); opacity: .6; display: grid; place-items: center; transition: opacity .3s; }
.light .ico { width: 66%; height: 66%; }
.light.on { opacity: 1; box-shadow: 0 0 0 4px var(--lav-deep); }
.l-nombres.on { background: var(--f1-floor); } .l-mots.on { background: var(--f2-floor); } .l-monde.on { background: var(--f3-floor); }
.shaft { flex: 1; min-width: 0; min-height: 0; position: relative; overflow: hidden; border-radius: 36px; }
.floor { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.f-nombres { background: var(--f1-wall); } .f-nombres .strip { background: var(--f1-floor); }
.f-mots { background: var(--f2-wall); } .f-mots .strip { background: var(--f2-floor); }
.f-monde { background: var(--f3-wall); } .f-monde .strip { background: var(--f3-floor); }
.flabel { position: absolute; left: 26px; top: 16px; font-size: 16px; font-weight: 700; color: var(--ink-soft); }
.rooms { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: flex-end; gap: 20px; padding: 52px 24px 0; }
.room { position: relative; overflow: hidden; flex: 0 1 calc((100% - 40px) / 3); height: min(100%, 440px); min-width: 88px;
  border-radius: 92px 92px 32px 32px; background: #FFFFFF; box-shadow: 0 6px 0 var(--card-edge);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 12px; padding: 0 8px clamp(14px, 3vh, 26px); }
.room > svg { width: min(132px, 72%); height: auto; aspect-ratio: 1; flex: none; }
.room > span { font-size: 17px; font-weight: 700; color: var(--ink-soft); text-align: center; line-height: 1.1; }
.room:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--card-edge); }
.strip { flex: none; height: clamp(26px, 5vh, 40px); }
.empty { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--ink-soft); background: var(--lav-pale); }
/* la porte qui s'ouvre (film « La porte s'ouvre ») */
.door { position: absolute; inset: 0; border-radius: inherit; background: var(--pink); transform-origin: 0 50%; opacity: 0; pointer-events: none; }
.door .knob { position: absolute; right: 12%; top: 58%; width: 18%; aspect-ratio: 1; max-width: 44px; border-radius: 50%; background: var(--sun); }
.door .shade { position: absolute; inset: 0; border-radius: inherit; background: var(--ink); opacity: 0; }

/* tablette et téléphone en portrait : l'ascenseur passe sous l'étage */
@media (orientation: portrait) {
  .wall { flex-direction: column; }
  .lift { order: 2; width: auto; height: 94px; flex-direction: row; gap: 16px; }
  .lights { width: auto; height: 88px; flex-direction: row; gap: clamp(8px, 4vw, 28px); }
}
@media (orientation: portrait) and (max-width: 600px) {
  .roof { height: 52px; }
  .flabel { display: none; }
  .rooms { flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 12px; padding: 14px 14px 12px; }
  .room { flex: 0 1 140px; height: auto; min-height: 96px; flex-direction: row; justify-content: flex-start; gap: 18px; padding: 0 20px; border-radius: 28px; }
  .room > svg { width: auto; height: min(104px, 80%); }
  .light { width: 38px; height: 38px; } .light.on { width: 44px; height: 44px; box-shadow: 0 0 0 3px var(--lav-deep); }
  .lift { gap: 8px; }
}
/* téléphone en paysage : en-tête compact, le lien parents monte dans l'en-tête */
@media (orientation: landscape) and (max-height: 520px) {
  .roof { display: none; }
  .hhead { min-height: 56px; }
  .brand .uni { width: 40px; height: 40px; }
  .brand h1 { font-size: 20px; }
  .plink.inhead { display: inline-flex; height: 56px; font-size: 14px; background: #FFFFFF; }
  .plink.foot { display: none; }
  .chip { padding: 4px 12px 4px 4px; } .chip .ico { width: 32px; height: 32px; } .chip b { font-size: 18px; }
  .wall { border-radius: 32px; box-shadow: 0 8px 0 var(--house-edge); padding: 14px; gap: 14px; }
  .lift { width: 88px; gap: 8px; justify-content: space-between; }
  .lights { flex: 0 1 auto; width: 44px; height: auto; padding: 10px 0; gap: 8px; border-radius: 22px; }
  .light { width: 18px; height: 18px; } .light .ico { display: none; }
  .light.on { width: 22px; height: 22px; box-shadow: 0 0 0 3px var(--lav-deep); }
  .shaft { border-radius: 26px; }
  .flabel { display: none; }
  .rooms { padding: 14px 14px 0; gap: 14px; }
  .room { border-radius: 80px 80px 24px 24px; gap: 8px; padding-bottom: 14px; }
  .room > svg { width: min(112px, 70%); }
  .room > span { font-size: 15px; }
}

/* ---------- écran de jeu (gabarit commun) ---------- */
.game { display: grid; grid-template-columns: var(--target) minmax(0, 1fr) var(--target); grid-template-rows: var(--target) minmax(0, 1fr) auto;
  grid-template-areas: "back . rep" "play play play" "ban ban ban"; gap: clamp(10px, 2.4vmin, 24px) 16px; }
#back { grid-area: back; } #rep { grid-area: rep; }
.play { grid-area: play; min-height: 0; min-width: 0; display: flex; gap: clamp(16px, 3vmin, 28px); }
.banner { grid-area: ban; justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: min(100%, 460px); }
.banner > div { width: clamp(150px, 31vmin, 300px); }
.banner .rainbow { width: 100%; height: auto; }
.say { margin: 0; display: flex; align-items: center; gap: 8px; font-size: clamp(14px, 2vmin, 18px); font-weight: 700; line-height: 1.2; color: var(--ink-soft); text-align: left; }
.say .uni { width: clamp(30px, 5vmin, 44px); height: clamp(30px, 5vmin, 44px); flex: none; }

/* cartes de réponse */
.choices { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: clamp(16px, 3vmin, 28px); }
.choice { position: relative; min-width: 88px; min-height: 88px; border-radius: 40px; background: #FFFCFF;
  box-shadow: 0 8px 0 #E2D7F0, 0 18px 30px rgba(110, 84, 204, .10);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; transition: opacity .25s, transform .25s; }
.choice > svg.art { width: 74%; height: 74%; max-width: 250px; max-height: 250px; }
.asking .choice:not(.waking), .asking .drum:not(.waking) { opacity: .55; transform: scale(.96); }
.choice.dim, .choice.tried:not(.waking) { opacity: .55; }
.choice.nope { animation: nope .45s ease-in-out; }
@keyframes nope { 20% { translate: -8px 0; } 60% { translate: 8px 0; } 100% { translate: 0 0; } }
.choice.hint { animation: hint 1.8s ease-in-out infinite; }
@keyframes hint { 50% { box-shadow: 0 8px 0 #E2D7F0, 0 0 0 7px rgba(184, 164, 244, .55); } }
.ring { position: absolute; left: -6px; top: -6px; width: calc(100% + 12px); height: calc(100% + 12px); overflow: visible; pointer-events: none; }
.ring rect { fill: none; stroke: var(--mint-deep); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.badge { position: absolute; right: -14px; top: -18px; width: 56px; height: 56px; border-radius: 50%; background: var(--mint-deep); box-shadow: 0 0 0 5px #FFFFFF; display: grid; place-items: center; pointer-events: none; }
.badge svg { width: 62%; height: 62%; }
.num { font-size: clamp(48px, min(9vw, 11vh), var(--fs-digit)); font-weight: 800; line-height: .95; }
.dots { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(6px, 1vmin, 10px); max-width: 86%; }
.dots i { width: clamp(12px, 2.4vmin, 20px); height: clamp(12px, 2.4vmin, 20px); border-radius: 50%; background: var(--roof); }

/* scène (objets à compter, suite de ballons, mot des syllabes) */
.scene { position: relative; min-height: 0; min-width: 0; border-radius: var(--r-stage); background: rgba(255, 255, 255, .72); display: flex; align-items: center; justify-content: center; padding: 12px 16px; }
.k-scene .play { flex-direction: column; }
.k-scene .scene { flex: 1.25 1 0; }
.k-scene .choices { flex: 1 1 0; }
.g-motifs .choices { grid-template-columns: repeat(var(--n), minmax(88px, 228px)); justify-content: center; }
.items, .suite { display: grid; grid-template-columns: repeat(var(--cols, 3), var(--s, 120px)); gap: 12px; justify-content: center; align-content: center; }
.item { width: var(--s); height: calc(var(--s) * 1.22); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.item > svg { width: 100%; height: var(--s); flex: none; }
.cdot { flex: none; margin-top: calc(var(--s) * .03); width: calc(var(--s) * .19); height: calc(var(--s) * .19); border-radius: 50%; background: var(--roof); box-shadow: 0 4px 0 #B83C80; transform: scale(0); }
.bead { width: var(--s); height: calc(var(--s) * 1.167); display: grid; place-items: center; }
.bead > svg { width: 100%; height: auto; }
.bead.slot { border: 4px dashed var(--lav-deep); border-radius: 28px; }
.bead.slot.filled { border-color: transparent; }
.bead .q { font-size: calc(var(--s) * .52); font-weight: 800; color: var(--lav-deep); line-height: 1; }

/* syllabes : le mot illustré, ses pastilles, le tambour */
.k-drum .play { align-items: center; }
.k-drum .scene { flex: 1 1 0; align-self: stretch; flex-direction: column; gap: clamp(12px, 2.4vmin, 22px); background: rgba(255, 255, 255, .78); }
.scene .word { height: min(62%, 238px); width: auto; aspect-ratio: 1; }
.sdots { display: flex; gap: clamp(12px, 2vmin, 18px); min-height: 46px; align-items: center; }
.sdots i { width: clamp(34px, 5.4vmin, 44px); height: clamp(34px, 5.4vmin, 44px); border-radius: 50%; background: var(--lav-pale); box-shadow: inset 0 0 0 3px #CFC3EE; }
.sdots i.on { background: var(--roof); box-shadow: 0 4px 0 #B83C80; }
.drum { position: relative; flex: none; height: min(100%, 410px); max-width: 52%; aspect-ratio: 1; border-radius: 50%; background: var(--lav-pale);
  box-shadow: 0 var(--drop, 10px) 0 #CFC3EE, 0 22px 36px rgba(110, 84, 204, .14); display: grid; place-items: center; transition: opacity .25s; }
.drum .skin { width: 82%; height: 82%; border-radius: 50%; background: #FFFFFF; border: 6px solid rgba(184, 164, 244, .45); display: grid; place-items: center; }
.drum .skin svg { width: 74%; height: 74%; }
.drumring { position: absolute; inset: 0; border-radius: 50%; border: 8px solid var(--lav); opacity: 0; pointer-events: none; }

/* téléphone en portrait : les cartes s'empilent, le tambour passe sous le mot */
@media (orientation: portrait) {
  .k-drum .play { flex-direction: column; }
  .k-drum .scene { width: 100%; }
  .drum { height: auto; width: min(76vw, 44vh, 410px); max-width: none; }
}
@media (orientation: portrait) and (max-width: 600px) {
  .k-cards .choices { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(var(--n), minmax(0, 1fr)); }
  .k-scene .choices { gap: 12px; }
  .g-count .choices[style], .g-count .choices { grid-template-columns: repeat(min(var(--n), 3), minmax(0, 1fr)); }
  .choice { border-radius: 32px; }
  .k-scene .scene { flex-grow: 1.5; }
}
/* 4 réponses pour compter sur téléphone : deux rangées */
@media (orientation: portrait) and (max-width: 600px) { .g-count[style*="--n:4"] .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); } }
/* téléphone en paysage : la bannière monte entre Maison et Écouter */
@media (orientation: landscape) and (max-height: 520px) {
  .game { grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "back ban rep" "play play play"; gap: 10px 16px; }
  .banner { align-self: start; gap: 3px; }
  .banner > div { width: 150px; }
  .say { font-size: 13px; } .say .uni { width: 24px; height: 24px; }
  .choice { border-radius: 30px; }
  .badge { width: 46px; height: 46px; right: -10px; top: -12px; }
}

/* ---------- effets (gerbe d'étoiles, ballon et arc qui volent) ---------- */
.fx { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 60; }
.fx.fly svg { width: 100%; height: 100%; display: block; }

/* ---------- fête et dodo ---------- */
.overlay { position: fixed; inset: 0; z-index: 50; }
.party, .dodo { background: linear-gradient(180deg, var(--sky) 0%, var(--sky2) 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.confetti { position: absolute; border-radius: 50%; }
.deco { position: absolute; width: 34px; }
.deco svg { width: 100%; height: auto; }
.pmain { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 2vh, 18px); padding: 16px; text-align: center; max-width: 920px; }
.pmain h1 { margin: 0; font-size: clamp(24px, 4.4vmin, var(--fs-title)); font-weight: 800; line-height: 1.15; text-wrap: balance; }
.party .uni.big { width: min(200px, 24vh); height: min(200px, 24vh); }
.sky { display: flex; align-items: flex-end; justify-content: center; }
.sky .rainbow { width: min(440px, 64vw, calc(30vh * 1.857)); height: auto; position: relative; z-index: 1; }
.sky .cloud { width: min(140px, 17vw, 17vh); height: auto; margin: 0 -5%; position: relative; z-index: 2; }
.go { height: var(--target); padding: 0 40px 0 44px; border-radius: 44px; background: var(--roof); color: #FFFFFF;
  box-shadow: 0 8px 0 #B83C80, 0 18px 30px rgba(224, 86, 157, .28); display: inline-flex; align-items: center; gap: 14px; font-size: 30px; font-weight: 800; }
.go .ico { width: 36px; height: 36px; }
.go:active { transform: translateY(5px); box-shadow: 0 3px 0 #B83C80; }
.dodo .moon { position: absolute; right: 8%; top: 7%; width: min(130px, 17vmin); }
.dodo .moon svg { width: 100%; height: auto; }
.dodo .deco { opacity: .8; } .dodo .deco.cloud { opacity: .9; width: min(150px, 18vmin) !important; }
.dodo .uni.big { width: min(230px, 30vh); height: min(230px, 30vh); }
.dodo .plink { background: #FFFFFF; box-shadow: 0 4px 0 #CFC3EE; }
@media (orientation: landscape) and (max-height: 520px) {
  .party .uni.big { width: 19vh; height: 19vh; }
  .sky .rainbow { width: calc(25vh * 1.857); }
  .pmain h1 { font-size: 22px; }
  .pmain { gap: 6px; padding: 8px; }
}

/* ---------- espace parents (cibles de 56 px au moins) ---------- */
.adult { background: #F6F2FF; color: var(--ink); }
.adult .small, .adult p { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ink-soft); margin: 0; }
.ghead { display: flex; align-items: center; gap: 12px; }
.ghead .ico { width: 34px; height: 34px; }
.ghead h1 { margin: 0; font-size: clamp(26px, 4vmin, 34px); font-weight: 800; line-height: 1.1; }
.abtn { min-height: 56px; padding: 0 24px 0 16px; border-radius: 28px; background: #F3EEFF; box-shadow: 0 4px 0 #DDD2EE;
  display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: var(--ink); text-decoration: none; }
.abtn.white { background: #FFFFFF; }
.abtn .ico { width: 28px; height: 28px; }
.abtn:active { transform: translateY(3px); box-shadow: 0 1px 0 #DDD2EE; }
/* la question */
.gate { display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto; }
.gcard { width: min(760px, 100%); border-radius: 36px; background: #FFFFFF; box-shadow: 0 6px 0 #E4DCF5, 0 24px 48px rgba(110, 84, 204, .12);
  padding: clamp(20px, 4vmin, 40px); display: flex; gap: clamp(20px, 4vmin, 40px); margin: auto; }
.gleft { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.gleft > p:first-of-type { font-size: 18px; }
.gq { font-size: clamp(44px, 7vmin, 60px); font-weight: 800; line-height: 1; letter-spacing: 1px; }
.gq.nope { animation: nope .45s ease-in-out; }
.gans { display: flex; gap: 12px; }
.gans span { width: 64px; height: 72px; border-radius: 20px; border: 3px dashed #CFC3EE; display: grid; place-items: center; font-size: 44px; font-weight: 800; }
.gans span.full { border: 0; background: #F3EEFF; box-shadow: inset 0 0 0 3px var(--lav); }
#gx { margin-top: auto; align-self: flex-start; }
.pad { flex: none; align-self: center; display: grid; grid-template-columns: repeat(3, 88px); grid-auto-rows: 88px; gap: 12px; }
.key { border-radius: 28px; background: #F3EEFF; box-shadow: 0 5px 0 #DDD2EE; font-size: 40px; font-weight: 800; color: var(--ink); display: grid; place-items: center; }
.key .ico { width: 40px; height: 40px; }
.key.ok { background: var(--mint-deep); box-shadow: 0 5px 0 #23796A; }
.key:active { transform: translateY(3px); box-shadow: 0 2px 0 #DDD2EE; }
.flip { display: flex; transform: rotate(180deg); }
.pad.off { opacity: .4; pointer-events: none; }
@media (max-width: 700px) and (orientation: portrait) {
  .gcard { flex-direction: column; align-items: stretch; padding: 20px; gap: 18px; }
  .gleft { gap: 10px; }
  #gx { margin-top: 4px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .gate { padding: 8px; }
  .gcard { padding: 16px 20px; gap: 18px; width: 100%; max-width: 820px; }
  .gleft { gap: 8px; } .gleft > p:first-of-type { font-size: 15px; }
  .gans span { height: 60px; font-size: 36px; }
  .pad { grid-template-columns: repeat(4, 88px); gap: 10px; }
}
/* les réglages */
.settings { overflow-y: auto; -webkit-overflow-scrolling: touch; user-select: text; -webkit-user-select: text; }
.sheet { max-width: 1024px; margin: 0 auto; padding: clamp(16px, 3vmin, 28px) clamp(16px, 4vw, 40px) 40px; display: flex; flex-direction: column; gap: 20px; }
.shead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pcard { background: #FFFFFF; border-radius: 28px; box-shadow: 0 4px 0 #E4DCF5; padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pcard h2 { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.2; }
.pcard h3 { margin: 6px 0 0; font-size: 17px; font-weight: 800; }
.h2row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.seg4, .seg3 { display: flex; gap: 8px; flex-wrap: wrap; }
.opt { flex: 1; min-height: 56px; min-width: 56px; padding: 0 12px; border-radius: 20px; background: #F3EEFF; box-shadow: 0 3px 0 #DDD2EE; font-size: 22px; font-weight: 800; color: var(--ink); }
.opt.sel { background: var(--lav-deep); box-shadow: 0 3px 0 var(--btn-edge); color: #FFFFFF; }
.seg3 .opt { font-size: 18px; }
.seg2 { display: flex; gap: 4px; padding: 4px; border-radius: 32px; background: #F3EEFF; }
.seg2 .opt { border-radius: 28px; background: transparent; box-shadow: none; font-size: 20px; }
.seg2 .opt.sel { background: var(--lav-deep); box-shadow: 0 3px 0 var(--btn-edge); }
.rcount { display: flex; align-items: center; gap: 14px; height: 56px; }
.rcount .ico { width: 56px; height: 56px; }
.rcount b { font-size: 56px; font-weight: 800; line-height: 1; }
.bar { height: 10px; border-radius: 5px; background: #EEE8FF; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 5px; background: var(--mint); }
.gcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.gcol h3 { display: flex; align-items: center; gap: 10px; height: 40px; margin: 0 0 10px; font-size: 20px; }
.gcol h3 .ico { width: 34px; height: 34px; }
.grow { width: 100%; min-height: 64px; margin-bottom: 10px; padding: 0 16px; border-radius: 22px; background: #F8F5FF; display: flex; align-items: center; gap: 12px; text-align: left; font-size: 17px; font-weight: 700; color: var(--ink); }
.grow.soon { opacity: .6; }
.gico { width: 38px; height: 38px; flex: none; display: flex; }
.gico svg { width: 100%; height: 100%; }
.gico.off { opacity: .5; }
.gname { flex: 1; min-width: 0; line-height: 1.1; }
.sw { position: relative; flex: none; width: 52px; height: 30px; border-radius: 15px; background: #DDD2EE; transition: background .15s; }
.sw i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; transition: left .15s; }
.sw.on { background: var(--lav-deep); } .sw.on i { left: 25px; }
.tag { display: inline-block; background: #EEE8FF; border-radius: 999px; padding: 1px 10px; font-size: 13px; font-weight: 700; color: var(--ink); }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.pcard label { font-weight: 700; font-size: 16px; display: block; margin-top: 8px; }
.pcard select { font: inherit; font-size: 16px; min-height: 56px; padding: 8px 10px; border-radius: 14px; border: 2px solid var(--lav); background: #FFFFFF; color: var(--ink); width: 100%; }
.pcard input[type=range] { accent-color: var(--lav-deep); width: 100%; height: 40px; }
.pcard details summary { min-height: 56px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.stat { display: grid; grid-template-columns: minmax(90px, 140px) auto auto; justify-content: start; gap: 6px 14px; align-items: center; font-size: 15px; }
.stat .lab { font-weight: 700; color: var(--ink); }
.hist { display: inline-flex; gap: 4px; }
.hist i { width: 12px; height: 12px; border-radius: 50%; background: #E4DDF3; }
.hist i.ok { background: var(--mint-deep); } .hist i.ko { background: var(--lav); }
@media (max-width: 860px) { .cards3, .gcols { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .choice.hint, .choice.nope, .gq.nope { animation: none; }
  .rbtn, .choice, .drum, .light, .sw, .sw i { transition: none; }
}