/* Les fenetres HTML reprennent le papier et la typographie des menus du jeu. */
body[data-menu="pastel"] { background: #f7f3eb; }
body #kotoba-sauvegarde { background: #273f3a66; color: #273f3a; }
body #kotoba-sauvegarde .boite,
body #ponpon-hors-ligne {
    background: #fffdf7; color: #273f3a; border: 1px solid #d6d6c8;
    border-radius: 20px; box-shadow: 0 12px 40px #273f3a20;
    font-family: "Zen Maru Gothic", sans-serif;
    padding: 24px;
}
body #kotoba-sauvegarde h2,
body #ponpon-hors-ligne h2 { font-family: "Dela Gothic One", sans-serif; color: #273f3a; font-weight: 400; font-size: 24px; }
body #kotoba-sauvegarde p,
body #ponpon-hors-ligne .conseil { color: #59685f; }
body #kotoba-sauvegarde textarea { background: #f7f3eb; border: 1px solid #d6d6c8; border-radius: 10px; }
body #kotoba-sauvegarde button,
body #ponpon-hors-ligne button {
    background: #ede8dd; color: #273f3a;
    border-radius: 13px; border: 1px solid #d6d6c8; box-shadow: 0 3px 0 #d6d6c8; min-height: 48px;
    font-family: "Zen Maru Gothic", sans-serif; font-weight: 700;
    transition: background-color .16s, transform .16s;
}
body #kotoba-sauvegarde button.action,
body #ponpon-hors-ligne button:not(.secondaire) { background: #efaf99; }
body #kotoba-sauvegarde button.sombre,
body #ponpon-hors-ligne button.secondaire { background: #ede8dd; color: #273f3a; }
body #kotoba-sauvegarde button:hover,
body #ponpon-hors-ligne button:hover { filter: brightness(.97); }
body #kotoba-sauvegarde button:active,
body #ponpon-hors-ligne button:active { transform: translateY(2px); box-shadow: 0 1px 0 #d6d6c8; }
body #kotoba-sauvegarde button:focus-visible,
body #ponpon-hors-ligne button:focus-visible { outline: 2px solid #38634f; outline-offset: 3px; }
body #kotoba-sauvegarde .mot { color: #83602b; }
body #ponpon-hors-ligne::backdrop { background: #273f3a66; }
@media (prefers-reduced-motion: reduce) {
    body #kotoba-sauvegarde button, body #ponpon-hors-ligne button { transition: none; }
}

body #kotoba-sauvegarde button:disabled,
body #ponpon-hors-ligne button:disabled { background: #e6e3da; color: #59685f; box-shadow: none; cursor: default; transform: none; filter: none; }
body #kotoba-sauvegarde textarea:focus-visible { outline: 2px solid #38634f; outline-offset: 3px; }
@media (max-width: 420px) {
    body #kotoba-sauvegarde .boite, body #ponpon-hors-ligne { padding: 20px; border-radius: 18px; }
}

/* Les annonces du progres (progres.js) : defi du jour, coffre, sceau. Une
   carte de papier en haut, qui ne prend jamais le doigt. */
.annonces { position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 10px); z-index: 60; display: flex; justify-content: center; pointer-events: none; padding: 0 16px; }
.annonce { display: flex; align-items: center; gap: 12px; max-width: 420px; width: 100%; box-sizing: border-box; padding: 10px 14px 10px 10px;
    background: #fffdf7; color: #273f3a; border: 1px solid #d6d6c8; border-radius: 16px; box-shadow: 0 3px 0 #d6d6c8;
    font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif; opacity: 0; transform: translateY(-14px); transition: opacity .26s ease, transform .3s cubic-bezier(.2,.9,.3,1.2); }
.annonce.visible { opacity: 1; transform: none; }
.annonce-sceau { flex: 0 0 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1;
    font-family: "Dela Gothic One", sans-serif; font-weight: 400; font-size: 20px; color: #fffdf7; background: #38634f;
    box-shadow: inset 0 0 0 3px #fffdf7, 0 0 0 2px #38634f; transform: rotate(-6deg); }
.annonce.genre-coffre .annonce-sceau { background: #83602b; box-shadow: inset 0 0 0 3px #fffdf7, 0 0 0 2px #83602b; }
/* Un sceau gagne : l'encre rouge des tampons de gare. */
.annonce.genre-sceau .annonce-sceau { background: #b3343b; box-shadow: inset 0 0 0 3px #fffdf7, 0 0 0 2px #b3343b; }
/* Un jour de plus a la serie : le vermillon des hanko. */
.annonce.genre-serie .annonce-sceau { background: #c4552f; box-shadow: inset 0 0 0 3px #fffdf7, 0 0 0 2px #c4552f; }
/* Une rarete de carte decouverte (collection.js) : une petite carte de sa
   matiere a la place du sceau rond ; le kintsugi, ses veines d'or. */
.annonce.genre-rarete .annonce-sceau.forme-carte { flex: 0 0 32px; height: 44px; border-radius: 7px; color: #ffffff; font-size: 18px; text-shadow: 0 1px 0 rgba(31, 42, 51, .55);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55), 0 0 0 1.5px rgba(39, 63, 58, .45); }
.annonce.genre-rarete .annonce-sceau.veines { box-shadow: inset 0 0 0 2px #e8b93a, 0 0 0 1.5px rgba(39, 63, 58, .45); }
/* Un kana appris : le sceau a l'encre des cartes du jeu. */
.annonce.genre-kana .annonce-sceau { background: #325b79; box-shadow: inset 0 0 0 3px #fffdf7, 0 0 0 2px #325b79; font-family: "Zen Maru Gothic", sans-serif; font-weight: 900; font-size: 24px; }
.annonce-corps { min-width: 0; }
.annonce-titre { font-weight: 900; font-size: 14px; line-height: 1.25; }
.annonce-texte { font-weight: 500; font-size: 13px; line-height: 1.3; color: #59685f; }
@media (prefers-reduced-motion: reduce) { .annonce { transition: opacity .2s linear; transform: none; } }

/* Ecrire le mot (ecrire.js) : le papier des menus, un vrai champ de saisie,
   puis le mot qui se transforme, du romaji aux kana, des kana au kanji. */
#ponpon-ecrire {
    position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: center;
    padding: max(14px, env(safe-area-inset-top)) 16px 16px; background: #273f3a73; overflow-y: auto;
}
#ponpon-ecrire .boite {
    width: min(440px, 100%); margin-top: 3vh; background: #fffdf7; color: #273f3a; border: 1px solid #d6d6c8;
    border-radius: 20px; box-shadow: 0 12px 40px #273f3a26; padding: 18px 20px 20px; text-align: center;
    font-family: "Zen Maru Gothic", sans-serif;
}
#ponpon-ecrire .etiquette { font-size: 13px; font-weight: 700; color: #59685f; letter-spacing: .02em; }
#ponpon-ecrire .dessin { width: 104px; height: 104px; margin: 8px auto 2px; display: block; }
#ponpon-ecrire .sens { font-family: "Dela Gothic One", sans-serif; font-size: 24px; line-height: 1.25; margin: 4px 0 6px; }
#ponpon-ecrire .trou { font-size: 20px; font-weight: 700; margin: 6px 0; }
#ponpon-ecrire .trou .blanc { display: inline-block; min-width: 3.2em; border-bottom: 3px solid #efaf99; color: transparent; }
#ponpon-ecrire .consigne { font-size: 15px; color: #59685f; margin: 4px 0 10px; }
#ponpon-ecrire .champ {
    width: 100%; box-sizing: border-box; font: 700 24px "Zen Maru Gothic", sans-serif; color: #273f3a; text-align: center;
    padding: 12px 14px; border-radius: 14px; border: 2px solid #d6d6c8; background: #f7f3eb; outline: none;
}
#ponpon-ecrire .champ:focus { border-color: #38634f; background: #fffdf7; }
#ponpon-ecrire .champ:disabled { opacity: .7; }
#ponpon-ecrire .aide { min-height: 20px; font-size: 14px; color: #59685f; margin: 8px 0 4px; }
#ponpon-ecrire.juste .aide { color: #2f7a4f; font-weight: 700; }
#ponpon-ecrire.faux .aide { color: #b0384f; font-weight: 700; }
#ponpon-ecrire .boutons { display: flex; gap: 10px; margin-top: 10px; }
#ponpon-ecrire .boutons button {
    flex: 1; min-height: 48px; border-radius: 13px; border: 1px solid #d6d6c8; box-shadow: 0 3px 0 #d6d6c8;
    background: #ede8dd; color: #273f3a; font: 700 16px "Zen Maru Gothic", sans-serif; cursor: pointer;
}
#ponpon-ecrire .boutons button.action { background: #efaf99; }
#ponpon-ecrire .boutons button:active { transform: translateY(2px); box-shadow: 0 1px 0 #d6d6c8; }
#ponpon-ecrire .boutons button:focus-visible { outline: 2px solid #38634f; outline-offset: 3px; }
#ponpon-ecrire .metamorphose:empty { display: none; }
#ponpon-ecrire .scene { position: relative; height: 128px; margin-top: 10px; }
#ponpon-ecrire .scene > div {
    position: absolute; left: 0; right: 0; transition: transform .45s ease, opacity .45s ease, filter .45s ease, font-size .45s ease, top .45s ease;
    font-weight: 700; line-height: 1.1;
}
#ponpon-ecrire .m-romaji { top: 38px; font-size: 34px; color: #273f3a; }
#ponpon-ecrire .m-kana { top: 30px; font-size: 44px; opacity: 0; filter: blur(6px); transform: scale(.85); }
#ponpon-ecrire .m-kanji { top: 34px; font-size: 54px; font-weight: 900; opacity: 0; filter: blur(6px); transform: scale(.85); }
#ponpon-ecrire .etape-2 .m-romaji { top: 92px; font-size: 18px; color: #59685f; }
#ponpon-ecrire .etape-2 .m-kana { opacity: 1; filter: none; transform: none; }
#ponpon-ecrire .etape-3 .m-romaji { top: 100px; font-size: 16px; color: #59685f; }
#ponpon-ecrire .etape-3 .m-kana { top: 0; font-size: 18px; color: #59685f; opacity: 1; filter: none; transform: none; }
#ponpon-ecrire .etape-3 .m-kanji { opacity: 1; filter: none; transform: none; }
#ponpon-ecrire .m-phrase { font-size: 15px; color: #59685f; margin-top: 4px; }
/* L'evolution (ecrire.js) : une silhouette de lumiere sur fond d'encre, deux
   formes qui alternent de plus en plus vite, un eclair, la forme nouvelle. */
#ponpon-ecrire .m-annonce { font-size: 15px; font-weight: 700; color: #59685f; margin-top: 8px; }
#ponpon-ecrire .scene { border-radius: 14px; transition: background-color .5s ease; }
#ponpon-ecrire .scene.evolue { background-color: #273f3a; }
#ponpon-ecrire .scene.evolue::before {
    content: ""; position: absolute; left: 12%; right: 12%; top: -4px; bottom: -4px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 238, 190, .75), rgba(255, 238, 190, 0)); animation: evo-lueur .5s ease-in-out infinite alternate;
}
@keyframes evo-lueur { from { opacity: .35; } to { opacity: 1; } }
#ponpon-ecrire .scene.evolue > div { transition: none; color: #fff; text-shadow: 0 0 10px #fff, 0 0 24px #ffe9a8; filter: none; transform: none; }
#ponpon-ecrire .scene.evo-kana .m-kana, #ponpon-ecrire .scene.evo-kana.alt .m-romaji { opacity: 0; }
#ponpon-ecrire .scene.evo-kana.alt .m-kana { opacity: 1; }
#ponpon-ecrire .scene.evo-kanji .m-romaji { opacity: 0; }
#ponpon-ecrire .scene.evo-kanji .m-kana { top: 30px; font-size: 44px; opacity: 1; }
#ponpon-ecrire .scene.evo-kanji .m-kanji, #ponpon-ecrire .scene.evo-kanji.alt .m-kana { opacity: 0; }
#ponpon-ecrire .scene.evo-kanji.alt .m-kanji { opacity: 1; }
#ponpon-ecrire .scene.apparu::after {
    content: ""; position: absolute; left: -14px; right: -14px; top: -12px; bottom: -12px; border-radius: 18px;
    background: #fff; pointer-events: none; animation: evo-eclair .5s ease-out forwards;
}
@keyframes evo-eclair { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #ponpon-ecrire .scene > div { transition: none; } }
#ponpon-ecrire .ecrit { font-size: 14px; color: #59685f; margin-bottom: 4px; }
#ponpon-ecrire .ecrit::after { content: " « " attr(data-saisie) " »"; font-weight: 700; color: #273f3a; }

/* Garder la partie (garder.js) : l'invitation a l'ecran d'accueil apres la
   premiere reussite, et la reprise d'une partie Safari dans l'icone. */
dialog.ponpon-garder {
    box-sizing: border-box; width: min(92vw, 460px); max-height: 90dvh; overflow: auto;
    background: #fffdf7; color: #273f3a; border: 1px solid #d6d6c8; border-radius: 20px; box-shadow: 0 12px 40px #273f3a20;
    font: 500 16px/1.5 "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif; padding: 24px;
}
dialog.ponpon-garder::backdrop { background: #273f3a66; }
dialog.ponpon-garder h2 { margin: 0 0 10px; font-family: "Dela Gothic One", sans-serif; font-weight: 400; font-size: 24px; line-height: 1.2; }
dialog.ponpon-garder p { margin: 10px 0; }
dialog.ponpon-garder .conseil, dialog.ponpon-garder .etat { color: #59685f; font-size: 15px; }
dialog.ponpon-garder .etat:empty { display: none; }
dialog.ponpon-garder ol.etapes { margin: 10px 0 14px; padding-left: 22px; }
dialog.ponpon-garder ol.etapes li { margin: 6px 0; }
dialog.ponpon-garder textarea { box-sizing: border-box; width: 100%; min-height: 72px; margin: 6px 0; padding: 10px; border: 1px solid #d6d6c8; border-radius: 10px; background: #f7f3eb; color: #273f3a; font: 13px/1.35 Menlo, monospace; -webkit-user-select: text; user-select: text; }
dialog.ponpon-garder button {
    display: block; width: 100%; min-height: 48px; margin: 8px 0 0; padding: 10px 14px; cursor: pointer;
    background: #ede8dd; color: #273f3a; border: 1px solid #d6d6c8; border-radius: 13px; box-shadow: 0 3px 0 #d6d6c8;
    font: 700 16px "Zen Maru Gothic", sans-serif; transition: background-color .16s, transform .16s;
}
dialog.ponpon-garder button.action { background: #efaf99; }
dialog.ponpon-garder button:active { transform: translateY(2px); box-shadow: 0 1px 0 #d6d6c8; }
dialog.ponpon-garder button:focus-visible, dialog.ponpon-garder textarea:focus-visible { outline: 2px solid #38634f; outline-offset: 3px; }
dialog.ponpon-garder button:disabled { background: #e6e3da; color: #59685f; box-shadow: none; cursor: default; transform: none; }
@media (prefers-reduced-motion: reduce) { dialog.ponpon-garder button { transition: none; } }

/* Tenir la carte (tenir.js) : la carte du Vocab Dex prise en main, en
   perspective. Chaque lumiere est une nappe peinte une fois, que la boucle
   deplace, tourne ou eclaircit (transform, opacity) : le compositeur la
   pose, rien ne se repeint quand la carte penche. Les nappes debordent de
   moitie de chaque cote pour pouvoir glisser. */
#ponpon-tenir { position: fixed; inset: 0; z-index: 55; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
#ponpon-tenir .voile { position: absolute; inset: 0; background: #1f2a33; opacity: 0; }
#ponpon-tenir .scene { position: absolute; inset: 0; pointer-events: none; }
#ponpon-tenir .ombre { position: absolute; background: #1f2a33; filter: blur(16px); opacity: 0; will-change: transform, opacity; }
#ponpon-tenir .carte { position: absolute; transform-style: preserve-3d; pointer-events: auto; cursor: pointer; will-change: transform; }
#ponpon-tenir .tranche { position: absolute; inset: 0; }
#ponpon-tenir .face { position: absolute; inset: 0; overflow: hidden; isolation: isolate; transform: translateZ(0.5px); }
#ponpon-tenir .face > * { position: absolute; left: 0; top: 0; pointer-events: none; }
#ponpon-tenir .fond { display: block; }
#ponpon-tenir .lumiere { width: 100%; height: 100%; overflow: hidden; opacity: 0; will-change: opacity; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
#ponpon-tenir .nappe { position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; will-change: transform; }
/* Le reflet : une tache de lumiere douce, a l'oppose de la pente (le bord qui vient vers nous prend la lumiere). */
#ponpon-tenir .reflet { mix-blend-mode: screen; }
#ponpon-tenir .reflet .nappe { background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .5) 12%, rgba(255, 255, 255, .14) 24%, rgba(255, 255, 255, 0) 36%); }
/* L'ombre gagne le bord qui s'eloigne (un degrade par axe, retourne selon le sens). */
#ponpon-tenir .ombrage-x, #ponpon-tenir .ombrage-y { mix-blend-mode: multiply; }
#ponpon-tenir .ombrage-x .nappe, #ponpon-tenir .ombrage-y .nappe, #ponpon-tenir .teinte .nappe { left: 0; top: 0; width: 100%; height: 100%; }
#ponpon-tenir .ombrage-x .nappe { background: linear-gradient(90deg, rgba(31, 42, 51, 0) 42%, rgba(31, 42, 51, .22) 100%); }
#ponpon-tenir .ombrage-y .nappe { background: linear-gradient(180deg, rgba(31, 42, 51, 0) 42%, rgba(31, 42, 51, .2) 100%); }
/* Le washi : un lustre de papier, large et doux. */
#ponpon-tenir .lustre { mix-blend-mode: screen; }
#ponpon-tenir .lustre .nappe { background: linear-gradient(115deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .55) 49%, rgba(255, 255, 255, 0) 60%); }
/* Les metaux : deux larges bandes de lumiere et le fil brosse, qui glissent ensemble sur le cadre. */
#ponpon-tenir .brosse { mix-blend-mode: overlay; }
#ponpon-tenir .brosse .nappe {
    background-image: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .95) 45%, rgba(255, 255, 255, 0) 51%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, .6) 58%, rgba(255, 255, 255, 0) 62%),
        repeating-linear-gradient(12deg, rgba(255, 255, 255, 0) 0 3px, rgba(255, 255, 255, .38) 3px 4px, rgba(31, 42, 51, .1) 4px 7px);
}
#ponpon-tenir .trait { mix-blend-mode: screen; }
#ponpon-tenir .trait .nappe { background: linear-gradient(102deg, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, .5) 48.5%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, .5) 51.5%, rgba(255, 255, 255, 0) 55%); }
/* L'arc-en-ciel et le holo : des bandes d'arc-en-ciel pastel qui recolorent la carte en glissant
   (couleur seule : la lumiere et les mots restent), et, sur le cadre, des eclats de feuille. */
#ponpon-tenir .holo { mix-blend-mode: color; }
#ponpon-tenir .holo .nappe { background: repeating-linear-gradient(112deg, #ff9fc0 0%, #ffd38f 5%, #9ff0c0 10%, #96ccff 15%, #c9a8ff 20%, #ff9fc0 25%); }
#ponpon-tenir .eclats { mix-blend-mode: screen; }
#ponpon-tenir .eclats .nappe { background: repeating-linear-gradient(36deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .85) 1.4%, rgba(255, 255, 255, 0) 2.8%, rgba(255, 255, 255, 0) 7%); }
/* Le polychrome : une teinte que l'angle choisit (la boucle donne sa couleur). */
#ponpon-tenir .teinte { mix-blend-mode: multiply; }
/* Le bord de lumiere : un pinceau qui tourne autour du milieu de la carte, vu par un anneau du cadre. */
#ponpon-tenir .bord { mix-blend-mode: screen; }
#ponpon-tenir .bord .nappe { background: conic-gradient(from 72deg at 50% 50%, rgba(255, 246, 216, 0) 0deg, rgba(255, 246, 216, .9) 12deg, #fff 18deg, rgba(255, 246, 216, .9) 24deg, rgba(255, 246, 216, 0) 36deg, rgba(255, 246, 216, 0) 360deg); }
/* Le kintsugi : un fil de lumiere qui court sur l'or des veines. */
#ponpon-tenir .lueur-or { mix-blend-mode: screen; }
#ponpon-tenir .lueur-or .nappe { background: linear-gradient(135deg, rgba(255, 252, 238, 0) 44%, #fffdf2 50%, rgba(255, 252, 238, 0) 56%); }
/* Les pierres : les facettes du cadre, un groupe par pente. */
#ponpon-tenir .facettes { mix-blend-mode: screen; will-change: opacity; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
#ponpon-tenir .dessin { overflow: hidden; will-change: transform; }
#ponpon-tenir .geste { position: absolute; inset: 0; transform-origin: 50% 100%; }
#ponpon-tenir .geste img { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
#ponpon-tenir .geste .fixe { width: 100%; height: 100%; }
#ponpon-tenir .ombre-dessin { filter: brightness(0) blur(1.5px); opacity: 0; will-change: transform, opacity; }
#ponpon-tenir .etoile { transform-origin: 50% 50%; opacity: 0; will-change: transform, opacity; }