/* Choc : sobre, dur, tranchant. Angles vifs et italique, comme un coup qui part. Une seule couleur vive : l'orange du couchant. */
@font-face { font-family: "Exo"; src: url(polices/exo2.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: block; }
@font-face { font-family: "Exo"; src: url(polices/exo2-italique.woff2) format("woff2"); font-weight: 100 900; font-style: italic; font-display: block; }
:root { --nuit: #14142b; --verre: rgba(16, 15, 38, .82); --blanc: #f7f1e8; --gris: #b4afc4; --vif: #ff7a29; --bleu: #6fd8ff; }
* { box-sizing: border-box; margin: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; background: var(--nuit); color: var(--blanc); font-family: "Exo", system-ui, sans-serif; touch-action: none; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
#toile { position: fixed; inset: 0; width: 100%; height: 100%; display: block; visibility: hidden; }
#toile.vu { visibility: visible; }
.ecran { position: fixed; inset: 0; display: none; }
.ecran.vu { display: flex; }

/* Hors partie : le fond peint, voilé */
.menu { flex-direction: column; align-items: center; justify-content: center; gap: 2.4vh; padding: 16px; background: linear-gradient(rgba(14, 12, 34, .35), rgba(14, 12, 34, .88)), var(--fond) center 30% / cover; }
.titre { font-style: italic; font-weight: 900; font-size: clamp(64px, 24vh, 150px); letter-spacing: -.03em; line-height: .9; text-shadow: 0 6px 0 rgba(0, 0, 0, .35); }
.titre b { color: var(--vif); font-weight: 900; }
.grand { min-width: 240px; min-height: 58px; padding: 0 36px; background: var(--vif); color: #1b0c04; font-style: italic; font-weight: 800; font-size: 24px; clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); transition: transform .08s; }
.grand.appui { transform: scale(.96); filter: brightness(1.15); }
.choix { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: min(460px, 92vw); }
.ligne-choix { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 58px; padding: 8px 24px; text-align: left; background: var(--verre); clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); transition: transform .08s, background .1s; }
.ligne-choix strong { font-style: italic; font-weight: 800; font-size: 22px; display: block; }
.ligne-choix small { color: var(--gris); font-size: 14px; font-weight: 400; }
.ligne-choix.appui { transform: translateX(4px); background: rgba(50, 40, 80, .92); }
.sous { font-style: italic; font-weight: 800; font-size: 26px; }
.rangee { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.tuile { min-width: 130px; min-height: 58px; padding: 8px 20px; background: var(--verre); font-weight: 700; font-style: italic; font-size: 19px; border-bottom: 3px solid transparent; }
.tuile small { display: block; font-weight: 400; font-style: normal; font-size: 13px; color: var(--gris); }
.tuile.choisi { border-bottom-color: var(--vif); background: rgba(70, 40, 40, .9); }
.tuile.appui { filter: brightness(1.2); }
.petit { position: fixed; left: 12px; top: 12px; min-height: 42px; min-width: 88px; padding: 0 14px; background: var(--verre); font-weight: 600; font-size: 15px; }
.etat { color: var(--gris); font-size: 16px; min-height: 22px; text-align: center; }
/* Le salon commun (contrat/salon), habillé par ce que le jeu a déjà ; ses réglages à lui : l'engin, le niveau de l'ordinateur */
#e-ligne { padding: 0; }
#salon-commun { position: absolute; inset: 0; }
.salon-engins { gap: 6px; flex-wrap: nowrap; }
.salon-engins .tuile { min-width: 0; min-height: 34px; padding: 3px 12px; font-size: 14px; }
.salon-face { color: var(--gris); font-size: 14px; }
.usal-lancer { font-style: italic; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
/* Ce qui mène hors du jeu : détaché de la liste des modes (règle du 14 oct. 2026) */
#liens-plateforme { position: fixed; left: max(12px, env(safe-area-inset-left)); top: max(10px, env(safe-area-inset-top)); display: flex; align-items: center; gap: 8px; }
.lien { min-height: 22px; padding: 0 8px; background: #0d0d10; color: rgba(255, 255, 255, .82); border: 1px solid rgba(255, 255, 255, .08); border-radius: 4px; font-size: 11px; font-weight: 700; }
.lien[hidden] { display: none; }
.grand:disabled { filter: grayscale(.8) brightness(.7); cursor: default; }
#toasts { position: fixed; z-index: 60; left: 50%; top: calc(max(10px, env(safe-area-inset-top)) + 46px); transform: translateX(-50%); display: flex; flex-direction: column; gap: 5px; width: min(92vw, 400px); align-items: center; pointer-events: none; }
.toast { padding: 8px 13px; background: rgba(12, 11, 30, .92); font-size: 14px; font-weight: 700; box-shadow: inset 3px 0 0 var(--vif); }
.toast.erreur { box-shadow: inset 3px 0 0 #ff6a4a; }
.toast.reussite { box-shadow: inset 3px 0 0 #5fe6a4; }
#titre-erreur { color: #ffb4a0; font-size: 15px; min-height: 18px; text-align: center; }

/* En partie */
#e-combat { pointer-events: none; }
#e-combat button, #croix, #boutons { pointer-events: auto; }
#barres { position: fixed; top: max(10px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); right: max(14px, env(safe-area-inset-right)); display: grid; grid-template-columns: 1fr 74px 1fr; align-items: start; gap: 8px; }
.cote { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cote.d { align-items: flex-end; }
.nomme { display: flex; gap: 10px; align-items: baseline; font-style: italic; font-weight: 800; font-size: 15px; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.cote.d .nomme { flex-direction: row-reverse; }
.manches { display: inline-flex; gap: 4px; }
.manches i { width: 15px; height: 8px; border: 1px solid var(--vif); transform: skewX(-18deg); }
.manches i.on { background: var(--vif); }
.barre { position: relative; width: 100%; height: 18px; background: #0c0a18; overflow: hidden; border: 3px solid #0c0a18; outline: 2px solid var(--blanc); outline-offset: -1px; }
.barre i { position: absolute; inset: 0; transform-origin: 100% 50%; will-change: transform; }
.cote.d .barre i { transform-origin: 0 50%; }
.barre .tr { background: #e8201c; }
.barre .vi { background: linear-gradient(#ffe24a 0 40%, #ffb400 40% 100%); }
#chrono { text-align: center; font-weight: 800; font-style: italic; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 2px 4px rgba(0, 0, 0, .8); }
#pause { position: fixed; top: calc(max(10px, env(safe-area-inset-top)) + 38px); left: 50%; transform: translateX(-50%); width: 48px; height: 40px; display: flex; align-items: center; justify-content: center; opacity: .75; }
#pause img { width: 20px; height: 20px; }
#annonce { position: fixed; left: 0; right: 0; top: 30%; text-align: center; font-style: italic; font-weight: 900; font-size: clamp(38px, 12vh, 74px); letter-spacing: -.01em; opacity: 0; text-shadow: 0 4px 0 rgba(0, 0, 0, .45), 0 0 24px rgba(0, 0, 0, .45); }
#annonce.fort { color: var(--vif); }
#annonce.vu { animation: annonce 1.05s cubic-bezier(.1, .8, .3, 1) both; }
@keyframes annonce { 0% { opacity: 0; transform: translateX(-46px) skewX(-8deg); } 14% { opacity: 1; transform: none; } 78% { opacity: 1; } 100% { opacity: 0; transform: translateX(16px); } }
.combo { position: fixed; top: 22%; display: none; font-style: italic; font-weight: 900; font-size: 44px; line-height: 1; text-shadow: 0 3px 0 rgba(0, 0, 0, .5); }
.combo small { display: block; font-size: 14px; font-weight: 700; color: var(--gris); }
.combo.vu { display: block; }
.combo.saute, .parfait.saute { animation: saute .16s ease-out; }
@keyframes saute { 0% { transform: scale(1.45); } 100% { transform: scale(1); } }
#combo0 { left: 18px; } #combo1 { right: 18px; text-align: right; }
.parfait { position: fixed; top: 38%; display: none; color: var(--bleu); font-style: italic; font-weight: 800; font-size: 26px; text-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
.parfait.vu { display: block; }
.parfait.rate { color: var(--gris); }
#parfait0 { left: 22%; } #parfait1 { right: 22%; }
#consigne { position: fixed; top: calc(max(10px, env(safe-area-inset-top)) + 84px); left: 50%; transform: translateX(-50%); max-width: 92vw; display: none; align-items: center; gap: 12px; padding: 7px 16px; background: rgba(12, 11, 30, .68); font-weight: 600; font-size: 17px; white-space: nowrap; }
#consigne.vu { display: flex; }
#consigne.bravo span { color: var(--vif); font-weight: 800; }
#avancement { color: var(--gris); font-size: 13px; font-variant-numeric: tabular-nums; }
#mesure { position: fixed; bottom: 2px; left: 50%; transform: translateX(-50%); display: none; color: #cfe; font: 11px monospace; background: rgba(0, 0, 0, .5); padding: 1px 6px; white-space: nowrap; }
#mesure.vu { display: block; }

/* Commandes : blanches, monochromes, discrètes ; sans aucun mot. Sur PC (clavier), on ne les montre pas. */
#croix, #boutons { position: fixed; display: none; bottom: max(14px, env(safe-area-inset-bottom)); touch-action: none; }
.tactile #croix, .tactile #boutons { display: block; }
#croix { left: max(18px, env(safe-area-inset-left)); width: min(44vh, 176px); height: min(44vh, 176px); }
#croix::before { content: ""; position: absolute; inset: 10%; background: rgba(255, 255, 255, .06); border-radius: 50%; }
#croix img { position: absolute; width: 27%; height: 27%; object-fit: contain; opacity: .72; transition: opacity .05s, transform .05s; }
#f-d { right: 2%; top: 36.5%; } #f-g { left: 2%; top: 36.5%; transform: scaleX(-1); } #f-h { top: 2%; left: 36.5%; transform: rotate(-90deg); } #f-b { bottom: 2%; left: 36.5%; transform: rotate(90deg); }
#croix img.appui { opacity: 1; filter: drop-shadow(0 0 7px #fff); }
#croix img { width: 17%; height: 17%; opacity: .45; }
#f-d { top: 41.5%; } #f-g { top: 41.5%; } #f-h { left: 41.5%; } #f-b { left: 41.5%; }
#pommeau { position: absolute; left: 50%; top: 50%; width: 40%; height: 40%; border-radius: 50%; background: rgba(255, 255, 255, .26); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .34); transform: translate(-50%, -50%); will-change: transform; pointer-events: none; }
#boutons { right: max(16px, env(safe-area-inset-right)); width: min(62vh, 248px); height: min(52vh, 208px); }
.touche { position: absolute; width: 39%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .08); display: flex; align-items: center; justify-content: center; transition: transform .05s, background .05s; pointer-events: none; }
.touche img { width: 66%; height: 66%; object-fit: contain; opacity: .9; }
#boutons.pret .touche { background: rgba(255, 255, 255, .22); box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); }
.touche.appui { transform: scale(.92); background: rgba(255, 255, 255, .28); }
#b-poing, #b-pied { width: 46%; } #b-poing { left: 0; bottom: 0; } #b-pied { right: 0; bottom: 34%; }
.eclaire { opacity: 1 !important; filter: drop-shadow(0 0 10px var(--vif)) drop-shadow(0 0 3px var(--vif)); animation: eclaire 1s ease-in-out infinite; }
.touche.eclaire { background: rgba(255, 122, 41, .4); }
@keyframes eclaire { 50% { filter: drop-shadow(0 0 16px var(--vif)) drop-shadow(0 0 6px #fff); } }
/* Sur PC, le guide montre aussi la touche du clavier. */
#clavier { position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); display: none; color: var(--gris); font-size: 14px; background: rgba(12, 11, 30, .6); padding: 5px 12px; white-space: nowrap; }
body:not(.tactile).guide #clavier { display: block; }

.voile { position: fixed; inset: 0; display: none; flex-direction: column; gap: 12px; align-items: center; justify-content: center; background: rgba(10, 9, 26, .78); }
.voile.vu { display: flex; }
#fin-detail { color: var(--gris); font-size: 18px; margin-bottom: 8px; }
#tourner { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; text-align: center; background: linear-gradient(rgba(14, 12, 34, .75), rgba(14, 12, 34, .92)), var(--fond) center / cover; }
#tourner.on, #tourner.visible { display: flex; }
#tourner .centre { max-width: 420px; padding: 16px; }
#tourner p { font-size: 18px; margin: 12px 0; }
#tourner .aide { font-size: 13px; color: var(--gris); }
#tourner-plein { min-height: 54px; min-width: 200px; padding: 0 24px; font-size: 20px; font-weight: 800; font-style: italic; background: var(--vif); color: #1b0c04; }

/* Comparer les styles */
.style-rangee .tuile { min-width: 0; min-height: 44px; padding: 6px 14px; font-size: 15px; }
/* Les barres et les textes de la partie suivent le style choisi. */
body[data-style="bd"] { --vif: #ff6a1f; }
body[data-style="bd"] .barre { border: 3px solid #07060f; outline: 3px solid #07060f; background: #2a2038; }
body[data-style="bd"] .barre .vi { background: #ffd23c; }
body[data-style="bd"] #chrono, body[data-style="bd"] .nomme, body[data-style="bd"] #annonce, body[data-style="bd"] .combo { color: #fff4d8; text-shadow: -2px -2px 0 #07060f, 2px -2px 0 #07060f, -2px 2px 0 #07060f, 2px 2px 0 #07060f, 0 4px 0 #07060f; }
body[data-style="bd"] #annonce.fort { color: #ffd23c; }
body[data-style="gouache"] { --vif: #f09048; }
body[data-style="gouache"] .barre { border: 2px solid #2a1f48; outline: 0; background: #2a1f48; border-radius: 3px; }
body[data-style="gouache"] .barre .vi { background: linear-gradient(#ffd890, #f0a850); }
body[data-style="gouache"] .barre .tr { background: #c84838; }
body[data-style="gouache"] #chrono, body[data-style="gouache"] .nomme { text-shadow: 0 2px 6px rgba(42, 31, 72, .85); }
body[data-style="papier"] { --vif: #f0603c; --blanc: #f6e8d0; }
body[data-style="papier"] .barre { border: 3px solid #10183a; outline: 0; background: #10183a; height: 18px; }
body[data-style="papier"] #chrono { background: #10183a; padding: 3px 0 5px; text-shadow: none; }
body[data-style="papier"] .barre .vi { background: #f6e8d0; }
body[data-style="papier"] .barre .tr { background: #f0603c; }
body[data-style="papier"] .nomme, body[data-style="papier"] #annonce, body[data-style="papier"] .combo { color: #f6e8d0; text-shadow: 2px 2px 0 #10183a, -1px -1px 0 #10183a; }
body[data-style="papier"] #chrono { color: #f6e8d0; }

/* Les combos : pas de défilement, un niveau à la fois */
#e-combos { justify-content: flex-start; gap: 6px; padding: 8px 16px; }
.co-tete { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; padding-left: 92px; min-height: 44px; }
.co-tete .tuile { min-width: 0; min-height: 40px; padding: 4px 12px; font-size: 15px; }
#co-niveaux .tuile { width: 40px; padding: 4px 0; }
#co-niveaux .tuile[data-v="0"] { width: auto; padding: 4px 12px; }
#co-titre { font-size: 18px; }
#co-liste { display: flex; flex-direction: column; gap: 6px; width: min(640px, 100%); }
.combo-l { display: grid; grid-template-columns: 1fr auto 44px; align-items: center; gap: 10px; min-height: 58px; padding: 6px 14px; background: var(--verre); }
.combo-l b { font-style: italic; font-weight: 800; font-size: 16px; }
.combo-l .pc { text-align: right; color: var(--gris); font-size: 14px; font-variant-numeric: tabular-nums; }
.gestes { display: flex; align-items: center; gap: 4px; }
.geste { display: inline-flex; align-items: center; gap: 1px; padding: 3px 4px; background: rgba(255, 255, 255, .1); }
.geste img { width: 24px; height: 24px; object-fit: contain; display: block; }
.geste img.fl { width: 13px; height: 13px; }
.geste .et { font-size: 12px; font-weight: 700; }
.gestes i { color: var(--gris); font-style: normal; font-size: 12px; }
#co-aide { font-size: 14px; min-height: 0; }

/* Le choix de l'engin : trois par ligne, tout tient à l'écran sans défiler. */
.grille-engins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: min(760px, 100%); }
.grille-engins .tuile { min-width: 0; min-height: 56px; padding: 6px 10px; text-align: left; font-size: 18px; }
.grille-engins .tuile small { font-size: 12px; line-height: 1.15; }

/* Les gros coups : quatre lignes, dans la même hauteur que les trois combos d'un niveau. */
.co-tete, #co-titre { flex: none; }
#co-liste.serre .combo-l { min-height: 42px; padding: 2px 14px; }
#co-liste.serre { gap: 4px; }

/* ---- Le combat qui envoie : mots dessinés (img/mots/), police d'arcade, impacts (porteur, 5 nov. 2026 : « pas des écritures de site web, il faut que ça envoie ») ---- */
@font-face { font-family: "Arcade"; src: url(polices/kanit-bolditalic.woff2) format("woff2"); font-weight: 700; font-style: italic; font-display: block; }
.nomme, #chrono, .grand, .tuile, .ligne-choix strong, .sous, .combo-l b, #co-titre, .petit { font-family: "Arcade", "Exo", sans-serif; font-style: italic; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; }
.tuile small, .ligne-choix small { font-family: "Exo", system-ui, sans-serif; font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; }
.nomme { font-size: 19px; }
#chrono { font-size: 42px; -webkit-text-stroke: 1.5px #1a1230; paint-order: stroke fill; }
.grand { font-size: 28px; }
.barre .vi { box-shadow: inset 0 -5px 0 rgba(190, 80, 10, .55); }

#annonce { top: 50%; display: flex; justify-content: center; align-items: center; gap: 2.4vh; pointer-events: none; transform: translateY(-50%); z-index: 6; font-family: "Arcade", "Exo", sans-serif; font-size: 9vh; text-transform: uppercase; }
#annonce img { height: clamp(66px, 23vh, 170px); width: auto; max-width: 92vw; filter: drop-shadow(0 6px 0 rgba(10, 6, 24, .55)); }
#annonce.fort img { height: clamp(96px, 36vh, 280px); }
#annonce img.mot-hors-service, #annonce img.mot-temps, #annonce img.mot-parti { height: clamp(70px, 24vh, 190px); }
#annonce.vu { animation: annonce-choc 1.15s linear both; }
#annonce.fort.vu { animation-duration: 1.45s; }
@keyframes annonce-choc {
  0% { opacity: 0; transform: translateY(-50%) scale(2.6) rotate(-5deg); }
  9% { opacity: 1; transform: translateY(-50%) scale(.92) rotate(1deg); }
  14% { transform: translateY(-50%) scale(1.07) rotate(-.5deg); }
  20% { transform: translateY(-50%) scale(1) rotate(0); }
  84% { opacity: 1; transform: translateY(-50%) scale(1.02); }
  100% { opacity: 0; transform: translateY(-50%) scale(1.22); }
}
/* Des rayons derrière le mot, un instant. */
#annonce.fort::before { content: ""; position: absolute; left: 50%; top: 50%; width: 130vw; height: 130vw; margin: -65vw 0 0 -65vw; z-index: -1; pointer-events: none; opacity: 0; background: repeating-conic-gradient(rgba(255, 226, 150, .55) 0 5deg, transparent 5deg 18deg); -webkit-mask: radial-gradient(closest-side, #000 12%, transparent 62%); mask: radial-gradient(closest-side, #000 12%, transparent 62%); }
#annonce.fort.vu::before { animation: rayons .55s ease-out both; }
@keyframes rayons { 0% { opacity: .95; transform: scale(.35) rotate(-8deg); } 100% { opacity: 0; transform: scale(1.1) rotate(6deg); } }

#eclair { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgba(255, 244, 214, .85), rgba(255, 150, 60, .35) 60%, transparent 90%); z-index: 4; }
#eclair.vu { animation: eclair .17s ease-out both; }
@keyframes eclair { 0% { opacity: .55; } 100% { opacity: 0; } }

.combo { top: 19%; font-size: 0; transform-origin: 0 50%; z-index: 5; }
#combo1 { transform-origin: 100% 50%; }
.combo .chiffres { display: flex; gap: 0; }
#combo1 .chiffres { justify-content: flex-end; }
.combo .chiffres img { height: calc(var(--grand, 1) * clamp(58px, 20vh, 120px)); width: auto; margin-right: -.6vh; filter: drop-shadow(0 4px 0 rgba(10, 6, 24, .5)); }
.combo .mot-combo { display: block; height: clamp(24px, 8.5vh, 50px); width: auto; margin-top: -.8vh; }
#combo1 .mot-combo { margin-left: auto; }
.combo small { font-family: "Arcade", "Exo", sans-serif; font-style: italic; font-size: clamp(14px, 4.6vh, 24px); font-weight: 700; color: #fff4d8; text-shadow: 0 2px 0 rgba(10, 6, 24, .8); }
.combo.saute { animation: combo-choc .24s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes combo-choc { 0% { transform: scale(1.9) rotate(-5deg); opacity: .6; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.parfait { top: 42%; z-index: 5; }
.parfait img { height: clamp(34px, 12vh, 76px); width: auto; filter: drop-shadow(0 3px 0 rgba(10, 6, 24, .5)); }
.parfait.saute { animation: combo-choc .24s cubic-bezier(.2, 1.5, .4, 1); }
#fin-titre img { height: clamp(90px, 34vh, 240px); width: auto; max-width: 90vw; }
.titre-img img { height: clamp(110px, 42vh, 320px); width: auto; max-width: 92vw; display: block; filter: drop-shadow(0 8px 0 rgba(10, 6, 24, .5)); }