/* しらんの間 — interface.
   même socle que les autres outils : le papier domine, aucune couleur qui ne soit fonctionnelle, angles vifs.
   tous les kanji sont dessinés par jigmo (字雲), découpée en morceaux (data/polices.css). */

:root {
  --papier: #f6f3ec;
  --encre: #161310;
  --discret: #8b8378;
  --trait: rgba(22, 19, 16, 0.12);
  --fond-panneau: #fbf9f4;
  --shu: #b8372a;
  --mincho: 'Hiragino Mincho ProN', 'Yu Mincho', 'Songti SC', Georgia, serif;
}

* { box-sizing: border-box; margin: 0; padding: 0 }
html, body { height: 100% }
body { background: var(--papier); color: var(--encre); font-family: var(--mincho);
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100% }
button { font: inherit; color: inherit }

#scene { display: grid; grid-template-columns: 1fr 380px; height: 100vh; overflow: hidden }
#scene > * { min-height: 0; min-width: 0 }

/* ---- les résultats ---- */
#resultats { position: relative; overflow-y: auto; padding: 1.6rem 2rem 4rem }
#resultats.vide, #resultats.cosmos { overflow: hidden; padding: 0 }
#resultats.vide .tete-resultats, #resultats.vide #liste, #resultats.vide #suite, #resultats.vide .credits-bas,
#resultats.cosmos .tete-resultats, #resultats.cosmos #liste, #resultats.cosmos #suite, #resultats.cosmos .credits-bas { display: none }
/* le choix de la forme, en bas de l'image */
.formes { position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%); display: flex; gap: 0.4rem; z-index: 3 }
.formes[hidden] { display: none }
.forme { width: 2.5rem; height: 2.5rem; padding: 0.3rem; background: rgba(246, 243, 236, 0.9); border: 1px solid var(--trait); cursor: pointer; color: var(--encre) }
.forme:hover { border-color: var(--encre) }
.forme.actif { border-color: var(--shu); color: var(--shu) }
.forme svg { width: 100%; height: 100%; display: block }
/* les formes sous licence : un petit coin vermillon */
.forme { position: relative }
.forme.verrou::after { content: ""; position: absolute; top: 2px; right: 2px; width: 0; height: 0; border-top: 7px solid var(--shu); border-left: 7px solid transparent }
.action.actif { background: var(--encre); color: var(--papier) }
/* la sphère occupe toute la place quand aucune clé n'est choisie */
.sphere { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab }
.sphere:active { cursor: grabbing }
.sphere[hidden] { display: none }
/* un fichier arrive : le petit sceau tourne en haut à droite */
.charge { position: fixed; top: 1rem; right: calc(380px + 1rem); width: 1rem; height: 1rem; border: 2px solid var(--shu);
  animation: tourne 1.2s cubic-bezier(.6,0,.4,1) infinite; z-index: 25; pointer-events: none } /* au-dessus de la fiche aussi */
.charge[hidden] { display: none }
.score { display: flex; align-items: center; gap: 0.9rem }
/* le compteur du jeu : un sceau vermillon pressé à chaque point */
.sceau { min-width: 3rem; height: 3rem; padding: 0 0.4rem; display: inline-flex; align-items: center; justify-content: center;
  background: var(--shu); color: var(--papier); font-size: 1.5rem; letter-spacing: 0.02em; line-height: 1;
  transform: rotate(var(--penche, 0deg)); animation: presse 0.35s cubic-bezier(.2,.8,.3,1) }
.sceau.fini { background: none; color: var(--shu); border: 2px solid var(--shu) }
@keyframes presse { from { transform: rotate(var(--penche, 0deg)) scale(1.35); opacity: 0.4 } to { transform: rotate(var(--penche, 0deg)) scale(1); opacity: 1 } }
.record { display: inline-flex; flex-direction: column; align-items: flex-start; font-size: 0.95rem; line-height: 1.3; letter-spacing: 0.08em }
.record-n { font-size: 1.3rem }
.score[hidden] { display: none }
/* le jeu : un kanji tourne sur lui-même ; l'attraper avant la fin du tour */
.k.tourne { color: var(--shu) }
/* c'est le caractère qui tourne, pas la case : on peut cliquer même quand il se présente de profil */
.k.tourne > span { display: inline-block; animation: pivote var(--duree, 2.4s) linear forwards }
@keyframes pivote { from { transform: rotateY(0) } to { transform: rotateY(360deg) } }
.k.pris { color: var(--papier); background: var(--shu) }
.tete-resultats { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-bottom: 0.9rem; border-bottom: 1px solid var(--trait); margin-bottom: 1rem; min-height: 3.2rem }
.choisies { font-family: shiran-cles, shiran, var(--mincho); font-size: 1.6rem; letter-spacing: 0.2em }
.compte { font-size: 0.95rem; letter-spacing: 0.06em; white-space: nowrap }
.aide { font-size: 1rem; line-height: 1.9; max-width: 34rem; padding-top: 1rem }
.groupe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem; margin-bottom: 0.6rem }
.groupe-traits { flex: none; min-width: 2.6rem; height: 2.6rem; display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; color: var(--shu); letter-spacing: 0.04em }
.k { font-family: shiran, var(--mincho); font-size: 1.9rem; line-height: 1; width: 2.6rem; height: 2.6rem;
  display: inline-flex; align-items: center; justify-content: center; background: none; border: 1px solid transparent; cursor: pointer }
.k:hover, .k:focus-visible { border-color: var(--encre); outline: none }
#suite { display: block; margin: 1.4rem auto 0; padding: 0.6rem 1.6rem }
#suite[hidden] { display: none }

.attente { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); display: flex; flex-direction: column;
  align-items: center; gap: 1rem; padding: 1.4rem 1.8rem; background: rgba(251, 249, 244, 0.94); border: 1px solid var(--trait) }
.attente[hidden] { display: none }
.attente-sceau { width: 2.4rem; height: 2.4rem; border: 2px solid var(--shu); animation: tourne 1.6s cubic-bezier(.6,0,.4,1) infinite }
.attente-txt { font-size: 0.95rem; letter-spacing: 0.1em }
@keyframes tourne { 0% { transform: rotate(0) } 50% { transform: rotate(90deg); background: rgba(184,55,42,.12) } 100% { transform: rotate(180deg) } }
@media (prefers-reduced-motion: reduce) { .attente-sceau { animation: none } }

/* ---- le panneau ---- */
#panel { background: var(--fond-panneau); border-left: 1px solid var(--trait); overflow-y: auto; padding: 1.4rem 1.2rem 3rem }
.marque { padding-bottom: 1.2rem; border-bottom: 1px solid var(--trait); margin-bottom: 1.1rem }
.marque-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem }
.marque-kanji { font-size: 1.3rem; font-weight: 400; letter-spacing: 0.14em }
.langues { display: flex; gap: 0.5rem }
.lang-opt { font-size: 0.8rem; letter-spacing: 0.1em; background: none; border: 0; cursor: pointer; padding: 0.1rem 0; opacity: 0.6 }
.lang-opt.actif { opacity: 1; border-bottom: 1px solid var(--encre) }

.bloc { display: flex; gap: 0.5rem; margin-bottom: 0.8rem }
.action { flex: 1 1 auto; font-size: 0.9rem; letter-spacing: 0.1em; padding: 0.5rem 0.8rem; background: none;
  border: 1px solid var(--encre); cursor: pointer; text-align: center; text-decoration: none; color: var(--encre) }
.action:hover { background: var(--encre); color: var(--papier) }
.filtre .opt { flex: 1 1 0; font-size: 0.9rem; letter-spacing: 0.06em; padding: 0.45rem 0.4rem; background: none;
  border: 1px solid var(--trait); cursor: pointer }
.filtre .opt.actif { border-color: var(--encre); box-shadow: inset 0 -2px 0 var(--encre) }

/* la grille des clés, comme jisho.org : rangées par nombre de traits */
.cles { display: flex; flex-wrap: wrap; gap: 2px; margin: 1rem 0 1.4rem; font-family: shiran-cles, shiran, var(--mincho) }
.cles .n { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mincho); font-size: 0.8rem; background: var(--encre); color: var(--papier) }
.cles .c { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem;
  line-height: 1; background: none; border: 1px solid var(--trait); cursor: pointer; padding: 0 }
.cles .c:hover { border-color: var(--encre) }
.cles .c.choisie { background: var(--shu); border-color: var(--shu); color: var(--papier) }
.cles .c:disabled { opacity: 0.2; cursor: default; border-color: transparent }

/* la saisie libre : n'importe quel caractère devient un élément */
.saisie { display: flex; gap: 0.5rem; margin: 0.2rem 0 0.6rem }
.saisie input { flex: 1 1 auto; min-width: 0; font: inherit; font-family: shiran-cles, shiran, var(--mincho); font-size: 1.05rem; padding: 0.4rem 0.6rem;
  background: var(--papier); color: var(--encre); border: 1px solid var(--trait); border-radius: 0 }
.saisie input:focus { outline: none; border-color: var(--encre) }
.saisie input::placeholder { color: var(--encre); opacity: 0.75 } /* lisible, mais pas confondu avec un texte tapé */
.saisie .action { flex: 0 0 auto }
.tapes { margin: 0 0 0.6rem }
.tapes[hidden] { display: none }
.credit { font-size: 0.85rem; line-height: 1.8; margin-top: 1rem }
.credit a, .pied a { color: var(--encre) }
.credits-bas { display: none; margin-top: 2.4rem; border-top: 1px solid var(--trait) }

/* ---- la fiche d'un kanji ---- */
.fiche { position: fixed; inset: 0; background: rgba(22, 19, 16, 0.35); display: flex; align-items: center; justify-content: center; z-index: 20; padding: 1rem }
.fiche[hidden] { display: none }
.fiche-carte { position: relative; background: var(--papier); border: 1px solid var(--encre); width: min(30rem, 100%);
  max-height: 100%; overflow-y: auto; padding: 1.6rem 1.6rem 1.4rem }
.fiche-fermer { position: absolute; top: 0.8rem; right: 0.8rem; background: none; border: 0; cursor: pointer; font-size: 0.9rem; letter-spacing: 0.08em }
.fiche-kanji { font-family: shiran, var(--mincho); font-size: 9rem; line-height: 1.15; text-align: center; margin: 0.6rem 0 1rem }
.fiche-infos { display: grid; grid-template-columns: auto 1fr; gap: 0.45rem 1rem; font-size: 0.95rem; line-height: 1.6 }
.fiche-infos dt { color: var(--shu); letter-spacing: 0.06em; white-space: nowrap }
.fiche-infos dd { word-break: break-word }
.fiche-infos .ids { font-family: shiran, var(--mincho); font-size: 1.3rem }
.fiche-infos .ids button { font-family: inherit; font-size: inherit; background: none; border: 0; border-bottom: 1px solid var(--shu); cursor: pointer; padding: 0 0.05em }
.fiche-actions { display: flex; gap: 0.6rem; margin-top: 1.3rem }
.toast { position: fixed; left: 50%; bottom: 2rem; transform: translateX(-50%); background: var(--encre); color: var(--papier);
  padding: 0.5rem 1rem; font-size: 0.9rem; z-index: 30 }

@media (max-width: 820px) {
  #scene { display: flex; flex-direction: column; height: auto; overflow: visible }
  #panel { order: -1; border-left: 0; border-bottom: 1px solid var(--trait); padding: 1rem 16px 1rem }
  .cles { max-height: 46vh; overflow-y: auto }
  #resultats { overflow: visible; padding: 1rem 16px 3rem }
  .credits-panneau { display: none }
  #resultats.vide, #resultats.cosmos { order: -2; height: 52vh; flex: none } /* au téléphone, la boule d'abord ; les résultats viennent sous les clés */
  .charge { right: 1rem }
  .credits-bas { display: block }
  .k { width: 2.4rem; height: 2.4rem; font-size: 1.75rem }
  .fiche-kanji { font-size: 7rem }
}