/* Lamha — une enluminure moderne : papier ivoire, lapis, turquoise, safran, vermillon, filets d'or rares.
   Cadres, médaillons, boutons et icônes peints (images-sources/interface.png, outils/decouper-interface.py) ;
   l'arabe est écrit par la police (Noto Naskh Arabic), jamais par une image. Portrait, une colonne centrée. */

@font-face { font-family: 'Naskh'; src: url('polices/naskh-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Naskh'; src: url('polices/naskh-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Alegreya'; src: url('polices/alegreya-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; src: url('polices/alegreya-sans-400.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Alegreya Sans'; src: url('polices/alegreya-sans-ext-400.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0100-024F, U+0259, U+02BE-02BF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Alegreya Sans'; src: url('polices/alegreya-sans-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --ivoire: #f3ead7; --papier: #ece0c4; --papier-fonce: #dccca7; --encre: #1d2433; --encre-douce: #4a4f5c;
  --lapis: #264b8c; --lapis-fonce: #1b3767; --turquoise: #2a9d8f; --turquoise-clair: #d5ece4;
  --safran: #e2a33b; --vermillon: #c8442c; --vermillon-clair: #f6dcd3; --or: #c9a24a;
  --largeur: min(100vw, 560px);
  --sur: env(safe-area-inset-bottom, 0px);
  font-family: 'Alegreya Sans', system-ui, sans-serif;
  color: var(--encre);
  -webkit-tap-highlight-color: transparent;
}
* { box-sizing: border-box; }
html, body { overscroll-behavior: none; }
body { font-size: 18px; user-select: none; -webkit-user-select: none; }
img { pointer-events: none; -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; padding: 0; border: 0; background: none; touch-action: manipulation; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
.ar { font-family: 'Naskh', serif; font-weight: 700; direction: rtl; unicode-bidi: isolate; line-height: 1.9; }
.lat { font-style: italic; color: var(--encre-douce); letter-spacing: .01em; }

/* Le papier : ivoire, un grain très léger et une lumière douce au centre. */
#app {
  position: fixed; inset: 0; margin: 0 auto; width: var(--largeur); overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% 35%, rgba(255, 252, 242, .9), rgba(255, 252, 242, 0) 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .36  0 0 0 0 .2  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>"),
    var(--papier);
  box-shadow: 0 0 60px rgba(0, 0, 0, .35);
}
.ecran { position: absolute; inset: 0; display: flex; flex-direction: column; }

/* ---------- Boutons peints (9 parties) ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 4px 26px;
  font-weight: 700; font-size: 19px; letter-spacing: .02em; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
  border-style: solid; border-width: 18px; border-image: url('img/ui/bouton-lapis.webp') 92 fill / 18px stretch;
  transition: transform .08s ease, filter .08s ease;
}
.bouton.turquoise { border-image-source: url('img/ui/bouton-turquoise.webp'); }
.bouton.vermillon { border-image-source: url('img/ui/bouton-vermillon.webp'); }
.bouton.ivoire { border-image-source: url('img/ui/bouton-ivoire.webp'); color: var(--lapis-fonce); text-shadow: none; }
.bouton.grand { min-height: 64px; font-size: 22px; padding: 6px 44px; }
.bouton.large { width: 100%; }
.bouton > * { margin: -14px 0; }
.bouton:active:not(:disabled), .bouton.appuye { transform: translateY(2px) scale(.985); filter: brightness(.94); }
.bouton:disabled { filter: grayscale(.85) brightness(1.08) opacity(.55); }
.rond { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; }
.rond { position: relative; }
.rond::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--lapis); box-shadow: 0 2px 0 var(--lapis-fonce); }
.rond img { position: relative; width: 22px; height: 22px; object-fit: contain; }
.rond:active { transform: scale(.94); }
.ligne-boutons { display: flex; gap: 12px; justify-content: center; }
.ligne-boutons .bouton { flex: 1; max-width: 240px; }

/* ---------- Premier écran ---------- */
#titre { align-items: center; justify-content: space-evenly; padding: 24px 24px calc(28px + var(--sur)); text-align: center; }
.titre-bloc { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.titre-rosace { position: relative; width: min(74vw, 330px); aspect-ratio: 1; display: grid; place-items: center; }
.titre-rosace img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(40, 30, 10, .25)); }
.titre-rosace .ar { position: relative; font-size: min(17vw, 76px); color: var(--lapis-fonce); margin-top: -6%; }
.titre-latin { font-family: 'Alegreya', serif; font-size: 52px; margin: 6px 0 0; letter-spacing: .04em; color: var(--encre); }
.titre-sous { margin: 0; font-size: 19px; color: var(--encre-douce); }
#titre.ouvert .titre-rosace { animation: entree-rosace .9s cubic-bezier(.2, .9, .25, 1) both; }
#titre.ouvert .titre-latin, #titre.ouvert .titre-sous { animation: monter .7s .25s ease both; }
#titre.ouvert #commencer { animation: monter .7s .4s ease both; }
#titre.sortie { animation: fondu-sortie .35s ease forwards; }
@keyframes entree-rosace { from { opacity: 0; transform: scale(.86) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes monter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fondu-sortie { to { opacity: 0; } }

/* ---------- Le chemin ---------- */
.barre-chemin {
  position: relative; z-index: 3; display: flex; align-items: center; gap: 14px; padding: 8px 12px 8px 14px; flex: none;
  background: linear-gradient(var(--papier) 70%, rgba(236, 224, 196, 0));
}
.lampion-bloc, .points-bloc { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 20px; font-variant-numeric: tabular-nums; }
.lampion-bloc img { height: 40px; }
.points-bloc img { height: 30px; }
.points-bloc { color: var(--lapis); }
.lampion-bloc b { color: var(--safran); min-width: 1.2em; }
.barre-chemin .rond { margin-left: auto; }
.parcours { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0 0 calc(140px + var(--sur)); scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
.unite { position: relative; padding: 8px 0 26px; }
.unite-tete { position: relative; margin: 6px auto 18px; width: min(88%, 420px); aspect-ratio: 710 / 423; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; }
.unite-tete::before { content: ''; position: absolute; inset: 0; background: url('img/ui/cartouche.webp') center / 100% 100% no-repeat; }
.unite-tete > * { position: relative; }
.unite-tete small { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.unite-tete h2 { margin: 0; max-width: 72%; font-family: 'Alegreya', serif; font-size: clamp(19px, 6.2vw, 26px); line-height: 1.05; }
.unite-tete.safran::before { background-image: url('img/ui/cartouche-safran.webp'); }
.unite-tete.turquoise::before { background-image: url('img/ui/cartouche-turquoise.webp'); }
.unite-tete.vermillon::before { background-image: url('img/ui/cartouche-vermillon.webp'); }
.unite-sous { text-align: center; margin: -8px 32px 18px; font-size: 16px; color: var(--encre-douce); }
.unite.fermee .unite-tete::before { filter: grayscale(1) brightness(1.25) opacity(.7); }
.noeuds { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 30px; }
.noeud { position: relative; width: 86px; height: 86px; display: grid; place-items: center; transform: translateX(var(--dx, 0px)); }
.noeud img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.noeud b { position: relative; font-family: 'Alegreya', serif; font-size: 26px; color: var(--lapis-fonce); }
.noeud .etoiles-mini { position: absolute; bottom: -12px; display: flex; gap: 1px; }
.noeud .etoiles-mini img { position: static; width: 18px; height: 18px; filter: none; }
.noeud.fait b { color: var(--turquoise); }
.noeud.ferme b { color: #9b917c; }
.noeud.actuel { width: 108px; height: 108px; }
.noeud.actuel::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 3px solid var(--safran); opacity: .9; }
.noeud.actuel b { font-size: 32px; }
.noeud.jeu { width: 104px; height: 104px; }
.noeud.jeu img.ic-oeil { position: relative; width: 42px; height: 42px; inset: auto; filter: none; }
.noeud:active { transform: translateX(var(--dx, 0px)) scale(.95); }
.etiquette-actuel { position: absolute; top: -34px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 3px 12px; border-radius: 6px; background: var(--encre); color: var(--ivoire); font-weight: 700; font-size: 15px; }
.etiquette-actuel::after { content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: var(--encre); }

.fiche {
  position: absolute; left: 12px; right: 12px; bottom: calc(14px + var(--sur)); z-index: 5; padding: 26px 26px 22px;
  border-style: solid; border-width: 34px; border-image: url('img/ui/panneau.webp') 130 fill / 34px stretch;
  margin: -34px; margin-bottom: 0; display: flex; flex-direction: column; gap: 10px; text-align: center;
  animation: fiche-entre .22s ease both; box-shadow: none;
}
.fiche h3 { margin: -6px 0 0; font-family: 'Alegreya', serif; font-size: 25px; color: var(--lapis-fonce); }
.fiche p { margin: 0; color: var(--encre-douce); }
.fiche-mots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; direction: rtl; }
.fiche-mots .ar { font-size: 24px; color: var(--encre); }
@keyframes fiche-entre { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.choix-vitesse { display: flex; gap: 6px; justify-content: center; }
.choix-vitesse button, .choix button { padding: 8px 12px; border-radius: 7px; border: 2px solid var(--papier-fonce); background: rgba(255, 255, 255, .5); font-weight: 700; font-size: 15px; color: var(--encre-douce); }
.choix-vitesse button.actif, .choix button.actif { border-color: var(--lapis); background: var(--lapis); color: #fff; }
#liens-plateforme { position: absolute; left: 12px; bottom: calc(12px + var(--sur)); z-index: 4; display: flex; gap: 8px; align-items: center; }
.lien-plateforme { padding: 4px 9px; border-radius: 5px; background: rgba(29, 36, 51, .82); color: var(--ivoire); font-size: 12px; }

/* ---------- Une leçon ---------- */
.barre-lecon { display: flex; align-items: center; gap: 14px; padding: 12px 16px 6px; flex: none; }
.fermer { width: 44px; height: 44px; font-size: 34px; line-height: 1; color: #9b917c; font-weight: 400; }
.avancee { flex: 1; height: 16px; border-radius: 8px; background: var(--papier-fonce); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15); }
.avancee i { display: block; height: 100%; width: 0; border-radius: 8px; background: linear-gradient(var(--turquoise), #23887b); transition: width .45s cubic-bezier(.3, 1.3, .5, 1); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .25); }
.serie-lecon { min-width: 26px; font-weight: 700; color: var(--safran); text-align: right; }
.exercice { flex: 1; display: flex; flex-direction: column; padding: 10px 20px 0; min-height: 0; overflow-y: auto; }
.exercice.entre { animation: ex-entre .32s ease both; }
@keyframes ex-entre { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
.consigne { margin: 4px 0 14px; font-family: 'Alegreya', serif; font-size: 23px; line-height: 1.2; }
.etiquette-nouveau { align-self: flex-start; margin-bottom: 4px; padding: 2px 10px; border-radius: 5px; background: var(--safran); color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }

/* Le mot, dans un cartouche ivoire, avec ses boutons de voix. */
.mot-carte {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 18px; margin-bottom: 16px;
  border-style: solid; border-width: 22px; border-image: url('img/ui/panneau.webp') 130 fill / 22px stretch;
}
.mot-carte .textes { flex: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 0; margin: -16px 0; }
.mot-carte .ar { font-size: 40px; color: var(--encre); }
.mot-carte .lat { font-size: 17px; margin-top: -6px; }
.mot-carte.phrase .ar { font-size: 32px; }
.voix-boutons { display: flex; flex-direction: column; gap: 6px; margin: -14px 0; }
.b-voix { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: var(--lapis); box-shadow: 0 3px 0 var(--lapis-fonce); }
.b-voix img { width: 30px; }
.b-voix.lent { width: 40px; height: 40px; background: var(--turquoise); box-shadow: 0 3px 0 #1d6f65; }
.b-voix.lent img { width: 18px; }
.b-voix:active, .b-voix.joue { transform: translateY(2px); box-shadow: 0 1px 0 var(--lapis-fonce); }
.b-voix.grand { width: 112px; height: 112px; border-radius: 26px; align-self: center; margin: 10px 0 18px; }
.b-voix.grand img { width: 64px; }

/* Découverte : l'image en grand, le mot, sa prononciation, sa traduction. */
.decouverte { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; margin: auto 0; padding-bottom: 10px; }
.decouverte .illus { width: min(52vw, 210px); aspect-ratio: 1; position: relative; display: grid; place-items: center; }
.decouverte .illus::before { content: ''; position: absolute; inset: -6%; background: url('img/ui/face-carte.webp') center / contain no-repeat; }
.decouverte .illus img { position: relative; width: 66%; }
.decouverte .ar { font-size: 58px; color: var(--lapis-fonce); margin-top: 6px; }
.decouverte.phrase .ar { font-size: 40px; }
.decouverte .lat { font-size: 21px; margin-top: -10px; }
.decouverte .trad { font-family: 'Alegreya', serif; font-size: 25px; margin-top: 4px; }
.decouverte .b-voix { margin-top: 12px; }

/* Choix d'images 2 × 2. */
.grille-images { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: auto 0; }
.carte-image {
  position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: 16px;
  background: rgba(255, 252, 244, .85); border: 3px solid var(--papier-fonce); box-shadow: 0 4px 0 var(--papier-fonce);
  transition: transform .08s ease, border-color .12s ease, box-shadow .12s ease;
}
.carte-image img { width: 72%; }
.carte-image .chiffre { position: absolute; top: 6px; left: 9px; font-size: 13px; color: #a89d84; font-weight: 700; }
.carte-image.choisi { border-color: var(--lapis); box-shadow: 0 4px 0 var(--lapis); background: #eef2fb; }
.carte-image.juste { border-color: var(--turquoise); box-shadow: 0 4px 0 var(--turquoise); background: var(--turquoise-clair); }
.carte-image.faux { border-color: var(--vermillon); box-shadow: 0 4px 0 var(--vermillon); background: var(--vermillon-clair); animation: secoue .35s ease; }
.carte-image:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--papier-fonce); }

/* Choix de textes (traduction ou arabe). */
.choix-textes { display: flex; flex-direction: column; gap: 10px; margin: auto 0 8px; }
.tuile {
  min-height: 56px; padding: 8px 16px; border-radius: 13px; text-align: center; font-size: 20px;
  background: rgba(255, 252, 244, .9); border: 3px solid var(--papier-fonce); box-shadow: 0 4px 0 var(--papier-fonce);
  transition: transform .08s ease, border-color .12s ease, box-shadow .12s ease, opacity .2s ease;
}
.tuile .ar { font-size: 28px; line-height: 1.6; }
.tuile .lat { display: block; font-size: 14px; }
.tuile.choisi { border-color: var(--lapis); box-shadow: 0 4px 0 var(--lapis); background: #eef2fb; }
.tuile.juste { border-color: var(--turquoise); box-shadow: 0 4px 0 var(--turquoise); background: var(--turquoise-clair); }
.tuile.faux { border-color: var(--vermillon); box-shadow: 0 4px 0 var(--vermillon); background: var(--vermillon-clair); animation: secoue .35s ease; }
.tuile.fini { opacity: .28; pointer-events: none; }
.tuile:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--papier-fonce); }
@keyframes secoue { 0%, 100% { transform: none; } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }

/* Paires : deux colonnes. */
.paires { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin: auto 0; }
.paires .tuile { min-height: 62px; display: grid; place-items: center; padding: 4px 8px; font-size: 18px; }
.paires .tuile .ar { font-size: 25px; }

/* Construire une phrase : la ligne de réponse, la banque d'étiquettes. */
.reponse-ligne {
  min-height: 132px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; padding: 10px 2px;
  background: repeating-linear-gradient(transparent 0 61px, var(--papier-fonce) 61px 63px);
}
.reponse-ligne.ar-ligne { direction: rtl; }
.banque { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin: 18px 0 8px; }
.banque.ar-ligne { direction: rtl; }
.etiq {
  min-height: 52px; padding: 4px 14px; border-radius: 11px; font-size: 19px; background: #fffaf0;
  border: 2px solid var(--papier-fonce); box-shadow: 0 3px 0 var(--papier-fonce);
}
.etiq .ar { font-size: 25px; line-height: 1.6; }
.etiq.vide { background: var(--papier-fonce); color: transparent; box-shadow: none; border-color: transparent; pointer-events: none; }
.etiq.pose { animation: pose .18s ease; }
@keyframes pose { from { transform: scale(.85); } to { transform: none; } }

/* Le pied : « Vérifier », puis le bandeau du verdict. */
.pied { position: relative; flex: none; padding: 12px 20px calc(16px + var(--sur)); transition: background .2s ease; }
.pied.juste { background: var(--turquoise-clair); }
.pied.faux { background: var(--vermillon-clair); }
.verdict { margin-bottom: 12px; animation: monter .25s ease both; }
.verdict b { display: block; font-family: 'Alegreya', serif; font-size: 25px; }
.pied.juste .verdict b { color: #1d6f65; }
.pied.faux .verdict b { color: #a3341f; }
.verdict p { margin: 4px 0 0; font-size: 17px; color: var(--encre-douce); }
.verdict p .ar { font-size: 25px; color: var(--encre); line-height: 1.6; }
.serie-bulle { position: absolute; right: 18px; top: -46px; padding: 6px 12px; border-radius: 8px; background: var(--safran); color: #fff; font-weight: 700; animation: monter .3s ease both; }

/* Fin de leçon et fin de partie. */
#fin-lecon, #fin-coup { align-items: center; justify-content: space-between; padding: 40px 24px calc(24px + var(--sur)); text-align: center; }
.fin-bloc { margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; }
.fin-bloc h2 { margin: 0; font-family: 'Alegreya', serif; font-size: 36px; color: var(--lapis-fonce); }
.etoiles { display: flex; gap: 8px; }
.etoiles img { width: 64px; height: 64px; }
.etoiles img.allume { animation: etoile .5s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes etoile { from { transform: scale(.2) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }
.fin-chiffres { display: flex; gap: 10px; width: 100%; max-width: 440px; }
.fin-chiffres > div { flex: 1; padding: 12px 6px; border-radius: 12px; border: 2px solid var(--papier-fonce); background: rgba(255, 252, 244, .7); }
.fin-chiffres b { display: block; font-family: 'Alegreya', serif; font-size: 30px; font-variant-numeric: tabular-nums; color: var(--lapis-fonce); }
.fin-chiffres small { font-size: 14px; color: var(--encre-douce); }
.fin-lampion { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 700; color: #9a6a14; }
.fin-lampion img { height: 54px; animation: etoile .6s .5s cubic-bezier(.2, 1.6, .4, 1) both; }
#fin-lecon > .bouton { width: 100%; }
#fin-coup .ligne-boutons { width: 100%; }
@media (max-width: 440px) { #fin-coup .ligne-boutons { flex-direction: column-reverse; align-items: stretch; } #fin-coup .ligne-boutons .bouton { max-width: none; } }

/* ---------- Coup d'œil ---------- */
#coup .barre-lecon { gap: 10px; }
.pile-score { display: flex; flex-direction: column; align-items: center; min-width: 74px; line-height: 1; }
.pile-score small { font-size: 13px; color: var(--encre-douce); margin-bottom: 2px; }
.pile-score b { font-family: 'Alegreya', serif; font-size: 30px; font-variant-numeric: tabular-nums; }
.pile-score.moi b { color: var(--turquoise); }
.pile-score.adverse b { color: var(--vermillon); }
.cartes-restantes { flex: 1; display: grid; place-items: center; }
.cartes-restantes b { display: grid; place-items: center; width: 46px; height: 46px; background: url('img/ui/dos-carte.webp') center / contain no-repeat; color: #fff; font-size: 17px; text-shadow: 0 1px 2px #000; }
.table { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; padding: 0 0 calc(10px + var(--sur)); min-height: 0; }
/* La carte en page = le disque ivoire intérieur ; la bordure peinte déborde autour (plus de place aux symboles). */
.carte { position: relative; width: min(70vw, 34dvh, 360px); aspect-ratio: 1; flex: none; }
.carte { will-change: transform; }
.carte::before { content: ''; position: absolute; inset: -17%; border-radius: 50%; background: url('img/ui/face-carte.webp') center / contain no-repeat; box-shadow: 0 8px 16px rgba(40, 30, 10, .26); }
.carte .symbole { position: absolute; left: 0; top: 0; display: grid; place-items: center; transform: translate(-50%, -50%) rotate(var(--r, 0deg)); }
.carte.haut .symbole .ar { font-size: var(--t, 30px); color: var(--encre); line-height: 1.5; white-space: nowrap; }
.carte.haut .symbole .lat { font-size: 13px; margin-top: -8px; white-space: nowrap; }
.carte.haut .symbole { flex-direction: column; text-align: center; }
.carte.bas .symbole { width: var(--t, 70px); aspect-ratio: 1; border-radius: 50%; }
.carte.bas .symbole img { width: 100%; }
.carte.bas .symbole:active { filter: brightness(.9); }
.carte.arrive { animation: carte-arrive .38s cubic-bezier(.2, .9, .3, 1.1) both; }
@keyframes carte-arrive { from { transform: translateY(-40px) rotate(-14deg) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.carte.part-moi { animation: part-moi .42s ease-in forwards; }
.carte.part-ordi { animation: part-ordi .42s ease-in forwards; }
@keyframes part-moi { to { transform: translate(38vw, -48dvh) scale(.25) rotate(30deg); opacity: 0; } }
@keyframes part-ordi { to { transform: translate(-38vw, -12dvh) scale(.25) rotate(-30deg); opacity: 0; } }
.carte.gelee { filter: grayscale(.8) brightness(.9); }
.carte.double::before { box-shadow: 0 0 0 4px rgba(226, 163, 59, .9), 0 0 26px 6px rgba(226, 163, 59, .8); }
.symbole.trouve { animation: trouve .5s ease both; z-index: 2; }
@keyframes trouve { 30% { transform: translate(-50%, -50%) rotate(0deg) scale(1.35); } 100% { transform: translate(-50%, -50%) rotate(0deg) scale(1.2); } }
.symbole.trouve .ar { color: var(--turquoise) !important; }
.symbole.rate { animation: secoue .35s ease; }
.coup-message { min-height: 28px; margin: 0; font-weight: 700; color: var(--encre-douce); text-align: center; }
#particules { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 35; }

/* Face à face : deux moitiés, celle du haut tournée vers l'autre joueur. */
#duo { background: linear-gradient(var(--papier-fonce), var(--papier) 48%, var(--papier) 52%, var(--papier-fonce)); }
.moitie { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: space-evenly; gap: 6px; padding: 6px 10px; position: relative; }
.moitie.haut { transform: rotate(180deg); }
.moitie-tete { position: absolute; top: 4px; left: 10px; right: 10px; display: flex; align-items: center; gap: 10px; z-index: 2; pointer-events: none; }
.moitie-tete b { font-family: 'Alegreya', serif; font-size: 30px; color: var(--turquoise); }
.moitie-tete .coup-message { flex: 1; text-align: left; min-height: 0; font-size: 15px; }
.carte.petite { width: min(40vw, 22dvh, 260px); }
.duo-milieu { flex: none; display: flex; align-items: center; justify-content: center; gap: 18px; height: 40px; border-block: 2px solid var(--or); background: var(--ivoire); }
.duo-milieu b { font-family: 'Alegreya', serif; font-size: 20px; color: var(--lapis-fonce); }
@media (orientation: landscape) { .moitie { flex-direction: row; } }
@media (max-aspect-ratio: 3/5) { .moitie { flex-direction: column; } .carte.petite { width: min(54vw, 19dvh, 220px); } }

/* Multijoueur : amis, salon, partage. */
.liste-amis { display: flex; flex-direction: column; gap: 6px; max-height: 46dvh; overflow-y: auto; }
.ami { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 252, 244, .8); border: 1px solid var(--papier-fonce); text-align: left; width: 100%; }
.ami-av, .place .ami-av { width: 40px; height: 40px; border-radius: 50%; background: var(--papier-fonce) center / cover no-repeat; flex: none; }
.ami-nom { flex: 1; display: flex; flex-direction: column; }
.ami-nom small { color: var(--encre-douce); font-size: 14px; }
.ami.hors-ligne { opacity: .55; }
.ami-inviter { padding: 6px 12px; border-radius: 8px; background: var(--lapis); color: #fff; font-weight: 700; font-size: 15px; }
.ami.invite .ami-inviter { background: var(--turquoise); }
.places { display: flex; flex-direction: column; gap: 8px; }
.place { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--papier-fonce); background: rgba(255, 252, 244, .8); }
.place.libre { border-style: dashed; color: var(--encre-douce); }
.place small { margin-left: auto; color: var(--turquoise); font-weight: 700; }
.note { font-size: 15px; color: var(--encre-douce); margin: 6px 0; }
.panneau-reglages h3 { margin: 14px 0 6px; font-family: 'Alegreya', serif; font-size: 20px; }
.lien-tuto.sombre { color: var(--encre-douce); margin-top: 8px; }
.bouton.petit { min-height: 44px; font-size: 16px; padding: 2px 14px; }
#fiche-duels { margin-top: 2px; }
#fiche-duels .bouton { flex: 1; }

/* ---------- Titre dessiné ---------- */
.titre-latin img { width: min(78vw, 360px); height: auto; display: block; margin: -10px auto -6px; }
.titre-rosace { width: min(52vw, 230px); }
.titre-rosace .ar { font-size: min(12vw, 54px); }

/* ---------- Onglets des pistes, révision du jour ---------- */
.onglets { flex: none; display: flex; gap: 6px; margin: -4px 16px 6px; padding: 4px; border-radius: 12px; background: rgba(220, 204, 167, .55); position: relative; z-index: 3; }
.onglets button { flex: 1; padding: 8px 6px; border-radius: 9px; font-weight: 700; font-size: 16px; color: var(--encre-douce); transition: background .15s ease, color .15s ease; }
.onglets button.actif { background: var(--ivoire); color: var(--lapis-fonce); box-shadow: 0 2px 4px rgba(60, 40, 10, .15); }
.carte-revision { display: flex; align-items: center; gap: 12px; margin: 8px 16px 10px; width: calc(100% - 32px); padding: 12px 16px; text-align: left; border-radius: 14px; background: linear-gradient(120deg, #fff7e2, #f6e6bf); border: 2px solid var(--safran); box-shadow: 0 3px 0 #c98a24; }
.carte-revision img { width: 40px; }
.carte-revision b { display: block; font-family: 'Alegreya', serif; font-size: 20px; color: #8a5a10; }
.carte-revision small { font-size: 15px; color: var(--encre-douce); }
.carte-revision:active { transform: translateY(2px); box-shadow: 0 1px 0 #c98a24; }

/* ---------- Formes d'une lettre ---------- */
.formes { display: flex; gap: 18px; direction: rtl; margin-top: 10px; }
.formes .ar { font-size: 40px; color: var(--encre); min-width: 44px; text-align: center; padding: 0 6px; border-bottom: 2px solid var(--papier-fonce); }
.formes-note { font-size: 13px; color: #9b917c; margin-top: 2px; }

/* ---------- Mon carnet ---------- */
.carnet-compte { margin-left: auto; padding-right: 8px; font-weight: 700; color: var(--turquoise); }
.cherche { margin: 0 16px 8px; padding: 12px 14px; font: inherit; font-size: 17px; border-radius: 12px; border: 2px solid var(--papier-fonce); background: #fffaf0; color: var(--encre); outline: none; user-select: text; -webkit-user-select: text; }
.cherche:focus { border-color: var(--lapis); }
.carnet-liste { flex: 1; overflow-y: auto; padding: 0 16px calc(20px + var(--sur)); }
.carnet-liste h3 { margin: 18px 4px 6px; font-family: 'Alegreya', serif; font-size: 19px; color: var(--lapis-fonce); }
.carnet-vide { text-align: center; color: var(--encre-douce); margin-top: 40px; }
.ligne-carnet { display: grid; grid-template-columns: 44px 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; width: 100%; padding: 8px 10px; margin-bottom: 6px; text-align: left; border-radius: 12px; background: rgba(255, 252, 244, .7); border: 1px solid var(--papier-fonce); }
.ligne-carnet > img, .ligne-carnet > i { grid-row: 1 / 3; width: 44px; height: 44px; }
.ligne-carnet > i { border-radius: 50%; background: url('img/ui/ic-voix.webp') center / 22px no-repeat var(--lapis); }
.ligne-carnet .trad { font-size: 16px; color: var(--encre-douce); }
.ligne-carnet .textes { grid-column: 3; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: flex-end; }
.ligne-carnet .ar { font-size: 25px; line-height: 1.5; }
.ligne-carnet .lat { font-size: 13px; margin-top: -6px; }
.ligne-carnet .maitrise { grid-column: 2; display: flex; gap: 3px; }
.ligne-carnet .maitrise b, .ligne-carnet .maitrise em { width: 14px; height: 4px; border-radius: 2px; background: var(--turquoise); }
.ligne-carnet .maitrise em { background: var(--papier-fonce); }
.ligne-carnet:active { background: var(--turquoise-clair); }

/* ---------- Tutoriel ---------- */
.tuto { position: fixed; left: 0; right: 0; margin: 0 auto; top: calc(112px + env(safe-area-inset-top, 0px)); z-index: 30; width: min(92vw, 470px); padding: 14px 16px 10px; border-radius: 14px; background: var(--encre); color: var(--ivoire); box-shadow: 0 10px 24px rgba(0, 0, 0, .3); animation: monter .25s ease both; pointer-events: auto; }
.tuto p { margin: 0 0 6px; font-size: 17px; line-height: 1.35; }
.lien-tuto { font-size: 14px; color: rgba(243, 234, 215, .7); text-decoration: underline; padding: 4px 0; }
.main-tuto { position: fixed; z-index: 31; width: 48px; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); animation: main-tuto 1.1s ease-in-out infinite; }
@keyframes main-tuto { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- Réglages ---------- */
.barre-titre { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.barre-titre h2 { margin: 0; font-family: 'Alegreya', serif; font-size: 28px; }
.panneau-reglages { margin: 6px 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 16px; border-style: solid; border-width: 26px; border-image: url('img/ui/panneau.webp') 130 fill / 26px stretch; }
.reglage { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 19px; margin: -6px 0; }
.reglage.colonne { flex-direction: column; align-items: flex-start; }
.reglage .choix { display: flex; flex-wrap: wrap; gap: 6px; }
.interrupteur { width: 58px; height: 34px; border-radius: 17px; background: #c9bea4; position: relative; transition: background .18s ease; flex: none; }
.interrupteur i { position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .18s ease; }
.interrupteur[aria-checked='true'] { background: var(--turquoise); }
.interrupteur[aria-checked='true'] i { transform: translateX(24px); }
.version { margin: 4px 0 0; font-size: 14px; color: #9b917c; }
.note-essai { margin: 0; font-size: 14px; color: #9b917c; }

/* ---------- Fenêtres, orientation, toasts ---------- */
.voile { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(20, 22, 30, .45); padding: 20px; }
.boite { width: min(100%, 420px); padding: 18px 20px; text-align: center; border-style: solid; border-width: 30px; border-image: url('img/ui/panneau.webp') 130 fill / 30px stretch; animation: fiche-entre .2s ease both; }
.boite h3 { margin: -8px 0 6px; font-family: 'Alegreya', serif; font-size: 25px; }
.boite p { margin: 0 0 16px; color: var(--encre-douce); }
#tourner { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; background: var(--encre); color: var(--ivoire); text-align: center; padding: 24px; }
#tourner .centre { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 420px; }
#tourner p { margin: 0; font-size: 19px; }
#tourner .aide { font-size: 15px; opacity: .7; }
#toasts { position: fixed; left: 50%; top: calc(10px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 45; display: flex; flex-direction: column; gap: 6px; width: min(92vw, 440px); pointer-events: none; }
.toast { padding: 10px 14px; border-radius: 10px; background: var(--encre); color: var(--ivoire); font-size: 16px; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); animation: monter .22s ease both; }
.toast.erreur { background: #7d2a1b; }
.toast.sort { opacity: 0; transition: opacity .3s ease; }

@media (min-height: 760px) {
  .consigne { font-size: 25px; }
  .grille-images { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01s !important; transition-duration: .01s !important; } }