/* Écris avec Plume (js/ecrire.js) : une feuille de papier sur la nuit, les outils dessous.
   Préfixe ec- partout (.ear, .tile… existent déjà ailleurs dans le jeu). */
#ecrire { align-items: center; }
.ec-head { position: absolute; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center;
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); pointer-events: none; }
.ec-head > * { pointer-events: auto; }
.ec-head .round-btn { width: 56px; height: 56px; color: #FFD27A; background: #2E3384; box-shadow: 2px 5px 0 rgba(3, 4, 15, .5); }
.ec-head .round-btn svg { width: 56%; }
.ec-desk { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2.4vh, 24px); width: min(100% - 32px, 880px); height: 100%;
  padding: calc(84px + env(safe-area-inset-top, 0px)) 0 max(18px, env(safe-area-inset-bottom, 0px)); box-sizing: border-box; }
.ec-sheet { position: relative; flex: 1 1 auto; width: 100%; min-height: 0; border-radius: 6px; padding: clamp(18px, 3vw, 34px); box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(12px, 2.4vh, 26px); overflow-y: auto; color: #26224A;
  background-color: #F3E6C9; box-shadow: 2px 6px 0 rgba(3, 4, 15, .45), 0 0 80px rgba(255, 210, 122, .16); transform: rotate(-.4deg); }
.ec-tools { flex: 0 0 auto; display: flex; justify-content: center; align-items: center; gap: clamp(16px, 4vw, 40px); min-height: 84px; position: relative; width: 100%; }

/* L'oreille de Plume : on la touche, elle s'allume pendant qu'elle écoute */
.ec-ear { width: clamp(130px, 22vmin, 190px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: #FFD27A; flex: 0 0 auto;
  background: radial-gradient(circle at 60% 35%, #3B40A6, #2E3384 58%, #1E2170); box-shadow: 0 0 0 10px rgba(255, 210, 122, .14), 0 0 44px rgba(255, 210, 122, .45), 2px 6px 0 rgba(3, 4, 15, .4);
  animation: ecBreathe 3.6s ease-in-out infinite; }
.ec-ear svg { width: 52%; }
.ec-ear.on { animation: none; box-shadow: 0 0 0 14px rgba(255, 210, 122, .22), 0 0 70px rgba(255, 210, 122, .8); }
.ec-ear.hearing { animation: ecHear .9s ease-in-out infinite; }
@keyframes ecBreathe { 50% { transform: scale(1.04); } }
@keyframes ecHear { 50% { box-shadow: 0 0 0 26px rgba(255, 210, 122, .12), 0 0 90px rgba(255, 210, 122, .9); transform: scale(1.06); } }
.ec-ear:active { transform: scale(.95); }

/* Deux portes : l'oreille (un mot) et la bulle (des phrases, EC7) ; ce que Plume entend s'écrit dessous */
.ec-doors { display: flex; justify-content: center; align-items: center; gap: clamp(22px, 6vw, 64px); }
.ec-doors .ec-ear:disabled { opacity: .35; animation: none; }
.ec-bubble { animation-delay: -1.8s; }
.ec-bubble svg { width: 50%; }
.ec-live { margin: 0; min-height: 1.3em; max-width: 680px; text-align: center; font: 600 clamp(20px, 3.4vmin, 30px)/1.3 var(--read); color: rgba(38, 34, 74, .6); }
.ec-live:empty { display: none; }

/* Les mots du grimoire, en images */
.ec-known { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 760px; }
.ec-pic { width: clamp(58px, 9vmin, 76px); aspect-ratio: 1; border-radius: 14px; background: #FFF8E8; box-shadow: 0 3px 0 #D8C49B; display: grid; place-items: center; padding: 6px; box-sizing: border-box; }
.ec-pic .gpic { width: 100%; height: 100%; display: block; }
.ec-pic:active { transform: scale(.94); }
.ec-keys { position: absolute; left: 0; bottom: 6px; width: 54px; height: 54px; border-radius: 14px; color: #A9A6D6; opacity: .55; display: grid; place-items: center; }
.ec-keys svg { width: 70%; }
.ec-keys.holding { opacity: 1; color: #FFD27A; box-shadow: 0 0 0 3px rgba(255, 210, 122, .5); transition: box-shadow 1s linear; }

/* Ce que Plume a entendu */
.ec-heard { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ec-heard .gpic, .ec-picture .gpic { width: clamp(110px, 20vmin, 170px); aspect-ratio: 1; display: block; }
.ec-big { margin: 0; font: 600 clamp(36px, 7vmin, 68px)/1.15 var(--read); text-align: center; color: #26224A; overflow-wrap: anywhere; }
.ec-alts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ec-alt { font: 600 clamp(24px, 4.4vmin, 38px)/1.1 var(--read); color: #26224A; background: #FFF8E8; border-radius: 999px; padding: .45em .9em; box-shadow: 0 3px 0 #D8C49B; }
.ec-alt.picked { box-shadow: 0 0 0 4px #FFD27A, 0 3px 0 #D8C49B; }

/* La ligne d'écriture */
.ec-line { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; row-gap: .3em; font: 600 clamp(34px, 7vmin, 66px)/1.15 var(--read); color: #2E3384; min-height: 1.4em; max-width: 100%; }
.ec-gap { width: .4em; }
.ec-dash { color: #26224A; }
.ec-final { font-size: clamp(44px, 10vmin, 96px); }
.ec-word { position: relative; display: inline-flex; align-items: flex-end; min-height: 1.15em; padding: 0 .04em; }
.ec-word.later { width: calc(var(--n, 3) * .42em); border-bottom: .07em dotted rgba(38, 34, 74, .35); margin-bottom: .1em; }
.ec-word.now { min-width: 1.2em; border-bottom: .07em solid rgba(233, 176, 64, .9); margin-bottom: .1em; }
.ec-word.done { color: #26224A; }
.ec-word.pop { animation: ecPop .5s cubic-bezier(.34, 1.56, .64, 1); }
.ec-word.cap .ec-u:first-child { color: #C9302C; }
.ec-word.cap.glow .ec-u:first-child { text-shadow: 0 0 18px rgba(255, 190, 80, .9); }
.ec-dot { color: #C9302C; }
.ec-u { position: relative; display: inline-block; }
.ec-u.ghost { color: rgba(38, 34, 74, .32); }
.ec-u.cos::after, .ec-u.dbl::after { content: ''; position: absolute; left: .04em; right: .04em; bottom: -.12em; height: .09em; border-radius: 99px; background: #E9B040; }
.ec-u.dbl::after { background: #4FC9B7; }
.ec-u.gold { color: #B9781A; text-shadow: 0 0 14px rgba(255, 210, 122, .8); }
.ec-u.land { animation: ecLand .4s cubic-bezier(.3, 1.6, .5, 1); }
.ec-new { position: absolute; top: -.3em; right: -.22em; width: .42em; min-width: 22px; aspect-ratio: 1; cursor: pointer; filter: drop-shadow(0 0 6px #FFD66B); animation: paNew 1.6s ease-in-out infinite; }
.ec-new svg { width: 100%; height: 100%; display: block; }
@keyframes ecPop { 40% { transform: scale(1.12); } }
@keyframes ecLand { 0% { transform: translateY(-40%) scale(.5); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* Une étincelle par son */
.ec-sparks { --spread: 1; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; min-height: clamp(70px, 12vmin, 100px);
  gap: calc(8px + var(--spread) * clamp(16px, 5vw, 56px)); transition: gap .45s cubic-bezier(.3, 1.3, .5, 1); }
.ec-spark { width: clamp(56px, 10vmin, 86px); transition: transform .25s, opacity .25s, filter .25s; }
.ec-spark.off { opacity: .35; transform: scale(.82); }
.ec-spark.now { transform: scale(1.2); }
.ec-spark.now .sp-glow, .ec-spark.done .sp-glow { opacity: .55; }
.ec-spark.done { opacity: .75; transform: scale(.9); }

/* Des phrases (EC7) : Plume écrit, l'enfant copie. Le mot arrive lettre par lettre ; toucher un mot l'étire en sons. */
.ec-confirm.ec-long .ec-big { font-size: clamp(26px, 5vmin, 46px); max-width: 760px; }
.ec-copy { justify-content: flex-start; padding-top: clamp(26px, 6vh, 60px); }
.ec-copy .ec-line { font-size: clamp(30px, 5.8vmin, 56px); row-gap: .55em; line-height: 1.3; }
.ec-copy .ec-word.done, .ec-copy .ec-word.now { cursor: pointer; }
.ec-copy .ec-word.now .ec-u { animation: ecLand .35s cubic-bezier(.3, 1.6, .5, 1) backwards; animation-delay: calc(var(--k, 0) * 110ms); }
.ec-copy .ec-word .ec-u { transition: margin .3s cubic-bezier(.3, 1.4, .5, 1); }
.ec-copy .ec-word.stretch .ec-u { margin: 0 .2em; }
.ec-copy .ec-u.sing { color: #B9781A; text-shadow: 0 0 16px rgba(255, 210, 122, .95); transform: translateY(-.08em); }
.ec-copy .ec-u.ghost.sing { color: rgba(38, 34, 74, .5); }

/* L'aide : la lanterne de Plume, et ce qu'elle montre */
.ec-hint { min-height: clamp(70px, 13vmin, 120px); display: flex; justify-content: center; align-items: center; }
.ec-card { display: inline-flex; align-items: center; gap: 14px; background: #FFF8E8; border-radius: 12px; padding: 10px 18px; box-shadow: 0 3px 0 #D8C49B; animation: ecLand .35s ease-out; }
.ec-card .gpic { width: clamp(56px, 10vmin, 84px); aspect-ratio: 1; display: block; }
.ec-card b { font: 600 clamp(30px, 6vmin, 52px)/1 var(--read); color: #26224A; }
.ec-card.ghost b { color: rgba(38, 34, 74, .4); }
.ec-card.shown b { color: #B9781A; text-shadow: 0 0 14px rgba(255, 210, 122, .8); }
.ec-opts { gap: 12px; padding: 10px; }
.ec-opt { min-width: 70px; height: 70px; padding: 0 14px; border-radius: 12px; background: #F3E6C9; box-shadow: 0 3px 0 #C9B48A; font: 600 34px/1 var(--read); color: #26224A; }
.ec-opt:active { transform: scale(.94); }
.ec-help { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; color: #FFD27A; background: #2E3384; box-shadow: 2px 5px 0 rgba(3, 4, 15, .45), 0 0 22px rgba(255, 210, 122, .3); }
.ec-help svg { width: 62%; }
.ec-help:active { transform: scale(.94); }

/* La page tourne */
.ec-sheet.ec-flip { animation: ecFlip .45s cubic-bezier(.37, 0, .63, 1); }
@keyframes ecFlip { 50% { transform: perspective(1000px) rotateY(-14deg) translateX(-4%); opacity: .3; } }

/* Le clavier des grands */
.ec-form { width: min(100%, 640px); }
.ec-form input { width: 100%; box-sizing: border-box; font: 600 clamp(28px, 5vmin, 44px)/1.2 var(--read); color: #26224A; background: #FFF8E8; border: 0; border-radius: 12px; padding: .4em .6em; box-shadow: inset 0 2px 0 #D8C49B; }

/* La tour : l'encrier à côté du grimoire */
.hud-ink { grid-column: 3; grid-row: 1; justify-self: end; margin-right: 78px; }
.hud-book { grid-row: 1; }
.hud-ink svg { width: 70%; }
.lueur .hud-ink { color: #FFD27A; background: #2E3384 var(--g-felt); box-shadow: 2px 5px 0 rgba(3, 4, 15, .5); outline: 1.5px dashed #E9B040; outline-offset: -6px; }
@media (max-height: 500px) { .hud-ink { margin-right: 64px; } }
@media (max-width: 380px) { .hud-ink { margin-right: 62px; } .hud-ink, .hud-book { width: 54px; height: 54px; } }

@media (max-height: 560px) { .ec-desk { padding-top: calc(70px + env(safe-area-inset-top, 0px)); } .ec-ear { width: 110px; } }
@media (max-width: 420px) { .ec-ear { width: clamp(110px, 34vw, 140px); } }
@media (prefers-reduced-motion: reduce) { .ec-ear, .ec-ear.hearing, .ec-word.pop, .ec-u.land, .ec-copy .ec-word.now .ec-u, .ec-new, .ec-card, .ec-sheet.ec-flip { animation: none; } .ec-sparks { transition: none; } }