/* Tour de caisses 2D — l'estampe du port : papier washi, filets indigo, sceaux vermillon (CONCEPTION.md, « Fiche d'identité »).
   Tailles en unités virtuelles : 1 unité = var(--u) (base 720 × 1280 en portrait, commun/ecran.js). */
@font-face { font-family: 'Shippori'; src: url('./polices/ShipporiMinchoB1-600.woff2') format('woff2'); font-weight: 600; font-display: block; }
@font-face { font-family: 'Shippori'; src: url('./polices/ShipporiMinchoB1-800.woff2') format('woff2'); font-weight: 800; font-display: block; }
@font-face { font-family: 'ZenKaku'; src: url('./polices/ZenKakuGothicNew-500.woff2') format('woff2'); font-weight: 500; font-display: block; }
@font-face { font-family: 'ZenKaku'; src: url('./polices/ZenKakuGothicNew-700.woff2') format('woff2'); font-weight: 700; font-display: block; }

:root { --u: 0.5px; --indigo: #1f3a5f; --encre: #1b2433; --vermillon: #d2482b; --ocre: #c99a4b; --celadon: #8fb39a; --papier: #f1e6cf; --papier-fonce: #e3d3b2; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--indigo); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
body { font-family: 'ZenKaku', system-ui, sans-serif; color: var(--encre); }
/* Appui long : jamais la fenêtre du téléphone sur une image (porteur, 14 oct. 2026). */
img { pointer-events: none; -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; touch-action: manipulation; }
[hidden] { display: none !important; }

#jeu { position: fixed; inset: 0; }
#jeu canvas { display: block; }

/* ---------- Fond commun des écrans hors partie : l'estampe, floutée et voilée de papier ---------- */
#fond-menus { position: fixed; inset: 0; z-index: 1; background: var(--papier); }
#fond-menus .illustration { position: absolute; inset: -30px; background: url('img/illustration.webp') center 70% / cover; filter: blur(14px) saturate(0.9); opacity: 0.55; }
#fond-menus .voile { position: absolute; inset: 0; background: url('img/papier.webp') 0 0 / 300px, linear-gradient(rgba(241, 230, 207, 0.55), rgba(241, 230, 207, 0.85)); background-blend-mode: multiply; }
body.en-partie #fond-menus { display: none; }

/* ---------- Boutons dessinés (planche-interface) ---------- */
.sceau { display: block; min-height: calc(96 * var(--u)); min-width: calc(330 * var(--u)); margin: 0 auto; padding: calc(16 * var(--u)) calc(56 * var(--u));
  border-style: solid; border-width: calc(26 * var(--u)); border-image: url('img/sceau.webp') 36 fill / calc(26 * var(--u)) stretch;
  font: 800 calc(40 * var(--u)) 'Shippori', serif; color: #fff7e8; letter-spacing: 0.04em; text-shadow: 0 2px 0 rgba(80, 20, 10, 0.45);
  transition: transform 0.08s, filter 0.08s; }
.sceau.grand { font-size: calc(48 * var(--u)); min-width: calc(380 * var(--u)); }
.bande { display: block; width: 100%; min-height: calc(84 * var(--u)); padding: calc(10 * var(--u)) calc(30 * var(--u));
  border-style: solid; border-width: calc(22 * var(--u)); border-image: url('img/bande.webp') 34 fill / calc(22 * var(--u)) stretch;
  font: 600 calc(30 * var(--u)) 'Shippori', serif; color: var(--indigo); transition: transform 0.08s, filter 0.08s; }
.bande.petit { min-height: calc(64 * var(--u)); font-size: calc(24 * var(--u)); width: auto; display: inline-block; padding: calc(4 * var(--u)) calc(22 * var(--u)); }
.rond { width: calc(88 * var(--u)); height: calc(88 * var(--u)); background: url('img/rond.webp') center / contain no-repeat; display: grid; place-items: center; transition: transform 0.08s; }
.rond img { width: 46%; }
.appuye, .sceau:active, .bande:active, .rond:active, .ligne-menu:active { transform: translateY(2px) scale(0.97); filter: brightness(0.93); }
.feuille { border-style: solid; border-width: calc(30 * var(--u)); border-image: url('img/feuille.webp') 44 fill / calc(30 * var(--u)) stretch; padding: calc(8 * var(--u)) calc(14 * var(--u)); }

/* ---------- Écrans ---------- */
.ecran { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center;
  padding: max(env(safe-area-inset-top), calc(18 * var(--u))) calc(28 * var(--u)) max(env(safe-area-inset-bottom), calc(24 * var(--u))); }
.ecran > * { width: min(100%, calc(664 * var(--u))); }
.ecran.voile { background: rgba(20, 30, 48, 0.55); justify-content: center; z-index: 30; }
.barre-haut { display: flex; align-items: center; gap: calc(16 * var(--u)); min-height: calc(96 * var(--u)); }
.barre-haut h2 { flex: 1; margin: 0; font: 800 calc(46 * var(--u)) 'Shippori', serif; color: var(--indigo); letter-spacing: 0.02em; }
.retour { width: calc(76 * var(--u)); height: calc(76 * var(--u)); border-radius: 50%; background: var(--indigo); display: grid; place-items: center; box-shadow: 0 0 0 calc(3 * var(--u)) var(--papier), 0 0 0 calc(5 * var(--u)) var(--indigo); }
.retour img { width: 52%; }
.compteur, .compteur-etoiles { display: flex; align-items: center; gap: calc(6 * var(--u)); font: 800 calc(32 * var(--u)) 'Shippori', serif; color: var(--indigo); }
.compteur img, .compteur-etoiles img { width: calc(40 * var(--u)); }
.contenu { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: calc(26 * var(--u)); min-height: 0; }
h3 { font: 800 calc(30 * var(--u)) 'Shippori', serif; color: var(--indigo); margin: calc(10 * var(--u)) 0 calc(12 * var(--u)); }

/* Premier écran */
#titre { position: fixed; inset: 0; z-index: 31; overflow: hidden; background: var(--indigo); opacity: 0; transition: opacity 0.5s; }
#titre.ouvert { opacity: 1; }
#titre.sortie { opacity: 0; pointer-events: none; }
#titre .illustration { position: absolute; inset: 0; background: url('img/illustration.webp') center 62% / cover; animation: respire 14s ease-in-out infinite alternate; }
@keyframes respire { from { transform: scale(1.02); } to { transform: scale(1.06) translateY(-1%); } }
#titre .titre-jeu { position: absolute; left: 0; right: 0; margin: auto; top: max(4vh, env(safe-area-inset-top)); width: min(84vw, 62vh, 620px); filter: drop-shadow(0 6px 10px rgba(20, 30, 48, 0.35)); animation: titre-arrive 0.9s cubic-bezier(.2, 1.4, .4, 1) both 0.2s; }
@keyframes titre-arrive { from { transform: translateY(-30px) rotate(-2deg); opacity: 0; } to { transform: none; opacity: 1; } }
#titre .bas { position: absolute; left: 0; right: 0; bottom: max(5vh, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 14px; }
#titre #commencer { font-size: clamp(26px, 4.4vh, 44px); min-width: min(64vw, 380px); min-height: clamp(62px, 9vh, 96px); border-width: clamp(16px, 2.4vh, 26px); }
#telechargement { width: min(60vw, 300px); text-align: center; font: 500 13px 'ZenKaku', sans-serif; color: var(--papier); text-shadow: 0 1px 2px #000; }
#telechargement i { display: block; height: 3px; margin-bottom: 6px; background: var(--vermillon); transform-origin: left; transform: scaleX(0); box-shadow: 0 0 0 1px rgba(241, 230, 207, 0.6); }

/* Menu */
#menu { justify-content: flex-start; padding-top: 0; padding-left: 0; padding-right: 0; }
#menu > * { width: 100%; }
#menu .bandeau { position: relative; flex: 0 0 auto; height: 44%; max-height: calc(600 * var(--u)); background: url('img/illustration.webp') center 42% / cover; border-bottom: calc(6 * var(--u)) solid var(--indigo); box-shadow: 0 calc(4 * var(--u)) 0 var(--papier-fonce); display: flex; align-items: flex-start; justify-content: center; }
#menu .titre-menu { width: min(78%, calc(520 * var(--u))); margin-top: max(env(safe-area-inset-top), calc(26 * var(--u))); filter: drop-shadow(0 4px 8px rgba(20, 30, 48, 0.35)); }
#menu .compteur-etoiles { position: absolute; right: calc(20 * var(--u)); top: max(env(safe-area-inset-top), calc(16 * var(--u))); width: auto; background: rgba(241, 230, 207, 0.9); padding: calc(4 * var(--u)) calc(14 * var(--u)); border-radius: calc(6 * var(--u)); box-shadow: 0 0 0 calc(2 * var(--u)) var(--indigo); }
#menu .liste { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: calc(6 * var(--u)); width: min(100%, calc(620 * var(--u))); margin: 0 auto; padding: 0 calc(24 * var(--u)); }
.ligne-menu { display: flex; align-items: center; gap: calc(24 * var(--u)); text-align: left; padding: calc(14 * var(--u)) calc(10 * var(--u)); border-bottom: calc(2 * var(--u)) solid rgba(31, 58, 95, 0.18); transition: transform 0.08s; }
.ligne-menu:last-child { border-bottom: 0; }
.ligne-menu .pastille { flex: 0 0 auto; width: calc(84 * var(--u)); height: calc(84 * var(--u)); border-radius: 50%; background: var(--indigo); display: grid; place-items: center; box-shadow: 0 0 0 calc(3 * var(--u)) var(--papier), 0 0 0 calc(5 * var(--u)) var(--indigo); }
.ligne-menu .pastille img { width: 58%; }
.ligne-menu b { display: block; font: 800 calc(38 * var(--u)) 'Shippori', serif; color: var(--indigo); }
.ligne-menu small { display: block; font: 500 calc(24 * var(--u)) 'ZenKaku', sans-serif; color: #5b5a55; margin-top: calc(2 * var(--u)); }
.ligne-menu.indispo { opacity: 0.55; }
#liens-plateforme { position: absolute; left: calc(22 * var(--u)); bottom: max(env(safe-area-inset-bottom), calc(18 * var(--u))); display: flex; gap: calc(18 * var(--u)); width: auto; }
.lien { display: flex; align-items: center; gap: calc(8 * var(--u)); font: 500 calc(22 * var(--u)) 'ZenKaku', sans-serif; color: var(--indigo); opacity: 0.85; padding: calc(8 * var(--u)) 0; min-height: 44px; }
.lien img { width: calc(26 * var(--u)); filter: brightness(0) saturate(100%) invert(19%) sepia(30%) saturate(1200%) hue-rotate(185deg); }

/* Défis : une pile, le quai en bas */
#pile-defis { display: flex; flex-direction: column-reverse; gap: calc(8 * var(--u)); align-items: center; }
.defi { position: relative; display: flex; align-items: center; justify-content: space-between; gap: calc(14 * var(--u)); width: calc(var(--l) * var(--u)); min-height: calc(112 * var(--u)); padding: calc(6 * var(--u)) calc(34 * var(--u));
  background: url('img/longue.webp') center / 100% 100%; filter: drop-shadow(0 calc(4 * var(--u)) 0 rgba(27, 36, 51, 0.28)); transition: transform 0.12s; }
.defi > * { position: relative; }
.defi b { font: 800 calc(34 * var(--u)) 'Shippori', serif; color: #fff7e8; padding: calc(2 * var(--u)) calc(14 * var(--u)); background: var(--teinte); box-shadow: 0 0 0 calc(3 * var(--u)) var(--encre); border-radius: calc(3 * var(--u)); white-space: nowrap; }
.defi .etoiles { display: flex; gap: calc(2 * var(--u)); padding: calc(2 * var(--u)) calc(6 * var(--u)); background: rgba(27, 36, 51, 0.72); border-radius: calc(3 * var(--u)); }
.defi .etoiles img { width: calc(38 * var(--u)); }
.defi.ferme b { background: #77736a; }
.defi.choisi { transform: translateX(calc(16 * var(--u))) rotate(-1.2deg); }
.defi.choisi::after { content: ''; position: absolute; left: calc(-36 * var(--u)); top: 50%; width: calc(26 * var(--u)); height: calc(26 * var(--u)); transform: translateY(-50%) rotate(45deg); background: var(--vermillon); box-shadow: 0 0 0 calc(3 * var(--u)) var(--papier); }
.defi.ferme { filter: grayscale(0.85) brightness(0.9) drop-shadow(0 calc(4 * var(--u)) 0 rgba(27, 36, 51, 0.28)); }
#detail-defi h3 { margin-top: 0; font-size: calc(36 * var(--u)); }
#detail-defi p { margin: 0 0 calc(12 * var(--u)); font: 500 calc(26 * var(--u)) 'ZenKaku', sans-serif; line-height: 1.35; }
.paliers { display: flex; justify-content: space-around; margin: calc(8 * var(--u)) 0; }
.paliers div { text-align: center; font: 800 calc(28 * var(--u)) 'Shippori', serif; color: var(--indigo); }
.paliers img { display: block; width: calc(52 * var(--u)); margin: 0 auto calc(2 * var(--u)); }
.paliers .eteint img { filter: grayscale(1) opacity(0.45); }
.record-defi { font: 700 calc(26 * var(--u)) 'ZenKaku', sans-serif; color: var(--vermillon); }
#jouer-defi[disabled] { filter: grayscale(1) opacity(0.6); }

/* Chacun son tour */
.choix { display: flex; gap: calc(16 * var(--u)); justify-content: center; flex-wrap: wrap; }
.choix button { min-width: calc(96 * var(--u)); min-height: calc(88 * var(--u)); padding: calc(6 * var(--u)) calc(14 * var(--u)); font: 800 calc(34 * var(--u)) 'Shippori', serif; color: var(--indigo);
  background: var(--papier); box-shadow: 0 0 0 calc(3 * var(--u)) var(--indigo); border-radius: calc(4 * var(--u)); display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--u)); }
.choix button.actif { background: var(--indigo); color: var(--papier); box-shadow: 0 0 0 calc(3 * var(--u)) var(--indigo), 0 0 0 calc(7 * var(--u)) var(--vermillon); }
.choix .pion { width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: calc(3 * var(--u)); box-shadow: 0 0 0 calc(2 * var(--u)) var(--papier); }
.choix.petit button { min-height: calc(64 * var(--u)); font-size: calc(26 * var(--u)); }
.regle { font: 500 calc(25 * var(--u)) 'ZenKaku', sans-serif; line-height: 1.4; margin: calc(18 * var(--u)) 0 calc(6 * var(--u)); }

/* Réglages */
.reglage { display: flex; align-items: center; justify-content: space-between; min-height: calc(92 * var(--u)); font: 600 calc(32 * var(--u)) 'Shippori', serif; color: var(--indigo); border-bottom: calc(2 * var(--u)) solid rgba(31, 58, 95, 0.15); }
.interrupteur { position: relative; width: calc(104 * var(--u)); height: calc(54 * var(--u)); border-radius: calc(27 * var(--u)); background: #b9b2a2; box-shadow: inset 0 0 0 calc(3 * var(--u)) var(--indigo); transition: background 0.2s; }
.interrupteur i { position: absolute; top: calc(7 * var(--u)); left: calc(7 * var(--u)); width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%; background: var(--papier); box-shadow: 0 0 0 calc(3 * var(--u)) var(--indigo); transition: transform 0.2s; }
.interrupteur[aria-checked="true"] { background: var(--vermillon); }
.interrupteur[aria-checked="true"] i { transform: translateX(calc(50 * var(--u))); }
#r-tuto { margin-top: calc(26 * var(--u)); }
.version-jeu { display: flex; justify-content: space-between; align-items: center; margin-top: calc(18 * var(--u)); font: 500 calc(22 * var(--u)) 'ZenKaku', sans-serif; color: #6b675e; }
.lien-texte { text-decoration: underline; font: 500 calc(22 * var(--u)) 'ZenKaku', sans-serif; color: var(--indigo); min-height: 44px; }

/* ---------- En partie ---------- */
#hud { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
#hud > * { position: absolute; }
#b-pause { left: max(10px, calc(18 * var(--u))); top: max(env(safe-area-inset-top), 10px, calc(18 * var(--u))); width: max(48px, calc(88 * var(--u))); height: max(48px, calc(88 * var(--u))); pointer-events: auto; }
#vies { left: max(68px, calc(120 * var(--u))); top: max(calc(env(safe-area-inset-top) + 18px), calc(34 * var(--u))); display: flex; gap: max(4px, calc(8 * var(--u))); }
#vies img { width: max(30px, calc(50 * var(--u))); transition: transform 0.25s; }
#vies img.perdue { animation: perdue 0.5s; }
#vies img.gagnee { animation: gagnee 0.6s; }
@keyframes perdue { 30% { transform: scale(1.3) rotate(-12deg); } }
@keyframes gagnee { 40% { transform: scale(1.5); } }
#joueurs-vies { left: max(68px, calc(120 * var(--u))); top: max(env(safe-area-inset-top), 10px, calc(20 * var(--u))); display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.jv { display: flex; align-items: center; gap: calc(6 * var(--u)); font: 800 max(13px, calc(22 * var(--u))) 'Shippori', serif; color: var(--papier); background: rgba(27, 36, 51, 0.62); padding: calc(2 * var(--u)) calc(12 * var(--u)) calc(2 * var(--u)) calc(6 * var(--u)); border-radius: calc(4 * var(--u)); transition: opacity 0.3s; }
.jv.actif { box-shadow: 0 0 0 calc(3 * var(--u)) var(--papier); }
.jv.elimine { opacity: 0.4; text-decoration: line-through; }
.jv .pion { width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: calc(3 * var(--u)); }
.jv img { width: max(15px, calc(26 * var(--u))); }
/* Hauteur : étiquette horizontale (porteur, 14 oct. 2026 : le cartouche vertical était illisible sur téléphone).
   Tailles plancher en pixels : sur un téléphone, 1 unité ≈ 0,5 px, trop petit pour un chiffre qu'on lit en jouant. */
#cartouche { right: max(10px, calc(18 * var(--u))); top: max(env(safe-area-inset-top), 10px, calc(14 * var(--u))); min-width: max(118px, calc(220 * var(--u)));
  border-style: solid; border-width: max(7px, calc(12 * var(--u))); border-image: url('img/cartouche.webp') 16 fill / max(7px, calc(12 * var(--u))) stretch;
  padding: max(2px, calc(4 * var(--u))) max(8px, calc(14 * var(--u))); display: flex; flex-direction: column; align-items: center; filter: drop-shadow(0 2px 3px rgba(27, 36, 51, 0.4)); }
#cartouche .ligne { display: flex; align-items: baseline; gap: max(5px, calc(8 * var(--u))); }
#cartouche .ic { width: max(20px, calc(36 * var(--u))); align-self: center; filter: brightness(0) saturate(100%) invert(19%) sepia(30%) saturate(1200%) hue-rotate(185deg); }
#cartouche b { font: 800 max(30px, calc(54 * var(--u))) 'Shippori', serif; color: var(--encre); line-height: 1; font-variant-numeric: tabular-nums; }
#cartouche small { font: 800 max(16px, calc(28 * var(--u))) 'Shippori', serif; color: var(--encre); }
#record-hud { font: 700 max(12px, calc(20 * var(--u))) 'ZenKaku', sans-serif; color: var(--vermillon); white-space: nowrap; margin-top: 1px; }
#record-hud:empty { display: none; }
#etat-bonus { right: max(10px, calc(18 * var(--u))); top: calc(max(env(safe-area-inset-top), 10px) + max(78px, calc(130 * var(--u)))); display: flex; align-items: center; gap: calc(6 * var(--u)); font: 800 max(14px, calc(24 * var(--u))) 'Shippori', serif; color: var(--papier); background: rgba(27, 36, 51, 0.62); padding: 3px 10px 3px 5px; border-radius: 3px; }
#etat-bonus:empty { display: none; }
#etat-bonus img { width: max(18px, calc(32 * var(--u))); }
#bandeau-tour { left: 0; right: 0; margin: auto; top: calc(160 * var(--u)); width: fit-content; padding: calc(10 * var(--u)) calc(30 * var(--u)); font: 800 calc(34 * var(--u)) 'Shippori', serif; color: #fff7e8; background: var(--bandeau, var(--indigo)); box-shadow: 0 0 0 calc(3 * var(--u)) var(--papier), 0 0 0 calc(5 * var(--u)) var(--encre); border-radius: calc(4 * var(--u)); opacity: 0; transform: translateY(calc(-14 * var(--u))); transition: opacity 0.3s, transform 0.3s; }
#bandeau-tour.on { opacity: 1; transform: none; }
#aide { left: 0; right: 0; bottom: max(env(safe-area-inset-bottom), calc(120 * var(--u))); margin: auto; width: fit-content; max-width: 90%; text-align: center; padding: calc(10 * var(--u)) calc(24 * var(--u)); font: 700 calc(26 * var(--u)) 'ZenKaku', sans-serif; color: var(--papier); background: rgba(27, 36, 51, 0.7); border-radius: calc(4 * var(--u)); opacity: 0; transition: opacity 0.3s; }
#aide.on { opacity: 1; }

/* Fin : le rouleau se déroule du haut */
#rouleau { width: min(92%, calc(600 * var(--u))); text-align: center; transform-origin: top center; animation: derouler 0.7s cubic-bezier(.2, 1.2, .4, 1) both; display: flex; flex-direction: column; gap: calc(14 * var(--u)); padding-bottom: calc(18 * var(--u)); }
@keyframes derouler { from { transform: scaleY(0.05); opacity: 0.4; } to { transform: none; opacity: 1; } }
#rouleau h2, #pause h2 { margin: calc(4 * var(--u)) 0 0; font: 800 calc(44 * var(--u)) 'Shippori', serif; color: var(--indigo); }
#raison-fin { margin: 0; font: 500 calc(25 * var(--u)) 'ZenKaku', sans-serif; color: #5b5a55; }
#hauteur-fin { font: 800 calc(96 * var(--u)) 'Shippori', serif; color: var(--vermillon); line-height: 1; }
#hauteur-fin small { font-size: 0.4em; color: var(--indigo); }
#etoiles-fin { display: flex; justify-content: center; gap: calc(14 * var(--u)); }
#etoiles-fin img { width: calc(70 * var(--u)); }
#etoiles-fin img.allume { animation: etoile 0.45s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes etoile { from { transform: scale(0.2) rotate(-40deg); } }
#stats-fin { display: grid; grid-template-columns: 1fr auto; gap: calc(4 * var(--u)) calc(20 * var(--u)); font: 500 calc(24 * var(--u)) 'ZenKaku', sans-serif; text-align: left; padding: 0 calc(30 * var(--u)); }
#stats-fin b { font-family: 'Shippori', serif; font-weight: 800; text-align: right; color: var(--indigo); }
#stats-fin .classement { grid-column: 1 / -1; display: flex; align-items: center; gap: calc(10 * var(--u)); }
#stats-fin .pion { width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: calc(3 * var(--u)); }
#pause .feuille { width: min(88%, calc(520 * var(--u))); display: flex; flex-direction: column; gap: calc(14 * var(--u)); text-align: center; padding-bottom: calc(20 * var(--u)); }

/* Tutoriel */
#tuto { position: fixed; z-index: 25; left: 0; right: 0; margin: auto; bottom: max(env(safe-area-inset-bottom), calc(14 * var(--u))); width: min(92%, calc(600 * var(--u))); padding: calc(10 * var(--u)) calc(20 * var(--u)) calc(12 * var(--u)); background: var(--papier); box-shadow: 0 0 0 calc(3 * var(--u)) var(--indigo), 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(27, 36, 51, 0.35); border-radius: calc(4 * var(--u)); text-align: center; }
#tuto small { font: 700 calc(20 * var(--u)) 'ZenKaku', sans-serif; color: var(--vermillon); letter-spacing: 0.06em; text-transform: uppercase; }
#tuto em { display: block; margin: calc(-2 * var(--u)) 0 calc(10 * var(--u)); padding: calc(6 * var(--u)) calc(12 * var(--u)); font: 700 calc(23 * var(--u)) 'ZenKaku', sans-serif; font-style: normal; color: #fff7e8; background: var(--vermillon); border-radius: calc(3 * var(--u)); animation: rate 0.4s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes rate { 0% { transform: translateX(calc(-10 * var(--u))); } 40% { transform: translateX(calc(8 * var(--u))); } 100% { transform: none; } }
#tuto p { margin: calc(4 * var(--u)) 0 calc(10 * var(--u)); font: 600 calc(28 * var(--u)) 'Shippori', serif; color: var(--indigo); line-height: 1.3; }
#main-tuto { position: fixed; z-index: 24; width: calc(70 * var(--u)); left: calc(50% - 35 * var(--u)); top: 50%; animation: toucher 1.2s ease-in-out infinite; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.3)); }
@keyframes toucher { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(calc(26 * var(--u))) scale(0.94); } }

/* Toasts : en bas, au centre (petite icône, s'efface seul) */
#toasts { position: fixed; z-index: 50; left: 0; right: 0; bottom: max(env(safe-area-inset-bottom), calc(26 * var(--u))); display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); pointer-events: none; }
.toast { display: flex; align-items: center; gap: calc(10 * var(--u)); max-width: 88vw; padding: calc(10 * var(--u)) calc(20 * var(--u)) calc(10 * var(--u)) calc(12 * var(--u)); font: 700 calc(24 * var(--u)) 'ZenKaku', sans-serif; color: var(--papier); background: var(--encre); border-left: calc(8 * var(--u)) solid var(--indigo); border-radius: calc(4 * var(--u)); box-shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.3); animation: toast 2.8s both; }
.toast.erreur { border-left-color: var(--vermillon); }
.toast.reussite { border-left-color: var(--ocre); }
.toast img { width: calc(32 * var(--u)); }
@keyframes toast { 0% { opacity: 0; transform: translateY(12px); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Téléphone tenu en travers (commun/ecran.js) */
#tourner { position: fixed; inset: 0; z-index: 55; display: none; align-items: center; justify-content: center; background: var(--indigo) url('img/papier.webp') 0 0 / 160px; background-blend-mode: multiply; }
#tourner .centre { text-align: center; color: var(--papier); font: 700 20px 'ZenKaku', sans-serif; padding: 20px; }
#tourner img { width: min(44vw, 300px); display: block; margin: 0 auto 10px; }
#tourner .sceau { font-size: 22px; min-width: 240px; min-height: 60px; border-width: 16px; }
#tourner .aide { font-weight: 500; font-size: 15px; opacity: 0.85; max-width: 420px; }

/* ---------- Multijoueur en ligne ---------- */
.pile { display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.texte-centre { text-align: center; }
.sous-bouton { margin: calc(-6 * var(--u)) 0 calc(6 * var(--u)); text-align: center; font: 500 calc(24 * var(--u)) 'ZenKaku', sans-serif; color: #5b5a55; }
.sceau.petit { min-width: 0; min-height: calc(72 * var(--u)); font-size: calc(28 * var(--u)); padding: calc(4 * var(--u)) calc(30 * var(--u)); border-width: calc(20 * var(--u)); margin: 0; }
#liste-amis { display: flex; flex-direction: column; max-height: 38vh; overflow-y: auto; touch-action: pan-y; }
#liste-amis .vide { font: 500 calc(25 * var(--u)) 'ZenKaku', sans-serif; line-height: 1.4; color: #5b5a55; margin: calc(4 * var(--u)) 0 calc(10 * var(--u)); }
.ami { display: flex; align-items: center; gap: calc(16 * var(--u)); width: 100%; min-height: calc(96 * var(--u)); text-align: left; padding: calc(8 * var(--u)) calc(4 * var(--u)); border-bottom: calc(2 * var(--u)) solid rgba(31, 58, 95, 0.15); }
.ami:last-child { border-bottom: 0; }
.ami-av { flex: 0 0 auto; width: calc(68 * var(--u)); height: calc(68 * var(--u)); border-radius: 50%; background: var(--papier-fonce) center / cover; box-shadow: 0 0 0 calc(3 * var(--u)) var(--indigo); }
.ami-nom { flex: 1; min-width: 0; }
.ami-nom b { display: block; font: 800 calc(32 * var(--u)) 'Shippori', serif; color: var(--indigo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ami-nom small { display: flex; align-items: center; gap: calc(8 * var(--u)); font: 500 calc(22 * var(--u)) 'ZenKaku', sans-serif; color: #6b675e; }
.ami-nom small::before { content: ''; flex: 0 0 auto; width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; background: #a9a39a; }
.ami.en-ligne .ami-nom small::before { background: #4f9a5e; }
.ami.partie .ami-nom small::before { background: var(--ocre); }
.ami.hors-ligne { opacity: 0.6; }
.ami-inviter { flex: 0 0 auto; padding: calc(10 * var(--u)) calc(22 * var(--u)); font: 800 calc(26 * var(--u)) 'Shippori', serif; color: #fff7e8; background: var(--vermillon); border-radius: calc(4 * var(--u)); box-shadow: 0 0 0 calc(3 * var(--u)) var(--encre); }
.ami.invite .ami-inviter { background: var(--indigo); }
/* Les places du salon : une par joueur, à sa couleur ; les places libres en pointillés. */
#places { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.place { display: flex; align-items: center; gap: calc(16 * var(--u)); min-height: calc(92 * var(--u)); padding: calc(6 * var(--u)) calc(14 * var(--u)); border-radius: calc(4 * var(--u)); background: rgba(255, 255, 255, 0.35); box-shadow: inset calc(10 * var(--u)) 0 0 var(--couleur, #a9a39a); }
.place .ami-av { width: calc(60 * var(--u)); height: calc(60 * var(--u)); margin-left: calc(10 * var(--u)); box-shadow: 0 0 0 calc(4 * var(--u)) var(--couleur, var(--indigo)); }
.place b { flex: 1; min-width: 0; font: 800 calc(32 * var(--u)) 'Shippori', serif; color: var(--indigo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.place small { font: 700 calc(20 * var(--u)) 'ZenKaku', sans-serif; color: var(--vermillon); text-transform: uppercase; letter-spacing: 0.06em; }
.place.libre { background: none; box-shadow: none; border: calc(3 * var(--u)) dashed rgba(31, 58, 95, 0.3); }
.place.libre b { font: 500 calc(25 * var(--u)) 'ZenKaku', sans-serif; color: #7a756b; }
.place.libre .ami-av { background: none; box-shadow: 0 0 0 calc(3 * var(--u)) rgba(31, 58, 95, 0.25); animation: attente 1.6s ease-in-out infinite; }
@keyframes attente { 50% { opacity: 0.35; } }
#salon-vies-bloc h3 { margin-top: calc(18 * var(--u)); }
#salon-etat { text-align: center; }
#salon-lancer[disabled] { filter: grayscale(1) opacity(0.55); }
#partage .feuille { width: min(88%, calc(540 * var(--u))); text-align: center; padding-bottom: calc(16 * var(--u)); }
#partage h2 { margin: calc(4 * var(--u)) 0 0; font: 800 calc(42 * var(--u)) 'Shippori', serif; color: var(--indigo); }
#partage .regle { margin: 0; }
#carte-invitation { position: fixed; z-index: 45; left: 0; right: 0; margin: auto; bottom: max(env(safe-area-inset-bottom), calc(24 * var(--u))); width: min(92%, calc(600 * var(--u))); padding: calc(14 * var(--u)) calc(20 * var(--u)); background: var(--papier); box-shadow: 0 0 0 calc(3 * var(--u)) var(--indigo), 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(27, 36, 51, 0.4); border-radius: calc(4 * var(--u)); animation: carte 0.35s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes carte { from { transform: translateY(40px); opacity: 0; } }
#carte-invitation p { margin: 0 0 calc(12 * var(--u)); font: 600 calc(28 * var(--u)) 'Shippori', serif; color: var(--indigo); text-align: center; }
#carte-invitation .ligne { display: flex; justify-content: center; gap: calc(16 * var(--u)); align-items: center; }
#rejouer[disabled] { filter: grayscale(1) opacity(0.6); }