/* Interface du dino. Tout est dessiné sur une scène de 1080 × 1920 px,
   mise à l'échelle de la fenêtre par --s (posé par app.js). Maquettes :
   canvas Design « Visuels écrans CdP », rangée « Valvert · le dino-concierge ». */
:root {
  --green: #0F3B2E; --green-deep: #0A2B21; --green-mid: #1F6B50; --green-light: #2C8A63; --leaf: #17513D;
  --cream: #FFF6E3; --ink: #123B2E; --ink-soft: #3F6657;
  --orange: #FFB01F; --orange-deep: #B56F00; --brown: #3A2208; --red: #D8431F;
  --drop: rgba(6, 30, 23, 0.35);
  --display: "Baloo 2", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; touch-action: manipulation; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
body { background: var(--green); color: var(--cream); font-family: Nunito, system-ui, sans-serif; user-select: none; -webkit-user-select: none; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
button, input { font: inherit; border: 0; }
button { cursor: pointer; }

.frame { position: fixed; left: 50%; top: 50%; width: 1080px; height: 1920px; transform: translate(-50%, -50%) scale(var(--s, 0.5)); transform-origin: center; }
.back { overflow: visible; }
.glow { position: absolute; left: -260px; top: 560px; width: 1600px; height: 1600px; border-radius: 50%; background: radial-gradient(closest-side, var(--green-light) 0%, #1B5E46 45%, rgba(15, 59, 46, 0) 100%); transition: transform .5s; }
body[data-layout="menu"] .glow { transform: translate(-170px, -320px) scale(.85); }
body[data-layout="plan"] .glow { transform: translate(-330px, 420px) scale(.75); }
body[data-layout="quiz"] .glow { transform: translate(260px, -160px) scale(.85); }
body[data-layout="voix"] .glow, body[data-layout="liste"] .glow { transform: translate(0, -160px) scale(.85); }
.leaf { position: absolute; }
.ui { pointer-events: none; }
.ui > * { position: absolute; }
.ui button, .ui input { pointer-events: auto; }

/* En-tête */
.tag { left: 56px; top: 34px; display: flex; align-items: center; gap: 18px; }
/* Logos officiels, non retouchés, sur une pastille blanche (leurs fonds sont clairs). */
.logo { width: 128px; height: 128px; border-radius: 30px; background: #fff; overflow: hidden; box-shadow: 0 8px 0 var(--drop); display: flex; align-items: center; justify-content: center; }
.logo img { width: 118px; height: 118px; object-fit: contain; }
.pill:empty { display: none; }
.pill { padding: 10px 26px; border-radius: 40px; background: var(--orange); color: var(--brown); font-family: var(--display); font-size: 34px; font-weight: 800; letter-spacing: .02em; }
.tag small { font-size: 32px; font-weight: 700; color: rgba(255, 246, 227, .72); }

/* Ce que le visiteur a dit */
#said { right: 64px; top: 56px; max-width: 650px; display: none; align-items: center; gap: 16px; padding: 18px 34px; border-radius: 44px 44px 10px 44px; background: var(--green-mid); }
#said.on { display: flex; }
#said small { flex: none; font-size: 26px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 246, 227, .72); }
#said span { font-size: 36px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* La bulle */
#balloon { left: 64px; top: 190px; width: 952px; padding: 48px 60px 52px; border-radius: 64px; background: var(--cream); color: var(--ink); box-shadow: 0 20px 0 var(--drop); transition: top .35s, opacity .25s, transform .25s; }
#balloon.out { opacity: 0; transform: translateY(16px); }
#balloon svg { position: absolute; left: var(--tail, 600px); bottom: -104px; transition: left .35s; }
#bubble { font-family: var(--display); font-weight: 800; font-size: 92px; line-height: 1; letter-spacing: -.01em; text-wrap: balance; }
#bubble.xl { font-size: 112px; line-height: .98; }
#bubble.m { font-size: 68px; line-height: 1.04; }
#bubble.s { font-size: 52px; line-height: 1.08; font-weight: 700; }
#bubble em { font-style: normal; color: var(--red); }
#bubble .step { display: block; font-family: Nunito, sans-serif; font-size: 34px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 14px; }
body[data-layout="veille"] #balloon { --tail: 620px; }
body[data-layout="menu"] #balloon { top: 180px; --tail: 330px; }
body[data-layout="quiz"] #balloon { top: 270px; --tail: 660px; }
body[data-map="1"] #balloon { display: none; }

/* Le plan */
#card { left: 60px; top: 190px; width: 960px; border-radius: 56px; overflow: hidden; background: var(--cream); color: var(--ink); box-shadow: 0 20px 0 var(--drop); opacity: 0; transform: translateY(30px) scale(.97); transition: opacity .3s, transform .3s; visibility: hidden; }
body[data-map="1"] #card { opacity: 1; transform: none; visibility: visible; }
.mapimg { position: relative; width: 960px; height: 845px; }
.mapimg img, .mapimg svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pin { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; border: 8px solid var(--cream); }
/* Le trajet, en empreintes de dino qui apparaissent une à une */
.fp { fill: var(--ink); stroke: var(--cream); stroke-width: 2.2px; paint-order: stroke; opacity: 0; animation: step .25s ease-out forwards; }
@keyframes step { from { opacity: 0; transform: scale(1.8); } to { opacity: 1; transform: none; } }
#pinHere { width: 44px; height: 44px; background: var(--ink); }
#pinDest { width: 56px; height: 56px; background: var(--red); }
#pinDest::after { content: ""; position: absolute; inset: -30px; border-radius: 50%; background: rgba(216, 67, 31, .3); animation: ping 1.4s ease-out infinite; }
@keyframes ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
.lbl { position: absolute; white-space: nowrap; border-radius: 34px; font-weight: 800; }
#lblHere { transform: translate(-50%, 34px); padding: 6px 22px; background: var(--cream); color: var(--ink); font-size: 30px; }
#lblDest { transform: translate(-50%, -128px); padding: 8px 26px; background: var(--ink); color: var(--cream); font-family: var(--display); font-size: 38px; line-height: 1.2; }
#lblDest.right { transform: translate(-90%, -128px); }
#lblDest.left { transform: translate(-10%, -128px); }
.info { padding: 30px 40px 34px; display: flex; flex-direction: column; gap: 10px; min-height: 230px; }
#cardSub { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#cardTitle { margin: 0; font-family: var(--display); font-size: 64px; font-weight: 800; line-height: 1; }
#cardSub { margin: 0; font-size: 38px; font-weight: 700; line-height: 1.25; color: var(--ink-soft); }

/* Quiz */
#progress { left: 64px; top: 176px; width: 952px; display: none; align-items: center; gap: 24px; }
#progress b { font-size: 38px; font-weight: 800; }
#progress div { flex: 1; display: flex; gap: 12px; }
#progress i { flex: 1; height: 18px; border-radius: 9px; background: rgba(255, 246, 227, .25); }
#progress i.done { background: var(--orange); }
#progress i.now { background: var(--cream); }
#score { left: 64px; top: 900px; width: 420px; display: none; flex-direction: column; gap: 14px; }
#score small { font-size: 34px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 246, 227, .72); }
#score b { font-family: var(--display); font-size: 150px; font-weight: 800; line-height: .9; color: var(--orange); }
#score b span { font-size: 64px; color: var(--cream); }
#score p { margin: 0; font-size: 36px; font-weight: 700; line-height: 1.25; color: rgba(255, 246, 227, .85); }
body[data-layout="quiz"] #progress { display: flex; }
body[data-layout="quiz"] #score { display: flex; }

/* Le micro de l'accueil */
#mic { left: 660px; top: 690px; width: 360px; display: none; flex-direction: column; align-items: center; gap: 22px; }
#mic button { width: 280px; height: 280px; border-radius: 50%; background: var(--orange); display: flex; align-items: center; justify-content: center; box-shadow: 0 16px 0 var(--orange-deep), 0 0 0 22px rgba(255, 176, 31, .22); }
#mic button:active { transform: translateY(8px); box-shadow: 0 8px 0 var(--orange-deep), 0 0 0 22px rgba(255, 176, 31, .22); }
#mic b { margin-top: 12px; font-family: var(--display); font-size: 68px; font-weight: 800; line-height: 1; }
#mic span { font-size: 34px; font-weight: 700; text-align: center; color: rgba(255, 246, 227, .78); }
#orTouch { left: 64px; top: 1232px; display: none; font-size: 34px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 246, 227, .72); }
body[data-layout="menu"].voice #mic { display: flex; }
body[data-layout="menu"].voice #orTouch { display: block; }

/* Bas d'écran */
#dock { display: flex; }
#dock.hint { left: 0; right: 0; bottom: 72px; justify-content: center; }
.hintpill { display: flex; align-items: center; gap: 20px; padding: 22px 44px; border-radius: 60px; background: var(--cream); color: var(--ink); box-shadow: 0 10px 0 var(--drop); font-family: var(--display); font-size: 46px; font-weight: 800; line-height: 1; }

#dock.cards { left: 64px; top: 1296px; width: 952px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.door { height: 254px; padding: 26px 30px; border-radius: 44px; background: var(--cream); color: var(--ink); display: flex; flex-direction: column; justify-content: space-between; text-align: left; box-shadow: 0 12px 0 var(--drop); }
.door:active, .chip:active, .ans:active { transform: translateY(6px); box-shadow: 0 4px 0 var(--drop); }
.door i { flex: none; width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.door b { display: block; font-family: var(--display); font-size: 46px; font-weight: 800; line-height: 1; }
.door small { display: block; margin-top: 2px; font-size: 30px; font-weight: 700; color: var(--ink-soft); }

#dock.chips { left: 64px; right: 64px; bottom: 72px; flex-wrap: wrap; justify-content: center; gap: 22px; }
#dock.side { left: 520px; top: 1500px; width: 496px; flex-direction: column; gap: 24px; }
.chip { min-height: 116px; padding: 0 48px; border-radius: 60px; background: var(--cream); color: var(--ink); font-family: var(--display); font-size: 46px; font-weight: 800; line-height: 1.05; box-shadow: 0 10px 0 var(--drop); }
.chip.main { background: var(--orange); color: var(--brown); box-shadow: 0 10px 0 var(--orange-deep); }
.chip.back { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 5px var(--cream); }
#dock.many .chip { min-height: 92px; padding: 0 34px; font-size: 36px; }
#dock.chips input { flex: 0 0 100%; height: 116px; padding: 0 48px; border-radius: 60px; background: #fff; color: var(--ink); font-size: 42px; font-weight: 700; outline: 5px solid var(--orange); cursor: text; }

#dock.answers { left: 64px; top: 1400px; width: 952px; flex-direction: column; gap: 26px; }
.ans { height: 138px; padding: 0 44px; border-radius: 69px; background: var(--cream); color: var(--ink); display: flex; align-items: center; gap: 28px; text-align: left; box-shadow: 0 10px 0 var(--drop); font-family: var(--display); font-size: 58px; font-weight: 800; line-height: 1; }
.ans i { flex: none; width: 78px; height: 78px; border-radius: 50%; background: var(--ink); color: var(--cream); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 44px; }
.ans.good { background: var(--green-light); color: #fff; }
.ans.bad { background: var(--red); color: #fff; }
.ans.dim { opacity: .45; }

#dock.listen { left: 64px; right: 64px; bottom: 72px; }
body[data-map="1"] #dock.listen { left: 440px; }
.bar { flex: 1; height: 156px; padding: 0 28px 0 40px; border-radius: 78px; background: var(--green-deep); display: flex; align-items: center; gap: 28px; box-shadow: inset 0 0 0 4px var(--orange); }
.bar b { font-family: var(--display); font-size: 52px; font-weight: 800; line-height: 1; white-space: nowrap; }
body[data-map="1"] .bar b { display: none; }
.bar .wave { flex: 1; height: 90px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.bar .wave i { width: 12px; height: 16px; border-radius: 6px; background: var(--orange); }
.bar button { flex: none; width: 108px; height: 108px; border-radius: 50%; background: var(--cream); display: flex; align-items: center; justify-content: center; }

.load { position: fixed; inset: 0; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 3vh; color: var(--cream); pointer-events: none; }
.err { color: #ffb4a1; padding: 0 8vw; text-align: center; }

/* Fiche espèce : même carte que le plan */
.specimg { display: none; width: 960px; height: 440px; overflow: hidden; }
.specimg svg { display: block; width: 960px; height: 440px; }
body[data-card="species"] .mapimg { display: none; }
body[data-card="species"] .specimg { display: block; }
.walker { animation: walkin 1.5s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes walkin { from { transform: translateX(60%); opacity: 0; } 30% { opacity: 1; } to { transform: none; } }
#cardMeta { display: flex; flex-wrap: wrap; gap: 12px; }
#cardMeta:empty { display: none; }
#cardMeta span { padding: 5px 20px; border-radius: 30px; background: var(--ink); color: var(--cream); font-size: 28px; font-weight: 800; white-space: nowrap; }
#cardMeta span.alt { background: #E4EDD6; color: var(--ink); }

/* Effets plein écran, derrière le dino */
#fx { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
#fx > * { position: absolute; opacity: 0; }
#fx .sky { inset: 0; background: linear-gradient(#1B0B1F, #5A1A12 70%, #A8421A); }
#fx .meteor { right: -10%; top: -12%; width: 46vh; height: 5vh; border-radius: 3vh; background: linear-gradient(90deg, #FFF6E3, #FFB01F 30%, rgba(216, 67, 31, 0)); transform-origin: left center; transform: rotate(148deg); }
#fx .flash { left: -30vh; bottom: -30vh; width: 120vh; height: 120vh; border-radius: 50%; background: radial-gradient(closest-side, #FFF6E3, #FFB01F 35%, rgba(255, 176, 31, 0)); }
#fx.asteroide .sky { animation: sky 5.5s ease both; }
#fx.asteroide .meteor { animation: meteor 1.5s .9s cubic-bezier(.5, 0, .9, .6) both; }
#fx.asteroide .flash { animation: flash 1.3s 2.3s ease-out both; }
@keyframes sky { 0% { opacity: 0; } 15%, 75% { opacity: .92; } 100% { opacity: 0; } }
@keyframes meteor { from { opacity: 1; translate: 0 0; } to { opacity: 1; translate: -115vw 82vh; } }
@keyframes flash { 0% { opacity: 0; transform: scale(.2); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } }
#confetti { inset: 0; overflow: hidden; }
#confetti i { position: absolute; top: -60px; width: 34px; height: 20px; border-radius: 50% 4px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(2050px) rotate(720deg); } }