:root {
  --c-bg: #FFF8F0;
  --c-surface: #FFFFFF;
  --c-surface-alt: #FFF1E3;
  --c-text: #2B2118;
  --c-text-muted: #6B5D50;
  --c-on-accent: #FFFFFF;
  --c-primary: #E4572E;
  --c-primary-dark: #B23D1C;
  --c-success: #2E7D4F;
  --c-warning: #B5761E;
  --c-retry: #4A6FA5;
  --c-sky: #DDF4FF;
  --c-sky-deep: #8DD8F8;
  --c-sea: #2F9FC3;
  --c-sea-deep: #176582;
  --c-sand: #FFE8B8;
  --c-treasure: #F2B544;
  --c-treasure-dark: #7A4B00;
  --c-leaf: #DCEFCB;
  --c-leaf-dark: #276447;
  --c-lavender: #EEE6FF;
  --c-royal: #7049A8;
  --c-night: #24344D;
  --c-cloud: #F7FCFF;
  --c-border: #E7D8CA;
  --c-overlay: #3A2E24;
  --c-parent-bg: #F5F6F8;
  --c-parent-surface: #FFFFFF;
  --c-parent-border: #DCE2EA;
  --c-parent-text: #1C2430;
  --c-parent-accent: #2F5D8C;
  --c-parent-accent-soft: #E7F0F8;
  --c-parent-positive: #23683F;
  --c-parent-danger: #A12E35;
  --c-parent-danger-soft: #FCEBED;
  --fs-xs: 14px;
  --fs-sm: 16px;
  --fs-base: 18px;
  --fs-lg: 22px;
  --fs-xl: 28px;
  --fs-xxl: 36px;
  --fs-display: 48px;
  --fw-regular: 400;
  --fw-medium: 600;
  --fw-bold: 700;
  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-loose: 1.7;
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-xxl: 48px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --touch-min: 48px;
  --touch-comfortable: 64px;
  --touch-large: 88px;
  --t-instant: 0ms;
  --t-answering: 0ms;
  --t-quick: 150ms;
  --t-normal: 250ms;
  --t-celebrate: 600ms;
  --el-none: none;
  --el-card: 0 2px 8px rgba(43,33,24,0.10);
  --el-raised: 0 6px 18px rgba(43,33,24,0.14);
  --font-family: 'Andika', 'Verdana', system-ui, sans-serif;
}

/* Plage des coquillages : objets immobiles pendant l'ecoute et la reponse. */
.el-shell-game{min-height:100vh;max-width:1100px;margin:0 auto;padding:var(--sp-lg) clamp(16px,5vw,72px) var(--sp-lg);background:radial-gradient(ellipse at 50% 360px,var(--c-surface) 0,transparent 45%),linear-gradient(180deg,var(--c-sky) 0 30%,var(--c-sand) 52%,var(--c-bg) 100%);color:var(--c-text)}
.el-shell-top{display:flex;align-items:center;gap:var(--sp-md);justify-content:space-between}
.el-shell-top .el-icon-btn{width:var(--touch-min);height:var(--touch-min);flex-shrink:0;border-color:var(--c-surface)}
.el-shell-identity{display:grid;gap:2px;flex:1;font-size:var(--fs-base)}
.el-shell-identity .el-eyebrow{margin:0;font-size:var(--fs-xs);color:var(--c-sea-deep)}
.el-shell-heading{text-align:center;margin:var(--sp-lg) 0 0}
.el-shell-heading h1{font-size:clamp(26px,4.5vw,38px);margin-bottom:var(--sp-sm)}
.el-shell-heading p{font-size:var(--fs-base);margin-bottom:var(--sp-sm)}
.el-shell-voyage{display:flex;align-items:center;justify-content:center;gap:clamp(20px,5vw,80px);max-width:640px;margin:0 auto}
.el-shell-bottle{display:grid;justify-items:center;flex-shrink:0;min-width:150px;min-height:var(--touch-large);padding:var(--sp-sm);background:var(--c-cloud);border:2px solid var(--c-sea-deep);border-radius:var(--r-lg);color:var(--c-sea-deep);font-size:var(--fs-sm);font-weight:var(--fw-bold);box-shadow:0 4px 0 var(--c-sea-deep);cursor:pointer}
.el-shell-bottle img{width:72px;height:84px}
.el-shell-route{position:relative;display:grid;justify-items:center;gap:var(--sp-xs);flex:1;max-width:260px}
.el-shell-route:before{content:"";position:absolute;top:50%;left:0;right:0;border-top:3px dashed var(--c-sea-deep);opacity:.4}
.el-shell-boat{position:relative;width:175px;height:127px;object-fit:contain}
.el-shell-pearls{display:flex;gap:5px;justify-content:center;padding:6px 10px;background:var(--c-cloud);border-radius:var(--r-pill)}
.el-shell-pearl{width:20px;height:20px;border:1px dashed var(--c-treasure-dark);border-radius:50%;display:inline-flex}
.el-shell-pearl[data-earned="true"]{border:0}
.el-shell-pearl img{width:100%;height:100%}
.el-shell-counter{font-size:var(--fs-sm);color:var(--c-sea-deep)}
.el-shell-guide{text-align:center;font-size:var(--fs-base);margin:var(--sp-md) 0;color:var(--c-treasure-dark)}
.el-shell-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-md);max-width:640px;margin:0 auto}
.el-shell-options--3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:800px}
.el-shell-card{border-radius:var(--r-lg);background:var(--c-bg);box-shadow:0 4px 0 var(--c-border);border:2px solid var(--c-surface);overflow:visible}
.el-shell-choose{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 var(--sp-sm);width:100%;padding:var(--sp-sm) var(--sp-md);min-height:var(--touch-large);background:transparent;border:3px solid transparent;border-radius:var(--r-lg);color:var(--c-text);cursor:pointer}
.el-shell-choose img{grid-column:1/-1;width:100%;height:100px;object-fit:contain}
.el-shell-word{font-size:var(--fs-xl);font-weight:var(--fw-bold);text-align:center;grid-column:1/-1;overflow-wrap:anywhere}
.el-shell-mark{grid-column:1/-1;font-size:var(--fs-sm);color:var(--c-text-muted)}
.el-shell-choose[aria-pressed="true"]{background:var(--c-surface);border-color:var(--c-sea-deep)}
.el-shell-choose[aria-pressed="true"] .el-shell-mark{color:var(--c-sea-deep);font-weight:var(--fw-bold)}
.el-shell-listen{min-height:var(--touch-min);min-width:var(--touch-min);padding:var(--sp-sm) var(--sp-md);border:2px solid var(--c-sea-deep);background:var(--c-cloud);border-radius:var(--r-pill);color:var(--c-sea-deep);font-size:var(--fs-base);font-weight:var(--fw-bold);cursor:pointer}
.el-shell-card>.el-shell-listen{display:block;width:calc(100% - 24px);margin:var(--sp-sm) auto 12px}
.el-shell-game button:focus-visible{outline:4px solid var(--c-sea-deep);outline-offset:3px}
.el-shell-game button:disabled{cursor:default}
.el-shell-game[data-listening="true"] .el-shell-bottle{box-shadow:0 0 0 5px var(--c-surface);border-style:dashed}
.el-shell-card[data-resting="true"]{opacity:.45}
.el-shell-card[data-hint="true"]{outline:4px solid var(--c-treasure);outline-offset:2px}
.el-shell-actions{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-md);max-width:640px;margin:var(--sp-lg) auto 0;padding:var(--sp-sm);border-radius:var(--r-lg);background:var(--c-surface)}
.el-shell-selection{font-size:var(--fs-base);padding-left:var(--sp-sm)}
.el-shell-game .el-shell-validate{min-width:150px;background:var(--c-primary-dark)}
.el-shell-live{min-height:28px;text-align:center;font-size:var(--fs-base);margin:var(--sp-sm) 0 0}
.el-shell-live .el-btn{display:flex;margin:var(--sp-md) auto 0}
.el-shell-skip{display:block;min-height:var(--touch-min);margin:0 auto;background:transparent;border:0;color:var(--c-sea-deep);font-size:var(--fs-sm);text-decoration:underline;cursor:pointer}
.el-shell-cue{max-width:640px;margin:var(--sp-md) auto 0;padding:var(--sp-md);border-radius:var(--r-lg);background:var(--c-sky);text-align:center}
.el-shell-cue p{font-size:var(--fs-base);margin-bottom:var(--sp-sm)}
.el-shell-cue button{margin:var(--sp-xs)}
.el-shell-choose .el-shell-found-pearl{position:absolute;width:64px;height:64px;left:calc(50% - 32px);top:20px;animation:el-shell-pearl-found 1.2s ease-out both}
.el-shell-game[data-success="true"] .el-shell-boat{animation:el-shell-set-sail 1.2s ease-in-out both}
.el-shell-end{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-md);text-align:center}
.el-shell-end>img{width:170px;height:140px}
.el-shell-end p,.el-shell-end h1{margin:0}
.el-shell-end>.el-btn{width:min(440px,100%)}
@keyframes el-shell-pearl-found{0%{transform:scale(.2);opacity:0}35%{transform:scale(1);opacity:1}100%{transform:translateY(-120px) scale(.55);opacity:0}}
@keyframes el-shell-set-sail{0%{transform:translateX(0)}70%{transform:translateX(22px) rotate(-3deg)}100%{transform:translateX(22px)}}
@media(min-width:601px){
  .el-shell-game{padding-top:var(--sp-md)}
  .el-shell-heading{margin-top:var(--sp-md)}
  .el-shell-heading h1{font-size:34px}
  .el-shell-heading p{font-size:var(--fs-sm)}
  .el-shell-boat{width:145px;height:96px}
  .el-shell-bottle img{width:54px;height:62px}
  .el-shell-guide{margin:var(--sp-sm) 0}
  .el-shell-choose img{height:64px}
  .el-shell-options--4{grid-template-columns:repeat(4,minmax(0,1fr));max-width:920px;gap:var(--sp-sm)}
  .el-shell-options--4 .el-shell-word{font-size:var(--fs-lg)}
  .el-shell-options--4 .el-shell-choose{padding:var(--sp-sm)}
  .el-shell-actions{margin-top:var(--sp-md)}
}
@media(max-width:600px){
  .el-shell-game{padding:var(--sp-md) var(--sp-md) var(--sp-sm)}
  .el-shell-heading{margin-top:var(--sp-md)}
  .el-shell-heading h1{font-size:var(--fs-xl)}
  .el-shell-heading p{font-size:var(--fs-sm)}
  .el-shell-identity{font-size:var(--fs-sm)}
  .el-shell-voyage{gap:var(--sp-md)}
  .el-shell-bottle{min-width:145px;padding:var(--sp-xs)}
  .el-shell-bottle img{height:62px;width:54px}
  .el-shell-boat{width:130px;height:86px}
  .el-shell-pearls{gap:3px;padding:5px}
  .el-shell-pearl{width:16px;height:16px}
  .el-shell-guide{font-size:var(--fs-sm);margin:var(--sp-sm) 0}
  .el-shell-options,.el-shell-options--3{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-sm)}
  .el-shell-options--3>.el-shell-card:last-child{grid-column:1/-1;width:calc(50% - 4px);justify-self:center}
  .el-shell-choose{padding:var(--sp-xs)}
  .el-shell-choose img{height:58px}
  .el-shell-word{font-size:var(--fs-lg)}
  .el-shell-mark{font-size:var(--fs-xs)}
  .el-shell-card>.el-shell-listen{margin:4px auto 8px;font-size:var(--fs-sm)}
  .el-shell-actions{margin-top:var(--sp-md);gap:var(--sp-sm)}
  .el-shell-selection{font-size:var(--fs-sm)}
  .el-shell-game .el-shell-validate{min-width:115px;min-height:var(--touch-min);padding:var(--sp-sm) var(--sp-md)}
  .el-shell-live{font-size:var(--fs-sm);min-height:24px}
}
@media(prefers-reduced-motion:reduce){.el-shell-game[data-success="true"] .el-shell-boat,.el-shell-choose .el-shell-found-pearl{animation:none}}

/* Base et composants — toutes les couleurs derivent des tokens. */
*,*::before,*::after{box-sizing:border-box}
button,input,select{font:inherit}
button{-webkit-tap-highlight-color:transparent}
body{overflow-x:hidden}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(var(--fs-xl),6vw,var(--fs-display));line-height:var(--lh-tight);letter-spacing:-.025em}
h2{font-size:var(--fs-xl);line-height:var(--lh-tight)}
h3{font-size:var(--fs-lg)}
.el-app-shell{min-height:100vh}
.el-muted{color:var(--c-text-muted);font-size:var(--fs-sm)}
.el-eyebrow{margin-bottom:var(--sp-sm);color:var(--c-primary-dark);font-size:var(--fs-sm);font-weight:var(--fw-bold);letter-spacing:.08em;text-transform:uppercase}
.el-lead{font-size:var(--fs-lg);line-height:var(--lh-normal);color:var(--c-text-muted)}

.el-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-sm);min-height:var(--touch-comfortable);min-width:var(--touch-min);padding:var(--sp-md) var(--sp-lg);border:3px solid transparent;border-radius:var(--r-lg);background:var(--c-primary);color:var(--c-on-accent);font:var(--fw-bold) var(--fs-lg)/var(--lh-tight) var(--font-family);cursor:pointer;transition:transform var(--t-quick),background var(--t-quick)}
.el-btn:focus-visible{outline:4px solid var(--c-parent-accent);outline-offset:3px}
.el-btn:active{transform:scale(.97);background:var(--c-primary-dark)}
.el-btn[disabled]{opacity:.45;cursor:not-allowed}
.el-btn--secondary{background:var(--c-surface);color:var(--c-primary-dark);border-color:var(--c-primary)}
.el-btn--secondary:active,.el-btn--quiet:active{background:var(--c-surface-alt)}
.el-btn--quiet{min-height:var(--touch-min);padding:var(--sp-sm) var(--sp-md);background:var(--c-surface);color:var(--c-text);border-color:var(--c-border);font-size:var(--fs-sm)}
.el-btn--parent{background:var(--c-parent-accent);color:var(--c-on-accent)}
.el-link-btn{min-height:var(--touch-min);border:0;background:transparent;color:var(--c-parent-accent);font-weight:var(--fw-bold);cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.el-icon-btn{display:grid;place-items:center;width:var(--touch-comfortable);height:var(--touch-comfortable);border:2px solid var(--c-border);border-radius:var(--r-pill);background:var(--c-surface);color:var(--c-text);font-size:var(--fs-xl);font-weight:var(--fw-bold);cursor:pointer}
.el-icon-btn:focus-visible,.el-link-btn:focus-visible{outline:4px solid var(--c-parent-accent);outline-offset:3px}

.el-option{display:flex;align-items:center;gap:var(--sp-md);min-height:var(--touch-large);padding:var(--sp-md) var(--sp-lg);border:3px solid var(--c-surface-alt);border-radius:var(--r-md);background:var(--c-surface);color:var(--c-text);font:var(--fw-medium) var(--fs-xl)/var(--lh-normal) var(--font-family);cursor:pointer;transition:border-color var(--t-answering),background var(--t-answering)}
.el-option[aria-pressed="true"]{border-color:var(--c-primary);background:var(--c-surface-alt);box-shadow:var(--el-card)}
.el-option:focus-visible{outline:4px solid var(--c-parent-accent);outline-offset:3px}
.el-option[data-state="success"]{border-color:var(--c-success)}
.el-option[data-state="retry"]{border-color:var(--c-retry)}
.el-option[disabled]{opacity:.5}
.el-card{padding:var(--sp-lg);border-radius:var(--r-lg);background:var(--c-surface);box-shadow:var(--el-card)}

/* Accueil et profils. */
.el-welcome{min-height:100vh;padding:clamp(var(--sp-lg),6vw,var(--sp-xxl));display:grid;align-content:center;justify-items:center;background:radial-gradient(circle at 15% 15%,var(--c-sky) 0 18%,transparent 19%),radial-gradient(circle at 90% 5%,var(--c-sand) 0 16%,transparent 17%),linear-gradient(180deg,var(--c-cloud),var(--c-bg));text-align:center}
.el-welcome__brand{max-width:720px}
.el-brand-mark{display:grid;place-items:center;width:88px;height:88px;margin:0 auto var(--sp-lg);border-radius:28px;background:var(--c-primary);color:var(--c-on-accent);font-size:var(--fs-xxl);font-weight:var(--fw-bold);box-shadow:var(--el-raised);transform:rotate(-4deg)}
.el-brand-mark--small{width:44px;height:44px;margin:0;border-radius:14px;font-size:var(--fs-base)}
.el-profile-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-lg);margin:var(--sp-xl) 0;width:min(760px,100%)}
.el-profile-card{display:flex;flex-direction:column;align-items:center;gap:var(--sp-sm);min-width:170px;min-height:210px;padding:var(--sp-lg);border:3px solid transparent;border-radius:var(--r-lg);background:var(--c-surface);color:var(--c-text);box-shadow:var(--el-card);cursor:pointer}
.el-profile-card:hover,.el-profile-card:focus-visible{border-color:var(--c-primary);transform:translateY(-3px);outline:0}
.el-avatar{display:grid;place-items:center;width:92px;height:92px;border-radius:var(--r-pill);background:var(--c-sky);font-size:var(--fs-display)}
.el-avatar--small{width:56px;height:56px;font-size:var(--fs-xl)}
.el-welcome__actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--sp-md)}

/* Carte enfant. */
.el-map-page{min-height:100vh;padding-top:env(safe-area-inset-top);padding-right:env(safe-area-inset-right);padding-bottom:calc(var(--sp-xxl) + env(safe-area-inset-bottom));padding-left:env(safe-area-inset-left);background:linear-gradient(180deg,var(--c-sky) 0 320px,var(--c-bg) 640px)}
.el-child-topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-md);width:min(1040px,calc(100% - 2 * var(--sp-lg)));margin:0 auto;padding:var(--sp-lg) 0}
.el-child-profile,.el-parent-entry{display:flex;align-items:center;gap:var(--sp-sm);min-height:var(--touch-min);border:2px solid var(--c-border);border-radius:var(--r-pill);background:var(--c-surface);color:var(--c-text);padding:var(--sp-sm) var(--sp-md);cursor:pointer;box-shadow:var(--el-card)}
.el-child-top-actions{display:flex;align-items:center;gap:var(--sp-sm)}
.el-music-toggle{display:grid;place-items:center;width:var(--touch-min);height:var(--touch-min);flex:0 0 var(--touch-min);padding:0;border:2px solid var(--c-sea-deep);border-radius:var(--r-pill);background:var(--c-cloud);color:var(--c-sea-deep);font-size:var(--fs-lg);font-weight:var(--fw-bold);cursor:pointer;box-shadow:var(--el-card)}
.el-music-toggle[aria-pressed="true"]{border-color:var(--c-border);background:var(--c-surface-alt);color:var(--c-text-muted)}
.el-music-toggle:focus-visible{outline:4px solid var(--c-parent-accent);outline-offset:3px}
.el-world-complete{position:relative}
.el-world-complete>.el-music-toggle{position:absolute;top:var(--sp-md);right:var(--sp-md);z-index:3}
.el-parent-entry{font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.el-map-hero{width:min(840px,calc(100% - 2 * var(--sp-lg)));margin:var(--sp-lg) auto var(--sp-xl);text-align:center}
.el-progress{height:18px;overflow:hidden;border:3px solid var(--c-surface);border-radius:var(--r-pill);background:var(--c-surface-alt);box-shadow:var(--el-card)}
.el-progress__fill{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--c-primary),var(--c-treasure));transition:width var(--t-normal)}
.el-progress-label{margin-top:var(--sp-sm);font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.el-adventure-map{margin:var(--sp-xl) 0 var(--sp-md);padding:var(--sp-lg) var(--sp-md) var(--sp-sm);border:3px solid var(--c-surface);border-radius:32px;background:linear-gradient(145deg,var(--c-sand),var(--c-surface));box-shadow:var(--el-raised);overflow:hidden}
.el-adventure-map__route{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-sm);min-width:670px;padding:var(--sp-sm) 0 var(--sp-md)}
.el-adventure-map__route::before{content:"";position:absolute;left:5%;right:5%;top:38px;border-top:5px dashed var(--c-treasure-dark);opacity:.55}
.el-adventure-map__stop{position:relative;z-index:2;display:grid;justify-items:center;gap:var(--sp-xs);width:82px;color:var(--c-text-muted);font-weight:var(--fw-bold)}
.el-adventure-map__stop:nth-child(even){transform:translateY(18px)}
.el-adventure-map__marker{display:grid;place-items:center;width:64px;height:64px;border:4px solid var(--c-border);border-radius:var(--r-pill);background:var(--c-surface);font-size:var(--fs-xl);box-shadow:var(--el-card)}
.el-adventure-map__stop--complete .el-adventure-map__marker{border-color:var(--c-success);background:var(--c-leaf);color:var(--c-leaf-dark)}
.el-adventure-map__stop--current .el-adventure-map__marker{border-color:var(--c-primary);box-shadow:0 0 0 7px var(--c-surface-alt),var(--el-card);animation:el-map-pulse 1.8s ease-in-out infinite}
.el-adventure-map__stop--treasure .el-adventure-map__marker{border-color:var(--c-treasure);background:var(--c-sand)}
.el-adventure-map__traveller{position:absolute;z-index:3;top:-9px;font-size:var(--fs-xl);filter:drop-shadow(0 4px 3px var(--c-border));transform:translateX(-50%);transition:left var(--t-celebrate)}
.el-journey{position:relative;display:grid;gap:var(--sp-lg);width:min(940px,calc(100% - 2 * var(--sp-lg)));margin:0 auto}
.el-journey::before{content:"";position:absolute;left:50%;top:50px;bottom:140px;width:8px;border-radius:var(--r-pill);background:repeating-linear-gradient(180deg,var(--c-treasure) 0 20px,transparent 20px 34px);transform:translateX(-50%);opacity:.65}
.el-world{position:relative;z-index:1;display:grid;grid-template-columns:210px 1fr;align-items:center;gap:var(--sp-lg);width:min(760px,92%);min-height:230px;padding:var(--sp-lg);border:3px solid var(--c-surface);border-radius:32px;background:var(--c-surface);box-shadow:var(--el-raised)}
.el-world:nth-child(even){justify-self:end;grid-template-columns:1fr 210px}
.el-world:nth-child(even) .el-world__art{order:2}
.el-world--recommended{border-color:var(--c-treasure);box-shadow:0 0 0 7px var(--c-sand),var(--el-raised)}
.el-world--complete{border-color:var(--c-success)}
.el-world__art{position:relative;display:grid;place-items:center;height:180px;border-radius:24px;background:linear-gradient(145deg,var(--c-sky),var(--c-cloud));overflow:hidden}
.el-world--sun .el-world__art,.el-world--workshop .el-world__art{background:linear-gradient(145deg,var(--c-sand),var(--c-surface-alt))}
.el-world--forest .el-world__art,.el-world--valley .el-world__art{background:linear-gradient(145deg,var(--c-leaf),var(--c-cloud))}
.el-world--city .el-world__art,.el-world--royal .el-world__art{background:linear-gradient(145deg,var(--c-lavender),var(--c-cloud))}
.el-world--cave .el-world__art{background:linear-gradient(145deg,var(--c-night),var(--c-sea-deep))}
.el-world__icon{font-size:78px;filter:drop-shadow(0 8px 6px var(--c-border))}
.el-world__sparkle{position:absolute;right:var(--sp-lg);top:var(--sp-md);font-size:var(--fs-xxl);color:var(--c-treasure-dark);animation:el-float 1.8s ease-in-out infinite}
.el-world__kicker{margin-bottom:var(--sp-xs);font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.07em;text-transform:uppercase;color:var(--c-primary-dark)}
.el-world__body h2{margin-bottom:var(--sp-sm)}
.el-world__goal{color:var(--c-text-muted)}
.el-world__meter{display:inline-block;vertical-align:middle;width:min(180px,70%);height:10px;overflow:hidden;border-radius:var(--r-pill);background:var(--c-surface-alt)}
.el-world__meter span{display:block;height:100%;background:var(--c-success)}
.el-world__percent{margin-left:var(--sp-sm);font-size:var(--fs-xs);font-weight:var(--fw-bold)}
.el-world__games{display:inline-flex;margin-left:var(--sp-sm);padding:var(--sp-xs) var(--sp-sm);border-radius:var(--r-pill);background:var(--c-surface-alt);color:var(--c-primary-dark);font-size:var(--fs-xs);font-weight:var(--fw-bold)}
.el-world__body .el-btn{display:flex;margin-top:var(--sp-md);width:100%}
.el-world--locked{opacity:.72;filter:saturate(.5)}
.el-world--locked .el-world__badge::after{content:"bientôt"}
.el-treasure{position:relative;z-index:1;justify-self:center;width:min(460px,92%);padding:var(--sp-xl);border:4px solid var(--c-treasure);border-radius:32px;background:linear-gradient(145deg,var(--c-sand),var(--c-surface));text-align:center;box-shadow:var(--el-raised)}
.el-treasure__book{font-size:72px}

/* Menu des jeux et recompense de fin de monde. */
.el-world-hub,.el-world-complete{min-height:100vh;padding:calc(var(--sp-lg) + env(safe-area-inset-top)) calc(var(--sp-lg) + env(safe-area-inset-right)) calc(var(--sp-lg) + env(safe-area-inset-bottom)) calc(var(--sp-lg) + env(safe-area-inset-left));background:linear-gradient(180deg,var(--c-sky),var(--c-bg))}
.el-world-hub .el-mission__top{width:min(1040px,100%);margin-bottom:var(--sp-xl)}
.el-world-hub__count{padding:var(--sp-sm) var(--sp-md);border-radius:var(--r-pill);background:var(--c-surface);font-size:var(--fs-sm);font-weight:var(--fw-bold);box-shadow:var(--el-card)}
.el-world-hub__intro{width:min(980px,100%);margin:0 auto var(--sp-lg);text-align:center}
.el-world-hub__intro h1{margin-bottom:var(--sp-xs)}
.el-world-route-map{width:min(1040px,100%);margin:0 auto;padding:var(--sp-md);border:4px solid var(--c-surface);border-radius:40px;background:var(--c-surface);box-shadow:var(--el-raised)}
.el-world-route-map__scroll{overflow-x:auto;overflow-y:hidden;border-radius:30px;scroll-snap-type:x proximity}
.el-world-route-map__canvas{position:relative;width:100%;min-width:900px;height:470px;overflow:hidden;border-radius:30px;isolation:isolate}
.el-world-route-map__story{position:absolute;z-index:6;left:50%;top:var(--sp-md);margin:0;padding:var(--sp-sm) var(--sp-lg);border:2px solid var(--c-border);border-radius:var(--r-pill);background:var(--c-surface);font-size:var(--fs-sm);font-weight:var(--fw-bold);transform:translateX(-50%);box-shadow:var(--el-card);white-space:nowrap}
.el-world-route-map__path{position:absolute;z-index:2;inset:0;width:100%;height:420px;pointer-events:none}
.el-world-route-map__path path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.el-world-route-map__path-shadow{stroke:var(--c-surface);stroke-width:15;opacity:.8}
.el-world-route-map__path-dots{stroke:var(--c-treasure-dark);stroke-width:7;stroke-dasharray:2 19}
.el-world-route-map__landmark{position:absolute;z-index:1;font-size:44px;filter:drop-shadow(0 6px 4px var(--c-border));transform:translate(-50%,-50%);pointer-events:none}
.el-world-route-map__start{position:absolute;z-index:3;display:grid;justify-items:center;color:var(--c-text);font-weight:var(--fw-bold);transform:translate(-50%,-50%)}
.el-world-route-map__start span{font-size:42px;filter:drop-shadow(0 5px 3px var(--c-border))}
.el-world-route-map__traveller{position:absolute;z-index:7;display:grid;place-items:center;width:66px;height:66px;border:4px solid var(--c-surface);border-radius:var(--r-pill);background:var(--c-sky);font-size:38px;box-shadow:var(--el-raised);transform:translate(-50%,-50%);transition:left var(--t-celebrate),top var(--t-celebrate);pointer-events:none}
.el-route-stop{position:absolute;z-index:5;display:grid;grid-template-columns:1fr auto;grid-template-rows:58px auto 10px auto;align-items:center;width:184px;min-height:166px;padding:var(--sp-sm);border:0;background:transparent;color:var(--c-text);cursor:pointer;transform:translate(-50%,-50%)}
.el-route-stop:focus-visible{outline:5px solid var(--c-primary);outline-offset:5px;border-radius:var(--r-lg)}
.el-route-stop__island{position:absolute;z-index:-1;inset:5px 8px 34px;border:5px solid var(--c-treasure-dark);border-radius:50% 44% 48% 42%;background:linear-gradient(180deg,var(--c-leaf) 0 42%,var(--c-sand) 43% 100%);box-shadow:var(--el-raised);transform:rotate(-2deg)}
.el-route-stop--2 .el-route-stop__island{border-radius:44% 51% 42% 49%;transform:rotate(3deg)}
.el-route-stop--3 .el-route-stop__island{border-radius:50% 40% 48% 44%;transform:rotate(-4deg)}
.el-route-stop__number{position:absolute;right:9px;top:2px;display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-pill);background:var(--c-primary);color:var(--c-on-accent);font-weight:var(--fw-bold);box-shadow:var(--el-card)}
.el-route-stop--complete .el-route-stop__number{background:var(--c-success)}
.el-route-stop__icon{grid-column:1/-1;align-self:end;font-size:48px;filter:drop-shadow(0 5px 3px var(--c-border))}
.el-route-stop__name{grid-column:1/-1;align-self:start;display:grid;place-items:center;max-width:158px;min-height:34px;margin:0 auto var(--sp-xs);padding:var(--sp-xs) var(--sp-sm);border:2px solid var(--c-border);border-radius:var(--r-pill);background:var(--c-surface);font-size:var(--fs-sm);line-height:var(--lh-tight);text-align:center;box-shadow:var(--el-card)}
.el-route-stop__meter{grid-column:1;display:block;height:10px;overflow:hidden;border-radius:var(--r-pill);background:var(--c-surface-alt)}
.el-route-stop__meter span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--c-primary),var(--c-treasure))}
.el-route-stop--complete .el-route-stop__meter span{background:var(--c-success)}
.el-route-stop__score{grid-column:2;margin-left:var(--sp-xs);padding:2px var(--sp-xs);border-radius:var(--r-pill);background:var(--c-surface);font-weight:var(--fw-bold)}
.el-route-stop__chest{position:absolute;right:-30px;top:41px;font-size:34px;filter:drop-shadow(0 5px 3px var(--c-border))}
.el-world-route-map__hint{display:none;margin:var(--sp-sm) 0 0;color:var(--c-text-muted);font-size:var(--fs-xs);font-weight:var(--fw-bold);text-align:center}

.el-world-route-map--ocean .el-world-route-map__canvas{background:radial-gradient(circle at 18% 12%,var(--c-cloud) 0 6%,transparent 6.5%),repeating-radial-gradient(ellipse at 50% 110%,transparent 0 26px,var(--c-sky-deep) 28px 31px,transparent 33px 58px),linear-gradient(180deg,var(--c-sky),var(--c-sea))}
.el-world-route-map--islands .el-world-route-map__canvas{background:radial-gradient(circle at 14% 13%,var(--c-treasure) 0 5%,transparent 5.5%),repeating-linear-gradient(170deg,transparent 0 42px,var(--c-sky-deep) 44px 47px,transparent 49px 78px),linear-gradient(180deg,var(--c-sky),var(--c-sea))}
.el-world-route-map--forest .el-world-route-map__canvas{background:radial-gradient(circle at 50% 50%,var(--c-leaf) 0 14%,transparent 15%),repeating-linear-gradient(120deg,transparent 0 58px,var(--c-leaf) 60px 88px),linear-gradient(180deg,var(--c-cloud),var(--c-leaf))}
.el-world-route-map--forest .el-route-stop__island{border-color:var(--c-leaf-dark);background:radial-gradient(circle,var(--c-sand) 0 42%,var(--c-leaf) 44% 100%)}
.el-world-route-map--city .el-world-route-map__canvas{background:linear-gradient(90deg,transparent 0 46%,var(--c-surface) 47% 53%,transparent 54%),linear-gradient(165deg,var(--c-lavender) 0 60%,var(--c-border) 61% 68%,var(--c-cloud) 69% 100%)}
.el-world-route-map--city .el-world-route-map__path-dots{stroke:var(--c-royal);stroke-dasharray:14 12}
.el-world-route-map--city .el-route-stop__island{border-color:var(--c-royal);border-radius:22px;background:linear-gradient(180deg,var(--c-lavender),var(--c-surface));transform:rotate(0)}
.el-world-route-map--workshop .el-world-route-map__canvas{background:repeating-linear-gradient(135deg,transparent 0 48px,var(--c-sand) 50px 76px),linear-gradient(180deg,var(--c-cloud),var(--c-surface-alt))}
.el-world-route-map--workshop .el-world-route-map__path-dots{stroke:var(--c-primary-dark);stroke-dasharray:16 11}
.el-world-route-map--workshop .el-route-stop__island{border-color:var(--c-primary-dark);border-radius:var(--r-lg);background:linear-gradient(180deg,var(--c-surface),var(--c-sand));transform:rotate(0)}
.el-world-route-map--royal .el-world-route-map__canvas{background:radial-gradient(circle at 75% 10%,var(--c-surface) 0 5%,transparent 5.5%),linear-gradient(165deg,var(--c-lavender) 0 54%,var(--c-leaf) 55% 100%)}
.el-world-route-map--royal .el-world-route-map__path-dots{stroke:var(--c-royal)}
.el-world-route-map--royal .el-route-stop__island{border-color:var(--c-royal);border-radius:48% 48% var(--r-lg) var(--r-lg);background:linear-gradient(180deg,var(--c-surface),var(--c-lavender));transform:rotate(0)}
.el-world-route-map--valley .el-world-route-map__canvas{background:radial-gradient(circle at 82% 10%,var(--c-treasure) 0 6%,transparent 6.5%),radial-gradient(ellipse at 25% 105%,var(--c-leaf) 0 34%,transparent 34.5%),radial-gradient(ellipse at 72% 112%,var(--c-leaf-dark) 0 38%,transparent 38.5%),linear-gradient(180deg,var(--c-sky),var(--c-cloud))}
.el-world-route-map--valley .el-world-route-map__path-dots{stroke:var(--c-primary-dark);stroke-dasharray:5 16}
.el-world-route-map--valley .el-route-stop__island{border-color:var(--c-leaf-dark);background:linear-gradient(180deg,var(--c-cloud),var(--c-leaf));transform:rotate(0)}
.el-world-route-map--cave .el-world-route-map__canvas{background:radial-gradient(circle at 18% 22%,color-mix(in srgb,var(--c-treasure) 35%,transparent) 0 3%,transparent 8%),radial-gradient(circle at 68% 18%,color-mix(in srgb,var(--c-lavender) 35%,transparent) 0 4%,transparent 10%),linear-gradient(145deg,var(--c-night),var(--c-sea-deep))}
.el-world-route-map--cave .el-world-route-map__path-shadow{stroke:var(--c-night);opacity:.65}
.el-world-route-map--cave .el-world-route-map__path-dots{stroke:var(--c-treasure);stroke-dasharray:3 15}
.el-world-route-map--cave .el-route-stop__island{border-color:var(--c-treasure);border-radius:38% 48% 42% 46%;background:linear-gradient(180deg,var(--c-surface),var(--c-lavender));transform:rotate(0)}
.el-world-route-map--cave .el-world-route-map__start{color:var(--c-surface)}
.el-world-route-map__traveller{animation:el-route-glow 2.8s ease-in-out infinite}

.el-world-complete{display:grid;place-items:center;overflow:hidden}
.el-world-complete__card{width:min(720px,100%);padding:clamp(var(--sp-lg),5vw,var(--sp-xxl));border:4px solid var(--c-treasure);border-radius:40px;background:linear-gradient(160deg,var(--c-surface),var(--c-sand));text-align:center;box-shadow:var(--el-raised)}
.el-chest{position:relative;width:250px;height:210px;margin:var(--sp-lg) auto}
.el-chest__lid,.el-chest__base{position:absolute;left:25px;width:200px;border:8px solid var(--c-treasure-dark);background:var(--c-treasure);color:var(--c-treasure-dark);font-size:var(--fs-xl);font-weight:var(--fw-bold)}
.el-chest__lid{z-index:3;top:58px;height:62px;border-radius:70px 70px var(--r-sm) var(--r-sm);transform-origin:20px bottom;transition:transform var(--t-celebrate)}
.el-chest__base{z-index:2;top:115px;display:grid;place-items:center;height:88px;border-radius:var(--r-sm) var(--r-sm) var(--r-lg) var(--r-lg)}
.el-chest__glow{position:absolute;z-index:0;left:50%;top:105px;width:150px;height:150px;border-radius:var(--r-pill);background:var(--c-surface);opacity:0;transform:translate(-50%,-50%) scale(.3);transition:opacity var(--t-celebrate),transform var(--t-celebrate)}
.el-chest__treasure{position:absolute;z-index:1;left:50%;top:102px;display:flex;gap:var(--sp-sm);font-size:var(--fs-xxl);opacity:0;transform:translate(-50%,35px);transition:opacity var(--t-celebrate),transform var(--t-celebrate)}
.el-world-complete--open .el-chest__lid{transform:translate(-10px,-42px) rotate(-12deg)}
.el-world-complete--open .el-chest__glow{opacity:.9;transform:translate(-50%,-50%) scale(1.35)}
.el-world-complete--open .el-chest__treasure{opacity:1;transform:translate(-50%,-38px)}
.el-world-complete__reward{font-size:var(--fs-lg);font-weight:var(--fw-bold)}
.el-next-world{margin:var(--sp-lg) 0;padding:var(--sp-lg);border:3px dashed var(--c-treasure-dark);border-radius:var(--r-lg);background:var(--c-surface);opacity:0;transform:translateY(18px);transition:opacity var(--t-celebrate) var(--t-normal),transform var(--t-celebrate) var(--t-normal)}
.el-world-complete--open .el-next-world{opacity:1;transform:translateY(0)}
.el-next-world__icon{font-size:64px}

/* Mission et exercices. */
.el-mission,.el-finish,.el-coming-soon{min-height:100vh;padding:calc(var(--sp-lg) + env(safe-area-inset-top)) calc(var(--sp-lg) + env(safe-area-inset-right)) calc(var(--sp-lg) + env(safe-area-inset-bottom)) calc(var(--sp-lg) + env(safe-area-inset-left));background:linear-gradient(180deg,var(--c-sky),var(--c-bg))}
.el-mission--sun,.el-mission--workshop{background:linear-gradient(180deg,var(--c-sand),var(--c-bg))}
.el-mission--forest,.el-mission--valley{background:linear-gradient(180deg,var(--c-leaf),var(--c-bg))}
.el-mission--city,.el-mission--royal{background:linear-gradient(180deg,var(--c-lavender),var(--c-bg))}
.el-mission--cave{background:linear-gradient(180deg,var(--c-night),var(--c-bg))}
.el-world-hub.el-mission--cave .el-mission__identity strong,
.el-world-hub.el-mission--cave .el-world-hub__intro h1,
.el-world-hub.el-mission--cave .el-world-hub__intro .el-lead{color:var(--c-surface)}
.el-world-hub.el-mission--cave .el-world-hub__intro .el-eyebrow{color:var(--c-treasure)}
.el-mission__top{display:grid;grid-template-columns:var(--touch-comfortable) 1fr auto;align-items:center;gap:var(--sp-md);width:min(760px,100%);margin:0 auto var(--sp-sm)}
.el-mission__identity{display:flex;justify-content:center;align-items:center;gap:var(--sp-sm);font-size:var(--fs-lg)}
.el-mission__step{padding:var(--sp-sm) var(--sp-md);border-radius:var(--r-pill);background:var(--c-surface);font-weight:var(--fw-bold)}
.el-session-meter{width:min(760px,100%);height:10px;margin:0 auto var(--sp-lg);overflow:hidden;border-radius:var(--r-pill);background:var(--c-surface)}
.el-session-meter span{display:block;height:100%;background:var(--c-primary);transition:width var(--t-normal)}
.el-mission__scene{display:grid;grid-template-columns:110px 1fr;align-items:end;gap:var(--sp-md);width:min(760px,100%);margin:0 auto var(--sp-md)}
.el-guide-avatar{font-size:76px;text-align:center;filter:drop-shadow(0 8px 7px var(--c-border))}
.el-guide-bubble{position:relative;padding:var(--sp-lg);border-radius:var(--r-lg) var(--r-lg) var(--r-lg) var(--r-sm);background:var(--c-surface);box-shadow:var(--el-card)}
.el-guide-bubble h1{margin:0;font-size:clamp(var(--fs-lg),4vw,var(--fs-xxl))}
.el-instruction-btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch-min);margin-top:var(--sp-md);padding:var(--sp-sm) var(--sp-md);border:2px solid var(--c-primary-dark);border-radius:var(--r-pill);background:var(--c-surface-alt);color:var(--c-primary-dark);font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-bold);cursor:pointer}
.el-instruction-btn:focus-visible{outline:4px solid var(--c-treasure);outline-offset:3px}
.el-task-card{width:min(760px,100%);margin:0 auto;padding:clamp(var(--sp-md),4vw,var(--sp-xl));border:3px solid var(--c-surface);border-radius:32px;background:var(--c-surface);box-shadow:var(--el-raised)}
.el-task-card--retry{animation:el-retry var(--t-normal) ease-out}
.el-task-scene{text-align:center;font-size:72px;margin-bottom:var(--sp-md)}
.el-word-pattern{display:flex;justify-content:center;align-items:center;min-height:88px;margin:0 auto var(--sp-md);padding:var(--sp-sm) var(--sp-lg);border:3px solid var(--activity-frame);border-radius:var(--r-lg);background:var(--c-surface);color:var(--c-text);font-size:clamp(38px,10vw,64px);font-weight:var(--fw-bold);letter-spacing:.08em;box-shadow:var(--el-card)}
.el-word-pattern__missing{display:inline-grid;place-items:center;min-width:1.15em;margin:0 .08em;border-radius:12px;background:var(--activity-soft);color:var(--activity-accent);animation:el-pulse 1.8s ease-in-out infinite}
.el-listen-btn{display:flex;align-items:center;justify-content:center;min-height:var(--touch-comfortable);width:100%;margin-bottom:var(--sp-md);border:2px solid var(--c-sea);border-radius:var(--r-pill);background:var(--c-sky);color:var(--c-sea-deep);font-weight:var(--fw-bold);cursor:pointer}
.el-options{display:grid;gap:var(--sp-md)}
.el-option__icon{font-size:var(--fs-xxl)}
.el-validate{width:100%;margin-top:var(--sp-lg)}
.el-cue{display:flex;align-items:flex-start;gap:var(--sp-md);margin-top:var(--sp-md);padding:var(--sp-md);border-radius:var(--r-md);background:var(--c-sky);color:var(--c-sea-deep);font-size:var(--fs-base);font-weight:var(--fw-medium)}
.el-cue__icon{font-size:var(--fs-xl)}
.el-live{min-height:1px;color:var(--c-success);font-weight:var(--fw-bold);text-align:center}
.el-builder{display:grid;gap:var(--sp-lg)}
.el-builder__answer{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--sp-sm);min-height:120px;padding:var(--sp-md);border:3px dashed var(--c-sea);border-radius:var(--r-lg);background:var(--c-sky)}
.el-builder__placeholder{color:var(--c-sea-deep);font-weight:var(--fw-bold)}
.el-builder__bank{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-md);min-height:var(--touch-large)}
.el-tile{min-width:var(--touch-comfortable);min-height:var(--touch-comfortable);padding:var(--sp-sm) var(--sp-md);border:0;border-bottom:5px solid var(--c-treasure-dark);border-radius:var(--r-md);background:var(--c-treasure);color:var(--c-treasure-dark);font-size:var(--fs-xl);font-weight:var(--fw-bold);cursor:grab;box-shadow:var(--el-card)}
.el-tile:active{transform:translateY(3px);border-bottom-width:2px}
.el-tile--placed{background:var(--c-surface);border:2px solid var(--c-sea);color:var(--c-text)}
.el-builder--syllable{padding:var(--sp-md);border-radius:var(--r-lg);background:linear-gradient(180deg,var(--c-sky),var(--c-surface-alt))}
.el-syllable-bridge{display:grid;grid-template-columns:auto minmax(150px,1fr) auto;align-items:center;gap:var(--sp-sm);min-height:150px;border:0;background:linear-gradient(180deg,var(--c-sky) 0 58%,var(--c-sea) 59% 100%);overflow:hidden}
.el-syllable-bridge__island{font-size:48px;filter:drop-shadow(0 5px 3px var(--c-border))}
.el-syllable-bridge__deck{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-xs);align-items:end;padding:0 var(--sp-xs);border-bottom:8px solid var(--c-treasure-dark)}
.el-syllable-bridge__slot{display:grid;place-items:center;min-height:72px;border:3px dashed var(--c-treasure-dark);border-radius:var(--r-md) var(--r-md) 0 0;background:color-mix(in srgb,var(--c-treasure) 35%,transparent);color:var(--c-treasure-dark);font-size:var(--fs-xl)}
.el-sound-plank{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-xs);background:var(--c-treasure);color:var(--c-treasure-dark)}
.el-syllable-bridge__deck .el-sound-plank{width:100%;min-width:0;border-radius:var(--r-md) var(--r-md) 0 0}
.el-sound-plank__note{font-size:var(--fs-sm)}
.el-syllable-result{grid-column:1/-1;justify-self:center;padding:var(--sp-xs) var(--sp-md);border-radius:var(--r-pill);background:var(--c-surface);color:var(--c-sea-deep);font-size:var(--fs-xl);box-shadow:var(--el-card)}
.el-builder--picture .el-builder__answer{gap:2px;min-height:282px;padding:var(--sp-sm);border-color:var(--c-leaf-dark);background:linear-gradient(145deg,var(--c-surface-alt),var(--c-surface))}
.el-builder--picture .el-builder__bank{align-items:flex-start;gap:var(--sp-xs)}
.el-image-piece{display:grid;gap:0;min-width:0;min-height:0;padding:0;overflow:hidden;border:2px solid var(--c-surface);border-bottom:5px solid var(--c-leaf-dark);border-radius:var(--r-sm);background:var(--c-surface);color:var(--c-text)}
.el-image-piece__frame{position:relative;display:block;overflow:hidden;background:var(--c-surface-alt)}
.el-image-piece__frame img{position:absolute;max-width:none;object-fit:fill;pointer-events:none;user-select:none}
.el-image-piece__label{display:block;padding:var(--sp-xs);background:var(--c-leaf);color:var(--c-leaf-dark);font-size:var(--fs-lg);font-weight:var(--fw-bold);text-align:center}
.el-image-piece.el-tile--placed{border-color:var(--c-leaf-dark);border-bottom-width:2px;border-radius:var(--r-sm)}
.el-success-burst{position:fixed;z-index:20;left:50%;top:45%;font-size:120px;color:var(--c-treasure);pointer-events:none;animation:el-burst var(--t-celebrate) ease-out forwards}
.el-finish,.el-coming-soon{display:grid;place-items:center}
.el-finish__card{width:min(620px,100%);padding:clamp(var(--sp-lg),6vw,var(--sp-xxl));border-radius:36px;background:var(--c-surface);text-align:center;box-shadow:var(--el-raised)}
.el-finish__reward{font-size:92px;animation:el-float 1.8s ease-in-out infinite}
.el-child-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-md);margin:var(--sp-xl) 0}
.el-child-summary__stat{padding:var(--sp-lg);border-radius:var(--r-lg);background:var(--c-surface-alt)}
.el-child-summary__stat strong{display:block;font-size:var(--fs-xxl);color:var(--c-primary-dark)}
.el-child-summary__stat span{font-size:var(--fs-sm)}
.el-finish__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-md)}

/* Mini-jeux scénarisés : même niveau d'immersion que l'Île des coquillages,
   avec une identité propre par lieu. Les décors restent fixes pendant la
   réponse ; seules les réussites déclenchent un mouvement. */
.el-activity{
  --activity-sky:var(--c-sky);
  --activity-ground:var(--c-sand);
  --activity-soft:var(--c-surface-alt);
  --activity-accent:var(--c-sea-deep);
  --activity-frame:var(--c-sea);
  overflow-x:hidden;
  padding-bottom:var(--sp-xxl);
  background:linear-gradient(180deg,var(--activity-sky),var(--activity-soft));
}
.el-activity--ocean{--activity-sky:var(--c-sky);--activity-ground:var(--c-sand);--activity-soft:var(--c-bg);--activity-accent:var(--c-sea-deep);--activity-frame:var(--c-sea)}
.el-activity--sun{--activity-sky:var(--c-sky);--activity-ground:var(--c-sand);--activity-soft:var(--c-bg);--activity-accent:var(--c-treasure-dark);--activity-frame:var(--c-treasure)}
.el-activity--forest{--activity-sky:var(--c-sky);--activity-ground:var(--c-leaf);--activity-soft:var(--c-bg);--activity-accent:var(--c-leaf-dark);--activity-frame:var(--c-leaf-dark)}
.el-activity--forest-night{--activity-sky:var(--c-night);--activity-ground:var(--c-leaf);--activity-soft:var(--c-lavender);--activity-accent:var(--c-royal);--activity-frame:var(--c-treasure)}
.el-activity--city{--activity-sky:var(--c-lavender);--activity-ground:var(--c-surface-alt);--activity-soft:var(--c-bg);--activity-accent:var(--c-royal);--activity-frame:var(--c-royal)}
.el-activity--workshop{--activity-sky:var(--c-sand);--activity-ground:var(--c-surface-alt);--activity-soft:var(--c-bg);--activity-accent:var(--c-primary-dark);--activity-frame:var(--c-primary)}
.el-activity--royal{--activity-sky:var(--c-lavender);--activity-ground:var(--c-surface-alt);--activity-soft:var(--c-bg);--activity-accent:var(--c-royal);--activity-frame:var(--c-treasure)}
.el-activity--valley{--activity-sky:var(--c-sky);--activity-ground:var(--c-leaf);--activity-soft:var(--c-sand);--activity-accent:var(--c-primary-dark);--activity-frame:var(--c-treasure-dark)}
.el-activity--cave{--activity-sky:var(--c-night);--activity-ground:var(--c-sea-deep);--activity-soft:var(--c-lavender);--activity-accent:var(--c-royal);--activity-frame:var(--c-treasure)}
.el-activity .el-mission__top{width:min(880px,100%);margin-bottom:var(--sp-md)}
.el-mission__identity{min-width:0;text-align:left}
.el-mission__identity-icon{display:grid;place-items:center;flex:0 0 var(--touch-min);height:var(--touch-min);border-radius:var(--r-pill);background:var(--c-surface);box-shadow:var(--el-card)}
.el-mission__identity-copy{display:grid;min-width:0;line-height:var(--lh-tight)}
.el-mission__identity-copy small{overflow:hidden;color:var(--activity-accent);font-size:var(--fs-xs);font-weight:var(--fw-bold);text-overflow:ellipsis;white-space:nowrap}
.el-mission__identity-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.el-activity--forest-night .el-mission__identity-copy small{color:var(--c-treasure)}
.el-activity--forest-night .el-mission__identity-copy strong{color:var(--c-surface)}
.el-activity--cave .el-mission__identity-copy small{color:var(--c-treasure)}
.el-activity--cave .el-mission__identity-copy strong{color:var(--c-surface)}
.el-activity-progress{display:grid;grid-template-columns:auto minmax(150px,1fr) auto;align-items:center;gap:var(--sp-md);width:min(880px,100%);margin:0 auto var(--sp-md);padding:var(--sp-sm) var(--sp-md);border:2px solid color-mix(in srgb,var(--activity-frame) 55%,var(--c-surface));border-radius:var(--r-lg);background:color-mix(in srgb,var(--c-surface) 91%,transparent);box-shadow:var(--el-card)}
.el-activity-progress__copy{display:flex;align-items:center;gap:var(--sp-xs);color:var(--activity-accent);font-size:var(--fs-sm)}
.el-activity-progress__copy>span{font-size:var(--fs-lg)}
.el-activity-progress .el-session-meter{width:100%;height:12px;margin:0;background:var(--activity-soft);box-shadow:inset 0 1px 3px var(--c-border)}
.el-activity-progress .el-session-meter span{background:var(--activity-frame)}
.el-activity-progress__tokens{display:flex;align-items:center;justify-content:flex-end;gap:3px;min-width:136px}
.el-activity-progress__token{display:grid;place-items:center;width:22px;height:22px;border-radius:var(--r-pill);background:var(--activity-soft);color:var(--activity-accent);font-size:var(--fs-xs);font-weight:var(--fw-bold)}
.el-activity-progress__token[data-earned="true"]{background:var(--c-surface);box-shadow:0 0 0 2px var(--activity-frame)}
.el-activity-progress__token[data-current="true"]{box-shadow:0 0 0 3px var(--c-surface),0 0 0 5px var(--activity-frame)}
.el-activity-stage{position:relative;width:min(920px,calc(100% + 16px));min-height:270px;margin:0 auto;border:4px solid color-mix(in srgb,var(--activity-frame) 70%,var(--c-surface));border-radius:36px;overflow:hidden;background:linear-gradient(180deg,var(--activity-sky) 0 62%,var(--activity-ground) 63% 100%);box-shadow:var(--el-raised)}
.el-activity-scenery{position:absolute;inset:0;overflow:hidden;pointer-events:none;user-select:none}
.el-activity-scenery::after{content:"";position:absolute;left:-5%;right:-5%;bottom:-55px;height:145px;border-radius:50% 50% 0 0;background:color-mix(in srgb,var(--activity-ground) 82%,var(--c-surface));box-shadow:0 -8px 0 color-mix(in srgb,var(--activity-frame) 25%,transparent)}
.el-activity-scenery__cloud{position:absolute;color:color-mix(in srgb,var(--c-surface) 88%,transparent);font-size:54px;line-height:1}
.el-activity-scenery__cloud--one{left:7%;top:12px}
.el-activity-scenery__cloud--two{right:12%;top:34px;font-size:40px}
.el-activity-scenery__cloud--one{animation:el-cloud-drift 11s ease-in-out infinite}
.el-activity-scenery__cloud--two{animation:el-cloud-drift 14s ease-in-out infinite reverse}
.el-activity--forest-night .el-activity-scenery__cloud{opacity:.22}
.el-activity--cave .el-activity-scenery__cloud{opacity:.08}
.el-activity-scenery__landmark,.el-activity-scenery__activity,.el-activity-scenery__companion{position:absolute;z-index:1;filter:drop-shadow(0 7px 4px color-mix(in srgb,var(--c-overlay) 24%,transparent));transform-origin:center bottom}
.el-activity-scenery__landmark{left:7%;bottom:34px;font-size:92px}
.el-activity-scenery__activity{right:9%;bottom:43px;font-size:70px}
.el-activity-scenery__companion{right:25%;bottom:22px;font-size:43px}
.el-activity-scenery__trail{position:absolute;z-index:2;right:7%;bottom:12px;color:var(--activity-accent);font-size:var(--fs-lg);font-weight:var(--fw-bold);letter-spacing:.18em}
.el-activity-scenery__activity{animation:el-ambient-float 4.8s ease-in-out infinite}
.el-activity-scenery__companion{animation:el-companion-breathe 5.6s ease-in-out infinite}
.el-activity .el-mission__scene{position:relative;z-index:3;align-items:end;width:min(800px,calc(100% - 32px));min-height:266px;margin:0 auto;padding:86px 0 var(--sp-md)}
.el-activity .el-guide-avatar{font-size:82px;filter:drop-shadow(0 8px 5px color-mix(in srgb,var(--c-overlay) 25%,transparent))}
.el-activity .el-guide-bubble{border:3px solid var(--c-surface);background:color-mix(in srgb,var(--c-surface) 94%,transparent);box-shadow:var(--el-raised)}
.el-activity .el-guide-bubble::before{content:"";position:absolute;left:-17px;bottom:20px;width:24px;height:24px;border-left:3px solid var(--c-surface);border-bottom:3px solid var(--c-surface);background:var(--c-surface);transform:rotate(45deg)}
.el-activity .el-guide-bubble .el-eyebrow{color:var(--activity-accent)}
.el-activity .el-instruction-btn{border-color:var(--activity-accent);background:var(--activity-soft);color:var(--activity-accent)}
.el-activity .el-task-card{position:relative;margin-top:calc(-1 * var(--sp-md));border:3px solid color-mix(in srgb,var(--activity-frame) 45%,var(--c-surface));background:color-mix(in srgb,var(--c-surface) 97%,var(--activity-soft));box-shadow:var(--el-raised)}
.el-task-card__cap{display:flex;align-items:center;gap:var(--sp-sm);margin:calc(-1 * var(--sp-sm)) 0 var(--sp-md);color:var(--activity-accent)}
.el-task-card__cap-icon{display:grid;place-items:center;width:var(--touch-min);height:var(--touch-min);border-radius:var(--r-pill);background:var(--activity-soft);font-size:var(--fs-xl);box-shadow:var(--el-card)}
.el-task-card__cap-reward{margin-left:auto;padding:var(--sp-xs) var(--sp-sm);border-radius:var(--r-pill);background:var(--activity-soft);font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.el-activity .el-task-scene{width:max-content;max-width:100%;margin:0 auto var(--sp-md);padding:var(--sp-sm) var(--sp-lg);border-radius:var(--r-pill);background:var(--activity-soft);filter:drop-shadow(0 5px 4px var(--c-border))}
.el-activity .el-listen-btn{border-color:var(--activity-frame);background:var(--activity-soft);color:var(--activity-accent);font-size:var(--fs-lg);box-shadow:var(--el-card)}
.el-activity[data-listening="true"] .el-guide-bubble,.el-activity[data-listening="true"] .el-task-card{border-style:dashed}
.el-activity[data-listening="true"] .el-live{min-height:28px;padding-top:var(--sp-sm);color:var(--activity-accent)}
.el-activity[data-listening="true"] button[disabled]{cursor:wait}
.el-options{grid-template-columns:repeat(2,minmax(0,1fr))}
.el-options--1{grid-template-columns:1fr}
.el-task-card[data-task-type="choose_sentence"] .el-options{grid-template-columns:1fr}
.el-task-card[data-task-type="story_question"] .el-options,.el-task-card[data-task-type="story_ending"] .el-options{grid-template-columns:1fr}
.el-option--adventure{position:relative;justify-content:center;min-height:104px;overflow:hidden;border-color:color-mix(in srgb,var(--activity-frame) 38%,var(--c-surface-alt));text-align:center;box-shadow:var(--el-card)}
.el-option--adventure::after{content:"";position:absolute;left:18%;right:18%;bottom:7px;height:5px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--activity-frame) 24%,transparent)}
.el-option--adventure[aria-pressed="true"]{border-color:var(--activity-frame);background:var(--activity-soft);box-shadow:0 0 0 3px var(--c-surface),0 0 0 6px var(--activity-frame)}
.el-option__marker{display:grid;place-items:center;flex:0 0 38px;height:38px;border-radius:var(--r-pill);background:var(--activity-soft);font-size:var(--fs-lg)}
.el-activity .el-validate{border-bottom:5px solid var(--activity-accent);background:var(--activity-frame)}
.el-activity .el-cue{border:2px dashed var(--activity-frame);background:var(--activity-soft);color:var(--activity-accent)}
.el-builder--word .el-builder__answer{border-color:var(--activity-frame);background:repeating-linear-gradient(90deg,var(--activity-soft) 0 28px,var(--c-surface) 29px 31px)}
.el-builder--word .el-builder__answer::before{content:"🏗️";font-size:var(--fs-xxl)}
.el-builder--sentence .el-builder__answer{border-color:var(--c-royal);background:linear-gradient(180deg,var(--c-lavender),var(--c-surface-alt))}
.el-builder--sentence .el-builder__answer::before{content:"🏰";font-size:var(--fs-xxl)}
.el-builder--sentence .el-tile{border-bottom-color:var(--c-royal);background:var(--c-lavender);color:var(--c-royal)}
.el-builder--oral .el-builder__answer{border-color:var(--c-treasure-dark);background:linear-gradient(180deg,var(--c-sand),var(--c-surface))}
.el-builder--oral .el-tile{border-bottom-color:var(--c-treasure-dark);background:var(--c-sand);color:var(--c-primary-dark)}
.el-builder--story .el-builder__answer{align-items:stretch;border-color:var(--c-treasure);background:linear-gradient(145deg,var(--c-night),var(--c-sea-deep))}
.el-builder--story .el-builder__placeholder{color:var(--c-surface)}
.el-builder--story .el-tile{width:100%;justify-content:flex-start;border-bottom-color:var(--c-treasure);background:var(--c-surface);color:var(--c-text);text-align:left}
.el-story-piece__icon{flex:0 0 auto;font-size:var(--fs-xl)}
.el-story-card{position:relative;width:min(720px,100%);margin:0 auto var(--sp-md);padding:var(--sp-lg);overflow:hidden;border:3px solid var(--activity-frame);border-radius:var(--r-lg);background:linear-gradient(145deg,var(--c-surface),var(--activity-soft));box-shadow:var(--el-card)}
.el-story-card::after{content:"✦";position:absolute;right:var(--sp-md);top:var(--sp-sm);color:var(--activity-frame);font-size:var(--fs-xl);animation:el-story-spark 2.4s ease-in-out infinite}
.el-story-card__title{margin:0 0 var(--sp-sm);color:var(--activity-accent);font-size:var(--fs-base);font-weight:var(--fw-bold)}
.el-story-card__text{margin:0;padding-right:var(--sp-lg);font-size:var(--fs-lg);line-height:1.7}
.el-rhythm-game{display:grid;justify-items:center;gap:var(--sp-sm);margin:0 auto var(--sp-md);padding:var(--sp-lg);border:3px dashed var(--activity-frame);border-radius:var(--r-lg);background:var(--activity-soft);text-align:center}
.el-rhythm-game__hint{margin:0;font-size:var(--fs-lg);font-weight:var(--fw-bold)}
.el-rhythm-drum{display:grid;place-items:center;gap:0;width:170px;height:170px;padding:var(--sp-sm);border:7px solid var(--c-treasure-dark);border-radius:50%;background:radial-gradient(circle,var(--c-sand),var(--c-treasure));color:var(--c-primary-dark);box-shadow:0 12px 0 var(--c-treasure-dark),var(--el-raised);cursor:pointer;touch-action:manipulation}
.el-rhythm-drum__face{font-size:72px;line-height:1}
.el-rhythm-drum--hit{animation:el-drum-hit .25s ease-out}
.el-rhythm-count{min-height:32px;font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--activity-accent)}
.el-rhythm-dots{min-height:30px;color:var(--c-primary);font-size:var(--fs-xl);letter-spacing:.15em}
.el-rhythm-reset{min-height:var(--touch-min);padding:var(--sp-sm) var(--sp-md);border:2px solid var(--activity-frame);border-radius:var(--r-pill);background:var(--c-surface);color:var(--activity-accent);font-weight:var(--fw-bold);cursor:pointer}
.el-activity[data-success="true"] .el-activity-scenery__landmark{animation:el-landmark-celebrate var(--t-celebrate) ease-out both}
.el-activity[data-success="true"] .el-activity-scenery__companion{animation:el-companion-celebrate var(--t-celebrate) ease-out both}
.el-activity[data-success="true"] .el-activity-scenery__trail{animation:el-trail-celebrate var(--t-celebrate) ease-out both}
.el-activity-finish{background:linear-gradient(180deg,var(--activity-sky),var(--activity-ground),var(--activity-soft))}
.el-activity-finish .el-finish__card{border:4px solid var(--activity-frame);background:color-mix(in srgb,var(--c-surface) 96%,var(--activity-soft))}
.el-activity-finish .el-finish__reward{display:flex;justify-content:center;align-items:end;gap:var(--sp-md)}
.el-activity-finish .el-finish__reward span:nth-child(2){animation:el-float 1.8s ease-in-out infinite}
.el-activity-finish .el-eyebrow{color:var(--activity-accent)}

@keyframes el-landmark-celebrate{50%{transform:translateY(-10px) rotate(-3deg)}100%{transform:translateY(0)}}
@keyframes el-companion-celebrate{50%{transform:translateX(18px) translateY(-8px)}100%{transform:translateX(0) translateY(0)}}
@keyframes el-trail-celebrate{50%{letter-spacing:.32em;filter:brightness(1.25)}100%{letter-spacing:.18em}}
@keyframes el-cloud-drift{50%{transform:translateX(18px) translateY(-4px)}}
@keyframes el-ambient-float{50%{transform:translateY(-7px) rotate(2deg)}}
@keyframes el-companion-breathe{50%{transform:translateY(-4px) scale(1.03)}}
@keyframes el-route-glow{50%{filter:drop-shadow(0 5px 7px var(--c-treasure));}}
@keyframes el-story-spark{50%{opacity:.35;transform:scale(.8) rotate(12deg)}}
@keyframes el-drum-hit{45%{transform:translateY(7px) scale(.94);box-shadow:0 4px 0 var(--c-treasure-dark),var(--el-card)}100%{transform:none}}

/* Formulaires et porte parent. */
.el-gate{min-height:100vh;display:grid;place-items:center;padding:calc(var(--sp-lg) + env(safe-area-inset-top)) calc(var(--sp-lg) + env(safe-area-inset-right)) calc(var(--sp-lg) + env(safe-area-inset-bottom)) calc(var(--sp-lg) + env(safe-area-inset-left));background:var(--c-parent-bg)}
.el-gate__icon{font-size:var(--fs-display)}
.el-gate__question{margin:var(--sp-lg) 0;padding:var(--sp-md);border-radius:var(--r-md);background:var(--c-parent-accent-soft);font-size:var(--fs-xxl);font-weight:var(--fw-bold);text-align:center}
.el-gate__form{display:grid;gap:var(--sp-md)}
.el-gate__input{text-align:center;font-size:var(--fs-xl)}
.el-gate__message{padding:var(--sp-md);border-radius:var(--r-md);background:var(--c-parent-accent-soft)}
.el-form{display:grid;gap:var(--sp-lg)}
.el-field{display:grid;gap:var(--sp-sm)}
.el-label{font-weight:var(--fw-bold)}
.el-input{min-height:var(--touch-comfortable);width:100%;padding:var(--sp-md);border:2px solid var(--c-parent-border);border-radius:var(--r-md);background:var(--c-parent-surface);color:var(--c-parent-text)}
.el-input:focus{border-color:var(--c-parent-accent);outline:3px solid var(--c-parent-accent-soft)}
.el-avatar-picker{display:flex;flex-wrap:wrap;gap:var(--sp-sm)}
.el-avatar-choice{display:grid;place-items:center;width:var(--touch-large);height:var(--touch-large);border:3px solid transparent;border-radius:var(--r-pill);background:var(--c-sky);font-size:var(--fs-xxl);cursor:pointer}
.el-avatar-choice[aria-pressed="true"]{border-color:var(--c-parent-accent);box-shadow:var(--el-card)}
.el-form-error{min-height:24px;margin:0;color:var(--c-parent-danger);font-weight:var(--fw-bold)}
.el-form-actions{display:flex;justify-content:flex-end;gap:var(--sp-md)}

/* Espace parent. */
.el-parent{background:var(--c-parent-bg);color:var(--c-parent-text);font-size:var(--fs-base)}
.el-parent-page{min-height:100vh;padding-top:calc(var(--sp-lg) + env(safe-area-inset-top));padding-right:max(calc(var(--sp-lg) + env(safe-area-inset-right)),calc((100% - 1120px)/2));padding-bottom:calc(var(--sp-xxl) + env(safe-area-inset-bottom));padding-left:max(calc(var(--sp-lg) + env(safe-area-inset-left)),calc((100% - 1120px)/2))}
.el-parent-topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-md);margin-bottom:var(--sp-xl)}
.el-parent-brand,.el-parent-topbar__actions{display:flex;align-items:center;gap:var(--sp-md)}
.el-plan-pill{padding:var(--sp-sm) var(--sp-md);border-radius:var(--r-pill);background:var(--c-parent-accent-soft);color:var(--c-parent-accent);font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.el-parent-hero{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-lg);margin-bottom:var(--sp-xl)}
.el-parent-avatar{font-size:72px}
.el-parent-kicker{margin-bottom:var(--sp-xs);color:var(--c-parent-accent);font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.08em;text-transform:uppercase}
.el-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-md);margin-bottom:var(--sp-lg)}
.el-stat-card,.el-parent-card,.el-trust{border:1px solid var(--c-parent-border);border-radius:var(--r-lg);background:var(--c-parent-surface);box-shadow:var(--el-card)}
.el-stat-card{display:grid;gap:var(--sp-xs);padding:var(--sp-lg)}
.el-stat-card strong{font-size:var(--fs-xxl)}
.el-stat-card__icon{color:var(--c-parent-accent);font-size:var(--fs-xl)}
.el-parent-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-lg);margin-bottom:var(--sp-lg)}
.el-parent-card{padding:var(--sp-lg)}
.el-parent-card--wide{margin-bottom:var(--sp-lg)}
.el-parent-card--narrow{width:min(620px,100%);margin:auto;padding:clamp(var(--sp-lg),5vw,var(--sp-xl))}
.el-report-copy{font-size:var(--fs-lg);line-height:var(--lh-normal)}
.el-next-step{display:grid;gap:var(--sp-xs);margin-top:var(--sp-lg);padding:var(--sp-md);border-left:5px solid var(--c-parent-accent);background:var(--c-parent-accent-soft)}
.el-tip-row{display:flex;align-items:flex-start;gap:var(--sp-sm)}
.el-tip-row>span{color:var(--c-parent-positive);font-weight:var(--fw-bold)}
.el-tip-row p{margin-bottom:var(--sp-sm)}
.el-competence-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-sm)}
.el-competence-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-md);padding:var(--sp-md);border-radius:var(--r-md);background:var(--c-parent-bg)}
.el-state{padding:var(--sp-xs) var(--sp-sm);border-radius:var(--r-pill);background:var(--c-parent-border);font-size:var(--fs-xs);font-weight:var(--fw-bold)}
.el-state--mastered,.el-state--consolidated{background:var(--c-leaf);color:var(--c-leaf-dark)}
.el-section-title{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-md)}
.el-parent-profiles{display:grid;gap:var(--sp-sm);margin:var(--sp-md) 0}
.el-parent-profile{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--sp-md);padding:var(--sp-md);border:2px solid transparent;border-radius:var(--r-md);background:var(--c-parent-bg)}
.el-parent-profile.is-active{border-color:var(--c-parent-accent)}
.el-parent-profile.is-danger{border-color:var(--c-parent-danger);background:var(--c-parent-danger-soft)}
.el-parent-profile>div:nth-child(2){display:grid}
.el-parent-profile__actions{display:flex;flex-wrap:wrap;gap:var(--sp-xs)}
.el-delete-confirm{flex-basis:100%;font-weight:var(--fw-bold);color:var(--c-parent-danger)}
.el-small-btn{min-height:var(--touch-min);padding:var(--sp-sm);border:1px solid var(--c-parent-border);border-radius:var(--r-sm);background:var(--c-parent-surface);color:var(--c-parent-accent);cursor:pointer}
.el-small-btn--danger{color:var(--c-parent-danger)}
.el-trust{padding:var(--sp-lg)}
.el-fatal{margin:var(--sp-xl);padding:var(--sp-xl);border-radius:var(--r-lg);background:var(--c-surface);box-shadow:var(--el-card)}

@keyframes el-float{50%{transform:translateY(-8px)}}
@keyframes el-retry{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes el-burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}45%{opacity:1}100%{opacity:0;transform:translate(-50%,-90%) scale(1.25)}}
@keyframes el-map-pulse{50%{transform:scale(1.08)}}

@media(max-width:760px){
  .el-journey::before{left:32px}
  .el-world,.el-world:nth-child(even){justify-self:end;grid-template-columns:96px 1fr;width:calc(100% - 24px);min-height:0;padding:var(--sp-md);border-radius:var(--r-lg)}
  .el-world:nth-child(even) .el-world__art{order:0}
  .el-world__art{height:120px}.el-world__icon{font-size:54px}
  .el-world__body .el-btn{font-size:var(--fs-base)}
  .el-world-route-map{padding:var(--sp-sm);border-radius:var(--r-lg)}
  .el-world-route-map__scroll{border-radius:var(--r-md)}
  .el-world-route-map__canvas{border-radius:var(--r-md)}
  .el-world-route-map__hint{display:block}
  .el-stat-grid{grid-template-columns:repeat(2,1fr)}
  .el-parent-grid,.el-competence-list{grid-template-columns:1fr}
  .el-parent-topbar,.el-parent-hero{align-items:flex-start}
  .el-plan-pill{display:none}
  .el-parent-profile{grid-template-columns:auto 1fr}.el-parent-profile__actions{grid-column:1/-1}
  .el-activity-progress{grid-template-columns:1fr auto}
  .el-activity-progress .el-session-meter{grid-column:1/-1;grid-row:2}
  .el-activity-progress__tokens{grid-column:2;grid-row:1;min-width:0}
  .el-activity-scenery__landmark{left:4%}
  .el-activity-scenery__activity{right:5%}
}
@media(max-width:520px){
  .el-mission{padding:calc(var(--sp-sm) + env(safe-area-inset-top)) calc(var(--sp-sm) + env(safe-area-inset-right)) calc(var(--sp-sm) + env(safe-area-inset-bottom)) calc(var(--sp-sm) + env(safe-area-inset-left))}
  .el-mission__scene{grid-template-columns:68px 1fr}.el-guide-avatar{font-size:52px}
  .el-guide-bubble .el-eyebrow{font-size:var(--fs-xs);letter-spacing:.05em}
  .el-guide-bubble{padding:var(--sp-md)}
  .el-task-card{border-radius:var(--r-lg)}
  .el-option{min-height:var(--touch-comfortable);font-size:var(--fs-lg)}
  .el-child-topbar{width:calc(100% - 2 * var(--sp-md))}
  .el-parent-entry{font-size:var(--fs-xs)}
  .el-adventure-map{margin-left:calc(-1 * var(--sp-md));margin-right:calc(-1 * var(--sp-md));overflow-x:auto;border-radius:var(--r-lg)}
  .el-world-hub,.el-world-complete{padding:calc(var(--sp-sm) + env(safe-area-inset-top)) calc(var(--sp-sm) + env(safe-area-inset-right)) calc(var(--sp-sm) + env(safe-area-inset-bottom)) calc(var(--sp-sm) + env(safe-area-inset-left))}
  .el-world-hub__intro{padding:0 var(--sp-sm)}
  .el-parent-page{padding:calc(var(--sp-md) + env(safe-area-inset-top)) calc(var(--sp-md) + env(safe-area-inset-right)) calc(var(--sp-md) + env(safe-area-inset-bottom)) calc(var(--sp-md) + env(safe-area-inset-left))}
  .el-parent-topbar__actions .el-btn{font-size:var(--fs-xs)}
  .el-stat-card{padding:var(--sp-md)}
  .el-form-actions,.el-finish__actions{flex-direction:column}.el-form-actions .el-btn,.el-finish__actions .el-btn{width:100%}
  .el-activity{padding:calc(var(--sp-sm) + env(safe-area-inset-top)) calc(var(--sp-sm) + env(safe-area-inset-right)) calc(var(--sp-xl) + env(safe-area-inset-bottom)) calc(var(--sp-sm) + env(safe-area-inset-left))}
  .el-activity .el-mission__top{grid-template-columns:var(--touch-min) minmax(0,1fr) auto;gap:var(--sp-sm);margin-bottom:var(--sp-sm)}
  .el-mission__identity{justify-content:flex-start;gap:var(--sp-xs);font-size:var(--fs-base)}
  .el-mission__identity-icon{display:none}
  .el-mission__identity-copy small{font-size:12px}
  .el-mission__step{padding:var(--sp-sm);font-size:var(--fs-sm)}
  .el-activity-progress{gap:var(--sp-sm);margin-bottom:var(--sp-sm);padding:var(--sp-sm)}
  .el-activity-progress__copy strong{max-width:132px;font-size:var(--fs-xs);line-height:var(--lh-tight)}
  .el-activity-progress__copy>span{display:none}
  .el-activity-progress__tokens{gap:2px}
  .el-activity-progress__token{width:18px;height:18px;font-size:11px}
  .el-activity-progress__token[data-current="true"]{box-shadow:0 0 0 2px var(--c-surface),0 0 0 4px var(--activity-frame)}
  .el-activity-stage{width:100%;min-height:220px;border-width:3px;border-radius:var(--r-lg)}
  .el-activity-scenery::after{bottom:-68px}
  .el-activity-scenery__cloud{font-size:38px}
  .el-activity-scenery__cloud--two{font-size:30px}
  .el-activity-scenery__landmark{left:2%;bottom:25px;font-size:62px}
  .el-activity-scenery__activity{right:3%;bottom:34px;font-size:48px}
  .el-activity-scenery__companion{right:20%;bottom:18px;font-size:30px}
  .el-activity-scenery__trail{right:3%;bottom:6px;font-size:var(--fs-sm)}
  .el-activity .el-mission__scene{grid-template-columns:54px minmax(0,1fr);gap:var(--sp-sm);width:calc(100% - 16px);min-height:214px;padding:58px 0 var(--sp-sm)}
  .el-activity .el-guide-avatar{font-size:48px}
  .el-activity .el-guide-bubble{padding:var(--sp-sm) var(--sp-md);border-width:2px}
  .el-activity .el-guide-bubble::before{left:-12px;width:18px;height:18px}
  .el-activity .el-guide-bubble h1{font-size:var(--fs-lg);line-height:var(--lh-tight)}
  .el-activity .el-guide-bubble .el-eyebrow{margin-bottom:var(--sp-xs);font-size:12px}
  .el-activity .el-instruction-btn{width:100%;min-height:var(--touch-min);margin-top:var(--sp-sm);padding:var(--sp-xs) var(--sp-sm);font-size:var(--fs-xs)}
  .el-activity .el-task-card{margin-top:calc(-1 * var(--sp-sm));padding:var(--sp-md);border-radius:var(--r-lg)}
  .el-task-card__cap{margin:0 0 var(--sp-sm)}
  .el-task-card__cap-icon{width:40px;height:40px;font-size:var(--fs-lg)}
  .el-task-card__cap-reward{font-size:var(--fs-xs)}
  .el-activity .el-task-scene{font-size:52px}
  .el-activity .el-listen-btn{min-height:var(--touch-min);font-size:var(--fs-base)}
  .el-options{gap:var(--sp-sm)}
  .el-option--adventure{min-height:88px;padding:var(--sp-sm);font-size:var(--fs-lg)}
  .el-option__marker{flex-basis:30px;height:30px;font-size:var(--fs-sm)}
  .el-option__icon{font-size:var(--fs-xl)}
  .el-builder--word .el-builder__answer::before,.el-builder--sentence .el-builder__answer::before{display:none}
  .el-story-card{padding:var(--sp-md)}
  .el-story-card__text{font-size:var(--fs-base);line-height:1.6}
  .el-rhythm-game{padding:var(--sp-md)}
  .el-rhythm-drum{width:142px;height:142px}
  .el-rhythm-drum__face{font-size:60px}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@font-face{font-family:'Andika';src:url('./fonts/Andika-Regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Andika';src:url('./fonts/Andika-SemiBold.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:'Andika';src:url('./fonts/Andika-Bold.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}

html,body{margin:0;min-height:100%}
body{background:var(--c-bg);color:var(--c-text);font-family:var(--font-family)}
#app{min-height:100vh}
