/* CLASSWAR - styles du prototype (créé le 2026-11-14)
   2026-11-14 : style cartoon d'arène (couleurs vives, contours épais, gros boutons en relief, animations rebondissantes). */
:root {
  --trait: #1b1035; --fond1: #3b1fa8; --fond2: #1c0f5e; --carte1: #4f6bff; --carte2: #3346d6;
  --texte: #ffffff; --discret: #cfd6ff; --jaune: #ffd23f; --orange: #ff9a1f; --bleu: #2f9bff; --rouge: #ff4d5e; --vert: #5dea5d;
  --police: "Arial Rounded MT Bold", "Nunito", "Baloo 2", -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; color: var(--texte); font: 700 14px/1.35 var(--police); }
body { background: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 22px, transparent 22px 44px), radial-gradient(circle at 50% 0%, var(--fond1), var(--fond2) 75%) fixed; }
#app { max-width: 460px; margin: 0 auto; min-height: 100dvh; padding: 8px 10px 18px; display: flex; flex-direction: column; }
button, select { font: inherit; color: inherit; }
h1 { font: italic 900 40px/1 Impact, "Arial Black", sans-serif; letter-spacing: 1.5px; margin: 8px 0 4px; color: var(--jaune); -webkit-text-stroke: 2px var(--trait); text-shadow: 0 4px 0 var(--trait), 0 7px 0 rgba(0,0,0,.25); transform: skewX(-6deg) rotate(-2deg); animation: arrivee .5s cubic-bezier(.3,1.6,.5,1) both; }
.sous-titre { color: var(--discret); margin: 0 0 10px; font-weight: 400; font-family: -apple-system, "Segoe UI", sans-serif; }
@keyframes arrivee { from { transform: scale(.4) rotate(-10deg); opacity: 0; } to { transform: skewX(-6deg) rotate(-2deg); opacity: 1; } }
@keyframes monte { from { transform: translateY(18px) scale(.95); opacity: 0; } to { transform: none; opacity: 1; } }

.bouton { background: linear-gradient(#6f8bff, #3d55e6); border: 3px solid var(--trait); border-radius: 14px; padding: 9px 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .4px; cursor: pointer; box-shadow: 0 4px 0 var(--trait), inset 0 2px 0 rgba(255,255,255,.35); text-shadow: 0 2px 0 rgba(0,0,0,.35); transition: transform .06s, box-shadow .06s; }
.bouton:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--trait), inset 0 2px 0 rgba(255,255,255,.35); }
.bouton:disabled { filter: grayscale(.8) brightness(.75); cursor: default; }
.bouton.principal { background: linear-gradient(var(--jaune), var(--orange)); color: var(--trait); text-shadow: 0 1px 0 rgba(255,255,255,.5); font-size: 17px; padding: 11px 20px; animation: pulse 1.4s ease-in-out infinite; }
.bouton.actif { background: linear-gradient(#7dff8a, #25b84a); color: var(--trait); text-shadow: none; }
@keyframes pulse { 50% { transform: scale(1.05); } }
.rangee { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rangee > .pousse { margin-left: auto; }

/* Création d'escouade */
.budget, .guerrier { background: linear-gradient(var(--carte1), var(--carte2)); border: 3px solid var(--trait); border-radius: 16px; box-shadow: 0 5px 0 var(--trait), inset 0 2px 0 rgba(255,255,255,.3); }
.budget { padding: 8px 12px; margin: 8px 0 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.budget strong { font-size: 26px; color: var(--jaune); -webkit-text-stroke: 1px var(--trait); text-shadow: 0 2px 0 var(--trait); }
.budget .bouton { white-space: nowrap; }
select { background: #241a66; border: 2px solid var(--trait); border-radius: 10px; padding: 7px 5px; font-weight: 700; font-family: -apple-system, "Segoe UI", sans-serif; }
#adversaire { min-width: 0; flex: 1; }
.guerrier { padding: 10px; margin-bottom: 12px; animation: monte .35s cubic-bezier(.3,1.4,.5,1) both; }
.guerrier:nth-of-type(2) { animation-delay: .05s; } .guerrier:nth-of-type(3) { animation-delay: .1s; } .guerrier:nth-of-type(4) { animation-delay: .15s; }
.guerrier header { display: flex; gap: 10px; align-items: center; }
.guerrier canvas { width: 64px; height: 64px; flex: none; background: radial-gradient(circle at 50% 35%, #8fd0ff, #3d7be0); border: 3px solid var(--trait); border-radius: 14px; }
.guerrier h2 { margin: 0; font-size: 18px; text-transform: uppercase; text-shadow: 0 2px 0 var(--trait); }
.guerrier .univers { color: var(--discret); font-size: 12px; }
.guerrier .jetons { margin-left: auto; font-weight: 900; color: var(--trait); white-space: nowrap; background: linear-gradient(var(--jaune), var(--orange)); border: 2px solid var(--trait); border-radius: 999px; padding: 3px 10px; }
.passif { color: #eef0ff; font-size: 12px; margin: 7px 0; font-weight: 400; font-family: -apple-system, "Segoe UI", sans-serif; }
.caracs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 6px 0; }
.carac { background: #241a66; border: 2px solid var(--trait); border-radius: 10px; padding: 4px 6px; text-align: center; }
.carac b { display: block; font-size: 20px; }
.carac span { color: var(--discret); font-size: 10.5px; text-transform: uppercase; }
.derive { font-size: 12.5px; margin: 4px 0 8px; }
.derive b { color: var(--vert); }
.derive i { color: #8fe3ff; font-style: normal; }
.guerrier label { display: grid; grid-template-columns: 82px 1fr; align-items: center; gap: 6px; margin-top: 5px; font-size: 12px; text-transform: uppercase; }
.guerrier select { width: 100%; min-width: 0; }
.resultat { background: linear-gradient(#35c267, #1f9a4b); border: 3px solid var(--trait); border-radius: 14px; box-shadow: 0 4px 0 var(--trait); padding: 8px 10px; margin: 0 0 12px; animation: monte .3s cubic-bezier(.3,1.4,.5,1) both; }

/* Combat */
.combat { display: flex; flex-direction: column; flex: 1; position: relative; }
.barre { display: flex; align-items: center; gap: 8px; padding: 2px 0 8px; text-transform: uppercase; }
.barre .tour { color: var(--discret); }
.barre .main { padding: 2px 10px; border: 2px solid var(--trait); border-radius: 999px; box-shadow: 0 2px 0 var(--trait); }
.barre .main:empty { display: none; }
.barre .main.joueur { background: var(--bleu); }
.barre .main.ia { background: var(--rouge); }
.barre .bouton { margin-left: auto; padding: 4px 10px; font-size: 12px; }
.terrain { display: block; margin: 0 auto; width: min(100%, calc((100dvh - 225px) * 9 / 13)); height: auto; aspect-ratio: 9 / 13; border: 4px solid var(--trait); border-radius: 14px; box-shadow: 0 6px 0 var(--trait); touch-action: manipulation; cursor: pointer; }
.panneau { margin-top: 12px; min-height: 124px; }
.info { font-size: 12.5px; font-family: -apple-system, "Segoe UI", sans-serif; font-weight: 400; }
.info b.nom { font: 900 15px var(--police); text-transform: uppercase; }
.info .vie { color: var(--vert); font-weight: 800; }
.info .energie { color: #8fe3ff; font-weight: 800; }
.actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.actions .bouton { padding: 7px 9px; font-size: 11.5px; }
.journal { color: var(--discret); font-size: 12px; margin-top: 8px; min-height: 16px; font-weight: 400; font-family: -apple-system, "Segoe UI", sans-serif; }
.banniere { position: absolute; left: -10px; right: -10px; top: 34%; text-align: center; pointer-events: none; opacity: 0; font: italic 900 44px/1.3 Impact, "Arial Black", sans-serif; color: #fff; -webkit-text-stroke: 2px var(--trait); text-shadow: 0 4px 0 var(--trait); background: linear-gradient(90deg, transparent, var(--bleu) 20%, var(--bleu) 80%, transparent); }
.banniere.visible { animation: banniere 1.1s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes banniere { 0% { opacity: 0; transform: translateX(-60%) skewX(-12deg); } 20%, 75% { opacity: 1; transform: translateX(0) skewX(-12deg); } 100% { opacity: 0; transform: translateX(60%) skewX(-12deg); } }
.fin { position: absolute; inset: 0; background: rgba(20, 10, 60, .86); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; border-radius: 14px; animation: monte .3s both; }
.fin h2 { font: italic 900 56px/1 Impact, "Arial Black", sans-serif; margin: 0; color: var(--jaune); -webkit-text-stroke: 2px var(--trait); text-shadow: 0 5px 0 var(--trait); transform: skewX(-6deg) rotate(-4deg); animation: arrivee .6s cubic-bezier(.3,1.8,.5,1) both; }
.fin.defaite h2 { color: var(--rouge); }

.barre { font-size: 12px; white-space: nowrap; }
.budget { flex-wrap: wrap; }
.barre .main { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.barre .bouton { flex: none; }

/* 2026-11-14 (v0.4) : écran d'escouade refait — un guerrier à la fois, boutons à icône, menus animés. */
.ecran { display: flex; flex-direction: column; gap: 10px; }
.ecran.entree > * { animation: monte .45s cubic-bezier(.3,1.5,.5,1) both; }
.ecran.entree > :nth-child(2) { animation-delay: .05s; } .ecran.entree > :nth-child(3) { animation-delay: .1s; }
.ecran.entree > :nth-child(4) { animation-delay: .15s; } .ecran.entree > :nth-child(5) { animation-delay: .2s; }
.ecran.entree > :nth-child(n+6) { animation-delay: .25s; }
.entete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.entete h1 { font-size: 34px; margin: 6px 0 2px; background: linear-gradient(100deg, var(--jaune) 40%, #fff 50%, var(--jaune) 60%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 4px 0 var(--trait)); animation: arrivee .5s cubic-bezier(.3,1.6,.5,1) both, reflet 3.5s linear 1s infinite; }
@keyframes reflet { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.bourse { display: flex; align-items: center; gap: 6px; background: #241a66; border: 3px solid var(--trait); border-radius: 999px; padding: 3px 12px 3px 4px; box-shadow: 0 4px 0 var(--trait); white-space: nowrap; }
.bourse strong { font-size: 22px; color: var(--jaune); text-shadow: 0 2px 0 var(--trait); }
.bourse small { color: var(--discret); font-size: 12px; }
.bourse.saute strong { display: inline-block; animation: saute .35s cubic-bezier(.3,2,.5,1); }
@keyframes saute { 0% { transform: scale(1.7); } 100% { transform: none; } }
.piece { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3a8, var(--jaune) 45%, var(--orange)); border: 3px solid var(--trait); box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); flex: none; animation: tourne 2.6s ease-in-out infinite; }
@keyframes tourne { 0%, 70%, 100% { transform: scaleX(1); } 85% { transform: scaleX(.15); } }
.reglages { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.segments { display: flex; background: #241a66; border: 3px solid var(--trait); border-radius: 12px; overflow: hidden; box-shadow: 0 3px 0 var(--trait); flex: 1; min-width: 0; }
.segments button { flex: 1; min-width: 0; border: 0; background: none; padding: 7px 4px; font-size: 11.5px; font-weight: 900; text-transform: uppercase; cursor: pointer; color: var(--discret); transition: background .15s, color .15s; }
.segments button.on { background: linear-gradient(var(--jaune), var(--orange)); color: var(--trait); }
.pas { display: flex; align-items: center; gap: 6px; background: #241a66; border: 3px solid var(--trait); border-radius: 12px; box-shadow: 0 3px 0 var(--trait); padding: 2px; white-space: nowrap; text-transform: uppercase; font-size: 12px; }
.pas button { width: 30px; height: 28px; border: 0; border-radius: 8px; background: linear-gradient(#6f8bff, #3d55e6); font-weight: 900; font-size: 16px; cursor: pointer; }
.pas button:disabled { filter: grayscale(.8) brightness(.7); }

.portraits { display: flex; gap: 8px; justify-content: center; }
.portrait { position: relative; flex: 1; max-width: 76px; aspect-ratio: 1; padding: 0; border: 3px solid var(--trait); border-radius: 16px; background: radial-gradient(circle at 50% 35%, #7c8fff, #3346d6); box-shadow: 0 4px 0 var(--trait); cursor: pointer; transition: transform .18s cubic-bezier(.3,1.8,.5,1), filter .18s; filter: saturate(.6) brightness(.8); }
.portrait canvas { width: 100%; height: 100%; display: block; border-radius: 12px; }
.portrait span { position: absolute; right: -6px; bottom: -6px; min-width: 24px; padding: 0 5px; background: linear-gradient(var(--jaune), var(--orange)); color: var(--trait); border: 2px solid var(--trait); border-radius: 999px; font-size: 12px; font-weight: 900; }
.portrait.on { transform: translateY(-5px) scale(1.1); filter: none; background: radial-gradient(circle at 50% 35%, #aee4ff, #2f9bff); outline: 3px solid var(--jaune); outline-offset: 1px; animation: balance .5s cubic-bezier(.3,1.8,.5,1); }
@keyframes balance { 0% { transform: translateY(0) scale(.9) rotate(-8deg); } 60% { transform: translateY(-8px) scale(1.16) rotate(4deg); } 100% { transform: translateY(-5px) scale(1.1); } }

.fiche { display: grid; grid-template-columns: 132px 1fr; gap: 4px 10px; align-items: center; background: linear-gradient(var(--carte1), var(--carte2)); border: 3px solid var(--trait); border-radius: 18px; box-shadow: 0 5px 0 var(--trait), inset 0 2px 0 rgba(255,255,255,.3); padding: 10px; touch-action: pan-y; }
.fiche.glisse-droite { animation: glisseD .32s cubic-bezier(.25,1.3,.5,1) both; }
.fiche.glisse-gauche { animation: glisseG .32s cubic-bezier(.25,1.3,.5,1) both; }
@keyframes glisseD { from { transform: translateX(70%) rotate(4deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes glisseG { from { transform: translateX(-70%) rotate(-4deg); opacity: 0; } to { transform: none; opacity: 1; } }
.scene { background: radial-gradient(circle at 50% 78%, rgba(255,255,255,.35) 0 34%, transparent 35%), radial-gradient(circle at 50% 35%, #8fd0ff, #3d7be0); border: 3px solid var(--trait); border-radius: 16px; overflow: hidden; }
.scene canvas { display: block; width: 100%; height: auto; }
.identite { min-width: 0; }
.identite h2 { margin: 0; font-size: 19px; text-transform: uppercase; text-shadow: 0 2px 0 var(--trait); }
.identite .univers { color: var(--discret); font-size: 12px; font-weight: 400; font-family: -apple-system, "Segoe UI", sans-serif; }
.identite .univers b { color: var(--jaune); }
.maitrises { display: flex; flex-wrap: wrap; gap: 4px; }
.maitrises span { background: #241a66; border: 2px solid var(--trait); border-radius: 999px; padding: 1px 8px; font-size: 10.5px; text-transform: uppercase; }
.fiche .caracs, .fiche .derive { grid-column: 1 / -1; }
.fiche .caracs { margin: 4px 0 0; }
.carac { display: flex; flex-direction: column; gap: 1px; }
.carac b { font-size: 19px; line-height: 1.1; }
.carac i { display: block; height: 6px; background: #120a3d; border-radius: 3px; overflow: hidden; }
.carac u { display: block; height: 100%; background: linear-gradient(90deg, var(--vert), var(--jaune)); border-radius: 3px; transform-origin: left; animation: remplit .5s cubic-bezier(.3,1.2,.5,1) both; }
@keyframes remplit { from { transform: scaleX(0); } }
.fiche .derive { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 2px 0 0; }
.derive span { background: #241a66; border: 2px solid var(--trait); border-radius: 8px; padding: 1px 7px; font-size: 11.5px; }
.derive .vie { color: var(--vert); } .derive .energie { color: #8fe3ff; }

.emplacements { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.emplacements button { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 4px 2px 5px; border: 3px solid var(--trait); border-radius: 14px; background: #2b2380; box-shadow: 0 4px 0 var(--trait); cursor: pointer; font-size: 10.5px; font-weight: 900; text-transform: uppercase; color: var(--discret); transition: transform .15s cubic-bezier(.3,1.8,.5,1); min-width: 0; }
.emplacements img { width: 42px; height: 42px; }
.emplacements button.on { background: linear-gradient(var(--jaune), var(--orange)); color: var(--trait); transform: translateY(-3px); }
.famille { margin: 8px 0 4px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--jaune); text-shadow: 0 2px 0 var(--trait); }
.famille:first-child { margin-top: 0; }
.cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.objet { position: relative; display: flex; flex-direction: column; align-items: center; padding: 4px 3px 6px; min-width: 0; border: 3px solid var(--trait); border-radius: 14px; background: linear-gradient(#6f8bff, #3d55e6); box-shadow: 0 4px 0 var(--trait), inset 0 2px 0 rgba(255,255,255,.35); cursor: pointer; transition: transform .08s; }
.objet:active { transform: translateY(3px) scale(.96); }
.objet img { width: 56px; height: 56px; pointer-events: none; }
.objet .nom { font-size: 10.5px; line-height: 1.15; text-align: center; text-shadow: 0 1px 0 rgba(0,0,0,.4); min-height: 2.3em; display: flex; align-items: center; }
.objet .prix { position: absolute; top: -6px; right: -5px; min-width: 22px; padding: 0 4px; background: linear-gradient(var(--jaune), var(--orange)); color: var(--trait); border: 2px solid var(--trait); border-radius: 999px; font-size: 12px; font-weight: 900; }
.objet .verrou { position: absolute; left: 3px; right: 3px; top: 22px; background: var(--trait); border-radius: 6px; font-size: 9.5px; padding: 1px 2px; text-transform: uppercase; transform: rotate(-6deg); }
.objet.refuse { background: linear-gradient(#5a5f8a, #3c4068); }
.objet.refuse img { filter: grayscale(1) brightness(.7); }
.objet.vu { outline: 3px dashed #fff; outline-offset: 1px; }
.objet.choisi { background: linear-gradient(#7dff8a, #25b84a); outline: 3px solid var(--jaune); outline-offset: 1px; animation: choisi .4s cubic-bezier(.3,2,.5,1); }
.objet.choisi .nom { color: var(--trait); text-shadow: none; }
@keyframes choisi { 0% { transform: scale(.8) rotate(-5deg); } 60% { transform: scale(1.12) rotate(3deg); } 100% { transform: none; } }
.choix.pop .objet { animation: eclot .32s cubic-bezier(.3,1.7,.5,1) both; animation-delay: calc(var(--k) * 28ms); }
@keyframes eclot { from { transform: scale(.3) translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.detail { background: #241a66; border: 3px solid var(--trait); border-radius: 14px; padding: 8px 10px; font: 400 12.5px/1.45 -apple-system, "Segoe UI", sans-serif; min-height: 62px; }
.detail b { font-weight: 800; }
.detail.alerte { border-color: var(--rouge); }
.detail em { color: #ffb3ba; font-style: normal; font-weight: 700; }
.navigation .compte { text-transform: uppercase; font-size: 12px; color: var(--discret); }
.navigation .bouton { padding: 8px 12px; }
.bots { display: flex; flex-direction: column; gap: 8px; background: rgba(20,10,60,.35); border: 3px solid var(--trait); border-radius: 16px; padding: 10px; }
.bots .titre { text-transform: uppercase; font-size: 12px; color: var(--discret); }
.bots .resultat { margin: 0; font-weight: 400; font-family: -apple-system, "Segoe UI", sans-serif; }
button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* 2026-11-14 (v0.5) : bilan de combat sur la fiche (dégâts à mains nues, avec l'équipement, esquive, défense). */
.bilan { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); gap: 6px; margin-top: 4px; }
.bilan > div { background: #241a66; border: 2px solid var(--trait); border-radius: 10px; padding: 3px 6px; text-align: center; min-width: 0; }
.bilan span { display: block; font-size: 10px; text-transform: uppercase; color: var(--discret); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bilan b { font-size: 17px; line-height: 1.15; }
.bilan small { display: block; font-size: 9.5px; color: var(--discret); font-weight: 400; font-family: -apple-system, "Segoe UI", sans-serif; }
.bilan .fort { background: linear-gradient(#ff7a4d, #d93a3a); }
.bilan .fort span { color: #fff; }

/* 2026-11-14 (v0.5) : écran d'accueil — grand personnage sur un décor, tuiles sombres inclinées, gros bouton jaune. */
.accueil { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.accueil.entree > * { animation: monte .45s cubic-bezier(.3,1.5,.5,1) both; }
.accueil.entree > :nth-child(2) { animation-delay: .08s; } .accueil.entree > :nth-child(n+3) { animation-delay: .16s; }
.tuile { background: linear-gradient(#3a3156, #251d3d); border: 3px solid #0d0820; border-radius: 10px; box-shadow: 0 5px 0 #0d0820, inset 0 2px 0 rgba(255,255,255,.14); color: #fff; font-weight: 900; text-transform: uppercase; -webkit-text-stroke: .6px #0d0820; transform: skewX(-5deg); cursor: pointer; transition: transform .07s; }
button.tuile:active { transform: skewX(-5deg) translateY(4px); box-shadow: 0 1px 0 #0d0820; }
.haut { display: flex; justify-content: space-between; gap: 8px; }
.haut .tuile { display: flex; align-items: center; gap: 6px; padding: 4px 10px; cursor: default; white-space: nowrap; }
.tuile.niveau button { width: 28px; height: 26px; border: 2px solid #0d0820; border-radius: 7px; background: linear-gradient(#6f8bff, #3d55e6); font-weight: 900; font-size: 15px; cursor: pointer; }
.tuile.niveau button:disabled { filter: grayscale(.8) brightness(.7); }
.tuile.jetons strong { font-size: 22px; color: var(--jaune); text-shadow: 0 2px 0 #0d0820; }
.tuile.jetons small { color: var(--discret); }
.decor { position: relative; flex: 1; min-height: 380px; border: 4px solid #0d0820; border-radius: 18px; box-shadow: 0 6px 0 #0d0820; overflow: hidden;
  background: radial-gradient(ellipse 60% 9% at 50% 84%, rgba(13,8,32,.35) 0 60%, transparent 61%), radial-gradient(circle at 50% 56%, #fff6b0 0 14%, #ffd86b 14.5% 21%, transparent 21.5%), linear-gradient(#49c6ff 0%, #9d8bff 34%, #ff8fd0 60%, #33a58f 60.2%, #1f6f78 100%); }
.decor::before { content: ""; position: absolute; left: 0; right: 0; bottom: 39.8%; height: 30%; opacity: .75;
  background: linear-gradient(#ff5fb0, #ff5fb0) 4% 100% / 13% 62% no-repeat, linear-gradient(#e24c9e, #e24c9e) 15% 100% / 9% 88% no-repeat, linear-gradient(#ff5fb0, #ff5fb0) 27% 100% / 12% 45% no-repeat, linear-gradient(#e24c9e, #e24c9e) 72% 100% / 11% 55% no-repeat, linear-gradient(#ff5fb0, #ff5fb0) 85% 100% / 10% 96% no-repeat, linear-gradient(#e24c9e, #e24c9e) 97% 100% / 12% 70% no-repeat; }
.decor h1 { position: absolute; left: 0; right: 0; top: 8px; text-align: center; margin: 0; font-size: 38px; z-index: 2; pointer-events: none; }
.decor canvas { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; max-height: 100%; object-fit: contain; object-position: bottom; cursor: pointer; touch-action: pan-y; }
.cote { position: absolute; top: 64px; display: flex; flex-direction: column; gap: 12px; z-index: 3; }
.cote.gauche { left: 8px; } .cote.droite { right: 8px; }
.cote .tuile { width: 68px; padding: 2px 2px 4px; display: flex; flex-direction: column; align-items: center; font-size: 10.5px; }
.cote .tuile img { width: 40px; height: 40px; margin-top: -12px; filter: drop-shadow(0 3px 0 #0d0820); }
.de { display: block; width: 30px; height: 30px; margin: -10px 0 4px; background: radial-gradient(circle, #0d0820 0 2.6px, transparent 3px) 0 0 / 50% 50%, #fff; border: 3px solid #0d0820; border-radius: 8px; transform: rotate(12deg); box-shadow: 0 3px 0 #0d0820; }
.fleche { position: absolute; top: 58%; z-index: 3; width: 40px; height: 44px; border: 3px solid #0d0820; border-radius: 10px; background: rgba(255,255,255,.85); color: #0d0820; font-size: 16px; font-weight: 900; box-shadow: 0 4px 0 #0d0820; cursor: pointer; }
.fleche.g { left: 8px; } .fleche.d { right: 8px; }
.fleche:active { transform: translateY(3px); box-shadow: 0 1px 0 #0d0820; }
.plaque { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%) skewX(-5deg); z-index: 3; background: linear-gradient(#3a3156, #251d3d); border: 3px solid #0d0820; border-radius: 10px; box-shadow: 0 4px 0 #0d0820; padding: 3px 14px; text-align: center; white-space: nowrap; pointer-events: none; }
.plaque b { display: block; font-size: 16px; text-transform: uppercase; color: var(--jaune); -webkit-text-stroke: .6px #0d0820; }
.plaque span { font-size: 11.5px; color: var(--discret); }
.plaque.saute { animation: plaque .35s cubic-bezier(.3,1.9,.5,1); }
@keyframes plaque { from { transform: translateX(-50%) skewX(-5deg) scale(.6); } }
.bas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 8px; }
.tuile.mode { padding: 5px 8px; text-align: left; min-width: 0; }
.tuile.mode span { display: block; font-size: 10px; color: #5dea5d; -webkit-text-stroke: 0; }
.tuile.mode b { font-size: 14px; white-space: nowrap; }
.jouer { grid-column: 1 / -1; padding: 13px 10px; border: 4px solid #0d0820; border-radius: 12px; background: linear-gradient(#ffe24d 0 50%, #ffc21f 50%); box-shadow: 0 7px 0 #0d0820, inset 0 3px 0 rgba(255,255,255,.6); color: #fff; font: italic 900 30px/1 Impact, "Arial Black", sans-serif; letter-spacing: 1.5px; text-transform: uppercase; -webkit-text-stroke: 2px #0d0820; paint-order: stroke fill; text-shadow: 0 3px 0 #0d0820; transform: skewX(-5deg); cursor: pointer; animation: pulseJouer 1.4s ease-in-out infinite; }
.jouer:active { animation: none; transform: skewX(-5deg) translateY(5px); box-shadow: 0 2px 0 #0d0820; }
.ecran .jouer { font-size: 22px; }
.tuile.retour { padding: 7px 12px; font-size: 12px; }
@keyframes pulseJouer { 50% { transform: skewX(-5deg) scale(1.03); } }

/* 2026-11-14 (v0.6) : pièces, jeton d'équipement distinct, fenêtre « Relancer les dés », publicité simulée. */
.jeton { width: 24px; height: 24px; flex: none; background: linear-gradient(#8ff3ff, #2f9bff); border: 3px solid #0d0820; border-radius: 7px; transform: rotate(45deg) scale(.82); box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); }
.haut .tuile { padding: 4px 7px; gap: 5px; font-size: 12px; }
.haut .piece, .boite .piece { border-color: #0d0820; }
.voile { position: fixed; inset: 0; z-index: 20; background: rgba(13,8,32,.72); display: flex; align-items: center; justify-content: center; padding: 16px; animation: fondu .15s both; }
@keyframes fondu { from { opacity: 0; } }
.boite { width: min(100%, 340px); background: linear-gradient(#4f6bff, #3346d6); border: 4px solid #0d0820; border-radius: 18px; box-shadow: 0 7px 0 #0d0820; padding: 14px; display: flex; flex-direction: column; gap: 10px; animation: eclot .3s cubic-bezier(.3,1.7,.5,1) both; }
.boite h2 { margin: 0; font: italic 900 26px/1 Impact, "Arial Black", sans-serif; text-transform: uppercase; color: var(--jaune); -webkit-text-stroke: 1.5px #0d0820; paint-order: stroke fill; text-shadow: 0 3px 0 #0d0820; }
.boite p { margin: 0; font: 400 13px/1.4 -apple-system, "Segoe UI", sans-serif; }
.offre { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; background: #241a66; border: 3px solid #0d0820; border-radius: 12px; padding: 8px; }
.offre b { text-transform: uppercase; font-size: 13px; min-width: 0; }
.offre .bouton { display: flex; align-items: center; gap: 5px; padding: 6px 10px; }
.offre .piece { width: 20px; height: 20px; animation: none; }
.bouton.pub { background: linear-gradient(#7dff8a, #25b84a); color: var(--trait); text-shadow: none; }
.jauge { height: 14px; background: #120a3d; border: 3px solid #0d0820; border-radius: 8px; overflow: hidden; }
.jauge i { display: block; height: 100%; background: linear-gradient(90deg, var(--vert), var(--jaune)); transform-origin: left; animation: jauge 3s linear both; }
@keyframes jauge { from { transform: scaleX(0); } }
.fin .prime { font-size: 18px; color: var(--jaune); -webkit-text-stroke: .6px var(--trait); }

/* 2026-11-15 (v0.8) : réserve de guerriers, équipes, fiche revue (Vie et Énergie en avant, bandeau de dégâts collant,
   onglets par famille d'armes, dégâts sur chaque arme), tour de jeu plus visible en combat. */
.entete .titre { font-size: 13px; text-transform: uppercase; color: var(--discret); white-space: nowrap; }
.portraits.defile { justify-content: flex-start; overflow-x: auto; padding: 8px 6px 10px; margin: -4px -4px -6px; scrollbar-width: none; }
.portraits.defile::-webkit-scrollbar { display: none; }
.portraits.defile .portrait { flex: 0 0 54px; }
.portrait img { width: 100%; height: 100%; display: block; border-radius: 12px; }
.portrait span { background: linear-gradient(#7dff8a, #25b84a); }
.identite { display: flex; flex-direction: column; gap: 5px; }
.identite h2 { font-size: 22px; line-height: 1; }
.identite .metier { font-size: 12.5px; text-transform: uppercase; color: var(--jaune); letter-spacing: .5px; text-shadow: 0 2px 0 var(--trait); }
.vitaux { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.vital { position: relative; border: 3px solid var(--trait); border-radius: 12px; padding: 3px 4px 4px; text-align: center; box-shadow: 0 3px 0 var(--trait), inset 0 2px 0 rgba(255,255,255,.3); min-width: 0; }
.vital.vie { background: linear-gradient(#ff7b88, #d92d45); }
.vital.energie { background: linear-gradient(#5fd8ff, #1c7fd6); }
.vital i { position: absolute; left: 5px; top: 2px; font-style: normal; font-size: 13px; opacity: .85; }
.vital b { display: block; font: italic 900 30px/1 Impact, "Arial Black", sans-serif; -webkit-text-stroke: 1.5px var(--trait); paint-order: stroke fill; text-shadow: 0 2px 0 var(--trait); }
.vital span { display: block; font-size: 9.5px; text-transform: uppercase; white-space: nowrap; }
.maitrises .expert { background: linear-gradient(var(--jaune), var(--orange)); color: var(--trait); }
.fiche .passif { grid-column: 1 / -1; margin: 0; }
.fiche .carac b { font-size: 16px; }
.bilan { position: sticky; top: 0; z-index: 6; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 -6px; padding: 6px; background: var(--fond2); border-radius: 0 0 14px 14px; box-shadow: 0 6px 8px -4px rgba(0,0,0,.5); }
.bilan > div { padding: 3px 6px 4px; border-width: 3px; border-radius: 12px; }
.bilan b { font: italic 900 24px/1.05 Impact, "Arial Black", sans-serif; display: block; -webkit-text-stroke: 1.2px var(--trait); paint-order: stroke fill; }
.bilan small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
.bilan .fort.tir { background: linear-gradient(#ffb23f, #e0711a); }
.bilan .vide b { color: var(--discret); }
.bilan .fort small { color: #fff; }
.detail { min-height: 50px; padding: 6px 10px; }
.familles { display: flex; gap: 5px; margin-bottom: 8px; }
.familles button { flex: 1; min-width: 0; padding: 6px 3px; border: 3px solid var(--trait); border-radius: 10px 10px 4px 4px; background: #2b2380; color: var(--discret); font-size: 10.5px; font-weight: 900; text-transform: uppercase; line-height: 1.1; cursor: pointer; box-shadow: 0 3px 0 var(--trait); }
.familles button.on { background: linear-gradient(#7dff8a, #25b84a); color: var(--trait); transform: translateY(-2px); }
.objet .degats { margin-top: 1px; padding: 0 6px; background: var(--trait); border-radius: 999px; font: italic 900 13px/1.35 Impact, "Arial Black", sans-serif; color: var(--jaune); letter-spacing: .4px; }
.objet .nom { min-height: 2.3em; }
.choix.fige .objet:not(.choisi) { filter: grayscale(.7) brightness(.75); }
.valide { background: linear-gradient(#7dff8a, #25b84a); color: var(--trait); border: 3px solid var(--trait); border-radius: 999px; padding: 4px 12px; text-transform: uppercase; font-size: 12.5px; box-shadow: 0 3px 0 var(--trait); }
.rangee .bouton .piece, .bouton .piece { display: inline-block; width: 18px; height: 18px; vertical-align: -4px; margin-right: 4px; animation: none; border-width: 2px; }
.rangee .compte { font-size: 11.5px; color: var(--discret); text-transform: uppercase; }
.bouton.discret { background: none; border-color: rgba(255,255,255,.25); box-shadow: none; color: var(--discret); font-size: 11.5px; text-shadow: none; }
.boite .rangee { flex-wrap: nowrap; }

.nomEquipe { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; }
.nomEquipe label { grid-column: 1 / -1; font-size: 10.5px; text-transform: uppercase; color: var(--discret); }
.nomEquipe input { min-width: 0; font: 900 18px var(--police); color: var(--jaune); background: #241a66; border: 3px solid var(--trait); border-radius: 12px; padding: 6px 10px; box-shadow: inset 0 3px 0 rgba(0,0,0,.25); text-transform: uppercase; }
.nomEquipe b { font: italic 900 24px/1 Impact, "Arial Black", sans-serif; color: var(--rouge); -webkit-text-stroke: 1.2px var(--trait); paint-order: stroke fill; }
.nomEquipe b.plein { color: var(--vert); }
.aide { margin: 0; font: 400 12px/1.35 -apple-system, "Segoe UI", sans-serif; color: var(--discret); }
.reserve { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 8px; }
.carte { position: relative; min-width: 0; border: 3px solid var(--trait); border-radius: 16px; background: linear-gradient(#5a5f8a, #3c4068); box-shadow: 0 5px 0 var(--trait), inset 0 2px 0 rgba(255,255,255,.25); animation: eclot .3s cubic-bezier(.3,1.7,.5,1) both; animation-delay: calc(var(--k, 0) * 30ms); }
.carte.dedans { background: linear-gradient(var(--carte1), var(--carte2)); outline: 3px solid var(--jaune); outline-offset: 1px; }
.carte .corps { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 2px 3px 6px; border: 0; background: none; cursor: pointer; min-width: 0; }
.carte img { width: 72px; height: 72px; }
.carte b { font-size: 14px; text-transform: uppercase; text-shadow: 0 2px 0 var(--trait); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carte .corps > span { font-size: 9.5px; text-transform: uppercase; color: var(--jaune); white-space: nowrap; }
.carte small { font-size: 11px; white-space: nowrap; }
.carte small i, .plaque i { font-style: normal; }
.carte .v, .plaque .v { color: #ff9aa5; } .carte .e, .plaque .e { color: #8fe3ff; }
.carte em { font-style: normal; font-size: 9.5px; text-transform: uppercase; background: var(--trait); border-radius: 999px; padding: 0 7px; margin-top: 2px; color: #ffb3ba; }
.carte em.pret { color: var(--vert); }
.etoile { position: absolute; top: -9px; right: -7px; width: 34px; height: 34px; border: 3px solid var(--trait); border-radius: 50%; background: #2b2380; color: #6f74a8; font-size: 16px; line-height: 1; cursor: pointer; box-shadow: 0 3px 0 var(--trait); }
.etoile[aria-pressed="true"] { background: linear-gradient(var(--jaune), var(--orange)); color: var(--trait); }
.carte.vide { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 132px; padding: 6px 3px; background: linear-gradient(#35c267, #1f9a4b); cursor: pointer; color: #fff; }
.carte.vide#place { background: linear-gradient(#6f8bff, #3d55e6); }
.carte.vide .plus { font: 900 34px/1 Impact, "Arial Black", sans-serif; font-style: normal; -webkit-text-stroke: 1.5px var(--trait); paint-order: stroke fill; }
.carte.vide span { display: flex; align-items: center; gap: 4px; font-size: 15px; color: var(--jaune); text-shadow: 0 2px 0 var(--trait); }
.carte.vide .piece { width: 18px; height: 18px; border-width: 2px; animation: none; }
.carte.vide small { font: 400 9.5px/1.2 -apple-system, "Segoe UI", sans-serif; text-align: center; white-space: normal; }
.carte.libre { min-height: 132px; background: rgba(13,8,32,.25); border-style: dashed; border-color: rgba(255,255,255,.3); box-shadow: none; }

.fanion { position: absolute; left: 50%; top: 52px; z-index: 3; transform: translateX(-50%) skewX(-5deg); max-width: 60%; padding: 2px 14px; border: 3px solid #0d0820; border-radius: 999px; background: linear-gradient(var(--jaune), var(--orange)); color: #0d0820; font-size: 13px; font-weight: 900; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 3px 0 #0d0820; cursor: pointer; }
.cote { top: 92px; }
.tuile.niveau { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.1; }
.tuile.niveau span { font-size: 16px; color: var(--jaune); }
.tuile.niveau small { font-size: 9.5px; color: var(--discret); -webkit-text-stroke: 0; }
.plaque em { font-style: normal; color: #ffb3ba; }
.resultat.attente { background: linear-gradient(#ff9a1f, #e0641a); }
.jouer.attente { background: linear-gradient(#c9d2e3 0 50%, #9aa6c2 50%); animation: none; font-size: 24px; }

.combat .terrain { transition: border-color .25s, box-shadow .25s; }
.combat.tourJoueur .terrain { border-color: #ffd23f; box-shadow: 0 6px 0 var(--trait), 0 0 0 3px var(--trait), 0 0 22px 4px rgba(47,155,255,.9); }
.combat.tourIA .terrain { border-color: var(--rouge); box-shadow: 0 6px 0 var(--trait), 0 0 0 3px var(--trait), 0 0 22px 4px rgba(255,77,94,.75); }
.barre .main { font-size: 13px; padding: 3px 12px; font-weight: 900; }
.barre .main.joueur { background: linear-gradient(var(--jaune), var(--orange)); color: var(--trait); animation: pulse 1s ease-in-out infinite; }
.entete .tuile.jetons { display: flex; align-items: center; gap: 5px; padding: 3px 9px 3px 6px; cursor: default; }
.entete .tuile.jetons .piece { width: 22px; height: 22px; border-color: #0d0820; }
.entete { gap: 6px; }
.bilan .fort small, .bilan .vide small { white-space: normal; line-height: 1.2; }
.carte.libre { min-height: 56px; }
.carte .corps > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* 2026-11-15 (v0.8) : boutique (emotes, skins), choix de la tenue sur la fiche, barre d'emotes en combat. */
.carte.article { display: flex; flex-direction: column; align-items: center; padding: 2px 3px 7px; cursor: pointer; color: #fff; }
.carte.article img { width: 86px; height: 86px; }
.carte.article > span { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--jaune); text-shadow: 0 2px 0 var(--trait); text-transform: uppercase; }
.carte.article.dedans > span { color: var(--vert); font-size: 10.5px; }
.carte.article .piece { width: 17px; height: 17px; border-width: 2px; animation: none; }
.piece.grosse { display: block; width: 32px; height: 32px; margin: -10px 0 3px; border-color: #0d0820; }
.tenues { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tenues span { font-size: 10.5px; text-transform: uppercase; color: var(--discret); }
.tenues button { width: 30px; height: 30px; border: 3px solid var(--trait); border-radius: 50%; background: var(--c); box-shadow: 0 3px 0 var(--trait), inset 0 3px 0 rgba(255,255,255,.4); cursor: pointer; }
.tenues button.on { outline: 3px solid var(--jaune); outline-offset: 2px; transform: translateY(-2px); }
.emotes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.emotes button { min-width: 38px; height: 34px; padding: 0 6px; border: 3px solid var(--trait); border-radius: 999px 999px 999px 6px; background: #fff; color: #2f6bff; font: 900 14px "Arial Black", Arial, sans-serif; box-shadow: 0 3px 0 var(--trait); cursor: pointer; }
.emotes button:active { transform: translateY(3px); box-shadow: none; }
/* 2026-11-15 (v0.9) : skills (boutique, fiche, bouton en combat). */
.carte.article .signe { font-style: normal; font-size: 40px; line-height: 1.5; }
.carte.article small { font: 400 9.5px/1.25 -apple-system, "Segoe UI", sans-serif; text-align: center; white-space: normal; padding: 0 2px 3px; color: var(--discret); }
.tenues.skills button { width: auto; height: auto; border-radius: 999px; padding: 3px 9px; background: #2b2380; color: #fff; font-size: 11px; font-weight: 900; }
.tenues.skills button.on { background: linear-gradient(var(--jaune), var(--orange)); color: var(--trait); }
.tenues.skills small { flex-basis: 100%; font: 400 11.5px/1.3 -apple-system, "Segoe UI", sans-serif; color: #eef0ff; }
.bouton.skill { background: linear-gradient(#c26bff, #7a35d9); }
.bouton.skill.actif { background: linear-gradient(var(--jaune), var(--orange)); color: var(--trait); text-shadow: none; }
/* 2026-11-15 (v0.9) : niveau et XP des guerriers, bilan de fin de partie, icônes d'action sur le côté du terrain. */
.xp { display: grid; grid-template-columns: auto 1fr; gap: 0 6px; align-items: center; }
.xp b { font-size: 13px; color: var(--jaune); text-transform: uppercase; text-shadow: 0 2px 0 var(--trait); }
.xp i, .gain i { display: block; height: 8px; background: #120a3d; border: 2px solid var(--trait); border-radius: 5px; overflow: hidden; }
.xp u, .gain u { display: block; height: 100%; background: linear-gradient(90deg, #c26bff, #7fd0ff); animation: remplit .7s cubic-bezier(.3,1.2,.5,1) both; transform-origin: left; }
.xp small { grid-column: 1 / -1; font: 400 10px/1.2 -apple-system, "Segoe UI", sans-serif; color: var(--discret); }
.zoneTerrain { position: relative; width: min(100%, calc((100dvh - 215px) * 9 / 13)); margin: 0 auto; }
.zoneTerrain .terrain { width: 100%; }
.zoneTerrain .actions { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); flex-direction: column; flex-wrap: nowrap; gap: 6px; margin: 0; z-index: 4; }
.zoneTerrain .actions.gauche { right: auto; left: 5px; }
.icone { width: 52px; padding: 1px 1px 3px; display: flex; flex-direction: column; align-items: center; border: 3px solid var(--trait); border-radius: 12px; background: linear-gradient(#6f8bff, #3d55e6); box-shadow: 0 3px 0 var(--trait), inset 0 2px 0 rgba(255,255,255,.35); cursor: pointer; opacity: .95; }
.icone img { width: 36px; height: 36px; pointer-events: none; }
.icone i { font-style: normal; font-size: 22px; line-height: 36px; height: 36px; }
.icone small { font: 900 9.5px/1.1 var(--police); white-space: nowrap; text-shadow: 0 1px 0 rgba(0,0,0,.5); }
.icone.actif { background: linear-gradient(#7dff8a, #25b84a); outline: 3px solid var(--jaune); outline-offset: 1px; }
.icone.actif small { color: var(--trait); text-shadow: none; }
.icone.skill { background: linear-gradient(#c26bff, #7a35d9); }
.icone.skill.actif { background: linear-gradient(var(--jaune), var(--orange)); }
.icone.passe { background: linear-gradient(#5a5f8a, #3c4068); }
.icone:disabled { filter: grayscale(.9) brightness(.65); cursor: default; }
.icone:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.panneau { min-height: 96px; margin-top: 10px; }
.fin { overflow-y: auto; justify-content: flex-start; padding: 18px 10px; gap: 10px; }
.fin h2 { font-size: 46px; }
.partie { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.totaux { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.totaux > div { background: #241a66; border: 3px solid var(--trait); border-radius: 12px; text-align: center; padding: 3px; }
.totaux span { display: block; font-size: 10px; text-transform: uppercase; color: var(--discret); }
.totaux b { font: italic 900 24px/1.1 Impact, "Arial Black", sans-serif; color: var(--jaune); -webkit-text-stroke: 1.2px var(--trait); paint-order: stroke fill; }
.gain { display: grid; grid-template-columns: 44px 1fr auto auto; gap: 8px; align-items: center; background: linear-gradient(var(--carte1), var(--carte2)); border: 3px solid var(--trait); border-radius: 12px; padding: 3px 8px 3px 3px; animation: monte .35s cubic-bezier(.3,1.4,.5,1) both; }
.gain.ko { filter: saturate(.45); }
.gain img { width: 44px; height: 44px; }
.gain b { display: block; font-size: 13px; text-transform: uppercase; }
.gain small { display: block; font: 400 10.5px/1.2 -apple-system, "Segoe UI", sans-serif; color: #eef0ff; margin-bottom: 2px; }
.gain em { font-style: normal; font-size: 14px; color: #d9a6ff; white-space: nowrap; }
.gain span { font-size: 11px; color: var(--discret); text-transform: uppercase; white-space: nowrap; }
.gain strong { font-size: 11px; background: linear-gradient(var(--jaune), var(--orange)); color: var(--trait); border: 2px solid var(--trait); border-radius: 999px; padding: 1px 7px; text-transform: uppercase; white-space: nowrap; animation: pulse 1s ease-in-out infinite; }
.fin .prime { width: 100%; font-size: 14px; color: #fff; -webkit-text-stroke: 0; }
/* 2026-11-15 (v0.10) : portraits manga — cartes de la réserve façon collection, grand portrait sur la fiche. */
.portrait img, .gain img { object-fit: cover; }
.gain img { border: 2px solid var(--trait); border-radius: 9px; }
.cote .tuile img { border-radius: 9px; }
.scene.manga { position: relative; background: none; }
.scene.manga img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.scene.manga canvas { position: absolute; right: -6px; bottom: -10px; width: 58%; filter: drop-shadow(0 3px 0 rgba(13,8,32,.6)); }
.carte { overflow: visible; transform: skewX(-3deg); }
.carte .corps { padding: 0 0 5px; position: relative; }
.carte .corps img { width: 100%; height: auto; aspect-ratio: 1.08; object-fit: cover; object-position: top; border-radius: 12px 12px 0 0; border-bottom: 3px solid var(--trait); }
.carte .corps b { margin-top: -15px; position: relative; font: italic 900 17px/1 Impact, "Arial Black", sans-serif; letter-spacing: .5px; -webkit-text-stroke: 3px var(--trait); paint-order: stroke fill; text-shadow: 0 2px 0 var(--trait); align-self: flex-end; padding-right: 5px; }
.carte .niv { position: absolute; left: -7px; top: -8px; min-width: 26px; height: 26px; padding: 0 4px; display: grid; place-items: center; background: linear-gradient(#c26bff, #7a35d9); border: 3px solid var(--trait); border-radius: 8px; transform: rotate(-8deg); font: italic 900 15px/1 Impact, "Arial Black", sans-serif; box-shadow: 0 2px 0 var(--trait); }
.carte.article { transform: none; }
/* 2026-11-15 (v0.11) : accueil refait (profil, panneaux en biais par format de partie) et barre d'onglets du bas. */
.accueil.v2 { gap: 8px; }
.profil { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 3px 12px 3px 3px; border: 3px solid #0d0820; border-radius: 12px; background: linear-gradient(#3a3156, #251d3d); box-shadow: 0 4px 0 #0d0820; color: #fff; text-align: left; cursor: pointer; transform: skewX(-5deg); }
.profil img { width: 38px; height: 38px; border: 2px solid #0d0820; border-radius: 8px; object-fit: cover; flex: none; }
.profil span { min-width: 0; }
.profil b { display: block; font-size: 14px; text-transform: uppercase; color: var(--jaune); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profil small { display: block; font: 400 10px/1.2 -apple-system, "Segoe UI", sans-serif; color: var(--discret); white-space: nowrap; }
.haut button.tuile { cursor: pointer; }
.plusPieces { font-style: normal; display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid #0d0820; border-radius: 6px; background: linear-gradient(#7dff8a, #25b84a); color: #0d0820; font-size: 15px; line-height: 1; -webkit-text-stroke: 0; }
.accueil.v2 .decor { min-height: 230px; }
.accueil.v2 .decor h1 { font-size: 30px; top: 6px; }
.accueil.v2 .cote { top: 46px; }
.modes { display: flex; flex-direction: column; gap: 7px; }
.modes .mode { position: relative; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 8px; min-height: 50px; padding: 3px 10px 3px 6px; border: 3px solid #0d0820; border-radius: 10px; color: #fff; text-align: left; cursor: pointer; box-shadow: 0 4px 0 #0d0820, inset 0 2px 0 rgba(255,255,255,.25); overflow: hidden; filter: saturate(.55) brightness(.8); transition: transform .08s, filter .15s; }
.modes .mode:active { transform: translateY(3px); box-shadow: 0 1px 0 #0d0820; }
.modes .mode.on { filter: none; outline: 3px solid var(--jaune); outline-offset: 1px; }
.modes .m3 { background: linear-gradient(105deg, #a45cff 0 60%, #3a1a7a 60.3%); }
.modes .m4 { background: linear-gradient(105deg, #ffb41f 0 60%, #8a4a0a 60.3%); }
.modes .m5 { background: linear-gradient(105deg, #ff4d5e 0 60%, #7a1424 60.3%); }
.gemme { display: grid; place-items: center; width: 36px; height: 36px; font: italic 900 22px/1 Impact, "Arial Black", sans-serif; font-style: italic; background: linear-gradient(#fff, #cfd6ff); color: #0d0820; border: 3px solid #0d0820; border-radius: 9px; transform: rotate(45deg) scale(.82); }
.modes .texte { min-width: 0; }
.modes .texte b { display: block; font: italic 900 19px/1.05 Impact, "Arial Black", sans-serif; text-transform: uppercase; letter-spacing: .6px; -webkit-text-stroke: 3px #0d0820; paint-order: stroke fill; }
.modes .texte small { display: block; font: 700 10.5px/1.2 -apple-system, "Segoe UI", sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 0 rgba(0,0,0,.5); }
.tetes { display: flex; }
.tetes img { width: 30px; height: 30px; margin-left: -8px; border: 2px solid #0d0820; border-radius: 50%; object-fit: cover; object-position: top; }
.modes .mode em { position: absolute; right: 2px; top: 0; font-style: normal; font-size: 12px; color: var(--jaune); text-shadow: 0 1px 0 #0d0820; }
.accueil.v2 .bas { grid-template-columns: 118px 1fr; align-items: stretch; }
.accueil.v2 .bas .jouer { grid-column: auto; font-size: 27px; padding: 10px 6px; }
.accueil.v2 .bas .jouer.attente { font-size: 22px; }
.onglets { position: sticky; bottom: 6px; z-index: 8; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: auto; padding: 0 4px; background: linear-gradient(#2a2244, #171029); border: 3px solid #0d0820; border-radius: 16px; box-shadow: 0 5px 0 #0d0820, 0 -6px 14px rgba(13,8,32,.45); }
.onglets button { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 4px 2px 5px; border: 0; background: none; color: var(--discret); font-size: 10px; font-weight: 900; text-transform: uppercase; cursor: pointer; transition: transform .15s cubic-bezier(.3,1.8,.5,1); }
.onglets i { font-style: normal; font-size: 22px; line-height: 1.25; filter: grayscale(.6); }
.onglets button.on { color: #0d0820; background: linear-gradient(var(--jaune), var(--orange)); border: 3px solid #0d0820; border-radius: 14px; margin: -10px 0 -3px; padding-top: 6px; transform: scale(1.06); box-shadow: 0 3px 0 #0d0820; }
.onglets button.on i { filter: none; font-size: 26px; }
.ecran { min-height: calc(100dvh - 26px); }
.gemme { transform: rotate(-6deg); border-radius: 10px; }
/* 2026-11-15 (v0.12) : bouton du son sur l'accueil. */
.haut .tuile.son { padding: 2px 8px; font-size: 19px; -webkit-text-stroke: 0; margin-left: auto; }
.accueil.v2 .haut { justify-content: flex-start; }

/* 2026-11-15 (v0.13) : les icônes d'action passent sous le terrain (sur le côté, elles cachaient des cases où se déplacer). */
.zoneTerrain { width: min(100%, calc((100dvh - 285px) * 9 / 13)); }
.zoneTerrain .actions, .zoneTerrain .actions.gauche { position: static; transform: none; flex-direction: row; justify-content: center; min-height: 64px; margin-top: 6px; }

/* 2026-11-15 (v0.15) : écran Amis (profil en ligne, code ami, défis) et cinquième onglet. */
.onglets.cinq { grid-template-columns: repeat(5, 1fr); }
.onglets button { position: relative; }
.pastille { position: absolute; top: -4px; right: 8%; min-width: 18px; padding: 0 4px; background: #ff3b5c; color: #fff; border: 2px solid #0d0820; border-radius: 999px; font: 900 11px/16px var(--police); font-style: normal; }
.amis { display: flex; flex-direction: column; gap: 10px; min-height: calc(100dvh - 30px); }
.titreEcran { margin: 0; font: italic 900 30px/1 Impact, "Arial Black", sans-serif; color: var(--jaune); -webkit-text-stroke: 1.5px var(--trait); text-shadow: 0 3px 0 var(--trait); flex: 1; }
.bloc { padding: 10px 12px 12px; background: linear-gradient(#2f2880, #231c63); border: 3px solid var(--trait); border-radius: 16px; box-shadow: 0 4px 0 var(--trait); display: flex; flex-direction: column; gap: 8px; }
.bloc h2 { margin: 0; font-size: 15px; text-transform: uppercase; color: var(--jaune); text-shadow: 0 2px 0 var(--trait); }
.bloc p { margin: 0; font: 400 12.5px/1.4 -apple-system, "Segoe UI", sans-serif; color: #dfe3ff; }
.bloc.defis { background: linear-gradient(#7a35d9, #4a1f96); }
.saisie { display: flex; gap: 8px; }
.saisie input { flex: 1; min-width: 0; padding: 9px 10px; font: 700 16px/1.2 -apple-system, "Segoe UI", sans-serif; color: #fff; background: #120a3d; border: 3px solid var(--trait); border-radius: 12px; }
.saisie input::placeholder { color: #8f95c9; }
.codeAmi { display: flex; align-items: center; gap: 10px; }
.codeAmi span { font-size: 10.5px; text-transform: uppercase; color: var(--discret); }
.codeAmi b { flex: 1; font: 900 26px/1 ui-monospace, Menlo, monospace; letter-spacing: 3px; color: #fff; }
.ligne { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 2px solid rgba(255,255,255,.08); }
.ligne span { flex: 1; min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
.ligne small { display: block; font: 400 11px/1.2 -apple-system, "Segoe UI", sans-serif; color: var(--discret); }
.ligne .bouton { padding: 7px 10px; font-size: 12px; flex: none; }
.etat { width: 12px; height: 12px; flex: none; border-radius: 50%; background: #5a5f8a; border: 2px solid var(--trait); }
.etat.la { background: #5dea5d; box-shadow: 0 0 8px #5dea5d; }
code.cle { display: block; margin-top: 8px; padding: 8px; background: #120a3d; border-radius: 8px; font: 700 12px/1.4 ui-monospace, Menlo, monospace; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }

/* 2026-11-15 (v0.16) : point de caractéristique à placer, bouton d'aide, fenêtre d'aide, rodage dans le bilan. */
.carac { position: relative; }
.plusCarac { position: absolute; top: -8px; right: -6px; width: 26px; height: 26px; padding: 0; border: 2px solid var(--trait); border-radius: 50%; background: linear-gradient(#7dff8a, #25b84a); color: var(--trait); font: 900 18px/1 var(--police); box-shadow: 0 2px 0 var(--trait); cursor: pointer; animation: balance .6s cubic-bezier(.3,1.8,.5,1) infinite alternate; }
.aPlacer { grid-column: 1 / -1; padding: 6px 10px; background: linear-gradient(var(--jaune), var(--orange)); color: var(--trait); border: 2px solid var(--trait); border-radius: 10px; font-size: 12.5px; font-weight: 900; }
.aideBouton { margin-left: auto; padding: 3px 10px; border: 2px solid var(--trait); border-radius: 999px; background: #2b2380; color: #fff; font: 900 11px/1.4 var(--police); cursor: pointer; }
.boite.info { max-height: 82dvh; overflow-y: auto; text-align: left; }
.aideTexte p { margin: 0 0 8px; font: 400 13px/1.45 -apple-system, "Segoe UI", sans-serif; }
.aideTexte b { color: var(--jaune); }
.gain .rode { display: block; margin-top: 2px; color: #7dff8a; font: 700 11px/1.3 -apple-system, "Segoe UI", sans-serif; }
.objet small, .detail small { font: 400 11px/1.3 -apple-system, "Segoe UI", sans-serif; color: var(--discret); }